@3xhaust/oh-my-design 0.16.1

package/core/asset-sourcing/index.ts

@@ -0,0 +1,187 @@
+/**
+ * Asset sourcing policy core.
+ *
+ * OMD supports three asset paths, in order of precedence:
+ *   1. (default) User-provided assets, optionally treated with a duotone filter
+ *      (see `core/graphics/duotone-image-presets.md`) for visual unification.
+ *   2. (conditional) AI-generated imagery — only when the host environment
+ *      declares image-generation capability, and only for abstract/atmospheric
+ *      zones. Factual carriers (team photos, product screenshots, real people,
+ *      logos) may never be satisfied by AI-generated imagery.
+ *   3. (additive) WebGL/3D — gated on hand precedence (explicit user request OR
+ *      greenfield concept necessity), a declared performance budget, and a
+ *      non-canvas semantic fallback.
+ * When none of these apply, the design falls back to CSS/SVG treatments per
+ * `core/graphics/placeholder-policy.md` — a grey box is a defect, never the
+ * final answer.
+ *
+ * RUNTIME SCOPE NOTE: this module is a pure decision/gate core. It contains
+ * no I/O and calls no external services — it decides *whether* a path is
+ * permitted, never executes it. AI image generation IS wired at the agent
+ * layer: on a host that provides an image-generation capability (Codex,
+ * Claude Code), the composer/hand invoke it per `core/theory/imagegen.md`
+ * for image-first concept drafts and for abstract/atmospheric shipped assets,
+ * with this module as the admissibility gate and committed provenance recorded
+ * via `omd decision`. What remains environment-dependent is 3D/WebGL
+ * performance MEASUREMENT (render tracing, Lighthouse-style budgets): those
+ * adapters are intentionally NOT stubbed here and must not fabricate a fake
+ * "success" result for a capability the environment cannot exercise.
+ */
+
+export type AssetZone = 'factual' | 'abstract' | 'atmospheric' | 'structural';
+
+export type AssetStrategy =
+  | 'user-asset-duotone'
+  | 'ai-image'
+  | 'webgl-3d'
+  | 'css-svg-fallback';
+
+export interface AssetStrategyInputs {
+  hasUserAsset: boolean;
+  hostHasImageGen: boolean;
+  explicitWebglRequest?: boolean;
+  greenfieldConceptNecessity?: boolean;
+  perfBudgetDeclared?: boolean;
+  zone: AssetZone;
+}
+
+export interface AssetStrategyDecision {
+  strategy: AssetStrategy;
+  reason: string;
+  fallbackChain: string[];
+}
+
+/**
+ * Decide the asset sourcing strategy for a single content slot. Pure
+ * decision function — no I/O, no runtime capability checks beyond the
+ * declared inputs.
+ */
+export function decideAssetStrategy(inputs: AssetStrategyInputs): AssetStrategyDecision {
+  const { hasUserAsset, hostHasImageGen, zone } = inputs;
+  const explicitWebglRequest = inputs.explicitWebglRequest ?? false;
+  const greenfieldConceptNecessity = inputs.greenfieldConceptNecessity ?? false;
+  const perfBudgetDeclared = inputs.perfBudgetDeclared ?? false;
+
+  if (hasUserAsset) {
+    return {
+      strategy: 'user-asset-duotone',
+      reason: 'A user-provided asset is available; it is the default source and takes precedence over AI generation or WebGL.',
+      fallbackChain: ['user-asset-duotone', 'css-svg-fallback'],
+    };
+  }
+
+  // Factual carriers (team photos, product screenshots, real people, logos)
+  // may never be satisfied by AI-generated imagery, regardless of host
+  // capability. See `validateAiImageUsage` for the corresponding gate.
+  const aiImageEligibleZone = zone === 'abstract' || zone === 'atmospheric';
+  if (zone !== 'factual' && aiImageEligibleZone && hostHasImageGen) {
+    return {
+      strategy: 'ai-image',
+      reason: `No user asset is available; the "${zone}" zone permits AI-generated imagery and the host declares image-generation capability.`,
+      fallbackChain: ['ai-image', 'css-svg-fallback'],
+    };
+  }
+
+  const handPrecedence = explicitWebglRequest || greenfieldConceptNecessity;
+  if (handPrecedence && perfBudgetDeclared) {
+    return {
+      strategy: 'webgl-3d',
+      reason: 'No user asset or AI image path applies; WebGL/3D escalation is permitted by hand precedence and a declared performance budget.',
+      fallbackChain: ['webgl-3d', 'css-svg-fallback'],
+    };
+  }
+
+  return {
+    strategy: 'css-svg-fallback',
+    reason: zone === 'factual'
+      ? 'The zone is factual: AI-generated imagery is never permitted, no user asset was provided, and WebGL escalation was not authorised. Falling back to CSS/SVG per the placeholder policy.'
+      : 'No user asset, no eligible AI-image path, and no authorised WebGL escalation. Falling back to CSS/SVG per the placeholder policy.',
+    fallbackChain: ['css-svg-fallback'],
+  };
+}
+
+export interface AiImageUsageInputs {
+  zone: AssetZone;
+  hostHasImageGen: boolean;
+  provenance?: {
+    prompt?: string;
+    provider?: string;
+  };
+}
+
+export interface AiImageUsageValidation {
+  allowed: boolean;
+  violations: string[];
+}
+
+/**
+ * Gate for whether a specific AI-generated image is permitted to ship.
+ * Pure validation — the actual image generation call is a Phase 2 runtime
+ * adapter concern (see module header); this only decides admissibility.
+ */
+export function validateAiImageUsage(inputs: AiImageUsageInputs): AiImageUsageValidation {
+  const violations: string[] = [];
+
+  if (inputs.zone === 'factual') {
+    violations.push('factual carrier: AI-generated imagery is never permitted for factual slots (team photos, product screenshots, real people, logos).');
+  } else if (inputs.zone !== 'abstract' && inputs.zone !== 'atmospheric') {
+    violations.push(`ineligible zone: AI-generated imagery is only permitted in abstract or atmospheric zones, not "${inputs.zone}".`);
+  }
+
+  if (!inputs.hostHasImageGen) {
+    violations.push('host capability: the host environment does not declare image-generation capability.');
+  }
+
+  if (!inputs.provenance?.prompt) {
+    violations.push('provenance missing: prompt is required to record how the image was generated.');
+  }
+
+  if (!inputs.provenance?.provider) {
+    violations.push('provenance missing: provider is required to record how the image was generated.');
+  }
+
+  return {
+    allowed: violations.length === 0,
+    violations,
+  };
+}
+
+export interface WebglEscalationInputs {
+  explicitUserRequest: boolean;
+  greenfieldConceptNecessity: boolean;
+  perfBudgetDeclared: boolean;
+  semanticFallbackPresent: boolean;
+}
+
+export interface WebglEscalationDecision {
+  permitted: boolean;
+  reasons: string[];
+}
+
+/**
+ * Gate for whether a WebGL/3D escalation is permitted. Pure decision —
+ * actual 3D performance measurement (render tracing, frame-budget
+ * verification) is a Phase 2 runtime adapter concern (see module header);
+ * this only decides admissibility from declared inputs.
+ */
+export function evaluateWebglEscalation(inputs: WebglEscalationInputs): WebglEscalationDecision {
+  const reasons: string[] = [];
+
+  const handPrecedence = inputs.explicitUserRequest || inputs.greenfieldConceptNecessity;
+  if (!handPrecedence) {
+    reasons.push('hand precedence not established: neither an explicit user request nor a greenfield concept necessity was declared.');
+  }
+
+  if (!inputs.perfBudgetDeclared) {
+    reasons.push('performance budget not declared: a WebGL/3D escalation requires an explicit performance budget.');
+  }
+
+  if (!inputs.semanticFallbackPresent) {
+    reasons.push('semantic fallback missing: a non-canvas semantic fallback is required before a WebGL/3D escalation ships.');
+  }
+
+  return {
+    permitted: reasons.length === 0,
+    reasons,
+  };
+}

