@phis/ui 0.1.0 → 0.2.1

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

@@ -1,9 +1,12 @@
 import { type ReactNode } from "react";
 import type { PhiCmsConfigField, PhiRuntimeModuleDataProviderDescriptor } from "../../../../types/cms-plugins";
 import type { PhiCalendarAdapterDescriptor } from "../../../../types/calendar";
+import type { PhiVideoProviderDescriptor } from "../../../../types/video";
 import { type PhiRenderableBlockSize } from "../../../../types";
 import { type PhiCmsPaddingWidgetConfig } from "../../../../types/cms-config";
 import type { PhiColorPickerLabels } from "../../../../components/widgets/label-types/color-picker";
+import type { PhiIconPickerControlLabels } from "../../../../components/widgets/label-types/icon-picker";
+import { type PhiInspectorLinkTargetLabels } from "./inspector-link-target-field";
 import type { PhiPaddingWidgetLabels } from "../../../../components/widgets/label-types/padding";
 import type { PhiBackgroundWidgetLabels } from "../../../../components/widgets/label-types/background";
 import type { PhiBorderWidgetLabels } from "../../../../components/widgets/label-types/border";
@@ -29,7 +32,7 @@ export declare function renderPhiInspectorPaddingConfigControl({ field, config,
     labels?: PhiPaddingWidgetLabels;
     onChange?: (nextPadding: PhiCmsPaddingWidgetConfig | null, patch: Record<string, unknown>) => void;
 }): import("react").JSX.Element;
