@oeave/bakery3 0.2.0 → 0.3.0

package/dist/hotspots/index.js

@@ -1,11 +1,125 @@
-import { Vector3, Color, Group, Mesh, SphereGeometry, MeshBasicMaterial, BufferGeometry, Line, LineBasicMaterial, Raycaster, Vector2 } from 'three';
+import { OBJECT_PROPERTIES } from '../chunk-OPM2L63B.js';
+import { Vector3, Quaternion, Euler, Group, Color, Mesh, TorusGeometry, CylinderGeometry, MeshPhysicalMaterial, PointLight, Matrix3, Matrix4, Raycaster, Vector2, SphereGeometry, MeshStandardMaterial, Shape, ShapeGeometry, DataTexture, RGBAFormat, UnsignedByteType, SRGBColorSpace, LinearFilter, LinearMipmapLinearFilter } from 'three';
+
+var LABEL_FONT = '600 40px system-ui, -apple-system, "Segoe UI", Roboto, sans-serif';
+function context2d(width, height) {
+  const usable = (ctx) => !!ctx && typeof ctx.measureText === "function" && typeof ctx.getImageData === "function";
+  try {
+    if (typeof OffscreenCanvas !== "undefined") {
+      const ctx = new OffscreenCanvas(width, height).getContext("2d");
+      if (usable(ctx)) return ctx;
+    }
+    if (typeof document !== "undefined") {
+      const canvas = document.createElement("canvas");
+      if (typeof canvas?.getContext !== "function") return null;
+      canvas.width = width;
+      canvas.height = height;
+      const ctx = canvas.getContext("2d");
+      if (usable(ctx)) return ctx;
+    }
+  } catch {
+  }
+  return null;
+}
+function pixelSize(font) {
+  const match = /(\d+(?:\.\d+)?)px/.exec(font);
+  return match ? Number(match[1]) : 40;
+}
+function texture(data, width, height) {
+  const map = new DataTexture(
+    data,
+    width,
+    height,
+    RGBAFormat,
+    UnsignedByteType
+  );
+  map.colorSpace = SRGBColorSpace;
+  map.magFilter = LinearFilter;
+  map.minFilter = LinearMipmapLinearFilter;
+  map.generateMipmaps = true;
+  map.anisotropy = 4;
+  map.needsUpdate = true;
+  return map;
+}
+function plain(look) {
+  const hex = new Color(look.background).getHex();
+  const rgba = [hex >> 16 & 255, hex >> 8 & 255, hex & 255];
+  const data = new Uint8Array(12);
+  for (let i = 0; i < 3; i++)
+    data.set([rgba[0], rgba[1], rgba[2], 255], i * 4);
+  return { texture: texture(data, 3, 1), aspect: 3 };
+}
+function rasterizeLabel(look) {
+  const size = pixelSize(look.font);
+  const height = Math.max(8, Math.round(size * 1.7));
+  const pad = Math.round(size * 0.62);
+  const probe = context2d(1, 1);
+  if (!probe) return plain(look);
+  probe.font = look.font;
+  const width = Math.max(
+    height,
+    Math.ceil(probe.measureText(look.text).width + pad * 2)
+  );
+  const ctx = context2d(width, height);
+  if (!ctx) return plain(look);
+  ctx.fillStyle = look.background;
+  ctx.fillRect(0, 0, width, height);
+  ctx.font = look.font;
+  ctx.textBaseline = "middle";
+  ctx.fillStyle = look.color;
+  ctx.fillText(look.text, pad, height / 2 + size * 0.04);
+  const pixels = ctx.getImageData(0, 0, width, height).data;
+  const data = new Uint8Array(width * height * 4);
+  const row = width * 4;
+  for (let y = 0; y < height; y++)
+    data.set(
+      pixels.subarray((height - 1 - y) * row, (height - y) * row),
+      y * row
+    );
+  return { texture: texture(data, width, height), aspect: width / height };
+}
+function pillGeometry(aspect) {
+  const width = Math.max(1, aspect);
+  const r = 0.5;
+  const shape = new Shape();
+  shape.moveTo(r, -0.5);
+  shape.lineTo(width - r, -0.5);
+  shape.absarc(width - r, 0, r, -Math.PI / 2, Math.PI / 2, false);
+  shape.lineTo(r, 0.5);
+  shape.absarc(r, 0, r, Math.PI / 2, 3 * Math.PI / 2, false);
+  const geometry = new ShapeGeometry(shape, 16);
+  const position = geometry.getAttribute("position");
+  const uv = geometry.getAttribute("uv");
+  for (let i = 0; i < position.count; i++)
+    uv.setXY(i, position.getX(i) / width, position.getY(i) + 0.5);
+  uv.needsUpdate = true;
+  return geometry;
+}
+function labelSideFor(current, x, reach) {
+  const margin = 0.04;
+  const fitsRight = x + reach < 1 - margin;
+  const fitsLeft = x - reach > -1 + margin;
+  if (!fitsRight && !fitsLeft)
+    return current === "right" ? x > 0.1 ? "left" : "right" : x < -0.1 ? "right" : "left";
+  if (current === "right") return fitsRight ? "right" : "left";
+  return x + reach < 1 - margin - 0.12 || !fitsLeft ? "right" : "left";
+}
 
 // src/hotspots/hotspots.ts
 var WORLD = new Vector3();
 var CAMERA = new Vector3();
 var FORWARD = new Vector3();
+var SCALE = new Vector3();
+var RIGHT = new Vector3();
+var EDGE = new Vector3();
+var ORIENT = new Quaternion();
+var VIEW = new Quaternion();
+var EULER = new Euler();
+var UP = new Vector3(0, 1, 0);
+var FRONT = new Vector3(0, 0, 1);
 var HOTSPOT_COLOR = "#33d1ff";
 var PARTS = /* @__PURE__ */ new WeakMap();
