@mindlogic-ai/logician-ui 5.0.0-alpha.3 → 5.0.0-alpha.4

package/src/components/Checkbox/Checkbox.usage.mdx

@@ -0,0 +1,214 @@
+import { ArgTypes, Canvas, Meta } from '@storybook/blocks';
+
+import { En, Ko, LangToggle, Verdict } from '../../guidelines/_components/Lang';
+import * as CheckboxStories from './Checkbox.stories';
+
+<Meta of={CheckboxStories} name="Usage" />
+
+<LangToggle />
+
+<En>
+
+# Checkbox
+
+A box the user ticks to include an item or agree to something. Each checkbox
+is independent of the others.
+
+## When to use
+
+- Picking any number of items from a short list: notification channels,
+  table rows, members to invite.
+- A single yes/no that takes effect when the form is submitted: agreeing to
+  terms, "include subgroups".
+- A "select all" row over a list, with `indeterminate` when only some are
+  ticked.
+
+## When not to use
+
+- Exactly one option out of several → `Radio`, or `SelectField` for a long
+  list.
+- A setting that reads as on or off, such as a feature toggle in a settings
+  row → `Switch`.
+- An action that runs as soon as it is clicked → `Button`.
+
+## Props
+
+</En>
+
+<Ko>
+
+# Checkbox
+
+항목을 포함하거나 무언가에 동의할 때 표시하는 상자입니다. 체크박스는 서로 영향을
+주지 않습니다.
+
+## 언제 쓰나요
+
+- 짧은 목록에서 원하는 만큼 고를 때: 알림 받을 곳, 표의 행, 초대할 멤버.
+- 폼을 제출할 때 반영되는 예/아니요 하나: 약관 동의, "하위 그룹 포함".
+- 목록 위의 "전체 선택" 행. 일부만 선택됐다면 `indeterminate`를 씁니다.
+
+## 언제 쓰지 않나요
+
+- 여러 선택지 중 하나만 고른다면 `Radio`를, 목록이 길면 `SelectField`를 씁니다.
+- 설정 목록의 기능 켜기처럼 켜짐과 꺼짐으로 읽히는 설정은 `Switch`를 씁니다.
+- 누르자마자 실행되는 동작은 `Button`을 씁니다.
+
+## 속성
+
+</Ko>
+
+<ArgTypes
+  of={CheckboxStories}
+  include={[
+    'checked',
+    'defaultChecked',
+    'onCheckedChange',
+    'disabled',
+    'invalid',
+    'size',
+    'inputRef',
+  ]}
+/>
+
+<En>
+
+Compose it from parts: `<Checkbox>` (the root, rendered as a `<label>`),
+`<Checkbox.Control />` (the box) and `<Checkbox.Label>`. Clicking the label
+toggles the box. `checked` takes `true`, `false` or `'indeterminate'`; `size`
+defaults to `sm`. The tick is drawn on after the box fills, and both happen at
+once when the user prefers reduced motion.
+
+## Do / Don't
+
+</En>
+
+<Ko>
+
+부품을 조합해서 씁니다. `<Checkbox>`(루트, `<label>`로 그려짐), `<Checkbox.Control />`
+(상자), `<Checkbox.Label>`입니다. 라벨을 눌러도 상자가 바뀝니다. `checked`에는
+`true`, `false`, `'indeterminate'`를 넘기고, `size` 기본값은 `sm`입니다. 상자가 채워진
+뒤 체크 표시가 그려지며, 사용자가 동작 줄이기를 설정했다면 한 번에 나타납니다.
+
+## 이렇게 하세요 / 이렇게 하지 마세요
+
+</Ko>
+
+<Canvas of={CheckboxStories.DoLabelledList} />
+<Verdict
+  kind="do"
+  en="Stack independent choices under a short heading, one per line, label to the right of the box."
+  ko="서로 상관없는 선택지는 짧은 제목 아래 한 줄에 하나씩, 상자 오른쪽에 라벨을 두고 쌓습니다."
+/>
+
+<Canvas of={CheckboxStories.DoSelectAll} />
+<Verdict
+  kind="do"
+  en="Use indeterminate on the parent when only some children are ticked. Clicking it ticks or clears them all."
+  ko="하위 항목이 일부만 선택됐다면 상위 상자를 indeterminate로 둡니다. 상위 상자를 누르면 전부 선택하거나 전부 해제합니다."
+/>
+
+<Canvas of={CheckboxStories.DontNegativeLabel} />
+<Verdict
+  kind="dont"
+  en="Write the label as a negative. Ticking 'Don't send' makes the reader undo a double negative to know what they chose."
+  ko="라벨을 부정문으로 쓰지 마세요. '받지 않기'에 표시하면 이중 부정을 풀어야 무엇을 골랐는지 압니다."
+/>
+
+<Canvas of={CheckboxStories.DoHiddenLabelInTable} />
+<Verdict
+  kind="do"
+  en="When the row already shows what the box selects, keep a Checkbox.Label with srOnly so the box still has a name."
+  ko="무엇을 고르는지 행에 이미 보인다면 Checkbox.Label에 srOnly를 주어, 보이지 않아도 상자에 이름이 남게 합니다."
+/>
+
+<En>
+
+## Content
+
+- Phrase the label so that ticking it means yes: 마케팅 메일 받기, not 마케팅
+  메일 받지 않기.
+- Keep labels short and parallel. If one needs explaining, put the
+  explanation in a second, muted line inside the label.
+- A heading over a group says what the choices are about (알림 받을 곳).
+
+## Accessibility
+
+What Checkbox does for you:
+
+- A native checkbox input sits inside the root, so Tab focuses it and Space
+  toggles it. The whole label is the click target.
+- The keyboard focus ring (`focus.ring` on a `bg.canvas` gap) shows on the box
+  (WCAG 2.4.7). The unchecked border uses `border.control`, built for 3:1
+  against the page (WCAG 1.4.11).
+- Checked and indeterminate are drawn with a mark as well as a fill, so the
+  state does not rely on colour alone (WCAG 1.4.1).
+
+What you still have to do:
+
+- **Always render `Checkbox.Label`**, with `srOnly` when it should not show.
+  Without it the box has no name (WCAG 4.1.2; KWCAG 5.3.4.1 레이블 제공).
+- Give a group of checkboxes a visible heading so it is clear what the choices
+  are about (WCAG 1.3.1).
+- If a choice is required (agreeing to terms), say so in the label or helper
+  text and show an error in words when it is missing (WCAG 3.3.1).
+
+## Tokens
+
+</En>
+
+<Ko>
+
+## 문구
+
+- 표시하면 "예"가 되도록 씁니다. "마케팅 메일 받지 않기"가 아니라 "마케팅 메일
+  받기"입니다.
+- 라벨은 짧고 같은 형식으로 씁니다. 설명이 필요하면 라벨 안에 흐린 글자로 한 줄을 더
+  둡니다.
+- 묶음 위의 제목은 무엇에 관한 선택인지 알려 줍니다(알림 받을 곳).
+
+## 접근성
+
+Checkbox가 알아서 하는 일
+
+- 루트 안에 네이티브 체크박스가 있어서 Tab으로 초점을 옮기고 Space로 바꿀 수
+  있습니다. 라벨 전체를 눌러도 됩니다.
+- 키보드 초점 링(`bg.canvas` 간격 위의 `focus.ring`)이 상자에 보입니다(WCAG 2.4.7).
+  선택 전 테두리는 배경과 3:1이 되도록 만든 `border.control`을 씁니다(WCAG 1.4.11).
+- 선택과 일부 선택 상태는 채움과 함께 표시로도 그려지므로 색에만 기대지 않습니다
+  (WCAG 1.4.1).
+
+직접 챙겨야 하는 일
+
+- **`Checkbox.Label`을 항상 그립니다.** 보이지 않아야 한다면 `srOnly`를 줍니다.
+  라벨이 없으면 상자에 이름이 없습니다(WCAG 4.1.2, KWCAG 5.3.4.1 레이블 제공).
+- 체크박스 묶음에는 보이는 제목을 두어 무엇에 관한 선택인지 알 수 있게 합니다(WCAG
+  1.3.1).
+- 약관 동의처럼 꼭 선택해야 한다면 라벨이나 도움말에 그렇게 적고, 빠졌을 때는 문구로
+  오류를 알립니다(WCAG 3.3.1).
+
+## 토큰
+
+</Ko>
+
+<Canvas of={CheckboxStories.UsageTokens} sourceState="none" />
+
+<En>
+
+## Related
+
+- **Radio**: one option out of several.
+- **Switch**: a setting that is on or off.
+- **Table**: row selection.
+
+</En>
+
+<Ko>
+
+## 관련 컴포넌트
+
+- **Radio**: 여러 선택지 중 하나.
+- **Switch**: 켜짐과 꺼짐으로 읽히는 설정.
+- **Table**: 행 선택.
+
+</Ko>

