makersclaw 0.2.0 → 0.3.0

package/registry/blocks/json-editor/json-tree.jsx

@@ -0,0 +1,393 @@
+"use client";
+
+// The tree view: a JSON value as folding rows, edited in place.
+//
+// One row per key (or list item). Containers fold; text, numbers,
+// true/false and null edit inline (double-click, or Enter on the row);
+// keys rename (double-click the key, or F2). Each row's ⋯ menu adds, copies
+// its path or value, changes its type, or deletes it (with Undo). The rows
+// are a WAI-ARIA tree: one Tab stop, arrows move and fold, Home/End jump.
+import { useEffect, useRef, useState } from "react";
+import { Icon, IconButton, Menu, cx } from "../../ui";
+import { convertType, editText, flattenTree, insertAt, isContainer, parseEdit, pathId, pathLabel, preview, removeAt, renameKey, setAt, summary, uniqueKey } from "./tree";
+
+// Types are categories: the chart hues, as the code view paints them.
+const TONE = {
+  string: "text-chart-2",
+  number: "text-chart-3 tabular-nums",
+  boolean: "text-chart-3",
+  null: "text-chart-3 italic",
+};
+
+const TYPES = [
+  { value: "string", label: "Text" },
+  { value: "number", label: "Number" },
+  { value: "boolean", label: "True / false" },
+  { value: "null", label: "Empty (null)" },
+  { value: "object", label: "Object" },
+  { value: "array", label: "List" },
+];
+
+const INDENT = 18;
+
+async function copy(text) {
+  try {
+    await navigator.clipboard.writeText(text);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+export function JsonTree({ value, onEdit, open, setOpen, readOnly = false, onNotice, className, style, label = "JSON" }) {
+  const rows = flattenTree(value, open);
+  const [focusId, setFocusId] = useState(rows[0]?.id ?? null);
+  const [editing, setEditing] = useState(null); // { id, field: "key" | "value", draft, error }
+  const [hoverId, setHoverId] = useState(null);
+  const rowRefs = useRef(new Map());
+  const wantFocus = useRef(null);
+
+  // Keep a focused row that still exists.
+  const current = rows.find((r) => r.id === focusId) ? focusId : rows[0]?.id ?? null;
+
+  useEffect(() => {
+    if (!wantFocus.current) return;
+    const el = rowRefs.current.get(wantFocus.current);
+    wantFocus.current = null;
+    el?.focus();
+  });
+
+  const focusRow = (id) => {
+    setFocusId(id);
+    wantFocus.current = id;
+  };
+
+  const toggle = (row, to) => {
+    if (!isContainer(row.value)) return;
+    const next = new Set(open);
+    const want = to ?? !open.has(row.id);
+    if (want) next.add(row.id);
+    else next.delete(row.id);
+    setOpen(next);
+  };
+
+  // ---- edits: each hands the new root out, with words for an Undo toast.
+  function commitValue(row, draft) {
+    const next = parseEdit(draft, row.type);
+    setEditing(null);
+    focusRow(row.id);
+    if (Object.is(next, row.value) || JSON.stringify(next) === JSON.stringify(row.value)) return;
+    onEdit(setAt(value, row.path, next));
+  }
+
+  function commitKey(row, draft) {
+    const r = renameKey(value, row.path, draft.trim());
+    if (r.error) {
+      setEditing((e) => e && { ...e, error: r.error });
+      return;
+    }
+    setEditing(null);
+    const newPath = [...row.path.slice(0, -1), draft.trim()];
+    focusRow(pathId(newPath));
+    if (r.root !== value) onEdit(r.root);
+  }
+
+  function add(row) {
+    const parentPath = row ? row.path : [];
+    const parent = row ? row.value : value;
+    const openNext = new Set(open);
+    if (row) openNext.add(row.id);
+    setOpen(openNext);
+    if (Array.isArray(parent)) {
+      const path = [...parentPath, parent.length];
+      onEdit(insertAt(value, parentPath, { value: "" }));
+      setFocusId(pathId(path)); // the field takes focus, not the row
+      setEditing({ id: pathId(path), field: "value", draft: "" });
+    } else {
+      const key = uniqueKey(parent);
+      const path = [...parentPath, key];
+      onEdit(insertAt(value, parentPath, { key, value: "" }));
+      setFocusId(pathId(path));
+      setEditing({ id: pathId(path), field: "key", draft: key, select: true });
+    }
+  }
+
+  function remove(row) {
+    const before = value;
+    const { root } = removeAt(value, row.path);
+    // Focus stays in place: the next sibling (in a list, the next item
+    // takes this one's index), else the one before, else the parent.
+    const siblings = rows.filter((r) => r.parentId === row.parentId);
+    const pos = siblings.findIndex((r) => r.id === row.id);
+    const inList = typeof row.key === "number";
+    const target = pos < siblings.length - 1 ? (inList ? row.id : siblings[pos + 1].id) : (siblings[pos - 1]?.id ?? row.parentId);
+    onEdit(root, { undo: () => onEdit(before), message: `Deleted ${inList ? `item ${row.key}` : `"${row.key}"`}` });
+    focusRow(target);
+  }
+
+  function retype(row, type) {
+    if (row.type === type) return;
+    onEdit(setAt(value, row.path, convertType(row.value, type)));
+    if (type === "object" || type === "array") setOpen(new Set(open).add(row.id));
+  }
+
+  // ---- keys: the tree pattern.
+  function onKeyDown(e, row, i) {
+    if (editing) return;
+    const go = (j) => {
+      if (rows[j]) {
+        e.preventDefault();
+        focusRow(rows[j].id);
+      }
+    };
+    switch (e.key) {
+      case "ArrowDown":
+        return go(i + 1);
+      case "ArrowUp":
+        return go(i - 1);
+      case "Home":
+        return go(0);
+      case "End":
+        return go(rows.length - 1);
+      case "ArrowRight":
+        e.preventDefault();
+        if (isContainer(row.value) && !row.open) toggle(row, true);
+        else if (row.open && rows[i + 1]?.parentId === row.id) focusRow(rows[i + 1].id);
+        return;
+      case "ArrowLeft": {
+        e.preventDefault();
+        if (row.open) return toggle(row, false);
+        const parent = rows.find((r) => r.id === row.parentId);
+        if (parent) focusRow(parent.id);
+        return;
+      }
+      case "Enter":
+      case " ":
+        e.preventDefault();
+        if (isContainer(row.value)) toggle(row);
+        else if (!readOnly) setEditing({ id: row.id, field: "value", draft: editText(row.value), select: true });
+        return;
+      case "F2":
+        if (!readOnly && typeof row.key === "string") {
+          e.preventDefault();
+          setEditing({ id: row.id, field: "key", draft: row.key, select: true });
+        }
+        return;
+      case "Delete":
+      case "Backspace":
+        if (!readOnly && row.path.length) {
+          e.preventDefault();
+          remove(row);
+        }
+        return;
+      default:
+    }
+  }
+
+  const rootIsContainer = isContainer(value);
+
+  return (
+    <div className={cx("overflow-auto py-1.5", className)} style={style}>
+      <div role="tree" aria-label={label} className="px-1.5" onMouseLeave={() => setHoverId(null)}>
+        {rows.map((row, i) => {
+          const container = isContainer(row.value);
+          const isEditing = editing?.id === row.id;
+          const menu = row.id !== current && row.id !== hoverId ? [] : readOnly
+            ? [
+                { label: "Copy path", icon: "link", onSelect: () => copy(pathLabel(row.path)).then((ok) => onNotice?.(ok ? `Copied ${pathLabel(row.path)}` : "Could not reach the clipboard")) },
+                { label: "Copy value", icon: "copy", onSelect: () => copy(container ? JSON.stringify(row.value, null, 2) : editText(row.value)).then((ok) => onNotice?.(ok ? "Copied the value" : "Could not reach the clipboard")) },
+              ]
+            : [
+                !container && { label: "Edit value", icon: "pencil", shortcut: "↵", onSelect: () => setEditing({ id: row.id, field: "value", draft: editText(row.value), select: true }) },
+                typeof row.key === "string" && { label: "Rename key", icon: "type", shortcut: "F2", onSelect: () => setEditing({ id: row.id, field: "key", draft: row.key, select: true }) },
+                container && { label: Array.isArray(row.value) ? "Add item" : "Add key", icon: "plus", onSelect: () => add(row) },
+                { type: "separator" },
+                { label: "Copy path", icon: "link", onSelect: () => copy(pathLabel(row.path)).then((ok) => onNotice?.(ok ? `Copied ${pathLabel(row.path)}` : "Could not reach the clipboard")) },
+                { label: "Copy value", icon: "copy", onSelect: () => copy(container ? JSON.stringify(row.value, null, 2) : editText(row.value)).then((ok) => onNotice?.(ok ? "Copied the value" : "Could not reach the clipboard")) },
+                { label: "Change type", icon: "layers", items: [{ type: "radio", value: row.type, onValueChange: (t) => retype(row, t), options: TYPES }] },
+                row.path.length > 0 && { type: "separator" },
+                row.path.length > 0 && { label: "Delete", icon: "trash", tone: "danger", shortcut: "⌫", onSelect: () => remove(row) },
+              ];
+          return (
+            // raw: a treeitem row — the WAI-ARIA tree needs the row itself
+            // focusable with its own keys; no kit part is a tree row.
+            <div
+              key={row.id}
+              ref={(el) => {
+                if (el) rowRefs.current.set(row.id, el);
+                else rowRefs.current.delete(row.id);
+              }}
+              role="treeitem"
+              aria-level={row.depth + 1}
+              aria-expanded={container ? row.open : undefined}
+              aria-selected={row.id === current}
+              aria-label={`${row.key ?? "value"}: ${container ? summary(row.value) : editText(row.value)}`}
+              tabIndex={row.id === current ? 0 : -1}
+              onFocus={() => setFocusId(row.id)}
+              onMouseEnter={() => setHoverId(row.id)}
+              onKeyDown={(e) => onKeyDown(e, row, i)}
+              onClick={() => container && !isEditing && toggle(row)}
+              className={cx(
+                "group/row relative flex min-h-9 items-center gap-2 rounded-md pe-1 font-mono text-[13px] outline-none max-sm:min-h-11",
+                "transition-colors duration-150 motion-reduce:transition-none",
+                "hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring",
+                row.id === current && "bg-muted",
+                container && "cursor-pointer",
+              )}
+              style={{ paddingInlineStart: 6 + row.depth * INDENT }}
+            >
+              {Array.from({ length: row.depth }, (_, d) => (
+                <span key={d} aria-hidden="true" className="absolute inset-y-0 w-px bg-border" style={{ insetInlineStart: 6 + d * INDENT + 8 }} />
+              ))}
+              <span aria-hidden="true" className="grid size-4 shrink-0 place-items-center text-muted-foreground">
+                {container ? <Icon name="chevron-right" size={14} className={cx("transition-transform duration-150 motion-reduce:transition-none", row.open && "rotate-90")} /> : null}
+              </span>
+
+              {row.key !== null ? (
+                isEditing && editing.field === "key" ? (
+                  <InlineInput
+                    draft={editing}
+                    onDraft={(d) => setEditing({ ...editing, draft: d, error: null })}
+                    onCommit={(d) => commitKey(row, d)}
+                    onCancel={() => {
+                      setEditing(null);
+                      focusRow(row.id);
+                    }}
+                    label={`Rename ${row.key}`}
+                  />
+                ) : (
+                  <span
+                    className={cx("max-w-[45%] shrink-0 truncate", typeof row.key === "number" ? "text-muted-foreground tabular-nums" : "text-foreground")}
+                    title={typeof row.key === "string" && row.key.length > 24 ? row.key : undefined}
+                    onDoubleClick={(e) => {
+                      if (readOnly || typeof row.key !== "string") return;
+                      e.stopPropagation();
+                      setEditing({ id: row.id, field: "key", draft: row.key, select: true });
+                    }}
+                  >
+                    {row.key}
+                  </span>
+                )
+              ) : null}
+              {row.key !== null ? <span aria-hidden="true" className="-ms-1.5 text-muted-foreground">:</span> : null}
+
+              {container ? (
+                <span className="min-w-0 truncate font-sans text-xs text-muted-foreground" title={row.open ? undefined : preview(row.value, 400)}>
+                  {row.open ? summary(row.value) : preview(row.value)}
+                </span>
+              ) : isEditing && editing.field === "value" ? (
+                <InlineInput
+                  draft={editing}
+                  onDraft={(d) => setEditing({ ...editing, draft: d })}
+                  onCommit={(d) => commitValue(row, d)}
+                  onCancel={() => {
+                    setEditing(null);
+                    focusRow(row.id);
+                  }}
+                  label={`Edit ${row.key ?? "value"}`}
+                  quoted={row.type === "string"}
+                />
+              ) : (
+                <span
+                  className={cx("min-w-0 truncate", TONE[row.type])}
+                  title={editText(row.value).length > 40 ? editText(row.value) : undefined}
+                  onDoubleClick={(e) => {
+                    if (readOnly) return;
+                    e.stopPropagation();
+                    setEditing({ id: row.id, field: "value", draft: editText(row.value), select: true });
+                  }}
+                >
+                  {row.type === "string" ? JSON.stringify(row.value) : String(row.value)}
+                </span>
+              )}
+
+              {/* The row's actions: only on the row in hand (focused or under the
+                  pointer), so the tree stays one Tab stop and a long list
+                  does not carry a menu per row. */}
+              {row.id === current || row.id === hoverId ? (
+                <span className="ms-auto flex shrink-0 items-center gap-0.5 ps-3" onClick={(e) => e.stopPropagation()} onKeyDown={(e) => e.stopPropagation()}>
+                  {container && !readOnly ? (
+                    <IconButton icon="plus" size="sm" label={Array.isArray(row.value) ? `Add an item to ${pathLabel(row.path)}` : `Add a key to ${pathLabel(row.path)}`} onClick={() => add(row)} className="max-sm:hidden" />
+                  ) : null}
+                  <Menu items={menu} label={`Actions for ${pathLabel(row.path)}`} />
+                </span>
+              ) : null}
+              {isEditing && editing.error ? (
+                <span role="alert" className="absolute top-full z-10 mt-1 rounded-md border border-border bg-popover px-2 py-1 font-sans text-xs text-destructive shadow-lg" style={{ insetInlineStart: 6 + row.depth * INDENT + 24 }}>
+                  {editing.error}
+                </span>
+              ) : null}
+            </div>
+          );
+        })}
+        {rootIsContainer && !readOnly ? (
+          <div className="px-1.5 pt-1">
+            {/* raw: the tree's last row — a quiet "add" in the rows' own shape, a Button would sit off the grid */}
+            <button
+              type="button"
+              onClick={() => add(null)}
+              className="flex min-h-9 w-full items-center gap-2 rounded-md ps-1.5 text-start text-sm text-muted-foreground outline-none transition-colors duration-150 hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring max-sm:min-h-11 motion-reduce:transition-none"
+            >
+              <Icon name="plus" size={14} />
+              {Array.isArray(value) ? "Add item" : "Add key"}
+            </button>
+          </div>
+        ) : null}
+      </div>
+    </div>
+  );
+}
+
+/** The field a key or a value is edited in, the row's own height. */
+function InlineInput({ draft, onDraft, onCommit, onCancel, label, quoted = false }) {
+  const ref = useRef(null);
+  const done = useRef(false);
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    el.focus();
+    if (draft.select) el.select();
+    // Once: the field opened.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const width = Math.min(48, Math.max(6, String(draft.draft).length + 2));
+  return (
+    <span className={cx("relative inline-flex min-w-0 items-center", quoted && "before:text-chart-2 before:content-['“'] after:text-chart-2 after:content-['”']")}>
+      {/* raw: an inline field the row's height (the kit's Input is a 44px form control) */}
+      <input
+        ref={ref}
+        aria-label={label}
+        aria-invalid={draft.error ? true : undefined}
+        value={draft.draft}
+        onChange={(e) => onDraft(e.target.value)}
+        onClick={(e) => e.stopPropagation()}
+        onDoubleClick={(e) => e.stopPropagation()}
+        onKeyDown={(e) => {
+          e.stopPropagation();
+          if (e.key === "Enter") {
+            e.preventDefault();
+            done.current = true;
+            onCommit(e.currentTarget.value);
+            // Still here (the key was refused): the next blur commits again.
+            queueMicrotask(() => {
+              done.current = false;
+            });
+          } else if (e.key === "Escape") {
+            e.preventDefault();
+            done.current = true;
+            onCancel();
+          }
+        }}
+        onBlur={(e) => {
+          if (done.current) return;
+          onCommit(e.currentTarget.value);
+        }}
+        style={{ width: `${width}ch` }}
+        className={cx(
+          "h-7 max-w-[60vw] rounded-sm border bg-background px-1.5 font-mono text-[13px] text-foreground outline-none max-sm:text-base",
+          draft.error ? "border-destructive" : "border-ring",
+        )}
+      />
+    </span>
+  );
+}

package/registry/blocks/json-editor/tree.js

@@ -0,0 +1,225 @@
+// The tree view's model: a JSON value seen as rows, and the edits a row
+// makes, as plain functions of plain values (node and the server run them).
+//
+// A PATH is the list of keys and indexes from the root to a value:
+// ["deal", "owner", "email"], ["deal", "tags", 0]. Every edit returns a NEW
+// root and leaves the old one untouched, so undo is keeping the old one.
+
+/** "object" · "array" · "string" · "number" · "boolean" · "null". */
+export function typeOf(v) {
+  if (v === null) return "null";
+  if (Array.isArray(v)) return "array";
+  const t = typeof v;
+  return t === "object" ? "object" : t === "string" || t === "number" || t === "boolean" ? t : "null";
+}
+
+export const isContainer = (v) => v !== null && typeof v === "object";
+
+/** A stable id for a path: the key a row is remembered by. */
+export const pathId = (path) => JSON.stringify(path);
+
+const IDENT = /^[A-Za-z_$][\w$]*$/;
+
+/** How people write a path: deal.owner.email, deal.tags[0], meta["first name"]. */
+export function pathLabel(path) {
+  let out = "";
+  for (const k of path) {
+    if (typeof k === "number") out += `[${k}]`;
+    else if (IDENT.test(k)) out += out ? `.${k}` : k;
+    else out += `[${JSON.stringify(k)}]`;
+  }
+  return out || "(root)";
+}
+
+/** "3 keys" · "1 item" · "empty". */
+export function summary(v) {
+  if (Array.isArray(v)) return v.length ? `${v.length} item${v.length === 1 ? "" : "s"}` : "empty list";
+  if (isContainer(v)) {
+    const n = Object.keys(v).length;
+    return n ? `${n} key${n === 1 ? "" : "s"}` : "empty object";
+  }
+  return "";
+}
+
+export function getAt(root, path) {
+  let v = root;
+  for (const k of path) {
+    if (!isContainer(v)) return undefined;
+    v = v[k];
+  }
+  return v;
+}
+
+/** The root with the value at `path` replaced. */
+export function setAt(root, path, value) {
+  if (!path.length) return value;
+  const [k, ...rest] = path;
+  const here = Array.isArray(root) ? [...root] : { ...root };
+  here[k] = setAt(root?.[k], rest, value);
+  return here;
+}
+
+/** The root without the value at `path`: { root, removed, index } —
+ *  `index` is where it stood (a key's position in its object), for undo. */
+export function removeAt(root, path) {
+  if (!path.length) return { root: undefined, removed: root, index: 0 };
+  const parentPath = path.slice(0, -1);
+  const k = path[path.length - 1];
+  const parent = getAt(root, parentPath);
+  if (Array.isArray(parent)) {
+    const next = parent.filter((_, i) => i !== k);
+    return { root: setAt(root, parentPath, next), removed: parent[k], index: k };
+  }
+  const keys = Object.keys(parent);
+  const next = {};
+  for (const key of keys) if (key !== k) next[key] = parent[key];
+  return { root: setAt(root, parentPath, next), removed: parent[k], index: keys.indexOf(k) };
+}
+
+/** Put a value into the container at `parentPath`, at `index` (a list) or
+ *  as `key` at position `index` (an object; the end when index is null). */
+export function insertAt(root, parentPath, { key, index = null, value }) {
+  const parent = getAt(root, parentPath);
+  if (Array.isArray(parent)) {
+    const next = [...parent];
+    next.splice(index == null ? next.length : index, 0, value);
+    return setAt(root, parentPath, next);
+  }
+  const entries = Object.entries(parent ?? {}).filter(([k]) => k !== key);
+  entries.splice(index == null ? entries.length : Math.min(index, entries.length), 0, [key, value]);
+  return setAt(root, parentPath, Object.fromEntries(entries));
+}
+
+/** Rename the key at `path`, keeping its place. { root } or { error }. */
+export function renameKey(root, path, to) {
+  const parentPath = path.slice(0, -1);
+  const from = path[path.length - 1];
+  const parent = getAt(root, parentPath);
+  const name = String(to);
+  if (name === from) return { root };
+  if (!name.length) return { error: "A key needs a name" };
+  if (Object.hasOwn(parent, name)) return { error: `There is already a key "${name}" here` };
+  const next = {};
+  for (const [k, v] of Object.entries(parent)) next[k === from ? name : k] = v;
+  return { root: setAt(root, parentPath, next) };
+}
+
+/** A key not yet used in `obj`: base, base_2, base_3… */
+export function uniqueKey(obj, base = "new_key") {
+  if (!Object.hasOwn(obj ?? {}, base)) return base;
+  for (let n = 2; ; n++) if (!Object.hasOwn(obj, `${base}_${n}`)) return `${base}_${n}`;
+}
+
+/** What a typed edit means. Text stays text; for a number, true/false/
+ *  null or a {…}/[…] the field is read as JSON — unless the value was text
+ *  and still reads as text-ish. `prevType` is the type being edited. */
+export function parseEdit(text, prevType) {
+  const s = String(text ?? "");
+  if (prevType === "string") return s;
+  const t = s.trim();
+  if (t === "true") return true;
+  if (t === "false") return false;
+  if (t === "null") return null;
+  if (/^-?(?:0|[1-9]\d*)(?:\.\d+)?(?:[eE][+-]?\d+)?$/.test(t)) return Number(t);
+  if (/^[[{"]/.test(t)) {
+    try {
+      return JSON.parse(t);
+    } catch {
+      /* fall through: keep it as text */
+    }
+  }
+  return s;
+}
+
+/** The text a value is edited as: text bare, everything else as JSON. */
+export const editText = (v) => (typeof v === "string" ? v : JSON.stringify(v));
+
+/** Turn a value into another type, keeping what can be kept. */
+export function convertType(v, type) {
+  const from = typeOf(v);
+  if (from === type) return v;
+  switch (type) {
+    case "string":
+      return isContainer(v) ? JSON.stringify(v) : v === null ? "" : String(v);
+    case "number": {
+      const n = Number(typeof v === "string" ? v.trim() : v);
+      return Number.isFinite(n) ? n : 0;
+    }
+    case "boolean":
+      return typeof v === "string" ? v.trim().toLowerCase() === "true" : Boolean(isContainer(v) ? Object.keys(v).length : v);
+    case "null":
+      return null;
+    case "array":
+      return from === "object" ? Object.values(v) : v === null || v === "" ? [] : [v];
+    case "object":
+      return from === "array" ? Object.fromEntries(v.map((x, i) => [String(i), x])) : v === null || v === "" ? {} : { value: v };
+    default:
+      return v;
+  }
+}
+
+/** The ids of the containers open `depth` levels down: 1 opens the
+ *  top-level rows, 2 their children too; 0 shows only the top level. */
+export function expandedTo(value, depth) {
+  const out = new Set();
+  const walk = (v, path, d) => {
+    if (!isContainer(v)) return;
+    if (path.length) {
+      if (d >= depth) return;
+      out.add(pathId(path));
+    }
+    for (const [k, child] of entries(v)) walk(child, [...path, k], path.length ? d + 1 : 0);
+  };
+  walk(value, [], 0);
+  return out;
+}
+
+/** Every container id (Expand all). */
+export const allContainers = (value) => expandedTo(value, Infinity);
+
+const entries = (v) => (Array.isArray(v) ? v.map((x, i) => [i, x]) : Object.entries(v));
+
+/**
+ * The rows the tree shows: the root's children (the root itself when it is
+ * not a container), each open container's children beneath it, depth
+ * first. Each row: { id, path, key, depth, type, value, size, open,
+ * parentId, last } — `size` a container's summary, `last` whether it is
+ * the last child of its parent (for the guide lines).
+ */
+export function flattenTree(value, open) {
+  const rows = [];
+  if (!isContainer(value)) {
+    if (value !== undefined) rows.push({ id: pathId([]), path: [], key: null, depth: 0, type: typeOf(value), value, size: "", open: false, parentId: null, last: true });
+    return rows;
+  }
+  const walk = (v, path, depth) => {
+    const list = entries(v);
+    list.forEach(([k, child], i) => {
+      const p = [...path, k];
+      const id = pathId(p);
+      const container = isContainer(child);
+      const isOpen = container && open.has(id);
+      rows.push({ id, path: p, key: k, depth, type: typeOf(child), value: child, size: container ? summary(child) : "", open: isOpen, parentId: pathId(path), last: i === list.length - 1 });
+      if (isOpen) walk(child, p, depth + 1);
+    });
+  };
+  walk(value, [], 0);
+  return rows;
+}
+
+/** A short one-line look at a value, for a folded row. */
+export function preview(v, max = 60) {
+  if (!isContainer(v)) return typeof v === "string" ? JSON.stringify(v) : String(v);
+  const parts = [];
+  let len = 0;
+  for (const [k, x] of entries(v)) {
+    const bit = (Array.isArray(v) ? "" : `${k}: `) + (isContainer(x) ? (Array.isArray(x) ? "[…]" : "{…}") : typeof x === "string" ? JSON.stringify(x) : String(x));
+    len += bit.length + 2;
+    if (len > max) {
+      parts.push("…");
+      break;
+    }
+    parts.push(bit);
+  }
+  return Array.isArray(v) ? `[${parts.join(", ")}]` : `{ ${parts.join(", ")} }`;
+}