@reekon-tools/boldr-cad 0.1.0 → 1.0.0

package/src/ui/menu.ts

@@ -7,26 +7,43 @@ import { updateCrumb } from './drawer';
 import { closePopovers } from './palette';
 import { applyTheme } from './theme';
 import { disarmReset, exportDxf, exportPdf, openProjectText, resetToDemo, saveProjectFile } from '../editor/files';
+import {
+  editDefaultWallHeight, LAYER_ROWS, layerOn, setDefaultWallHeight, toggleLayer,
+  WALL_PRESETS, type LayerKey,
+} from '../editor/project';
+import { fmtLen } from '../units';
 import { bindTip } from './tip';
 import { toast } from './toast';
 
+/** The open menu: ••• (exports, files and settings) or Layers (the stack). */
+let kind: 'more' | 'layers' = 'more';
+
 function renderMenu(): void {
   const m = $('#menu');
+  $('#btnMore').setAttribute('aria-expanded', String(kind === 'more'));
+  $('#btnLayers').setAttribute('aria-expanded', String(kind === 'layers'));
+  m.setAttribute('aria-label', kind === 'layers' ? 'Layers' : 'Settings');
+  m.classList.toggle('layers', kind === 'layers');
+  if (kind === 'layers') { renderLayers(m); return; }
   const seg = (key: keyof Settings, opts: [string | number, string][]) =>
     `<div class="seg">${opts.map(([v, l]) => `<button data-k="${key}" data-v="${v}" aria-pressed="${String(settings[key]) === String(v)}">${l}</button>`).join('')}</div>`;
   const tg = (key: keyof Settings, label: string) =>
     `<div class="mrow"><span>${label}</span><button class="switch" role="switch" aria-label="${label}" aria-checked="${settings[key]}" data-t="${key}"></button></div>`;
-  m.innerHTML = `<button class="mlink" id="mSaveFile">Save project to file…</button>
-    <button class="mlink" id="mOpenFile">Open project from file…</button><hr>
-    <button class="mlink" id="mPdf">Export page as PDF (.pdf)</button>
+  // the exports first (as in the React editor: there's no share button of its own)
+  m.innerHTML = `<button class="mlink" id="mPdf">Export page as PDF (.pdf)</button>
     <button class="mlink" id="mDxf">Export page as DXF (.dxf)</button><hr>
+    <button class="mlink" id="mSaveFile">Save project to file…</button>
+    <button class="mlink" id="mOpenFile">Open project from file…</button><hr>
   <div class="mrow"><span>Units</span>${seg('unit', [['ftin', 'ft-in'], ['in', 'in'], ['mm', 'mm']])}</div>
   <div class="mrow"><span>Precision</span>${seg('denom', [[16, '1/16"'], [8, '1/8"'], [4, '1/4"']])}</div>
-  <div class="mrow"><span>Wall height</span>${seg('wallH', [[96, "8'"], [108, "9'"], [120, "10'"]])}</div>
-  ${tg('snapGrid', 'Snap to grid')}${tg('autoCons', 'Auto-constrain while drawing')}
+  <div class="mrow"><span>Wall height</span><div class="seg">${[[96, "8'"], [108, "9'"], [120, "10'"]].map(([v, l]) => `<button data-wall="${v}" aria-pressed="${settings.wallH === v}">${l}</button>`).join('')}<button data-wall="custom" aria-pressed="${!WALL_PRESETS.includes(settings.wallH)}">${WALL_PRESETS.includes(settings.wallH) ? 'Custom' : fmtLen(settings.wallH)}</button></div></div>
+  ${tg('snapGrid', 'Snap to grid')}
+  <div class="mrow"><span>Object snapping</span><button class="switch" role="switch" aria-label="Object snapping" aria-checked="${layerOn('objSnap')}" id="mObjSnap"></button></div>
+  ${tg('autoCons', 'Auto-constrain while drawing')}
+  ${tg('toolTips', 'Tool tips')}
   <div class="mrow"><span>Theme</span>${seg('theme', [['system', 'Auto'], ['light', 'Light'], ['dark', 'Dark']])}</div><hr>
   <button class="mlink" id="mKeys">Keyboard shortcuts</button>
-  <div class="keys-list" id="keysList"><kbd>V L W R</kbd>Select, line, wall, rectangle<br><kbd>S</kbd>Draw to shape (freehand → lines)<br><kbd>C A D</kbd>Circle, arc, dimension<br><kbd>T O M</kbd>Trim, offset, space<br><kbd>B N</kbd>Door, window<br><kbd>⇧H ⇧V</kbd>Horizontal, vertical<br><kbd>⇧P ⇧R ⇧E</kbd>Parallel, perpendicular, equal<br><kbd>⇧L ⇧T</kbd>Collinear, tangent<br><kbd>⇧M ⇧O ⇧F</kbd>Midpoint, on line, lock<br><kbd>X G F</kbd>Construction, grid snap, fit<br><kbd>Esc</kbd>Cancel the step, then back to Select<br><kbd>Space</kbd>Hold and drag to pan<br><kbd>⌘Z ⇧⌘Z</kbd>Undo, redo<br><kbd>2 / 3 fingers</kbd>Tap to undo / redo</div>
+  <div class="keys-list" id="keysList"><kbd>V L R</kbd>Select, line, rectangle<br><kbd>S</kbd>Draw to shape (freehand → lines)<br><kbd>C A D</kbd>Circle, arc, dimension<br><kbd>T O M</kbd>Trim, offset, space<br><kbd>B N</kbd>Door, window<br><kbd>⇧H ⇧V</kbd>Horizontal, vertical<br><kbd>⇧P ⇧R ⇧E</kbd>Parallel, perpendicular, equal<br><kbd>⇧L ⇧T</kbd>Collinear, tangent<br><kbd>⇧M ⇧O ⇧F</kbd>Midpoint, on line, lock<br><kbd>W X</kbd>Draw walls, construction lines (on or off)<br><kbd>G F</kbd>Grid snap, fit<br><kbd>Esc</kbd>Cancel the step, then back to Select<br><kbd>Space</kbd>Hold and drag to pan<br><kbd>⇧ drag</kbd>Level, plumb or 45° while drawing or dragging<br><kbd>⌘Z ⇧⌘Z</kbd>Undo, redo<br><kbd>2 / 3 fingers</kbd>Tap to undo / redo</div>
   <button class="mlink" id="mCopy">Copy page data (JSON)</button>
   <button class="mlink" id="mHelp">Show the quick start again</button>
   <button class="mlink danger" id="mReset">Reset to the demo project</button>`;
@@ -38,10 +55,18 @@ function renderMenu(): void {
     afterEdit();
   }));
   m.querySelectorAll<HTMLElement>('[data-t]').forEach(b => (b.onclick = () => {
-    const k = b.dataset.t as 'snapGrid' | 'autoCons';
+    const k = b.dataset.t as 'snapGrid' | 'autoCons' | 'toolTips';
     settings[k] = !settings[k];
     renderMenu(); updateCtx(); saveSoon();
   }));
+  $('#mObjSnap').onclick = () => { toggleLayer('objSnap'); renderMenu(); };
+  // Wall height: a preset, or Custom on the keypad
+  m.querySelectorAll<HTMLElement>('[data-wall]').forEach(b => (b.onclick = () => {
+    if (b.dataset.wall === 'custom') { closeMenu(); editDefaultWallHeight(); return; }
+    if (setDefaultWallHeight(+b.dataset.wall!)) renderMenu();
+  }));
+  $('#mPdf').onclick = () => { closeMenu(); exportPdf(); };
+  $('#mDxf').onclick = () => { closeMenu(); exportDxf(); };
   $('#mKeys').onclick = () => $('#keysList').classList.toggle('show');
   $('#mCopy').onclick = async () => {
     try { await navigator.clipboard.writeText(JSON.stringify({ page: page().name, sketch: SK() }, null, 1)); toast('Page data copied'); }
@@ -49,8 +74,6 @@ function renderMenu(): void {
   };
   $('#mSaveFile').onclick = () => { m.classList.remove('show'); saveProjectFile(); };
   $('#mOpenFile').onclick = () => { m.classList.remove('show'); $<HTMLInputElement>('#projFile').click(); };
-  $('#mPdf').onclick = () => { m.classList.remove('show'); exportPdf(); };
-  $('#mDxf').onclick = () => { m.classList.remove('show'); exportDxf(); };
   $('#mHelp').onclick = () => { m.classList.remove('show'); $('#welcome').hidden = false; };
   $('#mReset').onclick = () => {
     if (!resetToDemo()) { $('#mReset').textContent = 'Tap again to reset — this clears your pages'; return; }
@@ -59,6 +82,21 @@ function renderMenu(): void {
   };
 }
 
+/** The Layers menu: the photos and plans under the drawing, then each layer's switch (an image's own lock, scale and opacity are in its bar). */
+function renderLayers(m: HTMLElement): void {
+  const ims = page().underlays, n = ims.length;
+  const sw = (key: string, label: string, sub: string, val: boolean) =>
+    `<div class="mrow"><div>${label}${sub ? `<small>${sub}</small>` : ''}</div><button class="switch" role="switch" aria-label="${label}" aria-checked="${val}" data-sw="${key}"></button></div>`;
+  let h = sw('underlay', n > 1 ? 'Photos and plans' : 'Photo or plan underlay', n > 1 ? n + ' images under the drawing' : n ? 'Traced image under the drawing' : 'None on this page', settings.layers.underlay);
+  h += '<hr>' + LAYER_ROWS.map(([k, label, sub]) => sw(k, label, sub, layerOn(k))).join('');
+  m.innerHTML = h;
+  m.querySelectorAll<HTMLElement>('[data-sw]').forEach(b => (b.onclick = () => {
+    const k = b.dataset.sw as LayerKey;
+    toggleLayer(k);
+    b.setAttribute('aria-checked', String(layerOn(k)));
+  }));
+}
+
 /** Save a file through a temporary download link. */
 export function download(blob: Blob, name: string): void {
   const a = document.createElement('a');
@@ -79,14 +117,21 @@ export function doSave(): void {
   toast(ok ? 'Saved on this device' : 'Saved, but the image was too large to keep offline.', { warn: !ok });
 }
 
+function closeMenu(): void {
+  $('#menu').classList.remove('show');
+  for (const id of ['#btnMore', '#btnLayers']) $(id).setAttribute('aria-expanded', 'false');
+}
+
 export function initMenu(): void {
-  $('#btnMore').onclick = e => {
-    e.stopPropagation();
-    const m = $('#menu');
-    if (m.classList.contains('show')) m.classList.remove('show');
-    else { disarmReset(); renderMenu(); m.classList.add('show'); }
-  };
-  document.addEventListener('pointerdown', e => { if (!(e.target as Element).closest('#menu,#btnMore,#palette,.rail,.ctx')) closePopovers(); });
+  for (const [id, k] of [['#btnMore', 'more'], ['#btnLayers', 'layers']] as const) {
+    $(id).onclick = e => {
+      e.stopPropagation();
+      const m = $('#menu');
+      if (m.classList.contains('show') && kind === k) closeMenu();
+      else { kind = k; disarmReset(); renderMenu(); m.classList.add('show'); }
+    };
+  }
+  document.addEventListener('pointerdown', e => { if (!(e.target as Element).closest('#menu,#btnMore,#btnLayers,#palette,#opacityPop,#rotatePop,.rail,.ctx')) closePopovers(); });
   $('#btnSave').onclick = doSave;
   $<HTMLInputElement>('#projFile').onchange = e => {
     const input = e.target as HTMLInputElement, f = input.files && input.files[0];
@@ -95,6 +140,7 @@ export function initMenu(): void {
   };
   bindTip($('#btnSave'), 'Save', '⌘S');
   bindTip($('#btnLayers'), 'Layers', '');
-  bindTip($('#btnMore'), 'Settings', '');
+  bindTip($('#btnProject'), 'Pages and spaces', '');
+  bindTip($('#btnMore'), 'Share, settings and more', '');
   bindTip($('#btnPages'), 'Project pages', '');
 }

package/src/ui/noteinput.ts

@@ -5,15 +5,15 @@ import { onSessionReset } from '../model/session';
 let noteCb: ((txt: string) => void) | null = null;
 onSessionReset(() => { noteCb = null; });
 
-export function showNoteInput(sx: number, sy: number, cb: (txt: string) => void): void {
+export function showNoteInput(sx: number, sy: number, cb: (txt: string) => void, initial = ''): void {
   const el = $<HTMLInputElement>('#noteIn');
   const r = cvs.cv.getBoundingClientRect();
   el.style.left = r.left + sx + 'px';
   el.style.top = r.top + sy - 18 + 'px';
-  el.value = '';
+  el.value = initial;
   el.style.display = 'block';
   noteCb = cb;
-  setTimeout(() => el.focus({ preventScroll: true }), 30);
+  setTimeout(() => { el.focus({ preventScroll: true }); el.select(); }, 30);
 }
 
 export function hideNoteInput(): void {

package/src/ui/opacity.ts

@@ -0,0 +1,108 @@
+import { ed } from '../app/state';
+import { OPACITY_MIN, OPACITY_STEP, ROTATE_MAX, ROTATE_STEP, setUnderlayOpacity, setUnderlayRotation } from '../editor/project';
+import { pushHistory } from '../model/history';
+import { imageById } from '../model/images';
+import { $ } from './dom';
+
+/*
+  The selected image's sliders, just above the bar: its opacity, or how far it's turned (Opacity or Rotate in the bar
+  opens and closes each; opening one closes the other).
+*/
+
+type Kind = 'opacity' | 'rotate';
+const fmtDeg = (v: number): string => (Math.round(v * 2) / 2).toString().replace('-', '−') + '°';
+const KINDS: Record<Kind, {
+  id: string; label: string; aria: string; min: number; max: number; step: number;
+  get: (u: NonNullable<ReturnType<typeof selected>>) => number; set: (id: string, v: number) => void; show: (v: number) => string;
+}> = {
+  opacity: {
+    id: 'opacityPop', label: 'Opacity', aria: 'Image opacity', min: OPACITY_MIN, max: 100, step: OPACITY_STEP,
+    get: u => Math.round((u.opacity ?? 0.6) * 100), set: (id, v) => setUnderlayOpacity(id, v / 100), show: v => v + '%',
+  },
+  rotate: {
+    id: 'rotatePop', label: 'Rotate', aria: 'Image rotation', min: -ROTATE_MAX, max: ROTATE_MAX, step: ROTATE_STEP,
+    get: u => u.rot ?? 0, set: setUnderlayRotation, show: fmtDeg,
+  },
+};
+
+function pop(kind: Kind): HTMLElement {
+  const k = KINDS[kind];
+  let el = document.querySelector<HTMLElement>('#' + k.id);
+  if (!el) {
+    el = document.createElement('div');
+    el.id = k.id;
+    el.className = 'opacity-pop';
+    el.innerHTML = `<span>${k.label}</span><input type="range" min="${k.min}" max="${k.max}" step="${k.step}" aria-label="${k.aria}"><b></b>`
+      + (kind === 'rotate' ? '<button type="button" class="pop-reset" aria-label="Reset rotation">Reset</button>' : '');
+    $('#app').appendChild(el);
+    const input = el.querySelector('input')!;
+    // Reset: upright again (one undo step)
+    el.querySelector<HTMLButtonElement>('.pop-reset')?.addEventListener('click', () => {
+      const u = selected();
+      if (!u) return;
+      pushHistory();
+      k.set(u.id, 0);
+      input.value = '0';
+      el!.querySelector('b')!.textContent = k.show(0);
+      upright(el!, 0);
+    });
+    // one undo step for each drag
+    input.addEventListener('pointerdown', () => pushHistory());
+    input.oninput = () => {
+      const u = selected();
+      if (!u) return;
+      k.set(u.id, +input.value);
+      el!.querySelector('b')!.textContent = k.show(+input.value);
+      upright(el!, +input.value);
+    };
+  }
+  return el;
+}
+
+/** Reset has nothing to do once the image is upright: greyed out. */
+const upright = (el: HTMLElement, v: number) => { const b = el.querySelector<HTMLButtonElement>('.pop-reset'); if (b) b.disabled = Math.abs(v) < 1e-9; };
+
+const selected = () => (ed.sel.length === 1 && ed.sel[0].type === 'underlay' ? imageById(ed.sel[0].id) : undefined);
+
+function toggle(kind: Kind, anchor?: HTMLElement): void {
+  const el = pop(kind);
+  if (el.classList.contains('show')) { closeOpacity(); return; }
+  closeOpacity();
+  const u = selected();
+  if (!u) return;
+  const k = KINDS[kind], v = k.get(u);
+  el.querySelector('input')!.value = String(v);
+  el.querySelector('b')!.textContent = k.show(v);
+  upright(el, v);
+  // (a toast would sit over the slider: it's done with once the slider opens)
+  document.querySelector('#toast')?.classList.remove('show');
+  el.classList.add('show');
+  // centred over the bar, just above it
+  const bar = (anchor?.closest('.ctx') as HTMLElement | null) ?? document.querySelector<HTMLElement>('.ctx');
+  const ar = $('#app').getBoundingClientRect();
+  if (bar) {
+    const r = bar.getBoundingClientRect();
+    el.style.left = Math.max(8, Math.min(ar.width - el.offsetWidth - 8, r.left - ar.left + r.width / 2 - el.offsetWidth / 2)) + 'px';
+    el.style.top = r.top - ar.top - el.offsetHeight - 10 + 'px';
+  }
+}
+
+export const toggleOpacity = (anchor?: HTMLElement): void => toggle('opacity', anchor);
+export const toggleRotation = (anchor?: HTMLElement): void => toggle('rotate', anchor);
+
+/** Close whichever image slider is open; true if one was. */
+export function closeOpacity(): boolean {
+  let was = false;
+  for (const k of Object.values(KINDS)) {
+    const el = document.querySelector<HTMLElement>('#' + k.id);
+    if (el && el.classList.contains('show')) { el.classList.remove('show'); was = true; }
+  }
+  return was;
+}
+
+/** They close once the image isn't the one thing selected (and Rotate once it's locked). */
+export function refreshOpacity(): void {
+  const u = selected();
+  if (!u) { closeOpacity(); return; }
+  if (u.locked) document.querySelector('#rotatePop')?.classList.remove('show');
+}

package/src/ui/palette.ts

@@ -1,29 +1,84 @@
 import { ed } from '../app/state';
 import { clamp } from '../model/geom';
-import { NOTE_COLORS, setNoteColor } from '../editor/markup';
+import {
+  markupTarget, NOTE_CAPS, NOTE_COLORS, NOTE_STYLES, NOTE_WIDTHS, setNoteCap, setNoteColor, setNoteStyle, setNoteWidth,
+} from '../editor/markup';
+import type { NoteStyle } from '../model/markup';
+import type { NoteCap } from '../model/types';
 import { $ } from './dom';
 
+const STYLE_LABEL: Record<NoteStyle, string> = { solid: 'Solid', dash: 'Dashed', dot: 'Dotted' };
+const CAP_LABEL: Record<NoteCap, string> = { butt: 'Flat', round: 'Round', arrow: 'Arrow' };
+const stylePreview = (st: NoteStyle) =>
+  st === 'solid' ? '<i class="pv-bar"></i>' : '<span class="pv-row">' + ('<i class="pv-' + st + '"></i>').repeat(3) + '</span>';
+const capPreview = (cap: NoteCap, start: boolean) =>
+  cap === 'arrow' ? '<span class="pv-row pv-arrow' + (start ? ' start' : '') + '"><i class="pv-shaft"></i><i class="pv-head"></i></span>'
+    : '<i class="pv-cap' + (cap === 'round' ? ' round' : '') + '"></i>';
 
+let anchorEl: HTMLElement | null = null;
+
+/** The markup stroke panel (BOLDR's annotation set): color, width, solid / dashed / dotted, and the ends of a stroke. */
 export function openPalette(anchor: HTMLElement): void {
   const p = $('#palette');
-  p.innerHTML = '';
-  for (const c of NOTE_COLORS) {
-    const b = document.createElement('button');
-    b.style.background = c;
-    b.setAttribute('aria-label', 'Color ' + c);
-    if (c === ed.noteColor) b.className = 'on';
-    b.onclick = () => { setNoteColor(c); p.classList.remove('show'); };
-    p.appendChild(b);
-  }
+  if (p.classList.contains('show') && anchorEl === anchor) { p.classList.remove('show'); return; }
+  anchorEl = anchor;
+  renderPalette();
   const r = anchor.getBoundingClientRect(), ar = $('#app').getBoundingClientRect();
   p.classList.add('show');
   const w = p.offsetWidth;
   if (anchor.closest('.rail')) {
     p.style.left = r.right - ar.left + 10 + 'px';
-    p.style.top = r.top - ar.top + r.height / 2 - p.offsetHeight / 2 + 'px';
+    p.style.top = clamp(r.top - ar.top + r.height / 2 - p.offsetHeight / 2, 8, ar.height - p.offsetHeight - 8) + 'px';
   } else {
     p.style.left = clamp(r.left - ar.left + r.width / 2 - w / 2, 8, ar.width - w - 8) + 'px';
-    p.style.top = r.top - ar.top - p.offsetHeight - 10 + 'px';
+    p.style.top = Math.max(8, r.top - ar.top - p.offsetHeight - 10) + 'px';
+  }
+}
+
+/** Rebuild its contents (it stays open while things are set). */
+function renderPalette(): void {
+  const p = $('#palette'), t = markupTarget();
+  p.innerHTML = '';
+  const label = (text: string) => { const l = document.createElement('div'); l.className = 'pl-label'; l.textContent = text; p.appendChild(l); };
+  const row = (cls = 'pl-row') => { const d = document.createElement('div'); d.className = cls; p.appendChild(d); return d; };
+  const btn = (parent: HTMLElement, aria: string, on: boolean, html: string, act: () => void, cls = 'pl-opt') => {
+    const b = document.createElement('button');
+    b.className = cls + (on ? ' on' : '');
+    b.setAttribute('aria-label', aria);
+    b.setAttribute('aria-pressed', String(on));
+    b.innerHTML = html;
+    b.onclick = () => { act(); renderPalette(); };
+    parent.appendChild(b);
+    return b;
+  };
+  label('Color');
+  const sw = row('pl-swatches');
+  for (const c of NOTE_COLORS) btn(sw, 'Color ' + c, c === t.color, '', () => setNoteColor(c), 'pl-swatch').style.background = c;
+  if (t.widthApplies) {
+    label('Width');
+    const wr = row();
+    NOTE_WIDTHS.forEach((w, i) => btn(wr, 'Width ' + w, t.width === w, `<i class="pv-dot" style="width:${4 + i * 2.5}px;height:${4 + i * 2.5}px"></i>`, () => setNoteWidth(w)));
+  }
+  label('Style');
+  const sr = row();
+  for (const st of NOTE_STYLES) btn(sr, STYLE_LABEL[st], t.style === st, stylePreview(st) + '<span>' + STYLE_LABEL[st] + '</span>', () => setNoteStyle(st), 'pl-opt tall');
+  if (t.ends) {
+    for (const which of ['start', 'end'] as const) {
+      label(which === 'start' ? 'Start' : 'End');
+      const cr = row();
+      for (const cap of NOTE_CAPS) {
+        btn(cr, (which === 'start' ? 'Start: ' : 'End: ') + CAP_LABEL[cap], (which === 'start' ? t.startCap : t.endCap) === cap,
+          capPreview(cap, which === 'start') + '<span>' + CAP_LABEL[cap] + '</span>', () => setNoteCap(which, cap), 'pl-opt tall');
+      }
+    }
+  }
+}
+
+/** Keep an open panel in step with the selection. */
+export function refreshPalette(): void {
+  if ($('#palette').classList.contains('show')) {
+    if (ed.mode !== 'annotate') $('#palette').classList.remove('show');
+    else renderPalette();
   }
 }
 

package/src/ui/rail.ts

@@ -1,28 +1,30 @@
 import { redo, undo } from '../app/edit';
 import { ed, type Mode } from '../app/state';
-import { RAIL, setMode, toggleConstr } from '../editor/mode';
+import { railIcon, railItems, setMode, TOGGLES } from '../editor/mode';
 import { setTool } from '../tools/registry';
 import { $ } from './dom';
 import { icon } from './icons';
+import { markupTarget } from '../editor/markup';
 import { openPalette } from './palette';
 import { bindTip } from './tip';
-import { toast } from './toast';
+import { toolTip } from '../editor/tooltips';
 
 export function buildRail(): void {
   const rail = $('#rail');
   rail.innerHTML = '';
-  for (const it of RAIL[ed.mode]) {
+  for (const it of railItems()) {
     if (it === '|') { const d = document.createElement('div'); d.className = 'div'; rail.appendChild(d); continue; }
     const [id, label, key, kind] = it;
     const b = document.createElement('button');
     b.dataset.tool = id;
     b.setAttribute('aria-label', label);
     if (kind === 'toggle') b.classList.add('toggle');
-    b.innerHTML = id === 'color' ? '<span class="dot"></span>' : icon(id);
+    b.innerHTML = id === 'color' ? '<span class="dot"></span>' : icon(railIcon(id));
     b.onclick = () => {
       if (kind === 'act') railAction(id, b);
-      else if (kind === 'toggle') { toggleConstr(); toast(ed.drawConstr ? 'New lines are construction lines — guides that never make spaces.' : 'New lines are regular lines.'); }
+      else if (kind === 'toggle') TOGGLES[id]?.flip();
       else setTool(id);
+      if (kind !== 'act') showToolTip(toolTip(id, label));
     };
     bindTip(b, label, key, 'right');
     rail.appendChild(b);
@@ -33,13 +35,25 @@ export function buildRail(): void {
 export function updateRail(): void {
   document.querySelectorAll<HTMLElement>('#rail button').forEach(b => {
     const id = b.dataset.tool;
-    const on = id === ed.tool || (id === 'constr' && ed.drawConstr);
+    const on = b.classList.contains('toggle') ? !!TOGGLES[id!]?.on() : id === ed.tool;
     b.classList.toggle('on', on);
     b.setAttribute('aria-pressed', String(on));
-    if (id === 'color') (b.querySelector('.dot') as HTMLElement).style.background = ed.noteColor;
+    if (id === 'color') (b.querySelector('.dot') as HTMLElement).style.background = markupTarget().color;
   });
 }
 
+let tipT: ReturnType<typeof setTimeout> | undefined;
+/** What the tool just picked does, in a line under the Annotate / Draft tabs; it goes by itself. */
+function showToolTip(html: string | null): void {
+  if (!html) return;
+  let el = document.querySelector<HTMLElement>('#toolTip');
+  if (!el) { el = document.createElement('div'); el.id = 'toolTip'; el.className = 'tooltip-note'; el.setAttribute('aria-live', 'polite'); $('#app').appendChild(el); }
+  el.innerHTML = html;
+  el.classList.remove('show'); void el.offsetWidth; el.classList.add('show');
+  clearTimeout(tipT);
+  tipT = setTimeout(() => el!.classList.remove('show'), 2600);
+}
+
 function railAction(id: string, btn: HTMLElement): void {
   if (id === 'undo') undo();
   else if (id === 'redo') redo();

package/src/ui/topbar.ts

@@ -1,24 +1,14 @@
-import { settings } from '../model/settings';
 import { fitView } from '../render/view';
-import { applyCtxAction } from './ctx';
 import { $ } from './dom';
-import { icon } from './icons';
+import { refreshDrawerSoon } from './drawer';
 import { bindTip } from './tip';
 
-/* Top bar view controls next to Layers: Fit, and the constraint-icons toggle. */
+/* Top bar view controls: Fit, and Layers (the stack), which opens the Layers menu (ui/menu.ts). */
 
-export function updateTopBar(): void {
-  const b = $('#btnIcons');
-  if (!b) return;
-  b.setAttribute('aria-pressed', String(settings.showCons));
-  b.innerHTML = icon(settings.showCons ? 'eye' : 'eyeoff');
-  b.classList.toggle('off', !settings.showCons);
-}
+/** What's shown changed (constraint icons toggled from the keyboard, say): the Layers panel's switches follow. */
+export function updateTopBar(): void { refreshDrawerSoon(); }
 
 export function initTopBar(): void {
   $('#btnFit').onclick = () => fitView();
-  $('#btnIcons').onclick = () => applyCtxAction('showcons');
   bindTip($('#btnFit'), 'Fit to screen', 'F');
-  bindTip($('#btnIcons'), 'Constraint icons', '');
-  updateTopBar();
 }

package/src/units/format.ts

@@ -1,13 +1,28 @@
 import { getUnitPrefs, type UnitPrefs } from './prefs';
 
 let custom: ((inches: number) => string) | null = null;
-/** Format lengths the host's way (e.g. BOLDR's units and precision); null: back to the built-in units. */
-export function setLengthFormatter(fn: ((inches: number) => string) | null): void { custom = fn; }
+let hostPrefs: UnitPrefs | null = null;
+/** The person picked the editor's own units in Settings over the host's. */
+let own = false;
+/**
+ * Format lengths the host's way (e.g. BOLDR's units and precision); `prefs` are the built-in units that come closest
+ * (for reading typed values). null: back to the built-in units.
+ */
+export function setLengthFormatter(fn: ((inches: number) => string) | null, prefs?: UnitPrefs): void {
+  custom = fn;
+  hostPrefs = fn && prefs ? { ...prefs } : null;
+  own = false;
+}
+/** The host's units (BOLDR: the person's account settings), when the host formats lengths. */
+export const hostUnits = (): UnitPrefs | null => (custom ? hostPrefs ?? { unit: 'ftin', denom: 16 } : null);
+/** Lengths read the host's way, rather than in units picked in the editor. */
+export const followingHostUnits = (): boolean => !!custom && !own;
+export function setOwnUnits(v: boolean): void { own = v; }
 
 /** Format a length in inches: 150.5 → 12'-6 1/2" (ft-in), 150 1/2" (in), 3,823 mm (mm). */
 export function fmtLen(v: number, u: UnitPrefs = getUnitPrefs()): string {
   v = Math.abs(v);
-  if (custom && u === getUnitPrefs()) return custom(v);
+  if (custom && !own && u === getUnitPrefs()) return custom(v);
   if (u.unit === 'mm') return Math.round(v * 25.4).toLocaleString() + ' mm';
   const d = u.denom;
   const t = Math.round(v * d) / d;