@kupcad/ui 0.0.0-stage → 0.1.1

package/src/theme.js

@@ -0,0 +1,131 @@
+// The viewer's theme from the --kc-viewer-* tokens of the page around it: a host themes the
+// viewer as it themes the panels, and changes it while it shows (VS Code's theme switch). A
+// token left unset, or set to no colour the page reads, takes the viewer's own colour, LIGHT or
+// DARK as the page's colour scheme is.
+
+import { DARK, LIGHT } from './viewer/index.js';
+
+/** @import { Theme } from './viewer/types.js' */
+
+/** Each colour of a viewer's theme, by the token that sets it. */
+const TOKENS = /** @type {const} */ ({
+  background: '--kc-viewer-background',
+  grid: '--kc-viewer-grid',
+  plate: '--kc-viewer-plate',
+  edges: '--kc-viewer-edges',
+  wire: '--kc-viewer-wire',
+  selection: '--kc-viewer-selection',
+  cap: '--kc-viewer-cap',
+  ghost: '--kc-viewer-ghost',
+  highlight: '--kc-viewer-highlight',
+});
+/** A hex colour with an alpha (#rgba, #rrggbbaa), which three.js can't read: its colour first. */
+const HEX_WITH_ALPHA = /^(#[\da-f]{3})[\da-f]$|^(#[\da-f]{6})[\da-f]{2}$/i;
+/** An rgba() colour: three.js reads it, warning of the alpha it leaves out. */
+const RGBA = /^rgba\((\d+),\s*(\d+),\s*(\d+),\s*[\d.]+\)$/;
+/** Two fills a colour the browser can't read leaves as they were: it reads as neither. */
+const UNREAD = /** @type {const} */ (['#000000', '#ffffff']);
+/** The attributes of the page's root and body a host themes it by (VS Code: a class, a style). */
+const THEMED_BY = ['class', 'style'];
+
+/** colorReader's, once made (null where the page has no 2D context). @type {ColorReader | null | undefined} */
+let reader;
+
+/**
+ * What of a 2D context reads a colour: its fill, and the pixel it draws.
+ * @typedef {Pick<CanvasRenderingContext2D, 'fillStyle' | 'clearRect' | 'fillRect' | 'getImageData'>} ColorReader
+ */
+
+/**
+ * The theme the tokens set on `element` (inherited from the page) give.
+ * @param {Element} element
+ * @returns {Theme}
+ */
+export function themeFromTokens(element) {
+  const style = getComputedStyle(element);
+  const dark = globalThis.matchMedia?.('(prefers-color-scheme: dark)').matches ?? false;
+  const fallback = dark ? DARK : LIGHT;
+  /** @type {Theme} */
+  const theme = { ...fallback };
+  const context = colorReader();
+  for (const [key, token] of /** @type {[keyof Theme, string][]} */ (Object.entries(TOKENS))) {
+    theme[key] = viewerColor(style.getPropertyValue(token).trim(), context) || fallback[key];
+  }
+  return theme;
+}
+
+/**
+ * `color` as the viewer can draw it: #rrggbb, the sRGB of a pixel `context` draws in it, so any
+ * CSS colour the browser reads (three.js reads hex, rgb() and a name alone: a color-mix() or an
+ * oklch() it drew black, and a context's fill keeps those as they are), and opaque, a theme's
+ * colours being so; empty for one the browser doesn't read. Without a context (jsdom), the
+ * colour as given, opaque.
+ * @param {string} color
+ * @param {ColorReader | null} context
+ * @returns {string}
+ */
+export function viewerColor(color, context) {
+  if (!color || !context) return opaque(color);
+  const fills = UNREAD.map((unread) => {
+    context.fillStyle = unread;
+    context.fillStyle = color;
+    return String(context.fillStyle);
+  });
+  if (fills[0] !== fills[1]) return '';
+  context.clearRect(0, 0, 1, 1);
+  context.fillRect(0, 0, 1, 1);
+  const [r, g, b] = context.getImageData(0, 0, 1, 1).data;
+  return `#${[r, g, b].map((byte) => byte.toString(16).padStart(2, '0')).join('')}`;
+}
+
+/**
+ * What reads a CSS colour as the page does: a 2D context, made once; null where the page has
+ * none.
+ * @returns {ColorReader | null}
+ */
+function colorReader() {
+  if (reader === undefined) {
+    reader = document.createElement('canvas').getContext('2d', { willReadFrequently: true });
+  }
+  return reader;
+}
+
+/**
+ * Gives `changed` the theme of `element`'s tokens now, and again whenever it changes: with the
+ * page's colour scheme, or a class or style of its root or body.
+ * @param {Element} element
+ * @param {(theme: Theme) => void} changed
+ * @returns {() => void} stops watching
+ */
+export function watchTokens(element, changed) {
+  let last = '';
+  const update = () => {
+    const theme = themeFromTokens(element);
+    const key = JSON.stringify(theme);
+    if (key === last) return;
+    last = key;
+    changed(theme);
+  };
+  const observer = new MutationObserver(update);
+  for (const node of [document.documentElement, document.body]) {
+    observer.observe(node, { attributes: true, attributeFilter: THEMED_BY });
+  }
+  const scheme = globalThis.matchMedia?.('(prefers-color-scheme: dark)');
+  scheme?.addEventListener('change', update);
+  update();
+  return () => {
+    observer.disconnect();
+    scheme?.removeEventListener('change', update);
+  };
+}
+
+/**
+ * `color` without the alpha of a hex or an rgba() colour that has one: a theme's colours are
+ * opaque.
+ * @param {string} color
+ */
+function opaque(color) {
+  return color
+    .replace(HEX_WITH_ALPHA, (_, short, long) => short ?? long)
+    .replace(RGBA, (_, r, g, b) => `rgb(${r}, ${g}, ${b})`);
+}

package/src/tokens.css

@@ -0,0 +1,70 @@
+/*
+  The --kc-* tokens the panels are styled by, light and dark as the page's colour scheme is: the
+  KupCAD brand, orangered on brand black or white, gainsboro for the surfaces. A host sets its
+  own on top (vscode.css maps VS Code's). --kc-viewer-* (background, grid, plate, edges, wire,
+  selection, cap, ghost, highlight) theme the viewer; left unset, it uses its own colours, the
+  brand's too. A control of a host's own takes the panels' look by the class .kc-control
+  (controls.css); a range input by .kc-range, a checkbox by .kc-check.
+
+  The accent is a fill where there is one of a kind (the primary button, a slider, a checked
+  box); a toggle while on, or what is chosen in a list, is --kc-accent-subtle edged in it, as
+  several are on at once. The text on the fill is --kc-accent-fg, the brand black: white on the
+  orange is 3.0:1, too faint for text. Orange as text on the background (a link, a revert) is --kc-accent-text, a darker
+  orange in light, as the brand orange on white is 3.0:1 too. tokens.test.js holds each pair
+  to 4.5:1 for text and 3:1 for a control's edge or a focus ring.
+*/
+@import './controls.css';
+
+:root {
+  --kc-font: system-ui, -apple-system, 'Segoe UI', sans-serif;
+  --kc-font-size: 13px;
+  --kc-bg: #ffffff;
+  --kc-fg: #1a1b1c;
+  --kc-muted: #5a5d65;
+  /* A divider between panes and rows */
+  --kc-border: #d5dae0;
+  /* The edge of a field, a select or a checkbox, which tells it from the background */
+  --kc-control-border: #8a9099;
+  --kc-input-bg: #ffffff;
+  /* A row or a button under the pointer */
+  --kc-hover: rgba(26, 27, 28, 0.06);
+  --kc-accent: #ff5f14;
+  --kc-accent-fg: #1a1b1c;
+  --kc-accent-hover: #f0540c;
+  --kc-accent-text: #c5480d;
+  /* What is chosen in a list (the tree's open script), its text --kc-fg */
+  --kc-accent-subtle: #ffe9de;
+  --kc-focus: #c5480d;
+  /* A slider's track beyond its thumb */
+  --kc-track: #d5dae0;
+  --kc-error: #c8102e;
+  --kc-warning: #8a5a00;
+  /* A section's header: a group of parameters' */
+  --kc-section-bg: #e3e7eb;
+  --kc-section-fg: #1a1b1c;
+  --kc-radius: 4px;
+  --kc-gap: 8px;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --kc-bg: #1a1b1c;
+    --kc-fg: #e3e7eb;
+    --kc-muted: #9a9da3;
+    --kc-border: #333436;
+    --kc-control-border: #73767c;
+    --kc-input-bg: #282829;
+    --kc-hover: rgba(227, 231, 235, 0.07);
+    --kc-accent: #ff5f14;
+    --kc-accent-fg: #1a1b1c;
+    --kc-accent-hover: #ff7a3d;
+    --kc-accent-text: #ff6a24;
+    --kc-accent-subtle: #43271b;
+    --kc-focus: #ff6a24;
+    --kc-track: #3a3b3e;
+    --kc-error: #ff6b81;
+    --kc-warning: #e3b341;
+    --kc-section-bg: #282829;
+    --kc-section-fg: #e3e7eb;
+  }
+}

