vira 32.0.0-beta.0 → 32.0.0

package/{src/elements/vira-json-form.element.ts → dist/elements/vira-json-form.element.js}

@@ -1,93 +1,53 @@
-import {assertWrap, check} from '@augment-vir/assert';
-import {
-    omitObjectKeys,
-    wrapInTry,
-    type JsonObject,
-    type JsonValue,
-    type PartialWithUndefined,
-} from '@augment-vir/common';
-import {css, defineElementEvent, html, listen, nothing, type HTMLTemplateResult} from 'element-vir';
-import {Plus16Icon, X16Icon} from '../icons/index.js';
-import {viraFontCssVars} from '../styles/font.js';
-import {viraFormCssVars} from '../styles/form-styles.js';
-import {ViraColorVariant, ViraEmphasis, ViraSize} from '../styles/form-variants.js';
-import {defineViraElement} from '../util/define-vira-element.js';
-import {
-    allowsFreeformString,
-    createDefaultForJsonType,
-    createResolveContext,
-    deleteValueAtPath,
-    getAdditionalPropertiesSchema,
-    getAllowedJsonTypes,
-    getDefinedProperties,
-    getItemSchema,
-    getJsonType,
-    getNewItemSchema,
-    getPropertySchema,
-    getRequiredProperties,
-    getSchemaEnumValues,
-    getSchemaTitle,
-    getStringEnumValues,
-    pathToKey,
-    pickBranchForType,
-    setValueAtPath,
-    validateAgainstSchema,
-    ViraJsonType,
-    viraJsonTypeLabels,
-    type SchemaResolveContext,
-    type ViraJsonPath,
-    type ViraJsonSchema,
-} from '../util/vira-json-schema.js';
-import {type ViraSelectOption} from '../util/vira-select-option.js';
-import {ViraButton} from './vira-button.element.js';
-import {ViraCheckbox} from './vira-checkbox.element.js';
-import {ViraError} from './vira-error.element.js';
-import {ViraInput, ViraInputType} from './vira-input.element.js';
-import {ViraSelect} from './vira-select.element.js';
-import {ViraTextArea} from './vira-text-area.element.js';
-
+import { assertWrap, check } from '@augment-vir/assert';
+import { omitObjectKeys, wrapInTry, } from '@augment-vir/common';
+import { css, defineElementEvent, html, listen, nothing } from 'element-vir';
+import { Plus16Icon, X16Icon } from '../icons/index.js';
+import { viraFontCssVars } from '../styles/font.js';
+import { viraFormCssVars } from '../styles/form-styles.js';
+import { ViraColorVariant, ViraEmphasis, ViraSize } from '../styles/form-variants.js';
+import { defineViraElement } from '../util/define-vira-element.js';
+import { allowsFreeformString, createDefaultForJsonType, createResolveContext, deleteValueAtPath, getAdditionalPropertiesSchema, getAllowedJsonTypes, getDefinedProperties, getItemSchema, getJsonType, getNewItemSchema, getPropertySchema, getRequiredProperties, getSchemaEnumValues, getSchemaTitle, getStringEnumValues, pathToKey, pickBranchForType, setValueAtPath, validateAgainstSchema, ViraJsonType, viraJsonTypeLabels, } from '../util/vira-json-schema.js';
+import { ViraButton } from './vira-button.element.js';
+import { ViraCheckbox } from './vira-checkbox.element.js';
+import { ViraError } from './vira-error.element.js';
+import { ViraInput, ViraInputType } from './vira-input.element.js';
+import { ViraSelect } from './vira-select.element.js';
+import { ViraTextArea } from './vira-text-area.element.js';
 /**
  * Editing mode for a string field that offers both a fixed set of enum options and free-form text.
  *
  * @category Internal
  */
-export enum ViraJsonStringMode {
+export var ViraJsonStringMode;
+(function (ViraJsonStringMode) {
     /** Pick from the schema's enum options via a dropdown. */
-    Options = 'options',
+    ViraJsonStringMode["Options"] = "options";
     /** Enter an arbitrary string via a text input. */
-    Custom = 'custom',
-}
-
+    ViraJsonStringMode["Custom"] = "custom";
+})(ViraJsonStringMode || (ViraJsonStringMode = {}));
 /**
  * An editor for arbitrary JSON values, optionally constrained by a standard JSON Schema
  * ({@link ViraJsonSchema}).
  *
  * @category Elements
  */