package/core/coach/index.ts

@@ -0,0 +1,98 @@
+import type { CoachReport, Category, Recurring, Run } from '../types.ts';
+
+/** Below this many runs, a trend is noise, not a signal. */
+const MIN_RUNS_FOR_CONFIDENCE = 4;
+
+/** A rule must show up in at least this many distinct runs to be called recurring. */
+const MIN_DISTINCT_RUNS = 2;
+
+function categoryOf(ruleId: string): Category {
+  if (ruleId.startsWith('SLOP-')) return 'slop';
+  if (ruleId.startsWith('CONTRAST-') || ruleId.startsWith('HIT-')) return 'a11y';
+  return 'system';
+}
+
+function mean(runs: Run[], ruleId: string): number {
+  if (runs.length === 0) return 0;
+  const sum = runs.reduce((acc, r) => acc + (r.counts[ruleId] ?? 0), 0);
+  return sum / runs.length;
+}
+
+/**
+ * The change between the first and second half of the runs.
+ *
+ * A rule absent from the first half has no baseline, so a percent change does not exist.
+ * Reporting one — "+500%" because it went from zero to five — invents a statistic. The
+ * direction is knowable; the percentage is not, and `null` says so.
+ */
+function changeFor(runs: Run[], ruleId: string): { changePct: number | null; trend: Recurring['trend'] } {
+  const mid = Math.floor(runs.length / 2);
+  const first = mean(runs.slice(0, mid), ruleId);
+  const second = mean(runs.slice(mid), ruleId);
+
+  if (first === 0) {
+    if (second === 0) return { changePct: 0, trend: 'flat' };
+    return { changePct: null, trend: 'worsening' };
+  }
+
+  const changePct = Math.round(((second - first) / first) * 100);
+  if (changePct <= -10) return { changePct, trend: 'improving' };
+  if (changePct >= 10) return { changePct, trend: 'worsening' };
+  return { changePct, trend: 'flat' };
+}
+
+const byCodeUnit = (a: string, b: string): number => (a < b ? -1 : a > b ? 1 : 0);
+
+/**
+ * Skill, not taste. Coach only ever looks at `history` (what the linter found) and
+ * `decisions` (what the user overruled and why it was written down) — never
+ * `.omd/taste/`, which records preferences that have no right answer.
+ */
+export function analyse(history: Run[], decisions: string[]): CoachReport {
+  const confident = history.length >= MIN_RUNS_FOR_CONFIDENCE;
+
+  const span = history.length === 0
+    ? null
+    : { from: history[0]!.ts, to: history[history.length - 1]!.ts };
+
+  const ruleIds = new Set<string>();
+  for (const run of history) for (const ruleId of Object.keys(run.counts)) ruleIds.add(ruleId);
+
+  const recurring: Recurring[] = [];
+  for (const ruleId of ruleIds) {
+    const appearances = history.filter((r) => (r.counts[ruleId] ?? 0) > 0);
+    if (appearances.length < MIN_DISTINCT_RUNS) continue;
+
+    const total = history.reduce((acc, r) => acc + (r.counts[ruleId] ?? 0), 0);
+
+    if (!confident) {
+      recurring.push({
+        rule: ruleId, category: categoryOf(ruleId), total, runs: appearances.length,
+        trend: 'insufficient', changePct: null,
+      });
+      continue;
+    }
+
+    const { changePct, trend } = changeFor(history, ruleId);
+    recurring.push({
+      rule: ruleId, category: categoryOf(ruleId), total, runs: appearances.length,
+      trend, changePct,
+    });
+  }
+
+  recurring.sort((a, b) => b.total - a.total || byCodeUnit(a.rule, b.rule));
+
+  // One decision is one overrule, however many times it names the rule. A decision that
+  // mentions SLOP-GRADIENT in both its title and its reason was still a single choice.
+  const overruleCounts = new Map<string, number>();
+  for (const decision of decisions) {
+    for (const rule of new Set(decision.match(/\bSLOP-[A-Z-]+\b/g) ?? [])) {
+      overruleCounts.set(rule, (overruleCounts.get(rule) ?? 0) + 1);
+    }
+  }
+  const overrules = [...overruleCounts.entries()]
+    .map(([rule, count]) => ({ rule, count }))
+    .sort((a, b) => b.count - a.count || byCodeUnit(a.rule, b.rule));
+
+  return { runs: history.length, span, recurring, overrules, confident };
+}

package/core/composition/app-shell-workbench.md

@@ -0,0 +1,168 @@
+# App shell workbench
+
+> Candidate hypothesis only. Revalidate its condition, values, and responsive transition
+> against the current composition contract; do not transfer this page recipe unchanged.
+
+The default grammar for a `product` work surface: a persistent shell (top bar and/or side
+navigation) framing a dominant work region that owns the viewport. The shell answers
+"where am I, where else can I go"; the work region carries the task loop. Nothing here is
+a scroll narrative — the page does not argue, it operates. `core/theory/ux.md` §Surface
+types names the condition; `core/theory/layout.md` §Density governs how loud the data may
+be.
+
+## When it earns its place / When it does not
+
+Condition: the frame's `uxSurface` is `product` and the primary screen serves a repeated
+task loop over work objects — a queue, a dashboard, a console, an admin table, an editor.
+The user returns to this screen many times a day; orientation cost must be near zero and
+the frequent action reachable within the first viewport.
+
+The shell earns a side navigation only when the product has 4+ peer destinations the user
+switches between; below that, a top bar with inline destinations costs less horizontal
+space and leaves more room for the work object (`theory/layout.md`: density follows task
+frequency, not furniture convention).
+
+Condition against: a single-surface marketing or editorial page (no destinations to hold),
+or a focused flow (checkout, onboarding wizard) where global navigation invites
+mid-task escape — use `form-wizard-stepper.md` there. Also against: using the shell as
+decoration around content that is itself a landing page; an app shell does not convert a
+persuasion page into a product.
+
+**Anti-hero clause.** The work region's first viewport belongs to the work object at
+representative data density. A display-scale headline, hero band, marketing gradient, or
+illustration claiming that viewport is a grammar defect on this surface — the orientation
+line (screen name + one-line state summary, e.g. "받은함 — 대기 12") is the entire
+permitted "hero".
+
+## Parameters
+
+```css
+:root {
+  /* Shell chrome sizes. The top bar stays under 56px so the work region keeps
+     the viewport; the side nav collapses to icons at tablet width. */
+  --shell-topbar-h: 52px;
+  --shell-sidenav-w: 220px;
+  --shell-sidenav-w-collapsed: 56px;
+
+  /* Work region density. Row height decides rows-per-viewport: 44-48px serves
+     expert repeated scanning; 56px+ serves low-frequency browsing. */
+  --work-row-h: 46px;
+
+  /* One accent marks the primary action and the current nav location.
+     Chrome stays neutral so data carries the color. */
+  --shell-accent: var(--accent, #1f6f5c);
+  --shell-chrome-bg: var(--surface, #fff);
+  --shell-chrome-line: var(--line, #e5e7e5);
+}
+```
+
+## Implementation
+
+```html
+<!-- The shell is a grid, not a scroll sequence. DOM order: shell nav first
+     (it is the product's map), then the work region — focus order follows. -->
+<div class="app-shell">
+  <header class="shell-topbar">
+    <span class="shell-product">제품명</span>
+    <p class="shell-orientation">받은함 — 대기 12 · 진행 4</p>
+    <nav class="shell-account" aria-label="계정"><!-- profile, settings --></nav>
+  </header>
+
+  <nav class="shell-sidenav" aria-label="주 탐색">
+    <!-- The user's nouns, current location marked with aria-current. -->
+    <a href="/inbox" aria-current="page">받은함</a>
+    <a href="/customers">고객</a>
+    <a href="/reports">리포트</a>
+    <a href="/settings">설정</a>
+  </nav>
+
+  <main class="shell-work">
+    <!-- The work object owns this region: toolbar (search/filters/primary
+         action), then the queue/table/canvas at working density. -->
+  </main>
+</div>
+```
+
+```css
+.app-shell {
+  display: grid;
+  grid-template-columns: var(--shell-sidenav-w) minmax(0, 1fr);
+  grid-template-rows: var(--shell-topbar-h) minmax(0, 1fr);
+  grid-template-areas:
+    "topbar topbar"
+    "sidenav work";
+  min-height: 100vh;
+}
+
+.shell-topbar {
+  grid-area: topbar;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  background: var(--shell-chrome-bg);
+  border-bottom: 1px solid var(--shell-chrome-line);
+}
+
+.shell-sidenav {
+  grid-area: sidenav;
+  border-right: 1px solid var(--shell-chrome-line);
+}
+
+.shell-sidenav a[aria-current="page"] {
+  color: var(--shell-accent);
+  font-weight: 600;
+  /* Location is marked structurally (inset bar), not by tint alone. */
+  box-shadow: inset 3px 0 0 var(--shell-accent);
+}
+
+.shell-work {
+  grid-area: work;
+  min-width: 0; /* tables and canvases must be allowed to shrink, not overflow */
+}
+```
+
+The work region's internal order is the task loop: orientation line → locate controls
+(search, filters — always visible on an expert surface, never buried in a menu) → the
+work object → detail/action surfaces. Reachable states (loading skeleton, empty first-run,
+filtered-to-zero, error with recovery) are layouts of this same region, not separate
+pages.
+
+## Responsive behavior
+
+**1280px (desktop):** full shell — side nav expanded, work region at working density,
+master-detail splits permitted inside the work region (see `master-detail-flow.md`).
+
+**768px (tablet):** the side nav collapses to `--shell-sidenav-w-collapsed` icon rail with
+labels on focus/hover; the work region keeps density. Two-region splits inside the work
+area become stacked or overlay presentations.
+
+**375px (mobile):** the shell inverts: top bar keeps the orientation line and a menu
+disclosure; primary destinations move to a bottom tab bar within thumb reach
+(`theory/ux.md` §Navigation — the frequent action must stay in the natural grip zone);
+tables recompose to list rows. The frequent action stays within the first viewport —
+sticky where the task demands it (e.g. a reply bar). Test 320px reflow: no horizontal
+scroll except intentionally two-dimensional data.
+
+```css
+@media (max-width: 760px) {
+  .app-shell {
+    grid-template-columns: 1fr;
+    grid-template-areas: "topbar" "work" "tabbar";
+  }
+  .shell-sidenav { display: none; }
+}
+```
+
+## Do not combine with
+
+**split-screen-hero.md / typographic-hero.md** — hero grammars claim the first viewport
+that belongs to the work object; combining them recreates the landing-page-on-a-tool
+defect this recipe exists to prevent.
+
+**bento-grid.md as the work region** — a bento mosaic imposes editorial hierarchy on
+peer work objects; a queue or table's hierarchy is in the data (sort order, status),
+not in cell sizes. Bento is permitted only for a genuine overview dashboard where
+metrics have real priority differences.
+
+**section-inversion.md inside the work region** — alternating section backgrounds is a
+scroll-narrative rhythm; a work surface has regions, not narrative sections.

