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

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

@@ -0,0 +1,84 @@
+'use client';
+
+import { Box, Flex, HStack } from '@chakra-ui/react';
+
+import { Subtext, Text } from '@/components/Typography';
+
+import type { Issue } from '../../Workflow.types';
+import { severityColorToken } from '../issueSeverity';
+import { SeverityDot } from '../SeverityDot';
+
+/**
+ * Severity-bucketed list of node issues rendered inside the floating canvas
+ * banner's dropdown. Row-style — each issue is an inline row with a thin
+ * severity bar, sized for dense scanning rather than block-level reading.
+ */
+export function IssueList({
+  label,
+  tone,
+  issues,
+  onIssueClick,
+  resolveMessage,
+}: {
+  label: string;
+  tone: 'error' | 'warning';
+  issues: Issue[];
+  /**
+   * Optional row click handler — when present, each row becomes a button
+   * that jumps the inspector to the offending field. Stops propagation so
+   * the parent bucket's own click (jump to node) doesn't also fire.
+   */
+  onIssueClick?: (issue: Issue) => void;
+  /**
+   * Map an issue to its display message. Defaults to `issue.message`
+   * (English). Callers wire in `useWorkflowIssueMessage` to get the
+   * localized form.
+   */
+  resolveMessage?: (issue: Issue) => string;
+}) {
+  const color = severityColorToken(tone);
+  return (
+    <Box>
+      <HStack gap={1} px={3} pt={1.5} pb={0.5}>
+        <SeverityDot severity={tone} />
+        <Subtext
+          fontWeight="medium"
+          color={color}
+          textTransform="uppercase"
+          letterSpacing="wider"
+        >
+          {label} · {issues.length}
+        </Subtext>
+      </HStack>
+      {issues.map((issue, i) => (
+        <Flex
+          key={`${issue.code}_${i}`}
+          gap={2}
+          px={3}
+          py={1.5}
+          align="center"
+          cursor={onIssueClick ? 'pointer' : undefined}
+          _hover={onIssueClick ? { bg: 'slate.50' } : undefined}
+          onClick={
+            onIssueClick
+              ? (e) => {
+                  e.stopPropagation();
+                  onIssueClick(issue);
+                }
+              : undefined
+          }
+        >
+          <Box
+            w="3px"
+            flexShrink={0}
+            borderRadius="full"
+            bg={severityColorToken(issue.severity)}
+          />
+          <Text fontSize="sm" color="slate.1200">
+            {resolveMessage ? resolveMessage(issue) : issue.message}
+          </Text>
+        </Flex>
+      ))}
+    </Box>
+  );
+}

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

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

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

@@ -0,0 +1,7 @@
+/**
+ * MIME type the palette uses to ferry a node kind through the HTML5
+ * drag-and-drop API. Read on `drop` to look up the registered NodeTypeDef.
+ */
+export const DRAG_MIME = 'application/x-workflow-node-kind';
+
+export const PALETTE_WIDTH = '220px';

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

