@phis/ui 0.4.2 → 0.4.4

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-table-control.d.ts

@@ -44,7 +44,10 @@ export type PhiTableControlColumn<TRow extends Record<string, unknown>> = {
 export type PhiTableControlPagination = {
     page: number;
     pageSize: number;
+    /** The rows the whole query has. Absent, the Table pages without a count: back, this page, next. */
     total?: number;
+    /** Without a count: whether a page follows this one. */
+    hasMore?: boolean;
     pageSizeOptions?: readonly number[];
     showSizeChanger?: boolean;
     onChange: (page: number, pageSize: number) => void;

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

@@ -1022,7 +1022,19 @@ export function PhiTableControl({ rows, rowIdentityPath, columns, columnOrder, s
             ...{ [PHI_VISUAL_ANCHOR_PART_ATTRIBUTE]: "pagination" },
             current: pagination.page,
             pageSize: pagination.pageSize,
-            total: pagination.total,
+            ...(pagination.total === undefined
+                ? {
+                    /*
+                     * No count: a total that reaches exactly one row past this page when another follows, and
+                     * only the current page's number drawn -- page numbers beyond it would be a guess.
+                     */
+                    total: pagination.page * pagination.pageSize + (pagination.hasMore ? 1 : 0),
+                    showLessItems: true,
+                    itemRender: (page, type, element) => type === "page" ? (page === pagination.page ? element : null)
+                        : type === "jump-prev" || type === "jump-next" ? null
+                            : element,
+                }
+                : { total: pagination.total }),
             pageSizeOptions: pagination.pageSizeOptions?.map(String),
             showSizeChanger: pagination.showSizeChanger,
             onChange: pagination.onChange,

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] }));
 }
@@ -154,8 +154,8 @@ export function PhiTreeControl({ nodes, nodeIdentityPath, parentNodeIdentityPath
             padding: token.paddingSM,
             background: token.colorBgContainer,
             border: `1px solid ${token.colorBorderSecondary}`,
-            // The frame is the surface; its corner is the Site's step, with the old token as the fallback
-            // for a Tree rendered outside the Provider.
-            borderRadius: "var(--phi-surface-radius, var(--ant-border-radius-lg))",
+            // The frame is the surface; its corner is the Site's step, declared by the Provider every Tree
+            // renders under (THEME.md, "Control shape").
+            borderRadius: "var(--phi-surface-radius)",
         }, children: tree })) : tree;
 }

package/components/controls/phi-truncated-hover-text.d.ts

@@ -0,0 +1,15 @@
+import { type ReactElement, type ReactNode, type Ref } from "react";
+/**
+ * A hover text that says what an ellipsis cut off, and only then.
+ *
+ * Around one element that cuts its own text short (`text-overflow: ellipsis`): pointed at, the element is
+ * measured, and the whole text shows in the house tooltip when it did not fit. An element whose text fits
+ * shows nothing -- a tooltip repeating the words that stand right there is noise. The child is the element
+ * itself, not a component, so the measuring reaches the box that cuts.
+ */
+export declare function PhiTruncatedHoverText({ title, children, }: {
+    title: ReactNode;
+    children: ReactElement<{
+        ref?: Ref<HTMLElement>;
+    }>;
+}): import("react").JSX.Element;

package/components/controls/phi-truncated-hover-text.js

