use-scroll-animate 4.4.0 → 4.6.0

package/dist/components/packs.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var base = require('../chunks/base-DE2yzxE7.cjs');
+var base = require('../chunks/base-CxYU2NK_.cjs');
 
 const anim = (el, frames, o) => {
     if (typeof el.animate !== 'function')

package/dist/components/packs.js

@@ -1,5 +1,5 @@
-import { p as prefersReducedMotion, n as now, m as motionScale, r as raf, l as EASE_OUT, f as clamp, E as EASE_SPRING, k as defineElement } from '../chunks/base-BtJDNCB6.js';
-export { d as configureComponents } from '../chunks/base-BtJDNCB6.js';
+import { p as prefersReducedMotion, n as now, m as motionScale, r as raf, v as EASE_OUT, j as clamp, E as EASE_SPRING, u as defineElement } from '../chunks/base-CZiIAMBc.js';
+export { f as configureComponents } from '../chunks/base-CZiIAMBc.js';
 
 const anim = (el, frames, o) => {
     if (typeof el.animate !== 'function')

package/dist/components/page.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
-var base = require('../chunks/base-DE2yzxE7.cjs');
-var spring = require('../chunks/spring-hsmgd7ml.cjs');
+var base = require('../chunks/base-CxYU2NK_.cjs');
+var spring = require('../chunks/spring-Dkpygsuj.cjs');
 
 var css$8 = "usa-cursor{--usa-cursor-color:var(--usa-accent,#7c5cff);--usa-cursor-size:28px;position:fixed;inset:0;pointer-events:none;z-index:2147483600;opacity:0;transition:opacity 0.2s ease;contain:strict}usa-cursor[data-active]{opacity:1}usa-cursor .usa-cursor-ring{position:absolute;left:0;top:0;width:var(--usa-cursor-size);height:var(--usa-cursor-size);margin:calc(var(--usa-cursor-size) / -2) 0 0 calc(var(--usa-cursor-size) / -2);border:1.5px solid var(--usa-cursor-color);border-radius:999px;box-sizing:border-box;transition:width 0.25s cubic-bezier(0.34,1.56,0.64,1),height 0.25s cubic-bezier(0.34,1.56,0.64,1),margin 0.25s ease,border-radius 0.25s ease,background-color 0.2s ease;will-change:transform}usa-cursor[mode=\"trail\"] .usa-cursor-ring{border:0;background:var(--usa-cursor-color);width:calc(var(--usa-cursor-size) * (0.45 - var(--i) * 0.04));height:calc(var(--usa-cursor-size) * (0.45 - var(--i) * 0.04));margin:calc(var(--usa-cursor-size) * (0.45 - var(--i) * 0.04) / -2) 0 0 calc(var(--usa-cursor-size) * (0.45 - var(--i) * 0.04) / -2);opacity:calc(1 - var(--i) * 0.11)}usa-cursor[data-hover] .usa-cursor-ring:first-child{width:calc(var(--usa-cursor-size) * 1.6);height:calc(var(--usa-cursor-size) * 1.6);margin:calc(var(--usa-cursor-size) * -0.8) 0 0 calc(var(--usa-cursor-size) * -0.8);background:color-mix(in srgb,var(--usa-cursor-color) 15%,transparent)}usa-cursor[data-snapped] .usa-cursor-ring{border-radius:12px;background:color-mix(in srgb,var(--usa-cursor-color) 12%,transparent);translate:-50% -50%;margin:0}usa-cursor[data-down] .usa-cursor-ring:first-child{scale:0.8}usa-cursor .usa-cursor-dot{position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;background:var(--usa-cursor-color)}usa-cursor[data-snapped] .usa-cursor-dot{opacity:0}usa-cursor .usa-cursor-glow{position:absolute;left:-200px;top:-200px;width:400px;height:400px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--usa-cursor-color) 35%,transparent),transparent 65%);mix-blend-mode:screen}.usa-cursor-none,.usa-cursor-none *{cursor:none !important}@media (pointer:coarse),(prefers-reduced-motion:reduce){usa-cursor{display:none}.usa-cursor-none,.usa-cursor-none *{cursor:auto !important}}";
 

package/dist/components/page.js

@@ -1,6 +1,6 @@
-import { k as defineElement, h as caf, r as raf, p as prefersReducedMotion, n as now, g as getMotionIntensity, d as configureComponents, j as adoptStyles } from '../chunks/base-BtJDNCB6.js';
-export { M as MOTION_SCALE } from '../chunks/base-BtJDNCB6.js';
-import { e as springSamples } from '../chunks/spring-CxRz49Wk.js';
+import { u as defineElement, k as caf, r as raf, p as prefersReducedMotion, n as now, g as getMotionIntensity, f as configureComponents, q as adoptStyles } from '../chunks/base-CZiIAMBc.js';
+export { M as MOTION_SCALE } from '../chunks/base-CZiIAMBc.js';
+import { e as springSamples } from '../chunks/spring-BS5tg6aK.js';
 
 var css$8 = "usa-cursor{--usa-cursor-color:var(--usa-accent,#7c5cff);--usa-cursor-size:28px;position:fixed;inset:0;pointer-events:none;z-index:2147483600;opacity:0;transition:opacity 0.2s ease;contain:strict}usa-cursor[data-active]{opacity:1}usa-cursor .usa-cursor-ring{position:absolute;left:0;top:0;width:var(--usa-cursor-size);height:var(--usa-cursor-size);margin:calc(var(--usa-cursor-size) / -2) 0 0 calc(var(--usa-cursor-size) / -2);border:1.5px solid var(--usa-cursor-color);border-radius:999px;box-sizing:border-box;transition:width 0.25s cubic-bezier(0.34,1.56,0.64,1),height 0.25s cubic-bezier(0.34,1.56,0.64,1),margin 0.25s ease,border-radius 0.25s ease,background-color 0.2s ease;will-change:transform}usa-cursor[mode=\"trail\"] .usa-cursor-ring{border:0;background:var(--usa-cursor-color);width:calc(var(--usa-cursor-size) * (0.45 - var(--i) * 0.04));height:calc(var(--usa-cursor-size) * (0.45 - var(--i) * 0.04));margin:calc(var(--usa-cursor-size) * (0.45 - var(--i) * 0.04) / -2) 0 0 calc(var(--usa-cursor-size) * (0.45 - var(--i) * 0.04) / -2);opacity:calc(1 - var(--i) * 0.11)}usa-cursor[data-hover] .usa-cursor-ring:first-child{width:calc(var(--usa-cursor-size) * 1.6);height:calc(var(--usa-cursor-size) * 1.6);margin:calc(var(--usa-cursor-size) * -0.8) 0 0 calc(var(--usa-cursor-size) * -0.8);background:color-mix(in srgb,var(--usa-cursor-color) 15%,transparent)}usa-cursor[data-snapped] .usa-cursor-ring{border-radius:12px;background:color-mix(in srgb,var(--usa-cursor-color) 12%,transparent);translate:-50% -50%;margin:0}usa-cursor[data-down] .usa-cursor-ring:first-child{scale:0.8}usa-cursor .usa-cursor-dot{position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;background:var(--usa-cursor-color)}usa-cursor[data-snapped] .usa-cursor-dot{opacity:0}usa-cursor .usa-cursor-glow{position:absolute;left:-200px;top:-200px;width:400px;height:400px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--usa-cursor-color) 35%,transparent),transparent 65%);mix-blend-mode:screen}.usa-cursor-none,.usa-cursor-none *{cursor:none !important}@media (pointer:coarse),(prefers-reduced-motion:reduce){usa-cursor{display:none}.usa-cursor-none,.usa-cursor-none *{cursor:auto !important}}";
 

package/dist/components/perf.cjs

@@ -0,0 +1,121 @@
+'use strict';
+
+var base = require('../chunks/base-CxYU2NK_.cjs');
+var indexTags = require('../chunks/index-tags-BQh_uGqH.cjs');
+
+/**
+ * use-scroll-animate/components/perf — performance toolkit (4.5).
+ *
+ * - One shared rAF scheduler for every component loop (`onFrame()`, `schedulerStats()`).
+ * - Animation budget: `setAnimationBudget(n)` caps concurrent component
+ *   animations; extra ones land on their final frame.
+ * - `autoDegrade()`: watches frame rate and animation count and steps motion
+ *   down (`low`, then a tighter budget) while the device struggles, restoring
+ *   it when frames recover.
+ * - On-demand CSS: `loadCategoryStyles()` / `onDemandStyles()` — used by
+ *   `use-scroll-animate/components/lite`, the build without inlined CSS.
+ */
+/**
+ * Watch frame rate and animation count; while the device struggles, set
+ * motion intensity to `low` and cap concurrent animations at `maxActive / 2`,
+ * then restore the previous settings once frames recover. Dispatches
+ * `usa:degrade` on `document`. Returns a stop function (restores settings).
+ */
+function autoDegrade(options = {}) {
+    const { minFps = 45, maxActive = 40, sample = 1000, patience = 2, recovery = 3, onChange } = options;
+    let frames = 0;
+    let elapsed = 0;
+    let bad = 0;
+    let good = 0;
+    let prev = null;
+    const state = { degraded: false, fps: 60, active: 0, reason: '' };
+    const set = (degraded, reason) => {
+        if (degraded === state.degraded)
+            return;
+        state.degraded = degraded;
+        state.reason = reason;
+        if (degraded) {
+            prev = { intensity: base.getMotionIntensity(), budget: base.animationBudget() };
+            if (prev.intensity !== 'off')
+                base.configureComponents({ motionIntensity: 'low' });
+            base.setAnimationBudget(Math.max(4, Math.floor(maxActive / 2)));
+        }
+        else if (prev) {
+            base.configureComponents({ motionIntensity: prev.intensity });
+            base.setAnimationBudget(prev.budget);
+            prev = null;
+        }
+        onChange?.({ ...state });
+        if (typeof document !== 'undefined')
+            document.dispatchEvent(new CustomEvent('usa:degrade', { detail: { ...state } }));
+    };
+    const stop = base.onFrame((_t, dt) => {
+        frames++;
+        elapsed += Math.min(dt, 250);
+        if (elapsed < sample)
+            return;
+        state.fps = Math.round((frames * 1000) / elapsed);
+        state.active = base.activeAnimations();
+        frames = 0;
+        elapsed = 0;
+        const reason = state.fps < minFps ? 'fps' : state.active > maxActive ? 'count' : '';
+        if (reason) {
+            good = 0;
+            if (++bad >= patience)
+                set(true, reason);
+        }
+        else {
+            bad = 0;
+            if (++good >= recovery)
+                set(false, '');
+        }
+    });
+    return () => {
+        stop();
+        set(false, '');
+    };
+}
+const TAG_CATEGORY = {};
+for (const [cat, tags] of Object.entries(indexTags.COMPONENT_CATEGORIES))
+    for (const t of tags)
+        TAG_CATEGORY[t] = cat;
+/** The category of a default `<usa-*>` tag. */
+const categoryOf = (tag) => TAG_CATEGORY[tag];
+const loaded = new Set();
+/**
+ * Add `<link rel="stylesheet" href="{base}components/{category}.css">` once.
+ * `base` is the URL of the package's `dist/` folder.
+ */
+function loadCategoryStyles(category, base) {
+    if (typeof document === 'undefined' || loaded.has(category))
+        return null;
+    loaded.add(category);
+    const link = document.createElement('link');
+    link.rel = 'stylesheet';
+    link.href = `${base.replace(/\/?$/, '/')}${category === 'all' ? 'components.css' : `components/${category}.css`}`;
+    link.setAttribute('data-usa-css', category);
+    document.head.appendChild(link);
+    return link;
+}
+/**
+ * Load each category's CSS the first time one of its elements connects
+ * (custom tags fall back to the full stylesheet). Returns an undo.
+ */
+function onDemandStyles(base$1) {
+    base.setStyleLoader((tag) => loadCategoryStyles(categoryOf(tag) || 'all', base$1));
+    return () => base.setStyleLoader(null);
+}
+/** Categories whose CSS has been requested so far. */
+const loadedStyles = () => Array.from(loaded);
+
+exports.activeAnimations = base.activeAnimations;
+exports.animationBudget = base.animationBudget;
+exports.onFrame = base.onFrame;
+exports.schedulerStats = base.schedulerStats;
+exports.setAnimationBudget = base.setAnimationBudget;
+exports.autoDegrade = autoDegrade;
+exports.categoryOf = categoryOf;
+exports.loadCategoryStyles = loadCategoryStyles;
+exports.loadedStyles = loadedStyles;
+exports.onDemandStyles = onDemandStyles;
+//# sourceMappingURL=perf.cjs.map

package/dist/components/perf.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"perf.cjs","sources":["../../src/components/perf/index.ts"],"sourcesContent":["/**\n * use-scroll-animate/components/perf — performance toolkit (4.5).\n *\n * - One shared rAF scheduler for every component loop (`onFrame()`, `schedulerStats()`).\n * - Animation budget: `setAnimationBudget(n)` caps concurrent component\n *   animations; extra ones land on their final frame.\n * - `autoDegrade()`: watches frame rate and animation count and steps motion\n *   down (`low`, then a tighter budget) while the device struggles, restoring\n *   it when frames recover.\n * - On-demand CSS: `loadCategoryStyles()` / `onDemandStyles()` — used by\n *   `use-scroll-animate/components/lite`, the build without inlined CSS.\n */\nimport {\n  onFrame,\n  schedulerStats,\n  activeAnimations,\n  setAnimationBudget,\n  animationBudget,\n  setStyleLoader,\n  configureComponents,\n  getMotionIntensity,\n  type MotionIntensity,\n} from '../base';\nimport { COMPONENT_CATEGORIES, type ComponentCategory } from '../index-tags';\n\nexport { onFrame, schedulerStats, activeAnimations, setAnimationBudget, animationBudget };\n\nexport interface AutoDegradeOptions {\n  /** Frame rate below which motion is degraded (default 45). */\n  minFps?: number;\n  /** Concurrent animations above which motion is degraded (default 40). */\n  maxActive?: number;\n  /** Sample window in ms (default 1000). */\n  sample?: number;\n  /** Bad samples in a row before degrading (default 2). */\n  patience?: number;\n  /** Good samples in a row before restoring (default 3). */\n  recovery?: number;\n  /** Called on every change. */\n  onChange?: (state: DegradeState) => void;\n}\n\nexport interface DegradeState {\n  degraded: boolean;\n  fps: number;\n  active: number;\n  reason: '' | 'fps' | 'count';\n}\n\n/**\n * Watch frame rate and animation count; while the device struggles, set\n * motion intensity to `low` and cap concurrent animations at `maxActive / 2`,\n * then restore the previous settings once frames recover. Dispatches\n * `usa:degrade` on `document`. Returns a stop function (restores settings).\n */\nexport function autoDegrade(options: AutoDegradeOptions = {}): () => void {\n  const { minFps = 45, maxActive = 40, sample = 1000, patience = 2, recovery = 3, onChange } = options;\n  let frames = 0;\n  let elapsed = 0;\n  let bad = 0;\n  let good = 0;\n  let prev: { intensity: MotionIntensity; budget: number } | null = null;\n  const state: DegradeState = { degraded: false, fps: 60, active: 0, reason: '' };\n  const set = (degraded: boolean, reason: DegradeState['reason']) => {\n    if (degraded === state.degraded) return;\n    state.degraded = degraded;\n    state.reason = reason;\n    if (degraded) {\n      prev = { intensity: getMotionIntensity(), budget: animationBudget() };\n      if (prev.intensity !== 'off') configureComponents({ motionIntensity: 'low' });\n      setAnimationBudget(Math.max(4, Math.floor(maxActive / 2)));\n    } else if (prev) {\n      configureComponents({ motionIntensity: prev.intensity });\n      setAnimationBudget(prev.budget);\n      prev = null;\n    }\n    onChange?.({ ...state });\n    if (typeof document !== 'undefined') document.dispatchEvent(new CustomEvent('usa:degrade', { detail: { ...state } }));\n  };\n  const stop = onFrame((_t, dt) => {\n    frames++;\n    elapsed += Math.min(dt, 250);\n    if (elapsed < sample) return;\n    state.fps = Math.round((frames * 1000) / elapsed);\n    state.active = activeAnimations();\n    frames = 0;\n    elapsed = 0;\n    const reason = state.fps < minFps ? 'fps' : state.active > maxActive ? 'count' : '';\n    if (reason) {\n      good = 0;\n      if (++bad >= patience) set(true, reason);\n    } else {\n      bad = 0;\n      if (++good >= recovery) set(false, '');\n    }\n  });\n  return () => {\n    stop();\n    set(false, '');\n  };\n}\n\nconst TAG_CATEGORY: Record<string, ComponentCategory> = {};\nfor (const [cat, tags] of Object.entries(COMPONENT_CATEGORIES)) for (const t of tags) TAG_CATEGORY[t] = cat as ComponentCategory;\n/** The category of a default `<usa-*>` tag. */\nexport const categoryOf = (tag: string): ComponentCategory | undefined => TAG_CATEGORY[tag];\n\nconst loaded = new Set<string>();\n/**\n * Add `<link rel=\"stylesheet\" href=\"{base}components/{category}.css\">` once.\n * `base` is the URL of the package's `dist/` folder.\n */\nexport function loadCategoryStyles(category: ComponentCategory | 'all', base: string): HTMLLinkElement | null {\n  if (typeof document === 'undefined' || loaded.has(category)) return null;\n  loaded.add(category);\n  const link = document.createElement('link');\n  link.rel = 'stylesheet';\n  link.href = `${base.replace(/\\/?$/, '/')}${category === 'all' ? 'components.css' : `components/${category}.css`}`;\n  link.setAttribute('data-usa-css', category);\n  document.head.appendChild(link);\n  return link;\n}\n\n/**\n * Load each category's CSS the first time one of its elements connects\n * (custom tags fall back to the full stylesheet). Returns an undo.\n */\nexport function onDemandStyles(base: string): () => void {\n  setStyleLoader((tag) => loadCategoryStyles(categoryOf(tag) || 'all', base));\n  return () => setStyleLoader(null);\n}\n\n/** Categories whose CSS has been requested so far. */\nexport const loadedStyles = (): string[] => Array.from(loaded);\n"],"names":["getMotionIntensity","animationBudget","configureComponents","setAnimationBudget","onFrame","activeAnimations","COMPONENT_CATEGORIES","base","setStyleLoader"],"mappings":"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"}

package/dist/components/perf.d.cts

@@ -0,0 +1,97 @@
+/** Run `fn(time, dt)` every frame on the shared scheduler until the returned function is called. */
+declare function onFrame(fn: (t: number, dt: number) => void): () => void;
+/** Scheduler counters: frames flushed, callbacks run, peak callbacks in one frame, pending now. */
+declare function schedulerStats(): {
+    frames: number;
+    callbacks: number;
+    peak: number;
+    pending: number;
+    loops: number;
+};
+/** Number of component animations running right now. */
+declare const activeAnimations: () => number;
+/** Cap concurrent component animations; extra ones jump to their final frame (`Infinity` = no cap). */
+declare function setAnimationBudget(max: number): void;
+/** The current cap. */
+declare const animationBudget: () => number;
+
+/** The component categories and their default tags. */
+declare const COMPONENT_CATEGORIES: {
+    readonly reveal: readonly ["usa-reveal", "usa-stagger", "usa-scroll-progress", "usa-scrolly"];
+    readonly text: readonly ["usa-typewriter", "usa-split-text", "usa-scramble", "usa-counter", "usa-shimmer-text", "usa-text-rotate", "usa-wave-text", "usa-glitch", "usa-gradient-text", "usa-handwriting", "usa-scroll-highlight"];
+    readonly interaction: readonly ["usa-ripple", "usa-magnetic", "usa-tilt", "usa-spotlight", "usa-press", "usa-toggle"];
+    readonly feedback: readonly ["usa-spinner", "usa-skeleton", "usa-progress", "usa-toaster", "usa-check"];
+    readonly background: readonly ["usa-aurora", "usa-particles", "usa-grain", "usa-marquee", "usa-acrylic", "usa-grid-glow", "usa-blobs", "usa-water-ripple", "usa-dot-network"];
+    readonly transitions: readonly ["usa-dialog", "usa-accordion", "usa-view-switch"];
+    readonly physics: readonly ["usa-spring", "usa-draggable", "usa-overscroll"];
+    readonly cards: readonly ["usa-card", "usa-card-stack", "usa-sticky-stack", "usa-carousel-3d"];
+    readonly click: readonly ["usa-click", "usa-button", "usa-icon-morph", "usa-like", "usa-hold", "usa-double-tap", "usa-checkbox"];
+    readonly ui: readonly ["usa-tabs", "usa-drawer", "usa-bottom-sheet", "usa-pull-refresh", "usa-fab", "usa-navbar", "usa-slider", "usa-rating", "usa-tooltip", "usa-popover", "usa-badge", "usa-avatar-stack"];
+    readonly page: readonly ["usa-cursor", "usa-fullpage", "usa-loading-bar", "usa-back-to-top", "usa-ambient", "usa-splash", "usa-auto-skeleton", "usa-motion-switch"];
+    readonly timeline: readonly ["usa-timeline"];
+    readonly gesture: readonly ["usa-swipeable", "usa-pinch-zoom"];
+    readonly svg: readonly ["usa-draw", "usa-morph", "usa-mask-reveal", "usa-anim-icon"];
+    readonly webgl: readonly ["usa-shader", "usa-distort", "usa-liquid"];
+    readonly depth: readonly ["usa-cube", "usa-depth"];
+    readonly layout: readonly ["usa-auto-animate", "usa-masonry"];
+    readonly packs: readonly ["usa-pack"];
+};
+type ComponentCategory = keyof typeof COMPONENT_CATEGORIES;
+
+/**
+ * use-scroll-animate/components/perf — performance toolkit (4.5).
+ *
+ * - One shared rAF scheduler for every component loop (`onFrame()`, `schedulerStats()`).
+ * - Animation budget: `setAnimationBudget(n)` caps concurrent component
+ *   animations; extra ones land on their final frame.
+ * - `autoDegrade()`: watches frame rate and animation count and steps motion
+ *   down (`low`, then a tighter budget) while the device struggles, restoring
+ *   it when frames recover.
+ * - On-demand CSS: `loadCategoryStyles()` / `onDemandStyles()` — used by
+ *   `use-scroll-animate/components/lite`, the build without inlined CSS.
+ */
+
+interface AutoDegradeOptions {
+    /** Frame rate below which motion is degraded (default 45). */
+    minFps?: number;
+    /** Concurrent animations above which motion is degraded (default 40). */
+    maxActive?: number;
+    /** Sample window in ms (default 1000). */
+    sample?: number;
+    /** Bad samples in a row before degrading (default 2). */
+    patience?: number;
+    /** Good samples in a row before restoring (default 3). */
+    recovery?: number;
+    /** Called on every change. */
+    onChange?: (state: DegradeState) => void;
+}
+interface DegradeState {
+    degraded: boolean;
+    fps: number;
+    active: number;
+    reason: '' | 'fps' | 'count';
+}
+/**
+ * Watch frame rate and animation count; while the device struggles, set
+ * motion intensity to `low` and cap concurrent animations at `maxActive / 2`,
+ * then restore the previous settings once frames recover. Dispatches
+ * `usa:degrade` on `document`. Returns a stop function (restores settings).
+ */
+declare function autoDegrade(options?: AutoDegradeOptions): () => void;
+/** The category of a default `<usa-*>` tag. */
+declare const categoryOf: (tag: string) => ComponentCategory | undefined;
+/**
+ * Add `<link rel="stylesheet" href="{base}components/{category}.css">` once.
+ * `base` is the URL of the package's `dist/` folder.
+ */
+declare function loadCategoryStyles(category: ComponentCategory | 'all', base: string): HTMLLinkElement | null;
+/**
+ * Load each category's CSS the first time one of its elements connects
+ * (custom tags fall back to the full stylesheet). Returns an undo.
+ */
+declare function onDemandStyles(base: string): () => void;
+/** Categories whose CSS has been requested so far. */
+declare const loadedStyles: () => string[];
+
+export { activeAnimations, animationBudget, autoDegrade, categoryOf, loadCategoryStyles, loadedStyles, onDemandStyles, onFrame, schedulerStats, setAnimationBudget };
+export type { AutoDegradeOptions, DegradeState };

package/dist/components/perf.d.ts

@@ -0,0 +1,97 @@
+/** Run `fn(time, dt)` every frame on the shared scheduler until the returned function is called. */
+declare function onFrame(fn: (t: number, dt: number) => void): () => void;
+/** Scheduler counters: frames flushed, callbacks run, peak callbacks in one frame, pending now. */
+declare function schedulerStats(): {
+    frames: number;
+    callbacks: number;
+    peak: number;
+    pending: number;
+    loops: number;
+};
+/** Number of component animations running right now. */
+declare const activeAnimations: () => number;
+/** Cap concurrent component animations; extra ones jump to their final frame (`Infinity` = no cap). */
+declare function setAnimationBudget(max: number): void;
+/** The current cap. */
+declare const animationBudget: () => number;
+
+/** The component categories and their default tags. */
+declare const COMPONENT_CATEGORIES: {
+    readonly reveal: readonly ["usa-reveal", "usa-stagger", "usa-scroll-progress", "usa-scrolly"];
+    readonly text: readonly ["usa-typewriter", "usa-split-text", "usa-scramble", "usa-counter", "usa-shimmer-text", "usa-text-rotate", "usa-wave-text", "usa-glitch", "usa-gradient-text", "usa-handwriting", "usa-scroll-highlight"];
+    readonly interaction: readonly ["usa-ripple", "usa-magnetic", "usa-tilt", "usa-spotlight", "usa-press", "usa-toggle"];
+    readonly feedback: readonly ["usa-spinner", "usa-skeleton", "usa-progress", "usa-toaster", "usa-check"];
+    readonly background: readonly ["usa-aurora", "usa-particles", "usa-grain", "usa-marquee", "usa-acrylic", "usa-grid-glow", "usa-blobs", "usa-water-ripple", "usa-dot-network"];
+    readonly transitions: readonly ["usa-dialog", "usa-accordion", "usa-view-switch"];
+    readonly physics: readonly ["usa-spring", "usa-draggable", "usa-overscroll"];
+    readonly cards: readonly ["usa-card", "usa-card-stack", "usa-sticky-stack", "usa-carousel-3d"];
+    readonly click: readonly ["usa-click", "usa-button", "usa-icon-morph", "usa-like", "usa-hold", "usa-double-tap", "usa-checkbox"];
+    readonly ui: readonly ["usa-tabs", "usa-drawer", "usa-bottom-sheet", "usa-pull-refresh", "usa-fab", "usa-navbar", "usa-slider", "usa-rating", "usa-tooltip", "usa-popover", "usa-badge", "usa-avatar-stack"];
+    readonly page: readonly ["usa-cursor", "usa-fullpage", "usa-loading-bar", "usa-back-to-top", "usa-ambient", "usa-splash", "usa-auto-skeleton", "usa-motion-switch"];
+    readonly timeline: readonly ["usa-timeline"];
+    readonly gesture: readonly ["usa-swipeable", "usa-pinch-zoom"];
+    readonly svg: readonly ["usa-draw", "usa-morph", "usa-mask-reveal", "usa-anim-icon"];
+    readonly webgl: readonly ["usa-shader", "usa-distort", "usa-liquid"];
+    readonly depth: readonly ["usa-cube", "usa-depth"];
+    readonly layout: readonly ["usa-auto-animate", "usa-masonry"];
+    readonly packs: readonly ["usa-pack"];
+};
+type ComponentCategory = keyof typeof COMPONENT_CATEGORIES;
+
+/**
+ * use-scroll-animate/components/perf — performance toolkit (4.5).
+ *
+ * - One shared rAF scheduler for every component loop (`onFrame()`, `schedulerStats()`).
+ * - Animation budget: `setAnimationBudget(n)` caps concurrent component
+ *   animations; extra ones land on their final frame.
+ * - `autoDegrade()`: watches frame rate and animation count and steps motion
+ *   down (`low`, then a tighter budget) while the device struggles, restoring
+ *   it when frames recover.
+ * - On-demand CSS: `loadCategoryStyles()` / `onDemandStyles()` — used by
+ *   `use-scroll-animate/components/lite`, the build without inlined CSS.
+ */
+
+interface AutoDegradeOptions {
+    /** Frame rate below which motion is degraded (default 45). */
+    minFps?: number;
+    /** Concurrent animations above which motion is degraded (default 40). */
+    maxActive?: number;
+    /** Sample window in ms (default 1000). */
+    sample?: number;
+    /** Bad samples in a row before degrading (default 2). */
+    patience?: number;
+    /** Good samples in a row before restoring (default 3). */
+    recovery?: number;
+    /** Called on every change. */
+    onChange?: (state: DegradeState) => void;
+}
+interface DegradeState {
+    degraded: boolean;
+    fps: number;
+    active: number;
+    reason: '' | 'fps' | 'count';
+}
+/**
+ * Watch frame rate and animation count; while the device struggles, set
+ * motion intensity to `low` and cap concurrent animations at `maxActive / 2`,
+ * then restore the previous settings once frames recover. Dispatches
+ * `usa:degrade` on `document`. Returns a stop function (restores settings).
+ */
+declare function autoDegrade(options?: AutoDegradeOptions): () => void;
+/** The category of a default `<usa-*>` tag. */
+declare const categoryOf: (tag: string) => ComponentCategory | undefined;
+/**
+ * Add `<link rel="stylesheet" href="{base}components/{category}.css">` once.
+ * `base` is the URL of the package's `dist/` folder.
+ */
+declare function loadCategoryStyles(category: ComponentCategory | 'all', base: string): HTMLLinkElement | null;
+/**
+ * Load each category's CSS the first time one of its elements connects
+ * (custom tags fall back to the full stylesheet). Returns an undo.
+ */
+declare function onDemandStyles(base: string): () => void;
+/** Categories whose CSS has been requested so far. */
+declare const loadedStyles: () => string[];
+
+export { activeAnimations, animationBudget, autoDegrade, categoryOf, loadCategoryStyles, loadedStyles, onDemandStyles, onFrame, schedulerStats, setAnimationBudget };
+export type { AutoDegradeOptions, DegradeState };

package/dist/components/perf.js

@@ -0,0 +1,111 @@
+import { o as onFrame, t as setStyleLoader, e as animationBudget, g as getMotionIntensity, f as configureComponents, i as setAnimationBudget, b as activeAnimations } from '../chunks/base-CZiIAMBc.js';
+export { s as schedulerStats } from '../chunks/base-CZiIAMBc.js';
+import { C as COMPONENT_CATEGORIES } from '../chunks/index-tags-43Xtd01A.js';
+
+/**
+ * use-scroll-animate/components/perf — performance toolkit (4.5).
+ *
+ * - One shared rAF scheduler for every component loop (`onFrame()`, `schedulerStats()`).
+ * - Animation budget: `setAnimationBudget(n)` caps concurrent component
+ *   animations; extra ones land on their final frame.
+ * - `autoDegrade()`: watches frame rate and animation count and steps motion
+ *   down (`low`, then a tighter budget) while the device struggles, restoring
+ *   it when frames recover.
+ * - On-demand CSS: `loadCategoryStyles()` / `onDemandStyles()` — used by
+ *   `use-scroll-animate/components/lite`, the build without inlined CSS.
+ */
+/**
+ * Watch frame rate and animation count; while the device struggles, set
+ * motion intensity to `low` and cap concurrent animations at `maxActive / 2`,
+ * then restore the previous settings once frames recover. Dispatches
+ * `usa:degrade` on `document`. Returns a stop function (restores settings).
+ */
+function autoDegrade(options = {}) {
+    const { minFps = 45, maxActive = 40, sample = 1000, patience = 2, recovery = 3, onChange } = options;
+    let frames = 0;
+    let elapsed = 0;
+    let bad = 0;
+    let good = 0;
+    let prev = null;
+    const state = { degraded: false, fps: 60, active: 0, reason: '' };
+    const set = (degraded, reason) => {
+        if (degraded === state.degraded)
+            return;
+        state.degraded = degraded;
+        state.reason = reason;
+        if (degraded) {
+            prev = { intensity: getMotionIntensity(), budget: animationBudget() };
+            if (prev.intensity !== 'off')
+                configureComponents({ motionIntensity: 'low' });
+            setAnimationBudget(Math.max(4, Math.floor(maxActive / 2)));
+        }
+        else if (prev) {
+            configureComponents({ motionIntensity: prev.intensity });
+            setAnimationBudget(prev.budget);
+            prev = null;
+        }
+        onChange?.({ ...state });
+        if (typeof document !== 'undefined')
+            document.dispatchEvent(new CustomEvent('usa:degrade', { detail: { ...state } }));
+    };
+    const stop = onFrame((_t, dt) => {
+        frames++;
+        elapsed += Math.min(dt, 250);
+        if (elapsed < sample)
+            return;
+        state.fps = Math.round((frames * 1000) / elapsed);
+        state.active = activeAnimations();
+        frames = 0;
+        elapsed = 0;
+        const reason = state.fps < minFps ? 'fps' : state.active > maxActive ? 'count' : '';
+        if (reason) {
+            good = 0;
+            if (++bad >= patience)
+                set(true, reason);
+        }
+        else {
+            bad = 0;
+            if (++good >= recovery)
+                set(false, '');
+        }
+    });
+    return () => {
+        stop();
+        set(false, '');
+    };
+}
+const TAG_CATEGORY = {};
+for (const [cat, tags] of Object.entries(COMPONENT_CATEGORIES))
+    for (const t of tags)
+        TAG_CATEGORY[t] = cat;
+/** The category of a default `<usa-*>` tag. */
+const categoryOf = (tag) => TAG_CATEGORY[tag];
+const loaded = new Set();
+/**
+ * Add `<link rel="stylesheet" href="{base}components/{category}.css">` once.
+ * `base` is the URL of the package's `dist/` folder.
+ */
+function loadCategoryStyles(category, base) {
+    if (typeof document === 'undefined' || loaded.has(category))
+        return null;
+    loaded.add(category);
+    const link = document.createElement('link');
+    link.rel = 'stylesheet';
+    link.href = `${base.replace(/\/?$/, '/')}${category === 'all' ? 'components.css' : `components/${category}.css`}`;
+    link.setAttribute('data-usa-css', category);
+    document.head.appendChild(link);
+    return link;
+}
+/**
+ * Load each category's CSS the first time one of its elements connects
+ * (custom tags fall back to the full stylesheet). Returns an undo.
+ */
+function onDemandStyles(base) {
+    setStyleLoader((tag) => loadCategoryStyles(categoryOf(tag) || 'all', base));
+    return () => setStyleLoader(null);
+}
+/** Categories whose CSS has been requested so far. */
+const loadedStyles = () => Array.from(loaded);
+
+export { activeAnimations, animationBudget, autoDegrade, categoryOf, loadCategoryStyles, loadedStyles, onDemandStyles, onFrame, setAnimationBudget };
+//# sourceMappingURL=perf.js.map

package/dist/components/perf.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"perf.js","sources":["../../src/components/perf/index.ts"],"sourcesContent":["/**\n * use-scroll-animate/components/perf — performance toolkit (4.5).\n *\n * - One shared rAF scheduler for every component loop (`onFrame()`, `schedulerStats()`).\n * - Animation budget: `setAnimationBudget(n)` caps concurrent component\n *   animations; extra ones land on their final frame.\n * - `autoDegrade()`: watches frame rate and animation count and steps motion\n *   down (`low`, then a tighter budget) while the device struggles, restoring\n *   it when frames recover.\n * - On-demand CSS: `loadCategoryStyles()` / `onDemandStyles()` — used by\n *   `use-scroll-animate/components/lite`, the build without inlined CSS.\n */\nimport {\n  onFrame,\n  schedulerStats,\n  activeAnimations,\n  setAnimationBudget,\n  animationBudget,\n  setStyleLoader,\n  configureComponents,\n  getMotionIntensity,\n  type MotionIntensity,\n} from '../base';\nimport { COMPONENT_CATEGORIES, type ComponentCategory } from '../index-tags';\n\nexport { onFrame, schedulerStats, activeAnimations, setAnimationBudget, animationBudget };\n\nexport interface AutoDegradeOptions {\n  /** Frame rate below which motion is degraded (default 45). */\n  minFps?: number;\n  /** Concurrent animations above which motion is degraded (default 40). */\n  maxActive?: number;\n  /** Sample window in ms (default 1000). */\n  sample?: number;\n  /** Bad samples in a row before degrading (default 2). */\n  patience?: number;\n  /** Good samples in a row before restoring (default 3). */\n  recovery?: number;\n  /** Called on every change. */\n  onChange?: (state: DegradeState) => void;\n}\n\nexport interface DegradeState {\n  degraded: boolean;\n  fps: number;\n  active: number;\n  reason: '' | 'fps' | 'count';\n}\n\n/**\n * Watch frame rate and animation count; while the device struggles, set\n * motion intensity to `low` and cap concurrent animations at `maxActive / 2`,\n * then restore the previous settings once frames recover. Dispatches\n * `usa:degrade` on `document`. Returns a stop function (restores settings).\n */\nexport function autoDegrade(options: AutoDegradeOptions = {}): () => void {\n  const { minFps = 45, maxActive = 40, sample = 1000, patience = 2, recovery = 3, onChange } = options;\n  let frames = 0;\n  let elapsed = 0;\n  let bad = 0;\n  let good = 0;\n  let prev: { intensity: MotionIntensity; budget: number } | null = null;\n  const state: DegradeState = { degraded: false, fps: 60, active: 0, reason: '' };\n  const set = (degraded: boolean, reason: DegradeState['reason']) => {\n    if (degraded === state.degraded) return;\n    state.degraded = degraded;\n    state.reason = reason;\n    if (degraded) {\n      prev = { intensity: getMotionIntensity(), budget: animationBudget() };\n      if (prev.intensity !== 'off') configureComponents({ motionIntensity: 'low' });\n      setAnimationBudget(Math.max(4, Math.floor(maxActive / 2)));\n    } else if (prev) {\n      configureComponents({ motionIntensity: prev.intensity });\n      setAnimationBudget(prev.budget);\n      prev = null;\n    }\n    onChange?.({ ...state });\n    if (typeof document !== 'undefined') document.dispatchEvent(new CustomEvent('usa:degrade', { detail: { ...state } }));\n  };\n  const stop = onFrame((_t, dt) => {\n    frames++;\n    elapsed += Math.min(dt, 250);\n    if (elapsed < sample) return;\n    state.fps = Math.round((frames * 1000) / elapsed);\n    state.active = activeAnimations();\n    frames = 0;\n    elapsed = 0;\n    const reason = state.fps < minFps ? 'fps' : state.active > maxActive ? 'count' : '';\n    if (reason) {\n      good = 0;\n      if (++bad >= patience) set(true, reason);\n    } else {\n      bad = 0;\n      if (++good >= recovery) set(false, '');\n    }\n  });\n  return () => {\n    stop();\n    set(false, '');\n  };\n}\n\nconst TAG_CATEGORY: Record<string, ComponentCategory> = {};\nfor (const [cat, tags] of Object.entries(COMPONENT_CATEGORIES)) for (const t of tags) TAG_CATEGORY[t] = cat as ComponentCategory;\n/** The category of a default `<usa-*>` tag. */\nexport const categoryOf = (tag: string): ComponentCategory | undefined => TAG_CATEGORY[tag];\n\nconst loaded = new Set<string>();\n/**\n * Add `<link rel=\"stylesheet\" href=\"{base}components/{category}.css\">` once.\n * `base` is the URL of the package's `dist/` folder.\n */\nexport function loadCategoryStyles(category: ComponentCategory | 'all', base: string): HTMLLinkElement | null {\n  if (typeof document === 'undefined' || loaded.has(category)) return null;\n  loaded.add(category);\n  const link = document.createElement('link');\n  link.rel = 'stylesheet';\n  link.href = `${base.replace(/\\/?$/, '/')}${category === 'all' ? 'components.css' : `components/${category}.css`}`;\n  link.setAttribute('data-usa-css', category);\n  document.head.appendChild(link);\n  return link;\n}\n\n/**\n * Load each category's CSS the first time one of its elements connects\n * (custom tags fall back to the full stylesheet). Returns an undo.\n */\nexport function onDemandStyles(base: string): () => void {\n  setStyleLoader((tag) => loadCategoryStyles(categoryOf(tag) || 'all', base));\n  return () => setStyleLoader(null);\n}\n\n/** Categories whose CSS has been requested so far. */\nexport const loadedStyles = (): string[] => Array.from(loaded);\n"],"names":[],"mappings":"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"}

