@popcraft/kit 0.29.0 → 0.31.0

package/dist/chunks/import-LWIB4WUJ.js

@@ -0,0 +1,702 @@
+import { createRequire as __popcraftRequire } from 'node:module';
+import { fileURLToPath as __popcraftPath } from 'node:url';
+import { dirname as __popcraftDirname } from 'node:path';
+const require = __popcraftRequire(import.meta.url);
+const __filename = __popcraftPath(import.meta.url);
+const __dirname = __popcraftDirname(__filename);
+import {
+  stateMachineFromDotLottie
+} from "./chunk-46LS4X63.js";
+import {
+  strFromU8,
+  unzipSync
+} from "./chunk-IEGVTRIS.js";
+import "./chunk-II2HRRGK.js";
+import {
+  createComponent,
+  createDocument,
+  createEllipse,
+  createFrame,
+  createImage,
+  createInstanceOf,
+  createPage,
+  createPolygon,
+  createRectangle,
+  createStar,
+  createText,
+  createVector,
+  init_scene_graph
+} from "./chunk-MQ66HDKC.js";
+import "./chunk-N7XUSTLZ.js";
+import "./chunk-XBVMM6ZD.js";
+import "./chunk-5XSI3MNX.js";
+import "./chunk-2LYY4KTS.js";
+import "./chunk-SMR77HUB.js";
+import "./chunk-2YBOCBPA.js";
+import "./chunk-FREAHUVP.js";
+import "./chunk-4VICNBUI.js";
+import "./chunk-IPETYEVH.js";
+import "./chunk-RW67KLLE.js";
+import "./chunk-5X7A23T7.js";
+import "./chunk-ONN5A5XM.js";
+import "./chunk-EPG7TW6Z.js";
+import "./chunk-NMFXCSU4.js";
+import "./chunk-TSWHCDM7.js";
+import "./chunk-CK43FENV.js";
+import "./chunk-X53QDCNX.js";
+import "./chunk-VBAS5IB5.js";
+import {
+  TIMELINE_FPS_VALUES,
+  init_types
+} from "./chunk-CZXJDKOJ.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.js";
+import "./chunk-LJSVREWM.js";
+
+// lib/io/lottie/import.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+init_scene_graph();
+init_types();
+var GEOMETRY = /* @__PURE__ */ new Set(["gr", "rc", "el", "sh", "sr"]);
+function isLottieJson(v) {
+  const o = v;
+  return !!o && typeof o === "object" && Array.isArray(o.layers) && typeof o.fr === "number" && typeof o.w === "number" && typeof o.h === "number" && "op" in o && !("nodes" in o);
+}
+function readLottieFile(bytes) {
+  return readDotLottie(bytes).animation;
+}
+function readDotLottie(bytes) {
+  if (bytes[0] === 80 && bytes[1] === 75) {
+    const files = unzipSync(bytes);
+    const manifest = files["manifest.json"] ? JSON.parse(strFromU8(files["manifest.json"])) : null;
+    const ids = manifest?.animations?.map((a) => a.id) ?? [];
+    const want = manifest?.activeAnimationId ?? ids[0];
+    const path = Object.keys(files).find((p) => /^(animations|a)\//.test(p) && p.endsWith(".json") && (!want || p.endsWith(`/${want}.json`))) ?? Object.keys(files).find((p) => /^(animations|a)\//.test(p) && p.endsWith(".json"));
+    if (!path) throw new Error("This .lottie holds no animation.");
+    const anim = JSON.parse(strFromU8(files[path]));
+    for (const a of anim.assets ?? []) {
+      const img = a;
+      if (!img.p || img.e === 1 || img.p.startsWith("data:")) continue;
+      const file = files[`images/${img.p}`] ?? files[`i/${img.p}`] ?? files[`${(img.u ?? "").replace(/^\/+/, "")}${img.p}`];
+      if (!file) continue;
+      const type = img.p.endsWith(".png") ? "image/png" : img.p.endsWith(".webp") ? "image/webp" : img.p.endsWith(".svg") ? "image/svg+xml" : "image/jpeg";
+      let bin = "";
+      for (let i = 0; i < file.length; i++) bin += String.fromCharCode(file[i]);
+      img.p = `data:${type};base64,${btoa(bin)}`;
+      img.e = 1;
+    }
+    const listed = manifest?.stateMachines?.map((s) => s.id) ?? [];
+    const stateMachines = Object.keys(files).filter((p) => /^s\/[^/]+\.json$/.test(p)).map((p) => ({ id: p.slice(2, -5), path: p })).sort((a, b) => (listed.indexOf(a.id) + 1 || Infinity) - (listed.indexOf(b.id) + 1 || Infinity)).flatMap(({ id, path: p }) => {
+      try {
+        return [{ id, raw: JSON.parse(strFromU8(files[p])) }];
+      } catch {
+        return [];
+      }
+    });
+    return { animation: anim, stateMachines };
+  }
+  const parsed = JSON.parse(strFromU8(bytes));
+  if (!isLottieJson(parsed)) throw new Error("This file is not a Lottie animation.");
+  return { animation: parsed, stateMachines: [] };
+}
+var BLENDS = ["NORMAL", "MULTIPLY", "SCREEN", "OVERLAY", "DARKEN", "LIGHTEN", "COLOR_DODGE", "COLOR_BURN", "HARD_LIGHT", "SOFT_LIGHT", "DIFFERENCE", "EXCLUSION", "HUE", "SATURATION", "COLOR", "LUMINOSITY"];
+var nearestFps = (fr) => TIMELINE_FPS_VALUES.reduce((a, b) => Math.abs(b - fr) < Math.abs(a - fr) ? b : a, TIMELINE_FPS_VALUES[0]);
+var first = (arr, i, d) => typeof arr === "number" ? arr : arr?.[i] ?? arr?.[0] ?? d;
+var clamp01 = (v) => Math.max(0, Math.min(1, v));
+function interpOf(k, d) {
+  if (k.h === 1) return { kind: "hold" };
+  if (!k.o || !k.i) return { kind: "linear" };
+  const ox = clamp01(first(k.o.x, d, 0)), oy = first(k.o.y, d, 0), ix = clamp01(first(k.i.x, d, 1)), iy = first(k.i.y, d, 1);
+  if (ox === oy && ix === iy) return { kind: "linear" };
+  return { kind: "bezier", cp: [ox, oy, ix, iy] };
+}
+var Importer = class {
+  constructor(anim) {
+    this.anim = anim;
+    this.assets = new Map((anim.assets ?? []).map((a) => [a.id, a]));
+    const count = (layers) => {
+      for (const l of layers ?? []) {
+        const ref = l.refId;
+        if (l.ty === 0 && ref) this.uses.set(ref, (this.uses.get(ref) ?? 0) + 1);
+      }
+    };
+    count(anim.layers);
+    for (const a of anim.assets ?? []) if ("layers" in a) count(a.layers);
+  }
+  anim;
+  notes = /* @__PURE__ */ new Set();
+  nodes = {};
+  layerNodes = /* @__PURE__ */ new Map();
+  assets;
+  keySeq = 0;
+  /** How many precomp layers use each composition asset (in the main composition and every precomp). */
+  uses = /* @__PURE__ */ new Map();
+  /** The motion component a shared precomp became, and its layers by their index path inside it. */
+  components = /* @__PURE__ */ new Map();
+  /** The motion component shared precomp `asset` plays as (made the first time it is asked for). */
+  precompComponent(asset, w, h) {
+    const made = this.components.get(asset.id);
+    if (made) return made;
+    const nm = asset.nm;
+    const comp = createComponent({ name: nm || `Precomp ${asset.id}`, width: w, height: h, fills: [], strokes: [], clipsContent: true, layoutMode: "NONE" });
+    const end = Math.max(1, ...asset.layers.map((l) => this.ms(l.op ?? 0)));
+    comp.timeline = { duration: end, fps: nearestFps(this.anim.fr) };
+    this.add(comp, null);
+    const entry = { id: comp.id, inner: /* @__PURE__ */ new Map() };
+    this.components.set(asset.id, entry);
+    const prefix = `\0${asset.id}/`;
+    this.layers(asset.layers, comp.id, 0, prefix, { w, h });
+    for (const [path, id] of [...this.layerNodes]) if (path.startsWith(prefix)) {
+      entry.inner.set(path.slice(prefix.length), id);
+      this.layerNodes.delete(path);
+    }
+    return entry;
+  }
+  ms = (frames) => frames * 1e3 / this.anim.fr;
+  read(p, fallback, shift) {
+    if (!p) return { still: fallback, keys: null };
+    if (p.x && typeof p.x === "string") this.notes.add("Expressions are not imported: those properties keep their keyed values.");
+    if (p.a !== 1 || !Array.isArray(p.k) || !p.k.length || typeof p.k[0] !== "object") {
+      const k = p.k;
+      return { still: typeof k === "number" ? [k] : k, keys: null };
+    }
+    const raw = p.k;
+    const keys = raw.map((k, j) => {
+      const prev = raw[j - 1];
+      const v = k.s ?? prev?.e ?? prev?.s ?? fallback;
+      const dims = Array.isArray(v) ? v.length : 1;
+      return { t: this.ms(k.t - shift), v: Array.isArray(v) ? v : [v], out: Array.from({ length: dims }, (_, d) => interpOf(k, d)), key: k };
+    });
+    if (keys.length === 1) return { still: keys[0].v, keys: null };
+    return { still: keys[0].v, keys };
+  }
+  track(read, dim, map = (v) => v) {
+    if (!read.keys) return null;
+    const keys = read.keys.map((k, j) => ({ id: `lk${this.keySeq++}`, t: k.t, v: map(k.v[dim] ?? k.v[0]), out: j < read.keys.length - 1 ? k.out[dim] ?? k.out[0] : { kind: "linear" } }));
+    return { keys };
+  }
+  colorTrack(read) {
+    if (!read.keys) return null;
+    return { keys: read.keys.map((k, j) => ({ id: `lk${this.keySeq++}`, t: k.t, v: this.color(k.v), out: j < read.keys.length - 1 ? k.out[0] : { kind: "linear" } })) };
+  }
+  color(v) {
+    const s = v.slice(0, 3).some((c) => c > 1) ? 255 : 1;
+    return { r: (v[0] ?? 0) / s, g: (v[1] ?? 0) / s, b: (v[2] ?? 0) / s, a: 1 };
+  }
+  add(node, parentId) {
+    node.parentId = parentId;
+    this.nodes[node.id] = node;
+    if (parentId) this.nodes[parentId].childIds.push(node.id);
+  }
+  setTrack(node, path, track) {
+    if (!track) return;
+    const m = node.motion ??= { tracks: {} };
+    m.tracks[path] = track;
+  }
+  // ── Transforms ─────────────────────────────────────────────────────────────────────────────────
+  /** A Lottie transform onto a node whose box is `w`×`h` at the transform's own origin: localMatrix == T(p)·R·S·T(−a). */
+  transform(node, ks, shift) {
+    if (!ks) return;
+    const w = Math.max(1e-6, node.width), h = Math.max(1e-6, node.height);
+    const a = this.read(ks.a, [0, 0], shift);
+    if (a.keys) this.notes.add("An animated anchor point was imported at its first value.");
+    const [ax, ay] = a.still;
+    const n = node;
+    n.anchorX = ax / w;
+    n.anchorY = ay / h;
+    const pos = ks.p;
+    if (pos && pos.s === true) {
+      const px = this.read(pos.x, [0], shift), py = this.read(pos.y, [0], shift);
+      node.x = px.still[0] - ax;
+      node.y = py.still[0] - ay;
+      this.setTrack(node, "x", this.track(px, 0, (v) => v - ax));
+      this.setTrack(node, "y", this.track(py, 0, (v) => v - ay));
+    } else {
+      const p = this.read(ks.p, [0, 0], shift);
+      node.x = p.still[0] - ax;
+      node.y = (p.still[1] ?? 0) - ay;
+      const tx = this.track(p, 0, (v) => v - ax), ty = this.track(p, 1, (v) => v - ay);
+      if (tx && p.keys) p.keys.forEach((k, j) => {
+        const to = k.key.to, ti = p.keys[j - 1]?.key.ti;
+        const out = to && (to[0] || to[1]) ? [to[0], to[1]] : void 0;
+        const inn = ti && (ti[0] || ti[1]) ? [ti[0], ti[1]] : void 0;
+        if (out || inn) tx.keys[j].spatial = { ...out ? { out } : {}, ...inn ? { in: inn } : {} };
+      });
+      this.setTrack(node, "x", tx);
+      this.setTrack(node, "y", ty);
+    }
+    const s = this.read(ks.s, [100, 100], shift);
+    n.scaleX = s.still[0] / 100;
+    n.scaleY = (s.still[1] ?? s.still[0]) / 100;
+    this.setTrack(node, "scaleX", this.track(s, 0, (v) => v / 100));
+    this.setTrack(node, "scaleY", this.track(s, s.still.length > 1 ? 1 : 0, (v) => v / 100));
+    const r = this.read(ks.r ?? ks.rz, [0], shift);
+    node.rotation = r.still[0];
+    this.setTrack(node, "rotation", this.track(r, 0));
+    const o = this.read(ks.o, [100], shift);
+    node.opacity = o.still[0] / 100;
+    this.setTrack(node, "opacity", this.track(o, 0, (v) => v / 100));
+    const sk = ks.sk ? this.read(ks.sk, [0], shift) : null;
+    if (sk && (sk.keys || sk.still[0])) this.notes.add("Skew is not imported.");
+    if (ks.rx || ks.ry) this.notes.add("3D rotation is not imported.");
+  }
+  // ── Layers ─────────────────────────────────────────────────────────────────────────────────────
+  /** A composition's layers into `parentId` (bottom first), at `shift` frames (the layer's comp time → our time). */
+  layers(list, parentId, shift, path, size) {
+    const byInd = new Map(list.map((l) => [l.ind, l]));
+    for (let i = list.length - 1; i >= 0; i--) {
+      const layer = list[i];
+      if (layer.td === 1 || layer.hd === true) continue;
+      const matteSrc = layer.tt ? layer.tp !== void 0 ? byInd.get(layer.tp) : list[i - 1] : void 0;
+      let into = parentId;
+      if (layer.tt && matteSrc) {
+        if (layer.tt === 2 || layer.tt === 4) this.notes.add("Inverted track mattes are imported as regular mattes.");
+        const g = createFrame({ name: `${layer.nm} (matte)`, x: 0, y: 0, width: size.w, height: size.h, fills: [], clipsContent: false });
+        this.add(g, parentId);
+        const span = this.span(Math.min(layer.ip, matteSrc.ip), Math.max(layer.op, matteSrc.op), shift, path);
+        if (span) g.motion = { tracks: {}, span };
+        into = g.id;
+        const m = this.layer(matteSrc, into, shift, `${path}${matteSrc.ind}`, byInd);
+        if (m) Object.assign(this.nodes[m], { isMask: true, maskType: layer.tt === 3 || layer.tt === 4 ? "LUMINANCE" : "ALPHA" });
+      }
+      this.layer(layer, into, shift, `${path}${layer.ind}`, byInd);
+    }
+  }
+  /** One layer (inside its parents' transforms), returning its node id. */
+  layer(layer, parentId, shift, path, byInd) {
+    const L = layer;
+    if (L.ddd === 1) this.notes.add("3D layers are imported flat.");
+    if (Array.isArray(L.ef) && L.ef.length) this.notes.add(`Layer effects are not imported (\u201C${layer.nm}\u201D).`);
+    if (L.tm) this.notes.add(`Time remapping is not imported (\u201C${layer.nm}\u201D).`);
+    if (L.sr !== void 0 && L.sr !== 1) this.notes.add(`Time stretch is not imported (\u201C${layer.nm}\u201D).`);
+    const chain = [];
+    for (let p = layer.parent !== void 0 ? byInd.get(layer.parent) : void 0, guard = 0; p && guard < 32; p = p.parent !== void 0 ? byInd.get(p.parent) : void 0, guard++) chain.unshift(p);
+    let into = parentId;
+    let offset = shift;
+    for (const p of chain) {
+      const wrap = createFrame({ name: `${p.nm} (parent)`, x: 0, y: 0, width: 1, height: 1, fills: [], clipsContent: false });
+      this.add(wrap, into);
+      const span2 = p === chain[0] ? this.span(layer.ip, layer.op, shift, path) : void 0;
+      if (span2) wrap.motion = { tracks: {}, span: span2 };
+      const st2 = p.st ?? 0;
+      if (st2 - offset) wrap.motion = { ...wrap.motion ?? { tracks: {} }, timeOffset: this.ms(st2 - offset) };
+      this.transform(wrap, p.ks, st2);
+      into = wrap.id;
+      offset = st2;
+    }
+    const st = layer.st ?? 0;
+    const node = this.layerNode(layer, into, st, path);
+    if (!node) return null;
+    const m = node.motion ??= { tracks: {} };
+    if (st - offset) m.timeOffset = this.ms(st - offset);
+    const span = this.span(layer.ip, layer.op, offset, path);
+    if (span) m.span = span;
+    if (!Object.keys(m.tracks).length && m.timeOffset === void 0 && !m.span) delete node.motion;
+    if (layer.bm) node.blendMode = BLENDS[layer.bm] ?? "NORMAL";
+    this.layerNodes.set(path, node.id);
+    return node.id;
+  }
+  /** A layer's span from `ip` to `op`, in a time `offset` frames behind the comp's; none when it covers the file. */
+  span(ip, op, offset, path) {
+    const main = path.indexOf("/") < 0;
+    return !main || ip > this.anim.ip || op < this.anim.op ? { in: this.ms(ip - offset), out: this.ms(op - offset) } : void 0;
+  }
+  layerNode(layer, parentId, st, path) {
+    const L = layer;
+    let node;
+    switch (L.ty) {
+      case 0: {
+        const asset = this.assets.get(L.refId ?? "");
+        const w = L.w ?? this.anim.w, h = L.h ?? this.anim.h;
+        if (asset && "layers" in asset && (this.uses.get(asset.id) ?? 0) > 1) {
+          const comp = this.precompComponent(asset, w, h);
+          node = createInstanceOf(this.nodes[comp.id], { name: layer.nm || "Precomp", width: w, height: h, clipsContent: true });
+          this.add(node, parentId);
+          for (const [rel, id] of comp.inner) this.layerNodes.set(`${path}/${rel}`, `${node.id}::${id}`);
+          break;
+        }
+        node = createFrame({ name: layer.nm || "Precomp", width: w, height: h, fills: [], clipsContent: true });
+        this.add(node, parentId);
+        if (asset && "layers" in asset) this.layers(asset.layers, node.id, 0, `${path}/`, { w, h });
+        break;
+      }
+      case 1: {
+        const w = L.sw ?? 0, h = L.sh ?? 0;
+        const hex = String(L.sc ?? "#000000").replace("#", "");
+        const c = { r: parseInt(hex.slice(0, 2), 16) / 255, g: parseInt(hex.slice(2, 4), 16) / 255, b: parseInt(hex.slice(4, 6), 16) / 255, a: 1 };
+        node = createFrame({ name: layer.nm || "Solid", width: w, height: h, fills: [{ type: "SOLID", color: c, visible: true }], clipsContent: false });
+        this.add(node, parentId);
+        break;
+      }
+      case 2: {
+        const asset = this.assets.get(L.refId ?? "");
+        if (!asset?.p) {
+          this.notes.add(`Image \u201C${layer.nm}\u201D has no picture in the file.`);
+          return null;
+        }
+        const url = asset.p.startsWith("data:") ? asset.p : `${asset.u ?? ""}${asset.p}`;
+        if (!url.startsWith("data:")) this.notes.add(`Image \u201C${layer.nm}\u201D links to ${url} instead of embedding it: it may not load.`);
+        node = createImage(url, { name: layer.nm || "Image", width: asset.w, height: asset.h });
+        this.add(node, parentId);
+        break;
+      }
+      case 3: {
+        node = createFrame({ name: layer.nm || "Null", width: 1, height: 1, fills: [], clipsContent: false });
+        this.add(node, parentId);
+        break;
+      }
+      case 4: {
+        node = createFrame({ name: layer.nm || "Shape layer", width: 1, height: 1, fills: [], clipsContent: false });
+        this.add(node, parentId);
+        this.shapes(L.shapes ?? [], node.id, st);
+        const b = this.bounds(node.id);
+        node.width = Math.max(1, b.maxX);
+        node.height = Math.max(1, b.maxY);
+        break;
+      }
+      case 5: {
+        node = this.textLayer(layer, parentId);
+        break;
+      }
+      default:
+        this.notes.add(`Layers of type ${String(L.ty)} (\u201C${layer.nm}\u201D) are not imported.`);
+        return null;
+    }
+    this.transform(node, layer.ks, st);
+    this.masks(layer, node, st);
+    return node;
+  }
+  textLayer(layer, parentId) {
+    const doc = layer.t?.d?.k?.[0]?.s ?? {};
+    const fc = doc.fc ?? [0, 0, 0];
+    const size = doc.s ?? 32;
+    const text = String(doc.t ?? "").replace(/\r/g, "\n");
+    const j = doc.j;
+    this.notes.add("Text layers are imported as editable text in your fonts, from their first keyframe (Lottie text animators are not imported).");
+    const node = createText({
+      name: layer.nm || "Text",
+      characters: text,
+      fontSize: size,
+      fontFamily: String(doc.f ?? "Inter").split("-")[0],
+      textAlignHorizontal: j === 1 ? "RIGHT" : j === 2 ? "CENTER" : "LEFT",
+      textAutoResize: "WIDTH_AND_HEIGHT",
+      fills: [{ type: "SOLID", color: this.color(fc), visible: true }]
+    });
+    node.width = Math.max(1, text.length * size * 0.55);
+    node.height = size * 1.2;
+    this.add(node, parentId);
+    return node;
+  }
+  masks(layer, node, st) {
+    const masks = layer.masksProperties ?? [];
+    if (!masks.length) return;
+    if (masks.length > 1 || masks.some((m2) => m2.mode !== "a" || m2.inv)) this.notes.add(`\u201C${layer.nm}\u201D has masks beyond one plain \u201Cadd\u201D mask: only the first is imported.`);
+    const m = masks[0];
+    if (m.mode === "n") return;
+    const v = this.animatedVector(m.pt, `${layer.nm} mask`, st);
+    if (!v) return;
+    v.fills = [{ type: "SOLID", color: { r: 0, g: 0, b: 0, a: 1 }, visible: true }];
+    Object.assign(v, { isMask: true, maskType: "VECTOR" });
+    v.parentId = node.id;
+    this.nodes[v.id] = v;
+    node.childIds.unshift(v.id);
+  }
+  // ── Shapes ─────────────────────────────────────────────────────────────────────────────────────
+  bounds(id) {
+    let maxX = 0, maxY = 0;
+    for (const c of this.nodes[id].childIds) {
+      const n = this.nodes[c];
+      maxX = Math.max(maxX, n.x + n.width);
+      maxY = Math.max(maxY, n.y + n.height);
+    }
+    return { maxX, maxY };
+  }
+  /** A group's items (top first) into `parentId` (bottom first). Styles paint the geometry listed before them. */
+  shapes(items, parentId, shift) {
+    const styles = items.filter((s) => s.ty === "fl" || s.ty === "st" || s.ty === "gf" || s.ty === "gs" || s.ty === "tm");
+    const index = (s) => items.indexOf(s);
+    const created = [];
+    for (let i = items.length - 1; i >= 0; i--) {
+      const it = items[i];
+      if (it.hd === true) continue;
+      const applies = styles.filter((s) => index(s) > i).sort((a, b) => index(a) - index(b));
+      switch (it.ty) {
+        case "gr": {
+          const g = createFrame({ name: String(it.nm ?? "Group"), width: 1, height: 1, fills: [], clipsContent: false });
+          this.add(g, parentId);
+          const inner = it.it ?? [];
+          this.shapes([...inner.filter((s) => s.ty !== "tr"), ...applies.filter((s) => !inner.includes(s))], g.id, shift);
+          const b = this.bounds(g.id);
+          g.width = Math.max(1, b.maxX);
+          g.height = Math.max(1, b.maxY);
+          const tr = inner.find((s) => s.ty === "tr");
+          this.transform(g, tr, shift);
+          created.push(g.id);
+          break;
+        }
+        case "rc":
+        case "el":
+        case "sh":
+        case "sr": {
+          const node = this.geometry(it, shift);
+          if (!node) break;
+          this.paint(node, applies.filter((s) => s.ty !== "tm"), shift);
+          this.trim(node, applies.filter((s) => s.ty === "tm"), items.filter((s) => GEOMETRY.has(s.ty)).length, shift);
+          this.add(node, parentId);
+          created.push(node.id);
+          break;
+        }
+        case "fl":
+        case "st":
+        case "gf":
+        case "gs":
+        case "tr":
+          break;
+        case "tm":
+          break;
+        case "rp":
+          this.notes.add("Repeaters are not imported.");
+          break;
+        case "mm":
+          this.notes.add("Merge paths are not imported: the shapes stay separate.");
+          break;
+        case "rd":
+          this.notes.add("Rounded corners (the modifier) are not imported.");
+          break;
+        default:
+          this.notes.add(`Shape items of type \u201C${String(it.ty)}\u201D are not imported.`);
+      }
+    }
+    return created;
+  }
+  geometry(it, shift) {
+    if (it.ty === "rc" || it.ty === "el") {
+      const p = this.read(it.p, [0, 0], shift), s = this.read(it.s, [0, 0], shift);
+      const [w2, h2] = s.still, [cx2, cy2] = p.still;
+      const node2 = it.ty === "rc" ? createRectangle({ name: String(it.nm ?? "Rectangle"), x: cx2 - w2 / 2, y: cy2 - h2 / 2, width: w2, height: h2 }) : createEllipse({ name: String(it.nm ?? "Ellipse"), x: cx2 - w2 / 2, y: cy2 - h2 / 2, width: w2, height: h2 });
+      const sameTimes = p.keys && s.keys && p.keys.length === s.keys.length && p.keys.every((k, j) => Math.abs(k.t - s.keys[j].t) < 0.5);
+      if (s.keys) {
+        this.setTrack(node2, "width", this.track(s, 0));
+        this.setTrack(node2, "height", this.track(s, 1));
+      }
+      if (p.keys && s.keys && !sameTimes) this.notes.add(`\u201C${String(it.nm ?? it.ty)}\u201D moves and resizes on different keys: imported with its size keys only.`);
+      if (p.keys && (!s.keys || sameTimes)) {
+        this.setTrack(node2, "x", this.track({ ...p, keys: p.keys.map((k, j) => ({ ...k, v: [k.v[0] - (s.keys ? s.keys[j].v[0] : w2) / 2, k.v[1] - (s.keys ? s.keys[j].v[1] : h2) / 2] })) }, 0));
+        this.setTrack(node2, "y", this.track({ ...p, keys: p.keys.map((k, j) => ({ ...k, v: [k.v[0] - (s.keys ? s.keys[j].v[0] : w2) / 2, k.v[1] - (s.keys ? s.keys[j].v[1] : h2) / 2] })) }, 1));
+      } else if (s.keys) {
+        this.setTrack(node2, "x", this.track({ ...s, keys: s.keys.map((k) => ({ ...k, v: [cx2 - k.v[0] / 2, cy2 - k.v[1] / 2] })) }, 0));
+        this.setTrack(node2, "y", this.track({ ...s, keys: s.keys.map((k) => ({ ...k, v: [cx2 - k.v[0] / 2, cy2 - k.v[1] / 2] })) }, 1));
+      }
+      if (it.ty === "rc") {
+        const r = this.read(it.r, [0], shift);
+        node2.cornerRadius = r.still[0];
+        this.setTrack(node2, "cornerRadius", this.track(r, 0));
+      }
+      return node2;
+    }
+    if (it.ty === "sh") {
+      return this.animatedVector(it.ks, String(it.nm ?? "Path"), shift);
+    }
+    const n = this.read(it.pt, [5], shift).still[0];
+    const or = this.read(it.or, [50], shift).still[0], ir = this.read(it.ir, [25], shift).still[0];
+    const [cx, cy] = this.read(it.p, [0, 0], shift).still;
+    const rot = this.read(it.r, [0], shift).still[0];
+    const star = it.sy === 1;
+    const pts = [];
+    const count = Math.max(3, Math.round(n)) * (star ? 2 : 1);
+    for (let i = 0; i < count; i++) {
+      const a = i / count * Math.PI * 2 - Math.PI / 2;
+      const r = star && i % 2 ? ir : or;
+      pts.push([Math.cos(a) * r, Math.sin(a) * r]);
+    }
+    const xs = pts.map((q) => q[0]), ys = pts.map((q) => q[1]);
+    const minX = Math.min(...xs), minY = Math.min(...ys), w = Math.max(...xs) - minX, h = Math.max(...ys) - minY;
+    const props = { name: String(it.nm ?? (star ? "Star" : "Polygon")), x: cx + minX, y: cy + minY, width: w, height: h, rotation: rot, pointCount: Math.max(3, Math.round(n)) };
+    const node = star ? createStar({ ...props, innerRadius: or ? ir / or : 0.5 }) : createPolygon(props);
+    Object.assign(node, { anchorX: -minX / w, anchorY: -minY / h });
+    if ([it.pt, it.or, it.ir, it.p, it.r].some((p) => p?.a === 1)) this.notes.add(`Star and polygon keys are not imported (\u201C${props.name}\u201D).`);
+    if (it.is?.k || it.os?.k) this.notes.add("Star roundness is not imported.");
+    return node;
+  }
+  /** A path shape as a vector: its keys (`a: 1`) as a morphing `paths` track, every shape placed from the first's origin. */
+  animatedVector(ks, name, shift) {
+    if (ks.a !== 1) return ks.k ? this.vectorFrom(ks.k, name) : null;
+    const raw = ks.k;
+    const shapes = raw.map((k, j) => k.s?.[0] ?? raw[j - 1]?.e?.[0] ?? raw[j - 1]?.s?.[0]);
+    const firstShape = shapes.find((b) => b);
+    if (!firstShape) return null;
+    const node = this.vectorFrom(firstShape, name);
+    const keyed = raw.map((k, j) => ({ k, b: shapes[j] })).filter((e) => !!e.b);
+    if (keyed.length < 2) return node;
+    const keys = keyed.map(({ k, b }, j) => ({
+      id: `lk${this.keySeq++}`,
+      t: this.ms(k.t - shift),
+      v: [this.pathFrom(b, node.x, node.y)],
+      out: j < keyed.length - 1 ? interpOf(k, 0) : { kind: "linear" }
+    }));
+    this.setTrack(node, "paths", { keys });
+    return node;
+  }
+  vectorFrom(b, name) {
+    const all = this.bezierPoints(b);
+    const minX = Math.min(...all.map((q) => q[0])), minY = Math.min(...all.map((q) => q[1]));
+    const maxX = Math.max(...all.map((q) => q[0])), maxY = Math.max(...all.map((q) => q[1]));
+    return createVector({ name, x: minX, y: minY, width: Math.max(1e-3, maxX - minX), height: Math.max(1e-3, maxY - minY), paths: [this.pathFrom(b, minX, minY)], fills: [], strokes: [] });
+  }
+  /** Every vertex and control point of `b`, absolute. */
+  bezierPoints(b) {
+    return b.v.flatMap((v, i) => {
+      const di = b.i[i] ?? [0, 0], dO = b.o[i] ?? [0, 0];
+      return [v, [v[0] + di[0], v[1] + di[1]], [v[0] + dO[0], v[1] + dO[1]]];
+    });
+  }
+  /** `b` as one of our paths, with `(minX, minY)` as its origin. */
+  pathFrom(b, minX, minY) {
+    const pts = b.v.map((v, i) => ({ v, i: b.i[i] ?? [0, 0], o: b.o[i] ?? [0, 0] }));
+    const has = (d) => Math.abs(d[0]) > 1e-9 || Math.abs(d[1]) > 1e-9;
+    const points = pts.map((p) => ({
+      x: p.v[0] - minX,
+      y: p.v[1] - minY,
+      // Handles are ABSOLUTE control points in our paths (lib/io/export-ir/paths.ts vectorCmds).
+      ...has(p.i) ? { handleIn: { x: p.v[0] + p.i[0] - minX, y: p.v[1] + p.i[1] - minY } } : {},
+      ...has(p.o) ? { handleOut: { x: p.v[0] + p.o[0] - minX, y: p.v[1] + p.o[1] - minY } } : {}
+    }));
+    for (let j = 0; j < points.length; j++) {
+      const a = points[j], nb = points[(j + 1) % points.length];
+      if (j === points.length - 1 && !b.c) break;
+      const out = a.handleOut, inn = nb.handleIn;
+      if (out && !inn) nb.handleIn = { x: nb.x, y: nb.y };
+      if (inn && !out) a.handleOut = { x: a.x, y: a.y };
+    }
+    return { points, closed: b.c };
+  }
+  /** The nearest trim paths over a stroked shape (`siblings`: how many shapes it cuts in its group). */
+  trim(node, trims, siblings, shift) {
+    const tm = trims[0];
+    if (!tm || !node.strokes?.length) return;
+    if (trims.length > 1) this.notes.add("Stacked trim paths are imported as the nearest one.");
+    if (tm.m === 2 && siblings > 1) this.notes.add("Trim paths that run through several shapes one after another are imported as trimming each shape at once.");
+    const s = this.read(tm.s, [0], shift), e = this.read(tm.e, [100], shift), o = this.read(tm.o, [0], shift);
+    node.trim = { start: s.still[0] / 100, end: e.still[0] / 100, offset: o.still[0] };
+    this.setTrack(node, "trim.start", this.track(s, 0, (v) => v / 100));
+    this.setTrack(node, "trim.end", this.track(e, 0, (v) => v / 100));
+    this.setTrack(node, "trim.offset", this.track(o, 0));
+  }
+  /** Fills and strokes, top first as our lists hold them. */
+  paint(node, styles, shift) {
+    const fills = [], strokes = [];
+    let sawFill = false;
+    for (const s of styles) {
+      const o = this.read(s.o, [100], shift);
+      if (s.ty === "fl") {
+        sawFill = true;
+        const c = this.read(s.c, [0, 0, 0], shift);
+        const id = `lf${fills.length}`;
+        fills.push({ id, type: "SOLID", color: this.color(c.still), opacity: o.still[0] / 100, visible: true });
+        this.setTrack(node, `fills[@${id}].color`, this.colorTrack(c));
+        this.setTrack(node, `fills[@${id}].opacity`, this.track(o, 0, (v) => v / 100));
+        if (s.r === 2) node.fillRule = "EVENODD";
+      } else if (s.ty === "st") {
+        if (sawFill) this.notes.add("A stroke listed under a fill is drawn over it (strokes always draw over fills here).");
+        const c = this.read(s.c, [0, 0, 0], shift), w = this.read(s.w, [1], shift);
+        const id = `ls${strokes.length}`;
+        const dash = s.d;
+        const dashes = dash?.filter((d) => d.n === "d" || d.n === "g").map((d) => this.read(d.v, [0], shift).still[0]) ?? [];
+        strokes.push({
+          id,
+          color: { ...this.color(c.still), a: o.still[0] / 100 },
+          width: w.still[0],
+          alignment: "CENTER",
+          cap: s.lc === 2 ? "ROUND" : s.lc === 3 ? "SQUARE" : "NONE",
+          join: s.lj === 2 ? "ROUND" : s.lj === 3 ? "BEVEL" : "MITER",
+          dashPattern: dashes.length >= 2 ? dashes.slice(0, 2) : [],
+          visible: true
+        });
+        this.setTrack(node, `strokes[@${id}].color`, c.keys ? { keys: c.keys.map((k, j) => ({ id: `lk${this.keySeq++}`, t: k.t, v: { ...this.color(k.v), a: o.still[0] / 100 }, out: j < c.keys.length - 1 ? k.out[0] : { kind: "linear" } })) } : null);
+        this.setTrack(node, `strokes[@${id}].width`, this.track(w, 0));
+        if (o.keys) this.notes.add("Stroke opacity keys are not imported.");
+      } else if (s.ty === "gf" || s.ty === "gs") {
+        if (s.ty === "gs") {
+          this.notes.add("Gradient strokes are imported as solid strokes in their first colour.");
+        }
+        const g = s.g;
+        const gk = this.read(g.k, [], shift);
+        if (gk.keys || s.s?.a === 1 || s.e?.a === 1) this.notes.add("Gradient keys are not imported: gradients keep their first value.");
+        const vals = gk.still, n = g.p;
+        const stops = Array.from({ length: n }, (_, k) => ({ position: vals[k * 4], color: { r: vals[k * 4 + 1], g: vals[k * 4 + 2], b: vals[k * 4 + 3], a: 1 } }));
+        if (vals.length >= n * 6) for (let k = 0; k < n; k++) stops[k].color.a = vals[n * 4 + k * 2 + 1] ?? 1;
+        const [sx, sy] = this.read(s.s, [0, 0], shift).still, [ex, ey] = this.read(s.e, [0, 0], shift).still;
+        const w = node.width || 1, h = node.height || 1;
+        const rel = (x, y) => ({ x: (x - node.x) / w, y: (y - node.y) / h });
+        if (s.ty === "gs") {
+          strokes.push({ color: stops[0]?.color ?? { r: 0, g: 0, b: 0, a: 1 }, width: this.read(s.w, [1], shift).still[0], alignment: "CENTER", cap: "NONE", join: "MITER", dashPattern: [], visible: true });
+          continue;
+        }
+        const a = rel(sx, sy), b = rel(ex, ey);
+        fills.push({
+          type: s.t === 2 ? "GRADIENT_RADIAL" : "GRADIENT_LINEAR",
+          opacity: o.still[0] / 100,
+          visible: true,
+          gradientStops: stops,
+          gradientHandlePositions: s.t === 2 ? [a, b, { x: a.x - (b.y - a.y) * (h / w), y: a.y + (b.x - a.x) * (w / h) }] : [a, b, { x: a.x, y: b.y }]
+        });
+        if (s.h?.k) this.notes.add("Radial gradient highlights are not imported.");
+      }
+    }
+    ;
+    node.fills = fills;
+    node.strokes = strokes;
+  }
+};
+function importLottie(input, opts = {}) {
+  const read = input instanceof Uint8Array ? readDotLottie(input) : { animation: input, stateMachines: [] };
+  const anim = read.animation;
+  const imp = new Importer(anim);
+  const name = opts.name ?? anim.nm ?? "Lottie";
+  const doc = createDocument(name);
+  const pageId = doc.pages[0];
+  const fps = nearestFps(anim.fr);
+  if (Math.abs(fps - anim.fr) > 0.01) imp.notes.add(`The timeline runs at ${fps} fps (the file is ${anim.fr} fps; key times are kept exactly).`);
+  const duration = Math.max(1, imp.ms(anim.op - anim.ip));
+  const frame = createFrame({ name, x: 0, y: 0, width: anim.w, height: anim.h, fills: [], clipsContent: true });
+  frame.timeline = {
+    duration,
+    fps,
+    ...anim.markers?.length ? { markers: anim.markers.map((m, i) => ({ id: `lm${i}`, t: Math.max(0, imp.ms(m.tm - anim.ip)), label: m.cm })) } : {}
+  };
+  imp.add(frame, null);
+  imp.layers(anim.layers ?? [], frame.id, anim.ip, "", { w: anim.w, h: anim.h });
+  frame.parentId = pageId;
+  if (read.stateMachines.length) {
+    const byName = /* @__PURE__ */ new Map();
+    for (const n of Object.values(imp.nodes)) if (n.name && n.id !== frame.id && !byName.has(n.name)) byName.set(n.name, n.id);
+    const first2 = read.stateMachines[0];
+    const { machine, notes } = stateMachineFromDotLottie({ raw: first2.raw, markers: anim.markers ?? [], ip: anim.ip, fr: anim.fr, nodeByName: (name2) => byName.get(name2) }, "sm1", first2.id);
+    for (const n of notes) imp.notes.add(n);
+    if (machine) imp.nodes[frame.id].stateMachine = machine;
+    if (read.stateMachines.length > 1) imp.notes.add(`The file has ${read.stateMachines.length} state machines: the first, \u201C${first2.id}\u201D, is imported.`);
+  }
+  const page = doc.nodes[pageId];
+  const nodes = { ...doc.nodes, ...imp.nodes, [pageId]: { ...page, childIds: [...page.childIds, frame.id] } };
+  let pages = doc.pages;
+  if (imp.components.size) {
+    const comps = createPage("Components");
+    let y = 0;
+    for (const { id } of imp.components.values()) {
+      const c = nodes[id];
+      nodes[id] = { ...c, parentId: comps.id, x: 0, y };
+      comps.childIds.push(id);
+      y += c.height + 200;
+    }
+    nodes[comps.id] = comps;
+    pages = [...pages, comps.id];
+  }
+  return { document: { ...doc, pages, nodes }, frameId: frame.id, notes: [...imp.notes], layerNodes: imp.layerNodes };
+}
+export {
+  importLottie,
+  isLottieJson,
+  readDotLottie,
+  readLottieFile
+};