@@ -0,0 +1,25 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cloneElement, lazy, Suspense, useState } from "react";
+/* The same Tooltip `PhiHoverText` loads, and loaded the same way: only where one is drawn. */
+const PhiLazyTooltip = lazy(() => import("antd/es/tooltip"));
+/** Whether an element shows less than its text: cut off at its end by an ellipsis, or by its height. */
+function isPhiElementTruncated(element) {
+    return element != null
+        && (element.scrollWidth > element.clientWidth + 1 || element.scrollHeight > element.clientHeight + 1);
+}
+/**
+ * A hover text that says what an ellipsis cut off, and only then.
+ *
+ * Around one element that cuts its own text short (`text-overflow: ellipsis`): pointed at, the element is
+ * measured, and the whole text shows in the house tooltip when it did not fit. An element whose text fits
+ * shows nothing -- a tooltip repeating the words that stand right there is noise. The child is the element
+ * itself, not a component, so the measuring reaches the box that cuts.
+ */
+export function PhiTruncatedHoverText({ title, children, }) {
+    // A callback ref held as state: the element is read when it is pointed at, never while rendering.
+    const [element, setElement] = useState(null);
+    const [open, setOpen] = useState(false);
+    const target = cloneElement(children, { ref: setElement });
+    return (_jsx(Suspense, { fallback: children, children: _jsx(PhiLazyTooltip, { title: title, open: open, onOpenChange: (next) => setOpen(next && isPhiElementTruncated(element)), children: target }) }));
+}

package/components/forms/link-target-form-control.d.ts

