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

package/src/components/Typography/Text.tsx

@@ -1,7 +1,10 @@
 import React, { forwardRef } from 'react';
-import { Text as ChakraText, TextProps } from '@chakra-ui/react';
+import { Text as ChakraText } from '@chakra-ui/react';
 
-export const Text = forwardRef<HTMLParagraphElement, TextProps>(
+import { polymorphic } from '../../types/polymorphic';
+import { TypographyOwnProps } from './Typography.types';
+
+const TextImpl = forwardRef<HTMLParagraphElement, TypographyOwnProps>(
   (props, ref) => {
     // Extract fontSize and textStyle to handle them conditionally
     const { fontSize, ...rest } = props;
@@ -21,4 +24,7 @@ export const Text = forwardRef<HTMLParagraphElement, TextProps>(
   }
 );
 
-Text.displayName = 'Text';
+TextImpl.displayName = 'Text';
+
+/** Type-level polymorphism over the same runtime — see `polymorphic`. */
+export const Text = polymorphic<TypographyOwnProps, 'p'>(TextImpl);

package/src/components/Typography/Typography.stories.tsx

@@ -1,6 +1,20 @@
 import { Meta, StoryObj } from '@storybook/react';
 
-import { H1, H2, H3, H4, H5, Link, Overline, Subtext, Subtitle, Text } from '.';
+import { InlineCode } from '../InlineCode';
+
+import {
+  Caption,
+  H1,
+  H2,
+  H3,
+  H4,
+  H5,
+  Link,
+  Overline,
+  Subtext,
+  Subtitle,
+  Text,
+} from '.';
 
 const meta = {
   title: 'Components/Typography',
@@ -48,6 +62,60 @@ export const AllTextStyles: Story = {
         Subtext - Lorem ipsum dolor sit amet,{' '}
         <Link href="https://example.com">consectetur adipiscing elit</Link>
       </Subtext>
+      <Caption {...props}>
+        Caption - Lorem ipsum dolor sit amet,{' '}
+        <Link href="https://example.com">consectetur adipiscing elit</Link>
+      </Caption>
+    </>
+  ),
+};
+
+// InlineCode nested in each type tier. InlineCode's size is em-relative
+// (textStyle="subtext"), so it tracks whatever it sits in: a readable step below
+// body in a paragraph, and proportionally smaller inside a heading. Use this to
+// eyeball the step-down per context and to confirm a caller's `fontFamily="mono"`
+// still wins (InlineCode has no mono default). Pair with `AllTextStyles` above.
+export const InlineCodeInTextStyles: Story = {
+  render: () => {
+    const code = <InlineCode fontFamily="mono">inline_code()</InlineCode>;
+    return (
+      <>
+        <H1>H1 heading with {code} inside</H1>
+        <H2>H2 heading with {code} inside</H2>
+        <H3>H3 heading with {code} inside</H3>
+        <H4>H4 heading with {code} inside</H4>
+        <H5>H5 heading with {code} inside</H5>
+        <Text>Paragraph body text with {code} mid-sentence.</Text>
+        <Subtitle>Subtitle with {code} inside</Subtitle>
+        <Subtext>Subtext with {code} inside</Subtext>
+        <Caption>Caption with {code} inside</Caption>
+      </>
+    );
+  },
+};
+
+/**
+ * `as` swaps the rendered element **and** the props it accepts.
+ *
+ * This scale is a *type* scale, not a document outline. The two are chosen for
+ * different reasons — size by layout, heading level by structure — so `as` is
+ * how a call site keeps one while fixing the other. KWCAG 제목 제공 grades the
+ * level, and a screen reader's heading list is built from it; neither can see
+ * how large the text looks.
+ *
+ * `htmlFor` on the last line is a `<label>` prop, and it type-checks because
+ * `as="label"` carried it in. Before, `as="label"` rendered a label that no
+ * form control could be pointed at.
+ */
+export const AsElement: Story = {
+  render: () => (
+    <>
+      <H3 as="h2">h3 크기, 문서 구조상 h2</H3>
+      <Subtitle as="h2">제목이 맞을 때만 제목으로</Subtitle>
+      <Subtitle>보통은 문단으로 남는다</Subtitle>
+      <Text as="label" htmlFor="email">
+        이메일
+      </Text>
     </>
   ),
 };

package/src/components/Typography/Typography.types.ts

@@ -1,3 +1,48 @@
-import { TextProps } from '@chakra-ui/react';
+import type { ElementType } from 'react';
+import {
+  HeadingProps as ChakraHeadingProps,
+  TextProps,
+} from '@chakra-ui/react';
 
-export type TypographyProps = TextProps;
+// Relative, NOT `@/types/*`. Path aliases survive into the emitted `.d.ts` and
+// resolve against the CONSUMER's tsconfig, which silently degrades the type to
+// `any`. See `src/types/polymorphic.ts`.
+import type { PolymorphicProps } from '../../types/polymorphic';
+
+export type TypographyOwnProps = Omit<TextProps, 'as'>;
+
+/**
+ * Props for the body-text scale (`Text`, `Subtitle`, `Subtext`, `Caption`,
+ * `Overline`), typed for whatever element `as` renders. Defaults to `'p'`, so
+ * the bare type means exactly what it meant before.
+ *
+ * The scale is a *type* scale, not a document outline — which is why `as` is
+ * the documented escape hatch on these. A subtitle that genuinely is the next
+ * heading says so at the call site, where that is known:
+ *
+ * ```tsx
+ * <Subtitle as="h2">{sectionTitle}</Subtitle>
+ * <Text as="label" htmlFor="email">이메일</Text>
+ * ```
+ *
+ * The second line is the reason this needs to be polymorphic and not merely
+ * permitted: `as="label"` already compiled, but `htmlFor` did not come with it.
+ */
+export type TypographyProps<TElement extends ElementType = 'p'> =
+  PolymorphicProps<TElement, TypographyOwnProps>;
+
+export type HeadingOwnProps = Omit<ChakraHeadingProps, 'as'>;
+
+/**
+ * Props for `H1`–`H5`, typed for whatever element `as` renders.
+ *
+ * Each defaults to its own tag, so the bare type is unchanged. `as` is how a
+ * call site keeps the type scale while fixing the document outline — KWCAG
+ * 제목 제공 grades the heading LEVEL, not the size:
+ *
+ * ```tsx
+ * <H3 as="h2">{sectionTitle}</H3>
+ * ```
+ */
+export type HeadingProps<TElement extends ElementType = 'h1'> =
+  PolymorphicProps<TElement, HeadingOwnProps>;

package/src/components/Typography/index.ts

@@ -1,10 +1,11 @@
 // Component exports
+export { Caption } from './Caption';
 export { H1 } from './H1';
 export { H2 } from './H2';
 export { H3 } from './H3';
 export { H4 } from './H4';
 export { H5 } from './H5';
-export { Link } from './Link';
+export { Link, LINK_RAMP } from './Link';
 export { Overline } from './Overline';
 export { Subtext } from './Subtext';
 export { Subtitle } from './Subtitle';
@@ -13,16 +14,22 @@ export { Text } from './Text';
 // Type exports
 export type { LinkCustomProps as LinkProps } from './Link';
 export type {
+  TypographyProps as CaptionProps,
   TypographyProps as OverlineProps,
   TypographyProps as SubtextProps,
   TypographyProps as SubtitleProps,
   TypographyProps as TextProps,
+  TypographyOwnProps,
   TypographyProps,
 } from './Typography.types';
+// The heading props now come from our own polymorphic type rather than
+// Chakra's, so `as` carries the element's props with it.
 export type {
   HeadingProps as H1Props,
   HeadingProps as H2Props,
   HeadingProps as H3Props,
   HeadingProps as H4Props,
   HeadingProps as H5Props,
-} from '@chakra-ui/react';
+  HeadingOwnProps,
+  HeadingProps,
+} from './Typography.types';

package/src/components/Workflow/README.md

@@ -182,6 +182,69 @@ to keep the built-in drawer but also highlight the selection elsewhere.
 
 ---
 
+## Adding nodes from your own UI (`useWorkflowActions`)
+
+The palette is drag-and-drop. For anything else — a tap-to-add sheet on touch
+devices, a "+" beside a node, a command menu — call `useWorkflowActions()` from a
+component rendered inside `<Workflow>` (its `children` or
+`renderSelectedNodeToolbar`). It uses the same node builder as a palette drop
+(`{kind}_{N}` id; `defaultConfig` → `localizeDefaults` → `hostDefaults`), so you
+never rebuild ids, configs or placement, and you never import `@xyflow/react`.
+
+```tsx
+import {
+  useWorkflow,
+  useWorkflowActions,
+  Workflow,
+} from '@mindlogic-ai/logician-ui';
+
+function AddAgentButton() {
+  const { editor } = useWorkflow();
+  const { addNode, getAddAfterSource } = useWorkflowActions();
+  const after = getAddAfterSource(editor.selectedNodeId);
+  return (
+    <button
+      onClick={() =>
+        addNode(
+          'agent',
+          after ? { after: after.nodeId } : { at: 'viewportCenter' }
+        )
+      }
+    >
+      {after ? `Add after ${after.label}` : 'Add at centre'}
+    </button>
+  );
+}
+
+<Workflow
+  nodeTypes={NODE_TYPES}
+  renderSelectedNodeToolbar={(node) => <PlusAfter nodeId={node.id} />}
+>
+  <AddAgentButton />
+</Workflow>;
+```
+
+- `addNode(kind, target, { inspector? })` → `{ nodeId, edgeId | null } | null`.
+  - `{ after: nodeId }` places the node to that node's right and wires it from the
+    first free exit. No edge when the new kind has no entry (Note) or a
+    `canConnect` hook / connection rule rejects it. A node with no free exit (End,
+    Note, every exit taken) falls back to the viewport centre.
+  - `{ at: 'viewportCenter' }` places it unconnected in the middle of the view.
+  - Either way the node moves down past anything already there, becomes the
+    selection, and the view pans to it. Node + edge are **one undo step**.
+  - `inspector`: `'follow'` (default — an open inspector moves to the new node),
+    `'open'`, or `'close'`.
+  - Returns `null` without changing anything when read-only, the kind is not
+    registered, or its id is taken (a second `start`).
+- `getAddAfterSource(nodeId)` → `{ nodeId, sourceHandle, label } | null` — the
+  exit an add-after would use; `null` means the add would land at the centre.
+  `canAddAfter(nodeId)` is the boolean form.
+- `renderSelectedNodeToolbar(node)` (a `<Workflow>` prop) renders your content
+  beside the selected node's exit side, in screen space (constant size at any
+  zoom). Return `null` to show nothing.
+
+---
+
 ## Controlled vs uncontrolled graph
 
 - **Controlled:** pass `graph` and `onGraphChange`. You own the source of truth.
