@phis/ui 0.1.0 → 0.2.1

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

@@ -1,66 +1,155 @@
-import { PhiCmsFlags } from "../../constants/phi-cms";
 import { resolvePhiAnchorWidgetPlacement, } from "../controls/phi-anchor-control-contract";
-export const PhiLayoutFlags = PhiCmsFlags;
-export function hasPhiLayoutFlag(flags, flag) {
-    return ((flags ?? 0) & flag) === flag;
-}
+import { resolvePhiCmsBorderSource } from "../../types/cms-border-source";
+import { resolvePhiRenderableBlockGeometry, } from "../../types/renderable-block-geometry";
+import { PHI_THEME_BORDER_LINE } from "../../helpers/border-widget-style";
 export function normalizePhiCssSize(value) {
     if (typeof value === "number") {
         return `${value}px`;
     }
     return value;
 }
-export function resolvePhiLayoutBoxStyle({ size, minSize, maxSize, }) {
-    const resolvedStyle = {};
-    const resolvedWidth = normalizePhiCssSize(size?.width ?? "100%");
-    const resolvedHeight = normalizePhiCssSize(size?.height ?? "100%");
-    const resolvedMinWidth = normalizePhiCssSize(minSize?.width ?? undefined);
-    const resolvedMaxWidth = normalizePhiCssSize(maxSize?.width ?? undefined);
-    const resolvedMinHeight = normalizePhiCssSize(minSize?.height ?? undefined);
-    const resolvedMaxHeight = normalizePhiCssSize(maxSize?.height ?? undefined);
-    if (resolvedWidth !== undefined) {
-        resolvedStyle.width = resolvedWidth;
-    }
-    if (resolvedHeight !== undefined) {
-        resolvedStyle.height = resolvedHeight;
-    }
-    if (resolvedMinWidth !== undefined) {
-        resolvedStyle.minWidth = resolvedMinWidth;
-    }
-    if (resolvedMaxWidth !== undefined) {
-        resolvedStyle.maxWidth = resolvedMaxWidth;
-    }
-    if (resolvedMinHeight !== undefined) {
-        resolvedStyle.minHeight = resolvedMinHeight;
-    }
-    if (resolvedMaxHeight !== undefined) {
-        resolvedStyle.maxHeight = resolvedMaxHeight;
-    }
-    return resolvedStyle;
+/**
+ * A Layout's own inner box: what the block states, and nothing else.
+ *
+ * An absent size is not this box's question. The box stands inside the slot child frame, the frame
+ * carries the child's size policy, and `styles/layout.css` fills this box from there -- width through
+ * `.phi-slot-child--inline-fill > *`, height through `.phi-slot-child--block-fill > .phi-layout`. A
+ * `100%` written here as well said the same thing a second time in the common case and the wrong thing
+ * in the others: under `fill-inline` the frame is `height: fit-content`, and a percentage height
+ * against it is dropped by the browser rather than obeyed. Whoever renders a Layout outside a frame
+ * states the fill in CSS where that frame's job is being done instead (the Builder's edit scaffold
+ * drawer, `styles/layout-authoring-scaffold.css`).
+ */
+export function resolvePhiLayoutBoxStyle({ size, minSize, maxSize, collapsedSizeHint, visibility, }) {
+    const geometry = resolvePhiRenderableBlockGeometry({ size, minSize, maxSize, collapsedSizeHint, visibility });
+    return {
+        ...(geometry.inline.size == null ? {} : { width: geometry.inline.size.css }),
+        ...(geometry.block.size == null ? {} : { height: geometry.block.size.css }),
+        ...(geometry.inline.min == null ? {} : { minWidth: geometry.inline.min.css }),
+        ...(geometry.inline.max == null ? {} : { maxWidth: geometry.inline.max.css }),
+        ...(geometry.block.min == null ? {} : { minHeight: geometry.block.min.css }),
+        ...(geometry.block.max == null ? {} : { maxHeight: geometry.block.max.css }),
+    };
 }
-export function resolvePhiLayoutStyle({ padding, paddingTop, paddingRight, paddingBottom, paddingLeft, background, border, borderRadius, }) {
-    const resolvedBorderRadius = normalizePhiCssSize(borderRadius);
+/**
+ * The Site's answer for a Layout that states no corner of its own; see `resolvePhiLayoutStyle`.
+ *
+ * Exported because a Layout's box is not the only surface a Layout draws: the Split Card draws two, one
+ * per slot, and they answer the same question with the same value.
+ */
+export const PHI_LAYOUT_SURFACE_RADIUS = "var(--phi-surface-radius, 0)";
+export function resolvePhiLayoutStyle({ padding, paddingTop, paddingRight, paddingBottom, paddingLeft, background, borderSource, border, borderRadius, }) {
+    /*
+     * Where the outline comes from, asked before anything about what it looks like.
+     *
+     * `theme` is the Site's own line -- the border colour and the line width it already states -- so a
+     * Layout can take the house style without anybody typing a colour into it, and it moves when the
+     * Theme moves. `custom` is the configured line, and the one source that reads a configured corner.
+     * `none` draws nothing, and is what a Layout that was never asked says now that "no line" and
+     * "nobody said" are two different answers.
+     */
+    const resolvedBorderSource = resolvePhiCmsBorderSource(borderSource, border);
+    const resolvedBorderRadius = resolvedBorderSource === "custom"
+        ? normalizePhiCssSize(borderRadius)
+        : null;
     return {
         ...(background == null ? {} : { background }),
-        ...(border == null
-            ? {}
-            : {
-                border,
-            }),
-        ...(resolvedBorderRadius == null ? {} : { borderRadius: resolvedBorderRadius }),
+        ...(resolvedBorderSource === "theme"
+            ? { border: PHI_THEME_BORDER_LINE }
+            : resolvedBorderSource === "custom" && border != null
+                ? { border }
+                : {}),
+        /*
+         * A Layout is a surface, so an author who said nothing about its corner gets the Site's answer to
+         * that question -- and so does one who said something but is no longer asking for it: a corner is
+         * the author's only under `custom`, which is the one state where the fields that set it are even
+         * shown. Switching to `theme` or `none` therefore shows the shape at once, square or capsule,
+         * instead of keeping the radii of a border that is no longer being drawn.
+         *
+         * The rest of that question -- the same step a Table and a Tree take, carried on the root as
+         * `--phi-surface-radius` (THEME.md, "Control shape"). An author who did say something keeps it: the
+         * step answers silence, it does not cap anybody.
+         *
+         * The fallback is `0` rather than a token, because that is what this returned before there was a
+         * step to take, and a Layout rendered outside the Provider should not start rounding on its own.
+         *
+         * Four corners rather than the shorthand, and only in this branch. A Widget states a single corner
+         * as a longhand (`borderTopLeftRadius`), and React refuses to have a shorthand standing beside a
+         * longhand it may have to remove on the next render -- which is what a shorthand written on every
+         * Layout, configured or not, created. Where the author DID state a radius the shorthand stays: it
+         * is their one value, and it was already the only thing on the box.
+         */
+        ...(resolvedBorderRadius == null
+            ? {
+                borderTopLeftRadius: PHI_LAYOUT_SURFACE_RADIUS,
+                borderTopRightRadius: PHI_LAYOUT_SURFACE_RADIUS,
+                borderBottomRightRadius: PHI_LAYOUT_SURFACE_RADIUS,
+                borderBottomLeftRadius: PHI_LAYOUT_SURFACE_RADIUS,
+            }
+            : { borderRadius: resolvedBorderRadius }),
         ...resolvePhiPaddingStyle({ padding, paddingTop, paddingRight, paddingBottom, paddingLeft }),
     };
 }
+/**
+ * The four sides a `padding` shorthand names, in the order CSS reads them.
+ *
+ * The side fields are written as longhands so that a single side can be overridden beside the
+ * shorthand -- React refuses to have both standing on one element. Copying the whole shorthand into
+ * every longhand only works for one value: `8px 16px` as a `paddingTop` is not a length, and the
+ * browser drops it. So the shorthand is read the way CSS reads it, one to four values, top right
+ * bottom left, with the missing ones mirrored. Whitespace inside `calc()` or `var()` does not split a
+ * value. More than four values is not padding at all, and is refused rather than cut down.
+ */
+export function expandPhiPaddingShorthand(padding) {
+    const resolved = normalizePhiCssSize(padding);
+    if (resolved == null) {
+        return null;
+    }
+    const values = splitPhiCssValueList(String(resolved));
+    if (values.length === 0) {
+        return null;
+    }
+    if (values.length > 4) {
+        throw new Error(`A padding shorthand names at most four sides, got "${resolved}".`);
+    }
+    const [top, right = top, bottom = top, left = right] = values;
+    return { top, right, bottom, left };
+}
+function splitPhiCssValueList(value) {
+    const values = [];
+    let depth = 0;
+    let current = "";
+    for (const character of value) {
+        if (character === "(") {
+            depth += 1;
+        }
+        else if (character === ")") {
+            depth -= 1;
+        }
+        if (depth === 0 && /\s/.test(character)) {
+            if (current) {
+                values.push(current);
+            }
+            current = "";
+            continue;
+        }
+        current += character;
+    }
+    if (current) {
+        values.push(current);
+    }
+    return values;
+}
 export function resolvePhiPaddingStyle({ padding, paddingTop, paddingRight, paddingBottom, paddingLeft, }) {
-    const resolvedPadding = normalizePhiCssSize(padding);
+    const sides = expandPhiPaddingShorthand(padding);
     return {
-        ...(resolvedPadding == null
+        ...(sides == null
             ? {}
             : {
-                paddingTop: resolvedPadding,
-                paddingRight: resolvedPadding,
-                paddingBottom: resolvedPadding,
-                paddingLeft: resolvedPadding,
+                paddingTop: sides.top,
+                paddingRight: sides.right,
+                paddingBottom: sides.bottom,
+                paddingLeft: sides.left,
             }),
         ...(paddingTop == null ? {} : { paddingTop: normalizePhiCssSize(paddingTop) }),
         ...(paddingRight == null ? {} : { paddingRight: normalizePhiCssSize(paddingRight) }),
@@ -69,17 +158,182 @@ export function resolvePhiPaddingStyle({ padding, paddingTop, paddingRight, padd
     };
 }
 export function resolvePhiLayoutInset({ padding, paddingTop, paddingRight, paddingBottom, paddingLeft, }) {
-    const resolvedPadding = normalizePhiCssSize(padding);
+    const sides = expandPhiPaddingShorthand(padding);
     return {
-        top: paddingTop == null ? resolvedPadding ?? 0 : normalizePhiCssSize(paddingTop) ?? 0,
-        right: paddingRight == null ? resolvedPadding ?? 0 : normalizePhiCssSize(paddingRight) ?? 0,
-        bottom: paddingBottom == null ? resolvedPadding ?? 0 : normalizePhiCssSize(paddingBottom) ?? 0,
-        left: paddingLeft == null ? resolvedPadding ?? 0 : normalizePhiCssSize(paddingLeft) ?? 0,
+        top: paddingTop == null ? sides?.top ?? 0 : normalizePhiCssSize(paddingTop) ?? 0,
+        right: paddingRight == null ? sides?.right ?? 0 : normalizePhiCssSize(paddingRight) ?? 0,
+        bottom: paddingBottom == null ? sides?.bottom ?? 0 : normalizePhiCssSize(paddingBottom) ?? 0,
+        left: paddingLeft == null ? sides?.left ?? 0 : normalizePhiCssSize(paddingLeft) ?? 0,
     };
 }
 export function resolvePhiAnchorPlacement(anchor) {
     return resolvePhiAnchorWidgetPlacement(anchor);
 }
+/**
+ * The anchor a Layout draws with: the one it was given, else the one its kind declares.
+ *
+ * A Layout kind states how its slots sit when nobody has said otherwise -- a Flex Vertical centres its
+ * column and starts at the top, a Flex runs from the left at middle height. That declaration reached
+ * the picker and the Inspector and stopped there: the drawing asked the config alone, found nothing,
+ * and fell to "no anchor", which stretches. So the default a kind announced was never the default it
+ * drew with.
+ *
+ * A kind that declares none keeps "no anchor", rather than being given the centre by a resolver that
+ * treats missing parts as centred. Not stating a default and defaulting to the middle are different
+ * things, and eight of the twelve kinds state none.
+ */
+export function resolvePhiLayoutAnchor(anchor, defaultAnchor) {
+    const effective = anchor ?? defaultAnchor;
+    return effective ? resolvePhiAnchorWidgetPlacement(effective) : null;
+}
+const PHI_PLACEMENT_BY_ANCHOR = {
+    topLeft: { inline: "start", block: "start" },
+    top: { inline: "center", block: "start" },
+    topRight: { inline: "end", block: "start" },
+    left: { inline: "start", block: "center" },
+    center: { inline: "center", block: "center" },
+    right: { inline: "end", block: "center" },
+    bottomLeft: { inline: "start", block: "end" },
+    bottom: { inline: "center", block: "end" },
+    bottomRight: { inline: "end", block: "end" },
+};
+function mirrorPhiAxisPlacement(placement) {
+    return placement === "start" ? "end" : placement === "end" ? "start" : placement;
+}
+/**
+ * The anchor read once, in both spellings it arrives in.
+ *
+ * A `PhiRenderableBlockAnchor` still shows which axes were stated, and that is why it is taken as it
+ * is rather than through `resolvePhiAnchorWidgetPlacement`: that function answers the nine-word
+ * vocabulary, where every axis has a value, so it has to invent `center` for an axis nobody named.
+ * The nine words themselves are therefore always fully stated, and only the pair can carry a `null`.
+ */
+export function resolvePhiPlacement(anchor, role) {
+    const stated = anchor == null
+        ? { inline: null, block: null }
+        : typeof anchor === "string"
+            ? PHI_PLACEMENT_BY_ANCHOR[anchor]
+            : {
+                inline: anchor.horizontal === "left"
+                    ? "start"
+                    : anchor.horizontal === "right"
+                        ? "end"
+                        : anchor.horizontal === "center"
+                            ? "center"
+                            : null,
+                block: anchor.vertical === "top"
+                    ? "start"
+                    : anchor.vertical === "bottom"
+                        ? "end"
+                        : anchor.vertical === "middle"
+                            ? "center"
+                            : null,
+            };
+    if (role === "pinInlineStart") {
+        return { inline: "start", block: stated.block };
+    }
+    if (role === "pinInlineEnd") {
+        return { inline: "end", block: stated.block };
+    }
+    if (role === "mirrorInline") {
+        return { inline: mirrorPhiAxisPlacement(stated.inline), block: stated.block };
+    }
+    return stated;
+}
+/** The flex spelling, and `undefined` where the anchor said nothing, so a caller's own value stands. */
+export function phiFlexPlacementWord(placement) {
+    return placement === "start"
+        ? "flex-start"
+        : placement === "end"
+            ? "flex-end"
+            : placement === "center"
+                ? "center"
+                : undefined;
+}
+/** The grid spelling, and `undefined` where the anchor said nothing. */
+export function phiGridPlacementWord(placement) {
+    return placement ?? undefined;
+}
+/**
+ * The custom properties a slot hands its children, so a stretched one can still be placed.
+ *
+ * Two per axis, not one shorthand. React expands a `marginInline` shorthand into two longhands when it
+ * renders on the server and leaves it whole in the browser, so the two trees disagree on an attribute
+ * that is never patched up -- a hydration mismatch for a margin that was only ever `auto` or `0`.
+ *
+ * They were named `cross` while they only ever wrote `margin-inline`, which is the cross axis of a
+ * column and the main axis of a row -- the Grid handed its `justify-content` to the same pair. Under
+ * that name nobody noticed that one of the two axes had no properties at all, so a row that caps a
+ * child's height and anchors it to the bottom could not place it. Named by the axis they write, both
+ * exist.
+ */
+export const PHI_SLOT_INLINE_MARGIN_START_PROPERTY = "--phi-slot-inline-margin-start";
+export const PHI_SLOT_INLINE_MARGIN_END_PROPERTY = "--phi-slot-inline-margin-end";
+export const PHI_SLOT_BLOCK_MARGIN_START_PROPERTY = "--phi-slot-block-margin-start";
+export const PHI_SLOT_BLOCK_MARGIN_END_PROPERTY = "--phi-slot-block-margin-end";
+/**
+ * The same four, read back by whatever box has the room to be moved.
+ *
+ * The slot child frame reads them, and for a long time it was the only thing that did. But the frame is
+ * not always where the width is decided: a Widget that caps something inside itself -- the Form caps its
+ * fields, so that the cap is the measure the fields read rather than the measure of whatever box they
+ * are wearing -- leaves its own frame filling the slot edge to edge. An auto margin on a box with no room
+ * left over comes to nothing, so the frame is placed and the narrow box inside it still stands at the
+ * start edge of a slot that was anchored to the centre.
+ *
+ * Custom properties inherit, so the inner box reads the answer the slot gave without being handed it,
+ * and both boxes may consume it: at most one of them has room, and whichever it is lands where the
+ * Layout asked. Exported as the declarations rather than as the names, because a reader that spells them
+ * out spells the fallback out too, and a missing `, 0` is an invalid margin that takes the whole rule
+ * with it.
+ */
+export const PHI_SLOT_INLINE_PLACEMENT_MARGIN_STYLE = {
+    marginInlineStart: `var(${PHI_SLOT_INLINE_MARGIN_START_PROPERTY}, 0)`,
+    marginInlineEnd: `var(${PHI_SLOT_INLINE_MARGIN_END_PROPERTY}, 0)`,
+};
+export const PHI_SLOT_BLOCK_PLACEMENT_MARGIN_STYLE = {
+    marginBlockStart: `var(${PHI_SLOT_BLOCK_MARGIN_START_PROPERTY}, 0)`,
+    marginBlockEnd: `var(${PHI_SLOT_BLOCK_MARGIN_END_PROPERTY}, 0)`,
+};
+function phiAxisMargins(placement) {
+    return {
+        start: placement === "center" || placement === "end" ? "auto" : "0",
+        end: placement === "center" ? "auto" : "0",
+    };
+}
+/**
+ * A placement as the four margins that carry it out, for a slot to hand down.
+ *
+ * An auto margin on the cross axis of a flex line overrides `align-self`, and that is harmless here: a
+ * child that fills takes its measurement from the `width` or `height` of `100%` its frame writes, not
+ * from being stretched, so there is nothing for the override to take away.
+ */
+export function resolvePhiSlotPlacementMargins(placement) {
+    const inline = phiAxisMargins(placement.inline);
+    const block = phiAxisMargins(placement.block);
+    return {
+        [PHI_SLOT_INLINE_MARGIN_START_PROPERTY]: inline.start,
+        [PHI_SLOT_INLINE_MARGIN_END_PROPERTY]: inline.end,
+        [PHI_SLOT_BLOCK_MARGIN_START_PROPERTY]: block.start,
+        [PHI_SLOT_BLOCK_MARGIN_END_PROPERTY]: block.end,
+    };
+}
+/**
+ * An alignment word read back as a placement.
+ *
+ * A Layout whose author set `align` or `justify` directly has a placement too, it just arrived already
+ * spelled. Anything that distributes rather than places -- `space-between` and its kin -- names no side
+ * and reads as nothing stated.
+ */
+export function phiPlacementFromWord(word) {
+    return word === "center"
+        ? "center"
+        : word === "end" || word === "flex-end"
+            ? "end"
+            : word === "start" || word === "flex-start"
+                ? "start"
+                : null;
+}
 export function resolvePhiFlexAxisAlignment(anchor, vertical) {
     if (anchor == null) {
         return {

package/components/layouts/phi-layout-slot-state.d.ts

@@ -15,7 +15,6 @@ export declare function PhiBaseLayoutSlotScope({ slotIndex, children }: {
     slotIndex: number;
     children: ReactNode;
 }): import("react").JSX.Element;
-export declare function usePhiBaseLayoutSlotState(slotIndex: number, ancestorLevel?: number): PhiBaseLayoutSlotState | null;
 export declare function usePhiBaseLayoutSlotStates(ancestorLevel?: number): PhiBaseLayoutSlotState[] | null;
 /**
  * The controller of the slot this component is rendered in, or null outside a layout that scopes its

package/components/layouts/phi-layout-slot-state.js

@@ -20,14 +20,6 @@ function resolvePhiBaseLayoutAncestorContext(context, ancestorLevel) {
     }
     return current;
 }
-export function usePhiBaseLayoutSlotState(slotIndex, ancestorLevel = 0) {
-    const context = useContext(PhiBaseLayoutSlotStateContext);
-    const targetContext = resolvePhiBaseLayoutAncestorContext(context, ancestorLevel);
-    if (!targetContext) {
-        return null;
-    }
-    return targetContext.slotStates[slotIndex] ?? "expanded";
-}
 export function usePhiBaseLayoutSlotStates(ancestorLevel = 0) {
     const context = useContext(PhiBaseLayoutSlotStateContext);
     const targetContext = resolvePhiBaseLayoutAncestorContext(context, ancestorLevel);

package/components/layouts/phi-layout-view-model.d.ts

@@ -26,7 +26,7 @@ export type PhiBaseLayoutProps = PhiLayoutProps & {
 };
 export declare function resolvePhiBaseLayoutSlotState(initialSlotStates: PhiBaseLayoutSlotStates | undefined, slotIndex: number): PhiBaseLayoutSlotState;
 export declare function resolvePhiBaseLayoutSlotStates(slotCount: number, initialSlotStates?: PhiBaseLayoutSlotStates): PhiBaseLayoutSlotState[];
-export declare function resolvePhiBaseLayoutChrome({ padding, paddingTop, paddingRight, paddingBottom, paddingLeft, background, border, borderRadius, effect, shadow, labelEnd, }: Pick<PhiBaseLayoutProps, "labelEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "background" | "border" | "borderRadius" | "effect" | "shadow">): {
+export declare function resolvePhiBaseLayoutChrome({ padding, paddingTop, paddingRight, paddingBottom, paddingLeft, background, borderSource, border, borderRadius, effect, shadow, labelEnd, }: Pick<PhiBaseLayoutProps, "labelEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "background" | "borderSource" | "border" | "borderRadius" | "effect" | "shadow">): {
     style: CSSProperties;
     hasExplicitLayoutBackground: boolean;
 };

package/components/layouts/phi-layout-view-model.js

@@ -12,7 +12,7 @@ export function resolvePhiBaseLayoutSlotState(initialSlotStates, slotIndex) {
 export function resolvePhiBaseLayoutSlotStates(slotCount, initialSlotStates) {
     return Array.from({ length: slotCount }, (_, slotIndex) => resolvePhiBaseLayoutSlotState(initialSlotStates, slotIndex));
 }
-export function resolvePhiBaseLayoutChrome({ padding, paddingTop, paddingRight, paddingBottom, paddingLeft, background, border, borderRadius, effect, shadow, labelEnd, }) {
+export function resolvePhiBaseLayoutChrome({ padding, paddingTop, paddingRight, paddingBottom, paddingLeft, background, borderSource, border, borderRadius, effect, shadow, labelEnd, }) {
     const layoutStyle = resolvePhiLayoutStyle({
         padding,
         paddingTop,
@@ -20,6 +20,7 @@ export function resolvePhiBaseLayoutChrome({ padding, paddingTop, paddingRight,
         paddingBottom,
         paddingLeft,
         background,
+        borderSource,
         border,
         borderRadius,
     });

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

@@ -5,19 +5,54 @@ import { resolvePhiLayoutDefaults } from "../../helpers/cms-layout-defaults";
 import { isPhiLayoutAuthoringRender, phiLayoutSlotClassName, phiLayoutSlotContentMarker, } from "../../helpers/layout-authoring-markers";
 const PHI_MASONRY_LAYOUT_DEFAULTS = resolvePhiLayoutDefaults("masonry");
 export function PhiMasonryLayout({ slots, ...layoutProps }) {
-    const { columns = PHI_MASONRY_LAYOUT_DEFAULTS.columns, minColumnWidth, gap = PHI_MASONRY_LAYOUT_DEFAULTS.gap, renderMode, style, layoutKind = "masonry", } = 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 isAuthoringRender = isPhiLayoutAuthoringRender(layoutProps);
-    return (_jsx(PhiBaseLayout, { ...layoutProps, layoutKind: layoutKind, slots: slots.map((slot, index) => (_jsx("div", { className: phiLayoutSlotClassName(isAuthoringRender), "data-phi-layout-has-content": phiLayoutSlotContentMarker(isAuthoringRender, true), style: {
-                display: "inline-block",
-                width: "100%",
-                minWidth: 0,
-                breakInside: "avoid",
-                pageBreakInside: "avoid",
-                marginBottom: resolvedGap,
-            }, children: slot }, index))), renderMode: renderMode, gap: resolvedGap, style: {
+    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.
+     */
+    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));
+    /*
+     * One insert control, at the end, drawn here rather than by the base layout.
+     *
+     * The base layout used to offer one after every slot -- a between-the-items model, and one that
+     * counted an empty trailing entry of the slot array as a position of its own, so a Masonry with two
+     * Widgets drew three buttons. Grid had already stopped taking that offer and stated its own; this is
+     * the same, for the column flow, and the offer itself is gone now that nobody took it.
+     */
+    const occupiedSlotIndices = slots.reduce((next, slot, slotIndex) => {
+        if (slot !== null && slot !== undefined && slot !== false) {
+            next.push(slotIndex);
+        }
+        return next;
+    }, []);
+    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) {
+        renderedItems.push(renderMasonryItem(`insert-${nextInsertSlotIndex}`, false, editRenderInsertControl({
+            presentation: "inline",
+            slotIndex: nextInsertSlotIndex,
+            label: editSlotLabels?.[nextInsertSlotIndex],
+            onInsert: (targetSlotIndex) => editSlotAction(targetSlotIndex, {
+                defaultPickSection: "widget",
+                allowWidgetSection: true,
+                slotIndex: targetSlotIndex,
+            }),
+        })));
+    }
+    return (_jsx(PhiBaseLayout, { ...layoutProps, layoutKind: layoutKind, slots: renderedItems, renderMode: renderMode, gap: resolvedGap, style: {
             minWidth: 0,
             columnCount: resolvedMinColumnWidth ? undefined : resolvedColumns,
             columnWidth: resolvedMinColumnWidth,

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { PhiRuntimeModuleRenderClientHost } from "../runtime/runtime-module-render-client-manifest";
-import { PhiCmsLayoutType } from "../../constants/cms-layout-types";
+import { PhiCmsLayoutType } from "../../constants/cms-layout-type-keys";
 export function PhiStackLayout(props) {
     return (_jsx(PhiRuntimeModuleRenderClientHost, { type: PhiCmsLayoutType.Stack, componentProps: { ...props } }));
 }

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

@@ -1,8 +1,9 @@
 "use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Typography, theme } from "antd";
+import { theme } from "antd";
 import { PHI_LAYOUT } from "../../theme/phi-tokens";
 import { usePhiAuthoringRegionOverrides } from "../runtime/authoring-region-overrides";
+import { PhiTypographyControl } from "../controls/phi-typography-control";
 const PHI_PADDING = "var(--ant-padding)";
 const PHI_PADDING_XS = "var(--ant-padding-xs)";
 const PHI_COLOR_BORDER_SECONDARY = "var(--ant-color-border-secondary)";
@@ -44,10 +45,10 @@ export function PhiStructureRegionLayout({ blockId, headerTop, headerMain, sider
         }, children: resolvedSiderLeftMode === "fullHeight" ? (_jsxs("div", { className: "phi-structure-region-layout__grid", style: {
                 ...sharedGridStyle,
                 minHeight: isPreviewMode ? "100%" : undefined,
-            }, children: [_jsx("div", { className: "phi-structure-region-layout__sider-cell", style: { gridColumn: 1, gridRow: "1 / 6", minWidth: 0, height: "100%", alignSelf: "stretch" }, children: hasVisibleSiderLeft ? siderLeft : null }, "sider_left"), _jsx("div", { style: { gridColumn: 2, gridRow: 1, minWidth: 0 }, children: headerTop }, "header_top"), _jsx("div", { style: { gridColumn: 2, gridRow: 2, minWidth: 0 }, children: headerMain }, "header_main"), _jsx("div", { style: { gridColumn: 2, gridRow: 3, ...contentPreviewStyle }, children: isPreviewMode ? null : (_jsxs(_Fragment, { children: [_jsx(Typography.Text, { strong: true, children: labels?.structure?.surface?.contentTitle ?? "Page body viewport" }), _jsx(Typography.Text, { type: "secondary", children: labels?.structure?.surface?.contentDescription ??
+            }, children: [_jsx("div", { className: "phi-structure-region-layout__sider-cell", style: { gridColumn: 1, gridRow: "1 / 6", minWidth: 0, height: "100%", alignSelf: "stretch" }, children: hasVisibleSiderLeft ? siderLeft : null }, "sider_left"), _jsx("div", { style: { gridColumn: 2, gridRow: 1, minWidth: 0 }, children: headerTop }, "header_top"), _jsx("div", { style: { gridColumn: 2, gridRow: 2, minWidth: 0 }, children: headerMain }, "header_main"), _jsx("div", { style: { gridColumn: 2, gridRow: 3, ...contentPreviewStyle }, children: isPreviewMode ? null : (_jsxs(_Fragment, { children: [_jsx(PhiTypographyControl, { strong: true, children: labels?.structure?.surface?.contentTitle ?? "Page body viewport" }), _jsx(PhiTypographyControl, { type: "secondary", children: labels?.structure?.surface?.contentDescription ??
                                     "Placeholder for the page body rendered by the selected page." })] })) }, "content"), _jsx("div", { style: { gridColumn: 2, gridRow: 4, minWidth: 0 }, children: footerMain }, "footer_main"), _jsx("div", { style: { gridColumn: 2, gridRow: 5, minWidth: 0 }, children: footerBottom }, "footer_bottom")] })) : (_jsxs("div", { className: "phi-structure-region-layout__grid", style: {
                 ...sharedGridStyle,
                 minHeight: isPreviewMode ? "100%" : undefined,
-            }, children: [_jsx("div", { style: { gridColumn: "1 / 3", gridRow: 1, minWidth: 0 }, children: headerTop }, "header_top"), _jsx("div", { style: { gridColumn: "1 / 3", gridRow: 2, minWidth: 0 }, children: headerMain }, "header_main"), _jsx("div", { className: "phi-structure-region-layout__sider-cell", style: { gridColumn: 1, gridRow: 3, minWidth: 0, height: "100%", alignSelf: "stretch" }, children: hasVisibleSiderLeft ? siderLeft : null }, "sider_left"), _jsx("div", { style: { gridColumn: 2, gridRow: 3, ...contentPreviewStyle }, children: isPreviewMode ? null : (_jsxs(_Fragment, { children: [_jsx(Typography.Text, { strong: true, children: labels?.structure?.surface?.contentTitle ?? "Page body viewport" }), _jsx(Typography.Text, { type: "secondary", children: labels?.structure?.surface?.contentDescription ??
+            }, children: [_jsx("div", { style: { gridColumn: "1 / 3", gridRow: 1, minWidth: 0 }, children: headerTop }, "header_top"), _jsx("div", { style: { gridColumn: "1 / 3", gridRow: 2, minWidth: 0 }, children: headerMain }, "header_main"), _jsx("div", { className: "phi-structure-region-layout__sider-cell", style: { gridColumn: 1, gridRow: 3, minWidth: 0, height: "100%", alignSelf: "stretch" }, children: hasVisibleSiderLeft ? siderLeft : null }, "sider_left"), _jsx("div", { style: { gridColumn: 2, gridRow: 3, ...contentPreviewStyle }, children: isPreviewMode ? null : (_jsxs(_Fragment, { children: [_jsx(PhiTypographyControl, { strong: true, children: labels?.structure?.surface?.contentTitle ?? "Page body viewport" }), _jsx(PhiTypographyControl, { type: "secondary", children: labels?.structure?.surface?.contentDescription ??
                                     "Placeholder for the page body rendered by the selected page." })] })) }, "content"), _jsx("div", { style: { gridColumn: "1 / 3", gridRow: 4, minWidth: 0 }, children: footerMain }, "footer_main"), _jsx("div", { style: { gridColumn: "1 / 3", gridRow: 5, minWidth: 0 }, children: footerBottom }, "footer_bottom")] })) }));
 }

package/components/layouts/plugins/carousel-layout-plugin.d.ts

@@ -1,4 +1,3 @@
 import type { PhiCmsLayoutPlugin } from "../../../types";
 import type { PhiCmsCarouselLayoutConfig } from "../../../types/cms-config";
 export declare const PHI_CAROUSEL_LAYOUT_PLUGIN: PhiCmsLayoutPlugin<PhiCmsCarouselLayoutConfig>;
-export declare const PHI_CAROUSEL_LAYOUT_PLUGIN_TYPE: string;

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { PHI_CMS_CAROUSEL_LAYOUT_SLOTS, PhiCmsLayoutType, } from "../../../constants/cms-layout-types";
+import { PHI_CMS_CAROUSEL_LAYOUT_SLOTS, } from "../../../constants/cms-layout-types";
 import { parsePhiCmsCarouselLayoutConfig } from "../../../types/cms-config";
-import { resolvePhiAnchorPlacement } from "../phi-layout-contract";
+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";
@@ -41,6 +41,5 @@ function resolvePhiCarouselSlotMeta(node) {
 export const PHI_CAROUSEL_LAYOUT_PLUGIN = {
     ...PHI_CAROUSEL_LAYOUT_DEFINITION,
     parseConfig: parsePhiCmsCarouselLayoutConfig,
-    ...definePhiLayoutRenderers(({ node, config, layoutKind, renderSequentialSlotChildren }, renderMode) => (_jsx(PhiCarouselLayout, { blockId: node.id, layoutKind: layoutKind, slots: renderSequentialSlotChildren(node), slotKeys: resolvePhiCarouselSlotKeys(), slotMeta: resolvePhiCarouselSlotMeta(node), renderMode: renderMode, activeSlotKey: config.activeSlotKey, 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: config.anchor ? resolvePhiAnchorPlacement(config.anchor) : undefined, editSlotAnchor: config.anchor ? resolvePhiAnchorPlacement(config.anchor) : undefined, 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, 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: 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}`))),
 };
-export const PHI_CAROUSEL_LAYOUT_PLUGIN_TYPE = PhiCmsLayoutType.Carousel;

package/components/layouts/plugins/collapsible-layout-plugin.d.ts

@@ -1,4 +1,3 @@
 import type { PhiCmsLayoutPlugin } from "../../../types";
 import type { PhiCmsCollapsibleLayoutConfig } from "../../../types/cms-config";
 export declare const PHI_COLLAPSIBLE_LAYOUT_PLUGIN: PhiCmsLayoutPlugin<PhiCmsCollapsibleLayoutConfig>;
-export declare const PHI_COLLAPSIBLE_LAYOUT_PLUGIN_TYPE: string;

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { PHI_CMS_COLLAPSIBLE_LAYOUT_SLOTS, PhiCmsLayoutType, } from "../../../constants/cms-layout-types";
+import { PHI_CMS_COLLAPSIBLE_LAYOUT_SLOTS, } from "../../../constants/cms-layout-types";
 import { parsePhiCmsCollapsibleLayoutConfig, } from "../../../types/cms-config";
-import { resolvePhiAnchorPlacement, } from "../phi-layout-contract";
+import { resolvePhiLayoutAnchor, } from "../phi-layout-contract";
 import { PhiCollapsibleLayout } from "../phi-collapsible-layout";
 import { definePhiLayoutRenderers } from "../layout-plugin-renderers";
 import { comparePhiCmsInstanceIds } from "../../../types/cms-instance-id";
@@ -28,6 +28,5 @@ function resolvePhiCollapsibleSlotMeta(node, config) {
 export const PHI_COLLAPSIBLE_LAYOUT_PLUGIN = {
     ...PHI_COLLAPSIBLE_LAYOUT_DEFINITION,
     parseConfig: parsePhiCmsCollapsibleLayoutConfig,
-    ...definePhiLayoutRenderers(({ node, config, layoutKind, renderSequentialSlotChildren }, renderMode) => (_jsx(PhiCollapsibleLayout, { blockId: node.id, layoutKind: layoutKind, slots: renderSequentialSlotChildren(node), slotKeys: resolvePhiCollapsibleSlotKeys(), slotMeta: resolvePhiCollapsibleSlotMeta(node, config), renderMode: renderMode, anchor: config.anchor, editSlotAnchor: config.anchor ? resolvePhiAnchorPlacement(config.anchor) : undefined, panelMinHeight: config.panelMinHeight, accordion: config.accordion, slotTitles: node.resolvedSlotTitles ?? config.slotTitles, translateSlotTitles: config.translateSlotTitles, defaultOpenSlotKeys: config.defaultOpenSlotKeys, collapsible: config.collapsible, bordered: config.bordered, 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, 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(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}`))),
 };
-export const PHI_COLLAPSIBLE_LAYOUT_PLUGIN_TYPE = PhiCmsLayoutType.Collapsible;

package/components/layouts/plugins/content-layout-plugin.d.ts

@@ -1,4 +1,3 @@
 import type { PhiCmsLayoutPlugin } from "../../../types";
 import type { PhiCmsContentLayoutConfig } from "../../../types/cms-config";
 export declare const PHI_CONTENT_LAYOUT_PLUGIN: PhiCmsLayoutPlugin<PhiCmsContentLayoutConfig>;
-export declare const PHI_CONTENT_LAYOUT_PLUGIN_TYPE: string;

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

@@ -1,12 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { PhiCmsLayoutType, } from "../../../constants/cms-layout-types";
+import {} from "../../../constants/cms-layout-types";
 import { parsePhiCmsContentLayoutConfig } from "../../../types/cms-config";
 import { PhiContentLayout } from "../phi-content-layout";
 import { definePhiLayoutRenderers } from "../layout-plugin-renderers";
 import { PHI_CONTENT_LAYOUT_DEFINITION } from "../layout-definitions";
+import { resolvePhiLayoutAnchor } from "../phi-layout-contract";
 export const PHI_CONTENT_LAYOUT_PLUGIN = {
     ...PHI_CONTENT_LAYOUT_DEFINITION,
     parseConfig: parsePhiCmsContentLayoutConfig,
-    ...definePhiLayoutRenderers(({ node, config, layoutKind, renderChildren }, renderMode) => (_jsx(PhiContentLayout, { blockId: node.id, layoutKind: layoutKind, 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, border: config.border, borderRadius: config.borderRadius, labelEnd: config.labelEnd, editSlotAnchor: config.anchor ?? "center" }, `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, 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}`))),
 };
-export const PHI_CONTENT_LAYOUT_PLUGIN_TYPE = PhiCmsLayoutType.Content;