* refactor: Reorganize Vue nodes system to domain-driven design architecture
Move Vue nodes code from scattered technical layers to domain-focused structure:
- Widget system → src/renderer/extensions/vueNodes/widgets/
- LOD optimization → src/renderer/extensions/vueNodes/lod/
- Layout logic → src/renderer/extensions/vueNodes/layout/
- Node components → src/renderer/extensions/vueNodes/components/
- Test structure mirrors source organization
Benefits:
- Clear domain boundaries instead of technical layers
- Everything Vue nodes related in renderer domain (not workbench)
- camelCase naming (vueNodes vs vue-nodes)
- Tests co-located with source domains
- All imports updated to new DDD structure
* fix: Skip spatial index performance test on CI to avoid flaky timing
Performance tests are inherently flaky on CI due to variable system
performance. This test should only run locally like the other
performance tests.
- Move layout system to renderer/core/layout/
- Store, operations, adapters, and sync modules organized clearly
- Merged layoutTypes.ts and layoutOperations.ts into single types.ts
- Move canvas rendering to renderer/core/canvas/
- LiteGraph-specific code in litegraph/ subdirectory
- PathRenderer at canvas level
- Move spatial indexing to renderer/core/spatial/
- Move Vue node composables to renderer/extensions/vue-nodes/
- Update all import paths throughout codebase
- Apply consistent naming (renderer vs rendering)
This establishes clearer separation between core rendering concerns
and optional extensions, making the architecture more maintainable.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-authored-by: Claude <noreply@anthropic.com>
* feat: Implement CRDT-based layout system for Vue nodes
Major refactor to solve snap-back issues and create single source of truth for node positions:
- Add Yjs-based CRDT layout store for conflict-free position management
- Implement layout mutations service with clean API
- Create Vue composables for layout access and node dragging
- Add one-way sync from layout store to LiteGraph
- Disable LiteGraph dragging when Vue nodes mode is enabled
- Add z-index management with bring-to-front on node interaction
- Add comprehensive TypeScript types for layout system
- Include unit tests for layout store operations
- Update documentation to reflect CRDT architecture
This provides a solid foundation for both single-user performance and future real-time collaboration features.
Co-Authored-By: Claude <noreply@anthropic.com>
* style: Apply linter fixes to layout system
* fix: Remove unnecessary README files and revert services README
- Remove unnecessary types/README.md file
- Revert unrelated changes to services/README.md
- Keep only relevant documentation for the layout system implementation
These were issues identified during PR review that needed to be addressed.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
* refactor: Clean up layout store and implement proper CRDT operations
- Created dedicated layoutOperations.ts with production-grade CRDT interfaces
- Integrated existing QuadTree spatial index instead of simple cache
- Split composables into separate files (useLayout, useNodeLayout, useLayoutSync)
- Cleaned up operation handlers using specific types instead of Extract
- Added proper operation interfaces with type guards and extensibility
- Updated all type references to use new operation structure
The layout store now properly uses the existing QuadTree infrastructure for
efficient spatial queries and follows CRDT best practices with well-defined
operation interfaces.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
* refactor: Extract services and split composables for better organization
- Created SpatialIndexManager to handle QuadTree operations separately
- Added LayoutAdapter interface for CRDT abstraction (Yjs, mock implementations)
- Split GraphNodeManager into focused composables:
- useNodeWidgets: Widget state and callback management
- useNodeChangeDetection: RAF-based geometry change detection
- useNodeState: Node visibility and reactive state management
- Extracted constants for magic numbers and configuration values
- Updated layout store to use SpatialIndexManager and constants
This improves code organization, testability, and makes it easier to swap
CRDT implementations or mock services for testing.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
* Add node slots to layout tree
* Revert "Add node slots to layout tree"
This reverts commit 460493a620.
* Remove slots from layoutTypes
* Totally not scuffed renderer and adapter
* Revert "Totally not scuffed renderer and adapter"
This reverts commit 2b9d83efb8.
* Revert "Remove slots from layoutTypes"
This reverts commit 18f78ff786.
* Reapply "Add node slots to layout tree"
This reverts commit 236fecb549.
* Revert "Add node slots to layout tree"
This reverts commit 460493a620.
* docs: Replace architecture docs with comprehensive ADR
- Add ADR-0002 for CRDT-based layout system decision
- Follow established ADR template with persuasive reasoning
- Include performance benefits, collaboration readiness, and architectural advantages
- Update ADR index
* Add node slots to layout tree
* Revert "Add node slots to layout tree"
This reverts commit 460493a620.
* Remove slots from layoutTypes
* Totally not scuffed renderer and adapter
* Remove unused methods in LGLA
* Extract slot position calculations to shared utility
- Create slotCalculations.ts utility for centralized slot position logic
- Update LGraphNode to delegate to helper while maintaining compatibility
- Modify LitegraphLinkAdapter to use layout tree positions when available
- Enable link rendering to use layout system coordinates instead of litegraph positions
This allows the layout tree to control link rendering positions, enabling proper
synchronization between Vue components and canvas rendering.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
* [fix] Restore original link rendering behavior after refactor
This commit fixes several rendering discrepancies introduced during the link rendering refactor to ensure exact parity with the original litegraph implementation:
Path Shape Fixes:
- STRAIGHT_LINK: Now correctly applies l=10 offset to create innerA/innerB points and uses midX=(innerA.x+innerB.x)*0.5 for elbow placement, matching the original 6-segment path
- LINEAR_LINK: Restored 4-point path with l=15 directional offsets (start → innerA → innerB → end)
Arrow Rendering:
- computeConnectionPoint: Now always uses bezier math with 0.25 factor spline offsets regardless of render mode, ensuring arrow positions match original
- Arrow positions: Fixed to render at 0.25 and 0.75 positions along the path
- Arrow gating: Moved scale>=0.6 and highQuality checks to adapter layer to maintain PathRenderer purity
- Arrow shape: Restored original triangle dimensions (-5,-3) to (0,+7) to (+5,-3)
Center Marker:
- Fixed 'None' option: Center marker now correctly hidden when LinkMarkerShape.None is selected
- Center point calculation: Updated for all render modes to match original positions
- STRAIGHT_LINK center: Uses midX and average of innerA/innerB y-coordinates
- LINEAR_LINK center: Uses midpoint between innerA and innerB control points
These fixes ensure backward compatibility while maintaining the clean separation between the pure PathRenderer and litegraph-specific LitegraphLinkAdapter.
Fixes #Issue-Number
---------
Co-authored-by: bymyself <cbyrne@comfy.org>
Co-authored-by: Claude <noreply@anthropic.com>
* feat: Implement CRDT-based layout system for Vue nodes
Major refactor to solve snap-back issues and create single source of truth for node positions:
- Add Yjs-based CRDT layout store for conflict-free position management
- Implement layout mutations service with clean API
- Create Vue composables for layout access and node dragging
- Add one-way sync from layout store to LiteGraph
- Disable LiteGraph dragging when Vue nodes mode is enabled
- Add z-index management with bring-to-front on node interaction
- Add comprehensive TypeScript types for layout system
- Include unit tests for layout store operations
- Update documentation to reflect CRDT architecture
This provides a solid foundation for both single-user performance and future real-time collaboration features.
Co-Authored-By: Claude <noreply@anthropic.com>
* style: Apply linter fixes to layout system
* fix: Remove unnecessary README files and revert services README
- Remove unnecessary types/README.md file
- Revert unrelated changes to services/README.md
- Keep only relevant documentation for the layout system implementation
These were issues identified during PR review that needed to be addressed.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
* refactor: Clean up layout store and implement proper CRDT operations
- Created dedicated layoutOperations.ts with production-grade CRDT interfaces
- Integrated existing QuadTree spatial index instead of simple cache
- Split composables into separate files (useLayout, useNodeLayout, useLayoutSync)
- Cleaned up operation handlers using specific types instead of Extract
- Added proper operation interfaces with type guards and extensibility
- Updated all type references to use new operation structure
The layout store now properly uses the existing QuadTree infrastructure for
efficient spatial queries and follows CRDT best practices with well-defined
operation interfaces.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
* refactor: Extract services and split composables for better organization
- Created SpatialIndexManager to handle QuadTree operations separately
- Added LayoutAdapter interface for CRDT abstraction (Yjs, mock implementations)
- Split GraphNodeManager into focused composables:
- useNodeWidgets: Widget state and callback management
- useNodeChangeDetection: RAF-based geometry change detection
- useNodeState: Node visibility and reactive state management
- Extracted constants for magic numbers and configuration values
- Updated layout store to use SpatialIndexManager and constants
This improves code organization, testability, and makes it easier to swap
CRDT implementations or mock services for testing.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
* Add node slots to layout tree
* Revert "Add node slots to layout tree"
This reverts commit 460493a620.
* Remove slots from layoutTypes
* Totally not scuffed renderer and adapter
* Revert "Totally not scuffed renderer and adapter"
This reverts commit 2b9d83efb8.
* Revert "Remove slots from layoutTypes"
This reverts commit 18f78ff786.
* Reapply "Add node slots to layout tree"
This reverts commit 236fecb549.
* Revert "Add node slots to layout tree"
This reverts commit 460493a620.
* docs: Replace architecture docs with comprehensive ADR
- Add ADR-0002 for CRDT-based layout system decision
- Follow established ADR template with persuasive reasoning
- Include performance benefits, collaboration readiness, and architectural advantages
- Update ADR index
---------
Co-authored-by: Claude <noreply@anthropic.com>
Co-authored-by: Benjamin Lu <benjaminlu1107@gmail.com>
- WidgetColorPicker: Color selection with ColorPicker component
- WidgetImage: Single image display with Image component
- WidgetImageCompare: Before/after comparison with ImageCompare component
- WidgetGalleria: Image gallery/carousel with Galleria component
- WidgetChart: Data visualization with Chart component
- WidgetInputText: Single-line text input with InputText component
- WidgetTextarea: Multi-line text input with Textarea component
- WidgetSlider: Numeric range input with Slider component
- WidgetToggleSwitch: Boolean toggle with ToggleSwitch component
- Complete widget type enum with all 15 widget types
- Component mapping registry for dynamic widget rendering
- Helper function for type-safe widget component resolution
- SimplifiedWidget interface for Vue-based node widgets
- widgetPropFilter utility with component-specific exclusion lists
- Removes DOM manipulation and positioning concerns
- Provides clean API for value binding and prop filtering
* chore: add setup_repo command for claude code
* docs: update CLAUDE.md with monorepo guidance
* chore: ignore CLAUDE.local.md
* ci: add .nvmrc
enforce v22, the current lts release
* chore: node 24 it is!
* fix .claude/commands/setup_repo.md
Co-authored-by: Alexander Brown <drjkl@comfy.org>
* fix: .claude/commands/setup_repo.md
Co-authored-by: Alexander Brown <drjkl@comfy.org>
* fix: update CLAUDE.md
Co-authored-by: Alexander Brown <drjkl@comfy.org>
---------
Co-authored-by: Alexander Brown <drjkl@comfy.org>
* nx: Initialize nx
https://nx.dev/getting-started/adding-to-existing
* fix: Migrator ordering issue for vitest scripts
* nit: trailing newline
* deps: Updated select dependencies to fix Storybook with pnpm
* fix: Add explicit knip entry point for current workspace
...since it's not inferred from the script now.
- Add pnpm outdated for dependency analysis
- Include pnpm licenses for compliance checking
- Use pnpm why for dependency tree analysis
- Add pnpm doctor for health checks
- Replace npm audit with pnpm audit
These additions provide better insights during release process
and leverage pnpm's superior dependency analysis tools.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-authored-by: Claude <noreply@anthropic.com>
* [feat] Move i18n workflow to release-only pattern
- Modify i18n.yaml to only run on version-bump-* branches and manual dispatch
- Follow chromatic.yaml pattern for release-only workflows
- Update CONTRIBUTING.md to document new translation process
- Reduces PR conflicts and improves development velocity
Fixes#5224🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
* [feat] Optimize i18n workflow trigger conditions
Move logic from job-level 'if' to more restrictive trigger configuration:
- Limit pull_request trigger to main/master branches only
- Add explicit types to reduce unnecessary workflow runs
- Simplify job-level condition while maintaining same behavior
- Only run on version-bump-* branches or manual dispatch
* Apply suggestion from @DrJKL
Co-authored-by: Alexander Brown <drjkl@comfy.org>
* [feat] Optimize i18n workflow trigger conditions
- Simplify trigger section with cleaner organization
- Move workflow_dispatch to top for better readability
- Remove unnecessary path-ignore filters
- Add clearer comments for branch detection logic
- Maintain same functional behavior while improving structure
Addresses request to move branch detection logic from job-level 'if'
to trigger-level 'on' where possible within GitHub Actions limitations.
---------
Co-authored-by: Claude <noreply@anthropic.com>
Co-authored-by: Alexander Brown <drjkl@comfy.org>
* [fix] Correct WhatsNew popup arrow alignment with help center icon
The arrow positioning was not accounting for additional sidebar icons (terminal and shortcuts)
that were added below the help center icon, causing misalignment. Updated the calculation to
properly position the arrow relative to the help center icon's current location.
Fixes#5126
* [fix] Update small sidebar arrow positioning and improve center alignment
- Fixed small sidebar rule to use consistent calculation with normal sidebar
- Updated positioning to use half icon height for better center alignment
- Both normal and small sidebar now use dynamic CSS variable calculations
Addresses feedback from review by viva-jinyi on CSS specificity and positioning accuracy.
* [fix] Make sidebar CSS variables global for teleported components
- Move --sidebar-width CSS variable to :root to make it accessible globally
- This allows teleported components like WhatsNewPopup to reference sidebar dimensions
- Adjust arrow positioning calculations for better alignment with help center icon
- Add explanatory comments about why these variables need to be global
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
* fix: icon-size should be variable
---------
Co-authored-by: Jin Yi <jin12cc@gmail.com>
Co-authored-by: Claude <noreply@anthropic.com>
* migration: npm to pnpm
Step 1, package and lockfile
* migration: npm to pnpm
Step 2: docs / LLM instructions
* migration: npm to pnpm
Step 3: More documentation updates
* migration: npm to pnpm
Step 4: Even more documentation
* migration: npm to pnpm
Step 5: GitHub Actions
* migration: npm to pnpm
Step 6: PNPM installation in actions. This merge is going to be painful.
* migration: npm to pnpm
Unignore and add pnpm lockfile.
* migration: npm to pnpm
package-lock.json -> pnpm-lock.yaml
* migration: explicit @primeuix/styled, move glob to prod deps
* migration: more explicit deps required by the importmap plugin and vite
* fix: missed merge artifact
* fix: Make sure pnpm is available to install wrangler
* migration: pnpm for dev-release.yaml
* migration: new setup action version
Won't work until that is updated and a new release is cut.
* migration: Playwright needs uuid
* migration: Add explicit deps for lobehub
* chore(version-bump.yaml): change cache from npm to pnpm to optimize package management and improve build performance
* migration: install pnpm in version-bump action
---------
Co-authored-by: snomiao <snomiao@gmail.com>
The refreshComboInNodes function was only iterating over top-level nodes,
missing nodes inside subgraphs. This caused file lists and combo widget
options to not update properly when new models were added, unless users
created completely new nodes.
Changes:
- Replace graph.nodes iteration with forEachNode() for hierarchical traversal
- Import forEachNode utility from graphTraversalUtil
- Change early continue to early return for callback function
Fixes#5196🤖 Generated with [Claude Code](https://claude.ai/code)
Co-authored-by: Claude <noreply@anthropic.com>
* [ci] Make Playwright deploy step safe to fail
Add continue-on-error: true to Deploy to Cloudflare Pages step to prevent
Cloudflare API issues from blocking essential testing processes.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
* [ci] Make lint-and-format comment steps safe to fail
Add continue-on-error: true to PR comment steps in lint workflow:
- Comment on PR about auto-fix (line 63)
- Comment on PR about manual fix needed (line 76)
This prevents GitHub API permission errors from blocking
essential linting processes while maintaining comment functionality.
---------
Co-authored-by: Claude <noreply@anthropic.com>
The FirstTimeUIMessage was introduced in November 2024 when the new UI became default, but after 6+ months it's no longer needed as users have adapted to the new interface. The message was confusing for new users who never experienced the old UI.
Changes:
- Remove FirstTimeUIMessage.vue component
- Remove component usage from SettingDialogContent.vue
- Remove 'firstTimeUIMessage' translation key from all locales
- Keep settingStore.exists() method as it's part of the public API
* fix: [@vue/compiler-sfc] defineModel is a compiler macro and no longer needs to be imported.
* fix: Duplicate name conflict/warning from unplugin-vue-components
* fix: enforce correct line endings for the commonjs and esm variants via git
* [fix] Resolve HoverDissolveThumbnail layering issue preventing dissolve effect
- Fix layer stacking problem where LazyImage containers blocked overlay visibility
- Restructure template with separate positioning containers for base and overlay images
- Use z-index to ensure proper layering of overlay image above base image
- Update CSS classes from absolute positioning on images to container-based positioning
- Update test assertions to match new class structure
- Ensure hover dissolve transition works correctly from opacity-0 to opacity-100
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
* Address code review feedback
- Use size-full instead of w-full h-full for cleaner Tailwind classes
- Update tests to use classList approach instead of string contains
- Maintain same functionality while improving code quality
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
---------
Co-authored-by: Claude <noreply@anthropic.com>
Co-authored-by: bymyself <cbyrne@comfy.org>
* Add support for custom iconify using tailwind plugin
- Register svgs from custom icons folder
- Update existing custom icons to remove padding
- Swap component icons for classes in sidebar tabs
- Update browse templates in menu to use custom icon
* Add basic check for custom SVG icons
* Remove unused iconify packages
* [test] regenerate browser test baselines after flaky PR #5158
Trigger fresh baseline generation for browser tests. The animated webp
screenshot baseline was corrupted by flaky results and needs regeneration.
* Update test expectations [skip ci]
---------
Co-authored-by: github-actions <github-actions@github.com>
* [feat] update navigation mode default to legacy and improve display name
- Change defaultsByInstallVersion from 'standard' to 'legacy' for version 1.25.0
- Update legacy navigation display name from 'Left-Click Pan (Legacy)' to 'Drag Navigation'
- Maintains both navigation systems over long term while improving UX clarity
* Update locales [skip ci]
---------
Co-authored-by: github-actions <github-actions@github.com>
* [fix] update selection overlay tests after canvas migration
Update browser tests to work with canvas-based selection overlay introduced in PR #5158.
Replaces DOM-based .selection-overlay-container checks with .selection-toolbox visibility
and converts border visibility tests to canvas screenshot comparisons.
Fixes#5158
* [chore] remove unused file flagged by knip
* [fix] adjust test expectations for canvas-based positioning
- Skip animated webp test unrelated to selection overlay changes
- Update toolbox position expectations to match canvas-based coordinates
- Canvas positioning uses different coordinate system than DOM overlay
* [fix] improve positioning test flexibility and revert webp skip
- Make toolbox position test more flexible for canvas-based coordinates
- Revert animated webp test skip as requested in review
- Canvas positioning varies more than DOM, use reasonable bounds instead
* Update test expectations [skip ci]
* [refactor] address review comments - use fixture locators
- Add selectionToolbox locator to ComfyPage fixture as requested
- Replace .isVisible() === false with .not.toBeVisible() pattern
- Update all selection toolbox locators to use fixture instead of inline selectors
- Improves maintainability and follows established patterns
* [refactor] use fixture canvas locator for screenshots
Replace inline canvas locators with comfyPage.canvas fixture property
for consistency and maintainability as suggested in review.
---------
Co-authored-by: github-actions <github-actions@github.com>
- Remove automatic trigger on push to main
- Add workflow_dispatch for manual triggering
- Add conditional to only run for PRs from version-bump-* branches
- Reduces unnecessary Chromatic builds on regular PRs
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-authored-by: Claude <noreply@anthropic.com>
Add continue-on-error: true to all PR comment steps in both chromatic.yaml and test-ui.yaml workflows to prevent GitHub API permission errors (403) from blocking essential CI processes.
Changes:
- chromatic.yaml: Added continue-on-error to 2 comment steps
- test-ui.yaml: Added continue-on-error to 4 comment steps
This ensures that visual testing (Chromatic) and browser testing (Playwright) continue to run even when PR commenting fails due to token permissions.
Fixes#5149🤖 Generated with [Claude Code](https://claude.ai/code)
Co-authored-by: Claude <noreply@anthropic.com>
* fix: layout perf issue
* feat: skip a whole host of transform issues created by the SelectionOverlay and instead allowing the canvas to render the overlay and then injecting props to the SelecitonToolbox itself
* refactor: removed unused files/functionality
* refactor: removed unused types
* fix: z index issue
* fix: PR feedback
* fix: PR feedback and more perf improvements
* Update test expectations [skip ci]
---------
Co-authored-by: github-actions <github-actions@github.com>
