@mindlogic-ai/logician-ui 4.0.0-alpha.36 → 4.0.0-alpha.37

package/dist/components/Workflow/useWorkflowActions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useWorkflowActions.d.ts","sourceRoot":"","sources":["../../../src/components/Workflow/useWorkflowActions.ts"],"names":[],"mappings":"AAMA,OAAO,EACL,KAAK,aAAa,EAInB,MAAM,aAAa,CAAC;AAGrB,YAAY,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAEjD,iFAAiF;AACjF,MAAM,MAAM,aAAa,GAAG;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAA;CAAE,CAAC;AAEtE,MAAM,MAAM,cAAc,GAAG;IAC3B;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;CACzC,CAAC;AAEF,qEAAqE;AACrE,MAAM,MAAM,cAAc,GAAG;IAC3B,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,EAAE,MAAM,CAAC;IACrB,oEAAoE;IACpE,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B;;;;;;OAMG;IACH,OAAO,EAAE,CACP,IAAI,EAAE,MAAM,EACZ,MAAM,EAAE,aAAa,EACrB,OAAO,CAAC,EAAE,cAAc,KACrB,aAAa,GAAG,IAAI,CAAC;IAC1B;;;;;;OAMG;IACH,iBAAiB,EAAE,CACjB,MAAM,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,KAC9B,cAAc,GAAG,IAAI,CAAC;IAC3B,4CAA4C;IAC5C,WAAW,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,KAAK,OAAO,CAAC;CAC7D,CAAC;AAKF;;;;;;;GAOG;AACH,wBAAgB,kBAAkB,IAAI,eAAe,CAuHpD"}

package/dist/components/Workflow/useWorkflowActions.js

@@ -0,0 +1,105 @@
+"use client";
+'use strict';
+
+var React = require('react');
+var react = require('@xyflow/react');
+var createNode = require('./createNode.js');
+var placement = require('./placement.js');
+var WorkflowContext = require('./WorkflowContext/WorkflowContext.js');
+
+/** Pan duration when `addNode` brings the new node into view. */
+const PAN_MS = 300;
+/**
+ * Imperative editor actions for content rendered inside `<Workflow>` (its
+ * `children` and render slots sit inside the canvas's React Flow provider).
+ * Hosts use this instead of re-implementing node creation and placement — the
+ * tap-to-add palette on touch devices being the first caller.
+ *
+ * Must be called from a component rendered inside `<Workflow>`.
+ */
+function useWorkflowActions() {
+    const { graph, dispatch, getNodeType, translate, hostBridge, readOnly, editor: { drawerTarget }, setSelectedNodeId, setSelectedEdgeId, setDrawerTarget, } = WorkflowContext.useWorkflow();
+    const { getNode, getViewport, setCenter } = react.useReactFlow();
+    const store = react.useStoreApi();
+    const getAddAfterSource = React.useCallback((nodeId) => {
+        const exit = placement.findFreeExit(graph, getNodeType, nodeId);
+        if (!exit)
+            return null;
+        const def = getNodeType(exit.node.kind);
+        const label = def?.getInstanceTitle?.(exit.node.config) || def?.label || exit.node.id;
+        return { nodeId: exit.node.id, sourceHandle: exit.sourceHandle, label };
+    }, [graph, getNodeType]);
+    const canAddAfter = React.useCallback((nodeId) => getAddAfterSource(nodeId) !== null, [getAddAfterSource]);
+    const addNode = React.useCallback((kind, target, { inspector = 'follow' } = {}) => {
+        if (readOnly)
+            return null;
+        const def = getNodeType(kind);
+        if (!def)
+            return null;
+        const draft = createNode.createNodeFromType(def, {
+            position: { x: 0, y: 0 },
+            nodes: graph.nodes,
+            translate: createNode.toDefaultsTranslate(translate),
+            hostBridge,
+        });
+        // `nextNodeId` returns a fixed id for singletons (`start`); a second one
+        // would be dropped by the reducer's dedupe, so report it instead.
+        if (graph.nodes.some((n) => n.id === draft.id))
+            return null;
+        // Centre of the visible pane, in flow coordinates.
+        const { width, height } = store.getState();
+        const viewport = getViewport();
+        const viewportCenter = {
+            x: (width / 2 - viewport.x) / viewport.zoom,
+            y: (height / 2 - viewport.y) / viewport.zoom,
+        };
+        const { position, edge } = placement.planNodePlacement({
+            graph,
+            getNodeType,
+            node: draft,
+            target,
+            viewportCenter,
+            edgeId: createNode.genId('e'),
+            getNodeSize: (id) => {
+                const { width: w, height: h } = getNode(id)?.measured ?? {};
+                return w && h ? { width: w, height: h } : undefined;
+            },
+        });
+        const node = { ...draft, position };
+        dispatch({
+            type: 'addNodeWithEdge',
+            node,
+            autoConnectFrom: edge ? { edge } : null,
+        });
+        // Select the new node so a follow-up `{ after: selected }` chains on.
+        setSelectedNodeId(node.id);
+        setSelectedEdgeId(null);
+        if (inspector === 'open' || (inspector === 'follow' && drawerTarget)) {
+            setDrawerTarget({ type: 'node', id: node.id });
+        }
+        else if (inspector === 'close') {
+            setDrawerTarget(null);
+        }
+        void setCenter(position.x + placement.FALLBACK_NODE_SIZE.width / 2, position.y + placement.FALLBACK_NODE_SIZE.height / 2, { zoom: viewport.zoom, duration: PAN_MS });
+        return { nodeId: node.id, edgeId: edge?.id ?? null };
+    }, [
+        readOnly,
+        getNodeType,
+        graph,
+        translate,
+        hostBridge,
+        store,
+        getViewport,
+        getNode,
+        dispatch,
+        setSelectedNodeId,
+        setSelectedEdgeId,
+        drawerTarget,
+        setDrawerTarget,
+        setCenter,
+    ]);
+    return React.useMemo(() => ({ addNode, getAddAfterSource, canAddAfter }), [addNode, getAddAfterSource, canAddAfter]);
+}
+
+exports.useWorkflowActions = useWorkflowActions;
+//# sourceMappingURL=useWorkflowActions.js.map

