feat(codemirror): inline value editing widgets

[heypoom]

Adds inline value editing widgets for CodeMirror:

Use "Option" key to show inline-editable values

• Integer & Float: drag up and down
• Vec2: 2D Grid
• Vec3: Color

Summary by CodeRabbit

Release Notes

• New Features
  • Added inline value widgets for numeric literals in CodeMirror editors (JavaScript, GLSL, Peppermint, Shader Park)
  • Drag numbers with modifier key (Option on macOS; Control on Windows/Linux) to adjust values in place
  • XY grid overlay for editing 2D vectors and normalized color components
  • Color picker for color literals
  • Throttled execution during inline edits for improved performance

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: ddc5d27b-f2f1-4f00-8639-ae98bec77e2c

📥 Commits

Reviewing files that changed from the base of the PR and between a58bc4d and a1e044b.

📒 Files selected for processing (28)

• docs/design-docs/specs/156-codemirror-inline-value-widgets.md
• ui/src/lib/canvas/detached-code-editor-change.test.ts
• ui/src/lib/canvas/detached-code-editor-change.ts
• ui/src/lib/canvas/use-detached-code-editor-overlay.svelte.ts
• ui/src/lib/codemirror/language.ts
• ui/src/lib/codemirror/value-widget-events.ts
• ui/src/lib/codemirror/value-widgets.test.ts
• ui/src/lib/codemirror/value-widgets/detection.ts
• ui/src/lib/codemirror/value-widgets/dom-events.ts
• ui/src/lib/codemirror/value-widgets/extension.ts
• ui/src/lib/codemirror/value-widgets/index.ts
• ui/src/lib/codemirror/value-widgets/theme.ts
• ui/src/lib/codemirror/value-widgets/types.ts
• ui/src/lib/codemirror/value-widgets/widgets/color-widget.ts
• ui/src/lib/codemirror/value-widgets/widgets/number-widget.ts
• ui/src/lib/codemirror/value-widgets/widgets/xy-widget.ts
• ui/src/lib/components/CanvasPreviewLayout.svelte
• ui/src/lib/components/CodeEditor.svelte
• ui/src/lib/components/DetachedCodeEditorOverlay.svelte
• ui/src/lib/components/FlowCanvasInner.svelte
• ui/src/lib/components/ObjectPreviewLayout.svelte
• ui/src/lib/components/nodes/GLSLCanvasNode.svelte
• ui/src/lib/components/nodes/ShaderParkNode.svelte
• ui/src/lib/components/sidebar/SidebarCodeEditorView.svelte
• ui/src/lib/components/sidebar/SidebarPanel.svelte
• ui/src/stores/code-editor-layout.store.ts
• ui/static/content/objects/peppermint.md
• ui/static/content/objects/shaderpark.md

---

📝 Walkthrough

Walkthrough

This PR introduces interactive inline editing for numeric values, vectors, and colors in CodeMirror editors. It adds widget detection across JavaScript, GLSL, and Peppermint syntax, drag-based editing with precision preservation, XY grid and color picker overlays, and a CodeMirror extension with throttled execution support. It also refactors node persistence to use targeted callbacks and standardizes run callbacks to accept edited code.

Changes

CodeMirror Inline Value Widgets

Layer / File(s)	Summary
Design specification and type contracts docs/design-docs/specs/156-codemirror-inline-value-widgets.md, ui/src/lib/codemirror/value-widgets/types.ts	Design document specifies goals, scope, and behavior for inline value widgets. Type definitions establish data contracts for widget metadata, geometry, and syntax nodes.
Event infrastructure ui/src/lib/codemirror/value-widget-events.ts	Event names and throttle constants for value-widget changes. Helpers determine whether edits should trigger re-execution per language/node type.
Widget detection ui/src/lib/codemirror/value-widgets/detection.ts	Detects numeric values, vec2/vec3/color calls, and arrays in JavaScript, GLSL, GLSL-in-JS templates, and Peppermint. Exports findInlineValueWidgets and syntax traversal helpers.
DOM interaction and event handling ui/src/lib/codemirror/value-widgets/dom-events.ts	Platform-specific activation detection, widget selection from position or mouse event, dataset-based widget reconstruction, and custom event dispatch.
Number, vector, and color formatting ui/src/lib/codemirror/value-widgets/widgets/number-widget.ts, ui/src/lib/codemirror/value-widgets/widgets/color-widget.ts, ui/src/lib/codemirror/value-widgets/widgets/xy-widget.ts	Drag-edit formatting preserving precision, normalized vector component clamping, hex-to-RGB conversion, and XY grid DOM construction with normalized point calculation.
CodeMirror extension with viewport awareness ui/src/lib/codemirror/value-widgets/extension.ts, ui/src/lib/codemirror/value-widgets/theme.ts	ViewPlugin managing widget decorations, hover/active state, number drag, XY drag, color picker lifecycle, viewport change listening, and CSS styling for widget overlays.
Extension loading ui/src/lib/codemirror/language.ts, ui/src/lib/codemirror/value-widgets/index.ts	Wires inline value widgets into JavaScript, GLSL, and Peppermint language support. Public re-export hub for extension and utilities.
Feature validation ui/src/lib/codemirror/value-widgets.test.ts	Tests widget detection across languages, precision handling, formatting helpers, and execution gating/throttling logic.
Node data persistence ui/src/lib/canvas/detached-code-editor-change.ts, ui/src/lib/canvas/detached-code-editor-change.test.ts, ui/src/lib/canvas/use-detached-code-editor-overlay.svelte.ts, ui/src/lib/components/FlowCanvasInner.svelte	Refactors detached code editor to use targeted updateNodeData callback instead of wholesale node replacement.
Run callback standardization ui/src/stores/code-editor-layout.store.ts, ui/src/lib/components/CodeEditor.svelte, ui/src/lib/components/DetachedCodeEditorOverlay.svelte, ui/src/lib/components/sidebar/SidebarCodeEditorView.svelte, ui/src/lib/components/sidebar/SidebarPanel.svelte	Updates onrun callbacks to accept optional code parameter enabling value-widget-driven execution.
Component integration ui/src/lib/components/CanvasPreviewLayout.svelte, ui/src/lib/components/ObjectPreviewLayout.svelte, ui/src/lib/components/nodes/GLSLCanvasNode.svelte, ui/src/lib/components/nodes/ShaderParkNode.svelte	Wires value-widget event listeners, throttling, viewport dispatch, and onCodeChange handlers through component tree. Adds handleCodeChange to node components.
User documentation ui/static/content/objects/peppermint.md, ui/static/content/objects/shaderpark.md	Documents drag-edit interaction with platform-specific modifier keys and throttled re-execution during inline tuning.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

Possibly related PRs

• heypoom/patchies#174: Refactors detached code editor overlay node data persistence from getNodes/setNodes to updateNodeData callback, which this PR also touches.
• heypoom/patchies#175: Updates sidebar code editor components' callback signatures, which this PR extends with code parameter support for value-widget integration.

Poem

🎯 Drag numbers up and colors bright,
XY grids that dance just right,
CodeMirror widgets, sleek and small,
Inline editing—now you have it all! 🐰

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch codemirror-value-editing-widgets

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[cloudflare-workers-and-pages]

Deploying patchies with    Cloudflare Pages

Latest commit:	a1e044b
Status:	✅  Deploy successful!
Preview URL:	https://85b7a9be.patchies.pages.dev
Branch Preview URL:	https://codemirror-value-editing-wid.patchies.pages.dev

View logs