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

package/src/components/LineGraph/seriesColors.ts

@@ -0,0 +1,42 @@
+import type { SystemHue } from '@/theme/colors';
+import { SYSTEM_HUES } from '@/theme/palette.generated';
+
+/**
+ * Default stroke order for multi-series charts.
+ *
+ * Series 1 is the neutral brand line (`primary.main`); the rest cycle hues
+ * that carry no meaning in the system. Red, yellow and green are the danger,
+ * warning and success colours, and blue is info and links, so none of them
+ * may colour a series by default — a red "UV" line reads as an error.
+ *
+ * Every stroke clears 3:1 against the page in both modes. Cyan, mint and
+ * orange are too light at their base value in light mode (≈1.9:1), so they
+ * come last and use their increased-contrast value there.
+ */
+type SeriesHue = {
+  hue: Exclude<SystemHue, 'red' | 'yellow' | 'green' | 'blue'>;
+  light: 'base' | 'hc';
+};
+
+export const CHART_SERIES_HUES: readonly SeriesHue[] = [
+  { hue: 'brown', light: 'base' },
+  { hue: 'indigo', light: 'base' },
+  { hue: 'pink', light: 'base' },
+  { hue: 'teal', light: 'base' },
+  { hue: 'purple', light: 'base' },
+  { hue: 'cyan', light: 'hc' },
+  { hue: 'mint', light: 'hc' },
+  { hue: 'orange', light: 'hc' },
+];
+
+/** Stroke for series `index` (0-based); index 0 is the caller's primary line. */
+export const seriesColor = (
+  index: number,
+  primary: string,
+  isDark: boolean
+): string => {
+  if (index === 0) return primary;
+  const { hue, light } =
+    CHART_SERIES_HUES[(index - 1) % CHART_SERIES_HUES.length];
+  return isDark ? SYSTEM_HUES[hue].baseDark : SYSTEM_HUES[hue][light];
+};

package/src/components/Loaders/LoaderStatus.tsx

@@ -0,0 +1,25 @@
+import { VisuallyHidden } from '@chakra-ui/react';
+
+import { useTranslate } from '@/hooks/useTranslate';
+
+import LoadersTranslations from './Loaders.translations.json';
+
+/**
+ * Live-region props and the spoken text for a loader overlay.
+ *
+ * Live regions announce their text content, not `aria-label`, so the label is
+ * visually hidden text inside the status element. An idle loader exposes no
+ * status at all — an always-present "Loading" status on an idle page tells a
+ * screen reader the page is busy when it is not.
+ */
+export const useLoaderStatus = (isLoading: boolean, label?: string) => {
+  const translate = useTranslate(LoadersTranslations);
+  const text = label ?? (translate('loading') as string);
+
+  return {
+    statusProps: isLoading
+      ? ({ role: 'status', 'aria-live': 'polite' } as const)
+      : ({ 'aria-hidden': true } as const),
+    statusText: isLoading ? <VisuallyHidden>{text}</VisuallyHidden> : null,
+  };
+};

package/src/components/Loaders/Loaders.styles.ts

@@ -0,0 +1,28 @@
+import type { SystemStyleObject } from '@chakra-ui/react';
+
+/**
+ * The `thinking` loader's three dots.
+ *
+ * Local to this component for the same reason `Spinner`'s turn is local to
+ * `Spinner.styles.ts` (see `src/theme/claude.md` → Motion → Components): a
+ * loop with one caller belongs next to that caller, not in the shared
+ * `animationStyle` vocabulary of eight. The 1.2s period and 0.15s stagger are
+ * fixed by the house spec for this exact loader — not a preference this
+ * component is free to retune — so they are named constants here rather than
+ * literals scattered across the JSX.
+ *
+ * Reduced motion drops the loop entirely (`_motionReduce`): unlike `Spinner`,
+ * which slows rather than stops because a frozen spinner reads as a hung
+ * request, three static coral dots still read as "thinking" without motion —
+ * there is no "stopped" misreading to guard against.
+ */
+export const THINKING_DOT_DURATION = '1.2s';
+export const THINKING_DOT_STAGGER = '0.15s';
+
+export const thinkingDotAnimation: SystemStyleObject = {
+  animationName: 'pulse',
+  animationDuration: THINKING_DOT_DURATION,
+  animationTimingFunction: 'ease-in-out',
+  animationIterationCount: 'infinite',
+  _motionReduce: { animation: 'none' },
+};

