use-scroll-animate 8.8.0 → 9.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (44) hide show
  1. package/CHANGELOG.md +38 -0
  2. package/README.md +2 -2
  3. package/README_ja.md +2 -2
  4. package/README_zh.md +2 -2
  5. package/bin/usa-codemod-9.mjs +71 -0
  6. package/dist/chunks/manifest-B08-vo9G.cjs +81 -0
  7. package/dist/chunks/manifest-B08-vo9G.cjs.map +1 -0
  8. package/dist/chunks/manifest-PJ0h8RS_.js +76 -0
  9. package/dist/chunks/manifest-PJ0h8RS_.js.map +1 -0
  10. package/dist/components/dsl.cjs +210 -0
  11. package/dist/components/dsl.cjs.map +1 -0
  12. package/dist/components/dsl.d.cts +76 -0
  13. package/dist/components/dsl.d.ts +76 -0
  14. package/dist/components/dsl.js +203 -0
  15. package/dist/components/dsl.js.map +1 -0
  16. package/dist/components/effects.cjs +14 -14
  17. package/dist/components/effects.cjs.map +1 -1
  18. package/dist/components/effects.d.cts +8 -8
  19. package/dist/components/effects.d.ts +8 -8
  20. package/dist/components/effects.js +11 -11
  21. package/dist/components/effects.js.map +1 -1
  22. package/dist/components/fx2.cjs +5 -5
  23. package/dist/components/fx2.js +1 -1
  24. package/dist/components/marketplace.cjs +81 -71
  25. package/dist/components/marketplace.cjs.map +1 -1
  26. package/dist/components/marketplace.d.cts +33 -2
  27. package/dist/components/marketplace.d.ts +33 -2
  28. package/dist/components/marketplace.js +73 -68
  29. package/dist/components/marketplace.js.map +1 -1
  30. package/dist/components/widgets.cjs +593 -186
  31. package/dist/components/widgets.cjs.map +1 -1
  32. package/dist/components/widgets.d.cts +152 -2
  33. package/dist/components/widgets.d.ts +152 -2
  34. package/dist/components/widgets.js +587 -187
  35. package/dist/components/widgets.js.map +1 -1
  36. package/dist/components.umd.js +2 -2
  37. package/dist/components.umd.js.map +1 -1
  38. package/dist/widgets.umd.js +1 -1
  39. package/dist/widgets.umd.js.map +1 -1
  40. package/docs/ROADMAP.md +12 -14
  41. package/docs/components.md +40 -4
  42. package/docs/deprecations.md +4 -0
  43. package/docs/upgrading-9.md +37 -0
  44. package/package.json +33 -2
@@ -1522,6 +1522,152 @@ interface UsaSpatialCardElement extends UsaElement {
1522
1522
  }
1523
1523
  declare function defineSpatialCard(tag?: string): CustomElementConstructor | undefined;
1524
1524
 
