morphicons 1.5.0 → 1.7.0

package/README.md

@@ -43,7 +43,7 @@ The usual icon morphs either interpolate raw coordinates (shapes shrink and shea
 bun add morphicons        # or npm install / pnpm add
 ```
 
-ESM only. `react` (>= 18), `vue` (>= 3.3), `svelte` (>= 5) and `react-native` (>= 0.71) + `react-native-svg` (>= 14) are optional peers — only needed for `morphicons/react`, `morphicons/vue`, `morphicons/svelte` and `morphicons/react-native`.
+ESM only. `react` (>= 18), `vue` (>= 3.3), `svelte` (>= 5) and `react-native` (>= 0.71) + `react-native-svg` (>= 14) are optional peers — only needed for `morphicons/react`, `morphicons/vue`, `morphicons/svelte` and `morphicons/react-native`. `morphicons/element` (the `<morph-icon>` custom element) and `morphicons/astro` (its SSR shell) need no peer at all — Astro compiles the shell itself, like every `.astro` component shipped as source.
 
 **Icons come from a data package, not a component package.** morphicons consumes icon *data* (an `IconNode` or a raw `d` string). For Lucide that means the vanilla `lucide` package: `import { Menu, X } from "lucide"` gives you `IconNode`s, which is why every snippet below says "data, not components". The framework packages (`lucide-react`, `lucide-vue-next`, `@lucide/svelte`, `lucide-react-native`) export components, and `MorphIcon` can't consume those. If your app already renders static icons with one of them, keep it: the data and component packages coexist by design and both tree-shake cleanly, so you only pay for the icons you import. Just keep their versions aligned, so the icons you morph match the ones you render statically.
 
@@ -67,7 +67,7 @@ ref.current?.morphTo(Check); // animates
 ref.current?.set(X);         // jumps without animating
 ```
 
-Drop-in replacement for lucide-react (the props surface: the `icon` prop takes Lucide *data*, not lucide-react components, see [Install](#install)): `size`, `strokeWidth`, `absoluteStrokeWidth`, `color`, `className` and the rest of the `<svg>` props pass straight through. Correct accessibility by default: `aria-hidden` unless you pass `label` (→ `role="img"` + `<title>`). Clean SSR: the server emits the exact static SVG (zero flash, zero layout shift); the runtime is born on hydration. Morphs play regardless of the OS reduce-motion setting by default; opt into honoring it with `reducedMotion="user"` (see [Reduced motion](#reduced-motion-all-four-bindings)).
+Drop-in replacement for lucide-react (the props surface: the `icon` prop takes Lucide *data*, not lucide-react components, see [Install](#install)): `size`, `strokeWidth`, `absoluteStrokeWidth`, `color`, `className` and the rest of the `<svg>` props pass straight through. Correct accessibility by default: `aria-hidden` unless you pass `label` (→ `role="img"` + `<title>`). Clean SSR: the server emits the exact static SVG (zero flash, zero layout shift); the runtime is born on hydration. Morphs play regardless of the OS reduce-motion setting by default; opt into honoring it with `reducedMotion="user"` (see [Reduced motion](#reduced-motion-all-five-bindings)).
 
 ### Vue — same three modes
 
@@ -143,15 +143,54 @@ ref.current?.set(X);         // jumps without animating
 
 The DOM-free core beyond the browser: the dom driver is reused verbatim as the engine (React Native has a global `requestAnimationFrame`, and `PathEl` is structural), so the whole platform difference is a shim that forwards the per-frame `d` write to `Path.setNativeProps` of react-native-svg — outside the React render, exactly like the web mutation. Same surface as the React binding (`size`, `strokeWidth`, `absoluteStrokeWidth`, `color`, plus the native `Svg` props: `testID`, touch handlers…), same accessibility defaults (`aria-hidden` unless you pass `label` → `role="img"` + `aria-label`). With `reducedMotion="user"`, the OS setting comes from `AccessibilityInfo` (best-effort: the query is async; a `reduceMotionChanged` subscription keeps it exact from then on). Requires Metro with package `exports` resolution — default since React Native 0.79; on older versions enable `unstable_enablePackageExports`.
 
-### Lifecycle contract (all four bindings)
+### Astro — same three modes, zero framework runtime
 
-The four components share one contract, pinned by mirrored client-mount tests:
+```astro
+---
+import MorphIcon from "morphicons/astro";
+import { Menu } from "lucide"; // data, not components
+---
+
+<MorphIcon icon={Menu} label="Menu" id="menu-icon" />
+
+<script>
+  import { X } from "lucide";
+  import type { MorphIconElement } from "morphicons/element";
+  // Post-load control happens ON the element (it upgrades to <morph-icon>):
+  const el = document.querySelector<MorphIconElement>("#menu-icon")!;
+  el.morphTo(X);             // 3. imperative: morphTo / set, like a ref
+  // el.icon = X;            // 1. uncontrolled: assigning the property animates
+  // el.from = Menu; el.to = X; el.progress = 0.5;  // 2. controlled: frozen seek
+</script>
+```
+
+The server emits the exact static SVG with the pure core (zero flash, zero layout shift, works with static output and any SSR adapter) and hydration is just custom-element upgrade: the shell defines `<morph-icon>` once per page and the element adopts the server markup verbatim — zero `d` writes during upgrade, pinned by instrumented tests. No framework runtime ships — the only client bytes are `morphicons/element`. A controlled pair of `d` strings survives upgrade as attributes, so assigning `progress` from a script scrubs the server-frozen pair; `IconNode` pairs are server-only (attributes can't carry them) — control those by assigning the element's properties. Same presentation props as every binding (`size`, `strokeWidth`, `absoluteStrokeWidth`, `color`, `label`); rest attrs (`id`, `class`, `data-*`…) land on the `<morph-icon>` element, because grabbing it from a client script is the interaction model here. React/Vue/Svelte islands keep working for icons that live inside one — this entry is for the pages that don't need an island at all.
+
+### Web component — `<morph-icon>` anywhere HTML reaches
+
+The Astro shell is a thin SSR layer over `morphicons/element`, which stands on its own in plain HTML, HTMX, Rails, or any server-rendered stack:
+
+```html
+<script type="module">
+  import { defineMorphIcon } from "morphicons/element";
+  defineMorphIcon(); // idempotent; custom tag: defineMorphIcon("my-icon")
+</script>
+
+<!-- attributes take d strings; properties take the full IconInput -->
+<morph-icon icon="M4 6h16M4 12h16M4 18h16" label="Menu"></morph-icon>
+```
+
+The element is the fifth binding, not a second implementation: it wires attributes and properties to the same shared controller, passes the same mirrored mount suite, and exposes the same three modes — `icon` (uncontrolled), `from`/`to`/`progress` (controlled), `morphTo`/`set` methods (imperative, the element IS the handle). Attributes carry strings (`d` paths, preset names); properties accept everything (`IconNode`s, custom springs). If the element already contains a server-rendered `<svg><path>`, it adopts it verbatim and treats its `d` as the at-rest icon — SSR bytes are never rewritten at rest.
+
+### Lifecycle contract (all five bindings)
+
+The five components share one contract, pinned by mirrored client-mount tests:
 
 - **Lazy driver.** Mounting without any icon is fine — SSR emits `<path d="">` and the driver is born with the FIRST icon that shows up, whether a late `icon` prop (data that loads async), a late `from`/`to` pair, or an imperative `set`/`morphTo`. The first icon paints without animating; `morphTo` before the driver exists behaves as `set` (there is nothing to fly from).
 - **Controlled wins.** While `from` AND `to` are both present, the pair owns the path: `icon` changes are ignored, no spring fires. Drop the pair and the current `icon` takes over (animated). Mixing the modes is not an error — the precedence is just explicit.
 - **Clean re-entry.** Any exit from controlled mode (an imperative call or an icon takeover) invalidates the frozen pair, so returning to the same `from`/`to` re-bases on `from` and renders exactly like a clean mount at that `progress`.
 
-### Reduced motion (all four bindings)
+### Reduced motion (all five bindings)
 
 Icon morphs are small, short, communicative micro-transitions: the kind of motion the reduce-motion guidance considers generally acceptable, unlike parallax or full-screen movement. Auto-degrading them made the library look broken to every user with the OS setting on, so since 1.4.2 they play by default and the policy is an explicit prop (the same default Motion, formerly Framer Motion, ships):
 
@@ -230,6 +269,44 @@ It *is* `createMorph` — only the write target differs — so springs, reduced
 
 **Cost.** A live inline `<path>` gets the cheapest possible write; a mask element additionally makes the browser re-rasterize the mask and repaint the masked box every frame (main thread, no compositor-only path). Great for toggles and short lists (menu↔close, chevrons, play↔pause); for icon-heavy views, the inline-SVG bindings remain the leanest option — same styling, one less indirection.
 
+### `canvasTarget` — 2D canvas out
+
+For surfaces where the DOM never enters: **the icon stops being a document node and becomes pixels you own.** The platform does the heavy lifting — `Path2D` parses `d` strings natively — so every frame is one `stroke(new Path2D(d))` on whatever you hand it: an `HTMLCanvasElement`, an `OffscreenCanvas`, or a bare 2D context (what a worker, or a host that already owns the context, has in hand).
+
+```ts
+import { canvasTarget } from "morphicons/adapters";
+import { createMorph } from "morphicons/dom";
+
+const m = createMorph(canvasTarget(canvas), MENU);
+m.morphTo(X, "snappy");
+// the canvas is a live texture: gl.texImage2D(gl.TEXTURE_2D, ..., canvas)
+```
+
+Once the icon is pixels, everything the SVG model can't reach opens up:
+
+- **Canvas-first apps** with no DOM to put an icon in: Konva, Fabric.js, PixiJS, games, chart draws, tldraw-style editors.
+- **`OffscreenCanvas` + workers**: the whole morph runs off the main thread.
+- **Native export**: `toBlob()` for PNG sprites, `captureStream()` + MediaRecorder for the morph as a video asset.
+- **An animated favicon**: draw, `toDataURL()`, swap the `<link>`.
+- **HUDs over video or fullscreen surfaces**: same buffer as the player or the game, no DOM layer on top.
+- **WebGL textures**: the canvas is a ready `texImage2D` source — shader effects over live icons are one branch of this list, not its headline.
+- Down the road, the same gesture (`PathEl` → `Path2D`) is `PathEl` → `SkPath`: a react-native-skia / CanvasKit target would consume the identical contract.
+
+It *is* `createMorph` — springs, mid-flight interruption and reduced motion behave identically. The target maps the icon grid onto whatever backing store it finds, per write: min-side scale, centered (the canvas equivalent of `preserveAspectRatio="xMidYMid meet"`), so non-square canvases letterbox and devicePixelRatio is simply whatever you sized the backing store to. Color cascades: the `color` option wins; without it, a CSS-styled canvas contributes its computed `color` (the moral equivalent of `currentColor`, which canvas lacks — read lazily, once); where CSS can't reach (OffscreenCanvas, workers) the context's current `strokeStyle` stands, which is the idiomatic canvas contract. `strokeWidth` and `viewBox` mirror the other adapters; `clear: false` skips the per-frame clear for manual compositing and trails.
+
+**Hosts with their own render loop.** Don't hand a Konva/Chart.js/game context to a morph — the driver writes on its own rAF and the two clocks fight over the frame. Give the icon a small dedicated canvas and composite it into the scene (`drawImage`, `Konva.Image`, a texture upload), with `onWrite` as the dirty signal:
+
+```ts
+const icon = new OffscreenCanvas(64, 64);
+const target = canvasTarget(icon, {
+  color: "#e8eaed",                      // CSS can't reach an OffscreenCanvas
+  onWrite: () => { textureDirty = true } // re-upload / blit on the host's next frame
+});
+const m = createMorph(target, PLAY);
+```
+
+**Cost.** The cheapest target of the three: no layout, no DOM paint — one native path parse and one stroke rasterization per frame, on a canvas that is typically small. 0.48 KB gzip standalone, the lightest adapter yet.
+
 ## Icon library compatibility
 
 morphicons has no per-library adapters — any icon set that meets these requirements works out of the box:
@@ -257,6 +334,7 @@ This also covers the [shadcn registry](https://www.shadcn.io/icons), which re-pu
 ```
 ┌─────────────────────────────────────────────┐
 │  bindings   react · vue · svelte · rn      │  thin: ref + createMorph
+│             · element (+ astro SSR shell)   │
 ├─────────────────────────────────────────────┤
 │  drivers    dom (setAttribute + rAF)        │  singleton scheduler
 ├─────────────────────────────────────────────┤
@@ -267,7 +345,7 @@ This also covers the [shadcn registry](https://www.shadcn.io/icons), which re-pu
 └─────────────────────────────────────────────┘
 ```
 
-The hard rule: **the core never touches the DOM**. Pure functions consume icon data and produce `d` strings. Direct consequence: the React Native binding over `react-native-svg` is just another adapter, not a rewrite — it reuses the dom driver verbatim through a `setNativeProps` shim. One package with subpath exports (`.` core, `./dom`, `./react`, `./react-native`, `./vue`, `./svelte`), ESM only, `sideEffects: false`.
+The hard rule: **the core never touches the DOM**. Pure functions consume icon data and produce `d` strings. Direct consequence: the React Native binding over `react-native-svg` is just another adapter, not a rewrite — it reuses the dom driver verbatim through a `setNativeProps` shim. One package with subpath exports (`.` core, `./dom`, `./react`, `./react-native`, `./vue`, `./svelte`, `./element`, `./astro`), ESM only, `sideEffects: false`.
 
 The plan is the central artifact:
 
@@ -407,14 +485,17 @@ CI budget (size-limit, gzip) as an anti-regression tripwire — gates carry ~10%
 |---|---|---|
 | `morphicons` (core) | 6.60 KB | 7 KB |
 | `morphicons/dom` (core + driver) | 7.12 KB | 7.5 KB |
-| `morphicons/adapters` (aggregate — grows by design) | 4.03 KB | 4.4 KB |
+| `morphicons/adapters` (aggregate — grows by design) | 4.32 KB | 4.8 KB |
 | `adapters` › `{ svgToIcon }` alone | 3.34 KB | 3.7 KB |
 | `adapters` › `{ maskTarget }` alone | 0.70 KB | 0.8 KB |
+| `adapters` › `{ canvasTarget }` alone | 0.48 KB | 0.55 KB |
 | `morphicons/react` (all, react external) | 8.01 KB | 8.5 KB |
 | `morphicons/react-native` (all, react/rn/rnsvg external) | 8.37 KB | 9 KB |
 | `morphicons/vue` (all, vue external) | 8.04 KB | 8.5 KB |
 | `morphicons/svelte` TS half (all, svelte external) | 7.66 KB | 8 KB |
 | `MorphIcon.svelte` (ships as source, consumer-compiled) | 1.26 KB | 1.4 KB |
+| `morphicons/element` (all, `<morph-icon>`) | 8.86 KB | 9.5 KB |
+| `MorphIcon.astro` (ships as source, consumer-compiled) | 1.58 KB | 1.75 KB |
 
 The adapters entry carries **two kinds of gate**: the aggregate (allowed to grow as adapters are added) and one per named export, which pins each adapter as independently tree-shakeable — if two adapters ever couple, the per-export gate trips in CI. Standalone, `{ svgToIcon }` measures 3.34 KB because auto-fit drags the core's lowering machinery; an app that already imports the core shares that chunk and pays ~0.4 KB incremental.
 

package/dist/MorphIcon.astro

@@ -0,0 +1,109 @@
+---
+/* Astro binding: SSR shell over the <morph-icon> custom element. The server
+   emits the exact static SVG with the pure core (zero flash, zero layout
+   shift, no framework runtime) and the element adopts it verbatim on
+   upgrade; the processed <script> below defines the element once per page,
+   so hydration IS custom-element upgrade. Post-load control (icon swaps,
+   controlled scrubbing, imperative calls) happens on the element itself:
+   grab it from any client script and assign properties or call morphTo/set.
+   Thin shell on purpose, like MorphIcon.svelte: all logic lives in
+   typechecked modules; this file only wires props to markup. */
+import type {
+  IconInput,
+  MorphOptions,
+  ReducedMotionMode,
+  SpringPreset,
+} from "./element.js";
+import { computeInitialD } from "./element.js";
+
+interface Props {
+  /** Uncontrolled mode: the icon at rest (IconNode or `d` string). */
+  icon?: IconInput;
+  /** Controlled mode: source endpoint of the pair (server-side freeze). */
+  from?: IconInput;
+  /** Controlled mode: target endpoint of the pair (server-side freeze). */
+  to?: IconInput;
+  /** Controlled mode: 0..1 progress of the frozen morph. */
+  progress?: number;
+  /** Physics for client-side morphs: preset name or custom spring (presets
+   *  ride the attribute; custom springs need a client script). */
+  spring?: SpringPreset | MorphOptions;
+  reducedMotion?: ReducedMotionMode;
+  size?: number | string;
+  color?: string;
+  strokeWidth?: number | string;
+  /** Like lucide: stroke width does not scale with `size`. */
+  absoluteStrokeWidth?: boolean;
+  /** Accessibility: with label → role="img" + <title>; without → aria-hidden. */
+  label?: string;
+}
+
+const {
+  icon,
+  from,
+  to,
+  progress,
+  spring,
+  reducedMotion,
+  size = 24,
+  color = "currentColor",
+  strokeWidth = 2,
+  absoluteStrokeWidth = false,
+  label,
+  ...rest
+} = Astro.props;
+
+const initialD = computeInitialD({ icon, from, to, progress });
+const sw = absoluteStrokeWidth ? (Number(strokeWidth) * 24) / Number(size) : strokeWidth;
+
+/* String pairs ride attributes so `progress` keeps scrubbing the frozen
+   pair after upgrade. BOTH or none — half a mixed pair would mount from the
+   lone endpoint (docs/adr/0003). IconNode pairs stay server-only. */
+const stringPair = typeof from === "string" && typeof to === "string";
+---
+
+{/* Rest props land on <morph-icon>, not the svg: grabbing the element by
+    id/class/data-* from a client script IS the interaction model here. */}
+<morph-icon
+  icon={typeof icon === "string" ? icon : undefined}
+  from={stringPair ? from : undefined}
+  to={stringPair ? to : undefined}
+  progress={progress}
+  spring={typeof spring === "string" ? spring : undefined}
+  reduced-motion={reducedMotion}
+  size={String(size)}
+  color={color}
+  stroke-width={String(strokeWidth)}
+  absolute-stroke-width={absoluteStrokeWidth ? "" : undefined}
+  label={label}
+  {...rest}
+>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke={color}
+    stroke-width={sw}
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    role={label ? "img" : undefined}
+    aria-hidden={label ? undefined : "true"}
+  >
+    {label && <title>{label}</title>}
+    <path d={initialD}></path>
+  </svg>
+</morph-icon>
+
+<style>
+  /* Layout-neutral wrapper from the first paint, before any JS runs. */
+  morph-icon {
+    display: contents;
+  }
+</style>
+
+<script>
+  import { defineMorphIcon } from "./element.js";
+  defineMorphIcon();
+</script>

package/dist/adapters.d.ts

@@ -1,5 +1,49 @@
 import { n as IconInput } from "./types-JAF3s76Y.js";
 import { i as PathEl } from "./index-DXp5b6BU.js";
+//#region src/adapters/canvas.d.ts
+/** The 2D context surface the target drives — structural, so a real
+ *  CanvasRenderingContext2D, an OffscreenCanvasRenderingContext2D or a test
+ *  fake all satisfy it. Only what canvasTarget actually touches. */
+interface Canvas2DContext {
+  canvas: {
+    width: number;
+    height: number;
+  };
+  lineWidth: number;
+  lineCap: string;
+  lineJoin: string;
+  strokeStyle: string | object;
+  setTransform(a: number, b: number, c: number, d: number, e: number, f: number): void;
+  clearRect(x: number, y: number, w: number, h: number): void;
+  stroke(path: object): void;
+}
+/** Anything that can hand out a 2D context (an HTMLCanvasElement, an
+ *  OffscreenCanvas, or a fake in tests). */
+interface CanvasSurface {
+  getContext(contextId: "2d"): Canvas2DContext | null;
+}
+interface CanvasTargetOptions {
+  /** Grid the icon's coordinates live on (Lucide/Iconify default: "0 0 24 24").
+   *  Used to map the geometry onto the backing store. */
+  viewBox?: string;
+  /** Stroke width in grid units (Lucide's default is 2). */
+  strokeWidth?: number;
+  /** Stroke color. Defaults to the canvas' computed CSS color when it is a
+   *  styled element; otherwise the context's current `strokeStyle` stands. */
+  color?: string;
+  /** Clear the canvas before each frame. Turn off for manual compositing or
+   *  trails — every frame then draws on top of the last. Default true. */
+  clear?: boolean;
+  /** Called after every drawn frame — the texture consumer's dirty signal
+   *  (e.g. re-upload the canvas with `texImage2D`, or blit it into a scene). */
+  onWrite?: () => void;
+}
+/** Adapts a canvas (or its 2D context) into a `PathEl` whose writes stroke
+ *  the morph's geometry onto the canvas, so
+ *  `createMorph(canvasTarget(canvas), icon)` animates pixels instead of an
+ *  inline `<svg><path>`. */
+declare function canvasTarget(surface: CanvasSurface | Canvas2DContext, opts?: CanvasTargetOptions): PathEl;
+//#endregion
 //#region src/adapters/mask.d.ts
 /** The subset of an element's inline style the mask target writes — structural
  *  so a real HTMLElement's `.style` satisfies it (and a test fake supplies
@@ -52,4 +96,4 @@ declare function maskTarget(el: MaskEl, opts?: MaskTargetOptions): MaskPathEl;
  *  an IconNode. */
 declare function svgToIcon(markup: string): IconInput;
 //#endregion
-export { type MaskEl, type MaskPathEl, type MaskStyle, type MaskTargetOptions, maskTarget, svgToIcon };
+export { type Canvas2DContext, type CanvasSurface, type CanvasTargetOptions, type MaskEl, type MaskPathEl, type MaskStyle, type MaskTargetOptions, canvasTarget, maskTarget, svgToIcon };

package/dist/adapters.js

@@ -1,4 +1,46 @@
 import { t as fitIcon } from "./normalize-CYnN3Npw.js";
+//#region src/adapters/canvas.ts
+/** Adapts a canvas (or its 2D context) into a `PathEl` whose writes stroke
+*  the morph's geometry onto the canvas, so
+*  `createMorph(canvasTarget(canvas), icon)` animates pixels instead of an
+*  inline `<svg><path>`. */
+function canvasTarget(surface, opts = {}) {
+	if (typeof Path2D === "undefined") throw new Error("morphicons: canvasTarget needs Path2D (browser or worker)");
+	const ctx = "getContext" in surface ? surface.getContext("2d") : surface;
+	if (!ctx) throw new Error("morphicons: canvasTarget needs a 2D context");
+	const vb = (opts.viewBox ?? "0 0 24 24").trim().split(/[\s,]+/).map(Number);
+	const [mx, my, vw, vh] = [
+		vb[0] || 0,
+		vb[1] || 0,
+		vb[2] || 24,
+		vb[3] || vb[2] || 24
+	];
+	const stroke = opts.strokeWidth ?? 2;
+	const clear = opts.clear !== false;
+	let color = opts.color;
+	let cssPending = color === void 0 && "style" in ctx.canvas;
+	return { setAttribute(name, value) {
+		if (name !== "d") return;
+		if (cssPending) {
+			cssPending = false;
+			color = getComputedStyle?.(ctx.canvas).color || void 0;
+		}
+		const c = ctx.canvas;
+		const s = Math.min(c.width / vw, c.height / vh);
+		if (clear) {
+			ctx.setTransform(1, 0, 0, 1, 0, 0);
+			ctx.clearRect(0, 0, c.width, c.height);
+		}
+		ctx.setTransform(s, 0, 0, s, (c.width - vw * s) / 2 - mx * s, (c.height - vh * s) / 2 - my * s);
+		ctx.lineWidth = stroke;
+		ctx.lineCap = "round";
+		ctx.lineJoin = "round";
+		if (color !== void 0) ctx.strokeStyle = color;
+		ctx.stroke(new Path2D(value));
+		opts.onWrite?.();
+	} };
+}
+//#endregion
 //#region src/adapters/mask.ts
 const SVG_NS = "http://www.w3.org/2000/svg";
 let seq = 0;
@@ -136,4 +178,4 @@ function svgToIcon(markup) {
 	return vb ? fitIcon(node, vb[1]) : node;
 }
 //#endregion
-export { maskTarget, svgToIcon };
+export { canvasTarget, maskTarget, svgToIcon };

package/dist/astro.d.ts

@@ -0,0 +1,32 @@
+import type {
+  IconInput,
+  MorphOptions,
+  ReducedMotionMode,
+  SpringPreset,
+} from "./element.js";
+
+export interface MorphIconAstroProps {
+  icon?: IconInput;
+  from?: IconInput;
+  to?: IconInput;
+  progress?: number;
+  spring?: SpringPreset | MorphOptions;
+  reducedMotion?: ReducedMotionMode;
+  size?: number | string;
+  color?: string;
+  strokeWidth?: number | string;
+  absoluteStrokeWidth?: boolean;
+  label?: string;
+  [attr: string]: unknown;
+}
+
+/** Astro component: SSR shell over the <morph-icon> custom element. */
+declare const MorphIcon: (props: MorphIconAstroProps) => unknown;
+export default MorphIcon;
+export type {
+  IconInput,
+  IconNode,
+  MorphOptions,
+  ReducedMotionMode,
+  SpringPreset,
+} from "./element.js";

package/dist/controller-CXZuwJ_M.js

@@ -0,0 +1,152 @@
+import { a as buildPlan, c as interpPolar, o as allocOutputs, r as resampleIcon } from "./spring-CFHloqPP.js";
+import { i as serialize } from "./normalize-CYnN3Npw.js";
+import { canonicalD, createMorph } from "./dom.js";
+//#region src/dom/controller.ts
+/** Frozen shape of the from→to pair at t, using the pure core (SSR-safe).
+*  At exact endpoints returns the canonical `d` (real curves, not polyline). */
+function frozenD(from, to, t) {
+	if (t <= 0) return canonicalD(from);
+	if (t >= 1) return canonicalD(to);
+	const plan = buildPlan(resampleIcon(from), resampleIcon(to));
+	const out = allocOutputs(plan);
+	interpPolar(plan, t, out);
+	return serialize(out, plan.items.map((it) => it.closed));
+}
+/** The initial d is a constant for every binding: computed once from the
+*  mount-time props (server and client produce the same string → hydration
+*  without mismatch) and from then on only the driver mutates it outside the
+*  template. */
+function computeInitialD({ icon, from, to, progress }) {
+	if (from !== void 0 && to !== void 0) return frozenD(from, to, progress ?? 0);
+	const first = icon ?? from ?? to;
+	return first !== void 0 ? canonicalD(first) : "";
+}
+/** Per-instance driver state — the exact logic of the React/Vue bindings
+*  (mount, mode watch, controlled seek with re-basing, imperative). Takes the
+*  init-time props: they seed the watch baselines so a watcher that fires on
+*  mount (Svelte's $effect, unlike Vue's watch) is a no-op. All change
+*  detection lives HERE, under tsc — the shells only wire their reactive
+*  surface to these methods.
+*
+*  Lifecycle contract (shared verbatim by the bindings):
+*  - Lazy driver: an iconless mount keeps the element and births the driver
+*    on the FIRST icon that shows up (prop or imperative). `morphTo` with no
+*    driver behaves as `set` — there is nothing to fly from.
+*  - Controlled wins: while `from` and `to` are both present the pair owns
+*    the path and `icon` changes are ignored; dropping the pair hands the
+*    path back to `icon`.
+*  - Every exit from controlled mode (imperative call or icon takeover)
+*    invalidates the frozen pair, so returning to it re-bases on `from`. */
+function createController({ icon, from, to, progress, reducedMotion }) {
+	let el = null;
+	let dead = false;
+	let morph = null;
+	let rm = reducedMotion ?? "never";
+	let based = false;
+	let pair = null;
+	let prevIcon = icon;
+	let prevControlled = from !== void 0 && to !== void 0;
+	let prevFrom = from;
+	let prevTo = to;
+	let prevProgress = progress;
+	/** Driver birth, lazy included: the first icon to show up creates it. */
+	const ensure = (birth) => {
+		if (morph) return morph;
+		if (dead || !el) return null;
+		morph = createMorph(el, birth, { reducedMotion: rm });
+		return morph;
+	};
+	/** Controlled mode: freeze the pair at `progress` via seek (no spring). */
+	const applyPair = (from, to, progress) => {
+		const m = morph;
+		if (!m) return;
+		const t = progress ?? 0;
+		if (!pair || pair[0] !== from || pair[1] !== to) {
+			pair = [from, to];
+			based = false;
+		}
+		if (t <= 0) {
+			m.set(from);
+			based = false;
+		} else if (t >= 1) {
+			m.set(to);
+			based = false;
+		} else {
+			if (!based) {
+				m.set(from);
+				based = true;
+			}
+			m.seek(to, t);
+		}
+	};
+	return {
+		mount(mountEl, { icon, from, to, progress, reducedMotion }) {
+			el = mountEl;
+			rm = reducedMotion ?? rm;
+			const controlled = from !== void 0 && to !== void 0;
+			const initialIcon = icon ?? from ?? to;
+			if (initialIcon === void 0) return;
+			const m = createMorph(el, controlled ? from : initialIcon, { reducedMotion: rm });
+			morph = m;
+			if (controlled) {
+				pair = [from, to];
+				const t = progress ?? 0;
+				if (t <= 0) m.set(from);
+				else if (t >= 1) m.set(to);
+				else {
+					m.seek(to, t);
+					based = true;
+				}
+			}
+		},
+		destroy() {
+			dead = true;
+			el = null;
+			morph?.destroy();
+			morph = null;
+			based = false;
+			pair = null;
+		},
+		/** Prop watcher: ONE owner decides per run — the controlled pair while it
+		*  is fully present, `icon` otherwise (mount doesn't fire thanks to the
+		*  init-time baselines). */
+		watch({ icon, from, to, progress, spring, reducedMotion }) {
+			rm = reducedMotion ?? "never";
+			if (morph) morph.reducedMotion = rm;
+			const controlled = from !== void 0 && to !== void 0;
+			const left = prevControlled && !controlled;
+			const iconChanged = icon !== prevIcon;
+			const pairChanged = from !== prevFrom || to !== prevTo || progress !== prevProgress;
+			prevControlled = controlled;
+			prevIcon = icon;
+			prevFrom = from;
+			prevTo = to;
+			prevProgress = progress;
+			if (controlled) {
+				if (!pairChanged) return;
+				if (!(morph ?? ensure(from))) return;
+				applyPair(from, to, progress);
+				return;
+			}
+			if (icon === void 0 || !iconChanged && !left) return;
+			pair = null;
+			based = false;
+			if (morph) morph.morphTo(icon, spring);
+			else ensure(icon);
+		},
+		morphTo(icon, spring) {
+			pair = null;
+			based = false;
+			if (morph) morph.morphTo(icon, spring);
+			else ensure(icon);
+		},
+		set(icon) {
+			pair = null;
+			based = false;
+			if (morph) morph.set(icon);
+			else ensure(icon);
+		}
+	};
+}
+//#endregion
+export { createController as n, computeInitialD as t };

package/dist/controller-Dkruvf3Y.d.ts

@@ -0,0 +1,54 @@
+import { c as SpringPreset, n as IconInput } from "./types-JAF3s76Y.js";
+import { a as ReducedMotionMode, i as PathEl, r as MorphOptions } from "./index-DXp5b6BU.js";
+//#region src/dom/controller.d.ts
+/** Imperative surface exposed by every binding (ref / bind:this / element). */
+interface MorphHandle {
+  morphTo(icon: IconInput, spring?: SpringPreset | MorphOptions): void;
+  set(icon: IconInput): void;
+}
+/** The mode-deciding props, shared by every binding's prop surface. */
+interface MorphModeProps {
+  icon?: IconInput;
+  from?: IconInput;
+  to?: IconInput;
+  progress?: number;
+}
+interface MorphCtrlProps extends MorphModeProps {
+  reducedMotion?: ReducedMotionMode;
+}
+interface MorphWatchProps extends MorphCtrlProps {
+  spring?: SpringPreset | MorphOptions;
+}
+/** The initial d is a constant for every binding: computed once from the
+ *  mount-time props (server and client produce the same string → hydration
+ *  without mismatch) and from then on only the driver mutates it outside the
+ *  template. */
+declare function computeInitialD({ icon, from, to, progress }: MorphModeProps): string;
+/** Per-instance driver state — the exact logic of the React/Vue bindings
+ *  (mount, mode watch, controlled seek with re-basing, imperative). Takes the
+ *  init-time props: they seed the watch baselines so a watcher that fires on
+ *  mount (Svelte's $effect, unlike Vue's watch) is a no-op. All change
+ *  detection lives HERE, under tsc — the shells only wire their reactive
+ *  surface to these methods.
+ *
+ *  Lifecycle contract (shared verbatim by the bindings):
+ *  - Lazy driver: an iconless mount keeps the element and births the driver
+ *    on the FIRST icon that shows up (prop or imperative). `morphTo` with no
+ *    driver behaves as `set` — there is nothing to fly from.
+ *  - Controlled wins: while `from` and `to` are both present the pair owns
+ *    the path and `icon` changes are ignored; dropping the pair hands the
+ *    path back to `icon`.
+ *  - Every exit from controlled mode (imperative call or icon takeover)
+ *    invalidates the frozen pair, so returning to it re-bases on `from`. */
+declare function createController({ icon, from, to, progress, reducedMotion }: MorphCtrlProps): {
+  mount(mountEl: PathEl, { icon, from, to, progress, reducedMotion }: MorphCtrlProps): void;
+  destroy(): void;
+  /** Prop watcher: ONE owner decides per run — the controlled pair while it
+   *  is fully present, `icon` otherwise (mount doesn't fire thanks to the
+   *  init-time baselines). */
+  watch({ icon, from, to, progress, spring, reducedMotion }: MorphWatchProps): void;
+  morphTo(icon: IconInput, spring?: SpringPreset | MorphOptions): void;
+  set(icon: IconInput): void;
+};
+//#endregion
+export { computeInitialD as n, createController as r, MorphHandle as t };

package/dist/element.d.ts

@@ -0,0 +1,36 @@
+import { a as Sampled, c as SpringPreset, n as IconInput, r as IconNode } from "./types-JAF3s76Y.js";
+import { a as ReducedMotionMode, i as PathEl, n as Morph, r as MorphOptions } from "./index-DXp5b6BU.js";
+import { n as computeInitialD, t as MorphHandle } from "./controller-Dkruvf3Y.js";
+//#region src/element/index.d.ts
+declare const Base: typeof HTMLElement;
+declare class MorphIconElement extends Base implements MorphHandle {
+  #private;
+  static observedAttributes: string[];
+  get icon(): IconInput | undefined;
+  set icon(v: IconInput | undefined);
+  get from(): IconInput | undefined;
+  set from(v: IconInput | undefined);
+  get to(): IconInput | undefined;
+  set to(v: IconInput | undefined);
+  get progress(): number | undefined;
+  set progress(v: number | undefined);
+  get spring(): SpringPreset | MorphOptions | undefined;
+  set spring(v: SpringPreset | MorphOptions | undefined);
+  get reducedMotion(): ReducedMotionMode | undefined;
+  set reducedMotion(v: ReducedMotionMode | undefined);
+  morphTo(icon: IconInput, spring?: SpringPreset | MorphOptions): void;
+  set(icon: IconInput): void;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
+}
+/** Defines `<morph-icon>` (or a custom tag). Idempotent per tag; a no-op
+ *  without a DOM (safe to call from code that also runs during SSR). */
+declare function defineMorphIcon(tag?: string): void;
+declare global {
+  interface HTMLElementTagNameMap {
+    "morph-icon": MorphIconElement;
+  }
+}
+//#endregion
+export { type IconInput, type IconNode, type Morph, type MorphHandle, MorphIconElement, type MorphOptions, type PathEl, type ReducedMotionMode, type Sampled, type SpringPreset, computeInitialD, defineMorphIcon };

package/dist/element.js

@@ -0,0 +1,261 @@
+import { n as createController, t as computeInitialD } from "./controller-CXZuwJ_M.js";
+//#region src/element/index.ts
+const SVG_NS = "http://www.w3.org/2000/svg";
+const REACTIVE = [
+	"icon",
+	"from",
+	"to",
+	"progress",
+	"spring",
+	"reducedMotion"
+];
+const PRESENTATION = /* @__PURE__ */ new Set([
+	"size",
+	"color",
+	"stroke-width",
+	"absolute-stroke-width",
+	"label"
+]);
+const Base = typeof HTMLElement === "undefined" ? class {} : HTMLElement;
+var MorphIconElement = class extends Base {
+	static observedAttributes = [
+		"icon",
+		"from",
+		"to",
+		"progress",
+		"spring",
+		"reduced-motion",
+		"size",
+		"color",
+		"stroke-width",
+		"absolute-stroke-width",
+		"label"
+	];
+	#props = {};
+	#ctrl = null;
+	#path = null;
+	#adopted = false;
+	#preConnectDirty = false;
+	#size = "24";
+	#color = "currentColor";
+	#strokeWidth = "2";
+	#absoluteStrokeWidth = false;
+	#label = null;
+	get icon() {
+		return this.#props.icon;
+	}
+	set icon(v) {
+		this.#props.icon = v;
+		this.#watch();
+	}
+	get from() {
+		return this.#props.from;
+	}
+	set from(v) {
+		this.#props.from = v;
+		this.#watch();
+	}
+	get to() {
+		return this.#props.to;
+	}
+	set to(v) {
+		this.#props.to = v;
+		this.#watch();
+	}
+	get progress() {
+		return this.#props.progress;
+	}
+	set progress(v) {
+		this.#props.progress = v;
+		this.#watch();
+	}
+	get spring() {
+		return this.#props.spring;
+	}
+	set spring(v) {
+		this.#props.spring = v;
+		this.#watch();
+	}
+	get reducedMotion() {
+		return this.#props.reducedMotion;
+	}
+	set reducedMotion(v) {
+		this.#props.reducedMotion = v;
+		this.#watch();
+	}
+	morphTo(icon, spring) {
+		const ctrl = this.#ctrl;
+		if (!ctrl) {
+			this.#imperativeBeforeDriver(icon);
+			return;
+		}
+		ctrl.morphTo(icon, spring ?? this.#props.spring);
+	}
+	set(icon) {
+		const ctrl = this.#ctrl;
+		if (!ctrl) {
+			this.#imperativeBeforeDriver(icon);
+			return;
+		}
+		ctrl.set(icon);
+	}
+	connectedCallback() {
+		for (const key of REACTIVE) this.#upgradeProperty(key);
+		if (!this.#path) this.#adoptOrRender();
+		if (this.style.display === "") this.style.display = "contents";
+		if (this.#path && !this.#ctrl) {
+			const path = this.#path;
+			const gate = this.#adopted && !this.#preConnectDirty;
+			this.#adopted = false;
+			this.#ctrl = createController(this.#props);
+			if (gate) {
+				let armed = false;
+				const gated = { setAttribute(name, value) {
+					if (armed) path.setAttribute(name, value);
+				} };
+				try {
+					this.#ctrl.mount(gated, this.#props);
+				} finally {
+					armed = true;
+				}
+			} else this.#ctrl.mount(path, this.#props);
+		}
+	}
+	disconnectedCallback() {
+		this.#ctrl?.destroy();
+		this.#ctrl = null;
+	}
+	attributeChangedCallback(name, _old, value) {
+		switch (name) {
+			case "icon":
+				this.#props.icon = value ?? void 0;
+				break;
+			case "from":
+				this.#props.from = value ?? void 0;
+				break;
+			case "to":
+				this.#props.to = value ?? void 0;
+				break;
+			case "progress": {
+				const n = value === null ? NaN : Number(value);
+				this.#props.progress = Number.isFinite(n) ? n : void 0;
+				break;
+			}
+			case "spring":
+				this.#props.spring = value ?? void 0;
+				break;
+			case "reduced-motion":
+				this.#props.reducedMotion = value ?? void 0;
+				break;
+			case "size":
+				this.#size = value ?? "24";
+				break;
+			case "color":
+				this.#color = value ?? "currentColor";
+				break;
+			case "stroke-width":
+				this.#strokeWidth = value ?? "2";
+				break;
+			case "absolute-stroke-width":
+				this.#absoluteStrokeWidth = value !== null;
+				break;
+			case "label": this.#label = value;
+		}
+		if (!this.#path) return;
+		if (PRESENTATION.has(name)) {
+			const svg = this.querySelector("svg");
+			if (svg) this.#applyPresentation(svg);
+			return;
+		}
+		this.#watch();
+	}
+	/** A property assigned before the element was defined lands as an own
+	*  value that shadows the accessor; re-route it through the setter. */
+	#upgradeProperty(key) {
+		if (Object.hasOwn(this, key)) {
+			const self = this;
+			const v = self[key];
+			delete self[key];
+			self[key] = v;
+		}
+	}
+	#watch() {
+		const ctrl = this.#ctrl;
+		if (!ctrl) {
+			this.#preConnectDirty = true;
+			return;
+		}
+		ctrl.watch(this.#props);
+	}
+	/** Imperative call before the controller exists: adopt the icon as the
+	*  mount state AND exit controlled mode — "every imperative call
+	*  invalidates the frozen pair" must hold pre-connect too, or a pending
+	*  pair would win the mount and silently discard this call. */
+	#imperativeBeforeDriver(icon) {
+		this.#props.icon = icon;
+		this.#props.from = void 0;
+		this.#props.to = void 0;
+		this.#preConnectDirty = true;
+	}
+	/** SSR markup is adopted verbatim (the element never rewrites server bytes
+	*  at rest); without it, the element renders its own <svg> like the
+	*  framework shells do. */
+	#adoptOrRender() {
+		const existing = this.querySelector("path");
+		if (existing) {
+			this.#path = existing;
+			this.#adopted = true;
+			const p = this.#props;
+			if (p.icon === void 0 && p.from === void 0 && p.to === void 0) {
+				const d = existing.getAttribute("d");
+				if (d) p.icon = d;
+			}
+			return;
+		}
+		const doc = this.ownerDocument;
+		const svg = doc.createElementNS(SVG_NS, "svg");
+		svg.setAttribute("xmlns", SVG_NS);
+		svg.setAttribute("viewBox", "0 0 24 24");
+		svg.setAttribute("fill", "none");
+		svg.setAttribute("stroke-linecap", "round");
+		svg.setAttribute("stroke-linejoin", "round");
+		this.#applyPresentation(svg);
+		const path = doc.createElementNS(SVG_NS, "path");
+		path.setAttribute("d", computeInitialD(this.#props));
+		svg.appendChild(path);
+		this.appendChild(svg);
+		this.#path = path;
+	}
+	#applyPresentation(svg) {
+		svg.setAttribute("width", this.#size);
+		svg.setAttribute("height", this.#size);
+		svg.setAttribute("stroke", this.#color);
+		const sw = this.#absoluteStrokeWidth ? String(Number(this.#strokeWidth) * 24 / Number(this.#size)) : this.#strokeWidth;
+		svg.setAttribute("stroke-width", sw);
+		const label = this.#label;
+		let title = svg.querySelector("title");
+		if (label) {
+			svg.setAttribute("role", "img");
+			svg.removeAttribute("aria-hidden");
+			if (!title) {
+				title = this.ownerDocument.createElementNS(SVG_NS, "title");
+				svg.insertBefore(title, svg.firstChild);
+			}
+			title.textContent = label;
+		} else {
+			svg.removeAttribute("role");
+			svg.setAttribute("aria-hidden", "true");
+			title?.remove();
+		}
+	}
+};
+let registered = false;
+/** Defines `<morph-icon>` (or a custom tag). Idempotent per tag; a no-op
+*  without a DOM (safe to call from code that also runs during SSR). */
+function defineMorphIcon(tag = "morph-icon") {
+	if (typeof customElements === "undefined" || customElements.get(tag)) return;
+	customElements.define(tag, registered ? class extends MorphIconElement {} : MorphIconElement);
+	registered = true;
+}
+//#endregion
+export { MorphIconElement, computeInitialD, defineMorphIcon };

package/dist/svelte-shared.d.ts

@@ -1,12 +1,8 @@
 import { a as Sampled, c as SpringPreset, n as IconInput, r as IconNode } from "./types-JAF3s76Y.js";
 import { a as ReducedMotionMode, i as PathEl, n as Morph, r as MorphOptions } from "./index-DXp5b6BU.js";
+import { n as computeInitialD, r as createController, t as MorphHandle } from "./controller-Dkruvf3Y.js";
 import { SVGAttributes } from "svelte/elements";
 //#region src/svelte/shared.d.ts
-/** Imperative surface exposed on the component instance (`bind:this`). */
-interface MorphHandle {
-  morphTo(icon: IconInput, spring?: SpringPreset | MorphOptions): void;
-  set(icon: IconInput): void;
-}
 /** Rest props fall through to the `<svg>` fully typed (class, style, data-*,
  *  events, ARIA…) via svelte/elements, like lucide-svelte — typos in an SVG
  *  attr fail the build. `from`/`to` are omitted because the SMIL animation
@@ -34,40 +30,5 @@ interface MorphIconProps extends Omit<SVGAttributes<SVGSVGElement>, "from" | "to
   /** Accessibility: with label → role="img" + <title>; without → aria-hidden. */
   label?: string;
 }
-type ModeProps = Pick<MorphIconProps, "icon" | "from" | "to" | "progress">;
-type CtrlProps = ModeProps & Pick<MorphIconProps, "reducedMotion">;
-type WatchProps = CtrlProps & {
-  spring?: SpringPreset | MorphOptions;
-};
-/** The initial d is constant for Svelte: computed once from the mount-time
- *  props (server and client produce the same string → hydration without
- *  mismatch) and from then on only the driver mutates it outside the template. */
-declare function computeInitialD({ icon, from, to, progress }: ModeProps): string;
-/** Per-instance driver state — the exact logic of the React/Vue bindings
- *  (mount, mode watch, controlled seek with re-basing, imperative). Takes the
- *  init-time props: they seed the watch baselines so the first `$effect` run
- *  (which fires on mount in Svelte, unlike Vue's `watch`) is a no-op. All
- *  change detection lives HERE, under tsc — the .svelte shell only wires
- *  runes to these methods.
- *
- *  Lifecycle contract (shared verbatim by the three bindings):
- *  - Lazy driver: an iconless mount keeps the element and births the driver
- *    on the FIRST icon that shows up (prop or imperative). `morphTo` with no
- *    driver behaves as `set` — there is nothing to fly from.
- *  - Controlled wins: while `from` and `to` are both present the pair owns
- *    the path and `icon` changes are ignored; dropping the pair hands the
- *    path back to `icon`.
- *  - Every exit from controlled mode (imperative call or icon takeover)
- *    invalidates the frozen pair, so returning to it re-bases on `from`. */
-declare function createController({ icon, from, to, progress, reducedMotion }: CtrlProps): {
-  mount(mountEl: PathEl, { icon, from, to, progress, reducedMotion }: CtrlProps): void;
-  destroy(): void;
-  /** Prop watcher: ONE owner decides per run — the controlled pair while it
-   *  is fully present, `icon` otherwise (mount doesn't fire thanks to the
-   *  init-time baselines). */
-  watch({ icon, from, to, progress, spring, reducedMotion }: WatchProps): void;
-  morphTo(icon: IconInput, spring?: SpringPreset | MorphOptions): void;
-  set(icon: IconInput): void;
-};
 //#endregion
-export { type IconInput, type IconNode, type Morph, MorphHandle, MorphIconProps, type MorphOptions, type PathEl, type ReducedMotionMode, type Sampled, type SpringPreset, computeInitialD, createController };
+export { type IconInput, type IconNode, type Morph, type MorphHandle, MorphIconProps, type MorphOptions, type PathEl, type ReducedMotionMode, type Sampled, type SpringPreset, computeInitialD, createController };

package/dist/svelte-shared.js

@@ -1,151 +1,2 @@
-import { a as buildPlan, c as interpPolar, o as allocOutputs, r as resampleIcon } from "./spring-CFHloqPP.js";
-import { i as serialize } from "./normalize-CYnN3Npw.js";
-import { canonicalD, createMorph } from "./dom.js";
-//#region src/svelte/shared.ts
-/** Frozen shape of the from→to pair at t, using the pure core (SSR-safe).
-*  At exact endpoints returns the canonical `d` (real curves, not polyline). */
-function frozenD(from, to, t) {
-	if (t <= 0) return canonicalD(from);
-	if (t >= 1) return canonicalD(to);
-	const plan = buildPlan(resampleIcon(from), resampleIcon(to));
-	const out = allocOutputs(plan);
-	interpPolar(plan, t, out);
-	return serialize(out, plan.items.map((it) => it.closed));
-}
-/** The initial d is constant for Svelte: computed once from the mount-time
-*  props (server and client produce the same string → hydration without
-*  mismatch) and from then on only the driver mutates it outside the template. */
-function computeInitialD({ icon, from, to, progress }) {
-	if (from !== void 0 && to !== void 0) return frozenD(from, to, progress ?? 0);
-	const first = icon ?? from ?? to;
-	return first !== void 0 ? canonicalD(first) : "";
-}
-/** Per-instance driver state — the exact logic of the React/Vue bindings
-*  (mount, mode watch, controlled seek with re-basing, imperative). Takes the
-*  init-time props: they seed the watch baselines so the first `$effect` run
-*  (which fires on mount in Svelte, unlike Vue's `watch`) is a no-op. All
-*  change detection lives HERE, under tsc — the .svelte shell only wires
-*  runes to these methods.
-*
-*  Lifecycle contract (shared verbatim by the three bindings):
-*  - Lazy driver: an iconless mount keeps the element and births the driver
-*    on the FIRST icon that shows up (prop or imperative). `morphTo` with no
-*    driver behaves as `set` — there is nothing to fly from.
-*  - Controlled wins: while `from` and `to` are both present the pair owns
-*    the path and `icon` changes are ignored; dropping the pair hands the
-*    path back to `icon`.
-*  - Every exit from controlled mode (imperative call or icon takeover)
-*    invalidates the frozen pair, so returning to it re-bases on `from`. */
-function createController({ icon, from, to, progress, reducedMotion }) {
-	let el = null;
-	let dead = false;
-	let morph = null;
-	let rm = reducedMotion ?? "never";
-	let based = false;
-	let pair = null;
-	let prevIcon = icon;
-	let prevControlled = from !== void 0 && to !== void 0;
-	let prevFrom = from;
-	let prevTo = to;
-	let prevProgress = progress;
-	/** Driver birth, lazy included: the first icon to show up creates it. */
-	const ensure = (birth) => {
-		if (morph) return morph;
-		if (dead || !el) return null;
-		morph = createMorph(el, birth, { reducedMotion: rm });
-		return morph;
-	};
-	/** Controlled mode: freeze the pair at `progress` via seek (no spring). */
-	const applyPair = (from, to, progress) => {
-		const m = morph;
-		if (!m) return;
-		const t = progress ?? 0;
-		if (!pair || pair[0] !== from || pair[1] !== to) {
-			pair = [from, to];
-			based = false;
-		}
-		if (t <= 0) {
-			m.set(from);
-			based = false;
-		} else if (t >= 1) {
-			m.set(to);
-			based = false;
-		} else {
-			if (!based) {
-				m.set(from);
-				based = true;
-			}
-			m.seek(to, t);
-		}
-	};
-	return {
-		mount(mountEl, { icon, from, to, progress, reducedMotion }) {
-			el = mountEl;
-			rm = reducedMotion ?? rm;
-			const controlled = from !== void 0 && to !== void 0;
-			const initialIcon = icon ?? from ?? to;
-			if (initialIcon === void 0) return;
-			const m = createMorph(el, controlled ? from : initialIcon, { reducedMotion: rm });
-			morph = m;
-			if (controlled) {
-				pair = [from, to];
-				const t = progress ?? 0;
-				if (t <= 0) m.set(from);
-				else if (t >= 1) m.set(to);
-				else {
-					m.seek(to, t);
-					based = true;
-				}
-			}
-		},
-		destroy() {
-			dead = true;
-			el = null;
-			morph?.destroy();
-			morph = null;
-			based = false;
-			pair = null;
-		},
-		/** Prop watcher: ONE owner decides per run — the controlled pair while it
-		*  is fully present, `icon` otherwise (mount doesn't fire thanks to the
-		*  init-time baselines). */
-		watch({ icon, from, to, progress, spring, reducedMotion }) {
-			rm = reducedMotion ?? "never";
-			if (morph) morph.reducedMotion = rm;
-			const controlled = from !== void 0 && to !== void 0;
-			const left = prevControlled && !controlled;
-			const iconChanged = icon !== prevIcon;
-			const pairChanged = from !== prevFrom || to !== prevTo || progress !== prevProgress;
-			prevControlled = controlled;
-			prevIcon = icon;
-			prevFrom = from;
-			prevTo = to;
-			prevProgress = progress;
-			if (controlled) {
-				if (!pairChanged) return;
-				if (!(morph ?? ensure(from))) return;
-				applyPair(from, to, progress);
-				return;
-			}
-			if (icon === void 0 || !iconChanged && !left) return;
-			pair = null;
-			based = false;
-			if (morph) morph.morphTo(icon, spring);
-			else ensure(icon);
-		},
-		morphTo(icon, spring) {
-			pair = null;
-			based = false;
-			if (morph) morph.morphTo(icon, spring);
-			else ensure(icon);
-		},
-		set(icon) {
-			pair = null;
-			based = false;
-			if (morph) morph.set(icon);
-			else ensure(icon);
-		}
-	};
-}
-//#endregion
+import { n as createController, t as computeInitialD } from "./controller-CXZuwJ_M.js";
 export { computeInitialD, createController };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "morphicons",
-  "version": "1.5.0",
+  "version": "1.7.0",
   "description": "Universal morphing for stroke-based icons with spring physics — zero runtime dependencies",
   "license": "MIT",
   "author": "Guillermo (https://guillermolg.com)",
@@ -35,6 +35,10 @@
     "lucide-vue-next",
     "svelte",
     "lucide-svelte",
+    "astro",
+    "astro-component",
+    "web-component",
+    "custom-element",
     "icon-animation"
   ],
   "type": "module",
@@ -71,6 +75,14 @@
       "types": "./dist/svelte.d.ts",
       "svelte": "./dist/svelte.js",
       "default": "./dist/svelte.js"
+    },
+    "./element": {
+      "types": "./dist/element.d.ts",
+      "default": "./dist/element.js"
+    },
+    "./astro": {
+      "types": "./dist/astro.d.ts",
+      "default": "./dist/MorphIcon.astro"
     }
   },
   "peerDependencies": {
@@ -102,11 +114,11 @@
   ],
   "scripts": {
     "test": "bun test",
-    "typecheck": "tsc --noEmit && tsc -p playground --noEmit && tsc -p tsconfig.react.json --noEmit && tsc -p tsconfig.react-native.json --noEmit && tsc -p tsconfig.vue.json --noEmit && tsc -p tsconfig.svelte.json --noEmit",
+    "typecheck": "tsc --noEmit && tsc -p playground --noEmit && tsc -p tsconfig.react.json --noEmit && tsc -p tsconfig.react-native.json --noEmit && tsc -p tsconfig.vue.json --noEmit && tsc -p tsconfig.svelte.json --noEmit && tsc -p tsconfig.element.json --noEmit",
     "play": "bun ./playground/index.html",
     "lint": "biome check .",
     "format": "biome check --write .",
-    "build": "tsdown && bun scripts/build-svelte.ts",
+    "build": "tsdown && bun scripts/build-svelte.ts && bun scripts/build-astro.ts",
     "size": "size-limit",
     "prepublishOnly": "bun run build"
   },
@@ -129,7 +141,7 @@
       "name": "adapters (aggregate — grows by design, see per-export gates)",
       "path": "dist/adapters.js",
       "import": "*",
-      "limit": "4.4 KB",
+      "limit": "4.8 KB",
       "gzip": true
     },
     {
@@ -146,6 +158,13 @@
       "limit": "0.8 KB",
       "gzip": true
     },
+    {
+      "name": "adapters › canvasTarget (per-export shakeability gate)",
+      "path": "dist/adapters.js",
+      "import": "{ canvasTarget }",
+      "limit": "0.55 KB",
+      "gzip": true
+    },
     {
       "name": "core + dom + react (MorphIcon, react external)",
       "path": "dist/react.js",
@@ -196,6 +215,22 @@
       ],
       "limit": "1.4 KB",
       "gzip": true
+    },
+    {
+      "name": "core + dom + element (<morph-icon> custom element)",
+      "path": "dist/element.js",
+      "import": "*",
+      "limit": "9.5 KB",
+      "gzip": true
+    },
+    {
+      "name": "astro shell (ships as source, consumer-compiled)",
+      "path": "dist/MorphIcon.astro",
+      "disablePlugins": [
+        "@size-limit/esbuild"
+      ],
+      "limit": "1.75 KB",
+      "gzip": true
     }
   ],
   "devDependencies": {