tsondb 0.5.19 → 0.6.1

package/dist/src/web/hooks/useMappedAPIResource.js

@@ -9,11 +9,9 @@ export const useMappedAPIResource = (apiFn, mapFn, ...args) => {
     useEffect(() => {
         fetchData().catch((err) => {
             console.log(err);
+            alert(err);
         });
     }, [fetchData]);
-    const reload = useCallback(() => {
-        setData(undefined);
-        return fetchData();
-    }, [fetchData]);
+    const reload = useCallback(fetchData, [fetchData]);
     return [data, reload];
 };

package/dist/src/web/hooks/useSecondaryDeclarations.d.ts

@@ -1,3 +1,3 @@
-import type { SerializedSecondaryDecl } from "../../node/schema/declarations/Declaration.ts";
+import type { SerializedSecondaryDecl } from "../../shared/schema/declarations/Declaration.ts";
 export type GetDeclFromDeclName = (name: string) => SerializedSecondaryDecl | undefined;
 export declare const useGetDeclFromDeclName: () => [GetDeclFromDeclName, loaded: boolean];

package/dist/src/web/hooks/useSecondaryDeclarations.js

@@ -1,20 +1,24 @@
 import { useCallback, useEffect, useState } from "preact/hooks";
-import { getAllDeclarations } from "../api.js";
+import { getAllDeclarations } from "../api/declarations.js";
+import { useSetting } from "./useSettings.js";
 export const useGetDeclFromDeclName = () => {
+    const [locales] = useSetting("displayedLocales");
     const [secondaryDeclarations, setSecondaryDeclarations] = useState();
     useEffect(() => {
-        getAllDeclarations()
+        getAllDeclarations(locales)
             .then(data => {
             setSecondaryDeclarations(data.declarations
                 .map(decl => decl.declaration)
-                .filter((decl) => decl.kind === "EnumDecl" || decl.kind === "TypeAliasDecl"));
+                .filter((decl) => decl.kind === "EnumDecl" ||
+                decl.kind === "TypeAliasDecl" ||
+                decl.parentReferenceKey !== undefined));
         })
             .catch((error) => {
             if (error instanceof Error) {
                 console.error("Error fetching data:", error.toString());
             }
         });
-    }, []);
+    }, [locales]);
     const getDeclFromDeclName = useCallback((name) => secondaryDeclarations?.find(decl => decl.name === name), [secondaryDeclarations]);
     return [getDeclFromDeclName, secondaryDeclarations !== undefined];
 };

package/dist/src/web/hooks/useSettings.d.ts

@@ -0,0 +1,10 @@
+import type { SetStateAction } from "preact/compat";
+import { type Dispatch } from "preact/hooks";
+import type { WebConfig } from "../context/config.ts";
+import { SettingsContext } from "../context/settings.ts";
+export type UserSettings = {
+    displayedLocales: string[];
+    enumDisplay: "select" | "radio";
+};
+export declare const useSettings: (config: WebConfig) => SettingsContext;
+export declare const useSetting: <K extends keyof UserSettings>(key: K) => [UserSettings[K], Dispatch<SetStateAction<UserSettings[K]>>];

package/dist/src/web/hooks/useSettings.js

@@ -0,0 +1,51 @@
+import { useCallback, useContext, useState } from "preact/hooks";
+import { defaultSettings, SettingsContext } from "../context/settings.js";
+const settingsGuards = {
+    displayedLocales: (v) => Array.isArray(v) && v.every(e => typeof e === "string") && v.length > 0,
+    enumDisplay: (v) => typeof v === "string" && ["select", "radio"].includes(v),
+};
+const defaultSettingsFromConfig = (config) => ({
+    ...defaultSettings,
+    displayedLocales: config.defaultLocales.length > 0 ? config.defaultLocales : defaultSettings.displayedLocales,
+});
+export const useSettings = (config) => {
+    console.log("useSettings");
+    const [settings, setSettings] = useState(() => Object.fromEntries(Object.entries(defaultSettingsFromConfig(config)).map(([key, initialValue]) => {
+        const item = localStorage.getItem(key);
+        if (item) {
+            try {
+                const parsed = JSON.parse(item);
+                return [
+                    key,
+                    settingsGuards[key](parsed) ? parsed : initialValue,
+                ];
+            }
+            catch {
+                return [key, initialValue];
+            }
+        }
+        return [key, initialValue];
+    })));
+    return {
+        settings,
+        setSetting: useCallback((key, value) => {
+            setSettings(prev => {
+                const newSettings = {
+                    ...prev,
+                    [key]: typeof value === "function" ? value(prev[key]) : value,
+                };
+                localStorage.setItem(key, JSON.stringify(newSettings[key]));
+                return newSettings;
+            });
+        }, []),
+    };
+};
+export const useSetting = (key) => {
+    const { settings, setSetting } = useContext(SettingsContext);
+    return [
+        settings[key],
+        useCallback((value) => {
+            setSetting(key, value);
+        }, [key, setSetting]),
+    ];
+};

