@phis/ui 0.4.3 → 0.4.4

package/components/controls/phi-anchor-nav-control.js

@@ -8,5 +8,8 @@ import { Anchor } from "antd";
  * page, the shape a table of contents takes. It stays where it is drawn and never pins itself.
  */
 export function PhiAnchorNavControl({ items, offsetTop = 0, style }) {
-    return _jsx(Anchor, { affix: false, offsetTop: offsetTop, items: [...items], style: style });
+    return (_jsx(Anchor, { affix: false, offsetTop: offsetTop, items: [...items], className: "phi-anchor-nav-control", 
+        // As wide as its slot and no wider: Ant Design sizes the list to its longest title, which in a
+        // narrow sider ran past the edge. Within the slot a long title ends in an ellipsis, Ant Design's own.
+        style: { maxWidth: "100%", minWidth: 0, ...style } }));
 }

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

@@ -50,7 +50,7 @@ const BACKGROUND_IMAGE_VARIANT_OPTIONS = [
 ];
 function toPickerValue(background) {
     const normalized = normalizePhiBackgroundWidgetConfig(background ?? null);
-    if (normalized.base.kind === "none") {
+    if (normalized.base.kind === "none" || normalized.base.kind === "theme") {
         return "rgba(255, 255, 255, 0)";
     }
     if (normalized.base.kind === "image") {
@@ -126,6 +126,7 @@ export function PhiBackgroundControl({ value, config, disabled = false, mode = "
         { value: "color", label: labels.base.color },
         { value: "gradient", label: labels.base.gradient },
         { value: "image", label: labels.base.image },
+        { value: "theme", label: labels.base.theme },
     ];
     const baseKindOptions = baseKindCatalog.filter((option) => baseKinds.includes(option.value));
     const backgroundPositionOptions = [
@@ -223,7 +224,13 @@ export function PhiBackgroundControl({ value, config, disabled = false, mode = "
     const isOfferedFilter = (filter) => filters.includes(filter) && phiBackgroundSupportsFilter(currentValue, filter);
     const filterKindOptions = filterKindCatalog.filter((option) => option.value === "none" || isOfferedFilter(option.value));
     const activeFilterKind = currentValue.filter && isOfferedFilter(currentValue.filter) ? currentValue.filter : "none";
-    const canOpenPreview = currentValue.base.kind !== "none";
+    // The Theme's Overlay is edited in the Theme workspace; here it has nothing to open.
+    const canOpenPreview = currentValue.base.kind !== "none" && currentValue.base.kind !== "theme";
+    /*
+     * A `theme` Base is the Theme's Overlay whole -- its own Overlay and pane included -- so the Background
+     * offers nothing to lay over it, and the Filter segment has nothing to offer either.
+     */
+    const offersOverlay = currentValue.base.kind !== "theme";
     useEffect(() => {
         if (currentValue.base.kind === "color") {
             lastColorBaseRef.current = currentValue.base;
@@ -298,6 +305,11 @@ export function PhiBackgroundControl({ value, config, disabled = false, mode = "
         if (kind === currentValue.base.kind) {
             return;
         }
+        // The last colour, gradient and picture stay remembered (the effect above), so switching back finds them.
+        if (kind === "theme") {
+            emit({ base: { kind: "theme" }, overlay: null, filter: null, motion: null });
+            return;
+        }
         if (kind === "none") {
             emit({
                 ...currentValue,
@@ -650,7 +662,10 @@ export function PhiBackgroundControl({ value, config, disabled = false, mode = "
         return (_jsx(ConfigPreviewShell, { expanded: canOpenPreview, children: renderPreviewPicker() }));
     }
     const showPreview = mode !== "config";
-    return (_jsxs(PhiFlexControl, { vertical: true, gap: 12, style: { width: "100%" }, children: [showPreview ? (_jsx(ConfigPreviewShell, { expanded: canOpenPreview, children: renderPreviewPicker() })) : null, _jsxs("div", { style: { display: "flex", flexDirection: "column", gap: token.paddingXS, width: "100%" }, children: [_jsx(Typography.Text, { children: labels.sections.base }), _jsx(PhiSegmentedControl, { block: true, disabled: isDisabled, value: currentValue.base.kind, options: baseKindOptions, onChange: (next) => updateBaseKind(next) })] }), currentValue.base.kind === "image" ? (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: token.paddingSM, width: "100%" }, children: [_jsxs(Flex, { align: "center", justify: "space-between", gap: token.paddingXS, wrap: false, style: { width: "100%" }, children: [_jsx(Typography.Text, { children: labels.sections.image }), currentValue.base.sourceKind === "asset" && currentValue.base.assetId != null ? (_jsx(Typography.Text, { type: "secondary", style: { fontSize: token.fontSizeSM, textAlign: "right" }, children: currentValue.base.assetId })) : null] }), _jsxs("div", { style: {
+    return (_jsxs(PhiFlexControl, { vertical: true, gap: 12, style: { width: "100%" }, children: [showPreview ? (_jsx(ConfigPreviewShell, { expanded: canOpenPreview, children: renderPreviewPicker() })) : null, _jsxs("div", { style: { display: "flex", flexDirection: "column", gap: token.paddingXS, width: "100%" }, children: [_jsx(Typography.Text, { children: labels.sections.base }), _jsx(PhiSelectControl, { ariaLabel: labels.sections.base, disabled: isDisabled, value: currentValue.base.kind, options: baseKindOptions, style: { width: "100%" }, onChange: (next) => {
+                            if (next != null)
+                                updateBaseKind(next);
+                        } })] }), currentValue.base.kind === "image" ? (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: token.paddingSM, width: "100%" }, children: [_jsxs(Flex, { align: "center", justify: "space-between", gap: token.paddingXS, wrap: false, style: { width: "100%" }, children: [_jsx(Typography.Text, { children: labels.sections.image }), currentValue.base.sourceKind === "asset" && currentValue.base.assetId != null ? (_jsx(Typography.Text, { type: "secondary", style: { fontSize: token.fontSizeSM, textAlign: "right" }, children: currentValue.base.assetId })) : null] }), _jsxs("div", { style: {
                             display: "grid",
                             gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
                             gap: token.paddingSM,
@@ -676,13 +691,13 @@ export function PhiBackgroundControl({ value, config, disabled = false, mode = "
                         }, children: [_jsx(Select, { value: currentValue.base.position ?? "center", disabled: isDisabled, style: { width: "100%" }, options: backgroundPositionOptions, onChange: (next) => updateImageField("position", next) }), _jsx(Select, { value: currentValue.base.size ?? "cover", disabled: isDisabled, style: { width: "100%" }, options: backgroundSizeOptions, onChange: (next) => updateImageField("size", next) }), _jsx(Select, { value: currentValue.base.repeat ?? "no-repeat", disabled: isDisabled, style: { width: "100%" }, options: backgroundRepeatOptions, onChange: (next) => updateImageField("repeat", next) })] }), backgroundMotionOptions.length > 1 ? (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: token.paddingXS, width: "100%" }, children: [_jsx(Typography.Text, { children: labels.sections.motion }), _jsx(PhiSegmentedControl, { block: true, value: activeMotionMode, options: backgroundMotionOptions, disabled: isDisabled, onChange: updateMotionMode }), activeParallaxMotion ? (_jsxs(_Fragment, { children: [_jsx(Typography.Text, { children: labels.motion.strength }), _jsx(PhiSliderControl, { min: 0, max: 1, step: 0.05, ariaLabel: labels.motion.strength, value: activeParallaxMotion.strength ?? resolvePhiBackgroundParallaxDefaultStrength(activeParallaxMotion.travel), disabled: isDisabled, tooltipSuffix: "\u00D7", style: { width: "100%" }, onChange: (strength) => {
                                             beginSliderEdit();
                                             updateParallaxMotion({ strength });
-                                        }, onChangeComplete: commitSliderEdit }), _jsx(Typography.Text, { children: labels.motion.direction }), _jsx(PhiSegmentedControl, { block: true, value: activeParallaxMotion.direction ?? "natural", options: backgroundMotionDirectionOptions, disabled: isDisabled, onChange: (direction) => updateParallaxMotion({ direction }) }), _jsx(Typography.Text, { children: labels.motion.travel }), _jsx(PhiSegmentedControl, { block: true, value: activeParallaxMotion.travel ?? "rate", options: backgroundMotionTravelOptions, disabled: isDisabled, onChange: (travel) => updateParallaxMotion({ travel }) })] })) : null] })) : null] })) : currentValue.base.kind !== "none" ? (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: token.paddingSM, width: "100%" }, children: [currentValue.base.kind === "color" ? (_jsxs(Flex, { align: "center", justify: "space-between", gap: token.paddingSM, wrap: "wrap", children: [_jsx(Typography.Text, { children: labels.base.color }), _jsx(PhiColorControl, { ...colorPickerTransaction, value: currentValue.base.color, disabled: isDisabled, presets: colorPickerPresets, placement: colorPickerPlacement, onChange: (value) => {
+                                        }, onChangeComplete: commitSliderEdit }), _jsx(Typography.Text, { children: labels.motion.direction }), _jsx(PhiSegmentedControl, { block: true, value: activeParallaxMotion.direction ?? "natural", options: backgroundMotionDirectionOptions, disabled: isDisabled, onChange: (direction) => updateParallaxMotion({ direction }) }), _jsx(Typography.Text, { children: labels.motion.travel }), _jsx(PhiSegmentedControl, { block: true, value: activeParallaxMotion.travel ?? "rate", options: backgroundMotionTravelOptions, disabled: isDisabled, onChange: (travel) => updateParallaxMotion({ travel }) })] })) : null] })) : null] })) : currentValue.base.kind === "color" || currentValue.base.kind === "gradient" ? (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: token.paddingSM, width: "100%" }, children: [currentValue.base.kind === "color" ? (_jsxs(Flex, { align: "center", justify: "space-between", gap: token.paddingSM, wrap: "wrap", children: [_jsx(Typography.Text, { children: labels.base.color }), _jsx(PhiColorControl, { ...colorPickerTransaction, value: currentValue.base.color, disabled: isDisabled, presets: colorPickerPresets, placement: colorPickerPlacement, onChange: (value) => {
                                     if (value != null)
                                         updateBaseFromCss(value);
                                 } })] })) : (_jsxs(Flex, { align: "center", justify: "space-between", gap: token.paddingSM, wrap: "wrap", children: [_jsx(Typography.Text, { children: labels.base.gradient }), _jsx(PhiColorControl, { ...colorPickerTransaction, mode: "gradient", value: derivedPickerValue, disabled: isDisabled, presets: colorPickerPresets, placement: colorPickerPlacement, onChange: (value) => {
                                     if (value != null)
                                         updateBaseFromCss(value);
-                                } })] })), currentValue.base.kind === "gradient" ? (renderDirectionEditor(labels.gradient.direction, currentValue.base.direction, updateGradientDirection)) : null] })) : null, _jsx(Divider, { dashed: true, size: "small" }), _jsxs(PhiFlexControl, { vertical: true, gap: 8, style: { width: "100%" }, children: [_jsx(Typography.Text, { children: labels.sections.overlay }), _jsx(PhiSegmentedControl, { block: true, disabled: isDisabled, value: currentValue.overlay?.kind ?? "none", options: overlayKindOptions, onChange: (next) => updateOverlayKind(next) }), currentValue.overlay ? (_jsxs(PhiFlexControl, { vertical: true, gap: 8, style: { width: "100%" }, children: [currentValue.overlay.kind === "pattern" ? (_jsxs(Flex, { align: "center", justify: "space-between", gap: token.paddingSM, wrap: "wrap", children: [_jsx(Typography.Text, { children: labels.overlay.pattern }), _jsx(PhiSelectControl, { value: currentValue.overlay.patternKey, options: resolvedPatternOptions, disabled: isDisabled, style: { width: fieldControlWidth }, onChange: (patternKey) => {
+                                } })] })), currentValue.base.kind === "gradient" ? (renderDirectionEditor(labels.gradient.direction, currentValue.base.direction, updateGradientDirection)) : null] })) : null, offersOverlay ? _jsx(Divider, { dashed: true, size: "small" }) : null, offersOverlay ? _jsxs(PhiFlexControl, { vertical: true, gap: 8, style: { width: "100%" }, children: [_jsx(Typography.Text, { children: labels.sections.overlay }), _jsx(PhiSegmentedControl, { block: true, disabled: isDisabled, value: currentValue.overlay?.kind ?? "none", options: overlayKindOptions, onChange: (next) => updateOverlayKind(next) }), currentValue.overlay ? (_jsxs(PhiFlexControl, { vertical: true, gap: 8, style: { width: "100%" }, children: [currentValue.overlay.kind === "pattern" ? (_jsxs(Flex, { align: "center", justify: "space-between", gap: token.paddingSM, wrap: "wrap", children: [_jsx(Typography.Text, { children: labels.overlay.pattern }), _jsx(PhiSelectControl, { value: currentValue.overlay.patternKey, options: resolvedPatternOptions, disabled: isDisabled, style: { width: fieldControlWidth }, onChange: (patternKey) => {
                                             const provider = resolvePhiBackgroundPatternProvider(patternKey);
                                             if (!provider)
                                                 return;
@@ -762,5 +777,5 @@ export function PhiBackgroundControl({ value, config, disabled = false, mode = "
                                                     });
                                                 }, style: { width: fieldControlWidth } })] }, field.key));
                                 })
-                                : null] })) : null] }), filterKindOptions.length > 1 ? (_jsxs(_Fragment, { children: [_jsx(Divider, { dashed: true, size: "small" }), _jsxs(PhiFlexControl, { vertical: true, gap: 8, style: { width: "100%" }, children: [_jsx(Typography.Text, { children: labels.sections.filter }), _jsx(PhiSegmentedControl, { block: true, disabled: isDisabled, value: activeFilterKind, options: filterKindOptions, onChange: (next) => updateFilterKind(next) })] })] })) : null] }));
+                                : null] })) : null] }) : null, filterKindOptions.length > 1 ? (_jsxs(_Fragment, { children: [_jsx(Divider, { dashed: true, size: "small" }), _jsxs(PhiFlexControl, { vertical: true, gap: 8, style: { width: "100%" }, children: [_jsx(Typography.Text, { children: labels.sections.filter }), _jsx(PhiSegmentedControl, { block: true, disabled: isDisabled, value: activeFilterKind, options: filterKindOptions, onChange: (next) => updateFilterKind(next) })] })] })) : null] }));
 }

