@resistdesign/voltra 0.0.0-alpha.0 → 1.2.0

package/app/components/FormGen/TypeStructureComponent.js

@@ -0,0 +1,223 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TypeStructureComponent = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const TypeUtils_1 = require("../../../common/TypeParsing/TypeUtils");
+const Input_1 = require("./Input");
+const Form_1 = require("./Form");
+const HashMatrix_1 = __importDefault(require("./ValueProcessing/HashMatrix"));
+const Layout_1 = require("./Layout");
+const styled_components_1 = __importStar(require("styled-components"));
+const HelperTypes_1 = require("./HelperTypes");
+const LayoutForm = (0, styled_components_1.default)(Form_1.Form) `
+  ${(p) => (0, Layout_1.getLayoutContainerCSS)(p)}
+`;
+const OpenFormButtonBase = styled_components_1.default.button `
+  ${(p) => p.$gridArea
+    ? (0, styled_components_1.css) `
+          grid-area: ${p.$gridArea};
+        `
+    : ""}
+`;
+const OpenFormButton = ({ disabled = false, name, label, onOpenForm, }) => {
+    const onOpenFormInternal = (0, react_1.useCallback)(() => {
+        onOpenForm(name);
+    }, [name, onOpenForm]);
+    return ((0, jsx_runtime_1.jsxs)(OpenFormButtonBase, { disabled: disabled, type: "button", "$gridArea": name, onClick: onOpenFormInternal, children: ["Edit ", label] }));
+};
+/**
+ * Automatically generate a complex, nested set of form views from a type structure map.
+ *
+ * @see {@link convertTypeScriptToTypeStructureMap}
+ * */
+const TypeStructureComponent = ({ typeStructureMap, typeStructure, value, onChange, onNavigateToPath, onNavigateBack, navigationPathPrefix = [], topLevel = false, isEntryPoint = false, }) => {
+    const baseTypeStructure = (0, react_1.useMemo)(() => {
+        const { type: typeStructureType = "" } = typeStructure;
+        const topLevelTypeStructure = (0, TypeUtils_1.getTypeStructureByName)(typeStructureType, typeStructureMap);
+        return Object.assign(Object.assign({}, topLevelTypeStructure), typeStructure);
+    }, [typeStructureMap, typeStructure]);
+    const isForm = (0, react_1.useMemo)(() => {
+        const { content = [] } = baseTypeStructure;
+        return content.length > 0;
+    }, [baseTypeStructure]);
+    const cleanTypeStructure = (0, react_1.useMemo)(() => {
+        const { contentNames } = baseTypeStructure;
+        return (0, TypeUtils_1.getTypeStructureWithFilteredContent)(contentNames, baseTypeStructure);
+    }, [baseTypeStructure]);
+    const { name: typeStructureName = "", type: typeStructureType, content: typeStructureContent = [], readonly = false, } = cleanTypeStructure;
+    const { [TypeUtils_1.TAG_TYPES.label]: typeStructureLabel = undefined, [TypeUtils_1.TAG_TYPES.layout]: typeStructureLayout = undefined, [TypeUtils_1.TAG_TYPES.options]: typeStructureOptionsString = undefined, [TypeUtils_1.TAG_TYPES.optionsType]: typeStructureOptionsTypeName = undefined, [TypeUtils_1.TAG_TYPES.allowCustomValue]: typeStructureAllowCustomValue = undefined, } = (0, react_1.useMemo)(() => (0, TypeUtils_1.getTagValues)([
+        TypeUtils_1.TAG_TYPES.label,
+        TypeUtils_1.TAG_TYPES.inline,
+        TypeUtils_1.TAG_TYPES.layout,
+        TypeUtils_1.TAG_TYPES.options,
+        TypeUtils_1.TAG_TYPES.optionsType,
+        TypeUtils_1.TAG_TYPES.allowCustomValue,
+    ], cleanTypeStructure), [cleanTypeStructure]);
+    const typeStructureOptions = (0, react_1.useMemo)(() => {
+        if (typeof typeStructureOptionsString === "string") {
+            return (typeStructureOptionsString
+                .split("\n")
+                .map((l) => l.split(","))
+                // @ts-ignore
+                .flat()
+                .map((l) => l.trim()));
+        }
+        else {
+            return typeStructureOptionsTypeName &&
+                typeof typeStructureOptionsTypeName === "string"
+                ? (0, TypeUtils_1.getTypeStructureByName)(typeStructureOptionsTypeName, typeStructureMap)
+                : undefined;
+        }
+    }, [
+        typeStructureOptionsString,
+        typeStructureOptionsTypeName,
+        typeStructureMap,
+    ]);
+    const hasTypeStructureLayout = (0, react_1.useMemo)(() => typeof typeStructureLayout === "string", [typeStructureLayout]);
+    const [internalValueBase, setInternalValue] = (0, react_1.useState)(value);
+    const valueLastChanged = (0, react_1.useMemo)(() => new Date().getTime(), [value]);
+    const internalValueLastChanged = (0, react_1.useMemo)(() => new Date().getTime(), [internalValueBase]);
+    const internalValue = (0, react_1.useMemo)(() => valueLastChanged > internalValueLastChanged ? value : internalValueBase, [value, internalValueBase, valueLastChanged, internalValueLastChanged]);
+    const hasChanges = (0, react_1.useMemo)(() => internalValue !== value, [internalValue, value]);
+    const submissionTypeName = (0, react_1.useMemo)(() => {
+        return topLevel ? "" : typeStructureName;
+    }, [topLevel, typeStructureName]);
+    const onFormSubmit = (0, react_1.useCallback)(() => {
+        onChange(submissionTypeName, internalValue);
+        if (onNavigateBack) {
+            onNavigateBack();
+        }
+    }, [topLevel, submissionTypeName, internalValue, onNavigateBack]);
+    const onResetForm = (0, react_1.useCallback)(() => {
+        setInternalValue(value);
+    }, [value]);
+    const onCancelForm = (0, react_1.useCallback)(() => {
+        if (onNavigateBack) {
+            onNavigateBack();
+        }
+    }, [onNavigateBack]);
+    const onPrimitiveChangeInternal = (0, react_1.useCallback)((_n, v) => {
+        setInternalValue(v);
+    }, [setInternalValue]);
+    const onPropertyChange = (0, react_1.useCallback)((n, v) => {
+        const newValue = Object.assign(Object.assign({}, internalValue), { [n]: v });
+        setInternalValue(newValue);
+        if (!topLevel || isEntryPoint) {
+            onChange(submissionTypeName, newValue);
+        }
+    }, [
+        internalValue,
+        setInternalValue,
+        topLevel,
+        isEntryPoint,
+        onChange,
+        submissionTypeName,
+    ]);
+    const onNavigateToPathInternal = (0, react_1.useCallback)((path = []) => {
+        if (onNavigateToPath) {
+            const targetValue = new HashMatrix_1.default({
+                hashMatrix: internalValue,
+            }).getPath(path);
+            const targetTypeStructure = (0, TypeUtils_1.getTypeStructureByPath)(path, cleanTypeStructure, typeStructureMap);
+            const { multiple: ttsMultiple } = targetTypeStructure;
+            const targetLabel = (0, TypeUtils_1.getTagValue)(TypeUtils_1.TAG_TYPES.label, targetTypeStructure);
+            const cleanTargetLabel = typeof targetLabel === "string" ? targetLabel : "";
+            onNavigateToPath({
+                label: ttsMultiple
+                    ? cleanTargetLabel
+                    : (0, TypeUtils_1.getValueLabel)(targetValue, targetTypeStructure, typeStructureMap),
+                path: [...navigationPathPrefix, ...path],
+            });
+        }
+    }, [
+        onNavigateToPath,
+        navigationPathPrefix,
+        internalValue,
+        cleanTypeStructure,
+        typeStructureMap,
+    ]);
+    const onOpenForm = (0, react_1.useCallback)((name) => {
+        onNavigateToPathInternal([name]);
+    }, [onNavigateToPathInternal]);
+    const FormComp = topLevel ? LayoutForm : Layout_1.LayoutBox;
+    const formProps = (0, react_1.useMemo)(() => {
+        return Object.assign(Object.assign({}, (topLevel ? { onSubmit: onFormSubmit } : {})), { $gridArea: !topLevel ? typeStructureName : undefined });
+    }, [topLevel, onFormSubmit, topLevel, typeStructureName]);
+    const layoutBoxProps = (0, react_1.useMemo)(() => {
+        return {
+            $isGrid: hasTypeStructureLayout,
+            $gridTemplate: (0, Layout_1.getTypeStructureLayoutGridTemplate)(typeStructureLayout, topLevel),
+        };
+    }, [hasTypeStructureLayout, typeStructureLayout, topLevel]);
+    const controls = (0, react_1.useMemo)(() => {
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [topLevel && !isEntryPoint && hasChanges ? ((0, jsx_runtime_1.jsxs)(Layout_1.LayoutControls, { children: [(0, jsx_runtime_1.jsx)("button", { style: {
+                                flex: "1 0 auto",
+                                width: "auto",
+                            }, type: "button", onClick: onCancelForm, children: "Cancel" }), (0, jsx_runtime_1.jsx)("button", { style: {
+                                flex: "1 0 auto",
+                                width: "auto",
+                            }, type: "button", onClick: onResetForm, children: "Reset" }), (0, jsx_runtime_1.jsx)("button", { style: {
+                                flex: "1 0 auto",
+                                width: "auto",
+                            }, type: "submit", children: "Submit" })] })) : undefined, topLevel && !isEntryPoint && !hasChanges ? ((0, jsx_runtime_1.jsx)(Layout_1.LayoutControls, { children: (0, jsx_runtime_1.jsx)("button", { style: {
+                            flex: "1 0 auto",
+                            width: "auto",
+                        }, type: "button", onClick: onCancelForm, children: "Done" }) })) : undefined] }));
+    }, [
+        topLevel,
+        isEntryPoint,
+        hasChanges,
+        onCancelForm,
+        onResetForm,
+        onFormSubmit,
+    ]);
+    if (isForm) {
+        return ((0, jsx_runtime_1.jsxs)(FormComp, Object.assign({}, formProps, { "$allowShrink": topLevel, children: [(0, jsx_runtime_1.jsx)(Layout_1.LayoutBox, { "$allowShrink": topLevel, children: (0, jsx_runtime_1.jsx)(Layout_1.LayoutBox, Object.assign({}, layoutBoxProps, { "$allowShrink": false, children: typeStructureContent.map((tS) => {
+                            const { name: tSName, literal: tSLiteral = false, type: tSType, multiple: tSMultiple, } = tS;
+                            const { [TypeUtils_1.TAG_TYPES.inline]: tSInline, [TypeUtils_1.TAG_TYPES.label]: tSLabel, } = (0, TypeUtils_1.getTagValues)([TypeUtils_1.TAG_TYPES.inline, TypeUtils_1.TAG_TYPES.label], tS);
+                            const inputLabel = typeof tSLabel === "string" ? tSLabel : tSName;
+                            const tSTypeIsTypeStructure = typeof tSType === "string" && !!typeStructureMap[tSType];
+                            const useInputType = !tSTypeIsTypeStructure;
+                            const isHelperType = tSType in HelperTypes_1.DataTypeMap;
+                            if (!tSMultiple &&
+                                (isHelperType || tSLiteral || tSInline || useInputType)) {
+                                return ((0, jsx_runtime_1.jsx)(exports.TypeStructureComponent, { typeStructureMap: typeStructureMap, typeStructure: tS, value: internalValue === null || internalValue === void 0 ? void 0 : internalValue[tSName], onChange: onPropertyChange, onNavigateToPath: onNavigateToPath, navigationPathPrefix: [tSName] }, tSName));
+                            }
+                            else {
+                                return ((0, jsx_runtime_1.jsx)(OpenFormButton, { disabled: hasChanges, name: tSName, label: inputLabel, onOpenForm: onOpenForm }, tSName));
+                            }
+                        }) })) }), controls] })));
+    }
+    else {
+        const inputComp = ((0, jsx_runtime_1.jsx)(Input_1.Input, { name: typeStructureName, label: `${typeStructureLabel !== null && typeStructureLabel !== void 0 ? typeStructureLabel : ""}`, value: topLevel ? internalValue : value, type: typeStructureType, onChange: topLevel ? onPrimitiveChangeInternal : onChange, options: typeStructureOptions, allowCustomValue: !!typeStructureAllowCustomValue, readonly: readonly }, typeStructureName));
+        return topLevel ? ((0, jsx_runtime_1.jsxs)(LayoutForm, { "$allowShrink": false, onSubmit: onFormSubmit, children: [inputComp, controls] })) : (inputComp);
+    }
+};
+exports.TypeStructureComponent = TypeStructureComponent;

