@yewdiel21/motion-kit 0.9.1 → 0.10.0

package/src/components/trailer/engine.ts

@@ -0,0 +1,189 @@
+import { createScope } from '../../core/scope';
+import { inert, type Instance } from '../../core/types';
+import { createDialog } from '../dialog/engine';
+
+export interface TrailerOptions {
+  triggers?: boolean | string;
+  autoplay?: boolean;
+  closeOnBackdrop?: boolean;
+  onOpen?: () => void;
+  onClose?: () => void;
+}
+export interface TrailerInstance extends Instance {
+  open(origin?: HTMLElement | null): void;
+  close(): void;
+  toggle(origin?: HTMLElement | null): void;
+  play(): Promise<boolean>;
+  pause(): void;
+  seek(seconds: number): void;
+  setVolume(volume: number): void;
+  readonly isOpen: boolean;
+}
+const time = (value: number) => {
+  const seconds = Number.isFinite(value) ? Math.max(0, Math.floor(value)) : 0;
+  return `${Math.floor(seconds / 60).toString().padStart(2, '0')}:${(seconds % 60).toString().padStart(2, '0')}`;
+};
+
+/** Native modal + consumer-owned video, with optional accessible custom transport controls. */
+export function createTrailer(root: HTMLElement | null, options: TrailerOptions = {}): TrailerInstance {
+  const video = root?.querySelector<HTMLVideoElement>('video');
+  if (!root || !video || root.tagName !== 'DIALOG') return inert({ open() {}, close() {}, toggle() {}, play: async () => false, pause() {}, seek() {}, setVolume() {}, isOpen: false });
+  const scope = createScope();
+  const get = <T extends HTMLElement>(name: string) => root.querySelector<T>(`[data-mk-trailer-${name}]`);
+  const playButton = get<HTMLButtonElement>('play');
+  const muteButton = get<HTMLButtonElement>('mute');
+  const fullButton = get<HTMLButtonElement>('fullscreen');
+  // The Fullscreen API rejects HTMLDialogElement. A consumer can wrap media and
+  // transport in a stage; otherwise fullscreen just the native video element.
+  const fullTarget = get<HTMLElement>('stage') ?? video;
+  const captionsButton = get<HTMLButtonElement>('captions');
+  const seekInput = get<HTMLInputElement>('seek');
+  const volumeInput = get<HTMLInputElement>('volume');
+  const output = get<HTMLElement>('time');
+  const status = get<HTMLElement>('status');
+  const originalText = [output, status].filter((el): el is HTMLElement => !!el).map(el => [el, el.textContent] as const);
+  scope.add(() => originalText.forEach(([el, text]) => { el.textContent = text; }));
+  scope.attr(root, 'data-mk-trailer-ready', '');
+  scope.attr(root, 'data-mk-trailer-state', 'paused');
+  const controls = video.controls;
+  // Keep the browser's controls unless the consumer supplied a complete transport.
+  if (playButton && muteButton && seekInput && (!video.querySelector('track') || captionsButton)) video.controls = false;
+  scope.add(() => { video.controls = controls; });
+  for (const input of [seekInput, volumeInput]) {
+    if (!input) continue;
+    const initialValue = input.value;
+    scope.add(() => { input.value = initialValue; });
+    scope.attr(input, 'min', '0');
+    scope.attr(input, 'max', '1');
+    scope.attr(input, 'step', input === volumeInput ? '.01' : '.1');
+    scope.attr(input, 'aria-label', input.getAttribute('aria-label') ?? (input === volumeInput ? 'Volumen' : 'Posición del video'));
+  }
+  if (status) scope.attr(status, 'role', 'status');
+  const tell = (message: string) => { if (!scope.disposed && status) status.textContent = message; };
+  const sync = () => {
+    if (scope.disposed) return;
+    const duration = Number.isFinite(video.duration) ? Math.max(0, video.duration) : 0;
+    scope.attr(root, 'data-mk-trailer-state', video.ended ? 'ended' : video.paused ? 'paused' : 'playing');
+    if (playButton) {
+      scope.attr(playButton, 'aria-label', video.paused || video.ended ? 'Reproducir' : 'Pausar');
+      scope.attr(playButton, 'aria-pressed', String(!video.paused && !video.ended));
+    }
+    if (muteButton) {
+      scope.attr(muteButton, 'aria-label', video.muted ? 'Activar sonido' : 'Silenciar');
+      scope.attr(muteButton, 'aria-pressed', String(video.muted));
+    }
+    if (seekInput) {
+      scope.attr(seekInput, 'max', String(duration || 1));
+      scope.attr(seekInput, 'disabled', duration ? null : '');
+      scope.attr(seekInput, 'aria-valuetext', `${time(video.currentTime)} de ${time(duration)}`);
+      seekInput.value = String(Number.isFinite(video.currentTime) ? video.currentTime : 0);
+    }
+    if (volumeInput) volumeInput.value = String(video.muted ? 0 : video.volume);
+    if (captionsButton) {
+      scope.attr(captionsButton, 'disabled', video.textTracks.length ? null : '');
+      scope.attr(captionsButton, 'aria-pressed', String(video.textTracks[0]?.mode === 'showing'));
+    }
+    if (output) output.textContent = `${time(video.currentTime)} / ${time(duration)}`;
+  };
+  let playRequest = 0;
+  let wantsPlayback = false;
+  const pause = () => { if (!scope.disposed) { wantsPlayback = false; ++playRequest; video.pause(); sync(); } };
+  const play = async () => {
+    if (scope.disposed) return false;
+    wantsPlayback = true;
+    const request = ++playRequest;
+    try {
+      await video.play();
+      if (scope.disposed || request !== playRequest) {
+        // A stale request must not pause a newer play after a quick close/reopen.
+        if (scope.disposed || !wantsPlayback) video.pause();
+        return false;
+      }
+      tell('');
+      sync();
+      return true;
+    } catch {
+      if (scope.disposed || request !== playRequest) return false;
+      wantsPlayback = false;
+      tell('No se pudo reproducir el video. Revisa la fuente y vuelve a intentarlo.');
+      sync();
+      return false;
+    }
+  };
+  const seek = (seconds: number) => {
+    if (scope.disposed || !Number.isFinite(seconds) || !Number.isFinite(video.duration) || video.duration <= 0) return;
+    video.currentTime = Math.max(0, Math.min(video.duration, seconds));
+    sync();
+  };
+  const setVolume = (volume: number) => {
+    if (scope.disposed || !Number.isFinite(volume)) return;
+    video.volume = Math.max(0, Math.min(1, volume));
+    video.muted = volume <= 0;
+    sync();
+  };
+  const exitFullscreen = () => {
+    if (document.fullscreenElement !== fullTarget) return;
+    void document.exitFullscreen?.().catch(() => {});
+  };
+  const dialog = createDialog(root, {
+    triggers: options.triggers,
+    closeOnBackdrop: options.closeOnBackdrop ?? true,
+    drag: false,
+    autoResize: false,
+    animateContent: false,
+    onOpen: () => { sync(); if (options.autoplay) void play(); options.onOpen?.(); },
+    onClose: () => { ++playRequest; pause(); exitFullscreen(); options.onClose?.(); },
+  });
+  if (playButton) scope.on(playButton, 'click', () => video.paused || video.ended ? void play() : pause());
+  if (muteButton) scope.on(muteButton, 'click', () => { video.muted = !video.muted; sync(); });
+  if (seekInput) scope.on(seekInput, 'input', () => seek(Number(seekInput.value)));
+  if (volumeInput) scope.on(volumeInput, 'input', () => setVolume(Number(volumeInput.value)));
+  if (captionsButton) scope.on(captionsButton, 'click', () => {
+    const track = video.textTracks[0];
+    if (track) track.mode = track.mode === 'showing' ? 'hidden' : 'showing';
+    sync();
+  });
+  const fullscreen = async () => {
+    if (scope.disposed) return;
+    try {
+      if (document.fullscreenElement === fullTarget) await document.exitFullscreen?.();
+      else if (fullTarget.requestFullscreen) {
+        await fullTarget.requestFullscreen();
+        if (scope.disposed || !dialog.isOpen) exitFullscreen();
+      }
+      else tell('La pantalla completa no está disponible en este navegador.');
+    } catch { tell('No se pudo abrir la pantalla completa.'); }
+  };
+  if (fullButton) {
+    scope.attr(fullButton, 'aria-label', 'Pantalla completa');
+    scope.on(fullButton, 'click', () => { void fullscreen(); });
+    scope.on(document, 'fullscreenchange', () => {
+      scope.attr(fullButton, 'aria-label', document.fullscreenElement === fullTarget ? 'Salir de pantalla completa' : 'Pantalla completa');
+    });
+  }
+  for (const event of ['loadedmetadata', 'durationchange', 'timeupdate', 'play', 'pause', 'ended', 'volumechange']) scope.on(video, event, sync);
+  scope.on(video, 'error', () => { tell('El video no está disponible.'); scope.attr(root, 'data-mk-trailer-state', 'error'); });
+  scope.on(root, 'keydown', (event) => {
+    if (!dialog.isOpen || (event.target instanceof Element && event.target.closest('button, input, select, textarea, a, [contenteditable]'))) return;
+    if (event.key === ' ' || event.key.toLowerCase() === 'k') { event.preventDefault(); video.paused ? void play() : pause(); }
+    else if (event.key === 'ArrowRight' || event.key === 'ArrowLeft') { event.preventDefault(); seek(video.currentTime + (event.key === 'ArrowRight' ? 5 : -5)); }
+    else if (event.key.toLowerCase() === 'm') { video.muted = !video.muted; sync(); }
+  });
+  sync();
+  return {
+    open: (origin) => { if (!scope.disposed) dialog.open(origin); },
+    close: () => { if (!scope.disposed) dialog.close(); },
+    toggle: (origin) => { if (!scope.disposed) dialog.toggle(origin); },
+    play, pause, seek, setVolume,
+    get isOpen() { return dialog.isOpen; },
+    destroy() {
+      if (scope.disposed) return;
+      wantsPlayback = false;
+      ++playRequest;
+      video.pause();
+      exitFullscreen();
+      dialog.destroy();
+      scope.dispose();
+    },
+  };
+}