package/dist/components/physics.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
-var base = require('../chunks/base-DE2yzxE7.cjs');
-var spring = require('../chunks/spring-hsmgd7ml.cjs');
+var base = require('../chunks/base-CxYU2NK_.cjs');
+var spring = require('../chunks/spring-Dkpygsuj.cjs');
 
 var css$2 = "usa-spring{display:inline-block;transform-origin:50% 70%}usa-spring[block]{display:block}usa-spring[effect=\"drop\"]{transform-origin:50% 100%}usa-spring[data-state=\"hidden\"]{opacity:0}usa-spring[trigger=\"click\"],usa-spring[trigger=\"hover\"]{cursor:pointer;-webkit-tap-highlight-color:transparent}";
 

package/dist/components/physics.js

@@ -1,7 +1,7 @@
-import { k as defineElement, f as clamp } from '../chunks/base-BtJDNCB6.js';
-export { d as configureComponents, p as prefersReducedMotion } from '../chunks/base-BtJDNCB6.js';
-import { d as springEasing, c as createSpring, s as snapTo, a as rubberBand, p as projectInertia } from '../chunks/spring-CxRz49Wk.js';
-export { S as SPRING_PRESETS, l as linearEasing, r as resolveSpring, b as spring, e as springSamples, f as stepSpring, g as supportsLinearEasing } from '../chunks/spring-CxRz49Wk.js';
+import { u as defineElement, j as clamp } from '../chunks/base-CZiIAMBc.js';
+export { f as configureComponents, p as prefersReducedMotion } from '../chunks/base-CZiIAMBc.js';
+import { d as springEasing, c as createSpring, s as snapTo, a as rubberBand, p as projectInertia } from '../chunks/spring-BS5tg6aK.js';
+export { S as SPRING_PRESETS, l as linearEasing, r as resolveSpring, b as spring, e as springSamples, f as stepSpring, g as supportsLinearEasing } from '../chunks/spring-BS5tg6aK.js';
 
 var css$2 = "usa-spring{display:inline-block;transform-origin:50% 70%}usa-spring[block]{display:block}usa-spring[effect=\"drop\"]{transform-origin:50% 100%}usa-spring[data-state=\"hidden\"]{opacity:0}usa-spring[trigger=\"click\"],usa-spring[trigger=\"hover\"]{cursor:pointer;-webkit-tap-highlight-color:transparent}";
 