package/src/values.svelte.js

@@ -0,0 +1,13 @@
+// A panel's values as plain data, for a message or a worker: a state's proxy can't be cloned.
+
+/** @import { ParamValues } from '@kupcad/protocol/types' */
+
+/**
+ * `values`, a state's, as plain data.
+ * @param {ParamValues} values
+ * @returns {ParamValues}
+ */
+export function plainValues(values) {
+  // Snapshot's type of the recursive ParamValue is too deep for TypeScript to work out
+  return /** @type {ParamValues} */ ($state.snapshot(/** @type {unknown} */ (values)));
+}

package/src/view-settings.js

@@ -0,0 +1,81 @@
+// How the viewer looks, as the person chose it, kept in a host's settings under the view.* keys:
+// the render mode, the edges and the axes shown, the floor (environment) and the projection.
+// ViewerPane reads each in a $derived and writes what the person chooses; a host's settings page
+// shows and writes the same keys, and the pane follows it. A kept value that isn't one reads as
+// the default.
+
+import { RENDER_MODES } from './viewer/index.js';
+
+/** @import { Settings } from './settings.js' */
+/** @import { Environment, Projection, RenderMode } from './viewer/types.js' */
+
+/**
+ * The view as chosen.
+ * @typedef {object} ViewChoices
+ * @property {RenderMode} renderMode
+ * @property {boolean} edges
+ * @property {boolean} axes
+ * @property {Environment} environment the floor: a grid, the build plate, or none
+ * @property {Projection} projection
+ */
+
+/** The settings' keys, by choice. @type {Readonly<Record<keyof ViewChoices, string>>} */
+export const VIEW_KEYS = Object.freeze({
+  renderMode: 'view.renderMode',
+  edges: 'view.edges',
+  axes: 'view.axes',
+  environment: 'view.environment',
+  projection: 'view.projection',
+});
+
+/** The floors the viewer stands a model on, in the order a settings page offers them. */
+export const ENVIRONMENTS = /** @type {const} */ (['grid', 'plate', 'none']);
+
+/** The projections, in the order a settings page offers them. */
+export const PROJECTIONS = /** @type {const} */ (['perspective', 'orthographic']);
+
+/** What the view is before anyone chose. @type {Readonly<ViewChoices>} */
+export const VIEW_DEFAULTS = Object.freeze({
+  renderMode: 'solid',
+  edges: true,
+  axes: true,
+  environment: 'grid',
+  projection: 'perspective',
+});
+
+/** The values each choice takes. @type {Record<keyof ViewChoices, readonly unknown[]>} */
+const VALID = {
+  renderMode: RENDER_MODES,
+  edges: [true, false],
+  axes: [true, false],
+  environment: ENVIRONMENTS,
+  projection: PROJECTIONS,
+};
+
+/**
+ * The view's `name` as `settings` keep it, else its default. Read in a reaction, it reads that
+ * key alone.
+ * @template {keyof ViewChoices} K
+ * @param {Settings} settings
+ * @param {K} name
+ * @returns {ViewChoices[K]}
+ */
+export function viewChoice(settings, name) {
+  const kept = settings.get(VIEW_KEYS[name]);
+  return /** @type {ViewChoices[K]} */ (VALID[name].includes(kept) ? kept : VIEW_DEFAULTS[name]);
+}
+
+/**
+ * The whole view as `settings` keep it, each choice else its default.
+ * @param {Settings} settings
+ * @returns {ViewChoices}
+ */
+export function viewChoices(settings) {
+  return {
+    renderMode: viewChoice(settings, 'renderMode'),
+    edges: viewChoice(settings, 'edges'),
+    axes: viewChoice(settings, 'axes'),
+    environment: viewChoice(settings, 'environment'),
+    projection: viewChoice(settings, 'projection'),
+  };
+}

package/src/viewer/appearance.js

@@ -0,0 +1,90 @@
+// How a model's shapes look: their render mode (and the theme's colour of their edges in it), the
+// selection, and the theme's colours of a ghost and a highlight, set on their materials. Ghosts
+// keep their own look.
+
+import { Color } from 'three';
+
+/** @import { LineBasicMaterial, MeshBasicMaterial, MeshStandardMaterial } from 'three' */
+/** @import { RenderMode, SceneModel, Theme } from './types.js' */
+
+/** How see-through a solid is in x-ray. */
+export const XRAY_OPACITY = 0.25;
+/** The selected part's colour moves this far from its own toward the selection's. */
+export const SELECTION_TINT = 0.45;
+
+/**
+ * Draws the model's shapes as `mode` says: as they are, see-through, or not at all but for their
+ * edges (the mesh stays, for picking, and its edges with it); their edges with them when
+ * `edges`, and always in a wireframe, which is nothing else. A highlight is seen through what
+ * hides it only as they are: in x-ray everything is, and a wireframe has no faces. The edges take
+ * `theme`'s colour for where they are drawn (edgeColorOf).
+ * @param {SceneModel | null} model
+ * @param {RenderMode} mode
+ * @param {boolean} edges
+ * @param {Theme} theme
+ */
+export function applyRenderMode(model, mode, edges, theme) {
+  if (!model) return;
+  model.edgeMaterial.color.set(edgeColorOf(model.kind, mode, theme));
+  for (const shape of model.shapes) {
+    if (shape.edges) shape.edges.visible = edges || mode === 'wireframe';
+    if (shape.seenThrough) shape.seenThrough.visible = mode === 'solid';
+    if (shape.ghost) continue;
+    const material = /** @type {MeshStandardMaterial} */ (shape.mesh.material);
+    const xray = mode === 'xray';
+    material.visible = mode !== 'wireframe';
+    material.transparent = xray || shape.opacity < 1;
+    material.opacity = xray ? Math.min(shape.opacity, XRAY_OPACITY) : shape.opacity;
+    material.depthWrite = !xray;
+    material.needsUpdate = true;
+  }
+}
+
+/**
+ * The colour of a model's edges: over its faces, `theme`'s `edges`; on the background, where a
+ * wireframe's are and a drawing's outlines, its `wire` (a dark theme's edges, near black, were
+ * lost on its background there).
+ * @param {SceneModel['kind']} kind
+ * @param {RenderMode} mode
+ * @param {Theme} theme
+ */
+export function edgeColorOf(kind, mode, theme) {
+  return kind === '2d' || mode === 'wireframe' ? theme.wire : theme.edges;
+}
+
+/**
+ * Tints the copies of `part` toward `selection`, and draws their edges with `selectionEdges`;
+ * the other shapes as they are.
+ * @param {SceneModel | null} model
+ * @param {string | null} part
+ * @param {string} selection a CSS colour
+ * @param {LineBasicMaterial} selectionEdges
+ */
+export function applySelection(model, part, selection, selectionEdges) {
+  if (!model) return;
+  const tint = new Color(selection);
+  for (const shape of model.shapes) {
+    const material = /** @type {MeshStandardMaterial} */ (shape.mesh.material);
+    const chosen = part !== null && shape.part === part;
+    material.color.copy(shape.color);
+    if (chosen) material.color.lerp(tint, SELECTION_TINT);
+    if (shape.edges) shape.edges.material = chosen ? selectionEdges : model.edgeMaterial;
+  }
+}
+
+/**
+ * Gives the model the colours of `theme` it takes besides its edges' (applyRenderMode's): a
+ * ghost's and a highlight's (the selection, applied after, tints from them).
+ * @param {SceneModel | null} model
+ * @param {Theme} theme
+ */
+export function applyTheme(model, theme) {
+  if (!model) return;
+  for (const shape of model.shapes) {
+    if (shape.ghost) shape.color.set(theme.ghost);
+    if (shape.seenThrough) {
+      shape.color.set(theme.highlight);
+      /** @type {MeshBasicMaterial} */ (shape.seenThrough.material).color.set(theme.highlight);
+    }
+  }
+}

