@phis/ui 0.2.0 → 0.3.0

package/plugins/runtime-modules/builder/clients/inspector-config-field.js

@@ -1,13 +1,17 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useMemo, useState } from "react";
-import { theme } from "antd";
+import { Fragment, useMemo, useState } from "react";
+import { readPhiDotPath } from "../../../../helpers/dot-path";
+import { PhiCheckboxGroupControl } from "../../../../components/controls/phi-checkbox-group-control";
+import { PhiDividerControl } from "../../../../components/controls/phi-divider-control";
+import { usePhiConfig } from "../../../../components/root/phi-config-provider";
 import { readPhiLengthValue } from "../../../../types";
 import { normalizePhiPaddingWidgetConfig, } from "../../../../types/cms-config";
 import { PhiBackgroundControl } from "../../../../components/controls/phi-background-control";
 import { PhiBorderControl } from "../../../../components/controls/phi-border-control";
 import { PhiColorFieldControl } from "../../../../components/controls/phi-color-field-control";
 import { PhiInspectorLinkTargetFieldControl, } from "./inspector-link-target-field";
+import { PhiInspectorImageFieldControl } from "./inspector-image-field";
 import { PHI_RADIUS_CONTROL_DEFAULT_LABELS, PhiBoundRadiusControl } from "../../../../components/controls/phi-bound-radius-control";
 import { PhiDimensionControl } from "../../../../components/controls/phi-dimension-control";
 import { PhiLengthControl } from "../../../../components/controls/phi-length-control";
@@ -18,6 +22,7 @@ import { PhiNumberControl } from "../../../../components/controls/phi-number-con
 import { PhiMultiSelectControl } from "../../../../components/controls/phi-multi-select-control";
 import { PhiSelectControl } from "../../../../components/controls/phi-select-control";
 import { PhiSwitchControl } from "../../../../components/controls/phi-switch-control";
+import { PhiSliderControl } from "../../../../components/controls/phi-slider-control";
 import { PhiButtonControl } from "../../../../components/controls/phi-button-control";
 import { PhiWidgetIconPickerButton } from "../../../../components/widgets/client/shared/phi-widget-icon-picker";
 import { usePhiWidgetScaffoldPopup } from "../../../../components/widgets/client/shared/phi-widget-scaffold-popup";
@@ -26,63 +31,177 @@ import { PhiIcon } from "../../../../components/shell/phi-icon";
 import { PhiPaddingControl } from "../../../../components/controls/phi-padding-control";
 import { PHI_INSPECTOR_FIELD_LABEL_WIDTH, PhiInspectorFieldRow } from "../../../../components/widgets/inspector-field-row";
 import { PhiShadowControl } from "../../../../components/controls/phi-shadow-control";
+import { PhiSurfaceControl } from "../../../../components/controls/phi-surface-control";
+import { readPhiSurface } from "../../../../types/surface";
 import { readPhiShadow } from "../../../../types/layout-style";
 import { readInspectorChoiceMultiValue, readInspectorChoiceSingleValue, } from "./inspector-choice-values";
 import { PhiFlexControl } from "../../../../components/controls/phi-flex-control";
 import { PhiTypographyControl } from "../../../../components/controls/phi-typography-control";
+import { PhiDescriptionHint } from "../../../../components/controls/phi-description-tooltip-icon";
 import { isPhiRecord } from "../../../../helpers/is-record";
+import { PHI_INSPECTOR_WIDGET_DEFAULT_LABELS, } from "../../../../components/widgets/label-types/inspector";
 const PHI_STATIC_OPTIONS_PROVIDER_VALUE = "__phi_static_options__";
 export function renderPhiInspectorSettingsRow(label, control, key) {
     return (_jsx(PhiInspectorFieldRow, { label: label, children: control }, key));
 }
+/**
+ * A switch in the Inspector's two columns: its label on the left, the switch in the control column.
+ *
+ * Shared by the boolean field and by the switches that are not config fields -- a node flag such as
+ * "Translate text". A switch drawn with its own inline label instead lands in the label column and
+ * stands out of line with every switch above it.
+ *
+ * The row's label is one control height tall and the switch is shorter, so left to the row's top
+ * alignment it sat above the text's centre line. Centred in the same height it sits where the Corner
+ * radius header puts its switch, and the switches of a Widget line up.
+ */
+/*
+ * A slider moved by hand writes once, where it is let go: the Builder's history records the change and
+ * not every step of the drag. While it moves it shows its own position, which the stored value does not
+ * have yet.
+ */
+function PhiInspectorSliderField({ value, min, max, step, suffix, disabled, onCommit, }) {
+    const [dragged, setDragged] = useState(null);
+    return (_jsx(PhiFlexControl, { align: "center", style: { minHeight: "var(--ant-control-height)", width: "100%" }, children: _jsx(PhiSliderControl, { value: dragged ?? value, min: min, max: max, step: step, ...(suffix ? { tooltipSuffix: suffix } : {}), disabled: disabled, style: { width: "100%", marginInline: 6 }, onChange: setDragged, onChangeComplete: (next) => {
+                setDragged(null);
+                if (next !== value)
+                    onCommit(next);
+            } }) }));
+}
+export function renderPhiInspectorSwitchRow({ key, label, checked, disabled, onChange, }) {
+    return renderPhiInspectorSettingsRow(label, _jsx(PhiFlexControl, { align: "center", style: { minHeight: "var(--ant-control-height)" }, children: _jsx(PhiSwitchControl, { checked: checked, disabled: disabled || !onChange, ...(onChange ? { onChange } : {}) }) }), key);
+}
 function renderPhiInspectorSettingsBlock(label, control, key) {
     return (_jsxs(PhiFlexControl, { vertical: true, gap: 8, style: { width: "100%", minWidth: 0 }, children: [_jsx(PhiTypographyControl, { children: label }), control] }, key));
 }
