@molecule/app-ui 1.2.1 → 1.3.0

package/README.md

@@ -3,7 +3,7 @@ AUTO-GENERATED — DO NOT EDIT THIS FILE.
 Generated by `mlcl sync-docs` from the package's src/index.ts JSDoc + mlcl/registry.json.
 Edits here are overwritten on the next commit (molecule's pre-commit hook regenerates).
 To change this document, edit the module-level JSDoc in src/index.ts.
-Generated: 2026-09-26T19:12:00.625Z
+Generated: 2026-09-27T09:13:41.545Z
 -->
 
 # @molecule/app-ui
@@ -1046,6 +1046,64 @@ interface ModalProps extends HTMLElementProps {
 }
 ```
 
+#### `MoleculeSpinnerColors`
+
+Gradient-mode colors. Any CSS color string, including `var()` forms.
+
+```typescript
+interface MoleculeSpinnerColors {
+  /** Bond base / glint tail color. */
+  blue?: string
+  /** Flow highlight / glint head color at rest. */
+  light?: string
+  /** Glint ignition color while an atom is in flight. */
+  peach?: string
+}
+```
+
+#### `MoleculeSpinnerMarkOptions`
+
+Options for {@link moleculeSpinnerMarkSvg}.
+
+```typescript
+interface MoleculeSpinnerMarkOptions {
+  /** Motion timings; defaults to the shipped design (2.5s / 5s / 3s). */
+  timings?: Partial<MoleculeSpinnerTimings>
+  /** `gradient` (default) or `mono` — plain `currentColor` outline, no defs. */
+  paint?: 'gradient' | 'mono'
+  /** Gradient-mode colors; default the `var(--mol-spin-*, fallback)` set. */
+  colors?: MoleculeSpinnerColors
+  /**
+   * Gradient id for url() references. Must be unique per rendered instance
+   * on a page. Defaults to `mol-spinner-gradient`.
+   */
+  gradientId?: string
+  /** Pixel size baked into width/height; omit when CSS sizes the svg. */
+  size?: number
+  /** Class attribute for the svg element. */
+  className?: string
+  /** Inline style attribute (already serialized, e.g. `color:re$d`). */
+  style?: string
+  /** Announce as `role="status"` with this label; omit for `aria-hidden`. */
+  ariaLabel?: string
+}
+```
+
+#### `MoleculeSpinnerTimings`
+
+The mark's timings, in CSS duration strings. Swap cycle → glint cycle.
+
+```typescript
+interface MoleculeSpinnerTimings {
+  /** One full 3-phase atom-swap cycle (also drives bond fades + glints). */
+  dur: string
+  /** Whole-figure rotation. Keep at two swap cycles for the intended feel. */
+  spin: string
+  /** Bond gradient flow period (one full translate across the figure). */
+  flow: string
+}
+```
+
 #### `PageHeaderProps`
 
 Props for the PageHeader component — consistent page title area.
@@ -2968,6 +3026,19 @@ function hasProvider(): boolean
 
 **Returns:** `true` if a UI provider is bonded.
 
+#### `moleculeSpinnerMarkSvg(options)`
+
+The molecule spinner mark as a complete SVG element string (SMIL-animated,
+framework-agnostic). See the module docblock for usage and gotchas.
+
+```typescript
+function moleculeSpinnerMarkSvg(options?: MoleculeSpinnerMarkOptions): string
+```
+
+- `options` — Paint, timings, size, gradient id and a11y shape.
+
+**Returns:** A `<svg>…</svg>` markup string.
+
 #### `molId(component, context, qualifier)`
 
 Generate a semantic automation ID for a component.

package/dist/index.d.ts

@@ -44,6 +44,7 @@
 export * from './automation.js';
 export * from './components.js';
 export * from './provider.js';
+export * from './spinner.js';
 export * from './types.js';
 export * from './utilities.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AAEH,cAAc,iBAAiB,CAAA;AAC/B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,eAAe,CAAA;AAC7B,cAAc,YAAY,CAAA;AAC1B,cAAc,gBAAgB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AAEH,cAAc,iBAAiB,CAAA;AAC/B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA;AAC5B,cAAc,YAAY,CAAA;AAC1B,cAAc,gBAAgB,CAAA"}

package/dist/index.js

@@ -44,6 +44,7 @@
 export * from './automation.js';
 export * from './components.js';
 export * from './provider.js';
+export * from './spinner.js';
 export * from './types.js';
 export * from './utilities.js';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AAEH,cAAc,iBAAiB,CAAA;AAC/B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,eAAe,CAAA;AAC7B,cAAc,YAAY,CAAA;AAC1B,cAAc,gBAAgB,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AAEH,cAAc,iBAAiB,CAAA;AAC/B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA;AAC5B,cAAc,YAAY,CAAA;AAC1B,cAAc,gBAAgB,CAAA"}

package/dist/spinner.d.ts

@@ -0,0 +1,109 @@
+/**
+ * The molecule spinner mark — the platform's animated loading glyph, as one
+ * framework-agnostic SVG string.
+ *
+ * This module is the SINGLE source of truth for the mark's geometry, motion
+ * and paint. Every surface that spins it — the IDE app's `MoleculeSpinner`,
+ * the AI streaming indicator (`@molecule/app-ide-react`), and the "Built with
+ * Molecule.dev" attribution badge injected into deployed apps — renders
+ * {@link moleculeSpinnerMarkSvg} output rather than keeping a copy. Before
+ * this existed, four hand-maintained copies drifted into three different
+ * looks; if you are tempted to inline this SVG somewhere, import this instead.
+ *
+ * @remarks
+ * **What it renders** — a complete `<svg>…</svg>` element string driven by
+ * SMIL (no JS runtime, no CSS keyframes), safe to inject with
+ * `innerHTML`/`insertAdjacentHTML` in any framework or none:
+ * - a 3-phase atom-swap cycle (one outer atom exchanges with the hub per
+ *   phase; the connecting bond fades for the swap);
+ * - a slow hub-centered whole-figure rotation;
+ * - paint: a seamless one-way blue gradient flow on the bonds plus per-atom
+ *   "glint" gradients whose light end warms exactly while that atom is in
+ *   flight (keyed to the same keyTimes/easing as the motion), or a plain
+ *   `currentColor` outline via `paint: 'mono'`.
+ *
+ * **Gotchas a weak executor gets wrong:**
+ * - `gradientId` must be unique per rendered instance on a page — two svgs
+ *   sharing one id cross-reference each other's gradients. React wrappers
+ *   should pass something derived from `useId()` (strip `:` first).
+ * - Default colors are CSS-var-with-fallback strings
+ *   (`var(--mol-spin-blue, #4f86f0)`), which theme via `--mol-spin-*` where
+ *   they exist (e.g. the molecule.dev landing page) and fall back to the
+ *   literal palette elsewhere. Injected into third-party pages (the
+ *   attribution badge) they must be overridden with literal hexes — the vars
+ *   do not exist there.
+ * - The glyph matrix x-translate (`-.78879`) deliberately differs from the
+ *   static favicon's (`.81594`): it puts the molecule's hub exactly on the
+ *   rotation center (16,16) so the spin never wobbles. Do not "fix" it.
+ * - `ariaLabel` produces `role="status"`; omit it for decorative uses, which
+ *   get `aria-hidden="true"` instead. Never emit both.
+ *
+ * @example
+ * ```ts
+ * import { moleculeSpinnerMarkSvg } from '@molecule/app-ui'
+ *
+ * // themed, unique per instance
+ * const svg = moleculeSpinnerMarkSvg({ size: 24, gradientId: 'spin-1', ariaLabel: 'Loading' })
+ *
+ * // monochrome, inherits the surrounding text color
+ * const mono = moleculeSpinnerMarkSvg({ size: 16, paint: 'mono' })
+ *
+ * // third-party page (no --mol-spin-* vars): literal colors, CSS-sized
+ * const badge = moleculeSpinnerMarkSvg({
+ *   gradientId: 'mol-badge-grad',
+ *   className: 'mol-badge-mark',
+ *   colors: { blue: '#4f86f0', light: '#6e9bf5', peach: '#e0975a' },
+ * })
+ * ```
+ *
+ * @module
+ */
+/** The mark's timings, in CSS duration strings. Swap cycle → glint cycle. */
+export interface MoleculeSpinnerTimings {
+    /** One full 3-phase atom-swap cycle (also drives bond fades + glints). */
+    dur: string;
+    /** Whole-figure rotation. Keep at two swap cycles for the intended feel. */
+    spin: string;
+    /** Bond gradient flow period (one full translate across the figure). */
+    flow: string;
+}
+/** Gradient-mode colors. Any CSS color string, including `var()` forms. */
+export interface MoleculeSpinnerColors {
+    /** Bond base / glint tail color. */
+    blue?: string;
+    /** Flow highlight / glint head color at rest. */
+    light?: string;
+    /** Glint ignition color while an atom is in flight. */
+    peach?: string;
+}
+/** Options for {@link moleculeSpinnerMarkSvg}. */
+export interface MoleculeSpinnerMarkOptions {
+    /** Motion timings; defaults to the shipped design (2.5s / 5s / 3s). */
+    timings?: Partial<MoleculeSpinnerTimings>;
+    /** `gradient` (default) or `mono` — plain `currentColor` outline, no defs. */
+    paint?: 'gradient' | 'mono';
+    /** Gradient-mode colors; default the `var(--mol-spin-*, fallback)` set. */
+    colors?: MoleculeSpinnerColors;
+    /**
+     * Gradient id for url() references. Must be unique per rendered instance
+     * on a page. Defaults to `mol-spinner-gradient`.
+     */
+    gradientId?: string;
+    /** Pixel size baked into width/height; omit when CSS sizes the svg. */
+    size?: number;
+    /** Class attribute for the svg element. */
+    className?: string;
+    /** Inline style attribute (already serialized, e.g. `color:re$d`). */
+    style?: string;
+    /** Announce as `role="status"` with this label; omit for `aria-hidden`. */
+    ariaLabel?: string;
+}
+/**
+ * The molecule spinner mark as a complete SVG element string (SMIL-animated,
+ * framework-agnostic). See the module docblock for usage and gotchas.
+ *
+ * @param options - Paint, timings, size, gradient id and a11y shape.
+ * @returns A `<svg>…</svg>` markup string.
+ */
+export declare function moleculeSpinnerMarkSvg(options?: MoleculeSpinnerMarkOptions): string;
+//# sourceMappingURL=spinner.d.ts.map

package/dist/spinner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.d.ts","sourceRoot":"","sources":["../src/spinner.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2DG;AAEH,6EAA6E;AAC7E,MAAM,WAAW,sBAAsB;IACrC,0EAA0E;IAC1E,GAAG,EAAE,MAAM,CAAA;IACX,4EAA4E;IAC5E,IAAI,EAAE,MAAM,CAAA;IACZ,wEAAwE;IACxE,IAAI,EAAE,MAAM,CAAA;CACb;AAED,2EAA2E;AAC3E,MAAM,WAAW,qBAAqB;IACpC,oCAAoC;IACpC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,iDAAiD;IACjD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,kDAAkD;AAClD,MAAM,WAAW,0BAA0B;IACzC,uEAAuE;IACvE,OAAO,CAAC,EAAE,OAAO,CAAC,sBAAsB,CAAC,CAAA;IACzC,8EAA8E;IAC9E,KAAK,CAAC,EAAE,UAAU,GAAG,MAAM,CAAA;IAC3B,2EAA2E;IAC3E,MAAM,CAAC,EAAE,qBAAqB,CAAA;IAC9B;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,uEAAuE;IACvE,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,sEAAsE;IACtE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,2EAA2E;IAC3E,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AA0HD;;;;;;GAMG;AACH,wBAAgB,sBAAsB,CAAC,OAAO,GAAE,0BAA+B,GAAG,MAAM,CA+DvF"}

package/dist/spinner.js

@@ -0,0 +1,228 @@
+/**
+ * The molecule spinner mark — the platform's animated loading glyph, as one
+ * framework-agnostic SVG string.
+ *
+ * This module is the SINGLE source of truth for the mark's geometry, motion
+ * and paint. Every surface that spins it — the IDE app's `MoleculeSpinner`,
+ * the AI streaming indicator (`@molecule/app-ide-react`), and the "Built with
+ * Molecule.dev" attribution badge injected into deployed apps — renders
+ * {@link moleculeSpinnerMarkSvg} output rather than keeping a copy. Before
+ * this existed, four hand-maintained copies drifted into three different
+ * looks; if you are tempted to inline this SVG somewhere, import this instead.
+ *
+ * @remarks
+ * **What it renders** — a complete `<svg>…</svg>` element string driven by
+ * SMIL (no JS runtime, no CSS keyframes), safe to inject with
+ * `innerHTML`/`insertAdjacentHTML` in any framework or none:
+ * - a 3-phase atom-swap cycle (one outer atom exchanges with the hub per
+ *   phase; the connecting bond fades for the swap);
+ * - a slow hub-centered whole-figure rotation;
+ * - paint: a seamless one-way blue gradient flow on the bonds plus per-atom
+ *   "glint" gradients whose light end warms exactly while that atom is in
+ *   flight (keyed to the same keyTimes/easing as the motion), or a plain
+ *   `currentColor` outline via `paint: 'mono'`.
+ *
+ * **Gotchas a weak executor gets wrong:**
+ * - `gradientId` must be unique per rendered instance on a page — two svgs
+ *   sharing one id cross-reference each other's gradients. React wrappers
+ *   should pass something derived from `useId()` (strip `:` first).
+ * - Default colors are CSS-var-with-fallback strings
+ *   (`var(--mol-spin-blue, #4f86f0)`), which theme via `--mol-spin-*` where
+ *   they exist (e.g. the molecule.dev landing page) and fall back to the
+ *   literal palette elsewhere. Injected into third-party pages (the
+ *   attribution badge) they must be overridden with literal hexes — the vars
+ *   do not exist there.
+ * - The glyph matrix x-translate (`-.78879`) deliberately differs from the
+ *   static favicon's (`.81594`): it puts the molecule's hub exactly on the
+ *   rotation center (16,16) so the spin never wobbles. Do not "fix" it.
+ * - `ariaLabel` produces `role="status"`; omit it for decorative uses, which
+ *   get `aria-hidden="true"` instead. Never emit both.
+ *
+ * @example
+ * ```ts
+ * import { moleculeSpinnerMarkSvg } from '@molecule/app-ui'
+ *
+ * // themed, unique per instance
+ * const svg = moleculeSpinnerMarkSvg({ size: 24, gradientId: 'spin-1', ariaLabel: 'Loading' })
+ *
+ * // monochrome, inherits the surrounding text color
+ * const mono = moleculeSpinnerMarkSvg({ size: 16, paint: 'mono' })
+ *
+ * // third-party page (no --mol-spin-* vars): literal colors, CSS-sized
+ * const badge = moleculeSpinnerMarkSvg({
+ *   gradientId: 'mol-badge-grad',
+ *   className: 'mol-badge-mark',
+ *   colors: { blue: '#4f86f0', light: '#6e9bf5', peach: '#e0975a' },
+ * })
+ * ```
+ *
+ * @module
+ */
+const DEFAULT_TIMINGS = {
+    dur: '2.5s',
+    spin: '5s',
+    flow: '3s',
+};
+const DEFAULT_COLORS = {
+    blue: 'var(--mol-spin-blue, #4f86f0)',
+    light: 'var(--mol-spin-blue-light, #6e9bf5)',
+    peach: 'var(--mol-spin-peach, #e0975a)',
+};
+const EASE = '0.42 0 0.58 1';
+const LIN = '0 0 1 1';
+/** Bond fade keyframes, one per phase, phase-locked to the swap they serve. */
+const BONDS = [
+    {
+        // Center–Left — fades during Phase 1
+        x1: 16.494,
+        x2: 8.563,
+        y1: 16,
+        y2: 16,
+        values: '1;0;0;1;1',
+        keyTimes: '0;0.033;0.167;0.217;1',
+        keySplines: [EASE, LIN, EASE, LIN].join(';'),
+    },
+    {
+        // Center–Bottom-right — fades during Phase 2
+        x1: 20.959,
+        x2: 24.924,
+        y1: 18.579,
+        y2: 25.446,
+        values: '1;1;0;0;1;1',
+        keyTimes: '0;0.333;0.367;0.500;0.550;1',
+        keySplines: [LIN, EASE, LIN, EASE, LIN].join(';'),
+    },
+    {
+        // Center–Top-right — fades during Phase 3
+        x1: 20.959,
+        x2: 24.924,
+        y1: 13.422,
+        y2: 6.555,
+        values: '1;1;0;0;1;1',
+        keyTimes: '0;0.667;0.700;0.833;0.883;1',
+        keySplines: [LIN, EASE, LIN, EASE, LIN].join(';'),
+    },
+];
+/**
+ * Atom swap trajectories: cx/cy keyframe lists per atom, plus the glint pulse
+ * for its gradient (LIGHT at rest, peach at each flight's midpoint — the same
+ * anchors and easing the position animation uses, so the glint is frame-locked
+ * to every swap). Atoms are visually identical, so the loop-boundary jump is
+ * imperceptible.
+ */
+const ATOMS = [
+    {
+        // Center → Left (Phase 1), holds
+        cx: 19.47,
+        cy: 16,
+        cxValues: '19.47;19.47;5.587;5.587',
+        cyValues: null,
+        keyTimes: '0;0.033;0.167;1',
+        keySplines: [LIN, EASE, LIN].join(';'),
+        glintValues: [1, 1, 0, 1, 1], // indexes into [light, peach]
+        glintKeyTimes: '0;0.033;0.1;0.167;1',
+        glintSplines: [LIN, EASE, EASE, LIN].join(';'),
+    },
+    {
+        // Left → Center (Phase 1), Center → BR (Phase 2), holds
+        cx: 5.587,
+        cy: 16,
+        cxValues: '5.587;5.587;19.47;19.47;26.412;26.412',
+        cyValues: '16;16;16;16;28.023;28.023',
+        keyTimes: '0;0.033;0.167;0.367;0.500;1',
+        keySplines: [LIN, EASE, LIN, EASE, LIN].join(';'),
+        glintValues: [1, 1, 0, 1, 1, 0, 1, 1],
+        glintKeyTimes: '0;0.033;0.1;0.167;0.367;0.434;0.5;1',
+        glintSplines: [LIN, EASE, EASE, LIN, EASE, EASE, LIN].join(';'),
+    },
+    {
+        // BR → Center (Phase 2), Center → TR (Phase 3), holds
+        cx: 26.412,
+        cy: 28.023,
+        cxValues: '26.412;26.412;19.47;19.47;26.412;26.412',
+        cyValues: '28.023;28.023;16;16;3.977;3.977',
+        keyTimes: '0;0.367;0.500;0.700;0.833;1',
+        keySplines: [LIN, EASE, LIN, EASE, LIN].join(';'),
+        glintValues: [1, 1, 0, 1, 1, 0, 1, 1],
+        glintKeyTimes: '0;0.367;0.434;0.5;0.7;0.767;0.833;1',
+        glintSplines: [LIN, EASE, EASE, LIN, EASE, EASE, LIN].join(';'),
+    },
+    {
+        // TR → Center (Phase 3), holds
+        cx: 26.412,
+        cy: 3.977,
+        cxValues: '26.412;26.412;19.47;19.47',
+        cyValues: '3.977;3.977;16;16',
+        keyTimes: '0;0.700;0.833;1',
+        keySplines: [LIN, EASE, LIN].join(';'),
+        glintValues: [1, 1, 0, 1, 1],
+        glintKeyTimes: '0;0.7;0.767;0.833;1',
+        glintSplines: [LIN, EASE, EASE, LIN].join(';'),
+    },
+];
+/**
+ * Minimal attribute-value escaping for {@link MoleculeSpinnerMarkOptions.ariaLabel}
+ * — the one option that can carry free text. Developer-supplied options
+ * (`className`, `style`, `gradientId`, colors) are interpolated verbatim.
+ */
+function escapeAttr(value) {
+    return value
+        .replace(/&/g, '&amp;')
+        .replace(/"/g, '&quot;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;');
+}
+/**
+ * The molecule spinner mark as a complete SVG element string (SMIL-animated,
+ * framework-agnostic). See the module docblock for usage and gotchas.
+ *
+ * @param options - Paint, timings, size, gradient id and a11y shape.
+ * @returns A `<svg>…</svg>` markup string.
+ */
+export function moleculeSpinnerMarkSvg(options = {}) {
+    const timings = { ...DEFAULT_TIMINGS, ...options.timings };
+    const colors = { ...DEFAULT_COLORS, ...options.colors };
+    const gradientId = options.gradientId ?? 'mol-spinner-gradient';
+    const gradient = (options.paint ?? 'gradient') === 'gradient';
+    const sizeAttrs = options.size !== undefined ? ` width="${options.size}" height="${options.size}"` : '';
+    const classAttrs = options.className ? ` class="${options.className}"` : '';
+    const styleAttr = options.style ? ` style="${options.style}"` : '';
+    const a11yAttrs = options.ariaLabel
+        ? ` role="status" aria-label="${escapeAttr(options.ariaLabel)}"`
+        : ' aria-hidden="true"';
+    const defs = gradient
+        ? '<defs>' +
+            `<linearGradient id="${gradientId}" gradientUnits="userSpaceOnUse" x1="0" y1="16" x2="32" y2="16" spreadMethod="repeat">` +
+            `<stop offset="0" stop-color="${colors.blue}"/>` +
+            `<stop offset="0.5" stop-color="${colors.light}"/>` +
+            `<stop offset="1" stop-color="${colors.blue}"/>` +
+            `<animateTransform attributeName="gradientTransform" type="translate" values="0 0; 32 0" dur="${timings.flow}" repeatCount="indefinite"/>` +
+            '</linearGradient>' +
+            ATOMS.map((atom, i) => `<linearGradient id="${gradientId}-a${i}" x1="0" y1="0" x2="1" y2="1">` +
+                `<stop offset="0" stop-color="${colors.light}">` +
+                `<animate attributeName="stop-color" dur="${timings.dur}" repeatCount="indefinite" values="${atom.glintValues.map((v) => (v ? colors.light : colors.peach)).join(';')}" keyTimes="${atom.glintKeyTimes}" calcMode="spline" keySplines="${atom.glintSplines}"/>` +
+                '</stop>' +
+                `<stop offset="1" stop-color="${colors.blue}"/>` +
+                '</linearGradient>').join('') +
+            '</defs>'
+        : '';
+    const groupStroke = gradient ? `url(#${gradientId})` : 'currentColor';
+    const bonds = BONDS.map((bond) => `<line x1="${bond.x1}" x2="${bond.x2}" y1="${bond.y1}" y2="${bond.y2}">` +
+        `<animate attributeName="opacity" dur="${timings.dur}" repeatCount="indefinite" values="${bond.values}" keyTimes="${bond.keyTimes}" calcMode="spline" keySplines="${bond.keySplines}"/>` +
+        '</line>').join('');
+    const atoms = ATOMS.map((atom, i) => `<circle cx="${atom.cx}" cy="${atom.cy}" r="2.976"${gradient ? ` stroke="url(#${gradientId}-a${i})"` : ''}>` +
+        `<animate attributeName="cx" dur="${timings.dur}" repeatCount="indefinite" values="${atom.cxValues}" keyTimes="${atom.keyTimes}" calcMode="spline" keySplines="${atom.keySplines}"/>` +
+        (atom.cyValues
+            ? `<animate attributeName="cy" dur="${timings.dur}" repeatCount="indefinite" values="${atom.cyValues}" keyTimes="${atom.keyTimes}" calcMode="spline" keySplines="${atom.keySplines}"/>`
+            : '') +
+        '</circle>').join('');
+    return (`<svg xmlns="http://www.w3.org/2000/svg"${sizeAttrs}${classAttrs}${styleAttr}` +
+        ` viewBox="0 0 32 32"${a11yAttrs} focusable="false">` +
+        defs +
+        `<g><animateTransform attributeName="transform" type="rotate" from="0 16 16" to="360 16 16" dur="${timings.spin}" repeatCount="indefinite"/>` +
+        `<g transform="matrix(.86229 0 0 .86229 -.78879 2.2034)" stroke="${groupStroke}" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2.4737" fill="none">` +
+        bonds +
+        atoms +
+        '</g></g></svg>');
+}
+//# sourceMappingURL=spinner.js.map

package/dist/spinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.js","sourceRoot":"","sources":["../src/spinner.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@molecule/app-ui",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "description": "UI component interfaces for molecule.dev",
   "type": "module",
   "main": "dist/index.js",