pele-animate 0.9.0 → 0.11.0

package/README.md

@@ -6,10 +6,47 @@ Unofficial add-on; not affiliated with or endorsed by the Pele or Obsidian teams
 The source stays valid Mermaid, so GitHub or Obsidian still show a normal diagram.
 
 - Nodes appear in order (BFS from the sources, or pinned with a `%% pa:` comment), edges draw in, labels fade in.
-- Hover or focus: tokens travel the edges in sequence. Click or Enter replays the intro.
+- Hover or focus: tokens travel the edges in sequence. The intro plays once on scroll-in. Click (or Enter) enters step mode: previous / play-pause / next buttons, with Space (play/pause), ←/→ (step) and Esc (leave).
 - `@{ icon: "name" }` nodes become illustrations from a glyph pack. Unknown names fall back to a plain Pele box.
+- Sequence diagrams: participant boxes in a row get the tallest height (Pele sizes each to its own text). Group and box titles are bold.
 - Idle state is the finished picture; `prefers-reduced-motion` turns the motion off. Light and dark themes.
 
+## Compare
+
+The same Mermaid source, three renderers. The pele-animate images loop: the intro draws in, then tokens travel the edges (as on hover).
+Regenerate with `examples/capture.sh`.
+
+```mermaid
+flowchart LR
+  A[Player] -->|auth token| B[OTT service]
+  A -->|license request| C[DRM server]
+  C -->|license| A
+```
+
+| Renderer | Result |
+|---|---|
+| Mermaid | <img src="https://raw.githubusercontent.com/dkdev24/pele-animate/main/examples/m1.png" width="560" alt="Flowchart rendered by Mermaid"> |
+| Pele | <img src="https://raw.githubusercontent.com/dkdev24/pele-animate/main/examples/p1.png" width="560" alt="Flowchart rendered by Pele"> |
+| pele-animate | <img src="https://raw.githubusercontent.com/dkdev24/pele-animate/main/examples/a1.gif" width="560" alt="Animated flowchart: nodes appear, edges draw in, tokens travel"> |
+
+```mermaid
+sequenceDiagram
+  Player->>OTT: sign in
+  OTT-->>Player: token
+  Player->>DRM: token
+  DRM-->>Player: license
+```
+
+| Renderer | Result |
+|---|---|
+| Mermaid | <img src="https://raw.githubusercontent.com/dkdev24/pele-animate/main/examples/m2.png" width="560" alt="Sequence diagram rendered by Mermaid"> |
+| Pele | <img src="https://raw.githubusercontent.com/dkdev24/pele-animate/main/examples/p2.png" width="560" alt="Sequence diagram rendered by Pele"> |
+| pele-animate | <img src="https://raw.githubusercontent.com/dkdev24/pele-animate/main/examples/a2.gif" width="560" alt="Animated sequence diagram: messages appear in order, tokens travel"> |
+
+With glyphs (`@{ icon }` nodes, `%% pa: 1=P 2=O 3=D` pins the order):
+
+<img src="https://raw.githubusercontent.com/dkdev24/pele-animate/main/examples/a3.gif" width="560" alt="Animated scene with illustrated Player, OTT service and DRM server">
+
 ## Install
 
 ```sh
@@ -51,15 +88,15 @@ flowchart LR
 
 | Export | |
 |---|---|
-| `watch(container, source?)` | Animate the SVG inside `container` (and every re-render of it); adds the scene panel, click and Enter replay |
+| `watch(container, source?)` | Animate the SVG inside `container` (and every re-render of it); adds the scene panel and step mode (click / Enter); pass `{ controls: false }` as a third argument for click-to-replay instead |
 | `animate(svg, { hover, source })` | Animate one SVG; you handle re-renders |
 | `replay(svg)` | Play the intro again |
 | `parseOrder(source)` | Read the `%% pa:` pins |
 | `registerGlyphs(pack, strokeWidth = 1.1)` (`/glyphs`) | Add glyphs: `{ name: '<inner markup of a 24x24 svg>' }`; colors via `--pa-solid` / `--pa-light` |
 | `icons` (`/glyphs`) | Pele `icons` resolver |
 
-Generic glyphs: `player`, `server`, `key`, `document`, `shield`, `phone`. `preset-doverunner`: `package`, `token`, `lock`,
-`database`, `bits-a`, `bits-b`.
+Generic glyphs: `player`, `server`, `key`, `document`, `shield`, `phone`, `cloud`. `preset-doverunner`: `package`, `token`, `lock`,
+`database`, `video`, `media`, `encoder`, `storage`, `plugin`, `variants`, `watermark`, `bits-a`, `bits-b`.
 
 ## Theme
 
@@ -71,3 +108,7 @@ variable on it; defaults are `:where()` rules, so your stylesheet wins.
 - Relies on Pele's SVG structure (`.pele-node`, `.pele-edge`, `data-id`); `pele` is a peer dependency pinned to `^1.7.0`.
 - Flowcharts and sequence diagrams only. No types yet.
 - Glyph art is square-boxed; wide art is drawn as a wide glyph inside the square.
+
+## Changelog
+
+See [CHANGELOG.md](CHANGELOG.md).

package/glyphs.js

@@ -19,4 +19,5 @@ registerGlyphs({
   document: `<path d="M6 2.5h8l4.5 4.5v14a1 1 0 0 1-1 1h-11.5a1 1 0 0 1-1-1v-17.5a1 1 0 0 1 1-1z" fill="${L}" stroke="${S}"/><path d="M14 2.5V7h4.5" fill="none" stroke="${S}"/><path d="M8.5 12h7M8.5 15.5h7" stroke="${S}"/>`,
   shield: `<path d="M12 2.5l8 3v6c0 5-3.4 8.5-8 10-4.6-1.5-8-5-8-10v-6z" fill="${S}" stroke="none"/><path d="M8.5 12l2.6 2.6 4.6-5" fill="none" stroke="${W}" stroke-width="2.2"/>`,
   phone: `<rect x="6.5" y="2" width="11" height="20" rx="2.5" fill="${W}" stroke="${S}"/><path d="M10.5 3.8h3" stroke="${S}"/><rect x="8.5" y="6" width="7" height="4" rx="1" fill="${S}" stroke="none"/><path d="M8.5 12.5h7M8.5 15h7M8.5 17.5h4" stroke="${S}"/><path d="M10.5 20.2h3" stroke="${S}"/>`,
+  cloud: `<path d="M7 18a4 4 0 0 1-.6-7.96A5.5 5.5 0 0 1 17 8.5a4.75 4.75 0 0 1 .5 9.5z" fill="${L}" stroke="${S}"/>`,
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pele-animate",
-  "version": "0.9.0",
+  "version": "0.11.0",
   "description": "Animated, illustrated SVG scenes from plain Mermaid code, as a post-processor for Pele.",
   "type": "module",
   "license": "MIT",

package/pele-animate.css

@@ -1,17 +1,17 @@
 /* Draw-in once when scrolled into view; a dot travels each edge while hovered/focused. Idle = finished picture. */
-.pa-ready:not(.pa-in) .pele-node,
-.pa-ready:not(.pa-in) .pele-edge-label,
-.pa-ready:not(.pa-in) .pele-lifeline,
-.pa-ready:not(.pa-in) .pele-marker { opacity: 0; }
-.pa-ready:not(.pa-in) .pele-edge > path:not(.pele-marker) { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); }
+.pa-ready:not(.pa-in):not(.pa-step) .pele-node,
+.pa-ready:not(.pa-in):not(.pa-step) .pele-edge-label,
+.pa-ready:not(.pa-in):not(.pa-step) .pele-lifeline,
+.pa-ready:not(.pa-in):not(.pa-step) .pele-marker { opacity: 0; }
+.pa-ready:not(.pa-in):not(.pa-step) .pele-edge > path:not(.pele-marker) { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); }
 
 /* Keyframes carry the dash, so edges that are dashed in the diagram go back to their own dash pattern afterwards. */
-.pa-ready.pa-in .pele-node,
-.pa-ready.pa-in .pele-edge-label,
-.pa-ready.pa-in .pele-lifeline,
-.pa-ready.pa-in .pele-marker { animation: pa-fade .4s ease-out backwards; animation-delay: var(--d, 0s); }
-.pa-ready.pa-in .pele-edge > path:not(.pele-marker) { animation: pa-draw .4s ease-out backwards; animation-delay: var(--d, 0s); }
-.pa-ready.pa-done * { animation: none !important; }
+.pa-ready.pa-in:not(.pa-step) .pele-node,
+.pa-ready.pa-in:not(.pa-step) .pele-edge-label,
+.pa-ready.pa-in:not(.pa-step) .pele-lifeline,
+.pa-ready.pa-in:not(.pa-step) .pele-marker { animation: pa-fade .4s ease-out backwards; animation-delay: var(--d, 0s); }
+.pa-ready.pa-in:not(.pa-step) .pele-edge > path:not(.pele-marker) { animation: pa-draw .4s ease-out backwards; animation-delay: var(--d, 0s); }
+.pa-ready.pa-done:not(.pa-step) * { animation: none !important; }
 @keyframes pa-fade { from { opacity: 0; } }
 @keyframes pa-draw { from { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); } to { stroke-dasharray: var(--len); stroke-dashoffset: 0; } }
 
@@ -19,10 +19,17 @@
 
 @media (prefers-reduced-motion: reduce) {
   .pa-ready * { animation: none !important; }
-  .pa-ready .pele-node, .pa-ready .pele-edge-label, .pa-ready .pele-lifeline, .pa-ready .pele-marker { opacity: 1 !important; }
+  .pa-ready:not(.pa-step) .pele-node, .pa-ready:not(.pa-step) .pele-edge-label, .pa-ready:not(.pa-step) .pele-lifeline, .pa-ready:not(.pa-step) .pele-marker { opacity: 1 !important; }
   .pa-ready .pele-edge > path { stroke-dasharray: none; stroke-dashoffset: 0 !important; }
 }
 
+/* Step mode: elements are shown by step; the ones just revealed fade / draw in. */
+.pa-step .pa-hid { opacity: 0; }
+.pa-step .pa-dot { display: none; }
+.pa-step .pa-pop { animation: pa-fade .4s ease-out backwards; }
+.pa-step .pele-edge > path:not(.pele-marker).pa-pop { animation-name: pa-draw; }
+.pa-step .pele-edge > .pele-marker.pa-pop { animation-delay: .3s; }
+
 /* Scene frame: tinted panel like the Lab product cards. Override any --pa-* / --pele-* on the container to retheme. */
 :where(.pa-scene) {
   --pa-bg: #efeafa; --pa-solid: #4F378B; --pa-light: #e4dcf6;
@@ -43,3 +50,16 @@
 .pa-art > rect:first-child { fill: none; stroke: none; }
 /* Edge labels sit on the line; give them the panel color so the line doesn't strike through the text. */
 .pa-scene .pele-edge-label rect { fill: var(--pa-bg); }
+
+/* Group and box titles read as headings. */
+:where(.pa-scene) .pele-cluster-label { font-weight: 700; }
+
+/* Step controls: previous | play/pause | next, shown under the diagram in step mode. */
+.pa-scene.pa-stepping { flex-direction: column; align-items: center; gap: .75rem; }
+.pa-controls { display: flex; align-items: center; gap: .125rem; padding: .25rem; border-radius: 999px; cursor: default;
+  background: var(--pele-surface); color: var(--pele-fg); border: 1px solid var(--pele-border); font: 500 .8rem/1 system-ui, sans-serif; }
+.pa-controls button { width: 2rem; height: 2rem; padding: 0; border: 0; border-radius: 50%; background: none; color: inherit; font: inherit; font-size: 1rem; cursor: pointer; }
+.pa-controls button:hover:not(:disabled) { background: var(--pele-surface-alt); }
+.pa-controls button:disabled { opacity: .35; cursor: default; }
+.pa-controls button:focus-visible { outline: 2px solid var(--pa-solid); }
+.pa-count { min-width: 4ch; padding: 0 .5rem; text-align: center; font-variant-numeric: tabular-nums; }

package/pele-animate.js

@@ -48,8 +48,37 @@ function fitGlyphs(svg) {
   });
 }
 
+// Pele sizes each sequence participant box to its own text, which leaves ragged rows. Give every box in a row the tallest height:
+// header boxes grow upward (bottoms stay on the lifeline start), footer boxes grow downward (tops stay on the lifeline end).
+function equalizeActors(svg) {
+  if (!svg.classList.contains('pele-sequence') || svg.dataset.paEqualized) return;
+  svg.dataset.paEqualized = '1';
+  for (const footer of [false, true]) {
+    const boxes = [...svg.querySelectorAll('g.pele-actor-participant')].filter((g) => g.classList.contains('pele-actor-footer') === footer);
+    const rects = boxes.map((g) => g.querySelector('rect')).filter(Boolean);
+    if (rects.length < 2) continue;
+    const num = (r, a) => +r.getAttribute(a);
+    const heights = rects.map((r) => num(r, 'height'));
+    const max = Math.max(...heights);
+    const top = Math.min(...rects.map((r) => num(r, 'y')));
+    const bottom = Math.max(...rects.map((r) => num(r, 'y') + num(r, 'height')));
+    boxes.forEach((g, i) => {
+      const grow = max - heights[i];
+      if (!grow) return;
+      rects[i].setAttribute('y', String(footer ? top : bottom - max));
+      rects[i].setAttribute('height', String(max));
+      const dy = footer ? grow / 2 : -grow / 2; // re-centre the label
+      g.querySelectorAll('text, tspan').forEach((t) => {
+        const y = t.getAttribute('y');
+        if (y !== null) t.setAttribute('y', String(+y + dy));
+      });
+    });
+  }
+}
+
 export function animate(svg, { hover = svg, source = '' } = {}) {
   fitGlyphs(svg);
+  equalizeActors(svg);
   svg.querySelectorAll('.pa-dot').forEach((d) => d.remove());
   svg.classList.add('pa-ready');
   const nodes = [...svg.querySelectorAll('.pele-node')];
@@ -57,26 +86,38 @@ export function animate(svg, { hover = svg, source = '' } = {}) {
   const ids = [...new Set(nodes.map((n) => n.dataset.id))];
   const set = (el, t) => el?.style.setProperty('--d', `${t}s`);
   const times = new Map(); // edge element -> start time
+  const step = new Map(); // node / edge element -> step index (BFS level, or message number in a sequence)
 
   if (svg.classList.contains('pele-sequence')) {
     const u = Math.min(UNIT, MAX_INTRO / Math.max(1, edges.length));
     nodes.forEach((n) => set(n, 0));
     svg.querySelectorAll('.pele-lifeline').forEach((l) => set(l, 0.2));
-    edges.forEach((e, i) => times.set(e, 0.5 + i * u));
+    edges.forEach((e, i) => { times.set(e, 0.5 + i * u); step.set(e, i + 1); });
+    nodes.forEach((n) => step.set(n, 0));
   } else {
     const pairs = edges.map((e) => endpoints(e.dataset.id, ids));
     const level = bfs(ids, pairs.filter(Boolean), parseOrder(source));
     const u = Math.min(UNIT, MAX_INTRO / (Math.max(0, ...level.values()) + 1));
     const k = u / UNIT;
-    nodes.forEach((n) => set(n, level.get(n.dataset.id) * u));
+    nodes.forEach((n) => { set(n, level.get(n.dataset.id) * u); step.set(n, level.get(n.dataset.id)); });
     // Start after the source is up, but never so early that the arrow lands before its target appears (pinned steps).
     edges.forEach((e, i) => {
       const [s, d] = pairs[i] ?? [];
+      step.set(e, Math.max(level.get(s) ?? 0, level.get(d) ?? 0));
       times.set(e, Math.max((level.get(s) ?? 0) * u + 0.3 * k, (level.get(d) ?? 0) * u - 0.5 * k));
     });
   }
 
   const labels = new Map([...svg.querySelectorAll('.pele-edge-label')].map((l) => [l.dataset.id, l]));
+
+  // Step mode: each step's elements are revealed together; [element, parts that animate in].
+  const groups = new Map();
+  const add = (n, el, pop = [el]) => el && (groups.get(n) ?? groups.set(n, []).get(n)).push([el, pop]);
+  nodes.forEach((n) => add(step.get(n), n));
+  svg.querySelectorAll('.pele-lifeline').forEach((l) => add(0, l));
+  for (const e of edges) { add(step.get(e), e, [...e.querySelectorAll('path')]); add(step.get(e), labels.get(e.dataset.id)); }
+  svg.paSteps = [...groups].sort((a, b) => a[0] - b[0]).map(([, items]) => items);
+
   const dots = [];
   for (const [e, t] of times) {
     const path = e.querySelector('path:not(.pele-marker)');
@@ -97,7 +138,7 @@ export function animate(svg, { hover = svg, source = '' } = {}) {
   const cycle = Math.max(0, ...times.values()) + TOKEN + 0.8;
   let running = [];
   const play = () => {
-    if (reduced() || running.length) return;
+    if (reduced() || running.length || svg.classList.contains('pa-step')) return;
     running = dots.map(([dot, t]) => {
       const a = t / cycle, b = (t + TOKEN) / cycle, e = 0.001;
       return dot.animate(
@@ -127,22 +168,118 @@ export function animate(svg, { hover = svg, source = '' } = {}) {
   io.observe(svg);
 }
 
+const STEP_MS = 1200; // autoplay pace in step mode
+
+// Show steps 0..k and hide the rest; `pop` animates the elements of step k.
+function showStep(svg, k, pop) {
+  svg.classList.add('pa-step');
+  svg.querySelectorAll('.pa-pop').forEach((el) => el.classList.remove('pa-pop'));
+  svg.paSteps.forEach((items, i) => items.forEach(([el]) => el.classList.toggle('pa-hid', i > k)));
+  void svg.getBoundingClientRect();
+  if (pop) svg.paSteps[k].forEach(([, parts]) => parts.forEach((p) => p.classList.add('pa-pop')));
+}
+
+function leaveStep(svg) {
+  svg.classList.remove('pa-step');
+  svg.querySelectorAll('.pa-hid, .pa-pop').forEach((el) => el.classList.remove('pa-hid', 'pa-pop'));
+  svg.classList.add('pa-in', 'pa-done');
+}
+
 // mount() re-renders on container resize; re-animate each new <svg>, skipping the intro once it has played.
-export function watch(container, source = '') {
+// Click (or Enter/Space) enters step mode: previous | play/pause | next, Space, ←/→, Esc to leave. `controls: false` keeps click-to-replay.
+export function watch(container, source = '', { controls = true } = {}) {
   let played = false;
+  let k = -1; // current step; -1 = not in step mode
+  let timer = 0;
+  const cur = () => container.querySelector('svg.pele');
+  const bar = document.createElement('div');
+  bar.className = 'pa-controls';
+  bar.setAttribute('role', 'toolbar');
+  bar.setAttribute('aria-label', 'Step through the diagram');
+  bar.title = ''; // an empty title stops the container's tooltip showing through the gaps
+  bar.innerHTML = '<button type="button" data-a="prev" aria-label="Previous step" title="Previous step (\u2190)">\u2039</button>'
+    + '<button type="button" data-a="play"></button>'
+    + '<button type="button" data-a="next" aria-label="Next step" title="Next step (\u2192)">\u203A</button>'
+    + '<span class="pa-count" aria-live="polite" title="Current step"></span>'
+    + '<button type="button" data-a="exit" aria-label="Exit step mode" title="Exit step mode (Esc)">\u2715\uFE0E</button>';
+  const btn = (a) => bar.querySelector(`[data-a=${a}]`);
+  const last = () => (cur()?.paSteps?.length ?? 1) - 1;
+  const ui = () => {
+    btn('prev').disabled = k <= 0;
+    btn('next').disabled = k >= last();
+    btn('play').textContent = timer ? '\u275A\u275A' : '\u25B6\uFE0E';
+    const label = timer ? 'Pause (Space)' : 'Play (Space)';
+    btn('play').setAttribute('aria-label', label);
+    btn('play').title = label;
+    bar.querySelector('.pa-count').textContent = `${k + 1} / ${last() + 1}`;
+  };
+  const pause = () => { clearTimeout(timer); timer = 0; };
+  const go = (n) => {
+    const svg = cur();
+    if (!svg?.paSteps) return;
+    const to = Math.max(0, Math.min(last(), n));
+    showStep(svg, to, to > k);
+    k = to;
+    ui();
+  };
+  const tick = () => {
+    if (k >= last()) { pause(); return ui(); }
+    go(k + 1);
+    timer = setTimeout(tick, STEP_MS);
+  };
+  const toggle = () => {
+    if (timer) { pause(); return ui(); }
+    if (k >= last()) go(0);
+    timer = setTimeout(tick, STEP_MS);
+    ui();
+  };
+  const manual = (n) => { pause(); go(n); };
+  const enter = () => {
+    played = true;
+    container.classList.add('pa-stepping');
+    container.append(bar);
+    go(0);
+  };
+  const exit = () => {
+    pause();
+    k = -1;
+    bar.remove();
+    container.classList.remove('pa-stepping');
+    if (cur()) leaveStep(cur());
+    container.focus();
+  };
+  const actions = { prev: () => manual(k - 1), next: () => manual(k + 1), play: toggle, exit };
+  bar.addEventListener('click', (e) => {
+    e.stopPropagation(); // else the container's click would re-enter step mode right after Exit
+    actions[e.target.closest('button')?.dataset.a]?.();
+  });
+
   const run = () => {
+    if (k >= 0 && !bar.isConnected) container.append(bar); // a re-render may have wiped it
     const svg = container.querySelector('svg.pele:not(.pa-ready)');
     if (!svg) return;
     animate(svg, { hover: container, source });
     if (played) svg.classList.add('pa-in', 'pa-done');
     else svg.addEventListener('animationend', () => (played = true), { once: true });
+    if (k >= 0) { k = Math.min(k, last()); showStep(svg, k, false); ui(); }
   };
   new MutationObserver(run).observe(container, { childList: true });
   container.classList.add('pa-scene');
   container.tabIndex = 0;
-  container.title ||= 'Click to replay';
-  container.addEventListener('click', () => replay(container.querySelector('svg.pele')));
-  container.addEventListener('keydown', (e) => (e.key === 'Enter' || e.key === ' ') && (e.preventDefault(), replay(container.querySelector('svg.pele'))));
+  container.title ||= controls ? 'Click to step through' : 'Click to replay';
+  if (!controls) {
+    container.addEventListener('click', () => replay(cur()));
+    container.addEventListener('keydown', (e) => (e.key === 'Enter' || e.key === ' ') && (e.preventDefault(), replay(cur())));
+  } else {
+    container.addEventListener('click', () => k < 0 && enter());
+    container.addEventListener('keydown', (e) => {
+      const key = e.key;
+      if (e.target.closest('button') && (key === 'Enter' || key === ' ')) return; // native button activation
+      if (k < 0) return (key === 'Enter' || key === ' ') && (e.preventDefault(), enter());
+      const act = { ' ': toggle, ArrowRight: () => manual(k + 1), ArrowLeft: () => manual(k - 1), Escape: exit }[key];
+      if (act) { e.preventDefault(); act(); }
+    });
+  }
   run();
 }
 

package/preset-doverunner.js

@@ -15,6 +15,13 @@ registerGlyphs({
   package: `<path d="M12 2.5l8.5 4.5v10L12 21.5 3.5 17V7z" fill="${L}" stroke="${S}"/><path d="M3.5 7L12 11.5 20.5 7M12 11.5v10" fill="none" stroke="${S}"/><path d="M8 4.8l8.5 4.5" stroke="${S}"/>`,
   token: `<path d="M3 7.5A1.5 1.5 0 0 1 4.5 6h15A1.5 1.5 0 0 1 21 7.5V10a2 2 0 0 0 0 4v2.5a1.5 1.5 0 0 1-1.5 1.5h-15A1.5 1.5 0 0 1 3 16.5V14a2 2 0 0 0 0-4z" fill="${L}" stroke="${S}"/><circle cx="9" cy="12" r="2.2" fill="${S}" stroke="none"/><path d="M13.5 10.5h4.5M13.5 13.5h3" stroke="${S}"/>`,
   lock: `<path d="M8.5 10.5V8a3.5 3.5 0 0 1 7 0v2.5" fill="none" stroke="${S}"/><rect x="5" y="10.5" width="14" height="10" rx="2" fill="${S}" stroke="none"/><circle cx="12" cy="15" r="1.5" fill="${W}" stroke="none"/><path d="M12 15.5v2.2" stroke="${W}"/>`,
+  video: `<rect x="2" y="6" width="13" height="12" rx="2" fill="${L}" stroke="${S}"/><path d="M15 10.8l6-3.6v9.6l-6-3.6z" fill="${S}" stroke="${S}"/><circle cx="5.6" cy="9.4" r="1" fill="${S}" stroke="none"/>`,
+  media: `<rect x="2" y="4" width="15" height="11" rx="2" fill="${L}" stroke="${S}"/><path d="M7.6 7.2v5.6l4.6-2.8z" fill="${S}" stroke="none"/><ellipse cx="14.8" cy="19" rx="2.3" ry="1.8" fill="${S}" stroke="none"/><path d="M17 19V9.5q3 .2 3.6 3.4" fill="none" stroke="${S}"/>`,
+  storage: `<ellipse cx="12" cy="6" rx="8" ry="2.6" fill="${L}" stroke="${S}"/><path d="M4 6l2.4 13.4c.4 1.3 3 2.1 5.6 2.1s5.2-.8 5.6-2.1L20 6" fill="${L}" stroke="${S}"/><path d="M4.6 9.6c1.6 1.2 4.2 1.8 7.4 1.8s5.8-.6 7.4-1.8" fill="none" stroke="${S}"/>`,
+  plugin: `<path d="M4 8h4.5a2.2 2.2 0 1 1 4.4 0H17v4.1a2.2 2.2 0 1 1 0 4.4V20H4z" fill="${L}" stroke="${S}"/><path d="M17 8h3v12h-3" fill="none" stroke="${S}"/>`,
+  variants: `<rect x="2.5" y="3" width="14" height="9.5" rx="2" fill="${L}" stroke="${S}"/><rect x="7.5" y="11.5" width="14" height="9.5" rx="2" fill="${W}" stroke="${S}"/><text x="9.5" y="10.4" font-size="6.5" font-weight="700" text-anchor="middle" fill="${S}" stroke="none">A</text><text x="14.5" y="19" font-size="6.5" font-weight="700" text-anchor="middle" fill="${S}" stroke="none">B</text>`,
+  watermark: `<rect x="2.5" y="4" width="19" height="16" rx="2" fill="${L}" stroke="${S}"/><path d="M12 7.4c2.9 3.3 4.2 5 4.2 7a4.2 4.2 0 0 1-8.4 0c0-2 1.3-3.7 4.2-7z" fill="${S}" stroke="none"/><path d="M10.2 14.6a1.9 1.9 0 0 0 1.4 1.9" fill="none" stroke="${W}"/>`,
+  encoder: `<rect x="1.5" y="4" width="9" height="16" rx="1.5" fill="${L}" stroke="${S}"/><rect x="4.3" y="7" width="3.4" height="10" rx=".6" fill="${W}" stroke="${S}"/><path d="M2.9 6.5h.9M2.9 10.5h.9M2.9 14.5h.9M8.2 6.5h.9M8.2 10.5h.9M8.2 14.5h.9" stroke="${S}"/><path d="M12 12h3.5M14 10l2 2-2 2" fill="none" stroke="${S}"/><rect x="17.6" y="6.2" width="2.4" height="2.8" rx=".5" fill="${S}" stroke="${S}"/><rect x="20.4" y="6.2" width="2.4" height="2.8" rx=".5" fill="${W}" stroke="${S}"/><rect x="17.6" y="10.6" width="2.4" height="2.8" rx=".5" fill="${W}" stroke="${S}"/><rect x="20.4" y="10.6" width="2.4" height="2.8" rx=".5" fill="${S}" stroke="${S}"/><rect x="17.6" y="15" width="2.4" height="2.8" rx=".5" fill="${S}" stroke="${S}"/><rect x="20.4" y="15" width="2.4" height="2.8" rx=".5" fill="${S}" stroke="${S}"/>`,
   database: `<path d="M4 6v12c0 1.7 3.6 3 8 3s8-1.3 8-3V6" fill="${L}" stroke="${S}"/><ellipse cx="12" cy="6" rx="8" ry="3" fill="${L}" stroke="${S}"/><path d="M4 12c0 1.7 3.6 3 8 3s8-1.3 8-3" fill="none" stroke="${S}"/>`,
 });
 // Thinner line: the chips are small even at full box size.