Product-wide UX redesign: universal resize, smart alignment, contextual selection toolbar, color/tool simplification, vector SF Symbols, board library#19
Merged
Conversation
…al selection toolbar, two-layer color system, vector SF Symbols, board library Foundation tier (M-A) of the holistic redesign, plus the full design doc set (docs/redesign/): UX audit, IA, design system, interaction specs, workflows, benchmarks, and prioritised roadmap. Object manipulation - Mount the Transformer (it was imported but never rendered — nothing on the board could be resized) and extend it to every shape kind: strokes bake the affine transform into their points and scale brush size, stickies scale their type with the note, media (images/PDFs/embeds) resizes aspect-locked. - Lines/arrows get draggable endpoint dots with 45-degree shift-constrain. - Magnetic edge/center snapping with Keynote-style guides while dragging (zoom-independent 8px tolerance, Alt bypasses), plus align and distribute commands for multi-selections. Contextual UI - Replace the fixed right-edge SelectionInspector with a floating selection toolbar that tracks the selection, flips around the dock, shows only applicable controls, and adds Duplicate / Arrange / Lock / Delete. - New viewportStore projects world bounds into screen space for DOM chrome. Design system fixes - Light-mode hover bug: generic :hover rules outranked --active modifiers, painting near-white under white glyphs. Added --accent-hover token and paired --active:hover rules across dock/buttons/presets/menus. - Opacity sliders no longer overflow popovers; both surfaces share the same Slider component. - Color picker restructured into quick layer (palette, recents, saved) with hex/opacity/save behind one disclosure; recents tracked device-locally. - Pen styles deduplicated: Fineliner retired from the picker (kept rendering for existing boards); Pen/Pencil/Marker remain as styles of one pen tool. - Icons migrated from PNG masks to the supplied SF Symbols SVGs, normalized onto a uniform optical canvas, with new glyphs for align/distribute/ duplicate/opacity/library actions. Information architecture - Home becomes a board library: folders, favorites, recents, search, drag-and-drop filing, inline rename, empty state — local-first via localStorage, server sync sequenced as M-B. https://claude.ai/code/session_013oiDiwJchzuxKWmTvHP2L3
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
2 participants
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.
Whiteboard Platform UI/UX Redesign — Foundation Tier (M-A) + Design Doc Set
This PR delivers the holistic redesign in two parts: the complete design document set (all 10 requested deliverables, grounded in file-level audit evidence) and the first implementation tier — the fixes and features with the highest impact-to-complexity ratio.
📐 Design documents —
docs/redesign/🔧 Implemented (M-A)
Object manipulation
TransformLayerwas imported but never mounted — no object on the board had handles at all. Now mounted and extended to every kind: strokes bake the node's affine transform into their points (brush size scales with mean scale), stickies scale their type with the note, text scales with its box, and images/PDFs/embeds resize aspect-locked.Contextual menus
SelectionInspectoris replaced by a contextual selection toolbar that floats adjacent to the selection, flips/clamps intelligently around the dock and viewport, tracks live during drags, shows only applicable controls, and adds one-click Duplicate / Arrange / Lock / Delete. Locked selections collapse to a single Unlock pill.Hover states (light mode)
:hover(specificity 0,2,0) overrode--activemodifiers (0,1,0), painting near-white glass under white glyphs — invisible icons in light mode. Fixed with a new--accent-hovertoken + paired--active:hoverrules across dock, glass buttons, width presets, brush styles, menu segments, and the text toolbar. Hover is now contrast-additive by rule.Opacity controls
min-width: 0, compact tabular value box) and the sameSlidercomponent now serves every surface (the inspector previously used a bare native range input).Color system
Drawing tools
Iconography
currentColor. New glyphs for align/distribute/duplicate/opacity/search/star/folder/board. All icon-only controls keep tooltips + ARIA labels.Information architecture
✅ Verification
pnpm -r typecheckgreen across all 5 packages.pnpm run build(tsc + Vite + SPA fallback) green.Notes for review
apps/webgains azustanddependency (was already used transitively by the canvas package).SelectionInspector.tsxis deleted; its logic lives on inSelectionToolbar.tsx.Transformermounts only in Select mode; body drags stay withSelectTool(snapping), handle drags go to Konva — the existing pointer-routing guard covers this.https://claude.ai/code/session_013oiDiwJchzuxKWmTvHP2L3
Generated by Claude Code