package/core/composition/asymmetric-diagonal-grid.md

@@ -0,0 +1,178 @@
+# Asymmetric / diagonal grid
+
+> Candidate hypothesis only. Revalidate its condition, values, and responsive transition
+> against the current composition contract; do not transfer this page recipe unchanged.
+
+A grid where one or more elements break from the column structure — rotated, offset, or
+overlapping — to create tension and signal editorial intent. The effect reads as deliberate
+when the deviation is singular; a page full of diagonal elements is not tension, it is noise.
+
+`expressive.md` on this technique: "One diagonal or off-grid element is a decision; a page
+full of diagonal elements is entropy."
+
+## When it earns its place / When it does not
+
+Condition: the concept requires editorial tension — a sense that the content is not
+contained, that something is pressing against its frame. Agency portfolios, magazine-format
+editorial pages, brand campaign layouts with a provocative position. The asymmetry must
+follow from the concept's governing metaphor; a diagonal that does not correspond to a
+conceptual gesture is decoration at the scale of the layout.
+
+`core/theory/layout.md` — grid section: "Breaking the grid is only meaningful when the
+deviation is singular and intentional — a full-bleed image in an otherwise columned
+editorial layout announces itself as a break precisely because everything else held the
+column."
+
+Condition against: data-heavy layouts where scanability is the primary requirement.
+Tables, forms, pricing structures, documentation — any content the user reads in order or
+scans for a specific item. The asymmetric element interrupts the scan path without
+contributing information. `core/theory/layout.md` confirms: the F-pattern (text-heavy
+pages) depends on a stable left edge; an off-grid element that cuts across that edge
+disrupts the pattern.
+
+Also: avoid when the headline is already carrying heavy typographic weight. A typographic
+hero at 9rem and a diagonal element compete for the same attention budget.
+
+## Parameters
+
+```css
+:root {
+  /* The column structure underlying the layout.
+     An asymmetric grid is still a grid — the off-grid element breaks one rule
+     in a system where all others hold. Typical: 12 columns, 24px gutters. */
+  --grid-columns: 12;
+  --grid-gutter: clamp(16px, 2vw, 24px);
+  --grid-margin: clamp(16px, 5vw, 80px);
+
+  /* Rotation of the off-grid element.
+     Small angles (3–7°) read as intentional tilt.
+     Larger angles (15°+) read as a different object category.
+     Keep this value from the board's reference study — do not pick it arbitrarily. */
+  --diagonal-rotate: 4deg;
+
+  /* The off-grid element's column span and offset.
+     Extending beyond the grid margin by a fixed amount produces the overlap signal. */
+  --diagonal-bleed: 5vw;
+}
+```
+
+## Implementation
+
+```html
+<!-- The grid provides the structure. The .diagonal element breaks it deliberately.
+     All other content holds the column. -->
+<section class="asym-grid">
+  <div class="asym-grid__main">
+    <h2>Primary content holds the column.</h2>
+    <p>Body copy stays on the grid. The eye has a stable return point.</p>
+  </div>
+  <!-- This element is the single off-grid decision. -->
+  <div class="asym-grid__diagonal" aria-hidden="true">
+    <!-- Decorative content: a large number, a rotated label, a partial image. -->
+    <span class="diagonal-label">Editorial</span>
+  </div>
+</section>
+```
+
+```css
+.asym-grid {
+  display: grid;
+  grid-template-columns: repeat(var(--grid-columns), 1fr);
+  gap: var(--grid-gutter);
+  padding-inline: var(--grid-margin);
+  position: relative;
+  overflow: hidden; /* prevent bleed from creating horizontal scroll */
+}
+
+.asym-grid__main {
+  /* Main content occupies the left 7 columns. */
+  grid-column: 1 / 8;
+  /* Standard vertical rhythm — no transform applied to readable text. */
+}
+
+.asym-grid__diagonal {
+  /* Diagonal element: right side, overlapping main content zone. */
+  grid-column: 6 / 13;
+  /* Extend beyond the right margin */
+  margin-right: calc(-1 * var(--diagonal-bleed));
+  transform: rotate(var(--diagonal-rotate));
+  transform-origin: center left;
+  /* Decorative — sits behind or at same level as content depending on concept */
+  z-index: 0;
+  /* pointer-events off: the rotated element must not obstruct interactive elements */
+  pointer-events: none;
+  user-select: none;
+}
+
+.diagonal-label {
+  display: block;
+  font-size: clamp(4rem, 10vw, 8rem);
+  font-weight: var(--weight-display, 700);
+  opacity: 0.08; /* background element: presence without competition */
+  letter-spacing: -0.04em;
+  white-space: nowrap;
+}
+```
+
+## Responsive behavior
+
+**375px (mobile):** The 12-column grid collapses to a single column; the diagonal element
+moves out of the content flow. On narrow viewports the off-grid element is not the concept
+— it is a distraction from the content that must fit in a reduced space. Hide it entirely
+below 600px unless it carries essential meaning.
+
+```css
+@media (max-width: 600px) {
+  .asym-grid {
+    grid-template-columns: 1fr;
+    overflow: hidden;
+  }
+
+  .asym-grid__diagonal {
+    display: none; /* decorative element suppressed; content must stand without it */
+  }
+
+  .asym-grid__main {
+    grid-column: 1 / -1;
+  }
+}
+```
+
+**768px (tablet):** Reduce from 12 to 8 columns. The diagonal element may occupy the right
+4 columns; the main content the left 5. The rotation value stays constant — the angle
+should not change with viewport width, as it reads as a different decision at each size.
+
+```css
+@media (min-width: 601px) and (max-width: 1024px) {
+  .asym-grid {
+    grid-template-columns: repeat(8, 1fr);
+  }
+
+  .asym-grid__main {
+    grid-column: 1 / 6;
+  }
+
+  .asym-grid__diagonal {
+    grid-column: 4 / 9;
+    margin-right: calc(-1 * var(--diagonal-bleed));
+  }
+}
+```
+
+**1280px (desktop):** Full 12-column grid. The diagonal element's bleed beyond the margin
+is now reading as a deliberate overextension — the composition's tension point. Ensure the
+right edge of the diagonal element does not create horizontal scroll on the body; use
+`overflow: hidden` on the section.
+
+## Do not combine with
+
+**bento-grid.md** — both recipes alter grid structure at the layout level; two competing
+spatial systems in one section produce incoherence rather than tension.
+
+**editorial-index-labels.md** in the same section — both add large, low-opacity display
+elements in the peripheral field. Combined, they produce visual noise at the edges while
+the readable content fights for attention in the centre.
+
+**sticky-sidebar-scroll.md** — the sidebar annotation system depends on a stable spatial
+contract (main column + margin column); a diagonal element breaking that contract makes
+the annotation impossible to anchor correctly.