@yewdiel21/motion-kit 0.9.1 → 0.14.0

package/src/components/trailer/trailer.css

@@ -0,0 +1,36 @@
+.mk-trailer {
+  --mk-trailer-ink: #f6f3e8;
+  --mk-trailer-paper: #131816;
+  width: min(1100px, calc(100vw - 32px));
+  max-width: none;
+  max-height: calc(100dvh - 32px);
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  color: var(--mk-trailer-ink);
+  background: var(--mk-trailer-paper);
+  overflow: auto;
+  margin: auto;
+}
+.mk-trailer::backdrop { background: rgb(4 10 7 / .8); }
+.mk-trailer__header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 20px; }
+.mk-trailer__title { font: 500 .75rem/1.5 var(--mk-font-mono, monospace); text-transform: uppercase; letter-spacing: .16em; margin: 0; }
+.mk-trailer video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: contain; background: #060b08; }
+.mk-trailer [data-mk-trailer-stage]:fullscreen { display: flex; flex-direction: column; justify-content: center; width: 100%; height: 100%; background: var(--mk-trailer-paper); color: var(--mk-trailer-ink); }
+.mk-trailer [data-mk-trailer-stage]:fullscreen video { max-height: calc(100dvh - 90px); }
+.mk-trailer__controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 20px 16px; font: .7rem/1.5 var(--mk-font-mono, monospace); }
+.mk-trailer button { display: grid; place-items: center; min-width: 44px; min-height: 44px; border: 1px solid currentColor; color: inherit; background: transparent; cursor: pointer; font: inherit; }
+.mk-trailer button:hover { background: rgb(255 255 255 / .12); }
+.mk-trailer button:focus-visible, .mk-trailer input:focus-visible { outline: 2px solid #e5ff96; outline-offset: 4px; }
+.mk-trailer button svg { width: 18px; height: 18px; fill: currentColor; }
+.mk-trailer [data-mk-trailer-seek] { flex: 1; min-width: 70px; accent-color: #d6f2ac; }
+.mk-trailer [data-mk-trailer-volume] { width: 72px; accent-color: #d6f2ac; }
+.mk-trailer [data-mk-trailer-time] { white-space: nowrap; }
+.mk-trailer [data-mk-trailer-status] { padding: 0 20px; font: .8rem/1.5 var(--mk-font, sans-serif); }
+.mk-trailer [data-mk-trailer-status]:empty { display: none; }
+.mk-trailer__pause-icon, .mk-trailer__sound-off { display: none; }
+.mk-trailer [data-mk-trailer-play][aria-pressed="true"] .mk-trailer__play-icon,
+.mk-trailer [data-mk-trailer-mute][aria-pressed="true"] .mk-trailer__sound-on { display: none; }
+.mk-trailer [data-mk-trailer-play][aria-pressed="true"] .mk-trailer__pause-icon,
+.mk-trailer [data-mk-trailer-mute][aria-pressed="true"] .mk-trailer__sound-off { display: block; }
+@media (max-width: 540px) { .mk-trailer [data-mk-trailer-volume] { display: none; } .mk-trailer__controls { gap: 8px; padding-inline: 12px; } .mk-trailer [data-mk-trailer-seek] { flex-basis: 100%; order: -1; } }

package/src/components/tree-view/README.md

@@ -0,0 +1,61 @@
+# tree-view
+
+Árbol jerárquico con nodos expandibles, checkboxes y búsqueda. Una rama se abre por su altura (.32 s, curva signature) mientras sus hijos entran deslizándose desde un blur, 25 ms entre uno y otro, y su flecha gira; al cerrarse hace lo mismo al revés. La fila seleccionada va sobre una píldora que se desliza hasta cada nueva elección (.3 s, curva swing).
+
+Con `checkable`, las casillas tienen tres estados: la palomita se dibuja sola y la casilla hace pop; una rama con solo algunos hijos marcados muestra un guion. Marcar una rama marca todo lo que tiene dentro. La búsqueda resalta las letras que coinciden (sin importar tildes ni mayúsculas), abre las ramas que las contienen y oculta lo demás; al borrarla vuelve lo que estaba abierto. `loadChildren()` llena una rama la primera vez que se abre (mientras tanto, una fila «Cargando…»).
+
+## HTML / Astro
+
+```html
+<mk-tree-view class="mk-tree-view" checkable search="Filtrar carpetas" expanded="docs"
+  nodes='[{"id":"docs","label":"Documentos","icon":"📁","children":[
+            {"id":"cv","label":"Currículum.pdf","icon":"📄"},
+            {"id":"facturas","label":"Facturas","icon":"📁","children":[{"id":"f1","label":"Enero"},{"id":"f2","label":"Febrero"}]}]},
+          {"id":"fotos","label":"Fotos","icon":"🖼️","children":[{"id":"playa","label":"Playa"}]}]'></mk-tree-view>
+
+<script>
+  const tree = document.querySelector('mk-tree-view');
+  tree.addEventListener('mk:check', (event) => console.log(event.detail.checked));
+  tree.addEventListener('mk:select', (event) => console.log(event.detail.node));
+</script>
+```
+
+`expanded="all"` abre todas las ramas; `search` sin texto activa la búsqueda con su texto por defecto.
+
+## React
+
+```tsx
+const tree = useRef<TreeViewHandle>(null);
+
+<TreeView ref={tree} nodes={carpetas} checkable checked={ids} onCheck={setIds} search expanded={['docs']} />;
+
+tree.current?.expandAll();
+```
+
+## Opciones
+
+| Opción | Atributo | Por defecto | Qué hace |
+|---|---|---|---|
+| `nodes` | `nodes` (JSON) | `[]` | `{ id, label, children?, icon?, disabled?, hasChildren?, data? }[]`. |
+| `checkable` | `checkable` | `false` | Casillas de tres estados. |
+| `checked` | `checked` (lista con comas) | `[]` | Ids marcados (una rama marca lo que tiene dentro). |
+| `expanded` | `expanded` (lista o `all`) | `[]` | Ramas abiertas al empezar; `true` abre todas. |
+| `selected` | `selected` | — | Id seleccionado (sin casillas). |
+| `search` | `search` | `false` | Campo de búsqueda; un texto es su marcador. |
+| `label` | `label` | `'Árbol'` | Nombre accesible. |
+| `loadChildren(node)` | — | — | Hijos de un nodo con `hasChildren`, la primera vez que se abre. |
+| `renderLabel(node, element, query)` | — | — | Dibujar la etiqueta a mano (lo usan `json-viewer` y `file-explorer`). |
+| `searchText(node)` | — | la etiqueta | El texto donde busca la búsqueda. |
+| `onSelect(node)`, `onCheck(ids)`, `onExpand(node, abierto)` | — | — | Cada cambio. |
+
+## API y eventos
+
+`expand(id)`, `collapse(id)`, `toggle(id)`, `expandAll()`, `collapseAll()`, `reveal(id)` (abre lo que tiene encima y lo muestra), `select(id, notify = false)`, `setChecked(ids)`, `filter(texto)`, `setNodes(nodes)`, `focusItem(id)`, `selected`, `checked`, `expanded`, `element`, `destroy()`. Eventos `mk:select` con `{ id, node }`, `mk:check` con `{ checked }` y `mk:expand` con `{ id, expanded }`.
+
+## Teclado
+
+↑ ↓ mueven, → abre o entra, ← cierra o sube, Inicio y Fin van a los extremos, `*` abre las ramas hermanas, Intro selecciona, Espacio marca (o selecciona) y escribir salta a la etiqueta que empieza así. Desde la búsqueda, ↓ entra al árbol.
+
+## Accesibilidad
+
+Patrón de árbol de WAI-ARIA: `role="tree"` con `treeitem` que llevan `aria-level`, `aria-setsize`, `aria-posinset`, `aria-expanded`, `aria-selected` o `aria-checked` (`mixed` para el guion), y un solo elemento tabulable (tabindex móvil). Un estado discreto anuncia las coincidencias y cada casilla marcada. Con movimiento reducido las ramas se abren y la píldora salta sin animación.

package/src/components/tree-view/element.ts

@@ -0,0 +1,32 @@
+import { MkElement, defineElement, type OptionType } from '../../elements/base';
+import { createTreeView, type TreeNode, type TreeViewInstance } from './engine';
+
+/**
+ * <mk-tree-view class="mk-tree-view" checkable search
+ *   nodes='[{"id":"a","label":"Proyectos","children":[{"id":"a1","label":"Melon"}]}]'></mk-tree-view>
+ * Emits mk:select ({id, node}), mk:check ({checked}), mk:expand ({id, expanded}).
+ */
+export class MkTreeViewElement extends MkElement<TreeViewInstance> {
+  static options: Record<string, OptionType> = { nodes: 'json', checkable: 'boolean', checked: 'list', expanded: 'list', selected: 'string', search: 'string', 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;
+    const expanded = this.getAttribute('expanded') === 'all' ? true : options.expanded;
+    return createTreeView(this, { ...options, search, expanded } as Parameters<typeof createTreeView>[1]);
+  }
+
+  attributeChangedCallback(name: string, previous: string | null, next: string | null) {
+    if (previous === next || !this.instance) return;
+    if (name === 'nodes') {
+      try {
+        this.instance.setNodes(JSON.parse(next ?? '[]') as TreeNode[]);
+      } catch {
+        // Malformed JSON: keep the current nodes.
+      }
+    } else if (name === 'selected') this.instance.select(next);
+    else super.attributeChangedCallback(name, previous, next);
+  }
+}
+
+export const defineTreeView = () => defineElement('mk-tree-view', MkTreeViewElement);