@pixerate/flair 0.32.0 → 0.34.0

package/dist/{chunk-RS2S2K5C.js → chunk-IHUNCBMF.js}

@@ -10,9 +10,11 @@ import {
   rgbToHex
 } from "./chunk-VYOMXE6I.js";
 import {
+  formatCount,
+  lerpAttr,
   morphPaths,
   morphSequence
-} from "./chunk-ORAFCHX3.js";
+} from "./chunk-VKIDRHBG.js";
 
 // src/catalog/inputs.ts
 var EFFECT_INPUTS = ["image", "video", "svg", "text", "mask", "path", "audio"];
@@ -1545,10 +1547,10 @@ var numberTicker = {
     const chars = Array.from(String(v.value)).slice(0, TICKER_SLOTS);
     const widths = chars.map((c) => (/[0-9]/.test(c) ? 0.62 : Math.max(0.3, textWidthEm(c))) * TICKER_SIZE);
     const total = widths.reduce((a, b) => a + b, 0);
-    const fit7 = Math.min(1, 296 / Math.max(1, total));
+    const fit8 = Math.min(1, 296 / Math.max(1, total));
     const duration = Math.round(Math.min(5, Math.max(0.2, Number(v.duration) || 1.6)) * 1e3);
     const stagger = Math.round(Math.min(0.5, Math.max(0, Number(v.stagger) || 0)) * 1e3);
-    const out = { fit: +fit7.toFixed(4), ms: duration };
+    const out = { fit: +fit8.toFixed(4), ms: duration };
     let x = 160 - total / 2;
     let digit = 0;
     for (let i = 0; i < TICKER_SLOTS; i++) {
@@ -1679,6 +1681,19 @@ var EFFECT_CATEGORIES = [
   "data",
   "icon"
 ];
+var EFFECT_CATEGORY_GROUPS = [
+  { name: "Backgrounds", categories: ["gradient", "organic", "pattern", "space", "3d", "weather", "water", "atmosphere"] },
+  { name: "Light", categories: ["light", "lighting", "glow", "shadow", "electric"] },
+  { name: "Pictures", categories: ["image", "distortion", "retro", "comic", "timewarp", "melt"] },
+  { name: "Particles & FX", categories: ["overlay", "splatter", "bubble", "particles", "trail", "debris", "impact", "pyrotechnics"] },
+  { name: "Type & titles", categories: ["text", "morph", "broadcast", "annotation", "sticker"] },
+  { name: "Inputs", categories: ["interaction", "audio", "scroll"] },
+  { name: "Interface", categories: ["ui", "loader", "icon", "data"] },
+  { name: "Transitions", categories: ["transition"] }
+];
+function categoryGroup(category) {
+  return EFFECT_CATEGORY_GROUPS.find((g) => g.categories.includes(category));
+}
 var VIDEO_USES = ["filter", "transition", "interactive", "stills", "none"];
 var VECTOR_CONTROL_TYPES = ["float", "int", "bool", "color", "text"];
 var PLACEHOLDER = /\{\{\s*([A-Za-z_]\w*)\s*(?::\s*([A-Za-z0-9]*)([^}]*))?\}\}/g;
@@ -5954,8 +5969,8 @@ function packGlyph(rows) {
   return `ivec2(${a}, ${b})`;
 }
 var vec3Hex = (hex) => {
-  const n15 = parseInt(hex.slice(1), 16);
-  const c = [n15 >> 16, n15 >> 8 & 255, n15 & 255].map((v) => +(v / 255).toFixed(3));
+  const n17 = parseInt(hex.slice(1), 16);
+  const c = [n17 >> 16, n17 >> 8 & 255, n17 & 255].map((v) => +(v / 255).toFixed(3));
   return `vec3(${c.map((v) => Number.isInteger(v) ? `${v}.0` : String(v)).join(", ")})`;
 };
 var paletteArray = (name, hexes) => `const vec3 ${name}[${hexes.length}] = vec3[${hexes.length}](
@@ -7013,7 +7028,7 @@ var chompLoader = {
 var pixelEffects = [pixelText, coinSpin, spaceInvader, pixelHeartHealth, chompLoader];
 
 // src/catalog/pyro.ts
-var round = (n15) => Math.round(n15 * 10) / 10;
+var round = (n17) => Math.round(n17 * 10) / 10;
 var fireworkBurst = {
   kind: "vector",
   id: "firework-burst",
@@ -7068,7 +7083,7 @@ var fireworkBurst = {
 var pyroEffects = [fireworkBurst];
 
 // src/catalog/timewarp.ts
-var r111 = (n15) => Math.round(n15 * 10) / 10;
+var r111 = (n17) => Math.round(n17 * 10) / 10;
 var at2 = (degrees, radius) => {
   const a = degrees * Math.PI / 180;
   return [r111(100 + radius * Math.sin(a)), r111(100 - radius * Math.cos(a))];
@@ -7202,16 +7217,16 @@ function around(c, r, from, to, avoid) {
   if (((avoid - from) % 360 + 360) % 360 < delta) delta -= 360;
   return arc2(c[0], c[1], r, r, from, from + delta);
 }
-function crescent(c1, r114, c2, r2_) {
+function crescent(c1, r116, c2, r2_) {
   const [dx, dy] = [c2[0] - c1[0], c2[1] - c1[1]];
   const d = Math.hypot(dx, dy);
-  const a = (r114 * r114 - r2_ * r2_ + d * d) / (2 * d);
-  const h = Math.sqrt(Math.max(0, r114 * r114 - a * a));
+  const a = (r116 * r116 - r2_ * r2_ + d * d) / (2 * d);
+  const h = Math.sqrt(Math.max(0, r116 * r116 - a * a));
   const [px2, py2] = [c1[0] + a * dx / d, c1[1] + a * dy / d];
   const i1 = [px2 - h * dy / d, py2 + h * dx / d];
   const i2 = [px2 + h * dy / d, py2 - h * dx / d];
   const angle = (c, p) => Math.atan2(p[1] - c[1], p[0] - c[0]) / DEG2;
-  const outer = around(c1, r114, angle(c1, i1), angle(c1, i2), angle(c1, c2));
+  const outer = around(c1, r116, angle(c1, i1), angle(c1, i2), angle(c1, c2));
   const inner = around(c2, r2_, angle(c2, i2), angle(c2, i1), angle(c2, c1) + 180);
   return polyline3([...outer, ...inner.slice(1, -1)], true);
 }
@@ -19738,26 +19753,26 @@ float coverage(vec2 p, float radius) {
   }
   return sum / 16.0;
 }`.trim();
-function goldenTaps(n15) {
-  const taps = Array.from({ length: n15 }, (_, i) => {
-    const r = Math.sqrt((i + 0.5) / n15);
+function goldenTaps(n17) {
+  const taps = Array.from({ length: n17 }, (_, i) => {
+    const r = Math.sqrt((i + 0.5) / n17);
     const a = i * 2.39996;
     return `vec2(${(r * Math.cos(a)).toFixed(5)}, ${(r * Math.sin(a)).toFixed(5)})`;
   });
-  return `const vec2 GOLDEN${n15}[${n15}] = vec2[${n15}](${taps.join(", ")});`;
+  return `const vec2 GOLDEN${n17}[${n17}] = vec2[${n17}](${taps.join(", ")});`;
 }
-function coverageTaps(name, n15, blur) {
+function coverageTaps(name, n17, blur) {
   return `
-${goldenTaps(n15)}
+${goldenTaps(n17)}
 float ${name}(vec2 p, float radius) {
   float sum = 0.0;
   if (gMaskPlace.w < 0.5) {
-    for (int i = 0; i < ${n15}; i++) sum += shapeAt(p + radius * GOLDEN${n15}[i], radius * ${blur.toFixed(2)});
+    for (int i = 0; i < ${n17}; i++) sum += shapeAt(p + radius * GOLDEN${n17}[i], radius * ${blur.toFixed(2)});
   } else {
     float lod = log2(max(radius * ${blur.toFixed(2)} * gMaskPlace.z, 1.0));
-    for (int i = 0; i < ${n15}; i++) sum += shapeLod(p + radius * GOLDEN${n15}[i], lod);
+    for (int i = 0; i < ${n17}; i++) sum += shapeLod(p + radius * GOLDEN${n17}[i], lod);
   }
-  return sum / ${n15}.0;
+  return sum / ${n17}.0;
 }`.trim();
 }
 var LITE_TAPS = 10;
@@ -24982,7 +24997,7 @@ void mainImage(out vec4 fragColor, in vec2 fragCoord) {
 var waterShaders = [oceanWaves, underwaterScene, pondRipples, waterfall];
 
 // src/catalog/text.ts
-var r112 = (n15) => Math.round(n15 * 10) / 10;
+var r112 = (n17) => Math.round(n17 * 10) / 10;
 function fit5(text, width, max, ems = textWidthEm(text)) {
   const e = Math.max(0.6, ems);
   const size = Math.min(max, width / e);
@@ -25446,7 +25461,7 @@ var glitchText = {
     };
   },
   motion: (() => {
-    const word = (paint) => `<text x="200" y="{{base}}" text-anchor="middle" textLength="{{length}}" lengthAdjust="spacingAndGlyphs" font-family="{{font}}" font-size="{{size}}" font-weight="{{weight}}" ${paint}>{{text}}</text>`;
+    const word = (paint2) => `<text x="200" y="{{base}}" text-anchor="middle" textLength="{{length}}" lengthAdjust="spacingAndGlyphs" font-family="{{font}}" font-size="{{size}}" font-weight="{{weight}}" ${paint2}>{{text}}</text>`;
     const jumps = (id, value) => GLITCH.map((key, k) => ({ id, attrs: { transform: [value(k), value(k)] }, delay: key.at, ms: 0 }));
     return {
       svg: `<svg viewBox="{{viewBox}}" overflow="{{overflow}}" data-overhang="{{overhang}}"><!-- {{text: text default='GLITCH' label='Text'}} {{background: color default=#07070B label='Background'}} {{ink: color default=#F5F5F5 label='Text colour'}} {{left: color default=#FF0040 label='Red copy'}} {{right: color default=#00F0FF label='Cyan copy'}} {{amount: float min=0 max=3 default=1 step=0.1 label='Intensity'}} ${typeface(HEAVY2, 900)} --><defs>${[0, 1, 2, 3].map((b) => `<clipPath id="slice${b}"><rect x="-5000" y="{{cut${b}}}" width="10400" height="{{band${b}}}"/></clipPath>`).join("")}</defs><rect width="400" height="200" fill="{{background}}" opacity="{{backdrop}}"/><g id="red" style="mix-blend-mode:screen">${word(`fill="{{left}}"`)}</g><g id="cyan" style="mix-blend-mode:screen">${word(`fill="{{right}}"`)}</g>${[0, 1, 2, 3].map((b) => `<g clip-path="url(#slice${b})"><g id="s${b}">${word(`fill="{{ink}}"`)}</g></g>`).join("")}</svg>`,
@@ -25500,7 +25515,7 @@ var extrudedText = {
     };
   },
   motion: (() => {
-    const word = (paint) => `x="200" y="{{base}}" text-anchor="middle" textLength="{{length}}" lengthAdjust="spacingAndGlyphs" font-family="{{font}}" font-size="{{size}}" font-weight="{{weight}}" stroke-linejoin="round" ${paint}`;
+    const word = (paint2) => `x="200" y="{{base}}" text-anchor="middle" textLength="{{length}}" lengthAdjust="spacingAndGlyphs" font-family="{{font}}" font-size="{{size}}" font-weight="{{weight}}" stroke-linejoin="round" ${paint2}`;
     const layers = Array.from({ length: LAYERS }, (_, k) => LAYERS - k);
     return {
       svg: `<svg viewBox="{{viewBox}}" overflow="{{overflow}}" data-overhang="{{overhang}}"><!-- {{text: text default='RETRO' label='Text'}} {{background: color default=#FFE8C2 label='Background'}} {{face: color default=#FFD23F label='Face'}} {{outline: color default=#1A1423 label='Outline'}} {{side: color default=#EE4266 label='Extrude'}} {{shade: color default=#3B1F2B label='Shadow'}} {{depth: float min=0.2 max=2 default=1 step=0.1 label='Depth'}} ${typeface(HEAVY2, 900)} --><rect width="400" height="200" fill="{{background}}" opacity="{{backdrop}}"/>${layers.map((i) => `<text id="e${i}" transform="translate(0 0)" ${word(`fill="{{fill${i}}}" stroke="{{fill${i}}}" stroke-width="2"`)}>{{text}}</text>`).join("")}<text ${word(`fill="{{face}}" stroke="{{outline}}" stroke-width="2.5" paint-order="stroke"`)}>{{text}}</text></svg>`,
@@ -27181,7 +27196,7 @@ var dripText = {
     const left = 200 - width / 2;
     const runs = Math.min(DRIP_RUNS, Math.max(1, Math.round(width / DRIP_RUN)));
     const run = width / runs;
-    const r114 = (n15) => Math.round(n15 * 10) / 10;
+    const r116 = (n17) => Math.round(n17 * 10) / 10;
     const edge = Number(v.stroke) / 2 / DRIP_SIZE;
     const tip = (DRIP_TOP + Math.max(...DRIPS2.map((d) => d.length)) * Number(v.drip) + 13 * 0.72 - DRIP_BASELINE) / DRIP_SIZE;
     const overhang = [edge, edge, Math.max(0.05, tip) + edge, edge].map((e) => Math.round(e * 100) / 100).join(" ");
@@ -27195,15 +27210,15 @@ var dripText = {
       overhang,
       ...Object.fromEntries(
         DRIP_SLOTS.flatMap((d) => {
-          const x = r114(left + (d.run + d.at) * run);
-          const length = r114(d.length * Number(v.drip));
+          const x = r116(left + (d.run + d.at) * run);
+          const length = r116(d.length * Number(v.drip));
           return [
             [`show${d.i}`, d.run < runs ? "inline" : "none"],
             [`x${d.i}`, x],
-            [`left${d.i}`, r114(x - d.width / 2)],
-            [`shine${d.i}`, r114(x - d.width * 0.25)],
+            [`left${d.i}`, r116(x - d.width / 2)],
+            [`shine${d.i}`, r116(x - d.width * 0.25)],
             [`len${d.i}`, length],
-            [`tip${d.i}`, r114(DRIP_TOP + length)]
+            [`tip${d.i}`, r116(DRIP_TOP + length)]
           ];
         })
       )
@@ -27211,8 +27226,8 @@ var dripText = {
   },
   motion: (() => {
     const word = `<text x="200" y="${DRIP_BASELINE}" text-anchor="middle" textLength="{{width}}" lengthAdjust="spacingAndGlyphs" font-family="{{font}}" font-size="${DRIP_SIZE}" font-weight="{{weight}}" stroke-linejoin="round"`;
-    const drips = (layer, paint) => DRIP_SLOTS.map(
-      (d) => `<g display="{{show${d.i}}}"><rect id="${layer}r${d.i}" x="{{left${d.i}}}" y="${DRIP_TOP}" width="${d.width}" height="0" rx="${d.width / 2}" ${paint}/><circle id="${layer}c${d.i}" cx="{{x${d.i}}}" cy="${DRIP_TOP}" r="${d.width * 0.72}" ${paint}/></g>`
+    const drips = (layer, paint2) => DRIP_SLOTS.map(
+      (d) => `<g display="{{show${d.i}}}"><rect id="${layer}r${d.i}" x="{{left${d.i}}}" y="${DRIP_TOP}" width="${d.width}" height="0" rx="${d.width / 2}" ${paint2}/><circle id="${layer}c${d.i}" cx="{{x${d.i}}}" cy="${DRIP_TOP}" r="${d.width * 0.72}" ${paint2}/></g>`
     ).join("");
     const outline4 = `fill="{{outline}}" stroke="{{outline}}" stroke-width="{{stroke}}"`;
     const pop2 = (from, to) => [`translate(200 100) scale(${from}) translate(-200 -100)`, `translate(200 100) scale(${to}) translate(-200 -100)`];
@@ -27346,6 +27361,1038 @@ var vectorEffects = [
   uploadCard
 ];
 
+// src/catalog/data.ts
+var r114 = (v) => Math.round(v * 10) / 10;
+var r212 = (v) => Math.round(v * 100) / 100;
+var n15 = (name) => `{{${name}}}`;
+var SANS12 = `system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif`;
+function fit7(text, width, max) {
+  const e = Math.max(0.6, textWidthEm(String(text)));
+  const size = Math.min(max, width / e);
+  return { size: r114(size), length: r114(e * size) };
+}
+function fitLabel(text, width, max, min) {
+  const whole = String(text ?? "");
+  const f = fit7(whole, width, max);
+  if (f.size >= min) return { text: whole, ...f };
+  const letters = Array.from(whole);
+  while (letters.length > 1 && Math.max(0.6, textWidthEm(`${letters.join("").trimEnd()}\u2026`)) * min > width) letters.pop();
+  const cut = `${letters.join("").trimEnd()}\u2026`;
+  return { text: cut, ...fit7(cut, width, max) };
+}
+var paint = (v) => isCurrentColor(v) ? "currentColor" : Array.isArray(v) ? rgbToHex(v) : "#000000";
+var formatSafe = (v) => String(v ?? "").replace(/[{}]/g, "");
+var DATA_PALETTE = ["#6366F1", "#22C55E", "#F59E0B", "#EC4899", "#0EA5E9", "#A855F7"];
+var palette = (count = DATA_PALETTE.length) => DATA_PALETTE.slice(0, count).map((hex, i) => `{{c${i + 1}: color default=${hex} label='Colour ${i + 1}'}}`).join(" ");
+var PALETTE_PRESETS = [
+  { name: "Ocean", values: { c1: [0.03, 0.4, 0.62], c2: [0.05, 0.65, 0.91], c3: [0.22, 0.74, 0.97], c4: [0.49, 0.83, 0.99], c5: [0.08, 0.72, 0.65], c6: [0.37, 0.92, 0.83] } },
+  { name: "Sunset", values: { c1: [0.94, 0.27, 0.27], c2: [0.98, 0.45, 0.09], c3: [0.98, 0.75, 0.14], c4: [0.93, 0.29, 0.6], c5: [0.66, 0.33, 0.97], c6: [0.4, 0.4, 0.95] } }
+];
+function parseNumberList(text, max) {
+  return String(text ?? "").split(/[,;\s]+/).filter((t) => t !== "").slice(0, max).map((token) => {
+    const cleaned = token.replace(/[^0-9.eE+-]/g, "");
+    const value = /\d/.test(cleaned) ? Number(cleaned) : NaN;
+    return Number.isFinite(value) ? Math.max(-1e9, Math.min(1e9, value)) : NaN;
+  });
+}
+function parseLabels(text, max) {
+  return String(text ?? "").split(/[,;\n]/).map((s) => s.trim()).slice(0, max);
+}
+function parseShares(text, max, fallback) {
+  const values = parseNumberList(text, max).map((v) => Number.isFinite(v) && v > 0 ? v : 0);
+  return values.some((v) => v > 0) ? values : [...fallback];
+}
+function decimalsOf(values) {
+  let most = 0;
+  for (const v of values) {
+    if (!Number.isFinite(v) || Number.isInteger(v)) continue;
+    const s = String(v);
+    most = Math.max(most, s.includes("e") ? 2 : s.split(".")[1]?.length ?? 0);
+  }
+  return Math.min(2, most);
+}
+function parseRace(text, maxRows, maxStates, fallback) {
+  const rows = [];
+  for (const line of String(text ?? "").split(/[;\n]+/)) {
+    if (!line.trim()) continue;
+    const colon = line.indexOf(":");
+    const name = colon >= 0 ? line.slice(0, colon).trim() : `#${rows.length + 1}`;
+    const raw = parseNumberList(colon >= 0 ? line.slice(colon + 1) : line, maxStates);
+    if (raw.some((v) => Number.isFinite(v))) rows.push({ name, raw });
+    if (rows.length === maxRows) break;
+  }
+  if (!rows.length) return fallback.map((r) => ({ name: r.name, values: [...r.values] }));
+  const states = Math.max(...rows.map((r) => r.raw.length));
+  return rows.map(({ name, raw }) => {
+    let last = raw.find((v) => Number.isFinite(v)) ?? 0;
+    const values = Array.from({ length: states }, (_, k) => {
+      const v = raw[k];
+      if (v !== void 0 && Number.isFinite(v)) last = Math.max(0, v);
+      return last;
+    });
+    return { name, values };
+  });
+}
+function parseSeries(text, maxRows, maxPoints, fallback) {
+  const rows = String(text ?? "").split(/[;\n]+/).map((line) => parseNumberList(line, maxPoints)).filter((row) => row.some((v) => Number.isFinite(v))).slice(0, maxRows).map((row) => row.map((v) => Number.isFinite(v) && v > 0 ? v : 0));
+  if (!rows.length || rows.every((r) => r.every((v) => v === 0))) return fallback.map((r) => [...r]);
+  const points = Math.max(2, ...rows.map((r) => r.length));
+  return rows.map((r) => Array.from({ length: points }, (_, j) => r[Math.min(j, r.length - 1)]));
+}
+var SLOTS3 = 6;
+var LEGEND = { swatch: 158, label: 174, right: 250, pitch: 22 };
+function legendValues(labels, fractions, at4, cy) {
+  const shown = fractions.map((f) => f > 0);
+  const count = shown.filter(Boolean).length;
+  const out = {};
+  let row = 0;
+  for (let i = 0; i < SLOTS3; i++) {
+    const f = fractions[i] ?? 0;
+    const label = labels[i] ?? "";
+    const { text, size, length } = fitLabel(label, LEGEND.right - LEGEND.label - 32, 11, 8);
+    out[`show${i}`] = f > 0 ? "inline" : "none";
+    out[`ly${i}`] = r114(cy + ((f > 0 ? row : 0) - (count - 1) / 2) * LEGEND.pitch);
+    out[`l${i}`] = text;
+    out[`ls${i}`] = size;
+    out[`ll${i}`] = length;
+    out[`pct${i}`] = Math.round(f * 100);
+    out[`at${i}`] = at4[i] ?? 0;
+    if (f > 0) row++;
+  }
+  return out;
+}
+var legendMarkup = (prefix) => Array.from(
+  { length: SLOTS3 },
+  (_, i) => `<g id="${prefix}Row${i}" display="{{show${i}}}" opacity="0" transform="translate(8 {{ly${i}}})"><rect x="${LEGEND.swatch}" y="-5" width="10" height="10" rx="3" fill="{{c${i + 1}}}"/><text x="${LEGEND.label}" y="4" font-size="{{ls${i}}}" textLength="{{ll${i}}}" lengthAdjust="spacingAndGlyphs" fill="{{ink}}">{{l${i}}}</text><text id="${prefix}Pct${i}" x="${LEGEND.right}" y="4" text-anchor="end" font-size="11" font-weight="700" fill="{{ink}}">0%</text></g>`
+).join("");
+var legendAnimations = (prefix) => Array.from({ length: SLOTS3 }, (_, i) => [
+  { id: `${prefix}Row${i}`, attrs: { opacity: [0, 1], transform: [`translate(8 {{ly${i}}})`, `translate(0 {{ly${i}}})`] }, delay: n15(`at${i}`), ms: 320, ease: "out" },
+  { id: `${prefix}Pct${i}`, count: [0, n15(`pct${i}`)], format: "{n}%", delay: n15(`at${i}`), ms: 600, ease: "out" }
+]).flat();
+var DONUT = { cx: 80, cy: 80, r: 50, width: 22, start: 150, sweep: 1400 };
+var DONUT_DEFAULT = [42, 28, 18, 12];
+var donutChart = {
+  kind: "vector",
+  id: "donut-chart",
+  name: "Donut chart",
+  description: "Segments sweeping round a ring one after another, a legend giving each share, and the total counting up in the middle.",
+  category: "data",
+  tags: ["chart", "donut", "share", "dashboard", "report", "explainer"],
+  hold: 1600,
+  presets: [...PALETTE_PRESETS, { name: "Budget", values: { values: "1200,800,450,300,250", labels: "Rent,Food,Travel,Fun,Other", caption: "per month" } }],
+  derived: (v) => {
+    const values = parseShares(v.values, SLOTS3, DONUT_DEFAULT);
+    const total = values.reduce((a, b) => a + b, 0);
+    const fractions = values.map((x) => x / total);
+    const gap = fractions.filter((f) => f > 0).length > 1 ? 5e-3 : 0;
+    const out = {};
+    const at4 = [];
+    let cum = 0;
+    for (let i = 0; i < SLOTS3; i++) {
+      const f = fractions[i] ?? 0;
+      at4.push(Math.round(DONUT.start + cum * DONUT.sweep));
+      out[`rot${i}`] = r212(-90 + cum * 360);
+      out[`frac${i}`] = Math.min(1, Math.max(1e-3, +(f - gap).toFixed(4)));
+      out[`ms${i}`] = Math.max(60, Math.round(f * DONUT.sweep));
+      cum += f;
+    }
+    const dec = decimalsOf(values);
+    const totalSize = fit7(formatCount(total, { decimals: dec }), 64, 26).size;
+    const caption = fitLabel(v.caption, 58, 9.5, 7.5);
+    return {
+      ...legendValues(parseLabels(v.labels, SLOTS3), fractions, at4, DONUT.cy),
+      ...out,
+      total: +total.toFixed(dec),
+      dec,
+      totalSize,
+      totalY: r114(DONUT.cy + totalSize * 0.35 - (String(v.caption).trim() ? 5 : 0)),
+      captionY: r114(DONUT.cy + totalSize * 0.35 + 9),
+      captionText: caption.text,
+      captionSize: caption.size,
+      captionLength: caption.length,
+      countMs: DONUT.start + DONUT.sweep
+    };
+  },
+  motion: {
+    svg: `<svg viewBox="0 0 260 160" font-family="${SANS12}"><!-- {{values: text default='42,28,18,12' label='Values (comma-separated)'}} {{labels: text default='Direct,Social,Search,Email' label='Labels (comma-separated)'}} {{caption: text default='visits' label='Caption'}} {{ink: color default=#1E293B label='Text'}} {{track: color default=#E2E8F0 label='Track'}} ${palette()} --><circle cx="${DONUT.cx}" cy="${DONUT.cy}" r="${DONUT.r}" fill="none" stroke="{{track}}" stroke-width="${DONUT.width}"/>${Array.from(
+      { length: SLOTS3 },
+      (_, i) => `<g display="{{show${i}}}"><circle id="donutChartSeg${i}" cx="${DONUT.cx}" cy="${DONUT.cy}" r="${DONUT.r}" fill="none" stroke="{{c${i + 1}}}" stroke-width="${DONUT.width}" transform="rotate({{rot${i}}} ${DONUT.cx} ${DONUT.cy})"/></g>`
+    ).join(
+      ""
+    )}<text id="donutChartTotal" x="${DONUT.cx}" y="{{totalY}}" text-anchor="middle" font-size="{{totalSize}}" font-weight="800" fill="{{ink}}">0</text><text x="${DONUT.cx}" y="{{captionY}}" text-anchor="middle" font-size="{{captionSize}}" textLength="{{captionLength}}" lengthAdjust="spacingAndGlyphs" fill="{{ink}}" fill-opacity="0.6">{{captionText}}</text>${legendMarkup("donutChart")}</svg>`,
+    animate: [
+      ...Array.from({ length: SLOTS3 }, (_, i) => ({ id: `donutChartSeg${i}`, draw: [0, n15(`frac${i}`)], delay: n15(`at${i}`), ms: n15(`ms${i}`), ease: "linear" })),
+      { id: "donutChartTotal", count: [0, n15("total")], decimals: n15("dec"), ms: n15("countMs"), ease: "out" },
+      ...legendAnimations("donutChart")
+    ]
+  }
+};
+var PIE = { cx: 80, cy: 80, r: 58, pop: 7, start: 150, stagger: 230 };
+var PIE_DEFAULT = [38, 26, 20, 16];
+var pieMove = (dx, dy, s) => `translate(${dx} ${dy}) translate(${PIE.cx} ${PIE.cy}) scale(${s}) translate(${-PIE.cx} ${-PIE.cy})`;
+function wedge(a, b) {
+  const { cx, cy, r } = PIE;
+  if (b - a <= 0) return `M${cx} ${cy}Z`;
+  if (b - a >= 0.9999) return `M${cx} ${cy - r} A${r} ${r} 0 1 1 ${cx} ${cy + r} A${r} ${r} 0 1 1 ${cx} ${cy - r}Z`;
+  const at4 = (f) => `${r212(cx + r * Math.sin(f * 2 * Math.PI))} ${r212(cy - r * Math.cos(f * 2 * Math.PI))}`;
+  return `M${cx} ${cy} L${at4(a)} A${r} ${r} 0 ${b - a > 0.5 ? 1 : 0} 1 ${at4(b)}Z`;
+}
+var pieChart = {
+  kind: "vector",
+  id: "pie-chart",
+  name: "Pie chart",
+  description: "Pie slices popping out one at a time and settling into place, each with its percentage, beside a legend.",
+  category: "data",
+  tags: ["chart", "pie", "share", "percentage", "dashboard", "report"],
+  hold: 1600,
+  presets: [...PALETTE_PRESETS, { name: "Survey", values: { values: "54,31,15", labels: "Yes,No,Not sure" } }],
+  derived: (v) => {
+    const values = parseShares(v.values, SLOTS3, PIE_DEFAULT);
+    const total = values.reduce((a, b) => a + b, 0);
+    const fractions = values.map((x) => x / total);
+    const out = {};
+    const at4 = [];
+    const ink = paint(v.ink);
+    let cum = 0;
+    for (let i = 0; i < SLOTS3; i++) {
+      const f = fractions[i] ?? 0;
+      const mid = (cum + f / 2) * 2 * Math.PI;
+      const inside = f >= 0.08;
+      out[`tshow${i}`] = f >= 0.04 ? "inline" : "none";
+      const radius = inside ? PIE.r * 0.62 : PIE.r + 14;
+      at4.push(PIE.start + i * PIE.stagger);
+      out[`d${i}`] = wedge(cum, cum + f);
+      out[`ox${i}`] = r212(PIE.pop * Math.sin(mid));
+      out[`oy${i}`] = r212(-PIE.pop * Math.cos(mid));
+      out[`tx${i}`] = r114(PIE.cx + radius * Math.sin(mid));
+      out[`ty${i}`] = r114(PIE.cy - radius * Math.cos(mid) + 4);
+      out[`tf${i}`] = inside ? paint(v.onSlice) : ink;
+      out[`tl${i}`] = PIE.start + i * PIE.stagger + 260;
+      cum += f;
+    }
+    return { ...legendValues(parseLabels(v.labels, SLOTS3), fractions, at4, PIE.cy), ...out };
+  },
+  motion: {
+    svg: `<svg viewBox="0 0 260 160" font-family="${SANS12}"><!-- {{values: text default='38,26,20,16' label='Values (comma-separated)'}} {{labels: text default='Product,Services,Support,Other' label='Labels (comma-separated)'}} {{ink: color default=#1E293B label='Text'}} {{onSlice: color default=#FFFFFF label='Labels on slices'}} {{edge: color default=#FFFFFF label='Slice edges'}} ${palette()} -->${Array.from(
+      { length: SLOTS3 },
+      (_, i) => `<g id="pieChartSlice${i}" display="{{show${i}}}" transform="${pieMove(0, 0, 0)}"><path d="{{d${i}}}" fill="{{c${i + 1}}}" stroke="{{edge}}" stroke-width="2" stroke-linejoin="round"/></g>`
+    ).join("")}${Array.from(
+      { length: SLOTS3 },
+      (_, i) => `<text id="pieChartLabel${i}" display="{{tshow${i}}}" x="{{tx${i}}}" y="{{ty${i}}}" text-anchor="middle" font-size="11" font-weight="700" fill="{{tf${i}}}" opacity="0">0%</text>`
+    ).join("")}${legendMarkup("pieChart")}</svg>`,
+    animate: [
+      ...Array.from({ length: SLOTS3 }, (_, i) => [
+        { id: `pieChartSlice${i}`, attrs: { transform: [pieMove(0, 0, 0), pieMove(`{{ox${i}}}`, `{{oy${i}}}`, 1.06)] }, delay: n15(`at${i}`), ms: 260, ease: "out" },
+        { id: `pieChartSlice${i}`, attrs: { transform: [pieMove(`{{ox${i}}}`, `{{oy${i}}}`, 1.06), pieMove(0, 0, 1)] }, delay: n15(`tl${i}`), ms: 300, ease: "in-out" },
+        { id: `pieChartLabel${i}`, attrs: { opacity: [0, 1] }, delay: n15(`tl${i}`), ms: 200 },
+        { id: `pieChartLabel${i}`, count: [0, n15(`pct${i}`)], format: "{n}%", delay: n15(`tl${i}`), ms: 500, ease: "out" }
+      ]).flat(),
+      ...legendAnimations("pieChart")
+    ]
+  }
+};
+var GAUGE = { cx: 120, cy: 112, r: 84, band: 14 };
+var gaugeAt = (f, r) => `${r212(GAUGE.cx - r * Math.cos(f * Math.PI))} ${r212(GAUGE.cy - r * Math.sin(f * Math.PI))}`;
+var gaugeArc = (a, b) => b - a <= 5e-4 ? `M${gaugeAt(a, GAUGE.r)}` : `M${gaugeAt(a, GAUGE.r)} A${GAUGE.r} ${GAUGE.r} 0 0 1 ${gaugeAt(b, GAUGE.r)}`;
+var needle = (deg) => `rotate(${deg} ${GAUGE.cx} ${GAUGE.cy})`;
+var gauge = {
+  kind: "vector",
+  id: "gauge",
+  name: "Gauge",
+  description: "A speedometer gauge: its coloured band draws on, the needle sweeps past the value and settles, and the reading counts up beneath.",
+  category: "data",
+  tags: ["gauge", "speedometer", "meter", "kpi", "dashboard", "score"],
+  hold: 1600,
+  presets: [
+    { name: "Speed", values: { value: 88, max: 160, unit: " km/h", label: "Speed", warn: 70, danger: 85 } },
+    { name: "Dark", values: { ink: [0.94, 0.95, 0.97], needleColor: [0.94, 0.95, 0.97], hub: [0.06, 0.07, 0.1] } }
+  ],
+  derived: (v) => {
+    const max = Math.max(1e-3, Number(v.max) || 100);
+    const value = Math.min(max, Math.max(0, Number(v.value) || 0));
+    const f = value / max;
+    const warn = Math.min(1, Math.max(0, Number(v.warn) / 100));
+    const danger = Math.min(1, Math.max(warn, Number(v.danger) / 100));
+    const dec = decimalsOf([value]);
+    const unit = formatSafe(v.unit);
+    const reading = fit7(`${formatCount(value, { decimals: dec })}${unit}`, 150, 26);
+    const label = fitLabel(v.label, 150, 10, 8);
+    const ends = [0, max].map((x) => fit7(formatCount(x, { decimals: decimalsOf([x]) }), 30, 10).size);
+    return {
+      band0: gaugeArc(0, warn),
+      band1: gaugeArc(warn, danger),
+      band2: gaugeArc(danger, 1),
+      over: needle(r114(180 * Math.min(1, f + 0.06))),
+      angle: needle(r114(180 * f)),
+      reading: +value.toFixed(dec),
+      dec,
+      unit,
+      readingSize: reading.size,
+      labelText: label.text,
+      labelSize: label.size,
+      labelLength: label.length,
+      maxText: formatCount(max, { decimals: decimalsOf([max]) }),
+      maxSize: ends[1]
+    };
+  },
+  motion: {
+    svg: `<svg viewBox="0 0 240 170" font-family="${SANS12}"><!-- {{value: float min=0 max=10000 default=72 step=1 label='Value'}} {{max: float min=1 max=10000 default=100 step=1 label='Scale maximum'}} {{unit: text default='%' label='Unit'}} {{label: text default='Performance' label='Label'}} {{warn: float min=0 max=100 default=60 step=1 label='Amber from (% of scale)'}} {{danger: float min=0 max=100 default=85 step=1 label='Red from (% of scale)'}} {{low: color default=#22C55E label='Low band'}} {{mid: color default=#F59E0B label='Middle band'}} {{high: color default=#EF4444 label='High band'}} {{needleColor: color default=#0F172A label='Needle'}} {{hub: color default=#FFFFFF label='Hub centre'}} {{ink: color default=#1E293B label='Text'}} --><path id="gaugeBand0" d="{{band0}}" fill="none" stroke="{{low}}" stroke-width="${GAUGE.band}"/><path id="gaugeBand1" d="{{band1}}" fill="none" stroke="{{mid}}" stroke-width="${GAUGE.band}"/><path id="gaugeBand2" d="{{band2}}" fill="none" stroke="{{high}}" stroke-width="${GAUGE.band}"/><g stroke="{{ink}}" stroke-opacity="0.35" stroke-linecap="round">${Array.from({ length: 11 }, (_, k) => `<path d="M${gaugeAt(k / 10, 70)} L${gaugeAt(k / 10, k % 5 ? 65 : 61)}" stroke-width="${k % 5 ? 1.5 : 2.5}"/>`).join("")}</g><text x="${GAUGE.cx - GAUGE.r}" y="130" text-anchor="middle" font-size="10" fill="{{ink}}" fill-opacity="0.6">0</text><text x="${GAUGE.cx + GAUGE.r}" y="130" text-anchor="middle" font-size="{{maxSize}}" fill="{{ink}}" fill-opacity="0.6">{{maxText}}</text><g id="gaugeNeedle" transform="${needle(0)}"><path d="M${GAUGE.cx} ${GAUGE.cy - 4} L${GAUGE.cx - GAUGE.r + 12} ${GAUGE.cy} L${GAUGE.cx} ${GAUGE.cy + 4}Z" fill="{{needleColor}}"/></g><circle cx="${GAUGE.cx}" cy="${GAUGE.cy}" r="8" fill="{{needleColor}}"/><circle cx="${GAUGE.cx}" cy="${GAUGE.cy}" r="3" fill="{{hub}}"/><text id="gaugeValue" x="${GAUGE.cx}" y="148" text-anchor="middle" font-size="{{readingSize}}" font-weight="800" fill="{{ink}}">0</text><text x="${GAUGE.cx}" y="164" text-anchor="middle" font-size="{{labelSize}}" textLength="{{labelLength}}" lengthAdjust="spacingAndGlyphs" fill="{{ink}}" fill-opacity="0.6">{{labelText}}</text></svg>`,
+    animate: [
+      ...[0, 1, 2].map((k) => ({ id: `gaugeBand${k}`, draw: true, delay: k * 140, ms: 320, ease: k === 0 ? "out" : "linear" })),
+      { id: "gaugeNeedle", attrs: { transform: [needle(0), "{{over}}"] }, delay: 300, ms: 900, ease: "out" },
+      { id: "gaugeNeedle", attrs: { transform: ["{{over}}", "{{angle}}"] }, delay: 1200, ms: 450, ease: "in-out" },
+      { id: "gaugeValue", count: [0, n15("reading")], decimals: n15("dec"), format: "{n}{{unit}}", delay: 300, ms: 1300, ease: "out" }
+    ]
+  }
+};
+var RACE_ROWS = 6;
+var RACE_STATES = 5;
+var RACE = { left: 74, top: 12, pitch: 28, height: 22, width: 320, value: 10, intro: 900, move: 1e3, rest: 700 };
+var RACE_DEFAULT = [
+  { name: "Lumen", values: [12, 28, 41, 66] },
+  { name: "Pixel", values: [30, 36, 48, 54] },
+  { name: "Vertex", values: [22, 40, 39, 71] },
+  { name: "Shader", values: [8, 20, 52, 60] },
+  { name: "Raster", values: [18, 24, 30, 35] },
+  { name: "Vector", values: [26, 30, 44, 49] }
+];
+var raceTime = (k) => RACE.intro + RACE.rest + (k - 1) * (RACE.move + RACE.rest);
+var barRace = {
+  kind: "vector",
+  id: "bar-race",
+  name: "Bar race",
+  description: "A bar chart race: bars stretch and overtake each other, swapping places as the period label ticks through the years.",
+  category: "data",
+  tags: ["chart", "race", "ranking", "bars", "timeline", "explainer"],
+  hold: 1800,
+  presets: [
+    ...PALETTE_PRESETS,
+    { name: "Browsers", values: { rows: "Chrome:20,45,62,65;Firefox:28,30,22,8;Safari:5,8,15,19;Edge:0,2,4,5;Opera:3,2,2,2", periods: "2009,2012,2016,2020" } }
+  ],
+  derived: (v) => {
+    const rows = parseRace(v.rows, RACE_ROWS, RACE_STATES, RACE_DEFAULT);
+    const states = Math.max(1, rows[0].values.length);
+    const all = rows.flatMap((r) => r.values);
+    const dec = decimalsOf(all);
+    const valueWidth = Math.max(...all.map((x) => textWidthEm(formatCount(x, { decimals: dec })))) * RACE.value;
+    const barWidth = Math.max(40, RACE.width - RACE.left - 10 - valueWidth);
+    const periods = parseLabels(v.periods, RACE_STATES);
+    const end = states > 1 ? raceTime(states - 1) + RACE.move : RACE.intro;
+    const out = { dec };
+    const ranks = Array.from({ length: RACE_STATES }, (_, k) => {
+      const s = Math.min(k, states - 1);
+      const order = rows.map((r, i) => [i, r.values[s]]).sort((a, b) => b[1] - a[1] || a[0] - b[0]);
+      const rank = new Map(order.map(([i], place) => [i, place]));
+      const top = Math.max(1e-9, order[0][1]);
+      return { s, rank, top };
+    });
+    for (let i = 0; i < RACE_ROWS; i++) {
+      const row = rows[i];
+      const name = fitLabel(row?.name ?? "", RACE.left - 12, 11, 8);
+      out[`show${i}`] = row ? "inline" : "none";
+      out[`nm${i}`] = name.text;
+      out[`ns${i}`] = name.size;
+      out[`nl${i}`] = name.length;
+      out[`in${i}`] = i * 70;
+      for (let k = 0; k < RACE_STATES; k++) {
+        const { s, rank, top } = ranks[k];
+        const value = row ? row.values[s] : 0;
+        const w = r114(value / top * barWidth);
+        out[`y${i}_${k}`] = RACE.top + (rank.get(i) ?? i) * RACE.pitch;
+        out[`w${i}_${k}`] = w;
+        out[`x${i}_${k}`] = r114(RACE.left + w + 5);
+        out[`v${i}_${k}`] = value;
+      }
+    }
+    for (let k = 1; k < RACE_STATES; k++) {
+      out[`t${k}`] = k < states ? raceTime(k) : end;
+      out[`m${k}`] = k < states ? RACE.move : 0;
+      out[`tick${k}`] = k < states ? raceTime(k) + RACE.move / 2 : end;
+      out[`solo${k}`] = Math.min(k, states - 1);
+    }
+    for (let k = 0; k < RACE_STATES; k++) {
+      const p = fit7(periods[k] ?? "", 120, 30);
+      out[`p${k}`] = periods[k] ?? "";
+      out[`ps${k}`] = p.size;
+    }
+    return out;
+  },
+  motion: {
+    svg: `<svg viewBox="0 0 ${RACE.width} 210" font-family="${SANS12}"><!-- {{rows: text default='Lumen:12,28,41,66;Pixel:30,36,48,54;Vertex:22,40,39,71;Shader:8,20,52,60;Raster:18,24,30,35;Vector:26,30,44,49' label='Rows (Name:v1,v2,\u2026; \u2026)'}} {{periods: text default='2021,2022,2023,2024' label='Periods (comma-separated)'}} {{ink: color default=#1E293B label='Text'}} ${palette()} --><g id="barRacePeriod" font-weight="800" fill="{{ink}}" fill-opacity="0.22" text-anchor="end">${Array.from(
+      { length: RACE_STATES },
+      (_, k) => `<text x="${RACE.width - 8}" y="202" font-size="{{ps${k}}}"${k ? ` display="none"` : ""}>{{p${k}}}</text>`
+    ).join("")}</g>${Array.from(
+      { length: RACE_ROWS },
+      (_, i) => `<g id="barRaceRow${i}" display="{{show${i}}}" opacity="0" transform="translate(0 {{y${i}_0}})"><text x="${RACE.left - 6}" y="15" text-anchor="end" font-size="{{ns${i}}}" textLength="{{nl${i}}}" lengthAdjust="spacingAndGlyphs" font-weight="600" fill="{{ink}}">{{nm${i}}}</text><rect id="barRaceBar${i}" x="${RACE.left}" y="0" width="0" height="${RACE.height}" rx="4" fill="{{c${i + 1}}}"/><text id="barRaceValue${i}" x="${RACE.left + 5}" y="15" font-size="${RACE.value}" font-weight="700" fill="{{ink}}">0</text></g>`
+    ).join("")}</svg>`,
+    animate: [
+      { id: "barRacePeriod", solo: 0 },
+      ...Array.from({ length: RACE_STATES - 1 }, (_, j) => ({ id: "barRacePeriod", solo: n15(`solo${j + 1}`), delay: n15(`tick${j + 1}`) })),
+      ...Array.from({ length: RACE_ROWS }, (_, i) => [
+        { id: `barRaceRow${i}`, attrs: { opacity: [0, 1] }, delay: n15(`in${i}`), ms: 300 },
+        { id: `barRaceBar${i}`, attrs: { width: [0, n15(`w${i}_0`)] }, delay: n15(`in${i}`), ms: 800, ease: "out" },
+        { id: `barRaceValue${i}`, attrs: { x: [RACE.left + 5, n15(`x${i}_0`)] }, count: [0, n15(`v${i}_0`)], decimals: n15("dec"), delay: n15(`in${i}`), ms: 800, ease: "out" },
+        ...Array.from({ length: RACE_STATES - 1 }, (_2, j) => {
+          const [a, b] = [j, j + 1];
+          const at4 = { delay: n15(`t${b}`), ms: n15(`m${b}`), ease: "in-out" };
+          return [
+            { id: `barRaceRow${i}`, attrs: { transform: [`translate(0 {{y${i}_${a}}})`, `translate(0 {{y${i}_${b}}})`] }, ...at4 },
+            { id: `barRaceBar${i}`, attrs: { width: [n15(`w${i}_${a}`), n15(`w${i}_${b}`)] }, ...at4 },
+            { id: `barRaceValue${i}`, attrs: { x: [n15(`x${i}_${a}`), n15(`x${i}_${b}`)] }, count: [n15(`v${i}_${a}`), n15(`v${i}_${b}`)], decimals: n15("dec"), ...at4 }
+          ];
+        }).flat()
+      ]).flat()
+    ]
+  }
+};
+var SPARK_DEFAULT = [4, 6, 5, 8, 7, 10, 9, 13];
+var SPARK_DRAW = 1200;
+function linePath(values, x0, x1, top, bottom) {
+  const lo = Math.min(...values);
+  const hi = Math.max(...values);
+  const span = hi - lo || 1;
+  const pts = values.map((v, j) => [r114(x0 + j * (x1 - x0) / (values.length - 1)), r114(hi === lo ? (top + bottom) / 2 : bottom - (v - lo) / span * (bottom - top))]);
+  const line = pts.map(([x, y], j) => `${j ? "L" : "M"}${x} ${y}`).join(" ");
+  return { line, area: `${line} L${pts.at(-1)[0]} ${bottom + 3} L${pts[0][0]} ${bottom + 3}Z`, end: pts.at(-1) };
+}
+function series(text, max, fallback) {
+  const values = parseNumberList(text, max).filter((x) => Number.isFinite(x));
+  return values.length >= 2 ? values : values.length === 1 ? [values[0], values[0]] : fallback;
+}
+var sparkline = {
+  kind: "vector",
+  id: "sparkline",
+  name: "Sparkline",
+  description: "A tiny trend line drawing in with a dot riding its tip, which then pulses beside the latest value; small enough to sit in a line of text.",
+  category: "data",
+  tags: ["chart", "sparkline", "trend", "inline", "kpi", "dashboard"],
+  hold: 600,
+  presets: [
+    { name: "Falling", values: { values: "14,13,11,12,9,8,9,6", accent: [0.86, 0.15, 0.15] } },
+    { name: "Violet", values: { accent: [0.55, 0.36, 0.96] } }
+  ],
+  derived: (v) => {
+    const values = series(v.values, 32, SPARK_DEFAULT);
+    const dec = decimalsOf(values);
+    const e = Math.max(0.6, textWidthEm(formatCount(values.at(-1), { decimals: dec })));
+    const size = r114(Math.min(13, 44 / e));
+    const right = r114(120 - 3 - e * size - 6);
+    const { line, area } = linePath(values, 4, right, 6, 26);
+    return { line, area, size, valueX: r114(right + 6), first: values[0], last: values.at(-1), dec };
+  },
+  motion: {
+    svg: `<svg viewBox="0 0 120 32" font-family="${SANS12}"><!-- {{values: text default='4,6,5,8,7,10,9,13' label='Values (comma-separated)'}} {{accent: color default=#10B981 label='Line'}} {{ink: color default=#1E293B label='Value'}} --><defs><linearGradient id="sparklineFill" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="{{accent}}" stop-opacity="0.3"/><stop offset="1" stop-color="{{accent}}" stop-opacity="0"/></linearGradient></defs><path id="sparklineArea" d="{{area}}" fill="url(#sparklineFill)" opacity="0"/><path id="sparklineLine" d="{{line}}" fill="none" stroke="{{accent}}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><g id="sparklineDot"><circle id="sparklinePulse" r="2.6" fill="none" stroke="{{accent}}" stroke-width="1.5" opacity="0"/><circle r="2.8" fill="{{accent}}"/></g><text id="sparklineValue" x="{{valueX}}" y="20.5" font-size="{{size}}" font-weight="700" fill="{{ink}}">0</text></svg>`,
+    animate: [
+      { id: "sparklineLine", draw: true, ms: SPARK_DRAW, ease: "in-out" },
+      { id: "sparklineDot", along: "sparklineLine", ms: SPARK_DRAW, ease: "in-out" },
+      { id: "sparklineArea", attrs: { opacity: [0, 1] }, delay: 700, ms: 600 },
+      { id: "sparklineValue", count: [n15("first"), n15("last")], decimals: n15("dec"), ms: SPARK_DRAW, ease: "in-out" },
+      ...[0, 1, 2].map((k) => ({ id: "sparklinePulse", attrs: { r: [2.6, 9], opacity: [0.8, 0] }, delay: SPARK_DRAW + 50 + k * 750, ms: 700, ease: "out" }))
+    ]
+  }
+};
+var BOARD = { rows: 6, top: 8, pitch: 34, height: 30, left: 8, width: 244, slide: 130 };
+var leaderboard = {
+  kind: "vector",
+  id: "leaderboard",
+  name: "Leaderboard",
+  description: "Ranked rows sliding into place from the bottom up, each with an initials avatar and a score counting up, then a highlight on the winner.",
+  category: "data",
+  tags: ["leaderboard", "ranking", "scores", "game", "dashboard", "competition"],
+  hold: 1800,
+  presets: [
+    { name: "Dark", values: { card: [0.12, 0.14, 0.19], ink: [0.94, 0.95, 0.97] } },
+    { name: "Sales", values: { names: "North team,South team,East team,West team", scores: "128400,119250,98100,87600", accent: [0.13, 0.77, 0.37] } }
+  ],
+  derived: (v) => {
+    const names = parseLabels(v.names, BOARD.rows);
+    const scores = parseNumberList(v.scores, BOARD.rows).map((x) => Number.isFinite(x) ? x : 0);
+    const count = Math.min(BOARD.rows, Math.max(1, names.filter((s) => s !== "").length, scores.length));
+    const rows = Array.from({ length: count }, (_, i) => ({ name: names[i] || `Player ${i + 1}`, score: scores[i] ?? 0 }));
+    const order = rows.map((r, i) => [i, r.score]).sort((a, b) => b[1] - a[1] || a[0] - b[0]);
+    const rank = new Map(order.map(([i], place) => [i, place]));
+    const dec = decimalsOf(rows.map((r) => r.score));
+    const crown = (count - 1) * BOARD.slide + 450;
+    const out = { dec, crown, settle: crown + 200 };
+    for (let i = 0; i < BOARD.rows; i++) {
+      const row = rows[i];
+      const place = rank.get(i) ?? i;
+      const wait = Math.max(0, count - 1 - place) * BOARD.slide;
+      const scoreWidth = textWidthEm(formatCount(row?.score ?? 0, { decimals: dec })) * 12;
+      const name = fitLabel(row?.name ?? "", Math.max(20, BOARD.left + BOARD.width - 12 - scoreWidth - 8 - 72), 12, 9);
+      const initials = (row?.name ?? "").split(/\s+/).filter(Boolean).slice(0, 2).map((w) => Array.from(w)[0]).join("").toUpperCase() || "?";
+      out[`show${i}`] = row ? "inline" : "none";
+      out[`y${i}`] = BOARD.top + place * BOARD.pitch;
+      out[`at${i}`] = wait;
+      out[`land${i}`] = wait + 300;
+      out[`rank${i}`] = place + 1;
+      out[`nm${i}`] = name.text;
+      out[`ns${i}`] = name.size;
+      out[`nl${i}`] = name.length;
+      out[`ini${i}`] = initials;
+      out[`is${i}`] = r114(Math.min(10, 15 / Math.max(0.6, textWidthEm(initials))));
+      out[`sc${i}`] = row?.score ?? 0;
+    }
+    return out;
+  },
+  motion: {
+    svg: `<svg viewBox="0 0 260 214" font-family="${SANS12}"><!-- {{names: text default='Ava Stone,Ben Ito,Cleo Park,Dev Shah,Eli Moss' label='Names (comma-separated)'}} {{scores: text default='870,980,640,820,510' label='Scores (comma-separated)'}} {{card: color default=#F1F5F9 label='Rows'}} {{ink: color default=#0F172A label='Text'}} {{accent: color default=#F59E0B label='Winner highlight'}} ${palette()} -->${Array.from(
+      { length: BOARD.rows },
+      (_, i) => `<g id="leaderboardRow${i}" display="{{show${i}}}" opacity="0" transform="translate(280 {{y${i}}})"><rect x="${BOARD.left}" y="0" width="${BOARD.width}" height="${BOARD.height}" rx="8" fill="{{card}}"/><text x="26" y="19.5" text-anchor="middle" font-size="12" font-weight="700" fill="{{ink}}" fill-opacity="0.55">{{rank${i}}}</text><circle cx="52" cy="15" r="11" fill="{{c${i + 1}}}"/><text x="52" y="18.5" text-anchor="middle" font-size="{{is${i}}}" font-weight="700" fill="#FFFFFF">{{ini${i}}}</text><text x="70" y="19.5" font-size="{{ns${i}}}" textLength="{{nl${i}}}" lengthAdjust="spacingAndGlyphs" font-weight="600" fill="{{ink}}">{{nm${i}}}</text><text id="leaderboardScore${i}" x="${BOARD.left + BOARD.width - 12}" y="19.5" text-anchor="end" font-size="12" font-weight="700" fill="{{ink}}">0</text></g>`
+    ).join(
+      ""
+    )}<rect id="leaderboardRing" x="${BOARD.left}" y="${BOARD.top}" width="${BOARD.width}" height="${BOARD.height}" rx="8" fill="none" stroke="{{accent}}" stroke-width="2" opacity="0"/><rect id="leaderboardTop" x="${BOARD.left}" y="${BOARD.top}" width="${BOARD.width}" height="${BOARD.height}" rx="8" fill="{{accent}}" fill-opacity="0.12" stroke="{{accent}}" stroke-width="2" opacity="0"/><g id="leaderboardBadge" transform="translate(26 23) scale(0)"><circle r="10" fill="{{accent}}"/><path d="M-5 -3.5 L-2.5 -0.5 L0 -5 L2.5 -0.5 L5 -3.5 L4 3.5 H-4Z" fill="#FFFFFF"/></g></svg>`,
+    animate: [
+      ...Array.from({ length: BOARD.rows }, (_, i) => [
+        { id: `leaderboardRow${i}`, attrs: { transform: [`translate(280 {{y${i}}})`, `translate(0 {{y${i}}})`] }, delay: n15(`at${i}`), ms: 450, ease: "out" },
+        { id: `leaderboardRow${i}`, attrs: { opacity: [0, 1] }, delay: n15(`at${i}`), ms: 200 },
+        { id: `leaderboardScore${i}`, count: [0, n15(`sc${i}`)], decimals: n15("dec"), delay: n15(`land${i}`), ms: 800, ease: "out" }
+      ]).flat(),
+      { id: "leaderboardTop", attrs: { opacity: [0, 1] }, delay: n15("crown"), ms: 250 },
+      { id: "leaderboardRing", attrs: { opacity: [0, 0.9] }, delay: n15("crown"), ms: 0 },
+      { id: "leaderboardRing", attrs: { x: [BOARD.left, BOARD.left - 5], y: [BOARD.top, BOARD.top - 5], width: [BOARD.width, BOARD.width + 10], height: [BOARD.height, BOARD.height + 10], opacity: [0.9, 0] }, delay: n15("crown"), ms: 650, ease: "out" },
+      { id: "leaderboardBadge", attrs: { transform: ["translate(26 23) scale(0)", "translate(26 23) scale(1.25)"] }, delay: n15("crown"), ms: 200, ease: "out" },
+      { id: "leaderboardBadge", attrs: { transform: ["translate(26 23) scale(1.25)", "translate(26 23) scale(1)"] }, delay: n15("settle"), ms: 200, ease: "in-out" }
+    ]
+  }
+};
+var AREA = { series: 4, points: 12, x0: 34, x1: 268, top: 40, base: 150, sweep: 2400, rise: 1100 };
+var AREA_DEFAULT = [
+  [12, 18, 15, 24, 28, 34],
+  [8, 10, 14, 12, 18, 22],
+  [5, 6, 9, 8, 11, 14]
+];
+var areaChart = {
+  kind: "vector",
+  id: "area-chart",
+  name: "Area chart",
+  description: "A stacked area chart whose layers rise together from the baseline, then a tooltip line glides across reading the total.",
+  category: "data",
+  tags: ["chart", "area", "stacked", "trend", "dashboard", "report"],
+  hold: 1400,
+  presets: [...PALETTE_PRESETS.map((p) => ({ ...p, values: Object.fromEntries(Object.entries(p.values).slice(0, AREA.series)) })), { name: "Two series", values: { series: "5,9,7,12,15,14,18,22;3,4,6,5,8,9,8,11", labels: "Paid,Organic", points: "W1,W2,W3,W4,W5,W6,W7,W8" } }],
+  derived: (v) => {
+    const rows = parseSeries(v.series, AREA.series, AREA.points, AREA_DEFAULT);
+    const points = rows[0].length;
+    const cum = rows.map((_, s) => Array.from({ length: points }, (_2, j) => rows.slice(0, s + 1).reduce((a, r) => a + r[j], 0)));
+    const top = Math.max(1e-9, ...cum.at(-1));
+    const x = (j) => r114(AREA.x0 + j * (AREA.x1 - AREA.x0) / (points - 1));
+    const y = (value) => r114(AREA.base - value / top * (AREA.base - AREA.top));
+    const edge = (values, back) => {
+      const pts = values.map((val, j) => `${x(j)} ${y(val)}`);
+      return (back ? pts.reverse() : pts).join(" L");
+    };
+    const zero = new Array(points).fill(0);
+    const labels = parseLabels(v.labels, AREA.series);
+    const xLabels = parseLabels(v.points, AREA.points);
+    const dec = decimalsOf(rows.flat());
+    const totals = cum.at(-1);
+    const spacing = (AREA.x1 - AREA.x0) / (points - 1);
+    const seg = AREA.sweep / (points - 1);
+    const tip = AREA.rise + 200;
+    const end = tip + AREA.sweep;
+    const tipSize = r114(Math.min(9, 34 / Math.max(0.6, ...totals.map((t) => textWidthEm(formatCount(t, { decimals: dec }))))));
+    const out = { dec, tip, tipSize, tx0: x(0), total0: +totals[0].toFixed(dec) };
+    for (let s = 0; s < AREA.series; s++) {
+      const shown = s < rows.length;
+      const below = s > 0 && shown ? cum[s - 1] : zero;
+      const above = shown ? cum[s] : zero;
+      out[`show${s}`] = shown ? "inline" : "none";
+      out[`flat${s}`] = `M${edge(zero, false)} L${edge(zero, true)}Z`;
+      out[`full${s}`] = `M${edge(above, false)} L${edge(below, true)}Z`;
+      const lab = fitLabel(labels[s] ?? "", 50, 9, 7.5);
+      out[`lab${s}`] = lab.text;
+      out[`labs${s}`] = lab.size;
+      out[`labl${s}`] = lab.length;
+      out[`dy${s}_0`] = y(above[0]);
+    }
+    for (let j = 0; j < AREA.points; j++) {
+      const shown = j < points;
+      const label = fitLabel(xLabels[j] ?? "", spacing * 0.9, 9, 7);
+      out[`xs${j}`] = shown ? "inline" : "none";
+      out[`xx${j}`] = shown ? x(j) : AREA.x1;
+      out[`xl${j}`] = label.text;
+      out[`xz${j}`] = label.size;
+    }
+    for (let j = 0; j < AREA.points - 1; j++) {
+      const real = j < points - 1;
+      const [a, b] = real ? [j, j + 1] : [points - 1, points - 1];
+      out[`sd${j}`] = real ? Math.round(tip + j * seg) : end;
+      out[`sm${j}`] = real ? Math.round(seg) : 0;
+      out[`ta${j}`] = x(a);
+      out[`tb${j}`] = x(b);
+      out[`va${j}`] = +totals[a].toFixed(dec);
+      out[`vb${j}`] = +totals[b].toFixed(dec);
+      for (let s = 0; s < AREA.series; s++) {
+        const c = s < rows.length ? cum[s] : zero;
+        out[`ya${s}_${j}`] = y(c[a]);
+        out[`yb${s}_${j}`] = y(c[b]);
+      }
+    }
+    return out;
+  },
+  motion: {
+    svg: `<svg viewBox="0 0 300 176" font-family="${SANS12}"><!-- {{series: text default='12,18,15,24,28,34;8,10,14,12,18,22;5,6,9,8,11,14' label='Series (values, rows split by ;)'}} {{labels: text default='Web,Mobile,API' label='Series labels (comma-separated)'}} {{points: text default='Jan,Feb,Mar,Apr,May,Jun' label='Point labels (comma-separated)'}} {{ink: color default=#1E293B label='Text'}} {{grid: color default=#E2E8F0 label='Grid'}} ${palette(AREA.series)} --><g stroke="{{grid}}" stroke-width="1">${[0, 1, 2, 3].map((k) => `<line x1="${AREA.x0}" x2="${AREA.x1}" y1="${AREA.top + k * (AREA.base - AREA.top) / 3}" y2="${AREA.top + k * (AREA.base - AREA.top) / 3}"/>`).join("")}</g>${Array.from(
+      { length: AREA.series },
+      (_, s) => `<path id="areaChartArea${s}" display="{{show${s}}}" d="{{flat${s}}}" fill="{{c${s + 1}}}" fill-opacity="0.78" stroke="{{c${s + 1}}}" stroke-width="1.5" stroke-linejoin="round"/>`
+    ).join("")}${Array.from(
+      { length: AREA.series },
+      (_, s) => `<g display="{{show${s}}}" transform="translate(${AREA.x0 + s * 64} 0)"><rect x="0" y="5" width="8" height="8" rx="2" fill="{{c${s + 1}}}"/><text x="12" y="12.5" font-size="{{labs${s}}}" textLength="{{labl${s}}}" lengthAdjust="spacingAndGlyphs" fill="{{ink}}">{{lab${s}}}</text></g>`
+    ).join("")}<g font-size="9" fill="{{ink}}" fill-opacity="0.6" text-anchor="middle">${Array.from(
+      { length: AREA.points },
+      (_, j) => `<text display="{{xs${j}}}" x="{{xx${j}}}" y="166" font-size="{{xz${j}}}">{{xl${j}}}</text>`
+    ).join("")}</g><g id="areaChartTip" opacity="0" transform="translate({{tx0}} 0)"><line x1="0" x2="0" y1="34" y2="${AREA.base}" stroke="{{ink}}" stroke-opacity="0.5" stroke-width="1.2" stroke-dasharray="3 2"/><rect x="-20" y="18" width="40" height="16" rx="4" fill="{{ink}}"/><text id="areaChartTipValue" x="0" y="29" text-anchor="middle" font-size="{{tipSize}}" font-weight="700" fill="#FFFFFF">0</text>${Array.from(
+      { length: AREA.series },
+      (_, s) => `<circle id="areaChartDot${s}" display="{{show${s}}}" cx="0" cy="{{dy${s}_0}}" r="3" fill="#FFFFFF" stroke="{{c${s + 1}}}" stroke-width="2"/>`
+    ).join("")}</g></svg>`,
+    animate: [
+      ...Array.from({ length: AREA.series }, (_, s) => ({ id: `areaChartArea${s}`, attrs: { d: [`{{flat${s}}}`, `{{full${s}}}`] }, ms: AREA.rise, ease: "out" })),
+      { id: "areaChartTip", attrs: { opacity: [0, 1] }, delay: n15("tip"), ms: 200 },
+      { id: "areaChartTipValue", count: [n15("total0"), n15("total0")], decimals: n15("dec"), delay: n15("tip"), ms: 0 },
+      ...Array.from({ length: AREA.points - 1 }, (_, j) => {
+        const at4 = { delay: n15(`sd${j}`), ms: n15(`sm${j}`), ease: "linear" };
+        return [
+          { id: "areaChartTip", attrs: { transform: [`translate({{ta${j}}} 0)`, `translate({{tb${j}}} 0)`] }, ...at4 },
+          { id: "areaChartTipValue", count: [n15(`va${j}`), n15(`vb${j}`)], decimals: n15("dec"), ...at4 },
+          ...Array.from({ length: AREA.series }, (_2, s) => ({ id: `areaChartDot${s}`, attrs: { cy: [n15(`ya${s}_${j}`), n15(`yb${s}_${j}`)] }, ...at4 }))
+        ];
+      }).flat()
+    ]
+  }
+};
+var KPI_DEFAULT = [3, 4, 3.5, 5, 4.8, 6, 7.2];
+var kpiTile = {
+  kind: "vector",
+  id: "kpi-tile",
+  name: "KPI tile",
+  description: "A dashboard tile: the headline figure counts up, a delta arrow shows the change in green or red by its sign, and a mini sparkline draws in.",
+  category: "data",
+  tags: ["kpi", "dashboard", "metric", "card", "sparkline", "report"],
+  hold: 1600,
+  presets: [
+    { name: "Dark", values: { card: [0.09, 0.11, 0.15], ink: [0.95, 0.96, 0.97] } },
+    { name: "Churn", values: { label: "Churn rate", value: 2.4, prefix: "", suffix: "%", delta: -0.6, trend: "3.4,3.3,3.1,3.0,2.8,2.6,2.4", caption: "vs last quarter" } }
+  ],
+  derived: (v) => {
+    const value = Number(v.value) || 0;
+    const dec = Math.min(3, Math.max(0, Math.round(Number(v.decimals) || 0)));
+    const pre = formatSafe(v.prefix);
+    const suf = formatSafe(v.suffix);
+    const big = fit7(`${pre}${formatCount(value, { decimals: dec })}${suf}`, 204, 34);
+    const delta = Number(v.delta) || 0;
+    const up = delta >= 0;
+    const trend = series(v.trend, 24, KPI_DEFAULT);
+    const { line, area, end } = linePath(trend, 148, 222, 90, 120);
+    const label = fitLabel(v.label, 204, 12, 10);
+    const caption = fitLabel(v.caption, 120, 10, 8);
+    return {
+      pre,
+      suf,
+      dec,
+      value: +value.toFixed(dec),
+      size: big.size,
+      delta: +Math.abs(delta).toFixed(1),
+      deltaFormat: up ? "+{n}%" : "\u2212{n}%",
+      deltaColor: paint(up ? v.up : v.down),
+      arrow: up ? "M24 92 L30 100 H18Z" : "M24 101 L30 93 H18Z",
+      line,
+      area,
+      endX: end[0],
+      endY: end[1],
+      labelText: label.text,
+      captionText: caption.text,
+      labelSize: label.size,
+      labelLength: label.length,
+      captionSize: caption.size,
+      captionLength: caption.length
+    };
+  },
+  motion: {
+    svg: `<svg viewBox="0 0 240 140" font-family="${SANS12}"><!-- {{label: text default='Monthly revenue' label='Label'}} {{value: float min=0 max=1000000 default=48.2 step=0.1 label='Value'}} {{decimals: int min=0 max=3 default=1 label='Decimals'}} {{prefix: text default='$' label='Prefix'}} {{suffix: text default='k' label='Suffix'}} {{delta: float min=-100 max=100 default=12.4 step=0.1 label='Change (%)'}} {{caption: text default='vs last month' label='Caption'}} {{trend: text default='3,4,3.5,5,4.8,6,7.2' label='Trend (comma-separated)'}} {{card: color default=#FFFFFF label='Card'}} {{ink: color default=#0F172A label='Text'}} {{accent: color default=#6366F1 label='Sparkline'}} {{up: color default=#16A34A label='Rise'}} {{down: color default=#DC2626 label='Fall'}} --><defs><linearGradient id="kpiTileFill" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="{{accent}}" stop-opacity="0.28"/><stop offset="1" stop-color="{{accent}}" stop-opacity="0"/></linearGradient></defs><rect x="2" y="2" width="236" height="136" rx="14" fill="{{card}}" stroke="{{ink}}" stroke-opacity="0.1"/><text x="18" y="30" font-size="{{labelSize}}" textLength="{{labelLength}}" lengthAdjust="spacingAndGlyphs" font-weight="600" fill="{{ink}}" fill-opacity="0.6">{{labelText}}</text><text id="kpiTileValue" x="18" y="72" font-size="{{size}}" font-weight="800" fill="{{ink}}">0</text><g id="kpiTileDelta" opacity="0"><path d="{{arrow}}" fill="{{deltaColor}}"/><text id="kpiTileDeltaValue" x="34" y="101" font-size="12" font-weight="700" fill="{{deltaColor}}">0%</text></g><text id="kpiTileCaption" x="18" y="124" font-size="{{captionSize}}" textLength="{{captionLength}}" lengthAdjust="spacingAndGlyphs" fill="{{ink}}" fill-opacity="0.55" opacity="0">{{captionText}}</text><path id="kpiTileArea" d="{{area}}" fill="url(#kpiTileFill)" opacity="0"/><path id="kpiTileLine" d="{{line}}" fill="none" stroke="{{accent}}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><circle id="kpiTileEnd" cx="{{endX}}" cy="{{endY}}" r="0" fill="{{accent}}"/></svg>`,
+    animate: [
+      { id: "kpiTileValue", count: [0, n15("value")], decimals: n15("dec"), format: "{{pre}}{n}{{suf}}", ms: 1400, ease: "out" },
+      { id: "kpiTileDelta", attrs: { opacity: [0, 1], transform: ["translate(0 6)", "translate(0 0)"] }, delay: 500, ms: 400, ease: "out" },
+      { id: "kpiTileDeltaValue", count: [0, n15("delta")], decimals: 1, format: "{{deltaFormat}}", delay: 500, ms: 900, ease: "out" },
+      { id: "kpiTileCaption", attrs: { opacity: [0, 1] }, delay: 800, ms: 400 },
+      { id: "kpiTileLine", draw: true, delay: 300, ms: 1100, ease: "in-out" },
+      { id: "kpiTileArea", attrs: { opacity: [0, 1] }, delay: 900, ms: 500 },
+      { id: "kpiTileEnd", attrs: { r: [0, 4.5] }, delay: 1400, ms: 180, ease: "out" },
+      { id: "kpiTileEnd", attrs: { r: [4.5, 3] }, delay: 1580, ms: 200, ease: "in-out" }
+    ]
+  }
+};
+var dataEffects = [donutChart, pieChart, gauge, barRace, sparkline, leaderboard, areaChart, kpiTile];
+
+// src/catalog/icons.ts
+var r115 = (v) => Math.round(v * 10) / 10;
+var r213 = (v) => Math.round(v * 100) / 100;
+var n16 = (name) => `{{${name}}}`;
+var SANS13 = `system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif`;
+var about6 = (cx, cy, s) => `translate(${cx} ${cy}) scale(${r213(s)}) translate(${-cx} ${-cy})`;
+function cycle(id, from, to, phase, period, ease = "linear") {
+  const at4 = (u) => Object.fromEntries(Object.keys(from).map((k) => [k, lerpAttr(from[k], to[k], u)]));
+  const mid = at4(phase);
+  const pairs = (a, b) => Object.fromEntries(Object.keys(from).map((k) => [k, [a[k], b[k]]]));
+  const first = Math.round((1 - phase) * period);
+  const out = [{ id, attrs: pairs(mid, to), ms: first, ease }];
+  if (phase > 0) out.push({ id, attrs: pairs(from, mid), delay: first, ms: period - first, ease });
+  return out;
+}
+var swing = (id, attr, a, b, period, delay = 0) => [
+  { id, attrs: { [attr]: [a, b] }, delay, ms: period / 2, ease: "in-out" },
+  { id, attrs: { [attr]: [b, a] }, delay: delay + period / 2, ms: period / 2, ease: "in-out" }
+];
+var picks = (name, count) => (v) => {
+  const pick = Math.min(count - 1, Math.max(0, Math.round(Number(v[name]) || 0)));
+  return Object.fromEntries(Array.from({ length: count }, (_, k) => [`show${k}`, k === pick ? "inline" : "none"]));
+};
+var WEATHER_MS = 2400;
+var CLOUD = "M-22 14 H22 A12 12 0 0 0 20 -9 A17 17 0 0 0 -12 -10 A12 12 0 0 0 -22 14Z";
+var DROP = "M0 -5 C2 -1 3 1 3 3 A3 3 0 0 1 -3 3 C-3 1 -2 -1 0 -5Z";
+var FLAKE = "M0 -4 V4 M-3.5 -2 L3.5 2 M-3.5 2 L3.5 -2";
+var sunRays = (cx, cy, from, to) => Array.from({ length: 8 }, (_, k) => {
+  const a = k * Math.PI / 4;
+  return `M${r115(cx + from * Math.cos(a))} ${r115(cy + from * Math.sin(a))} L${r115(cx + to * Math.cos(a))} ${r115(cy + to * Math.sin(a))}`;
+}).join(" ");
+var cloud2 = (id, x, y, s, fill, extra = "") => `<g id="${id}" transform="translate(${x} ${y}) scale(${s})"><path d="${CLOUD}" fill="${fill}"${extra}/></g>`;
+var falling = (prefix, shape, xs, top, bottom, spin = 0) => ({
+  markup: xs.map((x, i) => `<g id="${prefix}${i}" transform="translate(${x} ${top}) rotate(0)" opacity="1">${shape(i)}</g>`).join(""),
+  animate: xs.flatMap(
+    (x, i) => cycle(`${prefix}${i}`, { transform: `translate(${x} ${top}) rotate(0)`, opacity: 1 }, { transform: `translate(${x + spin / 30} ${bottom}) rotate(${spin})`, opacity: 0 }, (i * 0.37 + 0.15) % 1, WEATHER_MS)
+  )
+});
+var rain = falling("weatherIconsDrop", () => `<path d="${DROP}" fill="{{accent}}"/>`, [36, 50, 64, 43, 57], 50, 86);
+var storm = falling("weatherIconsStormDrop", () => `<path d="${DROP}" fill="{{accent}}"/>`, [34, 66], 50, 86);
+var snow = falling("weatherIconsFlake", () => `<path d="${FLAKE}" stroke="{{accent}}" stroke-width="1.8" stroke-linecap="round"/>`, [36, 50, 64, 43, 58], 50, 88, 120);
+var WIND = ["M14 38 H58 C68 38 70 26 62 24 C56 23 54 29 58 32", "M10 52 H76 C86 52 88 64 80 66 C74 67 72 61 76 58", "M20 66 H50"];
+var weatherIcons = {
+  kind: "vector",
+  id: "weather-icons",
+  name: "Weather icons",
+  description: "An animated weather icon: sun with turning rays, partly cloudy, drifting clouds, falling rain, a flashing thunderbolt, snow or gusting wind.",
+  category: "icon",
+  tags: ["weather", "forecast", "sun", "rain", "snow", "loop"],
+  hold: 0,
+  presets: [
+    { name: "Rain", values: { kind: 3 } },
+    { name: "Snow", values: { kind: 5, cloud: [0.8, 0.85, 0.92], accent: [0.55, 0.75, 0.95] } },
+    { name: "Thunder", values: { kind: 4, cloud: [0.39, 0.45, 0.55] } }
+  ],
+  derived: picks("kind", 7),
+  motion: {
+    svg: `<svg viewBox="0 0 100 100"><!-- {{kind: int min=0 max=6 default=0 label='Weather (sun, partly cloudy, cloudy, rain, thunder, snow, wind)'}} {{sun: color default=#FBBF24 label='Sun'}} {{cloud: color default=#94A3B8 label='Cloud'}} {{accent: color default=#38BDF8 label='Rain, snow and wind'}} {{bolt: color default=#FACC15 label='Lightning'}} --><g display="{{show0}}"><g id="weatherIconsRays" transform="rotate(0 50 50)"><path d="${sunRays(50, 50, 26, 36)}" stroke="{{sun}}" stroke-width="5" stroke-linecap="round"/></g><circle id="weatherIconsSun" cx="50" cy="50" r="17" fill="{{sun}}"/></g><g display="{{show1}}"><g id="weatherIconsPartRays" transform="rotate(0 38 38)"><path d="${sunRays(38, 38, 19, 27)}" stroke="{{sun}}" stroke-width="4" stroke-linecap="round"/></g><circle cx="38" cy="38" r="13" fill="{{sun}}"/>${cloud2("weatherIconsPartCloud", 56, 60, 1, "{{cloud}}")}</g><g display="{{show2}}">${cloud2("weatherIconsBackCloud", 62, 40, 0.75, "{{cloud}}", ` opacity="0.55"`)}${cloud2("weatherIconsFrontCloud", 46, 56, 1.05, "{{cloud}}")}</g><g display="{{show3}}">${rain.markup}${cloud2("weatherIconsRainCloud", 50, 38, 1.1, "{{cloud}}")}</g><g display="{{show4}}">${storm.markup}<g transform="translate(50 36) scale(1.1)"><path d="${CLOUD}" fill="{{cloud}}"/><path d="${CLOUD}" fill="#000000" opacity="0.22"/></g><path id="weatherIconsBolt" d="M54 50 L42 70 H51 L45 90 L63 64 H54 L60 50Z" fill="{{bolt}}" opacity="0"/></g><g display="{{show5}}">${snow.markup}${cloud2("weatherIconsSnowCloud", 50, 38, 1.1, "{{cloud}}")}</g><g display="{{show6}}" fill="none" stroke="{{accent}}" stroke-width="5" stroke-linecap="round">${WIND.map((d, k) => `<path id="weatherIconsWind${k}" d="${d}"/>`).join("")}</g></svg>`,
+    animate: [
+      ...cycle("weatherIconsRays", { transform: "rotate(0 50 50)" }, { transform: "rotate(45 50 50)" }, 0, WEATHER_MS),
+      ...swing("weatherIconsSun", "r", 17, 18.5, WEATHER_MS),
+      ...cycle("weatherIconsPartRays", { transform: "rotate(0 38 38)" }, { transform: "rotate(45 38 38)" }, 0, WEATHER_MS),
+      ...swing("weatherIconsPartCloud", "transform", "translate(54 60) scale(1)", "translate(60 60) scale(1)", WEATHER_MS),
+      ...swing("weatherIconsBackCloud", "transform", "translate(66 40) scale(0.75)", "translate(58 40) scale(0.75)", WEATHER_MS),
+      ...swing("weatherIconsFrontCloud", "transform", "translate(43 56) scale(1.05)", "translate(50 56) scale(1.05)", WEATHER_MS),
+      ...swing("weatherIconsRainCloud", "transform", "translate(49 38) scale(1.1)", "translate(51 38) scale(1.1)", WEATHER_MS),
+      ...swing("weatherIconsSnowCloud", "transform", "translate(49 38) scale(1.1)", "translate(51 38) scale(1.1)", WEATHER_MS),
+      ...rain.animate,
+      ...storm.animate,
+      ...snow.animate,
+      // Two quick flashes, then dark until the loop comes round.
+      { id: "weatherIconsBolt", attrs: { opacity: [0, 1] }, delay: 700, ms: 60 },
+      { id: "weatherIconsBolt", attrs: { opacity: [1, 0.2] }, delay: 760, ms: 90 },
+      { id: "weatherIconsBolt", attrs: { opacity: [0.2, 1] }, delay: 850, ms: 60 },
+      { id: "weatherIconsBolt", attrs: { opacity: [1, 0] }, delay: 1100, ms: 400 },
+      // Gusts draw on in turn and fade; undrawn again by the time the loop restarts.
+      ...WIND.flatMap((_, k) => [
+        { id: `weatherIconsWind${k}`, draw: true, delay: k * 220, ms: 900, ease: "in-out" },
+        { id: `weatherIconsWind${k}`, attrs: { opacity: [1, 0] }, delay: 1300 + k * 220, ms: 450 }
+      ])
+    ]
+  }
+};
+var BELL_PIVOT = "50 16";
+var bellTurn = (deg) => `rotate(${deg} ${BELL_PIVOT})`;
+var BELL_SWING = [0, 18, -15, 11, -7, 3, 0];
+var CLAPPER_SWING = [0, -12, 14, -9, 6, -2, 0];
+var BADGE = [72, 26];
+var notificationBell = {
+  kind: "vector",
+  id: "notification-bell",
+  name: "Notification bell",
+  description: "A bell ringing with a damped swing and its clapper lagging behind, as a badge pops on with the unread count.",
+  category: "icon",
+  tags: ["notification", "bell", "alert", "badge", "ui", "loop"],
+  hold: 300,
+  presets: [
+    { name: "Dark", values: { bell: [0.9, 0.91, 0.94], ring: [0.06, 0.07, 0.1] } },
+    { name: "Many", values: { count: 128 } }
+  ],
+  derived: (v) => {
+    const count = Math.max(0, Math.round(Number(v.count) || 0));
+    const many = count > 99;
+    const digits = many ? 3 : String(count).length;
+    return {
+      from: many ? 99 : Math.max(0, count - 1),
+      to: many ? 99 : count,
+      format: many ? "{n}+" : "{n}",
+      size: digits >= 3 ? 9 : digits === 2 ? 11 : 13,
+      badgeR: digits >= 3 ? 15 : 13
+    };
+  },
+  motion: {
+    svg: `<svg viewBox="0 0 100 100" font-family="${SANS13}"><!-- {{count: int min=0 max=999 default=3 label='Count'}} {{bell: color default=#334155 label='Bell'}} {{badge: color default=#EF4444 label='Badge'}} {{ring: color default=#FFFFFF label='Badge outline'}} --><g fill="none" stroke="{{bell}}" stroke-width="3.5" stroke-linecap="round"><path id="notificationBellWaveL" d="M20 30 C14 38 14 50 20 58" opacity="0"/><path id="notificationBellWaveR" d="M80 30 C86 38 86 50 80 58" opacity="0"/></g><g id="notificationBellClapper" transform="${bellTurn(0)}"><circle cx="50" cy="80" r="7" fill="{{bell}}"/></g><g id="notificationBellBody" transform="${bellTurn(0)}"><circle cx="50" cy="15" r="5" fill="{{bell}}"/><path d="M50 18 C36 18 30 30 30 44 V58 L23 68 V72 H77 V68 L70 58 V44 C70 30 64 18 50 18Z" fill="{{bell}}"/></g><g id="notificationBellBadge" transform="${about6(BADGE[0], BADGE[1], 0)}"><circle cx="${BADGE[0]}" cy="${BADGE[1]}" r="{{badgeR}}" fill="{{badge}}" stroke="{{ring}}" stroke-width="3"/><text id="notificationBellCount" x="${BADGE[0]}" y="${BADGE[1] + 4.5}" text-anchor="middle" font-size="{{size}}" font-weight="800" fill="#FFFFFF">0</text></g></svg>`,
+    animate: [
+      ...BELL_SWING.slice(1).map((deg, k) => ({ id: "notificationBellBody", attrs: { transform: [bellTurn(BELL_SWING[k]), bellTurn(deg)] }, delay: k * 120, ms: 120, ease: "in-out" })),
+      ...CLAPPER_SWING.slice(1).map((deg, k) => ({ id: "notificationBellClapper", attrs: { transform: [bellTurn(CLAPPER_SWING[k]), bellTurn(deg)] }, delay: 50 + k * 120, ms: 120, ease: "in-out" })),
+      ...["L", "R"].flatMap((side, k) => [
+        { id: `notificationBellWave${side}`, attrs: { opacity: [0, 1] }, delay: 80 + k * 120, ms: 120 },
+        { id: `notificationBellWave${side}`, attrs: { opacity: [1, 0] }, delay: 420 + k * 120, ms: 260 }
+      ]),
+      { id: "notificationBellBadge", attrs: { transform: [about6(BADGE[0], BADGE[1], 0), about6(BADGE[0], BADGE[1], 1.25)] }, delay: 300, ms: 180, ease: "out" },
+      { id: "notificationBellBadge", attrs: { transform: [about6(BADGE[0], BADGE[1], 1.25), about6(BADGE[0], BADGE[1], 1)] }, delay: 480, ms: 200, ease: "in-out" },
+      { id: "notificationBellCount", count: [n16("from"), n16("to")], format: "{{format}}", delay: 300, ms: 350, ease: "out" },
+      // The badge goes before the loop starts over, so it can pop on again.
+      { id: "notificationBellBadge", attrs: { transform: [about6(BADGE[0], BADGE[1], 1), about6(BADGE[0], BADGE[1], 0)] }, delay: 2400, ms: 220, ease: "in-out" }
+    ]
+  }
+};
+var ARROW_MS = 1200;
+var refreshArc = (() => {
+  const r = 26;
+  const end = -40 * Math.PI / 180;
+  const [ex, ey] = [50 + r * Math.cos(end), 50 + r * Math.sin(end)];
+  const [tx, ty] = [-Math.sin(end), Math.cos(end)];
+  const [nx, ny] = [Math.cos(end), Math.sin(end)];
+  const tip = `${r115(ex + tx * 7)} ${r115(ey + ty * 7)}`;
+  const head = `M${r115(ex + nx * 7)} ${r115(ey + ny * 7)} L${tip} L${r115(ex - nx * 7)} ${r115(ey - ny * 7)}Z`;
+  return { arc: `M24 50 A${r} ${r} 0 0 1 ${r115(ex)} ${r115(ey)}`, head };
+})();
+var animatedArrows = {
+  kind: "vector",
+  id: "animated-arrows",
+  name: "Animated arrows",
+  description: "An arrow icon set: an arrow nudging right, chevrons cascading down, refresh arrows turning, or an external-link arrow leaving its box.",
+  category: "icon",
+  tags: ["arrow", "chevron", "refresh", "link", "ui", "loop"],
+  // Every arrow's motion is over by 1000 ms: each rests the same before it repeats.
+  hold: ARROW_MS - 1e3,
+  presets: [
+    { name: "Scroll hint", values: { kind: 1, color: [0.39, 0.4, 0.95] } },
+    { name: "Refresh", values: { kind: 2 } }
+  ],
+  derived: picks("kind", 4),
+  motion: {
+    svg: `<svg viewBox="0 0 100 100"><!-- {{kind: int min=0 max=3 default=0 label='Arrow (right, chevrons, refresh, external)'}} {{color: color default=#0F172A label='Colour'}} {{width: float min=2 max=12 default=7 step=0.5 label='Stroke width'}} --><g fill="none" stroke="{{color}}" stroke-width="{{width}}" stroke-linecap="round" stroke-linejoin="round"><g display="{{show0}}"><g id="animatedArrowsRight" transform="translate(0 0)"><path d="M20 50 H76 M56 30 L76 50 L56 70"/></g></g><g display="{{show1}}">${[0, 1, 2].map((k) => `<path id="animatedArrowsChevron${k}" d="M32 ${24 + k * 18} L50 ${38 + k * 18} L68 ${24 + k * 18}" opacity="0.2"/>`).join("")}</g><g display="{{show2}}"><g id="animatedArrowsRefresh" transform="rotate(0 50 50)">${[0, 180].map((deg) => `<g transform="rotate(${deg} 50 50)"><path d="${refreshArc.arc}"/><path d="${refreshArc.head}" fill="{{color}}" stroke-width="2"/></g>`).join("")}</g></g><g display="{{show3}}"><path d="M54 22 H32 C26 22 22 26 22 32 V68 C22 74 26 78 32 78 H68 C74 78 78 74 78 68 V46"/><g id="animatedArrowsExternal" transform="translate(0 0)"><path d="M46 54 L76 24 M56 24 H76 V44"/></g></g></g></svg>`,
+    animate: [
+      { id: "animatedArrowsRight", attrs: { transform: ["translate(0 0)", "translate(9 0)"] }, ms: 380, ease: "out" },
+      { id: "animatedArrowsRight", attrs: { transform: ["translate(9 0)", "translate(0 0)"] }, delay: 380, ms: 520, ease: "in-out" },
+      ...[0, 1, 2].flatMap((k) => [
+        { id: `animatedArrowsChevron${k}`, attrs: { opacity: [0.2, 1], transform: ["translate(0 0)", "translate(0 3)"] }, delay: k * 180, ms: 260, ease: "out" },
+        { id: `animatedArrowsChevron${k}`, attrs: { opacity: [1, 0.2], transform: ["translate(0 3)", "translate(0 0)"] }, delay: k * 180 + 300, ms: 420, ease: "in-out" }
+      ]),
+      // Two arrows round the circle: half a turn brings it back to how it started.
+      { id: "animatedArrowsRefresh", attrs: { transform: ["rotate(0 50 50)", "rotate(180 50 50)"] }, ms: 1e3, ease: "in-out" },
+      { id: "animatedArrowsExternal", attrs: { transform: ["translate(0 0)", "translate(10 -10)"], opacity: [1, 0] }, delay: 100, ms: 360, ease: "in-out" },
+      { id: "animatedArrowsExternal", attrs: { transform: ["translate(-10 10)", "translate(0 0)"], opacity: [0, 1] }, delay: 520, ms: 420, ease: "out" }
+    ]
+  }
+};
+var EMOJI_Y = 40;
+var emojiX = (i) => 30 + i * 44;
+var emojiPose = (i, dy, s) => `translate(${emojiX(i)} ${EMOJI_Y}) translate(0 ${dy}) scale(${s})`;
+var FACES = [
+  // Like: a thumb up on a blue disc.
+  `<circle r="17" fill="{{like}}"/><path d="M-8 -1 H-4 V9 H-8Z M-2 -1 L2 -9 C3.5 -10.5 6.5 -9 5.8 -6.3 L4.8 -2.5 H8.5 C10.4 -2.5 11.4 -0.6 10.8 1.2 L8.8 7.5 C8.3 9 7.2 9.6 5.8 9.6 H-2Z" fill="#FFFFFF"/>`,
+  // Love: a heart on a red disc.
+  `<circle r="17" fill="{{love}}"/><path d="M0 9 C0 9 -9.5 3 -9.5 -2.8 C-9.5 -6 -7.3 -8.2 -4.6 -8.2 C-2.6 -8.2 -0.9 -7.1 0 -5.5 C0.9 -7.1 2.6 -8.2 4.6 -8.2 C7.3 -8.2 9.5 -6 9.5 -2.8 C9.5 3 0 9 0 9Z" fill="#FFFFFF"/>`,
+  // Haha: shut eyes and a wide open laugh.
+  `<circle r="17" fill="{{face}}"/><path d="M-10 -6 L-5 -3.5 L-10 -1 M10 -6 L5 -3.5 L10 -1" fill="none" stroke="{{features}}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M-9 2 H9 C9 8.5 5 12 0 12 C-5 12 -9 8.5 -9 2Z" fill="{{features}}"/>`,
+  // Wow: raised brows, round eyes and mouth.
+  `<circle r="17" fill="{{face}}"/><path d="M-9 -9 Q-6 -11.5 -3 -9.5 M9 -9 Q6 -11.5 3 -9.5" fill="none" stroke="{{features}}" stroke-width="1.8" stroke-linecap="round"/><ellipse cx="-5.5" cy="-3.5" rx="2.2" ry="3" fill="{{features}}"/><ellipse cx="5.5" cy="-3.5" rx="2.2" ry="3" fill="{{features}}"/><ellipse cx="0" cy="7.5" rx="4" ry="5" fill="{{features}}"/>`,
+  // Sad: a frown and a tear.
+  `<circle r="17" fill="{{face}}"/><circle cx="-5.5" cy="-3" r="2.2" fill="{{features}}"/><circle cx="5.5" cy="-3" r="2.2" fill="{{features}}"/><path d="M-6 9.5 Q0 3.5 6 9.5" fill="none" stroke="{{features}}" stroke-width="2" stroke-linecap="round"/><path d="M-6 1 C-4.5 3.5 -4 4.8 -4 5.8 A2 2 0 0 1 -8 5.8 C-8 4.8 -7.5 3.5 -6 1Z" fill="#38BDF8"/>`,
+  // Angry: a red-orange face with knitted brows.
+  `<circle r="17" fill="{{angry}}"/><path d="M-10 -8 L-3 -4.5 M10 -8 L3 -4.5" stroke="{{features}}" stroke-width="2.2" stroke-linecap="round"/><circle cx="-5" cy="-1" r="2" fill="{{features}}"/><circle cx="5" cy="-1" r="2" fill="{{features}}"/><path d="M-6 10 Q0 5.5 6 10" fill="none" stroke="{{features}}" stroke-width="2" stroke-linecap="round"/>`
+];
+var emojiReactions = {
+  kind: "vector",
+  id: "emoji-reactions",
+  name: "Emoji reactions",
+  description: "A reaction picker: on hover the bar opens and like, love, haha, wow, sad and angry faces bounce up one after another, drawn as vectors.",
+  category: "icon",
+  tags: ["interactive", "hover", "emoji", "reactions", "social", "ui"],
+  trigger: "hover",
+  hold: 600,
+  presets: [{ name: "Dark", values: { pill: [0.13, 0.14, 0.19], button: [0.6, 0.63, 0.7] } }],
+  motion: {
+    svg: `<svg viewBox="0 0 280 80"><!-- {{pill: color default=#FFFFFF label='Bar'}} {{button: color default=#64748B label='Button icon'}} {{face: color default=#FBBF24 label='Faces'}} {{features: color default=#5B3A00 label='Eyes and mouths'}} {{like: color default=#2563EB label='Like'}} {{love: color default=#F43F5E label='Love'}} {{angry: color default=#F97316 label='Angry'}} --><rect id="emojiReactionsShadow" x="8" y="17" width="52" height="52" rx="26" fill="#000000" opacity="0.1"/><rect id="emojiReactionsPill" x="6" y="14" width="52" height="52" rx="26" fill="{{pill}}" stroke="#000000" stroke-opacity="0.08"/><g id="emojiReactionsButton" fill="none" stroke="{{button}}" stroke-width="2.2" stroke-linecap="round"><circle cx="30" cy="40" r="11"/><circle cx="26" cy="37" r="0.8" fill="{{button}}"/><circle cx="34" cy="37" r="0.8" fill="{{button}}"/><path d="M25.5 43.5 Q30 47 34.5 43.5"/></g>${FACES.map(
+      (face, i) => `<g id="emojiReactionsFace${i}" transform="${emojiPose(i, 14, 0)}">${face}</g>`
+    ).join("")}</svg>`,
+    animate: [
+      { id: "emojiReactionsPill", attrs: { width: [52, 268] }, ms: 280, ease: "out" },
+      { id: "emojiReactionsShadow", attrs: { width: [52, 268] }, ms: 280, ease: "out" },
+      { id: "emojiReactionsButton", attrs: { opacity: [1, 0] }, ms: 120 },
+      ...FACES.flatMap((_, i) => [
+        { id: `emojiReactionsFace${i}`, attrs: { transform: [emojiPose(i, 14, 0), emojiPose(i, -9, 1.15)] }, delay: 90 + i * 70, ms: 200, ease: "out" },
+        { id: `emojiReactionsFace${i}`, attrs: { transform: [emojiPose(i, -9, 1.15), emojiPose(i, 0, 1)] }, delay: 290 + i * 70, ms: 200, ease: "in-out" }
+      ])
+    ]
+  }
+};
+var STARS3 = 5;
+var STAR = { y: 32, r: 16, inner: 7, pitch: 38, first: 22 };
+var starX = (i) => STAR.first + i * STAR.pitch;
+var starPath2 = (cx) => `M${Array.from({ length: 10 }, (_, k) => {
+  const a = k * Math.PI / 5 - Math.PI / 2;
+  const r = k % 2 ? STAR.inner : STAR.r;
+  return `${r115(cx + r * Math.cos(a))} ${r115(STAR.y + 1.5 + r * Math.sin(a))}`;
+}).join(" L")}Z`;
+var bookmarkStar = {
+  kind: "vector",
+  id: "bookmark-star",
+  name: "Star rating",
+  description: "Five stars that fill one after another on hover, each bouncing as it fills (halves too), while the rating counts up beside them.",
+  category: "icon",
+  tags: ["interactive", "hover", "rating", "stars", "review", "ui"],
+  trigger: "hover",
+  hold: 600,
+  presets: [
+    { name: "Half", values: { rating: 3.5 } },
+    { name: "Dark", values: { empty: [0.28, 0.31, 0.37], ink: [0.94, 0.95, 0.97] } }
+  ],
+  derived: (v) => {
+    const rating = Math.min(STARS3, Math.max(0, Math.round((Number(v.rating) || 0) * 2) / 2));
+    return {
+      rating,
+      ...Object.fromEntries(
+        Array.from({ length: STARS3 }, (_, i) => {
+          const f = Math.min(1, Math.max(0, rating - i));
+          return [
+            [`w${i}`, r115(f * STAR.r * 2)],
+            [`pop${i}`, about6(starX(i), STAR.y, f > 0 ? 1.22 : 1)]
+          ];
+        }).flat()
+      )
+    };
+  },
+  motion: {
+    svg: `<svg viewBox="0 0 260 64" font-family="${SANS13}"><!-- {{rating: float min=0 max=5 default=4.5 step=0.5 label='Rating'}} {{star: color default=#FBBF24 label='Filled'}} {{empty: color default=#CBD5E1 label='Empty'}} {{ink: color default=#0F172A label='Text'}} --><defs>${Array.from(
+      { length: STARS3 },
+      (_, i) => `<clipPath id="bookmarkStarClip${i}"><rect id="bookmarkStarFill${i}" x="${starX(i) - STAR.r}" y="${STAR.y - STAR.r - 2}" width="0" height="${STAR.r * 2 + 6}"/></clipPath>`
+    ).join("")}</defs>${Array.from(
+      { length: STARS3 },
+      (_, i) => `<g id="bookmarkStarStar${i}" transform="${about6(starX(i), STAR.y, 1)}"><path d="${starPath2(starX(i))}" fill="{{empty}}" stroke="{{empty}}" stroke-width="2" stroke-linejoin="round"/><path d="${starPath2(starX(i))}" fill="{{star}}" stroke="{{star}}" stroke-width="2" stroke-linejoin="round" clip-path="url(#bookmarkStarClip${i})"/></g>`
+    ).join("")}<text id="bookmarkStarValue" x="202" y="38.5" font-size="16" font-weight="700" fill="{{ink}}" opacity="0">0.0</text></svg>`,
+    animate: [
+      ...Array.from({ length: STARS3 }, (_, i) => [
+        { id: `bookmarkStarFill${i}`, attrs: { width: [0, n16(`w${i}`)] }, delay: i * 110, ms: 160, ease: "linear" },
+        { id: `bookmarkStarStar${i}`, attrs: { transform: [about6(starX(i), STAR.y, 1), `{{pop${i}}}`] }, delay: i * 110 + 60, ms: 130, ease: "out" },
+        { id: `bookmarkStarStar${i}`, attrs: { transform: [`{{pop${i}}}`, about6(starX(i), STAR.y, 1)] }, delay: i * 110 + 190, ms: 180, ease: "in-out" }
+      ]).flat(),
+      { id: "bookmarkStarValue", attrs: { opacity: [0, 1] }, ms: 200 },
+      { id: "bookmarkStarValue", count: [0, n16("rating")], decimals: 1, format: "{n} / 5", ms: STARS3 * 110 + 100, ease: "out" }
+    ]
+  }
+};
+var LID_HINGE = "76 30";
+var lid = (deg) => `rotate(${deg} ${LID_HINGE})`;
+var paperAt = (x, y, deg) => `translate(${x} ${y}) rotate(${deg})`;
+var canTilt = (deg) => `rotate(${deg} 50 88)`;
+var trashDelete = {
+  kind: "vector",
+  id: "trash-delete",
+  name: "Trash delete",
+  description: "A trash can whose lid flips open as a crumpled paper drops in, then snaps shut with a little wobble; replays on every click.",
+  category: "icon",
+  tags: ["interactive", "click", "delete", "trash", "remove", "ui"],
+  trigger: "click",
+  hold: 600,
+  presets: [
+    { name: "Danger", values: { color: [0.86, 0.15, 0.15] } },
+    { name: "Dark", values: { color: [0.9, 0.91, 0.94], paper: [0.6, 0.63, 0.7] } }
+  ],
+  motion: {
+    svg: `<svg viewBox="0 0 100 100"><!-- {{color: color default=#334155 label='Can'}} {{paper: color default=#F8FAFC label='Paper'}} {{width: float min=2 max=8 default=5 step=0.5 label='Stroke width'}} --><g id="trashDeletePaper" transform="${paperAt(38, 12, 0)}" opacity="0"><path d="M-9 -4 L-4 -10 L3 -8 L9 -3 L8 5 L2 9 L-6 8 L-10 2Z" fill="{{paper}}" stroke="{{color}}" stroke-width="2" stroke-linejoin="round"/><path d="M-4 -3 L2 1 M-2 5 L4 -2" stroke="{{color}}" stroke-width="1.4" stroke-linecap="round"/></g><g id="trashDeleteCan" transform="${canTilt(0)}" fill="none" stroke="{{color}}" stroke-width="{{width}}" stroke-linecap="round" stroke-linejoin="round"><path d="M30 36 L34 82 C34.4 86 36 88 40 88 H60 C64 88 65.6 86 66 82 L70 36"/><path d="M43 46 V76 M57 46 V76"/><g id="trashDeleteLid" transform="${lid(0)}"><path d="M24 30 H76 M42 30 V23 H58 V30"/></g></g></svg>`,
+    animate: [
+      { id: "trashDeleteLid", step: 1, attrs: { transform: [lid(0), lid(32)] }, ms: 220, ease: "out" },
+      { id: "trashDeletePaper", step: 1, attrs: { opacity: [0, 1] }, delay: 100, ms: 100 },
+      { id: "trashDeletePaper", step: 1, attrs: { transform: [paperAt(38, 12, 0), paperAt(48, 62, 160)] }, delay: 120, ms: 420, ease: "in-out" },
+      { id: "trashDeletePaper", step: 1, attrs: { opacity: [1, 0] }, delay: 430, ms: 110 },
+      { id: "trashDeleteLid", step: 1, attrs: { transform: [lid(32), lid(0)] }, delay: 540, ms: 170, ease: "in-out" },
+      { id: "trashDeleteLid", step: 1, attrs: { transform: [lid(0), lid(5)] }, delay: 710, ms: 80, ease: "out" },
+      { id: "trashDeleteLid", step: 1, attrs: { transform: [lid(5), lid(0)] }, delay: 790, ms: 120, ease: "in-out" },
+      { id: "trashDeleteCan", step: 1, attrs: { transform: [canTilt(0), canTilt(-5)] }, delay: 700, ms: 90, ease: "out" },
+      { id: "trashDeleteCan", step: 1, attrs: { transform: [canTilt(-5), canTilt(3)] }, delay: 790, ms: 120, ease: "in-out" },
+      { id: "trashDeleteCan", step: 1, attrs: { transform: [canTilt(3), canTilt(0)] }, delay: 910, ms: 140, ease: "in-out" },
+      // The paper, gone, goes back to the top for the next click.
+      { id: "trashDeletePaper", step: 1, attrs: { transform: [paperAt(38, 12, 0), paperAt(38, 12, 0)] }, delay: 1100, ms: 0 }
+    ]
+  }
+};
+var shackle = (y) => `translate(0 ${y})`;
+var keyPose = (deg, s) => `translate(50 66) rotate(${deg}) scale(${s})`;
+var lockUnlock = {
+  kind: "vector",
+  id: "lock-unlock",
+  name: "Lock and unlock",
+  description: "A padlock: a click turns a key and pops the shackle open as the lock turns green; the next click turns it back and snaps it shut.",
+  category: "icon",
+  tags: ["interactive", "click", "lock", "security", "toggle", "ui"],
+  trigger: "click",
+  hold: 600,
+  presets: [{ name: "Dark", values: { locked: [0.85, 0.87, 0.9], hole: [0.06, 0.07, 0.1] } }],
+  motion: {
+    svg: `<svg viewBox="0 0 100 100"><!-- {{locked: color default=#334155 label='Locked'}} {{open: color default=#16A34A label='Unlocked'}} {{hole: color default=#FFFFFF label='Keyhole'}} {{key: color default=#F59E0B label='Key'}} --><g id="lockUnlockShackle" transform="${shackle(0)}"><path id="lockUnlockLoop" d="M34 48 V34 C34 25 41 18 50 18 C59 18 66 25 66 34 V48" fill="none" stroke="{{locked}}" stroke-width="8"/></g><rect id="lockUnlockBody" x="22" y="44" width="56" height="44" rx="9" fill="{{locked}}"/><g id="lockUnlockHole" transform="rotate(0 50 66)"><circle cx="50" cy="62" r="5.5" fill="{{hole}}"/><path d="M47.5 64 H52.5 L53.5 75 H46.5Z" fill="{{hole}}"/></g><g id="lockUnlockKey" transform="${keyPose(0, 0.4)}" opacity="0"><rect x="-2.5" y="-6" width="5" height="10" fill="{{key}}"/><circle cy="-13" r="8" fill="none" stroke="{{key}}" stroke-width="4.5"/></g></svg>`,
+    animate: [
+      // Step 1, unlock: the key goes in and turns, the shackle springs up, and the lock goes green.
+      { id: "lockUnlockKey", step: 1, attrs: { opacity: [0, 1], transform: [keyPose(0, 0.4), keyPose(0, 1)] }, ms: 160, ease: "out" },
+      { id: "lockUnlockKey", step: 1, attrs: { transform: [keyPose(0, 1), keyPose(90, 1)] }, delay: 180, ms: 200, ease: "in-out" },
+      { id: "lockUnlockHole", step: 1, attrs: { transform: ["rotate(0 50 66)", "rotate(90 50 66)"] }, delay: 180, ms: 200, ease: "in-out" },
+      { id: "lockUnlockShackle", step: 1, attrs: { transform: [shackle(0), shackle(-16)] }, delay: 380, ms: 160, ease: "out" },
+      { id: "lockUnlockShackle", step: 1, attrs: { transform: [shackle(-16), shackle(-12)] }, delay: 540, ms: 180, ease: "in-out" },
+      { id: "lockUnlockBody", step: 1, attrs: { fill: ["{{locked}}", "{{open}}"] }, delay: 380, ms: 220 },
+      { id: "lockUnlockLoop", step: 1, attrs: { stroke: ["{{locked}}", "{{open}}"] }, delay: 380, ms: 220 },
+      { id: "lockUnlockKey", step: 1, attrs: { opacity: [1, 0] }, delay: 650, ms: 200 },
+      // Step 2, lock: the key turns back, the shackle drops shut with a bump.
+      { id: "lockUnlockKey", step: 2, attrs: { opacity: [0, 1], transform: [keyPose(90, 0.4), keyPose(90, 1)] }, ms: 160, ease: "out" },
+      { id: "lockUnlockKey", step: 2, attrs: { transform: [keyPose(90, 1), keyPose(0, 1)] }, delay: 180, ms: 200, ease: "in-out" },
+      { id: "lockUnlockHole", step: 2, attrs: { transform: ["rotate(90 50 66)", "rotate(0 50 66)"] }, delay: 180, ms: 200, ease: "in-out" },
+      { id: "lockUnlockShackle", step: 2, attrs: { transform: [shackle(-12), shackle(2)] }, delay: 380, ms: 150, ease: "in-out" },
+      { id: "lockUnlockShackle", step: 2, attrs: { transform: [shackle(2), shackle(0)] }, delay: 530, ms: 120, ease: "out" },
+      { id: "lockUnlockBody", step: 2, attrs: { fill: ["{{open}}", "{{locked}}"] }, delay: 400, ms: 220 },
+      { id: "lockUnlockLoop", step: 2, attrs: { stroke: ["{{open}}", "{{locked}}"] }, delay: 400, ms: 220 },
+      { id: "lockUnlockKey", step: 2, attrs: { opacity: [1, 0] }, delay: 650, ms: 200 },
+      { id: "lockUnlockKey", step: 2, attrs: { transform: [keyPose(0, 0.4), keyPose(0, 0.4)] }, delay: 900, ms: 0 }
+    ]
+  }
+};
+var WIFI = { cx: 50, cy: 80 };
+var wifiArc = (r) => {
+  const d = r * Math.SQRT1_2;
+  return `M${r115(WIFI.cx - d)} ${r115(WIFI.cy - d)} A${r} ${r} 0 0 1 ${r115(WIFI.cx + d)} ${r115(WIFI.cy - d)}`;
+};
+var WIFI_ARCS = [20, 36, 52];
+var wifiSignal = {
+  kind: "vector",
+  id: "wifi-signal",
+  name: "Wi-Fi signal",
+  description: "Wi-Fi bars filling one after another from the dot outward, pulsing twice at full strength, then fading to start again.",
+  category: "icon",
+  tags: ["wifi", "signal", "connection", "network", "status", "loop"],
+  hold: 200,
+  presets: [
+    { name: "Dark", values: { track: [0.2, 0.22, 0.27], color: [0.38, 0.65, 0.98] } }
+  ],
+  motion: {
+    svg: `<svg viewBox="0 0 100 100"><!-- {{color: color default=#2563EB label='Signal'}} {{track: color default=#E2E8F0 label='Empty bars'}} {{width: float min=4 max=12 default=9 step=0.5 label='Bar width'}} --><g fill="none" stroke="{{track}}" stroke-width="{{width}}" stroke-linecap="round">${WIFI_ARCS.map((r) => `<path d="${wifiArc(r)}"/>`).join("")}</g><circle cx="${WIFI.cx}" cy="${WIFI.cy}" r="6.5" fill="{{track}}"/><g id="wifiSignalOn"><circle id="wifiSignalDot" cx="${WIFI.cx}" cy="${WIFI.cy}" r="6.5" fill="{{color}}" opacity="0"/><g fill="none" stroke="{{color}}" stroke-width="{{width}}" stroke-linecap="round">${WIFI_ARCS.map((r, k) => `<path id="wifiSignalArc${k}" d="${wifiArc(r)}" opacity="0"/>`).join("")}</g></g></svg>`,
+    animate: [
+      { id: "wifiSignalDot", attrs: { opacity: [0, 1], r: [3, 6.5] }, ms: 220, ease: "out" },
+      ...WIFI_ARCS.map((_, k) => ({ id: `wifiSignalArc${k}`, attrs: { opacity: [0, 1] }, delay: 250 + k * 250, ms: 220, ease: "out" })),
+      ...[0, 1].flatMap((k) => swing("wifiSignalOn", "opacity", 1, 0.45, 600, 1150 + k * 600)),
+      // Fades out together, so the loop starts from empty again.
+      { id: "wifiSignalDot", attrs: { opacity: [1, 0], r: [6.5, 3] }, delay: 2600, ms: 300 },
+      ...WIFI_ARCS.map((_, k) => ({ id: `wifiSignalArc${k}`, attrs: { opacity: [1, 0] }, delay: 2600, ms: 300 }))
+    ]
+  }
+};
+var iconEffects = [weatherIcons, notificationBell, animatedArrows, emojiReactions, bookmarkStar, trashDelete, lockUnlock, wifiSignal];
+
 // src/catalog/index.ts
 var SHADER_EFFECTS = [
   meshGradient,
@@ -27422,7 +28469,7 @@ var SHADER_EFFECTS = [
   ...waterShaders,
   ...transitions
 ];
-var EFFECTS = [...SHADER_EFFECTS, ...vectorEffects, ...textEffects, ...morphEffects, ...interactionEffects, ...pyroEffects, ...timewarpEffects, ...meltEffects, ...electricEffects, ...pixelEffects, ...splatterEffects, ...bubbleEffects, ...stickerEffects, ...trailEffects, ...impactEffects, ...comicEffects, ...glowEffects, ...shadowEffects, ...lightingEffects, ...scrollEffects, ...broadcastEffects, ...annotationEffects, ...uiEffects, ...loaderEffects].sort(
+var EFFECTS = [...SHADER_EFFECTS, ...vectorEffects, ...textEffects, ...morphEffects, ...interactionEffects, ...pyroEffects, ...timewarpEffects, ...meltEffects, ...electricEffects, ...pixelEffects, ...splatterEffects, ...bubbleEffects, ...stickerEffects, ...trailEffects, ...impactEffects, ...comicEffects, ...glowEffects, ...shadowEffects, ...lightingEffects, ...scrollEffects, ...broadcastEffects, ...annotationEffects, ...uiEffects, ...loaderEffects, ...dataEffects, ...iconEffects].sort(
   (a, b) => EFFECT_CATEGORIES.indexOf(a.category) - EFFECT_CATEGORIES.indexOf(b.category)
 );
 var byId = new Map(EFFECTS.map((e) => [e.id, e]));
@@ -27439,6 +28486,7 @@ function findEffects(query = {}) {
   const words = (query.text ?? "").toLowerCase().split(/\s+/).filter(Boolean);
   return EFFECTS.filter((e) => {
     if (query.category && e.category !== query.category) return false;
+    if (query.group && !EFFECT_CATEGORY_GROUPS.find((g) => g.name.toLowerCase() === query.group.toLowerCase())?.categories.includes(e.category)) return false;
     if (query.kind && e.kind !== query.kind) return false;
     if (query.tags && !query.tags.every((t) => e.tags.includes(t))) return false;
     if (query.video && !(e.kind === "shader" && e.video && query.video.includes(e.video))) return false;
@@ -27479,6 +28527,8 @@ export {
   SAMPLE_IMAGES,
   textImage,
   EFFECT_CATEGORIES,
+  EFFECT_CATEGORY_GROUPS,
+  categoryGroup,
   VIDEO_USES,
   VECTOR_CONTROL_TYPES,
   vectorControls,
@@ -27498,4 +28548,4 @@ export {
   effectControls,
   effectDefaults
 };
-//# sourceMappingURL=chunk-RS2S2K5C.js.map
+//# sourceMappingURL=chunk-IHUNCBMF.js.map