@@ -1,4 +1,4 @@
-import { type ComponentType } from "react";
+import type { ComponentType } from "react";
 import type { PhiFormFieldProviderProps } from "./form-provider-registry";
 /**
  * The `link-target` field: one link, to a Page of an Area or to an address elsewhere (`FORMS.md`).

package/components/forms/link-target-form-control.js

@@ -1,8 +1,8 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useState } from "react";
 import { isPhiCmsAreaKey } from "../../constants/cms-areas";
 import { PhiLinkTargetControl } from "../widgets/client/shared/phi-link-target-control";
+import { usePhiPageReferenceOptions } from "../widgets/client/shared/use-page-reference-options";
 import { PHI_FORM_LINK_TARGET_LABEL_KEYS } from "./form-provider-contract";
 const DEFAULT_LABELS = {
     none: "None",
@@ -13,32 +13,6 @@ const DEFAULT_LABELS = {
     newTab: "Open in a new tab",
     pagesUnavailable: "The Pages could not be loaded.",
 };
-/*
- * One request per Area for as long as the page lives: the create and the edit dialog offer the same
- * Pages, and a list that changed meanwhile is a Page somebody published while this one was being written.
- * A failed request is forgotten, so the next dialog asks again.
- */
-const pageOptionsByArea = new Map();
-function loadPageOptions(area) {
-    const cached = pageOptionsByArea.get(area);
-    if (cached)
-        return cached;
-    const request = (async () => {
-        const response = await fetch(`/api/site/page-references?area=${encodeURIComponent(area)}`, {
-            cache: "no-store",
-            credentials: "same-origin",
-            headers: { accept: "application/json" },
-        });
-        const payload = (await response.json().catch(() => null));
-        if (!response.ok || !Array.isArray(payload?.options)) {
-            throw new Error(`Page references for "${area}" answered ${response.status}.`);
-        }
-        return payload.options;
-    })();
-    pageOptionsByArea.set(area, request);
-    request.catch(() => pageOptionsByArea.delete(area));
-    return request;
-}
 /**
  * The `link-target` field: one link, to a Page of an Area or to an address elsewhere (`FORMS.md`).
  *
@@ -48,24 +22,7 @@ function loadPageOptions(area) {
  */
 export const PhiLinkTargetFormControl = ({ field, value, labels, disabled, readOnly, onChange, }) => {
     const area = isPhiCmsAreaKey(field.config?.area) ? field.config.area : "public";
-    const [options, setOptions] = useState([]);
-    const [failed, setFailed] = useState(false);
-    useEffect(() => {
-        let current = true;
-        loadPageOptions(area).then((next) => {
-            if (current) {
-                setOptions(next);
-                setFailed(false);
-            }
-        }, (error) => {
-            console.warn("[phi-form] Page references could not be loaded.", { area, error });
-            if (current)
-                setFailed(true);
-        });
-        return () => {
-            current = false;
-        };
-    }, [area]);
+    const { options, failed } = usePhiPageReferenceOptions(area, "phi-form");
     const read = (key, fallback) => labels?.[key]?.trim() || fallback;
     const controlLabels = {
         none: read(PHI_FORM_LINK_TARGET_LABEL_KEYS.none, DEFAULT_LABELS.none),

package/components/forms/phi-form-widget-frame.js

@@ -1,7 +1,7 @@
 "use client";
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createContext, Fragment, useContext, useEffect, useMemo, useRef, useState, } from "react";
-import { PHI_COLOR, PHI_SPACE } from "../../theme/antd-css-var-contract";
+import { PHI_FONT_SIZE, PHI_COLOR, PHI_SPACE } from "../../theme/antd-css-var-contract";
 import { PHI_THEME_BORDER_WIDTH } from "../../helpers/border-widget-style";
 import { normalizePhiCssSize, PHI_LAYOUT_SURFACE_RADIUS, PHI_SLOT_INLINE_PLACEMENT_MARGIN_STYLE, } from "../layouts/phi-layout-contract";
 import { PhiButtonControl } from "../controls/phi-button-control";
@@ -109,7 +109,9 @@ export function PhiFormWidgetFrame({ submit, card, maxFormWidth, links, layout,
      * Widget rather than beside it: a Widget in the next slot stands in the Layout's box, not on the
      * form's grid, and no percentage of the outer width lands on that column once the grid has gaps.
      */
-    const linksRow = links && links.length > 0 ? (_jsx("div", { className: "phi-form-descriptor-actions", children: _jsx("div", { className: "phi-form-cell phi-form-cell--control", style: { display: "flex", flexWrap: "wrap", alignItems: "center", gap: PHI_SPACE.sm }, children: links.map((link, index) => (_jsxs(Fragment, { children: [index > 0 ? _jsx("span", { "aria-hidden": true, style: { color: PHI_COLOR.textTertiary }, children: "|" }) : null, _jsx(PhiLink, { href: link.href, children: link.label })] }, link.key))) }) })) : null;
+    const linksRow = links && links.length > 0 ? (_jsx("div", { className: "phi-form-descriptor-actions", children: _jsx("div", { className: "phi-form-cell phi-form-cell--control", 
+            // The ways out are asides to the form, taken now and then, so they write small (`sm`).
+            style: { display: "flex", flexWrap: "wrap", alignItems: "center", gap: PHI_SPACE.sm, fontSize: PHI_FONT_SIZE.sm }, children: links.map((link, index) => (_jsxs(Fragment, { children: [index > 0 ? _jsx("span", { "aria-hidden": true, style: { color: PHI_COLOR.textTertiary }, children: "|" }) : null, _jsx(PhiLink, { href: link.href, children: link.label })] }, link.key))) }) })) : null;
     /*
      * The ways out come first, then the button.
      *

package/components/forms/shared-form-provider-registry.js

@@ -31,11 +31,8 @@ placeholderRows = 1) {
              * Control line, which on the one-row placeholder is exactly the capsule and on a taller one is the
              * capsule held -- the same answer the field itself will give when it arrives, so the shape does not
              * change under the reader at the moment the chunk lands.
-             *
-             * Here the fallback is the plain surface radius and not the large one: this is an ordinary `div`,
-             * not an Ant Design Control, so nothing has redefined `--ant-border-radius` on it.
              */
-            borderRadius: "var(--phi-control-radius-grown-md, var(--ant-border-radius))",
+            borderRadius: "var(--phi-control-radius-grown-md)",
             background: "var(--ant-color-fill-quaternary)",
         } }));
     return function PhiLazyFormFieldControl(props) {

package/components/layouts/clients/phi-three-column-layout-client.js

@@ -75,6 +75,8 @@ function renderColumn(isAuthoringRender, key, child, width, flex, anchor, slotRo
                     width: "100%",
                 } })) : null] }, key));
 }
