procedural-paper 0.0.0-stage → 0.1.0

package/dist/composition/index.js

@@ -0,0 +1,1247 @@
+import { parseColor as tt, mergeParams as gt, stockParams as st, PaperRenderer as vt } from "../index.js";
+import { renderPaperLayers as xt } from "../dom.js";
+import { layout as wt, prepare as yt } from "@chenglou/pretext";
+const ot = 100, lt = /* @__PURE__ */ new Map(), ct = /* @__PURE__ */ new Map();
+function ft(t, n, r) {
+  return `${n} ${r}px "${t.family}"`;
+}
+function bt(t, n) {
+  const r = `${n} ${t.family}`;
+  let o = lt.get(r);
+  return o || (o = document.fonts.load(ft(t, n, 20), "abc ☐☑").catch(() => {
+  }), lt.set(r, o)), o;
+}
+function Mt(t, n, r, o, i) {
+  const c = `${n.family}|${r}|${o}|${i}|${t}`;
+  let m = ct.get(c);
+  return m || (m = yt(t, ft(n, r, ot), { whiteSpace: i, letterSpacing: o * ot }), ct.set(c, m)), m;
+}
+function dt(t, n, r) {
+  const o = t.weight ?? "400", i = t.whiteSpace ?? "normal";
+  let c = 0, m = 0;
+  for (let f = 0; f < r; f++) {
+    const s = t.blocks[f], g = n * (s.scale ?? 1), y = Mt(s.text, t.font, s.weight ?? o, s.spacing ?? 0, i), x = s.text ? wt(y, t.width * ot / g, 1).lineCount : 1, K = t.pitch ?? g * (t.lineHeight ?? 1.2);
+    c += x * K + (s.gap ?? 0) * g, m += x;
+  }
+  return { h: c, lines: m };
+}
+async function Et(t) {
+  await Promise.all([t.weight ?? "400", ...t.blocks.map((m) => m.weight).filter(Boolean)].map((m) => bt(t.font, m)));
+  const n = (m, f) => {
+    const s = dt(t, m, f);
+    return s.h <= t.height + 0.5 && (t.maxLines === void 0 || s.lines <= t.maxLines);
+  };
+  let r = t.blocks.length;
+  if (t.drop !== !1)
+    for (; r > 1 && !n(t.min, r); ) {
+      let m = r - 1;
+      for (; m > 0 && t.blocks[m].keep; ) m--;
+      if (m === 0) break;
+      t.blocks.splice(m, 1), r--;
+    }
+  let o = t.min, i = t.max;
+  if (n(i, r)) o = i;
+  else
+    for (let m = 0; m < 14; m++) {
+      const f = (o + i) / 2;
+      n(f, r) ? o = f : i = f;
+    }
+  const c = Math.floor(o * 4) / 4;
+  return { size: c, kept: r, lines: dt(t, c, r).lines };
+}
+const Ct = (t) => t.replace(/&/g, "&amp;").replace(/</g, "&lt;"), at = /* @__PURE__ */ new WeakMap(), Q = /* @__PURE__ */ new WeakMap();
+function ht(t) {
+  return t.map((n) => {
+    const r = [n.scale && n.scale !== 1 ? `font-size:${n.scale}em` : "", n.gap ? `margin-top:${n.gap}em` : "", n.spacing ? `letter-spacing:${n.spacing}em` : "", n.weight ? `font-weight:${n.weight}` : ""].filter(Boolean).join(";");
+    return `<div class="${n.cls ?? ""}"${r ? ` style="${r}"` : ""}>${n.html ?? Ct(n.text)}</div>`;
+  }).join("");
+}
+function At(t, n) {
+  t.innerHTML = ht(n.blocks), t.style.fontSize = `${n.max}px`, n.pitch ? t.style.lineHeight = `${n.pitch}px` : t.style.lineHeight = `${n.lineHeight ?? 1.2}`, t.style.width = `${n.vertical ? n.height : n.width}px`, t.style.height = `${n.vertical ? n.width : n.height}px`, t.classList.add("fit"), Q.set(t, n), at.set(t, n);
+}
+async function St(t) {
+  const n = [t, ...t.querySelectorAll(".fit")].filter((r) => Q.has(r));
+  for (const r of n) {
+    const o = Q.get(r), i = o.blocks.length, c = await Et(o);
+    r.innerHTML = ht(o.blocks.slice(0, c.kept)), r.style.fontSize = `${c.size}px`, r.dataset.fit = `${c.size}px, ${c.lines} lines${c.kept < i ? `, dropped ${i - c.kept}` : ""}`, Q.delete(r);
+  }
+}
+const kt = { jute: 0, hemp: 1, baker: 2, cotton: 3, satin: 4, grosgrain: 5, wire: 6 }, Z = 96, Rt = (
+  /* glsl */
+  `#version 300 es
+precision highp float;
+#define MAXP ${Z}
+uniform vec4 uP[MAXP];   // x, y, z, layer (1 on top, 2 under); negative = first point of a polyline
+uniform vec4 uA[MAXP];   // arc length at point, polyline length, free-end bits, polyline index
+uniform int uN;
+uniform int uPart;       // 1 front, 2 back
+uniform vec3 uKnots[4];
+uniform int uKnotN;
+uniform vec2 uOrigin;
+uniform float uScale;
+uniform vec3 uLight;
+uniform int uKind;
+uniform vec3 uC1, uC2;
+uniform float uW;
+uniform float uSeed;
+out vec4 outColor;
+
+const int JUTE = 0, HEMP = 1, BAKER = 2, COTTON = 3, SATIN = 4, GROS = 5, WIRE = 6;
+
+float hash(vec2 p) { return fract(sin(dot(p, vec2(127.1, 311.7)) + uSeed * 17.3) * 43758.5453); }
+float vnoise(vec2 p) {
+  vec2 i = floor(p), f = fract(p);
+  f = f * f * (3.0 - 2.0 * f);
+  return mix(mix(hash(i), hash(i + vec2(1, 0)), f.x), mix(hash(i + vec2(0, 1)), hash(i + vec2(1, 1)), f.x), f.y);
+}
+
+bool ribbon() { return uKind == SATIN || uKind == GROS; }
+float plies() { return uKind == BAKER ? 2.0 : (uKind == COTTON ? 4.0 : (uKind == WIRE ? 1.0 : 3.0)); }
+float pitch() { return uW * (uKind == COTTON ? 1.2 : (uKind == BAKER ? 2.4 : 1.9)); }
+
+// height of the cord surface above its centre-line height, in local (t along, s across in -1..1)
+float surf(float t, float s) {
+  float r = uW * 0.5;
+  float a = max(1.0 - s * s, 0.0);
+  if (ribbon()) {
+    // flat band: nearly no camber, crisp edges; grosgrain has fine ribs across its width
+    float h = r * 0.04 * a;
+    if (uKind == GROS) h += 0.16 * sin(t * 6.2831 / 1.1);
+    return h;
+  }
+  float h = r * sqrt(a);
+  if (uKind != WIRE) {
+    float n = plies();
+    float g = fract((t / pitch() + s * 0.45) * n);
+    float groove = 1.0 - smoothstep(0.0, 0.28, g) * smoothstep(1.0, 0.72, g);
+    h -= groove * r * (uKind == COTTON ? 0.18 : 0.38) * sqrt(a);
+  }
+  return h;
+}
+
+struct Hit { float h; float d; float t; float s; float z; float len; float ends; vec2 tan; float side; float knot; };
+
+Hit nearest(vec2 p, int part) {
+  Hit best = Hit(-1e9, 1e9, 0.0, 0.0, 0.0, 1.0, 0.0, vec2(1.0, 0.0), 1.0, 0.0);
+  float r = uW * 0.5;
+  float bestD = 1e9;
+  for (int i = 1; i < MAXP; i++) {
+    if (i >= uN) break;
+    vec4 b = uP[i];
+    if (b.w < 0.0) continue;
+    vec4 a = uP[i - 1];
+    if (part != 0 && int(abs(a.w) + 0.5) != part) continue;
+    vec2 ab = b.xy - a.xy;
+    float L = length(ab);
+    if (L < 1e-4) continue;
+    vec2 td = ab / L;
+    float u = clamp(dot(p - a.xy, td), 0.0, L);
+    vec2 dv = p - (a.xy + td * u);
+    float d = length(dv);
+    if (d > r + 3.0) continue;
+    float side = (td.x * dv.y - td.y * dv.x) >= 0.0 ? 1.0 : -1.0;
+    float z = mix(a.z, b.z, u / L);
+    float t = uA[i - 1].x + u;
+    float s = side * d / r;
+    float h = d < r ? z + surf(t, s) : -1e6 + z - d;
+    if (h > best.h || (best.h < -1e5 && d < bestD)) {
+      best = Hit(h, d, t, s, z, uA[i - 1].y, uA[i - 1].z, td, side, 0.0);
+      bestD = d;
+    }
+  }
+  for (int k = 0; k < 4; k++) {
+    if (k >= uKnotN || part == 2) break;
+    vec3 kn = uKnots[k];
+    vec2 dv = p - kn.xy;
+    float d = length(dv);
+    if (d < kn.z) {
+      float h = 0.4 + kn.z * 0.75 * sqrt(1.0 - (d / kn.z) * (d / kn.z));
+      if (h > best.h) best = Hit(h, d, atan(dv.y, dv.x) * kn.z * 1.3, d / kn.z, 0.4, 1e3, 0.0, normalize(vec2(-dv.y, dv.x) + 1e-5), 1.0, 1.0);
+    }
+  }
+  return best;
+}
+
+vec2 local(vec2 px) { return (px - uOrigin) / uScale; }
+
+void main() {
+  vec2 p = local(gl_FragCoord.xy);
+  Hit o = nearest(p, uPart);
+  float r = uW * 0.5;
+  vec3 L = normalize(uLight);
+  vec2 ld = normalize(L.xy);
+  float tanE = L.z / max(length(L.xy), 1e-3);
+
+  float alpha = 0.0;
+  vec3 col = vec3(0.0);
+  bool fuzzy = uKind == JUTE || uKind == HEMP || uKind == BAKER;
+  if (o.d < r + 3.0) {
+    alpha = clamp((r - o.d) * uScale + 0.5, 0.0, 1.0);
+    // free ends: twine frays (plies part), ribbon gets a V / slanted cut
+    float fromStart = o.t, fromEnd = o.len - o.t;
+    bool startFree = mod(o.ends, 2.0) >= 1.0, endFree = o.ends >= 2.0;
+    float endDist = min(startFree ? fromStart : 1e3, endFree ? fromEnd : 1e3);
+    if (o.knot < 0.5) {
+      if (ribbon()) {
+        float notch = r * 1.6;
+        if (endDist < notch * (1.0 - abs(o.s)) + (o.s * 0.5 + 0.5) * r * 0.25) alpha = 0.0;
+      } else if (endDist < uW * 2.2 && uKind != WIRE) {
+        float g = fract((o.t / pitch() + o.s * 0.45) * plies());
+        float gap = smoothstep(uW * 2.2, 0.0, endDist);
+        alpha *= smoothstep(0.0, 0.25 * gap + 0.01, g) * smoothstep(1.0, 1.0 - 0.25 * gap - 0.01, g);
+      } else if (endDist < 0.6) alpha = 0.0;
+    }
+    // stray fibres around twine
+    if (fuzzy && o.d >= r - 0.3) {
+      float k = o.d - r;
+      float hair = smoothstep(0.62, 0.8, vnoise(vec2(o.t * 0.45, k * 0.9 + o.side * 11.0)) * (1.0 - k / 3.0));
+      alpha = max(alpha, hair * 0.75);
+    }
+    if (alpha > 0.0) {
+      // normal from the local surface: across (s) and along (t)
+      float e = 0.08;
+      float hs = (surf(o.t, clamp(o.s + e, -1.0, 1.0)) - surf(o.t, clamp(o.s - e, -1.0, 1.0))) / (2.0 * e * r);
+      float ht = (surf(o.t + 0.2, o.s) - surf(o.t - 0.2, o.s)) / 0.4;
+      vec2 perp = vec2(-o.tan.y, o.tan.x);
+      vec2 grad = perp * hs + o.tan * ht;
+      if (o.knot > 0.5) {
+        // knots are little domes
+        float q = min(o.s, 0.98);
+        grad = vec2(o.tan.y, -o.tan.x) * (-0.75 * q / sqrt(1.0 - q * q)) + o.tan * ht;
+      }
+      if (uKind == SATIN) grad += o.tan * (0.35 * sin(o.t / 17.0 + uSeed) + 0.18 * sin(o.t / 6.3 + uSeed * 2.0));
+      if (uKind == GROS) grad += o.tan * 0.15 * sin(o.t / 21.0 + uSeed);
+      vec3 n = normalize(vec3(-grad, 1.0));
+      vec3 V = vec3(0.0, 0.0, 1.0);
+      vec3 H = normalize(L + V);
+      float dif = max(dot(n, L), 0.0);
+      float nh = max(dot(n, H), 0.0);
+
+      vec3 base = uC1;
+      float n2 = plies();
+      float ply = mod(floor((o.t / pitch() + o.s * 0.45) * n2), n2);
+      if (uKind == BAKER) base = ply < 0.5 ? uC1 : uC2;
+      else if (uKind == JUTE || uKind == HEMP) base *= 0.9 + 0.08 * ply + 0.2 * (vnoise(vec2(o.t * 0.9, o.s * 3.0 + ply * 5.0)) - 0.5);
+      else if (uKind == COTTON) base *= 0.96 + 0.06 * vnoise(vec2(o.t * 1.4, o.s * 4.0));
+      if (ribbon()) base *= 1.0 - 0.07 * smoothstep(0.86, 1.0, abs(o.s));
+      if (uKind == GROS) base *= 0.92 + 0.08 * sin(o.t * 6.2831 / 1.1);
+      if (o.d >= r) base = mix(base, vec3(1.0), 0.15);
+
+      if (uKind == WIRE) {
+        vec3 rf = reflect(-V, n);
+        float env = 0.35 + 0.35 * rf.z + 0.7 * max(dot(normalize(rf.xy + 1e-5), ld), 0.0) * length(rf.xy);
+        col = base * env + vec3(1.0) * pow(nh, 80.0) * 1.2;
+      } else if (uKind == SATIN) {
+        col = base * (0.38 + 0.62 * dif) + mix(base, vec3(1.0), 0.55) * pow(nh, 26.0) * 0.85 + base * 0.12 * pow(1.0 - n.z, 0.5);
+      } else {
+        float spec = uKind == GROS ? 0.08 : 0.05;
+        col = base * (0.36 + 0.74 * dif) + vec3(1.0) * pow(nh, 18.0) * spec;
+      }
+    }
+  }
+
+  // short cast shadow: the cord's footprint shifted away from the light by its height
+  float shadow = 0.0;
+  if (alpha < 1.0) {
+    float hgt = (ribbon() ? 0.6 : r * 1.6) + 0.3;
+    Hit s = nearest(p + ld * hgt / tanE, uPart);
+    float reach = s.knot > 0.5 ? uW * 1.2 : r;
+    shadow = smoothstep(reach + 1.2, reach - 0.6, s.d) * 0.34;
+  }
+  float outA = alpha + shadow * (1.0 - alpha);
+  outColor = vec4(outA > 0.0 ? clamp(col, 0.0, 1.0) * alpha / outA : vec3(0.0), outA);
+}
+`
+), Tt = `#version 300 es
+in vec2 aPos;
+void main() { gl_Position = vec4(aPos, 0.0, 1.0); }`;
+function Lt() {
+  let t = null, n;
+  const r = /* @__PURE__ */ new Map(), o = (m) => (r.has(m) || r.set(m, t.getUniformLocation(n, m)), r.get(m));
+  function i() {
+    const f = new OffscreenCanvas(1, 1).getContext("webgl2", { premultipliedAlpha: !1, antialias: !1, preserveDrawingBuffer: !0 });
+    if (!f) throw new Error("WebGL2 not available");
+    t = f;
+    const s = (g, y) => {
+      const x = f.createShader(g);
+      if (f.shaderSource(x, y), f.compileShader(x), !f.getShaderParameter(x, f.COMPILE_STATUS)) throw new Error(f.getShaderInfoLog(x) ?? "cord shader error");
+      return x;
+    };
+    if (n = f.createProgram(), f.attachShader(n, s(f.VERTEX_SHADER, Tt)), f.attachShader(n, s(f.FRAGMENT_SHADER, Rt)), f.bindAttribLocation(n, 0, "aPos"), f.linkProgram(n), !f.getProgramParameter(n, f.LINK_STATUS)) throw new Error(f.getProgramInfoLog(n) ?? "cord link error");
+    f.bindVertexArray(f.createVertexArray()), f.bindBuffer(f.ARRAY_BUFFER, f.createBuffer()), f.bufferData(f.ARRAY_BUFFER, new Float32Array([-1, -1, 3, -1, -1, 3]), f.STATIC_DRAW), f.enableVertexAttribArray(0), f.vertexAttribPointer(0, 2, f.FLOAT, !1, 0, 0);
+  }
+  function c(m, f, s, g, y) {
+    t || i();
+    const x = t, K = new Float32Array(Z * 4), z = new Float32Array(Z * 4);
+    let C = 0, d = 1 / 0, l = 1 / 0, w = -1 / 0, k = -1 / 0, I = !1;
+    if (m.lines.forEach((a, p) => {
+      let u = 0;
+      const h = C;
+      a.pts.forEach((v, M) => {
+        if (C >= Z) return;
+        M > 0 && (u += Math.hypot(v[0] - a.pts[M - 1][0], v[1] - a.pts[M - 1][1]));
+        const S = a.under[M] ? 2 : 1;
+        if (K.set([v[0], v[1], v[2], M === 0 ? -S : S], C * 4), z.set([u, 0, (a.freeStart ? 1 : 0) + (a.freeEnd ? 2 : 0), p], C * 4), M < a.pts.length - 1 && S === 2 == (f === "back")) {
+          I = !0;
+          for (const E of [v, a.pts[M + 1]])
+            d = Math.min(d, E[0]), w = Math.max(w, E[0]), l = Math.min(l, E[1]), k = Math.max(k, E[1]);
+        }
+        C++;
+      });
+      for (let v = h; v < C; v++) z[v * 4 + 1] = u;
+    }), f === "front")
+      for (const [a, p, u] of m.knots)
+        I = !0, d = Math.min(d, a - u), w = Math.max(w, a + u), l = Math.min(l, p - u), k = Math.max(k, p + u);
+    if (!I) return null;
+    const L = m.width + 8;
+    d -= L, l -= L, w += L, k += L;
+    const P = Math.ceil(w - d), $ = Math.ceil(k - l), F = Math.ceil(P * s), b = Math.ceil($ * s);
+    x.canvas.width = F, x.canvas.height = b, x.viewport(0, 0, F, b), x.useProgram(n), x.uniform4fv(o("uP"), K), x.uniform4fv(o("uA"), z), x.uniform1i(o("uN"), C), x.uniform1i(o("uPart"), f === "front" ? 1 : 2);
+    const R = new Float32Array(12);
+    m.knots.slice(0, 4).forEach((a, p) => R.set(a, p * 3)), x.uniform3fv(o("uKnots"), R), x.uniform1i(o("uKnotN"), Math.min(4, m.knots.length)), x.uniform2f(o("uOrigin"), -d * s, -l * s), x.uniform1f(o("uScale"), s);
+    const T = y * Math.PI / 180, O = g * Math.PI / 180;
+    x.uniform3f(o("uLight"), Math.cos(T) * Math.cos(O), Math.cos(T) * Math.sin(O), Math.sin(T)), x.uniform1i(o("uKind"), kt[m.kind]);
+    const B = tt(m.colors[0]), D = tt(m.colors[1]);
+    x.uniform3f(o("uC1"), B[0], B[1], B[2]), x.uniform3f(o("uC2"), D[0], D[1], D[2]), x.uniform1f(o("uW"), m.width), x.uniform1f(o("uSeed"), m.seed % 97), x.drawArrays(x.TRIANGLES, 0, 3);
+    const q = new Uint8ClampedArray(F * b * 4);
+    x.readPixels(0, 0, F, b, x.RGBA, x.UNSIGNED_BYTE, q);
+    const e = document.createElement("canvas");
+    return e.width = F, e.height = b, e.getContext("2d").putImageData(new ImageData(q, F, b), 0, 0), e.style.width = `${P}px`, e.style.height = `${$}px`, { canvas: e, w: P, h: $, ox: -d, oy: -l };
+  }
+  return { renderCord: c, dispose() {
+    t?.getExtension("WEBGL_lose_context")?.loseContext(), t = null, r.clear();
+  } };
+}
+const Pt = {
+  pushpin: 0,
+  mappin: 1,
+  thumbtack: 2,
+  magnet: 3,
+  "magnet-neo": 4,
+  "magnet-bar": 5,
+  binder: 6,
+  paperclip: 7,
+  staple: 8,
+  pencil: 9,
+  ruler: 10,
+  eraser: 11,
+  "tape-roll": 12,
+  mug: 13,
+  knife: 14,
+  "washi-roll": 15,
+  eyelet: 16
+}, pt = {
+  pushpin: [9.5, 15],
+  mappin: [6.5, 20],
+  thumbtack: [8, 2.6],
+  magnet: [14, 8],
+  "magnet-neo": [6.5, 3.2],
+  "magnet-bar": [19, 6.5],
+  binder: [34, 10],
+  paperclip: [21, 2.4],
+  staple: [8, 1.2],
+  pencil: [92, 9.5],
+  ruler: [158, 1.6],
+  eraser: [27, 10.5],
+  "tape-roll": [32, 17],
+  mug: [56, 84],
+  knife: [66, 9.5],
+  "washi-roll": [25, 15],
+  eyelet: [9.5, 1.4]
+}, $t = `#version 300 es
+in vec2 aPos;
+void main() { gl_Position = vec4(aPos, 0.0, 1.0); }`, It = (
+  /* glsl */
+  `#version 300 es
+precision highp float;
+uniform vec2 uOrigin;   // object origin in sprite px
+uniform float uScale;   // device px per CSS px
+uniform float uAngle;
+uniform vec3 uLight;
+uniform int uKind;
+uniform vec3 uColor, uColor2;
+uniform float uLength;
+uniform int uPart;
+uniform float uSeed;
+uniform float uMaxH;
+out vec4 outColor;
+
+const int PLASTIC = 1, METAL = 2, BRASS = 3, MATTE = 4, WOOD = 5, GRAPHITE = 6, CERAMIC = 7, COFFEE = 8, PAINT = 9, STEEL = 10, CARD = 11;
+
+float hash(vec2 p) { return fract(sin(dot(p, vec2(127.1, 311.7)) + uSeed * 13.7) * 43758.5453); }
+float vnoise(vec2 p) {
+  vec2 i = floor(p), f = fract(p);
+  f = f * f * (3.0 - 2.0 * f);
+  return mix(mix(hash(i), hash(i + vec2(1, 0)), f.x), mix(hash(i + vec2(0, 1)), hash(i + vec2(1, 1)), f.x), f.y);
+}
+
+// signed distances (negative inside)
+float sdCircle(vec2 p, float r) { return length(p) - r; }
+float sdBox(vec2 p, vec2 b, float r) { vec2 q = abs(p) - b + r; return length(max(q, 0.0)) + min(max(q.x, q.y), 0.0) - r; }
+float sdSeg(vec2 p, vec2 a, vec2 b) { vec2 pa = p - a, ba = b - a; float h = clamp(dot(pa, ba) / dot(ba, ba), 0.0, 1.0); return length(pa - ba * h); }
+// half-circle arc around c from angle a0 to a1 (radians)
+float sdArc(vec2 p, vec2 c, float r, float a0, float a1) {
+  vec2 d = p - c;
+  float a = atan(d.y, d.x);
+  float mid = (a0 + a1) * 0.5, half_ = abs(a1 - a0) * 0.5;
+  float da = abs(mod(a - mid + 3.14159265, 6.2831853) - 3.14159265);
+  if (da <= half_) return abs(length(d) - r);
+  vec2 e0 = c + r * vec2(cos(a0), sin(a0)), e1 = c + r * vec2(cos(a1), sin(a1));
+  return min(length(p - e0), length(p - e1));
+}
+
+struct Hit { float h; float sd; int mat; vec3 col; };
+
+void add(inout Hit o, float sd, float h, int mat, vec3 col) {
+  if (sd < 0.0 && h > o.h) { o.h = h; o.mat = mat; o.col = col; }
+  o.sd = min(o.sd, sd);
+}
+
+// round tube of radius r lying with its top at height top: profile across distance d
+float tube(float d, float r, float top) { return top - r + sqrt(max(r * r - d * d, 0.0)); }
+float dome(float d, float R) { return sqrt(max(1.0 - (d / R) * (d / R), 0.0)); }
+
+Hit scene(vec2 p) {
+  Hit o = Hit(0.0, 1e5, 0, vec3(0.0));
+  float d = length(p);
+  if (uKind == 0) { // push pin: flared grip, domed cap
+    float R = 9.0;
+    add(o, sdCircle(p, R), 11.0 + 2.2 * dome(d, R), PLASTIC, uColor);
+    if (d < R * 0.55) add(o, sdCircle(p, R * 0.55), 13.5 + 1.4 * dome(d, R * 0.55), PLASTIC, uColor * 1.08);
+  } else if (uKind == 1) { // map pin: sphere on a needle
+    add(o, sdCircle(p, 0.7), 14.0, METAL, vec3(0.8));
+    add(o, sdCircle(p, 5.8), 14.0 + 5.8 * dome(d, 5.8), PLASTIC, uColor);
+  } else if (uKind == 2) { // thumbtack
+    float R = 7.6;
+    float h = 1.1 + 1.2 * (1.0 - (d / R) * (d / R)) - 0.7 * exp(-(d / 1.3) * (d / 1.3));
+    add(o, sdCircle(p, R), h, BRASS, uColor);
+  } else if (uKind == 3) { // dome magnet
+    float R = 13.0;
+    add(o, sdCircle(p, R), 3.5 + 4.0 * pow(dome(d, R), 0.7), PLASTIC, uColor);
+  } else if (uKind == 4) { // neodymium disc
+    float R = 6.0;
+    add(o, sdCircle(p, R), 2.2 + 0.8 * smoothstep(R, R - 0.9, d), METAL, vec3(0.86, 0.87, 0.9));
+  } else if (uKind == 5) { // bar magnet
+    float sd = sdBox(p, vec2(17.0, 8.5), 3.0);
+    add(o, sd, 6.0 * smoothstep(0.0, -2.5, sd), PLASTIC, uColor);
+  } else if (uKind == 6) { // binder clip: jaw on the paper (+y), hinge past the edge (-y), handles out
+    float w = 15.0;
+    float sd = sdBox(p - vec2(0.0, -4.0), vec2(w, 10.0), 1.2);
+    float t = clamp((p.y + 14.0) / 20.0, 0.0, 1.0);
+    float bevel = smoothstep(0.0, -1.2, sd);
+    add(o, sd, mix(9.0, 1.8, t) * bevel, PAINT, uColor);
+    // folded-out wire handles
+    float wr = 1.1;
+    for (int s = -1; s <= 1; s += 2) {
+      vec2 a = vec2(float(s) * w * 0.72, -13.0), b = vec2(float(s) * w * 0.55, -30.0);
+      float dw = sdSeg(p, a, b);
+      float tt = clamp((-p.y - 13.0) / 17.0, 0.0, 1.0);
+      add(o, dw - wr, tube(dw, wr, mix(9.5, 3.0, tt)), METAL, vec3(0.9));
+    }
+    float db = sdSeg(p, vec2(-w * 0.55, -30.0), vec2(w * 0.55, -30.0));
+    add(o, db - wr, tube(db, wr, 3.0), METAL, vec3(0.9));
+  } else if (uKind == 7) { // gem paper clip, 10 x 36, origin at its centre
+    vec2 q = p + vec2(5.0, 18.0);
+    float r = 0.75;
+    float back = min(min(sdSeg(q, vec2(0.0, 8.0), vec2(0.0, 31.0)), sdArc(q, vec2(5.0, 31.0), 5.0, 0.0, 3.14159265)),
+                     sdSeg(q, vec2(10.0, 31.0), vec2(10.0, 5.0)));
+    float front = min(min(sdArc(q, vec2(6.5, 5.0), 3.5, -3.14159265, 0.0), sdSeg(q, vec2(3.0, 5.0), vec2(3.0, 27.0))),
+                      min(sdArc(q, vec2(5.0, 27.0), 2.0, 0.0, 3.14159265), sdSeg(q, vec2(7.0, 27.0), vec2(7.0, 11.0))));
+    float dd = uPart == 1 ? front : (uPart == 2 ? back : min(front, back));
+    add(o, dd - r, tube(dd, r, 1.6), METAL, uColor);
+  } else if (uKind == 8) { // staple crown
+    float dd = sdSeg(p, vec2(-6.0, 0.0), vec2(6.0, 0.0));
+    add(o, dd - 0.6, 0.9 + 0.2 * smoothstep(0.6, 0.0, dd), METAL, vec3(0.85));
+  } else if (uKind == 9) { // pencil along x, tip at -L/2
+    float L = uLength, w = 8.6, R = w * 0.5;
+    float x = p.x + L * 0.5;            // 0 at the tip
+    float ay = abs(p.y);
+    float cone = 24.0;
+    if (x >= 0.0 && x < cone) {
+      float rr = R * x / cone;
+      if (ay < rr) {
+        bool lead = x < 6.0;
+        vec3 wood = uColor2;
+        add(o, ay - rr, R + sqrt(max(rr * rr - p.y * p.y, 0.0)) - (R - rr) * 0.6, lead ? GRAPHITE : WOOD, lead ? vec3(0.17) : wood);
+      }
+      o.sd = min(o.sd, ay - rr);
+    } else if (x >= cone && x <= L) {
+      float hexTop = R * 1.0 - max(0.0, ay - w * 0.25) * 1.15;
+      float sd = max(ay - R, max(cone - x, x - L));
+      int mat = PAINT; vec3 c = uColor;
+      if (x > L - 16.0 && x <= L - 6.0) { mat = METAL; c = vec3(0.82, 0.76, 0.55); hexTop = sqrt(max(R * R - p.y * p.y, 0.0)) * (0.92 + 0.08 * step(0.5, fract(x * 0.5))); }
+      else if (x > L - 6.0) { mat = MATTE; c = vec3(0.92, 0.55, 0.55); hexTop = sqrt(max(R * R - p.y * p.y, 0.0)) * 0.95; }
+      add(o, sd, R + hexTop * 0.95, mat, c);
+    }
+  } else if (uKind == 10) { // steel ruler
+    float L = uLength;
+    float sd = sdBox(p, vec2(L * 0.5, 13.0), 1.5);
+    vec3 c = vec3(0.78, 0.79, 0.8) * (0.93 + 0.07 * vnoise(vec2(p.x * 0.05, p.y * 3.0)));
+    float x = p.x + L * 0.5 - 8.0;
+    float mm = 3.7795;
+    float k = floor(x / mm + 0.5);
+    float tl = mod(k, 10.0) == 0.0 ? 9.0 : (mod(k, 5.0) == 0.0 ? 6.5 : 4.0);
+    if (x > -0.5 && x < L - 16.0 && abs(x - k * mm) < 0.35 && p.y < -13.0 + tl) c *= 0.25;
+    add(o, sd, 1.4 * smoothstep(0.0, -0.8, sd), STEEL, c);
+  } else if (uKind == 11) { // eraser with sleeve
+    float sd = sdBox(p, vec2(23.0, 10.0), 3.0);
+    float h = 9.5 * smoothstep(0.0, -3.5, sd);
+    bool sleeve = p.x > -8.0 && p.x < 20.0;
+    add(o, sd, h + (sleeve ? 0.4 : 0.0), sleeve ? CARD : MATTE, sleeve ? uColor : vec3(0.95, 0.94, 0.92));
+  } else if (uKind == 12 || uKind == 15) { // tape roll / washi roll seen from above
+    bool washi = uKind == 15;
+    float Ro = washi ? 24.0 : 31.0, Ri = washi ? 16.0 : 21.0, Rc = Ri - 2.6;
+    float H = washi ? 14.0 : 16.5;
+    float sdOut = d - Ro;
+    if (d > Ri && d < Ro) {
+      vec3 c = uColor * (0.93 + 0.07 * sin(d * 7.0 + vnoise(p * 0.3) * 3.0));
+      add(o, sdOut, H - 0.6 * smoothstep(Ro - 1.2, Ro, d) - 0.6 * smoothstep(Ri + 1.2, Ri, d), MATTE, c);
+    }
+    if (d > Rc && d <= Ri) add(o, -1.0, H + 0.4, CARD, vec3(0.62, 0.5, 0.37));
+    o.sd = min(o.sd, max(sdOut, Rc - d));
+  } else if (uKind == 13) { // mug: rim, coffee, handle
+    float Ro = 38.0, Ri = 33.5;
+    vec2 hp = p - vec2(Ro + 7.0, 0.0);
+    float dh = abs(length(hp * vec2(1.0, 0.8)) - 9.0);
+    if (p.x > Ro - 2.0) add(o, dh - 3.2, tube(dh, 3.2, 52.0), CERAMIC, uColor);
+    if (d < Ro) {
+      if (d > Ri) add(o, d - Ro, 80.0 + 1.5 * dome(abs(d - (Ro + Ri) * 0.5), (Ro - Ri) * 0.5), CERAMIC, uColor);
+      else {
+        float crema = smoothstep(Ri - 4.0, Ri - 0.5, d);
+        vec3 c = mix(vec3(0.17, 0.09, 0.05), vec3(0.42, 0.27, 0.15), crema * 0.7);
+        add(o, d - Ro, 66.0 + 2.0 * crema, COFFEE, c);
+      }
+    }
+    o.sd = min(o.sd, d - Ro);
+  } else if (uKind == 16) { // metal eyelet: rolled ring around a 6px hole, see-through middle
+    float ri = 6.0, ro = 9.0;
+    if (d > ri - 0.4 && d < ro) {
+      float m = (d - ri) / (ro - ri);
+      add(o, max(d - ro, ri - 0.4 - d), 0.35 + 1.0 * sqrt(max(1.0 - (2.0 * m - 0.7) * (2.0 * m - 0.7), 0.0)), BRASS, uColor);
+    }
+    o.sd = min(o.sd, max(d - ro, ri - 0.4 - d));
+  } else if (uKind == 14) { // craft knife along x, blade at -L/2
+    float L = uLength;
+    float x = p.x + L * 0.5;
+    float body = sdBox(p - vec2(8.0, 0.0), vec2(L * 0.5 - 8.0, 4.8), 4.5);
+    float ay = abs(p.y);
+    if (body < 0.0) {
+      float hh = 4.8 + sqrt(max(4.8 * 4.8 - p.y * p.y, 0.0));
+      bool grip = x > 30.0 && x < 70.0;
+      bool collar = x > 16.0 && x < 24.0;
+      vec3 c = grip ? uColor : vec3(0.75, 0.77, 0.8);
+      if (grip) hh += 0.5 * sin(x * 1.6);
+      add(o, body, hh, grip ? MATTE : (collar ? METAL : STEEL), c);
+    }
+    // blade: angled triangle
+    vec2 b = vec2(x, p.y);
+    float blade = max(max(-b.x, b.x - 18.0), max(-b.y - 3.2, b.y - 3.2 + (18.0 - b.x) * 0.35));
+    if (x < 18.0 && blade < 0.0) add(o, blade, 1.2, METAL, vec3(0.92));
+    o.sd = min(o.sd, min(body, x < 18.0 ? blade : 1e5));
+  }
+  return o;
+}
+
+float heightAt(vec2 p) { return scene(p).h; }
+
+vec2 local(vec2 px) {
+  vec2 v = (px - uOrigin) / uScale;
+  float c = cos(uAngle), s = sin(uAngle);
+  return vec2(c * v.x + s * v.y, -s * v.x + c * v.y);
+}
+vec2 toLocalDir(vec2 dir) {
+  float c = cos(uAngle), s = sin(uAngle);
+  return vec2(c * dir.x + s * dir.y, -s * dir.x + c * dir.y);
+}
+
+void main() {
+  vec2 px = gl_FragCoord.xy;
+  vec2 p = local(px);
+  Hit o = scene(p);
+  float alpha = clamp(0.5 - o.sd * uScale, 0.0, 1.0);
+
+  // light in the object's frame
+  vec2 l2 = toLocalDir(uLight.xy);
+  vec3 L = normalize(vec3(l2, uLight.z));
+  float tanE = L.z / max(length(L.xy), 1e-3);
+  vec2 ld = normalize(L.xy);
+
+  // shadow: march towards the light, compare the ray height with the field
+  float h0 = o.h * step(0.0, -o.sd);
+  float vis = 1.0;
+  float reach = (uMaxH - h0) / tanE + 2.0;
+  for (int i = 1; i <= 40; i++) {
+    float t = reach * float(i) / 40.0;
+    float z = h0 + t * tanE;
+    float hh = heightAt(p + ld * t);
+    if (hh > 0.001) vis = min(vis, clamp((z - hh) / (0.07 * t + 0.5), 0.0, 1.0));
+    if (vis <= 0.0) break;
+  }
+
+  vec3 col = vec3(0.0);
+  if (alpha > 0.0) {
+    float e = 0.3;
+    float hx = (heightAt(p + vec2(e, 0.0)) - heightAt(p - vec2(e, 0.0))) / (2.0 * e);
+    float hy = (heightAt(p + vec2(0.0, e)) - heightAt(p - vec2(0.0, e))) / (2.0 * e);
+    vec3 n = normalize(vec3(-hx, -hy, 1.0));
+    vec3 V = vec3(0.0, 0.0, 1.0);
+    vec3 H = normalize(L + V);
+    float dif = max(dot(n, L), 0.0) * (0.35 + 0.65 * vis);
+    float nh = max(dot(n, H), 0.0);
+    vec3 r = reflect(-V, n);
+    vec3 base = o.col;
+    int m = o.mat;
+    if (m == METAL || m == BRASS || m == STEEL) {
+      vec3 tint = base;
+      float horizon = length(r.xy);
+      float env = 0.32 + 0.38 * r.z + 0.75 * max(dot(normalize(r.xy + 1e-5), ld), 0.0) * horizon;
+      if (m == STEEL) env += 0.08 * (vnoise(vec2(p.x * 0.08, p.y * 4.0)) - 0.5);
+      col = tint * env * (0.55 + 0.45 * vis) + vec3(1.0) * pow(nh, 90.0) * 1.4 * vis;
+    } else if (m == COFFEE) {
+      col = base * (0.6 + 0.5 * dif) + vec3(1.0) * pow(nh, 180.0) * 1.2 * vis;
+    } else {
+      float sp = m == PLASTIC ? 0.55 : (m == CERAMIC ? 0.45 : (m == PAINT ? 0.5 : (m == GRAPHITE ? 0.25 : 0.05)));
+      float sh = m == PLASTIC ? 70.0 : (m == CERAMIC ? 50.0 : 40.0);
+      if (m == WOOD) base *= 0.9 + 0.12 * sin(p.x * 0.9 + vnoise(p * vec2(0.15, 1.2)) * 6.0);
+      if (m == CARD) base *= 0.92 + 0.1 * vnoise(p * 0.8);
+      if (m == MATTE) base *= 0.95 + 0.06 * vnoise(p * 1.3);
+      col = base * (0.42 + 0.7 * dif) + vec3(1.0) * pow(nh, sh) * sp * vis;
+      // soft translucent glow for coloured plastic
+      if (m == PLASTIC) col += base * 0.12 * (1.0 - n.z);
+    }
+  }
+  // ground shadow under / around the object
+  float shadow = (1.0 - vis) * 0.42 * (1.0 - alpha);
+  float outA = alpha + shadow;
+  outColor = vec4(outA > 0.0 ? clamp(col, 0.0, 1.0) * alpha / outA : vec3(0.0), outA);
+}
+`
+);
+function Nt() {
+  let t = null, n;
+  const r = /* @__PURE__ */ new Map();
+  function o() {
+    const g = new OffscreenCanvas(1, 1).getContext("webgl2", { premultipliedAlpha: !1, antialias: !1, preserveDrawingBuffer: !0 });
+    if (!g) throw new Error("WebGL2 not available");
+    t = g;
+    const y = (z, C) => {
+      const d = g.createShader(z);
+      if (g.shaderSource(d, C), g.compileShader(d), !g.getShaderParameter(d, g.COMPILE_STATUS)) throw new Error(g.getShaderInfoLog(d) ?? "shader error");
+      return d;
+    };
+    if (n = g.createProgram(), g.attachShader(n, y(g.VERTEX_SHADER, $t)), g.attachShader(n, y(g.FRAGMENT_SHADER, It)), g.bindAttribLocation(n, 0, "aPos"), g.linkProgram(n), !g.getProgramParameter(n, g.LINK_STATUS)) throw new Error(g.getProgramInfoLog(n) ?? "link error");
+    const x = g.createVertexArray();
+    g.bindVertexArray(x);
+    const K = g.createBuffer();
+    g.bindBuffer(g.ARRAY_BUFFER, K), g.bufferData(g.ARRAY_BUFFER, new Float32Array([-1, -1, 3, -1, -1, 3]), g.STATIC_DRAW), g.enableVertexAttribArray(0), g.vertexAttribPointer(0, 2, g.FLOAT, !1, 0, 0);
+  }
+  const i = (s) => (r.has(s) || r.set(s, t.getUniformLocation(n, s)), r.get(s)), c = { azimuth: 225, elevation: 48 };
+  function m(s, g) {
+    t || o();
+    const y = t, [x, K] = pt[s.kind], z = s.length ?? (s.kind === "ruler" ? 300 : s.kind === "knife" ? 120 : 170), C = s.kind === "pencil" || s.kind === "ruler" || s.kind === "knife" ? z / 2 + 14 : x, d = (s.elevation ?? c.elevation) * Math.PI / 180, l = (s.azimuth ?? c.azimuth) * Math.PI / 180, w = K / Math.tan(d) + 3, k = -Math.cos(l) * w, I = -Math.sin(l) * w, L = -C + Math.min(0, k) - 2, P = C + Math.max(0, k) + 2, $ = -C + Math.min(0, I) - 2, F = C + Math.max(0, I) + 2, b = Math.ceil(P - L), R = Math.ceil(F - $), T = Math.ceil(b * g), O = Math.ceil(R * g);
+    y.canvas.width = T, y.canvas.height = O, y.viewport(0, 0, T, O), y.useProgram(n);
+    const B = tt(s.color ?? "#d33b3b"), D = tt(s.color2 ?? "#e8c79a");
+    y.uniform2f(i("uOrigin"), -L * g, -$ * g), y.uniform1f(i("uScale"), g), y.uniform1f(i("uAngle"), (s.angle ?? 0) * Math.PI / 180), y.uniform3f(i("uLight"), Math.cos(d) * Math.cos(l), Math.cos(d) * Math.sin(l), Math.sin(d)), y.uniform1i(i("uKind"), Pt[s.kind]), y.uniform3f(i("uColor"), B[0], B[1], B[2]), y.uniform3f(i("uColor2"), D[0], D[1], D[2]), y.uniform1f(i("uLength"), z), y.uniform1i(i("uPart"), s.part === "front" ? 1 : s.part === "back" ? 2 : 0), y.uniform1f(i("uSeed"), s.seed ?? 0), y.uniform1f(i("uMaxH"), K), y.drawArrays(y.TRIANGLES, 0, 3);
+    const q = new Uint8ClampedArray(T * O * 4);
+    y.readPixels(0, 0, T, O, y.RGBA, y.UNSIGNED_BYTE, q);
+    const e = document.createElement("canvas");
+    return e.width = T, e.height = O, e.getContext("2d").putImageData(new ImageData(q, T, O), 0, 0), e.style.width = `${b}px`, e.style.height = `${R}px`, s.kind === "ruler" && f(e, -L, -$, z, s.angle ?? 0, g), { canvas: e, w: b, h: R, ox: -L, oy: -$ };
+  }
+  function f(s, g, y, x, K, z) {
+    const C = s.getContext("2d");
+    C.save(), C.scale(z, z), C.translate(g, y), C.rotate(K * Math.PI / 180), C.font = "600 7.5px 'IBM Plex Mono', monospace", C.fillStyle = "rgba(30,30,32,0.85)", C.textAlign = "center";
+    const d = 3.7795;
+    for (let l = 1; l * 10 * d < x - 18; l++) C.fillText(String(l), -x / 2 + 8 + l * 10 * d, -1);
+    C.font = "500 6px 'IBM Plex Mono', monospace", C.textAlign = "left", C.fillText("STAINLESS  ·  30 cm", -x / 2 + 10, 9), C.restore();
+  }
+  return { renderProp: m, dispose() {
+    t?.getExtension("WEBGL_lose_context")?.loseContext(), t = null, r.clear();
+  } };
+}
+function zt(t) {
+  const n = Nt(), r = Lt(), o = t.light, i = () => t.renderer, { renderProp: c } = n, { renderCord: m } = r, { preloadPhotos: f, renderPhoto: s, runPhotos: g } = t.photos, y = () => t.pixelRatio?.() ?? Math.min(2, window.devicePixelRatio || 1), x = { x: 1.5, y: 4 }, K = 9, z = (e, a, p) => {
+    const u = p * Math.PI / 180, h = Math.cos(u), v = Math.sin(u);
+    return [h * e - v * a, v * e + h * a];
+  };
+  function C() {
+    const [e, a] = z(x.x, x.y, o.azimuth - 225), p = Math.hypot(e, a) || 1;
+    return [e / p, a / p];
+  }
+  function d(e, a) {
+    const p = a ? gt(st(e), a) : st(e), u = t.grain();
+    return {
+      ...p,
+      scale: p.scale * u,
+      fibers: { ...p.fibers, density: p.fibers.density / u },
+      specks: { ...p.specks, density: p.specks.density / u }
+    };
+  }
+  function l(e, a, p, u, h) {
+    const v = document.createElement("canvas");
+    return v.className = h, v.width = a, v.height = p, v.getContext("2d").putImageData(new ImageData(e, a, p), 0, 0), v.style.width = `${a / u}px`, v.style.height = `${p / u}px`, v;
+  }
+  function w(e, a, p, u) {
+    const h = Math.ceil(p * 2), v = document.createElement("canvas");
+    v.className = u, v.width = e.width + 2 * h * a, v.height = e.height + 2 * h * a;
+    const M = v.getContext("2d");
+    return M.filter = `blur(${p * a}px)`, M.drawImage(e, h * a, h * a), M.filter = "none", M.globalCompositeOperation = "source-in", M.fillStyle = "#000", M.fillRect(0, 0, v.width, v.height), v.style.width = `${v.width / a}px`, v.style.height = `${v.height / a}px`, { canvas: v, pad: h };
+  }
+  function k(e, a, p, u, h, v) {
+    const M = d(e, a);
+    M.lighting = { ...M.lighting, azimuth: o.azimuth - v, elevation: o.elevation };
+    const S = p.shadow === !1 ? !1 : { ...p.shadow ?? {} };
+    if (S) {
+      const A = Math.tan((90 - o.elevation) * Math.PI / 180) / Math.tan(42 * Math.PI / 180), _ = (S.offsetX ?? x.x) * A, W = (S.offsetY ?? x.y) * A, [V, N] = z(_, W, o.azimuth - 225);
+      [S.offsetX, S.offsetY] = z(V, N, -v);
+    }
+    const E = y();
+    return { params: M, spec: { ...p, width: u, height: h, pixelRatio: E, shadow: S }, k: E };
+  }
+  function I(e, a, p, u, h, v, M) {
+    const { params: S, spec: E, k: A } = k(e, a, p, u, h, v);
+    return { res: i().renderSheet(S, E, M), k: A };
+  }
+  const L = ["pushpin", "mappin", "thumbtack", "staple"], P = ["magnet", "magnet-neo", "magnet-bar"], $ = ["binder", "paperclip"];
+  function F(e) {
+    return e.startsWith("card") || e === "chipboard" || e === "polaroid" ? "thick" : ["napkin", "tracing", "thermal", "newsprint", "newsprint-old", "clear-tape", "washi", "masking"].includes(e) ? "thin" : "normal";
+  }
+  function b(e, a) {
+    const p = (E) => e.attach.filter((A) => !A.binds && E(A)).map((A) => {
+      const _ = a.get(A);
+      return A.type === "sheet" ? { x: A.x, y: A.y, el: _, angle: A.angle, len: A.w } : A.type === "prop" ? { x: A.x, y: A.y, el: _ } : A.type === "photo" ? { x: A.cx, y: A.cy, el: _ } : { x: e.w / 2, y: 28, el: _ };
+    }), u = p((E) => E.type === "prop" && L.includes(E.prop.kind));
+    if (u.length) return { kind: "pinned", points: u };
+    const h = p((E) => E.type === "prop" && P.includes(E.prop.kind));
+    if (h.length) return { kind: "magnetic", points: h };
+    const v = p((E) => E.type === "sheet" && E.label.endsWith("tape"));
+    if (v.length) return { kind: "taped", points: v };
+    const M = p((E) => E.type === "prop" && $.includes(E.prop.kind) && E.layer === "front");
+    if (M.length) return { kind: "hung", points: M };
+    const S = p((E) => E.type === "cord");
+    return S.length ? { kind: "hung", points: S } : e.paper === "sticky" ? { kind: "adhesive", points: [{ x: e.w / 2, y: e.h * 0.09 }] } : { kind: "free", points: [] };
+  }
+  function R(e) {
+    const a = document.createElement("div");
+    a.className = "card pc-card", a.style.width = `${e.w}px`, a.style.height = `${e.h}px`;
+    const p = document.createElement("div");
+    p.className = "shadow";
+    const u = document.createElement("div");
+    u.className = "back";
+    const h = document.createElement("div");
+    h.className = "paper";
+    const v = document.createElement("div");
+    v.className = "front";
+    const M = document.createElement("div");
+    M.className = "sheen", a.append(p, u, h, v);
+    const S = { el: a, paper: h, shadow: p, sheen: M, holder: { kind: "free", points: [] }, thickness: F(e.paper), copy: null, litFor: null, render: async () => {
+    } };
+    let E = !1;
+    return S.render = async (A = e.rot) => {
+      h.replaceChildren(), u.replaceChildren(), v.replaceChildren(), p.replaceChildren(), S.copy = null, S.litFor = A, e.ink && await St(e.ink), E || (t.onPrepared?.(e, S, A), E = !0), e.ink && await g(e.ink), await f(e.attach.flatMap((G) => G.type === "photo" ? [G.photo] : []));
+      const { params: _, spec: W, k: V } = k(e.paper, e.params, e.look, e.w, e.h, A), N = xt(i(), _, W), H = N.shadow;
+      H.className = "contact";
+      const U = w(H, V, K, "lifted");
+      U.canvas.style.left = `${parseFloat(H.style.left) - U.pad}px`, U.canvas.style.top = `${parseFloat(H.style.top) - U.pad}px`, p.append(H, U.canvas), N.base.className = "base", N.shade.className = "shade", h.append(N.base), e.ink && h.append(e.ink), h.append(N.shade, M);
+      for (const G of [e.ink, M])
+        G && Object.assign(G.style, { maskImage: N.mask, webkitMaskImage: N.mask, maskPosition: N.maskPosition, maskSize: N.maskSize, maskRepeat: "no-repeat" });
+      const X = /* @__PURE__ */ new Map();
+      for (const G of e.attach) {
+        const j = T(G, A, G.type === "cord" ? v : G.layer === "back" ? u : v, u);
+        j && X.set(G, j);
+      }
+      S.holder = b(e, X), a.classList.add("ready");
+    }, S;
+  }
+  function T(e, a, p, u) {
+    if (e.type === "cord") {
+      let S = null;
+      for (const E of ["back", "front"]) {
+        const A = m(e.spec, E, y(), o.azimuth - a, o.elevation);
+        A && (A.canvas.className = "prop-sprite", A.canvas.style.left = `${-A.ox}px`, A.canvas.style.top = `${-A.oy}px`, (E === "back" ? u : p).appendChild(A.canvas), E === "front" && (S = A.canvas));
+      }
+      return S;
+    }
+    if (e.type === "html")
+      return p.appendChild(e.el), e.el;
+    if (e.type === "prop") {
+      const S = c({ ...e.prop, azimuth: o.azimuth - a, elevation: o.elevation }, y());
+      return S.canvas.className = "prop-sprite", S.canvas.style.left = `${e.x - S.ox}px`, S.canvas.style.top = `${e.y - S.oy}px`, S.canvas.style.transformOrigin = `${S.ox}px ${S.oy}px`, p.appendChild(S.canvas), S.canvas;
+    }
+    if (e.type === "photo") return O(e, a, p);
+    const { res: h, k: v } = I(e.paper, e.params, e.look, e.w, e.h, a + e.angle, ["color"]), M = l(h.maps.color.data, h.width, h.height, v, "tape");
+    return M.style.left = `${e.x - h.width / v / 2}px`, M.style.top = `${e.y - h.height / v / 2}px`, M.style.transform = `rotate(${e.angle}deg)`, p.appendChild(M), M;
+  }
+  function O(e, a, p) {
+    const { res: u, k: h } = I(e.paper, e.params, e.look, e.w, e.h, a + e.angle, ["base", "shade", "shadow"]), v = u.margin, M = l(u.maps.base.data, u.width, u.height, h, ""), S = l(u.maps.shade.data, u.width, u.height, h, ""), E = document.createElement("canvas");
+    E.width = u.width, E.height = u.height;
+    const A = E.getContext("2d");
+    A.drawImage(M, 0, 0);
+    const _ = s(e.photo, e.window.w, e.window.h, h);
+    A.globalCompositeOperation = "source-atop", A.drawImage(_, v + e.window.x * h, v + e.window.y * h), A.globalCompositeOperation = "hard-light", A.drawImage(S, 0, 0), A.globalCompositeOperation = "destination-in", A.drawImage(M, 0, 0);
+    const W = l(u.maps.shadow.data, u.width, u.height, h, "tape photo-shadow"), V = (N) => (N.style.left = `${e.cx - u.width / h / 2}px`, N.style.top = `${e.cy - u.height / h / 2}px`, N.style.width = `${u.width / h}px`, N.style.height = `${u.height / h}px`, N.style.transform = `rotate(${e.angle}deg)`, N);
+    return E.className = "tape photo-print", p.append(V(W), V(E)), E;
+  }
+  function B(e) {
+    const a = c({ ...e, azimuth: o.azimuth, elevation: o.elevation }, y()), p = document.createElement("div");
+    p.className = "prop", p.style.width = `${a.w}px`, p.style.height = `${a.h}px`, a.canvas.className = "prop-sprite";
+    const u = y(), h = w(a.canvas, u, 7, "lifted"), v = document.createElement("div");
+    return v.className = "shadow", h.canvas.style.left = `${-h.pad}px`, h.canvas.style.top = `${-h.pad}px`, v.appendChild(h.canvas), p.append(v, a.canvas, q(a.canvas, a.w, a.h)), { el: p, ox: a.ox, oy: a.oy, w: a.w, h: a.h, shadow: v, height: pt[e.kind][1] };
+  }
+  const D = 2;
+  function q(e, a, p) {
+    const { data: u } = e.getContext("2d").getImageData(0, 0, e.width, e.height), h = e.width / a, v = e.height / p, M = Math.ceil(a / D), S = Math.ceil(p / D), E = new Uint8Array(M * S);
+    for (let N = 0; N < e.height; N++)
+      for (let H = 0; H < e.width; H++)
+        u[(N * e.width + H) * 4 + 3] > 128 && (E[Math.floor(N / v / D) * M + Math.floor(H / h / D)] = 1);
+    const A = (N, H) => {
+      for (let U = -1; U <= 1; U++)
+        for (let X = -1; X <= 1; X++) {
+          const G = N + X, j = H + U;
+          if (G >= 0 && j >= 0 && G < M && j < S && E[j * M + G]) return !0;
+        }
+      return !1;
+    };
+    let _ = "";
+    for (let N = 0; N < S; N++)
+      for (let H = 0; H < M; H++) {
+        if (!A(H, N)) continue;
+        const U = H;
+        for (; H + 1 < M && A(H + 1, N); ) H++;
+        _ += `M${U * D} ${N * D}h${(H - U + 1) * D}v${D}h${-(H - U + 1) * D}z`;
+      }
+    const W = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    W.setAttribute("class", "prop-hit"), W.setAttribute("width", `${a}`), W.setAttribute("height", `${p}`);
+    const V = document.createElementNS("http://www.w3.org/2000/svg", "path");
+    return V.setAttribute("d", _), W.appendChild(V), W;
+  }
+  return { buildCard: R, buildProp: B, shadowDir: C, grainParams: d, dpr: y, dispose() {
+    n.dispose(), r.dispose();
+  } };
+}
+const Y = /* @__PURE__ */ new WeakMap();
+function Ot(t, n, r = () => Math.min(2, devicePixelRatio || 1)) {
+  const o = /* @__PURE__ */ new Map(), i = /* @__PURE__ */ new Map(), c = t;
+  async function m(d) {
+    let l = i.get(d);
+    return l || (l = (async () => {
+      const w = new Image();
+      return w.crossOrigin = "anonymous", w.src = await n(d), await w.decode(), o.set(d, w), w;
+    })().catch((w) => {
+      throw i.delete(d), new Error(`Unable to load photo ${d}: ${w}`);
+    }), i.set(d, l)), l;
+  }
+  const f = {
+    none: "contrast(1.04) saturate(1.04)",
+    bw: "grayscale(1) contrast(1.18) brightness(1.03)",
+    sepia: "sepia(0.85) contrast(1.06) brightness(0.98) saturate(0.9)",
+    faded: "contrast(0.82) saturate(0.68) brightness(1.06)",
+    instant: "contrast(0.9) saturate(0.85) brightness(1.04)",
+    warm: "sepia(0.22) saturate(1.18) contrast(1.05)",
+    expired: "contrast(0.86) saturate(1.3) hue-rotate(-10deg) brightness(1.04)"
+  };
+  let s = null;
+  function g() {
+    if (s) return s;
+    const d = document.createElement("canvas");
+    d.width = d.height = 128;
+    const l = d.getContext("2d", { willReadFrequently: !0 }), w = l.createImageData(128, 128);
+    let k = 12345;
+    for (let I = 0; I < w.data.length; I += 4) {
+      k = k * 1103515245 + 12345 >>> 0;
+      const L = 128 + ((k >>> 16 & 255) - 128) * 0.9;
+      w.data[I] = w.data[I + 1] = w.data[I + 2] = L, w.data[I + 3] = 255;
+    }
+    return l.putImageData(w, 0, 0), s = d;
+  }
+  const y = (d, l) => {
+    const w = Math.sin(d * 12.9898 + l * 78.233) * 43758.5453;
+    return w - Math.floor(w);
+  };
+  function x(d, l, w, k) {
+    const I = d.getImageData(0, 0, l, w), L = I.data, P = 3.4 * k, $ = [0.26, 1.31, 0.79].map((b) => [Math.cos(b), Math.sin(b)]), F = Math.PI * 2 / P;
+    for (let b = 0; b < w; b++)
+      for (let R = 0; R < l; R++) {
+        const T = (b * l + R) * 4;
+        for (let O = 0; O < 3; O++) {
+          const [B, D] = $[O], q = (R * B - b * D) * F, e = (R * D + b * B) * F, a = 0.5 + 0.25 * (Math.cos(q) + Math.cos(e)), p = L[T + O] / 255, h = 1 - Math.min(1, Math.max(0, (1 - p - a) * 3 + 0.5));
+          L[T + O] = Math.round((p * 0.45 + h * 0.55) * 255);
+        }
+      }
+    d.putImageData(I, 0, 0);
+  }
+  function K(d, l, w, k) {
+    const I = c(d.id), L = o.get(d.id);
+    if (!L) throw new Error(`Photo not loaded: ${d.id}`);
+    const P = Math.max(1, Math.round(l * k)), $ = Math.max(1, Math.round(w * k)), F = document.createElement("canvas");
+    F.width = P, F.height = $;
+    const b = F.getContext("2d", { willReadFrequently: !0 }), R = L instanceof HTMLImageElement ? L.naturalWidth : L.width, T = L instanceof HTMLImageElement ? L.naturalHeight : L.height, O = Math.max(P / R, $ / T) * (d.zoom ?? 1), B = P / O, D = $ / O, q = Math.min(R - B, Math.max(0, I.focus[0] * R - B / 2)), e = Math.min(T - D, Math.max(0, I.focus[1] * T - D / 2)), a = d.grade ?? "none", p = d.seed ?? 1;
+    b.filter = f[a], b.drawImage(L, q, e, B, D, 0, 0, P, $), b.filter = "none";
+    const u = (h, v, M = 1) => {
+      b.globalCompositeOperation = h, b.globalAlpha = M, b.fillStyle = v, b.fillRect(0, 0, P, $), b.globalAlpha = 1, b.globalCompositeOperation = "source-over";
+    };
+    if (a === "faded" && u("lighten", "rgb(46,40,52)"), a === "sepia" && u("lighten", "rgb(52,40,30)"), a === "instant" && (u("lighten", "rgb(34,50,54)"), u("soft-light", "#ffd9a0", 0.35)), a === "expired" && (u("lighten", "rgb(40,30,46)"), u("soft-light", y(p, 1) < 0.5 ? "#ff6fa0" : "#6fffb0", 0.3)), d.leak) {
+      const h = Math.floor(y(p, 2) * 4), v = h === 0 ? 0 : h === 1 ? P : P * y(p, 3), M = h === 2 ? 0 : h === 3 ? $ : $ * y(p, 4), S = Math.max(P, $) * (0.45 + 0.3 * y(p, 5)), E = b.createRadialGradient(v, M, 0, v, M, S);
+      E.addColorStop(0, "rgba(255,150,60,0.85)"), E.addColorStop(0.35, "rgba(255,90,40,0.4)"), E.addColorStop(1, "rgba(255,60,30,0)"), u("screen", E);
+    }
+    if (d.halftone && x(b, P, $, k), d.vignette) {
+      const h = b.createRadialGradient(P / 2, $ / 2, Math.min(P, $) * 0.3, P / 2, $ / 2, Math.hypot(P, $) * 0.56);
+      h.addColorStop(0, "rgba(0,0,0,0)"), h.addColorStop(1, `rgba(0,0,0,${d.vignette.toFixed(2)})`), u("multiply", h);
+    }
+    if (d.grain) {
+      const h = b.createPattern(g(), "repeat");
+      h.setTransform(new DOMMatrix().translate(y(p, 6) * 128, y(p, 7) * 128).scale(k * 0.6)), u("overlay", h, 0.18 * d.grain);
+    }
+    if (d.stamp) {
+      const h = Math.max(9, Math.min(l, w) * 0.075) * k;
+      b.font = `${h}px VT323, monospace`, b.textAlign = "right", b.textBaseline = "alphabetic", b.shadowColor = "rgba(255,120,30,0.9)", b.shadowBlur = h * 0.35, b.fillStyle = "rgba(255,150,60,0.95)", b.fillText(d.stamp, P - h * 0.9, $ - h * 0.7), b.shadowBlur = 0;
+    }
+    return F;
+  }
+  async function z(d) {
+    await Promise.all([...d.map((l) => m(l.id)), ...d.some((l) => l.stamp) ? [document.fonts.load("16px VT323")] : []]);
+  }
+  async function C(d) {
+    const l = [...d.querySelectorAll("canvas.photo")].filter((w) => Y.has(w));
+    await z(l.map((w) => Y.get(w)));
+    for (const w of l) {
+      const k = K(Y.get(w), parseFloat(w.style.width), parseFloat(w.style.height), r());
+      w.width = k.width, w.height = k.height, w.getContext("2d").drawImage(k, 0, 0);
+    }
+  }
+  return { renderPhoto: K, preloadPhotos: z, runPhotos: C, loadPhoto: m, dispose() {
+    i.clear(), o.clear(), s = null;
+  } };
+}
+const rt = new Set("div span b i em strong s u small sub sup br p h1 h2 h3 ul ol li img canvas svg g path rect circle ellipse line polyline polygon text tspan defs clipPath mask pattern linearGradient radialGradient stop filter feTurbulence feDisplacementMap feColorMatrix feComposite title".split(" ")), Kt = new Set("class style id width height viewBox d fill stroke stroke-width stroke-linecap stroke-linejoin stroke-dasharray stroke-dashoffset fill-rule clip-rule opacity transform x y x1 y1 x2 y2 cx cy r rx ry points offset stop-color stop-opacity gradientUnits gradientTransform patternUnits patternTransform preserveAspectRatio xmlns filter clip-path mask font-size font-family text-anchor dominant-baseline type baseFrequency numOctaves seed result in in2 scale xChannelSelector yChannelSelector values operator aria-hidden aria-label role".split(" "));
+function ut(t = {}) {
+  const n = {};
+  for (const [r, o] of Object.entries(t))
+    !Kt.has(r) || /(?:javascript:|expression\s*\(|@import|behavior\s*:)/i.test(o) || [...o.matchAll(/url\(([^)]*)\)/gi)].some((i) => !/^['"]?#[\w-]+['"]?$/.test(i[1].trim())) || (n[r] = o);
+  return n;
+}
+function it(t, n = "n", r = { n: 0 }) {
+  const o = `${n}-${r.n++}`;
+  if (t.nodeType === Node.TEXT_NODE) return { id: o, text: t.textContent ?? "" };
+  if (!(t instanceof Element) || !rt.has(t.localName)) throw new Error(`Unsupported composition element ${t.nodeName}`);
+  t.setAttribute("data-pc-node", o);
+  const i = ut(Object.fromEntries([...t.attributes].filter((f) => f.name !== "data-pc-node").map((f) => [f.name, f.value]))), c = at.get(t), m = Y.get(t);
+  return {
+    id: o,
+    tag: t.localName,
+    ...t.namespaceURI?.includes("svg") ? { namespace: "svg" } : {},
+    attributes: i,
+    children: [...t.childNodes].filter((f) => f.nodeType === Node.ELEMENT_NODE || f.nodeType === Node.TEXT_NODE).map((f) => it(f, n, r)),
+    ...c ? { fit: { spec: structuredClone(c), ...t.hasAttribute("data-fit") ? { resolved: JSON.stringify(c) } : {} } } : {},
+    ...m ? { photo: structuredClone(m) } : {}
+  };
+}
+function Dt(t) {
+  const n = structuredClone(t);
+  for (const r of n.blocks) if (r.html) {
+    const o = document.createElement("template");
+    o.innerHTML = r.html;
+    const i = document.createElement("div");
+    for (const c of o.content.childNodes)
+      (c.nodeType === Node.TEXT_NODE || c instanceof Element && rt.has(c.localName)) && i.append(J(it(c), "fit"));
+    r.html = i.innerHTML;
+  }
+  return n;
+}
+function J(t, n) {
+  if (!t.tag) return document.createTextNode(t.text ?? "");
+  const r = n ? `${n}-` : "";
+  if (!rt.has(t.tag)) throw new Error(`Unsupported composition tag ${t.tag}`);
+  const o = t.namespace === "svg" ? document.createElementNS("http://www.w3.org/2000/svg", t.tag) : document.createElement(t.tag);
+  for (const [i, c] of Object.entries(ut(t.attributes)))
+    o.setAttribute(i, i === "id" ? `${r}${c}` : c.replace(/url\(['"]?#([\w-]+)['"]?\)/g, `url(#${r}$1)`));
+  o.setAttribute("data-pc-node", t.id);
+  for (const i of t.children ?? []) o.appendChild(J(i, n));
+  if (t.photo && Y.set(o, structuredClone(t.photo)), t.fit) {
+    const i = Dt(t.fit.spec);
+    at.set(o, i), t.fit.resolved !== JSON.stringify(t.fit.spec) && At(o, i);
+  }
+  return o;
+}
+const et = /* @__PURE__ */ new Map();
+async function Ft(t, n, r) {
+  const o = /* @__PURE__ */ new Map(), i = [];
+  let c = !1;
+  const m = () => {
+    c || (c = !0, i.forEach((f) => f()));
+  };
+  try {
+    for (const s of t) o.set(s.id, await n(s));
+    await Promise.all(t.filter((s) => s.kind === "font").map(async (s) => {
+      const g = o.get(s.id);
+      if (!s.family) throw new Error(`Missing font family for ${s.id}`);
+      const y = JSON.stringify([s.family, s.descriptors, g]);
+      let x = et.get(y);
+      if (!x) {
+        const z = new FontFace(s.family, `url(${JSON.stringify(g)})`, s.descriptors);
+        x = { count: 0, face: z, ready: z.load() }, et.set(y, x);
+      }
+      x.count++;
+      const K = x;
+      i.push(() => {
+        --K.count === 0 && (document.fonts.delete(K.face), et.delete(y));
+      }), await K.ready, c || document.fonts.add(K.face);
+    }));
+    let f;
+    if (r) {
+      const s = t.filter((g) => g.kind === "pen");
+      if (s.length) {
+        const { TegakiEngine: g } = await import("tegaki/core"), y = /* @__PURE__ */ new Map();
+        for (const x of s) {
+          const K = await fetch(o.get(x.id));
+          if (!K.ok) throw new Error(`Unable to load pen data ${x.id}`);
+          const z = await K.json(), C = t.find((l) => l.kind === "font" && l.family === x.family);
+          if (!C) throw new Error(`Missing pen font ${x.family}`);
+          const d = { ...z, fontUrl: o.get(C.id), fontFaceCSS: void 0 };
+          await g.preload(d), y.set(d.family.toLowerCase(), d), x.matches && y.set(x.matches.toLowerCase(), d);
+        }
+        f = { Engine: g, bundleFor: (x) => y.get(x.split(",")[0].trim().replace(/^['"]|['"]$/g, "").toLowerCase()) };
+      }
+    }
+    return { urls: o, penContext: f, dispose: m };
+  } catch (f) {
+    throw m(), f;
+  }
+}
+const Ht = `    <svg width="0" height="0" style="position: absolute" aria-hidden="true">
+      <filter id="f-ink" x="-5%" y="-5%" width="110%" height="110%">
+        <feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="2" seed="4" result="n" />
+        <feDisplacementMap in="SourceGraphic" in2="n" scale="1.4" xChannelSelector="R" yChannelSelector="G" />
+      </filter>
+      <filter id="f-pencil" x="-5%" y="-5%" width="110%" height="110%">
+        <feTurbulence type="fractalNoise" baseFrequency="1.3" numOctaves="2" seed="9" result="n" />
+        <feColorMatrix in="n" type="matrix" values="0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  2.4 0 0 0 -0.55" result="m" />
+        <feComposite in="SourceGraphic" in2="m" operator="in" result="g" />
+        <feDisplacementMap in="g" in2="n" scale="1" xChannelSelector="G" yChannelSelector="B" />
+      </filter>
+      <filter id="f-stamp" x="-5%" y="-10%" width="110%" height="120%">
+        <feTurbulence type="fractalNoise" baseFrequency="0.55" numOctaves="3" seed="2" result="n" />
+        <feColorMatrix in="n" type="matrix" values="0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  3.2 0 0 0 -0.75" result="m" />
+        <feComposite in="SourceGraphic" in2="m" operator="in" result="g" />
+        <feDisplacementMap in="g" in2="n" scale="1.6" xChannelSelector="R" yChannelSelector="G" />
+      </filter>
+      <filter id="f-wash" x="-10%" y="-10%" width="120%" height="120%">
+        <feTurbulence type="fractalNoise" baseFrequency="0.035" numOctaves="3" seed="7" result="n" />
+        <feDisplacementMap in="SourceGraphic" in2="n" scale="16" xChannelSelector="R" yChannelSelector="G" result="d" />
+        <feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" seed="5" result="g" />
+        <feColorMatrix in="g" type="matrix" values="0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  1.2 0 0 0 0.25" result="ga" />
+        <feComposite in="d" in2="ga" operator="in" />
+      </filter>
+      <filter id="f-stain" x="-10%" y="-10%" width="120%" height="120%">
+        <feTurbulence type="fractalNoise" baseFrequency="0.06" numOctaves="3" seed="11" result="n" />
+        <feDisplacementMap in="SourceGraphic" in2="n" scale="7" xChannelSelector="R" yChannelSelector="G" />
+      </filter>
+    </svg>`;
+function mt(t) {
+  let n = t >>> 0 || 2654435769;
+  const r = () => {
+    n = n + 1831565813 >>> 0;
+    let i = n;
+    return i = Math.imul(i ^ i >>> 15, i | 1), i ^= i + Math.imul(i ^ i >>> 7, i | 61), ((i ^ i >>> 14) >>> 0) / 4294967296;
+  }, o = r;
+  return o.range = (i, c) => i + (c - i) * r(), o.int = (i, c) => Math.floor(i + (c - i + 1) * r()), o.pick = (i) => i[Math.floor(r() * i.length)], o.chance = (i) => r() < i, o.weighted = (i, c) => {
+    const m = i.reduce((s, g) => s + c(g), 0);
+    let f = r() * m;
+    for (const s of i) if ((f -= c(s)) < 0) return s;
+    return i[i.length - 1];
+  }, o.fork = () => mt(Math.floor(r() * 4294967296)), o;
+}
+function nt(t, n) {
+  const r = (o) => {
+    n(o), o.children?.forEach(r);
+  };
+  t.content && r(t.content);
+  for (const o of t.attachments) o.type === "html" && r(o.node);
+}
+function Xt(t, n, r) {
+  const o = structuredClone(t);
+  let i = !1;
+  if (nt(o, (c) => {
+    if (c.id !== n) return;
+    i = !0;
+    const m = /* @__PURE__ */ new Set(), f = (s) => {
+      m.add(s.id), s.children?.forEach(f);
+    };
+    if (c.children?.forEach(f), c.tag) for (const s of o.motion?.steps ?? [])
+      typeof s.target == "string" && (s.target = [...new Set(s.target.split(",").map((g) => m.has(g.match(/"([\w-]+)"/)?.[1] ?? "") ? `[data-pc-node="${c.id}"]` : g))].join(","));
+    c.fit ? (c.fit.spec.blocks = [{ text: r, keep: !0 }], delete c.fit.resolved, c.children = []) : c.tag ? c.children = [{ id: `${c.id}-text`, text: r }] : c.text = r;
+  }), !i) throw new Error(`Unknown content node ${n}`);
+  return o;
+}
+function Bt(t) {
+  if (t.version !== 1) throw new Error("Unsupported paper composition version");
+  if (![t.width, t.height, t.environment.pixelRatio].every((o) => Number.isFinite(o) && o > 0)) throw new Error("Invalid composition dimensions");
+  if (![t.rotation, t.environment.grain, t.environment.light.azimuth, t.environment.light.elevation, t.motionSeed].every(Number.isFinite)) throw new Error("Invalid composition environment");
+  if (!Array.isArray(t.assets) || !Array.isArray(t.attachments)) throw new Error("Invalid composition assets or attachments");
+  const n = /* @__PURE__ */ new Set();
+  nt(t, (o) => {
+    if (!/^[\w-]+$/.test(o.id) || n.has(o.id)) throw new Error(`Invalid or duplicate node ID ${o.id}`);
+    n.add(o.id);
+  });
+  const r = /* @__PURE__ */ new Set();
+  for (const o of t.assets) {
+    if (r.has(o.id) || !o.file || o.file.includes("..") || o.file.includes("\\") || /^(?:[a-z]+:|\/)/i.test(o.file)) throw new Error(`Invalid asset ${o.id}`);
+    r.add(o.id);
+  }
+  nt(t, (o) => {
+    if (o.photo && !r.has(o.photo.id)) throw new Error(`Missing photo ${o.photo.id}`);
+  });
+  for (const o of t.attachments) if (o.type === "photo" && !r.has(o.photo.id)) throw new Error(`Missing photo ${o.photo.id}`);
+  for (const o of t.motion?.steps ?? []) {
+    if (typeof o.target != "string" || !/^\[data-pc-node="[\w-]+"\](,\[data-pc-node="[\w-]+"\])*$/.test(o.target)) throw new Error("Motion targets must reference composition node IDs");
+    for (const i of o.target.matchAll(/"([\w-]+)"/g)) if (!n.has(i[1])) throw new Error(`Missing animation target ${i[1]}`);
+  }
+}
+let qt = 0;
+function Gt(t, n) {
+  return {
+    w: t.width,
+    h: t.height,
+    rot: t.rotation,
+    paper: t.paper,
+    params: t.params,
+    look: t.sheet,
+    info: t.info,
+    ink: t.content ? J(t.content, n) : null,
+    attach: t.attachments.map((r) => r.type === "html" ? { ...r, el: J(r.node, n) } : structuredClone(r)),
+    motion: t.motion
+  };
+}
+function _t(t, n) {
+  const r = document.createElement("template");
+  r.innerHTML = Ht;
+  const o = J(it(r.content.firstElementChild), n);
+  t.append(o);
+  for (const i of ["ink", "pencil", "stamp", "wash", "stain"]) t.style.setProperty(`--pc-f-${i}`, `url(#${n}-f-${i})`);
+}
+function jt(t) {
+  let n = t, r = 0, o = !1, i = !1;
+  const c = document.createElement("div");
+  c.className = "pc-composition";
+  let m = null, f = () => {
+  }, s = Promise.resolve();
+  const g = `pc-${++qt}`;
+  let y;
+  function x(C, d) {
+    const l = C.el;
+    l.style.transform = "none";
+    const w = l.getBoundingClientRect();
+    let k = -24, I = -24, L = l.offsetWidth + 24, P = l.offsetHeight + 24;
+    for (const e of l.querySelectorAll("canvas")) {
+      if (e.classList.contains("lifted")) continue;
+      const a = e.getBoundingClientRect();
+      k = Math.min(k, a.left - w.left), I = Math.min(I, a.top - w.top), L = Math.max(L, a.right - w.left), P = Math.max(P, a.bottom - w.top);
+    }
+    for (const e of l.querySelectorAll(".front > *, .back > *")) {
+      const a = e.getBoundingClientRect();
+      k = Math.min(k, a.left - w.left - 8), I = Math.min(I, a.top - w.top - 8), L = Math.max(L, a.right - w.left + 8), P = Math.max(P, a.bottom - w.top + 8);
+    }
+    const $ = d * Math.PI / 180, F = Math.cos($), b = Math.sin($), R = [[k, I], [L, I], [L, P], [k, P]].map(([e, a]) => [e * F - a * b, e * b + a * F]), T = Math.min(...R.map((e) => e[0])), O = Math.min(...R.map((e) => e[1])), B = Math.max(...R.map((e) => e[0])) - T, D = Math.max(...R.map((e) => e[1])) - O, q = () => {
+      const e = c.parentElement?.clientWidth ?? B, a = n.fit === "contain" ? Math.min(1, e / B) : 1;
+      c.style.width = `${B * a}px`, c.style.height = `${D * a}px`, l.style.left = `${-T * a}px`, l.style.top = `${-O * a}px`, l.style.transform = `scale(${a}) rotate(${d}deg)`;
+    };
+    q(), n.fit === "contain" && c.parentElement && (y = new ResizeObserver(q), y.observe(c.parentElement));
+  }
+  async function K() {
+    if (o) return;
+    const C = ++r;
+    f(), y?.disconnect(), m = null, i = !1, c.replaceChildren(), c.dataset.rendered = "loading";
+    const d = n, l = structuredClone(d.composition);
+    Bt(l);
+    const w = document.createElement("div");
+    w.style.cssText = `width:${l.width}px;height:${l.height}px;background:${l.params.color.base}`, w.textContent = l.info.kind, c.append(w);
+    const k = await Ft(l.assets, d.resolveAsset, l.pen);
+    if (o || C !== r) {
+      k.dispose();
+      return;
+    }
+    const I = d.renderer ?? new vt(), L = Ot((R) => {
+      const T = l.assets.find((O) => O.id === R);
+      if (!T?.photo) throw new Error(`Missing photo metadata: ${R}`);
+      return T.photo;
+    }, (R) => {
+      const T = k.urls.get(R);
+      if (!T) throw new Error(`Missing photo asset: ${R}`);
+      return T;
+    }, () => l.environment.pixelRatio), P = zt({ renderer: I, photos: L, light: l.environment.light, grain: () => l.environment.grain, pixelRatio: () => l.environment.pixelRatio });
+    let $ = null, F = !1;
+    const b = () => {
+      F || (F = !0, $?.dispose(), L.dispose(), P.dispose(), d.renderer || I.dispose(), k.dispose());
+    };
+    f = b;
+    try {
+      const R = Gt(l, g);
+      c.replaceChildren(), _t(c, g);
+      const T = P.buildCard(R);
+      if (c.append(T.el), !I.gl) {
+        T.paper.style.background = l.params.color.base, R.ink && T.paper.append(R.ink), c.dataset.rendered = "fallback", x(T, l.rotation);
+        return;
+      }
+      if (await T.render(l.rotation), o || C !== r) {
+        b();
+        return;
+      }
+      if (l.motion?.steps.length && R.ink) {
+        const { prepareMotion: O } = await import("./motion.js");
+        if (o || C !== r) {
+          b();
+          return;
+        }
+        $ = O(R, T, mt(l.motionSeed), k.penContext), m = $, d.autoplay !== !1 ? m?.play() : m?.finish();
+      }
+      x(T, l.rotation), i = !0, c.dataset.rendered = "webgl2";
+    } catch (R) {
+      throw b(), R;
+    }
+  }
+  function z() {
+    const C = K(), d = r;
+    return C.catch((l) => {
+      throw d === r && !o && (c.dataset.rendered = "error", c.dispatchEvent(new CustomEvent("papererror", { detail: l }))), l;
+    });
+  }
+  return s = Promise.resolve().then(() => {
+    if (!r && !o) return z();
+  }), s.catch(() => {
+  }), {
+    element: c,
+    get ready() {
+      return s;
+    },
+    get rendered() {
+      return i;
+    },
+    update(C) {
+      return o ? Promise.reject(new Error("Composition disposed")) : (n = { ...n, ...C }, s = z(), s.catch(() => {
+      }), s);
+    },
+    play() {
+      m?.resume();
+    },
+    pause() {
+      m?.pause();
+    },
+    replay() {
+      m?.replay();
+    },
+    seek(C) {
+      m?.seek(C);
+    },
+    dispose() {
+      o || (o = !0, r++, y?.disconnect(), f(), c.remove());
+    }
+  };
+}
+export {
+  jt as createPaperComposition,
+  Gt as hydrateComposition,
+  _t as mountCompositionFilters,
+  Xt as setCompositionText,
+  Bt as validateComposition,
+  nt as visitNodes
+};
+//# sourceMappingURL=index.js.map