package/app/components/FormGen/ValueProcessing/HashMatrix.d.ts

@@ -0,0 +1,50 @@
+export type HashMatrixPathPartType = string | string[];
+export type HashMatrixConfig = {
+    name?: string;
+    targetPath?: string | string[];
+    hashMatrix?: any | Record<any, any> | HashMatrix;
+    pathDelimiter?: string;
+    debounceInvalidationMS?: number;
+    preventInvalidation?: boolean;
+};
+export default class HashMatrix {
+    static DEFAULT_NAME: string;
+    static DEFAULT_PATH_DELIMITER: string;
+    static keyIsNumeric(key: string | number): boolean;
+    private _changeHandlerMap;
+    private _errorHandlerMap;
+    name?: string;
+    targetPath?: string | string[];
+    hashMatrix?: any | Record<any, any> | HashMatrix;
+    pathDelimiter?: string;
+    debounceInvalidationMS?: number;
+    preventInvalidation?: boolean;
+    constructor(config?: HashMatrixConfig);
+    private _setDefaultName;
+    getChangeHandlerList(path: HashMatrixPathPartType): Function[];
+    setChangeHandlerList(path: HashMatrixPathPartType, handlerList?: Function[]): void;
+    addChangeHandler(path: HashMatrixPathPartType | undefined, handler: Function): Function | void;
+    removeChangeHandler(path: HashMatrixPathPartType | undefined, handler: Function): void;
+    onChange(path: HashMatrixPathPartType, causePath: string): void;
+    getErrorHandlerList(path: HashMatrixPathPartType): Function[];
+    setErrorHandlerList(path: HashMatrixPathPartType, handlerList?: Function[]): void;
+    addErrorHandler(path: HashMatrixPathPartType | undefined, handler: Function): Function | void;
+    removeErrorHandler(path: HashMatrixPathPartType | undefined, handler: Function): void;
+    onError(error: any, path: HashMatrixPathPartType, causePath: string): void;
+    getBasePathArray(path?: HashMatrixPathPartType): string[];
+    getPathArray(path?: HashMatrixPathPartType, prefixPath?: HashMatrixPathPartType): string[];
+    getPathString(path?: HashMatrixPathPartType, prefixPath?: HashMatrixPathPartType): string;
+    dispatchChanges(path?: string | string[]): void;
+    dispatchErrors(error: any, path: HashMatrixPathPartType): void;
+    private _setErrorInternal;
+    setError(path: HashMatrixPathPartType, error: any): void;
+    private _getPathInternal;
+    getPath(path?: HashMatrixPathPartType): any;
+    private _setPathInternal;
+    setPath(path: HashMatrixPathPartType, value: any): void;
+    invalidatePath(path: HashMatrixPathPartType): void;
+    getValue(): any;
+    setValue(value: any): void;
+    private _invalidationDebounceTimeout?;
+    invalidate(): void;
+}