package/src/components/trailer/react.tsx

@@ -0,0 +1,16 @@
+'use client';
+import { useRef, type DialogHTMLAttributes } from 'react';
+import { useRecipe } from '../../react/use-recipe';
+import { createTrailer, type TrailerOptions } from './engine';
+
+export interface TrailerProps extends Omit<DialogHTMLAttributes<HTMLDialogElement>, 'open' | 'onClose'> {
+  options?: TrailerOptions;
+}
+/** Consumer supplies <video>, optional controls and tracks; no remote media is injected. */
+export function Trailer({ options, className, children, ...props }: TrailerProps) {
+  const ref = useRef<HTMLDialogElement>(null);
+  useRecipe(ref, createTrailer, options);
+  return <dialog {...props} ref={ref} className={['mk-trailer', className].filter(Boolean).join(' ')}>{children}</dialog>;
+}
+
+export { useTrailer } from '../../react/use-trailer';

package/src/components/trailer/trailer.css

@@ -0,0 +1,36 @@
+.mk-trailer {
+  --mk-trailer-ink: #f6f3e8;
+  --mk-trailer-paper: #131816;
+  width: min(1100px, calc(100vw - 32px));
+  max-width: none;
+  max-height: calc(100dvh - 32px);
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  color: var(--mk-trailer-ink);
+  background: var(--mk-trailer-paper);
+  overflow: auto;
+  margin: auto;
+}
+.mk-trailer::backdrop { background: rgb(4 10 7 / .8); }
+.mk-trailer__header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 20px; }
+.mk-trailer__title { font: 500 .75rem/1.5 var(--mk-font-mono, monospace); text-transform: uppercase; letter-spacing: .16em; margin: 0; }
+.mk-trailer video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: contain; background: #060b08; }
+.mk-trailer [data-mk-trailer-stage]:fullscreen { display: flex; flex-direction: column; justify-content: center; width: 100%; height: 100%; background: var(--mk-trailer-paper); color: var(--mk-trailer-ink); }
+.mk-trailer [data-mk-trailer-stage]:fullscreen video { max-height: calc(100dvh - 90px); }
+.mk-trailer__controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 20px 16px; font: .7rem/1.5 var(--mk-font-mono, monospace); }
+.mk-trailer button { display: grid; place-items: center; min-width: 44px; min-height: 44px; border: 1px solid currentColor; color: inherit; background: transparent; cursor: pointer; font: inherit; }
+.mk-trailer button:hover { background: rgb(255 255 255 / .12); }
+.mk-trailer button:focus-visible, .mk-trailer input:focus-visible { outline: 2px solid #e5ff96; outline-offset: 4px; }
+.mk-trailer button svg { width: 18px; height: 18px; fill: currentColor; }
+.mk-trailer [data-mk-trailer-seek] { flex: 1; min-width: 70px; accent-color: #d6f2ac; }
+.mk-trailer [data-mk-trailer-volume] { width: 72px; accent-color: #d6f2ac; }
+.mk-trailer [data-mk-trailer-time] { white-space: nowrap; }
+.mk-trailer [data-mk-trailer-status] { padding: 0 20px; font: .8rem/1.5 var(--mk-font, sans-serif); }
+.mk-trailer [data-mk-trailer-status]:empty { display: none; }
+.mk-trailer__pause-icon, .mk-trailer__sound-off { display: none; }
+.mk-trailer [data-mk-trailer-play][aria-pressed="true"] .mk-trailer__play-icon,
+.mk-trailer [data-mk-trailer-mute][aria-pressed="true"] .mk-trailer__sound-on { display: none; }
+.mk-trailer [data-mk-trailer-play][aria-pressed="true"] .mk-trailer__pause-icon,
+.mk-trailer [data-mk-trailer-mute][aria-pressed="true"] .mk-trailer__sound-off { display: block; }
+@media (max-width: 540px) { .mk-trailer [data-mk-trailer-volume] { display: none; } .mk-trailer__controls { gap: 8px; padding-inline: 12px; } .mk-trailer [data-mk-trailer-seek] { flex-basis: 100%; order: -1; } }

package/src/core/dates.ts

@@ -0,0 +1,98 @@
+/*
+ * Calendar date helpers on local dates (no time zone maths): the calendar and
+ * slot-picker components share them. Days are compared by their YYYY-MM-DD key.
+ */
+
+export type DateInput = Date | string | number;
+
+/** Local midnight of a date; "2026-10-23" is read as a local day, not UTC. */
+export function toDate(input: DateInput | null | undefined, fallback = new Date()): Date {
+  if (input instanceof Date) return Number.isNaN(input.getTime()) ? startOfDay(fallback) : startOfDay(input);
+  if (typeof input === 'string') {
+    const day = /^(\d{4})-(\d{2})-(\d{2})$/.exec(input.trim());
+    if (day) return new Date(Number(day[1]), Number(day[2]) - 1, Number(day[3]));
+  }
+  if (typeof input === 'string' || typeof input === 'number') {
+    const parsed = new Date(input);
+    if (!Number.isNaN(parsed.getTime())) return startOfDay(parsed);
+  }
+  return startOfDay(fallback);
+}
+
+/** A full date-time (events keep their hour). */
+export function toDateTime(input: DateInput): Date | null {
+  if (input instanceof Date) return Number.isNaN(input.getTime()) ? null : input;
+  if (typeof input === 'string' && /^\d{4}-\d{2}-\d{2}$/.test(input.trim())) return toDate(input);
+  const parsed = new Date(input);
+  return Number.isNaN(parsed.getTime()) ? null : parsed;
+}
+
+export const startOfDay = (date: Date) => new Date(date.getFullYear(), date.getMonth(), date.getDate());
+
+export const addDays = (date: Date, days: number) => new Date(date.getFullYear(), date.getMonth(), date.getDate() + days);
+
+/** Same day number in another month, clamped to that month's length (Jan 31 + 1 → Feb 28/29). */
+export function addMonths(date: Date, months: number): Date {
+  const target = new Date(date.getFullYear(), date.getMonth() + months, 1);
+  const last = new Date(target.getFullYear(), target.getMonth() + 1, 0).getDate();
+  return new Date(target.getFullYear(), target.getMonth(), Math.min(date.getDate(), last));
+}
+
+export const startOfMonth = (date: Date) => new Date(date.getFullYear(), date.getMonth(), 1);
+
+export function startOfWeek(date: Date, firstDay = 0): Date {
+  const shift = (date.getDay() - firstDay + 7) % 7;
+  return addDays(startOfDay(date), -shift);
+}
+
+export const sameDay = (a: Date | null | undefined, b: Date | null | undefined) =>
+  !!a && !!b && a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+
+export const sameMonth = (a: Date, b: Date) => a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth();
+
+const pad = (n: number) => String(n).padStart(2, '0');
+
+/** YYYY-MM-DD of the local day. */
+export const dayKey = (date: Date) => `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
+
+/** The weeks shown for a month: from the week of the 1st to the week of the last day (4–6 rows). */
+export function monthWeeks(date: Date, firstDay = 0): Date[][] {
+  const first = startOfMonth(date);
+  const last = new Date(date.getFullYear(), date.getMonth() + 1, 0);
+  const weeks: Date[][] = [];
+  for (let start = startOfWeek(first, firstDay); start <= last; start = addDays(start, 7)) {
+    weeks.push(Array.from({ length: 7 }, (_, i) => addDays(start, i)));
+  }
+  return weeks;
+}
+
+export const weekDays = (date: Date, firstDay = 0) => Array.from({ length: 7 }, (_, i) => addDays(startOfWeek(date, firstDay), i));
+
+/** Weekday names in display order, e.g. ["dom", "lun", …] for es with firstDay 0. */
+export function weekdayNames(locale: string, firstDay = 0, width: 'long' | 'short' | 'narrow' = 'short'): string[] {
+  const format = safeFormat(locale, { weekday: width });
+  // 2024-09-01 was a Sunday.
+  return Array.from({ length: 7 }, (_, i) => format.format(new Date(2024, 8, 1 + ((firstDay + i) % 7))));
+}
+
+export function safeFormat(locale: string | undefined, options: Intl.DateTimeFormatOptions): Intl.DateTimeFormat {
+  try {
+    return new Intl.DateTimeFormat(locale, options);
+  } catch {
+    return new Intl.DateTimeFormat(undefined, options);
+  }
+}
+
+export const capitalize = (text: string) => text.charAt(0).toLocaleUpperCase() + text.slice(1);
+
+/** Options given as JSON text (data-mk-* attributes through autoInit) become values. */
+export function fromJson<T>(value: T | string | undefined): T | undefined {
+  if (typeof value !== 'string') return value;
+  try {
+    return JSON.parse(value) as T;
+  } catch {
+    return undefined;
+  }
+}
+
+export const clampFirstDay =(n: unknown) => (Number.isInteger(n) && (n as number) >= 0 && (n as number) <= 6 ? (n as number) : 0);

package/src/css/controls/README.md

@@ -104,6 +104,20 @@ Tres líneas que se pliegan en una X cuando `aria-expanded="true"`: las de fuera
 
 Al pasar el ratón, el texto sube (−150 %) y entra su copia (`data-text`), la flecha sale por la derecha y entra su copia (`data-icon`), y el botón se rellena con el color del texto (0.8 s, `--mk-ease-quint`, el texto 0.1 s después). En pantallas táctiles no cambia. Con movimiento reducido solo cambia el color.
 
+## Estado
+
+```html
+<a class="mk-status" href="#contacto">
+  <span class="mk-status__dot"></span>
+  <span>Disponible para proyectos</span>
+  <span class="mk-status__sep" aria-hidden="true"></span>
+  <span class="mk-status__muted">Agenda una llamada</span>
+  <span class="mk-icon" aria-hidden="true">arrow_forward</span>
+</a>
+```
+
+La píldora de DOVV Studio: superficie, borde suave y sombra. Si es enlace o botón, al pasar el ratón sube 1 px, crece su sombra y la flecha avanza 2 px (0.3 s). El punto verde tiene un halo que late (opacidad .6 → 0 y escala 1 → 2.6, 1.6 s `ease-out`, sin fin). Variantes `.mk-status__dot--busy` (ámbar) y `--off` (sin pulso); color propio con `--mk-status-color`. El punto funciona solo, fuera de la píldora. La píldora no parte líneas; en pantallas de 480 px o menos oculta `__sep` y `__muted`, así que pon lo esencial fuera de `__muted`.
+
 ## Squash y vibración
 
 - `.mk-button` se aplasta un instante al recibir el foco por puntero (`scaleX(.95) scaleY(.9)`, 0.5 s `cubic-bezier(.37,1.42,.37,1)`). El foco de teclado no produce rebote.

package/src/css/controls/status.css

@@ -0,0 +1,63 @@
+/* status — "Available for new projects" pill and a live dot whose halo pulses (DOVV Studio: 1.6 s ease-out, scale 1 → 2.6). */
+.mk-status {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  height: 40px;
+  padding: 0 16px 0 14px;
+  border-radius: 100px;
+  background: var(--mk-surface);
+  color: var(--mk-text);
+  font: inherit;
+  font-size: 14px;
+  font-weight: 500;
+  letter-spacing: -0.01em;
+  white-space: nowrap;
+  text-decoration: none;
+  box-shadow: 0 0 0 1px var(--mk-outline-soft), 0 6px 20px -8px rgb(0 0 0 / 0.18);
+  transition: box-shadow 0.3s, transform 0.3s;
+}
+/* One line always: on phones the secondary half goes. */
+@media (max-width: 480px) {
+  .mk-status > :is(.mk-status__sep, .mk-status__muted) { display: none; }
+}
+a.mk-status:hover,
+button.mk-status:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 0 0 1px var(--mk-outline), 0 10px 24px -8px rgb(0 0 0 / 0.22);
+}
+.mk-status__sep { width: 1px; height: 14px; background: var(--mk-outline-soft); }
+.mk-status__muted { color: var(--mk-muted); }
+.mk-status > svg,
+.mk-status > .mk-icon { color: var(--mk-muted); transition: transform 0.3s; }
+.mk-status:hover > svg,
+.mk-status:hover > .mk-icon { transform: translateX(2px); }
+.mk-status__dot {
+  --mk-status-color: #16c847;
+  position: relative;
+  display: inline-block;
+  flex: none;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--mk-status-color);
+}
+.mk-status__dot::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background: inherit;
+  animation: mk-status-pulse 1.6s ease-out infinite;
+}
+.mk-status__dot--busy { --mk-status-color: #f59e0b; }
+.mk-status__dot--off { --mk-status-color: var(--mk-muted); }
+.mk-status__dot--off::after { animation: none; }
+@keyframes mk-status-pulse {
+  0% { opacity: 0.6; transform: scale(1); }
+  100% { opacity: 0; transform: scale(2.6); }
+}
+@media (prefers-reduced-motion: reduce) {
+  .mk-status { transition: none; }
+  .mk-status__dot::after { animation: none; }
+}

package/src/elements/index.ts

@@ -1,3 +1,5 @@
+import { MkStudioDockElement } from '../components/studio-dock/element';
+import { MkTrailerElement } from '../components/trailer/element';
 import { defineElement } from './base';
 import { MkThemePickerElement } from '../components/theme-picker/element';
 import { MkDialogElement } from '../components/dialog/element';
@@ -9,6 +11,12 @@ import { MkNavElement } from '../components/nav/element';
 import { MkStepsElement } from '../components/steps/element';
 import { MkCursorElement } from '../components/cursor/element';
 import { MkIslandElement } from '../components/island/element';
+import { MkQuantityElement } from '../components/quantity/element';
+import { MkPaginationElement } from '../components/pagination/element';
+import { MkHoverCardElement } from '../components/hover-card/element';
+import { MkInputOtpElement } from '../components/input-otp/element';
+import { MkCalendarElement } from '../components/calendar/element';
+import { MkSlotPickerElement } from '../components/slot-picker/element';
 // new-component:imports (scripts/new-component.mjs inserts above this line)
 
 export { MkElement, SafeHTMLElement, defineElement, type OptionType } from './base';
@@ -23,6 +31,14 @@ export { MkStepsElement } from '../components/steps/element';
 export { MkCursorElement } from '../components/cursor/element';
 export { toast } from '../components/toast/store';
 export { MkIslandElement } from '../components/island/element';
+export { MkQuantityElement } from '../components/quantity/element';
+export { MkPaginationElement } from '../components/pagination/element';
+export { MkHoverCardElement } from '../components/hover-card/element';
+export { MkInputOtpElement } from '../components/input-otp/element';
+export { MkStudioDockElement, defineStudioDock } from '../components/studio-dock/element';
+export { MkTrailerElement, defineTrailer } from '../components/trailer/element';
+export { MkCalendarElement } from '../components/calendar/element';
+export { MkSlotPickerElement } from '../components/slot-picker/element';
 // new-component:exports
 
 /** Tag name → element class, for every component. */
@@ -37,6 +53,14 @@ export const ELEMENTS = {
   'mk-steps': MkStepsElement,
   'mk-cursor': MkCursorElement,
   'mk-island': MkIslandElement,
+  'mk-quantity': MkQuantityElement,
+  'mk-pagination': MkPaginationElement,
+  'mk-hover-card': MkHoverCardElement,
+  'mk-input-otp': MkInputOtpElement,
+  'mk-studio-dock': MkStudioDockElement,
+'mk-trailer': MkTrailerElement,
+  'mk-calendar': MkCalendarElement,
+  'mk-slot-picker': MkSlotPickerElement,
   // new-component:entries
 } as const;
 

package/src/index.ts

@@ -175,3 +175,28 @@ export {
   type ToastAction,
 } from './components/toast/store';
 export { createIsland, type IslandOptions, type IslandInstance } from './components/island/engine';
+export { createQuantity, type QuantityOptions, type QuantityInstance } from './components/quantity/engine';
+export { createPagination, type PaginationOptions, type PaginationInstance } from './components/pagination/engine';
+export { createHoverCard, type HoverCardOptions, type HoverCardInstance } from './components/hover-card/engine';
+export { createInputOtp, type InputOtpOptions, type InputOtpInstance } from './components/input-otp/engine';
+export { createJoinedCta, type JoinedCtaOptions, type JoinedCtaInstance } from './recipes/joined-cta/create-joined-cta';
+export { createImageZoom, type ImageZoomOptions, type ImageZoomInstance } from './recipes/image-zoom/create-image-zoom';
+export { createFontCycle, type FontCycleOptions, type FontCycleInstance } from './recipes/font-cycle/create-font-cycle';
+export { createThumbnailNav, type ThumbnailNavOptions, type ThumbnailNavInstance } from './recipes/thumbnail-nav/create-thumbnail-nav';
+export { createActionButton, type ActionButtonOptions, type ActionButtonInstance } from './recipes/action-button/create-action-button';
+export { createFilmHero, type FilmHeroOptions, type FilmHeroInstance } from './recipes/film-hero/create-film-hero';
+export { createEditorialReveal, type EditorialRevealOptions, type EditorialRevealInstance } from './recipes/editorial-reveal/create-editorial-reveal';
+export { createStudioDock, type StudioDockOptions, type StudioDockInstance } from './components/studio-dock/engine';
+export { createTrailer, type TrailerOptions, type TrailerInstance } from './components/trailer/engine';
+export type { FontCycleFace } from './recipes/font-cycle/create-font-cycle';
+export type { ActionButtonVariant } from './recipes/action-button/create-action-button';
+export type { StudioDockState, StudioDockView } from './components/studio-dock/engine';
+export { createCalendar, type CalendarOptions, type CalendarInstance } from './components/calendar/engine';
+export { createSlotPicker, type SlotPickerOptions, type SlotPickerInstance } from './components/slot-picker/engine';
+export type { CalendarEvent, CalendarEventStatus, CalendarRange, CalendarView, CalendarLabels } from './components/calendar/engine';
+export type { SlotSource, SlotValue, SlotPickerLabels } from './components/slot-picker/engine';
+export { dayKey, toDate, type DateInput } from './core/dates';
+export { createWeightHover, type WeightHoverOptions, type WeightHoverInstance } from './recipes/weight-hover/create-weight-hover';
+export { createSticker, type StickerOptions, type StickerInstance, type StickerState } from './recipes/sticker/create-sticker';
+export { createScrollDock, type ScrollDockOptions, type ScrollDockInstance } from './recipes/scroll-dock/create-scroll-dock';
+export { createLocalClock, type LocalClockOptions, type LocalClockInstance } from './recipes/local-clock/create-local-clock';

package/src/react/index.ts

@@ -78,3 +78,24 @@ export { confetti, type ConfettiOptions } from '../motion/confetti';
 export { MK_HEAD_SCRIPT } from '../core/reduced';
 export { MK_THEME_HEAD_SCRIPT, themeHeadScript } from '../theme/theme';
 export { Island, IslandDots, type IslandProps, type IslandPanel } from '../components/island/react';
+export { Quantity, type QuantityProps } from '../components/quantity/react';
+export { Pagination, type PaginationProps } from '../components/pagination/react';
+export { HoverCard, type HoverCardProps } from '../components/hover-card/react';
+export { InputOtp, type InputOtpProps } from '../components/input-otp/react';
+export { useJoinedCta } from './use-joined-cta';
+export { useImageZoom } from './use-image-zoom';
+export { useFontCycle } from './use-font-cycle';
+export { useThumbnailNav } from './use-thumbnail-nav';
+export { useActionButton } from './use-action-button';
+export { useFilmHero } from './use-film-hero';
+export { useEditorialReveal } from './use-editorial-reveal';
+export { useStudioDock } from './use-studio-dock';
+export { useTrailer } from './use-trailer';
+export { StudioDock, type StudioDockProps } from '../components/studio-dock/react';
+export { Trailer, type TrailerProps } from '../components/trailer/react';
+export { Calendar, type CalendarProps } from '../components/calendar/react';
+export { SlotPicker, type SlotPickerProps } from '../components/slot-picker/react';
+export { useWeightHover } from './use-weight-hover';
+export { useSticker } from './use-sticker';
+export { useScrollDock } from './use-scroll-dock';
+export { useLocalClock } from './use-local-clock';

package/src/react/use-action-button.ts

@@ -0,0 +1,6 @@
+'use client';
+import type { DependencyList, RefObject } from 'react';
+import { useRecipe } from './use-recipe';
+import { createActionButton, type ActionButtonOptions } from '../recipes/action-button/create-action-button';
+export const useActionButton = (ref: RefObject<HTMLElement | null>, options?: ActionButtonOptions, deps?: DependencyList) =>
+  useRecipe(ref, createActionButton, options, deps);

package/src/react/use-editorial-reveal.ts

@@ -0,0 +1,7 @@
+'use client';
+import type { DependencyList, RefObject } from 'react';
+import { useRecipe } from './use-recipe';
+import { createEditorialReveal, type EditorialRevealOptions } from '../recipes/editorial-reveal/create-editorial-reveal';
+export function useEditorialReveal(ref: RefObject<HTMLElement | null>, options: EditorialRevealOptions = {}, deps?: DependencyList) {
+  return useRecipe(ref, createEditorialReveal, options, deps);
+}

package/src/react/use-film-hero.ts

@@ -0,0 +1,6 @@
+'use client';
+import type { DependencyList, RefObject } from 'react';
+import { useRecipe } from './use-recipe';
+import { createFilmHero, type FilmHeroOptions } from '../recipes/film-hero/create-film-hero';
+export const useFilmHero = (ref: RefObject<HTMLElement | null>, options?: FilmHeroOptions, deps?: DependencyList) =>
+  useRecipe(ref, createFilmHero, options, deps);

package/src/react/use-font-cycle.ts

@@ -0,0 +1,7 @@
+'use client';
+import type { DependencyList, RefObject } from 'react';
+import { useRecipe } from './use-recipe';
+import { createFontCycle, type FontCycleOptions } from '../recipes/font-cycle/create-font-cycle';
+
+export const useFontCycle = (ref: RefObject<HTMLElement | null>, options?: FontCycleOptions, deps?: DependencyList) =>
+  useRecipe(ref, createFontCycle, options, deps);

package/src/react/use-image-zoom.ts

@@ -0,0 +1,5 @@
+'use client';
+import type { RefObject, DependencyList } from 'react';
+import { useRecipe } from './use-recipe';
+import { createImageZoom, type ImageZoomOptions } from '../recipes/image-zoom/create-image-zoom';
+export const useImageZoom = (ref: RefObject<HTMLElement | null>, options?: ImageZoomOptions, deps?: DependencyList) => useRecipe(ref, createImageZoom, options, deps);

package/src/react/use-joined-cta.ts

@@ -0,0 +1,5 @@
+'use client';
+import type { RefObject, DependencyList } from 'react';
+import { useRecipe } from './use-recipe';
+import { createJoinedCta, type JoinedCtaOptions } from '../recipes/joined-cta/create-joined-cta';
+export const useJoinedCta = (ref: RefObject<HTMLElement | null>, options?: JoinedCtaOptions, deps?: DependencyList) => useRecipe(ref, createJoinedCta, options, deps);

package/src/react/use-local-clock.ts

@@ -0,0 +1,5 @@
+'use client';
+import type { RefObject, DependencyList } from 'react';
+import { useRecipe } from './use-recipe';
+import { createLocalClock, type LocalClockOptions } from '../recipes/local-clock/create-local-clock';
+export const useLocalClock = (ref: RefObject<HTMLElement | null>, options?: LocalClockOptions, deps?: DependencyList) => useRecipe(ref, createLocalClock, options, deps);

package/src/react/use-scroll-dock.ts

@@ -0,0 +1,5 @@
+'use client';
+import type { RefObject, DependencyList } from 'react';
+import { useRecipe } from './use-recipe';
+import { createScrollDock, type ScrollDockOptions } from '../recipes/scroll-dock/create-scroll-dock';
+export const useScrollDock = (ref: RefObject<HTMLElement | null>, options?: ScrollDockOptions, deps?: DependencyList) => useRecipe(ref, createScrollDock, options, deps);

package/src/react/use-sticker.ts

@@ -0,0 +1,5 @@
+'use client';
+import type { RefObject, DependencyList } from 'react';
+import { useRecipe } from './use-recipe';
+import { createSticker, type StickerOptions } from '../recipes/sticker/create-sticker';
+export const useSticker = (ref: RefObject<HTMLElement | null>, options?: StickerOptions, deps?: DependencyList) => useRecipe(ref, createSticker, options, deps);

package/src/react/use-studio-dock.ts

@@ -0,0 +1,8 @@
+'use client';
+import type { DependencyList, RefObject } from 'react';
+import { useLatest, useRecipe } from './use-recipe';
+import { createStudioDock, type StudioDockOptions } from '../components/studio-dock/engine';
+export function useStudioDock(ref: RefObject<HTMLElement | null>, options: StudioDockOptions = {}, deps?: DependencyList) {
+  const change = useLatest(options.onChange);
+  return useRecipe(ref, createStudioDock, { ...options, onChange: state => change.current?.(state) }, deps);
+}

package/src/react/use-thumbnail-nav.ts

@@ -0,0 +1,7 @@
+'use client';
+import type { DependencyList, RefObject } from 'react';
+import { useRecipe } from './use-recipe';
+import { createThumbnailNav, type ThumbnailNavOptions } from '../recipes/thumbnail-nav/create-thumbnail-nav';
+
+export const useThumbnailNav = (ref: RefObject<HTMLElement | null>, options?: ThumbnailNavOptions, deps?: DependencyList) =>
+  useRecipe(ref, createThumbnailNav, options, deps);

package/src/react/use-trailer.ts

@@ -0,0 +1,6 @@
+'use client';
+import type { DependencyList, RefObject } from 'react';
+import { useRecipe } from './use-recipe';
+import { createTrailer, type TrailerOptions } from '../components/trailer/engine';
+export const useTrailer = (ref: RefObject<HTMLElement | null>, options?: TrailerOptions, deps?: DependencyList) =>
+  useRecipe(ref, createTrailer, options, deps);

package/src/react/use-weight-hover.ts

@@ -0,0 +1,5 @@
+'use client';
+import type { RefObject, DependencyList } from 'react';
+import { useRecipe } from './use-recipe';
+import { createWeightHover, type WeightHoverOptions } from '../recipes/weight-hover/create-weight-hover';
+export const useWeightHover = (ref: RefObject<HTMLElement | null>, options?: WeightHoverOptions, deps?: DependencyList) => useRecipe(ref, createWeightHover, options, deps);