Adds support for entering math inside number widgets in vue mode
Migrates components to simple html elements (div and button) by
borrowing styling from the (reverted) reka-ui migration in #6985. The
existing (evil) litegraph eval code is extracted as a utility function
and reused.
This PR means we're entirely writing our own NumberField.
Also adds support for scrubbing widgets like in litegraph
### Known Issue
- Scrubbing causes text to be highlighted, ~~starting a scrub from
highlighted text will instead drag the text~~.
- It seems this can only be prevented with `pointerdown.prevent`, but
this requires a manual `input.focus()` which does not place the cursor
at location of mouse click.
(Obligatory: _It won't do you a bit of good to review math_)
┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7759-Implement-vue-math-2d46d73d365081b9acd4d6422669016e)
by [Unito](https://www.unito.io)
---------
Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: DrJKL <DrJKL0424@gmail.com>
## Summary
Fixes https://github.com/Comfy-Org/ComfyUI_frontend/issues/5692 by
making widget link connection status trigger on change so Vue widgets
with connected links could properly switch to the `disabled` state when
they are implicitly converted to inputs.
## Changes
- **What**: Added `node:slot-links:changed` event tracking and reactive
slot data synchronization for Vue widgets
```mermaid
graph TD
A[Widget Link Change] --> B[NodeInputSlot.link setter]
B --> C{Is Widget Input?}
C -->|Yes| D[Trigger slot-links:changed]
C -->|No| E[End]
D --> F[Graph Event Handler]
F --> G[syncNodeSlotData]
G --> H[Update Vue Reactive Data]
H --> I[Widget Re-render]
style A fill:#f9f9f9,stroke:#333,color:#000
style I fill:#f9f9f9,stroke:#333,color:#000
```
## Review Focus
Widget reactivity performance with frequent link changes and event
handler memory management in graph operations.
┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-5834-fix-Vue-node-widgets-should-be-in-disabled-state-if-their-slots-are-connected-with-a-link-27c6d73d365081f6a6c3c1ddc3905c5e)
by [Unito](https://www.unito.io)
## Summary
Replace color/dark-color pairs in components with design tokens to allow
for easy overriding.
<!-- Also standardizes the icon pattern to simplify the tailwind config.
-->
## Changes
- **What**: Token based colors, for now, mostly.
- **Breaking**: Got approval from Design to collapse some very similar
pairs of colors that seem to have diverged in implementations over time.
Some of the colors might be a little different, but we can tweak them
later.
## Review Focus
Still have quite a few places from which to remove `dark-theme`, but
this at least gets the theming much closer.
Need to decide if I want to keep going in here or cut this and do the
rest in a subsequent PR.
## Screenshots (if applicable)
<!-- Add screenshots or video recording to help explain your changes -->
┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-5908-WIP-Make-components-themeable-2816d73d365081ffbc05d189fe71084b)
by [Unito](https://www.unito.io)
---------
Co-authored-by: github-actions <github-actions@github.com>
## Summary
Added mute state support to Vue nodes with visual feedback and keyboard
shortcut functionality.
## Changes
- **What**: Implemented mute state (mode 2) for Vue nodes with opacity
styling and `Ctrl+M` hotkey support
## Review Focus
Visual consistency between bypass and mute states, and keyboard shortcut
conflict detection with existing hotkeys.
## Test Coverage
- Single node mute/unmute with `Ctrl+M` hotkey
- Multi-selection mute/unmute operations
- Visual state verification with opacity changes
## Related
- https://github.com/Comfy-Org/ComfyUI_frontend/pull/5715
┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-5770-Add-muted-state-to-Vue-nodes-2796d73d36508143b3edfbcb782de7c1)
by [Unito](https://www.unito.io)
The VueNodeHelpers was using incorrect CSS selector for detecting selected nodes.
Vue nodes use outline-black/outline-white classes for selection state, not border-blue-500.
This fixes the failing delete key interaction tests that were showing 0 selected nodes
when they should have been detecting the actual selection state.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-authored-by: Claude <noreply@anthropic.com>
* fix delete hotkey with vue nodes
* add playwright test for deletion and selection with vue nodes
* add unit test for keybinding service event forwarding
* [refactor] improve type safety and remove wrapper functions in VueNodeHelpers - addresses @DrJKL review comments
- Replace type cast with proper type predicate in getNodeIds method
- Remove unnecessary getNodeCount() and getSelectedNodeCount() wrapper functions
- Remove deleteSelected() helper methods to make key presses explicit in tests
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
* [refactor] make key presses explicit in Vue node tests - addresses @DrJKL review comment
- Remove commented line in test setup
- Replace helper method calls with direct keyboard.press() for better test clarity
- Use direct locator access instead of wrapper functions for node counts
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
* [enhance] add input filtering and improve shouldForwardToCanvas logic - addresses @DrJKL review comments
- Add filtering for input, textarea, and contentEditable elements to prevent forwarding when typing
- Allow shift key while blocking other modifiers (ctrl, alt, meta)
- Include existing property_value span check for consistency
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
* [refactor] remove mutable global state from keybinding unit tests - addresses @DrJKL review comment
- Remove global mockCommandExecute and mockProcessKey variables
- Access vi.mocked() directly in test assertions for better isolation
- Keep keybindingService as local variable since it's properly scoped
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
* [fix] remove duplicate input filtering that broke delete key functionality
The shouldForwardToCanvas function was duplicating input field checks already
handled by keyCombo.isReservedByTextInput, causing delete keys to be blocked.
- Remove duplicate input filtering from shouldForwardToCanvas
- Keep contentEditable enhancement in existing isReservedByTextInput check
- Maintain shift key support as requested in review
Fixes regression where delete key tests were failing after review changes.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
* [fix] restore working test structure while implementing review improvements
Root cause: Changed test approach from helper methods to direct keyboard calls,
which introduced timing/focus issues that broke delete key functionality.
Solution:
- Restore working test structure using helper methods (deleteSelected, getNodeCount)
- Keep type safety improvement: replace type cast with proper type predicate
- Keep code cleanup: remove commented line in test setup
- Maintain working keybinding service with contentEditable enhancement
This preserves the original working behavior while addressing all review feedback.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
* [auto-fix] Apply ESLint and Prettier fixes
---------
Co-authored-by: Claude <noreply@anthropic.com>
Co-authored-by: GitHub Action <action@github.com>
