# Handoff: Roover Takeoff Lite — 2026 redesign

A reskin of **Takeoff Lite** in the Roover visual system (forest ink, warm
parchment, single amber signal, blueprint grid, Inter). Two surfaces:

1. **Roof Job Brief** — the redesigned pricing pack. *The priority deliverable.*
2. **Takeoff Workbench (Atlas)** — the dark pro-instrument editor that produces it.

All function, data, and copy are preserved — this is a visual + structural reskin
built on the live code (`roover-takeoff-lite`, branch `end-to-end-nearmap-mvp`).

## What's in this bundle
- `CODEX_PROMPT.md` — copy/paste prompt for Codex.
- `prototype/Roof Job Brief.html` — the product. Open this first.
- `prototype/Takeoff Workbench.html` — the editor cockpit.
- `prototype/Takeoff Lite — Redesign.html` — launcher framing the pipeline.
- `prototype/takeoff-redesign/` — prototype source:
  - `engine.js` — synthetic roof on the **real feature grammar** (13 line classes,
    6 polygon types, 9 point types), measurement math, BOQ builder, QA/evidence.
  - `shared.jsx` — icons, the classified roof `RoofCanvas`, the `useEditor` hook.
  - `pricingpack.jsx` / `pricingpack.css` — the Roof Job Brief.
  - `atlas.jsx` / `atlas.css` — the workbench.
- `drop-in/roover-takeoff-2026.css` — token layer to import into `globals.css`.

## File map (where each piece lands in the real repo)
| Prototype piece | Real file |
|---|---|
| Token layer | new `src/styles/roover-takeoff-2026.css`, imported in `src/app/globals.css` |
| **Roof Job Brief** | `src/app/pricing-pack/[jobId]/PricingPackView.client.tsx` |
| Pack builder (unchanged) | `src/lib/pricingPack.ts` · `src/lib/boq.ts` |
| Workbench shell | `src/app/takeoff/[jobId]/TakeoffEditor.client.tsx` |
| Tool rail (replaces top Toolbar) | `src/components/canvas/Toolbar.tsx` |
| Floating inspector (replaces docked) | `src/components/canvas/FeatureEditor.tsx` |
| QA + routing + globals | `src/components/canvas/QAChecklist.tsx` · `GlobalControls.tsx` |
| Canvas (reuse, restyle around) | `src/components/canvas/CanvasEditor.tsx` |
| Line colours / names (source of truth) | `src/lib/featureStyles.ts` |
| State / selectors (unchanged) | `src/lib/editorState.ts` · `src/lib/geometry.ts` |

---

## ROOF JOB BRIEF — section spec
Rebuild `PricingPackView.client.tsx` to match `Roof Job Brief.html`. Keep every
value sourced from `buildPricingPack()` / the `pack.*` object. Sections (the
existing 16 + intake block), restyled:

- **Masthead** (forest-ink, blueprint grid): mark · "Internal BOQ package ·
  pricing-stage" eyebrow · `suburb · postcode` H1 · `job_type` + `current → proposed`
  material · **lane chip** · fact strip = `total_surface_area_m2`,
  `roof_install_area_with_waste_m2` (+waste), structures count, `storeys`, pitch.
- **Sticky contents rail** + **gate status** from `canExportToRoofers()`. Print-hidden.
- **00 · Homeowner intent & evidence** (`pack.intake_evidence`): the
  `homeowner_note` as a pull-quote; `scope_card` / `desired_material` /
  `adjacent_work_scope` / `solar_handling` / `access_concerns`; property context
  (`zoning_label`, `wind_region`, `heritage_flag`, `bushfire_prone`,
  `tree_overhang_ratio`, scan freshness); included/excluded **structures** with areas;
  **fixtures** (solar_pv/skylights/chimneys/antennas…) with handling notes;
  `missing_fields` callout.
- **01 Job snapshot** · **02 Measurement readiness** (`why_priceable_remotely`) ·
  **03 Scope summary** (`scope_summary` + `job.notes`).
- **04/05/06** `base_spec` / `exclusions` / `separate_or_optional` — colour-topped
  tri-cards (green / red / neutral).
- **07 Measurement diagram** — render `takeoff.features` as a classified SVG trace
  with a legend (ridge/hip/valley/eave/gutter…). The real app has the geometry —
  replace the "no image bundled" placeholder with an actual diagram. Use the line palette.
