@phis/ui 0.4.2 → 0.4.4

package/components/cms/phi-cms-layout-renderer.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cloneElement, isValidElement } from "react";
+import { resolvePhiRenderFailureCode } from "../widgets/config/strict-config-reader";
 import { readPhiCmsRegionPageScope, resolvePhiCmsRegionPageScope } from "../../helpers/region-page-scope";
 import { isPhiCmsWidgetContentUnpublished } from "../../helpers/cms-content-binding";
 import { comparePhiCmsInstanceIds } from "../../types/cms-instance-id";
@@ -435,7 +436,7 @@ function renderContentWidget(widget, context) {
         }
         catch (error) {
             return renderCmsDiagnostic({
-                code: "render-failed",
+                code: resolvePhiRenderFailureCode(error),
                 kind: "widget",
                 type: widget.widgetType,
                 blockId: widget.id,
@@ -507,7 +508,7 @@ function withLayoutRenderKey(node, key) {
 /** What a Widget that threw while rendering on the server reports in its place. */
 export function buildPhiRenderFailureIssue(error, options) {
     return {
-        code: "render-failed",
+        code: resolvePhiRenderFailureCode(error),
         kind: options.kind,
         type: options.typeKey ?? "unknown",
         blockId: options.blockId,
@@ -703,7 +704,7 @@ function renderLayoutNode(node, context) {
         }
         catch (error) {
             return renderCmsDiagnostic({
-                code: "render-failed",
+                code: resolvePhiRenderFailureCode(error),
                 kind: "layout",
                 type: node.widgetType,
                 blockId: node.id,

package/components/cms/phi-cms-page-render-scope.d.ts

@@ -1,12 +1,11 @@
-import type { ReactNode } from "react";
+import { type ReactNode } from "react";
 import type { PhiBlockRuntime } from "../../types";
 import type { PhiCmsSiteBridge } from "../../types/cms-plugins";
 import type { loadPhiCmsRootRequest } from "../../server-helpers/cms-root";
 type PhiCmsResolvedRootRequest = NonNullable<Awaited<ReturnType<typeof loadPhiCmsRootRequest>>["resolvedRequest"]>;
 /**
- * What a Page and each of its Region slots work out before they render: the Module scope of the Area,
- * the tree filtered to what this viewer may see, the registry of what the tree needs, and the Page's
- * Controllers for the Regions in question.
+ * What a Page and each of its Region slots work out before they render: the shared part above, and the
+ * Page's Controllers for the Regions in question.
  *
  * The Page and the slot used to carry this as two copies, four blocks apart, and the slot's trailed the
  * Page's. One resolution, parameterised by the Regions it is for.
@@ -36,7 +35,7 @@ export declare function resolvePhiCmsPageRenderScope({ cmsBridge, resolvedReques
     };
     runtimeRegistry: import("../../types/cms-plugins").PhiCmsRuntimeRenderRegistry;
     pageControllerSettings: import("../../types").PhiRuntimeControllerSetting[];
-    controllerConfigOverlays: {
+    controllerConfigOverlays: readonly {
         address: `controller:${string}/${string}:${string}`;
         config: Record<string, unknown>;
     }[];

package/components/cms/phi-cms-page-render-scope.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cache } from "react";
 import { PhiRuntimeControllerServerHost } from "../runtime/runtime-controller-server-host";
 import { collectPhiRuntimeControllerConfigOverlays, materializePhiRuntimeControllerSettings, } from "../runtime/runtime-controller-materialization";
 import { PhiRuntimeControllerConfigOverlays } from "../runtime/runtime-controller-config-overlays";
@@ -9,15 +10,17 @@ import { buildPhiRuntimeModuleAccessRegistry, filterPhiCmsRenderableTreeForViewe
 import { resolvePhiCmsAreaRuntimeModuleScope, resolvePhiCmsTreeRuntimeRegistry, } from "./phi-cms-runtime-registry";
 import { resolvePhiPageTour } from "../../server-helpers/page-tour";
 import { PHI_PAGE_TOUR_CONFIG_KEY, PHI_PAGE_TOUR_CONTROLLER_FLAG, readPhiTourTargets, } from "../../types/tours";
-/**
- * What a Page and each of its Region slots work out before they render: the Module scope of the Area,
- * the tree filtered to what this viewer may see, the registry of what the tree needs, and the Page's
- * Controllers for the Regions in question.
+/*
+ * What a Page and every one of its Region slots share: the Area's Module scope, the Page's Tour, the tree
+ * filtered for this viewer, the registry of what that tree needs, and the Controller config the tree
+ * carries. None of it depends on the Region.
  *
- * The Page and the slot used to carry this as two copies, four blocks apart, and the slot's trailed the
- * Page's. One resolution, parameterised by the Regions it is for.
+ * The Page and its six slots render in parallel and each worked all of it out again -- up to seven
+ * filters of the same tree and seven registries per request (audit R9). The root request is memoized per
+ * request (`loadPhiCmsRootRequest`), so every slot holds the same object, and React's `cache` keyed by it
+ * and the bridge keeps this for exactly that request.
  */
-export async function resolvePhiCmsPageRenderScope({ cmsBridge, resolvedRequest, regionTypes, includeOverlays = false, }) {
+const resolvePhiCmsPageRenderBase = cache(async (cmsBridge, resolvedRequest) => {
     const runtimeModuleScope = await resolvePhiCmsAreaRuntimeModuleScope({
         cmsBridge,
         area: resolvedRequest.runtime.area,
@@ -47,20 +50,6 @@ export async function resolvePhiCmsPageRenderScope({ cmsBridge, resolvedRequest,
     });
     // What the Area runs for every Page: a Page setting for one of these configures it, it is not a second.
     const enclosingSettings = runtimeModuleScope.moduleSet.areaControllerSettings;
-    const pageControllerSettings = materializePhiRuntimeControllerSettings({
-        tree: filteredPageTree,
-        ownerMountScope: "page",
-        widgetPluginsByType: runtimeModuleScope.widgetDefinitionsByType,
-        enclosingSettings,
-        activeControllerTypes: [...runtimeModuleScope.moduleSet.controllerDescriptorsByType.keys()],
-        regionTypes,
-        ...(includeOverlays ? { includeOverlays: true } : {}),
-    });
-    const controllerDefinitionsByType = await resolvePhiRuntimeControllerDefinitions({
-        catalog: cmsBridge.runtimeModuleCatalog,
-        moduleSet: runtimeModuleScope.moduleSet,
-        settings: pageControllerSettings,
-    });
     const controllerConfigOverlays = collectPhiRuntimeControllerConfigOverlays({
         tree: filteredPageTree,
         ownerMountScope: "page",
@@ -83,8 +72,40 @@ export async function resolvePhiCmsPageRenderScope({ cmsBridge, resolvedRequest,
         runtimeModuleScope,
         filteredPageTree,
         runtimeRegistry,
+        enclosingSettings,
+        controllerConfigOverlays: controllerConfigOverlays,
+    };
+});
+/**
+ * What a Page and each of its Region slots work out before they render: the shared part above, and the
+ * Page's Controllers for the Regions in question.
+ *
+ * The Page and the slot used to carry this as two copies, four blocks apart, and the slot's trailed the
+ * Page's. One resolution, parameterised by the Regions it is for.
+ */
+export async function resolvePhiCmsPageRenderScope({ cmsBridge, resolvedRequest, regionTypes, includeOverlays = false, }) {
+    const base = await resolvePhiCmsPageRenderBase(cmsBridge, resolvedRequest);
+    const { runtimeModuleScope, filteredPageTree } = base;
+    const pageControllerSettings = materializePhiRuntimeControllerSettings({
+        tree: filteredPageTree,
+        ownerMountScope: "page",
+        widgetPluginsByType: runtimeModuleScope.widgetDefinitionsByType,
+        enclosingSettings: base.enclosingSettings,
+        activeControllerTypes: [...runtimeModuleScope.moduleSet.controllerDescriptorsByType.keys()],
+        regionTypes,
+        ...(includeOverlays ? { includeOverlays: true } : {}),
+    });
+    const controllerDefinitionsByType = await resolvePhiRuntimeControllerDefinitions({
+        catalog: cmsBridge.runtimeModuleCatalog,
+        moduleSet: runtimeModuleScope.moduleSet,
+        settings: pageControllerSettings,
+    });
+    return {
+        runtimeModuleScope,
+        filteredPageTree,
+        runtimeRegistry: base.runtimeRegistry,
         pageControllerSettings,
-        controllerConfigOverlays,
+        controllerConfigOverlays: base.controllerConfigOverlays,
         controllerDefinitionsByType,
     };
 }

package/components/cms/phi-cms-render-diagnostic-client.js

@@ -13,6 +13,8 @@ function buildIssueTitle(issue) {
         return `${formatKind(issue.kind)} visibility unresolved`;
     if (issue.code === "missing-node")
         return `${formatKind(issue.kind)} root missing`;
+    if (issue.code === "invalid-config")
+        return `${formatKind(issue.kind)} settings invalid`;
     return `${formatKind(issue.kind)} not renderable`;
 }
 function buildIssueDescription(issue) {
@@ -24,9 +26,11 @@ function buildIssueDescription(issue) {
             ? "A Module its condition reads could not be asked this render."
             : issue.code === "missing-node"
                 ? "The stored tree names a node it does not contain."
-                : issue.moduleId
-                    ? `Module: ${issue.moduleId}.`
-                    : "The required renderer is unavailable.";
+                : issue.code === "invalid-config"
+                    ? "Correct the field in the Inspector; on the live page this block is left out until then."
+                    : issue.moduleId
+                        ? `Module: ${issue.moduleId}.`
+                        : "The required renderer is unavailable.";
     return `${issue.type}. ${moduleDescription}${issue.detail ? ` ${issue.detail}` : ""}`;
 }
 function buildIssueKey(issue) {

package/components/cms/phi-cms-render-error-boundary.js

@@ -2,6 +2,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Component } from "react";
 import { PhiCmsRenderDiagnostic } from "./phi-cms-render-diagnostic";
+import { resolvePhiRenderFailureCode } from "../widgets/config/strict-config-reader";
 export class PhiCmsRenderErrorBoundary extends Component {
     state = {
         error: null,
@@ -20,7 +21,7 @@ export class PhiCmsRenderErrorBoundary extends Component {
     render() {
         if (this.state.error) {
             return _jsx(PhiCmsRenderDiagnostic, { issue: {
-                    code: "render-failed",
+                    code: resolvePhiRenderFailureCode(this.state.error),
                     kind: this.props.kind,
                     type: this.props.typeKey ?? "unknown",
                     blockId: this.props.blockId,

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

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

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

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

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

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

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

@@ -1,4 +1,4 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { PhiIcon } from "../shell/phi-icon";
 import { phiSurfaceDrawsChrome, resolvePhiSurfaceStyle } from "../../helpers/surface-style";
 import { PHI_COLOR, PHI_RADIUS, PHI_SPACE } from "../../theme/antd-css-var-contract";
@@ -7,6 +7,21 @@ import { PhiBulletListFlag, resolvePhiBulletListLevel, resolvePhiBulletListStyle
 import { hasPhiFlag } from "../../helpers/flags";
 const PHI_BULLET_LIST_MARKER_SIZE = PHI_SPACE.xs;
 const PHI_BULLET_LIST_ICON_SIZE = 14;
+/*
+ * An entry's state stands in place of the level's marker: a tick for what is included, a dash for what is
+ * not. Neither is the list's colour: included is the Theme's success, excluded the tertiary text, so a
+ * plan's list reads the same whatever marker its neutral entries take.
+ */
+function renderStateMarker(state) {
+    switch (state) {
+        case "included":
+            return _jsx(PhiIcon, { name: "antd:check-outlined", size: PHI_BULLET_LIST_ICON_SIZE, style: { color: PHI_COLOR.success } });
+        case "excluded":
+            return _jsx(PhiIcon, { name: "antd:minus-outlined", size: PHI_BULLET_LIST_ICON_SIZE, style: { color: PHI_COLOR.textTertiary } });
+        default:
+            return null;
+    }
+}
 function renderMarker(marker, icon, number) {
     switch (marker) {
         case "none":
@@ -51,7 +66,7 @@ function renderMarker(marker, icon, number) {
  * blocks. An entry's children are the list one level below it, drawn inside the entry under its content,
  * so they are indented by the marker and keep to the entry's box.
  */
-export function PhiBulletListControl({ items, listStyle = resolvePhiBulletListStyle(null), depth = 1, ordered = false, start = 1, markerLineHeight = "1lh", }) {
+export function PhiBulletListControl({ items, listStyle = resolvePhiBulletListStyle(null), depth = 1, ordered = false, start = 1, markerLineHeight = "1lh", blockSpacing, }) {
     const level = resolvePhiBulletListLevel(depth);
     const marker = ordered ? "number" : listStyle.markers[level];
     const gap = resolvePhiSpacingScaleValue(listStyle.gap);
@@ -60,14 +75,29 @@ export function PhiBulletListControl({ items, listStyle = resolvePhiBulletListSt
     // A line between entries that have edges of their own would only double them.
     const divided = !boxed && hasPhiFlag(listStyle.flags, PhiBulletListFlag.Dividers);
     const ListTag = marker === "number" ? "ol" : "ul";
-    const listCss = { display: "grid", gap, margin: 0, padding: 0, listStyle: "none", width: "100%", minWidth: 0 };
+    const listCss = { display: "grid", gap, margin: 0, padding: 0, listStyle: "none", width: "100%", minWidth: 0, ...blockSpacing };
     return (_jsx(ListTag, { style: listCss, ...(ListTag === "ol" && start !== 1 ? { start } : {}), children: items.map((item, index) => (_jsxs("li", { className: surface.className, style: {
                 display: "flex",
                 alignItems: "flex-start",
-                gap: PHI_SPACE.sm,
+                // A marker belongs to its words: one small step between them, not the space between blocks.
+                gap: PHI_SPACE.xs,
                 minWidth: 0,
                 ...surface.style,
                 ...(boxed ? { padding: `${PHI_SPACE.sm} ${PHI_SPACE.md}` } : {}),
                 ...(divided && index > 0 ? { borderTop: `1px solid ${PHI_COLOR.borderSecondary}`, paddingTop: gap } : {}),
-            }, children: [marker === "none" ? null : (_jsx("span", { "aria-hidden": "true", style: { display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0, height: markerLineHeight }, children: renderMarker(marker, listStyle.icon, start + index) })), _jsxs("div", { style: { display: "grid", gap, flex: 1, minWidth: 0 }, children: [item.content, item.children?.length ? (_jsx(PhiBulletListControl, { items: item.children, listStyle: listStyle, depth: depth + 1, markerLineHeight: markerLineHeight })) : null] })] }, index))) }));
+            }, children: [(() => {
+                    const stated = renderStateMarker(item.state);
+                    /* An editor's marker is a button, so a list whose marker is `none` still offers one. */
+                    const drawn = stated ?? renderMarker(marker === "none" && item.onMarkerClick ? "dot" : marker, listStyle.icon, start + index);
+                    if (drawn == null)
+                        return null;
+                    const markerStyle = {
+                        display: "inline-flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        flexShrink: 0,
+                        height: markerLineHeight,
+                    };
+                    return item.onMarkerClick ? (_jsx("button", { type: "button", className: "phi-bullet-list__marker-button", "aria-label": `State: ${item.state ?? "neutral"}`, onClick: item.onMarkerClick, style: { ...markerStyle, padding: 0, border: 0, background: "none", cursor: "pointer", color: "inherit" }, children: drawn })) : (_jsx("span", { "aria-hidden": "true", style: markerStyle, children: drawn }));
+                })(), _jsxs("div", { style: { display: "grid", gap, flex: 1, minWidth: 0, ...(item.state === "excluded" ? { color: PHI_COLOR.textTertiary } : {}) }, children: [item.content, item.children?.length ? (_jsx(PhiBulletListControl, { items: item.children, listStyle: listStyle, depth: depth + 1, markerLineHeight: markerLineHeight })) : null] })] }, index))) }));
 }

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,38 @@
+import type { CSSProperties, MouseEventHandler, ReactNode } from "react";
+export type PhiRibbonControlProps = {
+    children: ReactNode;
+    /** The band's ground; absent, the Theme's primary. Its words are the light text on any ground. */
+    color?: string;
+    /**
+     * Where the band stands: `corner` flush with the box's top and end edge, its top end corner the box's
+     * own; `edge` a small padding down the end edge. Either way it floats: nothing in the box moves for it.
+     */
+    placement?: "corner" | "edge";
+    style?: CSSProperties;
+    /**
+     * The band's whole words, shown on hover when its ellipsis cut them short (`PhiTruncatedHoverText`).
+     * A band with a hover text takes the pointer, so it needs `onClick` to hand a click on to what lies
+     * under it.
+     */
+    fullText?: string;
+    /** What a click on the band does, for a band that takes the pointer: the box's own click, passed on. */
+    onClick?: MouseEventHandler<HTMLSpanElement>;
+};
+/**
+ * A band of words at the end edge of a box: "Popular", "New", "-20 %".
+ *
+ * Ant Design draws this as `Badge.Ribbon`, with a fold that hangs past the box's edge. Not that one: it
+ * wraps the box in an element of its own, and its fold needs the box not to clip -- a card clips, so its
+ * picture keeps its corners. This band stands inside the box and needs nothing from it but a position
+ * to stand against. It is drawn on the server as well, without hooks.
+ *
+ * It floats and takes no room, so boxes side by side in a row start their content on one line whether
+ * they carry a band or not. A band on a line of its own pushed its box's words down; squeezed into the
+ * box's top inset it was too thin to read. In the corner it stands over the inset and a little into the
+ * first line's end, which a long eyebrow in a narrow box can reach.
+ *
+ * It sits above what the box draws, the highlight's ring included. Without a hover text it takes no
+ * clicks, so a card that is a link stays one under its band; with one it has to take the pointer to be
+ * pointed at, and hands a click on through `onClick`.
+ */
+export declare function PhiRibbonControl({ children, color, placement, style, fullText, onClick }: PhiRibbonControlProps): import("react").JSX.Element;

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

@@ -0,0 +1,57 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PHI_COLOR, PHI_FONT_SIZE, PHI_SPACE } from "../../theme/antd-css-var-contract";
+import { PhiTruncatedHoverText } from "./phi-truncated-hover-text";
+/**
+ * A band of words at the end edge of a box: "Popular", "New", "-20 %".
+ *
+ * Ant Design draws this as `Badge.Ribbon`, with a fold that hangs past the box's edge. Not that one: it
+ * wraps the box in an element of its own, and its fold needs the box not to clip -- a card clips, so its
+ * picture keeps its corners. This band stands inside the box and needs nothing from it but a position
+ * to stand against. It is drawn on the server as well, without hooks.
+ *
+ * It floats and takes no room, so boxes side by side in a row start their content on one line whether
+ * they carry a band or not. A band on a line of its own pushed its box's words down; squeezed into the
+ * box's top inset it was too thin to read. In the corner it stands over the inset and a little into the
+ * first line's end, which a long eyebrow in a narrow box can reach.
+ *
+ * It sits above what the box draws, the highlight's ring included. Without a hover text it takes no
+ * clicks, so a card that is a link stays one under its band; with one it has to take the pointer to be
+ * pointed at, and hands a click on through `onClick`.
+ */
+export function PhiRibbonControl({ children, color, placement = "edge", style, fullText, onClick }) {
+    const radius = "var(--phi-control-radius-sm)";
+    const position = placement === "corner"
+        ? {
+            top: 0,
+            paddingBlock: PHI_SPACE.xxs,
+            // The top end corner is the box's own, which clips it; only the corner inside the box is rounded.
+            borderEndStartRadius: radius,
+        }
+        : {
+            top: PHI_SPACE.sm,
+            paddingBlock: PHI_SPACE.xxs,
+            borderStartStartRadius: radius,
+            borderEndStartRadius: radius,
+        };
+    const band = (_jsx("span", { className: "phi-ribbon-control", style: {
+            position: "absolute",
+            insetInlineEnd: 0,
+            zIndex: 4,
+            maxWidth: "70%",
+            boxSizing: "border-box",
+            paddingInline: PHI_SPACE.sm,
+            background: color ?? PHI_COLOR.primary,
+            color: PHI_COLOR.textLightSolid,
+            fontSize: PHI_FONT_SIZE.sm,
+            fontWeight: 600,
+            lineHeight: 2,
+            whiteSpace: "nowrap",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            pointerEvents: fullText ? "auto" : "none",
+            ...(fullText && onClick ? { cursor: "pointer" } : {}),
+            ...position,
+            ...style,
+        }, ...(onClick ? { onClick } : {}), children: children }));
+    return fullText ? _jsx(PhiTruncatedHoverText, { title: fullText, children: band }) : band;
+}

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

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

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

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