@phis/ui 0.2.0 → 0.3.0

package/components/layouts/phi-masonry-contract.js

@@ -0,0 +1,62 @@
+import { PHI_GRID_LAYOUT_PROFILES, PHI_GRID_RESPONSIVE_MIN_WIDTH, isPhiGridColumnCount, } from "./phi-grid-contract";
+/**
+ * How many columns a Masonry has when it was never told: one where there is no room to share, two in
+ * the middle, three where it is at least as wide as the content column.
+ *
+ * One number for every width stood here before, so three columns stood in a sider as in the content
+ * column, only narrower. The other way to answer the room was a minimum column width, and the renderer
+ * then dropped the column count altogether: two fields of which only one ever worked.
+ */
+export const PHI_MASONRY_LAYOUT_DEFAULT_COLUMNS = {
+    compact: 1,
+    medium: 2,
+    wide: 3,
+};
+/**
+ * Where a Masonry changes its columns, measured on its own box: the Grid's thresholds, so a Masonry and
+ * a Grid of the same room answer the same width. `@container phi-masonry` in `styles/layout.css`
+ * compares against these; `validate-container-breakpoint-contracts.ts` holds the two together.
+ */
+export const PHI_MASONRY_RESPONSIVE_MIN_WIDTH = PHI_GRID_RESPONSIVE_MIN_WIDTH;
+/** The Masonry's columns at every width: what was stated where it is a column count, the default elsewhere. */
+export function resolvePhiMasonryColumns(columns) {
+    const read = (profile) => {
+        const stated = columns?.[profile];
+        return isPhiGridColumnCount(stated) ? stated : PHI_MASONRY_LAYOUT_DEFAULT_COLUMNS[profile];
+    };
+    return { compact: read("compact"), medium: read("medium"), wide: read("wide") };
+}
+/**
+ * The custom properties the Masonry's column box reads: its column count at every width and the gap.
+ * `styles/layout.css` (`.phi-masonry-layout__columns`) picks the count by the container queries.
+ */
+export function resolvePhiMasonryColumnProperties(columns, gap) {
+    const properties = { "--phi-masonry-gap": gap };
+    for (const profile of PHI_GRID_LAYOUT_PROFILES) {
+        properties[`--phi-masonry-columns-${profile}`] = String(columns[profile]);
+    }
+    return properties;
+}
+/**
+ * Packs children by height: each goes under the column that ends highest, in the order they come. Ties
+ * go to the leftmost column; half a pixel counts as a tie, so the fractions a browser measures do not
+ * send a child to the far side.
+ *
+ * The heights include the gap below each child (the item's padding), so the column box is as tall as
+ * the longest column and the gap under it is taken back by the column box's margin, as in the
+ * multi-column flow this replaces in the browser.
+ */
+export function packPhiMasonryItems(heights, columns) {
+    const ends = Array.from({ length: Math.max(1, columns) }, () => 0);
+    const placements = heights.map((height) => {
+        let column = 0;
+        for (let index = 1; index < ends.length; index += 1) {
+            if (ends[index] < ends[column] - 0.5)
+                column = index;
+        }
+        const top = ends[column];
+        ends[column] += height;
+        return { column, top };
+    });
+    return { placements, height: Math.max(...ends) };
+}

package/components/layouts/phi-masonry-layout.d.ts

@@ -1,10 +1,17 @@
 import type { CSSProperties, ReactNode } from "react";
 import { type PhiBaseLayoutProps } from "./phi-base-layout";
+import type { PhiResponsiveValue } from "../../types/responsive";
 export type PhiMasonryLayoutProps = Omit<PhiBaseLayoutProps, "slots"> & {
     slots: ReactNode[];
-    columns?: number;
-    minColumnWidth?: CSSProperties["minWidth"];
+    /** How many columns at each width; each child stands under the one before it in its column. */
+    columns?: PhiResponsiveValue<number>;
+    /** The distance between children, across and down. */
     gap?: CSSProperties["gap"];
     style?: CSSProperties;
 };
+/**
+ * Children in columns, each at its own height and directly under the one before it: no rows, so no
+ * gaps where a short child stands beside a tall one. Each child goes under the column that ends highest
+ * (`PhiMasonryColumns`); until the browser can measure, the server's multi-column flow stands in.
+ */
 export declare function PhiMasonryLayout({ slots, ...layoutProps }: PhiMasonryLayoutProps): import("react").JSX.Element;

package/components/layouts/phi-masonry-layout.js

@@ -3,27 +3,28 @@ import { normalizePhiCssSize } from "./phi-layout-contract";
 import { PhiBaseLayout } from "./phi-base-layout";
 import { resolvePhiLayoutDefaults } from "../../helpers/cms-layout-defaults";
 import { isPhiLayoutAuthoringRender, phiLayoutSlotClassName, phiLayoutSlotContentMarker, } from "../../helpers/layout-authoring-markers";
+import { resolvePhiMasonryColumnProperties, resolvePhiMasonryColumns } from "./phi-masonry-contract";
+import { PhiMasonryColumns } from "./phi-masonry-columns";
+import { PHI_CMS_MAX_LAYOUT_SLOTS } from "../../constants/cms-layout-types";
 const PHI_MASONRY_LAYOUT_DEFAULTS = resolvePhiLayoutDefaults("masonry");