package/app/components/FormGen/ValueProcessing/HashMatrix.js

@@ -0,0 +1,268 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const INVALID = {};
+class HashMatrix {
+    static keyIsNumeric(key) {
+        let numeric = false;
+        try {
+            numeric = Number.isInteger(parseInt(`${key}`, 10));
+        }
+        catch (error) {
+            // Ignore.
+        }
+        return numeric;
+    }
+    constructor(config = {}) {
+        this._changeHandlerMap = {};
+        this._errorHandlerMap = {};
+        Object.assign(this, config);
+        if (typeof this.pathDelimiter !== 'string') {
+            this.pathDelimiter = HashMatrix.DEFAULT_PATH_DELIMITER;
+        }
+        this._setDefaultName();
+    }
+    _setDefaultName() {
+        if (!this.hasOwnProperty('name')) {
+            if (typeof this.constructor.DEFAULT_NAME === 'string') {
+                this.name = this.constructor.DEFAULT_NAME;
+            }
+            else {
+                this.name = HashMatrix.DEFAULT_NAME;
+            }
+        }
+    }
+    getChangeHandlerList(path) {
+        const pathString = this.getPathString(path);
+        return this._changeHandlerMap[pathString] || [];
+    }
+    setChangeHandlerList(path, handlerList = []) {
+        const pathString = this.getPathString(path);
+        this._changeHandlerMap[pathString] = handlerList;
+    }
+    addChangeHandler(path = '', handler) {
+        if (this.hashMatrix instanceof HashMatrix) {
+            return this.hashMatrix.addChangeHandler(this.getPathArray(path, this.targetPath), handler);
+        }
+        if (!!handler) {
+            const handlerList = this.getChangeHandlerList(path);
+            if (handlerList.indexOf(handler) === -1) {
+                handlerList.push(handler);
+                this.setChangeHandlerList(path, handlerList);
+                return () => this.removeChangeHandler(path, handler);
+            }
+        }
+    }
+    removeChangeHandler(path = '', handler) {
+        if (this.hashMatrix instanceof HashMatrix) {
+            return this.hashMatrix.removeChangeHandler(this.getPathArray(path, this.targetPath), handler);
+        }
+        const handlerList = this.getChangeHandlerList(path);
+        if (handlerList.indexOf(handler) !== -1) {
+            const newHandlerList = [];
+            handlerList.forEach((h) => {
+                if (h !== handler) {
+                    newHandlerList.push(h);
+                }
+            });
+            this.setChangeHandlerList(path, newHandlerList);
+        }
+    }
+    onChange(path, causePath) {
+        const handlerList = this.getChangeHandlerList(path);
+        handlerList.forEach((h) => h(path, causePath, this));
+    }
+    getErrorHandlerList(path) {
+        const pathString = this.getPathString(path);
+        return this._errorHandlerMap[pathString] || [];
+    }
+    setErrorHandlerList(path, handlerList = []) {
+        const pathString = this.getPathString(path);
+        this._errorHandlerMap[pathString] = handlerList;
+    }
+    addErrorHandler(path = '', handler) {
+        if (this.hashMatrix instanceof HashMatrix) {
+            return this.hashMatrix.addErrorHandler(this.getPathArray(path, this.targetPath), handler);
+        }
+        if (!!handler) {
+            const handlerList = this.getErrorHandlerList(path);
+            if (handlerList.indexOf(handler) === -1) {
+                handlerList.push(handler);
+                this.setErrorHandlerList(path, handlerList);
+                return () => this.removeErrorHandler(path, handler);
+            }
+        }
+    }
+    removeErrorHandler(path = '', handler) {
+        if (this.hashMatrix instanceof HashMatrix) {
+            return this.hashMatrix.removeErrorHandler(this.getPathArray(path, this.targetPath), handler);
+        }
+        const handlerList = this.getErrorHandlerList(path);
+        if (handlerList.indexOf(handler) !== -1) {
+            const newHandlerList = [];
+            handlerList.forEach((h) => {
+                if (h !== handler) {
+                    newHandlerList.push(h);
+                }
+            });
+            this.setErrorHandlerList(path, newHandlerList);
+        }
+    }
+    onError(error, path, causePath) {
+        const handlerList = this.getErrorHandlerList(path);
+        handlerList.forEach((h) => h(error, path, causePath, this));
+    }
+    getBasePathArray(path = '') {
+        return path instanceof Array ? [...path] : path === '' ? [] : `${path}`.split(this.pathDelimiter);
+    }
+    getPathArray(path = '', prefixPath = '') {
+        const prefixPathArray = this.getBasePathArray(prefixPath);
+        const pathArray = this.getBasePathArray(path);
+        return [...prefixPathArray, ...pathArray];
+    }
+    getPathString(path, prefixPath) {
+        return this.getPathArray(path, prefixPath).join(this.pathDelimiter);
+    }
+    dispatchChanges(path) {
+        const pathArray = this.getPathArray(path);
+        const pathString = this.getPathString(pathArray);
+        // Notify lifecycle listeners of changes all the way up the path.
+        if (pathArray.length) {
+            const currentPath = [...pathArray];
+            // TRICKY: Start with the deepest path and move up to the most shallow.
+            while (currentPath.length) {
+                this.onChange(
+                // Path as a string.
+                this.getPathString(currentPath), 
+                // The cause path.
+                pathString);
+                currentPath.pop();
+            }
+        }
+        this.onChange('', pathString);
+    }
+    dispatchErrors(error, path) {
+        const pathArray = this.getPathArray(path);
+        const pathString = this.getPathString(pathArray);
+        // Notify lifecycle listeners of errors all the way up the path.
+        if (pathArray.length) {
+            const currentPath = [...pathArray];
+            // TRICKY: Start with the deepest path and move up to the most shallow.
+            while (currentPath.length) {
+                this.onError(
+                // The error.
+                error, 
+                // Path as a string.
+                this.getPathString(currentPath), 
+                // The cause path.
+                pathString);
+                currentPath.pop();
+            }
+        }
+        this.onError(error, '', pathString);
+    }
+    _setErrorInternal(path, error) {
+        if (this.hashMatrix instanceof HashMatrix) {
+            return this.hashMatrix.setError(this.getPathArray(path, this.targetPath), error);
+        }
+        this.dispatchErrors(error, path);
+    }
+    setError(path, error) {
+        return this._setErrorInternal(path, error);
+    }
+    _getPathInternal(path) {
+        if (this.hashMatrix instanceof HashMatrix) {
+            return this.hashMatrix.getPath(this.getPathArray(path, this.targetPath));
+        }
+        const pathArray = this.getPathArray(path);
+        if (pathArray.length) {
+            let value, currentValue = this.hashMatrix, finished = true;
+            for (const part of pathArray) {
+                // Don't fail, just return `undefined`.
+                try {
+                    currentValue = currentValue === null || currentValue === void 0 ? void 0 : currentValue[part];
+                }
+                catch (error) {
+                    finished = false;
+                    break;
+                }
+            }
+            // TRICKY: Don't select the current value if the full path wasn't processed.
+            if (finished) {
+                value = currentValue;
+            }
+            return value;
+        }
+        else {
+            return this.hashMatrix;
+        }
+    }
+    getPath(path) {
+        return this._getPathInternal(path);
+    }
+    _setPathInternal(path, value) {
+        if (this.hashMatrix instanceof HashMatrix) {
+            return this.hashMatrix.setPath(this.getPathArray(path, this.targetPath), value);
+        }
+        const targetValue = value === INVALID ? undefined : value;
+        const pathArray = this.getPathArray(path);
+        // TRICKY: DO NOT set if the value is exactly equal.
+        if (targetValue !== this._getPathInternal(path)) {
+            const newHashMatrix = Object.assign({}, this.hashMatrix);
+            if (pathArray.length) {
+                const lastIndex = pathArray.length - 1;
+                const lastPart = pathArray[lastIndex];
+                let currentValue = newHashMatrix;
+                for (let i = 0; i < lastIndex; i++) {
+                    const part = pathArray[i];
+                    const nextPart = pathArray[i + 1];
+                    // TRICKY: Build out the tree is it's not there.
+                    if (typeof currentValue[part] === 'undefined') {
+                        currentValue[part] = HashMatrix.keyIsNumeric(nextPart) ? [] : {};
+                    }
+                    else if (currentValue[part] instanceof Array) {
+                        currentValue[part] = [...currentValue[part]];
+                    }
+                    else if (currentValue[part] instanceof Object) {
+                        currentValue[part] = Object.assign({}, currentValue[part]);
+                    }
+                    currentValue = currentValue[part];
+                }
+                currentValue[lastPart] = targetValue;
+                this.hashMatrix = newHashMatrix;
+            }
+            else {
+                this.hashMatrix = targetValue;
+            }
+            this.dispatchChanges(pathArray);
+        }
+        else if (value === INVALID) {
+            this.dispatchChanges(pathArray);
+        }
+    }
+    setPath(path, value) {
+        return this._setPathInternal(path, value);
+    }
+    invalidatePath(path) {
+        this.setPath(path, INVALID);
+    }
+    getValue() {
+        return this.getPath([]);
+    }
+    setValue(value) {
+        return this.setPath([], value);
+    }
+    invalidate() {
+        if (!this.preventInvalidation) {
+            if (typeof this.debounceInvalidationMS === 'number') {
+                clearTimeout(this._invalidationDebounceTimeout);
+                this._invalidationDebounceTimeout = setTimeout(() => this.setValue(INVALID), this.debounceInvalidationMS);
+            }
+            else {
+                this.setValue(INVALID);
+            }
+        }
+    }
+}
+HashMatrix.DEFAULT_NAME = 'HashMatrix';
+HashMatrix.DEFAULT_PATH_DELIMITER = '.';
+exports.default = HashMatrix;

