@opsydyn/effect-three 0.2.0 → 0.4.0

package/dist/{index-01kwfekm.js → index-h3vf50fn.js}

@@ -1,3 +1,60 @@
+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/description.ts
 var handJoints2 = [
   "wrist",
@@ -67,6 +124,10 @@ var writeRotation2 = (target, rotation, elapsedSeconds) => {
     target.set(rotation.euler[0], rotation.euler[1], rotation.euler[2]);
     return;
   }
+  if (rotation._tag === "Billboard") {
+    target.set(0, 0, 0);
+    return;
+  }
   const angle = spinAngle2(rotation, elapsedSeconds);
   switch (rotation.axis) {
     case "x":
@@ -121,6 +182,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;
@@ -251,6 +314,13 @@ import {
 
 // src/kernel/equality.ts
 var vec3Equals2 = (a, b) => a === b || Object.is(a[0], b[0]) && Object.is(a[1], b[1]) && Object.is(a[2], b[2]);
+var detailEquals = (a, b) => {
+  if (a === b)
+    return true;
+  if (a === null || b === null)
+    return false;
+  return Object.is(a.hysteresis, b.hysteresis) && a.distances.length === b.distances.length && a.distances.every((distance, index) => Object.is(distance, b.distances[index]));
+};
 var rotationEquals2 = (a, b) => {
   if (a === b)
     return true;
@@ -259,6 +329,9 @@ var rotationEquals2 = (a, b) => {
   if (a._tag === "Spin" && b._tag === "Spin") {
     return a.axis === b.axis && Object.is(a.radiansPerSecond, b.radiansPerSecond) && Object.is(a.phase, b.phase);
   }
+  if (a._tag === "Billboard" && b._tag === "Billboard") {
+    return a.lockX === b.lockX && a.lockY === b.lockY && a.lockZ === b.lockZ;
+  }
   return false;
 };
 var shapeEquals2 = (a, b) => {
@@ -283,6 +356,10 @@ var shapeEquals2 = (a, b) => {
       return b._tag === "Ring" && Object.is(a.innerRadius, b.innerRadius) && Object.is(a.outerRadius, b.outerRadius) && a.thetaSegments === b.thetaSegments;
     case "Circle":
       return b._tag === "Circle" && Object.is(a.radius, b.radius) && a.segments === b.segments;
+    case "RoundedBox":
+      return b._tag === "RoundedBox" && Object.is(a.width, b.width) && Object.is(a.height, b.height) && Object.is(a.depth, b.depth) && Object.is(a.radius, b.radius) && a.smoothness === b.smoothness && a.bevelSegments === b.bevelSegments && a.steps === b.steps && Object.is(a.creaseAngle, b.creaseAngle);
+    case "Backdrop":
+      return b._tag === "Backdrop" && Object.is(a.floor, b.floor) && a.segments === b.segments;
     case "Text":
       return b._tag === "Text" && a.text === b.text && a.font === b.font && Object.is(a.size, b.size) && Object.is(a.depth, b.depth) && a.curveSegments === b.curveSegments && a.center === b.center && Object.is(a.letterSpacing, b.letterSpacing) && Object.is(a.lineHeight, b.lineHeight) && a.align === b.align && bevelEquals(a.bevel, b.bevel);
   }
@@ -340,11 +417,12 @@ var materialRefEquals2 = (a, b) => {
   }
   return sameFlatRecord(a, b);
 };
+var cameraShakeEquals = (a, b) => a === b || a !== null && b !== null && Object.is(a.intensity, b.intensity) && a.decay === b.decay && Object.is(a.decayRate, b.decayRate) && Object.is(a.maxYaw, b.maxYaw) && Object.is(a.maxPitch, b.maxPitch) && Object.is(a.maxRoll, b.maxRoll) && Object.is(a.yawFrequency, b.yawFrequency) && Object.is(a.pitchFrequency, b.pitchFrequency) && Object.is(a.rollFrequency, b.rollFrequency) && Object.is(a.trigger, b.trigger);
 var cameraEquals2 = (a, b) => {
   if (a === b)
     return true;
   const sameLens = a._tag === "Perspective" && b._tag === "Perspective" && Object.is(a.fov, b.fov) || a._tag === "Orthographic" && b._tag === "Orthographic" && Object.is(a.zoom, b.zoom);
-  return sameLens && Object.is(a.near, b.near) && Object.is(a.far, b.far) && Object.is(a.damping, b.damping) && Object.is(a.autoRotate, b.autoRotate) && vec3Equals2(a.position, b.position) && vec3Equals2(a.lookAt, b.lookAt);
+  return sameLens && Object.is(a.near, b.near) && Object.is(a.far, b.far) && Object.is(a.damping, b.damping) && Object.is(a.autoRotate, b.autoRotate) && cameraShakeEquals(a.shake, b.shake) && vec3Equals2(a.position, b.position) && vec3Equals2(a.lookAt, b.lookAt);
 };
 var renderSettingsEquals2 = (a, b) => a === b || a.frames === b.frames && Object.is(a.resolution, b.resolution) && a.shadows === b.shadows && a.toneMapping === b.toneMapping && Object.is(a.exposure, b.exposure) && a.colorSpace === b.colorSpace && effectsEqual2(a.effects, b.effects);
 var effectsEqual2 = (a, b) => {
@@ -470,6 +548,21 @@ 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 xrAnchorEquals = (a, b) => b !== undefined && a.id === b.id && vec3Equals2(a.position, b.position) && vec3Equals2(a.rotation, b.rotation);
@@ -639,6 +732,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 };
@@ -651,6 +745,12 @@ var spin2 = (options) => ({
   radiansPerSecond: options.radiansPerSecond,
   phase: options.phase ?? 0
 });
+var billboard2 = (options = {}) => ({
+  _tag: "Billboard",
+  lockX: options.lockX ?? false,
+  lockY: options.lockY ?? false,
+  lockZ: options.lockZ ?? false
+});
 var box2 = (size = {}) => ({
   _tag: "Box",
   width: size.width ?? 1,
@@ -691,6 +791,22 @@ var capsule2 = (options = {}) => ({
   capSegments: options.capSegments ?? 4,
   radialSegments: options.radialSegments ?? 8
 });
+var roundedBox2 = (options = {}) => ({
+  _tag: "RoundedBox",
+  width: options.width ?? 1,
+  height: options.height ?? 1,
+  depth: options.depth ?? 1,
+  radius: options.radius ?? 0.05,
+  smoothness: options.smoothness ?? 4,
+  bevelSegments: options.bevelSegments ?? 4,
+  steps: options.steps ?? 1,
+  creaseAngle: options.creaseAngle ?? 0.4
+});
+var backdrop2 = (options = {}) => ({
+  _tag: "Backdrop",
+  floor: options.floor ?? 0.25,
+  segments: options.segments ?? 20
+});
 var ring2 = (options = {}) => ({
   _tag: "Ring",
   innerRadius: options.innerRadius ?? 0.5,
@@ -733,7 +849,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",
@@ -846,8 +963,106 @@ var group2 = (options) => ({
   interactive: options.interactive ?? false,
   children: options.children ?? [],
   body: options.body ?? null,
-  follow: options.follow ?? null
+  follow: options.follow ?? 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",
@@ -882,7 +1097,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",
@@ -1032,7 +1271,9 @@ var borrowed2 = (options) => ({
   transition: options.transition ?? instantTransition,
   behaviour: options.behaviour ?? null,
   interactive: options.interactive ?? false,
-  body: options.body ?? null
+  body: options.body ?? null,
+  castShadow: options.castShadow ?? false,
+  receiveShadow: options.receiveShadow ?? false
 });
 var noColorRanges = [];
 var label2 = (options) => ({
@@ -1124,7 +1365,8 @@ var perspectiveCamera2 = (options = {}) => ({
   position: options.position ?? [0, 0, 5],
   lookAt: options.lookAt ?? origin,
   damping: options.damping ?? 0,
-  autoRotate: options.autoRotate ?? 0
+  autoRotate: options.autoRotate ?? 0,
+  shake: options.shake ?? null
 });
 var orthographicCamera2 = (options = {}) => ({
   _tag: "Orthographic",
@@ -1134,7 +1376,20 @@ var orthographicCamera2 = (options = {}) => ({
   position: options.position ?? [0, 0, 5],
   lookAt: options.lookAt ?? origin,
   damping: options.damping ?? 0,
-  autoRotate: options.autoRotate ?? 0
+  autoRotate: options.autoRotate ?? 0,
+  shake: options.shake ?? null
+});
+var cameraShake2 = (options = {}) => ({
+  intensity: options.intensity ?? 1,
+  decay: options.decay ?? false,
+  decayRate: options.decayRate ?? 0.65,
+  maxYaw: options.maxYaw ?? 0.1,
+  maxPitch: options.maxPitch ?? 0.1,
+  maxRoll: options.maxRoll ?? 0.1,
+  yawFrequency: options.yawFrequency ?? 0.1,
+  pitchFrequency: options.pitchFrequency ?? 0.1,
+  rollFrequency: options.rollFrequency ?? 0.1,
+  trigger: options.trigger ?? 0
 });
 var noEffects = [];
 var bloom2 = (options = {}) => ({
@@ -1232,11 +1487,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,
@@ -1419,6 +1680,10 @@ var changedFields2 = (prev, next) => {
         fields.push("body");
       if (!xrSpaceEquals(prev.follow, next.follow))
         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": {
@@ -1446,6 +1711,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": {
@@ -1498,6 +1767,10 @@ var changedFields2 = (prev, next) => {
         fields.push("interactive");
       if (!bodyEquals2(prev.body, next.body))
         fields.push("body");
+      if (prev.castShadow !== next.castShadow)
+        fields.push("castShadow");
+      if (prev.receiveShadow !== next.receiveShadow)
+        fields.push("receiveShadow");
       return fields;
     }
     case "Label": {
@@ -1597,6 +1870,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;
@@ -1744,14 +2053,18 @@ import {
   CircleGeometry,
   ConeGeometry,
   CylinderGeometry,
+  Euler as Euler2,
   ExtrudeGeometry,
   Material,
   PlaneGeometry,
+  Quaternion as Quaternion2,
   RingGeometry,
+  Shape,
   ShapeGeometry as ShapeGeometry3,
   SphereGeometry,
   TorusGeometry
 } from "three";
+import { toCreasedNormals } from "three/addons/utils/BufferGeometryUtils.js";
 
 // src/kernel/textLayout.ts
 import { Vector2 } from "three";
@@ -1846,6 +2159,45 @@ var buildText = (shape, font) => {
     geometry.center();
   return geometry;
 };
+var roundedEpsilon = 0.00001;
+var buildRoundedBox = (shape) => {
+  const { width, height, depth, radius } = shape;
+  const outline = new Shape;
+  const inset = radius - roundedEpsilon;
+  const e = roundedEpsilon;
+  outline.absarc(e, e, e, -Math.PI / 2, -Math.PI, true);
+  outline.absarc(e, height - inset * 2, e, Math.PI, Math.PI / 2, true);
+  outline.absarc(width - inset * 2, height - inset * 2, e, Math.PI / 2, 0, true);
+  outline.absarc(width - inset * 2, e, e, 0, -Math.PI / 2, true);
+  const geometry = new ExtrudeGeometry(outline, {
+    depth: depth - radius * 2,
+    bevelEnabled: true,
+    bevelSegments: shape.bevelSegments * 2,
+    steps: shape.steps,
+    bevelSize: radius - roundedEpsilon,
+    bevelThickness: radius,
+    curveSegments: shape.smoothness
+  });
+  geometry.center();
+  return toCreasedNormals(geometry, shape.creaseAngle);
+};
+var backdropTurn = new Quaternion2().setFromEuler(new Euler2(-Math.PI / 2, 0, Math.PI / 2));
+var easeInExpo = (x) => x === 0 ? 0 : 2 ** (10 * x - 10);
+var buildBackdrop = (shape) => {
+  const { segments, floor } = shape;
+  const geometry = new PlaneGeometry(1, 1, segments, segments);
+  const position = geometry.getAttribute("position");
+  const offset = 0.5;
+  let vertex = 0;
+  for (let x = 0;x < segments + 1; x++) {
+    for (let y = 0;y < segments + 1; y++) {
+      position.setXYZ(vertex++, x / segments - offset + (x === 0 ? -floor : 0), y / segments - offset, easeInExpo(x / segments));
+    }
+  }
+  position.needsUpdate = true;
+  geometry.computeVertexNormals();
+  return geometry.applyQuaternion(backdropTurn);
+};
 var buildShape = (shape, fontOf) => {
   switch (shape._tag) {
     case "Text":
@@ -1868,6 +2220,10 @@ var buildShape = (shape, fontOf) => {
       return new RingGeometry(shape.innerRadius, shape.outerRadius, shape.thetaSegments);
     case "Circle":
       return new CircleGeometry(shape.radius, shape.segments);
+    case "RoundedBox":
+      return buildRoundedBox(shape);
+    case "Backdrop":
+      return buildBackdrop(shape);
   }
 };
 var notLent = new BufferGeometry;
@@ -2240,7 +2596,7 @@ import {
   Plane,
   Ray,
   Spherical,
-  Vector3 as Vector33
+  Vector3 as Vector34
 } from "three";
 var defaultOrbit2 = {
   enableRotate: true,
@@ -2267,14 +2623,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;
@@ -2352,9 +2708,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) => {
@@ -2456,7 +2812,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]);
@@ -2509,12 +2865,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) => {
@@ -2586,10 +2942,10 @@ var placeOverlays2 = (graph) => {
 };
 // src/kernel/physics.ts
 import {
-  Euler as Euler2,
+  Euler as Euler3,
   Matrix4 as Matrix43,
-  Quaternion as Quaternion2,
-  Vector3 as Vector35
+  Quaternion as Quaternion3,
+  Vector3 as Vector36
 } from "three";
 var interactionBits2 = (groups) => {
   const mask = (list) => list.reduce((bits, group) => bits | 1 << group, 0);
@@ -2599,7 +2955,7 @@ var interactionBits2 = (groups) => {
   return (mask(groups.memberships) << 16 | filters) >>> 0;
 };
 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);
@@ -2618,7 +2974,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)
@@ -2632,7 +2988,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": {
@@ -2649,7 +3005,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 {
@@ -2658,7 +3014,7 @@ var shapeFor = (geometry, collider, scale) => {
           vertices: scaledPositions(geometry, scale),
           indices: triangles(geometry)
         },
-        offset: new Vector35
+        offset: new Vector36
       };
   }
 };
@@ -2666,8 +3022,8 @@ var colliderFor2 = (geometry, collider, scale) => {
   const { shape, offset } = shapeFor(geometry, collider, scale);
   return { shape, translation: toVec32(offset), rotation: [0, 0, 0, 1] };
 };
-var turn3 = new Quaternion2;
-var turnEuler = new Euler2;
+var turn3 = new Quaternion3;
+var turnEuler = new Euler3;
 var largest = (a, b) => Math.max(Math.abs(a), Math.abs(b));
 var scaledShape = (shape, scale) => {
   switch (shape._tag) {
@@ -2703,12 +3059,12 @@ function describedCollider(collider, scale) {
 }
 var relative = new Matrix43;
 var bodyInverse = new Matrix43;
-var where = new Vector35;
-var turn = new Quaternion2;
-var relativeScale = new Vector35;
-var worldScale = new Vector35;
-var worldPosition = new Vector35;
-var worldTurn = new Quaternion2;
+var where = new Vector36;
+var turn = new Quaternion3;
+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) {
   child.matrixWorld.decompose(worldPosition, worldTurn, worldScale);
@@ -2963,7 +3319,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;
@@ -2995,10 +3351,16 @@ var pathOf = (graph, object) => {
   }
   return path;
 };
+var shown = (object) => {
+  for (let at = object;at !== null; at = at.parent)
+    if (!at.visible)
+      return false;
+  return true;
+};
 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();
@@ -3026,24 +3388,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 owner = keyedOwner(graph, intersection.object);
-      const key = owner === undefined ? undefined : graph.keyOf(owner);
+  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(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),
@@ -3054,6 +3418,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)
@@ -3080,19 +3454,22 @@ 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
   };
@@ -3105,6 +3482,7 @@ var createPointerTracker2 = (picker) => {
   const pressedPointers = new Map;
   let primary;
   let gesturePress;
+  let gestureMoved = false;
   let hovered;
   let press;
   let pressing = false;
@@ -3169,6 +3547,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);
@@ -3184,6 +3563,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);
@@ -3222,12 +3602,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 = [];
@@ -3247,7 +3638,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;
@@ -3282,7 +3673,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)) {
@@ -3474,6 +3865,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();
@@ -3558,36 +3954,38 @@ 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";
 
 // src/kernel/bodies.ts
-import { Euler as Euler4, Quaternion as Quaternion4 } from "three";
+import { Euler as Euler5, Quaternion as Quaternion5 } from "three";
 
 // src/kernel/bodySources.ts
-import { Euler as Euler3, Matrix4 as Matrix44, Quaternion as Quaternion3, 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 quaternion2 = new Quaternion3;
-var scale2 = new Vector37;
+var position3 = new Vector38;
+var quaternion2 = new Quaternion4;
+var scale2 = new Vector38;
 var matrix2 = new Matrix44;
 var local = new Matrix44;
 var inverse = new Matrix44;
-var euler2 = new Euler3;
-var ownScale = new Vector37;
+var euler2 = new Euler4;
+var ownScale = new Vector38;
 var toPose = (from) => {
   from.decompose(position3, quaternion2, scale2);
   return {
@@ -3600,7 +3998,7 @@ var worldScale2 = (from) => {
   return ownScale;
 };
 var scaleText = (from) => worldScale2(from).toArray().map((value) => (Math.round(value * 1e5) / 1e5 || 0).toString()).join(",");
-var rotationText = (rotation) => rotation._tag === "Fixed" ? rotation.euler.join(",") : "spin";
+var rotationText = (rotation) => rotation._tag === "Fixed" ? rotation.euler.join(",") : rotation._tag;
 var placeObject = (object, pose) => {
   object.matrixWorld.decompose(position3, quaternion2, scale2);
   matrix2.compose(position3.fromArray(pose.position), quaternion2.fromArray(pose.quaternion), scale2);
@@ -3717,9 +4115,9 @@ var createPhysicsDebug = (scene) => {
 };
 
 // src/kernel/bodies.ts
-var from = new Quaternion4;
-var to = new Quaternion4;
-var euler3 = new Euler4;
+var from = new Quaternion5;
+var to = new Quaternion5;
+var euler3 = new Euler5;
 var quatOf = (angles) => {
   from.setFromEuler(euler3.fromArray([...angles]));
   return [from.x, from.y, from.z, from.w];
@@ -3947,10 +4345,10 @@ var createBodyHost = (engine, scene) => {
 };
 
 // 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);
@@ -3991,8 +4389,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;
@@ -4075,12 +4473,189 @@ var createCameraMotion = () => {
         return;
       position4.setFromSpherical(goal.spherical).add(goal.target);
       return [position4.x, position4.y, position4.z];
+    },
+    target: () => current.target
+  };
+};
+
+// src/kernel/cameraShake.ts
+import { SimplexNoise } from "three/addons/math/SimplexNoise.js";
+var seeded = (seed) => ({ random: seededRandom(seed) });
+var yawNoise = new SimplexNoise(seeded(1));
+var pitchNoise = new SimplexNoise(seeded(2));
+var rollNoise = new SimplexNoise(seeded(3));
+var shakeIntensity = (shake, seconds) => {
+  const decayed = shake.decay ? shake.intensity - shake.decayRate * seconds : shake.intensity;
+  return Math.min(1, Math.max(0, decayed));
+};
+var createCameraShaker = () => {
+  let current = null;
+  let since = 0;
+  let offset = false;
+  return {
+    describe: (shake, now) => {
+      if (shake !== null && (current === null || !cameraShakeEquals(current, shake)))
+        since = now;
+      current = shake;
+    },
+    apply: (camera, target, now, animating) => {
+      const shake = current;
+      const strength = shake === null || !animating ? 0 : shakeIntensity(shake, Math.max(0, now - since)) ** 2;
+      if (shake === null || strength === 0) {
+        if (offset)
+          camera.lookAt(target);
+        offset = false;
+        return;
+      }
+      camera.lookAt(target);
+      camera.rotation.set(camera.rotation.x + shake.maxPitch * strength * pitchNoise.noise(now * shake.pitchFrequency, 1), camera.rotation.y + shake.maxYaw * strength * yawNoise.noise(now * shake.yawFrequency, 1), camera.rotation.z + shake.maxRoll * strength * rollNoise.noise(now * shake.rollFrequency, 1));
+      offset = true;
+    },
+    shaking: (now) => offset || current !== null && shakeIntensity(current, Math.max(0, now - since)) > 0
+  };
+};
+
+// 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]);
@@ -4165,6 +4740,7 @@ var applyLens = (camera, description) => {
 };
 var noInstances = [];
 var emptyScene = scene2({});
+var cloneLoan = (lent) => lent.getObjectByProperty("isSkinnedMesh", true) === undefined ? lent.clone() : cloneSkinned(lent);
 var createSceneGraph2 = (options = {}) => {
   const store = options.store ?? createResourceStore2();
   const ownsStore = options.store === undefined;
@@ -4173,6 +4749,7 @@ var createSceneGraph2 = (options = {}) => {
   let views = [];
   const textureGraphs = new Map;
   let textureList = [];
+  let hudHosted;
   let viewDescriptions = [];
   let gestures = emptyScene.gestures;
   let overlayList = emptyScene.overlays;
@@ -4202,7 +4779,23 @@ var createSceneGraph2 = (options = {}) => {
     hostedSky = undefined;
   }
   const cameraMotion = createCameraMotion();
+  const cameraShaker = createCameraShaker();
   const viewMotions = new Map;
+  const viewShakers = new Map;
+  const shaking = () => {
+    if (cameraShaker.shaking(elapsed))
+      return true;
+    for (const shaker of viewShakers.values())
+      if (shaker.shaking(elapsed))
+        return true;
+    return false;
+  };
+  const shakeView = (view) => {
+    const motion = viewMotions.get(view.key);
+    if (motion === undefined)
+      return;
+    viewShakers.get(view.key)?.apply(view.camera, motion.target(), elapsed, animating);
+  };
   const viewsMoving = () => {
     for (const motion of viewMotions.values())
       if (motion.moving())
@@ -4233,6 +4826,9 @@ var createSceneGraph2 = (options = {}) => {
     applyLens(hostedCamera, description.camera);
     const motion = viewMotions.get(description.key) ?? createCameraMotion();
     viewMotions.set(description.key, motion);
+    const shaker = viewShakers.get(description.key) ?? createCameraShaker();
+    viewShakers.set(description.key, shaker);
+    shaker.describe(description.camera.shake, elapsed);
     motion.aim(hostedCamera, description.camera, elapsed, hostedCamera !== previous || !animating);
     const area = areaOf(description.rect);
     fitCamera(hostedCamera, area);
@@ -4246,10 +4842,43 @@ var createSceneGraph2 = (options = {}) => {
       if (!described.some((description) => description.key === key))
         viewMotions.delete(key);
     }
+    for (const key of viewShakers.keys()) {
+      if (!described.some((description) => description.key === key))
+        viewShakers.delete(key);
+    }
   };
   const entries = new Map;
   const keys = new WeakMap;
   const spinning = new Set;
+  const facing = new Set;
+  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 Vector311;
+  const groupPlace = new Vector311;
   const playing = new Set;
   const registry = {
     ...builtinBehaviours2,
@@ -4259,7 +4888,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;
@@ -4307,6 +4936,140 @@ var createSceneGraph2 = (options = {}) => {
       spinning.add(entry);
     else
       spinning.delete(entry);
+    if (node.rotation._tag === "Billboard")
+      facing.add(entry);
+    else
+      facing.delete(entry);
+  };
+  const faceCamera = (entry) => {
+    if (!isPlaced(entry) || entry.node.rotation._tag !== "Billboard")
+      return;
+    const { lockX, lockY, lockZ } = entry.node.rotation;
+    const object = entry.object;
+    parentTurn.identity();
+    object.parent?.getWorldQuaternion(parentTurn);
+    object.quaternion.copy(cameraTurn).premultiply(parentTurn.invert());
+    if (lockX)
+      object.rotation.x = 0;
+    if (lockY)
+      object.rotation.y = 0;
+    if (lockZ)
+      object.rotation.z = 0;
+  };
+  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;
+  };
+  const showLevel = (entry) => {
+    if (entry._tag !== "Group")
+      return;
+    const { node } = entry;
+    const { detail } = node;
+    if (detail === null)
+      return;
+    const { distances, hysteresis } = detail;
+    const count = node.children.length;
+    if (count < 2)
+      return;
+    entry.object.getWorldPosition(groupPlace);
+    const distance = cameraPlace.distanceTo(groupPlace) / camera.zoom;
+    const first = childObject(node, 0);
+    if (first !== undefined)
+      first.visible = true;
+    let level = 1;
+    for (;level < count; level++) {
+      const object = childObject(node, level);
+      const from = distances[level] ?? Number.NaN;
+      const reach = object?.visible === true ? from - from * hysteresis : from;
+      if (!(distance >= reach))
+        break;
+      const previous = childObject(node, level - 1);
+      if (previous !== undefined)
+        previous.visible = false;
+      if (object !== undefined)
+        object.visible = true;
+    }
+    for (;level < count; level++) {
+      const object = childObject(node, level);
+      if (object !== undefined)
+        object.visible = false;
+    }
+  };
+  const trackDetail = (entry, node) => {
+    if (node.detail !== null) {
+      detailing.add(entry);
+      return;
+    }
+    if (detailing.delete(entry)) {
+      for (let index = 0;index < node.children.length; index++) {
+        const object = childObject(node, index);
+        if (object !== undefined)
+          object.visible = true;
+      }
+    }
   };
   const build = (node) => {
     switch (node._tag) {
@@ -4319,10 +5082,12 @@ var createSceneGraph2 = (options = {}) => {
         trackInteractive(entry.object, node.interactive);
         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);
@@ -4331,6 +5096,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": {
@@ -4404,6 +5171,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);
@@ -4418,11 +5209,22 @@ var createSceneGraph2 = (options = {}) => {
     const lent = store.lent(entry.node.id);
     if (lent === undefined)
       return;
-    const shown = lent.parent === null ? lent : lent.clone();
+    const shown = lent.parent === null ? lent : cloneLoan(lent);
     entry.object.add(shown);
     entry.shown = shown;
+    castShadows(shown, entry.node);
     startPlayer(entry);
   };
+  const castShadows = (shown, node) => {
+    if (!node.castShadow && !node.receiveShadow)
+      return;
+    shown.traverse((part) => {
+      if (part instanceof Mesh2 && node.castShadow)
+        part.castShadow = true;
+      if (part instanceof Mesh2 && node.receiveShadow)
+        part.receiveShadow = true;
+    });
+  };
   const stopPlayer = (entry) => {
     if (entry.player === undefined)
       return;
@@ -4556,6 +5358,19 @@ var createSceneGraph2 = (options = {}) => {
     if (isPlaced(entry))
       behaving.delete(entry);
     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);
@@ -4567,8 +5382,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) {
@@ -4663,6 +5480,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"))
@@ -4685,6 +5508,10 @@ var createSceneGraph2 = (options = {}) => {
         showLoan(entry);
       else if (fields.includes("animation"))
         startPlayer(entry);
+      if (fields.includes("castShadow") || fields.includes("receiveShadow")) {
+        if (entry.shown !== undefined)
+          castShadows(entry.shown, next);
+      }
       return;
     }
     if (entry._tag === "Label" && next._tag === "Label") {
@@ -4713,6 +5540,10 @@ var createSceneGraph2 = (options = {}) => {
         trackBehaviour(entry, next);
       if (fields.includes("interactive"))
         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) {
@@ -4748,6 +5579,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;
@@ -4785,6 +5644,7 @@ var createSceneGraph2 = (options = {}) => {
         camera = cameraFor(camera, op.camera);
         applyLens(camera, op.camera);
         cameraMotion.aim(camera, op.camera, elapsed, camera !== previous || !animating);
+        cameraShaker.describe(op.camera.shake, elapsed);
         fitCamera(camera, viewport);
         return;
       }
@@ -4876,6 +5736,7 @@ var createSceneGraph2 = (options = {}) => {
     gestures: "page",
     views: [],
     renderTextures: [],
+    hud: null,
     overlays: [],
     environment: null,
     sky: null,
@@ -4887,6 +5748,62 @@ var createSceneGraph2 = (options = {}) => {
     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)
@@ -4910,7 +5827,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);
@@ -4935,6 +5852,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;
@@ -4969,7 +5891,7 @@ var createSceneGraph2 = (options = {}) => {
     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 };
@@ -4982,6 +5904,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);
@@ -4994,7 +5917,24 @@ var createSceneGraph2 = (options = {}) => {
     cameraMotion.step(camera, elapsed);
     for (const view of views)
       viewMotions.get(view.key)?.step(view.camera, elapsed);
+    cameraShaker.apply(camera, cameraMotion.target(), elapsed, animating);
+    views.forEach(shakeView);
     bodyHost.tick(elapsed, animating);
+    if (facing.size > 0) {
+      camera.getWorldQuaternion(cameraTurn);
+      facing.forEach(faceCamera);
+    }
+    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);
+      detailing.forEach(showLevel);
+    }
   };
   const finishTween = (tween, entry) => {
     applyTween2(entry.object, tween, Number.POSITIVE_INFINITY);
@@ -5004,6 +5944,7 @@ var createSceneGraph2 = (options = {}) => {
       invalidate();
     for (const texture of textureList)
       texture.graph.setAnimating(next);
+    hudHosted?.graph.setAnimating(next);
     animating = next;
     if (next)
       return;
@@ -5020,6 +5961,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);
@@ -5052,6 +5995,7 @@ var createSceneGraph2 = (options = {}) => {
       return viewMotions.get(view)?.turned();
     },
     renderTextures: () => textureList,
+    hud: () => hudHosted,
     gestures: () => gestures,
     overlays: () => overlayList,
     environment: () => environmentDescription,
@@ -5080,7 +6024,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() || 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()),
     drawn: () => {
       dirty = false;
     },
@@ -5107,12 +6051,1401 @@ 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, box2, sphere2, plane2, cylinder2, torus2, cone2, capsule2, ring2, circle2, text2, instant2, ease2, basic2, lambert2, phong2, standard2, physical2, normalMaterial2, shadowMaterial2, grid2, shaderGrid2, sharedGeometry2, lentGeometry2, sharedMaterial2, group2, 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, 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/gizmo.ts
+import { Euler as Euler6, Quaternion as Quaternion7, Vector3 as Vector312 } 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 Vector312(1, 0, 0),
+  y: new Vector312(0, 1, 0),
+  z: new Vector312(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 Vector312(...start.position);
+  return { normal: toVec34(normal), constant: -normal.dot(center) };
+};
+var onPlane = (grab, ray) => {
+  const point = pointOnPlane2(ray, grab.plane);
+  if (point === undefined)
+    return;
+  return new Vector312(...point).sub(new Vector312(...grab.start.position));
+};
+var backwards = (camera) => {
+  const back = new Vector312(...camera.position).sub(new Vector312(...camera.lookAt));
+  return back.lengthSq() > 0.000000000001 ? back.normalize() : new Vector312(0, 0, 1);
+};
+var pressGizmo2 = (state, placement, handle, ray, camera) => {
+  const center = new Vector312(...placement.position);
+  const facingCamera = backwards(camera);
+  const towardsEye = new Vector312(...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 Vector312(...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 Vector312(...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 Vector312(...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 Vector312(...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 Vector312(...grab.from);
+  const factor = new Vector312(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 Vector312(...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 Vector312(...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 = onPlane(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 Vector312(...camera.position).distanceTo(new Vector312(...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 Vector312(...camera.position).sub(new Vector312(...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 Vector313 } 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 Vector313(...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/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 sizeOf = (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: sizeOf(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 number = (value) => String(Math.round(value * 100) / 100);
+var point2 = (at) => `(${at.map(number).join(", ")})`;
+var hex = (colour) => `#${colour.toString(16).padStart(6, "0")}`;
+var thingLine = (thing) => [
+  `- ${thing.key}: ${thing.kind}`,
+  thing.size === null ? "" : `, ${thing.size.map(number).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)} × ${number(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 Vector314 } 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 Vector314(...subject.min).add(new Vector314(...subject.max)).multiplyScalar(0.5);
+  const from = new Vector314(...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 Vector315 } 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 Vector315(1, 0, 0),
+  y: new Vector315(0, 1, 0),
+  z: new Vector315(0, 0, 1)
+};
+var planeOf = {
+  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] = planeOf[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 Vector315(...ray.origin);
+  const toward = new Vector315(...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 Vector315(...ray.origin);
+  const toward = new Vector315(...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 Vector315(...grab.point),
+  e1: new Vector315(...grab.e1),
+  e2: new Vector315(...grab.e2),
+  normal: new Vector315(...grab.normal),
+  at: new Vector315(...grab.start.position)
+});
+var moved2 = (start, by) => ({
+  ...start,
+  position: toVec35(new Vector315(...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 Matrix45, Quaternion as Quaternion9, Vector3 as Vector316 } 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 Matrix45().lookAt(new Vector316(...camera.position), new Vector316(...camera.lookAt), new Vector316(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 Vector316(...camera.lookAt);
+  const distance = new Vector316(...camera.position).distanceTo(target);
+  const direction = new Vector316(...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, 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, 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, colliderFor2, describedColliders2, collidersFor2, colliderSignature2, locomote2, teleport2, glided2, createXrTracker2, environmentPresets2, environmentPresetUrl2, stagePresets2, stage2, centerOffset2, stageBounds2, noModifiers2, pointOnPlane2, createPicker2, createPointerTracker2, createSceneLoop2, recordingRendererFactory2, createSceneGraph2, gizmo2, pressGizmo2, releaseGizmo2, hoverGizmo2, dragGizmo2, movedAlike2, gizmoHandleOf2, gizmoNodes2, boxSelect2, exports_history, exports_lockstep, 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=C47554518AE363C364756E2164756E21
-//# sourceMappingURL=index-01kwfekm.js.map
+//# debugId=9610D685ADCF1F6764756E2164756E21
+//# sourceMappingURL=index-h3vf50fn.js.map