basket-utils — UI redesign

2026-09-07

Reference projects

CoachCanvas: concise basketball product presentation, neutral surfaces, a clear primary action, and court-centered authoring. Its public website and welcome screen were inspected; no account was created and no assets were copied.
tldraw UI components: separation of canvas, tool palette, property panel and navigation; properties move into a popover on mobile. This project uses the layout principles, not its SDK.
../network_dashboard/web/src/styles.css: local reference for light surfaces, restrained borders, semantic color tokens and compact application controls.
../arena/src/styles/base.css and game-ui.css: local reference for a dark central scene with unobtrusive tools. No files in either project were changed.

Warm white shell, dark evergreen canvas, terracotta primary actions, muted blue defense markers, procedural timber court.
Court overlays use deep blue (#174a7e) movement lines and deep purple (#5b2a83) dashed pass arrows to contrast with the timber surface. Team marker colors remain independent of action colors.
Header prioritizes identity, document name and save; setup, load, file operations and debug data live in the project menu.
Left column shows lineup and possession. Right column shows action list and only exposes properties when an action is selected.
Floating court tools use a consistent original SVG icon set and text labels. View controls stay at the top of the canvas.
Playback occupies its own bottom deck. Step thumbnails derive from the actual sequence starting positions and action counts.
Tactical view uses flat player markers and a diagram hoop. Physical hoop, backboard and articulated avatars remain available in Player POV.
Phone portrait uses switchable panels. Landscape puts panel navigation on the left and action tools on the right.

src/ui.js: markup, SVG icons and data-driven step thumbnails.
src/style.css: design tokens, components and responsive layouts; replaces the earlier dark-dashboard stylesheet.
src/main.js: existing editing handlers remain connected to the new layout; project menu dismissal and contextual properties.
src/scene.js: procedural court material, team palette, flat markers and view-specific hoop representation.

Existing 91 tests pass; production build succeeds. Existing Three.js bundle-size warning remains.
Browser inspection: 1440×1000 desktop, 390×844 portrait, 844×390 landscape.
Verified action selection, gaze updates, playback, pause, menu opening and Escape dismissal; no browser errors observed.
Landscape document dimensions match the viewport without horizontal or vertical overflow.
Visual assets were authored in code. No reference screenshots, product logos or proprietary illustrations are embedded.