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

package/src/components/Container/Container.usage.mdx

@@ -0,0 +1,130 @@
+import { Canvas, Meta } from '@storybook/blocks';
+
+import { En, Ko, LangToggle, Verdict } from '../../guidelines/_components/Lang';
+import * as ContainerStories from './Container.stories';
+
+<Meta of={ContainerStories} name="Usage" />
+
+<LangToggle />
+
+<En>
+
+# Container
+
+The centred page column. It is Chakra's `Container` plus a responsive
+`minWidth`: the largest theme breakpoint that still leaves a 10% gutter on
+each side of the **window**, recomputed on resize. `disableResponsive` turns
+that off.
+
+## When to use
+
+- Once per page, around the main content, so pages share the same width.
+
+## When not to use
+
+- Inside a card, a modal, a drawer or a sidebar → `Box` or `Stack` with a
+  `maxW`. The width comes from the window, not the parent, so it overflows a
+  narrow box.
+- To centre a small block → `Flex` / `Center`.
+
+## Do / Don't
+
+</En>
+
+<Ko>
+
+# Container
+
+가운데 정렬된 페이지 열입니다. Chakra의 `Container`에 반응형 `minWidth`를 더했습니다.
+**창** 양쪽에 10% 여백을 남기는 가장 큰 테마 중단점 값을 쓰고, 창 크기가 바뀌면 다시
+계산합니다. `disableResponsive`로 끌 수 있습니다.
+
+## 언제 쓰나요
+
+- 페이지마다 한 번, 본문을 감싸서 페이지들의 너비를 맞출 때.
+
+## 언제 쓰지 않나요
+
+- 카드, 모달, 서랍, 사이드바 안에서는 `maxW`를 준 `Box`나 `Stack`을 씁니다. 너비가
+  부모가 아니라 창에서 정해지므로 좁은 상자 밖으로 넘칩니다.
+- 작은 블록을 가운데 두려면 `Flex` / `Center`를 씁니다.
+
+## 이렇게 하세요 / 이렇게 하지 마세요
+
+</Ko>
+
+<Canvas of={ContainerStories.DoPageLandmark} />
+<Verdict
+  kind="do"
+  en="Use one Container for the page column and render it as the main landmark (as='main')."
+  ko="페이지 열에 Container 하나를 쓰고, 본문 랜드마크로 그립니다(as='main')."
+/>
+
+<Canvas of={ContainerStories.DontInsideACard} />
+<Verdict
+  kind="dont"
+  en="Put a Container inside a narrow box. Its minimum width follows the window and spills out of the card."
+  ko="좁은 상자 안에 Container를 넣지 마세요. 최소 너비가 창을 따르므로 카드 밖으로 넘칩니다."
+/>
+
+<En>
+
+## Accessibility
+
+What Container does for you:
+
+- `as` changes the element and its props, so the page column can be a
+  landmark: `as="main"`, `as="section"`, `as="nav"`.
+
+What you still have to do:
+
+- **Mark the main content** with `as="main"` once per page, so "skip to
+  content" and landmark navigation work (WCAG 1.3.1, 2.4.1).
+- The `minWidth` is set after mount, from the window. Check pages at 320px
+  wide and at 400% zoom for sideways scrolling (WCAG 1.4.10).
+
+## Tokens
+
+Container sets no colour tokens.
+
+</En>
+
+<Ko>
+
+## 접근성
+
+Container가 알아서 하는 일
+
+- `as`가 요소와 그 속성을 함께 바꾸므로 페이지 열을 랜드마크로 만들 수 있습니다:
+  `as="main"`, `as="section"`, `as="nav"`.
+
+직접 챙겨야 하는 일
+
+- **본문을 표시합니다.** 페이지마다 한 번 `as="main"`을 써야 "본문 바로가기"와
+  랜드마크 이동이 동작합니다(WCAG 1.3.1, 2.4.1).
+- `minWidth`는 화면에 그려진 뒤 창 크기로 정해집니다. 폭 320px과 400% 확대에서 가로
+  스크롤이 생기지 않는지 확인합니다(WCAG 1.4.10).
+
+## 토큰
+
+Container는 색 토큰을 쓰지 않습니다.
+
+</Ko>
+
+<En>
+
+## Related
+
+- **Masonry**: a multi-column layout inside the page.
+- **Card**: a bounded block inside the page.
+
+</En>
+
+<Ko>
+
+## 관련 컴포넌트
+
+- **Masonry**: 페이지 안의 여러 열 레이아웃.
+- **Card**: 페이지 안의 경계 있는 블록.
+
+</Ko>

