feat: extract SeedControlButton component (#9744)

Browse Source

<img width="1048" height="482" alt="스크린샷 2026-03-12 오전 9 11 56"
src="https://github.com/user-attachments/assets/68009980-097c-4736-b7c4-eb8f9a6f05be"
/>

## Summary
- Extract inline value control button from `WidgetWithControl` into
reusable `SeedControlButton` component
- Support `badge` (pill) and `button` (square) variants per Figma design
system spec
- Use native `<button>` element for proper a11y (works with Reka UI's
`PopoverTrigger as-child`)

## Test plan
- [x] Verify seed control button renders correctly on KSampler node's
seed widget
- [x] Verify popover opens on click and mode selection works
- [x] Verify all 4 modes display correct icon/text (shuffle, pencil-off,
+1, -1)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-9744-feat-extract-SeedControlButton-component-3206d73d365081a3823cc19e48d205c1)
by [Unito](https://www.unito.io)

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
Co-authored-by: github-actions <github-actions@github.com>

...

This commit is contained in:

Dante

2026-03-13 18:49:18 +09:00

committed by GitHub

parent c318cc4c14

commit 07d5bd50f6

38 changed files with 1528 additions and 25 deletions

Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL

Download Patch File Download Diff File Expand all files Collapse all files

BIN

browser_tests/tests/vueNodes/groups/groups.spec.ts-snapshots/vue-groups-create-group-chromium-linux.png

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 112 KiB After Width:  |  Height:  |  Size: 112 KiB

BIN

browser_tests/tests/vueNodes/groups/groups.spec.ts-snapshots/vue-groups-fit-to-contents-chromium-linux.png

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 57 KiB After Width:  |  Height:  |  Size: 57 KiB

BIN

browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-dragging-link-chromium-linux.png

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 62 KiB After Width:  |  Height:  |  Size: 62 KiB

BIN

browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-input-drag-ctrl-alt-chromium-linux.png

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 62 KiB After Width:  |  Height:  |  Size: 62 KiB

BIN

browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-input-drag-reuses-origin-chromium-linux.png

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 62 KiB After Width:  |  Height:  |  Size: 62 KiB

BIN

browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-reroute-input-drag-chromium-linux.png

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 64 KiB After Width:  |  Height:  |  Size: 64 KiB

BIN

browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-reroute-output-shift-drag-chromium-linux.png

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 64 KiB After Width:  |  Height:  |  Size: 63 KiB

BIN

browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-shift-output-multi-link-chromium-linux.png

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 63 KiB After Width:  |  Height:  |  Size: 63 KiB

BIN

browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-snap-to-node-chromium-linux.png

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 60 KiB After Width:  |  Height:  |  Size: 60 KiB

BIN

browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-snap-to-slot-chromium-linux.png

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 59 KiB After Width:  |  Height:  |  Size: 59 KiB

BIN

browser_tests/tests/vueNodes/interactions/node/bringToFront.spec.ts-snapshots/bring-to-front-overlapped-after-chromium-linux.png

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 58 KiB After Width:  |  Height:  |  Size: 58 KiB

BIN

browser_tests/tests/vueNodes/interactions/node/bringToFront.spec.ts-snapshots/bring-to-front-overlapped-before-chromium-linux.png

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 62 KiB After Width:  |  Height:  |  Size: 62 KiB

BIN

browser_tests/tests/vueNodes/interactions/node/bringToFront.spec.ts-snapshots/bring-to-front-widget-overlapped-after-chromium-linux.png

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 61 KiB After Width:  |  Height:  |  Size: 61 KiB

BIN

browser_tests/tests/vueNodes/interactions/node/bringToFront.spec.ts-snapshots/bring-to-front-widget-overlapped-before-chromium-linux.png

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 63 KiB After Width:  |  Height:  |  Size: 63 KiB

BIN

browser_tests/tests/vueNodes/interactions/node/move.spec.ts-snapshots/vue-node-moved-node-chromium-linux.png

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 95 KiB After Width:  |  Height:  |  Size: 95 KiB

BIN

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

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 108 KiB After Width:  |  Height:  |  Size: 108 KiB

BIN

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

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 106 KiB After Width:  |  Height:  |  Size: 106 KiB

BIN

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

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 137 KiB After Width:  |  Height:  |  Size: 137 KiB

BIN

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

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 138 KiB After Width:  |  Height:  |  Size: 138 KiB

BIN

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

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 107 KiB After Width:  |  Height:  |  Size: 107 KiB