@phis/ui 0.2.1 → 0.4.0

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

@@ -1,9 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forbidden, notFound, redirect, unauthorized } from "next/navigation";
-import { PhiCmsRegionType } from "../../constants/phi-cms";
+import { PhiCmsFlags, PhiCmsRegionType } from "../../constants/phi-cms";
+import { hasPhiFlag } from "../../helpers/flags";
+import { hasPhiConfigFlag } from "../../helpers/flags";
 import { PhiCmsShell } from "../shell/phi-cms-shell";
-import { resolvePhiShellChromePaneStickyTop, } from "../root/phi-shell-chrome-overlay";
+import { PHI_SHELL_HEADER_TOP_EXTENT_PROPERTY, PHI_SHELL_HEADER_TOP_STACK_PROPERTY, readPhiShellChromePanePixels, resolvePhiShellHeaderPaneStickyTop, } from "../root/phi-shell-chrome-overlay";
 import { PhiCmsLayoutRenderer, PhiCmsOverlayRenderer } from "./phi-cms-layout-renderer";
+import { phiCmsRegionPageScopeIncludes, readPhiCmsRegionPageScope, readPhiCmsRegionReveal, resolvePhiCmsRegionPageScope, } from "../../helpers/region-page-scope";
 import { hasRenderableRegionRoot } from "./phi-cms-region-helpers";
 import { loadPhiCmsAreaRenderScope } from "./phi-cms-area-render-scope";
 import { hasPhiCmsRevisionPreview } from "../../server-helpers/cms-root";
