@yewdiel21/motion-kit 0.10.0 → 0.14.0

package/src/components/file-explorer/engine.ts

@@ -0,0 +1,1307 @@
+import { gsap, EASE, Flip, registerMotion } from '../../core/gsap';
+import { reduced } from '../../core/reduced';
+import { createScope } from '../../core/scope';
+import { TIMING } from '../../core/timing';
+import { inert, type Instance } from '../../core/types';
+import { fromJson, safeFormat } from '../../core/dates';
+import { toTime } from '../../core/relative-time';
+import { cloneEntries, extensionOf, fileFamily, formatSize, isFolder, nameTaken, sortEntries, uniqueName, type FileEntry, type FileSort } from '../../core/files';
+import type { TreeNode } from '../../core/tree';
+import { blurIn, press, ringPulse, shake } from '../../motion/micro';
+import { slideIndicator } from '../../motion/indicator';
+import { createBreadcrumb } from '../breadcrumb/engine';
+import { createTreeView } from '../tree-view/engine';
+
+/*
+ * File explorer: folders and files with the folder tree on the side, the path
+ * as a breadcrumb and the folder's content as a list (name, size, date;
+ * sortable) or a grid of big icons. Opening a folder pushes the content aside:
+ * the old one slides out blurring while the new one slides in from the other
+ * side (.34 s; back goes the other way), and the tree and the breadcrumb
+ * follow. Switching between list and grid flies every icon to its new place
+ * (Flip, .5 s). Items select with a click (Ctrl/⌘ adds, Shift takes a range)
+ * on a soft accent; sorting glides them to their new order (layout reflow). A
+ * new folder grows in and asks for its name at once; renaming happens in place
+ * (a wrong name shakes); deleted items shrink out while the rest close the gap.
+ * Dragging items lifts a card with their count that follows the pointer and
+ * tilts with its speed; a folder under it (in the content, the tree or the
+ * breadcrumb) opens its lid, tree branches open after a moment, and dropping
+ * flies the card into it (on touch screens, after a long press). Keyboard:
+ * arrows (Shift extends), Ctrl/⌘+A, Enter opens, Backspace goes up, F2
+ * renames, Supr deletes, Ctrl/⌘+X and Ctrl/⌘+V move.
+ */
+
+export type { FileEntry, FileSort } from '../../core/files';
+export type FileView = 'list' | 'grid';
+
+export type FileChange =
+  | { type: 'create'; id: string; parent: string }
+  | { type: 'rename'; id: string; name: string }
+  | { type: 'delete'; ids: string[] }
+  | { type: 'move'; ids: string[]; to: string };
+
+export interface FileExplorerOptions {
+  /** What the top folder holds. */
+  files?: FileEntry[];
+  /** Name of the top folder (default 'Inicio'). */
+  rootLabel?: string;
+  /** The folder open at the start (default: the top one, '/'). */
+  folder?: string;
+  view?: FileView;
+  /** The folder tree beside the content (default true; it hides on narrow widths). */
+  tree?: boolean;
+  /** No new folders, renaming, deleting or moving (default false). */
+  readOnly?: boolean;
+  locale?: string;
+  /** Accessible name (default 'Explorador de archivos'). */
+  label?: string;
+  /** A file was opened (double click or Enter). */
+  onOpen?: (entry: FileEntry) => void;
+  onNavigate?: (folder: FileEntry) => void;
+  onSelectionChange?: (ids: string[]) => void;
+  onViewChange?: (view: FileView) => void;
+  /** After every change (new folder, rename, delete, move), with all the files. */
+  onChange?: (files: FileEntry[], change: FileChange) => void;
+}
+
+export interface FileExplorerInstance extends Instance {
+  /** Open a folder, or a file (its folder opens and onOpen is called). */
+  open(id: string): void;
+  up(): void;
+  setView(view: FileView): void;
+  select(ids: string[]): void;
+  /** A new folder in the open one; its name is asked for in place. Returns its id. */
+  createFolder(name?: string): string | null;
+  /** With a name, renames at once; without one, asks for it in place. */
+  rename(id: string, name?: string): void;
+  /** Deletes these entries (default: the selection). */
+  remove(ids?: string[]): void;
+  move(ids: string[], folder: string): void;
+  setFiles(files: FileEntry[]): void;
+  readonly files: FileEntry[];
+  /** The open folder's id ('/' for the top one). */
+  readonly folder: string;
+  readonly selection: string[];
+  readonly view: FileView;
+}
+
+export const ROOT_FOLDER = '/';
+
+const SVG = (paths: string) =>
+  `<svg aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">${paths}</svg>`;
+const ICONS = {
+  up: SVG('<path d="M12 19V5M6 11l6-6 6 6"/>'),
+  newFolder: SVG('<path d="M3 7.5A2.5 2.5 0 0 1 5.5 5h3.7l2 2h7.3A2.5 2.5 0 0 1 21 9.5v8a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17.5z"/><path d="M12 11v5M9.5 13.5h5"/>'),
+  rename: SVG('<path d="M4 20h4L18.5 9.5a2.1 2.1 0 0 0-3-3L5 17v3"/><path d="M14 7l3 3"/>'),
+  remove: SVG('<path d="M5 7h14M10 7V5h4v2M7 7l1 12h8l1-12"/>'),
+  list: SVG('<path d="M9 6h11M9 12h11M9 18h11M4.5 6h.01M4.5 12h.01M4.5 18h.01"/>'),
+  grid: SVG('<rect x="4" y="4" width="6.5" height="6.5" rx="1.5"/><rect x="13.5" y="4" width="6.5" height="6.5" rx="1.5"/><rect x="4" y="13.5" width="6.5" height="6.5" rx="1.5"/><rect x="13.5" y="13.5" width="6.5" height="6.5" rx="1.5"/>'),
+};
+const ARROW = '<svg aria-hidden="true" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="M12 19V5M6 11l6-6 6 6"/></svg>';
+const FOLDER =
+  '<svg aria-hidden="true" viewBox="0 0 48 40"><path data-mk-fx-folder-back d="M2 6a4 4 0 0 1 4-4h11.6a4 4 0 0 1 2.9 1.2L23.4 6H42a4 4 0 0 1 4 4v24a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4z"/><path data-mk-fx-folder-front d="M2 14a4 4 0 0 1 4-4h36a4 4 0 0 1 4 4v20a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4z"/></svg>';
+const PAGE =
+  '<svg aria-hidden="true" viewBox="0 0 40 48"><path data-mk-fx-page d="M7 2h18.5L37 13.5V42a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4V6a4 4 0 0 1 4-4z"/><path data-mk-fx-fold d="M25.5 2v8.5a3 3 0 0 0 3 3H37z"/></svg>';
+const SORT_LABEL: Record<FileSort, string> = { name: 'Nombre', size: 'Tamaño', modified: 'Modificado' };
+const plural = (n: number, one: string, many: string) => `${n} ${n === 1 ? one : many}`;
+let sequence = 0;
+
+/** A drawn icon: a folder in the accent, or a page tinted by the file's family with its extension on a tag. */
+function iconOf(entry: FileEntry) {
+  const icon = document.createElement('span');
+  icon.dataset.mkFxIcon = '';
+  icon.dataset.family = fileFamily(entry);
+  icon.innerHTML = isFolder(entry) ? FOLDER : PAGE;
+  const extension = isFolder(entry) ? '' : extensionOf(entry.name);
+  if (extension) {
+    const tag = document.createElement('span');
+    tag.dataset.mkFxExt = '';
+    tag.setAttribute('aria-hidden', 'true');
+    tag.textContent = extension.slice(0, 4).toUpperCase();
+    icon.append(tag);
+  }
+  return icon;
+}
+
+interface Located {
+  entry: FileEntry;
+  parent: FileEntry | null;
+  /** From the top folder to the entry, both included. */
+  path: FileEntry[];
+}
+
+interface DropTarget {
+  id: string;
+  where: 'pane' | 'tree' | 'crumbs';
+  element: HTMLElement;
+}
+
+interface Drag {
+  ids: string[];
+  origin: HTMLElement;
+  pointerId: number;
+  startX: number;
+  startY: number;
+  lastX: number;
+  touch: boolean;
+  /** Touch: the long press is over, the drag may start. */
+  armed: boolean;
+  started: boolean;
+  ghost: HTMLElement | null;
+  target: DropTarget | null;
+  follow: { x: (value: number) => void; y: (value: number) => void; tilt: (value: number) => void } | null;
+  timers: ReturnType<typeof setTimeout>[];
+}
+
+export function createFileExplorer(root: HTMLElement | null, options: FileExplorerOptions = {}): FileExplorerInstance {
+  if (!root) {
+    return inert({
+      open() {}, up() {}, setView() {}, select() {}, createFolder: () => null, rename() {}, remove() {}, move() {}, setFiles() {},
+      files: [], folder: ROOT_FOLDER, selection: [], view: 'list' as FileView,
+    });
+  }
+  registerMotion();
+  const scope = createScope();
+  const uid = `mk-fx-${++sequence}`;
+  const locale = options.locale ?? root.closest('[lang]')?.getAttribute('lang') ?? 'es';
+  const readOnly = Boolean(options.readOnly);
+  const top: FileEntry = { id: ROOT_FOLDER, name: options.rootLabel ?? 'Inicio', kind: 'folder', children: cloneEntries(fromJson(options.files) ?? []) };
+  let located = new Map<string, Located>();
+  const reindex = () => {
+    located = new Map();
+    const visit = (entry: FileEntry, parent: FileEntry | null, path: FileEntry[]) => {
+      const here = [...path, entry];
+      located.set(entry.id, { entry, parent, path: here });
+      for (const child of entry.children ?? []) visit(child, entry, here);
+    };
+    visit(top, null, []);
+  };
+  reindex();
+  const folderOf = (id: string | null | undefined) => {
+    const found = id ? located.get(id) : undefined;
+    return found && isFolder(found.entry) ? found.entry : null;
+  };
+  let current = folderOf(options.folder) ?? top;
+  let view: FileView = options.view === 'grid' ? 'grid' : 'list';
+  let sort: { key: FileSort; direction: 1 | -1 } = { key: 'name', direction: 1 };
+  let selection = new Set<string>();
+  let anchor: string | null = null;
+  let focusId: string | null = null;
+  let cut: string[] = [];
+  let renaming: { id: string; finish: (save: boolean) => boolean } | null = null;
+  let renders = 0;
+  let created = 0;
+  const effects = new Set<gsap.core.Animation>();
+  const keep = (animation: gsap.core.Animation | null) => {
+    if (!animation) return;
+    effects.add(animation);
+    // Finished ones leave as new ones arrive: the animation's own onComplete stays untouched.
+    for (const effect of effects) if (effect.totalProgress() === 1) effects.delete(effect);
+  };
+
+  // ── The parts ────────────────────────────────────────────────────────────
+  const bar = document.createElement('div');
+  bar.dataset.mkFxBar = '';
+  const crumbsHost = document.createElement('div');
+  crumbsHost.className = 'mk-breadcrumb';
+  crumbsHost.dataset.mkFxCrumbs = '';
+  const tools = document.createElement('div');
+  tools.dataset.mkFxTools = '';
+  const tool = (name: string, label: string, icon: string, text?: string) => {
+    const button = document.createElement('button');
+    button.type = 'button';
+    button.dataset.mkFxTool = name;
+    button.setAttribute('aria-label', label);
+    button.title = label;
+    button.innerHTML = icon;
+    if (text) {
+      const span = document.createElement('span');
+      span.textContent = text;
+      button.append(span);
+    }
+    return button;
+  };
+  const upButton = tool('up', 'Subir un nivel', ICONS.up);
+  const newButton = tool('new', 'Nueva carpeta', ICONS.newFolder, 'Nueva carpeta');
+  const renameButton = tool('rename', 'Renombrar (F2)', ICONS.rename);
+  const removeButton = tool('remove', 'Eliminar (Supr)', ICONS.remove);
+  const views = document.createElement('div');
+  views.dataset.mkFxViews = '';
+  views.setAttribute('role', 'radiogroup');
+  views.setAttribute('aria-label', 'Vista');
+  const indicator = document.createElement('span');
+  indicator.dataset.mkFxViewIndicator = '';
+  indicator.setAttribute('aria-hidden', 'true');
+  const viewButton = (name: FileView, label: string, icon: string) => {
+    const button = document.createElement('button');
+    button.type = 'button';
+    button.dataset.view = name;
+    button.setAttribute('role', 'radio');
+    button.setAttribute('aria-label', label);
+    button.title = label;
+    button.innerHTML = icon;
+    return button;
+  };
+  const listButton = viewButton('list', 'Lista', ICONS.list);
+  const gridButton = viewButton('grid', 'Cuadrícula', ICONS.grid);
+  views.append(indicator, listButton, gridButton);
+  tools.append(upButton);
+  if (!readOnly) tools.append(newButton, renameButton, removeButton);
+  tools.append(views);
+  bar.append(crumbsHost, tools);
+
+  const body = document.createElement('div');
+  body.dataset.mkFxBody = '';
+  const side = document.createElement('div');
+  side.className = 'mk-tree-view';
+  side.dataset.mkFxSide = '';
+  const main = document.createElement('div');
+  main.dataset.mkFxMain = '';
+  const head = document.createElement('div');
+  head.dataset.mkFxHead = '';
+  head.setAttribute('role', 'group');
+  head.setAttribute('aria-label', 'Ordenar');
+  head.append(document.createElement('span'));
+  const sortButtons = (['name', 'size', 'modified'] as FileSort[]).map((key) => {
+    const button = document.createElement('button');
+    button.type = 'button';
+    button.dataset.sort = key;
+    const text = document.createElement('span');
+    text.textContent = SORT_LABEL[key];
+    button.append(text);
+    button.insertAdjacentHTML('beforeend', ARROW);
+    head.append(button);
+    return button;
+  });
+  const pane = document.createElement('div');
+  pane.dataset.mkFxPane = '';
+  const list = document.createElement('div');
+  list.id = `${uid}-items`;
+  list.dataset.mkFxItems = '';
+  list.setAttribute('role', 'listbox');
+  list.setAttribute('aria-multiselectable', 'true');
+  const empty = document.createElement('p');
+  empty.dataset.mkFxEmpty = '';
+  empty.textContent = 'Esta carpeta está vacía';
+  pane.append(list, empty);
+  main.append(head, pane);
+  if (options.tree !== false) body.append(side);
+  body.append(main);
+  const footer = document.createElement('div');
+  footer.dataset.mkFxStatus = '';
+  const count = document.createElement('span');
+  count.dataset.mkFxCount = '';
+  const note = document.createElement('span');
+  note.id = `${uid}-note`;
+  note.dataset.mkFxNote = '';
+  footer.append(count, note);
+  const status = document.createElement('span');
+  status.className = 'mk-sr-only';
+  status.setAttribute('role', 'status');
+  root.append(bar, body, footer, status);
+  const leavingCopies = new Set<HTMLElement>();
+  scope.add(() => {
+    for (const effect of effects) effect.kill();
+    effects.clear();
+    for (const copy of leavingCopies) copy.remove();
+    bar.remove();
+    body.remove();
+    footer.remove();
+    status.remove();
+  });
+  scope.attr(root, 'data-mk-ready', '');
+  scope.attr(root, 'data-mk-view', view);
+  scope.attr(root, 'role', 'region');
+  scope.attr(root, 'aria-label', options.label ?? 'Explorador de archivos');
+  if (options.tree !== false) scope.attr(root, 'data-mk-fx-tree', '');
+  if (readOnly) scope.attr(root, 'data-mk-readonly', '');
+
+  // ── The breadcrumb and the folder tree ───────────────────────────────────
+  const pathOf = (folder: FileEntry) => located.get(folder.id)?.path ?? [top];
+  const crumbItems = () => pathOf(current).map((folder, i, path) => ({ label: folder.name, href: i < path.length - 1 ? '#' : undefined }));
+  const crumbs = createBreadcrumb(crumbsHost, {
+    items: crumbItems(),
+    label: 'Ruta de la carpeta',
+    onNavigate: (_item, index, event) => {
+      event.preventDefault();
+      const target = pathOf(current)[index];
+      if (target) navigate(target.id, { from: pathOf(current)[index + 1]?.id });
+    },
+  });
+  // Listeners on the explorer hear its own events, not those of its parts.
+  scope.on(crumbsHost, 'mk:navigate', (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+  });
+  let shownCrumbs = JSON.stringify(crumbItems());
+  const paintCrumbs = () => {
+    const items = crumbItems();
+    const next = JSON.stringify(items);
+    if (next === shownCrumbs) return;
+    shownCrumbs = next;
+    crumbs.setItems(items);
+  };
+
+  let collator: Intl.Collator;
+  try {
+    collator = new Intl.Collator(locale, { numeric: true, sensitivity: 'base' });
+  } catch {
+    collator = new Intl.Collator(undefined, { numeric: true, sensitivity: 'base' });
+  }
+  const treeNodes = (): TreeNode[] => {
+    const toNode = (folder: FileEntry): TreeNode => ({
+      id: folder.id,
+      label: folder.name,
+      children: (folder.children ?? [])
+        .filter(isFolder)
+        .sort((a, b) => collator.compare(a.name, b.name))
+        .map(toNode),
+    });
+    return [toNode(top)];
+  };
+  const tree =
+    options.tree === false
+      ? null
+      : createTreeView(side, {
+          nodes: treeNodes(),
+          expanded: pathOf(current).map((folder) => folder.id),
+          selected: current.id,
+          label: 'Carpetas',
+          renderLabel: (node, element) => {
+            const name = document.createElement('span');
+            name.dataset.mkFxTreeName = '';
+            name.textContent = node.label;
+            element.append(iconOf({ id: node.id, name: node.label, kind: 'folder' }), name);
+          },
+          onSelect: (node) => navigate(node.id),
+        });
+  for (const type of ['mk:select', 'mk:expand', 'mk:check']) scope.on(side, type, (event) => event.stopPropagation());
+  scope.add(() => {
+    tree?.destroy();
+    crumbs.destroy();
+  });
+  const paintTree = (nodes: boolean) => {
+    if (!tree) return;
+    if (nodes) tree.setNodes(treeNodes());
+    for (const folder of pathOf(current).slice(0, -1)) if (!tree.expanded.includes(folder.id)) tree.expand(folder.id);
+    tree.select(current.id);
+  };
+
+  // ── Drawing the content ──────────────────────────────────────────────────
+  const dateFormat = safeFormat(locale, { day: 'numeric', month: 'short', year: 'numeric' });
+  const countText = (n: number) => (n ? plural(n, 'elemento', 'elementos') : 'Vacía');
+  const items = () => [...list.querySelectorAll<HTMLElement>(':scope > [data-mk-fx-item]')];
+  const itemOf = (id: string) => items().find((item) => item.dataset.id === id) ?? null;
+  const inCurrent = (id: string) => located.get(id)?.parent === current;
+
+  const itemElement = (entry: FileEntry) => {
+    const folder = isFolder(entry);
+    const item = document.createElement('div');
+    item.dataset.mkFxItem = '';
+    item.dataset.id = entry.id;
+    item.dataset.kind = folder ? 'folder' : 'file';
+    item.setAttribute('role', 'option');
+    item.setAttribute('aria-selected', String(selection.has(entry.id)));
+    item.tabIndex = -1;
+    if (cut.includes(entry.id)) item.setAttribute('data-mk-fx-cut', '');
+    const name = document.createElement('span');
+    name.dataset.mkFxName = '';
+    name.textContent = entry.name;
+    name.title = entry.name;
+    const size = document.createElement('span');
+    size.dataset.mkFxSize = '';
+    size.textContent = folder ? countText(entry.children?.length ?? 0) : entry.size === undefined ? '—' : formatSize(entry.size, locale);
+    const date = toTime(entry.modified);
+    const modified = document.createElement('span');
+    modified.dataset.mkFxDate = '';
+    modified.textContent = date ? dateFormat.format(date) : '—';
+    item.setAttribute('aria-label', [entry.name, folder ? `carpeta, ${size.textContent.toLowerCase()}` : size.textContent, date ? modified.textContent : ''].filter((part) => part && part !== '—').join(', '));
+    item.append(iconOf(entry), name, size, modified);
+    return item;
+  };
+
+  const paintTools = () => {
+    upButton.disabled = current === top;
+    renameButton.disabled = selection.size !== 1;
+    removeButton.disabled = selection.size === 0;
+  };
+  let error: string | null = null;
+  const paintStatus = () => {
+    count.textContent = plural(current.children?.length ?? 0, 'elemento', 'elementos');
+    note.toggleAttribute('data-mk-fx-error', Boolean(error));
+    if (error) {
+      note.textContent = error;
+      return;
+    }
+    const chosen = [...selection].map((id) => located.get(id)?.entry).filter((entry): entry is FileEntry => Boolean(entry));
+    const bytes = chosen.reduce((sum, entry) => sum + (isFolder(entry) ? 0 : entry.size ?? 0), 0);
+    note.textContent = chosen.length
+      ? `${plural(chosen.length, 'seleccionado', 'seleccionados')}${bytes ? ` · ${formatSize(bytes, locale)}` : ''}`
+      : cut.length
+        ? `${plural(cut.length, 'cortado', 'cortados')} · pega con Ctrl+V en otra carpeta`
+        : '';
+  };
+  const paintSort = () => {
+    for (const button of sortButtons) {
+      const key = button.dataset.sort as FileSort;
+      const active = key === sort.key;
+      button.toggleAttribute('data-active', active);
+      button.dataset.direction = active && sort.direction === -1 ? 'desc' : 'asc';
+      button.setAttribute('aria-label', active ? `${SORT_LABEL[key]}, orden ${sort.direction === 1 ? 'ascendente' : 'descendente'}` : `Ordenar por ${SORT_LABEL[key].toLowerCase()}`);
+    }
+  };
+
+  /** One item can take the focus (Tab): the focused one, else the first selected, else the first. */
+  const roving = () => {
+    const all = items();
+    const target = (focusId && all.find((item) => item.dataset.id === focusId)) || all.find((item) => selection.has(item.dataset.id!)) || all[0];
+    for (const item of all) item.tabIndex = item === target ? 0 : -1;
+    // An empty folder still takes the focus, so the keyboard can go up or make a folder.
+    list.tabIndex = all.length ? -1 : 0;
+  };
+
+  const renderPane = () => {
+    renders++;
+    renaming?.finish(false);
+    const active = document.activeElement;
+    const hadFocus = Boolean(active && (list === active || list.contains(active)));
+    for (const id of selection) if (!inCurrent(id)) selection.delete(id);
+    list.replaceChildren(...sortEntries(current.children ?? [], sort.key, sort.direction, locale).map(itemElement));
+    list.setAttribute('aria-label', `Contenido de ${current.name}`);
+    empty.hidden = (current.children?.length ?? 0) > 0;
+    roving();
+    paintStatus();
+    paintTools();
+    if (hadFocus && !list.contains(document.activeElement)) (items().find((item) => item.tabIndex === 0) ?? list).focus({ preventScroll: true });
+  };
+
+  /** Redraw with `change`: what stays glides to its new place, the `entering` ids grow in. */
+  const reflow = (change: () => void, entering: string[] = []) => {
+    const before = items();
+    for (const item of before) item.dataset.flipId = item.dataset.id;
+    const state = reduced() || !before.length || before.length > 240 ? null : Flip.getState(before);
+    change();
+    const after = items();
+    for (const item of after) item.dataset.flipId = item.dataset.id;
+    if (!state) {
+      if (!reduced()) keep(blurIn(after.filter((item) => entering.includes(item.dataset.id!)), { from: 'pop', stagger: 0.04 }));
+      return;
+    }
+    keep(
+      Flip.from(state, {
+        targets: after,
+        duration: TIMING.layoutTravel,
+        ease: EASE.layoutReflow,
+        // A beat late: the others make room first.
+        onEnter: (arriving) =>
+          gsap.fromTo(arriving, { opacity: 0, scale: 0.8, filter: 'blur(8px)' }, { opacity: 1, scale: 1, filter: 'blur(0px)', duration: 0.42, delay: 0.1, stagger: 0.04, ease: EASE.pop, clearProps: 'opacity,transform,filter' }),
+      }),
+    );
+  };
+
+  // ── Selection ────────────────────────────────────────────────────────────
+  const sameIds = (a: Iterable<string>, b: Set<string>) => {
+    const list = [...a];
+    return list.length === b.size && list.every((id) => b.has(id));
+  };
+  const announceSelection = () => {
+    const ids = [...selection];
+    options.onSelectionChange?.(ids);
+    root.dispatchEvent(new CustomEvent('mk:select', { bubbles: true, detail: { ids } }));
+  };
+  const setSelection = (ids: Iterable<string>, notify = true) => {
+    const next = new Set([...ids].filter(inCurrent));
+    const changed = !sameIds(next, selection);
+    selection = next;
+    for (const item of items()) item.setAttribute('aria-selected', String(selection.has(item.dataset.id!)));
+    paintStatus();
+    paintTools();
+    if (changed && notify) announceSelection();
+  };
+  const selectRange = (from: string, to: string, add: boolean) => {
+    const order = items().map((item) => item.dataset.id!);
+    const a = order.indexOf(from);
+    const b = order.indexOf(to);
+    if (a < 0 || b < 0) return setSelection([to]);
+    const range = order.slice(Math.min(a, b), Math.max(a, b) + 1);
+    setSelection(add ? [...selection, ...range] : range);
+  };
+  /** Scroll the content (up and down only: an item still sliding in must not scroll it sideways) to show `item`. */
+  const revealItem = (item: HTMLElement | null) => {
+    if (!item) return;
+    const top = item.offsetTop;
+    const bottom = top + item.offsetHeight;
+    if (top < pane.scrollTop) pane.scrollTop = Math.max(0, top - 6);
+    else if (bottom > pane.scrollTop + pane.clientHeight) pane.scrollTop = bottom - pane.clientHeight + 6;
+  };
+  const focusItem = (id: string | null) => {
+    focusId = id;
+    roving();
+    const item = id ? itemOf(id) : null;
+    item?.focus({ preventScroll: true });
+    revealItem(item);
+  };
+
+  // ── Going places ─────────────────────────────────────────────────────────
+  const navigate = (id: string, { from, focus = false }: { from?: string; focus?: boolean } = {}) => {
+    const folder = folderOf(id);
+    if (!folder || folder === current) return;
+    renaming?.finish(false);
+    const forward = pathOf(folder).length >= pathOf(current).length;
+    const active = document.activeElement;
+    const focusInside = focus || Boolean(active && (list === active || list.contains(active)));
+    // The old content leaves as a copy while the new one comes in from the other side.
+    let copy: HTMLElement | null = null;
+    if (!reduced() && list.childElementCount && list.childElementCount <= 240) {
+      copy = list.cloneNode(true) as HTMLElement;
+      copy.removeAttribute('id');
+      copy.removeAttribute('role');
+      copy.setAttribute('aria-hidden', 'true');
+      copy.inert = true;
+      copy.dataset.mkFxLeaving = '';
+      copy.style.top = `${list.offsetTop - pane.scrollTop}px`;
+      copy.style.left = `${list.offsetLeft}px`;
+      copy.style.width = `${list.offsetWidth}px`;
+    }
+    current = folder;
+    const back = from && inCurrent(from) ? from : null;
+    const before = [...selection];
+    selection = new Set(back ? [back] : []);
+    anchor = back;
+    focusId = back;
+    cut = cut.filter((cutId) => located.has(cutId));
+    error = null;
+    renderPane();
+    pane.scrollTop = 0;
+    if (copy) {
+      pane.append(copy);
+      leavingCopies.add(copy);
+      const gone = copy;
+      // The old content fades fast while it slides away; the new one follows a beat later.
+      keep(
+        gsap
+          .timeline({
+            onComplete: () => {
+              gone.remove();
+              leavingCopies.delete(gone);
+            },
+          })
+          .to(gone, { x: forward ? -32 : 32, duration: 0.26, ease: 'power2.in' }, 0)
+          .to(gone, { opacity: 0, filter: 'blur(6px)', duration: 0.16, ease: 'power1.out' }, 0),
+      );
+      keep(gsap.fromTo(list, { x: forward ? 32 : -32, opacity: 0, filter: 'blur(6px)' }, { x: 0, opacity: 1, filter: 'blur(0px)', duration: 0.34, delay: 0.07, ease: EASE.signature, clearProps: 'transform,opacity,filter' }));
+    } else if (!reduced()) keep(blurIn(items().slice(0, 24), { from: 'soft', stagger: 0.02, duration: 0.3 }));
+    paintCrumbs();
+    paintTree(false);
+    if (focusInside) focusItem(back ?? items()[0]?.dataset.id ?? null);
+    if (focusInside && !items().length) list.focus({ preventScroll: true });
+    status.textContent = `${folder.name}: ${countText(folder.children?.length ?? 0).toLowerCase()}`;
+    if (back) revealItem(itemOf(back));
+    options.onNavigate?.(folder);
+    root.dispatchEvent(new CustomEvent('mk:navigate', { bubbles: true, detail: { id: folder.id, folder } }));
+    if (!sameIds(before, selection)) announceSelection();
+  };
+  const goUp = (focus = false) => {
+    const parent = located.get(current.id)?.parent;
+    if (parent) navigate(parent.id, { from: current.id, focus });
+  };
+
+  const openEntry = (id: string, focus = false) => {
+    const found = located.get(id);
+    if (!found) return;
+    if (isFolder(found.entry)) return navigate(id, { focus });
+    keep(press(itemOf(id)?.querySelector('[data-mk-fx-icon]')));
+    const entry = { ...found.entry };
+    options.onOpen?.(entry);
+    root.dispatchEvent(new CustomEvent('mk:open', { bubbles: true, detail: { id, entry } }));
+  };
+
+  // ── Changing the files ───────────────────────────────────────────────────
+  /** After the data changed: redraw (the `leaving` items shrink out first), update the tree and tell the app. */
+  const commit = (change: FileChange, { leaving = [], entering = [] }: { leaving?: string[]; entering?: string[] } = {}) => {
+    reindex();
+    cut = cut.filter((id) => located.has(id));
+    const gone = leaving.map(itemOf).filter((item): item is HTMLElement => Boolean(item));
+    const redraw = () => reflow(renderPane, entering);
+    if (gone.length && !reduced()) {
+      const at = renders;
+      for (const item of gone) item.setAttribute('data-mk-fx-gone', '');
+      keep(
+        gsap.to(gone, {
+          opacity: 0,
+          scale: 0.85,
+          filter: 'blur(6px)',
+          duration: 0.22,
+          ease: 'power2.in',
+          // Unless something else drew the content meanwhile.
+          onComplete: () => (renders === at && !scope.disposed ? redraw() : undefined),
+        }),
+      );
+      paintStatus();
+      paintTools();
+    } else redraw();
+    paintCrumbs();
+    paintTree(true);
+    const files = cloneEntries(top.children ?? []);
+    options.onChange?.(files, change);
+    root.dispatchEvent(new CustomEvent('mk:change', { bubbles: true, detail: { files, change } }));
+  };
+
+  const createFolder = (name = 'Nueva carpeta') => {
+    if (readOnly || scope.disposed) return null;
+    renaming?.finish(true);
+    const entry: FileEntry = { id: `${uid}-${Date.now().toString(36)}-${++created}`, name: uniqueName(name, current.children ?? []), kind: 'folder', children: [], modified: new Date().toISOString() };
+    (current.children ??= []).push(entry);
+    reindex();
+    selection = new Set([entry.id]);
+    anchor = entry.id;
+    focusId = entry.id;
+    status.textContent = `Carpeta «${entry.name}» creada`;
+    commit({ type: 'create', id: entry.id, parent: current.id }, { entering: [entry.id] });
+    revealItem(itemOf(entry.id));
+    startRename(entry.id);
+    return entry.id;
+  };
+
+  const problemWith = (name: string, entry: FileEntry) => {
+    const parent = located.get(entry.id)?.parent;
+    if (!name) return 'Escribe un nombre';
+    if (/[\\/]/.test(name)) return 'El nombre no puede llevar / ni \\';
+    if (parent && nameTaken(name, parent.children ?? [], entry.id)) return `Ya existe «${name}» en esta carpeta`;
+    return null;
+  };
+  const applyName = (entry: FileEntry, name: string) => {
+    entry.name = name;
+    status.textContent = `Renombrado a «${name}»`;
+    commit({ type: 'rename', id: entry.id, name });
+    const renamed = itemOf(entry.id);
+    if (renamed && !reduced()) keep(blurIn(renamed.querySelector('[data-mk-fx-name]'), { from: 'soft', duration: 0.35 }));
+  };
+
+  const startRename = (id: string) => {
+    if (readOnly) return;
+    renaming?.finish(true);
+    const entry = located.get(id)?.entry;
+    const item = itemOf(id);
+    if (!entry || !item || entry === top) return;
+    const name = item.querySelector<HTMLElement>('[data-mk-fx-name]')!;
+    const input = document.createElement('input');
+    input.type = 'text';
+    input.dataset.mkFxRename = '';
+    input.value = entry.name;
+    input.spellcheck = false;
+    input.setAttribute('aria-label', `Nuevo nombre de ${entry.name}`);
+    input.setAttribute('aria-describedby', note.id);
+    name.hidden = true;
+    name.after(input);
+    item.setAttribute('data-mk-fx-renaming', '');
+    input.focus();
+    // The name without its extension is what people change.
+    const dot = isFolder(entry) ? -1 : entry.name.lastIndexOf('.');
+    input.setSelectionRange(0, dot > 0 ? dot : entry.name.length);
+    const finish = (save: boolean) => {
+      if (renaming?.id !== id) return true;
+      // Redrawn under it: nothing to keep.
+      if (!input.isConnected) {
+        renaming = null;
+        error = null;
+        return true;
+      }
+      const next = input.value.trim();
+      if (save && next !== entry.name) {
+        const problem = problemWith(next, entry);
+        if (problem) {
+          error = problem;
+          paintStatus();
+          status.textContent = problem;
+          input.setAttribute('aria-invalid', 'true');
+          keep(shake(input));
+          return false;
+        }
+      }
+      renaming = null;
+      error = null;
+      input.remove();
+      name.hidden = false;
+      item.removeAttribute('data-mk-fx-renaming');
+      paintStatus();
+      if (save && next !== entry.name) applyName(entry, next);
+      focusItem(id);
+      return true;
+    };
+    renaming = { id, finish };
+    input.addEventListener('keydown', (event) => {
+      event.stopPropagation();
+      if (event.key === 'Enter') {
+        event.preventDefault();
+        finish(true);
+      } else if (event.key === 'Escape') {
+        event.preventDefault();
+        finish(false);
+      }
+    });
+    input.addEventListener('input', () => {
+      if (!error) return;
+      error = null;
+      input.removeAttribute('aria-invalid');
+      paintStatus();
+    });
+    // Leaving the field keeps a good name and drops a wrong one.
+    input.addEventListener('blur', () => {
+      if (!finish(true)) finish(false);
+    });
+    for (const type of ['click', 'dblclick', 'pointerdown']) input.addEventListener(type, (event) => event.stopPropagation());
+  };
+
+  const removeEntries = (ids: string[]) => {
+    if (readOnly) return;
+    renaming?.finish(false);
+    const found = [...new Set(ids)].map((id) => located.get(id)).filter((entry): entry is Located => Boolean(entry?.parent));
+    if (!found.length) return;
+    const order = items().map((item) => item.dataset.id!);
+    const firstGone = Math.min(...found.map(({ entry }) => order.indexOf(entry.id)).filter((i) => i >= 0));
+    for (const { entry, parent } of found) parent!.children = (parent!.children ?? []).filter((child) => child !== entry);
+    const removed = found.map(({ entry }) => entry.id);
+    reindex();
+    // The open folder went with them: the closest folder left opens.
+    if (!located.has(current.id)) {
+      const survivor = [...pathOf(current)].reverse().find((folder) => located.has(folder.id)) ?? top;
+      current = survivor;
+    }
+    // The focus goes to what takes the place of the first one deleted.
+    const left = order.filter((id) => !removed.includes(id));
+    focusId = Number.isFinite(firstGone) ? (left[Math.min(firstGone, left.length - 1)] ?? null) : focusId;
+    const hadSelection = selection.size > 0;
+    selection = new Set();
+    status.textContent = found.length === 1 ? `«${found[0]!.entry.name}» eliminado` : `${found.length} elementos eliminados`;
+    commit({ type: 'delete', ids: removed }, { leaving: removed });
+    if (hadSelection) announceSelection();
+  };
+
+  /** Can `ids` go into `folderId`? Not into themselves, not into their own insides, not where they are. */
+  const canMove = (ids: string[], folderId: string) => {
+    if (readOnly || !ids.length) return false;
+    const folder = folderOf(folderId);
+    if (!folder) return false;
+    const path = pathOf(folder).map((entry) => entry.id);
+    return ids.every((id) => {
+      const found = located.get(id);
+      return Boolean(found?.parent) && !path.includes(id) && found!.parent!.id !== folderId;
+    });
+  };
+  const moveEntries = (ids: string[], folderId: string) => {
+    if (!canMove(ids, folderId)) return false;
+    renaming?.finish(false);
+    const folder = folderOf(folderId)!;
+    const leaving = ids.filter(inCurrent);
+    for (const id of ids) {
+      const { entry, parent } = located.get(id)!;
+      parent!.children = (parent!.children ?? []).filter((child) => child !== entry);
+      entry.name = uniqueName(entry.name, folder.children ?? []);
+      (folder.children ??= []).push(entry);
+    }
+    cut = cut.filter((id) => !ids.includes(id));
+    const arriving = folder === current;
+    const before = [...selection];
+    if (arriving) {
+      selection = new Set(ids);
+      anchor = ids[0] ?? null;
+      focusId = anchor;
+    } else selection = new Set([...selection].filter((id) => !ids.includes(id)));
+    const names = ids.map((id) => located.get(id)!.entry.name);
+    status.textContent = ids.length === 1 ? `«${names[0]}» movido a «${folder.name}»` : `${ids.length} elementos movidos a «${folder.name}»`;
+    commit({ type: 'move', ids: [...ids], to: folderId }, { leaving, entering: arriving ? ids : [] });
+    if (arriving) focusItem(anchor);
+    if (!sameIds(before, selection)) announceSelection();
+    return true;
+  };
+
+  // ── Pointer: select, open, drag ──────────────────────────────────────────
+  let suppressClick = false;
+  scope.on(pane, 'click', (event) => {
+    if (suppressClick) return;
+    const mouse = event as MouseEvent;
+    const item = (mouse.target as Element | null)?.closest<HTMLElement>('[data-mk-fx-item]');
+    if (!item || !list.contains(item)) {
+      if (selection.size && !mouse.ctrlKey && !mouse.metaKey) setSelection([]);
+      return;
+    }
+    const id = item.dataset.id!;
+    if (mouse.shiftKey && anchor) selectRange(anchor, id, mouse.ctrlKey || mouse.metaKey);
+    else if (mouse.ctrlKey || mouse.metaKey) {
+      setSelection(selection.has(id) ? [...selection].filter((chosen) => chosen !== id) : [...selection, id]);
+      anchor = id;
+    } else {
+      const fresh = !selection.has(id);
+      setSelection([id]);
+      anchor = id;
+      if (fresh && !reduced()) keep(gsap.fromTo(item, { scale: 0.97 }, { scale: 1, duration: 0.35, ease: EASE.click, clearProps: 'transform' }));
+    }
+    focusItem(id);
+  });
+  scope.on(list, 'dblclick', (event) => {
+    const item = (event.target as Element | null)?.closest<HTMLElement>('[data-mk-fx-item]');
+    if (item) openEntry(item.dataset.id!, true);
+  });
+
+  let drag: Drag | null = null;
+  const dropTargetAt = (x: number, y: number, ids: string[]): DropTarget | null => {
+    const under = document.elementFromPoint?.(x, y) ?? null;
+    if (!under) return null;
+    let target: DropTarget | null = null;
+    const paneFolder = under.closest<HTMLElement>('[data-mk-fx-item][data-kind="folder"]');
+    if (paneFolder && list.contains(paneFolder)) target = { id: paneFolder.dataset.id!, where: 'pane', element: paneFolder };
+    const treeItem = !target && tree ? under.closest<HTMLElement>('[role="treeitem"]') : null;
+    if (treeItem && side.contains(treeItem)) target = { id: treeItem.dataset.id!, where: 'tree', element: treeItem.querySelector<HTMLElement>(':scope > [data-mk-tree-row]') ?? treeItem };
+    const link = !target ? under.closest<HTMLElement>('a[data-mk-crumb-link]') : null;
+    if (link && crumbsHost.contains(link)) {
+      const folder = pathOf(current)[Number(link.dataset.mkIndex)];
+      if (folder) target = { id: folder.id, where: 'crumbs', element: link };
+    }
+    return target && canMove(ids, target.id) ? target : null;
+  };
+  /** The element a drop target is drawn by now (the content and the tree are redrawn by a move). */
+  const elementFor = (target: DropTarget) => {
+    if (target.where === 'pane') return itemOf(target.id);
+    if (target.where === 'tree') return [...side.querySelectorAll<HTMLElement>('[role="treeitem"]')].find((item) => item.dataset.id === target.id)?.querySelector<HTMLElement>(':scope > [data-mk-tree-row]') ?? null;
+    return target.element.isConnected ? target.element : null;
+  };
+
+  const lift = (x: number, y: number) => {
+    if (!drag) return;
+    drag.started = true;
+    if (!selection.has(drag.ids[0]!) || drag.ids.length === 1) setSelection(drag.ids);
+    const first = located.get(drag.ids[0]!)!.entry;
+    const ghost = document.createElement('div');
+    ghost.dataset.mkFxGhost = '';
+    ghost.setAttribute('aria-hidden', 'true');
+    const name = document.createElement('span');
+    name.textContent = drag.ids.length === 1 ? first.name : `${first.name} y ${plural(drag.ids.length - 1, 'más', 'más')}`;
+    ghost.append(iconOf(first), name);
+    if (drag.ids.length > 1) {
+      const badge = document.createElement('span');
+      badge.dataset.mkFxGhostCount = '';
+      badge.textContent = String(drag.ids.length);
+      ghost.append(badge);
+    }
+    root.append(ghost);
+    // In the top layer when it can be, so no transform or overflow around the explorer moves or clips it.
+    if (typeof ghost.showPopover === 'function') {
+      ghost.popover = 'manual';
+      try {
+        ghost.showPopover();
+      } catch {
+        // Not connected or not supported: it stays a fixed element.
+      }
+    }
+    drag.ghost = ghost;
+    gsap.set(ghost, { x: x + 14, y: y + 12 });
+    if (reduced()) drag.follow = { x: (value) => gsap.set(ghost, { x: value }), y: (value) => gsap.set(ghost, { y: value }), tilt: () => {} };
+    else {
+      keep(gsap.fromTo(ghost, { opacity: 0, scale: 0.85 }, { opacity: 1, scale: 1, duration: 0.18, ease: 'power2.out' }));
+      drag.follow = {
+        x: gsap.quickTo(ghost, 'x', { duration: 0.28, ease: 'power3.out' }),
+        y: gsap.quickTo(ghost, 'y', { duration: 0.28, ease: 'power3.out' }),
+        tilt: gsap.quickTo(ghost, 'rotation', { duration: 0.4, ease: 'power2.out' }),
+      };
+    }
+    for (const id of drag.ids) itemOf(id)?.setAttribute('data-mk-fx-dragging', '');
+    root.setAttribute('data-mk-fx-dnd', '');
+    status.textContent = `${plural(drag.ids.length, 'elemento', 'elementos')} en arrastre. Suelta sobre una carpeta; Escape cancela.`;
+  };
+
+  const hover = (x: number, y: number) => {
+    if (!drag) return;
+    const target = dropTargetAt(x, y, drag.ids);
+    if (target?.element === drag.target?.element) return;
+    drag.target?.element.removeAttribute('data-mk-fx-drop');
+    drag.target = target;
+    if (!target) return;
+    target.element.setAttribute('data-mk-fx-drop', '');
+    // A closed branch of the tree opens after a moment under the card.
+    const item = target.where === 'tree' ? target.element.closest<HTMLElement>('[role="treeitem"]') : null;
+    if (item?.getAttribute('aria-expanded') === 'false') {
+      const id = target.id;
+      drag.timers.push(setTimeout(() => (drag?.target?.id === id ? tree?.expand(id) : undefined), 700));
+    }
+  };
+
+  const autoScroll = (y: number) => {
+    const box = pane.getBoundingClientRect();
+    if (y < box.top + 36) pane.scrollTop -= 12;
+    else if (y > box.bottom - 36) pane.scrollTop += 12;
+  };
+
+  const stopListening = () => {
+    window.removeEventListener('pointermove', onMove);
+    window.removeEventListener('pointerup', onUp);
+    window.removeEventListener('pointercancel', onCancel);
+    window.removeEventListener('keydown', onKey, true);
+  };
+  /** The drag ends: the card flies into its folder, or back where it came from. */
+  const land = (dropped: boolean) => {
+    const state = drag;
+    drag = null;
+    stopListening();
+    if (!state) return;
+    for (const timer of state.timers) clearTimeout(timer);
+    if (!state.started) return;
+    // The click that follows the release is not a selection.
+    suppressClick = true;
+    setTimeout(() => (suppressClick = false), 0);
+    root.removeAttribute('data-mk-fx-dnd');
+    for (const item of items()) item.removeAttribute('data-mk-fx-dragging');
+    const target = dropped ? state.target : null;
+    target?.element.removeAttribute('data-mk-fx-drop');
+    const ghost = state.ghost!;
+    const finish = () => ghost.remove();
+    if (target && moveEntries(state.ids, target.id)) {
+      const element = elementFor(target) ?? target.element;
+      const box = element.getBoundingClientRect();
+      const card = ghost.getBoundingClientRect();
+      if (reduced()) finish();
+      else keep(gsap.to(ghost, { x: box.left + box.width / 2 - card.width / 2, y: box.top + box.height / 2 - card.height / 2, scale: 0.2, rotation: 0, opacity: 0, duration: 0.3, ease: 'power2.in', onComplete: finish }));
+      if (element.isConnected) {
+        keep(ringPulse(element));
+        const icon = element.querySelector<HTMLElement>('[data-mk-fx-icon]');
+        if (icon && !reduced()) keep(gsap.fromTo(icon, { scale: 1.2 }, { scale: 1, duration: 0.45, delay: 0.2, ease: EASE.pop, clearProps: 'transform' }));
+      }
+      return;
+    }
+    status.textContent = 'Movimiento cancelado';
+    const home = itemOf(state.ids[0]!) ?? state.origin;
+    const box = home.getBoundingClientRect();
+    if (reduced() || !home.isConnected) finish();
+    else keep(gsap.to(ghost, { x: box.left, y: box.top, rotation: 0, scale: 0.9, opacity: 0, duration: 0.35, ease: EASE.swatch, onComplete: finish }));
+  };
+  const onMove = (event: PointerEvent) => {
+    if (!drag || event.pointerId !== drag.pointerId) return;
+    const dx = event.clientX - drag.startX;
+    const dy = event.clientY - drag.startY;
+    if (!drag.started) {
+      // On touch, moving before the long press is a scroll.
+      if (drag.touch && !drag.armed) {
+        if (Math.hypot(dx, dy) > 8) land(false);
+        return;
+      }
+      if (Math.hypot(dx, dy) < 6) return;
+      lift(event.clientX, event.clientY);
+    }
+    event.preventDefault();
+    const speed = event.clientX - drag.lastX;
+    drag.lastX = event.clientX;
+    drag.follow?.x(event.clientX + 14);
+    drag.follow?.y(event.clientY + 12);
+    drag.follow?.tilt(Math.max(-12, Math.min(12, speed * 0.8)));
+    hover(event.clientX, event.clientY);
+    autoScroll(event.clientY);
+  };
+  const onUp = (event: PointerEvent) => {
+    if (drag && event.pointerId === drag.pointerId) land(true);
+  };
+  const onCancel = (event: PointerEvent) => {
+    if (drag && event.pointerId === drag.pointerId) land(false);
+  };
+  const onKey = (event: KeyboardEvent) => {
+    if (event.key !== 'Escape' || !drag?.started) return;
+    event.preventDefault();
+    event.stopPropagation();
+    land(false);
+  };
+  scope.add(() => {
+    stopListening();
+    for (const timer of drag?.timers ?? []) clearTimeout(timer);
+    drag?.ghost?.remove();
+    drag = null;
+  });
+
+  scope.on(list, 'pointerdown', (event) => {
+    const pointer = event as PointerEvent;
+    if (readOnly || pointer.button !== 0 || drag || renaming) return;
+    const item = (pointer.target as Element | null)?.closest<HTMLElement>('[data-mk-fx-item]');
+    if (!item || item.hasAttribute('data-mk-fx-gone')) return;
+    const id = item.dataset.id!;
+    const touch = pointer.pointerType === 'touch';
+    drag = {
+      ids: selection.has(id) ? [...selection] : [id],
+      origin: item,
+      pointerId: pointer.pointerId,
+      startX: pointer.clientX,
+      startY: pointer.clientY,
+      lastX: pointer.clientX,
+      touch,
+      armed: !touch,
+      started: false,
+      ghost: null,
+      target: null,
+      follow: null,
+      timers: [],
+    };
+    if (touch) {
+      const pending = drag;
+      pending.timers.push(
+        setTimeout(() => {
+          if (drag !== pending) return;
+          pending.armed = true;
+          lift(pending.startX, pending.startY);
+        }, 450),
+      );
+    }
+    window.addEventListener('pointermove', onMove, { passive: false });
+    window.addEventListener('pointerup', onUp);
+    window.addEventListener('pointercancel', onCancel);
+    window.addEventListener('keydown', onKey, true);
+  });
+  // A touch drag keeps the page from scrolling under it, and the long press from opening the system menu.
+  scope.on(pane, 'touchmove', (event) => {
+    if (drag?.started) event.preventDefault();
+  }, { passive: false });
+  scope.on(list, 'contextmenu', (event) => {
+    if (drag?.touch) event.preventDefault();
+  });
+
+  // ── Keyboard ─────────────────────────────────────────────────────────────
+  /** Items in the first row of the grid. */
+  const columns = (all: HTMLElement[]) => {
+    if (view === 'list' || !all.length) return 1;
+    const first = all[0]!.offsetTop;
+    const row = all.findIndex((item) => item.offsetTop !== first);
+    return row < 0 ? all.length : Math.max(1, row);
+  };
+  let typed = '';
+  let typedAt = 0;
+  scope.on(list, 'keydown', (event) => {
+    const key = event as KeyboardEvent;
+    if ((key.target as Element | null)?.closest('[data-mk-fx-rename]')) return;
+    const all = items();
+    const item = (key.target as Element | null)?.closest<HTMLElement>('[data-mk-fx-item]') ?? null;
+    const index = item ? all.indexOf(item) : -1;
+    const id = item?.dataset.id ?? null;
+    const command = key.ctrlKey || key.metaKey;
+    const step = columns(all);
+    const go = (next: number) => {
+      key.preventDefault();
+      const target = all[Math.max(0, Math.min(all.length - 1, next))];
+      if (!target) return;
+      const targetId = target.dataset.id!;
+      if (key.shiftKey) selectRange(anchor ?? id ?? targetId, targetId, command);
+      else if (!command) {
+        setSelection([targetId]);
+        anchor = targetId;
+      }
+      focusItem(targetId);
+    };
+    switch (key.key) {
+      case 'ArrowDown':
+        return go(index < 0 ? 0 : index + step);
+      case 'ArrowUp':
+        if (key.altKey) {
+          key.preventDefault();
+          return goUp(true);
+        }
+        return go(index < 0 ? 0 : index - step);
+      case 'ArrowRight':
+        if (view === 'grid') go(index + 1);
+        return;
+      case 'ArrowLeft':
+        if (view === 'grid') go(index - 1);
+        return;
+      case 'Home':
+        return go(0);
+      case 'End':
+        return go(all.length - 1);
+      case 'Enter':
+        if (id) {
+          key.preventDefault();
+          openEntry(id, true);
+        }
+        return;
+      case 'Backspace':
+        key.preventDefault();
+        return goUp(true);
+      case 'F2':
+        if (id && !readOnly) {
+          key.preventDefault();
+          startRename(id);
+        }
+        return;
+      case 'Delete':
+        if (selection.size && !readOnly) {
+          key.preventDefault();
+          removeEntries([...selection]);
+        }
+        return;
+      case 'Escape':
+        if (cut.length) {
+          cut = [];
+          for (const each of all) each.removeAttribute('data-mk-fx-cut');
+          paintStatus();
+        } else if (selection.size) setSelection([]);
+        return;
+      case ' ':
+        if (!id) return;
+        key.preventDefault();
+        if (command) setSelection(selection.has(id) ? [...selection].filter((chosen) => chosen !== id) : [...selection, id]);
+        else setSelection([id]);
+        anchor = id;
+        return;
+    }
+    const letter = key.key.toLowerCase();
+    if (command && letter === 'a') {
+      key.preventDefault();
+      setSelection(all.map((each) => each.dataset.id!));
+      return;
+    }
+    if (command && letter === 'x' && selection.size && !readOnly) {
+      key.preventDefault();
+      cut = [...selection];
+      for (const each of all) each.toggleAttribute('data-mk-fx-cut', cut.includes(each.dataset.id!));
+      status.textContent = `${plural(cut.length, 'elemento cortado', 'elementos cortados')}. Abre otra carpeta y pega con Ctrl+V.`;
+      paintStatus();
+      return;
+    }
+    if (command && letter === 'v' && cut.length && !readOnly) {
+      key.preventDefault();
+      if (!moveEntries(cut, current.id)) {
+        status.textContent = 'No se puede pegar aquí';
+        keep(shake(list, 3));
+      }
+      return;
+    }
+    // Typing jumps to the next name that starts with what was typed.
+    if (!command && !key.altKey && key.key.length === 1 && /\S/.test(key.key)) {
+      const now = Date.now();
+      typed = now - typedAt > 600 ? letter : typed + letter;
+      typedAt = now;
+      const start = index + (typed.length === 1 ? 1 : 0);
+      const order = [...all.slice(start), ...all.slice(0, start)];
+      const match = order.find((each) => (located.get(each.dataset.id!)?.entry.name ?? '').toLowerCase().startsWith(typed));
+      if (match) go(all.indexOf(match));
+    }
+  });
+  scope.on(list, 'focusin', (event) => {
+    const item = (event.target as Element | null)?.closest<HTMLElement>('[data-mk-fx-item]');
+    if (!item) return;
+    focusId = item.dataset.id!;
+    roving();
+  });
+
+  // ── The bar ──────────────────────────────────────────────────────────────
+  const paintViews = (animate: boolean) => {
+    root.setAttribute('data-mk-view', view);
+    for (const button of [listButton, gridButton]) {
+      const on = button.dataset.view === view;
+      button.setAttribute('aria-checked', String(on));
+      button.tabIndex = on ? 0 : -1;
+    }
+    head.hidden = view !== 'list';
+    keep(slideIndicator(indicator, view === 'list' ? listButton : gridButton, { immediate: !animate }));
+  };
+  const setView = (next: FileView) => {
+    if (next === view || scope.disposed) return;
+    // Every icon flies from its row to its tile (or back) while the texts fade in again.
+    const icons = [...list.querySelectorAll<HTMLElement>('[data-mk-fx-icon]')];
+    const state = !reduced() && icons.length && icons.length <= 160 ? Flip.getState(icons) : null;
+    view = next;
+    paintViews(true);
+    if (state) {
+      keep(Flip.from(state, { duration: 0.5, ease: EASE.layoutReflow, scale: true }));
+      keep(gsap.fromTo(list.querySelectorAll('[data-mk-fx-name], [data-mk-fx-size], [data-mk-fx-date]'), { opacity: 0 }, { opacity: 1, duration: 0.3, delay: 0.12, ease: 'power1.out', clearProps: 'opacity' }));
+    }
+    status.textContent = next === 'grid' ? 'Vista de cuadrícula' : 'Vista de lista';
+    options.onViewChange?.(next);
+  };
+  scope.on(views, 'click', (event) => {
+    const button = (event.target as Element | null)?.closest<HTMLButtonElement>('[data-view]');
+    if (button) setView(button.dataset.view as FileView);
+  });
+  scope.on(views, 'keydown', (event) => {
+    const key = (event as KeyboardEvent).key;
+    if (!['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(key)) return;
+    event.preventDefault();
+    setView(view === 'list' ? 'grid' : 'list');
+    (view === 'list' ? listButton : gridButton).focus();
+  });
+  scope.on(head, 'click', (event) => {
+    const button = (event.target as Element | null)?.closest<HTMLButtonElement>('[data-sort]');
+    if (!button) return;
+    const key = button.dataset.sort as FileSort;
+    sort = { key, direction: sort.key === key && sort.direction === 1 ? -1 : 1 };
+    paintSort();
+    reflow(renderPane);
+    status.textContent = `Ordenado por ${SORT_LABEL[key].toLowerCase()}, ${sort.direction === 1 ? 'ascendente' : 'descendente'}`;
+  });
+  scope.on(upButton, 'click', () => goUp(false));
+  scope.on(newButton, 'click', () => {
+    keep(press(newButton));
+    createFolder();
+  });
+  scope.on(renameButton, 'click', () => {
+    const [id] = [...selection];
+    if (id && selection.size === 1) startRename(id);
+  });
+  scope.on(removeButton, 'click', () => {
+    keep(press(removeButton));
+    removeEntries([...selection]);
+  });
+
+  if (typeof ResizeObserver === 'function') scope.observe(new ResizeObserver(() => paintViews(false))).observe(views);
+
+  paintSort();
+  renderPane();
+  paintViews(false);
+
+  return {
+    open(id) {
+      const found = located.get(id);
+      if (!found) return;
+      if (isFolder(found.entry)) return navigate(id);
+      if (found.parent && found.parent !== current) navigate(found.parent.id);
+      setSelection([id], false);
+      anchor = id;
+      focusId = id;
+      roving();
+      openEntry(id);
+    },
+    up: () => goUp(false),
+    setView,
+    select(ids) {
+      setSelection(ids, false);
+      anchor = [...selection][0] ?? null;
+    },
+    createFolder,
+    rename(id, name) {
+      if (name === undefined) return startRename(id);
+      const entry = located.get(id)?.entry;
+      const next = name.trim();
+      if (readOnly || !entry || entry === top || next === entry.name || problemWith(next, entry)) return;
+      applyName(entry, next);
+    },
+    remove: (ids) => removeEntries(ids ?? [...selection]),
+    move: (ids, folder) => void moveEntries(ids, folder),
+    setFiles(files) {
+      if (scope.disposed) return;
+      renaming?.finish(false);
+      top.children = cloneEntries(files);
+      reindex();
+      current = folderOf(current.id) ?? top;
+      cut = cut.filter((id) => located.has(id));
+      renderPane();
+      paintCrumbs();
+      paintTree(true);
+    },
+    get files() {
+      return cloneEntries(top.children ?? []);
+    },
+    get folder() {
+      return current.id;
+    },
+    get selection() {
+      return [...selection];
+    },
+    get view() {
+      return view;
+    },
+    destroy: () => scope.dispose(),
+  };
+}