+/** The field's label, with its description behind it as (i), the way a labelled Control carries one. */
+function renderPhiInspectorConfigFieldLabel(field) {
+    const label = field.required ? `${field.label} *` : field.label;
+    return field.description ? (_jsxs(_Fragment, { children: [label, " ", _jsx(PhiDescriptionHint, { description: field.description })] })) : label;
+}
 function renderPhiInspectorConfigFieldControl(field, control) {
-    const resolvedControl = field.description ? (_jsxs(PhiFlexControl, { vertical: true, gap: 2, style: { minWidth: 0, width: "100%" }, children: [control, _jsx(PhiTypographyControl, { type: "secondary", children: field.description })] })) : control;
-    return renderPhiInspectorSettingsRow(field.required ? `${field.label} *` : field.label, resolvedControl, field.key);
+    return renderPhiInspectorSettingsRow(renderPhiInspectorConfigFieldLabel(field), control, field.key);
 }
 function renderPhiInspectorConfigFieldBlock(field, control) {
-    return renderPhiInspectorSettingsBlock(field.required ? `${field.label} *` : field.label, field.description ? (_jsxs(PhiFlexControl, { vertical: true, gap: 2, style: { minWidth: 0, width: "100%" }, children: [_jsx(PhiTypographyControl, { type: "secondary", children: field.description }), control] })) : control, field.key);
+    /*
+     * A block under a divider that already names it says so once: the divider is its label. A block with
+     * no label at all is one whose divider above it says what it is about.
+     */
+    if (field.label === "" || (field.heading != null && field.heading === field.label)) {
+        return _jsx(PhiFlexControl, { vertical: true, style: { width: "100%", minWidth: 0 }, children: control }, field.key);
+    }
+    return renderPhiInspectorSettingsBlock(renderPhiInspectorConfigFieldLabel(field), control, field.key);
+}
+/**
+ * A `slot-texts` field: a line for each slot the author can see, named as the slot is on the canvas.
+ *
+ * Only the Layout Inspector draws it, because only it knows which slots are occupied and what they are
+ * called; the generic field body has neither. A cleared line keeps its place in the list, so the slots
+ * after it keep theirs, and trailing empties are dropped the way the parser drops them.
+ */
+export function renderPhiInspectorSlotTextsField({ field, value, slots, disabled, onChange, }) {
+    if (slots.length === 0)
+        return null;
+    const current = Array.isArray(value) ? value.map((item) => (typeof item === "string" ? item : "")) : [];
+    const write = (slotIndex, text) => {
+        const next = current.slice();
+        while (next.length <= slotIndex)
+            next.push("");
+        next[slotIndex] = text;
+        while (next.length > 0 && !next[next.length - 1]?.trim())
+            next.pop();
+        onChange?.({ [field.key]: next.length > 0 ? next : undefined });
+    };
+    return (_jsxs(Fragment, { children: [_jsx(PhiDividerControl, { titlePlacement: "start", style: { marginBlock: 0 }, children: field.heading ?? field.label }), slots.map((slot) => renderPhiInspectorSettingsRow(slot.label, _jsx(PhiTextControl, { value: current[slot.slotIndex] ?? "", disabled: disabled || !onChange, style: { width: "100%" }, onChange: (nextValue) => write(slot.slotIndex, nextValue ?? "") }), `${field.key}:${slot.slotIndex}`))] }, field.key));
 }