@@ -335,6 +398,7 @@ surfaces.
 | `onArrange` | `(g: Graph) => void` | After one-click auto-arrange. |
 | `onHistoryNavigate` | `(g: Graph) => void` | After undo/redo. |
 | `children` | `ReactNode` | Canvas overlay slot (mount `<NodeInspector>` here). |
+| `renderSelectedNodeToolbar` | `(node) => ReactNode` | Content beside the selected node (e.g. a "+"). |
 | `footer` | `ReactNode` | Slot below the canvas. |
 | `categoryTokens` | `CategoryTokenMap` | Override category → color tokens. |
 | `hostBridge` | `unknown` | Opaque host data for inspectors. |

package/src/components/Workflow/Workflow.tsx

@@ -36,6 +36,7 @@ export function Workflow({
   onEdgeClick,
   onSelectionChange,
   onIssuesChange,
+  renderSelectedNodeToolbar,
   footer,
   children,
   categoryTokens,
@@ -169,6 +170,7 @@ export function Workflow({
           showPalette={showPalette && !readOnly}
           onNodeClick={onNodeClick}
           onEdgeClick={onEdgeClick}
+          renderSelectedNodeToolbar={renderSelectedNodeToolbar}
         >
           {children}
         </Canvas>

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

@@ -443,6 +443,16 @@ export type WorkflowProps = {
    */
   children?: ReactNode;
 
+  /**
+   * Content rendered beside the selected node, on its exit (right) side — e.g.
+   * a "+" that adds a node after it via `useWorkflowActions().addNode`. Called
+   * with the selected node whenever one is selected; return `null` to show
+   * nothing. The library positions it in screen space (it keeps its size at
+   * any zoom) and renders it inside the editor, so the content may call
+   * `useWorkflow` / `useWorkflowActions`. Hosts never touch React Flow.
+   */
+  renderSelectedNodeToolbar?: (node: GraphNode) => ReactNode;
+
   /**
    * Notified whenever the issues array identity changes. Mostly a Storybook
    * convenience now that validation is owned entirely by the backend — prod

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

@@ -3,7 +3,7 @@
 import type { MouseEvent, ReactNode } from 'react';
 
 import { Badge } from '@/components/Badge';
-import { TbCheck, TbX } from '@/components/Icon';
+import { CheckIcon, CloseIcon } from '@/components/Icon';
 
 import type { EdgeLabelVariant } from './edgeLabelVariant';
 
@@ -61,8 +61,8 @@ export function BranchLabelBadge({
       cursor={onClick ? 'pointer' : 'default'}
       onClick={onClick}
     >
-      {variant === 'pass' ? <TbCheck boxSize="xs" aria-hidden /> : null}
-      {variant === 'fail' ? <TbX boxSize="xs" aria-hidden /> : null}
+      {variant === 'pass' ? <CheckIcon boxSize="xs" aria-hidden /> : null}
+      {variant === 'fail' ? <CloseIcon boxSize="xs" aria-hidden /> : null}
       {children}
     </Badge>
   );

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

@@ -21,7 +21,9 @@ import {
   IsValidConnection,
   MiniMap,
   NodeChange,
+  NodeToolbar,
   NodeTypes,
+  Position as HandleSide,
   ReactFlow,
   ReactFlowProvider,
   useReactFlow,
@@ -34,7 +36,11 @@ import {
   isValidConnection as isValidWorkflowConnection,
   soleEdgeToHandle,
 } from '../../connectionRules';
-import { genId } from '../../createNode';
+import {
+  createNodeFromType,
+  genId,
+  toDefaultsTranslate,
+} from '../../createNode';
 import {
   autoLayout,
   estimateLabelOverhang,
@@ -47,7 +53,6 @@ import type {
   GraphNode,
   Position,
 } from '../../Workflow.types';
-import { resolveDefaultConfig } from '../../Workflow.types';
 import { useWorkflow, useWorkflowTranslate } from '../../WorkflowContext';
 import type { WorkflowReactFlowNode } from '../GenericNode';
 import { GenericNode } from '../GenericNode';
@@ -107,17 +112,22 @@ function graphToReactFlow(
   };
 }
 
+type CanvasProps = {
+  showPalette?: boolean;
+  onNodeClick?: (node: GraphNode) => void;
+  onEdgeClick?: (edge: GraphEdge) => void;
+  /** See `WorkflowProps.renderSelectedNodeToolbar`. */
+  renderSelectedNodeToolbar?: (node: GraphNode) => ReactNode;
+  children?: ReactNode;
+};
+
 function CanvasInner({
-  showPalette,
+  showPalette = true,
   onNodeClick: onNodeClickHost,
   onEdgeClick: onEdgeClickHost,
+  renderSelectedNodeToolbar,
   children,
-}: {
-  showPalette: boolean;
-  onNodeClick?: (node: GraphNode) => void;
-  onEdgeClick?: (edge: GraphEdge) => void;
-  children?: ReactNode;
-}) {
+}: CanvasProps) {
   const {
     graph,
     dispatch,
@@ -144,13 +154,6 @@ function CanvasInner({
   const [isPaletteOpen, setIsPaletteOpen] = useState(true);
 
   const translate = useWorkflowTranslate();
-  // Tear off only the string lookup so `localizeDefaults` doesn't depend
-  // on the React-fragment interpolation path.
-  const t = useCallback(
-    (key: string, params?: Record<string, string>) =>
-      translate(key, params) as string,
-    [translate]
-  );
 
   useWorkflowKeyboard();
 
@@ -606,32 +609,37 @@ function CanvasInner({
       if (!kind) return;
       const def = getNodeType(kind);
       if (!def) return;
-      const position = screenToFlowPosition({ x: e.clientX, y: e.clientY });
-      const base = resolveDefaultConfig(def) as Record<string, unknown>;
-      const overlay = def.localizeDefaults?.(t) 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`. Keyed on the opaque `hostBridge`; the node type narrows
-      // it. Absent on a generic host, leaving the static defaults in place.
-      const bridged = def.hostDefaults?.(hostBridge) as
-        | Record<string, unknown>
-        | undefined;
-      const node = {
-        id: genId(kind),
-        kind,
-        position,
-        config: { ...base, ...overlay, ...bridged },
-      };
+      // Same builder `useWorkflowActions().addNode` uses, so a drop and a
+      // programmatic add get the same `{kind}_{N}` id and starting config.
+      const node = createNodeFromType(def, {
+        position: screenToFlowPosition({ x: e.clientX, y: e.clientY }),
+        nodes: graph.nodes,
+        translate: toDefaultsTranslate(translate),
+        hostBridge,
+      });
 
       // Dropped nodes land unconnected — authors wire edges explicitly by
       // dragging from an exit point.
       dispatch({ type: 'addNode', node });
     },
-    [dispatch, getNodeType, screenToFlowPosition, t, hostBridge]
+    [
+      dispatch,
+      getNodeType,
+      screenToFlowPosition,
+      graph.nodes,
+      translate,
+      hostBridge,
+    ]
   );
 
+  const selectedNode = selectedNodeId
+    ? graph.nodes.find((n) => n.id === selectedNodeId)
+    : undefined;
+  const selectedNodeToolbar =
+    selectedNode && renderSelectedNodeToolbar
+      ? renderSelectedNodeToolbar(selectedNode)
+      : null;
+
   // Does the canvas top-left corner actually hold overlay chrome the zoom
   // controls should tuck under? The palette toggle docks there when the palette
   // is collapsed, and the error banner when the (editable) graph has issues. If
@@ -716,6 +724,18 @@ function CanvasInner({
           proOptions={{ hideAttribution: true }}
         >
           <Background />
+          {selectedNode && selectedNodeToolbar ? (
+            // Positioned in screen space beside the node's exit side, so the
+            // host's content keeps its size at any zoom.
+            <NodeToolbar
+              nodeId={selectedNode.id}
+              isVisible
+              position={HandleSide.Right}
+              offset={4}
+            >
+              {selectedNodeToolbar}
+            </NodeToolbar>
+          ) : null}
           <CanvasControls
             readOnly={readOnly}
             onAutoArrange={onAutoArrange}
@@ -748,26 +768,10 @@ function CanvasInner({
   );
 }
 
-export function Canvas({
-  showPalette = true,
-  onNodeClick,
-  onEdgeClick,
-  children,
-}: {
-  showPalette?: boolean;
-  onNodeClick?: (node: GraphNode) => void;
-  onEdgeClick?: (edge: GraphEdge) => void;
-  children?: ReactNode;
-}) {
+export function Canvas(props: CanvasProps) {
   return (
     <ReactFlowProvider>
-      <CanvasInner
-        showPalette={showPalette}
-        onNodeClick={onNodeClick}
-        onEdgeClick={onEdgeClick}
-      >
-        {children}
-      </CanvasInner>
+      <CanvasInner {...props} />
     </ReactFlowProvider>
   );
 }

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

@@ -10,14 +10,14 @@ import {
 } from '@xyflow/react';
 
 import {
-  Minus,
-  Plus,
-  TbArrowBackUp,
-  TbArrowForwardUp,
-  TbLock,
-  TbLockOpen,
-  TbMaximize,
-  TbSitemap,
+  ArrowBackUpIcon,
+  ArrowForwardUpIcon,
+  LockIcon,
+  LockOpenIcon,
+  MaximizeIcon,
+  MinusIcon,
+  PlusIcon,
+  SitemapIcon,
 } from '@/components/Icon';
 import { Tooltip } from '@/components/Tooltip';
 
@@ -115,12 +115,12 @@ export function CanvasControls({
     >
       <Tooltip content={zoomInLabel} placement="right">
         <ControlButton onClick={() => zoomIn()} aria-label={zoomInLabel}>
-          <Plus />
+          <PlusIcon />
         </ControlButton>
       </Tooltip>
       <Tooltip content={zoomOutLabel} placement="right">
         <ControlButton onClick={() => zoomOut()} aria-label={zoomOutLabel}>
-          <Minus />
+          <MinusIcon />
         </ControlButton>
       </Tooltip>
       <Tooltip content={fitViewLabel} placement="right">
@@ -128,7 +128,7 @@ export function CanvasControls({
           onClick={() => fitView(fitViewOptions)}
           aria-label={fitViewLabel}
         >
-          <TbMaximize />
+          <MaximizeIcon />
         </ControlButton>
       </Tooltip>
       {/* Undo/redo, the interactivity lock and auto-arrange are authoring
@@ -141,7 +141,7 @@ export function CanvasControls({
             disabled={!canUndo}
             aria-label={undoLabel}
           >
-            <TbArrowBackUp />
+            <ArrowBackUpIcon />
           </ControlButton>
         </Tooltip>
       )}
@@ -152,7 +152,7 @@ export function CanvasControls({
             disabled={!canRedo}
             aria-label={redoLabel}
           >
-            <TbArrowForwardUp />
+            <ArrowForwardUpIcon />
           </ControlButton>
         </Tooltip>
       )}
@@ -162,14 +162,14 @@ export function CanvasControls({
             onClick={onToggleInteractivity}
             aria-label={interactivityLabel}
           >
-            {isInteractive ? <TbLockOpen /> : <TbLock />}
+            {isInteractive ? <LockOpenIcon /> : <LockIcon />}
           </ControlButton>
         </Tooltip>
       )}
       {readOnly ? null : (
         <Tooltip content={autoArrangeLabel} placement="right">
           <ControlButton onClick={onAutoArrange} aria-label={autoArrangeLabel}>
-            <TbSitemap />
+            <SitemapIcon />
           </ControlButton>
         </Tooltip>
       )}

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

@@ -16,7 +16,7 @@ import {
   getSmoothStepPath,
 } from '@xyflow/react';
 
-import { TbX } from '@/components/Icon';
+import { CloseIcon } from '@/components/Icon';
 import { IconButton } from '@/components/IconButton';
 
 import { useWorkflow, useWorkflowTranslate } from '../../WorkflowContext';
@@ -186,7 +186,7 @@ export function LabeledEdge({
                   bg="bg.surface"
                   borderRadius="full"
                 >
-                  <TbX boxSize="xs" />
+                  <CloseIcon boxSize="xs" />
                 </IconButton>
               </Box>
             ) : null}

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

@@ -3,7 +3,11 @@
 import { ReactNode, useId, useState } from 'react';
 import { Box, HStack, Stack, type StackProps } from '@chakra-ui/react';
 
-import { TbAlertCircle, TbChevronDown, TbChevronUp } from '@/components/Icon';
+import {
+  AlertCircleIcon,
+  ChevronDownIcon,
+  ChevronUpIcon,
+} from '@/components/Icon';
 import { Subtext } from '@/components/Typography';
 
 export type CollapsibleSectionProps = StackProps & {
@@ -77,11 +81,11 @@ export function CollapsibleSection({
           {headerAction}
           <Box color="slate.900" display="flex" alignItems="center">
             {showErrorGlyph ? (
-              <TbAlertCircle boxSize="xs" color="danger.main" />
+              <AlertCircleIcon boxSize="xs" color="danger.main" />
             ) : expanded ? (
-              <TbChevronUp boxSize="xs" />
+              <ChevronUpIcon boxSize="xs" />
             ) : (
-              <TbChevronDown boxSize="xs" />
+              <ChevronDownIcon boxSize="xs" />
             )}
           </Box>
         </HStack>

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

@@ -3,7 +3,7 @@
 import { type ReactNode } from 'react';
 import { HStack } from '@chakra-ui/react';
 
-import { RxDotsHorizontal, TbX } from '@/components/Icon';
+import { CloseIcon, DotsHorizontalIcon } from '@/components/Icon';
 import { IconButton } from '@/components/IconButton';
 import { Menu } from '@/components/Menu';
 import { Subtext, Text } from '@/components/Typography';
@@ -83,7 +83,7 @@ export function DrawerHeader({
                 variant="ghost"
                 colorPalette="neutral"
               >
-                <RxDotsHorizontal boxSize="xs" />
+                <DotsHorizontalIcon boxSize="xs" />
               </IconButton>
             </Menu.Trigger>
             <Menu.List zIndex="popover">{menuItems}</Menu.List>
@@ -96,7 +96,7 @@ export function DrawerHeader({
           colorPalette="neutral"
           onClick={onClose}
         >
-          <TbX boxSize="xs" aria-hidden />
+          <CloseIcon boxSize="xs" aria-hidden />
         </IconButton>
       </HStack>
     </HStack>

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

@@ -3,7 +3,7 @@
 import { type ReactNode, useMemo } from 'react';
 import { Box, HStack, VStack } 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';
@@ -43,7 +43,7 @@ function IssueCallout({
   resolveMessage: (issue: Issue) => string;
 }) {
   const { bg, color, borderColor } = severityCalloutStyle(severity);
-  const Icon = severity === 'error' ? TbAlertCircle : AlertTriangle;
+  const Icon = severity === 'error' ? AlertCircleIcon : AlertTriangleIcon;
   return (
     <Box
       border="1px solid"