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

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.test.tsx

@@ -0,0 +1,116 @@
+import { ChakraProvider } from '@chakra-ui/react';
+import { render, waitFor } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { system } from '../../theme';
+
+const shiki = vi.hoisted(() => ({
+  createHighlighter: vi.fn(),
+  dispose: vi.fn(),
+}));
+
+// The real Shiki compiles grammars through WASM, which is slow in jsdom and
+// not what these tests are about. The fake marks highlighted output with a
+// class so a test can tell highlighted text from the plain-text fallback.
+vi.mock('shiki', () => ({
+  createHighlighter: shiki.createHighlighter,
+}));
+
+const fakeHighlighter = {
+  codeToHtml: (code: string) =>
+    `<pre><code><span class="test-highlighted">${code}</span></code></pre>`,
+  dispose: shiki.dispose,
+};
+
+// shikiAdapter caches the highlighter at module level. Re-import Code per test
+// so each one starts with an empty cache.
+const loadCode = async () => (await import('./Code')).Code;
+
+const wrap = (ui: React.ReactNode) =>
+  render(<ChakraProvider value={system}>{ui}</ChakraProvider>);
+
+beforeEach(() => {
+  vi.resetModules();
+  shiki.createHighlighter.mockReset();
+  shiki.createHighlighter.mockResolvedValue(fakeHighlighter);
+  shiki.dispose.mockReset();
+});
+
+describe('Code highlighter', () => {
+  it('creates one highlighter for many code blocks', async () => {
+    const Code = await loadCode();
+    const { container } = wrap(
+      <>
+        {Array.from({ length: 20 }, (_, i) => (
+          <Code key={i} language="javascript">{`const n = ${i};`}</Code>
+        ))}
+      </>
+    );
+
+    await waitFor(() =>
+      expect(container.querySelectorAll('.test-highlighted')).toHaveLength(20)
+    );
+    expect(shiki.createHighlighter).toHaveBeenCalledTimes(1);
+  });
+
+  it('keeps highlighting the other blocks when one block unmounts', async () => {
+    const Code = await loadCode();
+    const Blocks = ({ showFirst }: { showFirst: boolean }) => (
+      <>
+        {showFirst && <Code language="javascript">first</Code>}
+        <Code language="javascript">second</Code>
+      </>
+    );
+    const { container, rerender } = wrap(<Blocks showFirst />);
+    await waitFor(() =>
+      expect(container.querySelectorAll('.test-highlighted')).toHaveLength(2)
+    );
+
+    rerender(
+      <ChakraProvider value={system}>
+        <Blocks showFirst={false} />
+      </ChakraProvider>
+    );
+
+    expect(shiki.dispose).not.toHaveBeenCalled();
+    expect(container.querySelectorAll('.test-highlighted')).toHaveLength(1);
+
+    // A block mounted later reuses the same highlighter.
+    rerender(
+      <ChakraProvider value={system}>
+        <Blocks showFirst />
+      </ChakraProvider>
+    );
+    await waitFor(() =>
+      expect(container.querySelectorAll('.test-highlighted')).toHaveLength(2)
+    );
+    expect(shiki.createHighlighter).toHaveBeenCalledTimes(1);
+  });
+
+  it('retries on the next mount when loading fails', async () => {
+    const consoleError = vi
+      .spyOn(console, 'error')
+      .mockImplementation(() => {});
+    shiki.createHighlighter.mockRejectedValueOnce(new Error('load failed'));
+    const Code = await loadCode();
+
+    const first = wrap(<Code language="javascript">a</Code>);
+    await waitFor(() =>
+      expect(consoleError).toHaveBeenCalledWith(
+        expect.stringContaining('Failed to load the Shiki highlighter'),
+        expect.any(Error)
+      )
+    );
+    // The failed block falls back to plain text instead of throwing.
+    expect(first.container).toHaveTextContent('a');
+    expect(first.container.querySelector('.test-highlighted')).toBeNull();
+    first.unmount();
+
+    const { container } = wrap(<Code language="javascript">b</Code>);
+    await waitFor(() =>
+      expect(container.querySelectorAll('.test-highlighted')).toHaveLength(1)
+    );
+    expect(shiki.createHighlighter).toHaveBeenCalledTimes(2);
+    consoleError.mockRestore();
+  });
+});

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/Code/shikiAdapter.ts

