@kupcad/ui 0.0.0-stage → 0.1.1

package/src/viewer/model.js

@@ -0,0 +1,293 @@
+// A model the core made (@kupcad/protocol's Model) as a scene. A GLB's Solids are put back in
+// the script's coordinates: the core writes them in metres and Y up under one root node, whose
+// transform this undoes, so the scene is in millimetres and Z up. Each mesh is known by the part
+// its node is a copy of (the frame's `parts[].nodes`), and gets its feature edges; a ghost is seen
+// through, and a highlighted solid drawn in the highlight's colour, seen through what hides it
+// too. A drawing's SVG becomes its filled shapes and outlines on the XY plane.
+
+import {
+  DoubleSide,
+  EdgesGeometry,
+  Float32BufferAttribute,
+  BufferGeometry,
+  GreaterDepth,
+  Group,
+  LineBasicMaterial,
+  LineSegments,
+  Matrix4,
+  Mesh,
+  MeshBasicMaterial,
+  ShapeGeometry,
+} from 'three';
+import { SVGLoader } from 'three/addons/loaders/SVGLoader.js';
+import { disposeGeometries } from './dispose.js';
+
+/** @import { Material, Object3D } from 'three' */
+/** @import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js' */
+/** @import { Model, Part } from '@kupcad/protocol/types' */
+/** @import { SceneModel, Shape, Theme } from './types.js' */
+
+/** Where a solid's faces meet at more than this many degrees, an edge is drawn: its features. */
+export const EDGE_ANGLE_DEG = 20;
+/** A ghost is seen through. */
+export const GHOST_OPACITY = 0.2;
+/** How much of a highlighted solid shows where something hides it. */
+export const SEEN_THROUGH_OPACITY = 0.4;
+/**
+ * A shape's faces are drawn this far behind its edges (in depth, as a factor of their slope
+ * and in its smallest steps), so the edges, at the same depth, aren't lost in the faces.
+ */
+const FACES_BEHIND_EDGES = { polygonOffset: true, polygonOffsetFactor: 1, polygonOffsetUnits: 1 };
+/** The extension a GLB built with `--draco` uses. */
+const DRACO_EXTENSION = 'KHR_draco_mesh_compression';
+/** A GLB's header (magic, version, length), then its JSON chunk's length and type. */
+const GLB_JSON_START = 20;
+
+/**
+ * The scene of `model`; null for a model of nothing.
+ * @param {Model} model
+ * @param {GLTFLoader} loader
+ * @param {Theme} theme
+ * @returns {Promise<SceneModel | null>}
+ */
+export async function sceneOf(model, loader, theme) {
+  if (model.kind === '3d') return solids(model.glb, model.parts, loader, theme);
+  if (model.kind === '2d') return drawing(model.svg, theme);
+  return null;
+}
+
+/**
+ * Whether a GLB's meshes are Draco-compressed (its JSON lists the extension as used).
+ * @param {Uint8Array} glb
+ */
+export function isDracoCompressed(glb) {
+  const view = new DataView(glb.buffer, glb.byteOffset, glb.byteLength);
+  const jsonLength = view.getUint32(12, true);
+  const json = new TextDecoder().decode(glb.subarray(GLB_JSON_START, GLB_JSON_START + jsonLength));
+  return (
+    /** @type {{ extensionsUsed?: string[] }} */ (JSON.parse(json)).extensionsUsed?.includes(
+      DRACO_EXTENSION,
+    ) ?? false
+  );
+}
+
+/**
+ * @param {Uint8Array} glb
+ * @param {Part[]} parts
+ * @param {GLTFLoader} loader
+ * @param {Theme} theme
+ * @returns {Promise<SceneModel>}
+ */
+async function solids(glb, parts, loader, theme) {
+  // The loader takes a whole ArrayBuffer: the frame's GLB is a view on the frame
+  const gltf = await loader.parseAsync(/** @type {ArrayBuffer} */ (glb.slice().buffer), '');
+  const scene = gltf.scene;
+  if (scene.children.length === 1) {
+    const root = scene.children[0];
+    root.updateMatrix();
+    scene.applyMatrix4(new Matrix4().copy(root.matrix).invert());
+  }
+  const partOf = new Map(parts.flatMap((part) => part.nodes.map((node) => [node, part.name])));
+  // The loader sanitizes the objects' names ("Lid v2.0" is "Lid_v20"): the GLB's are the parts'
+  const nodes = /** @type {{ name?: string }[]} */ (gltf.parser.json.nodes ?? []);
+  /** @param {Object3D} object */
+  const nodeName = (object) => {
+    const index = gltf.parser.associations.get(object)?.nodes;
+    return index === undefined ? undefined : nodes[index]?.name;
+  };
+  const edgeMaterial = new LineBasicMaterial({ color: theme.edges });
+  /** @type {Shape[]} */
+  const shapes = [];
+  scene.traverse((object) => {
+    if (object instanceof Mesh) {
+      shapes.push(solidShape(object, partOf, nodeName, edgeMaterial, theme));
+    }
+  });
+  const root = new Group();
+  root.add(scene);
+  return { kind: '3d', root, shapes, edgeMaterial };
+}
+
+/**
+ * A solid's mesh as a shape: its own material (so tinting one part tints no other), its part,
+ * and its edges; a ghost seen through, in the theme's colour; a highlighted one (the core tags
+ * its material) in the highlight's, seen through what hides it.
+ * @param {Mesh} mesh
+ * @param {Map<string, string>} partOf
+ * @param {(object: Object3D) => string | undefined} nodeName
+ * @param {LineBasicMaterial} edgeMaterial
+ * @param {Theme} theme
+ * @returns {Shape}
+ */
+function solidShape(mesh, partOf, nodeName, edgeMaterial, theme) {
+  const material = /** @type {import('three').MeshStandardMaterial} */ (
+    /** @type {Material} */ (mesh.material).clone()
+  );
+  mesh.material = material;
+  const role = material.userData.kupcad_role;
+  const ghost = role === 'ghost';
+  if (ghost) {
+    material.color.set(theme.ghost);
+    material.transparent = true;
+    material.opacity = GHOST_OPACITY;
+    material.depthWrite = false;
+    return {
+      mesh,
+      edges: null,
+      part: null,
+      ghost,
+      seenThrough: null,
+      color: material.color.clone(),
+      opacity: GHOST_OPACITY,
+    };
+  }
+  const highlighted = role === 'highlight';
+  if (highlighted) material.color.set(theme.highlight);
+  Object.assign(material, FACES_BEHIND_EDGES);
+  const edges = new LineSegments(new EdgesGeometry(mesh.geometry, EDGE_ANGLE_DEG), edgeMaterial);
+  mesh.add(edges);
+  return {
+    mesh,
+    edges,
+    part: partAbove(mesh, partOf, nodeName),
+    ghost,
+    seenThrough: highlighted ? seenThroughOf(mesh, theme.highlight) : null,
+    color: material.color.clone(),
+    opacity: material.opacity,
+  };
+}
+
+/**
+ * A copy of a highlighted solid's mesh, under it, drawn where something hides the solid (its
+ * depth behind what is drawn there; never over the solid's own faces, which lie behind it by
+ * their offset), see-through in `color`: the highlight seen through whatever is in front.
+ * @param {Mesh} mesh
+ * @param {string} color
+ * @returns {Mesh}
+ */
+function seenThroughOf(mesh, color) {
+  const copy = new Mesh(
+    mesh.geometry,
+    new MeshBasicMaterial({
+      color,
+      transparent: true,
+      opacity: SEEN_THROUGH_OPACITY,
+      depthFunc: GreaterDepth,
+      depthWrite: false,
+    }),
+  );
+  mesh.add(copy);
+  return copy;
+}
+
+/**
+ * The part of the nearest node above `object` (itself first) that is a copy of one.
+ * @param {Object3D} object
+ * @param {Map<string, string>} partOf
+ * @param {(object: Object3D) => string | undefined} nodeName the GLB's name of an object's node
+ * @returns {string | null}
+ */
+function partAbove(object, partOf, nodeName) {
+  for (let at = /** @type {Object3D | null} */ (object); at; at = at.parent) {
+    const name = nodeName(at);
+    const part = name === undefined ? undefined : partOf.get(name);
+    if (part !== undefined) return part;
+  }
+  return null;
+}
+
+/**
+ * A drawing (export_svg's) on the XY plane: each filled path a shape named by its id, with its
+ * outline; an open path its outline alone. The core negated every y, SVG's running down the
+ * page; the group turns it back.
+ * @param {string} svg
+ * @param {Theme} theme
+ * @returns {SceneModel}
+ */
+function drawing(svg, theme) {
+  const root = new Group();
+  root.scale.y = -1;
+  // Outlines on the background
+  const edgeMaterial = new LineBasicMaterial({ color: theme.wire });
+  /** @type {Shape[]} */
+  const shapes = [];
+  for (const path of new SVGLoader().parse(svg).paths) {
+    /** @type {{ fill?: string, fillOpacity?: number }} */
+    const style = path.userData?.style ?? {};
+    const filled = style.fill !== undefined && style.fill !== 'none';
+    const edges = new LineSegments(outlineOf(path, filled), edgeMaterial);
+    if (!filled) {
+      root.add(edges);
+      continue;
+    }
+    const opacity = style.fillOpacity ?? 1;
+    const material = new MeshBasicMaterial({
+      color: path.color,
+      side: DoubleSide,
+      transparent: opacity < 1,
+      opacity,
+      ...FACES_BEHIND_EDGES,
+    });
+    const mesh = new Mesh(new ShapeGeometry(path.toShapes()), material);
+    mesh.add(edges);
+    root.add(mesh);
+    const id = /** @type {Element | undefined} */ (path.userData?.node)?.getAttribute('id');
+    shapes.push({
+      mesh,
+      edges,
+      part: id || null,
+      ghost: false,
+      seenThrough: null,
+      color: material.color.clone(),
+      opacity,
+    });
+  }
+  return { kind: '2d', root, shapes, edgeMaterial };
+}
+
+/**
+ * A path's outline as line segments, each of its subpaths closed when the path is filled.
+ * @param {import('three').ShapePath} path
+ * @param {boolean} closed
+ * @returns {BufferGeometry}
+ */
+function outlineOf(path, closed) {
+  /** @type {number[]} */
+  const positions = [];
+  for (const subPath of path.subPaths) {
+    const points = subPath.getPoints();
+    const count = closed ? points.length : points.length - 1;
+    for (let i = 0; i < count; i++) {
+      const a = points[i];
+      const b = points[(i + 1) % points.length];
+      positions.push(a.x, a.y, 0, b.x, b.y, 0);
+    }
+  }
+  return new BufferGeometry().setAttribute('position', new Float32BufferAttribute(positions, 3));
+}
+
+/**
+ * The materials the model's scene owns: each shape's, a highlight's copy's, and its edges'. A
+ * selected shape's edges are drawn with the viewer's material, which isn't the model's to free.
+ * @param {SceneModel} model
+ * @returns {Set<Material>}
+ */
+export function ownMaterials(model) {
+  return new Set([
+    model.edgeMaterial,
+    ...model.shapes.flatMap((shape) =>
+      [shape.mesh, shape.seenThrough].flatMap((mesh) =>
+        mesh ? [/** @type {Material} */ (mesh.material)] : [],
+      ),
+    ),
+  ]);
+}
+
+/**
+ * Frees the GPU's copies of a scene's geometries and materials.
+ * @param {SceneModel} model
+ */
+export function disposeScene(model) {
+  disposeGeometries(model.root);
+  for (const material of ownMaterials(model)) material.dispose();
+}

