@yewdiel21/motion-kit 0.9.1 → 0.10.0

package/src/components/slot-picker/slot-picker.css

@@ -0,0 +1,125 @@
+/* slot-picker — Melon Mind's appointment picker on the --mk-* tokens; parts are .mk-slot-picker__*. */
+.mk-slot-picker,
+mk-slot-picker {
+  --mk-slot-picker-radius: var(--mk-radius-md);
+  display: grid;
+  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
+  overflow: hidden;
+  border-radius: var(--mk-radius-xl);
+  background: var(--mk-surface);
+  color: var(--mk-text);
+}
+.mk-slot-picker__calendar { padding: var(--mk-space-5); }
+.mk-slot-picker__panel {
+  display: flex;
+  flex-direction: column;
+  gap: var(--mk-space-3);
+  min-height: 100%;
+  padding: var(--mk-space-5);
+  background: var(--mk-surface-2);
+}
+.mk-slot-picker__month { display: flex; align-items: center; gap: var(--mk-space-2); margin-bottom: var(--mk-space-3); }
+.mk-slot-picker__title { margin: 0 auto 0 0; font-size: 1.35rem; font-weight: 400; }
+.mk-slot-picker__nav {
+  display: grid;
+  place-items: center;
+  width: 42px;
+  height: 42px;
+  border: 0;
+  border-radius: 50%;
+  background: var(--mk-surface-2);
+  color: var(--mk-text);
+  font: inherit;
+  cursor: pointer;
+  transition: transform 0.3s var(--mk-ease-nav-move), opacity 0.2s;
+}
+.mk-slot-picker__nav:active { transform: scale(0.9); }
+.mk-slot-picker__nav:disabled { opacity: 0.35; cursor: default; }
+[data-mk-slot-days],
+[data-mk-slot-times] { position: relative; }
+.mk-slot-picker__days { display: flex; flex-direction: column; gap: 6px; }
+.mk-slot-picker__weekdays,
+.mk-slot-picker__week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
+.mk-slot-picker__weekdays span {
+  padding: 6px 0;
+  border-radius: var(--mk-radius-sm);
+  background: color-mix(in srgb, var(--mk-surface-2) 70%, transparent);
+  text-align: center;
+  font-size: 0.9rem;
+}
+.mk-slot-picker__week > [role='gridcell'] { display: grid; }
+.mk-slot-picker__day {
+  aspect-ratio: 1.15;
+  border: 0;
+  border-radius: var(--mk-slot-picker-radius);
+  background: var(--mk-surface-3);
+  color: var(--mk-text);
+  font: inherit;
+  font-size: 0.95rem;
+  cursor: pointer;
+  transition: background 0.25s, color 0.25s, border-radius 0.3s var(--mk-ease-nav-radius), transform 0.3s var(--mk-ease-nav-radius);
+}
+.mk-slot-picker__day:hover:not(:disabled) { background: var(--mk-surface-5); border-radius: var(--mk-radius-full); }
+.mk-slot-picker__day:active:not(:disabled) { transform: scale(0.92); }
+.mk-slot-picker__day:disabled { opacity: 0.35; cursor: default; }
+.mk-slot-picker__day[aria-current='date'] { box-shadow: inset 0 0 0 1.5px var(--mk-outline); }
+[aria-selected='true'] > .mk-slot-picker__day,
+[aria-selected='true'] > .mk-slot-picker__day:hover:not(:disabled) { background: var(--mk-accent); color: var(--mk-on-accent); }
+:is(.mk-slot-picker__day, .mk-slot-picker__time, .mk-slot-picker__nav):focus-visible { outline: 2px solid var(--mk-accent); outline-offset: 2px; }
+
+.mk-slot-picker__heading {
+  margin: 0;
+  padding: 8px;
+  border-radius: var(--mk-radius-md);
+  background: var(--mk-surface);
+  font-weight: 600;
+}
+.mk-slot-picker__heading:not([data-mk-shown]) { display: none; }
+.mk-slot-picker__heading[data-mk-shown] { animation: mk-slot-heading-in 0.5s cubic-bezier(0.38, 0.49, 0, 1.4); }
+@keyframes mk-slot-heading-in {
+  0% { max-height: 0; min-height: 0; padding-block: 0; opacity: 0; }
+  100% { max-height: 56px; min-height: 40px; opacity: 1; }
+}
+.mk-slot-picker__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); gap: 8px; align-content: start; }
+.mk-slot-picker__leaving { position: absolute; left: 0; right: 0; pointer-events: none; }
+.mk-slot-picker__note { grid-column: 1 / -1; margin: 2rem 0; color: var(--mk-muted); text-align: center; }
+.mk-slot-picker__time {
+  position: relative;
+  isolation: isolate;
+  height: 44px;
+  border: 0;
+  border-radius: var(--mk-radius-sm);
+  background: var(--mk-surface-4);
+  color: var(--mk-text);
+  font: inherit;
+  font-variant-numeric: tabular-nums;
+  cursor: pointer;
+  transition: background 0.2s, color 0.2s, transform 0.3s var(--mk-ease-nav-move);
+}
+.mk-slot-picker__time:hover { transform: translateY(-2px); }
+.mk-slot-picker__time[aria-checked='true'] { color: var(--mk-on-accent); }
+.mk-slot-picker__time[aria-checked='true']::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  border-radius: inherit;
+  background: var(--mk-accent);
+  animation: mk-slot-highlight 0.7s cubic-bezier(0.38, 0.49, 0, 1.1);
+}
+@keyframes mk-slot-highlight {
+  0% { transform: scale(0.8); opacity: 0; filter: blur(16px); box-shadow: 0 0 0 1px var(--mk-surface-2); }
+  100% { transform: scale(1); opacity: 1; filter: blur(0); }
+}
+.mk-slot-picker__actions { margin-top: auto; display: flex; justify-content: flex-end; }
+
+@media (max-width: 680px) {
+  .mk-slot-picker,
+  mk-slot-picker { grid-template-columns: 1fr; }
+  .mk-slot-picker__calendar,
+  .mk-slot-picker__panel { padding: var(--mk-space-4); }
+}
+@media (prefers-reduced-motion: reduce) {
+  .mk-slot-picker *,
+  mk-slot-picker * { transition: none !important; animation: none !important; }
+}