package/dist/components/Workflow/useWorkflowActions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useWorkflowActions.js","sources":["../../../src/components/Workflow/useWorkflowActions.ts"],"sourcesContent":[null],"names":["useWorkflow","useReactFlow","useStoreApi","useCallback","findFreeExit","createNodeFromType","toDefaultsTranslate","planNodePlacement","genId","FALLBACK_NODE_SIZE","useMemo"],"mappings":"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"}

package/dist/components/Workflow/useWorkflowActions.mjs

@@ -0,0 +1,103 @@
+"use client";
+import { useCallback, useMemo } from 'react';
+import { useReactFlow, useStoreApi } from '@xyflow/react';
+import { createNodeFromType, genId, toDefaultsTranslate } from './createNode.mjs';
+import { findFreeExit, planNodePlacement, FALLBACK_NODE_SIZE } from './placement.mjs';
+import { useWorkflow } from './WorkflowContext/WorkflowContext.mjs';
+
+/** Pan duration when `addNode` brings the new node into view. */
+const PAN_MS = 300;
+/**
+ * Imperative editor actions for content rendered inside `<Workflow>` (its
+ * `children` and render slots sit inside the canvas's React Flow provider).
+ * Hosts use this instead of re-implementing node creation and placement — the
+ * tap-to-add palette on touch devices being the first caller.
+ *
+ * Must be called from a component rendered inside `<Workflow>`.
+ */
+function useWorkflowActions() {
+    const { graph, dispatch, getNodeType, translate, hostBridge, readOnly, editor: { drawerTarget }, setSelectedNodeId, setSelectedEdgeId, setDrawerTarget, } = useWorkflow();
+    const { getNode, getViewport, setCenter } = useReactFlow();
+    const store = useStoreApi();
+    const getAddAfterSource = useCallback((nodeId) => {
+        const exit = findFreeExit(graph, getNodeType, nodeId);
+        if (!exit)
+            return null;
+        const def = getNodeType(exit.node.kind);
+        const label = def?.getInstanceTitle?.(exit.node.config) || def?.label || exit.node.id;
+        return { nodeId: exit.node.id, sourceHandle: exit.sourceHandle, label };
+    }, [graph, getNodeType]);
+    const canAddAfter = useCallback((nodeId) => getAddAfterSource(nodeId) !== null, [getAddAfterSource]);
+    const addNode = useCallback((kind, target, { inspector = 'follow' } = {}) => {
+        if (readOnly)
+            return null;
+        const def = getNodeType(kind);
+        if (!def)
+            return null;
+        const draft = createNodeFromType(def, {
+            position: { x: 0, y: 0 },
+            nodes: graph.nodes,
+            translate: toDefaultsTranslate(translate),
+            hostBridge,
+        });
+        // `nextNodeId` returns a fixed id for singletons (`start`); a second one
+        // would be dropped by the reducer's dedupe, so report it instead.
+        if (graph.nodes.some((n) => n.id === draft.id))
+            return null;
+        // Centre of the visible pane, in flow coordinates.
+        const { width, height } = store.getState();
+        const viewport = getViewport();
+        const viewportCenter = {
+            x: (width / 2 - viewport.x) / viewport.zoom,
+            y: (height / 2 - viewport.y) / viewport.zoom,
+        };
+        const { position, edge } = planNodePlacement({
+            graph,
+            getNodeType,
+            node: draft,
+            target,
+            viewportCenter,
+            edgeId: genId('e'),
+            getNodeSize: (id) => {
+                const { width: w, height: h } = getNode(id)?.measured ?? {};
+                return w && h ? { width: w, height: h } : undefined;
+            },
+        });
+        const node = { ...draft, position };
+        dispatch({
+            type: 'addNodeWithEdge',
+            node,
+            autoConnectFrom: edge ? { edge } : null,
+        });
+        // Select the new node so a follow-up `{ after: selected }` chains on.
+        setSelectedNodeId(node.id);
+        setSelectedEdgeId(null);
+        if (inspector === 'open' || (inspector === 'follow' && drawerTarget)) {
+            setDrawerTarget({ type: 'node', id: node.id });
+        }
+        else if (inspector === 'close') {
+            setDrawerTarget(null);
+        }
+        void setCenter(position.x + FALLBACK_NODE_SIZE.width / 2, position.y + FALLBACK_NODE_SIZE.height / 2, { zoom: viewport.zoom, duration: PAN_MS });
+        return { nodeId: node.id, edgeId: edge?.id ?? null };
+    }, [
+        readOnly,
+        getNodeType,
+        graph,
+        translate,
+        hostBridge,
+        store,
+        getViewport,
+        getNode,
+        dispatch,
+        setSelectedNodeId,
+        setSelectedEdgeId,
+        drawerTarget,
+        setDrawerTarget,
+        setCenter,
+    ]);
+    return useMemo(() => ({ addNode, getAddAfterSource, canAddAfter }), [addNode, getAddAfterSource, canAddAfter]);
+}
+
+export { useWorkflowActions };
+//# sourceMappingURL=useWorkflowActions.mjs.map