-export const ViraJsonForm = defineViraElement<
-    {
-        value: JsonValue;
-    } & PartialWithUndefined<{
-        schema: Readonly<ViraJsonSchema>;
-        isDisabled: boolean;
-    }>
->()({
+export const ViraJsonForm = defineViraElement()({
     tagName: 'vira-json-form',
     events: {
-        valueChange: defineElementEvent<JsonValue>(),
+        valueChange: defineElementEvent(),
     },
     state() {
         return {
-            pendingKeys: {} as Readonly<Record<string, string>>,
-            pendingTypes: {} as Readonly<Record<string, ViraJsonType>>,
-            pendingArrayValues: {} as Readonly<Record<string, JsonValue>>,
-            stringModes: {} as Readonly<Record<string, ViraJsonStringMode>>,
+            pendingKeys: {},
+            pendingTypes: {},
+            pendingArrayValues: {},
+            stringModes: {},
             showRaw: false,
-            rawDraft: undefined as string | undefined,
-            rawError: undefined as string | undefined,
+            rawDraft: undefined,
+            rawError: undefined,
         };
     },
-    styles: css`
+    styles: css `
         :host {
             display: flex;
             flex-direction: column;
@@ -241,50 +201,35 @@ export const ViraJsonForm = defineViraElement<
             font-size: ${viraFormCssVars['vira-form-small-text-size'].value};
         }
     `,
-    render({inputs, state, dispatch, events, updateState, host}) {
+    render({ inputs, state, dispatch, events, updateState, host }) {
         const isDisabled = !!inputs.isDisabled;
-        const resolveContext: SchemaResolveContext = createResolveContext(inputs.schema);
-
-        function jsonPrimitiveToString(
-            entry: string | number | boolean | null | undefined,
-        ): string {
+        const resolveContext = createResolveContext(inputs.schema);
+        function jsonPrimitiveToString(entry) {
             return entry == undefined ? 'null' : String(entry);
         }
-
-        function emitRoot(newRoot: JsonValue) {
-            dispatch(
-                new events.valueChange({
-                    detail: newRoot,
-                }),
-            );
+        function emitRoot(newRoot) {
+            dispatch(new events.valueChange({
+                detail: newRoot,
+            }));
         }
-
-        function emitReplaceAt(path: ViraJsonPath, newValue: JsonValue) {
-            emitRoot(
-                setValueAtPath({
-                    root: inputs.value,
-                    path,
-                    newValue,
-                }),
-            );
+        function emitReplaceAt(path, newValue) {
+            emitRoot(setValueAtPath({
+                root: inputs.value,
+                path,
+                newValue,
+            }));
         }
-
-        function emitDeleteAt(path: ViraJsonPath) {
+        function emitDeleteAt(path) {
             emitRoot(deleteValueAtPath(inputs.value, path));
         }
-
-        function getPendingType(
-            pathKey: string,
-            allowedTypes: ReadonlyArray<ViraJsonType>,
-        ): ViraJsonType {
+        function getPendingType(pathKey, allowedTypes) {
             const current = state.pendingTypes[pathKey];
             if (current && allowedTypes.includes(current)) {
                 return current;
             }
             return allowedTypes[0] ?? ViraJsonType.String;
         }
-
-        function setPendingType(pathKey: string, type: ViraJsonType) {
+        function setPendingType(pathKey, type) {
             updateState({
                 pendingTypes: {
                     ...state.pendingTypes,
@@ -292,8 +237,7 @@ export const ViraJsonForm = defineViraElement<
                 },
             });
         }
-
-        function setPendingKey({pathKey, key}: Readonly<{pathKey: string; key: string}>) {
+        function setPendingKey({ pathKey, key }) {
             updateState({
                 pendingKeys: {
                     ...state.pendingKeys,
@@ -301,13 +245,11 @@ export const ViraJsonForm = defineViraElement<
                 },
             });
         }
-
-        function getPendingArrayValue(pathKey: string, fallback: JsonValue): JsonValue {
+        function getPendingArrayValue(pathKey, fallback) {
             const stored = state.pendingArrayValues[pathKey];
             return stored === undefined ? fallback : stored;
         }
-
-        function setPendingArrayValue(pathKey: string, value: JsonValue) {
+        function setPendingArrayValue(pathKey, value) {
             updateState({
                 pendingArrayValues: {
                     ...state.pendingArrayValues,
@@ -315,16 +257,7 @@ export const ViraJsonForm = defineViraElement<
                 },
             });
         }
-
-        function getStringMode({
-            pathKey,
-            value,
-            enumValues,
-        }: Readonly<{
-            pathKey: string;
-            value: string;
-            enumValues: ReadonlyArray<string>;
-        }>): ViraJsonStringMode {
+        function getStringMode({ pathKey, value, enumValues, }) {
             const stored = state.stringModes[pathKey];
             if (stored) {
                 return stored;
@@ -333,8 +266,7 @@ export const ViraJsonForm = defineViraElement<
                 ? ViraJsonStringMode.Options
                 : ViraJsonStringMode.Custom;
         }
-
-        function setStringMode(pathKey: string, mode: ViraJsonStringMode) {
+        function setStringMode(pathKey, mode) {
             updateState({
                 stringModes: {
                     ...state.stringModes,
@@ -342,205 +274,173 @@ export const ViraJsonForm = defineViraElement<
                 },
             });
         }
-
-        function clearPending(pathKey: string) {
+        function clearPending(pathKey) {
             updateState({
                 pendingKeys: omitObjectKeys(state.pendingKeys, [pathKey]),
                 pendingTypes: omitObjectKeys(state.pendingTypes, [pathKey]),
                 pendingArrayValues: omitObjectKeys(state.pendingArrayValues, [pathKey]),
             });
         }
-
-        function renderDeleteButton(onDelete: () => void): HTMLTemplateResult {
-            return html`
+        function renderDeleteButton(onDelete) {
+            return html `
                 <${ViraButton.assign({
-                    icon: X16Icon,
-                    buttonEmphasis: ViraEmphasis.Subtle,
-                    color: ViraColorVariant.Danger,
-                    buttonSize: ViraSize.Small,
-                })}
+                icon: X16Icon,
+                buttonEmphasis: ViraEmphasis.Subtle,
+                color: ViraColorVariant.Danger,
+                buttonSize: ViraSize.Small,
+            })}
                     title="Remove"
                     ${listen('click', onDelete)}
                 ></${ViraButton}>
             `;
         }
-
-        function renderPrimitive(
-            path: ViraJsonPath,
-            value: JsonValue,
-            schema: ViraJsonSchema | undefined,
-        ): HTMLTemplateResult {
+        function renderPrimitive(path, value, schema) {
             const type = getJsonType(value);
             const enumValues = getSchemaEnumValues(schema, resolveContext);
-
             if (enumValues && enumValues.length > 0) {
-                const options: ReadonlyArray<ViraSelectOption> = enumValues.map((entry) => {
-                    const asString = jsonPrimitiveToString(entry as never);
+                const options = enumValues.map((entry) => {
+                    const asString = jsonPrimitiveToString(entry);
                     return {
                         value: asString,
                         label: asString,
                     };
                 });
-                const isPrimitive =
-                    value == undefined ||
+                const isPrimitive = value == undefined ||
                     check.isString(value) ||
                     check.isNumber(value) ||
                     check.isBoolean(value);
-                return html`
+                return html `
                     <${ViraSelect.assign({
-                        options,
-                        value: isPrimitive ? jsonPrimitiveToString(value as never) : undefined,
-                        disabled: isDisabled,
-                    })}
+                    options,
+                    value: isPrimitive ? jsonPrimitiveToString(value) : undefined,
+                    disabled: isDisabled,
+                })}
                         ${listen(ViraSelect.events.valueChange, (event) => {
-                            const selected = enumValues.find(
-                                (entry) => jsonPrimitiveToString(entry as never) === event.detail,
-                            );
-                            emitReplaceAt(path, selected ?? event.detail);
-                        })}
+                    const selected = enumValues.find((entry) => jsonPrimitiveToString(entry) === event.detail);
+                    emitReplaceAt(path, selected ?? event.detail);
+                })}
                     ></${ViraSelect}>
                 `;
-            } else if (type === ViraJsonType.Boolean) {
-                return html`
+            }
+            else if (type === ViraJsonType.Boolean) {
+                return html `
                     <${ViraCheckbox.assign({
-                        value: value === true,
-                        isDisabled,
-                    })}
+                    value: value === true,
+                    isDisabled,
+                })}
                         ${listen(ViraCheckbox.events.valueChange, (event) => {
-                            emitReplaceAt(path, event.detail);
-                        })}
+                    emitReplaceAt(path, event.detail);
+                })}
                     ></${ViraCheckbox}>
                 `;
-            } else if (type === ViraJsonType.Number || type === ViraJsonType.Integer) {
+            }
+            else if (type === ViraJsonType.Number || type === ViraJsonType.Integer) {
                 const schemaAllowedTypes = getAllowedJsonTypes(schema, resolveContext);
-                const isIntegerOnly =
-                    schemaAllowedTypes.length === 1 &&
+                const isIntegerOnly = schemaAllowedTypes.length === 1 &&
                     schemaAllowedTypes[0] === ViraJsonType.Integer;
-                return html`
+                return html `
                     <${ViraInput.assign({
-                        type: ViraInputType.Number,
-                        value: check.isNumber(value) ? String(value) : '',
-                        disabled: isDisabled,
-                        allowedInputs: isIntegerOnly ? /[\d-]/ : /[\d.-]/,
-                    })}
+                    type: ViraInputType.Number,
+                    value: check.isNumber(value) ? String(value) : '',
+                    disabled: isDisabled,
+                    allowedInputs: isIntegerOnly ? /[\d-]/ : /[\d.-]/,
+                })}
                         ${listen(ViraInput.events.valueChange, (event) => {
-                            const text = event.detail;
-                            const parsed = text === '' ? 0 : Number(text);
-                            const clean = Number.isFinite(parsed) ? parsed : 0;
-                            emitReplaceAt(path, isIntegerOnly ? Math.trunc(clean) : clean);
-                        })}
+                    const text = event.detail;
+                    const parsed = text === '' ? 0 : Number(text);
+                    const clean = Number.isFinite(parsed) ? parsed : 0;
+                    emitReplaceAt(path, isIntegerOnly ? Math.trunc(clean) : clean);
+                })}
                     ></${ViraInput}>
                 `;
-            } else if (type === ViraJsonType.Null) {
-                return html`
+            }
+            else if (type === ViraJsonType.Null) {
+                return html `
                     <span class="json-null-indicator">null</span>
                 `;
-            } else {
-                return html`
+            }
+            else {
+                return html `
                     <${ViraInput.assign({
-                        value: check.isString(value) ? value : '',
-                        disabled: isDisabled,
-                    })}
+                    value: check.isString(value) ? value : '',
+                    disabled: isDisabled,
+                })}
                         ${listen(ViraInput.events.valueChange, (event) => {
-                            emitReplaceAt(path, event.detail);
-                        })}
+                    emitReplaceAt(path, event.detail);
+                })}
                     ></${ViraInput}>
                 `;
             }
         }
-
-        function renderInlineValueEditor(
-            type: ViraJsonType,
-            currentValue: JsonValue,
-            onChange: (value: JsonValue) => void,
-        ): HTMLTemplateResult | typeof nothing {
+        function renderInlineValueEditor(type, currentValue, onChange) {
             if (type === ViraJsonType.String) {
                 const text = check.isString(currentValue) ? currentValue : '';
-                return html`
+                return html `
                     <${ViraInput.assign({
-                        value: text,
-                        placeholder: 'new item value',
-                    })}
+                    value: text,
+                    placeholder: 'new item value',
+                })}
                         class="json-add-value-input"
                         ${listen(ViraInput.events.valueChange, (event) => {
-                            onChange(event.detail);
-                        })}
+                    onChange(event.detail);
+                })}
                     ></${ViraInput}>
                 `;
