{"version":3,"sources":["../../src/runtime/CanvasHooksContext.tsx","../../src/runtime/ToolpadApp.tsx","../../src/appDom/index.ts","../../src/utils/immutability.ts","../../src/server/schema.ts","../../src/bindings.ts","../../src/runtime/toolpadComponents/index.tsx","../../src/runtime/AppThemeProvider.tsx","../../src/runtime/evalJsBindings.ts","../../src/runtime/constants.ts","../../src/runtime/toolpadComponents/layoutBox.ts","../../src/runtime/useDataQuery.ts","../../src/runtime/AppNavigation.tsx","../../src/runtime/PreviewHeader.tsx","../../src/toolpad/ToolpadShell/Header/index.tsx","../../src/toolpad/ToolpadShell/Header/UserFeedback/index.tsx","../../src/utils/useMenu.ts","../../src/constants.ts","../../src/api.ts","../../src/rpcClient.ts","../../src/utils/useBoolean.ts","../../src/toolpad/ToolpadShell/Header/ThemeModeMenu.tsx","../../src/ThemeContext.tsx","../../src/theme.ts","../../src/utils/useLocalStorageState.ts","../../src/utils/useEvent.ts"],"sourcesContent":["import { NodeId } from '@mui/toolpad-core';\nimport * as React from 'react';\nimport { NodeHashes } from '../types';\n\nexport interface NavigateToPage {\n (pageNodeId: NodeId, pageParameters?: Record): void;\n}\n\n/**\n * Context created by the app canvas to override behavior for the app editor\n */\nexport interface CanvasHooks {\n savedNodes?: NodeHashes;\n}\n\nexport const CanvasHooksContext = React.createContext({});\n","import * as React from 'react';\nimport {\n Stack,\n CssBaseline,\n Alert,\n Box,\n styled,\n AlertTitle,\n LinearProgress,\n Container,\n Tooltip,\n Typography,\n} from '@mui/material';\nimport {\n ToolpadComponent,\n createComponent,\n TOOLPAD_COMPONENT,\n Slots,\n Placeholder,\n NodeId,\n BindableAttrValue,\n NestedBindableAttrs,\n BindingEvaluationResult,\n ScopeMeta,\n getArgTypeDefaultValue,\n ScopeMetaPropField,\n ComponentsContextProvider,\n isToolpadComponent,\n createToolpadComponentThatThrows,\n useComponents,\n useComponent,\n RuntimeScope,\n ApplicationVm,\n JsExpressionAttrValue,\n} from '@mui/toolpad-core';\nimport { createProvidedContext, useAssertedContext } from '@mui/toolpad-utils/react';\nimport { QueryClient, QueryClientProvider, useMutation } from '@tanstack/react-query';\nimport {\n BrowserRouter,\n Routes,\n Route,\n useLocation,\n Navigate,\n Location as RouterLocation,\n useNavigate,\n matchPath,\n} from 'react-router-dom';\nimport { ErrorBoundary, FallbackProps } from 'react-error-boundary';\nimport {\n CanvasEventsContext,\n NodeErrorProps,\n NodeRuntimeWrapper,\n ResetNodeErrorsKeyProvider,\n} from '@mui/toolpad-core/runtime';\nimport * as _ from 'lodash-es';\nimport ErrorIcon from '@mui/icons-material/Error';\nimport { getBrowserRuntime } from '@mui/toolpad-core/jsBrowserRuntime';\nimport * as builtIns from '@mui/toolpad-components';\nimport { errorFrom } from '@mui/toolpad-utils/errors';\nimport { mapProperties, mapValues } from '@mui/toolpad-utils/collections';\nimport useBoolean from '@mui/toolpad-utils/hooks/useBoolean';\nimport usePageTitle from '@mui/toolpad-utils/hooks/usePageTitle';\nimport invariant from 'invariant';\nimport * as appDom from '../appDom';\nimport { RuntimeState } from '../types';\nimport { getBindingType, getBindingValue } from '../bindings';\nimport {\n getElementNodeComponentId,\n INTERNAL_COMPONENTS,\n isPageLayoutComponent,\n isPageRow,\n PAGE_ROW_COMPONENT_ID,\n} from './toolpadComponents';\nimport AppThemeProvider from './AppThemeProvider';\nimport evalJsBindings, {\n buildGlobalScope,\n EvaluatedBinding,\n ParsedBinding,\n} from './evalJsBindings';\nimport { HTML_ID_EDITOR_OVERLAY, NON_BINDABLE_CONTROL_TYPES } from './constants';\nimport { layoutBoxArgTypes } from './toolpadComponents/layoutBox';\nimport { execDataSourceQuery, useDataQuery, UseDataQueryConfig, UseFetch } from './useDataQuery';\nimport { NavigateToPage } from './CanvasHooksContext';\nimport AppNavigation from './AppNavigation';\nimport PreviewHeader from './PreviewHeader';\nimport useEvent from '../utils/useEvent';\n\nconst browserJsRuntime = getBrowserRuntime();\n\nconst isPreview = process.env.NODE_ENV !== 'production';\nconst isRenderedInCanvas =\n typeof window === 'undefined'\n ? false\n : !!(window.frameElement as HTMLIFrameElement)?.dataset?.toolpadCanvas;\n\nconst Pre = styled('pre')(({ theme }) => ({\n margin: 0,\n fontFamily: theme.fontFamilyMonospaced,\n}));\n\nconst PREVIEW_PAGE_ROUTE = '/preview/pages/:nodeId';\n\nexport const internalComponents: ToolpadComponents = Object.fromEntries(\n [...INTERNAL_COMPONENTS].map(([name]) => {\n let builtIn = (builtIns as any)[name];\n\n if (!isToolpadComponent(builtIn)) {\n builtIn = createToolpadComponentThatThrows(\n new Error(`Imported builtIn \"${name}\" is not a ToolpadComponent`),\n );\n }\n\n return [name, builtIn];\n }),\n);\n\nconst ReactQueryDevtoolsProduction = React.lazy(() =>\n import('@tanstack/react-query-devtools/build/lib/index.prod.js').then((d) => ({\n default: d.ReactQueryDevtools,\n })),\n);\n\nconst EMPTY_ARRAY: any[] = [];\nconst EMPTY_OBJECT: any = {};\n\nconst INITIAL_FETCH: UseFetch = {\n call: async () => {},\n refetch: async () => {},\n fetch: async () => {},\n isLoading: false,\n isFetching: false,\n error: null,\n data: null,\n rows: [],\n};\n\nconst USE_DATA_QUERY_CONFIG_KEYS: readonly (keyof UseDataQueryConfig)[] = [\n 'enabled',\n 'refetchInterval',\n];\n\nfunction usePageNavigator(): NavigateToPage {\n const navigate = useNavigate();\n\n const canvasEvents = React.useContext(CanvasEventsContext);\n\n const navigateToPage: NavigateToPage = React.useCallback(\n (pageNodeId, pageParameters) => {\n const urlParams = pageParameters && new URLSearchParams(pageParameters);\n\n if (canvasEvents) {\n canvasEvents.emit('pageNavigationRequest', { pageNodeId });\n } else {\n navigate({\n pathname: `/pages/${pageNodeId}`,\n ...(urlParams\n ? {\n search: urlParams.toString(),\n }\n : {}),\n });\n }\n },\n [canvasEvents, navigate],\n );\n\n return navigateToPage;\n}\n\nfunction isEqual(\n a: BindingEvaluationResult,\n b: BindingEvaluationResult,\n): boolean {\n return a.value === b.value && !!a.error === !!b.error && a.loading === b.loading;\n}\n\nconst AppRoot = styled('div')({\n overflow: 'auto' /* Prevents margins from collapsing into root */,\n position: 'relative' /* Makes sure that the editor overlay that renders inside sizes correctly */,\n minHeight: '100vh',\n display: 'flex',\n flexDirection: 'column',\n});\n\nconst EditorOverlay = styled('div')({\n position: 'absolute',\n inset: '0 0 0 0',\n pointerEvents: 'none',\n overflow: 'hidden',\n});\n\ntype ToolpadComponents = Partial>>;\n\ninterface CreateScopeParams {\n parentScope?: RuntimeScope;\n localValues?: Record | undefined;\n meta: ScopeMeta;\n}\n\nfunction createScope(\n id: string,\n bindings: Record>,\n { localValues, parentScope, meta = {} }: CreateScopeParams,\n): RuntimeScope {\n const scopeValues = { ...parentScope?.values, ...localValues };\n\n const evaluatedBindings = evalJsBindings(browserJsRuntime, bindings, scopeValues);\n\n return {\n id,\n parentScope,\n bindings: mapValues(evaluatedBindings, (binding) => binding.result || { value: undefined }),\n values: buildGlobalScope(scopeValues, evaluatedBindings),\n meta,\n };\n}\n\ntype ApplicationVmApi = {\n registerScope: (scope: RuntimeScope) => () => void;\n registerBindingScope: (bindingId: string, scope: RuntimeScope) => () => void;\n};\n\nfunction useApplicationVm(onUpdate: (registry: ApplicationVm) => void) {\n const vm: ApplicationVm = { scopes: {}, bindingScopes: {} };\n\n let scheduledUpdate: Promise | undefined;\n const scheduleUpdate = () => {\n if (scheduledUpdate) {\n return;\n }\n scheduledUpdate = Promise.resolve().then(() => {\n onUpdate(vm);\n scheduledUpdate = undefined;\n });\n };\n\n return React.useRef({\n registerScope(scope: RuntimeScope) {\n if (vm.scopes[scope.id]) {\n throw new Error(`Scope with id \"${scope.id}\" already registered`);\n }\n vm.scopes[scope.id] = scope;\n scheduleUpdate();\n return () => {\n delete vm.scopes[scope.id];\n scheduleUpdate();\n };\n },\n registerBindingScope(bindingId: string, scope: RuntimeScope) {\n if (vm.bindingScopes[bindingId]) {\n return () => {};\n }\n vm.bindingScopes[bindingId] = scope.id;\n scheduleUpdate();\n return () => {\n delete vm.bindingScopes[bindingId];\n scheduleUpdate();\n };\n },\n });\n}\n\nconst ApplicationVmApiContext = React.createContext<\n React.MutableRefObject | undefined\n>(undefined);\nconst RuntimeScopeContext = React.createContext(undefined);\nconst [useDomContext, DomContextProvider] = createProvidedContext('Dom');\nconst [useEvaluateScopeExpression, EvaluateScopeExpressionProvider] =\n createProvidedContext<(expr: string) => any>('EvaluateScopeExpression');\n\ninterface SetBindingContextValue {\n setBinding: (id: string, result: BindingEvaluationResult, scopeId?: string) => void;\n setControlledBinding: (id: string, result: BindingEvaluationResult, scopeId?: string) => void;\n setBindingByScopePath: (\n scopePath: string,\n result: BindingEvaluationResult,\n scopeId?: string,\n ) => void;\n}\n\nconst SetBindingContext = React.createContext(undefined);\n\nfunction getComponentId(elm: appDom.ElementNode): string {\n const componentId = getElementNodeComponentId(elm);\n return componentId;\n}\n\n/**\n * Turns an object consisting of a nested structure of BindableAttrValues\n * into a flat array of relative paths associated with their value.\n * Example:\n * { foo: { bar: 1 }, baz: [{ $$jsExpression: 'quux' }] }\n * =>\n * [\n * ['.foo.bar', 1],\n * ['.baz[0]', { $$jsExpression: 'quux' }]\n * ]\n */\nfunction flattenNestedBindables(\n params?: NestedBindableAttrs,\n prefix = '',\n): [string, BindableAttrValue][] {\n if (!params) {\n return [];\n }\n if (Array.isArray(params)) {\n return params.flatMap((param, i) => {\n return flattenNestedBindables(param[1], `${prefix}[${i}][1]`);\n });\n }\n // TODO: create a marker in bindables (similar to $ref) to recognize them automatically\n // in a nested structure. This would allow us to build deeply nested structures\n if (typeof params !== 'object' || getBindingType(params) !== 'const') {\n return [[prefix, params as BindableAttrValue]];\n }\n return Object.entries(params).flatMap(([key, param]) =>\n flattenNestedBindables(param, `${prefix}.${key}`),\n );\n}\n\n/**\n * Returns an object with the resolved values of the bindables.\n * Example bindings:\n * {\n * 'nodeId.params.order': { error: undefined, loading: false, value: { \"OrderID\": \"\" } },\n * }\n * Example bindingId: 'nodeId.params'\n * Example params:\n * {\n * [\"order\", { $$jsExpression: 'form.value\\n' }]\n * }\n * Example result:\n * {\n * order: { \"OrderID\": \"\" }\n * }\n */\n\nfunction resolveBindables(\n bindings: Partial>,\n bindingId: string,\n params?: NestedBindableAttrs,\n): BindingEvaluationResult> {\n const result: any = {};\n const resultKey = 'value';\n const flattened = flattenNestedBindables(params);\n\n for (const [path] of flattened) {\n const resolvedBinding = bindings[`${bindingId}${path}`];\n\n if (resolvedBinding?.error) {\n return { error: resolvedBinding?.error };\n }\n if (resolvedBinding?.loading) {\n return { loading: true };\n }\n\n _.set(result, `${resultKey}${path}`, resolvedBinding?.value);\n }\n\n return { value: result[resultKey] || {} };\n}\n\ninterface ParseBindingOptions {\n scopePath?: string;\n}\n\nfunction parseBinding(\n bindable: BindableAttrValue,\n { scopePath }: ParseBindingOptions = {},\n): ParsedBinding | EvaluatedBinding {\n const bindingType = bindable && getBindingType(bindable);\n\n if (bindingType === 'const') {\n return {\n scopePath,\n result: { value: bindable },\n };\n }\n if (bindingType === 'jsExpression') {\n return {\n scopePath,\n expression: bindable.$$jsExpression,\n };\n }\n return {\n scopePath,\n result: { value: undefined },\n };\n}\n\n/**\n * Returns all elements for the current scope. This includes the root node and all of its descendants.\n * Templates are not included.\n */\nfunction getScopeElements(\n dom: appDom.AppDom,\n rootNode: appDom.AppDomNode | appDom.AppDomNode[],\n components: ToolpadComponents,\n): readonly appDom.AppDomNode[] {\n if (Array.isArray(rootNode)) {\n return [...rootNode, ...rootNode.flatMap((child) => getScopeElements(dom, child, components))];\n }\n\n const childNodes = appDom.getChildNodes(dom, rootNode);\n const result: appDom.AppDomNode[] = [];\n\n for (const [prop, children] of Object.entries(childNodes) as [string, appDom.AppDomNode[]][]) {\n if (appDom.isElement(rootNode)) {\n const componentId = getComponentId(rootNode);\n const Component = components[componentId];\n const componentConfig = Component?.[TOOLPAD_COMPONENT];\n const { argTypes = {} } = componentConfig ?? {};\n\n if (argTypes[prop]?.type !== 'template') {\n result.push(\n ...children,\n ...children.flatMap((child) => getScopeElements(dom, child, components)),\n );\n }\n } else {\n result.push(\n ...children,\n ...children.flatMap((child) => getScopeElements(dom, child, components)),\n );\n }\n }\n\n return result;\n}\n\nfunction parseBindings(\n dom: appDom.AppDom,\n rootNode: appDom.ElementNode | appDom.PageNode | appDom.ElementNode[],\n components: ToolpadComponents,\n location: RouterLocation,\n) {\n const scopeElements = getScopeElements(dom, rootNode, components);\n\n const parsedBindingsMap = new Map();\n const controlled = new Set();\n const scopeMeta: ScopeMeta = {};\n\n for (const elm of scopeElements) {\n if (appDom.isElement(elm)) {\n const componentId = getComponentId(elm);\n const Component = components[componentId];\n\n const componentConfig = Component?.[TOOLPAD_COMPONENT];\n\n const { argTypes = {} } = componentConfig ?? {};\n\n const propsMeta: Record = {};\n\n for (const [propName, argType] of Object.entries(argTypes)) {\n const initializerId = argType?.defaultValueProp\n ? `${elm.id}.props.${argType.defaultValueProp}`\n : undefined;\n\n const propValue: BindableAttrValue = elm.props?.[propName];\n\n const binding: BindableAttrValue =\n propValue || (argType ? getArgTypeDefaultValue(argType) : undefined);\n\n const bindingId = `${elm.id}.props.${propName}`;\n\n let scopePath: string | undefined;\n\n const isResizableHeightProp =\n componentConfig?.resizableHeightProp && propName === componentConfig?.resizableHeightProp;\n\n if (\n componentId !== PAGE_ROW_COMPONENT_ID &&\n !isResizableHeightProp &&\n !NON_BINDABLE_CONTROL_TYPES.includes(argType?.control?.type as string)\n ) {\n scopePath = `${elm.name}.${propName}`;\n }\n\n propsMeta[propName] = {\n tsType: argType?.tsType,\n };\n\n if (argType) {\n if (argType.onChangeProp) {\n controlled.add(bindingId);\n parsedBindingsMap.set(bindingId, {\n scopePath,\n initializer: initializerId,\n });\n } else {\n parsedBindingsMap.set(bindingId, parseBinding(binding, { scopePath }));\n }\n }\n\n const parseNestedBindings = (value: unknown, parentBindingId: string) => {\n if (value && typeof value === 'object') {\n for (const [nestedPropName, nestedProp] of Object.entries(value)) {\n const nestedBindingId = `${parentBindingId}${\n Array.isArray(value) ? `[${nestedPropName}]` : `.${nestedPropName}`\n }`;\n\n if (nestedProp && getBindingType(nestedProp) !== 'const') {\n parsedBindingsMap.set(nestedBindingId, parseBinding(nestedProp));\n } else {\n parseNestedBindings(\n (value as Record)[nestedPropName],\n nestedBindingId,\n );\n }\n }\n }\n };\n\n const propBindingValue = propValue && getBindingValue(propValue);\n if (propBindingValue) {\n parseNestedBindings(propBindingValue, bindingId);\n }\n }\n\n if (componentId !== PAGE_ROW_COMPONENT_ID) {\n scopeMeta[elm.name] = {\n kind: 'element',\n componentId,\n props: propsMeta,\n };\n }\n\n if (!isPageLayoutComponent(elm)) {\n for (const [propName, argType] of Object.entries(layoutBoxArgTypes)) {\n const binding =\n elm.layout?.[propName as keyof typeof layoutBoxArgTypes] ||\n (argType ? getArgTypeDefaultValue(argType) : undefined);\n const bindingId = `${elm.id}.layout.${propName}`;\n parsedBindingsMap.set(bindingId, parseBinding(binding, {}));\n }\n }\n }\n\n if (appDom.isQuery(elm)) {\n scopeMeta[elm.name] = {\n kind: 'query',\n };\n\n if (elm.params) {\n const nestedBindablePaths = flattenNestedBindables(Object.fromEntries(elm.params ?? []));\n\n for (const [nestedPath, paramValue] of nestedBindablePaths) {\n const bindingId = `${elm.id}.params${nestedPath}`;\n const scopePath = `${elm.name}.params${nestedPath}`;\n const bindable = paramValue;\n parsedBindingsMap.set(bindingId, parseBinding(bindable, { scopePath }));\n }\n }\n\n for (const [key, value] of Object.entries(INITIAL_FETCH)) {\n const bindingId = `${elm.id}.${key}`;\n const scopePath = `${elm.name}.${key}`;\n controlled.add(bindingId);\n parsedBindingsMap.set(bindingId, {\n scopePath,\n result: { value, loading: true },\n });\n }\n\n const configBindings = _.pick(elm.attributes, USE_DATA_QUERY_CONFIG_KEYS);\n const nestedBindablePaths = flattenNestedBindables(configBindings);\n\n for (const [nestedPath, paramValue] of nestedBindablePaths) {\n const bindingId = `${elm.id}.config${nestedPath}`;\n const scopePath = `${elm.name}.config${nestedPath}`;\n const bindable = paramValue;\n parsedBindingsMap.set(bindingId, parseBinding(bindable, { scopePath }));\n }\n }\n\n if (appDom.isMutation(elm)) {\n if (elm.params) {\n for (const [paramName, bindable] of Object.entries(elm.params)) {\n const bindingId = `${elm.id}.params.${paramName}`;\n const scopePath = `${elm.name}.params.${paramName}`;\n\n const bindingType = bindable && getBindingType(bindable);\n if (bindingType === 'const') {\n parsedBindingsMap.set(bindingId, {\n scopePath,\n result: { value: bindable },\n });\n } else if (bindingType === 'jsExpression') {\n parsedBindingsMap.set(bindingId, {\n scopePath,\n expression: (bindable as JsExpressionAttrValue).$$jsExpression,\n });\n }\n }\n }\n\n for (const [key, value] of Object.entries(INITIAL_FETCH)) {\n const bindingId = `${elm.id}.${key}`;\n const scopePath = `${elm.name}.${key}`;\n controlled.add(bindingId);\n parsedBindingsMap.set(bindingId, {\n scopePath,\n result: { value, loading: true },\n });\n }\n }\n }\n\n if (!Array.isArray(rootNode) && appDom.isPage(rootNode)) {\n if (location && !Array.isArray(rootNode) && appDom.isPage(rootNode)) {\n const urlParams = new URLSearchParams(location.search);\n const pageParameters = rootNode.attributes.parameters || [];\n\n for (const [paramName, paramDefault] of pageParameters) {\n const bindingId = `${rootNode.id}.parameters.${paramName}`;\n const scopePath = `page.parameters.${paramName}`;\n parsedBindingsMap.set(bindingId, {\n scopePath,\n result: { value: urlParams.get(paramName) || paramDefault },\n });\n }\n }\n }\n\n const parsedBindings: Record =\n Object.fromEntries(parsedBindingsMap);\n\n return { parsedBindings, controlled, scopeMeta };\n}\n\nfunction useElmToolpadComponent(elm: appDom.ElementNode): ToolpadComponent {\n const componentId = getElementNodeComponentId(elm);\n return useComponent(componentId);\n}\n\ninterface RenderedNodeProps {\n nodeId: NodeId;\n}\n\nfunction RenderedNode({ nodeId }: RenderedNodeProps) {\n const dom = useDomContext();\n const node = appDom.getNode(dom, nodeId, 'element');\n const Component: ToolpadComponent = useElmToolpadComponent(node);\n const childNodeGroups = appDom.getChildNodes(dom, node);\n\n return (\n /* eslint-disable-next-line @typescript-eslint/no-use-before-define */\n \n );\n}\n\ninterface RuntimeScopedProps {\n id: string;\n parseBindingsResult: ReturnType;\n localScope?: Record;\n onUpdate?: (params: { scope: RuntimeScope; scopeMeta: ScopeMeta }) => void;\n children?: React.ReactNode;\n}\n\nfunction RuntimeScoped({\n id,\n parseBindingsResult,\n localScope,\n onUpdate,\n children,\n}: RuntimeScopedProps) {\n const parentScope = React.useContext(RuntimeScopeContext);\n const dom = useDomContext();\n\n const { parsedBindings, controlled, scopeMeta } = parseBindingsResult;\n\n const [scopeBindings, setScopeBindings] =\n React.useState>(parsedBindings);\n\n const prevDom = React.useRef(dom);\n React.useEffect(() => {\n if (dom === prevDom.current) {\n // Ignore this effect if there are no dom updates.\n // IMPORTANT!!! This assumes the `RenderedPage` component is remounted when the `nodeId` changes\n // \n return;\n }\n prevDom.current = dom;\n\n setScopeBindings((existingBindings) => {\n // Make sure to patch page bindings after dom nodes have been added or removed\n const updated: Record = {};\n for (const [key, binding] of Object.entries(parsedBindings)) {\n updated[key] = controlled.has(key) ? existingBindings[key] || binding : binding;\n }\n return updated;\n });\n }, [parsedBindings, controlled, dom]);\n\n const { setBindingByScopePath: setParentBindingByScopePath } =\n React.useContext(SetBindingContext) ?? {};\n\n const setBinding = React.useCallback(\n (bindingId: string, result: BindingEvaluationResult) => {\n setScopeBindings((existingBindings): Record => {\n const { expression, initializer, ...parsedBinding } = parsedBindings[bindingId];\n const existingBinding = existingBindings[bindingId];\n\n if (existingBinding?.result && isEqual(existingBinding.result, result)) {\n return existingBindings;\n }\n\n return {\n ...existingBindings,\n ...{\n [bindingId]: { ...parsedBinding, result },\n },\n };\n });\n },\n [parsedBindings],\n );\n\n const bindingsByScopePath = React.useMemo(\n () =>\n new Map(\n Object.entries(scopeBindings).map(\n ([bindingId, binding]) => [binding.scopePath, bindingId] as [string, string],\n ),\n ),\n [scopeBindings],\n );\n\n const setBindingByScopePath = React.useCallback(\n (scopePath: string, result: BindingEvaluationResult) => {\n const bindingToUpdateId = bindingsByScopePath.get(scopePath);\n if (bindingToUpdateId) {\n setBinding(bindingToUpdateId, result);\n } else if (setParentBindingByScopePath) {\n setParentBindingByScopePath(scopePath, result);\n } else {\n throw new Error(`No binding found for scope path \"${scopePath}\"`);\n }\n },\n [bindingsByScopePath, setBinding, setParentBindingByScopePath],\n );\n\n const setControlledBinding = React.useCallback(\n (bindingId: string, result: BindingEvaluationResult) => {\n if (!controlled.has(bindingId)) {\n throw new Error(`Not a controlled binding \"${bindingId}\"`);\n }\n\n setBinding(bindingId, result);\n },\n [controlled, setBinding],\n );\n\n const childScope = React.useMemo(\n () =>\n createScope(id, scopeBindings, {\n localValues: localScope,\n parentScope,\n meta: scopeMeta,\n }),\n [id, localScope, parentScope, scopeBindings, scopeMeta],\n );\n\n const vmRef = React.useContext(ApplicationVmApiContext);\n React.useEffect(() => {\n if (!vmRef) {\n return () => {};\n }\n return vmRef.current.registerScope(childScope);\n }, [vmRef, childScope]);\n\n const evaluateScopeExpression = React.useCallback(\n async (expression: string) => {\n const updates: Record = {};\n\n const proxify = (obj: T, scopePathSegments: string[]): T => {\n return new Proxy(obj, {\n get(target, prop, receiver) {\n if (typeof prop === 'symbol') {\n return Reflect.get(target, prop, receiver);\n }\n\n const result = target[prop as keyof T];\n\n if (result && typeof result === 'object') {\n return proxify(result, [...scopePathSegments, prop]);\n }\n\n return Reflect.get(target, prop, receiver);\n },\n set(target, prop, newValue, receiver) {\n if (typeof prop === 'symbol') {\n return Reflect.set(target, prop, newValue, receiver);\n }\n\n const scopePath = [...scopePathSegments, prop].join('.');\n updates[scopePath] = newValue;\n return Reflect.set(target, prop, newValue, receiver);\n },\n });\n };\n\n const scopeValues = childScope.values;\n const result = browserJsRuntime.evaluateExpression(expression, proxify(scopeValues, []));\n\n await result.value;\n\n for (const [scopePath, newValue] of Object.entries(updates)) {\n setBindingByScopePath(scopePath, { value: newValue });\n }\n\n return result;\n },\n [childScope.values, setBindingByScopePath],\n );\n\n React.useEffect(() => {\n onUpdate?.({\n scopeMeta,\n scope: childScope,\n });\n }, [scopeMeta, childScope, onUpdate]);\n\n const setBindingContext = React.useMemo(\n () => ({\n setBinding,\n setControlledBinding,\n setBindingByScopePath,\n }),\n [setBinding, setControlledBinding, setBindingByScopePath],\n );\n\n return (\n \n \n \n {children}\n \n \n \n );\n}\n\ninterface TemplateScopedProps {\n id: string;\n propName: string;\n node: appDom.ElementNode;\n localScope: Record;\n children?: React.ReactNode;\n}\n\nfunction TemplateScoped({ id, node, localScope, propName, children }: TemplateScopedProps) {\n const dom = useDomContext();\n const components = useComponents();\n const location = useLocation();\n\n const parseBindingsResult = React.useMemo(() => {\n const { [propName]: templateChildren = [] } = appDom.getChildNodes(dom, node);\n return parseBindings(dom, templateChildren, components, location);\n }, [components, dom, node, propName, location]);\n\n return (\n \n {children}\n \n );\n}\n\nfunction NodeError({ error }: NodeErrorProps) {\n return (\n \n \n Error\n \n \n );\n}\n\ninterface RenderedNodeContentProps {\n node: appDom.PageNode | appDom.ElementNode;\n childNodeGroups: appDom.NodeChildren;\n Component: ToolpadComponent;\n}\n\nfunction RenderedNodeContent({ node, childNodeGroups, Component }: RenderedNodeContentProps) {\n const { setControlledBinding } = React.useContext(SetBindingContext) ?? {};\n invariant(setControlledBinding, 'Node must be rendered in a RuntimeScoped context');\n\n const nodeId = node.id;\n\n const componentConfig = Component[TOOLPAD_COMPONENT];\n const {\n argTypes = {},\n errorProp,\n loadingProp,\n loadingPropSource,\n errorPropSource,\n } = componentConfig;\n\n const isLayoutNode =\n appDom.isPage(node) || (appDom.isElement(node) && isPageLayoutComponent(node));\n\n const scope = useAssertedContext(RuntimeScopeContext);\n const liveBindings = scope.bindings;\n\n const boundProps: Record = React.useMemo(() => {\n const loadingPropSourceSet = loadingPropSource ? new Set(loadingPropSource) : null;\n const errorPropSourceSet = errorPropSource ? new Set(errorPropSource) : null;\n const hookResult: Record = {};\n\n // error state we will propagate to the component\n let error: Error | undefined;\n // loading state we will propagate to the component\n let loading: boolean = false;\n\n for (const [propName, argType] of Object.entries(argTypes)) {\n const bindingId = `${nodeId}.props.${propName}`;\n const binding = liveBindings[bindingId];\n\n if (binding) {\n hookResult[propName] = binding.value;\n\n if (binding.loading && (!loadingPropSourceSet || loadingPropSourceSet.has(propName))) {\n loading = true;\n } else if (\n !error &&\n binding.error &&\n (!errorPropSourceSet || errorPropSourceSet.has(propName))\n ) {\n error = binding.error;\n }\n }\n\n if (typeof hookResult[propName] === 'undefined' && argType) {\n hookResult[propName] = getArgTypeDefaultValue(argType);\n }\n }\n\n if (error) {\n if (errorProp) {\n hookResult[errorProp] = error;\n } else {\n console.error(errorFrom(error));\n }\n }\n\n if (loadingProp && loading) {\n hookResult[loadingProp] = true;\n }\n\n return hookResult;\n }, [argTypes, errorProp, errorPropSource, liveBindings, loadingProp, loadingPropSource, nodeId]);\n\n const boundLayoutProps: Record = React.useMemo(() => {\n const hookResult: Record = {};\n\n for (const [propName, argType] of isLayoutNode ? [] : Object.entries(layoutBoxArgTypes)) {\n const bindingId = `${nodeId}.layout.${propName}`;\n const binding = liveBindings[bindingId];\n if (binding) {\n hookResult[propName] = binding.value;\n }\n\n if (typeof hookResult[propName] === 'undefined' && argType) {\n hookResult[propName] = getArgTypeDefaultValue(argType);\n }\n }\n\n return hookResult;\n }, [isLayoutNode, liveBindings, nodeId]);\n\n const onChangeHandlers: Record void> = React.useMemo(\n () =>\n mapProperties(argTypes, ([key, argType]) => {\n if (!argType || !argType.onChangeProp) {\n return null;\n }\n\n const handler = (param: any) => {\n const bindingId = `${nodeId}.props.${key}`;\n\n const value = argType.onChangeHandler ? argType.onChangeHandler(param) : param;\n setControlledBinding(bindingId, { value });\n };\n\n return [argType.onChangeProp, handler];\n }),\n [argTypes, nodeId, setControlledBinding],\n );\n\n const navigateToPage = usePageNavigator();\n const evaluateScopeExpression = useEvaluateScopeExpression();\n\n const eventHandlers: Record void> = React.useMemo(() => {\n return mapProperties(argTypes, ([key, argType]) => {\n if (!argType || argType.type !== 'event' || !appDom.isElement(node)) {\n return null;\n }\n\n const action = (node as appDom.ElementNode).props?.[key];\n\n if (action?.$$navigationAction) {\n const handler = async () => {\n const { page, parameters = {} } = action.$$navigationAction;\n if (page) {\n const parsedParameterEntries = await Promise.all(\n Object.keys(parameters).map(async (parameterName) => {\n const parameterValue = parameters[parameterName];\n\n if (parameterValue?.$$jsExpression) {\n const result = await evaluateScopeExpression(parameterValue.$$jsExpression);\n return [parameterName, result.value];\n }\n return [parameterName, parameterValue];\n }),\n );\n\n const parsedParameters = Object.fromEntries(parsedParameterEntries);\n\n navigateToPage(page, parsedParameters);\n }\n };\n\n return [key, handler];\n }\n\n if (action?.$$jsExpressionAction) {\n const handler = () => {\n const code = action.$$jsExpressionAction;\n const exprToEvaluate = `(async () => {${code}})()`;\n evaluateScopeExpression(exprToEvaluate);\n };\n\n return [key, handler];\n }\n\n return null;\n });\n }, [argTypes, node, navigateToPage, evaluateScopeExpression]);\n\n const reactChildren = React.useMemo(() => {\n const result: Record = {};\n for (const [prop, childNodes] of Object.entries(childNodeGroups)) {\n result[prop] = childNodes.map((child) => );\n }\n return result;\n }, [childNodeGroups]);\n\n const layoutElementProps = React.useMemo(() => {\n if (appDom.isElement(node) && isPageRow(node)) {\n return {\n layoutColumnSizes: childNodeGroups.children.map((child) => child.layout?.columnSize),\n };\n }\n return {};\n }, [childNodeGroups.children, node]);\n\n const props: Record = React.useMemo(() => {\n return {\n ...boundProps,\n ...onChangeHandlers,\n ...eventHandlers,\n ...layoutElementProps,\n ...reactChildren,\n };\n }, [boundProps, eventHandlers, layoutElementProps, onChangeHandlers, reactChildren]);\n\n const previousProps = React.useRef>(props);\n const [hasSetInitialBindings, setHasSetInitialBindings] = React.useState(false);\n React.useEffect(() => {\n Object.entries(argTypes).forEach(([key, argType]) => {\n if (!argType?.defaultValueProp) {\n return;\n }\n\n if (\n hasSetInitialBindings &&\n previousProps.current[argType.defaultValueProp] === props[argType.defaultValueProp]\n ) {\n return;\n }\n\n const bindingIdToUpdate = `${nodeId}.props.${key}`;\n setControlledBinding(bindingIdToUpdate, { value: props[argType.defaultValueProp] });\n });\n\n previousProps.current = props;\n setHasSetInitialBindings(true);\n }, [props, argTypes, nodeId, setControlledBinding, hasSetInitialBindings]);\n\n const wrappedProps = React.useMemo(() => {\n const hookResult: Record = { ...props };\n // Wrap element props\n for (const [propName, argType] of Object.entries(argTypes)) {\n const isElement = argType?.type === 'element';\n const isTemplate = argType?.type === 'template';\n\n if (isElement || isTemplate) {\n const value = hookResult[propName];\n\n let wrappedValue = value;\n if (argType.control?.type === 'slots') {\n wrappedValue = {value};\n } else if (argType.control?.type === 'slot' || argType.control?.type === 'layoutSlot') {\n wrappedValue = (\n \n {value}\n \n );\n }\n\n if (isTemplate) {\n appDom.assertIsElement(node);\n hookResult[propName] = (key: string, localScope: Record) => {\n return (\n \n {wrappedValue}\n \n );\n };\n } else {\n hookResult[propName] = wrappedValue;\n }\n }\n }\n return hookResult;\n }, [argTypes, node, props]);\n\n const vmRef = React.useContext(ApplicationVmApiContext);\n React.useEffect(() => {\n if (!vmRef) {\n return () => {};\n }\n const unsubscribers: (() => void)[] = [];\n for (const propName of Object.keys(argTypes)) {\n const unsubscribe = vmRef.current.registerBindingScope(`${nodeId}.props.${propName}`, scope);\n unsubscribers.push(unsubscribe);\n }\n return () => {\n unsubscribers.forEach((unsubscribe) => unsubscribe());\n };\n }, [nodeId, argTypes, vmRef, scope]);\n\n return (\n \n {isLayoutNode ? (\n \n ) : (\n \n \n \n )}\n \n );\n}\n\ninterface PageRootProps {\n children?: React.ReactNode;\n}\n\nfunction PageRoot({ children }: PageRootProps) {\n return (\n \n \n {children}\n \n \n );\n}\n\nconst PageRootComponent = createComponent(PageRoot, {\n argTypes: {\n children: {\n type: 'element',\n control: { type: 'slots' },\n },\n },\n});\n\ninterface QueryNodeProps {\n page: appDom.PageNode;\n node: appDom.QueryNode;\n}\n\nfunction QueryNode({ page, node }: QueryNodeProps) {\n const { setControlledBinding } = React.useContext(SetBindingContext) ?? {};\n invariant(setControlledBinding, 'QueryNode must be rendered in a RuntimeScoped context');\n\n const { bindings } = useAssertedContext(RuntimeScopeContext);\n\n const params = resolveBindables(\n bindings,\n `${node.id}.params`,\n Object.fromEntries(node.params ?? []),\n );\n\n const configBindings = _.pick(node.attributes, USE_DATA_QUERY_CONFIG_KEYS);\n const options = resolveBindables(bindings, `${node.id}.config`, configBindings);\n\n const inputError = params.error || options.error;\n const inputIsLoading = params.loading || options.loading;\n\n const queryResult = useDataQuery(page, node, params.value, {\n ...options.value,\n enabled: !inputIsLoading && !inputError,\n });\n\n React.useEffect(() => {\n const { isLoading: queryIsLoading, error: queryError, data, rows, ...result } = queryResult;\n\n const error = queryError || inputError;\n const isLoading = queryIsLoading || inputIsLoading;\n\n for (const [key, value] of Object.entries(result)) {\n const bindingId = `${node.id}.${key}`;\n setControlledBinding(bindingId, { value });\n }\n\n // Here we propagate the error and loading state to the data and rows properties\n // TODO: is there a straightforward way for us to generalize this behavior?\n setControlledBinding(`${node.id}.isLoading`, { value: isLoading });\n setControlledBinding(`${node.id}.error`, {\n value: error ? String(error.message || error) : undefined,\n });\n const deferredStatus = { loading: isLoading, error };\n setControlledBinding(`${node.id}.data`, { ...deferredStatus, value: data });\n setControlledBinding(`${node.id}.rows`, { ...deferredStatus, value: rows });\n }, [node.name, node.id, queryResult, setControlledBinding, inputError, inputIsLoading]);\n\n return null;\n}\n\ninterface MutationNodeProps {\n page: appDom.PageNode;\n node: appDom.QueryNode;\n}\n\nfunction MutationNode({ node, page }: MutationNodeProps) {\n const { setControlledBinding } = React.useContext(SetBindingContext) ?? {};\n invariant(setControlledBinding, 'MutationNode must be rendered in a RuntimeScoped context');\n\n const { bindings } = useAssertedContext(RuntimeScopeContext);\n\n const queryId = node.id;\n const { value: params } = resolveBindables(\n bindings,\n `${node.id}.params`,\n Object.fromEntries(node.params ?? []),\n );\n\n const {\n isLoading,\n data: responseData = EMPTY_OBJECT,\n error: fetchError,\n mutateAsync,\n } = useMutation(\n async (overrides: any = {}) =>\n execDataSourceQuery({\n pageName: page.name,\n queryName: node.name,\n params: { ...params, ...overrides },\n }),\n {\n mutationKey: [queryId, params],\n },\n );\n\n const { data, error: apiError } = responseData;\n\n const error = apiError || fetchError;\n\n // Stabilize the mutation and prepare for inclusion in global scope\n const mutationResult: UseFetch = React.useMemo(\n () => ({\n isLoading,\n isFetching: isLoading,\n error,\n data,\n rows: Array.isArray(data) ? data : EMPTY_ARRAY,\n call: mutateAsync,\n fetch: mutateAsync,\n refetch: () => {\n throw new Error(`refetch is not supported in manual queries`);\n },\n }),\n [isLoading, error, mutateAsync, data],\n );\n\n React.useEffect(() => {\n for (const [key, value] of Object.entries(mutationResult)) {\n const bindingId = `${node.id}.${key}`;\n setControlledBinding(bindingId, { value });\n }\n }, [node.id, mutationResult, setControlledBinding]);\n\n return null;\n}\n\ninterface FetchNodeProps {\n page: appDom.PageNode;\n node: appDom.QueryNode;\n}\n\nfunction FetchNode({ node, page }: FetchNodeProps) {\n const mode: appDom.FetchMode = node.attributes.mode || 'query';\n switch (mode) {\n case 'query':\n return ;\n case 'mutation':\n return ;\n default:\n throw new Error(`Unrecognized fetch mode \"${mode}\"`);\n }\n}\n\nfunction RenderedPage({ nodeId }: RenderedNodeProps) {\n const dom = useDomContext();\n const page = appDom.getNode(dom, nodeId, 'page');\n const { children = [], queries = [] } = appDom.getChildNodes(dom, page);\n\n usePageTitle(page.attributes.title);\n\n const location = useLocation();\n const components = useComponents();\n\n const parseBindingsResult = React.useMemo(\n () => parseBindings(dom, page, components, location),\n [components, dom, location, page],\n );\n\n const canvasEvents = React.useContext(CanvasEventsContext);\n\n const onUpdate = useEvent(({ scope, scopeMeta }) => {\n if (canvasEvents) {\n canvasEvents.emit('pageStateUpdated', {\n pageState: scope.values,\n globalScopeMeta: scopeMeta,\n });\n canvasEvents.emit('pageBindingsUpdated', { bindings: scope.bindings });\n }\n });\n\n const applicationVm = useApplicationVm((vm) => {\n if (canvasEvents) {\n canvasEvents.emit('vmUpdated', { vm });\n }\n });\n\n return (\n \n \n \n {queries.map((node) => (\n \n ))}\n \n \n );\n}\n\nfunction PageNotFound() {\n return (\n \n Not found\n The page doesn't exist in this application.\n \n );\n}\n\ninterface RenderedPagesProps {\n pages: appDom.PageNode[];\n defaultPage: appDom.PageNode;\n}\n\nfunction RenderedPages({ pages, defaultPage }: RenderedPagesProps) {\n const defaultPageNavigation = ;\n return (\n \n {pages.map((page) => (\n \n \n }\n />\n \n ))}\n {pages.map((page) => (\n \n }\n />\n \n ))}\n \n \n } />\n \n );\n}\n\nconst FullPageCentered = styled('div')({\n width: '100%',\n height: '100%',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n});\n\nfunction AppLoading() {\n return ;\n}\n\nfunction AppError({ error }: FallbackProps) {\n return (\n \n \n Something went wrong\n 
{error.message}
\n 
{error.stack}
\n \n \n );\n}\n\nexport const queryClient = new QueryClient({\n defaultOptions: {\n queries: {\n retry: false,\n staleTime: 60 * 1000,\n },\n },\n});\n\nexport interface ToolpadAppLayoutProps {\n dom: appDom.RenderTree;\n hasShell?: boolean;\n}\n\nfunction ToolpadAppLayout({ dom, hasShell: hasShellProp = true }: ToolpadAppLayoutProps) {\n const root = appDom.getApp(dom);\n const { pages = [] } = appDom.getChildNodes(dom, root);\n\n const location = useLocation();\n const { pathname, search } = location;\n const urlParams = React.useMemo(() => new URLSearchParams(search), [search]);\n\n const pageMatch = matchPath(PREVIEW_PAGE_ROUTE, `/preview${pathname}`);\n const pageId = pageMatch?.params.nodeId;\n\n const defaultPage = pages[0];\n const page = pageId ? appDom.getMaybeNode(dom, pageId as NodeId, 'page') : defaultPage;\n\n const displayMode = urlParams.get('toolpad-display') || page?.attributes.display;\n\n const hasShell = hasShellProp && displayMode !== 'standalone';\n\n const showPreviewHeader = isPreview && !isRenderedInCanvas;\n\n return (\n \n {showPreviewHeader ? : null}\n \n {hasShell && pages.length > 0 ? (\n \n ) : null}\n \n \n \n );\n}\n\nexport interface LoadComponents {\n (state: RuntimeState): Promise;\n}\n\nexport interface ToolpadAppProps {\n rootRef?: React.Ref;\n loadComponents: LoadComponents;\n hasShell?: boolean;\n basename: string;\n state: RuntimeState;\n}\n\nexport default function ToolpadApp({\n rootRef,\n loadComponents,\n basename,\n hasShell = true,\n state,\n}: ToolpadAppProps) {\n const { dom } = state;\n\n const [components, setComponents] = React.useState(null);\n\n const [resetNodeErrorsKey, setResetNodeErrorsKey] = React.useState(0);\n\n React.useEffect(() => setResetNodeErrorsKey((key) => key + 1), [dom]);\n\n const { value: showDevtools, toggle: toggleDevtools } = useBoolean(false);\n\n React.useEffect(() => {\n (window as any).toggleDevtools = () => toggleDevtools();\n }, [toggleDevtools]);\n\n React.useEffect(() => {\n loadComponents(state).then((codeComponents) =>\n setComponents({ ...codeComponents, ...internalComponents }),\n );\n }, [loadComponents, state]);\n\n return (\n \n \n \n {components ? (\n \n \n \n \n }>\n \n \n \n \n {showDevtools ? : null}\n \n \n \n \n \n \n ) : (\n \n )}\n \n \n \n );\n}\n","import { nanoid } from 'nanoid/non-secure';\nimport { generateKeyBetween } from 'fractional-indexing';\nimport {\n NodeId,\n NodeReference,\n BindableAttrValue,\n BindableAttrValues,\n SecretAttrValue,\n BindableAttrEntries,\n JsExpressionAttrValue,\n EnvAttrValue,\n} from '@mui/toolpad-core';\nimport invariant from 'invariant';\nimport { BoxProps, ThemeOptions as MuiThemeOptions } from '@mui/material';\nimport { pascalCase, removeDiacritics, uncapitalize } from '@mui/toolpad-utils/strings';\nimport { mapProperties, mapValues } from '@mui/toolpad-utils/collections';\nimport { ConnectionStatus } from '../types';\nimport { omit, update, updateOrCreate } from '../utils/immutability';\nimport { ExactEntriesOf, Maybe } from '../utils/types';\nimport { envBindingSchema } from '../server/schema';\n\nexport const CURRENT_APPDOM_VERSION = 7;\n\nexport const RESERVED_NODE_PROPERTIES = [\n 'id',\n 'type',\n 'parentId',\n 'parentProp',\n 'parentIndex',\n] as const;\nexport type ReservedNodeProperty = (typeof RESERVED_NODE_PROPERTIES)[number];\n\nexport function createFractionalIndex(index1: string | null, index2: string | null) {\n return generateKeyBetween(index1, index2);\n}\n\n// Compares two strings lexicographically\nexport function compareFractionalIndex(index1: string, index2: string): number {\n if (index1 === index2) {\n return 0;\n }\n return index1 > index2 ? 1 : -1;\n}\n\ntype AppDomNodeType =\n | 'app'\n | 'connection'\n | 'theme'\n | 'page'\n | 'element'\n | 'codeComponent'\n | 'query'\n | 'mutation';\n\nexport interface AppDomNodeBase {\n readonly id: NodeId;\n readonly type: AppDomNodeType;\n readonly name: string;\n readonly parentId: NodeId | null;\n readonly parentProp: string | null;\n readonly parentIndex: string | null;\n readonly attributes: {};\n}\n\nexport interface AppNode extends AppDomNodeBase {\n readonly type: 'app';\n readonly parentId: null;\n}\n\nexport interface ThemeNode extends AppDomNodeBase {\n readonly type: 'theme';\n readonly theme?: MuiThemeOptions;\n}\n\nexport interface ConnectionNode

