fix: address review follow-ups on the canvas stack

.changeset/connectable-item-tooltip.md

@@ -2,4 +2,4 @@
 '@workflowbuilder/sdk': patch
 ---
 
-Decision branch rows and AI tool rows show the full label in a tooltip when the text is truncated.
+Decision branch rows and AI tool rows expose the full label as a native tooltip (`title`), so a clipped row stays readable.

.changeset/node-rows-fill.md

@@ -0,0 +1,5 @@
+---
+'@workflowbuilder/sdk': patch
+---
+
+Decision branch rows and AI tool rows fill the section width in the horizontal layout, as the design's `Node / Row` does, instead of capping it with a derived number; branch rows are spaced with the node body gap (8px) like tool rows.

.changeset/node-text-ellipsis.md

@@ -2,4 +2,4 @@
 '@workflowbuilder/ui': patch
 ---
 
-`NodeDescription` keeps both the title and the subtitle on one line: long text is truncated with an ellipsis and exposed in full through the element's native tooltip, and the text no longer widens nodes whose body sizes to its content (for example the Decision node). Nodes keep the fixed design width and grow in height only.
+`NodeDescription` keeps both the title and the subtitle on one line: long text is truncated with an ellipsis and exposed in full through the element's native tooltip, and the text no longer widens nodes whose body sizes to its content (for example the Decision node). Nodes keep the fixed design width and grow in height only. The block relies on `contain: inline-size`, so it needs an ancestor with a definite inline size; inside an `inline-flex` or `fit-content` wrapper it renders at zero width.

.changeset/palette-node-states.md

@@ -2,4 +2,6 @@
 '@workflowbuilder/sdk': minor
 ---
 
-Palette entries render the canvas Node states instead of their own styling: hover is the Node Hover state, the drag preview is the Node Active state (outline and ring), and entries that cannot be added (read-only mode) use the Node Disabled state instead of a faded copy. The node templates (`WorkflowNodeTemplate`, `StartNodeTemplate`, `DecisionNodeTemplate`, `AiAgentNodeTemplate`) accept a `disabled` prop.
+Palette entries render the canvas Node states instead of their own styling: hover is the Node Hover state, the drag preview is the Node Active state (outline and ring), and entries that cannot be added (read-only mode) render the Node Disabled state instead of a faded copy. `WorkflowNodeTemplateProps` gains `disabled?: boolean`; the built-in templates forward it.
+
+Migration for custom node templates: forward `disabled` to `NodePanel.Root`, `NodeIcon` and `NodeDescription`, otherwise the palette entry looks draggable while the palette is locked (the wrapper no longer fades it).

.changeset/persist-without-measured.md

@@ -2,4 +2,4 @@
 '@workflowbuilder/sdk': patch
 ---
 
-Saved and exported diagrams (`getStoreDataForIntegration`, the localStorage/API/props integrations) no longer include the runtime `measured` node sizes; nodes are measured again on load, so stored data cannot carry stale dimensions.
+Saved and exported diagrams (`getStoreDataForIntegration`, the localStorage/API/props integrations) no longer include the runtime `measured` node sizes or the `dragging` flag; nodes are measured again on load, so stored data cannot carry stale dimensions.

.changeset/self-loop-offset.md

@@ -0,0 +1,5 @@
+---
+'@workflowbuilder/sdk': minor
+---
+
+The apex of a self-connecting edge sits 48px above the node's top edge regardless of the node height and of where the source port sits (design decision of 2026-09-16). `SELF_CONNECTING_EDGE_LABEL_OFFSET` is now `48` and is measured from the top edge; `getSelfLoopHeight` is exported for custom edges that draw their own loop. Before, the loop grew with the node height and reached 132px above a 64px node.

apps/ai-studio/src/data/ai-debate-flow.ts

@@ -21,7 +21,6 @@ const diagram: DiagramModel = {
           icon: 'Lightning',
         },
         selected: false,
-        dragging: false,
       },
       {
         id: 'optimist-1',
@@ -40,7 +39,6 @@ why now. Be persuasive but honest, no hype.`,
           icon: 'AiAgent',
         },
         selected: false,
-        dragging: false,
       },
       {
         id: 'skeptic-1',
@@ -59,7 +57,6 @@ hidden costs, what could go wrong. Surface the objections others gloss over.`,
           icon: 'AiAgent',
         },
         selected: false,
-        dragging: false,
       },
       {
         id: 'verdict-1',
@@ -89,7 +86,6 @@ Be decisive.`,
           icon: 'AiAgent',
         },
         selected: false,
-        dragging: false,
       },
       {
         id: 'visualize-1',
@@ -106,7 +102,6 @@ Be decisive.`,
           icon: 'Eye',
         },
         selected: false,
