@phis/ui 0.2.1 → 0.3.0

package/components/controls/phi-inline-text-editor.js

@@ -14,8 +14,20 @@ function stopAtEditor(event) {
  * The props are a closed list rather than whatever an input accepts, which is what lets the field be
  * the shared text Control.
  */
-export function PhiInlineTextEditor({ value, onChange, onCommit, onCancel, onFocus, onBlur, ariaLabel, placeholder, autoFocus, readOnly, variant, size, style, inputStyle, collapsibleTitleControl, fitContent, }) {
+export function PhiInlineTextEditor({ value, onChange, onCommit, onCancel, onFocus, onBlur, ariaLabel, placeholder, autoFocus, readOnly, variant, size, style, inputStyle, collapsibleTitleControl, fitContent, allowClear = false, }) {
     const cancelPendingRef = useRef(false);
+    /*
+     * The type the field is set in, as a key: a change of it builds the field anew.
+     *
+     * A sized text area measures its height when its value changes and on nothing else, and it measures
+     * against styles it read before. Set in a larger size it kept the box of the smaller one, and the text
+     * stood cut off at the line it had -- measured in the Builder, a Simple Text moved from `xs` to `sm`
+     * kept a 14px box around an 18px line, and looked the size it had been. The type changes from a
+     * toolbar, never while a key is pressed, so the field it builds anew is never one being typed in.
+     */
+    const typeKey = [inputStyle?.fontSize, inputStyle?.fontFamily, inputStyle?.lineHeight, inputStyle?.fontWeight]
+        .map((value) => String(value ?? ""))
+        .join("|");
     return (_jsxs("span", { "data-phi-collapsible-title-control": collapsibleTitleControl ? "true" : undefined, style: { display: "inline-block", minWidth: 0, maxWidth: "100%", ...style }, onMouseDown: stopAtEditor, onPointerDown: stopAtEditor, onClick: stopAtEditor, children: [fitContent ? (_jsx("span", { "aria-hidden": "true", style: {
                     ...inputStyle,
                     display: "block",
@@ -25,7 +37,7 @@ export function PhiInlineTextEditor({ value, onChange, onCommit, onCancel, onFoc
                     whiteSpace: "pre-wrap",
                     visibility: "hidden",
                     overflow: "hidden",
-                }, children: value || placeholder || " " })) : null, _jsx(PhiTextControl, { value: value, ariaLabel: ariaLabel, placeholder: placeholder, autoFocus: autoFocus, readOnly: readOnly, variant: variant, size: size, allowClear: false, presentation: fitContent ? "textarea" : "input", autoSize: fitContent ? true : undefined, 
+                }, children: value || placeholder || " " })) : null, _jsx(PhiTextControl, { value: value, ariaLabel: ariaLabel, placeholder: placeholder, autoFocus: autoFocus, readOnly: readOnly, variant: variant, size: size, allowClear: allowClear, ...(allowClear ? { onClear: () => onCommit("") } : {}), presentation: fitContent ? "textarea" : "input", autoSize: fitContent ? true : undefined, 
                 /*
                  * One column, because the text decides.
                  *
@@ -58,5 +70,5 @@ export function PhiInlineTextEditor({ value, onChange, onCommit, onCancel, onFoc
                         onCancel();
                         event.currentTarget.blur();
                     }
-                } })] }));
+                } }, typeKey)] }));
 }

package/components/controls/phi-labeled-control.d.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from "react";
+import { type ReactNode } from "react";
 /**
  * A Control with the words around it: a label beside it, a description behind an information glyph.
  *
@@ -9,8 +9,23 @@ import type { ReactNode } from "react";
  * graphic that has no name of its own is `PhiNameControl` instead, which renders the named element and
  * can therefore give it both from one string.
  */
-export declare function PhiLabeledControl({ label, description, children, fill, }: {
+/**
+ * The id a Control's label is rendered with, and the `aria-labelledby` its focusable element names it by.
+ *
+ * The label is drawn beside the Control rather than as a `<label>` around it, so nothing ties the two
+ * together on its own: without this a screen reader announced "edit text" where the eye reads "Email".
+ * The Control generates the id because it renders both halves -- the label through `PhiLabeledControl`,
+ * the element itself -- and a name cannot be handed to a child from outside it. An explicit `ariaLabel`
+ * wins, as it would in the browser, so `labelledBy` stays empty then.
+ */
+export declare function usePhiControlLabel(label: ReactNode, ariaLabel?: string): {
+    labelId: string | undefined;
+    labelledBy: string | undefined;
+};
+export declare function PhiLabeledControl({ label, labelId, description, children, fill, }: {
     label?: ReactNode;
+    /** The id the label is rendered with, from `usePhiControlLabel`, so the Control can point at it. */
+    labelId?: string;
     description?: ReactNode;
     children: ReactNode;
     fill?: boolean;

package/components/controls/phi-labeled-control.js

@@ -1,5 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from "react";
 import { usePhiConfig } from "../root/phi-config-provider";
 import { PhiDescriptionHint } from "./phi-description-tooltip-icon";
 import { PhiHoverText } from "./phi-hover-text";
@@ -13,7 +14,24 @@ import { PhiHoverText } from "./phi-hover-text";
  * graphic that has no name of its own is `PhiNameControl` instead, which renders the named element and
  * can therefore give it both from one string.
  */
-export function PhiLabeledControl({ label, description, children, fill = false, }) {
+/**
+ * The id a Control's label is rendered with, and the `aria-labelledby` its focusable element names it by.
+ *
+ * The label is drawn beside the Control rather than as a `<label>` around it, so nothing ties the two
+ * together on its own: without this a screen reader announced "edit text" where the eye reads "Email".
+ * The Control generates the id because it renders both halves -- the label through `PhiLabeledControl`,
+ * the element itself -- and a name cannot be handed to a child from outside it. An explicit `ariaLabel`
+ * wins, as it would in the browser, so `labelledBy` stays empty then.
+ */
+export function usePhiControlLabel(label, ariaLabel) {
+    const id = useId();
+    const hasLabel = label != null && label !== "";
+    return {
+        labelId: hasLabel ? id : undefined,
+        labelledBy: hasLabel && !ariaLabel ? id : undefined,
+    };
+}
+export function PhiLabeledControl({ label, labelId, description, children, fill = false, }) {
     const { token } = usePhiConfig();
     const hasLabel = label != null && label !== "";
     const hasDescription = description != null && description !== "";
@@ -37,7 +55,7 @@ export function PhiLabeledControl({ label, description, children, fill = false,
              * The form layout sets both variables, so a Control still knows nothing about forms.
              */
             width: fill ? "100%" : "var(--phi-labeled-control-width, auto)",
-        }, children: [_jsxs("span", { style: { display: "inline-flex", alignItems: "center", gap: token.paddingXXS, minWidth: 0 }, children: [_jsx("span", { className: "phi-typography phi-labeled-control__label", children: label }), hasDescription ? _jsx(PhiDescriptionHint, { description: description }) : null] }), _jsx("div", { style: {
+        }, children: [_jsxs("span", { style: { display: "inline-flex", alignItems: "center", gap: token.paddingXXS, minWidth: 0 }, children: [_jsx("span", { id: labelId, className: "phi-typography phi-labeled-control__label", children: label }), hasDescription ? _jsx(PhiDescriptionHint, { description: description }) : null] }), _jsx("div", { style: {
                     display: "flex",
                     alignItems: "center",
                     justifySelf: fill ? "stretch" : "start",

package/components/controls/phi-lightbox-image-control.d.ts

@@ -0,0 +1,16 @@
+import type { CSSProperties } from "react";
+export type PhiLightboxImageControlProps = {
+    src: string;
+    alt: string;
+    title?: string;
+    width?: number;
+    height?: number;
+    style?: CSSProperties;
+};
+/**
+ * An image that opens larger over the page when clicked.
+ *
+ * Only for that: an image that is just shown is an `<img>` or `next/image` in the Widget that places it.
+ * The lightbox is what needs a primitive -- the overlay, the zoom, the close -- and so it is a Control.
+ */
+export declare function PhiLightboxImageControl({ src, alt, title, width, height, style }: PhiLightboxImageControlProps): import("react").JSX.Element;

package/components/controls/phi-lightbox-image-control.js

@@ -0,0 +1,12 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Image } from "antd";
+/**
+ * An image that opens larger over the page when clicked.
+ *
+ * Only for that: an image that is just shown is an `<img>` or `next/image` in the Widget that places it.
+ * The lightbox is what needs a primitive -- the overlay, the zoom, the close -- and so it is a Control.
+ */
+export function PhiLightboxImageControl({ src, alt, title, width, height, style }) {
+    return _jsx(Image, { alt: alt, src: src, title: title, width: width, height: height, style: style, preview: true });
+}

package/components/controls/phi-mask-picker-control.js

@@ -1,9 +1,8 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef, useState } from "react";
-import { DeleteOutlined, StarOutlined, UploadOutlined } from "@ant-design/icons";
 import { Flex, Typography } from "antd";
-import { mergePhiMaskConfigDefaults, PHI_MASK_PRESET_OPTIONS, resolvePhiMaskStyle, } from "../widgets/config/mask";
+import { mergePhiMaskConfigDefaults, mergePhiMaskConfigPatch, PHI_MASK_PRESET_OPTIONS, resolvePhiMaskStyle, } from "../widgets/config/mask";
 import { PhiIcon } from "../shell/phi-icon";
 import { PhiFileDropControl } from "./phi-file-drop-control";
 import { PhiButtonControl } from "./phi-button-control";
@@ -16,13 +15,6 @@ import { usePhiImmediatePicker } from "./use-phi-immediate-picker";
 function resolveInitialMode(mask) {
     return mask?.source === "asset" ? "asset" : "preset";
 }
-function mergeMask(value, patch) {
-    return {
-        ...mergePhiMaskConfigDefaults(value),
-        ...patch,
-        enabled: patch.enabled ?? true,
-    };
-}
 function renderMaskPreview(mask, label, selected = false) {
     return (_jsxs(Flex, { vertical: true, align: "center", gap: 6, children: [_jsx("div", { style: {
                     width: 54,
@@ -33,7 +25,7 @@ function renderMaskPreview(mask, label, selected = false) {
                     ...resolvePhiMaskStyle(mask),
                 } }), _jsx(Typography.Text, { style: { fontSize: 11, textAlign: "center" }, children: label })] }));
 }
-export function PhiMaskPickerControl({ value, open, buttonAriaLabel = "Select mask", buttonIcon = _jsx(StarOutlined, {}), placement = "bottomRight", mediaPickerProps, selectedIcon, uploading = false, uploadProgress = 0, popupRootClassName, getPopupContainer, onUploadFile, onIconSelect, onChange, onCommit, onDiscard, onOpenChange, }) {
+export function PhiMaskPickerControl({ value, open, buttonAriaLabel = "Select mask", buttonIcon = _jsx(PhiIcon, { name: "star", size: "inherit" }), placement = "bottomRight", mediaPickerProps, selectedIcon, uploading = false, uploadProgress = 0, popupRootClassName, getPopupContainer, onUploadFile, onIconSelect, onChange, onCommit, onDiscard, onOpenChange, }) {
     const contentRef = useRef(null);
     const [mode, setMode] = useState(resolveInitialMode(value));
     const picker = usePhiImmediatePicker({
@@ -46,7 +38,7 @@ export function PhiMaskPickerControl({ value, open, buttonAriaLabel = "Select ma
     });
     const resolvedMask = mergePhiMaskConfigDefaults(picker.value);
     const patchMask = (patch) => {
-        picker.changeValue(mergeMask(picker.value, patch));
+        picker.changeValue(mergePhiMaskConfigPatch(picker.value, patch));
     };
     const selectPreset = (preset) => {
         patchMask({
@@ -57,7 +49,7 @@ export function PhiMaskPickerControl({ value, open, buttonAriaLabel = "Select ma
         });
     };
     const popupContainer = (triggerNode) => contentRef.current ?? triggerNode.parentElement ?? document.body;
-    const content = (_jsx("div", { ref: contentRef, style: { width: 360, maxWidth: "calc(100vw - (var(--ant-padding-lg) * 2))" }, onClick: (event) => event.stopPropagation(), onMouseDown: (event) => event.stopPropagation(), onPointerDown: (event) => event.stopPropagation(), onKeyDown: (event) => event.stopPropagation(), children: _jsxs(Flex, { vertical: true, gap: "var(--ant-padding-sm)", children: [_jsxs(Flex, { align: "center", justify: "space-between", gap: "var(--ant-padding-sm)", children: [_jsx(Typography.Text, { strong: true, children: "Mask" }), _jsx(PhiButtonControl, { size: "small", type: "text", danger: true, icon: _jsx(DeleteOutlined, {}), ariaLabel: "Clear mask", onClick: () => picker.changeValue(undefined) })] }), _jsx(PhiSegmentedControl, { block: true, value: mode, options: [
+    const content = (_jsx("div", { ref: contentRef, style: { width: 360, maxWidth: "calc(100vw - (var(--ant-padding-lg) * 2))" }, onClick: (event) => event.stopPropagation(), onMouseDown: (event) => event.stopPropagation(), onPointerDown: (event) => event.stopPropagation(), onKeyDown: (event) => event.stopPropagation(), children: _jsxs(Flex, { vertical: true, gap: "var(--ant-padding-sm)", children: [_jsxs(Flex, { align: "center", justify: "space-between", gap: "var(--ant-padding-sm)", children: [_jsx(Typography.Text, { strong: true, children: "Mask" }), _jsx(PhiButtonControl, { size: "small", type: "text", danger: true, icon: _jsx(PhiIcon, { name: "delete", size: "inherit" }), ariaLabel: "Clear mask", onClick: () => picker.changeValue(undefined) })] }), _jsx(PhiSegmentedControl, { block: true, value: mode, options: [
                         { value: "preset", label: "Presets" },
                         { value: "asset", label: "Media" },
                     ], onChange: setMode }), mode === "preset" ? (_jsx("div", { style: {
@@ -72,7 +64,7 @@ export function PhiMaskPickerControl({ value, open, buttonAriaLabel = "Select ma
                                 source: "preset",
                                 preset: preset.value,
                             }, preset.label, selected) }, preset.value));
-                    }) })) : null, mode === "asset" ? (_jsxs(Flex, { vertical: true, gap: "var(--ant-padding-xs)", children: [_jsx(PhiMediaPickerControl, { ...mediaPickerProps, getPopupContainer: popupContainer, popupRootClassName: popupRootClassName, trigger: _jsx("span", { style: { display: "block" }, children: _jsx(PhiButtonControl, { block: true, label: "Select mask asset", onClick: () => undefined }) }) }), _jsx(PhiFileDropControl, { accept: ".svg,.png,image/svg+xml,image/png", onFile: (file) => onUploadFile?.(file), style: { width: "100%" }, children: _jsx("span", { style: { display: "block", width: "100%" }, children: _jsx(PhiButtonControl, { block: true, icon: _jsx(UploadOutlined, {}), loading: uploading, label: uploading ? `Uploading ${uploadProgress}%` : "Upload SVG or PNG mask", onClick: () => undefined }) }) }), _jsx(PhiIconPickerControl, { value: selectedIcon, onChange: onIconSelect, buttonAriaLabel: "Select Iconify mask", buttonIcon: selectedIcon ? _jsx(PhiIcon, { name: selectedIcon, size: 16 }) : _jsx(StarOutlined, {}), buttonLabel: uploading ? `Uploading ${uploadProgress}%` : "Select Iconify icon", buttonType: "default", buttonSize: "medium", buttonBlock: true, buttonStyle: { width: "100%" }, getPopupContainer: popupContainer, rootClassName: popupRootClassName })] })) : null, [
+                    }) })) : null, mode === "asset" ? (_jsxs(Flex, { vertical: true, gap: "var(--ant-padding-xs)", children: [_jsx(PhiMediaPickerControl, { ...mediaPickerProps, getPopupContainer: popupContainer, popupRootClassName: popupRootClassName, trigger: _jsx("span", { style: { display: "block" }, children: _jsx(PhiButtonControl, { block: true, label: "Select mask asset", onClick: () => undefined }) }) }), _jsx(PhiFileDropControl, { accept: ".svg,.png,image/svg+xml,image/png", onFile: (file) => onUploadFile?.(file), disabled: uploading, style: { width: "100%" }, children: _jsx("span", { style: { display: "block", width: "100%" }, children: _jsx(PhiButtonControl, { block: true, icon: _jsx(PhiIcon, { name: "upload", size: "inherit" }), loading: uploading, label: uploading ? `Uploading ${uploadProgress}%` : "Upload SVG or PNG mask", onClick: () => undefined }) }) }), _jsx(PhiIconPickerControl, { value: selectedIcon, onChange: onIconSelect, disabled: uploading, buttonAriaLabel: "Select Iconify mask", buttonIcon: selectedIcon ? _jsx(PhiIcon, { name: selectedIcon, size: 16 }) : _jsx(PhiIcon, { name: "star", size: "inherit" }), buttonLabel: uploading ? `Uploading ${uploadProgress}%` : "Select Iconify icon", buttonType: "default", buttonSize: "medium", buttonBlock: true, buttonStyle: { width: "100%" }, getPopupContainer: popupContainer, rootClassName: popupRootClassName })] })) : null, [
                     ["Scale", Math.round((resolvedMask.scale ?? 1) * 100), 25, 200, "%", (next) => patchMask({ scale: next / 100 })],
                     ["Offset X", resolvedMask.offsetX ?? 0, -100, 100, "%", (next) => patchMask({ offsetX: next })],
                     ["Offset Y", resolvedMask.offsetY ?? 0, -100, 100, "%", (next) => patchMask({ offsetY: next })],

package/components/controls/phi-media-asset-tile-control.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { DeleteOutlined } from "@ant-design/icons";
+import { resolvePhiMediaAssetTypeLabel } from "../media/asset-type-label";
 import { Flex, Typography } from "antd";
 import NextImage from "next/image";
 import { PhiMediaKind, isPhiMediaAssetOriginalOptimizable, isPhiMediaAssetPublic } from "../../constants/media";
@@ -12,27 +12,7 @@ import { usePhiConfig } from "../root/phi-config-provider";
 import { PhiButtonControl } from "./phi-button-control";
 import { PhiCollectionLayoutControl, } from "./phi-collection-layout-control";
 import { PhiSkeletonControl } from "./phi-skeleton-control";
-function resolveAssetTypeLabel(kind, contentType, originalName) {
-    const normalizedContentType = contentType.trim().toLowerCase();
-    if (kind === PhiMediaKind.Image) {
-        const subtype = normalizedContentType.startsWith("image/")
-            ? normalizedContentType.split("/", 2)[1]
-            : null;
-        if (subtype) {
-            return subtype.split(";")[0].trim();
-        }
-        return normalizedContentType || "image";
-    }
-    const extension = originalName.trim().split(".").pop()?.trim().toLowerCase();
-    if (extension && extension !== originalName.trim().toLowerCase()) {
-        return extension;
-    }
-    const [, subtype] = normalizedContentType.split("/", 2);
-    if (subtype) {
-        return subtype.split(";")[0].trim();
-    }
-    return kind;
-}
+import { PhiIcon } from "../shell/phi-icon";
 export function PhiMediaAssetTileControl({ asset, minColumnWidth, selected = false, mode = "grid", size = "medium", disabled = false, deleting = false, onSelect, onDelete, deleteLabel, showTypeLabel = true, showDeleteAction = false, showDimensions = true, showIdLabel = false, }) {
     const { token } = usePhiConfig();
     const compact = size === "small";
@@ -118,7 +98,7 @@ export function PhiMediaAssetTileControl({ asset, minColumnWidth, selected = fal
                             minWidth: 0,
                             color: "rgba(0, 0, 0, 0.88)",
                             fontSize: assetTileLabelFontSize,
-                        }, children: resolveAssetTypeLabel(asset.kind, asset.contentType, asset.originalName) })) : _jsx("span", {}), showDeleteAction && onDelete ? (_jsx("span", { onClick: (event) => event.stopPropagation(), onKeyDown: (event) => event.stopPropagation(), children: _jsx(PhiButtonControl, { ariaLabel: deleteLabel, icon: _jsx(DeleteOutlined, {}), type: "text", size: "small", danger: true, loading: deleting, disabled: disabled, onClick: () => onDelete(asset) }) })) : null] })) : null] }));
+                        }, children: resolvePhiMediaAssetTypeLabel(asset.kind, asset.contentType, asset.originalName) })) : _jsx("span", {}), showDeleteAction && onDelete ? (_jsx("span", { onClick: (event) => event.stopPropagation(), onKeyDown: (event) => event.stopPropagation(), children: _jsx(PhiButtonControl, { ariaLabel: deleteLabel, icon: _jsx(PhiIcon, { name: "delete", size: "inherit" }), type: "text", size: "small", danger: true, loading: deleting, disabled: disabled, onClick: () => onDelete(asset) }) })) : null] })) : null] }));
 }
 export function PhiMediaAssetCollectionSkeletonControl({ mode, gap, minColumnWidth, active = true, count = 10, size = "medium", }) {
     const { token } = usePhiConfig();

package/components/controls/phi-media-picker-control.js

@@ -1,7 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Flex, Typography } from "antd";
-import { PictureOutlined, ReloadOutlined } from "@ant-design/icons";
 import { usePhiConfig } from "../root/phi-config-provider";
 import { PhiButtonControl } from "./phi-button-control";
 import { PhiCascaderControl } from "./phi-cascader-control";
@@ -15,6 +14,7 @@ import { PhiPopoverControl } from "./phi-popover-control";
 import { PhiSliderControl } from "./phi-slider-control";
 import { PhiTextControl } from "./phi-text-control";
 import { usePhiImmediatePicker } from "./use-phi-immediate-picker";
+import { PhiIcon } from "../shell/phi-icon";
 export function PhiMediaPickerControl({ open, value = null, assets, spaces = [], spaceValue = null, folders = [], folderValue = "/", query = "", page = 1, pageSize = 20, total = assets.length, minColumnWidth = PHI_MEDIA_PICKER_DEFAULT_COLUMN_WIDTH, loading, disabled, readOnly, placement = "left", showSearchBar = true, showFolderFilter = true, showPagination = true, trigger, labels, getPopupContainer, popupRootClassName, onOpenChange, onQueryChange, onSpaceChange, onFolderChange, onPageChange, onMinColumnWidthChange, onReload, onChange, onCommit, onDiscard, }) {
     const { token } = usePhiConfig();
     const locked = disabled || readOnly;
@@ -38,6 +38,6 @@ export function PhiMediaPickerControl({ open, value = null, assets, spaces = [],
             height: "min(480px, calc(100dvh - 48px))",
             minHeight: 0,
         }, children: [_jsx(Typography.Text, { strong: true, children: labels?.title ?? "Select media" }), _jsxs(Flex, { gap: token.paddingSM, align: "center", wrap: true, children: [showSearchBar ? (_jsx("div", { style: { flex: "1 1 220px" }, children: _jsx(PhiTextControl, { inputType: "search", value: query, size: "small", placeholder: labels?.search ?? "Search", disabled: locked, onChange: (next) => onQueryChange?.(next ?? "") }) })) : null, spaces.length > 1 ? (_jsx("div", { style: { flex: "0 1 160px" }, children: _jsx(PhiSelectControl, { value: spaceValue ?? undefined, options: spaces, size: "small", placeholder: labels?.space ?? "Space", disabled: locked, getPopupContainer: getPopupContainer, popupRootClassName: popupRootClassName, onChange: (next) => { if (typeof next === "string" && next)
-                                onSpaceChange?.(next); } }) })) : null, showFolderFilter ? (_jsx("div", { style: { flex: "1 1 180px" }, children: _jsx(PhiCascaderControl, { value: folderValue, options: folders, allowRoot: true, rootValue: "/", separator: "/", size: "small", placeholder: labels?.folder ?? "Folder", disabled: locked, getPopupContainer: getPopupContainer, classNames: popupRootClassName ? { popup: { root: popupRootClassName } } : undefined, onChange: (next) => onFolderChange?.(next ?? "/") }) })) : null, _jsx(PhiButtonControl, { ariaLabel: labels?.reload ?? "Reload", tooltip: labels?.reload ?? "Reload", icon: _jsx(ReloadOutlined, {}), size: "small", disabled: locked, onClick: onReload })] }), _jsx("div", { style: { flex: "1 1 auto", minHeight: 0, overflow: "auto" }, children: loading && assets.length === 0 ? (_jsx(PhiMediaAssetCollectionSkeletonControl, { mode: "grid", gap: token.paddingSM, minColumnWidth: resolvedMinColumnWidth, count: Math.min(pageSize, 12), size: "small" })) : assets.length === 0 ? (_jsx(PhiEmptyControl, { description: labels?.empty ?? "No media" })) : (_jsx(PhiCollectionLayoutControl, { mode: "grid", gap: token.paddingSM, minColumnWidth: resolvedMinColumnWidth, items: tileItems })) }), _jsxs(Flex, { align: "center", gap: token.paddingSM, style: { flex: "0 0 auto", minWidth: 0 }, children: [_jsx(Typography.Text, { type: "secondary", ellipsis: true, style: { flex: "0 1 180px", minWidth: 0 }, children: selected?.title || selected?.originalName || "" }), _jsxs(Flex, { align: "center", gap: token.paddingXS, style: { flex: "1 1 160px", minWidth: 120 }, children: [_jsx(PhiSliderControl, { ariaLabel: labels?.tileSize ?? "Tile size", value: resolvedMinColumnWidth, min: PHI_MEDIA_PICKER_MIN_COLUMN_WIDTH, max: PHI_MEDIA_PICKER_MAX_COLUMN_WIDTH, step: PHI_MEDIA_PICKER_COLUMN_WIDTH_STEP, tooltipSuffix: " px", disabled: locked, style: { flex: "1 1 auto", minWidth: 0 }, onChange: onMinColumnWidthChange }), _jsxs(Typography.Text, { type: "secondary", style: { fontSize: token.fontSizeSM, whiteSpace: "nowrap" }, children: [resolvedMinColumnWidth, "px"] })] }), _jsx(PhiButtonControl, { label: labels?.clear ?? "Clear", size: "small", disabled: locked || picker.value == null, onClick: () => picker.changeValue(null) }), showPagination ? (_jsx(PhiPaginationControl, { page: page, pageSize: pageSize, total: total, size: "small", disabled: locked, showSizeChanger: true, getPopupContainer: getPopupContainer, popupRootClassName: popupRootClassName, onChange: (next) => onPageChange?.(next.page, next.pageSize) })) : null] })] }));
-    return (_jsx(PhiPopoverControl, { open: picker.open, content: content, placement: placement, disabled: locked, getPopupContainer: getPopupContainer, rootClassName: popupRootClassName, onOpenChange: picker.handleOpenChange, children: trigger ?? (_jsx("span", { children: _jsx(PhiButtonControl, { block: true, icon: _jsx(PictureOutlined, {}), label: labels?.trigger ?? "Select media", disabled: locked, onClick: picker.openPicker }) })) }));
+                                onSpaceChange?.(next); } }) })) : null, showFolderFilter ? (_jsx("div", { style: { flex: "1 1 180px" }, children: _jsx(PhiCascaderControl, { value: folderValue, options: folders, allowRoot: true, rootValue: "/", separator: "/", size: "small", placeholder: labels?.folder ?? "Folder", disabled: locked, getPopupContainer: getPopupContainer, classNames: popupRootClassName ? { popup: { root: popupRootClassName } } : undefined, onChange: (next) => onFolderChange?.(next ?? "/") }) })) : null, _jsx(PhiButtonControl, { ariaLabel: labels?.reload ?? "Reload", tooltip: labels?.reload ?? "Reload", icon: _jsx(PhiIcon, { name: "reload", size: "inherit" }), size: "small", disabled: locked, onClick: onReload })] }), _jsx("div", { style: { flex: "1 1 auto", minHeight: 0, overflow: "auto" }, children: loading && assets.length === 0 ? (_jsx(PhiMediaAssetCollectionSkeletonControl, { mode: "grid", gap: token.paddingSM, minColumnWidth: resolvedMinColumnWidth, count: Math.min(pageSize, 12), size: "small" })) : assets.length === 0 ? (_jsx(PhiEmptyControl, { description: labels?.empty ?? "No media" })) : (_jsx(PhiCollectionLayoutControl, { mode: "grid", gap: token.paddingSM, minColumnWidth: resolvedMinColumnWidth, items: tileItems })) }), _jsxs(Flex, { align: "center", gap: token.paddingSM, style: { flex: "0 0 auto", minWidth: 0 }, children: [_jsx(Typography.Text, { type: "secondary", ellipsis: true, style: { flex: "0 1 180px", minWidth: 0 }, children: selected?.title || selected?.originalName || "" }), _jsxs(Flex, { align: "center", gap: token.paddingXS, style: { flex: "1 1 160px", minWidth: 120 }, children: [_jsx(PhiSliderControl, { ariaLabel: labels?.tileSize ?? "Tile size", value: resolvedMinColumnWidth, min: PHI_MEDIA_PICKER_MIN_COLUMN_WIDTH, max: PHI_MEDIA_PICKER_MAX_COLUMN_WIDTH, step: PHI_MEDIA_PICKER_COLUMN_WIDTH_STEP, tooltipSuffix: " px", disabled: locked, style: { flex: "1 1 auto", minWidth: 0 }, onChange: onMinColumnWidthChange }), _jsxs(Typography.Text, { type: "secondary", style: { fontSize: token.fontSizeSM, whiteSpace: "nowrap" }, children: [resolvedMinColumnWidth, "px"] })] }), _jsx(PhiButtonControl, { label: labels?.clear ?? "Clear", size: "small", disabled: locked || picker.value == null, onClick: () => picker.changeValue(null) }), showPagination ? (_jsx(PhiPaginationControl, { page: page, pageSize: pageSize, total: total, size: "small", disabled: locked, showSizeChanger: true, getPopupContainer: getPopupContainer, popupRootClassName: popupRootClassName, onChange: (next) => onPageChange?.(next.page, next.pageSize) })) : null] })] }));
+    return (_jsx(PhiPopoverControl, { open: picker.open, content: content, placement: placement, disabled: locked, getPopupContainer: getPopupContainer, rootClassName: popupRootClassName, onOpenChange: picker.handleOpenChange, children: trigger ?? (_jsx("span", { children: _jsx(PhiButtonControl, { block: true, icon: _jsx(PhiIcon, { name: "picture", size: "inherit" }), label: labels?.trigger ?? "Select media", disabled: locked, onClick: picker.openPicker }) })) }));
 }