package/src/components/studio-dock/README.md

@@ -0,0 +1,44 @@
+# studio-dock
+
+Navegación de estudio que pasa de una píldora a un panel de tarjetas. Inspirada en el comportamiento público de Mubien; código y gráficos propios, sin sus fuentes, marcas o videos.
+
+```html
+<div class="mk-studio-dock" data-mk="studio-dock">
+  <div class="mk-studio-dock__bar">
+    <a href="/" class="mk-studio-dock__brand">ST</a>
+    <span class="mk-studio-dock__label">Estudio</span>
+    <button type="button" class="mk-studio-dock__toggle" data-mk-studio-toggle aria-label="Abrir navegación"><span aria-hidden="true">+</span></button>
+  </div>
+  <section class="mk-studio-dock__panel" data-mk-studio-panel hidden>
+    <div data-mk-studio-view="menu">
+      <div class="mk-studio-dock__grid">
+        <a href="/work" class="mk-studio-dock__tile">Proyectos</a>
+        <a href="/about" class="mk-studio-dock__tile">Estudio</a>
+      </div>
+      <button type="button" data-mk-studio-slide>Contacto</button>
+    </div>
+    <div data-mk-studio-view="contact" hidden>
+      <h2>Conversemos</h2><a href="mailto:hello@example.com">hello@example.com</a>
+      <button type="button" data-mk-studio-to="menu">Volver</button>
+    </div>
+  </section>
+</div>
+```
+
+```ts
+import { createStudioDock } from '@yewdiel21/motion-kit';
+import { useStudioDock, StudioDock } from '@yewdiel21/motion-kit/react';
+import '@yewdiel21/motion-kit/css';
+const dock = createStudioDock(root, { duration: 1.3, ease: 'back.out(0.52)' });
+dock.open('contact'); dock.selectPage(1); dock.close(); dock.destroy();
+```
+
+`StudioDock` es un shell React con los mismos slots y `instanceRef`; `useStudioDock(ref, options, deps)` permite usar tu markup. Web component: `defineStudioDock()` registra `<mk-studio-dock>`. El evento `mk:studio-dock` y `onChange` entregan `{ open, view, page }`.
+
+Slots opcionales: `[data-mk-studio-to="menu|contact|reel"]`, `[data-mk-studio-close]`, `[data-mk-studio-pages]`, `[data-mk-studio-page]`, botones `[data-mk-studio-page-to="0"]` y `<time data-mk-studio-timezone="America/Mazatlan">`. Las páginas se ocultan con `hidden`; el paginado tiene flechas izquierda/derecha y botones numerados. Los relojes usan `Intl` y actualizan cada minuto; no consultan ningún servidor.
+
+El botón de contacto funciona con clic, Enter y Espacio. Dentro de `.mk-studio-dock__slide-track` también acepta arrastre y abre al superar 70 % del recorrido. Las vistas reciben foco, Escape cierra, clic fuera cierra sin robar foco al destino y el cierre explícito devuelve el foco anterior. `trapFocus` y `focusOnOpen` son `true` por defecto y se pueden desactivar. El panel es un diálogo contenido, sin bloqueo del body ni cambios en otros componentes. `aria-expanded` refleja el estado y el panel cerrado queda fuera del árbol de accesibilidad.
+
+El panel se revela/colapsa por `clip-path` y desplazamiento de 16 px; duración configurable de 1.3 s, rebote `.52`. Con movimiento reducido se salta el recorrido. `destroy()` es idempotente: revierte estilos/atributos, listeners, temporizadores y animaciones. Los videos aportados por el consumidor se pausan al salir de su vista. No se envía ningún formulario desde este motor.
+
+Por defecto permanece dentro del layout. Usa `.mk-studio-dock--fixed` o `<StudioDock fixed>` para fijarlo abajo de la ventana. Al abrirse, el panel mide el espacio que queda en la ventana: su alto se limita a ese hueco (con scroll interno) y, si arriba no cabe y abajo hay más sitio, se abre bajo la barra (`data-mk-studio-below`). `--mk-studio-dock-offset` (76 px) es la distancia del panel al borde del dock. Variables de color: `--mk-surface`, `--mk-surface-2`, `--mk-accent`, `--mk-on-accent`, `--mk-outline-soft`.