package/src/components/Chip/Chip.usage.mdx

@@ -0,0 +1,78 @@
+import { Canvas, Meta } from '@storybook/blocks';
+
+import { En, Ko, LangToggle } from '../../guidelines/_components/Lang';
+import * as ChipStories from './Chip.stories';
+
+<Meta of={ChipStories} name="Usage" />
+
+<LangToggle />
+
+<En>
+
+# Chip (deprecated)
+
+**Use `Tag`.** Since 5.0 `Chip` is a thin alias of `Tag` and it is removed in
+6.0. It still renders so that unmigrated screens do not break, keeps the 4.x
+pill shape so they do not shift, and warns once per `colorScheme` × `variant`
+pair in development.
+
+Everything about when and how to use it is on **Components/Tag/Usage**.
+
+## Migrating
+
+| 4.x `colorScheme` | 4.x `variant` | Renders as | Write instead |
+| --- | --- | --- | --- |
+| `primary` (default), `secondary`, `neutral` | `soft` (default) or `outline` | neutral | `<Tag>` |
+| `primary`, `secondary`, `neutral` | `solid` | the selected look | `<Tag as="button" selected={…}>` for a filter chip |
+| `danger`, `success`, `warning` | `soft` | that tone | `<Tag tone="…">`, or `Badge` if it is a status |
+| `danger`, `success`, `warning` | `solid` | that tone (5.0 has no solid status fill) | Choose by hand |
+| `danger`, `success`, `warning` | `outline` | neutral | Choose by hand |
+
+"Choose by hand" pairs say so in the dev warning. A `solid` Chip gets the
+selected *look* only: it does not become a toggle and has no `aria-pressed`
+unless you pass `selected` yourself.
+
+Two things change when you swap `Chip` for `Tag`:
+
+- **Shape.** Tag uses the `md` radius and tighter padding. Chip's 32px pill
+  exists only for unmigrated screens.
+- **Interactivity.** If the chip was clickable, render the Tag `as="button"`
+  so it is keyboard-operable (WCAG 2.1.1).
+
+</En>
+
+<Ko>
+
+# Chip (지원 중단)
+
+**`Tag`를 씁니다.** 5.0부터 `Chip`은 `Tag`의 얇은 별칭이며 6.0에서 사라집니다.
+아직 옮기지 않은 화면이 깨지지 않도록 계속 그려지고, 화면이 밀리지 않도록 4.x의
+알약 모양을 유지하며, 개발 환경에서 `colorScheme` × `variant` 조합마다 한 번씩 경고를
+냅니다.
+
+언제, 어떻게 쓰는지는 모두 **Components/Tag/Usage**에 있습니다.
+
+## 옮기는 방법
+
+| 4.x `colorScheme` | 4.x `variant` | 지금 그려지는 모양 | 바꿔 쓸 코드 |
+| --- | --- | --- | --- |
+| `primary`(기본), `secondary`, `neutral` | `soft`(기본) 또는 `outline` | neutral | `<Tag>` |
+| `primary`, `secondary`, `neutral` | `solid` | 선택된 모양 | 필터 칩이라면 `<Tag as="button" selected={…}>` |
+| `danger`, `success`, `warning` | `soft` | 해당 tone | `<Tag tone="…">`, 상태라면 `Badge` |
+| `danger`, `success`, `warning` | `solid` | 해당 tone(5.0에는 진한 상태 바탕이 없음) | 직접 고릅니다 |
+| `danger`, `success`, `warning` | `outline` | neutral | 직접 고릅니다 |
+
+"직접 고릅니다"에 해당하는 조합은 개발 경고에도 그렇게 나옵니다. `solid` Chip은
+선택된 *모양*만 얻습니다. `selected`를 직접 넘기지 않는 한 토글이 되지 않고
+`aria-pressed`도 붙지 않습니다.
+
+`Chip`을 `Tag`로 바꾸면 두 가지가 달라집니다.
+
+- **모양.** Tag는 `md` 모서리와 더 좁은 여백을 씁니다. Chip의 32px 알약 모양은 아직
+  옮기지 않은 화면을 위해서만 남아 있습니다.
+- **누를 수 있는지.** 누를 수 있던 칩이라면 Tag를 `as="button"`으로 그려야 키보드로도
+  쓸 수 있습니다(WCAG 2.1.1).
+
+</Ko>
+
+<Canvas of={ChipStories.LegacyMapping} />