extends AppDomNodeBase {\n readonly type: 'connection';\n readonly attributes: {\n readonly dataSource: string;\n readonly params: SecretAttrValue

;\n readonly status: ConnectionStatus | null;\n };\n}\n\nexport type PageDisplayMode = 'standalone' | 'shell';\n\nexport interface PageNode extends AppDomNodeBase {\n readonly type: 'page';\n readonly attributes: {\n readonly title: string;\n readonly parameters?: [string, string][];\n readonly module?: string;\n readonly display?: PageDisplayMode;\n };\n}\n\nexport interface ElementNode

extends AppDomNodeBase {\n readonly type: 'element';\n readonly attributes: {\n readonly component: string;\n };\n readonly props?: BindableAttrValues

;\n readonly layout?: {\n readonly horizontalAlign?: BoxProps['justifyContent'];\n readonly verticalAlign?: BoxProps['alignItems'];\n readonly columnSize?: number;\n };\n}\n\nexport interface CodeComponentNode extends AppDomNodeBase {\n readonly type: 'codeComponent';\n readonly attributes: {\n readonly code: string;\n readonly isNew?: boolean;\n };\n}\n\nexport type FetchMode = 'query' | 'mutation';\n\n/**\n * A DOM query is defined primarily by a server defined part \"attributes.query\"\n * and a clientside defined part \"params\". \"params\" are constructed in the runtime\n * from bound expressions. The resolved object will be sent to the server and combined\n * with the query will be used to collect the data from the backend.\n */\nexport interface QueryNode extends AppDomNodeBase {\n readonly type: 'query';\n readonly params?: BindableAttrEntries;\n readonly attributes: {\n readonly mode?: FetchMode;\n readonly dataSource?: string;\n readonly connectionId: NodeReference | null;\n readonly query: Q;\n readonly transform?: string;\n readonly transformEnabled?: boolean;\n /** @deprecated Not necessary to be user-facing, we will expose staleTime instead if necessary */\n readonly refetchOnWindowFocus?: boolean;\n /** @deprecated Not necessary to be user-facing, we will expose staleTime instead if necessary */\n readonly refetchOnReconnect?: boolean;\n readonly refetchInterval?: number;\n readonly cacheTime?: number;\n readonly enabled?: BindableAttrValue;\n };\n}\n\n/**\n * @deprecated QueryNode can act as a mutation by switching the `mode` attribute to 'mutation'\n */\nexport interface MutationNode extends AppDomNodeBase {\n readonly type: 'mutation';\n readonly params?: BindableAttrValues;\n readonly attributes: {\n readonly dataSource?: string;\n readonly connectionId: NodeReference | null;\n readonly query: Q;\n };\n}\n\ntype AppDomNodeOfType = {\n app: AppNode;\n connection: ConnectionNode;\n theme: ThemeNode;\n page: PageNode;\n element: ElementNode;\n codeComponent: CodeComponentNode;\n query: QueryNode;\n mutation: MutationNode;\n}[K];\n\ntype AllowedChildren = {\n app: {\n pages: 'page';\n connections: 'connection';\n themes: 'theme';\n codeComponents: 'codeComponent';\n };\n theme: {};\n connection: {};\n page: {\n children: 'element';\n queries: 'query';\n mutations: 'mutation';\n };\n element: {\n [prop: string]: 'element';\n };\n codeComponent: {};\n query: {};\n mutation: {};\n};\n\nexport type AppDomNode = AppDomNodeOfType;\n\ntype TypeOf = N['type'];\ntype AllowedChildTypesOfType = AllowedChildren[T];\ntype AllowedChildTypesOf = AllowedChildTypesOfType>;\n\nexport type ChildNodesOf = {\n [K in keyof AllowedChildTypesOf]: AllowedChildTypesOf[K] extends AppDomNodeType\n ? AppDomNodeOfType[K]>[]\n : never;\n};\n\ntype CombinedChildrenOfType =\n AllowedChildren[T][keyof AllowedChildren[T]];\n\ntype CombinedAllowedChildren = {\n [K in AppDomNodeType]: CombinedChildrenOfType;\n};\n\ntype ParentTypeOfType = {\n [K in AppDomNodeType]: T extends CombinedAllowedChildren[K] ? K : never;\n}[AppDomNodeType];\nexport type ParentOf = AppDomNodeOfType>> | null;\n\nexport type ParentProp = keyof AllowedChildTypesOfType>;\n\nexport type ParentPropOf = {\n [K in keyof AllowedChildren[TypeOf]]: TypeOf extends AllowedChildren[TypeOf][K]\n ? K & string\n : never;\n}[keyof AllowedChildren[TypeOf]];\n\nexport type AppDomNodes = Record;\n\nexport interface AppDom {\n nodes: AppDomNodes;\n root: NodeId;\n version?: number;\n}\n\nfunction isType(node: AppDomNode, type: T['type']): node is T {\n return node.type === type;\n}\n\nfunction assertIsType(node: AppDomNode, type: T['type']): asserts node is T {\n invariant(isType(node, type), `Expected node type \"${type}\" but got \"${node.type}\"`);\n}\n\nexport function createId(): NodeId {\n return nanoid(7) as NodeId;\n}\n\nexport function createSecret(value: V): SecretAttrValue {\n return { $$secret: value };\n}\n\nexport function getMaybeNode(\n dom: AppDom,\n nodeId: NodeId,\n type: T,\n): AppDomNodeOfType | null;\nexport function getMaybeNode(\n dom: AppDom,\n nodeId: NodeId,\n type?: T,\n): AppDomNode | null;\nexport function getMaybeNode(\n dom: AppDom,\n nodeId: NodeId,\n type?: T,\n): AppDomNode | null {\n const node = dom.nodes[nodeId];\n if (!node) {\n return null;\n }\n if (type) {\n assertIsType(node, type);\n }\n return node;\n}\n\nexport function getNode(\n dom: AppDom,\n nodeId: NodeId,\n type: T,\n): AppDomNodeOfType;\nexport function getNode(\n dom: AppDom,\n nodeId: NodeId,\n type?: T,\n): AppDomNode;\nexport function getNode(\n dom: AppDom,\n nodeId: NodeId,\n type?: T,\n): AppDomNode {\n const node = getMaybeNode(dom, nodeId, type);\n if (!node) {\n throw new Error(`Node \"${nodeId}\" not found`);\n }\n return node;\n}\n\nexport function isApp(node: AppDomNode): node is AppNode {\n return isType(node, 'app');\n}\n\nexport function assertIsApp(node: AppDomNode): asserts node is AppNode {\n assertIsType(node, 'app');\n}\n\nexport function isPage(node: AppDomNode): node is PageNode {\n return isType(node, 'page');\n}\n\nexport function assertIsPage(node: AppDomNode): asserts node is PageNode {\n assertIsType(node, 'page');\n}\n\nexport function isConnection

