@mindlogic-ai/logician-ui 5.0.0-alpha.0 → 5.0.0-alpha.10

package/src/components/Toast/Toast.stories.tsx

@@ -1,10 +1,20 @@
-import { useState } from 'react';
-import { Flex, Stack, Text } from '@chakra-ui/react';
+import { ReactNode, useState } from 'react';
+import {
+  Box,
+  Toaster as ChakraToaster,
+  createToaster,
+  Flex,
+  Stack,
+  Text,
+} from '@chakra-ui/react';
 import { Meta, StoryObj } from '@storybook/react';
 
+import { T } from '../../guidelines/_components/Lang';
+import { TokenTable } from '../../guidelines/_components/TokenTable';
 import { Button } from '../Button';
 import { Toast } from './Toast';
-import type { UseToastOptions } from './Toast.types';
+import { toastStyles } from './Toast.styles';
+import type { ToastAction, ToastStatus, UseToastOptions } from './Toast.types';
 import { Toaster } from './Toaster';
 import { useToast } from './useToast';
 
@@ -14,6 +24,14 @@ const meta = {
   parameters: {
     layout: 'centered',
   },
+  argTypes: {
+    status: {
+      control: 'select',
+      options: ['neutral', 'info', 'success', 'warning', 'error'],
+      description:
+        '`neutral` (default): a plain result with no status, no icon. `success`: done as asked. `info`: a fact about what just happened; nothing is wrong. `warning`: done, but not quite as expected. `error`: it did not happen.',
+    },
+  },
 } satisfies Meta<typeof Toast>;
 
 export default meta;
@@ -602,3 +620,167 @@ export const ActionShortMessage: Story = {
     />
   ),
 };
+
+// ───────────────────────── Usage-page specimens ─────────────────────────
+// Pulled into `Toast.usage.mdx` with <Canvas of={…} />. Hidden from the
+// sidebar (`!dev`); `tags` is written on each story because the indexer reads
+// CSF statically.
+//
+// Each specimen renders the real `Toast` through its own toaster, held open
+// (`duration: Infinity`) inside a transformed box. The transform makes the
+// toaster's `position: fixed` region relative to the box, so the toast sits in
+// the docs page instead of at the top of the window, and the specimens do not
+// share the app-wide `toaster`.
+
+const ToastPreview = ({
+  status = 'neutral',
+  title,
+  description,
+  action,
+  height = 150,
+}: {
+  status?: ToastStatus;
+  title?: ReactNode;
+  description?: ReactNode;
+  action?: ToastAction;
+  height?: number;
+}) => {
+  // Created with its toast in the initialiser, not in an effect: a toast
+  // dismissed by a StrictMode effect cleanup did not come back.
+  const [local] = useState(() => {
+    const toaster = createToaster({ placement: 'top' });
+    toaster.create({
+      type: status === 'neutral' ? 'info' : status,
+      title,
+      description,
+      duration: Infinity,
+      meta: { status, action },
+    });
+    return toaster;
+  });
+  return (
+    <Box
+      position="relative"
+      transform="translateZ(0)"
+      h={`${height}px`}
+      w="100%"
+      minW={{ md: '420px' }}
+      overflow="hidden"
+    >
+      <ChakraToaster toaster={local} insetInline={{ mdDown: '4' }} gap={3}>
+        {(toast) => {
+          const s = (toast.meta?.status ?? 'neutral') as ToastStatus;
+          return (
+            <Toast
+              title={toast.title}
+              description={toast.description}
+              status={s}
+              action={toast.meta?.action}
+              onClose={() => {}}
+              {...toastStyles[s]}
+            />
+          );
+        }}
+      </ChakraToaster>
+    </Box>
+  );
+};
+
+const noop = () => {};
+
+export const DoActionProp: Story = {
+  tags: ['!dev'],
+  parameters: { layout: 'padded' },
+  name: 'Usage / Do: one action through `action`',
+  render: () => (
+    <ToastPreview
+      status="error"
+      description="크레딧이 부족해 응답을 생성하지 못했습니다."
+      action={{ label: '크레딧 구매', onClick: noop }}
+    />
+  ),
+};
+
+export const DontButtonInDescription: Story = {
+  tags: ['!dev'],
+  parameters: { layout: 'padded' },
+  name: "Usage / Don't: a Button inside `description`",
+  render: () => (
+    <ToastPreview
+      status="error"
+      height={170}
+      description={
+        <Stack gap={2} align="flex-start">
+          <span>크레딧이 부족해 응답을 생성하지 못했습니다.</span>
+          <Button variant="secondary" size="sm">
+            크레딧 구매
+          </Button>
+        </Stack>
+      }
+    />
+  ),
+};
+
+export const DoUndoAfterDelete: Story = {
+  tags: ['!dev'],
+  parameters: { layout: 'padded' },
+  name: 'Usage / Do: confirm, and offer undo',
+  render: () => (
+    <ToastPreview
+      status="success"
+      description="채팅을 삭제했습니다."
+      action={{ label: '되돌리기', onClick: noop }}
+    />
+  ),
+};
+
+export const DontToastForFieldError: Story = {
+  tags: ['!dev'],
+  parameters: { layout: 'padded' },
+  name: "Usage / Don't: a toast for a field error",
+  render: () => (
+    <ToastPreview
+      status="error"
+      description="이메일 형식이 올바르지 않습니다."
+    />
+  ),
+};
+
+export const DoNeutralResult: Story = {
+  tags: ['!dev'],
+  parameters: { layout: 'padded' },
+  name: 'Usage / Do: neutral for a plain result',
+  render: () => <ToastPreview description="링크를 복사했습니다." />,
+};
+
+const STATUSES: ToastStatus[] = ['neutral', 'info', 'success', 'warning', 'error'];
+
+/** Tokens each status reads, from `Toast.styles.ts` and the theme. */
+export const UsageTokens: Story = {
+  tags: ['!dev'],
+  parameters: { layout: 'padded' },
+  name: 'Usage / Tokens',
+  render: () => (
+    <TokenTable
+      rows={STATUSES.flatMap((status) => [
+        {
+          token: toastStyles[status].bg as string,
+          use: <T en={`${status} · background`} ko={`${status} · 배경`} />,
+        },
+        {
+          token: toastStyles[status].borderColor as string,
+          use: <T en={`${status} · border`} ko={`${status} · 테두리`} />,
+        },
+        {
+          token: toastStyles[status].color as string,
+          use: (
+            <T
+              en={`${status} · text, icon, action, ×`}
+              ko={`${status} · 글자, 아이콘, 동작, ×`}
+            />
+          ),
+        },
+      ])}
+    />
+  ),
+};

