@mindlogic-ai/logician-ui 3.1.0 → 3.2.0-alpha.0

package/src/components/Workflow/canvas/Canvas/CanvasControls.tsx

@@ -0,0 +1,178 @@
+'use client';
+
+import type { FitViewOptions } from '@xyflow/react';
+import {
+  ControlButton,
+  Controls,
+  useReactFlow,
+  useStore,
+  useStoreApi,
+} from '@xyflow/react';
+
+import {
+  Minus,
+  Plus,
+  TbArrowBackUp,
+  TbArrowForwardUp,
+  TbLock,
+  TbLockOpen,
+  TbMaximize,
+  TbSitemap,
+} from '@/components/Icon';
+import { Tooltip } from '@/components/Tooltip';
+
+import { useWorkflow, useWorkflowTranslate } from '../../WorkflowContext';
+
+// Rendered height of the palette toggle the controls tuck under in edit mode;
+// update if the toggle resizes. Combined with the palette's own top gutter
+// (spacing-4) it forms the clearance the controls drop by so they sit just
+// below the toggle instead of overlapping it.
+const PALETTE_TOGGLE_HEIGHT_PX = 52;
+// Edit-mode top offset: clear the palette toggle (its gutter + height). Read-only
+// preview has no chrome, so the controls sit at the plain corner inset instead.
+const TOP_LEFT_OVERLAY_CLEARANCE = `calc(var(--chakra-spacing-4) + ${PALETTE_TOGGLE_HEIGHT_PX}px)`;
+// Corner inset (spacing-3) for the controls when no chrome sits above them.
+const CORNER_INSET = 'var(--chakra-spacing-3)';
+
+type CanvasControlsProps = {
+  /** Read-only preview hides the authoring-only lock and auto-arrange actions. */
+  readOnly: boolean;
+  /** Tidy the graph left-to-right — owned by the canvas, which has the node
+      measurements the layout needs. */
+  onAutoArrange: () => void;
+  /** Shared fit-view framing so the manual button settles the view the same way
+      the initial mount and re-fits do. */
+  fitViewOptions: FitViewOptions;
+  /** Whether the top-left corner already holds overlay chrome (palette toggle or
+      error banner). When it does, the controls tuck below it; otherwise they sit
+      tight in the corner so they never float under an empty gap. */
+  topLeftChromePresent: boolean;
+};
+
+/**
+ * The top-left canvas controls. We render every button ourselves — React
+ * Flow's built-in zoom / fit / interactivity buttons are suppressed — so each
+ * carries a localized {@link Tooltip} instead of React Flow's hardcoded English
+ * `title`. We dock the cluster into the top-left overlay corner (rather than
+ * React Flow's default bottom-left) so it doesn't read as orphaned mid-canvas —
+ * most noticeably when the version-history inspector docks on the left.
+ * Placement "right" keeps the tooltip on-canvas.
+ */
+export function CanvasControls({
+  readOnly,
+  onAutoArrange,
+  fitViewOptions,
+  topLeftChromePresent,
+}: CanvasControlsProps) {
+  const { zoomIn, zoomOut, fitView } = useReactFlow();
+  // Context undo/redo route through the Workflow wrapper that also asks the
+  // host to persist a position-only revert — same path the keyboard shortcuts
+  // take, so a button-driven undo of an auto-arrange sticks across reloads.
+  const { undo, redo, canUndo, canRedo } = useWorkflow();
+  const translate = useWorkflowTranslate();
+  const t = (key: string) => translate(key) as string;
+
+  // Mirror React Flow's built-in interactivity lock so our custom buttons drive
+  // the same store state the default lock button would. "Interactive" means
+  // nodes can be dragged, connected, and selected; the lock flips all three.
+  const isInteractive = useStore(
+    (s) => s.nodesDraggable || s.nodesConnectable || s.elementsSelectable
+  );
+  const store = useStoreApi();
+  const onToggleInteractivity = () =>
+    store.setState({
+      nodesDraggable: !isInteractive,
+      nodesConnectable: !isInteractive,
+      elementsSelectable: !isInteractive,
+    });
+
+  const zoomInLabel = t('workflow_zoom_in');
+  const zoomOutLabel = t('workflow_zoom_out');
+  const fitViewLabel = t('workflow_fit_view');
+  const undoLabel = t('workflow_undo');
+  const redoLabel = t('workflow_redo');
+  const autoArrangeLabel = t('workflow_auto_arrange');
+  // The tooltip names the action a click performs: an interactive canvas locks,
+  // a locked canvas unlocks.
+  const interactivityLabel = isInteractive
+    ? t('workflow_lock_canvas')
+    : t('workflow_unlock_canvas');
+
+  return (
+    <Controls
+      showZoom={false}
+      showFitView={false}
+      showInteractive={false}
+      // Dock into the top-left overlay corner. When the corner already holds
+      // chrome (the palette toggle or the error banner) the cluster tucks below
+      // it; otherwise it sits at the corner so it never floats under an empty gap.
+      position="top-left"
+      style={{
+        top: topLeftChromePresent ? TOP_LEFT_OVERLAY_CLEARANCE : CORNER_INSET,
+        left: CORNER_INSET,
+        margin: 0,
+      }}
+    >
+      <Tooltip content={zoomInLabel} placement="right">
+        <ControlButton onClick={() => zoomIn()} aria-label={zoomInLabel}>
+          <Plus />
+        </ControlButton>
+      </Tooltip>
+      <Tooltip content={zoomOutLabel} placement="right">
+        <ControlButton onClick={() => zoomOut()} aria-label={zoomOutLabel}>
+          <Minus />
+        </ControlButton>
+      </Tooltip>
+      <Tooltip content={fitViewLabel} placement="right">
+        <ControlButton
+          onClick={() => fitView(fitViewOptions)}
+          aria-label={fitViewLabel}
+        >
+          <TbMaximize />
+        </ControlButton>
+      </Tooltip>
+      {/* Undo/redo, the interactivity lock and auto-arrange are authoring
+          controls — meaningless in the read-only preview, so all are hidden
+          there. */}
+      {readOnly ? null : (
+        <Tooltip content={undoLabel} placement="right">
+          <ControlButton
+            onClick={undo}
+            disabled={!canUndo}
+            aria-label={undoLabel}
+          >
+            <TbArrowBackUp />
+          </ControlButton>
+        </Tooltip>
+      )}
+      {readOnly ? null : (
+        <Tooltip content={redoLabel} placement="right">
+          <ControlButton
+            onClick={redo}
+            disabled={!canRedo}
+            aria-label={redoLabel}
+          >
+            <TbArrowForwardUp />
+          </ControlButton>
+        </Tooltip>
+      )}
+      {readOnly ? null : (
+        <Tooltip content={interactivityLabel} placement="right">
+          <ControlButton
+            onClick={onToggleInteractivity}
+            aria-label={interactivityLabel}
+          >
+            {isInteractive ? <TbLockOpen /> : <TbLock />}
+          </ControlButton>
+        </Tooltip>
+      )}
+      {readOnly ? null : (
+        <Tooltip content={autoArrangeLabel} placement="right">
+          <ControlButton onClick={onAutoArrange} aria-label={autoArrangeLabel}>
+            <TbSitemap />
+          </ControlButton>
+        </Tooltip>
+      )}
+    </Controls>
+  );
+}