-            } else if (type === ViraJsonType.Number || type === ViraJsonType.Integer) {
+            }
+            else if (type === ViraJsonType.Number || type === ViraJsonType.Integer) {
                 const isIntegerOnly = type === ViraJsonType.Integer;
                 const numText = check.isNumber(currentValue) ? String(currentValue) : '';
-                return html`
+                return html `
                     <${ViraInput.assign({
-                        type: ViraInputType.Number,
-                        value: numText,
-                        placeholder: 'new item value',
-                        allowedInputs: isIntegerOnly ? /[\d-]/ : /[\d.-]/,
-                    })}
+                    type: ViraInputType.Number,
+                    value: numText,
+                    placeholder: 'new item value',
+                    allowedInputs: isIntegerOnly ? /[\d-]/ : /[\d.-]/,
+                })}
                         class="json-add-value-input"
                         ${listen(ViraInput.events.valueChange, (event) => {
-                            const text = event.detail;
-                            const parsed = text === '' ? 0 : Number(text);
-                            const clean = Number.isFinite(parsed) ? parsed : 0;
-                            onChange(isIntegerOnly ? Math.trunc(clean) : clean);
-                        })}
+                    const text = event.detail;
+                    const parsed = text === '' ? 0 : Number(text);
+                    const clean = Number.isFinite(parsed) ? parsed : 0;
+                    onChange(isIntegerOnly ? Math.trunc(clean) : clean);
+                })}
                     ></${ViraInput}>
                 `;
-            } else if (type === ViraJsonType.Boolean) {
-                return html`
+            }
+            else if (type === ViraJsonType.Boolean) {
+                return html `
                     <${ViraCheckbox.assign({
-                        value: currentValue === true,
-                    })}
+                    value: currentValue === true,
+                })}
                         ${listen(ViraCheckbox.events.valueChange, (event) => {
-                            onChange(event.detail);
-                        })}
+                    onChange(event.detail);
+                })}
                     ></${ViraCheckbox}>
                 `;
-            } else {
+            }
+            else {
                 return nothing;
             }
         }
