@yewdiel21/motion-kit 0.10.0 → 0.14.0

package/dist/{store-DYb3tTsZ.d.ts → store-DjkTBX7f.d.ts}

@@ -1,6 +1,6 @@
 import { I as Instance } from './types-BkS_raL8.js';
 import { Flip } from 'gsap/Flip';
-import { R as RevealHandle } from './reveal-jsX-uwUz.js';
+import { a0 as RevealHandle } from './reveal-DEvp6U6T.js';
 
 interface ThemePickerOptions {
     /** Theme ids to show, in order. Default: visible presets, or all with showHidden. */
@@ -192,4 +192,4 @@ declare const toastTimers: {
     clear(id: number): void;
 };
 
-export { createIsland as A, createNav as B, type ChatInstance as C, createThemePicker as D, createToaster as E, dismissToast as F, getToasts as G, morphPendingToReply as H, type IslandInstance as I, removeToast as J, revealShell as K, subscribeToasts as L, toastTimers as M, type NavInstance as N, PENDING_ID as P, type ThemePickerInstance as T, type ToasterInstance as a, type ChatRole as b, type NavStyle as c, type CursorInstance as d, type ChatLabels as e, type ChatOptions as f, type CursorOptions as g, type CursorVariant as h, type IslandOptions as i, NAV_STYLES as j, type NavOptions as k, type NavigateDetail as l, TOAST_LIMIT as m, type ThemePickerOptions as n, type ToastAction as o, type ToastItem as p, type ToastOptions as q, type ToastTone as r, type ToasterLabels as s, toast as t, type ToasterOptions as u, capturePending as v, chatMessage as w, clearToasts as x, createChat as y, createCursor as z };
+export { createNav as A, createThemePicker as B, type ChatInstance as C, createToaster as D, dismissToast as E, getToasts as F, morphPendingToReply as G, removeToast as H, type IslandInstance as I, revealShell as J, subscribeToasts as K, toast as L, toastTimers as M, NAV_STYLES as N, PENDING_ID as P, TOAST_LIMIT as T, type ChatLabels as a, type ChatOptions as b, type ChatRole as c, type CursorInstance as d, type CursorOptions as e, type CursorVariant as f, type IslandOptions as g, type NavInstance as h, type NavOptions as i, type NavStyle as j, type NavigateDetail as k, type ThemePickerInstance as l, type ThemePickerOptions as m, type ToastAction as n, type ToastItem as o, type ToastOptions as p, type ToastTone as q, type ToasterInstance as r, type ToasterLabels as s, type ToasterOptions as t, capturePending as u, chatMessage as v, clearToasts as w, createChat as x, createCursor as y, createIsland as z };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yewdiel21/motion-kit",
-  "version": "0.10.0",
+  "version": "0.14.0",
   "description": "Motion toolkit for vanilla, Astro and React: GSAP recipes, accessible components, 19 themes, CSS controls and optional WebGL effects.",
   "type": "module",
   "license": "UNLICENSED",

package/registry.json

@@ -407,7 +407,7 @@
     },
     "hover-card": {
       "kind": "component",
-      "description": "Vista previa con apertura por puntero, foco o toque y cierre con Escape.",
+      "description": "Vista previa con apertura por puntero, foco o toque, posición dentro del viewport y cierre con Escape.",
       "files": ["components/hover-card/engine.ts", "components/hover-card/hover-card.css", "components/hover-card/README.md"],
       "element": "components/hover-card/element.ts",
       "react": "components/hover-card/react.tsx",
@@ -538,6 +538,411 @@
       "files": ["recipes/local-clock/create-local-clock.ts", "recipes/local-clock/README.md"],
       "react": "react/use-local-clock.ts",
       "since": "0.10.0"
+    },
+    "attachment": {
+      "kind": "component",
+      "description": "Selector de archivos con arrastrar y soltar, validación, tarjetas con progreso y vista previa de imágenes.",
+      "files": ["components/attachment/engine.ts", "components/attachment/attachment.css", "components/attachment/README.md"],
+      "element": "components/attachment/element.ts",
+      "react": "components/attachment/react.tsx",
+      "since": "0.11.0"
+    },
+    "skeleton": {
+      "kind": "component",
+      "description": "Marcador de carga de texto, avatar, imagen o tarjeta con pulso o brillo y estado accesible.",
+      "files": ["components/skeleton/engine.ts", "components/skeleton/skeleton.css", "components/skeleton/README.md"],
+      "element": "components/skeleton/element.ts",
+      "react": "components/skeleton/react.tsx",
+      "since": "0.11.0"
+    },
+    "questionnaire": {
+      "kind": "component",
+      "description": "Cuestionario por pasos con texto, opción única y múltiple, validación de obligatorios y finalización.",
+      "files": ["components/questionnaire/engine.ts", "components/questionnaire/questionnaire.css", "components/questionnaire/README.md"],
+      "element": "components/questionnaire/element.ts",
+      "react": "components/questionnaire/react.tsx",
+      "requires": ["steps"],
+      "since": "0.11.0"
+    },
+    "code-block": {
+      "kind": "component",
+      "description": "Bloque de código con título, lenguaje, números de línea y copiar con confirmación.",
+      "files": ["components/code-block/engine.ts", "components/code-block/highlight.ts", "components/code-block/code-block.css", "components/code-block/README.md"],
+      "element": "components/code-block/element.ts",
+      "react": "components/code-block/react.tsx",
+      "since": "0.11.0"
+    },
+    "context-menu": {
+      "kind": "component",
+      "description": "Menú contextual con clic derecho, tecla Menú, Shift+F10 o pulsación larga, dentro del viewport.",
+      "files": ["components/context-menu/engine.ts", "components/context-menu/context-menu.css", "components/context-menu/README.md"],
+      "element": "components/context-menu/element.ts",
+      "react": "components/context-menu/react.tsx",
+      "requires": ["menu"],
+      "since": "0.11.0"
+    },
+    "drawer": {
+      "kind": "component",
+      "description": "Panel lateral izquierdo o derecho y hoja inferior sobre el diálogo nativo, con foco y bloqueo de scroll.",
+      "files": ["components/drawer/engine.ts", "components/drawer/drawer.css", "components/drawer/README.md"],
+      "element": "components/drawer/element.ts",
+      "react": "components/drawer/react.tsx",
+      "requires": ["dialog"],
+      "since": "0.11.0"
+    },
+    "link-preview": {
+      "kind": "component",
+      "description": "Tarjeta de enlace con miniatura, sitio, título y descripción, o enlace que la previsualiza al señalar.",
+      "files": ["components/link-preview/engine.ts", "components/link-preview/link-preview.css", "components/link-preview/README.md"],
+      "element": "components/link-preview/element.ts",
+      "react": "components/link-preview/react.tsx",
+      "requires": ["hover-card"],
+      "since": "0.11.0"
+    },
+    "progress": {
+      "kind": "component",
+      "description": "Barra o anillo de progreso, determinado o indeterminado, con límites y porcentaje opcional.",
+      "files": ["components/progress/engine.ts", "components/progress/progress.css", "components/progress/README.md"],
+      "element": "components/progress/element.ts",
+      "react": "components/progress/react.tsx",
+      "since": "0.11.0"
+    },
+    "range-slider": {
+      "kind": "component",
+      "description": "Valor o intervalo sobre inputs range nativos, con pasos, límites, relleno y salida formateada.",
+      "files": ["components/range-slider/engine.ts", "components/range-slider/range-slider.css", "components/range-slider/README.md"],
+      "element": "components/range-slider/element.ts",
+      "react": "components/range-slider/react.tsx",
+      "since": "0.11.0"
+    },
+    "chart": {
+      "kind": "component",
+      "description": "Gráfica SVG de línea, área y barras agrupadas o apiladas, con tooltip, teclado y tabla accesible.",
+      "files": ["components/chart/engine.ts", "components/chart/chart.css", "components/chart/README.md"],
+      "element": "components/chart/element.ts",
+      "react": "components/chart/react.tsx",
+      "since": "0.11.0"
+    },
+    "credit-card": {
+      "kind": "component",
+      "description": "Tarjeta de crédito que se rellena al escribir y gira en 3D al llegar al CVC, con campos nativos y validación.",
+      "files": ["components/credit-card/engine.ts", "components/credit-card/card.ts", "components/credit-card/credit-card.css", "components/credit-card/README.md"],
+      "element": "components/credit-card/element.ts",
+      "react": "components/credit-card/react.tsx",
+      "since": "0.12.0"
+    },
+    "command-search": {
+      "kind": "component",
+      "description": "Paleta de comandos con ⌘K, búsqueda aproximada con letras marcadas, grupos y teclado.",
+      "files": ["components/command-search/engine.ts", "components/command-search/match.ts", "components/command-search/command-search.css", "components/command-search/README.md"],
+      "element": "components/command-search/element.ts",
+      "react": "components/command-search/react.tsx",
+      "since": "0.12.0"
+    },
+    "hold-confirm": {
+      "kind": "component",
+      "description": "Botón que confirma al mantenerlo pulsado: relleno, etiqueta que cambia, ✓ y partículas.",
+      "files": ["components/hold-confirm/engine.ts", "components/hold-confirm/hold-confirm.css", "components/hold-confirm/README.md"],
+      "element": "components/hold-confirm/element.ts",
+      "react": "components/hold-confirm/react.tsx",
+      "since": "0.12.0"
+    },
+    "image-preview": {
+      "kind": "component",
+      "description": "Visor de imágenes en diálogo que crece desde la miniatura, con galería, zoom y arrastre para cerrar.",
+      "files": ["components/image-preview/engine.ts", "components/image-preview/image-preview.css", "components/image-preview/README.md"],
+      "element": "components/image-preview/element.ts",
+      "react": "components/image-preview/react.tsx",
+      "since": "0.12.0"
+    },
+    "like-button": {
+      "kind": "component",
+      "description": "Botón de me gusta con corazón que rebota, partículas y contador que rueda.",
+      "files": ["components/like-button/engine.ts", "components/like-button/like-button.css", "components/like-button/README.md"],
+      "element": "components/like-button/element.ts",
+      "react": "components/like-button/react.tsx",
+      "since": "0.12.0"
+    },
+    "notification-bell": {
+      "kind": "component",
+      "description": "Campana de notificaciones que oscila al llegar una, con insignia, ondas y mensaje.",
+      "files": ["components/notification-bell/engine.ts", "components/notification-bell/notification-bell.css", "components/notification-bell/README.md"],
+      "element": "components/notification-bell/element.ts",
+      "react": "components/notification-bell/react.tsx",
+      "since": "0.12.0"
+    },
+    "password-strength": {
+      "kind": "component",
+      "description": "Contraseña con medidor de fortaleza en cascada, requisitos que se marcan y mostrar/ocultar.",
+      "files": ["components/password-strength/engine.ts", "components/password-strength/score.ts", "components/password-strength/password-strength.css", "components/password-strength/README.md"],
+      "element": "components/password-strength/element.ts",
+      "react": "components/password-strength/react.tsx",
+      "since": "0.12.0"
+    },
+    "scratch-card": {
+      "kind": "component",
+      "description": "Rasca y gana para cupones: cubierta metalizada en canvas, revelado con blur y confeti.",
+      "files": ["components/scratch-card/engine.ts", "components/scratch-card/scratch-card.css", "components/scratch-card/README.md"],
+      "element": "components/scratch-card/element.ts",
+      "react": "components/scratch-card/react.tsx",
+      "since": "0.12.0"
+    },
+    "star-rating": {
+      "kind": "component",
+      "description": "Valoración con estrellas sobre radios nativos, vista previa en cascada y rebote al elegir.",
+      "files": ["components/star-rating/engine.ts", "components/star-rating/star-rating.css", "components/star-rating/README.md"],
+      "element": "components/star-rating/element.ts",
+      "react": "components/star-rating/react.tsx",
+      "since": "0.12.0"
+    },
+    "swipe-actions": {
+      "kind": "component",
+      "description": "Filas de lista que se deslizan para mostrar acciones; el deslizamiento largo ejecuta la principal.",
+      "files": ["components/swipe-actions/engine.ts", "components/swipe-actions/swipe-actions.css", "components/swipe-actions/README.md"],
+      "element": "components/swipe-actions/element.ts",
+      "react": "components/swipe-actions/react.tsx",
+      "since": "0.12.0"
+    },
+    "color-slider": {
+      "kind": "component",
+      "description": "Deslizador de un canal de color (tono, opacidad…) con pista degradada y lupa.",
+      "files": ["components/color-slider/engine.ts", "components/color-slider/color-slider.css", "components/color-slider/README.md"],
+      "element": "components/color-slider/element.ts",
+      "react": "components/color-slider/react.tsx",
+      "since": "0.13.0"
+    },
+    "color-area": {
+      "kind": "component",
+      "description": "Área de saturación y brillo con arrastre, teclado y lupa de color.",
+      "files": ["components/color-area/engine.ts", "components/color-area/color-area.css", "components/color-area/README.md"],
+      "element": "components/color-area/element.ts",
+      "react": "components/color-area/react.tsx",
+      "since": "0.13.0"
+    },
+    "color-field": {
+      "kind": "component",
+      "description": "Campo de color que acepta hex, rgb() o hsl(), con muestra y validación.",
+      "files": ["components/color-field/engine.ts", "components/color-field/color-field.css", "components/color-field/README.md"],
+      "element": "components/color-field/element.ts",
+      "react": "components/color-field/react.tsx",
+      "since": "0.13.0"
+    },
+    "color-picker": {
+      "kind": "component",
+      "description": "Selector de color que crece desde su muestra: área, tono, opacidad, código, guardados y cuentagotas.",
+      "files": ["components/color-picker/engine.ts", "components/color-picker/color-picker.css", "components/color-picker/README.md"],
+      "element": "components/color-picker/element.ts",
+      "react": "components/color-picker/react.tsx",
+      "requires": ["dialog", "color-area", "color-slider", "color-field"],
+      "since": "0.13.0"
+    },
+    "time-field": {
+      "kind": "component",
+      "description": "Hora por segmentos (24 h o a. m./p. m.) con dígitos que ruedan y teclado.",
+      "files": ["components/time-field/engine.ts", "components/time-field/time-field.css", "components/time-field/README.md"],
+      "element": "components/time-field/element.ts",
+      "react": "components/time-field/react.tsx",
+      "since": "0.13.0"
+    },
+    "range-calendar": {
+      "kind": "component",
+      "description": "Calendario de rango con vista previa, banda animada, días no disponibles y teclado.",
+      "files": ["components/range-calendar/engine.ts", "components/range-calendar/range-calendar.css", "components/range-calendar/README.md"],
+      "element": "components/range-calendar/element.ts",
+      "react": "components/range-calendar/react.tsx",
+      "since": "0.13.0"
+    },
+    "date-range-picker": {
+      "kind": "component",
+      "description": "Fechas de inicio y fin por segmentos con calendario de rango que crece desde su botón.",
+      "files": ["components/date-range-picker/engine.ts", "components/date-range-picker/date-range-picker.css", "components/date-range-picker/README.md"],
+      "element": "components/date-range-picker/element.ts",
+      "react": "components/date-range-picker/react.tsx",
+      "requires": ["dialog", "range-calendar"],
+      "since": "0.13.0"
+    },
+    "tooltip": {
+      "kind": "component",
+      "description": "Información contextual que aparece al señalar o enfocar, con posición automática y flecha.",
+      "files": ["components/tooltip/engine.ts", "components/tooltip/tooltip.css", "components/tooltip/README.md"],
+      "element": "components/tooltip/element.ts",
+      "react": "components/tooltip/react.tsx",
+      "since": "0.14.0"
+    },
+    "popover": {
+      "kind": "component",
+      "description": "Panel flotante interactivo que crece desde su botón y queda anclado a él.",
+      "files": ["components/popover/engine.ts", "components/popover/popover.css", "components/popover/README.md"],
+      "element": "components/popover/element.ts",
+      "react": "components/popover/react.tsx",
+      "requires": ["dialog"],
+      "since": "0.14.0"
+    },
+    "loading-button": {
+      "kind": "component",
+      "description": "Botón con estados de carga, éxito y error que cambia de ancho, color e icono.",
+      "files": ["components/loading-button/engine.ts", "components/loading-button/loading-button.css", "components/loading-button/README.md"],
+      "element": "components/loading-button/element.ts",
+      "react": "components/loading-button/react.tsx",
+      "since": "0.14.0"
+    },
+    "breadcrumb": {
+      "kind": "component",
+      "description": "Ruta de navegación jerárquica que agrupa los niveles intermedios cuando falta espacio.",
+      "files": ["components/breadcrumb/engine.ts", "components/breadcrumb/breadcrumb.css", "components/breadcrumb/README.md"],
+      "element": "components/breadcrumb/element.ts",
+      "react": "components/breadcrumb/react.tsx",
+      "since": "0.14.0"
+    },
+    "empty-state": {
+      "kind": "component",
+      "description": "Estado vacío con ilustración animada, texto y acciones.",
+      "files": ["components/empty-state/engine.ts", "components/empty-state/empty-state.css", "components/empty-state/README.md"],
+      "element": "components/empty-state/element.ts",
+      "react": "components/empty-state/react.tsx",
+      "since": "0.14.0"
+    },
+    "stat-card": {
+      "kind": "component",
+      "description": "Tarjeta de KPI con cifra que cuenta, tendencia, comparativa y minigráfica.",
+      "files": ["components/stat-card/engine.ts", "components/stat-card/stat-card.css", "components/stat-card/README.md"],
+      "element": "components/stat-card/element.ts",
+      "react": "components/stat-card/react.tsx",
+      "since": "0.14.0"
+    },
+    "chart-tooltip": {
+      "kind": "component",
+      "description": "Tooltip avanzado para gráficas: guía, valores por serie, variación y fijado.",
+      "files": ["components/chart-tooltip/engine.ts", "components/chart-tooltip/chart-tooltip.css", "components/chart-tooltip/README.md"],
+      "element": "components/chart-tooltip/element.ts",
+      "react": "components/chart-tooltip/react.tsx",
+      "since": "0.14.0"
+    },
+    "multi-select": {
+      "kind": "component",
+      "description": "Selección múltiple con chips, búsqueda y lista navegable con teclado.",
+      "files": ["components/multi-select/engine.ts", "components/multi-select/multi-select.css", "components/multi-select/README.md"],
+      "element": "components/multi-select/element.ts",
+      "react": "components/multi-select/react.tsx",
+      "since": "0.14.0"
+    },
+    "tag-input": {
+      "kind": "component",
+      "description": "Entrada de etiquetas con autocompletado, validación y chips animados.",
+      "files": ["components/tag-input/engine.ts", "components/tag-input/tag-input.css", "components/tag-input/README.md"],
+      "element": "components/tag-input/element.ts",
+      "react": "components/tag-input/react.tsx",
+      "since": "0.14.0"
+    },
+    "date-time-picker": {
+      "kind": "component",
+      "description": "Fecha y hora en un solo campo por segmentos, con calendario y hora en un panel.",
+      "files": ["components/date-time-picker/engine.ts", "components/date-time-picker/date-time-picker.css", "components/date-time-picker/README.md"],
+      "element": "components/date-time-picker/element.ts",
+      "react": "components/date-time-picker/react.tsx",
+      "requires": ["dialog", "range-calendar", "time-field"],
+      "since": "0.14.0"
+    },
+    "filter-builder": {
+      "kind": "component",
+      "description": "Constructor de filtros con condiciones y grupos combinados con Y/O.",
+      "files": ["components/filter-builder/engine.ts", "components/filter-builder/filter-builder.css", "components/filter-builder/README.md"],
+      "element": "components/filter-builder/element.ts",
+      "react": "components/filter-builder/react.tsx",
+      "since": "0.14.0"
+    },
+    "timeline": {
+      "kind": "component",
+      "description": "Historial de actividades, cambios y eventos con una línea que se dibuja.",
+      "files": ["components/timeline/engine.ts", "components/timeline/timeline.css", "components/timeline/README.md"],
+      "element": "components/timeline/element.ts",
+      "react": "components/timeline/react.tsx",
+      "since": "0.14.0"
+    },
+    "activity-feed": {
+      "kind": "component",
+      "description": "Registro de acciones de usuarios agrupado por día, con novedades en vivo.",
+      "files": ["components/activity-feed/engine.ts", "components/activity-feed/activity-feed.css", "components/activity-feed/README.md"],
+      "element": "components/activity-feed/element.ts",
+      "react": "components/activity-feed/react.tsx",
+      "since": "0.14.0"
+    },
+    "tree-view": {
+      "kind": "component",
+      "description": "Jerarquía con nodos expandibles, casillas de tres estados y búsqueda.",
+      "files": ["components/tree-view/engine.ts", "components/tree-view/tree-view.css", "components/tree-view/README.md"],
+      "element": "components/tree-view/element.ts",
+      "react": "components/tree-view/react.tsx",
+      "since": "0.14.0"
+    },
+    "file-explorer": {
+      "kind": "component",
+      "description": "Explorador de carpetas y archivos con árbol, ruta, vistas y acciones.",
+      "files": ["components/file-explorer/engine.ts", "components/file-explorer/file-explorer.css", "components/file-explorer/README.md"],
+      "element": "components/file-explorer/element.ts",
+      "react": "components/file-explorer/react.tsx",
+      "requires": ["tree-view", "breadcrumb"],
+      "since": "0.14.0"
+    },
+    "json-viewer": {
+      "kind": "component",
+      "description": "Visor de JSON con nodos expandibles, tipos, búsqueda y copia.",
+      "files": ["components/json-viewer/engine.ts", "components/json-viewer/json-viewer.css", "components/json-viewer/README.md"],
+      "element": "components/json-viewer/element.ts",
+      "react": "components/json-viewer/react.tsx",
+      "requires": ["tree-view"],
+      "since": "0.14.0"
+    },
+    "virtual-list": {
+      "kind": "component",
+      "description": "Lista virtual que dibuja solo lo visible de miles de elementos.",
+      "files": ["components/virtual-list/engine.ts", "components/virtual-list/virtual-list.css", "components/virtual-list/README.md"],
+      "element": "components/virtual-list/element.ts",
+      "react": "components/virtual-list/react.tsx",
+      "since": "0.14.0"
+    },
+    "resizable-panel": {
+      "kind": "component",
+      "description": "Paneles que se ajustan arrastrando divisores, con teclado y colapso.",
+      "files": ["components/resizable-panel/engine.ts", "components/resizable-panel/resizable-panel.css", "components/resizable-panel/README.md"],
+      "element": "components/resizable-panel/element.ts",
+      "react": "components/resizable-panel/react.tsx",
+      "since": "0.14.0"
+    },
+    "split-view": {
+      "kind": "component",
+      "description": "Dos áreas de trabajo con divisor, orientación y tamaño configurables.",
+      "files": ["components/split-view/engine.ts", "components/split-view/split-view.css", "components/split-view/README.md"],
+      "element": "components/split-view/element.ts",
+      "react": "components/split-view/react.tsx",
+      "requires": ["resizable-panel"],
+      "since": "0.14.0"
+    },
+    "data-table": {
+      "kind": "component",
+      "description": "Tabla de datos con orden, filtros, selección, paginación, acciones y columnas configurables.",
+      "files": ["components/data-table/engine.ts", "components/data-table/data-table.css", "components/data-table/README.md"],
+      "element": "components/data-table/element.ts",
+      "react": "components/data-table/react.tsx",
+      "requires": ["pagination", "menu", "popover", "empty-state"],
+      "since": "0.14.0"
+    },
+    "editable-table": {
+      "kind": "component",
+      "description": "Tabla con edición de celdas, validación y guardado de cambios.",
+      "files": ["components/editable-table/engine.ts", "components/editable-table/editable-table.css", "components/editable-table/README.md"],
+      "element": "components/editable-table/element.ts",
+      "react": "components/editable-table/react.tsx",
+      "requires": ["data-table"],
+      "since": "0.14.0"
+    },
+    "rich-text-editor": {
+      "kind": "component",
+      "description": "Editor de texto enriquecido con barra de formato, atajos y pegado limpio.",
+      "files": ["components/rich-text-editor/engine.ts", "components/rich-text-editor/rich-text-editor.css", "components/rich-text-editor/README.md"],
+      "element": "components/rich-text-editor/element.ts",
+      "react": "components/rich-text-editor/react.tsx",
+      "since": "0.14.0"
     }
   }
 }

