@agent-ui-kit/components 0.0.3

package/dist/controls/color-picker/color.js

@@ -0,0 +1,159 @@
+// color.ts — pure OKLCH↔sRGB numerics + gamut mapping + the colorCodecOptions codec factory (LLD-C3,
+// color-picker.lld.md · ADR-0123 cl.2/cl.7 / SPEC-R3). Promoted from the adia `color-picker.class.js`
+// prior art (Björn Ottosson's OKLCH↔sRGB constants + its binary-search gamut map) — NEVER ported: no
+// app-specific generation-constraint math (maxChroma/minL/hueDriftMax/baseHue stay out of the fleet API,
+// ADR-0123 Alternatives).
+//
+// Import-free (no DOM) — unit-testable without a DOM and reusable by the `type=color` text-field leg
+// (SPEC-R3 AC5).
+export const MAX_CHROMA = 0.4;
+// ── OKLCH ↔ sRGB conversion (Björn Ottosson's constants) ────────────────────────────────────────
+function oklchToOklab(L, C, H) {
+    const hRad = (H * Math.PI) / 180;
+    return { L, a: C * Math.cos(hRad), b: C * Math.sin(hRad) };
+}
+function oklabToLinearSrgb(L, a, b) {
+    const l_ = L + 0.3963377774 * a + 0.2158037573 * b;
+    const m_ = L - 0.1055613458 * a - 0.0638541728 * b;
+    const s_ = L - 0.0894841775 * a - 1.291485548 * b;
+    const l = l_ * l_ * l_;
+    const m = m_ * m_ * m_;
+    const s = s_ * s_ * s_;
+    return [
+        4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s,
+        -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s,
+        -0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s,
+    ];
+}
+function linearToSrgb(c) {
+    return c <= 0.0031308 ? 12.92 * c : 1.055 * Math.pow(c, 1 / 2.4) - 0.055;
+}
+function srgbToLinear(c) {
+    return c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+}
+/** Convert an OKLCH triple to sRGB (0–1, clamped) — no gamut mapping applied. */
+export function oklchToRgb(L, C, H) {
+    const { a, b } = oklchToOklab(L, C, H);
+    const [lr, lg, lb] = oklabToLinearSrgb(L, a, b);
+    return [
+        Math.max(0, Math.min(1, linearToSrgb(lr))),
+        Math.max(0, Math.min(1, linearToSrgb(lg))),
+        Math.max(0, Math.min(1, linearToSrgb(lb))),
+    ];
+}
+/** Format sRGB (0–1 channels) as a `#rrggbb` hex string. */
+export function rgbToHex(r, g, b) {
+    const h = (c) => Math.round(c * 255).toString(16).padStart(2, '0');
+    return `#${h(r)}${h(g)}${h(b)}`;
+}
+/** Convert an OKLCH triple directly to a `#rrggbb` hex string (no gamut mapping — call gamutMapChroma first). */
+export function oklchToHex(L, C, H) {
+    const [r, g, b] = oklchToRgb(L, C, H);
+    return rgbToHex(r, g, b);
+}
+/** Parse a `#rgb`/`#rrggbb` hex string to an OKLCH triple. Assumes a well-formed 3/6-digit hex (validated by the caller). */
+export function hexToOklch(hex) {
+    let h = hex.replace('#', '');
+    if (h.length === 3)
+        h = h[0] + h[0] + h[1] + h[1] + h[2] + h[2];
+    const r = srgbToLinear(parseInt(h.slice(0, 2), 16) / 255);
+    const g = srgbToLinear(parseInt(h.slice(2, 4), 16) / 255);
+    const b = srgbToLinear(parseInt(h.slice(4, 6), 16) / 255);
+    const l_ = Math.cbrt(0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b);
+    const m_ = Math.cbrt(0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b);
+    const s_ = Math.cbrt(0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b);
+    const L = 0.2104542553 * l_ + 0.793617785 * m_ - 0.0040720468 * s_;
+    const a = 1.9779984951 * l_ - 2.428592205 * m_ + 0.4505937099 * s_;
+    const bv = 0.0259040371 * l_ + 0.7827717662 * m_ - 0.808675766 * s_;
+    const C = Math.sqrt(a * a + bv * bv);
+    let H = (Math.atan2(bv, a) * 180) / Math.PI;
+    if (H < 0)
+        H += 360;
+    return { L, C, H };
+}
+// ── Gamut mapping (binary-search chroma reduction, the adia mechanism) ──────────────────────────
+function isInGamut(r, g, b) {
+    const e = 0.001;
+    return r >= -e && r <= 1 + e && g >= -e && g <= 1 + e && b >= -e && b <= 1 + e;
+}
+/**
+ * Reduce chroma until the OKLCH triple falls inside the sRGB gamut (8-iteration binary search — a
+ * ~MAX_CHROMA/256 chroma resolution, imperceptible and deterministic; the adia constant, LLD §12 risk).
+ * A no-op (returns `C` unchanged) when the triple is already in-gamut.
+ */
+export function gamutMapChroma(L, C, H) {
+    const { a, b } = oklchToOklab(L, C, H);
+    const [lr, lg, lb] = oklabToLinearSrgb(L, a, b);
+    if (isInGamut(linearToSrgb(lr), linearToSrgb(lg), linearToSrgb(lb)))
+        return C;
+    let lo = 0;
+    let hi = C;
+    for (let i = 0; i < 8; i++) {
+        const mid = (lo + hi) / 2;
+        const { a: ma, b: mb } = oklchToOklab(L, mid, H);
+        const [mr, mg, mbb] = oklabToLinearSrgb(L, ma, mb);
+        if (isInGamut(linearToSrgb(mr), linearToSrgb(mg), linearToSrgb(mbb)))
+            lo = mid;
+        else
+            hi = mid;
+    }
+    return lo;
+}
+// ── Parsing helpers ──────────────────────────────────────────────────────────────────────────────
+const HEX_RE = /^#(?:[0-9a-f]{3}|[0-9a-f]{6})$/i;
+// Accepts numeric, percent, `NaN`, and `none` (CSS Color 4 "powerless") channels — the adia lenient parser.
+const OKLCH_RE = /^oklch\(\s*([\d.]+%?|NaN|none)\s+([\d.]+%?|NaN|none)\s+([\d.]+|NaN|none)\s*\)$/i;
+// CSS Color 4 percentage reference ranges for oklch(): L 100% → 1; C 100% → this fleet's MAX_CHROMA
+// (0.4, the adia convention — chroma has no fixed real-world ceiling, so the spec leaves the 100%
+// reference implementation-defined). H never takes a percentage (an angle) — OKLCH_RE's third group
+// has no `%?`, so this function is never called with isL semantics for hue.
+function parseOklchChannel(s, isL) {
+    if (s === 'none' || /^NaN$/i.test(s))
+        return 0;
+    if (s.endsWith('%'))
+        return (+s.slice(0, -1) / 100) * (isL ? 1 : MAX_CHROMA);
+    return +s;
+}
+/** Parse any accepted color syntax (`#rgb`/`#rrggbb`/`oklch(L C H)`) into an OKLCH triple, or `null` if unparseable. */
+export function parseColor(input) {
+    const trimmed = input.trim();
+    if (HEX_RE.test(trimmed))
+        return hexToOklch(trimmed);
+    const m = OKLCH_RE.exec(trimmed);
+    if (m) {
+        return {
+            L: parseOklchChannel(m[1], true),
+            C: parseOklchChannel(m[2], false),
+            H: parseOklchChannel(m[3], false),
+        };
+    }
+    return null;
+}
+/** Serialize an OKLCH triple through `format` — gamut-mapped sRGB hex for `'hex'`, authored-chroma `oklch(L C H)` for `'oklch'`. */
+export function serializeColor(oklch, format) {
+    if (format === 'oklch') {
+        return `oklch(${oklch.L.toFixed(2)} ${oklch.C.toFixed(3)} ${Math.round(oklch.H)})`;
+    }
+    const mappedC = gamutMapChroma(oklch.L, oklch.C, oklch.H);
+    return oklchToHex(oklch.L, mappedC, oklch.H);
+}
+/**
+ * The color-codec dialect factory (LLD-C3): `parse(display) → canonical | null` accepts any recognized
+ * syntax and re-serializes into the requested `format`; `format(canonical) → canonical` re-normalizes
+ * (idempotent — parses then re-serializes in the same format). Pure — no DOM (SPEC-R3 AC5); reused as
+ * plain functions by the standalone control AND wired through the `valueCodec` trait by the `type=color`
+ * text-field leg (LLD-C9).
+ */
+export function colorCodecOptions(format) {
+    return {
+        parse(display) {
+            const oklch = parseColor(display);
+            return oklch ? serializeColor(oklch, format) : null;
+        },
+        format(value) {
+            const oklch = parseColor(value);
+            return oklch ? serializeColor(oklch, format) : value;
+        },
+        errorMessage: 'Please enter a valid color.',
+    };
+}