package/src/components/Loaders/Loaders.test.tsx

@@ -0,0 +1,63 @@
+import { ChakraProvider } from '@chakra-ui/react';
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import { system } from '@/theme';
+
+import { PageLoader } from './PageLoader';
+import { SectionLoader } from './SectionLoader';
+
+const withTheme = (ui: React.ReactElement) =>
+  render(<ChakraProvider value={system}>{ui}</ChakraProvider>);
+
+describe('PageLoader', () => {
+  it('renders a status region', () => {
+    withTheme(<PageLoader isLoading />);
+    expect(screen.getByRole('status')).toBeInTheDocument();
+  });
+
+  it('renders three thinking dots for variant="thinking"', () => {
+    const { container } = withTheme(
+      <PageLoader isLoading variant="thinking" />
+    );
+    // Spinner is absent; three dots render instead.
+    expect(container.querySelectorAll('[aria-hidden="true"] > *')).toHaveLength(
+      3
+    );
+  });
+});
+
+describe('PageLoader status', () => {
+  it('an idle loader exposes no status', () => {
+    withTheme(<PageLoader isLoading={false} />);
+    expect(screen.queryByRole('status')).toBeNull();
+  });
+
+  it('while loading, the status carries its label as text content', () => {
+    withTheme(<PageLoader isLoading />);
+    // Live regions announce text, not aria-label.
+    expect(screen.getByRole('status').textContent).toBe('로딩 중');
+  });
+
+  it('label overrides the announced text', () => {
+    withTheme(<PageLoader isLoading label="Saving" />);
+    expect(screen.getByRole('status')).toHaveTextContent('Saving');
+  });
+});
+
+describe('SectionLoader', () => {
+  it('while loading, the status carries its label as text content', () => {
+    withTheme(<SectionLoader isLoading />);
+    expect(screen.getByRole('status').textContent).toBe('로딩 중');
+  });
+
+  it('renders nothing when not loading', () => {
+    const { container } = withTheme(<SectionLoader isLoading={false} />);
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it('renders a status region with the thinking dots variant', () => {
+    withTheme(<SectionLoader isLoading variant="thinking" />);
+    expect(screen.getByRole('status')).toBeInTheDocument();
+  });
+});

package/src/components/Loaders/Loaders.translations.json

@@ -0,0 +1,9 @@
+{
+  "loading": {
+    "ko": "로딩 중",
+    "en": "Loading",
+    "zh": "加载中",
+    "ja": "読み込み中",
+    "es": "Cargando"
+  }
+}

package/src/components/Loaders/PageLoader.stories.tsx

@@ -22,7 +22,21 @@ export const Basic: Story = {
   },
   render: (args) => {
     return (
-      <Box position="relative" p="128px" bg="red">
+      <Box position="relative" p="128px" bg="danger.bg">
+        <PageLoader {...args} />
+      </Box>
+    );
+  },
+};
+
+export const Thinking: Story = {
+  args: {
+    isLoading: true,
+    variant: 'thinking',
+  },
+  render: (args) => {
+    return (
+      <Box position="relative" p="128px" bg="danger.bg">
         <PageLoader {...args} />
       </Box>
     );

package/src/components/Loaders/PageLoader.tsx

@@ -2,28 +2,55 @@ import { Box, Flex, FlexProps } from '@chakra-ui/react';
 
 import { Spinner } from '@/components/Spinner';
 
+import { useLoaderStatus } from './LoaderStatus';
+import { ThinkingDots } from './ThinkingDots';
+
+export type LoaderVariant = 'default' | 'thinking';
+
+export type LoaderProps = FlexProps & {
+  isLoading: boolean;
+  variant?: LoaderVariant;
+  /**
+   * What a screen reader announces while loading. Defaults to the translated
+   * "loading" string (`로딩 중`).
+   */
+  label?: string;
+};
+
 export const PageLoader = ({
   isLoading,
+  variant = 'default',
+  label,
   ...rest
-}: FlexProps & { isLoading: boolean }) => {
+}: LoaderProps) => {
+  const { statusProps, statusText } = useLoaderStatus(isLoading, label);
   return (
     <Flex
       position="fixed"
       w="100vw"
-      h="100vh"
+      // `dvh`, not `vh`: on mobile `100vh` is the largest viewport, so the
+      // overlay ran under the URL bar.
+      h="100dvh"
       top={0}
       left={0}
       align="center"
       justify="center"
       opacity={isLoading ? 0.5 : 0}
-      transition="0.3s opacity ease"
+      animationStyle="feedback"
+      transitionProperty="opacity"
       bg="bg.canvas"
       zIndex={9999}
+      {...statusProps}
       {...rest}
     >
-      <Box position="relative">
-        <Spinner boxSize="60px" borderWidth="6px" css={{ zIndex: 999 }} />
-      </Box>
+      {statusText}
+      {variant === 'thinking' ? (
+        <ThinkingDots />
+      ) : (
+        <Box position="relative">
+          <Spinner boxSize="60px" borderWidth="6px" css={{ zIndex: 999 }} />
+        </Box>
+      )}
     </Flex>
   );
 };

package/src/components/Loaders/SectionLoader.stories.tsx

@@ -11,15 +11,22 @@ const meta = {
   },
   render: (args) => {
     return (
-      <Box p="128px" bg="primary.lighter">
+      <Box p="128px" bg="primary.washActive">
         <SectionLoader {...args} />
       </Box>
     );
-  }
+  },
 } satisfies Meta<typeof SectionLoader>;
 
 export default meta;
 
 type Story = StoryObj<typeof SectionLoader>;
 