-export function isPhiInspectorConfigFieldVisible(field, config) {
+export function isPhiInspectorConfigFieldVisible(field, config, 
+/** The config holding the collection `config` is an entry of; a `parent` rule outside one reads nothing. */
+parentConfig = null) {
     if (field.editorPlacement === "toolbar" || field.editorPlacement === "geometry") {
         return false;
     }
-    const rule = field.visibleWhen;
-    if (!rule) {
+    const rules = field.visibleWhen == null
+        ? []
+        : Array.isArray(field.visibleWhen) ? field.visibleWhen : [field.visibleWhen];
+    return rules.every((rule) => {
+        /* An empty list is no answer, the way an absent key is not: a Button with no routes left emits none. */
+        const source = rule.scope === "parent" ? parentConfig : config;
+        const raw = source ? readPhiInspectorConfigPathValue(source, rule.field) : undefined;
+        const value = Array.isArray(raw) && raw.length === 0 ? null : raw ?? null;
+        if ("equals" in rule && value !== rule.equals)
+            return false;
+        if ("notEquals" in rule && value === rule.notEquals)
+            return false;
         return true;
+    });
+}
+/**
+ * The value a field shows while a choice beside it answers for it, or `null` when the field is the
+ * author's. See `PhiCmsConfigFieldOptionPresets`.
+ */
+export function resolvePhiInspectorFieldLock(field, fields, config) {
+    for (const candidate of fields) {
+        if (candidate.type !== "choice" || !candidate.optionPresets?.locks.includes(field.key))
+            continue;
+        const chosen = readPhiInspectorConfigPathValue(config, candidate.key);
+        if (typeof chosen !== "string" || !chosen)
+            continue;
+        return { value: candidate.optionPresets.values[chosen]?.[field.key] };
     }
-    const value = readPhiInspectorConfigPathValue(config, rule.field) ?? null;
-    if ("equals" in rule && value !== rule.equals) {
-        return false;
+    return null;
+}
+/*
+ * What choosing an option writes besides itself. The locked fields are dropped while an option answers
+ * for them and handed back filled when none does; the prefilled ones are written once and left alone.
+ */
+function buildPhiInspectorOptionPresetPatch(presets, previous, next) {
+    if (!presets)
+        return {};
+    if (typeof next === "string" && next) {
+        const values = presets.values[next] ?? {};
+        return {
+            ...Object.fromEntries(presets.locks.map((key) => [key, undefined])),
+            ...Object.fromEntries((presets.prefills ?? []).map((key) => [key, values[key]])),
+        };
     }
-    if ("notEquals" in rule && value === rule.notEquals) {
-        return false;
+    if (typeof previous === "string" && previous) {
+        const values = presets.values[previous] ?? {};
+        return Object.fromEntries(presets.locks.map((key) => [key, values[key]]));
     }
-    return true;
+    return {};
 }
 export function readPhiInspectorConfigPathValue(config, path) {
-    return path.split(".").filter(Boolean).reduce((current, segment) => current && typeof current === "object" && !Array.isArray(current)
-        ? current[segment]
-        : undefined, config);
+    return readPhiDotPath(config, path);
 }
 function writePhiInspectorConfigPathValue(config, path, value) {
     const segments = path.split(".").filter(Boolean);
     if (segments.length === 0) {
         return config;
     }
+    /*
+     * A numeric segment into a list stays a list -- `emits.0.value` writes the first emit's value and
+     * keeps the rest, rather than turning `emits` into an object keyed "0".
+     */
     const next = { ...config };
     let target = next;
+    const write = (container, segment, child) => {
+        if (Array.isArray(container))
+            container[Number(segment)] = child;
+        else
+            container[segment] = child;
+    };
+    const read = (container, segment) => Array.isArray(container) ? container[Number(segment)] : container[segment];
     for (const segment of segments.slice(0, -1)) {
-        const current = target[segment];
-        const child = current && typeof current === "object" && !Array.isArray(current)
-            ? { ...current }
-            : {};
-        target[segment] = child;
+        const current = read(target, segment);
+        const child = Array.isArray(current)
+            ? [...current]
+            : isPhiRecord(current)
+                ? { ...current }
+                : {};
+        write(target, segment, child);
         target = child;
     }
-    target[segments[segments.length - 1]] = value;
+    write(target, segments[segments.length - 1], value);
     return next;
 }
 export function buildPhiInspectorConfigPathPatch(config, patch) {
@@ -107,7 +226,7 @@ export function resolvePhiInspectorDimensionValue(value) {
             width: value,
         };
     }
-    if (!value || typeof value !== "object" || Array.isArray(value)) {
+    if (!isPhiRecord(value)) {
         return null;
     }
     const width = resolveInspectorSizeValue(value.width);
@@ -130,14 +249,14 @@ function resolveInspectorColorMode(mode) {
     return "single";
 }
 function normalizeInspectorBorderValue(value) {
-    if (!value || typeof value !== "object" || Array.isArray(value)) {
+    if (!isPhiRecord(value)) {
         return null;
     }
     return value;
 }
 function readPhiInspectorCollectionItems(value) {
     return Array.isArray(value)
-        ? value.filter((item) => Boolean(item) && typeof item === "object" && !Array.isArray(item))
+        ? value.filter(isPhiRecord)
         : [];
 }
 function createPhiInspectorCollectionItem(field, items) {
@@ -195,7 +314,7 @@ function resolveInspectorChoiceOptions(field, widgetReferenceOptions, resolvedOp
     }
     return resolvedOptions;
 }
-function PhiInspectorChoiceFieldControl({ field, config, value, defaultValue, disabled, widgetReferenceOptions, onChange, }) {
+function PhiInspectorChoiceFieldControl({ field, config, value, defaultValue, disabled, widgetReferenceOptions, labels, onChange, }) {
     const staticOptions = useMemo(() => field.filter?.widgetType
         ? widgetReferenceOptions
             .filter((option) => option.widgetType === field.filter?.widgetType)
@@ -227,22 +346,28 @@ function PhiInspectorChoiceFieldControl({ field, config, value, defaultValue, di
     const options = ensureInspectorChoiceOption(field.emptyOption ? [field.emptyOption, ...resolvedOptions] : resolvedOptions, field.allowCustom ? selectedValue : null);
     return renderChoiceRow(_jsx(PhiSelectControl, { options: options, onSearch: providerResult.search.enabled ? setSearchDraft : undefined, filterOptionsLocally: providerResult.search.filterLocally, placeholder: field.placeholder
             ?? (field.presentation === "autocomplete" || field.allowCustom
-                ? "Type or select value"
+                ? labels.typeOrSelect
                 : options.length === 0
-                    ? "No matching options"
-                    : undefined), presentation: field.presentation === "autocomplete" ? "autocomplete" : "select", allowCustom: field.allowCustom, value: selectedValue ?? "", disabled: disabled || !onChange, style: { width: "100%" }, onChange: (nextValue) => onChange?.({
-            [field.key]: field.presentation === "autocomplete" || field.allowCustom
+                    ? labels.noMatchingOptions
+                    : undefined), presentation: field.presentation === "autocomplete" ? "autocomplete" : "select", allowCustom: field.allowCustom, value: selectedValue ?? "", disabled: disabled || !onChange, style: { width: "100%" }, onChange: (nextValue) => {
+            const next = field.presentation === "autocomplete" || field.allowCustom
                 ? nextValue.trim().length > 0 ? nextValue : field.emptyValue
                 : emptyOptionValue != null && nextValue === emptyOptionValue
                     ? field.emptyValue
-                    : nextValue,
-            ...(field.patchOnChange ?? {}),
-        }) }));
+                    : nextValue;
+            onChange?.({
+                [field.key]: next,
+                ...buildPhiInspectorOptionPresetPatch(field.optionPresets, value, next),
+                ...(field.patchOnChange ?? {}),
+            });
+        } }));
 }
-function PhiInspectorCollectionFieldControl({ field, value, defaultValue, disabled, widgetReferenceOptions, paddingLabels, backgroundLabels, borderLabels, colorPickerLabels, iconPickerLabels, dataProviderDescriptors, calendarAdapterDescriptors, videoProviderDescriptors, onChange, }) {
-    const { token } = theme.useToken();
+function PhiInspectorCollectionFieldControl({ field, config, labels, value, defaultValue, disabled, widgetReferenceOptions, paddingLabels, backgroundLabels, borderLabels, colorPickerLabels, iconPickerLabels, dataProviderDescriptors, calendarAdapterDescriptors, videoProviderDescriptors, onChange, }) {
+    const { token } = usePhiConfig();
     const popup = usePhiWidgetScaffoldPopup();
     const [overlayOpen, setOverlayOpen] = useState(false);
+    /* The entry a `select` collection shows; held to the list when entries go. */
+    const [selectedItemIndex, setSelectedItemIndex] = useState(0);
     const configuredItems = readPhiInspectorCollectionItems(value);
     const defaultItems = readPhiInspectorCollectionItems(defaultValue);
     const items = value == null ? defaultItems : configuredItems;
@@ -251,16 +376,74 @@ function PhiInspectorCollectionFieldControl({ field, value, defaultValue, disabl
     const publish = (nextItems) => {
         onChange?.({ [field.key]: nextItems });
     };
+    /*
+     * A row's React key, kept apart from its fields. The key field is editable, so keying rows by it
+     * remounted the row on every keystroke and took the focus away. These keys follow the rows through
+     * the moves, removals and additions made here; a list changed from outside to another length starts
+     * over by position.
+     */
+    const [rowKeyState, setRowKeyState] = useState({ keys: [], next: 0 });
+    const rowKeys = rowKeyState.keys.length === items.length
+        ? rowKeyState.keys
+        : items.map((_, index) => `${field.key}:${index}`);
+    const publishRows = (nextItems, nextKeys, next = rowKeyState.next) => {
+        setRowKeyState({ keys: nextKeys, next });
+        publish(nextItems);
+    };
+    const swapRows = (left, right) => {
+        const nextItems = [...items];
+        const nextKeys = [...rowKeys];
+        [nextItems[left], nextItems[right]] = [nextItems[right], nextItems[left]];
+        [nextKeys[left], nextKeys[right]] = [nextKeys[right], nextKeys[left]];
+        publishRows(nextItems, nextKeys);
+    };
+    /* What the entry is called, read as its fields show it: a locked label is the chosen action's. */
     const readItemLabel = (item, index) => {
-        const itemLabelValue = item[field.itemLabelField ?? field.itemKeyField];
+        const labelKey = field.itemLabelField ?? field.itemKeyField;
+        const labelField = field.itemFields.find((itemField) => itemField.key === labelKey);
+        const lock = labelField ? resolvePhiInspectorFieldLock(labelField, field.itemFields, item) : null;
+        const itemLabelValue = lock ? lock.value : item[labelKey];
         return typeof itemLabelValue === "string" && itemLabelValue.trim()
             ? itemLabelValue
             : `${field.label} ${index + 1}`;
     };
-    const editor = (_jsxs(PhiFlexControl, { vertical: true, gap: 8, style: { width: "100%", minWidth: 0 }, children: [items.length === 0 ? (_jsx(PhiTypographyControl, { type: "secondary", children: field.emptyLabel ?? "No items" })) : null, items.map((item, index) => {
-                const itemIdentity = item[field.itemKeyField];
+    /* One entry's own fields, edited in place; the same for every presentation. */
+    const renderItemFields = (item, index) => {
+        const defaultItem = defaultItems[index] ?? field.defaultItem ?? {};
+        return (_jsx(PhiFlexControl, { vertical: true, gap: 8, style: { width: "100%", minWidth: 0 }, children: field.itemFields
+                .filter((itemField) => isPhiInspectorConfigFieldVisible(itemField, item, config))
+                .map((itemField) => {
+                const lock = resolvePhiInspectorFieldLock(itemField, field.itemFields, item);
+                return renderPhiInspectorConfigField({
+                    field: itemField,
+                    value: lock ? lock.value : readPhiInspectorConfigPathValue(item, itemField.key),
+                    defaultValue: readPhiInspectorConfigPathValue(defaultItem, itemField.key),
+                    config: item,
+                    defaultConfig: defaultItem,
+                    disabled: disabled || lock != null,
+                    widgetReferenceOptions,
+                    paddingLabels,
+                    backgroundLabels,
+                    borderLabels,
+                    colorPickerLabels,
+                    iconPickerLabels,
+                    fieldLabels: labels,
+                    dataProviderDescriptors,
+                    calendarAdapterDescriptors,
+                    videoProviderDescriptors,
+                    onChange: (patch) => {
+                        const nextItems = [...items];
+                        nextItems[index] = {
+                            ...item,
+                            ...buildPhiInspectorConfigPathPatch(item, patch),
+                        };
+                        publish(nextItems);
+                    },
+                });
+            }) }));
+    };
+    const editor = (_jsxs(PhiFlexControl, { vertical: true, gap: 8, style: { width: "100%", minWidth: 0 }, children: [items.length === 0 ? (_jsx(PhiTypographyControl, { type: "secondary", children: field.emptyLabel ?? labels.noItems })) : null, items.map((item, index) => {
                 const itemLabel = readItemLabel(item, index);
-                const defaultItem = defaultItems[index] ?? field.defaultItem ?? {};
                 return (_jsxs(PhiFlexControl, { vertical: true, gap: 8, style: {
                         width: "100%",
                         minWidth: 0,
@@ -268,42 +451,20 @@ function PhiInspectorCollectionFieldControl({ field, value, defaultValue, disabl
                         border: `1px solid ${token.colorBorderSecondary}`,
                         borderRadius: token.borderRadius,
                         background: token.colorBgContainer,
-                    }, children: [_jsxs(PhiFlexControl, { align: "center", justify: "space-between", gap: 4, style: { width: "100%" }, children: [_jsx(PhiTypographyControl, { strong: true, ellipsis: true, style: { minWidth: 0 }, title: itemLabel, children: itemLabel }), _jsxs(PhiFlexControl, { align: "center", gap: 2, children: [field.reorderable !== false ? (_jsxs(_Fragment, { children: [_jsx(PhiButtonControl, { label: "\u2191", type: "text", disabled: disabled || index === 0, onClick: () => {
-                                                        const nextItems = [...items];
-                                                        [nextItems[index - 1], nextItems[index]] = [nextItems[index], nextItems[index - 1]];
-                                                        publish(nextItems);
-                                                    } }), _jsx(PhiButtonControl, { label: "\u2193", type: "text", disabled: disabled || index === items.length - 1, onClick: () => {
-                                                        const nextItems = [...items];
-                                                        [nextItems[index], nextItems[index + 1]] = [nextItems[index + 1], nextItems[index]];
-                                                        publish(nextItems);
-                                                    } })] })) : null, _jsx(PhiButtonControl, { ariaLabel: "Remove", tooltip: "Remove", icon: _jsx(PhiIcon, { name: "delete" }), type: "text", danger: true, disabled: disabled || items.length <= minItems, onClick: () => publish(items.filter((_, itemIndex) => itemIndex !== index)) })] })] }), _jsx(PhiFlexControl, { vertical: true, gap: 8, style: { width: "100%", minWidth: 0 }, children: field.itemFields
-                                .filter((itemField) => isPhiInspectorConfigFieldVisible(itemField, item))
-                                .map((itemField) => renderPhiInspectorConfigField({
-                                field: itemField,
-                                value: readPhiInspectorConfigPathValue(item, itemField.key),
-                                defaultValue: readPhiInspectorConfigPathValue(defaultItem, itemField.key),
-                                config: item,
-                                defaultConfig: defaultItem,
-                                disabled,
-                                widgetReferenceOptions,
-                                paddingLabels,
-                                backgroundLabels,
-                                borderLabels,
-                                colorPickerLabels,
-                                iconPickerLabels,
-                                dataProviderDescriptors,
-                                calendarAdapterDescriptors,
-                                videoProviderDescriptors,
-                                onChange: (patch) => {
-                                    const nextItems = [...items];
-                                    nextItems[index] = {
-                                        ...item,
-                                        ...buildPhiInspectorConfigPathPatch(item, patch),
-                                    };
-                                    publish(nextItems);
-                                },
-                            })) })] }, typeof itemIdentity === "string" && itemIdentity ? itemIdentity : `${field.key}-${index}`));
-            }), _jsx(PhiButtonControl, { label: field.addLabel ?? "Add item", icon: _jsx(PhiIcon, { name: "plus" }), disabled: disabled || items.length >= maxItems, onClick: () => publish([...items, createPhiInspectorCollectionItem(field, items)]) })] }));
+                    }, children: [_jsxs(PhiFlexControl, { align: "center", justify: "space-between", gap: 4, style: { width: "100%" }, children: [_jsx(PhiTypographyControl, { strong: true, ellipsis: true, style: { minWidth: 0 }, title: itemLabel, children: itemLabel }), _jsxs(PhiFlexControl, { align: "center", gap: 2, children: [field.reorderable !== false ? (_jsxs(_Fragment, { children: [_jsx(PhiButtonControl, { label: "\u2191", type: "text", disabled: disabled || index === 0, onClick: () => swapRows(index - 1, index) }), _jsx(PhiButtonControl, { label: "\u2193", type: "text", disabled: disabled || index === items.length - 1, onClick: () => swapRows(index, index + 1) })] })) : null, _jsx(PhiButtonControl, { ariaLabel: labels.remove, tooltip: labels.remove, icon: _jsx(PhiIcon, { name: "delete" }), type: "text", danger: true, disabled: disabled || items.length <= minItems, onClick: () => publishRows(items.filter((_, itemIndex) => itemIndex !== index), rowKeys.filter((_, keyIndex) => keyIndex !== index)) })] })] }), renderItemFields(item, index)] }, rowKeys[index]));
+            }), _jsx(PhiButtonControl, { label: field.addLabel ?? labels.addItem, icon: _jsx(PhiIcon, { name: "plus" }), disabled: disabled || items.length >= maxItems, onClick: () => publishRows([...items, createPhiInspectorCollectionItem(field, items)], [...rowKeys, `${field.key}:new:${rowKeyState.next}`], rowKeyState.next + 1) })] }));
+    /*
+     * The select is the field's row -- labelled with the field, "Button" -- and the chosen entry's fields
+     * follow as rows of their own, so the entry reads as part of the settings and not as a card in them.
+     */
+    if (field.presentation === "select") {
+        const selectedIndex = Math.min(selectedItemIndex, Math.max(0, items.length - 1));
+        const selectedItem = items[selectedIndex];
+        if (!selectedItem) {
+            return renderPhiInspectorConfigFieldControl(field, _jsx(PhiTypographyControl, { type: "secondary", children: field.emptyLabel ?? labels.noItems }));
+        }
+        return (_jsxs(Fragment, { children: [renderPhiInspectorConfigFieldControl(field, _jsx(PhiSelectControl, { options: items.map((item, index) => ({ value: String(index), label: readItemLabel(item, index) })), value: String(selectedIndex), disabled: disabled, style: { width: "100%" }, onChange: (next) => setSelectedItemIndex(Number(next)) })), renderItemFields(selectedItem, selectedIndex)] }, field.key));
+    }
     if (field.presentation !== "overlay") {
         return renderPhiInspectorConfigFieldBlock(field, editor);
     }
@@ -315,8 +476,8 @@ function PhiInspectorCollectionFieldControl({ field, value, defaultValue, disabl
      * Builder's undo is already the way back. No actions, therefore, and so no Footer either.
      */
     return renderPhiInspectorConfigFieldBlock(field, _jsxs(_Fragment, { children: [_jsxs(PhiFlexControl, { align: "center", justify: "space-between", gap: 8, style: { width: "100%", minWidth: 0 }, children: [_jsx(PhiTypographyControl, { type: "secondary", ellipsis: true, style: { minWidth: 0 }, children: items.length === 0
-                            ? field.emptyLabel ?? "No items"
-                            : items.map(readItemLabel).join(", ") }), _jsx(PhiButtonControl, { label: field.editLabel ?? "Edit", icon: _jsx(PhiIcon, { name: "edit" }), size: "small", disabled: disabled, onClick: () => setOverlayOpen(true) })] }), _jsx(PhiDialogControl, { open: overlayOpen, title: field.label, controlSize: "medium", mountPolicy: "remount", rootClassName: popup.rootClassName, onDismiss: () => setOverlayOpen(false), children: editor })] }));
+                            ? field.emptyLabel ?? labels.noItems
+                            : items.map(readItemLabel).join(", ") }), _jsx(PhiButtonControl, { label: field.editLabel ?? labels.edit, icon: _jsx(PhiIcon, { name: "edit" }), size: "small", disabled: disabled, onClick: () => setOverlayOpen(true) })] }), _jsx(PhiDialogControl, { open: overlayOpen, title: field.label, controlSize: "medium", mountPolicy: "remount", rootClassName: popup.rootClassName, onDismiss: () => setOverlayOpen(false), children: editor })] }));
 }
 /**
  * A list of whole numbers typed as "10, 20, 50".
@@ -339,7 +500,13 @@ function PhiInspectorNumberListField({ value, min, disabled, onChange, }) {
     };
     return (_jsx(PhiTextControl, { value: draft ?? committed, disabled: disabled, style: { width: "100%" }, onChange: setDraft, onBlur: commit, onPressEnter: commit }));
 }
-export function renderPhiInspectorConfigField({ field, value, defaultValue, config, defaultConfig, disabled, onChange, widgetReferenceOptions, paddingLabels, backgroundLabels, borderLabels, colorPickerLabels, iconPickerLabels, linkTargetLabels, dataProviderDescriptors = [], calendarAdapterDescriptors = [], videoProviderDescriptors = [], }) {
+export function renderPhiInspectorConfigField(args) {
+    const body = renderPhiInspectorConfigFieldBody(args);
+    if (!args.field.heading || body == null)
+        return body;
+    return (_jsxs(Fragment, { children: [_jsx(PhiDividerControl, { titlePlacement: "start", style: { marginBlock: 0 }, children: args.field.heading }), body] }, args.field.key));
+}
+function renderPhiInspectorConfigFieldBody({ field, value, defaultValue, config, defaultConfig, disabled, onChange, widgetReferenceOptions, paddingLabels, backgroundLabels, borderLabels, colorPickerLabels, iconPickerLabels, fieldLabels = PHI_INSPECTOR_WIDGET_DEFAULT_LABELS.fields, dataProviderDescriptors = [], calendarAdapterDescriptors = [], videoProviderDescriptors = [], blockId, }) {
     if (field.type === "readonly") {
         const displayValue = value ?? defaultValue;
         return renderPhiInspectorConfigFieldControl(field, _jsx(PhiTextControl, { value: displayValue == null ? "" : String(displayValue), readOnly: true, allowClear: false, style: { width: "100%" } }));
@@ -352,11 +519,18 @@ export function renderPhiInspectorConfigField({ field, value, defaultValue, conf
             : isPhiRecord(defaultValue)
                 ? defaultValue
                 : {};
-        const supportsStaticOptions = !field.providerKind || field.providerKind === "options";
+        /*
+         * Options and Timeline entries can also be the Widget's own, written in its scaffold's dialog; the
+         * other kinds are a Provider or nothing.
+         */
+        const supportsStaticOptions = !field.providerKind || field.providerKind === "options" || field.providerKind === "timeline";
         const selectedProvider = dataProviderDescriptors.find((descriptor) => descriptor.key === providerConfig?.providerKey) ?? null;
         const options = [
             ...(supportsStaticOptions
-                ? [{ value: PHI_STATIC_OPTIONS_PROVIDER_VALUE, label: "Static options" }]
+                ? [{
+                        value: PHI_STATIC_OPTIONS_PROVIDER_VALUE,
+                        label: field.providerKind === "timeline" ? fieldLabels.staticEntries : fieldLabels.staticOptions,
+                    }]
                 : []),
             ...dataProviderDescriptors
                 .filter((descriptor) => !field.providerKind || descriptor.kind === field.providerKind)
@@ -366,7 +540,7 @@ export function renderPhiInspectorConfigField({ field, value, defaultValue, conf
                 description: descriptor.description,
             })),
         ];
