@cratis/scene.blueprint.default 4.38.0 → 4.40.0

package/dist/cjs/foundation/FormScreenBody.js

@@ -0,0 +1,447 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var scene_react = require('@cratis/scene.react');
+var ActionButton = require('./ActionButton.js');
+var ComponentState = require('./ComponentState.js');
+var formModel = require('./formModel.js');
+var formatting = require('./formatting.js');
+var foundationStrings = require('./foundationStrings.js');
+var PermissionRule = require('./PermissionRule.js');
+var FoundationIcon = require('./FoundationIcon.js');
+var StateFrame = require('./StateFrame.js');
+
+function FieldInput({ field, value, error, readOnly, locale, required, choose, set, blur }) {
+    const id = react.useId();
+    const describedBy = [
+        field.help ? `${id}-help` : undefined,
+        error ? `${id}-error` : undefined
+    ].filter(Boolean).join(' ') || undefined;
+    const common = {
+        id,
+        'aria-invalid': error ? true : undefined,
+        'aria-required': field.required || undefined,
+        'aria-describedby': describedBy,
+        disabled: readOnly,
+        onBlur: blur
+    };
+    const text = typeof value === 'string' || typeof value === 'number' ? String(value) : '';
+    let input;
+    switch(field.type){
+        case formModel.FormFieldType.Toggle:
+            input = /*#__PURE__*/ jsxRuntime.jsx("input", {
+                ...common,
+                type: "checkbox",
+                role: "switch",
+                checked: value === true,
+                onChange: (event)=>set(event.target.checked)
+            });
+            break;
+        case formModel.FormFieldType.Select:
+        case formModel.FormFieldType.Lookup:
+            input = /*#__PURE__*/ jsxRuntime.jsxs("select", {
+                ...common,
+                value: text,
+                onChange: (event)=>set(event.target.value),
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx("option", {
+                        value: "",
+                        children: choose
+                    }),
+                    field.options.map((option)=>/*#__PURE__*/ jsxRuntime.jsx("option", {
+                            value: option,
+                            children: option
+                        }, option))
+                ]
+            });
+            break;
+        case formModel.FormFieldType.MultiSelect:
+            input = /*#__PURE__*/ jsxRuntime.jsx("fieldset", {
+                className: "foundation-fieldset",
+                "aria-describedby": describedBy,
+                disabled: readOnly,
+                children: field.options.map((option)=>/*#__PURE__*/ jsxRuntime.jsxs("label", {
+                        className: "foundation-check",
+                        children: [
+                            /*#__PURE__*/ jsxRuntime.jsx("input", {
+                                type: "checkbox",
+                                checked: Array.isArray(value) && value.includes(option),
+                                onBlur: blur,
+                                onChange: (event)=>set(event.target.checked ? [
+                                        ...Array.isArray(value) ? value : [],
+                                        option
+                                    ] : (Array.isArray(value) ? value : []).filter((candidate)=>candidate !== option))
+                            }),
+                            /*#__PURE__*/ jsxRuntime.jsx("span", {
+                                children: option
+                            })
+                        ]
+                    }, option))
+            });
+            break;
+        case formModel.FormFieldType.RichText:
+            input = /*#__PURE__*/ jsxRuntime.jsx("textarea", {
+                ...common,
+                rows: 5,
+                value: text,
+                placeholder: field.placeholder,
+                onChange: (event)=>set(event.target.value)
+            });
+            break;
+        case formModel.FormFieldType.File:
+            input = /*#__PURE__*/ jsxRuntime.jsx("input", {
+                ...common,
+                type: "file",
+                onChange: (event)=>set(Array.from(event.target.files ?? []).map((file)=>file.name))
+            });
+            break;
+        case formModel.FormFieldType.Address:
+            {
+                const lines = typeof value === 'object' && value !== null ? value : {};
+                input = /*#__PURE__*/ jsxRuntime.jsx("div", {
+                    className: "foundation-address",
+                    role: "group",
+                    "aria-describedby": describedBy,
+                    children: formModel.addressLines.map((line)=>/*#__PURE__*/ jsxRuntime.jsx("input", {
+                            type: "text",
+                            "aria-label": `${field.label}: ${line}`,
+                            placeholder: line,
+                            disabled: readOnly,
+                            value: lines[line] ?? '',
+                            onBlur: blur,
+                            onChange: (event)=>set({
+                                    ...lines,
+                                    [line]: event.target.value
+                                })
+                        }, line))
+                });
+                break;
+            }
+        case formModel.FormFieldType.Number:
+        case formModel.FormFieldType.Currency:
+            input = /*#__PURE__*/ jsxRuntime.jsx("input", {
+                ...common,
+                type: "number",
+                inputMode: "decimal",
+                value: text,
+                placeholder: field.placeholder,
+                onChange: (event)=>set(event.target.value === '' ? '' : Number(event.target.value))
+            });
+            break;
+        case formModel.FormFieldType.Date:
+            input = /*#__PURE__*/ jsxRuntime.jsx("input", {
+                ...common,
+                type: "date",
+                lang: locale,
+                value: text,
+                onChange: (event)=>set(event.target.value)
+            });
+            break;
+        default:
+            input = /*#__PURE__*/ jsxRuntime.jsx("input", {
+                ...common,
+                type: "text",
+                value: text,
+                placeholder: field.placeholder,
+                onChange: (event)=>set(event.target.value)
+            });
+    }
+    const grouped = field.type === formModel.FormFieldType.MultiSelect || field.type === formModel.FormFieldType.Address;
+    return /*#__PURE__*/ jsxRuntime.jsxs("div", {
+        className: "foundation-field",
+        style: {
+            gridColumn: `span ${field.span}`
+        },
+        "data-invalid": error ? true : undefined,
+        children: [
+            grouped ? /*#__PURE__*/ jsxRuntime.jsxs("span", {
+                className: "foundation-field-label",
+                id: `${id}-label`,
+                children: [
+                    field.label,
+                    field.required && /*#__PURE__*/ jsxRuntime.jsxs("span", {
+                        className: "foundation-required",
+                        title: required,
+                        children: [
+                            " *",
+                            /*#__PURE__*/ jsxRuntime.jsxs("span", {
+                                className: "foundation-visually-hidden",
+                                children: [
+                                    " (",
+                                    required,
+                                    ")"
+                                ]
+                            })
+                        ]
+                    })
+                ]
+            }) : /*#__PURE__*/ jsxRuntime.jsxs("label", {
+                htmlFor: id,
+                className: "foundation-field-label",
+                children: [
+                    field.label,
+                    field.required && /*#__PURE__*/ jsxRuntime.jsxs("span", {
+                        className: "foundation-required",
+                        title: required,
+                        children: [
+                            " *",
+                            /*#__PURE__*/ jsxRuntime.jsxs("span", {
+                                className: "foundation-visually-hidden",
+                                children: [
+                                    " (",
+                                    required,
+                                    ")"
+                                ]
+                            })
+                        ]
+                    })
+                ]
+            }),
+            input,
+            field.help && /*#__PURE__*/ jsxRuntime.jsx("span", {
+                id: `${id}-help`,
+                className: "foundation-count",
+                children: field.help
+            }),
+            error && /*#__PURE__*/ jsxRuntime.jsx("span", {
+                id: `${id}-error`,
+                className: "foundation-field-error",
+                role: "alert",
+                children: error
+            })
+        ]
+    });
+}
+/**
+ * The `formScreenBody` component: titled sections of fields in a one-to-three column grid, validated, with the Save / Save and new / Cancel bar and the
+ * unsaved-changes guard.
+ *
+ * `sections` (`title`, `columns`, `fields`) and `values` come from the screen; a field is `text`, `number`, `currency`, `date`, `select`, `multiSelect`, `lookup`,
+ * `toggle`, `file`, `richText` or `address`. Validation is inline on blur and a summary on submit (an alert listing each field as a link back to it); a server's
+ * `errors` map onto the fields, and one for a field the form lacks is shown as a general error so it is never lost. Required fields are marked with an asterisk
+ * *and* the word. `mode` is `create`, `edit`, `readOnly` or `settings` - settings has one Save for each section. The edited values are the `value` output; Save
+ * runs the behaviors attached to the element. While values differ from the saved ones the form says so, warns the browser before the page is left, and offers
+ * "Discard changes". The action bar sticks to the bottom as the form scrolls.
+ */ function FormScreenBody({ element, interactions, bindingOutputs }) {
+    const sections = react.useMemo(()=>formModel.readFormSections(element.properties.sections), [
+        element.properties.sections
+    ]);
+    const mode = formModel.readFormMode(element.properties.mode);
+    const suppliedValues = typeof element.properties.values === 'object' && element.properties.values !== null && !Array.isArray(element.properties.values) ? element.properties.values : {};
+    const suppliedKey = JSON.stringify(suppliedValues);
+    const [saved, setSaved] = react.useState(suppliedValues);
+    const [values, setValues] = react.useState(suppliedValues);
+    const [touched, setTouched] = react.useState(new Set());
+    const [submitted, setSubmitted] = react.useState(false);
+    const [justSaved, setJustSaved] = react.useState(false);
+    const summary = react.useRef(null);
+    const strings = foundationStrings.readFoundationStrings(element);
+    const locale = formatting.readLocale(element);
+    const state = ComponentState.readComponentState(element, sections.length > 0);
+    const readOnly = mode === formModel.FormMode.ReadOnly || PermissionRule.readPermissionRule(element, 'editPermission') !== 'enabled';
+    const canSave = PermissionRule.readPermissionRule(element, 'savePermission');
+    const problems = formModel.validate(sections, values);
+    const server = react.useMemo(()=>formModel.mapServerErrors(sections, element.properties.errors), [
+        sections,
+        element.properties.errors
+    ]);
+    const dirty = !formModel.sameValues(values, saved);
+    const labelOf = (name)=>sections.flatMap((section)=>section.fields).find((field)=>field.name === name)?.label ?? name;
+    const wording = (name, kind)=>foundationStrings.formatText(kind === 'required' ? strings.formRequiredField : strings.formInvalidField, {
+            label: labelOf(name)
+        });
+    const errorOf = (name)=>server.byField[name] ?? ((touched.has(name) || submitted) && problems[name] ? wording(name, problems[name]) : undefined);
+    const invalid = Object.keys(problems);
+    react.useEffect(()=>{
+        setSaved(suppliedValues);
+        setValues(suppliedValues);
+        setTouched(new Set());
+        setSubmitted(false);
+    }, [
+        suppliedKey
+    ]);
+    scene_react.useValueOutput(bindingOutputs, values);
+    react.useEffect(()=>{
+        if (!dirty || typeof window === 'undefined') return;
+        const guard = (event)=>{
+            event.preventDefault();
+            event.returnValue = '';
+        };
+        window.addEventListener('beforeunload', guard);
+        return ()=>window.removeEventListener('beforeunload', guard);
+    }, [
+        dirty
+    ]);
+    const submit = (scope)=>{
+        setSubmitted(true);
+        const scoped = scope ? scope.fields.filter((field)=>problems[field.name]) : invalid.map((name)=>({
+                name
+            }));
+        if (scoped.length > 0) {
+            requestAnimationFrame(()=>summary.current?.focus());
+            return;
+        }
+        setSaved(values);
+        setJustSaved(true);
+        interactions?.onClick?.({
+            stopPropagation: ()=>undefined
+        });
+    };
+    const edit = (name, value)=>{
+        setValues((current)=>({
+                ...current,
+                [name]: value
+            }));
+        setJustSaved(false);
+        interactions?.onChange?.();
+    };
+    return /*#__PURE__*/ jsxRuntime.jsx(StateFrame.FoundationFrame, {
+        element: element,
+        interactions: interactions,
+        name: "form-screen",
+        state: state,
+        skeleton: [
+            40,
+            100,
+            100,
+            70
+        ],
+        children: state !== ComponentState.ComponentState.Loading && /*#__PURE__*/ jsxRuntime.jsxs("form", {
+            noValidate: true,
+            onSubmit: (event)=>{
+                event.preventDefault();
+                if (mode !== formModel.FormMode.Settings) submit();
+            },
+            children: [
+                readOnly && mode === formModel.FormMode.ReadOnly && /*#__PURE__*/ jsxRuntime.jsx("p", {
+                    className: "foundation-count",
+                    role: "status",
+                    children: strings.formReadOnly
+                }),
+                (submitted && invalid.length > 0 || server.general.length > 0) && /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                    ref: summary,
+                    tabIndex: -1,
+                    role: "alert",
+                    className: "foundation-message",
+                    "data-tone": "danger",
+                    children: [
+                        /*#__PURE__*/ jsxRuntime.jsx(FoundationIcon.FoundationIcon, {
+                            name: "alert"
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                            className: "foundation-message-text",
+                            children: [
+                                /*#__PURE__*/ jsxRuntime.jsx("strong", {
+                                    children: invalid.length === 1 ? strings.formSummaryOne : foundationStrings.formatText(strings.formSummary, {
+                                        count: invalid.length
+                                    })
+                                }),
+                                /*#__PURE__*/ jsxRuntime.jsxs("ul", {
+                                    children: [
+                                        invalid.map((name)=>/*#__PURE__*/ jsxRuntime.jsx("li", {
+                                                children: wording(name, problems[name])
+                                            }, name)),
+                                        server.general.map((message)=>/*#__PURE__*/ jsxRuntime.jsx("li", {
+                                                children: message
+                                            }, message))
+                                    ]
+                                })
+                            ]
+                        })
+                    ]
+                }),
+                sections.map((section)=>/*#__PURE__*/ jsxRuntime.jsxs("fieldset", {
+                        className: "foundation-form-section",
+                        disabled: false,
+                        children: [
+                            section.title && /*#__PURE__*/ jsxRuntime.jsx("legend", {
+                                children: section.title
+                            }),
+                            /*#__PURE__*/ jsxRuntime.jsx("div", {
+                                className: "foundation-form-grid",
+                                style: {
+                                    gridTemplateColumns: `repeat(${section.columns}, minmax(0, 1fr))`
+                                },
+                                "data-columns": section.columns,
+                                children: section.fields.map((field)=>/*#__PURE__*/ jsxRuntime.jsx(FieldInput, {
+                                        field: field,
+                                        value: values[field.name],
+                                        error: errorOf(field.name),
+                                        readOnly: readOnly,
+                                        locale: locale,
+                                        required: strings.formRequired,
+                                        choose: strings.formChoose,
+                                        set: (value)=>edit(field.name, value),
+                                        blur: ()=>setTouched((current)=>new Set(current).add(field.name))
+                                    }, field.name))
+                            }),
+                            mode === formModel.FormMode.Settings && !readOnly && /*#__PURE__*/ jsxRuntime.jsx("div", {
+                                className: "foundation-form-section-actions",
+                                children: /*#__PURE__*/ jsxRuntime.jsx(ActionButton.ActionButton, {
+                                    rule: canSave,
+                                    emphasis: "secondary",
+                                    disabledReason: strings.disabledNoPermission,
+                                    onClick: ()=>submit(section),
+                                    children: foundationStrings.formatText(strings.formSectionSave, {
+                                        section: section.title
+                                    })
+                                })
+                            })
+                        ]
+                    }, section.id)),
+                mode !== formModel.FormMode.Settings && mode !== formModel.FormMode.ReadOnly && /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                    className: "foundation-form-actions",
+                    role: "group",
+                    "aria-label": strings.listActions,
+                    children: [
+                        /*#__PURE__*/ jsxRuntime.jsx("span", {
+                            role: "status",
+                            className: "foundation-count",
+                            children: dirty ? strings.formUnsaved : justSaved ? strings.formSaved : ''
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsx("span", {
+                            className: "foundation-wizard-spacer"
+                        }),
+                        dirty && /*#__PURE__*/ jsxRuntime.jsx(ActionButton.ActionButton, {
+                            emphasis: "quiet",
+                            disabledReason: strings.disabledNoPermission,
+                            onClick: ()=>{
+                                setValues(saved);
+                                setTouched(new Set());
+                                setSubmitted(false);
+                            },
+                            children: strings.formDiscard
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsx(ActionButton.ActionButton, {
+                            emphasis: "secondary",
+                            disabledReason: strings.disabledNoPermission,
+                            onClick: ()=>interactions?.onClick?.({
+                                    stopPropagation: ()=>undefined
+                                }),
+                            children: strings.formCancel
+                        }),
+                        mode === formModel.FormMode.Create && /*#__PURE__*/ jsxRuntime.jsx(ActionButton.ActionButton, {
+                            rule: canSave,
+                            emphasis: "secondary",
+                            disabledReason: strings.disabledNoPermission,
+                            onClick: ()=>{
+                                submit();
+                            },
+                            children: strings.formSaveAndNew
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsx(ActionButton.ActionButton, {
+                            rule: canSave,
+                            disabledReason: strings.disabledNoPermission,
+                            onClick: ()=>submit(),
+                            children: strings.formSave
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+}
+
+exports.FormScreenBody = FormScreenBody;
+//# sourceMappingURL=FormScreenBody.js.map

package/dist/cjs/foundation/FormScreenBody.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormScreenBody.js","sources":["../../../foundation/FormScreenBody.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { useEffect, useId, useMemo, useRef, useState } from 'react';\nimport { RegisteredComponentProps, useValueOutput } from '@cratis/scene.react';\nimport { ActionButton } from './ActionButton';\nimport { ComponentState, readComponentState } from './ComponentState';\nimport { FormField, FormFieldType, FormMode, FormSection, FormValues, addressLines, mapServerErrors, readFormMode, readFormSections, sameValues, validate } from './formModel';\nimport { readLocale } from './formatting';\nimport { formatText, readFoundationStrings } from './foundationStrings';\nimport { readPermissionRule } from './PermissionRule';\nimport { FoundationIcon } from './FoundationIcon';\nimport { FoundationFrame } from './StateFrame';\n\ninterface FieldProps {\n    field: FormField;\n    value: unknown;\n    error?: string;\n    readOnly: boolean;\n    locale: string;\n    required: string;\n    choose: string;\n    set(value: unknown): void;\n    blur(): void;\n}\n\nfunction FieldInput({ field, value, error, readOnly, locale, required, choose, set, blur }: FieldProps) {\n    const id = useId();\n    const describedBy = [field.help ? `${id}-help` : undefined, error ? `${id}-error` : undefined].filter(Boolean).join(' ') || undefined;\n    const common = { id, 'aria-invalid': error ? true : undefined, 'aria-required': field.required || undefined, 'aria-describedby': describedBy, disabled: readOnly, onBlur: blur } as const;\n    const text = typeof value === 'string' || typeof value === 'number' ? String(value) : '';\n    let input;\n\n    switch (field.type) {\n        case FormFieldType.Toggle:\n            input = <input {...common} type='checkbox' role='switch' checked={value === true} onChange={event => set(event.target.checked)} />;\n            break;\n        case FormFieldType.Select:\n        case FormFieldType.Lookup:\n            input = <select {...common} value={text} onChange={event => set(event.target.value)}><option value=''>{choose}</option>{field.options.map(option => <option key={option} value={option}>{option}</option>)}</select>;\n            break;\n        case FormFieldType.MultiSelect:\n            input = (\n                <fieldset className='foundation-fieldset' aria-describedby={describedBy} disabled={readOnly}>\n                    {field.options.map(option => (\n                        <label key={option} className='foundation-check'>\n                            <input type='checkbox' checked={Array.isArray(value) && value.includes(option)} onBlur={blur}\n                                onChange={event => set(event.target.checked ? [...(Array.isArray(value) ? value : []), option] : (Array.isArray(value) ? value : []).filter(candidate => candidate !== option))} />\n                            <span>{option}</span>\n                        </label>\n                    ))}\n                </fieldset>\n            );\n            break;\n        case FormFieldType.RichText:\n            input = <textarea {...common} rows={5} value={text} placeholder={field.placeholder} onChange={event => set(event.target.value)} />;\n            break;\n        case FormFieldType.File:\n            input = <input {...common} type='file' onChange={event => set(Array.from(event.target.files ?? []).map(file => file.name))} />;\n            break;\n        case FormFieldType.Address: {\n            const lines = typeof value === 'object' && value !== null ? (value as Record<string, string>) : {};\n            input = (\n                <div className='foundation-address' role='group' aria-describedby={describedBy}>\n                    {addressLines.map(line => (\n                        <input key={line} type='text' aria-label={`${field.label}: ${line}`} placeholder={line} disabled={readOnly} value={lines[line] ?? ''} onBlur={blur} onChange={event => set({ ...lines, [line]: event.target.value })} />\n                    ))}\n                </div>\n            );\n            break;\n        }\n        case FormFieldType.Number:\n        case FormFieldType.Currency:\n            input = <input {...common} type='number' inputMode='decimal' value={text} placeholder={field.placeholder} onChange={event => set(event.target.value === '' ? '' : Number(event.target.value))} />;\n            break;\n        case FormFieldType.Date:\n            input = <input {...common} type='date' lang={locale} value={text} onChange={event => set(event.target.value)} />;\n            break;\n        default:\n            input = <input {...common} type='text' value={text} placeholder={field.placeholder} onChange={event => set(event.target.value)} />;\n    }\n\n    const grouped = field.type === FormFieldType.MultiSelect || field.type === FormFieldType.Address;\n    return (\n        <div className='foundation-field' style={{ gridColumn: `span ${field.span}` }} data-invalid={error ? true : undefined}>\n            {grouped ? <span className='foundation-field-label' id={`${id}-label`}>{field.label}{field.required && <span className='foundation-required' title={required}> *<span className='foundation-visually-hidden'> ({required})</span></span>}</span>\n                : <label htmlFor={id} className='foundation-field-label'>{field.label}{field.required && <span className='foundation-required' title={required}> *<span className='foundation-visually-hidden'> ({required})</span></span>}</label>}\n            {input}\n            {field.help && <span id={`${id}-help`} className='foundation-count'>{field.help}</span>}\n            {error && <span id={`${id}-error`} className='foundation-field-error' role='alert'>{error}</span>}\n        </div>\n    );\n}\n\n/**\n * The `formScreenBody` component: titled sections of fields in a one-to-three column grid, validated, with the Save / Save and new / Cancel bar and the\n * unsaved-changes guard.\n *\n * `sections` (`title`, `columns`, `fields`) and `values` come from the screen; a field is `text`, `number`, `currency`, `date`, `select`, `multiSelect`, `lookup`,\n * `toggle`, `file`, `richText` or `address`. Validation is inline on blur and a summary on submit (an alert listing each field as a link back to it); a server's\n * `errors` map onto the fields, and one for a field the form lacks is shown as a general error so it is never lost. Required fields are marked with an asterisk\n * *and* the word. `mode` is `create`, `edit`, `readOnly` or `settings` - settings has one Save for each section. The edited values are the `value` output; Save\n * runs the behaviors attached to the element. While values differ from the saved ones the form says so, warns the browser before the page is left, and offers\n * \"Discard changes\". The action bar sticks to the bottom as the form scrolls.\n */\nexport function FormScreenBody({ element, interactions, bindingOutputs }: RegisteredComponentProps) {\n    const sections = useMemo(() => readFormSections(element.properties.sections), [element.properties.sections]);\n    const mode = readFormMode(element.properties.mode);\n    const suppliedValues = (typeof element.properties.values === 'object' && element.properties.values !== null && !Array.isArray(element.properties.values) ? element.properties.values : {}) as FormValues;\n    const suppliedKey = JSON.stringify(suppliedValues);\n    const [saved, setSaved] = useState<FormValues>(suppliedValues);\n    const [values, setValues] = useState<FormValues>(suppliedValues);\n    const [touched, setTouched] = useState<Set<string>>(new Set());\n    const [submitted, setSubmitted] = useState(false);\n    const [justSaved, setJustSaved] = useState(false);\n    const summary = useRef<HTMLDivElement>(null);\n    const strings = readFoundationStrings(element);\n    const locale = readLocale(element);\n    const state = readComponentState(element, sections.length > 0);\n    const readOnly = mode === FormMode.ReadOnly || readPermissionRule(element, 'editPermission') !== 'enabled';\n    const canSave = readPermissionRule(element, 'savePermission');\n    const problems = validate(sections, values);\n    const server = useMemo(() => mapServerErrors(sections, element.properties.errors), [sections, element.properties.errors]);\n    const dirty = !sameValues(values, saved);\n    const labelOf = (name: string) => sections.flatMap(section => section.fields).find(field => field.name === name)?.label ?? name;\n    const wording = (name: string, kind: 'required' | 'invalid') => formatText(kind === 'required' ? strings.formRequiredField : strings.formInvalidField, { label: labelOf(name) });\n    const errorOf = (name: string) => server.byField[name] ?? ((touched.has(name) || submitted) && problems[name] ? wording(name, problems[name]) : undefined);\n    const invalid = Object.keys(problems);\n\n    useEffect(() => { setSaved(suppliedValues); setValues(suppliedValues); setTouched(new Set()); setSubmitted(false); }, [suppliedKey]);\n    useValueOutput(bindingOutputs, values);\n    useEffect(() => {\n        if (!dirty || typeof window === 'undefined') return;\n        const guard = (event: BeforeUnloadEvent) => { event.preventDefault(); event.returnValue = ''; };\n        window.addEventListener('beforeunload', guard);\n        return () => window.removeEventListener('beforeunload', guard);\n    }, [dirty]);\n\n    const submit = (scope?: FormSection) => {\n        setSubmitted(true);\n        const scoped = scope ? scope.fields.filter(field => problems[field.name]) : invalid.map(name => ({ name }));\n        if (scoped.length > 0) { requestAnimationFrame(() => summary.current?.focus()); return; }\n        setSaved(values);\n        setJustSaved(true);\n        interactions?.onClick?.({ stopPropagation: () => undefined });\n    };\n    const edit = (name: string, value: unknown) => { setValues(current => ({ ...current, [name]: value })); setJustSaved(false); interactions?.onChange?.(); };\n\n    return (\n        <FoundationFrame element={element} interactions={interactions} name='form-screen' state={state} skeleton={[40, 100, 100, 70]}>\n            {state !== ComponentState.Loading && (\n                <form noValidate onSubmit={event => { event.preventDefault(); if (mode !== FormMode.Settings) submit(); }}>\n                    {readOnly && mode === FormMode.ReadOnly && <p className='foundation-count' role='status'>{strings.formReadOnly}</p>}\n                    {(submitted && invalid.length > 0 || server.general.length > 0) && (\n                        <div ref={summary} tabIndex={-1} role='alert' className='foundation-message' data-tone='danger'>\n                            <FoundationIcon name='alert' />\n                            <div className='foundation-message-text'>\n                                <strong>{invalid.length === 1 ? strings.formSummaryOne : formatText(strings.formSummary, { count: invalid.length })}</strong>\n                                <ul>\n                                    {invalid.map(name => <li key={name}>{wording(name, problems[name])}</li>)}\n                                    {server.general.map(message => <li key={message}>{message}</li>)}\n                                </ul>\n                            </div>\n                        </div>\n                    )}\n                    {sections.map(section => (\n                        <fieldset key={section.id} className='foundation-form-section' disabled={false}>\n                            {section.title && <legend>{section.title}</legend>}\n                            <div className='foundation-form-grid' style={{ gridTemplateColumns: `repeat(${section.columns}, minmax(0, 1fr))` }} data-columns={section.columns}>\n                                {section.fields.map(field => (\n                                    <FieldInput key={field.name} field={field} value={values[field.name]} error={errorOf(field.name)} readOnly={readOnly} locale={locale} required={strings.formRequired} choose={strings.formChoose}\n                                        set={value => edit(field.name, value)} blur={() => setTouched(current => new Set(current).add(field.name))} />\n                                ))}\n                            </div>\n                            {mode === FormMode.Settings && !readOnly && (\n                                <div className='foundation-form-section-actions'>\n                                    <ActionButton rule={canSave} emphasis='secondary' disabledReason={strings.disabledNoPermission} onClick={() => submit(section)}>{formatText(strings.formSectionSave, { section: section.title })}</ActionButton>\n                                </div>\n                            )}\n                        </fieldset>\n                    ))}\n                    {mode !== FormMode.Settings && mode !== FormMode.ReadOnly && (\n                        <div className='foundation-form-actions' role='group' aria-label={strings.listActions}>\n                            <span role='status' className='foundation-count'>{dirty ? strings.formUnsaved : justSaved ? strings.formSaved : ''}</span>\n                            <span className='foundation-wizard-spacer' />\n                            {dirty && <ActionButton emphasis='quiet' disabledReason={strings.disabledNoPermission} onClick={() => { setValues(saved); setTouched(new Set()); setSubmitted(false); }}>{strings.formDiscard}</ActionButton>}\n                            <ActionButton emphasis='secondary' disabledReason={strings.disabledNoPermission} onClick={() => interactions?.onClick?.({ stopPropagation: () => undefined })}>{strings.formCancel}</ActionButton>\n                            {mode === FormMode.Create && <ActionButton rule={canSave} emphasis='secondary' disabledReason={strings.disabledNoPermission} onClick={() => { submit(); }}>{strings.formSaveAndNew}</ActionButton>}\n                            <ActionButton rule={canSave} disabledReason={strings.disabledNoPermission} onClick={() => submit()}>{strings.formSave}</ActionButton>\n                        </div>\n                    )}\n                </form>\n            )}\n        </FoundationFrame>\n    );\n}\n"],"names":["FieldInput","field","value","error","readOnly","locale","required","choose","set","blur","id","useId","describedBy","help","undefined","filter","Boolean","join","common","disabled","onBlur","text","String","input","type","FormFieldType","Toggle","_jsx","role","checked","onChange","event","target","Select","Lookup","_jsxs","select","option","options","map","MultiSelect","fieldset","className","aria-describedby","label","Array","isArray","includes","candidate","span","RichText","textarea","rows","placeholder","File","from","files","file","name","Address","lines","div","addressLines","line","aria-label","Number","Currency","inputMode","Date","lang","grouped","style","gridColumn","data-invalid","title","htmlFor","FormScreenBody","element","interactions","bindingOutputs","sections","useMemo","readFormSections","properties","mode","readFormMode","suppliedValues","values","suppliedKey","JSON","stringify","saved","setSaved","useState","setValues","touched","setTouched","Set","submitted","setSubmitted","justSaved","setJustSaved","summary","useRef","strings","readFoundationStrings","readLocale","state","readComponentState","length","FormMode","ReadOnly","readPermissionRule","canSave","problems","validate","server","mapServerErrors","errors","dirty","sameValues","labelOf","flatMap","section","fields","find","wording","kind","formatText","formRequiredField","formInvalidField","errorOf","byField","has","invalid","Object","keys","useEffect","useValueOutput","window","guard","preventDefault","returnValue","addEventListener","removeEventListener","submit","scope","scoped","requestAnimationFrame","current","focus","onClick","stopPropagation","edit","FoundationFrame","skeleton","ComponentState","Loading","form","noValidate","onSubmit","Settings","p","formReadOnly","general","ref","tabIndex","data-tone","FoundationIcon","strong","formSummaryOne","formSummary","count","ul","li","message","legend","gridTemplateColumns","columns","data-columns","formRequired","formChoose","add","ActionButton","rule","emphasis","disabledReason","disabledNoPermission","formSectionSave","listActions","formUnsaved","formSaved","formDiscard","formCancel","Create","formSaveAndNew","formSave"],"mappings":"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"}

package/dist/cjs/foundation/FoundationStates.js

@@ -34,7 +34,8 @@ var foundationSamples = require('./foundationSamples.js');
             },
             children: states.map((state)=>/*#__PURE__*/ jsxRuntime.jsxs("figure", {
                     style: {
-                        margin: 0
+                        margin: 0,
+                        minInlineSize: 0
                     },
                     children: [
                         /*#__PURE__*/ jsxRuntime.jsx("figcaption", {

package/dist/cjs/foundation/FoundationStates.js.map

@@ -1 +1 @@
-{"version":3,"file":"FoundationStates.js","sources":["../../../foundation/FoundationStates.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { componentRegistryKey, SceneThemeProvider } from '@cratis/scene.react';\nimport { defaultBlueprintComponents } from '../defaultBlueprintComponents';\nimport { defaultBlueprintName } from '../packageName';\nimport { darkTheme, lightTheme } from '../themes';\nimport { ComponentState, componentStates } from './ComponentState';\nimport { foundationElement, foundationSamples } from './foundationSamples';\n\nexport interface FoundationStatesProps {\n    /** The bare name of the foundation component. */\n    component: string;\n\n    /** The theme the states are drawn in. */\n    theme: 'light' | 'dark';\n\n    /** Properties to lay over the sample, to show a variant. */\n    properties?: Record<string, unknown>;\n\n    /** Whether the page reads right to left. */\n    rightToLeft?: boolean;\n}\n\n/**\n * Every standard state of one foundation component side by side in one theme: the preview of spec Part B 6 (\"all standard states\n * implemented and previewable\"), used by the stories and by the gallery.\n */\nexport function FoundationStates({ component, theme, properties, rightToLeft }: FoundationStatesProps) {\n    const Component = defaultBlueprintComponents[componentRegistryKey(defaultBlueprintName, component)];\n    const sample = foundationSamples[component];\n    const states = sample?.stateful ? componentStates : [ComponentState.Ready];\n\n    return (\n        <SceneThemeProvider theme={theme === 'dark' ? darkTheme : lightTheme}>\n            <div dir={rightToLeft ? 'rtl' : 'ltr'} className='foundation-states' style={{ display: 'grid', gap: '1rem', padding: '1rem', gridTemplateColumns: 'repeat(auto-fill, minmax(18rem, 1fr))', background: 'var(--scene-surface-background)', color: 'var(--scene-text-color)' }}>\n                {states.map(state => (\n                    <figure key={state} style={{ margin: 0 }}>\n                        <figcaption style={{ fontSize: '0.75rem', textTransform: 'uppercase', marginBlockEnd: '0.5rem' }}>{state}</figcaption>\n                        <Component element={foundationElement(component, { ...sample?.properties, ...properties }, state === ComponentState.Ready ? undefined : state)} slots={{}} />\n                    </figure>\n                ))}\n            </div>\n        </SceneThemeProvider>\n    );\n}\n"],"names":["FoundationStates","component","theme","properties","rightToLeft","Component","defaultBlueprintComponents","componentRegistryKey","defaultBlueprintName","sample","foundationSamples","states","stateful","componentStates","ComponentState","Ready","_jsx","SceneThemeProvider","darkTheme","lightTheme","div","dir","className","style","display","gap","padding","gridTemplateColumns","background","color","map","state","_jsxs","figure","margin","figcaption","fontSize","textTransform","marginBlockEnd","element","foundationElement","undefined","slots"],"mappings":";;;;;;;;;;;;AAwBA;;;IAIO,SAASA,gBAAAA,CAAiB,EAAEC,SAAS,EAAEC,KAAK,EAAEC,UAAU,EAAEC,WAAW,EAAyB,EAAA;AACjG,IAAA,MAAMC,SAAAA,GAAYC,qDAA0B,CAACC,gCAAAA,CAAqBC,kCAAsBP,SAAAA,CAAAA,CAAW;IACnG,MAAMQ,MAAAA,GAASC,mCAAiB,CAACT,SAAAA,CAAU;IAC3C,MAAMU,MAAAA,GAASF,MAAAA,EAAQG,QAAAA,GAAWC,8BAAAA,GAAkB;AAACC,QAAAA,6BAAAA,CAAeC;AAAM,KAAA;AAE1E,IAAA,qBACIC,cAAA,CAACC,8BAAAA,EAAAA;QAAmBf,KAAAA,EAAOA,KAAAA,KAAU,SAASgB,cAAAA,GAAYC,gBAAAA;AACtD,QAAA,QAAA,gBAAAH,cAAA,CAACI,KAAAA,EAAAA;AAAIC,YAAAA,GAAAA,EAAKjB,cAAc,KAAA,GAAQ,KAAA;YAAOkB,SAAAA,EAAU,mBAAA;YAAoBC,KAAAA,EAAO;gBAAEC,OAAAA,EAAS,MAAA;gBAAQC,GAAAA,EAAK,MAAA;gBAAQC,OAAAA,EAAS,MAAA;gBAAQC,mBAAAA,EAAqB,uCAAA;gBAAyCC,UAAAA,EAAY,iCAAA;gBAAmCC,KAAAA,EAAO;AAA0B,aAAA;AACtQlB,YAAAA,QAAAA,EAAAA,MAAAA,CAAOmB,GAAG,CAACC,CAAAA,KAAAA,iBACRC,eAAA,CAACC,QAAAA,EAAAA;oBAAmBV,KAAAA,EAAO;wBAAEW,MAAAA,EAAQ;AAAE,qBAAA;;sCACnClB,cAAA,CAACmB,YAAAA,EAAAA;4BAAWZ,KAAAA,EAAO;gCAAEa,QAAAA,EAAU,SAAA;gCAAWC,aAAAA,EAAe,WAAA;gCAAaC,cAAAA,EAAgB;AAAS,6BAAA;AAAIP,4BAAAA,QAAAA,EAAAA;;sCACnGf,cAAA,CAACX,SAAAA,EAAAA;AAAUkC,4BAAAA,OAAAA,EAASC,oCAAkBvC,SAAAA,EAAW;AAAE,gCAAA,GAAGQ,QAAQN,UAAU;AAAE,gCAAA,GAAGA;AAAW,6BAAA,EAAG4B,KAAAA,KAAUjB,6BAAAA,CAAeC,KAAK,GAAG0B,SAAAA,GAAYV,KAAAA,CAAAA;AAAQW,4BAAAA,KAAAA,EAAO;;;AAF9IX,iBAAAA,EAAAA,KAAAA,CAAAA;;;AAQjC;;"}
+{"version":3,"file":"FoundationStates.js","sources":["../../../foundation/FoundationStates.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { componentRegistryKey, SceneThemeProvider } from '@cratis/scene.react';\nimport { defaultBlueprintComponents } from '../defaultBlueprintComponents';\nimport { defaultBlueprintName } from '../packageName';\nimport { darkTheme, lightTheme } from '../themes';\nimport { ComponentState, componentStates } from './ComponentState';\nimport { foundationElement, foundationSamples } from './foundationSamples';\n\nexport interface FoundationStatesProps {\n    /** The bare name of the foundation component. */\n    component: string;\n\n    /** The theme the states are drawn in. */\n    theme: 'light' | 'dark';\n\n    /** Properties to lay over the sample, to show a variant. */\n    properties?: Record<string, unknown>;\n\n    /** Whether the page reads right to left. */\n    rightToLeft?: boolean;\n}\n\n/**\n * Every standard state of one foundation component side by side in one theme: the preview of spec Part B 6 (\"all standard states\n * implemented and previewable\"), used by the stories and by the gallery.\n */\nexport function FoundationStates({ component, theme, properties, rightToLeft }: FoundationStatesProps) {\n    const Component = defaultBlueprintComponents[componentRegistryKey(defaultBlueprintName, component)];\n    const sample = foundationSamples[component];\n    const states = sample?.stateful ? componentStates : [ComponentState.Ready];\n\n    return (\n        <SceneThemeProvider theme={theme === 'dark' ? darkTheme : lightTheme}>\n            <div dir={rightToLeft ? 'rtl' : 'ltr'} className='foundation-states' style={{ display: 'grid', gap: '1rem', padding: '1rem', gridTemplateColumns: 'repeat(auto-fill, minmax(18rem, 1fr))', background: 'var(--scene-surface-background)', color: 'var(--scene-text-color)' }}>\n                {states.map(state => (\n                    <figure key={state} style={{ margin: 0, minInlineSize: 0 }}>\n                        <figcaption style={{ fontSize: '0.75rem', textTransform: 'uppercase', marginBlockEnd: '0.5rem' }}>{state}</figcaption>\n                        <Component element={foundationElement(component, { ...sample?.properties, ...properties }, state === ComponentState.Ready ? undefined : state)} slots={{}} />\n                    </figure>\n                ))}\n            </div>\n        </SceneThemeProvider>\n    );\n}\n"],"names":["FoundationStates","component","theme","properties","rightToLeft","Component","defaultBlueprintComponents","componentRegistryKey","defaultBlueprintName","sample","foundationSamples","states","stateful","componentStates","ComponentState","Ready","_jsx","SceneThemeProvider","darkTheme","lightTheme","div","dir","className","style","display","gap","padding","gridTemplateColumns","background","color","map","state","_jsxs","figure","margin","minInlineSize","figcaption","fontSize","textTransform","marginBlockEnd","element","foundationElement","undefined","slots"],"mappings":";;;;;;;;;;;;AAwBA;;;IAIO,SAASA,gBAAAA,CAAiB,EAAEC,SAAS,EAAEC,KAAK,EAAEC,UAAU,EAAEC,WAAW,EAAyB,EAAA;AACjG,IAAA,MAAMC,SAAAA,GAAYC,qDAA0B,CAACC,gCAAAA,CAAqBC,kCAAsBP,SAAAA,CAAAA,CAAW;IACnG,MAAMQ,MAAAA,GAASC,mCAAiB,CAACT,SAAAA,CAAU;IAC3C,MAAMU,MAAAA,GAASF,MAAAA,EAAQG,QAAAA,GAAWC,8BAAAA,GAAkB;AAACC,QAAAA,6BAAAA,CAAeC;AAAM,KAAA;AAE1E,IAAA,qBACIC,cAAA,CAACC,8BAAAA,EAAAA;QAAmBf,KAAAA,EAAOA,KAAAA,KAAU,SAASgB,cAAAA,GAAYC,gBAAAA;AACtD,QAAA,QAAA,gBAAAH,cAAA,CAACI,KAAAA,EAAAA;AAAIC,YAAAA,GAAAA,EAAKjB,cAAc,KAAA,GAAQ,KAAA;YAAOkB,SAAAA,EAAU,mBAAA;YAAoBC,KAAAA,EAAO;gBAAEC,OAAAA,EAAS,MAAA;gBAAQC,GAAAA,EAAK,MAAA;gBAAQC,OAAAA,EAAS,MAAA;gBAAQC,mBAAAA,EAAqB,uCAAA;gBAAyCC,UAAAA,EAAY,iCAAA;gBAAmCC,KAAAA,EAAO;AAA0B,aAAA;AACtQlB,YAAAA,QAAAA,EAAAA,MAAAA,CAAOmB,GAAG,CAACC,CAAAA,KAAAA,iBACRC,eAAA,CAACC,QAAAA,EAAAA;oBAAmBV,KAAAA,EAAO;wBAAEW,MAAAA,EAAQ,CAAA;wBAAGC,aAAAA,EAAe;AAAE,qBAAA;;sCACrDnB,cAAA,CAACoB,YAAAA,EAAAA;4BAAWb,KAAAA,EAAO;gCAAEc,QAAAA,EAAU,SAAA;gCAAWC,aAAAA,EAAe,WAAA;gCAAaC,cAAAA,EAAgB;AAAS,6BAAA;AAAIR,4BAAAA,QAAAA,EAAAA;;sCACnGf,cAAA,CAACX,SAAAA,EAAAA;AAAUmC,4BAAAA,OAAAA,EAASC,oCAAkBxC,SAAAA,EAAW;AAAE,gCAAA,GAAGQ,QAAQN,UAAU;AAAE,gCAAA,GAAGA;AAAW,6BAAA,EAAG4B,KAAAA,KAAUjB,6BAAAA,CAAeC,KAAK,GAAG2B,SAAAA,GAAYX,KAAAA,CAAAA;AAAQY,4BAAAA,KAAAA,EAAO;;;AAF9IZ,iBAAAA,EAAAA,KAAAA,CAAAA;;;AAQjC;;"}

package/dist/cjs/foundation/GlobalSearch.js

@@ -0,0 +1,54 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var scene_react = require('@cratis/scene.react');
+var elementProperties = require('../shell/elementProperties.js');
+var FoundationIcon = require('./FoundationIcon.js');
+var foundationStrings = require('./foundationStrings.js');
+var urlState = require('./urlState.js');
+
+/**
+ * The `globalSearch` component: a search box for the topbar or a list's toolbar.
+ *
+ * It is a `search` landmark around a labelled field; the text is the `value` output and, with `urlKey`, is kept in the address so a search is
+ * a shareable link. Pressing Escape clears it. The placeholder and the accessible name come from `placeholder` and `label`, and from the
+ * strings table when absent, so nothing is hard-coded.
+ */ function GlobalSearch({ element, interactions, bindingOutputs }) {
+    const strings = foundationStrings.readFoundationStrings(element);
+    const [text, setText] = urlState.useUrlState(elementProperties.readOptionalString(element, 'urlKey'), elementProperties.readOptionalString(element, 'text'));
+    const label = elementProperties.readOptionalString(element, 'label') ?? strings.searchLabel;
+    scene_react.useValueOutput(bindingOutputs, text ?? '');
+    return /*#__PURE__*/ jsxRuntime.jsxs("form", {
+        role: "search",
+        className: "foundation foundation-search",
+        "data-scene-id": element.id,
+        onSubmit: (event)=>{
+            event.preventDefault();
+            interactions?.onChange?.();
+        },
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(FoundationIcon.FoundationIcon, {
+                name: "filter"
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx("input", {
+                type: "search",
+                "aria-label": label,
+                placeholder: elementProperties.readOptionalString(element, 'placeholder') ?? strings.searchPlaceholder,
+                value: text ?? '',
+                onChange: (event)=>{
+                    setText(event.target.value);
+                    interactions?.onChange?.();
+                },
+                onKeyDown: (event)=>{
+                    if (event.key === 'Escape' && (text ?? '').length > 0) {
+                        event.preventDefault();
+                        setText(undefined);
+                    }
+                }
+            })
+        ]
+    });
+}
+
+exports.GlobalSearch = GlobalSearch;
+//# sourceMappingURL=GlobalSearch.js.map

package/dist/cjs/foundation/GlobalSearch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GlobalSearch.js","sources":["../../../foundation/GlobalSearch.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\n\nimport { RegisteredComponentProps, useValueOutput } from '@cratis/scene.react';\nimport { readOptionalString } from '../shell/elementProperties';\nimport { FoundationIcon } from './FoundationIcon';\nimport { readFoundationStrings } from './foundationStrings';\nimport { useUrlState } from './urlState';\n\n/**\n * The `globalSearch` component: a search box for the topbar or a list's toolbar.\n *\n * It is a `search` landmark around a labelled field; the text is the `value` output and, with `urlKey`, is kept in the address so a search is\n * a shareable link. Pressing Escape clears it. The placeholder and the accessible name come from `placeholder` and `label`, and from the\n * strings table when absent, so nothing is hard-coded.\n */\nexport function GlobalSearch({ element, interactions, bindingOutputs }: RegisteredComponentProps) {\n    const strings = readFoundationStrings(element);\n    const [text, setText] = useUrlState(readOptionalString(element, 'urlKey'), readOptionalString(element, 'text'));\n    const label = readOptionalString(element, 'label') ?? strings.searchLabel;\n\n    useValueOutput(bindingOutputs, text ?? '');\n\n    return (\n        <form role='search' className='foundation foundation-search' data-scene-id={element.id} onSubmit={event => { event.preventDefault(); interactions?.onChange?.(); }}>\n            <FoundationIcon name='filter' />\n            <input type='search' aria-label={label} placeholder={readOptionalString(element, 'placeholder') ?? strings.searchPlaceholder} value={text ?? ''}\n                onChange={event => { setText(event.target.value); interactions?.onChange?.(); }}\n                onKeyDown={event => { if (event.key === 'Escape' && (text ?? '').length > 0) { event.preventDefault(); setText(undefined); } }} />\n        </form>\n    );\n}\n"],"names":["GlobalSearch","element","interactions","bindingOutputs","strings","readFoundationStrings","text","setText","useUrlState","readOptionalString","label","searchLabel","useValueOutput","_jsxs","form","role","className","data-scene-id","id","onSubmit","event","preventDefault","onChange","_jsx","FoundationIcon","name","input","type","aria-label","placeholder","searchPlaceholder","value","target","onKeyDown","key","length","undefined"],"mappings":";;;;;;;;;AAUA;;;;;;IAOO,SAASA,YAAAA,CAAa,EAAEC,OAAO,EAAEC,YAAY,EAAEC,cAAc,EAA4B,EAAA;AAC5F,IAAA,MAAMC,UAAUC,uCAAAA,CAAsBJ,OAAAA,CAAAA;IACtC,MAAM,CAACK,MAAMC,OAAAA,CAAQ,GAAGC,qBAAYC,oCAAAA,CAAmBR,OAAAA,EAAS,QAAA,CAAA,EAAWQ,oCAAAA,CAAmBR,OAAAA,EAAS,MAAA,CAAA,CAAA;AACvG,IAAA,MAAMS,KAAAA,GAAQD,oCAAAA,CAAmBR,OAAAA,EAAS,OAAA,CAAA,IAAYG,QAAQO,WAAW;AAEzEC,IAAAA,0BAAAA,CAAeT,gBAAgBG,IAAAA,IAAQ,EAAA,CAAA;AAEvC,IAAA,qBACIO,eAAA,CAACC,MAAAA,EAAAA;QAAKC,IAAAA,EAAK,QAAA;QAASC,SAAAA,EAAU,8BAAA;AAA+BC,QAAAA,eAAAA,EAAehB,QAAQiB,EAAE;AAAEC,QAAAA,QAAAA,EAAUC,CAAAA,KAAAA,GAAAA;AAAWA,YAAAA,KAAAA,CAAMC,cAAc,EAAA;YAAInB,YAAAA,EAAcoB,QAAAA,IAAAA;AAAc,QAAA,CAAA;;0BAC7JC,cAAA,CAACC,6BAAAA,EAAAA;gBAAeC,IAAAA,EAAK;;0BACrBF,cAAA,CAACG,OAAAA,EAAAA;gBAAMC,IAAAA,EAAK,QAAA;gBAASC,YAAAA,EAAYlB,KAAAA;AAAOmB,gBAAAA,WAAAA,EAAapB,oCAAAA,CAAmBR,OAAAA,EAAS,aAAA,CAAA,IAAkBG,OAAAA,CAAQ0B,iBAAiB;AAAEC,gBAAAA,KAAAA,EAAOzB,IAAAA,IAAQ,EAAA;AACzIgB,gBAAAA,QAAAA,EAAUF,CAAAA,KAAAA,GAAAA;oBAAWb,OAAAA,CAAQa,KAAAA,CAAMY,MAAM,CAACD,KAAK,CAAA;oBAAG7B,YAAAA,EAAcoB,QAAAA,IAAAA;AAAc,gBAAA,CAAA;AAC9EW,gBAAAA,SAAAA,EAAWb,CAAAA,KAAAA,GAAAA;oBAAW,IAAIA,KAAAA,CAAMc,GAAG,KAAK,QAAA,IAAa5B,CAAAA,IAAAA,IAAQ,EAAC,EAAG6B,MAAM,GAAG,CAAA,EAAG;AAAEf,wBAAAA,KAAAA,CAAMC,cAAc,EAAA;wBAAId,OAAAA,CAAQ6B,SAAAA,CAAAA;AAAY,oBAAA;AAAE,gBAAA;;;;AAG7I;;"}