@phis/ui 0.1.0 → 0.2.0

package/components/state/scoped-state-store.js

@@ -96,25 +96,32 @@ export function createScopedStateStore(storeId, createDefaultState) {
     }
     function useStoreSelector(scopeKey, selector) {
         const normalizedScopeKey = normalizeScopedStateKey(scopeKey);
+        /*
+         * Cached on the source and on the selector. Keyed on the source alone, a selector that changed
+         * while the store did not -- a different id, a different scope -- kept answering with what the
+         * previous one selected. An inline selector is new each render, so it runs once per render; within
+         * one render every read agrees, which is what `useSyncExternalStore` needs.
+         */
         const selectedSnapshotRef = useRef(null);
         const selectedHydrationSnapshotRef = useRef(null);
         const getSelectedSnapshot = () => {
             const source = getSnapshot(normalizedScopeKey);
             const cached = selectedSnapshotRef.current;
-            if (cached && Object.is(cached.source, source)) {
+            if (cached && Object.is(cached.source, source) && cached.selector === selector) {
                 return cached.selected;
             }
             const selected = selector(source);
-            selectedSnapshotRef.current = { source, selected };
+            selectedSnapshotRef.current = { source, selector, selected };
             return selected;
         };
         const getSelectedHydrationSnapshot = () => {
+            const source = getHydrationSnapshot(normalizedScopeKey);
             const cached = selectedHydrationSnapshotRef.current;
-            if (cached) {
+            if (cached && Object.is(cached.source, source) && cached.selector === selector) {
                 return cached.selected;
             }
-            const selected = selector(getHydrationSnapshot(normalizedScopeKey));
-            selectedHydrationSnapshotRef.current = { selected };
+            const selected = selector(source);
+            selectedHydrationSnapshotRef.current = { source, selector, selected };
             return selected;
         };
         return useSyncExternalStore((listener) => subscribe(normalizedScopeKey, listener), getSelectedSnapshot, getSelectedHydrationSnapshot);

package/components/tables/client/phi-table-binding.d.ts

@@ -1,9 +1,10 @@
-import type { PhiTableProviderActionMutationRequest, PhiTableProviderDropMutationRequest, PhiTableProviderFieldMutationRequest, PhiTableProviderMutationRequest, PhiTableProviderMutationResult, PhiTableProviderQueryResult, PhiTableProviderResourceDescriptor, PhiTableProviderRowMoveMutationRequest, PhiTableProviderRowPatchMutationRequest, PhiTableQuery, PhiTableRowIdentity, PhiTableSourceBinding, PhiTableSummaryValue } from "../../../types/table-widget";
+import type { PhiTableProviderActionMutationRequest, PhiTableProviderDropMutationRequest, PhiTableProviderFieldMutationRequest, PhiTableProviderMutationRequest, PhiTableProviderMutationResult, PhiTableProviderQueryResult, PhiTableProviderResourceDescriptor, PhiTableProviderRowMoveMutationRequest, PhiTableProviderRowPatchMutationRequest, PhiTableQuery, PhiTableRowIdentity, PhiTableSummaryValue } from "../../../types/table-widget";
+import type { PhiProviderResourceSource } from "../../../types/runtime-data-provider";
 import { PhiTableProviderError } from "../../../types/table-widget";
 type TableRow = Record<string, unknown>;
 type MutationInput<TRequest extends PhiTableProviderMutationRequest> = TRequest extends unknown ? Omit<TRequest, "resourceKey" | "params" | "signal"> : never;
 export type PhiTableBindingInput = {
-    source: PhiTableSourceBinding | null;
+    source: PhiProviderResourceSource | null;
     initialQuery?: PhiTableQuery;
     externalQuery?: PhiTableQuery;
     externalSearch?: string;

package/components/tables/phi-plain-table.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import styles from "./phi-plain-table.module.css";
 /**
  * A table to read, not to work with.
  *
@@ -13,5 +12,5 @@ import styles from "./phi-plain-table.module.css";
  * variants are to be shared with the Table Control once that has them.
  */
 export function PhiPlainTable({ columns, rows, }) {
-    return (_jsx("div", { className: styles.scroll, children: _jsxs("table", { className: styles.table, children: [_jsx("thead", { children: _jsx("tr", { children: columns.map((column) => (_jsx("th", { scope: "col", style: column.align ? { textAlign: column.align } : undefined, children: column.title }, column.key))) }) }), _jsx("tbody", { children: rows.map((row) => (_jsx("tr", { children: columns.map((column, columnIndex) => (_jsx("td", { style: column.align ? { textAlign: column.align } : undefined, children: row.cells[columnIndex] ?? null }, column.key))) }, row.key))) })] }) }));
+    return (_jsx("div", { className: "phi-plain-table__scroll", children: _jsxs("table", { className: "phi-plain-table", children: [_jsx("thead", { children: _jsx("tr", { children: columns.map((column) => (_jsx("th", { scope: "col", style: column.align ? { textAlign: column.align } : undefined, children: column.title }, column.key))) }) }), _jsx("tbody", { children: rows.map((row) => (_jsx("tr", { children: columns.map((column, columnIndex) => (_jsx("td", { style: column.align ? { textAlign: column.align } : undefined, children: row.cells[columnIndex] ?? null }, column.key))) }, row.key))) })] }) }));
 }

package/components/trees/client/phi-tree-binding.js

@@ -1,11 +1,8 @@
 "use client";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { PhiTreeProviderError, readPhiTreeProviderError, readPhiTreeProviderMutationResult, readPhiTreeProviderQueryResult, } from "../../../types/tree-widget";
+import { PhiTreeProviderError, readPhiTreeNodePath as readPath, readPhiTreeProviderError, readPhiTreeProviderMutationResult, readPhiTreeProviderQueryResult, } from "../../../types/tree-widget";
 import { validatePhiTableProviderFieldValue } from "../../../types/table-widget";
 import { usePhiTreeProvider } from "../../widgets/client/shared/phi-tree-provider";
-function readPath(value, path) {
-    return path.split(".").reduce((current, key) => current && typeof current === "object" ? current[key] : undefined, value);
-}
 function patchNode(nodes, identityPath, identity, patch) {
     return nodes.map((node) => String(readPath(node, identityPath)) === String(identity) ? { ...node, ...patch } : node);
 }
@@ -53,7 +50,13 @@ function validateTree(nodes, identityPath, parentPath) {
     }
     return null;
 }
-export function usePhiTreeBinding({ source, initialQuery = {}, defaultExpandedNodeIdentities = [], defaultExpandAll = false, }) {
+/*
+ * The defaults stand at module level because the reset effect below depends on them: a fresh `{}` or
+ * `[]` on every render would be a new dependency each time and reset the tree on every render.
+ */
+const PHI_TREE_DEFAULT_INITIAL_QUERY = Object.freeze({});
+const PHI_TREE_DEFAULT_EXPANDED_NODE_IDENTITIES = Object.freeze([]);
+export function usePhiTreeBinding({ source, initialQuery = PHI_TREE_DEFAULT_INITIAL_QUERY, defaultExpandedNodeIdentities = PHI_TREE_DEFAULT_EXPANDED_NODE_IDENTITIES, defaultExpandAll = false, }) {
     const { provider, resource, bindingError } = usePhiTreeProvider(source);
     const [query, setQuery] = useState(initialQuery);
     const [nodes, setNodes] = useState([]);

package/components/widgets/accessible-areas.d.ts

@@ -0,0 +1,42 @@
+import type { PhiCmsAreaKey } from "../../constants/cms-areas";
+import { type PhiAccessViewer } from "../../types/access";
+import type { PhiAccountAreaEntry } from "../shell/shell-types";
+/**
+ * Which Areas this person may enter, asked the same way the Area routing asks it: every declared Area,
+ * filtered by `canPhiViewerAccess` against its own `accessPolicy`.
+ *
+ * It must not re-derive visibility from base roles. That answered the question a second way and
+ * disagreed with the policies — a Developer holds `Structure authoring`, `Content editing` and
+ * `Accounting`, yet saw neither Builder nor Editor nor Accounting. And it must not consult
+ * `viewer.resolvedArea`, which ACCESS.md defines as a landing destination, not an authorization
+ * boundary; in the old menu it papered over the incomplete role check for one Area per viewer.
+ *
+ * The order follows the Area declarations, the one source this list has.
+ */
+export declare function listPhiAccessibleAreas(viewer: PhiAccessViewer): readonly PhiCmsAreaKey[];
+/** What each Area is called in the reader's language; Public has no entry, so it has no name here. */
+export type PhiAccountAreaLabels = Readonly<Record<Exclude<PhiCmsAreaKey, "public">, string>>;
+/**
+ * The same list in the account menu, which is the one menu that stands in every Area.
+ *
+ * It is here rather than in a navigation surface because there is nothing to resolve: an Area's address
+ * is its own segment, the list is the same everywhere, and which entries it has is a property of the
+ * person rather than of the Page.
+ *
+ * Public is left out. It is the one Area nobody needs a way to reach from here: signing out lands
+ * there, and it is where a visitor who never signed in already is. Listing it put the Site beside the
+ * staff Areas as though it were one of them, in a menu whose subject is where this person may work.
+ *
+ * The labels are passed in rather than read from `constants/cms-areas`, where they are English
+ * constants a translator never sees. This menu stands in every Area and is read by people who did not
+ * choose the interface language.
+ *
+ * Since the account Pages are App's and are entries of `app:account` alone, this list is also how
+ * somebody standing in the Admin reaches their own profile: one step, named for what it is.
+ */
+export declare function buildPhiAccountAreaEntries({ viewer, currentArea, locale, labels, }: {
+    viewer: PhiAccessViewer;
+    currentArea: PhiCmsAreaKey;
+    locale: string;
+    labels: PhiAccountAreaLabels;
+}): PhiAccountAreaEntry[];

package/components/widgets/accessible-areas.js

@@ -0,0 +1,49 @@
+import { localizeAreaPath } from "../../helpers/locale";
+import { PHI_ALL_RUNTIME_AREA_DEFINITIONS } from "../../plugins/runtime-modules/area-definitions";
+import { canPhiViewerAccess } from "../../types/access";
+/**
+ * Which Areas this person may enter, asked the same way the Area routing asks it: every declared Area,
+ * filtered by `canPhiViewerAccess` against its own `accessPolicy`.
+ *
+ * It must not re-derive visibility from base roles. That answered the question a second way and
+ * disagreed with the policies — a Developer holds `Structure authoring`, `Content editing` and
+ * `Accounting`, yet saw neither Builder nor Editor nor Accounting. And it must not consult
+ * `viewer.resolvedArea`, which ACCESS.md defines as a landing destination, not an authorization
+ * boundary; in the old menu it papered over the incomplete role check for one Area per viewer.
+ *
+ * The order follows the Area declarations, the one source this list has.
+ */
+export function listPhiAccessibleAreas(viewer) {
+    return PHI_ALL_RUNTIME_AREA_DEFINITIONS
+        .filter((definition) => canPhiViewerAccess(viewer, definition.accessPolicy))
+        .map((definition) => definition.area);
+}
+/**
+ * The same list in the account menu, which is the one menu that stands in every Area.
+ *
+ * It is here rather than in a navigation surface because there is nothing to resolve: an Area's address
+ * is its own segment, the list is the same everywhere, and which entries it has is a property of the
+ * person rather than of the Page.
+ *
+ * Public is left out. It is the one Area nobody needs a way to reach from here: signing out lands
+ * there, and it is where a visitor who never signed in already is. Listing it put the Site beside the
+ * staff Areas as though it were one of them, in a menu whose subject is where this person may work.
+ *
+ * The labels are passed in rather than read from `constants/cms-areas`, where they are English
+ * constants a translator never sees. This menu stands in every Area and is read by people who did not
+ * choose the interface language.
+ *
+ * Since the account Pages are App's and are entries of `app:account` alone, this list is also how
+ * somebody standing in the Admin reaches their own profile: one step, named for what it is.
+ */
+export function buildPhiAccountAreaEntries({ viewer, currentArea, locale, labels, }) {
+    return listPhiAccessibleAreas(viewer)
+        .filter((area) => area !== "public")
+        .map((area) => ({
+        area,
+        label: labels[area],
+        // An Area root forwards to wherever this viewer lands.
+        href: localizeAreaPath(locale, area, "/"),
+        current: area === currentArea,
+    }));
+}

package/components/widgets/builder/phi-static-options-picker.js

@@ -1,19 +1,21 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { AppstoreOutlined, DeleteOutlined, EyeInvisibleOutlined, EyeOutlined, PlusOutlined, UnorderedListOutlined, } from "@ant-design/icons";
-import { Flex, Space, Tooltip } from "antd";
 import { useCallback, useMemo, useRef, useState } from "react";
 import {} from "../../controls/phi-table-control";
 import { PhiButtonControl } from "../../controls/phi-button-control";
 import { PhiAlertControl } from "../../controls/phi-alert-control";
-import { PhiModalControl } from "../../controls/phi-modal-control";
+import { PhiDialogControl } from "../../controls/phi-dialog-control";
 import { PhiIcon } from "../../shell/phi-icon";
 import { PhiWidgetIconPickerButton } from "../client/shared/phi-widget-icon-picker";
 import { usePhiWidgetScaffoldPopup } from "../client/shared/phi-widget-scaffold-popup";
+import { usePhiAuthoringToolsLabels } from "../client/shared/phi-authoring-tools-labels";
+import { formatPhiAuthoringToolsLabel } from "../label-types/authoring-tools";
 import { createPhiSharedRuntimeDataProviderKey } from "../../../constants/runtime-data-provider-key";
 import { PhiTableProviderClient } from "../client/shared/phi-table-provider";
 import { usePhiTableBinding } from "../../tables/client/phi-table-binding";
 import { PhiTableBindingControl } from "../../tables/client/phi-table-binding-control";
+import { PhiFlexControl } from "../../controls/phi-flex-control";
 const PHI_STATIC_OPTIONS_TABLE_PROVIDER_KEY = createPhiSharedRuntimeDataProviderKey("tables", "static-options-editor");
 const PHI_STATIC_OPTIONS_TABLE_RESOURCE = {
     resourceKey: "options",
@@ -54,16 +56,16 @@ function normalizeEditorOption(row) {
         ...(row.disabled ? { disabled: true } : {}),
     };
 }
-function validateEditorRows(rows) {
+function validateEditorRows(rows, labels) {
     if (rows.some((row) => !row.value.trim())) {
-        return "Every option requires a value.";
+        return labels.valueRequired;
     }
     if (rows.some((row) => !row.label.trim())) {
-        return "Every option requires a label.";
+        return labels.labelRequired;
     }
     const values = rows.map((row) => row.value.trim());
     if (new Set(values).size !== values.length) {
-        return "Option values must be unique.";
+        return labels.valuesUnique;
     }
     return null;
 }
@@ -132,6 +134,7 @@ function PhiStaticOptionsTableProvider({ rows, setRows, nextRowId, children, })
     return _jsx(PhiTableProviderClient, { registration: registration, children: children });
 }
 function PhiStaticOptionsTable({ disabled }) {
+    const labels = usePhiAuthoringToolsLabels().staticOptions;
     const source = useMemo(() => ({
         providerKey: PHI_STATIC_OPTIONS_TABLE_PROVIDER_KEY,
         resourceKey: PHI_STATIC_OPTIONS_TABLE_RESOURCE.resourceKey,
@@ -139,7 +142,7 @@ function PhiStaticOptionsTable({ disabled }) {
     const binding = usePhiTableBinding({ source, defaultPageSize: 100 });
     const columns = useMemo(() => [
         {
-            title: "Icon", key: "icon", fieldPath: "icon", sizing: { mode: "fixed", width: 48 },
+            title: labels.columnIcon, key: "icon", fieldPath: "icon", sizing: { mode: "fixed", width: 48 },
             render: (_value, row) => (_jsx(PhiWidgetIconPickerButton, { value: typeof row.icon === "string" ? row.icon : undefined, buttonAriaLabel: `Edit icon for ${String(row.label || row.value)}`, buttonIcon: row.icon ? _jsx(PhiIcon, { name: String(row.icon) }) : _jsx(AppstoreOutlined, {}), placement: "right", disabled: disabled || row.disabled === true, onChange: (icon) => {
                     void binding.commitField({
                         kind: "field", rowIdentity: String(row.rowId), fieldKey: "icon",
@@ -147,23 +150,24 @@ function PhiStaticOptionsTable({ disabled }) {
                     });
                 } })),
         },
-        { title: "Label", key: "label", fieldPath: "label", sizing: { mode: "fixed", width: 176 }, editor: { type: "string", required: true },
+        { title: labels.columnLabel, key: "label", fieldPath: "label", sizing: { mode: "fixed", width: 176 }, editor: { type: "string", required: true },
             isEditorDisabled: (row) => disabled || row.disabled === true,
             onCommit: (row, originalValue, proposedValue) => { void binding.commitField({ kind: "field", rowIdentity: String(row.rowId), fieldKey: "label", originalValue, proposedValue }); } },
-        { title: "Value", key: "value", fieldPath: "value", sizing: { mode: "fixed", width: 176 }, editor: { type: "string", required: true },
+        { title: labels.columnValue, key: "value", fieldPath: "value", sizing: { mode: "fixed", width: 176 }, editor: { type: "string", required: true },
             isEditorDisabled: (row) => disabled || row.disabled === true,
             onCommit: (row, originalValue, proposedValue) => { void binding.commitField({ kind: "field", rowIdentity: String(row.rowId), fieldKey: "value", originalValue, proposedValue }); } },
-        { title: "Description", key: "description", fieldPath: "description", sizing: { mode: "fill" }, editor: { type: "string" },
+        { title: labels.columnDescription, key: "description", fieldPath: "description", sizing: { mode: "fill" }, editor: { type: "string" },
             isEditorDisabled: (row) => disabled || row.disabled === true,
             onCommit: (row, originalValue, proposedValue) => { void binding.commitField({ kind: "field", rowIdentity: String(row.rowId), fieldKey: "description", originalValue, proposedValue }); } },
         {
-            title: "Actions", key: "actions", role: "actions", fieldPath: "rowId", sizing: { mode: "fixed", width: 72 }, fixed: "right",
-            render: (_value, row) => (_jsxs(Space, { size: 0, align: "center", children: [_jsx(Tooltip, { title: row.disabled ? "Enable option" : "Disable option", children: _jsx(PhiButtonControl, { type: "text", size: "small", icon: row.disabled ? _jsx(EyeInvisibleOutlined, {}) : _jsx(EyeOutlined, {}), ariaLabel: row.disabled ? `Enable ${String(row.label)}` : `Disable ${String(row.label)}`, disabled: disabled, onClick: () => { void binding.executeAction({ kind: "action", actionKey: "toggle", rowIdentity: String(row.rowId), selectedRowIdentities: [], query: binding.resolvedQuery }); } }) }), _jsx(Tooltip, { title: "Delete option", children: _jsx(PhiButtonControl, { type: "text", danger: true, size: "small", icon: _jsx(DeleteOutlined, {}), ariaLabel: `Delete ${String(row.label || row.value)}`, disabled: disabled, onClick: () => { void binding.executeAction({ kind: "action", actionKey: "delete", rowIdentity: String(row.rowId), selectedRowIdentities: [], query: binding.resolvedQuery }); } }) })] })),
+            title: labels.columnActions, key: "actions", role: "actions", fieldPath: "rowId", sizing: { mode: "fixed", width: 72 }, fixed: "right",
+            render: (_value, row) => (_jsxs(PhiFlexControl, { align: "center", gap: 0, style: { display: "inline-flex" }, children: [_jsx(PhiButtonControl, { type: "text", size: "small", icon: row.disabled ? _jsx(EyeInvisibleOutlined, {}) : _jsx(EyeOutlined, {}), ariaLabel: formatPhiAuthoringToolsLabel(row.disabled ? labels.enableRow : labels.disableRow, String(row.label)), disabled: disabled, tooltip: row.disabled ? labels.enableOption : labels.disableOption, onClick: () => { void binding.executeAction({ kind: "action", actionKey: "toggle", rowIdentity: String(row.rowId), selectedRowIdentities: [], query: binding.resolvedQuery }); } }), _jsx(PhiButtonControl, { type: "text", danger: true, size: "small", icon: _jsx(DeleteOutlined, {}), ariaLabel: formatPhiAuthoringToolsLabel(labels.deleteRow, String(row.label || row.value)), disabled: disabled, tooltip: labels.deleteOption, onClick: () => { void binding.executeAction({ kind: "action", actionKey: "delete", rowIdentity: String(row.rowId), selectedRowIdentities: [], query: binding.resolvedQuery }); } })] })),
         },
-    ], [binding, disabled]);
-    return _jsxs(_Fragment, { children: [binding.error ? _jsx(PhiAlertControl, { level: "error", showIcon: true, title: binding.error.message }) : null, _jsx(PhiTableBindingControl, { rows: binding.rows, fields: binding.resource?.fields ?? [], columns: columns, rowIdentityPath: "rowId", columnOrder: ["icon", "label", "value", "description", "actions"], sortingMode: "none", sorts: [], pagination: false, size: "small", emptyText: "No static options", layout: { mode: "fixed", overflowX: "auto" }, loading: binding.loading, rowReordering: { enabled: !disabled, onMove: (move) => { void binding.moveRow({ kind: "row-move", ...move }); } } }), _jsx(Flex, { justify: "flex-end", children: _jsx(PhiButtonControl, { label: "Add option", icon: _jsx(PlusOutlined, {}), size: "small", disabled: disabled, onClick: () => { void binding.executeAction({ kind: "action", actionKey: "add", selectedRowIdentities: [], query: binding.resolvedQuery }); } }) })] });
+    ], [binding, disabled, labels]);
+    return _jsxs(_Fragment, { children: [binding.error ? _jsx(PhiAlertControl, { level: "error", showIcon: true, title: binding.error.message }) : null, _jsx(PhiTableBindingControl, { rows: binding.rows, fields: binding.resource?.fields ?? [], columns: columns, rowIdentityPath: "rowId", columnOrder: ["icon", "label", "value", "description", "actions"], sortingMode: "none", sorts: [], pagination: false, size: "small", emptyText: labels.empty, layout: { mode: "fixed", overflowX: "auto" }, loading: binding.loading, rowReordering: { enabled: !disabled, onMove: (move) => { void binding.moveRow({ kind: "row-move", ...move }); } } }), _jsx(PhiFlexControl, { justify: "flex-end", children: _jsx(PhiButtonControl, { label: labels.addOption, icon: _jsx(PlusOutlined, {}), size: "small", disabled: disabled, onClick: () => { void binding.executeAction({ kind: "action", actionKey: "add", selectedRowIdentities: [], query: binding.resolvedQuery }); } }) })] });
 }
 export function PhiStaticOptionsToolButton({ options, disabled = false, onApply, }) {
+    const labels = usePhiAuthoringToolsLabels().staticOptions;
     const popup = usePhiWidgetScaffoldPopup();
     const rowSequenceRef = useRef(options.length);
     const [open, setOpen] = useState(false);
@@ -183,7 +187,7 @@ export function PhiStaticOptionsToolButton({ options, disabled = false, onApply,
         closePicker();
     };
     const applyPicker = () => {
-        const nextError = validateEditorRows(rows);
+        const nextError = validateEditorRows(rows, labels);
         if (nextError) {
             setError(nextError);
             return;
@@ -191,10 +195,13 @@ export function PhiStaticOptionsToolButton({ options, disabled = false, onApply,
         onApply(rows.map(normalizeEditorOption));
         closePicker();
     };
-    return (_jsxs(_Fragment, { children: [_jsx(PhiButtonControl, { ariaLabel: "Edit static options", icon: _jsx(UnorderedListOutlined, {}), type: "text", size: "small", disabled: disabled, style: { width: 24, minWidth: 24, height: 24, padding: 0 }, onClick: () => {
+    return (_jsxs(_Fragment, { children: [_jsx(PhiButtonControl, { ariaLabel: labels.edit, icon: _jsx(UnorderedListOutlined, {}), type: "text", size: "small", disabled: disabled, style: { width: 24, minWidth: 24, height: 24, padding: 0 }, onClick: () => {
                     setError(null);
                     rowSequenceRef.current = options.length;
                     setRows(createEditorRows(options));
                     setOpen(true);
-                } }), _jsx(PhiModalControl, { open: open, title: "Static options", width: 920, mask: { appearance: "normal", allowOutsideInteraction: false, closable: false }, mountPolicy: "remount", rootClassName: popup.rootClassName, onDismiss: discardPicker, footer: _jsxs(Flex, { justify: "end", gap: 12, children: [_jsx(PhiButtonControl, { label: "Cancel", onClick: discardPicker }), _jsx(PhiButtonControl, { label: "Apply", type: "primary", onClick: applyPicker })] }), body: _jsxs(Flex, { vertical: true, gap: 12, onClick: stopOverlayEvent, onPointerDown: stopOverlayEvent, children: [error ? _jsx(PhiAlertControl, { level: "error", showIcon: true, title: error }) : null, _jsx(PhiStaticOptionsTableProvider, { rows: rows, setRows: setRows, nextRowId: nextRowId, children: _jsx(PhiStaticOptionsTable, { disabled: disabled }) })] }) })] }));
+                } }), _jsx(PhiDialogControl, { open: open, title: labels.title, controlSize: "large", mask: { appearance: "normal", allowOutsideInteraction: false, closable: false }, mountPolicy: "remount", rootClassName: popup.rootClassName, onDismiss: discardPicker, alert: error ? { level: "error", showIcon: true, title: error } : null, actions: [
+                    { key: "cancel", label: labels.cancel, onClick: discardPicker },
+                    { key: "apply", label: labels.apply, type: "primary", onClick: applyPicker },
+                ], children: _jsx("div", { onClick: stopOverlayEvent, onPointerDown: stopOverlayEvent, style: { minWidth: 0 }, children: _jsx(PhiStaticOptionsTableProvider, { rows: rows, setRows: setRows, nextRowId: nextRowId, children: _jsx(PhiStaticOptionsTable, { disabled: disabled }) }) }) })] }));
 }

package/components/widgets/builder/stack-tabs.d.ts

@@ -1,3 +1,2 @@
-import { PHI_TAB_BAR_WIDGET_PLUGIN_TYPE, type PhiCmsTabBarWidgetConfig } from "../config/stack-tabs";
+import { type PhiCmsTabBarWidgetConfig } from "../config/stack-tabs";
 export declare const PHI_TAB_BAR_WIDGET_BUILDER_PLUGIN: import("../../../types").PhiCmsBuilderWidgetPlugin<PhiCmsTabBarWidgetConfig>;
-export { PHI_TAB_BAR_WIDGET_PLUGIN_TYPE };

package/components/widgets/builder/stack-tabs.js

@@ -1,7 +1,6 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createPhiCmsBuilderWidgetPlugin } from "../../../plugins/factories/widget-builder-plugin";
-import { PHI_TAB_BAR_WIDGET_DEFINITION, PHI_TAB_BAR_WIDGET_PLUGIN_TYPE, } from "../config/stack-tabs";
+import { PHI_TAB_BAR_WIDGET_DEFINITION, } from "../config/stack-tabs";
 import { PhiTabBarWidgetClient } from "../client/stack-tabs";
 export const PHI_TAB_BAR_WIDGET_BUILDER_PLUGIN = createPhiCmsBuilderWidgetPlugin(PHI_TAB_BAR_WIDGET_DEFINITION, ({ config }) => _jsx(PhiTabBarWidgetClient, { config: config }));
-export { PHI_TAB_BAR_WIDGET_PLUGIN_TYPE };

package/components/widgets/built-in/widget-preview-client.js

@@ -1,7 +1,8 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Skeleton, Typography } from "antd";
 import { usePhiConfig } from "../../root/phi-config-provider";
+import { PhiTypographyControl } from "../../controls/phi-typography-control";
+import { PhiSkeletonControl } from "../../controls/phi-skeleton-control";
 function splitNamespacedType(widgetType) {
     const slashIndex = widgetType.lastIndexOf("/");
     if (slashIndex < 0) {
@@ -25,8 +26,11 @@ export function PhiWidgetPreviewFallback({ widget, pluginTitle, summary, childre
             border: `1px solid ${token.colorBorderSecondary}`,
             borderRadius: token.borderRadiusSM,
             background: token.colorFillQuaternary,
-        }, children: [_jsxs("div", { style: { display: "grid", gap: 2, minWidth: 0 }, children: [_jsx(Typography.Text, { strong: true, style: { minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: widget.label ?? pluginTitle ?? typeKey }), _jsx(Typography.Text, { type: "secondary", style: { minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: pluginKey ? `${pluginKey}/${typeKey}` : typeKey })] }), summary ? _jsx(Typography.Text, { type: "secondary", children: summary }) : null, children ? null : (_jsx(Skeleton, { active: false, title: false, paragraph: {
-                    rows: 2,
-                    width: ["86%", "54%"],
-                } })), children] }));
+        }, children: [_jsxs("div", { style: { display: "grid", gap: 2, minWidth: 0 }, children: [_jsx(PhiTypographyControl, { strong: true, style: { minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: widget.label ?? pluginTitle ?? typeKey }), _jsx(PhiTypographyControl, { type: "secondary", style: { minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: pluginKey ? `${pluginKey}/${typeKey}` : typeKey })] }), summary ? _jsx(PhiTypographyControl, { type: "secondary", children: summary }) : null, children ? null : (_jsx(PhiSkeletonControl
+            // Still on purpose: this says the Widget has nothing to preview, not that something is on
+            // its way, and a shimmer would promise an arrival that never comes.
+            , { 
+                // Still on purpose: this says the Widget has nothing to preview, not that something is on
+                // its way, and a shimmer would promise an arrival that never comes.
+                active: false, lines: 2, lineWidths: ["86%", "54%"] })), children] }));
 }

package/components/widgets/client/auth-workflow-body.d.ts

@@ -1,6 +1,22 @@
-import type { PhiAuthWorkflow } from "../../../types/auth-manifest";
-export declare function PhiAuthWorkflowBody({ workflow, onComplete, }: {
-    workflow: PhiAuthWorkflow;
+import type { PhiAuthWorkflowBodyLabels } from "../label-types/auth-workflow";
+/**
+ * Which of the two things this is, which is not the same question as what state a Session is in.
+ *
+ * It used to take a `PhiAuthWorkflow`, and the App settings surface had to invent one to add an
+ * authenticator -- a value describing an authentication in progress, written by a browser for somebody
+ * who had finished signing in an hour ago. That was never a state Core could have answered for: adding
+ * a device voluntarily is not a step in signing in, and `GET /api/v1/auth/workflow` answers `complete`
+ * for exactly those people.
+ *
+ * So this asks for what it actually uses. Of the workflow it only ever read `state` and `next`, and
+ * never `methodKey` at all.
+ */
+export type PhiAuthWorkflowBodyMode = "enroll" | "challenge";
+export declare function PhiAuthWorkflowBody({ mode, next: fallbackNext, labels, onComplete, }: {
+    mode: PhiAuthWorkflowBodyMode;
+    /** Where a finished step goes when the server's answer does not name somewhere itself. */
+    next: string;
+    labels: PhiAuthWorkflowBodyLabels;
     onComplete: (payload: {
         area: string | null;
         next: string;

package/components/widgets/client/auth-workflow-body.js

@@ -1,20 +1,15 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState } from "react";
-import { Flex, QRCode, Typography } from "antd";
 import { PhiTextControl } from "../../controls/phi-text-control";
 import { PhiOtpControl } from "../../controls/phi-otp-control";
 import { PhiButtonControl } from "../../controls/phi-button-control";
 import { PhiAlertControl } from "../../controls/phi-alert-control";
-async function getCsrfToken() {
-    const response = await fetch("/api/auth/csrf", { credentials: "include", cache: "no-store" });
-    const payload = await response.json().catch(() => null);
-    const token = typeof payload?.token === "string" ? payload.token : "";
-    if (!response.ok || !token)
-        throw new Error("Could not initialize authentication session.");
-    return token;
-}
-export function PhiAuthWorkflowBody({ workflow, onComplete, }) {
+import { PhiFlexControl } from "../../controls/phi-flex-control";
+import { PhiTypographyControl } from "../../controls/phi-typography-control";
+import { PhiQrCodeControl } from "../../controls/phi-qr-code-control";
+import { readPhiJsonError, requestPhiJson } from "../../../helpers/client-json-request";
+export function PhiAuthWorkflowBody({ mode, next: fallbackNext, labels, onComplete, }) {
     const [enrollment, setEnrollment] = useState(null);
     const [code, setCode] = useState("");
     const [methodKey, setMethodKey] = useState("totp");
@@ -25,21 +20,17 @@ export function PhiAuthWorkflowBody({ workflow, onComplete, }) {
         setBusy(true);
         setError(null);
         try {
-            const token = await getCsrfToken();
-            const response = await fetch("/api/auth/workflow/totp/enroll", {
+            const { ok, payload } = await requestPhiJson("/api/auth/workflow/totp/enroll", {
                 method: "POST",
-                credentials: "include",
-                cache: "no-store",
-                headers: { accept: "application/json", "x-csrf-token": token },
+                csrf: true,
             });
-            const payload = await response.json().catch(() => null);
-            if (!response.ok || !payload?.factorId || !payload.otpauthUri) {
-                throw new Error(payload?.error ?? "Authenticator setup could not be started.");
+            if (!ok || !payload?.factorId || !payload.otpauthUri) {
+                throw new Error(readPhiJsonError(payload, labels.errors.setupFailed));
             }
             setEnrollment(payload);
         }
         catch (caught) {
-            setError(caught instanceof Error ? caught.message : "Authenticator setup could not be started.");
+            setError(caught instanceof Error ? caught.message : labels.errors.setupFailed);
         }
         finally {
             setBusy(false);
@@ -49,50 +40,40 @@ export function PhiAuthWorkflowBody({ workflow, onComplete, }) {
         setBusy(true);
         setError(null);
         try {
-            const token = await getCsrfToken();
-            const enrolling = workflow.state === "factor-enrollment-required";
-            const response = await fetch(enrolling ? "/api/auth/workflow/totp/confirm" : "/api/auth/workflow/verify", {
+            const enrolling = mode === "enroll";
+            const { ok, payload } = await requestPhiJson(enrolling ? "/api/auth/workflow/totp/confirm" : "/api/auth/workflow/verify", {
                 method: "POST",
-                credentials: "include",
-                cache: "no-store",
-                headers: {
-                    accept: "application/json",
-                    "content-type": "application/json",
-                    "x-csrf-token": token,
-                },
-                body: JSON.stringify(enrolling
-                    ? { factorId: enrollment?.factorId, code }
-                    : { methodKey, code }),
+                body: enrolling ? { factorId: enrollment?.factorId, code } : { methodKey, code },
+                csrf: true,
             });
-            const payload = await response.json().catch(() => null);
-            if (!response.ok || !payload?.ok) {
-                throw new Error(payload?.error ?? "Authentication code could not be verified.");
+            if (!ok || !payload?.ok) {
+                throw new Error(readPhiJsonError(payload, labels.errors.verifyFailed));
             }
             if (Array.isArray(payload.recoveryCodes) && payload.recoveryCodes.length > 0) {
                 setRecovery({
                     codes: payload.recoveryCodes,
                     area: payload.area?.trim() || null,
-                    next: payload.next ?? workflow.next,
+                    next: payload.next ?? fallbackNext,
                 });
                 return;
             }
-            await onComplete({ area: payload.area?.trim() || null, next: payload.next ?? workflow.next });
+            await onComplete({ area: payload.area?.trim() || null, next: payload.next ?? fallbackNext });
         }
         catch (caught) {
-            setError(caught instanceof Error ? caught.message : "Authentication code could not be verified.");
+            setError(caught instanceof Error ? caught.message : labels.errors.verifyFailed);
         }
         finally {
             setBusy(false);
         }
     }
     if (recovery) {
-        return (_jsxs(Flex, { vertical: true, gap: "middle", children: [_jsx(PhiAlertControl, { level: "success", showIcon: true, title: "Authenticator configured", description: "Save these recovery codes now. They are shown only once." }), _jsx(Flex, { vertical: true, gap: "small", children: recovery.codes.map((recoveryCode) => (_jsx(Typography.Text, { copyable: true, code: true, children: recoveryCode }, recoveryCode))) }), _jsx(PhiButtonControl, { type: "primary", onClick: () => void onComplete({ area: recovery.area, next: recovery.next }), label: "I saved the recovery codes" })] }));
+        return (_jsxs(PhiFlexControl, { vertical: true, gap: "middle", children: [_jsx(PhiAlertControl, { level: "success", showIcon: true, title: labels.recovery.title, description: labels.recovery.description }), _jsx(PhiFlexControl, { vertical: true, gap: "small", children: recovery.codes.map((recoveryCode) => (_jsx(PhiTypographyControl, { copyable: true, code: true, children: recoveryCode }, recoveryCode))) }), _jsx(PhiButtonControl, { type: "primary", onClick: () => void onComplete({ area: recovery.area, next: recovery.next }), label: labels.recovery.acknowledge })] }));
     }
-    if (workflow.state === "factor-enrollment-required") {
-        return (_jsxs(Flex, { vertical: true, gap: "middle", align: "center", children: [_jsx(Typography.Title, { level: 4, children: "Set up an authenticator app" }), _jsx(Typography.Paragraph, { type: "secondary", children: "Two-factor authentication is required before this site can be opened." }), error ? _jsx(PhiAlertControl, { level: "error", showIcon: true, title: error }) : null, !enrollment ? (_jsx(PhiButtonControl, { type: "primary", loading: busy, onClick: () => void startEnrollment(), label: "Start setup" })) : (_jsxs(_Fragment, { children: [_jsx(QRCode, { value: enrollment.otpauthUri, type: "svg" }), _jsx(Typography.Text, { copyable: true, code: true, children: enrollment.manualKey }), _jsx(PhiOtpControl, { ariaLabel: "Authenticator code", length: 6, value: code, onChange: setCode, disabled: busy }), _jsx(PhiButtonControl, { type: "primary", loading: busy, disabled: !/^\d{6}$/.test(code), onClick: () => void submit(), label: "Verify and continue" })] }))] }));
+    if (mode === "enroll") {
+        return (_jsxs(PhiFlexControl, { vertical: true, gap: "middle", align: "center", children: [_jsx(PhiTypographyControl, { presentation: "title", level: 4, children: labels.enroll.title }), _jsx(PhiTypographyControl, { presentation: "paragraph", type: "secondary", children: labels.enroll.intro }), error ? _jsx(PhiAlertControl, { level: "error", showIcon: true, title: error }) : null, !enrollment ? (_jsx(PhiButtonControl, { type: "primary", loading: busy, onClick: () => void startEnrollment(), label: labels.enroll.start })) : (_jsxs(_Fragment, { children: [_jsx(PhiQrCodeControl, { value: enrollment.otpauthUri, type: "svg" }), _jsx(PhiTypographyControl, { copyable: true, code: true, children: enrollment.manualKey }), _jsx(PhiOtpControl, { ariaLabel: labels.enroll.codeAriaLabel, length: 6, value: code, onChange: setCode, disabled: busy }), _jsx(PhiButtonControl, { type: "primary", loading: busy, disabled: !/^\d{6}$/.test(code), onClick: () => void submit(), label: labels.verify })] }))] }));
     }
-    return (_jsxs(Flex, { vertical: true, gap: "middle", children: [_jsx(Typography.Title, { level: 4, children: "Two-factor authentication" }), error ? _jsx(PhiAlertControl, { level: "error", showIcon: true, title: error }) : null, _jsx(PhiTextControl, { value: code, inputType: methodKey === "totp" ? "digits" : "text", autoComplete: "one-time-code", maxLength: methodKey === "totp" ? 6 : 11, placeholder: methodKey === "totp" ? "6-digit code" : "Recovery code", allowClear: false, onChange: (nextValue) => setCode(nextValue ?? ""), disabled: busy }), _jsx(PhiButtonControl, { type: "primary", loading: busy, onClick: () => void submit(), label: "Verify and continue" }), _jsx(PhiButtonControl, { type: "link", onClick: () => {
+    return (_jsxs(PhiFlexControl, { vertical: true, gap: "middle", children: [_jsx(PhiTypographyControl, { presentation: "title", level: 4, children: labels.challenge.title }), error ? _jsx(PhiAlertControl, { level: "error", showIcon: true, title: error }) : null, _jsx(PhiTextControl, { value: code, inputType: methodKey === "totp" ? "digits" : "text", autoComplete: "one-time-code", maxLength: methodKey === "totp" ? 6 : 11, placeholder: methodKey === "totp" ? labels.challenge.codePlaceholder : labels.challenge.recoveryPlaceholder, allowClear: false, onChange: (nextValue) => setCode(nextValue ?? ""), disabled: busy }), _jsx(PhiButtonControl, { type: "primary", loading: busy, onClick: () => void submit(), label: labels.verify }), _jsx(PhiButtonControl, { type: "link", onClick: () => {
                     setMethodKey((current) => current === "totp" ? "recovery-code" : "totp");
                     setCode("");
-                }, label: methodKey === "totp" ? "Use a recovery code" : "Use authenticator code" })] }));
+                }, label: methodKey === "totp" ? labels.challenge.useRecovery : labels.challenge.useAuthenticator })] }));
 }

package/components/widgets/client/description-editor-sections.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Which parts of the Description Widget's editor stand, decided from what is stored -- never from the
+ * draft being typed.
+ *
+ * A part that came and went with the draft would unmount the field under the caret: the first
+ * character typed into an empty title swapped the tree and took the focus with it, and clearing the
+ * last text took the field away before its blur could write the empty value. So an editing author is
+ * offered every part, empty or not, and the eyebrow's pill follows the stored value, which changes
+ * only once the field has been left.
+ *
+ * Read-only rendering keeps to what has text: a visitor is not shown empty placeholders.
+ */
+export type PhiDescriptionEditorStoredText = {
+    eyebrow: string;
+    title: string;
+    description: string;
+    asideTitle: string;
+    asideItems: readonly string[];
+};
+export type PhiDescriptionEditorSections = {
+    /** The eyebrow sits in its pill; otherwise it is a plain field. */
+    eyebrowTag: boolean;
+    /** The title and the description, which stand and fall together. */
+    heading: boolean;
+    /** The aside title and its items. */
+    aside: boolean;
+};
+export declare function resolvePhiDescriptionEditorSections(stored: PhiDescriptionEditorStoredText, editable: boolean): PhiDescriptionEditorSections;

package/components/widgets/client/description-editor-sections.js

@@ -0,0 +1,7 @@
+export function resolvePhiDescriptionEditorSections(stored, editable) {
+    return {
+        eyebrowTag: stored.eyebrow.length > 0,
+        heading: editable || stored.title.length > 0 || stored.description.length > 0,
+        aside: editable || stored.asideTitle.length > 0 || stored.asideItems.length > 0,
+    };
+}

package/components/widgets/client/external-document-editor.js

@@ -1,8 +1,9 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef } from "react";
-import { Flex, Typography } from "antd";
 import { PhiAlertControl } from "../../controls/phi-alert-control";
+import { PhiFlexControl } from "../../controls/phi-flex-control";
+import { PhiTypographyControl } from "../../controls/phi-typography-control";
 export function PhiExternalDocumentEditor({ format, sourceUrl, sourceLocale, onSourceLocaleChange, }) {
     const detectionUrlRef = useRef("");
     useEffect(() => {
@@ -27,5 +28,5 @@ export function PhiExternalDocumentEditor({ format, sourceUrl, sourceLocale, onS
         }).catch(() => undefined);
         return () => controller.abort();
     }, [format, onSourceLocaleChange, sourceLocale, sourceUrl]);
-    return (_jsx("div", { style: { width: 520, height: 260, maxWidth: "100%", minWidth: 0, minHeight: 0, display: "flex" }, children: _jsx(PhiAlertControl, { level: "info", showIcon: true, title: `External ${format} source`, description: _jsxs(Flex, { vertical: true, gap: "var(--ant-padding-xs)", style: { width: "100%", minWidth: 0 }, children: [_jsx(Typography.Text, { children: "This widget renders the configured external document. Edit its URL and source locale in the widget settings." }), _jsx(Typography.Text, { code: true, copyable: { text: sourceUrl }, style: { wordBreak: "break-all" }, children: sourceUrl || "No Source URL configured." })] }) }) }));
+    return (_jsx("div", { style: { width: 520, height: 260, maxWidth: "100%", minWidth: 0, minHeight: 0, display: "flex" }, children: _jsx(PhiAlertControl, { level: "info", showIcon: true, title: `External ${format} source`, description: _jsxs(PhiFlexControl, { vertical: true, gap: "var(--ant-padding-xs)", style: { width: "100%", minWidth: 0 }, children: [_jsx(PhiTypographyControl, { children: "This widget renders the configured external document. Edit its URL and source locale in the widget settings." }), _jsx(PhiTypographyControl, { code: true, copyable: { text: sourceUrl }, style: { wordBreak: "break-all" }, children: sourceUrl || "No Source URL configured." })] }) }) }));
 }