@phis/ui 0.2.0 → 0.3.0

package/components/layouts/clients/phi-content-layout-client.js

@@ -1,28 +1,24 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { isRenderablePhiNode } from "../phi-layout-scaffold-utils";
-import { resolvePhiLayoutInset, } from "../phi-layout-contract";
+import { resolvePhiLayoutInset } from "../phi-layout-contract";
 import { resolvePhiBaseLayoutChrome } from "../phi-layout-view-model";
 import { PhiLayoutAnchoredOverlay } from "./phi-layout-anchored-overlay";
 import { isPhiLayoutAuthoringRender, phiLayoutDebugLayerMarker, phiLayoutSlotClassName, phiLayoutSlotContentMarker, } from "../../../helpers/layout-authoring-markers";
-export function PhiContentLayout({ blockId, slots, renderMode = "live", margin = 0, layoutKind = "content", labelEnd, padding, paddingTop, paddingRight, paddingBottom, paddingLeft, background, backgroundLayer, borderSource, border, borderRadius, effect, shadow, editSlotAction, editRenderInsertControl, editSlotAnchor = "center", style, }) {
+import { PhiLayoutSurfaceBox } from "../phi-layout-surface-box";
+export function PhiContentLayout({ blockId, slots, renderMode = "live", margin = 0, layoutKind = "content", labelEnd, padding, paddingTop, paddingRight, paddingBottom, paddingLeft, surface, editSlotAction, editRenderInsertControl, editSlotAnchor = "center", style, }) {
     const isAuthoringRender = isPhiLayoutAuthoringRender({ editSlotAction, renderMode });
     const slot0 = Array.isArray(slots) ? slots[0] : undefined;
     const hasSlot0 = isRenderablePhiNode(slot0);
     const shouldFillBlock = true;
     const isEditor = renderMode === "editor";
-    const { style: resolvedLayoutStyle, hasExplicitLayoutBackground, } = resolvePhiBaseLayoutChrome({
+    const { style: resolvedLayoutStyle, ground, hasExplicitLayoutBackground, } = resolvePhiBaseLayoutChrome({
         labelEnd,
         padding,
         paddingTop,
         paddingRight,
         paddingBottom,
         paddingLeft,
-        background,
-        borderSource,
-        border,
-        borderRadius,
-        effect,
-        shadow,
+        surface,
     });
     const resolvedLayoutInset = resolvePhiLayoutInset({
         padding,
@@ -31,14 +27,14 @@ export function PhiContentLayout({ blockId, slots, renderMode = "live", margin =
         paddingBottom,
         paddingLeft,
     });
-    return (_jsxs("div", { "data-layout-kind": layoutKind, "data-phi-block-id": blockId ?? undefined, "data-phi-block-render-mode": renderMode, "data-phi-debug-scaffold": undefined, "data-phi-layout-debug-layer": phiLayoutDebugLayerMarker(isAuthoringRender), "data-phi-layout-has-slot0": hasSlot0 ? "true" : "false", "data-phi-layout-has-explicit-layout-background": hasExplicitLayoutBackground ? "true" : "false", className: "phi-layout", style: {
+    return (_jsxs(PhiLayoutSurfaceBox, { blockId: blockId, surface: surface, ground: ground, "data-layout-kind": layoutKind, "data-phi-block-id": blockId ?? undefined, "data-phi-block-render-mode": renderMode, "data-phi-debug-scaffold": undefined, "data-phi-layout-debug-layer": phiLayoutDebugLayerMarker(isAuthoringRender), "data-phi-layout-has-slot0": hasSlot0 ? "true" : "false", "data-phi-layout-has-explicit-layout-background": hasExplicitLayoutBackground ? "true" : "false", className: "phi-layout", style: {
             position: hasSlot0 || (isEditor && editSlotAction) ? "relative" : undefined,
             minWidth: 0,
             minHeight: 0,
             margin,
             ...resolvedLayoutStyle,
             ...style,
-        }, children: [backgroundLayer, _jsx("div", { className: phiLayoutSlotClassName(isAuthoringRender), "data-phi-layout-has-content": phiLayoutSlotContentMarker(isAuthoringRender, hasSlot0), style: {
+        }, children: [_jsx("div", { className: phiLayoutSlotClassName(isAuthoringRender), "data-phi-layout-has-content": phiLayoutSlotContentMarker(isAuthoringRender, hasSlot0), style: {
                     display: "flex",
                     flexDirection: "column",
                     alignItems: "stretch",

package/components/layouts/clients/phi-flex-layout-client.d.ts

@@ -2,6 +2,13 @@ import { type CSSProperties, type ReactNode } from "react";
 import { type PhiBaseLayoutProps } from "../phi-layout-view-model";
 import type { PhiAnchorWidgetPlacement } from "../../controls/phi-anchor-control-contract";
 type PhiFlexLayoutDistribution = "anchor" | "between" | "around" | "evenly";
+/**
+ * The Flex Layout, in a row or -- as `layoutKind: "verticalflex"` -- in a column.
+ *
+ * The column used to be a second component of its own, 105 lines the same as this one and the rest a
+ * copy that had drifted; this one already branched on the axis everywhere it matters. The row's
+ * distribution, wrapping and separators are the row's; the column states gap and anchor.
+ */
 export type PhiFlexLayoutProps = Omit<PhiBaseLayoutProps, "slots"> & {
     slots: ReactNode[];
     gap?: CSSProperties["gap"];

package/components/layouts/clients/phi-flex-layout-client.js

@@ -5,7 +5,8 @@ import { resolvePhiLayoutSlotChildSizing } from "./phi-layout-anchored-overlay";
 import { resolvePhiLayoutDefaults } from "../../../helpers/cms-layout-defaults";
 import { resolvePhiBaseLayoutChrome, resolvePhiBaseLayoutSlotStates, } from "../phi-layout-view-model";
 import { isPhiLayoutAuthoringRender, phiLayoutDebugLayerMarker, phiLayoutSlotClassName, phiLayoutSlotContentMarker, } from "../../../helpers/layout-authoring-markers";
-const PHI_FLEX_LAYOUT_DEFAULTS = resolvePhiLayoutDefaults("flex");
+import { PhiLayoutSurfaceBox } from "../phi-layout-surface-box";
+import { PHI_CMS_MAX_LAYOUT_SLOTS } from "../../../constants/cms-layout-types";
 export function PhiFlexLayout({ slots, ...layoutProps }) {
     // Named fields rather than the rest object: handing the compiler a whole rest object makes every
     // value later destructured out of it look like it may change, which costs the component its memoization.
@@ -15,25 +16,21 @@ export function PhiFlexLayout({ slots, ...layoutProps }) {
         capabilities: layoutProps.capabilities,
         renderMode: layoutProps.renderMode,
     });
-    const { layoutKind = "flex", gap = PHI_FLEX_LAYOUT_DEFAULTS.gap, distribution = PHI_FLEX_LAYOUT_DEFAULTS.distribution ?? "anchor", wrap = PHI_FLEX_LAYOUT_DEFAULTS.wrap, verticalSeparators = false, separatorBeforeFirst = false, separatorSpan = PHI_FLEX_LAYOUT_DEFAULTS.separatorSpan, editSlotAnchor, renderMode, padding, paddingTop, paddingRight, paddingBottom, paddingLeft, background, backgroundLayer, borderSource, border, borderRadius, effect, shadow, editSlotAction, editRenderInsertControl, editSlotLabels, style, labelEnd, } = layoutProps;
-    const resolvedVertical = false;
+    const resolvedVertical = layoutProps.layoutKind === "verticalflex";
+    const layoutDefaults = resolvePhiLayoutDefaults(resolvedVertical ? "verticalflex" : "flex");
+    const { layoutKind = "flex", gap = layoutDefaults.gap, distribution = layoutDefaults.distribution ?? "anchor", wrap = layoutDefaults.wrap, verticalSeparators = false, separatorBeforeFirst = false, separatorSpan = layoutDefaults.separatorSpan, editSlotAnchor, renderMode, padding, paddingTop, paddingRight, paddingBottom, paddingLeft, surface, editSlotAction, editRenderInsertControl, editSlotLabels, style, labelEnd, } = layoutProps;
     const resolvedSlotStates = resolvePhiBaseLayoutSlotStates(slots.length, layoutProps.initialSlotStates);
-    const resolvedGap = normalizePhiCssSize(gap) ?? PHI_FLEX_LAYOUT_DEFAULTS.gap;
+    const resolvedGap = normalizePhiCssSize(gap) ?? layoutDefaults.gap;
     const resolvedRenderMode = renderMode ?? "live";
     const isEditMode = resolvedRenderMode === "editor";
-    const { style: resolvedLayoutStyle, hasExplicitLayoutBackground, } = resolvePhiBaseLayoutChrome({
+    const { style: resolvedLayoutStyle, ground, hasExplicitLayoutBackground, } = resolvePhiBaseLayoutChrome({
         labelEnd,
         padding,
         paddingTop,
         paddingRight,
         paddingBottom,
         paddingLeft,
-        background,
-        borderSource,
-        border,
-        borderRadius,
-        effect,
-        shadow,
+        surface,
     });
     const resolvedSeparatorSpan = normalizePhiCssSize(separatorSpan) ?? "75%";
     const resolvedSeparatorCrossSize = typeof resolvedSeparatorSpan === "string" ? `max(${resolvedSeparatorSpan}, 1rem)` : resolvedSeparatorSpan;
@@ -107,12 +104,62 @@ export function PhiFlexLayout({ slots, ...layoutProps }) {
             return null;
         }
         const slotSizing = resolvePhiLayoutSlotChildSizing(child);
-        const shouldFillMainAxis = resolvedVertical ? slotSizing.stretchesBlock : slotSizing.stretchesInline;
-        const shouldFillCrossAxis = resolvedVertical ? slotSizing.stretchesInline : slotSizing.stretchesBlock;
-        const minMainSize = resolvedVertical ? slotSizing.minBlockSize : slotSizing.minInlineSize;
-        const maxMainSize = resolvedVertical ? slotSizing.maxBlockSize : slotSizing.maxInlineSize;
-        const minCrossSize = resolvedVertical ? slotSizing.minInlineSize : slotSizing.minBlockSize;
-        const maxCrossSize = resolvedVertical ? slotSizing.maxInlineSize : slotSizing.maxBlockSize;
+        const collapsedStyle = slotState === "collapsed"
+            ? {
+                width: 0,
+                minWidth: 0,
+                maxWidth: 0,
+                height: 0,
+                minHeight: 0,
+                maxHeight: 0,
+                flexBasis: 0,
+                flexGrow: 0,
+                flexShrink: 0,
+                overflow: "hidden",
+                opacity: 0,
+                pointerEvents: "none",
+            }
+            : {};
+        if (resolvedVertical) {
+            const shouldFillMainAxis = slotSizing.stretchesBlock;
+            const shouldFillCrossAxis = slotSizing.stretchesInline;
+            return (_jsx("div", { className: phiLayoutSlotClassName(isAuthoringRender), "data-phi-layout-has-content": phiLayoutSlotContentMarker(isAuthoringRender, true), style: {
+                    flexGrow: shouldFillMainAxis ? 1 : 0,
+                    flexShrink: shouldFillMainAxis ? 1 : 0,
+                    flexBasis: "auto",
+                    ...collapsedStyle,
+                    width: shouldFillCrossAxis ? "100%" : undefined,
+                    height: shouldFillMainAxis ? "100%" : undefined,
+                    minWidth: 0,
+                    minHeight: 0,
+                    alignSelf: shouldFillCrossAxis ? "stretch" : undefined,
+                    display: "flex",
+                    flexDirection: "column",
+                    /*
+                     * The slot carries the Layout's own cross-axis alignment, because the slot is scaffolding and
+                     * the anchor is about the content. A slot is as wide as what it holds wants to be, and a child
+                     * that caps its width -- a column of copy at a readable measure -- is narrower than that: it
+                     * then stands at the left edge of a centred slot, which reads as "not centred" and is.
+                     *
+                     * Except where the child fills, which has to be stretched: `width: 100%` inside a shrink-to-fit
+                     * box is circular and resolves to zero, and a centred flex item is shrink-to-fit. That is not
+                     * a reason to give up the placement, though -- a filling child that also caps itself leaves
+                     * room over, and the placement margins put it in the middle of that room
+                     * instead. Stretching and placing are two jobs, and `align-items` can only do one of them.
+                     */
+                    alignItems: shouldFillCrossAxis ? "stretch" : resolvedFlowAlignment.alignItems,
+                    ...resolvePhiSlotPlacementMargins({
+                        inline: shouldFillCrossAxis ? phiPlacementFromWord(resolvedFlowAlignment.alignItems) : null,
+                        block: null,
+                    }),
+                }, children: child }, `content-${index}`));
+        }
+        const shouldFillMainAxis = slotSizing.stretchesInline;
+        const shouldFillCrossAxis = slotSizing.stretchesBlock;
+        const minMainSize = slotSizing.minInlineSize;
+        const maxMainSize = slotSizing.maxInlineSize;
+        const minCrossSize = slotSizing.minBlockSize;
+        const maxCrossSize = slotSizing.maxBlockSize;
         const shouldWrap = resolvedWrap != null && resolvedWrap !== "nowrap";
         const usesMinMainBasis = shouldWrap && minMainSize != null;
         const canShrinkWithinMax = shouldWrap && maxMainSize != null;
@@ -121,50 +168,29 @@ export function PhiFlexLayout({ slots, ...layoutProps }) {
             : shouldFillMainAxis
                 ? 0
                 : "auto";
-        const placesInline = resolvedVertical ? shouldFillCrossAxis : shouldFillMainAxis;
         const slotPlacementMargins = resolvePhiSlotPlacementMargins({
-            inline: placesInline
-                ? phiPlacementFromWord(resolvedVertical ? resolvedFlowAlignment.alignItems : resolvedJustifyContent)
-                : null,
+            inline: shouldFillMainAxis ? phiPlacementFromWord(resolvedJustifyContent) : null,
             block: null,
         });
         return (_jsx("div", { className: phiLayoutSlotClassName(isAuthoringRender), "data-phi-layout-has-content": phiLayoutSlotContentMarker(isAuthoringRender, true), style: {
                 flexGrow: shouldFillMainAxis ? 1 : 0,
                 flexShrink: shouldFillMainAxis || usesMinMainBasis || canShrinkWithinMax ? 1 : 0,
                 flexBasis,
-                ...(slotState === "collapsed"
-                    ? {
-                        width: 0,
-                        minWidth: 0,
-                        maxWidth: 0,
-                        height: 0,
-                        minHeight: 0,
-                        maxHeight: 0,
-                        flexBasis: 0,
-                        flexGrow: 0,
-                        flexShrink: 0,
-                        overflow: "hidden",
-                        opacity: 0,
-                        pointerEvents: "none",
-                    }
-                    : {}),
-                width: resolvedVertical ? (shouldFillCrossAxis ? "100%" : undefined) : undefined,
-                height: resolvedVertical
-                    ? shouldFillMainAxis ? "100%" : undefined
-                    : shouldFillCrossAxis ? "100%" : undefined,
-                minWidth: resolvedVertical ? (minCrossSize ?? 0) : (minMainSize ?? 0),
-                minHeight: resolvedVertical ? (minMainSize ?? 0) : (minCrossSize ?? 0),
-                maxWidth: resolvedVertical ? maxCrossSize : maxMainSize,
-                maxHeight: resolvedVertical ? maxMainSize : maxCrossSize,
+                ...collapsedStyle,
+                height: shouldFillCrossAxis ? "100%" : undefined,
+                minWidth: minMainSize ?? 0,
+                minHeight: minCrossSize ?? 0,
+                maxWidth: maxMainSize,
+                maxHeight: maxCrossSize,
                 alignSelf: shouldFillCrossAxis ? "stretch" : undefined,
                 display: "flex",
                 flexDirection: "column",
                 /*
                  * The inline placement again, as the margins a child that fills and caps itself is moved by.
                  * In a row the inline axis is the main one, so a slot that grows and holds a capped child
-                 * places it by the Layout's `justify-content`; in a column it is the cross axis and the slot's
-                 * own alignment. A slot that does not grow is as wide as its child and states `0`, which is
-                 * what stops a Flex Vertical further up from placing this Layout's children.
+                 * places it by the Layout's `justify-content`. A slot that does not grow is as wide as its
+                 * child and states `0`, which is what stops a Flex Vertical further up from placing this
+                 * Layout's children.
                  */
                 ...slotPlacementMargins,
             }, children: child }, `content-${index}`));
@@ -189,7 +215,7 @@ export function PhiFlexLayout({ slots, ...layoutProps }) {
         : renderableSlots.map(({ child, index }) => renderSlotChild(child, index));
     const renderedContentChildren = contentChildren;
     const insertAfterSlotIndex = slots.length;
-    const insertButton = isEditMode && editSlotAction && editRenderInsertControl ? (_jsx("div", { className: phiLayoutSlotClassName(isAuthoringRender), "data-phi-layout-has-content": phiLayoutSlotContentMarker(isAuthoringRender, false), style: {
+    const insertButton = isEditMode && editSlotAction && editRenderInsertControl && insertAfterSlotIndex < PHI_CMS_MAX_LAYOUT_SLOTS ? (_jsx("div", { className: phiLayoutSlotClassName(isAuthoringRender), "data-phi-layout-has-content": phiLayoutSlotContentMarker(isAuthoringRender, false), style: {
             flexGrow: 0,
             flexShrink: 0,
             flexBasis: "auto",
@@ -212,7 +238,7 @@ export function PhiFlexLayout({ slots, ...layoutProps }) {
         minHeight: 0,
         ...style,
     };
-    return (_jsxs("div", { "data-layout-kind": layoutKind, "data-layout-axis": resolvedVertical ? "vertical" : "horizontal", className: "phi-layout", "data-phi-block-render-mode": resolvedRenderMode, "data-phi-layout-debug-layer": phiLayoutDebugLayerMarker(isAuthoringRender), "data-phi-layout-has-explicit-layout-background": hasExplicitLayoutBackground ? "true" : "false", style: {
+    return (_jsxs(PhiLayoutSurfaceBox, { blockId: layoutProps.blockId, surface: surface, ground: ground, "data-layout-kind": layoutKind, "data-layout-axis": resolvedVertical ? "vertical" : "horizontal", className: "phi-layout", "data-phi-block-render-mode": resolvedRenderMode, "data-phi-layout-debug-layer": phiLayoutDebugLayerMarker(isAuthoringRender), "data-phi-layout-has-explicit-layout-background": hasExplicitLayoutBackground ? "true" : "false", style: {
             display: "flex",
             flexDirection: resolvedVertical ? "column" : "row",
             alignItems: resolvedFlowAlignment.alignItems,
@@ -220,5 +246,5 @@ export function PhiFlexLayout({ slots, ...layoutProps }) {
             flexWrap: resolvedWrap,
             gap: resolvedGap,
             ...resolvedStyle,
-        }, children: [backgroundLayer, renderedContentChildren, insertButton] }));
+        }, children: [renderedContentChildren, insertButton] }));
 }

package/components/layouts/clients/phi-grid-layout-client.js

@@ -1,11 +1,12 @@
 "use client";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { normalizePhiCssSize, resolvePhiLayoutInset, phiGridPlacementWord, phiPlacementFromWord, resolvePhiPlacement, resolvePhiSlotPlacementMargins, } from "../phi-layout-contract";
 import { PhiBaseLayout } from "../phi-base-layout";
 import { resolvePhiLayoutDefaults } from "../../../helpers/cms-layout-defaults";
 import { resolvePhiLayoutSlotChildSizing } from "./phi-layout-anchored-overlay";
-import { resolvePhiGridSlotColumnProperties, resolvePhiGridSlotProfileColumns, } from "../phi-grid-contract";
+import { PHI_GRID_LAYOUT_PROFILES, resolvePhiGridColumns, resolvePhiGridSlotColumnProperties, resolvePhiGridSlotGapShares, resolvePhiGridSlotProfileColumns, } from "../phi-grid-contract";
 import { isPhiLayoutAuthoringRender, phiLayoutSlotClassName, phiLayoutSlotContentMarker, } from "../../../helpers/layout-authoring-markers";
+import { PHI_CMS_MAX_LAYOUT_SLOTS } from "../../../constants/cms-layout-types";
 const PHI_GRID_LAYOUT_DEFAULTS = resolvePhiLayoutDefaults("grid");
 function resolveGridSlotPlacementStyle(slot) {
     /*
@@ -25,20 +26,29 @@ function resolveGridSlotPlacementStyle(slot) {
     };
 }
 /*
- * The 24 track guides of the edit overlay, each inset by its share of the column gap the same way a
- * slot is (`resolvePhiGridSlotGapShares`): the tracks are flush, so a guide that filled its track would
- * draw one continuous band where the operator is meant to see columns and the gaps between them.
+ * The edit overlay's guides: one per column of the row, for every width, and the Grid's container
+ * queries show the set its width answers (`styles/layout.css`, `.phi-grid-layout__guide`). Each is inset
+ * by its share of the gap the same way a slot is (`resolvePhiGridSlotGapShares`): the tracks are flush,
+ * so a guide that filled its tracks would draw one continuous band where the operator is meant to see
+ * columns and the gaps between them.
  */
-function resolveGridGuideStyle(index) {
-    return {
-        minWidth: 0,
-        minHeight: "100%",
-        marginInlineStart: `calc(var(--phi-grid-column-gap, 0px) * ${index} / 24)`,
-        marginInlineEnd: `calc(var(--phi-grid-column-gap, 0px) * ${23 - index} / 24)`,
-        border: "1px dashed var(--phi-debug-layer-slot-border)",
-        borderRadius: "var(--ant-border-radius)",
-        background: "var(--phi-debug-layer-slot-background-soft)",
-    };
+function renderGridGuides(profile, columns) {
+    const tracks = 24 / columns;
+    return Array.from({ length: columns }, (_, index) => {
+        const placement = { start: index * tracks + 1, span: tracks };
+        const shares = resolvePhiGridSlotGapShares(placement);
+        return (_jsx("div", { className: `phi-grid-layout__guide phi-grid-layout__guide--${profile}`, style: {
+                gridColumn: `${placement.start} / span ${placement.span}`,
+                gridRow: 1,
+                minWidth: 0,
+                minHeight: "100%",
+                marginInlineStart: `calc(var(--phi-grid-column-gap, 0px) * ${shares.lead} / 24)`,
+                marginInlineEnd: `calc(var(--phi-grid-column-gap, 0px) * ${shares.trail} / 24)`,
+                border: "1px dashed var(--phi-debug-layer-slot-border)",
+                borderRadius: "var(--ant-border-radius)",
+                background: "var(--phi-debug-layer-slot-background-soft)",
+            } }, `grid-guide-${profile}-${index}`));
+    });
 }
 export function PhiGridLayout({ slots, ...layoutProps }) {
     // Named fields rather than the rest object: handing the compiler a whole rest object makes every
@@ -49,26 +59,16 @@ export function PhiGridLayout({ slots, ...layoutProps }) {
         capabilities: layoutProps.capabilities,
         renderMode: layoutProps.renderMode,
     });
-    const { gap = PHI_GRID_LAYOUT_DEFAULTS.gap, columnGap, slotPlacements, anchor, editSlotAnchor, align, justify, renderMode, style, slotStyle, editSlotAction, editRenderInsertControl, editSlotLabels, padding, paddingTop, paddingRight, paddingBottom, paddingLeft, layoutKind = "grid", } = layoutProps;
+    const { gap = PHI_GRID_LAYOUT_DEFAULTS.gap, columns, slotPlacements, anchor, editSlotAnchor, renderMode, style, editSlotAction, editRenderInsertControl, editSlotLabels, padding, paddingTop, paddingRight, paddingBottom, paddingLeft, layoutKind = "grid", } = layoutProps;
     const resolvedGap = normalizePhiCssSize(gap) ?? PHI_GRID_LAYOUT_DEFAULTS.gap;
     /*
-     * One gap for both axes, and the column gap only where somebody said so.
-     *
-     * `gap` is the Grid's distance between its slots; it reached `row-gap` alone, and `columnGap` was the
-     * only one of the two with a field in the Inspector. So the vertical distance could not be set at all
-     * and the horizontal was the only thing that moved -- two halves of one idea, one of them unreachable.
-     * A stated column gap still wins, which is what a Grid wants that holds rows apart and columns flush;
-     * the panel preset is exactly that and says its `0` out loud.
-     */
-    const resolvedColumnGap = normalizePhiCssSize(columnGap) ?? resolvedGap;
-    /*
-     * One reading of the anchor, in the grid spelling, and the author's own `align`/`justify` wherever it
-     * says nothing. The edit anchor arrives as one of the nine words, where every axis is stated; the
-     * config anchor arrives as the pair, where an axis may be missing and stays missing.
+     * One reading of the anchor, in the grid spelling. The edit anchor arrives as one of the nine words,
+     * where every axis is stated; the config anchor arrives as the pair, where an axis may be missing and
+     * stays missing.
      */
     const placement = resolvePhiPlacement(editSlotAnchor ?? anchor);
-    const resolvedAlignItems = phiGridPlacementWord(placement.block) ?? align;
-    const resolvedJustifyContent = phiGridPlacementWord(placement.inline) ?? justify;
+    const resolvedAlignItems = phiGridPlacementWord(placement.block);
+    const resolvedJustifyContent = phiGridPlacementWord(placement.inline);
     const slotPlacementMargins = resolvePhiSlotPlacementMargins({
         inline: phiPlacementFromWord(resolvedJustifyContent),
         block: null,
@@ -90,7 +90,8 @@ export function PhiGridLayout({ slots, ...layoutProps }) {
      * where the Form measures inside the padding. The container is now the Layout's own box, so a Grid
      * and a Form of the same room answer the same profile (LAYOUTING.md, "Grid slot placement").
      */
-    const slotColumns = resolvePhiGridSlotProfileColumns(slotPlacements, isEditMode ? [...occupiedSlotIndices, nextInsertSlotIndex] : occupiedSlotIndices);
+    const resolvedColumns = resolvePhiGridColumns(columns);
+    const slotColumns = resolvePhiGridSlotProfileColumns(slotPlacements, isEditMode ? [...occupiedSlotIndices, nextInsertSlotIndex] : occupiedSlotIndices, resolvedColumns);
     const renderedSlots = slots.map((slot, slotIndex) => {
         if (slot === null || slot === undefined || slot === false) {
             return null;
@@ -107,10 +108,9 @@ export function PhiGridLayout({ slots, ...layoutProps }) {
                 justifyContent: resolvedJustifyContent,
                 // The same placement as margins, for a child stretched to the cell and capped; see the Layout contract.
                 ...slotPlacementMargins,
-                ...(slotStyle ?? {}),
             }, children: _jsx("div", { style: resolveGridSlotPlacementStyle(slot), children: slot }) }, slotIndex));
     });
-    if (isEditMode && editSlotAction && editRenderInsertControl) {
+    if (isEditMode && editSlotAction && editRenderInsertControl && nextInsertSlotIndex < PHI_CMS_MAX_LAYOUT_SLOTS) {
         renderedSlots.push(_jsx("div", { className: phiLayoutSlotClassName(isAuthoringRender, "phi-grid-layout__slot"), "data-phi-layout-has-content": phiLayoutSlotContentMarker(isAuthoringRender, false), style: {
                 ...resolvePhiGridSlotColumnProperties(slotColumns.get(nextInsertSlotIndex)),
                 boxSizing: "border-box",
@@ -157,12 +157,11 @@ export function PhiGridLayout({ slots, ...layoutProps }) {
             display: "grid",
             gridTemplateColumns: "repeat(24, minmax(0, 1fr))",
             gap: 0,
-            rowGap: resolvedGap,
             alignContent: "start",
             pointerEvents: "none",
             zIndex: -1,
-        }, children: Array.from({ length: 24 }, (_, index) => (_jsx("div", { style: resolveGridGuideStyle(index) }, `grid-guide-${index}`))) })) : null;
-    return (_jsx(PhiBaseLayout, { ...layoutProps, layoutKind: layoutKind, slots: renderedSlots, gap: undefined, renderMode: renderMode, backgroundLayer: guideOverlay == null ? layoutProps.backgroundLayer : (_jsxs(_Fragment, { children: [layoutProps.backgroundLayer, guideOverlay] })), style: {
+        }, children: PHI_GRID_LAYOUT_PROFILES.flatMap((profile) => renderGridGuides(profile, resolvedColumns[profile])) })) : null;
+    return (_jsx(PhiBaseLayout, { ...layoutProps, layoutKind: layoutKind, slots: renderedSlots, gap: undefined, renderMode: renderMode, underlay: guideOverlay, style: {
             position: "relative",
             /*
              * Its own stacking context, for the guides' `zIndex: -1`. It was `zIndex: 1`, which only lifted
@@ -185,7 +184,7 @@ export function PhiGridLayout({ slots, ...layoutProps }) {
              */
             columnGap: 0,
             rowGap: resolvedGap,
-            ["--phi-grid-column-gap"]: normalizePhiCssSize(resolvedColumnGap),
+            ["--phi-grid-column-gap"]: resolvedGap,
             alignContent: "start",
             gridAutoFlow: "row",
             minWidth: 0,

package/components/layouts/clients/phi-layout-anchored-overlay.d.ts

@@ -22,7 +22,6 @@ export type PhiLayoutSlotChildSizing = {
     maxInlineSize: CSSProperties["maxWidth"];
     maxBlockSize: CSSProperties["maxHeight"];
 };
-export declare function isPhiLayoutNodeChild(child: ReactNode): boolean;
 export declare function resolvePhiLayoutSlotChildSizing(child: ReactNode): PhiLayoutSlotChildSizing;
 export type PhiLayoutAnchoredOverlayProps = {
     anchor?: PhiAnchorWidgetPlacement | null;

package/components/layouts/clients/phi-layout-anchored-overlay.js

@@ -2,14 +2,14 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Children, isValidElement } from "react";
 import { buildPhiSlotChildDataAttributes, resolvePhiSlotChildSizing } from "../../../plugins/runtime/slot-size-policy";
 import { phiFlexPlacementWord, resolvePhiPlacement, resolvePhiSlotPlacementMargins, } from "../phi-layout-contract";
-export function isPhiLayoutNodeChild(child) {
+function isPhiLayoutNodeChild(child) {
     return isValidElement(child) && child.props["data-layout-kind"] != null;
 }
 export function resolvePhiLayoutSlotChildSizing(child) {
     const childNodes = Children.toArray(child);
+    // One child per slot is the contract; sizing a slot by its first of several would hide the break.
     if (childNodes.length > 1) {
-        console.error(`Invalid Phi layout slot: expected exactly one child per slot, received ${childNodes.length}. ` +
-            "Only the first child will be used for sizing.");
+        throw new Error(`Invalid Phi layout slot: expected exactly one child per slot, received ${childNodes.length}.`);
     }
     const resolvedChild = childNodes.length > 0 ? childNodes[0] : child;
     const slotSizing = resolvePhiSlotChildSizing(resolvedChild, isPhiLayoutNodeChild(resolvedChild) ? "layout" : "widget");

package/components/layouts/clients/phi-sequence-slot-editor.d.ts

@@ -50,11 +50,10 @@ export type PhiSequenceSlotEditorProps = {
      * carry the whole authoring model to people who cannot author.
      */
     authoring: PhiLayoutAuthoringSignal;
-    chrome: Pick<PhiBaseLayoutProps, "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "background" | "border" | "borderRadius" | "effect" | "shadow">;
-    backgroundLayer?: ReactNode;
+    chrome: Pick<PhiBaseLayoutProps, "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "surface">;
     editSlotAction?: PhiBaseLayoutProps["editSlotAction"];
     editRenderInsertControl?: PhiLayoutEditRenderInsertControl;
     editSlotAnchor?: PhiAnchorWidgetPlacement | null;
     style?: CSSProperties;
 };
-export declare function PhiSequenceSlotEditor({ slots, slotKeys, slotLabels, slotCount, activeIndex, onActiveIndexChange, slotNoun, layoutKind, renderMode, authoring, chrome, backgroundLayer, editSlotAction, editRenderInsertControl, editSlotAnchor, style, }: PhiSequenceSlotEditorProps): import("react").JSX.Element;
+export declare function PhiSequenceSlotEditor({ slots, slotKeys, slotLabels, slotCount, activeIndex, onActiveIndexChange, slotNoun, layoutKind, renderMode, authoring, chrome, editSlotAction, editRenderInsertControl, editSlotAnchor, style, }: PhiSequenceSlotEditorProps): import("react").JSX.Element;

package/components/layouts/clients/phi-sequence-slot-editor.js

@@ -2,14 +2,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { PhiButtonControl } from "../../controls/phi-button-control";
 import { PhiFlexControl } from "../../controls/phi-flex-control";
-import { LeftOutlined, RightOutlined } from "@ant-design/icons";
 import { resolvePhiLayoutInset, } from "../phi-layout-contract";
 import { resolvePhiBaseLayoutChrome, } from "../phi-layout-view-model";
 import { isRenderablePhiNode } from "../phi-layout-scaffold-utils";
 import { PhiLayoutAnchoredOverlay } from "./phi-layout-anchored-overlay";
 import { isPhiLayoutAuthoringRender, phiLayoutDebugLayerMarker, phiLayoutSlotClassName, phiLayoutSlotContentMarker, } from "../../../helpers/layout-authoring-markers";
 import { PhiTypographyControl } from "../../controls/phi-typography-control";
-export function PhiSequenceSlotEditor({ slots, slotKeys, slotLabels, slotCount, activeIndex, onActiveIndexChange, slotNoun, layoutKind, renderMode, authoring, chrome, backgroundLayer, editSlotAction, editRenderInsertControl, editSlotAnchor = "center", style, }) {
+import { PhiIcon } from "../../shell/phi-icon";
+import { PhiSurfaceGroundLayer } from "../../surface/phi-surface-ground";
+import { PhiSurfaceTone } from "../../surface/phi-surface-tone";
+import { resolvePhiSurfaceToneClassName } from "../../../types/surface";
+export function PhiSequenceSlotEditor({ slots, slotKeys, slotLabels, slotCount, activeIndex, onActiveIndexChange, slotNoun, layoutKind, renderMode, authoring, chrome, editSlotAction, editRenderInsertControl, editSlotAnchor = "center", style, }) {
     const isAuthoringRender = isPhiLayoutAuthoringRender({ ...authoring, renderMode });
     const editableSlotCount = Math.max(slotCount, 1);
     const currentIndex = Math.min(activeIndex, editableSlotCount - 1);
@@ -19,41 +22,41 @@ export function PhiSequenceSlotEditor({ slots, slotKeys, slotLabels, slotCount,
     const currentSlotLabel = slotLabels.find((meta) => meta.index === currentIndex)?.label ?? currentSlotKey;
     const hasPreviousSlot = currentIndex > 0;
     const hasNextSlot = currentIndex < editableSlotCount - 1;
-    const { style: resolvedLayoutStyle, hasExplicitLayoutBackground, } = resolvePhiBaseLayoutChrome(chrome);
+    const { style: resolvedLayoutStyle, ground, hasExplicitLayoutBackground, } = resolvePhiBaseLayoutChrome(chrome);
     const resolvedLayoutInset = resolvePhiLayoutInset(chrome);
-    return (_jsxs("div", { "data-layout-kind": layoutKind, "data-phi-block-render-mode": renderMode, "data-phi-layout-debug-layer": phiLayoutDebugLayerMarker(isAuthoringRender), "data-phi-layout-has-explicit-layout-background": hasExplicitLayoutBackground ? "true" : "false", className: "phi-layout", style: {
-            position: "relative",
-            display: "flex",
-            flexDirection: "column",
-            ...resolvedLayoutStyle,
-            minWidth: 0,
-            minHeight: 0,
-            ...style,
-        }, children: [backgroundLayer, _jsxs(PhiFlexControl, { align: "center", gap: 8, style: {
-                    position: "relative",
-                    zIndex: 2,
-                    flex: "0 0 auto",
-                    width: "100%",
-                    justifyContent: "center",
-                    paddingBottom: "var(--ant-padding-xs)",
-                }, children: [_jsx("span", { onClick: (event) => event.stopPropagation(), children: _jsx(PhiButtonControl, { ariaLabel: `Previous ${slotNoun}`, icon: _jsx(LeftOutlined, {}), size: "small", type: "text", disabled: !hasPreviousSlot, onClick: () => onActiveIndexChange(currentIndex - 1) }) }), _jsxs(PhiTypographyControl, { type: "secondary", style: { fontSize: 12, minWidth: 64, textAlign: "center" }, children: [currentIndex + 1, " / ", editableSlotCount] }), _jsx("span", { onClick: (event) => event.stopPropagation(), children: _jsx(PhiButtonControl, { ariaLabel: `Next ${slotNoun}`, icon: _jsx(RightOutlined, {}), size: "small", type: "text", disabled: !hasNextSlot, onClick: () => onActiveIndexChange(currentIndex + 1) }) })] }), _jsxs("div", { className: phiLayoutSlotClassName(isAuthoringRender), "data-phi-layout-has-content": phiLayoutSlotContentMarker(isAuthoringRender, hasCurrentSlot), "data-phi-sequence-active-slot": currentSlotKey, style: {
-                    position: "relative",
-                    display: "flex",
-                    flex: "1 1 auto",
-                    minWidth: 0,
-                    minHeight: 0,
-                }, children: [hasCurrentSlot ? (_jsx(PhiLayoutAnchoredOverlay, { anchor: editSlotAnchor, positionMode: "flow", fillAvailableInline: true, fillAvailableBlock: true, inset: resolvedLayoutInset, children: currentSlot })) : null, !hasCurrentSlot && editSlotAction && editRenderInsertControl
-                        ? editRenderInsertControl({
-                            presentation: "overlay",
-                            slotIndex: currentIndex,
-                            label: currentSlotLabel,
-                            anchor: editSlotAnchor,
-                            inset: resolvedLayoutInset,
-                            onInsert: (targetSlotIndex) => editSlotAction(targetSlotIndex, {
-                                defaultPickSection: "widget",
-                                allowWidgetSection: true,
-                                slotIndex: targetSlotIndex,
-                            }),
-                        })
-                        : null] })] }));
+    return (_jsx(PhiSurfaceTone, { tone: chrome.surface?.tone, children: _jsxs("div", { "data-layout-kind": layoutKind, "data-phi-block-render-mode": renderMode, "data-phi-layout-debug-layer": phiLayoutDebugLayerMarker(isAuthoringRender), "data-phi-layout-has-explicit-layout-background": hasExplicitLayoutBackground ? "true" : "false", className: ["phi-layout", resolvePhiSurfaceToneClassName(chrome.surface?.tone)].filter(Boolean).join(" "), style: {
+                position: "relative",
+                display: "flex",
+                flexDirection: "column",
+                ...resolvedLayoutStyle,
+                minWidth: 0,
+                minHeight: 0,
+                ...style,
+            }, children: [_jsx(PhiSurfaceGroundLayer, { ground: ground }), _jsxs(PhiFlexControl, { align: "center", gap: 8, style: {
+                        position: "relative",
+                        zIndex: 2,
+                        flex: "0 0 auto",
+                        width: "100%",
+                        justifyContent: "center",
+                        paddingBottom: "var(--ant-padding-xs)",
+                    }, children: [_jsx("span", { onClick: (event) => event.stopPropagation(), children: _jsx(PhiButtonControl, { ariaLabel: `Previous ${slotNoun}`, icon: _jsx(PhiIcon, { name: "left", size: "inherit" }), size: "small", type: "text", disabled: !hasPreviousSlot, onClick: () => onActiveIndexChange(currentIndex - 1) }) }), _jsxs(PhiTypographyControl, { type: "secondary", style: { minWidth: 64, textAlign: "center" }, children: [currentIndex + 1, " / ", editableSlotCount] }), _jsx("span", { onClick: (event) => event.stopPropagation(), children: _jsx(PhiButtonControl, { ariaLabel: `Next ${slotNoun}`, icon: _jsx(PhiIcon, { name: "right", size: "inherit" }), size: "small", type: "text", disabled: !hasNextSlot, onClick: () => onActiveIndexChange(currentIndex + 1) }) })] }), _jsxs("div", { className: phiLayoutSlotClassName(isAuthoringRender), "data-phi-layout-has-content": phiLayoutSlotContentMarker(isAuthoringRender, hasCurrentSlot), "data-phi-sequence-active-slot": currentSlotKey, style: {
+                        position: "relative",
+                        display: "flex",
+                        flex: "1 1 auto",
+                        minWidth: 0,
+                        minHeight: 0,
+                    }, children: [hasCurrentSlot ? (_jsx(PhiLayoutAnchoredOverlay, { anchor: editSlotAnchor, positionMode: "flow", fillAvailableInline: true, fillAvailableBlock: true, inset: resolvedLayoutInset, children: currentSlot })) : null, !hasCurrentSlot && editSlotAction && editRenderInsertControl
+                            ? editRenderInsertControl({
+                                presentation: "overlay",
+                                slotIndex: currentIndex,
+                                label: currentSlotLabel,
+                                anchor: editSlotAnchor,
+                                inset: resolvedLayoutInset,
+                                onInsert: (targetSlotIndex) => editSlotAction(targetSlotIndex, {
+                                    defaultPickSection: "widget",
+                                    allowWidgetSection: true,
+                                    slotIndex: targetSlotIndex,
+                                }),
+                            })
+                            : null] })] }) }));
 }

package/components/layouts/clients/phi-split-card-half.d.ts

@@ -0,0 +1,28 @@
+import type { CSSProperties, HTMLAttributes, ReactNode } from "react";
+import type { PhiCmsInstanceId } from "../../../types/cms-instance-id";
+import { type PhiSurface } from "../../../types/surface";
+export type PhiSplitCardHalfProps = Omit<HTMLAttributes<HTMLDivElement>, "style" | "children"> & {
+    [attribute: `data-${string}`]: string | undefined;
+    blockId: PhiCmsInstanceId | string | number | null | undefined;
+    /** The Split Card's Surface, which both cards wear. */
+    surface: PhiSurface | null | undefined;
+    side: "left" | "right";
+    /** The gap between the cards, as a CSS length; the right card's part of the Background follows it. */
+    gap: string;
+    /** Whether the left card is the larger one; the right card's part of the Background follows it. */
+    swapped?: boolean;
+    style?: CSSProperties;
+    children?: ReactNode;
+};
+/**
+ * One of the Split Card's two cards.
+ *
+ * It wears the Split Card's Surface -- edge, corner, depth, pane and mode, each card its own -- and shows
+ * its part of the Background the two share (`resolvePhiSplitCardGroundFrame`), so a picture or a gradient
+ * runs on behind the right card instead of starting again. Outside the cards nothing is painted.
+ *
+ * A Client Component for the one thing a Server Component cannot do: read the Surface a Signal has set
+ * for the Split Card (`usePhiLayoutSignalSurface`). A moving Background does not move here: each card
+ * would move its own copy, and two copies of one picture moving are not one picture.
+ */
+export declare function PhiSplitCardHalf({ blockId, surface, side, gap, swapped, style, className, children, ...attributes }: PhiSplitCardHalfProps): import("react").JSX.Element;

package/components/layouts/clients/phi-split-card-half.js

@@ -0,0 +1,33 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { resolvePhiSurfaceToneClassName } from "../../../types/surface";
+import { resolvePhiSurfaceStyle } from "../../../helpers/surface-style";
+import { PhiSurfaceGroundLayer } from "../../surface/phi-surface-ground";
+import { resolvePhiSplitCardGroundFrame } from "../split-card-geometry";
+import { PhiSurfaceTone } from "../../surface/phi-surface-tone";
+import { PHI_LAYOUT_SURFACE_RADIUS } from "../phi-layout-contract";
+import { usePhiLayoutSignalSurface } from "../phi-layout-signal-surface";
+/**
+ * One of the Split Card's two cards.
+ *
+ * It wears the Split Card's Surface -- edge, corner, depth, pane and mode, each card its own -- and shows
+ * its part of the Background the two share (`resolvePhiSplitCardGroundFrame`), so a picture or a gradient
+ * runs on behind the right card instead of starting again. Outside the cards nothing is painted.
+ *
+ * A Client Component for the one thing a Server Component cannot do: read the Surface a Signal has set
+ * for the Split Card (`usePhiLayoutSignalSurface`). A moving Background does not move here: each card
+ * would move its own copy, and two copies of one picture moving are not one picture.
+ */
+export function PhiSplitCardHalf({ blockId, surface, side, gap, swapped, style, className, children, ...attributes }) {
+    const signalled = usePhiLayoutSignalSurface(blockId, surface);
+    const still = signalled?.background?.motion
+        ? { ...signalled, background: { ...signalled.background, motion: null } }
+        : signalled;
+    const card = resolvePhiSurfaceStyle(still, {
+        cornerFallback: PHI_LAYOUT_SURFACE_RADIUS,
+        // The paint always lives on a layer: the layer is what can be wider than the card and moved.
+        forceGroundLayer: true,
+    });
+    const toneClassName = resolvePhiSurfaceToneClassName(still?.tone);
+    return (_jsxs("div", { ...attributes, className: [className, toneClassName].filter(Boolean).join(" ") || undefined, style: { ...card.style, ...style }, children: [_jsx(PhiSurfaceGroundLayer, { ground: card.ground, frame: resolvePhiSplitCardGroundFrame(side, gap, swapped) }), toneClassName ? _jsx(PhiSurfaceTone, { tone: still?.tone, children: children }) : children] }));
+}