package/src/components/Code/Code.stories.tsx

@@ -1,5 +1,8 @@
 import { Meta, StoryObj } from '@storybook/react';
 
+import { T } from '../../guidelines/_components/Lang';
+import { TokenTable } from '../../guidelines/_components/TokenTable';
+import { Text } from '../Typography';
 import { Code } from './Code';
 import { BUNDLED_LANGUAGES } from './shikiAdapter';
 
@@ -211,3 +214,60 @@ export const CustomContainer: Story = {
 };`,
   },
 };
+
+// ───────────────────────── Usage-page specimens ─────────────────────────
+// Pulled into `Code.usage.mdx` with <Canvas of={…} />. Hidden from the
+// sidebar (`!dev`); `tags` is written out on each story because the indexer
+// reads CSF statically.
+
+export const DoLanguageAndCopy: Story = {
+  tags: ['!dev'],
+  parameters: { layout: 'padded' },
+  name: 'Usage / Do: a language and a copy button for a snippet',
+  args: {
+    language: 'bash',
+    onCopy: () => {},
+    children: `curl https://api.example.com/v1/chat/completions \\
+  -H "Authorization: Bearer $API_KEY" \\
+  -d '{"model": "gpt-4o", "messages": [{"role": "user", "content": "안녕"}]}'`,
+  },
+};
+
+export const DontBlockForIdentifier: Story = {
+  tags: ['!dev'],
+  parameters: { layout: 'padded' },
+  name: "Usage / Don't: a block for one word in a sentence",
+  render: () => (
+    <>
+      <Text mb={2}>요청 본문의 모델 이름 칸에는</Text>
+      <Code>model</Code>
+      <Text mt={2}>을 넣습니다.</Text>
+    </>
+  ),
+};
+
+export const UsageTokens: Story = {
+  tags: ['!dev'],
+  parameters: { layout: 'padded' },
+  name: 'Usage / Tokens',
+  render: () => (
+    <TokenTable
+      rows={[
+        { token: 'border.default', use: <T en="Border" ko="테두리" /> },
+        {
+          token: 'bg.surface',
+          use: <T en="Header background" ko="머리 영역 배경" />,
+        },
+        {
+          token: 'fg.default',
+          use: <T en="Language title" ko="언어 이름" />,
+        },
+        { token: 'fg.muted', use: <T en="Copy icon" ko="복사 아이콘" /> },
+        {
+          token: 'success.fg',
+          use: <T en="Copied check" ko="복사 완료 표시" />,
+        },
+      ]}
+    />
+  ),
+};

package/src/components/Code/Code.usage.mdx

@@ -0,0 +1,187 @@
+import { Canvas, Meta } from '@storybook/blocks';
+
+import { En, Ko, LangToggle, Verdict } from '../../guidelines/_components/Lang';
+import * as CodeStories from './Code.stories';
+
+<Meta of={CodeStories} name="Usage" />
+
+<LangToggle />
+
+<En>
+
+# Code
+
+A syntax-highlighted block of code (Shiki, `github-dark` token colours) with
+an optional language header and copy button. `Markdown` uses it for fenced
+code blocks.
+
+## When to use
+
+- A snippet the reader reads or copies: an API request, a config file, raw
+  JSON from an audit event.
+- More than one line, or a line too long to sit inside a sentence.
+
+## When not to use
+
+- A name or value inside a sentence → `InlineCode`.
+- A single line the user only needs to copy (an endpoint, a key) →
+  `CopyableCode`.
+- The same example in several languages → `CodeTabs`.
+
+## Options
+
+| Prop | Means |
+| --- | --- |
+| `language` | Highlighting language (`js` is read as `javascript`). With a language, the header shows its name. |
+| `onCopy` | Turns the copy button on. The component writes to the clipboard; `onCopy` receives the copied text for side effects. |
+| `hideHeader` | No header. If `onCopy` is set, the copy button floats in the top-right corner with a 복사 / 복사 완료 tooltip. |
+| `showLineNumbers` | Line numbers in the gutter. |
+| `containerProps` | Props for the CodeBlock root (margins, `maxH`, `className`). |
+
+Without `language`, there is no header, and without `onCopy`, no copy button.
+
+## Do / Don't
+
+</En>
+
+<Ko>
+
+# Code
+
+문법 강조(Shiki, `github-dark` 색)가 적용된 코드 블록입니다. 언어 이름이 있는 머리
+영역과 복사 버튼을 켤 수 있습니다. `Markdown`의 코드 블록도 이 컴포넌트로 그립니다.
+
+## 언제 쓰나요
+
+- 읽거나 복사할 코드 조각: API 요청, 설정 파일, 감사 로그 이벤트의 원본 JSON.
+- 두 줄 이상이거나, 문장 안에 넣기에는 너무 긴 한 줄.
+
+## 언제 쓰지 않나요
+
+- 문장 안의 이름이나 값은 `InlineCode`를 씁니다.
+- 복사만 하면 되는 한 줄(엔드포인트, 키)은 `CopyableCode`를 씁니다.
+- 같은 예제를 여러 언어로 보여 준다면 `CodeTabs`를 씁니다.
+
+## 옵션
+
+| 속성 | 뜻 |
+| --- | --- |
+| `language` | 강조할 언어(`js`는 `javascript`로 읽음). 언어를 주면 머리 영역에 언어 이름이 나옵니다. |
+| `onCopy` | 복사 버튼을 켭니다. 클립보드에는 컴포넌트가 직접 쓰고, `onCopy`는 복사한 글을 받아 부가 작업에 씁니다. |
+| `hideHeader` | 머리 영역을 숨깁니다. `onCopy`가 있으면 복사 버튼이 오른쪽 위에 떠 있고 '복사' / '복사 완료' 툴팁이 붙습니다. |
+| `showLineNumbers` | 줄 번호를 보여 줍니다. |
+| `containerProps` | CodeBlock 루트에 넘길 속성(여백, `maxH`, `className`). |
+
+`language`가 없으면 머리 영역이 없고, `onCopy`가 없으면 복사 버튼도 없습니다.
+
+## 이렇게 하세요 / 이렇게 하지 마세요
+
+</Ko>
+
+<Canvas of={CodeStories.DoLanguageAndCopy} />
+<Verdict
+  kind="do"
+  en="Set the language and turn on copy for anything the reader will paste into a terminal or file."
+  ko="터미널이나 파일에 붙여 넣을 코드에는 언어를 지정하고 복사 버튼을 켭니다."
+/>
+
+<Canvas of={CodeStories.DontBlockForIdentifier} />
+<Verdict
+  kind="dont"
+  en="Break a sentence with a block for one word. Use InlineCode inside the sentence."
+  ko="한 단어 때문에 블록으로 문장을 끊지 마세요. 문장 안에 InlineCode를 씁니다."
+/>
+
+<En>
+
+## Content
+
+- Show code that runs as pasted. Mark placeholders clearly (`$API_KEY`,
+  `<chatbot_id>`) and never show a real secret.
+- Keep examples short; link to full documentation for the rest.
+- Explain the code in the text around it, not in long comments inside it.
+
+## Accessibility
+
+What Code does for you:
+
+- The code is text, so it can be selected, copied and read by a screen
+  reader.
+- The copy buttons are real buttons with names. The floating copy button
+  takes its name from the translated 복사 / 복사 완료 and has a focus ring
+  (WCAG 4.1.2, 2.4.7).
+
+What you still have to do:
+
+- The header copy button's name is the fixed English "Copy code". In a
+  Korean screen, consider `hideHeader` with `onCopy` (translated name), or
+  note it for a follow-up fix.
+- Introduce the block in the text before it, so a screen reader user knows
+  what the code is for (WCAG 1.3.1).
+- A long line scrolls sideways inside the block. Keep it readable at 320px
+  width by breaking long commands (WCAG 1.4.10).
+
+## Tokens
+
+Shiki's `github-dark` paints the code itself; these are the tokens the
+component sets around it.
+
+</En>
+
+<Ko>
+
+## 문구
+
+- 붙여 넣으면 바로 동작하는 코드를 보여 줍니다. 바꿔 넣을 자리는 `$API_KEY`,
+  `<chatbot_id>`처럼 분명히 표시하고, 실제 비밀 값은 보여 주지 않습니다.
+- 예제는 짧게 두고, 나머지는 전체 문서로 연결합니다.
+- 설명은 코드 안의 긴 주석이 아니라 코드 앞뒤의 본문에 씁니다.
+
+## 접근성
+
+Code가 알아서 하는 일
+
+- 코드는 글자이므로 선택하고 복사할 수 있고 화면 낭독기도 읽습니다.
+- 복사 버튼은 이름이 있는 실제 버튼입니다. 떠 있는 복사 버튼은 번역된 '복사' /
+  '복사 완료'를 이름으로 쓰고 초점 링이 있습니다(WCAG 4.1.2, 2.4.7).
+
+직접 챙겨야 하는 일
+
+- 머리 영역의 복사 버튼 이름은 영어 "Copy code"로 고정되어 있습니다. 한국어 화면에서는
+  `hideHeader`와 `onCopy`를 함께 써서 번역된 이름을 쓰는 방법을 검토하거나, 후속 수정
+  거리로 남깁니다.
+- 블록 앞 본문에서 이 코드가 무엇인지 먼저 알려, 화면 낭독기 사용자도 코드의 쓰임을
+  알 수 있게 합니다(WCAG 1.3.1).
+- 긴 줄은 블록 안에서 가로로 스크롤됩니다. 긴 명령은 줄을 나눠 폭 320px에서도 읽을
+  수 있게 합니다(WCAG 1.4.10).
+
+## 토큰
+
+코드 자체의 색은 Shiki의 `github-dark`가 칠합니다. 아래는 컴포넌트가 그 둘레에 쓰는
+토큰입니다.
+
+</Ko>
+
+<Canvas of={CodeStories.UsageTokens} sourceState="none" />
+
+<En>
+
+## Related
+
+- **InlineCode**: code inside a sentence.
+- **CopyableCode**: one line with a copy button.
+- **CodeTabs**: the same example in several languages.
+- **Markdown**: renders fenced code blocks with Code.
+
+</En>
+
+<Ko>
+
+## 관련 컴포넌트
+
+- **InlineCode**: 문장 안의 코드.
+- **CopyableCode**: 복사 버튼이 달린 한 줄.
+- **CodeTabs**: 같은 예제를 여러 언어로.
+- **Markdown**: 코드 블록을 Code로 그립니다.
+
+</Ko>

package/src/components/CodeTabs/CodeTabs.stories.tsx

@@ -1,6 +1,9 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
+import { T } from '../../guidelines/_components/Lang';
+import { TokenTable } from '../../guidelines/_components/TokenTable';
 import { CodeTabs } from './CodeTabs';
+import { CODE_CHROME } from './CodeTabs.styles';
 
 const meta = {
   title: 'Components/CodeTabs',
@@ -50,3 +53,53 @@ export const WithCopyFunction: Story = {
     },
   },
 };
+
+// ───────────────────────── Usage-page specimens ─────────────────────────
+// Pulled into `CodeTabs.usage.mdx` with <Canvas of={…} />. Hidden from the
+// sidebar (`!dev`); `tags` is written out on each story because the indexer
+// reads CSF statically.
+
+export const DoSameCallPerLanguage: Story = {
+  tags: ['!dev'],
+  name: 'Usage / Do: one call, one tab per language',
+  args: { code: CODE_SAMPLES, onCopy: () => {} },
+};
+
+export const DontStepsAsTabs: Story = {
+  tags: ['!dev'],
+  name: "Usage / Don't: different steps behind language tabs",
+  args: {
+    code: {
+      bash: 'npm install openai',
+      javascript: "const client = new OpenAI({ apiKey: process.env.API_KEY });",
+      json: '{ "model": "gpt-4o", "stream": true }',
+    },
+  },
+};
+
+const CHROME_USE = {
+  bg: { en: 'Surface (tab bar and code)', ko: '바탕(탭 막대와 코드)' },
+  bgHover: { en: 'Tab and copy hover', ko: '탭과 복사 버튼 호버' },
+  bgActive: { en: 'Copy pressed', ko: '복사 버튼 누름' },
+  fg: {
+    en: 'Selected tab; unselected at 70%, divider at 15%',
+    ko: '선택된 탭. 선택 안 된 탭은 70%, 구분선은 15%',
+  },
+} as const;
+
+/** Read from `CODE_CHROME` in `CodeTabs.styles.ts`; alpha variants folded in. */
+export const UsageTokens: Story = {
+  tags: ['!dev'],
+  name: 'Usage / Tokens',
+  args: { code: CODE_SAMPLES },
+  render: () => (
+    <TokenTable
+      rows={(Object.keys(CHROME_USE) as (keyof typeof CHROME_USE)[]).map(
+        (role) => ({
+          token: CODE_CHROME[role],
+          use: <T {...CHROME_USE[role]} />,
+        })
+      )}
+    />
+  ),
+};