@reekon-tools/boldr-cad 0.1.0 → 1.0.0

package/src/solver/gauss-newton.ts

@@ -2,7 +2,7 @@ import { isDim, measure, relatedCons } from '../model/constraints';
 import { addCons, restorePos, snapshotPos } from '../model/sketch';
 import type { Analysis, Constraint, Sketch, XY } from '../model/types';
 import { buildSys, getX, type System, type Vec } from './equations';
-import { jac, rref, solveDense, sq, type Row } from './linalg';
+import { blocks, compactRows, envAt, envelopeOf, jac, rref, rrefTol, solveDense, solveEnvelope, sq, type Envelope, type Row } from './linalg';
 import type { AddResult, SolveResult, Solver } from './types';
 
 /**
@@ -13,24 +13,32 @@ export function gnSolve(sys: System, X: Vec, W: Float64Array, maxIt = 60): { X:
   const m = sys.eqs.length, n = sys.n;
   const evalR = (Y: Vec) => sys.eqs.map(e => e.f(Y));
   let r = evalR(X), nr = sq(r);
-  for (let it = 0; it < maxIt && nr > 1e-22; it++) {
+  let env: Envelope | null = null;
+  // (solved to 1e-10 — far finer than the 1e-6 a solve must reach: past that, steps only chase rounding error)
+  for (let it = 0; it < maxIt && nr > 1e-20; it++) {
     const J = jac(sys, X);
-    const A = new Float64Array(m * m);
-    for (let i = 0; i < m; i++) {
-      const Ji = J[i];
-      for (let k = 0; k <= i; k++) {
-        const Jk = J[k];
-        let s = 0;
-        const sm = Ji.size < Jk.size ? Ji : Jk, lg = sm === Ji ? Jk : Ji;
-        for (const [v, a] of sm) { const b = lg.get(v); if (b !== undefined) s += (a * b) / W[v]; }
-        A[i * m + k] = s; A[k * m + i] = s;
+    // A = J W⁻¹ Jᵀ, summed variable by variable: only the equations that share a variable meet in A, and each variable
+    // is in a handful of them — so it costs about as much as J has entries, not every pair of equations (which, on a
+    // plan of a few dozen rooms, made each step of a drag take longer than a frame)
+    const cols: { row: number[]; val: number[] }[] = Array.from({ length: n }, () => ({ row: [], val: [] }));
+    for (let i = 0; i < m; i++) for (const [v, a] of J[i]) { cols[v].row.push(i); cols[v].val.push(a); }
+    // kept in the envelope of its band (see envelopeOf) and factored there: solving A densely took time growing with
+    // the cube of the equations — most of each step of a drag on a big plan. Dense if the band's factor breaks down.
+    env ??= envelopeOf(sys.eqs.map(e => e.deps), n);
+    const E = new Float64Array(env.size), at = (i: number, k: number) => (i >= k ? envAt(env!, i, k) : envAt(env!, k, i));
+    for (let v = 0; v < n; v++) {
+      const { row, val } = cols[v], w = W[v];
+      for (let p = 0; p < row.length; p++) {
+        const i = env.pos[row[p]], ai = val[p] / w;
+        E[at(i, i)] += ai * val[p];
+        for (let q = 0; q < p; q++) E[at(i, env.pos[row[q]])] += ai * val[q];
       }
     }
     let md = 0;
-    for (let i = 0; i < m; i++) md = Math.max(md, A[i * m + i]);
+    for (let i = 0; i < m; i++) md = Math.max(md, E[envAt(env, i, i)]);
     const mu = 1e-8 * (md || 1) + 1e-14;
-    for (let i = 0; i < m; i++) A[i * m + i] += mu;
-    const y = solveDense(A, Float64Array.from(r), m);
+    for (let i = 0; i < m; i++) E[envAt(env, i, i)] += mu;
+    const y = solveEnvelope(env, E, r) ?? solveDense(denseNormal(J, W, m, n, mu), Float64Array.from(r), m);
     if (!y) break;
     const dx = new Float64Array(n);
     for (let i = 0; i < m; i++) {
@@ -43,7 +51,7 @@ export function gnSolve(sys: System, X: Vec, W: Float64Array, maxIt = 60): { X:
       const Xn = new Float64Array(n);
       for (let j = 0; j < n; j++) Xn[j] = X[j] + step * dx[j];
       const rn = evalR(Xn), nn = sq(rn);
-      if (isFinite(nn) && (nn < nr || nn < 1e-22)) { X = Xn; r = rn; nr = nn; ok = true; break; }
+      if (isFinite(nn) && (nn < nr || nn < 1e-20)) { X = Xn; r = rn; nr = nn; ok = true; break; }
       step *= 0.5;
     }
     if (!ok) break;
@@ -52,6 +60,23 @@ export function gnSolve(sys: System, X: Vec, W: Float64Array, maxIt = 60): { X:
   return { X, ok: maxr < 1e-6, res: maxr, r };
 }
 
+/** J W⁻¹ Jᵀ + μI as a dense m × m matrix (for solveDense, when the banded factor breaks down). */
+function denseNormal(J: Row[], W: Float64Array, m: number, n: number, mu: number): Float64Array {
+  const cols: { row: number[]; val: number[] }[] = Array.from({ length: n }, () => ({ row: [], val: [] }));
+  for (let i = 0; i < m; i++) for (const [v, a] of J[i]) { cols[v].row.push(i); cols[v].val.push(a); }
+  const A = new Float64Array(m * m);
+  for (let v = 0; v < n; v++) {
+    const { row, val } = cols[v], w = W[v];
+    for (let p = 0; p < row.length; p++) {
+      const i = row[p], ai = val[p] / w;
+      A[i * m + i] += ai * val[p];
+      for (let q = 0; q < p; q++) { const k = row[q], s = ai * val[q]; A[i * m + k] += s; A[k * m + i] += s; }
+    }
+  }
+  for (let i = 0; i < m; i++) A[i * m + i] += mu;
+  return A;
+}
+
 export function writeX(sk: Sketch, sys: System, X: Vec): void {
   for (const [k, i] of sys.idx) {
     if (k.startsWith('r:')) { const c = sk.circles[k.slice(2)]; if (c) c.r = X[i]; }
@@ -87,11 +112,51 @@ export function culpritsFor(sys0: System, newRows: Row[]): string[] {
   return [...out];
 }
 
+/** The drawing's equations with the new constraint's added ('__new'), and the new ones' Jacobian rows and residuals. */
 function newRowsFor(sk: Sketch, c: Constraint) {
-  const sys1 = buildSys(sk, { extra: c }), X = getX(sys1), J = jac(sys1, X);
-  const rows: Row[] = [], res: number[] = [];
-  sys1.eqs.forEach((e, i) => { if (e.cid === '__new') { rows.push(J[i]); res.push(Math.abs(e.f(X))); } });
-  return { sys1, J, rows, res };
+  const sys1 = buildSys(sk, { extra: c }), X = getX(sys1);
+  const rows = jac({ ...sys1, eqs: sys1.eqs.filter(e => e.cid === '__new') }, X);
+  const res = sys1.eqs.filter(e => e.cid === '__new').map(e => Math.abs(e.f(X)));
+  return { sys1, X, rows, res };
+}
+
+/**
+ * How much a new constraint's equations (cid '__new' in `sys1`, rows of `J1`) add to the rank of the others: 0 when
+ * they follow from them (a redundant or a conflicting constraint). One that holds a variable no other equation touches
+ * adds 1 outright — as most of a new shape's constraints do (a rectangle's corners are new points). Otherwise only the
+ * block of the system it joins is reduced: the rest has the same rank with it or without it. Both used to reduce the
+ * whole drawing, twice for each constraint — most of the time it took to finish a shape on a big plan.
+ */
+export function rankGain(sys1: System, X: Vec, newRows?: Row[]): number {
+  const fresh: number[] = [], olds: number[] = [];
+  sys1.eqs.forEach((e, i) => (e.cid === '__new' ? fresh : olds).push(i));
+  if (fresh.length === 1) {
+    const row = newRows?.[0] ?? jac({ ...sys1, eqs: [sys1.eqs[fresh[0]]] }, X)[0];
+    // its variables it clearly moves (not a derivative lost in rounding, which the full reduction judges against the
+    // rest): one that no other equation moves at all here — a new point's, or a y only level walls hold — adds 1.
+    // (Only the equations on those variables are differentiated; a level wall depends on its points' x's but doesn't
+    // move with them.)
+    const strong = [...row].filter(([, v]) => Math.abs(v) >= 1e-3).map(([k]) => k);
+    if (strong.length) {
+      const want = new Set(strong), touching = olds.filter(i => sys1.eqs[i].deps.some(d => want.has(d)));
+      const rows = jac({ ...sys1, eqs: touching.map(i => sys1.eqs[i]) }, X);
+      if (strong.some(k => rows.every(r => !r.has(k)))) return 1;
+    }
+  }
+  return rankGainOf(sys1, jac(sys1, X), fresh, olds);
+}
+
+function rankGainOf(sys1: System, J1: Row[], fresh: number[], olds: number[]): number {
+  const tol0 = rrefTol(olds.map(i => J1[i])), tol1 = rrefTol(J1);
+  const isNew = new Set(fresh);
+  let r0 = 0, r1 = 0;
+  for (const b of blocks(J1, sys1.n)) {
+    if (!b.rows.some(i => isNew.has(i))) continue;
+    const before = b.rows.filter(i => !isNew.has(i));
+    r0 += rref(compactRows(before.map(i => J1[i]), b.cols), b.cols.length, false, tol0).rank;
+    r1 += rref(compactRows(b.rows.map(i => J1[i]), b.cols), b.cols.length, false, tol1).rank;
+  }
+  return r1 - r0;
 }
 
 export class GaussNewtonSolver implements Solver {
@@ -118,8 +183,34 @@ export class GaussNewtonSolver implements Solver {
     const snap = snapshotPos(sk);
     ids.forEach((id, i) => { sk.points[id].x = targets[i].x; sk.points[id].y = targets[i].y; });
     const s = this.solve(sk, ids);
-    if (!s.ok) restorePos(sk, snap);
-    return s.ok;
+    if (!s.ok) { restorePos(sk, snap); return false; }
+    this.settle(sk, ids, snap);
+    return true;
+  }
+
+  solveHolding(sk: Sketch, held: string[]): SolveResult {
+    const snap = snapshotPos(sk), ids = held.filter(id => sk.points[id]);
+    const s = this.solve(sk, ids);
+    if (s.ok && ids.length) this.settle(sk, ids, snap);
+    return s;
+  }
+
+  /**
+   * After a solve that pulled `ids` (held heavy) into line: they stay where they got to, everything else goes back to
+   * where it was (`before`) and is solved once more — so the rest moves only as far as the constraints need. Pulling
+   * the held points into line, the solve can use any free motion to ease the strain (a cabinet's sideways slack; a
+   * cabinet free to slide up its wall, edge-to-edge collinear with another), and that would otherwise stay behind —
+   * a little more at each step of a drag: things tied to what's dragged gliding when they shouldn't move at all.
+   */
+  private settle(sk: Sketch, ids: string[], before: ReturnType<typeof snapshotPos>): void {
+    const got = ids.map(id => ({ x: sk.points[id].x, y: sk.points[id].y }));
+    const solved = snapshotPos(sk);
+    restorePos(sk, before);
+    const pts = ids.map(id => sk.points[id]), had = pts.map(p => p.fixed);
+    pts.forEach((p, i) => { p.x = got[i].x; p.y = got[i].y; p.fixed = true; });
+    const settled = this.solve(sk);
+    pts.forEach((p, i) => { if (had[i]) p.fixed = true; else delete p.fixed; });
+    if (!settled.ok) restorePos(sk, solved);
   }
 
   analyzeDOF(sk: Sketch): Analysis {
@@ -128,11 +219,18 @@ export class GaussNewtonSolver implements Solver {
     for (const id in sk.points) if (sk.points[id].fixed) det.add(id);
     let dof = sys.n, ok = true;
     if (sys.eqs.length) {
-      const J = jac(sys, X), R = rref(J, sys.n, true);
-      dof = sys.n - R.rank;
+      // reduced block by block (see blocks): the same rank and determined variables as the whole at once
+      const J = jac(sys, X), tol = rrefTol(J), detV = new Uint8Array(sys.n);
+      let rank = 0;
+      for (const b of blocks(J, sys.n)) {
+        const R = rref(compactRows(b.rows.map(i => J[i]), b.cols), b.cols.length, true, tol);
+        rank += R.rank;
+        b.cols.forEach((c, k) => { if (R.det![k]) detV[c] = 1; });
+      }
+      dof = sys.n - rank;
       for (const [k, i] of sys.idx) {
-        if (k.startsWith('r:')) { if (R.det![i]) detR.add(k.slice(2)); }
-        else if (R.det![i] && R.det![i + 1]) det.add(k);
+        if (k.startsWith('r:')) { if (detV[i]) detR.add(k.slice(2)); }
+        else if (detV[i] && detV[i + 1]) det.add(k);
       }
       sys.eqs.forEach(e => { if (Math.abs(e.f(X)) > 1e-5) { bad.add(e.cid); ok = false; } });
     }
@@ -140,10 +238,9 @@ export class GaussNewtonSolver implements Solver {
   }
 
   addConstraint(sk: Sketch, c: Constraint, { explain = false }: { explain?: boolean } = {}): AddResult {
-    const sys0 = buildSys(sk), r0 = rref(jac(sys0, getX(sys0)), sys0.n, false).rank;
     const N = newRowsFor(sk, c);
     if (!N.rows.length) return { ok: false };
-    const gain = rref(N.J, N.sys1.n, false).rank - r0;
+    const gain = rankGain(N.sys1, N.X, N.rows);
     const resid = Math.max(...N.res);
     if (gain === 0) {
       if (isDim(c)) {
@@ -155,7 +252,7 @@ export class GaussNewtonSolver implements Solver {
       }
       if (resid < 1e-6) return { ok: false, redundant: true };
       let culprits: string[] = [];
-      if (explain) { culprits = culpritsFor(sys0, N.rows); if (!culprits.length) culprits = relatedCons(sk, c); }
+      if (explain) { culprits = culpritsFor(buildSys(sk), N.rows); if (!culprits.length) culprits = relatedCons(sk, c); }
       return { ok: false, conflict: 'dependent', culprits };
     }
     const snap = snapshotPos(sk);

package/src/solver/linalg.ts

@@ -54,13 +54,20 @@ export const sq = (r: ArrayLike<number>): number => {
   return s;
 };
 
-/** Reduced row echelon form: rank, pivot columns and (optionally) which variables are fully determined. */
-export function rref(rows: Row[], n: number, needDet: boolean): { rank: number; piv: number[]; det: Uint8Array | null } {
+/** What rref counts as zero for these rows: a billionth of their largest entry (or of 1). */
+export function rrefTol(rows: Row[]): number {
+  let maxAbs = 0;
+  for (const r of rows) for (const v of r.values()) { const a = Math.abs(v); if (a > maxAbs) maxAbs = a; }
+  return 1e-9 * Math.max(1, maxAbs);
+}
+
+/**
+ * Reduced row echelon form: rank, pivot columns and (optionally) which variables are fully determined. `tol`: what
+ * counts as zero (by default rrefTol of these rows — pass the whole system's when reducing it block by block).
+ */
+export function rref(rows: Row[], n: number, needDet: boolean, tol = rrefTol(rows)): { rank: number; piv: number[]; det: Uint8Array | null } {
   const m = rows.length;
   const M = rows.map(r => { const a = new Float64Array(n); r.forEach((v, k) => (a[k] = v)); return a; });
-  let maxAbs = 0;
-  for (const a of M) for (let k = 0; k < n; k++) { const v = Math.abs(a[k]); if (v > maxAbs) maxAbs = v; }
-  const tol = 1e-9 * Math.max(1, maxAbs);
   const piv: number[] = [];
   let r = 0;
   for (let col = 0; col < n && r < m; col++) {
@@ -94,3 +101,132 @@ export function rref(rows: Row[], n: number, needDet: boolean): { rank: number;
   }
   return { rank: r, piv, det };
 }
+
+/**
+ * The system's independent blocks: groups of rows that share no variable with any other group (directly or through
+ * other rows), each with its variables (ascending). A plan's level and plumb walls set its x's apart from its y's, and
+ * separate drawings on a page are separate blocks: a block's rank and reduced form don't depend on the rest, so the
+ * system is reduced block by block, at a fraction of the cost of reducing it whole. Rows with no entries are left out.
+ */
+export function blocks(rows: Row[], n: number): { rows: number[]; cols: number[] }[] {
+  const parent = new Int32Array(n);
+  for (let i = 0; i < n; i++) parent[i] = i;
+  const find = (x: number): number => { while (parent[x] !== x) { parent[x] = parent[parent[x]]; x = parent[x]; } return x; };
+  for (const r of rows) {
+    let root = -1;
+    for (const k of r.keys()) { const f = find(k); if (root < 0) root = f; else if (f !== root) parent[f] = root; }
+  }
+  const byRoot = new Map<number, { rows: number[]; cols: number[] }>();
+  rows.forEach((r, i) => {
+    for (const k of r.keys()) {
+      const root = find(k);
+      let b = byRoot.get(root);
+      if (!b) byRoot.set(root, (b = { rows: [], cols: [] }));
+      b.rows.push(i);
+      break;
+    }
+  });
+  for (let c = 0; c < n; c++) { const b = byRoot.get(find(c)); if (b) b.cols.push(c); }
+  return [...byRoot.values()];
+}
+
+/** Rows renumbered onto `cols` (ascending): variable cols[k] becomes k. */
+export function compactRows(rows: Row[], cols: number[]): Row[] {
+  const at = new Map<number, number>();
+  cols.forEach((c, k) => at.set(c, k));
+  return rows.map(r => {
+    const o: Row = new Map();
+    r.forEach((v, c) => { const k = at.get(c); if (k !== undefined) o.set(k, v); });
+    return o;
+  });
+}
+
+/**
+ * Where the nonzeros of J W⁻¹ Jᵀ can be — equations that share a variable — with the equations reordered (reverse
+ * Cuthill–McKee) so they sit close to the diagonal. Its LDLᵀ factor fills in only within each row's envelope (from the
+ * row's first nonzero to the diagonal): a narrow band for a drawing's equations, which mostly tie a point to its
+ * neighbours, with equations that share nothing in separate blocks of it. Worked out once a solve, from the variables
+ * each equation depends on (the same at every step).
+ */
+export interface Envelope {
+  m: number;
+  /** pos[equation] = its place in the new order; ord[place] = the equation there */
+  pos: Int32Array; ord: Int32Array;
+  /** each row's (in the new order) first column, and where its entries (first … diagonal) start in the values */
+  first: Int32Array; start: Int32Array;
+  size: number;
+}
+
+/** Where entry (i, k) of the envelope (new order, k ≤ i) is kept in its values. */
+export const envAt = (env: Envelope, i: number, k: number): number => env.start[i] + (k - env.first[i]);
+
+export function envelopeOf(deps: number[][], n: number): Envelope {
+  const m = deps.length;
+  const byVar: number[][] = Array.from({ length: n }, () => []);
+  deps.forEach((ds, i) => { for (const v of ds) byVar[v].push(i); });
+  const near: Set<number>[] = Array.from({ length: m }, () => new Set<number>());
+  for (const eqs of byVar) for (let p = 0; p < eqs.length; p++) for (let q = p + 1; q < eqs.length; q++) { near[eqs[p]].add(eqs[q]); near[eqs[q]].add(eqs[p]); }
+  const adj = near.map(s => [...s]), deg = adj.map(a => a.length);
+  // Cuthill–McKee: breadth first from a least-connected equation of each block, fewest neighbours first; then reversed
+  const order: number[] = [], seen = new Uint8Array(m);
+  const starts = Array.from({ length: m }, (_, i) => i).sort((a, b) => deg[a] - deg[b] || a - b);
+  for (const s of starts) {
+    if (seen[s]) continue;
+    seen[s] = 1;
+    const q = [s];
+    for (let h = 0; h < q.length; h++) {
+      const next = adj[q[h]].filter(v => !seen[v]).sort((a, b) => deg[a] - deg[b] || a - b);
+      for (const v of next) { seen[v] = 1; q.push(v); }
+    }
+    for (const e of q) order.push(e);
+  }
+  order.reverse();
+  const ord = Int32Array.from(order), pos = new Int32Array(m);
+  ord.forEach((e, i) => { pos[e] = i; });
+  const first = new Int32Array(m), start = new Int32Array(m + 1);
+  for (let i = 0; i < m; i++) {
+    let f = i;
+    for (const e of adj[ord[i]]) { const j = pos[e]; if (j < f) f = j; }
+    first[i] = f;
+    start[i + 1] = start[i] + (i - f + 1);
+  }
+  return { m, pos, ord, first, start, size: start[m] };
+}
+
+/**
+ * Solve A y = b for a symmetric positive definite A kept in `env`'s envelope (its lower triangle, `val`, row by row in
+ * the new order — overwritten by the LDLᵀ factor); b and y in the equations' own order. Null if a pivot isn't positive
+ * (A isn't numerically positive definite), for the caller to solve it another way.
+ */
+export function solveEnvelope(env: Envelope, val: Float64Array, b: ArrayLike<number>): Float64Array | null {
+  const { m, first, start, ord } = env, D = new Float64Array(m);
+  for (let i = 0; i < m; i++) {
+    const fi = first[i], si = start[i] - fi;
+    for (let j = fi; j < i; j++) {
+      const fj = first[j], sj = start[j] - fj;
+      let s = val[si + j];
+      for (let k = fi > fj ? fi : fj; k < j; k++) s -= val[si + k] * val[sj + k] * D[k];
+      val[si + j] = s / D[j];
+    }
+    let d = val[si + i];
+    for (let k = fi; k < i; k++) { const l = val[si + k]; d -= l * l * D[k]; }
+    if (!(d > 0) || !Number.isFinite(d)) return null;
+    D[i] = d;
+  }
+  // L z = b, then D, then Lᵀ y = z (all in the new order)
+  const z = new Float64Array(m);
+  for (let i = 0; i < m; i++) {
+    const fi = first[i], si = start[i] - fi;
+    let s = b[ord[i]];
+    for (let k = fi; k < i; k++) s -= val[si + k] * z[k];
+    z[i] = s;
+  }
+  for (let i = 0; i < m; i++) z[i] /= D[i];
+  for (let i = m - 1; i >= 0; i--) {
+    const fi = first[i], si = start[i] - fi, zi = z[i];
+    for (let k = fi; k < i; k++) z[k] -= val[si + k] * zi;
+  }
+  const y = new Float64Array(m);
+  for (let i = 0; i < m; i++) y[ord[i]] = z[i];
+  return y;
+}

package/src/solver/types.ts

@@ -35,6 +35,11 @@ export interface Solver {
   solve(sk: Sketch, heavy?: string[]): SolveResult;
   /** Move points toward targets and re-solve; reverts and returns false if that can't be satisfied. */
   drag(sk: Sketch, ids: string[], targets: XY[]): boolean;
+  /**
+   * Solve with the points `held` kept where they are as far as the constraints allow (heavy), and the rest moved only
+   * as far as the constraints need: nothing free drifts while the held ones are put back in line.
+   */
+  solveHolding(sk: Sketch, held: string[]): SolveResult;
   analyzeDOF(sk: Sketch): Analysis;
   /**
    * Add a constraint safely: independent → add + solve; redundant dimension → reference dimension;

package/src/styles.css

@@ -29,9 +29,18 @@ html{scroll-padding-top:env(safe-area-inset-top,0px)}
 *,*::before,*::after{box-sizing:inherit}
 html,body{height:100%;margin:0}
 body{background:var(--cv-bg);font-family:var(--font);color:#fff;overflow:hidden;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;overscroll-behavior:none}
-#app{position:relative;height:100%;overflow:hidden}
+/* clip, not just hidden: nothing may scroll the editor itself — the closed drawer and the sheets waiting off-screen
+   made it scrollable, and scrolling one into view (a test's click, the browser revealing a focused field) shifted the
+   whole page sideways under the pointer */
+#app{position:relative;height:100%;overflow:hidden;overflow:clip}
 #cv{position:absolute;inset:0;width:100%;height:100%;touch-action:none;display:block;outline:none}
 button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
+/* how the chrome moves (as react/motion.tsx): changes of state move over 150 ms; a press sinks a touch in 70 ms and
+   comes back with the same easing; wide rows only dim, switches don't sink */
+button{transition:transform .15s cubic-bezier(.2,0,0,1),opacity .15s cubic-bezier(.2,0,0,1),background-color .15s cubic-bezier(.2,0,0,1),color .15s cubic-bezier(.2,0,0,1)}
+button:active:not([disabled]){transform:scale(.96);opacity:.82;transition-duration:.07s}
+.mlink:active:not([disabled]),.cf-item:active{transform:none;opacity:.7}
+.switch:active:not([disabled]){transform:none;opacity:1}
 button:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}
 svg{display:block;flex-shrink:0}
 input{font:inherit}
@@ -41,6 +50,8 @@ input{font:inherit}
 .top>*{pointer-events:auto}
 .tl,.tr{display:flex;align-items:center;gap:8px;min-width:0}
 .cbtn{width:46px;height:46px;border-radius:50%;background:var(--g3);border:1px solid rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 2px 10px rgba(0,0,0,.16);color:#fff;position:relative;transition:transform .12s}
+/* a round button whose menu is open (•••, Layers): its icon in yellow, as the React editor shows it */
+.cbtn[aria-expanded="true"]{color:var(--yellow)}
 .cbtn:active{transform:scale(.93)}
 .cbtn.bt{background:var(--blue);border-color:transparent}
 .cbtn.off{color:var(--lg1)}
@@ -70,7 +81,7 @@ input{font:inherit}
 .hint{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
 
 /* left rail */
-.rail{position:absolute;left:12px;top:112px;background:var(--g2);border-radius:30px;padding:8px 6px;display:flex;flex-direction:column;align-items:center;gap:0;z-index:22;max-height:calc(100% - 196px);overflow-y:auto;scrollbar-width:none;box-shadow:0 6px 22px rgba(0,0,0,.26)}
+.rail{position:absolute;left:12px;top:112px;background:var(--g2);border-radius:26px;padding:6px;display:flex;flex-direction:column;align-items:center;gap:0;z-index:22;max-height:calc(100% - 196px);overflow-y:auto;scrollbar-width:none;box-shadow:0 6px 22px rgba(0,0,0,.26)}
 @media (max-height:760px){.rail button{width:38px;height:38px}.rail .div{margin:3px 0}}
 .rail::-webkit-scrollbar{display:none}
 .rail button{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#fff;transition:background .12s}
@@ -85,7 +96,7 @@ input{font:inherit}
 
 /* bottom contextual bar */
 .bottom{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);display:flex;align-items:center;gap:12px;z-index:24;max-width:calc(100% - 180px)}
-.ctx{display:flex;align-items:center;gap:2px;background:var(--g2);border-radius:34px;padding:6px 8px;overflow-x:auto;scrollbar-width:none;box-shadow:0 6px 22px rgba(0,0,0,.26);max-width:100%}
+.ctx{display:flex;align-items:center;gap:2px;background:var(--g2);border-radius:33px;padding:6px;overflow-x:auto;scrollbar-width:none;box-shadow:0 6px 22px rgba(0,0,0,.26);max-width:100%}
 .ctx::-webkit-scrollbar{display:none}
 .cb{min-width:58px;height:54px;border-radius:27px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:#fff;font-size:10.5px;font-weight:500;padding:0 8px;flex-shrink:0;white-space:nowrap;transition:background .12s}
 .cb:hover{background:rgba(255,255,255,.08)}
@@ -95,7 +106,7 @@ input{font:inherit}
 .cb.locked{color:var(--red)}
 .ctx .sep{width:1px;height:32px;background:var(--g3);margin:0 4px;flex-shrink:0}
 .ctx .lbl{font-size:12px;color:var(--lg1);padding:0 10px;white-space:nowrap;flex-shrink:0}
-.addbtn{width:48px;height:48px;border-radius:50%;background:var(--yellow);color:var(--dark);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-left:4px}
+.addbtn{width:48px;height:48px;border-radius:50%;background:var(--yellow);color:var(--dark);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-left:4px;margin-right:3px}
 /* the + stays pinned at the end of the bar while the other actions scroll under it (phone) */
 .ctx .addbtn{position:sticky;right:0;z-index:1;box-shadow:0 0 0 6px var(--g2),-16px 0 10px -2px var(--g2)}
 .ctx:has(.addbtn){padding-right:6px}
@@ -123,12 +134,16 @@ input{font:inherit}
 .welcome .ypill{height:38px;font-size:14px}
 
 /* drawer */
-.drawer{position:absolute;top:0;right:0;bottom:0;width:350px;max-width:100%;background:var(--g1);z-index:50;transform:translateX(105%);transition:transform .28s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column;box-shadow:-8px 0 30px rgba(0,0,0,.3);color:#fff}
+.drawer{position:absolute;top:0;right:0;bottom:0;width:350px;max-width:100%;background:var(--g1);border-top:1px solid var(--g2);border-left:1px solid var(--g2);z-index:50;transform:translateX(calc(100% + 40px));transition:transform .22s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;box-shadow:-8px 0 30px rgba(0,0,0,.3);color:#fff}
 .drawer.show{transform:none}
+/* (sliding out it takes no taps: a tap on the drawing as it goes lands on the drawing, as with the backdrop) */
+.drawer:not(.show){pointer-events:none}
 .dh{display:flex;align-items:center;justify-content:space-between;padding:16px 14px 10px 16px;gap:10px}
 .tabs{display:flex;background:var(--dark);border-radius:20px;padding:3px}
+.tabs[hidden]{display:none}
 .tabs button{padding:8px 14px;border-radius:17px;font-size:13px;font-weight:600;color:var(--lg1)}
 .tabs button[aria-selected="true"]{background:#fff;color:var(--dark)}
+.dtitle{font-size:17px;font-weight:700;color:#fff;padding-left:2px}
 .dclose{width:38px;height:38px;border-radius:50%;background:var(--g2);display:flex;align-items:center;justify-content:center}
 .dbody{flex:1;overflow-y:auto;padding:6px 16px 30px;scrollbar-width:thin}
 .field{width:100%;background:transparent;border:1px solid transparent;border-radius:8px;color:#fff;padding:6px 8px;margin-left:-8px;font-weight:600}
@@ -148,10 +163,14 @@ input{font:inherit}
 .sec{font-size:13px;font-weight:600;color:var(--g4);margin:18px 0 8px}
 .row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--g2);font-size:14px}
 .row small{display:block;color:var(--g4);font-size:12px;margin-top:2px}
-.switch{width:46px;height:28px;border-radius:14px;background:var(--g3);position:relative;flex-shrink:0;transition:background .15s}
-.switch::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:transform .15s}
-.switch[aria-checked="true"]{background:var(--blue)}
-.switch[aria-checked="true"]::after{transform:translateX(18px)}
+/* BOLDR's toggle: grey with the knob left when off, green with it right when on (the Figma's 69 × 36, scaled) */
+.switch{width:48px;height:25px;border-radius:100px;background:var(--g4);position:relative;flex-shrink:0;transition:background-color .26s cubic-bezier(.4,0,.2,1)}
+.switch::after{content:"";position:absolute;top:2px;left:2px;width:21px;height:21px;border-radius:11px;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.2);transition:transform .26s cubic-bezier(.4,0,.2,1),width .26s cubic-bezier(.4,0,.2,1)}
+.switch[aria-checked="true"]{background:#58A942}
+.switch[aria-checked="true"]::after{transform:translateX(23px)}
+/* pressed in, as Apple's: the knob stretches toward the side it's about to go, and rounds up again as it lets go */
+.switch:active:not([disabled])::after{width:27px;transition-duration:.12s}
+.switch[aria-checked="true"]:active:not([disabled])::after{transform:translateX(17px)}
 input[type=range]{width:120px;accent-color:var(--yellow)}
 .roomrow{background:var(--g2);border-radius:10px;padding:8px 10px;margin-bottom:8px}
 .roomrow .field{font-size:14px}
@@ -166,32 +185,34 @@ input[type=range]{width:120px;accent-color:var(--yellow)}
 .sheet.show{transform:none;visibility:visible;transition:transform .28s cubic-bezier(.2,.8,.2,1),visibility 0s}
 .sheet .handle{width:50px;height:5px;border-radius:3px;background:var(--g4);margin:0 auto 14px}
 @media (min-width:900px){
-  .sheet{left:auto;right:16px;bottom:16px;width:380px;border-radius:20px}
+  .sheet{left:auto;right:16px;bottom:16px;width:360px;border-radius:20px;border-bottom:1px solid var(--g3);padding-top:16px}
   .sheet .handle{display:none}
   .backdrop{background:transparent}
 }
-.kp-title{display:flex;align-items:center;justify-content:space-between;font-size:16px;font-weight:600;margin-bottom:10px}
-.kp-title small{font-size:12px;color:var(--g4);font-weight:500}
-.kp-display{background:var(--blue);border-radius:8px;min-height:84px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px 10px;margin-bottom:10px}
-.kp-display input{width:100%;background:transparent;border:0;color:#fff;font-size:32px;font-weight:700;text-align:center;letter-spacing:-.3px;outline:none;caret-color:var(--yellow)}
-.kp-display input::placeholder{color:rgba(255,255,255,.45)}
-.kp-prev{font-size:13px;color:var(--lblue2);min-height:17px;font-weight:500}
-.kp-prev.bad{color:#FFC9C4}
+.kp{--key:#4B6074;--key2:#67819A;--mred:#DF6358}
+.sheet.kp,.sheet.cf{border:1px solid var(--g3);border-bottom:0;padding-left:16px;padding-right:16px;box-shadow:0 5px 15px rgba(0,0,0,.75)}
+@media (min-width:900px){.sheet.kp,.sheet.cf{border-bottom:1px solid var(--g3)}}
+.kp-title{display:flex;align-items:center;gap:12px;font-size:16px;font-weight:600;margin-bottom:12px}
+.kp-title small{flex:1;text-align:right;font-size:12px;color:var(--lg1);font-weight:500}
+.kp-x{width:20px;height:20px;display:flex;align-items:center;justify-content:center;color:#fff}
+.kp-display{background:var(--dark);border-radius:12px;min-height:80px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px 12px;margin-bottom:12px}
+.kp-display input{width:100%;background:transparent;border:0;color:#fff;font-size:34px;font-weight:700;text-align:center;letter-spacing:-.3px;outline:none;caret-color:var(--yellow)}
+.kp-display input::placeholder{color:rgba(255,255,255,.4)}
+.kp-prev{font-size:13px;color:var(--lg1);min-height:16px;font-weight:500;margin-top:2px}
+.kp-prev.bad{color:#FFB4AE}
 .kp-extra{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
 .kp-extra:empty{display:none}
-.kp-extra button{height:36px;padding:0 12px;border-radius:18px;background:var(--g2);font-size:13px;font-weight:600;color:var(--lg2);display:flex;align-items:center;gap:6px}
-.kp-extra button.on{background:#fff;color:var(--dark)}
-.kp-extra button.danger{color:#FFB4AE}
-.kp-fr{display:grid;grid-template-columns:repeat(8,1fr);gap:5px;margin-bottom:8px}
-.kp-fr button{height:38px;border-radius:7px;background:var(--g3);font-size:13px;font-weight:600}
+.kp-extra button{height:30px;padding:0 10px;border-radius:7px;background:var(--dark);border:.5px solid var(--g3);font-size:13px;font-weight:500;color:#fff;display:flex;align-items:center;gap:6px}
+.kp-extra button.on{background:#fff;border-color:#fff;color:var(--dark)}
+.kp-extra button.danger{color:var(--mred)}
+.kp-fr{display:grid;grid-template-columns:repeat(8,1fr);gap:5px;margin-bottom:7px}
+.kp-fr button{height:32px;border-radius:7px;background:var(--key2);font-size:12px;font-weight:600}
 .keys{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-bottom:12px}
-.key{height:52px;border-radius:8px;background:var(--g2);font-size:21px;font-weight:600;color:#fff;transition:background .1s;display:flex;align-items:center;justify-content:center}
-.key:active{background:var(--g3)}
-.key.alt{background:var(--g3);font-size:16px}
-.key.laser{background:var(--blue);font-size:13px;gap:4px}
-.key.laser[disabled]{opacity:.35}
-.kp-actions{display:flex;gap:10px}
-.kp-actions .ypill{flex:1}
+.key{height:50px;border-radius:8px;background:var(--key);font-size:22px;font-weight:700;color:#fff;display:flex;align-items:center;justify-content:center}
+.key.alt{background:var(--key2)}
+.key.wide{grid-column:span 3}
+.key.del{background:var(--mred);font-size:17px;font-weight:500}
+.kp-apply{width:100%;height:46px;border-radius:12px;background:var(--yellow);color:var(--dark);font-size:16px;font-weight:600}
 .gbtn{height:46px;padding:0 18px;border-radius:24px;background:var(--g2);color:#fff;font-weight:600;font-size:15px}
 .cf h3{margin:0 0 6px;font-size:18px;font-weight:600}
 .cf p{margin:0 0 12px;color:var(--lg1);font-size:14px;line-height:1.45}
@@ -204,6 +225,18 @@ input[type=range]{width:120px;accent-color:var(--yellow)}
 .menu{position:absolute;top:66px;right:12px;width:300px;background:var(--g1);border-radius:15px;padding:12px 14px;z-index:58;box-shadow:0 10px 30px rgba(0,0,0,.35);display:none;color:#fff;max-height:calc(100% - 90px);overflow-y:auto}
 .menu.show{display:block}
 .menu .mrow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;font-size:14px}
+.menu.layers{width:330px}
+.menu .mrow small{display:block;color:var(--g4);font-size:12px;margin-top:2px}
+.menu .thispage{margin:2px 0 8px}
+/* the selected image's opacity slider, just above the bar */
+.opacity-pop{position:absolute;z-index:57;width:340px;display:none;align-items:center;gap:10px;background:var(--g2);border-radius:24px;padding:8px 16px;min-height:48px;box-sizing:border-box;box-shadow:0 8px 24px rgba(0,0,0,.3);color:var(--lg2);font-size:12.5px;font-weight:600}
+.opacity-pop.show{display:flex}
+.opacity-pop input{flex:1;accent-color:#fff}
+.opacity-pop b{width:48px;text-align:right;color:#fff}
+/* Reset sits concentric in the slider: the same 8 above, below and beside it, its radius the slider's less that */
+#rotatePop{padding-right:8px}
+.opacity-pop .pop-reset{height:32px;padding:0 16px;border-radius:16px;background:var(--g3);color:#fff;font-size:12.5px;font-weight:600}
+.opacity-pop .pop-reset:disabled{opacity:.4}
 .seg{display:flex;background:var(--dark);border-radius:16px;padding:3px}
 .seg button{padding:6px 10px;border-radius:13px;font-size:12.5px;font-weight:600;color:var(--lg1)}
 .seg button[aria-pressed="true"]{background:#fff;color:var(--dark)}
@@ -213,10 +246,34 @@ input[type=range]{width:120px;accent-color:var(--yellow)}
 .keys-list{display:none;font-size:12.5px;color:var(--lg1);line-height:1.7;padding-bottom:6px}
 .keys-list.show{display:block}
 .keys-list kbd{font-family:inherit;color:var(--yellow);font-weight:600;display:inline-block;min-width:64px}
-.palette{position:absolute;z-index:58;background:var(--g1);border-radius:24px;padding:8px;display:none;gap:6px;box-shadow:0 8px 24px rgba(0,0,0,.3)}
+.palette{position:absolute;z-index:58;width:264px;max-height:calc(100% - 16px);overflow-y:auto;background:var(--g1);border:1px solid var(--g2);border-radius:20px;padding:12px;display:none;flex-direction:column;gap:8px;box-shadow:0 8px 24px rgba(0,0,0,.3)}
 .palette.show{display:flex}
-.palette button{width:30px;height:30px;border-radius:50%;border:2px solid transparent}
-.palette button.on{border-color:#fff}
+.pl-label{font-size:11px;font-weight:600;color:var(--g4);text-transform:uppercase;letter-spacing:.5px;margin-top:2px}
+.pl-swatches{display:flex;flex-wrap:wrap;gap:10px}
+.pl-swatch{width:40px;height:32px;border-radius:16px;border:2px solid rgba(255,255,255,.18)}
+.pl-swatch.on{border:3px solid #fff}
+.pl-row{display:flex;gap:8px;align-items:center}
+.pl-opt{flex:1;height:40px;border-radius:12px;border:1px solid rgba(255,255,255,.18);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;color:#fff;font-size:10px;font-weight:500}
+.pl-opt.tall{height:48px}
+.pl-opt.on{border-color:#fff;background:var(--blue)}
+.pl-opt i{display:block;background:#fff}
+.pv-dot{border-radius:10px}
+.pv-bar{width:24px;height:5px}
+.pv-row{display:flex;align-items:center;gap:3px}
+.pv-dash{width:6px;height:5px}
+.pv-row .pv-dot{width:5px;height:5px;border-radius:3px}
+.pv-cap{width:22px;height:7px}
+.pv-cap.round{border-radius:4px}
+.pv-arrow{gap:0}
+.pv-arrow.start{flex-direction:row-reverse}
+.pv-shaft{width:13px;height:5px}
+.pl-opt i.pv-head{width:0;height:0;background:none;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:9px solid #fff}
+.pl-opt .pv-arrow.start i.pv-head{border-left:0;border-right:9px solid #fff}
+
+/* what a tool just picked does: a line under the tabs that goes by itself */
+.tooltip-note{position:absolute;top:66px;left:50%;transform:translate(-50%,-4px);max-width:min(460px,calc(100% - 24px));background:var(--g1);border:1px solid var(--g2);color:var(--lg2);border-radius:16px;padding:8px 14px;font-size:13px;text-align:center;z-index:29;opacity:0;pointer-events:none;transition:opacity .24s cubic-bezier(.4,0,.2,1),transform .24s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 11px rgba(0,0,0,.22)}
+.tooltip-note.show{opacity:1;transform:translate(-50%,0);transition-duration:.16s}
+@media (max-width:760px){.tooltip-note{top:120px}}
 
 /* toast */
 .toast{position:absolute;left:50%;bottom:96px;transform:translate(-50%,12px);background:var(--dark);border:1px solid var(--g2);color:#fff;border-radius:12px;padding:11px 14px;font-size:14px;line-height:1.35;z-index:70;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;display:flex;align-items:center;gap:14px;max-width:min(520px,calc(100% - 32px));box-shadow:0 8px 24px rgba(0,0,0,.3)}
@@ -252,7 +309,8 @@ input[type=range]{width:120px;accent-color:var(--yellow)}
 @media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
 
 /* ---------- wall elevation sheet ---------- */
-.elev{position:absolute;inset:0;z-index:54;background:var(--cv-bg);display:none;flex-direction:column}
+.elev{position:absolute;top:0;left:0;right:0;z-index:54;display:none;flex-direction:column;pointer-events:none}
+.elev>*{pointer-events:auto}
 .elev.show{display:flex;animation:elevIn .22s cubic-bezier(.2,.8,.2,1)}
 @keyframes elevIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
 .elev-top{display:flex;align-items:center;gap:10px;padding:12px;padding-top:max(12px,env(safe-area-inset-top));flex-shrink:0}
@@ -260,12 +318,3 @@ input[type=range]{width:120px;accent-color:var(--yellow)}
 .elev-title b{font-size:14px;color:#fff;white-space:nowrap}
 .elev-title small{font-size:12px;color:var(--lg1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .elev-flip{color:#fff;font-size:14px;font-weight:600;gap:8px}
-.elev-body{position:relative;flex:1;min-height:0}
-.elev-body canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;display:block}
-.elev-bar{position:absolute;left:50%;bottom:max(16px,env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;align-items:center;gap:6px;background:var(--g2);border-radius:34px;padding:6px 6px 6px 20px;box-shadow:0 6px 22px rgba(0,0,0,.26);color:#fff;font-size:14px;font-weight:600;white-space:nowrap}
-.elev-bar[hidden]{display:none}
-.elev .trash{position:absolute;right:16px;bottom:max(16px,env(safe-area-inset-bottom))}
-.elev-acts{display:flex;align-items:center;gap:2px;margin-left:6px}
-.elev-acts:empty{display:none}
-.elev-rail{top:12px;max-height:calc(100% - 24px)}
-.elev-bar .addbtn[hidden]{display:none}