@reekon-tools/boldr-cad 0.1.0 → 1.0.0

package/src/editor/project.ts

@@ -2,16 +2,21 @@ import { afterEdit, analyze } from '../app/edit';
 import { ed } from '../app/state';
 import { newPage } from '../model/demo';
 import { pushHistory } from '../model/history';
-import { deep } from '../model/ids';
+import { deep, uid } from '../model/ids';
+import { imageById } from '../model/images';
 import { roomGeom } from '../model/rooms';
 import { sessionState, onSessionReset } from '../model/session';
 import { settings, type Layers } from '../model/settings';
 import { roomValid } from '../model/sketch';
-import { allPages, page, saveSoon, SK, store } from '../model/store';
-import { cvs, fitView, mainT, requestDraw, s2w } from '../render/view';
+import type { Underlay } from '../model/types';
+import { allPages, page, planSK, saveSoon, store } from '../model/store';
+import { closeElevation } from './elevation';
+import { cvs, fitView, mainT, requestDraw, requestImageDraw, s2w, underlayH } from '../render/view';
 import { cancelTool, setTool } from '../tools/registry';
+import { fmtLen, followingHostUnits, hostUnits, setOwnUnits, type Unit } from '../units';
+import { openingHeights } from '../model/elevation';
 import { setMode } from './mode';
