Skip to content

Releases: dkdev24/pele-animate

0.15.0

Choose a tag to compare

@dkdev24 dkdev24 released this 24 Oct 10:14

Added

  • prepare(source): pads icon-node labels narrower than h so Pele's layout box is as wide as the drawn icon. Without it, edge ends and arrowheads land under the icon. Use mount(el, prepare(src), { icons }).
  • Website: an icon browser at /icons/ (search by name and tag, category chips, stroke-width slider, click to copy an @{ icon } snippet and the import line) and /icons.json ({ version, icons: [{ name, category, tags }] }) for agents.

Changed

  • README: badges, links to the website and docs, a hero animation, generic comparison examples (client, API, auth server), and icon examples shown as source text because GitHub's Mermaid renderer cannot draw them.

0.14.0

Choose a tag to compare

@dkdev24 dkdev24 released this 24 Oct 09:23

Types, documentation and agent skills. No breaking changes.

Added

  • TypeScript types (types/), wired through exports.
  • Documentation in docs/ (16 pages), shipped in the npm package; the README is now a short quickstart that links to it.
  • Agent skills in skills/, shipped in the npm package: pele-animate (install, mount, icons, step order, theme, verify in a browser, with a verify.js probe) and diagram-step-order.
  • pnpm test renders every Mermaid example in the docs, skills and README with Pele and checks icon names.

Changed

  • README is a short quickstart that describes the package as step order, step-by-step playback and icons (not a theme package).
  • The package description on npm says the same.

0.13.0

Choose a tag to compare

@dkdev24 dkdev24 released this 24 Oct 06:51

Tabler icon packs, and the illustrated glyphs move to a doverunner- namespace. Two breaking renames: see Changed.

Changed

  • Breaking: every illustrated glyph is renamed doverunner-<name> (player → doverunner-player, lock → doverunner-lock, bits-a → doverunner-bits-a, and so on, 20 in all) so the plain names belong to the Tabler packs. Update @{ icon: "..." } in your sources.
  • Breaking: the seven glyphs that lived in pele-animate/glyphs moved into pele-animate/preset-doverunner; /glyphs is now only the registry (icons, registerGlyphs, registerTabler). Import the preset to get any doverunner-* glyph.

Added

  • icons() returns a neutral rounded square for unregistered names, instead of Pele's blank icon slot.
  • Tabler Icons packs: pele-animate/tabler/<category> (4,368 outline icons in 36 categories, from Tabler Icons 3.49.0, MIT). Stroke width follows the --pa-stroke CSS variable. registerTabler(pack, strokeWidth) in /glyphs; scripts/build-tabler.mjs regenerates the packs; license in THIRD-PARTY-NOTICES.md.

0.12.0

Choose a tag to compare

@dkdev24 dkdev24 released this 24 Oct 04:12

[0.12.0] - 2026-10-24

Edge pins for step order, a step-order review skill, and tidier step controls.

Added

  • Edge pins: %% pa: 3=A>B pins the edge from A to B to step 3, so a reply between two visible nodes can play on its own step
    (the intro timing and step mode both follow it).
  • svg.paSteps is documented: the steps animate() builds, one array per step.
  • A diagram-step-order agent skill (.claude/skills/, with a steps.js probe) for reviewing and fixing step order against the page text. It is in the repo, not in the npm package.

Fixed

  • Step controls: the icons are SVG, so previous, play/pause, next and close line up vertically (text glyphs sat at different heights), and
    host-page sibling margins no longer push buttons down. Previous/next use aria-disabled instead of disabled, so hovering them at
    the first or last step shows their own tooltip rather than the container's.

0.11.0

Choose a tag to compare

@dkdev24 dkdev24 released this 24 Oct 02:04

[0.11.0] - 2026-10-24

Step-by-step playback.

Added

  • Step-by-step playback: clicking a diagram (or pressing Enter) enters step mode with previous / play-pause / next controls.
    Each BFS level (flowcharts) or message (sequence diagrams) is one step. Keys: Space play/pause, ←/→ step, Esc leave.

Changed

  • README: Mermaid vs Pele vs pele-animate comparison with animated GIFs (examples/, regenerate with examples/capture.sh).
  • Step controls have their own tooltips; the ✕ button exits step mode instead of restarting it.
  • watch() click now enters step mode instead of replaying the intro. Pass { controls: false } as the third argument for the old click-to-replay.