@opsydyn/effect-three 0.3.0 → 0.6.4

package/dist/{index-8cf8t6by.js → index-re3rrfwd.js}

@@ -1,3 +1,72 @@
+import {
+  seededRandom,
+  edgePoints,
+  edgeLine,
+  animatedLook
+} from "./index-ttwy0znv.js";
+var __defProp = Object.defineProperty;
+var __returnValue = (v) => v;
+function __exportSetter(name, newValue) {
+  this[name] = __returnValue.bind(null, newValue);
+}
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, {
+      get: all[name],
+      enumerable: true,
+      configurable: true,
+      set: __exportSetter.bind(all, name)
+    });
+};
+
+// src/kernel/history.ts
+var exports_history = {};
+__export(exports_history, {
+  branches: () => branches,
+  canRedo: () => canRedo,
+  canUndo: () => canUndo,
+  chooseBranch: () => chooseBranch,
+  depth: () => depth,
+  jumpTo: () => jumpTo,
+  make: () => make,
+  pathTo: () => pathTo,
+  present: () => present,
+  presentEntry: () => presentEntry,
+  record: () => record,
+  redo: () => redo,
+  undo: () => undo
+});
+
+// src/kernel/lockstep.ts
+var exports_lockstep = {};
+__export(exports_lockstep, {
+  admit: () => admit,
+  advance: () => advance,
+  join: () => join,
+  leaderAt: () => leaderAt,
+  leave: () => leave,
+  make: () => make2,
+  membersAt: () => membersAt,
+  receive: () => receive,
+  remove: () => remove,
+  send: () => send,
+  submit: () => submit,
+  waitingOn: () => waitingOn,
+  welcomeDue: () => welcomeDue
+});
+
+// src/kernel/timeline.ts
+var exports_timeline = {};
+__export(exports_timeline, {
+  due: () => due,
+  extend: () => extend,
+  make: () => make3,
+  reach: () => reach,
+  restart: () => restart,
+  schedule: () => schedule,
+  until: () => until
+});
+
 // src/kernel/description.ts
 var handJoints2 = [
   "wrist",
@@ -125,6 +194,8 @@ var applyShaded = (material, description, mapChanged = false) => {
 };
 var applyBasic = (material, description, textures) => {
   material.color.setHex(description.color);
+  material.depthTest = description.depthTest;
+  material.depthWrite = description.depthTest;
   const mapChanged = applyMap(material, description.map, textures);
   if (applySurface(material, description) || mapChanged)
     material.needsUpdate = true;
@@ -489,8 +560,25 @@ var jointsEqual = (a, b) => {
 var labelTypeEquals = (a, b) => a.text === b.text && a.font === b.font && Object.is(a.fontSize, b.fontSize) && a.color === b.color && Object.is(a.fillOpacity, b.fillOpacity) && Object.is(a.anchorX, b.anchorX) && Object.is(a.anchorY, b.anchorY) && Object.is(a.maxWidth, b.maxWidth) && Object.is(a.lineHeight, b.lineHeight) && Object.is(a.letterSpacing, b.letterSpacing) && a.textAlign === b.textAlign && Object.is(a.outlineWidth, b.outlineWidth) && a.outlineColor === b.outlineColor && Object.is(a.outlineOpacity, b.outlineOpacity) && Object.is(a.outlineBlur, b.outlineBlur) && Object.is(a.curveRadius, b.curveRadius) && a.colorRanges.length === b.colorRanges.length && a.colorRanges.every((range, i) => colorRangeEquals(range, b.colorRanges[i]));
 var colorRangeEquals = (a, b) => b !== undefined && a.start === b.start && a.color === b.color;
 var labelMaterialEquals = (a, b) => a === b || a !== null && b !== null && materialRefEquals2(a, b);
+var pointLookEquals = (a, b) => {
+  if (a === b)
+    return true;
+  switch (a._tag) {
+    case "Dots":
+      return b._tag === "Dots" && a.positions.length === b.positions.length && a.positions.every((point, index) => vec3Equals2(point, b.positions[index] ?? point)) && numbersEqual(a.colors, b.colors) && numbersEqual(a.sizes, b.sizes) && Object.is(a.color, b.color) && Object.is(a.size, b.size) && a.sizeAttenuation === b.sizeAttenuation && a.round === b.round && Object.is(a.opacity, b.opacity) && a.transparent === b.transparent;
+    case "Sparkles":
+      return b._tag === "Sparkles" && a.count === b.count && Object.is(a.speed, b.speed) && Object.is(a.opacity, b.opacity) && vec3Equals2(a.scale, b.scale) && Object.is(a.size, b.size) && Object.is(a.color, b.color) && vec3Equals2(a.noise, b.noise) && Object.is(a.seed, b.seed);
+    case "Stars":
+      return b._tag === "Stars" && Object.is(a.radius, b.radius) && Object.is(a.depth, b.depth) && a.count === b.count && Object.is(a.factor, b.factor) && Object.is(a.saturation, b.saturation) && a.fade === b.fade && Object.is(a.speed, b.speed) && Object.is(a.seed, b.seed);
+  }
+};
+var trailEquals = (a, b) => a === b || a !== null && b !== null && Object.is(a.width, b.width) && Object.is(a.length, b.length) && Object.is(a.decay, b.decay) && a.local === b.local && Object.is(a.stride, b.stride) && Object.is(a.interval, b.interval) && Object.is(a.color, b.color) && a.taper === b.taper && a.fade === b.fade;
+var edgesEquals = (a, b) => a === b || a !== null && b !== null && Object.is(a.threshold, b.threshold) && Object.is(a.color, b.color) && Object.is(a.width, b.width) && a.worldUnits === b.worldUnits && a.dashed === b.dashed && Object.is(a.dashSize, b.dashSize) && Object.is(a.gapSize, b.gapSize) && Object.is(a.opacity, b.opacity) && a.transparent === b.transparent;
+var lineLookEquals = (a, b) => a.segments === b.segments && Object.is(a.color, b.color) && Object.is(a.width, b.width) && a.worldUnits === b.worldUnits && a.dashed === b.dashed && Object.is(a.dashSize, b.dashSize) && Object.is(a.gapSize, b.gapSize) && Object.is(a.dashScale, b.dashScale) && Object.is(a.dashOffset, b.dashOffset) && Object.is(a.opacity, b.opacity) && a.transparent === b.transparent && (a.points === b.points || a.points.length === b.points.length && a.points.every((point, index) => vec3Equals2(point, b.points[index] ?? point))) && (a.vertexColors === b.vertexColors || a.vertexColors !== null && b.vertexColors !== null && a.vertexColors.length === b.vertexColors.length && a.vertexColors.every((color, index) => Object.is(color, b.vertexColors?.[index])));
 var shaderGridLookEquals = (a, b) => Object.is(a.size[0], b.size[0]) && Object.is(a.size[1], b.size[1]) && Object.is(a.cellSize, b.cellSize) && Object.is(a.cellThickness, b.cellThickness) && a.cellColor === b.cellColor && Object.is(a.sectionSize, b.sectionSize) && Object.is(a.sectionThickness, b.sectionThickness) && a.sectionColor === b.sectionColor && a.infinite === b.infinite && a.followCamera === b.followCamera && Object.is(a.fadeDistance, b.fadeDistance) && Object.is(a.fadeStrength, b.fadeStrength) && Object.is(a.fadeFrom, b.fadeFrom) && a.side === b.side;
-var physicsEquals2 = (a, b) => a === b || a !== null && b !== null && vec3Equals2(a.gravity, b.gravity) && a.paused === b.paused && Object.is(a.timeStep, b.timeStep) && a.interpolate === b.interpolate && a.debug === b.debug && jointsEqual(a.joints, b.joints);
+var assetEquals = (a, b) => b !== undefined && a.kind === b.kind && a.id === b.id && a.url === b.url && a.levels.length === b.levels.length && a.levels.every((level, i) => level === b.levels[i]);
+var assetsEqual2 = (a, b) => a === b || a.length === b.length && a.every((asset, i) => assetEquals(asset, b[i]));
+var physicsEquals2 = (a, b) => a === b || a !== null && b !== null && vec3Equals2(a.gravity, b.gravity) && a.paused === b.paused && Object.is(a.timeStep, b.timeStep) && a.interpolate === b.interpolate && a.until === b.until && a.run === b.run && a.snapshotAt === b.snapshotAt && a.keep === b.keep && (a.from === b.from || a.from !== null && b.from !== null && a.from.step === b.from.step && a.from.snapshot === b.from.snapshot) && a.debug === b.debug && jointsEqual(a.joints, b.joints);
 var xrAnchorEquals = (a, b) => b !== undefined && a.id === b.id && vec3Equals2(a.position, b.position) && vec3Equals2(a.rotation, b.rotation);
 var xrEquals2 = (a, b) => a === b || a !== null && b !== null && vec3Equals2(a.origin, b.origin) && Object.is(a.heading, b.heading) && a.referenceSpace === b.referenceSpace && Object.is(a.framebufferScale, b.framebufferScale) && a.hitTest === b.hitTest && a.showInputs === b.showInputs && (a.glide === b.glide || a.glide !== null && b.glide !== null && Object.is(a.glide.speed, b.glide.speed) && a.glide.turn === b.glide.turn && Object.is(a.glide.turnSpeed, b.glide.turnSpeed) && Object.is(a.glide.snapDegrees, b.glide.snapDegrees)) && a.planes === b.planes && a.meshes === b.meshes && a.domOverlay === b.domOverlay && a.anchors.length === b.anchors.length && a.anchors.every((anchor, i) => xrAnchorEquals(anchor, b.anchors[i]));
 var xrSpaceEquals = (a, b) => {
@@ -658,6 +746,7 @@ var applyTween2 = (object, tween, elapsedSeconds) => {
   return false;
 };
 // src/kernel/build.ts
+import { CatmullRomCurve3, Color as Color2, CubicBezierCurve3, QuadraticBezierCurve3, Vector3 as Vector33 } from "three";
 var origin = [0, 0, 0];
 var unitScale = [1, 1, 1];
 var noRotation = { _tag: "Fixed", euler: origin };
@@ -774,7 +863,8 @@ var basic2 = (options = {}) => ({
   opacity: options.opacity ?? 1,
   transparent: options.transparent ?? false,
   side: options.side ?? "front",
-  wireframe: options.wireframe ?? false
+  wireframe: options.wireframe ?? false,
+  depthTest: options.depthTest ?? true
 });
 var lambert2 = (options = {}) => ({
   _tag: "Lambert",
@@ -888,9 +978,105 @@ var group2 = (options) => ({
   children: options.children ?? [],
   body: options.body ?? null,
   follow: options.follow ?? null,
-  detail: options.detail ?? null
+  detail: options.detail ?? null,
+  trail: options.trail ?? null
 });
 var detailed2 = (options) => ({ distances: options.distances, hysteresis: options.hysteresis ?? 0 });
+var line2 = (options) => ({
+  _tag: "Line",
+  key: options.key,
+  position: options.position ?? origin,
+  rotation: options.rotation ?? noRotation,
+  scale: options.scale ?? unitScale,
+  transition: options.transition ?? instantTransition,
+  behaviour: options.behaviour ?? null,
+  interactive: options.interactive ?? false,
+  points: options.points,
+  segments: options.segments ?? false,
+  color: options.color ?? 16777215,
+  vertexColors: options.vertexColors ?? null,
+  width: options.width ?? 1,
+  worldUnits: options.worldUnits ?? false,
+  dashed: options.dashed ?? false,
+  dashSize: options.dashSize ?? 1,
+  gapSize: options.gapSize ?? 1,
+  dashScale: options.dashScale ?? 1,
+  dashOffset: options.dashOffset ?? 0,
+  opacity: options.opacity ?? 1,
+  transparent: options.transparent ?? false
+});
+var asVector = (point) => new Vector33(point[0], point[1], point[2]);
+var asVec3 = (point) => [point.x, point.y, point.z];
+var placed = (options, look) => ({
+  _tag: "Points",
+  key: options.key,
+  position: options.position ?? origin,
+  rotation: options.rotation ?? noRotation,
+  scale: options.scale ?? unitScale,
+  transition: options.transition ?? instantTransition,
+  behaviour: options.behaviour ?? null,
+  look
+});
+var points2 = (options) => placed(options, {
+  _tag: "Dots",
+  positions: options.positions,
+  colors: options.colors ?? null,
+  sizes: options.sizes ?? null,
+  color: options.color ?? 16777215,
+  size: options.size ?? 1,
+  sizeAttenuation: options.sizeAttenuation ?? true,
+  round: options.round ?? true,
+  opacity: options.opacity ?? 1,
+  transparent: options.transparent ?? false
+});
+var sparkles2 = (options) => {
+  const spread = options.spread ?? 1;
+  const noise = options.noise ?? 1;
+  return placed(options, {
+    _tag: "Sparkles",
+    count: options.count ?? 100,
+    speed: options.speed ?? 1,
+    opacity: options.opacity ?? 1,
+    scale: typeof spread === "number" ? [spread, spread, spread] : spread,
+    size: options.size ?? null,
+    color: options.color ?? 16777215,
+    noise: typeof noise === "number" ? [noise, noise, noise] : noise,
+    seed: options.seed ?? 1
+  });
+};
+var stars2 = (options) => placed(options, {
+  _tag: "Stars",
+  radius: options.radius ?? 100,
+  depth: options.depth ?? 50,
+  count: options.count ?? 5000,
+  factor: options.factor ?? 4,
+  saturation: options.saturation ?? 0,
+  fade: options.fade ?? false,
+  speed: options.speed ?? 1,
+  seed: options.seed ?? 1
+});
+var catmullRomPoints2 = (points, options = {}) => new CatmullRomCurve3(points.map(asVector), options.closed ?? false, options.curveType ?? "centripetal", options.tension ?? 0.5).getPoints(options.segments ?? 20).map(asVec3);
+var catmullRomPointAt2 = (points, t, options = {}) => asVec3(new CatmullRomCurve3(points.map(asVector), options.closed ?? false, options.curveType ?? "centripetal", options.tension ?? 0.5).getPoint(Math.min(1, Math.max(0, t))));
+var catmullRomColors2 = (colors, options = {}) => {
+  const segments = options.segments ?? 20;
+  if (colors.length < 2 || colors.length === segments + 1)
+    return colors;
+  const stops = colors.map((color) => new Color2(color));
+  const first = stops[0];
+  if (options.closed === true && first !== undefined)
+    stops.push(first.clone());
+  const divisions = segments / (stops.length - 1);
+  const at = (index) => (stops[Math.floor(index / divisions)] ?? new Color2).clone().lerp(stops[Math.floor(index / divisions) + 1] ?? new Color2, index % divisions / divisions).getHex();
+  const blended = Array.from({ length: segments - 1 }, (_, step) => at(step + 1));
+  return [colors[0] ?? 0, ...blended, stops.at(-1)?.getHex() ?? 0];
+};
+var cubicBezierPoints2 = (options) => new CubicBezierCurve3(asVector(options.start), asVector(options.midA), asVector(options.midB), asVector(options.end)).getPoints(options.segments ?? 20).map(asVec3);
+var quadraticBezierPoints2 = (options) => {
+  const [, startY] = options.start;
+  const [endX, , endZ] = options.end;
+  const mid = options.mid ?? [endX, startY, endZ];
+  return new QuadraticBezierCurve3(asVector(options.start), asVector(mid), asVector(options.end)).getPoints(options.segments ?? 20).map(asVec3);
+};
 var headSpace2 = () => ({ _tag: "Head" });
 var jointSpace2 = (hand, joint) => ({
   _tag: "Joint",
@@ -925,7 +1111,31 @@ var mesh2 = (options) => ({
   interactive: options.interactive ?? false,
   castShadow: options.castShadow ?? false,
   receiveShadow: options.receiveShadow ?? false,
-  body: options.body ?? null
+  body: options.body ?? null,
+  edges: options.edges ?? null,
+  trail: options.trail ?? null
+});
+var trail2 = (options = {}) => ({
+  width: options.width ?? 0.2,
+  length: options.length ?? 1,
+  decay: options.decay ?? 1,
+  local: options.local ?? false,
+  stride: options.stride ?? 0,
+  interval: options.interval ?? 1,
+  color: options.color ?? 16738740,
+  taper: options.taper ?? "none",
+  fade: options.fade ?? false
+});
+var edges2 = (options = {}) => ({
+  threshold: options.threshold ?? 15,
+  color: options.color ?? 16777215,
+  width: options.width ?? 1,
+  worldUnits: options.worldUnits ?? false,
+  dashed: options.dashed ?? false,
+  dashSize: options.dashSize ?? 1,
+  gapSize: options.gapSize ?? 1,
+  opacity: options.opacity ?? 1,
+  transparent: options.transparent ?? false
 });
 var body2 = (options = {}) => ({
   type: options.type ?? "dynamic",
@@ -979,6 +1189,11 @@ var physics2 = (options = {}) => ({
   paused: options.paused ?? false,
   timeStep: options.timeStep ?? 1 / 60,
   interpolate: options.interpolate ?? true,
+  until: options.until ?? null,
+  run: options.run ?? 0,
+  snapshotAt: options.snapshotAt ?? null,
+  from: options.from ?? null,
+  keep: options.keep ?? 0,
   debug: options.debug ?? false,
   joints: options.joints ?? noJoints
 });
@@ -1280,6 +1495,13 @@ var contactShadows2 = (options = {}) => {
 };
 var noOverlays = [];
 var noMeasures = [];
+var noAssets = [];
+var noLevels = [];
+var assetOf = (kind) => ({ id, url, levels }) => ({ kind, id, url, levels: levels ?? noLevels });
+var modelAsset2 = assetOf("model");
+var textureAsset2 = assetOf("texture");
+var environmentAsset2 = assetOf("environment");
+var fontAsset2 = assetOf("font");
 var defaultZIndexRange = [16777271, 0];
 var overlay2 = (options) => ({
   key: options.key,
@@ -1291,11 +1513,17 @@ var overlay2 = (options) => ({
   zIndexRange: options.zIndexRange ?? defaultZIndexRange,
   view: options.view ?? null
 });
+var hud2 = (options) => ({
+  alignment: options.alignment ?? "bottom-right",
+  margin: options.margin ?? [80, 80],
+  children: options.children ?? []
+});
 var scene2 = (options) => ({
   camera: options.camera ?? perspectiveCamera2(),
   gestures: options.gestures ?? "page",
   views: options.views ?? noViews,
   renderTextures: options.renderTextures ?? noRenderTextures,
+  hud: options.hud ?? null,
   overlays: options.overlays ?? noOverlays,
   environment: options.environment ?? null,
   sky: options.sky ?? null,
@@ -1303,6 +1531,7 @@ var scene2 = (options) => ({
   physics: options.physics ?? null,
   xr: options.xr ?? null,
   measure: options.measure ?? noMeasures,
+  assets: options.assets ?? noAssets,
   render: options.render ?? defaultRenderSettings,
   resources: {
     geometries: options.resources?.geometries ?? noResources.geometries,
@@ -1347,6 +1576,10 @@ var indexScene2 = (description, behaviours = new Set) => {
   if (duplicateView !== undefined) {
     return { _tag: "Invalid", error: { _tag: "DuplicateViewKey", key: duplicateView } };
   }
+  const duplicateAsset = firstDuplicateInstance(description.assets.map((asset) => ({ key: asset.id })));
+  if (duplicateAsset !== undefined) {
+    return { _tag: "Invalid", error: { _tag: "DuplicateAssetId", id: duplicateAsset } };
+  }
   const duplicateOverlay = firstDuplicateInstance(description.overlays);
   if (duplicateOverlay !== undefined) {
     return { _tag: "Invalid", error: { _tag: "DuplicateOverlayKey", key: duplicateOverlay } };
@@ -1480,6 +1713,8 @@ var changedFields2 = (prev, next) => {
         fields.push("follow");
       if (!detailEquals(prev.detail, next.detail))
         fields.push("detail");
+      if (!trailEquals(prev.trail, next.trail))
+        fields.push("trail");
       return fields;
     }
     case "Mesh": {
@@ -1507,6 +1742,10 @@ var changedFields2 = (prev, next) => {
         fields.push("receiveShadow");
       if (!bodyEquals2(prev.body, next.body))
         fields.push("body");
+      if (!edgesEquals(prev.edges, next.edges))
+        fields.push("edges");
+      if (!trailEquals(prev.trail, next.trail))
+        fields.push("trail");
       return fields;
     }
     case "Instances": {
@@ -1662,6 +1901,42 @@ var changedFields2 = (prev, next) => {
         fields.push("shadowBias");
       return fields;
     }
+    case "Points": {
+      if (prev._tag !== "Points")
+        return;
+      if (!behaviourEquals2(prev.behaviour, next.behaviour))
+        fields.push("behaviour");
+      if (!vec3Equals2(prev.position, next.position))
+        fields.push("position");
+      if (!rotationEquals2(prev.rotation, next.rotation))
+        fields.push("rotation");
+      if (!vec3Equals2(prev.scale, next.scale))
+        fields.push("scale");
+      if (!transitionEquals2(prev.transition, next.transition))
+        fields.push("transition");
+      if (!pointLookEquals(prev.look, next.look))
+        fields.push("look");
+      return fields;
+    }
+    case "Line": {
+      if (prev._tag !== "Line")
+        return;
+      if (!behaviourEquals2(prev.behaviour, next.behaviour))
+        fields.push("behaviour");
+      if (!vec3Equals2(prev.position, next.position))
+        fields.push("position");
+      if (!rotationEquals2(prev.rotation, next.rotation))
+        fields.push("rotation");
+      if (!vec3Equals2(prev.scale, next.scale))
+        fields.push("scale");
+      if (!transitionEquals2(prev.transition, next.transition))
+        fields.push("transition");
+      if (prev.interactive !== next.interactive)
+        fields.push("interactive");
+      if (!lineLookEquals(prev, next))
+        fields.push("line");
+      return fields;
+    }
     case "ShaderGrid": {
       if (prev._tag !== "ShaderGrid")
         return;
@@ -2352,7 +2627,7 @@ import {
   Plane,
   Ray,
   Spherical,
-  Vector3 as Vector33
+  Vector3 as Vector34
 } from "three";
 var defaultOrbit2 = {
   enableRotate: true,
@@ -2379,14 +2654,14 @@ var orbitOptions2 = (options = {}) => ({
   ...options
 });
 var twoPi = 2 * Math.PI;
-var offset = new Vector33;
+var offset = new Vector34;
 var spherical = new Spherical;
-var target = new Vector33;
-var position2 = new Vector33;
-var axis = new Vector33;
-var panOffset = new Vector33;
+var target = new Vector34;
+var position2 = new Vector34;
+var axis = new Vector34;
+var panOffset = new Vector34;
 var basis = new Matrix42;
-var worldUp = new Vector33(0, 1, 0);
+var worldUp = new Vector34(0, 1, 0);
 var toVec3 = (vector) => [vector.x, vector.y, vector.z];
 var clampAzimuth = (theta, options) => {
   let min = options.minAzimuthAngle;
@@ -2464,9 +2739,9 @@ var panCamera2 = (camera, deltaX, deltaY, area, options = defaultOrbit2) => {
   return place(camera, options, zoomOf(camera, options));
 };
 var tiltLimit = Math.cos(70 * MathUtils.DEG2RAD);
-var pointer = new Vector33;
-var before = new Vector33;
-var forward = new Vector33;
+var pointer = new Vector34;
+var before = new Vector34;
+var forward = new Vector34;
 var groundRay = new Ray;
 var ground = new Plane;
 var hostCamera = (camera, cursor, zoom) => {
@@ -2568,7 +2843,7 @@ var orbitKey2 = (camera, key, modifiers, area, options = defaultOrbit2) => {
       return rotating ? turned(-turn, 0) : panCamera2(camera, -step, 0, area, options);
   }
 };
-var corner = new Vector33;
+var corner = new Vector34;
 var view = new Matrix42;
 var fitDistance = (camera, box, area, margin) => {
   const largest = Math.max(box.max[0] - box.min[0], box.max[1] - box.min[1], box.max[2] - box.min[2]);
@@ -2621,12 +2896,12 @@ import {
   PerspectiveCamera as PerspectiveCamera2,
   Raycaster,
   Vector2 as Vector22,
-  Vector3 as Vector34
+  Vector3 as Vector35
 } from "three";
-var point = new Vector34;
-var cameraPosition = new Vector34;
-var direction = new Vector34;
-var toPoint = new Vector34;
+var point = new Vector35;
+var cameraPosition = new Vector35;
+var direction = new Vector35;
+var toPoint = new Vector35;
 var ndc = new Vector22;
 var raycaster = new Raycaster;
 var lensFor = (graph, overlay) => {
@@ -2701,7 +2976,7 @@ import {
   Euler as Euler3,
   Matrix4 as Matrix43,
   Quaternion as Quaternion3,
-  Vector3 as Vector35
+  Vector3 as Vector36
 } from "three";
 var interactionBits2 = (groups) => {
   const mask = (list) => list.reduce((bits, group) => bits | 1 << group, 0);
@@ -2710,8 +2985,40 @@ var interactionBits2 = (groups) => {
   const filters = groups.filters === null ? 65535 : mask(groups.filters);
   return (mask(groups.memberships) << 16 | filters) >>> 0;
 };
+var run = (first, count) => Array.from({ length: count }, (_, i) => String.fromCharCode(first.charCodeAt(0) + i));
+var digits = [...run("A", 26), ...run("a", 26), ...run("0", 10), "+", "/"];
+var digitValues = new Map(digits.map((char, i) => [char, i]));
+var digit = (value) => digits[value] ?? "";
+var snapshotText2 = (bytes) => {
+  const out = [];
+  for (let at = 0;at < bytes.length; at += 3) {
+    const a = bytes[at] ?? 0;
+    const b = bytes[at + 1] ?? 0;
+    const c = bytes[at + 2] ?? 0;
+    const left = bytes.length - at;
+    out.push(digit(a >> 2), digit((a & 3) << 4 | b >> 4), left > 1 ? digit((b & 15) << 2 | c >> 6) : "=", left > 2 ? digit(c & 63) : "=");
+  }
+  return out.join("");
+};
+var snapshotBytes2 = (text) => {
+  const digits = text.replace(/=+$/, "");
+  const bytes = new Uint8Array(Math.floor(digits.length * 3 / 4));
+  let bits = 0;
+  let held = 0;
+  let at = 0;
+  for (const char of digits) {
+    bits = bits << 6 | (digitValues.get(char) ?? 0);
+    held += 6;
+    if (held >= 8) {
+      held -= 8;
+      bytes[at] = bits >> held & 255;
+      at += 1;
+    }
+  }
+  return bytes;
+};
 var toVec32 = (vector) => [vector.x, vector.y, vector.z];
-var size = new Vector35;
+var size = new Vector36;
 var scaledPositions = (geometry, scale) => {
   const positions = geometry.getAttribute("position");
   const points = new Float32Array(positions.count * 3);
@@ -2730,7 +3037,7 @@ var triangles = (geometry) => {
 };
 var speck = {
   shape: { _tag: "Ball", radius: 0.001 },
-  offset: new Vector35
+  offset: new Vector36
 };
 var shapeFor = (geometry, collider, scale) => {
   if (geometry.getAttribute("position") === undefined)
@@ -2744,7 +3051,7 @@ var shapeFor = (geometry, collider, scale) => {
       box.getSize(size).multiply(scale).multiplyScalar(0.5);
       return {
         shape: { _tag: "Cuboid", halfExtents: toVec32(size) },
-        offset: box.getCenter(new Vector35).multiply(scale)
+        offset: box.getCenter(new Vector36).multiply(scale)
       };
     }
     case "ball": {
@@ -2761,7 +3068,7 @@ var shapeFor = (geometry, collider, scale) => {
     case "hull":
       return {
         shape: { _tag: "Hull", points: scaledPositions(geometry, scale) },
-        offset: new Vector35
+        offset: new Vector36
       };
     case "trimesh":
       return {
@@ -2770,7 +3077,7 @@ var shapeFor = (geometry, collider, scale) => {
           vertices: scaledPositions(geometry, scale),
           indices: triangles(geometry)
         },
-        offset: new Vector35
+        offset: new Vector36
       };
   }
 };
@@ -2815,11 +3122,11 @@ function describedCollider(collider, scale) {
 }
 var relative = new Matrix43;
 var bodyInverse = new Matrix43;
-var where = new Vector35;
+var where = new Vector36;
 var turn = new Quaternion3;
-var relativeScale = new Vector35;
-var worldScale = new Vector35;
-var worldPosition = new Vector35;
+var relativeScale = new Vector36;
+var worldScale = new Vector36;
+var worldPosition = new Vector36;
 var worldTurn = new Quaternion3;
 var isMesh = (object) => ("isMesh" in object) && object.isMesh === true;
 function placedCollider2(child, collider, body) {
@@ -3075,7 +3382,7 @@ var stageBounds2 = (box) => {
 import { Box3, EquirectangularReflectionMapping, UVMapping } from "three";
 
 // src/kernel/pointer.ts
-import { Raycaster as Raycaster2, Vector2 as Vector23, Vector3 as Vector36 } from "three";
+import { Raycaster as Raycaster2, Vector2 as Vector23, Vector3 as Vector37 } from "three";
 var noModifiers2 = { shift: false, control: false, meta: false, alt: false };
 var pointOnPlane2 = (ray, plane) => {
   const [nx, ny, nz] = plane.normal;
@@ -3116,7 +3423,7 @@ var shown = (object) => {
 var createPicker2 = (graph) => {
   const raycaster = new Raycaster2;
   const ndc = new Vector23;
-  const normal = new Vector36;
+  const normal = new Vector37;
   const aim = (x, y) => {
     graph.scene.updateMatrixWorld();
     const views = graph.views();
@@ -3144,26 +3451,26 @@ var createPicker2 = (graph) => {
     }
     return false;
   };
-  const rayOrigin = new Vector36;
-  const rayDirection = new Vector36;
-  const nearestHit = (view) => {
-    for (const intersection of raycaster.intersectObjects(graph.interactiveObjects(), true)) {
+  const rayOrigin = new Vector37;
+  const rayDirection = new Vector37;
+  const nearestHit = (on, view) => {
+    for (const intersection of raycaster.intersectObjects(on.interactiveObjects(), true)) {
       if (!shown(intersection.object))
         continue;
-      const owner = keyedOwner(graph, intersection.object);
-      const key = owner === undefined ? undefined : graph.keyOf(owner);
+      const owner = keyedOwner(on, intersection.object);
+      const key = owner === undefined ? undefined : on.keyOf(owner);
       if (owner !== undefined && key !== undefined) {
         normal.set(0, 0, 0);
         if (intersection.face) {
           normal.copy(intersection.face.normal).transformDirection(intersection.object.matrixWorld);
         }
-        const instance = intersection.instanceId === undefined ? undefined : graph.instanceKeyOf(intersection.object, intersection.instanceId);
+        const instance = intersection.instanceId === undefined ? undefined : on.instanceKeyOf(intersection.object, intersection.instanceId);
         return {
           key,
           ...instance === undefined ? {} : { instance },
           ...partOf(owner, intersection.object),
           ...view === undefined ? {} : { view },
-          path: pathOf(graph, owner),
+          path: pathOf(on, owner),
           point: toVec33(intersection.point),
           distance: intersection.distance,
           normal: toVec33(normal),
@@ -3174,6 +3481,16 @@ var createPicker2 = (graph) => {
     }
     return;
   };
+  const hudHit = (x, y) => {
+    const hud = graph.hud();
+    if (hud === undefined || hud.graph.interactiveObjects().length === 0)
+      return;
+    hud.graph.scene.updateMatrixWorld();
+    hud.graph.camera.updateMatrixWorld();
+    ndc.set(x, y);
+    raycaster.setFromCamera(ndc, hud.graph.camera);
+    return nearestHit(hud.graph, undefined);
+  };
   const currentRay = () => ({
     origin: toVec33(raycaster.ray.origin),
     direction: toVec33(raycaster.ray.direction)
@@ -3200,31 +3517,35 @@ var createPicker2 = (graph) => {
     holdCameras: graph.holdCameras,
     turned: graph.turned,
     pick: (x, y) => {
+      const hud = hudHit(x, y);
+      if (hud !== undefined)
+        return hud;
       if (graph.interactiveObjects().length === 0)
         return;
       const view = aim(x, y);
       if (view === false)
         return;
-      return nearestHit(view);
+      return nearestHit(graph, view);
     },
     pickRay: (ray) => {
       if (graph.interactiveObjects().length === 0)
         return;
       graph.scene.updateMatrixWorld();
       raycaster.set(rayOrigin.fromArray(ray.origin), rayDirection.fromArray(ray.direction).normalize());
-      return nearestHit(undefined);
+      return nearestHit(graph, undefined);
     },
     viewport: graph.viewport
   };
 };
 var none2 = [];
-var missTolerance = 2;
+var missTolerances = { mouse: 2, pen: 2, touch: 10 };
 var pointerOf = (input) => ("pointer" in input) && input.pointer !== undefined ? input.pointer : 0;
 var createPointerTracker2 = (picker) => {
   let position;
   const pressedPointers = new Map;
   let primary;
   let gesturePress;
+  let gestureMoved = false;
   let hovered;
   let press;
   let pressing = false;
@@ -3254,7 +3575,7 @@ var createPointerTracker2 = (picker) => {
       }
       return;
     }
-    if (from?.button === event.button && travel(from, event.x, event.y) <= missTolerance) {
+    if (from?.button === event.button && travel(from, event.x, event.y) <= missTolerances[from.device]) {
       events.push({ _tag: "PointerMissed", button: event.button });
     }
   };
@@ -3289,6 +3610,7 @@ var createPointerTracker2 = (picker) => {
     pressedPointers.clear();
     primary = id;
     pressedPointers.set(id, { x: event.x, y: event.y });
+    gestureMoved = false;
     const region = picker.region(event.x, event.y);
     reportTurned(region, events);
     picker.holdCameras(true);
@@ -3304,6 +3626,7 @@ var createPointerTracker2 = (picker) => {
     if (from === undefined || gesturePress === undefined)
       return;
     pressedPointers.set(id, to);
+    gestureMoved = true;
     const { view, width, height, x, y } = gesturePress;
     const region = { ...view === undefined ? {} : { view }, width, height, x, y };
     const moved = pixels(from, to);
@@ -3342,12 +3665,23 @@ var createPointerTracker2 = (picker) => {
       }
     });
   };
-  const endGestures = () => {
+  const endGestures = (events) => {
     if (gesturePress !== undefined)
       picker.holdCameras(false);
+    if (gesturePress !== undefined && gestureMoved) {
+      const { button, modifiers, key, view } = gesturePress;
+      events.push({
+        _tag: "GestureEnd",
+        button,
+        modifiers,
+        ...key === undefined ? {} : { key },
+        ...view === undefined ? {} : { view }
+      });
+    }
     pressedPointers.clear();
     primary = undefined;
     gesturePress = undefined;
+    gestureMoved = false;
   };
   const secondary = (event, id) => {
     const events = [];
@@ -3367,7 +3701,7 @@ var createPointerTracker2 = (picker) => {
       return secondary(event, id);
     const events = [];
     if (event._tag === "PointerLeave") {
-      endGestures();
+      endGestures(events);
       if (position !== undefined)
         endDrag(captured(), position.x, position.y, events);
       dragged = false;
@@ -3392,7 +3726,13 @@ var createPointerTracker2 = (picker) => {
         moveGesture(id, event, events);
         break;
       case "PointerDown":
-        press = { key: hit?.key, button: event.button, x: event.x, y: event.y };
+        press = {
+          key: hit?.key,
+          button: event.button,
+          x: event.x,
+          y: event.y,
+          device: event.device ?? "mouse"
+        };
         pressing = true;
         dragged = false;
         if (hit !== undefined)
@@ -3402,7 +3742,7 @@ var createPointerTracker2 = (picker) => {
       case "PointerUp":
         release(hit, event, events);
         endDrag(drag, event.x, event.y, events);
-        endGestures();
+        endGestures(events);
         break;
       case "DoubleClick":
         if (hit !== undefined && pressed(hit)) {
@@ -3581,6 +3921,8 @@ var createSceneLoop2 = (options) => {
         emit({ _tag: "Collision", ...collision });
       for (const force of graph.contactForces())
         emit({ _tag: "ContactForce", ...force });
+      for (const reached of graph.physicsReached())
+        emit({ _tag: "PhysicsReached", ...reached });
       const settings = graph.renderSettings();
       if (settings !== configured) {
         renderer.configure(settings);
@@ -3594,6 +3936,11 @@ var createSceneLoop2 = (options) => {
         renderer.render(graph.scene, graph.camera);
       for (const view of views)
         renderer.render(graph.scene, view.camera, view.area);
+      const hud = graph.hud();
+      if (hud !== undefined && renderer.renderOver !== undefined) {
+        renderer.renderOver(hud.graph.scene, hud.graph.camera);
+        hud.graph.drawn();
+      }
       graph.drawn();
       measure();
       const overlays = graph.overlays();
@@ -3678,21 +4025,21 @@ var recordingRendererFactory2 = () => {
 // src/kernel/sceneGraph.ts
 import {
   AmbientLight,
-  Color as Color2,
+  Color as Color4,
   AnimationClip,
   AnimationMixer,
   DirectionalLight,
   Group,
   GridHelper,
   HemisphereLight,
-  Mesh,
+  Mesh as Mesh2,
   OrthographicCamera as OrthographicCamera4,
   PerspectiveCamera as PerspectiveCamera3,
   PointLight,
   Quaternion as Quaternion6,
   Scene,
   SpotLight,
-  Vector3 as Vector39
+  Vector3 as Vector311
 } from "three";
 import { clone as cloneSkinned } from "three/addons/utils/SkeletonUtils.js";
 
@@ -3700,16 +4047,16 @@ import { clone as cloneSkinned } from "three/addons/utils/SkeletonUtils.js";
 import { Euler as Euler5, Quaternion as Quaternion5 } from "three";
 
 // src/kernel/bodySources.ts
-import { Euler as Euler4, Matrix4 as Matrix44, Quaternion as Quaternion4, Vector3 as Vector37 } from "three";
+import { Euler as Euler4, Matrix4 as Matrix44, Quaternion as Quaternion4, Vector3 as Vector38 } from "three";
 var bodyId = (key, instance) => instance === null ? key : `${key}\x00${instance}`;
-var position3 = new Vector37;
+var position3 = new Vector38;
 var quaternion2 = new Quaternion4;
-var scale2 = new Vector37;
+var scale2 = new Vector38;
 var matrix2 = new Matrix44;
 var local = new Matrix44;
 var inverse = new Matrix44;
 var euler2 = new Euler4;
-var ownScale = new Vector37;
+var ownScale = new Vector38;
 var toPose = (from) => {
   from.decompose(position3, quaternion2, scale2);
   return {
@@ -3867,6 +4214,36 @@ var between = (a, b, alpha) => {
     quaternion: [from.x, from.y, from.z, from.w]
   };
 };
+var catchUpAfter = 0.25;
+var mostPerFrame = 1;
+var checksumBytes = new DataView(new ArrayBuffer(8));
+var mixByte = (hash, byte) => Math.imul(hash ^ byte, 16777619) >>> 0;
+var mixNumber = (hash, value) => {
+  checksumBytes.setFloat64(0, value);
+  let mixed = hash;
+  for (let i = 0;i < 8; i++)
+    mixed = mixByte(mixed, checksumBytes.getUint8(i));
+  return mixed;
+};
+var mixText = (hash, text) => {
+  let mixed = hash;
+  for (let i = 0;i < text.length; i++) {
+    const code = text.charCodeAt(i);
+    mixed = mixByte(mixByte(mixed, code & 255), code >>> 8);
+  }
+  return mixed;
+};
+var checksumOf = (poses) => {
+  let hash = 2166136261;
+  for (const [id, { position, quaternion }] of poses.toSorted(([a], [b]) => a < b ? -1 : a > b ? 1 : 0)) {
+    hash = mixText(hash, id);
+    for (const value of position)
+      hash = mixNumber(hash, value);
+    for (const value of quaternion)
+      hash = mixNumber(hash, value);
+  }
+  return hash.toString(16).padStart(8, "0");
+};
 var remade = (hosted, source, signature) => hosted.source.holder !== source.holder || hosted.source.body.collider !== source.body.collider || !collidersEqual(hosted.source.body.colliders, source.body.colliders) || hosted.signature !== signature;
 var resettled = (a, b) => !bodyEquals2({ ...a, impulse: null }, { ...b, impulse: null });
 var named = (a, b, ids) => {
@@ -3892,6 +4269,13 @@ var createBodyHost = (engine, scene) => {
   const debug = createPhysicsDebug(scene);
   let last;
   let accumulator = 0;
+  let steps = 0;
+  let reported;
+  let snapped;
+  let reached = [];
+  const kept = new Map;
+  let rushing = false;
+  let restored;
   const drawDebug = () => {
     if (world !== undefined && settings?.debug === true)
       debug.show(world.debugLines());
@@ -3907,9 +4291,37 @@ var createBodyHost = (engine, scene) => {
     joined.clear();
     accumulator = 0;
     last = undefined;
+    steps = 0;
+    reported = undefined;
+    snapped = undefined;
+    reached = [];
+  };
+  const make = (active, physics) => {
+    const { from } = physics;
+    const bytes = from === null ? undefined : from.snapshot === null ? kept.get(from.step) : snapshotBytes2(from.snapshot);
+    if (from === null || bytes === undefined || active.restoreWorld === undefined) {
+      kept.clear();
+      return active.createWorld(physics);
+    }
+    for (const step of kept.keys())
+      if (step > from.step || from.snapshot !== null)
+        kept.delete(step);
+    const made = active.restoreWorld(physics, bytes);
+    steps = from.step;
+    rushing = true;
+    restored = { bodies: new Set(made.bodies), joints: new Set(made.joints) };
+    return made.world;
+  };
+  const adopt = (active, source, signature) => {
+    const pose = active.pose(source.id) ?? source.described();
+    source.place(pose);
+    hosted.set(source.id, { source, signature, previous: pose, current: pose, shown: pose });
   };
+  let restarting = false;
   const add = (active, source, signature) => {
-    const pose = source.pose();
+    const pose = restarting ? source.described() : source.pose();
+    if (restarting)
+      source.place(pose);
     active.add(source.id, source.body, source.colliders(), pose);
     if (source.body.impulse !== null)
       active.applyImpulse(source.id, source.body.impulse.impulse);
@@ -3919,6 +4331,10 @@ var createBodyHost = (engine, scene) => {
   const syncBody = (active, source) => {
     const existing = hosted.get(source.id);
     const signature = source.signature();
+    if (existing === undefined && restored?.bodies.has(source.id) === true) {
+      adopt(active, source, signature);
+      return;
+    }
     if (existing === undefined || remade(existing, source, signature)) {
       if (existing !== undefined)
         active.remove(source.id);
@@ -3974,11 +4390,22 @@ var createBodyHost = (engine, scene) => {
   const sync = (physics, sources) => {
     if (physics === null || engine === undefined) {
       dispose();
+      kept.clear();
       return;
     }
+    restarting = settings !== null && settings.run !== physics.run;
+    if (restarting)
+      dispose();
     if (world === undefined)
-      world = engine.createWorld(physics);
-    else if (!physicsEquals2(settings && { ...settings, joints: physics.joints }, physics)) {
+      world = make(engine, physics);
+    else if (!physicsEquals2(settings && {
+      ...settings,
+      joints: physics.joints,
+      until: physics.until,
+      snapshotAt: physics.snapshotAt,
+      from: physics.from,
+      keep: physics.keep
+    }, physics)) {
       world.configure(physics);
     }
     settings = physics;
@@ -3995,7 +4422,22 @@ var createBodyHost = (engine, scene) => {
       world.remove(id);
       hosted.delete(id);
     }
+    if (restored !== undefined) {
+      for (const id of restored.bodies)
+        if (!seen.has(id))
+          world.remove(id);
+      for (const joint of physics.joints) {
+        if (restored.joints.has(joint.key))
+          joined.set(joint.key, joint);
+      }
+      for (const id of restored.joints) {
+        if (!joined.has(id))
+          world.removeJoint(id);
+      }
+      restored = undefined;
+    }
     syncJoints(world, physics.joints);
+    restarting = false;
     drawDebug();
   };
   const kinematicTargets = (active) => {
@@ -4004,11 +4446,8 @@ var createBodyHost = (engine, scene) => {
         active.moveKinematic(id, source.pose());
     }
   };
-  const step = (active, seconds) => {
-    for (const body of hosted.values())
-      body.previous = body.current;
-    kinematicTargets(active);
-    for (const collision of active.step(seconds)) {
+  const heard = (arrived, active) => {
+    for (const collision of arrived) {
       collisions.push({
         ...named(hosted.get(collision.a)?.source, hosted.get(collision.b)?.source, collision),
         started: collision.started
@@ -4021,22 +4460,99 @@ var createBodyHost = (engine, scene) => {
         ...payload
       });
     }
+  };
+  const step = (active, seconds) => {
+    for (const body of hosted.values())
+      body.previous = body.current;
+    kinematicTargets(active);
+    heard(active.step(seconds), active);
+    for (const [id, body] of hosted)
+      body.current = active.pose(id) ?? body.current;
+    steps += 1;
+  };
+  const collect = (active) => {
+    if (active.received === undefined)
+      return false;
+    const { collisions: arrived, pending } = active.received();
+    heard(arrived, active);
     for (const [id, body] of hosted)
       body.current = active.pose(id) ?? body.current;
+    return pending;
+  };
+  const free = (active, timeStep, delta) => {
+    accumulator += delta;
+    while (accumulator >= timeStep) {
+      step(active, timeStep);
+      accumulator -= timeStep;
+    }
+    collect(active);
+    return accumulator / timeStep;
+  };
+  const snapshotOwed = (physics, until) => physics.snapshotAt !== null && snapped !== physics.snapshotAt && steps <= physics.snapshotAt && physics.snapshotAt <= until;
+  const report = (active, physics, snapshot) => {
+    const wanted = snapshot || physics.keep > 0;
+    const bytes = wanted ? active.snapshot?.() : undefined;
+    if (wanted && active.snapshot !== undefined && bytes === undefined)
+      return false;
+    if (physics.keep > 0 && bytes !== undefined) {
+      kept.delete(steps);
+      kept.set(steps, bytes);
+      for (const step of kept.keys())
+        if (kept.size > physics.keep)
+          kept.delete(step);
+    }
+    const { run } = physics;
+    reached.push({
+      run,
+      step: steps,
+      checksum: checksumOf([...hosted.keys()].flatMap((id) => posed(active, id))),
+      ...snapshot && bytes !== undefined ? { snapshot: snapshotText2(bytes) } : {}
+    });
+    return true;
+  };
+  const driven = (active, physics, until, delta) => {
+    const { timeStep } = physics;
+    const snapping = snapshotOwed(physics, until);
+    const stop = snapping && physics.snapshotAt !== null ? physics.snapshotAt : until;
+    accumulator += delta;
+    const owed = Math.max(0, stop - steps);
+    const paced = Math.floor(accumulator / timeStep);
+    const behind = rushing || owed > Math.ceil(catchUpAfter / timeStep);
+    rushing = false;
+    const count = Math.min(owed, behind ? owed : paced, Math.ceil(mostPerFrame / timeStep));
+    for (let i = 0;i < count; i++)
+      step(active, timeStep);
+    accumulator = Math.max(0, accumulator - count * timeStep);
+    const pending = collect(active);
+    if (steps < stop)
+      return Math.min(1, accumulator / timeStep);
+    if (stop < until) {
+      if (!pending && report(active, physics, true))
+        snapped = stop;
+      return Math.min(1, accumulator / timeStep);
+    }
+    accumulator = 0;
+    if (steps === until && (reported !== until || snapping) && !pending && report(active, physics, snapping)) {
+      reported = until;
+      if (snapping)
+        snapped = until;
+    }
+    return 1;
+  };
+  const posed = (active, id) => {
+    const pose = active.pose(id);
+    return pose === undefined ? [] : [[id, pose]];
   };
   const tick = (elapsed, animating) => {
     const delta = last === undefined ? 0 : Math.min(0.5, Math.max(0, elapsed - last));
     last = elapsed;
-    if (world === undefined || settings === null || settings.paused || !animating)
+    if (world === undefined || settings === null || settings.paused)
+      return;
+    if (settings.until === null && !animating)
       return;
-    const timeStep = settings.timeStep;
-    accumulator += delta;
     scene.updateMatrixWorld();
-    while (accumulator >= timeStep) {
-      step(world, timeStep);
-      accumulator -= timeStep;
-    }
-    const alpha = settings.interpolate ? accumulator / timeStep : 1;
+    const progress = settings.until === null ? free(world, settings.timeStep, delta) : driven(world, settings, settings.until, delta);
+    const alpha = settings.interpolate ? progress : 1;
     for (const body of hosted.values()) {
       if (body.source.body.type === "dynamic") {
         body.shown = between(body.previous, body.current, alpha);
@@ -4064,15 +4580,23 @@ var createBodyHost = (engine, scene) => {
       contactForces = [];
       return drained;
     },
+    drainReached: () => {
+      if (reached.length === 0)
+        return reached;
+      const drained = reached;
+      reached = [];
+      return drained;
+    },
+    owesSteps: () => world !== undefined && settings !== null && !settings.paused && settings.until !== null && (steps < settings.until || reported !== settings.until || snapshotOwed(settings, settings.until)),
     dispose
   };
 };
 
 // src/kernel/cameraMotion.ts
-import { OrthographicCamera as OrthographicCamera3, Spherical as Spherical2, Vector3 as Vector38 } from "three";
-var createPose = () => ({ target: new Vector38, spherical: new Spherical2, zoom: 1 });
-var offset2 = new Vector38;
-var position4 = new Vector38;
+import { OrthographicCamera as OrthographicCamera3, Spherical as Spherical2, Vector3 as Vector39 } from "three";
+var createPose = () => ({ target: new Vector39, spherical: new Spherical2, zoom: 1 });
+var offset2 = new Vector39;
+var position4 = new Vector39;
 var readPose = (pose, description) => {
   pose.target.fromArray(description.lookAt);
   offset2.fromArray(description.position).sub(pose.target);
@@ -4113,8 +4637,8 @@ var createCameraMotion = () => {
   const current = createPose();
   const described = createPose();
   const goal = createPose();
-  const goalPosition = new Vector38;
-  const lookAt = new Vector38;
+  const goalPosition = new Vector39;
+  const lookAt = new Vector39;
   let shown = false;
   let easing = false;
   let damping = 0;
@@ -4204,18 +4728,7 @@ var createCameraMotion = () => {
 
 // src/kernel/cameraShake.ts
 import { SimplexNoise } from "three/addons/math/SimplexNoise.js";
-var seeded = (seed) => {
-  let state = seed >>> 0;
-  return {
-    random: () => {
-      state = state + 1831565813 >>> 0;
-      let t = state;
-      t = Math.imul(t ^ t >>> 15, t | 1);
-      t ^= t + Math.imul(t ^ t >>> 7, t | 61);
-      return ((t ^ t >>> 14) >>> 0) / 4294967296;
-    }
-  };
-};
+var seeded = (seed) => ({ random: seededRandom(seed) });
 var yawNoise = new SimplexNoise(seeded(1));
 var pitchNoise = new SimplexNoise(seeded(2));
 var rollNoise = new SimplexNoise(seeded(3));
@@ -4250,8 +4763,147 @@ var createCameraShaker = () => {
   };
 };
 
+// src/kernel/trail.ts
+import {
+  BufferAttribute as BufferAttribute2,
+  BufferGeometry as BufferGeometry3,
+  Color as Color3,
+  DoubleSide as DoubleSide2,
+  Mesh,
+  MeshBasicMaterial as MeshBasicMaterial2,
+  Vector3 as Vector310
+} from "three";
+var stepsPerSecond = 60;
+var widthAt = (trail, along) => {
+  const full = trail.width * 0.1;
+  if (trail.taper === "linear")
+    return full * along;
+  if (trail.taper === "quadratic")
+    return full * along * along;
+  return full;
+};
+var createTrailRibbon = (first, start, now) => {
+  let trail = first;
+  let count = 0;
+  let points = new Float32Array(0);
+  const geometry = new BufferGeometry3;
+  const material = new MeshBasicMaterial2({
+    vertexColors: true,
+    transparent: true,
+    side: DoubleSide2,
+    depthWrite: false
+  });
+  const object = new Mesh(geometry, material);
+  object.frustumCulled = false;
+  object.raycast = () => {
+    return;
+  };
+  object.name = "effect-three:trail";
+  const last = new Vector310;
+  const here = new Vector310;
+  const ahead = new Vector310;
+  const behind = new Vector310;
+  const side = new Vector310;
+  const toEye = new Vector310;
+  const tint = new Color3;
+  let clock = now;
+  let phase = 0;
+  const reset = (at, time) => {
+    count = Math.max(2, Math.round(trail.length * 10));
+    points = new Float32Array(count * 3);
+    for (let point = 0;point < count; point++)
+      at.toArray(points, point * 3);
+    const index = [];
+    for (let point = 0;point < count - 1; point++) {
+      const a = point * 2;
+      index.push(a, a + 1, a + 2, a + 1, a + 3, a + 2);
+    }
+    geometry.setIndex(index);
+    geometry.setAttribute("position", new BufferAttribute2(new Float32Array(count * 6), 3));
+    geometry.setAttribute("color", new BufferAttribute2(new Float32Array(count * 8), 4));
+    paint();
+    last.copy(at);
+    clock = time;
+    phase = 0;
+  };
+  const paint = () => {
+    const colors = geometry.getAttribute("color");
+    tint.setHex(trail.color);
+    for (let point = 0;point < count; point++) {
+      const alpha = trail.fade ? point / (count - 1) : 1;
+      colors.setXYZW(point * 2, tint.r, tint.g, tint.b, alpha);
+      colors.setXYZW(point * 2 + 1, tint.r, tint.g, tint.b, alpha);
+    }
+    colors.needsUpdate = true;
+  };
+  const push = (at) => {
+    points.copyWithin(0, 3);
+    at.toArray(points, (count - 1) * 3);
+  };
+  reset(start, now);
+  return {
+    object,
+    record: (position, time) => {
+      const due = Math.min(count, Math.floor((time - clock) * stepsPerSecond));
+      if (due <= 0)
+        return;
+      clock += due / stepsPerSecond;
+      for (let step = 0;step < due; step++) {
+        if (phase === 0) {
+          for (let shift = 0;shift < trail.decay; shift++) {
+            if (position.distanceTo(last) < trail.stride)
+              continue;
+            push(position);
+          }
+          last.copy(position);
+        }
+        phase = (phase + 1) % Math.max(1, Math.round(trail.interval));
+      }
+    },
+    face: (eye) => {
+      const position = geometry.getAttribute("position");
+      for (let point = 0;point < count; point++) {
+        here.fromArray(points, point * 3);
+        ahead.fromArray(points, Math.min(point + 1, count - 1) * 3);
+        behind.fromArray(points, Math.max(point - 1, 0) * 3);
+        side.subVectors(ahead, behind).cross(toEye.subVectors(eye, here));
+        const length = side.length();
+        if (length > 0.000000001)
+          side.multiplyScalar(widthAt(trail, point / (count - 1)) / 2 / length);
+        else
+          side.set(0, 0, 0);
+        position.setXYZ(point * 2, here.x + side.x, here.y + side.y, here.z + side.z);
+        position.setXYZ(point * 2 + 1, here.x - side.x, here.y - side.y, here.z - side.z);
+      }
+      position.needsUpdate = true;
+    },
+    settled: () => {
+      const end = (count - 1) * 3;
+      for (let point = 0;point < end; point += 3) {
+        if (points[point] !== points[end] || points[point + 1] !== points[end + 1])
+          return false;
+        if (points[point + 2] !== points[end + 2])
+          return false;
+      }
+      return true;
+    },
+    restyle: (next, position, time) => {
+      const resized = Math.round(next.length * 10) !== Math.round(trail.length * 10);
+      trail = next;
+      if (resized)
+        reset(position, time);
+      else
+        paint();
+    },
+    dispose: () => {
+      geometry.dispose();
+      material.dispose();
+    }
+  };
+};
+
 // src/kernel/sceneGraph.ts
-var isPlaced = (entry) => entry._tag === "Group" || entry._tag === "Mesh" || entry._tag === "Instances" || entry._tag === "Borrowed" || entry._tag === "Label";
+var isPlaced = (entry) => entry._tag === "Group" || entry._tag === "Mesh" || entry._tag === "Instances" || entry._tag === "Borrowed" || entry._tag === "Label" || entry._tag === "Line" || entry._tag === "Points";
 var isSurfaced = (entry) => entry._tag === "Mesh" || entry._tag === "Instances";
 var writeVec3 = (target, v) => {
   target.set(v[0], v[1], v[2]);
@@ -4345,6 +4997,7 @@ var createSceneGraph2 = (options = {}) => {
   let views = [];
   const textureGraphs = new Map;
   let textureList = [];
+  let hudHosted;
   let viewDescriptions = [];
   let gestures = emptyScene.gestures;
   let overlayList = emptyScene.overlays;
@@ -4446,11 +5099,35 @@ var createSceneGraph2 = (options = {}) => {
   const keys = new WeakMap;
   const spinning = new Set;
   const facing = new Set;
+  const facingOrder = [];
   const cameraTurn = new Quaternion6;
   const parentTurn = new Quaternion6;
+  const sparkling = new Set;
+  const trackSparkle = (entry, node) => {
+    if (animatedLook(node.look))
+      sparkling.add(entry);
+    else
+      sparkling.delete(entry);
+    if (entry._tag === "Points")
+      entry.hosted?.tick(animating ? elapsed : 0);
+  };
+  const sparkle = (entry) => {
+    if (entry._tag === "Points")
+      entry.hosted?.tick(elapsed);
+  };
+  const trailing = new Map;
+  const trailPlace = new Vector311;
+  const eye = new Vector311;
+  const trailsMoving = () => {
+    for (const ribbon of trailing.values())
+      if (!ribbon.settled())
+        return true;
+    return false;
+  };
+  const edged = new Map;
   const detailing = new Set;
-  const cameraPlace = new Vector39;
-  const groupPlace = new Vector39;
+  const cameraPlace = new Vector311;
+  const groupPlace = new Vector311;
   const playing = new Set;
   const registry = {
     ...builtinBehaviours2,
@@ -4460,7 +5137,7 @@ var createSceneGraph2 = (options = {}) => {
   const behaving = new Map;
   const moving = new Map;
   const reparented = new Set;
-  const worldPosition = new Vector39;
+  const worldPosition = new Vector311;
   const interactive = new Set;
   let interactiveList;
   let index = emptyIndex2;
@@ -4528,6 +5205,81 @@ var createSceneGraph2 = (options = {}) => {
     if (lockZ)
       object.rotation.z = 0;
   };
+  const depthOf = (object) => {
+    let depth = 0;
+    for (let parent = object.parent;parent !== null; parent = parent.parent)
+      depth += 1;
+    return depth;
+  };
+  const faceCameras = () => {
+    facingOrder.length = 0;
+    facing.forEach((entry) => facingOrder.push(entry));
+    facingOrder.sort((a, b) => depthOf(a.object) - depthOf(b.object));
+    facingOrder.forEach(faceCamera);
+  };
+  const trailTarget = (object, local) => local ? trailPlace.copy(object.position) : object.getWorldPosition(trailPlace);
+  const trackTrail = (entry, node) => {
+    const current = trailing.get(entry);
+    if (node.trail === null) {
+      if (current === undefined)
+        return;
+      current.object.removeFromParent();
+      current.dispose();
+      trailing.delete(entry);
+      return;
+    }
+    const start = trailTarget(entry.object, node.trail.local);
+    if (current !== undefined) {
+      current.restyle(node.trail, start, elapsed);
+      return;
+    }
+    const ribbon = createTrailRibbon(node.trail, start, elapsed);
+    scene.add(ribbon.object);
+    trailing.set(entry, ribbon);
+  };
+  const followTrail = (ribbon, entry) => {
+    if (entry._tag !== "Group" && entry._tag !== "Mesh")
+      return;
+    if (entry.node.trail === null)
+      return;
+    ribbon.record(trailTarget(entry.object, entry.node.trail.local), elapsed);
+    ribbon.face(eye);
+  };
+  const unpickable = (part) => {
+    part.raycast = () => {
+      return;
+    };
+  };
+  const trackEdges = (entry, node) => {
+    const current = edged.get(entry);
+    const draw = options.kit?.line;
+    if (node.edges === null || draw === undefined) {
+      if (current === undefined)
+        return;
+      current.hosted.object.removeFromParent();
+      current.hosted.dispose();
+      edged.delete(entry);
+      return;
+    }
+    if (current !== undefined)
+      return;
+    const hosted = draw(edgeLine(node.key, node.edges, []));
+    entry.object.add(hosted.object);
+    edged.set(entry, { hosted, geometry: undefined, edges: undefined });
+  };
+  const refreshEdges = (lines, entry) => {
+    if (entry._tag !== "Mesh" || entry.node.edges === null)
+      return;
+    const { geometry } = entry.object;
+    const look = entry.node.edges;
+    if (geometry === lines.geometry && lines.edges !== undefined && edgesEquals(look, lines.edges)) {
+      return;
+    }
+    lines.hosted.update(edgeLine(entry.node.key, look, edgePoints(geometry, look.threshold)));
+    lines.hosted.object.traverse(unpickable);
+    lines.geometry = geometry;
+    lines.edges = look;
+  };
   const childObject = (node, index) => {
     const child = node.children[index];
     return child === undefined ? undefined : entries.get(child.key)?.object;
@@ -4592,10 +5344,11 @@ var createSceneGraph2 = (options = {}) => {
         if (node.follow !== null)
           entry.object.visible = false;
         trackDetail(entry, node);
+        trackTrail(entry, node);
         return entry;
       }
       case "Mesh": {
-        const object = new Mesh(store.acquireGeometry(node.geometry), store.acquireMaterial(node.material));
+        const object = new Mesh2(store.acquireGeometry(node.geometry), store.acquireMaterial(node.material));
         const entry = { _tag: "Mesh", node, object };
         writeVec3(object.position, node.position);
         writeVec3(object.scale, node.scale);
@@ -4604,6 +5357,8 @@ var createSceneGraph2 = (options = {}) => {
         trackInteractive(object, node.interactive);
         object.castShadow = node.castShadow;
         object.receiveShadow = node.receiveShadow;
+        trackEdges(entry, node);
+        trackTrail(entry, node);
         return entry;
       }
       case "Instances": {
@@ -4677,6 +5432,30 @@ var createSceneGraph2 = (options = {}) => {
         const hosted = options.kit?.shaderGrid(node);
         return { _tag: "ShaderGrid", node, object: hosted?.object ?? new Group, hosted };
       }
+      case "Points": {
+        const hosted = options.kit?.points?.(node);
+        const entry = { _tag: "Points", node, object: new Group, hosted };
+        if (hosted !== undefined)
+          entry.object.add(hosted.object);
+        writeVec3(entry.object.position, node.position);
+        writeVec3(entry.object.scale, node.scale);
+        trackRotation(entry, node);
+        trackBehaviour(entry, node);
+        trackSparkle(entry, node);
+        return entry;
+      }
+      case "Line": {
+        const hosted = options.kit?.line?.(node);
+        const entry = { _tag: "Line", node, object: new Group, hosted };
+        if (hosted !== undefined)
+          entry.object.add(hosted.object);
+        writeVec3(entry.object.position, node.position);
+        writeVec3(entry.object.scale, node.scale);
+        trackRotation(entry, node);
+        trackBehaviour(entry, node);
+        trackInteractive(entry.object, node.interactive);
+        return entry;
+      }
       case "HemisphereLight": {
         const object = new HemisphereLight;
         writeHemisphereLight(object, node);
@@ -4701,9 +5480,9 @@ var createSceneGraph2 = (options = {}) => {
     if (!node.castShadow && !node.receiveShadow)
       return;
     shown.traverse((part) => {
-      if (part instanceof Mesh && node.castShadow)
+      if (part instanceof Mesh2 && node.castShadow)
         part.castShadow = true;
-      if (part instanceof Mesh && node.receiveShadow)
+      if (part instanceof Mesh2 && node.receiveShadow)
         part.receiveShadow = true;
     });
   };
@@ -4842,6 +5621,17 @@ var createSceneGraph2 = (options = {}) => {
     spinning.delete(entry);
     facing.delete(entry);
     detailing.delete(entry);
+    const lines = edged.get(entry);
+    if (lines !== undefined) {
+      lines.hosted.dispose();
+      edged.delete(entry);
+    }
+    const ribbon = trailing.get(entry);
+    if (ribbon !== undefined) {
+      ribbon.object.removeFromParent();
+      ribbon.dispose();
+      trailing.delete(entry);
+    }
     moving.delete(entry);
     reparented.delete(entry);
     trackInteractive(entry.object, false);
@@ -4853,8 +5643,10 @@ var createSceneGraph2 = (options = {}) => {
       entry.object.dispose();
     if (entry._tag === "Grid")
       disposeGridLines(entry.helper);
-    if (entry._tag === "ShaderGrid")
+    if (entry._tag === "ShaderGrid" || entry._tag === "Line" || entry._tag === "Points") {
       entry.hosted?.dispose();
+    }
+    sparkling.delete(entry);
     if (entry._tag === "Label") {
       entry.hosted?.dispose();
       if (entry.node.material !== null && entry.material !== undefined) {
@@ -4949,6 +5741,12 @@ var createSceneGraph2 = (options = {}) => {
         retarget(entry, next);
       if (fields.includes("rotation"))
         trackRotation(entry, next);
+      if (entry._tag === "Mesh" && next._tag === "Mesh" && fields.includes("edges")) {
+        trackEdges(entry, next);
+      }
+      if (entry._tag === "Mesh" && next._tag === "Mesh" && fields.includes("trail")) {
+        trackTrail(entry, next);
+      }
       if (fields.includes("behaviour"))
         trackBehaviour(entry, next);
       if (fields.includes("interactive"))
@@ -5005,6 +5803,8 @@ var createSceneGraph2 = (options = {}) => {
         trackInteractive(entry.object, next.interactive);
       if (fields.includes("detail"))
         trackDetail(entry, next);
+      if (fields.includes("trail"))
+        trackTrail(entry, next);
       if (fields.includes("follow")) {
         entry.object.visible = next.follow === null;
         if (next.follow === null) {
@@ -5040,6 +5840,34 @@ var createSceneGraph2 = (options = {}) => {
       entry.node = next;
       return;
     }
+    if (entry._tag === "Points" && next._tag === "Points") {
+      entry.node = next;
+      if (movesTransform(entry, fields))
+        retarget(entry, next);
+      if (fields.includes("rotation"))
+        trackRotation(entry, next);
+      if (fields.includes("behaviour"))
+        trackBehaviour(entry, next);
+      if (fields.includes("look")) {
+        entry.hosted?.update(next);
+        trackSparkle(entry, next);
+      }
+      return;
+    }
+    if (entry._tag === "Line" && next._tag === "Line") {
+      entry.node = next;
+      if (movesTransform(entry, fields))
+        retarget(entry, next);
+      if (fields.includes("rotation"))
+        trackRotation(entry, next);
+      if (fields.includes("behaviour"))
+        trackBehaviour(entry, next);
+      if (fields.includes("interactive"))
+        trackInteractive(entry.object, next.interactive);
+      if (fields.includes("line"))
+        entry.hosted?.update(next);
+      return;
+    }
     if (entry._tag === "ShaderGrid" && next._tag === "ShaderGrid") {
       entry.hosted?.update(entry.node, next);
       entry.node = next;
@@ -5169,6 +5997,7 @@ var createSceneGraph2 = (options = {}) => {
     gestures: "page",
     views: [],
     renderTextures: [],
+    hud: null,
     overlays: [],
     environment: null,
     sky: null,
@@ -5176,10 +6005,67 @@ var createSceneGraph2 = (options = {}) => {
     physics: null,
     xr: null,
     measure: [],
+    assets: [],
     render: parent.render,
     resources: parent.resources,
     children: texture.children
   });
+  const hudCamera = (hud) => {
+    const [marginX, marginY] = hud.margin;
+    const [vertical, horizontal] = hud.alignment.split("-");
+    const across = { left: -viewport.width / 2 + marginX, right: viewport.width / 2 - marginX };
+    const up = { top: viewport.height / 2 - marginY, bottom: -viewport.height / 2 + marginY };
+    const x = across[horizontal] ?? 0;
+    const y = up[vertical] ?? 0;
+    return orthographicCamera2({
+      zoom: 1,
+      near: 0.1,
+      far: 2000,
+      position: [-x, -y, 200],
+      lookAt: [-x, -y, 0]
+    });
+  };
+  const hudScene = (hud, parent) => textureScene({
+    id: "hud",
+    width: viewport.width,
+    height: viewport.height,
+    camera: hudCamera(hud),
+    background: null,
+    children: hud.children
+  }, parent);
+  const syncHud = (next) => {
+    if (next.hud === null) {
+      if (hudHosted === undefined)
+        return [];
+      hudHosted.graph.dispose();
+      hudHosted = undefined;
+      return [{ _tag: "RemoveHud" }];
+    }
+    const created = hudHosted === undefined;
+    const hosted = hudHosted ?? {
+      graph: createSceneGraph2({
+        store,
+        ...options.behaviours === undefined ? {} : { behaviours: options.behaviours },
+        ...options.kit === undefined ? {} : { kit: options.kit }
+      }),
+      description: next.hud,
+      parent: next
+    };
+    if (created)
+      hosted.graph.resize(viewport.width, viewport.height);
+    const result = hosted.graph.reconcile(hudScene(next.hud, next));
+    hosted.description = next.hud;
+    hosted.parent = next;
+    hudHosted = hosted;
+    const ops = result._tag === "Applied" ? result.ops : [];
+    return created || ops.length > 0 ? [{ _tag: "UpdateHud", ops }] : [];
+  };
+  const refitHud = () => {
+    if (hudHosted === undefined)
+      return;
+    hudHosted.graph.resize(viewport.width, viewport.height);
+    hudHosted.graph.reconcile(hudScene(hudHosted.description, hudHosted.parent));
+  };
   function hostedTexture(texture) {
     const hosted = textureGraphs.get(texture.id);
     if (hosted === undefined)
@@ -5203,7 +6089,7 @@ var createSceneGraph2 = (options = {}) => {
       const reframed = existing === undefined || existing.description.width !== texture.width || existing.description.height !== texture.height || existing.description.background !== texture.background;
       if (reframed) {
         hosted.graph.resize(texture.width, texture.height);
-        hosted.graph.scene.background = texture.background === null ? null : new Color2(texture.background);
+        hosted.graph.scene.background = texture.background === null ? null : new Color4(texture.background);
       }
       hosted.description = texture;
       textureGraphs.set(texture.id, hosted);
@@ -5228,6 +6114,11 @@ var createSceneGraph2 = (options = {}) => {
       if (checked._tag === "Invalid")
         return checked;
     }
+    if (next.hud !== null) {
+      const checked = indexScene2(hudScene(next.hud, next), knownBehaviours);
+      if (checked._tag === "Invalid")
+        return checked;
+    }
     const result = diff2(index, next, knownBehaviours);
     if (result._tag === "Invalid")
       return result;
@@ -5258,11 +6149,13 @@ var createSceneGraph2 = (options = {}) => {
       invalidate();
     physicsDescription = next.physics;
     bodyHost.sync(next.physics, bodySources());
+    if (bodyHost.owesSteps())
+      invalidate();
     xrDescription = next.xr;
     if (next.measure.join("\x00") !== measured.join("\x00"))
       invalidate();
     measured = next.measure;
-    const ops = [...result.ops, ...syncTextures(next)];
+    const ops = [...result.ops, ...syncTextures(next), ...syncHud(next)];
     if (ops.length > 0)
       invalidate();
     return { _tag: "Applied", ops };
@@ -5275,6 +6168,7 @@ var createSceneGraph2 = (options = {}) => {
     elapsed = elapsedSeconds;
     for (const texture of textureList)
       texture.graph.tick(elapsedSeconds);
+    hudHosted?.graph.tick(elapsedSeconds);
     for (const entry of spinning) {
       if (isPlaced(entry)) {
         writeRotation2(entry.object.rotation, entry.node.rotation, elapsed);
@@ -5292,7 +6186,14 @@ var createSceneGraph2 = (options = {}) => {
     bodyHost.tick(elapsed, animating);
     if (facing.size > 0) {
       camera.getWorldQuaternion(cameraTurn);
-      facing.forEach(faceCamera);
+      faceCameras();
+    }
+    edged.forEach(refreshEdges);
+    if (animating)
+      sparkling.forEach(sparkle);
+    if (trailing.size > 0) {
+      camera.getWorldPosition(eye);
+      trailing.forEach(followTrail);
     }
     if (detailing.size > 0) {
       camera.getWorldPosition(cameraPlace);
@@ -5307,6 +6208,7 @@ var createSceneGraph2 = (options = {}) => {
       invalidate();
     for (const texture of textureList)
       texture.graph.setAnimating(next);
+    hudHosted?.graph.setAnimating(next);
     animating = next;
     if (next)
       return;
@@ -5323,6 +6225,8 @@ var createSceneGraph2 = (options = {}) => {
       texture.graph.dispose();
     textureGraphs.clear();
     textureList = [];
+    hudHosted?.graph.dispose();
+    hudHosted = undefined;
     for (const entry of entries.values()) {
       entry.object.removeFromParent();
       release(entry);
@@ -5355,12 +6259,14 @@ var createSceneGraph2 = (options = {}) => {
       return viewMotions.get(view)?.turned();
     },
     renderTextures: () => textureList,
+    hud: () => hudHosted,
     gestures: () => gestures,
     overlays: () => overlayList,
     environment: () => environmentDescription,
     contactShadows: () => contactDescription,
     collisions: bodyHost.drainCollisions,
     contactForces: bodyHost.drainContactForces,
+    physicsReached: bodyHost.drainReached,
     xr: () => xrDescription,
     measured: () => measured,
     labelLayout: (key) => {
@@ -5383,7 +6289,7 @@ var createSceneGraph2 = (options = {}) => {
     tick,
     elapsedSeconds: () => elapsed,
     renderSettings: () => settings,
-    needsFrame: () => dirty || textureList.some((texture) => texture.graph.needsFrame()) || animating && (spinning.size > 0 || moving.size > 0 || behaving.size > 0 || clipsRunning() || cameraMotion.moving() || viewsMoving() || shaking() || bodyHost.needsFrame()),
+    needsFrame: () => dirty || trailsMoving() || textureList.some((texture) => texture.graph.needsFrame()) || (hudHosted?.graph.needsFrame() ?? false) || animating && (spinning.size > 0 || moving.size > 0 || behaving.size > 0 || clipsRunning() || cameraMotion.moving() || viewsMoving() || shaking() || sparkling.size > 0 || bodyHost.needsFrame()) || bodyHost.owesSteps(),
     drawn: () => {
       dirty = false;
     },
@@ -5410,12 +6316,1937 @@ var createSceneGraph2 = (options = {}) => {
       viewport = { width, height };
       fitCamera(camera, viewport);
       hostViews(viewDescriptions);
+      refitHud();
       invalidate();
     },
     dispose
   };
 };
-export { handJoints2, clipTime2, clipRunning2, createPose2, resetPose2, float2, builtinBehaviours2, spinAngle2, writeRotation2, buildMaterial2, updateMaterial2, vec3Equals2, rotationEquals2, shapeEquals2, geometryRefEquals2, instanceEquals2, instancesEqual2, behaviourEquals2, animationEquals2, transitionEquals2, materialRefEquals2, cameraEquals2, renderSettingsEquals2, effectsEqual2, viewsEqual2, resourcesEqual2, overlaysEqual2, environmentEquals2, skyEquals2, contactShadowsEquals2, bodyEquals2, physicsEquals2, xrEquals2, capacityFor2, createPerformanceMonitor2, easeProgress2, startTween2, applyTween2, fixed2, spin2, billboard2, box2, sphere2, plane2, cylinder2, torus2, cone2, capsule2, roundedBox2, backdrop2, ring2, circle2, text2, instant2, ease2, basic2, lambert2, phong2, standard2, physical2, normalMaterial2, shadowMaterial2, grid2, shaderGrid2, sharedGeometry2, lentGeometry2, sharedMaterial2, group2, detailed2, headSpace2, jointSpace2, controllerSpace2, anchorSpace2, planeSpace2, meshSpace2, xrMeshGeometryId2, xrMesh2, xrAnchor2, mesh2, body2, interactionGroups2, cuboidCollider2, ballCollider2, capsuleCollider2, cylinderCollider2, coneCollider2, velocityMotor2, positionMotor2, physics2, bodyRef2, joint2, fixedJoint2, sphericalJoint2, revoluteJoint2, prismaticJoint2, ropeJoint2, springJoint2, glide2, xr2, instance2, instances2, behave2, play2, borrowed2, label2, colorRange2, ambientLight2, directionalLight2, pointLight2, spotLight2, hemisphereLight2, perspectiveCamera2, orthographicCamera2, cameraShake2, bloom2, vignette2, film2, renderSettings2, view2, renderTexture2, environment2, sunPositionFromAngles2, sky2, contactShadows2, overlay2, scene2, emptyIndex2, indexScene2, changedFields2, diff2, createResourceStore2, createSceneClock2, createManualFrames2, createGatedFrames2, createFramePacer2, defaultOrbit2, orbitOptions2, rotateCamera2, dollyCamera2, panCamera2, dollyCameraToward2, orbit2, orbitKey2, autoRotated2, fitCamera2, clipCamera2, placeOverlays2, interactionBits2, colliderFor2, describedColliders2, collidersFor2, colliderSignature2, locomote2, teleport2, glided2, createXrTracker2, environmentPresets2, environmentPresetUrl2, stagePresets2, stage2, centerOffset2, stageBounds2, noModifiers2, pointOnPlane2, createPicker2, createPointerTracker2, createSceneLoop2, recordingRendererFactory2, createSceneGraph2 };
+// src/kernel/preview.ts
+import {
+  Box2,
+  Color as Color5,
+  DirectionalLight as DirectionalLight2,
+  HemisphereLight as HemisphereLight2,
+  InstancedMesh as InstancedMesh2,
+  LinearSRGBColorSpace,
+  LineBasicMaterial as LineBasicMaterial2,
+  LineDashedMaterial,
+  Matrix3,
+  Matrix4 as Matrix45,
+  Mesh as Mesh3,
+  MeshBasicMaterial as MeshBasicMaterial3,
+  MeshLambertMaterial as MeshLambertMaterial2,
+  MeshNormalMaterial as MeshNormalMaterial2,
+  MeshPhongMaterial as MeshPhongMaterial2,
+  MeshStandardMaterial as MeshStandardMaterial2,
+  MeshToonMaterial,
+  Light,
+  Line,
+  PointLight as PointLight2,
+  Points,
+  Scene as Scene2,
+  Sprite,
+  PointsMaterial,
+  SpotLight as SpotLight2,
+  SpriteMaterial,
+  SRGBColorSpace,
+  Vector2 as Vector24,
+  Vector3 as Vector313,
+  AmbientLight as AmbientLight2
+} from "three";
+import {
+  Projector,
+  RenderableFace,
+  RenderableLine,
+  RenderableSprite
+} from "three/addons/renderers/Projector.js";
+
+// src/kernel/paintOrder.ts
+import { Sphere, Vector3 as Vector312 } from "three";
+var onPlane = 0.000001;
+var candidates = 8;
+var splitCost = 8;
+var planeOf = (points) => {
+  const [a, b, c] = points;
+  if (a === undefined || b === undefined || c === undefined)
+    return;
+  const normal = new Vector312().subVectors(b, a).cross(new Vector312().subVectors(c, a));
+  if (normal.lengthSq() === 0)
+    return;
+  normal.normalize();
+  return { normal, constant: normal.dot(a) };
+};
+var side = (plane, point) => plane.normal.dot(point) - plane.constant;
+var toleranceAt = (points) => onPlane * Math.max(1, ...points.map((point) => point.length()));
+var split = (plane, facet) => {
+  const sides = facet.points.map((point) => side(plane, point));
+  const tolerance = toleranceAt(facet.points);
+  if (sides.every((s) => Math.abs(s) <= tolerance))
+    return { on: facet };
+  if (sides.every((s) => s >= -tolerance))
+    return { front: facet };
+  if (sides.every((s) => s <= tolerance))
+    return { back: facet };
+  const front = [];
+  const back = [];
+  facet.points.forEach((point, i) => {
+    const next = facet.points[(i + 1) % facet.points.length] ?? point;
+    const here = sides[i] ?? 0;
+    const there = sides[(i + 1) % sides.length] ?? 0;
+    if (here >= -tolerance)
+      front.push(point);
+    if (here <= tolerance)
+      back.push(point);
+    if (here > tolerance && there < -tolerance || here < -tolerance && there > tolerance) {
+      const crossing = point.clone().lerp(next, here / (here - there));
+      front.push(crossing);
+      back.push(crossing.clone());
+    }
+  });
+  return {
+    ...front.length >= 3 ? { front: { ...facet, points: front } } : {},
+    ...back.length >= 3 ? { back: { ...facet, points: back } } : {}
+  };
+};
+function hidesNone(facet, facets, eye) {
+  const plane = planeOf(facet.points);
+  if (plane === undefined)
+    return true;
+  const tolerance = toleranceAt(facet.points);
+  return side(plane, eye) > tolerance && facets.every((other) => other === facet || other.points.every((point) => side(plane, point) <= tolerance));
+}
+var unitOf = (facets, marks, eye) => {
+  const points = [...facets.flatMap((facet) => facet.points), ...marks.map((mark) => mark.at)];
+  const bounds = new Sphere().setFromPoints(points);
+  const selfOrdered = facets.every((facet) => hidesNone(facet, facets, eye));
+  return { facets, marks, bounds, selfOrdered };
+};
+var sizeOf = (unit) => unit.facets.length + unit.marks.length;
+var sideOf = (plane, unit) => {
+  const distance = side(plane, unit.bounds.center);
+  const reach = unit.bounds.radius * (1 + onPlane) + onPlane;
+  return distance > reach ? 1 : distance < -reach ? -1 : 0;
+};
+var weigh = (plane, units) => {
+  let cut = 0;
+  let front = 0;
+  let back = 0;
+  for (const unit of units) {
+    const whole = sideOf(plane, unit);
+    if (whole > 0)
+      front += sizeOf(unit);
+    else if (whole < 0)
+      back += sizeOf(unit);
+    else {
+      const parts = unit.facets.map((facet) => split(plane, facet));
+      const ahead = parts.filter((part) => part.front !== undefined).length;
+      const behind = parts.filter((part) => part.back !== undefined).length;
+      if (ahead > 0 && behind > 0)
+        cut++;
+      front += ahead;
+      back += behind;
+    }
+  }
+  return splitCost * cut + Math.abs(front - back);
+};
+var partition = (plane, units) => {
+  const front = [];
+  const back = [];
+  const on = [];
+  for (const unit of units) {
+    const whole = sideOf(plane, unit);
+    if (whole > 0)
+      front.push(unit);
+    else if (whole < 0)
+      back.push(unit);
+    else {
+      const ahead = [];
+      const behind = [];
+      for (const facet of unit.facets) {
+        const parts = split(plane, facet);
+        if (parts.front !== undefined)
+          ahead.push(parts.front);
+        if (parts.back !== undefined)
+          behind.push(parts.back);
+        if (parts.on !== undefined)
+          on.push(parts.on);
+      }
+      const marksAhead = unit.marks.filter((mark) => side(plane, mark.at) >= 0);
+      const marksBehind = unit.marks.filter((mark) => side(plane, mark.at) < 0);
+      if (ahead.length + marksAhead.length > 0)
+        front.push({ ...unit, facets: ahead, marks: marksAhead });
+      if (behind.length + marksBehind.length > 0)
+        back.push({ ...unit, facets: behind, marks: marksBehind });
+    }
+  }
+  return { front, back, on };
+};
+var planeFor = (units) => {
+  const withFacets = units.filter((unit) => unit.facets.length > 0);
+  const count = Math.min(candidates, withFacets.length);
+  let best;
+  let lightest = Number.POSITIVE_INFINITY;
+  for (let i = 0;i < count; i++) {
+    const unit = withFacets[Math.floor(i * withFacets.length / count)];
+    const facet = unit?.facets[Math.floor(i * (unit?.facets.length ?? 0) / count)];
+    const plane = facet === undefined ? undefined : planeOf(facet.points);
+    if (plane === undefined)
+      continue;
+    const weight = weigh(plane, units);
+    if (weight < lightest) {
+      lightest = weight;
+      best = plane;
+    }
+  }
+  if (best !== undefined)
+    return best;
+  for (const unit of withFacets) {
+    for (const facet of unit.facets) {
+      const plane = planeOf(facet.points);
+      if (plane !== undefined)
+        return plane;
+    }
+  }
+  return;
+};
+var distanceFrom = (eye) => (mark) => mark.at.distanceToSquared(eye);
+var apart = (unit) => [
+  ...unit.facets.map((facet) => ({
+    facets: [facet],
+    marks: [],
+    bounds: new Sphere().setFromPoints([...facet.points]),
+    selfOrdered: true
+  })),
+  ...unit.marks.map((mark) => ({
+    facets: [],
+    marks: [mark],
+    bounds: new Sphere(mark.at.clone(), 0),
+    selfOrdered: true
+  }))
+];
+var paint = (units, eye, into) => {
+  const [only] = units;
+  if (only !== undefined && units.length === 1) {
+    if (only.selfOrdered && only.marks.length === 0) {
+      into.push(...only.facets);
+      return;
+    }
+    if (only.facets.length === 0) {
+      into.push(...only.marks.toSorted((a, b) => distanceFrom(eye)(b) - distanceFrom(eye)(a)));
+      return;
+    }
+    paint(apart(only), eye, into);
+    return;
+  }
+  const plane = planeFor(units);
+  if (plane === undefined) {
+    const marks = units.flatMap((unit) => unit.marks);
+    into.push(...marks.toSorted((a, b) => distanceFrom(eye)(b) - distanceFrom(eye)(a)));
+    return;
+  }
+  const { front, back, on } = partition(plane, units);
+  const facing = side(plane, eye) >= 0;
+  paint(facing ? back : front, eye, into);
+  into.push(...on);
+  paint(facing ? front : back, eye, into);
+};
+var paintOrder = (units, eye) => {
+  const into = [];
+  paint(units, eye, into);
+  return into;
+};
+
+// src/kernel/preview.ts
+var overdraw = 0.5;
+var black = new Color5(0, 0, 0);
+var irradianceAt = (lights, position, normal, into) => {
+  into.copy(black);
+  const lightPosition = new Vector313;
+  const toLight = new Vector313;
+  const direction = new Vector313;
+  for (const light of lights) {
+    const color = light.color.clone().multiplyScalar(light.intensity);
+    if (light instanceof AmbientLight2) {
+      into.add(color);
+    } else if (light instanceof HemisphereLight2) {
+      lightPosition.setFromMatrixPosition(light.matrixWorld).normalize();
+      const weight = 0.5 * normal.dot(lightPosition) + 0.5;
+      into.add(light.groundColor.clone().lerp(light.color, weight).multiplyScalar(light.intensity));
+    } else if (light instanceof DirectionalLight2) {
+      lightPosition.setFromMatrixPosition(light.matrixWorld);
+      direction.setFromMatrixPosition(light.target.matrixWorld);
+      toLight.subVectors(lightPosition, direction).normalize();
+      into.add(color.multiplyScalar(Math.max(normal.dot(toLight), 0)));
+    } else if (light instanceof PointLight2 || light instanceof SpotLight2) {
+      lightPosition.setFromMatrixPosition(light.matrixWorld);
+      toLight.subVectors(lightPosition, position);
+      const distance = toLight.length();
+      toLight.normalize();
+      const cone = light instanceof SpotLight2 ? spotAttenuation(light, toLight) : 1;
+      const falloff = distanceAttenuation(distance, light.distance, light.decay);
+      into.add(color.multiplyScalar(Math.max(normal.dot(toLight), 0) * cone * falloff));
+    }
+  }
+  return into;
+};
+var distanceAttenuation = (distance, cutoff, decay) => {
+  const falloff = 1 / Math.max(distance ** decay, 0.01);
+  return cutoff > 0 ? falloff * Math.min(Math.max(1 - (distance / cutoff) ** 4, 0), 1) ** 2 : falloff;
+};
+var smoothstep = (low, high, x) => {
+  const t = Math.min(Math.max((x - low) / (high - low), 0), 1);
+  return t * t * (3 - 2 * t);
+};
+var spotAttenuation = (light, toLight) => {
+  const direction = new Vector313().setFromMatrixPosition(light.matrixWorld).sub(new Vector313().setFromMatrixPosition(light.target.matrixWorld)).normalize();
+  return smoothstep(Math.cos(light.angle), Math.cos(light.angle * (1 - light.penumbra)), direction.dot(toLight));
+};
+var faceColor = (painter, face, material, centre) => {
+  if (material instanceof MeshBasicMaterial3) {
+    const color = material.color.clone();
+    return material.vertexColors ? color.multiply(face.color) : color;
+  }
+  if (material instanceof MeshNormalMaterial2) {
+    const normal = face.normalModel.clone().applyMatrix3(painter.normalView).normalize();
+    return new Color5(normal.x, normal.y, normal.z).multiplyScalar(0.5).addScalar(0.5);
+  }
+  if (material instanceof MeshLambertMaterial2 || material instanceof MeshPhongMaterial2 || material instanceof MeshStandardMaterial2 || material instanceof MeshToonMaterial) {
+    const diffuse = material.color.clone();
+    if (material.vertexColors)
+      diffuse.multiply(face.color);
+    return irradianceAt(painter.lights, centre, face.normalModel, new Color5).multiply(diffuse).multiplyScalar(1 / Math.PI).add(material.emissive.clone().multiplyScalar(material.emissiveIntensity));
+  }
+  return;
+};
+var styleOf = (color, colorSpace) => {
+  const shown = new Color5(Math.min(Math.max(color.r, 0), 1), Math.min(Math.max(color.g, 0), 1), Math.min(Math.max(color.b, 0), 1));
+  return `#${shown.getHexString(colorSpace)}`;
+};
+var opacityOf = (material) => material.transparent ? material.opacity : 1;
+var standInsFor = (object) => {
+  if (!(object instanceof InstancedMesh2)) {
+    const standIn = object.clone(false);
+    standIn.matrix.copy(object.matrixWorld);
+    return [{ standIn }];
+  }
+  const material = Array.isArray(object.material) ? object.material[0] : object.material;
+  if (material === undefined)
+    return [];
+  const matrix = new Matrix45;
+  const standIns = [];
+  for (let i = 0;i < object.count; i++) {
+    object.getMatrixAt(i, matrix);
+    const tinted = object.instanceColor === null ? undefined : material.clone();
+    if (tinted !== undefined && "color" in tinted && tinted.color instanceof Color5) {
+      tinted.color.multiply(object.getColorAt(i, new Color5));
+    }
+    const standIn = new Mesh3(object.geometry, tinted ?? material);
+    standIn.matrix.multiplyMatrices(object.matrixWorld, matrix);
+    standIn.renderOrder = object.renderOrder;
+    standIns.push(tinted === undefined ? { standIn } : { standIn, tinted });
+  }
+  return standIns;
+};
+var number = (precision) => (value) => String(Number(value.toFixed(precision)));
+var widened = (points) => {
+  const out = points.map((point) => point.clone());
+  for (const [i, from] of out.entries()) {
+    const to = out[(i + 1) % out.length];
+    const length = to === undefined ? 0 : from.distanceTo(to);
+    if (to === undefined || length === 0)
+      continue;
+    const step = new Vector24().subVectors(to, from).multiplyScalar(overdraw / length);
+    to.add(step);
+    from.sub(step);
+  }
+  return out;
+};
+var facetPaint = (fill, opacity) => opacity < 1 ? `fill="${fill}" fill-opacity="${String(Number(opacity.toFixed(2)))}"` : `fill="${fill}" stroke="${fill}"`;
+var centreOf2 = (object) => {
+  if (!(object instanceof Mesh3))
+    return new Vector313().setFromMatrixPosition(object.matrixWorld);
+  const geometry = object.geometry;
+  if (geometry.boundingSphere === null)
+    geometry.computeBoundingSphere();
+  return (geometry.boundingSphere?.center.clone() ?? new Vector313).applyMatrix4(object.matrixWorld);
+};
+var isDrawn = (object) => object instanceof Mesh3 || object instanceof Line || object instanceof Points || object instanceof Sprite;
+var previewSvg2 = (description, options) => {
+  const { width, height } = options;
+  const graph = createSceneGraph2({
+    ...options.store === undefined ? {} : { store: options.store },
+    ...options.behaviours === undefined ? {} : { behaviours: options.behaviours }
+  });
+  const applied = graph.reconcile(description);
+  if (applied._tag === "Invalid") {
+    graph.dispose();
+    return applied;
+  }
+  graph.resize(width, height);
+  graph.tick(options.at ?? 0);
+  const { scene, camera } = graph;
+  scene.updateMatrixWorld();
+  camera.updateMatrixWorld();
+  const lights = [];
+  const drawn = [];
+  scene.traverseVisible((object) => {
+    if (object instanceof Light)
+      lights.push(object);
+    else if (isDrawn(object))
+      drawn.push(object);
+  });
+  const colorSpace = graph.renderSettings().colorSpace === "linear" ? LinearSRGBColorSpace : SRGBColorSpace;
+  const painter = {
+    lights,
+    normalView: new Matrix3().getNormalMatrix(camera.matrixWorldInverse),
+    colorSpace
+  };
+  const halfWidth = width / 2;
+  const halfHeight = height / 2;
+  const at = number(options.precision ?? 1);
+  const eye = new Vector313().setFromMatrixPosition(camera.matrixWorld);
+  const ahead = camera.getWorldDirection(new Vector313);
+  const near = { normal: ahead, constant: ahead.dot(eye) + camera.near };
+  const xy = (x, y) => `${at(x * halfWidth)},${at(-y * halfHeight)}`;
+  function facetOf(face, material, centre, opacity) {
+    const color = faceColor(painter, face, material, centre);
+    if (color === undefined)
+      return;
+    const points = [face.v1, face.v2, face.v3].map((vertex) => vertex.positionWorld.clone());
+    const paint = facetPaint(styleOf(color, colorSpace), opacity);
+    return split(near, { _tag: "Facet", points, item: { paint, d: "" } }).front;
+  }
+  const projector = new Projector;
+  const holder = new Scene2;
+  const units = [];
+  const over = [];
+  const tinted = [];
+  for (const object of drawn) {
+    for (const { standIn, tinted: copy } of standInsFor(object)) {
+      if (copy !== undefined)
+        tinted.push(copy);
+      standIn.matrixAutoUpdate = false;
+      holder.add(standIn);
+      const projected = projector.projectScene(holder, camera, false, true);
+      holder.remove(standIn);
+      const centre = centreOf2(standIn);
+      const facets = [];
+      const marks = [];
+      const keep = (material, item) => {
+        if (!material.depthTest)
+          over.push({ renderOrder: standIn.renderOrder, item });
+        else if (item._tag === "Facet")
+          facets.push(item);
+        else
+          marks.push(item);
+      };
+      for (const element of projected.elements) {
+        const material = element.material;
+        if (material === null || material.opacity === 0)
+          continue;
+        const opacity = opacityOf(material);
+        const faded = opacity < 1 ? ` fill-opacity="${at(opacity)}"` : "";
+        if (element instanceof RenderableFace) {
+          const seen = facetOf(element, material, centre, opacity);
+          if (seen === undefined)
+            continue;
+          keep(material, seen);
+        } else if (element instanceof RenderableLine && material instanceof LineBasicMaterial2) {
+          const a = element.v1.positionScreen;
+          const b = element.v2.positionScreen;
+          const dashes = material instanceof LineDashedMaterial ? ` stroke-dasharray="${at(material.dashSize)},${at(material.gapSize)}"` : "";
+          const stroked = opacity < 1 ? ` stroke-opacity="${at(opacity)}"` : "";
+          keep(material, {
+            _tag: "Mark",
+            at: element.v1.positionWorld.clone().lerp(element.v2.positionWorld, 0.5),
+            item: {
+              paint: `fill="none" stroke="${styleOf(material.color, colorSpace)}"${stroked} stroke-width="${at(material.linewidth)}" stroke-linecap="${material.linecap}"${dashes}`,
+              d: `M${xy(a.x, a.y)}L${xy(b.x, b.y)}`
+            }
+          });
+        } else if (element instanceof RenderableSprite && (material instanceof SpriteMaterial || material instanceof PointsMaterial)) {
+          const size = material instanceof PointsMaterial ? material.size : 1;
+          const w = element.scale.x * halfWidth * size;
+          const h = element.scale.y * halfHeight * size;
+          const x = element.x * halfWidth;
+          const y = -element.y * halfHeight;
+          keep(material, {
+            _tag: "Mark",
+            at: new Vector313(element.x, element.y, element.z).unproject(camera),
+            item: {
+              paint: `fill="${styleOf(material.color, colorSpace)}"${faded}`,
+              d: `M${at(x - w / 2)},${at(y - h / 2)}h${at(w)}v${at(h)}h${at(-w)}z`
+            }
+          });
+        }
+      }
+      if (facets.length + marks.length > 0)
+        units.push(unitOf(facets, marks, eye));
+    }
+  }
+  for (const material of tinted)
+    material.dispose();
+  graph.dispose();
+  const ordered = [
+    ...paintOrder(units, eye),
+    ...over.toSorted((a, b) => a.renderOrder - b.renderOrder).map(({ item }) => item)
+  ];
+  const clip = new Box2(new Vector24(-halfWidth, -halfHeight), new Vector24(halfWidth, halfHeight));
+  const toPicture = (point) => {
+    const projectedPoint = point.clone().project(camera);
+    return new Vector24(projectedPoint.x * halfWidth, -projectedPoint.y * halfHeight);
+  };
+  function outlineOf(shape) {
+    if (shape._tag === "Mark")
+      return shape.item.d;
+    const corners = widened(shape.points.map(toPicture));
+    return new Box2().setFromPoints([...corners]).intersectsBox(clip) ? `M${corners.map((corner) => `${at(corner.x)},${at(corner.y)}`).join("L")}z` : undefined;
+  }
+  const groups = [];
+  for (const shape of ordered) {
+    const outline = outlineOf(shape);
+    const last = groups.at(-1);
+    if (outline === undefined)
+      continue;
+    if (last?.paint === shape.item.paint)
+      last.outlines.push(outline);
+    else
+      groups.push({ paint: shape.item.paint, outlines: [outline] });
+  }
+  const paths = groups.map(({ paint, outlines }) => `<path ${paint} d="${outlines.join("")}"/>`);
+  const background = options.background === undefined || options.background === null ? "" : `<rect x="${at(-halfWidth)}" y="${at(-halfHeight)}" width="${at(width)}" height="${at(height)}" fill="${styleOf(new Color5(options.background), colorSpace)}"/>`;
+  return {
+    _tag: "Preview",
+    svg: `<svg xmlns="http://www.w3.org/2000/svg" width="${at(width)}" height="${at(height)}" viewBox="${at(-halfWidth)} ${at(-halfHeight)} ${at(width)} ${at(height)}">${background}<g stroke-width="0.6" stroke-linejoin="round">${paths.join("")}</g></svg>`
+  };
+};
+// src/kernel/gizmo.ts
+import { Euler as Euler6, Quaternion as Quaternion7, Vector3 as Vector314 } from "three";
+var gizmo2 = (options = {}) => ({
+  mode: options.mode ?? "translate",
+  space: options.space ?? "world",
+  size: options.size ?? 1,
+  translationSnap: options.translationSnap ?? null,
+  rotationSnap: options.rotationSnap ?? null,
+  scaleSnap: options.scaleSnap ?? null,
+  showX: options.showX ?? true,
+  showY: options.showY ?? true,
+  showZ: options.showZ ?? true,
+  hovered: null,
+  grab: null
+});
+var axes = {
+  x: new Vector314(1, 0, 0),
+  y: new Vector314(0, 1, 0),
+  z: new Vector314(0, 0, 1)
+};
+var turnOf = (rotation) => new Quaternion7().setFromEuler(new Euler6(rotation[0], rotation[1], rotation[2]));
+var spaceOf = (state, handle) => {
+  if (state.mode === "scale")
+    return "local";
+  if (handle === "xyz")
+    return "world";
+  return state.space;
+};
+var axisIn = (name, space, rotation) => space === "local" ? axes[name].clone().applyQuaternion(turnOf(rotation)) : axes[name].clone();
+var toVec34 = (vector) => [vector.x, vector.y, vector.z];
+var dragPlane = (state, handle, start, eye, facingCamera) => {
+  const space = spaceOf(state, handle);
+  const along = (name) => axisIn(name, space, start.rotation);
+  const facing = (axis) => axis.clone().cross(eye.clone().cross(axis));
+  const normals = {
+    x: () => facing(along("x")),
+    y: () => facing(along("y")),
+    z: () => facing(along("z")),
+    xy: () => along("z"),
+    yz: () => along("x"),
+    xz: () => along("y"),
+    xyz: () => facingCamera.clone()
+  };
+  const normal = state.mode === "rotate" ? facingCamera.clone() : normals[handle]();
+  if (normal.lengthSq() < 0.000000000001)
+    normal.copy(eye);
+  normal.normalize();
+  const center = new Vector314(...start.position);
+  return { normal: toVec34(normal), constant: -normal.dot(center) };
+};
+var onPlane2 = (grab, ray) => {
+  const point = pointOnPlane2(ray, grab.plane);
+  if (point === undefined)
+    return;
+  return new Vector314(...point).sub(new Vector314(...grab.start.position));
+};
+var backwards = (camera) => {
+  const back = new Vector314(...camera.position).sub(new Vector314(...camera.lookAt));
+  return back.lengthSq() > 0.000000000001 ? back.normalize() : new Vector314(0, 0, 1);
+};
+var pressGizmo2 = (state, placement, handle, ray, camera) => {
+  const center = new Vector314(...placement.position);
+  const facingCamera = backwards(camera);
+  const towardsEye = new Vector314(...camera.position).sub(center);
+  const distance = towardsEye.length();
+  const eye = camera._tag === "Orthographic" || distance < 0.000000001 ? facingCamera.clone() : towardsEye.normalize();
+  const plane = dragPlane(state, handle, placement, eye, facingCamera);
+  const point = pointOnPlane2(ray, plane);
+  if (point === undefined)
+    return state;
+  const from = toVec34(new Vector314(...point).sub(center));
+  return { ...state, grab: { handle, start: placement, from, plane, eye: toVec34(eye), distance } };
+};
+var releaseGizmo2 = (state) => ({ ...state, grab: null });
+var hoverGizmo2 = (state, handle) => state.hovered === handle ? state : { ...state, hovered: handle };
+var snapped = (value, step) => step === null ? value : Math.round(value / step) * step;
+var includes = (handle, axis) => handle.includes(axis);
+var translated = (state, grab, end) => {
+  const space = spaceOf(state, grab.handle);
+  const offset = end.clone().sub(new Vector314(...grab.from));
+  const turn = turnOf(grab.start.rotation);
+  if (space === "local")
+    offset.applyQuaternion(turn.clone().invert());
+  if (!includes(grab.handle, "x"))
+    offset.x = 0;
+  if (!includes(grab.handle, "y"))
+    offset.y = 0;
+  if (!includes(grab.handle, "z"))
+    offset.z = 0;
+  if (space === "local") {
+    const local = offset.add(new Vector314(...grab.start.position).applyQuaternion(turn.clone().invert()));
+    if (includes(grab.handle, "x"))
+      local.x = snapped(local.x, state.translationSnap);
+    if (includes(grab.handle, "y"))
+      local.y = snapped(local.y, state.translationSnap);
+    if (includes(grab.handle, "z"))
+      local.z = snapped(local.z, state.translationSnap);
+    return { ...grab.start, position: toVec34(local.applyQuaternion(turn)) };
+  }
+  const position = offset.add(new Vector314(...grab.start.position));
+  if (includes(grab.handle, "x"))
+    position.x = snapped(position.x, state.translationSnap);
+  if (includes(grab.handle, "y"))
+    position.y = snapped(position.y, state.translationSnap);
+  if (includes(grab.handle, "z"))
+    position.z = snapped(position.z, state.translationSnap);
+  return { ...grab.start, position: toVec34(position) };
+};
+var scaled2 = (state, grab, end) => {
+  const from = new Vector314(...grab.from);
+  const factor = new Vector314(1, 1, 1);
+  if (grab.handle === "xyz") {
+    const ratio = end.length() / Math.max(from.length(), 0.000000001) * (end.dot(from) < 0 ? -1 : 1);
+    factor.setScalar(ratio);
+  } else {
+    const inverse = turnOf(grab.start.rotation).invert();
+    const a = from.clone().applyQuaternion(inverse);
+    const b = end.clone().applyQuaternion(inverse);
+    factor.set(includes(grab.handle, "x") ? b.x / a.x : 1, includes(grab.handle, "y") ? b.y / a.y : 1, includes(grab.handle, "z") ? b.z / a.z : 1);
+  }
+  const step = state.scaleSnap;
+  const each = (index, axis) => {
+    const value = grab.start.scale[index] * factor.getComponent(index);
+    if (step === null || !includes(grab.handle, axis))
+      return value;
+    return snapped(value, step) || step;
+  };
+  return { ...grab.start, scale: [each(0, "x"), each(1, "y"), each(2, "z")] };
+};
+var rotated = (state, grab, end) => {
+  if (grab.handle !== "x" && grab.handle !== "y" && grab.handle !== "z")
+    return grab.start;
+  const space = spaceOf(state, grab.handle);
+  const offset = end.clone().sub(new Vector314(...grab.from));
+  const speed = 20 / Math.max(grab.distance, 0.000000001);
+  const axis = axisIn(grab.handle, space, grab.start.rotation);
+  const across = axis.clone().cross(new Vector314(...grab.eye));
+  const angle = snapped(across.lengthSq() < 0.000000000001 ? 0 : offset.dot(across.normalize()) * speed, state.rotationSnap);
+  const start = turnOf(grab.start.rotation);
+  const turn = space === "local" ? start.clone().multiply(new Quaternion7().setFromAxisAngle(axes[grab.handle], angle)) : new Quaternion7().setFromAxisAngle(axes[grab.handle], angle).multiply(start);
+  const euler = new Euler6().setFromQuaternion(turn.normalize());
+  return { ...grab.start, rotation: [euler.x, euler.y, euler.z] };
+};
+var dragGizmo2 = (state, ray) => {
+  const grab = state.grab;
+  if (grab === null)
+    return;
+  const end = onPlane2(grab, ray);
+  if (end === undefined)
+    return grab.start;
+  if (state.mode === "translate")
+    return translated(state, grab, end);
+  if (state.mode === "scale")
+    return scaled2(state, grab, end);
+  return rotated(state, grab, end);
+};
+var movedAlike2 = (from, to, other) => {
+  const turn = turnOf(to.rotation).multiply(turnOf(from.rotation).invert());
+  const turned = new Euler6().setFromQuaternion(turn.multiply(turnOf(other.rotation)).normalize());
+  const ratio = (axis) => from.scale[axis] === 0 ? 1 : to.scale[axis] / from.scale[axis];
+  const shifted = (axis) => other.position[axis] + to.position[axis] - from.position[axis];
+  return {
+    position: [shifted(0), shifted(1), shifted(2)],
+    rotation: [turned.x, turned.y, turned.z],
+    scale: [other.scale[0] * ratio(0), other.scale[1] * ratio(1), other.scale[2] * ratio(2)]
+  };
+};
+var colours = {
+  x: 16725587,
+  y: 9100032,
+  z: 2920447,
+  xy: 2920447,
+  yz: 16725587,
+  xz: 9100032
+};
+var highlight = 16776960;
+var hideThreshold = 0.99;
+var screenScale = (state, at, camera) => {
+  if (camera._tag === "Orthographic")
+    return 480 / camera.zoom * state.size / 4;
+  const distance = new Vector314(...camera.position).distanceTo(new Vector314(...at));
+  const spread = Math.min(1.9 * Math.tan(Math.PI * camera.fov / 360), 7);
+  return distance * spread * state.size / 4;
+};
+var gizmoHandleOf2 = (key, hit) => {
+  const prefix = `${key}:`;
+  if (!hit.startsWith(prefix))
+    return;
+  const name = hit.slice(prefix.length).split(":")[0];
+  const handles = ["x", "y", "z", "xy", "yz", "xz", "xyz"];
+  return handles.find((handle) => handle === name);
+};
+var look = (state, handle, colour) => basic2({
+  color: state.grab?.handle === handle || state.hovered === handle ? highlight : colour,
+  transparent: true,
+  opacity: state.grab !== null && state.grab.handle !== handle ? 0.25 : 0.9,
+  depthTest: false
+});
+var pointAlong = { x: [0, 0, -Math.PI / 2], y: [0, 0, 0], z: [Math.PI / 2, 0, 0] };
+var tips = { x: [0.5, 0, 0], y: [0, 0.5, 0], z: [0, 0, 0.5] };
+var ringRound = { x: [0, Math.PI / 2, 0], y: [Math.PI / 2, 0, 0], z: [0, 0, 0] };
+var ring = (key, state, axis) => [
+  mesh2({
+    key: `${key}:${axis}`,
+    rotation: fixed2([...ringRound[axis]]),
+    geometry: torus2({ radius: 0.5, tube: 0.02, radialSegments: 6, tubularSegments: 48 }),
+    material: look(state, axis, colours[axis]),
+    interactive: true
+  })
+];
+var arrow = (key, state, axis) => {
+  const along = pointAlong[axis];
+  const tipAt = tips[axis];
+  const material = look(state, axis, colours[axis]);
+  return [
+    mesh2({
+      key: `${key}:${axis}:stem`,
+      position: [tipAt[0] / 2, tipAt[1] / 2, tipAt[2] / 2],
+      rotation: fixed2([...along]),
+      geometry: cylinder2({ radiusTop: 0.012, radiusBottom: 0.012, height: 0.5 }),
+      material,
+      interactive: true
+    }),
+    mesh2({
+      key: `${key}:${axis}:tip`,
+      position: tipAt,
+      rotation: fixed2([...along]),
+      geometry: state.mode === "scale" ? box2({ width: 0.08, height: 0.08, depth: 0.08 }) : cone2({ radius: 0.04, height: 0.12, radialSegments: 12 }),
+      material,
+      interactive: true
+    })
+  ];
+};
+var axisHandles = (key, state, visible) => ["x", "y", "z"].filter(visible).flatMap((axis) => state.mode === "rotate" ? ring(key, state, axis) : arrow(key, state, axis));
+var planeHandles = (key, state) => {
+  if (state.mode === "rotate")
+    return [];
+  const squares = [
+    {
+      handle: "xy",
+      at: [0.15, 0.15, 0],
+      turn: [0, 0, 0],
+      shown: state.showX && state.showY
+    },
+    {
+      handle: "yz",
+      at: [0, 0.15, 0.15],
+      turn: [0, Math.PI / 2, 0],
+      shown: state.showY && state.showZ
+    },
+    {
+      handle: "xz",
+      at: [0.15, 0, 0.15],
+      turn: [-Math.PI / 2, 0, 0],
+      shown: state.showX && state.showZ
+    }
+  ];
+  return squares.filter((square) => square.shown).map((square) => mesh2({
+    key: `${key}:${square.handle}`,
+    position: square.at,
+    rotation: fixed2([...square.turn]),
+    geometry: plane2({ width: 0.12, height: 0.12 }),
+    material: { ...look(state, square.handle, colours[square.handle]), side: "double" },
+    interactive: true
+  }));
+};
+var gizmoNodes2 = (key, state, placement, camera) => {
+  const space = spaceOf(state, state.grab?.handle ?? null);
+  const scale = screenScale(state, placement.position, camera);
+  const eye = new Vector314(...camera.position).sub(new Vector314(...placement.position)).normalize();
+  const shown = { x: state.showX, y: state.showY, z: state.showZ };
+  const visible = (axis) => shown[axis] && (state.mode === "rotate" || state.grab?.handle === axis || Math.abs(axisIn(axis, space, placement.rotation).dot(eye)) <= hideThreshold);
+  return group2({
+    key,
+    position: placement.position,
+    rotation: fixed2(space === "local" ? placement.rotation : [0, 0, 0]),
+    scale: [scale, scale, scale],
+    children: [
+      ...axisHandles(key, state, visible),
+      ...planeHandles(key, state),
+      ...state.mode === "rotate" ? [] : [
+        mesh2({
+          key: `${key}:xyz`,
+          geometry: state.mode === "scale" ? box2({ width: 0.1, height: 0.1, depth: 0.1 }) : sphere2({ radius: 0.06, widthSegments: 12, heightSegments: 8 }),
+          material: look(state, "xyz", 16777215),
+          interactive: true
+        })
+      ]
+    ]
+  });
+};
+// src/kernel/boxSelect.ts
+import { OrthographicCamera as OrthographicCamera5, PerspectiveCamera as PerspectiveCamera4, Vector3 as Vector315 } from "three";
+var hostCamera2 = (camera, size) => {
+  const host = camera._tag === "Perspective" ? new PerspectiveCamera4(camera.fov, size.width / size.height, camera.near, camera.far) : new OrthographicCamera5(size.width / -2, size.width / 2, size.height / 2, size.height / -2, camera.near, camera.far);
+  if (host instanceof OrthographicCamera5 && camera._tag === "Orthographic") {
+    host.zoom = camera.zoom;
+  }
+  host.position.set(...camera.position);
+  host.lookAt(...camera.lookAt);
+  host.updateMatrixWorld();
+  host.updateProjectionMatrix();
+  return host;
+};
+var between2 = (value, a, b) => value >= Math.min(a, b) && value <= Math.max(a, b);
+var boxSelect2 = (camera, size, from, to, candidates) => {
+  const host = hostCamera2(camera, size);
+  const inside = (candidate) => {
+    const seen = new Vector315(...candidate.at).project(host);
+    return between2(seen.x, from.x, to.x) && between2(seen.y, from.y, to.y) && between2(seen.z, -1, 1);
+  };
+  return candidates.filter(inside).map((candidate) => candidate.key);
+};
+// src/kernel/history.ts
+var make = (value, label = "Start") => ({
+  entries: [{ id: 0, parent: null, label, value, next: null }],
+  current: 0
+});
+var entryOf = (state, id) => {
+  const entry = state.entries[id];
+  if (entry === undefined)
+    throw new RangeError(`No history entry ${id}`);
+  return entry;
+};
+var presentEntry = (state) => entryOf(state, state.current);
+var present = (state) => presentEntry(state).value;
+var withNext = (state, id, next) => ({
+  ...state,
+  entries: state.entries.map((entry) => entry.id === id ? { ...entry, next } : entry)
+});
+var record = (state, value, label) => {
+  const id = state.entries.length;
+  const grown = {
+    entries: [...state.entries, { id, parent: state.current, label, value, next: null }],
+    current: id
+  };
+  return withNext(grown, state.current, id);
+};
+var canUndo = (state) => presentEntry(state).parent !== null;
+var canRedo = (state) => presentEntry(state).next !== null;
+var undo = (state) => {
+  const parent = presentEntry(state).parent;
+  return parent === null ? state : { ...state, current: parent };
+};
+var redo = (state) => {
+  const next = presentEntry(state).next;
+  return next === null ? state : { ...state, current: next };
+};
+var branches = (state) => state.entries.filter((entry) => entry.parent === state.current);
+var chooseBranch = (state, id) => branches(state).some((entry) => entry.id === id) ? withNext(state, state.current, id) : state;
+var pathTo = (state, id) => {
+  const path = [];
+  for (let at = id;at !== null; at = entryOf(state, at).parent) {
+    path.unshift(entryOf(state, at));
+  }
+  return path;
+};
+var jumpTo = (state, id) => {
+  const path = pathTo(state, id);
+  const chosen = path.slice(1).reduce((at, entry) => withNext(at, entry.parent ?? 0, entry.id), state);
+  return { ...chosen, current: id };
+};
+var depth = (state) => pathTo(state, state.current).length - 1;
+// src/kernel/lockstep.ts
+var sortedPeers = (members) => members.toSorted((a, b) => a.peer < b.peer ? -1 : a.peer > b.peer ? 1 : 0);
+var memberAt = (member, turn) => member.from <= turn && (member.until === null || turn < member.until);
+var membersAt = (state, turn) => sortedPeers(state.members.filter((member) => memberAt(member, turn))).map((member) => member.peer);
+var leaderAt = (state, turn) => membersAt(state, turn)[0];
+var make2 = (self, lead = 2) => ({
+  self,
+  members: [{ peer: self, from: 0, until: null }],
+  turn: 0,
+  sent: 0,
+  lead,
+  pending: [],
+  received: []
+});
+var join = (self, welcome, heard = []) => ({
+  self,
+  members: welcome.members,
+  turn: welcome.turn,
+  sent: welcome.turn,
+  lead: welcome.lead,
+  pending: [],
+  received: heard.filter((packet) => packet.turn >= welcome.turn)
+});
+var submit = (state, input) => ({
+  ...state,
+  pending: [...state.pending, { _tag: "Input", input }]
+});
+var known = (state, peer) => state.members.some((member) => member.peer === peer && member.until === null) || state.pending.some((entry) => entry._tag === "Admit" && entry.peer === peer);
+var admit = (state, peer) => leaderAt(state, state.sent) !== state.self || known(state, peer) ? state : { ...state, pending: [...state.pending, { _tag: "Admit", peer }] };
+var hasPacket = (state, peer, turn) => state.received.some((packet) => packet.peer === peer && packet.turn === turn);
+var receive = (state, packet) => {
+  if (packet.turn < state.turn || hasPacket(state, packet.peer, packet.turn))
+    return state;
+  const member = state.members.find((each) => each.peer === packet.peer);
+  if (member !== undefined && !memberAt(member, packet.turn))
+    return state;
+  return { ...state, received: [...state.received, packet] };
+};
+var send = (state) => {
+  const member = state.members.find((each) => each.peer === state.self);
+  const ahead = state.sent >= state.turn + state.lead;
+  if (member === undefined || !memberAt(member, state.sent) || ahead) {
+    return { state, packet: undefined };
+  }
+  const packet = { peer: state.self, turn: state.sent, entries: state.pending };
+  return {
+    state: { ...state, sent: state.sent + 1, pending: [], received: [...state.received, packet] },
+    packet
+  };
+};
+var waitingOn = (state) => membersAt(state, state.turn).filter((peer) => !hasPacket(state, peer, state.turn));
+var packetsOf = (state, peer, turn) => state.received.filter((packet) => packet.peer === peer && packet.turn === turn);
+var applyTurn = (state) => {
+  const turn = state.turn;
+  const packets = membersAt(state, turn).flatMap((peer) => packetsOf(state, peer, turn));
+  const entries = packets.flatMap((packet) => packet.entries.map((entry) => ({ peer: packet.peer, entry })));
+  const admitted = entries.flatMap(({ entry }) => entry._tag === "Admit" && !state.members.some((member) => member.peer === entry.peer) ? [{ peer: entry.peer, from: turn + state.lead + 1, until: null }] : []);
+  const applied = entries.flatMap(({ peer, entry }) => entry._tag === "Input" ? [{ turn, peer, input: entry.input }] : []);
+  return {
+    state: {
+      ...state,
+      turn: turn + 1,
+      members: [...state.members, ...admitted],
+      received: state.received.filter((packet) => packet.turn > turn)
+    },
+    applied
+  };
+};
+var advance = (state) => {
+  let current = state;
+  const applied = [];
+  while (membersAt(current, current.turn).length > 0 && waitingOn(current).length === 0) {
+    const next = applyTurn(current);
+    current = next.state;
+    applied.push(...next.applied);
+  }
+  return { state: current, applied };
+};
+var welcomeDue = (before, state) => state.members.filter((member) => member.from > before && member.from <= state.turn).filter((member) => leaderAt(state, member.from - 1) === state.self).map((member) => member.peer);
+var leave = (state) => state.sent - 1;
+var remove = (state, peer, until) => ({
+  ...state,
+  members: state.members.map((member) => member.peer === peer && (member.until === null || until < member.until) ? { ...member, until } : member),
+  received: state.received.filter((packet) => packet.peer !== peer || packet.turn < until)
+});
+// src/kernel/timeline.ts
+var make3 = (frontier = 0) => ({
+  inputs: [],
+  applied: 0,
+  reached: null,
+  frontier
+});
+var schedule = (timeline, step, input) => {
+  const at = timeline.inputs.findIndex((scheduled) => scheduled.step > step);
+  const index = at < 0 ? timeline.inputs.length : at;
+  return {
+    ...timeline,
+    inputs: [...timeline.inputs.slice(0, index), { step, input }, ...timeline.inputs.slice(index)]
+  };
+};
+var extend = (timeline, frontier) => frontier <= timeline.frontier ? timeline : { ...timeline, frontier };
+var reach = (timeline, step) => timeline.reached === step ? timeline : { ...timeline, reached: step };
+var due = (timeline) => {
+  const { reached } = timeline;
+  if (reached === null)
+    return { timeline, inputs: [] };
+  let applied = timeline.applied;
+  while ((timeline.inputs[applied]?.step ?? Infinity) <= reached)
+    applied += 1;
+  if (applied === timeline.applied)
+    return { timeline, inputs: [] };
+  return {
+    timeline: { ...timeline, applied },
+    inputs: timeline.inputs.slice(timeline.applied, applied).map((scheduled) => scheduled.input)
+  };
+};
+var until = (timeline) => Math.min(timeline.inputs[timeline.applied]?.step ?? Infinity, timeline.frontier);
+var restart = (timeline) => ({
+  ...timeline,
+  applied: 0,
+  reached: null
+});
+// src/kernel/describeScene.ts
+var extentOf = (geometry) => {
+  switch (geometry._tag) {
+    case "Box":
+    case "RoundedBox":
+      return [geometry.width, geometry.height, geometry.depth];
+    case "Sphere":
+      return [geometry.radius * 2, geometry.radius * 2, geometry.radius * 2];
+    case "Cone":
+      return [geometry.radius * 2, geometry.height, geometry.radius * 2];
+    case "Cylinder": {
+      const across = Math.max(geometry.radiusTop, geometry.radiusBottom) * 2;
+      return [across, geometry.height, across];
+    }
+    case "Capsule":
+      return [geometry.radius * 2, geometry.height + geometry.radius * 2, geometry.radius * 2];
+    case "Torus": {
+      const across = (geometry.radius + geometry.tube) * 2;
+      return [across, across, geometry.tube * 2];
+    }
+    case "Plane":
+      return [geometry.width, geometry.height, 0];
+    case "Circle":
+      return [geometry.radius * 2, geometry.radius * 2, 0];
+    case "Ring":
+      return [geometry.outerRadius * 2, geometry.outerRadius * 2, 0];
+    default:
+      return;
+  }
+};
+var scaled3 = (extent, scale) => [
+  extent[0] * Math.abs(scale[0]),
+  extent[1] * Math.abs(scale[1]),
+  extent[2] * Math.abs(scale[2])
+];
+var shapeOf = (geometry, description) => {
+  if (geometry._tag === "LentGeometry")
+    return;
+  if (geometry._tag !== "SharedGeometry")
+    return geometry;
+  return description.resources.geometries.find((entry) => entry.id === geometry.id)?.geometry;
+};
+var sizeOf2 = (node, description) => {
+  if (node._tag !== "Mesh")
+    return null;
+  const shape = shapeOf(node.geometry, description);
+  const extent = shape === undefined ? undefined : extentOf(shape);
+  return extent === undefined ? null : scaled3(extent, node.scale);
+};
+var colourOf = (node) => node._tag === "Mesh" && ("color" in node.material) ? node.material.color : null;
+var kindOf = (node) => node._tag === "Mesh" ? `Mesh (${node.geometry._tag})` : node._tag;
+var isLight = (node) => node._tag.endsWith("Light");
+var lightOf = (node) => {
+  if (!isLight(node) || !("color" in node) || !("intensity" in node))
+    return [];
+  return [
+    {
+      key: node.key,
+      kind: node._tag,
+      colour: node.color,
+      intensity: node.intensity,
+      position: "position" in node ? node.position : null
+    }
+  ];
+};
+var thingsIn = (nodes, parent, description) => nodes.flatMap((node) => [
+  ...isLight(node) ? [] : [
+    {
+      key: node.key,
+      kind: kindOf(node),
+      position: "position" in node ? node.position : [0, 0, 0],
+      size: sizeOf2(node, description),
+      colour: colourOf(node),
+      parent
+    }
+  ],
+  ...node._tag === "Group" ? thingsIn(node.children, node.key, description) : []
+]);
+var lightsIn = (nodes) => nodes.flatMap((node) => [
+  ...lightOf(node),
+  ...node._tag === "Group" ? lightsIn(node.children) : []
+]);
+var thingsBounds2 = (things) => {
+  const sized = things.filter((thing) => thing.parent === null && thing.size !== null);
+  if (sized.length === 0)
+    return null;
+  const edge = (axis, sign) => sized.map((thing) => thing.position[axis] + sign * ((thing.size?.[axis] ?? 0) / 2));
+  const low = (axis) => Math.min(...edge(axis, -1));
+  const high = (axis) => Math.max(...edge(axis, 1));
+  return { min: [low(0), low(1), low(2)], max: [high(0), high(1), high(2)] };
+};
+var stagingOf = (description) => [
+  ...description.environment === null ? [] : ["environment lighting"],
+  ...description.sky === null ? [] : ["sky"],
+  ...description.render.shadows === "off" ? [] : [`${description.render.shadows} shadows`],
+  ...description.contactShadows === null ? [] : ["contact shadows"],
+  ...description.render.effects.map((effect) => effect._tag.toLowerCase()),
+  ...description.physics === null ? [] : ["physics"]
+];
+var describeScene2 = (description) => {
+  const things = thingsIn(description.children, null, description);
+  return {
+    camera: {
+      kind: description.camera._tag,
+      position: description.camera.position,
+      lookAt: description.camera.lookAt
+    },
+    things,
+    lights: lightsIn(description.children),
+    bounds: thingsBounds2(things),
+    staging: stagingOf(description)
+  };
+};
+var number2 = (value) => String(Math.round(value * 100) / 100);
+var point2 = (at) => `(${at.map(number2).join(", ")})`;
+var hex = (colour) => `#${colour.toString(16).padStart(6, "0")}`;
+var thingLine = (thing) => [
+  `- ${thing.key}: ${thing.kind}`,
+  thing.size === null ? "" : `, ${thing.size.map(number2).join(" × ")}`,
+  thing.colour === null ? "" : `, ${hex(thing.colour)}`,
+  `, at ${point2(thing.position)}`,
+  thing.parent === null ? "" : ` in ${thing.parent}`
+].join("");
+var lightLine = (light) => `- ${light.key}: ${light.kind}, ${hex(light.colour)} × ${number2(light.intensity)}${light.position === null ? "" : ` at ${point2(light.position)}`}`;
+var formatSummary2 = (summary) => [
+  `Camera: ${summary.camera.kind.toLowerCase()} at ${point2(summary.camera.position)}, looking at ${point2(summary.camera.lookAt)}`,
+  `Things (${summary.things.length})${summary.bounds === null ? "" : `, within ${point2(summary.bounds.min)} to ${point2(summary.bounds.max)}`}:`,
+  ...summary.things.map(thingLine),
+  `Lights (${summary.lights.length}):`,
+  ...summary.lights.map(lightLine),
+  `Staging: ${summary.staging.length === 0 ? "none" : summary.staging.join(", ")}`
+].join(`
+`);
+// src/kernel/shots.ts
+import { Vector3 as Vector316 } from "three";
+var shotAngles2 = [
+  "front",
+  "back",
+  "left",
+  "right",
+  "top",
+  "three-quarter",
+  "low"
+];
+var directionOf = {
+  front: [0, 0.15, 1],
+  back: [0, 0.15, -1],
+  left: [-1, 0.15, 0],
+  right: [1, 0.15, 0],
+  top: [0, 1, 0.0001],
+  "three-quarter": [1, 0.7, 1],
+  low: [0.35, -0.02, 1]
+};
+var shotCamera2 = (camera, subject, angle, area = { width: 16, height: 10 }, margin = 1.3) => {
+  const centre = new Vector316(...subject.min).add(new Vector316(...subject.max)).multiplyScalar(0.5);
+  const from = new Vector316(...directionOf[angle]).normalize().add(centre);
+  const aimed = {
+    ...camera,
+    position: [from.x, from.y, from.z],
+    lookAt: [centre.x, centre.y, centre.z]
+  };
+  return fitCamera2(aimed, subject, area, margin);
+};
+var moods2 = ["studio", "daylight", "sunset", "night"];
+var moodStaging2 = (mood, prefix = "mood") => {
+  switch (mood) {
+    case "studio":
+      return {
+        lights: [
+          hemisphereLight2({
+            key: `${prefix}:fill`,
+            color: 16777215,
+            groundColor: 7301730,
+            intensity: 0.8
+          }),
+          directionalLight2({
+            key: `${prefix}:key`,
+            position: [4, 7, 3],
+            intensity: 2,
+            castShadow: true
+          })
+        ],
+        environment: environment2({ environmentIntensity: 0.35 }),
+        sky: null
+      };
+    case "daylight":
+      return {
+        lights: [
+          hemisphereLight2({
+            key: `${prefix}:sky`,
+            color: 13625087,
+            groundColor: 9075296,
+            intensity: 1
+          }),
+          directionalLight2({
+            key: `${prefix}:sun`,
+            position: [6, 9, 4],
+            intensity: 3,
+            castShadow: true
+          })
+        ],
+        environment: environment2({ environmentIntensity: 0.25 }),
+        sky: sky2({ sunPosition: sunPositionFromAngles2(0.85, 0.35) })
+      };
+    case "sunset":
+      return {
+        lights: [
+          hemisphereLight2({
+            key: `${prefix}:sky`,
+            color: 16757370,
+            groundColor: 3811904,
+            intensity: 0.6
+          }),
+          directionalLight2({
+            key: `${prefix}:sun`,
+            color: 16751194,
+            position: [-8, 2.5, 3],
+            intensity: 2.5,
+            castShadow: true
+          })
+        ],
+        environment: null,
+        sky: sky2({ sunPosition: sunPositionFromAngles2(0.52, 0.25), turbidity: 8, rayleigh: 3 })
+      };
+    case "night":
+      return {
+        lights: [
+          hemisphereLight2({
+            key: `${prefix}:sky`,
+            color: 3820160,
+            groundColor: 1052696,
+            intensity: 0.35
+          }),
+          directionalLight2({
+            key: `${prefix}:moon`,
+            color: 11190271,
+            position: [-3, 8, -4],
+            intensity: 0.8,
+            castShadow: true
+          })
+        ],
+        environment: null,
+        sky: null
+      };
+  }
+};
+// src/kernel/inspect.ts
+var resolve = (ast) => ast._tag === "Suspend" && ("thunk" in ast) ? resolve(ast.thunk()) : ast;
+var isRecord = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
+var labelOf = (path) => String(path.at(-1) ?? "value");
+var literalOf = (ast) => ("literal" in ast) ? ast.literal : undefined;
+var tagOf = (ast) => {
+  const member = resolve(ast);
+  if (!("propertySignatures" in member))
+    return;
+  const tag = member.propertySignatures.find((property) => property.name === "_tag");
+  return tag === undefined ? undefined : literalOf(resolve(tag.type));
+};
+var memberFor = (types, value) => {
+  if (isRecord(value) && "_tag" in value) {
+    const tagged = types.find((member) => tagOf(member) === value["_tag"]);
+    if (tagged !== undefined)
+      return tagged;
+  }
+  if (value === null)
+    return types.find((member) => resolve(member)._tag === "Null");
+  return types.find((member) => resolve(member)._tag !== "Null") ?? types[0];
+};
+var fixed = (path, text) => ({
+  _tag: "Fixed",
+  path,
+  label: labelOf(path),
+  text
+});
+var isVector = (value) => Array.isArray(value) && value.length === 3 && value.every((n) => typeof n === "number");
+var walk = (given, value, path, hints) => {
+  const ast = resolve(given);
+  const label = labelOf(path);
+  if (hints.colours.includes(ast) && typeof value === "number") {
+    return [{ _tag: "Colour", path, label, value }];
+  }
+  if (hints.vectors.includes(ast) && isVector(value)) {
+    return [{ _tag: "Vector", path, label, value }];
+  }
+  switch (ast._tag) {
+    case "Number":
+      return typeof value === "number" ? [{ _tag: "Number", path, label, value }] : [];
+    case "String":
+      return typeof value === "string" ? [{ _tag: "Text", path, label, value }] : [];
+    case "Boolean":
+      return typeof value === "boolean" ? [{ _tag: "Toggle", path, label, value }] : [];
+    case "Literal":
+    case "Null":
+      return [fixed(path, String(value))];
+    case "Union":
+      return "types" in ast ? unionFields(ast.types, value, path, hints) : [];
+    case "Objects":
+      return "propertySignatures" in ast ? objectFields(ast, value, path, hints) : [];
+    case "Arrays":
+      return "elements" in ast ? arrayFields(ast, value, path, hints) : [];
+    default:
+      return [fixed(path, String(value))];
+  }
+};
+var unionFields = (types, value, path, hints) => {
+  const literals = types.map((member) => literalOf(resolve(member)));
+  if (typeof value === "string" && literals.every((literal) => typeof literal === "string")) {
+    return [{ _tag: "Choice", path, label: labelOf(path), value, options: literals.map(String) }];
+  }
+  const member = memberFor(types, value);
+  return member === undefined ? [fixed(path, String(value))] : walk(member, value, path, hints);
+};
+var objectFields = (ast, value, path, hints) => {
+  if (!isRecord(value))
+    return [fixed(path, String(value))];
+  return ast.propertySignatures.flatMap((property) => propertyFields(String(property.name), property.type, value, path, hints));
+};
+function propertyFields(name, type, value, path, hints) {
+  if (!(name in value))
+    return [];
+  if (name === "_tag")
+    return [fixed([...path, name], String(value[name]))];
+  return walk(type, value[name], [...path, name], hints);
+}
+var arrayFields = (ast, value, path, hints) => {
+  if (!Array.isArray(value))
+    return [fixed(path, String(value))];
+  if (ast.rest.length > 0) {
+    return [fixed(path, `${value.length} ${value.length === 1 ? "item" : "items"}`)];
+  }
+  return ast.elements.flatMap((element, index) => walk(element, value[index], [...path, index], hints));
+};
+var inspectFields2 = (ast, value, hints = { colours: [], vectors: [] }) => walk(ast, value, [], hints);
+var setAt2 = (value, path, next) => {
+  const [head, ...rest] = path;
+  if (head === undefined)
+    return next;
+  if (Array.isArray(value) && typeof head === "number") {
+    return value.map((item, index) => index === head ? setAt2(item, rest, next) : item);
+  }
+  if (isRecord(value) && typeof head === "string") {
+    return { ...value, [head]: setAt2(value[head], rest, next) };
+  }
+  return value;
+};
+// src/kernel/sceneChanges.ts
+var settingOf = {
+  SetCamera: "camera",
+  SetViews: "views",
+  SetRenderSettings: "render",
+  DefineResources: "resources"
+};
+var comparedSettings = [
+  "gestures",
+  "overlays",
+  "environment",
+  "sky",
+  "contactShadows",
+  "physics",
+  "xr",
+  "measure"
+];
+var entriesOf = (value) => Object.entries(value);
+var same = (a, b) => {
+  if (a === b)
+    return true;
+  if (typeof a !== "object" || typeof b !== "object" || a === null || b === null)
+    return false;
+  if (Array.isArray(a) !== Array.isArray(b))
+    return false;
+  const fieldsA = entriesOf(a);
+  const fieldsB = new Map(entriesOf(b));
+  return fieldsA.length === fieldsB.size && fieldsA.every(([key, value]) => fieldsB.has(key) && same(value, fieldsB.get(key)));
+};
+var nodeChange = (op, place) => {
+  switch (op._tag) {
+    case "Create":
+      return [{ place, _tag: "Added", key: op.node.key, kind: op.node._tag, parent: op.parent }];
+    case "Remove":
+      return [{ place, _tag: "Removed", key: op.key }];
+    case "Replace":
+      return [{ place, _tag: "Replaced", key: op.node.key, kind: op.node._tag }];
+    case "Update":
+      return [{ place, _tag: "Changed", key: op.node.key, fields: op.fields }];
+    case "Move":
+      return [{ place, _tag: "Moved", key: op.key, parent: op.parent }];
+    case "Order":
+      return [{ place, _tag: "Reordered", parent: op.parent, keys: op.keys }];
+    default:
+      return [];
+  }
+};
+var behavioursIn = (description) => {
+  const names = new Set;
+  const visit = (node) => {
+    if ("behaviour" in node && node.behaviour !== null)
+      names.add(node.behaviour.name);
+    if (node._tag === "Group")
+      node.children.forEach(visit);
+  };
+  description.children.forEach(visit);
+  return names;
+};
+var startOf = (before) => {
+  const indexed = indexScene2(before, behavioursIn(before));
+  return indexed._tag === "Indexed" ? indexed.index : emptyIndex2;
+};
+var isSetting = (setting) => setting !== undefined;
+var settingsOf = (before, after, ops) => [
+  ...ops.map((op) => settingOf[op._tag]).filter(isSetting),
+  ...comparedSettings.filter((setting) => !same(before[setting], after[setting]))
+];
+var changesIn = (before, after, place) => {
+  const result = diff2(startOf(before), after, behavioursIn(after));
+  if (result._tag === "Invalid")
+    return result;
+  const settings = settingsOf(before, after, result.ops);
+  const settingsChange = settings.length === 0 ? [] : [{ place, _tag: "Settings", settings }];
+  return {
+    _tag: "Changes",
+    changes: [...settingsChange, ...result.ops.flatMap((op) => nodeChange(op, place))]
+  };
+};
+var nestedScene = (parent, children) => ({ ...parent, hud: null, renderTextures: [], children });
+var hudChanges = (before, after) => {
+  if (before.hud === null && after.hud === null)
+    return { _tag: "Changes", changes: [] };
+  if (after.hud === null)
+    return { _tag: "Changes", changes: [{ place: "hud", _tag: "HudRemoved" }] };
+  const added = before.hud === null ? [{ place: "hud", _tag: "HudAdded" }] : [];
+  const inside = changesIn(nestedScene(before, before.hud?.children ?? []), nestedScene(before, after.hud.children), "hud");
+  return inside._tag === "Invalid" ? inside : { _tag: "Changes", changes: [...added, ...inside.changes] };
+};
+var textureChanges = (before, after) => {
+  const changes = [];
+  for (const texture of after.renderTextures) {
+    const was = before.renderTextures.find((candidate) => candidate.id === texture.id);
+    const place = { texture: texture.id };
+    if (was === undefined)
+      changes.push({ place, _tag: "TextureAdded", id: texture.id });
+    const inside = changesIn(nestedScene(before, was?.children ?? []), nestedScene(before, texture.children), place);
+    if (inside._tag === "Invalid")
+      return inside;
+    changes.push(...inside.changes);
+  }
+  for (const texture of before.renderTextures) {
+    if (!after.renderTextures.some((candidate) => candidate.id === texture.id)) {
+      changes.push({ place: { texture: texture.id }, _tag: "TextureRemoved", id: texture.id });
+    }
+  }
+  return { _tag: "Changes", changes };
+};
+var sceneChanges2 = (before, after) => {
+  const parts = [
+    changesIn(before, after, "scene"),
+    hudChanges(before, after),
+    textureChanges(before, after)
+  ];
+  const invalid = parts.find((part) => part._tag === "Invalid");
+  if (invalid !== undefined)
+    return invalid;
+  return {
+    _tag: "Changes",
+    changes: parts.flatMap((part) => part._tag === "Changes" ? part.changes : [])
+  };
+};
+var placeLabel = (place) => {
+  if (place === "scene")
+    return "";
+  return place === "hud" ? "hud " : `texture ${place.texture} `;
+};
+var parentLabel = (parent) => parent === null ? "the root" : parent;
+var lineOf2 = (change) => {
+  const where = placeLabel(change.place);
+  switch (change._tag) {
+    case "Added":
+      return `${where}+ ${change.kind} ${change.key}${change.parent === null ? "" : ` in ${change.parent}`}`;
+    case "Removed":
+      return `${where}- ${change.key}`;
+    case "Replaced":
+      return `${where}± ${change.key}, now a ${change.kind}`;
+    case "Changed":
+      return `${where}~ ${change.key}: ${change.fields.join(", ")}`;
+    case "Moved":
+      return `${where}> ${change.key} to ${parentLabel(change.parent)}`;
+    case "Reordered":
+      return `${where}= order of ${parentLabel(change.parent)}: ${change.keys.join(", ")}`;
+    case "Settings":
+      return `${where}⋯ scene: ${change.settings.join(", ")}`;
+    case "HudAdded":
+      return "+ hud";
+    case "HudRemoved":
+      return "- hud";
+    case "TextureAdded":
+      return `+ texture ${change.id}`;
+    case "TextureRemoved":
+      return `- texture ${change.id}`;
+  }
+};
+var formatChanges2 = (changes) => changes.length === 0 ? "No changes." : changes.map(lineOf2).join(`
+`);
+// src/kernel/tape.ts
+var tape2 = (options = {}) => ({
+  from: null,
+  to: null,
+  pointer: null,
+  snap: options.snap ?? null
+});
+var snapped2 = (state, point) => {
+  const step = state.snap;
+  if (step === null)
+    return point;
+  return [
+    Math.round(point[0] / step) * step,
+    Math.round(point[1] / step) * step,
+    Math.round(point[2] / step) * step
+  ];
+};
+var placeTapeEnd2 = (state, point) => {
+  const at = snapped2(state, point);
+  if (state.from !== null && state.to === null)
+    return { ...state, to: at, pointer: null };
+  return { ...state, from: at, to: null, pointer: null };
+};
+var pointTape2 = (state, point) => state.from !== null && state.to === null ? { ...state, pointer: point === null ? null : snapped2(state, point) } : state;
+var clearTape2 = (state) => ({ ...tape2({ snap: state.snap }) });
+var farEnd = (state) => state.to ?? state.pointer;
+var distance = (a, b) => Math.hypot(b[0] - a[0], b[1] - a[1], b[2] - a[2]);
+var tapeLength2 = (state) => {
+  const end = farEnd(state);
+  return state.from === null || end === null ? undefined : distance(state.from, end);
+};
+var tapeMiddle2 = (state) => {
+  const end = farEnd(state);
+  if (state.from === null || end === null)
+    return;
+  return [(state.from[0] + end[0]) / 2, (state.from[1] + end[1]) / 2, (state.from[2] + end[2]) / 2];
+};
+var endBall = (key, at, look) => mesh2({
+  key,
+  position: at,
+  geometry: sphere2({ radius: look.endRadius, widthSegments: 16, heightSegments: 8 }),
+  material: basic2({ color: look.color })
+});
+var tapeNodes2 = (key, state, look = {}) => {
+  const shown = {
+    color: look.color ?? 16763955,
+    width: look.width ?? 3,
+    endRadius: look.endRadius ?? 0.03
+  };
+  const end = farEnd(state);
+  const ends = [state.from, state.to].flatMap((at, index) => at === null ? [] : [endBall(`${key}:end:${index}`, at, shown)]);
+  const span = state.from === null || end === null ? [] : [
+    line2({
+      key: `${key}:line`,
+      points: [state.from, end],
+      color: shown.color,
+      width: shown.width,
+      dashed: state.to === null,
+      dashSize: 0.08,
+      gapSize: 0.05
+    })
+  ];
+  return group2({ key, children: [...span, ...ends] });
+};
+// src/kernel/pivot.ts
+import { Euler as Euler7, Quaternion as Quaternion8, Vector3 as Vector317 } from "three";
+var pivot2 = (options = {}) => ({
+  scale: options.scale ?? 1,
+  depthTest: options.depthTest ?? true,
+  disableAxes: options.disableAxes ?? false,
+  disableSliders: options.disableSliders ?? false,
+  disableRotations: options.disableRotations ?? false,
+  disableScaling: options.disableScaling ?? false,
+  hovered: null,
+  grab: null
+});
+var unit = {
+  x: new Vector317(1, 0, 0),
+  y: new Vector317(0, 1, 0),
+  z: new Vector317(0, 0, 1)
+};
+var planeOf2 = {
+  z: ["x", "y"],
+  y: ["z", "x"],
+  x: ["y", "z"]
+};
+var turnOf2 = (rotation) => new Quaternion8().setFromEuler(new Euler7(rotation[0], rotation[1], rotation[2]));
+var toVec35 = (vector) => [vector.x, vector.y, vector.z];
+var kindOf2 = (handle) => handle.split("-")[0];
+var axisOf = (handle) => handle.split("-")[1];
+var frameOf = (handle, placement) => {
+  const turn = turnOf2(placement.rotation);
+  const axis = axisOf(handle);
+  const [first, second] = planeOf2[axis];
+  const kind = kindOf2(handle);
+  const flat = kind === "slider" || kind === "rotator";
+  const e1 = (flat ? unit[first] : unit[axis]).clone().applyQuaternion(turn);
+  const e2 = (flat ? unit[second] : unit[axis]).clone().applyQuaternion(turn);
+  return { e1, e2, normal: e1.clone().cross(e2).normalize() };
+};
+var pressPivot2 = (state, placement, handle, point) => {
+  const { e1, e2, normal } = frameOf(handle, placement);
+  return {
+    ...state,
+    grab: {
+      handle,
+      start: placement,
+      point,
+      e1: toVec35(e1),
+      e2: toVec35(e2),
+      normal: toVec35(kindOf2(handle) === "arrow" || kindOf2(handle) === "sphere" ? e1 : normal)
+    }
+  };
+};
+var releasePivot2 = (state) => ({ ...state, grab: null });
+var hoverPivot2 = (state, handle) => state.hovered === handle ? state : { ...state, hovered: handle };
+var offsetAlong = (point, direction, ray) => {
+  const origin = new Vector317(...ray.origin);
+  const toward = new Vector317(...ray.direction);
+  const e1 = direction.dot(direction);
+  const e2 = direction.dot(point) - direction.dot(origin);
+  const e3 = direction.dot(toward);
+  if (e3 === 0)
+    return -e2 / e1;
+  const v1 = toward.clone().multiplyScalar(e1 / e3).sub(direction);
+  const v2 = toward.clone().multiplyScalar(e2 / e3).add(origin).sub(point);
+  return -v1.dot(v2) / v1.dot(v1);
+};
+var meetPlane = (ray, at, normal) => {
+  const origin = new Vector317(...ray.origin);
+  const toward = new Vector317(...ray.direction);
+  const facing = normal.dot(toward);
+  if (facing === 0)
+    return;
+  return origin.addScaledVector(toward, normal.dot(at.clone().sub(origin)) / facing);
+};
+var angleBetween = (from, to, at, e1, e2) => {
+  const a = from.clone().sub(at);
+  const b = to.clone().sub(at);
+  return Math.atan2(b.dot(e2), b.dot(e1)) - Math.atan2(a.dot(e2), a.dot(e1));
+};
+var vectorsOf = (grab) => ({
+  point: new Vector317(...grab.point),
+  e1: new Vector317(...grab.e1),
+  e2: new Vector317(...grab.e2),
+  normal: new Vector317(...grab.normal),
+  at: new Vector317(...grab.start.position)
+});
+var moved2 = (start, by) => ({
+  ...start,
+  position: toVec35(new Vector317(...start.position).add(by))
+});
+var arrowDrag = (grab, ray) => {
+  const { point, e1 } = vectorsOf(grab);
+  return moved2(grab.start, e1.clone().multiplyScalar(offsetAlong(point, e1, ray)));
+};
+var sliderDrag = (grab, ray) => {
+  const { point, e1, e2, normal, at } = vectorsOf(grab);
+  const meet = meetPlane(ray, at, normal);
+  if (meet === undefined)
+    return grab.start;
+  const offset = meet.sub(point);
+  return moved2(grab.start, e1.multiplyScalar(offset.dot(e1)).add(e2.multiplyScalar(offset.dot(e2))));
+};
+var tenDegrees = Math.PI / 18;
+var rotatorDrag = (grab, ray, snap) => {
+  const { point, e1, e2, normal, at } = vectorsOf(grab);
+  const meet = meetPlane(ray, at, normal);
+  if (meet === undefined)
+    return grab.start;
+  const turned = angleBetween(point, meet, at, e1, e2);
+  const angle = snap ? Math.round(turned / tenDegrees) * tenDegrees : turned;
+  const turn = new Quaternion8().setFromAxisAngle(normal, angle).multiply(turnOf2(grab.start.rotation));
+  const euler = new Euler7().setFromQuaternion(turn.normalize());
+  return { ...grab.start, rotation: [euler.x, euler.y, euler.z] };
+};
+var sphereDrag = (state, grab, ray, snap) => {
+  const { point, e1 } = vectorsOf(grab);
+  const grown = 2 ** (offsetAlong(point, e1, ray) / state.scale * 0.2);
+  const factor = Math.max(snap ? Math.round(grown * 10) / 10 : grown, 0.00001);
+  const index = { x: 0, y: 1, z: 2 }[axisOf(grab.handle)];
+  const scale = [
+    grab.start.scale[0] * (index === 0 ? factor : 1),
+    grab.start.scale[1] * (index === 1 ? factor : 1),
+    grab.start.scale[2] * (index === 2 ? factor : 1)
+  ];
+  return { ...grab.start, scale };
+};
+var dragPivot2 = (state, ray, options = {}) => {
+  const grab = state.grab;
+  if (grab === null)
+    return;
+  const snap = options.snap ?? false;
+  const kind = kindOf2(grab.handle);
+  if (kind === "arrow")
+    return arrowDrag(grab, ray);
+  if (kind === "slider")
+    return sliderDrag(grab, ray);
+  if (kind === "rotator")
+    return rotatorDrag(grab, ray, snap);
+  return sphereDrag(state, grab, ray, snap);
+};
+var colours2 = { x: 16719968, y: 2154368, z: 2130175 };
+var hoveredColour = 16777024;
+var handles = ["arrow", "slider", "rotator", "sphere"];
+var pivotHandleOf2 = (key, hit) => {
+  const [owner, name] = hit.split(":");
+  if (owner !== key)
+    return;
+  return handles.flatMap((kind) => ["x", "y", "z"].map((axis) => `${kind}-${axis}`)).find((handle) => handle === name);
+};
+var lookOf = (state, handle) => basic2({
+  color: state.grab?.handle === handle || state.hovered === handle ? hoveredColour : colours2[axisOf(handle)],
+  depthTest: state.depthTest,
+  side: "double"
+});
+var unseen = basic2({ opacity: 0, transparent: true, depthTest: false });
+var pointAlong2 = {
+  x: [0, 0, -Math.PI / 2],
+  y: [0, 0, 0],
+  z: [Math.PI / 2, 0, 0]
+};
+var along = (axis, distance) => {
+  const { x, y, z } = unit[axis];
+  return [x * distance, y * distance, z * distance];
+};
+var arrowNodes = (key, state, axis) => {
+  const handle = `arrow-${axis}`;
+  const size = state.scale;
+  const coneLength = size / 5;
+  const stem = size - coneLength;
+  const material = lookOf(state, handle);
+  return [
+    mesh2({
+      key: `${key}:${handle}:stem`,
+      position: along(axis, stem / 2),
+      rotation: fixed2(pointAlong2[axis]),
+      geometry: cylinder2({ radiusTop: size / 80, radiusBottom: size / 80, height: stem }),
+      material
+    }),
+    mesh2({
+      key: `${key}:${handle}:hit`,
+      position: along(axis, size / 2),
+      rotation: fixed2(pointAlong2[axis]),
+      geometry: cylinder2({ radiusTop: size * 0.07, radiusBottom: size * 0.07, height: size }),
+      material: unseen,
+      interactive: true
+    }),
+    mesh2({
+      key: `${key}:${handle}:cone`,
+      position: along(axis, stem + coneLength / 2),
+      rotation: fixed2(pointAlong2[axis]),
+      geometry: cone2({ radius: size / 20, height: coneLength, radialSegments: 24 }),
+      material,
+      interactive: true
+    })
+  ];
+};
+var ontoPlane = {
+  z: [0, 0, 0],
+  y: [-Math.PI / 2, 0, -Math.PI / 2],
+  x: [Math.PI / 2, Math.PI / 2, 0]
+};
+var sliderNode = (key, state, axis) => {
+  const handle = `slider-${axis}`;
+  const out = state.scale / 7 * 1.7;
+  const side = state.scale * 0.225;
+  return group2({
+    key: `${key}:${handle}`,
+    rotation: fixed2(ontoPlane[axis]),
+    children: [
+      mesh2({
+        key: `${key}:${handle}:square`,
+        position: [out, out, 0],
+        geometry: plane2({ width: side, height: side }),
+        material: lookOf(state, handle),
+        interactive: true
+      })
+    ]
+  });
+};
+var arcSegments = 8;
+var rotatorNode = (key, state, axis) => {
+  const handle = `rotator-${axis}`;
+  const radius = state.scale * 0.65;
+  const step = Math.PI / 2 / arcSegments;
+  const chord = 2 * radius * Math.sin(step / 2);
+  const segment = (index, part) => {
+    const middle = step * (index + 0.5);
+    const thickness = part === "line" ? radius / 50 : state.scale * 0.03;
+    return mesh2({
+      key: `${key}:${handle}:${part}:${index}`,
+      position: [Math.cos(middle) * radius, Math.sin(middle) * radius, 0],
+      rotation: fixed2([0, 0, middle]),
+      geometry: cylinder2({ radiusTop: thickness, radiusBottom: thickness, height: chord }),
+      material: part === "line" ? lookOf(state, handle) : unseen,
+      interactive: part === "hit"
+    });
+  };
+  const indices = Array.from({ length: arcSegments }, (_, index) => index);
+  return group2({
+    key: `${key}:${handle}`,
+    rotation: fixed2(ontoPlane[axis]),
+    children: [
+      ...indices.map((index) => segment(index, "line")),
+      ...indices.map((index) => segment(index, "hit"))
+    ]
+  });
+};
+var sphereNode = (key, state, axis) => mesh2({
+  key: `${key}:sphere-${axis}`,
+  position: along(axis, state.scale * 1.2),
+  geometry: sphere2({ radius: state.scale / 22.5, widthSegments: 12, heightSegments: 12 }),
+  material: lookOf(state, `sphere-${axis}`),
+  interactive: true
+});
+var axesOf = ["x", "y", "z"];
+var pivotNodes2 = (key, state, placement) => group2({
+  key,
+  position: placement.position,
+  rotation: fixed2(placement.rotation),
+  children: [
+    ...state.disableAxes ? [] : axesOf.flatMap((axis) => arrowNodes(key, state, axis)),
+    ...state.disableSliders ? [] : axesOf.map((axis) => sliderNode(key, state, axis)),
+    ...state.disableRotations ? [] : axesOf.map((axis) => rotatorNode(key, state, axis)),
+    ...state.disableScaling ? [] : axesOf.map((axis) => sphereNode(key, state, axis))
+  ]
+});
+// src/kernel/viewportGizmo.ts
+import { Euler as Euler8, Matrix4 as Matrix46, Quaternion as Quaternion9, Vector3 as Vector318 } from "three";
+var colours3 = { x: 16719968, y: 2154368, z: 2130175 };
+var ink = 0;
+var directions = {
+  x: [1, 0, 0],
+  y: [0, 1, 0],
+  z: [0, 0, 1],
+  "-x": [-1, 0, 0],
+  "-y": [0, -1, 0],
+  "-z": [0, 0, -1]
+};
+var axes2 = ["x", "y", "z", "-x", "-y", "-z"];
+var cameraTurn = (camera) => new Quaternion9().setFromRotationMatrix(new Matrix46().lookAt(new Vector318(...camera.position), new Vector318(...camera.lookAt), new Vector318(0, 1, 0)));
+var gizmoTurn = (camera) => {
+  const turn = new Euler8().setFromQuaternion(cameraTurn(camera).invert());
+  return [turn.x, turn.y, turn.z];
+};
+var stroke = (key, length, angle, at) => mesh2({
+  key,
+  position: [at[0], at[1], 0.01],
+  rotation: fixed2([0, 0, angle]),
+  geometry: box2({ width: length, height: 0.07, depth: 0.001 }),
+  material: basic2({ color: ink })
+});
+var letters = {
+  x: [
+    [0.34, Math.PI / 4, [0, 0]],
+    [0.34, -Math.PI / 4, [0, 0]]
+  ],
+  y: [
+    [0.14, Math.PI / 2, [0, -0.07]],
+    [0.17, Math.PI / 3, [0.04, 0.06]],
+    [0.17, -Math.PI / 3, [-0.04, 0.06]]
+  ],
+  z: [
+    [0.22, 0, [0, 0.11]],
+    [0.22, 0, [0, -0.11]],
+    [0.3, Math.PI / 4, [0, 0]]
+  ]
+};
+var isPositive = (axis) => axis.length === 1;
+var colourOf2 = (axis) => colours3[isPositive(axis) ? axis : axis.slice(1)];
+var headScale = (axis, hovered) => (isPositive(axis) ? 1 : 0.75) * (axis === hovered ? 1.2 : 1);
+var labelOf2 = (key, axis) => isPositive(axis) ? letters[axis].map(([length, angle, at], index) => stroke(`${key}:${axis}:letter:${index}`, length, angle, at)) : [];
+var head = (key, axis, hovered) => {
+  const scale = headScale(axis, hovered);
+  return group2({
+    key: `${key}:${axis}`,
+    position: directions[axis],
+    rotation: billboard2(),
+    scale: [scale, scale, scale],
+    interactive: true,
+    children: [
+      mesh2({
+        key: `${key}:${axis}:disc`,
+        geometry: circle2({ radius: 0.25, segments: 32 }),
+        material: basic2({
+          color: colourOf2(axis),
+          opacity: isPositive(axis) ? 1 : 0.75,
+          transparent: !isPositive(axis)
+        })
+      }),
+      ...labelOf2(key, axis)
+    ]
+  });
+};
+var bar = (key, axis) => {
+  const [x, y, z] = directions[axis];
+  return mesh2({
+    key: `${key}:${axis}:bar`,
+    position: [x * 0.4, y * 0.4, z * 0.4],
+    geometry: box2({
+      width: axis === "x" ? 0.8 : 0.05,
+      height: axis === "y" ? 0.8 : 0.05,
+      depth: axis === "z" ? 0.8 : 0.05
+    }),
+    material: basic2({ color: colours3[axis] })
+  });
+};
+var viewportGizmoNodes2 = (key, camera, options = {}) => {
+  const size = options.size ?? 40;
+  const hovered = options.hovered ?? null;
+  const shown = options.hideNegativeAxes === true ? axes2.filter(isPositive) : axes2;
+  return group2({
+    key,
+    rotation: fixed2(gizmoTurn(camera)),
+    scale: [size, size, size],
+    children: [
+      bar(key, "x"),
+      bar(key, "y"),
+      bar(key, "z"),
+      ...shown.map((axis) => head(key, axis, hovered))
+    ]
+  });
+};
+var viewportAxisOf2 = (key, hit) => {
+  const [owner, axis] = hit.split(":");
+  if (owner !== key)
+    return;
+  return axes2.find((candidate) => candidate === axis);
+};
+var cameraAlong2 = (camera, axis) => {
+  const target = new Vector318(...camera.lookAt);
+  const distance = new Vector318(...camera.position).distanceTo(target);
+  const direction = new Vector318(...directions[axis]);
+  if (axis === "y" || axis === "-y")
+    direction.z = 0.000001;
+  const position = direction.normalize().multiplyScalar(distance).add(target);
+  return { ...camera, position: [position.x, position.y, position.z] };
+};
+export { __export, handJoints2, clipTime2, clipRunning2, createPose2, resetPose2, float2, builtinBehaviours2, spinAngle2, writeRotation2, buildMaterial2, updateMaterial2, vec3Equals2, rotationEquals2, shapeEquals2, geometryRefEquals2, instanceEquals2, instancesEqual2, behaviourEquals2, animationEquals2, transitionEquals2, materialRefEquals2, cameraEquals2, renderSettingsEquals2, effectsEqual2, viewsEqual2, resourcesEqual2, overlaysEqual2, environmentEquals2, skyEquals2, contactShadowsEquals2, bodyEquals2, assetsEqual2, physicsEquals2, xrEquals2, capacityFor2, createPerformanceMonitor2, easeProgress2, startTween2, applyTween2, fixed2, spin2, billboard2, box2, sphere2, plane2, cylinder2, torus2, cone2, capsule2, roundedBox2, backdrop2, ring2, circle2, text2, instant2, ease2, basic2, lambert2, phong2, standard2, physical2, normalMaterial2, shadowMaterial2, grid2, shaderGrid2, sharedGeometry2, lentGeometry2, sharedMaterial2, group2, detailed2, line2, points2, sparkles2, stars2, catmullRomPoints2, catmullRomPointAt2, catmullRomColors2, cubicBezierPoints2, quadraticBezierPoints2, headSpace2, jointSpace2, controllerSpace2, anchorSpace2, planeSpace2, meshSpace2, xrMeshGeometryId2, xrMesh2, xrAnchor2, mesh2, trail2, edges2, body2, interactionGroups2, cuboidCollider2, ballCollider2, capsuleCollider2, cylinderCollider2, coneCollider2, velocityMotor2, positionMotor2, physics2, bodyRef2, joint2, fixedJoint2, sphericalJoint2, revoluteJoint2, prismaticJoint2, ropeJoint2, springJoint2, glide2, xr2, instance2, instances2, behave2, play2, borrowed2, label2, colorRange2, ambientLight2, directionalLight2, pointLight2, spotLight2, hemisphereLight2, perspectiveCamera2, orthographicCamera2, cameraShake2, bloom2, vignette2, film2, renderSettings2, view2, renderTexture2, environment2, sunPositionFromAngles2, sky2, contactShadows2, modelAsset2, textureAsset2, environmentAsset2, fontAsset2, overlay2, hud2, scene2, emptyIndex2, indexScene2, changedFields2, diff2, createResourceStore2, createSceneClock2, createManualFrames2, createGatedFrames2, createFramePacer2, defaultOrbit2, orbitOptions2, rotateCamera2, dollyCamera2, panCamera2, dollyCameraToward2, orbit2, orbitKey2, autoRotated2, fitCamera2, clipCamera2, placeOverlays2, interactionBits2, snapshotText2, snapshotBytes2, colliderFor2, describedColliders2, collidersFor2, colliderSignature2, locomote2, teleport2, glided2, createXrTracker2, environmentPresets2, environmentPresetUrl2, stagePresets2, stage2, centerOffset2, stageBounds2, noModifiers2, pointOnPlane2, createPicker2, createPointerTracker2, createSceneLoop2, recordingRendererFactory2, createSceneGraph2, previewSvg2, gizmo2, pressGizmo2, releaseGizmo2, hoverGizmo2, dragGizmo2, movedAlike2, gizmoHandleOf2, gizmoNodes2, boxSelect2, exports_history, exports_lockstep, exports_timeline, thingsBounds2, describeScene2, formatSummary2, shotAngles2, shotCamera2, moods2, moodStaging2, inspectFields2, setAt2, sceneChanges2, formatChanges2, tape2, placeTapeEnd2, pointTape2, clearTape2, tapeLength2, tapeMiddle2, tapeNodes2, pivot2, pressPivot2, releasePivot2, hoverPivot2, dragPivot2, pivotHandleOf2, pivotNodes2, viewportGizmoNodes2, viewportAxisOf2, cameraAlong2 };
 
-//# debugId=DD15A712F87B1C4C64756E2164756E21
-//# sourceMappingURL=index-8cf8t6by.js.map
+//# debugId=0311CB843C4BF34064756E2164756E21
+//# sourceMappingURL=index-re3rrfwd.js.map