+var INTERNALS = /* @__PURE__ */ new WeakMap();
 function hotspotParts(hotspot) {
   const parts = PARTS.get(hotspot);
   if (!parts)
@@ -17,169 +131,944 @@ function hotspotParts(hotspot) {
 var HALO_SCALE = 1.7;
 var HALO_PULSE = 0.3;
 var HALO_OPACITY = 0.28;
-var LINE_OPACITY = 0.6;
+var RING_RADIUS = 1.35;
+var RING_TUBE = 0.11;
+var GLASS_CORE = 0.42;
+var RING_CORE = 0.5;
+var TETHER_RADIUS = 0.09;
+var DOT_RADIUS = 0.32;
 var PULSE_HZ = 0.7;
-var WHITE = new Color("#ffffff");
-function toVector3(value) {
+var LABEL_HEIGHT = 2.2;
+var LABEL_SLIDE = 0.6;
+var LABEL_LIFT = 0.4;
+var LABEL_GLOW = 1.3;
+var REACH = {
+  orb: 2,
+  ring: 2,
+  glass: 1.15,
+  solid: 1.45
+};
+var CLOSED_GLOW = 1 / 3;
+var FLOOR = 1e-3;
+var LIGHT_FLOOR = 1e-6;
+var INTENSITY = {
+  orb: 3,
+  ring: 3,
+  glass: 6,
+  solid: 0.2
+};
+var clamp01 = (x) => x <= 0 ? 0 : x >= 1 ? 1 : x;
+var smooth = (a, b, x) => {
+  const t = clamp01((x - a) / (b - a));
+  return t * t * (3 - 2 * t);
+};
+var easeOutCubic = (t) => 1 - (1 - clamp01(t)) ** 3;
+var easeInOutCubic = (t) => {
+  const x = clamp01(t);
+  return x < 0.5 ? 4 * x * x * x : 1 - (-2 * x + 2) ** 3 / 2;
+};
+var easeOutBack = (t) => {
+  const x = clamp01(t);
+  const c1 = 1.4;
+  const c3 = c1 + 1;
+  return 1 + c3 * (x - 1) ** 3 + c1 * (x - 1) ** 2;
+};
+function poseOf(motion, seconds, anchored, pulseHz) {
+  const p = motion.presence;
+  const head = anchored ? easeOutBack((p - 0.45) / 0.55) : easeOutBack(p);
+  return {
+    dot: anchored ? smooth(0, 0.3, p) : 0,
+    extend: anchored ? easeOutCubic((p - 0.15) / 0.6) : 1,
+    head: Math.max(0, head),
+    open: easeInOutCubic(motion.open) * smooth(0.6, 1, p),
+    hover: smooth(0, 1, motion.hover),
+    label: easeOutCubic(motion.label) * smooth(0.6, 1, p),
+    side: motion.side,
+    pulse: pulseHz > 0 ? 0.5 + 0.5 * Math.sin(seconds * Math.PI * 2 * pulseHz) : 0
+  };
+}
+function labelWanted(show, state, hovered) {
+  if (state === "hidden" || show === "never") return false;
+  if (show === "always") return true;
+  if (show === "open") return state === "open";
+  return hovered || state === "open";
+}
+function approach(value, target, dt, seconds) {
+  if (seconds <= 0) return target;
+  const step2 = dt / seconds;
+  return value < target ? Math.min(target, value + step2) : Math.max(target, value - step2);
+}
+function step(motion, target, dt, timing) {
+  motion.presence = approach(
+    motion.presence,
+    target.presence,
+    dt,
+    timing.appear
+  );
+  motion.open = approach(motion.open, target.open, dt, timing.open);
+  motion.hover = approach(motion.hover, target.hover, dt, timing.hover);
+  motion.label = approach(motion.label, target.label, dt, timing.label);
+  motion.side = approach(motion.side, target.side, dt, timing.side);
+}
+function phaseOf(motion, state) {
+  if (state === "hidden") return motion.presence > 0 ? "leaving" : "hidden";
+  if (motion.presence < 1) return "entering";
+  if (state === "open") return motion.open < 1 ? "opening" : "open";
+  return motion.open > 0 ? "closing" : "closed";
+}
+function vector(value) {
   return value instanceof Vector3 ? value.clone() : new Vector3(value[0], value[1], value[2]);
 }
-function vec3Of(vector) {
-  return [vector.x, vector.y, vector.z];
+function vec3Of(v) {
+  return [v.x, v.y, v.z];
 }
 function createHotspot(options) {
   const {
     id,
-    label,
     parent,
+    render = false,
+    style = "orb",
     color = HOTSPOT_COLOR,
+    openColor,
+    glow = 0,
     sizing = "screen",
-    size = sizing === "screen" ? 0.012 : 0.03,
-    pulse = true
+    size = sizing === "screen" ? 0.015 : 0.03,
+    showLabel = "never",
+    labelOpacity = 0.9,
+    labelSize = 1
   } = options;
-  const radius = sizing === "screen" ? 1 : size;
-  const rig = new Group();
-  rig.name = "rig";
-  const position = toVector3(options.position);
-  const anchor = options.anchor ? toVector3(options.anchor) : void 0;
+  let label = options.label;
+  const intensity = options.intensity ?? (render ? INTENSITY[style] : 1);
+  const pulseHz = options.pulse === false ? 0 : typeof options.pulse === "number" ? Math.max(0, options.pulse) : PULSE_HZ;
+  const timing = {
+    appear: options.timing?.appear ?? 0.8,
+    open: options.timing?.open ?? 0.45,
+    label: options.timing?.label ?? 0.3,
+    hover: 0.15,
+    side: 0.35
+  };
+  const labelSide = options.labelSide ?? "auto";
+  const anchor = options.anchor ? vector(options.anchor) : void 0;
+  const anchored = anchor !== void 0;
+  const given = options.position ? vector(options.position) : void 0;
+  const direction = new Vector3();
+  if (options.direction) direction.copy(vector(options.direction));
+  else if (anchor && given) direction.copy(given).sub(anchor);
+  else direction.copy(anchored ? UP : FRONT);
+  if (direction.lengthSq() < 1e-12) direction.copy(anchored ? UP : FRONT);
+  direction.normalize();
+  let distance = options.distance ?? (anchor && given ? given.distanceTo(anchor) : anchored ? 0.1 : 0);
   const object = new Group();
   object.name = `bakery3-hotspot-${id}`;
-  object.userData.bakery3 = { exclude: true };
-  object.position.copy(position);
-  const orb = new Mesh(
-    new SphereGeometry(radius, 24, 16),
-    new MeshBasicMaterial({ color, toneMapped: false, depthTest: true })
+  if (!render) object.userData.bakery3 = { exclude: true };
+  object.position.copy(anchor ?? given ?? new Vector3());
+  const base = new Color(color);
+  const opened = openColor ? new Color(openColor) : void 0;
+  const custom = options.material;
+  const materials = [];
+  const geometries = [];
+  const materialFor = (name, preset) => {
+    let material;
+    if (typeof custom === "function")
+      material = custom({ name, color: base.clone() });
+    else if (custom && name === "core") material = custom;
+    material ??= preset();
+    if (!render) material.toneMapped = false;
+    materials.push(material);
+    return material;
+  };
+  const part = (mesh, name) => {
+    mesh.name = name;
+    if (render) mesh.userData.bakery3 = { castsShadow: false };
+    return mesh;
+  };
+  const glowing = (strength, extra = {}) => new MeshStandardMaterial({
+    // A dark base under the emission: the part reads as light, not as a lit thing.
+    color: base.clone().multiplyScalar(0.12),
+    emissive: base.clone(),
+    emissiveIntensity: strength,
+    roughness: 0.45,
+    metalness: 0,
+    ...extra
+  });
+  const sphere = () => {
+    const geometry = new SphereGeometry(1, 32, 20);
+    geometries.push(geometry);
+    return geometry;
+  };
+  const rig = new Group();
+  rig.name = "rig";
+  const head = new Group();
+  head.name = "head";
+  head.add(rig);
+  object.add(head);
+  const coreRadius = style === "glass" ? GLASS_CORE : style === "ring" ? RING_CORE : 1;
+  const core = part(
+    new Mesh(
+      sphere(),
+      materialFor(
+        "core",
+        () => style === "solid" ? new MeshStandardMaterial({
+          color: base.clone(),
+          emissive: base.clone(),
+          emissiveIntensity: intensity,
+          roughness: 0.22,
+          metalness: 0
+        }) : glowing(intensity)
+      )
+    ),
+    "core"
   );
-  orb.name = "orb";
-  rig.add(orb);
-  const halo = new Mesh(
-    new SphereGeometry(radius, 24, 16),
-    new MeshBasicMaterial({
-      color,
-      toneMapped: false,
+  rig.add(core);
+  let halo;
+  if (style === "orb") {
+    halo = part(
+      new Mesh(
+        sphere(),
+        materialFor(
+          "halo",
+          () => glowing(intensity * 0.5, {
+            color: new Color(0, 0, 0),
+            transparent: true,
+            opacity: HALO_OPACITY,
+            depthWrite: false,
+            roughness: 1
+          })
+        )
+      ),
+      "halo"
+    );
+    halo.renderOrder = 1;
+    rig.add(halo);
+  }
+  let ring;
+  if (style === "ring") {
+    const geometry = new TorusGeometry(1, RING_TUBE / RING_RADIUS, 12, 64);
+    geometries.push(geometry);
+    ring = part(
+      new Mesh(
+        geometry,
+        materialFor(
+          "ring",
+          () => glowing(intensity, { transparent: true, opacity: 0.9 })
+        )
+      ),
+      "ring"
+    );
+    rig.add(ring);
+  }
+  let shell;
+  if (style === "glass") {
+    shell = part(
+      new Mesh(
+        sphere(),
+        materialFor(
+          "shell",
+          () => new MeshPhysicalMaterial({
+            color: "#ffffff",
+            transmission: 1,
+            roughness: 0.04,
+            ior: 1.5,
+            thickness: 0.02,
+            metalness: 0,
+            specularIntensity: 1
+          })
+        )
+      ),
+      "shell"
+    );
+    rig.add(shell);
+  }
+  let tether;
+  if (anchored && options.tether !== false) {
+    const geometry = new CylinderGeometry(1, 1, 1, 10, 1, true);
+    geometry.translate(0, 0.5, 0);
+    geometries.push(geometry);
+    tether = part(
+      new Mesh(
+        geometry,
+        materialFor("tether", () => glowing(intensity * 0.6))
+      ),
+      "tether"
+    );
+    tether.quaternion.setFromUnitVectors(UP, direction);
+    object.add(tether);
+  }
+  let dot;
+  if (anchored && options.dot !== false) {
+    dot = part(
+      new Mesh(
+        sphere(),
+        materialFor("dot", () => glowing(intensity))
+      ),
+      "dot"
+    );
+    object.add(dot);
+  }
+  let labelMesh;
+  let labelMaterial;
+  let labelMap;
+  let labelAspect = 3;
+  const labelLook = () => ({
+    text: label ?? id,
+    font: options.labelFont ?? LABEL_FONT,
+    color: options.labelColor ?? "#ffffff",
+    background: options.labelBackground ?? "#0b0c12"
+  });
+  const drawLabel = () => {
+    if (!labelMesh || !labelMaterial) return;
+    const raster = rasterizeLabel(labelLook());
+    labelMap?.dispose();
+    labelMap = raster.texture;
+    labelAspect = raster.aspect;
+    labelMaterial.emissiveMap = labelMap;
+    labelMaterial.needsUpdate = true;
+    const old = labelMesh.geometry;
+    labelMesh.geometry = pillGeometry(labelAspect);
+    old.dispose();
+  };
+  if (showLabel !== "never") {
+    labelMaterial = new MeshPhysicalMaterial({
+      color: 0,
+      emissive: 16777215,
+      emissiveIntensity: render ? LABEL_GLOW : 1,
+      roughness: 1,
+      metalness: 0,
+      // No sheen of the studio across the text.
+      specularIntensity: 0,
       transparent: true,
-      opacity: HALO_OPACITY,
+      opacity: 0,
       depthWrite: false
-    })
-  );
-  halo.name = "halo";
-  halo.scale.setScalar(HALO_SCALE);
-  halo.renderOrder = 1;
-  rig.add(halo);
-  if (sizing === "screen") rig.scale.setScalar(size);
-  object.add(rig);
-  let line;
-  if (anchor) {
-    const geometry = new BufferGeometry().setFromPoints([
-      anchor.clone().sub(position),
-      new Vector3(0, 0, 0)
-    ]);
-    line = new Line(
-      geometry,
-      new LineBasicMaterial({
-        color,
-        toneMapped: false,
-        transparent: true,
-        opacity: LINE_OPACITY,
-        depthWrite: false
-      })
+    });
+    if (!render) labelMaterial.toneMapped = false;
+    materials.push(labelMaterial);
+    labelMesh = part(
+      new Mesh(pillGeometry(labelAspect), labelMaterial),
+      "label"
     );
-    line.name = "tether";
-    object.add(line);
+    labelMesh.renderOrder = 2;
+    const height = LABEL_HEIGHT * labelSize;
+    labelMesh.scale.set(height, height, 1);
+    rig.add(labelMesh);
+    drawLabel();
+    const fonts = typeof document !== "undefined" ? document.fonts : void 0;
+    const font = labelLook().font;
+    if (fonts && !fonts.check(font))
+      void fonts.load(font).then(
+        () => !disposed && drawLabel(),
+        () => void 0
+      );
+  }
+  let light;
+  if (glow > 0) {
+    light = new PointLight((opened ?? base).clone(), glow * CLOSED_GLOW, 0, 2);
+    light.name = "glow";
+    light.castShadow = false;
+    object.add(light);
   }
   parent?.add(object);
-  let selected = false;
+  let state = options.state ?? "closed";
   let hovered = false;
+  let side = labelSide === "left" ? "left" : "right";
+  let sided = labelSide !== "auto";
+  let fitted = size;
+  let facing = [0, 0, 0];
+  let eye = null;
+  let clock;
   let disposed = false;
-  const applyLook = () => {
-    const emphasis = selected ? 1.25 : hovered ? 1.1 : 1;
-    orb.scale.setScalar(emphasis);
-    orb.material.color.set(color);
-    if (selected) orb.material.color.lerp(WHITE, 0.5);
-    halo.material.opacity = selected ? HALO_OPACITY * 0.6 : hovered ? HALO_OPACITY * 1.6 : HALO_OPACITY;
-    if (line) line.material.opacity = selected || hovered ? 1 : LINE_OPACITY;
+  const targets = (next, hover, labelOn) => ({
+    presence: next === "hidden" ? 0 : 1,
+    open: next === "open" ? 1 : 0,
+    hover: hover ? 1 : 0,
+    label: labelWanted(showLabel, next, hover) ? 1 : 0,
+    side: labelOn === "left" ? 1 : 0
+  });
+  const motion = targets(state, false, side);
+  const worldScale = () => {
+    object.updateWorldMatrix(true, false);
+    object.getWorldScale(SCALE);
+    return Math.max(1e-9, (SCALE.x + SCALE.y + SCALE.z) / 3);
+  };
+  const headLocal = (extend, ws) => direction.clone().multiplyScalar(distance * extend / ws);
+  const orbRadius = (camera, headWorld) => {
+    if (sizing === "world" || !camera)
+      return sizing === "world" ? size : fitted;
+    const perspective = camera.isPerspectiveCamera === true;
+    const ortho = camera.isOrthographicCamera === true;
+    if (!perspective && !ortho) return fitted;
+    let visibleHeight;
+    if (perspective) {
+      const cam = camera;
+      camera.updateMatrixWorld();
+      camera.getWorldPosition(CAMERA);
+      camera.getWorldDirection(FORWARD);
+      const depth = Math.max(
+        1e-3,
+        WORLD.copy(headWorld).sub(CAMERA).dot(FORWARD)
+      );
+      visibleHeight = 2 * depth * Math.tan(cam.fov * Math.PI / 360);
+    } else {
+      const cam = camera;
+      visibleHeight = (cam.top - cam.bottom) / cam.zoom;
+    }
+    return Math.max(1e-6, size * visibleHeight);
+  };
+  const facingFor = (cameraQuaternion) => {
+    head.updateWorldMatrix(true, false);
+    head.getWorldQuaternion(ORIENT);
+    VIEW.copy(ORIENT).invert().multiply(cameraQuaternion);
+    EULER.setFromQuaternion(VIEW, rig.rotation.order);
+    return [EULER.x, EULER.y, EULER.z];
+  };
+  const eyeFor = (camera, headWorld, radius) => {
+    if (camera.isPerspectiveCamera !== true) return null;
+    camera.updateMatrixWorld();
+    camera.getWorldPosition(CAMERA);
+    camera.getWorldQuaternion(VIEW);
+    const local = CAMERA.sub(headWorld).applyQuaternion(VIEW.invert()).divideScalar(Math.max(radius, 1e-9));
+    return [local.x, local.y, local.z];
+  };
+  const labelGap = REACH[style] + 0.35;
+  const sideFor = (current, camera, headWorld, radius) => {
+    if (labelSide !== "auto" || !labelMesh) return current;
+    camera.updateMatrixWorld();
+    camera.getWorldQuaternion(VIEW);
+    RIGHT.set(1, 0, 0).applyQuaternion(VIEW);
+    const reach = (labelGap + LABEL_HEIGHT * labelSize * labelAspect) * radius;
+    const x = WORLD.copy(headWorld).project(camera).x;
+    const edge = EDGE.copy(headWorld).addScaledVector(RIGHT, reach).project(camera).x;
+    if (!Number.isFinite(x) || !Number.isFinite(edge)) return current;
+    return labelSideFor(current, x, Math.abs(edge - x));
+  };
+  const mixColor = (open) => opened ? base.clone().lerp(opened, open) : base;
+  const writes = (pose, frame) => {
+    const { radius, ws } = frame;
+    const out = [];
+    const emissive = (mesh, strength2, darken = 0.12) => {
+      if (!mesh) return;
+      const material = mesh.material;
+      if (typeof material.emissiveIntensity === "number")
+        out.push({
+          object: mesh,
+          property: "emissiveIntensity",
+          value: [strength2]
+        });
+      const nodes = material;
+      if (opened && material.emissive?.isColor && !nodes.emissiveNode) {
+        const c = mixColor(pose.open);
+        out.push({
+          object: mesh,
+          property: "emissive",
+          value: [c.r, c.g, c.b]
+        });
+        if (material.color?.isColor && darken > 0 && !nodes.colorNode)
+          out.push({
+            object: mesh,
+            property: "color",
+            value: [c.r * darken, c.g * darken, c.b * darken]
+          });
+      }
+    };
+    const uniform = (mesh, s) => {
+      if (!mesh) return;
+      const k = Math.max(s, FLOOR);
+      out.push({ object: mesh, property: "scale", value: [k, k, k] });
+    };
+    const rigScale = radius / ws;
+    out.push({
+      object: rig,
+      property: "scale",
+      value: [rigScale, rigScale, rigScale]
+    });
+    out.push({ object: rig, property: "rotation", value: [...frame.facing] });
+    out.push({
+      object: head,
+      property: "position",
+      value: vec3Of(headLocal(pose.extend, ws))
+    });
+    const h = pose.head;
+    const open = pose.open;
+    const hover = pose.hover;
+    const breath = pose.pulse * (1 - open);
+    const emphasis = 1 + 0.35 * open + 0.1 * hover;
+    const strength = intensity * (1 + 1.2 * open + 0.3 * hover);
+    uniform(
+      core,
+      h * coreRadius * (style === "glass" ? 1 + 0.35 * open : emphasis)
+    );
+    emissive(core, strength, style === "solid" ? 1 : 0.12);
+    if (halo) {
+      uniform(halo, h * (HALO_SCALE + HALO_PULSE * breath + 0.5 * open));
+      out.push({
+        object: halo,
+        property: "opacity",
+        value: [HALO_OPACITY * (1 + 0.6 * hover) * (1 - 0.25 * open)]
+      });
+      emissive(halo, strength * 0.5, 0);
+    }
+    if (ring) {
+      uniform(
+        ring,
+        h * RING_RADIUS * (1 + 0.45 * open + 0.12 * breath + 0.08 * hover)
+      );
+      out.push({
+        object: ring,
+        property: "opacity",
+        value: [0.9 - 0.35 * breath]
+      });
+      emissive(ring, strength);
+    }
+    if (shell) uniform(shell, h * (1 + 0.05 * hover));
+    if (labelMesh) {
+      const width = LABEL_HEIGHT * labelSize * labelAspect;
+      const slide = (1 - pose.label) * LABEL_SLIDE;
+      const left = pose.side >= 0.5;
+      const swap = Math.abs(2 * pose.side - 1);
+      const x = left ? -(labelGap + slide) - width : labelGap + slide;
+      const height = LABEL_HEIGHT * labelSize;
+      const k = frame.eye ? LABEL_LIFT : 0;
+      const [ex, ey, ez] = frame.eye ?? [0, 0, 0];
+      out.push({
+        object: labelMesh,
+        property: "position",
+        value: [x * (1 - k) + k * ex, k * ey, k * ez]
+      });
+      out.push({
+        object: labelMesh,
+        property: "scale",
+        value: [height * (1 - k), height * (1 - k), 1]
+      });
+      out.push({
+        object: labelMesh,
+        property: "opacity",
+        value: [labelOpacity * pose.label * swap]
+      });
+    }
+    if (tether) {
+      const thickness = Math.max(radius * TETHER_RADIUS / ws, 1e-9);
+      const length = Math.max(
+        distance * pose.extend / ws,
+        FLOOR * radius / ws
+      );
+      const visible = pose.extend > 0 ? 1 : FLOOR;
+      out.push({
+        object: tether,
+        property: "scale",
+        value: [thickness * visible, length, thickness * visible]
+      });
+      emissive(tether, intensity * 0.6 * (1 + 0.6 * open));
+    }
+    if (dot) {
+      uniform(dot, pose.dot * radius * DOT_RADIUS / ws);
+      emissive(dot, intensity * (1 + 0.6 * open));
+    }
+    if (light) {
+      const presence = Math.min(1, h);
+      out.push({
+        object: light,
+        property: "intensity",
+        value: [
+          Math.max(
+            LIGHT_FLOOR,
+            glow * presence * (CLOSED_GLOW + (1 - CLOSED_GLOW) * open)
+          )
+        ]
+      });
+    }
+    return out;
+  };
+  const apply = (seconds) => {
+    const ws = worldScale();
+    const pose = poseOf(motion, seconds, anchored, pulseHz);
+    const frame = {
+      radius: sizing === "world" ? size : fitted,
+      ws,
+      facing,
+      eye
+    };
+    for (const write of writes(pose, frame))
+      OBJECT_PROPERTIES[write.property].write(write.object, write.value);
+  };
+  const placeLight = () => {
+    if (light) light.position.copy(headLocal(1, worldScale()));
+  };
+  placeLight();
+  const internals = {
+    writes,
+    orbRadius,
+    facing: facingFor,
+    eye: eyeFor,
+    sideFor,
+    targets,
+    headLocal,
+    worldScale,
+    anchored,
+    pulseHz,
+    timing,
+    labelSide,
+    driven: null,
+    render
   };
   const hotspot = {
     id,
-    label,
+    get label() {
+      return label;
+    },
     object,
+    get state() {
+      return state;
+    },
+    get phase() {
+      return phaseOf(motion, state);
+    },
     get selected() {
-      return selected;
+      return state === "open";
     },
     get hovered() {
       return hovered;
     },
+    get distance() {
+      return distance;
+    },
+    get labelSide() {
+      return side;
+    },
+    get driven() {
+      return internals.driven !== null;
+    },
+    setState(next, opts = {}) {
+      state = next;
+      if (opts.instant) {
+        Object.assign(motion, targets(next, hovered, side));
+        if (!internals.driven) apply(clock ?? 0);
+      }
+    },
     setSelected(on) {
-      if (selected === on) return;
-      selected = on;
-      applyLook();
+      hotspot.setState(on ? "open" : "closed");
+    },
+    setHovered(on) {
+      hovered = on;
+    },
+    setLabel(text) {
+      label = text;
+      drawLabel();
+    },
+    setDistance(meters) {
+      distance = Math.max(0, meters);
+      placeLight();
+      if (!internals.driven) apply(clock ?? 0);
+    },
+    setDirection(next) {
+      const v = vector(next);
+      if (v.lengthSq() < 1e-12) return;
+      direction.copy(v.normalize());
+      tether?.quaternion.setFromUnitVectors(UP, direction);
+      placeLight();
+      if (!internals.driven) apply(clock ?? 0);
     },
     fit(camera) {
-      if (disposed || sizing !== "screen") return;
-      const perspective = camera.isPerspectiveCamera === true;
-      const ortho = camera.isOrthographicCamera === true;
-      if (!perspective && !ortho) return;
-      object.getWorldPosition(WORLD);
-      camera.getWorldPosition(CAMERA);
-      let visibleHeight;
-      if (perspective) {
-        const cam = camera;
-        camera.getWorldDirection(FORWARD);
-        const depth = Math.max(1e-3, WORLD.sub(CAMERA).dot(FORWARD));
-        visibleHeight = 2 * depth * Math.tan(cam.fov * Math.PI / 360);
-      } else {
-        const cam = camera;
-        visibleHeight = (cam.top - cam.bottom) / cam.zoom;
+      if (disposed || internals.driven) return;
+      const ws = worldScale();
+      object.updateWorldMatrix(true, false);
+      const headWorld = headLocal(1, ws).applyMatrix4(object.matrixWorld);
+      if (sizing === "screen") fitted = orbRadius(camera, headWorld);
+      if (typeof camera.updateMatrixWorld !== "function") return;
+      camera.updateMatrixWorld();
+      facing = facingFor(camera.getWorldQuaternion(new Quaternion()));
+      const radius = sizing === "world" ? size : fitted;
+      eye = eyeFor(camera, headWorld, radius);
+      side = sideFor(side, camera, headWorld, radius);
+      if (!sided) {
+        sided = true;
+        motion.side = side === "left" ? 1 : 0;
       }
-      rig.scale.setScalar(Math.max(1e-6, size * visibleHeight));
     },
     update(seconds) {
-      if (disposed || !pulse) return;
-      const phase = 0.5 + 0.5 * Math.sin(seconds * Math.PI * 2 * PULSE_HZ);
-      const rest = selected ? HALO_SCALE * 0.8 : HALO_SCALE;
-      halo.scale.setScalar(rest + HALO_PULSE * phase * (selected ? 0.5 : 1));
+      if (disposed || internals.driven) return;
+      const dt = clock === void 0 ? 0 : Math.max(0, seconds - clock);
+      clock = seconds;
+      step(motion, targets(state, hovered, side), dt, timing);
+      apply(seconds);
     },
     dispose() {
       if (disposed) return;
       disposed = true;
       object.removeFromParent();
-      orb.geometry.dispose();
-      orb.material.dispose();
-      halo.geometry.dispose();
-      halo.material.dispose();
-      line?.geometry.dispose();
-      line?.material.dispose();
+      for (const geometry of geometries) geometry.dispose();
+      labelMesh?.geometry.dispose();
+      for (const material of materials) material.dispose();
+      labelMap?.dispose();
+      light?.dispose();
     }
   };
   PARTS.set(hotspot, {
-    orb,
+    core,
+    orb: core,
     halo,
+    ring,
+    shell,
+    label: labelMesh,
     rig,
-    line,
-    setHovered(on) {
-      if (hovered === on) return;
-      hovered = on;
-      applyLook();
-    }
+    head,
+    tether,
+    line: tether,
+    dot,
+    light,
+    setHovered: (on) => hotspot.setHovered(on)
   });
+  INTERNALS.set(hotspot, internals);
+  apply(0);
   return hotspot;
 }
+function hotspotFromHit(hit, options = {}) {
+  const { along = "normal", center, space } = options;
+  const point = hit.point.clone();
+  const out = new Vector3();
+  if (along === "center" && center) {
+    out.copy(point).sub(center);
+  } else if (hit.face) {
+    out.copy(hit.face.normal).applyMatrix3(new Matrix3().getNormalMatrix(hit.object.matrixWorld));
+  }
+  if (along === "normal" && !hit.face && center) out.copy(point).sub(center);
+  if (out.lengthSq() < 1e-12) out.copy(UP);
+  out.normalize();
+  if (space) {
+    space.updateWorldMatrix(true, false);
+    const inverse = new Matrix4().copy(space.matrixWorld).invert();
+    const anchor = point.clone().applyMatrix4(inverse);
+    const tip = hit.point.clone().add(out).applyMatrix4(inverse);
+    return { anchor, direction: tip.sub(anchor).normalize() };
+  }
+  return { anchor: point, direction: out };
+}
 function hotspotSpecOf(hotspot) {
+  const internals = INTERNALS.get(hotspot);
+  if (!internals)
+    throw new Error(
+      "@oeave/bakery3/hotspots: that hotspot was not made by createHotspot()."
+    );
   const { object } = hotspot;
   object.updateWorldMatrix(true, false);
-  const spec = {
-    id: hotspot.id,
-    position: vec3Of(object.getWorldPosition(new Vector3()))
-  };
+  const tip = internals.headLocal(1, internals.worldScale()).applyMatrix4(object.matrixWorld);
+  const spec = { id: hotspot.id, position: vec3Of(tip) };
   if (hotspot.label !== void 0) spec.label = hotspot.label;
-  const { line } = hotspotParts(hotspot);
-  if (line) {
-    const local = new Vector3().fromBufferAttribute(
-      line.geometry.getAttribute("position"),
-      0
+  if (internals.anchored)
+    spec.anchor = vec3Of(object.getWorldPosition(new Vector3()));
+  return spec;
+}
+var OWNED = /* @__PURE__ */ new WeakMap();
+var TRANSFORMS = ["position", "rotation", "scale"];
+var idOfEvent = (event) => typeof event.hotspot === "string" ? event.hotspot : event.hotspot.id;
+function animateHotspots(timeline, hotspots, options = {}) {
+  releaseHotspots(timeline);
+  const { events = [], initial = "hidden", loop = true } = options;
+  const byId = new Map(hotspots.map((hotspot) => [hotspot.id, hotspot]));
+  for (const event of events) {
+    const id = idOfEvent(event);
+    if (!byId.has(id))
+      throw new Error(
+        `@oeave/bakery3/hotspots: an event names "${id}", which is not one of the hotspots passed to animateHotspots().`
+      );
+    if (event.state === void 0 && event.hover === void 0)
+      throw new Error(
+        `@oeave/bakery3/hotspots: the event for "${id}" at ${event.at} s changes nothing. Give it a state, a hover, or both.`
+      );
+  }
+  const fps = timeline.fps;
+  const duration = timeline.duration;
+  const frames = Math.max(1, Math.round(duration * fps));
+  const camera = timeline.camera;
+  const fovTrack = timeline.tracks.find(
+    (track) => track.target === "camera" && track.property === "fov"
+  );
+  const owned = [];
+  const views = [];
+  for (let frame = 0; frame < frames; frame++) {
+    const time = frame / fps;
+    if (!camera) {
+      views.push(void 0);
+      continue;
+    }
+    const cameraPose = timeline.cameraPoseAt(time);
+    if (!cameraPose && !fovTrack) {
+      views.push(camera);
+      continue;
+    }
+    const view = camera.clone();
+    if (cameraPose) {
+      view.position.set(...cameraPose.position);
+      view.quaternion.set(...cameraPose.quaternion);
+    }
+    const fov = fovTrack ? timeline.valueAt(fovTrack, time) : void 0;
+    if (fov && view.isPerspectiveCamera) {
+      view.fov = fov[0];
+      view.updateProjectionMatrix();
+    }
+    view.updateMatrixWorld(true);
+    views.push(view);
+  }
+  for (const hotspot of hotspots) {
+    const internals = INTERNALS.get(hotspot);
+    if (!internals)
+      throw new Error(
+        "@oeave/bakery3/hotspots: that hotspot was not made by createHotspot()."
+      );
+    if (!internals.render)
+      throw new Error(
+        `@oeave/bakery3/hotspots: hotspot "${hotspot.id}" does not render. Create it with { render: true } to play it in a video.`
+      );
+    const mine = events.filter((event) => idOfEvent(event) === hotspot.id).sort((a, b) => a.at - b.at);
+    let state = typeof initial === "string" ? initial : initial[hotspot.id] ?? "hidden";
+    let hovered = false;
+    let side = internals.labelSide === "left" ? "left" : "right";
+    let motion;
+    let now = 0;
+    let next = 0;
+    const pulseHz = loop && internals.pulseHz > 0 && duration > 0 ? Math.max(1, Math.round(internals.pulseHz * duration)) / duration : internals.pulseHz;
+    const ws = internals.worldScale();
+    hotspot.object.updateWorldMatrix(true, false);
+    const matrix = hotspot.object.matrixWorld.clone();
+    const ownTracks = [];
+    const samples = /* @__PURE__ */ new Map();
+    for (let frame = 0; frame < frames; frame++) {
+      const time = frame / fps;
+      const view = views[frame];
+      const restWorld = internals.headLocal(1, ws).applyMatrix4(matrix);
+      const restRadius = internals.orbRadius(view, restWorld);
+      if (view) side = internals.sideFor(side, view, restWorld, restRadius);
+      if (!motion) motion = internals.targets(state, hovered, side);
+      const advance = (to) => {
+        const dt = to - now;
+        if (dt <= 0) return;
+        step(
+          motion,
+          internals.targets(state, hovered, side),
+          dt,
+          internals.timing
+        );
+        now = to;
+      };
+      while (next < mine.length && mine[next].at <= time) {
+        const event = mine[next];
+        advance(Math.max(0, event.at));
+        if (event.state !== void 0) state = event.state;
+        if (event.hover !== void 0) hovered = event.hover;
+        next++;
+      }
+      advance(time);
+      const pose = poseOf(motion, time, internals.anchored, pulseHz);
+      const headWorld = internals.headLocal(pose.extend, ws).applyMatrix4(matrix);
+      const radius = internals.orbRadius(view, headWorld);
+      const facing = view ? internals.facing(view.getWorldQuaternion(new Quaternion())) : [0, 0, 0];
+      const eye = view ? internals.eye(view, headWorld, radius) : null;
+      for (const write of internals.writes(pose, { radius, ws, facing, eye })) {
+        const key = `${write.object.uuid}:${write.property}`;
+        let entry = samples.get(key);
+        if (!entry) {
+          entry = {
+            object: write.object,
+            property: write.property,
+            values: []
+          };
+          samples.set(key, entry);
+        }
+        entry.values.push(write.value);
+      }
+    }
+    for (const { object, property, values } of samples.values()) {
+      const first = values[0];
+      const constant = values.every(
+        (value) => value.every((n, i) => Math.abs(n - first[i]) < 1e-7)
+      );
+      if (constant) {
+        OBJECT_PROPERTIES[property].write(object, first);
+        continue;
+      }
+      if (property === "rotation") unwrapEulers(values);
+      const track = timeline.track(object, property);
+      track.keyframes.length = 0;
+      values.forEach(
+        (value, frame) => track.keyframes.push({
+          time: frame / fps,
+          value: value.map(short),
+          easing: "linear"
+        })
+      );
+      track.label = `${hotspot.id} \xB7 ${object.name} ${property}`;
+      owned.push(track);
+      ownTracks.push(track);
+    }
+    const moving = new Set(
+      ownTracks.filter((track) => TRANSFORMS.includes(track.property)).map((track) => track.target)
     );
-    spec.anchor = vec3Of(object.localToWorld(local));
+    const underMoving = (node) => {
+      for (let up = node.parent; up && up !== hotspot.object; up = up.parent)
+        if (moving.has(up)) return true;
+      return false;
+    };
+    const parts = hotspotParts(hotspot);
+    const nodes = [
+      parts.head,
+      parts.rig,
+      parts.core,
+      parts.halo,
+      parts.ring,
+      parts.shell,
+      parts.label,
+      parts.tether,
+      parts.dot
+    ].filter(
+      (node) => node !== void 0 && underMoving(node)
+    );
+    for (const node of nodes)
+      for (const property of TRANSFORMS) {
+        if (ownTracks.some((t) => t.target === node && t.property === property))
+          continue;
+        const value = OBJECT_PROPERTIES[property].read(node).map(short);
+        const track = timeline.track(node, property);
+        track.keyframes.length = 0;
+        track.keyframes.push(
+          { time: 0, value: [...value], easing: "linear" },
+          { time: duration, value: [...value], easing: "linear" }
+        );
+        track.label = `${hotspot.id} \xB7 ${node.name} ${property}`;
+        owned.push(track);
+        ownTracks.push(track);
+      }
+    internals.driven = timeline;
+  }
+  OWNED.set(timeline, { tracks: owned, hotspots });
+  timeline.duration = timeline.duration;
+  timeline.seek(timeline.time);
+  return {
+    tracks: owned.length,
+    release: () => releaseHotspots(timeline)
+  };
+}
+var short = (n) => Number(n.toPrecision(6));
+function unwrapEulers(values) {
+  for (let i = 1; i < values.length; i++) {
+    const previous = values[i - 1];
+    const current = values[i];
+    for (let axis = 0; axis < 3; axis++) {
+      let angle = current[axis];
+      while (angle - previous[axis] > Math.PI) angle -= Math.PI * 2;
+      while (angle - previous[axis] < -Math.PI) angle += Math.PI * 2;
+      current[axis] = angle;
+    }
+  }
+}
+function releaseHotspots(timeline) {
+  const owned = OWNED.get(timeline);
+  if (!owned) return;
+  OWNED.delete(timeline);
+  for (const track of owned.tracks) {
+    if (timeline.tracks.includes(track)) timeline.removeTrack(track.id);
+  }
+  for (const hotspot of owned.hotspots) {
+    const internals = INTERNALS.get(hotspot);
+    if (internals?.driven === timeline) internals.driven = null;
   }
-  return spec;
 }
 var CLICK_SLOP_PX = 6;
 function attachHotspots(options) {
@@ -188,11 +1077,11 @@ function attachHotspots(options) {
   const pointer = new Vector2();
   const targets = /* @__PURE__ */ new Map();
   for (const hotspot of hotspots) {
-    const { orb, halo } = hotspotParts(hotspot);
-    targets.set(orb, hotspot);
-    targets.set(halo, hotspot);
+    const { core, halo, ring, shell, label } = hotspotParts(hotspot);
+    for (const mesh of [core, halo, ring, shell, label])
+      if (mesh) targets.set(mesh, hotspot);
   }
-  let selected = null;
+  let selected = hotspots.find((hotspot) => hotspot.state === "open") ?? null;
   let hovered = null;
   let downAt = null;
   let previousCursor = null;
@@ -207,15 +1096,18 @@ function attachHotspots(options) {
     const hits = raycaster.intersectObjects([...targets.keys()], false);
     for (const hit of hits) {
       const hotspot = targets.get(hit.object);
-      if (hotspot && hotspot.object.visible) return hotspot;
+      if (hit.object === hotspotParts(hotspot).label && hit.object.material.opacity < 0.05)
+        continue;
+      if (hotspot && hotspot.object.visible && hotspot.state !== "hidden")
+        return hotspot;
     }
     return null;
   };
   const setHovered = (next) => {
     if (next === hovered) return;
-    if (hovered) hotspotParts(hovered).setHovered(false);
+    hovered?.setHovered(false);
     hovered = next;
-    if (hovered) hotspotParts(hovered).setHovered(true);
+    hovered?.setHovered(true);
     if (hovered) {
       if (previousCursor === null) previousCursor = domElement.style.cursor;
       domElement.style.cursor = "pointer";
@@ -232,7 +1124,10 @@ function attachHotspots(options) {
     selected?.setSelected(true);
     onSelect?.(selected);
   };
-  const onPointerMove = (event) => setHovered(pick(event));
+  const onPointerMove = (event) => {
+    if (event.pointerType === "touch") return;
+    setHovered(pick(event));
+  };
   const onPointerLeave = () => setHovered(null);
   const onPointerDown = (event) => {
     if (event.button !== 0) return;
@@ -280,6 +1175,6 @@ function attachHotspots(options) {
   };
 }
 
-export { attachHotspots, createHotspot, hotspotSpecOf };
+export { animateHotspots, attachHotspots, createHotspot, hotspotFromHit, hotspotSpecOf, releaseHotspots };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map