package/src/components/studio-dock/element.ts

@@ -0,0 +1,11 @@
+import { MkElement, defineElement, type OptionType } from '../../elements/base';
+import { createStudioDock, type StudioDockInstance, type StudioDockView } from './engine';
+export class MkStudioDockElement extends MkElement<StudioDockInstance> {
+  static options: Record<string, OptionType> = { duration: 'number', ease: 'string', focusOnOpen: 'boolean', trapFocus: 'boolean' };
+  protected create(options: Record<string, unknown>) { return createStudioDock(this, options); }
+  open(view?: StudioDockView) { this.instance?.open(view); }
+  close() { this.instance?.close(); }
+  toggle() { this.instance?.toggle(); }
+  selectPage(index: number) { this.instance?.selectPage(index); }
+}
+export const defineStudioDock = () => defineElement('mk-studio-dock', MkStudioDockElement);

package/src/components/studio-dock/engine.ts

@@ -0,0 +1,212 @@
+import { gsap, registerMotion } from '../../core/gsap';
+import { reduced } from '../../core/reduced';
+import { createScope } from '../../core/scope';
+import { inert, type Instance } from '../../core/types';
+
+export type StudioDockView = 'menu' | 'contact' | 'reel';
+export interface StudioDockState { open: boolean; view: StudioDockView; page: number; }
+export interface StudioDockOptions {
+  /** Seconds. Reference sheet: 1.3 s, outBack(.52). */
+  duration?: number;
+  ease?: string;
+  /** Move focus into a newly opened view. Defaults to true. */
+  focusOnOpen?: boolean;
+  /** Contain Tab within the open panel and its toggle. Defaults to true. */
+  trapFocus?: boolean;
+  onChange?: (state: StudioDockState) => void;
+}
+export interface StudioDockInstance extends Instance {
+  open(view?: StudioDockView): void;
+  close(): void;
+  toggle(): void;
+  selectPage(index: number): void;
+  readonly state: StudioDockState;
+}
+
+let nextId = 0;
+/** Panel distance from the dock's edge (bar + gap); --mk-studio-dock-offset overrides it. */
+const PANEL_OFFSET = 76;
+const VIEWPORT_GAP = 12;
+const MIN_SPACE = 320;
+const FOCUSABLE = 'a[href],button:not(:disabled),input:not(:disabled),select:not(:disabled),textarea:not(:disabled),video[controls],[tabindex]:not([tabindex="-1"])';
+
+/** A contained studio sheet. Markup remains useful without JavaScript; fixed positioning is CSS opt-in. */
+export function createStudioDock(root: HTMLElement | null, options: StudioDockOptions = {}): StudioDockInstance {
+  const toggleButton = root?.querySelector<HTMLButtonElement>('[data-mk-studio-toggle]');
+  const panel = root?.querySelector<HTMLElement>('[data-mk-studio-panel]');
+  if (!root || !toggleButton || !panel) return inert({ open() {}, close() {}, toggle() {}, selectPage() {}, state: { open: false, view: 'menu' as const, page: 0 } });
+  registerMotion();
+  const scope = createScope();
+  const context = gsap.context(() => {}, root);
+  scope.add(() => context.revert());
+  const views = [...panel.querySelectorAll<HTMLElement>('[data-mk-studio-view]')];
+  const pages = [...panel.querySelectorAll<HTMLElement>('[data-mk-studio-page]')];
+  const pageButtons = [...root.querySelectorAll<HTMLElement>('[data-mk-studio-page-to]')];
+  const slide = root.querySelector<HTMLElement>('[data-mk-studio-slide]');
+  const tracked = [root, panel, ...(slide ? [slide] : [])];
+  tracked.forEach(el => { const style = el.getAttribute('style'); scope.add(() => style === null ? el.removeAttribute('style') : el.setAttribute('style', style)); });
+  scope.attr(panel, 'id', panel.id || `mk-studio-panel-${++nextId}`);
+  scope.attr(panel, 'role', panel.getAttribute('role') || 'dialog');
+  scope.attr(panel, 'aria-label', panel.getAttribute('aria-label') || 'Studio navigation');
+  scope.attr(panel, 'tabindex', '-1');
+  scope.attr(toggleButton, 'aria-controls', panel.id);
+  scope.attr(toggleButton, 'aria-expanded', 'false');
+  scope.attr(panel, 'hidden', '');
+  scope.attr(panel, 'aria-hidden', 'true');
+  scope.attr(root, 'data-mk-ready', '');
+  let state: StudioDockState = { open: false, view: 'menu', page: 0 };
+  let previousFocus: HTMLElement | null = null;
+  let animation: gsap.core.Tween | undefined;
+  let slideStart: number | null = null;
+  let slideDistance = 0;
+  let slideMoved = false;
+  let suppressSlideClick = false;
+
+  // The sheet opens above the bar. Cap it to the room actually left in the viewport
+  // (it scrolls inside) and open it below the bar when above is too tight.
+  const place = (decide = false) => {
+    const view = root.ownerDocument.defaultView;
+    if (!state.open || !view) return;
+    const rect = root.getBoundingClientRect();
+    const offset = parseFloat(view.getComputedStyle(root).getPropertyValue('--mk-studio-dock-offset')) || PANEL_OFFSET;
+    const above = rect.bottom - offset - VIEWPORT_GAP;
+    const below = view.innerHeight - rect.top - offset - VIEWPORT_GAP;
+    // The direction is chosen on open only, so scrolling never flips an open sheet.
+    if (decide) scope.attr(root, 'data-mk-studio-below', above < Math.min(panel.scrollHeight || MIN_SPACE, MIN_SPACE) && below > above ? '' : null);
+    const flip = root.hasAttribute('data-mk-studio-below');
+    root.style.setProperty('--mk-studio-dock-space', `${Math.max(MIN_SPACE / 2, Math.floor(flip ? below : above))}px`);
+  };
+  const hidden = () => root.hasAttribute('data-mk-studio-below')
+    ? { clipPath: 'inset(0% 0% 100% 0% round 18px)', y: -16, opacity: 0 }
+    : { clipPath: 'inset(100% 0% 0% 0% round 18px)', y: 16, opacity: 0 };
+  const notify = () => {
+    const value = { ...state };
+    options.onChange?.(value);
+    root.dispatchEvent(new CustomEvent('mk:studio-dock', { bubbles: true, detail: value }));
+  };
+  const isTabbable = (el: HTMLElement) => el.tabIndex >= 0 && !el.closest('[hidden], [inert]') && el.getAttribute('aria-disabled') !== 'true';
+  const visibleFocus = () => [...panel.querySelectorAll<HTMLElement>(FOCUSABLE)].filter(isTabbable);
+  const focusView = () => { if (options.focusOnOpen !== false) (visibleFocus()[0] ?? panel).focus({ preventScroll: true }); };
+  const setView = (view: StudioDockView) => {
+    state.view = views.length && !views.some(el => el.dataset.mkStudioView === view) ? 'menu' : view;
+    views.forEach(el => scope.attr(el, 'hidden', el.dataset.mkStudioView === state.view ? null : ''));
+    scope.attr(root, 'data-mk-studio-active', state.view);
+    panel.querySelectorAll<HTMLVideoElement>('video').forEach(video => { if (state.view !== 'reel') video.pause(); });
+  };
+  const selectPage = (index: number, announce = true) => {
+    if (scope.disposed || !pages.length || !Number.isFinite(index)) return;
+    state.page = ((Math.round(index) % pages.length) + pages.length) % pages.length;
+    pages.forEach((el, i) => scope.attr(el, 'hidden', i === state.page ? null : ''));
+    pageButtons.forEach(el => scope.attr(el, 'aria-current', Number(el.dataset.mkStudioPageTo) === state.page ? 'true' : null));
+    if (announce) notify();
+  };
+  const open = (view: StudioDockView = 'menu') => {
+    if (scope.disposed) return;
+    const wasOpen = state.open;
+    if (wasOpen && state.view === view) return;
+    if (!wasOpen) {
+      const active = root.ownerDocument.activeElement;
+      previousFocus = active instanceof HTMLElement && active !== root.ownerDocument.body && !panel.contains(active) ? active : toggleButton;
+    }
+    animation?.kill();
+    state.open = true;
+    scope.attr(panel, 'hidden', null);
+    scope.attr(panel, 'inert', null);
+    scope.attr(panel, 'aria-hidden', 'false');
+    scope.attr(root, 'data-mk-studio-open', '');
+    scope.attr(toggleButton, 'aria-expanded', 'true');
+    setView(view);
+    place(!wasOpen);
+    if (!reduced()) context.add(() => {
+      animation = gsap.fromTo(panel, hidden(), { clipPath: 'inset(0% 0% 0% 0% round 18px)', y: 0, opacity: 1, duration: Math.max(0, options.duration ?? 1.3), ease: options.ease ?? 'back.out(0.52)', overwrite: true });
+    });
+    else context.add(() => { gsap.set(panel, { clipPath: 'inset(0% round 18px)', y: 0, opacity: 1 }); });
+    focusView();
+    notify();
+  };
+  const close = (restoreFocus = true) => {
+    if (scope.disposed || !state.open) return;
+    animation?.kill();
+    state.open = false;
+    scope.attr(toggleButton, 'aria-expanded', 'false');
+    scope.attr(root, 'data-mk-studio-open', null);
+    // Stop focus immediately while the visual sheet collapses.
+    scope.attr(panel, 'inert', '');
+    scope.attr(panel, 'aria-hidden', 'true');
+    if (reduced()) scope.attr(panel, 'hidden', '');
+    else context.add(() => {
+      animation = gsap.to(panel, { ...hidden(), duration: Math.max(0, options.duration ?? 1.3), ease: options.ease ?? 'back.out(0.52)', overwrite: true, onComplete: () => { if (!scope.disposed && !state.open) scope.attr(panel, 'hidden', ''); } });
+    });
+    panel.querySelectorAll<HTMLVideoElement>('video').forEach(video => video.pause());
+    if (restoreFocus) (previousFocus?.isConnected ? previousFocus : toggleButton).focus({ preventScroll: true });
+    notify();
+  };
+  scope.on(root, 'click', event => {
+    const target = event.target instanceof Element ? event.target : null;
+    if (!target) return;
+    if (target.closest('[data-mk-studio-toggle]') === toggleButton) state.open ? close() : open();
+    else if (target.closest('[data-mk-studio-close]')) close();
+    else if (target.closest('[data-mk-studio-slide]')) {
+      if (suppressSlideClick) { event.preventDefault(); suppressSlideClick = false; }
+      else open('contact');
+    } else {
+      const view = target.closest<HTMLElement>('[data-mk-studio-to]')?.dataset.mkStudioTo;
+      if (view === 'menu' || view === 'contact' || view === 'reel') open(view);
+      const page = target.closest<HTMLElement>('[data-mk-studio-page-to]');
+      if (page) selectPage(Number(page.dataset.mkStudioPageTo));
+    }
+  });
+  if (root.ownerDocument.defaultView) scope.on(root.ownerDocument.defaultView, 'resize', () => place());
+  scope.on(root.ownerDocument, 'scroll', () => place(), { passive: true, capture: true });
+  scope.on(root.ownerDocument, 'pointerdown', event => {
+    if (state.open && event.target instanceof Node && !root.contains(event.target)) close(false);
+  });
+  scope.on(root.ownerDocument, 'keydown', event => {
+    if (!state.open || event.defaultPrevented) return;
+    if (event.key === 'Escape') { event.preventDefault(); close(); return; }
+    if (!(event.target instanceof Node) || !root.contains(event.target)) return;
+    if ((event.key === 'ArrowLeft' || event.key === 'ArrowRight') && (event.target as Element).closest('[data-mk-studio-pages]')) {
+      event.preventDefault(); selectPage(state.page + (event.key === 'ArrowRight' ? 1 : -1));
+      pageButtons.find(el => Number(el.dataset.mkStudioPageTo) === state.page)?.focus();
+    }
+    if (event.key === 'Tab' && options.trapFocus !== false) {
+      // querySelectorAll keeps the authored DOM order, including a toggle before OR after the panel.
+      const elements = [...root.querySelectorAll<HTMLElement>(FOCUSABLE)].filter(el => (el === toggleButton || panel.contains(el)) && isTabbable(el));
+      if (!elements.length) { event.preventDefault(); panel.focus(); return; }
+      const first = elements[0]!, last = elements.at(-1)!;
+      if (event.shiftKey && (root.ownerDocument.activeElement === first || root.ownerDocument.activeElement === panel)) { event.preventDefault(); last.focus(); }
+      else if (!event.shiftKey && root.ownerDocument.activeElement === last) { event.preventDefault(); first.focus(); }
+    }
+  });
+  if (slide) {
+    scope.on(slide, 'pointerdown', event => { if (event.button !== 0) return; slideStart = event.clientX; slideDistance = 0; slideMoved = false; });
+    scope.on(root.ownerDocument, 'pointermove', event => {
+      if (slideStart === null) return;
+      const width = Math.max(0, (slide.parentElement?.clientWidth ?? 0) - slide.offsetWidth);
+      slideMoved ||= Math.abs(event.clientX - slideStart) > 5;
+      slideDistance = Math.max(0, Math.min(width, event.clientX - slideStart));
+      if (!reduced()) slide.style.setProperty('--mk-studio-drag', `${slideDistance}px`);
+    });
+    const release = (cancel = false) => {
+      if (slideStart === null) return;
+      const width = Math.max(0, (slide.parentElement?.clientWidth ?? 0) - slide.offsetWidth);
+      suppressSlideClick = slideMoved;
+      slideStart = null;
+      slide.style.removeProperty('--mk-studio-drag');
+      if (!cancel && width > 0 && slideDistance / width >= .7) open('contact');
+      scope.timeout(() => { suppressSlideClick = false; }, 150);
+    };
+    scope.on(root.ownerDocument, 'pointerup', () => release());
+    scope.on(root.ownerDocument, 'pointercancel', () => release(true));
+  }
+  const clocks = [...root.querySelectorAll<HTMLElement>('[data-mk-studio-timezone]')];
+  const clockOriginals = clocks.map(el => ({ el, text: el.textContent, style: el.getAttribute('style') }));
+  const tick = () => clocks.forEach(el => {
+    try { el.textContent = new Intl.DateTimeFormat(undefined, { hour: '2-digit', minute: '2-digit', timeZone: el.dataset.mkStudioTimezone }).format(new Date()); } catch { /* Invalid caller time zone leaves the original label intact. */ }
+  });
+  if (clocks.length) { tick(); const timer = setInterval(tick, 60_000); scope.add(() => clearInterval(timer)); }
+  scope.add(() => clockOriginals.forEach(({ el, text, style }) => { el.textContent = text; if (style === null) el.removeAttribute('style'); else el.setAttribute('style', style); }));
+  setView('menu');
+  selectPage(0, false);
+  return { open, close, toggle: () => state.open ? close() : open(), selectPage, get state() { return { ...state }; }, destroy() { if (scope.disposed) return; const focused = root.contains(root.ownerDocument.activeElement); animation?.kill(); panel.querySelectorAll<HTMLVideoElement>('video').forEach(video => video.pause()); scope.dispose(); if (focused) toggleButton.focus({ preventScroll: true }); } };
+}

