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

package/src/components/Workflow/canvas/GraphErrorBanner/GraphErrorBanner.tsx

@@ -4,7 +4,7 @@ import { useMemo, useState } from 'react';
 import { Box, Flex, VStack } from '@chakra-ui/react';
 import { useReactFlow } from '@xyflow/react';
 
-import { TbChevronDown } from '@/components/Icon';
+import { ChevronDownIcon } from '@/components/Icon';
 import { Spinner } from '@/components/Spinner';
 import { Subtext, Text } from '@/components/Typography';
 
@@ -167,7 +167,7 @@ export function GraphErrorBanner({
       maxW="md"
       bg="bg.surface"
       borderWidth="1px"
-      borderColor={errorCount > 0 ? 'danger.main' : 'warning.main'}
+      borderColor={errorCount > 0 ? 'danger.border' : 'warning.border'}
       borderRadius="md"
       boxShadow="sm"
       overflow="hidden"
@@ -178,12 +178,12 @@ export function GraphErrorBanner({
           gap={2}
           px={3}
           py={2}
-          bg="slate.50"
+          bg="bg.subtle"
           borderBottomWidth="1px"
-          borderColor="slate.200"
+          borderColor="border.default"
         >
           <Spinner size="xs" />
-          <Subtext fontWeight="semibold" color="slate.1100">
+          <Subtext fontWeight="semibold" color="fg.default">
             {translate('workflow_issues_validating') as string}
           </Subtext>
         </Flex>
@@ -201,17 +201,19 @@ export function GraphErrorBanner({
         border="none"
         cursor="pointer"
         opacity={showValidating ? 0.6 : 1}
-        transition="opacity 0.15s"
+        animationStyle="feedback"
+        transitionProperty="opacity"
         onClick={() => setOpen((o) => !o)}
       >
-        <Text fontSize="sm" fontWeight="semibold" color="slate.1300">
+        <Text fontSize="sm" fontWeight="semibold" color="fg.default">
           {summarize(errorCount, warningCount)}
         </Text>
-        <TbChevronDown
+        <ChevronDownIcon
           boxSize="xs"
-          color="slate.900"
+          color="fg.icon"
           transform={open ? 'rotate(180deg)' : 'none'}
-          transition="transform 0.15s"
+          animationStyle="feedback"
+          transitionProperty="transform"
         />
       </Box>
       {open ? (
@@ -221,29 +223,30 @@ export function GraphErrorBanner({
           maxH="80"
           overflowY="auto"
           opacity={showValidating ? 0.6 : 1}
-          transition="opacity 0.15s"
+          animationStyle="feedback"
+          transitionProperty="opacity"
           borderTopWidth="1px"
-          borderColor="slate.200"
+          borderColor="border.default"
         >
           {groups.map((group, gi) => (
             <Box
               key={group.key}
               borderTopWidth={gi === 0 ? 0 : '1px'}
-              borderColor="slate.200"
+              borderColor="border.default"
             >
               <Flex
                 align="center"
                 gap={2}
                 px={3}
                 py={1.5}
-                bg="slate.50"
+                bg="bg.subtle"
                 cursor={group.node ? 'pointer' : 'default'}
-                _hover={group.node ? { bg: 'slate.100' } : undefined}
+                _hover={group.node ? { bg: 'primary.wash' } : undefined}
                 onClick={group.node ? () => jumpToNode(group.key) : undefined}
               >
                 {group.def?.icon ? (
                   <Box
-                    color="slate.1100"
+                    color="fg.default"
                     display="flex"
                     alignItems="center"
                     flexShrink={0}
@@ -251,7 +254,7 @@ export function GraphErrorBanner({
                     <group.def.icon boxSize="xs" />
                   </Box>
                 ) : null}
-                <Subtext fontWeight="semibold" color="slate.1300" truncate>
+                <Subtext fontWeight="semibold" color="fg.default" truncate>
                   {group.node
                     ? getNodeTitle(group.node, group.def)
                     : translate('workflow_drawer_graph_group_title')}

package/src/components/Workflow/canvas/IconTile/IconTile.styles.ts

@@ -3,29 +3,45 @@ import type { CategoryTokenMap, CategoryTokens } from './IconTile.types';
 
 /**
  * Default mapping from the six categories to logician-ui semantic color
- * tokens. "fg" tints the icon, "bg" fills the tile background. Output and
- * Note don't map cleanly to a `colorPalette` so they're spelled out with
- * raw token pairs.
+ * tokens. "fg" tints the icon, "bg" fills the tile background.
+ *
+ * 5.0: category tiles are decorative, not status — so five of the six pick a
+ * `category.*` hue (purely for visual grouping, swap-able via `categoryTokens`
+ * without implying anything is wrong/warning/safe) instead of borrowing
+ * `success`/`danger`/`secondary`, which are status/brand families with their
+ * own meaning elsewhere in the same canvas. `output` has no obvious hue, so
+ * it gets the documented neutral pair (`primary.wash` + `fg.default`) instead
+ * of inventing a 13th hue. `note` keeps a real `warning.*` triple — unlike the
+ * others it already reads as "a note needs your attention", which IS a status
+ * meaning, so it stays on the status family rather than moving to a hue.
  *
  * Host apps that want to retheme can override the map via the
  * `categoryTokens` prop on `<Workflow>` — see WorkflowContext.
  */
 export const DEFAULT_CATEGORY_TOKENS: CategoryTokenMap = {
   trigger: {
-    bg: 'success.lightest',
-    fg: 'success.main',
-    border: 'slate.300',
+    bg: 'category.green.surface',
+    fg: 'category.green.fg',
+    border: 'border.default',
+  },
+  ai: {
+    bg: 'category.purple.surface',
+    fg: 'category.purple.fg',
+    border: 'border.default',
   },
-  ai: { bg: 'primary.lightest', fg: 'primary.main', border: 'slate.300' },
   logic: {
-    bg: 'secondary.lightest',
-    fg: 'secondary.main',
-    border: 'slate.300',
+    bg: 'category.brown.surface',
+    fg: 'category.brown.fg',
+    border: 'border.default',
+  },
+  safety: {
+    bg: 'category.red.surface',
+    fg: 'category.red.fg',
+    border: 'border.default',
   },
-  safety: { bg: 'danger.lightest', fg: 'danger.main', border: 'slate.300' },
-  output: { bg: 'slate.50', fg: 'slate.1200', border: 'slate.300' },
+  output: { bg: 'primary.wash', fg: 'fg.default', border: 'border.default' },
   // Note's `border` doubles as the body border so it reads as warm, not gray.
-  note: { bg: 'warning.lightest', fg: 'warning.dark', border: 'warning.light' },
+  note: { bg: 'warning.bg', fg: 'warning.fg', border: 'warning.border' },
 };
 
 /**

package/src/components/Workflow/canvas/IssueList/IssueList.tsx

@@ -58,7 +58,7 @@ export function IssueList({
           py={1.5}
           align="center"
           cursor={onIssueClick ? 'pointer' : undefined}
-          _hover={onIssueClick ? { bg: 'slate.50' } : undefined}
+          _hover={onIssueClick ? { bg: 'primary.wash' } : undefined}
           onClick={
             onIssueClick
               ? (e) => {
@@ -72,9 +72,9 @@ export function IssueList({
             w="3px"
             flexShrink={0}
             borderRadius="full"
-            bg={severityColorToken(issue.severity)}
+            bg={severityColorToken(issue.severity, 'solid')}
           />
-          <Text fontSize="sm" color="slate.1200">
+          <Text fontSize="sm" color="fg.default">
             {resolveMessage ? resolveMessage(issue) : issue.message}
           </Text>
         </Flex>

package/src/components/Workflow/canvas/NodePalette/NodePalette.tsx

@@ -1,10 +1,10 @@
 'use client';
 
-import { DragEvent } from 'react';
+import { DragEvent, useId } from 'react';
 import { Box, HStack, Stack } from '@chakra-ui/react';
 
 import { Card } from '@/components/Card';
-import { GripVertical, TbX } from '@/components/Icon';
+import { CloseIcon, GripVerticalIcon } from '@/components/Icon';
 import { IconButton } from '@/components/IconButton';
 import { Subtext, Subtitle } from '@/components/Typography';
 
@@ -70,17 +70,17 @@ function PaletteItem({ def }: { def: NodeTypeDef }) {
           tokens={categoryTokens}
         />
         <Stack gap={0} flex={1} minWidth={0}>
-          <Subtext fontWeight="semibold" color="slate.1200" lineClamp={1}>
+          <Subtext fontWeight="semibold" color="fg.default" lineClamp={1}>
             {def.label}
           </Subtext>
           {description ? (
-            <Subtext color="slate.900" lineClamp={1}>
+            <Subtext color="fg.muted" lineClamp={1}>
               {description}
             </Subtext>
           ) : null}
         </Stack>
-        <Box color="slate.700" display="flex" alignItems="center">
-          <GripVertical boxSize="xs" />
+        <Box color="fg.icon" display="flex" alignItems="center">
+          <GripVerticalIcon boxSize="xs" />
         </Box>
       </HStack>
     </Card>
@@ -95,6 +95,8 @@ function PaletteItem({ def }: { def: NodeTypeDef }) {
 export function NodePalette({ onClose }: { onClose: () => void }) {
   const { nodeTypes, readOnly } = useWorkflow();
   const translate = useWorkflowTranslate();
+  // Names the region below with the same words the header shows.
+  const titleId = useId();
   if (readOnly) return null;
 
   // Group by category, preserving registration order within each group.
@@ -115,6 +117,14 @@ export function NodePalette({ onClose }: { onClose: () => void }) {
 
   return (
     <FloatingCard
+      // A named region, so the palette is something a screen-reader user can
+      // navigate TO. Its title used to be a `Subtitle`, which rendered `<h6>`
+      // and put a level-6 heading under the host page's `<h1>` (axe
+      // `heading-order`); `Subtitle` is a paragraph now, and a labelled region
+      // is what this panel actually is — a landmark, not an outline entry
+      // (KWCAG 2.1 5.2.4.1 반복 영역 건너뛰기 / 5.2.4.2 제목 제공).
+      role="region"
+      aria-labelledby={titleId}
       width={PALETTE_WIDTH}
       mt={4}
       mb={4}
@@ -138,19 +148,18 @@ export function NodePalette({ onClose }: { onClose: () => void }) {
         px={4}
         py={3}
         borderBottom="1px solid"
-        borderColor="slate.200"
+        borderColor="border.default"
       >
-        <Subtitle color="slate.1300">
+        <Subtitle id={titleId} color="fg.default">
           {translate('workflow_palette_title')}
         </Subtitle>
         <IconButton
           aria-label={translate('workflow_palette_close') as string}
           size="xs"
           variant="ghost"
-          colorPalette="neutral"
           onClick={onClose}
         >
-          <TbX boxSize="xs" aria-hidden />
+          <CloseIcon boxSize="xs" aria-hidden />
         </IconButton>
       </HStack>
       <Box flex="1" minHeight={0} overflowY="auto" p={3}>
@@ -159,7 +168,7 @@ export function NodePalette({ onClose }: { onClose: () => void }) {
             <Stack key={category} gap={2}>
               <Subtext
                 fontWeight="bold"
-                color="slate.900"
+                color="fg.muted"
                 textTransform="uppercase"
                 letterSpacing="wider"
                 pl={1}

package/src/components/Workflow/canvas/NodePalette/NodePaletteToggle.tsx

@@ -2,7 +2,7 @@
 
 import { Box } from '@chakra-ui/react';
 
-import { IoAddOutline } from '@/components/Icon';
+import { PlusIcon } from '@/components/Icon';
 import { IconButton } from '@/components/IconButton';
 import { Tooltip } from '@/components/Tooltip';
 
@@ -25,13 +25,12 @@ export function NodePaletteToggle({ onOpen }: { onOpen: () => void }) {
         <IconButton
           aria-label={label}
           size="md"
-          variant="outline"
-          colorPalette="neutral"
+          variant="secondary"
           bg="bg.surface"
           boxShadow="md"
           onClick={onOpen}
         >
-          <IoAddOutline boxSize="md" />
+          <PlusIcon boxSize="md" />
         </IconButton>
       </Tooltip>
     </Box>

package/src/components/Workflow/canvas/NodeShell/NodeShell.styles.ts

@@ -1,3 +1,4 @@
+import { CANVAS_STROKE_TOKEN, colorVar } from '../colorVar';
 import type { PortStyle } from './NodeShell.types';
 
 export const CARD_WIDTH = '174px';
@@ -44,17 +45,14 @@ export const MAX_META_CHIPS = 4;
 
 /**
  * React Flow `<Handle>` takes inline SVG-style props rather than Chakra
- * tokens, so port colors are spelled as CSS vars from the theme.
+ * tokens, so port colors are spelled as CSS vars from the theme (`colorVar`).
+ * The ring uses the same stroke token as the edges it terminates.
  */
-function colorVar(token: string): string {
-  return `var(--chakra-colors-${token.replace(/\./g, '-')})`;
-}
-
 export const PORT_STYLE: PortStyle = {
   width: 8,
   height: 8,
   background: colorVar('bg.surface'),
-  border: `1.5px solid ${colorVar('slate.700')}`,
+  border: `1.5px solid ${colorVar(CANVAS_STROKE_TOKEN)}`,
 };
 
 /**
@@ -79,6 +77,6 @@ export const metaChipStyles = {
  */
 export const metaChipToneStyles = {
   default: {},
-  danger: { bg: 'danger.lightest', color: 'danger.dark' },
-  warning: { bg: 'warning.lightest', color: 'warning.dark' },
+  danger: { bg: 'danger.bg', color: 'danger.fg' },
+  warning: { bg: 'warning.bg', color: 'warning.fg' },
 } as const;

package/src/components/Workflow/canvas/NodeShell/NodeShell.test.tsx

@@ -0,0 +1,79 @@
+import { ChakraProvider } from '@chakra-ui/react';
+import { render } from '@testing-library/react';
+import { ReactFlowProvider } from '@xyflow/react';
+import { describe, expect, it } from 'vitest';
+
+import type { CreatedIcon } from '@/components/Icon';
+
+import { system } from '../../../../theme';
+import type { RunState } from '../../Workflow.types';
+import { NodeShell } from './NodeShell';
+import type { NodeShellProps } from './NodeShell.types';
+
+// SVG icons resolve to data URLs under vitest; the shell only needs something
+// renderable.
+const StubIcon = (() => null) as unknown as CreatedIcon;
+
+function renderShell(props: Partial<NodeShellProps>) {
+  const { container } = render(
+    <ChakraProvider value={system}>
+      <ReactFlowProvider>
+        <NodeShell
+          label="Agent"
+          category="ai"
+          icon={StubIcon}
+          selected={false}
+          runState="idle"
+          issues={[]}
+          inputs={[]}
+          outputs={[]}
+          {...props}
+        />
+      </ReactFlowProvider>
+    </ChakraProvider>
+  );
+  return container.firstElementChild as HTMLElement;
+}
+
+/** jsdom keeps the `outline` shorthand as written and does not expand it. */
+const ringOf = (el: HTMLElement) => {
+  const cs = getComputedStyle(el);
+  return { outline: cs.outline, outlineColor: cs.outlineColor };
+};
+const SELECTION_RING = {
+  outline: '1px solid',
+  outlineColor: 'var(--chakra-colors-primary-main)',
+};
+
+/**
+ * Selection must stay visible on top of the run-result chrome: after a run
+ * every node is done or failed, and a clicked node with no ring gives the
+ * reader no cue for which node the inspector is showing.
+ */
+describe('NodeShell selection ring', () => {
+  it.each<RunState>(['idle', 'done', 'error'])(
+    'a selected node in runState %s has an outline',
+    (runState) => {
+      expect(ringOf(renderShell({ selected: true, runState }))).toEqual(
+        SELECTION_RING
+      );
+    }
+  );
+
+  it('a selected node with a validation error has an outline', () => {
+    const card = renderShell({
+      selected: true,
+      issues: [{ severity: 'error', code: 'invalid', message: 'bad' }],
+    });
+    expect(ringOf(card)).toEqual(SELECTION_RING);
+  });
+
+  it.each<RunState>(['idle', 'done', 'error'])(
+    'an unselected node in runState %s has no outline',
+    (runState) => {
+      expect(ringOf(renderShell({ selected: false, runState })).outline).toBe(
+        ''
+      );
+    }
+  );
+});

package/src/components/Workflow/canvas/NodeShell/NodeShell.tsx

@@ -6,7 +6,7 @@ import { Handle, Position } from '@xyflow/react';
 
 import { Card } from '@/components/Card';
 import { Chip } from '@/components/Chip';
-import { AlertTriangle, StickyNote } from '@/components/Icon';
+import { AlertTriangleIcon, StickyNoteIcon } from '@/components/Icon';
 import { Subtext } from '@/components/Typography';
 
 import type {
@@ -60,12 +60,25 @@ function normalizeChip(spec: MetaChipSpec): {
 }
 
 /**
- * Ring + body-border treatment per state. Notes keep their warm border in
- * all states but still surface the primary ring when selected so the active
+ * Ring + body treatment per state. Notes keep their warm border in all
+ * states but still surface the primary ring when selected so the active
  * annotation is visible.
  *
- * Precedence for the ring color: running > error > selected > warning.
- * The default-case border is `slate.300`.
+ * Two independent layers:
+ *
+ * - Status chrome (border + body), by precedence running > failed (run error
+ *   or a validation issue) > completed > warning > default. Failed and
+ *   completed tint the whole card with the status colour
+ *   (`danger.bg`/`success.bg`) so the result still reads at a glance once the
+ *   selection moves on. A node's own validation issues (`hasError`) get the
+ *   same failed treatment as a runtime error (`runState === 'error'`) — both
+ *   mean "something is wrong with this node". The default border is
+ *   `border.default`.
+ * - Selection: a 1px `primary.main` outline, added on top of whatever status
+ *   chrome the node has. After a run every node is done or failed, so if
+ *   status replaced selection a clicked node would show no cue at all. Running
+ *   wears the same outline — both mean "this is the node in focus". On a
+ *   plain or warning node selection also takes the border, as before.
  */
 function getRingChrome(
   category: NodeCategory,
@@ -75,45 +88,38 @@ function getRingChrome(
   runState: RunState,
   noteBorder: string
 ): RingChrome {
+  const selectionRing = selected
+    ? { outline: '1px solid', outlineColor: 'primary.main' }
+    : {};
   if (category === 'note') {
-    if (selected) {
-      return {
-        borderColor: noteBorder,
-        outline: '3px solid',
-        outlineColor: 'primary.lighter',
-      };
-    }
-    return { borderColor: noteBorder };
+    return { borderColor: noteBorder, ...selectionRing };
   }
   if (runState === 'running') {
     return {
       borderColor: 'primary.main',
-      outline: '3px solid',
-      outlineColor: 'primary.lighter',
+      outline: '1px solid',
+      outlineColor: 'primary.main',
     };
   }
-  if (hasError) {
-    return {
-      borderColor: 'danger.main',
-      outline: '3px solid',
-      outlineColor: 'danger.lighter',
-    };
+  if (runState === 'error' || hasError) {
+    return { borderColor: 'danger.border', bg: 'danger.bg', ...selectionRing };
   }
-  if (selected) {
+  if (runState === 'done') {
     return {
-      borderColor: 'primary.main',
-      outline: '3px solid',
-      outlineColor: 'primary.lighter',
+      borderColor: 'success.border',
+      bg: 'success.bg',
+      ...selectionRing,
     };
   }
-  if (hasWarning) return { borderColor: 'warning.main' };
-  return { borderColor: 'slate.300' };
+  if (selected) return { borderColor: 'primary.main', ...selectionRing };
+  if (hasWarning) return { borderColor: 'warning.border' };
+  return { borderColor: 'border.default' };
 }
 
 /**
  * Header glyph independently selected from the ring. Error wins over
  * warning wins over running's status dot — so an error inside a running
- * node still surfaces the alert, instead of being hidden by the green
+ * node still surfaces the alert, instead of being hidden by the primary
  * dot.
  */
 function getHeaderBadge(
@@ -123,26 +129,29 @@ function getHeaderBadge(
 ): ReactNode {
   if (hasError) {
     return (
-      <Box color="danger.main" display="flex" alignItems="center">
-        <AlertTriangle boxSize="xs" />
+      <Box color="danger.fg" display="flex" alignItems="center">
+        <AlertTriangleIcon boxSize="xs" />
       </Box>
     );
   }
   if (hasWarning) {
     return (
-      <Box color="warning.dark" display="flex" alignItems="center">
-        <AlertTriangle boxSize="xs" />
+      <Box color="warning.fg" display="flex" alignItems="center">
+        <AlertTriangleIcon boxSize="xs" />
       </Box>
     );
   }
   if (runState === 'running') {
+    // Matches the ring colour (`primary.main`) rather than `success.*` — a
+    // green "running" dot read as a false "done" signal sitting right next
+    // to the real completed state's green card fill.
     return (
       <Box
         boxSize="2.5"
         borderRadius="full"
-        bg="success.main"
+        bg="primary.main"
         outline="3px solid"
-        outlineColor="success.lighter"
+        outlineColor="primary.wash"
       />
     );
   }
@@ -205,7 +214,7 @@ export function NodeShell({
       outline={ring.outline}
       outlineColor={ring.outlineColor}
       boxShadow="sm"
-      bg={isNote ? tokens.bg : 'bg.surface'}
+      bg={isNote ? tokens.bg : (ring.bg ?? 'bg.surface')}
       position="relative"
       // Center the body within the port-driven min-height so a content-light
       // node (e.g. Start) sits mid-card rather than pinned to the top edge.
@@ -217,18 +226,18 @@ export function NodeShell({
         <Stack gap={1} px={3} py={2}>
           <HStack
             gap={1}
-            color="warning.dark"
+            color="warning.fg"
             fontWeight="bold"
             letterSpacing="wider"
             textTransform="uppercase"
           >
-            <StickyNote boxSize="xs" />
-            <Subtext color="warning.dark" fontWeight="bold">
+            <StickyNoteIcon boxSize="xs" />
+            <Subtext color="warning.fg" fontWeight="bold">
               Note
             </Subtext>
           </HStack>
           {customBody ?? (
-            <Subtext color="slate.1200" lineHeight={1.45}>
+            <Subtext color="fg.default" lineHeight={1.45}>
               {instanceTitle ?? label}
             </Subtext>
           )}
@@ -248,11 +257,11 @@ export function NodeShell({
                 tokens={categoryTokens}
               />
               <Stack gap={0} flex={1} minWidth={0}>
-                <Subtext fontWeight="semibold" color="slate.1200" lineClamp={1}>
+                <Subtext fontWeight="semibold" color="fg.default" lineClamp={1}>
                   {label}
                 </Subtext>
                 {instanceTitle ? (
-                  <Subtext color="slate.900" lineClamp={1}>
+                  <Subtext color="fg.muted" lineClamp={1}>
                     {instanceTitle}
                   </Subtext>
                 ) : null}

package/src/components/Workflow/canvas/NodeShell/NodeShell.types.ts

@@ -40,6 +40,8 @@ export type RingChrome = {
   borderColor: string;
   outline?: string;
   outlineColor?: string;
+  /** Card background override for a status fill (failed/completed). */
+  bg?: string;
 };
 
 export type PortStyle = CSSProperties;

package/src/components/Workflow/canvas/SeverityDot/SeverityDot.tsx

@@ -8,17 +8,18 @@ import { severityColorToken } from '../issueSeverity';
 interface SeverityDotProps extends BoxProps {
   severity: IssueSeverity;
   /**
-   * Shade of the severity colour. `dark` reads better as a small marker on a
-   * tinted callout background; `main` suits a header dot on white. Defaults to
-   * `main`.
+   * Which half of the status family fills the dot. `fg` reads better as a
+   * small marker on a tinted callout background (it's tuned to work on
+   * `.bg` too); `solid` suits a header dot on a plain surface. Defaults to
+   * `solid`.
    */
-  tone?: 'main' | 'dark';
+  tone?: 'solid' | 'fg';
 }
 
 /** Small round severity marker shared by the issue callout and the issue list. */
 export function SeverityDot({
   severity,
-  tone = 'main',
+  tone = 'solid',
   ...rest
 }: SeverityDotProps) {
   return (