package/src/viewer/camera.js

@@ -0,0 +1,100 @@
+// Where the camera looks from, and how far it stands to frame a model: plain math over the
+// script's coordinates (millimetres, Z up).
+
+import { Sphere, Vector3 } from 'three';
+
+/** @import { Box3 } from 'three' */
+/** @import { View } from './types.js' */
+
+/**
+ * A top or bottom view looks almost straight down the Z axis: exactly along it, Z up has no
+ * meaning on the screen, so the view leans this much toward -Y and the screen's up is +Y.
+ */
+const STRAIGHT_LEAN = 1e-4;
+/** A turn stops this short of looking straight down or up (radians): there, Z up means nothing. */
+const POLE_MARGIN = 1e-3;
+
+/** What one step zooms in by (`I`, and the most one turn of the wheel does), and out (`O`). */
+export const ZOOM_STEP = 1.25;
+
+/**
+ * From the model's centre toward the camera, for each view (unit length).
+ * @type {Record<View, Vector3>}
+ */
+export const VIEWS = {
+  iso: new Vector3(1, -1, 1).normalize(),
+  top: new Vector3(0, -STRAIGHT_LEAN, 1).normalize(),
+  bottom: new Vector3(0, -STRAIGHT_LEAN, -1).normalize(),
+  front: new Vector3(0, -1, 0),
+  back: new Vector3(0, 1, 0),
+  right: new Vector3(1, 0, 0),
+  left: new Vector3(-1, 0, 0),
+};
+
+/**
+ * The tangent of half a vertical field of view of `fovDeg`: how far up the view reaches, per
+ * unit of distance from a perspective camera.
+ * @param {number} fovDeg
+ */
+export const halfFovTangent = (fovDeg) => Math.tan((fovDeg * Math.PI) / 360);
+
+/**
+ * The sphere a camera must see to show all of `box`: one around a point when the box is
+ * empty (no model yet).
+ * @param {Box3} box
+ * @returns {Sphere}
+ */
+export function boundsOf(box) {
+  if (box.isEmpty()) return new Sphere(new Vector3(), 50);
+  return box.getBoundingSphere(new Sphere());
+}
+
+/**
+ * How far from the sphere's centre a perspective camera of `fovDeg` (vertical) and `aspect`
+ * stands to see all of it, with `margin` to spare.
+ * @param {Sphere} sphere
+ * @param {number} fovDeg
+ * @param {number} aspect width / height
+ * @param {number} [margin] a factor over the sphere's radius
+ * @returns {number}
+ */
+export function perspectiveDistance(sphere, fovDeg, aspect, margin = 1.15) {
+  const vertical = (fovDeg * Math.PI) / 360;
+  const horizontal = Math.atan(halfFovTangent(fovDeg) * aspect);
+  const half = Math.min(vertical, horizontal);
+  return (sphere.radius * margin) / Math.sin(half);
+}
+
+/**
+ * The half-height an orthographic camera shows to see all of the sphere at `aspect`, with
+ * `margin` to spare.
+ * @param {Sphere} sphere
+ * @param {number} aspect
+ * @param {number} [margin]
+ * @returns {number}
+ */
+export function orthographicHalfHeight(sphere, aspect, margin = 1.15) {
+  const radius = sphere.radius * margin;
+  return aspect >= 1 ? radius : radius / aspect;
+}
+
+/**
+ * Where a camera standing `offset` from what it looks at stands once turned `across` radians
+ * about the Z axis (anticlockwise, seen from the top) and `up` radians toward the top: as far
+ * off, short of looking straight down or up.
+ * @param {Vector3} offset
+ * @param {number} across
+ * @param {number} up
+ * @returns {Vector3}
+ */
+export function orbited(offset, across, up) {
+  const radius = offset.length();
+  const fromTop = Math.acos(Math.min(1, Math.max(-1, offset.z / radius)));
+  const tilted = Math.min(Math.PI - POLE_MARGIN, Math.max(POLE_MARGIN, fromTop - up));
+  const around = Math.atan2(offset.y, offset.x) + across;
+  return new Vector3(
+    Math.sin(tilted) * Math.cos(around),
+    Math.sin(tilted) * Math.sin(around),
+    Math.cos(tilted),
+  ).multiplyScalar(radius);
+}

