@phis/ui 0.2.0 → 0.3.0

package/components/layouts/layout-definitions.d.ts

@@ -128,6 +128,7 @@ export declare const PHI_COLLAPSIBLE_LAYOUT_DEFINITION: {
     kind: "layout";
     pluginKey: string;
     typeKey: string;
+    translatesOwnText: true;
     slotSizePolicy: "fill";
     slotPositions: "fixed";
     title: string;
@@ -163,6 +164,15 @@ export declare const PHI_COLLAPSIBLE_LAYOUT_DEFINITION: {
         valueType?: undefined;
         options?: undefined;
         optionsProvider?: undefined;
+    } | {
+        key: string;
+        type: "slot-texts";
+        label: string;
+        mode?: undefined;
+        valueType?: undefined;
+        options?: undefined;
+        min?: undefined;
+        optionsProvider?: undefined;
     } | {
         key: string;
         type: "boolean";
@@ -190,9 +200,6 @@ export declare const PHI_COLLAPSIBLE_LAYOUT_DEFINITION: {
         label: string;
         optionsProvider: {
             providerKey: `${string}/${string}`;
-            params: {
-                family: string;
-            };
         };
         mode?: undefined;
         valueType?: undefined;
@@ -499,19 +506,8 @@ export declare const PHI_GRID_LAYOUT_DEFINITION: {
         label: string;
     } | {
         key: string;
-        type: "choice";
+        type: "grid-placement";
         label: string;
-        optionsProvider: {
-            providerKey: `${string}/${string}`;
-            params: {
-                family: string;
-            };
-        };
-    } | {
-        key: string;
-        type: "slot-placement";
-        label: string;
-        optionsProvider?: undefined;
     })[];
     slots: {
         key: string;
@@ -538,14 +534,8 @@ export declare const PHI_MASONRY_LAYOUT_DEFINITION: {
         label: string;
     } | {
         key: string;
-        type: "number";
+        type: "column-count";
         label: string;
-        min?: undefined;
-    } | {
-        key: string;
-        type: "length";
-        label: string;
-        min: number;
     })[];
     slots: {
         key: string;
@@ -570,25 +560,33 @@ export declare const PHI_SPLIT_CARD_LAYOUT_DEFINITION: {
     defaultConfig: {
         [x: string]: unknown;
     };
+    creationConfig: {
+        surface: {
+            readonly background: {
+                readonly base: {
+                    readonly kind: "color";
+                    readonly color: "var(--ant-color-bg-container)";
+                };
+                readonly overlay: null;
+                readonly filter: null;
+            };
+            readonly borderSource: "custom";
+            readonly border: {
+                readonly borderWidth: 1;
+                readonly borderStyle: "solid";
+                readonly borderColor: "var(--ant-color-border-secondary)";
+            };
+            readonly shadow: "soft";
+        };
+    };
     fields: ({
         key: string;
         type: "padding";
         label: string;
     } | {
         key: string;
-        type: "background";
-        label: string;
-        section: string;
-    } | {
-        key: string;
-        type: "border";
-        label: string;
-        section: string;
-    } | {
-        key: string;
-        type: "shadow";
+        type: "boolean";
         label: string;
-        section: string;
     })[];
     slots: ({
         readonly key: "slot_0";
@@ -835,6 +833,7 @@ export declare const PHI_CORE_LAYOUT_DEFINITIONS: readonly [{
     kind: "layout";
     pluginKey: string;
     typeKey: string;
+    translatesOwnText: true;
     slotSizePolicy: "fill";
     slotPositions: "fixed";
     title: string;
@@ -870,6 +869,15 @@ export declare const PHI_CORE_LAYOUT_DEFINITIONS: readonly [{
         valueType?: undefined;
         options?: undefined;
         optionsProvider?: undefined;
+    } | {
+        key: string;
+        type: "slot-texts";
+        label: string;
+        mode?: undefined;
+        valueType?: undefined;
+        options?: undefined;
+        min?: undefined;
+        optionsProvider?: undefined;
     } | {
         key: string;
         type: "boolean";
@@ -897,9 +905,6 @@ export declare const PHI_CORE_LAYOUT_DEFINITIONS: readonly [{
         label: string;
         optionsProvider: {
             providerKey: `${string}/${string}`;
-            params: {
-                family: string;
-            };
         };
         mode?: undefined;
         valueType?: undefined;
@@ -1203,19 +1208,8 @@ export declare const PHI_CORE_LAYOUT_DEFINITIONS: readonly [{
         label: string;
     } | {
         key: string;
-        type: "choice";
+        type: "grid-placement";
         label: string;
-        optionsProvider: {
-            providerKey: `${string}/${string}`;
-            params: {
-                family: string;
-            };
-        };
-    } | {
-        key: string;
-        type: "slot-placement";
-        label: string;
-        optionsProvider?: undefined;
     })[];
     slots: {
         key: string;
@@ -1241,14 +1235,8 @@ export declare const PHI_CORE_LAYOUT_DEFINITIONS: readonly [{
         label: string;
     } | {
         key: string;
-        type: "number";
+        type: "column-count";
         label: string;
-        min?: undefined;
-    } | {
-        key: string;
-        type: "length";
-        label: string;
-        min: number;
     })[];
     slots: {
         key: string;
@@ -1272,25 +1260,33 @@ export declare const PHI_CORE_LAYOUT_DEFINITIONS: readonly [{
     defaultConfig: {
         [x: string]: unknown;
     };
+    creationConfig: {
+        surface: {
+            readonly background: {
+                readonly base: {
+                    readonly kind: "color";
+                    readonly color: "var(--ant-color-bg-container)";
+                };
+                readonly overlay: null;
+                readonly filter: null;
+            };
+            readonly borderSource: "custom";
+            readonly border: {
+                readonly borderWidth: 1;
+                readonly borderStyle: "solid";
+                readonly borderColor: "var(--ant-color-border-secondary)";
+            };
+            readonly shadow: "soft";
+        };
+    };
     fields: ({
         key: string;
         type: "padding";
         label: string;
     } | {
         key: string;
-        type: "background";
-        label: string;
-        section: string;
-    } | {
-        key: string;
-        type: "border";
-        label: string;
-        section: string;
-    } | {
-        key: string;
-        type: "shadow";
+        type: "boolean";
         label: string;
-        section: string;
     })[];
     slots: ({
         readonly key: "slot_0";

package/components/layouts/layout-definitions.js

@@ -2,7 +2,7 @@ import { resolvePhiCmsLayoutPluginKey } from "../../constants/cms-layout-type-ke
 import { PHI_CMS_CAROUSEL_LAYOUT_SLOTS, PHI_CMS_COLLAPSIBLE_LAYOUT_SLOTS, PHI_CMS_DEFAULT_LAYOUT_SLOTS, PHI_CMS_FLEX_LAYOUT_SLOTS, PHI_CMS_FLEX_VERTICAL_LAYOUT_SLOTS, PHI_CMS_GRID_LAYOUT_SLOTS, PHI_CMS_MASONRY_LAYOUT_SLOTS, PHI_CMS_PAGE_REGION_LAYOUT_SLOTS, PHI_CMS_SPLIT_LAYOUT_SLOTS, PHI_CMS_STACK_LAYOUT_SLOTS, PHI_CMS_STRUCTURE_REGION_LAYOUT_SLOTS, PHI_CMS_THREE_COLUMN_LAYOUT_SLOTS, } from "../../constants/cms-layout-types";
 import { PHI_CMS_MOUNT_POLICY_FIELD_OPTIONS } from "../../types/cms-mount-policy";
 import { PHI_MOTION_EASING_FIELD_OPTIONS, PHI_SEQUENCE_TRANSITION_MAX_MS, PHI_SEQUENCE_TRANSITION_MIN_MS, PHI_SEQUENCE_TRANSITION_STEP_MS, } from "../../helpers/motion";
-import { resolvePhiLayoutDefaults } from "../../helpers/cms-layout-defaults";
+import { PHI_SPLIT_CARD_LAYOUT_CREATION_CONFIG, PHI_SPLIT_CARD_LAYOUT_DEFAULTS, resolvePhiLayoutDefaults, } from "../../helpers/cms-layout-defaults";
 import { PHI_RENDERABLE_BLOCK_DEFAULT_ANCHOR } from "../../helpers/renderable-block-defaults";
 import { PHI_LAYOUT_PADDING_FIELDS } from "../../helpers/layout-padding-field";
 import { PHI_SIGNAL_VALUE_SCHEMAS } from "../../types/signals";
@@ -108,6 +108,7 @@ export const PHI_COLLAPSIBLE_LAYOUT_DEFINITION = {
     kind: "layout",
     pluginKey: resolvePhiCmsLayoutPluginKey("collapsible"),
     typeKey: "collapsible",
+    translatesOwnText: true,
     slotSizePolicy: "fill",
     slotPositions: "fixed",
     title: "Collapsible",
@@ -127,7 +128,7 @@ export const PHI_COLLAPSIBLE_LAYOUT_DEFINITION = {
             options: PHI_COLLAPSIBLE_SLOT_OPTIONS,
         },
         { key: "panelMinHeight", type: "length", label: "Panel Min Height", min: 0 },
-        { key: "translateSlotTitles", type: "boolean", label: "Translate Slot Titles" },
+        { key: "slotDescriptions", type: "slot-texts", label: "Panel Descriptions" },
         { key: "accordion", type: "boolean", label: "Accordion" },
         /*
          * The inside, and only the inside: whether the panels are separate objects -- their own ground, a
@@ -169,13 +170,13 @@ export const PHI_COLLAPSIBLE_LAYOUT_DEFINITION = {
             key: "headerPadding",
             type: "choice",
             label: "Header Padding",
-            optionsProvider: { providerKey: PHI_CORE_RUNTIME_DATA_PROVIDER_KEYS.spacingScale, params: { family: "padding" } },
+            optionsProvider: { providerKey: PHI_CORE_RUNTIME_DATA_PROVIDER_KEYS.spacingScale },
         },
         {
             key: "innerPadding",
             type: "choice",
             label: "Inner Padding",
-            optionsProvider: { providerKey: PHI_CORE_RUNTIME_DATA_PROVIDER_KEYS.spacingScale, params: { family: "padding" } },
+            optionsProvider: { providerKey: PHI_CORE_RUNTIME_DATA_PROVIDER_KEYS.spacingScale },
         },
     ],
     runtimeSignals: {
@@ -410,31 +411,18 @@ export const PHI_GRID_LAYOUT_DEFINITION = {
     typeKey: "grid",
     slotSizePolicy: "fill",
     title: "Grid",
-    description: "Container-responsive 24-column slot grid using Phi responsive profiles.",
+    description: "Slots in rows, as many to a row as the Grid's own width allows.",
     category: "structure",
     iconName: "grid",
     defaultConfig: resolvePhiLayoutDefaults("grid"),
     fields: [
-        ...PHI_LAYOUT_PADDING_FIELDS,
         /*
-         * `gap` is the distance on both axes, `columnGap` overrides it on the horizontal one.
-         *
-         * Only the second had a field, and it reaches `column-gap` alone, so the vertical distance was
-         * whatever a default or a preset had written and no operator could change it.
+         * The gap is the Paddings panel's, between the slots across and down; a second field for it here
+         * and a third for the distance across alone said one thing three times.
          */
-        {
-            key: "gap",
-            type: "choice",
-            label: "Gap",
-            optionsProvider: { providerKey: PHI_CORE_RUNTIME_DATA_PROVIDER_KEYS.spacingScale, params: { family: "margin" } },
-        },
-        {
-            key: "columnGap",
-            type: "choice",
-            label: "Col Gap",
-            optionsProvider: { providerKey: PHI_CORE_RUNTIME_DATA_PROVIDER_KEYS.spacingScale, params: { family: "margin" } },
-        },
-        { key: "slotPlacements", type: "slot-placement", label: "Slot placement" },
+        ...PHI_LAYOUT_PADDING_FIELDS,
+        /* How many slots a row holds at each width, and the slots that are wider or indented. */
+        { key: "columns", type: "grid-placement", label: "Columns" },
     ],
     slots: [...PHI_CMS_GRID_LAYOUT_SLOTS],
 };
@@ -444,14 +432,14 @@ export const PHI_MASONRY_LAYOUT_DEFINITION = {
     typeKey: "masonry",
     slotSizePolicy: "fill",
     title: "Masonry",
-    description: "Sequential slot masonry layout with column-based flow.",
+    description: "Slots in columns at their own heights, without rows.",
     category: "structure",
     iconName: "masonry",
     defaultConfig: resolvePhiLayoutDefaults("masonry"),
     fields: [
         ...PHI_LAYOUT_PADDING_FIELDS,
-        { key: "columns", type: "number", label: "Columns" },
-        { key: "minColumnWidth", type: "length", label: "Min Column Width", min: 0 },
+        /* How many columns at each width; the gap between them is the Paddings panel's. */
+        { key: "columns", type: "column-count", label: "Columns" },
     ],
     slots: [...PHI_CMS_MASONRY_LAYOUT_SLOTS],
 };
@@ -462,18 +450,16 @@ export const PHI_SPLIT_CARD_LAYOUT_DEFINITION = {
     defaultAnchor: PHI_CENTRED_SLOT_DEFAULT_ANCHOR,
     slotSizePolicy: "fill",
     title: "Split Card",
-    description: "Two-panel card layout with left and right slots.",
+    description: "Two cards on the golden ratio, one Surface for both.",
     category: "structure",
     iconName: "split-card",
-    defaultConfig: resolvePhiLayoutDefaults("split"),
+    defaultConfig: { ...PHI_SPLIT_CARD_LAYOUT_DEFAULTS },
+    // The cards are the creation's, not a default: "None" in the Surface section has to stay none.
+    creationConfig: { ...PHI_SPLIT_CARD_LAYOUT_CREATION_CONFIG },
+    // The outer inset and the gap between the cards are the Paddings panel's; the rest is the Surface.
     fields: [
+        { key: "swapRatio", type: "boolean", label: "Swap ratio" },
         ...PHI_LAYOUT_PADDING_FIELDS,
-        { key: "leftBackground", type: "background", label: "Left Card Background", section: "left-card-background" },
-        { key: "leftBorder", type: "border", label: "Left Card Border", section: "left-card-border" },
-        { key: "leftShadow", type: "shadow", label: "Left Card Shadow", section: "left-card-shadow" },
-        { key: "rightBackground", type: "background", label: "Right Card Background", section: "right-card-background" },
-        { key: "rightBorder", type: "border", label: "Right Card Border", section: "right-card-border" },
-        { key: "rightShadow", type: "shadow", label: "Right Card Shadow", section: "right-card-shadow" },
     ],
     slots: [...PHI_CMS_SPLIT_LAYOUT_SLOTS],
 };

package/components/layouts/layout-slot-meta.d.ts

@@ -0,0 +1,19 @@
+import type { PhiCmsLayoutRenderNode } from "../../types/cms";
+export type PhiLayoutSlotDefinition = {
+    key: string;
+    label: string;
+    slotIndex: number;
+};
+/**
+ * What the pager Widgets are told a slotted Layout holds.
+ *
+ * Only the filled slots, named the way the person who filled them named them, because a Segmented
+ * offering twelve entries for three pictures would be a list of mostly nothing. Carousel and Stack
+ * carried this word for word; the slot table is the one thing that differs.
+ */
+export declare function resolvePhiLayoutSlotMeta(node: PhiCmsLayoutRenderNode, slots: readonly PhiLayoutSlotDefinition[]): {
+    key: string;
+    label: string;
+    slotIndex: number;
+    hasContent: boolean;
+}[];

package/components/layouts/layout-slot-meta.js

@@ -0,0 +1,34 @@
+import { comparePhiCmsInstanceIds } from "../../types/cms-instance-id";
+/**
+ * What the pager Widgets are told a slotted Layout holds.
+ *
+ * Only the filled slots, named the way the person who filled them named them, because a Segmented
+ * offering twelve entries for three pictures would be a list of mostly nothing. Carousel and Stack
+ * carried this word for word; the slot table is the one thing that differs.
+ */
+export function resolvePhiLayoutSlotMeta(node, slots) {
+    const labelsBySlotIndex = new Map();
+    const occupiedSlotIndices = new Set();
+    const children = [
+        ...(node.childLayouts ?? []).map((child) => ({ ...child, _kindOrder: 0 })),
+        ...(node.childWidgets ?? []).map((child) => ({ ...child, _kindOrder: 1 })),
+    ].sort((left, right) => left.slotIndex - right.slotIndex ||
+        left.sortOrder - right.sortOrder ||
+        left._kindOrder - right._kindOrder ||
+        comparePhiCmsInstanceIds(left.id, right.id));
+    for (const child of children) {
+        occupiedSlotIndices.add(child.slotIndex);
+        const label = child.label?.trim();
+        if (label && !labelsBySlotIndex.has(child.slotIndex)) {
+            labelsBySlotIndex.set(child.slotIndex, label);
+        }
+    }
+    return slots
+        .filter((slot) => occupiedSlotIndices.has(slot.slotIndex))
+        .map((slot) => ({
+        key: slot.key,
+        label: labelsBySlotIndex.get(slot.slotIndex) ?? slot.label,
+        slotIndex: slot.slotIndex,
+        hasContent: true,
+    }));
+}

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

@@ -1,3 +1,3 @@
 import { type PhiBaseLayoutProps } from "./phi-layout-view-model";
 export type { PhiBaseLayoutProps } from "./phi-layout-view-model";
-export declare function PhiBaseLayout({ slots, editSlotLabels, layoutKind, labelEnd, padding, paddingTop, paddingRight, paddingBottom, paddingLeft, background, backgroundLayer, border, borderRadius, effect, blockId, renderMode, visibility, enabled, capabilities, runtime, debugMode, className, size, minSize, maxSize, collapsedSizeHint, zIndex, opacity, shadow, margin, gap, initialSlotStates, style, editSlotAction, }: PhiBaseLayoutProps): import("react").JSX.Element | null;
+export declare function PhiBaseLayout({ slots, editSlotLabels, layoutKind, labelEnd, padding, paddingTop, paddingRight, paddingBottom, paddingLeft, surface, underlay, blockId, renderMode, visibility, enabled, capabilities, runtime, debugMode, className, size, minSize, maxSize, collapsedSizeHint, zIndex, opacity, margin, gap, initialSlotStates, style, editSlotAction, }: PhiBaseLayoutProps): import("react").JSX.Element | null;

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

@@ -3,10 +3,11 @@ import { cloneElement, isValidElement, } from "react";
 import { resolvePhiLayoutBoxStyle } from "./phi-layout-contract";
 import { resolvePhiBaseLayoutSlotStates, resolvePhiBaseLayoutChrome, } from "./phi-layout-view-model";
 import { isPhiLayoutAuthoringRender, phiLayoutDebugLayerMarker, } from "../../helpers/layout-authoring-markers";
+import { PhiLayoutSurfaceBox } from "./phi-layout-surface-box";
 function resolvePhiRenderableBlockStyleValue(value) {
     return value == null || value === 0 || value === "0" || value === "0px" ? undefined : value;
 }
-export function PhiBaseLayout({ slots, editSlotLabels, layoutKind, labelEnd, padding, paddingTop, paddingRight, paddingBottom, paddingLeft, background, backgroundLayer, border, borderRadius, effect, blockId, renderMode, visibility, enabled, capabilities, runtime, debugMode, className, size, minSize, maxSize, collapsedSizeHint, zIndex, opacity, shadow, margin = 0, gap = 0, initialSlotStates, style, editSlotAction, }) {
+export function PhiBaseLayout({ slots, editSlotLabels, layoutKind, labelEnd, padding, paddingTop, paddingRight, paddingBottom, paddingLeft, surface, underlay, blockId, renderMode, visibility, enabled, capabilities, runtime, debugMode, className, size, minSize, maxSize, collapsedSizeHint, zIndex, opacity, margin = 0, gap = 0, initialSlotStates, style, editSlotAction, }) {
     const isAuthoringRender = isPhiLayoutAuthoringRender({
         editSlotAction,
         editSlotLabels,
@@ -57,18 +58,14 @@ export function PhiBaseLayout({ slots, editSlotLabels, layoutKind, labelEnd, pad
     const resolvedSlots = slotList
         .map((slot, index) => resolveLayoutSlotNode(slot, index))
         .filter((slot) => slot !== null);
-    const { style: resolvedLayoutStyle, hasExplicitLayoutBackground, } = resolvePhiBaseLayoutChrome({
+    const { style: resolvedLayoutStyle, ground, hasExplicitLayoutBackground, } = resolvePhiBaseLayoutChrome({
         labelEnd,
         padding,
         paddingTop,
         paddingRight,
         paddingBottom,
         paddingLeft,
-        background,
-        border,
-        borderRadius,
-        effect,
-        shadow,
+        surface,
     });
     const resolvedContainerStyle = {
         ...resolvePhiLayoutBoxStyle({
@@ -97,5 +94,5 @@ export function PhiBaseLayout({ slots, editSlotLabels, layoutKind, labelEnd, pad
         overflow: resolvedVisibility === "collapsed" ? "hidden" : undefined,
         ...style,
     };
-    return (_jsxs("div", { "data-phi-block-id": blockId ?? undefined, "data-layout-kind": layoutKind, "data-phi-block-render-mode": resolvedRenderMode, "data-phi-block-visibility": resolvedVisibility, "data-phi-block-enabled": resolvedEnabled ? "true" : "false", "data-phi-block-selectable": capabilities?.selectable ? "true" : undefined, "data-phi-block-draggable": capabilities?.draggable ? "true" : undefined, "data-phi-block-hoverable": capabilities?.hoverable ? "true" : undefined, "data-phi-block-activatable": capabilities?.activatable ? "true" : undefined, "data-phi-block-focusable": capabilities?.focusable ? "true" : undefined, "data-phi-block-droppable": capabilities?.droppable ? "true" : undefined, "data-phi-block-selected": runtime?.selected ? "true" : undefined, "data-phi-block-hovered": runtime?.hovered ? "true" : undefined, "data-phi-block-dragging": runtime?.dragging ? "true" : undefined, "data-phi-block-focused": runtime?.focused ? "true" : undefined, "data-phi-block-active": runtime?.active ? "true" : undefined, "data-phi-layout-debug-layer": phiLayoutDebugLayerMarker(isAuthoringRender), "data-phi-debug-scaffold": resolvedDebugMode ? "on" : undefined, "data-phi-layout-has-explicit-layout-background": hasExplicitLayoutBackground ? "true" : "false", className: ["phi-layout", className].filter(Boolean).join(" "), style: resolvedContainerStyle, children: [backgroundLayer, resolvedSlots] }));
+    return (_jsxs(PhiLayoutSurfaceBox, { blockId: blockId, surface: surface, ground: ground, "data-phi-block-id": blockId ?? undefined, "data-layout-kind": layoutKind, "data-phi-block-render-mode": resolvedRenderMode, "data-phi-block-visibility": resolvedVisibility, "data-phi-block-enabled": resolvedEnabled ? "true" : "false", "data-phi-block-selectable": capabilities?.selectable ? "true" : undefined, "data-phi-block-draggable": capabilities?.draggable ? "true" : undefined, "data-phi-block-hoverable": capabilities?.hoverable ? "true" : undefined, "data-phi-block-activatable": capabilities?.activatable ? "true" : undefined, "data-phi-block-focusable": capabilities?.focusable ? "true" : undefined, "data-phi-block-droppable": capabilities?.droppable ? "true" : undefined, "data-phi-block-selected": runtime?.selected ? "true" : undefined, "data-phi-block-hovered": runtime?.hovered ? "true" : undefined, "data-phi-block-dragging": runtime?.dragging ? "true" : undefined, "data-phi-block-focused": runtime?.focused ? "true" : undefined, "data-phi-block-active": runtime?.active ? "true" : undefined, "data-phi-layout-debug-layer": phiLayoutDebugLayerMarker(isAuthoringRender), "data-phi-debug-scaffold": resolvedDebugMode ? "on" : undefined, "data-phi-layout-has-explicit-layout-background": hasExplicitLayoutBackground ? "true" : "false", className: ["phi-layout", className].filter(Boolean).join(" "), style: resolvedContainerStyle, children: [underlay, resolvedSlots] }));
 }

package/components/layouts/phi-flex-vertical-layout.d.ts

@@ -1,3 +1,4 @@
-import { type PhiFlexVerticalLayoutProps } from "./clients/phi-flex-vertical-layout-client";
-export type { PhiFlexVerticalLayoutProps } from "./clients/phi-flex-vertical-layout-client";
+import { type PhiFlexLayoutProps } from "./clients/phi-flex-layout-client";
+/** The Flex Layout in a column: gap and anchor, none of the row's distribution, wrapping or separators. */
+export type PhiFlexVerticalLayoutProps = Omit<PhiFlexLayoutProps, "distribution" | "wrap" | "verticalSeparators" | "separatorBeforeFirst" | "separatorSpan">;
 export declare function PhiFlexVerticalLayout(props: PhiFlexVerticalLayoutProps): import("react").JSX.Element;

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { PhiFlexVerticalLayout as PhiFlexVerticalLayoutView, } from "./clients/phi-flex-vertical-layout-client";
+import { PhiFlexLayout as PhiFlexLayoutView, } from "./clients/phi-flex-layout-client";
 export function PhiFlexVerticalLayout(props) {
-    return _jsx(PhiFlexVerticalLayoutView, { ...props });
+    return _jsx(PhiFlexLayoutView, { ...props, layoutKind: "verticalflex" });
 }

package/components/layouts/phi-grid-contract.d.ts

@@ -2,23 +2,26 @@ import type { CSSProperties, ReactNode } from "react";
 import type { PhiBaseLayoutProps } from "./phi-layout-view-model";
 import type { PhiRenderableBlockAnchor } from "../../types";
 import type { PhiAnchorWidgetPlacement } from "../controls/phi-anchor-control-contract";
-import { type PhiResolvedResponsiveValue, type PhiResponsiveValue } from "../../types/responsive";
+import type { PhiResolvedResponsiveValue, PhiResponsiveValue } from "../../types/responsive";
+import { isPhiGridColumnCount, PHI_GRID_COLUMN_COUNTS, type PhiGridColumnCount } from "../../constants/grid-columns";
+export { isPhiGridColumnCount, PHI_GRID_COLUMN_COUNTS, type PhiGridColumnCount };
 /**
- * What a slot spans when its Grid was never told.
+ * How many slots a row holds when the Grid was never told.
  *
- * One constant for all three profiles stood here before -- six tracks, four per row -- and a Grid whose
- * slots carry no authored span therefore never reflowed: four abreast at 320px and at 1600px alike,
- * only narrower, because the 24 tracks are `minmax(0, 1fr)` and shrink. The wrapping that did happen was
- * the cursor running past column 24, not an answer to the room.
- *
- * So the default is a profile value like every other placement: the whole row where there is no room to
- * share, two abreast in the middle, four where the Grid is at least as wide as the content column. An
- * author who names a span still names it and nothing here applies.
+ * The whole row where there is no room to share, two abreast in the middle, four where the Grid is at
+ * least as wide as the content column. One constant for all three widths stood here before -- four per
+ * row -- and a Grid nobody told never reflowed: four abreast at 320px and at 1600px alike, only
+ * narrower.
+ */
+export declare const PHI_GRID_LAYOUT_DEFAULT_COLUMNS: PhiResolvedResponsiveValue<PhiGridColumnCount>;
+/**
+ * A slot that is not one column wide, or does not start where the previous one ended.
  *
- * At `compact` the row is full, so an offset has nothing left to push into and is clamped away. That is
- * the answer rather than an accident: a slot cannot be indented in a room that holds one slot.
+ * Both counted in the Grid's columns at that width -- "two columns", "indented by one" -- not in the
+ * 24 tracks underneath, which an author had to divide by hand before: three abreast was a span of 8.
+ * A width the placement says nothing about is the plain slot there, one column and no indent; it does
+ * not inherit from a narrower width, because a column means something else at every width.
  */
-export declare const PHI_GRID_LAYOUT_DEFAULT_SPAN: PhiResolvedResponsiveValue<number>;
 export type PhiGridLayoutSlotPlacement = {
     slotIndex: number;
     span?: PhiResponsiveValue<number>;
@@ -26,17 +29,22 @@ export type PhiGridLayoutSlotPlacement = {
 };
 export type PhiGridLayoutProps = Omit<PhiBaseLayoutProps, "slots"> & {
     slots: ReactNode[];
+    /** The distance between slots, across and down. */
     gap?: CSSProperties["gap"];
-    columnGap?: CSSProperties["columnGap"];
+    columns?: PhiResponsiveValue<number>;
     slotPlacements?: PhiGridLayoutSlotPlacement[];
-    align?: CSSProperties["alignItems"];
-    justify?: CSSProperties["justifyContent"];
     anchor?: PhiRenderableBlockAnchor;
     editSlotAnchor?: PhiAnchorWidgetPlacement | null;
-    wrap?: boolean | CSSProperties["flexWrap"];
-    slotStyle?: CSSProperties;
 };
-export declare function resolvePhiGridSlotPlacement(slotPlacements: PhiGridLayoutSlotPlacement[] | undefined, slotIndex: number, profile: "compact" | "medium" | "wide", fallbackSpan: number): {
+/** The Grid's columns at every width: what was stated where it is a column count, the default elsewhere. */
+export declare function resolvePhiGridColumns(columns: PhiResponsiveValue<number> | undefined): PhiResolvedResponsiveValue<PhiGridColumnCount>;
+/**
+ * What a slot spans and skips at one width, in the 24 tracks.
+ *
+ * Clamped to the row: a slot wider than the row is the row, and an indent that leaves no room is
+ * dropped -- a Grid whose columns were reduced keeps its slots rather than losing them.
+ */
+export declare function resolvePhiGridSlotPlacement(slotPlacements: PhiGridLayoutSlotPlacement[] | undefined, slotIndex: number, profile: PhiGridLayoutProfile, columns: PhiGridColumnCount): {
     span: number;
     offset: number;
 };
@@ -48,7 +56,7 @@ export type PhiGridSlotColumns = {
 /**
  * Where each slot stands on the 24 tracks, in flow.
  *
- * `offset` counts unused columns before a slot, the way a Grid column's offset does elsewhere, so a
+ * `offset` counts unused tracks before a slot, the way a Grid column's offset does elsewhere, so a
  * slot with none starts where the previous one ended and a row holds as many slots as fit. Written as
  * an absolute line (`offset + 1`) instead, every slot without an offset started on column 1 -- and a
  * definite start on column 1 for every item is a new row for every item, so three cards spanning six
@@ -56,7 +64,7 @@ export type PhiGridSlotColumns = {
  * the ones before it; the grid then places rows for itself, and it agrees with this cursor: an item whose
  * start line is left of the previous item's goes to the next row, exactly where the cursor wrapped.
  */
-export declare function resolvePhiGridSlotColumns(slotPlacements: PhiGridLayoutSlotPlacement[] | undefined, slotIndices: readonly number[], profile: "compact" | "medium" | "wide", fallbackSpan: number, columns?: number): Map<number, PhiGridSlotColumns>;
+export declare function resolvePhiGridSlotColumns(slotPlacements: PhiGridLayoutSlotPlacement[] | undefined, slotIndices: readonly number[], profile: PhiGridLayoutProfile, columns: PhiGridColumnCount): Map<number, PhiGridSlotColumns>;
 export type PhiGridLayoutProfile = keyof PhiResolvedResponsiveValue<number>;
 export declare const PHI_GRID_LAYOUT_PROFILES: readonly PhiGridLayoutProfile[];
 /**
@@ -82,7 +90,7 @@ export declare const PHI_GRID_RESPONSIVE_MIN_WIDTH: {
  * one. All three answers are known without measuring anything, so all three go into the markup and a
  * container query picks one (`styles/layout.css`), the way the Form grid does.
  */
-export declare function resolvePhiGridSlotProfileColumns(slotPlacements: PhiGridLayoutSlotPlacement[] | undefined, slotIndices: readonly number[]): Map<number, PhiResolvedResponsiveValue<PhiGridSlotColumns>>;
+export declare function resolvePhiGridSlotProfileColumns(slotPlacements: PhiGridLayoutSlotPlacement[] | undefined, slotIndices: readonly number[], columns?: PhiResolvedResponsiveValue<PhiGridColumnCount>): Map<number, PhiResolvedResponsiveValue<PhiGridSlotColumns>>;
 /**
  * How much of the column gap falls before and after a slot, in 24ths of it.
  *