package/dist/src/web/index.js

@@ -2,10 +2,14 @@ import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
 import { render } from "preact";
 import { LocationProvider, Route, Router, useLocation } from "preact-iso";
 import { useEffect } from "preact/hooks";
-import { getAllEntities } from "./api.js";
+import { getAllEntities } from "./api/declarations.js";
+import { getWebConfig } from "./api/index.js";
 import { Git } from "./components/Git.js";
+import { ConfigContext } from "./context/config.js";
 import { EntitiesContext } from "./context/entities.js";
+import { SettingsContext } from "./context/settings.js";
 import { useMappedAPIResource } from "./hooks/useMappedAPIResource.js";
+import { useSettings } from "./hooks/useSettings.js";
 import { CreateInstance } from "./routes/CreateInstance.js";
 import { Entity } from "./routes/Entity.js";
 import { Home } from "./routes/Home.js";
@@ -14,15 +18,17 @@ import { NotFound } from "./routes/NotFound.js";
 const mapEntities = (data) => data.declarations
     .map(decl => ({ ...decl, isLocaleEntity: decl.declaration.name === data.localeEntity }))
     .sort((a, b) => a.declaration.name.localeCompare(b.declaration.name));
-const App = () => {
-    const [entities, reloadEntities] = useMappedAPIResource(getAllEntities, mapEntities);
+const App = ({ config }) => {
+    const settingsContext = useSettings(config);
+    const [entities, reloadEntities] = useMappedAPIResource(getAllEntities, mapEntities, settingsContext.settings.displayedLocales);
     const location = useLocation();
     useEffect(() => {
         reloadEntities().catch((error) => {
             alert("Error reloading entities: " + String(error));
         });
     }, [location.path, reloadEntities]);
-    return (_jsx(LocationProvider, { children: _jsxs(EntitiesContext.Provider, { value: entities ?? [], children: [_jsxs(Router, { children: [_jsx(Route, { path: "/", component: Home }), _jsx(Route, { path: "/entities/:name", component: Entity }), _jsx(Route, { path: "/entities/:name/instances/create", component: CreateInstance }), _jsx(Route, { path: "/entities/:name/instances/:id", component: Instance }), _jsx(Route, { default: true, component: NotFound })] }), _jsx(Git, {})] }) }));
+    return (_jsx(ConfigContext.Provider, { value: config, children: _jsx(SettingsContext.Provider, { value: settingsContext, children: _jsx(LocationProvider, { children: _jsxs(EntitiesContext.Provider, { value: { entities: entities ?? [], reloadEntities }, children: [_jsxs(Router, { children: [_jsx(Route, { path: "/", component: Home }), _jsx(Route, { path: "/entities/:name", component: Entity }), _jsx(Route, { path: "/entities/:name/instances/create", component: CreateInstance }), _jsx(Route, { path: "/entities/:name/instances/:id", component: Instance }), _jsx(Route, { default: true, component: NotFound })] }), _jsx(Git, {})] }) }) }) }));
 };
+const config = await getWebConfig();
 const root = document.getElementById("app");
-render(_jsx(App, {}), root);
+render(_jsx(App, { config: config }), root);

package/dist/src/web/routes/CreateInstance.js

@@ -1,85 +1,46 @@
-import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
-import { useLocation, useRoute } from "preact-iso";
-import { useEffect, useState } from "preact/hooks";
-import { getSerializedDisplayNameFromEntityInstance } from "../../shared/utils/displayName.js";
+import { jsx as _jsx } from "preact/jsx-runtime";
 import { toTitleCase } from "../../shared/utils/string.js";
-import { validateLocaleIdentifier } from "../../shared/validation/identifier.js";
-import { createInstanceByEntityNameAndId } from "../api.js";
-import { Layout } from "../components/Layout.js";
-import { TypeInput } from "../components/typeInputs/TypeInput.js";
-import { ValidationErrors } from "../components/typeInputs/utils/ValidationErrors.js";
-import { useEntityFromRoute } from "../hooks/useEntityFromRoute.js";
-import { useInstanceNamesByEntity } from "../hooks/useInstanceNamesByEntity.js";
-import { useGetDeclFromDeclName } from "../hooks/useSecondaryDeclarations.js";
+import { createInstanceByEntityNameAndId } from "../api/declarations.js";
+import { InstanceRouteSkeleton, } from "../components/InstanceRouteSkeleton.js";
 import { createTypeSkeleton } from "../utils/typeSkeleton.js";
-import { homeTitle } from "./Home.js";
-import { NotFound } from "./NotFound.js";
-export const CreateInstance = () => {
-    const { params: { name }, } = useRoute();
-    const [getDeclFromDeclName, declsLoaded] = useGetDeclFromDeclName();
-    const entityFromRoute = useEntityFromRoute();
-    const [instanceNamesByEntity] = useInstanceNamesByEntity();
-    const [instance, setInstance] = useState();
-    const [customId, setCustomId] = useState("");
-    useEffect(() => {
-        if (entityFromRoute) {
-            setInstance(createTypeSkeleton(getDeclFromDeclName, entityFromRoute.declaration.type));
+const init = ({ entity, setInstanceContent, getDeclFromDeclName, }) => {
+    setInstanceContent(createTypeSkeleton(getDeclFromDeclName, entity.type));
+    return Promise.resolve();
+};
+const titleBuilder = ({ entity }) => {
+    const entityName = entity.name;
+    return "New " + toTitleCase(entityName) + " — TSONDB";
+};
+const onSubmit = async ({ locales, entity, buttonName, instanceContent, isLocaleEntity, customId, childInstances, setInstanceContent, setCustomId, route, getDeclFromDeclName, }) => {
+    try {
+        const createdInstance = await createInstanceByEntityNameAndId(locales, entity.name, {
+            childInstances,
+            entityName: entity.name,
+            content: instanceContent,
+            id: undefined,
+        }, isLocaleEntity ? customId : undefined);
+        switch (buttonName) {
+            case "saveandcontinue": {
+                route(`/entities/${entity.name}/instances/${createdInstance.instance.id}`);
+                break;
+            }
+            case "saveandaddanother": {
+                setInstanceContent(createTypeSkeleton(getDeclFromDeclName, entity.type));
+                setCustomId("");
+                alert(`Instance of entity ${entity.name} created successfully with identifier ${createdInstance.instance.id}. You can add another instance now.`);
+                break;
+            }
+            case "save":
+            default: {
+                route(`/entities/${entity.name}?created=${encodeURIComponent(createdInstance.instance.id)}`);
+                break;
+            }
         }
-    }, [getDeclFromDeclName, entityFromRoute]);
-    const { route } = useLocation();
-    useEffect(() => {
-        const entityName = entityFromRoute?.declaration.name ?? name;
-        document.title =
-            entityName === undefined ? "Not found" : "New " + toTitleCase(entityName) + " — TSONDB";
-    }, [entityFromRoute?.declaration.name, name]);
-    if (!name) {
-        return _jsx(NotFound, {});
     }
-    if (!entityFromRoute || !instanceNamesByEntity || !declsLoaded) {
-        return (_jsxs("div", { children: [_jsx("h1", { children: name }), _jsx("p", { className: "loading", children: "Loading \u2026" })] }));
-    }
-    const { declaration: entity, isLocaleEntity } = entityFromRoute;
-    const handleSubmit = (event) => {
-        event.preventDefault();
-        const name = event.submitter?.getAttribute("name");
-        if (name) {
-            createInstanceByEntityNameAndId(entity.name, instance, isLocaleEntity ? customId : undefined)
-                .then(createdInstance => {
-                switch (name) {
-                    case "saveandcontinue": {
-                        route(`/entities/${entity.name}/instances/${createdInstance.instance.id}`);
-                        break;
-                    }
-                    case "saveandaddanother": {
-                        setInstance(createTypeSkeleton(getDeclFromDeclName, entity.type));
-                        setCustomId("");
-                        alert(`Instance of entity ${entity.name} created successfully with identifier ${createdInstance.instance.id}. You can add another instance now.`);
-                        break;
-                    }
-                    case "save":
-                    default: {
-                        route(`/entities/${entity.name}?created=${encodeURIComponent(createdInstance.instance.id)}`);
-                        break;
-                    }
-                }
-            })
-                .catch((error) => {
-                if (error instanceof Error) {
-                    alert(`Error creating instance:\n\n${error.toString()}`);
-                }
-            });
+    catch (error) {
+        if (error instanceof Error) {
+            alert(`Error creating instance:\n\n${error.toString()}`);
         }
-    };
-    const defaultName = customId || `New ${toTitleCase(entity.name)}`;
-    const instanceName = getSerializedDisplayNameFromEntityInstance(entity, instance, defaultName);
-    const idErrors = isLocaleEntity ? validateLocaleIdentifier(customId) : [];
-    return (_jsxs(Layout, { breadcrumbs: [
-            { url: "/", label: homeTitle },
-            { url: `/entities/${entity.name}`, label: toTitleCase(entity.namePlural) },
-        ], children: [_jsx("div", { class: "header-with-btns", children: _jsx("h1", { class: instanceName.length === 0 ? "empty-name" : undefined, children: instanceName || defaultName }) }), 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, path: undefined, value: instance, instanceNamesByEntity: instanceNamesByEntity, getDeclFromDeclName: getDeclFromDeclName, onChange: value => {
-                            console.log("onChange", value);
-                            setInstance(value);
-                        } }), _jsxs("div", { class: "form-footer btns", children: [_jsx("button", { type: "submit", class: "primary", name: "save", children: "Save" }), _jsx("button", { type: "submit", class: "primary", name: "saveandcontinue", children: "Save and Continue" }), _jsx("button", { type: "submit", class: "primary", name: "saveandaddanother", children: "Save and Add Another" })] })] })] }));
+    }
 };