package/src/components/CopyableCode/CopyableCode.stories.tsx

@@ -1,5 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react';
 
+import { T } from '../../guidelines/_components/Lang';
+import { TokenTable } from '../../guidelines/_components/TokenTable';
 import { CopyableCode } from './CopyableCode';
 import { CopyableCodeProps } from './CopyableCode.types';
 
@@ -20,3 +22,63 @@ export default meta;
 type Story = StoryObj<typeof CopyableCode>;
 
 export const Basic: Story = {};
+
+// ───────────────────────── Usage-page specimens ─────────────────────────
+// Pulled into `CopyableCode.usage.mdx` with <Canvas of={…} />. Hidden from
+// the sidebar (`!dev`); `tags` is written out on each story because the
+// indexer reads CSF statically.
+
+/** CopyableCode does not touch the clipboard; the caller's `onCopy` does. */
+const copy = (text: string) => () => {
+  void navigator.clipboard?.writeText(text);
+};
+
+const ENDPOINT = 'https://api.example.com/v1/chat/completions';
+
+export const DoOneLineValue: Story = {
+  tags: ['!dev'],
+  parameters: { layout: 'padded' },
+  name: 'Usage / Do: one line the user pastes somewhere else',
+  args: { children: ENDPOINT, onCopy: copy(ENDPOINT) },
+};
+
+const SCRIPT = `import OpenAI from 'openai';
+const client = new OpenAI({ baseURL: '${ENDPOINT}' });
+const res = await client.chat.completions.create({ model: 'gpt-4o' });`;
+
+export const DontMultiLine: Story = {
+  tags: ['!dev'],
+  parameters: { layout: 'padded' },
+  name: "Usage / Don't: a multi-line snippet",
+  args: { children: SCRIPT, onCopy: copy(SCRIPT) },
+};
+
+export const UsageTokens: Story = {
+  tags: ['!dev'],
+  parameters: { layout: 'padded' },
+  name: 'Usage / Tokens',
+  render: () => (
+    <TokenTable
+      rows={[
+        {
+          token: 'bg.surface',
+          use: (
+            <T
+              en="Card surface and the fade under the button"
+              ko="카드 바탕과 버튼 아래 흐려지는 부분"
+            />
+          ),
+        },
+        { token: 'border.subtle', use: <T en="Card border" ko="카드 테두리" /> },
+        {
+          token: 'primary.main',
+          use: <T en="Copy button (primary)" ko="복사 버튼(primary)" />,
+        },
+        {
+          token: 'fg.onPrimary',
+          use: <T en="Copy button label" ko="복사 버튼 글자" />,
+        },
+      ]}
+    />
+  ),
+};

package/src/components/CopyableCode/CopyableCode.usage.mdx