-        dragging: false,
       },
     ],
     edges: [

apps/ai-studio/src/data/content-repurposer-flow.ts

@@ -26,7 +26,6 @@ of the most tedious parts of their week.`,
           icon: 'Lightning',
         },
         selected: false,
-        dragging: false,
       },
       {
         id: 'twitter-1',
@@ -47,7 +46,6 @@ Number each post (1/, 2/, ...).`,
           icon: 'AiAgent',
         },
         selected: false,
-        dragging: false,
       },
       {
         id: 'linkedin-1',
@@ -69,7 +67,6 @@ Keep it under 200 words. Professional but human.`,
           icon: 'AiAgent',
         },
         selected: false,
-        dragging: false,
       },
       {
         id: 'instagram-1',
@@ -90,7 +87,6 @@ Keep it under 200 words. Professional but human.`,
           icon: 'AiAgent',
         },
         selected: false,
-        dragging: false,
       },
       {
         id: 'pack-1',
@@ -121,7 +117,6 @@ Keep each draft's wording as-is - do not rewrite it. Just organize and label.`,
           icon: 'AiAgent',
         },
         selected: false,
-        dragging: false,
       },
       {
         id: 'visualize-1',
@@ -138,7 +133,6 @@ Keep each draft's wording as-is - do not rewrite it. Just organize and label.`,
           icon: 'Eye',
         },
         selected: false,
-        dragging: false,
       },
     ],
     edges: [

apps/ai-studio/src/data/meeting-notes-flow.ts

@@ -25,7 +25,6 @@ const diagram: DiagramModel = {
           icon: 'Lightning',
         },
         selected: false,
-        dragging: false,
       },
       {
         id: 'summary-1',
@@ -43,7 +42,6 @@ was decided. Neutral, factual tone.`,
           icon: 'AiAgent',
         },
         selected: false,
-        dragging: false,
       },
       {
         id: 'actions-1',
@@ -62,7 +60,6 @@ mark it "unassigned". Do not invent items that were not discussed.`,
           icon: 'AiAgent',
         },
         selected: false,
-        dragging: false,
       },
       {
         id: 'recap-1',
@@ -91,7 +88,6 @@ line "_Meeting Bot_".`,
           icon: 'AiAgent',
         },
         selected: false,
-        dragging: false,
       },
       {
         id: 'visualize-1',
@@ -108,7 +104,6 @@ line "_Meeting Bot_".`,
           icon: 'Eye',
         },
         selected: false,
-        dragging: false,
       },
     ],
     edges: [

apps/ai-studio/src/data/research-flow.ts

@@ -20,7 +20,6 @@ const diagram: DiagramModel = {
           icon: 'Lightning',
         },
         selected: false,
-        dragging: false,
       },
       {
         id: 'research-1',
@@ -51,7 +50,6 @@ Only state things you found via search. If a claim isn't supported by a result,
           icon: 'AiAgent',
         },
         selected: false,
-        dragging: false,
       },
       {
         id: 'visualize-1',
@@ -68,7 +66,6 @@ Only state things you found via search. If a claim isn't supported by a result,
           icon: 'Eye',
         },
         selected: false,
-        dragging: false,
       },
     ],
     edges: [

apps/ai-studio/src/data/support-triage-flow.ts

@@ -34,7 +34,6 @@ Head of Ops, Brightwave`,
           icon: 'Lightning',
         },
         selected: false,
-        dragging: false,
       },
       {
         id: 'classify-1',
@@ -64,7 +63,6 @@ Use the exact lowercase keyword on the Type line - it drives downstream routing.
           icon: 'AiAgent',
         },
         selected: false,
-        dragging: false,
       },
       {
         id: 'decision-1',
@@ -114,7 +112,6 @@ Use the exact lowercase keyword on the Type line - it drives downstream routing.
           icon: 'ArrowsSplit',
         },
         selected: false,
-        dragging: false,
       },
       {
         id: 'billing-1',
@@ -138,7 +135,6 @@ You handle billing issues. Draft a reply to the customer:
           icon: 'AiAgent',
         },
         selected: false,
-        dragging: false,
       },
       {
         id: 'bug-1',
@@ -162,7 +158,6 @@ You triage product bugs. Draft a reply to the customer:
           icon: 'AiAgent',
         },
         selected: false,
-        dragging: false,
       },
       {
         id: 'general-1',
@@ -185,7 +180,6 @@ You answer how-to and general questions. Draft a friendly reply:
           icon: 'AiAgent',
         },
         selected: false,
-        dragging: false,
       },
       {
         id: 'qa-1',
@@ -211,7 +205,6 @@ If not, output "⚠️ NEEDS REVISION" followed by specific, actionable fixes.`,
           icon: 'AiAgent',
         },
         selected: false,