+export const CreateInstance = () => (_jsx(InstanceRouteSkeleton, { mode: "create", init: init, titleBuilder: titleBuilder, onSubmit: onSubmit }));

package/dist/src/web/routes/Entity.js

@@ -1,22 +1,30 @@
 import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
 import { useRoute } from "preact-iso";
-import { useEffect, useState } from "preact/hooks";
+import { useContext, useEffect, useState } from "preact/hooks";
 import { getGitStatusForDisplay, getLabelForGitStatus } from "../../shared/utils/git.js";
 import { toTitleCase } from "../../shared/utils/string.js";
-import { deleteInstanceByEntityNameAndId, getInstancesByEntityName } from "../api.js";
+import { deleteInstanceByEntityNameAndId, getInstancesByEntityName, getLocaleInstances, } from "../api/declarations.js";
 import { Layout } from "../components/Layout.js";
+import { ConfigContext } from "../context/config.js";
+import { EntitiesContext } from "../context/entities.js";
 import { useEntityFromRoute } from "../hooks/useEntityFromRoute.js";
 import { useMappedAPIResource } from "../hooks/useMappedAPIResource.js";
+import { useSetting } from "../hooks/useSettings.js";
 import { Markdown } from "../utils/Markdown.js";
 import { homeTitle } from "./Home.js";
 import { NotFound } from "./NotFound.js";