package/src/viewer/motion.js

@@ -0,0 +1,96 @@
+// The camera's moves: where it stands (a pose) and how it gets from one pose to the next, eased
+// over a moment. Its direction from what it looks at turns on the way, so a move from the top to
+// the bottom goes round the model, not through it; its distance, what it looks at and how much
+// an orthographic camera shows ease along. Plain math over three.js's vectors.
+
+import { Quaternion, Vector3 } from 'three';
+
+/** How long a move takes, by default. */
+export const MOTION_MS = 250;
+/** Two directions this close (the cosine of their angle) are one: a named view's, say. */
+const SAME_DIRECTION = 1 - 1e-6;
+
+/**
+ * Where a camera stands: what it looks at, from which way (a unit vector from the target toward
+ * the camera) and how far, and the half-height an orthographic camera shows (at zoom 1).
+ * @typedef {object} Pose
+ * @property {Vector3} target
+ * @property {Vector3} direction
+ * @property {number} distance
+ * @property {number} halfHeight
+ */
+
+/**
+ * Whether two unit directions are one.
+ * @param {Vector3} a
+ * @param {Vector3} b
+ */
+export const sameDirection = (a, b) => a.dot(b) >= SAME_DIRECTION;
+
+/** A move from one pose to another, eased in and out. */
+export class CameraMove {
+  /** @type {Pose} */
+  #from;
+  /** @type {Pose} */
+  #to;
+  /** The turn from the first direction to the last. */
+  #turn;
+  #start;
+  #ms;
+
+  /**
+   * @param {Pose} from
+   * @param {Pose} to
+   * @param {number} start when it starts, in ms (`performance.now()`'s)
+   * @param {number} ms how long it takes
+   */
+  constructor(from, to, start, ms) {
+    this.#from = from;
+    this.#to = to;
+    this.#turn = new Quaternion().setFromUnitVectors(from.direction, to.direction);
+    this.#start = start;
+    this.#ms = ms;
+  }
+
+  /** Where it ends. */
+  get to() {
+    return this.#to;
+  }
+
+  /**
+   * The pose at `now`, and whether the move is over.
+   * @param {number} now
+   * @returns {{ pose: Pose, done: boolean }}
+   */
+  at(now) {
+    const t = Math.min(1, Math.max(0, (now - this.#start) / this.#ms));
+    if (t === 1) return { pose: this.#to, done: true };
+    const k = easeInOut(t);
+    const from = this.#from;
+    const to = this.#to;
+    const turn = new Quaternion().slerp(this.#turn, k);
+    return {
+      pose: {
+        target: from.target.clone().lerp(to.target, k),
+        direction: from.direction.clone().applyQuaternion(turn).normalize(),
+        distance: from.distance + (to.distance - from.distance) * k,
+        halfHeight: from.halfHeight + (to.halfHeight - from.halfHeight) * k,
+      },
+      done: false,
+    };
+  }
+}
+
+/**
+ * Cubic ease in and out: slow at both ends.
+ * @param {number} t from 0 to 1
+ */
+export function easeInOut(t) {
+  return t < 0.5 ? 4 * t * t * t : 1 - (-2 * t + 2) ** 3 / 2;
+}
+
+/**
+ * The direction `[x, y, z]` as a unit vector.
+ * @param {readonly [number, number, number]} direction
+ */
+export const unit = (direction) => new Vector3(...direction).normalize();

package/src/viewer/section.js

@@ -0,0 +1,166 @@
+// A section through the model: a plane that every shape's materials clip at, and the faces it
+// cuts capped where the plane runs inside a solid, by three.js's stencil technique
+// (webgl_clipping_stencil): each solid's back faces count up in the stencil buffer and its front
+// faces down, both clipped, so where the count isn't 0 the plane is inside a solid, and a plane
+// drawn there in the cap's colour closes the cut.
+
+import {
+  AlwaysStencilFunc,
+  BackSide,
+  DecrementWrapStencilOp,
+  DoubleSide,
+  FrontSide,
+  Group,
+  IncrementWrapStencilOp,
+  Mesh,
+  MeshBasicMaterial,
+  MeshStandardMaterial,
+  NotEqualStencilFunc,
+  Plane,
+  PlaneGeometry,
+  ReplaceStencilOp,
+  Vector3,
+} from 'three';
+import { ownMaterials } from './model.js';
+
+/** @import { Material, Sphere } from 'three' */
+/** @import { Section, SceneModel, Theme } from './types.js' */
+
+/**
+ * The order things are drawn in: the stencil counts, the cap where they say the plane is inside
+ * a solid, then the model (always last, the others drawn only while a section is on).
+ */
+export const RENDER_ORDER = { stencil: 1, cap: 1.1, model: 2 };
+/** The axis each section is across, as the direction it cuts away. */
+const AXES = { x: new Vector3(1, 0, 0), y: new Vector3(0, 1, 0), z: new Vector3(0, 0, 1) };
+/** The cap plane reaches this far past the model's bounding sphere's radius. */
+const CAP_REACH = 4;
+const PLANE_NORMAL = new Vector3(0, 0, 1);
+
+export class SectionView {
+  /** The plane every material clips at, while a section is on. */
+  plane = new Plane();
+  /** Whether the model is cut: a section is on, and the model is a solid's (a drawing isn't). */
+  clipping = false;
+  /** The cap's plane, drawn where the stencil count isn't 0. */
+  cap;
+  /** The stencil counters added under each solid mesh: taken away with the section. */
+  #counters = /** @type {Group[]} */ ([]);
+  /** The model they count for: a section moved over it keeps them. @type {SceneModel | null} */
+  #counted = null;
+  /** The counters' back faces count up, their front faces down; every counter shares these. */
+  #counting = [
+    counterMaterial(BackSide, IncrementWrapStencilOp, this.plane),
+    counterMaterial(FrontSide, DecrementWrapStencilOp, this.plane),
+  ];
+
+  /** @param {Theme} theme */
+  constructor(theme) {
+    const material = new MeshStandardMaterial({
+      color: theme.cap,
+      // Seen from the side cut away, against the plane's normal, which points to what is kept
+      side: DoubleSide,
+      stencilWrite: true,
+      stencilRef: 0,
+      stencilFunc: NotEqualStencilFunc,
+      stencilFail: ReplaceStencilOp,
+      stencilZFail: ReplaceStencilOp,
+      stencilZPass: ReplaceStencilOp,
+    });
+    this.cap = new Mesh(new PlaneGeometry(1, 1), material);
+    this.cap.renderOrder = RENDER_ORDER.cap;
+    this.cap.visible = false;
+  }
+
+  /** @param {string} color */
+  setCapColor(color) {
+    /** @type {MeshStandardMaterial} */ (this.cap.material).color.set(color);
+  }
+
+  /**
+   * Cuts `model` at `section`, or takes the cut away (null). A section moved over the same
+   * model moves the plane alone: its counters stay, and the materials' programs (a material
+   * clipping, or not, is a program of its own), where every move of the offset made them again.
+   * @param {Section | null} section
+   * @param {SceneModel | null} model
+   * @param {Sphere} bounds the model's, which the cap must cover
+   * @param {{ capped: boolean, also: Material[] }} options whether the cut is closed (not in a
+   *   wireframe), and materials outside the model that clip with it (the selected shapes'
+   *   edges)
+   */
+  apply(section, model, bounds, { capped, also }) {
+    const cut = section && model?.kind === '3d' ? { section, model } : null;
+    this.clipping = cut !== null;
+    if (cut) {
+      // What lies past the offset, along the axis (against it when flipped), is cut away
+      this.plane.normal.copy(AXES[cut.section.axis]).multiplyScalar(cut.section.flip ? 1 : -1);
+      this.plane.constant = cut.section.flip ? -cut.section.offset : cut.section.offset;
+    }
+    this.cap.visible = cut !== null && capped;
+    for (const material of [...(model ? ownMaterials(model) : []), ...also]) {
+      const clips = material.clippingPlanes !== null && material.clippingPlanes.length > 0;
+      if (clips === this.clipping) continue;
+      material.clippingPlanes = this.clipping ? [this.plane] : null;
+      material.needsUpdate = true;
+    }
+    this.#count(cut && capped ? cut.model : null);
+    if (!cut || !capped) return;
+    // Centred where the model's centre meets the plane, the cap covers the cut wherever it is
+    const size = bounds.radius * CAP_REACH;
+    this.cap.scale.set(size, size, 1);
+    this.plane.projectPoint(bounds.center, this.cap.position);
+    this.cap.quaternion.setFromUnitVectors(PLANE_NORMAL, this.plane.normal);
+  }
+
+  dispose() {
+    this.cap.geometry.dispose();
+    /** @type {Material} */ (this.cap.material).dispose();
+    for (const material of this.#counting) material.dispose();
+  }
+
+  /**
+   * Puts the stencil counters under the solid meshes of `model`, or takes them away (null):
+   * the ones there already stay.
+   * @param {SceneModel | null} model
+   */
+  #count(model) {
+    if (model === this.#counted) return;
+    for (const counters of this.#counters) counters.removeFromParent();
+    this.#counters = [];
+    this.#counted = model;
+    for (const shape of model?.shapes ?? []) {
+      if (shape.ghost) continue;
+      const counters = new Group();
+      for (const material of this.#counting) {
+        const counter = new Mesh(shape.mesh.geometry, material);
+        counter.renderOrder = RENDER_ORDER.stencil;
+        counters.add(counter);
+      }
+      shape.mesh.add(counters);
+      this.#counters.push(counters);
+    }
+  }
+}
+
+/**
+ * The material of a stencil counter, an invisible copy of a solid clipped at `plane`: its
+ * faces on `side` change the count by `op`.
+ * @param {import('three').Side} side
+ * @param {import('three').StencilOp} op
+ * @param {Plane} plane
+ * @returns {MeshBasicMaterial}
+ */
+function counterMaterial(side, op, plane) {
+  return new MeshBasicMaterial({
+    side,
+    clippingPlanes: [plane],
+    depthWrite: false,
+    depthTest: false,
+    colorWrite: false,
+    stencilWrite: true,
+    stencilFunc: AlwaysStencilFunc,
+    stencilFail: op,
+    stencilZFail: op,
+    stencilZPass: op,
+  });
+}

package/src/viewer/testing.js

@@ -0,0 +1,90 @@
+// For a host's tests of the viewer and the components. Imported (a Vitest `setupFiles` entry,
+// say), it gives jsdom what a browser has and they use: the component watches its canvas's size,
+// the camera's controls capture the pointer while it drags, and a screenshot reads the canvas as
+// an image, which jsdom draws none of: here an empty PNG. A canvas has no context, as jsdom's has
+// none, but quietly (jsdom says "not implemented" when asked). A dialog (the shortcuts') opens and
+// closes, which jsdom's element can't. `stubRenderer` draws in place of WebGL.
+
+/** @import { Camera, Object3D } from 'three' */
+/** @import { RendererLike } from './types.js' */
+
+globalThis.ResizeObserver ??= class {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+};
+
+Element.prototype.setPointerCapture ??= () => {};
+Element.prototype.releasePointerCapture ??= () => {};
+Element.prototype.hasPointerCapture ??= () => false;
+
+HTMLCanvasElement.prototype.getContext = /** @type {HTMLCanvasElement['getContext']} */ (
+  () => null
+);
+
+// Shown, a dialog is open; closed, it says so, as a browser's does
+HTMLDialogElement.prototype.showModal ??= /** @this {HTMLDialogElement} */ function showModal() {
+  this.open = true;
+};
+HTMLDialogElement.prototype.close ??= /** @this {HTMLDialogElement} */ function close() {
+  if (!this.open) return;
+  this.open = false;
+  this.dispatchEvent(new Event('close'));
+};
+
+/** @type {HTMLCanvasElement['toBlob']} */
+HTMLCanvasElement.prototype.toBlob = function toBlob(callback, type = 'image/png') {
+  callback(new Blob([], { type }));
+};
+
+/**
+ * A stand-in for WebGL, for a Viewer's `options.renderer`: it draws nothing, and keeps what it
+ * was asked of the viewer's canvas (the first it is given; another, a view cube's, it draws on
+ * unrecorded): how many frames, the scene and the camera of the last, and whether it was
+ * disposed; and of every canvas, how many renderers were made and how many let their context
+ * go. As a WebGLRenderer does, it brings the scene's and the camera's matrices up to date: the
+ * camera's controls pan along them.
+ */
+export function stubRenderer() {
+  const drawn = {
+    renders: 0,
+    /** @type {Object3D | null} */
+    scene: null,
+    /** @type {Camera | null} */
+    camera: null,
+    disposed: false,
+    made: 0,
+    released: 0,
+  };
+  /** @type {HTMLCanvasElement | null} */
+  let viewers = null;
+  /**
+   * @param {HTMLCanvasElement} canvas
+   * @returns {RendererLike}
+   */
+  const renderer = (canvas) => {
+    viewers ??= canvas;
+    const recorded = canvas === viewers;
+    drawn.made += 1;
+    return {
+      localClippingEnabled: false,
+      setPixelRatio() {},
+      setSize() {},
+      render(scene, camera) {
+        scene.updateMatrixWorld();
+        if (camera.parent === null) camera.updateMatrixWorld();
+        if (!recorded) return;
+        drawn.renders += 1;
+        drawn.scene = scene;
+        drawn.camera = camera;
+      },
+      dispose() {
+        if (recorded) drawn.disposed = true;
+      },
+      forceContextLoss() {
+        drawn.released += 1;
+      },
+    };
+  };
+  return { renderer, drawn };
+}

package/src/viewer/theme.js

@@ -0,0 +1,32 @@
+// The viewer's colours: what a host maps its own tokens into (the VS Code webview its
+// --vscode-* variables, the playground its page's). Any CSS colour. By default the KupCAD brand:
+// a picked part in its orangered, on the neutrals of @kupcad/ui's tokens; a section's cut
+// faces in dodgerblue, so no other warm colour reads as the selection.
+
+/** @import { Theme } from './types.js' */
+
+/** @type {Theme} */
+export const LIGHT = {
+  background: '#eef1f4',
+  grid: '#c9cfd6',
+  plate: '#e3e7eb',
+  edges: '#1a1b1c',
+  wire: '#1a1b1c',
+  selection: '#ff5f14',
+  cap: '#0099ff',
+  ghost: '#7d8794',
+  highlight: '#d6409f',
+};
+
+/** @type {Theme} */
+export const DARK = {
+  background: '#131415',
+  grid: '#2e2f32',
+  plate: '#1f2022',
+  edges: '#0b0b0c',
+  wire: '#c9ced4',
+  selection: '#ff5f14',
+  cap: '#3daeff',
+  ghost: '#8a94a1',
+  highlight: '#f06cb8',
+};