-        dragging: false,
       },
       {
         id: 'visualize-1',
@@ -228,7 +221,6 @@ If not, output "⚠️ NEEDS REVISION" followed by specific, actionable fixes.`,
           icon: 'Eye',
         },
         selected: false,
-        dragging: false,
       },
     ],
     edges: [

apps/demo/src/app/components/multi-port-node/multi-port-node-template.tsx

@@ -24,6 +24,7 @@ export const MultiPortNodeTemplate = defineNodeTemplate<MultiPortProperties>(
       label,
       description,
       selected = false,
+      disabled = false,
       data,
       showHandles = true,
     }: WorkflowNodeTemplateProps<MultiPortProperties>) => {
@@ -40,10 +41,10 @@ export const MultiPortNodeTemplate = defineNodeTemplate<MultiPortProperties>(
       return (
         <div className={styles['wrapper']}>
           <div className={barClassName} />
-          <NodePanel.Root selected={selected}>
+          <NodePanel.Root selected={selected} disabled={disabled}>
             <NodePanel.Header>
-              <NodeIcon icon={iconElement} />
-              <NodeDescription label={label} description={description} />
+              <NodeIcon icon={iconElement} disabled={disabled} />
+              <NodeDescription label={label} description={description} disabled={disabled} />
             </NodePanel.Header>
             <NodePanel.Handles isVisible={showHandles}>
               <Handle id={handleTargetTopId} type="target" position={Position.Top} />

apps/demo/src/app/data/templates/black-friday.ts

@@ -72,7 +72,6 @@ const diagram: DiagramModel = {
           icon: 'PlayCircle',
         },
         selected: false,
-        dragging: false,
       },
       {
         id: 'd6adcc9c-3146-46fd-9b0f-af78e94ad04d',
@@ -132,7 +131,6 @@ const diagram: DiagramModel = {
           icon: 'ListChecks',
         },
         selected: false,
-        dragging: false,
       },
       {
         id: 'da28f8fe-c3a0-44c0-8213-c7c88d62164e',
@@ -184,7 +182,6 @@ const diagram: DiagramModel = {
           icon: 'PlayCircle',
         },
         selected: false,
-        dragging: false,
       },
       {
         id: 'f1a5e5cb-58fa-4379-a45e-437553153b5f',
@@ -206,7 +203,6 @@ const diagram: DiagramModel = {
           icon: 'Timer',
         },
         selected: false,
-        dragging: false,
       },
     ],
     edges: [

apps/demo/src/app/data/templates/call-flow.ts

@@ -85,7 +85,6 @@ const diagram: DiagramModel = {
           icon: 'ListChecks',
         },
         selected: false,
-        dragging: false,
       },
       {
         id: 'b2a4b7a7-1900-4218-aea4-902de2e4eb51',
@@ -137,7 +136,6 @@ const diagram: DiagramModel = {
           icon: 'ListChecks',
         },
         selected: false,
-        dragging: false,
       },
       {
         id: 'f1d785cc-1715-4b27-97e4-59347f08e660',
@@ -189,7 +187,6 @@ const diagram: DiagramModel = {
           icon: 'ListChecks',
         },
         selected: false,
-        dragging: false,
       },
       {
         id: '18562830-da0b-443e-a859-79cb95473f59',
@@ -224,7 +221,6 @@ const diagram: DiagramModel = {
           icon: 'PlayCircle',
         },
         selected: false,
-        dragging: false,
       },
       {
         id: '6ab2c9e2-7e1e-4061-83ea-83a88aa246eb',
@@ -242,7 +238,6 @@ const diagram: DiagramModel = {
           icon: 'PlayCircle',
         },
         selected: false,
-        dragging: false,
       },
       {
         id: 'feb863db-de51-4aee-8746-f9e02d993cb7',
@@ -260,7 +255,6 @@ const diagram: DiagramModel = {
           icon: 'PlayCircle',
         },
         selected: false,
-        dragging: false,
       },
       {
         id: '456f755a-a1fe-4e18-a850-802cf28b4cf5',
@@ -295,7 +289,6 @@ const diagram: DiagramModel = {
           icon: 'PlayCircle',
         },
         selected: false,
-        dragging: false,
       },
       {
         id: '53f8322b-96ef-4775-824a-020f02cccd20',
@@ -313,7 +306,6 @@ const diagram: DiagramModel = {
           icon: 'PlayCircle',
         },
         selected: false,
-        dragging: false,
       },
     ],
     edges: [