Implement Atlas Controls

[PauloMFJ]

Implement Atlas Controls

Adds the floating control chrome for the Atlas (tldraw) canvas — a zoom control, export button, and a tool palette — plus the supporting design-system pieces (icons, tokens, typography, a Button size variant).

Controls component

• New scopes/atlas/components/controls.tsx + .module.scss, rendered through tldraw's InFrontOfTheCanvas slot so it reads live editor state via useEditor while staying out of the canvas transform.
• Zoom: in/out buttons + a live zoom readout. The displayed value is rescaled from the real zoom range onto a friendlier 0–200 scale via a new mapRange helper, and steps by a constant amount.
• Tool palette: Select / Pan / Text, bound 1:1 to tldraw tool ids (select / hand / text), with the active tool highlighted.
• Export: button in place (wiring to the export flow is a follow-up — see TODO below).
• All three control groups are built on the shared Button element with per-state colorSchemes.

Atlas editor config

• New scopes/atlas/config.ts centralizes the zoom config: MIN_ZOOM / MAX_ZOOM and an evenly-spaced ZOOM_STEPS array generated from a single display-step value (keeps the on-screen increment constant), plus the display range.
• atlas.tsx now caps the camera zoom (setCameraOptions), styles the built-in text tool to match the design system, and tints the selection stroke from the accent token (updateThemes). Selection colours are also wired through --tl-color-* overrides in atlas.module.scss.

Design system

• Icons: cursor, hand, insert_text, minus, plus.
• Button: new required size prop ('small' | 'large') → data-size.
• Tokens (colors.json): added control-surface,
  control-surface-hover, control-accent, control-accent-content,
  control-content, and surface-content; renamed card-shadow → shadow.
• Typography: renamed the mixins onto a clearer Material-style scale —
  type-control → type-label-large, type-label → type-label-medium,
  type-tab → type-label-small (title / body unchanged); all usages
  updated.

Follow-ups

• Controls export button is a no-op (// TODO: Support export here) — needs wiring to the canvas export API.

Testing

• pnpm lint (type-check + Biome + Stylelint) and pnpm build pass.
• Verified controls render over the canvas; zoom in/out, tool switching, and active-tool highlighting work; selection stroke uses the accent colour.

[gemini-code-assist]

Code Review

This pull request introduces the 'Atlas' canvas feature, integrating tldraw to provide an interactive, camera-tracked workspace. It establishes a comprehensive set of reusable components, including a customizable Button, a loading Skeleton, and a flexible Card system supporting text and chart variants (with tabbed line-chart and table views powered by recharts). Additionally, the PR updates the frontend style guides to enforce category-first naming and flat-by-default folder structures, introduces several SVG icons, and adds utility functions and hooks for layout and resize handling. I have no feedback to provide as there are no review comments.

Important

The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.