package/dist/controls/column/column.css

@@ -0,0 +1,151 @@
+/* column.css — ui-column, the single-file component stylesheet (ADR-0003). The vertical layout primitive —
+ * `ui-row`'s sibling with the main axis flipped to the block axis. Two clearly-SECTIONED blocks:
+ *
+ *   [1] TOKEN BLOCK  — `:where(ui-column)` (specificity 0,0,0) DECLARES the `--ui-column-*` flex chain from the
+ *       shared layout grammar: the four reflected `flexProps` attributes (`align`/`justify`/`gap`/`wrap`) are
+ *       mapped 1:1 onto a CSS flex value (the literal-union → CSS-keyword repoint, ADR-0016 cl.1). `gap` reads
+ *       the density-responsive `--md-sys-space-*` ladder (ADR-0015 cl.4), NEVER a control dimension. The defaults
+ *       are the `flexProps` defaults (align=start, justify=start, gap=none, wrap=nowrap); each non-default
+ *       attribute value repoints its token.
+ *   [2] STYLES BLOCK — `@scope (ui-column)` CONSUMES the `--ui-column-*` flex tokens, plus the opt-in
+ *       `:scope[stretch]` sizing escape-hatch (`width: stretch` — a fill-available fallback cascade that
+ *       can't be tokenized). `display: flex` with `flex-direction: column` — the tag's IDENTITY (the main
+ *       axis is the block axis; not a prop, ADR-0016 cl.2). A `@container inline-size` reflow rule, GATED on
+ *       `:scope[reflow='auto']` (ADR-0096), mirrors `ui-row` (which stacks to a column under a NARROW container)
+ *       with the axis flipped: under a WIDE container a column opted into `reflow="auto"` spreads its children
+ *       into a row — the canonical "switcher". `reflow` defaults to `locked` (column.ts), so a bare `ui-column`
+ *       never matches the rule (ADR-0005: a default is never reflected as an attribute) — reflowing on the
+ *       container's width with NO breakpoint props (ADR-0016 cl.4) is now opt-in, not unconditional. The column
+ *       establishes NO query container of its own (ADR-0100 — it is intrinsically sized, so it can never
+ *       safely be one); the rule resolves against the nearest EXTERNALLY-SIZED ancestor boundary instead.
+ *       NO control height (geometry.md Container/layout class — block-size is content-driven; spacing rides
+ *       `--md-sys-space` × `[density]`, never `--md-sys-height-*`). A forced-colors block drops any tonal wash.
+ *
+ * The SURFACE (elevation/brightness → `--ui-container-bg`/`-tint`) is painted by the shared
+ * controls/_surface/container.css on `:where(…, ui-column, …)`; this sheet holds ZERO colour opinion (no raw
+ * `--md-sys-color-*` role anywhere — role-purity, ADR-0008). Standalone stylesheet — linked via the component-styles
+ * barrel (wired in s12); NEVER injected from column.ts (behaviour-only `.ts` — plan §2).
+ */
+
+/* ════════════════ [1] TOKEN BLOCK — :where(ui-column) declares --ui-column-* ════════════════ */
+
+:where(ui-column) {
+  /* The flex grammar, defaulted to the column-specific defaults (ADR-0030: align defaults to stretch — the
+     direction-appropriate cross-axis default for a column; flexProps.align default stays start for row).
+     Each maps 1:1 onto a CSS flex property consumed in the @scope block; the [attr] selectors below
+     repoint the NON-DEFAULT keywords. A default is NOT reflected as an attribute (ADR-0005), so the base
+     token carries the default value — the prop default and the CSS base token must match. */
+  --ui-column-align: stretch; /* align (cross axis = inline) → align-items: stretch (ADR-0030 flip start→stretch) */
+  --ui-column-justify: start; /* justify (main axis = block) → justify-content; box-alignment start (ADR-0039) */
+  --ui-column-gap: var(--md-sys-space-none); /* gap → the density-responsive --md-sys-space ladder (ADR-0015 cl.4) */
+  --ui-column-wrap: nowrap; /* wrap → flex-wrap (boolean presence repoints below) */
+}
+
+/* align → align-items (stretch = the new default above; start is now a non-default needing its own repoint).
+   ADR-0030: `start` gains a repoint rule; the now-redundant `stretch` rule is removed (stretch = the base).
+   `center` is NOT allowed on ui-column (Kim's directive — it dropped from column.ts's align enum): NO
+   [align='center'] repoint exists, so a stray `align="center"` attribute has no effect and the column stays
+   at its `stretch` base (children fill the width). Only start/end/baseline are the non-default repoints. */
+:where(ui-column[align='start']) {
+  --ui-column-align: start; /* start is a non-default: the [align='start'] repoint (box-alignment start — ADR-0039) */
+}
+:where(ui-column[align='end']) {
+  --ui-column-align: end; /* box-alignment end (ADR-0039) */
+}
+:where(ui-column[align='baseline']) {
+  --ui-column-align: baseline;
+}
+
+/* justify → justify-content (between/around/evenly → space-*; start is the box-alignment default — ADR-0039) */
+:where(ui-column[justify='center']) {
+  --ui-column-justify: center;
+}
+:where(ui-column[justify='end']) {
+  --ui-column-justify: end; /* box-alignment end (ADR-0039) */
+}
+:where(ui-column[justify='between']) {
+  --ui-column-justify: space-between;
+}
+:where(ui-column[justify='around']) {
+  --ui-column-justify: space-around;
+}
+:where(ui-column[justify='evenly']) {
+  --ui-column-justify: space-evenly;
+}
+
+/* gap → the --md-sys-space ladder (none = the var(--md-sys-space-none) default above). The step vocabulary mirrors the
+   flexProps `gap` union 1:1; --md-sys-space-* carries var(--md-sys-density), so the gap responds to a subtree [density]. */
+:where(ui-column[gap='xs']) {
+  --ui-column-gap: var(--md-sys-space-xs);
+}
+:where(ui-column[gap='sm']) {
+  --ui-column-gap: var(--md-sys-space-sm);
+}
+:where(ui-column[gap='md']) {
+  --ui-column-gap: var(--md-sys-space-md);
+}
+:where(ui-column[gap='lg']) {
+  --ui-column-gap: var(--md-sys-space-lg);
+}
+:where(ui-column[gap='xl']) {
+  --ui-column-gap: var(--md-sys-space-xl);
+}
+:where(ui-column[gap='2xl']) {
+  --ui-column-gap: var(--md-sys-space-2xl);
+}
+
+/* wrap → flex-wrap (boolean presence: the reflected `wrap` attribute is present ⇒ wrap onto multiple lines) */
+:where(ui-column[wrap]) {
+  --ui-column-wrap: wrap;
+}
+
+/* ════════════════ [2] STYLES BLOCK — @scope (ui-column) consumes ONLY --ui-column-* ════════════════ */
+
+@scope (ui-column) {
+  :scope {
+    display: flex;
+    flex-direction: column; /* the tag's IDENTITY — the main axis is the block axis (ADR-0016 cl.2), not a prop */
+    align-items: var(--ui-column-align);
+    justify-content: var(--ui-column-justify);
+    gap: var(--ui-column-gap);
+    flex-wrap: var(--ui-column-wrap);
+    box-sizing: border-box;
+    /* NO control height — a layout primitive (geometry.md Container/layout class): block-size is content-driven,
+       spacing rides --md-sys-space × [density]. It never reads --md-sys-height-* (that is the control band's lever). */
+  }
+
+  /* stretch → the host FILLS its parent's available inline size (`width: stretch`). Opt-in, default off — a
+     column shrink-wraps to content otherwise. Used on a ROOT layout box (e.g. the A2UI canvas root) so it
+     fills its artboard instead of shrink-wrapping. The three declarations are a fill-available fallback
+     cascade — the LAST valid one wins per engine (unprefixed `stretch` is modern CSS; `-webkit-fill-available`
+     / `-moz-available` cover older WebKit / Firefox), so it fills cross-engine. A single custom-prop token
+     can't hold this cascade, so this is the one sizing rule the styles block owns directly. */
+  :scope[stretch] {
+    width: -webkit-fill-available;
+    width: -moz-available;
+    width: stretch;
+  }
+
+  /* Container-query intrinsic responsiveness (ADR-0016 cl.4), PROP-GATED by `reflow` (ADR-0096) — mirrors ui-row
+     (which stacks to a column under a NARROW container) with the axis flipped: when the nearest EXTERNALLY-SIZED
+     ancestor boundary (ADR-0100 — NOT the column itself; an intrinsically-sized primitive can never safely
+     establish `container-type: inline-size`, see container.css's banner) is WIDE, a column with `reflow="auto"`
+     spreads its children into a row — the canonical "switcher". The selector
+     is `:scope[reflow='auto']`, NOT bare `:scope`: a default value is never reflected as an attribute (ADR-0005),
+     so an unadorned `ui-column` can never match this rule — locked by construction. `reflow` defaults to `locked`
+     (column.ts) so the switch is OPT-IN, reachable from the catalog alone (ADR-0096 cl.1/2/4). Reflows on the
+     container's width, NOT the viewport (no breakpoint props); the cross-engine smoke resizes the wrapper. */
+  @container (min-width: 30rem) {
+    :scope[reflow='auto'] {
+      flex-direction: row;
+    }
+  }
+
+  /* forced-colors (WHCM) — the surface survives as a system colour via the shared container.css role layer; this
+     belt-and-braces block guarantees no tonal wash paints over system text on the layout box. */
+  @media (forced-colors: active) {
+    :scope {
+      background-image: none;
+    }
+  }
+}