-
-        function renderPlusButton({
-            isAddDisabled,
-            tooltip,
-            onClick,
-        }: {
-            isAddDisabled: boolean;
-            tooltip: string;
-            onClick: () => void;
-        }): HTMLTemplateResult {
-            return html`
+        function renderPlusButton({ isAddDisabled, tooltip, onClick, }) {
+            return html `
                 <${ViraButton.assign({
-                    icon: Plus16Icon,
-                    color: ViraColorVariant.Positive,
-                    buttonSize: ViraSize.Small,
-                    isDisabled: isAddDisabled,
-                })}
+                icon: Plus16Icon,
+                color: ViraColorVariant.Positive,
+                buttonSize: ViraSize.Small,
+                isDisabled: isAddDisabled,
+            })}
                     title=${tooltip}
                     ${listen('click', () => {
-                        if (isAddDisabled) {
-                            return;
-                        }
-                        onClick();
-                    })}
+                if (isAddDisabled) {
+                    return;
+                }
+                onClick();
+            })}
                 ></${ViraButton}>
             `;
         }
-
-        function renderObjectAddControl({
-            pathKey,
-            allowedTypes,
-            canAdd,
-            disabledReason,
-            onAdd,
-        }: {
-            pathKey: string;
-            allowedTypes: ReadonlyArray<ViraJsonType>;
-            canAdd: boolean;
-            disabledReason: string;
-            onAdd: (type: ViraJsonType) => void;
-        }): HTMLTemplateResult | typeof nothing {
+        function renderObjectAddControl({ pathKey, allowedTypes, canAdd, disabledReason, onAdd, }) {
             if (allowedTypes.length === 0) {
                 return nothing;
             }
@@ -550,117 +450,107 @@ export const ViraJsonForm = defineViraElement<
                 return renderPlusButton({
                     isAddDisabled,
                     tooltip: isAddDisabled ? disabledReason : `Add ${viraJsonTypeLabels[onlyType]}`,
-                    onClick: () => onAdd(onlyType),
+                    onClick() {
+                        return onAdd(onlyType);
+                    },
                 });
             }
             const selectedType = getPendingType(pathKey, allowedTypes);
-            const options: ReadonlyArray<ViraSelectOption> = allowedTypes.map((type) => {
+            const options = allowedTypes.map((type) => {
                 return {
                     value: type,
                     label: viraJsonTypeLabels[type],
                 };
             });
-            return html`
+            return html `
                 <${ViraSelect.assign({
-                    options,
-                    value: selectedType,
-                })}
+                options,
+                value: selectedType,
+            })}
                     ${listen(ViraSelect.events.valueChange, (event) => {
-                        setPendingType(pathKey, event.detail as ViraJsonType);
-                    })}
+                setPendingType(pathKey, event.detail);
+            })}
                 ></${ViraSelect}>
                 ${renderPlusButton({
-                    isAddDisabled,
-                    tooltip: isAddDisabled
-                        ? disabledReason
-                        : `Add ${viraJsonTypeLabels[selectedType]}`,
-                    onClick: () => onAdd(selectedType),
-                })}
+                isAddDisabled,
+                tooltip: isAddDisabled
+                    ? disabledReason
+                    : `Add ${viraJsonTypeLabels[selectedType]}`,
+                onClick() {
+                    return onAdd(selectedType);
+                },
+            })}
             `;
         }