- **08 Area · length · slope** — dark area-hero (`total_surface_area_m2` big) + a
  linears grid using the `--tk-*` swatches; `area_by_pitch` chips.
- **09 BOQ** — grouped (Area/Linears/Objects/Allowances). Every row shows a
  **confidence chip** (high=Verified, medium=To check, low=Assumed). `source==="assumption"`
  and `!included` rows get tags. Keep `item_name`, `quantity`, `unit`, `notes`.
- **11 Base spec** · **10 Access** · **12 Assumptions** · **13 Gutters/solar/extras**.
- **14 Your price** — the roofer's action area: money fields ($ prefix), accept-spec +
  site-visit checks, exclusions / allowances / solar handling / gutter option,
  homeowner-facing note, "Submit price". Keep it gated/disabled until the export gate clears.
- **15 Next steps** (`what_happens_after_submission`) · **16 Pack status** (`gate`).
- Keep **Print/PDF** (`window.print()`) and `-webkit-print-color-adjust:exact` on the masthead.

## TAKEOFF WORKBENCH (Atlas) — spec
Match `Takeoff Workbench.html`. Dark cockpit (`--tk-cockpit #0C231B`):
- **Command bar**: back · mark · job title/meta · ⌘K command affordance · centered
  **route pill** (`selectExportGate` → green/amber/red) · save-state pill · Preview pack.
- **Left 56px icon tool rail** (replaces the top `Toolbar`): Select/Polygon/Line/Point
  (keys 1–4 already wired) · undo/redo · snap · trace · image filters · delete. Tooltips.
- **Canvas** on the dark surface (reuse `CanvasEditor`'s real mapbox/draw — restyle only):
  floating glassy **line-class dock** (top, all 13 classes; reclassify selection or set
  draw class), floating **inspector** card (top-right, replacing the docked `FeatureEditor`)
  with the full field set (type/reclassify, label, source, confidence, pitch, building,
  `length_basis` + slope/override, `include_in_boq`, notes, delete), bottom status strip,
  bottom-right zoom.
- **Right rail** tabs Measure/BOQ/QA/Source: measure = area hero + linear bars + objects;
  BOQ = grouped table; QA = checklist + 3-way route decision + global controls (global
  pitch, waste, reviewer, QA status, lane override, mark-ready / route-to-full); source =
  evidence rows.

## Tokens (in `drop-in/roover-takeoff-2026.css`)
- **Ink** `#1A2A22` · ink-2 `#2A3D33` · muted `#5A6E64` · ghost `#7B8A80`
- **Paper** `#FFFFFF` · off `#F5F4EE` · warm `#FAF9F6` · line `#D9D3C4`
- **Amber** `#FFB54C` (signal only) · amber-ink `#8B5E3C` · amber-soft `#FFEFD4`
- **Lane / confidence**: green `#2D8B5E` · amber `#E0982F` · red `#D8323C`
- **Cockpit**: `#0C231B` base · panel `#102b21` · hairlines `rgba(255,255,255,0.08)`
- **Line palette** (= `featureStyles.ts`): ridge `#2F6DFF` · hip `#2D8B5E` · valley
  `#D8323C` · eave `#1A2A22` · rake `#7A5CFF` · gutter `#18B5C7` (dashed) · apron
  `#E0982F` · step `#C77DFF` (dashed) · parapet `#4338CA` · box_gutter `#0B8A9E` ·
  pitch_change `#DB2777` · wall_flashing `#9333EA` · other `#94A39B`.
  `--tk-*-d` variants are the on-dark (cockpit) versions. **Always pair colour with a label.**
- **Type** Inter (400–800). H1 ~44px/600/-0.025em; section titles 20px/650; eyebrows
  11px/700 uppercase; body 13–15px; numerals tabular.
- **Radii** card 16px · controls 9px · pills full. **Shadow** soft, forest-tinted.

## Notes
- No real address / Nearmap imagery in the prototype — synthetic roof. The brief's
  numbers are computed from that same roof so the diagram and BOQ agree.
- The workbench canvas in the prototype is a synthetic SVG; in the app, keep the real
  mapbox-gl-draw canvas and restyle the chrome around it.
- Keep the audit/override trail, persistence, and export gating exactly as they are.