@yewdiel21/motion-kit 0.0.0-stage → 0.9.0

package/NOTICE

@@ -0,0 +1,38 @@
+motion-kit
+Copyright 2026 Yewdiel Medina. All rights reserved.
+
+The recipes and motion functions re-implement motion parameters observed in the
+public frontends of spencergabor.com and of the Stepbro apps (Tasks, Money),
+recovered with the REA reverse-engineering tools for study. No source code,
+images or fonts from those sites are included in this repository or in the
+published package.
+
+The 19 theme palettes (css/themes/*.css, css/default-theme.css) reproduce the
+colour values of Stepbro's themes as data, and the controls reproduce the sizes
+of its Material Web overrides. Fonts (DM Sans, Geist Mono, Material Symbols) are
+loaded from Google Fonts, not bundled.
+
+The glass control, progressive frost, floating tags, success confetti and
+sheet dialog reproduce parameters observed in dousanmiao.com; the burger icon
+and rolling button reproduce timings of siena.film's public CSS. No code from
+their bundles is included; the film grain is an original CSS approximation.
+The text and scroll recipes and the cursors (v0.6) reproduce parameters
+observed in offficestud.io (masked type), siena.film (slot title, reveal group,
+parallax, depth grid, video mask, header contrast, marquee, dot cursor) and
+dousanmiao.com (hero letters, glass chip cursor); they are original code.
+The island navbar, card dock, snap strip, fill text and particle hero (v0.7)
+reproduce parameters observed in iyo.ai (floating navbar, product dock, phone
+cards, fill-text, GPU particle hero); they are original code. The particle hero
+is an own WebGL2 implementation of the observed mechanism, with its own shaders
+and locally drawn words: no iyo.ai code, shaders, images, models or fonts.
+
+The collections (v0.8) re-implement Siena's ticket menu and inertial reels and
+Dousan's bento entry/repulsion, testimonials, years ruler and active dock pill.
+The image effects (v0.9) use original WebGL shaders: OFFFICE's liquid/matcap
+mechanisms adapted to images and an analytic sphere, and Siena's observed
+grain intensity and directional blur weights. No third-party shaders, models,
+images or fonts are redistributed. Playground SVG illustrations are original.
+
+Parts of the Stepbro recipes, the spring channels, slot text, swatches, flip
+group and animated number reuse code written by the same author for Kayro
+(Apache License 2.0).

package/README.md

@@ -1,3 +1,81 @@
-# Temporary Holding Version
+# @yewdiel21/motion-kit
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Motion toolkit for vanilla JavaScript, Astro and React/Next.js. GSAP recipes, accessible UI components, 19 Material 3 themes, CSS controls and optional WebGL effects.
+
+## Install
+
+```sh
+npm install @yewdiel21/motion-kit gsap
+```
+
+For React components, install React 18 or newer. The theme generator additionally requires `@material/material-color-utilities@^0.3.0`.
+
+## Vanilla / Astro
+
+```ts
+import '@yewdiel21/motion-kit/css';
+import { autoInit } from '@yewdiel21/motion-kit/auto';
+
+const destroy = autoInit(document);
+```
+
+```html
+<div class="mk-segmented" data-mk="tabs">
+  <button data-mk-tab aria-selected="true">Today</button>
+  <button data-mk-tab>Week</button>
+  <span data-mk-indicator></span>
+</div>
+```
+
+Call `destroy()` before replacing the DOM. Add `MK_HEAD_SCRIPT` from `/auto` inline to `<head>` when using entrance recipes, and `defineElements()` from `/elements` to register the `mk-*` custom elements.
+
+## React / Next.js
+
+```tsx
+'use client';
+
+import '@yewdiel21/motion-kit/css';
+import { useRef } from 'react';
+import { useTabs } from '@yewdiel21/motion-kit/react';
+
+export function Tabs() {
+  const ref = useRef<HTMLDivElement>(null);
+  useTabs(ref);
+  return (
+    <div ref={ref} className="mk-segmented">
+      <button data-mk-tab aria-selected="true">Today</button>
+      <button data-mk-tab>Week</button>
+      <span data-mk-indicator="" />
+    </div>
+  );
+}
+```
+
+Hooks create the engine after mount and destroy it on unmount. Import themes separately from `/css/themes`, fonts from `/css/fonts`, and theme utilities from `/theme`.
+
+## Copy source with the CLI
+
+```sh
+npx @yewdiel21/motion-kit list
+npx @yewdiel21/motion-kit add tabs island drag-ruler --react --elements --dir src/motion-kit
+npx @yewdiel21/motion-kit skill
+```
+
+The CLI copies the selected components, their dependencies and CSS. Each copied folder includes its README. It does not overwrite files without `--force`.
+
+## Entry points
+
+| Import | Contents |
+|---|---|
+| `@yewdiel21/motion-kit` | Factories, motion functions, easings and timing constants |
+| `/auto` | Declarative `data-mk` initialization and head script |
+| `/react` | Hooks and React components |
+| `/elements` | Custom elements |
+| `/theme` | Theme runtime and head script |
+| `/theme/generate` | Optional Material 3 palette generator |
+| `/gl` | Particle hero, liquid blend, matcap, shader grain and blur |
+| `/css`, `/css/themes`, `/css/fonts` | Styles, theme palettes and font imports |
+
+WebGL is optional. Keep accessible text and images in HTML; effects provide a fallback when graphics support is unavailable. Motion recipes respect reduced-motion preferences and return an idempotent `destroy()`.
+
+Full recipe documentation and the playground source are in the [repository](https://github.com/YewdielMartinez/motion-kit). Parameters and attribution are documented in `NOTICE` and the source READMEs. License: `UNLICENSED`; all rights reserved.

package/bin/motion-kit.mjs

@@ -0,0 +1,242 @@
+#!/usr/bin/env node
+// motion-kit CLI — copy recipes, components, controls and themes (and the Claude skill)
+// out of the installed package, and generate themes from a colour.
+// No dependencies: it reads src/, registry.json and skills/ shipped inside the package.
+import { copyFileSync, cpSync, existsSync, mkdirSync, readFileSync, readdirSync, statSync, writeFileSync } from 'node:fs';
+import { homedir } from 'node:os';
+import { dirname, join, posix, resolve } from 'node:path';
+import { fileURLToPath, pathToFileURL } from 'node:url';
+
+const PKG = join(dirname(fileURLToPath(import.meta.url)), '..');
+const SRC = join(PKG, 'src');
+const registry = JSON.parse(readFileSync(join(PKG, 'registry.json'), 'utf8'));
+const entries = registry.entries;
+const THEME_IDS = readdirSync(join(SRC, 'css', 'themes'))
+  .filter((file) => file.endsWith('.css'))
+  .map((file) => file.slice(0, -4))
+  .sort();
+
+const argv = process.argv.slice(2);
+const VALUE_FLAGS = new Set(['--dir', '--seed', '--out', '--variant']);
+const flags = new Map();
+const positional = [];
+for (let i = 0; i < argv.length; i++) {
+  const arg = argv[i];
+  if (arg.startsWith('--')) {
+    const [name, inline] = arg.split('=');
+    if (VALUE_FLAGS.has(name)) flags.set(name, inline ?? argv[++i]);
+    else flags.set(name, true);
+  } else positional.push(arg);
+}
+const [command, ...names] = positional;
+
+const out = (line = '') => process.stdout.write(`${line}\n`);
+const fail = (message, code = 1) => {
+  process.stderr.write(`motion-kit: ${message}\n`);
+  process.exit(code);
+};
+
+function help() {
+  out('Usage: motion-kit <command> [options]');
+  out();
+  out('  list                              Show recipes, components, controls and themes');
+  out('  add <name...> [--react] [--elements]');
+  out('                                    Copy recipes/components/controls and the core they use');
+  out('        --dir <path>                Destination (default: src/motion-kit)');
+  out('        --react                     Also copy the React hook / component');
+  out('        --elements                  Also copy the custom element of each component');
+  out('        --force                     Overwrite files that already exist');
+  out('  add theme <id...>                 Copy theme stylesheets (css/themes/<id>.css)');
+  out('  theme <id> --seed <#rrggbb>       Generate a Material 3 theme stylesheet from a colour');
+  out('        --out <dir>                 Destination (default: src/styles)');
+  out('        --variant <name>            tonal-spot (default), vibrant, expressive, neutral, content, fidelity, monochrome');
+  out('  skill [--global] [--force]        Install the Claude Code skill into .claude/skills/ (or ~/.claude/skills/)');
+}
+
+// Relative imports only (by design): from './x', from '../../core/x', import './x'
+const IMPORT_RE = /(?:import|export)\s[^'"]*?from\s*['"](\.{1,2}\/[^'"]+)['"]|import\s*['"](\.{1,2}\/[^'"]+)['"]/g;
+
+function resolveImport(fromFile, spec) {
+  const base = posix.normalize(posix.join(posix.dirname(fromFile), spec));
+  for (const candidate of [base, `${base}.ts`, `${base}.tsx`, `${base}/index.ts`]) {
+    const full = join(SRC, candidate);
+    if (existsSync(full) && statSync(full).isFile()) return candidate;
+  }
+  return null;
+}
+
+/** Entry files plus every source file they import, transitively. */
+function closure(start) {
+  const seen = new Set();
+  const queue = [...start];
+  while (queue.length) {
+    const file = queue.shift();
+    if (seen.has(file)) continue;
+    if (!existsSync(join(SRC, file))) fail(`missing source file ${file} (broken package?)`, 2);
+    seen.add(file);
+    if (!/\.tsx?$/.test(file)) continue;
+    const code = readFileSync(join(SRC, file), 'utf8');
+    for (const match of code.matchAll(IMPORT_RE)) {
+      const spec = match[1] ?? match[2];
+      const resolved = resolveImport(file, spec);
+      if (!resolved) fail(`cannot resolve "${spec}" from ${file}`, 2);
+      queue.push(resolved);
+    }
+  }
+  return [...seen].filter((file) => !/\.test\.tsx?$/.test(file)).sort();
+}
+
+const GROUPS = [
+  ['recipe', 'Recipes'],
+  ['component', 'Components (--elements, --react)'],
+  ['controls', 'Controls'],
+  ['effects', 'Effects'],
+];
+
+function list() {
+  const width = Math.max(...Object.keys(entries).map((name) => name.length));
+  for (const [kind, title] of GROUPS) {
+    const group = Object.entries(entries).filter(([, entry]) => entry.kind === kind);
+    if (!group.length) continue;
+    out(`${title}:`);
+    for (const [name, entry] of group) out(`  ${name.padEnd(width)}  ${entry.description}`);
+    out();
+  }
+  out(`Themes (add theme <id>):`);
+  out(`  ${THEME_IDS.join(', ')}`);
+}
+
+function copyInto(files) {
+  const dir = resolve(process.cwd(), flags.get('--dir') ?? 'src/motion-kit');
+  const existing = files.filter((file) => existsSync(join(dir, file)));
+  if (existing.length && !flags.has('--force')) {
+    fail(`these files already exist in ${dir}:\n  ${existing.join('\n  ')}\nRe-run with --force to overwrite them.`);
+  }
+  for (const file of files) {
+    const target = join(dir, file);
+    mkdirSync(dirname(target), { recursive: true });
+    copyFileSync(join(SRC, file), target);
+  }
+  out(`Copied ${files.length} files into ${dir}:`);
+  for (const file of files) out(`  ${file}`);
+  return dir;
+}
+
+function addThemes(ids) {
+  if (!ids.length) fail(`name at least one theme: ${THEME_IDS.join(', ')}`);
+  const unknown = ids.filter((id) => !THEME_IDS.includes(id));
+  if (unknown.length) fail(`unknown theme(s): ${unknown.join(', ')}\nAvailable: ${THEME_IDS.join(', ')}`);
+  const dir = copyInto(ids.map((id) => `css/themes/${id}.css`));
+  out();
+  out('Next steps:');
+  out(`  1. Import the stylesheets after the tokens, e.g. import './${posix.relative(process.cwd(), dir).split('\\').join('/')}/css/themes/${ids[0]}.css';`);
+  out(`  2. Set <html data-mk-theme="${ids[0]}"> (or call setTheme('${ids[0]}') from theme/theme.ts).`);
+}
+
+function add() {
+  if (names[0] === 'theme') return addThemes(names.slice(1));
+  if (!names.length) fail('name at least one recipe or component. Run "motion-kit list".');
+  const unknown = names.filter((name) => !entries[name]);
+  if (unknown.length) {
+    process.stderr.write(`motion-kit: unknown name(s): ${unknown.join(', ')}\nAvailable:\n`);
+    list();
+    process.exit(1);
+  }
+  // Requested entries plus what they require, transitively.
+  const chosen = [];
+  const visit = (name) => {
+    if (chosen.includes(name)) return;
+    for (const dep of entries[name].requires ?? []) visit(dep);
+    chosen.push(name);
+  };
+  names.forEach(visit);
+
+  const withReact = flags.has('--react');
+  const withElements = flags.has('--elements');
+  const start = [
+    ...registry.css,
+    ...chosen.flatMap((name) => {
+      const entry = entries[name];
+      return [
+        ...entry.files,
+        ...(withReact && entry.react ? [entry.react] : []),
+        ...(withElements && entry.element ? [entry.element] : []),
+      ];
+    }),
+  ];
+  const files = closure(start);
+  const dir = copyInto(files);
+  const rel = posix.relative(process.cwd(), dir).split('\\').join('/');
+
+  out();
+  out('Next steps:');
+  out(`  1. Install GSAP${withReact ? ' (and React)' : ''}: npm i gsap`);
+  out('  2. Import the CSS once (tokens, default theme, base, entrance states, then each piece):');
+  for (const file of files.filter((file) => file.endsWith('.css'))) out(`       import './${posix.join(rel, file)}';`);
+  out('  3. Add MK_HEAD_SCRIPT (core/reduced.ts) inline in <head> to hide entrances until JS runs.');
+  const components = chosen.filter((name) => entries[name].kind === 'component');
+  if (withElements && components.length) {
+    out('  4. Register the custom elements:');
+    for (const name of components) {
+      const pascal = name.replace(/(^|-)([a-z0-9])/g, (_, __, c) => c.toUpperCase());
+      out(`       import { define${pascal} } from './${posix.join(rel, entries[name].element.replace(/\.ts$/, ''))}'; define${pascal}();`);
+    }
+  }
+  out('  Each folder has a README with markup and options.');
+}
+
+async function theme() {
+  const [id] = names;
+  const seed = flags.get('--seed');
+  if (!id || !/^[a-z][a-z0-9-]*$/.test(id)) fail('usage: motion-kit theme <kebab-id> --seed "#rrggbb" [--out dir]');
+  if (!seed || !/^#?[0-9a-f]{6}$/i.test(seed)) fail('--seed must be a colour like "#00e563"');
+  let generate;
+  try {
+    generate = await import(pathToFileURL(join(PKG, 'dist', 'theme', 'generate.js')).href);
+  } catch (error) {
+    if (String(error?.message).includes('material-color-utilities')) {
+      fail('the generator needs the optional peer: npm i -D @material/material-color-utilities@^0.3.0');
+    }
+    fail(`cannot load the generator (${error?.message ?? error}). Is the package built?`, 2);
+  }
+  const css = generate.themeCss(id, generate.generateTheme(seed, { variant: flags.get('--variant') }));
+  const dir = resolve(process.cwd(), flags.get('--out') ?? 'src/styles');
+  const target = join(dir, `${id}.css`);
+  if (existsSync(target) && !flags.has('--force')) fail(`${target} already exists. Re-run with --force to replace it.`);
+  mkdirSync(dir, { recursive: true });
+  writeFileSync(target, `/* Theme "${id}" generated by motion-kit from ${seed} (Material 3, ${flags.get('--variant') ?? 'tonal-spot'}). */\n${css}`);
+  out(`Wrote ${target}`);
+  out(`Import it after the motion-kit CSS and set <html data-mk-theme="${id}"> (or registerTheme('${id}') + setTheme('${id}')).`);
+}
+
+function skill() {
+  const source = join(PKG, 'skills', 'motion-kit');
+  if (!existsSync(source)) fail('skill files are missing from the package', 2);
+  const base = flags.has('--global') ? join(homedir(), '.claude') : join(process.cwd(), '.claude');
+  const target = join(base, 'skills', 'motion-kit');
+  if (existsSync(target) && !flags.has('--force')) fail(`${target} already exists. Re-run with --force to replace it.`);
+  cpSync(source, target, { recursive: true, force: true });
+  out(`Installed the motion-kit skill in ${target}`);
+}
+
+switch (command) {
+  case 'list':
+    list();
+    break;
+  case 'add':
+    add();
+    break;
+  case 'theme':
+    await theme();
+    break;
+  case 'skill':
+    skill();
+    break;
+  case undefined:
+  case 'help':
+    help();
+    break;
+  default:
+    help();
+    process.exit(1);
+}

package/css.d.ts

@@ -0,0 +1,2 @@
+// Type stub for the CSS exports (./css, ./css/*): side-effect imports type-check.
+export {};

package/dist/auto/index.d.ts

@@ -0,0 +1,63 @@
+import { c as createSpringCards, C as CurvedCarouselInstance, a as createPile, b as createWords, d as createFlow, e as createPop, f as createFitText, g as createStretchFooter, h as createRadialMenu, i as createTabs, j as createCounter, k as createReveal, l as createReflow, m as createSlotText, n as createSortable, o as createMaskText, p as createCascade, q as createTextRoll, r as createLetters, s as createParallax, t as createDepthGrid, u as createFrameZoom, v as createContrast, w as createMarquee, x as createCardDock, y as createSnapStrip, z as createFillText, T as TicketMenuOptions, A as TicketMenuInstance, B as createInfiniteReel, D as createRepelBento, E as createRotator, F as createDragRuler, G as createDockPill } from '../reduced-BM4Ls0g5.js';
+export { M as MK_HEAD_SCRIPT } from '../reduced-BM4Ls0g5.js';
+import { I as Instance } from '../types-BkS_raL8.js';
+import '../reveal-WFUWDrei.js';
+import 'gsap/SplitText';
+
+declare const factories: {
+    'spring-cards': typeof createSpringCards;
+    'curved-carousel': (el: HTMLElement, options: Record<string, unknown>) => CurvedCarouselInstance;
+    pile: typeof createPile;
+    words: typeof createWords;
+    flow: typeof createFlow;
+    pop: typeof createPop;
+    'fit-text': typeof createFitText;
+    'stretch-footer': typeof createStretchFooter;
+    'radial-menu': typeof createRadialMenu;
+    tabs: typeof createTabs;
+    counter: typeof createCounter;
+    details: (el: HTMLElement) => Instance;
+    reveal: typeof createReveal;
+    reflow: typeof createReflow;
+    'slot-text': typeof createSlotText;
+    sortable: typeof createSortable;
+    'mask-text': typeof createMaskText;
+    cascade: typeof createCascade;
+    'text-roll': typeof createTextRoll;
+    letters: typeof createLetters;
+    parallax: typeof createParallax;
+    'depth-grid': typeof createDepthGrid;
+    'frame-zoom': typeof createFrameZoom;
+    contrast: typeof createContrast;
+    marquee: typeof createMarquee;
+    'card-dock': typeof createCardDock;
+    'snap-strip': typeof createSnapStrip;
+    'fill-text': typeof createFillText;
+    'ticket-menu': (root: HTMLElement | null, options?: TicketMenuOptions) => TicketMenuInstance;
+    'infinite-reel': typeof createInfiniteReel;
+    'repel-bento': typeof createRepelBento;
+    rotator: typeof createRotator;
+    'drag-ruler': typeof createDragRuler;
+    'dock-pill': typeof createDockPill;
+};
+type RecipeName = keyof typeof factories;
+declare const recipeNames: RecipeName[];
+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.
+ */
+declare function autoInit(root?: ParentNode, { only }?: AutoInitOptions): () => void;
+
+/**
+ * `data-mk-<option>` attributes → options object.
+ * `data-mk-throw-boost="2.5"` → `{ throwBoost: 2.5 }`, `data-mk-trigger="load"` → `{ trigger: 'load' }`.
+ */
+declare function parseOptions(el: HTMLElement): Record<string, unknown>;
+
+export { type AutoInitOptions, type RecipeName, autoInit, parseOptions, recipeNames };

package/dist/auto/index.js

@@ -0,0 +1,207 @@
+import {
+  createCardDock,
+  createCascade,
+  createContrast,
+  createCounter,
+  createCurvedCarousel,
+  createDepthGrid,
+  createDetails,
+  createDockPill,
+  createDragRuler,
+  createFillText,
+  createFitText,
+  createFlow,
+  createFrameZoom,
+  createInfiniteReel,
+  createLetters,
+  createMarquee,
+  createMaskText,
+  createParallax,
+  createPile,
+  createPop,
+  createRadialMenu,
+  createReflow,
+  createRepelBento,
+  createReveal,
+  createRotator,
+  createSlotText,
+  createSnapStrip,
+  createSortable,
+  createSpringCards,
+  createStretchFooter,
+  createTabs,
+  createTextRoll,
+  createTicketMenu,
+  createWords
+} from "../chunk-FS2HJVVY.js";
+import {
+  ScrollTrigger
+} from "../chunk-34XYOXHG.js";
+import "../chunk-KLY5BRRI.js";
+import {
+  MK_HEAD_SCRIPT
+} from "../chunk-RFDIZYFX.js";
+import {
+  warnOnce
+} from "../chunk-TGV27ZWM.js";
+
+// src/auto/parse-options.ts
+var RESERVED = /* @__PURE__ */ new Set([
+  "",
+  "ready",
+  "inview",
+  "carousel",
+  "open",
+  "card",
+  "slide",
+  "toggle",
+  "item",
+  "phantom",
+  "footerTitle",
+  "tab",
+  "indicator",
+  "chevron",
+  "text",
+  "role",
+  "motion",
+  "veil",
+  "swatch",
+  "part",
+  "sorting",
+  "sortableGroup",
+  "sortableLocked",
+  "cascade",
+  "on",
+  "tone",
+  "cursorZone",
+  "hidden",
+  "pressed",
+  "parallaxTarget",
+  "spread",
+  "expanded",
+  "settled",
+  "mode",
+  "active",
+  "islandToggle",
+  "islandPanel",
+  "islandItem",
+  "islandClose",
+  "reelTrack",
+  "reelCopy",
+  "dragging",
+  "dockItem"
+]);
+var coerce = (value) => {
+  if (value === "" || value === "true") return true;
+  if (value === "false") return false;
+  if (/^-?\d*\.?\d+$/.test(value)) return Number(value);
+  return value;
+};
+function parseOptions(el) {
+  const options = {};
+  for (const [key, raw] of Object.entries(el.dataset)) {
+    if (!key.startsWith("mk") || key.length === 2) continue;
+    const name = key.charAt(2).toLowerCase() + key.slice(3);
+    if (RESERVED.has(name)) continue;
+    options[name] = coerce(raw ?? "");
+  }
+  return options;
+}
+
+// src/auto/auto-init.ts
+var factories = {
+  "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
+};
+var recipeNames = Object.keys(factories);
+var AFTER_FONTS = ["fit-text", "words", "slot-text"];
+var instances = /* @__PURE__ */ new WeakMap();
+function autoInit(root = document, { only } = {}) {
+  if (typeof window === "undefined") return () => {
+  };
+  const created = [];
+  let cancelled = false;
+  const elements = [...root.querySelectorAll("[data-mk]")];
+  if (root instanceof HTMLElement && root.matches("[data-mk]")) elements.unshift(root);
+  const start = (el, name) => {
+    if (cancelled) return;
+    const running = instances.get(el) ?? /* @__PURE__ */ new Map();
+    if (running.has(name)) return;
+    const instance = factories[name](el, parseOptions(el));
+    running.set(name, instance);
+    instances.set(el, running);
+    created.push([el, name, instance]);
+  };
+  const now = [];
+  const later = [];
+  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;
+      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;
+  };
+}
+export {
+  MK_HEAD_SCRIPT,
+  autoInit,
+  parseOptions,
+  recipeNames
+};
+//# sourceMappingURL=index.js.map

package/dist/auto/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/auto/parse-options.ts","../../src/auto/auto-init.ts"],"sourcesContent":["/** Attributes the recipes write themselves or use for children; never options. */\nconst RESERVED = new Set([\n  '',\n  'ready',\n  'inview',\n  'carousel',\n  'open',\n  'card',\n  'slide',\n  'toggle',\n  'item',\n  'phantom',\n  'footerTitle',\n  'tab',\n  'indicator',\n  'chevron',\n  'text',\n  'role',\n  'motion',\n  'veil',\n  'swatch',\n  'part',\n  'sorting',\n  'sortableGroup',\n  'sortableLocked',\n  'cascade',\n  'on',\n  'tone',\n  'cursorZone',\n  'hidden',\n  'pressed',\n  'parallaxTarget',\n  'spread',\n  'expanded',\n  'settled',\n  'mode',\n  'active',\n  'islandToggle',\n  'islandPanel',\n  'islandItem',\n  'islandClose',\n  'reelTrack',\n  'reelCopy',\n  'dragging',\n  'dockItem',\n]);\n\nconst coerce = (value: string): unknown => {\n  if (value === '' || value === 'true') return true;\n  if (value === 'false') return false;\n  if (/^-?\\d*\\.?\\d+$/.test(value)) return Number(value);\n  return value;\n};\n\n/**\n * `data-mk-<option>` attributes → options object.\n * `data-mk-throw-boost=\"2.5\"` → `{ throwBoost: 2.5 }`, `data-mk-trigger=\"load\"` → `{ trigger: 'load' }`.\n */\nexport function parseOptions(el: HTMLElement): Record<string, unknown> {\n  const options: Record<string, unknown> = {};\n  for (const [key, raw] of Object.entries(el.dataset)) {\n    if (!key.startsWith('mk') || key.length === 2) continue;\n    const name = key.charAt(2).toLowerCase() + key.slice(3);\n    if (RESERVED.has(name)) continue;\n    options[name] = coerce(raw ?? '');\n  }\n  return options;\n}\n","import { ScrollTrigger } from '../core/gsap';\nimport { warnOnce, type Instance } from '../core/types';\nimport { createSpringCards } from '../recipes/spring-cards/create-spring-cards';\nimport { createCurvedCarousel } from '../recipes/curved-carousel/create-curved-carousel';\nimport { createPile } from '../recipes/pile/create-pile';\nimport { createWords } from '../recipes/words/create-words';\nimport { createFlow } from '../recipes/flow/create-flow';\nimport { createPop } from '../recipes/pop/create-pop';\nimport { createFitText } from '../recipes/fit-text/create-fit-text';\nimport { createStretchFooter } from '../recipes/stretch-footer/create-stretch-footer';\nimport { createRadialMenu } from '../recipes/radial-menu/create-radial-menu';\nimport { createTabs } from '../recipes/tabs/create-tabs';\nimport { createCounter } from '../recipes/counter/create-counter';\nimport { createDetails } from '../recipes/details/create-details';\nimport { createReveal } from '../recipes/reveal/create-reveal';\nimport { createReflow } from '../recipes/reflow/create-reflow';\nimport { createSlotText } from '../recipes/slot-text/create-slot-text';\nimport { createSortable } from '../recipes/sortable/create-sortable';\nimport { createMaskText } from '../recipes/mask-text/create-mask-text';\nimport { createCascade } from '../recipes/cascade/create-cascade';\nimport { createTextRoll } from '../recipes/text-roll/create-text-roll';\nimport { createLetters } from '../recipes/letters/create-letters';\nimport { createParallax } from '../recipes/parallax/create-parallax';\nimport { createDepthGrid } from '../recipes/depth-grid/create-depth-grid';\nimport { createFrameZoom } from '../recipes/frame-zoom/create-frame-zoom';\nimport { createContrast } from '../recipes/contrast/create-contrast';\nimport { createMarquee } from '../recipes/marquee/create-marquee';\nimport { createCardDock } from '../recipes/card-dock/create-card-dock';\nimport { createSnapStrip } from '../recipes/snap-strip/create-snap-strip';\nimport { createFillText } from '../recipes/fill-text/create-fill-text';\nimport { parseOptions } from './parse-options';\nimport { createTicketMenu } from '../recipes/ticket-menu/create-ticket-menu';\nimport { createInfiniteReel } from '../recipes/infinite-reel/create-infinite-reel';\nimport { createRepelBento } from '../recipes/repel-bento/create-repel-bento';\nimport { createRotator } from '../recipes/rotator/create-rotator';\nimport { createDragRuler } from '../recipes/drag-ruler/create-drag-ruler';\nimport { createDockPill } from '../recipes/dock-pill/create-dock-pill';\n\ntype Factory = (el: HTMLElement, options: Record<string, unknown>) => Instance;\n\nconst factories = {\n  'spring-cards': createSpringCards,\n  'curved-carousel': (el, options) =>\n    createCurvedCarousel(el, {\n      ...options,\n      onSelect: (index, slide) => el.dispatchEvent(new CustomEvent('mk:select', { detail: { index, slide }, bubbles: true })),\n    }),\n  pile: createPile,\n  words: createWords,\n  flow: createFlow,\n  pop: createPop,\n  'fit-text': createFitText,\n  'stretch-footer': createStretchFooter,\n  'radial-menu': createRadialMenu,\n  tabs: createTabs,\n  counter: createCounter,\n  details: (el) => createDetails(el),\n  reveal: createReveal,\n  reflow: createReflow,\n  'slot-text': createSlotText,\n  sortable: createSortable,\n  'mask-text': createMaskText,\n  cascade: createCascade,\n  'text-roll': createTextRoll,\n  letters: createLetters,\n  parallax: createParallax,\n  'depth-grid': createDepthGrid,\n  'frame-zoom': createFrameZoom,\n  contrast: createContrast,\n  marquee: createMarquee,\n  'card-dock': createCardDock,\n  'snap-strip': createSnapStrip,\n  'fill-text': createFillText,\n  'ticket-menu': createTicketMenu,\n  'infinite-reel': createInfiniteReel,\n  'repel-bento': createRepelBento,\n  'rotator': createRotator,\n  'drag-ruler': createDragRuler,\n  'dock-pill': createDockPill,\n} satisfies Record<string, Factory>;\n\nexport type RecipeName = keyof typeof factories;\nexport const recipeNames = Object.keys(factories) as RecipeName[];\n\n/** Measured text: wait for web fonts, fit before splitting into words. */\nconst AFTER_FONTS: RecipeName[] = ['fit-text', 'words', 'slot-text'];\n\nconst instances = new WeakMap<HTMLElement, Map<RecipeName, Instance>>();\n\nexport interface AutoInitOptions {\n  /** Only start these recipes. */\n  only?: RecipeName[];\n}\n\n/**\n * Start every `[data-mk]` recipe inside `root` (an element may list several:\n * `data-mk=\"fit-text words\"`). Options come from `data-mk-*` attributes.\n * Returns a function that destroys what this call created. Safe to call again:\n * elements that already run a recipe are skipped.\n */\nexport function autoInit(root: ParentNode = document, { only }: AutoInitOptions = {}): () => void {\n  if (typeof window === 'undefined') return () => {};\n  const created: Array<[HTMLElement, RecipeName, Instance]> = [];\n  let cancelled = false;\n\n  const elements = [...root.querySelectorAll<HTMLElement>('[data-mk]')];\n  if (root instanceof HTMLElement && root.matches('[data-mk]')) elements.unshift(root);\n\n  const start = (el: HTMLElement, name: RecipeName) => {\n    if (cancelled) return;\n    const running = instances.get(el) ?? new Map<RecipeName, Instance>();\n    if (running.has(name)) return;\n    const instance = (factories[name] as Factory)(el, parseOptions(el));\n    running.set(name, instance);\n    instances.set(el, running);\n    created.push([el, name, instance]);\n  };\n\n  const now: Array<[HTMLElement, RecipeName]> = [];\n  const later: Array<[HTMLElement, RecipeName]> = [];\n  for (const el of elements) {\n    for (const raw of (el.dataset.mk ?? '').split(/\\s+/).filter(Boolean)) {\n      if (!(raw in factories)) {\n        warnOnce(`autoInit: unknown recipe \"${raw}\" (known: ${recipeNames.join(', ')})`);\n        continue;\n      }\n      const name = raw as RecipeName;\n      if (only && !only.includes(name)) continue;\n      (AFTER_FONTS.includes(name) ? later : now).push([el, name]);\n    }\n  }\n\n  now.forEach(([el, name]) => start(el, name));\n  if (later.length) {\n    later.sort((a, b) => AFTER_FONTS.indexOf(a[1]) - AFTER_FONTS.indexOf(b[1]));\n    const fonts = document.fonts?.ready ?? Promise.resolve();\n    void Promise.race([fonts, new Promise((resolve) => setTimeout(resolve, 1500))]).then(() => {\n      later.forEach(([el, name]) => start(el, name));\n      if (!cancelled) ScrollTrigger.refresh();\n    });\n  }\n\n  return () => {\n    cancelled = true;\n    for (const [el, name, instance] of created.reverse()) {\n      instance.destroy();\n      instances.get(el)?.delete(name);\n    }\n    created.length = 0;\n  };\n}\n"],"mappings":"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","names":[]}