-        return renderPhiInspectorConfigFieldControl(field, _jsxs(PhiFlexControl, { vertical: true, gap: 8, style: { width: "100%" }, children: [_jsx(PhiSelectControl, { options: options, placeholder: "Select a data provider", value: providerConfig?.providerKey ?? (supportsStaticOptions ? PHI_STATIC_OPTIONS_PROVIDER_VALUE : undefined), disabled: disabled || !onChange, style: { width: "100%" }, onChange: (providerKey) => onChange?.({
+        return renderPhiInspectorConfigFieldControl(field, _jsxs(PhiFlexControl, { vertical: true, gap: 8, style: { width: "100%" }, children: [_jsx(PhiSelectControl, { options: options, placeholder: fieldLabels.selectDataProvider, value: providerConfig?.providerKey ?? (supportsStaticOptions ? PHI_STATIC_OPTIONS_PROVIDER_VALUE : undefined), disabled: disabled || !onChange, style: { width: "100%" }, onChange: (providerKey) => onChange?.({
                         [field.key]: providerKey === PHI_STATIC_OPTIONS_PROVIDER_VALUE
                             ? null
                             : field.providerKind === "table" || field.providerKind === "tree" || field.providerKind === "collection"
@@ -381,25 +555,49 @@ export function renderPhiInspectorConfigField({ field, value, defaultValue, conf
                                     })(),
                                     params: isPhiRecord(rawProviderConfig.params) ? rawProviderConfig.params : undefined,
                                 }
-                                : { ...providerConfig, providerKey },
+                                : field.providerKind === "timeline"
+                                    ? { providerKey, params: isPhiRecord(rawProviderConfig.params) ? rawProviderConfig.params : undefined }
+                                    // Another record Provider's parameters mean nothing to this one; it starts on its own.
+                                    : field.providerKind === "record"
+                                        ? { providerKey, params: {} }
+                                        : { ...providerConfig, providerKey },
                     }) }), (field.providerKind === "table" || field.providerKind === "tree" || field.providerKind === "collection") && selectedProvider ? (_jsx(PhiSelectControl, { options: (selectedProvider.resources ?? []).map((resource) => ({
                         value: resource.resourceKey,
                         label: resource.title,
                         description: resource.description,
-                    })), placeholder: `Select a ${field.providerKind === "tree" ? "Tree" : field.providerKind === "collection" ? "Collection" : "Table"} resource`, value: typeof rawProviderConfig.resourceKey === "string" ? rawProviderConfig.resourceKey : undefined, disabled: disabled || !onChange, style: { width: "100%" }, onChange: (resourceKey) => onChange?.({
+                    })), placeholder: field.providerKind === "tree"
+                        ? fieldLabels.selectTreeResource
+                        : field.providerKind === "collection"
+                            ? fieldLabels.selectCollectionResource
+                            : fieldLabels.selectTableResource, value: typeof rawProviderConfig.resourceKey === "string" ? rawProviderConfig.resourceKey : undefined, disabled: disabled || !onChange, style: { width: "100%" }, onChange: (resourceKey) => onChange?.({
                         [field.key]: {
                             providerKey: selectedProvider.key,
                             resourceKey,
                             params: isPhiRecord(rawProviderConfig.params) ? rawProviderConfig.params : undefined,
                         },
-                    }) })) : null] }));
+                    }) })) : null, field.providerKind === "record" && selectedProvider
+                    ? (selectedProvider.settingsFields ?? []).map((paramField) => {
+                        const params = isPhiRecord(rawProviderConfig.params) ? rawProviderConfig.params : {};
+                        return _jsx(Fragment, { children: renderPhiInspectorConfigField({
+                                field: paramField,
+                                value: params[paramField.key],
+                                defaultValue: undefined,
+                                config: params,
+                                disabled,
+                                fieldLabels,
+                                onChange: (patch) => onChange?.({
+                                    [field.key]: { providerKey: selectedProvider.key, params: { ...params, ...patch } },
+                                }),
+                            }) }, paramField.key);
+                    })
+                    : null] }));
     }
     if (field.type === "calendar-adapter") {
         return renderPhiInspectorConfigFieldControl(field, _jsx(PhiSelectControl, { options: calendarAdapterDescriptors.map((descriptor) => ({
                 value: descriptor.key,
                 label: descriptor.title,
                 description: descriptor.description,
-            })), placeholder: "Select a calendar", value: typeof value === "string" ? value : typeof defaultValue === "string" ? defaultValue : undefined, disabled: disabled || !onChange, style: { width: "100%" }, onChange: (calendarAdapterKey) => onChange?.({ [field.key]: calendarAdapterKey }) }));
+            })), placeholder: fieldLabels.selectCalendar, value: typeof value === "string" ? value : typeof defaultValue === "string" ? defaultValue : undefined, disabled: disabled || !onChange, style: { width: "100%" }, onChange: (calendarAdapterKey) => onChange?.({ [field.key]: calendarAdapterKey }) }));
     }
     if (field.type === "video-provider") {
         return renderPhiInspectorConfigFieldControl(field, _jsx(PhiSelectControl
@@ -416,7 +614,7 @@ export function renderPhiInspectorConfigField({ field, value, defaultValue, conf
                 value: descriptor.key,
                 label: descriptor.title,
                 description: descriptor.recipient,
-            })), placeholder: "Select a video provider", value: typeof value === "string" ? value : typeof defaultValue === "string" ? defaultValue : undefined, disabled: disabled || !onChange, style: { width: "100%" }, onChange: (videoProviderKey) => onChange?.({ [field.key]: videoProviderKey }) }));
+            })), placeholder: fieldLabels.selectVideoProvider, value: typeof value === "string" ? value : typeof defaultValue === "string" ? defaultValue : undefined, disabled: disabled || !onChange, style: { width: "100%" }, onChange: (videoProviderKey) => onChange?.({ [field.key]: videoProviderKey }) }));
     }
     if (field.type === "dimension") {
         const sizeValue = typeof field.widthKey === "string" && typeof field.heightKey === "string"
@@ -431,7 +629,7 @@ export function renderPhiInspectorConfigField({ field, value, defaultValue, conf
                     };
             })()
             : resolvePhiInspectorDimensionValue(value ?? defaultValue);
