Work through the mobile version (critical bugs) #5

Why

Real-phone testing (2026-06-11) showed the mobile version unusable; emulation / mobile-chromium e2e doesn't catch these. Needs a real-device pass: collect, triage, fix critical bugs.

Proposed solution

• Run basic scenarios on a real phone (iOS Safari + Android Chrome), file concrete bugs (area: ui / state / renderer-canvas).
• Triage critical/blocker vs minor; fix the critical/blockers.
• Touch gestures: tap / long-press / drag / pinch-zoom / two-finger pan — no conflicts, not lost during a drag.
• Narrow-screen layout (toolbar, palette, property-panel, floating link panel, context menu) — don't cover canvas, stay reachable.
• Finger-sized hit targets (dots/handles/buttons).
• Extend mobile-chromium e2e to catch the regressions found.
• Library looks awkward on a phone — UX/design, separate task (needs mockup).
• [~] Property-panel ⋮ expands a sheet upward (overflow as grid) — toggle + grid exist; tap-outside / grabber-swipe to collapse not yet there.
• Manual check on a device (verified against code 2026-06-14).

Done criterion: basic scenarios work on a real phone (open/load, pan/zoom, create/select/move, draw+bind link, open panels); all critical/blocker bugs closed; manual verification on device required.

Property-panel on mobile (design APPROVED 2026-06-12): narrow screen → panel pinned to BOTTOM (bottom sheet), not floating by element. Switch in SelectionFloatingPanel (floating↔sheet) by media-query (pointer:coarse OR width < ~640px, via useMobileLayout → .du-sel-panel-dock); PropertyPanel controls marked primary|overflow and reused. Frequent/⋮ split (approved):

• Shape: frequent Fill·Stroke·Width; ⋮ Dash·Roundness·Opacity·Layer·Link·Dup·Delete.
• Text: frequent Size·Color·Alignment; ⋮ Font·Bold/strike·Layer·Link·Dup·Delete.
• Link: frequent Color·Width·Arrowhead(end); ⋮ Dash·Routing·LineKind·Arrowhead(start)·Auto·Delete.

Where in code: packages/state/src/editor/pointer-binding.ts — touch/pointer gestures; editor/pinch.ts, editor/long-press.ts; packages/react-ui/src/* — responsive panels/toolbar/popover; apps/diagram/* — demo wrapper, viewport meta, responsive layout; apps/e2e — mobile-chromium project.

Kind: feature

Alternatives / Notes

• No data-model changes — UX/interaction/layout only. Check hi-DPI / scaling on mobile canvas2d/webgl2. Mobile needs its own layout, not a scaled desktop one. Coordinate layer pinned by scene/tests/viewport-transform-matrix, state/tests/pinch, state/tests/dom-events-coords, renderer-canvas/tests/canvas-target-dpr.
• Fixed: selection-frame/overlay drawn without DPR scaling (Canvas2DTarget.setTransform clobbered DPR base; viewport-meta user-scalable=no) 64af7d0; input steals focus/hotkeys while typing (shared isEditableTarget incl. contenteditable in hotkeys.ts) 879ec8e; one-finger canvas pan 20b2171; library→canvas drag as tap-to-place on coarse-pointer 20761ec. Done: bottom-sheet on narrow/touch, floating on fine-pointer; safe-area-inset-bottom + targets ≥44px (styles.css .du-sel-panel-dock, .du-sel-panel-mobile .du-sel-icon-button).