@yewdiel21/motion-kit 0.9.0 → 0.10.0

package/src/components/steps/steps.css

@@ -1,4 +1,4 @@
-/* steps — Stepbro's onboarding: one step at a time, centred in a column up to 600 px wide. */
+/* steps — onboarding: one step at a time, centred in a column up to 600 px wide. */
 .mk-steps,
 mk-steps {
   position: relative;
@@ -11,7 +11,7 @@ mk-steps {
   font-family: var(--mk-font);
 }
 
-/* Stepbro's onboarding background runs at 20 %. */
+/* onboarding background runs at 20 %. */
 :is(.mk-steps, mk-steps) > :is(.mk-chat-background, mk-chat-background) {
   --mk-chat-background-opacity: 0.2;
 }

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/theme-picker/README.md

@@ -1,8 +1,6 @@
 # theme-picker
 
-Las bolas de color del selector de tema de Stepbro. Entran escalonadas (desde 50 %, blur 4 px, 10 ms entre bolas); al pasar el ratón la bola se redondea a 32 px y se satura, y la elegida queda como cuadrado redondeado de 16 px (0.5 s, `cubic-bezier(.38,.49,0,1.5)`), con dos luces difuminadas que se mueven dentro (3.5 s). Al elegir una se aplica el tema con `setTheme()`.
-
-Origen: Stepbro — `theme-picker` / `theme-picker-enter` en el kit; CSS de las bolas portada de Kayro (`.accent-swatch`).
+Las bolas de color del selector de tema. Entran escalonadas (desde 50 %, blur 4 px, 10 ms entre bolas); al pasar el ratón la bola se redondea a 32 px y se satura, y la elegida queda como cuadrado redondeado de 16 px (0.5 s, `cubic-bezier(.38,.49,0,1.5)`), con dos luces difuminadas que se mueven dentro (3.5 s). Al elegir una se aplica el tema con `setTheme()`.
 
 ## HTML / Astro
 
@@ -43,8 +41,8 @@ Con tus propias bolas (no genera ninguna):
 
 | Opción | Atributo | Por defecto | Qué hace |
 |---|---|---|---|
-| `themes` | `themes="a,b"` | los 10 visibles de Stepbro | Ids y orden de las bolas |
-| `showHidden` | `show-hidden` | `false` | Incluye los 9 temas que Stepbro oculta |
+| `themes` | `themes="a,b"` | los 10 visibles | Ids y orden de las bolas |
+| `showHidden` | `show-hidden` | `false` | Incluye los 9 temas que oculta |
 | `labels.group` | `aria-label` | `'Tema'` | Nombre accesible del grupo |
 | `onChange` | evento `mk:theme` en `document` | — | Tema elegido |
 

package/src/components/theme-picker/engine.ts

@@ -7,14 +7,14 @@ import { THEMES } from '../../theme/presets';
 import { THEME_EVENT, getTheme, setTheme } from '../../theme/theme';
 
 /*
- * Stepbro's theme picker: colour balls pop in (scale .5, blur 4, 10 ms apart);
+ * theme picker: colour balls pop in (scale .5, blur 4, 10 ms apart);
  * a ball rounds into a squircle on hover and into a rounded square when chosen
  * (0.5 s, cubic(.38,.49,0,1.5)), with two blurred lights drifting inside.
  * Clicking one applies the theme (setTheme); external changes keep it in sync.
  */
 
 export interface ThemePickerOptions {
-  /** Theme ids to show, in order. Default: every theme Stepbro shows (or all with showHidden). */
+  /** Theme ids to show, in order. Default: visible presets, or all with showHidden. */
   themes?: string[];
   showHidden?: boolean;
   labels?: { group?: string };

package/src/components/theme-picker/react.tsx

@@ -11,7 +11,7 @@ export interface ThemePickerProps extends ThemePickerOptions {
   unstyled?: boolean;
 }
 
-/** Stepbro's theme picker. Wrap the app in <ThemeProvider> to read the choice. */
+/** theme picker. Wrap the app in <ThemeProvider> to read the choice. */
 export function ThemePicker({ className, style, unstyled, themes, showHidden, labels, onChange }: ThemePickerProps) {
   const ref = useRef<HTMLDivElement>(null);
   const change = useLatest(onChange);

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

@@ -1,4 +1,4 @@
-/* theme-picker — Stepbro's colour balls (from Kayro's accent swatches). */
+/* theme-picker — colour balls. */
 .mk-theme-picker,
 mk-theme-picker {
   --mk-swatch-size: 72px;

package/src/components/toast/README.md

@@ -1,6 +1,6 @@
 # toast
 
-La pila de confirmaciones de Stepbro, arriba de la pantalla y por encima de los diálogos.
+La pila de confirmaciones, arriba de la pantalla y por encima de los diálogos.
 
 - **Pila:** los toasts más viejos asoman 16 px debajo, 5 % más pequeños cada uno, tres visibles; como mucho 5 vivos.
 - **Abrir la pila:** al pasar el ratón se despliega (resorte .55, 60 ms entre tarjetas) y los temporizadores se pausan; al salir se recoge tras 150 ms.
@@ -8,8 +8,6 @@ La pila de confirmaciones de Stepbro, arriba de la pantalla y por encima de los
 - **Letras:** suben una a una (`yPercent 40 → 0`, blur 4, 0.4 s, 20 ms, tras 0.225 s), hasta 64 caracteres.
 - **Salir:** sube 24 px hacia un blur de 4 px (0.3 s); deslizar hacia arriba 48 px o la rueda 80 px lo descarta.
 
-Origen: Stepbro `toast-deck`, `toast-morph`, `toast-character-reveal` (kit Money); portado de Kayro.
-
 ## HTML / Astro
 
 ```html

package/src/components/toast/engine.ts

@@ -9,7 +9,7 @@ import { iconSvg, type IconName } from '../icons';
 import { dismissToast, getToasts, removeToast, subscribeToasts, toastTimers, type ToastItem, type ToastTone } from './store';
 
 /*
- * Stepbro's toast deck (ported from Kayro's ToastHost):
+ * toast deck:
  * - toasts stack at the top; older ones peek out 16 px below, 5 % smaller each,
  *   three drawn; hovering opens the deck (spring .55, 60 ms cascade) and pauses
  *   the timers, leaving closes it after 150 ms;
@@ -112,7 +112,7 @@ function revealLetters(element: HTMLElement) {
   );
 }
 
-/** Grow a toast's shell out of `origin` (Stepbro's toast morph). Returns a function that settles it now. */
+/** Grow a toast's shell out of `origin`. Returns a function that settles it now. */
 function morphFrom(card: HTMLElement, shell: HTMLElement, body: HTMLElement, origin: HTMLElement) {
   const T = TIMING.toast;
   const box = shell.getBoundingClientRect();

package/src/components/toast/react.tsx

@@ -8,7 +8,7 @@ export interface ToasterProps {
   labels?: ToasterLabels;
 }
 
-/** Stepbro's toast deck. Mount once near the root; show toasts with `toast()`. */
+/** toast deck. Mount once near the root; show toasts with `toast()`. */
 export function Toaster({ labels }: ToasterProps) {
   const ref = useRef<HTMLDivElement>(null);
   const dismiss = labels?.dismiss;

package/src/components/toast/store.ts

@@ -1,6 +1,5 @@
 /*
- * The toasts on screen and their timers (Stepbro's toast queue, ported from
- * Kayro). Framework-agnostic: any number of toasters (vanilla, element, React)
+ * The toasts on screen and their timers. Framework-agnostic: any number of toasters (vanilla, element, React)
  * render the same list. A timer pauses while the deck is open and resumes with
  * what was left. Never put a secret in a message: toasts confirm an action.
  */

package/src/components/toast/toast.css

@@ -1,4 +1,4 @@
-/* toast — Stepbro's deck at the top of the screen, above dialogs (top layer when popovers exist). */
+/* toast — deck at the top of the screen, above dialogs (top layer when popovers exist). */
 .mk-toaster {
   position: fixed;
   inset: 16px 0 auto;

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);