@@ -27,10 +30,11 @@ function readPhiShellChromePaneBand(config) {
     if (config == null || typeof config !== "object") {
         return null;
     }
-    const { sticky, offsetTop, size } = config;
+    const { flags, offsetTop, size } = config;
     const height = size?.height;
     return {
-        sticky: sticky === true,
+        // A bit in the Region's `flags` since S6, as every other reader of it has it.
+        sticky: hasPhiFlag(typeof flags === "number" ? flags : 0, PhiCmsFlags.Sticky),
         offsetTop: typeof offsetTop === "string" || typeof offsetTop === "number" ? offsetTop : null,
         height: typeof height === "string" || typeof height === "number" ? height : null,
     };
@@ -117,7 +121,8 @@ export async function PhiCmsAreaBoundary({ root, cmsBridge, children, path, page
              * Remembering it here rather than in the Page is deliberate: this Layout is what a client
              * navigation re-runs, and the Page below it may never render once this forwards.
              */
-            if (request.pathname?.replace(/\/+$/u, "").toLowerCase() === `/${resolvedRoute.area}`) {
+            if (!isRevisionPreview &&
+                request.pathname?.replace(/\/+$/u, "").toLowerCase() === `/${resolvedRoute.area}`) {
                 rememberPhiAreaRootDoor(resolvedRoute.area, pageRedirect.href);
             }
             /*
@@ -140,21 +145,27 @@ export async function PhiCmsAreaBoundary({ root, cmsBridge, children, path, page
      * Any request in this Area teaches the proxy where the Area's root leads, so the first client
      * navigation into it does not have to be the one that pays (server-helpers/area-root-door-warmup.ts).
      * It answers from data this render already loaded and does nothing once a door is known.
+     *
+     * Not from a revision preview, here or above: the Area it loaded is then a draft or a reviewed
+     * revision, and a door learned from it would forward every visitor for the next half hour to where
+     * an unpublished Area points.
      */
-    await warmPhiAreaRootDoor({
-        area: resolvedRoute.area,
-        config: rootScope.resolvedAreaPreset?.preset.config,
-        runtime,
-        catalog: resolvePhiCmsDescriptorCatalog(cmsBridge.runtimeModuleCatalog),
-        activeModuleIds: runtimeModuleScope.moduleSet.activeModuleIds,
-    });
+    if (!isRevisionPreview) {
+        await warmPhiAreaRootDoor({
+            area: resolvedRoute.area,
+            config: rootScope.resolvedAreaPreset?.preset.config,
+            runtime,
+            catalog: resolvePhiCmsDescriptorCatalog(cmsBridge.runtimeModuleCatalog),
+            activeModuleIds: runtimeModuleScope.moduleSet.activeModuleIds,
+        });
+    }
     return (_jsx(PhiSignalRuntimePartitionProvider, { id: `area:${runtime.site.key}:${runtime.area}`, kind: "area", context: { siteKey: runtime.site.key, area: runtime.area }, children: _jsx(PhiRuntimeModuleProvider, { moduleIds: [...runtimeModuleScope.moduleSet.activeModuleIds], widgetTypes: [...runtimeModuleScope.moduleSet.widgetDefinitionsByType.keys()], layoutTypes: [...runtimeModuleScope.moduleSet.layoutDefinitionsByType.keys()], dataProviderDescriptors: runtime.area === "builder"
                 ? [...runtimeModuleScope.moduleSet.dataProviderDescriptorsByKey.values()]
                 : [], calendarAdapterDescriptors: [
                 ...runtimeModuleScope.moduleSet.calendarAdapterDescriptorsByKey.values(),
             ], videoProviderDescriptors: [
                 ...runtimeModuleScope.moduleSet.videoProviderDescriptorsByKey.values(),
-            ], children: _jsxs(PhiRuntimeModuleDataProviderHost, { providerKeys: [...scope.runtimeRegistry.dataProviderDescriptorsByKey.keys()], children: [scope.registeredControllerSettings && scope.registeredControllerSettings.length > 0 ? (_jsx(PhiRuntimeControllerServerHost, { controllers: scope.registeredControllerSettings, runtime: runtime, registry: scope.controllerDefinitionsByType, controllerModuleIdsByType: runtimeModuleScope.moduleSet.ownerModuleIdByControllerType, runtimeModuleCatalog: scope.runtimeRegistry.runtimeModuleCatalog })) : null, children, filteredLayoutTree ? (_jsx(PhiCmsOverlayRenderer, { tree: filteredLayoutTree, runtime: runtime, registry: scope.runtimeRegistry, signalScope: "area", deferredOrigin: { area: runtime.area, root, path: path ?? pagePath ?? null } })) : null] }) }) }));
+            ], children: _jsxs(PhiRuntimeModuleDataProviderHost, { providerKeys: [...scope.runtimeRegistry.dataProviderDescriptorsByKey.keys()], children: [scope.registeredControllerSettings && scope.registeredControllerSettings.length > 0 ? (_jsx(PhiRuntimeControllerServerHost, { controllers: scope.registeredControllerSettings, runtime: runtime, registry: scope.controllerDefinitionsByType, controllerModuleIdsByType: runtimeModuleScope.moduleSet.ownerModuleIdByControllerType, runtimeModuleCatalog: scope.runtimeRegistry.runtimeModuleCatalog, serverCapabilities: scope.runtimeRegistry.serverCapabilities })) : null, children, filteredLayoutTree ? (_jsx(PhiCmsOverlayRenderer, { tree: filteredLayoutTree, runtime: runtime, registry: scope.runtimeRegistry, signalScope: "area", deferredOrigin: { area: runtime.area, root, path: path ?? pagePath ?? null } })) : null] }) }) }));
 }
 /**
  * The Area-owned Regions around a Page, or nothing but the grid they share.
@@ -164,7 +175,8 @@ export async function PhiCmsAreaBoundary({ root, cmsBridge, children, path, page
  * still render, because a landing page is a page like any other.
  *
  * It refuses nothing: a gated Area throws inside the boundary above, which answers 401 or 403 while
- * this returns the Page bare rather than racing it to a different error.
+ * this returns the Page bare rather than racing it to a different error. A missing page is returned
+ * bare the same way, while the boundary answers 404.
  */
 export async function PhiCmsAreaShell({ root, cmsBridge, children, chrome = "shell", path, pagePath, headerBottom, hero, siderRight, footerTop, drawer, }) {
     const slots = { headerBottom, hero, siderRight, footerTop, drawer };
@@ -182,6 +194,16 @@ export async function PhiCmsAreaShell({ root, cmsBridge, children, chrome = "she
         throw error;
     }
     const { runtime, filteredLayoutTree, runtimeRegistry } = scope;
+    /*
+     * A page that does not exist gets no chrome either. Next renders this Layout beside the boundary
+     * above rather than after it, so by the time the boundary answers 404 the Header and Footer would
+     * already have asked for their Navigation and the account Widget for its manifest -- three calls to
+     * Core for a response that never shows them. The resolution is the boundary's own, from the request
+     * cache, so the two cannot disagree about it.
+     */
+    if (!path && !scope.rootScope.resolvedRequest) {
+        return _jsx(PhiCmsShell, { content: children, ...slots });
+    }
     const headerTopRegion = filteredLayoutTree ? findRegion(filteredLayoutTree, PhiCmsRegionType.HeaderTop) : null;
     const headerMainRegion = filteredLayoutTree ? findRegion(filteredLayoutTree, PhiCmsRegionType.HeaderMain) : null;
     const siderLeftRegion = filteredLayoutTree ? findRegion(filteredLayoutTree, PhiCmsRegionType.SiderLeft) : null;
@@ -207,11 +229,37 @@ export async function PhiCmsAreaShell({ root, cmsBridge, children, chrome = "she
      * Area resolves those two; the Page-owned `header_bottom` never arrives here as a config, so a Header
      * whose only sticky band is that one resolves to no sticking rather than to a guess.
      */
-    const headerPaneStickyTop = resolvePhiShellChromePaneStickyTop([
-        hasRenderableHeaderTop ? readPhiShellChromePaneBand(headerTopRegion?.config) : null,
-        hasRenderableHeaderMain ? readPhiShellChromePaneBand(headerMainRegion?.config) : null,
-    ]);
-    return (_jsx(PhiCmsShell, { content: children, headerPaneStickyTop: headerPaneStickyTop, headerTop: hasRenderableHeaderTop ? (_jsx(PhiCmsLayoutRenderer, { tree: filteredLayoutTree, runtime: runtime, regionClassName: "phi-shell-region header_top", regionTypes: [PhiCmsRegionType.HeaderTop], registry: runtimeRegistry })) : undefined, headerMain: hasRenderableHeaderMain ? (_jsx(PhiCmsLayoutRenderer, { tree: filteredLayoutTree, runtime: runtime, regionClassName: "phi-shell-region header_main", regionTypes: [PhiCmsRegionType.HeaderMain], registry: runtimeRegistry })) : undefined, headerBottom: headerBottom, hero: hero, siderLeft: hasRenderableSiderLeft ? (_jsx(PhiCmsLayoutRenderer, { tree: filteredLayoutTree, runtime: runtime, regionClassName: "sider_left", regionTypes: [PhiCmsRegionType.SiderLeft], stackGap: 0, registry: runtimeRegistry })) : undefined, siderRight: siderRight, siderLeftFullHeight: siderLeftRegion?.config?.fullHeight === true && hasRenderableSiderLeft, footerTop: footerTop, drawer: drawer, footerMain: hasRenderableFooterMain ? (_jsx(PhiCmsLayoutRenderer, { tree: filteredLayoutTree, runtime: runtime, regionClassName: "phi-shell-region footer_main", regionTypes: [PhiCmsRegionType.Footer], registry: runtimeRegistry })) : undefined, footerBottom: hasRenderableFooterBottom ? (_jsx(PhiCmsLayoutRenderer, { tree: filteredLayoutTree, runtime: runtime, regionClassName: "phi-shell-region footer_bottom", regionTypes: [PhiCmsRegionType.FooterBottom], registry: runtimeRegistry })) : undefined }));
+    /*
+     * A `header_top` with a Page scope or a reveal is decided in the browser, and tells the Shell the room
+     * it holds (SHELL.md "Region visibility per Page"). The server answers for the Page it renders, so the
+     * first paint is already right; the browser keeps it right after every link and every scroll.
+     */
+    const storedHeaderTopScope = hasRenderableHeaderTop
+        ? readPhiCmsRegionPageScope("header_top", headerTopRegion?.config)
+        : null;
+    // Resolved in the render's own batch of link targets, which the Region renderer asks for too.
+    const headerTopScope = storedHeaderTopScope == null ? null : resolvePhiCmsRegionPageScope(storedHeaderTopScope, 
+    // Imported here, as the Layout renderer imports it: the pass is `server-only`, this module is not.
+    await (await import("../../server-helpers/cms-link-targets")).resolvePhiCmsTreeLinkTargets(filteredLayoutTree, runtime), runtime.site.availableLocales.map((option) => option.code));
+    const headerTopReveal = hasRenderableHeaderTop ? readPhiCmsRegionReveal("header_top", headerTopRegion?.config) : "always";
+    const headerTopBehaviour = headerTopScope != null || headerTopReveal !== "always"
+        ? { scoped: headerTopScope != null, reveal: headerTopReveal }
+        : null;
+    const headerTopBand = hasRenderableHeaderTop ? readPhiShellChromePaneBand(headerTopRegion?.config) : null;
+    const headerTopExtent = headerTopBehaviour != null &&
+        headerTopReveal !== "hover" &&
+        phiCmsRegionPageScopeIncludes(headerTopScope, runtime.page?.path ?? "/")
+        ? readPhiShellChromePanePixels(headerTopBand?.height) ?? 0
+        : 0;
+    const headerTopRoom = {
+        extent: headerTopExtent,
+        stack: headerTopReveal === "scroll-up" ? headerTopExtent : 0,
+    };
+    const headerPaneStickyTop = resolvePhiShellHeaderPaneStickyTop(headerTopBand, hasRenderableHeaderMain ? readPhiShellChromePaneBand(headerMainRegion?.config) : null, headerTopBehaviour, headerTopRoom);
+    return (_jsx(PhiCmsShell, { content: children, headerPaneStickyTop: headerPaneStickyTop, headerTopRoom: headerTopBehaviour == null ? undefined : {
+            [PHI_SHELL_HEADER_TOP_EXTENT_PROPERTY]: `${headerTopRoom.extent}px`,
+            [PHI_SHELL_HEADER_TOP_STACK_PROPERTY]: `${headerTopRoom.stack}px`,
+        }, headerTop: hasRenderableHeaderTop ? (_jsx(PhiCmsLayoutRenderer, { tree: filteredLayoutTree, runtime: runtime, regionClassName: "phi-shell-region header_top", regionTypes: [PhiCmsRegionType.HeaderTop], registry: runtimeRegistry })) : undefined, headerMain: hasRenderableHeaderMain ? (_jsx(PhiCmsLayoutRenderer, { tree: filteredLayoutTree, runtime: runtime, regionClassName: "phi-shell-region header_main", regionTypes: [PhiCmsRegionType.HeaderMain], registry: runtimeRegistry })) : undefined, headerBottom: headerBottom, hero: hero, siderLeft: hasRenderableSiderLeft ? (_jsx(PhiCmsLayoutRenderer, { tree: filteredLayoutTree, runtime: runtime, regionClassName: "sider_left", regionTypes: [PhiCmsRegionType.SiderLeft], stackGap: 0, registry: runtimeRegistry })) : undefined, siderRight: siderRight, siderLeftFullHeight: hasPhiConfigFlag(siderLeftRegion?.config, PhiCmsFlags.FullHeight) && hasRenderableSiderLeft, footerTop: footerTop, drawer: drawer, footerMain: hasRenderableFooterMain ? (_jsx(PhiCmsLayoutRenderer, { tree: filteredLayoutTree, runtime: runtime, regionClassName: "phi-shell-region footer_main", regionTypes: [PhiCmsRegionType.Footer], registry: runtimeRegistry })) : undefined, footerBottom: hasRenderableFooterBottom ? (_jsx(PhiCmsLayoutRenderer, { tree: filteredLayoutTree, runtime: runtime, regionClassName: "phi-shell-region footer_bottom", regionTypes: [PhiCmsRegionType.FooterBottom], registry: runtimeRegistry })) : undefined }));
 }
 /**
  * Boundary and Shell in one component, for a caller that is not a pair of Layouts.

package/components/cms/phi-cms-root-page.js

@@ -8,13 +8,8 @@ import { resolvePhiUnauthenticatedLoginHref, } from "../../server-helpers/public
 import { resolvePhiCmsPageRedirect, performPhiCmsPageRedirect } from "./phi-cms-page-redirect";
 import { PhiCmsPageMetaSignalEmitter } from "./phi-cms-page-meta-signal-emitter";
 import { isPhiCmsGatewayAuthError } from "../../gateway/errors";
-import { PhiRuntimeControllerServerHost } from "../runtime/runtime-controller-server-host";
-import { materializePhiRuntimeControllerSettings } from "../runtime/runtime-controller-materialization";
 import { PhiCmsRegionType } from "../../constants/phi-cms";
-import { resolvePhiCmsAreaRuntimeModuleScope, resolvePhiCmsTreeRuntimeRegistry, } from "./phi-cms-runtime-registry";
-import { PhiRuntimeModuleDataProviderHost } from "../runtime/runtime-module-data-provider-host";
-import { resolvePhiRuntimeControllerDefinitions } from "../../plugins/runtime-modules/resolver";
-import { buildPhiRuntimeModuleAccessRegistry, filterPhiCmsRenderableTreeForViewer, } from "../../helpers/cms-access-policy";
+import { PhiCmsPageRuntimeHosts, resolvePhiCmsPageRenderScope } from "./phi-cms-page-render-scope";
 export async function PhiCmsRootPage({ root, path, cmsBridge, }) {
     let rootRequest;
     try {
@@ -77,34 +72,11 @@ export async function PhiCmsRootPage({ root, path, cmsBridge, }) {
         serverCapabilities: resolvedRequest.serverCapabilities,
         isRevisionPreview,
     });
-    const runtimeModuleScope = await resolvePhiCmsAreaRuntimeModuleScope({
+    const scope = await resolvePhiCmsPageRenderScope({
         cmsBridge,
-        area: resolvedRequest.runtime.area,
-        areaPreset: resolvedRequest.areaPreset,
-        serverCapabilities: resolvedRequest.serverCapabilities,
-    });
-    const filteredPageTree = filterPhiCmsRenderableTreeForViewer({
-        tree: resolvedRequest.page,
-        viewer: resolvedRequest.runtime.viewer,
-        registry: buildPhiRuntimeModuleAccessRegistry(runtimeModuleScope.moduleSet),
-    });
-    const runtimeRegistry = await resolvePhiCmsTreeRuntimeRegistry({
-        moduleScope: runtimeModuleScope,
-        trees: [filteredPageTree],
-    });
-    const pageControllerSettings = materializePhiRuntimeControllerSettings({
-        tree: filteredPageTree,
-        ownerMountScope: "page",
-        widgetPluginsByType: runtimeModuleScope.widgetDefinitionsByType,
-        baseSettings: resolvedRequest.page.controllerSettings ?? null,
-        activeControllerTypes: [...runtimeModuleScope.moduleSet.controllerDescriptorsByType.keys()],
+        resolvedRequest,
         regionTypes: [PhiCmsRegionType.Content],
         includeOverlays: true,
     });
-    const controllerDefinitionsByType = await resolvePhiRuntimeControllerDefinitions({
-        catalog: cmsBridge.runtimeModuleCatalog,
-        moduleSet: runtimeModuleScope.moduleSet,
-        settings: pageControllerSettings,
-    });
-    return (_jsxs(PhiRuntimeModuleDataProviderHost, { providerKeys: [...runtimeRegistry.dataProviderDescriptorsByKey.keys()], children: [pageControllerSettings.length > 0 ? (_jsx(PhiRuntimeControllerServerHost, { controllers: pageControllerSettings, runtime: resolvedRequest.runtime, registry: controllerDefinitionsByType, controllerModuleIdsByType: runtimeModuleScope.moduleSet.ownerModuleIdByControllerType, runtimeModuleCatalog: runtimeRegistry.runtimeModuleCatalog })) : null, _jsx(PhiCmsPageMetaSignalEmitter, { area: resolvedRequest.runtime.area, pagePath: resolvedRequest.runtime.page?.path ?? null, pageType: resolvedRequest.runtime.page?.pageType ?? null, title: resolvedRequest.runtime.page?.title ?? null, description: resolvedRequest.runtime.page?.description ?? null }), _jsx(PhiCmsPageRenderer, { tree: filteredPageTree, runtime: resolvedRequest.runtime, registry: runtimeRegistry })] }));
+    return (_jsxs(PhiCmsPageRuntimeHosts, { scope: scope, runtime: resolvedRequest.runtime, children: [_jsx(PhiCmsPageMetaSignalEmitter, { area: resolvedRequest.runtime.area, pagePath: resolvedRequest.runtime.page?.path ?? null, pageType: resolvedRequest.runtime.page?.pageType ?? null, title: resolvedRequest.runtime.page?.title ?? null, description: resolvedRequest.runtime.page?.description ?? null }), _jsx(PhiCmsPageRenderer, { tree: scope.filteredPageTree, runtime: resolvedRequest.runtime, registry: scope.runtimeRegistry })] }));
 }

package/components/cms/phi-cms-root-slot-page.js

@@ -1,16 +1,11 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { PhiCmsRegionType } from "../../constants/phi-cms";
 import { PhiCmsLayoutRenderer } from "./phi-cms-layout-renderer";
 import { hasRenderableRegionRoot } from "./phi-cms-region-helpers";
 import { loadPhiCmsRootRequest } from "../../server-helpers/cms-root";
 import { resolvePhiCmsPageRedirect } from "./phi-cms-page-redirect";
 import { isPhiCmsGatewayAuthError } from "../../gateway/errors";
-import { PhiRuntimeControllerServerHost } from "../runtime/runtime-controller-server-host";
-import { materializePhiRuntimeControllerSettings } from "../runtime/runtime-controller-materialization";
-import { resolvePhiCmsAreaRuntimeModuleScope, resolvePhiCmsTreeRuntimeRegistry, } from "./phi-cms-runtime-registry";
-import { PhiRuntimeModuleDataProviderHost } from "../runtime/runtime-module-data-provider-host";
-import { resolvePhiRuntimeControllerDefinitions } from "../../plugins/runtime-modules/resolver";
-import { buildPhiRuntimeModuleAccessRegistry, filterPhiCmsRenderableTreeForViewer, } from "../../helpers/cms-access-policy";
+import { PhiCmsPageRuntimeHosts, resolvePhiCmsPageRenderScope } from "./phi-cms-page-render-scope";
 function findRenderableRegion(tree, regionType) {
     return tree.regions.find((region) => region.regionType === regionType);
 }
@@ -76,38 +71,11 @@ export async function PhiCmsRootSlotPage({ root, path, cmsBridge, regionType, })
     if (!region || !hasRenderableRegionRoot(resolvedRequest.page, region.rootLayoutNodeId)) {
         return null;
     }
-    const runtimeModuleScope = await resolvePhiCmsAreaRuntimeModuleScope({
-        cmsBridge,
-        area: resolvedRequest.runtime.area,
-        areaPreset: resolvedRequest.areaPreset,
-        serverCapabilities: resolvedRequest.serverCapabilities,
-    });
-    const filteredPageTree = filterPhiCmsRenderableTreeForViewer({
-        tree: resolvedRequest.page,
-        viewer: resolvedRequest.runtime.viewer,
-        registry: buildPhiRuntimeModuleAccessRegistry(runtimeModuleScope.moduleSet),
-    });
-    const runtimeRegistry = await resolvePhiCmsTreeRuntimeRegistry({
-        moduleScope: runtimeModuleScope,
-        trees: [filteredPageTree],
-    });
-    const filteredRegion = findRenderableRegion(filteredPageTree, regionType);
+    const scope = await resolvePhiCmsPageRenderScope({ cmsBridge, resolvedRequest, regionTypes: [regionType] });
+    const filteredRegion = findRenderableRegion(scope.filteredPageTree, regionType);
     if (!filteredRegion ||
-        !hasRenderableRegionRoot(filteredPageTree, filteredRegion.rootLayoutNodeId)) {
+        !hasRenderableRegionRoot(scope.filteredPageTree, filteredRegion.rootLayoutNodeId)) {
         return null;
     }
-    const pageControllerSettings = materializePhiRuntimeControllerSettings({
-        tree: filteredPageTree,
-        ownerMountScope: "page",
-        widgetPluginsByType: runtimeModuleScope.widgetDefinitionsByType,
-        baseSettings: resolvedRequest.page.controllerSettings ?? null,
-        activeControllerTypes: [...runtimeModuleScope.moduleSet.controllerDescriptorsByType.keys()],
-        regionTypes: [regionType],
-    });
-    const controllerDefinitionsByType = await resolvePhiRuntimeControllerDefinitions({
-        catalog: cmsBridge.runtimeModuleCatalog,
-        moduleSet: runtimeModuleScope.moduleSet,
-        settings: pageControllerSettings,
-    });
-    return (_jsxs(PhiRuntimeModuleDataProviderHost, { providerKeys: [...runtimeRegistry.dataProviderDescriptorsByKey.keys()], children: [pageControllerSettings.length > 0 ? (_jsx(PhiRuntimeControllerServerHost, { controllers: pageControllerSettings, runtime: resolvedRequest.runtime, registry: controllerDefinitionsByType, controllerModuleIdsByType: runtimeModuleScope.moduleSet.ownerModuleIdByControllerType, runtimeModuleCatalog: runtimeRegistry.runtimeModuleCatalog })) : null, _jsx(PhiCmsLayoutRenderer, { tree: filteredPageTree, runtime: resolvedRequest.runtime, regionClassName: resolveSlotClassName(regionType), regionTypes: [regionType], stackGap: resolveSlotStackGap(regionType), registry: runtimeRegistry })] }));
+    return (_jsx(PhiCmsPageRuntimeHosts, { scope: scope, runtime: resolvedRequest.runtime, children: _jsx(PhiCmsLayoutRenderer, { tree: scope.filteredPageTree, runtime: resolvedRequest.runtime, regionClassName: resolveSlotClassName(regionType), regionTypes: [regionType], stackGap: resolveSlotStackGap(regionType), registry: scope.runtimeRegistry }) }));
 }

package/components/controls/phi-anchor-nav-control.d.ts

@@ -0,0 +1,20 @@
+import type { CSSProperties, ReactNode } from "react";
+export type PhiAnchorNavControlItem = {
+    key: string;
+    /** The in-page target, `#id`. */
+    href: string;
+    title: ReactNode;
+};
+export type PhiAnchorNavControlProps = {
+    items: readonly PhiAnchorNavControlItem[];
+    /** How far below the top of the scroll container a target counts as reached. */
+    offsetTop?: number;
+    style?: CSSProperties;
+};
+/**
+ * Links to places on the same page, with the one currently in view marked.
+ *
+ * Not the anchor of a Widget's placement (`phi-anchor-control-contract`): this is navigation inside a
+ * page, the shape a table of contents takes. It stays where it is drawn and never pins itself.
+ */
+export declare function PhiAnchorNavControl({ items, offsetTop, style }: PhiAnchorNavControlProps): import("react").JSX.Element;

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

@@ -0,0 +1,12 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Anchor } from "antd";
+/**
+ * Links to places on the same page, with the one currently in view marked.
+ *
+ * Not the anchor of a Widget's placement (`phi-anchor-control-contract`): this is navigation inside a
+ * 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 });
+}

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

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { UserOutlined } from "@ant-design/icons";
 import { Avatar } from "antd";
+import { PhiIcon } from "../shell/phi-icon";
 /**
  * Two letters from a name: the first of the first two words, or the first two of a single word.
  *
@@ -22,5 +22,5 @@ function readPhiAvatarInitials(value) {
 }
 export function PhiAvatarControl({ src, alt, initialsFrom, icon, size = 32 }) {
     const initials = src ? null : readPhiAvatarInitials(initialsFrom);
-    return (_jsx(Avatar, { size: size, src: src, alt: alt, icon: src || initials ? icon : icon ?? _jsx(UserOutlined, {}), style: { flexShrink: 0 }, children: initials }));
+    return (_jsx(Avatar, { size: size, src: src, alt: alt, icon: src || initials ? icon : icon ?? _jsx(PhiIcon, { name: "user", size: "inherit" }), style: { flexShrink: 0 }, children: initials }));
 }

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

@@ -4,7 +4,7 @@ import { type PhiBackgroundImageSourceKind } from "../widgets/config/background"
 import type { PhiMediaAssetTile } from "../../types/media";
 import { type PhiBackgroundWidgetLabels } from "../widgets/label-types/background";
 import type { PhiColorPickerLabels } from "../widgets/label-types/color-picker";
-import { type PhiLayoutEffectId } from "../../types/layout-style";
+import { type PhiBackgroundFilter } from "../../types/layout-style";
 import type { PhiWidgetControlMode } from "../../types/widget-ui";
 import type { PhiPickerPlacement } from "./phi-picker-control-contract";
 export type PhiBackgroundEditTransaction = {
@@ -30,13 +30,13 @@ export type PhiBackgroundControlProps = {
      */
     motionModes?: readonly PhiBackgroundMotionMode[];
     /**
-     * The Effects this surface can actually render, defaulting to the full contract.
+     * The Filters this surface can actually render, defaulting to the full contract.
      *
-     * Same rule as `motionModes`: an Effect acts on the surface that carries it, and not every surface
-     * survives every one of them. The Shell Chrome Overlay is the Chrome's own ground, so `blur` and
-     * `dim` would take the Header's text with them and only the glass panes describe anything there.
+     * Same rule as `motionModes`: not every surface can carry every one of them. `blur` softens the paint
+     * on a layer of its own, and the Shell Chrome Overlay has no such layer -- it is the Chrome's own
+     * ground -- so only the glass panes describe anything there.
      */
-    effects?: readonly PhiLayoutEffectId[];
+    filters?: readonly PhiBackgroundFilter[];
     /**
      * Where an image Base may take its picture from, defaulting to the full contract.
      *
@@ -49,7 +49,7 @@ export type PhiBackgroundControlProps = {
     /**
      * The Base kinds this surface can actually render, defaulting to the full contract.
      *
-     * Same rule as `motionModes` and `effects`. A surface that cannot render a Base kind must not offer
+     * Same rule as `motionModes` and `filters`. A surface that cannot render a Base kind must not offer
      * it, and a value the offer no longer covers reads as `none`, which is what such a surface renders
      * for it.
      */
@@ -75,4 +75,4 @@ export type PhiBackgroundControlProps = {
     editTransaction?: PhiBackgroundEditTransaction;
     onChange?: (value: PhiCmsBackgroundWidgetConfig) => void;
 };
-export declare function PhiBackgroundControl({ value, config, disabled, mode, labels, colorPickerLabels, colorPickerPlacement, motionModes, effects, imageSourceKinds, baseKinds, renderMediaPicker, editTransaction, onChange, }: PhiBackgroundControlProps): import("react").JSX.Element;
+export declare function PhiBackgroundControl({ value, config, disabled, mode, labels, colorPickerLabels, colorPickerPlacement, motionModes, filters, imageSourceKinds, baseKinds, renderMediaPicker, editTransaction, onChange, }: PhiBackgroundControlProps): import("react").JSX.Element;

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

@@ -3,14 +3,14 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { useEffect, useMemo, useRef, useState } from "react";
 import { Button, Divider, Flex, Input, InputNumber, Select, Typography, theme } from "antd";
 import { PhiFlexControl } from "./phi-flex-control";
-import { PHI_BACKGROUND_BASE_KINDS, PHI_BACKGROUND_IMAGE_SOURCE_KINDS, PHI_BACKGROUND_MOTION_MODES, PHI_BACKGROUND_OVERLAY_DEFAULT_OPACITY, PHI_BACKGROUND_PARALLAX_DEFAULT_STRENGTH, phiBackgroundBaseSupportsGlassEffect, resolvePhiBackgroundParallaxDefaultStrength, normalizePhiBackgroundWidgetConfig, readPhiBackgroundGradientCss, readPhiBackgroundPatternInkFromCss, resolvePhiBackgroundWidgetStyle, serializePhiBackgroundBaseCss, serializePhiBackgroundPatternInkCss, } from "../widgets/config/background";
+import { PHI_BACKGROUND_BASE_KINDS, PHI_BACKGROUND_IMAGE_SOURCE_KINDS, PHI_BACKGROUND_MOTION_MODES, PHI_BACKGROUND_OVERLAY_DEFAULT_OPACITY, PHI_BACKGROUND_PARALLAX_DEFAULT_STRENGTH, normalizePhiBackgroundWidgetConfig, phiBackgroundDirectionToDegrees, phiBackgroundSupportsFilter, readPhiBackgroundGradientCss, readPhiBackgroundPatternInkFromCss, resolvePhiBackgroundParallaxDefaultStrength, resolvePhiBackgroundWidgetStyle, serializePhiBackgroundBaseCss, serializePhiBackgroundPatternInkCss, } from "../widgets/config/background";
 import { PHI_CORE_BACKGROUND_PATTERN_PROVIDERS, resolvePhiBackgroundPatternDefaultValues, resolvePhiBackgroundPatternProvider, } from "../widgets/config/background-pattern-authoring";
 import { PHI_DEFAULT_BACKGROUND_PATTERN_KEY, } from "../widgets/config/background-pattern-contract";
 import { PHI_BACKGROUND_COLOR_OVERLAY_DEFAULT_INK, PHI_BACKGROUND_PATTERN_DEFAULT_INK, resolvePhiBackgroundPatternLiveLayer, } from "../widgets/config/background-pattern-live";
 import { PhiImageAssetVariantKeyName } from "../../constants/media";
 import { normalizeMediaFocalRect } from "../media/focal-rect";
 import { PHI_BACKGROUND_WIDGET_DEFAULT_LABELS, } from "../widgets/label-types/background";
-import { PHI_LAYOUT_EFFECT_IDS, isPhiGlassLayoutEffectId, } from "../../types/layout-style";
+import { PHI_BACKGROUND_FILTERS, } from "../../types/layout-style";
 import { ConfigPreviewShell } from "./config-preview-shell";
 import { PhiColorControl } from "./phi-color-control";
 import { PhiSegmentedControl } from "./phi-segmented-control";
@@ -29,22 +29,6 @@ const BACKGROUND_DIRECTION_OPTIONS = [
     { value: "270deg", label: "←" },
     { value: "315deg", label: "↖" },
 ];
-function directionToDegrees(direction) {
-    if (direction.endsWith("deg")) {
-        return Number(direction.replace(/deg$/, ""));
-    }
-    switch (direction) {
-        case "to right":
-            return 90;
-        case "to left":
-            return 270;
-        case "to bottom":
-            return 180;
-        case "to top":
-            return 0;
-    }
-    return 90;
-}
 function degreesToDirection(value) {
     const rounded = Math.max(0, Math.min(360, Math.round(value)));
     return `${rounded}deg`;
@@ -77,7 +61,7 @@ function toPickerValue(background) {
 function resolveStoredSolidColor(color) {
     return color;
 }
-export function PhiBackgroundControl({ value, config, disabled = false, mode = "control", labels = PHI_BACKGROUND_WIDGET_DEFAULT_LABELS, colorPickerLabels = PHI_COLOR_PICKER_DEFAULT_LABELS, colorPickerPlacement, motionModes = PHI_BACKGROUND_MOTION_MODES, effects = PHI_LAYOUT_EFFECT_IDS, imageSourceKinds = PHI_BACKGROUND_IMAGE_SOURCE_KINDS, baseKinds = PHI_BACKGROUND_BASE_KINDS, renderMediaPicker, editTransaction, onChange, }) {
+export function PhiBackgroundControl({ value, config, disabled = false, mode = "control", labels = PHI_BACKGROUND_WIDGET_DEFAULT_LABELS, colorPickerLabels = PHI_COLOR_PICKER_DEFAULT_LABELS, colorPickerPlacement, motionModes = PHI_BACKGROUND_MOTION_MODES, filters = PHI_BACKGROUND_FILTERS, imageSourceKinds = PHI_BACKGROUND_IMAGE_SOURCE_KINDS, baseKinds = PHI_BACKGROUND_BASE_KINDS, renderMediaPicker, editTransaction, onChange, }) {
     const { token } = theme.useToken();
     const colorPickerPresets = usePhiColorControlPresets({ labels: colorPickerLabels });
     const currentValue = useMemo(() => normalizePhiBackgroundWidgetConfig(value ?? config ?? null), [value, config]);
@@ -186,14 +170,16 @@ export function PhiBackgroundControl({ value, config, disabled = false, mode = "
         { value: "pattern", label: labels.overlay.pattern },
         { value: "noise", label: labels.overlay.noise },
     ];
-    const patternOptions = PHI_CORE_BACKGROUND_PATTERN_PROVIDERS.map((provider) => {
+    // Built once per label set: a live layer per pattern on every render was a cost of every drag frame.
+    const patternLabels = labels.overlay.patterns;
+    const patternOptions = useMemo(() => PHI_CORE_BACKGROUND_PATTERN_PROVIDERS.map((provider) => {
         const layer = resolvePhiBackgroundPatternLiveLayer(provider.patternKey, resolvePhiBackgroundPatternDefaultValues(provider), 0.55);
         if (!layer) {
-            return { value: provider.patternKey, label: labels.overlay.patterns[provider.labelKey] };
+            return { value: provider.patternKey, label: patternLabels[provider.labelKey] };
         }
         return {
             value: provider.patternKey,
-            label: labels.overlay.patterns[provider.labelKey],
+            label: patternLabels[provider.labelKey],
             preview: {
                 kind: "background",
                 backgroundColor: "#5f6368",
@@ -203,7 +189,7 @@ export function PhiBackgroundControl({ value, config, disabled = false, mode = "
                 backgroundRepeat: layer.images.map((_, index) => layer.repeats?.[index] ?? "repeat").join(", "),
             },
         };
-    });
+    }), [patternLabels]);
     const selectedPatternProvider = currentValue.overlay?.kind === "pattern"
         ? resolvePhiBackgroundPatternProvider(currentValue.overlay.patternKey)
         : null;
@@ -222,23 +208,21 @@ export function PhiBackgroundControl({ value, config, disabled = false, mode = "
         { value: "medium", label: labels.overlay.grains.medium },
         { value: "coarse", label: labels.overlay.grains.coarse },
     ];
-    const effectKindCatalog = [
+    const filterKindCatalog = [
         { value: "none", label: labels.common.none },
-        { value: "glass", label: labels.effect.glass },
-        { value: "haze", label: labels.effect.haze },
-        { value: "blur", label: labels.effect.blur },
-        { value: "dim", label: labels.effect.dim },
+        { value: "glass", label: labels.filter.glass },
+        { value: "haze", label: labels.filter.haze },
+        { value: "blur", label: labels.filter.blur },
     ];
     /*
-     * Glass frosts what shows through a surface, so a base that paints its own opaque material has
-     * nothing for it to work on. Offering it there promised a pane over a picture and delivered a wash,
-     * so the segment disappears with such a base and a value stored from before reads as no Effect --
-     * which is exactly what `resolvePhiBackgroundEffect` renders for it.
+     * A Filter needs something to act on. Glass frosts what shows through a surface, so a base that paints
+     * its own opaque material has nothing for it; blur softens a picture or a pattern, and a flat colour
+     * softened is the same colour. The segment shows only what this Background can render, and a value
+     * stored from before reads as no Filter -- exactly what `resolvePhiBackgroundFilter` renders for it.
      */
-    const supportsGlassEffect = phiBackgroundBaseSupportsGlassEffect(currentValue.base);
-    const isOfferedEffect = (effect) => effects.includes(effect) && (!isPhiGlassLayoutEffectId(effect) || supportsGlassEffect);
-    const effectKindOptions = effectKindCatalog.filter((option) => option.value === "none" || isOfferedEffect(option.value));
-    const activeEffectKind = currentValue.effect && isOfferedEffect(currentValue.effect) ? currentValue.effect : "none";
+    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";
     useEffect(() => {
         if (currentValue.base.kind === "color") {
@@ -408,11 +392,11 @@ export function PhiBackgroundControl({ value, config, disabled = false, mode = "
         });
     }
     function renderDirectionButtons(value, onDirectionChange) {
-        const resolvedDegrees = directionToDegrees(value) % 360;
-        return (_jsx(_Fragment, { children: BACKGROUND_DIRECTION_OPTIONS.map((option) => (_jsx(Button, { "aria-label": option.value, type: directionToDegrees(option.value) === resolvedDegrees ? "primary" : "default", disabled: isDisabled, onClick: () => onDirectionChange(option.value), style: { minWidth: token.controlHeight, paddingInline: 0 }, children: option.label }, option.value))) }));
+        const resolvedDegrees = phiBackgroundDirectionToDegrees(value) % 360;
+        return (_jsx(_Fragment, { children: BACKGROUND_DIRECTION_OPTIONS.map((option) => (_jsx(Button, { "aria-label": option.value, type: phiBackgroundDirectionToDegrees(option.value) === resolvedDegrees ? "primary" : "default", disabled: isDisabled, onClick: () => onDirectionChange(option.value), style: { minWidth: token.controlHeight, paddingInline: 0 }, children: option.label }, option.value))) }));
     }
     function renderDirectionEditor(label, value, onDirectionChange, key) {
-        return (_jsxs(Flex, { vertical: true, gap: token.paddingXS, style: { width: "100%" }, children: [_jsx(Typography.Text, { children: label }), _jsxs(PhiCompactGroupControl, { block: true, style: { width: "100%" }, children: [renderDirectionButtons(value, onDirectionChange), _jsx(InputNumber, { min: 0, max: 360, step: 1, value: directionToDegrees(value), disabled: isDisabled, suffix: "\u00B0", onChange: (next) => onDirectionChange(degreesToDirection(typeof next === "number" ? next : 90)), styles: { input: { textAlign: "right" } }, style: {
+        return (_jsxs(Flex, { vertical: true, gap: token.paddingXS, style: { width: "100%" }, children: [_jsx(Typography.Text, { children: label }), _jsxs(PhiCompactGroupControl, { block: true, style: { width: "100%" }, children: [renderDirectionButtons(value, onDirectionChange), _jsx(InputNumber, { min: 0, max: 360, step: 1, value: phiBackgroundDirectionToDegrees(value), disabled: isDisabled, suffix: "\u00B0", onChange: (next) => onDirectionChange(degreesToDirection(typeof next === "number" ? next : 90)), styles: { input: { textAlign: "right" } }, style: {
                                 flex: "1 1 0",
                                 minWidth: 0,
                                 width: 0,
@@ -524,7 +508,6 @@ export function PhiBackgroundControl({ value, config, disabled = false, mode = "
                     variantKey: null,
                     variantVersion: asset.variantVersion ?? null,
                     trusted: true,
-                    blurDataUrl: undefined,
                     resolvedAsset,
                     position: undefined,
                     size: "cover",
@@ -545,7 +528,6 @@ export function PhiBackgroundControl({ value, config, disabled = false, mode = "
                 variantKey: selectedVariantKey,
                 variantVersion: asset.variantVersion ?? null,
                 trusted: true,
-                blurDataUrl: undefined,
                 resolvedAsset,
                 position: undefined,
             },
@@ -562,7 +544,6 @@ export function PhiBackgroundControl({ value, config, disabled = false, mode = "
                 sourceKind: "url",
                 sourceUrl: "",
                 trusted: false,
-                blurDataUrl: undefined,
                 focalRect: undefined,
                 resolvedAsset: null,
             },
@@ -624,12 +605,8 @@ export function PhiBackgroundControl({ value, config, disabled = false, mode = "
                 },
         });
     }
-    function updateEffectKind(nextKind) {
-        if (nextKind === "none") {
-            emit({ ...currentValue, effect: null });
-            return;
-        }
-        emit({ ...currentValue, effect: nextKind });
+    function updateFilterKind(nextKind) {
+        emit({ ...currentValue, filter: nextKind === "none" ? null : nextKind });
     }
     function renderPreviewChrome() {
         return (_jsx("div", { style: {
@@ -673,7 +650,7 @@ 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, 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(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: {
                             display: "grid",
                             gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
                             gap: token.paddingSM,
@@ -705,7 +682,7 @@ export function PhiBackgroundControl({ value, config, disabled = false, mode = "
                                 } })] })) : (_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, 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, _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) => {
                                             const provider = resolvePhiBackgroundPatternProvider(patternKey);
                                             if (!provider)
                                                 return;
@@ -785,5 +762,5 @@ export function PhiBackgroundControl({ value, config, disabled = false, mode = "
                                                     });
                                                 }, style: { width: fieldControlWidth } })] }, field.key));
                                 })
-                                : null] })) : null] }), effectKindOptions.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.effect }), _jsx(PhiSegmentedControl, { block: true, value: activeEffectKind, options: effectKindOptions, onChange: (next) => updateEffectKind(next) })] })] })) : 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-breadcrumb-control.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode } from "react";
+export type PhiBreadcrumbControlItem = {
+    key?: string;
+    title: ReactNode;
+};
+export type PhiBreadcrumbControlProps = {
+    items: readonly PhiBreadcrumbControlItem[];
+    /** What stands between two items. The primitive's slash when absent. */
+    separator?: ReactNode;
+};
+/** Where the reader is, as the steps that lead there. */
+export declare function PhiBreadcrumbControl({ items, separator }: PhiBreadcrumbControlProps): import("react").JSX.Element;

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

@@ -0,0 +1,7 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Breadcrumb } from "antd";
+/** Where the reader is, as the steps that lead there. */
+export function PhiBreadcrumbControl({ items, separator }) {
+    return _jsx(Breadcrumb, { items: [...items], separator: separator });
+}