(node: AppDomNode): node is ConnectionNode

{\n return isType(node, 'connection');\n}\n\nexport function assertIsConnection

(node: AppDomNode): asserts node is ConnectionNode

{\n assertIsType(node, 'connection');\n}\n\nexport function isCodeComponent(node: AppDomNode): node is CodeComponentNode {\n return isType(node, 'codeComponent');\n}\n\nexport function assertIsCodeComponent(node: AppDomNode): asserts node is CodeComponentNode {\n assertIsType(node, 'codeComponent');\n}\n\nexport function isTheme(node: AppDomNode): node is ThemeNode {\n return isType(node, 'theme');\n}\n\nexport function assertIsTheme(node: AppDomNode): asserts node is ThemeNode {\n assertIsType(node, 'theme');\n}\n\nexport function isElement

(node: AppDomNode): node is ElementNode

{\n return isType(node, 'element');\n}\n\nexport function assertIsElement

(node: AppDomNode): asserts node is ElementNode

{\n assertIsType(node, 'element');\n}\n\nexport function isQuery

(node: AppDomNode): node is QueryNode

{\n return isType(node, 'query');\n}\n\nexport function assertIsQuery

(node: AppDomNode): asserts node is QueryNode

{\n assertIsType(node, 'query');\n}\n\nexport function isMutation