-
-        function renderArrayAddControl({
-            pathKey,
-            allowedTypes,
-            onAdd,
-        }: {
-            pathKey: string;
-            allowedTypes: ReadonlyArray<ViraJsonType>;
-            onAdd: (newValue: JsonValue) => void;
-        }): HTMLTemplateResult | typeof nothing {
+        function renderArrayAddControl({ pathKey, allowedTypes, onAdd, }) {
             if (allowedTypes.length === 0) {
                 return nothing;
-            } else if (allowedTypes.length === 1) {
+            }
+            else if (allowedTypes.length === 1) {
                 const onlyType = assertWrap.isDefined(allowedTypes[0]);
-                const isPrimitivePrimitive =
-                    onlyType === ViraJsonType.String ||
+                const isPrimitivePrimitive = onlyType === ViraJsonType.String ||
                     onlyType === ViraJsonType.Number ||
                     onlyType === ViraJsonType.Integer ||
                     onlyType === ViraJsonType.Boolean;
-
                 if (!isPrimitivePrimitive) {
                     return renderPlusButton({
                         isAddDisabled: false,
                         tooltip: `Add ${viraJsonTypeLabels[onlyType]}`,
-                        onClick: () => onAdd(createDefaultForJsonType(onlyType)),
+                        onClick() {
+                            return onAdd(createDefaultForJsonType(onlyType));
+                        },
                     });
                 }
-
                 const fallback = createDefaultForJsonType(onlyType);
                 const pendingValue = getPendingArrayValue(pathKey, fallback);
                 const inlineEditor = renderInlineValueEditor(onlyType, pendingValue, (value) => {
                     return setPendingArrayValue(pathKey, value);
                 });
-                return html`
+                return html `
                     ${inlineEditor}
                     ${renderPlusButton({
-                        isAddDisabled: false,
-                        tooltip: `Add ${viraJsonTypeLabels[onlyType]}`,
-                        onClick: () => {
-                            onAdd(pendingValue);
-                            clearPending(pathKey);
-                        },
-                    })}
+                    isAddDisabled: false,
+                    tooltip: `Add ${viraJsonTypeLabels[onlyType]}`,
+                    onClick() {
+                        onAdd(pendingValue);
+                        clearPending(pathKey);
+                    },
+                })}
                 `;
-            } else {
+            }
+            else {
                 const selectedType = getPendingType(pathKey, allowedTypes);
-                const options: ReadonlyArray<ViraSelectOption> = allowedTypes.map((type) => {
+                const options = allowedTypes.map((type) => {
                     return {
                         value: type,
                         label: viraJsonTypeLabels[type],
                     };
                 });
-                return html`
+                return html `
                     <${ViraSelect.assign({
-                        options,
-                        value: selectedType,
-                    })}
+                    options,
+                    value: selectedType,
+                })}
                         ${listen(ViraSelect.events.valueChange, (event) => {
-                            setPendingType(pathKey, event.detail as ViraJsonType);
-                        })}
+                    setPendingType(pathKey, event.detail);
+                })}
                     ></${ViraSelect}>
                     ${renderPlusButton({
-                        isAddDisabled: false,
-                        tooltip: `Add ${viraJsonTypeLabels[selectedType]}`,
-                        onClick: () => onAdd(createDefaultForJsonType(selectedType)),
-                    })}
+                    isAddDisabled: false,
+                    tooltip: `Add ${viraJsonTypeLabels[selectedType]}`,
+                    onClick() {
+                        return onAdd(createDefaultForJsonType(selectedType));
+                    },
+                })}
                 `;
             }
         }
