@yewdiel21/motion-kit 0.17.0 → 0.19.0

package/src/auto/auto-init.ts

@@ -1,308 +1,341 @@
-import { createQuantity } from '../components/quantity/engine';
-import { createPagination } from '../components/pagination/engine';
-import { createHoverCard } from '../components/hover-card/engine';
-import { createInputOtp } from '../components/input-otp/engine';
-import { createJoinedCta } from '../recipes/joined-cta/create-joined-cta';
-import { createImageZoom } from '../recipes/image-zoom/create-image-zoom';
-import { createFontCycle } from '../recipes/font-cycle/create-font-cycle';
-import { createThumbnailNav } from '../recipes/thumbnail-nav/create-thumbnail-nav';
-import { createActionButton } from '../recipes/action-button/create-action-button';
-import { createFilmHero } from '../recipes/film-hero/create-film-hero';
-import { createEditorialReveal } from '../recipes/editorial-reveal/create-editorial-reveal';
-import { createStudioDock } from '../components/studio-dock/engine';
-import { createCalendar } from '../components/calendar/engine';
-import { createSlotPicker } from '../components/slot-picker/engine';
-import { createWeightHover } from '../recipes/weight-hover/create-weight-hover';
-import { createSticker } from '../recipes/sticker/create-sticker';
-import { createScrollDock } from '../recipes/scroll-dock/create-scroll-dock';
-import { createLocalClock } from '../recipes/local-clock/create-local-clock';
-import { createTrailer } from '../components/trailer/engine';
-import { createCreditCard } from '../components/credit-card/engine';
-import { createCommandSearch } from '../components/command-search/engine';
-import { createHoldConfirm } from '../components/hold-confirm/engine';
-import { createImagePreview } from '../components/image-preview/engine';
-import { createLikeButton } from '../components/like-button/engine';
-import { createNotificationBell } from '../components/notification-bell/engine';
-import { createPasswordStrength } from '../components/password-strength/engine';
-import { createScratchCard } from '../components/scratch-card/engine';
-import { createStarRating } from '../components/star-rating/engine';
-import { createSwipeActions } from '../components/swipe-actions/engine';
-import { createAttachment } from '../components/attachment/engine';
-import { createSkeleton } from '../components/skeleton/engine';
-import { createQuestionnaire } from '../components/questionnaire/engine';
-import { createCodeBlock } from '../components/code-block/engine';
-import { createContextMenu } from '../components/context-menu/engine';
-import { createDrawer } from '../components/drawer/engine';
-import { createLinkPreview } from '../components/link-preview/engine';
-import { createProgress } from '../components/progress/engine';
-import { createRangeSlider } from '../components/range-slider/engine';
-import { createChart } from '../components/chart/engine';
-import { createColorSlider } from '../components/color-slider/engine';
-import { createColorArea } from '../components/color-area/engine';
-import { createColorField } from '../components/color-field/engine';
-import { createColorPicker } from '../components/color-picker/engine';
-import { createTimeField } from '../components/time-field/engine';
-import { createRangeCalendar } from '../components/range-calendar/engine';
-import { createDateRangePicker } from '../components/date-range-picker/engine';
-import { createTooltip } from '../components/tooltip/engine';
-import { createPopover } from '../components/popover/engine';
-import { createLoadingButton } from '../components/loading-button/engine';
-import { createBreadcrumb } from '../components/breadcrumb/engine';
-import { createEmptyState } from '../components/empty-state/engine';
-import { createStatCard } from '../components/stat-card/engine';
-import { createChartTooltip } from '../components/chart-tooltip/engine';
-import { createMultiSelect } from '../components/multi-select/engine';
-import { createTagInput } from '../components/tag-input/engine';
-import { createDateTimePicker } from '../components/date-time-picker/engine';
-import { createFilterBuilder } from '../components/filter-builder/engine';
-import { createTimeline } from '../components/timeline/engine';
-import { createActivityFeed } from '../components/activity-feed/engine';
-import { createTreeView } from '../components/tree-view/engine';
-import { createFileExplorer } from '../components/file-explorer/engine';
-import { createJsonViewer } from '../components/json-viewer/engine';
-import { createVirtualList } from '../components/virtual-list/engine';
-import { createResizablePanel } from '../components/resizable-panel/engine';
-import { createSplitView } from '../components/split-view/engine';
-import { createDataTable } from '../components/data-table/engine';
-import { createEditableTable } from '../components/editable-table/engine';
-import { createRichTextEditor } from '../components/rich-text-editor/engine';
-import { createSelect } from '../components/select/engine';
-import { createAddToCart } from '../components/add-to-cart/engine';
-import { createScrollIsland } from '../components/scroll-island/engine';
-import { ScrollTrigger } from '../core/gsap';
-import { warnOnce, type Instance } from '../core/types';
-import { createSpringCards } from '../recipes/spring-cards/create-spring-cards';
-import { createCurvedCarousel } from '../recipes/curved-carousel/create-curved-carousel';
-import { createPile } from '../recipes/pile/create-pile';
-import { createWords } from '../recipes/words/create-words';
-import { createFlow } from '../recipes/flow/create-flow';
-import { createPop } from '../recipes/pop/create-pop';
-import { createFitText } from '../recipes/fit-text/create-fit-text';
-import { createStretchFooter } from '../recipes/stretch-footer/create-stretch-footer';
-import { createRadialMenu } from '../recipes/radial-menu/create-radial-menu';
-import { createTabs } from '../recipes/tabs/create-tabs';
-import { createCounter } from '../recipes/counter/create-counter';
-import { createDetails } from '../recipes/details/create-details';
-import { createReveal } from '../recipes/reveal/create-reveal';
-import { createReflow } from '../recipes/reflow/create-reflow';
-import { createSlotText } from '../recipes/slot-text/create-slot-text';
-import { createSortable } from '../recipes/sortable/create-sortable';
-import { createMaskText } from '../recipes/mask-text/create-mask-text';
-import { createCascade } from '../recipes/cascade/create-cascade';
-import { createTextRoll } from '../recipes/text-roll/create-text-roll';
-import { createLetters } from '../recipes/letters/create-letters';
-import { createParallax } from '../recipes/parallax/create-parallax';
-import { createDepthGrid } from '../recipes/depth-grid/create-depth-grid';
-import { createFrameZoom } from '../recipes/frame-zoom/create-frame-zoom';
-import { createContrast } from '../recipes/contrast/create-contrast';
-import { createMarquee } from '../recipes/marquee/create-marquee';
-import { createCardDock } from '../recipes/card-dock/create-card-dock';
-import { createSnapStrip } from '../recipes/snap-strip/create-snap-strip';
-import { createFillText } from '../recipes/fill-text/create-fill-text';
-import { parseOptions } from './parse-options';
-import { createTicketMenu } from '../recipes/ticket-menu/create-ticket-menu';
-import { createInfiniteReel } from '../recipes/infinite-reel/create-infinite-reel';
-import { createRepelBento } from '../recipes/repel-bento/create-repel-bento';
-import { createRotator } from '../recipes/rotator/create-rotator';
-import { createDragRuler } from '../recipes/drag-ruler/create-drag-ruler';
-import { createDockPill } from '../recipes/dock-pill/create-dock-pill';
-
-import { createSignaturePad } from '../components/signature-pad/engine';
-
-import { createWaveformPlayer } from '../components/waveform-player/engine';
-
-import { createVoiceMessageBubble } from '../components/voice-message-bubble/engine';
-
-import { createDrilldownMenu } from '../components/drilldown-menu/engine';
-
-import { createWheelPicker } from '../components/wheel-picker/engine';
-
-type Factory = (el: HTMLElement, options: Record<string, unknown>) => Instance;
-
-const factories = {
-  'wheel-picker': createWheelPicker,
-  'drilldown-menu': createDrilldownMenu,
-  'voice-message-bubble': createVoiceMessageBubble,
-  'waveform-player': createWaveformPlayer,
-  'signature-pad': createSignaturePad,
-  'joined-cta': createJoinedCta,
-  'image-zoom': createImageZoom,
-  'font-cycle': createFontCycle,
-  'thumbnail-nav': createThumbnailNav,
-  'action-button': createActionButton,
-  'film-hero': createFilmHero,
-  'editorial-reveal': createEditorialReveal,
-  'studio-dock': createStudioDock,
-  'trailer': createTrailer,
-  'quantity': createQuantity,
-  'pagination': createPagination,
-  'hover-card': createHoverCard,
-  'input-otp': createInputOtp,
-  'calendar': createCalendar,
-  'slot-picker': createSlotPicker,
-  'credit-card': createCreditCard,
-  'command-search': createCommandSearch,
-  'hold-confirm': createHoldConfirm,
-  'image-preview': createImagePreview,
-  'like-button': createLikeButton,
-  'notification-bell': createNotificationBell,
-  'password-strength': createPasswordStrength,
-  'scratch-card': createScratchCard,
-  'star-rating': createStarRating,
-  'swipe-actions': createSwipeActions,
-  'attachment': createAttachment,
-  'skeleton': createSkeleton,
-  'questionnaire': createQuestionnaire,
-  'code-block': createCodeBlock,
-  'context-menu': createContextMenu,
-  'drawer': createDrawer,
-  'link-preview': createLinkPreview,
-  'progress': createProgress,
-  'range-slider': createRangeSlider,
-  'chart': createChart,
-  'color-slider': createColorSlider,
-  'color-area': createColorArea,
-  'color-field': createColorField,
-  'color-picker': createColorPicker,
-  'time-field': createTimeField,
-  'range-calendar': createRangeCalendar,
-  'date-range-picker': createDateRangePicker,
-  'tooltip': createTooltip,
-  'popover': createPopover,
-  'loading-button': createLoadingButton,
-  'breadcrumb': createBreadcrumb,
-  'empty-state': createEmptyState,
-  'stat-card': createStatCard,
-  'chart-tooltip': createChartTooltip,
-  'multi-select': createMultiSelect,
-  'tag-input': createTagInput,
-  'date-time-picker': createDateTimePicker,
-  'filter-builder': createFilterBuilder,
-  'timeline': createTimeline,
-  'activity-feed': createActivityFeed,
-  'tree-view': createTreeView,
-  'file-explorer': createFileExplorer,
-  'json-viewer': createJsonViewer,
-  'virtual-list': createVirtualList,
-  'resizable-panel': createResizablePanel,
-  'split-view': createSplitView,
-  'data-table': createDataTable,
-  'editable-table': createEditableTable,
-  'rich-text-editor': createRichTextEditor,
-  'select': createSelect,
-  'add-to-cart': createAddToCart,
-  'scroll-island': createScrollIsland,
-  'weight-hover': createWeightHover,
-  'sticker': createSticker,
-  'scroll-dock': createScrollDock,
-  'local-clock': createLocalClock,
-  'spring-cards': createSpringCards,
-  'curved-carousel': (el, options) =>
-    createCurvedCarousel(el, {
-      ...options,
-      onSelect: (index, slide) => el.dispatchEvent(new CustomEvent('mk:select', { detail: { index, slide }, bubbles: true })),
-    }),
-  pile: createPile,
-  words: createWords,
-  flow: createFlow,
-  pop: createPop,
-  'fit-text': createFitText,
-  'stretch-footer': createStretchFooter,
-  'radial-menu': createRadialMenu,
-  tabs: createTabs,
-  counter: createCounter,
-  details: (el) => createDetails(el),
-  reveal: createReveal,
-  reflow: createReflow,
-  'slot-text': createSlotText,
-  sortable: createSortable,
-  'mask-text': createMaskText,
-  cascade: createCascade,
-  'text-roll': createTextRoll,
-  letters: createLetters,
-  parallax: createParallax,
-  'depth-grid': createDepthGrid,
-  'frame-zoom': createFrameZoom,
-  contrast: createContrast,
-  marquee: createMarquee,
-  'card-dock': createCardDock,
-  'snap-strip': createSnapStrip,
-  'fill-text': createFillText,
-  'ticket-menu': createTicketMenu,
-  'infinite-reel': createInfiniteReel,
-  'repel-bento': createRepelBento,
-  'rotator': createRotator,
-  'drag-ruler': createDragRuler,
-  'dock-pill': createDockPill,
-} satisfies Record<string, Factory>;
-
-export type RecipeName = keyof typeof factories;
-export const recipeNames = Object.keys(factories) as RecipeName[];
-
-/** Measured text: wait for web fonts, fit before splitting into words. */
-const AFTER_FONTS: RecipeName[] = ['fit-text', 'words', 'slot-text'];
-
-const instances = new WeakMap<HTMLElement, Map<RecipeName, Instance>>();
-
-export interface AutoInitOptions {
-  /** Only start these recipes. */
-  only?: RecipeName[];
-}
-
-/**
- * Start every `[data-mk]` recipe inside `root` (an element may list several:
- * `data-mk="fit-text words"`). Options come from `data-mk-*` attributes.
- * Returns a function that destroys what this call created. Safe to call again:
- * elements that already run a recipe are skipped.
- */
-export function autoInit(root: ParentNode = document, { only }: AutoInitOptions = {}): () => void {
-  if (typeof window === 'undefined') return () => {};
-  const created: Array<[HTMLElement, RecipeName, Instance]> = [];
-  let cancelled = false;
-
-  const elements = [...root.querySelectorAll<HTMLElement>('[data-mk]')];
-  if (root instanceof HTMLElement && root.matches('[data-mk]')) elements.unshift(root);
-
-  const start = (el: HTMLElement, name: RecipeName) => {
-    if (cancelled) return;
-    const running = instances.get(el) ?? new Map<RecipeName, Instance>();
-    if (running.has(name)) return;
-    const instance = (factories[name] as Factory)(el, parseOptions(el));
-    running.set(name, instance);
-    instances.set(el, running);
-    created.push([el, name, instance]);
-  };
-
-  const now: Array<[HTMLElement, RecipeName]> = [];
-  const later: Array<[HTMLElement, RecipeName]> = [];
-  for (const el of elements) {
-    for (const raw of (el.dataset.mk ?? '').split(/\s+/).filter(Boolean)) {
-      if (!(raw in factories)) {
-        warnOnce(`autoInit: unknown recipe "${raw}" (known: ${recipeNames.join(', ')})`);
-        continue;
-      }
-      const name = raw as RecipeName;
-      if (only && !only.includes(name)) continue;
-      (AFTER_FONTS.includes(name) ? later : now).push([el, name]);
-    }
-  }
-
-  now.forEach(([el, name]) => start(el, name));
-  if (later.length) {
-    later.sort((a, b) => AFTER_FONTS.indexOf(a[1]) - AFTER_FONTS.indexOf(b[1]));
-    const fonts = document.fonts?.ready ?? Promise.resolve();
-    void Promise.race([fonts, new Promise((resolve) => setTimeout(resolve, 1500))]).then(() => {
-      later.forEach(([el, name]) => start(el, name));
-      if (!cancelled) ScrollTrigger.refresh();
-    });
-  }
-
-  return () => {
-    cancelled = true;
-    for (const [el, name, instance] of created.reverse()) {
-      instance.destroy();
-      instances.get(el)?.delete(name);
-    }
-    created.length = 0;
-  };
-}
+import { createNotFound } from '../components/not-found/engine';
+import { createMorphingPageDots } from '../components/morphing-page-dots/engine';
+import { createBadgeButton } from '../components/badge-button/engine';
+import { createMagnetizeButton } from '../components/magnetize-button/engine';
+import { createParticleButton } from '../components/particle-button/engine';
+import { createHandwritingText } from '../components/handwriting-text/engine';
+import { createStickyHeader } from '../components/sticky-header/engine';
+import { createScrollPreviewDock } from '../components/scroll-preview-dock/engine';
+import { createBentoGrid } from '../components/bento-grid/engine';
+import { createNotificationStack } from '../components/notification-stack/engine';
+import { createRatingScale } from '../components/rating-scale/engine';
+import { createTemperatureSlider } from '../components/temperature-slider/engine';
+import { createEqualizerSlider } from '../components/equalizer-slider/engine';
+import { createRadioGroup } from '../components/radio-group/engine';
+import { createStepper } from '../components/stepper/engine';
+import { createQuantity } from '../components/quantity/engine';
+import { createPagination } from '../components/pagination/engine';
+import { createHoverCard } from '../components/hover-card/engine';
+import { createInputOtp } from '../components/input-otp/engine';
+import { createJoinedCta } from '../recipes/joined-cta/create-joined-cta';
+import { createImageZoom } from '../recipes/image-zoom/create-image-zoom';
+import { createFontCycle } from '../recipes/font-cycle/create-font-cycle';
+import { createThumbnailNav } from '../recipes/thumbnail-nav/create-thumbnail-nav';
+import { createActionButton } from '../recipes/action-button/create-action-button';
+import { createFilmHero } from '../recipes/film-hero/create-film-hero';
+import { createEditorialReveal } from '../recipes/editorial-reveal/create-editorial-reveal';
+import { createStudioDock } from '../components/studio-dock/engine';
+import { createCalendar } from '../components/calendar/engine';
+import { createSlotPicker } from '../components/slot-picker/engine';
+import { createWeightHover } from '../recipes/weight-hover/create-weight-hover';
+import { createSticker } from '../recipes/sticker/create-sticker';
+import { createScrollDock } from '../recipes/scroll-dock/create-scroll-dock';
+import { createLocalClock } from '../recipes/local-clock/create-local-clock';
+import { createTrailer } from '../components/trailer/engine';
+import { createCreditCard } from '../components/credit-card/engine';
+import { createCommandSearch } from '../components/command-search/engine';
+import { createHoldConfirm } from '../components/hold-confirm/engine';
+import { createImagePreview } from '../components/image-preview/engine';
+import { createLikeButton } from '../components/like-button/engine';
+import { createNotificationBell } from '../components/notification-bell/engine';
+import { createPasswordStrength } from '../components/password-strength/engine';
+import { createScratchCard } from '../components/scratch-card/engine';
+import { createStarRating } from '../components/star-rating/engine';
+import { createSwipeActions } from '../components/swipe-actions/engine';
+import { createAttachment } from '../components/attachment/engine';
+import { createSkeleton } from '../components/skeleton/engine';
+import { createQuestionnaire } from '../components/questionnaire/engine';
+import { createCodeBlock } from '../components/code-block/engine';
+import { createContextMenu } from '../components/context-menu/engine';
+import { createDrawer } from '../components/drawer/engine';
+import { createLinkPreview } from '../components/link-preview/engine';
+import { createProgress } from '../components/progress/engine';
+import { createRangeSlider } from '../components/range-slider/engine';
+import { createChart } from '../components/chart/engine';
+import { createColorSlider } from '../components/color-slider/engine';
+import { createColorArea } from '../components/color-area/engine';
+import { createColorField } from '../components/color-field/engine';
+import { createColorPicker } from '../components/color-picker/engine';
+import { createTimeField } from '../components/time-field/engine';
+import { createRangeCalendar } from '../components/range-calendar/engine';
+import { createDateRangePicker } from '../components/date-range-picker/engine';
+import { createTooltip } from '../components/tooltip/engine';
+import { createPopover } from '../components/popover/engine';
+import { createLoadingButton } from '../components/loading-button/engine';
+import { createBreadcrumb } from '../components/breadcrumb/engine';
+import { createEmptyState } from '../components/empty-state/engine';
+import { createStatCard } from '../components/stat-card/engine';
+import { createChartTooltip } from '../components/chart-tooltip/engine';
+import { createMultiSelect } from '../components/multi-select/engine';
+import { createTagInput } from '../components/tag-input/engine';
+import { createDateTimePicker } from '../components/date-time-picker/engine';
+import { createFilterBuilder } from '../components/filter-builder/engine';
+import { createTimeline } from '../components/timeline/engine';
+import { createActivityFeed } from '../components/activity-feed/engine';
+import { createTreeView } from '../components/tree-view/engine';
+import { createFileExplorer } from '../components/file-explorer/engine';
+import { createJsonViewer } from '../components/json-viewer/engine';
+import { createVirtualList } from '../components/virtual-list/engine';
+import { createResizablePanel } from '../components/resizable-panel/engine';
+import { createSplitView } from '../components/split-view/engine';
+import { createDataTable } from '../components/data-table/engine';
+import { createEditableTable } from '../components/editable-table/engine';
+import { createRichTextEditor } from '../components/rich-text-editor/engine';
+import { createSelect } from '../components/select/engine';
+import { createAddToCart } from '../components/add-to-cart/engine';
+import { createScrollIsland } from '../components/scroll-island/engine';
+import { createScrollArea } from '../components/scroll-area/engine';
+import { ScrollTrigger } from '../core/gsap';
+import { warnOnce, type Instance } from '../core/types';
+import { createSpringCards } from '../recipes/spring-cards/create-spring-cards';
+import { createCurvedCarousel } from '../recipes/curved-carousel/create-curved-carousel';
+import { createPile } from '../recipes/pile/create-pile';
+import { createWords } from '../recipes/words/create-words';
+import { createFlow } from '../recipes/flow/create-flow';
+import { createPop } from '../recipes/pop/create-pop';
+import { createFitText } from '../recipes/fit-text/create-fit-text';
+import { createStretchFooter } from '../recipes/stretch-footer/create-stretch-footer';
+import { createRadialMenu } from '../recipes/radial-menu/create-radial-menu';
+import { createTabs } from '../recipes/tabs/create-tabs';
+import { createCounter } from '../recipes/counter/create-counter';
+import { createDetails } from '../recipes/details/create-details';
+import { createReveal } from '../recipes/reveal/create-reveal';
+import { createReflow } from '../recipes/reflow/create-reflow';
+import { createSlotText } from '../recipes/slot-text/create-slot-text';
+import { createSortable } from '../recipes/sortable/create-sortable';
+import { createMaskText } from '../recipes/mask-text/create-mask-text';
+import { createCascade } from '../recipes/cascade/create-cascade';
+import { createTextRoll } from '../recipes/text-roll/create-text-roll';
+import { createLetters } from '../recipes/letters/create-letters';
+import { createParallax } from '../recipes/parallax/create-parallax';
+import { createDepthGrid } from '../recipes/depth-grid/create-depth-grid';
+import { createFrameZoom } from '../recipes/frame-zoom/create-frame-zoom';
+import { createContrast } from '../recipes/contrast/create-contrast';
+import { createMarquee } from '../recipes/marquee/create-marquee';
+import { createCardDock } from '../recipes/card-dock/create-card-dock';
+import { createSnapStrip } from '../recipes/snap-strip/create-snap-strip';
+import { createFillText } from '../recipes/fill-text/create-fill-text';
+import { parseOptions } from './parse-options';
+import { createTicketMenu } from '../recipes/ticket-menu/create-ticket-menu';
+import { createInfiniteReel } from '../recipes/infinite-reel/create-infinite-reel';
+import { createRepelBento } from '../recipes/repel-bento/create-repel-bento';
+import { createRotator } from '../recipes/rotator/create-rotator';
+import { createDragRuler } from '../recipes/drag-ruler/create-drag-ruler';
+import { createDockPill } from '../recipes/dock-pill/create-dock-pill';
+
+import { createSignaturePad } from '../components/signature-pad/engine';
+
+import { createWaveformPlayer } from '../components/waveform-player/engine';
+
+import { createVoiceMessageBubble } from '../components/voice-message-bubble/engine';
+
+import { createDrilldownMenu } from '../components/drilldown-menu/engine';
+
+import { createWheelPicker } from '../components/wheel-picker/engine';
+
+type Factory = (el: HTMLElement, options: Record<string, unknown>) => Instance;
+
+const factories = {
+  'stepper': createStepper,
+  'radio-group': createRadioGroup,
+  'equalizer-slider': createEqualizerSlider,
+  'temperature-slider': createTemperatureSlider,
+  'rating-scale': createRatingScale,
+  'notification-stack': createNotificationStack,
+  'bento-grid': createBentoGrid,
+  'scroll-preview-dock': createScrollPreviewDock,
+  'sticky-header': createStickyHeader,
+  'handwriting-text': createHandwritingText,
+  'particle-button': createParticleButton,
+  'magnetize-button': createMagnetizeButton,
+  'badge-button': createBadgeButton,
+  'morphing-page-dots': createMorphingPageDots,
+  'not-found': createNotFound,
+
+  'wheel-picker': createWheelPicker,
+  'drilldown-menu': createDrilldownMenu,
+  'voice-message-bubble': createVoiceMessageBubble,
+  'waveform-player': createWaveformPlayer,
+  'signature-pad': createSignaturePad,
+  'joined-cta': createJoinedCta,
+  'image-zoom': createImageZoom,
+  'font-cycle': createFontCycle,
+  'thumbnail-nav': createThumbnailNav,
+  'action-button': createActionButton,
+  'film-hero': createFilmHero,
+  'editorial-reveal': createEditorialReveal,
+  'studio-dock': createStudioDock,
+  'trailer': createTrailer,
+  'quantity': createQuantity,
+  'pagination': createPagination,
+  'hover-card': createHoverCard,
+  'input-otp': createInputOtp,
+  'calendar': createCalendar,
+  'slot-picker': createSlotPicker,
+  'credit-card': createCreditCard,
+  'command-search': createCommandSearch,
+  'hold-confirm': createHoldConfirm,
+  'image-preview': createImagePreview,
+  'like-button': createLikeButton,
+  'notification-bell': createNotificationBell,
+  'password-strength': createPasswordStrength,
+  'scratch-card': createScratchCard,
+  'star-rating': createStarRating,
+  'swipe-actions': createSwipeActions,
+  'attachment': createAttachment,
+  'skeleton': createSkeleton,
+  'questionnaire': createQuestionnaire,
+  'code-block': createCodeBlock,
+  'context-menu': createContextMenu,
+  'drawer': createDrawer,
+  'link-preview': createLinkPreview,
+  'progress': createProgress,
+  'range-slider': createRangeSlider,
+  'chart': createChart,
+  'color-slider': createColorSlider,
+  'color-area': createColorArea,
+  'color-field': createColorField,
+  'color-picker': createColorPicker,
+  'time-field': createTimeField,
+  'range-calendar': createRangeCalendar,
+  'date-range-picker': createDateRangePicker,
+  'tooltip': createTooltip,
+  'popover': createPopover,
+  'loading-button': createLoadingButton,
+  'breadcrumb': createBreadcrumb,
+  'empty-state': createEmptyState,
+  'stat-card': createStatCard,
+  'chart-tooltip': createChartTooltip,
+  'multi-select': createMultiSelect,
+  'tag-input': createTagInput,
+  'date-time-picker': createDateTimePicker,
+  'filter-builder': createFilterBuilder,
+  'timeline': createTimeline,
+  'activity-feed': createActivityFeed,
+  'tree-view': createTreeView,
+  'file-explorer': createFileExplorer,
+  'json-viewer': createJsonViewer,
+  'virtual-list': createVirtualList,
+  'resizable-panel': createResizablePanel,
+  'split-view': createSplitView,
+  'data-table': createDataTable,
+  'editable-table': createEditableTable,
+  'rich-text-editor': createRichTextEditor,
+  'select': createSelect,
+  'add-to-cart': createAddToCart,
+  'scroll-island': createScrollIsland,
+  'scroll-area': createScrollArea,
+  'weight-hover': createWeightHover,
+  'sticker': createSticker,
+  'scroll-dock': createScrollDock,
+  'local-clock': createLocalClock,
+  'spring-cards': createSpringCards,
+  'curved-carousel': (el, options) =>
+    createCurvedCarousel(el, {
+      ...options,
+      onSelect: (index, slide) => el.dispatchEvent(new CustomEvent('mk:select', { detail: { index, slide }, bubbles: true })),
+    }),
+  pile: createPile,
+  words: createWords,
+  flow: createFlow,
+  pop: createPop,
+  'fit-text': createFitText,
+  'stretch-footer': createStretchFooter,
+  'radial-menu': createRadialMenu,
+  tabs: createTabs,
+  counter: createCounter,
+  details: (el) => createDetails(el),
+  reveal: createReveal,
+  reflow: createReflow,
+  'slot-text': createSlotText,
+  sortable: createSortable,
+  'mask-text': createMaskText,
+  cascade: createCascade,
+  'text-roll': createTextRoll,
+  letters: createLetters,
+  parallax: createParallax,
+  'depth-grid': createDepthGrid,
+  'frame-zoom': createFrameZoom,
+  contrast: createContrast,
+  marquee: createMarquee,
+  'card-dock': createCardDock,
+  'snap-strip': createSnapStrip,
+  'fill-text': createFillText,
+  'ticket-menu': createTicketMenu,
+  'infinite-reel': createInfiniteReel,
+  'repel-bento': createRepelBento,
+  'rotator': createRotator,
+  'drag-ruler': createDragRuler,
+  'dock-pill': createDockPill,
+} satisfies Record<string, Factory>;
+
+export type RecipeName = keyof typeof factories;
+export const recipeNames = Object.keys(factories) as RecipeName[];
+
+/** Measured text: wait for web fonts, fit before splitting into words. */
+const AFTER_FONTS: RecipeName[] = ['fit-text', 'words', 'slot-text'];
+
+const instances = new WeakMap<HTMLElement, Map<RecipeName, Instance>>();
+
+export interface AutoInitOptions {
+  /** Only start these recipes. */
+  only?: RecipeName[];
+}
+
+/**
+ * Start every `[data-mk]` recipe inside `root` (an element may list several:
+ * `data-mk="fit-text words"`). Options come from `data-mk-*` attributes.
+ * Returns a function that destroys what this call created. Safe to call again:
+ * elements that already run a recipe are skipped.
+ */
+export function autoInit(root: ParentNode = document, { only }: AutoInitOptions = {}): () => void {
+  if (typeof window === 'undefined') return () => {};
+  const created: Array<[HTMLElement, RecipeName, Instance]> = [];
+  let cancelled = false;
+
+  const elements = [...root.querySelectorAll<HTMLElement>('[data-mk]')];
+  if (root instanceof HTMLElement && root.matches('[data-mk]')) elements.unshift(root);
+
+  const start = (el: HTMLElement, name: RecipeName) => {
+    if (cancelled) return;
+    const running = instances.get(el) ?? new Map<RecipeName, Instance>();
+    if (running.has(name)) return;
+    const instance = (factories[name] as Factory)(el, parseOptions(el));
+    running.set(name, instance);
+    instances.set(el, running);
+    created.push([el, name, instance]);
+  };
+
+  const now: Array<[HTMLElement, RecipeName]> = [];
+  const later: Array<[HTMLElement, RecipeName]> = [];
+  for (const el of elements) {
+    for (const raw of (el.dataset.mk ?? '').split(/\s+/).filter(Boolean)) {
+      if (!(raw in factories)) {
+        warnOnce(`autoInit: unknown recipe "${raw}" (known: ${recipeNames.join(', ')})`);
+        continue;
+      }
+      const name = raw as RecipeName;
+      if (only && !only.includes(name)) continue;
+      (AFTER_FONTS.includes(name) ? later : now).push([el, name]);
+    }
+  }
+
+  now.forEach(([el, name]) => start(el, name));
+  if (later.length) {
+    later.sort((a, b) => AFTER_FONTS.indexOf(a[1]) - AFTER_FONTS.indexOf(b[1]));
+    const fonts = document.fonts?.ready ?? Promise.resolve();
+    void Promise.race([fonts, new Promise((resolve) => setTimeout(resolve, 1500))]).then(() => {
+      later.forEach(([el, name]) => start(el, name));
+      if (!cancelled) ScrollTrigger.refresh();
+    });
+  }
+
+  return () => {
+    cancelled = true;
+    for (const [el, name, instance] of created.reverse()) {
+      instance.destroy();
+      instances.get(el)?.delete(name);
+    }
+    created.length = 0;
+  };
+}