@phis/ui 0.4.2 → 0.4.4

package/components/runtime/runtime-controller-materialization.js

@@ -39,7 +39,18 @@ export function materializePhiWidgetRuntimeControllerSettings({ widget, tree, ow
     if (!plugin.requiredRuntimeControllers) {
         return [];
     }
-    const config = plugin.parseConfig(widget.config);
+    /*
+     * A Widget whose config cannot be read asks for no Controller. It is not rendered either: the renderer
+     * meets the same error in the Widget's own place, leaves it out of a live page and shows it in the
+     * Builder. Thrown here, outside any block, it took the whole page with it.
+     */
+    let config;
+    try {
+        config = plugin.parseConfig(widget.config);
+    }
+    catch {
+        return [];
+    }
     const settingsByKey = new Map();
     for (const requirement of plugin.requiredRuntimeControllers({ widget, tree, config })) {
         const setting = {

package/components/shell/phi-antd-icon.d.ts

@@ -17,6 +17,7 @@ declare const PHI_ANTD_ICON_LOADERS: {
     readonly CalendarOutlined: () => Promise<typeof import("@ant-design/icons-svg/es/asn/CalendarOutlined")>;
     readonly CheckOutlined: () => Promise<typeof import("@ant-design/icons-svg/es/asn/CheckOutlined")>;
     readonly CloseOutlined: () => Promise<typeof import("@ant-design/icons-svg/es/asn/CloseOutlined")>;
+    readonly CloudDownloadOutlined: () => Promise<typeof import("@ant-design/icons-svg/es/asn/CloudDownloadOutlined")>;
     readonly CloudUploadOutlined: () => Promise<typeof import("@ant-design/icons-svg/es/asn/CloudUploadOutlined")>;
     readonly ClusterOutlined: () => Promise<typeof import("@ant-design/icons-svg/es/asn/ClusterOutlined")>;
     readonly CodeOutlined: () => Promise<typeof import("@ant-design/icons-svg/es/asn/CodeOutlined")>;

package/components/shell/phi-antd-icon.js

@@ -38,6 +38,7 @@ const PHI_ANTD_ICON_LOADERS = {
     CalendarOutlined: () => import("@ant-design/icons-svg/es/asn/CalendarOutlined"),
     CheckOutlined: () => import("@ant-design/icons-svg/es/asn/CheckOutlined"),
     CloseOutlined: () => import("@ant-design/icons-svg/es/asn/CloseOutlined"),
+    CloudDownloadOutlined: () => import("@ant-design/icons-svg/es/asn/CloudDownloadOutlined"),
     CloudUploadOutlined: () => import("@ant-design/icons-svg/es/asn/CloudUploadOutlined"),
     ClusterOutlined: () => import("@ant-design/icons-svg/es/asn/ClusterOutlined"),
     CodeOutlined: () => import("@ant-design/icons-svg/es/asn/CodeOutlined"),
@@ -327,6 +328,8 @@ export const PHI_ANTD_ICON_NAMES = {
     "video-camera-two-tone": "VideoCameraTwoTone",
     warning: "WarningOutlined",
     "warning-outlined": "WarningOutlined",
+    "cloud-download": "CloudDownloadOutlined",
+    "cloud-download-outlined": "CloudDownloadOutlined",
     "cloud-upload": "CloudUploadOutlined",
     "cloud-upload-outlined": "CloudUploadOutlined",
     "eye-invisible": "EyeInvisibleOutlined",

package/components/shell/use-phi-shell-sticky-top.js

@@ -1,32 +1,35 @@
 "use client";
 import { useEffect } from "react";
+import { PHI_SHELL_STICKY_TOP_PROPERTY } from "../root/phi-shell-chrome-overlay";
 /**
  * How far down the viewport the Shell's Header holds right now, published on the Shell.
  *
  * Something that sticks to the top of the page -- a Table's header row -- has to stick under the Header
  * rather than behind it, and where the Header ends is not a constant: each band sticks or scrolls by its
  * own config, and a revealing `header_top` slides away while the visitor reads down and comes back when
- * they scroll up. So the edge is measured, not configured: the lowest bottom of every Header band that is
- * stuck at this moment, written as `--phi-shell-sticky-top` on the Shell element. Unset, a reader falls
+ * they scroll up. So the edge is measured, not configured: the lowest visible bottom of the Header bands,
+ * stuck or in the flow, written as `--phi-shell-sticky-top` on the Shell element. Unset, a reader falls
  * back to `0px`, which is right for a Shell without a sticky Header.
  *
- * Run by whatever sticks under it -- every sticky Table does -- so a page without one loads nothing for
- * it. Each runner measures all the bands and they all write the same value. Not inside an Overlay: a
- * Modal's or Drawer's body scrolls on its own, and its top edge is the line.
+ * Run by whatever sticks under it -- every sticky Table does, and the Region renderer for a stuck Sider
+ * (`phiCmsRegionSiderSticks`) -- so a page without one loads nothing for it. Each runner measures all the
+ * bands and they all write the same value. Not inside an Overlay: a Modal's or Drawer's body scrolls on
+ * its own, and its top edge is the line.
  */
-const PHI_SHELL_STICKY_TOP_PROPERTY = "--phi-shell-sticky-top";
 const HEADER_BANDS = '[data-phi-region-key^="header_"]:not([hidden])';
 function measurePhiShellStickyTop(shell) {
+    /*
+     * The lowest visible bottom of the Header bands, stuck or not. Counting only the bands stuck at this
+     * moment made the edge jump: a band leaving its sticking line for its place in the flow -- the main
+     * band while the top band scrolls back in above it -- dropped out of the count at once, and whatever
+     * stuck under it leapt up by the band's height. Counted while it is in view, the edge moves with the
+     * scroll instead. A band in the flow stands above the content anyway, so nothing sticks too low for it.
+     */
     let bottom = 0;
     for (const band of shell.querySelectorAll(HEADER_BANDS)) {
-        const style = window.getComputedStyle(band);
-        if (style.position !== "sticky" && style.position !== "fixed") {
-            continue;
-        }
         const rect = band.getBoundingClientRect();
-        const stuckAt = Number.parseFloat(style.top) || 0;
-        // Below its sticking line it is still in flow; above the viewport it has slid away.
-        if (rect.height === 0 || rect.top > stuckAt + 1 || rect.bottom <= 0) {
+        // Empty, or scrolled or slid out of the viewport.
+        if (rect.height === 0 || rect.bottom <= 0) {
             continue;
         }
         bottom = Math.max(bottom, rect.bottom);
@@ -57,10 +60,46 @@ export function usePhiShellStickyTop({ active, elementRef, }) {
             }
         };
         publish();
+        /*
+         * A revealing band moves by a transition. Measured only where it settled, whatever sticks under it
+         * would stand still while the band slides and then jump; so while a transition runs in the Shell the
+         * edge is measured every frame, and once more where it ends.
+         */
+        let following = 0;
+        let followFrame = 0;
+        const follow = () => {
+            publish();
+            followFrame = following > 0 ? window.requestAnimationFrame(follow) : 0;
+        };
+        // Only a Header band's own transitions move the edge; a button's hover elsewhere in the Shell does not.
+        const isBandTransition = (event) => event.target instanceof Element && event.target.closest(HEADER_BANDS) !== null;
+        // A transition whose element leaves the page never ends; the follow stops on its own regardless.
+        let followTimeout = 0;
+        const stopFollowing = () => {
+            following = 0;
+            followTimeout = 0;
+        };
+        const transitionStarted = (event) => {
+            if (!isBandTransition(event))
+                return;
+            following += 1;
+            window.clearTimeout(followTimeout);
+            followTimeout = window.setTimeout(stopFollowing, 2000);
+            if (followFrame === 0) {
+                followFrame = window.requestAnimationFrame(follow);
+            }
+        };
+        const transitionStopped = (event) => {
+            if (!isBandTransition(event))
+                return;
+            following = Math.max(0, following - 1);
+            schedule();
+        };
         window.addEventListener("scroll", schedule, { passive: true });
         window.addEventListener("resize", schedule);
-        // A revealing band moves by a transition; its end is where it settled.
-        shell.addEventListener("transitionend", schedule);
+        shell.addEventListener("transitionrun", transitionStarted);
+        shell.addEventListener("transitionend", transitionStopped);
+        shell.addEventListener("transitioncancel", transitionStopped);
         const observer = new ResizeObserver(schedule);
         for (const band of shell.querySelectorAll(HEADER_BANDS)) {
             observer.observe(band);
@@ -69,9 +108,15 @@ export function usePhiShellStickyTop({ active, elementRef, }) {
             if (frame !== 0) {
                 window.cancelAnimationFrame(frame);
             }
+            if (followFrame !== 0) {
+                window.cancelAnimationFrame(followFrame);
+            }
+            window.clearTimeout(followTimeout);
             window.removeEventListener("scroll", schedule);
             window.removeEventListener("resize", schedule);
-            shell.removeEventListener("transitionend", schedule);
+            shell.removeEventListener("transitionrun", transitionStarted);
+            shell.removeEventListener("transitionend", transitionStopped);
+            shell.removeEventListener("transitioncancel", transitionStopped);
             observer.disconnect();
         };
     }, [active, elementRef]);

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

@@ -1,5 +1,5 @@
 "use client";
-import { useRef, useSyncExternalStore } from "react";
+import { useCallback, useRef, useSyncExternalStore } from "react";
 const scopedStateStoreKey = "__phiScopedStateStores__";
 function normalizeScopedStateKey(scopeKey) {
     return scopeKey.trim() || "default";
@@ -92,7 +92,12 @@ export function createScopedStateStore(storeId, createDefaultState) {
     }
     function useStore(scopeKey) {
         const normalizedScopeKey = normalizeScopedStateKey(scopeKey);
-        return useSyncExternalStore((listener) => subscribe(normalizedScopeKey, listener), () => getSnapshot(normalizedScopeKey), () => getHydrationSnapshot(normalizedScopeKey));
+        /*
+         * Held per scope. An inline `subscribe` is a new function every render, and `useSyncExternalStore`
+         * unsubscribes and subscribes again for each new one.
+         */
+        const subscribeToScope = useCallback((listener) => subscribe(normalizedScopeKey, listener), [normalizedScopeKey]);
+        return useSyncExternalStore(subscribeToScope, () => getSnapshot(normalizedScopeKey), () => getHydrationSnapshot(normalizedScopeKey));
     }
     function useStoreSelector(scopeKey, selector) {
         const normalizedScopeKey = normalizeScopedStateKey(scopeKey);
@@ -124,14 +129,26 @@ export function createScopedStateStore(storeId, createDefaultState) {
             selectedHydrationSnapshotRef.current = { source, selector, selected };
             return selected;
         };
-        return useSyncExternalStore((listener) => subscribe(normalizedScopeKey, listener), getSelectedSnapshot, getSelectedHydrationSnapshot);
+        const subscribeToScope = useCallback((listener) => subscribe(normalizedScopeKey, listener), [normalizedScopeKey]);
+        return useSyncExternalStore(subscribeToScope, getSelectedSnapshot, getSelectedHydrationSnapshot);
     }
     function reset(scopeKey) {
         patch(scopeKey, () => createDefaultState(normalizeScopedStateKey(scopeKey)));
     }
+    /*
+     * Forgets a scope's state. A component still mounted on it keeps its subscription on the entry it
+     * subscribed to, so dropping that entry left it listening to nothing: the next write went into a new
+     * entry nobody was told about. With listeners, the entry stays and starts over from the default
+     * instead, and they hear it.
+     */
     function deleteScope(scopeKey) {
         const normalizedScopeKey = normalizeScopedStateKey(scopeKey);
         const bucket = getScopedBucket();
+        const entry = bucket.get(normalizedScopeKey);
+        if (entry && entry.listeners.size > 0) {
+            replace(normalizedScopeKey, createDefaultState(normalizedScopeKey));
+            return;
+        }
         bucket.delete(normalizedScopeKey);
     }
     return {

package/components/surface/phi-surface-tone.d.ts

@@ -16,3 +16,16 @@ export declare function PhiSurfaceTone({ tone, children, }: {
     tone: PhiSurfaceToneValue | null | undefined;
     children: ReactNode;
 }): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react").JSX.Element | null | undefined;
+/**
+ * The page's own mode around something that belongs to the page's tools rather than to its content.
+ *
+ * The Builder draws its scaffolds -- tool bars, drag handles, the effects preview -- inside the Surfaces
+ * they edit, and a toned Surface would turn them with its content. This turns them back: inside a tone
+ * scope it mounts the page's mode again (its Ant Design components take it by themselves), outside one it
+ * renders the children as they are. `className` is the class an element of the caller's that reads the
+ * Theme's variables itself must carry, so they resolve in the page's mode there too; empty outside a tone.
+ */
+export declare function usePhiPageModeTone(): {
+    className: string | undefined;
+    wrap: (children: ReactNode) => ReactNode;
+};

package/components/surface/phi-surface-tone.js

@@ -34,3 +34,24 @@ export function PhiSurfaceTone({ tone, children, }) {
     }
     return (_jsx(Suspense, { fallback: null, children: _jsx(PhiSurfaceToneScope, { mode: target, cssVarKey: cssVarKey, source: source, children: children }) }));
 }
+/**
+ * The page's own mode around something that belongs to the page's tools rather than to its content.
+ *
+ * The Builder draws its scaffolds -- tool bars, drag handles, the effects preview -- inside the Surfaces
+ * they edit, and a toned Surface would turn them with its content. This turns them back: inside a tone
+ * scope it mounts the page's mode again (its Ant Design components take it by themselves), outside one it
+ * renders the children as they are. `className` is the class an element of the caller's that reads the
+ * Theme's variables itself must carry, so they resolve in the page's mode there too; empty outside a tone.
+ */
+export function usePhiPageModeTone() {
+    const { mode } = usePhiConfig();
+    const source = usePhiThemeToneSource();
+    const pageMode = source?.pageMode ?? mode;
+    if (pageMode === mode) {
+        return { className: undefined, wrap: (children) => children };
+    }
+    return {
+        className: resolvePhiSurfaceToneClassName(pageMode),
+        wrap: (children) => _jsx(PhiSurfaceTone, { tone: pageMode, children: children }),
+    };
+}

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

@@ -22,7 +22,8 @@ export declare function usePhiTableBinding({ source, initialQuery, externalQuery
     resource: PhiTableProviderResourceDescriptor | null;
     bindingError: string | null;
     rows: readonly TableRow[];
-    total: number;
+    total: number | null;
+    hasMore: boolean;
     summary: Readonly<Record<string, PhiTableSummaryValue>>;
     contractError: string | null;
     loading: boolean;

package/components/tables/client/phi-table-binding.js

@@ -76,7 +76,14 @@ export function usePhiTableBinding({ source, initialQuery = {}, externalQuery, f
         expandedRowIdentities: initialQuery.expandedRowIdentities,
     }));
     const [rows, setRows] = useState([]);
-    const [total, setTotal] = useState(0);
+    /*
+     * The number of rows the whole query has, where the Provider counts them (`query.total` on its
+     * resource), and `null` where it does not. Counting is a query of its own on a large table, so a
+     * Provider answers it only where a Table shows it; the rows on this page are never put in its place.
+     */
+    const [total, setTotal] = useState(null);
+    /** Whether a page follows this one, for a Table that pages without a count. */
+    const [hasMore, setHasMore] = useState(false);
     const [summary, setSummary] = useState({});
     const [queryLoading, setQueryLoading] = useState(Boolean(source));
     const [pendingMutationTargets, setPendingMutationTargets] = useState(() => new Set());
@@ -102,6 +109,30 @@ export function usePhiTableBinding({ source, initialQuery = {}, externalQuery, f
             controller.abort();
         mutationControllers.current.clear();
     }, []);
+    /*
+     * A new source starts from nothing, and it does so in the render that brought it.
+     *
+     * The reset used to run in a microtask after the effects, so the query effect below had already
+     * fetched the new source with the old page and cursor -- one request thrown away on every source or
+     * `bindingParamsChange`. Adjusting state while rendering is React's way to follow a prop: the effects
+     * of this render see page 1 already. It also leaves the first render alone, so an `initialQuery` page
+     * and `initialExpandedRowIdentities` are no longer reset away on mount.
+     */
+    const [renderedSourceKey, setRenderedSourceKey] = useState(sourceKey);
+    if (renderedSourceKey !== sourceKey) {
+        setRenderedSourceKey(sourceKey);
+        setPendingMutationTargets(new Set());
+        setRows([]);
+        setTotal(null);
+        setHasMore(false);
+        setSummary({});
+        setSelectedRowIdentities([]);
+        setExpandedRowIdentities([]);
+        setQuery((current) => ({ ...current, page: 1, cursor: null }));
+        setQueryLoading(sourceKey !== "null");
+        setError(null);
+    }
+    // What a render cannot reset: requests in flight and the bookkeeping kept beside state.
     useEffect(() => {
         for (const controller of mutationControllers.current)
             controller.abort();
@@ -109,21 +140,6 @@ export function usePhiTableBinding({ source, initialQuery = {}, externalQuery, f
         latestMutationByTarget.current.clear();
         pendingMutationCountsByTarget.current.clear();
         rowsRef.current = [];
-        let cancelled = false;
-        queueMicrotask(() => {
-            if (cancelled)
-                return;
-            setPendingMutationTargets(new Set());
-            setRows([]);
-            setTotal(0);
-            setSummary({});
-            setSelectedRowIdentities([]);
-            setExpandedRowIdentities([]);
-            setQuery((current) => ({ ...current, page: 1, cursor: null }));
-            setQueryLoading(sourceKey !== "null");
-            setError(null);
-        });
-        return () => { cancelled = true; };
     }, [sourceKey]);
     /*
      * Held by content, not identity: a caller that writes the object inline hands in a new one every
@@ -158,7 +174,8 @@ export function usePhiTableBinding({ source, initialQuery = {}, externalQuery, f
         if (data.rows.some((row) => readPhiTableRowIdentity(row, resource.rowIdentityPath) == null)) {
             setRows([]);
             rowsRef.current = [];
-            setTotal(0);
+            setTotal(null);
+            setHasMore(false);
             setSummary({});
             setQueryLoading(false);
             setError(new PhiTableProviderError("missing-row-identity", `Table Provider row is missing identity field "${resource.rowIdentityPath}".`));
@@ -168,7 +185,8 @@ export function usePhiTableBinding({ source, initialQuery = {}, externalQuery, f
         if (summaryError) {
             setRows([]);
             rowsRef.current = [];
-            setTotal(0);
+            setTotal(null);
+            setHasMore(false);
             setSummary({});
             setQueryLoading(false);
             setError(new PhiTableProviderError("invalid-summary", summaryError));
@@ -176,7 +194,11 @@ export function usePhiTableBinding({ source, initialQuery = {}, externalQuery, f
         }
         rowsRef.current = data.rows;
         setRows(data.rows);
-        setTotal(data.total ?? data.rows.length);
+        // A resource that does not page answers every row at once, so its rows are its count.
+        const pages = resource.query.pagination === "offset" || resource.query.pagination === "cursor";
+        setTotal(data.total ?? (pages ? null : data.rows.length));
+        const pageSize = data.pageSize ?? resolvedQuery.pageSize;
+        setHasMore(data.nextCursor != null || (data.total == null && pageSize != null && data.rows.length >= pageSize));
         setSummary(data.summary ?? {});
         setQueryLoading(false);
         setError(null);
@@ -188,7 +210,7 @@ export function usePhiTableBinding({ source, initialQuery = {}, externalQuery, f
             setSelectedRowIdentities((current) => current.filter((identity) => available.has(String(identity))));
         }
         onDataRef.current?.(data);
-    }, [preserveSelectedRowIdentities, resource]);
+    }, [preserveSelectedRowIdentities, resolvedQuery.pageSize, resource]);
     useEffect(() => {
         if (!source || !provider || !resource || resourceError)
             return;
@@ -254,7 +276,8 @@ export function usePhiTableBinding({ source, initialQuery = {}, externalQuery, f
                 if (!background) {
                     setRows([]);
                     rowsRef.current = [];
-                    setTotal(0);
+                    setTotal(null);
+                    setHasMore(false);
                     setSummary({});
                 }
                 setQueryLoading(false);
@@ -505,6 +528,7 @@ export function usePhiTableBinding({ source, initialQuery = {}, externalQuery, f
         bindingError,
         rows,
         total,
+        hasMore,
         summary,
         contractError: resourceError,
         loading: queryLoading && !bindingError && !resourceError,

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

@@ -104,19 +104,27 @@ export function usePhiTreeBinding({ source, initialQuery = PHI_TREE_DEFAULT_INIT
             controllers.clear();
         };
     }, []);
+    /*
+     * A new source, or new defaults, start the tree over -- in the render that brought them, so the query
+     * effect below asks once, with the reset query, instead of first with the old one.
+     *
+     * The search a reader typed stays. Resetting it to the initial query showed the unfiltered tree for a
+     * moment and fetched it, and the Widget's debounce put the search back 250 ms later for a third request:
+     * a new binding parameter narrows what the tree is about, not what the reader is looking for.
+     */
+    const [renderedResetInputs, setRenderedResetInputs] = useState({ sourceKey, initialQuery, defaultExpandedNodeIdentities });
+    if (renderedResetInputs.sourceKey !== sourceKey ||
+        renderedResetInputs.initialQuery !== initialQuery ||
+        renderedResetInputs.defaultExpandedNodeIdentities !== defaultExpandedNodeIdentities) {
+        setRenderedResetInputs({ sourceKey, initialQuery, defaultExpandedNodeIdentities });
+        setNodes([]);
+        setSelectedNodeIdentities([]);
+        setCheckedNodeIdentities([]);
+        setExpandedNodeIdentities(defaultExpandedNodeIdentities);
+        setQuery((current) => (current.search ? { ...initialQuery, search: current.search } : initialQuery));
+    }
     useEffect(() => {
         expandedInitialSnapshot.current = false;
-        let cancelled = false;
-        queueMicrotask(() => {
-            if (cancelled)
-                return;
-            setNodes([]);
-            setSelectedNodeIdentities([]);
-            setCheckedNodeIdentities([]);
-            setExpandedNodeIdentities(defaultExpandedNodeIdentities);
-            setQuery(initialQuery);
-        });
-        return () => { cancelled = true; };
     }, [defaultExpandedNodeIdentities, initialQuery, sourceKey]);
     useEffect(() => {
         if (!source || !provider || !resource)

package/components/widgets/client/bullet-list-entries-editor.d.ts

@@ -0,0 +1,26 @@
+import { type CSSProperties } from "react";
+import { type PhiBulletListEntry, type PhiResolvedBulletListStyle } from "../shared/bullet-list-vocabulary";
+export type PhiBulletListEntriesEditorProps = {
+    entries: readonly PhiBulletListEntry[];
+    listStyle: PhiResolvedBulletListStyle;
+    /** Absent, the entries are only shown: a read-only canvas. */
+    onCommit?: (entries: PhiBulletListEntry[]) => void;
+    /** Whether a click on an entry's marker steps its state on (`PHI_BULLET_LIST_ENTRY_STATES`). */
+    states?: boolean;
+    /** Each entry's field, apart from what every field here is: borderless, its text's own type. */
+    fieldStyle?: CSSProperties;
+};
+/**
+ * A list written in place, entry by entry, as the Widgets that carry one edit it.
+ *
+ * Every entry is a text field standing where the entry stands, so the list is set as it will be read.
+ * What is typed stays here until the field is left, and the Builder's history records one change per
+ * entry rather than one per keystroke. What changes the list's shape is written at once, with what was
+ * typed so far: Enter opens an entry after this one, Backspace in an empty entry removes it, Tab and
+ * Shift+Tab move an entry a level down and up, and -- where the list has `states` -- a click on the
+ * marker steps the entry from included to excluded to neither. Waiting for the blur would let the entry
+ * jump back while the tree is drawn again.
+ *
+ * A list with no entries still offers one empty field, so there is something to type into.
+ */
+export declare function PhiBulletListEntriesEditor({ entries, listStyle, onCommit, states, fieldStyle, }: PhiBulletListEntriesEditorProps): import("react").JSX.Element;

package/components/widgets/client/bullet-list-entries-editor.js

@@ -0,0 +1,109 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import { PhiBulletListControl } from "../../controls/phi-bullet-list-control";
+import { PhiTextControl } from "../../controls/phi-text-control";
+import { buildPhiBulletListTree, nextPhiBulletListEntryState, resolvePhiBulletListLevel, } from "../shared/bullet-list-vocabulary";
+/**
+ * A list written in place, entry by entry, as the Widgets that carry one edit it.
+ *
+ * Every entry is a text field standing where the entry stands, so the list is set as it will be read.
+ * What is typed stays here until the field is left, and the Builder's history records one change per
+ * entry rather than one per keystroke. What changes the list's shape is written at once, with what was
+ * typed so far: Enter opens an entry after this one, Backspace in an empty entry removes it, Tab and
+ * Shift+Tab move an entry a level down and up, and -- where the list has `states` -- a click on the
+ * marker steps the entry from included to excluded to neither. Waiting for the blur would let the entry
+ * jump back while the tree is drawn again.
+ *
+ * A list with no entries still offers one empty field, so there is something to type into.
+ */
+export function PhiBulletListEntriesEditor({ entries, listStyle, onCommit, states = false, fieldStyle, }) {
+    const [draftState, setDraftState] = useState(() => ({ source: entries, value: [...entries] }));
+    const draft = draftState.source === entries ? draftState.value : [...entries];
+    const shown = draft.length > 0 || !onCommit ? draft : [{ text: "" }];
+    const listRef = useRef(null);
+    function focusEntry(index) {
+        requestAnimationFrame(() => {
+            const field = listRef.current?.querySelectorAll("textarea")[index];
+            field?.focus();
+            field?.setSelectionRange(field.value.length, field.value.length);
+        });
+    }
+    function commit(next) {
+        // The empty field an empty list offers is not an entry until something is typed into it.
+        if (entries.length === 0 && next.length === 1 && next[0].text === "" && !next[0].state)
+            return;
+        setDraftState({ source: entries, value: next });
+        if (JSON.stringify(next) !== JSON.stringify(entries))
+            onCommit?.(next);
+    }
+    function updateText(index, text) {
+        const next = [...shown];
+        next[index] = { ...next[index], text };
+        setDraftState({ source: entries, value: next });
+    }
+    function shiftLevel(index, delta) {
+        const entry = shown[index];
+        if (!entry)
+            return;
+        const level = resolvePhiBulletListLevel((entry.level ?? 1) + delta);
+        if (level === (entry.level ?? 1))
+            return;
+        const { level: _level, ...rest } = entry;
+        void _level;
+        commit(shown.map((item, itemIndex) => (itemIndex === index ? (level > 1 ? { ...rest, level } : rest) : item)));
+        focusEntry(index);
+    }
+    function insertAfter(index) {
+        const entry = shown[index];
+        const level = entry?.level;
+        commit([...shown.slice(0, index + 1), { text: "", ...(level ? { level } : {}) }, ...shown.slice(index + 1)]);
+        focusEntry(index + 1);
+    }
+    function remove(index) {
+        commit(shown.filter((_, itemIndex) => itemIndex !== index));
+        focusEntry(Math.max(0, index - 1));
+    }
+    function stepState(index) {
+        const entry = shown[index];
+        if (!entry)
+            return;
+        const { state: _state, ...rest } = entry;
+        void _state;
+        const state = nextPhiBulletListEntryState(entry.state);
+        commit(shown.map((item, itemIndex) => (itemIndex === index ? (state === "neutral" ? rest : { ...rest, state }) : item)));
+    }
+    return (_jsx("div", { ref: listRef, style: { width: "100%", minWidth: 0 }, children: _jsx(PhiBulletListControl, { listStyle: listStyle, 
+            // Each entry is a borderless text field, whose first line stands at the field's height.
+            markerLineHeight: "var(--ant-control-height)", items: buildPhiBulletListTree(shown, (item, index) => (_jsx(PhiTextControl, { presentation: "textarea", value: item.text, readOnly: !onCommit, variant: "borderless", placeholder: `Item ${index + 1}`, autoSize: { minRows: 1, maxRows: 6 }, onChange: (value) => updateText(index, value ?? ""), onBlur: () => commit(shown), onKeyDown: (event) => {
+                    if (!onCommit)
+                        return;
+                    if (event.key === "Tab") {
+                        event.preventDefault();
+                        shiftLevel(index, event.shiftKey ? -1 : 1);
+                    }
+                    else if (event.key === "Enter" && !event.shiftKey && !event.nativeEvent.isComposing) {
+                        event.preventDefault();
+                        insertAfter(index);
+                    }
+                    else if (event.key === "Backspace" && item.text === "" && shown.length > 1) {
+                        event.preventDefault();
+                        remove(index);
+                    }
+                }, style: {
+                    paddingInline: 0,
+                    paddingBlock: 0,
+                    borderRadius: 0,
+                    borderWidth: 0,
+                    backgroundColor: "transparent",
+                    resize: "none",
+                    color: "inherit",
+                    ...fieldStyle,
+                }, 
+                /*
+                 * The text's own padding, stated: half of what the line leaves of the field's height, so the
+                 * first line's middle is the marker's (`markerLineHeight` above). That is the padding the
+                 * field had from Ant Design already; stated, the clear button can find the line too.
+                 */
+                inputStyle: { paddingBlock: "calc((var(--ant-control-height) - 1lh) / 2)" } })), states && onCommit ? (_entry, index) => stepState(index) : undefined) }) }));
+}

package/components/widgets/client/html-editor.js

@@ -388,7 +388,7 @@ export function PhiHtmlWidgetEditor({ blockId, html, fontFamily, fontSize, onCha
     const initialHtmlRef = useRef(normalizedHtml);
     const latestHtmlRef = useRef(normalizedHtml);
     const resolvedFontFamily = resolvePhiWidgetFontFamily(fontFamily, fonts, token);
-    const resolvedFontSize = resolvePhiWidgetFontSize(fontSize, token, "lg");
+    const resolvedFontSize = resolvePhiWidgetFontSize(fontSize, token, "base");
     const editable = onChange != null;
     useEffect(() => {
         latestHtmlRef.current = normalizedHtml;

package/components/widgets/client/shared/use-page-reference-options.d.ts

@@ -0,0 +1,17 @@
+import type { PhiCmsAreaKey } from "../../../../constants/cms-areas";
+import type { PhiTreeOption } from "../../../../types/tree";
+import type { PhiPageReferenceSelection } from "./phi-page-reference-picker";
+type PageReferenceOptions = PhiTreeOption<PhiPageReferenceSelection>[];
+/**
+ * The Pages of one Area a link may point at, as the tree `PhiLinkTargetControl` offers, for a surface
+ * that stands outside the Builder's own catalog: a Form's `link-target` field, the Theme's Brand.
+ *
+ * Answered by `/api/site/page-references` (`gateway/page-references-route.ts`), which merges the Area's
+ * Module Pages and Core's the way the Builder's picker does. `failed` is set when the list could not be
+ * read, so the surface can say so instead of showing an empty list that looks like a Site without Pages.
+ */
+export declare function usePhiPageReferenceOptions(area: PhiCmsAreaKey, logScope: string): {
+    options: PageReferenceOptions;
+    failed: boolean;
+};
+export {};