package/components/controls/phi-bullet-list-control.d.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from "react";
+import type { CSSProperties, ReactNode } from "react";
 import { type PhiBulletListNode, type PhiResolvedBulletListStyle } from "../widgets/shared/bullet-list-vocabulary";
 export type PhiBulletListControlProps = {
     items: readonly PhiBulletListNode<ReactNode>[];
@@ -15,6 +15,11 @@ export type PhiBulletListControlProps = {
      * an entry that is a text field has the field's height instead.
      */
     markerLineHeight?: string;
+    /**
+     * The space the list keeps around it as a block among blocks -- a Markdown text's list takes its
+     * paragraphs' spacing, so the block after the last entry stands as far off as after a paragraph.
+     */
+    blockSpacing?: Pick<CSSProperties, "marginBlockStart" | "marginBlockEnd">;
 };
 /**
  * A list, as the house draws one: a marker per level, entries with a box of their own or none, lines
@@ -29,4 +34,4 @@ export type PhiBulletListControlProps = {
  * blocks. An entry's children are the list one level below it, drawn inside the entry under its content,
  * so they are indented by the marker and keep to the entry's box.
  */
-export declare function PhiBulletListControl({ items, listStyle, depth, ordered, start, markerLineHeight, }: PhiBulletListControlProps): import("react").JSX.Element;
+export declare function PhiBulletListControl({ items, listStyle, depth, ordered, start, markerLineHeight, blockSpacing, }: PhiBulletListControlProps): import("react").JSX.Element;

package/components/controls/phi-bullet-list-control.js

@@ -66,7 +66,7 @@ function renderMarker(marker, icon, number) {
  * blocks. An entry's children are the list one level below it, drawn inside the entry under its content,
  * so they are indented by the marker and keep to the entry's box.
  */
-export function PhiBulletListControl({ items, listStyle = resolvePhiBulletListStyle(null), depth = 1, ordered = false, start = 1, markerLineHeight = "1lh", }) {
+export function PhiBulletListControl({ items, listStyle = resolvePhiBulletListStyle(null), depth = 1, ordered = false, start = 1, markerLineHeight = "1lh", blockSpacing, }) {
     const level = resolvePhiBulletListLevel(depth);
     const marker = ordered ? "number" : listStyle.markers[level];
     const gap = resolvePhiSpacingScaleValue(listStyle.gap);
@@ -75,11 +75,12 @@ export function PhiBulletListControl({ items, listStyle = resolvePhiBulletListSt
     // A line between entries that have edges of their own would only double them.
     const divided = !boxed && hasPhiFlag(listStyle.flags, PhiBulletListFlag.Dividers);
     const ListTag = marker === "number" ? "ol" : "ul";
-    const listCss = { display: "grid", gap, margin: 0, padding: 0, listStyle: "none", width: "100%", minWidth: 0 };
+    const listCss = { display: "grid", gap, margin: 0, padding: 0, listStyle: "none", width: "100%", minWidth: 0, ...blockSpacing };
     return (_jsx(ListTag, { style: listCss, ...(ListTag === "ol" && start !== 1 ? { start } : {}), children: items.map((item, index) => (_jsxs("li", { className: surface.className, style: {
                 display: "flex",
                 alignItems: "flex-start",
-                gap: PHI_SPACE.sm,
+                // A marker belongs to its words: one small step between them, not the space between blocks.
+                gap: PHI_SPACE.xs,
                 minWidth: 0,
                 ...surface.style,
                 ...(boxed ? { padding: `${PHI_SPACE.sm} ${PHI_SPACE.md}` } : {}),

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

@@ -82,8 +82,10 @@ export function PhiColorControl({ value = null, defaultValue = "#f0f0f0", disabl
                  */
                 ...(children == null ? { width: "fit-content" } : {}),
             },
-            popupOverlayInner: {
-                padding: 12,
+            popup: {
+                container: {
+                    padding: 12,
+                },
             },
         }, panelRender: (_, extra) => {
             const { Picker } = extra.components;

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

@@ -6,7 +6,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  */
 import { useSyncExternalStore } from "react";
 import { Drawer } from "antd";
-import { PHI_SPACE } from "../../theme/antd-css-var-contract";
+import { PHI_FONT_SIZE, PHI_SPACE } from "../../theme/antd-css-var-contract";
 import { PHI_OVERLAY_DEFAULT_MASK, resolvePhiOverlayDismissSource, resolvePhiOverlayMaskPresentation, } from "./phi-overlay-control-contract";
 const subscribeHydration = () => () => undefined;
 const PHI_DRAWER_HEADER_MIN_BLOCK_SIZE = `calc(var(--ant-control-height) + ${PHI_SPACE.xs} + ${PHI_SPACE.xs})`;
@@ -51,7 +51,8 @@ export function PhiDrawerControlAdapter({ open, title, header, body, footer, clo
                 padding: 0,
                 background: "transparent",
             },
-            title: { width: "100%", minWidth: 0 },
+            // The title in the body's size, as a Modal's is (theme/phi-theme.ts); Ant Design sets a Drawer's at `lg`.
+            title: { width: "100%", minWidth: 0, fontSize: PHI_FONT_SIZE.base, lineHeight: "var(--ant-line-height)" },
             close: {
                 position: "absolute",
                 top: "50%",

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

@@ -46,7 +46,13 @@ export function PhiInlineTextEditor({ value, onChange, onCommit, onCancel, onFoc
                  * At one column it is the smallest thing in the box and the text is the widest, which is the
                  * order this field is built on; it is also the width an empty field keeps.
                  */
-                cols: fitContent ? 1 : undefined, style: fitContent ? { width: "100%", overflow: "hidden" } : { width: "100%" }, inputStyle: inputStyle, onChange: (nextValue) => onChange(nextValue ?? ""), onFocus: onFocus, onBlur: (event) => {
+                cols: fitContent ? 1 : undefined, 
+                /*
+                 * `overflowX` and `overflowY`, not the `overflow` shorthand: while it measures, the text area's
+                 * `autoSize` sets both longhands and takes them away again, and React warns when a longhand
+                 * leaves beside its shorthand -- the shorthand would not be written back.
+                 */
+                style: fitContent ? { width: "100%", overflowX: "hidden", overflowY: "hidden" } : { width: "100%" }, inputStyle: inputStyle, onChange: (nextValue) => onChange(nextValue ?? ""), onFocus: onFocus, onBlur: (event) => {
                     const shouldCommit = !cancelPendingRef.current;
                     cancelPendingRef.current = false;
                     if (shouldCommit) {

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

@@ -20,7 +20,7 @@ export function PhiLengthControl({ value, label, placeholder, min, max, step, pr
      * is kept shut and its change ignored instead.
      */
     const controlDisabled = disabled || (!onChange && !readOnly);
-    const control = (_jsxs(PhiCompactGroupControl, { block: true, size: size, style: { width: "100%", minWidth: 0, ...style }, children: [_jsx(InputNumber, { "aria-label": placeholder ?? label ?? "Length", controls: false, disabled: controlDisabled, readOnly: readOnly, min: min, max: max, step: step, precision: precision, placeholder: placeholder, value: part?.value ?? null, style: { flex: "1 1 0", minWidth: 0 }, onChange: (nextValue) => onChange?.(typeof nextValue === "number" ? serializePhiCssLength(nextValue, unit) : null) }), _jsx(Select, { "aria-label": `${placeholder ?? label ?? "Length"} unit`, disabled: controlDisabled, open: readOnly ? false : undefined, options: PHI_CSS_LENGTH_UNITS.map((option) => ({ value: option, label: option })), popupMatchSelectWidth: false, getPopupContainer: getPopupContainer, showSearch: false, suffixIcon: null, variant: "filled", value: unit, style: { flex: "0 0 38px", width: 38 }, styles: {
+    const control = (_jsxs(PhiCompactGroupControl, { block: true, size: size, style: { width: "100%", minWidth: 0, ...style }, children: [_jsx(InputNumber, { "aria-label": placeholder ?? label ?? "Length", controls: false, disabled: controlDisabled, readOnly: readOnly, min: min, max: max, step: step, precision: precision, placeholder: placeholder, value: part?.value ?? null, style: { flex: "1 1 0", minWidth: 0 }, onChange: (nextValue) => onChange?.(typeof nextValue === "number" ? serializePhiCssLength(nextValue, unit) : null) }), _jsx(Select, { "aria-label": `${placeholder ?? label ?? "Length"} unit`, disabled: controlDisabled, open: readOnly ? false : undefined, options: PHI_CSS_LENGTH_UNITS.map((option) => ({ value: option, label: option })), popupMatchSelectWidth: false, getPopupContainer: getPopupContainer, showSearch: false, suffix: null, variant: "filled", value: unit, style: { flex: "0 0 38px", width: 38 }, styles: {
                     root: { paddingInline: 4 },
                     content: { justifyContent: "center", textAlign: "center" },
                 }, onChange: (nextUnit) => {

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

@@ -1,4 +1,4 @@
-import type { CSSProperties, ReactNode } from "react";
+import type { CSSProperties, MouseEventHandler, ReactNode } from "react";
 export type PhiRibbonControlProps = {
     children: ReactNode;
     /** The band's ground; absent, the Theme's primary. Its words are the light text on any ground. */
@@ -9,6 +9,14 @@ export type PhiRibbonControlProps = {
      */
     placement?: "corner" | "edge";
     style?: CSSProperties;
+    /**
+     * The band's whole words, shown on hover when its ellipsis cut them short (`PhiTruncatedHoverText`).
+     * A band with a hover text takes the pointer, so it needs `onClick` to hand a click on to what lies
+     * under it.
+     */
+    fullText?: string;
+    /** What a click on the band does, for a band that takes the pointer: the box's own click, passed on. */
+    onClick?: MouseEventHandler<HTMLSpanElement>;
 };
 /**
  * A band of words at the end edge of a box: "Popular", "New", "-20 %".
@@ -23,7 +31,8 @@ export type PhiRibbonControlProps = {
  * box's top inset it was too thin to read. In the corner it stands over the inset and a little into the
  * first line's end, which a long eyebrow in a narrow box can reach.
  *
- * It sits above what the box draws, the highlight's ring included, and takes no clicks, so a card that
- * is a link stays one under its band.
+ * It sits above what the box draws, the highlight's ring included. Without a hover text it takes no
+ * clicks, so a card that is a link stays one under its band; with one it has to take the pointer to be
+ * pointed at, and hands a click on through `onClick`.
  */
-export declare function PhiRibbonControl({ children, color, placement, style }: PhiRibbonControlProps): import("react").JSX.Element;
+export declare function PhiRibbonControl({ children, color, placement, style, fullText, onClick }: PhiRibbonControlProps): import("react").JSX.Element;

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

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { PHI_COLOR, PHI_FONT_SIZE, PHI_SPACE } from "../../theme/antd-css-var-contract";
+import { PhiTruncatedHoverText } from "./phi-truncated-hover-text";
 /**
  * A band of words at the end edge of a box: "Popular", "New", "-20 %".
  *
@@ -13,10 +14,11 @@ import { PHI_COLOR, PHI_FONT_SIZE, PHI_SPACE } from "../../theme/antd-css-var-co
  * box's top inset it was too thin to read. In the corner it stands over the inset and a little into the
  * first line's end, which a long eyebrow in a narrow box can reach.
  *
- * It sits above what the box draws, the highlight's ring included, and takes no clicks, so a card that
- * is a link stays one under its band.
+ * It sits above what the box draws, the highlight's ring included. Without a hover text it takes no
+ * clicks, so a card that is a link stays one under its band; with one it has to take the pointer to be
+ * pointed at, and hands a click on through `onClick`.
  */
-export function PhiRibbonControl({ children, color, placement = "edge", style }) {
+export function PhiRibbonControl({ children, color, placement = "edge", style, fullText, onClick }) {
     const radius = "var(--phi-control-radius-sm)";
     const position = placement === "corner"
         ? {
@@ -31,7 +33,7 @@ export function PhiRibbonControl({ children, color, placement = "edge", style })
             borderStartStartRadius: radius,
             borderEndStartRadius: radius,
         };
-    return (_jsx("span", { className: "phi-ribbon-control", style: {
+    const band = (_jsx("span", { className: "phi-ribbon-control", style: {
             position: "absolute",
             insetInlineEnd: 0,
             zIndex: 4,
@@ -46,8 +48,10 @@ export function PhiRibbonControl({ children, color, placement = "edge", style })
             whiteSpace: "nowrap",
             overflow: "hidden",
             textOverflow: "ellipsis",
-            pointerEvents: "none",
+            pointerEvents: fullText ? "auto" : "none",
+            ...(fullText && onClick ? { cursor: "pointer" } : {}),
             ...position,
             ...style,
-        }, children: children }));
+        }, ...(onClick ? { onClick } : {}), children: children }));
+    return fullText ? _jsx(PhiTruncatedHoverText, { title: fullText, children: band }) : band;
 }

package/components/controls/phi-ribbon-wrap-control.d.ts

@@ -0,0 +1,26 @@
+import type { ReactNode } from "react";
+export type PhiRibbonWrapControlProps = {
+    /** The box the ribbon hangs on. */
+    children: ReactNode;
+    /** The ribbon's words. */
+    text: ReactNode;
+    /** The ribbon's ground; absent, the Theme's primary. The fold under it is a darker shade of it. */
+    color?: string;
+    /** Takes the pointer, for an editor that writes in the ribbon; otherwise clicks pass to the box. */
+    interactive?: boolean;
+    className?: string;
+};
+/**
+ * A ribbon that hangs over a box's end edge, with a fold behind it: Ant Design's `Badge.Ribbon`.
+ *
+ * The other band, `PhiRibbonControl`, stands inside the box and needs nothing from it. This one reaches
+ * past the box's edge, which a box that clips -- a card does, for its picture's corners and its zoom --
+ * cannot give a child of its own. So it wraps the box: the wrapper does not clip, the box keeps clipping
+ * what is its own, and the ribbon is the box's sibling. The wrapper is a column that passes the slot's
+ * width and height on to the box. Whatever stands around the wrapper must leave the overhang room: a
+ * Layout that clips at the box's edge cuts the ribbon off as it would any overhang.
+ *
+ * Imported from its own module, not from `antd`'s Badge: the Badge brings its scroll-number motion along,
+ * which a ribbon never uses.
+ */
+export declare function PhiRibbonWrapControl({ children, text, color, interactive, className }: PhiRibbonWrapControlProps): import("react").JSX.Element;

package/components/controls/phi-ribbon-wrap-control.js

@@ -0,0 +1,25 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import Ribbon from "antd/es/badge/Ribbon";
+/**
+ * A ribbon that hangs over a box's end edge, with a fold behind it: Ant Design's `Badge.Ribbon`.
+ *
+ * The other band, `PhiRibbonControl`, stands inside the box and needs nothing from it. This one reaches
+ * past the box's edge, which a box that clips -- a card does, for its picture's corners and its zoom --
+ * cannot give a child of its own. So it wraps the box: the wrapper does not clip, the box keeps clipping
+ * what is its own, and the ribbon is the box's sibling. The wrapper is a column that passes the slot's
+ * width and height on to the box. Whatever stands around the wrapper must leave the overhang room: a
+ * Layout that clips at the box's edge cuts the ribbon off as it would any overhang.
+ *
+ * Imported from its own module, not from `antd`'s Badge: the Badge brings its scroll-number motion along,
+ * which a ribbon never uses.
+ */
+export function PhiRibbonWrapControl({ children, text, color, interactive = false, className }) {
+    const indicator = interactive ? { zIndex: 4 } : { zIndex: 4, pointerEvents: "none" };
+    /*
+     * An editor's field in the ribbon measures itself against the ribbon, which is as wide as its words:
+     * empty, both were nothing, and only the fold showed. Room for a word, as the inner band keeps it.
+     */
+    const content = interactive ? { display: "inline-block", minWidth: "6em" } : undefined;
+    return (_jsx(Ribbon, { text: text, ...(color ? { color } : {}), rootClassName: ["phi-ribbon-wrap-control", className].filter(Boolean).join(" "), styles: { indicator, ...(content ? { content } : {}) }, children: children }));
+}

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

@@ -60,6 +60,9 @@ function groupPhiSelectOptions(resolved) {
 }
 export function PhiSelectControl({ id, value, label, description, ariaLabel, placeholder, disabled, readOnly, presentation = "select", allowCustom, allowClear, options, size, variant, popupMatchSelectWidth = false, getPopupContainer, popupRootClassName, popupZIndex, style, onFocus, onBlur, onOpenChange, onSearch, filterOptionsLocally = true, onChange, }) {
     const { labelId, labelledBy } = usePhiControlLabel(label, ariaLabel);
+    // A compact field opens a compact list: its options write small, as the field does (controls.css).
+    const popupClassName = [popupRootClassName, size === "small" ? "phi-select-popup--sm" : null]
+        .filter(Boolean).join(" ") || undefined;
     const resolvedOptions = groupPhiSelectOptions(separatePhiSelectOptions(options.map((option) => ({
         value: option.value,
         // rc-select synthesizes native HTML title attributes from primitive labels.
@@ -74,7 +77,7 @@ export function PhiSelectControl({ id, value, label, description, ariaLabel, pla
         (value === undefined || typeof value === "string") &&
         options.every((option) => typeof option.value === "string");
     if (canUseTextEntry) {
-        const control = (_jsx(AutoComplete, { "aria-label": ariaLabel, "aria-labelledby": labelledBy, value: value, placeholder: placeholder, disabled: controlDisabled, allowClear: allowClear, options: resolvedOptions, optionRender: (resolvedOption) => isPhiSelectSeparatorEntry(resolvedOption.data) ? renderPhiSelectSeparator() : (_jsx(PhiControlOptionContent, { option: resolvedOption.data.option, presentation: "dropdown" })), size: size, variant: variant, popupMatchSelectWidth: popupMatchSelectWidth, getPopupContainer: getPopupContainer, classNames: popupRootClassName ? { popup: { root: popupRootClassName } } : undefined, styles: popupZIndex == null ? undefined : { popup: { root: { zIndex: popupZIndex } } }, filterOption: !filterOptionsLocally
+        const control = (_jsx(AutoComplete, { "aria-label": ariaLabel, "aria-labelledby": labelledBy, value: value, placeholder: placeholder, disabled: controlDisabled, allowClear: allowClear, options: resolvedOptions, optionRender: (resolvedOption) => isPhiSelectSeparatorEntry(resolvedOption.data) ? renderPhiSelectSeparator() : (_jsx(PhiControlOptionContent, { option: resolvedOption.data.option, presentation: "dropdown" })), size: size, variant: variant, popupMatchSelectWidth: popupMatchSelectWidth, getPopupContainer: getPopupContainer, classNames: popupClassName ? { popup: { root: popupClassName } } : undefined, styles: popupZIndex == null ? undefined : { popup: { root: { zIndex: popupZIndex } } }, filterOption: !filterOptionsLocally
                 ? false
                 : (inputValue, option) => {
                     // A group heading has no search label of its own; antd filters the options inside it.
@@ -90,6 +93,6 @@ export function PhiSelectControl({ id, value, label, description, ariaLabel, pla
             return selected
                 ? _jsx(PhiControlOptionContent, { option: selected, presentation: "selection" })
                 : selectedOption.label;
-        }, size: size, variant: variant, popupMatchSelectWidth: popupMatchSelectWidth, getPopupContainer: getPopupContainer, classNames: popupRootClassName ? { popup: { root: popupRootClassName } } : undefined, styles: popupZIndex == null ? undefined : { popup: { root: { zIndex: popupZIndex } } }, showSearch: true, optionFilterProp: ["searchLabel", "value"], filterOption: filterOptionsLocally ? undefined : false, onSearch: onSearch, onFocus: onFocus, onBlur: onBlur, onOpenChange: onOpenChange, onChange: onChange, style: style }));
+        }, size: size, variant: variant, popupMatchSelectWidth: popupMatchSelectWidth, getPopupContainer: getPopupContainer, classNames: popupClassName ? { popup: { root: popupClassName } } : undefined, styles: popupZIndex == null ? undefined : { popup: { root: { zIndex: popupZIndex } } }, showSearch: true, optionFilterProp: ["searchLabel", "value"], filterOption: filterOptionsLocally ? undefined : false, onSearch: onSearch, onFocus: onFocus, onBlur: onBlur, onOpenChange: onOpenChange, onChange: onChange, style: style }));
     return _jsx(PhiLabeledControl, { label: label, labelId: labelId, description: description, fill: style?.width === "100%", children: control });
 }

package/components/controls/phi-series-chart-control.d.ts

@@ -0,0 +1,48 @@
+/**
+ * Figures over time: a line per series across the width it is given.
+ *
+ * Drawn as SVG by hand rather than through a chart library. What a card asks of it is a shape -- rising,
+ * falling, a spike last Tuesday -- and its latest figure, not axes to read values off; a library would
+ * bring a second rendering model and a dependency to every Site for that. No hooks and no Ant Design, so
+ * a server render draws it as well as a client one.
+ *
+ * The drawing is stretched to its box (`preserveAspectRatio="none"`) with strokes that do not stretch
+ * with it, so the chart takes its container's width at any size. The last point of each series is the
+ * emphasized one, drawn over the SVG rather than in it: a circle in a stretched drawing would be an ellipse.
+ *
+ * Every colour is the Theme's variable (`PHI_COLOR`), never a resolved value, so a Surface `tone` reaches
+ * the lines. The first series is the Theme's primary, with an area under it; the second and third are the
+ * text colours, the third dashed, so two lines differ in more than hue.
+ *
+ * The scale starts at zero for figures that are never negative, which counts are: a line that starts at
+ * its own minimum turns a day with one more visitor into a cliff.
+ */
+export type PhiSeriesChartControlSeries = {
+    label: string;
+    /** One value per key, in the keys' order. */
+    values: readonly number[];
+};
+export type PhiSeriesChartControlProps = {
+    /** What each point is called, already in words -- its day -- oldest first. */
+    keys: readonly string[];
+    series: readonly PhiSeriesChartControlSeries[];
+    /** A word for what is counted, already translated; said after each latest figure. */
+    unit?: string;
+    /** The page's locale, for the figures in the spoken label. */
+    locale: string;
+    /** What the chart is of, said before its latest figures. */
+    title?: string;
+    /** The drawing's height in pixels; its width is the container's. */
+    height?: number;
+};
+/** Where each series' points stand in the drawing's own coordinates. */
+export declare function computePhiSeriesChartGeometry(series: readonly PhiSeriesChartControlSeries[], pointCount: number): {
+    baseline: number;
+    top: number;
+    series: {
+        x: number;
+        y: number;
+        value: number;
+    }[][];
+};
+export declare function PhiSeriesChartControl({ keys, series, unit, locale, title, height, }: PhiSeriesChartControlProps): import("react").JSX.Element;

package/components/controls/phi-series-chart-control.js

@@ -0,0 +1,82 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PHI_COLOR, PHI_FONT_SIZE, PHI_SPACE } from "../../theme/antd-css-var-contract";
+const VIEW_WIDTH = 100;
+const VIEW_HEIGHT = 100;
+/* Room above the highest point and below the baseline, so the emphasized dot is not clipped. */
+const VIEW_INSET = 8;
+const SERIES_STROKES = [
+    { color: PHI_COLOR.primary },
+    { color: PHI_COLOR.textSecondary },
+    { color: PHI_COLOR.textTertiary, dash: "4 3" },
+];
+function strokeOf(index) {
+    return SERIES_STROKES[index % SERIES_STROKES.length];
+}
+function finite(values) {
+    return values.filter((value) => Number.isFinite(value));
+}
+/** Where each series' points stand in the drawing's own coordinates. */
+export function computePhiSeriesChartGeometry(series, pointCount) {
+    const all = series.flatMap((entry) => finite(entry.values.slice(0, pointCount)));
+    const low = Math.min(0, ...all);
+    const high = Math.max(0, ...all);
+    const range = high - low || 1;
+    const xOf = (index) => (pointCount <= 1 ? VIEW_WIDTH / 2 : (index / (pointCount - 1)) * VIEW_WIDTH);
+    const yOf = (value) => VIEW_INSET + (1 - (value - low) / range) * (VIEW_HEIGHT - 2 * VIEW_INSET);
+    return {
+        baseline: yOf(Math.max(low, 0)),
+        top: yOf(high),
+        series: series.map((entry) => entry.values.slice(0, pointCount).flatMap((value, index) => Number.isFinite(value) ? [{ x: xOf(index), y: yOf(value), value }] : [])),
+    };
+}
+function round(value) {
+    return Math.round(value * 100) / 100;
+}
+function linePath(points) {
+    return points.map((point, index) => `${index === 0 ? "M" : "L"}${round(point.x)} ${round(point.y)}`).join(" ");
+}
+export function PhiSeriesChartControl({ keys, series, unit, locale, title, height = 64, }) {
+    const pointCount = keys.length;
+    const geometry = computePhiSeriesChartGeometry(series, pointCount);
+    const numbers = new Intl.NumberFormat(locale);
+    const lastKey = keys[pointCount - 1];
+    const latest = series.flatMap((entry) => {
+        const value = entry.values[pointCount - 1];
+        return value !== undefined && Number.isFinite(value)
+            ? [`${entry.label} ${numbers.format(value)}${unit ? ` ${unit}` : ""}`]
+            : [];
+    });
+    /* What a reader who cannot see the lines is told: what it is, the latest day, each series' figure on it. */
+    const spoken = [title, lastKey && latest.length > 0 ? `${lastKey}: ${latest.join(", ")}` : null]
+        .filter(Boolean)
+        .join(" -- ");
+    const first = geometry.series[0] ?? [];
+    const area = first.length > 1
+        ? `${linePath(first)} L${round(first[first.length - 1].x)} ${round(geometry.baseline)} L${round(first[0].x)} ${round(geometry.baseline)} Z`
+        : null;
+    return (_jsxs("figure", { style: { margin: 0, display: "grid", gap: PHI_SPACE.xxs, minWidth: 0 }, "data-phi-series-chart": "", children: [_jsxs("div", { style: { position: "relative", height, minWidth: 0 }, children: [_jsxs("svg", { role: "img", "aria-label": spoken || undefined, viewBox: `0 0 ${VIEW_WIDTH} ${VIEW_HEIGHT}`, preserveAspectRatio: "none", width: "100%", height: height, style: { display: "block", overflow: "visible" }, children: [spoken ? _jsx("title", { children: spoken }) : null, _jsx("line", { x1: 0, x2: VIEW_WIDTH, y1: round(geometry.top), y2: round(geometry.top), vectorEffect: "non-scaling-stroke", strokeWidth: 1, strokeDasharray: "2 3", style: { stroke: PHI_COLOR.split } }), _jsx("line", { x1: 0, x2: VIEW_WIDTH, y1: round(geometry.baseline), y2: round(geometry.baseline), vectorEffect: "non-scaling-stroke", strokeWidth: 1, style: { stroke: PHI_COLOR.border } }), area ? (_jsx("path", { d: area, style: { fill: `color-mix(in srgb, ${PHI_COLOR.primary} 14%, transparent)`, stroke: "none" } })) : null, geometry.series.map((points, index) => points.length > 1 ? (_jsx("path", { d: linePath(points), fill: "none", vectorEffect: "non-scaling-stroke", strokeWidth: index === 0 ? 2 : 1.5, strokeLinejoin: "round", strokeLinecap: "round", ...(strokeOf(index).dash ? { strokeDasharray: strokeOf(index).dash } : {}), style: { stroke: strokeOf(index).color } }, index)) : null)] }), geometry.series.map((points, index) => {
+                        /* The latest day's point, where the series has a figure for that day. */
+                        const last = points[points.length - 1];
+                        return last && Number.isFinite(series[index].values[pointCount - 1]) ? (_jsx("span", { "aria-hidden": "true", "data-phi-series-chart-last": "", style: {
+                                position: "absolute",
+                                left: `${round((last.x / VIEW_WIDTH) * 100)}%`,
+                                top: `${round((last.y / VIEW_HEIGHT) * 100)}%`,
+                                width: 8,
+                                height: 8,
+                                borderRadius: "50%",
+                                transform: "translate(-50%, -50%)",
+                                background: strokeOf(index).color,
+                                boxShadow: `0 0 0 2px ${PHI_COLOR.bgContainer}`,
+                            } }, index)) : null;
+                    })] }), series.length > 1 || pointCount > 1 ? (_jsxs("figcaption", { "aria-hidden": "true", style: {
+                    display: "grid",
+                    gap: PHI_SPACE.xxs,
+                    fontSize: PHI_FONT_SIZE.sm,
+                    color: PHI_COLOR.textTertiary,
+                    minWidth: 0,
+                }, children: [pointCount > 1 ? (_jsxs("span", { style: { display: "flex", justifyContent: "space-between", columnGap: PHI_SPACE.sm, minWidth: 0 }, children: [_jsx("span", { children: keys[0] }), _jsx("span", { children: lastKey })] })) : null, series.length > 1 ? (_jsx("span", { style: { display: "flex", flexWrap: "wrap", columnGap: PHI_SPACE.sm, minWidth: 0 }, children: series.map((entry, index) => (_jsxs("span", { style: { display: "inline-flex", alignItems: "center", gap: PHI_SPACE.xxs }, children: [_jsx("span", { style: {
+                                        display: "inline-block",
+                                        width: 10,
+                                        borderTop: `2px ${strokeOf(index).dash ? "dashed" : "solid"} ${strokeOf(index).color}`,
+                                    } }), entry.label] }, index))) })) : null] })) : null] }));
+}

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

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Input } from "antd";
+import { Input, theme } from "antd";
 import { PhiLabeledControl, usePhiControlLabel } from "./phi-labeled-control";
 import { PhiIcon } from "../shell/phi-icon";
 function resolveTextInputKind(inputType) {
@@ -22,12 +22,63 @@ function resolveTextInputKind(inputType) {
             return { type: "text", inputMode: "text" };
     }
 }
+/*
+ * The first line of a text area, where its clear button belongs.
+ *
+ * Ant Design hangs the button absolutely from the box's top at `paddingXS`, which is the middle of the
+ * first line only for a text area at its own padding. A field restyled to stand in its text -- no
+ * padding, the text's own type, as the inline editors are -- had the cross half a line below its line.
+ * Where the field states its own top padding, the button is given one line of the field from there,
+ * with the cross in its middle: `1lh` in the field's type. A field at Ant Design's padding keeps
+ * Ant Design's place.
+ */
+function readBlockStartPadding(style) {
+    const value = style?.paddingBlockStart ?? style?.paddingTop ?? style?.paddingBlock ?? style?.padding;
+    if (value == null)
+        return null;
+    if (typeof value === "number")
+        return `${value}px`;
+    // The first value of a shorthand, read past the spaces inside a `calc()`.
+    const text = String(value).trim();
+    let depth = 0;
+    for (let index = 0; index < text.length; index += 1) {
+        const character = text[index];
+        if (character === "(")
+            depth += 1;
+        else if (character === ")")
+            depth -= 1;
+        else if (depth === 0 && /\s/u.test(character ?? ""))
+            return text.slice(0, index);
+    }
+    return text || null;
+}
+function resolveTextAreaClearStyle(style, inputStyle) {
+    const fieldPadding = readBlockStartPadding(inputStyle);
+    if (fieldPadding == null)
+        return null;
+    const boxPadding = readBlockStartPadding(style) ?? "0px";
+    const type = inputStyle?.font != null
+        ? { font: inputStyle.font }
+        : {
+            fontSize: inputStyle?.fontSize ?? "inherit",
+            lineHeight: inputStyle?.lineHeight ?? "inherit",
+            fontFamily: inputStyle?.fontFamily ?? "inherit",
+        };
+    return {
+        ...type,
+        insetBlockStart: `calc(${boxPadding} + ${fieldPadding})`,
+        height: "1lh",
+        display: "flex",
+        alignItems: "center",
+    };
+}
 export function PhiTextControl({ id, value, label, description, inputType = "text", presentation = "input", disabled = false, readOnly = false, allowClear = true, clearLabel, placeholder, ariaLabel, prefix, autoFocus, autoComplete, minLength, maxLength, rows, cols, autoSize, tabIndex, size, variant, inputRef, textareaRef, onChange, onPressEnter, onKeyDown, onFocus, onBlur, onClear, style, inputStyle, }) {
     const { labelId, labelledBy } = usePhiControlLabel(label, ariaLabel);
     const resolvedKind = resolveTextInputKind(inputType);
+    const { token } = theme.useToken();
     const stableAllowClear = {
         disabled: !allowClear,
-        clearIcon: (_jsx(PhiIcon, { name: "close", size: "inherit", ariaLabel: clearLabel })),
+        clearIcon: (_jsx(PhiIcon, { name: "close", size: token.fontSizeIcon, ariaLabel: clearLabel })),
     };
     const commonProps = {
         ref: inputRef,
@@ -56,7 +107,10 @@ export function PhiTextControl({ id, value, label, description, inputType = "tex
     }
     let control;
     if (presentation === "textarea") {
-        control = (_jsx(Input.TextArea, { ...commonProps, styles: inputStyle ? { textarea: inputStyle } : undefined, ref: textareaRef, allowClear: stableAllowClear, onClear: onClear, autoSize: autoSize, rows: rows, cols: cols, onPressEnter: onPressEnter }));
+        control = (_jsx(Input.TextArea, { ...commonProps, styles: {
+                ...(inputStyle ? { textarea: inputStyle } : {}),
+                ...(allowClear ? { clear: resolveTextAreaClearStyle(style, inputStyle) ?? undefined } : {}),
+            }, ref: textareaRef, allowClear: stableAllowClear, onClear: onClear, autoSize: autoSize, rows: rows, cols: cols, onPressEnter: onPressEnter }));
     }
     else if (presentation === "password") {
         control = (_jsx(Input.Password, { ...commonProps, styles: inputStyle ? { input: inputStyle } : undefined, allowClear: stableAllowClear, onClear: onClear, prefix: prefix, onPressEnter: onPressEnter }));

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

@@ -102,7 +102,7 @@ function PhiTreeNodeTitle({ node, presentation, editing, actions, controlSize, o
                 beforeNodeIdentity: dropMode === "before" ? node.identity : null,
                 afterNodeIdentity: dropMode === "after" ? node.identity : null,
             });
-        }, children: [iconEditable ? (_jsx(PhiIconPickerControl, { value: typeof icon === "string" ? icon : null, buttonSize: controlSize, buttonType: "text", onChange: (value) => void onCommitField?.(node.identity, iconFieldKey, value) })) : presentation.showIcon !== false && typeof icon === "string" ? _jsx(PhiIcon, { name: icon }) : null, _jsxs("div", { style: { display: "grid", flex: 1, minWidth: 0 }, children: [titleEditable ? (_jsx(PhiTextControl, { value: draftTitle, size: controlSize, variant: presentation.node.titleEditor?.variant ?? "underlined", onChange: (value) => setDraftTitle(value ?? ""), onPressEnter: commitTitle, onBlur: commitTitle })) : _jsx("span", { children: title }), description != null && description !== "" ? (_jsx(Typography.Text, { type: "secondary", ellipsis: true, children: String(description) })) : null] }), actions.length ? (_jsx(Flex, { align: "center", gap: 2, onClick: (event) => event.stopPropagation(), children: actions.map((action) => (_jsx(PhiTreeActionButton, { action: action.execution === "link" && action.hrefPath
+        }, children: [iconEditable ? (_jsx(PhiIconPickerControl, { value: typeof icon === "string" ? icon : null, buttonSize: controlSize, buttonType: "text", onChange: (value) => void onCommitField?.(node.identity, iconFieldKey, value) })) : presentation.showIcon !== false && typeof icon === "string" ? _jsx(PhiIcon, { name: icon }) : null, _jsxs("div", { style: { display: "grid", flex: 1, minWidth: 0 }, children: [titleEditable ? (_jsx(PhiTextControl, { value: draftTitle, size: controlSize, variant: presentation.node.titleEditor?.variant ?? "underlined", onChange: (value) => setDraftTitle(value ?? ""), onPressEnter: commitTitle, onBlur: commitTitle })) : _jsx("span", { children: title }), description != null && description !== "" ? (_jsx(Typography.Text, { type: "secondary", ellipsis: true, style: { fontSize: "inherit" }, children: String(description) })) : null] }), actions.length ? (_jsx(Flex, { align: "center", gap: 2, onClick: (event) => event.stopPropagation(), children: actions.map((action) => (_jsx(PhiTreeActionButton, { action: action.execution === "link" && action.hrefPath
                         ? { ...action, href: String(readPath(node.record, action.hrefPath) ?? "") }
                         : action, size: controlSize, onActivate: () => onAction?.(action, node.identity) }, action.key))) })) : null] }));
 }