-
-        function getNestedTypeLabel(schema: ViraJsonSchema | undefined, value: JsonValue): string {
+        function getNestedTypeLabel(schema, value) {
             const concreteType = getJsonType(value);
             const narrowedSchema = pickBranchForType(schema, concreteType, resolveContext);
-            return (
-                getSchemaTitle(narrowedSchema, resolveContext) || viraJsonTypeLabels[concreteType]
-            );
+            return (getSchemaTitle(narrowedSchema, resolveContext) || viraJsonTypeLabels[concreteType]);
         }
-
-        function renderObjectGroup(
-            path: ViraJsonPath,
-            value: JsonObject,
-            schema: ViraJsonSchema | undefined,
-        ): HTMLTemplateResult {
+        function renderObjectGroup(path, value, schema) {
             const pathKey = pathToKey(path);
             const isRoot = path.length === 0;
             const requiredKeys = new Set(getRequiredProperties(schema, resolveContext));
@@ -668,31 +558,28 @@ export const ViraJsonForm = defineViraElement<
             const definedKeys = new Set(Object.keys(definedProperties));
             const presentKeys = Object.keys(value);
             const additional = getAdditionalPropertiesSchema(schema, resolveContext);
-
             const rowTemplates = presentKeys.map((key) => {
                 const childSchema = getPropertySchema(schema, key, resolveContext);
                 const isRequired = requiredKeys.has(key);
                 const isSchemaDefined = definedKeys.has(key);
                 const canDelete = !isDisabled && !isRequired;
-                const childValue: JsonValue = value[key] ?? null;
+                const childValue = value[key] ?? null;
                 const childType = getJsonType(childValue);
-                const isChildNested =
-                    childType === ViraJsonType.Object || childType === ViraJsonType.Array;
-                const childPath: ViraJsonPath = [
+                const isChildNested = childType === ViraJsonType.Object || childType === ViraJsonType.Array;
+                const childPath = [
                     ...path,
                     key,
                 ];
                 const childOnDelete = canDelete
                     ? () => {
-                          emitDeleteAt(childPath);
-                          if (!isSchemaDefined) {
-                              clearPending(pathKey);
-                          }
-                      }
+                        emitDeleteAt(childPath);
+                        if (!isSchemaDefined) {
+                            clearPending(pathKey);
+                        }
+                    }
                     : undefined;
-
                 if (isChildNested) {
-                    return html`
+                    return html `
                         <tr class="json-row-nested">
                             <td colspan="3">
                                 <div class="json-row-nested-header">
@@ -709,8 +596,7 @@ export const ViraJsonForm = defineViraElement<
                         </tr>
                     `;
                 }
-
-                return html`
+                return html `
                     <tr class="json-row-primitive">
                         <td class="json-row-label">${key}${isRequired ? '*' : ''}</td>
                         <td class="json-row-editor">
@@ -722,142 +608,122 @@ export const ViraJsonForm = defineViraElement<
                     </tr>
                 `;
             });
-
             const missingDefinedKeys = [...definedKeys].filter((key) => !(key in value));
             const suggestedKeyButtons = isDisabled
                 ? []
                 : missingDefinedKeys.map((key) => {
-                      const childSchema = definedProperties[key];
-                      const childAllowed = getAllowedJsonTypes(childSchema, resolveContext);
-                      const addType = childAllowed[0] ?? ViraJsonType.String;
-                      return html`
+                    const childSchema = definedProperties[key];
+                    const childAllowed = getAllowedJsonTypes(childSchema, resolveContext);
+                    const addType = childAllowed[0] ?? ViraJsonType.String;
+                    return html `
                           <${ViraButton.assign({
-                              text: `"${key}"`,
-                              icon: Plus16Icon,
-                              color: ViraColorVariant.Positive,
-                              buttonSize: ViraSize.Small,
-                          })}
+                        text: `"${key}"`,
+                        icon: Plus16Icon,
+                        color: ViraColorVariant.Positive,
+                        buttonSize: ViraSize.Small,
+                    })}
                               ${listen('click', () => {
-                                  emitReplaceAt(
-                                      [
-                                          ...path,
-                                          key,
-                                      ],
-                                      createDefaultForJsonType(addType),
-                                  );
-                              })}
+                        emitReplaceAt([
+                            ...path,
+                            key,
+                        ], createDefaultForJsonType(addType));
+                    })}
                           ></${ViraButton}>
                       `;
-                  });
-
+                });
             const pendingKey = state.pendingKeys[pathKey] ?? '';
             const trimmedPendingKey = pendingKey.trim();
             const canAddArbitraryField = !!trimmedPendingKey && !(trimmedPendingKey in value);
             const additionalAllowedTypes = additional.allowed
                 ? getAllowedJsonTypes(additional.schema, resolveContext)
                 : [];
-
             const arbitraryAddDisabledReason = trimmedPendingKey
                 ? `Field "${trimmedPendingKey}" already exists.`
                 : 'Enter a field name to add.';
-
-            const arbitraryAddRow =
-                additional.allowed && !isDisabled
-                    ? html`
+            const arbitraryAddRow = additional.allowed && !isDisabled
+                ? html `
                           <tr>
                               <td colspan="3">
                                   <div class="json-add-row">
                                       <${ViraInput.assign({
-                                          value: pendingKey,
-                                          placeholder: 'new field name',
-                                      })}
+                    value: pendingKey,
+                    placeholder: 'new field name',
+                })}
                                           ${listen(ViraInput.events.valueChange, (event) => {
-                                              setPendingKey({
-                                                  pathKey,
-                                                  key: event.detail,
-                                              });
-                                          })}
+                    setPendingKey({
+                        pathKey,
+                        key: event.detail,
+                    });
+                })}
                                       ></${ViraInput}>
                                       ${renderObjectAddControl({
-                                          pathKey,
-                                          allowedTypes: additionalAllowedTypes,
-                                          canAdd: canAddArbitraryField,
-                                          disabledReason: arbitraryAddDisabledReason,
-                                          onAdd: (type) => {
-                                              if (!canAddArbitraryField) {
-                                                  return;
-                                              }
-                                              emitReplaceAt(
-                                                  [
-                                                      ...path,
-                                                      trimmedPendingKey,
-                                                  ],
-                                                  createDefaultForJsonType(type),
-                                              );
-                                              clearPending(pathKey);
-                                          },
-                                      })}
+                    pathKey,
+                    allowedTypes: additionalAllowedTypes,
+                    canAdd: canAddArbitraryField,
+                    disabledReason: arbitraryAddDisabledReason,
+                    onAdd(type) {
+                        if (!canAddArbitraryField) {
+                            return;
+                        }
+                        emitReplaceAt([
+                            ...path,
+                            trimmedPendingKey,
+                        ], createDefaultForJsonType(type));
+                        clearPending(pathKey);
+                    },
+                })}
                                   </div>
                               </td>
                           </tr>
                       `
-                    : nothing;
-
-            return html`
+                : nothing;
+            return html `
                 <table class="json-group ${isRoot ? '' : 'json-group-nested'}">
                     <tbody>
                         ${rowTemplates.length === 0 && suggestedKeyButtons.length === 0
-                            ? html`
+                ? html `
                                   <tr>
                                       <td colspan="3">
                                           <span class="json-empty-note">(empty object)</span>
                                       </td>
                                   </tr>
                               `
-                            : nothing}
+                : nothing}
                         ${rowTemplates}
                         ${suggestedKeyButtons.length > 0
-                            ? html`
+                ? html `
                                   <tr>
                                       <td colspan="3">
                                           <div class="json-add-row">${suggestedKeyButtons}</div>
                                       </td>
                                   </tr>
                               `
-                            : nothing}
+                : nothing}
                         ${arbitraryAddRow}
                     </tbody>
                 </table>
             `;
         }
-
-        function renderArrayGroup(
-            path: ViraJsonPath,
-            value: ReadonlyArray<JsonValue>,
-            schema: ViraJsonSchema | undefined,
-        ): HTMLTemplateResult {
+        function renderArrayGroup(path, value, schema) {
             const pathKey = pathToKey(path);
             const isRoot = path.length === 0;
             const newItemSchema = getNewItemSchema(schema, value.length, resolveContext);
             const allowedItemTypes = getAllowedJsonTypes(newItemSchema, resolveContext);
-
             const rowTemplates = value.map((item, index) => {
                 const childSchema = getItemSchema(schema, index, resolveContext);
                 const childType = getJsonType(item);
-                const isChildNested =
-                    childType === ViraJsonType.Object || childType === ViraJsonType.Array;
-                const childPath: ViraJsonPath = [
+                const isChildNested = childType === ViraJsonType.Object || childType === ViraJsonType.Array;
+                const childPath = [
                     ...path,
                     index,
                 ];
                 const childOnDelete = isDisabled
                     ? undefined
                     : () => {
-                          emitDeleteAt(childPath);
-                      };
-
+                        emitDeleteAt(childPath);
+                    };
                 if (isChildNested) {
-                    return html`
+                    return html `
                         <tr class="json-row-nested">
                             <td colspan="3">
                                 <div class="json-row-nested-header">
@@ -874,8 +740,7 @@ export const ViraJsonForm = defineViraElement<
                         </tr>
                     `;
                 }
