@yewdiel21/motion-kit 0.9.0 → 0.10.0

package/src/components/cursor/engine.ts

@@ -9,12 +9,12 @@ import { ICON_PATHS } from '../icons';
 
 /*
  * Two cursors.
- * chip (Dousan): the system cursor stays; over [data-mk-cursor="Label"] a glass
+ * chip: the system cursor stays; over [data-mk-cursor="Label"] a glass
  * chip with the label follows the pointer on a Motion 800/35 spring, popping in
  * from scale .8 (500/30); data-mk-cursor-shape="circle" makes it a 96 px disc;
  * it stays 10 px inside the window; its ink is the accent on light backgrounds
- * and white on dark ones (Dousan's luminance test).
- * dot (Siena): inside its zone a disc replaces the cursor and eases after it
+ * and white on dark ones.
+ * dot: inside its zone a disc replaces the cursor and eases after it
  * (lerp .2 a frame) with a word (data-mk-cursor or `text`); pressing shrinks it
  * to .7, drops the word and slides two arrows in; [data-mk-cursor-hide] hides it.
  * Off on touch screens and with reduced motion.
@@ -44,7 +44,7 @@ export interface CursorInstance extends Instance {
 const svg = (extra = '') =>
   `<svg aria-hidden="true" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"${extra}><path d="${ICON_PATHS.send}"/></svg>`;
 
-/** Dousan: the first background with alpha > .1 up the tree; light when (299R + 587G + 114B) / 1000 > 180. */
+/** the first background with alpha > .1 up the tree; light when (299R + 587G + 114B) / 1000 > 180. */
 function backgroundTone(el: Element | null): 'light' | 'dark' {
   if (!el) return 'light';
   if (el.closest('img, video, picture, canvas')) return 'dark';
@@ -199,7 +199,7 @@ export function createCursor(host: HTMLElement | null, options: CursorOptions =
   const [stiffness, damping] = TIMING.springs.cursorFollow;
   const update = (dt = 1) => {
     if (variant === 'chip') {
-      // Dousan keeps the chip inside the window, 10 px from its edges.
+      // Keeps the chip inside the window, 10 px from its edges.
       const halfW = size.width / 2 + t.gutter;
       const halfH = size.height / 2 + t.gutter;
       const tx = size.width ? Math.min(Math.max(pointer.x, halfW), innerWidth - halfW) : pointer.x;

package/src/components/cursor/react.tsx

@@ -5,7 +5,7 @@ import { useIsomorphicLayoutEffect } from '../../react/use-recipe';
 import { createCursor, type CursorOptions, type CursorVariant } from './engine';
 
 export interface CursorProps {
-  /** 'chip' (Dousan, default) or 'dot' (Siena). */
+  /** 'chip' (default) or 'dot'. */
   variant?: CursorVariant;
   /** dot: the word when nothing under the pointer gives one. */
   text?: string;

package/src/components/dialog/README.md

@@ -1,21 +1,19 @@
 # dialog
 
-El diálogo de Stepbro sobre `<dialog>` nativo (foco atrapado, Escape, capa superior). El botón que lo abre se convierte en el diálogo y al cerrar vuelve a él.
+El diálogo sobre `<dialog>` nativo (foco atrapado, Escape, capa superior). El botón que lo abre se convierte en el diálogo y al cerrar vuelve a él.
 
 - **Abrir desde el botón (morph):** la superficie viaja recortada desde el rect del botón en 0.7 s con la curva signature y toma su color en 0.3 s; el contenido crece como grupo desde la caja del botón con blur 8 → 0. El botón se oculta en 80 ms mientras está "dentro".
 - **Elementos compartidos:** `data-mk-shared="titulo"` en una pieza del botón y otra del diálogo: el texto vuela de una a otra (0.7 s al abrir, 0.5 s al cerrar).
 - **Sin botón en pantalla:** escala .92 → 1 en 0.35 s (`power2.out`).
 - **Cerrar:** el diálogo se cierra al instante (el foco vuelve y la página responde) mientras una copia inerte se pliega al botón: forma 0.5 s, contenido con blur → 32 px (`.37,.35,0,1`) y fundido (`.56,.27,0,1`), velo `power3.in`; el botón reaparece 0.3 s tras 0.2 s. Sin botón: escala .9 + blur 32.
 - **Líquido** (`variant="liquid"`): dos blobs bajo filtro goo; posición con resorte 144/14 y patada de 2400 px/s, tamaño 0.3 s `cubic(.8,.3,.5,.8)`, radio 0.7 s, contenido `scale 2 → 1` y blur 8 → 0, color 0.4 s tras 0.15 s. Cierre con resorte 130/18.
-- **Backdrop:** tinte 0.5 s con la curva signature (`linear()` de Stepbro).
+- **Backdrop:** tinte 0.5 s con la curva signature (`linear()`).
 - **Auto-resize:** si el contenido crece o se encoge, la altura se ajusta en 0.45 s (signature).
 - **Arrastrar para cerrar:** sigue al puntero a la mitad y encoge (`1 − y/400`); pasados 100 px se cierra donde quedó, si no vuelve con `elastic.out(.5,.5)` 0.5 s. También con la rueda. Ignora controles, áreas con scroll y `[data-mk-no-drag]`.
 - **Ventana flotante** (`float="clave"`, escritorio ≥ 680 px): el asa la levanta (la página sigue usable), se mueve con resorte 1100/38 e inercia, se queda dentro de la pantalla, se redimensiona por las esquinas (mín. 320 × 240) y recuerda su sitio. Un clic en el asa la devuelve.
 - **Móvil (< 680 px):** pantalla completa, radio 0.
 
-Origen: Stepbro ModalHost (`modal-origin`, `modal-close-origin`, `modal-fallback`, `modal-liquid`, `modal-auto-resize`, `modal-drag`, `modal-float` en el kit); motores portados de Kayro. Medidas observadas: 400 px de ancho y radio 40 en escritorio.
-
-- **Sheet** (`variant="sheet"`, de Dousan Miao): la hoja sube desde abajo (`y 100% → 0`, 0.72 s `cubic-bezier(.16,1,.3,1)`) y lo marcado con `[data-mk-underlay]` se hunde a escala .98 y opacidad .4 con un resorte 300/30. Al cerrar, una copia inerte cae por debajo de la pantalla y el foco vuelve al instante. No sale del botón. Mientras está abierta, la página no hace scroll.
+- **Sheet** (`variant="sheet"`): la hoja sube desde abajo (`y 100% → 0`, 0.72 s `cubic-bezier(.16,1,.3,1)`) y lo marcado con `[data-mk-underlay]` se hunde a escala .98 y opacidad .4 con un resorte 300/30. Al cerrar, una copia inerte cae por debajo de la pantalla y el foco vuelve al instante. No sale del botón. Mientras está abierta, la página no hace scroll.
 
 ## HTML / Astro
 
@@ -60,7 +58,7 @@ Las opciones van en `Dialog.Root` (`variant`, `placement`, `float`…). Controla
 
 | Opción | Atributo | Por defecto | Qué hace |
 |---|---|---|---|
-| `variant` | `variant` | `'morph'` | `'liquid'` para la versión líquida; `'sheet'` para la hoja que sube desde abajo (Dousan) |
+| `variant` | `variant` | `'morph'` | `'liquid'` para la versión líquida; `'sheet'` para la hoja que sube desde abajo |
 | `placement` | `placement` | `'center'` | `'anchor'` junto al botón, `'side'` panel lateral |
 | `backdrop` | `no-backdrop` | `true` | Velo tintado |
 | `closeOnBackdrop` | `persistent` | `true` | Clic fuera cierra |
@@ -89,8 +87,6 @@ Las opciones van en `Dialog.Root` (`variant`, `placement`, `float`…). Controla
 
 Ancho hasta `--mk-sheet-max-width` (720px), alto hasta `100dvh − 24px`, radio solo arriba; en el móvil ocupa todo el ancho. Se cierra con Escape, con el fondo, arrastrando hacia abajo o con `[data-mk-close]`. Con movimiento reducido aparece y desaparece sin animar y la página de detrás no cambia. Funciones sueltas: `sheetOpen`, `sheetClose`, `pushUnderlay`, `releaseUnderlay`.
 
-Origen: dousanmiao.com, panel de proyecto a pantalla completa (`modal-project-fullscreen`).
-
 ## Controles y eventos
 
 `open(origen?)`, `close()`, `toggle(origen?)`, `float()`, `dock()`, `isOpen`, `isFloating`, `destroy()`.

package/src/components/dialog/dialog.css

@@ -1,4 +1,4 @@
-/* dialog — Stepbro's modal surface: 400 px, radius 40, tonal surface; full screen under 680 px. */
+/* dialog — modal surface: 400 px, radius 40, tonal surface; full screen under 680 px. */
 .mk-dialog {
   --mk-dialog-bg: var(--mk-surface-2);
   --mk-dialog-radius: var(--mk-radius-dialog);
@@ -218,7 +218,7 @@ mk-dialog:not(:defined) {
   display: none;
 }
 
-/* Phones: dialogs take the whole screen with square corners (Stepbro's responsive rules). */
+/* Phones: dialogs take the whole screen with square corners. */
 @media (max-width: 679px) {
   .mk-dialog:not([data-mk-placement='anchor']) {
     width: 100vw;
@@ -238,7 +238,7 @@ mk-dialog:not(:defined) {
   }
 }
 
-/* Sheet (Dousan): pinned to the bottom, up to 720 px wide, rises from below. Also on phones. */
+/* Sheet: pinned to the bottom, up to 720 px wide, rises from below. Also on phones. */
 .mk-dialog[data-mk-variant='sheet'] {
   --mk-dialog-width: var(--mk-sheet-max-width, 720px);
   /* A modal <dialog> is inset: 0 — anchored only to the bottom, it takes its content's height. */

package/src/components/dialog/engine.ts

@@ -20,7 +20,7 @@ import { pushUnderlay, releaseUnderlay, sheetClose, sheetOpen } from '../../moti
 import { closeModal, fadeBackdrop, openModal } from '../../motion/surface';
 
 /*
- * Stepbro's ModalHost on a native <dialog> (focus trap, Escape, top layer): the
+ * Dialog on a native <dialog> (focus trap, Escape, top layer): the
  * control that opened it turns into it and it folds back into that control
  * (morph or liquid) over a backdrop tinted on the signature curve. It eases to
  * new heights (auto-resize), can be dragged away (> 100 px) and, on desktop,
@@ -38,7 +38,7 @@ export interface DialogLabels {
 }
 
 export interface DialogOptions {
-  /** morph (Stepbro, default), liquid (Stepbro), or sheet: rises from the bottom and pushes [data-mk-underlay] back (Dousan). */
+  /** morph (default), liquid, or sheet: rises from the bottom and pushes [data-mk-underlay] back. */
   variant?: DialogVariant;
   placement?: DialogPlacement;
   /** Tinted backdrop; false leaves it transparent (menus). */

package/src/components/dialog/react.tsx

@@ -173,7 +173,7 @@ function Handle({ children, ...props }: ButtonHTMLAttributes<HTMLButtonElement>)
 }
 
 /**
- * Stepbro's dialog for React:
+ * dialog for React:
  * <Dialog.Root><Dialog.Trigger>Crear</Dialog.Trigger><Dialog.Content>
  *   <Dialog.Header><Dialog.Title>…</Dialog.Title><Dialog.Close /></Dialog.Header>
  *   <Dialog.Body>…</Dialog.Body><Dialog.Footer>…</Dialog.Footer>

package/src/components/hover-card/README.md

@@ -0,0 +1,16 @@
+# hover-card
+
+Vista previa no modal, accesible al señalar, enfocar o tocar. Los enlaces/botones del panel pueden recibir foco.
+
+```html
+<mk-hover-card class="mk-hover-card" placement="bottom">
+  <button type="button" data-mk-hover-trigger>Ver estudio</button>
+  <div data-mk-hover-panel hidden role="region" aria-label="Vista previa">Contenido</div>
+</mk-hover-card>
+```
+
+`defineElements()`, `createHoverCard(root, options)`, o `<HoverCard trigger="Ver estudio" placement="bottom">Contenido</HoverCard>`.
+
+Opciones: `openDelay=120` ms, `closeDelay=140` ms, `placement='top'|'bottom'`, `onOpenChange(boolean)`. API `open()`, `close()`, `isOpen`, `destroy()`. Evento `mk:open-change` con `{open}`.
+
+Escape cierra y retorna al disparador; salir con foco y puntero fuera o tocar fuera cierra. El panel se posiciona respecto al root: mantener un ancestro que permita overflow; no crea portal. No atrapa el foco. Entrada .28 s, instantánea bajo movimiento reducido. Limpia timers y restaura todos los atributos.

package/src/components/hover-card/element.ts

@@ -0,0 +1,8 @@
+import { MkElement, defineElement, type OptionType } from '../../elements/base';
+import { createHoverCard, type HoverCardInstance } from './engine';
+/** Light DOM: supply the same child markup shown in the README. */
+export class MkHoverCardElement extends MkElement<HoverCardInstance> {
+  static options: Record<string, OptionType> = { openDelay: 'number', closeDelay: 'number', placement: 'string' };
+  protected create(options: Record<string, unknown>) { return createHoverCard(this, options); }
+}
+export const defineHoverCard = () => defineElement('mk-hover-card', MkHoverCardElement);

package/src/components/hover-card/engine.ts

@@ -0,0 +1,69 @@
+import { createScope } from '../../core/scope';
+import { inert, type Instance } from '../../core/types';
+
+export interface HoverCardOptions {
+  openDelay?: number;
+  closeDelay?: number;
+  placement?: 'top' | 'bottom';
+  onOpenChange?: (open: boolean) => void;
+}
+export interface HoverCardInstance extends Instance {
+  open(): void;
+  close(): void;
+  readonly isOpen: boolean;
+}
+let sequence = 0;
+
+/** Nonmodal preview: pointer, keyboard focus and tap all reveal the same panel. */
+export function createHoverCard(root: HTMLElement | null, options: HoverCardOptions = {}): HoverCardInstance {
+  const trigger = root?.querySelector<HTMLElement>('[data-mk-hover-trigger]');
+  const panel = root?.querySelector<HTMLElement>('[data-mk-hover-panel]');
+  if (!root || !trigger || !panel) return inert({ open() {}, close() {}, isOpen: false });
+  const scope = createScope();
+  const openDelay = Number.isFinite(options.openDelay) ? Math.max(0, options.openDelay!) : 120;
+  const closeDelay = Number.isFinite(options.closeDelay) ? Math.max(0, options.closeDelay!) : 140;
+  let opened = false;
+  let timer: ReturnType<typeof setTimeout> | undefined;
+  let pointerInside = false;
+  let id = panel.id;
+  if (!id) { do { id = `mk-hover-${++sequence}`; } while (document.getElementById(id)); }
+  scope.attr(panel, 'id', id);
+  scope.attr(trigger, 'aria-controls', id);
+  scope.attr(root, 'data-mk-placement', options.placement ?? 'top');
+  scope.attr(root, 'data-mk-ready', '');
+  const cancel = () => { clearTimeout(timer); timer = undefined; };
+  const set = (value: boolean) => {
+    cancel();
+    if (scope.disposed) return;
+    const changed = value !== opened;
+    opened = value;
+    scope.attr(trigger, 'aria-expanded', String(value));
+    scope.attr(panel, 'hidden', value ? null : '');
+    scope.attr(root, 'data-mk-open', value ? '' : null);
+    if (changed) {
+      options.onOpenChange?.(value);
+      root.dispatchEvent(new CustomEvent('mk:open-change', { bubbles: true, detail: { open: value } }));
+    }
+  };
+  const schedule = (value: boolean, delay: number) => { cancel(); timer = setTimeout(() => set(value), delay); };
+  scope.on(root, 'pointerenter', () => { pointerInside = true; schedule(true, openDelay); });
+  scope.on(root, 'pointerleave', () => {
+    pointerInside = false;
+    if (!root.contains(document.activeElement)) schedule(false, closeDelay);
+  });
+  scope.on(root, 'focusin', () => set(true));
+  scope.on(root, 'focusout', (event) => {
+    if (!pointerInside && !root.contains((event as FocusEvent).relatedTarget as Node | null)) schedule(false, closeDelay);
+  });
+  scope.on(trigger, 'click', () => set(true));
+  scope.on(document, 'pointerdown', (event) => { if (!root.contains(event.target as Node)) set(false); });
+  scope.on(root, 'keydown', (event) => {
+    if (event.key !== 'Escape' || !opened) return;
+    event.preventDefault();
+    trigger.focus();
+    set(false);
+  });
+  scope.add(cancel);
+  set(false);
+  return { open: () => set(true), close: () => set(false), get isOpen() { return opened; }, destroy: () => scope.dispose() };
+}

package/src/components/hover-card/hover-card.css

@@ -0,0 +1,13 @@
+.mk-hover-card, mk-hover-card { position: relative; display: inline-flex; }
+.mk-hover-card [data-mk-hover-panel], mk-hover-card [data-mk-hover-panel] {
+  position: absolute; z-index: 10; bottom: calc(100% + .75rem); left: 0;
+  width: min(19rem, calc(100vw - 3rem)); padding: 1.25rem; border-radius: var(--mk-radius-lg);
+  color: var(--mk-text); background: var(--mk-surface-3); border: 1px solid var(--mk-outline-soft);
+  box-shadow: 0 12px 40px color-mix(in srgb, var(--mk-shadow-color) 20%, transparent);
+  animation: mk-hover-card-in .28s cubic-bezier(.2,.8,.2,1) both;
+}
+.mk-hover-card [data-mk-hover-panel]::after, mk-hover-card [data-mk-hover-panel]::after { content: ''; position: absolute; inset: -1rem 0; z-index: -1; }
+.mk-hover-card[data-mk-placement=bottom] [data-mk-hover-panel], mk-hover-card[data-mk-placement=bottom] [data-mk-hover-panel] { top: calc(100% + .75rem); bottom: auto; }
+.mk-hover-card [hidden], mk-hover-card [hidden] { display: none !important; }
+@keyframes mk-hover-card-in { from { opacity: 0; transform: translateY(7px) scale(.97); } to { opacity: 1; transform: none; } }
+@media (prefers-reduced-motion: reduce) { .mk-hover-card [data-mk-hover-panel], mk-hover-card [data-mk-hover-panel] { animation: none; } }

package/src/components/hover-card/react.tsx

@@ -0,0 +1,19 @@
+'use client';
+import { useRef, type HTMLAttributes, type ReactNode } from 'react';
+import { useIsomorphicLayoutEffect, useLatest } from '../../react/use-recipe';
+import { createHoverCard, type HoverCardOptions } from './engine';
+export interface HoverCardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>, HoverCardOptions {
+  trigger: ReactNode; children: ReactNode; triggerLabel?: string; panelLabel?: string;
+}
+export function HoverCard({ trigger, children, triggerLabel, panelLabel = 'Vista previa', openDelay, closeDelay, placement, onOpenChange, className, ...props }: HoverCardProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  const change = useLatest(onOpenChange);
+  useIsomorphicLayoutEffect(() => {
+    const instance = createHoverCard(ref.current, { openDelay, closeDelay, placement, onOpenChange: (n) => change.current?.(n) });
+    return () => instance.destroy();
+  }, [openDelay, closeDelay, placement]);
+  return <div {...props} ref={ref} className={['mk-hover-card', className].filter(Boolean).join(' ')}>
+    <button type="button" className="mk-button mk-button--tonal" data-mk-hover-trigger aria-label={triggerLabel} aria-expanded="false">{trigger}</button>
+    <div data-mk-hover-panel role="region" aria-label={panelLabel} hidden>{children}</div>
+  </div>;
+}

package/src/components/input-otp/README.md

@@ -0,0 +1,18 @@
+# input-otp
+
+OTP numérico con un único input nativo y slots decorativos. Conserva edición, selección, pegado, ceros iniciales y autocomplete=one-time-code.
+
+```html
+<mk-input-otp class="mk-input-otp" length="6">
+  <span data-mk-otp-slots aria-hidden="true"></span>
+  <input data-mk-otp-input type="text" name="code" aria-label="Código de verificación" />
+</mk-input-otp>
+```
+
+`defineElements()`, `createInputOtp(root, options)`, o `<InputOtp length={6} onChange={setCode} onComplete={verify} />`.
+
+Opciones: `length=6` (1…16), `value`, `mask=false`, `onChange(value)`, `onComplete(value)`. API `setValue(text, notify=true)`, `focus()`, `value`, `destroy()`. Limpia caracteres no ASCII numéricos y limita longitud. Eventos `mk:change {value,complete}`, `mk:complete {value}`; escribir el mismo valor no repite callbacks. No envía ni valida códigos contra un servidor.
+
+React acepta `defaultValue`, `label`, `name`, `disabled`, `required`, `invalid`. Variables `--mk-otp-size`, `--mk-otp-gap`; foco y error usan tokens. Sin movimiento con reduced-motion. Al destruir restaura input y nodos previos.
+
+El reset nativo del formulario sincroniza el control sin emitir callbacks de edición. Los atributos de custom elements conservan el estado editado si value no está presente; value explícito tiene precedencia.

package/src/components/input-otp/element.ts

@@ -0,0 +1,14 @@
+import { MkElement, defineElement, type OptionType } from '../../elements/base';
+import { createInputOtp, type InputOtpInstance } from './engine';
+/** Light DOM: supply the same child markup shown in the README. */
+export class MkInputOtpElement extends MkElement<InputOtpInstance> {
+  static options: Record<string, OptionType> = { length: 'number', value: 'string', mask: 'boolean' };
+  protected create(options: Record<string, unknown>) { return createInputOtp(this, options); }
+  attributeChangedCallback(name: string, previous: string | null, next: string | null) {
+    if (previous === next || !this.isConnected || !this.instance) return;
+    const value = this.instance.value;
+    this.instance.destroy();
+    this.instance = this.create({ ...(!this.hasAttribute('value') ? { value } : {}), ...this.options });
+  }
+}
+export const defineInputOtp = () => defineElement('mk-input-otp', MkInputOtpElement);

package/src/components/input-otp/engine.ts

@@ -0,0 +1,106 @@
+import { createScope } from '../../core/scope';
+import { inert, type Instance } from '../../core/types';
+
+export interface InputOtpOptions {
+  length?: number;
+  value?: string;
+  mask?: boolean;
+  onChange?: (value: string) => void;
+  onComplete?: (value: string) => void;
+}
+export interface InputOtpInstance extends Instance {
+  setValue(value: string, notify?: boolean): void;
+  focus(): void;
+  readonly value: string;
+}
+
+/** One real input preserves native editing, mobile autofill and password managers. */
+export function createInputOtp(root: HTMLElement | null, options: InputOtpOptions = {}): InputOtpInstance {
+  const input = root?.querySelector<HTMLInputElement>('[data-mk-otp-input]');
+  const slots = root?.querySelector<HTMLElement>('[data-mk-otp-slots]');
+  if (!root || !input || !slots) return inert({ setValue() {}, focus() {}, value: '' });
+  const scope = createScope();
+  const length = Number.isFinite(options.length) ? Math.min(16, Math.max(1, Math.round(options.length!))) : 6;
+  const clean = (text: string) => text.replace(/[^0-9]/g, '').slice(0, length);
+  const original = input.value;
+  const originalNodes = [...slots.childNodes];
+  let value = clean(options.value ?? input.value);
+  let pendingReset: Event | null = null;
+  const cells = Array.from({ length }, () => {
+    const cell = document.createElement('span');
+    cell.className = 'mk-input-otp__slot';
+    return cell;
+  });
+  slots.replaceChildren(...cells);
+  scope.attr(slots, 'aria-hidden', 'true');
+  scope.attr(input, 'type', 'text');
+  scope.attr(input, 'inputmode', 'numeric');
+  scope.attr(input, 'autocomplete', 'one-time-code');
+  scope.attr(input, 'maxlength', String(length));
+  scope.attr(input, 'pattern', `[0-9]{${length}}`);
+  scope.attr(root, 'data-mk-ready', '');
+  const render = () => {
+    if (pendingReset) {
+      if (pendingReset.eventPhase !== 0) return;
+      if (!pendingReset.defaultPrevented) value = clean(input.value);
+      pendingReset = null;
+    }
+    input.value = value;
+    const active = document.activeElement === input ? Math.min(length - 1, input.selectionStart ?? value.length) : -1;
+    cells.forEach((cell, i) => {
+      const text = value[i] ? options.mask ? '•' : value[i]! : '';
+      if (cell.textContent !== text) cell.textContent = text;
+      cell.toggleAttribute('data-mk-active', i === active);
+      cell.toggleAttribute('data-mk-filled', i < value.length);
+    });
+    scope.attr(root, 'data-mk-complete', value.length === length ? '' : null);
+  };
+  const setValue = (next: string, notify = true) => {
+    if (scope.disposed) return;
+    if (pendingReset?.eventPhase === 0) pendingReset = null;
+    const previous = value;
+    value = clean(String(next));
+    render();
+    if (notify && value !== previous) {
+      options.onChange?.(value);
+      root.dispatchEvent(new CustomEvent('mk:change', { bubbles: true, detail: { value, complete: value.length === length } }));
+      if (value.length === length) {
+        options.onComplete?.(value);
+        root.dispatchEvent(new CustomEvent('mk:complete', { bubbles: true, detail: { value } }));
+      }
+    }
+  };
+  scope.on(input, 'input', (event) => {
+    if ((event as InputEvent).isComposing) return;
+    const caret = clean(input.value.slice(0, input.selectionStart ?? input.value.length)).length;
+    setValue(input.value);
+    input.setSelectionRange(caret, caret);
+    render();
+  });
+  scope.on(input, 'compositionend', () => setValue(input.value));
+  scope.on(input, 'paste', (event) => {
+    const text = (event as ClipboardEvent).clipboardData?.getData('text');
+    if (text === undefined) return;
+    event.preventDefault();
+    const start = input.selectionStart ?? value.length;
+    const end = input.selectionEnd ?? start;
+    const inserted = clean(text);
+    setValue(value.slice(0, start) + inserted + value.slice(end));
+    const caret = Math.min(length, start + inserted.length);
+    input.setSelectionRange(caret, caret);
+    render();
+  });
+  scope.on(input, 'focus', render);
+  scope.on(input, 'blur', render);
+  scope.on(input, 'keyup', render);
+  scope.on(input, 'click', render);
+  scope.on(document, 'selectionchange', () => { if (document.activeElement === input) render(); });
+  if (input.form) scope.on(input.form, 'reset', (event) => {
+    render();
+    pendingReset = event;
+    scope.timeout(() => { if (pendingReset === event) render(); }, 0);
+  });
+  scope.add(() => { slots.replaceChildren(...originalNodes); input.value = original; });
+  render();
+  return { setValue, focus: () => { if (!scope.disposed) input.focus(); }, get value() { return value; }, destroy: () => scope.dispose() };
+}

package/src/components/input-otp/input-otp.css

@@ -0,0 +1,9 @@
+.mk-input-otp, mk-input-otp { --mk-otp-size: 2.75rem; --mk-otp-gap: .4rem; display: inline-block; position: relative; max-width: 100%; }
+.mk-input-otp [data-mk-otp-slots], mk-input-otp [data-mk-otp-slots] { display: flex; flex-wrap: wrap; gap: var(--mk-otp-gap); }
+.mk-input-otp__slot { box-sizing: border-box; width: var(--mk-otp-size); height: 3.5rem; display: grid; place-items: center; border: 1px solid var(--mk-outline-soft); border-radius: var(--mk-radius-sm); color: var(--mk-text); background: var(--mk-surface-1); font: 1.5rem var(--mk-font-mono, monospace); transition: border-color .2s, background .2s, transform .2s; }
+.mk-input-otp__slot[data-mk-active] { outline: 2px solid var(--mk-accent); outline-offset: 2px; background: var(--mk-accent-soft); color: var(--mk-on-accent-soft); transform: translateY(-2px); }
+.mk-input-otp [data-mk-otp-input], mk-input-otp [data-mk-otp-input] { position: absolute; inset: 0; box-sizing: border-box; width: 100%; height: 100%; border: 0; background: transparent; color: transparent; caret-color: transparent; outline: 0; font: 1.5rem var(--mk-font-mono, monospace); letter-spacing: calc(var(--mk-otp-size) + var(--mk-otp-gap) - 1ch); padding: 0 0 0 calc((var(--mk-otp-size) - 1ch) / 2); }
+.mk-input-otp:has([aria-invalid=true]) .mk-input-otp__slot, mk-input-otp:has([aria-invalid=true]) .mk-input-otp__slot { border-color: var(--mk-error); }
+.mk-input-otp:has(:disabled), mk-input-otp:has(:disabled) { opacity: .45; }
+@media (max-width: 420px) { .mk-input-otp, mk-input-otp { --mk-otp-size: 2.25rem; --mk-otp-gap: .3rem; } }
+@media (prefers-reduced-motion: reduce) { .mk-input-otp__slot { transition: none; transform: none !important; } }

package/src/components/input-otp/react.tsx

@@ -0,0 +1,21 @@
+'use client';
+import { useRef, type HTMLAttributes } from 'react';
+import { useIsomorphicLayoutEffect, useLatest } from '../../react/use-recipe';
+import { createInputOtp, type InputOtpOptions } from './engine';
+export interface InputOtpProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'onComplete' | 'defaultValue'>, InputOtpOptions {
+  label?: string; name?: string; disabled?: boolean; required?: boolean; invalid?: boolean; defaultValue?: string;
+}
+export function InputOtp({ length, value, defaultValue, mask, onChange, onComplete, label = 'Código de verificación', name, disabled, required, invalid, className, ...props }: InputOtpProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  const edited = useRef<string | undefined>(undefined);
+  const change = useLatest(onChange);
+  const complete = useLatest(onComplete);
+  useIsomorphicLayoutEffect(() => {
+    const instance = createInputOtp(ref.current, { length, value: value ?? edited.current, mask, onChange: (n) => change.current?.(n), onComplete: (n) => complete.current?.(n) });
+    return () => { edited.current = instance.value; instance.destroy(); };
+  }, [length, value, mask]);
+  return <div {...props} ref={ref} className={['mk-input-otp', className].filter(Boolean).join(' ')}>
+    <span data-mk-otp-slots aria-hidden="true" />
+    <input data-mk-otp-input type="text" aria-label={label} name={name} defaultValue={value ?? defaultValue ?? ''} disabled={disabled} required={required} aria-invalid={invalid || undefined} />
+  </div>;
+}

package/src/components/island/README.md

@@ -2,7 +2,7 @@
 
 Una isla de cristal esmerilado fija arriba y centrada que crece hasta ser un panel: la fila del contenido pasa de `0fr` a `1fr` (0.6 s `cubic-bezier(.625,.05,0,1)`, 0.125 s después), el radio pasa de 3em a 2em, la página de detrás se oscurece a .4 (0.7 s, 0.1 s después) y las filas del panel suben 3em desde 0.15 s, 25 ms una tras otra. Varios botones comparten la isla: el mismo cierra, otro cambia directamente a su panel. Escape, el fondo, un enlace del panel y hacer scroll después de una rueda o un toque la cierran. Al cargar cae desde −300 % en 1.8 s. En las tarjetas, pasar sobre una baja las demás al 20 % y su imagen crece a 1.04.
 
-Origen: iyo.ai, navbar de la home (`nav`/`d3`): cristal `blur(20px)` sobre `#38383899` con gradiente `141deg #a9c2f214 → #62718c24`, ancho 23.5rem (28rem desde 1920 px; a lo ancho con 1rem / 5vw de margen en móvil), botones de 2.5rem. iyo da solo la duración de la entrada, así que se usa la curva por defecto de GSAP (`power1.out`). El icono de nueve puntos es estático, como en iyo.
+Superficie de cristal con blur de 20 px, ancho adaptable y botones de 2.5rem. La entrada usa `power1.out`; el icono de nueve puntos es estático.
 
 ## HTML / Astro
 
@@ -72,13 +72,13 @@ Con la clase `mk-island` sirve cualquier etiqueta (`<nav class="mk-island">` + `
 
 ## Opciones
 
-| Opción            | Atributo                   | Por defecto | Qué hace                                                   |
+| Opción | Atributo | Por defecto | Qué hace |
 | ----------------- | -------------------------- | ----------- | ---------------------------------------------------------- |
-| `entrance`        | `entrance="false\|manual"` | `true`      | Caer desde −300 % al cargar; `'manual'` espera a `ready()` |
-| `closeOnScroll`   | `close-on-scroll`          | `true`      | Cerrar al moverse la página tras una rueda o un toque      |
-| `closeOnNavigate` | `close-on-navigate`        | `true`      | Cerrar al seguir un enlace del panel                       |
-| `focusOnOpen`     | `focus-on-open`            | `true`      | Enfocar el primer control del panel (150 ms)               |
-| `onChange`        | evento `mk:island`         | —           | Panel abierto o `null`                                     |
+| `entrance` | `entrance="false\|manual"` | `true` | Caer desde −300 % al cargar; `'manual'` espera a `ready()` |
+| `closeOnScroll` | `close-on-scroll` | `true` | Cerrar al moverse la página tras una rueda o un toque |
+| `closeOnNavigate` | `close-on-navigate` | `true` | Cerrar al seguir un enlace del panel |
+| `focusOnOpen` | `focus-on-open` | `true` | Enfocar el primer control del panel (150 ms) |
+| `onChange` | evento `mk:island` | — | Panel abierto o `null` |
 
 API: `createIsland(root, options)` → `{ open(name), close(), toggle(name), ready(), active, destroy }`.
 

package/src/components/island/engine.ts

@@ -5,7 +5,7 @@ import { TIMING } from '../../core/timing';
 import { inert, warnOnce, type Instance } from '../../core/types';
 
 /*
- * iyo.ai's floating navbar: a frosted glass pill centred at the top that grows
+ * floating navbar: a frosted glass pill centred at the top that grows
  * into a rounded panel (CSS grid rows 0fr → 1fr, 0.6 s cubic-bezier(.625,.05,0,1),
  * 0.125 s late; radius 3em → 2em) while the page behind darkens to .4 and the
  * panel's rows rise in 0.15 s + 0.025 s apart. Several triggers share the shell:
@@ -21,7 +21,7 @@ import { inert, warnOnce, type Instance } from '../../core/types';
 export interface IslandOptions {
   /** Drop in from above on load (true), wait for ready() ('manual') or not at all. */
   entrance?: boolean | 'manual';
-  /** Close when the page scrolls after a wheel or touch (iyo). */
+  /** Close when the page scrolls after a wheel or touch. */
   closeOnScroll?: boolean;
   /** Close when a link inside a panel is followed. */
   closeOnNavigate?: boolean;
@@ -169,7 +169,7 @@ export function createIsland(root: HTMLElement | null, options: IslandOptions =
   }
   scope.add(() => clearTimeout(focusTimer));
 
-  // iyo's entrance gives only a duration, so GSAP's default ease (power1.out) applies.
+  // The entrance uses GSAP's default ease (power1.out).
   const moving = entrance !== false && entrances();
   if (moving) gsap.set(shell, { yPercent: t.offset });
   const ready = () => {

package/src/components/island/island.css

@@ -1,5 +1,5 @@
 /*
- * iyo.ai's floating navbar: frosted glass pill at the top that grows into a
+ * floating navbar: frosted glass pill at the top that grows into a
  * panel. Fixed over the page by default; .mk-island--contained keeps it (and its
  * backdrop) inside a positioned parent, for previews.
  */

package/src/components/island/react.tsx

@@ -10,7 +10,7 @@ export interface IslandPanel {
   label: string;
   /** Button content; the menu's nine dots by default. */
   icon?: ReactNode;
-  /** Light button (iyo's cart). */
+  /** Light button. */
   light?: boolean;
   content: ReactNode;
 }
@@ -27,7 +27,7 @@ export interface IslandProps extends Omit<HTMLAttributes<HTMLElement>, 'onChange
   instanceRef?: { current: IslandInstance | null };
 }
 
-/** The nine static dots of iyo's menu button. */
+/** The nine static dots of the island menu button. */
 export function IslandDots() {
   return (
     <span className="mk-island__dots" aria-hidden="true">
@@ -38,7 +38,7 @@ export function IslandDots() {
   );
 }
 
-/** iyo.ai's floating navbar. */
+/** floating navbar. */
 export function Island({
   brand,
   cta,

package/src/components/menu/README.md

@@ -1,8 +1,6 @@
 # menu
 
-El menú "Opciones" de Stepbro: un panel translúcido que crece desde su botón (el mismo motor del diálogo, anclado y sin velo) y cuyas opciones entran escalonadas desde 90 % con blur 4 px, de la última a la primera, 0.35 s, 40 ms entre opciones, tras 0.1 s. Un clic fuera o Escape lo cierra; flechas, Inicio y Fin mueven el foco.
-
-Origen: Stepbro NavMenu (abre con ModalHost `absolute`, sin backdrop, superficie translúcida; `nav-menu-enter` en el kit). Su código usa el mismo plegado de 0.5 s que los diálogos; el screencast en vivo de Stepbro midió menos (abre 175 → 364 ms, cierra 66 → 182 ms) que `pnpm timings` aquí (≈ 585 / 510 ms); lo más probable es que su comparación de frames no registrara la cascada pequeña de las opciones ni la cola del plegado.
+El menú "Opciones": un panel translúcido que crece desde su botón (el mismo motor del diálogo, anclado y sin velo) y cuyas opciones entran escalonadas desde 90 % con blur 4 px, de la última a la primera, 0.35 s, 40 ms entre opciones, tras 0.1 s. Un clic fuera o Escape lo cierra; flechas, Inicio y Fin mueven el foco.
 
 ## HTML / Astro
 
@@ -63,5 +61,5 @@ Sobre tu propio `<dialog class="mk-dialog mk-menu">`: `createMenu(dialog, opcion
 
 ## Presentación boleto (v0.8)
 
-`createMenu(dialog, { ticket: true })`, `createTicketMenu(dialog)`, `<mk-menu ticket>` o `<Menu.Root ticket>` aplican la presentación de Siena. El motor conserva foco, teclado, Escape y selección. Apertura recortada .9 s; contenido desde 150%, 1.1 s con stagger .02. El kit adapta los paneles globales con grid rows a un diálogo local. La receta `ticket-menu` tiene su propia página en el playground.
+`createMenu(dialog, { ticket: true })`, `createTicketMenu(dialog)`, `<mk-menu ticket>` o `<Menu.Root ticket>` aplican la presentación. El motor conserva foco, teclado, Escape y selección. Apertura recortada .9 s; contenido desde 150%, 1.1 s con stagger .02. La receta `ticket-menu` tiene su propia página en el playground.
 

package/src/components/menu/engine.ts

@@ -7,7 +7,7 @@ import { flowInMenu } from '../../motion/entrances';
 import { createDialog, type DialogInstance, type DialogOptions } from '../dialog/engine';
 
 /*
- * Stepbro's NavMenu "Opciones": the same ModalHost as a dialog, anchored to its
+ * Options menu: the same surface engine as a dialog, anchored to its
  * button, without a tinted backdrop, on a translucent surface that grows out of
  * the button; its options flow in from 90 % out of a 4 px blur, last first,
  * 40 ms apart, after 0.1 s. Arrow keys, Home and End move between options.

package/src/components/menu/menu.css

@@ -1,4 +1,4 @@
-/* menu — Stepbro's translucent options panel that grows out of its button (an anchored .mk-dialog). */
+/* menu — translucent options panel that grows out of its button (an anchored .mk-dialog). */
 .mk-menu {
   --mk-menu-bg: color-mix(in srgb, var(--mk-surface-3) 78%, transparent);
   --mk-menu-radius: 28px;

package/src/components/menu/react.tsx

@@ -78,5 +78,5 @@ function Separator() {
   return <hr data-mk-separator="" />;
 }
 
-/** Stepbro's options menu: <Menu.Root onSelect><Menu.Trigger/><Menu.Content><Menu.Item value/>…</Menu.Content></Menu.Root>. */
+/** options menu: <Menu.Root onSelect><Menu.Trigger/><Menu.Content><Menu.Item value/>…</Menu.Content></Menu.Root>. */
 export const Menu = { Root, Trigger, Content, Item, Separator };