tsondb 0.5.10 → 0.5.13

package/dist/src/node/index.js

@@ -23,7 +23,7 @@ export const generateOutputs = async (schema, outputs) => {
     }
 };
 const _validate = (dataRootPath, entities, instancesByEntityName, options = {}) => {
-    const { checkReferentialIntegrity = false, checkOnlyEntities = [] } = options;
+    const { checkReferentialIntegrity = true, checkOnlyEntities = [] } = options;
     for (const onlyEntity of checkOnlyEntities) {
         if (!entities.find(entity => entity.name === onlyEntity)) {
             throw new Error(`Entity "${onlyEntity}" not found in schema`);
@@ -32,7 +32,7 @@ const _validate = (dataRootPath, entities, instancesByEntityName, options = {})
     const errors = (checkOnlyEntities.length > 0
         ? entities.filter(entity => checkOnlyEntities.includes(entity.name))
         : entities)
-        .flatMap(entity => parallelizeErrors(instancesByEntityName[entity.name]?.map(instance => wrapErrorsIfAny(`in file ${styleText("white", `"${dataRootPath}${sep}${styleText("bold", join(entity.name, instance.fileName))}"`)}`, validateEntityDecl(createValidators(instancesByEntityName, checkReferentialIntegrity), entity, instance.content))) ?? []))
+        .flatMap(entity => parallelizeErrors(instancesByEntityName[entity.name]?.map(instance => wrapErrorsIfAny(`in file ${styleText("white", `"${dataRootPath}${sep}${styleText("bold", join(entity.name, instance.fileName))}"`)}`, validateEntityDecl(createValidators(instancesByEntityName, true, checkReferentialIntegrity), entity, instance.content))) ?? []))
         .toSorted((a, b) => a.message.localeCompare(b.message));
     if (errors.length === 0) {
         debug("All entities are valid");

package/dist/src/node/schema/Node.d.ts

@@ -32,8 +32,9 @@ export type IdentifierToCheck = {
     value: unknown;
 };
 export interface Validators {
+    useStyling: boolean;
     checkReferentialIntegrity: (identifier: IdentifierToCheck) => Error[];
 }
-export declare const createValidators: (instancesByEntityName: InstancesByEntityName, checkReferentialIntegrity?: boolean) => Validators;
+export declare const createValidators: (instancesByEntityName: InstancesByEntityName, useStyling: boolean, checkReferentialIntegrity?: boolean) => Validators;
 export type Serializer<T, U> = (node: T) => U;
 export type GetReferences<T extends Node> = (node: T, value: unknown) => string[];

package/dist/src/node/schema/Node.js

@@ -75,7 +75,8 @@ export const flatMapAuxiliaryDecls = (callbackFn, declarations) => {
     };
     return declarations.reduce((decls, node) => mapNodeTree(reducer, node, [...decls, node]), []);
 };
-export const createValidators = (instancesByEntityName, checkReferentialIntegrity = true) => ({
+export const createValidators = (instancesByEntityName, useStyling, checkReferentialIntegrity = true) => ({
+    useStyling,
     checkReferentialIntegrity: checkReferentialIntegrity
         ? ({ name, value }) => instancesByEntityName[name]?.some(instance => typeof instance.content === "object" &&
             instance.content !== null &&
@@ -83,7 +84,7 @@ export const createValidators = (instancesByEntityName, checkReferentialIntegrit
             instance.id === value)
             ? []
             : [
-                ReferenceError(`Invalid reference to instance of entity ${entity(`"${name}"`)} with identifier ${json(value)}`),
+                ReferenceError(`Invalid reference to instance of entity ${entity(`"${name}"`, useStyling)} with identifier ${json(value, useStyling)}`),
             ]
         : () => [],
 });

package/dist/src/node/schema/types/generic/ArrayType.js

@@ -22,11 +22,11 @@ export const isArrayType = (node) => node.kind === NodeKind.ArrayType;
 export const getNestedDeclarationsInArrayType = (addedDecls, type) => getNestedDeclarations(addedDecls, type.items);
 export const validateArrayType = (helpers, type, value) => {
     if (!Array.isArray(value)) {
-        return [TypeError(`expected an array, but got ${json(value)}`)];
+        return [TypeError(`expected an array, but got ${json(value, helpers.useStyling)}`)];
     }
     return parallelizeErrors([
         ...validateArrayConstraints(type, value),
-        ...value.map((item, index) => wrapErrorsIfAny(`at index ${key(index.toString())}`, validate(helpers, type.items, item))),
+        ...value.map((item, index) => wrapErrorsIfAny(`at index ${key(index.toString(), helpers.useStyling)}`, validate(helpers, type.items, item))),
     ]);
 };
 export const resolveTypeArgumentsInArrayType = (args, type) => ArrayType(resolveTypeArgumentsInType(args, type.items), {

package/dist/src/node/schema/types/generic/EnumType.js

@@ -18,24 +18,24 @@ export const isEnumType = (node) => node.kind === NodeKind.EnumType;
 export const getNestedDeclarationsInEnumType = (addedDecls, type) => Object.values(type.values).reduce((acc, caseMember) => caseMember.type === null ? acc : getNestedDeclarations(acc, caseMember.type), addedDecls);
 export const validateEnumType = (helpers, type, value) => {
     if (typeof value !== "object" || value === null || Array.isArray(value)) {
-        return [TypeError(`expected an object, but got ${json(value)}`)];
+        return [TypeError(`expected an object, but got ${json(value, helpers.useStyling)}`)];
     }
     const actualKeys = Object.keys(value);
     if (!(discriminatorKey in value) || typeof value[discriminatorKey] !== "string") {
         return [
-            TypeError(`missing required discriminator value at key ${key(`"${discriminatorKey}"`)} of type string`),
+            TypeError(`missing required discriminator value at key ${key(`"${discriminatorKey}"`, helpers.useStyling)} of type string`),
         ];
     }
     const caseName = value[discriminatorKey];
     if (!(caseName in type.values)) {
         return [
-            TypeError(`discriminator ${key(`"${caseName}"`)} is not a valid enum case, possible cases are: ${Object.keys(type.values).join(", ")}`),
+            TypeError(`discriminator ${key(`"${caseName}"`, helpers.useStyling)} is not a valid enum case, possible cases are: ${Object.keys(type.values).join(", ")}`),
         ];
     }
     const unknownKeyErrors = actualKeys.flatMap(actualKey => actualKey === discriminatorKey || actualKey in type.values
         ? []
         : [
-            TypeError(`key ${key(`"${actualKey}"`)} is not the discriminator key ${key(`"${caseName}"`)} or a valid enum case, possible cases are: ${Object.keys(type.values).join(", ")}`),
+            TypeError(`key ${key(`"${actualKey}"`, helpers.useStyling)} is not the discriminator key ${key(`"${caseName}"`, helpers.useStyling)} or a valid enum case, possible cases are: ${Object.keys(type.values).join(", ")}`),
         ]);
     if (unknownKeyErrors.length > 0) {
         return unknownKeyErrors;
@@ -43,7 +43,9 @@ export const validateEnumType = (helpers, type, value) => {
     const associatedType = type.values[caseName]?.type;
     if (associatedType != null) {
         if (!(caseName in value)) {
-            return [TypeError(`missing required associated value for case ${key(`"${caseName}"`)}`)];
+            return [
+                TypeError(`missing required associated value for case ${key(`"${caseName}"`, helpers.useStyling)}`),
+            ];
         }
         return validate(helpers, associatedType, value[caseName]);
     }

package/dist/src/node/schema/types/generic/ObjectType.js

@@ -30,7 +30,7 @@ export const isObjectType = (node) => node.kind === NodeKind.ObjectType;
 export const getNestedDeclarationsInObjectType = (addedDecls, type) => Object.values(type.properties).reduce((acc, prop) => getNestedDeclarations(acc, prop.type), addedDecls);
 export const validateObjectType = (helpers, type, value) => {
     if (typeof value !== "object" || value === null || Array.isArray(value)) {
-        return [TypeError(`expected an object, but got ${json(value)}`)];
+        return [TypeError(`expected an object, but got ${json(value, helpers.useStyling)}`)];
     }
     const expectedKeys = Object.keys(type.properties);
     return parallelizeErrors([
@@ -39,10 +39,10 @@ export const validateObjectType = (helpers, type, value) => {
             // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
             const prop = type.properties[key];
             if (prop.isRequired && !(key in value)) {
-                return TypeError(`missing required property ${keyColor(`"${key}"`)}`);
+                return TypeError(`missing required property ${keyColor(`"${key}"`, helpers.useStyling)}`);
             }
             else if (prop.isRequired || value[key] !== undefined) {
-                return wrapErrorsIfAny(`at object key ${keyColor(`"${key}"`)}`, validate(helpers, prop.type, value[key]));
+                return wrapErrorsIfAny(`at object key ${keyColor(`"${key}"`, helpers.useStyling)}`, validate(helpers, prop.type, value[key]));
             }
             return undefined;
         }),

package/dist/src/node/schema/types/primitives/BooleanType.js

@@ -6,9 +6,9 @@ export const BooleanType = () => ({
 });
 export { BooleanType as Boolean };
 export const isBooleanType = (node) => node.kind === NodeKind.BooleanType;
-export const validateBooleanType = (_helpers, _type, value) => {
+export const validateBooleanType = (helpers, _type, value) => {
     if (typeof value !== "boolean") {
-        return [TypeError(`expected a boolean value, but got ${json(value)}`)];
+        return [TypeError(`expected a boolean value, but got ${json(value, helpers.useStyling)}`)];
     }
     return [];
 };

package/dist/src/node/schema/types/primitives/DateType.js

@@ -8,9 +8,9 @@ export const DateType = (options) => ({
 });
 export { DateType as Date };
 export const isDateType = (node) => node.kind === NodeKind.DateType;
-export const validateDateType = (_helpers, type, value) => {
+export const validateDateType = (helpers, type, value) => {
     if (typeof value !== "string") {
-        return [TypeError(`expected a string, but got ${json(value)}`)];
+        return [TypeError(`expected a string, but got ${json(value, helpers.useStyling)}`)];
     }
     return validateDateConstraints(type, value);
 };

package/dist/src/node/schema/types/primitives/FloatType.js

@@ -8,9 +8,11 @@ export const FloatType = (options = {}) => ({
 });
 export { FloatType as Float };
 export const isFloatType = (node) => node.kind === NodeKind.FloatType;
-export const validateFloatType = (_helpers, type, value) => {
+export const validateFloatType = (helpers, type, value) => {
     if (typeof value !== "number") {
-        return [TypeError(`expected a floating-point number, but got ${json(value)}`)];
+        return [
+            TypeError(`expected a floating-point number, but got ${json(value, helpers.useStyling)}`),
+        ];
     }
     return validateNumberConstraints(type, value);
 };

package/dist/src/node/schema/types/primitives/IntegerType.js

@@ -12,9 +12,9 @@ export const IntegerType = (options = {}) => ({
 });
 export { IntegerType as Integer };
 export const isIntegerType = (node) => node.kind === NodeKind.IntegerType;
-export const validateIntegerType = (_helpers, type, value) => {
+export const validateIntegerType = (helpers, type, value) => {
     if (typeof value !== "number" || !Number.isInteger(value)) {
-        return [TypeError(`expected an integer, but got ${json(value)}`)];
+        return [TypeError(`expected an integer, but got ${json(value, helpers.useStyling)}`)];
     }
     return validateNumberConstraints(type, value);
 };

package/dist/src/node/schema/types/primitives/StringType.js

@@ -8,9 +8,9 @@ export const StringType = (options = {}) => ({
 });
 export { StringType as String };
 export const isStringType = (node) => node.kind === NodeKind.StringType;
-export const validateStringType = (_helpers, type, value) => {
+export const validateStringType = (helpers, type, value) => {
     if (typeof value !== "string") {
-        return [TypeError(`expected a string, but got ${json(value)}`)];
+        return [TypeError(`expected a string, but got ${json(value, helpers.useStyling)}`)];
     }
     return validateStringConstraints(type, value);
 };

package/dist/src/node/schema/types/references/NestedEntityMapType.js

@@ -27,9 +27,9 @@ export const isNestedEntityMapType = (node) => node.kind === NodeKind.NestedEnti
 export const getNestedDeclarationsInNestedEntityMapType = (addedDecls, type) => getNestedDeclarationsInObjectType(addedDecls.includes(type.secondaryEntity) ? addedDecls : [type.secondaryEntity, ...addedDecls], type.type.value);
 export const validateNestedEntityMapType = (helpers, type, value) => {
     if (typeof value !== "object" || value === null || Array.isArray(value)) {
-        return [TypeError(`expected an object, but got ${json(value)}`)];
+        return [TypeError(`expected an object, but got ${json(value, helpers.useStyling)}`)];
     }
-    return parallelizeErrors(Object.keys(value).map(key => wrapErrorsIfAny(`at nested entity map ${entity(`"${type.name}"`)} at key ${keyColor(`"${key}"`)}`, validateObjectType(helpers, type.type.value, value[key]).concat(helpers.checkReferentialIntegrity({
+    return parallelizeErrors(Object.keys(value).map(key => wrapErrorsIfAny(`at nested entity map ${entity(`"${type.name}"`, helpers.useStyling)} at key ${keyColor(`"${key}"`, helpers.useStyling)}`, validateObjectType(helpers, type.type.value, value[key]).concat(helpers.checkReferentialIntegrity({
         name: type.secondaryEntity.name,
         value: key,
     })))));

package/dist/src/node/server/api/instanceOperations.js

@@ -14,7 +14,7 @@ export const createInstance = async (locals, entityName, instance, idQueryParam)
     if (entity === undefined) {
         return error([400, "Entity not found"]);
     }
-    const validationErrors = validateEntityDecl(createValidators(locals.instancesByEntityName), entity, instance);
+    const validationErrors = validateEntityDecl(createValidators(locals.instancesByEntityName, false), entity, instance);
     if (validationErrors.length > 0) {
         return error([400, validationErrors.map(getErrorMessageForDisplay).join("\n\n")]);
     }
@@ -54,7 +54,7 @@ export const updateInstance = async (locals, entityName, instanceId, instance) =
     if (entity === undefined) {
         return error([400, "Entity not found"]);
     }
-    const validationErrors = validateEntityDecl(createValidators(locals.instancesByEntityName), entity, instance);
+    const validationErrors = validateEntityDecl(createValidators(locals.instancesByEntityName, false), entity, instance);
     if (validationErrors.length > 0) {
         return error([400, validationErrors.map(getErrorMessageForDisplay).join("\n\n")]);
     }

package/dist/src/node/utils/errorFormatting.d.ts

@@ -1,3 +1,3 @@
-export declare const json: (value: unknown) => string;
-export declare const key: (str: string) => string;
-export declare const entity: (str: string) => string;
+export declare const json: (value: unknown, useStyling: boolean) => string;
+export declare const key: (str: string, useStyling: boolean) => string;
+export declare const entity: (str: string, useStyling: boolean) => string;

package/dist/src/node/utils/errorFormatting.js

@@ -1,4 +1,6 @@
 import { styleText } from "node:util";
-export const json = (value) => styleText("blue", JSON.stringify(value, undefined, 2));
-export const key = (str) => styleText(["yellow", "bold"], str);
-export const entity = (str) => styleText("green", str);
+export const json = (value, useStyling) => useStyling
+    ? styleText("blue", JSON.stringify(value, undefined, 2))
+    : JSON.stringify(value, undefined, 2);
+export const key = (str, useStyling) => useStyling ? styleText(["yellow", "bold"], str) : str;
+export const entity = (str, useStyling) => useStyling ? styleText("green", str) : str;

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

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

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

@@ -1,15 +1,19 @@
-import { jsxs as _jsxs, jsx as _jsx } from "preact/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
 import { removeAt } from "../../../shared/utils/array.js";
 import { validateArrayConstraints } from "../../../shared/validation/array.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 ArrayTypeInput = ({ type, value, instanceNamesByEntity, getDeclFromDeclName, onChange, }) => {
+export const ArrayTypeInput = ({ type, path, value, instanceNamesByEntity, getDeclFromDeclName, onChange, }) => {
+    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: () => {
                                         onChange(removeAt(value, i));
-                                    }, disabled: type.minItems !== undefined && value.length <= type.minItems, children: ["Delete Item #", i + 1] })] })), _jsx(TypeInput, { type: type.items, value: item, instanceNamesByEntity: instanceNamesByEntity, getDeclFromDeclName: getDeclFromDeclName, onChange: newItem => {
+                                    }, 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 => {
                                 onChange(value.with(i, newItem));
                             } })] }, i))) })), isTuple ? null : (_jsx("div", { class: "add-item-container", children: _jsxs("button", { onClick: () => {
                         onChange([...value, createTypeSkeleton(getDeclFromDeclName, type.items)]);

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

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

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

@@ -1,5 +1,9 @@
 import { jsx as _jsx } from "preact/jsx-runtime";
+import { MismatchingTypeError } from "./utils/MismatchingTypeError.js";
 export const BooleanTypeInput = ({ value, 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);
             } }) }));

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

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

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

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

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

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

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

@@ -5,7 +5,7 @@ import { createTypeSkeleton } from "../../utils/typeSkeleton.js";
 import { Select } from "../Select.js";
 import { TypeInput } from "./TypeInput.js";
 import { MismatchingTypeError } from "./utils/MismatchingTypeError.js";
-export const EnumTypeInput = ({ type, value, instanceNamesByEntity, getDeclFromDeclName, onChange, }) => {
+export const EnumTypeInput = ({ type, path, value, instanceNamesByEntity, getDeclFromDeclName, onChange, }) => {
     if (typeof value !== "object" ||
         value === null ||
         Array.isArray(value) ||
@@ -29,7 +29,7 @@ export const EnumTypeInput = ({ type, value, instanceNamesByEntity, getDeclFromD
                             [event.currentTarget.value]: createTypeSkeleton(getDeclFromDeclName, caseMember.type),
                         });
                     }
-                }, children: enumValues.map(enumValue => (_jsx("option", { value: enumValue, selected: enumValue === activeEnumCase, children: toTitleCase(enumValue) }, enumValue))) }), caseMember?.type == null ? null : (_jsx("div", { className: "associated-type", children: _jsx(TypeInput, { type: caseMember.type, value: value[activeEnumCase], instanceNamesByEntity: instanceNamesByEntity, getDeclFromDeclName: getDeclFromDeclName, onChange: newValue => {
+                }, children: enumValues.map(enumValue => (_jsx("option", { value: enumValue, selected: enumValue === activeEnumCase, children: toTitleCase(enumValue) }, enumValue))) }), caseMember?.type == null ? null : (_jsx("div", { className: "associated-type", children: _jsx(TypeInput, { type: caseMember.type, path: path === undefined ? `{${activeEnumCase}}` : `${path}.{${activeEnumCase}}`, value: value[activeEnumCase], instanceNamesByEntity: instanceNamesByEntity, getDeclFromDeclName: getDeclFromDeclName, onChange: newValue => {
                         onChange({
                             [discriminatorKey]: activeEnumCase,
                             [activeEnumCase]: newValue,

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

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

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

@@ -5,8 +5,12 @@ 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()
@@ -20,7 +24,7 @@ export const NestedEntityMapTypeInput = ({ type, value, instanceNamesByEntity, g
                                                 // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
                                                 delete newObj[key];
                                                 onChange(newObj);
-                                            }, children: ["Delete ", name] }) })] }), _jsx(TypeInput, { type: type.type, value: item, instanceNamesByEntity: instanceNamesByEntity, getDeclFromDeclName: getDeclFromDeclName, onChange: newItem => {
+                                            }, 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 => {

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,10 +5,15 @@ 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 ? (_jsxs("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),
@@ -18,7 +23,7 @@ export const ObjectTypeInput = ({ type, value, instanceNamesByEntity, getDeclFro
                                         // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
                                         delete newObj[key];
                                         onChange(newObj);
-                                    }, children: ["Remove ", toTitleCase(key)] }))] }), 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,7 +1,11 @@
 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, undefined, { numeric: true }));

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,8 +1,12 @@
 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("div", { class: "textarea-grow-wrap", "data-value": value, children: _jsx("textarea", { value: value, minLength: minLength, maxLength: maxLength, onInput: event => {

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

@@ -4,6 +4,7 @@ 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;

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

@@ -1,6 +1,5 @@
 import { jsx as _jsx } from "preact/jsx-runtime";
 import { memo } from "preact/compat";
-import { deepEqual } from "../../../shared/utils/compare.js";
 import { assertExhaustive } from "../../../shared/utils/typeSafety.js";
 import { ArrayTypeInput } from "./ArrayTypeInput.js";
 import { BooleanTypeInput } from "./BooleanTypeInput.js";
@@ -14,81 +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";
-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) => deepEqual(prevProps.value, nextProps.value));
+const MemoizedTypeInput = memo(TypeInput, (prevProps, nextProps) => prevProps.value === nextProps.value && prevProps.onChange === nextProps.onChange);
 export { MemoizedTypeInput as TypeInput };

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

@@ -12,6 +12,7 @@ import { useEntityFromRoute } from "../hooks/useEntityFromRoute.js";
 import { useInstanceNamesByEntity } from "../hooks/useInstanceNamesByEntity.js";
 import { useGetDeclFromDeclName } from "../hooks/useSecondaryDeclarations.js";
 import { createTypeSkeleton } from "../utils/typeSkeleton.js";
+import { homeTitle } from "./Home.js";
 import { NotFound } from "./NotFound.js";
 export const CreateInstance = () => {
     const { params: { name }, } = useRoute();
@@ -73,11 +74,11 @@ export const CreateInstance = () => {
     const instanceName = getSerializedDisplayNameFromEntityInstance(entity, instance, defaultName);
     const idErrors = isLocaleEntity ? validateLocaleIdentifier(customId) : [];
     return (_jsxs(Layout, { breadcrumbs: [
-            { url: "/", label: "Home" },
+            { url: "/", label: homeTitle },
             { 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", { 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

@@ -8,6 +8,7 @@ import { Layout } from "../components/Layout.js";
 import { useAPIResource } from "../hooks/useAPIResource.js";
 import { useMappedAPIResource } from "../hooks/useMappedAPIResource.js";
 import { Markdown } from "../utils/Markdown.js";
+import { homeTitle } from "./Home.js";
 import { NotFound } from "./NotFound.js";
 const mapInstances = (data) => data.instances;
 export const Entity = () => {
@@ -37,7 +38,7 @@ export const Entity = () => {
         ? 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 => {
+    return (_jsxs(Layout, { breadcrumbs: [{ url: "/", label: homeTitle }], 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);

package/dist/src/web/routes/Home.d.ts

@@ -1,2 +1,3 @@
 import type { FunctionalComponent } from "preact";
+export declare const homeTitle = "Entities";
 export declare const Home: FunctionalComponent;

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

@@ -6,10 +6,11 @@ import { Layout } from "../components/Layout.js";
 import { useMappedAPIResource } from "../hooks/useMappedAPIResource.js";
 import { Markdown } from "../utils/Markdown.js";
 const mapEntities = (data) => data.declarations.sort((a, b) => a.declaration.name.localeCompare(b.declaration.name));
+export const homeTitle = "Entities";
 export const Home = () => {
     const [entities] = useMappedAPIResource(getAllEntities, mapEntities);
     useEffect(() => {
-        document.title = "Entities — TSONDB";
+        document.title = homeTitle + " — TSONDB";
     }, []);
     const [searchText, setSearchText] = useState("");
     const lowerSearchText = searchText.toLowerCase().replaceAll(" ", "");
@@ -17,7 +18,7 @@ export const Home = () => {
         ? 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 => {
+    return (_jsxs(Layout, { breadcrumbs: [], children: [_jsx("h1", { children: homeTitle }), _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);

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

@@ -9,6 +9,7 @@ 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();
@@ -19,7 +20,7 @@ export const Instance = () => {
     const [originalInstance, setOriginalInstance] = useState();
     const { route } = useLocation();
     useEffect(() => {
-        if (entityFromRoute && instance && id) {
+        if (entityFromRoute?.entity && instance?.content && id) {
             const defaultName = id;
             const instanceName = getSerializedDisplayNameFromEntityInstance(entityFromRoute.entity, instance.content, defaultName);
             const entityName = entityFromRoute.entity.name;
@@ -28,7 +29,7 @@ export const Instance = () => {
         else {
             document.title = "Not found — TSONDB";
         }
-    }, [entityFromRoute, id, instance]);
+    }, [entityFromRoute?.entity, id, instance?.content]);
     useEffect(() => {
         if (name && id) {
             getInstanceByEntityNameAndId(name, id)
@@ -68,14 +69,14 @@ export const Instance = () => {
         !instanceNamesByEntity ||
         !declsLoaded) {
         return (_jsxs(Layout, { breadcrumbs: [
-                { url: "/", label: "Home" },
+                { url: "/", label: homeTitle },
                 { url: `/entities/${name}`, label: name },
             ], children: [_jsx("h1", { children: id }), _jsx("p", { className: "loading", children: "Loading \u2026" })] }));
     }
     const defaultName = id;
     const instanceName = getSerializedDisplayNameFromEntityInstance(entityFromRoute.entity, instance.content, defaultName);
     return (_jsxs(Layout, { breadcrumbs: [
-            { url: "/", label: "Home" },
+            { url: "/", label: homeTitle },
             { url: `/entities/${name}`, label: entityFromRoute.entity.name },
         ], 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?")) {
@@ -89,5 +90,5 @@ export const Instance = () => {
                                     }
                                 });
                             }
-                        }, children: "Delete" })] }), _jsxs("form", { onSubmit: handleSubmit, children: [_jsx(TypeInput, { type: entityFromRoute.entity.type, value: instance.content, instanceNamesByEntity: instanceNamesByEntity, getDeclFromDeclName: getDeclFromDeclName, onChange: handleOnChange }), _jsx("div", { class: "form-footer btns", children: _jsx("button", { type: "submit", name: "save", class: "primary", children: "Save" }) })] })] }));
+                        }, children: "Delete" })] }), _jsxs("form", { onSubmit: handleSubmit, children: [_jsx(TypeInput, { type: entityFromRoute.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" }) })] })] }));
 };

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

@@ -1,9 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
 import { useEffect } from "preact/hooks";
 import { Layout } from "../components/Layout.js";
+import { homeTitle } from "./Home.js";
 export const NotFound = () => {
     useEffect(() => {
         document.title = "Not found — TSONDB";
     }, []);
-    return (_jsxs(Layout, { breadcrumbs: [{ url: "/", label: "Home" }], children: [_jsx("h1", { children: "404 Not Found" }), _jsx("p", { children: "The page you are looking for does not exist." })] }));
+    return (_jsxs(Layout, { breadcrumbs: [{ url: "/", label: homeTitle }], children: [_jsx("h1", { children: "404 Not Found" }), _jsx("p", { children: "The page you are looking for does not exist." })] }));
 };

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

@@ -0,0 +1 @@
+export declare const printJson: (data: unknown) => string;

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

@@ -0,0 +1,5 @@
+export const printJson = (data) => JSON.stringify(data, undefined, 2)
+    .replace(/\n *([}\]],?)/g, " $1")
+    .replace(/((?:^|\n *)[{[])\n +/g, "$1 ")
+    .replace(/"(.+?)":/g, '<span style="color: darkorange">$1</span>:')
+    .replace(/ "(.*?)"([ ,])/g, ' <span style="color: darkgreen">"$1"</span>$2');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tsondb",
-  "version": "0.5.10",
+  "version": "0.5.13",
   "description": "",
   "license": "ISC",
   "author": "Lukas Obermann",

package/public/css/styles.css

@@ -110,6 +110,10 @@ header {
   grid-area: header;
 }
 
+header nav {
+  min-height: 1.4rem;
+}
+
 header nav ol {
   list-style-type: " ";
   display: flex;
@@ -292,13 +296,13 @@ input[type="checkbox"]:checked {
 input[type="checkbox"]:checked::before {
   content: "";
   display: block;
-  border-width: 0 0 1px 1px;
+  border-width: 0 0 0.125rem 0.125rem;
   border-style: solid;
-  width: 0.6rem;
-  height: 0.3rem;
+  width: 0.8rem;
+  height: 0.4rem;
   border-color: var(--background);
   transform: rotate(-45deg);
-  margin: calc(-0.2rem - 1px) 0 0 calc(-0.275rem - 1px);
+  margin: calc(-0.325rem) 0 0 calc(-0.4rem);
 }
 
 .select-wrapper {