tsondb 0.5.18 → 0.6.0

package/dist/src/web/api/declarations.d.ts

@@ -0,0 +1,26 @@
+import type { CreatedEntityTaggedInstanceContainerWithChildInstances, UpdatedEntityTaggedInstanceContainerWithChildInstances } from "../../node/utils/childInstances.ts";
+import type { CreateInstanceOfEntityResponseBody, DeleteInstanceOfEntityResponseBody, GetAllChildInstancesOfInstanceResponseBody, GetAllDeclarationsResponseBody, GetAllInstancesOfEntityResponseBody, GetDeclarationResponseBody, GetInstanceOfEntityResponseBody, UpdateInstanceOfEntityResponseBody } from "../../shared/api.ts";
+import type { SerializedDecl } from "../../shared/schema/declarations/Declaration.ts";
+import type { SerializedEntityDecl } from "../../shared/schema/declarations/EntityDecl.ts";
+import type { SerializedEnumDecl } from "../../shared/schema/declarations/EnumDecl.ts";
+import type { SerializedTypeAliasDecl } from "../../shared/schema/declarations/TypeAliasDecl.ts";
+type DeclKind = "Entity" | "Enum" | "TypeAlias";
+type DeclTypeForKind<K extends DeclKind | undefined> = K extends "Entity" ? SerializedEntityDecl : K extends "Enum" ? SerializedEnumDecl : K extends "TypeAlias" ? SerializedTypeAliasDecl : SerializedDecl;
+export declare const getAllDeclarations: {
+    (locales: string[], kind?: undefined): Promise<GetAllDeclarationsResponseBody>;
+    <D extends "Entity" | "Enum" | "TypeAlias">(locales: string[], kind: D): Promise<GetAllDeclarationsResponseBody<DeclTypeForKind<D>>>;
+};
+export declare const getAllEntities: (locales: string[]) => Promise<GetAllDeclarationsResponseBody<SerializedEntityDecl<string, {
+    [x: string]: import("../../shared/schema/types/ObjectType.ts").SerializedMemberDecl<import("../../shared/schema/types/Type.ts").SerializedType, boolean>;
+}, string | undefined>>>;
+export declare const getEntityByName: (locales: string[], name: string) => Promise<GetDeclarationResponseBody<SerializedEntityDecl<string, {
+    [x: string]: import("../../shared/schema/types/ObjectType.ts").SerializedMemberDecl<import("../../shared/schema/types/Type.ts").SerializedType, boolean>;
+}, string | undefined>>>;
+export declare const getInstancesByEntityName: (locales: string[], name: string) => Promise<GetAllInstancesOfEntityResponseBody>;
+export declare const getLocaleInstances: (locales: string[], localeEntityName: string | undefined) => Promise<GetAllInstancesOfEntityResponseBody>;
+export declare const createInstanceByEntityNameAndId: (locales: string[], name: string, content: CreatedEntityTaggedInstanceContainerWithChildInstances, id?: string) => Promise<CreateInstanceOfEntityResponseBody>;
+export declare const getInstanceByEntityNameAndId: (locales: string[], name: string, id: string) => Promise<GetInstanceOfEntityResponseBody>;
+export declare const updateInstanceByEntityNameAndId: (locales: string[], name: string, id: string, content: UpdatedEntityTaggedInstanceContainerWithChildInstances) => Promise<UpdateInstanceOfEntityResponseBody>;
+export declare const deleteInstanceByEntityNameAndId: (locales: string[], name: string, id: string) => Promise<DeleteInstanceOfEntityResponseBody>;
+export declare const getChildInstancesForInstanceByEntityName: (locales: string[], name: string, parentId: string) => Promise<GetAllChildInstancesOfInstanceResponseBody>;
+export {};

package/dist/src/web/api/declarations.js

@@ -0,0 +1,51 @@
+import { deleteResource, getResource, postResource, putResource } from "../utils/api.js";
+export const getAllDeclarations = async (locales, kind) => getResource("/api/declarations", {
+    locales,
+    modifyUrl: url => {
+        if (kind) {
+            url.searchParams.append("kind", kind);
+        }
+    },
+});
+export const getAllEntities = (locales) => getAllDeclarations(locales, "Entity");
+export const getEntityByName = async (locales, name) => getResource(`/api/declarations/${name}`, {
+    locales,
+});
+export const getInstancesByEntityName = async (locales, name) => getResource(`/api/declarations/${name}/instances`, {
+    locales,
+});
+export const getLocaleInstances = (locales, localeEntityName) => localeEntityName
+    ? getInstancesByEntityName(locales, localeEntityName)
+    : Promise.resolve({ instances: [], isLocaleEntity: true });
+export const createInstanceByEntityNameAndId = async (locales, name, content, id) => {
+    const body = {
+        instance: content,
+    };
+    return postResource(`/api/declarations/${name}/instances`, {
+        locales,
+        body,
+        modifyUrl: url => {
+            if (id) {
+                url.searchParams.append("id", id);
+            }
+        },
+    });
+};
+export const getInstanceByEntityNameAndId = async (locales, name, id) => getResource(`/api/declarations/${name}/instances/${id}`, {
+    locales,
+});
+export const updateInstanceByEntityNameAndId = async (locales, name, id, content) => {
+    const body = {
+        instance: content,
+    };
+    return putResource(`/api/declarations/${name}/instances/${id}`, {
+        locales,
+        body,
+    });
+};
+export const deleteInstanceByEntityNameAndId = async (locales, name, id) => deleteResource(`/api/declarations/${name}/instances/${id}`, {
+    locales,
+});
+export const getChildInstancesForInstanceByEntityName = async (locales, name, parentId) => getResource(`/api/declarations/${name}/instances/${parentId}/children`, {
+    locales,
+});