+const localeMapper = (result) => result.instances;
 const mapInstances = (data) => data.instances;
 export const Entity = () => {
     const { params: { name }, query: { created }, } = useRoute();
+    const [locales] = useSetting("displayedLocales");
     const [searchText, setSearchText] = useState("");
     const entityFromRoute = useEntityFromRoute();
-    const { declaration: entity } = entityFromRoute ?? {};
-    const [instances, reloadInstances] = useMappedAPIResource(getInstancesByEntityName, mapInstances, name ?? "");
+    const config = useContext(ConfigContext);
+    const { reloadEntities } = useContext(EntitiesContext);
+    const { declaration: entity, isLocaleEntity } = entityFromRoute ?? {};
+    const [instances, reloadInstances] = useMappedAPIResource(getInstancesByEntityName, mapInstances, locales, name ?? "");
+    const [localeInstances] = useMappedAPIResource(getLocaleInstances, localeMapper, locales, config.localeEntityName);
     useEffect(() => {
         document.title = toTitleCase(entity?.namePlural ?? name ?? "") + " — TSONDB";
     }, [entity?.namePlural, name]);
@@ -32,29 +40,44 @@ export const Entity = () => {
         return _jsx(NotFound, {});
     }
     if (!entity || !instances) {
-        return (_jsxs("div", { children: [_jsx("h1", { children: toTitleCase(entity?.namePlural ?? name) }), _jsx("p", { className: "loading", children: "Loading \u2026" })] }));
+        return (_jsxs(Layout, { breadcrumbs: [{ url: "/", label: homeTitle }], children: [_jsxs("div", { class: "header-with-btns", children: [_jsx("h1", { children: toTitleCase(entity?.namePlural ?? name) }), _jsx("a", { class: "btn btn--primary", "aria-disabled": true, children: "Add" })] }), _jsx("p", { class: "loading", children: "Loading \u2026" })] }));
     }
     const lowerSearchText = searchText.toLowerCase();
     const filteredInstances = searchText.length === 0
         ? instances
         : instances.filter(instance => instance.id.includes(searchText) ||
             instance.displayName.toLowerCase().includes(lowerSearchText));
+    const instancesByLocale = Object.groupBy(filteredInstances, instance => instance.displayNameLocaleId ?? "undefined");
+    const groupedInstances = [...locales, "undefined"]
+        .map(key => ({
+        id: key,
+        name: key === "undefined"
+            ? "No matching locale"
+            : (localeInstances?.find(instance => instance.id === key)?.displayName ?? key),
+        instances: instancesByLocale[key] ?? [],
+    }))
+        .filter(group => group.instances.length > 0);
+    const instanceMapper = (instance) => {
+        const gitStatusForDisplay = getGitStatusForDisplay(instance.gitStatus);
+        return (_jsxs("li", { id: `instance-${instance.id}`, class: `entries-item ${created === instance.id ? "entries-item--created" : ""} ${gitStatusForDisplay === undefined ? "" : `git-status--${gitStatusForDisplay}`}`, children: [_jsx("h2", { class: "entries-item__title", children: instance.displayName }), _jsx("p", { "aria-hidden": true, class: "entries-item__subtitle entries-item__subtitle--id", children: instance.id }), _jsxs("div", { class: "entries-item__side", children: [gitStatusForDisplay !== undefined && (_jsx("p", { class: `git-status git-status--${gitStatusForDisplay}`, title: getLabelForGitStatus(gitStatusForDisplay), children: gitStatusForDisplay })), _jsxs("div", { class: "btns", children: [_jsx("a", { href: `/entities/${entity.name}/instances/${instance.id}`, class: "btn", children: "Edit" }), _jsx("button", { class: "destructive", onClick: () => {
+                                        if (confirm("Are you sure you want to delete this instance?")) {
+                                            deleteInstanceByEntityNameAndId(locales, entity.name, instance.id)
+                                                .then(() => reloadInstances())
+                                                .then(() => reloadEntities())
+                                                .catch((error) => {
+                                                if (error instanceof Error) {
+                                                    alert("Error deleting instance:\n\n" + error.toString());
+                                                }
+                                            });
+                                        }
+                                    }, children: "Delete" })] })] })] }, instance.id));
+    };
     return (_jsxs(Layout, { breadcrumbs: [{ url: "/", label: homeTitle }], children: [_jsxs("div", { class: "header-with-btns", children: [_jsx("h1", { children: toTitleCase(entity.namePlural) }), _jsx("a", { class: "btn btn--primary", href: `/entities/${entity.name}/instances/create`, children: "Add" })] }), entity.comment && _jsx(Markdown, { class: "description", string: entity.comment }), _jsxs("div", { className: "list-header", children: [_jsxs("p", { class: "instance-count", children: [searchText === "" ? "" : `${filteredInstances.length.toString()} of `, instances.length, " instance", instances.length === 1 ? "" : "s"] }), _jsxs("form", { action: "", rel: "search", onSubmit: e => {
                             e.preventDefault();
                         }, children: [_jsx("label", { htmlFor: "instance-search", class: "visually-hidden", children: "Search" }), _jsx("input", { type: "text", id: "instance-search", value: searchText, onInput: event => {
                                     setSearchText(event.currentTarget.value);
-                                } })] })] }), _jsx("ul", { class: "entries entries--instances", children: filteredInstances.map(instance => {
-                    const gitStatusForDisplay = getGitStatusForDisplay(instance.gitStatus);
-                    return (_jsxs("li", { id: `instance-${instance.id}`, class: `entries-item ${created === instance.id ? "entries-item--created" : ""} ${gitStatusForDisplay === undefined ? "" : `git-status--${gitStatusForDisplay}`}`, children: [_jsx("h2", { class: "entries-item__title", children: instance.displayName }), _jsx("p", { "aria-hidden": true, class: "entries-item__subtitle entries-item__subtitle--id", children: instance.id }), _jsxs("div", { class: "entries-item__side", children: [gitStatusForDisplay !== undefined && (_jsx("p", { class: `git-status git-status--${gitStatusForDisplay}`, title: getLabelForGitStatus(gitStatusForDisplay), children: gitStatusForDisplay })), _jsxs("div", { class: "btns", children: [_jsx("a", { href: `/entities/${entity.name}/instances/${instance.id}`, class: "btn", children: "Edit" }), _jsx("button", { class: "destructive", onClick: () => {
-                                                    if (confirm("Are you sure you want to delete this instance?")) {
-                                                        deleteInstanceByEntityNameAndId(entity.name, instance.id)
-                                                            .then(() => reloadInstances())
-                                                            .catch((error) => {
-                                                            if (error instanceof Error) {
-                                                                alert("Error deleting instance:\n\n" + error.toString());
-                                                            }
-                                                        });
-                                                    }
-                                                }, children: "Delete" })] })] })] }, instance.id));
-                }) })] }));
+                                } })] })] }), isLocaleEntity ||
+                (groupedInstances.length === 1 &&
+                    groupedInstances[0]?.id !== "undefined" &&
+                    locales[0] === groupedInstances[0]?.id) ? (_jsx("ul", { class: "entries entries--instances", children: filteredInstances.map(instanceMapper) })) : (_jsx("ul", { class: "entry-groups", children: groupedInstances.map(group => (_jsxs("li", { class: "entry-groups-item", children: [_jsx("h2", { class: "entry-groups-item__title", children: group.name }), group.id === "undefined" ? (_jsxs("p", { children: [group.instances.length, " other instance", group.instances.length === 1 ? "" : "s"] })) : (_jsx("ul", { class: "entries entries--instances", children: group.instances.map(instanceMapper) }))] }, `group-${group.id}`))) }))] }));
 };

