playground sidebar: reflow canvas + smooth drag-to-open
Created by: jedmund
Summary
- The playground's side configurator panel now reflows the canvas instead of overlaying it. Exercises and tools center in the remaining space (viewport minus panel). Docked keyboards are the one exception: they stay edge-to-edge even when the panel is open.
- The chevron handle can now be dragged open/closed, including via edge-swipe from the bezel. Tap still toggles. Drag tracks the finger; a flick (~200pt/s) commits; midpoint release snaps to the nearer edge.
- Fixed a ~10pt drag wobble caused by the gesture measuring translation in its own local frame — which was itself being translated by the offset the gesture produced. Anchoring to
.globalbreaks the feedback loop.
Implementation notes
-
SidePanelMetrics.panelWidthis the single source of truth for the panel's trailing inset. -
PlaygroundScreencarves out the trailing edge with.safeAreaPadding(.trailing:)on its content region and publishes the inset to descendants viaEnvironmentKey(PlaygroundSidebarInsetKey). -
ScaleBuilderExercisereads the env inset and applies a negative trailing padding on its docked keyboard region to cancel the ancestor inset, keeping the keyboard full-width while the card above shrinks. - Merged the previous
.onTapGesture+DragGesturepair into a singleDragGesture(minimumDistance: 0)that dispatches tap vs. flick vs. midpoint in.onEnded, eliminating tap/drag race conditions.
Test plan
-
Home → Keyboard (contained): open panel, keyboard recenters in the left region; close, recenters in full viewport. -
Home → Keyboard (docked): open panel, docked keys stay edge-to-edge; play button / labels above shift left. -
Oscillator / Shaper / Interval tools: open panel, card shifts left smoothly. -
Scale Builder (playground): open panel, glass card shifts left; docked keyboard stays edge-to-edge. -
Scale Builder (lesson, 2-ex4.json): no panel, unchanged. -
Tap chevron: toggles open/closed with spring animation. -
Edge-swipe from right bezel (panel closed): drags panel open under finger. -
Slow-drag handle near midpoint: handle pixel-locks to finger, no wobble. -
Flick left then release: commits open even if release is short of midpoint. -
Release at midpoint with no velocity: snaps to nearer edge. -
Scroll configurator content vertically while panel is open: scrolls normally. -
Navigate away with panel open: slides closed in sync with nav animation.