kmcom-nuxt-layers 6.3.0 → 6.5.0

package/docs/superpowers/specs/2026-08-30-layer-taxonomy-tier-7-design.md

@@ -1,73 +0,0 @@
-# Layer Taxonomy Redesign — Part 7: Tier 7 (Delivery)
-
-## Scope
-
-Forensic audit of `seo`, `scripts`, `feeds`, plus the `baseline` → `scripts` merge carried over
-as an open decision from Tier 0-1. Cleanup-only pass, per user direction from Tier 6.
-
-## Findings and resolution
-
-### `seo`: stale `OgImageBasic` fallback — fixed (real bug, low severity)
-
-`resolveOgImageConfig()`'s fallback (used only when `seoLayer` config is entirely absent) still
-returned `'OgImageBasic'` — the old default, already fixed at the `app.config.ts` level to
-`'OgImageNuxtSeo'` in an earlier session (`OgImageBasic` doesn't exist in `nuxt-og-image@6`). The
-fallback path is effectively dead in practice (app.config always provides `seoLayer`), but the
-stale value was still wrong and the test asserted the same stale value. **Fixed**: fallback and
-test both updated to `'OgImageNuxtSeo'`.
-
-### `scripts/app/types/` — dead duplicate types — deleted
-
-`types/scripts.ts` exported `LoadStrategy`, `ScriptLoaderOptions`, and `AnalyticsProxy` — zero
-consumers anywhere. `useScriptLoader.ts` declares its own local `LoadStrategy`/
-`ScriptLoaderOptions` instead of importing the "shared" ones, and `AnalyticsProxy` was unused even
-internally (the real type in use is `AnalyticsClient` in `scriptClients.ts`). **Fixed**: deleted
-`types/scripts.ts` and `types/index.ts`, removed the now-pointless `#layers/scripts/types` alias.
-
-### `baseline` merged into `scripts` — done (user decision, carried over from Tier 0-1)
-
-`baseline` was 3 files (`BaselineStatus.vue`, a client plugin registering the `baseline-status`
-web component, an `isCustomElement` compiler config) — a third-party embed integration, the same
-shape as `scripts`' existing analytics/GTM facades, not a standalone tier member. **Done**: moved
-`BaselineStatus.vue` and `baseline-status.client.ts` into `layers/scripts/app/`, added the
-`isCustomElement` compiler option and the `baseline-status` dependency to `scripts`, deleted
-`layers/baseline`, removed `baseline` from the playground's `AVAILABLE_LAYERS`/`LAYER_PATHS`/
-`LAYER_DEPENDENCIES`. Component name is unchanged (`BaselineStatus`, auto-imported by filename
-regardless of layer), so `apps/playground/app/pages/baseline.vue` and `index.vue` needed no edits.
-
-## Confirmed correct, no action
-
-- `seo`: `nuxt.config.ts` (`@nuxtjs/seo` module + `site` config), `app.config.ts` (correct
-  `defineAppConfig()` + colocated `declare module`), `useSeoConfig`/`resolveSeoConfig` — real,
-  consumed by `apps/playground/app/pages/seo.vue`, well-tested (`seoConfig.test.ts`, now updated).
-- `scripts`: `app.config.ts` (correct structure), `useAnalytics`/`useGtm`/`useScriptsConsent`/
-  `useScriptLoader`/`useYoutubeEmbed`, `scriptClients.ts` (provider factories: ga4/plausible/
-  fathom/GTM, consent-gated triggers, noop fallbacks) — all real, consumed by
-  `apps/playground/app/pages/scripts.vue`.
-- `feeds`: `nuxt.config.ts`'s conditional `extends` (empty unless `FEEDS_STANDALONE` env var is
-  set) looks like the "don't rely on load order" anti-pattern at first glance, but it isn't — the
-  playground's own `LAYER_DEPENDENCIES` mechanism (`feeds: ['core', 'content']`) is the actual
-  dependency-injection path for this repo's layer resolver, and the env-conditional `extends`
-  exists specifically to let `feeds` also be consumed as a truly standalone layer outside this
-  playground. `app.config.ts`, `feed-catalog.ts` (collection resolution, missing-collection
-  warnings), `feed-head.ts` plugin (auto-discovery `<link rel="alternate">` tags), `feed-service.ts`,
-  all `server/routes/feed/**` handlers (sampled `rss.get.ts`, `index.get.ts` — consistent), `Feeds/
-  Index.vue`, `Feeds/RouteCard.vue` — real, thorough, already well-tested
-  (`content-adapter.test.ts`, `feed-author.test.ts`, `feed-config.test.ts`, `formats.test.ts`),
-  consumed by `apps/playground/app/pages/feeds.vue`.
-
-## Consolidated action list (Tier 7)
-
-- [x] Fix stale `OgImageBasic` fallback + test in `seo`
-- [x] Delete dead `scripts/app/types/` (unused duplicate types)
-- [x] Merge `baseline` into `scripts`, delete the `baseline` layer, update playground registration
-
-## Not yet covered
-
-That closes the 8-tier sweep (Foundation → Design System → Structure → Content → Data → Motion →
-Render → Delivery). Still pending from earlier tiers, none touched this pass: `theme`'s
-`app.config.ts` structural defect and the `theme`→`theming` rename, `typography`'s font-prop
-infrastructure, breakpoint token consolidation, `AppContainer` clamp() conversion,
-`compatibilityVersion: 5` flip, `error.vue` real implementation, `starter` layer relocation into
-`apps/`, `useMetadataItem`'s fate, the openlibrary/google-books provider error-handling
-divergence, and the 8 zero-consumer `shader` composables left open in Tier 6.