package/dist/src/web/routes/Home.js

@@ -2,23 +2,42 @@ import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
 import { useContext, useEffect, useState } from "preact/hooks";
 import { toTitleCase } from "../../shared/utils/string.js";
 import { Layout } from "../components/Layout.js";
+import { ConfigContext } from "../context/config.js";
 import { EntitiesContext } from "../context/entities.js";
 import { Markdown } from "../utils/Markdown.js";
 export const homeTitle = "Entities";
+const isEntityInAnyHomeLayoutSection = (entityName, homeLayoutSections) => homeLayoutSections.some(section => section.entities.includes(entityName));
 export const Home = () => {
-    const entities = useContext(EntitiesContext);
+    const { homeLayoutSections } = useContext(ConfigContext);
+    const { entities } = useContext(EntitiesContext);
     useEffect(() => {
         document.title = homeTitle + " — TSONDB";
     }, []);
     const [searchText, setSearchText] = useState("");
     const lowerSearchText = searchText.toLowerCase().replaceAll(" ", "");
     const filteredEntities = searchText.length === 0
-        ? entities
-        : entities.filter(entity => entity.declaration.name.toLowerCase().includes(lowerSearchText) ||
-            entity.declaration.namePlural.toLowerCase().includes(lowerSearchText));
+        ? entities.filter(entity => entity.declaration.parentReferenceKey === undefined)
+        : entities.filter(entity => entity.declaration.parentReferenceKey === undefined &&
+            (entity.declaration.name.toLowerCase().includes(lowerSearchText) ||
+                entity.declaration.namePlural.toLowerCase().includes(lowerSearchText)));
+    const filteredEntitiesBySection = homeLayoutSections
+        ? [
+            ...homeLayoutSections.map(section => ({
+                ...section,
+                entities: section.entities
+                    .map(entityName => filteredEntities.find(entity => entity.declaration.name === entityName))
+                    .filter(entity => entity !== undefined),
+            })),
+            {
+                title: "Other",
+                entities: filteredEntities.filter(entity => !isEntityInAnyHomeLayoutSection(entity.declaration.name, homeLayoutSections)),
+            },
+        ].filter(section => section.entities.length > 0)
+        : undefined;
+    const mapEntity = (entity) => (_jsxs("li", { class: "entries-item", children: [_jsxs("div", { class: "entries-item__title", children: [_jsx("h2", { children: toTitleCase(entity.declaration.namePlural) }), entity.declaration.comment && (_jsx(Markdown, { class: "description", string: entity.declaration.comment }))] }), _jsxs("p", { class: "entries-item__subtitle", children: [entity.instanceCount, " instance", entity.instanceCount === 1 ? "" : "s"] }), _jsx("div", { class: "entries-item__side", children: _jsx("div", { class: "btns", children: _jsx("a", { href: `/entities/${entity.declaration.name}`, class: "btn", children: "View" }) }) })] }, entity.declaration.name));
     return (_jsxs(Layout, { breadcrumbs: [], children: [_jsx("h1", { children: homeTitle }), _jsxs("div", { className: "list-header", children: [_jsxs("p", { class: "instance-count", children: [searchText === "" ? "" : `${filteredEntities.length.toString()} of `, entities.length, " entit", entities.length === 1 ? "y" : "ies"] }), _jsxs("form", { action: "", rel: "search", onSubmit: e => {
                             e.preventDefault();
                         }, children: [_jsx("label", { htmlFor: "entity-search", class: "visually-hidden", children: "Search" }), _jsx("input", { type: "text", id: "entity-search", value: searchText, onInput: event => {
                                     setSearchText(event.currentTarget.value);
-                                } })] })] }), _jsx("ul", { class: "entries entries--entities", children: filteredEntities.map(entity => (_jsxs("li", { class: "entries-item", children: [_jsxs("div", { class: "entries-item__title", children: [_jsx("h2", { children: toTitleCase(entity.declaration.namePlural) }), entity.declaration.comment && (_jsx(Markdown, { class: "description", string: entity.declaration.comment }))] }), _jsxs("p", { class: "entries-item__subtitle", children: [entity.instanceCount, " instance", entity.instanceCount === 1 ? "" : "s"] }), _jsx("div", { class: "entries-item__side", children: _jsx("div", { class: "btns", children: _jsx("a", { href: `/entities/${entity.declaration.name}`, class: "btn", children: "View" }) }) })] }, entity.declaration.name))) })] }));
+                                } })] })] }), filteredEntitiesBySection ? (_jsx("ul", { class: "entry-groups", children: filteredEntitiesBySection.map((section, si) => (_jsxs("li", { class: "entry-groups-item", children: [_jsx("h2", { class: "entry-groups-item__title", children: section.title }), section.comment && _jsx(Markdown, { class: "description", string: section.comment }), _jsx("ul", { class: "entries entries--entities", children: section.entities.map(mapEntity) })] }, si))) })) : (_jsx("ul", { class: "entries entries--entities", children: filteredEntities.map(mapEntity) }))] }));
 };

