morphicons 1.6.0 → 1.7.1

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
 
@@ -141,17 +141,56 @@ ref.current?.morphTo(Check); // animates
 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`.
+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. On the New Architecture that write is not the last word, because every Fabric commit rebuilds the native path from the props React declares: the binding therefore publishes the driver's live `d` on each render, and re-applies it in a layout effect when a frame landed in between, so an unrelated re-render (a color or selection change, at rest or mid-flight) can no longer restore the icon the component mounted with. 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):
 
@@ -295,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
 ├─────────────────────────────────────────────┤
@@ -305,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:
 
@@ -454,6 +494,8 @@ CI budget (size-limit, gzip) as an anti-regression tripwire — gates carry ~10%
 | `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/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/react-native.js

@@ -5,8 +5,10 @@ import { forwardRef, useCallback, useEffect, useImperativeHandle, useLayoutEffec
 import { jsx } from "react/jsx-runtime";
 import { AccessibilityInfo } from "react-native";
 import Svg, { Path } from "react-native-svg";
+//#region src/react-native/iso-layout-effect.ts
+const useIsoLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+//#endregion
 //#region src/react-native/index.tsx
-const useIsoLayoutEffect = typeof document === "undefined" ? useEffect : useLayoutEffect;
 let reduced = false;
 let rmInit = false;
 function initReducedMotion() {
@@ -39,6 +41,8 @@ const MorphIcon = forwardRef(function MorphIcon(props, ref) {
 		if (controlled) return frozenD(from, to, progress ?? 0);
 		return initialIcon !== void 0 ? canonicalD(initialIcon) : "";
 	});
+	const liveD = useRef(initialD);
+	const declaredD = liveD.current;
 	const pathRef = useRef(null);
 	const morphRef = useRef(null);
 	const springRef = useRef(spring);
@@ -53,7 +57,9 @@ const MorphIcon = forwardRef(function MorphIcon(props, ref) {
 	/** The PathEl shim: createMorph only ever writes `d`, and Path forwards
 	*  it to the native view without re-rendering. Stable identity. */
 	const el = useRef({ setAttribute: (name, value) => {
-		if (name === "d") pathRef.current?.setNativeProps({ d: value });
+		if (name !== "d") return;
+		liveD.current = value;
+		pathRef.current?.setNativeProps({ d: value });
 	} });
 	/** morphTo that applies the reduced-motion policy ("user" reads the OS
 	*  setting via AccessibilityInfo, best-effort). */
@@ -99,6 +105,9 @@ const MorphIcon = forwardRef(function MorphIcon(props, ref) {
 			pair.current = null;
 		};
 	}, []);
+	useIsoLayoutEffect(() => {
+		if (liveD.current !== declaredD) pathRef.current?.setNativeProps({ d: liveD.current });
+	});
 	useEffect(() => {
 		if (reducedMotion === "user") initReducedMotion();
 	}, [reducedMotion]);
@@ -180,7 +189,7 @@ const MorphIcon = forwardRef(function MorphIcon(props, ref) {
 		...rest,
 		children: /* @__PURE__ */ jsx(Path, {
 			ref: pathRef,
-			d: initialD
+			d: declaredD
 		})
 	});
 });

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.6.0",
+  "version": "1.7.1",
   "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"
   },
@@ -203,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": {