-        return renderPhiInspectorConfigFieldControl(field, _jsx(PhiDimensionControl, { value: sizeValue, disabled: disabled || !onChange, widthPlaceholder: field.widthPlaceholder ?? "Width", heightPlaceholder: field.heightPlaceholder ?? "Height", onChange: (nextSize) => {
+        return renderPhiInspectorConfigFieldControl(field, _jsx(PhiDimensionControl, { value: sizeValue, disabled: disabled || !onChange, widthPlaceholder: field.widthPlaceholder ?? fieldLabels.width, heightPlaceholder: field.heightPlaceholder ?? fieldLabels.height, onChange: (nextSize) => {
                 if (typeof field.widthKey === "string" && typeof field.heightKey === "string") {
                     onChange?.({
                         [field.widthKey]: nextSize?.width,
@@ -482,25 +680,26 @@ export function renderPhiInspectorConfigField({ field, value, defaultValue, conf
         }));
     }
     if (field.type === "boolean") {
-        /*
-         * The row's label is one control height tall and the switch is shorter, so left to the row's
-         * top alignment it sat above the text's centre line. Centred in the same height it sits where
-         * the Corner radius header puts its switch, and the switches of a Widget line up.
-         */
-        return renderPhiInspectorConfigFieldControl(field, _jsx(PhiFlexControl, { align: "center", style: { minHeight: "var(--ant-control-height)" }, children: _jsx(PhiSwitchControl, { checked: typeof value === "boolean"
-                    ? value
-                    : typeof defaultValue === "boolean"
-                        ? defaultValue
-                        : false, disabled: disabled || !onChange, onChange: (checked) => onChange?.({ [field.key]: checked }) }) }));
+        return renderPhiInspectorSwitchRow({
+            key: field.key,
+            label: renderPhiInspectorConfigFieldLabel(field),
+            checked: typeof value === "boolean"
+                ? value
+                : typeof defaultValue === "boolean"
+                    ? defaultValue
+                    : false,
+            disabled,
+            ...(onChange ? { onChange: (checked) => onChange({ [field.key]: checked }) } : {}),
+        });
     }
     if (field.type === "choice") {
-        return (_jsx(PhiInspectorChoiceFieldControl, { field: field, config: config, value: value, defaultValue: defaultValue, disabled: disabled || !onChange, widgetReferenceOptions: widgetReferenceOptions ?? [], onChange: onChange }, field.key));
+        return (_jsx(PhiInspectorChoiceFieldControl, { field: field, config: config, value: value, defaultValue: defaultValue, disabled: disabled || !onChange, widgetReferenceOptions: widgetReferenceOptions ?? [], labels: fieldLabels, onChange: onChange }, field.key));
     }
     if (field.type === "collection") {
-        return (_jsx(PhiInspectorCollectionFieldControl, { field: field, value: value, defaultValue: defaultValue, disabled: disabled || !onChange, widgetReferenceOptions: widgetReferenceOptions ?? [], paddingLabels: paddingLabels, backgroundLabels: backgroundLabels, borderLabels: borderLabels, colorPickerLabels: colorPickerLabels, iconPickerLabels: iconPickerLabels, dataProviderDescriptors: dataProviderDescriptors, calendarAdapterDescriptors: calendarAdapterDescriptors, videoProviderDescriptors: videoProviderDescriptors, onChange: onChange }, field.key));
+        return (_jsx(PhiInspectorCollectionFieldControl, { field: field, config: config, labels: fieldLabels, value: value, defaultValue: defaultValue, disabled: disabled || !onChange, widgetReferenceOptions: widgetReferenceOptions ?? [], paddingLabels: paddingLabels, backgroundLabels: backgroundLabels, borderLabels: borderLabels, colorPickerLabels: colorPickerLabels, iconPickerLabels: iconPickerLabels, dataProviderDescriptors: dataProviderDescriptors, calendarAdapterDescriptors: calendarAdapterDescriptors, videoProviderDescriptors: videoProviderDescriptors, onChange: onChange }, field.key));
     }
     if (field.type === "color") {
-        return renderPhiInspectorConfigFieldControl(field, _jsx(PhiColorFieldControl, { value: value, defaultValue: defaultValue, disabled: disabled || !onChange, mode: resolveInspectorColorMode(field.mode), placement: "left", labels: colorPickerLabels, onChange: (nextValue) => onChange?.({ [field.key]: nextValue || undefined }) }));
+        return renderPhiInspectorConfigFieldControl(field, _jsx(PhiColorFieldControl, { value: value, defaultValue: defaultValue, ...(field.defaultToken ? { defaultToken: field.defaultToken } : {}), disabled: disabled || !onChange, mode: resolveInspectorColorMode(field.mode), placement: "left", labels: colorPickerLabels, onChange: (nextValue) => onChange?.({ [field.key]: nextValue || undefined }) }));
     }
     if (field.type === "background") {
         const usesSelfStorage = field.storage === "self";
@@ -518,6 +717,11 @@ export function renderPhiInspectorConfigField({ field, value, defaultValue, conf
                 ? onChange?.(nextValue)
                 : onChange?.({ [field.key]: nextValue }) }));
     }
+    if (field.type === "surface") {
+        return renderPhiInspectorConfigFieldBlock(field, _jsx(PhiSurfaceControl, { disabled: disabled || !onChange, value: value === null ? null : readPhiSurface(value) ?? readPhiSurface(defaultValue), tone: field.tone !== false, 
+            // A box inside a Widget has no layer of its own to blur.
+            backgroundFilters: ["glass", "haze"], backgroundLabels: backgroundLabels, borderLabels: borderLabels, colorPickerLabels: colorPickerLabels, onChange: (nextValue) => onChange?.({ [field.key]: nextValue }) }));
+    }
     if (field.type === "shadow") {
         const currentValue = readPhiShadow(value) ?? readPhiShadow(defaultValue) ?? null;
         return renderPhiInspectorConfigFieldControl(field, _jsx(PhiShadowControl, { mode: "control", disabled: disabled || !onChange, value: currentValue, onChange: (nextValue) => onChange?.({ [field.key]: nextValue }) }));
@@ -528,25 +732,42 @@ export function renderPhiInspectorConfigField({ field, value, defaultValue, conf
             : typeof defaultValue === "string"
                 ? defaultValue
                 : null;
-        return renderPhiInspectorConfigFieldControl(field, _jsx(PhiWidgetIconPickerButton, { labels: iconPickerLabels, value: iconValue, disabled: disabled || !onChange, buttonBlock: true, buttonType: "default", buttonSize: "medium", buttonIcon: iconValue ? _jsx(PhiIcon, { name: iconValue }) : undefined, buttonLabel: iconValue ?? field.label, buttonAriaLabel: field.label, onChange: (nextValue) => onChange?.({ [field.key]: nextValue ?? undefined }) }));
+        return renderPhiInspectorConfigFieldControl(field, _jsx(PhiWidgetIconPickerButton, { labels: iconPickerLabels, value: iconValue, disabled: disabled || !onChange, buttonBlock: true, buttonType: "default", buttonSize: "medium", buttonIcon: iconValue ? _jsx(PhiIcon, { name: iconValue }) : undefined, buttonLabel: iconValue ?? field.label, buttonAriaLabel: field.label, 
+            /* Beside the field, toward the canvas, as the colour picker opens: below, it covers the fields under it. */
+            placement: "left", onChange: (nextValue) => onChange?.({ [field.key]: nextValue ?? undefined }) }));
     }
     if (field.type === "string" || field.type === "url") {
         return renderPhiInspectorConfigFieldControl(field, _jsx(PhiTextControl, { value: typeof value === "string" || typeof value === "number"
                 ? String(value)
                 : typeof defaultValue === "string" || typeof defaultValue === "number"
                     ? String(defaultValue)
-                    : "", disabled: disabled || !onChange, inputType: field.type === "url" ? "url" : "text", style: { width: "100%" }, onChange: (nextValue) => onChange?.({ [field.key]: nextValue || undefined }) }));
+                    : "", disabled: disabled || !onChange, inputType: field.type === "url" ? "url" : "text", style: { width: "100%" }, onChange: (nextValue) => onChange?.({
+                [field.key]: nextValue || ("emptyValue" in field ? field.emptyValue : undefined),
+            }) }));
     }
     /*
      * A block rather than a row: the control is a choice plus whichever answer that choice asks for, and
      * squeezing three stacked parts into the label column's other half leaves none of them usable.
      */
+    if (field.type === "image") {
+        return renderPhiInspectorConfigFieldBlock(field, _jsx(PhiInspectorImageFieldControl, { config: config, blockId: blockId, disabled: disabled, ...(onChange ? { onChange } : {}) }));
+    }
     if (field.type === "link-target") {
-        return renderPhiInspectorConfigFieldBlock(field, _jsx(PhiInspectorLinkTargetFieldControl, { value: value ?? defaultValue, disabled: disabled || !onChange, ...(linkTargetLabels ? { labels: linkTargetLabels } : {}), onChange: (next) => onChange?.({ [field.key]: next }) }));
+        return renderPhiInspectorConfigFieldBlock(field, _jsx(PhiInspectorLinkTargetFieldControl, { value: value ?? defaultValue, disabled: disabled || !onChange, labels: fieldLabels.linkTarget, onChange: (next, none) => onChange?.({
+                [field.key]: next,
+                ...(none ? Object.fromEntries((field.clearsWhenEmpty ?? []).map((key) => [key, undefined])) : {}),
+            }) }));
+    }
+    if (field.type === "flags") {
+        const mask = typeof value === "number" ? value : typeof defaultValue === "number" ? defaultValue : 0;
+        return renderPhiInspectorConfigFieldBlock(field, _jsx(PhiCheckboxGroupControl, { vertical: true, value: field.options.filter((option) => (mask & option.value) !== 0).map((option) => option.value), options: field.options.map((option) => ({ value: option.value, label: option.label })), disabled: disabled || !onChange, onChange: (ticked) => onChange?.({ [field.key]: ticked.reduce((next, flag) => next | flag, 0) }) }));
     }
     if (field.type === "number-list") {
         return renderPhiInspectorConfigFieldControl(field, _jsx(PhiInspectorNumberListField, { value: Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [], min: field.min, disabled: disabled || !onChange, onChange: (next) => onChange?.({ [field.key]: next.length > 0 ? next : undefined }) }));
     }
+    if (field.type === "number" && field.presentation === "slider") {
+        return renderPhiInspectorConfigFieldControl(field, _jsx(PhiInspectorSliderField, { value: typeof value === "number" ? value : typeof defaultValue === "number" ? defaultValue : (field.max ?? 100), min: field.min ?? 0, max: field.max ?? 100, step: field.step ?? 1, ...(field.suffix ? { suffix: field.suffix } : {}), disabled: disabled || !onChange, onCommit: (nextValue) => onChange?.({ [field.key]: nextValue }) }));
+    }
     if (field.type === "number") {
         return renderPhiInspectorConfigFieldControl(field, _jsx(PhiNumberControl, { value: typeof value === "number" ? value : typeof defaultValue === "number" ? defaultValue : null, min: field.min, max: field.max, step: field.step, precision: field.precision, prefix: field.prefix, disabled: disabled || !onChange, style: { width: "100%" }, onChange: (nextValue) => onChange?.({
                 [field.key]: typeof nextValue === "number" && Number.isFinite(nextValue)