3d-spinner 0.9.1 → 0.9.2

package/dist/umd/spinner.global.js

@@ -0,0 +1,2408 @@
+var Spinner3D = (() => {
+  var __defProp = Object.defineProperty;
+  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+  var __getOwnPropNames = Object.getOwnPropertyNames;
+  var __hasOwnProp = Object.prototype.hasOwnProperty;
+  var __esm = (fn, res, err) => function __init() {
+    if (err) throw err[0];
+    try {
+      return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+    } catch (e) {
+      throw err = [e], e;
+    }
+  };
+  var __export = (target, all) => {
+    for (var name in all)
+      __defProp(target, name, { get: all[name], enumerable: true });
+  };
+  var __copyProps = (to, from, except, desc) => {
+    if (from && typeof from === "object" || typeof from === "function") {
+      for (let key of __getOwnPropNames(from))
+        if (!__hasOwnProp.call(to, key) && key !== except)
+          __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+    }
+    return to;
+  };
+  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+  // src/engines/little-3d-engine/core/math.ts
+  function vec3(x, y, z) {
+    return { x, y, z };
+  }
+  function subtract(a, b) {
+    return { x: a.x - b.x, y: a.y - b.y, z: a.z - b.z };
+  }
+  function cross(a, b) {
+    return {
+      x: a.y * b.z - a.z * b.y,
+      y: a.z * b.x - a.x * b.z,
+      z: a.x * b.y - a.y * b.x
+    };
+  }
+  function dot(a, b) {
+    return a.x * b.x + a.y * b.y + a.z * b.z;
+  }
+  function scale(v, s) {
+    return { x: v.x * s, y: v.y * s, z: v.z * s };
+  }
+  function normalize(v) {
+    const length = Math.hypot(v.x, v.y, v.z);
+    if (length === 0) return { x: 0, y: 0, z: 0 };
+    return { x: v.x / length, y: v.y / length, z: v.z / length };
+  }
+  function multiply(a, b) {
+    const out = new Array(16);
+    for (let col = 0; col < 4; col++) {
+      for (let row = 0; row < 4; row++) {
+        let sum = 0;
+        for (let k = 0; k < 4; k++) {
+          sum += a[k * 4 + row] * b[col * 4 + k];
+        }
+        out[col * 4 + row] = sum;
+      }
+    }
+    return out;
+  }
+  function translation(x, y, z) {
+    return [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, x, y, z, 1];
+  }
+  function scaleMatrix(s) {
+    return [s, 0, 0, 0, 0, s, 0, 0, 0, 0, s, 0, 0, 0, 0, 1];
+  }
+  function rotationX(rad) {
+    const c = Math.cos(rad);
+    const s = Math.sin(rad);
+    return [1, 0, 0, 0, 0, c, s, 0, 0, -s, c, 0, 0, 0, 0, 1];
+  }
+  function rotationY(rad) {
+    const c = Math.cos(rad);
+    const s = Math.sin(rad);
+    return [c, 0, -s, 0, 0, 1, 0, 0, s, 0, c, 0, 0, 0, 0, 1];
+  }
+  function rotationZ(rad) {
+    const c = Math.cos(rad);
+    const s = Math.sin(rad);
+    return [c, s, 0, 0, -s, c, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1];
+  }
+  function perspective(fovY, aspect, near, far) {
+    const f = 1 / Math.tan(fovY / 2);
+    const nf = 1 / (near - far);
+    return [
+      f / aspect,
+      0,
+      0,
+      0,
+      0,
+      f,
+      0,
+      0,
+      0,
+      0,
+      (far + near) * nf,
+      -1,
+      0,
+      0,
+      2 * far * near * nf,
+      0
+    ];
+  }
+  function transformPoint(m, p) {
+    const x = m[0] * p.x + m[4] * p.y + m[8] * p.z + m[12];
+    const y = m[1] * p.x + m[5] * p.y + m[9] * p.z + m[13];
+    const z = m[2] * p.x + m[6] * p.y + m[10] * p.z + m[14];
+    const w = m[3] * p.x + m[7] * p.y + m[11] * p.z + m[15] || 1;
+    return { x: x / w, y: y / w, z: z / w };
+  }
+  function transformAffine(m, p) {
+    return {
+      x: m[0] * p.x + m[4] * p.y + m[8] * p.z + m[12],
+      y: m[1] * p.x + m[5] * p.y + m[9] * p.z + m[13],
+      z: m[2] * p.x + m[6] * p.y + m[10] * p.z + m[14]
+    };
+  }
+  var init_math = __esm({
+    "src/engines/little-3d-engine/core/math.ts"() {
+      "use strict";
+    }
+  });
+
+  // src/engines/little-3d-engine/core/geometry.ts
+  function parseColor(color) {
+    const hex = color.trim().replace("#", "");
+    const full = hex.length === 3 ? hex.split("").map((c) => c + c).join("") : hex;
+    const n = parseInt(full, 16);
+    return [n >> 16 & 255, n >> 8 & 255, n & 255];
+  }
+  function expandToTriangles(mesh) {
+    let triangles = 0;
+    for (const face of mesh.faces) triangles += Math.max(0, face.indices.length - 2);
+    const positions = new Float32Array(triangles * 9);
+    const normals = new Float32Array(triangles * 9);
+    const colors = new Float32Array(triangles * 9);
+    let o = 0;
+    for (const face of mesh.faces) {
+      const v0 = mesh.vertices[face.indices[0]];
+      const v1 = mesh.vertices[face.indices[1]];
+      const v2 = mesh.vertices[face.indices[2]];
+      const normal = normalize(cross(subtract(v1, v0), subtract(v2, v0)));
+      const [r, g, b] = parseColor(face.color);
+      const cr = r / 255;
+      const cg = g / 255;
+      const cb = b / 255;
+      for (let k = 1; k < face.indices.length - 1; k++) {
+        const tri = [face.indices[0], face.indices[k], face.indices[k + 1]];
+        for (const index of tri) {
+          const v = mesh.vertices[index];
+          positions[o] = v.x;
+          positions[o + 1] = v.y;
+          positions[o + 2] = v.z;
+          normals[o] = normal.x;
+          normals[o + 1] = normal.y;
+          normals[o + 2] = normal.z;
+          colors[o] = cr;
+          colors[o + 1] = cg;
+          colors[o + 2] = cb;
+          o += 3;
+        }
+      }
+    }
+    return { positions, normals, colors, count: positions.length / 3 };
+  }
+  function midpoint(a, b) {
+    return { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2, z: (a.z + b.z) / 2 };
+  }
+  function sphereFromTriangles(seedVertices, seedFaces, size, detail, colors) {
+    const radius = size / 2;
+    let triangles = seedFaces.map((f) => f.map((i) => normalize(seedVertices[i])));
+    const levels = Math.max(0, Math.floor(detail) - 1);
+    for (let level = 0; level < levels; level++) {
+      const next = [];
+      for (const [a, b, c] of triangles) {
+        const ab = normalize(midpoint(a, b));
+        const bc = normalize(midpoint(b, c));
+        const ca = normalize(midpoint(c, a));
+        next.push([a, ab, ca], [b, bc, ab], [c, ca, bc], [ab, bc, ca]);
+      }
+      triangles = next;
+    }
+    const vertices = [];
+    const faces = triangles.map((tri, i) => {
+      const base = vertices.length;
+      vertices.push(scale(tri[0], radius), scale(tri[1], radius), scale(tri[2], radius));
+      return { indices: [base, base + 1, base + 2], color: colors[i % colors.length] };
+    });
+    return { vertices, faces };
+  }
+  var init_geometry = __esm({
+    "src/engines/little-3d-engine/core/geometry.ts"() {
+      "use strict";
+      init_math();
+    }
+  });
+
+  // src/engines/little-3d-engine/core/light.ts
+  function clamp012(value) {
+    return Math.min(1, Math.max(0, value));
+  }
+  function shadeColor(normal, color, light) {
+    const lambert = Math.max(0, dot(normal, light.toLight));
+    const brightness = clamp012(light.ambient + light.intensity * lambert);
+    const [r, g, b] = parseColor(color);
+    return `rgb(${Math.round(r * brightness)}, ${Math.round(g * brightness)}, ${Math.round(
+      b * brightness
+    )})`;
+  }
+  var DEFAULTS2, Light;
+  var init_light = __esm({
+    "src/engines/little-3d-engine/core/light.ts"() {
+      "use strict";
+      init_math();
+      init_geometry();
+      DEFAULTS2 = {
+        direction: { x: -0.4, y: -0.7, z: -0.6 },
+        intensity: 0.85,
+        ambient: 0.25
+      };
+      Light = class {
+        constructor(options) {
+          this.options = { ...DEFAULTS2, ...options };
+          this.params = {
+            toLight: normalize(scale(this.options.direction, -1)),
+            intensity: this.options.intensity,
+            ambient: this.options.ambient
+          };
+        }
+        /** Convenience wrapper around {@link shadeColor} using this light. */
+        shade(normal, color) {
+          return shadeColor(normal, color, this.params);
+        }
+      };
+    }
+  });
+
+  // src/engines/little-3d-engine/renderers/webgl.ts
+  var webgl_exports = {};
+  __export(webgl_exports, {
+    WebGLRenderer: () => WebGLRenderer
+  });
+  function compile(gl, type, source) {
+    const shader = gl.createShader(type);
+    gl.shaderSource(shader, source);
+    gl.compileShader(shader);
+    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+      throw new Error(`3d-spinner: shader compile failed: ${gl.getShaderInfoLog(shader)}`);
+    }
+    return shader;
+  }
+  function link(gl) {
+    const program = gl.createProgram();
+    gl.attachShader(program, compile(gl, gl.VERTEX_SHADER, VERTEX_SHADER));
+    gl.attachShader(program, compile(gl, gl.FRAGMENT_SHADER, FRAGMENT_SHADER));
+    gl.linkProgram(program);
+    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+      throw new Error(`3d-spinner: program link failed: ${gl.getProgramInfoLog(program)}`);
+    }
+    return program;
+  }
+  var VERTEX_SHADER, FRAGMENT_SHADER, WebGLRenderer;
+  var init_webgl = __esm({
+    "src/engines/little-3d-engine/renderers/webgl.ts"() {
+      "use strict";
+      init_geometry();
+      init_renderer();
+      VERTEX_SHADER = `#version 300 es
+in vec3 aPos;
+in vec3 aNormal;
+in vec3 aColor;
+uniform mat4 uViewProj;
+uniform mat4 uModel;
+out vec3 vNormal;
+out vec3 vColor;
+void main() {
+  vNormal = mat3(uModel) * aNormal;
+  vColor = aColor;
+  gl_Position = uViewProj * uModel * vec4(aPos, 1.0);
+}`;
+      FRAGMENT_SHADER = `#version 300 es
+precision mediump float;
+in vec3 vNormal;
+in vec3 vColor;
+uniform vec3 uToLight;
+uniform float uIntensity;
+uniform float uAmbient;
+uniform float uOpacity;
+out vec4 fragColor;
+void main() {
+  float lambert = max(dot(normalize(vNormal), normalize(uToLight)), 0.0);
+  float brightness = clamp(uAmbient + uIntensity * lambert, 0.0, 1.0);
+  fragColor = vec4(vColor * brightness, uOpacity);
+}`;
+      WebGLRenderer = class {
+        constructor(options = {}) {
+          this.cache = /* @__PURE__ */ new Map();
+          if (options.background) {
+            const [r, g, b] = parseColor(options.background);
+            this.clearColor = [r / 255, g / 255, b / 255, 1];
+          } else {
+            this.clearColor = [0, 0, 0, 0];
+          }
+        }
+        init(canvas) {
+          const gl = canvas.getContext("webgl2");
+          if (!gl) throw new Error("3d-spinner: WebGL2 is not supported in this browser.");
+          this.gl = gl;
+          this.program = link(gl);
+          this.locations = {
+            aPos: gl.getAttribLocation(this.program, "aPos"),
+            aNormal: gl.getAttribLocation(this.program, "aNormal"),
+            aColor: gl.getAttribLocation(this.program, "aColor"),
+            uViewProj: gl.getUniformLocation(this.program, "uViewProj"),
+            uModel: gl.getUniformLocation(this.program, "uModel"),
+            uToLight: gl.getUniformLocation(this.program, "uToLight"),
+            uIntensity: gl.getUniformLocation(this.program, "uIntensity"),
+            uAmbient: gl.getUniformLocation(this.program, "uAmbient"),
+            uOpacity: gl.getUniformLocation(this.program, "uOpacity")
+          };
+          gl.enable(gl.DEPTH_TEST);
+          gl.enable(gl.CULL_FACE);
+          gl.cullFace(gl.BACK);
+          gl.frontFace(gl.CCW);
+        }
+        resize() {
+          const gl = this.gl;
+          if (!gl) return;
+          const canvas = gl.canvas;
+          gl.viewport(0, 0, canvas.width, canvas.height);
+        }
+        buffers(mesh) {
+          const cached = this.cache.get(mesh);
+          if (cached) return cached;
+          const gl = this.gl;
+          const loc = this.locations;
+          const data = expandToTriangles(mesh);
+          const vao = gl.createVertexArray();
+          gl.bindVertexArray(vao);
+          const attribute = (location, array) => {
+            if (location < 0) return;
+            const buffer = gl.createBuffer();
+            gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+            gl.bufferData(gl.ARRAY_BUFFER, array, gl.STATIC_DRAW);
+            gl.enableVertexAttribArray(location);
+            gl.vertexAttribPointer(location, 3, gl.FLOAT, false, 0, 0);
+          };
+          attribute(loc.aPos, data.positions);
+          attribute(loc.aNormal, data.normals);
+          attribute(loc.aColor, data.colors);
+          gl.bindVertexArray(null);
+          const result = { vao, count: data.count };
+          this.cache.set(mesh, result);
+          return result;
+        }
+        render(frame) {
+          const gl = this.gl;
+          const loc = this.locations;
+          if (!gl || !this.program || !loc) return;
+          gl.clearColor(...this.clearColor);
+          gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+          gl.useProgram(this.program);
+          gl.uniformMatrix4fv(loc.uViewProj, false, new Float32Array(frame.viewProjection));
+          gl.uniform3f(loc.uToLight, frame.light.toLight.x, frame.light.toLight.y, frame.light.toLight.z);
+          gl.uniform1f(loc.uIntensity, frame.light.intensity);
+          gl.uniform1f(loc.uAmbient, frame.light.ambient);
+          gl.disable(gl.BLEND);
+          gl.depthMask(true);
+          gl.cullFace(gl.BACK);
+          for (const item of frame.items) {
+            if (item.transparency) continue;
+            const mesh = this.buffers(item.mesh);
+            gl.uniformMatrix4fv(loc.uModel, false, new Float32Array(item.model));
+            gl.uniform1f(loc.uOpacity, 1);
+            gl.bindVertexArray(mesh.vao);
+            gl.drawArrays(gl.TRIANGLES, 0, mesh.count);
+          }
+          gl.enable(gl.BLEND);
+          gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+          gl.depthMask(false);
+          for (const item of frame.items) {
+            const transparency = item.transparency;
+            if (!transparency) continue;
+            const mesh = this.buffers(item.mesh);
+            gl.uniformMatrix4fv(loc.uModel, false, new Float32Array(item.model));
+            gl.bindVertexArray(mesh.vao);
+            if (transparency.mode === "two-sided") {
+              const resolved = resolveTwoSidedOpacity(transparency);
+              gl.cullFace(gl.FRONT);
+              gl.uniform1f(loc.uOpacity, resolved.back);
+              gl.drawArrays(gl.TRIANGLES, 0, mesh.count);
+              gl.cullFace(gl.BACK);
+              gl.uniform1f(loc.uOpacity, resolved.front);
+              gl.drawArrays(gl.TRIANGLES, 0, mesh.count);
+            } else {
+              gl.cullFace(gl.BACK);
+              gl.uniform1f(loc.uOpacity, opacity(transparency.opacity, DEFAULT_ONE_SIDED_OPACITY));
+              gl.drawArrays(gl.TRIANGLES, 0, mesh.count);
+            }
+          }
+          gl.depthMask(true);
+          gl.disable(gl.BLEND);
+          gl.cullFace(gl.BACK);
+          gl.bindVertexArray(null);
+        }
+        destroy() {
+          const gl = this.gl;
+          if (gl) {
+            for (const mesh of this.cache.values()) gl.deleteVertexArray(mesh.vao);
+            if (this.program) gl.deleteProgram(this.program);
+          }
+          this.cache.clear();
+          this.gl = void 0;
+          this.program = void 0;
+          this.locations = void 0;
+        }
+      };
+    }
+  });
+
+  // src/engines/little-3d-engine/renderers/webgpu.ts
+  var webgpu_exports = {};
+  __export(webgpu_exports, {
+    WebGPURenderer: () => WebGPURenderer
+  });
+  var WGSL, CLIP_Z_FIX, UNIFORM_STRIDE, WebGPURenderer;
+  var init_webgpu = __esm({
+    "src/engines/little-3d-engine/renderers/webgpu.ts"() {
+      "use strict";
+      init_geometry();
+      init_math();
+      init_renderer();
+      WGSL = `
+struct Uniforms {
+  viewProj: mat4x4<f32>,
+  model: mat4x4<f32>,
+  toLight: vec4<f32>,
+  params: vec4<f32>,
+};
+@group(0) @binding(0) var<uniform> u: Uniforms;
+
+struct VSOut {
+  @builtin(position) position: vec4<f32>,
+  @location(0) normal: vec3<f32>,
+  @location(1) color: vec3<f32>,
+};
+
+@vertex
+fn vs(@location(0) pos: vec3<f32>, @location(1) normal: vec3<f32>, @location(2) color: vec3<f32>) -> VSOut {
+  var out: VSOut;
+  let m = mat3x3<f32>(u.model[0].xyz, u.model[1].xyz, u.model[2].xyz);
+  out.normal = m * normal;
+  out.color = color;
+  out.position = u.viewProj * u.model * vec4<f32>(pos, 1.0);
+  return out;
+}
+
+@fragment
+fn fs(in: VSOut) -> @location(0) vec4<f32> {
+  let lambert = max(dot(normalize(in.normal), normalize(u.toLight.xyz)), 0.0);
+  let brightness = clamp(u.params.y + u.params.x * lambert, 0.0, 1.0);
+  return vec4<f32>(in.color * brightness, u.params.z);
+}
+`;
+      CLIP_Z_FIX = [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0.5, 0, 0, 0, 0.5, 1];
+      UNIFORM_STRIDE = 256;
+      WebGPURenderer = class {
+        constructor(options = {}) {
+          this.uniformCapacity = 0;
+          this.depthSize = "";
+          this.destroyed = false;
+          this.cache = /* @__PURE__ */ new Map();
+          if (options.background) {
+            const [r, g, b] = parseColor(options.background);
+            this.clearValue = { r: r / 255, g: g / 255, b: b / 255, a: 1 };
+            this.alphaMode = "opaque";
+          } else {
+            this.clearValue = { r: 0, g: 0, b: 0, a: 0 };
+            this.alphaMode = "premultiplied";
+          }
+        }
+        async init(canvas) {
+          const gpu = navigator.gpu;
+          if (!gpu) throw new Error("3d-spinner: WebGPU is not supported in this browser.");
+          const adapter = await gpu.requestAdapter();
+          if (!adapter) throw new Error("3d-spinner: no WebGPU adapter is available.");
+          const device = await adapter.requestDevice();
+          if (this.destroyed) {
+            device.destroy?.();
+            return;
+          }
+          const context = canvas.getContext("webgpu");
+          if (!context) throw new Error("3d-spinner: could not get a WebGPU canvas context.");
+          const format = gpu.getPreferredCanvasFormat();
+          context.configure({ device, format, alphaMode: this.alphaMode });
+          const module = device.createShaderModule({ code: WGSL });
+          const stage = globalThis.GPUShaderStage;
+          const layout = device.createBindGroupLayout({
+            entries: [
+              {
+                binding: 0,
+                visibility: stage.VERTEX | stage.FRAGMENT,
+                buffer: { type: "uniform", hasDynamicOffset: true, minBindingSize: 160 }
+              }
+            ]
+          });
+          const vertexBuffer = (location) => ({
+            arrayStride: 12,
+            attributes: [{ shaderLocation: location, offset: 0, format: "float32x3" }]
+          });
+          const pipelineLayout = device.createPipelineLayout({ bindGroupLayouts: [layout] });
+          const blend = {
+            color: {
+              srcFactor: "src-alpha",
+              dstFactor: "one-minus-src-alpha",
+              operation: "add"
+            },
+            alpha: { srcFactor: "one", dstFactor: "one-minus-src-alpha", operation: "add" }
+          };
+          const pipeline = (cullMode, transparent) => device.createRenderPipeline({
+            layout: pipelineLayout,
+            vertex: {
+              module,
+              entryPoint: "vs",
+              buffers: [vertexBuffer(0), vertexBuffer(1), vertexBuffer(2)]
+            },
+            fragment: {
+              module,
+              entryPoint: "fs",
+              targets: [{ format, ...transparent ? { blend } : {} }]
+            },
+            primitive: { topology: "triangle-list", cullMode, frontFace: "ccw" },
+            depthStencil: {
+              format: "depth24plus",
+              depthWriteEnabled: !transparent,
+              depthCompare: "less"
+            }
+          });
+          this.pipeline = pipeline("back", false);
+          this.transparentBackPipeline = pipeline("front", true);
+          this.transparentFrontPipeline = pipeline("back", true);
+          this.canvas = canvas;
+          this.device = device;
+          this.context = context;
+        }
+        resize() {
+          this.ensureDepth();
+        }
+        ensureDepth() {
+          const canvas = this.canvas;
+          if (!this.device || !canvas) return;
+          const width = Math.max(1, canvas.width);
+          const height = Math.max(1, canvas.height);
+          const key = `${width}x${height}`;
+          if (key === this.depthSize && this.depthTexture) return;
+          this.depthTexture?.destroy?.();
+          this.depthTexture = this.device.createTexture({
+            size: { width, height },
+            format: "depth24plus",
+            usage: globalThis.GPUTextureUsage.RENDER_ATTACHMENT
+          });
+          this.depthSize = key;
+        }
+        buffers(mesh) {
+          const cached = this.cache.get(mesh);
+          if (cached) return cached;
+          const data = expandToTriangles(mesh);
+          const usage = globalThis.GPUBufferUsage.VERTEX | globalThis.GPUBufferUsage.COPY_DST;
+          const upload = (array) => {
+            const buffer = this.device.createBuffer({ size: array.byteLength, usage });
+            this.device.queue.writeBuffer(buffer, 0, array);
+            return buffer;
+          };
+          const result = {
+            position: upload(data.positions),
+            normal: upload(data.normals),
+            color: upload(data.colors),
+            count: data.count
+          };
+          this.cache.set(mesh, result);
+          return result;
+        }
+        ensureUniformCapacity(draws) {
+          if (draws <= this.uniformCapacity && this.uniformBuffer) return;
+          this.uniformBuffer?.destroy?.();
+          this.uniformBuffer = this.device.createBuffer({
+            size: Math.max(1, draws) * UNIFORM_STRIDE,
+            usage: globalThis.GPUBufferUsage.UNIFORM | globalThis.GPUBufferUsage.COPY_DST
+          });
+          this.uniformCapacity = draws;
+        }
+        render(frame) {
+          if (this.destroyed || !this.device || !this.context || !this.pipeline) return;
+          if (frame.width === 0 || frame.height === 0 || frame.items.length === 0) return;
+          this.ensureDepth();
+          const draws = [];
+          for (const item of frame.items) {
+            if (!item.transparency) draws.push({ item, opacity: 1, pipeline: this.pipeline });
+          }
+          for (const item of frame.items) {
+            const transparency = item.transparency;
+            if (!transparency) continue;
+            if (transparency.mode === "two-sided") {
+              const resolved = resolveTwoSidedOpacity(transparency);
+              draws.push({
+                item,
+                opacity: resolved.back,
+                pipeline: this.transparentBackPipeline
+              });
+              draws.push({
+                item,
+                opacity: resolved.front,
+                pipeline: this.transparentFrontPipeline
+              });
+            } else {
+              draws.push({
+                item,
+                opacity: opacity(transparency.opacity, DEFAULT_ONE_SIDED_OPACITY),
+                pipeline: this.transparentFrontPipeline
+              });
+            }
+          }
+          this.ensureUniformCapacity(draws.length);
+          const viewProj = multiply(CLIP_Z_FIX, frame.viewProjection);
+          const layout = this.pipeline.getBindGroupLayout(0);
+          const bindGroup = this.device.createBindGroup({
+            layout,
+            entries: [
+              { binding: 0, resource: { buffer: this.uniformBuffer, offset: 0, size: 160 } }
+            ]
+          });
+          draws.forEach((draw, i) => {
+            const data = new Float32Array(UNIFORM_STRIDE / 4);
+            data.set(viewProj, 0);
+            data.set(draw.item.model, 16);
+            data.set([frame.light.toLight.x, frame.light.toLight.y, frame.light.toLight.z, 0], 32);
+            data.set([frame.light.intensity, frame.light.ambient, draw.opacity, 0], 36);
+            this.device.queue.writeBuffer(this.uniformBuffer, i * UNIFORM_STRIDE, data);
+          });
+          const encoder = this.device.createCommandEncoder();
+          const pass = encoder.beginRenderPass({
+            colorAttachments: [
+              {
+                view: this.context.getCurrentTexture().createView(),
+                clearValue: this.clearValue,
+                loadOp: "clear",
+                storeOp: "store"
+              }
+            ],
+            depthStencilAttachment: {
+              view: this.depthTexture.createView(),
+              depthClearValue: 1,
+              depthLoadOp: "clear",
+              depthStoreOp: "store"
+            }
+          });
+          draws.forEach((draw, i) => {
+            const mesh = this.buffers(draw.item.mesh);
+            pass.setPipeline(draw.pipeline);
+            pass.setBindGroup(0, bindGroup, [i * UNIFORM_STRIDE]);
+            pass.setVertexBuffer(0, mesh.position);
+            pass.setVertexBuffer(1, mesh.normal);
+            pass.setVertexBuffer(2, mesh.color);
+            pass.draw(mesh.count);
+          });
+          pass.end();
+          this.device.queue.submit([encoder.finish()]);
+        }
+        destroy() {
+          this.destroyed = true;
+          for (const mesh of this.cache.values()) {
+            mesh.position.destroy?.();
+            mesh.normal.destroy?.();
+            mesh.color.destroy?.();
+          }
+          this.cache.clear();
+          this.uniformBuffer?.destroy?.();
+          this.depthTexture?.destroy?.();
+          this.device?.destroy?.();
+          this.device = void 0;
+          this.context = void 0;
+          this.pipeline = void 0;
+          this.transparentBackPipeline = void 0;
+          this.transparentFrontPipeline = void 0;
+          this.uniformBuffer = void 0;
+          this.depthTexture = void 0;
+          this.canvas = void 0;
+        }
+      };
+    }
+  });
+
+  // src/engines/little-3d-engine/renderers/canvas2d.ts
+  var canvas2d_exports = {};
+  __export(canvas2d_exports, {
+    Canvas2DRenderer: () => Canvas2DRenderer
+  });
+  var Canvas2DRenderer;
+  var init_canvas2d = __esm({
+    "src/engines/little-3d-engine/renderers/canvas2d.ts"() {
+      "use strict";
+      init_light();
+      init_math();
+      init_renderer();
+      Canvas2DRenderer = class {
+        constructor(options = {}) {
+          this.options = options;
+          this.dpr = 1;
+        }
+        init(canvas) {
+          this.ctx = canvas.getContext("2d") ?? void 0;
+        }
+        resize(_cssWidth, _cssHeight, dpr) {
+          this.dpr = dpr;
+          this.ctx?.setTransform(dpr, 0, 0, dpr, 0, 0);
+        }
+        render(frame) {
+          const ctx = this.ctx;
+          if (!ctx) return;
+          if (this.options.background) {
+            ctx.fillStyle = this.options.background;
+            ctx.fillRect(0, 0, frame.width, frame.height);
+          } else {
+            ctx.clearRect(0, 0, frame.width, frame.height);
+          }
+          const polygons = [];
+          for (const item of frame.items) {
+            const world = item.mesh.vertices.map((v) => transformAffine(item.model, v));
+            const twoSidedOpacity = item.transparency?.mode === "two-sided" ? resolveTwoSidedOpacity(item.transparency) : void 0;
+            for (const face of item.mesh.faces) {
+              const a = world[face.indices[0]];
+              const b = world[face.indices[1]];
+              const c = world[face.indices[2]];
+              const normal = normalize(cross(subtract(b, a), subtract(c, a)));
+              const frontFacing = dot(normal, subtract(frame.eye, a)) > 0;
+              const transparency = item.transparency;
+              if (!frontFacing && transparency?.mode !== "two-sided") continue;
+              let faceOpacity = 1;
+              if (transparency?.mode === "one-sided") {
+                faceOpacity = opacity(transparency.opacity, DEFAULT_ONE_SIDED_OPACITY);
+              } else if (twoSidedOpacity) {
+                faceOpacity = frontFacing ? twoSidedOpacity.front : twoSidedOpacity.back;
+              }
+              const points = face.indices.map((i) => {
+                const ndc = transformPoint(frame.viewProjection, world[i]);
+                return {
+                  x: (ndc.x * 0.5 + 0.5) * frame.width,
+                  y: (1 - (ndc.y * 0.5 + 0.5)) * frame.height
+                };
+              });
+              let depth = 0;
+              for (const i of face.indices) {
+                const d = subtract(world[i], frame.eye);
+                depth += dot(d, d);
+              }
+              depth /= face.indices.length;
+              polygons.push({
+                points,
+                color: shadeColor(normal, face.color, frame.light),
+                depth,
+                opacity: faceOpacity
+              });
+            }
+          }
+          polygons.sort((p, q) => q.depth - p.depth);
+          for (const poly of polygons) {
+            if (poly.points.length < 3) continue;
+            ctx.beginPath();
+            ctx.moveTo(poly.points[0].x, poly.points[0].y);
+            for (let i = 1; i < poly.points.length; i++) {
+              ctx.lineTo(poly.points[i].x, poly.points[i].y);
+            }
+            ctx.closePath();
+            ctx.fillStyle = poly.color;
+            ctx.strokeStyle = poly.color;
+            ctx.lineWidth = 1;
+            ctx.globalAlpha = poly.opacity;
+            ctx.fill();
+            ctx.stroke();
+          }
+          ctx.globalAlpha = 1;
+        }
+        destroy() {
+          this.ctx = void 0;
+        }
+      };
+    }
+  });
+
+  // src/engines/little-3d-engine/renderer.ts
+  function opacity(value, fallback) {
+    return Math.max(0, Math.min(1, value ?? fallback));
+  }
+  function resolveTwoSidedOpacity(transparency) {
+    const front = opacity(
+      transparency.frontOpacity ?? transparency.opacity,
+      DEFAULT_FRONT_OPACITY
+    );
+    const backFallback = transparency.opacity === void 0 ? DEFAULT_BACK_OPACITY : front * (2 / 3);
+    return {
+      front,
+      back: opacity(transparency.backOpacity, backFallback)
+    };
+  }
+  function orderRenderItems(items, eye) {
+    const opaque = [];
+    const transparent = [];
+    for (const item of items) {
+      (item.transparency ? transparent : opaque).push(item);
+    }
+    transparent.sort((a, b) => {
+      const ax = a.model[12] - eye.x;
+      const ay = a.model[13] - eye.y;
+      const az = a.model[14] - eye.z;
+      const bx = b.model[12] - eye.x;
+      const by = b.model[13] - eye.y;
+      const bz = b.model[14] - eye.z;
+      return bx * bx + by * by + bz * bz - (ax * ax + ay * ay + az * az);
+    });
+    return opaque.concat(transparent);
+  }
+  async function createRenderer(backend, options = {}) {
+    switch (backend) {
+      case "webgl":
+        return new (await Promise.resolve().then(() => (init_webgl(), webgl_exports))).WebGLRenderer(options);
+      case "webgpu":
+        return new (await Promise.resolve().then(() => (init_webgpu(), webgpu_exports))).WebGPURenderer(options);
+      case "canvas2d":
+      default:
+        return new (await Promise.resolve().then(() => (init_canvas2d(), canvas2d_exports))).Canvas2DRenderer(options);
+    }
+  }
+  var DEFAULT_ONE_SIDED_OPACITY, DEFAULT_BACK_OPACITY, DEFAULT_FRONT_OPACITY;
+  var init_renderer = __esm({
+    "src/engines/little-3d-engine/renderer.ts"() {
+      "use strict";
+      DEFAULT_ONE_SIDED_OPACITY = 0.35;
+      DEFAULT_BACK_OPACITY = 0.84;
+      DEFAULT_FRONT_OPACITY = 0.56;
+    }
+  });
+
+  // <stdin>
+  var stdin_exports = {};
+  __export(stdin_exports, {
+    Camera: () => Camera,
+    Light: () => Light,
+    Little3dEngine: () => Little3dEngine,
+    LittleTweenEngine: () => LittleTweenEngine,
+    ObjectMotionAnimation: () => ObjectMotionAnimation,
+    SpinAnimation: () => SpinAnimation,
+    centerAndScaleMesh: () => centerAndScaleMesh,
+    circleMotion: () => circleMotion,
+    createSpinner: () => createSpinner,
+    cross: () => cross,
+    cube: () => cube,
+    cubeSphere: () => cubeSphere,
+    cubic: () => cubic,
+    dot: () => dot,
+    ease: () => ease,
+    easeInBack: () => easeInBack,
+    easeInBounce: () => easeInBounce,
+    easeInCirc: () => easeInCirc,
+    easeInCubic: () => easeInCubic,
+    easeInElastic: () => easeInElastic,
+    easeInExpo: () => easeInExpo,
+    easeInOutBack: () => easeInOutBack,
+    easeInOutBounce: () => easeInOutBounce,
+    easeInOutCirc: () => easeInOutCirc,
+    easeInOutCubic: () => easeInOutCubic,
+    easeInOutElastic: () => easeInOutElastic,
+    easeInOutExpo: () => easeInOutExpo,
+    easeInOutQuad: () => easeInOutQuad,
+    easeInOutQuart: () => easeInOutQuart,
+    easeInOutQuint: () => easeInOutQuint,
+    easeInOutSine: () => easeInOutSine,
+    easeInQuad: () => easeInQuad,
+    easeInQuart: () => easeInQuart,
+    easeInQuint: () => easeInQuint,
+    easeInSine: () => easeInSine,
+    easeOutBack: () => easeOutBack,
+    easeOutBounce: () => easeOutBounce,
+    easeOutCirc: () => easeOutCirc,
+    easeOutCubic: () => easeOutCubic,
+    easeOutElastic: () => easeOutElastic,
+    easeOutExpo: () => easeOutExpo,
+    easeOutQuad: () => easeOutQuad,
+    easeOutQuart: () => easeOutQuart,
+    easeOutQuint: () => easeOutQuint,
+    easeOutSine: () => easeOutSine,
+    easeTypes: () => easeTypes,
+    enterFromObjectDirection: () => enterFromObjectDirection,
+    expandToTriangles: () => expandToTriangles,
+    figureEightMotion: () => figureEightMotion,
+    grow: () => grow,
+    icosphere: () => icosphere,
+    leaveInObjectDirection: () => leaveInObjectDirection,
+    linear: () => linear,
+    normalize: () => normalize,
+    octaSphere: () => octaSphere,
+    octahedron: () => octahedron,
+    orderRenderItems: () => orderRenderItems,
+    parseObj: () => parseObj,
+    pyramid: () => pyramid,
+    quadratic: () => quadratic,
+    quartic: () => quartic,
+    quintic: () => quintic,
+    scale: () => scale,
+    shrink: () => shrink,
+    squareMotion: () => squareMotion,
+    subtract: () => subtract,
+    tetrahedron: () => tetrahedron,
+    transform: () => transform,
+    uvSphere: () => uvSphere,
+    vec3: () => vec3,
+    wanderMotion: () => wanderMotion
+  });
+
+  // src/index.ts
+  function clamp01(value) {
+    if (Number.isNaN(value)) return 0;
+    return Math.min(1, Math.max(0, value));
+  }
+  function lerp(from, to, t) {
+    return from + (to - from) * t;
+  }
+  function createSpinner(target, options) {
+    if (!(target instanceof HTMLElement)) {
+      throw new Error("3d-spinner: createSpinner requires a target HTMLElement.");
+    }
+    const { animation } = options;
+    const indeterminate = options.type === "indeterminate";
+    if (indeterminate && options.periodMs !== void 0 && (!Number.isFinite(options.periodMs) || options.periodMs <= 0)) {
+      throw new RangeError("3d-spinner: periodMs must be a finite number greater than zero.");
+    }
+    animation.mount(target);
+    const start = performance.now();
+    let rafId = 0;
+    let stopped = false;
+    let destroyed = false;
+    let entered = false;
+    let exiting = false;
+    let current = 0;
+    let targetProgress = 0;
+    let deadline = Infinity;
+    if (!indeterminate) {
+      const opts = options;
+      if (typeof opts.progress === "number") {
+        current = clamp01(opts.progress);
+        targetProgress = current;
+      }
+      if (typeof opts.timeout === "number") deadline = Math.min(deadline, start + opts.timeout);
+      if (opts.until instanceof Date) deadline = Math.min(deadline, opts.until.getTime());
+    }
+    function computeProgress(now) {
+      if (!indeterminate) {
+        if (now >= deadline) targetProgress = 1;
+        current = lerp(current, targetProgress, 0.12);
+        if (Math.abs(targetProgress - current) < 5e-4) current = targetProgress;
+        return current;
+      }
+      const opts = options;
+      const period = opts.periodMs ?? 2e3;
+      const t = (now - start) / period;
+      if ((opts.loop ?? "bounce") === "restart") return t - Math.floor(t);
+      const phase = t - 2 * Math.floor(t / 2);
+      return phase <= 1 ? phase : 2 - phase;
+    }
+    function frame(now) {
+      if (stopped) return;
+      const progress = computeProgress(now);
+      if (!entered && (indeterminate || progress > 0)) {
+        animation.enter(now);
+        entered = true;
+      }
+      if (!exiting && entered && !indeterminate && progress >= 1 && targetProgress >= 1) {
+        animation.exit(now);
+        exiting = true;
+      }
+      const target2 = indeterminate ? progress : targetProgress;
+      animation.render(now, { progress, targetProgress: target2, indeterminate });
+      if (exiting && animation.isFinished()) {
+        halt();
+        return;
+      }
+      rafId = requestAnimationFrame(frame);
+    }
+    function halt() {
+      if (stopped) return;
+      stopped = true;
+      if (rafId) cancelAnimationFrame(rafId);
+      rafId = 0;
+    }
+    function setProgress(value) {
+      if (!indeterminate) targetProgress = clamp01(value);
+    }
+    function stop() {
+      if (stopped || exiting) return;
+      if (!entered) {
+        halt();
+        return;
+      }
+      animation.exit(performance.now());
+      exiting = true;
+    }
+    function destroy() {
+      if (destroyed) return;
+      destroyed = true;
+      halt();
+      animation.destroy();
+    }
+    rafId = requestAnimationFrame(frame);
+    return { setProgress, stop, destroy };
+  }
+
+  // src/engines/little-3d-engine/core/camera.ts
+  init_math();
+  var DEFAULTS = {
+    position: { x: 0, y: 0, z: 4 },
+    fov: 55 * Math.PI / 180,
+    near: 0.1,
+    far: 100
+  };
+  var Camera = class {
+    constructor(options) {
+      this.options = { ...DEFAULTS, ...options };
+    }
+    /** Transform a world-space point into view (camera) space. */
+    toView(p) {
+      const { position } = this.options;
+      return transformAffine(translation(-position.x, -position.y, -position.z), p);
+    }
+    /** Combined view-projection matrix for the given viewport aspect ratio. */
+    viewProjection(aspect) {
+      const { position, fov, near, far } = this.options;
+      const view = translation(-position.x, -position.y, -position.z);
+      const projection = perspective(fov, aspect, near, far);
+      return multiply(projection, view);
+    }
+    /** Convert a normalized device coordinate (-1..1) to a pixel position. */
+    toScreen(ndc, width, height) {
+      return {
+        x: (ndc.x * 0.5 + 0.5) * width,
+        y: (1 - (ndc.y * 0.5 + 0.5)) * height
+      };
+    }
+  };
+
+  // src/engines/little-3d-engine/little-3d-engine.ts
+  init_light();
+  init_math();
+
+  // src/engines/little-3d-engine/core/mesh.ts
+  function transform(init) {
+    return {
+      position: init?.position ?? { x: 0, y: 0, z: 0 },
+      rotation: init?.rotation ?? { x: 0, y: 0, z: 0 },
+      scale: init?.scale ?? 1
+    };
+  }
+
+  // src/engines/little-3d-engine/little-3d-engine.ts
+  init_renderer();
+  init_light();
+
+  // src/engines/little-3d-engine/shapes/cube.ts
+  var DEFAULT_COLORS = ["#3b82f6", "#8b5cf6", "#ec4899", "#f59e0b", "#10b981", "#ef4444"];
+  function cube(size = 1, colors = DEFAULT_COLORS) {
+    const h = size / 2;
+    const vertices = [
+      { x: -h, y: -h, z: h },
+      { x: h, y: -h, z: h },
+      { x: h, y: h, z: h },
+      { x: -h, y: h, z: h },
+      { x: -h, y: -h, z: -h },
+      { x: h, y: -h, z: -h },
+      { x: h, y: h, z: -h },
+      { x: -h, y: h, z: -h }
+    ];
+    const faces = [
+      { indices: [0, 1, 2, 3], color: colors[0 % colors.length] },
+      { indices: [5, 4, 7, 6], color: colors[1 % colors.length] },
+      { indices: [3, 2, 6, 7], color: colors[2 % colors.length] },
+      { indices: [4, 5, 1, 0], color: colors[3 % colors.length] },
+      { indices: [1, 5, 6, 2], color: colors[4 % colors.length] },
+      { indices: [4, 0, 3, 7], color: colors[5 % colors.length] }
+    ];
+    return { vertices, faces };
+  }
+
+  // src/engines/little-3d-engine/shapes/tetrahedron.ts
+  var DEFAULT_COLORS2 = ["#3b82f6", "#8b5cf6", "#ec4899", "#f59e0b"];
+  function tetrahedron(size = 1, colors = DEFAULT_COLORS2) {
+    const s = size / 2;
+    const vertices = [
+      { x: s, y: s, z: s },
+      { x: s, y: -s, z: -s },
+      { x: -s, y: s, z: -s },
+      { x: -s, y: -s, z: s }
+    ];
+    const faces = [
+      { indices: [0, 1, 2], color: colors[0 % colors.length] },
+      { indices: [0, 3, 1], color: colors[1 % colors.length] },
+      { indices: [0, 2, 3], color: colors[2 % colors.length] },
+      { indices: [1, 3, 2], color: colors[3 % colors.length] }
+    ];
+    return { vertices, faces };
+  }
+
+  // src/engines/little-3d-engine/shapes/octahedron.ts
+  var DEFAULT_COLORS3 = [
+    "#3b82f6",
+    "#8b5cf6",
+    "#ec4899",
+    "#f59e0b",
+    "#10b981",
+    "#ef4444",
+    "#06b6d4",
+    "#eab308"
+  ];
+  function octahedron(size = 1, colors = DEFAULT_COLORS3) {
+    const r = size / 2;
+    const vertices = [
+      { x: r, y: 0, z: 0 },
+      { x: -r, y: 0, z: 0 },
+      { x: 0, y: r, z: 0 },
+      { x: 0, y: -r, z: 0 },
+      { x: 0, y: 0, z: r },
+      { x: 0, y: 0, z: -r }
+    ];
+    const faces = [
+      { indices: [4, 0, 2], color: colors[0 % colors.length] },
+      { indices: [4, 2, 1], color: colors[1 % colors.length] },
+      { indices: [4, 1, 3], color: colors[2 % colors.length] },
+      { indices: [4, 3, 0], color: colors[3 % colors.length] },
+      { indices: [5, 2, 0], color: colors[4 % colors.length] },
+      { indices: [5, 1, 2], color: colors[5 % colors.length] },
+      { indices: [5, 3, 1], color: colors[6 % colors.length] },
+      { indices: [5, 0, 3], color: colors[7 % colors.length] }
+    ];
+    return { vertices, faces };
+  }
+
+  // src/engines/little-3d-engine/shapes/pyramid.ts
+  var DEFAULT_COLORS4 = ["#3b82f6", "#8b5cf6", "#ec4899", "#f59e0b", "#10b981"];
+  function pyramid(size = 1, colors = DEFAULT_COLORS4) {
+    const h = size / 2;
+    const vertices = [
+      { x: -h, y: -h, z: h },
+      { x: h, y: -h, z: h },
+      { x: h, y: -h, z: -h },
+      { x: -h, y: -h, z: -h },
+      { x: 0, y: h, z: 0 }
+    ];
+    const faces = [
+      { indices: [0, 3, 2, 1], color: colors[0 % colors.length] },
+      { indices: [4, 0, 1], color: colors[1 % colors.length] },
+      { indices: [4, 1, 2], color: colors[2 % colors.length] },
+      { indices: [4, 2, 3], color: colors[3 % colors.length] },
+      { indices: [4, 3, 0], color: colors[4 % colors.length] }
+    ];
+    return { vertices, faces };
+  }
+
+  // src/engines/little-3d-engine/shapes/uv-sphere.ts
+  var DEFAULT_COLORS5 = ["#3b82f6", "#8b5cf6", "#ec4899", "#f59e0b", "#10b981", "#ef4444"];
+  function uvSphere(size = 1, detail = 1, colors = DEFAULT_COLORS5) {
+    const r = size / 2;
+    const d = Math.max(1, Math.floor(detail));
+    const slices = Math.max(4, d * 4);
+    const stacks = Math.max(2, d * 2);
+    const vertices = [{ x: 0, y: r, z: 0 }];
+    const ring = (i, j) => 1 + (i - 1) * slices + j;
+    for (let i = 1; i < stacks; i++) {
+      const phi = Math.PI * i / stacks;
+      const y = r * Math.cos(phi);
+      const rr = r * Math.sin(phi);
+      for (let j = 0; j < slices; j++) {
+        const theta = 2 * Math.PI * j / slices;
+        vertices.push({ x: rr * Math.cos(theta), y, z: rr * Math.sin(theta) });
+      }
+    }
+    const bottom = vertices.length;
+    vertices.push({ x: 0, y: -r, z: 0 });
+    const faces = [];
+    let ci = 0;
+    const color = () => colors[ci++ % colors.length];
+    for (let j = 0; j < slices; j++) {
+      faces.push({ indices: [0, ring(1, (j + 1) % slices), ring(1, j)], color: color() });
+    }
+    for (let i = 1; i < stacks - 1; i++) {
+      for (let j = 0; j < slices; j++) {
+        const j1 = (j + 1) % slices;
+        faces.push({
+          indices: [ring(i, j), ring(i, j1), ring(i + 1, j1), ring(i + 1, j)],
+          color: color()
+        });
+      }
+    }
+    for (let j = 0; j < slices; j++) {
+      faces.push({
+        indices: [bottom, ring(stacks - 1, j), ring(stacks - 1, (j + 1) % slices)],
+        color: color()
+      });
+    }
+    return { vertices, faces };
+  }
+
+  // src/engines/little-3d-engine/shapes/icosphere.ts
+  init_geometry();
+  var DEFAULT_COLORS6 = ["#3b82f6", "#8b5cf6", "#ec4899", "#f59e0b", "#10b981", "#ef4444"];
+  var T = (1 + Math.sqrt(5)) / 2;
+  var SEED_VERTICES = [
+    { x: -1, y: T, z: 0 },
+    { x: 1, y: T, z: 0 },
+    { x: -1, y: -T, z: 0 },
+    { x: 1, y: -T, z: 0 },
+    { x: 0, y: -1, z: T },
+    { x: 0, y: 1, z: T },
+    { x: 0, y: -1, z: -T },
+    { x: 0, y: 1, z: -T },
+    { x: T, y: 0, z: -1 },
+    { x: T, y: 0, z: 1 },
+    { x: -T, y: 0, z: -1 },
+    { x: -T, y: 0, z: 1 }
+  ];
+  var SEED_FACES = [
+    [0, 11, 5],
+    [0, 5, 1],
+    [0, 1, 7],
+    [0, 7, 10],
+    [0, 10, 11],
+    [1, 5, 9],
+    [5, 11, 4],
+    [11, 10, 2],
+    [10, 7, 6],
+    [7, 1, 8],
+    [3, 9, 4],
+    [3, 4, 2],
+    [3, 2, 6],
+    [3, 6, 8],
+    [3, 8, 9],
+    [4, 9, 5],
+    [2, 4, 11],
+    [6, 2, 10],
+    [8, 6, 7],
+    [9, 8, 1]
+  ];
+  function icosphere(size = 1, detail = 1, colors = DEFAULT_COLORS6) {
+    return sphereFromTriangles(SEED_VERTICES, SEED_FACES, size, detail, colors);
+  }
+
+  // src/engines/little-3d-engine/shapes/octa-sphere.ts
+  init_geometry();
+  var DEFAULT_COLORS7 = ["#3b82f6", "#8b5cf6", "#ec4899", "#f59e0b", "#10b981", "#ef4444"];
+  var SEED_VERTICES2 = [
+    { x: 1, y: 0, z: 0 },
+    { x: -1, y: 0, z: 0 },
+    { x: 0, y: 1, z: 0 },
+    { x: 0, y: -1, z: 0 },
+    { x: 0, y: 0, z: 1 },
+    { x: 0, y: 0, z: -1 }
+  ];
+  var SEED_FACES2 = [
+    [4, 0, 2],
+    [4, 2, 1],
+    [4, 1, 3],
+    [4, 3, 0],
+    [5, 2, 0],
+    [5, 1, 2],
+    [5, 3, 1],
+    [5, 0, 3]
+  ];
+  function octaSphere(size = 1, detail = 1, colors = DEFAULT_COLORS7) {
+    return sphereFromTriangles(SEED_VERTICES2, SEED_FACES2, size, detail, colors);
+  }
+
+  // src/engines/little-3d-engine/shapes/cube-sphere.ts
+  var DEFAULT_COLORS8 = ["#3b82f6", "#8b5cf6", "#ec4899", "#f59e0b", "#10b981", "#ef4444"];
+  var CUBE_FACES = [
+    { normal: [0, 0, 1], right: [1, 0, 0], up: [0, 1, 0] },
+    { normal: [0, 0, -1], right: [-1, 0, 0], up: [0, 1, 0] },
+    { normal: [1, 0, 0], right: [0, 0, -1], up: [0, 1, 0] },
+    { normal: [-1, 0, 0], right: [0, 0, 1], up: [0, 1, 0] },
+    { normal: [0, 1, 0], right: [1, 0, 0], up: [0, 0, -1] },
+    { normal: [0, -1, 0], right: [1, 0, 0], up: [0, 0, 1] }
+  ];
+  function cubeSphere(size = 1, detail = 1, colors = DEFAULT_COLORS8) {
+    const r = size / 2;
+    const n = Math.max(1, Math.floor(detail));
+    const vertices = [];
+    const faces = [];
+    let ci = 0;
+    for (const face of CUBE_FACES) {
+      const base = vertices.length;
+      for (let i = 0; i <= n; i++) {
+        for (let j = 0; j <= n; j++) {
+          const u = -1 + 2 * i / n;
+          const v = -1 + 2 * j / n;
+          const x = face.normal[0] + u * face.right[0] + v * face.up[0];
+          const y = face.normal[1] + u * face.right[1] + v * face.up[1];
+          const z = face.normal[2] + u * face.right[2] + v * face.up[2];
+          const len = Math.hypot(x, y, z);
+          vertices.push({ x: x / len * r, y: y / len * r, z: z / len * r });
+        }
+      }
+      const idx = (i, j) => base + i * (n + 1) + j;
+      for (let i = 0; i < n; i++) {
+        for (let j = 0; j < n; j++) {
+          faces.push({
+            indices: [idx(i, j), idx(i + 1, j), idx(i + 1, j + 1), idx(i, j + 1)],
+            color: colors[ci++ % colors.length]
+          });
+        }
+      }
+    }
+    return { vertices, faces };
+  }
+
+  // src/engines/little-3d-engine/little-3d-engine.ts
+  init_geometry();
+  init_renderer();
+  init_math();
+  function modelMatrix(t) {
+    const rotation = multiply(
+      rotationZ(t.rotation.z),
+      multiply(rotationY(t.rotation.y), rotationX(t.rotation.x))
+    );
+    return multiply(
+      translation(t.position.x, t.position.y, t.position.z),
+      multiply(rotation, scaleMatrix(t.scale))
+    );
+  }
+  var Little3dEngine = class {
+    constructor(options = {}) {
+      this.scene = [];
+      this.cssWidth = 0;
+      this.cssHeight = 0;
+      this.ready = false;
+      this.generation = 0;
+      this.rafId = 0;
+      this.running = false;
+      this.camera = new Camera(options.camera);
+      this.light = new Light(options.light);
+      this.backend = options.backend ?? "canvas2d";
+      this.background = options.background;
+    }
+    /**
+     * Create the canvas inside `target`, load the selected backend, and start
+     * tracking size. Resolves once the renderer is ready; rejects if the backend
+     * is unavailable. Drawing is a no-op until it resolves.
+     */
+    async mount(target) {
+      const canvas = document.createElement("canvas");
+      canvas.style.display = "block";
+      canvas.style.width = "100%";
+      canvas.style.height = "100%";
+      target.appendChild(canvas);
+      this.canvas = canvas;
+      this.observer = new ResizeObserver(() => this.resize());
+      this.observer.observe(canvas);
+      this.resize();
+      const generation = this.generation;
+      const dropCanvas = () => {
+        if (this.canvas !== canvas) return;
+        this.observer?.disconnect();
+        this.observer = void 0;
+        canvas.remove();
+        this.canvas = void 0;
+      };
+      try {
+        const renderer = await createRenderer(this.backend, { background: this.background });
+        if (generation !== this.generation) {
+          renderer.destroy();
+          dropCanvas();
+          return;
+        }
+        await renderer.init(canvas);
+        if (generation !== this.generation) {
+          renderer.destroy();
+          dropCanvas();
+          return;
+        }
+        this.renderer = renderer;
+        this.resize();
+        this.ready = true;
+      } catch (error) {
+        dropCanvas();
+        throw error;
+      }
+    }
+    /** Add a mesh to the scene and return a handle for animating it. */
+    add(mesh, init) {
+      const entry = {
+        mesh,
+        transform: transform(init),
+        transparency: init?.transparency,
+        remove: () => {
+          const i = this.scene.indexOf(entry);
+          if (i >= 0) this.scene.splice(i, 1);
+        }
+      };
+      this.scene.push(entry);
+      return entry;
+    }
+    resize() {
+      const canvas = this.canvas;
+      if (!canvas) return;
+      const dpr = window.devicePixelRatio || 1;
+      this.cssWidth = canvas.clientWidth || canvas.parentElement?.clientWidth || 0;
+      this.cssHeight = canvas.clientHeight || canvas.parentElement?.clientHeight || 0;
+      canvas.width = Math.max(1, Math.round(this.cssWidth * dpr));
+      canvas.height = Math.max(1, Math.round(this.cssHeight * dpr));
+      this.renderer?.resize(this.cssWidth, this.cssHeight, dpr);
+    }
+    /** Draw a single frame from the current scene state. */
+    render() {
+      if (!this.ready || !this.renderer) return;
+      const width = this.cssWidth;
+      const height = this.cssHeight;
+      if (width === 0 || height === 0) return;
+      const items = this.scene.map((entry) => ({
+        mesh: entry.mesh,
+        model: modelMatrix(entry.transform),
+        transparency: entry.transparency
+      }));
+      const eye = this.camera.options.position;
+      this.renderer.render({
+        items: orderRenderItems(items, eye),
+        viewProjection: this.camera.viewProjection(width / height),
+        eye,
+        light: this.light.params,
+        width,
+        height
+      });
+    }
+    /** Start an internal animation loop that calls {@link render} each frame. */
+    start() {
+      if (this.running) return;
+      this.running = true;
+      const loop = () => {
+        if (!this.running) return;
+        this.render();
+        this.rafId = requestAnimationFrame(loop);
+      };
+      this.rafId = requestAnimationFrame(loop);
+    }
+    /** Stop the internal animation loop started by {@link start}. */
+    stop() {
+      this.running = false;
+      if (this.rafId) cancelAnimationFrame(this.rafId);
+      this.rafId = 0;
+    }
+    /** Stop animating, release the renderer, and remove the canvas. */
+    destroy() {
+      this.generation++;
+      this.ready = false;
+      this.stop();
+      this.observer?.disconnect();
+      this.observer = void 0;
+      this.renderer?.destroy();
+      this.renderer = void 0;
+      this.canvas?.remove();
+      this.canvas = void 0;
+    }
+  };
+
+  // src/engines/little-tween-engine/core/tweens.ts
+  function input(value, overextend) {
+    if (Number.isNaN(value)) return 0;
+    if (overextend) return value;
+    return Math.min(1, Math.max(0, value));
+  }
+  function linear(value, overextend = false) {
+    return input(value, overextend);
+  }
+  function quadratic(value, overextend = false) {
+    return easeInQuad(value, overextend);
+  }
+  function cubic(value, overextend = false) {
+    return easeInCubic(value, overextend);
+  }
+  function quartic(value, overextend = false) {
+    return easeInQuart(value, overextend);
+  }
+  function quintic(value, overextend = false) {
+    return easeInQuint(value, overextend);
+  }
+  function easeInSine(value, overextend = false) {
+    const x = input(value, overextend);
+    return 1 - Math.cos(x * Math.PI / 2);
+  }
+  function easeOutSine(value, overextend = false) {
+    const x = input(value, overextend);
+    return Math.sin(x * Math.PI / 2);
+  }
+  function easeInOutSine(value, overextend = false) {
+    const x = input(value, overextend);
+    return -(Math.cos(Math.PI * x) - 1) / 2;
+  }
+  function easeInQuad(value, overextend = false) {
+    const x = input(value, overextend);
+    return x * x;
+  }
+  function easeOutQuad(value, overextend = false) {
+    const x = input(value, overextend);
+    return 1 - (1 - x) * (1 - x);
+  }
+  function easeInOutQuad(value, overextend = false) {
+    const x = input(value, overextend);
+    return x < 0.5 ? 2 * x * x : 1 - Math.pow(-2 * x + 2, 2) / 2;
+  }
+  function easeInCubic(value, overextend = false) {
+    const x = input(value, overextend);
+    return x * x * x;
+  }
+  function easeOutCubic(value, overextend = false) {
+    const x = input(value, overextend);
+    return 1 - Math.pow(1 - x, 3);
+  }
+  function easeInOutCubic(value, overextend = false) {
+    const x = input(value, overextend);
+    return x < 0.5 ? 4 * x * x * x : 1 - Math.pow(-2 * x + 2, 3) / 2;
+  }
+  function easeInQuart(value, overextend = false) {
+    const x = input(value, overextend);
+    return x * x * x * x;
+  }
+  function easeOutQuart(value, overextend = false) {
+    const x = input(value, overextend);
+    return 1 - Math.pow(1 - x, 4);
+  }
+  function easeInOutQuart(value, overextend = false) {
+    const x = input(value, overextend);
+    return x < 0.5 ? 8 * x * x * x * x : 1 - Math.pow(-2 * x + 2, 4) / 2;
+  }
+  function easeInQuint(value, overextend = false) {
+    const x = input(value, overextend);
+    return x * x * x * x * x;
+  }
+  function easeOutQuint(value, overextend = false) {
+    const x = input(value, overextend);
+    return 1 - Math.pow(1 - x, 5);
+  }
+  function easeInOutQuint(value, overextend = false) {
+    const x = input(value, overextend);
+    return x < 0.5 ? 16 * x * x * x * x * x : 1 - Math.pow(-2 * x + 2, 5) / 2;
+  }
+  function easeInExpo(value, overextend = false) {
+    const x = input(value, overextend);
+    return x === 0 ? 0 : Math.pow(2, 10 * x - 10);
+  }
+  function easeOutExpo(value, overextend = false) {
+    const x = input(value, overextend);
+    return x === 1 ? 1 : 1 - Math.pow(2, -10 * x);
+  }
+  function easeInOutExpo(value, overextend = false) {
+    const x = input(value, overextend);
+    return x === 0 ? 0 : x === 1 ? 1 : x < 0.5 ? Math.pow(2, 20 * x - 10) / 2 : (2 - Math.pow(2, -20 * x + 10)) / 2;
+  }
+  function easeInCirc(value, overextend = false) {
+    const x = input(value, overextend);
+    return 1 - Math.sqrt(1 - Math.pow(x, 2));
+  }
+  function easeOutCirc(value, overextend = false) {
+    const x = input(value, overextend);
+    return Math.sqrt(1 - Math.pow(x - 1, 2));
+  }
+  function easeInOutCirc(value, overextend = false) {
+    const x = input(value, overextend);
+    return x < 0.5 ? (1 - Math.sqrt(1 - Math.pow(2 * x, 2))) / 2 : (Math.sqrt(1 - Math.pow(-2 * x + 2, 2)) + 1) / 2;
+  }
+  function easeInBack(value, overextend = false) {
+    const x = input(value, overextend);
+    const c1 = 1.70158;
+    const c3 = c1 + 1;
+    return c3 * x * x * x - c1 * x * x;
+  }
+  function easeOutBack(value, overextend = false) {
+    const x = input(value, overextend);
+    const c1 = 1.70158;
+    const c3 = c1 + 1;
+    return 1 + c3 * Math.pow(x - 1, 3) + c1 * Math.pow(x - 1, 2);
+  }
+  function easeInOutBack(value, overextend = false) {
+    const x = input(value, overextend);
+    const c1 = 1.70158;
+    const c2 = c1 * 1.525;
+    return x < 0.5 ? Math.pow(2 * x, 2) * ((c2 + 1) * 2 * x - c2) / 2 : (Math.pow(2 * x - 2, 2) * ((c2 + 1) * (x * 2 - 2) + c2) + 2) / 2;
+  }
+  function easeInElastic(value, overextend = false) {
+    const x = input(value, overextend);
+    const c4 = 2 * Math.PI / 3;
+    return x === 0 ? 0 : x === 1 ? 1 : -Math.pow(2, 10 * x - 10) * Math.sin((x * 10 - 10.75) * c4);
+  }
+  function easeOutElastic(value, overextend = false) {
+    const x = input(value, overextend);
+    const c4 = 2 * Math.PI / 3;
+    return x === 0 ? 0 : x === 1 ? 1 : Math.pow(2, -10 * x) * Math.sin((x * 10 - 0.75) * c4) + 1;
+  }
+  function easeInOutElastic(value, overextend = false) {
+    const x = input(value, overextend);
+    const c5 = 2 * Math.PI / 4.5;
+    return x === 0 ? 0 : x === 1 ? 1 : x < 0.5 ? -(Math.pow(2, 20 * x - 10) * Math.sin((20 * x - 11.125) * c5)) / 2 : Math.pow(2, -20 * x + 10) * Math.sin((20 * x - 11.125) * c5) / 2 + 1;
+  }
+  function easeInBounce(value, overextend = false) {
+    const x = input(value, overextend);
+    return 1 - easeOutBounce(1 - x, true);
+  }
+  function easeOutBounce(value, overextend = false) {
+    let x = input(value, overextend);
+    const n1 = 7.5625;
+    const d1 = 2.75;
+    if (x < 1 / d1) {
+      return n1 * x * x;
+    }
+    if (x < 2 / d1) {
+      x -= 1.5 / d1;
+      return n1 * x * x + 0.75;
+    }
+    if (x < 2.5 / d1) {
+      x -= 2.25 / d1;
+      return n1 * x * x + 0.9375;
+    }
+    x -= 2.625 / d1;
+    return n1 * x * x + 0.984375;
+  }
+  function easeInOutBounce(value, overextend = false) {
+    const x = input(value, overextend);
+    return x < 0.5 ? (1 - easeOutBounce(1 - 2 * x, true)) / 2 : (1 + easeOutBounce(2 * x - 1, true)) / 2;
+  }
+  var easeTypes = {
+    linear,
+    quadratic,
+    cubic,
+    quartic,
+    quintic,
+    easeInSine,
+    easeOutSine,
+    easeInOutSine,
+    easeInQuad,
+    easeOutQuad,
+    easeInOutQuad,
+    easeInCubic,
+    easeOutCubic,
+    easeInOutCubic,
+    easeInQuart,
+    easeOutQuart,
+    easeInOutQuart,
+    easeInQuint,
+    easeOutQuint,
+    easeInOutQuint,
+    easeInExpo,
+    easeOutExpo,
+    easeInOutExpo,
+    easeInCirc,
+    easeOutCirc,
+    easeInOutCirc,
+    easeInBack,
+    easeOutBack,
+    easeInOutBack,
+    easeInElastic,
+    easeOutElastic,
+    easeInOutElastic,
+    easeInBounce,
+    easeOutBounce,
+    easeInOutBounce
+  };
+  function ease(type, value, overextend = false) {
+    return easeTypes[type](value, overextend);
+  }
+
+  // src/progress-animation.ts
+  function resolveOptions(options = {}) {
+    return {
+      popDurationMs: options.popDurationMs ?? 500,
+      overextend: options.overextend ?? 0.2,
+      startSnapRatio: options.startSnapRatio ?? 0.2,
+      loadingText: options.loadingText === void 0 ? "loading" : options.loadingText,
+      doneText: options.doneText ?? "done",
+      doneFadeDurationMs: options.doneFadeDurationMs ?? 2e3,
+      removeOnComplete: options.removeOnComplete ?? false
+    };
+  }
+  function popPhaseT(now, phaseStart, durationMs) {
+    if (durationMs <= 0) return 1;
+    return Math.min(1, Math.max(0, (now - phaseStart) / durationMs));
+  }
+  var ProgressAnimation = class {
+    constructor(options = {}) {
+      this.phase = "idle";
+      this.phaseStart = 0;
+      this.activeProgress = 0;
+      this.popTarget = 0;
+      this.doneFadeStart = 0;
+      this.options = resolveOptions(options);
+    }
+    /** Begin the intro pop. Ignored unless idle. */
+    enter(now) {
+      if (this.phase !== "idle") return;
+      this.phase = "startPop";
+      this.phaseStart = now;
+      this.activeProgress = 0;
+      this.popTarget = 0;
+    }
+    /** Begin the outro pop. Ignored unless mid-intro or active. */
+    exit(now) {
+      if (this.phase !== "startPop" && this.phase !== "active") return;
+      this.phase = "endPop";
+      this.phaseStart = now;
+    }
+    isFinished() {
+      return this.phase === "finished";
+    }
+    update(now, progress, targetProgress) {
+      const {
+        popDurationMs,
+        overextend,
+        startSnapRatio,
+        loadingText,
+        doneText,
+        doneFadeDurationMs,
+        removeOnComplete
+      } = this.options;
+      const goal = targetProgress ?? progress;
+      if (this.phase === "startPop" || this.phase === "active") {
+        this.activeProgress = progress;
+        if (this.phase === "startPop") this.popTarget = Math.max(this.popTarget, goal, progress);
+      }
+      let scale2 = 0;
+      let text = null;
+      let textOpacity = 0;
+      let hidden = false;
+      if (this.phase === "startPop") {
+        const t = popPhaseT(now, this.phaseStart, popDurationMs);
+        const peak = this.popTarget * (1 + overextend);
+        if (t < startSnapRatio) {
+          const snapT = startSnapRatio > 0 ? t / startSnapRatio : 1;
+          scale2 = peak * easeOutExpo(snapT);
+        } else {
+          const settleT = startSnapRatio < 1 ? (t - startSnapRatio) / (1 - startSnapRatio) : 1;
+          scale2 = peak + (this.activeProgress - peak) * easeOutCubic(settleT);
+        }
+        if (t >= 1) this.phase = "active";
+      } else if (this.phase === "active") {
+        scale2 = this.activeProgress;
+      } else if (this.phase === "endPop") {
+        const t = popPhaseT(now, this.phaseStart, popDurationMs);
+        const peak = 1 + overextend;
+        if (t < 0.5) {
+          scale2 = 1 + (peak - 1) * easeOutQuad(t * 2);
+        } else {
+          scale2 = peak * (1 - easeInQuad((t - 0.5) * 2));
+        }
+        if (t >= 1) {
+          this.phase = "done";
+          this.doneFadeStart = now;
+          scale2 = 0;
+        }
+      }
+      if (this.phase === "startPop" || this.phase === "active") {
+        if (loadingText !== false) {
+          text = loadingText;
+          textOpacity = 0.65;
+        }
+      } else if (this.phase === "endPop") {
+        text = doneText;
+        textOpacity = 0.65;
+      } else if (this.phase === "done") {
+        const fadeT = popPhaseT(now, this.doneFadeStart, doneFadeDurationMs);
+        if (fadeT >= 1) {
+          if (removeOnComplete) hidden = true;
+          this.phase = "finished";
+        } else {
+          text = doneText;
+          textOpacity = 0.65 * (1 - fadeT);
+        }
+      }
+      return { scale: scale2, text, textOpacity, hidden };
+    }
+  };
+
+  // src/animations/spin.ts
+  var LABEL_STYLE = [
+    "position:absolute",
+    "inset:0",
+    "display:flex",
+    "align-items:center",
+    "justify-content:center",
+    "pointer-events:none",
+    "font:600 1.1rem/1.2 system-ui,sans-serif",
+    "letter-spacing:0.06em",
+    "text-transform:lowercase",
+    "color:rgba(255,255,255,0.65)",
+    "z-index:1"
+  ].join(";");
+  function resolveMesh(shape) {
+    if (!shape) return cube();
+    return typeof shape === "function" ? shape() : shape;
+  }
+  function applyColor(mesh, color) {
+    if (color === void 0 || Array.isArray(color) && color.length === 0) return mesh;
+    const pick = Array.isArray(color) ? (i) => color[i % color.length] : () => color;
+    return { vertices: mesh.vertices, faces: mesh.faces.map((f, i) => ({ ...f, color: pick(i) })) };
+  }
+  var SpinAnimation = class {
+    constructor(options = {}) {
+      this.exited = false;
+      this.mesh = applyColor(resolveMesh(options.shape), options.color);
+      this.spinX = options.spinX ?? 7e-4;
+      this.spinY = options.spinY ?? 11e-4;
+      this.backend = options.backend;
+      this.transparency = options.transparency;
+      this.progress = options.progressAnimation ? new ProgressAnimation(options.progressAnimation) : void 0;
+    }
+    mount(target) {
+      target.style.position = "relative";
+      const engine = new Little3dEngine({
+        backend: this.backend,
+        camera: { position: { x: 0, y: 0, z: 2.8 } }
+      });
+      this.handle = engine.add(this.mesh, { transparency: this.transparency });
+      this.engine = engine;
+      engine.mount(target).catch((error) => {
+        target.textContent = error instanceof Error ? error.message : String(error);
+      });
+      if (this.progress) {
+        const label = document.createElement("div");
+        label.style.cssText = LABEL_STYLE;
+        label.setAttribute("aria-hidden", "true");
+        label.hidden = true;
+        target.appendChild(label);
+        this.label = label;
+      }
+    }
+    enter(now) {
+      this.progress?.enter(now);
+    }
+    exit(now) {
+      this.exited = true;
+      this.progress?.exit(now);
+    }
+    isFinished() {
+      return this.progress ? this.progress.isFinished() : this.exited;
+    }
+    render(now, frame) {
+      if (!this.engine || !this.handle) return;
+      const rotation = this.handle.transform.rotation;
+      rotation.x = now * this.spinX;
+      rotation.y = now * this.spinY;
+      if (this.progress) {
+        const visual = this.progress.update(now, frame.progress, frame.targetProgress);
+        this.handle.transform.scale = visual.hidden ? 0 : visual.scale;
+        this.applyLabel(visual);
+      } else {
+        this.handle.transform.scale = 1;
+      }
+      this.engine.render();
+    }
+    destroy() {
+      this.label?.remove();
+      this.label = void 0;
+      this.engine?.destroy();
+      this.engine = void 0;
+      this.handle = void 0;
+    }
+    applyLabel(visual) {
+      if (!this.label) return;
+      if (visual.hidden || visual.text == null) {
+        this.label.hidden = true;
+        this.label.textContent = "";
+        return;
+      }
+      this.label.hidden = false;
+      this.label.textContent = visual.text;
+      this.label.style.opacity = String(visual.textOpacity);
+    }
+  };
+
+  // src/animations/object-motion.ts
+  init_math();
+
+  // src/motion/transitions.ts
+  var DEFAULT_DISTANCE = 3.5;
+  function add(a, b) {
+    return { x: a.x + b.x, y: a.y + b.y, z: a.z + b.z };
+  }
+  function scaleVector(v, factor) {
+    return { x: v.x * factor, y: v.y * factor, z: v.z * factor };
+  }
+  function vectorLength(v) {
+    return Math.hypot(v.x, v.y, v.z);
+  }
+  function normalizeVector(v) {
+    const length = vectorLength(v);
+    if (length < 1e-6) return { x: 1, y: 0, z: 0 };
+    return scaleVector(v, 1 / length);
+  }
+  function resolveDirection(input2, fallback) {
+    return normalizeVector(fallback ?? input2.direction ?? input2.velocity ?? { x: 1, y: 0, z: 0 });
+  }
+  function easeOutBack2(delta) {
+    const c = 1.70158;
+    const u = delta - 1;
+    return 1 + (c + 1) * u * u * u + c * u * u;
+  }
+  function joinVelocity(input2, options, durationMs) {
+    const inputSpeed = input2.velocity ? vectorLength(input2.velocity) : 0;
+    if (input2.velocity && inputSpeed > 1e-6 && !options.direction) {
+      return input2.velocity;
+    }
+    const distance = options.distance ?? DEFAULT_DISTANCE;
+    return scaleVector(resolveDirection(input2, options.direction), distance / durationMs);
+  }
+  function enterFromObjectDirection(options = {}) {
+    return (input2) => {
+      const durationMs = Math.max(1, input2.durationMs);
+      const velocity = joinVelocity(input2, options, durationMs);
+      const remaining = durationMs - input2.elapsedMs;
+      return { position: add(input2.position, scaleVector(velocity, -remaining)) };
+    };
+  }
+  function leaveInObjectDirection(options = {}) {
+    return (input2) => {
+      const durationMs = Math.max(1, input2.durationMs);
+      const velocity = joinVelocity(input2, options, durationMs);
+      return { position: add(input2.position, scaleVector(velocity, input2.elapsedMs)) };
+    };
+  }
+  function grow() {
+    return (input2) => ({ size: (input2.size ?? 1) * easeOutBack2(input2.delta) });
+  }
+  function shrink() {
+    return (input2) => ({ size: (input2.size ?? 1) * (1 - input2.delta * input2.delta) });
+  }
+
+  // src/animations/object-motion.ts
+  var LABEL_STYLE2 = [
+    "position:absolute",
+    "inset:0",
+    "display:flex",
+    "align-items:center",
+    "justify-content:center",
+    "pointer-events:none",
+    "font:700 1.6rem/1 system-ui,sans-serif",
+    "letter-spacing:0.02em",
+    "color:rgba(255,255,255,0.9)",
+    "text-shadow:0 1px 10px rgba(0,0,0,0.6)",
+    "z-index:1"
+  ].join(";");
+  var WORLD_UP = { x: 0, y: 1, z: 0 };
+  var DEFAULT_INTRO_MS = 2100;
+  var DEFAULT_OUTRO_MS = 2100;
+  var BANK_GAIN = 26;
+  var BANK_LIMIT = 0.7;
+  var BANK_SMOOTH = 0.12;
+  var SAMPLE_MS = 8;
+  var FACE_FORWARD = {
+    "+x": (v) => v,
+    "-x": (v) => ({ x: -v.x, y: v.y, z: -v.z }),
+    "+z": (v) => ({ x: v.z, y: v.y, z: -v.x }),
+    "-z": (v) => ({ x: -v.z, y: v.y, z: v.x }),
+    "+y": (v) => ({ x: v.y, y: -v.x, z: v.z }),
+    "-y": (v) => ({ x: -v.y, y: v.x, z: v.z })
+  };
+  function add2(a, b) {
+    return { x: a.x + b.x, y: a.y + b.y, z: a.z + b.z };
+  }
+  function resolveMesh2(mesh) {
+    return typeof mesh === "function" ? mesh() : mesh;
+  }
+  function applyColor2(mesh, color) {
+    return { vertices: mesh.vertices, faces: mesh.faces.map((face) => ({ ...face, color })) };
+  }
+  function faceForward(mesh, facing) {
+    if (facing === "+x") return mesh;
+    const turn = FACE_FORWARD[facing];
+    return { vertices: mesh.vertices.map(turn), faces: mesh.faces };
+  }
+  function centerAndScaleMesh(mesh, targetSize) {
+    let minX = Infinity;
+    let minY = Infinity;
+    let minZ = Infinity;
+    let maxX = -Infinity;
+    let maxY = -Infinity;
+    let maxZ = -Infinity;
+    for (const vertex of mesh.vertices) {
+      minX = Math.min(minX, vertex.x);
+      minY = Math.min(minY, vertex.y);
+      minZ = Math.min(minZ, vertex.z);
+      maxX = Math.max(maxX, vertex.x);
+      maxY = Math.max(maxY, vertex.y);
+      maxZ = Math.max(maxZ, vertex.z);
+    }
+    const centerX = (minX + maxX) / 2;
+    const centerY = (minY + maxY) / 2;
+    const centerZ = (minZ + maxZ) / 2;
+    const extent = Math.max(maxX - minX, maxY - minY, maxZ - minZ) || 1;
+    const factor = targetSize / extent;
+    return {
+      vertices: mesh.vertices.map((vertex) => ({
+        x: (vertex.x - centerX) * factor,
+        y: (vertex.y - centerY) * factor,
+        z: (vertex.z - centerZ) * factor
+      })),
+      faces: mesh.faces
+    };
+  }
+  function orientationFor(forward, bank) {
+    const fwd = normalize(forward);
+    let right = cross(fwd, WORLD_UP);
+    if (Math.hypot(right.x, right.y, right.z) < 1e-4) right = { x: 0, y: 0, z: 1 };
+    right = normalize(right);
+    const levelUp = cross(right, fwd);
+    const up = add2(scale(levelUp, Math.cos(bank)), scale(right, Math.sin(bank)));
+    const w = normalize(cross(fwd, up));
+    return {
+      x: Math.atan2(cross(w, fwd).z, w.z),
+      y: Math.asin(Math.max(-1, Math.min(1, -fwd.z))),
+      z: Math.atan2(fwd.y, fwd.x)
+    };
+  }
+  function rotationMatrix(x, y, z) {
+    return multiply(rotationZ(z), multiply(rotationY(y), rotationX(x)));
+  }
+  function eulerFromRotationMatrix(matrix) {
+    const sy = Math.hypot(matrix[0], matrix[1]);
+    if (sy > 1e-6) {
+      return {
+        x: Math.atan2(matrix[9], matrix[10]),
+        y: Math.asin(Math.max(-1, Math.min(1, -matrix[8]))),
+        z: Math.atan2(matrix[4], matrix[0])
+      };
+    }
+    return {
+      x: Math.atan2(-matrix[6], matrix[5]),
+      y: Math.asin(Math.max(-1, Math.min(1, -matrix[8]))),
+      z: 0
+    };
+  }
+  function combineLocalRotation(path, extra) {
+    return eulerFromRotationMatrix(
+      multiply(rotationMatrix(path.x, path.y, path.z), rotationMatrix(extra.x, extra.y, extra.z))
+    );
+  }
+  function clamp013(value) {
+    return Math.max(0, Math.min(1, value));
+  }
+  function motionVectorAt(motion, t) {
+    return scale(subtract(motion.positionAt(t + 1), motion.positionAt(t - 1)), 0.5);
+  }
+  function resolveDirection2(velocity, fallback) {
+    return Math.hypot(velocity.x, velocity.y, velocity.z) > 1e-6 ? normalize(velocity) : fallback;
+  }
+  function resolveTransition(config, fallback, durationMs) {
+    if (!config) return { transition: fallback, durationMs };
+    if (typeof config === "function") return { transition: config, durationMs };
+    return { transition: config.transition, durationMs: Math.max(0, config.durationMs ?? durationMs) };
+  }
+  var ObjectMotionAnimation = class {
+    constructor(options) {
+      this.handles = [];
+      this.banks = [];
+      this.headings = [];
+      this.started = false;
+      this.finished = false;
+      this.introStart = 0;
+      this.outroStart = Infinity;
+      this.outroPosition = { x: 0, y: 0, z: 0 };
+      this.outroVelocity = { x: 0, y: 0, z: 0 };
+      this.outroDirection = { x: 1, y: 0, z: 0 };
+      const centered = centerAndScaleMesh(resolveMesh2(options.mesh), options.size ?? 1);
+      const facing = faceForward(centered, options.facing ?? "+x");
+      this.mesh = applyColor2(facing, options.color ?? "#cbd5e1");
+      this.motion = options.motion;
+      this.backend = options.backend;
+      this.transparency = options.transparency;
+      this.labelText = options.label;
+      this.tailCount = Math.max(0, Math.floor(options.tail?.count ?? 0));
+      this.tailGap = Math.max(0, options.tail?.gapMs ?? 0);
+      this.intro = resolveTransition(options.intro, grow(), DEFAULT_INTRO_MS);
+      this.outro = resolveTransition(options.outro, shrink(), DEFAULT_OUTRO_MS);
+      const rotation = options.rotation;
+      this.rotationOffset = { x: rotation?.x ?? 0, y: rotation?.y ?? 0, z: rotation?.z ?? 0 };
+      this.rotationSpin = {
+        x: rotation?.spinX ?? 0,
+        y: rotation?.spinY ?? 0,
+        z: rotation?.spinZ ?? 0
+      };
+      this.hasExtraRotation = this.rotationOffset.x !== 0 || this.rotationOffset.y !== 0 || this.rotationOffset.z !== 0 || this.rotationSpin.x !== 0 || this.rotationSpin.y !== 0 || this.rotationSpin.z !== 0;
+    }
+    mount(target) {
+      target.style.position = "relative";
+      const engine = new Little3dEngine({
+        backend: this.backend,
+        camera: { position: { x: 0, y: 0, z: 3 } }
+      });
+      for (let i = 0; i <= this.tailCount; i++) {
+        this.handles.push(engine.add(this.mesh, { transparency: this.transparency }));
+        this.banks.push(0);
+        this.headings.push({ x: 1, y: 0, z: 0 });
+      }
+      this.engine = engine;
+      engine.mount(target).catch((error) => {
+        target.textContent = error instanceof Error ? error.message : String(error);
+      });
+      const label = document.createElement("div");
+      label.style.cssText = LABEL_STYLE2;
+      label.setAttribute("role", "status");
+      target.appendChild(label);
+      this.label = label;
+    }
+    enter(now) {
+      if (this.started) return;
+      this.started = true;
+      this.introStart = now;
+    }
+    exit(now) {
+      if (!this.started || this.outroStart !== Infinity) return;
+      this.outroPosition = this.motion.positionAt(now);
+      this.outroVelocity = motionVectorAt(this.motion, now);
+      this.outroDirection = resolveDirection2(this.outroVelocity, this.headings[0]);
+      this.outroStart = now;
+    }
+    isFinished() {
+      return this.finished;
+    }
+    render(now, frame) {
+      if (!this.engine || !this.label) return;
+      if (this.outroStart !== Infinity && now >= this.outroStart + this.outro.durationMs + this.tailCount * this.tailGap) {
+        this.finished = true;
+      }
+      for (let k = 0; k < this.handles.length; k++) {
+        const transform2 = this.handles[k].transform;
+        const t = now - k * this.tailGap;
+        const sample = this.sampleAt(t);
+        if (!sample) {
+          transform2.scale = 0;
+          continue;
+        }
+        transform2.scale = sample.size;
+        let euler = sample.orientation;
+        if (!euler) {
+          const heading = subtract(this.positionAt(t + SAMPLE_MS) ?? sample.position, sample.position);
+          if (Math.hypot(heading.x, heading.y, heading.z) > 1e-5) {
+            this.headings[k] = normalize(heading);
+          }
+          const ahead = this.aheadAt(t) ?? this.headings[k];
+          const targetBank = Math.max(
+            -BANK_LIMIT,
+            Math.min(BANK_LIMIT, cross(this.headings[k], ahead).y * BANK_GAIN)
+          );
+          this.banks[k] += (targetBank - this.banks[k]) * BANK_SMOOTH;
+          euler = orientationFor(this.headings[k], this.banks[k]);
+        }
+        if (this.hasExtraRotation) {
+          euler = combineLocalRotation(euler, {
+            x: this.rotationOffset.x + this.rotationSpin.x * t,
+            y: this.rotationOffset.y + this.rotationSpin.y * t,
+            z: this.rotationOffset.z + this.rotationSpin.z * t
+          });
+        }
+        transform2.position.x = sample.position.x;
+        transform2.position.y = sample.position.y;
+        transform2.position.z = sample.position.z;
+        transform2.rotation.x = euler.x;
+        transform2.rotation.y = euler.y;
+        transform2.rotation.z = euler.z;
+      }
+      this.label.textContent = frame.indeterminate ? this.labelText ?? "" : `${Math.round(frame.progress * 100)}%`;
+      this.engine.render();
+    }
+    destroy() {
+      this.label?.remove();
+      this.label = void 0;
+      this.engine?.destroy();
+      this.engine = void 0;
+      this.handles.length = 0;
+    }
+    aheadAt(t) {
+      const next = this.positionAt(t + SAMPLE_MS);
+      const afterNext = this.positionAt(t + 2 * SAMPLE_MS);
+      if (!next || !afterNext) return void 0;
+      const ahead = subtract(afterNext, next);
+      if (Math.hypot(ahead.x, ahead.y, ahead.z) <= 1e-5) return void 0;
+      return normalize(ahead);
+    }
+    positionAt(t) {
+      return this.sampleAt(t)?.position;
+    }
+    sampleAt(t) {
+      if (!this.started || t < this.introStart) return void 0;
+      if (t < this.introStart + this.intro.durationMs) {
+        return this.transitionSample("intro", t, this.intro, this.introStart);
+      }
+      if (this.outroStart !== Infinity) {
+        if (t > this.outroStart + this.outro.durationMs) return void 0;
+        if (t >= this.outroStart) return this.transitionSample("outro", t, this.outro, this.outroStart);
+      }
+      return { position: this.motion.positionAt(t), size: 1 };
+    }
+    transitionSample(phase, t, transition, start) {
+      const elapsedMs = Math.max(0, t - start);
+      const delta = transition.durationMs === 0 ? 1 : clamp013(elapsedMs / transition.durationMs);
+      const input2 = this.transitionInput(phase, delta, elapsedMs, transition.durationMs, start);
+      const output = transition.transition(input2);
+      return this.applyTransitionOutput(input2, output);
+    }
+    transitionInput(phase, delta, elapsedMs, durationMs, start) {
+      if (phase === "intro") {
+        const handoff = start + durationMs;
+        const velocity = motionVectorAt(this.motion, handoff);
+        return {
+          delta,
+          position: this.motion.positionAt(handoff),
+          direction: resolveDirection2(velocity, { x: 1, y: 0, z: 0 }),
+          velocity,
+          size: 1,
+          durationMs,
+          elapsedMs,
+          phase
+        };
+      }
+      return {
+        delta,
+        position: this.outroPosition,
+        direction: this.outroDirection,
+        velocity: this.outroVelocity,
+        size: 1,
+        durationMs,
+        elapsedMs,
+        phase
+      };
+    }
+    applyTransitionOutput(input2, output) {
+      return {
+        position: output.position ?? input2.position,
+        size: output.size ?? input2.size ?? 1,
+        orientation: output.orientation
+      };
+    }
+  };
+
+  // src/motion/circle.ts
+  function circleMotion(options = {}) {
+    const radius = options.radius ?? 1.3;
+    const periodMs = options.periodMs ?? 3e3;
+    const tilt = options.tilt ?? 0.5;
+    const direction = options.direction ?? 1;
+    const cosTilt = Math.cos(tilt);
+    const sinTilt = Math.sin(tilt);
+    return {
+      positionAt(t) {
+        const angle = direction * t / periodMs * Math.PI * 2;
+        const x = radius * Math.cos(angle);
+        const flatY = radius * Math.sin(angle);
+        return { x, y: flatY * cosTilt, z: flatY * sinTilt };
+      }
+    };
+  }
+
+  // src/motion/square.ts
+  function squareMotion(options = {}) {
+    const half = (options.size ?? 2.4) / 2;
+    const periodMs = options.periodMs ?? 4e3;
+    const tilt = options.tilt ?? 0.45;
+    const direction = options.direction ?? 1;
+    const cosTilt = Math.cos(tilt);
+    const sinTilt = Math.sin(tilt);
+    return {
+      positionAt(t) {
+        const lap = direction * t / periodMs;
+        const s = (lap - Math.floor(lap)) * 4;
+        const edge = Math.floor(s);
+        const f = s - edge;
+        let flatX;
+        let flatY;
+        if (edge === 0) {
+          flatX = -half + 2 * half * f;
+          flatY = -half;
+        } else if (edge === 1) {
+          flatX = half;
+          flatY = -half + 2 * half * f;
+        } else if (edge === 2) {
+          flatX = half - 2 * half * f;
+          flatY = half;
+        } else {
+          flatX = -half;
+          flatY = half - 2 * half * f;
+        }
+        return { x: flatX, y: flatY * cosTilt, z: flatY * sinTilt };
+      }
+    };
+  }
+
+  // src/motion/figure-eight.ts
+  var LOOP_X = 1.5;
+  var LOOP_Y = 1;
+  var LOOP_Z = 1.05;
+  function figureEightMotion(options = {}) {
+    const size = options.size ?? 1;
+    const periodMs = options.periodMs ?? 3600;
+    return {
+      positionAt(t) {
+        const a = t / periodMs * Math.PI * 2;
+        return {
+          x: size * LOOP_X * Math.sin(a),
+          y: size * LOOP_Y * Math.sin(a) * Math.cos(a),
+          z: size * LOOP_Z * Math.cos(a)
+        };
+      }
+    };
+  }
+
+  // src/motion/wander.ts
+  function mulberry32(seed) {
+    let a = seed >>> 0;
+    return () => {
+      a = a + 1831565813 | 0;
+      let t = Math.imul(a ^ a >>> 15, 1 | a);
+      t = t + Math.imul(t ^ t >>> 7, 61 | t) ^ t;
+      return ((t ^ t >>> 14) >>> 0) / 4294967296;
+    };
+  }
+  function axisDrift(rnd, omega, bound) {
+    const components = [0, 1, 2].map(() => ({
+      freq: 0.5 + rnd() * 1.4,
+      phase: rnd() * Math.PI * 2,
+      weight: 0.5 + rnd()
+    }));
+    const total = components.reduce((sum, c) => sum + c.weight, 0);
+    return (t) => {
+      let value = 0;
+      for (const c of components) value += c.weight * Math.sin(omega * c.freq * t + c.phase);
+      return value / total * bound;
+    };
+  }
+  function wanderMotion(options = {}) {
+    const boundX = options.bounds?.x ?? 1.4;
+    const boundY = options.bounds?.y ?? 1;
+    const boundZ = options.bounds?.z ?? 0.6;
+    const periodMs = options.periodMs ?? 9e3;
+    const seed = options.seed ?? Math.random() * 1e9 | 0;
+    const rnd = mulberry32(seed);
+    const omega = 2 * Math.PI / periodMs;
+    const driftX = axisDrift(rnd, omega, boundX);
+    const driftY = axisDrift(rnd, omega, boundY);
+    const driftZ = axisDrift(rnd, omega, boundZ);
+    return {
+      positionAt(t) {
+        return { x: driftX(t), y: driftY(t), z: driftZ(t) };
+      }
+    };
+  }
+
+  // src/engines/little-3d-engine/loaders/obj.ts
+  var DEFAULT_COLORS9 = ["#3b82f6", "#8b5cf6", "#ec4899", "#f59e0b", "#10b981", "#ef4444"];
+  function resolveIndex(token, vertexCount) {
+    const n = parseInt(token, 10);
+    return n < 0 ? vertexCount + n : n - 1;
+  }
+  function parseObj(text, options = {}) {
+    const colors = options.colors ?? DEFAULT_COLORS9;
+    const vertices = [];
+    const faces = [];
+    for (const line of text.split("\n")) {
+      const trimmed = line.trim();
+      if (trimmed === "" || trimmed.startsWith("#")) continue;
+      const parts = trimmed.split(/\s+/);
+      const keyword = parts[0];
+      if (keyword === "v") {
+        vertices.push({
+          x: parseFloat(parts[1]),
+          y: parseFloat(parts[2]),
+          z: parseFloat(parts[3])
+        });
+      } else if (keyword === "f") {
+        const indices = [];
+        for (let i = 1; i < parts.length; i++) {
+          const vertexToken = parts[i].split("/")[0];
+          indices.push(resolveIndex(vertexToken, vertices.length));
+        }
+        if (indices.length >= 3) {
+          faces.push({ indices, color: colors[faces.length % colors.length] });
+        }
+      }
+    }
+    return { vertices, faces };
+  }
+
+  // src/engines/little-tween-engine/little-tween-engine.ts
+  var LittleTweenEngine = class {
+    constructor(options = {}) {
+      this.type = options.type ?? "linear";
+      this.overextend = options.overextend ?? false;
+    }
+    /** Map `value` through the selected ease type. */
+    value(value, type = this.type, overextend = this.overextend) {
+      return ease(type, value, overextend);
+    }
+  };
+  return __toCommonJS(stdin_exports);
+})();