package/src/auto/auto-init.ts

@@ -17,6 +17,55 @@ import { createSticker } from '../recipes/sticker/create-sticker';
 import { createScrollDock } from '../recipes/scroll-dock/create-scroll-dock';
 import { createLocalClock } from '../recipes/local-clock/create-local-clock';
 import { createTrailer } from '../components/trailer/engine';
+import { createCreditCard } from '../components/credit-card/engine';
+import { createCommandSearch } from '../components/command-search/engine';
+import { createHoldConfirm } from '../components/hold-confirm/engine';
+import { createImagePreview } from '../components/image-preview/engine';
+import { createLikeButton } from '../components/like-button/engine';
+import { createNotificationBell } from '../components/notification-bell/engine';
+import { createPasswordStrength } from '../components/password-strength/engine';
+import { createScratchCard } from '../components/scratch-card/engine';
+import { createStarRating } from '../components/star-rating/engine';
+import { createSwipeActions } from '../components/swipe-actions/engine';
+import { createAttachment } from '../components/attachment/engine';
+import { createSkeleton } from '../components/skeleton/engine';
+import { createQuestionnaire } from '../components/questionnaire/engine';
+import { createCodeBlock } from '../components/code-block/engine';
+import { createContextMenu } from '../components/context-menu/engine';
+import { createDrawer } from '../components/drawer/engine';
+import { createLinkPreview } from '../components/link-preview/engine';
+import { createProgress } from '../components/progress/engine';
+import { createRangeSlider } from '../components/range-slider/engine';
+import { createChart } from '../components/chart/engine';
+import { createColorSlider } from '../components/color-slider/engine';
+import { createColorArea } from '../components/color-area/engine';
+import { createColorField } from '../components/color-field/engine';
+import { createColorPicker } from '../components/color-picker/engine';
+import { createTimeField } from '../components/time-field/engine';
+import { createRangeCalendar } from '../components/range-calendar/engine';
+import { createDateRangePicker } from '../components/date-range-picker/engine';
+import { createTooltip } from '../components/tooltip/engine';
+import { createPopover } from '../components/popover/engine';
+import { createLoadingButton } from '../components/loading-button/engine';
+import { createBreadcrumb } from '../components/breadcrumb/engine';
+import { createEmptyState } from '../components/empty-state/engine';
+import { createStatCard } from '../components/stat-card/engine';
+import { createChartTooltip } from '../components/chart-tooltip/engine';
+import { createMultiSelect } from '../components/multi-select/engine';
+import { createTagInput } from '../components/tag-input/engine';
+import { createDateTimePicker } from '../components/date-time-picker/engine';
+import { createFilterBuilder } from '../components/filter-builder/engine';
+import { createTimeline } from '../components/timeline/engine';
+import { createActivityFeed } from '../components/activity-feed/engine';
+import { createTreeView } from '../components/tree-view/engine';
+import { createFileExplorer } from '../components/file-explorer/engine';
+import { createJsonViewer } from '../components/json-viewer/engine';
+import { createVirtualList } from '../components/virtual-list/engine';
+import { createResizablePanel } from '../components/resizable-panel/engine';
+import { createSplitView } from '../components/split-view/engine';
+import { createDataTable } from '../components/data-table/engine';
+import { createEditableTable } from '../components/editable-table/engine';
+import { createRichTextEditor } from '../components/rich-text-editor/engine';
 import { ScrollTrigger } from '../core/gsap';
 import { warnOnce, type Instance } from '../core/types';
 import { createSpringCards } from '../recipes/spring-cards/create-spring-cards';
