@mindlogic-ai/logician-ui 4.0.0-alpha.8 → 4.0.0

package/src/components/Tabs/Tab/Tab.styles.ts

@@ -9,8 +9,42 @@ export const verticalStyles = {
   width: '100%',
 };
 
+/**
+ * The steps the horizontal tab's selected state paints, exported as tokens so
+ * the contrast regression in `src/components/a11y.kwcag.test.tsx` measures what
+ * this component actually renders rather than an arithmetic restatement of it.
+ *
+ * **A selected tab is a PLACE, not a value.** It answers "where am I", which is
+ * the same question the app nav rail answers — so it is carried by ink and
+ * weight rather than by the brand hue. Colour is reserved for what a control
+ * MEANS (primary action, danger, success); spending it on chrome is what stops
+ * a state colour from registering when it appears.
+ *
+ * Ink also retires the defect the previous ramp was written around. The old
+ * `primary.main` label was 4.59:1 on the dark PAGE but only **4.19:1** on a
+ * raised surface, so a tab list passed every full-page scan and failed the
+ * first time it rendered inside a modal or a popover. `fg.emphasized` is the
+ * near-black/near-white step by construction — **15.49:1** on the light canvas
+ * and **13.62:1** on the dark raised surface — so no surface it can land on is
+ * marginal, and the mode-aware two-arm ramp is no longer needed.
+ *
+ * The indicator moves with the label. It was left on `primary.main` because a
+ * 2px underline is a GRAPHIC judged at 3:1, which the old value cleared — but
+ * that argument only justified LEAVING it, and an azure bar under an ink label
+ * is the half-migrated look.
+ *
+ * `primary.main` itself is not re-pegged, and should not be: it is a solid fill
+ * under white labels (`Checkbox`, `Switch`, `Banner`) where white on
+ * `blue.200` measures 2.60:1. Form controls keep the brand hue on purpose —
+ * a checkbox is a VALUE, not a place.
+ */
+export const TAB_RAMP = {
+  label: 'fg.emphasized',
+  indicator: 'fg.emphasized',
+} as const;
+
 export const horizontalSelectedStyles = {
-  color: 'primary.main',
+  color: TAB_RAMP.label,
   fontWeight: 'semibold',
   position: 'relative',
   _after: {
@@ -20,13 +54,16 @@ export const horizontalSelectedStyles = {
     left: 0,
     width: '100%',
     height: '2px',
-    background: 'primary.main',
+    background: TAB_RAMP.indicator,
   },
 };
 
 export const verticalSelectedStyles = {
-  backgroundColor: 'primary.extralight', // #E8EEFB
-  color: 'primary.dark', // #0D317D
+  // Neutral fill, not a brand tint, for the same reason the label is ink: the
+  // vertical tab rail is navigation chrome. `bg.muted` inverts with the mode,
+  // where `primary.extralight` was a fixed light wash.
+  backgroundColor: 'bg.muted',
+  color: 'fg.emphasized',
   fontWeight: 'bold',
   _after: { content: 'none' },
   _before: {
@@ -37,6 +74,12 @@ export const verticalSelectedStyles = {
     insetInlineEnd: 'unset',
     insetBlock: 0,
     width: '2px',
-    background: 'primary.main',
+    // Follows the label, like the horizontal tab's underline does. This one was
+    // missed when selection moved to ink: the vertical rail carries its OWN
+    // indicator here rather than through `TAB_RAMP.indicator`, so changing the
+    // ramp left an azure bar beside an ink label — the half-migrated look the
+    // ink change existed to remove. Reads through the ramp now so the two
+    // orientations cannot drift apart again.
+    background: TAB_RAMP.indicator,
   },
 };

package/src/components/Tabs/Tab/index.ts

@@ -1,2 +1,3 @@
 export type { TabProps } from './Tab';
 export { Tab } from './Tab';
+export { TAB_RAMP } from './Tab.styles';

package/src/components/Tabs/index.tsx

@@ -1,5 +1,5 @@
 export type { TabProps } from './Tab';
-export { Tab } from './Tab';
+export { Tab, TAB_RAMP } from './Tab';
 export type { TabListProps } from './TabList';
 export { TabList } from './TabList';
 export type { TabPanelProps } from './TabPanel';

package/src/components/Tag/Tag.styles.ts

@@ -16,8 +16,8 @@ export const tagColorPaletteStyles: Record<
   primary: {
     soft: {
       bgColor: 'primary.extralight',
-      borderColor: 'primary.light',
-      color: 'primary.dark',
+      borderColor: 'primary.lighter',
+      color: 'primary.darker',
     },
     solid: {
       bgColor: 'blue.500',
@@ -27,14 +27,14 @@ export const tagColorPaletteStyles: Record<
     outline: {
       bgColor: 'transparent',
       borderColor: 'primary.main',
-      color: 'primary.main',
+      color: 'primary.dark',
     },
   },
   secondary: {
     soft: {
       bgColor: 'secondary.extralight',
-      borderColor: 'secondary.light',
-      color: 'secondary.dark',
+      borderColor: 'secondary.lighter',
+      color: 'secondary.darker',
     },
     solid: {
       bgColor: 'violet.500',
@@ -44,14 +44,14 @@ export const tagColorPaletteStyles: Record<
     outline: {
       bgColor: 'transparent',
       borderColor: 'secondary.main',
-      color: 'secondary.main',
+      color: 'secondary.dark',
     },
   },
   danger: {
     soft: {
       bgColor: 'danger.extralight',
-      borderColor: 'danger.light',
-      color: 'danger.dark',
+      borderColor: 'danger.lighter',
+      color: 'danger.darker',
     },
     solid: {
       bgColor: 'rose.500',
@@ -61,14 +61,14 @@ export const tagColorPaletteStyles: Record<
     outline: {
       bgColor: 'transparent',
       borderColor: 'danger.main',
-      color: 'danger.main',
+      color: 'danger.dark',
     },
   },
   success: {
     soft: {
       bgColor: 'success.extralight',
-      borderColor: 'success.light',
-      color: 'success.dark',
+      borderColor: 'success.lighter',
+      color: 'success.darker',
     },
     solid: {
       bgColor: 'green.600',
@@ -78,34 +78,40 @@ export const tagColorPaletteStyles: Record<
     outline: {
       bgColor: 'transparent',
       borderColor: 'success.main',
-      color: 'success.main',
+      color: 'success.dark',
     },
   },
   warning: {
     soft: {
       bgColor: 'warning.extralight',
-      borderColor: 'warning.light',
-      color: 'warning.dark',
+      borderColor: 'warning.lighter',
+      color: 'warning.darker',
     },
     solid: {
-      bgColor: 'gold.500',
-      borderColor: 'gold.500',
-      color: 'gold.900', // dark text: white/gold.500 was 2.39:1; gold.900 = 6.73:1
+      // Deepened from gold.500 so white text clears AA and the chip matches the
+      // other solids (white on a saturated fill). White/gold.500 was only
+      // 2.39:1; white/gold.700 = 5.86:1 ✓ AA. Bright gold + near-black text read
+      // harsh on the dark canvas.
+      bgColor: 'gold.700',
+      borderColor: 'gold.700',
+      color: 'white',
     },
     outline: {
       bgColor: 'transparent',
       borderColor: 'warning.main',
-      color: 'warning.main',
+      // warning.dark (gold.700, 5.8:1 AA) over warning.main (gold.500, 3.0:1) —
+      // darker text also lifts this off the palette's AA-risk step.
+      color: 'warning.dark',
     },
   },
   neutral: {
     soft: {
-      // Flip surface + border with the mode so the fg.muted text stays legible
+      // Flip surface + border with the mode so the fg.default text stays legible
       // in dark. Light values preserved (bg.muted → gray.100, border.default →
       // gray.300).
       bgColor: 'bg.muted',
       borderColor: 'border.default',
-      color: 'fg.muted',
+      color: 'fg.default',
     },
     solid: {
       bgColor: 'gray.800',
@@ -115,7 +121,7 @@ export const tagColorPaletteStyles: Record<
     outline: {
       bgColor: 'transparent',
       borderColor: 'border.strong', // gray.500 / gray.900 (_dark)
-      color: 'fg.subtle',
+      color: 'fg.muted',
     },
   },
 };

package/src/components/Tag/Tag.tsx

@@ -1,8 +1,9 @@
 import { ForwardedRef, forwardRef } from 'react';
 import { Tag as ChakraTag } from '@chakra-ui/react';
 
+import { polymorphic } from '../../types/polymorphic';
 import { getTagStyles } from './Tag.styles';
-import { TagProps } from './Tag.types';
+import { TagOwnProps } from './Tag.types';
 
 /**
  * Tag component for categorization, filtering, and labeling.
@@ -23,9 +24,14 @@ import { TagProps } from './Tag.types';
  * </Tag>
  * ```
  */
-export const Tag = forwardRef(
+const TagImpl = forwardRef(
   (
-    { colorPalette = 'neutral', variant = 'soft', children, ...rest }: TagProps,
+    {
+      colorPalette = 'neutral',
+      variant = 'soft',
+      children,
+      ...rest
+    }: TagOwnProps,
     ref?: ForwardedRef<HTMLDivElement>
   ) => {
     const styles = getTagStyles(colorPalette, variant);
@@ -36,6 +42,7 @@ export const Tag = forwardRef(
         borderRadius="md"
         boxShadow="none"
         fontSize="sm"
+        fontWeight="semibold"
         {...styles}
         {...rest}
         ref={ref}
@@ -46,4 +53,7 @@ export const Tag = forwardRef(
   }
 );
 
-Tag.displayName = 'Tag';
+TagImpl.displayName = 'Tag';
+
+/** Type-level polymorphism over the same runtime — see `polymorphic`. */
+export const Tag = polymorphic<TagOwnProps, 'span'>(TagImpl);

package/src/components/Tag/Tag.types.ts

@@ -1,5 +1,9 @@
+import type { ElementType } from 'react';
 import { TagRootProps } from '@chakra-ui/react';
 
+// Relative, NOT `@/types/*` — see `src/types/polymorphic.ts`.
+import type { PolymorphicProps } from '../../types/polymorphic';
+
 /**
  * Tag color schemes - determines the semantic color of the tag.
  *
@@ -40,10 +44,19 @@ export type TagVariant = 'soft' | 'solid' | 'outline';
  * </Tag>
  * ```
  */
-export interface TagProps extends Omit<
+export type TagOwnProps = Omit<
   TagRootProps,
-  'colorPalette' | 'variant'
-> {
+  'colorPalette' | 'variant' | 'as'
+> & {
   colorPalette?: TagColorPalette;
   variant?: TagVariant;
-}
+};
+
+/**
+ * Props for `Tag`, typed for whatever element `as` renders. Defaults to
+ * `'span'`, so the bare type is unchanged.
+ */
+export type TagProps<TElement extends ElementType = 'span'> = PolymorphicProps<
+  TElement,
+  TagOwnProps
+>;

package/src/components/Tag/index.ts

@@ -7,7 +7,12 @@ export {
   tagColorPaletteStyles,
   tagVariants,
 } from './Tag.styles';
-export type { TagColorPalette, TagProps, TagVariant } from './Tag.types';
+export type {
+  TagColorPalette,
+  TagOwnProps,
+  TagProps,
+  TagVariant,
+} from './Tag.types';
 export * from './TagCloseButton';
 export * from './TagLabel';
 

package/src/components/Textarea/Textarea.tsx

@@ -1,6 +1,7 @@
 import { ChangeEvent, forwardRef, useEffect, useState } from 'react';
 import { Textarea as ChakraTextarea } from '@chakra-ui/react';
 
+import { noZoomOnFocus } from '@/theme/formControls';
 import { mergeCss } from '@/utils/mergeCss';
 
 import { TextareaProps } from './Textarea.types';
@@ -93,6 +94,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
         }}
         {...props}
         css={mergeCss(
+          noZoomOnFocus,
           {
             '--focus-color': 'var(--chakra-colors-primary-main)',
             '--error-color': 'var(--chakra-colors-danger-main)',

package/src/components/Toast/Toast.action.test.tsx

@@ -0,0 +1,135 @@
+import { ChakraProvider } from '@chakra-ui/react';
+import {
+  act,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from '@testing-library/react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+
+import { system } from '@/theme';
+
+import { TOAST_ACTION_DURATION, TOAST_DEFAULT_DURATION } from './Toast.styles';
+import type { UseToastOptions } from './Toast.types';
+import { Toaster, toaster } from './Toaster';
+import { useToast } from './useToast';
+
+let showToast: ReturnType<typeof useToast>;
+
+const Harness = () => {
+  showToast = useToast();
+  return null;
+};
+
+const renderToaster = () =>
+  render(
+    <ChakraProvider value={system}>
+      <Toaster />
+      <Harness />
+    </ChakraProvider>
+  );
+
+const fire = (options: UseToastOptions) => {
+  let id = '';
+  act(() => {
+    id = showToast(options);
+  });
+  return id;
+};
+
+afterEach(() => {
+  act(() => {
+    toaster.remove();
+  });
+  vi.restoreAllMocks();
+});
+
+describe('Toast action', () => {
+  it('renders the action as a named button under the description', async () => {
+    renderToaster();
+    fire({
+      status: 'error',
+      description: '크레딧이 부족합니다.',
+      action: { label: '크레딧 구매', onClick: () => {} },
+    });
+
+    const action = await screen.findByRole('button', { name: '크레딧 구매' });
+    expect(action).toHaveAttribute('type', 'button');
+    // Exactly one action besides the close ×.
+    expect(screen.getAllByRole('button')).toHaveLength(2);
+  });
+
+  it('calls onClick once and dismisses the toast', async () => {
+    renderToaster();
+    const onClick = vi.fn();
+    fire({
+      status: 'error',
+      description: '크레딧이 부족합니다.',
+      action: { label: '크레딧 구매', onClick },
+    });
+
+    const action = await screen.findByRole('button', { name: '크레딧 구매' });
+    const root = action.closest('[data-scope="toast"][data-part="root"]');
+    expect(root).toHaveAttribute('data-state', 'open');
+
+    fireEvent.click(action);
+
+    expect(onClick).toHaveBeenCalledTimes(1);
+    // Dismissed: the root leaves the open state (exit animation follows).
+    await waitFor(() => expect(root).toHaveAttribute('data-state', 'closed'));
+  });
+
+  it("accepts Chakra's own toaster.create({ action }) without double-calling", async () => {
+    renderToaster();
+    const onClick = vi.fn();
+    act(() => {
+      toaster.create({
+        type: 'info',
+        description: 'Exported.',
+        action: { label: 'Open', onClick },
+      });
+    });
+
+    fireEvent.click(await screen.findByRole('button', { name: 'Open' }));
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('renders no action button when none is given', async () => {
+    renderToaster();
+    fire({ status: 'success', description: 'Saved.' });
+
+    await screen.findByText('Saved.');
+    expect(screen.getAllByRole('button')).toHaveLength(1); // close × only
+  });
+});
+
+describe('useToast duration', () => {
+  const durationOf = (options: UseToastOptions) => {
+    const create = vi.spyOn(toaster, 'create');
+    fire(options);
+    return create.mock.calls.at(-1)?.[0].duration;
+  };
+
+  it('defaults to 5s without an action', () => {
+    renderToaster();
+    expect(durationOf({ description: 'Saved.' })).toBe(TOAST_DEFAULT_DURATION);
+  });
+
+  it('defaults to 8s with an action', () => {
+    renderToaster();
+    expect(
+      durationOf({
+        description: 'Deleted.',
+        action: { label: 'Undo', onClick: () => {} },
+      })
+    ).toBe(TOAST_ACTION_DURATION);
+  });
+
+  it("keeps the caller's duration, including null", () => {
+    renderToaster();
+    const action = { label: 'Undo', onClick: () => {} };
+    expect(durationOf({ description: 'a', action, duration: 3000 })).toBe(3000);
+    expect(durationOf({ description: 'b', action, duration: null })).toBe(null);
+  });
+});

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

@@ -4,6 +4,7 @@ import { useState } from 'react';
 
 import { Button } from '../Button';
 import { Toast } from './Toast';
+import type { UseToastOptions } from './Toast.types';
 import { Toaster } from './Toaster';
 import { useToast } from './useToast';
 
@@ -481,3 +482,113 @@ export const RapidFire: Story = {
     );
   },
 };
+
+/**
+ * Toasts with an action.
+ *
+ * The action is a text action in the toast's own status color, under the
+ * description and aligned with it — not a neutral `<Button>` inside
+ * `description`. One action per toast; dismiss stays on the ×. A toast with
+ * an action stays for 8s unless `duration` is given.
+ *
+ * See "Guidelines/Actions in feedback surfaces".
+ */
+const ActionStory = ({
+  label,
+  options,
+}: {
+  label: string;
+  /** Builds the toast options; `fired` reports a click back to the story */
+  options: (fired: (message: string) => () => void) => UseToastOptions;
+}) => {
+  const showToast = useToast();
+  const [log, setLog] = useState<string | null>(null);
+  const fired = (message: string) => () => setLog(`onClick: ${message}`);
+
+  return (
+    <>
+      <Toaster />
+      <Stack gap={3} align="center">
+        <Button onClick={() => showToast(options(fired))}>{label}</Button>
+        {log && (
+          <Text fontSize="sm" color="fg.muted">
+            {log}
+          </Text>
+        )}
+      </Stack>
+    </>
+  );
+};
+
+export const ActionError: Story = {
+  name: 'Action / Error',
+  render: () => (
+    <ActionStory
+      label="Show error toast with action"
+      options={(fired) => ({
+        status: 'error',
+        description:
+          '크레딧이 부족해 응답을 생성하지 못했습니다. 이번 달 남은 크레딧: 0',
+        action: { label: '크레딧 구매', onClick: fired('크레딧 구매') },
+      })}
+    />
+  ),
+};
+
+export const ActionWarning: Story = {
+  name: 'Action / Warning',
+  render: () => (
+    <ActionStory
+      label="Show warning toast with action"
+      options={(fired) => ({
+        status: 'warning',
+        title: '모델 지원 종료',
+        description: '이 채팅의 모델이 지원 종료되어 기본 모델로 바뀌었습니다.',
+        action: { label: '모델 선택', onClick: fired('모델 선택') },
+      })}
+    />
+  ),
+};
+
+export const ActionInfo: Story = {
+  name: 'Action / Info',
+  render: () => (
+    <ActionStory
+      label="Show info toast with action"
+      options={(fired) => ({
+        status: 'info',
+        description: '내보내기가 끝났습니다. 파일을 다운로드할 수 있습니다.',
+        action: { label: '파일 열기', onClick: fired('파일 열기') },
+      })}
+    />
+  ),
+};
+
+export const ActionSuccess: Story = {
+  name: 'Action / Success',
+  render: () => (
+    <ActionStory
+      label="Show success toast with action"
+      options={(fired) => ({
+        status: 'success',
+        title: '업로드 완료',
+        description: '문서 3개를 프로젝트에 추가했습니다.',
+        action: { label: '프로젝트 보기', onClick: fired('프로젝트 보기') },
+      })}
+    />
+  ),
+};
+
+export const ActionShortMessage: Story = {
+  name: 'Action / Short message',
+  render: () => (
+    <ActionStory
+      label="Show short toast with undo"
+      options={(fired) => ({
+        status: 'success',
+        description: '채팅을 삭제했습니다.',
+        action: { label: '되돌리기', onClick: fired('되돌리기') },
+      })}
+    />
+  ),
+};

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

@@ -62,3 +62,63 @@ export const closeButtonStyles: Record<ToastStatus, BoxProps> = {
     },
   },
 };
+
+/**
+ * Action styles for each toast status.
+ *
+ * A toast's action is a text action in the toast's own text color — the same
+ * palette as `toastStyles[status].color` — with the hover tint of the close ×.
+ * No border and no fill: a neutral or outlined button inside a tinted toast
+ * reads as a separate card dropped on top of it.
+ *
+ * `ml: -2` cancels the horizontal padding so the label lines up with the
+ * description text above it.
+ */
+const actionBase: BoxProps = {
+  fontWeight: 'bold',
+  px: 2,
+  py: 1,
+  ml: -2,
+  height: 'auto',
+  alignSelf: 'flex-start',
+  borderRadius: 'sm',
+  borderWidth: 0,
+  bg: 'transparent',
+  cursor: 'pointer',
+};
+
+export const actionStyles: Record<ToastStatus, BoxProps> = {
+  info: {
+    ...actionBase,
+    color: 'primary.dark',
+    _hover: { bg: 'primary.lighter' },
+    _focusVisible: { outline: '2px solid', outlineColor: 'primary.dark' },
+  },
+  warning: {
+    ...actionBase,
+    color: 'warning.dark',
+    _hover: { bg: 'warning.lighter' },
+    _focusVisible: { outline: '2px solid', outlineColor: 'warning.dark' },
+  },
+  success: {
+    ...actionBase,
+    color: 'success.dark',
+    _hover: { bg: 'success.lighter' },
+    _focusVisible: { outline: '2px solid', outlineColor: 'success.dark' },
+  },
+  error: {
+    ...actionBase,
+    color: 'danger.dark',
+    _hover: { bg: 'danger.lighter' },
+    _focusVisible: { outline: '2px solid', outlineColor: 'danger.dark' },
+  },
+};
+
+/** Default duration (ms) of a toast without an action, when none is given */
+export const TOAST_DEFAULT_DURATION = 5000;
+
+/**
+ * Default duration (ms) of a toast that carries an action, when none is given.
+ * The reader needs time to read the message *and* decide to act.
+ */
+export const TOAST_ACTION_DURATION = 8000;

package/src/components/Toast/Toast.tsx

@@ -1,20 +1,25 @@
 import { Flex, Stack, Toast as ChakraToast } from '@chakra-ui/react';
 
-import { closeButtonStyles } from './Toast.styles';
+import { actionStyles, closeButtonStyles } from './Toast.styles';
 import { ToastProps } from './Toast.types';
 import { ToastIcon } from './ToastIcon/ToastIcon';
 
 /**
  * Toast component using Chakra UI v3 composition pattern
  *
- * Uses Toast.Root, Toast.Title, Toast.Description, and Toast.CloseTrigger
- * for better composition and customization.
+ * Uses Toast.Root, Toast.Title, Toast.Description, Toast.ActionTrigger and
+ * Toast.CloseTrigger for better composition and customization.
+ *
+ * `action` renders under the description as a text action in the status
+ * color, aligned with the text column. Don't put a `<Button>` in
+ * `description` — use `action`.
  */
 export const Toast = ({
   title,
   description,
   status = 'success',
   onClose,
+  action,
   ...rest
 }: ToastProps) => (
   <ChakraToast.Root
@@ -39,6 +44,14 @@ export const Toast = ({
             {description}
           </ChakraToast.Description>
         )}
+        {action && (
+          <ChakraToast.ActionTrigger
+            onClick={action.onClick}
+            {...(actionStyles[status] as any)}
+          >
+            {action.label}
+          </ChakraToast.ActionTrigger>
+        )}
       </Stack>
     </Flex>
     <ChakraToast.CloseTrigger