package/src/components/studio-dock/react.tsx

@@ -0,0 +1,23 @@
+'use client';
+import { useRef, type HTMLAttributes } from 'react';
+import { useIsomorphicLayoutEffect, useLatest } from '../../react/use-recipe';
+import { createStudioDock, type StudioDockInstance, type StudioDockOptions } from './engine';
+
+export interface StudioDockProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>, StudioDockOptions {
+  /** Default stays inside its positioned demo/app panel. */
+  fixed?: boolean;
+  instanceRef?: { current: StudioDockInstance | null };
+}
+/** Composable light-DOM shell; use the data-mk-studio-* slots shown in the README. */
+export function StudioDock({ duration, ease, focusOnOpen, trapFocus, onChange, fixed = false, instanceRef, className, children, ...props }: StudioDockProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  const change = useLatest(onChange);
+  useIsomorphicLayoutEffect(() => {
+    const instance = createStudioDock(ref.current, { duration, ease, focusOnOpen, trapFocus, onChange: state => change.current?.(state) });
+    if (instanceRef) instanceRef.current = instance;
+    return () => { instance.destroy(); if (instanceRef) instanceRef.current = null; };
+  }, [duration, ease, focusOnOpen, trapFocus]);
+  return <div {...props} ref={ref} className={['mk-studio-dock', fixed && 'mk-studio-dock--fixed', className].filter(Boolean).join(' ')}>{children}</div>;
+}
+
+export { useStudioDock } from '../../react/use-studio-dock';