package/src/viewer/dispose.js

@@ -0,0 +1,30 @@
+// Freeing the GPU's copies of what the viewer drew: three.js keeps a geometry's buffers and a
+// material's program until they are disposed, however long ago their objects left the scene.
+
+import { LineSegments, Mesh } from 'three';
+
+/** @import { Object3D } from 'three' */
+
+/**
+ * Frees the geometries of the meshes and lines under `root`.
+ * @param {Object3D} root
+ */
+export function disposeGeometries(root) {
+  root.traverse((object) => {
+    if (object instanceof Mesh || object instanceof LineSegments) object.geometry.dispose();
+  });
+}
+
+/**
+ * Frees the geometries and the materials of the meshes and lines under `root`, which owns them
+ * all.
+ * @param {Object3D} root
+ */
+export function disposeObject(root) {
+  disposeGeometries(root);
+  root.traverse((object) => {
+    if (object instanceof Mesh || object instanceof LineSegments) {
+      for (const material of [object.material].flat()) material.dispose();
+    }
+  });
+}

package/src/viewer/environment.js

@@ -0,0 +1,145 @@
+// What a model stands on, on the XY plane at z = 0: a grid sized to the model, a build plate,
+// or nothing; and the axes through the origin, where the coordinates are zero.
+
+import {
+  BufferGeometry,
+  Float32BufferAttribute,
+  Group,
+  LineBasicMaterial,
+  LineSegments,
+  Mesh,
+  MeshBasicMaterial,
+  PlaneGeometry,
+} from 'three';
+
+/** @import { Box3 } from 'three' */
+/** @import { Environment, Plate, Theme } from './types.js' */
+
+/** A grid has this many cells along its side. */
+const GRID_CELLS = 20;
+/** A plate's grid has a line every this many millimetres. */
+const PLATE_STEP_MM = 10;
+/** The plate's surface sits this far below its lines, so they aren't lost in it. */
+const PLATE_BELOW_MM = 0.01;
+/** A grid's side, with no model to size it to. */
+const DEFAULT_GRID_MM = 100;
+/** The axes are drawn this far above the floor, so its lines through the origin don't hide them. */
+const AXES_LIFT_MM = 0.02;
+/** The Z axis rises this much of the floor's side. */
+const Z_AXIS_SHARE = 0.25;
+/** The axes' colours, as CAD and slicers draw them: X red, Y green, Z blue. */
+const AXIS_COLORS = /** @type {const} */ (['#e5484d', '#30a46c', '#3e63dd']);
+
+/**
+ * What `kind` stands a model of `box` on, in the theme's colours.
+ * @param {Environment} kind
+ * @param {Box3} box the model's bounds, empty with no model
+ * @param {Plate} plate
+ * @param {Theme} theme
+ * @returns {Group}
+ */
+export function environmentOf(kind, box, plate, theme) {
+  const group = new Group();
+  if (kind === 'grid') {
+    const side = gridSide(box);
+    group.add(lines(side, side, side / GRID_CELLS, theme.grid));
+  } else if (kind === 'plate') {
+    const surface = new Mesh(
+      new PlaneGeometry(plate.width, plate.depth),
+      new MeshBasicMaterial({ color: theme.plate }),
+    );
+    surface.position.z = -PLATE_BELOW_MM;
+    group.add(surface, lines(plate.width, plate.depth, PLATE_STEP_MM, theme.grid));
+  }
+  return group;
+}
+
+/**
+ * The axes through the origin, where the coordinates are zero: X and Y across a floor
+ * `side` long, Z up from the origin.
+ * @param {Environment} kind
+ * @param {Box3} box the model's bounds
+ * @param {Plate} plate
+ * @returns {Group}
+ */
+export function axesOf(kind, box, plate) {
+  const side = kind === 'plate' ? Math.max(plate.width, plate.depth) : gridSide(box);
+  const half = side / 2;
+  const ends = [
+    [-half, 0, AXES_LIFT_MM, half, 0, AXES_LIFT_MM],
+    [0, -half, AXES_LIFT_MM, 0, half, AXES_LIFT_MM],
+    [0, 0, AXES_LIFT_MM, 0, 0, side * Z_AXIS_SHARE],
+  ];
+  const group = new Group();
+  for (const [i, positions] of ends.entries()) {
+    const geometry = new BufferGeometry().setAttribute(
+      'position',
+      new Float32BufferAttribute(positions, 3),
+    );
+    group.add(new LineSegments(geometry, new LineBasicMaterial({ color: AXIS_COLORS[i] })));
+  }
+  return group;
+}
+
+/**
+ * A grid's side for a model of `box`: a round length (1, 2 or 5 times a power of ten, in mm)
+ * past twice its extent across XY and from the origin.
+ * @param {Box3} box
+ * @returns {number}
+ */
+export function gridSide(box) {
+  if (box.isEmpty()) return DEFAULT_GRID_MM;
+  const reach = Math.max(
+    Math.abs(box.min.x),
+    Math.abs(box.max.x),
+    Math.abs(box.min.y),
+    Math.abs(box.max.y),
+  );
+  const wanted = Math.max(reach * 2, 1);
+  const power = 10 ** Math.floor(Math.log10(wanted));
+  const step = [1, 2, 5, 10].find((factor) => factor * power >= wanted) ?? 10;
+  return step * power;
+}
+
+/**
+ * Lines every `step` from the origin across a `width` × `depth` rectangle centred on it, and
+ * along its edges. They ran from one edge, so a plate whose side isn't a whole number of steps
+ * had none through the origin and one past its far edge.
+ * @param {number} width
+ * @param {number} depth
+ * @param {number} step
+ * @param {string} color
+ * @returns {LineSegments}
+ */
+function lines(width, depth, step, color) {
+  /** @type {number[]} */
+  const positions = [];
+  const halfW = width / 2;
+  const halfD = depth / 2;
+  for (const x of stops(halfW, step)) positions.push(x, -halfD, 0, x, halfD, 0);
+  for (const y of stops(halfD, step)) positions.push(-halfW, y, 0, halfW, y, 0);
+  const geometry = new BufferGeometry().setAttribute(
+    'position',
+    new Float32BufferAttribute(positions, 3),
+  );
+  return new LineSegments(geometry, new LineBasicMaterial({ color }));
+}
+
+/**
+ * Where lines across ±`half` go: every whole `step` from 0 inside it (each a multiple, not a
+ * sum, so they don't drift), and ±`half`.
+ * @param {number} half
+ * @param {number} step
+ * @returns {number[]}
+ */
+export function stops(half, step) {
+  // A multiple this near an edge is the edge
+  const near = step * 1e-6;
+  /** @type {number[]} */
+  const inside = [];
+  for (let i = Math.ceil(-half / step); i * step <= half; i++) {
+    const at = i * step;
+    if (Math.abs(Math.abs(at) - half) > near) inside.push(at);
+  }
+  return [-half, ...inside, half];
+}