package/src/components/Toast/Toast.styles.ts

@@ -7,8 +7,12 @@ import type { ToastStatus } from './Toast.types';
  *
  * Each status is bg `{s}.bg` + text `{s}.fg` + a 1px `{s}.border` outline —
  * `info` reads its own `info.*` family instead of borrowing `primary.*`.
- * `neutral` carries no status (it is the default when none is given):
- * `border.default` / `bg.surface` / `fg.default`.
+ * `neutral` carries no status (it is the default when none is given) and is
+ * inverted: the tooltip pair `tooltip.bg` / `tooltip.fg`. A `bg.surface` toast
+ * was white on a white canvas in light mode, set apart only by a 1px border
+ * and the shadow — a "링크를 복사했어요" confirmation was easy to miss. The
+ * tooltip pair already flips per mode (ink in light, cream in dark), so the
+ * toast stays the highest-contrast thing on the page in both.
  */
 export const toastStyles: Record<ToastStatus, BoxProps> = {
   info: {
@@ -32,9 +36,9 @@ export const toastStyles: Record<ToastStatus, BoxProps> = {
     borderColor: 'danger.border',
   },
   neutral: {
-    bg: 'bg.surface',
-    color: 'fg.default',
-    borderColor: 'border.default',
+    bg: 'tooltip.bg',
+    color: 'tooltip.fg',
+    borderColor: 'tooltip.bg',
   },
 };
 
@@ -69,9 +73,11 @@ export const closeButtonStyles: Record<ToastStatus, BoxProps> = {
     },
   },
   neutral: {
-    color: 'fg.default',
+    color: 'tooltip.fg',
     _hover: {
-      bg: 'bg.muted',
+      // A tint of the toast's own text colour: no surface token sits on the
+      // inverted ground in both modes.
+      bg: 'color-mix(in srgb, var(--chakra-colors-tooltip-fg) 16%, transparent)',
     },
   },
 };
