@yewdiel21/motion-kit 0.10.0 → 0.15.0

package/src/components/image-preview/image-preview.css

@@ -0,0 +1,282 @@
+/* image-preview — thumbnails in Melonmind cards (16 px radius) and a full-screen dialog: a blurred dark backdrop, the
+   picture at 16 px radius, round glass buttons, a counter pill and a glass strip of 8 px thumbnails with a ring that
+   glides to the current one. */
+.mk-image-preview,
+mk-image-preview {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
+  gap: 0.75rem;
+}
+
+:is(.mk-image-preview, mk-image-preview) [data-mk-image] {
+  display: block;
+  padding: 0;
+  overflow: hidden;
+  border: 0;
+  border-radius: var(--mk-radius-md, 16px);
+  background: var(--mk-surface-3);
+  cursor: zoom-in;
+  transition: scale 0.5s cubic-bezier(0.38, 0.49, 0, 1.5);
+}
+
+:is(.mk-image-preview, mk-image-preview) [data-mk-image]:hover {
+  scale: 1.03;
+}
+
+:is(.mk-image-preview, mk-image-preview) [data-mk-image]:focus-visible {
+  outline: 2px solid var(--mk-accent);
+  outline-offset: 3px;
+}
+
+:is(.mk-image-preview, mk-image-preview) [data-mk-image] img {
+  display: block;
+  width: 100%;
+  aspect-ratio: 1;
+  border-radius: inherit;
+  object-fit: cover;
+}
+
+[data-mk-lightbox-dialog] {
+  position: fixed;
+  inset: 0;
+  width: 100vw;
+  max-width: none;
+  height: 100dvh;
+  max-height: none;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  border: 0;
+  background: transparent;
+  color: #fff;
+}
+
+[data-mk-lightbox-dialog][open] {
+  display: grid;
+  place-items: center;
+}
+
+[data-mk-lightbox-dialog]::backdrop {
+  background: transparent;
+}
+
+[data-mk-lightbox='backdrop'] {
+  position: absolute;
+  inset: 0;
+  background: rgb(8 8 10 / 0.82);
+  backdrop-filter: blur(20px);
+}
+
+[data-mk-lightbox='stage'] {
+  position: relative;
+  display: grid;
+  justify-items: center;
+  gap: 0.85rem;
+  margin: 0;
+  pointer-events: none;
+}
+
+[data-mk-lightbox='image'] {
+  display: block;
+  max-width: min(92vw, 1100px);
+  max-height: 78dvh;
+  border-radius: 16px;
+  object-fit: contain;
+  box-shadow: 0 30px 70px -30px rgb(0 0 0 / 0.7);
+  cursor: grab;
+  pointer-events: auto;
+  touch-action: none;
+  user-select: none;
+}
+
+/* The picture that leaves while the next one comes in (the engine places it over the old one). */
+[data-mk-lightbox='ghost'] {
+  border-radius: 16px;
+  object-fit: contain;
+  pointer-events: none;
+}
+
+[data-mk-lightbox-dialog][data-mk-strip] [data-mk-lightbox='image'] {
+  max-height: min(78dvh, calc(100dvh - 11rem));
+}
+
+[data-mk-lightbox='strip'] {
+  position: absolute;
+  bottom: 1rem;
+  left: 50%;
+  display: flex;
+  gap: 0.375rem;
+  max-width: calc(100vw - 2rem);
+  padding: 0.375rem;
+  overflow-x: auto;
+  border-radius: 14px;
+  background: rgb(255 255 255 / 0.08);
+  box-shadow:
+    inset 1px 1px 1px rgb(255 255 255 / 0.12),
+    inset -1px -1px 1px rgb(255 255 255 / 0.05);
+  backdrop-filter: blur(16px);
+  scrollbar-width: none;
+  translate: -50% 0;
+}
+
+[data-mk-lightbox='strip'][hidden] {
+  display: none;
+}
+
+[data-mk-lightbox-thumb] {
+  position: relative;
+  z-index: 1;
+  flex: none;
+  width: 2.75rem;
+  height: 2.75rem;
+  padding: 0;
+  overflow: hidden;
+  border: 0;
+  border-radius: 8px;
+  background: rgb(255 255 255 / 0.06);
+  opacity: 0.5;
+  cursor: pointer;
+  transition: opacity 0.2s ease;
+}
+
+[data-mk-lightbox-thumb]:hover,
+[data-mk-lightbox-thumb][aria-current='true'] {
+  opacity: 1;
+}
+
+[data-mk-lightbox-thumb]:focus-visible {
+  outline: 2px solid #fff;
+  outline-offset: 2px;
+}
+
+[data-mk-lightbox-thumb] img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+[data-mk-lightbox-ring] {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 2;
+  border-radius: 9px;
+  box-shadow: 0 0 0 2px #fff;
+  pointer-events: none;
+}
+
+[data-mk-lightbox-dialog][data-mk-zoomed] [data-mk-lightbox='image'] {
+  cursor: move;
+}
+
+[data-mk-lightbox='caption'] {
+  max-width: min(36rem, 90vw);
+  padding: 0.4rem 0.9rem;
+  border-radius: 64px;
+  background: rgb(255 255 255 / 0.1);
+  color: rgb(255 255 255 / 0.85);
+  font-size: 0.875rem;
+  text-align: center;
+}
+
+[data-mk-lightbox='caption'][hidden] {
+  display: none;
+}
+
+[data-mk-lightbox-dialog] button[data-mk-lightbox] {
+  position: absolute;
+  display: grid;
+  place-items: center;
+  width: 3rem;
+  height: 3rem;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  background: rgb(255 255 255 / 0.12);
+  box-shadow:
+    inset 1px 1px 1px rgb(255 255 255 / 0.16),
+    inset -1px -1px 1px rgb(255 255 255 / 0.06);
+  backdrop-filter: blur(16px);
+  color: #fff;
+  cursor: pointer;
+  transition:
+    background-color 0.2s ease,
+    scale 0.4s cubic-bezier(0.38, 0.49, 0, 1.5);
+}
+
+[data-mk-lightbox-dialog] button[data-mk-lightbox]:hover:not(:disabled) {
+  background: rgb(255 255 255 / 0.22);
+  scale: 1.08;
+}
+
+[data-mk-lightbox-dialog] button[data-mk-lightbox]:focus-visible {
+  outline: 2px solid #fff;
+  outline-offset: 3px;
+}
+
+[data-mk-lightbox-dialog] button[data-mk-lightbox]:disabled {
+  opacity: 0.3;
+  cursor: default;
+}
+
+[data-mk-lightbox-dialog] button[data-mk-lightbox][hidden] {
+  display: none;
+}
+
+[data-mk-lightbox='close'] {
+  top: 1rem;
+  right: 1rem;
+}
+
+[data-mk-lightbox='prev'] {
+  left: 1rem;
+  top: 50%;
+  margin-top: -1.5rem;
+}
+
+[data-mk-lightbox='next'] {
+  right: 1rem;
+  top: 50%;
+  margin-top: -1.5rem;
+}
+
+[data-mk-lightbox='count'] {
+  position: absolute;
+  top: 1.6rem;
+  left: 50%;
+  display: inline-flex;
+  padding: 0.25rem 0.75rem;
+  border-radius: 64px;
+  background: rgb(255 255 255 / 0.1);
+  font-size: 0.8125rem;
+  font-variant-numeric: tabular-nums;
+  translate: -50% 0;
+}
+
+@media (max-width: 680px) {
+  /* Phones swipe; the arrows take the bottom. */
+  [data-mk-lightbox='strip'] {
+    display: none;
+  }
+
+  [data-mk-lightbox-dialog][data-mk-strip] [data-mk-lightbox='image'] {
+    max-height: 78dvh;
+  }
+
+  [data-mk-lightbox='prev'],
+  [data-mk-lightbox='next'] {
+    top: auto;
+    bottom: 1.25rem;
+    margin: 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :is(.mk-image-preview, mk-image-preview) [data-mk-image],
+  [data-mk-lightbox-dialog] button[data-mk-lightbox],
+  [data-mk-lightbox-thumb] {
+    transition: none;
+    scale: none !important;
+  }
+}

package/src/components/image-preview/react.tsx

@@ -0,0 +1,43 @@
+'use client';
+import { useRef, type HTMLAttributes, type MutableRefObject } from 'react';
+import { useIsomorphicLayoutEffect, useLatest } from '../../react/use-recipe';
+import { createImagePreview, type ImagePreviewInstance, type ImagePreviewOptions } from './engine';
+
+export interface PreviewImage {
+  src: string;
+  /** Smaller image for the thumbnail (default: src). */
+  thumb?: string;
+  alt: string;
+  caption?: string;
+}
+
+export interface ImagePreviewProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>, ImagePreviewOptions {
+  images: PreviewImage[];
+  instanceRef?: MutableRefObject<ImagePreviewInstance | null>;
+}
+
+/** <ImagePreview images={[{ src, thumb, alt, caption }]} />: a grid of thumbnails that open a viewer. */
+export function ImagePreview({ images, labels, loop, strip, onChange, onOpenChange, instanceRef, className, ...props }: ImagePreviewProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  const change = useLatest(onChange);
+  const openChange = useLatest(onOpenChange);
+  const key = JSON.stringify(labels ?? {});
+  useIsomorphicLayoutEffect(() => {
+    const created = createImagePreview(ref.current, { labels, loop, strip, onChange: (i) => change.current?.(i), onOpenChange: (open) => openChange.current?.(open) });
+    if (instanceRef) instanceRef.current = created;
+    return () => {
+      created.destroy();
+      if (instanceRef) instanceRef.current = null;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [key, loop, strip]);
+  return (
+    <div {...props} ref={ref} className={['mk-image-preview', className].filter(Boolean).join(' ')}>
+      {images.map((image, i) => (
+        <button key={`${image.src}-${i}`} type="button" data-mk-image="" data-mk-src={image.src} data-mk-caption={image.caption} aria-label={`Ver ${image.alt}`}>
+          <img src={image.thumb ?? image.src} alt={image.alt} loading="lazy" decoding="async" />
+        </button>
+      ))}
+    </div>
+  );
+}

package/src/components/json-viewer/README.md

@@ -0,0 +1,56 @@
+# json-viewer
+
+Visualizador de JSON con nodos expandibles, montado sobre `tree-view`. Muestra cada clave con su valor coloreado por tipo: textos en verde, números en azul, booleanos en violeta y `null` atenuado en cursiva; los colores (`"#7c5cff"`, `"rgb(…)"`) llevan su muestra. Los objetos y las listas se resumen («6 claves», «3 elementos») y se abren por niveles con el movimiento del árbol: la altura crece (.32 s, curva signature), los hijos salen de un blur y la flecha gira.
+
+Cada fila tiene un botón de copiar que se vuelve una palomita con un pop; Ctrl/⌘ + C copia el valor de la fila enfocada. La búsqueda resalta claves y valores y abre lo que los contiene. Con `setData()` se conserva lo abierto: los valores que cambiaron destellan un momento en el acento y las claves nuevas entran saliendo de un blur, ideal para respuestas que llegan en vivo. La ruta de la fila seleccionada (`$.user.roles[0]`) aparece abajo, lista para copiar.
+
+## HTML / Astro
+
+```html
+<mk-json-viewer class="mk-json-viewer" expand-depth="2" search
+  data='{"user":{"name":"Ana","roles":["admin","editor"],"color":"#7c5cff"},"total":1250.5}'></mk-json-viewer>
+
+<!-- O el JSON escrito dentro: -->
+<mk-json-viewer class="mk-json-viewer" root-name="respuesta">
+  <script type="application/json">{ "ok": true, "items": [1, 2, 3] }</script>
+</mk-json-viewer>
+
+<script>
+  const viewer = document.querySelector('mk-json-viewer');
+  viewer.addEventListener('mk:copy', (event) => console.log('Copiado', event.detail.path));
+</script>
+```
+
+## React
+
+```tsx
+<JsonViewer data={respuesta} expandDepth={2} search onSelect={(path, value) => console.log(path, value)} />
+```
+
+Cambiar `data` conserva lo abierto y marca lo que cambió.
+
+## Opciones
+
+| Opción | Atributo | Por defecto | Qué hace |
+|---|---|---|---|
+| `data` | `data` (JSON) | el JSON escrito dentro | El valor a mostrar. |
+| `expandDepth` | `expand-depth` | `1` | Niveles abiertos al empezar: `1` muestra las claves de arriba cerradas, `2` las abre… (`Infinity`, todo). |
+| `rootName` | `root-name` | — | Una fila para el valor completo con este nombre; sin ella, las claves de arriba son las primeras filas. |
+| `search` | `search` | `false` | Campo de búsqueda; un texto es su marcador. |
+| `toolbar` | `toolbar` | `true` | Botones para expandir, contraer y copiar todo. |
+| `sortKeys` | `sort-keys` | `false` | Claves en orden alfabético. |
+| `label` | `label` | `'Datos JSON'` | Nombre accesible. |
+| `onSelect(path, value)` | — | — | Se seleccionó una fila. |
+| `onCopy(text, path)` | — | — | Se copió un valor. |
+
+## API y eventos
+
+`setData(data)`, `expandAll()`, `collapseAll()`, `reveal(path)`, `filter(texto)`, `copy(path = '$')` (promesa: `true` si se copió), `data`, `destroy()`. Eventos `mk:select` con `{ path, value }` y `mk:copy` con `{ text, path }`. El ayudante `jsonPath(padre, clave)` arma rutas como las del visor.
+
+## Variables CSS
+
+`--mk-jv-height` (alto máximo antes de desplazarse dentro), `--mk-jv-string`, `--mk-jv-number`, `--mk-jv-boolean` (colores de los valores; cambian solos en modo oscuro).
+
+## Accesibilidad
+
+Es un árbol de WAI-ARIA con todo su teclado (↑ ↓, → abre, ← cierra, `*`, Inicio, Fin, escribir para saltar), con Ctrl/⌘ + C para copiar sin buscar el botón. Los botones de copiar no son paradas de tabulación y dicen qué copian («Copiar $.user.name»). Un estado discreto anuncia cada copia, las coincidencias y lo que cambió con datos nuevos. Con movimiento reducido no hay destellos ni animaciones.

package/src/components/json-viewer/element.ts

@@ -0,0 +1,37 @@
+import { MkElement, defineElement, type OptionType } from '../../elements/base';
+import { createJsonViewer, type JsonViewerInstance } from './engine';
+
+/**
+ * <mk-json-viewer class="mk-json-viewer" expand-depth="2" search data='{"user":{"name":"Ana","roles":["admin"]}}'></mk-json-viewer>
+ * Or the JSON as the element's text. Emits mk:select ({path, value}) and mk:copy ({text, path}).
+ */
+export class MkJsonViewerElement extends MkElement<JsonViewerInstance> {
+  static options: Record<string, OptionType> = {
+    data: 'json',
+    expandDepth: 'number',
+    rootName: 'string',
+    search: 'string',
+    toolbar: 'boolean',
+    sortKeys: 'boolean',
+    label: 'string',
+  };
+
+  protected create(options: Record<string, unknown>) {
+    // search="" (present without text) turns the field on with its default placeholder.
+    const search = this.hasAttribute('search') ? (this.getAttribute('search') || true) : undefined;
+    return createJsonViewer(this, { ...options, search });
+  }
+
+  attributeChangedCallback(name: string, previous: string | null, next: string | null) {
+    if (previous === next || !this.instance) return;
+    if (name === 'data') {
+      try {
+        this.instance.setData(JSON.parse(next ?? 'null'));
+      } catch {
+        // Malformed JSON: keep the current data.
+      }
+    } else super.attributeChangedCallback(name, previous, next);
+  }
+}
+
+export const defineJsonViewer = () => defineElement('mk-json-viewer', MkJsonViewerElement);