pele-animate 0.13.0 → 0.15.0

package/skills/pele-animate/references/categories.md

@@ -0,0 +1,42 @@
+# Tabler categories (generated by scripts/build-tabler.mjs; Tabler Icons 3.49.0, MIT)
+
+Import `pele-animate/tabler/<category>`. Names below are a sample; the full list is the object keys in `node_modules/pele-animate/tabler/<category>.js`.
+
+| Category | Icons | Sample names |
+|---|---|---|
+| `system` | 784 | ad-circle-off, calendar-exclamation, dental-broken, filter-question, loader-2, pointer-cancel, shield-cog, tip-jar-euro |
+| `devices` | 363 | access-point-off, browser-off, device-desktop-question, device-ipad-horizontal-cog, device-mobile-pin, device-usb, devices-star, power |
+| `design` | 350 | ad-2, bounce-left, color-picker-off, droplet-star, inner-shadow-top-right, layout-grid, pencil-minus, sparkles-2-off |
+| `arrows` | 333 | arrow-autofit-content, arrow-big-up, arrow-merge-alt-right, arrow-sharp-turn-right, arrows-move-vertical, chevrons-down, corner-up-left-double, square-chevrons-left |
+| `map` | 263 | air-traffic-control, flag-pause, location-pin, map-pin-down, medical-cross, pennant-2, sign-left, world-heart |
+| `document` | 209 | archive-off, clipboard-copy, file-cv, file-orientation, file-type-csv, file-zip, folder-stats, receipt-off |
+| `text` | 194 | a-b-2, align-right-2, baseline-density-medium, copy-x, italic-off, overline, sort-ascending, text-regex-plus |
+| `shapes` | 187 | border-corner-ios, circle-minus-2, cylinder-off, heart-plus, hexagonal-prism, pentagon-off, sphere-plus, square-rounded-minus |
+| `media` | 160 | album-off, camera-plus, headset-off, music-cog, photo-cancel, photo-spark, playlist, rewind-forward-50 |
+| `e-commerce` | 155 | backpack-off, basket-star, cash-plus, credit-card, package, shopping-bag-exclamation, shopping-cart-pause, tags-off |
+| `communication` | 121 | address-book-off, mail-down, mail-up, message-2-off, message-check, message-circle-search, message-minus, messages-off |
+| `food` | 96 | apple, bowl, carrot-off, cup, glass-off, lollipop-off, milkshake, salad |
+| `buildings` | 95 | armchair-2-off, building-bridge, building-factory-2, building-stadium, home-2, home-hand, home-share, podium |
+| `vehicles` | 90 | aerial-lift, camper, car-off, engine, motorbike, sailboat-off, steering-wheel, wheelchair |
+| `math` | 88 | abacus-off, decimal, math-1-divide-3, math-integral, math-sin, math-xy, parentheses-off, sum |
+| `health` | 87 | accessible-off, cane, dna-2, eye-table, flask-2, hospital-circle, pill-off, stethoscope |
+| `sport` | 76 | acrobatic, barbell-off, cliff-jumping, hula-hoop, olympics, rugby, soccer-field, trekking |
+| `currencies` | 76 | currency-afghani, currency-dollar-canadian, currency-euro, currency-krone-danish, currency-nano, currency-riyal, currency-tether, taiwan-dollar |
+| `development` | 63 | a-b, api-book, auth-2fa, firewall-check, package-import, scan-traces, thinking-high, timeline-event |
+| `weather` | 61 | cloud-bolt, cloud-fog, cloud-rain, cloud, moon-off, storm, sunset-2, tornado |
+| `photography` | 52 | aperture-off, brightness-up, contrast, exposure, lens-convex, panorama-vertical-off, photo-sensor-3, shadow |
+| `mood` | 52 | mood-angry, mood-confused, mood-heart, mood-nerd, mood-sad-2, mood-silence, mood-tongue-wink-2, mood-wrrr |
+| `nature` | 50 | acorn, butterfly, clover-2, flame-off, leaf-maple, orbit-vertical, ripple-off, wind-electricity |
+| `games` | 48 | archery-arrow, dice-5, ghost, pick, play-card-5, play-card-j, poker-chip, roulette |
+| `computers` | 44 | binary-off, error-404-off, http-get-off, http-patch-off, http-que-off, network, topology-ring-3, topology-star-ring |
+| `database` | 42 | column-insert-left, database-exclamation, database-off, database, row-remove, table-export, table-plus |
+| `laundry` | 40 | bleach-chlorine, ironing-2, ironing, wash-dry-dip, wash-dry-p, wash-dryclean, wash-press, wash-temperature-5 |
+| `charts` | 39 | chart-arcs-3, chart-arrows, chart-candle, chart-donut-2, chart-dots-3, chart-infographic, chart-pie-off, chart-scatter-3d |
+| `symbols` | 37 | ankh, command-off, copyright-off, mars, peace, rating-16-plus, registered, venus |
+| `badges` | 22 | award-off, badge-3d, badge-5k, badge-ad, badge-hd, badge-tm, badge-wc, badges |
+| `electrical` | 19 | circuit-ammeter, circuit-capacitor-polarized, circuit-cell, circuit-diode, circuit-inductor, circuit-resistor, circuit-voltmeter |
+| `animals` | 18 | bat, dog, fish-hook-off, fish, paw-off, pig-off |
+| `gestures` | 17 | hand-click-off, hand-finger-left, hand-finger, hand-love-you, hand-off, hand-three-fingers |
+| `version-control` | 16 | git-branch-check, git-branch-x, git-cherry-pick, git-compare, git-merge-queue, git-pull-request-closed, git-pull-request-draft, git-pull-request-unlisted |
+| `extensions` | 13 | bmp, gif, jpg, pdf, sql, toml, zip |
+| `logic` | 8 | logic-and, logic-buffer, logic-nand, logic-nor, logic-not, logic-or, logic-xnor, logic-xor |