@@ -0,0 +1,180 @@
+'use client';
+
+import { DragEvent } from 'react';
+import { Box, HStack, Stack } from '@chakra-ui/react';
+
+import { Card } from '@/components/Card';
+import { GripVertical, TbX } from '@/components/Icon';
+import { IconButton } from '@/components/IconButton';
+import { Subtext, Subtitle } from '@/components/Typography';
+
+import type { NodeCategory, NodeTypeDef } from '../../Workflow.types';
+import { useWorkflow, useWorkflowTranslate } from '../../WorkflowContext';
+import { FloatingCard } from '../FloatingCard';
+import { IconTile } from '../IconTile';
+import { DRAG_MIME, PALETTE_WIDTH } from './NodePalette.styles';
+
+/**
+ * Display order for category sections. Categories not in this list (e.g. a
+ * host-added kind) fall through to the end in registration order so a new
+ * category never disappears from the palette.
+ */
+const CATEGORY_ORDER: readonly NodeCategory[] = [
+  'trigger',
+  'ai',
+  'logic',
+  'safety',
+  'output',
+  'note',
+];
+
+const CATEGORY_LABELS: Record<NodeCategory, string> = {
+  trigger: 'Trigger',
+  ai: 'AI',
+  logic: 'Logic',
+  safety: 'Safety',
+  output: 'Output',
+  note: 'Note',
+};
+
+function PaletteItem({ def }: { def: NodeTypeDef }) {
+  const { categoryTokens } = useWorkflow();
+  const translate = useWorkflowTranslate();
+  const description = def.descriptionKey
+    ? translate(def.descriptionKey)
+    : def.description;
+  const onDragStart = (e: DragEvent) => {
+    e.dataTransfer.setData(DRAG_MIME, def.kind);
+    e.dataTransfer.effectAllowed = 'move';
+  };
+  return (
+    <Card
+      draggable
+      onDragStart={onDragStart}
+      p={0}
+      borderRadius="lg"
+      // No box-shadow: the browser's HTML5 drag preview captures a
+      // rectangular snapshot of the element. Card's default `shadow="sm"`
+      // and the `clickable` hover effect leak outside the rounded border
+      // and read as a white "halo" in the drag image.
+      boxShadow="none"
+      transition="none"
+      cursor="grab"
+      _active={{ cursor: 'grabbing' }}
+      _hover={{ borderColor: 'primary.main' }}
+    >
+      <HStack gap={2} px={2.5} py={2}>
+        <IconTile
+          category={def.category}
+          icon={def.icon}
+          tokens={categoryTokens}
+        />
+        <Stack gap={0} flex={1} minWidth={0}>
+          <Subtext fontWeight="semibold" color="slate.1200" lineClamp={1}>
+            {def.label}
+          </Subtext>
+          {description ? (
+            <Subtext color="slate.900" lineClamp={1}>
+              {description}
+            </Subtext>
+          ) : null}
+        </Stack>
+        <Box color="slate.700" display="flex" alignItems="center">
+          <GripVertical boxSize="xs" />
+        </Box>
+      </HStack>
+    </Card>
+  );
+}
+
+/**
+ * Sidebar that lets the author drag node kinds onto the canvas. Rendered as a
+ * floating card over the canvas (matching the right-hand inspector drawer), with
+ * a header that collapses it back to {@link NodePaletteToggle}.
+ */
+export function NodePalette({ onClose }: { onClose: () => void }) {
+  const { nodeTypes, readOnly } = useWorkflow();
+  const translate = useWorkflowTranslate();
+  if (readOnly) return null;
+
+  // Group by category, preserving registration order within each group.
+  // Pinned kinds (Start) aren't draggable so they're filtered out up front.
+  const draggable = Object.values(nodeTypes).filter(
+    (def) => !def.placement?.pinned
+  );
+  const byCategory = new Map<NodeCategory, NodeTypeDef[]>();
+  for (const def of draggable) {
+    const bucket = byCategory.get(def.category) ?? [];
+    bucket.push(def);
+    byCategory.set(def.category, bucket);
+  }
+  const orderedCategories: NodeCategory[] = [
+    ...CATEGORY_ORDER.filter((c) => byCategory.has(c)),
+    ...[...byCategory.keys()].filter((c) => !CATEGORY_ORDER.includes(c)),
+  ];
+
+  return (
+    <FloatingCard
+      width={PALETTE_WIDTH}
+      mt={4}
+      mb={4}
+      mx={4}
+      // Size to content and float (like the right-hand inspector) instead of
+      // stretching the full canvas height into a sidebar. `height="fit-content"`
+      // forces it off the flex row's cross-axis stretch; a long list still caps
+      // at the available column via `maxHeight` and scrolls its body.
+      alignSelf="flex-start"
+      height="fit-content"
+      maxHeight="calc(100% - var(--chakra-spacing-4) - var(--chakra-spacing-4))"
+      display="flex"
+      flexDirection="column"
+    >
+      {/* Header mirrors the inspector drawer's chrome on the opposite edge:
+          a title cluster + a single xs close button that collapses the card
+          back to the floating `+` toggle. */}
+      <HStack
+        justify="space-between"
+        align="center"
+        px={4}
+        py={3}
+        borderBottom="1px solid"
+        borderColor="slate.200"
+      >
+        <Subtitle color="slate.1300">
+          {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 />
+        </IconButton>
+      </HStack>
+      <Box flex="1" minHeight={0} overflowY="auto" p={3}>
+        <Stack gap={4}>
+          {orderedCategories.map((category) => (
+            <Stack key={category} gap={2}>
+              <Subtext
+                fontWeight="bold"
+                color="slate.900"
+                textTransform="uppercase"
+                letterSpacing="wider"
+                pl={1}
+              >
+                {CATEGORY_LABELS[category]}
+              </Subtext>
+              <Stack gap={2}>
+                {byCategory.get(category)!.map((def) => (
+                  <PaletteItem key={def.kind} def={def} />
+                ))}
+              </Stack>
+            </Stack>
+          ))}
+        </Stack>
+      </Box>
+    </FloatingCard>
+  );
+}

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

@@ -0,0 +1,39 @@
+'use client';
+
+import { Box } from '@chakra-ui/react';
+
+import { IoAddOutline } from '@/components/Icon';
+import { IconButton } from '@/components/IconButton';
+import { Tooltip } from '@/components/Tooltip';
+
+import { useWorkflowTranslate } from '../../WorkflowContext';
+
+/**
+ * Collapsed entry-point for the palette: a floating `+` button docked over the
+ * canvas top-left. Opening it swaps in the full {@link NodePalette} card; the
+ * card's close button collapses back to this button. Mirrors the right-hand
+ * inspector drawer's "float over the canvas" treatment on the opposite edge.
+ */
+export function NodePaletteToggle({ onOpen }: { onOpen: () => void }) {
+  const translate = useWorkflowTranslate();
+  const label = translate('workflow_palette_title') as string;
+  return (
+    // zIndex sits above the GraphErrorBanner (zIndex 5), which docks in the same
+    // top-left corner, so the toggle stays clickable when the graph has issues.
+    <Box position="absolute" top={4} left={4} zIndex={6}>
+      <Tooltip content={label} placement="right">
+        <IconButton
+          aria-label={label}
+          size="md"
+          variant="outline"
+          colorPalette="neutral"
+          bg="bg.surface"
+          boxShadow="md"
+          onClick={onOpen}
+        >
+          <IoAddOutline boxSize="md" />
+        </IconButton>
+      </Tooltip>
+    </Box>
+  );
+}

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

@@ -0,0 +1,3 @@
+export { NodePalette } from './NodePalette';
+export { DRAG_MIME, PALETTE_WIDTH } from './NodePalette.styles';
+export { NodePaletteToggle } from './NodePaletteToggle';

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

@@ -0,0 +1,84 @@
+import type { PortStyle } from './NodeShell.types';
+
+export const CARD_WIDTH = '174px';
+
+/**
+ * Floor height (px) for a canvas node so a content-light node (e.g. Start,
+ * whose header is just an icon + label) doesn't render as a cramped sliver.
+ * Composed into a px string at the call site — a raw number would be read as
+ * a Chakra spacing token, not pixels.
+ */
+export const NODE_MIN_HEIGHT = 64;
+
+/**
+ * Vertical gap (px) between adjacent ports. Ports are stacked symmetrically
+ * around the card's vertical centre (see `portTop` in NodeShell), so a node
+ * with `n` ports reserves `PORT_GAP * (n - 1)` between the first and last —
+ * enough that a many-branch node's exits (Classify, If/Else) don't squish
+ * together or collide their labels.
+ */
+export const PORT_GAP = 28;
+
+/**
+ * Padding (px) above the first port and below the last. Kept deliberately
+ * tighter than `PORT_GAP` so a busy node (e.g. Classify with many categories)
+ * doesn't grow taller than it needs to — the old percentage spread forced this
+ * edge gap to equal the inter-port gap, which read as too much dead space.
+ */
+export const PORT_EDGE_PAD = 14;
+
+/**
+ * Vertical offset for the `i`-th of `count` ports, expressed relative to the
+ * card's centre. Stacking them around the middle (rather than spreading them
+ * across the full height) keeps a single port dead-centre and lets the top /
+ * bottom edge padding shrink to `PORT_EDGE_PAD` independently of `PORT_GAP`,
+ * so a busy node isn't padded out taller than it needs to be.
+ */
+export function getPortTop(index: number, count: number): string {
+  const offset = (index - (count - 1) / 2) * PORT_GAP;
+  return `calc(50% + ${offset}px)`;
+}
+
+/** Cap on the meta-chip row so a node with many badges can't grow unboundedly. */
+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.
+ */
+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')}`,
+};
+
+/**
+ * Compact pill styling for the canvas node's meta row. Overrides logician-ui
+ * Chip's chunky defaults so a row of badges fits on a 174px-wide card,
+ * but the font size stays on the `sm` theme token — no sub-`sm` sizes
+ * in the editor.
+ */
+export const metaChipStyles = {
+  variant: 'soft' as const,
+  colorPalette: 'neutral' as const,
+  fontWeight: 'medium',
+  px: 2,
+  py: 0.5,
+  borderRadius: 'sm',
+};
+
+/**
+ * Per-tone color overrides applied on top of `metaChipStyles`. `default`
+ * is empty so the base styles win; `danger`/`warning` tint the chip when
+ * a sub-value (e.g. an unknown model) is invalid.
+ */
+export const metaChipToneStyles = {
+  default: {},
+  danger: { bg: 'danger.lightest', color: 'danger.dark' },
+  warning: { bg: 'warning.lightest', color: 'warning.dark' },
+} as const;