tsondb 0.5.19 → 0.6.1

package/dist/src/web/components/Git.js

@@ -1,8 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
 import { useLocation } from "preact-iso";
-import { useEffect, useState } from "preact/hooks";
+import { useCallback, useEffect, useState } from "preact/hooks";
 import { getGitStatusForDisplay, getLabelForGitStatus, isChangedInIndex, isChangedInWorkingDir, } from "../../shared/utils/git.js";
-import { commitStagedFiles, createBranch, getAllEntities, getBranches, getGitStatus, pullCommits, pushCommits, stageAllFiles, stageFileOfEntity, switchBranch, unstageAllFiles, unstageFileOfEntity, } from "../api.js";
+import { getAllEntities } from "../api/declarations.js";
+import { commitStagedFiles, createBranch, getBranches, getStatus, pullCommits, pushCommits, stageAllFiles, stageFileOfEntity, switchBranch, unstageAllFiles, unstageFileOfEntity, } from "../api/git.js";
+import { useSetting } from "../hooks/useSettings.js";
 const filterFilesForDisplay = (predicate, entities, data) => Object.entries(data.instances)
     .map(([entityName, instances]) => [
     entityName,
@@ -17,9 +19,10 @@ const GitFileList = ({ filesByEntity, onFile, isIndex = false }) => filesByEntit
                     const gitStatusForDisplay = getGitStatusForDisplay(instance.gitStatus);
                     return (_jsxs("li", { class: "git-instance-list-item", children: [_jsx("span", { class: "title", children: instance.displayName }), _jsx("span", { class: `git-status git-status--${gitStatusForDisplay ?? ""}`, title: getLabelForGitStatus(gitStatusForDisplay), children: gitStatusForDisplay }), _jsx("button", { onClick: () => {
                                     onFile(entityName, instance);
-                                }, children: isIndex ? "Unstage" : "Stage" })] }, instance.fileName));
+                                }, children: isIndex ? "Unstage" : "Stage" })] }, instance.id));
                 }) })] }, entityName))) }));
 export const Git = () => {
+    const [locales] = useSetting("displayedLocales");
     const [isOpen, setIsOpen] = useState(false);
     const [commitsAhead, setCommitsAhead] = useState(0);
     const [commitsBehind, setCommitsBehind] = useState(0);
@@ -29,17 +32,17 @@ export const Git = () => {
     const [entities, setEntities] = useState([]);
     const [allBranches, setAllBranches] = useState([]);
     const [currentBranch, setCurrentBranch] = useState("");
-    const updateGitStatus = (localEntities) => Promise.all([getGitStatus(), getBranches()]).then(([statusData, branchesData]) => {
+    const updateGitStatus = useCallback((localEntities) => Promise.all([getStatus(locales), getBranches(locales)]).then(([statusData, branchesData]) => {
         setIndexFiles(filterFilesForDisplay(isChangedInIndex, localEntities, statusData));
         setWorkingTreeFiles(filterFilesForDisplay(isChangedInWorkingDir, localEntities, statusData));
         setCommitsAhead(statusData.commitsAhead);
         setCommitsBehind(statusData.commitsBehind);
         setAllBranches(branchesData.allBranches);
         setCurrentBranch(branchesData.currentBranch);
-    });
+    }), [locales]);
     const location = useLocation();
     useEffect(() => {
-        getAllEntities()
+        getAllEntities(locales)
             .then(async (data) => {
             const entitiesFromServer = data.declarations.map(decl => decl.declaration);
             setEntities(entitiesFromServer);
@@ -50,9 +53,9 @@ export const Git = () => {
                 console.error("Error fetching entities:", error.toString());
             }
         });
-    }, [location.path]);
+    }, [location.path, locales, updateGitStatus]);
     const stage = (entityName, instance) => {
-        stageFileOfEntity(entityName, instance.id)
+        stageFileOfEntity(locales, entityName, instance.id)
             .then(() => updateGitStatus(entities))
             .catch((error) => {
             if (error instanceof Error) {
@@ -61,7 +64,7 @@ export const Git = () => {
         });
     };
     const stageAll = () => {
-        stageAllFiles()
+        stageAllFiles(locales)
             .then(() => updateGitStatus(entities))
             .catch((error) => {
             if (error instanceof Error) {
@@ -70,7 +73,7 @@ export const Git = () => {
         });
     };
     const unstage = (entityName, instance) => {
-        unstageFileOfEntity(entityName, instance.id)
+        unstageFileOfEntity(locales, entityName, instance.id)
             .then(() => updateGitStatus(entities))
             .catch((error) => {
             if (error instanceof Error) {
@@ -79,7 +82,7 @@ export const Git = () => {
         });
     };
     const unstageAll = () => {
-        unstageAllFiles()
+        unstageAllFiles(locales)
             .then(() => updateGitStatus(entities))
             .catch((error) => {
             if (error instanceof Error) {
@@ -91,7 +94,7 @@ export const Git = () => {
         if (commitMessage.length > 0 &&
             indexFiles.length > 0 &&
             confirm("Do you want to commit all staged files?")) {
-            commitStagedFiles(commitMessage)
+            commitStagedFiles(locales, commitMessage)
                 .then(() => {
                 setCommitMessage("");
                 return updateGitStatus(entities);
@@ -104,7 +107,7 @@ export const Git = () => {
         }
     };
     const push = () => {
-        pushCommits()
+        pushCommits(locales)
             .then(() => {
             alert("Pushed commits successfully");
             return updateGitStatus(entities);
@@ -114,7 +117,7 @@ export const Git = () => {
         });
     };
     const pull = () => {
-        pullCommits()
+        pullCommits(locales)
             .then(() => {
             alert("Pulled commits successfully");
             return updateGitStatus(entities);
@@ -133,7 +136,7 @@ export const Git = () => {
             alert("Branch name already exists");
             return;
         }
-        createBranch(newBranchName)
+        createBranch(locales, newBranchName)
             .then(() => {
             return updateGitStatus(entities);
         })
@@ -144,7 +147,7 @@ export const Git = () => {
         });
     };
     const onSwitchBranch = (event) => {
-        switchBranch(event.currentTarget.value)
+        switchBranch(locales, event.currentTarget.value)
             .then(() => {
             return updateGitStatus(entities);
         })

package/dist/src/web/components/InstanceRouteSkeleton.d.ts

@@ -0,0 +1,42 @@
+import type { FunctionalComponent } from "preact";
+import { type LocationHook } from "preact-iso";
+import type { SetStateAction } from "preact/compat";
+import { type Dispatch } from "preact/hooks";
+import type { UnsafeEntityTaggedInstanceContainerWithChildInstances } from "../../node/utils/childInstances.ts";
+import type { SerializedEntityDecl } from "../../shared/schema/declarations/EntityDecl.ts";
+import { type GetDeclFromDeclName } from "../hooks/useSecondaryDeclarations.ts";
+export type InstanceRouteSkeletonInitializer = (values: {
+    locales: string[];
+    entity: SerializedEntityDecl;
+    instanceId: string | undefined;
+    setInstanceContent: Dispatch<SetStateAction<unknown>>;
+    getDeclFromDeclName: GetDeclFromDeclName;
+}) => Promise<void>;
+export type InstanceRouteSkeletonOnSubmitHandler = (values: {
+    locales: string[];
+    entity: SerializedEntityDecl;
+    instanceId: string | undefined;
+    instanceContent: unknown;
+    buttonName: string | undefined;
+    customId: string;
+    isLocaleEntity: boolean | undefined;
+    childInstances: UnsafeEntityTaggedInstanceContainerWithChildInstances[];
+    route: LocationHook["route"];
+    setInstanceContent: Dispatch<SetStateAction<unknown>>;
+    setCustomId: Dispatch<SetStateAction<string>>;
+    getDeclFromDeclName: GetDeclFromDeclName;
+}) => Promise<void>;
+export type InstanceRouteSkeletonTitleBuilder = (values: {
+    locales: string[];
+    entity: SerializedEntityDecl;
+    instanceId: string | undefined;
+    instanceContent: unknown;
+}) => string | undefined;
+type Props = {
+    mode: "create" | "edit";
+    init: InstanceRouteSkeletonInitializer;
+    titleBuilder: InstanceRouteSkeletonTitleBuilder;
+    onSubmit: InstanceRouteSkeletonOnSubmitHandler;
+};
+export declare const InstanceRouteSkeleton: FunctionalComponent<Props>;
+export {};

package/dist/src/web/components/InstanceRouteSkeleton.js

@@ -0,0 +1,114 @@
+import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+import { useLocation, useRoute } from "preact-iso";
+import { useCallback, useEffect, useState } from "preact/hooks";
+import { removeAt } from "../../shared/utils/array.js";
+import { getSerializedDisplayNameFromEntityInstance } from "../../shared/utils/displayName.js";
+import { toTitleCase } from "../../shared/utils/string.js";
+import { validateLocaleIdentifier } from "../../shared/validation/identifier.js";
+import { deleteInstanceByEntityNameAndId, getChildInstancesForInstanceByEntityName, } from "../api/declarations.js";
+import { useEntityFromRoute } from "../hooks/useEntityFromRoute.js";
+import { useInstanceNamesByEntity } from "../hooks/useInstanceNamesByEntity.js";
+import { useGetDeclFromDeclName, } from "../hooks/useSecondaryDeclarations.js";
+import { useSetting } from "../hooks/useSettings.js";
+import { homeTitle } from "../routes/Home.js";
+import { NotFound } from "../routes/NotFound.js";
+import { Layout } from "./Layout.js";
+import { TypeInput } from "./typeInputs/TypeInput.js";
+import { ValidationErrors } from "./typeInputs/utils/ValidationErrors.js";
+export const InstanceRouteSkeleton = ({ mode, init, titleBuilder, onSubmit, }) => {
+    const { params: { name, id }, } = useRoute();
+    const [locales] = useSetting("displayedLocales");
+    const [getDeclFromDeclName, declsLoaded] = useGetDeclFromDeclName();
+    const { declaration: entity, isLocaleEntity } = useEntityFromRoute() ?? {};
+    const [instanceNamesByEntity] = useInstanceNamesByEntity();
+    const [instanceContent, setInstanceContent] = useState();
+    const [childInstances, setChildInstances] = useState([]);
+    const [customId, setCustomId] = useState("");
+    const { route } = useLocation();
+    useEffect(() => {
+        document.title =
+            (entity && titleBuilder({ locales, entity, instanceContent, instanceId: id })) ??
+                "Not found — TSONDB";
+    }, [entity, id, instanceContent, locales, titleBuilder]);
+    useEffect(() => {
+        if (entity && instanceContent === undefined) {
+            init({ locales, entity, instanceId: id, setInstanceContent, getDeclFromDeclName })
+                .then(() => id
+                ? getChildInstancesForInstanceByEntityName(locales, entity.name, id).then(result => {
+                    setChildInstances(result.instances);
+                })
+                : Promise.resolve())
+                .catch((error) => {
+                console.error("Error initializing instance route skeleton:", error);
+            });
+        }
+    }, [entity, getDeclFromDeclName, id, init, instanceContent, locales, name]);
+    const handleSubmit = (event) => {
+        event.preventDefault();
+        if (entity && instanceContent !== undefined) {
+            const buttonName = event.submitter?.getAttribute("name") ?? undefined;
+            onSubmit({
+                locales,
+                entity,
+                instanceId: id,
+                instanceContent,
+                buttonName,
+                route,
+                customId,
+                getDeclFromDeclName,
+                isLocaleEntity,
+                setCustomId,
+                setInstanceContent,
+                childInstances,
+            }).catch((error) => {
+                console.error("Error submitting instance data:", error);
+            });
+        }
+    };
+    const handleOnChildChange = useCallback((index, value) => {
+        setChildInstances(old => old[index] ? old.with(index, { ...old[index], content: value }) : old);
+    }, []);
+    const handleOnChildAdd = useCallback((entityName, value) => {
+        setChildInstances(old => [
+            ...old,
+            { entityName, childInstances: [], id: undefined, content: value },
+        ]);
+    }, []);
+    const handleOnChildRemove = useCallback((index) => {
+        setChildInstances(old => removeAt(old, index));
+    }, []);
+    if (!name || (mode === "edit" && !id)) {
+        return _jsx(NotFound, {});
+    }
+    if (!entity || instanceContent === undefined || !instanceNamesByEntity || !declsLoaded) {
+        return (_jsxs(Layout, { breadcrumbs: [
+                { url: "/", label: homeTitle },
+                {
+                    url: `/entities/${name}`,
+                    label: entity ? toTitleCase(entity.namePlural) : name,
+                },
+            ], children: [_jsxs("div", { class: "header-with-btns", children: [_jsxs("h1", { class: "empty-name", children: [_jsx("span", { children: id }), " ", id && (_jsx("span", { class: "id", "aria-hidden": true, children: id }))] }), _jsx("button", { class: "destructive", disabled: true, children: "Delete" })] }), _jsx("p", { class: "loading", children: "Loading \u2026" })] }));
+    }
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- Already checked for NotFound above
+    const defaultName = mode === "edit" ? id : customId || `New ${toTitleCase(entity.name)}`;
+    const instanceName = getSerializedDisplayNameFromEntityInstance(entity, instanceContent, defaultName, locales).name;
+    const idErrors = mode === "create" && isLocaleEntity ? validateLocaleIdentifier(customId) : [];
+    return (_jsxs(Layout, { breadcrumbs: [
+            { url: "/", label: homeTitle },
+            { url: `/entities/${name}`, label: toTitleCase(entity.namePlural) },
+        ], children: [_jsxs("div", { class: "header-with-btns", children: [_jsxs("h1", { class: instanceName.length === 0 ? "empty-name" : undefined, children: [_jsx("span", { children: instanceName || defaultName }), " ", id && (_jsx("span", { class: "id", "aria-hidden": true, children: id }))] }), id && (_jsx("button", { class: "destructive", onClick: () => {
+                            if (confirm("Are you sure you want to delete this instance?")) {
+                                deleteInstanceByEntityNameAndId(locales, entity.name, id)
+                                    .then(() => {
+                                    route(`/entities/${name}`);
+                                })
+                                    .catch((error) => {
+                                    if (error instanceof Error) {
+                                        alert("Error deleting instance:\n\n" + error.toString());
+                                    }
+                                });
+                            }
+                        }, children: "Delete" }))] }), !id && isLocaleEntity && (_jsxs("div", { class: "field field--id", children: [_jsx("label", { htmlFor: "id", children: "ID" }), _jsx("p", { className: "comment", children: "The instance\u2019s identifier. An IETF language tag (BCP47)." }), _jsx("input", { type: "text", id: "id", value: customId, required: true, pattern: "[a-z]{2,3}(-[A-Z]{2,3})?", placeholder: "en-US, de-DE, \u2026", onInput: event => {
+                            setCustomId(event.currentTarget.value);
+                        }, "aria-invalid": idErrors.length > 0 }), _jsx(ValidationErrors, { errors: idErrors })] })), _jsxs("form", { onSubmit: handleSubmit, children: [_jsx(TypeInput, { type: entity.type, value: instanceContent, path: undefined, instanceNamesByEntity: instanceNamesByEntity, childInstances: childInstances, getDeclFromDeclName: getDeclFromDeclName, onChange: setInstanceContent, onChildChange: handleOnChildChange, onChildAdd: handleOnChildAdd, onChildRemove: handleOnChildRemove }), _jsx("div", { class: "form-footer btns", children: _jsx("button", { type: "submit", name: "save", class: "primary", children: "Save" }) })] })] }));
+};

package/dist/src/web/components/Layout.js

@@ -1,4 +1,5 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "preact/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "preact/jsx-runtime";
+import { Settings } from "./Settings.js";
 export const Layout = ({ breadcrumbs, children }) => {
-    return (_jsxs(_Fragment, { children: [_jsx("header", { children: _jsx("nav", { children: _jsx("ol", { children: breadcrumbs.map(({ url, label }) => (_jsx("li", { children: _jsx("a", { href: url, children: label }) }, url))) }) }) }), _jsx("main", { children: children })] }));
+    return (_jsxs(_Fragment, { children: [_jsxs("header", { children: [_jsx("nav", { children: _jsx("ol", { children: breadcrumbs.map(({ url, label }) => (_jsx("li", { children: _jsx("a", { href: url, children: label }) }, url))) }) }), _jsx(Settings, {})] }), _jsx("main", { children: children })] }));
 };

package/dist/src/web/components/ModalDialog.d.ts

@@ -0,0 +1,2 @@
+import type { FunctionComponent } from "preact";
+export declare const ModalDialog: FunctionComponent<preact.DialogHTMLAttributes>;

package/dist/src/web/components/ModalDialog.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "preact/jsx-runtime";
+import { useEffect, useRef } from "preact/hooks";
+export const ModalDialog = props => {
+    const ref = useRef(null);
+    useEffect(() => {
+        if (ref.current) {
+            if (props.open && !ref.current.open) {
+                ref.current.showModal();
+            }
+            else if (!props.open && ref.current.open) {
+                ref.current.close();
+            }
+        }
+    }, [props.open]);
+    return _jsx("dialog", { ...props, open: undefined, ref: ref });
+};

package/dist/src/web/components/Select.d.ts

@@ -1,3 +1,2 @@
 import type { FunctionalComponent } from "preact";
-import type { SelectHTMLAttributes } from "preact/compat";
-export declare const Select: FunctionalComponent<SelectHTMLAttributes>;
+export declare const Select: FunctionalComponent<preact.SelectHTMLAttributes>;

package/dist/src/web/components/Settings.d.ts

@@ -0,0 +1,2 @@
+import type { FunctionComponent } from "preact";
+export declare const Settings: FunctionComponent;

package/dist/src/web/components/Settings.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "preact/jsx-runtime";
+import { useContext, useState } from "preact/hooks";
+import { removeAt, reorder } from "../../shared/utils/array.js";
+import { getLocaleInstances } from "../api/declarations.js";
+import { ConfigContext } from "../context/config.js";
+import { useMappedAPIResource } from "../hooks/useMappedAPIResource.js";
+import { useSetting } from "../hooks/useSettings.js";
+import { ModalDialog } from "./ModalDialog.js";
+import { Select } from "./Select.js";
+const localeMapper = (result) => result.instances;
+export const Settings = () => {
+    const [locales, setLocales] = useSetting("displayedLocales");
+    const [enumDisplay, setEnumDisplay] = useSetting("enumDisplay");
+    const [isSettingsOpen, setIsSettingsOpen] = useState(false);
+    const config = useContext(ConfigContext);
+    const [localeInstances] = useMappedAPIResource(getLocaleInstances, localeMapper, locales, config.localeEntityName);
+    const [newLocale, setNewLocale] = useState("");
+    return (_jsxs(_Fragment, { children: [_jsx("button", { class: "settings-toggle", onClick: () => {
+                    setIsSettingsOpen(true);
+                }, children: "Settings" }), _jsxs(ModalDialog, { open: isSettingsOpen, class: "settings", closedBy: "any", onClose: () => {
+                    setIsSettingsOpen(false);
+                }, children: [_jsxs("header", { children: [_jsx("h2", { children: "Settings" }), _jsx("button", { class: "close", onClick: () => {
+                                    setIsSettingsOpen(false);
+                                }, children: "Close" })] }), _jsx("h3", { children: "Display Name Locales" }), _jsx("p", { class: "description", children: "Define the locales you want to see instances displayed in. Multiple locales can be specified as fallback locales. The instances will be grouped by the locale they are available in, in the order the locales are specified in." }), _jsxs("ol", { children: [locales.length === 0 && (_jsx("li", { class: "empty", "aria-hidden": true, children: "No locales selected" })), locales.map((locale, index) => (_jsx("li", { children: _jsxs("div", { class: "locale-content", children: [_jsx("span", { children: localeInstances?.find(instance => instance.id === locale)?.displayName ?? locale }), _jsx("button", { onClick: () => {
+                                                setLocales(locales => reorder(locales, index, index - 1));
+                                            }, disabled: index === 0, children: "Move Up" }), _jsx("button", { onClick: () => {
+                                                setLocales(locales => reorder(locales, index, index + 1));
+                                            }, disabled: index === locales.length - 1, children: "Move Down" }), _jsx("button", { onClick: () => {
+                                                setLocales(locales => removeAt(locales, index));
+                                            }, disabled: locales.length < 2, children: "Remove" })] }) }, locale)))] }), _jsxs("div", { class: "add-item-container", children: [_jsxs(Select, { value: newLocale, onInput: event => {
+                                    setNewLocale(event.currentTarget.value);
+                                }, disabled: !localeInstances || localeInstances.length === 0, children: [_jsx("option", { value: "", disabled: true, children: !localeInstances || localeInstances.length === 0
+                                            ? "No instances available"
+                                            : "No selected instance" }), localeInstances
+                                        ?.filter(instance => !locales.includes(instance.id))
+                                        .map(instance => (_jsx("option", { value: instance.id, children: instance.displayName }, instance.id)))] }), _jsxs("button", { onClick: () => {
+                                    setLocales(locales => [...locales, newLocale]);
+                                    setNewLocale("");
+                                }, disabled: newLocale === "", children: ["Add", " ", newLocale === ""
+                                        ? "new locale"
+                                        : (localeInstances?.find(instance => instance.id === newLocale)?.displayName ??
+                                            newLocale)] })] }), _jsx("h3", { children: "Enum Display Mode" }), _jsx("p", { class: "description", children: "Choose how enumeration types are displayed." }), _jsxs("div", { className: "field--option", children: [_jsx("input", { type: "radio", name: "enum-display", id: "enum-display-select", value: "select", checked: enumDisplay === "select", onChange: () => {
+                                    setEnumDisplay("select");
+                                } }), _jsx("label", { htmlFor: "enum-display-select", children: "Compact (Dropdowns)" })] }), _jsxs("div", { className: "field--option", children: [_jsx("input", { type: "radio", name: "enum-display", id: "enum-display-radio", value: "radio", checked: enumDisplay === "radio", onChange: () => {
+                                    setEnumDisplay("radio");
+                                } }), _jsx("label", { htmlFor: "enum-display-radio", children: "Expanded (all nested form fields in radio lists)" })] })] })] }));
+};

package/dist/src/web/components/typeInputs/ArrayTypeInput.d.ts

@@ -1,14 +1,6 @@
 import type { FunctionComponent } from "preact";
-import type { SerializedArrayType } from "../../../node/schema/types/generic/ArrayType.ts";
-import type { InstanceNamesByEntity } from "../../hooks/useInstanceNamesByEntity.ts";
-import type { GetDeclFromDeclName } from "../../hooks/useSecondaryDeclarations.ts";
-type Props = {
-    type: SerializedArrayType;
-    path: string | undefined;
-    value: unknown;
-    instanceNamesByEntity: InstanceNamesByEntity;
-    getDeclFromDeclName: GetDeclFromDeclName;
-    onChange: (value: unknown[]) => void;
-};
+import type { SerializedArrayType } from "../../../shared/schema/types/ArrayType.ts";
+import { type TypeInputProps } from "./TypeInput.tsx";
+type Props = TypeInputProps<SerializedArrayType, unknown[]>;
 export declare const ArrayTypeInput: FunctionComponent<Props>;
 export {};

package/dist/src/web/components/typeInputs/ArrayTypeInput.js

@@ -5,17 +5,18 @@ import { createTypeSkeleton } from "../../utils/typeSkeleton.js";
 import { TypeInput } from "./TypeInput.js";
 import { MismatchingTypeError } from "./utils/MismatchingTypeError.js";
 import { ValidationErrors } from "./utils/ValidationErrors.js";
-export const ArrayTypeInput = ({ type, path, value, instanceNamesByEntity, getDeclFromDeclName, onChange, }) => {
+export const ArrayTypeInput = props => {
+    const { type, path, value, disabled, getDeclFromDeclName, onChange } = props;
     if (!Array.isArray(value)) {
         return _jsx(MismatchingTypeError, { expected: "array", actual: value });
     }
     const errors = validateArrayConstraints(type, value);
     const isTuple = typeof type.minItems === "number" && type.minItems === type.maxItems;
-    return (_jsxs("div", { class: "field field--container field--array", children: [value.length > 0 && (_jsx("ol", { children: value.map((item, i) => (_jsxs("li", { class: "container-item array-item", children: [isTuple ? null : (_jsxs("div", { className: "container-item-header", children: [_jsxs("div", { className: "container-item-title", children: [i + 1, "."] }), _jsxs("button", { class: "destructive", onClick: () => {
+    return (_jsxs("div", { class: "field field--container field--array" + (disabled ? " field--disabled" : ""), children: [value.length > 0 && (_jsx("ol", { children: value.map((item, i) => (_jsxs("li", { class: "container-item array-item", children: [isTuple ? null : (_jsxs("div", { className: "container-item-header", children: [_jsxs("div", { className: "container-item-title", children: [i + 1, "."] }), _jsxs("button", { class: "destructive", onClick: () => {
                                         onChange(removeAt(value, i));
-                                    }, disabled: type.minItems !== undefined && value.length <= type.minItems, children: ["Delete Item #", i + 1] })] })), _jsx(TypeInput, { type: type.items, path: path === undefined ? `[${i.toString()}]` : `${path}[${i.toString()}]`, value: item, instanceNamesByEntity: instanceNamesByEntity, getDeclFromDeclName: getDeclFromDeclName, onChange: newItem => {
+                                    }, disabled: disabled || (type.minItems !== undefined && value.length <= type.minItems), children: ["Delete Item #", i + 1] })] })), _jsx(TypeInput, { ...props, parentKey: undefined, type: type.items, path: path === undefined ? `[${i.toString()}]` : `${path}[${i.toString()}]`, value: item, onChange: newItem => {
                                 onChange(value.with(i, newItem));
                             } })] }, i))) })), isTuple ? null : (_jsx("div", { class: "add-item-container", children: _jsxs("button", { onClick: () => {
                         onChange([...value, createTypeSkeleton(getDeclFromDeclName, type.items)]);
-                    }, disabled: type.maxItems !== undefined && value.length >= type.maxItems, children: ["Add Item #", value.length + 1] }) })), _jsx(ValidationErrors, { errors: errors })] }));
+                    }, disabled: disabled || (type.maxItems !== undefined && value.length >= type.maxItems), children: ["Add Item #", value.length + 1] }) })), _jsx(ValidationErrors, { disabled: disabled, errors: errors })] }));
 };

package/dist/src/web/components/typeInputs/BooleanTypeInput.d.ts

@@ -1,9 +1,6 @@
 import type { FunctionComponent } from "preact";
-import type { SerializedBooleanType } from "../../../node/schema/types/primitives/BooleanType.ts";
-type Props = {
-    type: SerializedBooleanType;
-    value: unknown;
-    onChange: (value: boolean) => void;
-};
+import type { SerializedBooleanType } from "../../../shared/schema/types/BooleanType.ts";
+import type { TypeInputProps } from "./TypeInput.tsx";
+type Props = TypeInputProps<SerializedBooleanType, boolean>;
 export declare const BooleanTypeInput: FunctionComponent<Props>;
 export {};

package/dist/src/web/components/typeInputs/BooleanTypeInput.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx } from "preact/jsx-runtime";
 import { MismatchingTypeError } from "./utils/MismatchingTypeError.js";
-export const BooleanTypeInput = ({ value, onChange }) => {
+export const BooleanTypeInput = ({ value, disabled, onChange }) => {
     if (typeof value !== "boolean") {
         return _jsx(MismatchingTypeError, { expected: "boolean", actual: value });
     }
     return (_jsx("div", { class: "field", children: _jsx("input", { type: "checkbox", checked: value, onInput: event => {
                 onChange(event.currentTarget.checked);
-            } }) }));
+            }, disabled: disabled }) }));
 };

package/dist/src/web/components/typeInputs/ChildEntitiesTypeInput.d.ts

@@ -0,0 +1,6 @@
+import type { FunctionComponent } from "preact";
+import type { SerializedChildEntitiesType } from "../../../shared/schema/types/ChildEntitiesType.ts";
+import { type TypeInputProps } from "./TypeInput.tsx";
+type Props = TypeInputProps<SerializedChildEntitiesType>;
+export declare const ChildEntitiesTypeInput: FunctionComponent<Props>;
+export {};

package/dist/src/web/components/typeInputs/ChildEntitiesTypeInput.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+import { isSerializedEntityDecl } from "../../../shared/schema/declarations/EntityDecl.js";
+import { createTypeSkeleton } from "../../utils/typeSkeleton.js";
+import { TypeInput } from "./TypeInput.js";
+export const ChildEntitiesTypeInput = props => {
+    const { type, path, childInstances, disabled, getDeclFromDeclName, onChildAdd, onChildChange, onChildRemove, } = props;
+    const childEntity = getDeclFromDeclName(type.entity);
+    const childInstancesForEntity = childInstances
+        .map((childInstance, index) => [
+        childInstance,
+        index,
+    ])
+        .filter(([childInstance]) => childInstance.entityName === type.entity);
+    if (childEntity === undefined || !isSerializedEntityDecl(childEntity)) {
+        return (_jsxs("div", { role: "alert", children: ["Unresolved entity declaration identifier ", _jsx("code", { children: type.entity })] }));
+    }
+    if (path === undefined) {
+        return _jsx("div", { role: "alert", children: "A child entities type cannot be the root type of a document." });
+    }
+    return (_jsxs("div", { class: "field field--container field--array", children: [childInstancesForEntity.length > 0 ? (_jsx("ol", { children: childInstancesForEntity.map(([item, originalIndex], i) => (_jsxs("li", { class: "container-item array-item", children: [_jsxs("div", { className: "container-item-header", children: [_jsxs("div", { className: "container-item-title", children: [i + 1, "."] }), _jsx("button", { class: "destructive", onClick: () => {
+                                        onChildRemove(i);
+                                    }, disabled: disabled, children: "Delete Item" })] }), _jsx(TypeInput, { ...props, type: childEntity.type, value: item.content, parentKey: childEntity.parentReferenceKey, onChange: newItem => {
+                                onChildChange(originalIndex, newItem);
+                            } })] }, i))) })) : (_jsx("p", { class: "empty", children: "No child entities" })), _jsx("div", { class: "add-item-container", children: _jsx("button", { onClick: () => {
+                        onChildAdd(type.entity, createTypeSkeleton(getDeclFromDeclName, childEntity.type));
+                    }, disabled: disabled, children: "Add Item" }) })] }));
+};

package/dist/src/web/components/typeInputs/DateTypeInput.d.ts

@@ -1,9 +1,6 @@
 import type { FunctionComponent } from "preact";
-import type { SerializedDateType } from "../../../node/schema/types/primitives/DateType.ts";
-type Props = {
-    type: SerializedDateType;
-    value: unknown;
-    onChange: (value: string) => void;
-};
+import type { SerializedDateType } from "../../../shared/schema/types/DateType.ts";
+import type { TypeInputProps } from "./TypeInput.tsx";
+type Props = TypeInputProps<SerializedDateType, string>;
 export declare const DateTypeInput: FunctionComponent<Props>;
 export {};

package/dist/src/web/components/typeInputs/DateTypeInput.js

@@ -2,12 +2,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
 import { validateDateConstraints } from "../../../shared/validation/date.js";
 import { MismatchingTypeError } from "./utils/MismatchingTypeError.js";
 import { ValidationErrors } from "./utils/ValidationErrors.js";
-export const DateTypeInput = ({ type, value, onChange }) => {
+export const DateTypeInput = ({ type, value, disabled, onChange }) => {
     if (typeof value !== "string") {
         return _jsx(MismatchingTypeError, { expected: "date string", actual: value });
     }
     const errors = validateDateConstraints(type, value);
     return (_jsxs("div", { class: "field", children: [_jsx("input", { type: "date", value: value, onInput: event => {
                     onChange(event.currentTarget.value);
-                } }), _jsx(ValidationErrors, { errors: errors })] }));
+                }, disabled: disabled }), _jsx(ValidationErrors, { disabled: disabled, errors: errors })] }));
 };

package/dist/src/web/components/typeInputs/EnumTypeInput.d.ts

@@ -1,14 +1,6 @@
 import type { FunctionComponent } from "preact";
-import type { SerializedEnumType } from "../../../node/schema/types/generic/EnumType.ts";
-import type { InstanceNamesByEntity } from "../../hooks/useInstanceNamesByEntity.ts";
-import type { GetDeclFromDeclName } from "../../hooks/useSecondaryDeclarations.ts";
-type Props = {
-    type: SerializedEnumType;
-    path: string | undefined;
-    value: unknown;
-    instanceNamesByEntity: InstanceNamesByEntity;
-    getDeclFromDeclName: GetDeclFromDeclName;
-    onChange: (value: unknown) => void;
-};
+import type { SerializedEnumType } from "../../../shared/schema/types/EnumType.ts";
+import { type TypeInputProps } from "./TypeInput.tsx";
+type Props = TypeInputProps<SerializedEnumType>;
 export declare const EnumTypeInput: FunctionComponent<Props>;
 export {};