feat(editor): comprehensive UI redesign with floating toolbar and tab-based editing#1
Merged
feat(editor): comprehensive UI redesign with floating toolbar and tab-based editing#1
Conversation
…istry Foundation for UI redesign: CSS custom property tokens with light/dark themes, lucide-react icon library, and spec-driven node type registry.
…palette, tabs, lanes Phase 1 of UI redesign: 6 parallel workstreams creating new component system alongside existing code. 521 tests pass, zero regressions. - nodes-v2: NodeShell + 6 registered node specs (unified rounded rectangles) - components-v2: Island, Toolbar, CommandPalette, TabBar, NodePopover, LaneHeader/Background - edges-v2: SmoothstepEdge, ErrorEdge, ConditionalEdge with hover delete - hooks-v2: useKeyboardShortcuts, useTabState, usePopoverPosition, useConnectionValidator, useLaneCollapse, useLaneReorder - styles: modular CSS with design token system
Replace the old sidebar-based layout with the new floating UI: - Rewrite FlowprintEditor.tsx to integrate all v2 components (TabBar, Toolbar, NodePopover, CommandPalette, ZoomControls, BottomPanel, LaneBackground) - Add ZoomControls component (click-to-edit zoom percentage, fit view) - Add BottomPanel component (resizable YAML preview + validation tabs) - Add editor.css layout shell, zoom.css, bottom-panel.css - Wire keyboard shortcuts (Cmd+K, Cmd+J, V/H tool toggle, undo/redo) - Wire tab-based node editing (single-click popover, double-click tab) - Update test suite for v2 UI structure - Fix minor TS issues in useTabState and useConnectionValidator
…ports Delete old components replaced by v2: - Remove nodes/ directory (6 old node types + index) - Remove edges/ directory (3 old edge types + index) - Remove panels/ directory (PanelSidebar, PropertiesPanel, LanePanel, YamlPreviewPanel, 11 field editors, and all tests) - Remove LaneBackground, LineOfVisibility, ValidationBanner, NodePalette - Remove monolithic styles.css (replaced by modular styles/ directory) - Remove YamlPreview.stories.tsx Update remaining code: - FlowprintViewer: switch to v2 nodeTypes, edgeTypes, LaneBackground - index.ts: replace old panel exports with v2 component and NodeSpec registry exports, update CSS import to styles/index.css - FlowprintEditor.test.tsx: remove ValidationBanner standalone tests Bundle size reduced from 145KB to 95KB JS (23KB gzipped).
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
New Components
Architecture
nodes-v2/,edges-v2/,components-v2/,hooks-v2/,styles/)useFlowprintState) and controlled API (value/onChange) preservedCommits
a21e968Phase 0 — Design tokens, lucide-react, NodeSpec registryd33e4d2Phase 1 — All v2 components (6 parallel workstreams)a156306Phase 2 — Rewire FlowprintEditor + ZoomControls + BottomPanel84f320fPhase 3 — Remove old components, update exportsTest plan
pnpm --filter @ruminaider/flowprint-editor buildpassespnpm --filter @ruminaider/flowprint-editor test -- --runpasses (430/430, 1 pre-existing WASM skip)pnpm --filter flowprint-app dev— verify in browser: