@phis/ui 0.1.0 → 0.2.0

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

@@ -27,7 +27,7 @@ function groupPhiSelectOptions(resolved) {
     }
     return grouped;
 }
-export function PhiSelectControl({ 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, }) {
+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 resolvedOptions = groupPhiSelectOptions(options.map((option) => ({
         value: option.value,
         // rc-select synthesizes native HTML title attributes from primitive labels.
@@ -53,7 +53,7 @@ export function PhiSelectControl({ value, label, description, ariaLabel, placeho
                 }, onSearch: onSearch, onFocus: onFocus, onBlur: onBlur, onOpenChange: onOpenChange, onChange: (nextValue) => onChange(nextValue), style: style }));
         return _jsx(PhiLabeledControl, { label: label, description: description, fill: style?.width === "100%", children: control });
     }
-    const control = (_jsx(Select, { "aria-label": ariaLabel, value: value ?? undefined, placeholder: placeholder, disabled: controlDisabled, allowClear: allowClear, options: resolvedOptions, optionRender: (resolvedOption) => (_jsx(PhiControlOptionContent, { option: resolvedOption.data.option, presentation: "dropdown" })), labelRender: (selectedOption) => {
+    const control = (_jsx(Select, { id: id, "aria-label": ariaLabel, value: value ?? undefined, placeholder: placeholder, disabled: controlDisabled, allowClear: allowClear, options: resolvedOptions, optionRender: (resolvedOption) => (_jsx(PhiControlOptionContent, { option: resolvedOption.data.option, presentation: "dropdown" })), labelRender: (selectedOption) => {
             const selected = options.find((option) => option.value === selectedOption.value);
             return selected
                 ? _jsx(PhiControlOptionContent, { option: selected, presentation: "selection" })

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

@@ -0,0 +1,52 @@
+import type { CSSProperties, ReactNode } from "react";
+/**
+ * The shape of what is coming, drawn while it is not there yet.
+ *
+ * Usable only where that shape is known and roughly fixed -- a list of rows, a field, a tile. Where it
+ * is not, the placeholder has to guess, and a guess that turns out wrong rearranges the page under
+ * somebody who had already started reading: that case is `PhiSpinControl`, which claims nothing. The
+ * question a caller answers is which of the two they can honestly offer, not which looks better.
+ *
+ * **What this normalizes, and what it deliberately does not.** Every site wrote `paragraph={{ rows: n }}`
+ * -- a nested object, the same way, twelve times -- so that becomes `lines`. What stays per-site is
+ * the number itself. Three lines standing in for a form preview and eight for a security page are not
+ * a value somebody failed to centralize; they are two different pages, and a platform rule that picked
+ * one would be wrong on the other. A Control owns the vocabulary, not the measurements.
+ *
+ * `active` defaults to true because a placeholder normally means *waiting*, and shimmering is how that
+ * reads. The exception is real and kept: a Builder preview draws a still placeholder to mean *this
+ * Widget has nothing to preview*, which is a statement about the Widget rather than about a wait, and
+ * an animation there would promise something that is never going to arrive.
+ */
+type PhiSkeletonSharedProps = {
+    /** Whether it shimmers. True means waiting; false means there is nothing to wait for. */
+    active?: boolean;
+    style?: CSSProperties;
+};
+export type PhiSkeletonControlProps = (PhiSkeletonSharedProps & {
+    presentation?: "lines";
+    /** How many lines of text to stand in for. */
+    lines?: number;
+    /** How wide each line is, where the shape being stood in for is known that precisely. */
+    lineWidths?: readonly (string | number)[];
+    /** A heading above the lines. */
+    withTitle?: boolean;
+}) | (PhiSkeletonSharedProps & {
+    /** One field, one button, or one area of arbitrary content. */
+    presentation: "input" | "button";
+    size?: "small" | "default" | "large";
+    block?: boolean;
+    /**
+     * Stand in for the whole frame around it, on both axes, rather than for one field's worth of it.
+     *
+     * What a caller reaches for where the box is already measured -- a square media tile, a fixed
+     * row -- and cannot say with `style` alone; see `PHI_SKELETON_FILL_BOX`.
+     */
+    fill?: boolean;
+    shape?: "circle" | "square" | "round" | "default";
+}) | (PhiSkeletonSharedProps & {
+    presentation: "node";
+    children?: ReactNode;
+});
+export declare function PhiSkeletonControl(props: PhiSkeletonControlProps): import("react").JSX.Element;
+export {};

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

@@ -0,0 +1,44 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Skeleton } from "antd";
+/**
+ * The box a `fill` placeholder measures, stated on both of Ant Design's two elements.
+ *
+ * A caller's `style` reaches only the INNER element -- Ant Design keeps the outer box for `styles.root`
+ * -- and that outer box has no height of its own. A percentage height on the inner element therefore
+ * resolved against `auto` and computed to `auto` as well, so a placeholder asked to fill a square tile
+ * collapsed to nothing and the tile looked as though it had no image placeholder at all. Stating the box
+ * on the root gives the percentage something to resolve against.
+ *
+ * `minWidth: 0` because Ant Design's own field placeholder carries a minimum width of several Control
+ * heights, which is wider than a column in a dense grid and would push out of the frame it is filling.
+ */
+const PHI_SKELETON_FILL_BOX = { width: "100%", minWidth: 0, height: "100%" };
+export function PhiSkeletonControl(props) {
+    const active = props.active ?? true;
+    /*
+     * A `switch` rather than chained `if`s, and not as a matter of taste.
+     *
+     * `presentation` is optional on the text branch, so narrowing it away by elimination leaves the
+     * compiler holding `undefined` for every member and none of the other props readable. Switching on
+     * the discriminant narrows each case properly and puts the text branch in `default`, where the
+     * optional one belongs.
+     *
+     * `title` is passed as a boolean rather than left to Ant Design's default of `true`: half the sites
+     * turned it off and half did not, so neither answer is the obvious one, and a default that is right
+     * half the time is a default somebody has to go and check.
+     */
+    switch (props.presentation) {
+        case "input":
+            return (_jsx(Skeleton.Input, { active: active, size: props.size, block: props.block, ...(props.fill ? { styles: { root: PHI_SKELETON_FILL_BOX } } : {}), style: props.fill ? { ...PHI_SKELETON_FILL_BOX, ...props.style } : props.style }));
+        case "button":
+            return (_jsx(Skeleton.Button, { active: active, size: props.size, block: props.block, shape: props.shape, ...(props.fill ? { styles: { root: PHI_SKELETON_FILL_BOX } } : {}), style: props.fill ? { ...PHI_SKELETON_FILL_BOX, ...props.style } : props.style }));
+        case "node":
+            return _jsx(Skeleton.Node, { active: active, style: props.style, children: props.children });
+        default:
+            return (_jsx(Skeleton, { active: active, title: props.withTitle ?? false, paragraph: {
+                    rows: props.lines ?? 3,
+                    ...(props.lineWidths ? { width: [...props.lineWidths] } : {}),
+                }, style: props.style }));
+    }
+}

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

@@ -0,0 +1,18 @@
+import type { SpinProps } from "antd";
+/**
+ * Something is happening and there is nothing yet to show.
+ *
+ * A pass-through, and both sites use it with no props at all: a logout in flight and a Media Space
+ * still being read.
+ *
+ * **It stays beside `Skeleton` rather than being folded into it.** They are not two spellings of "wait":
+ * a Skeleton draws the shape of what is coming, so it is only usable where that shape is known and
+ * roughly fixed -- a list of rows, a card, a paragraph. Where it is not, a Skeleton has to guess, and a
+ * guess that turns out wrong is worse than no preview at all, because the page rearranges itself under
+ * somebody who had already started reading it. A spinner claims nothing, and that is the whole of what
+ * recommends it.
+ *
+ * So the question a caller answers is not which one is nicer, it is whether the shape is known.
+ */
+export type PhiSpinControlProps = SpinProps;
+export declare function PhiSpinControl(props: PhiSpinControlProps): import("react").JSX.Element;

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

@@ -0,0 +1,6 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Spin } from "antd";
+export function PhiSpinControl(props) {
+    return _jsx(Spin, { ...props });
+}

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

@@ -0,0 +1,14 @@
+import type { StatisticProps } from "antd";
+/**
+ * A labelled number.
+ *
+ * A pass-through. Its three uses today are neighbouring lines in the Theme inspector, all `title` plus
+ * `value`.
+ *
+ * It has a second caller coming: a Widget of its own, so a Site can put a figure on a page. That is why
+ * the Control is worth having rather than dissolving these three into a heading and a line of text --
+ * the Widget would have had to decide the same things, and deciding them here means it inherits them
+ * instead of inventing them a second time.
+ */
+export type PhiStatisticControlProps = StatisticProps;
+export declare function PhiStatisticControl(props: PhiStatisticControlProps): import("react").JSX.Element;

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

@@ -0,0 +1,6 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Statistic } from "antd";
+export function PhiStatisticControl(props) {
+    return _jsx(Statistic, { ...props });
+}

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

@@ -1,14 +1,18 @@
 import type { ReactNode } from "react";
 import type { PhiControlSize } from "../../types/control";
 export type PhiSwitchControlProps = {
+    /** The DOM id of the input, so a `<label for>` outside the control can name it. */
+    id?: string;
     checked?: boolean;
     label?: ReactNode;
     disabled?: boolean;
     readOnly?: boolean;
     loading?: boolean;
-    checkedChildren?: ReactNode;
-    unCheckedChildren?: ReactNode;
+    /** What the switch reads while on. */
+    checkedLabel?: ReactNode;
+    /** What the switch reads while off. */
+    uncheckedLabel?: ReactNode;
     size?: Exclude<PhiControlSize, "large">;
     onChange?: (checked: boolean) => void;
 };
-export declare function PhiSwitchControl({ checked, label, disabled, readOnly, loading, checkedChildren, unCheckedChildren, size, onChange, }: PhiSwitchControlProps): import("react").JSX.Element;
+export declare function PhiSwitchControl({ id, checked, label, disabled, readOnly, loading, checkedLabel, uncheckedLabel, size, onChange, }: PhiSwitchControlProps): import("react").JSX.Element;

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

@@ -2,6 +2,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Switch } from "antd";
 import { PhiLabeledControl } from "./phi-labeled-control";
-export function PhiSwitchControl({ checked, label, disabled, readOnly, loading, checkedChildren, unCheckedChildren, size, onChange, }) {
-    return (_jsx(PhiLabeledControl, { label: label, children: _jsx(Switch, { checked: checked, disabled: disabled || readOnly || !onChange, loading: loading, checkedChildren: checkedChildren, unCheckedChildren: unCheckedChildren, size: size, onChange: onChange }) }));
+export function PhiSwitchControl({ id, checked, label, disabled, readOnly, loading, checkedLabel, uncheckedLabel, size, onChange, }) {
+    return (_jsx(PhiLabeledControl, { label: label, children: _jsx(Switch, { id: id, checked: checked, disabled: disabled || readOnly || !onChange, loading: loading, checkedChildren: checkedLabel, unCheckedChildren: uncheckedLabel, size: size, onChange: onChange }) }));
 }

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

@@ -1,6 +1,6 @@
 import { type CSSProperties, type DragEvent, type ReactNode } from "react";
 import type { PhiControlSize, PhiControlVariant } from "../../types/control";
-import { type PhiCalendarAdapterKey } from "../../types/calendar";
+import type { PhiCalendarAdapterKey } from "../../types/calendar";
 import type { PhiTableColumnEditorControl, PhiTableProviderFieldType, PhiTableRowIdentity, PhiTableSort, PhiTableColumnSizing, PhiTableLayoutConfig } from "../../types/table-widget";
 import type { PhiControlOption } from "./phi-control-options";
 export type PhiTableControlCellEditor = {
@@ -126,6 +126,12 @@ export type PhiTableControlProps<TRow extends Record<string, unknown>> = {
     emptyText?: ReactNode;
     layout: PhiTableLayoutConfig;
     rowStyle?: (row: TRow) => CSSProperties | undefined;
+    /**
+     * What a click on the row itself means, where the row stands for something openable.
+     *
+     * Absent leaves the row inert, which is what a table of values is. It has nothing to do with the
+     * selection column: that column is the keyboard path and stays whatever this does.
+     */
     onRowActivate?: (row: TRow) => void;
     onExternalRowDragOver?: (event: DragEvent<HTMLTableRowElement>, row: TRow, placement: "before" | "after" | "child") => void;
     onExternalRowDrop?: (event: DragEvent<HTMLTableRowElement>, row: TRow, placement: "before" | "after" | "child") => void;

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

@@ -1,17 +1,18 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { CloseOutlined, DownOutlined, EditOutlined, HolderOutlined, LeftOutlined, RightOutlined, SaveOutlined, UpOutlined } from "@ant-design/icons";
-import { Button, Flex, Skeleton, Table, Tooltip } from "antd";
+import { Button, Flex, Table } from "antd";
 import { DndContext, KeyboardSensor, PointerSensor, closestCenter, useSensor, useSensors, } from "@dnd-kit/core";
 import { SortableContext, sortableKeyboardCoordinates, useSortable, } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 import { flushSync } from "react-dom";
 import { Children, cloneElement, createContext, isValidElement, useCallback, useContext, useEffect, useMemo, useRef, useState, } from "react";
-import { PHI_GREGORY_CALENDAR_ADAPTER_KEY } from "../../types/calendar";
+import { PHI_GREGORY_CALENDAR_ADAPTER_KEY } from "../../types/calendar-keys";
 import { PhiColorControl } from "./phi-color-control";
 import { PhiCheckboxControl } from "./phi-checkbox-control";
 import { PhiCheckboxGroupControl } from "./phi-checkbox-group-control";
 import { PhiDatePickerControl } from "./phi-date-picker-control";
+import { PhiButtonControl } from "./phi-button-control";
 import { PhiMultiSelectControl } from "./phi-multi-select-control";
 import { PhiIconPickerControl } from "./phi-icon-picker-control";
 import { PhiNumberControl } from "./phi-number-control";
@@ -21,8 +22,10 @@ import { PhiSegmentedControl } from "./phi-segmented-control";
 import { PhiSwitchControl } from "./phi-switch-control";
 import { PhiTextControl } from "./phi-text-control";
 import { PhiExpandIndicator } from "./phi-expand-indicator";
-import styles from "./phi-table-control.module.css";
 import { usePhiConfig } from "../root/phi-config-provider";
+import { PhiSkeletonControl } from "./phi-skeleton-control";
+import { readPhiDotPath } from "../../helpers/dot-path";
+import { readPhiTableRowIdentity as readIdentity } from "../../helpers/table-binding";
 const PhiTableSortableRowContext = createContext(null);
 const PhiTableDragVisualStateContext = createContext({ activeIdentity: null, insertionGapIndex: null, insertionGapHeight: 0 });
 const PHI_TABLE_LOADING_ROW = Symbol("phi-table-loading-row");
@@ -82,17 +85,33 @@ function PhiTableRowDragHandle({ dragLabel = "Drag row", disabled, }) {
 function PhiTableRowPositionControls({ moveUpLabel = "Move row up", moveDownLabel = "Move row down", canMoveUp, canMoveDown, onMoveUp, onMoveDown, }) {
     return (_jsxs(Flex, { align: "center", gap: 2, wrap: false, children: [_jsx(Button, { type: "text", size: "small", icon: _jsx(UpOutlined, {}), "aria-label": moveUpLabel, disabled: !canMoveUp, onClick: (event) => { event.stopPropagation(); onMoveUp(); } }), _jsx(Button, { type: "text", size: "small", icon: _jsx(DownOutlined, {}), "aria-label": moveDownLabel, disabled: !canMoveDown, onClick: (event) => { event.stopPropagation(); onMoveDown(); } })] }));
 }
-function isRecord(value) {
-    return Boolean(value) && typeof value === "object" && !Array.isArray(value);
-}
 export function readPhiTableControlValue(row, path) {
-    return path.split(".").filter(Boolean).reduce((current, segment) => isRecord(current) ? current[segment] : undefined, row);
+    return readPhiDotPath(row, path);
 }
-function readIdentity(row, path) {
-    const value = readPhiTableControlValue(row, path);
-    return typeof value === "string" || (typeof value === "number" && Number.isFinite(value))
-        ? value
-        : null;
+/**
+ * What a row carries that is not the row.
+ *
+ * A row holds buttons, links, the selection control and, where a column is editable, a field. A click
+ * on any of them bubbles up, so a row that activated on every click would archive a conversation and
+ * open it in one gesture.
+ */
+const PHI_TABLE_ROW_INTERACTIVE_TARGET = [
+    "a", "button", "input", "select", "textarea", "label",
+    "[role=button]", "[role=link]", "[role=checkbox]", "[role=radio]", "[contenteditable=true]",
+].join(",");
+/**
+ * Whether this click means the row, rather than something in it or nothing at all.
+ *
+ * Dragging a selection across a cell ends in a click as well, and somebody reading a subject line is
+ * not choosing a conversation -- so an uncollapsed selection is not an activation either.
+ */
+function isPhiTableRowActivationClick(event) {
+    const target = event.target;
+    if (target instanceof Element && target.closest(PHI_TABLE_ROW_INTERACTIVE_TARGET)) {
+        return false;
+    }
+    const selection = typeof window === "undefined" ? null : window.getSelection();
+    return selection == null || selection.isCollapsed;
 }
 function buildTreeRows(rows, rowIdentityPath, parentRowIdentityPath) {
     const byIdentity = new Map();
@@ -145,9 +164,29 @@ function moveColumn(columnOrder, key, offset) {
 function normalizeSelectedKeys(keys) {
     return keys.filter((key) => typeof key === "string" || (typeof key === "number" && Number.isFinite(key)));
 }
+/**
+ * The floor under a column that yields.
+ *
+ * `content` columns never shrink -- they carry `width: 1%` and `nowrap`, in the header cell as much as in
+ * the data cell. So in a container narrower than the titles, the whole shortfall lands on the `fill`
+ * columns, and an unfloored one can be squeezed past its own title. The title then wraps, and because a
+ * header row is as tall as the tallest cell in it, the Table's header height ends up being decided by the
+ * one column nobody gave a width. That is drift with no contract behind it: nothing else on the page
+ * agrees to a height either, so two Tables that differ only in their columns look unrelated.
+ *
+ * 120 sits under every `minWidth` anyone has chosen deliberately -- the smallest in the house is 200 --
+ * so it cannot argue with an authored decision. It says one thing: a column that yields is still a
+ * column. Where a column needs room to be read rather than merely seen, that is a `minWidth` of its own.
+ */
+const PHI_TABLE_FILL_COLUMN_MIN_WIDTH = 120;
 function buildColumnStyle(sizing) {
-    if (!sizing || sizing.mode === "fill") {
-        return sizing ? { minWidth: sizing.minWidth, maxWidth: sizing.maxWidth } : undefined;
+    if (!sizing)
+        return undefined;
+    if (sizing.mode === "fill") {
+        return {
+            minWidth: sizing.minWidth ?? PHI_TABLE_FILL_COLUMN_MIN_WIDTH,
+            maxWidth: sizing.maxWidth,
+        };
     }
     if (sizing.mode === "content") {
         return {
@@ -507,13 +546,7 @@ export function PhiTableControl({ rows, rowIdentityPath, columns, columnOrder, s
         const reorderIndex = columnOrder.indexOf(column.key);
         const canReorder = columnReordering && column.fixed === undefined && reorderIndex >= 0;
         const columnStyle = buildColumnStyle(column.sizing);
-        const title = canReorder ? (_jsxs(Flex, { align: "center", gap: 4, children: [_jsx("span", { children: column.title }), _jsx(Tooltip, { title: "Move column left", children: _jsx(Button, { type: "text", size: "small", icon: _jsx(LeftOutlined, {}), disabled: reorderIndex === 0, "aria-label": "Move column left", onClick: (event) => {
-                            event.stopPropagation();
-                            onColumnOrderChange?.(moveColumn(columnOrder, column.key, -1));
-                        } }) }), _jsx(Tooltip, { title: "Move column right", children: _jsx(Button, { type: "text", size: "small", icon: _jsx(RightOutlined, {}), disabled: reorderIndex === columnOrder.length - 1, "aria-label": "Move column right", onClick: (event) => {
-                            event.stopPropagation();
-                            onColumnOrderChange?.(moveColumn(columnOrder, column.key, 1));
-                        } }) })] })) : column.title;
+        const title = canReorder ? (_jsxs(Flex, { align: "center", gap: 4, children: [_jsx("span", { children: column.title }), _jsx("span", { onClick: (event) => event.stopPropagation(), children: _jsx(PhiButtonControl, { type: "text", size: "small", icon: _jsx(LeftOutlined, {}), disabled: reorderIndex === 0, ariaLabel: "Move column left", tooltip: "Move column left", onClick: () => onColumnOrderChange?.(moveColumn(columnOrder, column.key, -1)) }) }), _jsx("span", { onClick: (event) => event.stopPropagation(), children: _jsx(PhiButtonControl, { type: "text", size: "small", icon: _jsx(RightOutlined, {}), disabled: reorderIndex === columnOrder.length - 1, ariaLabel: "Move column right", tooltip: "Move column right", onClick: () => onColumnOrderChange?.(moveColumn(columnOrder, column.key, 1)) }) })] })) : column.title;
         return {
             key: column.key,
             columnKey: sortField,
@@ -610,14 +643,14 @@ export function PhiTableControl({ rows, rowIdentityPath, columns, columnOrder, s
                 const active = identity != null && String(identity) === String(editingRowIdentity);
                 const disabled = editing.isRowDisabled?.(row) ?? false;
                 if (!active) {
-                    return _jsx(Tooltip, { title: editing.editLabel ?? "Edit row", children: _jsx(Button, { type: "text", size: "small", icon: _jsx(EditOutlined, {}), "aria-label": editing.editLabel ?? "Edit row", disabled: disabled || identity == null || editingRowIdentity != null, onClick: () => { setEditingRowIdentity(identity); setRowEditPatch({}); } }) });
+                    return _jsx(PhiButtonControl, { type: "text", size: "small", icon: _jsx(EditOutlined, {}), ariaLabel: editing.editLabel ?? "Edit row", tooltip: editing.editLabel ?? "Edit row", disabled: disabled || identity == null || editingRowIdentity != null, onClick: () => { setEditingRowIdentity(identity); setRowEditPatch({}); } });
                 }
-                return _jsxs(Flex, { align: "center", gap: 2, children: [_jsx(Tooltip, { title: editing.saveLabel ?? "Save row", children: _jsx(Button, { type: "text", size: "small", icon: _jsx(SaveOutlined, {}), "aria-label": editing.saveLabel ?? "Save row", disabled: disabled, onClick: () => {
-                                    const originalValues = Object.fromEntries(editableColumns.map((column) => [column.fieldPath, readPhiTableControlValue(row, column.fieldPath)]));
-                                    editing.onCommit(row, originalValues, rowEditPatch);
-                                    setEditingRowIdentity(null);
-                                    setRowEditPatch({});
-                                } }) }), _jsx(Tooltip, { title: editing.cancelLabel ?? "Cancel row editing", children: _jsx(Button, { type: "text", size: "small", icon: _jsx(CloseOutlined, {}), "aria-label": editing.cancelLabel ?? "Cancel row editing", onClick: () => { setEditingRowIdentity(null); setRowEditPatch({}); } }) })] });
+                return _jsxs(Flex, { align: "center", gap: 2, children: [_jsx(PhiButtonControl, { type: "text", size: "small", icon: _jsx(SaveOutlined, {}), ariaLabel: editing.saveLabel ?? "Save row", tooltip: editing.saveLabel ?? "Save row", disabled: disabled, onClick: () => {
+                                const originalValues = Object.fromEntries(editableColumns.map((column) => [column.fieldPath, readPhiTableControlValue(row, column.fieldPath)]));
+                                editing.onCommit(row, originalValues, rowEditPatch);
+                                setEditingRowIdentity(null);
+                                setRowEditPatch({});
+                            } }), _jsx(PhiButtonControl, { type: "text", size: "small", icon: _jsx(CloseOutlined, {}), ariaLabel: editing.cancelLabel ?? "Cancel row editing", tooltip: editing.cancelLabel ?? "Cancel row editing", onClick: () => { setEditingRowIdentity(null); setRowEditPatch({}); } })] });
             },
         }] : [], [editableColumns, editing, editingRowIdentity, rowEditPatch, rowIdentityPath]);
     const dataSource = useMemo(() => tree
@@ -683,7 +716,7 @@ export function PhiTableControl({ rows, rowIdentityPath, columns, columnOrder, s
                     const width = columnKey == null
                         ? column.width
                         : loadingSkeletonWidths.get(columnKey) ?? column.width;
-                    return _jsx(Skeleton.Input, { active: true, size: "small", style: buildLoadingSkeletonStyle(width, cellPaddingInline) });
+                    return _jsx(PhiSkeletonControl, { presentation: "input", size: "small", style: buildLoadingSkeletonStyle(width, cellPaddingInline) });
                 },
             }))
         : controlColumns, [cellPaddingInline, controlColumns, loading, loadingSkeletonWidths]);
@@ -906,14 +939,30 @@ export function PhiTableControl({ rows, rowIdentityPath, columns, columnOrder, s
             type: rowSelection.mode === "single" ? "radio" : "checkbox",
             fixed: rowReordering?.enabled || orderedColumns.some((column) => column.fixed === "left"),
             preserveSelectedRowKeys: rowSelection.preserveSelectedRowIdentities ?? true,
-            selectedRowKeys: [...rowSelection.selectedRowIdentities],
+            /*
+             * The same shape `rowKey` writes, which is a string whatever the identity was.
+             *
+             * They were two shapes until a row click selected one: the primitive compares keys strictly,
+             * and a numeric identity never matched the string key beside it. It was invisible while the
+             * only way to select was the primitive's own column -- the keys it hands back are its own, so
+             * the round trip matched itself -- and it appeared the moment an identity came from the row.
+             */
+            selectedRowKeys: rowSelection.selectedRowIdentities.map((identity) => String(identity)),
             onChange: (keys) => rowSelection.onChange(normalizeSelectedKeys(keys)),
             getCheckboxProps: (row) => ({ disabled: rowSelection.isRowDisabled?.(row) ?? false }),
         }
         : undefined;
-    const table = (_jsx(Table, { className: [styles.root, footer && !loading ? styles.withFooter : null].filter(Boolean).join(" "), style: { "--phi-table-striped-row-background": token.colorFillAlter }, rowKey: (row) => loading
+    /*
+     * Whether something of the Table's own stands at its bottom edge. A sticky-top summary does not: it
+     * rides above the rows and leaves the last row to end the Table.
+     */
+    const hasClosingBlock = !loading &&
+        (Boolean(footer) || (summary != null && summary.placement !== "sticky-top"));
+    const table = (_jsx(Table, { className: ["phi-table-control", hasClosingBlock ? "phi-table-control--closing-block" : null]
+            .filter(Boolean)
+            .join(" "), style: { "--phi-table-striped-row-background": token.colorFillAlter }, rowKey: (row) => loading
             ? `__phi_table_loading_${String(row[PHI_TABLE_LOADING_ROW])}`
-            : String(readIdentity(row, rowIdentityPath)), columns: renderedColumns, dataSource: loading ? loadingRows : dataSource, bordered: bordered, showHeader: showHeader, tableLayout: layout.mode, size: size, rowClassName: (_row, index) => striped && index % 2 === 1 ? styles.stripedRow : "", rowSelection: loading ? undefined : antdRowSelection, components: rowReordering?.enabled && !loading ? { body: { row: PhiTableSortableRow } } : undefined, scroll: layout.overflowX === "auto" ? { x: true } : undefined, pagination: pagination === false ? false : {
+            : String(readIdentity(row, rowIdentityPath)), columns: renderedColumns, dataSource: loading ? loadingRows : dataSource, bordered: bordered, showHeader: showHeader, tableLayout: layout.mode, size: size, rowClassName: (_row, index) => striped && index % 2 === 1 ? "phi-table-control__row--striped" : "", rowSelection: loading ? undefined : antdRowSelection, components: rowReordering?.enabled && !loading ? { body: { row: PhiTableSortableRow } } : undefined, scroll: layout.overflowX === "auto" ? { x: true } : undefined, pagination: pagination === false ? false : {
             current: pagination.page,
             pageSize: pagination.pageSize,
             total: pagination.total,
@@ -951,8 +1000,16 @@ export function PhiTableControl({ rows, rowIdentityPath, columns, columnOrder, s
                 onExternalRowDrop?.(event, row, placement);
                 setDropTarget(null);
             } : undefined,
-            onClick: onRowActivate ? () => onRowActivate(row) : undefined,
+            onClick: onRowActivate
+                ? (event) => {
+                    if (isPhiTableRowActivationClick(event)) {
+                        onRowActivate(row);
+                    }
+                }
+                : undefined,
             style: {
+                // A row that does something says so; without it the only sign is that it worked.
+                ...(onRowActivate ? { cursor: "pointer" } : {}),
                 ...rowStyle?.(row),
                 ...(dropTarget && String(dropTarget.identity) === String(readIdentity(row, rowIdentityPath)) ? {
                     boxShadow: dropTarget.placement === "before"

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

@@ -3,6 +3,24 @@ export type PhiTagControlProps = {
     children: ReactNode;
     color?: string;
     variant?: "filled" | "outlined" | "solid";
+    /**
+     * Offers the remove affordance Ant Design draws inside the capsule.
+     *
+     * `closable` rather than Ant Design's `closeIcon`, because what a caller decides here is whether the
+     * tag can be removed at all and not which glyph says so. A caller that wants its own glyph has not
+     * appeared; when one does, this is the prop that grows an overload rather than the callers that reach
+     * past the Control.
+     */
+    closable?: boolean;
+    /**
+     * What removal means, which is never "hide the tag".
+     *
+     * Ant Design hides a closed tag by itself unless the event is prevented, which is the wrong answer
+     * wherever the list of tags is drawn from a value: the value would still hold the entry and the next
+     * render would bring the tag back. So the default is prevented here and the tag disappears because
+     * the caller removed the thing, not because the tag was clicked.
+     */
+    onClose?: () => void;
     style?: CSSProperties;
 };
-export declare function PhiTagControl({ children, color, variant, style, }: PhiTagControlProps): import("react").JSX.Element;
+export declare function PhiTagControl({ children, color, variant, closable, onClose, style, }: PhiTagControlProps): import("react").JSX.Element;

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

@@ -1,6 +1,9 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Tag } from "antd";
-export function PhiTagControl({ children, color, variant = "outlined", style, }) {
-    return (_jsx(Tag, { color: color, variant: variant, style: { marginInlineEnd: 0, ...style }, children: children }));
+export function PhiTagControl({ children, color, variant = "outlined", closable, onClose, style, }) {
+    return (_jsx(Tag, { color: color, variant: variant, closeIcon: closable || undefined, onClose: onClose ? (event) => {
+            event.preventDefault();
+            onClose();
+        } : undefined, style: { marginInlineEnd: 0, ...style }, children: children }));
 }

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

@@ -5,6 +5,8 @@ import type { PhiControlSize, PhiControlVariant } from "../../types/control";
 import type { PhiTextInputType } from "./phi-text-types";
 export type PhiTextControlPresentation = "input" | "password" | "textarea" | "hidden";
 export type PhiTextControlProps = {
+    /** The DOM id of the input, so a `<label for>` outside the control can name it. */
+    id?: string;
     value?: string | null;
     label?: ReactNode;
     description?: ReactNode;
@@ -22,6 +24,8 @@ export type PhiTextControlProps = {
     minLength?: number;
     maxLength?: number;
     rows?: number;
+    /** How many characters wide a text area is where nothing else states a width. */
+    cols?: number;
     autoSize?: boolean | {
         minRows?: number;
         maxRows?: number;
@@ -47,4 +51,4 @@ export type PhiTextControlProps = {
      */
     inputStyle?: CSSProperties;
 };
-export declare function PhiTextControl({ value, label, description, inputType, presentation, disabled, readOnly, allowClear, clearLabel, placeholder, ariaLabel, prefix, autoFocus, autoComplete, minLength, maxLength, rows, autoSize, tabIndex, size, variant, inputRef, textareaRef, onChange, onPressEnter, onKeyDown, onFocus, onBlur, onClear, style, inputStyle, }: PhiTextControlProps): import("react").JSX.Element;
+export declare function PhiTextControl({ id, value, label, description, inputType, presentation, disabled, readOnly, allowClear, clearLabel, placeholder, ariaLabel, prefix, autoFocus, autoComplete, minLength, maxLength, rows, cols, autoSize, tabIndex, size, variant, inputRef, textareaRef, onChange, onPressEnter, onKeyDown, onFocus, onBlur, onClear, style, inputStyle, }: PhiTextControlProps): import("react").JSX.Element;

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

@@ -22,7 +22,7 @@ function resolveTextInputKind(inputType) {
             return { type: "text", inputMode: "text" };
     }
 }
-export function PhiTextControl({ value, label, description, inputType = "text", presentation = "input", disabled = false, readOnly = false, allowClear = true, clearLabel, placeholder, ariaLabel, prefix, autoFocus, autoComplete, minLength, maxLength, rows, autoSize, tabIndex, size, variant, inputRef, textareaRef, onChange, onPressEnter, onKeyDown, onFocus, onBlur, onClear, style, inputStyle, }) {
+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 resolvedKind = resolveTextInputKind(inputType);
     const stableAllowClear = {
         disabled: !allowClear,
@@ -30,6 +30,7 @@ export function PhiTextControl({ value, label, description, inputType = "text",
     };
     const commonProps = {
         ref: inputRef,
+        id,
         "aria-label": ariaLabel,
         autoFocus,
         autoComplete,
@@ -53,10 +54,10 @@ export function PhiTextControl({ value, label, description, inputType = "text",
     }
     let control;
     if (presentation === "textarea") {
-        control = (_jsx(Input.TextArea, { ...commonProps, styles: inputStyle ? { textarea: inputStyle } : undefined, ref: textareaRef, allowClear: stableAllowClear, autoSize: autoSize, rows: rows, onPressEnter: onPressEnter }));
+        control = (_jsx(Input.TextArea, { ...commonProps, styles: inputStyle ? { textarea: 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, prefix: prefix, onPressEnter: onPressEnter }));
+        control = (_jsx(Input.Password, { ...commonProps, styles: inputStyle ? { input: inputStyle } : undefined, allowClear: stableAllowClear, onClear: onClear, prefix: prefix, onPressEnter: onPressEnter }));
     }
     else {
         control = (_jsx(Input, { ...commonProps, styles: inputStyle ? { input: inputStyle } : undefined, allowClear: stableAllowClear, inputMode: resolvedKind.inputMode, prefix: prefix, suffix: resolvedKind.type === "search" ? _jsx(SearchOutlined, {}) : undefined, type: resolvedKind.type, onClear: onClear, onPressEnter: onPressEnter }));

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

@@ -1,14 +1,23 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Flex, Space } from "antd";
+import { Flex } from "antd";
 import { PHI_SPACE } from "../../theme/antd-css-var-contract";
 import { PhiButtonControl } from "./phi-button-control";
+import { PhiCompactGroupControl } from "./phi-compact-group-control";
 export function PhiToolbarControl({ items = [], children, compact = true, wrap = false, showLabels = false, disabled, size, style, onActivate, }) {
     const controls = items
         .filter((item) => item.visible !== false)
         .map((item) => (_jsx(PhiButtonControl, { ariaLabel: item.ariaLabel, label: (item.showLabel ?? (showLabels || !item.icon)) ? item.label : null, tooltip: item.tooltip, icon: item.icon, type: item.type, danger: item.danger, disabled: disabled || item.disabled, loading: item.loading, size: size, badge: item.badge, onClick: onActivate ? () => onActivate(item.key) : undefined }, item.key)));
-    if (compact && !wrap) {
-        return _jsxs(Space.Compact, { style: style, children: [controls, children] });
+    /*
+     * Compact decides, and `wrap` is the spaced row's question alone.
+     *
+     * A compact group cannot wrap: its members share one border, and a row that may break cannot draw
+     * one. Asking for both used to drop the group silently and hand back a wrapping row -- the wrong one
+     * of the two to lose, and a caller had no way to tell it had been overruled. Switching compact on
+     * now switches wrapping off, which is what the two together can only have meant.
+     */
+    if (compact) {
+        return _jsxs(PhiCompactGroupControl, { style: style, children: [controls, children] });
     }
     return (_jsxs(Flex, { align: "center", justify: "center", gap: PHI_SPACE.xs, wrap: wrap ? "wrap" : false, style: style, children: [controls, children] }));
 }

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

@@ -1,19 +1,20 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { HolderOutlined } from "@ant-design/icons";
-import { Button, Flex, Skeleton, Tree, Typography, theme as antdTheme } from "antd";
+import { Button, Flex, Tree, Typography, theme as antdTheme } from "antd";
 import { useMemo, useState } from "react";
+import { readPhiTreeNodePath } from "../../types/tree-widget";
 import { PhiIcon } from "../shell/phi-icon";
 import { PhiIconPickerControl } from "./phi-icon-picker-control";
 import { PhiTextControl } from "./phi-text-control";
 import { PhiConfirmControl } from "./phi-confirm-control";
 import { PhiExpandIndicator } from "./phi-expand-indicator";
 import { PhiLink } from "../navigation/phi-link";
-import styles from "./phi-tree-control.module.css";
+import { PhiSkeletonControl } from "./phi-skeleton-control";
 function readPath(value, path) {
     if (!path)
         return undefined;
-    return path.split(".").reduce((current, key) => current && typeof current === "object" ? current[key] : undefined, value);
+    return readPhiTreeNodePath(value, path);
 }
 function readIdentity(value) {
     return typeof value === "string" || typeof value === "number" && Number.isFinite(value) ? value : null;
@@ -52,7 +53,7 @@ function decorateVisibleTreeRows(nodes, expandedNodeIdentities, striped) {
             : undefined;
         return {
             ...node,
-            className: stripe ? styles.stripedRow : undefined,
+            className: stripe ? "phi-tree-control__node--striped" : undefined,
             ...(children ? { children } : {}),
         };
     });
@@ -121,9 +122,9 @@ export function PhiTreeControl({ nodes, nodeIdentityPath, parentNodeIdentityPath
     const expandedIdentitySet = useMemo(() => new Set(expandedNodeIdentities.map(String)), [expandedNodeIdentities]);
     const renderedTreeData = useMemo(() => decorateVisibleTreeRows(treeData, expandedIdentitySet, presentation.row?.striped === true), [expandedIdentitySet, presentation.row?.striped, treeData]);
     if (loading && nodes.length === 0)
-        return _jsx(Skeleton, { active: true, paragraph: { rows: 6 }, title: false });
+        return _jsx(PhiSkeletonControl, { lines: 6 });
     const readEventNode = (value) => value;
-    const tree = (_jsx(Tree, { className: styles.root, style: {
+    const tree = (_jsx(Tree, { className: "phi-tree-control", style: {
             width: "100%",
             background: presentation.bordered ? "transparent" : token.colorBgContainer,
             borderRadius: presentation.bordered ? 0 : undefined,
@@ -152,6 +153,8 @@ export function PhiTreeControl({ nodes, nodeIdentityPath, parentNodeIdentityPath
             padding: token.paddingSM,
             background: token.colorBgContainer,
             border: `1px solid ${token.colorBorderSecondary}`,
-            borderRadius: token.borderRadiusLG,
+            // 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))",
         }, children: tree })) : tree;
 }