package/dist/controls/column/column.d.ts

@@ -0,0 +1,107 @@
+import { UIContainerElement } from '../../dom/container.js';
+import type { ReactiveProps } from '../../dom/index.js';
+declare const props: {
+    align: {
+        reflect: true;
+        type: import("../../index.js").PropType<"end" | "start" | "stretch" | "baseline">;
+        default: "end" | "start" | "stretch" | "baseline";
+        attribute?: string | false;
+    };
+    stretch: {
+        reflect: true;
+        type: import("../../index.js").PropType<boolean>;
+        default: boolean;
+        attribute?: string | false;
+    };
+    reflow: {
+        reflect: true;
+        type: import("../../index.js").PropType<"auto" | "locked">;
+        default: "auto" | "locked";
+        attribute?: string | false;
+    };
+    justify: {
+        reflect: true;
+        type: import("../../index.js").PropType<"end" | "start" | "center" | "between" | "around" | "evenly">;
+        default: "end" | "start" | "center" | "between" | "around" | "evenly";
+        attribute?: string | false;
+    };
+    gap: {
+        reflect: true;
+        type: import("../../index.js").PropType<"none" | "sm" | "md" | "lg" | "xs" | "xl" | "2xl">;
+        default: "none" | "sm" | "md" | "lg" | "xs" | "xl" | "2xl";
+        attribute?: string | false;
+    };
+    wrap: {
+        reflect: true;
+        type: import("../../index.js").PropType<boolean>;
+        default: boolean;
+        attribute?: string | false;
+    };
+    elevation: {
+        reflect: true;
+        type: import("../../index.js").PropType<"0" | "1" | "2" | "3" | "-3" | "-2" | "-1">;
+        default: "0" | "1" | "2" | "3" | "-3" | "-2" | "-1";
+        attribute?: string | false;
+    };
+    brightness: {
+        reflect: true;
+        type: import("../../index.js").PropType<"0" | "1" | "2" | "3" | "-3" | "-2" | "-1">;
+        default: "0" | "1" | "2" | "3" | "-3" | "-2" | "-1";
+        attribute?: string | false;
+    };
+};
+export interface UIColumnElement extends ReactiveProps<typeof props> {
+}
+export declare class UIColumnElement extends UIContainerElement {
+    static props: {
+        align: {
+            reflect: true;
+            type: import("../../index.js").PropType<"end" | "start" | "stretch" | "baseline">;
+            default: "end" | "start" | "stretch" | "baseline";
+            attribute?: string | false;
+        };
+        stretch: {
+            reflect: true;
+            type: import("../../index.js").PropType<boolean>;
+            default: boolean;
+            attribute?: string | false;
+        };
+        reflow: {
+            reflect: true;
+            type: import("../../index.js").PropType<"auto" | "locked">;
+            default: "auto" | "locked";
+            attribute?: string | false;
+        };
+        justify: {
+            reflect: true;
+            type: import("../../index.js").PropType<"end" | "start" | "center" | "between" | "around" | "evenly">;
+            default: "end" | "start" | "center" | "between" | "around" | "evenly";
+            attribute?: string | false;
+        };
+        gap: {
+            reflect: true;
+            type: import("../../index.js").PropType<"none" | "sm" | "md" | "lg" | "xs" | "xl" | "2xl">;
+            default: "none" | "sm" | "md" | "lg" | "xs" | "xl" | "2xl";
+            attribute?: string | false;
+        };
+        wrap: {
+            reflect: true;
+            type: import("../../index.js").PropType<boolean>;
+            default: boolean;
+            attribute?: string | false;
+        };
+        elevation: {
+            reflect: true;
+            type: import("../../index.js").PropType<"0" | "1" | "2" | "3" | "-3" | "-2" | "-1">;
+            default: "0" | "1" | "2" | "3" | "-3" | "-2" | "-1";
+            attribute?: string | false;
+        };
+        brightness: {
+            reflect: true;
+            type: import("../../index.js").PropType<"0" | "1" | "2" | "3" | "-3" | "-2" | "-1">;
+            default: "0" | "1" | "2" | "3" | "-3" | "-2" | "-1";
+            attribute?: string | false;
+        };
+    };
+}
+export {};