package/dist/components/reveal.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var base = require('../chunks/base-DE2yzxE7.cjs');
+var base = require('../chunks/base-CxYU2NK_.cjs');
 
 /** Entrance effects shared by `<usa-reveal>` and `<usa-stagger>` (transform / opacity / filter only). */
 const REVEAL_EFFECTS = [

package/dist/components/reveal.js

@@ -1,5 +1,5 @@
-import { k as defineElement, l as EASE_OUT, f as clamp, h as caf, r as raf } from '../chunks/base-BtJDNCB6.js';
-export { d as configureComponents, p as prefersReducedMotion } from '../chunks/base-BtJDNCB6.js';
+import { u as defineElement, v as EASE_OUT, j as clamp, k as caf, r as raf } from '../chunks/base-CZiIAMBc.js';
+export { f as configureComponents, p as prefersReducedMotion } from '../chunks/base-CZiIAMBc.js';
 
 /** Entrance effects shared by `<usa-reveal>` and `<usa-stagger>` (transform / opacity / filter only). */
 const REVEAL_EFFECTS = [

package/dist/components/solid.cjs

@@ -4,24 +4,24 @@ var solidJs = require('solid-js');
 var components = require('../components.cjs');
 var bind = require('../chunks/bind-Ui43-n2d.cjs');
 require('./reveal.cjs');
-require('../chunks/base-DE2yzxE7.cjs');
+require('../chunks/base-CxYU2NK_.cjs');
 require('./text.cjs');
-require('../chunks/core-BC9S2osy.cjs');
+require('../chunks/core-HLqH3qkA.cjs');
 require('./tokens.cjs');
 require('./interaction.cjs');
 require('./feedback.cjs');
 require('./background.cjs');
-require('../chunks/variants-CM2zaG8v.cjs');
+require('../chunks/variants-CfJzrzMh.cjs');
 require('./transitions.cjs');
 require('./physics.cjs');
-require('../chunks/spring-hsmgd7ml.cjs');
+require('../chunks/spring-Dkpygsuj.cjs');
 require('./cards.cjs');
 require('./click.cjs');
 require('./ui.cjs');
 require('./page.cjs');
 require('./timeline.cjs');
 require('./gesture.cjs');
-require('../chunks/core-DPYjLqA0.cjs');
+require('../chunks/core-CctNfzuP.cjs');
 require('./svg.cjs');
 require('./webgl.cjs');
 require('./depth.cjs');
@@ -29,6 +29,7 @@ require('./layout.cjs');
 require('./packs.cjs');
 require('./a11y.cjs');
 require('../chunks/index-tags-BQh_uGqH.cjs');
+require('./perf.cjs');
 
 /**
  * use-scroll-animate/components/solid — Solid integration (v3.8).

package/dist/components/solid.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"solid.cjs","sources":["../../src/components/frameworks/solid.ts"],"sourcesContent":["/**\n * use-scroll-animate/components/solid — Solid integration (v3.8).\n * Solid renders custom elements natively: set properties with `prop:` and\n * listen with `on:` (`<usa-toggle prop:checked={on()} on:usa:change={…}>`).\n * This entry adds `defineUsa()` (client only, SolidStart-safe), a `usa`\n * directive for `use:usa={{ props, on }}`, and JSX types.\n *\n * ```tsx\n * import { defineUsa, usa } from 'use-scroll-animate/components/solid';\n * import type {} from 'use-scroll-animate/components/solid'; // JSX types\n * onMount(() => defineUsa());\n * false && usa; // keep the directive import (Solid convention)\n * <usa-card use:usa={{ on: { flip: (e) => console.log(e.detail) } }} effect=\"flip\">…</usa-card>\n * ```\n */\nimport { createRenderEffect, onCleanup } from 'solid-js';\nimport { defineComponents, type ComponentCategory } from '../index';\nimport { bindUsa, type UsaBinding } from './bind';\nimport type { UsaIntrinsicElements } from './jsx';\n\nexport { bindUsa, usaEventName } from './bind';\nexport type { UsaBinding } from './bind';\n\n/**\n * Solid directive (`use:usa`). Solid calls it with the element and an\n * accessor; since 4.0.1 the binding is tracked with `createRenderEffect`, so\n * signals read inside `{{ props, on }}` update the element automatically and\n * the listeners are removed on cleanup. `refresh()` is kept for code that\n * calls the directive outside a reactive owner.\n */\nexport function usa(el: HTMLElement, accessor: () => UsaBinding | undefined): { refresh(): void; destroy(): void } {\n  let b: ReturnType<typeof bindUsa> | null = null;\n  const run = () => {\n    const v = accessor() || {};\n    if (b) b.update(v);\n    else b = bindUsa(el, v);\n  };\n  createRenderEffect(run);\n  if (!b) run();\n  const destroy = () => b?.destroy();\n  onCleanup(destroy);\n  return { refresh: run, destroy };\n}\n\n/** Register the elements (all, or some categories) — call from `onMount` in SSR apps. */\nexport function defineUsa(categories?: ComponentCategory[]): void {\n  if (typeof window !== 'undefined') defineComponents(categories);\n}\n\n/** JSX intrinsic elements for Solid (same attribute types as the React/Preact ones). */\nexport type SolidUsaIntrinsicElements = UsaIntrinsicElements;\n"],"names":["bindUsa","createRenderEffect","onCleanup","defineComponents"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;AAcG;AASH;;;;;;AAMG;AACG,SAAU,GAAG,CAAC,EAAe,EAAE,QAAsC,EAAA;IACzE,IAAI,CAAC,GAAsC,IAAI;IAC/C,MAAM,GAAG,GAAG,MAAK;AACf,QAAA,MAAM,CAAC,GAAG,QAAQ,EAAE,IAAI,EAAE;AAC1B,QAAA,IAAI,CAAC;AAAE,YAAA,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;;AACb,YAAA,CAAC,GAAGA,YAAO,CAAC,EAAE,EAAE,CAAC,CAAC;AACzB,IAAA,CAAC;IACDC,0BAAkB,CAAC,GAAG,CAAC;AACvB,IAAA,IAAI,CAAC,CAAC;AAAE,QAAA,GAAG,EAAE;IACb,MAAM,OAAO,GAAG,MAAM,CAAC,EAAE,OAAO,EAAE;IAClCC,iBAAS,CAAC,OAAO,CAAC;AAClB,IAAA,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE;AAClC;AAEA;AACM,SAAU,SAAS,CAAC,UAAgC,EAAA;IACxD,IAAI,OAAO,MAAM,KAAK,WAAW;QAAEC,2BAAgB,CAAC,UAAU,CAAC;AACjE;;;;;;;"}
+{"version":3,"file":"solid.cjs","sources":["../../src/components/frameworks/solid.ts"],"sourcesContent":["/**\n * use-scroll-animate/components/solid — Solid integration (v3.8).\n * Solid renders custom elements natively: set properties with `prop:` and\n * listen with `on:` (`<usa-toggle prop:checked={on()} on:usa:change={…}>`).\n * This entry adds `defineUsa()` (client only, SolidStart-safe), a `usa`\n * directive for `use:usa={{ props, on }}`, and JSX types.\n *\n * ```tsx\n * import { defineUsa, usa } from 'use-scroll-animate/components/solid';\n * import type {} from 'use-scroll-animate/components/solid'; // JSX types\n * onMount(() => defineUsa());\n * false && usa; // keep the directive import (Solid convention)\n * <usa-card use:usa={{ on: { flip: (e) => console.log(e.detail) } }} effect=\"flip\">…</usa-card>\n * ```\n */\nimport { createRenderEffect, onCleanup } from 'solid-js';\nimport { defineComponents, type ComponentCategory } from '../index';\nimport { bindUsa, type UsaBinding } from './bind';\nimport type { UsaIntrinsicElements } from './jsx';\n\nexport { bindUsa, usaEventName } from './bind';\nexport type { UsaBinding } from './bind';\n\n/**\n * Solid directive (`use:usa`). Solid calls it with the element and an\n * accessor; since 4.0.1 the binding is tracked with `createRenderEffect`, so\n * signals read inside `{{ props, on }}` update the element automatically and\n * the listeners are removed on cleanup. `refresh()` is kept for code that\n * calls the directive outside a reactive owner.\n */\nexport function usa(el: HTMLElement, accessor: () => UsaBinding | undefined): { refresh(): void; destroy(): void } {\n  let b: ReturnType<typeof bindUsa> | null = null;\n  const run = () => {\n    const v = accessor() || {};\n    if (b) b.update(v);\n    else b = bindUsa(el, v);\n  };\n  createRenderEffect(run);\n  if (!b) run();\n  const destroy = () => b?.destroy();\n  onCleanup(destroy);\n  return { refresh: run, destroy };\n}\n\n/** Register the elements (all, or some categories) — call from `onMount` in SSR apps. */\nexport function defineUsa(categories?: ComponentCategory[]): void {\n  if (typeof window !== 'undefined') defineComponents(categories);\n}\n\n/** JSX intrinsic elements for Solid (same attribute types as the React/Preact ones). */\nexport type SolidUsaIntrinsicElements = UsaIntrinsicElements;\n"],"names":["bindUsa","createRenderEffect","onCleanup","defineComponents"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;AAcG;AASH;;;;;;AAMG;AACG,SAAU,GAAG,CAAC,EAAe,EAAE,QAAsC,EAAA;IACzE,IAAI,CAAC,GAAsC,IAAI;IAC/C,MAAM,GAAG,GAAG,MAAK;AACf,QAAA,MAAM,CAAC,GAAG,QAAQ,EAAE,IAAI,EAAE;AAC1B,QAAA,IAAI,CAAC;AAAE,YAAA,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;;AACb,YAAA,CAAC,GAAGA,YAAO,CAAC,EAAE,EAAE,CAAC,CAAC;AACzB,IAAA,CAAC;IACDC,0BAAkB,CAAC,GAAG,CAAC;AACvB,IAAA,IAAI,CAAC,CAAC;AAAE,QAAA,GAAG,EAAE;IACb,MAAM,OAAO,GAAG,MAAM,CAAC,EAAE,OAAO,EAAE;IAClCC,iBAAS,CAAC,OAAO,CAAC;AAClB,IAAA,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE;AAClC;AAEA;AACM,SAAU,SAAS,CAAC,UAAgC,EAAA;IACxD,IAAI,OAAO,MAAM,KAAK,WAAW;QAAEC,2BAAgB,CAAC,UAAU,CAAC;AACjE;;;;;;;"}