package/skills/pele-animate/verify.js

@@ -0,0 +1,14 @@
+// Evaluate in the page (e.g. `agent-browser eval "$(cat verify.js)"` or Playwright page.evaluate): did pele-animate render?
+// Expect: diagrams = how many you added, every steps entry > 0, emptyIcons = [], and no name in `fallbackIcons` you meant to be real.
+(() => {
+  const svgs = [...document.querySelectorAll('.pa-scene svg.pele')];
+  const icons = [...document.querySelectorAll('.pa-scene svg.pele-icon[data-icon]')];
+  // An unregistered name renders pele-animate's neutral rounded square: one <rect x="4" y="4" ...> and nothing else.
+  const fallback = (i) => /^<g[^>]*><rect x="4" y="4" width="16" height="16" rx="4"(\/>|><\/rect>)<\/g>$/.test(i.innerHTML.trim());
+  return JSON.stringify({
+    diagrams: svgs.length,
+    steps: svgs.map((s) => s.paSteps?.length ?? 0),
+    emptyIcons: icons.filter((i) => !i.innerHTML.trim()).map((i) => i.dataset.icon),
+    fallbackIcons: icons.filter(fallback).map((i) => i.dataset.icon),
+  });
+})()

package/types/glyphs.d.ts

@@ -0,0 +1,13 @@
+/** Theme colors the illustrated glyphs use: CSS variables with fallbacks. */
+export const S: string;
+export const L: string;
+export const W: string;
+
+/** Register glyphs: `{ name: '<inner markup of a 24x24 svg>' }`. Default stroke width 1.1. */
+export function registerGlyphs(pack: Record<string, string>, strokeWidth?: number): void;
+
+/** Register Tabler-style outline icons; stroke width follows the `--pa-stroke` CSS variable (fallback `strokeWidth`, default 1.5). */
+export function registerTabler(pack: Record<string, string>, strokeWidth?: number): void;
+
+/** Pele `icons` resolver. Unknown names return a neutral rounded square. */
+export function icons(name: string): string;

package/types/index.d.ts

@@ -0,0 +1,35 @@
+export interface AnimateOptions {
+  /** Element that triggers the hover token animation. Default: the svg itself. */
+  hover?: Element;
+  /** The Mermaid source, read for `%% pa:` pins. */
+  source?: string;
+}
+
+export interface WatchOptions {
+  /** `false` keeps the old click-to-replay instead of step mode. Default `true`. */
+  controls?: boolean;
+}
+
+/** One step: the elements that appear and, for each, the parts that pop in. */
+export type PaStep = Array<[element: Element, parts: Element[]]>;
+
+declare global {
+  interface SVGSVGElement {
+    /** Set by `animate()`: one array per step. */
+    paSteps?: PaStep[];
+  }
+}
+
+/** Read the `%% pa:` pins: node id, or `'X>Y'` for an edge, to a 0-based step. */
+export function parseOrder(source?: string): Map<string, number>;
+
+/** Animate one rendered Pele svg (flowchart or sequence diagram). */
+export function animate(svg: SVGSVGElement, options?: AnimateOptions): void;
+
+/** Animate every svg Pele renders into `container`, re-applying after Pele re-lays-out on resize. */
+/** Pad icon-node labels narrower than `h` so Pele's layout box is at least as wide as the drawn icon. Use as `mount(el, prepare(src), { icons })`; pass the original `src` to `watch()`. */
+export function prepare(source?: string): string;
+export function watch(container: HTMLElement, source?: string, options?: WatchOptions): void;
+
+/** Play the intro again. */
+export function replay(svg: SVGSVGElement | null | undefined): void;

package/types/preset-doverunner.d.ts

@@ -0,0 +1 @@
+export {};

package/types/tabler-pack.d.ts

@@ -0,0 +1,2 @@
+/** The icons of one Tabler category: name to inner svg markup. Importing the module also registers them. */
+export const pack: Record<string, string>;