package/dist/src/web/routes/Instance.js

@@ -1,94 +1,43 @@
-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 { jsx as _jsx } from "preact/jsx-runtime";
 import { getSerializedDisplayNameFromEntityInstance } from "../../shared/utils/displayName.js";
 import { toTitleCase } from "../../shared/utils/string.js";
-import { deleteInstanceByEntityNameAndId, getInstanceByEntityNameAndId, updateInstanceByEntityNameAndId, } from "../api.js";
-import { Layout } from "../components/Layout.js";
-import { TypeInput } from "../components/typeInputs/TypeInput.js";
-import { useEntityFromRoute } from "../hooks/useEntityFromRoute.js";
-import { useInstanceNamesByEntity } from "../hooks/useInstanceNamesByEntity.js";
-import { useGetDeclFromDeclName } from "../hooks/useSecondaryDeclarations.js";
-import { homeTitle } from "./Home.js";
-import { NotFound } from "./NotFound.js";
-export const Instance = () => {
-    const { params: { name, id }, } = useRoute();
-    const [getDeclFromDeclName, declsLoaded] = useGetDeclFromDeclName();
-    const entityFromRoute = useEntityFromRoute();
-    const { declaration: entity } = entityFromRoute ?? {};
-    const [instanceNamesByEntity] = useInstanceNamesByEntity();
-    const [instance, setInstance] = useState();
-    const [originalInstance, setOriginalInstance] = useState();
-    const { route } = useLocation();
-    useEffect(() => {
-        if (entity && instance?.content && id) {
-            const defaultName = id;
-            const instanceName = getSerializedDisplayNameFromEntityInstance(entity, instance.content, defaultName);
-            const entityName = entity.name;
-            document.title = instanceName + " — " + toTitleCase(entityName) + " — TSONDB";
+import { getInstanceByEntityNameAndId, updateInstanceByEntityNameAndId, } from "../api/declarations.js";
+import { InstanceRouteSkeleton, } from "../components/InstanceRouteSkeleton.js";
+const init = async ({ locales, entity, instanceId, setInstanceContent, }) => {
+    if (instanceId) {
+        try {
+            const instanceData = await getInstanceByEntityNameAndId(locales, entity.name, instanceId);
+            setInstanceContent(instanceData.instance.content);
         }
-        else {
-            document.title = "Not found — TSONDB";
+        catch (error) {
+            console.error("Error fetching entities:", error);
         }
-    }, [entity, id, instance?.content]);
-    useEffect(() => {
-        if (name && id) {
-            getInstanceByEntityNameAndId(name, id)
-                .then(instanceData => {
-                setInstance(instanceData.instance);
-                setOriginalInstance(instanceData.instance);
-            })
-                .catch((error) => {
-                console.error("Error fetching entities:", error);
+    }
+};
+const titleBuilder = ({ locales, entity, instanceId, instanceContent, }) => {
+    if (instanceContent && instanceId) {
+        const instanceName = getSerializedDisplayNameFromEntityInstance(entity, instanceContent, instanceId, locales).name;
+        return instanceName + " — " + toTitleCase(entity.name) + " — TSONDB";
+    }
+    return undefined;
+};
+const onSubmit = async ({ locales, entity, instanceId, instanceContent, buttonName, childInstances, }) => {
+    if (instanceId && buttonName === "save") {
+        try {
+            await updateInstanceByEntityNameAndId(locales, entity.name, instanceId, {
+                childInstances,
+                entityName: entity.name,
+                content: instanceContent,
+                id: instanceId,
             });
         }
-    }, [id, name]);
-    const handleSubmit = (event) => {
-        event.preventDefault();
-        if (event.submitter?.getAttribute("name") === "save" && name && id && instance) {
-            updateInstanceByEntityNameAndId(name, id, instance.content)
-                .then(updatedInstance => {
-                setInstance(updatedInstance.instance);
-                setOriginalInstance(updatedInstance.instance);
-            })
-                .catch((error) => {
-                if (error instanceof Error) {
-                    alert(`Error updating instance:\n\n${error}`);
-                }
-            });
+        catch (error) {
+            if (error instanceof Error) {
+                alert(`Error updating instance:\n\n${error}`);
+            }
         }
-    };
-    const handleOnChange = useCallback((value) => {
-        setInstance(container => container && { ...container, content: value });
-    }, []);
-    if (!name || !id) {
-        return _jsx(NotFound, {});
-    }
-    if (!entity || !instance || !originalInstance || !instanceNamesByEntity || !declsLoaded) {
-        return (_jsxs(Layout, { breadcrumbs: [
-                { url: "/", label: homeTitle },
-                {
-                    url: `/entities/${name}`,
-                    label: entity ? toTitleCase(entity.namePlural) : name,
-                },
-            ], children: [_jsx("h1", { children: id }), _jsx("p", { className: "loading", children: "Loading \u2026" })] }));
     }
-    const defaultName = id;
-    const instanceName = getSerializedDisplayNameFromEntityInstance(entity, instance.content, defaultName);
-    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 }), " ", _jsx("span", { className: "id", "aria-hidden": true, children: instance.id })] }), _jsx("button", { class: "destructive", onClick: () => {
-                            if (confirm("Are you sure you want to delete this instance?")) {
-                                deleteInstanceByEntityNameAndId(entity.name, instance.id)
-                                    .then(() => {
-                                    route(`/entities/${name}`);
-                                })
-                                    .catch((error) => {
-                                    if (error instanceof Error) {
-                                        alert("Error deleting instance:\n\n" + error.toString());
-                                    }
-                                });
-                            }
-                        }, children: "Delete" })] }), _jsxs("form", { onSubmit: handleSubmit, children: [_jsx(TypeInput, { type: entity.type, value: instance.content, path: undefined, instanceNamesByEntity: instanceNamesByEntity, getDeclFromDeclName: getDeclFromDeclName, onChange: handleOnChange }), _jsx("div", { class: "form-footer btns", children: _jsx("button", { type: "submit", name: "save", class: "primary", children: "Save" }) })] })] }));
+};
+export const Instance = () => {
+    return (_jsx(InstanceRouteSkeleton, { mode: "edit", init: init, titleBuilder: titleBuilder, onSubmit: onSubmit }));
 };