package/components/controls/phi-menu-control.d.ts

@@ -29,11 +29,6 @@ export type PhiMenuControlGroup = {
 };
 export type PhiMenuControlItem = PhiMenuControlDivider | PhiMenuControlGroup | PhiMenuControlEntry;
 export type PhiMenuControlProps = {
-    /**
-     * Distinguishes the generated theme CSS variable scope between menus rendered on one page
-     * (for example the sidebar and its Builder preview), so their component tokens never collide.
-     */
-    scope: string;
     items: readonly PhiMenuControlItem[];
     mode: "inline" | "horizontal";
     /** Defaults to the active Phi theme mode. */
@@ -51,8 +46,8 @@ export declare function toPhiAntdMenuItems(items: readonly PhiMenuControlItem[])
 /**
  * The canonical navigation menu presentation (SETTINGS.md-independent; see the Control layer
  * boundary in AGENTS.md): Widgets describe navigation as `PhiMenuControlItem`s and never touch the
- * Ant Design Menu or its item interface. The theme wiring lives here once — the scoped CSS variable
- * key, the transparent item backgrounds every Phi menu surface uses, and the collapsed-sider width
- * — so menu surfaces cannot drift apart in their component tokens.
+ * Ant Design Menu or its item interface. The theme wiring lives here once — the transparent item
+ * backgrounds every stacked Phi menu uses, its collapsed width, and the type a Widget configures — so
+ * menu surfaces cannot drift apart in their component tokens.
  */
-export declare function PhiMenuControl({ scope, items, mode, menuTheme, selectedKeys, collapsed, collapsedWidth, inlineIndent, fontFamily, fontSize, style, }: PhiMenuControlProps): import("react").JSX.Element | null;
+export declare function PhiMenuControl({ items, mode, menuTheme, selectedKeys, collapsed, collapsedWidth, inlineIndent, fontFamily, fontSize, style, }: PhiMenuControlProps): import("react").JSX.Element | null;

package/components/controls/phi-menu-control.js

@@ -1,7 +1,6 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { ConfigProvider, Menu } from "antd";
-import { createPhiAntdThemeCssVarKey } from "../../theme/phi-antd-token-resolver";
+import { Menu } from "antd";
 import { usePhiConfig } from "../root/phi-config-provider";
 export function toPhiAntdMenuItems(items) {
     return items.map((item) => {
@@ -21,54 +20,54 @@ export function toPhiAntdMenuItems(items) {
 /**
  * The canonical navigation menu presentation (SETTINGS.md-independent; see the Control layer
  * boundary in AGENTS.md): Widgets describe navigation as `PhiMenuControlItem`s and never touch the
- * Ant Design Menu or its item interface. The theme wiring lives here once — the scoped CSS variable
- * key, the transparent item backgrounds every Phi menu surface uses, and the collapsed-sider width
- * — so menu surfaces cannot drift apart in their component tokens.
+ * Ant Design Menu or its item interface. The theme wiring lives here once — the transparent item
+ * backgrounds every stacked Phi menu uses, its collapsed width, and the type a Widget configures — so
+ * menu surfaces cannot drift apart in their component tokens.
  */
-export function PhiMenuControl({ scope, items, mode, menuTheme, selectedKeys, collapsed = false, collapsedWidth, inlineIndent, fontFamily, fontSize, style, }) {
-    const { mode: themeMode, token } = usePhiConfig();
+export function PhiMenuControl({ items, mode, menuTheme, selectedKeys, collapsed = false, collapsedWidth, inlineIndent, fontFamily, fontSize, style, }) {
+    const { mode: themeMode } = usePhiConfig();
     const resolvedMenuTheme = menuTheme ?? themeMode;
-    const localThemeToken = {
-        ...(fontFamily ? { fontFamily } : {}),
-        ...(fontSize ? { fontSize } : {}),
-    };
-    /**
-     * Only the stacked menu overrides item geometry: it fills the width of its Sider, so items carry
-     * no inline margin and paint no background of their own. A horizontal menu keeps the Ant Design
-     * defaults, whose item spacing is what separates the entries in a header bar.
+    /*
+     * What a Menu changes about Ant Design's own Menu, as classes and custom properties rather than a
+     * `ConfigProvider` of its own.
+     *
+     * A nested provider with its own tokens makes Ant Design derive the whole Theme again -- its
+     * component tokens and its variable scope are part of the derivation's cache key -- and write all of
+     * its variables out a second time: a sidebar cost a full derivation and 12 KB of HTML per request
+     * (measured 04.10.2026). The overrides are a handful of variables, so they are set as variables,
+     * by `styles/controls.css` under the classes below. The values a Widget configures travel as
+     * `--phi-menu-*` properties, on the Menu and on its popups, which Ant Design renders into a portal.
      */
-    const menuComponentTheme = mode === "inline"
-        ? {
-            ...(collapsedWidth !== undefined ? { collapsedWidth } : {}),
-            itemMarginBlock: token.marginXXS,
-            itemMarginInline: 0,
-            itemBg: "transparent",
-            subMenuItemBg: "transparent",
-            darkItemBg: "transparent",
-            darkSubMenuItemBg: "transparent",
-        }
-        : {};
-    const themeCssVarKey = createPhiAntdThemeCssVarKey(scope, {
-        mode: themeMode,
-        rootToken: token,
-        token: localThemeToken,
-        menu: menuComponentTheme,
-        menuTheme: resolvedMenuTheme,
-    });
+    const presentationVars = {
+        ...(fontFamily ? { "--phi-menu-font-family": fontFamily } : {}),
+        ...(fontSize ? { "--phi-menu-font-size": `${fontSize}px` } : {}),
+        ...(mode === "inline" && collapsedWidth !== undefined
+            ? { "--phi-menu-collapsed-width": typeof collapsedWidth === "number" ? `${collapsedWidth}px` : collapsedWidth }
+            : {}),
+    };
+    const modifiers = [
+        "phi-menu-control",
+        /*
+         * Only the stacked menu overrides item geometry: it fills the width of its Sider, so items carry
+         * no inline margin and paint no background of their own. A horizontal menu keeps the Ant Design
+         * defaults, whose item spacing is what separates the entries in a header bar.
+         */
+        mode === "inline" ? "phi-menu-control--inline" : null,
+        fontFamily ? "phi-menu-control--font-family" : null,
+        fontSize ? "phi-menu-control--font-size" : null,
+        mode === "inline" && collapsedWidth !== undefined ? "phi-menu-control--collapsed-width" : null,
+    ].filter(Boolean).join(" ");
     if (items.length === 0) {
         return null;
     }
-    return (_jsx(ConfigProvider, { theme: {
-            cssVar: { prefix: "ant", key: themeCssVarKey },
-            token: localThemeToken,
-            components: { Menu: menuComponentTheme },
-        }, children: _jsx(Menu, { mode: mode, theme: resolvedMenuTheme, selectedKeys: selectedKeys ? [...selectedKeys] : undefined, items: toPhiAntdMenuItems(items), ...(mode === "inline" ? { inlineCollapsed: collapsed, inlineIndent } : {}), style: {
-                background: "transparent",
-                width: "100%",
-                minWidth: 0,
-                ...(mode === "inline"
-                    ? { height: "auto", borderInlineEnd: "none" }
-                    : { borderBottom: "none" }),
-                ...style,
-            } }) }));
+    return (_jsx(Menu, { className: modifiers, classNames: { popup: { root: `${modifiers} phi-menu-control__popup` } }, styles: { popup: { root: presentationVars } }, mode: mode, theme: resolvedMenuTheme, selectedKeys: selectedKeys ? [...selectedKeys] : undefined, items: toPhiAntdMenuItems(items), ...(mode === "inline" ? { inlineCollapsed: collapsed, inlineIndent } : {}), style: {
+            ...presentationVars,
+            background: "transparent",
+            width: "100%",
+            minWidth: 0,
+            ...(mode === "inline"
+                ? { height: "auto", borderInlineEnd: "none" }
+                : { borderBottom: "none" }),
+            ...style,
+        } }));
 }

package/components/controls/phi-modal-control-adapter.js

@@ -37,6 +37,24 @@ const PHI_MODAL_WIDTH_BY_CONTROL_SIZE = {
     medium: 720,
     large: 960,
 };
+/** What a dialog opens on: the first thing to type into or choose from, never a button or a hint. */
+const PHI_MODAL_FIRST_FIELD_SELECTOR = [
+    "input:not([type=hidden]):not(:disabled)",
+    "textarea:not(:disabled)",
+    "select:not(:disabled)",
+    "[contenteditable=true]",
+].join(", ");
+const PHI_MODAL_TAB_STOP_SELECTOR = [
+    "a[href]",
+    "button:not(:disabled)",
+    "input:not([type=hidden]):not(:disabled)",
+    "textarea:not(:disabled)",
+    "select:not(:disabled)",
+    "[contenteditable=true]",
+    "[tabindex]:not([tabindex='-1'])",
+].join(", ");
+/** About a second: a Form that loads its descriptor late still gets the focus, a slower one does not. */
+const PHI_MODAL_FIRST_FIELD_MAX_FRAMES = 60;
 const PHI_MODAL_HEADER_MIN_BLOCK_SIZE = `calc(${PHI_CONTROL.md} + ${PHI_SPACE.xs} + ${PHI_SPACE.xs})`;
 export function PhiModalControlAdapter({ open, title, header, body, footer, closable = true, keyboard = true, mask = PHI_OVERLAY_DEFAULT_MASK, mountPolicy = "remount", centered = false, controlSize, size, width, rootClassName, containerStyle, onDismiss, afterOpenChange, }) {
     const { token } = usePhiConfig();
@@ -44,6 +62,7 @@ export function PhiModalControlAdapter({ open, title, header, body, footer, clos
     const mode = useSyncExternalStore(subscribeModalMode, readModalMode, readServerModalMode);
     const bodyMeasureRef = useRef(null);
     const bodyContentRef = useRef(null);
+    const dialogRef = useRef(null);
     const resizeAnimationRef = useRef(null);
     useEffect(() => {
         const bodyMeasure = bodyMeasureRef.current;
@@ -87,6 +106,41 @@ export function PhiModalControlAdapter({ open, title, header, body, footer, clos
             resizeAnimationRef.current = null;
         };
     }, [open, size?.height, token.motionDurationMid, token.motionEaseInOut]);
+    /*
+     * Ant Design's lock moves the focus to the first focusable element, which is the close button, so a
+     * dialog with a Form could not be typed into until Tab was pressed. The field may mount a few frames
+     * late, and once the person has pressed a key or the pointer the focus is theirs.
+     */
+    useEffect(() => {
+        if (!open)
+            return undefined;
+        let frame = 0;
+        let frames = 0;
+        let settled = false;
+        const settle = () => { settled = true; };
+        window.addEventListener("keydown", settle, true);
+        window.addEventListener("pointerdown", settle, true);
+        const tryFocus = () => {
+            if (settled)
+                return;
+            const content = bodyContentRef.current;
+            const field = content?.querySelector(PHI_MODAL_FIRST_FIELD_SELECTOR);
+            if (field != null && !content?.contains(document.activeElement)) {
+                field.focus({ preventScroll: true });
+            }
+            if (field != null || content?.contains(document.activeElement))
+                return;
+            frames += 1;
+            if (frames < PHI_MODAL_FIRST_FIELD_MAX_FRAMES)
+                frame = window.requestAnimationFrame(tryFocus);
+        };
+        frame = window.requestAnimationFrame(tryFocus);
+        return () => {
+            window.cancelAnimationFrame(frame);
+            window.removeEventListener("keydown", settle, true);
+            window.removeEventListener("pointerdown", settle, true);
+        };
+    }, [open]);
     const resolvedMask = resolvePhiOverlayMaskPresentation(mask);
     const renderedTitle = header == null ? title : (_jsxs("div", { style: {
             display: "grid",
@@ -151,7 +205,15 @@ export function PhiModalControlAdapter({ open, title, header, body, footer, clos
                 padding: 0,
                 background: "transparent",
             },
-        }, onCancel: (event) => onDismiss?.(resolvePhiOverlayDismissSource(event)), afterOpenChange: afterOpenChange, modalRender: (node) => (_jsx("div", { onMouseDown: (event) => event.stopPropagation(), onClick: (event) => event.stopPropagation(), children: node })), children: _jsx("div", { ref: bodyMeasureRef, "data-phi-modal-body-measure": "true", style: {
+        }, onCancel: (event) => onDismiss?.(resolvePhiOverlayDismissSource(event)), afterOpenChange: afterOpenChange, modalRender: (node) => (_jsxs("div", { ref: dialogRef, onMouseDown: (event) => event.stopPropagation(), onClick: (event) => event.stopPropagation(), children: [node, _jsx("span", { tabIndex: 0, "data-phi-modal-focus-wrap": "true", style: { position: "fixed", inlineSize: 0, blockSize: 0, overflow: "hidden" }, onFocus: (event) => {
+                        const dialog = dialogRef.current;
+                        if (dialog == null)
+                            return;
+                        const stops = [...dialog.querySelectorAll(PHI_MODAL_TAB_STOP_SELECTOR)]
+                            .filter((stop) => stop !== event.currentTarget && stop.checkVisibility());
+                        const forward = event.relatedTarget instanceof Node && dialog.contains(event.relatedTarget);
+                        (forward ? stops[0] : stops[stops.length - 1])?.focus({ preventScroll: true });
+                    } })] })), children: _jsx("div", { ref: bodyMeasureRef, "data-phi-modal-body-measure": "true", style: {
                 minWidth: 0,
                 overflow: "hidden",
                 width: "100%",

package/components/controls/phi-multi-select-control.js

@@ -3,8 +3,9 @@ import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { Select } from "antd";
 import { PhiControlOptionContent } from "./phi-control-option-content";
-import { PhiLabeledControl } from "./phi-labeled-control";
+import { PhiLabeledControl, usePhiControlLabel } from "./phi-labeled-control";
 export function PhiMultiSelectControl({ id, value, label, description, placeholder, disabled, readOnly, allowCustom, allowClear, options, maxTagCount, size, variant, popupMatchSelectWidth = false, style, onFocus, onBlur, onChange, }) {
+    const { labelId, labelledBy } = usePhiControlLabel(label);
     const selectOptions = useMemo(() => options.map((option) => ({
         value: option.value,
         // Keep labels non-primitive so rc-select cannot add native HTML titles.
@@ -13,14 +14,20 @@ export function PhiMultiSelectControl({ id, value, label, description, placehold
         option,
         disabled: option.disabled,
     })), [options]);
-    const control = (_jsx(Select, { id: id, mode: allowCustom ? "tags" : "multiple", allowClear: allowClear, value: [...(value ?? [])], placeholder: placeholder, disabled: disabled || readOnly || !onChange, options: selectOptions, optionFilterProp: ["searchLabel", "value"], optionRender: (option) => {
+    const control = (_jsx(Select, { id: id, "aria-labelledby": labelledBy, mode: allowCustom ? "tags" : "multiple", allowClear: allowClear, value: [...(value ?? [])], placeholder: placeholder, disabled: disabled || readOnly || !onChange, options: selectOptions, optionFilterProp: ["searchLabel", "value"], optionRender: (option) => {
+            /*
+             * With `allowCustom` the Select offers what is being typed as an option of its own, and that one
+             * carries no Phi option: it is a value nobody declared yet, drawn as the text it is.
+             */
             const item = option.data.option;
-            return _jsx(PhiControlOptionContent, { option: item, presentation: "dropdown" });
+            return item
+                ? _jsx(PhiControlOptionContent, { option: item, presentation: "dropdown" })
+                : _jsx(_Fragment, { children: String(option.value ?? "") });
         }, labelRender: (selectedOption) => {
             const selected = options.find((option) => option.value === selectedOption.value);
             return selected
                 ? _jsx(PhiControlOptionContent, { option: selected, presentation: "selection" })
                 : selectedOption.label;
         }, maxTagCount: maxTagCount, popupMatchSelectWidth: popupMatchSelectWidth, size: size, variant: variant, onFocus: onFocus, onBlur: onBlur, onChange: onChange, style: style }));
-    return _jsx(PhiLabeledControl, { label: label, description: description, fill: style?.width === "100%", children: control });
+    return _jsx(PhiLabeledControl, { label: label, labelId: labelId, description: description, fill: style?.width === "100%", children: control });
 }

package/components/controls/phi-number-control.js

@@ -2,13 +2,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { InputNumber } from "antd";
 import { PHI_LAYOUT } from "../../theme/phi-tokens";
-import { PhiLabeledControl } from "./phi-labeled-control";
+import { PhiLabeledControl, usePhiControlLabel } from "./phi-labeled-control";
 export function PhiNumberControl({ id, value, label, prefix, placeholder, min, max, step, precision, disabled, readOnly, size, variant, style, onChange, onBlur, onKeyDown, }) {
-    const control = (_jsx(InputNumber, { id: id, value: value, prefix: prefix, placeholder: placeholder, min: min, max: max, step: step, precision: precision, disabled: disabled || (!onChange && !readOnly), readOnly: readOnly, size: size, variant: variant, 
+    const { labelId, labelledBy } = usePhiControlLabel(label);
+    const control = (_jsx(InputNumber, { id: id, "aria-labelledby": labelledBy, value: value, prefix: prefix, placeholder: placeholder, min: min, max: max, step: step, precision: precision, disabled: disabled || (!onChange && !readOnly), readOnly: readOnly, size: size, variant: variant, 
         /*
          * The ceiling first, so a caller's own `maxWidth` replaces it rather than fighting it. A field
          * that needs to be wider than a number ever is says so, and says it in one place.
          */
         style: { maxWidth: PHI_LAYOUT.numberControlMax, ...style }, onChange: onChange, onBlur: onBlur, onKeyDown: onKeyDown }));
-    return _jsx(PhiLabeledControl, { label: label, fill: style?.width === "100%", children: control });
+    return _jsx(PhiLabeledControl, { label: label, labelId: labelId, fill: style?.width === "100%", children: control });
 }

package/components/controls/phi-options-provider.js

@@ -1,4 +1,5 @@
 "use client";
+import { readPhiDotPath } from "../../helpers/dot-path";
 import { createContext, createElement, useContext, useEffect, useEffectEvent, useMemo, useState, useSyncExternalStore, } from "react";
 import { isPhiRuntimeDataProviderKey, } from "../../types/runtime-data-provider";
 const EMPTY_OPTIONS_PROVIDER_REGISTRY = new Map();
@@ -62,9 +63,7 @@ export function resolvePhiControlOptionsDependencies(dependencies, sources) {
     let satisfied = true;
     for (const dependency of dependencies) {
         const source = dependency.source === "form" ? sources.form : sources.config;
-        const value = dependency.valuePath.split(".").filter(Boolean).reduce((current, segment) => current && typeof current === "object" && !Array.isArray(current)
-            ? current[segment]
-            : undefined, source ?? undefined);
+        const value = readPhiDotPath(source ?? undefined, dependency.valuePath);
         // An empty string is no value: a cleared select reports one, and asking the route with it would
         // narrow to nothing rather than to the parent that is missing.
         const present = value != null && value !== "";
@@ -80,9 +79,7 @@ export function readPhiControlOptionsProviderSourceValue(context, paramKey) {
     if (!path) {
         return undefined;
     }
-    return path.split(".").filter(Boolean).reduce((current, segment) => current && typeof current === "object" && !Array.isArray(current)
-        ? current[segment]
-        : undefined, context.sourceConfig);
+    return readPhiDotPath(context.sourceConfig, path);
 }
 function subscribeEmptyProvider() {
     return () => undefined;