@phis/ui 0.4.1 → 0.4.3

package/styles/layout.css

@@ -561,6 +561,11 @@
 /*
  * Hover effects: a card answers the pointer, and only a pointer that hovers.
  * Keyboard focus gets the same answer, so the effect never says something a keyboard reader misses.
+ *
+ * Lift raises the card and gives it the Theme's next shadow up. The resting shadow is the Surface's,
+ * written on the card itself, so the raised one has to be `!important` to stand over it; a card whose
+ * Surface has no shadow gets one when it lifts, which is what lifting means. Two pixels and the same
+ * shadow read as nothing at all; zoom at 4 % did not read either.
  */
 :where(.phi-card--hover-lift, .phi-card--hover-zoom) {
   transition: translate 200ms ease, box-shadow 200ms ease;
@@ -573,25 +578,29 @@
 
 @media (hover: hover) {
   :where(.phi-card--hover-lift):hover {
-    translate: 0 -2px;
+    translate: 0 -4px;
+    box-shadow: var(--ant-box-shadow-secondary) !important;
   }
 
   :where(.phi-card--hover-zoom):hover :where(.phi-card__ground, .phi-card__media img) {
-    scale: 1.04;
+    scale: 1.08;
   }
 }
 
 :where(.phi-card--hover-lift):focus-within {
-  translate: 0 -2px;
+  translate: 0 -4px;
+  box-shadow: var(--ant-box-shadow-secondary) !important;
 }
 
 :where(.phi-card--hover-zoom):focus-within :where(.phi-card__ground, .phi-card__media img) {
-  scale: 1.04;
+  scale: 1.08;
 }
 
 /*
  * The icon paints the colours the card hands it as custom properties, so that the `icon` effect can turn
- * them round: the colour becomes the ground and the ground the colour. A change of colour, not a
+ * them round: the colour becomes the ground, and the mark takes `--phi-card-icon-hover-color` -- the
+ * stated ground where one was stated, the container's otherwise. Not simply the ground: the Theme's
+ * ground for a mark is a fill a few percent opaque, and a mark painted in it vanished. A change of colour, not a
  * movement, so it is not taken back for a reader who asked for less motion -- only its easing is.
  */
 :where(.phi-card__icon) {
@@ -605,13 +614,13 @@
 
 @media (hover: hover) {
   :where(.phi-card--hover-icon):hover :where(.phi-card__icon) {
-    color: var(--phi-card-icon-background);
+    color: var(--phi-card-icon-hover-color);
     background: var(--phi-card-icon-color);
   }
 }
 
 :where(.phi-card--hover-icon):focus-within :where(.phi-card__icon) {
-  color: var(--phi-card-icon-background);
+  color: var(--phi-card-icon-hover-color);
   background: var(--phi-card-icon-color);
 }
 

package/types/cms-config.js

@@ -4,42 +4,28 @@ import { readPhiCmsMountPolicy } from "./cms-mount-policy";
 import { clampPhiSequenceTransitionMs, readPhiMotionEasing, PHI_SEQUENCE_ANCHORS, PHI_SEQUENCE_TRANSITIONS, } from "../helpers/motion";
 import { readPhiLengthValue } from "./length";
 import { isPhiAnchorWidgetPlacement, resolvePhiRenderableBlockAnchor, } from "../components/controls/phi-anchor-control-contract";
-import { readBoolean, readCssSize, readNumber, readRenderableBlockConfig, readString, } from "../components/widgets/config/parser-primitives";
+import { readCssSize, readRenderableBlockConfig, } from "../components/widgets/config/parser-primitives";
 import { applyPhiLayoutDefaults } from "../helpers/cms-layout-defaults";
 import { resolvePhiLayoutDefaults } from "../helpers/cms-layout-defaults";
 import { normalizeRenderableBlockAnchor } from "../helpers/renderable-block-anchor";
 import { isPhiRecord } from "../helpers/is-record";
+import { createPhiConfigReader } from "../components/widgets/config/strict-config-reader";
 import { PHI_SPACING_SCALE_KEYS } from "../components/widgets/config/spacing-options";
 import { PHI_GRID_COLUMN_COUNTS, isPhiGridColumnCount } from "../constants/grid-columns";
-function readInitialSlotStates(value) {
-    if (Array.isArray(value)) {
-        const normalized = value.map((candidate) => candidate === "expanded" || candidate === "collapsed" || candidate === "hidden" ? candidate : undefined);
-        return normalized.some((candidate) => candidate !== undefined) ? normalized : undefined;
-    }
-    if (!value || typeof value !== "object") {
-        return undefined;
-    }
-    const raw = value;
-    const next = {};
-    for (const [key, candidate] of Object.entries(raw)) {
-        const slotIndex = Number(key);
-        if (!Number.isInteger(slotIndex) || slotIndex < 0) {
-            continue;
-        }
-        if (candidate === "expanded" || candidate === "collapsed" || candidate === "hidden") {
-            next[slotIndex] = candidate;
+const PHI_LAYOUT_SLOT_STATES = ["expanded", "collapsed", "hidden"];
+/** A Layout's starting slot states: a list by slot, gaps allowed, or a record keyed by slot index. */
+function readInitialSlotStates(reader) {
+    return reader.value("initialSlotStates", "slot states by slot index", (value) => {
+        const isState = (candidate) => candidate == null || PHI_LAYOUT_SLOT_STATES.includes(candidate);
+        if (Array.isArray(value)) {
+            return value.every(isState) ? value : undefined;
         }
-    }
-    return Object.keys(next).length > 0 ? next : undefined;
-}
-function readStringArray(value) {
-    if (!Array.isArray(value)) {
-        return undefined;
-    }
-    const next = value
-        .map((candidate) => (typeof candidate === "string" ? candidate.trim() : ""))
-        .filter((candidate) => candidate.length > 0);
-    return [...new Set(next)];
+        if (!isPhiRecord(value))
+            return undefined;
+        return Object.entries(value).every(([key, candidate]) => Number.isInteger(Number(key)) && Number(key) >= 0 && isState(candidate))
+            ? value
+            : undefined;
+    });
 }
 export function normalizePhiPaddingWidgetConfig(config) {
     if (!isPhiRecord(config)) {
@@ -153,18 +139,14 @@ function readRenderableBlockAnchorOrPlacement(value) {
         ? resolvePhiRenderableBlockAnchor(value)
         : undefined;
 }
-function readGridResponsiveCount(value, accepts) {
-    if (!isPhiRecord(value))
-        return undefined;
-    const record = value;
-    const read = (key) => {
-        const candidate = readNumber(record[key]);
-        return candidate != null && Number.isInteger(candidate) && accepts(candidate) ? candidate : undefined;
-    };
-    const responsive = { compact: read("compact"), medium: read("medium"), wide: read("wide") };
-    return responsive.compact != null || responsive.medium != null || responsive.wide != null
-        ? responsive
-        : undefined;
+function readLayoutAnchor(reader) {
+    return reader.value("anchor", "an anchor or a placement", readRenderableBlockAnchorOrPlacement);
+}
+function readGridResponsiveCount(reader, key, expected, accepts) {
+    return reader.object(key, (countReader) => {
+        const read = (width) => countReader.value(width, expected, (candidate) => typeof candidate === "number" && Number.isInteger(candidate) && accepts(candidate) ? candidate : undefined);
+        return { compact: read("compact"), medium: read("medium"), wide: read("wide") };
+    });
 }
 const PHI_GRID_MAX_COLUMNS = Math.max(...PHI_GRID_COLUMN_COUNTS);
 /*
@@ -172,32 +154,43 @@ const PHI_GRID_MAX_COLUMNS = Math.max(...PHI_GRID_COLUMN_COUNTS);
  * they fit the row at a given width is answered where the row is known, by clamping
  * (`resolvePhiGridSlotPlacement`): a Grid whose columns were reduced keeps its stated placements.
  */
-function readGridSlotPlacement(value, slotIndexFromArray) {
-    if (!isPhiRecord(value)) {
-        return null;
-    }
-    const slot = value;
-    const slotIndex = readNumber(slot.slotIndex) ?? slotIndexFromArray;
-    if (!Number.isInteger(slotIndex) || slotIndex == null || slotIndex < 0) {
-        return null;
-    }
-    const span = readGridResponsiveCount(slot.span, (candidate) => candidate >= 1 && candidate <= PHI_GRID_MAX_COLUMNS);
-    const offset = readGridResponsiveCount(slot.offset, (candidate) => candidate >= 0 && candidate < PHI_GRID_MAX_COLUMNS);
+function readGridSlotPlacement(reader, slotIndexFromArray) {
+    const slotIndex = reader.value("slotIndex", "a slot index", (candidate) => typeof candidate === "number" && Number.isInteger(candidate) && candidate >= 0 ? candidate : undefined) ?? slotIndexFromArray;
+    const span = readGridResponsiveCount(reader, "span", `a whole number from 1 to ${PHI_GRID_MAX_COLUMNS}`, (candidate) => candidate >= 1 && candidate <= PHI_GRID_MAX_COLUMNS);
+    const offset = readGridResponsiveCount(reader, "offset", `a whole number from 0 to ${PHI_GRID_MAX_COLUMNS - 1}`, (candidate) => candidate >= 0 && candidate < PHI_GRID_MAX_COLUMNS);
     if (!span && !offset)
-        return null;
+        reader.fail("span", "a span or an offset", undefined);
     return { slotIndex, span, offset };
 }
 /**
- * A shared Layout field, read the same way wherever it appears: a line on the 24-track form grid, so
- * anything outside 2..24 is not a narrower column but a mistake, and is dropped rather than clamped.
+ * The fields many Layouts share, read the same way wherever they appear. A label end is a line on the
+ * 24-track form grid, so anything outside 2..24 is not a narrower column but a mistake.
  */
-function readPhiLayoutLabelEnd(value) {
-    const labelEnd = readNumber(value);
-    return labelEnd !== undefined && Number.isInteger(labelEnd) && labelEnd >= 2 && labelEnd <= 24
-        ? labelEnd
-        : undefined;
+function readCssSizeField(reader, key) {
+    return reader.value(key, "a CSS size", (value) => (typeof value === "number" && Number.isFinite(value)) || typeof value === "string" ? value : undefined);
+}
+function readLengthField(reader, key) {
+    return reader.value(key, "a CSS length", (value) => readPhiLengthValue(value) ?? undefined);
+}
+function readLayoutLabelEnd(reader) {
+    return reader.value("labelEnd", "a whole number from 2 to 24", (value) => typeof value === "number" && Number.isInteger(value) && value >= 2 && value <= 24 ? value : undefined);
+}
+function readLayoutPadding(reader) {
+    return {
+        padding: readCssSizeField(reader, "padding"),
+        paddingLeft: readCssSizeField(reader, "paddingLeft"),
+        paddingRight: readCssSizeField(reader, "paddingRight"),
+        paddingTop: readCssSizeField(reader, "paddingTop"),
+        paddingBottom: readCssSizeField(reader, "paddingBottom"),
+    };
+}
+function readFlexWrap(reader) {
+    return reader.value("wrap", "true, false or a flex wrap", (value) => typeof value === "boolean" || value === "nowrap" || value === "wrap" || value === "wrap-reverse"
+        ? value
+        : undefined) ?? false;
 }
 export function parsePhiCmsContentLayoutConfig(config) {
+    const reader = createPhiConfigReader(config);
     return applyPhiLayoutDefaults({
         ...readRenderableBlockConfig(config),
         /*
@@ -207,82 +200,65 @@ export function parsePhiCmsContentLayoutConfig(config) {
          * constraints never had the second way at all -- nothing has ever read a flat `maxWidth`.
          */
         size: normalizePhiRenderableBlockResponsiveSize(config.size),
-        margin: readCssSize(config.margin),
-        labelEnd: readPhiLayoutLabelEnd(config.labelEnd),
-        padding: readCssSize(config.padding),
-        paddingLeft: readCssSize(config.paddingLeft),
-        paddingRight: readCssSize(config.paddingRight),
-        paddingTop: readCssSize(config.paddingTop),
-        paddingBottom: readCssSize(config.paddingBottom),
+        margin: readCssSizeField(reader, "margin"),
+        labelEnd: readLayoutLabelEnd(reader),
+        ...readLayoutPadding(reader),
         /*
          * Handed on as the block anchor, like every other Layout's. This one used to be folded into a
          * placement name here, and the renderer then asked the name for its `horizontal` -- a string has
          * none, so a Content Layout anchored left drew centred wherever the parsed config reached it, in
          * preview and live, while the Builder, which hands the object straight through, drew it left.
          */
-        anchor: readRenderableBlockAnchorOrPlacement(config.anchor),
+        anchor: readLayoutAnchor(reader),
     }, resolvePhiLayoutDefaults("content"));
 }
 export function parsePhiCmsFlexLayoutConfig(config) {
-    const distribution = readString(config.distribution);
+    const reader = createPhiConfigReader(config);
     return applyPhiLayoutDefaults({
         ...readRenderableBlockConfig(config),
-        labelEnd: readPhiLayoutLabelEnd(config.labelEnd),
-        initialSlotStates: readInitialSlotStates(config.initialSlotStates),
-        padding: readCssSize(config.padding),
-        paddingLeft: readCssSize(config.paddingLeft),
-        paddingRight: readCssSize(config.paddingRight),
-        paddingTop: readCssSize(config.paddingTop),
-        paddingBottom: readCssSize(config.paddingBottom),
-        gap: readCssSize(config.gap),
-        verticalSeparators: readBoolean(config.verticalSeparators) ?? false,
-        separatorBeforeFirst: readBoolean(config.separatorBeforeFirst) ?? false,
-        separatorSpan: readPhiLengthValue(config.separatorSpan) ?? undefined,
-        anchor: readRenderableBlockAnchorOrPlacement(config.anchor),
-        distribution: distribution === "between" || distribution === "around" || distribution === "evenly"
-            ? distribution
-            : "anchor",
-        wrap: readBoolean(config.wrap) ??
-            readString(config.wrap) ??
-            false,
+        labelEnd: readLayoutLabelEnd(reader),
+        initialSlotStates: readInitialSlotStates(reader),
+        ...readLayoutPadding(reader),
+        gap: readCssSizeField(reader, "gap"),
+        verticalSeparators: reader.boolean("verticalSeparators") ?? false,
+        separatorBeforeFirst: reader.boolean("separatorBeforeFirst") ?? false,
+        separatorSpan: readLengthField(reader, "separatorSpan"),
+        anchor: readLayoutAnchor(reader),
+        distribution: reader.oneOf("distribution", ["anchor", "between", "around", "evenly"]) ?? "anchor",
+        wrap: readFlexWrap(reader),
     }, resolvePhiLayoutDefaults("flex"));
 }
 export function parsePhiCmsFlexVerticalLayoutConfig(config) {
+    const reader = createPhiConfigReader(config);
     return applyPhiLayoutDefaults({
         ...readRenderableBlockConfig(config),
-        labelEnd: readPhiLayoutLabelEnd(config.labelEnd),
-        initialSlotStates: readInitialSlotStates(config.initialSlotStates),
-        padding: readCssSize(config.padding),
-        paddingLeft: readCssSize(config.paddingLeft),
-        paddingRight: readCssSize(config.paddingRight),
-        paddingTop: readCssSize(config.paddingTop),
-        paddingBottom: readCssSize(config.paddingBottom),
-        gap: readCssSize(config.gap),
-        anchor: readRenderableBlockAnchorOrPlacement(config.anchor),
+        labelEnd: readLayoutLabelEnd(reader),
+        initialSlotStates: readInitialSlotStates(reader),
+        ...readLayoutPadding(reader),
+        gap: readCssSizeField(reader, "gap"),
+        anchor: readLayoutAnchor(reader),
     }, resolvePhiLayoutDefaults("verticalflex"));
 }
 export function parsePhiCmsMasonryLayoutConfig(config) {
+    const reader = createPhiConfigReader(config);
     return applyPhiLayoutDefaults({
         ...readRenderableBlockConfig(config),
-        labelEnd: readPhiLayoutLabelEnd(config.labelEnd),
-        padding: readCssSize(config.padding),
-        paddingLeft: readCssSize(config.paddingLeft),
-        paddingRight: readCssSize(config.paddingRight),
-        paddingTop: readCssSize(config.paddingTop),
-        paddingBottom: readCssSize(config.paddingBottom),
-        columns: readGridResponsiveCount(config.columns, isPhiGridColumnCount),
-        gap: readCssSize(config.gap),
+        labelEnd: readLayoutLabelEnd(reader),
+        ...readLayoutPadding(reader),
+        columns: readGridResponsiveCount(reader, "columns", "a Grid column count", isPhiGridColumnCount),
+        gap: readCssSizeField(reader, "gap"),
     }, resolvePhiLayoutDefaults("masonry"));
 }
 export function parsePhiCmsStackLayoutConfig(config) {
+    const reader = createPhiConfigReader(config);
     return applyPhiLayoutDefaults({
         ...readRenderableBlockConfig(config),
-        labelEnd: readPhiLayoutLabelEnd(config.labelEnd),
-        padding: readCssSize(config.padding),
-        defaultActiveSlotKey: readString(config.defaultActiveSlotKey),
-        slotDisplay: config.slotDisplay === "stacked" ? "stacked" : "single",
+        labelEnd: readLayoutLabelEnd(reader),
+        padding: readCssSizeField(reader, "padding"),
+        defaultActiveSlotKey: reader.string("defaultActiveSlotKey"),
+        slotDisplay: reader.oneOf("slotDisplay", ["single", "stacked"]) ?? "single",
         mountPolicy: readPhiCmsMountPolicy(config.mountPolicy, "remount"),
-        slotTransition: config.slotTransition === "fade-over" ? "fade-over" : "none",
+        slotTransition: reader.oneOf("slotTransition", ["none", "fade-over"]) ?? "none",
         // Absent means "whatever the theme does", which is why the fallback is read from the token
         // rather than written here as a number.
         ...(config.slotTransitionDurationMs === undefined ? {} : {
@@ -338,9 +314,9 @@ export function parsePhiCmsCarouselLayoutConfig(config) {
     const slotGap = readCarouselMember(config.slotGap, PHI_SPACING_SCALE_KEYS, "slotGap");
     return applyPhiLayoutDefaults({
         ...readRenderableBlockConfig(config),
-        labelEnd: readPhiLayoutLabelEnd(config.labelEnd),
-        padding: readCssSize(config.padding),
-        defaultActiveSlotKey: readString(config.defaultActiveSlotKey),
+        labelEnd: readLayoutLabelEnd(createPhiConfigReader(config)),
+        padding: readCssSizeField(createPhiConfigReader(config), "padding"),
+        defaultActiveSlotKey: createPhiConfigReader(config).string("defaultActiveSlotKey"),
         ...(visibleSlots === undefined ? {} : { visibleSlots }),
         ...(windowAnchor === undefined ? {} : { windowAnchor }),
         ...(transition === undefined ? {} : { transition }),
@@ -361,100 +337,81 @@ export function parsePhiCmsCarouselLayoutConfig(config) {
         ...(lookahead === undefined ? {} : { lookahead }),
     }, resolvePhiLayoutDefaults("carousel"));
 }
-function readCollapsibleTrigger(value) {
-    return value === "header" || value === "icon" || value === "disabled" ? value : undefined;
-}
-function readCollapsibleSize(value) {
-    return readPhiControlSize(value);
-}
-function readExpandIconPlacement(value) {
-    return value === "start" || value === "end" ? value : undefined;
-}
-function readSlotTexts(value) {
-    if (!Array.isArray(value)) {
+/** Panel titles or descriptions by slot: texts, an empty one for a slot that has none; trailing empties trimmed. */
+function readSlotTexts(reader, key) {
+    const texts = reader.value(key, "a list of texts", (value) => Array.isArray(value) && value.every((candidate) => typeof candidate === "string")
+        ? value.map((candidate) => candidate.trim())
+        : undefined);
+    if (!texts)
         return undefined;
-    }
-    const texts = value.map((candidate) => (typeof candidate === "string" ? candidate.trim() : ""));
-    while (texts.length > 0 && !texts[texts.length - 1]) {
+    while (texts.length > 0 && !texts[texts.length - 1])
         texts.pop();
-    }
     return texts.length > 0 ? texts : undefined;
 }
 export function parsePhiCmsCollapsibleLayoutConfig(config) {
+    const reader = createPhiConfigReader(config);
+    const defaultOpenSlotKeys = reader.stringList("defaultOpenSlotKeys");
     return applyPhiLayoutDefaults({
         ...readRenderableBlockConfig(config),
-        labelEnd: readPhiLayoutLabelEnd(config.labelEnd),
-        initialSlotStates: readInitialSlotStates(config.initialSlotStates),
-        padding: readCssSize(config.padding),
-        paddingLeft: readCssSize(config.paddingLeft),
-        paddingRight: readCssSize(config.paddingRight),
-        paddingTop: readCssSize(config.paddingTop),
-        paddingBottom: readCssSize(config.paddingBottom),
-        anchor: readRenderableBlockAnchorOrPlacement(config.anchor),
-        panelMinHeight: readPhiLengthValue(config.panelMinHeight) ?? undefined,
-        accordion: readBoolean(config.accordion),
-        slotTitles: readSlotTexts(config.slotTitles),
-        slotDescriptions: readSlotTexts(config.slotDescriptions),
-        defaultOpenSlotKeys: readStringArray(config.defaultOpenSlotKeys),
-        collapsible: readCollapsibleTrigger(config.collapsible),
-        ghost: readBoolean(config.ghost),
-        expandIconPlacement: readExpandIconPlacement(config.expandIconPlacement),
-        collapseSize: readCollapsibleSize(config.collapseSize),
-        titleStrong: readBoolean(config.titleStrong),
-        headerPadding: readCssSize(config.headerPadding),
-        innerPadding: readCssSize(config.innerPadding),
+        labelEnd: readLayoutLabelEnd(reader),
+        initialSlotStates: readInitialSlotStates(reader),
+        ...readLayoutPadding(reader),
+        anchor: readLayoutAnchor(reader),
+        panelMinHeight: readLengthField(reader, "panelMinHeight"),
+        accordion: reader.boolean("accordion"),
+        slotTitles: readSlotTexts(reader, "slotTitles"),
+        slotDescriptions: readSlotTexts(reader, "slotDescriptions"),
+        defaultOpenSlotKeys: defaultOpenSlotKeys
+            ? [...new Set(defaultOpenSlotKeys.map((key) => key.trim()).filter(Boolean))]
+            : undefined,
+        collapsible: reader.oneOf("collapsible", ["header", "icon", "disabled"]),
+        ghost: reader.boolean("ghost"),
+        expandIconPlacement: reader.oneOf("expandIconPlacement", ["start", "end"]),
+        collapseSize: reader.value("collapseSize", "a control size", readPhiControlSize),
+        titleStrong: reader.boolean("titleStrong"),
+        headerPadding: readCssSizeField(reader, "headerPadding"),
+        innerPadding: readCssSizeField(reader, "innerPadding"),
     }, resolvePhiLayoutDefaults("collapsible"));
 }
 export function parsePhiCmsGridLayoutConfig(config) {
+    const reader = createPhiConfigReader(config);
     return applyPhiLayoutDefaults({
         ...readRenderableBlockConfig(config),
-        labelEnd: readPhiLayoutLabelEnd(config.labelEnd),
-        padding: readCssSize(config.padding),
-        paddingLeft: readCssSize(config.paddingLeft),
-        paddingRight: readCssSize(config.paddingRight),
-        paddingTop: readCssSize(config.paddingTop),
-        paddingBottom: readCssSize(config.paddingBottom),
-        gap: readCssSize(config.gap),
-        anchor: readRenderableBlockAnchorOrPlacement(config.anchor),
-        columns: readGridResponsiveCount(config.columns, isPhiGridColumnCount),
-        slotPlacements: Array.isArray(config.slotPlacements)
-            ? config.slotPlacements
-                .map((slot, slotIndex) => readGridSlotPlacement(slot, slotIndex))
-                .filter((slot) => slot !== null)
-            : undefined,
+        labelEnd: readLayoutLabelEnd(reader),
+        ...readLayoutPadding(reader),
+        gap: readCssSizeField(reader, "gap"),
+        anchor: readLayoutAnchor(reader),
+        columns: readGridResponsiveCount(reader, "columns", "a Grid column count", isPhiGridColumnCount),
+        slotPlacements: reader.list("slotPlacements", readGridSlotPlacement),
     }, resolvePhiLayoutDefaults("grid"));
 }
 export function parsePhiCmsThreeColumnLayoutConfig(config) {
+    const reader = createPhiConfigReader(config);
     return applyPhiLayoutDefaults({
         ...readRenderableBlockConfig(config),
-        labelEnd: readPhiLayoutLabelEnd(config.labelEnd),
-        padding: readCssSize(config.padding),
-        paddingLeft: readCssSize(config.paddingLeft),
-        paddingRight: readCssSize(config.paddingRight),
-        paddingTop: readCssSize(config.paddingTop),
-        paddingBottom: readCssSize(config.paddingBottom),
-        balancedSides: readBoolean(config.balancedSides) ?? true,
-        gap: readCssSize(config.gap),
-        anchor: readRenderableBlockAnchorOrPlacement(config.anchor),
-        align: readString(config.align),
-        justify: readString(config.justify),
-        wrap: readBoolean(config.wrap) ??
-            readString(config.wrap) ??
-            false,
-        leftWidth: readPhiLengthValue(config.leftWidth) ?? undefined,
-        middleWidth: readPhiLengthValue(config.middleWidth) ?? undefined,
-        rightWidth: readPhiLengthValue(config.rightWidth) ?? undefined,
-        contentAlign: readString(config.contentAlign),
+        labelEnd: readLayoutLabelEnd(reader),
+        ...readLayoutPadding(reader),
+        balancedSides: reader.boolean("balancedSides") ?? true,
+        gap: readCssSizeField(reader, "gap"),
+        anchor: readLayoutAnchor(reader),
+        align: reader.string("align"),
+        justify: reader.string("justify"),
+        wrap: readFlexWrap(reader),
+        leftWidth: readLengthField(reader, "leftWidth"),
+        middleWidth: readLengthField(reader, "middleWidth"),
+        rightWidth: readLengthField(reader, "rightWidth"),
+        contentAlign: reader.string("contentAlign"),
     }, resolvePhiLayoutDefaults("threecol"));
 }
 export function parsePhiCmsSplitCardLayoutConfig(config) {
+    const reader = createPhiConfigReader(config);
     return applyPhiLayoutDefaults({
         ...readRenderableBlockConfig(config),
-        labelEnd: readPhiLayoutLabelEnd(config.labelEnd),
-        gap: readCssSize(config.gap),
-        swapRatio: readBoolean(config.swapRatio),
-        padding: readCssSize(config.padding),
-        paddingTop: readCssSize(config.paddingTop),
-        paddingBottom: readCssSize(config.paddingBottom),
+        labelEnd: readLayoutLabelEnd(reader),
+        gap: readCssSizeField(reader, "gap"),
+        swapRatio: reader.boolean("swapRatio"),
+        padding: readCssSizeField(reader, "padding"),
+        paddingTop: readCssSizeField(reader, "paddingTop"),
+        paddingBottom: readCssSizeField(reader, "paddingBottom"),
     }, resolvePhiLayoutDefaults("split"));
 }

package/types/cms-plugins.d.ts

@@ -101,7 +101,6 @@ export type PhiCmsConfigFieldChoiceMode = "single" | "multiple";
 export type PhiCmsConfigFieldChoiceValueType = "string" | "string[]" | "number";
 export type PhiCmsConfigFieldChoiceCreateBehavior = "none" | "accept-custom" | "create-record";
 export type PhiCmsConfigFieldColorMode = "single" | "gradient" | "both";
-export type PhiCmsConfigFieldValueStorage = "field" | "self";
 export type PhiCmsConfigFieldChoiceFilter = {
     widgetType?: string;
     group?: string;
@@ -290,14 +289,6 @@ export type PhiCmsConfigField = (PhiCmsConfigFieldBase & {
     presentation?: PhiCmsConfigFieldCollectionPresentation;
     /** What the button that opens the Overlay says. */
     editLabel?: string;
-}) | (PhiCmsConfigFieldBase & {
-    type: "background";
-    section?: string;
-    storage?: PhiCmsConfigFieldValueStorage;
-}) | (PhiCmsConfigFieldBase & {
-    type: "border";
-    section?: string;
-    storage?: PhiCmsConfigFieldValueStorage;
 }) | (PhiCmsConfigFieldBase & {
     /**
      * A Surface (`types/surface.ts`) of something the Widget draws inside itself -- each entry of a
@@ -308,7 +299,7 @@ export type PhiCmsConfigField = (PhiCmsConfigFieldBase & {
     /** Whether the mode is offered; left out, it is. */
     tone?: false;
 }) | (PhiCmsConfigFieldBase & {
-    type: "shadow" | "grid-placement" | "column-count";
+    type: "grid-placement" | "column-count";
     section?: string;
 });
 export type PhiCmsLayoutSlotDefinition = {
@@ -575,7 +566,9 @@ export type PhiCmsRuntimeRenderRegistry = {
     dataProviderDescriptorsByKey: ReadonlyMap<PhiRuntimeDataProviderKey, PhiRuntimeModuleDataProviderDescriptor>;
     formDefinitionsById: ReadonlyMap<string, PhiRuntimeModuleFormDefinition>;
 };
-export type PhiCmsRenderIssueCode = "missing-module" | "missing-renderer" | "renderer-load-failed" | "render-failed" | "invalid-render-output"
+export type PhiCmsRenderIssueCode = "missing-module" | "missing-renderer" | "renderer-load-failed" | "render-failed"
+/** The stored config holds a value the block cannot read (`PhiConfigError`); the detail names the field. */
+ | "invalid-config" | "invalid-render-output"
 /** A node whose `visibleWhen` reads a feature namespace whose Module could not be asked this render. */
  | "feature-unavailable"
 /** A Region or Overlay zone names a root layout node the tree does not contain. */

package/types/core-widget-placements.d.ts

@@ -18,7 +18,7 @@ import type { PhiTextTone } from "../components/widgets/config/text-tone";
 import type { PhiCommonControlActionKey } from "../components/widgets/label-types/common-controls";
 import type { PhiMaskConfig } from "../components/widgets/config/mask";
 import type { PhiSpacingScaleKey } from "../components/widgets/config/spacing-options";
-import type { PhiCardVariant } from "../components/widgets/shared/card-vocabulary";
+import type { PhiCardBillingPeriod, PhiCardVariant } from "../components/widgets/shared/card-vocabulary";
 import type { PhiControlBadgeConfig, PhiControlConfig } from "../components/widgets/config/control-signal-config";
 /**
  * The part of a placement every Widget shares, whatever it is.
@@ -42,6 +42,8 @@ export type PhiWidgetPlacementSignalRoutes = {
 type PhiControlPlacement = Omit<PhiControlConfig, "signalRoutes">;
 /** Logical, not left and right: a Site in an RTL locale reads "start" as the right-hand edge. */
 export type PhiMarkdownTextAlign = "start" | "center" | "end" | "justify";
+/** Which edge the text's pictures stand at, with the words flowing past them; logical like the align. */
+export type PhiMarkdownImageFloat = "start" | "end";
 export type PhiMarkdownWidgetPlacement = PhiWidgetPlacementBase & {
     sourceMode?: "inline" | "url";
     markdown?: string;
@@ -49,6 +51,7 @@ export type PhiMarkdownWidgetPlacement = PhiWidgetPlacementBase & {
     sourceLocale?: string;
     revalidateSeconds?: number;
     textAlign?: PhiMarkdownTextAlign;
+    imageFloat?: PhiMarkdownImageFloat;
     textBlockSpacingBefore?: PhiSpacingScaleKey;
     textBlockSpacingAfter?: PhiSpacingScaleKey;
     headingBlockSpacingBefore?: PhiSpacingScaleKey;
@@ -282,10 +285,21 @@ export type PhiCmsCollectionCardPresentation = {
     actionLabel?: string;
     actionHref?: string;
     variant?: PhiCardVariant;
-    /** Every card in the View draws this body; `stat` needs `value`. */
-    body?: "text" | "stat";
+    /** Every card in the View draws this body; `stat` needs `value`, `plan` a `price`. */
+    body?: "text" | "stat" | "plan";
     /** A field whose truth marks the card as highlighted. */
     highlight?: string;
+    /** The words on the card's band. */
+    badge?: string;
+    /** A `plan`'s prices and their periods, as a provider answers them -- per country, if it knows one. */
+    price?: string;
+    pricePeriod?: string;
+    priceYearly?: string;
+    pricePeriodYearly?: string;
+    /** A field holding the plan's features, each `{ text, state? }` (`PhiBulletListEntry`). */
+    features?: string;
+    /** Which price every plan card of the View shows. Not a path: the View's own choice. */
+    billingPeriod?: PhiCardBillingPeriod;
 };
 export type PhiCollectionViewWidgetPlacement = PhiWidgetPlacementBase & {
     presentation?: {

package/types/dashboard-cards.d.ts

@@ -1,3 +1,4 @@
+import type { PhiRuntimeModuleCatalog } from "./cms-plugins";
 import type { PhiCmsAreaKey } from "../constants/cms-areas";
 import type { PhiTimelineEntry } from "@phis/contracts/timeline";
 import type { PhiAccessViewer, PhiViewerAccessPolicy } from "./access";
@@ -133,6 +134,14 @@ export type PhiDashboardCardContext = {
     locale: string;
     area: PhiCmsAreaKey;
     viewer: PhiAccessViewer;
+    /**
+     * The Module catalog of the Area the Dashboard stands in.
+     *
+     * A card about structure -- which Area has an open draft -- has to know the Area shells, and the
+     * only catalog it may know is the one it is running in. Importing the first-party catalog instead
+     * would compile every Module into the provider (MODULES.md, "The dependency rule").
+     */
+    runtimeModuleCatalog: PhiRuntimeModuleCatalog;
 };
 /**
  * One Module's answer, loaded on the server and never reached from the browser.

package/types/media.d.ts

@@ -69,7 +69,6 @@ export type PhiMediaAssetVariant = {
     deliveryUrl: string;
     contentType: string;
     bytes: number | null;
-    checksumSha256: string | null;
     width: number;
     height: number;
     blurDataUrl: string | null;
@@ -90,7 +89,6 @@ export type PhiMediaAsset = {
     contentType: string;
     kind: PhiMediaKindValue;
     bytes: number | null;
-    checksumSha256: string | null;
     width: number | null;
     height: number | null;
     blurDataUrl: string | null;
@@ -127,7 +125,6 @@ export type PhiMediaAssetTile = {
     width: number | null;
     height: number | null;
     bytes: number | null;
-    checksumSha256: string | null;
     lifecycleStatus: number;
     deliveryPolicy: number;
     deliveryRevision: number;