package/dist/controls/column/column.js

@@ -0,0 +1,57 @@
+// column.ts — UIColumnElement, the vertical A2UI layout primitive (goals.md §G9 / ADR-0016; decomp
+// g9-containers slice s4). BEHAVIOUR + props + self-define ONLY.
+//
+// `ui-column` is `ui-row`'s SIBLING with the main axis flipped to the block axis (`flex-direction: column`).
+// The direction is the element's IDENTITY — the tag names the main axis, A2UI-faithfully (ADR-0016 cl.2) — so
+// it is NOT a prop; an agent picks a column vs. a row by component type. The element carries no flex CSS in
+// TypeScript: it spreads the shared `surfaceProps`/`flexProps` (the one layout grammar, four consumers — the
+// ADR-0013 no-prototype-merge spread the base exposes) into its own `static props`, and column.css maps the
+// reflected attributes 1:1 onto the CSS flex properties with the column axis (the role-pure repoint).
+//
+// A pure STRUCTURAL container (ADR-0016): it extends `UIElement` via the `UIContainerElement` surface base, is
+// NOT form-associated (no value/validity), and contributes NO ARIA semantics — like a `<div>`, it sets no
+// `role` (neither a host attribute nor `internals.role`); meaning rides the children it lays out. `render()`
+// stays the inherited VOID so the user's light-DOM children flow through untouched (host-as-grid / -as-flex).
+// There is no interaction state, no keyboard, no motion gate — a layout box has none. The surface
+// (elevation/brightness) is painted by the shared controls/_surface/container.css; column.css owns only layout.
+//
+// Imports inward only (`controls → dom`): the surface base from `../../dom/container.ts`, the prop-authoring
+// TYPES from the `../../dom` barrel. `UIContainerElement` is not re-exported by the dom barrel until the s12
+// packaging slice, so it is imported from its module path directly.
+import { UIContainerElement } from "../../dom/container.js";
+import { prop } from "../../dom/index.js";
+// The whole public surface = the two shared spreadable sets, folded into this element's own `static props`
+// (surfaceProps then flexProps — the canonical consumer order; no re-declaration of the grammar, ADR-0016 cl.1).
+//   • surfaceProps — elevation/brightness (the two signed surface axes, ADR-0015)
+//   • flexProps    — align/justify/gap/wrap (the shared A2UI layout grammar, ADR-0016)
+// ADR-0030: the cross-axis `align` default is `stretch` (direction-appropriate — column's cross axis is
+// inline/width; children should fill the width by default). Kim's directive: `center` is NOT allowed on
+// ui-column — a column can only center children by shrink-wrapping them, which defeats the fill-width
+// default and is an anti-pattern for the stacked-content the tag exists to lay out. So the shared 5-member
+// `flexProps.align` enum is NARROWED here to the 4-member `[stretch, start, end, baseline]` (center dropped)
+// — a COLUMN-LOCAL restriction; ui-row/ui-grid/ui-list keep the full grammar. `stretch` LEADS the array so
+// it is both the default AND the invalid-value snap target (enumType.from falls to values[0]) — an
+// `align="center"` attribute snaps the prop back to `stretch`, and column.css drops its `[align='center']`
+// repoint so even a raw attribute cannot center.
+const props = {
+    ...UIContainerElement.surfaceProps,
+    ...UIContainerElement.flexProps,
+    align: { ...prop.enum(['stretch', 'start', 'end', 'baseline'], 'stretch'), reflect: true }, // narrowed: center removed (Kim); stretch-first = default + snap target
+    // stretch → the host fills its parent's available inline size (`width: stretch`). A column shrink-wraps to
+    // content by default; as a ROOT layout box it should FILL its parent instead. Column-LOCAL sizing opt-in
+    // (deliberately NOT folded into the shared `flexProps` grammar — row/grid/list are unaffected): the A2UI
+    // canvas sets it on a root `ui-column` so the surface fills the artboard. Boolean presence, default off.
+    stretch: { ...prop.boolean(false), reflect: true },
+    // reflow → gates the ADR-0016 cl.4 container-query direction switch (ADR-0096). Element-local, deliberately
+    // NOT folded into the shared `flexProps` (the ADR-0075 `stretch` precedent — `ui-list` has no `@container`
+    // rule and `ui-grid`'s auto-fit IS its own responsiveness, so both stay untouched). `locked` LEADS the array
+    // so it is both ui-column's default AND the invalid-value snap target — the column default FLIPS to `locked`
+    // (ADR-0096 cl.2): the wide→row switch fired unconditionally and unpreventably for the catalog's prop-only
+    // consumer, contradicting the tag's own cl.2 identity. `auto` opts back into the ADR-0016 cl.4 switch.
+    reflow: { ...prop.enum(['locked', 'auto'], 'locked'), reflect: true },
+};
+export class UIColumnElement extends UIContainerElement {
+    static props = props;
+}
+if (!customElements.get('ui-column'))
+    customElements.define('ui-column', UIColumnElement);