@@ -73,6 +122,55 @@ const factories = {
   'input-otp': createInputOtp,
   'calendar': createCalendar,
   'slot-picker': createSlotPicker,
+  'credit-card': createCreditCard,
+  'command-search': createCommandSearch,
+  'hold-confirm': createHoldConfirm,
+  'image-preview': createImagePreview,
+  'like-button': createLikeButton,
+  'notification-bell': createNotificationBell,
+  'password-strength': createPasswordStrength,
+  'scratch-card': createScratchCard,
+  'star-rating': createStarRating,
+  'swipe-actions': createSwipeActions,
+  'attachment': createAttachment,
+  'skeleton': createSkeleton,
+  'questionnaire': createQuestionnaire,
+  'code-block': createCodeBlock,
+  'context-menu': createContextMenu,
+  'drawer': createDrawer,
+  'link-preview': createLinkPreview,
+  'progress': createProgress,
+  'range-slider': createRangeSlider,
+  'chart': createChart,
+  'color-slider': createColorSlider,
+  'color-area': createColorArea,
+  'color-field': createColorField,
+  'color-picker': createColorPicker,
+  'time-field': createTimeField,
+  'range-calendar': createRangeCalendar,
+  'date-range-picker': createDateRangePicker,
+  'tooltip': createTooltip,
+  'popover': createPopover,
+  'loading-button': createLoadingButton,
+  'breadcrumb': createBreadcrumb,
+  'empty-state': createEmptyState,
+  'stat-card': createStatCard,
+  'chart-tooltip': createChartTooltip,
+  'multi-select': createMultiSelect,
+  'tag-input': createTagInput,
+  'date-time-picker': createDateTimePicker,
+  'filter-builder': createFilterBuilder,
+  'timeline': createTimeline,
+  'activity-feed': createActivityFeed,
+  'tree-view': createTreeView,
+  'file-explorer': createFileExplorer,
+  'json-viewer': createJsonViewer,
+  'virtual-list': createVirtualList,
+  'resizable-panel': createResizablePanel,
+  'split-view': createSplitView,
+  'data-table': createDataTable,
+  'editable-table': createEditableTable,
+  'rich-text-editor': createRichTextEditor,
   'weight-hover': createWeightHover,
   'sticker': createSticker,
   'scroll-dock': createScrollDock,

package/src/components/activity-feed/README.md

@@ -0,0 +1,56 @@
+# activity-feed
+
+Registro de acciones de usuarios en el sistema: lo más reciente arriba, agrupado por día («Hoy», «Ayer», «Lunes, 16 de noviembre»). Cada entrada tiene un avatar (foto, o iniciales sobre un color que sale del nombre, así cada persona conserva el suyo) con una insignia del tipo de acción, la frase «**Ana Gómez** comentó en <u>Tarea 12</u>», una hora relativa que se actualiza cada minuto y, si hace falta, una cita.
+
+La actividad nueva (`prepend()`) entra arriba: las entradas de abajo se deslizan (el resorte de layout del kit, .62 s) mientras las nuevas caen saliendo de un blur y conservan un resaltado suave que se apaga. Si quien lee bajó por la lista, en lugar de moverle el contenido aparece una píldora «↑ 3 novedades» (el número rueda con cada llegada); al pulsarla sube y las mete. «Cargar más» al final pide entradas antiguas a `onLoadMore()` y las deja entrar en cascada; cuando ya no hay, lo dice.
+
+## HTML / Astro
+
+```html
+<mk-activity-feed class="mk-activity-feed" style="--mk-af-height: 28rem"
+  items='[{"id":"1","actor":"Ana Gómez","action":"comentó en","target":"Tarea 12","href":"/tareas/12","time":"2026-11-23T09:12","kind":"comment","detail":"¿Lo vemos mañana?"},
+          {"id":"2","actor":{"name":"Luis Peña","avatar":"/luis.jpg"},"action":"cerró","target":"Tarea 9","time":"2026-11-22T18:40","kind":"complete"}]'></mk-activity-feed>
+
+<script>
+  const feed = document.querySelector('mk-activity-feed');
+  // Llega algo en vivo (un socket, un intervalo…):
+  feed.prependItems([{ id: '3', actor: 'Sofía Ruiz', action: 'subió', target: 'propuesta.pdf', time: new Date(), kind: 'upload' }]);
+  // Entradas antiguas cuando quieras:
+  feed.appendItems(older);
+</script>
+```
+
+## React
+
+```tsx
+const feed = useRef<ActivityFeedHandle>(null);
+
+<ActivityFeed ref={feed} items={recent} onLoadMore={() => api.olderThan(cursor)} style={{ maxHeight: 448 }} />;
+
+// después
+feed.current?.prepend([nueva]);
+```
+
+## Opciones
+
+| Opción | Atributo | Por defecto | Qué hace |
+|---|---|---|---|
+| `items` | `items` (JSON) | `[]` | `{ id, actor, action, target?, href?, time, detail?, kind? }[]`; `actor` es un nombre o `{ name, avatar? }`. |
+| `onLoadMore()` | — | — | Muestra «Cargar más»; resuelve con las entradas anteriores o con `[]` cuando no hay más. |
+| `locale` | `locale` | el `lang` más cercano | Idioma de las fechas. |
+| `label` | `label` | `'Actividad'` | Nombre accesible. |
+| `emptyLabel` | `empty-label` | `'Sin actividad todavía'` | Texto sin entradas. |
+
+`kind` (la insignia): `comment`, `create`, `update`, `delete`, `upload`, `complete` o `mention`.
+
+## API
+
+`prepend(items)` (en el elemento, `prependItems`), `append(items)` (`appendItems`), `setItems(items)`, `items`, `destroy()`.
+
+## Variables CSS
+
+`--mk-af-height` (alto máximo antes de desplazarse dentro; también vale `max-height` en el elemento), `--mk-af-avatar-l` y `--mk-af-avatar-ink-l` (luminosidad del fondo y de las iniciales del avatar).
+
+## Accesibilidad
+
+Un `role="feed"` con cada entrada como `article`; las horas son `<time datetime>` con la fecha completa en su título. Un estado discreto anuncia lo nuevo («Sofía Ruiz subió propuesta.pdf», «3 novedades») y lo que se cargó. Al pulsar la píldora el foco pasa a la primera entrada nueva. Con movimiento reducido todo cambia sin animación.