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

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

@@ -4,7 +4,7 @@ import { type ComponentType, type ReactNode, useEffect, useMemo } from 'react';
 import { Box, chakra } from '@chakra-ui/react';
 
 import { Button } from '@/components/Button';
-import { TbX } from '@/components/Icon';
+import { CloseIcon } from '@/components/Icon';
 import { Menu } from '@/components/Menu';
 import { Text } from '@/components/Typography';
 
@@ -398,7 +398,7 @@ function EdgeDrawer({
             width="100%"
             onClick={onDelete}
           >
-            <TbX boxSize="xs" />
+            <CloseIcon boxSize="xs" />
             {translate('workflow_edge_delete') as string}
           </Button>
         </Box>

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

@@ -3,7 +3,7 @@
 import { ReactNode, useMemo, useRef } from 'react';
 import { HStack, Stack } from '@chakra-ui/react';
 
-import { AlertTriangle, TbAlertCircle } from '@/components/Icon';
+import { AlertCircleIcon, AlertTriangleIcon } from '@/components/Icon';
 import { Subtext } from '@/components/Typography';
 
 import { useWorkflowIssueMessage } from '../../useWorkflowIssueMessage';
@@ -103,9 +103,9 @@ export function FieldWrapper({
         <HStack gap={1} align="center">
           <Subtext color={toneColor} display="flex" alignItems="center">
             {tone === 'danger' ? (
-              <TbAlertCircle boxSize="xs" />
+              <AlertCircleIcon boxSize="xs" />
             ) : (
-              <AlertTriangle boxSize="xs" />
+              <AlertTriangleIcon boxSize="xs" />
             )}
           </Subtext>
           <Subtext color={toneColor}>{resolveIssueMessage(issue)}</Subtext>

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

@@ -3,7 +3,7 @@
 import { memo, useMemo } from 'react';
 import type { NodeProps } from '@xyflow/react';
 
-import { AlertOctagon } from '@/components/Icon';
+import { AlertOctagonIcon } from '@/components/Icon';
 
 import type { GraphNode } from '../../Workflow.types';
 import { useWorkflow } from '../../WorkflowContext';
@@ -56,7 +56,7 @@ export const GenericNode = memo(function GenericNode(
         // safety category surfaces the broken-ness in the icon tile, not
         // only in the error ring chrome.
         category="safety"
-        icon={AlertOctagon}
+        icon={AlertOctagonIcon}
         selected={!!selected}
         runState="error"
         issues={[

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';
 
@@ -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">
           {summarize(errorCount, warningCount)}
         </Text>
-        <TbChevronDown
+        <ChevronDownIcon
           boxSize="xs"
           color="slate.900"
           transform={open ? 'rotate(180deg)' : 'none'}
-          transition="transform 0.15s"
+          animationStyle="feedback"
+          transitionProperty="transform"
         />
       </Box>
       {open ? (
@@ -221,7 +223,8 @@ 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"
         >

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';
 
@@ -80,7 +80,7 @@ function PaletteItem({ def }: { def: NodeTypeDef }) {
           ) : null}
         </Stack>
         <Box color="slate.700" display="flex" alignItems="center">
-          <GripVertical boxSize="xs" />
+          <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}
@@ -140,7 +150,7 @@ export function NodePalette({ onClose }: { onClose: () => void }) {
         borderBottom="1px solid"
         borderColor="slate.200"
       >
-        <Subtitle color="slate.1300">
+        <Subtitle id={titleId} color="slate.1300">
           {translate('workflow_palette_title')}
         </Subtitle>
         <IconButton
@@ -150,7 +160,7 @@ export function NodePalette({ onClose }: { onClose: () => void }) {
           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}>

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';
 
@@ -31,7 +31,7 @@ export function NodePaletteToggle({ onOpen }: { onOpen: () => void }) {
           boxShadow="md"
           onClick={onOpen}
         >
-          <IoAddOutline boxSize="md" />
+          <PlusIcon boxSize="md" />
         </IconButton>
       </Tooltip>
     </Box>

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 {
@@ -124,14 +124,14 @@ function getHeaderBadge(
   if (hasError) {
     return (
       <Box color="danger.main" display="flex" alignItems="center">
-        <AlertTriangle boxSize="xs" />
+        <AlertTriangleIcon boxSize="xs" />
       </Box>
     );
   }
   if (hasWarning) {
     return (
       <Box color="warning.dark" display="flex" alignItems="center">
-        <AlertTriangle boxSize="xs" />
+        <AlertTriangleIcon boxSize="xs" />
       </Box>
     );
   }
@@ -222,7 +222,7 @@ export function NodeShell({
             letterSpacing="wider"
             textTransform="uppercase"
           >
-            <StickyNote boxSize="xs" />
+            <StickyNoteIcon boxSize="xs" />
             <Subtext color="warning.dark" fontWeight="bold">
               Note
             </Subtext>

package/src/components/Workflow/createNode.test.ts

@@ -1,7 +1,7 @@
 import { describe, expect, it } from 'vitest';
 
-import { nextNodeId } from './createNode';
-import type { GraphNode } from './Workflow.types';
+import { createNodeFromType, nextNodeId } from './createNode';
+import type { GraphNode, NodeTypeDef } from './Workflow.types';
 
 const node = (id: string, kind: string): GraphNode => ({
   id,
@@ -59,3 +59,41 @@ describe('nextNodeId', () => {
     expect(nextNodeId('agent', nodes)).toBe('agent_4');
   });
 });
+
+describe('nextNodeId with namespaced kinds', () => {
+  it('treats the dot in a kind literally', () => {
+    // Unescaped, `math.add` would match `mathXadd_7` and jump to _8.
+    const nodes = [
+      node('mathXadd_7', 'math.add'),
+      node('math.add_2', 'math.add'),
+    ];
+    expect(nextNodeId('math.add', nodes)).toBe('math.add_3');
+  });
+});
+
+describe('createNodeFromType', () => {
+  const def = {
+    kind: 'agent',
+    defaultConfig: () => ({ name: 'Agent', model: 'static', temp: 1 }),
+    localizeDefaults: (t: (k: string) => string) => ({ name: t('agent_name') }),
+    hostDefaults: (bridge: unknown) => ({
+      model: (bridge as { model: string }).model,
+    }),
+    handles: () => ({ inputs: [], outputs: [] }),
+  } as unknown as NodeTypeDef;
+
+  it('layers defaultConfig, then localizeDefaults, then hostDefaults', () => {
+    const created = createNodeFromType(def, {
+      position: { x: 1, y: 2 },
+      nodes: [node('agent_4', 'agent')],
+      translate: (key) => `t:${key}`,
+      hostBridge: { model: 'live' },
+    });
+    expect(created).toEqual({
+      id: 'agent_5',
+      kind: 'agent',
+      position: { x: 1, y: 2 },
+      config: { name: 't:agent_name', model: 'live', temp: 1 },
+    });
+  });
+});

package/src/components/Workflow/createNode.ts

@@ -1,4 +1,10 @@
-import type { GraphNode } from './Workflow.types';
+import type {
+  GraphNode,
+  NodeTypeDef,
+  Position,
+  WorkflowTranslate,
+} from './Workflow.types';
+import { resolveDefaultConfig } from './Workflow.types';
 
 /**
  * Unique id for edges and other internal graph elements that aren't referenced
@@ -29,7 +35,10 @@ export function nextNodeId(
   nodes: ReadonlyArray<GraphNode>
 ): string {
   if (kind === 'start') return 'start';
-  const re = new RegExp(`^${kind}_(\\d+)$`);
+  // Escape the kind: namespaced kinds (`math.add`) would otherwise read `.` as
+  // a wildcard and count unrelated ids toward the counter.
+  const escaped = kind.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+  const re = new RegExp(`^${escaped}_(\\d+)$`);
   let max = 0;
   for (const n of nodes) {
     const m = re.exec(n.id);
@@ -65,3 +74,62 @@ export function cloneNode(
     config: structuredClone(node.config),
   };
 }
+
+/** String-only translator handed to `NodeTypeDef.localizeDefaults`. */
+export type DefaultsTranslate = (
+  key: string,
+  params?: Record<string, string>
+) => string;
+
+/**
+ * Tear the string lookup off the host translator so `localizeDefaults` doesn't
+ * depend on the React-fragment interpolation path.
+ */
+export function toDefaultsTranslate(
+  translate: WorkflowTranslate
+): DefaultsTranslate {
+  return (key, params) => translate(key, params) as string;
+}
+
+/**
+ * Build a fresh node of `def`'s kind — the ONE place a node is created from a
+ * node type, shared by the palette drop and `useWorkflowActions().addNode`, so
+ * both paths produce the same id and starting config:
+ *
+ * - id: `nextNodeId` (`{kind}_{N}`), so authors can type it into `{{...}}`
+ *   references — the same scheme duplicate/paste use;
+ * - config: `defaultConfig`, then `localizeDefaults(translate)`, then
+ *   `hostDefaults(hostBridge)`, each shallow-merged over the previous.
+ */
+export function createNodeFromType(
+  def: NodeTypeDef,
+  {
+    position,
+    nodes,
+    translate,
+    hostBridge,
+  }: {
+    position: Position;
+    /** Current node list — continues the per-kind id counter. */
+    nodes: ReadonlyArray<GraphNode>;
+    translate: DefaultsTranslate;
+    hostBridge?: unknown;
+  }
+): GraphNode {
+  const base = resolveDefaultConfig(def) as Record<string, unknown>;
+  const overlay = def.localizeDefaults?.(translate) as
+    | Record<string, unknown>
+    | undefined;
+  // Host-data overlay (e.g. a starting LLM picked from the tenant's live model
+  // list) — applied last so it wins over any static placeholder in
+  // `defaultConfig`. Absent on a generic host, leaving the static defaults.
+  const bridged = def.hostDefaults?.(hostBridge) as
+    | Record<string, unknown>
+    | undefined;
+  return {
+    id: nextNodeId(def.kind, nodes),
+    kind: def.kind,
+    position,
+    config: { ...base, ...overlay, ...bridged },
+  };
+}

package/src/components/Workflow/index.ts

@@ -35,6 +35,14 @@ export {
 } from './graphObserver';
 export type { GraphAction } from './graphReducer';
 export { emptyGraph, graphReducer } from './graphReducer';
+export type {
+  AddAfterSource,
+  AddNodeOptions,
+  AddNodeResult,
+  AddNodeTarget,
+  WorkflowActions,
+} from './useWorkflowActions';
+export { useWorkflowActions } from './useWorkflowActions';
 export { Workflow } from './Workflow';
 export type {
   ConnectionCtx,

package/src/components/Workflow/layout/autoLayout.ts

@@ -122,11 +122,11 @@ function orderEdgesForDagre(
  * height is a typical two-row card. Callers should pass real measured sizes
  * when available so ranks pack tightly.
  */
-const FALLBACK_WIDTH = parseInt(CARD_WIDTH, 10);
-const FALLBACK_HEIGHT = 76;
+export const FALLBACK_WIDTH = parseInt(CARD_WIDTH, 10);
+export const FALLBACK_HEIGHT = 76;
 
-const DEFAULT_RANK_GAP = 80;
-const DEFAULT_NODE_GAP = 40;
+export const DEFAULT_RANK_GAP = 80;
+export const DEFAULT_NODE_GAP = 40;
 
 /**
  * Compute a tidy, hierarchical layout for a workflow graph and return a new

package/src/components/Workflow/placement.test.ts

@@ -0,0 +1,156 @@
+import { describe, expect, it } from 'vitest';
+
+import { findFreeExit, planNodePlacement } from './placement';
+import type { Graph, GraphNode, NodeTypeDef } from './Workflow.types';
+
+// Handle shapes of FactChat's start / agent / end / note / classify types.
+const HANDLES: Record<string, NodeTypeDef['handles']> = {
+  start: () => ({ inputs: [], outputs: [{ id: 'out' }] }),
+  agent: () => ({ inputs: [{ id: 'in' }], outputs: [{ id: 'out' }] }),
+  end: () => ({ inputs: [{ id: 'in' }], outputs: [] }),
+  note: () => ({ inputs: [], outputs: [] }),
+  classify: () => ({
+    inputs: [{ id: 'in' }],
+    outputs: [{ id: 'cat_a' }, { id: 'cat_b' }],
+  }),
+};
+const getNodeType = (kind: string) =>
+  HANDLES[kind] ? ({ kind, handles: HANDLES[kind] } as NodeTypeDef) : undefined;
+
+const node = (id: string, kind: string, x = 0, y = 0): GraphNode => ({
+  id,
+  kind,
+  position: { x, y },
+  config: {},
+});
+
+const plan = (
+  graph: Graph,
+  kind: string,
+  after: string | null,
+  types: typeof getNodeType = getNodeType
+) =>
+  planNodePlacement({
+    graph,
+    getNodeType: types,
+    node: node(`${kind}_9`, kind),
+    target: after ? { after } : { at: 'viewportCenter' },
+    viewportCenter: { x: 500, y: 300 },
+    edgeId: 'e_new',
+  });
+
+describe('planNodePlacement', () => {
+  const start = node('start', 'start');
+
+  it('places the node right of the source and connects its free exit', () => {
+    const result = plan({ nodes: [start], edges: [] }, 'agent', 'start');
+
+    // 174 (card width) + 80 (rank gap).
+    expect(result.position).toEqual({ x: 254, y: 0 });
+    expect(result.edge).toEqual({
+      id: 'e_new',
+      source: 'start',
+      target: 'agent_9',
+      sourceHandle: 'out',
+      targetHandle: 'in',
+    });
+  });
+
+  it('uses the measured source width when React Flow has one', () => {
+    const result = planNodePlacement({
+      graph: { nodes: [start], edges: [] },
+      getNodeType,
+      node: node('agent_9', 'agent'),
+      target: { after: 'start' },
+      viewportCenter: { x: 0, y: 0 },
+      edgeId: 'e_new',
+      getNodeSize: (id) =>
+        id === 'start' ? { width: 300, height: 90 } : undefined,
+    });
+    expect(result.position).toEqual({ x: 380, y: 0 });
+  });
+
+  it('moves the node down when the spot to the right is taken', () => {
+    const blocker = node('agent_1', 'agent', 254, 0);
+    const result = plan({ nodes: [start, blocker], edges: [] }, 'end', 'start');
+
+    // 0 + 76 (fallback height) + 40 (node gap).
+    expect(result.position).toEqual({ x: 254, y: 116 });
+  });
+
+  it('centres an unconnected node in the viewport for { at: viewportCenter }', () => {
+    const result = plan({ nodes: [start], edges: [] }, 'agent', null);
+
+    expect(result.position).toEqual({ x: 413, y: 262 });
+    expect(result.edge).toBeNull();
+  });
+
+  it('falls back to the viewport centre when the node has no free exit', () => {
+    const end = node('end_1', 'end', 400, 0);
+    const taken: Graph = {
+      nodes: [start, end],
+      edges: [{ id: 'e_1', source: 'start', target: 'end_1' }],
+    };
+
+    // From End (no exits), and from Start whose only exit is taken.
+    for (const after of ['end_1', 'start', 'missing']) {
+      const result = plan(taken, 'agent', after);
+      expect(result.edge).toBeNull();
+      expect(result.position).toEqual({ x: 413, y: 262 });
+    }
+  });
+
+  it('places a Note right of the source but adds no edge into it', () => {
+    const result = plan({ nodes: [start], edges: [] }, 'note', 'start');
+
+    expect(result.position).toEqual({ x: 254, y: 0 });
+    expect(result.edge).toBeNull();
+  });
+
+  it('wires the next free exit of a multi-exit node', () => {
+    const classify = node('classify_1', 'classify');
+    const graph: Graph = {
+      nodes: [classify],
+      edges: [
+        { id: 'e_1', source: 'classify_1', target: 'x', sourceHandle: 'cat_a' },
+      ],
+    };
+    expect(plan(graph, 'agent', 'classify_1').edge?.sourceHandle).toBe('cat_b');
+  });
+
+  it('respects canConnect on either endpoint', () => {
+    const rejectingTarget = (kind: string) => {
+      const def = getNodeType(kind);
+      return def && kind === 'agent'
+        ? { ...def, canConnect: () => 'agents cannot follow start' }
+        : def;
+    };
+    const result = plan(
+      { nodes: [start], edges: [] },
+      'agent',
+      'start',
+      rejectingTarget
+    );
+    // Still placed after the source, just not wired.
+    expect(result.position).toEqual({ x: 254, y: 0 });
+    expect(result.edge).toBeNull();
+  });
+});
+
+describe('findFreeExit', () => {
+  it('treats an edge without sourceHandle as sitting on the first exit', () => {
+    const graph: Graph = {
+      nodes: [node('classify_1', 'classify')],
+      edges: [{ id: 'e_1', source: 'classify_1', target: 'x' }],
+    };
+    expect(findFreeExit(graph, getNodeType, 'classify_1')?.sourceHandle).toBe(
+      'cat_b'
+    );
+  });
+
+  it('returns null for no node id', () => {
+    expect(findFreeExit({ nodes: [], edges: [] }, getNodeType, null)).toBe(
+      null
+    );
+  });
+});