package/src/components/studio-dock/studio-dock.css

@@ -0,0 +1,34 @@
+.mk-studio-dock { position: relative; isolation: isolate; width: min(343px, 100%); color: var(--mk-text); font: inherit; }
+.mk-studio-dock--fixed { position: fixed; z-index: 70; inset-block-end: 24px; inset-inline-start: 50%; translate: -50% 0; width: min(343px, calc(100vw - 32px)); }
+.mk-studio-dock__bar { display: flex; align-items: center; gap: 16px; min-height: 64px; padding: 12px; border-radius: 18px; background: var(--mk-surface-2); }
+.mk-studio-dock__brand, .mk-studio-dock__toggle { display: grid; place-items: center; inline-size: 40px; block-size: 40px; flex: none; border: 0; border-radius: 10px; background: var(--mk-surface); color: inherit; text-decoration: none; font: inherit; }
+.mk-studio-dock__label { flex: 1; font-size: .9rem; }
+.mk-studio-dock__toggle { cursor: pointer; }
+.mk-studio-dock__toggle span { transition: transform .4s; }
+.mk-studio-dock[data-mk-studio-open] .mk-studio-dock__toggle span { transform: rotate(45deg); }
+.mk-studio-dock__panel { position: absolute; z-index: 2; inset-inline: 0; inset-block-end: var(--mk-studio-dock-offset, 76px); max-height: min(660px, 75dvh, var(--mk-studio-dock-space, 660px)); overflow: auto; overscroll-behavior: contain; padding: 12px; border: 1px solid var(--mk-outline-soft); border-radius: 18px; background: var(--mk-surface-2); box-shadow: 0 16px 60px #0002; }
+/* Not enough room above the bar: the engine opens the sheet below it. */
+.mk-studio-dock[data-mk-studio-below] .mk-studio-dock__panel { inset-block: var(--mk-studio-dock-offset, 76px) auto; }
+.mk-studio-dock [hidden] { display: none !important; }
+.mk-studio-dock__grid, .mk-studio-dock__page { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
+.mk-studio-dock__tile { min-height: 130px; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; padding: 12px; border-radius: 10px; background: var(--mk-surface); color: inherit; text-decoration: none; transition: transform .4s cubic-bezier(.2, 1.4, .4, 1); }
+.mk-studio-dock__tile small { color: var(--mk-muted); }
+.mk-studio-dock__tile:is(:hover, :focus-visible) { transform: scale(.94); }
+.mk-studio-dock__reel { display: flex; justify-content: space-between; align-items: end; min-height: 154px; margin-block: 12px; padding: 16px; border-radius: 10px; background: var(--mk-accent); color: var(--mk-on-accent); }
+.mk-studio-dock__reel button { border: 1px solid currentColor; border-radius: 50%; padding: 14px; background: transparent; color: inherit; font: inherit; cursor: pointer; }
+.mk-studio-dock__slide-track { position: relative; display: flex; align-items: center; height: 64px; padding: 4px; margin-block: 12px; border-radius: 48px; background: var(--mk-surface-3, var(--mk-surface)); }
+.mk-studio-dock__slide-track > span { position: absolute; inset-inline: 60px 12px; text-align: center; font-size: .75rem; pointer-events: none; }
+.mk-studio-dock [data-mk-studio-slide] { position: relative; display: grid; place-items: center; width: 56px; height: 56px; border: 0; border-radius: 50%; background: var(--mk-surface); color: inherit; font-size: 20px; cursor: pointer; touch-action: pan-y; transform: translateX(var(--mk-studio-drag, 0px)); }
+.mk-studio-dock__clock { position: relative; aspect-ratio: 1; display: grid; place-content: center; gap: 4px; text-align: center; border: 10px solid var(--mk-surface); border-radius: 50%; background: var(--mk-surface-2); }
+.mk-studio-dock__clock::after { content: ''; position: absolute; inset: 8px; border: 1px solid var(--mk-outline-soft); border-radius: 50%; }
+.mk-studio-dock__clock small { color: var(--mk-muted); }
+.mk-studio-dock__pages { margin-block-start: 12px; }
+.mk-studio-dock__pagination { display: flex; justify-content: center; gap: 8px; margin-block-start: 12px; }
+.mk-studio-dock__pagination button { width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: var(--mk-surface); color: inherit; font: inherit; cursor: pointer; }
+.mk-studio-dock__pagination [aria-current] { background: var(--mk-accent); color: var(--mk-on-accent); }
+.mk-studio-dock__view { display: grid; gap: 16px; padding: 12px 0; }
+.mk-studio-dock__view input, .mk-studio-dock__view textarea { width: 100%; padding: 12px; border: 1px solid var(--mk-outline-soft); border-radius: 8px; background: var(--mk-surface); color: inherit; font: inherit; }
+.mk-studio-dock__view label { display: grid; gap: 6px; }
+.mk-studio-dock__view video { width: 100%; border-radius: 10px; }
+.mk-studio-dock :is(button,a,input,textarea):focus-visible { outline: 2px solid var(--mk-accent); outline-offset: 3px; }
+@media (prefers-reduced-motion: reduce) { .mk-studio-dock *, .mk-studio-dock *::after { transition: none !important; animation: none !important; } }

package/src/components/trailer/README.md

@@ -0,0 +1,28 @@
+# trailer
+
+Modal de video que compone el motor `dialog`: top layer, bloqueo del fondo, Escape y retorno de foco. Medios escritos por el consumidor; no inyecta YouTube, rastreadores ni videos remotos.
+
+```html
+<button data-mk-open="preview">Ver trailer</button>
+<dialog class="mk-trailer" id="preview">
+  <header class="mk-trailer__header">
+    <h2 data-mk-part="title">Trailer</h2>
+    <button data-mk-part="close">Cerrar</button>
+  </header>
+  <video controls playsinline preload="metadata" src="/trailer.webm">
+    <track kind="captions" src="/captions.vtt" srclang="es" label="Español" />
+  </video>
+</dialog>
+```
+
+`createTrailer(dialog, { triggers:true, autoplay:false, closeOnBackdrop:true, onOpen, onClose })` devuelve `open(origin?)`, `close()`, `toggle(origin?)`, `play():Promise<boolean>`, `pause()`, `seek(seconds)`, `setVolume(0..1)`, `isOpen`, `destroy()`.
+
+React: `<Trailer id="preview" options={…}>…</Trailer>` o `useTrailer(ref, options, deps?)` sobre un `<dialog>`. Custom element: `<mk-trailer><dialog id="preview">…</dialog></mk-trailer>`, `defineTrailer()`. La estructura permanece en light DOM. Los callbacks/options de los hooks se leen al crear; usar `deps` cuando cambien.
+
+Controles opcionales: botones `data-mk-trailer-play`, `mute`, `fullscreen`, `captions`; inputs range `data-mk-trailer-seek` y `volume`; output `data-mk-trailer-time`; párrafo `data-mk-trailer-status`. Sólo oculta los controles nativos si existen Play/Mute/Seek y, cuando hay tracks, un botón CC. `aria-label`, `aria-pressed`, duración, posición y mensajes de error se sincronizan. Los sliders conservan teclado nativo; fuera de ellos Space/K alterna, flechas buscan±5s y M cambia mute. Los subtítulos usan el primer track. Pantalla completa depende del soporte del navegador y de un gesto del usuario.
+
+Autoplay está desactivado. Cerrar o destruir pausa el video y cancela solicitudes de play pendientes. `play()` absorbe rechazos del navegador y anuncia el error. `destroy()` devuelve los controles/atributos originales y retira listeners. La fuente puede fallar sin bloquear el cierre.
+
+Pantalla completa se solicita sobre `[data-mk-trailer-stage]` (un wrapper normal alrededor de video y controles), o sobre el video si falta ese wrapper. Nunca sobre `<dialog>`, que la API no admite. Cerrar/destruir sale de la pantalla completa que pertenece a esta instancia.
+
+El modal usa el morph accesible existente de motion-kit. **No copia** la apertura por bandas ni la disolución procedural de A24; el modelo de interacción y los controles se reconstruyeron para ser reutilizables. La demo usa SVG, captions y WebM silencioso originales de 6 s, sin assets de las referencias.

package/src/components/trailer/element.ts

@@ -0,0 +1,13 @@
+import { MkElement, defineElement, type OptionType } from '../../elements/base';
+import { createTrailer, type TrailerInstance, type TrailerOptions } from './engine';
+
+/** Wrap a consumer-authored native <dialog> containing <video>. */
+export class MkTrailerElement extends MkElement<TrailerInstance> {
+  static options: Record<string, OptionType> = { autoplay: 'boolean', triggers: 'string', closeOnBackdrop: 'boolean' };
+  protected create(options: Record<string, unknown>) {
+    return createTrailer(this.querySelector('dialog'), options as TrailerOptions);
+  }
+  open(origin?: HTMLElement | null) { this.instance?.open(origin); }
+  close() { this.instance?.close(); }
+}
+export const defineTrailer = () => defineElement('mk-trailer', MkTrailerElement);