Two issues caused nodes to grow taller each time they scrolled back
into view with onlyRenderVisibleElements:
1. InlineParameterPanel initialized contentHeight to 0 and animated
from maxHeight:0 to the measured height on every remount. This CSS
transition caused the ResizeObserver in BaseNode to see the panel
growing and add its height to the node — even though the node
already included it. Fix: when mounted with expanded=true, render
with maxHeight:"none" (no transition) so the panel appears at full
size instantly.
2. The ResizeObserver skip in BaseNode only caught a single observation.
The panel settling could fire multiple times during the CSS
transition. Fix: use a time-based suppression (300ms) that syncs the
tracked height ref without modifying node dimensions for all
observations during the settle window.
https://claude.ai/code/session_01MvD1n4QeXutgwUpKJuDGHa
The previous fix skipped the expand animation on initial mount but
missed the ResizeObserver path. On remount, trackedSettingsHeightRef
resets to 0, and the ResizeObserver sees the full panel height as a
delta, adding it to the node height that already includes the panel.
Add skipFirstObserveRef: when a node mounts with settings already
expanded, the first ResizeObserver callback syncs the tracked height
without calling setNodes, preventing the cumulative height growth.
https://claude.ai/code/session_01MvD1n4QeXutgwUpKJuDGHa
When a node with inline parameters scrolls off-screen, React Flow
unmounts it, resetting trackedSettingsHeightRef to 0. On remount the
expand effect would add the panel height to the node again, even though
it was already included. Skip the expand animation on initial mount and
just sync the tracked ref from the DOM instead.
https://claude.ai/code/session_01MvD1n4QeXutgwUpKJuDGHa
backdrop-filter: blur() causes significant frame rate drops on Windows
due to DWM compositor contention and Chrome's GPU layer management.
Replaced with higher-opacity semi-transparent backgrounds that maintain
visual contrast without the GPU-intensive blur compositing.
https://claude.ai/code/session_01MvD1n4QeXutgwUpKJuDGHa
The PromptNode text-sync effect can overwrite the per-item text set by
addNode before edge arrayItemIndex data is fully settled. Add a deferred
fix-up pass (setTimeout 0) that re-applies the correct text after React
effects have run.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Add pt-1 to content area so fields don't hug the top edge, and
max-w-[75%] to the Split/By field rows so they don't extend behind
the auto-route button icon.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Replace old input/select styling with bg-[#1a1a1a] rounded-md pattern,
switch grid layouts to flex, add rotating chevron for Advanced toggle,
tighten parsed items container and auto-resize formula, and update
default dimensions from 360x360 to 340x260 for a more compact node.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Wire up a lightweight callback registry so the floating header can trigger
each generate node's model browse dialog. Moves Browse into the controls
section for consistent vertical alignment and caps title width at 60% to
truncate earlier on narrow nodes.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
The easeCurve settings handle propagated bezierHandles and easingPreset
but omitted outputDuration, so children always used their local duration
instead of the parent's.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Replace broken `.react-flow__pane.dragging` DOM query guard with a shared
`isPanningRef` set by ReactFlow's onMoveStart/onMoveEnd callbacks. Clear
hoveredNodeId when panning starts. Use a derived boolean selector in
useVideoAutoplay so hovering node A doesn't re-render video nodes B–E.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Improve settings panel expand/collapse with animation-aware resize
suppression. Refactor Gemini controls to responsive grid layout with
column-first reordering. Add max-width to LLM controls. Move prompt
variable button to a bottom bar with backdrop blur. Use object-contain
for SplitGrid source image.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Manages video play/pause based on hover and selection state
- 300ms hover delay before playing, immediate play on selection
- Pauses on mouse leave or deselection (resumes from position)
- Catches AbortError from interrupted play() promises
Add fullBleed prop so calculateAspectFitSize() uses chromeHeight=0
instead of incorrectly subtracting 100px for non-existent node chrome.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- ControlPanel: only send the active provider's API key header instead of all three
- LLMControls: use nullish coalescing (??) for temperature so 0 is not treated as falsy
- PromptConstructorNode: single-pass regex for @variable resolution to prevent prefix collisions (@foo matching inside @foobar)
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Animate InlineParameterPanel expand/collapse with max-height transition
instead of conditional rendering. Lock BaseNode content height during
resize operations to prevent intermediate layout states causing image
flicker.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Replace warning banner with inline highlights: blue for resolved @vars, red for unresolved
- Add "N vars missing" notice in footer bar
- Change PromptNode empty variable label from "@var" to "Add variable"
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Add presetsPopupRef to EaseCurve click-outside handler so clicking
preset buttons no longer dismisses the popup
- ProjectSetupModal overlay only closes when clicking the overlay itself
(e.target === e.currentTarget), preventing portal child clicks from
triggering close
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Add video, audio, text, 3d, easeCurve entries to EDGE_COLORS in SharedEdgeGradients
- Normalize handle type suffixes (e.g. image-0 -> image) in EditableEdge color lookup
- Gate Kie provider filter behind API key check (return 400 if missing)
- Fix getMediaDimensions to check URL pathname for image extensions before defaulting to video
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Adds a Run button matching the pattern used by other node control
panels, allowing users to execute the conditional switch node
directly from its settings panel.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
The easing presets popup could only be closed by clicking the
toggle button again. Now it also closes on Escape key or clicking
outside the popup area.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
fal was unconditionally listed as available, which could surface
fal models to users without a fal API key configured.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Guard against undefined childNodeIds with optional chaining to
prevent a runtime crash when the array hasn't been initialized yet.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
The `selected` variable inside the Zustand selector shadowed the
`selected` prop from React Flow's EdgeProps, which could cause
confusion during maintenance.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
The useEffect registered an event listener whose handler body was
empty (only a comment stub), so it added overhead with no behavior.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
`||` treats temperature=0 as falsy and falls back to 0.7, which
incorrectly clamps a valid zero temperature. `??` only falls back
when the value is null/undefined.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
The `|| true` was forcing external providers to always appear
available, bypassing the actual API key check.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Replace broad state.nodes subscriptions in EditableEdge and ReferenceEdge
with narrow Zustand selectors that return primitives, eliminating ~50
unnecessary edge re-renders per node interaction. Share gradient defs
across all edges via SharedEdgeGradients (10 gradients vs 50+ per-edge
defs). Replace SVG blur(6px) filter with layered semi-transparent strokes
for loading glow, avoiding expensive filter evaluation on Windows.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
On 144Hz+ displays, requestAnimationFrame fires ~144 times/sec. This
adds a throttledRAF utility that limits callback execution to ~60fps
regardless of display refresh rate, normalizing performance across
60Hz, 120Hz, and 144Hz monitors.
Applied to:
- workflowStore hover debounce (event-driven throttle)
- FloatingNodeHeader position tracking (continuous loop throttle)
- ModelParameters ResizeObserver (event-driven throttle)
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
WorkflowCanvas, Header, and FloatingActionBar all used
useWorkflowStore() without selectors, subscribing to the entire store.
Every hoveredNodeId change triggered re-renders in all three components
plus a full cascade through edges and nodes from WorkflowCanvas.
- WorkflowCanvas: split into individual selectors for clipboard state
- Header: wrap in useShallow with explicit field selection
- FloatingActionBar: wrap in useShallow with explicit field selection
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
The displaySchema useMemo was placed after conditional early returns,
violating React's Rules of Hooks and causing hook order mismatch errors
when the component toggled between rendering null and its content.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Rapid mouse movement across the canvas fires multiple mouseout events
per frame, each triggering ~150 Zustand selector evaluations. This
coalesces hover updates into one per animation frame and skips them
entirely during canvas panning/dragging.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Wrap InlineParameterPanel in React.memo
- Simplify handleToggleParams in all 5 generate nodes
- Use local isParamsExpanded instead of re-querying store
- Eliminates O(n) nodes.find() on every toggle click
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Claude