fix(layout): keep DOM measurements out of saved node sizes (#14758)

Keep the size a user requested separate from the size the browser
rendered. DOM measurements now stay local instead of being saved or
synced, so a resized node keeps its width after collapse, save, and
reload.

- Save the requested node position and size. Use measured content size
only when rendering the current view.
- Send resize position and size through the node's layout attachment as
one update.
- Bind Vue node dimensions to layout state instead of copying them into
CSS from several call sites.
- Replace the minimap data-source hierarchy and factory with one
graph-backed data source that reads rendered geometry.
- Cover resize persistence, collapsed reloads, subgraph layout updates,
and touch panning in browser tests.

- Browser fonts, locale, and custom node content must not change saved
workflow geometry.
- Collapsing a node must not overwrite its expanded size.
- Rendering, slots, selection bounds, and the minimap should agree on
the node's rendered dimensions.

---------

Co-authored-by: Amp <amp@ampcode.com>
Co-authored-by: github-actions <github-actions@github.com>

Author: 3 people

browser_tests/tests/vueNodes/interactions/node/resize.spec.ts

@@ -73,6 +73,53 @@ test.describe(
       }
     })
 
+    test('should keep a resized width across a save and reload', async ({
+      comfyPage
+    }) => {
+      test.slow()
+
+      const measureWidth = async (title: string) => {
+        const node = await comfyPage.vueNodes.getFixtureByTitle(title)
+        await expect(node.root).toBeVisible()
+        const box = await node.boundingBox()
+        expect(box, `Measure node "${title}"`).not.toBeNull()
+        return box?.width ?? 0
+      }
+
+      const { beforeResize, referenceWidth, resizedWidth } =
+        await test.step('Resize the node', async () => {
+          const initialWidth = await measureWidth('KSampler')
+          const referenceWidth = await measureWidth('Save Image')
+          const vueNode = await comfyPage.vueNodes.getFixtureByTitle('KSampler')
+          const beforeResize = Date.now()
+
+          await vueNode.resizeFromCorner('SE', 120, 0)
+          await comfyPage.nextFrame()
+
+          const resizedWidth = await measureWidth('KSampler')
+          expect(resizedWidth).toBeGreaterThan(initialWidth + 100)
+          return { beforeResize, referenceWidth, resizedWidth }
+        })
+
+      await test.step('Save and reload the workflow', async () => {
+        await comfyPage.workflow.waitForDraftIndexUpdatedSince(beforeResize)
+        await comfyPage.workflow.reloadAndWaitForApp()
+      })
+
+      await test.step('Restore the width without changing viewport scale', async () => {
+        await expect
+          .poll(async () => measureWidth('Save Image'))
+          .toBeCloseTo(referenceWidth, 0)
+
+        await expect
+          .poll(async () => measureWidth('KSampler'))
+          .toBeGreaterThan(resizedWidth - 5)
+        await expect
+          .poll(async () => measureWidth('KSampler'))
+          .toBeLessThan(resizedWidth + 5)
+      })
+    })
+
     test.describe('minimum size enforcement', () => {
       test('SW resize clamps width, keeping right edge fixed', async ({
         comfyPage

browser_tests/tests/vueNodes/layout/subgraphLayoutSync.spec.ts

@@ -25,23 +25,30 @@ async function expectGrowthRenders(
   nodeId: string,
   label: string
 ) {
-  const before = await renderedBounds(comfyPage, nodeId)
-  expect(before[0], `${label}: node has a rendered width`).toBeGreaterThan(0)
-  expect(before[1], `${label}: node has a rendered height`).toBeGreaterThan(0)
+  await test.step(`Render a graph mutation ${label}`, async () => {
+    const before = await renderedBounds(comfyPage, nodeId)
+    expect(before[0], `${label}: node has a rendered width`).toBeGreaterThan(0)
+    expect(before[1], `${label}: node has a rendered height`).toBeGreaterThan(0)
 
-  await comfyPage.page.evaluate(
-    ({ id, growWidth, growHeight }) => {
-      const node = window.app?.canvas.graph?.getNodeById(id)
-      if (!node) throw new Error(`Node ${id} not found`)
+    const mutated = await comfyPage.page.evaluate(
+      ({ id, growWidth, growHeight }) => {
+        const node = window.app?.canvas.graph?.getNodeById(id)
+        if (!node) return false
 
-      node.setSize([node.size[0] + growWidth, node.size[1] + growHeight])
-    },
-    { id: toNodeId(nodeId), growWidth: GROWTH[0], growHeight: GROWTH[1] }
-  )
+        node.setSize([
+          node.renderingSize[0] + growWidth,
+          node.renderingSize[1] + growHeight
+        ])
+        return true
+      },
+      { id: toNodeId(nodeId), growWidth: GROWTH[0], growHeight: GROWTH[1] }
+    )
+    expect(mutated, `${label}: graph node exists`).toBe(true)
 
-  await expect
-    .poll(async () => renderedBounds(comfyPage, nodeId), { message: label })
-    .toEqual([before[0] + GROWTH[0], before[1] + GROWTH[1]])
+    await expect
+      .poll(async () => renderedBounds(comfyPage, nodeId), { message: label })
+      .toEqual([before[0] + GROWTH[0], before[1] + GROWTH[1]])
+  })
 }
 
 test(

browser_tests/tests/vueNodes/nodeStates/bypass.spec.ts-snapshots/vue-node-bypassed-state-chromium-linux.png

@@ -58,6 +58,53 @@ test.describe('Vue Node Collapse', { tag: '@vue-nodes' }, () => {
     await expect(vueNode.collapseIcon).not.toHaveClass(/-rotate-90/)
   })
 
+  test('should keep a resized width across a collapsed save and reload', async ({
+    comfyPage
+  }) => {
+    test.setTimeout(30000)
+
+    const { beforeCollapse, resizedWidth } =
+      await test.step('Resize and collapse the node', async () => {
+        const vueNode = await comfyPage.vueNodes.getFixtureByTitle('KSampler')
+        await expect(vueNode.root).toBeVisible()
+
+        await vueNode.resizeFromCorner('SE', 120, 0)
+        await comfyPage.nextFrame()
+        const resized = await vueNode.boundingBox()
+        expect(resized, 'Measure resized node').not.toBeNull()
+        const resizedWidth = resized?.width ?? 0
+
+        const beforeCollapse = Date.now()
+        await vueNode.select()
+        await comfyPage.keyboard.press('Alt+KeyC')
+        await expect
+          .poll(async () => (await vueNode.boundingBox())?.width)
+          .toBeLessThan(resizedWidth)
+
+        return { beforeCollapse, resizedWidth }
+      })
+
+    await test.step('Save and reload the collapsed node', async () => {
+      await comfyPage.workflow.waitForDraftIndexUpdatedSince(beforeCollapse)
+      await comfyPage.workflow.reloadAndWaitForApp()
+    })
+
+    await test.step('Expand to the saved width', async () => {
+      const reloaded = await comfyPage.vueNodes.getFixtureByTitle('KSampler')
+      await expect(reloaded.root).toBeVisible()
+      await reloaded.select()
+      await comfyPage.keyboard.press('Alt+KeyC')
+      await comfyPage.nextFrame()
+
+      await expect
+        .poll(async () => (await reloaded.boundingBox())?.width)
+        .toBeGreaterThan(resizedWidth - 5)
+      await expect
+        .poll(async () => (await reloaded.boundingBox())?.width)
+        .toBeLessThan(resizedWidth + 5)
+    })
+  })
+
   test('should preserve title when collapsing/expanding', async ({
     comfyPage
   }) => {

browser_tests/tests/vueNodes/nodeStates/collapse.spec.ts

@@ -161,6 +161,56 @@ entry. All three entity types key by `makeScopedLayoutKey(rootGraphId, id)`, so
 a root graph's teardown is one `clearGraph`; graphs sharing that bucket drop
 their entries individually through `detachGraphLayouts`.
 
+### Amendment (2026-08-04): the replicated document holds intent, not measurement
+
+`NodeLayout.size` conflates two values with different natures. **Requested**
+size is what a user, a workflow file, or `computeSize()` asked for. **Rendered**
+size is what the DOM produced, which for height is `max(requested, natural
+content)` because the node container is `min-h-(--node-height)`. A shared
+`ResizeObserver` in `useVueNodeResizeTracking.ts` measures the second and writes
+it into the first through `batchUpdateNodeBounds`.
+
+A measurement is not a command. Replayed on a peer with different fonts, locale,
+browser, or installed custom-node versions it produces a different — and equally
+correct — answer, so it is neither deterministic nor meaningfully undoable. This
+is the contract in ADR 0008 that every mutation is supposed to satisfy, and the
+observer's write is the one place in the layout system that structurally cannot.
+
+Three consequences follow, and they are the reason to act rather than to
+document and move on:
+
+- `serialize()` reads `this.size`, which reads through to the store. Saved
+  workflows therefore carry a DOM measurement and are not byte-portable across
+  machines. Saving while a node is collapsed persists the header box as the
+  node's size; on reload `min-h` heals the height and nothing heals the width.
+- Under `min-h` semantics with last-writer-wins, a replicated height converges
+  to the largest natural height across every connected peer's rendering
+  environment. Node geometry becomes a function of who has the document open.
+- Collapse is not stored. It is inferred from a box shrinking to its header,
+  which is why the store holds rendered rather than requested geometry at all.
+  In Vue mode the collapsed width this produces is read by nothing:
+  `_collapsed_width` is assigned only in the branch `vueNodesMode` skips
+  (`LGraphNode.ts`), so every reader falls through to `NODE_COLLAPSED_WIDTH`.
+
+**Decision.** The Yjs document holds requested geometry, written only by named
+commands. Measured geometry belongs to the local, view-scoped tier that
+`slotLayouts` already occupies — a plain map, not replicated, dropped by
+`clearViewGeometry`. Slot geometry is measured from the DOM at higher frequency
+than node height and has never been considered a violation, because it lands in
+a tier that nothing replicates and nothing writes back into the DOM. Recording a
+measurement stays an explicit, named mutation rather than an ambient observer
+write. `LGraphNode.size` exposes requested size; `renderingSize`, `measure()`,
+and `boundingRect` expose rendered geometry. Collapse becomes stored data.
+
+**This does not forbid measurement.** Content-driven height is real: widget
+hydration, media loading, badges, slot changes, and third-party DOM inserted by
+reference through `WidgetDOM.vue`. Making layout strictly one-directional would
+mean modelling in TypeScript what CSS already computes, enforced as a height
+contract across 40+ repositories we do not control, and paid for in clipped
+content in someone else's node. The defect was never that a measurement exists.
+It was that a view-derived value was promoted into replicated entity state by a
+mutation with no name.
+
 ## Notes
 
 This centralized state + CRDT architecture follows patterns from modern collaborative applications:

browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-color-blue-chromium-linux.png

@@ -4,12 +4,8 @@ import type { Ref } from 'vue'
 
 import { useSelectedLiteGraphItems } from '@/composables/canvas/useSelectedLiteGraphItems'
 import { useVueFeatureFlags } from '@/composables/useVueFeatureFlags'
-import type { ReadOnlyRect } from '@/lib/litegraph/src/interfaces'
-import {
-  LGraphGroup,
-  LGraphNode,
-  LiteGraph
-} from '@/lib/litegraph/src/litegraph'
+import type { ReadOnlyRect, Rect } from '@/lib/litegraph/src/interfaces'
+import { LGraphGroup, LGraphNode } from '@/lib/litegraph/src/litegraph'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { layoutStore } from '@/renderer/core/layout/store/layoutStore'
 import { isLGraphGroup, isLGraphNode } from '@/utils/litegraphUtil'
@@ -48,43 +44,12 @@ function currentSelectionMatchesSignature(
   return buildSelectionSignature(store) === moreOptionsSelectionSignature
 }
 
-function getFullNodeBounds(item: LGraphNode | LGraphGroup): ReadOnlyRect {
-  if (item instanceof LGraphGroup) {
-    return [item.pos[0], item.pos[1], item.size[0], item.size[1]]
-  }
-
-  return [
-    item.pos[0],
-    item.pos[1] - LiteGraph.NODE_TITLE_HEIGHT,
-    item.size[0],
-    item.size[1] + LiteGraph.NODE_TITLE_HEIGHT
-  ]
-}
-
-function getVueNodeBounds(item: LGraphNode): ReadOnlyRect | null {
-  const rootGraphId = item.graph?.rootGraph.id
-  if (!rootGraphId) return null
-
-  const layout = layoutStore.getNodeLayoutRef(rootGraphId, item.id).value
-  if (!layout) return null
-
-  return [
-    layout.bounds.x,
-    layout.bounds.y - LiteGraph.NODE_TITLE_HEIGHT,
-    layout.bounds.width,
-    layout.bounds.height + LiteGraph.NODE_TITLE_HEIGHT
-  ]
-}
-
-function getSelectionBounds(
-  item: LGraphNode | LGraphGroup,
-  shouldUseVueLayout: boolean
-): ReadOnlyRect {
-  if (shouldUseVueLayout && item instanceof LGraphNode) {
-    return getVueNodeBounds(item) ?? getFullNodeBounds(item)
-  }
+function getSelectionBounds(item: LGraphNode | LGraphGroup): ReadOnlyRect {
+  if (item instanceof LGraphGroup) return item.boundingRect
 
-  return getFullNodeBounds(item)
+  const bounds: Rect = [0, 0, 0, 0]
+  item.measure(bounds)
+  return bounds
 }
 
 export function useSelectionToolboxPosition(
@@ -139,7 +104,7 @@ export function useSelectionToolboxPosition(
       if (item.id == null) continue
 
       if (item instanceof LGraphNode || item instanceof LGraphGroup) {
-        allBounds.push(getSelectionBounds(item, shouldRenderVueNodes.value))
+        allBounds.push(getSelectionBounds(item))
       }
     }