@@ -33,15 +33,44 @@ export const BUNDLED_LANGUAGES: BundledLanguage[] = [
   'yaml',
 ];
 
-export const shikiAdapter = createShikiAdapter<
-  HighlighterGeneric<BundledLanguage, BundledTheme>
->({
-  async load() {
-    const { createHighlighter } = await import('shiki');
-    return createHighlighter({
-      langs: BUNDLED_LANGUAGES,
-      themes: ['github-dark'],
+type Highlighter = HighlighterGeneric<BundledLanguage, BundledTheme>;
+
+// One highlighter for the whole app. Every <Code> mounts its own
+// AdapterProvider, and Chakra calls `load()` once per provider. Without this
+// cache a chat with 136 code blocks built 136 highlighters, each compiling all
+// BUNDLED_LANGUAGES, and froze the tab for tens of seconds.
+let highlighterPromise: Promise<Highlighter | null> | null = null;
+
+const loadHighlighter = (): Promise<Highlighter | null> => {
+  highlighterPromise ??= import('shiki')
+    .then(({ createHighlighter }) =>
+      createHighlighter({
+        langs: BUNDLED_LANGUAGES,
+        themes: ['github-dark'],
+      })
+    )
+    .catch((error: unknown) => {
+      // Chakra does not catch a rejected load, so resolve to null instead: the
+      // block renders as plain text. Clear the cache so the next mount retries.
+      console.error(
+        '[logician-ui] Failed to load the Shiki highlighter',
+        error
+      );
+      highlighterPromise = null;
+      return null;
     });
-  },
+  return highlighterPromise;
+};
+
+const baseAdapter = createShikiAdapter<Highlighter | null>({
+  load: loadHighlighter,
   theme: 'github-dark',
 });
+
+// Chakra's default `unloadContext` calls `dispose()` when a provider unmounts.
+// The highlighter is shared, so one block unmounting would break highlighting
+// in every other block. Keep it alive for the life of the page.
+export const shikiAdapter: typeof baseAdapter = {
+  ...baseAdapter,
+  unloadContext: () => {},
+};

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]} />,
+        })
+      )}
+    />
+  ),
+};

package/src/components/CodeTabs/CodeTabs.styles.ts

@@ -4,14 +4,15 @@
  * The code is highlighted with Shiki's `github-dark`, whose token colours are
  * written for a dark ground in BOTH app modes, so the surface must stay dark in
  * both too. `bg.inverse` does not: it is `tooltip.bg`, near-black in light but
- * light sand in dark, and the `fg.muted` text on it flipped as well (~1.4:1 in
+ * a light warm grey in dark, and the `fg.muted` text on it flipped as well (~1.4:1 in
  * light, ~1.1:1 in dark).
  *
  * `action.*` is the one role pair that is dark in every mode (BAZE ink:
- * #252525 light / #38332E dark, `action.fg` 12.5–13.2:1 on it, high contrast
+ * #252525 light / #2E2F2F dark, `action.fg` 10.8–13.4:1 on it, high contrast
  * included), so the chrome reads it. The unselected label is `action.fg` at
- * 70% — ≥ 7.0:1 on `action.bg` and ≥ 5.6:1 on `action.bgHover`, both schemes,
- * all four modes.
+ * 80% — ≥ 7.4:1 on `action.bg` and ≥ 6.7:1 on `action.bgHover`, both schemes,
+ * all four modes. (70% fell to 6.1:1 once dark `action.fg` became the
+ * off-white body text instead of pure white.)
  *
  * Borrowed rather than owned: `action.*` is the Run button's role. A dedicated
  * `code.*` role family (bg / fg / fgMuted / bgHover) would be the clean home.
@@ -21,6 +22,6 @@ export const CODE_CHROME = {
   bgHover: 'action.bgHover',
   bgActive: 'action.bgActive',
   fg: 'action.fg',
-  fgMuted: 'action.fg/70',
+  fgMuted: 'action.fg/80',
   divider: 'action.fg/15',
 } as const;