+/**
+ * Children in columns, each at its own height and directly under the one before it: no rows, so no
+ * gaps where a short child stands beside a tall one. Each child goes under the column that ends highest
+ * (`PhiMasonryColumns`); until the browser can measure, the server's multi-column flow stands in.
+ */
 export function PhiMasonryLayout({ slots, ...layoutProps }) {
-    const { columns = PHI_MASONRY_LAYOUT_DEFAULTS.columns, minColumnWidth, gap = PHI_MASONRY_LAYOUT_DEFAULTS.gap, renderMode, style, layoutKind = "masonry", editSlotAction, editSlotLabels, editRenderInsertControl, } = layoutProps;
-    const resolvedGap = normalizePhiCssSize(gap) ?? PHI_MASONRY_LAYOUT_DEFAULTS.gap;
-    const resolvedColumns = Number.isFinite(columns) && columns > 0 ? Math.floor(columns) : 3;
-    const resolvedMinColumnWidth = normalizePhiCssSize(minColumnWidth);
+    const { columns, gap = PHI_MASONRY_LAYOUT_DEFAULTS.gap, renderMode, style, layoutKind = "masonry", editSlotAction, editSlotLabels, editRenderInsertControl, } = layoutProps;
+    const resolvedGap = normalizePhiCssSize(gap) ?? normalizePhiCssSize(PHI_MASONRY_LAYOUT_DEFAULTS.gap) ?? "0px";
     const isAuthoringRender = isPhiLayoutAuthoringRender(layoutProps);
     const isEditMode = renderMode === "editor";
     /*
-     * The column item, the one wrapper a Masonry child stands in; `breakInside` is what keeps it whole
-     * when the column breaks. The insert control is given the same one, so the place a Widget will appear
-     * is the place the button stands.
+     * The column item. The distance below a child is the item's padding, not a margin on the child, and
+     * the authoring slot is the element inside it, so a selected slot outlines the child and not the gap.
+     * The column box takes the last gap back (`styles/layout.css`), so nothing is left under the longest
+     * column. The insert control is given the same item, so the place a Widget will appear is the place
+     * the button stands.
      */
-    const renderMasonryItem = (key, hasContent, content) => (_jsx("div", { className: phiLayoutSlotClassName(isAuthoringRender), "data-phi-layout-has-content": phiLayoutSlotContentMarker(isAuthoringRender, hasContent), style: {
-            display: "inline-block",
-            width: "100%",
-            minWidth: 0,
-            breakInside: "avoid",
-            pageBreakInside: "avoid",
-            marginBottom: resolvedGap,
-        }, children: content }, key));
+    const renderMasonryItem = (key, hasContent, content) => (_jsx("div", { className: "phi-masonry-layout__item", children: _jsx("div", { className: phiLayoutSlotClassName(isAuthoringRender), "data-phi-layout-has-content": phiLayoutSlotContentMarker(isAuthoringRender, hasContent), style: { minWidth: 0 }, children: content }) }, key));
     /*
      * One insert control, at the end, drawn here rather than by the base layout.
      *
@@ -40,7 +41,7 @@ export function PhiMasonryLayout({ slots, ...layoutProps }) {
     }, []);
     const nextInsertSlotIndex = occupiedSlotIndices.length > 0 ? Math.max(...occupiedSlotIndices) + 1 : 0;
     const renderedItems = occupiedSlotIndices.map((slotIndex) => renderMasonryItem(`slot-${slotIndex}`, true, slots[slotIndex]));
-    if (isEditMode && editSlotAction && editRenderInsertControl) {
+    if (isEditMode && editSlotAction && editRenderInsertControl && nextInsertSlotIndex < PHI_CMS_MAX_LAYOUT_SLOTS) {
         renderedItems.push(renderMasonryItem(`insert-${nextInsertSlotIndex}`, false, editRenderInsertControl({
             presentation: "inline",
             slotIndex: nextInsertSlotIndex,
@@ -52,12 +53,17 @@ export function PhiMasonryLayout({ slots, ...layoutProps }) {
             }),
         })));
     }
-    return (_jsx(PhiBaseLayout, { ...layoutProps, layoutKind: layoutKind, slots: renderedItems, renderMode: renderMode, gap: resolvedGap, style: {
+    /*
+     * The columns stand in a box of their own inside the Layout's: the Layout is the `phi-masonry`
+     * container the column count is asked of, and a container cannot answer a query about itself.
+     */
+    return (_jsx(PhiBaseLayout, { ...layoutProps, layoutKind: layoutKind, slots: [
+            _jsx(PhiMasonryColumns, { children: renderedItems }, "columns"),
+        ], renderMode: renderMode, gap: undefined, style: {
             minWidth: 0,
-            columnCount: resolvedMinColumnWidth ? undefined : resolvedColumns,
-            columnWidth: resolvedMinColumnWidth,
-            columnGap: resolvedGap,
-            columnFill: "balance",
+            containerType: "inline-size",
+            containerName: "phi-masonry",
+            ...resolvePhiMasonryColumnProperties(resolvePhiMasonryColumns(columns), resolvedGap),
             ...style,
         } }));
 }

package/components/layouts/phi-structure-region-layout.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { theme } from "antd";
+import { usePhiConfig } from "../root/phi-config-provider";
 import { PHI_LAYOUT } from "../../theme/phi-tokens";
 import { usePhiAuthoringRegionOverrides } from "../runtime/authoring-region-overrides";
 import { PhiTypographyControl } from "../controls/phi-typography-control";
