@phis/ui 0.1.0 → 0.2.1

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

@@ -1,10 +1,11 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Collapse } from "antd";
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { usePhiConfig } from "../../root/phi-config-provider";
 import { createPhiSignalAddress } from "../../../types/signals";
-import { usePhiSignalListener } from "../../runtime/runtime-signal-bus";
+import { usePhiSignalDispatcher, usePhiSignalListener } from "../../runtime/runtime-signal-bus";
+import { usePhiSignalIdentity } from "../../runtime/runtime-signal-identity";
 import { PhiLayoutAnchoredOverlay } from "./phi-layout-anchored-overlay";
 import { PhiBaseLayoutSlotStateProvider, usePhiBaseLayoutSlotStates, PhiBaseLayoutSlotScope, } from "./phi-base-layout-client";
 import { resolvePhiBaseLayoutChrome, } from "../phi-layout-view-model";
@@ -33,67 +34,62 @@ function toCollapseActiveKey(keys, accordion) {
 function readCollapseKeys(value) {
     return Array.isArray(value) ? value : value ? [value] : [];
 }
+/**
+ * The header's own class, put there by this adapter rather than read off Ant Design.
+ *
+ * A click in the header belongs to the header -- it folds the slot -- and in edit mode the scaffold
+ * around this Layout is listening for the same click to select and drag the block, so the one has to be
+ * told from the other. The test used to be `.ant-collapse-header`, which is a name the library owns: no
+ * import names it, no validator sees it, and swapping Ant Design out would have left the check compiling
+ * and silently matching nothing, so every header click in the Builder would have selected the block
+ * instead of folding the slot. The primitive takes a class for that element, so the name is ours and the
+ * element is the same one.
+ */
+const PHI_COLLAPSIBLE_HEADER_CLASS = "phi-collapsible-header";
 function shouldStopCollapsibleEditorScaffoldEvent(event) {
     const target = event.target;
     if (!(target instanceof Element)) {
         return false;
     }
-    return Boolean(target.closest(".ant-collapse-header") ||
-        target.closest(".ant-collapse-expand-icon") ||
+    /*
+     * The expand icon needs no test of its own: Ant Design draws it inside the header, so `closest` has
+     * already passed it on the way up.
+     */
+    return Boolean(target.closest(`.${PHI_COLLAPSIBLE_HEADER_CLASS}`) ||
         target.closest("[data-phi-collapsible-title-control='true']"));
 }
-function resolveCollapsibleStyles(styles, titleStrong, headerPadding, innerPadding) {
-    if (typeof styles === "function") {
-        return (info) => {
-            const resolved = styles(info);
-            return {
-                ...resolved,
-                header: {
-                    ...(headerPadding == null ? null : { padding: headerPadding }),
-                    ...resolved?.header,
-                },
-                title: {
-                    ...(titleStrong ? { fontWeight: 600 } : null),
-                    ...resolved?.title,
-                },
-                body: {
-                    ...(innerPadding == null ? null : { padding: innerPadding }),
-                    ...resolved?.body,
-                },
-            };
-        };
-    }
+function resolveCollapsibleStyles(titleStrong, headerPadding, innerPadding) {
+    /*
+     * The grounds are square, because they are not an edge.
+     *
+     * A header and a panel are the filling of the Layout box, not a box of their own, and the box has
+     * already decided its corner -- from the shape or from what the author configured. Rounding them a
+     * second time means the same number in two places, which is the arrangement that drifts apart the
+     * moment one of the two gains a source the other does not have. Squared, the wrapper's clip is the
+     * only corner there is, and it is the box's.
+     */
     return {
-        ...styles,
-        header: {
-            ...(headerPadding == null ? null : { padding: headerPadding }),
-            ...styles?.header,
-        },
-        title: {
-            ...(titleStrong ? { fontWeight: 600 } : null),
-            ...styles?.title,
-        },
-        body: {
-            ...(innerPadding == null ? null : { padding: innerPadding }),
-            ...styles?.body,
-        },
+        header: { ...(headerPadding == null ? {} : { padding: headerPadding }), borderRadius: 0 },
+        title: titleStrong ? { fontWeight: 600 } : undefined,
+        body: { ...(innerPadding == null ? {} : { padding: innerPadding }), borderRadius: 0 },
     };
 }
 export function PhiCollapsibleLayout(props) {
     return (_jsx(PhiBaseLayoutSlotStateProvider, { slotCount: props.slots.length, initialSlotStates: props.initialSlotStates, children: _jsx(PhiCollapsibleLayoutBody, { ...props }) }));
 }
-function PhiCollapsibleLayoutBody({ blockId, slots, slotKeys, slotMeta, panelMinHeight, accordion = false, slotTitles, onOpenSlotKeysChange, defaultOpenSlotKeys, collapsible = "header", bordered = false, ghost = true, expandIconPlacement = "start", collapseSize = "medium", titleStrong = true, headerPadding, innerPadding, collapseStyles, ...layoutProps }) {
+function PhiCollapsibleLayoutBody({ blockId, slots, slotKeys, slotMeta, panelMinHeight, accordion = false, slotTitles, onOpenSlotKeysChange, defaultOpenSlotKeys, collapsible = "header", ghost = true, expandIconPlacement = "start", collapseSize = "medium", titleStrong = true, headerPadding, innerPadding, ...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.
     const isAuthoringRender = isPhiLayoutAuthoringRender({
         editSlotAction: layoutProps.editSlotAction,
         editSlotLabels: layoutProps.editSlotLabels,
         capabilities: layoutProps.capabilities,
+        renderMode: layoutProps.renderMode,
     });
     const { token } = usePhiConfig();
     const resolvedHeaderPadding = headerPadding ?? token.paddingSM;
     const resolvedInnerPadding = innerPadding ?? token.padding;
-    const { layoutKind = "collapsible", renderMode, padding, paddingTop, paddingRight, paddingBottom, paddingLeft, background, backgroundLayer, border, borderRadius, effect, shadow, anchor, editSlotAnchor, editSlotAction, editRenderInsertControl, editRenderTitleControl, editSlotLabels, editSlotTitleAction, style, labelEnd, } = layoutProps;
+    const { layoutKind = "collapsible", renderMode, padding, paddingTop, paddingRight, paddingBottom, paddingLeft, background, backgroundLayer, borderSource, border, borderRadius, effect, shadow, anchor, editSlotAnchor, editSlotAction, editRenderInsertControl, editRenderTitleControl, editSlotLabels, editSlotTitleAction, style, labelEnd, } = layoutProps;
     const resolvedRenderMode = renderMode ?? "live";
     const isEditMode = resolvedRenderMode === "editor";
     const resolvedSlotStates = usePhiBaseLayoutSlotStates() ?? [];
@@ -111,6 +107,14 @@ function PhiCollapsibleLayoutBody({ blockId, slots, slotKeys, slotMeta, panelMin
         }
         return Array.from({ length: appendSlotIndex + 1 }, (_, slotIndex) => slotIndex);
     }, [appendSlotIndex, isEditMode, occupiedSlotIndices]);
+    /*
+     * The keys of the slots that are off the screen. A hidden panel must not be the open one: with an
+     * accordion that would leave the Collapse showing nothing at all.
+     */
+    const hiddenSlotKeys = new Set(renderedSlotIndices
+        .filter((slotIndex) => (resolvedSlotStates[slotIndex] ?? "expanded") === "hidden")
+        .map((slotIndex) => validSlotKeys[slotIndex])
+        .filter((key) => Boolean(key)));
     const baseOpenSlotKeys = useMemo(() => resolveDefaultOpenSlotKeys(defaultOpenSlotKeys, validSlotKeys, accordion), [accordion, defaultOpenSlotKeys, validSlotKeys]);
     const baseOpenSlotKeysSignature = useMemo(() => JSON.stringify(baseOpenSlotKeys), [baseOpenSlotKeys]);
     const [controlledOpenSlotKeys, setControlledOpenSlotKeys] = useState(null);
@@ -132,6 +136,48 @@ function PhiCollapsibleLayoutBody({ blockId, slots, slotKeys, slotMeta, panelMin
     const effectiveCollapsible = isEditMode && collapsible !== "disabled" ? "icon" : collapsible;
     const receiverAddress = useMemo(() => blockId == null ? null : createPhiSignalAddress("cms", blockId), [blockId]);
     const [editingSlotTitle, setEditingSlotTitle] = useState(null);
+    /*
+     * The open state, said out loud.
+     *
+     * The Collapsible has always listened on `openSlotKeys` and `activeSlotKey` and answered on neither,
+     * so anything that steered it -- a Controller, a pager, a second Collapsible -- could never learn
+     * where it stands. It announces on mount and on every change, as itself and to `broadcast`; its own
+     * listener reads only what is addressed to it, so this cannot feed back.
+     *
+     * The active slot is the last key opened, which for an accordion is the only open one. With nothing
+     * open there is no active slot, and an empty string would be inventing one.
+     */
+    const dispatchSignal = usePhiSignalDispatcher();
+    const signalScope = usePhiSignalIdentity().scope ?? "page";
+    const openSlotKeysSignature = useMemo(() => JSON.stringify(resolvedOpenSlotKeys), [resolvedOpenSlotKeys]);
+    const announcedOpenSlotKeys = useMemo(() => JSON.parse(openSlotKeysSignature), [openSlotKeysSignature]);
+    useEffect(() => {
+        if (!receiverAddress) {
+            return;
+        }
+        dispatchSignal({
+            scope: signalScope,
+            channel: "openSlotKeys",
+            action: "change",
+            value: announcedOpenSlotKeys,
+            valueType: "string[]",
+            sender: receiverAddress,
+            receiver: "broadcast",
+        });
+        const activeSlotKey = announcedOpenSlotKeys[announcedOpenSlotKeys.length - 1];
+        if (activeSlotKey === undefined) {
+            return;
+        }
+        dispatchSignal({
+            scope: signalScope,
+            channel: "activeSlotKey",
+            action: "change",
+            value: activeSlotKey,
+            valueType: "string",
+            sender: receiverAddress,
+            receiver: "broadcast",
+        });
+    }, [announcedOpenSlotKeys, dispatchSignal, receiverAddress, signalScope]);
     const commitSlotTitle = useCallback(() => {
         if (!editingSlotTitle) {
             return;
@@ -241,6 +287,7 @@ function PhiCollapsibleLayoutBody({ blockId, slots, slotKeys, slotMeta, panelMin
         paddingBottom,
         paddingLeft,
         background,
+        borderSource,
         border,
         borderRadius,
         effect,
@@ -249,8 +296,6 @@ function PhiCollapsibleLayoutBody({ blockId, slots, slotKeys, slotMeta, panelMin
     const resolvedStyle = {
         position: "relative",
         ...resolvedLayoutStyle,
-        width: "100%",
-        height: "100%",
         minWidth: 0,
         minHeight: 0,
         ...style,
@@ -261,10 +306,16 @@ function PhiCollapsibleLayoutBody({ blockId, slots, slotKeys, slotMeta, panelMin
         if (!slotKey) {
             return null;
         }
-        const slotState = resolvedSlotStates[slotIndex] ?? "expanded";
-        if (slotState === "hidden") {
-            return null;
-        }
+        /*
+         * A hidden slot keeps its panel and leaves the screen, instead of being dropped.
+         *
+         * What hides a slot is usually the child inside it -- an Inspector section that finds it has
+         * nothing to show hides its own panel. Dropping the panel would unmount that child, and with it
+         * the only thing that could ever ask the question again: the slot then stayed hidden for every
+         * later selection, until the page was reloaded. Off-screen and rendered anyway, the child keeps
+         * deciding and can take the slot back.
+         */
+        const isHiddenSlot = (resolvedSlotStates[slotIndex] ?? "expanded") === "hidden";
         const child = slots[slotIndex] ?? null;
         const hasContent = isRenderableSlotChild(child);
         if (!hasContent && !isEditMode) {
@@ -316,7 +367,8 @@ function PhiCollapsibleLayoutBody({ blockId, slots, slotKeys, slotMeta, panelMin
             key: slotKey,
             label,
             collapsible: effectiveCollapsible,
-            forceRender: isEditMode,
+            forceRender: isEditMode || isHiddenSlot,
+            ...(isHiddenSlot ? { style: { display: "none" } } : {}),
             children: childContent
                 ? childContent
                 : editSlotAction && editRenderInsertControl
@@ -340,7 +392,24 @@ function PhiCollapsibleLayoutBody({ blockId, slots, slotKeys, slotMeta, panelMin
         };
     })
         .filter((item) => item !== null);
-    return (_jsxs("div", { "data-layout-kind": layoutKind, "data-phi-block-render-mode": resolvedRenderMode, "data-phi-layout-debug-layer": phiLayoutDebugLayerMarker(isAuthoringRender), "data-phi-layout-has-explicit-layout-background": hasExplicitLayoutBackground ? "true" : "false", className: "phi-layout", style: resolvedStyle, children: [backgroundLayer, _jsx("div", { onMouseDown: isEditMode
+    return (_jsxs("div", { "data-layout-kind": layoutKind, "data-phi-block-render-mode": resolvedRenderMode, "data-phi-layout-debug-layer": phiLayoutDebugLayerMarker(isAuthoringRender), "data-phi-layout-has-explicit-layout-background": hasExplicitLayoutBackground ? "true" : "false", className: "phi-layout", style: resolvedStyle, children: [backgroundLayer, _jsx("div", { 
+                /*
+                 * The grounds inside follow the corner outside.
+                 *
+                 * A Collapse paints its own header and panel grounds, and it rounds them from its own token --
+                 * the Site's surface step, which is the box's corner only as long as nobody set another one.
+                 * Under `custom` the box can be rounded 30px while the ground inside is still rounded 8, and the
+                 * colour then squares off the corner it sits in.
+                 *
+                 * `border-radius: inherit` takes the box's corner literally, whatever it resolved to, and the
+                 * clip makes every ground inside end there -- which works because the grounds are square
+                 * (`resolveCollapsibleStyles`): a clip only ever takes away, so a ground that rounded itself
+                 * more tightly than the box would keep its own corner and the clip would never reach it.
+                 *
+                 * The clip earns its place twice over: it shapes the corner, and it keeps the content of a
+                 * panel inside the panel.
+                 */
+                style: { borderRadius: "inherit", overflow: "hidden" }, onMouseDown: isEditMode
                     ? (event) => {
                         if (shouldStopCollapsibleEditorScaffoldEvent(event)) {
                             event.stopPropagation();
@@ -352,5 +421,12 @@ function PhiCollapsibleLayoutBody({ blockId, slots, slotKeys, slotMeta, panelMin
                             event.stopPropagation();
                         }
                     }
-                    : undefined, children: _jsx(Collapse, { accordion: accordion, activeKey: toCollapseActiveKey(resolvedOpenSlotKeys, accordion), bordered: bordered, ghost: ghost, collapsible: effectiveCollapsible, destroyOnHidden: false, expandIconPlacement: expandIconPlacement, size: collapseSize, items: items, onChange: (nextKeys) => setOpenKeys(readCollapseKeys(nextKeys)), styles: resolveCollapsibleStyles(collapseStyles, titleStrong, resolvedHeaderPadding, resolvedInnerPadding), style: { width: "100%" } }) })] }));
+                    : undefined, children: _jsx(Collapse, { accordion: accordion, activeKey: toCollapseActiveKey(resolvedOpenSlotKeys.filter((key) => !hiddenSlotKeys.has(key)), accordion), 
+                    /*
+                     * Never its own outline: the Layout box draws it, out of `borderSource`, for every Layout the
+                     * same way. What stays here is `ghost`, which decides the inside -- and Ant Design's borderless
+                     * variant keeps the first header's top corners on `collapsePanelBorderRadius`, the same surface
+                     * step the box takes, so inside and outside meet on one number.
+                     */
+                    bordered: false, ghost: ghost, collapsible: effectiveCollapsible, destroyOnHidden: false, expandIconPlacement: expandIconPlacement, size: collapseSize, classNames: { header: PHI_COLLAPSIBLE_HEADER_CLASS }, items: items, onChange: (nextKeys) => setOpenKeys(readCollapseKeys(nextKeys)), styles: resolveCollapsibleStyles(titleStrong, resolvedHeaderPadding, resolvedInnerPadding), style: { width: "100%" } }) })] }));
 }

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

@@ -1,15 +1,16 @@
 import type { CSSProperties, ReactNode } from "react";
 import { type PhiLayoutEditRenderInsertControl, type PhiLayoutKind } from "../phi-layout-contract";
 import type { PhiAnchorWidgetPlacement } from "../../controls/phi-anchor-control-contract";
-import type { PhiRenderableBlockRenderMode, PhiRenderableBlockSize } from "../../../types";
+import type { PhiRenderableBlockRenderMode, PhiRenderableBlockResponsiveSize } from "../../../types";
 import type { PhiShadow, PhiLayoutEffectId } from "../../../types/layout-style";
+import type { PhiCmsBorderSource } from "../../../types/cms-border-source";
 export type PhiContentLayoutProps = {
     blockId?: string | number | null;
     slots?: ReactNode[];
     renderMode?: PhiRenderableBlockRenderMode;
-    size?: PhiRenderableBlockSize | null;
-    minSize?: PhiRenderableBlockSize | null;
-    maxSize?: PhiRenderableBlockSize | null;
+    size?: PhiRenderableBlockResponsiveSize | null;
+    minSize?: PhiRenderableBlockResponsiveSize | null;
+    maxSize?: PhiRenderableBlockResponsiveSize | null;
     margin?: CSSProperties["margin"];
     zIndex?: number;
     effect?: PhiLayoutEffectId;
@@ -24,6 +25,7 @@ export type PhiContentLayoutProps = {
     background?: CSSProperties["background"];
     backgroundLayer?: ReactNode;
     border?: CSSProperties["border"];
+    borderSource?: PhiCmsBorderSource;
     borderRadius?: CSSProperties["borderRadius"];
     editSlotAction?: (slotIndex: number, options?: {
         defaultPickSection?: "layout" | "widget";
@@ -34,4 +36,4 @@ export type PhiContentLayoutProps = {
     editSlotAnchor?: PhiAnchorWidgetPlacement | null;
     style?: CSSProperties;
 };
-export declare function PhiContentLayout({ blockId, slots, renderMode, margin, layoutKind, labelEnd, padding, paddingTop, paddingRight, paddingBottom, paddingLeft, background, backgroundLayer, border, borderRadius, effect, shadow, editSlotAction, editRenderInsertControl, editSlotAnchor, style, }: PhiContentLayoutProps): import("react").JSX.Element;
+export declare function PhiContentLayout({ blockId, slots, renderMode, margin, layoutKind, labelEnd, padding, paddingTop, paddingRight, paddingBottom, paddingLeft, background, backgroundLayer, borderSource, border, borderRadius, effect, shadow, editSlotAction, editRenderInsertControl, editSlotAnchor, style, }: PhiContentLayoutProps): import("react").JSX.Element;

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

@@ -4,8 +4,8 @@ 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, border, borderRadius, effect, shadow, editSlotAction, editRenderInsertControl, editSlotAnchor = "center", style, }) {
-    const isAuthoringRender = isPhiLayoutAuthoringRender({ editSlotAction });
+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, }) {
+    const isAuthoringRender = isPhiLayoutAuthoringRender({ editSlotAction, renderMode });
     const slot0 = Array.isArray(slots) ? slots[0] : undefined;
     const hasSlot0 = isRenderablePhiNode(slot0);
     const shouldFillBlock = true;
@@ -18,6 +18,7 @@ export function PhiContentLayout({ blockId, slots, renderMode = "live", margin =
         paddingBottom,
         paddingLeft,
         background,
+        borderSource,
         border,
         borderRadius,
         effect,
@@ -32,8 +33,6 @@ export function PhiContentLayout({ blockId, slots, renderMode = "live", margin =
     });
     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: {
             position: hasSlot0 || (isEditor && editSlotAction) ? "relative" : undefined,
-            width: "100%",
-            height: shouldFillBlock ? "100%" : undefined,
             minWidth: 0,
             minHeight: 0,
             margin,

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { isValidElement } from "react";
-import { normalizePhiCssSize, resolvePhiFlexAxisAlignment, } from "../phi-layout-contract";
+import { normalizePhiCssSize, resolvePhiFlexAxisAlignment, phiPlacementFromWord, resolvePhiSlotPlacementMargins, } from "../phi-layout-contract";
 import { resolvePhiLayoutSlotChildSizing } from "./phi-layout-anchored-overlay";
 import { resolvePhiLayoutDefaults } from "../../../helpers/cms-layout-defaults";
 import { resolvePhiBaseLayoutChrome, resolvePhiBaseLayoutSlotStates, } from "../phi-layout-view-model";
@@ -13,8 +13,9 @@ export function PhiFlexLayout({ slots, ...layoutProps }) {
         editSlotAction: layoutProps.editSlotAction,
         editSlotLabels: layoutProps.editSlotLabels,
         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, border, borderRadius, effect, shadow, editSlotAction, editRenderInsertControl, editSlotLabels, style, labelEnd, } = layoutProps;
+    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 resolvedSlotStates = resolvePhiBaseLayoutSlotStates(slots.length, layoutProps.initialSlotStates);
     const resolvedGap = normalizePhiCssSize(gap) ?? PHI_FLEX_LAYOUT_DEFAULTS.gap;
@@ -28,6 +29,7 @@ export function PhiFlexLayout({ slots, ...layoutProps }) {
         paddingBottom,
         paddingLeft,
         background,
+        borderSource,
         border,
         borderRadius,
         effect,
@@ -105,9 +107,8 @@ export function PhiFlexLayout({ slots, ...layoutProps }) {
             return null;
         }
         const slotSizing = resolvePhiLayoutSlotChildSizing(child);
-        const shouldFillMainAxis = (resolvedVertical ? slotSizing.fillBlock : slotSizing.fillInline) &&
-            !(resolvedVertical ? slotSizing.hasExplicitHeight : slotSizing.hasExplicitWidth);
-        const shouldFillCrossAxis = resolvedVertical ? slotSizing.fillInline : slotSizing.fillBlock;
+        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;
@@ -120,6 +121,13 @@ export function PhiFlexLayout({ slots, ...layoutProps }) {
             : shouldFillMainAxis
                 ? 0
                 : "auto";
+        const placesInline = resolvedVertical ? shouldFillCrossAxis : shouldFillMainAxis;
+        const slotPlacementMargins = resolvePhiSlotPlacementMargins({
+            inline: placesInline
+                ? phiPlacementFromWord(resolvedVertical ? resolvedFlowAlignment.alignItems : 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,
@@ -151,6 +159,14 @@ export function PhiFlexLayout({ slots, ...layoutProps }) {
                 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.
+                 */
+                ...slotPlacementMargins,
             }, children: child }, `content-${index}`));
     };
     const renderableSlots = slots
@@ -192,8 +208,6 @@ export function PhiFlexLayout({ slots, ...layoutProps }) {
     const resolvedStyle = {
         position: "relative",
         ...resolvedLayoutStyle,
-        width: "100%",
-        height: "100%",
         minWidth: 0,
         minHeight: 0,
         ...style,

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import {} from "react";
-import { normalizePhiCssSize, resolvePhiFlexAxisAlignment, } from "../phi-layout-contract";
+import { normalizePhiCssSize, resolvePhiFlexAxisAlignment, phiPlacementFromWord, resolvePhiSlotPlacementMargins, } from "../phi-layout-contract";
 import { resolvePhiLayoutSlotChildSizing } from "./phi-layout-anchored-overlay";
 import { resolvePhiLayoutDefaults } from "../../../helpers/cms-layout-defaults";
 import { resolvePhiBaseLayoutChrome, resolvePhiBaseLayoutSlotStates, } from "../phi-layout-view-model";
@@ -13,8 +13,9 @@ export function PhiFlexVerticalLayout({ slots, ...layoutProps }) {
         editSlotAction: layoutProps.editSlotAction,
         editSlotLabels: layoutProps.editSlotLabels,
         capabilities: layoutProps.capabilities,
+        renderMode: layoutProps.renderMode,
     });
-    const { layoutKind = "verticalflex", gap = PHI_FLEX_VERTICAL_LAYOUT_DEFAULTS.gap, editSlotAnchor, renderMode, padding, paddingTop, paddingRight, paddingBottom, paddingLeft, background, backgroundLayer, border, borderRadius, effect, shadow, editSlotAction, editRenderInsertControl, editSlotLabels, style, labelEnd, } = layoutProps;
+    const { layoutKind = "verticalflex", gap = PHI_FLEX_VERTICAL_LAYOUT_DEFAULTS.gap, editSlotAnchor, renderMode, padding, paddingTop, paddingRight, paddingBottom, paddingLeft, background, backgroundLayer, borderSource, border, borderRadius, effect, shadow, editSlotAction, editRenderInsertControl, editSlotLabels, style, labelEnd, } = layoutProps;
     const resolvedVertical = true;
     const resolvedSlotStates = resolvePhiBaseLayoutSlotStates(slots.length, layoutProps.initialSlotStates);
     const resolvedGap = normalizePhiCssSize(gap) ?? PHI_FLEX_VERTICAL_LAYOUT_DEFAULTS.gap;
@@ -28,6 +29,7 @@ export function PhiFlexVerticalLayout({ slots, ...layoutProps }) {
         paddingBottom,
         paddingLeft,
         background,
+        borderSource,
         border,
         borderRadius,
         effect,
@@ -43,8 +45,8 @@ export function PhiFlexVerticalLayout({ slots, ...layoutProps }) {
             return null;
         }
         const slotSizing = resolvePhiLayoutSlotChildSizing(child);
-        const shouldFillMainAxis = slotSizing.fillBlock && !slotSizing.hasExplicitHeight;
-        const shouldFillCrossAxis = slotSizing.fillInline;
+        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,
@@ -72,6 +74,23 @@ export function PhiFlexVerticalLayout({ slots, ...layoutProps }) {
                 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 renderableSlots = slots
@@ -98,8 +117,6 @@ export function PhiFlexVerticalLayout({ slots, ...layoutProps }) {
     const resolvedStyle = {
         position: "relative",
         ...resolvedLayoutStyle,
-        width: "100%",
-        height: "100%",
         minWidth: 0,
         minHeight: 0,
         ...style,