1525
+ /**
1526
+ * 8.9 — low-code component export.
1527
+ *
1528
+ * `exportComponent(el, format)` turns a live, configured element (any
1529
+ * `<usa-*>` with its attributes and light-DOM content) into copy-paste code:
1530
+ * `'html'` (a no-build page snippet with a CDN module import), `'react'`
1531
+ * (JSX + import), `'vue'` (SFC) or `'json'` (a portable description that the
1532
+ * 9.0 declarative DSL reads). Runtime parts Motionary added (`data-usa-*`,
1533
+ * `role`, `aria-*` it set, generated parts) are left out.
1534
+ *
1535
+ * `<usa-code-export for="#el" formats="html,react,vue">` shows that code in
1536
+ * tabs next to the live component, re-generates it when the element's
1537
+ * attributes change, and copies it with one click (`usa:copy` { format }).
1538
+ */
1539
+ type ExportFormat = 'html' | 'react' | 'vue' | 'json';
1540
+ interface ExportedNode {
1541
+ tag: string;
1542
+ attrs: Record<string, string>;
1543
+ children: (ExportedNode | string)[];
1544
+ }
1545
+ interface UsaCodeExportElement extends UsaElement {
1546
+ format: ExportFormat;
1547
+ readonly code: string;
1548
+ copy(): Promise<boolean>;
1549
+ }
1550
+ /** A clean, portable description of `el` (runtime parts stripped) (8.9). */
1551
+ declare function describeComponent(el: Element): ExportedNode;
1552
+ /** Copy-paste code for a live element in `format` (8.9). */
1553
+ declare function exportComponent(el: Element, format?: ExportFormat): string;
1554
+ declare function defineCodeExport(tag?: string): CustomElementConstructor | undefined;
1555
+
1556
+ /**
1557
+ * `<usa-prop-panel for="#el" props="value:number:0:100, theme:select:leaf|ocean, readonly:boolean">`
1558
+ * (8.9) — a low-code property editor for a live component: each prop gets a
1559
+ * field (`text`, `number` with optional min:max, `range`, `color`,
1560
+ * `boolean` switch, `select` with options) bound to the element's
1561
+ * attribute (`for` is a selector, or `previous` for the element just
1562
+ * before the panel), so editing it re-renders the component on the spot. Without
1563
+ * `props` it lists the element's `observedAttributes` as text fields. A
1564
+ * labelled `form`; `usa:prop` { name, value }; `reset()` restores the
1565
+ * starting attributes. Pairs with `<usa-code-export>`.
1566
+ */
1567
+ interface PropSpec {
1568
+ name: string;
1569
+ type: 'text' | 'number' | 'range' | 'color' | 'boolean' | 'select';
1570
+ options: string[];
1571
+ }
1572
+ interface UsaPropPanelElement extends UsaElement {
1573
+ readonly props: PropSpec[];
1574
+ reset(): void;
1575
+ }
1576
+ /** "value:number:0:100, theme:select:leaf|ocean, on:boolean" → prop specs (8.9). */
1577
+ declare function parseProps(s: string): PropSpec[];
1578
+ declare function definePropPanel(tag?: string): CustomElementConstructor | undefined;
1579
+
1580
+ /**
1581
+ * 5.0 — unified plugin-style effect registration. Every effect (built-in or
1582
+ * yours) is a plain object registered once and played the same way:
1583
+ * `playEffect(el, name)`, `bindEffect(el, name, { trigger })` or
1584
+ * `<usa-fx effect="name" trigger="click">`. Effects get a context that
1585
+ * already applies reduced motion, motion sensitivity, intensity and the
1586
+ * animation budget.
1587
+ */
1588
+
1589
+ declare const EFFECT_TRIGGERS: readonly ["click", "hover", "enter", "load", "loop", "manual"];
1590
+ type EffectTrigger = (typeof EFFECT_TRIGGERS)[number];
1591
+
1592
+ /**
1593
+ * `motionary/dsl` (= `motionary/components/dsl`, 9.0) — the declarative
1594
+ * motion DSL. Describe motion as one readable string instead of code:
1595
+ *
1596
+ * ```html
1597
+ * <section data-motion="enter: fade-up 600ms ease-out stagger 80ms; hover: pop; click: confetti count=40">
1598
+ * ```
1599
+ *
1600
+ * Grammar — rules separated by `;`, each `trigger: effect [modifiers…]`:
1601
+ * - trigger: `enter` · `click` · `hover` · `load` · `loop` · `manual`
1602
+ * - effect: any registered effect name (timeline presets, packs, plugins)
1603
+ * - modifiers: a duration (`600ms` / `0.6s`), `delay 120ms`,
1604
+ * `stagger 80ms` (children one after another), an easing (`ease-out`,
1605
+ * `linear`, `spring`, `cubic-bezier(…)`, `steps(…)`), `once`, and
1606
+ * `key=value` effect options (numbers / booleans parsed).
1607
+ *
1608
+ * `parseMotion()` → rules + errors, `serializeMotion()` back to a string,
1609
+ * `motion\`…\`` tagged template, `applyMotion(root)` binds every
1610
+ * `[data-motion]` under `root` (and watches for new ones with `observe`),
1611
+ * `bindMotion(el, rules)` for one element, and `createComponent(json)`
1612
+ * builds live markup from the 8.9 `describeComponent()` JSON.
1613
+ */
1614
+
1615
+ interface MotionRule {
1616
+ trigger: EffectTrigger;
1617
+ effect: string;
1618
+ duration?: number;
1619
+ delay?: number;
1620
+ stagger?: number;
1621
+ easing?: string;
1622
+ once?: boolean;
1623
+ options: Record<string, string | number | boolean>;
1624
+ }
1625
+
1626
+ /**
1627
+ * `<usa-motion rules="enter: fade-up 600ms stagger 80ms; hover: pop">` (9.0)
1628
+ * — the declarative motion DSL as an element: its `rules` (the same string
1629
+ * as `data-motion`) are bound to it, `stagger` runs them over its children.
1630
+ * Changing `rules` re-binds. `rules` / `parsed` properties; `errors` lists
1631
+ * what was skipped (unknown trigger, modifier or effect) and `usa:motion-error`
1632
+ * fires for each. Layout-neutral (`display: contents` unless styled).
1633
+ */
1634
+ interface UsaMotionElement extends UsaElement {
1635
+ readonly parsed: MotionRule[];
1636
+ readonly errors: string[];
1637
+ }
1638
+ declare function defineMotion(tag?: string): CustomElementConstructor | undefined;
1639
+
1640
+ interface PluginListing {
1641
+ name: string;
1642
+ title: string;
1643
+ description: string;
1644
+ entry: string;
1645
+ register: string;
1646
+ effects: string[];
1647
+ tags: string[];
1648
+ since: string;
1649
+ author?: string;
1650
+ official?: boolean;
1651
+ }
1652
+
1653
+ /**
1654
+ * `<usa-plugin-store>` (9.0) — the plugin marketplace as a component: a
1655
+ * search box over the catalogue (first-party packs by default, or a
1656
+ * `plugins` list you set), result cards with their effects as chips, and
1657
+ * an Install button per plugin that imports and registers it (`loader`
1658
+ * property maps entries to imports for bundlers). Cards fly in staggered,
1659
+ * installs show a progress ring then a check. `usa:install` { name, effects }
1660
+ * / `usa:install-error` { name, message }. A labelled `search` region with
1661
+ * a live result count; reduced motion: no fly-in.
1662
+ */
1663
+ interface UsaPluginStoreElement extends UsaElement {
1664
+ plugins: PluginListing[];
1665
+ loader: ((entry: string) => Promise<any>) | null;
1666
+ search(q: string): PluginListing[];
1667
+ install(name: string): Promise<string[]>;
1668
+ }
1669
+ declare function definePluginStore(tag?: string): CustomElementConstructor | undefined;
1670
+
1525
1671
  /**
1526
1672
  * motionary/components/widgets — the 6.x animated UI widgets, in their own
1527
1673
  * entry so `motionary/components` and `components/lite` keep their size
@@ -1623,8 +1769,12 @@ declare global {
1623
1769
  'usa-gesture-sticker': UsaGestureStickerElement;
1624
1770
  'usa-panorama': UsaPanoramaElement;
1625
1771
  'usa-spatial-card': UsaSpatialCardElement;
1772
+ 'usa-code-export': UsaCodeExportElement;
1773
+ 'usa-prop-panel': UsaPropPanelElement;
1774
+ 'usa-motion': UsaMotionElement;
1775
+ 'usa-plugin-store': UsaPluginStoreElement;
1626
1776
  }
1627
1777
  }
1628
1778
 
1629
- export { CAROUSEL_EFFECTS, EQ_PRESETS, FESTIVAL_THEMES, MENU_EFFECTS, MODAL_EFFECTS, NAV_INDICATORS, PRESENCE_STATES, PROGRESS_VARIANTS, RETRO_VARIANTS, SEGMENTED_VARIANTS, SHEET_SIDES, SKELETON_VARIANTS, SPARK_VARIANTS, SWITCH_VARIANTS, TAB_INDICATORS, TIP_PLACEMENTS, TOAST_POSITIONS, TOGGLE_VARIANTS, WEATHER_CONDITIONS, WIDGETS, WIDGET_TAGS, badgeProgress, cartTotal, defineAddToCart, defineBadgeWall, defineBarChart, defineCarousel, defineCartDrawer, defineChatComposer, defineClockControl, defineColorPicker, defineCommandPalette, defineCompare, defineCountdown, defineCubeGallery, defineDatePicker, defineDisclosure, defineDock, defineEqualizer, defineFestivalBanner, defineField, defineFileDrop, defineGauge, defineGestureSticker, defineGlobe, defineGyroCard, defineHudPanel, defineHydrate, defineKanban, defineKeyframeEditor, defineKpi, defineLeaderboard, defineLiquidNav, defineLocationCard, defineLyrics, defineMasonryFlow, defineMenu, defineMenuToggle, defineMessageList, defineMilestones, defineModal, defineMusicPlayer, defineNavMorph, defineNotificationBell, defineOdometer, defineOrganicCard, defineOtp, definePagination, definePanorama, definePresence, definePrizeWheel, defineProductGallery, defineProgressRing, definePullCord, defineRadar, defineReactions, defineRedEnvelope, defineRetroButton, defineSegmented, defineSheet, defineShortcut, defineSkeletonReveal, defineSketchChart, defineSparkline, defineSpatialCard, defineStarRating, defineStepper, defineStickyWall, defineStories, defineSuggestionChips, defineSwipeDeck, defineSwitch, defineTabBar, defineTerminal, defineThemeSurface, defineThemeSwitcher, defineTip, defineToastStack, defineUploadProgress, defineVoiceButton, defineVolumeKnob, defineWeatherCard, defineWidgets, defineXpBar, formatBytes, formatDistance, fuzzyMatch, haversine, hexToHsv, hsvToHex, initials, keyLabels, levelFor, matchesKeys, monthGrid, pageWindow, parseChips, parseISODate, parseLRC, parseMarkers, parseReactions, parseTargets, passwordStrength, project, rankRows, sanitizeCode, sparkPoints, splitTime, stackToast, waveBars, wheelAngle, wrapIndex };
1630
- export type { BellNotice, CartItem, ChatMessage, GlobeMarker, LeaderRow, PaletteCommand, PresenceState, RadarTarget, StackToastOptions, StickerState, UsaAddToCartElement, UsaBadgeWallElement, UsaBarChartElement, UsaCarouselElement, UsaCartDrawerElement, UsaChatComposerElement, UsaClockControlElement, UsaColorPickerElement, UsaCommandPaletteElement, UsaCompareElement, UsaCountdownElement, UsaCubeGalleryElement, UsaDatePickerElement, UsaDisclosureElement, UsaDockElement, UsaEqualizerElement, UsaFestivalBannerElement, UsaFieldElement, UsaFileDropElement, UsaGaugeElement, UsaGestureStickerElement, UsaGlobeElement, UsaGyroCardElement, UsaHudPanelElement, UsaHydrateElement, UsaKanbanElement, UsaKeyframeEditorElement, UsaKpiElement, UsaLeaderboardElement, UsaLiquidNavElement, UsaLocationCardElement, UsaLyricsElement, UsaMasonryFlowElement, UsaMenuElement, UsaMenuToggleElement, UsaMessageListElement, UsaMilestonesElement, UsaModalElement, UsaMusicPlayerElement, UsaNavMorphElement, UsaNotificationBellElement, UsaOdometerElement, UsaOrganicCardElement, UsaOtpElement, UsaPaginationElement, UsaPanoramaElement, UsaPresenceElement, UsaPrizeWheelElement, UsaProductGalleryElement, UsaProgressRingElement, UsaPullCordElement, UsaRadarElement, UsaReactionsElement, UsaRedEnvelopeElement, UsaRetroButtonElement, UsaSegmentedElement, UsaSheetElement, UsaShortcutElement, UsaSkeletonRevealElement, UsaSketchChartElement, UsaSparklineElement, UsaSpatialCardElement, UsaStarRatingElement, UsaStepperElement, UsaStickyWallElement, UsaStoriesElement, UsaSuggestionChipsElement, UsaSwipeDeckElement, UsaSwitchElement, UsaTabBarElement, UsaTerminalElement, UsaThemeSurfaceElement, UsaThemeSwitcherElement, UsaTipElement, UsaToastStackElement, UsaUploadProgressElement, UsaVoiceButtonElement, UsaVolumeKnobElement, UsaWeatherCardElement, UsaXpBarElement, WallBadge };
1779
+ export { CAROUSEL_EFFECTS, EQ_PRESETS, FESTIVAL_THEMES, MENU_EFFECTS, MODAL_EFFECTS, NAV_INDICATORS, PRESENCE_STATES, PROGRESS_VARIANTS, RETRO_VARIANTS, SEGMENTED_VARIANTS, SHEET_SIDES, SKELETON_VARIANTS, SPARK_VARIANTS, SWITCH_VARIANTS, TAB_INDICATORS, TIP_PLACEMENTS, TOAST_POSITIONS, TOGGLE_VARIANTS, WEATHER_CONDITIONS, WIDGETS, WIDGET_TAGS, badgeProgress, cartTotal, defineAddToCart, defineBadgeWall, defineBarChart, defineCarousel, defineCartDrawer, defineChatComposer, defineClockControl, defineCodeExport, defineColorPicker, defineCommandPalette, defineCompare, defineCountdown, defineCubeGallery, defineDatePicker, defineDisclosure, defineDock, defineEqualizer, defineFestivalBanner, defineField, defineFileDrop, defineGauge, defineGestureSticker, defineGlobe, defineGyroCard, defineHudPanel, defineHydrate, defineKanban, defineKeyframeEditor, defineKpi, defineLeaderboard, defineLiquidNav, defineLocationCard, defineLyrics, defineMasonryFlow, defineMenu, defineMenuToggle, defineMessageList, defineMilestones, defineModal, defineMotion, defineMusicPlayer, defineNavMorph, defineNotificationBell, defineOdometer, defineOrganicCard, defineOtp, definePagination, definePanorama, definePluginStore, definePresence, definePrizeWheel, defineProductGallery, defineProgressRing, definePropPanel, definePullCord, defineRadar, defineReactions, defineRedEnvelope, defineRetroButton, defineSegmented, defineSheet, defineShortcut, defineSkeletonReveal, defineSketchChart, defineSparkline, defineSpatialCard, defineStarRating, defineStepper, defineStickyWall, defineStories, defineSuggestionChips, defineSwipeDeck, defineSwitch, defineTabBar, defineTerminal, defineThemeSurface, defineThemeSwitcher, defineTip, defineToastStack, defineUploadProgress, defineVoiceButton, defineVolumeKnob, defineWeatherCard, defineWidgets, defineXpBar, describeComponent, exportComponent, formatBytes, formatDistance, fuzzyMatch, haversine, hexToHsv, hsvToHex, initials, keyLabels, levelFor, matchesKeys, monthGrid, pageWindow, parseChips, parseISODate, parseLRC, parseMarkers, parseProps, parseReactions, parseTargets, passwordStrength, project, rankRows, sanitizeCode, sparkPoints, splitTime, stackToast, waveBars, wheelAngle, wrapIndex };
1780
+ export type { BellNotice, CartItem, ChatMessage, ExportFormat, ExportedNode, GlobeMarker, LeaderRow, PaletteCommand, PresenceState, PropSpec, RadarTarget, StackToastOptions, StickerState, UsaAddToCartElement, UsaBadgeWallElement, UsaBarChartElement, UsaCarouselElement, UsaCartDrawerElement, UsaChatComposerElement, UsaClockControlElement, UsaCodeExportElement, UsaColorPickerElement, UsaCommandPaletteElement, UsaCompareElement, UsaCountdownElement, UsaCubeGalleryElement, UsaDatePickerElement, UsaDisclosureElement, UsaDockElement, UsaEqualizerElement, UsaFestivalBannerElement, UsaFieldElement, UsaFileDropElement, UsaGaugeElement, UsaGestureStickerElement, UsaGlobeElement, UsaGyroCardElement, UsaHudPanelElement, UsaHydrateElement, UsaKanbanElement, UsaKeyframeEditorElement, UsaKpiElement, UsaLeaderboardElement, UsaLiquidNavElement, UsaLocationCardElement, UsaLyricsElement, UsaMasonryFlowElement, UsaMenuElement, UsaMenuToggleElement, UsaMessageListElement, UsaMilestonesElement, UsaModalElement, UsaMotionElement, UsaMusicPlayerElement, UsaNavMorphElement, UsaNotificationBellElement, UsaOdometerElement, UsaOrganicCardElement, UsaOtpElement, UsaPaginationElement, UsaPanoramaElement, UsaPluginStoreElement, UsaPresenceElement, UsaPrizeWheelElement, UsaProductGalleryElement, UsaProgressRingElement, UsaPropPanelElement, UsaPullCordElement, UsaRadarElement, UsaReactionsElement, UsaRedEnvelopeElement, UsaRetroButtonElement, UsaSegmentedElement, UsaSheetElement, UsaShortcutElement, UsaSkeletonRevealElement, UsaSketchChartElement, UsaSparklineElement, UsaSpatialCardElement, UsaStarRatingElement, UsaStepperElement, UsaStickyWallElement, UsaStoriesElement, UsaSuggestionChipsElement, UsaSwipeDeckElement, UsaSwitchElement, UsaTabBarElement, UsaTerminalElement, UsaThemeSurfaceElement, UsaThemeSwitcherElement, UsaTipElement, UsaToastStackElement, UsaUploadProgressElement, UsaVoiceButtonElement, UsaVolumeKnobElement, UsaWeatherCardElement, UsaXpBarElement, WallBadge };
@@ -1522,6 +1522,152 @@ interface UsaSpatialCardElement extends UsaElement {
1522
1522
  }
1523
1523
  declare function defineSpatialCard(tag?: string): CustomElementConstructor | undefined;
1524
1524
 
1525
+ /**
1526
+ * 8.9 — low-code component export.
1527
+ *
1528
+ * `exportComponent(el, format)` turns a live, configured element (any
1529
+ * `<usa-*>` with its attributes and light-DOM content) into copy-paste code:
1530
+ * `'html'` (a no-build page snippet with a CDN module import), `'react'`
1531
+ * (JSX + import), `'vue'` (SFC) or `'json'` (a portable description that the
1532
+ * 9.0 declarative DSL reads). Runtime parts Motionary added (`data-usa-*`,
1533
+ * `role`, `aria-*` it set, generated parts) are left out.
1534
+ *
1535
+ * `<usa-code-export for="#el" formats="html,react,vue">` shows that code in
1536
+ * tabs next to the live component, re-generates it when the element's
1537
+ * attributes change, and copies it with one click (`usa:copy` { format }).
1538
+ */
1539
+ type ExportFormat = 'html' | 'react' | 'vue' | 'json';
1540
+ interface ExportedNode {
1541
+ tag: string;
1542
+ attrs: Record<string, string>;
1543
+ children: (ExportedNode | string)[];
1544
+ }
1545
+ interface UsaCodeExportElement extends UsaElement {
1546
+ format: ExportFormat;
1547
+ readonly code: string;
1548
+ copy(): Promise<boolean>;
1549
+ }
1550
+ /** A clean, portable description of `el` (runtime parts stripped) (8.9). */
1551
+ declare function describeComponent(el: Element): ExportedNode;
1552
+ /** Copy-paste code for a live element in `format` (8.9). */
1553
+ declare function exportComponent(el: Element, format?: ExportFormat): string;
1554
+ declare function defineCodeExport(tag?: string): CustomElementConstructor | undefined;
1555
+
1556
+ /**
1557
+ * `<usa-prop-panel for="#el" props="value:number:0:100, theme:select:leaf|ocean, readonly:boolean">`
1558
+ * (8.9) — a low-code property editor for a live component: each prop gets a
1559
+ * field (`text`, `number` with optional min:max, `range`, `color`,
1560
+ * `boolean` switch, `select` with options) bound to the element's
1561
+ * attribute (`for` is a selector, or `previous` for the element just
1562
+ * before the panel), so editing it re-renders the component on the spot. Without
1563
+ * `props` it lists the element's `observedAttributes` as text fields. A
1564
+ * labelled `form`; `usa:prop` { name, value }; `reset()` restores the
1565
+ * starting attributes. Pairs with `<usa-code-export>`.
1566
+ */
1567
+ interface PropSpec {
1568
+ name: string;
1569
+ type: 'text' | 'number' | 'range' | 'color' | 'boolean' | 'select';
1570
+ options: string[];
1571
+ }
1572
+ interface UsaPropPanelElement extends UsaElement {
1573
+ readonly props: PropSpec[];
1574
+ reset(): void;
1575
+ }
1576
+ /** "value:number:0:100, theme:select:leaf|ocean, on:boolean" → prop specs (8.9). */
1577
+ declare function parseProps(s: string): PropSpec[];
1578
+ declare function definePropPanel(tag?: string): CustomElementConstructor | undefined;
1579
+
1580
+ /**
1581
+ * 5.0 — unified plugin-style effect registration. Every effect (built-in or
1582
+ * yours) is a plain object registered once and played the same way:
1583
+ * `playEffect(el, name)`, `bindEffect(el, name, { trigger })` or
1584
+ * `<usa-fx effect="name" trigger="click">`. Effects get a context that
1585
+ * already applies reduced motion, motion sensitivity, intensity and the
1586
+ * animation budget.
1587
+ */
1588
+
1589
+ declare const EFFECT_TRIGGERS: readonly ["click", "hover", "enter", "load", "loop", "manual"];
1590
+ type EffectTrigger = (typeof EFFECT_TRIGGERS)[number];
1591
+
1592
+ /**
1593
+ * `motionary/dsl` (= `motionary/components/dsl`, 9.0) — the declarative
1594
+ * motion DSL. Describe motion as one readable string instead of code:
1595
+ *
1596
+ * ```html
1597
+ * <section data-motion="enter: fade-up 600ms ease-out stagger 80ms; hover: pop; click: confetti count=40">
1598
+ * ```
1599
+ *
1600
+ * Grammar — rules separated by `;`, each `trigger: effect [modifiers…]`:
1601
+ * - trigger: `enter` · `click` · `hover` · `load` · `loop` · `manual`
1602
+ * - effect: any registered effect name (timeline presets, packs, plugins)
1603
+ * - modifiers: a duration (`600ms` / `0.6s`), `delay 120ms`,
1604
+ * `stagger 80ms` (children one after another), an easing (`ease-out`,
1605
+ * `linear`, `spring`, `cubic-bezier(…)`, `steps(…)`), `once`, and
1606
+ * `key=value` effect options (numbers / booleans parsed).
1607
+ *
1608
+ * `parseMotion()` → rules + errors, `serializeMotion()` back to a string,
1609
+ * `motion\`…\`` tagged template, `applyMotion(root)` binds every
1610
+ * `[data-motion]` under `root` (and watches for new ones with `observe`),
1611
+ * `bindMotion(el, rules)` for one element, and `createComponent(json)`
1612
+ * builds live markup from the 8.9 `describeComponent()` JSON.
1613
+ */
1614
+
1615
+ interface MotionRule {
1616
+ trigger: EffectTrigger;
1617
+ effect: string;
1618
+ duration?: number;
1619
+ delay?: number;
1620
+ stagger?: number;
1621
+ easing?: string;
1622
+ once?: boolean;
1623
+ options: Record<string, string | number | boolean>;
1624
+ }
1625
+
1626
+ /**
1627
+ * `<usa-motion rules="enter: fade-up 600ms stagger 80ms; hover: pop">` (9.0)
1628
+ * — the declarative motion DSL as an element: its `rules` (the same string
1629
+ * as `data-motion`) are bound to it, `stagger` runs them over its children.
1630
+ * Changing `rules` re-binds. `rules` / `parsed` properties; `errors` lists
1631
+ * what was skipped (unknown trigger, modifier or effect) and `usa:motion-error`
1632
+ * fires for each. Layout-neutral (`display: contents` unless styled).
1633
+ */
1634
+ interface UsaMotionElement extends UsaElement {
1635
+ readonly parsed: MotionRule[];
1636
+ readonly errors: string[];
1637
+ }
1638
+ declare function defineMotion(tag?: string): CustomElementConstructor | undefined;
1639
+
1640
+ interface PluginListing {
1641
+ name: string;
1642
+ title: string;
1643
+ description: string;
1644
+ entry: string;
1645
+ register: string;
1646
+ effects: string[];
1647
+ tags: string[];
1648
+ since: string;
1649
+ author?: string;
1650
+ official?: boolean;
1651
+ }
1652
+
1653
+ /**
1654
+ * `<usa-plugin-store>` (9.0) — the plugin marketplace as a component: a
1655
+ * search box over the catalogue (first-party packs by default, or a
1656
+ * `plugins` list you set), result cards with their effects as chips, and
1657
+ * an Install button per plugin that imports and registers it (`loader`
1658
+ * property maps entries to imports for bundlers). Cards fly in staggered,
1659
+ * installs show a progress ring then a check. `usa:install` { name, effects }
1660
+ * / `usa:install-error` { name, message }. A labelled `search` region with
1661
+ * a live result count; reduced motion: no fly-in.
1662
+ */
1663
+ interface UsaPluginStoreElement extends UsaElement {
1664
+ plugins: PluginListing[];
1665
+ loader: ((entry: string) => Promise<any>) | null;
1666
+ search(q: string): PluginListing[];
1667
+ install(name: string): Promise<string[]>;
1668
+ }
1669
+ declare function definePluginStore(tag?: string): CustomElementConstructor | undefined;
1670
+
1525
1671
  /**
1526
1672
  * motionary/components/widgets — the 6.x animated UI widgets, in their own
1527
1673
  * entry so `motionary/components` and `components/lite` keep their size
@@ -1623,8 +1769,12 @@ declare global {
1623
1769
  'usa-gesture-sticker': UsaGestureStickerElement;
1624
1770
  'usa-panorama': UsaPanoramaElement;
1625
1771
  'usa-spatial-card': UsaSpatialCardElement;
1772
+ 'usa-code-export': UsaCodeExportElement;
1773
+ 'usa-prop-panel': UsaPropPanelElement;
1774
+ 'usa-motion': UsaMotionElement;
1775
+ 'usa-plugin-store': UsaPluginStoreElement;
1626
1776
  }
1627
1777
  }
1628
1778
 
1629
- export { CAROUSEL_EFFECTS, EQ_PRESETS, FESTIVAL_THEMES, MENU_EFFECTS, MODAL_EFFECTS, NAV_INDICATORS, PRESENCE_STATES, PROGRESS_VARIANTS, RETRO_VARIANTS, SEGMENTED_VARIANTS, SHEET_SIDES, SKELETON_VARIANTS, SPARK_VARIANTS, SWITCH_VARIANTS, TAB_INDICATORS, TIP_PLACEMENTS, TOAST_POSITIONS, TOGGLE_VARIANTS, WEATHER_CONDITIONS, WIDGETS, WIDGET_TAGS, badgeProgress, cartTotal, defineAddToCart, defineBadgeWall, defineBarChart, defineCarousel, defineCartDrawer, defineChatComposer, defineClockControl, defineColorPicker, defineCommandPalette, defineCompare, defineCountdown, defineCubeGallery, defineDatePicker, defineDisclosure, defineDock, defineEqualizer, defineFestivalBanner, defineField, defineFileDrop, defineGauge, defineGestureSticker, defineGlobe, defineGyroCard, defineHudPanel, defineHydrate, defineKanban, defineKeyframeEditor, defineKpi, defineLeaderboard, defineLiquidNav, defineLocationCard, defineLyrics, defineMasonryFlow, defineMenu, defineMenuToggle, defineMessageList, defineMilestones, defineModal, defineMusicPlayer, defineNavMorph, defineNotificationBell, defineOdometer, defineOrganicCard, defineOtp, definePagination, definePanorama, definePresence, definePrizeWheel, defineProductGallery, defineProgressRing, definePullCord, defineRadar, defineReactions, defineRedEnvelope, defineRetroButton, defineSegmented, defineSheet, defineShortcut, defineSkeletonReveal, defineSketchChart, defineSparkline, defineSpatialCard, defineStarRating, defineStepper, defineStickyWall, defineStories, defineSuggestionChips, defineSwipeDeck, defineSwitch, defineTabBar, defineTerminal, defineThemeSurface, defineThemeSwitcher, defineTip, defineToastStack, defineUploadProgress, defineVoiceButton, defineVolumeKnob, defineWeatherCard, defineWidgets, defineXpBar, formatBytes, formatDistance, fuzzyMatch, haversine, hexToHsv, hsvToHex, initials, keyLabels, levelFor, matchesKeys, monthGrid, pageWindow, parseChips, parseISODate, parseLRC, parseMarkers, parseReactions, parseTargets, passwordStrength, project, rankRows, sanitizeCode, sparkPoints, splitTime, stackToast, waveBars, wheelAngle, wrapIndex };
1630
- export type { BellNotice, CartItem, ChatMessage, GlobeMarker, LeaderRow, PaletteCommand, PresenceState, RadarTarget, StackToastOptions, StickerState, UsaAddToCartElement, UsaBadgeWallElement, UsaBarChartElement, UsaCarouselElement, UsaCartDrawerElement, UsaChatComposerElement, UsaClockControlElement, UsaColorPickerElement, UsaCommandPaletteElement, UsaCompareElement, UsaCountdownElement, UsaCubeGalleryElement, UsaDatePickerElement, UsaDisclosureElement, UsaDockElement, UsaEqualizerElement, UsaFestivalBannerElement, UsaFieldElement, UsaFileDropElement, UsaGaugeElement, UsaGestureStickerElement, UsaGlobeElement, UsaGyroCardElement, UsaHudPanelElement, UsaHydrateElement, UsaKanbanElement, UsaKeyframeEditorElement, UsaKpiElement, UsaLeaderboardElement, UsaLiquidNavElement, UsaLocationCardElement, UsaLyricsElement, UsaMasonryFlowElement, UsaMenuElement, UsaMenuToggleElement, UsaMessageListElement, UsaMilestonesElement, UsaModalElement, UsaMusicPlayerElement, UsaNavMorphElement, UsaNotificationBellElement, UsaOdometerElement, UsaOrganicCardElement, UsaOtpElement, UsaPaginationElement, UsaPanoramaElement, UsaPresenceElement, UsaPrizeWheelElement, UsaProductGalleryElement, UsaProgressRingElement, UsaPullCordElement, UsaRadarElement, UsaReactionsElement, UsaRedEnvelopeElement, UsaRetroButtonElement, UsaSegmentedElement, UsaSheetElement, UsaShortcutElement, UsaSkeletonRevealElement, UsaSketchChartElement, UsaSparklineElement, UsaSpatialCardElement, UsaStarRatingElement, UsaStepperElement, UsaStickyWallElement, UsaStoriesElement, UsaSuggestionChipsElement, UsaSwipeDeckElement, UsaSwitchElement, UsaTabBarElement, UsaTerminalElement, UsaThemeSurfaceElement, UsaThemeSwitcherElement, UsaTipElement, UsaToastStackElement, UsaUploadProgressElement, UsaVoiceButtonElement, UsaVolumeKnobElement, UsaWeatherCardElement, UsaXpBarElement, WallBadge };
1779
+ export { CAROUSEL_EFFECTS, EQ_PRESETS, FESTIVAL_THEMES, MENU_EFFECTS, MODAL_EFFECTS, NAV_INDICATORS, PRESENCE_STATES, PROGRESS_VARIANTS, RETRO_VARIANTS, SEGMENTED_VARIANTS, SHEET_SIDES, SKELETON_VARIANTS, SPARK_VARIANTS, SWITCH_VARIANTS, TAB_INDICATORS, TIP_PLACEMENTS, TOAST_POSITIONS, TOGGLE_VARIANTS, WEATHER_CONDITIONS, WIDGETS, WIDGET_TAGS, badgeProgress, cartTotal, defineAddToCart, defineBadgeWall, defineBarChart, defineCarousel, defineCartDrawer, defineChatComposer, defineClockControl, defineCodeExport, defineColorPicker, defineCommandPalette, defineCompare, defineCountdown, defineCubeGallery, defineDatePicker, defineDisclosure, defineDock, defineEqualizer, defineFestivalBanner, defineField, defineFileDrop, defineGauge, defineGestureSticker, defineGlobe, defineGyroCard, defineHudPanel, defineHydrate, defineKanban, defineKeyframeEditor, defineKpi, defineLeaderboard, defineLiquidNav, defineLocationCard, defineLyrics, defineMasonryFlow, defineMenu, defineMenuToggle, defineMessageList, defineMilestones, defineModal, defineMotion, defineMusicPlayer, defineNavMorph, defineNotificationBell, defineOdometer, defineOrganicCard, defineOtp, definePagination, definePanorama, definePluginStore, definePresence, definePrizeWheel, defineProductGallery, defineProgressRing, definePropPanel, definePullCord, defineRadar, defineReactions, defineRedEnvelope, defineRetroButton, defineSegmented, defineSheet, defineShortcut, defineSkeletonReveal, defineSketchChart, defineSparkline, defineSpatialCard, defineStarRating, defineStepper, defineStickyWall, defineStories, defineSuggestionChips, defineSwipeDeck, defineSwitch, defineTabBar, defineTerminal, defineThemeSurface, defineThemeSwitcher, defineTip, defineToastStack, defineUploadProgress, defineVoiceButton, defineVolumeKnob, defineWeatherCard, defineWidgets, defineXpBar, describeComponent, exportComponent, formatBytes, formatDistance, fuzzyMatch, haversine, hexToHsv, hsvToHex, initials, keyLabels, levelFor, matchesKeys, monthGrid, pageWindow, parseChips, parseISODate, parseLRC, parseMarkers, parseProps, parseReactions, parseTargets, passwordStrength, project, rankRows, sanitizeCode, sparkPoints, splitTime, stackToast, waveBars, wheelAngle, wrapIndex };
1780
+ export type { BellNotice, CartItem, ChatMessage, ExportFormat, ExportedNode, GlobeMarker, LeaderRow, PaletteCommand, PresenceState, PropSpec, RadarTarget, StackToastOptions, StickerState, UsaAddToCartElement, UsaBadgeWallElement, UsaBarChartElement, UsaCarouselElement, UsaCartDrawerElement, UsaChatComposerElement, UsaClockControlElement, UsaCodeExportElement, UsaColorPickerElement, UsaCommandPaletteElement, UsaCompareElement, UsaCountdownElement, UsaCubeGalleryElement, UsaDatePickerElement, UsaDisclosureElement, UsaDockElement, UsaEqualizerElement, UsaFestivalBannerElement, UsaFieldElement, UsaFileDropElement, UsaGaugeElement, UsaGestureStickerElement, UsaGlobeElement, UsaGyroCardElement, UsaHudPanelElement, UsaHydrateElement, UsaKanbanElement, UsaKeyframeEditorElement, UsaKpiElement, UsaLeaderboardElement, UsaLiquidNavElement, UsaLocationCardElement, UsaLyricsElement, UsaMasonryFlowElement, UsaMenuElement, UsaMenuToggleElement, UsaMessageListElement, UsaMilestonesElement, UsaModalElement, UsaMotionElement, UsaMusicPlayerElement, UsaNavMorphElement, UsaNotificationBellElement, UsaOdometerElement, UsaOrganicCardElement, UsaOtpElement, UsaPaginationElement, UsaPanoramaElement, UsaPluginStoreElement, UsaPresenceElement, UsaPrizeWheelElement, UsaProductGalleryElement, UsaProgressRingElement, UsaPropPanelElement, UsaPullCordElement, UsaRadarElement, UsaReactionsElement, UsaRedEnvelopeElement, UsaRetroButtonElement, UsaSegmentedElement, UsaSheetElement, UsaShortcutElement, UsaSkeletonRevealElement, UsaSketchChartElement, UsaSparklineElement, UsaSpatialCardElement, UsaStarRatingElement, UsaStepperElement, UsaStickyWallElement, UsaStoriesElement, UsaSuggestionChipsElement, UsaSwipeDeckElement, UsaSwitchElement, UsaTabBarElement, UsaTerminalElement, UsaThemeSurfaceElement, UsaThemeSwitcherElement, UsaTipElement, UsaToastStackElement, UsaUploadProgressElement, UsaVoiceButtonElement, UsaVolumeKnobElement, UsaWeatherCardElement, UsaXpBarElement, WallBadge };