@yewdiel21/motion-kit 0.0.0-stage → 0.9.0

package/src/components/cursor/react.tsx

@@ -0,0 +1,26 @@
+'use client';
+
+import { useRef } from 'react';
+import { useIsomorphicLayoutEffect } from '../../react/use-recipe';
+import { createCursor, type CursorOptions, type CursorVariant } from './engine';
+
+export interface CursorProps {
+  /** 'chip' (Dousan, default) or 'dot' (Siena). */
+  variant?: CursorVariant;
+  /** dot: the word when nothing under the pointer gives one. */
+  text?: string;
+  arrows?: CursorOptions['arrows'];
+  /** CSS selector of the zone (dot: default the parent). */
+  zone?: string;
+  className?: string;
+}
+
+/** Put <Cursor /> once in the layout (chip), or inside the zone (dot). */
+export function Cursor({ variant = 'chip', text, arrows, zone, className }: CursorProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  useIsomorphicLayoutEffect(() => {
+    const cursor = createCursor(ref.current, { variant, text, arrows, zone: zone ? document.querySelector(zone) : undefined });
+    return () => cursor.destroy();
+  }, [variant, text, arrows, zone]);
+  return <div ref={ref} className={className} />;
+}

package/src/components/dialog/README.md

@@ -0,0 +1,106 @@
+# 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.
+
+- **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).
+- **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.
+
+## HTML / Astro
+
+```html
+<button class="mk-button" data-mk-open="crear">Crear proyecto</button>
+
+<mk-dialog id="crear" heading="Crear proyecto" description="Se guarda en tu espacio.">
+  <label class="mk-field"><span class="mk-field__label">Nombre</span><input /></label>
+  <div data-mk-part="footer">
+    <button class="mk-button mk-button--text" data-mk-close>Cancelar</button>
+    <button class="mk-button mk-button--primary">Crear</button>
+  </div>
+</mk-dialog>
+
+<script>
+  import { defineElements } from '@yewdiel21/motion-kit/elements';
+  defineElements(['mk-dialog']);
+</script>
+```
+
+Sin `heading`, tus hijos van dentro tal cual si ya usan partes (`data-mk-part="header|body|footer"`), o dentro de un cuerpo si no. Sobre tu propio `<dialog class="mk-dialog">`: `createDialog(dialog, opciones)`.
+
+## React
+
+```tsx
+<Dialog.Root variant="liquid" onOpenChange={setOpen}>
+  <Dialog.Trigger className="mk-button">Crear</Dialog.Trigger>
+  <Dialog.Content>
+    <Dialog.Header>
+      <div><Dialog.Title>Crear proyecto</Dialog.Title></div>
+      <Dialog.Actions><Dialog.Close /></Dialog.Actions>
+    </Dialog.Header>
+    <Dialog.Body>…</Dialog.Body>
+    <Dialog.Footer>…</Dialog.Footer>
+  </Dialog.Content>
+</Dialog.Root>
+```
+
+Las opciones van en `Dialog.Root` (`variant`, `placement`, `float`…). Controlado con `open` + `onOpenChange`, o libre con `defaultOpen`. `Dialog.Trigger` registra su botón como origen.
+
+## Opciones
+
+| 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) |
+| `placement` | `placement` | `'center'` | `'anchor'` junto al botón, `'side'` panel lateral |
+| `backdrop` | `no-backdrop` | `true` | Velo tintado |
+| `closeOnBackdrop` | `persistent` | `true` | Clic fuera cierra |
+| `drag` | `no-drag` | `true` | Arrastrar para cerrar |
+| `float` | `float="clave"` | `false` | Ventana flotante (necesita un `[data-mk-part="handle"]`; con `heading` se crea) |
+| `autoResize` | — | `true` | Ajuste suave de altura |
+| `triggers` | (el `id`) | `true` | `[data-mk-open="<id>"]` lo abre |
+| `modal` | — | `true` | Modal o no |
+| `labels` | `close-label` | `{ close: 'Cerrar', float, dock }` | Textos accesibles |
+| `size` | `size` | `md` (400 px) | `sm` 360, `lg` 640, `xl` 960 |
+
+## Sheet
+
+```html
+<main data-mk-underlay>…la página…</main>
+<button class="mk-button" data-mk-open="proyecto">Ver proyecto</button>
+<mk-dialog id="proyecto" variant="sheet" heading="Private Space">…</mk-dialog>
+```
+
+```tsx
+<Dialog.Root variant="sheet">
+  <Dialog.Trigger>Ver proyecto</Dialog.Trigger>
+  <Dialog.Content>…</Dialog.Content>
+</Dialog.Root>
+```
+
+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()`.
+Eventos que burbujean desde el `<dialog>`: `mk:open` (`detail.origin`), `mk:close` (cancelable; `detail.inPlace` tras un arrastre), `mk:closed`.
+Cualquier `[data-mk-part="close"]` o `[data-mk-close]` dentro lo cierra.
+
+## Variables CSS
+
+`--mk-dialog-bg` (surface-2), `--mk-dialog-radius` (40px), `--mk-dialog-width` (400px), `--mk-dialog-padding` (24px), `--mk-dialog-shadow`.
+
+## Accesibilidad
+
+`<dialog>` nativo: foco atrapado, Escape, fondo inerte. El título (`data-mk-part="title"`) nombra el diálogo y la descripción lo describe. El foco va al primer campo al abrir y vuelve al botón al cerrar. Con movimiento reducido abre y cierra sin viaje ni arrastre.

package/src/components/dialog/dialog.css

@@ -0,0 +1,258 @@
+/* dialog — Stepbro's 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);
+  --mk-dialog-width: 400px;
+  --mk-dialog-padding: 24px;
+  --mk-dialog-shadow: 0 24px 64px -16px rgb(0 0 0 / 0.35);
+  width: min(var(--mk-dialog-width), calc(100vw - 32px));
+  max-width: none;
+  max-height: min(88dvh, calc(100dvh - 32px));
+  margin: auto;
+  padding: 0;
+  overflow: hidden;
+  border: 0;
+  border-radius: var(--mk-dialog-radius);
+  background: var(--mk-dialog-bg);
+  box-shadow: var(--mk-dialog-shadow);
+  color: var(--mk-text);
+  font-family: var(--mk-font);
+}
+
+.mk-dialog[open] {
+  display: flex;
+  flex-direction: column;
+}
+
+.mk-dialog--sm {
+  --mk-dialog-width: 360px;
+}
+
+.mk-dialog--lg {
+  --mk-dialog-width: 640px;
+}
+
+.mk-dialog--xl {
+  --mk-dialog-width: 960px;
+}
+
+.mk-dialog::backdrop {
+  background: color-mix(in srgb, var(--mk-scrim, #000) 32%, transparent);
+  backdrop-filter: blur(4px);
+}
+
+.mk-dialog[data-mk-backdrop='none']::backdrop {
+  background: transparent;
+  backdrop-filter: none;
+}
+
+/* Parts */
+.mk-dialog [data-mk-part='header'] {
+  display: flex;
+  flex: none;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+  padding: var(--mk-dialog-padding) var(--mk-dialog-padding) 12px;
+}
+
+.mk-dialog [data-mk-part='header'] > :first-child {
+  min-width: 0;
+}
+
+.mk-dialog [data-mk-part='title'] {
+  margin: 0;
+  font-family: var(--md-sys-typescale-headline-small-font);
+  font-size: var(--md-sys-typescale-headline-small-size);
+  line-height: var(--md-sys-typescale-headline-small-line-height);
+  font-weight: var(--md-sys-typescale-headline-small-weight);
+  letter-spacing: -0.01em;
+}
+
+.mk-dialog [data-mk-part='description'] {
+  margin: 4px 0 0;
+  color: var(--mk-muted);
+  font-size: var(--md-sys-typescale-body-medium-size);
+  line-height: var(--md-sys-typescale-body-medium-line-height);
+}
+
+.mk-dialog [data-mk-part='actions'] {
+  display: flex;
+  flex: none;
+  gap: 4px;
+}
+
+.mk-dialog [data-mk-part='body'] {
+  flex: 1 1 auto;
+  min-height: 0;
+  padding: 4px var(--mk-dialog-padding) var(--mk-dialog-padding);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scrollbar-width: thin;
+}
+
+.mk-dialog [data-mk-part='footer'] {
+  display: flex;
+  flex: none;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 12px var(--mk-dialog-padding) var(--mk-dialog-padding);
+}
+
+.mk-dialog :is([data-mk-part='close'], [data-mk-part='handle']) {
+  display: inline-grid;
+  flex: none;
+  place-items: center;
+  width: 40px;
+  height: 40px;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  background: transparent;
+  color: var(--mk-muted);
+  cursor: pointer;
+  transition:
+    background-color 0.2s ease,
+    color 0.2s ease;
+}
+
+.mk-dialog :is([data-mk-part='close'], [data-mk-part='handle']):hover {
+  background: color-mix(in srgb, currentColor 10%, transparent);
+  color: var(--mk-text);
+}
+
+.mk-dialog :is([data-mk-part='close'], [data-mk-part='handle']):focus-visible {
+  outline: 2px solid var(--mk-accent);
+  outline-offset: 2px;
+}
+
+/* Container transform helpers (motion/morph.ts). */
+.mk-morph-face {
+  position: absolute;
+  inset: 0;
+  z-index: 2147483647;
+  border-radius: inherit;
+  pointer-events: none;
+}
+
+/* The opener hides as its surface starts (80 ms) and stays out of reach while inside it. */
+[data-mk-morph-origin] {
+  opacity: 0 !important;
+  transition: opacity 80ms ease !important;
+  pointer-events: none;
+}
+
+[data-mk-shared-hidden] {
+  opacity: 0 !important;
+}
+
+/* Placement */
+.mk-dialog[data-mk-placement='anchor'] {
+  max-height: calc(100dvh - 32px);
+}
+
+.mk-dialog[data-mk-placement='side'] {
+  position: fixed;
+  inset: 8px 8px 8px auto;
+  width: min(440px, calc(100vw - 16px));
+  height: calc(100dvh - 16px);
+  max-height: none;
+  margin: 0;
+}
+
+/* Floating window (motion/floating.ts) */
+.mk-dialog:popover-open {
+  display: flex;
+  flex-direction: column;
+}
+
+.mk-dialog.is-floating {
+  z-index: 50;
+  box-shadow: rgb(0 0 0 / 0.24) 0 0 24px -6px;
+}
+
+.mk-float-corner {
+  position: absolute;
+  z-index: 3;
+  display: none;
+  width: 18px;
+  height: 18px;
+}
+
+.mk-dialog.is-floating .mk-float-corner {
+  display: block;
+}
+
+.mk-float-corner[data-mk-float-corner='tl'] {
+  top: 0;
+  left: 0;
+  cursor: nwse-resize;
+}
+
+.mk-float-corner[data-mk-float-corner='br'] {
+  right: 0;
+  bottom: 0;
+  cursor: nwse-resize;
+}
+
+.mk-float-corner[data-mk-float-corner='tr'] {
+  top: 0;
+  right: 0;
+  cursor: nesw-resize;
+}
+
+.mk-float-corner[data-mk-float-corner='bl'] {
+  bottom: 0;
+  left: 0;
+  cursor: nesw-resize;
+}
+
+/* The custom element only wraps its <dialog>; before it is defined its content stays hidden. */
+mk-dialog {
+  display: contents;
+}
+
+mk-dialog:not(:defined) {
+  display: none;
+}
+
+/* Phones: dialogs take the whole screen with square corners (Stepbro's responsive rules). */
+@media (max-width: 679px) {
+  .mk-dialog:not([data-mk-placement='anchor']) {
+    width: 100vw;
+    height: 100dvh;
+    max-height: none;
+    margin: 0;
+    border-radius: 0;
+    padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
+  }
+
+  .mk-dialog [data-mk-part='handle'] {
+    display: none;
+  }
+
+  .mk-dialog [data-mk-part='footer'] {
+    padding-bottom: calc(var(--mk-dialog-padding) + env(safe-area-inset-bottom));
+  }
+}
+
+/* Sheet (Dousan): 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. */
+  inset: auto 0 0;
+  width: min(var(--mk-dialog-width), 100vw);
+  height: auto;
+  max-height: calc(100dvh - 24px);
+  margin: 0 auto;
+  padding: 0 0 env(safe-area-inset-bottom);
+  border-radius: var(--mk-dialog-radius) var(--mk-dialog-radius) 0 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .mk-dialog :is([data-mk-part='close'], [data-mk-part='handle']) {
+    transition: none;
+  }
+}

package/src/components/dialog/element.ts

@@ -0,0 +1,118 @@
+import { MkElement, defineElement, type OptionType } from '../../elements/base';
+import type { Instance } from '../../core/types';
+import { iconSvg } from '../icons';
+import { createDialog, type DialogInstance, type DialogPlacement, type DialogVariant } from './engine';
+
+/**
+ * <mk-dialog id="crear" heading="Crear proyecto" [description] [shared="id"] [variant="liquid"]
+ *   [placement="anchor|side"] [size="sm|lg|xl"] [float="key"] [no-backdrop] [persistent] [no-drag]>…</mk-dialog>
+ * Any [data-mk-open="crear"] opens it from that button. On connect its children
+ * move into a <dialog class="mk-dialog"> (with `heading`, a header with title and
+ * close button and a body are made for them); on disconnect they move back.
+ */
+export class MkDialogElement extends MkElement<Instance> {
+  static options: Record<string, OptionType> = {
+    variant: 'string',
+    placement: 'string',
+    size: 'string',
+    heading: 'string',
+    description: 'string',
+    float: 'string',
+    noBackdrop: 'boolean',
+    persistent: 'boolean',
+    noDrag: 'boolean',
+    closeLabel: 'string',
+    shared: 'string',
+  };
+
+  dialog: DialogInstance | null = null;
+
+  protected create(options: Record<string, unknown>): Instance {
+    const original = [...this.childNodes];
+    const dialog = document.createElement('dialog');
+    dialog.className = 'mk-dialog';
+    if (options.size && options.size !== 'md') dialog.classList.add(`mk-dialog--${options.size}`);
+    const hasParts = original.some((node) => node instanceof Element && node.matches('[data-mk-part]'));
+    const closeLabel = (options.closeLabel as string | undefined) ?? 'Cerrar';
+    if (options.heading) {
+      const header = document.createElement('header');
+      header.dataset.mkPart = 'header';
+      const text = document.createElement('div');
+      const title = document.createElement('h2');
+      title.dataset.mkPart = 'title';
+      title.textContent = options.heading as string;
+      if (options.shared) title.dataset.mkShared = options.shared as string;
+      text.append(title);
+      if (options.description) {
+        const description = document.createElement('p');
+        description.dataset.mkPart = 'description';
+        description.textContent = options.description as string;
+        text.append(description);
+      }
+      const actions = document.createElement('div');
+      actions.dataset.mkPart = 'actions';
+      if (options.float) {
+        const handle = document.createElement('button');
+        handle.type = 'button';
+        handle.dataset.mkPart = 'handle';
+        handle.innerHTML = iconSvg('expand', 18);
+        actions.append(handle);
+      }
+      const close = document.createElement('button');
+      close.type = 'button';
+      close.dataset.mkPart = 'close';
+      close.setAttribute('aria-label', closeLabel);
+      close.innerHTML = iconSvg('close');
+      actions.append(close);
+      header.append(text, actions);
+      const body = document.createElement('div');
+      body.dataset.mkPart = 'body';
+      // A footer stays out of the scrolling body.
+      const isFooter = (node: Node) => node instanceof Element && node.matches('[data-mk-part="footer"]');
+      body.append(...original.filter((node) => !isFooter(node)));
+      dialog.append(header, body, ...original.filter(isFooter));
+    } else if (hasParts) {
+      dialog.append(...original);
+    } else {
+      const body = document.createElement('div');
+      body.dataset.mkPart = 'body';
+      body.append(...original);
+      dialog.append(body);
+    }
+    this.append(dialog);
+
+    const engine = createDialog(dialog, {
+      variant: (options.variant as DialogVariant) ?? 'morph',
+      placement: (options.placement as DialogPlacement) ?? 'center',
+      backdrop: !options.noBackdrop,
+      closeOnBackdrop: !options.persistent,
+      drag: !options.noDrag,
+      float: (options.float as string) || false,
+      triggers: this.id || false,
+      labels: { close: closeLabel },
+    });
+    this.dialog = engine;
+    return {
+      destroy: () => {
+        engine.destroy();
+        this.append(...original);
+        dialog.remove();
+        this.dialog = null;
+      },
+    };
+  }
+
+  open(origin?: HTMLElement | null) {
+    this.dialog?.open(origin);
+  }
+
+  close() {
+    this.dialog?.close();
+  }
+
+  get isOpen() {
+    return this.dialog?.isOpen ?? false;
+  }
+}
+
+export const defineDialog = () => defineElement('mk-dialog', MkDialogElement);