@reekon-tools/boldr-cad 0.1.0 → 1.0.0

package/src/render/elevation.ts

@@ -1,52 +1,36 @@
-import { ed } from '../app/state';
-import { elevLines, elevLineUZ, elevOpenings, toU, type ElevFrame, type ElevOpening } from '../model/elevation';
-import { edgeS, openingSpan, pickBetween, refS, sameRef } from '../model/openings';
-import type { OpeningDim, OpeningEdge, OpeningRef, Sketch } from '../model/types';
+import { ed, isSel } from '../app/state';
+import { measure } from '../model/constraints';
+import { elevOpenings, toU, type ElevFrame, type ElevOpening } from '../model/elevation';
+import { cabPoints, cornerAnchor, emptyFace, openingAnchor } from '../model/faces';
+import { edgeS, openingSpan, pickBetween, refS, sameRef, widthEntered } from '../model/openings';
+import type { Constraint, OpeningDim, OpeningEdge, OpeningRef, Sketch, WallFace } from '../model/types';
 import { fmtLen } from '../units';
-import { chip } from './draw';
+import { chip, linkBlue, linkMark } from './draw';
 import { FONT, TH } from './theme';
 import { S, type Xform } from './view';
 import type { DrawCtx } from './ctx';
 
 /*
-  Draws a wall elevation (see model/elevation.ts): u along the wall to the right, z up from the floor.
-  The same Xform/S() as the plan, fed (u, z) instead of (x, y). Dimensions are tappable: drawElevation returns their hit boxes.
+  How the wall view draws a wall face (see model/elevation.ts and model/faces.ts): x across the wall as seen, y up
+  from the floor, through the plan's Xform. Under what's drawn on the face: the wall itself, the walls cut at its
+  corners, its doors, windows and cabinets. Over it: the dimensions doors, windows and cabinets get on their own —
+  the strings along the floor, heights beside them, the wall's height and length — all tappable.
 */
 
 type C2D = DrawCtx;
 
-/** Elevation view: centre (u, z) and pixels per inch. */
-export interface ElevView { cu: number; cz: number; s: number }
-
-export const elevT = (v: ElevView, W: number, H: number): Xform => ({ s: v.s, ox: W / 2 - v.cu * v.s, oy: H / 2 + v.cz * v.s });
-
-/** Screen room taken by dimensions around the wall, pixels: below the floor, right of the face. */
-const DIM_BELOW = 92, DIM_RIGHT = 70, PAD = 36;
-
-/**
- * Fit the wall to a W × H view, leaving pixel margins for the dimensions and for anything overlaid
- * (`keep`: space taken at the top or the right, e.g. the key plan).
- */
-export function elevFit(f: ElevFrame, W: number, H: number, keep: { top?: number; right?: number; left?: number; bottom?: number } = {}): ElevView {
-  const u0 = Math.min(f.face[0], ...f.strips.map(s => s[0])), u1 = Math.max(f.face[1], ...f.strips.map(s => s[1]));
-  const w = u1 - u0, h = f.H, top = keep.top || 0, right = Math.max(DIM_RIGHT, keep.right || 0), left = keep.left || 0, below = DIM_BELOW + (keep.bottom || 0);
-  const s = Math.max(0.05, Math.min((W - 2 * PAD - right - left) / (w || 1), (H - 2 * PAD - below - top) / (h || 1)));
-  // centre the drawing in the space left after the margins
-  return { s, cu: (u0 + u1) / 2 + (right - left) / 2 / s, cz: h / 2 - (below - top) / 2 / s };
-}
-
-/** What tapping an elevation dimension does. */
+/** What tapping one of the wall view's dimensions does (stored as JSON in the selection and the tap targets). */
 export type ElevAct =
   | { k: 'w' | 'sill' | 'h'; op: string }
   | { k: 'wallH' }
   | { k: 'len' }
-  /** an opening itself: tap to select, drag to move */
-  | { k: 'body'; op: string }
-  /** a corner of the wall face (its left or right edge as seen): tap to select */
-  | { k: 'corner'; end: 'a' | 'b' }
-  /** a line drawn on the face (picked by distance, not by a box) */
-  | { k: 'eline'; id: string }
-  | { k: 'pos'; op: string; edge: OpeningEdge; ref: OpeningRef; title: string };
+  | { k: 'pos'; op: string; edge: OpeningEdge; ref: OpeningRef; title: string }
+  /** a dimension on the face (a constraint of its sketch) */
+  | { k: 'fdim'; id: string }
+  /** a distance nothing sets yet between two face points (grey): entering it makes it a face dimension */
+  | { k: 'gap'; a: string; b: string; kind: 'h' | 'v'; title: string }
+  /** a cabinet's depth (out from the wall: it shows in the plan) */
+  | { k: 'depth'; cab: string };
 export interface ElevHit { x: number; y: number; w: number; h: number; act: ElevAct; /** chip colour: drive (blue), ref, free (grey), bad (red) */ look?: string }
 
 /**
@@ -58,27 +42,15 @@ const LOOK = (look: Look) => look === 'drive' ? { bg: TH.blue, fg: '#fff', line:
   : look === 'linked' ? { bg: TH.bg, fg: linkBlue(), line: linkBlue() }
   : look === 'ref' ? { bg: TH.ref, fg: TH.reftext, line: TH.chipline } : { bg: TH.chip, fg: TH.ink, line: TH.ink2 };
 
-/** Blue for outlined (linked) chips: the lighter blue on a dark canvas, so the text stays readable. */
-function linkBlue(): string {
-  const m = /^#?([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})/i.exec(TH.bg);
-  const dark = !!m && (parseInt(m[1], 16) * 299 + parseInt(m[2], 16) * 587 + parseInt(m[3], 16) * 114) / 1000 < 128;
-  return dark ? TH.lblue : TH.blue;
-}
-
-/** A small chain-link mark centred on (x, y). */
-function linkMark(c: C2D, x: number, y: number, color: string): void {
-  c.save();
-  c.translate(x, y); c.rotate(-Math.PI / 4);
-  c.strokeStyle = color; c.lineWidth = 1.4;
-  c.beginPath(); c.roundRect(-6.5, -2.25, 7.5, 4.5, 2.25); c.roundRect(-1, -2.25, 7.5, 4.5, 2.25); c.stroke();
-  c.restore();
-}
-
 /**
  * Linear dimension between screen points p and q, its line offset by (nx, ny) pixels: ticks, extension lines and
  * the value chip. Returns the chip's box (for taps). `force` draws the chip even for a zero-length dimension.
  */