+/** How much faster the middle slot grows than each balanced side. */
+const PHI_THREE_COLUMN_MIDDLE_GROW = 2;
 export function PhiThreeColumnLayout({ blockId, slots, balancedSides = true, gap = PHI_THREE_COLUMN_LAYOUT_DEFAULTS.gap, wrap = PHI_THREE_COLUMN_LAYOUT_DEFAULTS.wrap, align, justify, leftWidth, middleWidth, rightWidth, editSlotAnchor = "center", editSlotAction, editRenderInsertControl, renderMode = "live", ...layoutProps }) {
     const isAuthoringRender = isPhiLayoutAuthoringRender({ editSlotAction, renderMode });
     const { style, layoutKind = "threecol", padding, paddingTop, paddingRight, paddingBottom, paddingLeft, surface, labelEnd, size, minSize, maxSize, collapsedSizeHint, } = layoutProps;
@@ -83,7 +85,14 @@ export function PhiThreeColumnLayout({ blockId, slots, balancedSides = true, gap
     const resolvedMiddleWidth = normalizePhiCssSize(middleWidth);
     const resolvedRightWidth = normalizePhiCssSize(rightWidth);
     const leftFlex = resolvedLeftWidth ? `0 0 ${resolvedLeftWidth}` : balancedSides ? "1 1 0" : "0 1 auto";
-    const middleFlex = resolvedMiddleWidth ? `0 0 ${resolvedMiddleWidth}` : "1 1 0";
+    /*
+     * The middle is the main thing and takes the larger share: with balanced sides it grows twice as fast as
+     * each side, so the sides stay equal to each other and the middle stays centred; without, it takes what
+     * the sides' content leaves.
+     */
+    const middleFlex = resolvedMiddleWidth
+        ? `0 0 ${resolvedMiddleWidth}`
+        : `${PHI_THREE_COLUMN_MIDDLE_GROW} 1 0`;
     const rightFlex = resolvedRightWidth ? `0 0 ${resolvedRightWidth}` : balancedSides ? "1 1 0" : "0 1 auto";
     const showInsertButton = resolvedRenderMode === "editor";
     const { style: resolvedLayoutStyle, ground, hasExplicitLayoutBackground, } = resolvePhiBaseLayoutChrome({

package/components/media/asset-collection-runtime.js

@@ -3,9 +3,9 @@ import { useEffect, useMemo } from "react";
 import { PHI_MEDIA_LIBRARY_DATA_PROVIDER_KEYS } from "../../constants/media-library-provider-keys";
 import { usePhiCollectionProvider } from "../widgets/client/shared/phi-collection-provider";
 import { usePhiMediaSpaceSelectionAllowed } from "./media-space-selection";
+import { readPhiMediaAssetTiles, readPhiMediaFolders, readPhiMediaPagination, readPhiMediaSpace, readPhiMediaSpaces, } from "./phi-image-preview-data";
 import { PHI_ASSET_CONTROLLER_STORE_KEY, } from "./asset-controller-signals";
 import { setPhiImagePreviewError, setPhiImagePreviewLoading, setPhiImagePreviewResults, usePhiImagePreviewStore, } from "./phi-image-preview-store";
-import { isPhiRecord } from "../../helpers/is-record";
 export const PHI_ASSET_COLLECTION_DATA_SOURCE = {
     providerKey: PHI_MEDIA_LIBRARY_DATA_PROVIDER_KEYS.collection,
     resourceKey: "assets",
@@ -29,22 +29,12 @@ export function buildPhiAssetCollectionQuery(state) {
     };
 }
 export function applyPhiAssetCollectionData(data, resolvedCollectionRequestKey) {
-    const folders = Array.isArray(data.meta?.folders)
-        ? data.meta.folders.filter(isPhiRecord)
-        : [];
-    const pagination = isPhiRecord(data.meta?.pagination)
-        ? data.meta.pagination
-        : null;
     setPhiImagePreviewResults(PHI_ASSET_CONTROLLER_STORE_KEY, {
-        activeSpace: isPhiRecord(data.meta?.activeSpace)
-            ? data.meta.activeSpace
-            : null,
-        spaces: Array.isArray(data.meta?.spaces)
-            ? data.meta.spaces.filter(isPhiRecord)
-            : [],
-        assets: data.items.filter(isPhiRecord),
-        folders,
-        pagination,
+        activeSpace: readPhiMediaSpace(data.meta?.activeSpace),
+        spaces: readPhiMediaSpaces(data.meta?.spaces),
+        assets: readPhiMediaAssetTiles(data.items),
+        folders: readPhiMediaFolders(data.meta?.folders),
+        pagination: readPhiMediaPagination(data.meta?.pagination),
         resolvedCollectionRequestKey,
     });
 }

package/components/media/media-font-metrics.d.ts

@@ -0,0 +1,3 @@
+import { type PhiFontMetrics } from "@phis/contracts/media";
+import { type PhiConfigReader } from "../widgets/config/strict-config-reader";
+export declare function readPhiFontMetricsFields(reader: PhiConfigReader): PhiFontMetrics;

package/components/media/media-font-metrics.js

@@ -0,0 +1,43 @@
+import { isPhiFontSubsetKey } from "@phis/contracts/media";
+import { requirePhiField, } from "../widgets/config/strict-config-reader";
+/*
+ * A font's metrics, read as the contract states them (`@phis/contracts/media`).
+ *
+ * The server measures them once, at upload, and writes every field. Two readers took them on trust: the
+ * public reference projection checked nothing below `font`, and the font list of the Theme took a stored
+ * `meta.font` for metrics as soon as it had a unit grid -- a record missing its ascent would have set a
+ * fallback face with `NaN` overrides. Both read through this now, so a wrong record is an error naming
+ * the field. `coverage` is the one field allowed to be absent: a font uploaded before cuts existed has
+ * none and is delivered whole.
+ */
+const nullableNumber = (reader, key) => reader.number(key) ?? null;
+const requiredNumber = (reader, key) => requirePhiField(reader, key, "a number", reader.number);
+function readPhiFontCoverage(reader) {
+    const subsets = requirePhiField(reader, "subsets", "a list of subset keys", (key) => reader.value(key, "a list of subset keys", (value) => Array.isArray(value) && value.every(isPhiFontSubsetKey) ? value : undefined));
+    const restRanges = reader.value("restRanges", "a list of [start, end] code point ranges", (value) => Array.isArray(value) && value.every((entry) => Array.isArray(entry) && entry.length === 2 &&
+        Number.isInteger(entry[0]) && Number.isInteger(entry[1]) &&
+        entry[0] >= 0 && entry[0] <= entry[1] && entry[1] <= 0x10ffff)
+        ? value
+        : undefined) ?? [];
+    return { subsets, restRanges };
+}
+export function readPhiFontMetricsFields(reader) {
+    const unitsPerEm = requiredNumber(reader, "unitsPerEm");
+    if (unitsPerEm <= 0)
+        reader.fail("unitsPerEm", "a positive number");
+    const coverage = reader.object("coverage", readPhiFontCoverage);
+    return {
+        format: requirePhiField(reader, "format", "a font container", (key) => reader.oneOf(key, ["sfnt", "woff", "woff2"])),
+        familyName: reader.string("familyName")?.trim() || null,
+        unitsPerEm,
+        ascent: requiredNumber(reader, "ascent"),
+        descent: requiredNumber(reader, "descent"),
+        lineGap: requiredNumber(reader, "lineGap"),
+        capHeight: nullableNumber(reader, "capHeight"),
+        xHeight: nullableNumber(reader, "xHeight"),
+        xWidthAvg: nullableNumber(reader, "xWidthAvg"),
+        xWidthAvgSource: reader.oneOf("xWidthAvgSource", ["glyphs", "os2"]) ?? null,
+        category: reader.oneOf("category", ["serif", "sans-serif", "monospace"]) ?? null,
+        ...(coverage ? { coverage } : {}),
+    };
+}