-
-                return html`
+                return html `
                     <tr class="json-row-primitive">
                         <td class="json-row-label">[${index}]</td>
                         <td class="json-row-editor">
@@ -887,95 +752,81 @@ export const ViraJsonForm = defineViraElement<
                     </tr>
                 `;
             });
-
             const addRow = isDisabled
                 ? nothing
-                : html`
+                : html `
                       <tr>
                           <td colspan="3">
                               <div class="json-add-row">
                                   ${renderArrayAddControl({
-                                      pathKey,
-                                      allowedTypes: allowedItemTypes,
-                                      onAdd: (newValue) => {
-                                          emitReplaceAt(
-                                              [
-                                                  ...path,
-                                                  value.length,
-                                              ],
-                                              newValue,
-                                          );
-                                      },
-                                  })}
+                    pathKey,
+                    allowedTypes: allowedItemTypes,
+                    onAdd(newValue) {
+                        emitReplaceAt([
+                            ...path,
+                            value.length,
+                        ], newValue);
+                    },
+                })}
                               </div>
                           </td>
                       </tr>
                   `;
-
-            return html`
+            return html `
                 <table class="json-group ${isRoot ? '' : 'json-group-nested'}">
                     <tbody>
                         ${rowTemplates.length === 0
-                            ? html`
+                ? html `
                                   <tr>
                                       <td colspan="3">
                                           <span class="json-empty-note">(empty array)</span>
                                       </td>
                                   </tr>
                               `
-                            : nothing}
+                : nothing}
                         ${rowTemplates} ${addRow}
                     </tbody>
                 </table>
             `;
         }
-
-        function renderStringEnumOrRaw(
-            path: ViraJsonPath,
-            value: string,
-            enumValues: ReadonlyArray<string>,
-        ): HTMLTemplateResult {
+        function renderStringEnumOrRaw(path, value, enumValues) {
             const pathKey = pathToKey(path);
             const mode = getStringMode({
                 pathKey,
                 value,
                 enumValues,
             });
-
-            const editor =
-                mode === ViraJsonStringMode.Options
-                    ? html`
+            const editor = mode === ViraJsonStringMode.Options
+                ? html `
                           <${ViraSelect.assign({
-                              options: enumValues.map((entry) => {
-                                  return {
-                                      value: entry,
-                                      label: entry,
-                                  };
-                              }),
-                              value: enumValues.includes(value) ? value : undefined,
-                              disabled: isDisabled,
-                          })}
+                    options: enumValues.map((entry) => {
+                        return {
+                            value: entry,
+                            label: entry,
+                        };
+                    }),
+                    value: enumValues.includes(value) ? value : undefined,
+                    disabled: isDisabled,
+                })}
                               ${listen(ViraSelect.events.valueChange, (event) => {
-                                  emitReplaceAt(path, event.detail);
-                              })}
+                    emitReplaceAt(path, event.detail);
+                })}
                           ></${ViraSelect}>
                       `
-                    : html`
+                : html `
                           <${ViraInput.assign({
-                              value,
-                              disabled: isDisabled,
-                          })}
+                    value,
+                    disabled: isDisabled,
+                })}
                               ${listen(ViraInput.events.valueChange, (event) => {
-                                  emitReplaceAt(path, event.detail);
-                              })}
+                    emitReplaceAt(path, event.detail);
+                })}
                           ></${ViraInput}>
                       `;
-
             if (isDisabled) {
                 return editor;
             }
-
-            const modeOptions: ReadonlyArray<ViraSelectOption> = [
+            const modeOptions = [
                 {
                     value: ViraJsonStringMode.Options,
                     label: 'Options',
@@ -985,170 +836,153 @@ export const ViraJsonForm = defineViraElement<
                     label: 'Custom',
                 },
             ];
-
-            return html`
+            return html `
                 <div class="json-value-with-switcher">
                     <span class="json-value-editor-slot">${editor}</span>
                     <${ViraSelect.assign({
-                        options: modeOptions,
-                        value: mode,
-                    })}
+                options: modeOptions,
+                value: mode,
+            })}
                         title="Choose from options or enter a custom value"
                         ${listen(ViraSelect.events.valueChange, (event) => {
-                            setStringMode(pathKey, event.detail as ViraJsonStringMode);
-                        })}
+                setStringMode(pathKey, event.detail);
+            })}
                     ></${ViraSelect}>
                 </div>
             `;
         }
-
-        function renderValue(
-            path: ViraJsonPath,
-            value: JsonValue,
-            schema: ViraJsonSchema | undefined,
-        ): HTMLTemplateResult {
+        function renderValue(path, value, schema) {
             const concreteType = getJsonType(value);
             const allowedTypes = getAllowedJsonTypes(schema, resolveContext);
             const narrowedSchema = pickBranchForType(schema, concreteType, resolveContext);
-
             if (check.isArray(value)) {
                 return renderArrayGroup(path, value, narrowedSchema);
-            } else if (check.isObject(value)) {
+            }
+            else if (check.isObject(value)) {
                 return renderObjectGroup(path, value, narrowedSchema);
             }
-
             /**
              * When a string field constrains values to an enum but also permits free-form strings,
              * offer both: an options dropdown plus a switcher to toggle to raw text entry.
              */
-            const isStringOnlyField =
-                allowedTypes.length === 1 && allowedTypes[0] === ViraJsonType.String;
+            const isStringOnlyField = allowedTypes.length === 1 && allowedTypes[0] === ViraJsonType.String;
             const stringEnumValues = isStringOnlyField
                 ? getStringEnumValues(schema, resolveContext)
                 : [];
-            if (
-                check.isString(value) &&
+            if (check.isString(value) &&
                 stringEnumValues.length > 0 &&
-                allowsFreeformString(schema, resolveContext)
-            ) {
+                allowsFreeformString(schema, resolveContext)) {
                 return renderStringEnumOrRaw(path, value, stringEnumValues);
             }
-
             const editor = renderPrimitive(path, value, narrowedSchema);
-            const showSwitcher =
-                !isDisabled &&
+            const showSwitcher = !isDisabled &&
                 allowedTypes.length > 1 &&
                 !allowedTypes.includes(ViraJsonType.Object) &&
                 !allowedTypes.includes(ViraJsonType.Array);
-
             if (!showSwitcher) {
                 return editor;
             }
-
             const switcherSelected = allowedTypes.includes(concreteType)
                 ? concreteType
                 : (allowedTypes[0] ?? concreteType);
-            const switcherOptions: ReadonlyArray<ViraSelectOption> = allowedTypes.map((type) => {
+            const switcherOptions = allowedTypes.map((type) => {
                 return {
                     value: type,
                     label: viraJsonTypeLabels[type],
                 };
             });
-            return html`
+            return html `
                 <div class="json-value-with-switcher">
                     <span class="json-value-editor-slot">${editor}</span>
                     <${ViraSelect.assign({
-                        options: switcherOptions,
-                        value: switcherSelected,
-                    })}
+                options: switcherOptions,
+                value: switcherSelected,
+            })}
                         title="Change type"
                         ${listen(ViraSelect.events.valueChange, (event) => {
-                            const newType = event.detail as ViraJsonType;
-                            emitReplaceAt(path, createDefaultForJsonType(newType));
-                        })}
+                const newType = event.detail;
+                emitReplaceAt(path, createDefaultForJsonType(newType));
+            })}
                     ></${ViraSelect}>
                 </div>
             `;
         }
