- Import useInlineParameters hook in ControlPanel and ProjectSetupModal
- Define GENERATION_NODE_TYPES constant for conditional hiding logic
- Hide ControlPanel for generation nodes when inline parameters enabled
- ControlPanel still shows for easeCurve and conditionalSwitch regardless of setting
- Add inline parameters toggle to ProjectSetupModal Project tab
- Toggle labeled 'Inline Parameters' with descriptive help text
- Setting persists to localStorage and applies immediately
- Add parametersExpanded field to 5 generation node data types (NanoBanana, GenerateVideo, Generate3D, GenerateAudio, LLMGenerate)
- Create useInlineParameters hook for localStorage-backed global setting (default: false)
- Create InlineParameterPanel component with collapsible UI and chevron toggle
- All TypeScript compiles without new errors
- Remove duplicate idle-state tests in GenerateImageNode and GenerateVideoNode
- Fix misleading "Text target labels" comment to "Text source labels"
- Use object-contain on AnnotationNode so full image is visible for annotation
- Add abort signal checks to Router/Switch/ConditionalSwitch executors
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Add nodeClickDistance={5} to match nodeDragThreshold, eliminating the
0-5px dead zone where d3-drag suppressed clicks but drags hadn't started.
Stop header pointerdown propagation to prevent pane deselection race.
Fix header drag threshold to use screen pixels for zoom-independent behavior.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
React Flow prioritizes node.width over node.style.width for rendering.
NodeResizer writes to node.width but the aspect-fit handler was reading
from node.style and only writing back to node.style — so resized
dimensions were silently overridden. Extract getNodeDimension() and
applyNodeDimensions() helpers to read/write both sources consistently.
Also removes an unused Zustand store subscription that caused unnecessary
re-renders.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
The previous implementation called getNodes() in handlePointerUp which
could return stale pre-drag positions in React Flow's controlled mode,
causing nodes to remain in groups after being dragged out. Also only
checked the header node, not all selected nodes moved together.
Now calculates final positions from drag delta (startPos + clientDelta/zoom)
and iterates all entries in startPositions to check group membership for
every moved node.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
The aspect-fit double-click feature broke after manual resize because imperative
DOM listeners (useEffect + addEventListener) fall out of sync when React Flow
re-renders resize controls. Switches to a React onDoubleClick handler on a
`display: contents` wrapper, which stays in sync across all re-renders.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Attach dblclick listener to stable .react-flow__node wrapper instead of
individual .react-flow__resize-control elements. React Flow recreates
resize controls on re-render after manual resize, leaving old listeners
on stale DOM nodes. Event delegation ensures the handler survives across
re-renders.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
When a node has media (image/video) and resize handles are visible,
double-clicking any resize handle resizes the node to match the media's
aspect ratio, preferring to grow rather than shrink. Applies to all
selected nodes for multi-selection consistency.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Import defaultNodeDimensions for node sizing
- Capture wasDragging state before resetting ref
- Calculate node center using measured/default dimensions
- Check if node center is inside any group bounds
- Update groupId via setNodeGroupId if it changed
- Matches WorkflowCanvas handleNodeDragStop logic
Fixes bug where nodes dragged outside groups via floating header
were not removed from the group, causing them to still move when
the group was dragged.
Move pointer-events-auto from the header's outer container to the inner
content bar so invisible header area doesn't block events reaching nodes.
Switch custom drag handler from mouse events to pointer events for
consistency with React Flow. Fix pointer capture leak in VideoStitchNode
that could break subsequent drags.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
When a child EaseCurve node inherits settings from a parent via an
easeCurve handle connection, the ControlPanel now shows a semi-transparent
overlay indicating inheritance with a "Control manually" button to break
the connection and restore manual editing.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Wrap each button in a flex justify-end container so they sit in the
bottom-right of the settings panel.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Match the existing panel button style (bg-neutral-700, border, compact
sizing) instead of full-width blue. Add play triangle icon for Run
buttons and checkmark icon for the Apply button.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Add execution buttons at the bottom of each configurable node's settings
panel so users can trigger generation directly from where they configure
settings, instead of needing keyboard shortcuts or external run buttons.
- GenerateImage, GenerateVideo, Generate3D, GenerateAudio, LLM: "Run" button
- EaseCurve: "Apply" button
- ConditionalSwitch: no button (passive routing node)
- Buttons disable and show running state while workflow executes
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
The easingCurve prop (showing the actual easing function curve over the
bezier editor) was present in the old node-body editor but wasn't carried
over to the ControlPanel's EaseCurveControls.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Strip editor tab, tab bar, and all editor-related state/handlers from EaseCurveNode
since controls now live in the ControlPanel. Node body shows only the video preview
full-bleed. Fix ControlPanel presets popup to open leftward (right-anchored) so it
stays on-screen when panel is at the right viewport edge.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Remove nodrag/nopan from the text output area so the node can be
dragged from the body (text is read-only, not editable). Move
nodrag/nopan to the individual action buttons instead. Hide
copy/regenerate/clear buttons by default, showing them only on
hover of the text area to prevent overlapping content.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Switch to fullBleed BaseNode so the image preview fills the entire
node area. Move grid config, Settings, and Split controls into an
absolute-positioned overlay at the bottom with backdrop blur,
matching the pattern used by PromptConstructorNode and other
full-bleed nodes.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Add createPortal import from react-dom
- Wrap modal JSX in createPortal targeting document.body
- Modal now renders outside React Flow's DOM tree entirely
- Fixes z-index bleed-through from React Flow node elements
- Change fullBleed nodes from transparent to subtle bg-neutral-800/50 with border-neutral-700/40
- Makes empty GenerateImage, GenerateVideo, and LLMGenerate nodes visible on canvas
- Content still covers background when present (images/videos fill the area)
Remove provider and model dropdowns, replacing with model name +
provider display block and Browse button — same as image and video.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Always display parameters inline instead of behind a collapsible
"Parameters" header. The toggle added unnecessary interaction cost.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Remove provider and model dropdowns from the video control panel,
replacing them with the cleaner model name + provider display block
with Browse button — matching the image node's updated layout.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Add hoveredNodeId to store, set from BaseNode mouse events, read in
FloatingNodeHeader. Controls now appear when hovering any part of
the node, not just the floating header strip.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Bump ControlPanel from z-[50] to z-[90] so the layered box-shadow
paints in front of the React Flow canvas stacking context, not
behind it. Still below z-[100] used by modals and toolbars.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Apply Tobias Ahlin / Josh Comeau layered shadow technique: each
layer doubles offset and blur (1/2/4/8/16/32px) with decreasing
opacity. Each layer covers a narrow distance band so no single
layer interpolates over a large range, eliminating banding.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
CSS linear-gradient bands on large areas due to 8-bit color depth.
box-shadow is compositor-rendered and produces smooth falloff without
visible stepping artifacts.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Replace the narrow hard-edged gradient strip with a wide, smooth
multi-stop gradient that extends behind the panel for a natural
shadow falloff instead of a stepped/hard edge.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- LLMGenerateNode: Remove inline provider/model/parameter controls
- LLMGenerateNode: Convert to full-bleed layout with fullBleed prop
- LLMGenerateNode: Show only text output area in node body
- LLMGenerateNode: Keep floating action buttons (copy, regenerate, clear)
- ControlPanel: Add Max Tokens slider to LLMControls (256-16384 range)
- ControlPanel: Add shadow/gradient overlay on left edge of panel
- WorkflowCanvas: Fix type errors with node.data union types (Rule 1 bug fix)
Implement custom drag handling on FloatingNodeHeader so users can
reposition nodes by clicking and dragging the header bar. Supports
multi-selection dragging and properly ignores interactive elements
(buttons, inputs). Adds cursor-grab to indicate draggability.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Reduce vertical padding from py-2 to py-1 and offset from -36 to -26
so the title sits closer to the node top edge.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Handles were inside the content div that had overflow-clip, causing them
to be clipped. Move clipping to a wrapper around just the media content
so handles remain unclipped — same pattern as GenerateImage/VideoNode.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
The content div's `relative` positioning creates a stacking context that
paints over the handles. Adding zIndex: 10 matches the pattern used by
GenerateImageNode and GenerateVideoNode.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Use overflow-visible unconditionally on BaseNode outer wrapper so
handles are never clipped. Content clipping is already handled by each
node's content div (overflow-hidden/overflow-clip). Add rounded-lg to
OutputNode's content container for rounded corners on edge-to-edge media.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Use overflow-visible instead of overflow-clip for fullBleed nodes so
handle circles and labels extend beyond the node boundary. Add
overflow-hidden rounded-lg to image/video content containers to
preserve rounded corners on media.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Replace dashed-border selector assertions with text-based assertions
since full-bleed nodes use a background fill instead of a dashed
border for their empty state.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Video fills the entire node with no padding or chrome. Carousel
controls overlay at the bottom with backdrop blur (matching
GenerateImageNode pattern). Removed inline parameters since they
are displayed in the floating panel. Hidden ModelParameters kept
for schema-loading side effect (dynamic handles). All handles use
z-index to stay visible over content.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Textarea fills the entire node with no visible border. Available
variables display as a fixed semi-transparent footer pinned at the
bottom. Unresolved variables warning overlays at the top. Autocomplete
dropdown remains functional. Handles use z-index to stay visible.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Textarea fills the entire node with no visible border or chrome.
Variable name badge overlays at the bottom-left. Handles use
z-index to stay visible over the content surface.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Handles were painted behind the full-bleed image content since they
share the same stacking context. Adding zIndex: 10 to all handles
and their labels ensures they render on top of the image.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
The header width calculation was preferring node.style.width (set at
creation time, often stale) over node.measured.width (actual DOM size).
This caused headers to be narrower than nodes after image generation
or manual resizing. Now uses measured → style → default fallback chain,
matching the existing pattern used elsewhere in the file.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Replace gap-2 with justify-between so header controls (comment,
expand, run) stay flush-right against the node boundary on all widths.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Use node.style.width (number or string), node.measured.width, or
default dimensions — in that priority order. Headers now match the
actual node width after user resize.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- FloatingNodeHeader: Controls (comment, expand, run) now sit flush-right
against the node edge with tighter spacing.
- ControlPanel: Remove "Model" label. Model name sits directly under the
settings title, separated by a horizontal divider.
- Add new-tab link icon next to provider name that opens model details page.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- ControlPanel: Replace provider/model dropdowns with model name text +
Browse button. Fixed width, no horizontal scroll.
- GenerateImageNode: Carousel controls now overlay on image bottom with
semi-transparent dark background for legibility.
- BaseNode: Add fullBleed prop for borderless mode. Image IS the node -
no visible container, border, or padding.
- GenerateImageNode uses fullBleed mode. Empty state uses subtle fill
instead of dashed border.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
shrimbly