UI upgrade: scrub fields, inspector grammar, timeline snapping, text & onboarding#2
Merged
Conversation
… radius scales) Phase 0 of the UI upgrade plan. Adds a spacing scale (--sp-2..24), an elevation tier (--prominent) per theme, three shadow tiers, two motion durations + easing, and radius-xs/sm. Purely additive — no view changes yet; later phases build on these.
Phase 1a+1b. Adds src/ScrubField.tsx — drag-to-scrub OR click-to-type with Shift (coarse) / Ctrl (fine) precision, live onInput + single onCommit undo boundary, em-dash for mixed values. Introduces InspSection (tiny-caps header) and InspRow (aligned, fixed-height) and reflows every inspector (text, box, arrow, zoom, speed, timing, color) into labeled sections. Numeric controls (size, opacity, thickness, zoom strength, speed rate, timing) are now ScrubFields instead of range sliders. Coalescing-safe edits stream live; zoom/speed commit on release to avoid undo spam.
Phase 1c. Card-like controls (tool rail, export chips, color swatches) share one hover recipe — a 1px lift + shadow-sm over the motion tokens — and the properties panel gets a subtle accent spine marking it as the active editing surface.
…ions) Phase 3b. Replaces the fixed <=12-tick rule with a pixel-aware ruler: a measured timeline width (ResizeObserver) picks a nice major interval targeting ~90px between labels, plus minor subdivisions kept >=11px apart with a taller midpoint tick. Reads cleanly at any clip length.
Phase 3a. Dragged timeline bands (zoom, speed, cut, annotation, trim) snap their edges to the playhead, clip bounds, major ruler ticks, and every other band's edges within a pixel-constant ~8px threshold (zoom-independent). A dashed accent guide line flashes at the catch point. Move mode snaps whichever edge lands closest, shifting the whole band.
Phase 2c. Selected text labels now show four corner handles; dragging one scales the font (anchored to the opposite corner) so text grows typographically instead of stretching. handleAt/hitTest share one normalized text-width helper, and the on-canvas label previews the new size live, committing once on release.
Phase 2d. Dragging a text, box, or arrow on the canvas snaps its anchor, center, and far edges to the canvas edges and center (0, 0.5, 1) within a pixel-constant threshold, flashing dashed crosshair guide lines at the catch point.
Phase 4b. First launch shows a welcome card (value prop + 3-step explainer + Start recording CTA), gated on a localStorage flag so it never re-nags. Skipping it pops a coachmark anchored to the real Record button; both clear once recording starts.
Phase 2b. Adds a 'background' flag to text annotations that draws a translucent dark plate behind the glyphs — toggled with the BG button in the Text inspector. Rendered in the editor overlay (SVG) and baked into exports via the scene's shape pass (reusing the keystroke-chip backing pattern, sized by an estimated text box). Field defaults off so older projects are unaffected.
Phase 2a. Bundles five OFL/Apache display fonts (Anton, Bebas Neue, Poppins, Permanent Marker, Shrikhand) under assets/fonts/. Adds a 'font' field to text annotations threaded through the model, scene, renderer, and commands; loads the same TTFs into glyphon so exports match the editor. The Text inspector gains an in-typeface font picker (each button rendered in its own face), and the on-canvas label + inline editor preview the chosen font live.
Phase 4a. Replaces the plain 'Recover last session' button with a palmier-style recents card (gradient thumb, label, duration, hover lift) reusing the existing single-session recovery. Note: storage keeps one session by design, so this is a grid-of-one; a multi-recording history + real frame thumbnails are a deliberate future extension.
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.
Implements the full UI upgrade plan (docs/UI-Upgrade-Plan.md), learning ergonomics from palmier-pro. All 12 items shipped and CI-verified before merge.
Shipped
CI: frontend ✓, cross-crate model cascade ✓, full set ✓ (fonts + glyphon). Verified via GitHub CI (no local builds, per project rule).