Overview

Match the shared React Vite measurement design: a header and engineering ribbon sit above Canvas, while a collapsible sidebar contains active scale, calibration, and scale-calculator controls. In NPM mode, use documented scale snapshots and calibration events rather than the reference project’s older call shapes.

• Measurement guide
• Scale API
• Calibration API

Keep Canvas primary. The sidebar exposes scale state and forms; a floating banner appears only while the operator is picking a reference line.

• Header: sidebar toggle, document URL and Open action, connection status.
• Ribbon: Select, Length, Area, and Path; measurement actions stay disabled until a scale snapshot confirms an active scale.
• Active-scale card: selected label, system, precision, and calibrated or uncalibrated state from the latest snapshot.
• Calibrate tab: Start, Cancel, picked-line feedback, Metric or Imperial input form, Calculate, candidate preview, and Apply.
• Calculator tab: metric or imperial ratio inputs and preset ratios that create a complete NPM scale with isSelected: true.
• Scale library: render snapshot scales; selecting a row re-adds a complete known scale with isSelected: true, then waits for a snapshot. Delete applies only to host-owned local presets.

Follow this order to avoid measurements based on an unconfirmed scale.

• 1Open the intended drawing and retain its active file index.
• 2Subscribe to scale snapshots and read the current scale before enabling tools.
• 3Open the calibration sidebar when no confirmed active scale is available or when the operator requests an update.
• 4Add a validated manual scale or run the guided calibration state machine.
• 5Wait for the NPM scale snapshot that confirms the active scale.
• 6Enable the appropriate measurement tool, then review, save, export, or extract measurements through documented APIs.
• 7Clear workflow-specific state when changing drawings, cancelling calibration, or unmounting.

Use these pages to implement the NPM takeoff workflow.