@@ -0,0 +1,168 @@
+import { Canvas, Meta } from '@storybook/blocks';
+
+import { En, Ko, LangToggle, Verdict } from '../../guidelines/_components/Lang';
+import * as CopyableCodeStories from './CopyableCode.stories';
+
+<Meta of={CopyableCodeStories} name="Usage" />
+
+<LangToggle />
+
+<En>
+
+# CopyableCode
+
+One line of code or a value in a card, with a 복사 button that confirms
+itself (the icon becomes a check and the label becomes 복사 완료 for 1.6
+seconds). FactChat uses it for model IDs and endpoints on the developer page.
+
+## When to use
+
+- A single value the user copies and pastes elsewhere: an endpoint, a model
+  ID, an embed URL.
+
+## When not to use
+
+- Several lines → `Code` with `onCopy`. CopyableCode renders on one line
+  (`white-space: nowrap`), so line breaks are lost.
+- A value inside a sentence → `InlineCode`.
+- A secret shown once (a new API key) → still fine, but say in the text that
+  it will not be shown again.
+
+## Props
+
+| Prop | Means |
+| --- | --- |
+| `children` | The value shown. |
+| `onCopy` | **Required, and it does the copying.** CopyableCode does not write to the clipboard; your handler must call `navigator.clipboard.writeText`. The button confirms when clicked either way. |
+| `containerProps` | Props for the outer `Flex` (width, margins). |
+
+## Do / Don't
+
+</En>
+
+<Ko>
+
+# CopyableCode
+
+카드 안에 코드 한 줄이나 값을 보여 주고 '복사' 버튼을 붙인 컴포넌트입니다. 버튼을
+누르면 1.6초 동안 아이콘이 체크로, 글자가 '복사 완료'로 바뀌어 스스로 확인해 줍니다.
+FactChat은 개발자 페이지의 모델 ID와 엔드포인트에 씁니다.
+
+## 언제 쓰나요
+
+- 사용자가 복사해서 다른 곳에 붙여 넣는 값 하나: 엔드포인트, 모델 ID, 임베드 URL.
+
+## 언제 쓰지 않나요
+
+- 여러 줄이라면 `onCopy`를 준 `Code`를 씁니다. CopyableCode는 한 줄로
+  그리므로(`white-space: nowrap`) 줄바꿈이 사라집니다.
+- 문장 안의 값은 `InlineCode`를 씁니다.
+- 한 번만 보여 주는 비밀 값(새 API 키)에도 쓸 수 있지만, 다시 볼 수 없다는 점을 본문에
+  적습니다.
+
+## 속성
+
+| 속성 | 뜻 |
+| --- | --- |
+| `children` | 보여 줄 값. |
+| `onCopy` | **필수이며, 복사는 이 함수가 합니다.** CopyableCode는 클립보드에 쓰지 않으므로 넘긴 함수에서 `navigator.clipboard.writeText`를 불러야 합니다. 버튼의 확인 표시는 어느 경우에나 나타납니다. |
+| `containerProps` | 바깥 `Flex`에 넘길 속성(너비, 여백). |
+
+## 이렇게 하세요 / 이렇게 하지 마세요
+
+</Ko>
+
+<Canvas of={CopyableCodeStories.DoOneLineValue} />
+<Verdict
+  kind="do"
+  en="Use it for one value, and write it to the clipboard in onCopy."
+  ko="값 하나에 쓰고, onCopy에서 클립보드에 씁니다."
+/>
+
+<Canvas of={CopyableCodeStories.DontMultiLine} />
+<Verdict
+  kind="dont"
+  en="Use it for a multi-line snippet. The lines run together and scroll sideways under the button. Use Code with onCopy."
+  ko="여러 줄 코드에 쓰지 마세요. 줄이 하나로 이어지고 버튼 아래로 가로 스크롤됩니다. onCopy를 준 Code를 씁니다."
+/>
+
+<En>
+
+## Content
+
+- Show the exact value, nothing around it: no quotes, no "URL:".
+- Put the label in the text above (모델 ID, 엔드포인트).
+
+## Accessibility
+
+What CopyableCode does for you:
+
+- The button is a real `Button` with a visible, translated label, so its name
+  matches what is shown (WCAG 2.5.3, 4.1.2).
+- Only one label is exposed at a time (the other is `aria-hidden`), and the
+  button keeps its width when the label changes.
+
+What you still have to do:
+
+- **Copy for real.** If `onCopy` does nothing, the button still says 복사
+  완료 and tells the user something false.
+- The confirmation is visual only; there is no live region. If the copy
+  result matters (a key shown once), also announce it, for example with a
+  `Toast` (WCAG 4.1.3).
+- A long value scrolls sideways under a fade. Make sure the start of the
+  value is the part that identifies it.
+
+## Tokens
+
+</En>
+
+<Ko>
+
+## 문구
+
+- 값만 정확히 보여 줍니다. 따옴표나 "URL:" 같은 말을 붙이지 않습니다.
+- 라벨(모델 ID, 엔드포인트)은 위 본문에 씁니다.
+
+## 접근성
+
+CopyableCode가 알아서 하는 일
+
+- 버튼은 번역된 글자가 보이는 실제 `Button`이라, 보이는 글자와 읽히는 이름이
+  같습니다(WCAG 2.5.3, 4.1.2).
+- 한 번에 한 글자만 노출되고(다른 하나는 `aria-hidden`), 글자가 바뀌어도 버튼 너비가
+  그대로입니다.
+
+직접 챙겨야 하는 일
+
+- **실제로 복사합니다.** `onCopy`가 아무것도 하지 않아도 버튼은 '복사 완료'를 띄우므로
+  사용자에게 사실이 아닌 것을 알리게 됩니다.
+- 확인 표시는 화면에만 나타나고 라이브 영역이 없습니다. 복사 결과가 중요하다면(한 번만
+  보여 주는 키 등) `Toast` 같은 방법으로도 알립니다(WCAG 4.1.3).
+- 긴 값은 흐려지는 부분 아래로 가로 스크롤됩니다. 값의 앞부분만 보고도 무엇인지 알 수
+  있게 합니다.
+
+## 토큰
+
+</Ko>
+
+<Canvas of={CopyableCodeStories.UsageTokens} sourceState="none" />
+
+<En>
+
+## Related
+
+- **Code**: multi-line snippets with a copy button.
+- **InlineCode**: a value inside a sentence.
+- **Toast**: announce a copy result that matters.
+
+</En>
+
+<Ko>
+
+## 관련 컴포넌트
+
+- **Code**: 복사 버튼이 있는 여러 줄 코드.
+- **InlineCode**: 문장 안의 값.
+- **Toast**: 중요한 복사 결과를 알릴 때.
+
+</Ko>