(node: AppDomNode): node is MutationNode

{\n return isType(node, 'mutation');\n}\n\nexport function assertIsMutation

(node: AppDomNode): asserts node is MutationNode

{\n assertIsType(node, 'mutation');\n}\n\nexport function getRoot(dom: AppDom): AppDomNode {\n return getNode(dom, dom.root);\n}\n\nexport function getApp(dom: AppDom): AppNode {\n const app = getRoot(dom);\n assertIsApp(app);\n return app;\n}\n\nexport type NodeChildren = ChildNodesOf;\n\n// TODO: memoize the result of this function per dom in a WeakMap\nconst childrenMemo = new WeakMap>>();\nexport function getChildNodes(dom: AppDom, parent: N): NodeChildren {\n let domChildrenMemo = childrenMemo.get(dom);\n if (!domChildrenMemo) {\n domChildrenMemo = new Map();\n childrenMemo.set(dom, domChildrenMemo);\n }\n\n let result = domChildrenMemo.get(parent.id);\n if (!result) {\n result = {};\n domChildrenMemo.set(parent.id, result);\n\n const allNodeChildren: AppDomNode[] = Object.values(dom.nodes).filter(\n (node: AppDomNode) => node.parentId === parent.id,\n );\n\n for (const child of allNodeChildren) {\n const prop = child.parentProp || 'children';\n let existing = result[prop];\n if (!existing) {\n existing = [];\n result[prop] = existing;\n }\n existing.push(child);\n }\n\n for (const childArray of Object.values(result)) {\n childArray?.sort((node1: AppDomNode, node2: AppDomNode) => {\n invariant(\n node1.parentIndex && node2.parentIndex,\n `Nodes inside the dom should have a parentIndex if they have a parent`,\n );\n return compareFractionalIndex(node1.parentIndex, node2.parentIndex);\n });\n }\n }\n\n return result;\n}\n\nexport function getParent(dom: AppDom, child: N): ParentOf {\n // Make sure we're using the last version of child in the dom\n child = getNode(dom, child.id, child.type) as N;\n if (child.parentId) {\n const parent = getNode(dom, child.parentId);\n return parent as ParentOf;\n }\n return null;\n}\n\ntype AppDomNodeInitOfType = Omit<\n AppDomNodeOfType,\n ReservedNodeProperty | 'name'\n> & { name?: string };\n\nfunction createNodeInternal(\n id: NodeId,\n type: T,\n init: AppDomNodeInitOfType & { name: string },\n): AppDomNodeOfType {\n return {\n ...init,\n id,\n type,\n parentId: null,\n parentProp: null,\n parentIndex: null,\n } as AppDomNodeOfType;\n}\n\nfunction slugifyNodeName(nameCandidate: string, fallback: string): string {\n let slug = nameCandidate;\n slug = slug.trim();\n // try to replace accents with relevant ascii\n slug = removeDiacritics(slug);\n // replace spaces with camelcase\n const [first, ...rest] = slug.split(/\\s+/);\n slug = first + pascalCase(...rest);\n // replace disallowed characters for js identifiers\n slug = slug.replace(/[^a-zA-Z0-9]+/g, '_');\n // remove leading digits\n slug = slug.replace(/^\\d+/g, '');\n if (!slug) {\n slug = fallback;\n }\n return slug;\n}\n\nexport function validateNodeName(name: string, disallowedNames: Set, kind: string) {\n if (!name) {\n return 'a name is required';\n }\n\n const firstLetter = name[0];\n if (!/[a-z_]/i.test(firstLetter)) {\n return `${kind} may not start with a \"${firstLetter}\"`;\n }\n\n const match = /([^a-z0-9_])/i.exec(name);\n\n if (match) {\n const invalidCharacter = match[1];\n if (/\\s/.test(invalidCharacter)) {\n return `${kind} may not contain spaces`;\n }\n\n return `${kind} may not contain a \"${invalidCharacter}\"`;\n }\n\n const slug = slugifyNodeName(name, kind);\n\n const isDuplicate = disallowedNames.has(slug);\n\n if (isDuplicate) {\n return `There already is a ${kind} with this name`;\n }\n\n return null;\n}\n\nexport function createNode(\n dom: AppDom,\n type: T,\n init: AppDomNodeInitOfType,\n): AppDomNodeOfType {\n const id = createId();\n const name = slugifyNodeName(init.name || type, type);\n return createNodeInternal(id, type, {\n ...init,\n name,\n });\n}\n\nexport function createFragmentInternal(\n id: NodeId,\n type: T,\n init: AppDomNodeInitOfType & { name: string },\n): AppDom {\n return {\n nodes: {\n [id]: createNodeInternal(id, type, init),\n },\n root: id,\n version: CURRENT_APPDOM_VERSION,\n };\n}\n\nexport function createFragment(\n type: T,\n init: AppDomNodeInitOfType & { name: string },\n): AppDom {\n const rootId = createId();\n return createFragmentInternal(rootId, type, init);\n}\n\nexport function createDom(): AppDom {\n return createFragment('app', {\n name: 'Application',\n attributes: {},\n });\n}\n\n/**\n * Creates a new DOM node representing a React Element\n */\nexport function createElement