@@ -127,9 +133,11 @@ export const actionStyles: Record<ToastStatus, BoxProps> = {
   },
   neutral: {
     ...actionBase,
-    color: 'fg.default',
-    _hover: { bg: 'bg.muted' },
-    _focusVisible: { outline: '2px solid', outlineColor: 'fg.default' },
+    color: 'tooltip.fg',
+    _hover: {
+      bg: 'color-mix(in srgb, var(--chakra-colors-tooltip-fg) 16%, transparent)',
+    },
+    _focusVisible: { outline: '2px solid', outlineColor: 'tooltip.fg' },
   },
 };
 

package/src/components/Toast/Toast.usage.mdx

@@ -0,0 +1,265 @@
+import { ArgTypes, Canvas, Meta } from '@storybook/blocks';
+
+import { En, Ko, LangToggle, Verdict } from '../../guidelines/_components/Lang';
+import * as ToastStories from './Toast.stories';
+
+<Meta of={ToastStories} name="Usage" />
+
+<LangToggle />
+
+<En>
+
+# Toast
+
+A short message that confirms the result of something the reader just did,
+then goes away on its own.
+
+## When to use
+
+- To confirm an action that has no other visible result: 링크를 복사했습니다,
+  설정을 저장했습니다.
+- To report that a background action failed or finished, when the reader is
+  no longer looking at where it started.
+- To offer one follow-up to that result: undo a delete, open the exported file.
+
+## When not to use
+
+- The message must stay until the condition changes → `Banner`.
+- An error about one field → the field's error text (`FormControl`). The
+  toast disappears; the field is still wrong.
+- The reader has to decide before going on → `Modal`.
+- Progress of a long job → `ProgressBar`, in the place where the job runs.
+- A status attached to one item → `Badge`.
+
+## How it works
+
+- Mount `<Toaster />` once, at the root of the app. Then call
+  `const showToast = useToast()` and `showToast({ status, title?, description, action? })`.
+  It returns the toast id; `showToast.update(id, options)`,
+  `showToast.dismiss(id)` and `showToast.dismissAll()` work on it.
+- A toast closes after 5 s, or 8 s when it has an `action`, unless you pass
+  `duration`. Hovering or focusing the toasts pauses the timer, and so does
+  leaving the browser tab.
+- `useToast` keeps at most three of its toasts; a fourth closes the oldest.
+- Every toast appears at the top of the window. Placement is set once in
+  `Toaster.tsx`, not per toast.
+- `useToast()` returns a new function on every render. Do not list it as an
+  effect dependency without wrapping it first.
+
+## Variants and what they mean
+
+</En>
+
+<Ko>
+
+# Toast
+
+사용자가 방금 한 일의 결과를 짧게 확인해 주고, 잠시 뒤 저절로 사라지는 메시지입니다.
+
+## 언제 쓰나요
+
+- 화면에 다른 결과가 보이지 않는 동작을 확인해 줄 때: 링크를 복사했습니다, 설정을
+  저장했습니다.
+- 백그라운드 작업이 끝나거나 실패했는데, 사용자가 이미 다른 곳을 보고 있을 때.
+- 그 결과에 이어서 할 일이 하나 있을 때: 삭제 되돌리기, 내보낸 파일 열기.
+
+## 언제 쓰지 않나요
+
+- 원인이 해결될 때까지 남아 있어야 하는 안내는 `Banner`를 씁니다.
+- 입력란 하나의 오류는 그 입력란의 오류 문구(`FormControl`)로 알립니다. 토스트는
+  사라지지만 입력란은 여전히 틀린 상태입니다.
+- 사용자가 결정해야 다음으로 넘어갈 수 있다면 `Modal`을 씁니다.
+- 오래 걸리는 작업의 진행률은 그 작업이 돌아가는 자리에 `ProgressBar`로 보여 줍니다.
+- 항목 하나에 붙는 상태는 `Badge`를 씁니다.
+
+## 동작 방식
+
+- 앱 맨 위에 `<Toaster />`를 한 번만 둡니다. 그다음 `const showToast = useToast()`를
+  부르고 `showToast({ status, title?, description, action? })`로 띄웁니다. 반환값은
+  토스트 id이며, `showToast.update(id, options)`, `showToast.dismiss(id)`,
+  `showToast.dismissAll()`에 씁니다.
+- `duration`을 넘기지 않으면 5초 뒤에 닫히고, `action`이 있으면 8초 뒤에 닫힙니다.
+  토스트 위에 마우스를 올리거나 초점을 옮기면 시간이 멈추고, 브라우저 탭을 떠나도
+  멈춥니다.
+- `useToast`로 띄운 토스트는 세 개까지 남고, 네 번째가 뜨면 가장 오래된 것이 닫힙니다.
+- 토스트는 모두 창 위쪽에 뜹니다. 위치는 `Toaster.tsx`에서 한 번 정하며, 토스트마다
+  바꿀 수 없습니다.
+- `useToast()`는 렌더할 때마다 새 함수를 돌려줍니다. 감싸지 않은 채 effect 의존성에
+  넣지 않습니다.
+
+## 변형과 뜻
+
+</Ko>
+
+<ArgTypes of={ToastStories} include={['status', 'action']} />
+
+<En>
+
+| Status | Means | Use for |
+| --- | --- | --- |
+| `neutral` (default) | A plain result with no status; no icon. Inverted (`tooltip.bg` / `tooltip.fg`) so it stands out on a white page | Copied, moved, sent |
+| `success` | Done as asked | Saved, uploaded, deleted |
+| `info` | A fact about what just happened; nothing is wrong | Export ready, model switched for you |
+| `warning` | Done, but not quite as expected | Some files skipped |
+| `error` | It did not happen | Request failed, out of credits |
+
+## Do / Don't
+
+</En>
+
+<Ko>
+
+| 상태 | 뜻 | 예 |
+| --- | --- | --- |
+| `neutral` (기본) | 상태가 없는 단순한 결과이며 아이콘도 없음. 흰 화면에서도 잘 보이도록 반전색(`tooltip.bg` / `tooltip.fg`)을 씀 | 복사, 이동, 전송 |
+| `success` | 요청한 대로 끝남 | 저장, 업로드, 삭제 |
+| `info` | 방금 일어난 일에 대한 사실이며, 문제가 있다는 뜻은 아님 | 내보내기 완료, 모델 자동 변경 |
+| `warning` | 끝났지만 예상과 조금 다름 | 일부 파일 건너뜀 |
+| `error` | 일어나지 않음 | 요청 실패, 크레딧 부족 |
+
+## 이렇게 하세요 / 이렇게 하지 마세요
+
+</Ko>
+
+<Canvas of={ToastStories.DoActionProp} />
+<Verdict
+  kind="do"
+  en="Pass the follow-up as action. It renders as a text action in the toast's own colour, lined up with the message."
+  ko="이어서 할 일은 action으로 넘깁니다. 토스트와 같은 색의 글자 버튼으로, 메시지와 줄을 맞춰 그려집니다."
+/>
+
+<Canvas of={ToastStories.DontButtonInDescription} />
+<Verdict
+  kind="dont"
+  en="Put a Button inside description. It carries none of the toast's colours and reads as a separate card on top."
+  ko="description 안에 Button을 넣지 마세요. 토스트의 색을 따르지 않아서 위에 따로 얹은 카드처럼 보입니다."
+/>
+
+<Canvas of={ToastStories.DoUndoAfterDelete} />
+<Verdict
+  kind="do"
+  en="Confirm a delete and offer undo. One action only; closing is the ×."
+  ko="삭제를 확인해 주고 되돌리기를 제안합니다. 동작은 하나만 두고, 닫기는 ×가 맡습니다."
+/>
+
+<Canvas of={ToastStories.DontToastForFieldError} />
+<Verdict
+  kind="dont"
+  en="Report a field error in a toast. It is gone in five seconds and does not say which field. Show the error under the field."
+  ko="입력란 오류를 토스트로 알리지 마세요. 5초 뒤에 사라지고, 어느 입력란인지도 알려 주지 않습니다. 오류는 입력란 아래에 보여 줍니다."
+/>
+
+<Canvas of={ToastStories.DoNeutralResult} />
+<Verdict
+  kind="do"
+  en="Use neutral for a plain result. A green check on every copy makes success mean nothing."
+  ko="단순한 결과에는 neutral을 씁니다. 복사할 때마다 초록 체크를 띄우면 success가 아무 뜻도 전하지 못합니다."
+/>
+
+<En>
+
+## Content
+
+- One sentence in `description`, in the past tense for a result:
+  "채팅을 삭제했습니다." Add a `title` only when the description needs a
+  heading to make sense.
+- Say what happened, not what the system is: "크레딧이 부족해 응답을 생성하지
+  못했습니다", not "402 Payment Required".
+- The action label is a short verb phrase: 되돌리기, 크레딧 구매, 파일 열기.
+- Do not put information the reader needs later only in a toast. It will be
+  gone.
+
+## Accessibility
+
+What Toast does for you:
+
+- Each toast is `role="status"` inside a polite live region, so screen readers
+  read it without moving focus (WCAG 4.1.3).
+- `Alt+T` moves focus to the toasts; `Escape` closes the focused toast. The
+  action and the × are real buttons (WCAG 2.1.1).
+- Hover and focus pause the timer, and the action toast stays longer (8 s), so
+  the reader has time to act (WCAG 2.2.1).
+- Text, icon, action and × use the status `.fg` colour, which the contrast
+  audit checks on `.bg` in both modes (WCAG 1.4.3).
+
+What you still have to do:
+
+- **Errors are announced politely, not as alerts.** If the reader must not miss
+  it, also show it on the page (`Banner` with `role="alert"`).
+- **The × has no accessible name yet.** The close trigger is a button with only
+  an icon (WCAG 4.1.2); a fix belongs in `Toast.tsx`. Until then, do not make
+  the × the only way to act on a toast.
+- Words, not colour alone (WCAG 1.4.1): the description says it failed; the red
+  is a second signal.
+
+## Tokens
+
+The table is generated from `Toast.styles.ts` and the theme.
+
+</En>
+
+<Ko>
+
+## 문구
+
+- `description`에 한 문장을 씁니다. 결과는 과거형으로 씁니다: "채팅을 삭제했습니다."
+  `title`은 설명만으로 뜻이 통하지 않을 때만 붙입니다.
+- 시스템 상태가 아니라 일어난 일을 씁니다. "402 Payment Required"가 아니라 "크레딧이
+  부족해 응답을 생성하지 못했습니다"라고 씁니다.
+- 동작 라벨은 짧은 동사구로 씁니다: 되돌리기, 크레딧 구매, 파일 열기.
+- 나중에 다시 봐야 하는 정보를 토스트에만 담지 않습니다. 곧 사라집니다.
+
+## 접근성
+
+Toast가 알아서 하는 일
+
+- 토스트마다 `role="status"`가 붙고, 공손한(polite) 라이브 영역 안에 있습니다.
+  화면 낭독기는 초점을 옮기지 않고 내용을 읽습니다(WCAG 4.1.3).
+- `Alt+T`를 누르면 토스트로 초점이 옮겨지고, `Escape`를 누르면 초점이 있는 토스트가
+  닫힙니다. 동작과 ×는 실제 버튼입니다(WCAG 2.1.1).
+- 마우스를 올리거나 초점을 두면 시간이 멈추고, 동작이 있는 토스트는 8초 동안 남아서
+  읽고 누를 시간이 있습니다(WCAG 2.2.1).
+- 글자, 아이콘, 동작, ×는 상태의 `.fg` 색을 씁니다. 이 색은 대비 감사에서 라이트·다크
+  모두 `.bg` 위에서 검사합니다(WCAG 1.4.3).
+
+직접 챙겨야 하는 일
+
+- **오류도 공손하게 읽힐 뿐, 경고(alert)로 읽히지 않습니다.** 놓치면 안 되는 오류라면
+  페이지에도 보여 줍니다(`role="alert"`를 붙인 `Banner`).
+- **×에는 아직 접근 가능한 이름이 없습니다.** 닫기 버튼에 아이콘만 있습니다(WCAG
+  4.1.2). 고칠 곳은 `Toast.tsx`입니다. 그 전까지는 ×를 토스트에 대응하는 유일한
+  방법으로 만들지 않습니다.
+- 색만으로 알리지 않습니다(WCAG 1.4.1). 실패했다는 사실은 문구가 전하고, 빨간색은
+  두 번째 신호입니다.
+
+## 토큰
+
+아래 표는 `Toast.styles.ts`와 테마에서 자동으로 만듭니다.
+
+</Ko>
+
+<Canvas of={ToastStories.UsageTokens} sourceState="none" />
+
+<En>
+
+## Related
+
+- **Banner**: a message that stays until the condition changes.
+- **Modal**: a decision the reader has to make now.
+- **ErrorFallback**: the page failed to render.
+- **Guidelines/Actions in feedback surfaces**: the `action` recipe and why.
+- **Foundations/Brand & colour usage**: status colours mean status.
+
+</En>
+
+<Ko>
+
+## 관련 컴포넌트
+
+- **Banner**: 원인이 해결될 때까지 남아 있는 안내.
+- **Modal**: 사용자가 지금 내려야 하는 결정.
+- **ErrorFallback**: 페이지를 그리지 못했을 때.
+- **Guidelines/Actions in feedback surfaces**: `action`의 쓰임과 이유.
+- **Foundations/Brand & colour usage**: 상태색은 상태를 뜻합니다.
+
+</Ko>