@@ -8,7 +8,7 @@ const PHI_PADDING = "var(--ant-padding)";
 const PHI_PADDING_XS = "var(--ant-padding-xs)";
 const PHI_COLOR_BORDER_SECONDARY = "var(--ant-color-border-secondary)";
 export function PhiStructureRegionLayout({ blockId, headerTop, headerMain, siderLeft, footerMain, footerBottom, style, labels, }) {
-    const { token } = theme.useToken();
+    const { token } = usePhiConfig();
     const overrides = usePhiAuthoringRegionOverrides();
     const isPreviewMode = overrides.preview;
     const shellPadding = isPreviewMode ? 0 : PHI_PADDING;

package/components/layouts/plugins/carousel-layout-plugin.js

@@ -4,42 +4,13 @@ import { parsePhiCmsCarouselLayoutConfig } from "../../../types/cms-config";
 import { resolvePhiLayoutAnchor } from "../phi-layout-contract";
 import { PhiCarouselLayout } from "../phi-carousel-layout";
 import { definePhiLayoutRenderers } from "../layout-plugin-renderers";
-import { comparePhiCmsInstanceIds } from "../../../types/cms-instance-id";
+import { resolvePhiLayoutSlotMeta } from "../layout-slot-meta";
 import { PHI_CAROUSEL_LAYOUT_DEFINITION } from "../layout-definitions";
 function resolvePhiCarouselSlotKeys() {
     return PHI_CMS_CAROUSEL_LAYOUT_SLOTS.map((slot) => slot.key);
 }
-/**
- * What the pager Widgets are told this Carousel holds.
- *
- * Only the filled slots, named the way the person who filled them named them, because a Segmented
- * offering twelve entries for three pictures would be a list of mostly nothing.
- */
-function resolvePhiCarouselSlotMeta(node) {
-    const labelsBySlotIndex = new Map();
-    const occupiedSlotIndices = new Set();
-    const children = [
-        ...(node.childLayouts ?? []).map((child) => ({ ...child, _kindOrder: 0 })),
-        ...(node.childWidgets ?? []).map((child) => ({ ...child, _kindOrder: 1 })),
-    ].sort((left, right) => left.slotIndex - right.slotIndex || left.sortOrder - right.sortOrder || left._kindOrder - right._kindOrder || comparePhiCmsInstanceIds(left.id, right.id));
-    for (const child of children) {
-        occupiedSlotIndices.add(child.slotIndex);
-        const label = child.label?.trim();
-        if (label && !labelsBySlotIndex.has(child.slotIndex)) {
-            labelsBySlotIndex.set(child.slotIndex, label);
-        }
-    }
-    return PHI_CMS_CAROUSEL_LAYOUT_SLOTS
-        .filter((slot) => occupiedSlotIndices.has(slot.slotIndex))
-        .map((slot) => ({
-        key: slot.key,
-        label: labelsBySlotIndex.get(slot.slotIndex) ?? slot.label,
-        slotIndex: slot.slotIndex,
-        hasContent: true,
-    }));
-}
 export const PHI_CAROUSEL_LAYOUT_PLUGIN = {
     ...PHI_CAROUSEL_LAYOUT_DEFINITION,
     parseConfig: parsePhiCmsCarouselLayoutConfig,
-    ...definePhiLayoutRenderers(({ node, config, renderSequentialSlotChildren }, renderMode) => (_jsx(PhiCarouselLayout, { blockId: node.id, layoutKind: "carousel", slots: renderSequentialSlotChildren(node), slotKeys: resolvePhiCarouselSlotKeys(), slotMeta: resolvePhiCarouselSlotMeta(node), renderMode: renderMode, defaultActiveSlotKey: config.defaultActiveSlotKey, visibleSlots: config.visibleSlots, windowAnchor: config.windowAnchor, transition: config.transition, transitionDurationMs: config.transitionDurationMs, transitionEasing: config.transitionEasing, slotGap: config.slotGap, controls: config.controls, loop: config.loop, autoplayMs: config.autoplayMs, lookahead: config.lookahead, slotAnchor: resolvePhiLayoutAnchor(config.anchor, PHI_CAROUSEL_LAYOUT_DEFINITION.defaultAnchor), editSlotAnchor: resolvePhiLayoutAnchor(config.anchor, PHI_CAROUSEL_LAYOUT_DEFINITION.defaultAnchor), zIndex: config.zIndex, shadow: config.shadow, effect: config.effect, padding: config.padding, paddingTop: config.paddingTop, paddingRight: config.paddingRight, paddingBottom: config.paddingBottom, paddingLeft: config.paddingLeft, background: config.background, borderSource: config.borderSource, border: config.border, borderRadius: config.borderRadius, labelEnd: config.labelEnd, size: config.size, minSize: config.minSize, maxSize: config.maxSize, collapsedSizeHint: config.collapsedSizeHint }, `layout-${node.id}`))),
+    ...definePhiLayoutRenderers(({ node, config, renderSequentialSlotChildren }, renderMode) => (_jsx(PhiCarouselLayout, { blockId: node.id, layoutKind: "carousel", slots: renderSequentialSlotChildren(node), slotKeys: resolvePhiCarouselSlotKeys(), slotMeta: resolvePhiLayoutSlotMeta(node, PHI_CMS_CAROUSEL_LAYOUT_SLOTS), renderMode: renderMode, defaultActiveSlotKey: config.defaultActiveSlotKey, visibleSlots: config.visibleSlots, windowAnchor: config.windowAnchor, transition: config.transition, transitionDurationMs: config.transitionDurationMs, transitionEasing: config.transitionEasing, slotGap: config.slotGap, controls: config.controls, loop: config.loop, autoplayMs: config.autoplayMs, lookahead: config.lookahead, slotAnchor: resolvePhiLayoutAnchor(config.anchor, PHI_CAROUSEL_LAYOUT_DEFINITION.defaultAnchor), editSlotAnchor: resolvePhiLayoutAnchor(config.anchor, PHI_CAROUSEL_LAYOUT_DEFINITION.defaultAnchor), zIndex: config.zIndex, surface: config.surface, padding: config.padding, paddingTop: config.paddingTop, paddingRight: config.paddingRight, paddingBottom: config.paddingBottom, paddingLeft: config.paddingLeft, labelEnd: config.labelEnd, size: config.size, minSize: config.minSize, maxSize: config.maxSize, collapsedSizeHint: config.collapsedSizeHint }, `layout-${node.id}`))),
 };

package/components/layouts/plugins/collapsible-layout-plugin.js

@@ -9,7 +9,7 @@ import { PHI_COLLAPSIBLE_LAYOUT_DEFINITION } from "../layout-definitions";
 function resolvePhiCollapsibleSlotKeys() {
     return PHI_CMS_COLLAPSIBLE_LAYOUT_SLOTS.map((slot) => slot.key);
 }
-function resolvePhiCollapsibleSlotMeta(node, config) {
+function resolvePhiCollapsibleSlotMeta(node, slotTitles) {
     const occupiedSlotIndices = new Set();
     const children = [
         ...(node.childLayouts ?? []).map((child) => ({ ...child, _kindOrder: 0 })),
@@ -20,7 +20,7 @@ function resolvePhiCollapsibleSlotMeta(node, config) {
     }
     return PHI_CMS_COLLAPSIBLE_LAYOUT_SLOTS.map((slot) => ({
         key: slot.key,
-        label: node.resolvedSlotTitles?.[slot.slotIndex]?.trim() || config.slotTitles?.[slot.slotIndex]?.trim() || slot.label,
+        label: slotTitles?.[slot.slotIndex]?.trim() || slot.label,
         slotIndex: slot.slotIndex,
         hasContent: occupiedSlotIndices.has(slot.slotIndex),
     }));
@@ -28,5 +28,18 @@ function resolvePhiCollapsibleSlotMeta(node, config) {
 export const PHI_COLLAPSIBLE_LAYOUT_PLUGIN = {
     ...PHI_COLLAPSIBLE_LAYOUT_DEFINITION,
     parseConfig: parsePhiCmsCollapsibleLayoutConfig,
-    ...definePhiLayoutRenderers(({ node, config, renderSequentialSlotChildren }, renderMode) => (_jsx(PhiCollapsibleLayout, { blockId: node.id, layoutKind: "collapsible", slots: renderSequentialSlotChildren(node), slotKeys: resolvePhiCollapsibleSlotKeys(), slotMeta: resolvePhiCollapsibleSlotMeta(node, config), renderMode: renderMode, anchor: config.anchor, editSlotAnchor: resolvePhiLayoutAnchor(config.anchor, PHI_COLLAPSIBLE_LAYOUT_DEFINITION.defaultAnchor), panelMinHeight: config.panelMinHeight, accordion: config.accordion, slotTitles: node.resolvedSlotTitles ?? config.slotTitles, translateSlotTitles: config.translateSlotTitles, defaultOpenSlotKeys: config.defaultOpenSlotKeys, collapsible: config.collapsible, ghost: config.ghost, expandIconPlacement: config.expandIconPlacement, collapseSize: config.collapseSize, titleStrong: config.titleStrong, headerPadding: config.headerPadding, innerPadding: config.innerPadding, zIndex: config.zIndex, shadow: config.shadow, effect: config.effect, padding: config.padding, paddingTop: config.paddingTop, paddingRight: config.paddingRight, paddingBottom: config.paddingBottom, paddingLeft: config.paddingLeft, background: config.background, borderSource: config.borderSource, border: config.border, borderRadius: config.borderRadius, labelEnd: config.labelEnd, size: config.size, minSize: config.minSize, maxSize: config.maxSize, collapsedSizeHint: config.collapsedSizeHint, initialSlotStates: config.initialSlotStates }, `layout-${node.id}`))),
+    ...definePhiLayoutRenderers(async ({ node, config, renderSequentialSlotChildren, translateOwnText }, renderMode) => {
+        /*
+         * The panel titles and their descriptions are the Collapsible's own text, translated as a Widget's
+         * is (`translatesOwnText`) -- in one question, so a page asks its catalogue once for both.
+         */
+        const ownTitles = config.slotTitles ?? [];
+        const ownDescriptions = config.slotDescriptions ?? [];
+        const translated = translateOwnText && (ownTitles.length > 0 || ownDescriptions.length > 0)
+            ? await translateOwnText([...ownTitles, ...ownDescriptions])
+            : [...ownTitles, ...ownDescriptions];
+        const slotTitles = config.slotTitles ? translated.slice(0, ownTitles.length) : undefined;
+        const slotDescriptions = config.slotDescriptions ? translated.slice(ownTitles.length) : undefined;
+        return (_jsx(PhiCollapsibleLayout, { blockId: node.id, layoutKind: "collapsible", slots: renderSequentialSlotChildren(node), slotKeys: resolvePhiCollapsibleSlotKeys(), slotMeta: resolvePhiCollapsibleSlotMeta(node, slotTitles), renderMode: renderMode, anchor: config.anchor, editSlotAnchor: resolvePhiLayoutAnchor(config.anchor, PHI_COLLAPSIBLE_LAYOUT_DEFINITION.defaultAnchor), panelMinHeight: config.panelMinHeight, accordion: config.accordion, slotTitles: slotTitles, slotDescriptions: slotDescriptions, defaultOpenSlotKeys: config.defaultOpenSlotKeys, collapsible: config.collapsible, ghost: config.ghost, expandIconPlacement: config.expandIconPlacement, collapseSize: config.collapseSize, titleStrong: config.titleStrong, headerPadding: config.headerPadding, innerPadding: config.innerPadding, zIndex: config.zIndex, surface: config.surface, padding: config.padding, paddingTop: config.paddingTop, paddingRight: config.paddingRight, paddingBottom: config.paddingBottom, paddingLeft: config.paddingLeft, labelEnd: config.labelEnd, size: config.size, minSize: config.minSize, maxSize: config.maxSize, collapsedSizeHint: config.collapsedSizeHint, initialSlotStates: config.initialSlotStates }, `layout-${node.id}`));
+    }),
 };

package/components/layouts/plugins/content-layout-plugin.js

@@ -8,5 +8,5 @@ import { resolvePhiLayoutAnchor } from "../phi-layout-contract";
 export const PHI_CONTENT_LAYOUT_PLUGIN = {
     ...PHI_CONTENT_LAYOUT_DEFINITION,
     parseConfig: parsePhiCmsContentLayoutConfig,
-    ...definePhiLayoutRenderers(({ node, config, renderChildren }, renderMode) => (_jsx(PhiContentLayout, { blockId: node.id, layoutKind: "content", slots: renderChildren(node), renderMode: renderMode, size: config.size, minSize: config.minSize, maxSize: config.maxSize, margin: config.margin, zIndex: config.zIndex, shadow: config.shadow, effect: config.effect, padding: config.padding, paddingLeft: config.paddingLeft, paddingRight: config.paddingRight, paddingTop: config.paddingTop, paddingBottom: config.paddingBottom, background: config.background, borderSource: config.borderSource, border: config.border, borderRadius: config.borderRadius, labelEnd: config.labelEnd, editSlotAnchor: resolvePhiLayoutAnchor(config.anchor, PHI_CONTENT_LAYOUT_DEFINITION.defaultAnchor) }, `layout-${node.id}`))),
+    ...definePhiLayoutRenderers(({ node, config, renderChildren }, renderMode) => (_jsx(PhiContentLayout, { blockId: node.id, layoutKind: "content", slots: renderChildren(node), renderMode: renderMode, size: config.size, minSize: config.minSize, maxSize: config.maxSize, margin: config.margin, zIndex: config.zIndex, surface: config.surface, padding: config.padding, paddingLeft: config.paddingLeft, paddingRight: config.paddingRight, paddingTop: config.paddingTop, paddingBottom: config.paddingBottom, labelEnd: config.labelEnd, editSlotAnchor: resolvePhiLayoutAnchor(config.anchor, PHI_CONTENT_LAYOUT_DEFINITION.defaultAnchor) }, `layout-${node.id}`))),
 };

package/components/layouts/plugins/flex-layout-plugin.js

@@ -8,5 +8,5 @@ import { PHI_FLEX_LAYOUT_DEFINITION } from "../layout-definitions";
 export const PHI_FLEX_LAYOUT_PLUGIN = {
     ...PHI_FLEX_LAYOUT_DEFINITION,
     parseConfig: parsePhiCmsFlexLayoutConfig,
-    ...definePhiLayoutRenderers(({ node, config, renderSequentialSlotChildren }, renderMode) => (_jsx(PhiFlexLayout, { blockId: node.id, layoutKind: "flex", slots: renderSequentialSlotChildren(node), renderMode: renderMode, gap: config.gap, distribution: config.distribution, wrap: config.wrap, editSlotAnchor: resolvePhiLayoutAnchor(config.anchor, PHI_FLEX_LAYOUT_DEFINITION.defaultAnchor), verticalSeparators: config.verticalSeparators, separatorBeforeFirst: config.separatorBeforeFirst, separatorSpan: config.separatorSpan, zIndex: config.zIndex, shadow: config.shadow, effect: config.effect, padding: config.padding, paddingTop: config.paddingTop, paddingRight: config.paddingRight, paddingBottom: config.paddingBottom, paddingLeft: config.paddingLeft, background: config.background, borderSource: config.borderSource, border: config.border, borderRadius: config.borderRadius, labelEnd: config.labelEnd, size: config.size, minSize: config.minSize, maxSize: config.maxSize, collapsedSizeHint: config.collapsedSizeHint, initialSlotStates: config.initialSlotStates }, `layout-${node.id}`))),
+    ...definePhiLayoutRenderers(({ node, config, renderSequentialSlotChildren }, renderMode) => (_jsx(PhiFlexLayout, { blockId: node.id, layoutKind: "flex", slots: renderSequentialSlotChildren(node), renderMode: renderMode, gap: config.gap, distribution: config.distribution, wrap: config.wrap, editSlotAnchor: resolvePhiLayoutAnchor(config.anchor, PHI_FLEX_LAYOUT_DEFINITION.defaultAnchor), verticalSeparators: config.verticalSeparators, separatorBeforeFirst: config.separatorBeforeFirst, separatorSpan: config.separatorSpan, zIndex: config.zIndex, surface: config.surface, padding: config.padding, paddingTop: config.paddingTop, paddingRight: config.paddingRight, paddingBottom: config.paddingBottom, paddingLeft: config.paddingLeft, labelEnd: config.labelEnd, size: config.size, minSize: config.minSize, maxSize: config.maxSize, collapsedSizeHint: config.collapsedSizeHint, initialSlotStates: config.initialSlotStates }, `layout-${node.id}`))),
 };

package/components/layouts/plugins/flex-vertical-layout-plugin.js

@@ -8,5 +8,5 @@ import { PHI_FLEX_VERTICAL_LAYOUT_DEFINITION } from "../layout-definitions";
 export const PHI_FLEX_VERTICAL_LAYOUT_PLUGIN = {
     ...PHI_FLEX_VERTICAL_LAYOUT_DEFINITION,
     parseConfig: parsePhiCmsFlexVerticalLayoutConfig,
-    ...definePhiLayoutRenderers(({ node, config, renderSequentialSlotChildren }, renderMode) => (_jsx(PhiFlexVerticalLayout, { blockId: node.id, layoutKind: "verticalflex", slots: renderSequentialSlotChildren(node), renderMode: renderMode, gap: config.gap, editSlotAnchor: resolvePhiLayoutAnchor(config.anchor, PHI_FLEX_VERTICAL_LAYOUT_DEFINITION.defaultAnchor), zIndex: config.zIndex, shadow: config.shadow, effect: config.effect, padding: config.padding, paddingTop: config.paddingTop, paddingRight: config.paddingRight, paddingBottom: config.paddingBottom, paddingLeft: config.paddingLeft, background: config.background, borderSource: config.borderSource, border: config.border, borderRadius: config.borderRadius, labelEnd: config.labelEnd, size: config.size, minSize: config.minSize, maxSize: config.maxSize, collapsedSizeHint: config.collapsedSizeHint, initialSlotStates: config.initialSlotStates }, `layout-${node.id}`))),
+    ...definePhiLayoutRenderers(({ node, config, renderSequentialSlotChildren }, renderMode) => (_jsx(PhiFlexVerticalLayout, { blockId: node.id, layoutKind: "verticalflex", slots: renderSequentialSlotChildren(node), renderMode: renderMode, gap: config.gap, editSlotAnchor: resolvePhiLayoutAnchor(config.anchor, PHI_FLEX_VERTICAL_LAYOUT_DEFINITION.defaultAnchor), zIndex: config.zIndex, surface: config.surface, padding: config.padding, paddingTop: config.paddingTop, paddingRight: config.paddingRight, paddingBottom: config.paddingBottom, paddingLeft: config.paddingLeft, labelEnd: config.labelEnd, size: config.size, minSize: config.minSize, maxSize: config.maxSize, collapsedSizeHint: config.collapsedSizeHint, initialSlotStates: config.initialSlotStates }, `layout-${node.id}`))),
 };

package/components/layouts/plugins/grid-layout-plugin.js

@@ -7,5 +7,5 @@ import { PHI_GRID_LAYOUT_DEFINITION } from "../layout-definitions";
 export const PHI_GRID_LAYOUT_PLUGIN = {
     ...PHI_GRID_LAYOUT_DEFINITION,
     parseConfig: parsePhiCmsGridLayoutConfig,
-    ...definePhiLayoutRenderers(({ node, config, renderSequentialSlotChildren }, renderMode) => (_jsx(PhiGridLayout, { blockId: node.id, layoutKind: "grid", slots: renderSequentialSlotChildren(node), renderMode: renderMode, gap: config.gap, anchor: config.anchor, editSlotAnchor: resolvePhiLayoutAnchor(config.anchor), columnGap: config.columnGap, slotPlacements: config.slotPlacements, align: config.align, justify: config.justify, wrap: config.wrap, size: config.size, minSize: config.minSize, maxSize: config.maxSize, collapsedSizeHint: config.collapsedSizeHint, shadow: config.shadow, effect: config.effect, padding: config.padding, background: config.background, borderSource: config.borderSource, border: config.border, borderRadius: config.borderRadius, labelEnd: config.labelEnd }, `layout-${node.id}`))),
+    ...definePhiLayoutRenderers(({ node, config, renderSequentialSlotChildren }, renderMode) => (_jsx(PhiGridLayout, { blockId: node.id, layoutKind: "grid", slots: renderSequentialSlotChildren(node), renderMode: renderMode, gap: config.gap, anchor: config.anchor, editSlotAnchor: resolvePhiLayoutAnchor(config.anchor), columns: config.columns, slotPlacements: config.slotPlacements, size: config.size, minSize: config.minSize, maxSize: config.maxSize, collapsedSizeHint: config.collapsedSizeHint, surface: config.surface, padding: config.padding, paddingTop: config.paddingTop, paddingRight: config.paddingRight, paddingBottom: config.paddingBottom, paddingLeft: config.paddingLeft, labelEnd: config.labelEnd }, `layout-${node.id}`))),
 };

package/components/layouts/plugins/masonry-layout-plugin.js

@@ -6,5 +6,5 @@ import { PHI_MASONRY_LAYOUT_DEFINITION } from "../layout-definitions";
 export const PHI_MASONRY_LAYOUT_PLUGIN = {
     ...PHI_MASONRY_LAYOUT_DEFINITION,
     parseConfig: parsePhiCmsMasonryLayoutConfig,
-    ...definePhiLayoutRenderers(({ node, config, renderSequentialSlotChildren }, renderMode) => (_jsx(PhiMasonryLayout, { blockId: node.id, layoutKind: "masonry", slots: renderSequentialSlotChildren(node), renderMode: renderMode, columns: config.columns, minColumnWidth: config.minColumnWidth, gap: config.gap, zIndex: config.zIndex, shadow: config.shadow, effect: config.effect, size: config.size, minSize: config.minSize, maxSize: config.maxSize, collapsedSizeHint: config.collapsedSizeHint, padding: config.padding, background: config.background, borderSource: config.borderSource, border: config.border, borderRadius: config.borderRadius, labelEnd: config.labelEnd }, `layout-${node.id}`))),
+    ...definePhiLayoutRenderers(({ node, config, renderSequentialSlotChildren }, renderMode) => (_jsx(PhiMasonryLayout, { blockId: node.id, layoutKind: "masonry", slots: renderSequentialSlotChildren(node), renderMode: renderMode, columns: config.columns, gap: config.gap, zIndex: config.zIndex, surface: config.surface, size: config.size, minSize: config.minSize, maxSize: config.maxSize, collapsedSizeHint: config.collapsedSizeHint, padding: config.padding, paddingTop: config.paddingTop, paddingRight: config.paddingRight, paddingBottom: config.paddingBottom, paddingLeft: config.paddingLeft, labelEnd: config.labelEnd }, `layout-${node.id}`))),
 };

package/components/layouts/plugins/split-card-layout-plugin.js

@@ -7,5 +7,5 @@ import { PHI_SPLIT_CARD_LAYOUT_DEFINITION } from "../layout-definitions";
 export const PHI_SPLIT_CARD_LAYOUT_PLUGIN = {
     ...PHI_SPLIT_CARD_LAYOUT_DEFINITION,
     parseConfig: parsePhiCmsSplitCardLayoutConfig,
-    ...definePhiLayoutRenderers(({ node, config, renderSequentialSlotChildren }, renderMode) => (_jsx(PhiSplitCardLayout, { blockId: node.id, layoutKind: "split", slots: renderSequentialSlotChildren(node), gap: config.gap, zIndex: config.zIndex, shadow: config.shadow, padding: config.padding, paddingTop: config.paddingTop, paddingBottom: config.paddingBottom, background: config.background, borderSource: config.borderSource, border: config.border, borderRadius: config.borderRadius, labelEnd: config.labelEnd, effect: config.effect, editSlotAnchor: resolvePhiLayoutAnchor(config.anchor, PHI_SPLIT_CARD_LAYOUT_DEFINITION.defaultAnchor), leftPadding: config.leftPadding, rightPadding: config.rightPadding, leftBackground: config.leftBackground, rightBackground: config.rightBackground, leftBorder: config.leftBorder, rightBorder: config.rightBorder, leftShadow: config.leftShadow, rightShadow: config.rightShadow, size: config.size, minSize: config.minSize, maxSize: config.maxSize, collapsedSizeHint: config.collapsedSizeHint, renderMode: renderMode }, `layout-${node.id}`))),
+    ...definePhiLayoutRenderers(({ node, config, renderSequentialSlotChildren }, renderMode) => (_jsx(PhiSplitCardLayout, { blockId: node.id, layoutKind: "split", slots: renderSequentialSlotChildren(node), gap: config.gap, swapRatio: config.swapRatio, zIndex: config.zIndex, surface: config.surface, padding: config.padding, paddingTop: config.paddingTop, paddingRight: config.paddingRight, paddingBottom: config.paddingBottom, paddingLeft: config.paddingLeft, labelEnd: config.labelEnd, editSlotAnchor: resolvePhiLayoutAnchor(config.anchor, PHI_SPLIT_CARD_LAYOUT_DEFINITION.defaultAnchor), size: config.size, minSize: config.minSize, maxSize: config.maxSize, collapsedSizeHint: config.collapsedSizeHint, renderMode: renderMode }, `layout-${node.id}`))),
 };

package/components/layouts/plugins/stack-layout-plugin.js

@@ -4,36 +4,13 @@ import { parsePhiCmsStackLayoutConfig } from "../../../types/cms-config";
 import { resolvePhiLayoutAnchor, } from "../phi-layout-contract";
 import { PhiStackLayout } from "../phi-stack-layout";
 import { definePhiLayoutRenderers } from "../layout-plugin-renderers";
-import { comparePhiCmsInstanceIds } from "../../../types/cms-instance-id";
+import { resolvePhiLayoutSlotMeta } from "../layout-slot-meta";
 import { PHI_STACK_LAYOUT_DEFINITION } from "../layout-definitions";
 function resolvePhiStackSlotKeys() {
     return PHI_CMS_STACK_LAYOUT_SLOTS.map((slot) => slot.key);
 }
-function resolvePhiStackSlotMeta(node) {
-    const labelsBySlotIndex = new Map();
-    const occupiedSlotIndices = new Set();
-    const children = [
-        ...(node.childLayouts ?? []).map((child) => ({ ...child, _kindOrder: 0 })),
-        ...(node.childWidgets ?? []).map((child) => ({ ...child, _kindOrder: 1 })),
-    ].sort((left, right) => left.slotIndex - right.slotIndex || left.sortOrder - right.sortOrder || left._kindOrder - right._kindOrder || comparePhiCmsInstanceIds(left.id, right.id));
-    for (const child of children) {
-        occupiedSlotIndices.add(child.slotIndex);
-        const label = child.label?.trim();
-        if (label && !labelsBySlotIndex.has(child.slotIndex)) {
-            labelsBySlotIndex.set(child.slotIndex, label);
-        }
-    }
-    return PHI_CMS_STACK_LAYOUT_SLOTS
-        .filter((slot) => occupiedSlotIndices.has(slot.slotIndex))
-        .map((slot) => ({
-        key: slot.key,
-        label: labelsBySlotIndex.get(slot.slotIndex) ?? slot.label,
-        slotIndex: slot.slotIndex,
-        hasContent: true,
-    }));
-}
 export const PHI_STACK_LAYOUT_PLUGIN = {
     ...PHI_STACK_LAYOUT_DEFINITION,
     parseConfig: parsePhiCmsStackLayoutConfig,
-    ...definePhiLayoutRenderers(({ node, config, renderSequentialSlotChildren }, renderMode) => (_jsx(PhiStackLayout, { blockId: node.id, layoutKind: "stack", slots: renderSequentialSlotChildren(node), slotKeys: resolvePhiStackSlotKeys(), slotMeta: resolvePhiStackSlotMeta(node), renderMode: renderMode, defaultActiveSlotKey: config.defaultActiveSlotKey, slotDisplay: config.slotDisplay, mountPolicy: config.mountPolicy, slotTransition: config.slotTransition, slotTransitionDurationMs: config.slotTransitionDurationMs, slotTransitionEasing: config.slotTransitionEasing, slotAnchor: resolvePhiLayoutAnchor(config.anchor, PHI_STACK_LAYOUT_DEFINITION.defaultAnchor), editSlotAnchor: resolvePhiLayoutAnchor(config.anchor, PHI_STACK_LAYOUT_DEFINITION.defaultAnchor), zIndex: config.zIndex, shadow: config.shadow, effect: config.effect, padding: config.padding, paddingTop: config.paddingTop, paddingRight: config.paddingRight, paddingBottom: config.paddingBottom, paddingLeft: config.paddingLeft, background: config.background, borderSource: config.borderSource, border: config.border, borderRadius: config.borderRadius, labelEnd: config.labelEnd, size: config.size, minSize: config.minSize, maxSize: config.maxSize, collapsedSizeHint: config.collapsedSizeHint }, `layout-${node.id}`))),
+    ...definePhiLayoutRenderers(({ node, config, renderSequentialSlotChildren }, renderMode) => (_jsx(PhiStackLayout, { blockId: node.id, layoutKind: "stack", slots: renderSequentialSlotChildren(node), slotKeys: resolvePhiStackSlotKeys(), slotMeta: resolvePhiLayoutSlotMeta(node, PHI_CMS_STACK_LAYOUT_SLOTS), renderMode: renderMode, defaultActiveSlotKey: config.defaultActiveSlotKey, slotDisplay: config.slotDisplay, mountPolicy: config.mountPolicy, slotTransition: config.slotTransition, slotTransitionDurationMs: config.slotTransitionDurationMs, slotTransitionEasing: config.slotTransitionEasing, slotAnchor: resolvePhiLayoutAnchor(config.anchor, PHI_STACK_LAYOUT_DEFINITION.defaultAnchor), editSlotAnchor: resolvePhiLayoutAnchor(config.anchor, PHI_STACK_LAYOUT_DEFINITION.defaultAnchor), zIndex: config.zIndex, surface: config.surface, padding: config.padding, paddingTop: config.paddingTop, paddingRight: config.paddingRight, paddingBottom: config.paddingBottom, paddingLeft: config.paddingLeft, labelEnd: config.labelEnd, size: config.size, minSize: config.minSize, maxSize: config.maxSize, collapsedSizeHint: config.collapsedSizeHint }, `layout-${node.id}`))),
 };

package/components/layouts/plugins/three-column-layout-plugin.js

@@ -7,5 +7,5 @@ import { PHI_THREE_COLUMN_LAYOUT_DEFINITION } from "../layout-definitions";
 export const PHI_THREE_COLUMN_LAYOUT_PLUGIN = {
     ...PHI_THREE_COLUMN_LAYOUT_DEFINITION,
     parseConfig: parsePhiCmsThreeColumnLayoutConfig,
-    ...definePhiLayoutRenderers(({ node, config, renderSequentialSlotChildren }, renderMode) => (_jsx(PhiThreeColumnLayout, { blockId: node.id, layoutKind: "threecol", slots: renderSequentialSlotChildren(node), balancedSides: config.balancedSides, gap: config.gap, align: config.align, justify: config.justify, wrap: config.wrap, leftWidth: config.leftWidth, middleWidth: config.middleWidth, rightWidth: config.rightWidth, editSlotAnchor: resolvePhiLayoutAnchor(config.anchor, PHI_THREE_COLUMN_LAYOUT_DEFINITION.defaultAnchor), zIndex: config.zIndex, shadow: config.shadow, effect: config.effect, padding: config.padding, paddingTop: config.paddingTop, paddingRight: config.paddingRight, paddingBottom: config.paddingBottom, paddingLeft: config.paddingLeft, background: config.background, borderSource: config.borderSource, border: config.border, borderRadius: config.borderRadius, labelEnd: config.labelEnd, size: config.size, minSize: config.minSize, maxSize: config.maxSize, collapsedSizeHint: config.collapsedSizeHint, renderMode: renderMode }, `layout-${node.id}`))),
+    ...definePhiLayoutRenderers(({ node, config, renderSequentialSlotChildren }, renderMode) => (_jsx(PhiThreeColumnLayout, { blockId: node.id, layoutKind: "threecol", slots: renderSequentialSlotChildren(node), balancedSides: config.balancedSides, gap: config.gap, align: config.align, justify: config.justify, wrap: config.wrap, leftWidth: config.leftWidth, middleWidth: config.middleWidth, rightWidth: config.rightWidth, editSlotAnchor: resolvePhiLayoutAnchor(config.anchor, PHI_THREE_COLUMN_LAYOUT_DEFINITION.defaultAnchor), zIndex: config.zIndex, surface: config.surface, padding: config.padding, paddingTop: config.paddingTop, paddingRight: config.paddingRight, paddingBottom: config.paddingBottom, paddingLeft: config.paddingLeft, labelEnd: config.labelEnd, size: config.size, minSize: config.minSize, maxSize: config.maxSize, collapsedSizeHint: config.collapsedSizeHint, renderMode: renderMode }, `layout-${node.id}`))),
 };

package/components/layouts/split-card-geometry.d.ts

@@ -0,0 +1,14 @@
+import type { PhiSurfaceGroundFrame } from "../surface/phi-surface-ground";
+/**
+ * Where one card's part of the shared Background lies, measured against the card.
+ *
+ * The Background runs once across both cards, so each card shows the piece of it that lies behind it:
+ * the paint is as wide as the Split Card's content box (`100cqw`, the Split Card being the query
+ * container) and moved left by the card's own offset. The left card's offset is nothing; the right
+ * card's is the left card's width and the gap, and the left card's width is fixed by the columns
+ * (`resolvePhiSplitCardColumns`): what the gap leaves, shared 1 to φ, or φ to 1 when swapped. The
+ * height needs nothing: both cards are stretched to the row, which is the content box's height.
+ */
+export declare function resolvePhiSplitCardGroundFrame(side: "left" | "right", gap: string, swapped?: boolean): PhiSurfaceGroundFrame;
+/** The two columns: the smaller card left and the larger right, or the other way round when swapped. */
+export declare function resolvePhiSplitCardColumns(swapped?: boolean): "minmax(0, 1.61803398875fr) minmax(0, 1fr)" | "minmax(0, 1fr) minmax(0, 1.61803398875fr)";

package/components/layouts/split-card-geometry.js

@@ -0,0 +1,32 @@
+/*
+ * The Split Card's geometry, apart from its Client half: the Layout renders on the server and reads the
+ * ratio for its columns, and a value imported from a Client file arrives there as a client reference.
+ */
+/** The golden ratio the two cards stand in: the larger one is φ times as wide as the smaller. */
+const PHI_SPLIT_CARD_RATIO = 1.61803398875;
+/** Both cards in units of the left one: 1 + φ, written out so the CSS carries no float residue. */
+const PHI_SPLIT_CARD_SHARES = "2.61803398875";
+/**
+ * Where one card's part of the shared Background lies, measured against the card.
+ *
+ * The Background runs once across both cards, so each card shows the piece of it that lies behind it:
+ * the paint is as wide as the Split Card's content box (`100cqw`, the Split Card being the query
+ * container) and moved left by the card's own offset. The left card's offset is nothing; the right
+ * card's is the left card's width and the gap, and the left card's width is fixed by the columns
+ * (`resolvePhiSplitCardColumns`): what the gap leaves, shared 1 to φ, or φ to 1 when swapped. The
+ * height needs nothing: both cards are stretched to the row, which is the content box's height.
+ */
+export function resolvePhiSplitCardGroundFrame(side, gap, swapped = false) {
+    const leftShare = swapped ? ` * ${PHI_SPLIT_CARD_RATIO}` : "";
+    const leftWidth = `((100cqw - ${gap})${leftShare} / ${PHI_SPLIT_CARD_SHARES})`;
+    return {
+        left: side === "left" ? "0px" : `calc(-1 * (${leftWidth} + ${gap}))`,
+        width: "100cqw",
+    };
+}
+/** The two columns: the smaller card left and the larger right, or the other way round when swapped. */
+export function resolvePhiSplitCardColumns(swapped = false) {
+    return swapped
+        ? `minmax(0, ${PHI_SPLIT_CARD_RATIO}fr) minmax(0, 1fr)`
+        : `minmax(0, 1fr) minmax(0, ${PHI_SPLIT_CARD_RATIO}fr)`;
+}

package/components/layouts/stack-signals.d.ts

@@ -17,4 +17,9 @@ export type PhiStackSignalMessage = {
     value: PhiStackSignalValue;
 };
 export declare function isPhiStackSignalMessage(value: unknown): value is PhiStackSignalMessage;
+/**
+ * The Stack instance id an address names: what a `stackMeta` message is keyed by, and what a stack-mode
+ * Choice compares it with to know the message is about its own Stack.
+ */
+export declare function readPhiStackSignalAddressKey(address: string | null | undefined): string | null;
 export declare function resolvePhiStackSignalMessage(signal: PhiSignal): PhiStackSignalMessage | null;

package/components/layouts/stack-signals.js

@@ -1,3 +1,4 @@
+import { isPhiRecord } from "../../helpers/is-record";
 import { readPhiCmsInstanceId } from "../../types/cms-instance-id";
 export const PHI_STACK_META_SIGNAL_CHANNEL = "stackMeta";
 export const PHI_STACK_ACTIVE_SLOT_SIGNAL_CHANNEL = "activeSlotIndex";
@@ -13,18 +14,25 @@ export function isPhiStackSignalMessage(value) {
         !!messageValue &&
         typeof messageValue.activeSlotIndex === "number");
 }
+/**
+ * The Stack instance id an address names: what a `stackMeta` message is keyed by, and what a stack-mode
+ * Choice compares it with to know the message is about its own Stack.
+ */
+export function readPhiStackSignalAddressKey(address) {
+    return address?.startsWith("cms:")
+        ? readPhiCmsInstanceId(address.slice("cms:".length).split(":", 1)[0]) ?? null
+        : null;
+}
 export function resolvePhiStackSignalMessage(signal) {
     const value = signal.value;
-    if (!value || typeof value !== "object" || Array.isArray(value)) {
+    if (!isPhiRecord(value)) {
         return null;
     }
     if (typeof value.activeSlotIndex !== "number") {
         return null;
     }
     const address = signal.receiver === "broadcast" ? signal.sender ?? null : signal.receiver ?? signal.sender ?? null;
-    const key = address?.startsWith("cms:")
-        ? readPhiCmsInstanceId(address.slice("cms:".length).split(":", 1)[0])
-        : null;
+    const key = readPhiStackSignalAddressKey(address);
     if (!key) {
         return null;
     }

package/components/layouts/use-phi-slot-sequence.d.ts

@@ -37,7 +37,6 @@ export type PhiSlotSequence = {
      */
     setActiveIndex: (index: number) => void;
 };
-export declare function clampPhiSlotIndex(index: number, slotCount: number): number;
 /**
  * How many slots a sequence offers while it is being authored: the ones it holds, and one more.
  *
@@ -50,14 +49,6 @@ export declare function clampPhiSlotIndex(index: number, slotCount: number): num
  * filled one rather than a count of children. The layout's own slot list is the ceiling.
  */
 export declare function resolvePhiSequenceEditableSlotCount(slots: readonly unknown[], slotKeys: readonly string[]): number;
-/**
- * Where a sequence stands before anything has moved it: the configured slot, or the first one.
- *
- * A key no slot carries resolves to the first slot rather than to nothing, because a sequence always
- * stands somewhere. The Inspector offers the declared slots as a list, so the case is a stored value
- * from a layout that has since been reshaped, not a typo.
- */
-export declare function resolvePhiSlotIndexByKey(slotKeys: string[], defaultActiveSlotKey?: string): number;
 export declare function usePhiSlotSequence({ blockId, slots, slotKeys, slotLabels, slotCount, defaultActiveSlotKey, }: {
     blockId: string | number | null | undefined;
     slots: ReactNode[];

package/components/layouts/use-phi-slot-sequence.js

@@ -5,7 +5,7 @@ import { usePhiSignalDispatcher, usePhiSignalListener, } from "../runtime/runtim
 import { usePhiSignalIdentity } from "../runtime/runtime-signal-identity";
 import { PHI_STACK_ACTIVE_SLOT_KEY_SIGNAL_CHANNEL, PHI_STACK_ACTIVE_SLOT_SIGNAL_CHANNEL, PHI_STACK_META_SIGNAL_CHANNEL, } from "./stack-signals";
 import { isRenderablePhiNode } from "./phi-layout-scaffold-utils";
-export function clampPhiSlotIndex(index, slotCount) {
+function clampPhiSlotIndex(index, slotCount) {
     return Math.min(Math.max(index, 0), Math.max(slotCount - 1, 0));
 }
 /**
@@ -29,7 +29,7 @@ export function resolvePhiSequenceEditableSlotCount(slots, slotKeys) {
  * stands somewhere. The Inspector offers the declared slots as a list, so the case is a stored value
  * from a layout that has since been reshaped, not a typo.
  */
-export function resolvePhiSlotIndexByKey(slotKeys, defaultActiveSlotKey) {
+function resolvePhiSlotIndexByKey(slotKeys, defaultActiveSlotKey) {
     const index = slotKeys.indexOf(defaultActiveSlotKey ?? slotKeys[0] ?? "");
     return index >= 0 ? index : 0;
 }

package/components/media/asset-type-label.d.ts

@@ -0,0 +1,6 @@
+/**
+ * The short word a tile or an inspector shows for what an asset is: an image's subtype (`png`), a file's
+ * extension (`pdf`), the content subtype where there is no extension, and the kind where there is nothing.
+ * Three files carried this, two word for word and one shortened to the content type alone.
+ */
+export declare function resolvePhiMediaAssetTypeLabel(kind: string, contentType: string, originalName: string): string;

package/components/media/asset-type-label.js

@@ -0,0 +1,27 @@
+import { PhiMediaKind } from "../../constants/media";
+/**
+ * The short word a tile or an inspector shows for what an asset is: an image's subtype (`png`), a file's
+ * extension (`pdf`), the content subtype where there is no extension, and the kind where there is nothing.
+ * Three files carried this, two word for word and one shortened to the content type alone.
+ */
+export function resolvePhiMediaAssetTypeLabel(kind, contentType, originalName) {
+    const normalizedContentType = contentType.trim().toLowerCase();
+    if (kind === PhiMediaKind.Image) {
+        const subtype = normalizedContentType.startsWith("image/")
+            ? normalizedContentType.split("/", 2)[1]
+            : null;
+        if (subtype) {
+            return subtype.split(";")[0].trim();
+        }
+        return normalizedContentType || "image";
+    }
+    const extension = originalName.trim().split(".").pop()?.trim().toLowerCase();
+    if (extension && extension !== originalName.trim().toLowerCase()) {
+        return extension;
+    }
+    const [, subtype] = normalizedContentType.split("/", 2);
+    if (subtype) {
+        return subtype.split(";")[0].trim();
+    }
+    return kind;
+}

package/components/media/background-asset-projection.d.ts

@@ -1,21 +1,4 @@
 import type { PhiImageDeliveryProjection } from "./image-presentation";
-/**
- * Backgrounds bind an Asset by id, but drawing one needs facts the config cannot hold: the delivery
- * revision, the variant version a focal change bumps, the focal rectangle, and the intrinsic size.
- * Content Widgets
- * already get theirs from a projection (`resolvedContent`); this is the same move for the Region,
- * Layout, and Overlay configs a page or a Builder draft renders.
- *
- * Collecting and applying are pure and live here so the live render and the Builder share one rule.
- * Only fetching differs: the server resolves in bulk through the reference gateway, the Builder reads
- * the Assets it is allowed to see. Splitting them the other way -- one walk per surface -- is what let
- * the shell Backgrounds render without a revision until a browser check caught it.
- *
- * The walk is shape-driven rather than key-driven on purpose. Background bases sit under `background`,
- * `backgroundConfig`, `rootNodeBackground`, and slot-level keys, and a new container would otherwise
- * silently render a stale crop until someone remembered to extend a key list.
- */
-export declare const PHI_BACKGROUND_RESOLVED_ASSET_KEY = "resolvedAsset";
 type PhiBackgroundProjectableTree = {
     regions: readonly {
         config: Record<string, unknown>;
@@ -26,6 +9,9 @@ type PhiBackgroundProjectableTree = {
     overlays: readonly {
         config: Record<string, unknown>;
     }[];
+    contentWidgets: readonly {
+        config: Record<string, unknown>;
+    }[];
 };
 /** Every Asset id an Asset-bound Background anywhere inside these values binds. */
 export declare function collectPhiBackgroundAssetIdsFromValues(values: readonly unknown[]): number[];