package/dist/components/Workflow/useWorkflowActions.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useWorkflowActions.mjs","sources":["../../../src/components/Workflow/useWorkflowActions.ts"],"sourcesContent":[null],"names":[],"mappings":"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"}

package/dist/index.js

@@ -173,6 +173,7 @@ var NodeShell_styles = require('./components/Workflow/canvas/NodeShell/NodeShell
 var workflowLabelProps = require('./components/Workflow/canvas/workflowLabelProps.js');
 var graphObserver = require('./components/Workflow/graphObserver.js');
 var graphReducer = require('./components/Workflow/graphReducer.js');
+var useWorkflowActions = require('./components/Workflow/useWorkflowActions.js');
 var Workflow = require('./components/Workflow/Workflow.js');
 var Workflow_types = require('./components/Workflow/Workflow.types.js');
 var WorkflowContext = require('./components/Workflow/WorkflowContext/WorkflowContext.js');
@@ -424,6 +425,7 @@ exports.WorkflowGraphObserverContext = graphObserver.WorkflowGraphObserverContex
 exports.useWorkflowGraphObserver = graphObserver.useWorkflowGraphObserver;
 exports.emptyGraph = graphReducer.emptyGraph;
 exports.graphReducer = graphReducer.graphReducer;
+exports.useWorkflowActions = useWorkflowActions.useWorkflowActions;
 exports.Workflow = Workflow.Workflow;
 exports.defineNodeType = Workflow_types.defineNodeType;
 exports.resolveDefaultConfig = Workflow_types.resolveDefaultConfig;

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/index.mjs

@@ -171,6 +171,7 @@ export { CARD_WIDTH, MAX_META_CHIPS, PORT_STYLE, metaChipStyles } from './compon
 export { workflowLabelProps } from './components/Workflow/canvas/workflowLabelProps.mjs';
 export { WorkflowGraphObserverContext, useWorkflowGraphObserver } from './components/Workflow/graphObserver.mjs';
 export { emptyGraph, graphReducer } from './components/Workflow/graphReducer.mjs';
+export { useWorkflowActions } from './components/Workflow/useWorkflowActions.mjs';
 export { Workflow } from './components/Workflow/Workflow.mjs';
 export { defineNodeType, resolveDefaultConfig } from './components/Workflow/Workflow.types.mjs';
 export { WorkflowProvider, useWorkflow, useWorkflowTranslate } from './components/Workflow/WorkflowContext/WorkflowContext.mjs';

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mindlogic-ai/logician-ui",
-  "version": "4.0.0-alpha.36",
+  "version": "4.0.0-alpha.37",
   "description": "A comprehensive React design system built on Chakra UI",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

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/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/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 },
+    });
+  });
+});