package/dist/src/web/utils/InlineMarkdown.d.ts

@@ -1,4 +1,4 @@
-import type { FunctionalComponent } from "preact";
+import { type FunctionalComponent } from "preact";
 import type { InlineMarkdownNode } from "../../shared/utils/markdown.ts";
 type Props = {
     node: InlineMarkdownNode;

package/dist/src/web/utils/InlineMarkdown.js

@@ -1,4 +1,6 @@
-import { jsx as _jsx } from "preact/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+import { Fragment } from "preact";
+const emptyNode = { kind: "text", content: "" };
 export const InlineMarkdown = ({ node }) => {
     switch (node.kind) {
         case "code":
@@ -9,6 +11,16 @@ export const InlineMarkdown = ({ node }) => {
             return (_jsx("em", { children: node.content.map((inline, i) => (_jsx(InlineMarkdown, { node: inline }, i))) }));
         case "link":
             return (_jsx("a", { href: node.href, children: node.content.map((inline, i) => (_jsx(InlineMarkdown, { node: inline }, i))) }));
+        case "attributed": {
+            const separatorIndex = node.content.findIndex(attr => attr.kind === "text" && attr.content === "](");
+            const count = Object.keys(node.attributes).length;
+            const attributesStart = separatorIndex + 1;
+            const attributesEnd = attributesStart + (count === 0 ? 0 : count * 4 - 1);
+            const leadingNodes = node.content.slice(0, attributesStart);
+            const attributes = node.content.slice(attributesStart, attributesEnd);
+            const trailingNodes = node.content.slice(attributesEnd);
+            return (_jsxs("span", { class: "attributed", ...Object.fromEntries(Object.entries(node.attributes).map(([k, v]) => [`data-${k}`, v.toString()])), children: [leadingNodes.map((inline, i) => (_jsx(InlineMarkdown, { node: inline }, i))), Array.from({ length: count }, (_, i) => (_jsxs(Fragment, { children: [_jsx("span", { class: "attributed__name", children: _jsx(InlineMarkdown, { node: attributes[i * 4] ?? emptyNode }) }), _jsx("span", { class: "attributed__separator", children: _jsx(InlineMarkdown, { node: attributes[i * 4 + 1] ?? emptyNode }) }), _jsx("span", { class: "attributed__value", children: _jsx(InlineMarkdown, { node: attributes[i * 4 + 2] ?? emptyNode }) }), i < count - 1 && (_jsx("span", { class: "attributed__separator", children: _jsx(InlineMarkdown, { node: attributes[i * 4 + 3] ?? emptyNode }) }))] }, `attr-${(i + 1).toString()}`))), trailingNodes.map((inline, i) => (_jsx(InlineMarkdown, { node: inline }, i)))] }));
+        }
         case "text":
             return node.content;
     }