@teamblind-chorus/ui 1.2.0 → 2.0.0

package/eslint/rules.js

@@ -1,5 +1,5 @@
 // Custom ESLint rules that enforce Chorus design-system invariants in CONSUMER
-// code (the app a Lovable/AI agent generates against @teamblind-chorus/ui). These are
+// code (the app an AI agent generates against @teamblind-chorus/ui). These are
 // the deterministic backstop for the four "Chorus First" failure modes that
 // prose guardrails in LOVABLE.md cannot guarantee:
 //
@@ -237,7 +237,7 @@ export const rules = {
       docs: { description: 'Disallow Tailwind color utilities in className; color comes from Chorus tokens via styles.css, not utility classes.' },
       schema: [],
       messages: {
-        twColor: 'Tailwind color utility "{{ cls }}" — Chorus color comes from tokens, not utilities. Drop it; surfaces/text inherit from @teamblind-chorus/tokens. See anti-patterns.md.',
+        twColor: 'Tailwind color utility "{{ cls }}" — Chorus color comes from tokens, not utilities. Drop it; surfaces/text inherit from @teamblind-chorus/tokens.',
       },
     },
     create(context) {
@@ -266,7 +266,7 @@ export const rules = {
       docs: { description: 'Disallow raw <button>, and <a> used as an action; commits go through the @teamblind-chorus/ui Button family.' },
       schema: [],
       messages: {
-        rawButton: 'Raw <button> — use <Button> from @teamblind-chorus/ui (variant standard/text/icon/fab). See compose.md § CTAs.',
+        rawButton: 'Raw <button> — use <Button> from @teamblind-chorus/ui (variant standard/text/icon/fab).',
         anchorAsButton: '<a> used as an action (onClick / no href) — use <Button variant="text" appearance="accent"> from @teamblind-chorus/ui.',
       },
     },
@@ -302,7 +302,7 @@ export const rules = {
       docs: { description: 'Disallow off-scale numeric/px spacing, typography, and radius in inline style; values must resolve to sys.layout.* / sys.radius.* / sys.typo.* tokens.' },
       schema: [],
       messages: {
-        offScale: 'Off-scale "{{ prop }}: {{ value }}" — resolve to a Chorus token (e.g. var(--sys-layout-*), var(--sys-radius-*)). For typography use className="sys-typo-<role>-<rung>". See compose.md § raw → token map.',
+        offScale: 'Off-scale "{{ prop }}: {{ value }}" — resolve to a Chorus token (e.g. var(--sys-layout-*), var(--sys-radius-*)). For typography use className="sys-typo-<role>-<rung>".',
       },
     },
     create(context) {
@@ -347,7 +347,7 @@ export const rules = {
       schema: [],
       messages: {
         directPadding: '<{{ name }}> is full-bleed and owns its page-rail padding internally — drop the inline padding (paddingInline / padding / px-* / pl-* / pr-*) on it. A full-bleed child reaches its container edges; the gutter is paid once at the shell. See LOVABLE.md §★ Layout-Type & Padding Contract.',
-        wrappedInPadding: '<{{ name }}> (full-bleed) wrapped in a padded <{{ wrapper }}> — the page rail is double-paid, so section headings, list-row leading content, and feed author blocks land at different rails. Remove the wrapper\'s inline padding (the shell pays the gutter once), or — inside a bounded surface — apply the negative-margin opt-out on <{{ name }}>. See anti-patterns.md § Rail self-diagnostic.',
+        wrappedInPadding: '<{{ name }}> (full-bleed) wrapped in a padded <{{ wrapper }}> — the page rail is double-paid, so section headings, list-row leading content, and feed author blocks land at different rails. Remove the wrapper\'s inline padding (the shell pays the gutter once), or — inside a bounded surface — apply the negative-margin opt-out on <{{ name }}>.',
       },
     },
     create(context) {
@@ -426,8 +426,8 @@ export const rules = {
       docs: { description: 'Flag identity headers / meta rows hand-assembled from primitives (Thumbnail + heading, or a manual middot separator) — use the ProfileHeader / Metadata / List families instead of reinventing them.' },
       schema: [],
       messages: {
-        reinventedIdentity: 'Identity block hand-assembled from primitives (Thumbnail/Avatar + heading) — use a Chorus family: <ProfileHeader> for a profile/channel header, <Metadata> for a card-head author row, or <List variant="entry"> for an entity row. Resolve the exact usage in usage.json; never reinvent a family from token primitives. See anti-patterns.md §18.',
-        manualMetaSeparator: 'Hand-rolled "{{ sep }}" separator between meta spans — the <Metadata> family owns this row (name · subhandle · timestamp, middot-separated). Use <Metadata> instead of assembling it from spans. See anti-patterns.md §18.',
+        reinventedIdentity: 'Identity block hand-assembled from primitives (Thumbnail/Avatar + heading) — use a Chorus family: <ProfileHeader> for a profile/channel header, <Metadata> for a card-head author row, or <List variant="entry"> for an entity row. Resolve the exact usage in usage.json; never reinvent a family from token primitives.',
+        manualMetaSeparator: 'Hand-rolled "{{ sep }}" separator between meta spans — the <Metadata> family owns this row (name · subhandle · timestamp, middot-separated). Use <Metadata> instead of assembling it from spans.',
       },
     },
     create(context) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamblind-chorus/ui",
-  "version": "1.2.0",
+  "version": "2.0.0",
   "description": "Chorus React components. Ships prebuilt ESM + CJS bundles (`dist/`) and a single `styles.css`; import `@teamblind-chorus/tokens/tokens.css` + `@teamblind-chorus/ui/styles.css` once at the app entry. The contract every component honors lives in schema/components/<family>/<sub>.spec.json; see schema/manifest.json for the inventory.",
   "license": "MIT",
   "author": "Teamblind, Inc.",
@@ -54,7 +54,6 @@
     "./agents/usage.json": "./agents/usage.json",
     "./agents/DESIGN.md": "./agents/DESIGN.md",
     "./agents/LOVABLE.md": "./agents/LOVABLE.md",
-    "./agents/images.md": "./agents/images.md",
     "./agents/patterns/": "./agents/patterns/",
     "./agents/components/": "./agents/components/",
     "./placeholder.png": "./placeholder.png",
@@ -82,7 +81,7 @@
     "react-dom": ">=18"
   },
   "dependencies": {
-    "@teamblind-chorus/tokens": "^1.0.1"
+    "@teamblind-chorus/tokens": "^2.0.0"
   },
   "publishConfig": {
     "access": "public"

package/agents/anti-patterns.md

@@ -1,533 +0,0 @@
-# anti-patterns.md — common Lovable / agent failure modes
-
-A catalogue of the wrong-shaped output Chorus consumers most often produce, paired with the right-shaped fix. Each entry names the rule, the broken snippet, and the corrected one. **Read at least once before composing a new screen** — most agent violations come from these 18 recurring shapes. Pair with [`compose.md`](compose.md) and [`tokens.usage.json`](tokens.usage.json).
-
-When in doubt: if your output matches a "❌ wrong" snippet below, discard and regenerate.
-
----
-
-## 1. Brand red painted on the header chrome
-
-**Rule violated**: `tokens.usage.json#sys.color.brand.forbiddenComponents` — `navigation-bar/*`. Brand is an accent marker, never the title surface.
-
-```jsx
-// ❌ Wrong — header logotype/title painted with brand color
-<NavigationBar
-  variant="main"
-  title={<img src="/logo.svg" style={{ color: 'var(--sys-color-brand)' }} />}
-/>
-
-// ✅ Right — header chrome stays on `surface`; the wordmark paints `onSurface`
-<NavigationBar
-  variant="main"
-  title={<img src="/blind_logotype_black.svg" alt="Chorus" />}
-/>
-```
-
-Brand red is allowed on `button/fab`, `tab-bar/item--primary`, `badge`, `feed/post.like-active`, and promotional `banner` accents. **Nowhere else.** See [`tokens.usage.json#sys.color.brand`](tokens.usage.json).
-
----
-
-## 2. `border:` painted on a card / list-row / feed-item / banner
-
-**Rule violated**: DESIGN.md § Border & Stroke — *no-layout strokes*. Edge strokes are inset `box-shadow` (or `::after` overlay when the surface hosts a full-bleed child). A real `border:` reflows the box on state changes.
-
-```css
-/* ❌ Wrong — border reflows the card on hover / active state */
-.my-card {
-  border: 1px solid var(--sys-color-outlineVariant);
-  border-radius: var(--sys-radius-md);
-  padding: var(--sys-layout-container-md);
-}
-
-/* ✅ Right — inset box-shadow paints the stroke without contributing to layout */
-.my-card {
-  box-shadow: inset 0 0 0 var(--sys-borderWidth-hairline) var(--sys-color-outlineVariant);
-  border-radius: var(--sys-radius-md);
-  padding: var(--sys-layout-container-md);
-}
-
-/* ✅ Right (alt) — when the card hosts a full-bleed cover child, promote the
-   outline to a ::after overlay so it paints above the cover image */
-.my-card { position: relative; border-radius: var(--sys-radius-md); }
-.my-card::after {
-  content: ''; position: absolute; inset: 0; border-radius: inherit;
-  pointer-events: none; z-index: 2;
-  box-shadow: inset 0 0 0 var(--sys-borderWidth-hairline) var(--sys-color-outlineVariant);
-}
-```
-
----
-
-## 3. Page padding paid by the page shell *and* the child component
-
-**Rule violated**: `family.json#layoutInset: "full-bleed"` + LOVABLE.md §A.4 — *page inset is paid once at the shell*. The **full-bleed** families own their own gutter and must NEVER be wrapped in a `padding-inline` div, `className="px-*"`, or `style={{ padding }}`:
-
-`navigation-bar`, `tab-bar`, **`tabs`**, `carousel` (a.k.a. `Section`), `feed`, `list`, `nav-list`, `directory-list`, `suggestion-list`, `avatar-rail`, `profile-header`, `header` (both `<Header>` and `<SubHeader>`), `divider`.
-
-> **`Banner` and `NavCard` are `inline`, not full-bleed.** They're `width: 100%` cards whose *host* owns the horizontal inset (they don't pay their own gutter). Still never wrap them in a padded div — but place them as a direct child of the same parent the full-bleed siblings use, so all left edges share one rail.
-
-Tabs in particular trips up agents because its inner track LOOKS like it might need centering — it doesn't. Tabs pays its own inline padding internally; wrapping adds a second gutter and the underline indicator no longer aligns with the page rail.
-
-**A self-padded container insets its children — don't split content across levels.** A `Carousel` / `Section` adds its *own interior* `container.*` padding to whatever you nest inside it. So a row placed **inside** a Section sits further in than a sibling placed **directly in `<main>`** — their left edges won't line up. Pick one level for content-bearing rows: either nest them all under the same Section, or place them all direct in `<main>`. (This is the most common cause of "the card is inset but the list below it isn't.")
-
-```jsx
-// ❌ Wrong — page padding paid twice (shell px-4 + child wrapper px-4)
-<main className="px-4">
-  <div className="px-4">
-    <Tabs variant="underline" value={tab} onChange={setTab}>…</Tabs>
-  </div>
-  <div className="px-4">
-    <Section label="Top channels">…</Section>
-  </div>
-  <div style={{ padding: 16 }}>
-    <Feed items={…} />
-  </div>
-</main>
-
-// ✅ Right — shell pays padding-inline once, full-bleed children stretch
-<main style={{ paddingInline: 'var(--sys-layout-page-md)', display: 'flex', flexDirection: 'column', gap: 'var(--sys-layout-stack-lg)' }}>
-  <Tabs variant="underline" value={tab} onChange={setTab}>…</Tabs>
-  <Section label="Top channels">…</Section>
-  <Feed items={…} />
-</main>
-```
-
-**Mental check before JSX**: if the component is in the twelve-family list, the call is a *direct child* of `<main>`. No wrapper. If you feel the urge to add `padding` for "alignment", the page shell's `padding-inline` is what needs adjusting.
-
-After rendering, run the [§E rail self-diagnostic snippet](LOVABLE.md) — every full-bleed child should share the same `left` / `right` rail.
-
----
-
-## 4. List rendered as `<div>`s with raw borders
-
-**Rule violated**: AGENTS.md hard rule #5 + List family contract — list seam is the family's own `outlineVariant` divider; rows are the click target.
-
-```jsx
-// ❌ Wrong — DIY list with per-row border
-<div className="rounded-lg overflow-hidden border border-gray-200">
-  <div className="flex items-center gap-3 p-4 border-b border-gray-200">
-    <img src={c.logo} className="w-10 h-10 rounded-full" />
-    <span className="font-medium">{c.name}</span>
-  </div>
-  {/* ...more rows... */}
-</div>
-
-// ✅ Right — List with thumbnail variant
-<List
-  variant="thumbnail"
-  items={companies.map(c => ({
-    value: c.id,
-    label: c.name,
-    leading: <Thumbnail src={c.logo} alt={c.name} size={40} />,
-  }))}
-/>
-```
-
-The List family paints its own row dividers (`outlineVariant` hairline on the inset shadow), enforces row click semantics, and respects nesting / focus / state contracts.
-
----
-
-## 5. Chip / pill rendered with `radius < radius.full`
-
-**Rule violated**: `chip/*.spec.json#forbidden` — chip is always a fully-rounded pill.
-
-```jsx
-// ❌ Wrong — "chip" with 8px corner — visually a card
-<button className="rounded-lg bg-gray-100 px-3 py-1">Remote Only</button>
-
-// ✅ Right — Chip from @teamblind-chorus/ui
-<Chip variant="filter" selected={false}>Remote Only</Chip>
-```
-
-A 4-8px-rounded "chip" is a card with the wrong content type. Pick one component. Likewise a 999-rounded "card" reads as a chip.
-
----
-
-## 6. Brand red painted on more than three slots per screen
-
-**Rule violated**: `tokens.usage.json#sys.color.brand.maxInstancesPerScreen: 3`. Brand is a marker; too many instances dilute meaning.
-
-Canonical instances on a single screen:
-
-1. **Create entry on `tab-bar/item--primary`** — exactly 1.
-2. **Active-like state on Feed items** — ≤ 2.
-3. **Promotional banner accent** — 0–1 (optional).
-
-```jsx
-// ❌ Wrong — brand red painted on every CTA, HOT badge, save icon, header
-<NavigationBar title={<span style={{ color: 'var(--sys-color-brand)' }}>Blind</span>} />
-<button style={{ background: 'var(--sys-color-brand)' }}>Sign up</button>
-<Badge style={{ background: 'var(--sys-color-brand)' }}>HOT</Badge>
-<button style={{ background: 'var(--sys-color-brand)' }}>Save</button>
-<TabBar items={[{ label: 'Create', icon: <PlusIcon />, primary: true }, …]} />
-// 5 brand instances — caps at 3
-
-// ✅ Right — brand reserved for editorial markers; commits use primary
-<NavigationBar title={<img src="/blind_logotype_black.svg" alt="Chorus" />} />
-<Button>Sign up</Button>                              {/* primary commit */}
-<Badge appearance="hot">HOT</Badge>                   {/* HOT marker — brand */}
-<Button variant="text" appearance="accent">Save</Button>
-<TabBar items={[{ label: 'Create', icon: <PlusIcon />, primary: true }, …]}/>
-// brand instances: 1 (HOT badge) + 1 (Create tab) = 2 ≤ 3
-```
-
----
-
-## 7. Typography sized below 12px for visible copy
-
-**Rule violated**: [`compose.md`](compose.md) § Type ramp picker — the smallest rung for visible copy is `sys.typo.label.sm` (12px). Below breaks Korean / CJK hierarchy and accessibility minima.
-
-```jsx
-// ❌ Wrong — 11px meta line, 10px engagement count
-<span style={{ fontSize: 11 }}>익명 · 2시간 전</span>
-<span style={{ fontSize: 10 }}>2.1k views</span>
-
-// ✅ Right — meta on label.sm (12px), engagement on label.sm (12px)
-<span className="sys-typo-label-sm">익명 · 2시간 전</span>
-<span className="sys-typo-label-sm">2.1k views</span>
-```
-
-Agents commonly under-size compact text to "look denser." The 12px floor is the contract — take the next-larger rung when in doubt.
-
----
-
-## 8. Feed item missing the `thumbnail` slot
-
-**Rule violated**: `feed/post.spec.json#forbidden` — every feed post carries the thumbnail slot.
-
-```jsx
-// ❌ Wrong — feed item with no thumbnail
-<Feed items={[
-  { id: 1, title: '연봉협상 어떻게 하셨나요?', body: '...', meta: '익명 · 2시간 전' }
-]} />
-
-// ✅ Right — thumbnail slot filled (real subject if inferable, else placeholder)
-<Feed items={[
-  {
-    id: 1,
-    title: '연봉협상 어떻게 하셨나요?',
-    body: '...',
-    meta: '익명 · 2시간 전',
-    thumbnail: { src: '/placeholder.png', alt: '' }, // fallback when no subject
-  }
-]} />
-```
-
-Same rule for FeedAd media, ProfileCarousel cover, Thumbnail itself. When no context-appropriate image can be inferred, use `/placeholder.png` — never an icon-in-a-tinted-circle, empty `src`, or inline SVG wordmark.
-
----
-
-## 9. Banner painted with `brandContainer` as the default background
-
-**Rule violated**: [`compose.md`](compose.md) § Composition guard rails #6 — banner role decides fill. Informational → `primaryContainer`; promotional → `surfaceContainerLow`; error notice → `errorContainer`. `brandContainer` is reserved for explicit *promotional* tinted strips.
-
-```jsx
-// ❌ Wrong — informational banner painted with brand tint
-<Banner
-  style={{ background: 'var(--sys-color-brandContainer)' }}
-  title="이직, 더 똑똑하게"
-  body="블라인드 하이어"
-/>
-
-// ✅ Right — informational banner uses primaryContainer
-<Banner
-  variant="informational"
-  title="이직, 더 똑똑하게"
-  body="블라인드 하이어"
-/>
-```
-
-The Banner variant prop picks the fill. Don't inline-style the background.
-
----
-
-## 10. Surface stacked more than two tiers deep
-
-**Rule violated**: [`compose.md`](compose.md) § Composition guard rails #4 — surface tier cap is 2 per screen (`surface` + one `surface*Container` rung). A third nested tone reads as muddy.
-
-```jsx
-// ❌ Wrong — surface → surfaceContainerLow → surfaceContainerHigh → surfaceContainerHighest
-<main style={{ background: 'var(--sys-color-surface)' }}>
-  <section style={{ background: 'var(--sys-color-surfaceContainerLow)' }}>
-    <div style={{ background: 'var(--sys-color-surfaceContainerHigh)' }}>
-      <div style={{ background: 'var(--sys-color-surfaceContainerHighest)' }}>
-        {/* four nested surface tones — visually muddy */}
-      </div>
-    </div>
-  </section>
-</main>
-
-// ✅ Right — page surface + one container tier max; for additional grouping,
-//   promote the inner block to a different component family (Banner, Card, Section)
-<main style={{ background: 'var(--sys-color-surface)' }}>
-  <Section label="Today's top">
-    <Banner variant="informational">…</Banner>  {/* primaryContainer fill — different family */}
-    <Feed items={…} />                          {/* surface — same tier as page */}
-  </Section>
-</main>
-```
-
----
-
-## 11. CTA rendered as raw `<button>` / `<a>` with Tailwind
-
-**Rule violated**: AGENTS.md hard rule — all interactive commits go through `@teamblind-chorus/ui` button family.
-
-```jsx
-// ❌ Wrong — DIY button with Tailwind
-<button className="rounded-full bg-blue-500 text-white px-4 py-2">
-  See all
-</button>
-
-// ✅ Right — Button family by intent
-<Button variant="text" appearance="accent">See all</Button>
-```
-
-Link-affordance text (See all, Follow, View details) uses `Button variant="text" appearance="accent"`. Primary commits use `Button variant="standard"`. Icon-only commits use `Button variant="icon"`.
-
----
-
-## 12. FormField rendered as raw `<input>` + `<label>`
-
-**Rule violated**: `form-field/*.spec.json#forbidden` — FormField is `visualReuse: "locked"`. The contract is the focus / error / helper-text state machine.
-
-```jsx
-// ❌ Wrong — DIY input chrome
-<label>
-  Email
-  <input
-    type="email"
-    className="border rounded-lg px-3 py-2 focus:border-blue-500"
-  />
-</label>
-
-// ✅ Right — FormField with the search / input / select variant
-<FormField
-  variant="input"
-  label="Email"
-  type="email"
-  helperText="We never share your email."
-/>
-```
-
-Same rule for search input (`variant="search"`) and select (`variant="select"`).
-
----
-
-## 13. Image-area `<img src="/placeholder.png">` 404 in the consumer's public root
-
-**Rule violated**: [`LOVABLE.md`](LOVABLE.md) § A.0 — the bundled `placeholder.png` MUST be copied into the consumer app's `public/` once at setup.
-
-Every image-area scaffold (`<Thumbnail src="/placeholder.png">`, `<FeedAd media={{ src: '/placeholder.png' }}>`, `<ProfileCarousel items={[{ cover: { src: '/placeholder.png' } }]} />`, …) addresses a **root-relative URL**. Vite / Next / Remix serve from `public/` root; if the file is missing, the browser fetches `/placeholder.png` → 404 → paints a broken-image glyph **on top of** the CSS layer's data-URL background. The CSS fallback alone is not enough — the inline `<img>` is opaque over the background.
-
-**Diagnostic (run before composing):** DevTools → Network → refresh → look for 404 on `/placeholder.png`. Missing request entirely = scaffold didn't address an image slot (see #8); 404 = you skipped the §A.0 copy step.
-
-```bash
-# ❌ Wrong — package installed, scaffolds reference /placeholder.png, but consumer's public/ is empty.
-#    Result: every image-area slot paints a broken-image glyph over the CSS fallback.
-npm install @teamblind-chorus/ui @teamblind-chorus/tokens
-# (no copy step)
-
-# ✅ Right — one command after install, then every scaffold below resolves.
-npm install @teamblind-chorus/ui @teamblind-chorus/tokens
-cp node_modules/@teamblind-chorus/ui/placeholder.png public/
-```
-
-Do NOT work around with an invented stock URL, inline SVG wordmark, `display: none` on the `<img>`, or pointing every `src` at the CDN-hosted PNG — those break the §A.0 contract and the AGENTS.md "one universal placeholder" rule. The fix is the one-line `cp`; scaffolds stay as-shipped.
-
-**Placeholder is the honest default, not the finish line.** When the composition implies a clear, brand-safe subject (an anonymous avatar, a generic cover, a topic thumbnail), the right move is to *swap* the placeholder for a real subject image — see [`images.md`](images.md) for the generate-vs-placeholder decision tree. That sanctioned path (generate with your image tool → upload via your asset pipeline → store the URL in the data field) is a **self-hosted asset the app owns** and is explicitly NOT the forbidden "invented stock URL" above (an unowned, breakable link to someone else's image). Never synthesize a *real* company's logo or a real person's face — that's a placeholder + TODO, not a generation. And whatever stays on placeholder must be **reported** in the compose summary (`images.md` § handoff), never left silent so it reads as finished.
-
----
-
-## 14. Custom primitive built with raw numeric literals
-
-**Rule violated**: [LOVABLE.md](LOVABLE.md) §B.3 *New surfaces stay token-true* + §C *Token strictness*. This is the **most common token-axis drift** and the only one where the component decision is correct — going off-Chorus is allowed, going off-tokens is not.
-
-The cognitive trap: *"No Chorus family fits a hint card / inline annotation / small aside → I'll build a custom div. Since I'm off-Chorus anyway, a few raw values (`fontSize: 13`, `padding: '10px 12px'`, `gap: 6`) are fine."* They are not. Composition went custom; values stayed bound. **Component flexible, tokens never** — with no Chorus spec denying you, every literal is a deliberate choice that's either a token resolution or a violation.
-
-```jsx
-// ❌ Wrong — correct call to go custom, but every value is a raw literal
-<div
-  style={{
-    display: "flex",
-    flexDirection: "column",
-    gap: 6,
-    padding: "10px 12px",
-    borderRadius: 6,
-    background: "var(--sys-color-surfaceContainerLow)", // color happens to be a token…
-  }}
->
-  <span style={{ fontSize: 13, lineHeight: 1.4 }}>익명 힌트</span>
-  <span style={{ fontSize: 14, fontWeight: 600 }}>제목</span>
-</div>
-// gap 6, padding 10/12, radius 6, fontSize 13/14, lineHeight 1.4 — five literals,
-// five violations. "I used the color token" is not a partial pass.
-
-// ✅ Right — composition still custom; every axis resolves through a token
-<div
-  style={{
-    display: "flex",
-    flexDirection: "column",
-    gap: "var(--sys-layout-inline-xs)",          // 4 — was `gap: 6`
-    padding: "var(--sys-layout-container-xs) var(--sys-layout-container-sm)", // 8 12 — was `10px 12px`
-    borderRadius: "var(--sys-radius-sm)",        // 4 — was `borderRadius: 6`
-    background: "var(--sys-color-surfaceContainerLow)",
-  }}
->
-  <span className="sys-typo-body-md">익명 힌트</span>
-  {/* the utility class bundles family + size + weight + line + tracking — never set lineHeight separately */}
-  <span className="sys-typo-label-lg">제목</span>
-</div>
-```
-
-**Off-scale = pick the next ladder rung, NOT halfway.** 13px is forbidden; 12 or 14 are tokens. 6px gap is forbidden; 4 or 8 are tokens. If no token feels right, that's a Chorus gap report ("`spacing.inline.xs` reads too tight, `inline.sm` too loose for this slot — proposing a new rung") — not a license to invent. See the full raw → token map in [compose.md § When you go custom](compose.md).
-
-Side note: this entry catches the values. Whether you should have gone custom at all is a separate question — the visual-reuse table in [LOVABLE.md §C](LOVABLE.md) covers the `"open"` families that you can borrow on visual-fit grounds (`<Feed>` as a generic article-card surface, `<Section>` as any labelled block). Reach for that first; #14 only fires after you've genuinely exhausted the LEGO ladder.
-
----
-
-## 15. Tabs (or any compound family) given bare text children
-
-**Rule violated**: `tabs/*.spec.json` — Tabs is a compound component. Every label MUST be a `<Tab value=…>` child. Bare text / string children render as one run-together, unstyled text line: no tab buttons, no selected state, no sliding indicator (the `.chorus-tab` / `.chorus-tab__label` rules have nothing to match).
-
-```jsx
-// ❌ Wrong — labels as bare text; the whole row collapses to run-together text
-<Tabs variant="underline" value={tab} onChange={setTab}>
-  직무 탐색
-  준비 시작
-  면접 대비
-  회사 선택
-</Tabs>
-
-// ✅ Right — each label wrapped in its <Tab value=…> element
-<Tabs variant="underline" value={tab} onChange={setTab}>
-  <Tab value="explore">직무 탐색</Tab>
-  <Tab value="prepare">준비 시작</Tab>
-  <Tab value="interview">면접 대비</Tab>
-  <Tab value="company">회사 선택</Tab>
-</Tabs>
-```
-
-`<Tabs>` only lays out the track and animates the indicator; the per-tab `<button>`, label span, selected state, and click target all live in `<Tab>`. The same compound-child contract holds for every family whose `spec.json` names a required item element — **read the spec; if it lists a child element or an `items` array, bare text is a violation.** (`List`/`SuggestionList`/`AvatarRail` take an `items` descriptor array, not text children.)
-
----
-
-## 16. Floating action built as a positioned `standard` Button
-
-**Rule violated**: [`catalog.md`](catalog.md) "canonical floating commit → `button / fab`" + LOVABLE.md §C. A floating primary action is `<Button variant="fab">`, **never** a `standard` / `text` Button bolted into place with `position: fixed` / `absolute`.
-
-```jsx
-// ❌ Wrong — standard Button manually floated bottom-right
-<Button
-  variant="standard"
-  appearance="primary"
-  style={{ position: 'fixed', right: 16, bottom: 16 }}
-  leadingIcon={<EditIcon />}
->
-  글쓰기
-</Button>
-
-// ✅ Right — FAB owns the floating geometry, elevation, brand fill, and safe-area offset
-<Button variant="fab" appearance="primary" icon={<EditIcon />}>
-  글쓰기
-</Button>
-```
-
-"Floating" is a component **role** in Chorus, not a CSS position you attach to a standard Button. The FAB carries the pill geometry, floating elevation, the brand-allowlisted fill, and the bottom / safe-area offset — none of which a positioned `standard` Button gets. The **extended** form (icon + label, as shown) is supported: pass both `icon` and children. Icon-only drops the children. ≤ 1 FAB per screen.
-
----
-
-## 17. Full-bleed component wrapped in a padded `<div>` or an external `<Link>`
-
-**Rule violated**: family `layoutInset="full-bleed"` + `feed/post.spec.json` § forbidden. `Feed`, `Section` / `Carousel`, `NavigationBar`, `TabBar`, `Tabs`, the `*List` families — they **own their page-rail inline padding internally** and reach their container's edges. Two habits break this:
-
-```jsx
-// ❌ Wrong — extra padding wrapper double-pays the page rail
-<div style={{ paddingInline: 'var(--sys-layout-page-md)' }}>
-  <Feed {...post} />
-</div>
-// ❌ Wrong — external <Link> to make the card navigable adds a gutter AND
-//    nests the card's own anchors (channel link / citation / mention)
-<Link href={`/post/${post.id}`}>
-  <Feed {...post} />
-</Link>
-
-// ✅ Right — full-bleed sits directly in the zero-padding shell…
-<main>
-  <Feed {...post} onClick={() => router.push(`/post/${post.id}`)} />
-</main>
-```
-
-The rail is paid **once** — at the page shell for inline content, and internally by each full-bleed component. A wrapper that re-adds `padding-inline` (a `<div>`, `className="px-*"`, or `style={{ padding }}`) means section headings, list-row leading content, and feed author blocks land at **different left rails** — the misalignment the runtime `useFullBleedGuard` warns about. To navigate, use the component's **own** `onClick` (Feed and the Carousel cards expose it) — never an outer `<Link>`/`<a>`, which both re-pays the gutter and nests interactive elements. Inside a bounded surface (Dialog / BottomSheet / Card) where the host legitimately pads, opt the child out with the negative-margin idiom (`marginInline: calc(-1 * var(--sys-layout-container-md))`), don't strip the host.
-
----
-
-## 18. Reinventing a family by assembling token primitives
-
-**Rule violated**: LOVABLE.md "compose from families, never reinvent" + DESIGN.md "never reinvent a family with primitives". The drift: hand-building an identity header, an author meta row, or an action row out of `<Thumbnail>` + `<h1>` + `<p>` + `<Button>` in a flex, when a family already owns that exact anatomy. **Tokens being correct does not make it Chorus** — a primitive cluster that matches a family's shape IS that family, and must be the family.
-
-```jsx
-// ❌ Wrong — a channel/profile identity header reinvented from primitives
-<header style={{ display: 'flex', gap: '...' }}>
-  <Thumbnail src={ch.avatar} />
-  <div>
-    <h1 className="sys-typo-title-md">{ch.name}</h1>
-    <p className="sys-typo-label-sm">공개 · 팔로우 {ch.followers}</p>
-  </div>
-  <Button variant="standard">언팔로우</Button>
-</header>
-// ❌ Wrong — author line with a hand-rolled middot separator
-<div className="flex">
-  <span>{handle}</span> · <span>{sub}</span> · <span>{time}</span>
-</div>
-
-// ✅ Right — the families that own these anatomies
-<ProfileHeader name={ch.name} avatar={ch.avatar} meta="공개 · 팔로우 4,218"
-  trailing={<Button variant="text">언팔로우</Button>} />
-<Metadata name={handle} subhandle={sub} timestamp={time} />
-```
-
-The catalog maps these by intent: profile/channel identity header → `profile-header`; author attribution at a card head → `metadata`; an entity/action row → `list / entry` (an `items` array, **not** a `<ListItem>`); a labelled chip row → `chip` (or `tabs` with `<Tab>` children). **The trigger for this drift is a translation miss, not a missing component**: an `import { Fab }` (or `import { ListItem }`) fails because that access pattern is wrong — Fab is `<Button variant="fab">`, list rows are an `items` array — and the agent over-generalizes "the family is missing at runtime" into "the catalog can't be trusted," then escapes to primitives. **One import miss never licenses primitive assembly for any other component.** Resolve the family in [`usage.json`](usage.json) (the parity-checked family→usage map — it confirms the export exists and spells out named-import vs `variant=` vs `items=` access), then use the family. If a family genuinely looks unexported, that's a build-failing parity bug to report — not a cue to reinvent.
-
----
-
-## When you spot one of these
-
-1. Stop composing.
-2. Re-read the rule cited in the entry.
-3. Discard the offending block and regenerate from the right-side snippet.
-4. Run the LOVABLE.md §E pre-flight checklist + §E rail self-diagnostic.
-
-A violation surviving both passes is a Chorus gap report, not a permission slip — flag in one line and stop.
-
----
-
-## Rail self-diagnostic
-
-Visual alignment contracts are checkable. After rendering, paste this into the dev-preview browser console — it measures every full-bleed child's actual left/right edge and fails loudly if they disagree by >1px. Run it with `<Dialog>` / `<BottomSheet>` open *and* closed (full-bleed children inside a surface must share the surface's inner rail). **Misalignment → discard + regenerate.** Cited by [LOVABLE.md](LOVABLE.md) § Layout-Type & Padding Contract and § E pre-flight.
-
-```js
-(() => {
-  const sels = [
-    '.chorus-navigation-bar', '.chorus-tab-bar', '.chorus-tabs',
-    '.chorus-carousel', '.chorus-feed', '.chorus-feed-ad',
-    '.chorus-list', '.chorus-suggestion-list', '.chorus-directory-list',
-    '.chorus-nav-list', '.chorus-avatar-rail',
-  ];
-  const rows = sels.flatMap(sel =>
-    [...document.querySelectorAll(sel)].map(el => {
-      const r = el.getBoundingClientRect();
-      return { sel, left: Math.round(r.left), right: Math.round(window.innerWidth - r.right) };
-    })
-  );
-  if (!rows.length) { console.log('No full-bleed children on this page.'); return; }
-  const L = new Set(rows.map(r => r.left)), R = new Set(rows.map(r => r.right));
-  console.table(rows);
-  if (L.size > 1 || R.size > 1) {
-    console.error(`❌ Rail misalignment — left: [${[...L].join(', ')}], right: [${[...R].join(', ')}]. Every full-bleed child should share one rail. Fix per LOVABLE.md § Layout-Type & Padding Contract.`);
-  } else {
-    console.log(`✅ Rail aligned — left=${[...L][0]}px, right=${[...R][0]}px.`);
-  }
-})();
-```