-function dim(c: C2D, p: [number, number], q: [number, number], nx: number, ny: number, label: string, look: Look = 'free', force = false, selected = false): Omit<ElevHit, 'act'> | null {
+/**
+ * A dimension: extension lines, the dimension line with 45° ticks, the chip. `dashed`: a number that holds nothing (only
+ * measured, or a reference) — its dimension line dashed and its value in parentheses, as in the plan.
+ */
+function dim(c: C2D, p: [number, number], q: [number, number], nx: number, ny: number, label: string, look: Look = 'free', force = false, selected = false, dashed = false): Omit<ElevHit, 'act'> | null {
   const len = Math.hypot(q[0] - p[0], q[1] - p[1]);
   if (len < 2 && !force) return null;
   const a = [p[0] + nx, p[1] + ny], b = [q[0] + nx, q[1] + ny], L = Math.hypot(nx, ny) || 1, st = LOOK(look);
@@ -87,7 +59,11 @@ function dim(c: C2D, p: [number, number], q: [number, number], nx: number, ny: n
   c.beginPath();
   for (const [o, e] of [[p, a], [q, b]]) { c.moveTo(o[0] + (nx / L) * 4, o[1] + (ny / L) * 4); c.lineTo(e[0] + (nx / L) * 5, e[1] + (ny / L) * 5); }
   if (len >= 2) {
-    c.moveTo(a[0], a[1]); c.lineTo(b[0], b[1]);
+    if (dashed) {
+      c.stroke(); c.beginPath(); c.setLineDash([3, 3]);
+      c.moveTo(a[0], a[1]); c.lineTo(b[0], b[1]);
+      c.stroke(); c.beginPath(); c.setLineDash([]);
+    } else { c.moveTo(a[0], a[1]); c.lineTo(b[0], b[1]); }
     // 45° architectural ticks
     const ux = (b[0] - a[0]) / len, uy = (b[1] - a[1]) / len;
     const tx = (ux + nx / L) * 4, ty = (uy + ny / L) * 4;
@@ -96,7 +72,8 @@ function dim(c: C2D, p: [number, number], q: [number, number], nx: number, ny: n
   c.stroke();
   c.restore();
   const cx = (a[0] + b[0]) / 2 + (len < 2 ? (nx / L) * 4 : 0), cy = (a[1] + b[1]) / 2 - (len < 2 ? 12 : 0), h = 20;
-  const linked = look === 'linked', text = look === 'ref' ? '(' + label + ')' : linked ? '\u2007\u2007' + label : label; // (figure spaces: room for the link mark)
+  // a number that holds nothing (dashed) reads in parentheses, as in the plan
+  const linked = look === 'linked', text = dashed ? '(' + label + ')' : linked ? '  ' + label : label; // (figure spaces: room for the link mark)
   const w = chip(c, text, cx, cy, { bg: st.bg, fg: st.fg, font: '600 11.5px', h, pad: 6, border: selected ? [TH.yellow, 2] : linked ? [st.line, 1.5] : null });
   if (linked) linkMark(c, cx - w / 2 + 11, cy, st.fg);
   return { x: cx - w / 2 - 4, y: cy - h / 2 - 4, w: w + 8, h: h + 8 };
@@ -135,113 +112,345 @@ function drawOpening(c: C2D, T: Xform, o: ElevOpening): void {
   c.restore();
 }
 
-/** Draw the elevation of frame `f` into a W × H (CSS pixel) canvas context. */
-/** `selected`: the selected dimension's action (JSON), drawn with the yellow selection border. */
-export function drawElevation(c: C2D, W: number, H: number, v: ElevView, sk: Sketch, f: ElevFrame, selected: string | null = null): ElevHit[] {
-  const T = elevT(v, W, H);
-  c.fillStyle = TH.bg; c.fillRect(0, 0, W, H);
-  const [fx0, fyTop] = S(T, f.face[0], f.H), [fx1, fyBot] = S(T, f.face[1], 0);
+/** A cabinet's tint and panel lines: neutral grey (no yellow — that's the selection's), against a window's blue glass. */
+const WOOD = 'rgba(128,128,128,.14)', WOOD_LINE = 'rgba(128,128,128,.9)';
+
+/**
+ * A cabinet, as cabinetry is drawn in elevation: a wood-tinted box, a drawer across its top with a pull, and a door
+ * below it with a handle — so it reads as a cabinet at a glance, not a window. Its name and size sit on the door.
+ */
+function drawCabinet(c: C2D, T: Xform, x: number, y: number, w: number, h: number, name: string): void {
+  const pad = Math.min(1.5 * T.s, w / 10, h / 10), drawer = Math.min(6 * T.s, h * 0.24);
+  c.save();
+  c.fillStyle = TH.bg; c.fillRect(x, y, w, h);
+  c.fillStyle = WOOD; c.fillRect(x, y, w, h);
+  c.strokeStyle = TH.ink; c.lineWidth = 1.5; c.strokeRect(x, y, w, h);
+  // the drawer front and the door, inset in the box
+  const ix = x + pad, iw = w - 2 * pad, dy = y + pad, dh = drawer - pad, oy = y + drawer + pad * 0.5, oh = h - drawer - pad * 1.5;
+  c.strokeStyle = WOOD_LINE; c.lineWidth = 1;
+  if (dh > 3) c.strokeRect(ix, dy, iw, dh);
+  if (oh > 6) c.strokeRect(ix, oy, iw, oh);
+  // a pull on the drawer, a handle at the top of the door on its right
+  c.strokeStyle = TH.ink; c.lineWidth = 2; c.lineCap = 'round';
+  c.beginPath();
+  if (dh > 6 && iw > 16) { const pw = Math.min(iw * 0.3, 4 * T.s); c.moveTo(ix + iw / 2 - pw / 2, dy + dh / 2); c.lineTo(ix + iw / 2 + pw / 2, dy + dh / 2); }
+  if (oh > 24 && iw > 16) { const hx = ix + iw - Math.max(5, pad * 2), hl = Math.min(oh * 0.18, 4 * T.s); c.moveTo(hx, oy + Math.max(6, pad * 1.5)); c.lineTo(hx, oy + Math.max(6, pad * 1.5) + hl); }
+  c.stroke();
+  // its name, on the door (its sizes are in the bar when it's picked: on the drawing they'd be noise)
+  c.fillStyle = TH.ink2; c.textAlign = 'center'; c.textBaseline = 'middle';
+  const cx = x + w / 2, cy = oy + oh / 2;
+  if (w > 44 && oh > 22) {
+    c.font = '600 11px ' + FONT;
+    c.fillText(name, cx, cy);
+  }
+  c.restore();
+}
+
+/** A cabinet's extent on the face. */
+export function cabBox(face: WallFace, id: string): { u0: number; u1: number; z0: number; z1: number } | null {
+  const cb = face.cabs?.[id], ps = cb ? cabPoints(cb).map(p => face.points[p]) : [];
+  if (!cb || ps.some(p => !p)) return null;
+  return { u0: Math.min(...ps.map(p => p.x)), u1: Math.max(...ps.map(p => p.x)), z0: Math.min(...ps.map(p => p.y)), z1: Math.max(...ps.map(p => p.y)) };
+}
+
+/** A cabinet's left and right bottom corners as seen. */
+const cabSides = (face: WallFace, id: string): [string, string] => {
+  const cb = face.cabs[id];
+  return face.points[cb.bl].x <= face.points[cb.br].x ? [cb.bl, cb.br] : [cb.br, cb.bl];
+};
 
-  // walls cut at the corners, then the face
+/**
+ * Under what's drawn on the face: the walls cut at its corners, the face, its doors and windows, its cabinets (a door
+ * panel and their name and size; their edges are the face's lines, drawn over this), the face's outline and the floor.
+ * (The selected door, window or cabinet's outline: drawWallSelection, over all of it.)
+ */
+export function drawWallBackdrop(c: C2D, T: Xform, sk: Sketch, f: ElevFrame, face: WallFace): void {
+  const [fx0, fyTop] = S(T, f.face[0], f.H), [fx1, fyBot] = S(T, f.face[1], 0);
   for (const [a, b] of f.strips) { const [x0] = S(T, a, 0), [x1] = S(T, b, 0); hatch(c, x0, fyTop, x1 - x0, fyBot - fyTop); }
   c.fillStyle = TH.room; c.fillRect(fx0, fyTop, fx1 - fx0, fyBot - fyTop);
-  const ops = elevOpenings(sk, f);
-  const hits: ElevHit[] = [];
-  // the face's end edges, as tap targets for the corners (first, so openings and chips on top win)
-  for (const [u, end] of [[f.face[0], f.leftEnd], [f.face[1], f.leftEnd === 'a' ? 'b' : 'a']] as const) {
-    const [x, yTop] = S(T, u, f.H), [, yBot] = S(T, u, 0);
-    hits.push({ x: x - 10, y: yTop, w: 20, h: yBot - yTop, act: { k: 'corner', end } });
+  for (const o of elevOpenings(sk, f)) drawOpening(c, T, o);
+  for (const [id, cb] of Object.entries(face.cabs ?? {})) {
+    const b = cabBox(face, id);
+    if (!b) continue;
+    const [x0, y0] = S(T, b.u0, b.z1), [x1, y1] = S(T, b.u1, b.z0);
+    drawCabinet(c, T, x0, y0, x1 - x0, y1 - y0, cb.label || 'Cabinet');
   }
-  for (const o of ops) {
-    drawOpening(c, T, o);
-    const [x0, y0] = S(T, o.u0, o.head), [x1, y1] = S(T, o.u1, o.sill);
-    hits.push({ x: x0, y: y0, w: x1 - x0, h: y1 - y0, act: { k: 'body', op: o.id } }); // first, so chips on top win taps
-  }
-  // lines drawn on this face: solid, or dashed guides
-  c.save(); c.lineCap = 'round';
-  for (const ln of elevLines(sk, f)) {
-    const [a, b] = elevLineUZ(f, ln), p = S(T, a[0], a[1]), q = S(T, b[0], b[1]);
-    c.strokeStyle = ln.guide ? TH.constr : TH.ink; c.lineWidth = ln.guide ? 1.5 : 2;
-    c.setLineDash(ln.guide ? [6, 5] : []);
-    c.beginPath(); c.moveTo(p[0], p[1]); c.lineTo(q[0], q[1]); c.stroke();
-  }
-  c.restore();
+  c.save();
   c.strokeStyle = TH.ink; c.lineWidth = 2; c.strokeRect(fx0, fyTop, fx1 - fx0, fyBot - fyTop);
-  // floor line across everything
+  // the floor line, across the cut walls too
   const u0 = Math.min(f.face[0], ...f.strips.map(s => s[0])), u1 = Math.max(f.face[1], ...f.strips.map(s => s[1]));
   const [gx0] = S(T, u0, 0), [gx1] = S(T, u1, 0);
   c.lineWidth = 3; c.beginPath(); c.moveTo(gx0 - 14, fyBot); c.lineTo(gx1 + 14, fyBot); c.stroke();
+  c.restore();
+}
 
-  // dimensions (all tappable but the overall length): a chain along the floor (corner → openings → corner),
-  // the overall face, the wall height, and each opening's sill and height
-  /** a dimension chip with its tap action; the selected one gets the plan's yellow border */
-  const tag = (p: [number, number], q: [number, number], nx: number, ny: number, label: string, look: Look, act: ElevAct, force = false) => {
-    const box = dim(c, p, q, nx, ny, label, look, force, selected === JSON.stringify(act));
-    if (box) hits.push({ ...box, act, look });
+/**
+ * The selected door, window or cabinet (and the one under the pointer, fainter): a yellow outline right on its edges,
+ * drawn over everything else on the wall — its own edges and its neighbours' — so the whole of it shows, even where
+ * it shares a side with another cabinet, or lines up with a window.
+ */
+export function drawWallSelection(c: C2D, T: Xform, sk: Sketch, f: ElevFrame, face: WallFace): void {
+  const lit = (type: 'opening' | 'cab', id: string) => isSel(type, id) || (ed.hover?.type === type && ed.hover.id === id);
+  const ring = (u0: number, z1: number, u1: number, z0: number, selected: boolean) => {
+    const [x0, y0] = S(T, u0, z1), [x1, y1] = S(T, u1, z0);
+    c.save(); c.strokeStyle = TH.yellow; c.globalAlpha = selected ? 1 : 0.5; c.lineWidth = 3; c.lineJoin = 'miter';
+    c.strokeRect(x0, y0, x1 - x0, y1 - y0);
+    c.restore();
   };
-  const { segs } = chain(sk, f), lookOf = (d: OpeningDim | undefined): Look => (!d ? 'free' : ed.badOpeningDims.has(d.id) ? 'bad' : d.driving ? 'drive' : 'ref');
-  for (const g of segs) {
-    const p = S(T, g.u0, 0), q = S(T, g.u1, 0), text = fmtLen(g.u1 - g.u0);
-    if (g.act.k === 'w') tag(p, q, 0, ROW0, text, 'drive', g.act);
-    else tag(p, q, 0, ROW0, text, lookOf(g.dim), g.act);
+  for (const o of elevOpenings(sk, f)) if (lit('opening', o.id)) ring(o.u0, o.head, o.u1, o.sill, isSel('opening', o.id));
+  for (const id of Object.keys(face.cabs ?? {})) {
+    if (!lit('cab', id)) continue;
+    const b = cabBox(face, id);
+    if (b) ring(b.u0, b.z1, b.u1, b.z0, isSel('cab', id));
   }
-  // saved dimensions that aren't one step of the string (e.g. window → door across another window, or from a
-  // plan wall point): each on its own row below it, so it can be seen, selected and deleted
-  const extra = extraDims(sk, f);
-  for (const x of extra) tag(S(T, x.u0, 0), S(T, x.u1, 0), 0, ROW0 + ROW * (x.row + 1), fmtLen(x.u1 - x.u0), lookOf(x.d), x.act);
-  const rows = extra.reduce((m, x) => Math.max(m, x.row + 1), 0);
-  // the wall's length comes from the floor plan: linked (outlined blue) when a dimension locks it there, grey when free
-  const planLocked = Object.values(sk.cons).some(cn => cn.type === 'dist' && cn.line === f.lid && cn.driving !== false && cn.layer !== 'print');
-  tag(S(T, f.face[0], 0), S(T, f.face[1], 0), 0, segs.length || rows ? ROW0 + ROW * (rows + 1) : ROW0, fmtLen(f.face[1] - f.face[0]), planLocked ? 'linked' : 'free', { k: 'len' });
-  // heights: blue once entered (the sill: locked), grey while they're defaults / free to drag
-  tag(S(T, f.face[1], 0), S(T, f.face[1], f.H), 34, 0, fmtLen(f.H), sk.lines[f.lid].height != null ? 'drive' : 'free', { k: 'wallH' });
-  for (const o of ops) {
-    const off = 24;
-    const op = sk.openings[o.id];
-    if (o.sill > 0.01 || o.type === 'window') tag(S(T, o.u1, 0), S(T, o.u1, o.sill), off, 0, fmtLen(o.sill), op.sillLocked ? 'drive' : 'free', { k: 'sill', op: o.id }, true);
-    tag(S(T, o.u1, o.sill), S(T, o.u1, o.head), off, 0, fmtLen(o.head - o.sill), op.h != null ? 'drive' : 'free', { k: 'h', op: o.id });
-  }
-  return hits;
 }
 
-/** Rows of dimensions below the floor, pixels: the string, then extra rows, then the overall length. */
+/** Rows of dimensions below the floor, pixels: the strings, then extra rows, then the overall length. */
 const ROW0 = 30, ROW = 34;
 
 type PosAct = Extract<ElevAct, { k: 'pos' }>;
-interface Seg { u0: number; u1: number; act: PosAct | { k: 'w'; op: string }; dim?: OpeningDim }
+/** Something in a string along the floor: a door or window, or a cabinet (its left and right points as seen). */
+type Item = { u0: number; u1: number; op?: ElevOpening; cab?: { id: string; l: string; r: string } };
+interface Seg { u0: number; u1: number; act: ElevAct; look: Look; /** an object's own width: always shown */ width?: true }
+
+/** One rule for every chip: blue once someone entered it; grey while it's a standard size (a new cabinet's) or only measured. */
+const faceLook = (c: Constraint, id: string): Look => (ed.highlight.has(id) || ed.ana.bad.has(id) || ed.badFaceCons.has(id) ? 'bad' : c.driving === false ? 'ref' : c.auto ? 'free' : 'drive');
+
+/** The face dimension across the wall between two points, if there is one. */
+function dimAcross(face: WallFace, a: string, b: string): string | null {
+  for (const [id, c] of Object.entries(face.cons)) if (c.type === 'dist' && c.kind === 'h' && ((c.a === a && c.b === b) || (c.a === b && c.b === a))) return id;
+  return null;
+}
+
+/** The face dimension of a cabinet's height above the floor, if there is one. */
+export function cabLiftDim(face: WallFace, id: string): string | null {
+  const cb = face.cabs[id];
+  for (const [cid, k] of Object.entries(face.cons)) {
+    const ends = [k.a, k.b];
+    if (k.type === 'dist' && k.kind === 'v' && ends.some(v => !!v && !!face.points[v]?.anchor && face.points[v].y === 0) && ends.some(v => v === cb.bl || v === cb.br)) return cid;
+  }
+  return null;
+}
 
-/** The dimension string along the floor: corner → each opening's edges → corner, left to right. */
-function chain(sk: Sketch, f: ElevFrame): { segs: Seg[] } {
-  const ops = elevOpenings(sk, f), other: 'a' | 'b' = f.leftEnd === 'a' ? 'b' : 'a';
-  type Node = { u: number; end?: 'a' | 'b'; op?: ElevOpening; edge?: OpeningEdge };
-  const nodes: Node[] = [{ u: f.face[0], end: f.leftEnd }];
-  for (const o of ops) {
-    if (o.u0 < nodes[nodes.length - 1].u - 0.01 || o.u1 > f.face[1] + 0.01) continue; // overlapping or past the corner: left out of the string
-    nodes.push({ u: o.u0, op: o, edge: o.e0 }, { u: o.u1, op: o, edge: o.e1 });
+/**
+ * The strings along the floor, corner to corner, left to right: the doors and windows and the cabinets that fit
+ * between them in the first; cabinets that overlap those (hung above a counter, say) in the next ones.
+ */
+function strings(sk: Sketch, f: ElevFrame, face: WallFace): Item[][] {
+  const ops: Item[] = elevOpenings(sk, f).map(o => ({ u0: o.u0, u1: o.u1, op: o }));
+  const cabs: Item[] = Object.keys(face.cabs ?? {}).flatMap(id => {
+    const b = cabBox(face, id);
+    if (!b) return [];
+    const [l, r] = cabSides(face, id);
+    return [{ u0: b.u0, u1: b.u1, cab: { id, l, r } }];
+  });
+  const rows: Item[][] = [];
+  const inside = (it: Item) => it.u0 >= f.face[0] - 0.01 && it.u1 <= f.face[1] + 0.01;
+  const fits = (row: Item[], it: Item) => inside(it) && !row.some(x => it.u0 < x.u1 - 0.01 && it.u1 > x.u0 + 0.01);
+  // doors and windows first, then cabinets: each in the first string it fits, overlapping ones in strings of their own
+  for (const it of [...ops.sort((p, q) => p.u0 - q.u0), ...cabs.sort((p, q) => p.u0 - q.u0)]) {
+    if (!inside(it)) continue;
+    const row = rows.find(r => fits(r, it));
+    if (row) row.push(it); else rows.push([it]);
   }
-  nodes.push({ u: f.face[1], end: other });
-  if (nodes.length <= 2) return { segs: [] };
-  const face = (end: 'a' | 'b'): OpeningRef => ({ face: end, line: f.lid, side: f.side as 1 | -1 });
+  return rows.map(r => r.sort((p, q) => p.u0 - q.u0));
+}
+
+/** One string's dimensions: each gap between corners, doors, windows and cabinets, and each one's width. */
+function stringSegs(sk: Sketch, f: ElevFrame, face: WallFace, row: Item[]): Seg[] {
+  const other: 'a' | 'b' = f.leftEnd === 'a' ? 'b' : 'a';
+  type Node = { u: number; pt: string; end?: 'a' | 'b'; it?: Item; edge?: OpeningEdge };
+  const nodes: Node[] = [{ u: f.face[0], pt: cornerAnchor(f.leftEnd), end: f.leftEnd }];
+  for (const it of row) {
+    if (it.op) nodes.push({ u: it.u0, pt: openingAnchor(it.op.id, it.op.e0), it, edge: it.op.e0 }, { u: it.u1, pt: openingAnchor(it.op.id, it.op.e1), it, edge: it.op.e1 });
+    else nodes.push({ u: it.u0, pt: it.cab!.l, it }, { u: it.u1, pt: it.cab!.r, it });
+  }
+  nodes.push({ u: f.face[1], pt: cornerAnchor(other), end: other });
+  if (nodes.length <= 2) return [];
+  const faceRef = (end: 'a' | 'b'): OpeningRef => ({ face: end, line: f.lid, side: f.side as 1 | -1 });
   const segs: Seg[] = [];
   for (let i = 1; i < nodes.length; i++) {
     const n1 = nodes[i - 1], n2 = nodes[i];
-    if (n1.op && n2.op && n1.op === n2.op) { segs.push({ u0: n1.u, u1: n2.u, act: { k: 'w', op: n1.op.id } }); continue; }
-    let act: PosAct;
-    if (!n1.op) act = { k: 'pos', op: n2.op!.id, edge: n2.edge!, ref: face(n1.end!), title: 'Distance from the corner' };
-    else if (!n2.op) act = { k: 'pos', op: n1.op.id, edge: n1.edge!, ref: face(n2.end!), title: 'Distance from the corner' };
-    // between two openings: one of them is locked to the other (pickBetween says which)
-    else act = { k: 'pos', ...pickBetween(sk, n1.op.id, n1.edge!, n2.op.id, n2.edge!), title: 'Space between' };
-    const dim = (sk.openings[act.op].dims || []).find(d => d.edge === act.edge && sameRef(d.ref, act.ref));
-    segs.push({ u0: n1.u, u1: n2.u, act, dim });
+    if (n1.it && n1.it === n2.it) {
+      // a door's or window's width (its own), or a cabinet's (a face dimension)
+      if (n1.it.op) segs.push({ u0: n1.u, u1: n2.u, act: { k: 'w', op: n1.it.op.id }, look: widthEntered(sk.openings[n1.it.op.id]) ? 'drive' : 'free', width: true });
+      else {
+        const id = face.cabs[n1.it.cab!.id].w;
+        segs.push(id && face.cons[id]
+          ? { u0: n1.u, u1: n2.u, act: { k: 'fdim', id }, look: faceLook(face.cons[id], id), width: true }
+          : { u0: n1.u, u1: n2.u, act: { k: 'gap', a: n1.pt, b: n2.pt, kind: 'h', title: 'Cabinet width' }, look: 'free', width: true });
+      }
+      continue;
+    }
+    if (!n1.it?.cab && !n2.it?.cab) {
+      if (!n1.it && !n2.it) continue;
+      // between corners, doors and windows: the plan's door/window dimensions
+      let act: PosAct;
+      if (!n1.it) act = { k: 'pos', op: n2.it!.op!.id, edge: n2.edge!, ref: faceRef(n1.end!), title: 'Distance from the corner' };
+      else if (!n2.it) act = { k: 'pos', op: n1.it.op!.id, edge: n1.edge!, ref: faceRef(n2.end!), title: 'Distance from the corner' };
+      else act = { k: 'pos', ...pickBetween(sk, n1.it.op!.id, n1.edge!, n2.it.op!.id, n2.edge!), title: 'Space between' };
+      const d = (sk.openings[act.op].dims || []).find(x => x.edge === act.edge && sameRef(x.ref, act.ref));
+      segs.push({ u0: n1.u, u1: n2.u, act, look: !d ? 'free' : ed.badOpeningDims.has(d.id) ? 'bad' : d.driving ? 'drive' : 'ref' });
+      continue;
+    }
+    // to or from a cabinet: a face dimension once entered
+    const id = dimAcross(face, n1.pt, n2.pt);
+    const title = n1.end || n2.end ? 'Distance from the corner' : 'Space between';
+    segs.push(id ? { u0: n1.u, u1: n2.u, act: { k: 'fdim', id }, look: faceLook(face.cons[id], id) } : { u0: n1.u, u1: n2.u, act: { k: 'gap', a: n1.pt, b: n2.pt, kind: 'h', title }, look: 'free' });
   }
-  return { segs };
+  return segs;
+}
+
+/** The doors, windows and cabinets a wall-view dimension measures from or to (by the points it runs between). */
+function owners(face: WallFace, act: ElevAct): string[] {
+  const out: string[] = [];
+  const of = (pid: string | undefined) => {
+    if (!pid) return;
+    const m = /^@o:([^:]+):/.exec(pid);
+    if (m) { out.push(m[1]); return; }
+    for (const [id, cb] of Object.entries(face.cabs ?? {})) if ([cb.bl, cb.br, cb.tr, cb.tl].includes(pid)) out.push(id);
+  };
+  if ('op' in act) out.push(act.op);
+  if (act.k === 'pos' && 'op' in act.ref) out.push(act.ref.op);
+  if (act.k === 'depth') out.push(act.cab);
+  if (act.k === 'gap') { of(act.a); of(act.b); }
+  if (act.k === 'fdim') { const c = face.cons[act.id]; of(c?.a); of(c?.b); }
+  // the wall's own length and height: the wall's
+  if (act.k === 'len' || act.k === 'wallH') out.push(WALL);
+  return out;
+}
+
+/**
+ * The doors, windows and cabinets whose reference dimensions show (as the plan shows a door's or window's distances
+ * only while it's selected): the selected and hovered ones, and the one a selected dimension belongs to.
+ */
+/** The wall itself, among what a wall view's dimensions belong to: live while one of its edges or corners is picked. */
+const WALL = '@wall';
+/** One of the wall's own edges or corners (the face's anchors that aren't a door's or window's, nor a shape's). */
+const wallPart = (id: string): boolean => id.startsWith('@') && !id.startsWith('@o:') && !id.startsWith('@k:');
+
+function liveObjects(face: WallFace): Set<string> {
+  const live = new Set<string>();
+  const add = (type: string, id: string) => {
+    if (type === 'opening' || type === 'cab') live.add(id);
+    else if ((type === 'line' || type === 'point') && wallPart(id)) live.add(WALL);
+    else if (type === 'elev') { try { for (const o of owners(face, JSON.parse(id) as ElevAct)) live.add(o); } catch { /* not a chip */ } }
+    else if (type === 'dim' && face.cons[id]) for (const o of owners(face, { k: 'fdim', id })) live.add(o);
+  };
+  for (const s of ed.sel) add(s.type, s.id);
+  if (ed.hover) add(ed.hover.type, ed.hover.id);
+  return live;
+}
+
+/**
+ * The wall view's dimensions, over the face: the strings along the floor, door/window dimensions that aren't a step of
+ * one, face dimensions entered from a chip that no longer are, the wall's length (set in the plan) and height, and
+ * beside each door, window and cabinet its height off the floor and its own height. `on`: whether a chip is selected.
+ * As in the plan, what's been entered (blue) always shows; the rest (grey: just measured, a standard size or a
+ * reference) only while what it belongs to — a door, window or cabinet, or the wall itself (an edge or corner of it) —
+ * is selected or hovered. Returns the chips, to tap.
+ */
+export function drawWallChips(c: C2D, T: Xform, sk: Sketch, f: ElevFrame, face: WallFace, on: (act: ElevAct) => boolean): ElevHit[] {
+  const hits: ElevHit[] = [], shown = new Set<string>(), live = liveObjects(face);
+  /** entered by someone, so it shows in blue (or red, when it can't be met) — not just measured, a standard size or a reference */
+  const entered = (act: ElevAct, look: Look) => (look === 'drive' || look === 'bad' || look === 'linked') && !(act.k === 'fdim' && face.cons[act.id]?.auto);
+  /** an object's own size (a door's, window's or cabinet's width or height; the wall's length or height), not a distance */
+  const ownSize = (act: ElevAct): boolean => act.k === 'w' || act.k === 'h' || act.k === 'len' || act.k === 'wallH'
+    || (act.k === 'gap' && (act.title === 'Cabinet width' || act.title === 'Cabinet height'))
+    || (act.k === 'fdim' && Object.values(face.cabs ?? {}).some(cb => cb.w === act.id || cb.h === act.id));
+  // a dimension shows once it's entered, and otherwise only while what it belongs to is selected or hovered
+  const tag = (p: [number, number], q: [number, number], nx: number, ny: number, label: string, look: Look, act: ElevAct, force = false) => {
+    if (!entered(act, look) && !on(act) && !owners(face, act).some(o => live.has(o))) return;
+    // as in the plan, a number that holds nothing is dashed and in parentheses: a reference, or one only measured —
+    // a distance, or the wall's length when the plan doesn't lock it (a standard size, which holds, stays solid)
+    const dashed = look === 'ref' || (look === 'free' && !(ownSize(act) && act.k !== 'len'));
+    const box = dim(c, p, q, nx, ny, label, look, force, on(act), dashed);
+    if (box) hits.push({ ...box, act, look });
+    if (act.k === 'fdim') shown.add(act.id);
+  };
+  /** the chip's value: a driving face dimension's own, otherwise what's measured */
+  const val = (act: ElevAct, measured: number) => (act.k === 'fdim' && face.cons[act.id]?.driving !== false ? face.cons[act.id].value! : measured);
+  const rows = strings(sk, f, face);
+  rows.forEach((row, r) => {
+    for (const g of stringSegs(sk, f, face, row)) tag(S(T, g.u0, 0), S(T, g.u1, 0), 0, ROW0 + ROW * r, fmtLen(val(g.act, g.u1 - g.u0)), g.look, g.act);
+  });
+  let next = Math.max(rows.length, 1);
+  // door/window dimensions that aren't a step of a string, packed into rows of their own
+  const extra = extraDims(sk, f, rows);
+  for (const x of extra) tag(S(T, x.u0, 0), S(T, x.u1, 0), 0, ROW0 + ROW * (next + x.row), fmtLen(x.u1 - x.u0), ed.badOpeningDims.has(x.d.id) ? 'bad' : x.d.driving ? 'drive' : 'ref', x.act);
+  next += extra.reduce((m, x) => Math.max(m, x.row + 1), 0);
+  // heights beside doors, windows and cabinets
+  for (const o of elevOpenings(sk, f)) {
+    const op = sk.openings[o.id];
+    if (o.sill > 0.01 || o.type === 'window') tag(S(T, o.u1, 0), S(T, o.u1, o.sill), 24, 0, fmtLen(o.sill), op.sillLocked ? 'drive' : 'free', { k: 'sill', op: o.id }, true);
+    tag(S(T, o.u1, o.sill), S(T, o.u1, o.head), 24, 0, fmtLen(o.head - o.sill), op.h != null ? 'drive' : 'free', { k: 'h', op: o.id });
+  }
+  // beside a cabinet: on its right like a window's, unless a cabinet or opening is right there (a run of cabinets),
+  // then on its left, else just inside it
+  const boxes = [...Object.keys(face.cabs ?? {}).map(id => ({ id, b: cabBox(face, id) })).filter(x => x.b).map(x => ({ id: x.id, ...x.b! })),
+    ...elevOpenings(sk, f).map(o => ({ id: o.id, u0: o.u0, u1: o.u1, z0: o.sill, z1: o.head }))];
+  const room = 64 / T.s;
+  const blocked = (id: string, b: { z0: number; z1: number }, lo: number, hi: number) =>
+    boxes.some(o => o.id !== id && o.u1 > lo + 0.01 && o.u0 < hi - 0.01 && o.z1 > b.z0 - 0.01 && o.z0 < b.z1 + 0.01);
+  for (const [id, cb] of Object.entries(face.cabs ?? {})) {
+    const b = cabBox(face, id);
+    if (!b) continue;
+    const [l, r] = cabSides(face, id), zid = cabLiftDim(face, id);
+    const right = !blocked(id, b, b.u1, b.u1 + room), left = !right && !blocked(id, b, b.u0 - room, b.u0);
+    const u = right ? b.u1 : b.u0, off = right ? 24 : left ? -24 : 24, at = right || left ? u : b.u1 - 48 / T.s;
+    // its height off the floor: when it's off the floor, set, or selected (a cabinet on the floor needs no 0")
+    if (b.z0 > 0.01 || zid || live.has(id)) {
+      const zAct: ElevAct = zid ? { k: 'fdim', id: zid } : { k: 'gap', a: cornerAnchor(f.leftEnd), b: l, kind: 'v', title: 'Cabinet off the floor' };
+      tag(S(T, at, 0), S(T, at, b.z0), off, 0, fmtLen(val(zAct, b.z0)), zid ? faceLook(face.cons[zid], zid) : 'free', zAct, true);
+    }
+    // its depth, on its door near the bottom: a chip like the others (grey until it's entered, and then only while
+    // the cabinet is selected or hovered), on the cabinet itself
+    if (cb.depthSet || live.has(id) || on({ k: 'depth', cab: id })) {
+      const dAct: ElevAct = { k: 'depth', cab: id }, look: Look = cb.depthSet ? 'drive' : 'free', st = LOOK(look);
+      const [cx] = S(T, (b.u0 + b.u1) / 2, 0), [, by] = S(T, 0, b.z0), [, ty] = S(T, 0, b.z1);
+      if (by - ty > 40) {
+        const y = by - Math.min(16, (by - ty) * 0.15), text = 'D ' + fmtLen(cb.depth);
+        const w = chip(c, text, cx, y, { bg: st.bg, fg: st.fg, font: '600 11.5px', h: 20, pad: 6, border: on(dAct) ? [TH.yellow, 2] : null });
+        hits.push({ x: cx - w / 2 - 4, y: y - 14, w: w + 8, h: 28, act: dAct, look });
+      }
+    }
+    const top = r === cb.br ? cb.tr : cb.tl;
+    const hAct: ElevAct = cb.h && face.cons[cb.h] ? { k: 'fdim', id: cb.h } : { k: 'gap', a: r, b: top, kind: 'v', title: 'Cabinet height' };
+    tag(S(T, at, b.z0), S(T, at, b.z1), off, 0, fmtLen(val(hAct, b.z1 - b.z0)), hAct.k === 'fdim' ? faceLook(face.cons[hAct.id], hAct.id) : 'free', hAct);
+  }
+  // face dimensions entered from a chip that isn't drawn now (what they measure has moved): across in rows of their own, up beside their point
+  const lostRows: [number, number][][] = [];
+  for (const [id, k] of Object.entries(face.cons)) {
+    if (!k.elev || k.anchor || k.type !== 'dist' || shown.has(id) || !k.a || !k.b || !face.points[k.a] || !face.points[k.b]) continue;
+    if (Object.values(face.cabs ?? {}).some(cb => cb.w === id || cb.h === id)) continue;
+    const A = face.points[k.a], B = face.points[k.b], act: ElevAct = { k: 'fdim', id }, text = fmtLen(k.driving === false ? measure(face, k) : k.value!);
+    if (k.kind === 'v') { tag(S(T, B.x, A.y), S(T, B.x, B.y), -24, 0, text, faceLook(k, id), act, true); continue; }
+    const u0 = Math.min(A.x, B.x), u1 = Math.max(A.x, B.x);
+    let row = 0;
+    while ((lostRows[row] || []).some(([x, y]) => u0 < y + 6 && u1 > x - 6)) row++;
+    (lostRows[row] = lostRows[row] || []).push([u0, u1]);
+    tag(S(T, A.x, 0), S(T, B.x, 0), 0, ROW0 + ROW * (next + row), text, faceLook(k, id), act);
+  }
+  next += lostRows.length;
+  // the wall's length comes from the floor plan: linked (outlined blue) when a dimension locks it there, grey when free
+  const planLocked = Object.values(sk.cons).some(cn => cn.type === 'dist' && cn.line === f.lid && cn.driving !== false && cn.layer !== 'print');
+  const anyRow = rows.some(r => r.length) || next > 1;
+  tag(S(T, f.face[0], 0), S(T, f.face[1], 0), 0, anyRow ? ROW0 + ROW * next : ROW0, fmtLen(f.face[1] - f.face[0]), planLocked ? 'linked' : 'free', { k: 'len' });
+  // the wall's height: blue once entered, grey while it's the default
+  tag(S(T, f.face[1], 0), S(T, f.face[1], f.H), 34, 0, fmtLen(f.H), sk.lines[f.lid].height != null ? 'drive' : 'free', { k: 'wallH' });
+  return hits;
 }
 
 export interface ExtraDim { u0: number; u1: number; d: OpeningDim; act: PosAct; row: number }
 
-/** Saved door/window dimensions on this wall that the string doesn't show, packed into rows (u intervals don't overlap). */
-export function extraDims(sk: Sketch, f: ElevFrame): ExtraDim[] {
-  const shown = new Set(chain(sk, f).segs.map(g => g.dim?.id).filter(Boolean));
+/** Saved door/window dimensions on this wall that the strings (`rows`) don't show, packed into rows. */
+export function extraDims(sk: Sketch, f: ElevFrame, strs?: Item[][]): ExtraDim[] {
+  const shown = new Set<string>();
+  for (const row of strs ?? strings(sk, f, emptyFace())) for (const g of stringSegs(sk, f, emptyFace(), row.filter(it => it.op))) {
+    if (g.act.k !== 'pos') continue;
+    const a = g.act, d = (sk.openings[a.op].dims || []).find(x => x.edge === a.edge && sameRef(x.ref, a.ref));
+    if (d) shown.add(d.id);
+  }
   const out: ExtraDim[] = [], rows: [number, number][][] = [];
   for (const o of elevOpenings(sk, f)) {
     const op = sk.openings[o.id], g = openingSpan(sk, op);
@@ -251,20 +460,17 @@ export function extraDims(sk: Sketch, f: ElevFrame): ExtraDim[] {
       const r = refS(sk, op, d.ref);
       if (r == null) continue;
       const a = toU(f, r), b = toU(f, edgeS(op, g.w, d.edge)), u0 = Math.min(a, b), u1 = Math.max(a, b);
-      let row = 0;
-      while ((rows[row] || []).some(([x, y]) => u0 < y + 6 && u1 > x - 6)) row++;
-      (rows[row] = rows[row] || []).push([u0, u1]);
+      let k = 0;
+      while ((rows[k] || []).some(([x, y]) => u0 < y + 6 && u1 > x - 6)) k++;
+      (rows[k] = rows[k] || []).push([u0, u1]);
       const title = 'op' in d.ref ? 'Space between' : 'face' in d.ref ? 'Distance from the corner' : 'Distance from the wall end';
-      out.push({ u0, u1, d, row, act: { k: 'pos', op: o.id, edge: d.edge, ref: d.ref, title } });
+      out.push({ u0, u1, d, row: k, act: { k: 'pos', op: o.id, edge: d.edge, ref: d.ref, title } });
     }
   }
   return out;
 }
 
-/** Extra pixels below the floor that the extra dimension rows take (for fitting the view). */
-export const extraRowsPx = (sk: Sketch, f: ElevFrame): number => ROW * extraDims(sk, f).reduce((m, x) => Math.max(m, x.row + 1), 0);
-
-/** A chip for previews (line length while drawing). */
+/** A chip for previews (a ghost's size, a height while placing). */
 export const previewChip = (c: C2D, text: string, x: number, y: number) => chip(c, text, x, y, { bg: TH.chip, fg: TH.ink, font: '600 11.5px', h: 20, pad: 6, border: [TH.purple, 1.5] });
 
 /** A small plan of the page in the corner: the wall in yellow and an arrow showing where you're looking from. */

package/src/render/figmaIcons.ts

@@ -0,0 +1,22 @@
+/*
+  Icons drawn in a Figma frame, kept exactly as Figma exports them (their own size, viewBox and colours) rather than
+  redrawn on the rail's 24 grid: the Pages panel's Delete and + Page (Figma 2548:101989).
+*/
+
+/** Delete page: a trash can, white, for the red pill. */
+export const TRASH_SVG = `<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="22.7032" height="25.25" viewBox="0 0 22.7032 25.25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group 1707480533">
+<path id="Vector" d="M8.79826 11.3535V19.0063" stroke="white" stroke-width="2.29583" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_2" d="M13.9033 11.3535V19.0063" stroke="white" stroke-width="2.29583" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_3" d="M1.14792 6.24557H21.5553" stroke="white" stroke-width="2.29583" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_4" d="M3.69674 6.24557H11.3495H19.0023V20.2757C19.0023 22.389 17.2892 24.1021 15.1759 24.1021H7.52313C5.40988 24.1021 3.69674 22.389 3.69674 20.2757V6.24557Z" stroke="white" stroke-width="2.29583" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_5" d="M7.52578 3.69884C7.52578 2.29 8.66787 1.14792 10.0767 1.14792H12.6276C14.0365 1.14792 15.1786 2.29 15.1786 3.69884V6.24977H7.52578V3.69884Z" stroke="white" stroke-width="2.29583" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>`;
+export const TRASH_SIZE = { width: 22.7032, height: 25.25 };
+
+/** + Page: a plus, dark grey, for the yellow pill. */
+export const PLUS_SVG = `<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="18.5" height="18.5" viewBox="0 0 18.5 18.5" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector" d="M9.25 0.125C9.58152 0.125 9.89937 0.256791 10.1338 0.491211C10.3682 0.725631 10.5 1.04348 10.5 1.375V8H17.125C17.4565 8 17.7744 8.13179 18.0088 8.36621C18.2432 8.60063 18.375 8.91848 18.375 9.25C18.375 9.58152 18.2432 9.89937 18.0088 10.1338C17.7744 10.3682 17.4565 10.5 17.125 10.5H10.5V17.125C10.5 17.4565 10.3682 17.7744 10.1338 18.0088C9.89937 18.2432 9.58152 18.375 9.25 18.375C8.91848 18.375 8.60063 18.2432 8.36621 18.0088C8.13179 17.7744 8 17.4565 8 17.125V10.5H1.375C1.04348 10.5 0.725631 10.3682 0.491211 10.1338C0.256791 9.89937 0.125 9.58152 0.125 9.25C0.125 8.91848 0.256791 8.60063 0.491211 8.36621C0.725631 8.13179 1.04348 8 1.375 8H8V1.375C8 1.04348 8.13179 0.725631 8.36621 0.491211C8.60063 0.256791 8.91848 0.125 9.25 0.125Z" fill="#181A1C" stroke="#181A1C" stroke-width="0.25"/>
+</svg>`;
+export const PLUS_SIZE = { width: 18.5, height: 18.5 };