package/app/components/FormGen/ValueProcessing/index.d.ts

@@ -0,0 +1 @@
+export * from "./HashMatrix";

package/{src/common/IdGeneration → app/components/FormGen/ValueProcessing}/index.js

@@ -14,4 +14,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./getSimpleId"), exports);
+__exportStar(require("./HashMatrix"), exports);

package/app/components/FormGen/index.d.ts

@@ -0,0 +1,13 @@
+export * as Storage from "./Storage";
+export * as ValueProcessing from "./ValueProcessing";
+export * from "./Application";
+export * from "./Display";
+export * from "./Editor";
+export * from "./Form";
+export * as HelperTypes from "./HelperTypes";
+export * from "./IdUtils";
+export * from "./Input";
+export * from "./Layout";
+export * from "./List";
+export * from "./Navigation";
+export * from "./TypeStructureComponent";

package/app/components/FormGen/index.js

@@ -0,0 +1,42 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HelperTypes = exports.ValueProcessing = exports.Storage = void 0;
+exports.Storage = __importStar(require("./Storage"));
+exports.ValueProcessing = __importStar(require("./ValueProcessing"));
+__exportStar(require("./Application"), exports);
+__exportStar(require("./Display"), exports);
+__exportStar(require("./Editor"), exports);
+__exportStar(require("./Form"), exports);
+exports.HelperTypes = __importStar(require("./HelperTypes"));
+__exportStar(require("./IdUtils"), exports);
+__exportStar(require("./Input"), exports);
+__exportStar(require("./Layout"), exports);
+__exportStar(require("./List"), exports);
+__exportStar(require("./Navigation"), exports);
+__exportStar(require("./TypeStructureComponent"), exports);