-export const Basic: Story = {}
+export const Basic: Story = {};
+
+export const Thinking: Story = {
+  args: {
+    isLoading: true,
+    variant: 'thinking',
+  },
+};

package/src/components/Loaders/SectionLoader.tsx

@@ -1,11 +1,18 @@
-import { Flex, FlexProps } from '@chakra-ui/react';
+import { Flex } from '@chakra-ui/react';
 
 import { Spinner } from '@/components/Spinner';
 
+import { useLoaderStatus } from './LoaderStatus';
+import type { LoaderProps } from './PageLoader';
+import { ThinkingDots } from './ThinkingDots';
+
 export const SectionLoader = ({
   isLoading,
+  variant = 'default',
+  label,
   ...rest
-}: FlexProps & { isLoading: boolean }) => {
+}: LoaderProps) => {
+  const { statusProps, statusText } = useLoaderStatus(isLoading, label);
   if (!isLoading) return;
   return (
     <Flex
@@ -17,11 +24,18 @@ export const SectionLoader = ({
       align="center"
       justify="center"
       bg="bg.canvas"
-      transition="0.3 opacity ease"
+      animationStyle="feedback"
+      transitionProperty="opacity"
       zIndex={9999}
+      {...statusProps}
       {...rest}
     >
-      <Spinner boxSize="60px" borderWidth="6px" />
+      {statusText}
+      {variant === 'thinking' ? (
+        <ThinkingDots />
+      ) : (
+        <Spinner boxSize="60px" borderWidth="6px" />
+      )}
     </Flex>
   );
 };

package/src/components/Loaders/ThinkingDots.tsx

@@ -0,0 +1,27 @@
+import { Box, HStack } from '@chakra-ui/react';
+
+import { THINKING_DOT_STAGGER, thinkingDotAnimation } from './Loaders.styles';
+
+/**
+ * Three coral (`action.mark`) dots pulsing in sequence — the `thinking`
+ * loader variant. ARIA lives on the loader shell that renders this, not
+ * here, so it stays a pure decoration.
+ */
+export const ThinkingDots = () => (
+  <HStack gap="1.5" aria-hidden="true">
+    {[0, 1, 2].map((index) => (
+      <Box
+        key={index}
+        boxSize="8px"
+        borderRadius="full"
+        bg="action.mark"
+        css={{
+          ...thinkingDotAnimation,
+          animationDelay: `calc(${THINKING_DOT_STAGGER} * ${index})`,
+        }}
+      />
+    ))}
+  </HStack>
+);
+
+ThinkingDots.displayName = 'ThinkingDots';

package/src/components/Loaders/index.ts

@@ -1,2 +1,3 @@
-export { PageLoader } from './PageLoader';
+export { type LoaderProps, type LoaderVariant, PageLoader } from './PageLoader';
 export { SectionLoader } from './SectionLoader';
+export { ThinkingDots } from './ThinkingDots';

package/src/components/LogicianProvider/LogicianProvider.stories.tsx

@@ -29,10 +29,10 @@ export const Default: Story = {
         {/* Font showcase */}
         <Box
           p={4}
-          bg="gray.50"
+          bg="bg.subtle"
           borderRadius="md"
           borderWidth="1px"
-          borderColor="gray.200"
+          borderColor="border.subtle"
           w="100%"
         >
           <VStack align="start" gap={2}>
@@ -51,23 +51,13 @@ export const Default: Story = {
 
         {/* Border radius showcase */}
         <Box>
-          <Button
-            colorPalette="primary"
-            variant="soft"
-            mr={4}
-            borderRadius="md"
-          >
+          <Button variant="subtle" mr={4} borderRadius="md">
             Medium Radius (8px)
           </Button>
-          <Button
-            colorPalette="secondary"
-            variant="soft"
-            mr={4}
-            borderRadius="lg"
-          >
+          <Button variant="subtle" mr={4} borderRadius="lg">
             Large Radius (12px)
           </Button>
-          <Button colorPalette="primary" variant="outline" borderRadius="xl">
+          <Button variant="secondary" borderRadius="xl">
             XL Radius (32px)
           </Button>
         </Box>
@@ -80,7 +70,7 @@ export const Default: Story = {
               Container xs (480px max)
             </Text>
           </Container>
-          <Container maxW="sm" bg="secondary.extralight" p={4} borderRadius="md">
+          <Container maxW="sm" bg="bg.muted" p={4} borderRadius="md">
             <Text fontSize="sm" color="secondary.dark">
               Container sm (640px max)
             </Text>
@@ -120,7 +110,7 @@ export const Default: Story = {
               sm: 'warning.extralight',
               md: 'success.extralight',
               lg: 'primary.extralight',
-              xl: 'secondary.extralight',
+              xl: 'bg.muted',
             }}
             borderColor={{
               base: 'danger.main',
@@ -202,10 +192,10 @@ export const WithCustomConfig: Story = {
           {/* Info box */}
           <Box
             p={4}
-            bg="gray.50"
+            bg="bg.subtle"
             borderRadius="md"
             borderWidth="1px"
-            borderColor="gray.200"
+            borderColor="border.subtle"
             w="100%"
           >
             <VStack align="start" gap={2}>
@@ -225,23 +215,13 @@ export const WithCustomConfig: Story = {
 
           {/* Border radius showcase */}
           <Box>
-            <Button
-              colorPalette="primary"
-              variant="soft"
-              mr={4}
-              borderRadius="md"
-            >
+            <Button variant="subtle" mr={4} borderRadius="md">
               Medium Radius (4px)
             </Button>
-            <Button
-              colorPalette="secondary"
-              variant="soft"
-              mr={4}
-              borderRadius="lg"
-            >
+            <Button variant="subtle" mr={4} borderRadius="lg">
               Large Radius (20px)
             </Button>
-            <Button colorPalette="primary" variant="outline" borderRadius="xl">
+            <Button variant="secondary" borderRadius="xl">
               XL Radius (50px)
             </Button>
           </Box>
@@ -249,22 +229,27 @@ export const WithCustomConfig: Story = {
           {/* Container showcase */}
           <VStack gap={4} w="100%" align="start">
             <Text fontWeight="bold">Container Sizes (Custom):</Text>
-            <Container maxW="xs" bg="primary.extralight" p={4} borderRadius="md">
-              <Text fontSize="sm" color="primary.dark">
-                Container xs (300px max) - Much smaller!
-              </Text>
-            </Container>
             <Container
-              maxW="sm"
-              bg="secondary.extralight"
+              maxW="xs"
+              bg="primary.extralight"
               p={4}
               borderRadius="md"
             >
+              <Text fontSize="sm" color="primary.dark">
+                Container xs (300px max) - Much smaller!
+              </Text>
+            </Container>
+            <Container maxW="sm" bg="bg.muted" p={4} borderRadius="md">
               <Text fontSize="sm" color="secondary.dark">
                 Container sm (500px max) - Smaller
               </Text>
             </Container>
-            <Container maxW="md" bg="success.extralight" p={4} borderRadius="md">
+            <Container
+              maxW="md"
+              bg="success.extralight"
+              p={4}
+              borderRadius="md"
+            >
               <Text fontSize="sm" color="success.dark">
                 Container md (900px max) - Larger!
               </Text>
@@ -302,7 +287,7 @@ export const WithCustomConfig: Story = {
                 sm: 'warning.extralight',
                 md: 'success.extralight',
                 lg: 'primary.extralight',
-                xl: 'secondary.extralight',
+                xl: 'bg.muted',
               }}
               borderColor={{
                 base: 'danger.main',
@@ -331,14 +316,14 @@ export const WithCustomConfig: Story = {
                 🖥️ xl (1600px+) ⚠️ CUSTOM - Purple
               </Text>
             </Box>
-            <Text fontSize="sm" color="gray.700">
+            <Text fontSize="sm" color="fg.muted">
               💡 Tip: Resize your browser window between 320px-375px to see the
               difference! Default switches to yellow at 320px, but this custom
               config switches at 375px.
             </Text>
           </VStack>
 
-          <Text color="gray.1200" fontSize="sm">
+          <Text color="fg.default" fontSize="sm">
             ✅ All Logician colors, semantic tokens, and component styles are
             preserved while FactChat-specific configurations (fonts, radii,
             containers, breakpoints) are overridden.

package/src/components/LogicianProvider/LogicianProvider.tsx

@@ -8,7 +8,13 @@ import { ColorModeProvider } from '@/components/ColorMode';
 import type { SupportedLanguage } from '@/components/MonthPicker/constants';
 import { LanguageContext } from '@/hooks/useLanguage';
 
-import { logicianConfig, system as defaultSystem } from '../../theme';
+import {
+  createLogicianTheme,
+  logicianConfig,
+  type LogicianThemeOptions,
+  normalizeSemanticOverrides,
+  system as defaultSystem,
+} from '../../theme';
 
 const FONT_STYLESHEETS = [
   // Pretendard Variable — covers Korean + Latin with dynamic subsetting
@@ -67,6 +73,18 @@ export interface LogicianProviderProps {
    */
   config?: SystemConfig;
 
+  /**
+   * Palette options for the built-in theme — which raw scale fills the
+   * neutral/secondary semantic steps. Omit for BAZE (`{ neutral: 'ink',
+   * secondary: 'sand' }`).
+   *
+   * @example
+   * ```tsx
+   * <LogicianProvider theme={{ neutral: 'slate' }}>…</LogicianProvider>
+   * ```
+   */
+  theme?: LogicianThemeOptions;
+
   /**
    * Language code for internationalization.
    * Used by date pickers, month pickers, and other locale-aware components.
@@ -133,6 +151,7 @@ export interface LogicianProviderProps {
  */
 export const LogicianProvider: React.FC<LogicianProviderProps> = ({
   config,
+  theme,
   language = 'en',
   loadFonts = true,
   defaultColorMode = 'system',
@@ -146,13 +165,24 @@ export const LogicianProvider: React.FC<LogicianProviderProps> = ({
     }
   }, [loadFonts]);
 
+  const neutral = theme?.neutral;
+  const secondary = theme?.secondary;
   const system = useMemo(() => {
-    if (!config) {
+    const isDefaultPalette =
+      (neutral ?? 'ink') === 'ink' && (secondary ?? 'sand') === 'sand';
+    if (!config && isDefaultPalette) {
       return defaultSystem;
     }
-    // Merge defaultConfig, logicianConfig, and user config
-    return createSystem(defaultConfig, logicianConfig, config);
-  }, [config]);
+    const base = isDefaultPalette
+      ? logicianConfig
+      : createLogicianTheme({ neutral, secondary });
+    // Merge defaultConfig, the Logician palette config, and user config. The
+    // user's `{ base }` colour overrides are copied to `_light` so they still
+    // win over the library's `_light` roles (see normalizeSemanticOverrides).
+    return config
+      ? createSystem(defaultConfig, base, normalizeSemanticOverrides(config))
+      : createSystem(defaultConfig, base);
+  }, [config, neutral, secondary]);
 
   const languageValue = useMemo(() => ({ language }), [language]);
 

package/src/components/Markdown/Markdown.tsx

@@ -22,7 +22,12 @@ const H2Wrapper = (props: any) => <H2 {...props} />;
 const H3Wrapper = (props: any) => <H3 {...props} />;
 const H4Wrapper = (props: any) => <H4 {...props} />;
 const H5Wrapper = (props: any) => <H5 {...props} />;
-const SubtitleWrapper = (props: any) => <Subtitle {...props} />;
+// `as="h6"` explicitly. `Subtitle` renders a paragraph by default now (its call
+// sites are overwhelmingly helper copy that was never a heading), but this
+// wrapper is markdown's `h6` — a heading the author actually wrote. Inheriting
+// the new default here would silently drop `###### 제목` out of the document
+// outline, which is the same KWCAG 5.2.4.2 (제목 제공) defect inverted.
+const SubtitleWrapper = (props: any) => <Subtitle as="h6" {...props} />;
 const TheadWrapper = (props: any) => <Thead {...props} />;
 const TbodyWrapper = (props: any) => <Tbody {...props} />;
 const TrWrapper = (props: any) => <Tr {...props} />;

package/src/components/Masonry/Masonry.stories.tsx

@@ -48,7 +48,8 @@ const generateItems = (count: number) => {
   return Array.from({ length: count }).map((_, index) => ({
     id: index,
     height: 100 + Math.floor(Math.random() * 200), // Random heights between 100-300px
-    color: index % 2 === 0 ? 'blue.50' : 'purple.50',
+    color:
+      index % 2 === 0 ? 'category.blue.surface' : 'category.purple.surface',
     title: `Item ${index + 1}`,
   }));
 };
@@ -81,7 +82,7 @@ export const Basic: Story = {
 // Example with realistic content
 export const WithRealContent: Story = {
   render: (args) => {
-    const bgColor = 'gray.50'; // Light mode only
+    const bgColor = 'bg.subtle';
     const categories = [
       {
         name: 'Social Media',
@@ -118,21 +119,32 @@ export const WithRealContent: Story = {
             shadow="sm"
             mb={4}
           >
-            <Text fontWeight="bold" textStyle="h5" mb={2} color="blue.500">
+            <Text
+              fontWeight="bold"
+              textStyle="h5"
+              mb={2}
+              color="category.blue.fg"
+            >
               {category.name}
             </Text>
             {category.items.map((item) => (
               <Box
                 key={item}
                 p={2}
-                _hover={{ bg: 'gray.100' }}
+                _hover={{ bg: 'primary.wash' }}
                 borderRadius="md"
                 transition="background 0.2s"
                 cursor="pointer"
                 display="flex"
                 alignItems="center"
               >
-                <Box w="24px" h="24px" bg="blue.100" borderRadius="full" mr={2} />
+                <Box
+                  w="24px"
+                  h="24px"
+                  bg="category.blue.surface"
+                  borderRadius="full"
+                  mr={2}
+                />
                 <Text>{item}</Text>
               </Box>
             ))}