-
-        const toolbarTemplate = html`
+        const toolbarTemplate = html `
             <div class="json-toolbar">
                 <${ViraButton.assign({
-                    text: state.showRaw ? 'Rich' : 'Raw',
-                    buttonEmphasis: ViraEmphasis.Subtle,
-                    color: ViraColorVariant.Neutral,
-                    buttonSize: ViraSize.Small,
-                })}
+            text: state.showRaw ? 'Rich' : 'Raw',
+            buttonEmphasis: ViraEmphasis.Subtle,
+            color: ViraColorVariant.Neutral,
+            buttonSize: ViraSize.Small,
+        })}
                     title=${state.showRaw ? 'Show rich editor' : 'Show raw JSON'}
                     ${listen('click', () => {
-                        const goingToRaw = !state.showRaw;
-                        host.style.minWidth = goingToRaw ? `${host.offsetWidth}px` : '';
-                        updateState({
-                            showRaw: goingToRaw,
-                            rawDraft: undefined,
-                            rawError: undefined,
-                        });
-                    })}
+            const goingToRaw = !state.showRaw;
+            host.style.minWidth = goingToRaw ? `${host.offsetWidth}px` : '';
+            updateState({
+                showRaw: goingToRaw,
+                rawDraft: undefined,
+                rawError: undefined,
+            });
+        })}
                 ></${ViraButton}>
             </div>
         `;
-
         if (state.showRaw) {
             const rawText = state.rawDraft ?? JSON.stringify(inputs.value, undefined, 4);
-            return html`
+            return html `
                 ${toolbarTemplate}
                 <${ViraTextArea.assign({
-                    value: rawText,
-                    disabled: isDisabled,
-                    disableBrowserHelps: true,
-                    rows: 12,
-                })}
+                value: rawText,
+                disabled: isDisabled,
+                disableBrowserHelps: true,
+                rows: 12,
+            })}
                     class="json-raw-textarea"
                     ${listen(ViraTextArea.events.valueChange, (event) => {
-                        const text = event.detail;
-                        const parsed = wrapInTry(() => JSON.parse(text) as JsonValue);
-                        if (parsed instanceof Error) {
-                            updateState({
-                                rawDraft: text,
-                                rawError: parsed.message,
-                            });
-                        } else {
-                            updateState({
-                                rawDraft: text,
-                                rawError: undefined,
-                            });
-                            emitRoot(parsed);
-                        }
-                    })}
+                const text = event.detail;
+                const parsed = wrapInTry(() => JSON.parse(text));
+                if (parsed instanceof Error) {
+                    updateState({
+                        rawDraft: text,
+                        rawError: parsed.message,
+                    });
+                }
+                else {
+                    updateState({
+                        rawDraft: text,
+                        rawError: undefined,
+                    });
+                    emitRoot(parsed);
+                }
+            })}
                 ></${ViraTextArea}>
                 ${state.rawError
-                    ? html`
+                ? html `
                           <${ViraError}>${state.rawError}</${ViraError}>
                       `
-                    : nothing}
+                : nothing}
             `;
         }
-
         const validationErrors = validateAgainstSchema(inputs.value, inputs.schema);
         if (validationErrors.length > 0) {
-            return html`
+            return html `
                 ${toolbarTemplate}
                 <${ViraError}>
                     <div class="json-validation-errors">
                         <div>Value does not match schema:</div>
                         <ul>
                             ${validationErrors.map((errorMessage) => {
-                                return html`
+                return html `
                                     <li>${errorMessage}</li>
                                 `;
-                            })}
+            })}
                         </ul>
                     </div>
                 </${ViraError}>
             `;
         }
-
-        return html`
+        return html `
             ${toolbarTemplate} ${renderValue([], inputs.value, inputs.schema)}
         `;
     },