package/src/components/CountBadge/CountBadge.stories.tsx

@@ -1,9 +1,12 @@
 import { Flex, HStack, Text } from '@chakra-ui/react';
 import { Meta, StoryObj } from '@storybook/react';
 
+import { T } from '../../guidelines/_components/Lang';
+import { TokenTable } from '../../guidelines/_components/TokenTable';
 import { BellIcon } from '../Icon';
 import { IconButton } from '../IconButton';
 import { CountBadge } from '.';
+import { countBadgeBaseStyles } from './CountBadge.styles';
 
 const meta = {
   title: 'Components/CountBadge',
@@ -107,3 +110,69 @@ export const OnIconButton: Story = {
     );
   },
 };
+
+// ───────────────────────── Usage-page specimens ─────────────────────────
+// Pulled into `CountBadge.usage.mdx` with <Canvas of={…} />. Hidden from the
+// sidebar (`!dev`); `tags` is written on each story because the indexer reads
+// CSF statically.
+
+const FOLDERS = [
+  { name: '연구 자료', files: 128 },
+  { name: '수업 자료', files: 42 },
+  { name: '행정 문서', files: 7 },
+];
+
+export const DontCountForTotals: Story = {
+  tags: ['!dev'],
+  parameters: { layout: 'padded' },
+  name: "Usage / Don't: a count badge for a total",
+  render: () => (
+    <Flex direction="column" gap={2} w="240px">
+      {FOLDERS.map((folder) => (
+        <HStack key={folder.name} justify="space-between">
+          <Text>{folder.name}</Text>
+          <CountBadge count={folder.files} />
+        </HStack>
+      ))}
+    </Flex>
+  ),
+};
+
+export const DoTotalsAsText: Story = {
+  tags: ['!dev'],
+  parameters: { layout: 'padded' },
+  name: 'Usage / Do: totals as plain text',
+  render: () => (
+    <Flex direction="column" gap={2} w="240px">
+      {FOLDERS.map((folder) => (
+        <HStack key={folder.name} justify="space-between">
+          <Text>{folder.name}</Text>
+          <Text textStyle="subtext" color="fg.muted">
+            파일 {folder.files}개
+          </Text>
+        </HStack>
+      ))}
+    </Flex>
+  ),
+};
+
+/** Tokens the badge reads, from `CountBadge.styles.ts` and the theme. */
+export const UsageTokens: Story = {
+  tags: ['!dev'],
+  parameters: { layout: 'padded' },
+  name: 'Usage / Tokens',
+  render: () => (
+    <TokenTable
+      rows={[
+        {
+          token: countBadgeBaseStyles.bgColor as string,
+          use: <T en="fill (number and dot)" ko="바탕(숫자, 점)" />,
+        },
+        {
+          token: countBadgeBaseStyles.color as string,
+          use: <T en="number" ko="숫자" />,
+        },
+      ]}
+    />
+  ),
+};

package/src/components/CountBadge/CountBadge.usage.mdx