package/src/components/Workflow/canvas/Canvas/LabeledEdge.tsx

@@ -0,0 +1,198 @@
+'use client';
+
+import {
+  type MouseEvent,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { Box } from '@chakra-ui/react';
+import {
+  BaseEdge,
+  EdgeLabelRenderer,
+  type EdgeProps,
+  getSmoothStepPath,
+} from '@xyflow/react';
+
+import { TbX } from '@/components/Icon';
+import { IconButton } from '@/components/IconButton';
+
+import { useWorkflow, useWorkflowTranslate } from '../../WorkflowContext';
+import { findPort } from '../EdgeInspector';
+import { BranchLabelBadge } from './BranchLabelBadge';
+import { getEdgeLabelVariant } from './edgeLabelVariant';
+
+// Grace period on pointer-leave so moving from the SVG edge to the portaled
+// label (or the delete button beside it) doesn't flicker the affordance off in
+// the gap between layers.
+const HOVER_LEAVE_GRACE_MS = 80;
+
+/**
+ * Edge with a logician-ui `Badge` label that rides the connection midpoint.
+ * Clicking the label selects the edge (opens its inspector); hovering the edge
+ * reveals a delete button BESIDE the label (not replacing it), so the label
+ * stays clickable. Labels use `EdgeLabelRenderer` rather than React Flow's SVG
+ * `labelStyle` so they inherit the design system's Badge styling.
+ */
+export function LabeledEdge({
+  id,
+  source,
+  sourceHandleId,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  sourcePosition,
+  targetPosition,
+  label,
+  markerEnd,
+  style,
+}: EdgeProps) {
+  const {
+    graph,
+    getNodeType,
+    dispatch,
+    readOnly,
+    editor: { selectedEdgeId },
+    setSelectedNodeId,
+    setSelectedEdgeId,
+    setDrawerTarget,
+    revealInspector,
+  } = useWorkflow();
+  const translate = useWorkflowTranslate();
+
+  const [hovered, setHovered] = useState(false);
+  const leaveTimer = useRef<ReturnType<typeof setTimeout> | undefined>(
+    undefined
+  );
+  const onEnter = useCallback(() => {
+    if (leaveTimer.current) clearTimeout(leaveTimer.current);
+    setHovered(true);
+  }, []);
+  const onLeave = useCallback(() => {
+    leaveTimer.current = setTimeout(
+      () => setHovered(false),
+      HOVER_LEAVE_GRACE_MS
+    );
+  }, []);
+  useEffect(
+    () => () => {
+      if (leaveTimer.current) clearTimeout(leaveTimer.current);
+    },
+    []
+  );
+
+  // Clicking the label selects the edge and opens its inspector — mirrors the
+  // canvas `onEdgeClick` so the label is just another way in. Routes through
+  // revealInspector so a label click in test mode also restores the parked
+  // inspector (the badge stops propagation, so it never reaches onEdgeClick).
+  const onSelect = useCallback(
+    (e: MouseEvent) => {
+      e.stopPropagation();
+      setSelectedNodeId(null);
+      setSelectedEdgeId(id);
+      revealInspector({ type: 'edge', id });
+    },
+    [id, setSelectedNodeId, setSelectedEdgeId, revealInspector]
+  );
+
+  const onDelete = useCallback(
+    (e: MouseEvent) => {
+      // Don't let the click fall through to edge/pane selection handlers.
+      e.stopPropagation();
+      dispatch({ type: 'deleteEdge', id });
+      // Mirror the keyboard-delete cleanup so the inspector doesn't linger on a
+      // now-removed edge.
+      if (selectedEdgeId === id) {
+        setSelectedEdgeId(null);
+        setDrawerTarget(null);
+      }
+    },
+    [dispatch, id, selectedEdgeId, setSelectedEdgeId, setDrawerTarget]
+  );
+
+  const [edgePath, labelX, labelY] = getSmoothStepPath({
+    sourceX,
+    sourceY,
+    sourcePosition,
+    targetX,
+    targetY,
+    targetPosition,
+  });
+
+  // The label's text: an explicit edge label wins; otherwise fall back to the
+  // source handle's label, so semantic exits (Pass / Fail / branch / Else) ride
+  // on the wire without the author having to name every edge.
+  const variant = getEdgeLabelVariant(sourceHandleId);
+  // Resolve the source handle's label once (not per render): React Flow
+  // re-renders edges constantly during pan/zoom, and `handles()` rebuilds its
+  // outputs array each call.
+  const handleLabel = useMemo(() => {
+    const sourceNode = graph.nodes.find((n) => n.id === source);
+    return findPort(
+      sourceNode,
+      sourceNode ? getNodeType(sourceNode.kind) : undefined,
+      'outputs',
+      sourceHandleId ?? undefined
+    )?.label;
+  }, [graph.nodes, source, sourceHandleId, getNodeType]);
+  const displayLabel = label ?? handleLabel;
+
+  // Delete shows only while the name badge itself is hovered (when editable) —
+  // not anywhere on the wire — so it's a deliberate, low-noise affordance. The
+  // edge inspector's delete button (see DrawerShell) covers labelless edges and
+  // anyone who'd rather delete from the sidebar.
+  const showDelete = hovered && !readOnly && Boolean(displayLabel);
+  const wrapperTransform = `translate(-50%, -50%) translate(${labelX}px, ${labelY}px)`;
+
+  return (
+    <>
+      <BaseEdge id={id} path={edgePath} markerEnd={markerEnd} style={style} />
+      {showDelete || displayLabel ? (
+        <EdgeLabelRenderer>
+          {/* The anchor is centered on the edge midpoint and wraps the badge;
+              hovering it (the badge) is what reveals delete. Delete is
+              positioned absolutely to the badge's right (out of the centered
+              flow) so revealing it doesn't shift the badge. */}
+          <Box
+            position="absolute"
+            transform={wrapperTransform}
+            pointerEvents="all"
+            display="inline-flex"
+            onMouseEnter={onEnter}
+            onMouseLeave={onLeave}
+          >
+            {displayLabel ? (
+              <BranchLabelBadge variant={variant} onClick={onSelect}>
+                {displayLabel}
+              </BranchLabelBadge>
+            ) : null}
+            {showDelete ? (
+              <Box
+                position="absolute"
+                left="100%"
+                top="50%"
+                transform="translateY(-50%)"
+                pl={1}
+              >
+                <IconButton
+                  aria-label={translate('workflow_edge_delete') as string}
+                  onClick={onDelete}
+                  size="xs"
+                  variant="outline"
+                  colorPalette="danger"
+                  bg="bg.surface"
+                  borderRadius="full"
+                >
+                  <TbX boxSize="xs" />
+                </IconButton>
+              </Box>
+            ) : null}
+          </Box>
+        </EdgeLabelRenderer>
+      ) : null}
+    </>
+  );
+}

package/src/components/Workflow/canvas/Canvas/edgeLabelVariant.test.ts

@@ -0,0 +1,26 @@
+import { describe, expect, it } from 'vitest';
+
+import { getEdgeLabelVariant } from './edgeLabelVariant';
+
+describe('getEdgeLabelVariant', () => {
+  it('maps guardrail exits to semantic pass/fail', () => {
+    expect(getEdgeLabelVariant('pass')).toBe('pass');
+    expect(getEdgeLabelVariant('fail')).toBe('fail');
+  });
+
+  it('maps the if-else fallback to else (dashed)', () => {
+    expect(getEdgeLabelVariant('else')).toBe('else');
+  });
+
+  it('maps if-else branches and classify categories to neutral keys', () => {
+    expect(getEdgeLabelVariant('branch_0')).toBe('key');
+    expect(getEdgeLabelVariant('branch_12')).toBe('key');
+    expect(getEdgeLabelVariant('cat_refund')).toBe('key');
+  });
+
+  it('falls back to default for plain/unknown handles', () => {
+    expect(getEdgeLabelVariant('out')).toBe('default');
+    expect(getEdgeLabelVariant(undefined)).toBe('default');
+    expect(getEdgeLabelVariant(null)).toBe('default');
+  });
+});

package/src/components/Workflow/canvas/Canvas/edgeLabelVariant.ts

@@ -0,0 +1,23 @@
+/**
+ * Pill variant for an edge label, derived from the SOURCE handle it leaves.
+ *
+ * Guardrail has two exits — `pass` / `fail` — a binary safety outcome, so they
+ * read as semantic green / red. Every routing exit — If-Else branches, the
+ * If-Else `else` fallback, and Classify categories (`branch_*` / `cat_*` /
+ * `else`) — plus any free-text label reads as a neutral badge, so the branch
+ * names all look alike. `else` stays its own variant in case it ever needs
+ * distinguishing, but currently renders neutral like the other keys.
+ */
+export type EdgeLabelVariant = 'pass' | 'fail' | 'else' | 'key' | 'default';
+
+export const getEdgeLabelVariant = (
+  sourceHandle?: string | null
+): EdgeLabelVariant => {
+  if (sourceHandle === 'pass') return 'pass';
+  if (sourceHandle === 'fail') return 'fail';
+  if (sourceHandle === 'else') return 'else';
+  if (sourceHandle?.startsWith('branch_') || sourceHandle?.startsWith('cat_')) {
+    return 'key';
+  }
+  return 'default';
+};

package/src/components/Workflow/canvas/Canvas/index.ts

@@ -0,0 +1 @@
+export { Canvas } from './Canvas';

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

@@ -0,0 +1,96 @@
+'use client';
+
+import { ReactNode, useId, useState } from 'react';
+import { Box, HStack, Stack, type StackProps } from '@chakra-ui/react';
+
+import { TbAlertCircle, TbChevronDown, TbChevronUp } from '@/components/Icon';
+import { Subtext } from '@/components/Typography';
+
+export type CollapsibleSectionProps = StackProps & {
+  label: string;
+  /** Optional initial expanded state. Defaults to true. */
+  defaultExpanded?: boolean;
+  /**
+   * When the section is collapsed AND `hasError` is true, the chevron is
+   * replaced by a danger-tinted alert glyph so users don't miss errors
+   * hidden behind a collapsed header.
+   */
+  hasError?: boolean;
+  /**
+   * Slot for a trailing icon-button in the header row (e.g. an info
+   * popover trigger). Click handler on the action is responsible for
+   * stopping propagation; otherwise the section also toggles.
+   */
+  headerAction?: ReactNode;
+  children: ReactNode;
+};
+
+/**
+ * Vertical accordion section used in the node drawer. Each section header
+ * is the entire toggle target — the chevron is decorative. Collapse state
+ * is session-only per mounted instance; switching to a different node
+ * remounts and resets to defaults. The component is style-agnostic about
+ * dividers — parents control border/spacing via the spread Stack props
+ * (e.g. a `_notFirst` selector on the wrapping Stack).
+ */
+export function CollapsibleSection({
+  label,
+  defaultExpanded = true,
+  hasError = false,
+  headerAction,
+  children,
+  ...rest
+}: CollapsibleSectionProps) {
+  const [expanded, setExpanded] = useState(defaultExpanded);
+  const contentId = useId();
+  const showErrorGlyph = !expanded && hasError;
+
+  return (
+    <Stack gap={0} {...rest}>
+      <Box
+        as="button"
+        aria-expanded={expanded}
+        aria-controls={contentId}
+        onClick={() => setExpanded((e) => !e)}
+        display="flex"
+        justifyContent="space-between"
+        alignItems="center"
+        w="100%"
+        gap={2}
+        px={3.5}
+        py={3.5}
+        cursor="pointer"
+        bg="transparent"
+        border="none"
+        textAlign="left"
+        _hover={{ bg: 'slate.50' }}
+      >
+        <Subtext
+          fontWeight="bold"
+          color="slate.900"
+          textTransform="uppercase"
+          letterSpacing="wider"
+        >
+          {label}
+        </Subtext>
+        <HStack gap={1.5} onClick={(e) => e.stopPropagation()}>
+          {headerAction}
+          <Box color="slate.900" display="flex" alignItems="center">
+            {showErrorGlyph ? (
+              <TbAlertCircle boxSize="xs" color="danger.main" />
+            ) : expanded ? (
+              <TbChevronUp boxSize="xs" />
+            ) : (
+              <TbChevronDown boxSize="xs" />
+            )}
+          </Box>
+        </HStack>
+      </Box>
+      {expanded ? (
+        <Box id={contentId} px={3.5} pb={4} pt={1}>
+          {children}
+        </Box>
+      ) : null}
+    </Stack>
+  );
+}

package/src/components/Workflow/canvas/CollapsibleSection/index.ts

@@ -0,0 +1,4 @@
+export {
+  CollapsibleSection,
+  type CollapsibleSectionProps,
+} from './CollapsibleSection';

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

@@ -0,0 +1,104 @@
+'use client';
+
+import { type ReactNode } from 'react';
+import { HStack } from '@chakra-ui/react';
+
+import { RxDotsHorizontal, TbX } from '@/components/Icon';
+import { IconButton } from '@/components/IconButton';
+import { Menu } from '@/components/Menu';
+import { Subtext, Text } from '@/components/Typography';
+
+import { useWorkflowTranslate } from '../../WorkflowContext';
+
+interface DrawerHeaderProps {
+  /**
+   * Title text shown semibold on the left. Node drawers render an icon
+   * cluster ahead of it via `icon`; edge drawers render only the text.
+   */
+  title: string;
+  /**
+   * Muted text trailing the title. Node drawers pass the node-type label here
+   * when the title is an instance name (e.g. "고객 응대 · Agent") so the kind
+   * stays identifiable next to author-chosen names.
+   */
+  subtitle?: string;
+  /** Optional leading icon cluster (node drawers pass the node-type icon). */
+  icon?: ReactNode;
+  /**
+   * Clamp the title to a single line (edge connection titles can be long).
+   * Node labels are short and render unclamped.
+   */
+  lineClampTitle?: boolean;
+  /**
+   * Overflow-menu contents (pre-built `Menu.Item` nodes from the caller).
+   * When omitted, no overflow menu renders at all — this preserves the
+   * pinned-node behavior of showing only the close button.
+   */
+  menuItems?: ReactNode;
+  /** Close button handler. */
+  onClose: () => void;
+}
+
+/**
+ * Shared inspector-drawer header: a fixed-height bar with a left title cluster
+ * and a right action cluster (optional overflow `Menu` + a close button). Stays
+ * domain-free — each drawer passes its own title bits and `Menu.Item`s.
+ */
+export function DrawerHeader({
+  title,
+  subtitle,
+  icon,
+  lineClampTitle,
+  menuItems,
+  onClose,
+}: DrawerHeaderProps) {
+  const translate = useWorkflowTranslate();
+  return (
+    <HStack
+      justify="space-between"
+      align="center"
+      px={4}
+      py={3}
+      borderBottom="1px solid"
+      borderColor="slate.200"
+    >
+      <HStack gap={2} minW={0} flex="1">
+        {icon}
+        <Text fontWeight="semibold" lineClamp={lineClampTitle ? 1 : undefined}>
+          {title}
+        </Text>
+        {subtitle ? (
+          <Subtext color="slate.700" flexShrink={0}>
+            {subtitle}
+          </Subtext>
+        ) : null}
+      </HStack>
+      <HStack gap={0.5}>
+        {menuItems ? (
+          <Menu>
+            <Menu.Trigger asChild>
+              <IconButton
+                aria-label={translate('workflow_node_overflow_label') as string}
+                size="xs"
+                variant="ghost"
+                colorPalette="neutral"
+              >
+                <RxDotsHorizontal boxSize="xs" />
+              </IconButton>
+            </Menu.Trigger>
+            <Menu.List zIndex="popover">{menuItems}</Menu.List>
+          </Menu>
+        ) : null}
+        <IconButton
+          aria-label={translate('workflow_node_close') as string}
+          size="xs"
+          variant="ghost"
+          colorPalette="neutral"
+          onClick={onClose}
+        >
+          <TbX boxSize="xs" aria-hidden />
+        </IconButton>
+      </HStack>
+    </HStack>
+  );
+}