-import { closeKeypad, dismissConflict, refreshDrawerSoon, toast, updateCtx, updateStatus, updateTopBar } from './ports';
+import { closeKeypad, dismissConflict, openKeypad, refreshDrawerSoon, toast, updateCtx, updateStatus, updateTopBar } from './ports';
 
 /*
   The project panel's decisions, whatever draws it: pages (switch, add, duplicate, delete with a second tap to
@@ -25,6 +30,7 @@ onSessionReset(() => clearTimeout(pendingT));
 /** Show another page: its drawing, view and selection. */
 export function switchPage(id: string): void {
   if (id === store.curPageId) return;
+  closeElevation(); // the wall view is of this page's walls
   cancelTool(); closeKeypad(); dismissConflict();
   store.curPageId = id;
   ed.sel = []; ed.hover = null;
@@ -41,8 +47,8 @@ export function addPage(): void {
 }
 
 export function duplicatePage(): void {
-  const p = newPage(page().name + ' copy', deep(SK()));
-  p.underlay = page().underlay ? deep(page().underlay) : null;
+  const p = newPage(page().name + ' copy', deep(planSK()));
+  p.underlays = deep(page().underlays);
   store.project.pages.splice(store.project.pages.indexOf(page()) + 1, 0, p);
   switchPage(p.id);
   toast('Page duplicated');
@@ -52,7 +58,7 @@ export function duplicatePage(): void {
 export const deletePending = (): boolean => pj.pendingDelete === store.curPageId;
 
 export function deletePage(): void {
-  if (allPages().length <= 1) { toast('A project needs at least one page.'); return; }
+  if (allPages().length <= 1) { toast('A project needs at least one page.', { warn: true }); return; }
   if (pj.pendingDelete !== store.curPageId) {
     pj.pendingDelete = store.curPageId;
     refreshDrawerSoon();
@@ -79,7 +85,8 @@ export const LAYER_ROWS: [LayerKey, string, string][] = [
   ['dims', 'Driving dimensions', 'Blue chips that set sizes'],
   ['print', 'Print dimensions', 'Labels for the crew; never move geometry'],
   ['rooms', 'Spaces', 'Fill, name and area'],
-  ['annot', 'Markup', 'Pen, arrows, clouds and notes'],
+  ['cabinets', 'Cabinets', 'Their footprints, from each wall’s view'],
+  ['annot', 'Markup', 'Pen, arrows, shapes, clouds and notes'],
   ['showCons', 'Constraint icons', 'H, V, ∥, ⊥ badges'],
 ];
 
@@ -91,36 +98,79 @@ export function toggleLayer(k: LayerKey): void {
   requestDraw(); updateCtx(); refreshDrawerSoon(); saveSoon();
 }
 
-// ---- the page's underlay ----
+// ---- the page's photos and plans ----
 
-export function setUnderlayOpacity(v: number): void {
-  const u = page().underlay;
+/** The image being worked on: the one selected (or, if there's just one on the page, that one). */
+export function targetImage(id?: string): Underlay | undefined {
+  const ims = page().underlays;
+  if (id) return imageById(id);
+  const sel = ed.sel.find(x => x.type === 'underlay');
+  return sel ? imageById(sel.id) : ims.length === 1 ? ims[0] : undefined;
+}
+
+/** The steps an image's opacity takes (percent). */
+export const OPACITY_MIN = 10, OPACITY_STEP = 5;
+
+export function setUnderlayOpacity(id: string, v: number): void {
+  const u = imageById(id);
   if (!u) return;
   u.opacity = v;
-  requestDraw(); saveSoon();
+  requestImageDraw(); saveSoon();
+}
+
+/** How far an image turns (degrees, clockwise as seen, either way from upright), in steps of half a degree. */
+export const ROTATE_MAX = 180, ROTATE_STEP = 0.5;
+
+/** Turn an image about its middle: degrees clockwise as it's seen (0: upright). */
+export function setUnderlayRotation(id: string, deg: number): void {
+  const u = imageById(id);
+  if (!u) return;
+  // (-180, 180]: a whole turn either way is the same as none
+  const r = ((((deg + 180) % 360) + 360) % 360) - 180 || 0;
+  if (Math.abs(r) < 1e-9) delete u.rot; else u.rot = r === -180 ? 180 : r;
+  requestImageDraw(); saveSoon();
 }
 
-export function toggleUnderlayLock(): void {
-  const u = page().underlay;
+export function toggleUnderlayLock(id: string): void {
+  const u = imageById(id);
   if (!u) return;
   pushHistory();
   u.locked = !u.locked;
   afterEdit();
 }
 
-/** Calibrate the image: the Set scale tool (two points you know the distance between). */
-export function calibrateUnderlay(): void { setMode('annotate'); setTool('calib'); }
+/** Calibrate an image: the Set scale tool (two points you know the distance between), that image selected. */
+export function calibrateUnderlay(id?: string): void {
+  const u = targetImage(id);
+  setMode('annotate');
+  if (u) ed.sel = [{ type: 'underlay', id: u.id }];
+  setTool('calib');
+}
 
-export function removeUnderlay(): void {
-  page().underlay = null;
-  refreshDrawerSoon(); requestDraw(); saveSoon(); updateCtx();
+/** Take an image off the page (one undo step). */
+export function removeUnderlay(id: string): void {
+  if (!imageById(id)) return;
+  pushHistory();
+  page().underlays = page().underlays.filter(u => u.id !== id);
+  ed.sel = ed.sel.filter(x => !(x.type === 'underlay' && x.id === id));
+  afterEdit(); refreshDrawerSoon();
+}
+
+/** Bring an image in front of the others, or send it behind them (one undo step). */
+export function restackImage(id: string, to: 'front' | 'back'): void {
+  const ims = page().underlays, u = imageById(id);
+  if (!u || ims.length < 2) return;
+  pushHistory();
+  const rest = ims.filter(x => x !== u);
+  page().underlays = to === 'front' ? [...rest, u] : [u, ...rest];
+  afterEdit();
 }
 
 // ---- spaces ----
 
 /** The page's spaces with their floor area and perimeter (to inside wall faces), and the total area. */
 export function spaceSchedule(): { rows: { id: string; name: string; area: number; per: number }[]; total: number } {
-  const sk = SK(), rows = Object.entries(sk.rooms).filter(([, r]) => roomValid(sk, r)).map(([id, r]) => {
+  const sk = planSK(), rows = Object.entries(sk.rooms).filter(([, r]) => roomValid(sk, r)).map(([id, r]) => {
     const g = roomGeom(sk, r);
     return { id, name: r.name, area: g.area, per: g.per };
   });
@@ -129,7 +179,7 @@ export function spaceSchedule(): { rows: { id: string; name: string; area: numbe
 
 export function renameSpace(id: string, name: string): void {
   pushHistory();
-  SK().rooms[id].name = name.trim() || 'Space';
+  planSK().rooms[id].name = name.trim() || 'Space';
   afterEdit();
 }
 
@@ -144,7 +194,79 @@ export function setPreference<K extends 'unit' | 'denom' | 'wallH' | 'theme'>(k:
   afterEdit();
 }
 
-export function togglePreference(k: 'snapGrid' | 'autoCons'): void {
+/** The heights the Wall height setting offers in one tap (8', 9', 10'); anything else is Custom. */
+export const WALL_PRESETS = [96, 108, 120];
+/** The lowest and highest default wall height accepted. */
+const WALL_MIN = 72, WALL_MAX = 360;
+
+/**
+ * Settings → Wall height: the height of every wall that hasn't one of its own. Refused (and says why) below a door's
+ * or window's head on such a wall, or outside 6'–30'. Returns whether it was set.
+ */
+export function setDefaultWallHeight(v: number): boolean {
+  if (!(v >= WALL_MIN && v <= WALL_MAX)) { toast('Enter a wall height between ' + fmtLen(WALL_MIN) + ' and ' + fmtLen(WALL_MAX) + '.', { warn: true }); return false; }
+  const sk = planSK(), own = (lid: string) => sk.lines[lid]?.height != null;
+  const tallest = Math.max(0, ...Object.values(sk.openings).filter(o => !own(o.line)).map(o => openingHeights(o).head));
+  if (v < tallest - 1e-6) { toast('A door or window reaches ' + fmtLen(tallest) + '. Enter ' + fmtLen(tallest) + ' or more, or lower it first.', { warn: true }); return false; }
+  setPreference('wallH', v);
+  return true;
+}
+
+/** Settings → Wall height → Custom: any height, on the keypad. */
+export function editDefaultWallHeight(): void {
+  openKeypad({
+    title: 'Wall height', sub: 'Walls without their own height', initial: fmtLen(settings.wallH), selectAll: true, laser: true,
+    onDone: v => { setDefaultWallHeight(v); },
+  });
+}
+
+export type UnitChoice = 'account' | Unit;
+const UNITS_KEY = 'boldr-cad-units';
+
+/**
+ * Settings → Units: the editor's own units (ft-in, in, mm), or 'account' — the host's (BOLDR: the person's account
+ * settings). Remembered in this browser, so it sticks from drawing to drawing.
+ */
+export function setUnits(choice: UnitChoice): void {
+  const host = hostUnits();
+  if (choice === 'account') {
+    if (host) { settings.unit = host.unit; settings.denom = host.denom; }
+    setOwnUnits(false);
+  } else {
+    settings.unit = choice;
+    setOwnUnits(!!host);
+  }
+  rememberUnits();
+  afterEdit();
+}
+
+/** Settings → Precision (the editor's own inch units). */
+export function setPrecision(denom: number): void {
+  settings.denom = denom;
+  rememberUnits();
+  afterEdit();
+}
+
+function rememberUnits(): void {
+  if (!hostUnits()) return; // without a host the units are saved with the project
+  try {
+    localStorage.setItem(UNITS_KEY, JSON.stringify(followingHostUnits() ? 'account' : { unit: settings.unit, denom: settings.denom }));
+  } catch { /* no storage here: just this session */ }
+}
+
+/** Put back the units the person picked last time (after the host's units are set). */
+export function restoreUnits(): void {
+  if (!hostUnits()) return;
+  try {
+    const v = JSON.parse(localStorage.getItem(UNITS_KEY) || 'null') as 'account' | { unit?: string; denom?: number } | null;
+    if (!v || v === 'account' || !['ftin', 'in', 'mm'].includes(v.unit ?? '')) return;
+    settings.unit = v.unit as Unit;
+    if (v.denom === 4 || v.denom === 8 || v.denom === 16) settings.denom = v.denom;
+    setOwnUnits(true);
+  } catch { /* nothing remembered */ }
+}
+
+export function togglePreference(k: 'snapGrid' | 'autoCons' | 'toolTips'): void {
   settings[k] = !settings[k];
   updateCtx(); saveSoon();
 }
@@ -157,12 +279,19 @@ export function togglePreference(k: 'snapGrid' | 'autoCons'): void {
  */
 export function placeUnderlay(src: string, w: number, h: number): void {
   const T = mainT(), ww = (cvs.W / T.s) * 0.6, hh = (ww * h) / w;
-  const [cx, cy] = s2w(cvs.W / 2, cvs.H / 2);
-  page().underlay = { src, x: cx - ww / 2, y: cy + hh / 2, w: ww, h: hh, opacity: 0.6, locked: false };
+  let [cx, cy] = s2w(cvs.W / 2, cvs.H / 2);
+  // one already exactly there (the last one added): this one goes a little down and to the right, so both show
+  const step = 24 / T.s;
+  while (page().underlays.some(u => Math.abs(u.x + u.w / 2 - cx) < step / 2 && Math.abs(u.y - underlayH(u) / 2 - cy) < step / 2)) { cx += step; cy -= step; }
+  pushHistory();
+  const id = uid('img');
+  page().underlays.push({ id, src, x: cx - ww / 2, y: cy + hh / 2, w: ww, h: hh, opacity: 0.6, locked: false });
   settings.layers.underlay = true;
   setMode('annotate');
   setTool('aselect');
-  ed.sel = [{ type: 'underlay', id: 'u' }];
+  ed.sel = [{ type: 'underlay', id }];
   afterEdit();
-  toast('Image added. Drag the corners to size it, or use Set scale with two points you know. Lock it once it’s placed.');
+  toast(page().underlays.length > 1
+    ? 'Image added on top of the others. Drag the corners to size it, or Set scale with two points you know.'
+    : 'Image added. Drag the corners to size it, or use Set scale with two points you know. Lock it once it’s placed.');
 }

package/src/editor/selection.ts

@@ -1,9 +1,14 @@
+import { imageById } from '../model/images';
+import { linkName } from '../model/links';
 import { ed } from '../app/state';
-import { consLabel, lineDefined } from '../model/constraints';
+import { offersJobMeasurements } from './links';
+import { consLabel, lineDefined, measure } from '../model/constraints';
 import { drivingDim } from '../model/openings';
 import { roomGeom } from '../model/rooms';
 import { lengthDimOf, lineLen } from '../model/sketch';
-import { page, SK } from '../model/store';
+import { edgeLabel, edgeOf } from '../model/planGeom';
+import { faceLength } from '../model/wallfaces';
+import { planSK, SK } from '../model/store';
 import type { Sketch } from '../model/types';
 import { fmtArea, fmtLen } from '../units';
 
@@ -14,21 +19,53 @@ export function selInfo() {
   const circles = g('circle'), arcs = g('arc');
   return {
     points: g('point'), lines: g('line'), circles, arcs, cons: g('cons'), dims: g('dim'), rooms: g('room'),
-    openings: g('opening'), odims: g('odim'), notes: g('note'), image: g('underlay').length > 0, curves: [...circles, ...arcs], n: ed.sel.length,
+    openings: g('opening'), odims: g('odim'), oanchors: g('oanchor'), notes: g('note'), image: g('underlay').length > 0, curves: [...circles, ...arcs], n: ed.sel.length,
+    cabs: g('cab'), elevs: g('elev'),
+    /** wall edges picked on their own: '<line id>|<side>' (see edgeOf) */
+    wfaces: g('wface'),
   };
 }
 
+/**
+ * Two things the + measures between, at least one a wall's edge: a straight wall's edge with another one, a line or a
+ * point — or the two edges of one wall (its thickness), straight or curved.
+ */
+export function edgePair(s: ReturnType<typeof selInfo>): boolean {
+  if (s.n !== 2 || !s.wfaces.length) return false;
+  const ids = s.wfaces.map(w => edgeOf(w)[0]);
+  if (ids.length === 2 && ids[0] === ids[1]) return true;
+  return s.wfaces.length + s.lines.length + s.points.length === 2 && ids.every(id => !!SK().lines[id]);
+}
+
 /** The two lines meeting at a point, or null if it isn't a two-line corner (an end, or a junction of 3+). */
 export function cornerLines(sk: Sketch, pid: string): [string, string] | null {
   const ids = Object.keys(sk.lines).filter(id => sk.lines[id].a === pid || sk.lines[id].b === pid);
-  return ids.length === 2 ? [ids[0], ids[1]] : null;
+  // (a cabinet's corner isn't one: the cabinet is one object)
+  return ids.length === 2 && !sk.lines[ids[0]].cab && !sk.lines[ids[1]].cab ? [ids[0], ids[1]] : null;
 }
 
+/** What a line's + is for: its length — or, where the host lists them, one of the job's measurements. */
+const forLength = (): string => (offersJobMeasurements() ? 'for its length or a measurement of the job' : 'for its length');
+
 export function selectionHint(): string {
   const sk = SK(), s = selInfo();
+  if (s.n === 1 && s.cabs.length) return '<b>Cabinet</b> · drag it, or tap <b>+</b> for its width; its height, depth and height off the floor are below';
+  if (s.n === 1 && s.elevs.length) return '<b>Dimension</b> · tap <b>+</b> to set it';
+  if (s.n === 1 && s.lines.length && sk.lines[s.lines[0]]?.anchor) return '<b>Set by the plan</b> · pick a point or line too, to constrain or dimension to it';
   if (s.n === 1 && s.lines.length) {
     const l = sk.lines[s.lines[0]];
-    return '<b>' + (l.kind === 'wall' ? 'Wall' : l.constr ? 'Construction line' : 'Line') + ' ' + fmtLen(lineLen(sk, l)) + '</b> · ' + (lineDefined(ed.ana, l) ? 'fully defined' : lengthDimOf(sk, s.lines[0]) ? 'pick a constraint below or drag to adjust' : 'tap <b>+</b> below for its length, or pick a constraint');
+    return '<b>' + (l.kind === 'wall' ? 'Wall' : l.constr ? 'Construction line' : 'Line') + ' ' + fmtLen(lineLen(sk, l)) + '</b> · ' + (lineDefined(ed.ana, l) ? 'fully defined' : lengthDimOf(sk, s.lines[0]) ? 'pick a constraint below or drag to adjust' : 'tap <b>+</b> below ' + forLength() + ', or pick a constraint');
+  }
+  if (s.n === 1 && s.wfaces.length) {
+    const [id, side] = edgeOf(s.wfaces[0]);
+    // (a curved wall's: its diameter across it)
+    if (!sk.lines[id]) return '<b>' + edgeLabel(sk, id, side) + ' Ø ' + fmtLen(measure(sk, { type: 'diam', c: id, face: side })) + '</b> · tap <b>+</b> for its diameter';
+    return '<b>' + edgeLabel(sk, id, side) + ' ' + fmtLen(faceLength(sk, id, side)) + '</b> · tap <b>+</b> ' + forLength() + ', or pick another edge or a point to measure from it';
+  }
+  if (edgePair(s)) {
+    const one = s.wfaces.length === 2 && edgeOf(s.wfaces[0])[0] === edgeOf(s.wfaces[1])[0];
+    if (one) return '<b>Both edges of a wall</b> · tap <b>+</b> for its thickness';
+    return '<b>' + (s.wfaces.length === 2 ? 'Two edges' : 'An edge and ' + (s.points.length ? 'a point' : 'a line')) + '</b> · tap <b>+</b> for the distance between them';
   }
   if (s.n === 1 && s.points.length) {
     const name = cornerLines(sk, s.points[0]) ? 'Corner' : 'Point';
@@ -41,19 +78,28 @@ export function selectionHint(): string {
     return '<b>' + r.name + '</b> · ' + fmtArea(g.area) + ' · ' + fmtLen(g.per) + ' perimeter';
   }
   if (s.n === 1 && s.openings.length) {
-    const o = sk.openings[s.openings[0]];
+    const o = planSK().openings[s.openings[0]];
+    if (!o) return '';
     return '<b>' + (o.type === 'door' ? 'Door' : 'Window') + ' ' + fmtLen(o.w) + '</b> · ' + (drivingDim(o)
       ? 'locked by a dimension — tap it to change'
       : 'drag to slide it along the wall, or tap a distance to lock it');
   }
-  if (s.n === 1 && s.dims.length) { const c = sk.cons[s.dims[0]]; return c.layer === 'print' ? '<b>Print dimension</b> · drag to move the label' : '<b>' + consLabel(c) + '</b> · tap <b>+</b> to change it'; }
+  if (s.n === 1 && s.dims.length) {
+    const c = sk.cons[s.dims[0]];
+    if (c.layer === 'print') return '<b>Print dimension</b> · drag to move the label';
+    if (c.measurementRef) return '<b>' + consLabel(c) + '</b> · linked to <b>' + linkName(c.measurementRef) + '</b> · tap <b>+</b> to change it';
+    return '<b>' + consLabel(c) + '</b> · tap <b>+</b> to change it';
+  }
+  if (s.n === 1 && s.oanchors.length) return '<b>' + (planSK().openings[s.oanchors[0].split('|')[0]]?.type === 'door' ? 'Door' : 'Window') + ' edge</b> · pick a point, or another door or window, to measure from it';
   if (s.n === 1 && s.odims.length) {
     const part = s.odims[0].split('|')[1];
+    if (part === 'w') return '<b>' + (planSK().openings[s.odims[0].split('|')[0]]?.type === 'door' ? 'Door' : 'Window') + ' width</b> · tap <b>+</b> to change it';
     return part.startsWith('d:') ? '<b>Door/window dimension</b> · tap <b>+</b> to change it' : '<b>Distance to the wall end</b> · tap <b>+</b> to lock it';
   }
-  if (s.n === 1 && s.image) return page().underlay?.locked
+  if (s.n === 1 && s.image) return imageById(ed.sel[0].id)?.locked
     ? '<b>Image</b> · locked — tap Unlock to move or resize it'
     : '<b>Image</b> · drag to move · corners scale, side handles stretch';
+  if (s.n === 1 && s.notes.length && SK().notes.find(n => n.id === s.notes[0])?.type === 'link') return '<b>Link</b> · drag to move · open it, or point it at the drawing with a leader, below · Size sizes every tile on the page';
   if (s.notes.length) return 'Drag to move. Turn a pen stroke into lines below.';
   return '<b>' + s.n + ' selected</b> · choose a constraint below';
 }

package/src/editor/status.ts

@@ -2,6 +2,7 @@ import { ed } from '../app/state';
 import { SK } from '../model/store';
 import { tools } from '../tools/registry';
 import { selectionHint } from './selection';
+import { hint3d, is3d } from './view3dState';
 
 /** The definition-state pill: how many free movements are left, fully defined, empty, or a conflict. */
 export function statusPill(): { text: string; state: 'open' | 'full' | 'bad' } {
@@ -14,6 +15,7 @@ export function statusPill(): { text: string; state: 'open' | 'full' | 'bad' } {
 
 /** What to do next with the current tool or selection (bold parts in <b>). */
 export function currentHint(): string {
+  if (is3d()) return hint3d();
   const t = tools[ed.tool];
   let h = t && t.hint ? t.hint() : '';
   if ((ed.tool === 'select' || ed.tool === 'aselect') && ed.sel.length) h = ed.mode === 'draft' ? selectionHint() : t.hint!();

package/src/editor/tooltips.ts

@@ -0,0 +1,47 @@
+import { ed } from '../app/state';
+import { settings } from '../model/settings';
+
+/*
+  What a tool does, said in a line when it's picked from the rail (a quick note under the Annotate / Draft tabs that
+  goes by itself — not the step-by-step hint, which follows what you're doing).
+*/
+
+const TIPS: Record<string, string> = {
+  // Draft
+  select: 'Tap to pick, drag to move. Drag across space to pick several.',
+  line: 'Tap each point. Tap the last again to finish.',
+  freehand: 'Sketch it; it straightens when you lift.',
+  rect: 'Tap or drag corner to corner.',
+  circle: 'Tap the center, then the edge.',
+  arc: 'Tap both ends, then drag to bend.',
+  door: 'Tap a wall to add a 3\'-0" door.',
+  window: 'Tap a wall to add a 3\'-0" window.',
+  room: 'Tap inside a closed shape.',
+  dim: 'Tap an element to measure.',
+  // the wall view
+  wdoor: 'Tap the wall to add a door.',
+  wwindow: 'Tap the wall to add a window.',
+  cabinet: 'Tap the wall to add a cabinet.',
+  // Annotate
+  aselect: 'Tap to pick, drag to move.',
+  arrow: 'Drag toward what it points at.',
+  mline: 'Drag end to end.',
+  mrect: 'Drag corner to corner.',
+  mtri: 'Drag to size it.',
+  mcircle: 'Drag to size it.',
+  pen: 'Draw freehand.',
+  cloud: 'Drag around the area to flag.',
+  text: 'Tap where it goes, then type.',
+};
+
+/**
+ * The line for a rail item just picked (its name in bold), or null if it has none (Undo, a colour, an action) or the
+ * notes are turned off (••• → Tool tips).
+ */
+export function toolTip(id: string, label: string): string | null {
+  if (settings.toolTips === false) return null;
+  if (id === 'constr') return ed.drawConstr ? '<b>Construction lines on</b> · new lines are dashed guides.' : '<b>Construction lines off</b> · new lines are solid.';
+  if (id === 'wall') return ed.drawWalls ? '<b>Walls on</b> · what you draw is walls.' : '<b>Walls off</b> · what you draw is lines.';
+  const t = TIPS[id];
+  return t ? '<b>' + label + '</b> · ' + t : null;
+}

package/src/editor/view3d.ts

@@ -0,0 +1,119 @@
+import { ed } from '../app/state';
+import { openingHeights, wallHeight } from '../model/elevation';
+import { faceKeyParts } from '../model/faces';
+import { hyp } from '../model/geom';
+import { curveFrame } from '../model/planGeom';
+import { roomGeom } from '../model/rooms';
+import { settings } from '../model/settings';
+import { planSK, store } from '../model/store';
+import { requestDraw } from '../render/view';
+import { editWallHeight } from '../tools/elevation';
+import { cancelTool } from '../tools/registry';
+import { fmtArea, fmtLen } from '../units';
+import type { CtxEntry } from './actions';
+import { closeElevation, elevOpen, openElevation } from './elevation';
+import type { KeyIn } from './keys';
+import { setMode } from './mode';
+import { dismissConflict, dismissPopovers, refreshModes, updateCtx, updateHint, updateRail } from './ports';
+import { command3d, pick3d, v3 } from './view3dState';
+
+/*
+  The 3D tab: opening and leaving it, its rail's views, what the bar shows for something tapped in it (its sizes, the
+  wall's height to change, its wall view to open), and its keys. The plan stays as it was underneath: the 3D view is
+  made from it, and follows each change to it.
+*/
+
+/**
+ * What the 3D view shows, summed up as one string (it's drawn again when this changes): the page and its edits, the
+ * default wall height, the cutaway, a camera move asked for, and what's tapped.
+ */
+export const view3dKey = (): string =>
+  [store.curPageId, ed.editSeq, settings.wallH, v3.cutaway, v3.cmd.seq, v3.pick ? v3.pick.kind + ':' + v3.pick.id : ''].join('|');
+
+/** Show the 3D tab: whatever tool was in hand is put down, and nothing is selected. */
+export function open3d(): void {
+  if (v3.open) return;
+  cancelTool();
+  dismissPopovers();
+  if (elevOpen()) closeElevation();
+  ed.sel = []; ed.hover = null; ed.preview = null; ed.boxSel = null;
+  v3.open = true;
+  v3.pick = null;
+  refreshModes(); updateCtx(); updateHint(); updateRail();
+}
+
+/** Back to the plan (the tab picked next decides Draft or Annotate). */
+export function close3d(): void {
+  if (!v3.open) return;
+  v3.open = false;
+  v3.pick = null;
+  refreshModes(); updateCtx(); updateHint(); updateRail(); requestDraw();
+}
+
+/** A cabinet's sizes from its wall face: across, up, and out from the wall. */
+function cabinetSizes(pickId: string): { w: number; h: number; d: number } | null {
+  const [key, cid] = pickId.split('#'), face = planSK().faces?.[key], cb = face?.cabs?.[cid];
+  if (!face || !cb) return null;
+  const ps = [cb.bl, cb.br, cb.tr, cb.tl].map(p => face.points[p]);
+  if (ps.some(p => !p)) return null;
+  const xs = ps.map(p => p.x), ys = ps.map(p => p.y);
+  return { w: Math.max(...xs) - Math.min(...xs), h: Math.max(...ys) - Math.min(...ys), d: cb.depth };
+}
+
+/** The bar for what's tapped in the 3D view: what it is and its sizes, and what can be done with it from here. */
+export function bar3d(): CtxEntry[] {
+  const p = v3.pick, sk = planSK();
+  if (!p) return [];
+  const wallView: CtxEntry = { ic: 'elev', label: 'Wall view', act: 'wall3d' };
+  switch (p.kind) {
+    case 'wall': {
+      const l = sk.lines[p.id], A = l && sk.points[l.a], B = l && sk.points[l.b];
+      if (!A || !B) return [];
+      return [{ lbl: 'Wall · ' + fmtLen(hyp(B.x - A.x, B.y - A.y)) + ' long · ' + fmtLen(wallHeight(l)) + ' high' }, { ic: 'v', label: 'Height', act: 'height3d' }, wallView];
+    }
+    case 'curve': {
+      const f = curveFrame(sk, p.id);
+      return f ? [{ lbl: 'Curved wall · ' + fmtLen(2 * f.r) + ' across · ' + fmtLen(settings.wallH) + ' high' }] : [];
+    }
+    case 'opening': {
+      const o = sk.openings[p.id];
+      if (!o) return [];
+      const { sill, head } = openingHeights(o), door = o.type === 'door';
+      return [{ lbl: (door ? 'Door · ' : 'Window · ') + fmtLen(o.w) + ' × ' + fmtLen(head - sill) + (door ? '' : ' · sill ' + fmtLen(sill)) }, wallView];
+    }
+    case 'cab': {
+      const c = cabinetSizes(p.id);
+      return c ? [{ lbl: 'Cabinet · ' + fmtLen(c.w) + ' × ' + fmtLen(c.h) + ' · ' + fmtLen(c.d) + ' deep' }, wallView] : [];
+    }
+    case 'floor': {
+      const r = sk.rooms[p.id];
+      return r ? [{ lbl: r.name + ' · ' + fmtArea(roomGeom(sk, r).area) }] : [];
+    }
+  }
+}
+
+/** A press on the 3D bar. Whether it was one of its own. */
+export function run3d(act: string): boolean {
+  const p = v3.pick, sk = planSK();
+  if (!p) return false;
+  if (act === 'height3d' && p.kind === 'wall') { editWallHeight(p.id); return true; }
+  if (act !== 'wall3d') return false;
+  // its wall straight on, from the side it was tapped on (a door's or window's: from its room)
+  const at = p.kind === 'wall' ? { lid: p.id, side: p.side } : p.kind === 'opening' ? { lid: sk.openings[p.id]?.line, side: undefined }
+    : p.kind === 'cab' ? faceKeyParts(p.id.split('#')[0]) : null;
+  if (!at?.lid || !sk.lines[at.lid]) return true;
+  close3d();
+  setMode('draft');
+  openElevation(at.lid, at.side);
+  return true;
+}
+
+/** A key while the 3D tab shows (after the keypad's, undo's and save's): Esc lets go of what's tapped, F frames all. */
+export function key3d(e: KeyIn): boolean {
+  if (e.key === 'Escape') {
+    if (!dismissConflict() && !dismissPopovers() && v3.pick) pick3d(null);
+    return false;
+  }
+  if (e.key.toLowerCase() === 'f') command3d('fit');
+  return false;
+}

package/src/editor/view3dState.ts

@@ -0,0 +1,61 @@
+import { sessionState } from '../model/session';
+import type { Orbit } from '../view3d/camera';
+import type { PartKind } from '../view3d/mesh';
+import { refreshModes, updateCtx, updateHint, updateRail } from './ports';
+
+/*
+  The 3D tab's state (beside Annotate and Draft): open or not, the cutaway, what's been tapped, and the camera, kept
+  while the tab is left so coming back finds the model as it was. Nothing here needs three.js: the viewer
+  (react/View3D*) reads it, and the bar and keys change it (editor/view3d.ts). The tab has no rail.
+*/
+
+/** Something tapped in the 3D view. `side`: a straight wall's face that was tapped (+1 the left of its A → B). */
+export interface Pick3 { kind: PartKind; id: string; side?: 1 | -1 }
+
+/** Camera moves asked for from outside the view: frame everything, the corner view, or straight down. */
+export type Command3 = 'fit' | 'reset' | 'top';
+
+export const v3 = sessionState(() => ({
+  open: false,
+  /** the walls in front drop low, so the rooms can be seen into */
+  cutaway: false,
+  pick: null as Pick3 | null,
+  /** where the camera is, and the page it was for (another page starts from the corner view) */
+  orbit: null as Orbit | null,
+  orbitPage: '',
+  /**
+   * the view the camera was put at, while it hasn't been moved from it (null once it has): framed again when the
+   * screen changes shape, so a device turned on its side still shows everything
+   */
+  framed: null as Command3 | null,
+  /** the last camera move asked for; the viewer follows each new seq */
+  cmd: { seq: 0, what: 'fit' as Command3 },
+}));
+
+/** Whether the 3D tab is the one showing. */
+export const is3d = (): boolean => v3.open;
+
+/** The walls in front drop low, or stand to full height again. (No button for it: the 3D tab's rail is gone.) */
+export function toggleCutaway(): void {
+  v3.cutaway = !v3.cutaway;
+  updateRail(); updateHint();
+}
+
+/** Move the camera: frame everything, the corner view, or straight down. */
+export function command3d(what: Command3): void {
+  v3.cmd = { seq: v3.cmd.seq + 1, what };
+  refreshModes();
+}
+
+/** What a tap in the 3D view landed on (null: nothing). Its sizes go in the bar. */
+export function pick3d(p: Pick3 | null): void {
+  v3.pick = p;
+  updateCtx(); updateHint();
+}
+
+/** The hint for screen readers while the 3D tab shows. */
+export function hint3d(): string {
+  return v3.pick
+    ? 'Its sizes are in the bar. Tap something else, or empty space to let go.'
+    : 'Drag to turn the model. Pinch or scroll to zoom; drag with two fingers or the right mouse button to move it. Tap a wall, a door or a cabinet to see its sizes.';
+}

package/src/export/dxf.ts

@@ -9,7 +9,7 @@ import { emitDrawing, exportFileName, type DrawOptions, type Plan } from './plan
 
 const LAYERS: [name: string, color: number][] = [
   ['WALLS', 7], ['LINES', 7], ['CONSTRUCTION', 8], ['DOORS', 4], ['WINDOWS', 4],
-  ['SPACES', 3], ['DIMENSIONS', 5], ['MARKUP', 6],
+  ['SPACES', 3], ['DIMENSIONS', 5], ['MARKUP', 6], ['CABINETS', 8], ['CABINETS_UPPER', 8], ['LINKS', 150],
 ];
 
 class Dxf implements Plan {