(\n dom: AppDom,\n component: string,\n props: Partial> = {},\n layout: Partial> = {},\n name?: string,\n): ElementNode {\n return createNode(dom, 'element', {\n name: name || uncapitalize(component),\n props,\n attributes: {\n component,\n },\n layout,\n });\n}\n\n/**\n * Get all descendants of a `node`, flattens childNodes objects into one single array\n */\nexport function getDescendants(dom: AppDom, node: AppDomNode): readonly AppDomNode[] {\n const children: readonly AppDomNode[] = Object.values(getChildNodes(dom, node))\n .flat()\n .filter(Boolean);\n return [...children, ...children.flatMap((child) => getDescendants(dom, child))];\n}\n\n/**\n * Get all siblings of a `node`\n */\nexport function getSiblings(dom: AppDom, node: AppDomNode): readonly AppDomNode[] {\n return Object.values(dom.nodes).filter(\n (sibling) =>\n sibling.parentId === node.parentId &&\n sibling.parentProp === node.parentProp &&\n sibling.id !== node.id,\n );\n}\n\nexport function getAncestors(dom: AppDom, node: AppDomNode): readonly AppDomNode[] {\n const parent = getParent(dom, node);\n return parent ? [...getAncestors(dom, parent), parent] : [];\n}\n\n/**\n * Get all the ancestors of the `node` up until the first PageNode node is encountered\n */\nexport function getPageAncestors(\n dom: AppDom,\n node: AppDomNode,\n): readonly (ElementNode | PageNode)[] {\n const parent = getParent(dom, node);\n return parent && (isElement(parent) || isPage(parent))\n ? [...getPageAncestors(dom, parent), parent]\n : [];\n}\n\n/**\n * Get the first PageNode node up in the DOM tree starting from `node`\n */\nexport function getPageAncestor(dom: AppDom, node: AppDomNode): PageNode | null {\n if (isPage(node)) {\n return node;\n }\n const parent = getParent(dom, node);\n if (parent) {\n return getPageAncestor(dom, parent);\n }\n return null;\n}\n\n/**\n * Returns all nodes with a given component type\n */\nexport function getComponentTypeNodes(dom: AppDom, componentId: string): readonly AppDomNode[] {\n return Object.values(dom.nodes).filter(\n (node) => isElement(node) && node.attributes.component === componentId,\n );\n}\n\n/**\n * Returns the set of names for which the given node must have a different name\n */\nexport function getExistingNamesForNode(dom: AppDom, node: AppDomNode): Set {\n if (isElement(node)) {\n const pageNode = getPageAncestor(dom, node);\n const pageDescendants = pageNode ? getDescendants(dom, pageNode) : [];\n return new Set(\n pageDescendants\n .filter((descendant) => descendant.id !== node.id)\n .map((scopeNode) => scopeNode.name),\n );\n }\n\n return new Set(getSiblings(dom, node).map((scopeNode) => scopeNode.name));\n}\n\nexport function getExistingNamesForChildren(\n dom: AppDom,\n parent: Parent,\n parentProp?: ParentProp,\n): Set {\n const pageNode = getPageAncestor(dom, parent);\n\n if (pageNode) {\n const pageDescendants = getDescendants(dom, pageNode);\n return new Set(pageDescendants.map((scopeNode) => scopeNode.name));\n }\n\n if (parentProp) {\n const childNodes = getChildNodes(dom, parent);\n const { [parentProp]: children = [] } = childNodes;\n return new Set(children.map((scopeNode) => scopeNode.name));\n }\n\n const descendants = getDescendants(dom, parent);\n return new Set(descendants.map((scopeNode: AppDomNode) => scopeNode.name));\n}\n\nexport function proposeName(candidate: string, disallowedNames: Set = new Set()): string {\n const slug = slugifyNodeName(candidate, 'node');\n if (!disallowedNames.has(slug)) {\n return slug;\n }\n const basename = candidate.replace(/\\d+$/, '');\n let counter = 1;\n while (disallowedNames.has(basename + counter)) {\n counter += 1;\n }\n return basename + counter;\n}\n\nexport function setNodeName(dom: AppDom, node: AppDomNode, name: string): AppDom {\n if (dom.nodes[node.id].name === name) {\n return dom;\n }\n return update(dom, {\n nodes: update(dom.nodes, {\n [node.id]: {\n ...node,\n name: slugifyNodeName(name, node.type),\n },\n }),\n });\n}\n\nexport type PropNamespaces = {\n [K in keyof N]: N[K] extends BindableAttrValues | undefined ? K : never;\n}[keyof N & string];\n\nexport type BindableProps = {\n [K in keyof T]: T[K] extends BindableAttrValue ? K : never;\n}[keyof T & string];\n\nexport function setNodeProp>(\n dom: AppDom,\n node: Node,\n prop: Prop,\n value: Node[Prop] | null,\n): AppDom {\n if (value) {\n return update(dom, {\n nodes: update(dom.nodes, {\n [node.id]: update(node, {\n [prop]: value,\n } as any) as Partial,\n } as Partial),\n });\n }\n\n return update(dom, {\n nodes: update(dom.nodes, {\n [node.id]: omit(node, prop) as Partial,\n } as Partial),\n });\n}\n\nexport function setNamespacedProp<\n Node extends AppDomNode,\n Namespace extends PropNamespaces,\n Prop extends keyof Node[Namespace] & string,\n>(node: Node, namespace: Namespace, prop: Prop, value: Node[Namespace][Prop] | null): Node {\n if (value) {\n return update(node, {\n [namespace]: updateOrCreate((node as Node)[namespace], {\n [prop]: value,\n } as any) as Partial,\n } as Partial);\n }\n return update(node, {\n [namespace]: omit(node[namespace], prop) as Partial,\n } as Partial);\n}\n\nexport function setQueryProp(\n node: QueryNode,\n prop: K,\n value: Q[K],\n): QueryNode {\n const original = node.attributes.query;\n return setNamespacedProp(node, 'attributes', 'query', { ...original, [prop]: value });\n}\n\nexport function setNodeNamespacedProp<\n Node extends AppDomNode,\n Namespace extends PropNamespaces,\n Prop extends keyof NonNullable & string,\n>(\n dom: AppDom,\n node: Node,\n namespace: Namespace,\n prop: Prop,\n value: NonNullable[Prop] | null,\n): AppDom {\n if (value) {\n return update(dom, {\n nodes: update(dom.nodes, {\n [node.id]: update(dom.nodes[node.id], {\n [namespace]: updateOrCreate((dom.nodes[node.id] as Node)[namespace], {\n [prop]: value,\n } as any) as Partial,\n } as Partial),\n }),\n });\n }\n return update(dom, {\n nodes: update(dom.nodes, {\n [node.id]: update(node, {\n [namespace]: omit(node[namespace]!, prop) as Partial,\n } as Partial),\n }),\n });\n}\n\nfunction setNodeParent(\n dom: AppDom,\n node: N,\n parentId: NodeId,\n parentProp: string,\n parentIndex?: string,\n) {\n if (!parentIndex) {\n const parent = getNode(dom, parentId);\n\n const children: readonly AppDomNode[] = (getChildNodes(dom, parent) as any)[parentProp] ?? [];\n const lastIndex = children.length > 0 ? children[children.length - 1].parentIndex : null;\n parentIndex = createFractionalIndex(lastIndex, null);\n }\n\n return update(dom, {\n nodes: update(dom.nodes, {\n [node.id]: update(node as AppDomNode, {\n parentId,\n parentProp,\n parentIndex,\n }),\n }),\n });\n}\n\nexport function addNode(\n dom: AppDom,\n newNode: Child,\n parent: Parent,\n parentProp: ParentPropOf,\n parentIndex?: string,\n): AppDom {\n if (newNode.parentId) {\n throw new Error(`Node \"${newNode.id}\" is already attached to a parent`);\n }\n\n const existingNames = getExistingNamesForChildren(dom, parent, parentProp);\n\n if (existingNames.has(newNode.name)) {\n newNode = {\n ...newNode,\n name: proposeName(newNode.name, existingNames),\n };\n }\n\n return setNodeParent(dom, newNode, parent.id, parentProp, parentIndex);\n}\n\nexport function moveNode(\n dom: AppDom,\n node: Child,\n parent: Parent,\n parentProp: ParentPropOf,\n parentIndex?: string,\n) {\n return setNodeParent(dom, node, parent.id, parentProp, parentIndex);\n}\n\nexport function nodeExists(dom: AppDom, nodeId: NodeId): boolean {\n return !!getMaybeNode(dom, nodeId);\n}\n\nexport function saveNode(dom: AppDom, node: AppDomNode) {\n if (!nodeExists(dom, node.id)) {\n throw new Error(`Attempt to update node \"${node.id}\", but it doesn't exist in the dom`);\n }\n\n return update(dom, {\n nodes: update(dom.nodes, {\n [node.id]: update(dom.nodes[node.id], omit(node, ...RESERVED_NODE_PROPERTIES)),\n }),\n });\n}\n\nexport function removeNode(dom: AppDom, nodeId: NodeId) {\n const node = getNode(dom, nodeId);\n const parent = getParent(dom, node);\n\n invariant(parent, `Node: \"${node.id}\" can't be removed`);\n\n const descendantIds = getDescendants(dom, node).map(({ id }) => id);\n\n return update(dom, {\n nodes: omit(dom.nodes, node.id, ...descendantIds),\n });\n}\n\nexport function fromConstPropValue(prop: undefined): undefined;\nexport function fromConstPropValue(prop: BindableAttrValue): T;\nexport function fromConstPropValue(prop?: BindableAttrValue): T | undefined;\nexport function fromConstPropValue(prop?: BindableAttrValue): T | undefined {\n if (!prop) {\n return undefined;\n }\n if ((prop as JsExpressionAttrValue).$$jsExpression || (prop as EnvAttrValue).$$env) {\n throw new Error(`trying to unbox a non-constant prop value`);\n }\n return prop as T;\n}\n\nexport function fromConstPropValues

