@kupcad/ui 0.1.7 → 0.1.9

package/README.md

@@ -76,10 +76,12 @@ For Svelte, the component around it (`@kupcad/ui`'s `Viewer`):
   what is drawn there, so the mark shows on a part of any colour). The face is what its feature edges
   bound (`faces.js`: triangles joined where they meet at less than the edges' 20°), flat when it
   faces one way (its area in mm², its way, and `+Z (top)` when along an axis) or curved (its
-  area). Which triangles meet which is found once a mesh, as the pointer first meets it, in typed
-  arrays (a third of a second for a million triangles), and each face once, its area kept while
-  the mesh doesn't move. A ghost, seen through, is under nothing, and neither is what a section
-  cut away.
+  area). Which triangles meet which is found once a mesh, when its edges are drawn, in typed
+  arrays (`topology.js`, a fifth of a second for a million triangles; three.js's `EdgesGeometry`
+  took eight times as long), so the edges and the faces' borders are one; the triangle under the
+  pointer is found through a bounds tree (`hits.js`, three-mesh-bvh), and each face once, its
+  area kept while the mesh doesn't move. A ghost, seen through, is under nothing, and neither is
+  what a section cut away.
 * **The view cube** (`ViewCube`, which the Svelte component puts in its corner unless
   `cube={false}`) is turned as the camera is; its faces (labelled TOP, FRONT, RIGHT, ..., each
   upright from its view), edges and corners, 26 ways to look, take the camera there when