package/docs/superpowers/specs/2026-08-31-swiss-grid-layer-design.md

@@ -1,190 +0,0 @@
-# Swiss Grid Layer — Design Spec
-
-Source: "Swiss Grid Spatial System for Web Interfaces" artifact (functional
-spec, rev. 2026-08-31), condensed from design discussion. This document
-translates that spec into a concrete new layer for this monorepo.
-
-## §0 Scope and relationship to `layers/structure/layout`
-
-New layer: `layers/structure/swiss-grid` — tier 2, sibling to `layout`.
-Depends only on `core`.
-
-`layers/structure/layout` (Swiss Grid _subgrid_ system: `LayoutMain` /
-`LayoutSection` / `LayoutGridItem`, hero/centered presets, `HStack` /
-`VStack` / `ZStack` / `Spacer`, `useGridConfig()`) is **untouched** by this
-work. It stays the system in use by `layers/content` (Gallery/Blog/Portfolio
-Page + Item/Slug/Image variants) and `layers/structure/navigation`
-(`Nav`/`NavModal`, which call `useGridConfig()` directly). Migrating those
-consumers to the new layer is explicitly a later, separate pass — not part
-of this spec.
-
-The two layers may run in the same app simultaneously. They do not share
-components, CSS custom properties, or config namespaces (`layoutLayer.*` vs
-a new `swissGridLayer.*` app.config key), so there is no collision risk.
-
-## §1 Primitives
-
-Two components, matching the artifact's §3 API surface exactly:
-
-```ts
-// SwissGrid — grid root
-interface SwissGridProps {
-  columns?: ResponsiveValue<number> // default: xs:4 sm:4 md:8 lg:12 xl:12
-  gap?: ResponsiveValue<Spacing> // Spacing token from core, e.g. 'md'
-  tag?: string // default: 'div'
-}
-
-// SwissGridItem — positioned child
-type SpanAlias = 'full' | 'half' | 'third' | 'quarter'
-interface SwissGridItemProps {
-  start?: number
-  span?: number | SpanAlias // default: 'full'
-  order?: number
-  tag?: string // default: 'div'
-}
-```
-
-`SwissGrid` sets `display: grid`, a responsive `grid-template-columns:
-repeat(N, minmax(0, 1fr))` (N from `columns`, resolved per breakpoint via
-`core`'s `ResponsiveValue<T>` — 5 tiers: `default/sm/md/lg/xl`, media
-queries built from `core`'s existing `--breakpoint-sm/md/lg/xl` tokens), a
-responsive `gap` from `core`'s `Spacing` scale, and `container-type:
-inline-size` (§7 — makes it a container-query boundary by default; every
-`SwissGrid` is a potential nesting point, not just the page root).
-
-`SwissGridItem` sets `grid-column: <start> / span <n>` (or `span <n>` alone
-when `start` is omitted) and `order` via an inline style object, built by a
-pure function — same shape as the old layer's `gridPlacementStyle.ts`, but a
-new implementation in this layer, not shared code. Old and new stay
-decoupled so `layout`'s cleanup/behavior can't leak into this layer or vice
-versa.
-
-## §2 Span aliases — resolving the artifact's open item
-
-The artifact leaves the exact alias set open (§13). Resolved here:
-
-- Aliases are expressed in a fixed **12-unit vocabulary**: `full=12,
-  half=6, third=4, quarter=3` — independent of the grid's live column
-  count, the same mental model as Bootstrap-style 12-col systems.
-- Because `columns` can be less than 12 at smaller breakpoints (4 at `xs`,
-  8 at `sm`/`md` per §1's default), an alias's rendered span is `min(alias
-  value, current column count)` — computed in the component, not CSS
-  `calc()` (integer `grid-column: span N` can't come from a fractional
-  division). This keeps `half` always rendering as "half of whatever this
-  breakpoint's grid actually has," clamped so it never overflows a
-  narrower grid.
-- The 12-unit table lives in `app.config.ts` under `swissGridLayer.ui.spanAliases`,
-  editable like the old layer's presets, not hardcoded in the component.
-
-## §3 Composition tier — Cluster and Flow
-
-New components, this layer, alongside `SwissGrid`/`SwissGridItem`:
-
-- **`Cluster`** — horizontal grouping: `display: flex; flex-wrap: wrap`,
-  `gap` from `core`'s `Spacing` scale, optional `align`/`justify` props.
-  For groups of items that wrap as a unit (tag lists, button rows,
-  metadata chips) — distinct from `SwissGrid`, which is column-track-based.
-- **`Flow`** — vertical stack with automatic rhythm: renders `> * + *
-  { margin-block-start: var(--fluid-space-<size>) }` scoped via a CSS
-  class, `size` prop selecting the `core` fluid-space token. For prose-like
-  vertical sequences where every child needs the same gap, without each
-  child managing its own margin.
-
-`HStack`/`VStack`/`Split` (old layer) are not duplicated here — `Cluster`
-and `Flow` cover shapes those don't (wrap-as-a-unit and auto-rhythm
-respectively), not full stack semantics.
-
-## §4 Vertical rhythm and fluid tokens — reusing `core`
-
-`core` already ships `layers/core/app/assets/css/tokens/spacing-fluid.css`:
-`--fluid-space-xs` through `--fluid-space-3xl`, `clamp()`-based, **plus**
-`-cq` container-relative variants (`--fluid-space-md-cq`, etc.) already
-built on `cqi` units. This is exactly what the artifact's §5 (baseline
-scale) and §6 (fluid `clamp()` tokens) ask for.
-
-**Decision: swiss-grid does not define its own spacing scale.** `gap` on
-`SwissGrid`, `Cluster`, and `Flow` all take `core`'s `Spacing` token type
-and resolve to `core`'s existing `--fluid-space-*` custom properties (the
-`-cq` variant when the component sits inside a `container-type` ancestor,
-plain variant otherwise). No new token set, no duplication, no future
-convergence work needed — building a parallel scale here would be
-first-rung ladder work nobody asked for.
-
-## §5 Container queries (§7)
-
-`container-type: inline-size` ships on `SwissGrid` by default (not opt-in)
-— every grid is nestable. Column-count and gap responsiveness _can_ be
-expressed via `@container` queries scoped to a `SwissGrid`'s own inline
-size (for a grid inside a sidebar vs. full page) as well as via the
-viewport-keyed `ResponsiveValue` breakpoints in §1 — both are supported,
-picked per-usage by which query type the CSS in question actually needs.
-
-## §6 Dev overlay (§10)
-
-`SwissGridDebug` component, same `⌘⇧G` shortcut and visual language as the
-old layer's `LayoutGridDebug`, reimplemented against the new grid's column
-custom properties. Toggles a column-boundary overlay for whichever
-`SwissGrid` instances are on screen.
-
-## §7 CSS conventions
-
-All new CSS in this layer uses **logical properties**: `inline-size` /
-`block-size` over `width`/`height`, `margin-inline`/`padding-block` over
-directional variants, etc. This is a deliberate departure from some
-existing CSS in the repo (which uses physical properties) — noted as a
-forward-looking convention for this layer only; not a retrofit of `layout`
-or other layers.
-
-## §8 Not building
-
-- **No "Section" concept.** The artifact never mentions viewport-height
-  sections — that's `layout`-specific (12-row/100vh `LayoutSection`). Out
-  of scope.
-- **No migration of `content`/`navigation` consumers.** Explicitly deferred
-  to a later pass per user decision.
-- **No shared code with `layout`'s `gridPlacementStyle.ts`.** Pattern
-  reused, implementation is new and independent.
-
-## §9 File layout
-
-```
-layers/structure/swiss-grid/
-├── app/
-│   ├── assets/css/
-│   │   └── swiss-grid.css          # entry point, imports below
-│   ├── components/
-│   │   ├── SwissGrid.vue
-│   │   ├── SwissGridItem.vue
-│   │   ├── SwissGridDebug.vue
-│   │   ├── Cluster.vue
-│   │   └── Flow.vue
-│   ├── composables/
-│   │   └── useSwissGrid.ts         # config resolution, span-alias lookup
-│   ├── utils/
-│   │   └── gridItemStyle.ts        # pure style-building fns (start/span/order)
-│   ├── types/
-│   │   └── swissGrid.ts            # SwissGridProps, SwissGridItemProps, SpanAlias
-│   └── app.config.ts               # swissGridLayer.ui.{columns,spanAliases}
-├── nuxt.config.ts                  # extends: ['../../core'], alias #layers/swiss-grid
-└── CLAUDE.md
-```
-
-## §10 Testing
-
-- `gridItemStyle.test.ts` — unit tests for the start/span/order → inline
-  style function, and the alias→span clamped-lookup function (mirrors old
-  layer's `gridPlacementStyle.test.ts` shape).
-- `tests/nuxt/use-swiss-grid.test.ts` — composable resolution test (config
-  defaults, override via app.config), same pattern as
-  `use-grid-config.test.ts`.
-- Component mount tests for `SwissGrid`/`SwissGridItem` (renders expected
-  `grid-template-columns`/`grid-column` given props).
-- New playground demo page (not `layout.vue` — a separate page, e.g.
-  `apps/playground/app/pages/swiss-grid.vue`) to visually verify: column
-  grid at each breakpoint, span aliases, `Cluster`/`Flow`, container-query
-  nesting, dev overlay.
-
-## §11 Open items carried forward
-
-None from the artifact remain open — §2 above resolves the span-alias set,
-§6 resolves the dev-overlay mechanism (reuse of the old layer's shortcut).

package/docs/superpowers/specs/2026-09-03-layout-layer-fluid-rebuild-design.md

@@ -1,312 +0,0 @@
-# Layout Layer — Fluid Rebuild Design Spec
-
-Source: `LAYOUT-SYSTEM.md` (forensic reference for the `swiss-test/`
-prototype — `src/layout.css`, vanilla Vite/TS, no framework), validated
-against the working prototype at `/Users/kieranmansfield/Developer/layers/swiss-test`.
-This document adapts that CSS-only derivation into a full rebuild of
-`layers/structure/layout`, replacing its current breakpoint-based
-6/12/18-column subgrid system.
-
-## §0 Relationship to the Swiss Grid tier-2 spec
-
-`docs/superpowers/specs/2026-08-31-swiss-grid-layer-design.md` proposes a
-**separate sibling layer** (`layers/structure/swiss-grid`) that leaves
-`layers/structure/layout` untouched. This spec is a **different track**: it
-replaces `layout` itself, in place, rather than adding a new layer beside
-it. The two specs are not both implementable as originally scoped — before
-implementation starts on this one, reconcile with the user whether the
-tier-2 sibling-layer spec is superseded, deferred, or still wanted
-alongside this rebuild.
-
-## §1 Governing idea
-
-One root unit derives everything else. No breakpoints, no orientation
-query, no hand-picked column counts.
-
-```text
---fs (fluid font-size)
-  → line-height (rounded to px)
-    → --unit: 1rlh
-      → --edge-min, --lpf, --measure-min
-        → --lines, --fields, --type-b, --slack
-          → padding-block, grid tracks, gap
-```
-
-Change `--fs`'s clamp and the whole grid — margins, field height, column
-count threshold — rescales in step. The grid has no size values of its
-own, only ratios against `--unit`. This is CSS-only: no JS computes grid
-math at runtime.
-
-## §2 Scope decisions (from brainstorming)
-
-- **Clean break.** No `colStart`/`colSpan`/`rowStart`/`rowSpan` numbered
-  placement API. Auto-fill's native column resolution
-  (`floor((available + gutter) / (measure-min + gutter))`) is the only
-  column-count mechanism — no mathematically-generated `--cols` ladder,
-  since a `calc()`/`round()`-derived integer fed into `repeat()`'s
-  track-count position is the exact failure mode Pitfall 1 (§7) already
-  proved broken in this codebase.
-- **Layout owns `--fs`/`line-height`.** Matches the repo's existing
-  convention (CLAUDE.md's open item, option 1) — layout owns the one
-  clamp that feeds the grid; typography layer owns everything else
-  (font-family, weight scale, prose styles, headings outside grid cells).
-- **Per-section row derivation, restored.** Not a flat, purely continuous
-  page (see §4) — the field/line math runs per `LayoutSection`, not once
-  globally per page.
-- **CSS `@property` typing, not TS.** Every derived custom property gets a
-  real `syntax` descriptor. No TypeScript interface for the JS→CSS var
-  bridge (config tunables → `:style`) — out of scope.
-- **Unrelated components untouched.** `HStack`/`VStack`/`ZStack`/`Spacer`,
-  `LayoutPage`/`LayoutPageHeader`, the z-index layer system
-  (`useZIndex`/`GridLayers`), and the `⌘G` debug overlay carry forward —
-  rebuilt only where they touch grid mechanics.
-- **No consumer migration in this task.** `layers/content`,
-  `layers/structure/navigation`, and the playground/starter apps keep
-  calling the old API until a separate pass updates them. This task's
-  deliverable includes a migration guide document, not the migrations
-  themselves.
-
-## §3 Derivation, step by step
-
-Ported from the validated prototype (`swiss-test/src/layout.css`):
-
-1. **Type.** `--fs: clamp(1rem, 0.95rem + 0.25svi, 1.125rem)`, registered
-   via `@property` as `<length>` so downstream `calc()` gets a resolved
-   length, not an unresolved token stream. `line-height` is
-   `round(nearest, fs * 1.5, 1px)` — rounded, not raw, so grid boundaries
-   land on-pixel.
-2. **Unit.** `--unit: 1rlh`. `rlh` not `lh`: `lh` resolves against the
-   _current_ element, so a heading with a different line-height would
-   silently produce a different unit for anything nested in it. `rlh`
-   always resolves against root.
-3. **Minimums.**
-   - `--measure-min: 22rem` — narrowest column, also the
-     `repeat(auto-fill, minmax(...))` floor and the `@container cell`
-     padding-step threshold.
-   - `--edge-min: clamp(1unit, 8svi, 3unit)` — margin floor > 0, steep
-     `svi` slope so it shrinks fast on narrow screens. Feeds `--avail-b`,
-     so it also trims top/bottom slack, not just inline edges.
-4. **Lines** (per-section, see §4). `--avail-b: 100svh - 2*edge-min`.
-   `--lines: round(down, avail-b, unit) / unit` — the only way to get an
-   integer line-count out of a length in CSS.
-5. **Fields** (per-section). `--lpf` (lines-per-field) clamped 4–8, scaled
-   by viewport height (`round(down, 100svh/unit/4.5, 1)`) so a fixed
-   `lpf=8` can't strand up to 8 line-heights as dead padding on a short
-   viewport. `--fields: max(1, round(down, (lines+1)/(lpf+1), 1))`.
-6. **Margins** (per-section). Whatever's left over, split by the
-   section's `align` prop (§4) — computed last because it can't be
-   chosen, only what remains after the whole-line constraint.
-   `--slack: 100svh - type-b`, clamped `max(0px, …)` on both sides so a
-   short/landscape viewport degrades to scroll instead of negative
-   padding.
-7. **Columns.** `repeat(auto-fill, minmax(measure-min, 1fr))` on the root
-   grid only. Native `auto-fill` computes column count from available
-   space directly, without needing an integer derived via `calc()`.
-
-## §4 Section model
-
-The root (`LayoutMain`) is a continuous auto-fill grid — content not
-wrapped in a `LayoutSection` flows and wraps normally, sized only by
-`--measure-min`/`--unit`, no viewport-height chunking.
-
-`LayoutSection` is an **opt-in full-width row**:
-
-- `grid-column: 1 / -1`, `grid-template-columns: subgrid` — inherits
-  however many explicit columns the root's `auto-fill` resolved. This is
-  legal: subgrid adopts the parent's resolved explicit track count
-  whatever it is; it only breaks when something tries to _address_ a
-  column by number, which nothing in this design does. A `.span-2` class
-  inside a subgridded section asks for "2 of however many columns exist,"
-  the same trick the prototype's own `.span-2` container-query gate uses
-  (§6) — it works identically whether the parent's tracks came from a
-  fixed count or from `auto-fill`.
-- Block-size defaults to `100svh` (overridable via a `height` prop), and
-  it runs its own §3 steps 4–6 scoped to itself — same global
-  `--unit`/`--edge-min`/`--lpf` from `:root`, applied per-section instead
-  of once per-page.
-- `align` prop: `'split'` (the prototype's default 40/60 optical-center
-  padding split) or `'center'` (`place-content: center` — true
-  horizontal+vertical centering). Explicit choice, not a fight against
-  `align-items: stretch` defaults — this directly addresses the prior
-  centering pain: the old `LayoutSection`/`GridItem` combo had no
-  first-class centering prop, so centering meant fighting
-  `grid-auto-rows`'s fixed track height and the container's default
-  stretch behavior.
-
-## §5 Components
-
-```text
-layers/structure/layout/app/components/
-├── HStack.vue / VStack.vue / ZStack.vue / Spacer.vue   # unchanged
-└── Layout/
-    ├── Main.vue           # rebuilt: root auto-fill grid, --fs/--unit owner
-    ├── Section.vue        # rebuilt: opt-in full-width subgrid row, §4
-    ├── Cell.vue            # new, replaces Grid/Item.vue
-    ├── Hero.vue            # new, replaces the `hero` GridItem preset
-    ├── Grid/Debug.vue     # rebuilt: visualizes --unit/field boundaries
-    └── Page/
-        ├── index.vue       # unchanged
-        └── Header.vue      # unchanged
-```
-
-- **`LayoutMain`** — kept name (minimizes churn for whatever later
-  migrates to it), rebuilt internals. Renders `<main>` as the root
-  auto-fill grid. Registers `--fs`, binds config tunables to CSS custom
-  properties via `:style`.
-- **`LayoutSection`** — see §4.
-- **`LayoutCell`** (replaces `LayoutGridItem`) — `variant: 'block' |
-  'plate'` prop (border vs. filled, matching the prototype's `.block`/
-  `.plate`), `span2` / `span2Rows` / `span3Rows` boolean/enum props. No
-  `colStart`/`rowStart`/`preset`/`layer`/`bleed` — those go in the
-  migration guide as removed, with the nearest equivalent noted.
-- **`LayoutHero`** (replaces the `hero` `GridItem` preset) — standalone,
-  full-viewport (`100svh`) flex-centered, deliberately outside the grid
-  entirely (no `--fields`, no column derivation) — matches the
-  prototype's `.hero`.
-- **`LayoutGridDebug`** — same `⌘⇧G` shortcut, rewritten to overlay
-  `--unit`/field boundaries (via `getComputedStyle`) instead of a fixed
-  column count, since column count is now emergent.
-- `Layout/Grid/Item.vue` and `Layout/Section/{Gallery,Hero,Split}.vue` —
-  deleted; superseded by `Cell`/`Hero`/`Section`.
-
-## §6 CSS `@property` registration
-
-Every derived custom property gets a `syntax` descriptor, extending the
-prototype's existing `--fs` registration:
-
-| Property                           | `syntax`    |
-| ---------------------------------- | ----------- |
-| `--fs`                             | `<length>`  |
-| `--unit`                           | `<length>`  |
-| `--edge-min`                       | `<length>`  |
-| `--measure-min`                    | `<length>`  |
-| `--lpf`                            | `<integer>` |
-| `--lines`                          | `<integer>` |
-| `--fields`                         | `<integer>` |
-| `--avail-b`, `--type-b`, `--slack` | `<length>`  |
-
-Registration guards against Pitfall 1's failure mode (§7) as new CSS is
-added later: an unregistered custom property built from `calc()`/
-`round()` silently substitutes as a token stream instead of a resolved
-value at points that require one, invalidating the whole declaration and
-falling back to implicit auto-sized tracks — a squash bug that's invisible
-to `pnpm build` and only catchable via real browser `getComputedStyle()`
-inspection.
-
-## §7 Pitfalls carried forward (verified in the prototype, must not regress)
-
-1. **`repeat(var(--n), ...)` silently invalidates.** `repeat()`'s
-   track-count argument requires a literal `<integer>` at computed-value
-   time — an unregistered `calc()`/`round()`-derived custom property
-   doesn't satisfy that. Fix: `repeat(auto-fill, minmax(<length>, 1fr))`,
-   never a `var()`-derived count. This is _why_ §2 rejects a mathematical
-   `--cols` ladder for v1.
-2. **Span utilities forcing malformed implicit tracks.** `span-2`
-   unconditionally applying `grid-column: span 2` can force CSS Grid to
-   fabricate a content-sized implicit column when only 1 explicit column
-   resolved (narrow/medium viewport), squashing siblings. Fix:
-   `grid-auto-columns: minmax(measure-min, 1fr)` (belt-and-braces) plus
-   gating `.span-2` behind `@container viewport (min-width: 2 *
-   measure-min + gutter)` so it only activates once 2 columns have
-   genuinely resolved.
-3. **Hand-synced container-query thresholds.** `@container` conditions
-   can't reference custom properties — the `@container cell (max-width:
-   22rem)` / `@container viewport (min-width: 46rem)` thresholds must be
-   hand-kept in sync with `--measure-min`, commented at both ends.
-
-## §8 Constraints to preserve
-
-- Every fluid `clamp()` keeps a `rem` term — a pure `vw`/`cqi` middle term
-  ignores browser zoom, fails WCAG 1.4.4.
-- Never `line-height: normal` on `:root` — font-metric dependent, whole
-  grid would reflow on webfont swap.
-- `svh`/`svi`, never `dvh`/`vw`/`vh` — `dvh` recomputes on mobile URL-bar
-  collapse, reflowing mid-scroll.
-- `lh`/`rlh` don't resolve correctly in media queries (resolve against
-  initial font there) — use `rem`, or a container query with `cqi`.
-- `container-type` never on `body` (becomes the `position: fixed`
-  containing block for descendants — an unrelated footgun).
-
-## §9 Config
-
-`app.config.ts`:
-
-```ts
-layoutLayer: {
-  ui: {
-    grid: {
-      mode: 'fluid' | 'disabled'
-      tunables: {
-        measureMin: string // e.g. '22rem'
-        edgeMin: {
-          min: string
-          max: string
-        } // clamp bounds
-        lpf: {
-          min: number
-          max: number
-        } // lines-per-field bounds
-      }
-      layers: GridLayers // z-index system, unchanged
-    }
-  }
-}
-```
-
-`useGridConfig()`:
-
-```ts
-const { config, mode, isEnabled, layers, useZIndex, cssVars } = useGridConfig()
-```
-
-- `getPreset` — removed (no addressable placement left to preset).
-- `cssVars` — new: computed map of tunables → CSS custom property
-  strings, consumed by `LayoutMain`/`LayoutSection`'s `:style` binding.
-  This is the JS→CSS bridge; per §2, it carries no dedicated TS interface
-  beyond the existing `GridConfig` type in `layouts.ts`.
-- `mode`/`isEnabled`/`layers`/`useZIndex` — unchanged behavior.
-  `'disabled'` mode renders a plain `<main>`, no grid CSS, same fallback
-  as today.
-
-## §10 Testing
-
-- `gridPlacementStyle.ts`/`.test.ts` — deleted. Placement is static CSS
-  classes now (`span2`, etc.); there's no positioning math left to unit
-  test.
-- New: a small test for `useGridConfig`'s `cssVars` mapping and
-  `mode`/`isEnabled` resolution (mirrors the existing composable test
-  shape).
-- Manual verification: `getComputedStyle` sweep at 500 / 768 / 900 /
-  1024 / 1440 / 1920px, checking `gridTemplateColumns`/`gridAutoRows`
-  against expectation at each width, and that `.span-2`/`--fields`
-  thresholds gate correctly — the same method that caught Pitfalls 1–2 in
-  the prototype, since computed-value grid bugs are invisible to
-  `pnpm build`'s pure syntax check.
-- Playground: existing `apps/playground/app/pages/layout.vue` demo
-  rebuilt against the new components — visual check of continuous grid,
-  section centering (both `align` modes), hero, debug overlay.
-
-## §11 Deliverables
-
-1. Rebuilt `layers/structure/layout` per §5–§9.
-2. `docs/LAYOUT.md` rewritten to describe the new system (supersedes the
-   6/12/18 breakpoint documentation).
-3. A migration guide document (old → new API mapping: removed props,
-   nearest equivalents, config shape changes) for later use when
-   `layers/content`, `layers/structure/navigation`, and the
-   playground/starter apps are updated. Not implemented as part of this
-   task.
-4. §0's spec-conflict reconciliation resolved before implementation
-   starts.
-
-## §12 Not building
-
-- No numbered column/row placement API (`colStart`, `rowStart`).
-- No mathematically-generated `--cols` (§2, §7 pitfall 1).
-- No consumer migration (content layer, navigation, playground/starter
-  call sites) — guide only.
-- No TypeScript interface for the CSS var bridge — `@property` is the
-  only typing layer (§2, §6).
-- No changes to `HStack`/`VStack`/`ZStack`/`Spacer`, `LayoutPage`/
-  `LayoutPageHeader`, or the z-index layer system beyond what's needed to
-  keep them working against the rebuilt `LayoutMain`.