package/app/components/MaterialSymbol.d.ts

@@ -0,0 +1,8 @@
+import "material-symbols";
+import { FC, HTMLAttributes, PropsWithChildren } from "react";
+export type MaterialSymbolVariant = "outlined" | "rounded" | "sharp";
+export type MaterialSymbolProps = PropsWithChildren<HTMLAttributes<HTMLSpanElement> & {
+    variant?: MaterialSymbolVariant;
+}>;
+export declare const MaterialSymbol: FC<MaterialSymbolProps>;
+export declare const SYM: FC<MaterialSymbolProps>;

package/app/components/MaterialSymbol.js

@@ -0,0 +1,22 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SYM = exports.MaterialSymbol = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+require("material-symbols");
+const MaterialSymbol = (_a) => {
+    var { variant = "outlined", children } = _a, rest = __rest(_a, ["variant", "children"]);
+    return ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: `material-symbols-${variant}` }, rest, { children: children })));
+};
+exports.MaterialSymbol = MaterialSymbol;
+exports.SYM = exports.MaterialSymbol;

package/app/components/Tabs.d.ts

@@ -0,0 +1,9 @@
+import { FC } from "react";
+export type TabItem = {
+    label: string;
+    onClick?: () => void;
+};
+export type TabsProps = {
+    tabItems: TabItem[];
+};
+export declare const Tabs: FC<TabsProps>;