@@ -98,10 +100,14 @@ For Svelte, the component around it (`@kupcad/ui`'s `Viewer`):
   Cmd it turns the view, as a drag does. Ctrl is a pinch's: a browser sends one as the wheel
   with Ctrl, so Ctrl and the wheel zoom too.
 * **Rendering** is on demand: when the model, a setting or the camera changes, once a frame. A
-  solid shows its feature edges; x-ray sees through it; a wireframe is the edges alone.
+  solid shows its feature edges; x-ray sees through it; a wireframe is the edges alone. A
+  drawing's shapes are drawn in the SVG's order, each over the floor and the ones before it, as
+  SVG draws them (at z = 0 all, depth can't order them), a see-through one too; the axes over
+  it.
 * **A section** clips every material of a solid's model at its plane and caps the cut where it
   runs inside a solid (three.js's stencil technique), but in a wireframe; a drawing isn't cut. A
-  part cut away isn't picked.
+  face at the offset is kept, so a cut at the bottom shows the footprint and one at the top the
+  top face. A part cut away isn't picked.
 * **Draco:** a model built with `--draco` needs `dracoDecoderPath`, where three.js's decoder files
   are; the decoder is loaded only when a model needs it.
 * **Themes** are colours (`LIGHT`, `DARK`, or a host's own, as the VS Code webview maps its
@@ -154,7 +160,8 @@ webview and the desktop app to the language server.
   Edges, Axes, Grid and Plate toggles; Fit, Persp, and the Iso, Top, Front and Right views, the
   one looked from pressed, a turn by hand pressing none), the model's parts in its bottom half,
   each with its colour and copies (a click on one selects its copies, as a click in the viewer
-  does: `bind:selected`). In a pane narrower than 36em (a phone's) the panel is under the model,
+  does: `bind:selected`), and, with an `onsource`, the line that names it (`named`, the
+  frame's `parts[].source`, a library's with its file), for the host to show. In a pane narrower than 36em (a phone's) the panel is under the model,
   at most half the pane. The model fills what the rest leave, no less than
   `--kc-model-min-height` (none by default), which a host whose pane is as tall as its content
   sets: the model has no height of its own. A bar above: a section through the model along an axis (a solid's: a drawing, which isn't cut, or no model offers none), screenshot, an
@@ -285,5 +292,9 @@ The viewer's scene logic in Node (jsdom), with a stand-in for WebGL and models t
 makes through `@kupcad/wasm`; the components mounted under jsdom (the `testing` setup and its
 `stubRenderer`), with the schemas and models the real core gives. And a smoke test in headless
 Chromium (`pnpm test:browser`) that draws what the core makes in the page and reads the pixels
-back: the part's colour, the background, a section cutting it all away, and a cap; and the view
-cube, which turns the camera to the part clicked.
+back: the part's colour, the background, a section cutting it all away, and a cap, and one
+on a face (at the bottom, the top, and from below) without streaks; a drawing's shapes in
+order over the grid; the view
+cube, which turns the camera to the part clicked; and the `ViewerPane` laid out by the browser,
+its panel beside the model and, in a pane narrower than 36em, under it (a container query,
+which jsdom doesn't apply), a white part's swatch framed on the light panel.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kupcad/ui",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "description": "KupCAD's UI: a three.js viewer of a model the core made, for any host (@kupcad/ui/viewer), and the Svelte panels around it (the viewer's pane, parameters, console, a language server's preview), styled by --kc-* tokens.",
   "license": "AGPL-3.0-only",
   "repository": {
@@ -36,18 +36,19 @@
     "access": "public"
   },
   "dependencies": {
-    "@kupcad/protocol": "0.1.7",
-    "three": "^0.186.1"
+    "@kupcad/protocol": "0.1.9",
+    "three": "^0.187.0",
+    "three-mesh-bvh": "^0.9.17"
   },
   "devDependencies": {
-    "@kupcad/wasm": "0.1.7",
+    "@kupcad/wasm": "0.1.9",
     "@playwright/test": "^1.64.1",
     "@sveltejs/vite-plugin-svelte": "^7.3.1",
     "@testing-library/svelte": "^5.4.2",
     "@types/node": "^26.6.5",
     "@types/three": "~0.186.0",
     "jsdom": "^30.1.3",
-    "svelte": "^5.57.2",
+    "svelte": "^5.57.3",
     "svelte-check": "^4.7.7",
     "vite": "^8.3.5",
     "vitest": "^5.0.5"

package/src/ConsolePanel.svelte

@@ -56,7 +56,8 @@
         <li class={line.kind}>
           {#if line.line !== null && onreveal}
             <button type="button" class="place" onclick={() => onreveal(line)}>
-              {line.text} <span class="at">line {line.line}</span>
+              {line.text}
+              <span class="at">{line.file ? `${line.file} ` : ''}line {line.line}</span>
             </button>
           {:else}
             {line.text}

package/src/PreviewPanel.svelte

@@ -22,14 +22,14 @@
   import { appendLines, linesOfLog, linesOfRun } from './console.js';
   import { plainValues } from './values.svelte.js';
   import ParamsPanel from './ParamsPanel.svelte';
-  import { memorySettings, sizeSetting } from './settings.js';
+  import { memorySettings, paneKeys, sizeSetting } from './settings.js';
   import Splitter from './Splitter.svelte';
   import ViewerPane from './ViewerPane.svelte';
   import { toBase64 } from './base64.js';
   import { problemsOf, runStatusOf } from './run-status.js';
   import { connectViewport } from './viewport-socket.js';
 
-  /** @import { ExportFormat, ParamValues, Preview, ShownDocument, ViewerHost } from '@kupcad/protocol/types' */
+  /** @import { ExportFormat, ParamValues, Part, Preview, ShownDocument, ViewerHost } from '@kupcad/protocol/types' */
   /** @import { ViewerOptions } from './viewer/types.js' */
   /** @import { ConsoleLine } from './console.js' */
   /** @import { Problem } from './run-status.js' */
@@ -67,13 +67,7 @@
    * The settings' keys: the parameters' width and whether they show, whether the view's panel
    * shows, the console's height and whether it is open.
    */
-  const KEYS = {
-    params: 'preview.params',
-    paramsOpen: 'preview.paramsOpen',
-    panelOpen: 'preview.panelOpen',
-    console: 'preview.console',
-    open: 'preview.consoleOpen',
-  };
+  const KEYS = paneKeys('preview');
   const id = $props.id();
   // As the settings have them; a size dragged is the pane's own until the drag is done
   let paramsWidth = $derived(sizeSetting(settings, KEYS.params, 288));
@@ -191,7 +185,7 @@
    */
   function revealProblem(problem) {
     if (!shown || problem.line === null) return;
-    host.post({ type: 'reveal', uri: shown.uri, line: problem.line, column: problem.column ?? 1 });
+    host.post({ type: 'reveal', uri: shown.uri, ...placeOf(problem) });
   }
 
   /**
@@ -200,7 +194,26 @@
    */
   function revealLine(line) {
     if (!shown || line.line === null) return;
-    host.post({ type: 'reveal', uri: shown.uri, line: line.line, column: line.column ?? 1 });
+    host.post({ type: 'reveal', uri: shown.uri, ...placeOf(line) });
+  }
+
+  /**
+   * Shows the script where `part` is named, in its editor (a library's, opened).
+   * @param {Part} part
+   */
+  function revealSource(part) {
+    if (!shown || !part.source) return;
+    host.post({ type: 'reveal', uri: shown.uri, ...placeOf({ file: null, ...part.source }) });
+  }
+
+  /**
+   * Where a problem or a console line is, as `reveal` says it: in a library, its `file`, which
+   * the host opens in place of the script shown.
+   * @param {{ line: number | null, column: number | null, file: string | null }} at
+   */
+  function placeOf(at) {
+    const place = { line: at.line ?? 1, column: at.column ?? 1 };
+    return at.file ? { ...place, file: at.file } : place;
   }
 
   /** @param {Blob} image */
@@ -229,6 +242,7 @@
         status={run}
         {problems}
         onproblem={revealProblem}
+        onsource={revealSource}
         onscreenshot={screenshot}
         onerror={failed}
       >

package/src/ViewerPane.svelte

@@ -56,6 +56,8 @@
    *   parameters'), after the Panel button: at the end nearest them
    * @property {RunStatus | null} [status] how the run shown went, or none to say
    * @property {Problem[]} [problems] what the run shown said went wrong (`problemsOf(header)`)
+   * @property {(part: Part) => void} [onsource] a part's line clicked (where it is named, its
+   *   `source`): the host shows it; without it, no line is offered
    * @property {(problem: Problem) => void} [onproblem] a problem with a line clicked: the host
    *   shows the script there; without it, none can be clicked
    * @property {(error: unknown) => void} [onerror] a model the viewer couldn't show
@@ -82,6 +84,7 @@
     status = null,
     problems = [],
     onproblem,
+    onsource,
     onerror,
     settings = memorySettings(),
     shortcuts = [],
@@ -441,6 +444,15 @@
                   <span class="name">{part.name}</span>
                   {#if part.count > 1}<span class="count">×{part.count}</span>{/if}
                 </button>
+                {#if onsource && part.source}
+                  <button
+                    type="button"
+                    class="source"
+                    title="Show where {part.name} is named"
+                    onclick={() => onsource(part)}
+                    >{part.source.file ? `${part.source.file} ` : ''}line {part.source.line}</button
+                  >
+                {/if}
               </li>
             {/each}
           </ul>
@@ -494,7 +506,9 @@
 {#snippet said(/** @type {Problem} */ problem)}
   <span class="severity">{SEVERITIES[problem.severity]}</span>
   <span class="message">{problem.message}</span>
-  {#if problem.line !== null}<span class="place">line {problem.line}</span>{/if}
+  {#if problem.line !== null}<span class="place"
+      >{problem.file ? `${problem.file} ` : ''}line {problem.line}</span
+    >{/if}
 {/snippet}
 
 <style>
@@ -623,6 +637,20 @@
     margin: 0;
     padding: 0;
   }
+  /* The part, and the line that names it beside it */
+  .parts li {
+    display: flex;
+  }
+  .parts li > button {
+    flex: 1;
+    min-width: 0;
+  }
+  .parts .source {
+    flex: none;
+    width: auto;
+    color: var(--kc-muted);
+    font-size: 0.92em;
+  }
   .parts button {
     display: flex;
     align-items: center;
@@ -651,6 +679,8 @@
     height: 10px;
     border-radius: 2px;
     flex: none;
+    /* Framed, so a part the colour of the panel (white in the light theme) still shows */
+    box-shadow: inset 0 0 0 1px var(--kc-border);
   }
   .name {
     flex: 1;

package/src/console.js

@@ -19,6 +19,8 @@ export const MAX_LINES = 2000;
  * @property {string} text
  * @property {number | null} line
  * @property {number | null} column
+ * @property {string | null} file the module the line and column are in (its path in the
+ *   project), null for the script's own
  */
 
 /**
@@ -26,9 +28,16 @@ export const MAX_LINES = 2000;
  * @param {string} text
  * @param {number | null} [line]
  * @param {number | null} [column]
+ * @param {string | null} [file]
  * @returns {ConsoleLine}
  */
-const lineOf = (kind, text, line = null, column = null) => ({ kind, text, line, column });
+const lineOf = (kind, text, line = null, column = null, file = null) => ({
+  kind,
+  text,
+  line,
+  column,
+  file,
+});
 
 /**
  * `text`'s lines, without the end its last one has.
@@ -48,8 +57,8 @@ export function linesOfRun(header, name) {
   if (header.outputCut) {
     lines.push(lineOf('log', 'It printed more than a run keeps: the rest is left out.'));
   }
-  for (const { message, line, column } of header.warnings) {
-    lines.push(lineOf('warning', `Warning: ${message}`, line, column));
+  for (const { message, line, column, file } of header.warnings) {
+    lines.push(lineOf('warning', `Warning: ${message}`, line, column, file ?? null));
   }
   const { error } = header;
   if (error) lines.push(lineOf('error', `Error: ${error.message}`, error.line, error.column));

package/src/index.js

@@ -15,7 +15,14 @@ export { default as ViewerPane } from './ViewerPane.svelte';
 export { appendLines, linesOfLog, linesOfRun } from './console.js';
 export { fillOf } from './range.js';
 export { problemsOf, runStatusOf } from './run-status.js';
-export { localSettings, memorySettings, sizeSetting } from './settings.js';
+export {
+  keptSettings,
+  localSettings,
+  memorySettings,
+  paneKeys,
+  settingsObject,
+  sizeSetting,
+} from './settings.js';
 export { VIEWER_SHORTCUTS } from './shortcuts.js';
 export { watchTokens } from './theme.js';
 export { plainValues } from './values.svelte.js';

package/src/params.js

@@ -1,8 +1,10 @@
 // The parameter panel's logic, apart from its markup: which control a parameter (or a part of its
 // value) gets, how the parameters group, which value a control shows, and whether a value given
 // in the panel is one the script takes (its schema's rules, core/src/core/param_rules.zig's),
-// checked before it leaves the panel; the run is the final check, and a frame names a value it
-// refused, and where in it.
+// checked before it leaves the panel as the core's `check` reads it (a number's text as
+// std.fmt.parseFloat reads it, true or false as 1 and 0 too, a Map's fields all of them and no
+// other, a choice compared once read): the panel accepted values the run then refused, and the
+// other way round. The run is the final check, and a frame names a value it refused, and where.
 
 /** @import { ParamSpec, ParamValue, ParamValues, PathStep, Rule } from '@kupcad/protocol/types' */
 
@@ -288,24 +290,95 @@ export function validate(rule, input) {
 function read(rule, input, path) {
   if (rule.type === 'array') return readArray(rule, input, path);
   if (rule.type === 'map') return readMap(rule, input, path);
+  const result = readScalar(rule, input, path);
+  if (!('value' in result)) return result;
+  // Once read, as the core compares a choice: 20.0 is the choice 20, " 20" no number
   const choices = rule.in;
-  if (choices) {
-    const choice = choices.find((listed) => String(listed) === String(input));
-    return choice === undefined
-      ? { error: `must be one of ${choices.join(', ')}`, path }
-      : { value: choice };
+  if (choices && !choices.some((listed) => listed === result.value)) {
+    return { error: `must be one of ${choices.join(', ')}`, path };
   }
-  if (rule.type === 'boolean') return { value: input === true || input === 'true' };
-  if (rule.type === 'string') return { value: String(input ?? '') };
-  const text = String(input ?? '').trim();
-  const number = Number(text);
-  if (text === '' || !Number.isFinite(number)) return { error: 'must be a number', path };
+  return result;
+}
+
+/**
+ * @param {Rule} rule a number's, a boolean's or text's
+ * @param {Value | null} input
+ * @param {PathStep[]} path
+ * @returns {{ value: Value } | Refusal}
+ */
+function readScalar(rule, input, path) {
+  if (rule.type === 'boolean') {
+    const value = booleanOf(input);
+    return value === null ? { error: 'must be true or false', path } : { value };
+  }
+  if (rule.type === 'string') {
+    return typeof input === 'string' ? { value: input } : { error: 'must be text', path };
+  }
+  const number = numberOf(input);
+  if (number === null) return { error: 'must be a number', path };
   if (rule.min !== null && number < rule.min)
     return { error: `must be at least ${rule.min}`, path };
   if (rule.max !== null && number > rule.max) return { error: `must be at most ${rule.max}`, path };
   return { value: number };
 }
 
+/**
+ * A finite number, or text that reads as one as the core reads it (Zig's std.fmt.parseFloat:
+ * a decimal with a fraction and an exponent, digits joined by single underscores, a hex number
+ * with a binary exponent; no spaces around it, no `inf`); null for anything else.
+ * @param {Value | null} input
+ * @returns {number | null}
+ */
+export function numberOf(input) {
+  if (typeof input === 'number') return Number.isFinite(input) ? input : null;
+  if (typeof input !== 'string') return null;
+  const hex = HEX_NUMBER.exec(input);
+  const number = hex
+    ? hexNumber(hex)
+    : DECIMAL_NUMBER.test(input)
+      ? Number(input.replaceAll('_', ''))
+      : NaN;
+  return Number.isFinite(number) ? number : null;
+}
+
+/** Digits joined by single underscores. */
+const DIGITS = String.raw`\d+(?:_\d+)*`;
+const HEX_DIGITS = String.raw`[0-9a-fA-F]+(?:_[0-9a-fA-F]+)*`;
+/** `12`, `1_000`, `1.`, `.5`, `1.5e-3`, with a sign. */
+const DECIMAL_NUMBER = new RegExp(
+  String.raw`^[+-]?(?:${DIGITS}(?:\.(?:${DIGITS})?)?|\.${DIGITS})(?:[eE][+-]?${DIGITS})?$`,
+);
+/** `0x10`, `0x1.8p1`, with a sign: the sign, the whole, the fraction and the exponent. */
+const HEX_NUMBER = new RegExp(
+  String.raw`^([+-]?)0[xX](?:(${HEX_DIGITS})(?:\.(${HEX_DIGITS})?)?|\.(${HEX_DIGITS}))(?:[pP]([+-]?${DIGITS}))?$`,
+);
+
+/** @param {RegExpExecArray} match HEX_NUMBER's */
+function hexNumber(match) {
+  const sign = match[1];
+  const whole = match[2] ?? '';
+  const fraction = match[3] ?? match[4] ?? '';
+  const exponent = match[5] ?? '0';
+  const digits = `${whole}${fraction}`.replaceAll('_', '');
+  const places = fraction.replaceAll('_', '').length;
+  const magnitude =
+    Number.parseInt(digits || '0', 16) * 2 ** (Number(exponent.replaceAll('_', '')) - 4 * places);
+  return sign === '-' ? -magnitude : magnitude;
+}
+
+/**
+ * true or false, as the core reads them: so, as the numbers 1 and 0, or as the text `true`,
+ * `false`, `1` or `0`; null for anything else (`yes`, `True`, an empty field).
+ * @param {Value | null} input
+ * @returns {boolean | null}
+ */
+export function booleanOf(input) {
+  if (typeof input === 'boolean') return input;
+  if (input === 1 || input === 'true' || input === '1') return true;
+  if (input === 0 || input === 'false' || input === '0') return false;
+  return null;
+}
+
 /**
  * @param {Rule} rule
  * @param {Value | null} input
@@ -342,6 +415,12 @@ function readArray(rule, input, path) {
  */
 function readMap(rule, input, path) {
   if (!isRecord(input)) return { error: 'must be a record', path };
+  const names = (rule.fields ?? []).map((field) => field.name);
+  // Its fields, all of them (one missing is read as nothing, which no field takes) and no other
+  const stranger = Object.keys(input).find((key) => !names.includes(key));
+  if (stranger !== undefined) {
+    return { error: `has no field ${stranger}: only ${names.join(', ')}`, path };
+  }
   /** @type {{ [field: string]: Value }} */
   const fields = {};
   for (const field of rule.fields ?? []) {

package/src/run-status.js

@@ -20,6 +20,8 @@
  * @property {string} message
  * @property {number | null} line
  * @property {number | null} column
+ * @property {string | null} file the path in the project of the module whose code it is in (a
+ *   library's function), its line and column that module's; null for the script shown
  */
 
 /** @type {Record<RunStatus['state'], string>} */
@@ -59,11 +61,12 @@ export function describeRun(run) {
 export function problemsOf(header) {
   if (!header) return [];
   /** @type {Problem[]} */
-  const problems = header.warnings.map(({ message, line, column }) => ({
+  const problems = header.warnings.map(({ message, line, column, file }) => ({
     severity: 'warning',
     message,
     line,
     column,
+    file: file ?? null,
   }));
   const { error } = header;
   if (error) {
@@ -72,6 +75,7 @@ export function problemsOf(header) {
       message: error.message,
       line: error.line,
       column: error.column,
+      file: null,
     });
   }
   return problems;

package/src/settings.js

@@ -1,7 +1,7 @@
 // What a person set in a host's panels (the panes' sizes, whether they show), kept where the
 // host keeps such things. The playground keeps it in the page's localStorage (localSettings),
-// the VS Code extension and the desktop app their own way, each on memorySettings; a host that
-// keeps nothing gives memorySettings alone.
+// the VS Code extension and the desktop app their own way, each on keptSettings (memorySettings
+// that tell the host each change); a host that keeps nothing gives memorySettings alone.
 //
 // Settings are reactive: a pane reads its value in a $derived, and follows it as it is set,
 // wherever from. A size dragged is the pane's own until the drag is done, and set then, once.
@@ -30,6 +30,25 @@ export function memorySettings(values = {}) {
   return { get: (key) => kept.get(key), set: (key, value) => void kept.set(key, value) };
 }
 
+/**
+ * Settings a host keeps: `memorySettings` from `values`, the host told each change through
+ * `keep` (the VS Code extension's page sends it to the extension, the desktop app writes it to
+ * its settings file). Each host wrapped memorySettings this way itself.
+ * @param {Record<string, unknown>} values what the host kept
+ * @param {(key: string, value: unknown) => void} keep
+ * @returns {Settings}
+ */
+export function keptSettings(values, keep) {
+  const settings = memorySettings(values);
+  return {
+    get: settings.get,
+    set(key, value) {
+      settings.set(key, value);
+      keep(key, value);
+    },
+  };
+}
+
 /**
  * Settings kept in `storage` (the page's localStorage) as one JSON object under `name`. A page
  * that may not keep anything there (a private window's quota, a policy), or finds no JSON
@@ -39,36 +58,51 @@ export function memorySettings(values = {}) {
  * @returns {Settings}
  */
 export function localSettings(name = 'kupcad.settings', storage = globalThis.localStorage) {
-  const settings = memorySettings(read(storage, name));
-  return {
-    get: settings.get,
-    set(key, value) {
-      settings.set(key, value);
-      try {
-        const all = { ...read(storage, name), [key]: value };
-        storage?.setItem(name, JSON.stringify(all));
-      } catch {
-        // Kept in memory: the page may not store anything
-      }
-    },
+  const read = () => {
+    try {
+      return settingsObject(storage?.getItem(name));
+    } catch {
+      return {};
+    }
   };
+  return keptSettings(read(), (key, value) => {
+    try {
+      storage?.setItem(name, JSON.stringify({ ...read(), [key]: value }));
+    } catch {
+      // Kept in memory: the page may not store anything
+    }
+  });
 }
 
 /**
- * The JSON object `storage` keeps under `name`; an empty one for none, or for what isn't one.
- * @param {Pick<Storage, 'getItem'> | undefined} storage
- * @param {string} name
+ * The settings `text` holds as JSON: its object; an empty one for no text, text that isn't
+ * JSON, or JSON that isn't an object (the extension's page and the playground each read it so).
+ * @param {string | null | undefined} text
  * @returns {Record<string, unknown>}
  */
-function read(storage, name) {
+export function settingsObject(text) {
   try {
-    const parsed = JSON.parse(storage?.getItem(name) ?? '{}');
+    const parsed = JSON.parse(text || '{}');
     return typeof parsed === 'object' && parsed !== null && !Array.isArray(parsed) ? parsed : {};
   } catch {
     return {};
   }
 }
 
+/**
+ * The keys a preview panel keeps its layout under, each with `prefix` (the preview's are
+ * `preview.params`, the playground's `playground.params`): the parameters pane's width, whether
+ * it and the panel show, the console's height and whether it is open. Two panels listed them.
+ * @param {string} prefix
+ */
+export const paneKeys = (prefix) => ({
+  params: `${prefix}.params`,
+  paramsOpen: `${prefix}.paramsOpen`,
+  panelOpen: `${prefix}.panelOpen`,
+  console: `${prefix}.console`,
+  open: `${prefix}.consoleOpen`,
+});
+
 /**
  * A pane's size kept under `key`: a finite number of pixels, else `fallback` (none kept, or
  * what was kept is no size).

package/src/viewer/appearance.js

@@ -37,7 +37,8 @@ export function applyRenderMode(model, mode, edges, theme) {
     const material = /** @type {MeshStandardMaterial} */ (shape.mesh.material);
     const xray = mode === 'xray';
     material.visible = mode !== 'wireframe';
-    material.transparent = xray || shape.opacity < 1;
+    // A drawing's shapes always: drawn in their order with its outlines (model.js)
+    material.transparent = model.kind === '2d' || xray || shape.opacity < 1;
     material.opacity = xray ? Math.min(shape.opacity, XRAY_OPACITY) : shape.opacity;
     material.depthWrite = !xray;
     material.needsUpdate = true;

package/src/viewer/brand.js

@@ -0,0 +1,13 @@
+// The KupCAD brand's colours, which tokens.css paints the panels in and the viewer's theme
+// paints a picked part and the edges in: one place for both, in the viewer, which any host may
+// take alone (tokens.test.js holds the CSS, which can't import it, to this).
+
+export const BRAND = Object.freeze({
+  /** Orangered: the accent, a picked part. */
+  orange: '#ff5f14',
+  /** The text, the dark background, the edges. */
+  black: '#1a1b1c',
+  white: '#ffffff',
+  /** Gainsboro: the surfaces, the light text on dark. */
+  gainsboro: '#e3e7eb',
+});

package/src/viewer/environment.js

@@ -15,6 +15,12 @@ import {
 /** @import { Box3 } from 'three' */
 /** @import { Environment, Plate, Theme } from './types.js' */
 
+/**
+ * Groups drawn in this order, whatever their objects' own: the floor, a drawing lying on it,
+ * then the axes over both. A drawing is flat on the floor, where depth can't tell its shapes
+ * apart, so they are drawn in order too (model.js).
+ */
+export const LAYERS = { floor: 0, drawing: 1, axes: 2 };
 /** A grid has this many cells along its side. */
 const GRID_CELLS = 20;
 /** A plate's grid has a line every this many millimetres. */
@@ -40,6 +46,7 @@ const AXIS_COLORS = /** @type {const} */ (['#e5484d', '#30a46c', '#3e63dd']);
  */
 export function environmentOf(kind, box, plate, theme) {
   const group = new Group();
+  group.renderOrder = LAYERS.floor;
   if (kind === 'grid') {
     const side = gridSide(box);
     group.add(lines(side, side, side / GRID_CELLS, theme.grid));
@@ -71,6 +78,7 @@ export function axesOf(kind, box, plate) {
     [0, 0, AXES_LIFT_MM, 0, 0, side * Z_AXIS_SHARE],
   ];
   const group = new Group();
+  group.renderOrder = LAYERS.axes;
   for (const [i, positions] of ends.entries()) {
     const geometry = new BufferGeometry().setAttribute(
       'position',