-export declare function renderPhiInspectorConfigField({ field, value, defaultValue, config, defaultConfig, disabled, onChange, widgetReferenceOptions, paddingLabels, backgroundLabels, borderLabels, colorPickerLabels, dataProviderDescriptors, calendarAdapterDescriptors, }: {
+export declare function renderPhiInspectorConfigField({ field, value, defaultValue, config, defaultConfig, disabled, onChange, widgetReferenceOptions, paddingLabels, backgroundLabels, borderLabels, colorPickerLabels, iconPickerLabels, linkTargetLabels, dataProviderDescriptors, calendarAdapterDescriptors, videoProviderDescriptors, }: {
     field: PhiCmsConfigField;
     value: unknown;
     defaultValue: unknown;
@@ -41,7 +44,10 @@ export declare function renderPhiInspectorConfigField({ field, value, defaultVal
     backgroundLabels?: PhiBackgroundWidgetLabels;
     borderLabels?: PhiBorderWidgetLabels;
     colorPickerLabels?: PhiColorPickerLabels;
+    iconPickerLabels?: PhiIconPickerControlLabels;
+    linkTargetLabels?: PhiInspectorLinkTargetLabels;
     dataProviderDescriptors?: readonly PhiRuntimeModuleDataProviderDescriptor[];
     calendarAdapterDescriptors?: readonly PhiCalendarAdapterDescriptor[];
+    videoProviderDescriptors?: readonly PhiVideoProviderDescriptor[];
     onChange?: (next: Record<string, unknown>) => void;
 }): import("react").JSX.Element | null;

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

@@ -1,12 +1,13 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useMemo, useState } from "react";
-import { Flex, Typography, theme } from "antd";
+import { theme } from "antd";
 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 { PhiColorWidget } from "../../../../components/widgets/client/phi-color-widget";
+import { PhiColorFieldControl } from "../../../../components/controls/phi-color-field-control";
+import { PhiInspectorLinkTargetFieldControl, } from "./inspector-link-target-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";
@@ -19,28 +20,30 @@ import { PhiSelectControl } from "../../../../components/controls/phi-select-con
 import { PhiSwitchControl } from "../../../../components/controls/phi-switch-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";
+import { PhiDialogControl } from "../../../../components/controls/phi-dialog-control";
 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 { 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 { isPhiRecord } from "../../../../helpers/is-record";
 const PHI_STATIC_OPTIONS_PROVIDER_VALUE = "__phi_static_options__";
-function isRecord(value) {
-    return Boolean(value) && typeof value === "object" && !Array.isArray(value);
-}
 export function renderPhiInspectorSettingsRow(label, control, key) {
     return (_jsx(PhiInspectorFieldRow, { label: label, children: control }, key));
 }
 function renderPhiInspectorSettingsBlock(label, control, key) {
-    return (_jsxs(Flex, { vertical: true, gap: 8, style: { width: "100%", minWidth: 0 }, children: [_jsx(Typography.Text, { children: label }), control] }, key));
+    return (_jsxs(PhiFlexControl, { vertical: true, gap: 8, style: { width: "100%", minWidth: 0 }, children: [_jsx(PhiTypographyControl, { children: label }), control] }, key));
 }
 function renderPhiInspectorConfigFieldControl(field, control) {
-    const resolvedControl = field.description ? (_jsxs(Flex, { vertical: true, gap: 2, style: { minWidth: 0, width: "100%" }, children: [control, _jsx(Typography.Text, { type: "secondary", children: field.description })] })) : 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);
 }
 function renderPhiInspectorConfigFieldBlock(field, control) {
-    return renderPhiInspectorSettingsBlock(field.required ? `${field.label} *` : field.label, field.description ? (_jsxs(Flex, { vertical: true, gap: 2, style: { minWidth: 0, width: "100%" }, children: [_jsx(Typography.Text, { type: "secondary", children: field.description }), control] })) : control, field.key);
+    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);
 }
 export function isPhiInspectorConfigFieldVisible(field, config) {
     if (field.editorPlacement === "toolbar" || field.editorPlacement === "geometry") {
@@ -207,7 +210,7 @@ function PhiInspectorChoiceFieldControl({ field, config, value, defaultValue, di
         sourceConfig: field.filter?.widgetType ? null : config,
         searchDraft,
     });
-    const renderChoiceRow = (control) => renderPhiInspectorConfigFieldControl(field, _jsxs(Flex, { vertical: true, gap: 4, style: { minWidth: 0, width: "100%" }, children: [control, providerResult.warning ? (_jsx(Typography.Text, { type: "warning", children: providerResult.warning })) : null] }));
+    const renderChoiceRow = (control) => renderPhiInspectorConfigFieldControl(field, _jsxs(PhiFlexControl, { vertical: true, gap: 4, style: { minWidth: 0, width: "100%" }, children: [control, providerResult.warning ? (_jsx(PhiTypographyControl, { type: "warning", children: providerResult.warning })) : null] }));
     const resolvedOptions = useMemo(() => resolveInspectorChoiceOptions(field, widgetReferenceOptions, providerResult.options), [field, providerResult.options, widgetReferenceOptions]);
     if (field.mode === "multiple" || field.valueType === "string[]") {
         const selectedValues = readInspectorChoiceMultiValue(value, defaultValue);
@@ -236,8 +239,10 @@ function PhiInspectorChoiceFieldControl({ field, config, value, defaultValue, di
             ...(field.patchOnChange ?? {}),
         }) }));
 }
-function PhiInspectorCollectionFieldControl({ field, value, defaultValue, disabled, widgetReferenceOptions, paddingLabels, backgroundLabels, borderLabels, colorPickerLabels, dataProviderDescriptors, calendarAdapterDescriptors, onChange, }) {
+function PhiInspectorCollectionFieldControl({ field, value, defaultValue, disabled, widgetReferenceOptions, paddingLabels, backgroundLabels, borderLabels, colorPickerLabels, iconPickerLabels, dataProviderDescriptors, calendarAdapterDescriptors, videoProviderDescriptors, onChange, }) {
     const { token } = theme.useToken();
+    const popup = usePhiWidgetScaffoldPopup();
+    const [overlayOpen, setOverlayOpen] = useState(false);
     const configuredItems = readPhiInspectorCollectionItems(value);
     const defaultItems = readPhiInspectorCollectionItems(defaultValue);
     const items = value == null ? defaultItems : configuredItems;
@@ -246,21 +251,24 @@ function PhiInspectorCollectionFieldControl({ field, value, defaultValue, disabl
     const publish = (nextItems) => {
         onChange?.({ [field.key]: nextItems });
     };
-    return renderPhiInspectorConfigFieldBlock(field, _jsxs(Flex, { vertical: true, gap: 8, style: { width: "100%", minWidth: 0 }, children: [items.length === 0 ? (_jsx(Typography.Text, { type: "secondary", children: field.emptyLabel ?? "No items" })) : null, items.map((item, index) => {
+    const readItemLabel = (item, index) => {
+        const itemLabelValue = item[field.itemLabelField ?? field.itemKeyField];
+        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];
-                const itemLabelValue = item[field.itemLabelField ?? field.itemKeyField];
-                const itemLabel = typeof itemLabelValue === "string" && itemLabelValue.trim()
-                    ? itemLabelValue
-                    : `${field.label} ${index + 1}`;
+                const itemLabel = readItemLabel(item, index);
                 const defaultItem = defaultItems[index] ?? field.defaultItem ?? {};
-                return (_jsxs(Flex, { vertical: true, gap: 8, style: {
+                return (_jsxs(PhiFlexControl, { vertical: true, gap: 8, style: {
                         width: "100%",
                         minWidth: 0,
                         padding: "var(--ant-padding-xs)",
                         border: `1px solid ${token.colorBorderSecondary}`,
                         borderRadius: token.borderRadius,
                         background: token.colorBgContainer,
-                    }, children: [_jsxs(Flex, { align: "center", justify: "space-between", gap: 4, style: { width: "100%" }, children: [_jsx(Typography.Text, { strong: true, ellipsis: true, style: { minWidth: 0 }, title: itemLabel, children: itemLabel }), _jsxs(Flex, { align: "center", gap: 2, children: [field.reorderable !== false ? (_jsxs(_Fragment, { children: [_jsx(PhiButtonControl, { label: "\u2191", type: "text", disabled: disabled || index === 0, onClick: () => {
+                    }, 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);
@@ -268,7 +276,7 @@ function PhiInspectorCollectionFieldControl({ field, value, defaultValue, disabl
                                                         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: "trash" }), type: "text", danger: true, disabled: disabled || items.length <= minItems, onClick: () => publish(items.filter((_, itemIndex) => itemIndex !== index)) })] })] }), _jsx(Flex, { vertical: true, gap: 8, style: { width: "100%", minWidth: 0 }, children: field.itemFields
+                                                    } })] })) : 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,
@@ -282,8 +290,10 @@ function PhiInspectorCollectionFieldControl({ field, value, defaultValue, disabl
                                 backgroundLabels,
                                 borderLabels,
                                 colorPickerLabels,
+                                iconPickerLabels,
                                 dataProviderDescriptors,
                                 calendarAdapterDescriptors,
+                                videoProviderDescriptors,
                                 onChange: (patch) => {
                                     const nextItems = [...items];
                                     nextItems[index] = {
@@ -294,8 +304,42 @@ function PhiInspectorCollectionFieldControl({ field, value, defaultValue, disabl
                                 },
                             })) })] }, 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)]) })] }));
+    if (field.presentation !== "overlay") {
+        return renderPhiInspectorConfigFieldBlock(field, editor);
+    }
+    /*
+     * The same editor in a wider box, and deliberately without a draft: every change publishes as it is
+     * made, exactly as it does inline, so closing the Overlay decides nothing. The static options picker
+     * has its Cancel and Apply because it edits rows with identities and a validity rule of their own and
+     * has something to hold back; here a second copy of the value would only be a second truth, and the
+     * 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 })] }));
+}
+/**
+ * A list of whole numbers typed as "10, 20, 50".
+ *
+ * The text is a draft until the field is left or Enter is pressed: reading it on every keystroke would
+ * turn "10, " back into "10" and take the comma away from under the cursor.
+ */
+function PhiInspectorNumberListField({ value, min, disabled, onChange, }) {
+    const committed = value.filter((item) => typeof item === "number").join(", ");
+    const [draft, setDraft] = useState(null);
+    const commit = () => {
+        if (draft == null)
+            return;
+        const next = draft
+            .split(/[\s,;]+/u)
+            .map((part) => Number(part))
+            .filter((item) => Number.isInteger(item) && (min === undefined || item >= min));
+        setDraft(null);
+        onChange(next);
+    };
+    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, dataProviderDescriptors = [], calendarAdapterDescriptors = [], }) {
+export function renderPhiInspectorConfigField({ field, value, defaultValue, config, defaultConfig, disabled, onChange, widgetReferenceOptions, paddingLabels, backgroundLabels, borderLabels, colorPickerLabels, iconPickerLabels, linkTargetLabels, dataProviderDescriptors = [], calendarAdapterDescriptors = [], videoProviderDescriptors = [], }) {
     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%" } }));
@@ -303,9 +347,9 @@ export function renderPhiInspectorConfigField({ field, value, defaultValue, conf
     if (field.type === "data-provider") {
         const providerConfig = parsePhiControlOptionsProviderConfig(value)
             ?? parsePhiControlOptionsProviderConfig(defaultValue);
-        const rawProviderConfig = isRecord(value)
+        const rawProviderConfig = isPhiRecord(value)
             ? value
-            : isRecord(defaultValue)
+            : isPhiRecord(defaultValue)
                 ? defaultValue
                 : {};
         const supportsStaticOptions = !field.providerKind || field.providerKind === "options";
@@ -322,7 +366,7 @@ export function renderPhiInspectorConfigField({ field, value, defaultValue, conf
                 description: descriptor.description,
             })),
         ];
-        return renderPhiInspectorConfigFieldControl(field, _jsxs(Flex, { 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: "Select a data provider", 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"
@@ -335,7 +379,7 @@ export function renderPhiInspectorConfigField({ field, value, defaultValue, conf
                                         return resources.find((resource) => "defaultForWidget" in resource && resource.defaultForWidget === true)?.resourceKey ??
                                             (resources.length === 1 ? resources[0]?.resourceKey : "") ?? "";
                                     })(),
-                                    params: isRecord(rawProviderConfig.params) ? rawProviderConfig.params : undefined,
+                                    params: isPhiRecord(rawProviderConfig.params) ? rawProviderConfig.params : undefined,
                                 }
                                 : { ...providerConfig, providerKey },
                     }) }), (field.providerKind === "table" || field.providerKind === "tree" || field.providerKind === "collection") && selectedProvider ? (_jsx(PhiSelectControl, { options: (selectedProvider.resources ?? []).map((resource) => ({
@@ -346,7 +390,7 @@ export function renderPhiInspectorConfigField({ field, value, defaultValue, conf
                         [field.key]: {
                             providerKey: selectedProvider.key,
                             resourceKey,
-                            params: isRecord(rawProviderConfig.params) ? rawProviderConfig.params : undefined,
+                            params: isPhiRecord(rawProviderConfig.params) ? rawProviderConfig.params : undefined,
                         },
                     }) })) : null] }));
     }
@@ -357,6 +401,23 @@ export function renderPhiInspectorConfigField({ field, value, defaultValue, conf
                 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 }) }));
     }
