@yewdiel21/motion-kit 0.10.0 → 0.15.0

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

@@ -0,0 +1,449 @@
+import { gsap, EASE, registerMotion } from '../../core/gsap';
+import { reduced } from '../../core/reduced';
+import { createScope } from '../../core/scope';
+import { inert, type Instance } from '../../core/types';
+import { walk, type TreeNode } from '../../core/tree';
+import { blurIn, press } from '../../motion/micro';
+import { markText } from '../../core/mark';
+import { createTreeView } from '../tree-view/engine';
+
+/*
+ * JSON viewer: any JSON value as a tree (tree-view underneath): keys, values
+ * coloured by type (strings, numbers, booleans, null; colours with a swatch),
+ * objects and lists summed up ("4 claves", "3 elementos") and opened by levels
+ * with the tree's own motion (height .32 s, children out of a blur, the
+ * chevron turning). Each row has a copy button that turns into a check with a
+ * pop; Ctrl/⌘+C copies the focused value. The search marks keys and values and
+ * opens what holds them. setData() keeps what was open and flashes the values
+ * that changed (and the keys that are new) in the accent for a moment. The
+ * selected row's path ($.user.roles[0]) shows below, ready to copy: it rises
+ * out of a blur the first time and slides in on each new choice. On hover the
+ * copy button slides in and the value sits on a faint pill of its colour; an
+ * open branch lets its summary ("4 claves") step back.
+ */
+
+export type JsonType = 'object' | 'array' | 'string' | 'number' | 'boolean' | 'null';
+
+export interface JsonViewerOptions {
+  /** The value; without it, the JSON written inside the root (as text or in a <script type="application/json">). */
+  data?: unknown;
+  /** Levels open at the start: 1 shows the top keys closed, 2 opens them… (default 1; Infinity opens all). */
+  expandDepth?: number;
+  /** A row for the value itself with this name; without it the top keys are the first rows. */
+  rootName?: string;
+  /** A search field: true, or its placeholder (default false). */
+  search?: boolean | string;
+  /** The bar with expand, collapse and copy (default true). */
+  toolbar?: boolean;
+  /** Keys in alphabetical order (default false: as they come). */
+  sortKeys?: boolean;
+  /** Accessible name (default 'Datos JSON'). */
+  label?: string;
+  onSelect?: (path: string, value: unknown) => void;
+  onCopy?: (text: string, path: string) => void;
+}
+
+export interface JsonViewerInstance extends Instance {
+  setData(data: unknown): void;
+  expandAll(): void;
+  collapseAll(): void;
+  /** Open the rows down to this path ($.user.roles) and show it. */
+  reveal(path: string): void;
+  filter(query: string): void;
+  /** Copy a value (default: all of it) as text. */
+  copy(path?: string): Promise<boolean>;
+  readonly data: unknown;
+}
+
+interface JsonMeta {
+  key: string | number | null;
+  value: unknown;
+  type: JsonType;
+  path: string;
+  /** Keys or items, for objects and lists. */
+  size: number;
+}
+
+const COPY = '<svg aria-hidden="true" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="8" y="8" width="12" height="12" rx="2.5"/><path d="M16 8V6.5A2.5 2.5 0 0 0 13.5 4h-7A2.5 2.5 0 0 0 4 6.5v7A2.5 2.5 0 0 0 6.5 16H8"/></svg>';
+const CHECK = '<svg aria-hidden="true" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>';
+const SVG = (paths: string) => `<svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">${paths}</svg>`;
+const EXPAND = SVG('<path d="M7 9l5-5 5 5M7 15l5 5 5-5"/>');
+const COLLAPSE = SVG('<path d="M7 4l5 5 5-5M7 20l5-5 5 5"/>');
+const IDENTIFIER = /^[A-Za-z_$][\w$]*$/;
+const COLOR = /^(#(?:[\da-f]{3,4}|[\da-f]{6}|[\da-f]{8})|(?:rgb|hsl|oklch|oklab)a?\([^)]*\))$/i;
+
+export function typeOfJson(value: unknown): JsonType {
+  if (value === null || value === undefined) return 'null';
+  if (Array.isArray(value)) return 'array';
+  if (typeof value === 'object') return 'object';
+  if (typeof value === 'number' || typeof value === 'bigint') return 'number';
+  if (typeof value === 'boolean') return 'boolean';
+  return 'string';
+}
+
+/** $.user, $.items[0], $["con espacios"]. */
+export const jsonPath = (parent: string, key: string | number) =>
+  typeof key === 'number' ? `${parent}[${key}]` : IDENTIFIER.test(key) ? `${parent}.${key}` : `${parent}[${JSON.stringify(key)}]`;
+
+/** How a value reads in its row: strings quoted, the rest as JSON. */
+const shown = (meta: JsonMeta) =>
+  meta.type === 'string' ? JSON.stringify(String(meta.value)) : meta.type === 'null' ? 'null' : typeof meta.value === 'bigint' ? meta.value.toString() : String(meta.value);
+const plural = (n: number, one: string, many: string) => `${n} ${n === 1 ? one : many}`;
+const summary = (meta: JsonMeta) => (meta.type === 'array' ? (meta.size ? plural(meta.size, 'elemento', 'elementos') : 'vacía') : meta.size ? plural(meta.size, 'clave', 'claves') : 'vacío');
+/** What copying a value gives: a string as it is, anything else as indented JSON. */
+const textOf = (value: unknown) =>
+  typeof value === 'string' ? value : JSON.stringify(value, (_key, item: unknown) => (typeof item === 'bigint' ? item.toString() : item), 2) ?? String(value);
+
+async function writeClipboard(text: string): Promise<boolean> {
+  try {
+    if (typeof navigator !== 'undefined' && navigator.clipboard?.writeText) {
+      await navigator.clipboard.writeText(text);
+      return true;
+    }
+  } catch {
+    // Not allowed (no focus, no permission): the old way below.
+  }
+  try {
+    const area = document.createElement('textarea');
+    area.value = text;
+    area.setAttribute('readonly', '');
+    area.style.cssText = 'position:fixed;top:0;left:0;opacity:0;pointer-events:none';
+    document.body.append(area);
+    area.select();
+    const done = typeof document.execCommand === 'function' && document.execCommand('copy');
+    area.remove();
+    return Boolean(done);
+  } catch {
+    return false;
+  }
+}
+
+export function createJsonViewer(root: HTMLElement | null, options: JsonViewerOptions = {}): JsonViewerInstance {
+  if (!root) return inert({ setData() {}, expandAll() {}, collapseAll() {}, reveal() {}, filter() {}, copy: () => Promise.resolve(false), data: undefined });
+  registerMotion();
+  const scope = createScope();
+  // JSON written inside the root stays there, out of sight.
+  const authored = root.querySelector('script[type="application/json"]')?.textContent ?? root.textContent ?? '';
+  let data: unknown = options.data;
+  // JSON text from an attribute (data-mk-data through autoInit) is read as JSON.
+  if (typeof data === 'string' && /^\s*[[{]/.test(data)) {
+    try {
+      data = JSON.parse(data);
+    } catch {
+      // Not JSON after all: shown as the string it is.
+    }
+  }
+  if (data === undefined) {
+    try {
+      data = authored.trim() ? JSON.parse(authored) : null;
+    } catch {
+      data = null;
+    }
+  }
+  const holder = document.createElement('div');
+  holder.hidden = true;
+  holder.append(...root.childNodes);
+  const depthOpen = options.expandDepth ?? 1;
+  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 value as tree nodes ──────────────────────────────────────────────
+  const metas = new Map<string, JsonMeta>();
+  const depths = new Map<string, number>();
+  const build = (value: unknown, key: string | number | null, path: string, depth: number): TreeNode => {
+    const type = typeOfJson(value);
+    let children: TreeNode[] | undefined;
+    if (type === 'object') {
+      const entries = Object.entries(value as Record<string, unknown>).filter(([, item]) => item !== undefined && typeof item !== 'function');
+      if (options.sortKeys) entries.sort(([a], [b]) => a.localeCompare(b));
+      children = entries.map(([name, item]) => build(item, name, jsonPath(path, name), depth + 1));
+    } else if (type === 'array') children = (value as unknown[]).map((item, i) => build(item, i, jsonPath(path, i), depth + 1));
+    const meta: JsonMeta = { key, value, type, path, size: children?.length ?? 0 };
+    metas.set(path, meta);
+    depths.set(path, depth);
+    return { id: path, label: key === null ? '' : String(key), children, data: meta };
+  };
+  const nodesOf = (value: unknown): TreeNode[] => {
+    metas.clear();
+    depths.clear();
+    const type = typeOfJson(value);
+    if (options.rootName !== undefined || (type !== 'object' && type !== 'array')) return [build(value, options.rootName ?? 'valor', '$', 0)];
+    const top = build(value, null, '$', 0);
+    return top.children ?? [];
+  };
+  /** Leaves as path → text, to tell what changed. */
+  const leaves = () => {
+    const values = new Map<string, string>();
+    for (const [path, meta] of metas) if (meta.type !== 'object' && meta.type !== 'array') values.set(path, shown(meta));
+    return values;
+  };
+  let nodes = nodesOf(data);
+  const openAtStart = () => {
+    const ids: string[] = [];
+    walk(nodes, (node) => {
+      if (node.children?.length && (depths.get(node.id) ?? 0) < depthOpen) ids.push(node.id);
+    });
+    return ids;
+  };
+
+  // ── The parts ────────────────────────────────────────────────────────────
+  const status = document.createElement('span');
+  status.className = 'mk-sr-only';
+  status.setAttribute('role', 'status');
+  let bar: HTMLElement | null = null;
+  let searchInput: HTMLInputElement | null = null;
+  const barButton = (name: string, label: string, icon: string) => {
+    const button = document.createElement('button');
+    button.type = 'button';
+    button.dataset.mkJvTool = name;
+    button.setAttribute('aria-label', label);
+    button.title = label;
+    button.innerHTML = icon;
+    return button;
+  };
+  const copyAll = barButton('copy', 'Copiar JSON', COPY);
+  if (options.toolbar !== false || options.search) {
+    bar = document.createElement('div');
+    bar.dataset.mkJvBar = '';
+    if (options.search) {
+      searchInput = document.createElement('input');
+      searchInput.type = 'search';
+      searchInput.dataset.mkJvSearch = '';
+      searchInput.placeholder = typeof options.search === 'string' ? options.search : 'Buscar clave o valor…';
+      searchInput.setAttribute('aria-label', 'Buscar en el JSON');
+      bar.append(searchInput);
+    }
+    if (options.toolbar !== false) {
+      const tools = document.createElement('div');
+      tools.dataset.mkJvTools = '';
+      tools.append(barButton('expand', 'Expandir todo', EXPAND), barButton('collapse', 'Contraer todo', COLLAPSE), copyAll);
+      bar.append(tools);
+    }
+  }
+  const host = document.createElement('div');
+  host.className = 'mk-tree-view';
+  host.dataset.mkJvTree = '';
+  const foot = document.createElement('div');
+  foot.dataset.mkJvFoot = '';
+  foot.hidden = true;
+  const pathText = document.createElement('code');
+  pathText.dataset.mkJvPath = '';
+  const copyPath = barButton('copy-path', 'Copiar ruta', COPY);
+  foot.append(pathText, copyPath);
+  if (bar) root.append(bar);
+  root.append(host, foot, status);
+  scope.add(() => {
+    for (const effect of effects) effect.kill();
+    effects.clear();
+    bar?.remove();
+    host.remove();
+    foot.remove();
+    status.remove();
+    root.append(...holder.childNodes);
+  });
+  scope.attr(root, 'data-mk-ready', '');
+
+  // ── Copying, with a check that pops ──────────────────────────────────────
+  const copied = (button: HTMLElement | null) => {
+    if (!button) return;
+    button.innerHTML = CHECK;
+    button.setAttribute('data-mk-copied', '');
+    if (!reduced()) keep(gsap.fromTo(button.firstElementChild, { scale: 0.3, rotation: -25 }, { scale: 1, rotation: 0, duration: 0.42, ease: EASE.pop, transformOrigin: '50% 50%', clearProps: 'transform' }));
+    scope.timeout(() => {
+      button.innerHTML = COPY;
+      button.removeAttribute('data-mk-copied');
+    }, 1200);
+  };
+  const copyValue = async (path: string, button: HTMLElement | null) => {
+    const meta = metas.get(path);
+    const value = path === '$' ? data : meta?.value;
+    if (path !== '$' && !meta) return false;
+    const text = textOf(value);
+    keep(press(button));
+    const done = await writeClipboard(text);
+    if (scope.disposed) return done;
+    status.textContent = done ? `Copiado ${path === '$' ? 'el JSON' : path}` : 'No se pudo copiar';
+    if (done) {
+      copied(button);
+      options.onCopy?.(text, path);
+      root.dispatchEvent(new CustomEvent('mk:copy', { bubbles: true, detail: { text, path } }));
+    }
+    return done;
+  };
+
+  // ── Rows ─────────────────────────────────────────────────────────────────
+  const renderLabel = (node: TreeNode, element: HTMLElement, query: string) => {
+    const meta = node.data as JsonMeta;
+    element.dataset.type = meta.type;
+    if (meta.key !== null) {
+      const key = document.createElement('span');
+      key.dataset.mkJvKey = typeof meta.key === 'number' ? 'index' : 'name';
+      key.append(markText(String(meta.key), query));
+      const colon = document.createElement('span');
+      colon.dataset.mkJvColon = '';
+      colon.textContent = ':';
+      element.append(key, colon);
+    }
+    if (meta.type === 'object' || meta.type === 'array') {
+      const brackets = document.createElement('span');
+      brackets.dataset.mkJvBrackets = '';
+      brackets.textContent = meta.type === 'array' ? '[ ]' : '{ }';
+      const count = document.createElement('span');
+      count.dataset.mkJvSummary = '';
+      count.textContent = summary(meta);
+      element.append(brackets, count);
+    } else {
+      const value = document.createElement('span');
+      value.dataset.mkJvValue = meta.type;
+      const text = shown(meta);
+      value.title = meta.type === 'string' ? String(meta.value) : text;
+      if (meta.type === 'string' && COLOR.test(String(meta.value).trim())) {
+        const swatch = document.createElement('span');
+        swatch.dataset.mkJvSwatch = '';
+        swatch.setAttribute('aria-hidden', 'true');
+        swatch.style.background = String(meta.value).trim();
+        value.append(swatch);
+      }
+      value.append(markText(text, query));
+      element.append(value);
+    }
+    const copy = document.createElement('button');
+    copy.type = 'button';
+    copy.tabIndex = -1;
+    copy.dataset.mkJvCopy = '';
+    copy.setAttribute('aria-label', `Copiar ${meta.path}`);
+    copy.title = 'Copiar';
+    copy.innerHTML = COPY;
+    // The row does not select or open under the button.
+    copy.addEventListener('click', (event) => {
+      event.stopPropagation();
+      void copyValue(meta.path, copy);
+    });
+    copy.addEventListener('dblclick', (event) => event.stopPropagation());
+    element.append(copy);
+  };
+
+  const tree = createTreeView(host, {
+    nodes,
+    expanded: openAtStart(),
+    label: options.label ?? 'Datos JSON',
+    renderLabel,
+    searchText: (node) => {
+      const meta = node.data as JsonMeta;
+      return `${meta.key ?? ''} ${meta.type === 'object' || meta.type === 'array' ? '' : shown(meta)}`;
+    },
+    onSelect: (node) => {
+      const meta = node.data as JsonMeta;
+      const appearing = foot.hidden;
+      const moved = pathText.textContent !== meta.path;
+      foot.hidden = false;
+      pathText.textContent = meta.path;
+      if (!reduced()) {
+        if (appearing) keep(blurIn(foot, { from: 'rise', duration: 0.32 }));
+        else if (moved) keep(blurIn(pathText, { from: 'soft', duration: 0.28 }));
+      }
+      options.onSelect?.(meta.path, meta.value);
+      root.dispatchEvent(new CustomEvent('mk:select', { bubbles: true, detail: { path: meta.path, value: meta.value } }));
+    },
+  });
+  // Listeners on the viewer hear its own events, not those of the tree inside.
+  for (const type of ['mk:select', 'mk:expand', 'mk:check']) scope.on(host, type, (event) => event.stopPropagation());
+  scope.add(() => tree.destroy());
+
+  const itemOf = (path: string) => [...tree.element.querySelectorAll<HTMLElement>('[role="treeitem"]')].find((item) => item.dataset.id === path) ?? null;
+
+  scope.on(tree.element, 'keydown', (event) => {
+    const key = event as KeyboardEvent;
+    if (!(key.ctrlKey || key.metaKey) || key.key.toLowerCase() !== 'c' || window.getSelection?.()?.toString()) return;
+    const item = (key.target as Element | null)?.closest<HTMLElement>('[role="treeitem"]');
+    if (!item) return;
+    key.preventDefault();
+    void copyValue(item.dataset.id!, item.querySelector<HTMLElement>(':scope > [data-mk-tree-row] [data-mk-jv-copy]'));
+  });
+  if (searchInput) {
+    const input = searchInput;
+    scope.on(input, 'input', () => tree.filter(input.value));
+    scope.on(input, 'keydown', (event) => {
+      if ((event as KeyboardEvent).key !== 'ArrowDown') return;
+      event.preventDefault();
+      tree.element.querySelector<HTMLElement>('[role="treeitem"]:not([hidden])')?.focus();
+    });
+  }
+  if (bar) {
+    scope.on(bar, 'click', (event) => {
+      const button = (event.target as Element | null)?.closest<HTMLElement>('[data-mk-jv-tool]');
+      if (!button) return;
+      const name = button.dataset.mkJvTool;
+      if (name === 'expand' || name === 'collapse') {
+        keep(press(button));
+        if (name === 'expand') tree.expandAll();
+        else tree.collapseAll();
+        status.textContent = name === 'expand' ? 'Todo expandido' : 'Todo contraído';
+        if (name === 'expand' && !reduced()) {
+          const rows = [...tree.element.querySelectorAll<HTMLElement>('[role="treeitem"]')].filter((item) => !item.closest('[role="group"][hidden]')).slice(0, 40);
+          keep(gsap.fromTo(rows, { opacity: 0, x: -6 }, { opacity: 1, x: 0, duration: 0.3, stagger: 0.012, ease: 'power2.out', clearProps: 'opacity,transform' }));
+        }
+      } else if (name === 'copy') void copyValue('$', button);
+    });
+  }
+  scope.on(copyPath, 'click', async () => {
+    const text = pathText.textContent ?? '';
+    keep(press(copyPath));
+    if (await writeClipboard(text)) {
+      copied(copyPath);
+      status.textContent = `Ruta copiada: ${text}`;
+    }
+  });
+
+  return {
+    setData(next) {
+      if (scope.disposed) return;
+      const before = leaves();
+      const known = new Set(metas.keys());
+      data = next;
+      nodes = nodesOf(next);
+      tree.setNodes(nodes);
+      if (!foot.hidden && !metas.has(pathText.textContent ?? '')) foot.hidden = true;
+      // What changed flashes for a moment; what is new comes in out of a blur.
+      const after = leaves();
+      let changes = 0;
+      for (const [path, text] of after) {
+        const item = itemOf(path);
+        const value = item?.querySelector<HTMLElement>(':scope > [data-mk-tree-row] [data-mk-jv-value]');
+        if (!value) continue;
+        if (before.has(path) && before.get(path) !== text) {
+          changes++;
+          value.setAttribute('data-mk-jv-changed', '');
+        }
+      }
+      const added = [...metas.keys()].filter((path) => !known.has(path));
+      for (const path of added) itemOf(path)?.querySelector<HTMLElement>(':scope > [data-mk-tree-row]')?.setAttribute('data-mk-jv-added', '');
+      if (changes || added.length) status.textContent = [changes ? plural(changes, 'valor cambió', 'valores cambiaron') : '', added.length ? plural(added.length, 'clave nueva', 'claves nuevas') : ''].filter(Boolean).join(', ');
+    },
+    expandAll: () => tree.expandAll(),
+    collapseAll: () => tree.collapseAll(),
+    reveal(path) {
+      tree.reveal(path);
+      tree.select(path);
+      const meta = metas.get(path);
+      if (meta) {
+        foot.hidden = false;
+        pathText.textContent = meta.path;
+      }
+    },
+    filter(query) {
+      if (searchInput) searchInput.value = query;
+      tree.filter(query);
+    },
+    copy: (path = '$') => copyValue(path, path === '$' ? copyAll : (itemOf(path)?.querySelector<HTMLElement>(':scope > [data-mk-tree-row] [data-mk-jv-copy]') ?? null)),
+    get data() {
+      return data;
+    },
+    destroy: () => scope.dispose(),
+  };
+}