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

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

@@ -0,0 +1,321 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import { Box, HStack, Stack } from '@chakra-ui/react';
+import { Handle, Position } from '@xyflow/react';
+
+import { Card } from '@/components/Card';
+import { Chip } from '@/components/Chip';
+import { AlertTriangle, StickyNote } from '@/components/Icon';
+import { Subtext } from '@/components/Typography';
+
+import type {
+  MetaChipSpec,
+  MetaChipTone,
+  NodeCategory,
+  RunState,
+} from '../../Workflow.types';
+import { BranchLabelBadge } from '../Canvas/BranchLabelBadge';
+import { getEdgeLabelVariant } from '../Canvas/edgeLabelVariant';
+import { getCategoryTokens, IconTile } from '../IconTile';
+import {
+  CARD_WIDTH,
+  getPortTop,
+  MAX_META_CHIPS,
+  metaChipStyles,
+  metaChipToneStyles,
+  NODE_MIN_HEIGHT,
+  PORT_EDGE_PAD,
+  PORT_GAP,
+  PORT_STYLE,
+} from './NodeShell.styles';
+import type { NodeShellProps, RingChrome } from './NodeShell.types';
+
+/**
+ * Compact pill for the canvas node's meta row. Wraps logician-ui Chip
+ * and overrides its chunky default padding/radius via `metaChipStyles`.
+ * Tone tints the chip (e.g. an unknown model on an Agent node).
+ */
+function MetaChip({
+  children,
+  tone = 'default',
+}: {
+  children: ReactNode;
+  tone?: MetaChipTone;
+}) {
+  return (
+    <Chip {...metaChipStyles} {...metaChipToneStyles[tone]}>
+      {children}
+    </Chip>
+  );
+}
+
+function normalizeChip(spec: MetaChipSpec): {
+  text: string;
+  tone: MetaChipTone;
+} {
+  return typeof spec === 'string'
+    ? { text: spec, tone: 'default' }
+    : { text: spec.text, tone: spec.tone ?? 'default' };
+}
+
+/**
+ * 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
+ * annotation is visible.
+ *
+ * Precedence for the ring color: running > error > selected > warning.
+ * The default-case border is `slate.300`.
+ */
+function getRingChrome(
+  category: NodeCategory,
+  selected: boolean,
+  hasError: boolean,
+  hasWarning: boolean,
+  runState: RunState,
+  noteBorder: string
+): RingChrome {
+  if (category === 'note') {
+    if (selected) {
+      return {
+        borderColor: noteBorder,
+        outline: '3px solid',
+        outlineColor: 'primary.lighter',
+      };
+    }
+    return { borderColor: noteBorder };
+  }
+  if (runState === 'running') {
+    return {
+      borderColor: 'primary.main',
+      outline: '3px solid',
+      outlineColor: 'primary.lighter',
+    };
+  }
+  if (hasError) {
+    return {
+      borderColor: 'danger.main',
+      outline: '3px solid',
+      outlineColor: 'danger.lighter',
+    };
+  }
+  if (selected) {
+    return {
+      borderColor: 'primary.main',
+      outline: '3px solid',
+      outlineColor: 'primary.lighter',
+    };
+  }
+  if (hasWarning) return { borderColor: 'warning.main' };
+  return { borderColor: 'slate.300' };
+}
+
+/**
+ * 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
+ * dot.
+ */
+function getHeaderBadge(
+  hasError: boolean,
+  hasWarning: boolean,
+  runState: RunState
+): ReactNode {
+  if (hasError) {
+    return (
+      <Box color="danger.main" display="flex" alignItems="center">
+        <AlertTriangle boxSize="xs" />
+      </Box>
+    );
+  }
+  if (hasWarning) {
+    return (
+      <Box color="warning.dark" display="flex" alignItems="center">
+        <AlertTriangle boxSize="xs" />
+      </Box>
+    );
+  }
+  if (runState === 'running') {
+    return (
+      <Box
+        boxSize="2.5"
+        borderRadius="full"
+        bg="success.main"
+        outline="3px solid"
+        outlineColor="success.lighter"
+      />
+    );
+  }
+  return null;
+}
+
+export function NodeShell({
+  label,
+  instanceTitle,
+  metaChips,
+  category,
+  icon,
+  selected,
+  runState,
+  issues,
+  inputs,
+  outputs,
+  connectedOutputIds,
+  categoryTokens,
+  customBody,
+}: NodeShellProps) {
+  const hasError = issues.some((i) => i.severity === 'error');
+  const hasWarning = !hasError && issues.some((i) => i.severity === 'warning');
+  const tokens = getCategoryTokens(category, categoryTokens);
+  const ring = getRingChrome(
+    category,
+    selected,
+    hasError,
+    hasWarning,
+    runState,
+    tokens.border
+  );
+  const badge = getHeaderBadge(hasError, hasWarning, runState);
+  const isNote = category === 'note';
+  const chips = (metaChips ?? []).slice(0, MAX_META_CHIPS).map(normalizeChip);
+  const overflowChip =
+    metaChips && metaChips.length > MAX_META_CHIPS
+      ? `+${metaChips.length - MAX_META_CHIPS}`
+      : null;
+
+  // Grow the card so ports stay evenly spread without crowding: the busiest
+  // side drives the height — the inter-port gaps plus a tight top/bottom edge
+  // pad — floored at NODE_MIN_HEIGHT. Notes carry no ports and size to their
+  // text, so they opt out.
+  const portCount = Math.max(inputs.length, outputs.length);
+  const minHeight = isNote
+    ? undefined
+    : `${Math.max(
+        NODE_MIN_HEIGHT,
+        PORT_GAP * Math.max(portCount - 1, 0) + PORT_EDGE_PAD * 2
+      )}px`;
+
+  return (
+    <Card
+      width={CARD_WIDTH}
+      minHeight={minHeight}
+      p={0}
+      borderRadius="lg"
+      borderColor={ring.borderColor}
+      outline={ring.outline}
+      outlineColor={ring.outlineColor}
+      boxShadow="sm"
+      bg={isNote ? tokens.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.
+      display="flex"
+      flexDirection="column"
+      justifyContent="center"
+    >
+      {isNote ? (
+        <Stack gap={1} px={3} py={2}>
+          <HStack
+            gap={1}
+            color="warning.dark"
+            fontWeight="bold"
+            letterSpacing="wider"
+            textTransform="uppercase"
+          >
+            <StickyNote boxSize="xs" />
+            <Subtext color="warning.dark" fontWeight="bold">
+              Note
+            </Subtext>
+          </HStack>
+          {customBody ?? (
+            <Subtext color="slate.1200" lineHeight={1.45}>
+              {instanceTitle ?? label}
+            </Subtext>
+          )}
+        </Stack>
+      ) : (
+        (customBody ?? (
+          <Stack gap={0}>
+            <HStack
+              gap={2}
+              px={3}
+              pt={2}
+              pb={chips.length || overflowChip ? 1 : 2}
+            >
+              <IconTile
+                category={category}
+                icon={icon}
+                tokens={categoryTokens}
+              />
+              <Stack gap={0} flex={1} minWidth={0}>
+                <Subtext fontWeight="semibold" color="slate.1200" lineClamp={1}>
+                  {label}
+                </Subtext>
+                {instanceTitle ? (
+                  <Subtext color="slate.900" lineClamp={1}>
+                    {instanceTitle}
+                  </Subtext>
+                ) : null}
+              </Stack>
+              {badge}
+            </HStack>
+            {chips.length || overflowChip ? (
+              <HStack px={3} pb={2} gap={1} flexWrap="wrap">
+                {chips.map((chip) => (
+                  <MetaChip key={chip.text} tone={chip.tone}>
+                    {chip.text}
+                  </MetaChip>
+                ))}
+                {overflowChip ? <MetaChip>{overflowChip}</MetaChip> : null}
+              </HStack>
+            ) : null}
+          </Stack>
+        ))
+      )}
+
+      {inputs.map((h, i) => (
+        <Handle
+          key={`in-${h.id}`}
+          id={h.id}
+          type="target"
+          position={Position.Left}
+          style={{
+            ...PORT_STYLE,
+            top: getPortTop(i, inputs.length),
+          }}
+        />
+      ))}
+      {outputs.map((h, i) => (
+        <Handle
+          key={`out-${h.id}`}
+          id={h.id}
+          type="source"
+          position={Position.Right}
+          style={{
+            ...PORT_STYLE,
+            top: getPortTop(i, outputs.length),
+          }}
+        >
+          {h.label && !connectedOutputIds?.has(h.id) ? (
+            // Same badge as the connected edge carries (see BranchLabelBadge),
+            // so disconnecting/connecting reads as the chip relocating rather
+            // than restyling. `pointerEvents="none"` keeps the handle draggable
+            // through the label.
+            <Box
+              position="absolute"
+              left="14px"
+              top="50%"
+              transform="translateY(-50%)"
+              whiteSpace="nowrap"
+              pointerEvents="none"
+            >
+              <BranchLabelBadge variant={getEdgeLabelVariant(h.id)}>
+                {h.label}
+              </BranchLabelBadge>
+            </Box>
+          ) : null}
+        </Handle>
+      ))}
+    </Card>
+  );
+}

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

@@ -0,0 +1,45 @@
+import type { CSSProperties, ReactNode } from 'react';
+
+import { type CreatedIcon } from '@/components/Icon';
+
+import type {
+  HandleDef,
+  Issue,
+  MetaChipSpec,
+  NodeCategory,
+  RunState,
+} from '../../Workflow.types';
+import type { CategoryTokenMap } from '../IconTile';
+
+export type NodeShellProps = {
+  label: string;
+  instanceTitle?: string;
+  metaChips?: ReadonlyArray<MetaChipSpec>;
+  category: NodeCategory;
+  icon: CreatedIcon;
+  selected: boolean;
+  runState: RunState;
+  issues: Issue[];
+  inputs: HandleDef[];
+  outputs: HandleDef[];
+  /**
+   * Output handle ids that already have an edge connected. A connected exit's
+   * name is carried by the edge's label badge, so the node suppresses its own
+   * handle label there to avoid showing the branch name twice (once on the
+   * exit, once on the edge). Unconnected exits keep their label so the author
+   * can still tell the branches apart.
+   */
+  connectedOutputIds?: ReadonlySet<string>;
+  /** Optional override for the category → token map. */
+  categoryTokens?: CategoryTokenMap;
+  /** Escape-hatch body. If provided, replaces the standard header+meta layout. */
+  customBody?: ReactNode;
+};
+
+export type RingChrome = {
+  borderColor: string;
+  outline?: string;
+  outlineColor?: string;
+};
+
+export type PortStyle = CSSProperties;

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

@@ -0,0 +1,8 @@
+export { NodeShell } from './NodeShell';
+export {
+  CARD_WIDTH,
+  MAX_META_CHIPS,
+  metaChipStyles,
+  PORT_STYLE,
+} from './NodeShell.styles';
+export type { NodeShellProps, PortStyle, RingChrome } from './NodeShell.types';

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

@@ -0,0 +1,33 @@
+'use client';
+
+import { Box, type BoxProps } from '@chakra-ui/react';
+
+import type { IssueSeverity } from '../../Workflow.types';
+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`.
+   */
+  tone?: 'main' | 'dark';
+}
+
+/** Small round severity marker shared by the issue callout and the issue list. */
+export function SeverityDot({
+  severity,
+  tone = 'main',
+  ...rest
+}: SeverityDotProps) {
+  return (
+    <Box
+      boxSize="1.5"
+      borderRadius="full"
+      flexShrink={0}
+      bg={severityColorToken(severity, tone)}
+      {...rest}
+    />
+  );
+}

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

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

package/src/components/Workflow/canvas/issueSeverity.ts

@@ -0,0 +1,48 @@
+import { toastStyles } from '@/components/Toast';
+
+import type { Issue, IssueSeverity } from '../Workflow.types';
+
+const SEVERITY_PRECEDENCE: Record<IssueSeverity, number> = {
+  error: 2,
+  warning: 1,
+};
+
+/**
+ * The single issue a one-slot surface should represent: highest severity
+ * wins, first-listed breaks ties. Shared by every "tint by worst issue"
+ * consumer (field borders, the header title editor) so precedence can't
+ * drift between surfaces.
+ */
+export const pickPrimaryIssue = (issues: Issue[]): Issue | null => {
+  if (issues.length === 0) return null;
+  let primary = issues[0];
+  for (let i = 1; i < issues.length; i += 1) {
+    if (
+      SEVERITY_PRECEDENCE[issues[i].severity] >
+      SEVERITY_PRECEDENCE[primary.severity]
+    ) {
+      primary = issues[i];
+    }
+  }
+  return primary;
+};
+
+/**
+ * Semantic color token for an issue severity — shared across issue list UIs.
+ * `tone` selects the shade: the default `'main'` for text/icons, or `'dark'`
+ * where `.main` is too light to read (e.g. the small list-bullet markers in
+ * drawer issue callouts, which need extra contrast against the tinted bg).
+ */
+export const severityColorToken = (
+  severity: IssueSeverity,
+  tone: 'main' | 'dark' = 'main'
+): string => (severity === 'error' ? `danger.${tone}` : `warning.${tone}`);
+
+/**
+ * Tinted callout styling (bg / border / text) for an issue severity. Reuses the
+ * `Toast` component's golden-ratio combo — the documented WCAG AA pairing — so
+ * the boxed inspector callouts stay in lockstep with it instead of restating
+ * the tokens. `IssueSeverity` is a subset of the toast statuses.
+ */
+export const severityCalloutStyle = (severity: IssueSeverity) =>
+  toastStyles[severity];

package/src/components/Workflow/canvas/useFieldFocusRequest.ts

@@ -0,0 +1,54 @@
+'use client';
+
+import { type RefObject, useEffect } from 'react';
+
+import { useWorkflow } from '../WorkflowContext';
+
+/**
+ * Wires a field surface into the `fieldFocusRequest` channel: when the canvas
+ * validation banner asks to jump to `(nodeId, fieldKey)`, the matching
+ * container scrolls into view and its first focusable element is focused,
+ * then the request is consumed so a re-render doesn't refocus repeatedly.
+ *
+ * Shared by `FieldWrapper` (body fields) and `NodeTitleEditable` (the header
+ * rename editor) so the jump protocol can't drift between them. The selector
+ * includes the editable's `[data-part="preview"]` — focusing it activates
+ * edit mode (activationMode "focus"); mid-edit its `input` matches first.
+ */
+export function useFieldFocusRequest(
+  nodeId: string,
+  fieldKey: string,
+  containerRef: RefObject<HTMLDivElement | null>
+): void {
+  const { fieldFocusRequest, consumeFieldFocusRequest } = useWorkflow();
+
+  useEffect(() => {
+    if (
+      fieldFocusRequest?.nodeId !== nodeId ||
+      fieldFocusRequest.fieldKey !== fieldKey
+    ) {
+      return;
+    }
+    // Defer one frame so a freshly-mounted drawer has painted before we
+    // try to scroll/focus inside it.
+    const handle = requestAnimationFrame(() => {
+      const root = containerRef.current;
+      if (root) {
+        root.scrollIntoView({ block: 'center', behavior: 'smooth' });
+        root
+          .querySelector<HTMLElement>(
+            'input, textarea, [contenteditable="true"], select, button, [data-part="preview"]'
+          )
+          ?.focus();
+      }
+      consumeFieldFocusRequest();
+    });
+    return () => cancelAnimationFrame(handle);
+  }, [
+    fieldFocusRequest,
+    nodeId,
+    fieldKey,
+    containerRef,
+    consumeFieldFocusRequest,
+  ]);
+}

package/src/components/Workflow/canvas/workflowLabelProps.ts

@@ -0,0 +1,11 @@
+/**
+ * Shared label styling for inputs inside the workflow editor's drawer.
+ * Mirrors the outer ChatbotForm's `FieldLabel` heading tokens so the
+ * editor's inspector reads as the same form surface; the Workflow
+ * canvas can't import from the studio `app/` route, so this lives at
+ * the canvas layer instead.
+ */
+export const workflowLabelProps = {
+  fontWeight: 'semibold',
+  color: 'slate.1300',
+} as const;