package/dist/src/web/api/git.d.ts

@@ -0,0 +1,14 @@
+import type { GetAllGitBranchesResponseBody, GitStatusResponseBody } from "../../shared/api.ts";
+export declare const getStatus: (locales: string[]) => Promise<GitStatusResponseBody>;
+export declare const stageAllFiles: (locales: string[]) => Promise<void>;
+export declare const stageAllFilesOfEntity: (locales: string[], entityName: string) => Promise<void>;
+export declare const stageFileOfEntity: (locales: string[], entityName: string, id: string) => Promise<void>;
+export declare const unstageAllFiles: (locales: string[]) => Promise<void>;
+export declare const unstageAllFilesOfEntity: (locales: string[], entityName: string) => Promise<void>;
+export declare const unstageFileOfEntity: (locales: string[], entityName: string, id: string) => Promise<void>;
+export declare const commitStagedFiles: (locales: string[], message: string) => Promise<void>;
+export declare const pushCommits: (locales: string[]) => Promise<void>;
+export declare const pullCommits: (locales: string[]) => Promise<void>;
+export declare const getBranches: (locales: string[]) => Promise<GetAllGitBranchesResponseBody>;
+export declare const createBranch: (locales: string[], branchName: string) => Promise<void>;
+export declare const switchBranch: (locales: string[], branchName: string) => Promise<void>;

package/dist/src/web/api/git.js

@@ -0,0 +1,20 @@
+import { getResource, postResource } from "../utils/api.js";
+export const getStatus = async (locales) => getResource("/api/git/status", { locales });
+export const stageAllFiles = async (locales) => postResource("/api/git/stage", { locales });
+export const stageAllFilesOfEntity = async (locales, entityName) => postResource(`/api/git/stage/${entityName}`, { locales });
+export const stageFileOfEntity = async (locales, entityName, id) => postResource(`/api/git/stage/${entityName}/${id}`, { locales });
+export const unstageAllFiles = async (locales) => postResource(`/api/git/unstage`, { locales });
+export const unstageAllFilesOfEntity = async (locales, entityName) => postResource(`/api/git/unstage/${entityName}`, { locales });
+export const unstageFileOfEntity = async (locales, entityName, id) => postResource(`/api/git/unstage/${entityName}/${id}`, { locales });
+export const commitStagedFiles = async (locales, message) => {
+    const body = { message };
+    return postResource(`/api/git/commit`, { locales, body });
+};
+export const pushCommits = async (locales) => postResource(`/api/git/push`, { locales });
+export const pullCommits = async (locales) => postResource(`/api/git/pull`, { locales });
+export const getBranches = async (locales) => getResource(`/api/git/branch`, { locales });
+export const createBranch = async (locales, branchName) => {
+    const body = { branchName };
+    return postResource(`/api/git/branch`, { locales, body });
+};
+export const switchBranch = async (locales, branchName) => postResource(`/api/git/branch/${branchName}`, { locales });

package/dist/src/web/api/index.d.ts

@@ -0,0 +1 @@
+export declare const getWebConfig: () => Promise<import("../context/config.ts").WebConfig>;

package/dist/src/web/api/index.js

@@ -0,0 +1,2 @@
+import { getResource } from "../utils/api.js";
+export const getWebConfig = () => getResource("/api/config", { locales: [] });

package/dist/src/web/api/instances.d.ts

@@ -0,0 +1,2 @@
+import type { GetAllInstancesResponseBody } from "../../shared/api.ts";
+export declare const getAllInstances: (locales: string[]) => Promise<GetAllInstancesResponseBody>;

package/dist/src/web/api/instances.js

@@ -0,0 +1,2 @@
+import { getResource } from "../utils/api.js";
+export const getAllInstances = async (locales) => getResource("/api/instances", { locales });

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,3 @@
+import type { FunctionComponent } from "preact";
+import type { DialogHTMLAttributes } from "preact/compat";
+export declare const ModalDialog: FunctionComponent<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/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" }) })] }));
+};