@phis/ui 0.4.2 → 0.4.4

package/theme/phi-theme-tokens.js

@@ -138,6 +138,7 @@ export const PHI_THEME_TOKEN_KEYS = [
     "fontSizeHeading5",
     "fontWeightStrong",
     "lineHeight",
+    "lineHeightSM",
     "lineHeightLG",
     "lineHeightHeading1",
     "lineHeightHeading2",

package/theme/phi-theme.d.ts

@@ -16,6 +16,11 @@ export type PhiComponentTokenOptions = {
         overrides?: Record<string, unknown>;
     };
     menu?: Record<string, unknown>;
+    /** The Theme's small size (`fontSizeSM`), for the parts that take it; absent, the scale's `sm`. */
+    fontSizeSM?: number;
+    /** The Theme's body size and line height (`fontSize`, `lineHeight`); absent, the scale's `base`. */
+    fontSize?: number;
+    lineHeight?: number;
     overrides?: Record<string, Record<string, unknown>>;
 };
 export type PhiThemeTokens = {

package/theme/phi-theme.js

@@ -65,6 +65,9 @@ export function buildPhiThemeStructuralTokens(options = {}) {
     return Object.fromEntries(Object.entries(buildPhiThemeTokens(options)).filter(([key]) => !key.startsWith("color")));
 }
 export function buildPhiComponentTokens(options = {}) {
+    const fontSizeSM = options.fontSizeSM ?? PHI_FONT_SIZES.sm;
+    const fontSize = options.fontSize ?? PHI_FONT_SIZES.base;
+    const lineHeight = options.lineHeight ?? lineHeightFor(PHI_FONT_SIZES.base);
     return {
         Layout: {
             headerHeight: PHI_LAYOUT.headerHeight,
@@ -81,6 +84,24 @@ export function buildPhiComponentTokens(options = {}) {
             itemMarginInline: PHI_SPACE.sm,
             ...options.menu,
         },
+        /*
+         * The parts that take the scale's small size rather than the body's. A table is read across, not down:
+         * its cells are small, as a plain table's are (controls.css). A compact control -- `size="small"` --
+         * is small in its words as well as its height; Ant Design gives it the body size unless told.
+         */
+        Table: { cellFontSize: fontSizeSM, cellFontSizeMD: fontSizeSM, cellFontSizeSM: fontSizeSM },
+        // A Tree lists rows like a Table and writes like one: its titles, and the switcher's icon with them.
+        Tree: { fontSize: fontSizeSM },
+        // A contents list beside a text is a list like a Tree's, and writes as small.
+        Anchor: { fontSize: fontSizeSM },
+        // A Divider's words label a section; Ant Design sets them at `lg`, which the scale made a heading's size.
+        Divider: { fontSizeLG: fontSize },
+        Input: { inputFontSizeSM: fontSizeSM },
+        InputNumber: { inputFontSizeSM: fontSizeSM },
+        DatePicker: { inputFontSizeSM: fontSizeSM },
+        Button: { contentFontSizeSM: fontSizeSM },
+        // An Overlay's title is a label over its body, in the body's size; Ant Design gives a Modal the h5's.
+        Modal: { titleFontSize: fontSize, titleLineHeight: lineHeight },
         ...options.overrides,
     };
 }

package/theme/phi-tokens.d.ts

@@ -19,28 +19,29 @@ export declare const PHI_PADDING: {
 /**
  * The type scale: one list for every size a Phi surface states.
  *
- * Two halves. Up to `lg` it climbs in steps of 2 px, because an interface needs its small sizes close
- * together -- a caption, a tag, a label, the text beside them. From `xl` it is the spacing sequence, where
- * the steps are meant to be far apart. Every size is set rather than left to Ant Design's curve, which
- * lands between the steps.
+ * A ladder of phi from the body size 16 -- the browser's own, and what reading text on the web is set in.
+ * `sm`, `lg`, `xxl` and `display` are the Fibonacci sizes around it (13, 21, 34, 55), `xl` is 16 x phi (26),
+ * between 21 and 34 where their geometric mean falls, and `xs` keeps the 9 a counter or a superscript needs.
+ * Every size is set rather than left to Ant Design's curve, which lands between the steps.
  *
  * `sm` to `xl` are handed to Ant Design as its tokens; `xs`, `xxl` and `display` have none and are read
- * from here, fixed until v1. The headings take their sizes from the same list: `h4` and `h5` are both the
- * body size and differ by weight and colour alone. `display` is no heading level but a size, for a hero's
- * or a landing's title, and is not offered beside the others.
+ * from here, fixed until v1. The headings take their sizes from the same list: `h1` the page's title at
+ * `xxl`, about twice the body, then `xl`, `lg`, and `h4` and `h5` at the body and `sm` sizes, set apart by
+ * weight and colour. `display` is no heading level but a size, for a hero's or a landing's title, and is
+ * not offered beside the others.
  */
 export declare const PHI_FONT_SIZES: {
     readonly xs: 9;
-    readonly sm: 11;
-    readonly base: 13;
-    readonly lg: 15;
-    readonly xl: 21;
+    readonly sm: 13;
+    readonly base: 16;
+    readonly lg: 21;
+    readonly xl: 26;
     readonly xxl: 34;
     readonly display: 55;
     readonly heading1: 34;
-    readonly heading2: 21;
-    readonly heading3: 15;
-    readonly heading4: 13;
+    readonly heading2: 26;
+    readonly heading3: 21;
+    readonly heading4: 16;
     readonly heading5: 13;
 };
 export declare const PHI_RADII: {
@@ -54,7 +55,7 @@ export declare const PHI_RADII: {
     readonly xxl: 89;
 };
 export declare const PHI_CONTROL_HEIGHTS: {
-    readonly sm: 21;
+    readonly sm: 26;
     readonly md: 34;
     readonly lg: 55;
 };

package/theme/phi-tokens.js

@@ -19,28 +19,29 @@ export const PHI_PADDING = {
 /**
  * The type scale: one list for every size a Phi surface states.
  *
- * Two halves. Up to `lg` it climbs in steps of 2 px, because an interface needs its small sizes close
- * together -- a caption, a tag, a label, the text beside them. From `xl` it is the spacing sequence, where
- * the steps are meant to be far apart. Every size is set rather than left to Ant Design's curve, which
- * lands between the steps.
+ * A ladder of phi from the body size 16 -- the browser's own, and what reading text on the web is set in.
+ * `sm`, `lg`, `xxl` and `display` are the Fibonacci sizes around it (13, 21, 34, 55), `xl` is 16 x phi (26),
+ * between 21 and 34 where their geometric mean falls, and `xs` keeps the 9 a counter or a superscript needs.
+ * Every size is set rather than left to Ant Design's curve, which lands between the steps.
  *
  * `sm` to `xl` are handed to Ant Design as its tokens; `xs`, `xxl` and `display` have none and are read
- * from here, fixed until v1. The headings take their sizes from the same list: `h4` and `h5` are both the
- * body size and differ by weight and colour alone. `display` is no heading level but a size, for a hero's
- * or a landing's title, and is not offered beside the others.
+ * from here, fixed until v1. The headings take their sizes from the same list: `h1` the page's title at
+ * `xxl`, about twice the body, then `xl`, `lg`, and `h4` and `h5` at the body and `sm` sizes, set apart by
+ * weight and colour. `display` is no heading level but a size, for a hero's or a landing's title, and is
+ * not offered beside the others.
  */
 export const PHI_FONT_SIZES = {
     xs: 9,
-    sm: 11,
-    base: 13,
-    lg: 15,
-    xl: 21,
+    sm: 13,
+    base: 16,
+    lg: 21,
+    xl: 26,
     xxl: 34,
     display: 55,
     heading1: 34,
-    heading2: 21,
-    heading3: 15,
-    heading4: 13,
+    heading2: 26,
+    heading3: 21,
+    heading4: 16,
     heading5: 13,
 };
 export const PHI_RADII = {
@@ -54,7 +55,7 @@ export const PHI_RADII = {
     xxl: 89,
 };
 export const PHI_CONTROL_HEIGHTS = {
-    sm: 21,
+    sm: 26,
     md: 34,
     lg: 55,
 };

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"));
 }