+    if (field.type === "video-provider") {
+        return renderPhiInspectorConfigFieldControl(field, _jsx(PhiSelectControl
+        /*
+         * The recipient is in the option, not only the provider's name, because choosing here is choosing
+         * who a visitor will be asked about -- and the placeholder will name that company either way.
+         */
+        , { 
+            /*
+             * The recipient is in the option, not only the provider's name, because choosing here is choosing
+             * who a visitor will be asked about -- and the placeholder will name that company either way.
+             */
+            options: videoProviderDescriptors.map((descriptor) => ({
+                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 }) }));
+    }
     if (field.type === "dimension") {
         const sizeValue = typeof field.widthKey === "string" && typeof field.heightKey === "string"
             ? (() => {
@@ -396,7 +457,7 @@ export function renderPhiInspectorConfigField({ field, value, defaultValue, conf
          * over bottom-left on the left and top-right over bottom-right on the right.
          */
         return (_jsx(PhiBoundRadiusControl, { labels: {
-                ...PHI_RADIUS_CONTROL_DEFAULT_LABELS,
+                ...(borderLabels ?? PHI_RADIUS_CONTROL_DEFAULT_LABELS),
                 sections: { radius: field.required ? `${field.label} *` : field.label },
             }, labelWidth: PHI_INSPECTOR_FIELD_LABEL_WIDTH, value: {
                 borderTopLeftRadius: resolveInspectorSizeValue(config[field.topLeftKey]),
@@ -426,7 +487,7 @@ export function renderPhiInspectorConfigField({ field, value, defaultValue, conf
          * 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(Flex, { align: "center", style: { minHeight: "var(--ant-control-height)" }, children: _jsx(PhiSwitchControl, { checked: typeof value === "boolean"
+        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
@@ -436,10 +497,10 @@ export function renderPhiInspectorConfigField({ field, value, defaultValue, conf
         return (_jsx(PhiInspectorChoiceFieldControl, { field: field, config: config, value: value, defaultValue: defaultValue, disabled: disabled || !onChange, widgetReferenceOptions: widgetReferenceOptions ?? [], 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, dataProviderDescriptors: dataProviderDescriptors, calendarAdapterDescriptors: calendarAdapterDescriptors, onChange: onChange }, field.key));
+        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));
     }
     if (field.type === "color") {
-        return renderPhiInspectorConfigFieldControl(field, _jsx(PhiColorWidget, { value: value, defaultValue: defaultValue, disabled: disabled || !onChange, signalsEnabled: false, mode: resolveInspectorColorMode(field.mode), placement: "left", labels: colorPickerLabels, onChange: (nextValue) => onChange?.({ [field.key]: nextValue || undefined }) }));
+        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 }) }));
     }
     if (field.type === "background") {
         const usesSelfStorage = field.storage === "self";
@@ -467,7 +528,7 @@ export function renderPhiInspectorConfigField({ field, value, defaultValue, conf
             : typeof defaultValue === "string"
                 ? defaultValue
                 : null;
-        return renderPhiInspectorConfigFieldControl(field, _jsx(PhiWidgetIconPickerButton, { 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, 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"
@@ -476,8 +537,18 @@ export function renderPhiInspectorConfigField({ field, value, defaultValue, conf
                     ? String(defaultValue)
                     : "", disabled: disabled || !onChange, inputType: field.type === "url" ? "url" : "text", style: { width: "100%" }, onChange: (nextValue) => onChange?.({ [field.key]: nextValue || 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 === "link-target") {
+        return renderPhiInspectorConfigFieldBlock(field, _jsx(PhiInspectorLinkTargetFieldControl, { value: value ?? defaultValue, disabled: disabled || !onChange, ...(linkTargetLabels ? { labels: linkTargetLabels } : {}), onChange: (next) => onChange?.({ [field.key]: next }) }));
+    }
+    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") {
-        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, disabled: disabled || !onChange, style: { width: "100%" }, onChange: (nextValue) => onChange?.({
+        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)
                     ? nextValue
                     : undefined,

package/plugins/runtime-modules/builder/clients/inspector-link-target-field.d.ts

@@ -0,0 +1,30 @@
+import { type PhiLinkTarget } from "../../../../types/references";
+export type PhiInspectorLinkTargetLabels = {
+    none: string;
+    page: string;
+    external: string;
+    pagePlaceholder: string;
+    externalPlaceholder: string;
+    newTab: string;
+};
+export declare const PHI_INSPECTOR_LINK_TARGET_DEFAULT_LABELS: PhiInspectorLinkTargetLabels;
+/**
+ * One link, chosen rather than typed, with the two answers it may have kept apart.
+ *
+ * **The mode is held here and the value is not.** A target is written only once it is one: a Page with
+ * nothing picked yet and a half-typed address are both states somebody is passing through, and storing
+ * them would put a target in the tree that resolves to nothing, index a reference that is not one, and
+ * draw a dead link on the page between two keystrokes. So the segmented control remembers what the
+ * author is answering, and the config gets a value when the answer is complete -- or `undefined`, which
+ * is a Widget with no link at all.
+ *
+ * Switching modes drops what the other one held rather than keeping it aside. A hidden address that
+ * returns when somebody flips back is a value nobody can see and nobody agreed to, and `REFERENCES.md`
+ * has no shape for a target that is two things at once.
+ */
+export declare function PhiInspectorLinkTargetFieldControl({ value, disabled, labels, onChange, }: {
+    value: unknown;
+    disabled?: boolean;
+    labels?: PhiInspectorLinkTargetLabels;
+    onChange?: (next: PhiLinkTarget | undefined) => void;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,69 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { PhiFlexControl } from "../../../../components/controls/phi-flex-control";
+import { PhiSegmentedControl } from "../../../../components/controls/phi-segmented-control";
+import { PhiSwitchControl } from "../../../../components/controls/phi-switch-control";
+import { PhiTextControl } from "../../../../components/controls/phi-text-control";
+import { PhiTreeSelectControl } from "../../../../components/controls/phi-tree-select-control";
+import { isPhiStorableExternalHref, readPhiLinkTarget, } from "../../../../types/references";
+import { buildPhiBuilderPageReferenceTree } from "../page-reference-tree";
+import { usePhiBuilderOfferedPageCatalog } from "../use-offered-page-catalog";
+import { usePhiDeveloperBuilderStateValue } from "../developer-workspace-store";
+export const PHI_INSPECTOR_LINK_TARGET_DEFAULT_LABELS = {
+    none: "None",
+    page: "Page",
+    external: "Address",
+    pagePlaceholder: "Select Page",
+    externalPlaceholder: "https://",
+    newTab: "Open in a new tab",
+};
+/**
+ * One link, chosen rather than typed, with the two answers it may have kept apart.
+ *
+ * **The mode is held here and the value is not.** A target is written only once it is one: a Page with
+ * nothing picked yet and a half-typed address are both states somebody is passing through, and storing
+ * them would put a target in the tree that resolves to nothing, index a reference that is not one, and
+ * draw a dead link on the page between two keystrokes. So the segmented control remembers what the
+ * author is answering, and the config gets a value when the answer is complete -- or `undefined`, which
+ * is a Widget with no link at all.
+ *
+ * Switching modes drops what the other one held rather than keeping it aside. A hidden address that
+ * returns when somebody flips back is a value nobody can see and nobody agreed to, and `REFERENCES.md`
+ * has no shape for a target that is two things at once.
+ */
+export function PhiInspectorLinkTargetFieldControl({ value, disabled, labels = PHI_INSPECTOR_LINK_TARGET_DEFAULT_LABELS, onChange, }) {
+    const target = readPhiLinkTarget(value);
+    const [mode, setMode] = useState(target?.kind ?? "none");
+    /*
+     * The address as it is being typed, which the stored value cannot be: a target is only written when
+     * it is storable, so reading the box back out of config would erase every character before the first
+     * one that makes a whole address.
+     */
+    const [draftHref, setDraftHref] = useState(target?.kind === "external" ? target.href : "");
+    const state = usePhiDeveloperBuilderStateValue("public", (current) => current);
+    const pages = usePhiBuilderOfferedPageCatalog(state, state.area);
+    const options = useMemo(() => buildPhiBuilderPageReferenceTree(state.area, pages, pages), [pages, state.area]);
+    const newTab = target?.newTab === true;
+    const withNewTab = (next) => (newTab ? { ...next, newTab: true } : next);
+    const changeMode = (nextMode) => {
+        setMode(nextMode);
+        setDraftHref("");
+        onChange?.(undefined);
+    };
+    return (_jsxs(PhiFlexControl, { vertical: true, gap: 8, style: { width: "100%", minWidth: 0 }, children: [_jsx(PhiSegmentedControl, { value: mode, block: true, disabled: disabled || !onChange, options: [
+                    { value: "none", label: labels.none },
+                    { value: "page", label: labels.page },
+                    { value: "external", label: labels.external },
+                ], onChange: changeMode }), mode === "page" ? (_jsx(PhiTreeSelectControl, { value: target?.kind === "page" ? target.reference : null, options: options, placeholder: labels.pagePlaceholder, disabled: disabled || !onChange, allowClear: true, style: { width: "100%" }, onChange: (nextValue) => onChange?.(nextValue
+                    ? withNewTab({ kind: "page", reference: nextValue })
+                    : undefined) })) : null, mode === "external" ? (_jsx(PhiTextControl, { value: draftHref, inputType: "url", placeholder: labels.externalPlaceholder, disabled: disabled || !onChange, style: { width: "100%" }, onChange: (nextValue) => {
+                    const href = nextValue ?? "";
+                    setDraftHref(href);
+                    onChange?.(isPhiStorableExternalHref(href)
+                        ? withNewTab({ kind: "external", href: href.trim() })
+                        : undefined);
+                } })) : null, target ? (_jsx(PhiSwitchControl, { checked: newTab, label: labels.newTab, disabled: disabled || !onChange, onChange: (checked) => onChange?.(checked
+                    ? { ...target, newTab: true }
+                    : { ...target, newTab: undefined }) })) : null] }));
+}

package/plugins/runtime-modules/builder/clients/inspector-section-widget.d.ts

@@ -4,6 +4,7 @@ import type { PhiBorderWidgetLabels } from "../../../../components/widgets/label
 import type { PhiGeometryWidgetLabels } from "../../../../components/widgets/label-types/geometry";
 import type { PhiPaddingWidgetLabels } from "../../../../components/widgets/label-types/padding";
 import type { PhiColorPickerLabels } from "../../../../components/widgets/label-types/color-picker";
+import type { PhiIconPickerControlLabels } from "../../../../components/widgets/label-types/icon-picker";
 import type { PhiSignalsWidgetLabels } from "../../../../components/widgets/label-types/signals";
 type PhiBuilderInspectorSectionWidgetClientProps = {
     section?: string;
@@ -14,8 +15,9 @@ type PhiBuilderInspectorSectionWidgetClientProps = {
     backgroundLabels?: PhiBackgroundWidgetLabels;
     borderLabels?: PhiBorderWidgetLabels;
     colorPickerLabels?: PhiColorPickerLabels;
+    iconPickerLabels?: PhiIconPickerControlLabels;
 };
 export declare function PhiBuilderRegionInspectorSectionWidgetClient({ section, signalRoutes, geometryLabels, paddingLabels, backgroundLabels, borderLabels, colorPickerLabels, }: PhiBuilderInspectorSectionWidgetClientProps): import("react").JSX.Element;
-export declare function PhiBuilderLayoutInspectorSectionWidgetClient({ section, signalRoutes, signalsLabels, paddingLabels, backgroundLabels, borderLabels, colorPickerLabels, }: PhiBuilderInspectorSectionWidgetClientProps): import("react").JSX.Element;
-export declare function PhiBuilderWidgetInspectorSectionWidgetClient({ section, signalRoutes, geometryLabels, signalsLabels, colorPickerLabels, }: PhiBuilderInspectorSectionWidgetClientProps): import("react").JSX.Element;
+export declare function PhiBuilderLayoutInspectorSectionWidgetClient({ section, signalRoutes, signalsLabels, paddingLabels, backgroundLabels, borderLabels, colorPickerLabels, iconPickerLabels, }: PhiBuilderInspectorSectionWidgetClientProps): import("react").JSX.Element;
+export declare function PhiBuilderWidgetInspectorSectionWidgetClient({ section, signalRoutes, geometryLabels, signalsLabels, colorPickerLabels, iconPickerLabels, }: PhiBuilderInspectorSectionWidgetClientProps): import("react").JSX.Element;
 export {};