package/src/components/Tooltip/Tooltip.stories.tsx

@@ -2,7 +2,12 @@ import { useState } from 'react';
 import { Box, Button, HStack, IconButton, VStack } from '@chakra-ui/react';
 import { Meta, StoryObj } from '@storybook/react';
 
-import { FaRegCopy } from '../Icon';
+import { T } from '../../guidelines/_components/Lang';
+import { TokenTable } from '../../guidelines/_components/TokenTable';
+import { Button as LogicianButton } from '../Button';
+import { FaRegCopy, RefreshIcon, TrashIcon } from '../Icon';
+import { IconButton as LogicianIconButton } from '../IconButton';
+import { Link } from '../Typography';
 import { Tooltip } from './Tooltip';
 
 const meta = {
@@ -281,3 +286,83 @@ export const CustomStylesWithoutArrow: Story = {
     </VStack>
   ),
 };
+
+// ───────────────────────── Usage-page specimens ─────────────────────────
+// Pulled into `Tooltip.usage.mdx` with <Canvas of={…} />. Hidden from the
+// sidebar (`!dev`). Each tooltip is held open (`open`) so the page shows it
+// without a hover.
+
+export const DoNameIconButton: Story = {
+  tags: ['!dev'],
+  parameters: { layout: 'padded' },
+  name: 'Usage / Do: name an icon button',
+  render: () => (
+    <Box pt={10} pb={2} px={2}>
+      <Tooltip content="새로고침" open>
+        <LogicianIconButton aria-label="새로고침" variant="ghost">
+          <RefreshIcon aria-hidden />
+        </LogicianIconButton>
+      </Tooltip>
+    </Box>
+  ),
+};
+
+export const DontLinkInTooltip: Story = {
+  tags: ['!dev'],
+  parameters: { layout: 'padded' },
+  name: "Usage / Don't: a link inside a tooltip",
+  render: () => (
+    <Box pt={12} pb={2} px={20}>
+      <Tooltip
+        open
+        content={
+          <>
+            관리자만 바꿀 수 있습니다. <Link href="#">자세히 보기</Link>
+          </>
+        }
+      >
+        <LogicianButton variant="secondary">정책 변경</LogicianButton>
+      </Tooltip>
+    </Box>
+  ),
+};
+
+export const DontStatusColourTooltip: Story = {
+  tags: ['!dev'],
+  parameters: { layout: 'padded' },
+  name: "Usage / Don't: a status colour on a tooltip",
+  render: () => (
+    <Box pt={10} pb={2} px={2}>
+      <Tooltip
+        content="삭제"
+        open
+        contentProps={{
+          css: { '--tooltip-bg': 'var(--chakra-colors-danger-solid)' },
+          bgColor: 'danger.solid',
+        }}
+      >
+        <LogicianIconButton aria-label="삭제" variant="ghost">
+          <TrashIcon aria-hidden />
+        </LogicianIconButton>
+      </Tooltip>
+    </Box>
+  ),
+};
+
+/** Tokens the tooltip reads, as set in `Tooltip.tsx`. */
+export const UsageTokens: Story = {
+  tags: ['!dev'],
+  parameters: { layout: 'padded' },
+  name: 'Usage / Tokens',
+  render: () => (
+    <TokenTable
+      rows={[
+        {
+          token: 'tooltip.bg',
+          use: <T en="Background and arrow" ko="배경·화살표" />,
+        },
+        { token: 'tooltip.fg', use: <T en="Text" ko="글자" /> },
+      ]}
+    />
+  ),
+};