(props: BindableAttrValues

): Partial

{\n const result: Partial

= {};\n (Object.entries(props) as ExactEntriesOf>).forEach(([name, prop]) => {\n if (prop) {\n result[name] = fromConstPropValue(prop);\n }\n });\n return result;\n}\n\nconst nodeByNameCache = new WeakMap>();\nfunction getNodeIdByNameIndex(dom: AppDom): Map {\n let cached = nodeByNameCache.get(dom);\n if (!cached) {\n cached = new Map(Array.from(Object.values(dom.nodes), (node) => [node.name, node.id]));\n nodeByNameCache.set(dom, cached);\n }\n return cached;\n}\n\nexport function getNodeIdByName(dom: AppDom, name: string): NodeId | null {\n const index = getNodeIdByNameIndex(dom);\n return index.get(name) ?? null;\n}\n\nexport function getNodeFirstChild(dom: AppDom, node: ElementNode | PageNode, parentProp: string) {\n const nodeChildren = (getChildNodes(dom, node) as NodeChildren)[parentProp] || [];\n return nodeChildren.length > 0 ? nodeChildren[0] : null;\n}\n\nexport function getNodeLastChild(dom: AppDom, node: ElementNode | PageNode, parentProp: string) {\n const nodeChildren = (getChildNodes(dom, node) as NodeChildren)[parentProp] || [];\n return nodeChildren.length > 0 ? nodeChildren[nodeChildren.length - 1] : null;\n}\n\nexport function getSiblingBeforeNode(\n dom: AppDom,\n node: ElementNode | PageNode,\n parentProp: string,\n) {\n const parent = getParent(dom, node);\n\n invariant(parent, `Node: \"${node.id}\" has no parent`);\n\n const parentChildren =\n ((isPage(parent) || isElement(parent)) &&\n (getChildNodes(dom, parent) as NodeChildren)[parentProp]) ||\n [];\n\n const nodeIndex = parentChildren.findIndex((child) => child.id === node.id);\n const nodeBefore = nodeIndex > 0 ? parentChildren[nodeIndex - 1] : null;\n\n return nodeBefore;\n}\n\nexport function getSiblingAfterNode(dom: AppDom, node: ElementNode | PageNode, parentProp: string) {\n const parent = getParent(dom, node);\n\n invariant(parent, `Node: \"${node.id}\" has no parent`);\n\n const parentChildren =\n ((isPage(parent) || isElement(parent)) &&\n (getChildNodes(dom, parent) as NodeChildren)[parentProp]) ||\n [];\n\n const nodeIndex = parentChildren.findIndex((child) => child.id === node.id);\n const nodeAfter = nodeIndex < parentChildren.length - 1 ? parentChildren[nodeIndex + 1] : null;\n\n return nodeAfter;\n}\n\nexport function getNewFirstParentIndexInNode(\n dom: AppDom,\n node: ElementNode | PageNode,\n parentProp: string,\n) {\n const firstChild = getNodeFirstChild(dom, node, parentProp);\n return createFractionalIndex(null, firstChild?.parentIndex || null);\n}\n\nexport function getNewLastParentIndexInNode(\n dom: AppDom,\n node: ElementNode | PageNode,\n parentProp: string,\n) {\n const lastChild = getNodeLastChild(dom, node, parentProp);\n return createFractionalIndex(lastChild?.parentIndex || null, null);\n}\n\nexport function getNewParentIndexBeforeNode(\n dom: AppDom,\n node: ElementNode | PageNode,\n parentProp: string,\n) {\n const nodeBefore = getSiblingBeforeNode(dom, node, parentProp);\n return createFractionalIndex(nodeBefore?.parentIndex || null, node.parentIndex);\n}\n\nexport function getNewParentIndexAfterNode(\n dom: AppDom,\n node: ElementNode | PageNode,\n parentProp: string,\n) {\n const nodeAfter = getSiblingAfterNode(dom, node, parentProp);\n return createFractionalIndex(node.parentIndex, nodeAfter?.parentIndex || null);\n}\n\nexport function addFragment(\n dom: AppDom,\n fragment: AppDom,\n parentId: NodeId,\n parentProp: string,\n parentIndex?: string | undefined,\n) {\n const parent = getNode(dom, parentId);\n const existingNames = getExistingNamesForChildren(dom, parent, parentProp);\n let combinedDom: AppDom = {\n ...dom,\n nodes: {\n ...dom.nodes,\n ...mapValues(fragment.nodes, (node: AppDomNode) => {\n return existingNames.has(node.name)\n ? { ...node, name: proposeName(node.name, existingNames) }\n : node;\n }),\n },\n };\n const fragmentRoot = getNode(combinedDom, fragment.root);\n combinedDom = setNodeParent(combinedDom, fragmentRoot, parentId, parentProp, parentIndex);\n return combinedDom;\n}\n\n/**\n * Make a copy of a subtree (a fragment) of the dom. The structure of a fragment is\n * the same as a dom where the root is the node we create the fragment for\n */\nexport function cloneFragment(dom: AppDom, nodeId: NodeId): AppDom {\n const node = getNode(dom, nodeId);\n const newNode = createNode(dom, node.type, node);\n const childNodes = getChildNodes(dom, node);\n\n let result: AppDom = {\n root: newNode.id,\n nodes: {\n [newNode.id]: newNode,\n },\n };\n\n for (const [childParentProp, children] of Object.entries(childNodes)) {\n if (children) {\n for (const child of children as AppDomNode[]) {\n const childFragment = cloneFragment(dom, child.id);\n result = addFragment(result, childFragment, newNode.id, childParentProp);\n }\n }\n }\n\n return result;\n}\n\nexport function duplicateNode(\n dom: AppDom,\n node: AppDomNode,\n parent: AppDomNode | null = getParent(dom, node),\n parentProp: string | null = node.parentProp,\n): AppDom {\n if (!parent || !parentProp) {\n throw new Error(`Node \"${node.id}\" can't be duplicated, it must have a parent`);\n }\n\n const fragment = cloneFragment(dom, node.id);\n return addFragment(dom, fragment, parent.id, parentProp);\n}\n\nconst RENDERTREE_NODES = [\n 'app',\n 'page',\n 'element',\n 'query',\n 'mutation',\n 'theme',\n 'codeComponent',\n] as const;\n\nexport type RenderTreeNodeType = (typeof RENDERTREE_NODES)[number];\nexport type RenderTreeNode = { [K in RenderTreeNodeType]: AppDomNodeOfType }[RenderTreeNodeType];\nexport type RenderTreeNodes = Record;\n\nexport interface RenderTree {\n root: NodeId;\n nodes: RenderTreeNodes;\n version?: number;\n}\n\nconst frontendNodes = new Set(RENDERTREE_NODES);\nfunction createRenderTreeNode(node: AppDomNode): RenderTreeNode | null {\n if (!frontendNodes.has(node.type)) {\n return null;\n }\n\n if (isQuery(node) || isMutation(node)) {\n if (node.attributes.query) {\n node = setNamespacedProp(node, 'attributes', 'query', null);\n }\n }\n\n return node as RenderTreeNode;\n}\n\n/**\n * We need to make sure no secrets end up in the frontend html, so let's only send the\n * nodes that we need to build frontend, and that we know don't contain secrets.\n * TODO: Would it make sense to create a separate datastructure that represents the render tree?\n */\nexport function createRenderTree(dom: AppDom): RenderTree {\n return {\n ...dom,\n nodes: mapProperties(dom.nodes, ([id, node]) => {\n const rendernode = createRenderTreeNode(node);\n return rendernode ? [id, rendernode] : null;\n }),\n };\n}\n\nexport function ref(nodeId: NodeId): NodeReference;\nexport function ref(nodeId: null | undefined): null;\nexport function ref(nodeId: Maybe): NodeReference | null;\nexport function ref(nodeId: Maybe): NodeReference | null {\n return nodeId ? { $ref: nodeId } : null;\n}\n\nexport function deref(nodeRef: NodeReference): NodeId;\nexport function deref(nodeRef: null | undefined): null;\nexport function deref(nodeRef: Maybe): NodeId | null;\nexport function deref(nodeRef: Maybe): NodeId | null {\n if (nodeRef) {\n return nodeRef.$ref;\n }\n return null;\n}\n\nexport function createDefaultDom(): AppDom {\n let dom = createDom();\n const appNode = getApp(dom);\n\n // Create default page\n const newPageNode = createNode(dom, 'page', {\n name: 'Page 1',\n attributes: {\n title: 'Page 1',\n display: 'shell',\n },\n });\n\n dom = addNode(dom, newPageNode, appNode, 'pages');\n\n return dom;\n}\n\nexport function getPageByName(dom: AppDom, name: string): PageNode | null {\n const rootNode = getApp(dom);\n const { pages = [] } = getChildNodes(dom, rootNode);\n return pages.find((page) => page.name === name) ?? null;\n}\n\nexport function getQueryByName(dom: AppDom, page: PageNode, name: string): QueryNode | null {\n const { queries = [] } = getChildNodes(dom, page);\n return queries.find((query) => query.name === name) ?? null;\n}\n\n/**\n * Represents the changes between two doms in terms of added/deleted nodes.\n */\nexport interface DomDiff {\n set: AppDomNode[];\n unset: NodeId[];\n}\n\n/**\n * Compare two doms and return a diff of the changes.\n */\nexport function createDiff(from: AppDom, to: AppDom): DomDiff {\n const result: DomDiff = {\n set: [],\n unset: [],\n };\n\n const allIds = new Set([\n ...(Object.keys(from.nodes) as NodeId[]),\n ...(Object.keys(to.nodes) as NodeId[]),\n ]);\n\n for (const id of allIds) {\n if (to.nodes[id] && to.nodes[id] !== from.nodes[id]) {\n result.set.push(to.nodes[id]);\n } else if (!to.nodes[id] && from.nodes[id]) {\n result.unset.push(id);\n }\n }\n\n return result;\n}\n\n/**\n * Apply a diff to a dom and return the new dom.\n */\nexport function applyDiff(dom: AppDom, diff: DomDiff): AppDom {\n let result = dom;\n\n for (const node of diff.set) {\n result = update(result, {\n nodes: update(result.nodes, {\n [node.id]: node,\n }),\n });\n }\n\n for (const id of diff.unset) {\n result = update(result, {\n nodes: omit(result.nodes, id),\n });\n }\n\n return result;\n}\n\nfunction findEnvBindings(obj: unknown): EnvAttrValue[] {\n if (Array.isArray(obj)) {\n return obj.flatMap((item) => findEnvBindings(item));\n }\n\n if (obj && typeof obj === 'object') {\n try {\n return [envBindingSchema.parse(obj)];\n } catch {\n return Object.values(obj).flatMap((value) => findEnvBindings(value));\n }\n }\n\n return [];\n}\n\nexport function getRequiredEnvVars(dom: AppDom): Set {\n const allVars = Object.values(dom.nodes)\n .flatMap((node) => findEnvBindings(node))\n .map((binding) => binding.$$env);\n\n return new Set(allVars);\n}\n","import { setWith, clone } from 'lodash-es';\n\n/**\n * Applies changes to an object in an immutable way. The `dest` object will adopt the properties of\n * the `src` object. Object identity is preserved if the operation results in a no-op.\n */\nexport function update(dest: T, src: Partial): T {\n let result: T | undefined;\n Object.entries(src).forEach(([key, value]) => {\n if (dest[key as keyof T] !== value) {\n result = result || { ...dest };\n (result as any)[key] = value;\n }\n });\n return result || dest;\n}\n/**\n * Applies changes to an object in an immutable way. The `dest` object will adopt the properties of\n * the `src` object. If `dest` is undefined, `src` will be used. Object identity is preserved if\n * the operation results in a no-op.\n */\nexport function updateOrCreate(dest: T | null | undefined, src: NonNullable): T {\n return dest ? update(dest, src) : src;\n}\n\n/**\n * Updates an object's property value for a given path in an immutable way.\n */\nexport function updatePath

(obj: P, path: string, value: V): P {\n return setWith(clone(obj), path, value, clone);\n}\n\n/**\n * Inserts a value in an immutable array.\n */\nexport function insert(array: readonly T[], value: T, index: number): T[] {\n return [...array.slice(0, index), value, ...array.slice(index)];\n}\n\n/**\n * Updates a value in an immutable array.\n */\nexport function updateArray(array: readonly T[], value: T, index: number): T[] {\n return [...array.slice(0, index), value, ...array.slice(index + 1)];\n}\n\n/**\n * Removes a value in an immutable array.\n */\nexport function remove(array: readonly T[], index: number): T[] {\n return [...array.slice(0, index), ...array.slice(index + 1)];\n}\n\n/**\n * Removes a set of properties from an object in an immutable way. Object identity is preserved if\n * the operation results in a no-op.\n */\nexport function omit(obj: T, ...keys: readonly K[]): Omit {\n let result: T | undefined;\n\n keys.forEach((key) => {\n if (Object.prototype.hasOwnProperty.call(obj, key)) {\n if (!result) {\n result = { ...obj };\n }\n delete result[key];\n }\n });\n\n return result || obj;\n}\n\n/**\n * Returns an object created from `obj` with only the specified `keys`. Object identity is preserved if\n * the operation results in a no-op.\n */\nexport function take>(\n obj: T,\n ...keys: readonly K[]\n): Omit> {\n const keySet = new Set(keys);\n let result: T | undefined;\n\n Object.keys(obj).forEach((key) => {\n if (!keySet.has(key)) {\n if (!result) {\n result = { ...obj };\n }\n delete result[key as keyof T];\n }\n });\n\n return result || obj;\n}\n/**\n * Returns an array without any of its items equal to `value`. Object identity is preserved if\n * the operation results in a no-op.\n */\nexport function without(array: readonly T[], value: T): readonly T[] {\n const result: T[] = [];\n\n let found = false;\n for (let i = 0; i < array.length; i += 1) {\n const elm = array[i];\n if (elm === value) {\n found = true;\n } else {\n result.push(elm);\n }\n }\n\n return found ? result : array;\n}\n","import { SimplePaletteColorOptions, ThemeOptions } from '@mui/material';\nimport { z } from 'zod';\n\nexport const API_VERSION = 'v1';\n\nfunction toolpadObjectSchema(kind: K, spec: T) {\n return z.object({\n apiVersion: z\n .literal('v1')\n .describe(\n `Defines the version of this object. Used in determining compatibility between Toolpad \"${kind}\" objects.`,\n ),\n kind: z.literal(kind).describe(`Describes the nature of this Toolpad \"${kind}\" object.`),\n spec: spec.describe(`Defines the shape of this \"${kind}\" object`),\n });\n}\n\nconst literalSchema = z.union([z.string(), z.number(), z.boolean(), z.null()]);\n\nfunction nameValuePairSchema(valueType: V) {\n return z\n .object({\n name: z.string().describe('The name'),\n value: valueType.describe(valueType.description ?? 'The value'),\n })\n .describe('A name/value pair.');\n}\n\nexport const jsExpressionBindingSchema = z\n .object({\n $$jsExpression: z.string().describe('The expression to be evaluated.'),\n })\n .describe('A binding that evaluates an expression and returns the result.');\n\nexport const envBindingSchema = z\n .object({\n $$env: z.string().describe('The name of an environment variable.'),\n })\n .describe('An environment variable.');\n\nfunction bindableSchema(valueType: V) {\n return z.union([valueType, jsExpressionBindingSchema, envBindingSchema]);\n}\n\nconst jsExpressionActionSchema = z\n .object({\n $$jsExpressionAction: z.string().describe('The code to be executed.'),\n })\n .describe('A javascript expression to be executed when this action is triggered.');\n\nconst navigationActionSchema = z\n .object({\n $$navigationAction: z.object({\n page: z.string().describe('The page that is being navigated to'),\n parameters: z\n .record(bindableSchema(z.any()))\n .describe('Parameters to pass when navigating to this page'),\n }),\n })\n .describe(\n 'A navigation from one page to another, optionally passing parameters to the next page.',\n );\n\nexport type NavigationAction = z.infer;\n\nconst fetchModeSchema = z.union([\n z.literal('query').describe('Fetch automatically when the page opens'),\n z.literal('mutation').describe('Fetch on manual action only'),\n]);\n\nconst nameStringValuePairSchema = nameValuePairSchema(z.string()).describe(\n 'a name/value pair with a string value.',\n);\n\nconst rawBodySchema = z.object({\n kind: z.literal('raw'),\n content: bindableSchema(z.string()),\n contentType: z.string(),\n});\n\nconst bindableNameStringValueSchema = nameValuePairSchema(bindableSchema(z.string())).describe(\n 'A name/value pair where the value is dynamically bindable to strings.',\n);\n\nconst urlEncodedBodySchema = z.object({\n kind: z.literal('urlEncoded'),\n content: z.array(bindableNameStringValueSchema),\n});\n\nconst fetchBodySchema = z.discriminatedUnion('kind', [rawBodySchema, urlEncodedBodySchema]);\n\nexport type FetchBody = z.infer;\n\nconst rawResponseTypeSchema = z\n .object({\n kind: z.literal('raw'),\n })\n .describe(\"Don't interpret this body at all.\");\n\nconst jsonResponseTypeSchema = z\n .object({\n kind: z.literal('json'),\n })\n .describe('Interpret the fetch response as JSON');\n\nconst csvResponseTypeSchema = z\n .object({\n kind: z.literal('csv'),\n headers: z.boolean().describe('First row contains headers'),\n })\n .describe('Interpret the fetch response as CSV');\n\nconst xmlResponseTypeSchema = z\n .object({\n kind: z.literal('xml'),\n })\n .describe('Interpret the fetch response as XML');\n\nconst responseTypeSchema = z\n .discriminatedUnion('kind', [\n rawResponseTypeSchema,\n jsonResponseTypeSchema,\n csvResponseTypeSchema,\n xmlResponseTypeSchema,\n ])\n .describe('Describes how a the fetch response is to be interpreted.');\n\nexport type ResponseType = z.infer;\n\nconst fetchQueryConfigSchema = z.object({\n kind: z.literal('rest').describe('Designates this object as a fetch query.'),\n url: bindableSchema(z.string()).optional().describe('The URL of the request'),\n method: z.string().optional().describe('The request method.'),\n headers: z.array(bindableNameStringValueSchema).optional().describe('Extra request headers.'),\n searchParams: z\n .array(bindableNameStringValueSchema)\n .optional()\n .describe('Extra url query parameters.'),\n body: fetchBodySchema.optional().describe('The request body.'),\n transformEnabled: z.boolean().optional().describe('Run a custom transformer on the response.'),\n transform: z.string().optional().describe('The custom transformer to run when enabled.'),\n response: responseTypeSchema.optional().describe('How to parse the response.'),\n});\n\nexport type FetchQueryConfig = z.infer;\n\nconst localQueryConfigSchema = z.object({\n kind: z.literal('local').describe('Designates this object as a local function query.'),\n function: z\n .string()\n .optional()\n .describe('The function to be executed on the backend by this query.'),\n});\n\nexport type LocalQueryConfig = z.infer;\n\nconst queryConfigSchema = z.discriminatedUnion('kind', [\n fetchQueryConfigSchema,\n localQueryConfigSchema,\n]);\n\nexport type QueryConfig = z.infer;\n\nconst querySchema = z.object({\n name: z.string().describe('A name for the query'),\n enabled: bindableSchema(z.boolean())\n .optional()\n .describe(\n \"Activates or deactivates the query. When deactivated the data won't be loaded when the page opens.\",\n ),\n parameters: z\n .array(nameValuePairSchema(bindableSchema(z.any())))\n .optional()\n .describe('Parameters to pass to this query.'),\n mode: fetchModeSchema.optional().describe('How to fetch this query.'),\n query: queryConfigSchema.optional().describe('Query definition'),\n transform: z.string().optional().describe('Transformation to run on the response'),\n transformEnabled: z.boolean().optional().describe('Enable the transformation'),\n refetchInterval: z.number().optional().describe('Interval to rerun this query at'),\n cacheTime: z.number().optional().describe('Time to cache before refetching'),\n});\n\nexport type Query = z.infer;\n\nexport type Template = {\n $$template: ElementType[];\n};\n\nlet elementSchema: z.ZodType;\n\nconst templateSchema: z.ZodType