tsondb 0.5.8 → 0.5.12

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

@@ -1,9 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
 import { useState } from "preact/hooks";
 import { validateNumberConstraints } from "../../../shared/validation/number.js";
+import { MismatchingTypeError } from "./utils/MismatchingTypeError.js";
 import { ValidationErrors } from "./utils/ValidationErrors.js";
 export const FloatTypeInput = ({ type, value, onChange }) => {
-    const [stringValue, setStringValue] = useState(value.toString());
+    const [stringValue, setStringValue] = useState(typeof value === "number" ? value.toString() : "");
+    if (typeof value !== "number") {
+        return _jsx(MismatchingTypeError, { expected: "float", actual: value });
+    }
     const errors = validateNumberConstraints(type, value);
     return (_jsxs("div", { class: "field", children: [_jsx("input", { type: "number", value: stringValue, onInput: event => {
                     setStringValue(event.currentTarget.value);

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

@@ -4,6 +4,7 @@ import type { InstanceNamesByEntity } from "../../hooks/useInstanceNamesByEntity
 import type { GetDeclFromDeclName } from "../../hooks/useSecondaryDeclarations.ts";
 type Props = {
     type: SerializedIncludeIdentifierType;
+    path: string | undefined;
     value: unknown;
     instanceNamesByEntity: InstanceNamesByEntity;
     getDeclFromDeclName: GetDeclFromDeclName;

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

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
 import { TypeInput } from "./TypeInput.js";
-export const IncludeIdentifierTypeInput = ({ type, value, instanceNamesByEntity, getDeclFromDeclName, onChange, }) => {
+export const IncludeIdentifierTypeInput = ({ type, path, value, instanceNamesByEntity, getDeclFromDeclName, onChange, }) => {
     const decl = getDeclFromDeclName(type.reference);
     if (decl === undefined) {
         return (_jsxs("div", { role: "alert", children: ["Unresolved declaration identifier ", _jsx("code", { children: type.reference })] }));
     }
-    return (_jsx(TypeInput, { type: decl.type, value: value, instanceNamesByEntity: instanceNamesByEntity, getDeclFromDeclName: getDeclFromDeclName, onChange: onChange }));
+    return (_jsx(TypeInput, { type: decl.type, path: path, value: value, instanceNamesByEntity: instanceNamesByEntity, getDeclFromDeclName: getDeclFromDeclName, onChange: onChange }));
 };

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

@@ -2,7 +2,7 @@ import type { FunctionComponent } from "preact";
 import type { SerializedIntegerType } from "../../../node/schema/types/primitives/IntegerType.ts";
 type Props = {
     type: SerializedIntegerType;
-    value: number;
+    value: unknown;
     onChange: (value: number) => void;
 };
 export declare const IntegerTypeInput: FunctionComponent<Props>;

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

@@ -1,9 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
 import { useState } from "preact/hooks";
 import { validateNumberConstraints } from "../../../shared/validation/number.js";
+import { MismatchingTypeError } from "./utils/MismatchingTypeError.js";
 import { ValidationErrors } from "./utils/ValidationErrors.js";
 export const IntegerTypeInput = ({ type, value, onChange }) => {
-    const [stringValue, setStringValue] = useState(value.toString());
+    const [stringValue, setStringValue] = useState(typeof value === "number" ? value.toString() : "");
+    if (typeof value !== "number") {
+        return _jsx(MismatchingTypeError, { expected: "float", actual: value });
+    }
     const errors = validateNumberConstraints(type, value);
     return (_jsxs("div", { class: "field", children: [_jsx("input", { type: "number", value: stringValue, onInput: event => {
                     setStringValue(event.currentTarget.value);

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

@@ -4,7 +4,8 @@ import type { InstanceNamesByEntity } from "../../hooks/useInstanceNamesByEntity
 import type { GetDeclFromDeclName } from "../../hooks/useSecondaryDeclarations.ts";
 type Props = {
     type: SerializedNestedEntityMapType;
-    value: Record<string, unknown>;
+    path: string | undefined;
+    value: unknown;
     instanceNamesByEntity: InstanceNamesByEntity;
     getDeclFromDeclName: GetDeclFromDeclName;
     onChange: (value: Record<string, unknown>) => void;

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

@@ -1,30 +1,39 @@
 import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
 import { useState } from "preact/hooks";
 import { sortObjectKeysAlphabetically } from "../../../shared/utils/object.js";
+import { toTitleCase } from "../../../shared/utils/string.js";
 import { createTypeSkeleton } from "../../utils/typeSkeleton.js";
 import { Select } from "../Select.js";
 import { TypeInput } from "./TypeInput.js";
-export const NestedEntityMapTypeInput = ({ type, value, instanceNamesByEntity, getDeclFromDeclName, onChange, }) => {
+import { MismatchingTypeError } from "./utils/MismatchingTypeError.js";
+export const NestedEntityMapTypeInput = ({ type, path, value, instanceNamesByEntity, getDeclFromDeclName, onChange, }) => {
     const [newKey, setNewKey] = useState("");
+    if (typeof value !== "object" || value === null || Array.isArray(value)) {
+        return _jsx(MismatchingTypeError, { expected: "object", actual: value });
+    }
     const existingKeys = Object.keys(value);
     const secondaryInstances = (instanceNamesByEntity[type.secondaryEntity] ?? [])
         .slice()
         .filter(instance => !existingKeys.includes(instance.id))
-        .sort((a, b) => a.name.localeCompare(b.name));
-    return (_jsxs("div", { class: "field field--container field--nestedentitymap", children: [existingKeys.length > 0 && (_jsx("ul", { children: Object.entries(value).map(([key, item]) => (_jsxs("li", { class: "container-item dict-item", children: [_jsxs("div", { className: "container-item-header", children: [_jsx("div", { className: "container-item-title", children: _jsxs("span", { children: [_jsx("strong", { children: instanceNamesByEntity[type.secondaryEntity]?.find(instance => instance.id === key)?.name ?? key }), " ", _jsx("span", { className: "id", children: key })] }) }), _jsx("div", { className: "btns", children: _jsx("button", { class: "destructive", onClick: () => {
-                                            const newObj = { ...value };
-                                            // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
-                                            delete newObj[key];
-                                            onChange(newObj);
-                                        }, children: "Delete Key" }) })] }), _jsx(TypeInput, { type: type.type, value: item, instanceNamesByEntity: instanceNamesByEntity, getDeclFromDeclName: getDeclFromDeclName, onChange: newItem => {
-                                onChange(sortObjectKeysAlphabetically({ ...value, [key]: newItem }));
-                            } })] }, key))) })), _jsxs("div", { class: "add-item-container", children: [_jsxs(Select, { value: newKey, onInput: event => {
+        .sort((a, b) => a.name.localeCompare(b.name, undefined, { numeric: true }));
+    return (_jsxs("div", { class: "field field--container field--nestedentitymap", children: [existingKeys.length > 0 && (_jsx("ul", { children: Object.entries(value).map(([key, item]) => {
+                    const name = instanceNamesByEntity[type.secondaryEntity]?.find(instance => instance.id === key)
+                        ?.name ?? key;
+                    return (_jsxs("li", { class: "container-item dict-item", children: [_jsxs("div", { className: "container-item-header", children: [_jsx("div", { className: "container-item-title", children: _jsxs("span", { children: [_jsx("strong", { children: name }), " ", _jsx("span", { className: "id", children: key })] }) }), _jsx("div", { className: "btns", children: _jsxs("button", { class: "destructive", onClick: () => {
+                                                const newObj = { ...value };
+                                                // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
+                                                delete newObj[key];
+                                                onChange(newObj);
+                                            }, children: ["Delete ", name] }) })] }), _jsx(TypeInput, { type: type.type, path: path === undefined ? key : `${path}.${key}`, value: item, instanceNamesByEntity: instanceNamesByEntity, getDeclFromDeclName: getDeclFromDeclName, onChange: newItem => {
+                                    onChange(sortObjectKeysAlphabetically({ ...value, [key]: newItem }));
+                                } })] }, key));
+                }) })), _jsxs("div", { class: "add-item-container", children: [_jsxs(Select, { value: newKey, onInput: event => {
                             setNewKey(event.currentTarget.value);
-                        }, disabled: secondaryInstances.length === 0, children: [secondaryInstances.length === 0 ? (_jsx("option", { value: "", disabled: true, children: "No instances available" })) : (_jsx("option", { value: "", disabled: true, children: "No selected instance" })), secondaryInstances.map(instance => (_jsx("option", { value: instance.id, children: instance.name }, instance.id)))] }), _jsx("button", { onClick: () => {
+                        }, disabled: secondaryInstances.length === 0, children: [secondaryInstances.length === 0 ? (_jsx("option", { value: "", disabled: true, children: "No instances available" })) : (_jsx("option", { value: "", disabled: true, children: "No selected instance" })), secondaryInstances.map(instance => (_jsx("option", { value: instance.id, children: instance.name }, instance.id)))] }), _jsxs("button", { onClick: () => {
                             onChange(sortObjectKeysAlphabetically({
                                 ...value,
                                 [newKey]: createTypeSkeleton(getDeclFromDeclName, type.type),
                             }));
                             setNewKey("");
-                        }, disabled: newKey === "", children: "Add Key" })] })] }));
+                        }, disabled: newKey === "", children: ["Add ", newKey === "" ? "Key" : toTitleCase(newKey)] })] })] }));
 };

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

@@ -4,7 +4,8 @@ import type { InstanceNamesByEntity } from "../../hooks/useInstanceNamesByEntity
 import type { GetDeclFromDeclName } from "../../hooks/useSecondaryDeclarations.ts";
 type Props = {
     type: SerializedObjectType;
-    value: Record<string, unknown>;
+    path: string | undefined;
+    value: unknown;
     instanceNamesByEntity: InstanceNamesByEntity;
     getDeclFromDeclName: GetDeclFromDeclName;
     onChange: (value: Record<string, unknown>) => void;

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

@@ -5,20 +5,25 @@ import { validateObjectConstraints } from "../../../shared/validation/object.js"
 import { Markdown } from "../../utils/Markdown.js";
 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 ObjectTypeInput = ({ type, value, instanceNamesByEntity, getDeclFromDeclName, onChange, }) => {
+export const ObjectTypeInput = ({ type, path, value, instanceNamesByEntity, getDeclFromDeclName, onChange, }) => {
+    if (typeof value !== "object" || value === null || Array.isArray(value)) {
+        return _jsx(MismatchingTypeError, { expected: "object", actual: value });
+    }
     const errors = validateObjectConstraints(type, Object.keys(type.properties), value);
-    return (_jsxs("div", { class: "field field--container field--object", children: [_jsx("ul", { children: Object.entries(type.properties).map(([key, memberDecl]) => (_jsxs("li", { class: "container-item object-item", children: [_jsxs("div", { className: "container-item-header", children: [_jsxs("div", { className: "container-item-title", children: [_jsx("strong", { children: toTitleCase(key) }), memberDecl.comment === undefined ? null : (_jsx(Markdown, { class: "comment", string: memberDecl.comment }))] }), memberDecl.isRequired ? null : value[key] === undefined ? (_jsx("button", { onClick: () => {
+    return (_jsxs("div", { class: "field field--container field--object", children: [_jsx("ul", { children: Object.entries(type.properties).map(([key, memberDecl]) => (_jsxs("li", { class: "container-item object-item", children: [_jsxs("div", { className: "container-item-header", children: [_jsxs("div", { className: "container-item-title", children: [_jsx("strong", { children: toTitleCase(key) }), memberDecl.comment === undefined ? null : (_jsx(Markdown, { class: "comment", string: memberDecl.comment }))] }), memberDecl.isRequired ? null : value[key] ===
+                                    undefined ? (_jsxs("button", { onClick: () => {
                                         onChange(sortObjectKeys({
                                             ...value,
                                             [key]: createTypeSkeleton(getDeclFromDeclName, memberDecl.type),
                                         }, Object.keys(type.properties)));
-                                    }, children: "Add Property" })) : (_jsx("button", { class: "destructive", onClick: () => {
+                                    }, children: ["Add ", toTitleCase(key)] })) : (_jsxs("button", { class: "destructive", onClick: () => {
                                         const newObj = { ...value };
                                         // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
                                         delete newObj[key];
                                         onChange(newObj);
-                                    }, children: "Remove Property" }))] }), memberDecl.isRequired || value[key] !== undefined ? (_jsx(TypeInput, { type: memberDecl.type, value: value[key], instanceNamesByEntity: instanceNamesByEntity, getDeclFromDeclName: getDeclFromDeclName, onChange: newItem => {
+                                    }, children: ["Remove ", toTitleCase(key)] }))] }), memberDecl.isRequired || value[key] !== undefined ? (_jsx(TypeInput, { type: memberDecl.type, path: path === undefined ? key : `${path}.${key}`, value: value[key], instanceNamesByEntity: instanceNamesByEntity, getDeclFromDeclName: getDeclFromDeclName, onChange: newItem => {
                                 onChange(sortObjectKeys({ ...value, [key]: newItem }, Object.keys(type.properties)));
                             } })) : null] }, key))) }), _jsx(ValidationErrors, { errors: errors })] }));
 };

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

@@ -3,7 +3,7 @@ import type { SerializedReferenceIdentifierType } from "../../../node/schema/typ
 import type { InstanceNamesByEntity } from "../../hooks/useInstanceNamesByEntity.ts";
 type Props = {
     type: SerializedReferenceIdentifierType;
-    value: string;
+    value: unknown;
     instanceNamesByEntity: InstanceNamesByEntity;
     onChange: (value: string) => void;
 };

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

@@ -1,10 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
 import { Select } from "../Select.js";
+import { MismatchingTypeError } from "./utils/MismatchingTypeError.js";
 import { ValidationErrors } from "./utils/ValidationErrors.js";
 export const ReferenceIdentifierTypeInput = ({ type, value, instanceNamesByEntity, onChange, }) => {
+    if (typeof value !== "string") {
+        return _jsx(MismatchingTypeError, { expected: "string identifier", actual: value });
+    }
     const instances = (instanceNamesByEntity[type.entity] ?? [])
         .slice()
-        .sort((a, b) => a.name.localeCompare(b.name));
+        .sort((a, b) => a.name.localeCompare(b.name, undefined, { numeric: true }));
     return (_jsxs("div", { class: "field", children: [_jsxs(Select, { value: value, onInput: event => {
                     onChange(event.currentTarget.value);
                 }, disabled: instances.length === 0, "aria-invalid": !value, children: [instances.length === 0 ? (_jsx("option", { value: "", disabled: true, children: "No instances available" })) : (_jsx("option", { value: "", disabled: true, children: "No selected instance" })), instances.map(instance => (_jsx("option", { value: instance.id, children: instance.name }, instance.id)))] }), _jsx(ValidationErrors, { errors: !value ? [ReferenceError("no reference provided")] : [] })] }));

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

@@ -2,7 +2,7 @@ import type { FunctionComponent } from "preact";
 import type { SerializedStringType } from "../../../node/schema/types/primitives/StringType.ts";
 type Props = {
     type: SerializedStringType;
-    value: string;
+    value: unknown;
     onChange: (value: string) => void;
 };
 export declare const StringTypeInput: FunctionComponent<Props>;

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

@@ -1,13 +1,21 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "preact/jsx-runtime";
 import { validateStringConstraints } from "../../../shared/validation/string.js";
 import { Markdown } from "../../utils/Markdown.js";
+import { MismatchingTypeError } from "./utils/MismatchingTypeError.js";
 import { ValidationErrors } from "./utils/ValidationErrors.js";
 export const StringTypeInput = ({ type, value, onChange }) => {
+    if (typeof value !== "string") {
+        return _jsx(MismatchingTypeError, { expected: "string", actual: value });
+    }
     const { minLength, maxLength, pattern, isMarkdown } = type;
     const errors = validateStringConstraints(type, value);
-    return (_jsx("div", { class: "field field--string", children: isMarkdown ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "editor", children: [_jsx("textarea", { value: value, minLength: minLength, maxLength: maxLength, onInput: event => {
-                                onChange(event.currentTarget.value);
-                            }, "aria-invalid": errors.length > 0 }), _jsx(ValidationErrors, { errors: errors })] }), _jsx("div", { className: "preview", children: _jsx(Markdown, { string: value }) })] })) : (_jsxs("div", { className: "editor", children: [_jsx("input", { type: "text", value: value, minLength: minLength, maxLength: maxLength, pattern: pattern, onInput: event => {
+    return (_jsx("div", { class: "field field--string", children: isMarkdown ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "editor", children: [_jsx("div", { class: "textarea-grow-wrap", "data-value": value, children: _jsx("textarea", { value: value, minLength: minLength, maxLength: maxLength, onInput: event => {
+                                    onChange(event.currentTarget.value);
+                                }, "aria-invalid": errors.length > 0 }) }), _jsx(ValidationErrors, { errors: errors })] }), _jsx("div", { className: "preview", children: _jsx(Markdown, { string: value }) })] })) : (_jsxs("div", { className: "editor", children: [_jsx("input", { type: "text", value: value, minLength: minLength, maxLength: maxLength, pattern: pattern === undefined
+                        ? undefined
+                        : pattern.startsWith("^(?:") && pattern.endsWith(")$")
+                            ? pattern.slice(4, -2)
+                            : `.*${pattern}.*`, onInput: event => {
                         onChange(event.currentTarget.value);
                     }, "aria-invalid": errors.length > 0 }), _jsx(ValidationErrors, { errors: errors })] })) }));
 };

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

@@ -4,10 +4,11 @@ import type { InstanceNamesByEntity } from "../../hooks/useInstanceNamesByEntity
 import type { GetDeclFromDeclName } from "../../hooks/useSecondaryDeclarations.ts";
 type Props = {
     type: SerializedType;
+    path: string | undefined;
     value: unknown;
     instanceNamesByEntity: InstanceNamesByEntity;
     getDeclFromDeclName: GetDeclFromDeclName;
     onChange: (value: unknown) => void;
 };
-export declare const TypeInput: FunctionComponent<Props>;
-export {};
+declare const MemoizedTypeInput: FunctionComponent<Props>;
+export { MemoizedTypeInput as TypeInput };

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

@@ -1,4 +1,5 @@
 import { jsx as _jsx } from "preact/jsx-runtime";
+import { memo } from "preact/compat";
 import { assertExhaustive } from "../../../shared/utils/typeSafety.js";
 import { ArrayTypeInput } from "./ArrayTypeInput.js";
 import { BooleanTypeInput } from "./BooleanTypeInput.js";
@@ -12,79 +13,36 @@ import { NestedEntityMapTypeInput } from "./NestedEntityMapTypeInput.js";
 import { ObjectTypeInput } from "./ObjectTypeInput.js";
 import { ReferenceIdentifierTypeInput } from "./ReferenceIdentifierTypeInput.js";
 import { StringTypeInput } from "./StringTypeInput.js";
-import { MismatchingTypeError } from "./utils/MismatchingTypeError.js";
-export const TypeInput = ({ type, value, instanceNamesByEntity, getDeclFromDeclName, onChange, }) => {
+const TypeInput = ({ type, path, value, instanceNamesByEntity, getDeclFromDeclName, onChange, }) => {
+    // console.log("rendering node at path ", path ?? "<root>")
     switch (type.kind) {
         case "BooleanType":
-            if (typeof value === "boolean") {
-                return _jsx(BooleanTypeInput, { type: type, value: value, onChange: onChange });
-            }
-            else {
-                return _jsx(MismatchingTypeError, { expected: "boolean", actual: value });
-            }
+            return _jsx(BooleanTypeInput, { type: type, value: value, onChange: onChange });
         case "DateType":
-            if (typeof value === "string") {
-                return _jsx(DateTypeInput, { type: type, value: value, onChange: onChange });
-            }
-            else {
-                return _jsx(MismatchingTypeError, { expected: "date string", actual: value });
-            }
+            return _jsx(DateTypeInput, { type: type, value: value, onChange: onChange });
         case "FloatType":
-            if (typeof value === "number") {
-                return _jsx(FloatTypeInput, { type: type, value: value, onChange: onChange });
-            }
-            else {
-                return _jsx(MismatchingTypeError, { expected: "float", actual: value });
-            }
+            return _jsx(FloatTypeInput, { type: type, value: value, onChange: onChange });
         case "IntegerType":
-            if (typeof value === "number" && Number.isInteger(value)) {
-                return _jsx(IntegerTypeInput, { type: type, value: value, onChange: onChange });
-            }
-            else {
-                return _jsx(MismatchingTypeError, { expected: "integer", actual: value });
-            }
+            return _jsx(IntegerTypeInput, { type: type, value: value, onChange: onChange });
         case "StringType":
-            if (typeof value === "string") {
-                return _jsx(StringTypeInput, { type: type, value: value, onChange: onChange });
-            }
-            else {
-                return _jsx(MismatchingTypeError, { expected: "string", actual: value });
-            }
+            return _jsx(StringTypeInput, { type: type, value: value, onChange: onChange });
         case "ArrayType":
-            if (Array.isArray(value)) {
-                return (_jsx(ArrayTypeInput, { type: type, value: value, instanceNamesByEntity: instanceNamesByEntity, getDeclFromDeclName: getDeclFromDeclName, onChange: onChange }));
-            }
-            else {
-                return _jsx(MismatchingTypeError, { expected: "array", actual: value });
-            }
+            return (_jsx(ArrayTypeInput, { type: type, path: path, value: value, instanceNamesByEntity: instanceNamesByEntity, getDeclFromDeclName: getDeclFromDeclName, onChange: onChange }));
         case "ObjectType":
-            if (typeof value === "object" && value !== null && !Array.isArray(value)) {
-                return (_jsx(ObjectTypeInput, { type: type, value: value, instanceNamesByEntity: instanceNamesByEntity, getDeclFromDeclName: getDeclFromDeclName, onChange: onChange }));
-            }
-            else {
-                return _jsx(MismatchingTypeError, { expected: "object", actual: value });
-            }
+            return (_jsx(ObjectTypeInput, { type: type, path: path, value: value, instanceNamesByEntity: instanceNamesByEntity, getDeclFromDeclName: getDeclFromDeclName, onChange: onChange }));
         case "TypeArgumentType":
             return _jsx(TypeArgumentTypeInput, { type: type });
         case "ReferenceIdentifierType":
-            if (typeof value === "string") {
-                return (_jsx(ReferenceIdentifierTypeInput, { type: type, value: value, instanceNamesByEntity: instanceNamesByEntity, onChange: onChange }));
-            }
-            else {
-                return _jsx(MismatchingTypeError, { expected: "string identifier", actual: value });
-            }
+            return (_jsx(ReferenceIdentifierTypeInput, { type: type, value: value, instanceNamesByEntity: instanceNamesByEntity, onChange: onChange }));
         case "IncludeIdentifierType":
-            return (_jsx(IncludeIdentifierTypeInput, { type: type, value: value, instanceNamesByEntity: instanceNamesByEntity, getDeclFromDeclName: getDeclFromDeclName, onChange: onChange }));
+            return (_jsx(IncludeIdentifierTypeInput, { type: type, path: path, value: value, instanceNamesByEntity: instanceNamesByEntity, getDeclFromDeclName: getDeclFromDeclName, onChange: onChange }));
         case "NestedEntityMapType":
-            if (typeof value === "object" && value !== null && !Array.isArray(value)) {
-                return (_jsx(NestedEntityMapTypeInput, { type: type, value: value, instanceNamesByEntity: instanceNamesByEntity, getDeclFromDeclName: getDeclFromDeclName, onChange: onChange }));
-            }
-            else {
-                return _jsx(MismatchingTypeError, { expected: "entity map", actual: value });
-            }
+            return (_jsx(NestedEntityMapTypeInput, { type: type, path: path, value: value, instanceNamesByEntity: instanceNamesByEntity, getDeclFromDeclName: getDeclFromDeclName, onChange: onChange }));
         case "EnumType":
-            return (_jsx(EnumTypeInput, { type: type, value: value, instanceNamesByEntity: instanceNamesByEntity, getDeclFromDeclName: getDeclFromDeclName, onChange: onChange }));
+            return (_jsx(EnumTypeInput, { type: type, path: path, value: value, instanceNamesByEntity: instanceNamesByEntity, getDeclFromDeclName: getDeclFromDeclName, onChange: onChange }));
         default:
             return assertExhaustive(type);
     }
 };
+const MemoizedTypeInput = memo(TypeInput, (prevProps, nextProps) => prevProps.value === nextProps.value && prevProps.onChange === nextProps.onChange);
+export { MemoizedTypeInput as TypeInput };

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

@@ -1,3 +1,3 @@
 import type { GetAllInstancesResponseBody } from "../../shared/api.ts";
 export type InstanceNamesByEntity = GetAllInstancesResponseBody["instances"];
-export declare const useInstanceNamesByEntity: (locales?: string[]) => [InstanceNamesByEntity, () => void];
+export declare const useInstanceNamesByEntity: (locales?: string[]) => [InstanceNamesByEntity | undefined, () => void];

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

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useState } from "preact/hooks";
 import { getAllInstances } from "../api.js";
 export const useInstanceNamesByEntity = (locales = []) => {
-    const [instanceNamesByEntity, setInstanceNamesByEntity] = useState({});
+    const [instanceNamesByEntity, setInstanceNamesByEntity] = useState();
     const updateInstanceNamesByEntity = useCallback(() => {
         getAllInstances(locales)
             .then(data => {

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

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

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

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useState } from "preact/hooks";
 import { getAllDeclarations } from "../api.js";
 export const useGetDeclFromDeclName = () => {
-    const [secondaryDeclarations, setSecondaryDeclarations] = useState([]);
+    const [secondaryDeclarations, setSecondaryDeclarations] = useState();
     useEffect(() => {
         getAllDeclarations()
             .then(data => {
@@ -15,6 +15,6 @@ export const useGetDeclFromDeclName = () => {
             }
         });
     }, []);
-    const getDeclFromDeclName = useCallback((name) => secondaryDeclarations.find(decl => decl.name === name), [secondaryDeclarations]);
-    return getDeclFromDeclName;
+    const getDeclFromDeclName = useCallback((name) => secondaryDeclarations?.find(decl => decl.name === name), [secondaryDeclarations]);
+    return [getDeclFromDeclName, secondaryDeclarations !== undefined];
 };

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
 import { useLocation, useRoute } from "preact-iso";
 import { useEffect, useState } from "preact/hooks";
-import { getDisplayNameFromEntityInstance } from "../../shared/utils/displayName.js";
+import { getSerializedDisplayNameFromEntityInstance } from "../../shared/utils/displayName.js";
 import { toTitleCase } from "../../shared/utils/string.js";
 import { validateLocaleIdentifier } from "../../shared/validation/identifier.js";
 import { createInstanceByEntityNameAndId } from "../api.js";
@@ -15,7 +15,7 @@ import { createTypeSkeleton } from "../utils/typeSkeleton.js";
 import { NotFound } from "./NotFound.js";
 export const CreateInstance = () => {
     const { params: { name }, } = useRoute();
-    const getDeclFromDeclName = useGetDeclFromDeclName();
+    const [getDeclFromDeclName, declsLoaded] = useGetDeclFromDeclName();
     const entityFromRoute = useEntityFromRoute();
     const [instanceNamesByEntity] = useInstanceNamesByEntity();
     const [instance, setInstance] = useState();
@@ -26,10 +26,15 @@ export const CreateInstance = () => {
         }
     }, [getDeclFromDeclName, entityFromRoute]);
     const { route } = useLocation();
+    useEffect(() => {
+        const entityName = entityFromRoute?.entity.name ?? name;
+        document.title =
+            entityName === undefined ? "Not found" : "New " + toTitleCase(entityName) + " — TSONDB";
+    }, [entityFromRoute?.entity.name, name]);
     if (!name) {
         return _jsx(NotFound, {});
     }
-    if (!entityFromRoute) {
+    if (!entityFromRoute || !instanceNamesByEntity || !declsLoaded) {
         return (_jsxs("div", { children: [_jsx("h1", { children: name }), _jsx("p", { className: "loading", children: "Loading \u2026" })] }));
     }
     const { entity, isLocaleEntity } = entityFromRoute;
@@ -39,13 +44,22 @@ export const CreateInstance = () => {
         if (name) {
             createInstanceByEntityNameAndId(entity.name, instance, isLocaleEntity ? customId : undefined)
                 .then(createdInstance => {
-                if (name === "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.`);
-                }
-                else {
-                    route(`/entities/${entity.name}?created=${encodeURIComponent(createdInstance.instance.id)}`);
+                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) => {
@@ -56,15 +70,15 @@ export const CreateInstance = () => {
         }
     };
     const defaultName = customId || `New ${toTitleCase(entity.name)}`;
-    const instanceName = getDisplayNameFromEntityInstance(entity, instance, defaultName);
+    const instanceName = getSerializedDisplayNameFromEntityInstance(entity, instance, defaultName);
     const idErrors = isLocaleEntity ? validateLocaleIdentifier(customId) : [];
     return (_jsxs(Layout, { breadcrumbs: [
             { url: "/", label: "Home" },
             { url: `/entities/${entity.name}`, label: entity.name },
         ], 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, value: instance, instanceNamesByEntity: instanceNamesByEntity, getDeclFromDeclName: getDeclFromDeclName, onChange: 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", { className: "btns", children: [_jsx("button", { type: "submit", class: "primary", name: "save", children: "Save" }), _jsx("button", { type: "submit", class: "primary", name: "saveandaddanother", children: "Save and Add Another" })] })] })] }));
+                        } }), _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" })] })] })] }));
 };

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

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
 import { useRoute } from "preact-iso";
-import { useEffect } from "preact/hooks";
+import { useEffect, useState } from "preact/hooks";
 import { getGitStatusForDisplay, getLabelForGitStatus } from "../../shared/utils/git.js";
+import { toTitleCase } from "../../shared/utils/string.js";
 import { deleteInstanceByEntityNameAndId, getEntityByName, getInstancesByEntityName, } from "../api.js";
 import { Layout } from "../components/Layout.js";
 import { useAPIResource } from "../hooks/useAPIResource.js";
@@ -11,8 +12,12 @@ import { NotFound } from "./NotFound.js";
 const mapInstances = (data) => data.instances;
 export const Entity = () => {
     const { params: { name }, query: { created }, } = useRoute();
+    const [searchText, setSearchText] = useState("");
     const [entity] = useAPIResource(getEntityByName, name ?? "");
     const [instances, reloadInstances] = useMappedAPIResource(getInstancesByEntityName, mapInstances, name ?? "");
+    useEffect(() => {
+        document.title = toTitleCase(entity?.declaration.namePlural ?? name ?? "") + " — TSONDB";
+    }, [entity?.declaration.namePlural, name]);
     useEffect(() => {
         if (created) {
             const instanceElement = document.getElementById(`instance-${created}`);
@@ -25,20 +30,29 @@ export const Entity = () => {
         return _jsx(NotFound, {});
     }
     if (!entity || !instances) {
-        return (_jsxs("div", { children: [_jsx("h1", { children: name }), _jsx("p", { className: "loading", children: "Loading \u2026" })] }));
+        return (_jsxs("div", { children: [_jsx("h1", { children: toTitleCase(entity?.declaration.namePlural ?? name) }), _jsx("p", { className: "loading", children: "Loading \u2026" })] }));
     }
-    return (_jsxs(Layout, { breadcrumbs: [{ url: "/", label: "Home" }], children: [_jsxs("div", { class: "header-with-btns", children: [_jsx("h1", { children: name }), _jsx("a", { class: "btn btn--primary", href: `/entities/${entity.declaration.name}/instances/create`, children: "Add" })] }), entity.declaration.comment && (_jsx(Markdown, { class: "description", string: entity.declaration.comment })), _jsxs("p", { children: [instances.length, " instance", instances.length === 1 ? "" : "s"] }), _jsx("ul", { class: "instances", children: instances.map(instance => {
+    const lowerSearchText = searchText.toLowerCase();
+    const filteredInstances = searchText.length === 0
+        ? instances
+        : instances.filter(instance => instance.id.includes(searchText) ||
+            instance.displayName.toLowerCase().includes(lowerSearchText));
+    return (_jsxs(Layout, { breadcrumbs: [{ url: "/", label: "Home" }], children: [_jsxs("div", { class: "header-with-btns", children: [_jsx("h1", { children: toTitleCase(entity.declaration.namePlural) }), _jsx("a", { class: "btn btn--primary", href: `/entities/${entity.declaration.name}/instances/create`, children: "Add" })] }), entity.declaration.comment && (_jsx(Markdown, { class: "description", string: entity.declaration.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: `instance-item ${created === instance.id ? "instance-item--created" : ""} ${gitStatusForDisplay === undefined ? "" : `git-status--${gitStatusForDisplay}`}`, children: [_jsx("h2", { children: instance.displayName }), _jsx("p", { "aria-hidden": true, class: "id", children: instance.id }), gitStatusForDisplay !== undefined && (_jsx("p", { class: `git-status git-status--${gitStatusForDisplay}`, title: getLabelForGitStatus(gitStatusForDisplay), children: gitStatusForDisplay })), _jsxs("div", { className: "btns", children: [_jsx("a", { href: `/entities/${entity.declaration.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.declaration.name, instance.id)
-                                                    .then(() => reloadInstances())
-                                                    .catch((error) => {
-                                                    if (error instanceof Error) {
-                                                        alert("Error deleting instance:\n\n" + error.toString());
+                    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.declaration.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.declaration.name, instance.id)
+                                                            .then(() => reloadInstances())
+                                                            .catch((error) => {
+                                                            if (error instanceof Error) {
+                                                                alert("Error deleting instance:\n\n" + error.toString());
+                                                            }
+                                                        });
                                                     }
-                                                });
-                                            }
-                                        }, children: "Delete" })] })] }, instance.id));
+                                                }, children: "Delete" })] })] })] }, instance.id));
                 }) })] }));
 };

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

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+import { useEffect, useState } from "preact/hooks";
 import { toTitleCase } from "../../shared/utils/string.js";
 import { getAllEntities } from "../api.js";
 import { Layout } from "../components/Layout.js";
@@ -7,5 +8,18 @@ import { Markdown } from "../utils/Markdown.js";
 const mapEntities = (data) => data.declarations.sort((a, b) => a.declaration.name.localeCompare(b.declaration.name));
 export const Home = () => {
     const [entities] = useMappedAPIResource(getAllEntities, mapEntities);
-    return (_jsxs(Layout, { breadcrumbs: [{ url: "/", label: "Home" }], children: [_jsx("h1", { children: "Entities" }), _jsx("ul", { class: "entities", children: (entities ?? []).map(entity => (_jsxs("li", { class: "entity-item", children: [_jsxs("div", { className: "title", children: [_jsx("h2", { children: toTitleCase(entity.declaration.name) }), entity.declaration.comment && (_jsx(Markdown, { class: "description", string: entity.declaration.comment }))] }), _jsxs("p", { class: "meta", children: [entity.instanceCount, " instance", entity.instanceCount === 1 ? "" : "s"] }), _jsx("div", { className: "btns", children: _jsx("a", { href: `/entities/${entity.declaration.name}`, class: "btn", children: "View" }) })] }, entity.declaration.name))) })] }));
+    useEffect(() => {
+        document.title = "Entities — 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));
+    return (_jsxs(Layout, { breadcrumbs: [{ url: "/", label: "Home" }], children: [_jsx("h1", { children: "Entities" }), _jsxs("div", { className: "list-header", children: [_jsxs("p", { class: "instance-count", children: [searchText === "" ? "" : `${(filteredEntities?.length ?? 0).toString()} of `, entities?.length ?? 0, " 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))) })] }));
 };