@@ -0,0 +1,215 @@
+import { ArgTypes, Canvas, Meta } from '@storybook/blocks';
+
+import { En, Ko, LangToggle, Verdict } from '../../guidelines/_components/Lang';
+import * as CountBadgeStories from './CountBadge.stories';
+
+<Meta of={CountBadgeStories} name="Usage" />
+
+<LangToggle />
+
+<En>
+
+# CountBadge
+
+A small coral-red count of things that are waiting for the reader: unread
+messages, new notifications.
+
+## When to use
+
+- An unread or pending count next to a nav item, a tab or a list row.
+- On an icon-only button, such as the notification bell.
+- `dot` when there is something new but the number does not matter.
+
+## When not to use
+
+- A total or a quantity (파일 128개, 멤버 42명) → plain text. Coral says "this
+  needs you"; a total does not.
+- A status or a label → `Badge`.
+- Something the reader can select or remove → `Tag`.
+
+## Variants and what they mean
+
+</En>
+
+<Ko>
+
+# CountBadge
+
+읽지 않은 메시지나 새 알림처럼 사용자를 기다리는 항목의 개수를 보여 주는 작은
+코럴 레드 배지입니다.
+
+## 언제 쓰나요
+
+- 메뉴 항목, 탭, 목록 행 옆에 읽지 않았거나 처리할 항목의 개수를 보여 줄 때.
+- 알림 종 같은 아이콘 버튼 위에 개수를 올릴 때.
+- 새 소식이 있다는 것만 중요하고 개수는 중요하지 않을 때는 `dot`을 씁니다.
+
+## 언제 쓰지 않나요
+
+- 전체 개수나 수량(파일 128개, 멤버 42명)은 일반 글자로 씁니다. 코럴은 "확인이
+  필요함"이라는 뜻인데, 전체 개수에는 그런 뜻이 없습니다.
+- 상태나 라벨은 `Badge`를 씁니다.
+- 사용자가 고르거나 지울 수 있다면 `Tag`를 씁니다.
+
+## 변형과 뜻
+
+</Ko>
+
+<ArgTypes of={CountBadgeStories} include={['count', 'max', 'dot', 'showZero', 'label', 'size']} />
+
+<En>
+
+| Form | Shows | Notes |
+| --- | --- | --- |
+| Number (default) | `count`, capped at `max` (99 → `99+`) | Renders nothing for 0 unless `showZero` |
+| `dot` | A circle with no number | Hidden from assistive tech unless it has a `label`; with a `count` of 0 it disappears |
+
+Sizes `sm` / `md` (default) / `lg` are 16 / 18 / 22 px tall. Digits are
+tabular, so the badge does not change width as the number changes.
+
+## Do / Don't
+
+</En>
+
+<Ko>
+
+| 형태 | 보이는 것 | 참고 |
+| --- | --- | --- |
+| 숫자(기본) | `count`, `max`에서 잘림(99 → `99+`) | `showZero`가 없으면 0일 때 아무것도 그리지 않음 |
+| `dot` | 숫자 없는 점 | `label`이 없으면 보조 기술에서 숨겨짐. `count`가 0이면 사라짐 |
+
+크기 `sm` / `md`(기본) / `lg`의 높이는 16 / 18 / 22px입니다. 숫자 폭이 고정되어 있어
+숫자가 바뀌어도 배지 폭이 흔들리지 않습니다.
+
+## 이렇게 하세요 / 이렇게 하지 마세요
+
+</Ko>
+
+<Canvas of={CountBadgeStories.InContext} />
+<Verdict
+  kind="do"
+  en="Next to a nav item, give the badge a label that says what it counts. The screen reader hears 읽지 않은 메시지 12개 instead of a bare 12."
+  ko="메뉴 항목 옆에서는 무엇의 개수인지 알려 주는 label을 붙입니다. 화면 낭독기는 '12' 대신 '읽지 않은 메시지 12개'라고 읽습니다."
+/>
+
+<Canvas of={CountBadgeStories.OnIconButton} />
+<Verdict
+  kind="do"
+  en="On an icon-only button, put the count in the button's aria-label and leave the badge unlabelled. The button's aria-label replaces everything inside it."
+  ko="아이콘 버튼에서는 개수를 버튼의 aria-label에 넣고 배지에는 label을 달지 않습니다. 버튼의 aria-label이 안에 든 내용을 모두 대신합니다."
+/>
+
+<Canvas of={CountBadgeStories.DontCountForTotals} />
+<Verdict
+  kind="dont"
+  en="Use a count badge for totals. Three coral badges in a list read as three things that need attention."
+  ko="전체 개수에 CountBadge를 쓰지 마세요. 목록에 코럴 배지가 세 개 있으면 확인할 일이 세 가지 있는 것처럼 읽힙니다."
+/>
+
+<Canvas of={CountBadgeStories.DoTotalsAsText} />
+<Verdict
+  kind="do"
+  en="Write totals as muted text with the unit."
+  ko="전체 개수는 단위를 붙여 흐린 글자로 씁니다."
+/>
+
+<En>
+
+## Content
+
+- Numbers only; the unit and meaning go in `label` or the surrounding text.
+- Keep the default `max` of 99 unless the exact number above it matters to the
+  reader.
+- Write `label` as a complete phrase with the full number: "읽지 않은 알림
+  120개", even when the badge shows `99+`.
+
+## Accessibility
+
+What CountBadge does for you:
+
+- With a `label`, the visible number is hidden from assistive tech and the
+  label is read instead, so `99+` is announced as the real count.
+- A `dot` without a `label` is `aria-hidden`; with one it is an `img` with that
+  name.
+- It renders as a `<span>`, so it is valid inside a button or link
+  (`ACCESSIBILITY.md` §5, KWCAG 5.4.1.1).
+- `count.fg` on `count.bg` passes the contrast audit in both modes
+  (WCAG 1.4.3).
+
+What you still have to do:
+
+- **Give it a `label` when the number alone makes no sense**, in a nav item or a
+  list row (WCAG 1.1.1).
+- **On an icon-only button, put the count in the button's `aria-label`**
+  (WCAG 4.1.2). A `label` on the badge there is never announced.
+- The badge does not announce changes. If a new count matters while the reader
+  is on the page, announce it through a polite live region (`role="status"`)
+  as well (WCAG 4.1.3).
+
+## Tokens
+
+The table is generated from `CountBadge.styles.ts` and the theme.
+
+</En>
+
+<Ko>
+
+## 문구
+
+- 숫자만 씁니다. 단위와 뜻은 `label`이나 주변 글자에 담습니다.
+- 99보다 큰 정확한 숫자가 사용자에게 중요하지 않다면 기본 `max` 99를 그대로 둡니다.
+- `label`은 실제 숫자를 넣은 완전한 구절로 씁니다. 배지에 `99+`가 보여도 "읽지 않은
+  알림 120개"라고 씁니다.
+
+## 접근성
+
+CountBadge가 알아서 하는 일
+
+- `label`이 있으면 보이는 숫자는 보조 기술에서 숨기고 label을 대신 읽습니다. 그래서
+  `99+`가 실제 개수로 읽힙니다.
+- `label`이 없는 `dot`은 `aria-hidden`이고, label이 있으면 그 이름을 가진 `img`가
+  됩니다.
+- `<span>`으로 그려지므로 버튼이나 링크 안에 넣어도 됩니다(`ACCESSIBILITY.md` §5,
+  KWCAG 5.4.1.1).
+- `count.bg` 위의 `count.fg`는 라이트·다크 모두 대비 감사를 통과합니다(WCAG 1.4.3).
+
+직접 챙겨야 하는 일
+
+- **숫자만으로 뜻이 통하지 않는다면 `label`을 붙입니다.** 메뉴 항목이나 목록 행 옆이
+  그렇습니다(WCAG 1.1.1).
+- **아이콘 버튼에서는 개수를 버튼의 `aria-label`에 넣습니다**(WCAG 4.1.2). 그 자리에서
+  배지의 `label`은 읽히지 않습니다.
+- 배지는 숫자가 바뀌어도 알려 주지 않습니다. 사용자가 화면을 보는 동안 새 개수가
+  중요하다면, 공손한 라이브 영역(`role="status"`)으로도 알립니다(WCAG 4.1.3).
+
+## 토큰
+
+아래 표는 `CountBadge.styles.ts`와 테마에서 자동으로 만듭니다.
+
+</Ko>
+
+<Canvas of={CountBadgeStories.UsageTokens} sourceState="none" />
+
+<En>
+
+## Related
+
+- **Badge**: a status or an attribute.
+- **Tag**: a label the reader can select or remove.
+- **IconButton**: where the bell and its count live.
+- **Foundations/Brand & colour usage**: coral only for send, run, the
+  AI-working mark and counts.
+
+</En>
+
+<Ko>
+
+## 관련 컴포넌트
+
+- **Badge**: 상태나 속성.
+- **Tag**: 사용자가 고르거나 지울 수 있는 라벨.
+- **IconButton**: 알림 종과 그 개수가 놓이는 곳.
+- **Foundations/Brand & colour usage**: 코럴은 전송, 실행, AI 작업 표시, 개수에만
+  씁니다.
+
+</Ko>