@btndprojects/loam-ui-native 0.2.1 → 0.3.1

package/dist/chunk-HE43OMEL.js

@@ -0,0 +1,1056 @@
+import { CopyButton } from './chunk-TYOSA7JG.js';
+import { ContextMenu } from './chunk-7CGJBQUA.js';
+import { Alert } from './chunk-Z7I4ZSO6.js';
+import { Skeleton } from './chunk-YJ5PXOX3.js';
+import { SegmentedControl } from './chunk-NZG75DGA.js';
+import { isAndroidIdiom } from './chunk-TH4PW2WU.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-PCEFCOLN.js';
+import * as React from 'react';
+import { BackHandler, View, Text, Pressable, TextInput } from 'react-native';
+import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+// src/json-inspector/json-model.ts
+var IDENT = /^[A-Za-z_$][\w$]*$/;
+function toJsonNode(value) {
+  const seen = /* @__PURE__ */ new Set();
+  const walk = (v) => {
+    if (v === null) return { kind: "null" };
+    switch (typeof v) {
+      case "string":
+        return { kind: "string", value: v };
+      case "number":
+        return Number.isFinite(v) ? { kind: "number", value: v } : { kind: "tag", text: String(v) };
+      case "boolean":
+        return { kind: "boolean", value: v };
+      case "undefined":
+        return { kind: "tag", text: "undefined" };
+      case "bigint":
+        return { kind: "tag", text: `${v}n` };
+      case "symbol":
+        return { kind: "tag", text: v.toString() };
+      case "function":
+        return { kind: "tag", text: `\u0192 ${v.name || "anonymous"}()` };
+    }
+    const o = v;
+    if (o instanceof Date) {
+      return {
+        kind: "tag",
+        text: Number.isNaN(o.getTime()) ? "Invalid Date" : `Date ${o.toISOString().slice(0, 10)}`
+      };
+    }
+    if (seen.has(o)) return { kind: "tag", text: "[Circular]" };
+    if (o instanceof Map) return { kind: "tag", text: `Map(${o.size})` };
+    if (o instanceof Set) return { kind: "tag", text: `Set(${o.size})` };
+    seen.add(o);
+    const node = Array.isArray(o) ? { kind: "array", entries: o.map((x, i) => [i, walk(x)]) } : {
+      kind: "object",
+      entries: Object.keys(o).map((k) => [
+        k,
+        walk(o[k])
+      ])
+    };
+    seen.delete(o);
+    return node;
+  };
+  return walk(value);
+}
+function readJsonInput(value) {
+  if (value === void 0 || typeof value === "string" && value.trim() === "") {
+    return { status: "empty" };
+  }
+  if (typeof value === "string") {
+    try {
+      const node2 = toJsonNode(JSON.parse(value));
+      return { status: "ok", node: node2, text: formatJson(node2) };
+    } catch (e) {
+      return { status: "invalid", text: value, error: locateParseError(value, e) };
+    }
+  }
+  const node = toJsonNode(value);
+  return { status: "ok", node, text: formatJson(node) };
+}
+function locateParseError(text, e) {
+  const message = e instanceof Error ? e.message : String(e);
+  const lc = /line (\d+) column (\d+)/.exec(message);
+  const pos = /position (\d+)/.exec(message);
+  let line = 1;
+  let column = 1;
+  if (lc) {
+    line = Number(lc[1]);
+    column = Number(lc[2]);
+  } else {
+    const at = pos ? Number(pos[1]) : text.length;
+    const before = text.slice(0, at).split("\n");
+    line = before.length;
+    column = (before[before.length - 1]?.length ?? 0) + 1;
+  }
+  const reason = message.replace(/^JSON\.parse:\s*/, "").replace(/\s*(in JSON )?at position \d+.*$/, "").replace(/\s*\(line \d+ column \d+\)$/, "").replace(/\s+at line \d+ column \d+ of the JSON data$/, "");
+  return { reason: reason || "Invalid JSON", line, column };
+}
+function formatJson(node) {
+  const go = (n, pad) => {
+    switch (n.kind) {
+      case "string":
+        return JSON.stringify(n.value);
+      case "number":
+        return String(n.value);
+      case "boolean":
+        return String(n.value);
+      case "null":
+        return "null";
+      case "tag":
+        return JSON.stringify(n.text);
+      case "array": {
+        if (!n.entries.length) return "[]";
+        const inner = pad + "  ";
+        return `[
+${n.entries.map(([, x]) => inner + go(x, inner)).join(",\n")}
+${pad}]`;
+      }
+      case "object": {
+        if (!n.entries.length) return "{}";
+        const inner = pad + "  ";
+        return `{
+${n.entries.map(([k, x]) => `${inner}${JSON.stringify(k)}: ${go(x, inner)}`).join(",\n")}
+${pad}}`;
+      }
+    }
+  };
+  return go(node, "");
+}
+function dotPath(segs) {
+  let out = "";
+  for (const s of segs) {
+    if (typeof s === "number") out += `[${s}]`;
+    else if (IDENT.test(s)) out += out ? `.${s}` : s;
+    else out += `[${JSON.stringify(s)}]`;
+  }
+  return out;
+}
+function pointerPath(segs) {
+  return segs.map((s) => "/" + String(s).replace(/~/g, "~0").replace(/\//g, "~1")).join("");
+}
+function isBranch(n) {
+  return (n.kind === "object" || n.kind === "array") && n.entries.length > 0;
+}
+function leafText(n) {
+  switch (n.kind) {
+    case "string":
+      return JSON.stringify(n.value);
+    case "number":
+    case "boolean":
+      return String(n.value);
+    case "null":
+      return "null";
+    case "tag":
+      return n.text;
+    case "array":
+      return n.entries.length ? "[\u2026]" : "[]";
+    case "object":
+      return n.entries.length ? "{\u2026}" : "{}";
+  }
+}
+function valueRole(n) {
+  switch (n.kind) {
+    case "string":
+      return "str";
+    case "number":
+      return "num";
+    case "boolean":
+      return "kw";
+    default:
+      return "faint";
+  }
+}
+var TOKEN = /("(?:[^"\\]|\\.)*")(\s*:)?|(-?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?)|\b(true|false)\b|\b(null)\b/g;
+function tokenizeJsonLine(line) {
+  const out = [];
+  let last = 0;
+  for (const m of line.matchAll(TOKEN)) {
+    const at = m.index ?? 0;
+    if (at > last) out.push({ text: line.slice(last, at), role: "punct" });
+    if (m[1] !== void 0) {
+      out.push({ text: m[1], role: m[2] !== void 0 ? "key" : "str" });
+      if (m[2]) out.push({ text: m[2], role: "punct" });
+    } else if (m[3] !== void 0) out.push({ text: m[3], role: "num" });
+    else if (m[4] !== void 0) out.push({ text: m[4], role: "kw" });
+    else out.push({ text: m[5] ?? "", role: "faint" });
+    last = at + m[0].length;
+  }
+  if (last < line.length) out.push({ text: line.slice(last), role: "punct" });
+  return out;
+}
+function byteSize(text) {
+  let n = 0;
+  for (const ch of text) {
+    const c = ch.codePointAt(0) ?? 0;
+    n += c < 128 ? 1 : c < 2048 ? 2 : c < 65536 ? 3 : 4;
+  }
+  if (n < 1024) return `${n} B`;
+  if (n < 1024 * 1024) return `${(n / 1024).toFixed(1)} KB`;
+  return `${(n / 1024 / 1024).toFixed(1)} MB`;
+}
+var fmtN = (n) => n.toLocaleString("en-US");
+var DEFAULT_LABELS = {
+  tree: "Tree",
+  raw: "Raw",
+  collapseAll: "Collapse all",
+  find: "Find",
+  findPlaceholder: "Find keys and values",
+  closeFind: "Close find",
+  copyJson: "Copy JSON",
+  root: "(root)",
+  treeUnavailable: "Fix the JSON to use Tree",
+  copyValue: "Copy value",
+  copyPath: "Copy path",
+  copied: "Copied",
+  expandAll: "Expand all",
+  back: "Back",
+  keys: (n) => `${fmtN(n)} ${n === 1 ? "key" : "keys"}`,
+  items: (n) => `${fmtN(n)} ${n === 1 ? "item" : "items"}`,
+  moreChars: (n) => `+${fmtN(n)} chars`,
+  showMore: (n, left) => `Show ${fmtN(n)} more \xB7 ${fmtN(left)} left`,
+  empty: "No data",
+  parseError: (reason, line, column) => `${reason} on line ${line}, column ${column}.`,
+  types: {
+    object: "object",
+    array: "array",
+    string: "string",
+    number: "number",
+    boolean: "boolean",
+    null: "null",
+    tag: "value"
+  },
+  collapsed: "collapsed",
+  expanded: "expanded",
+  selected: "selected"
+};
+var MAX_INDENT_DEPTH = 3;
+function collectBranches(node, maxDepth, base = []) {
+  const out = [];
+  const walk = (n, segs, depth) => {
+    if (!isBranch(n)) return;
+    for (const [k, x] of n.entries) {
+      if (!isBranch(x) || depth >= maxDepth) continue;
+      const s = [...segs, k];
+      out.push(dotPath(s));
+      walk(x, s, depth + 1);
+    }
+  };
+  walk(node, base, 0);
+  return out;
+}
+function findAncestors(node, q) {
+  const lq = q.toLowerCase();
+  const open = /* @__PURE__ */ new Set();
+  const walk = (n, segs, anc) => {
+    if (!isBranch(n)) return;
+    for (const [k, x] of n.entries) {
+      const s = [...segs, k];
+      const hit = typeof k === "string" && k.toLowerCase().includes(lq) || !isBranch(x) && leafText(x).toLowerCase().includes(lq);
+      if (hit) anc.forEach((a) => open.add(a));
+      if (isBranch(x)) walk(x, s, [...anc, dotPath(s)]);
+    }
+  };
+  walk(node, [], []);
+  return open;
+}
+function nodeAt(root, segs) {
+  let n = root;
+  for (const s of segs) {
+    if (!n || !isBranch(n)) return null;
+    const hit = n.entries.find(
+      ([k]) => k === s
+    );
+    n = hit ? hit[1] : null;
+  }
+  return n;
+}
+function JsonInspector({
+  value,
+  name,
+  view: viewProp,
+  defaultView = "tree",
+  onViewChange,
+  findable = true,
+  showPath = true,
+  defaultExpandDepth = 1,
+  selectedPath: selectedProp,
+  onSelect,
+  query = "",
+  onCopy,
+  copiedPath,
+  onDrillChange,
+  pageSize = 100,
+  truncateAt = 80,
+  loading = false,
+  error,
+  pathStyle = "dot",
+  emptyDescription,
+  platform,
+  size = "md",
+  density = "comfortable",
+  disabled = false,
+  variant = "filled",
+  labels: labelsProp,
+  testID
+}) {
+  const labels = useLabels("jsonInspector", DEFAULT_LABELS, labelsProp);
+  const theme = useLoamTheme("json-inspector");
+  const { styles } = useStyles(sheet);
+  const android = isAndroidIdiom(theme, platform);
+  const ink = {
+    key: theme.codePanel.key,
+    str: theme.codePanel.str,
+    num: theme.codePanel.num,
+    kw: theme.codePanel.kw,
+    faint: theme.codePanel.faint,
+    punct: theme.codePanel.fg
+  };
+  const metrics0 = {
+    sm: {
+      row: theme.space[22],
+      font: theme.fontSize[12],
+      line: theme.space[18],
+      indent: theme.space[14],
+      slot: theme.space[14],
+      chev: theme.space[12]
+    },
+    md: {
+      row: theme.space[26],
+      font: theme.fontSize[13],
+      line: theme.space[20],
+      indent: theme.space[16],
+      slot: theme.space[16],
+      chev: theme.space[14]
+    },
+    lg: {
+      row: theme.space[30],
+      font: theme.fontSize[14],
+      line: theme.space[22],
+      indent: theme.space[18],
+      slot: theme.space[18],
+      chev: theme.space[16]
+    }
+  }[size];
+  const metrics = density === "compact" ? { ...metrics0, row: metrics0.row - theme.space[4] } : metrics0;
+  const step = metrics.indent;
+  const mono = theme.font.mono;
+  const hairline = theme.overlay.a4;
+  const input = React.useMemo(() => readJsonInput(value), [value]);
+  const root = input.status === "ok" ? input.node : null;
+  const [open, setOpen] = React.useState(
+    () => new Set(root ? collectBranches(root, defaultExpandDepth - 1) : [])
+  );
+  const [ownSelected, setOwnSelected] = React.useState(null);
+  const selected = selectedProp !== void 0 ? selectedProp : ownSelected;
+  const [copiedId, setCopiedId] = React.useState(null);
+  const copiedTimer = React.useRef(void 0);
+  React.useEffect(() => () => clearTimeout(copiedTimer.current), []);
+  const flashCopied = (id) => {
+    setCopiedId(id);
+    clearTimeout(copiedTimer.current);
+    copiedTimer.current = setTimeout(() => setCopiedId(null), 1500);
+  };
+  const [wrapped, setWrapped] = React.useState(() => /* @__PURE__ */ new Set());
+  const [shown, setShown] = React.useState({});
+  const [stack, setStack] = React.useState([]);
+  const level = stack[stack.length - 1] ?? null;
+  const [ownView, setOwnView] = React.useState(defaultView);
+  const [ownQuery, setOwnQuery] = React.useState(query);
+  const [findOpen, setFindOpen] = React.useState(query.trim() !== "");
+  React.useEffect(() => setOwnQuery(query), [query]);
+  const hasBand = name !== void 0;
+  const invalid = input.status === "invalid";
+  const view = invalid ? "raw" : viewProp ?? ownView;
+  const setView = (v) => {
+    const next = v === "raw" ? "raw" : "tree";
+    if (viewProp === void 0) setOwnView(next);
+    onViewChange?.(next);
+  };
+  const q = (findable && hasBand ? ownQuery : query).trim();
+  const findAnc = React.useMemo(() => root && q ? findAncestors(root, q) : null, [root, q]);
+  const pop = React.useCallback(() => {
+    if (!stack.length) return false;
+    const next = stack.slice(0, -1);
+    setStack(next);
+    const top = next[next.length - 1];
+    onDrillChange?.(top ? dotPath(top) : null);
+    return true;
+  }, [stack, onDrillChange]);
+  React.useEffect(() => {
+    if (!android || !stack.length) return void 0;
+    const sub = BackHandler.addEventListener("hardwareBackPress", pop);
+    return () => sub.remove();
+  }, [android, stack.length, pop]);
+  const rows = React.useMemo(() => {
+    const out = [];
+    if (!root) return out;
+    const base = level ?? [];
+    const start = level ? nodeAt(root, level) : root;
+    if (!start) return out;
+    if (!isBranch(start)) {
+      out.push({
+        type: "node",
+        id: dotPath(base),
+        segs: base,
+        node: start,
+        depth: 0,
+        open: false,
+        drill: false
+      });
+      return out;
+    }
+    const walk = (n, segs, depth) => {
+      if (!isBranch(n)) return;
+      const entries = n.entries;
+      const pid = dotPath(segs);
+      const limit = n.kind === "array" ? shown[pid] ?? pageSize : entries.length;
+      for (const [k, x] of entries.slice(0, limit)) {
+        const s = [...segs, k];
+        const id = dotPath(s);
+        const drill = isBranch(x) && s.length > MAX_INDENT_DEPTH;
+        const isOpen = isBranch(x) && !drill && (open.has(id) || (findAnc?.has(id) ?? false));
+        out.push({ type: "node", id, segs: s, key: k, node: x, depth, open: isOpen, drill });
+        if (isOpen) walk(x, s, depth + 1);
+      }
+      if (entries.length > limit) {
+        out.push({
+          type: "more",
+          id: `${pid}#more`,
+          parent: pid,
+          depth,
+          left: entries.length - limit
+        });
+      }
+    };
+    walk(start, base, 0);
+    return out;
+  }, [root, level, open, findAnc, shown, pageSize]);
+  const select = (r) => {
+    if (selectedProp === void 0) setOwnSelected(r.id);
+    onSelect?.(r.id, formatJson(r.node));
+  };
+  const toggle = (r, deep = false) => {
+    const next = new Set(open);
+    const ids = [r.id, ...deep ? collectBranches(r.node, Infinity, r.segs) : []];
+    const opening = deep || !r.open;
+    for (const id of ids) {
+      if (opening) next.add(id);
+      else next.delete(id);
+    }
+    setOpen(next);
+  };
+  const press = (r) => {
+    if (disabled) return;
+    select(r);
+    if (r.drill) {
+      setStack((s) => [...s, r.segs]);
+      onDrillChange?.(r.id);
+    } else if (isBranch(r.node)) toggle(r);
+    else if (r.node.kind === "string" && r.node.value.length > truncateAt) {
+      setWrapped((w) => {
+        const n = new Set(w);
+        if (n.has(r.id)) n.delete(r.id);
+        else n.add(r.id);
+        return n;
+      });
+    }
+  };
+  const fmtPath = (segs) => pathStyle === "pointer" ? pointerPath(segs) : dotPath(segs);
+  const marked = (text, color) => {
+    if (!q) return text;
+    const lt = text.toLowerCase();
+    const lq = q.toLowerCase();
+    const out = [];
+    let last = 0;
+    for (let i = lt.indexOf(lq); i >= 0; i = lt.indexOf(lq, i + lq.length)) {
+      if (i > last) out.push(text.slice(last, i));
+      out.push(
+        /* @__PURE__ */ jsx(Text, { testID: "json-match", style: [styles.mark, { color: theme.color.text }], children: text.slice(i, i + q.length) }, i)
+      );
+      last = i + q.length;
+    }
+    if (!out.length) return text;
+    if (last < text.length) out.push(text.slice(last));
+    return /* @__PURE__ */ jsx(Text, { style: { color }, children: out });
+  };
+  const allBranches = React.useMemo(() => root ? collectBranches(root, Infinity) : [], [root]);
+  const allOpen = allBranches.length > 0 && allBranches.every((id) => open.has(id));
+  const selectedRow = rows.find((r) => r.type === "node" && r.id === selected);
+  const footPath = selectedRow && selectedRow.type === "node" ? fmtPath(selectedRow.segs) : selected ? selected : labels.root;
+  const treeView = view === "tree" && !invalid;
+  const rowType = { fontFamily: mono, fontSize: metrics.font, lineHeight: metrics.line };
+  const body = (() => {
+    if (loading) {
+      return /* @__PURE__ */ jsx(View, { accessibilityState: { busy: true }, testID: "json-inspector-loading", children: [
+        [0, 72, 120],
+        [0, 56, 88],
+        [1, 64, 140],
+        [1, 48, 64],
+        [0, 80, 96]
+      ].map(([d, kw, vw], i) => /* @__PURE__ */ jsxs(
+        View,
+        {
+          style: [
+            styles.row,
+            { minHeight: metrics.row, paddingStart: theme.space[8] + step * (d ?? 0) }
+          ],
+          children: [
+            /* @__PURE__ */ jsx(Skeleton, { width: kw, height: theme.space[10], radius: "xs" }),
+            /* @__PURE__ */ jsx(Skeleton, { width: vw, height: theme.space[10], radius: "xs" })
+          ]
+        },
+        i
+      )) });
+    }
+    if (input.status === "empty") {
+      return /* @__PURE__ */ jsxs(View, { style: styles.empty, children: [
+        /* @__PURE__ */ jsx(Text, { style: styles.emptyTitle, children: labels.empty }),
+        emptyDescription ? /* @__PURE__ */ jsx(Text, { style: styles.emptyBody, children: emptyDescription }) : null
+      ] });
+    }
+    if (view === "raw" && root) {
+      return /* @__PURE__ */ jsx(View, { style: styles.raw, children: formatJson(root).split("\n").map((line, i) => /* @__PURE__ */ jsxs(View, { style: styles.rawLine, children: [
+        /* @__PURE__ */ jsx(Text, { style: [styles.gutter, { fontFamily: mono }], children: i + 1 }),
+        /* @__PURE__ */ jsx(Text, { style: [styles.rawText, { fontFamily: mono }], children: tokenizeJsonLine(line).map((t, k) => /* @__PURE__ */ jsx(Text, { style: { color: ink[t.role] }, children: marked(t.text, ink[t.role]) }, k)) })
+      ] }, i)) });
+    }
+    if (input.status === "invalid") {
+      return /* @__PURE__ */ jsx(View, { style: styles.raw, children: input.text.split("\n").map((line, i) => /* @__PURE__ */ jsxs(
+        View,
+        {
+          testID: i + 1 === input.error.line ? "json-invalid-line" : void 0,
+          style: [
+            styles.rawLine,
+            i + 1 === input.error.line ? { backgroundColor: theme.overlay.a2 } : null
+          ],
+          children: [
+            /* @__PURE__ */ jsx(Text, { style: [styles.gutter, { fontFamily: mono }], children: i + 1 }),
+            /* @__PURE__ */ jsx(
+              Text,
+              {
+                style: [
+                  styles.rawText,
+                  { fontFamily: mono },
+                  i + 1 === input.error.line ? {
+                    textDecorationLine: "underline",
+                    textDecorationStyle: "dotted",
+                    textDecorationColor: theme.codePanel.danger
+                  } : null
+                ],
+                children: line
+              }
+            )
+          ]
+        },
+        i
+      )) });
+    }
+    return rows.map((r) => {
+      const indent = { paddingStart: theme.space[8] + step * r.depth };
+      if (r.type === "more") {
+        return /* @__PURE__ */ jsxs(
+          Pressable,
+          {
+            accessibilityRole: "button",
+            onPress: () => setShown((s) => ({ ...s, [r.parent]: (s[r.parent] ?? pageSize) + pageSize })),
+            android_ripple: android ? { color: theme.state.pressed } : void 0,
+            style: [styles.row, indent, { minHeight: metrics.row }],
+            children: [
+              /* @__PURE__ */ jsx(View, { style: [styles.slot, { width: metrics.slot }] }),
+              /* @__PURE__ */ jsx(Text, { style: [rowType, { color: theme.codePanel.muted }], children: labels.showMore(Math.min(pageSize, r.left), r.left) })
+            ]
+          },
+          r.id
+        );
+      }
+      const sel = selected === r.id;
+      const n = r.node;
+      const branch = isBranch(n);
+      let text = leafText(n);
+      let more = "";
+      if (n.kind === "object" || n.kind === "array") {
+        if (n.entries.length) {
+          more = n.kind === "array" ? labels.items(n.entries.length) : labels.keys(n.entries.length);
+          if (r.open) text = "";
+        }
+      } else if (n.kind === "string" && n.value.length > truncateAt && !wrapped.has(r.id)) {
+        text = `"${n.value.slice(0, truncateAt)}\u2026`;
+        more = labels.moreChars(n.value.length - truncateAt);
+      }
+      const keyText = r.key === void 0 ? "" : String(r.key);
+      const spoken0 = n.kind === "object" || n.kind === "array" ? [
+        keyText,
+        labels.types[n.kind],
+        more,
+        branch && !r.drill ? r.open ? labels.expanded : labels.collapsed : ""
+      ].filter(Boolean).join(", ") : `${keyText}, ${labels.types[n.kind]}, ${n.kind === "string" ? n.value : leafText(n)}`;
+      const spoken = sel ? `${spoken0}, ${labels.selected}` : spoken0;
+      const menu = [
+        {
+          key: "value",
+          label: labels.copyValue,
+          icon: "copy",
+          onSelect: () => {
+            onCopy?.(formatJson(n), "value");
+            flashCopied(r.id);
+          }
+        },
+        {
+          key: "path",
+          label: labels.copyPath,
+          icon: "link",
+          onSelect: () => {
+            onCopy?.(fmtPath(r.segs), "path");
+            flashCopied(r.id);
+          }
+        },
+        ...!android && branch && !r.drill ? [
+          {
+            key: "expand",
+            label: labels.expandAll,
+            icon: "chevrons-up-down",
+            onSelect: () => toggle(r, true)
+          }
+        ] : []
+      ];
+      const rowMenu = /* @__PURE__ */ jsx(
+        ContextMenu,
+        {
+          items: menu,
+          platform: android ? "android" : "ios",
+          accessibilityLabel: spoken,
+          onPress: () => press(r),
+          androidRipple: android ? { color: theme.state.pressed } : void 0,
+          radius: 0,
+          children: /* @__PURE__ */ jsxs(
+            View,
+            {
+              testID: `json-row-${r.id}`,
+              style: [
+                styles.row,
+                indent,
+                { minHeight: metrics.row },
+                sel ? { backgroundColor: theme.overlay.a2 } : null
+              ],
+              children: [
+                Array.from({ length: r.depth }, (_, g) => /* @__PURE__ */ jsx(
+                  View,
+                  {
+                    pointerEvents: "none",
+                    style: [
+                      styles.guide,
+                      {
+                        backgroundColor: hairline,
+                        start: theme.space[8] + step * g + metrics.slot / 2
+                      }
+                    ]
+                  },
+                  g
+                )),
+                /* @__PURE__ */ jsx(View, { style: [styles.slot, { width: metrics.slot }], children: branch && !r.drill ? /* @__PURE__ */ jsx(View, { style: r.open ? styles.rotated : null, children: /* @__PURE__ */ jsx(
+                  Icon,
+                  {
+                    name: "chevron-right",
+                    size: metrics.chev,
+                    color: sel ? theme.color.accentStrong : theme.codePanel.faint
+                  }
+                ) }) : sel && !branch ? /* @__PURE__ */ jsx(
+                  View,
+                  {
+                    testID: "json-leaf-dot",
+                    style: [styles.dot, { backgroundColor: theme.color.accentStrong }]
+                  }
+                ) : null }),
+                keyText ? /* @__PURE__ */ jsxs(
+                  Text,
+                  {
+                    style: [
+                      rowType,
+                      { color: typeof r.key === "number" ? ink.faint : ink.key },
+                      sel ? styles.keySel : styles.keyRest
+                    ],
+                    children: [
+                      typeof r.key === "number" ? keyText : marked(keyText, ink.key),
+                      /* @__PURE__ */ jsx(Text, { style: { color: ink.faint }, children: ":" })
+                    ]
+                  }
+                ) : null,
+                text ? /* @__PURE__ */ jsx(
+                  Text,
+                  {
+                    numberOfLines: wrapped.has(r.id) ? void 0 : 1,
+                    style: [rowType, styles.value, { color: ink[valueRole(n)] }],
+                    children: marked(text, ink[valueRole(n)])
+                  }
+                ) : null,
+                more ? /* @__PURE__ */ jsx(Text, { style: [styles.more, { fontFamily: mono }], children: more }) : null,
+                r.id === copiedId || r.id === copiedPath ? /* @__PURE__ */ jsxs(View, { style: styles.copiedTag, children: [
+                  /* @__PURE__ */ jsx(Icon, { name: "check", size: metrics.chev, color: theme.codePanel.good }),
+                  /* @__PURE__ */ jsx(Text, { style: styles.copiedText, children: labels.copied })
+                ] }) : null,
+                r.drill ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(View, { style: styles.fill }),
+                  /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: metrics.chev, color: theme.codePanel.faint })
+                ] }) : sel ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(View, { style: styles.fill }),
+                  /* @__PURE__ */ jsx(View, { style: { width: theme.ctl.icon.xs + 2 * theme.ctl.px.xs } })
+                ] }) : null
+              ]
+            }
+          )
+        }
+      );
+      if (!sel || r.drill) return /* @__PURE__ */ jsx(React.Fragment, { children: rowMenu }, r.id);
+      return /* @__PURE__ */ jsxs(View, { children: [
+        rowMenu,
+        /* @__PURE__ */ jsx(View, { pointerEvents: "box-none", style: [styles.copyOverlay, { minHeight: metrics.row }], children: /* @__PURE__ */ jsx(
+          CopyButton,
+          {
+            size: "xs",
+            accessibilityLabel: labels.copyValue,
+            onCopy: () => {
+              onCopy?.(formatJson(n), "value");
+              flashCopied(r.id);
+            }
+          }
+        ) })
+      ] }, r.id);
+    });
+  })();
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      testID,
+      accessibilityState: disabled ? { disabled: true } : void 0,
+      "aria-disabled": disabled || void 0,
+      pointerEvents: disabled ? "none" : void 0,
+      style: [
+        styles.panel,
+        variant === "elevated" ? styles.raised : null,
+        variant === "outline" ? styles.outline : null,
+        variant === "plain" ? styles.flat : null,
+        disabled ? { opacity: theme.state.disabledOpacity } : null
+      ],
+      children: [
+        hasBand ? /* @__PURE__ */ jsxs(View, { style: styles.band, children: [
+          /* @__PURE__ */ jsx(
+            View,
+            {
+              testID: "json-dot",
+              style: [styles.statusDot, { backgroundColor: theme.color.accent }]
+            }
+          ),
+          /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: [styles.name, { fontFamily: mono }], children: name }),
+          /* @__PURE__ */ jsx(Text, { style: [styles.size, { fontFamily: mono }], children: byteSize(input.status === "invalid" ? input.text : root ? formatJson(root) : "") }),
+          /* @__PURE__ */ jsx(View, { style: styles.fill }),
+          /* @__PURE__ */ jsx(
+            SegmentedControl,
+            {
+              size: "xs",
+              items: [
+                { value: "tree", label: labels.tree },
+                { value: "raw", label: labels.raw }
+              ],
+              value: view,
+              onValueChange: setView,
+              disabled: invalid,
+              accessibilityLabel: invalid ? labels.treeUnavailable : labels.tree
+            }
+          ),
+          treeView ? /* @__PURE__ */ jsx(
+            Pressable,
+            {
+              accessibilityRole: "button",
+              accessibilityLabel: allOpen ? labels.collapseAll : labels.expandAll,
+              onPress: () => setOpen(allOpen ? /* @__PURE__ */ new Set() : new Set(allBranches)),
+              style: styles.bandBtn,
+              children: /* @__PURE__ */ jsx(Icon, { name: "chevrons-up-down", size: theme.ctl.icon.xs, color: theme.codePanel.dim })
+            }
+          ) : null,
+          findable ? /* @__PURE__ */ jsx(
+            Pressable,
+            {
+              accessibilityRole: "button",
+              accessibilityLabel: labels.find,
+              accessibilityState: { selected: findOpen },
+              onPress: () => setFindOpen((o) => !o),
+              style: styles.bandBtn,
+              children: /* @__PURE__ */ jsx(Icon, { name: "search", size: theme.ctl.icon.xs, color: theme.codePanel.dim })
+            }
+          ) : null,
+          /* @__PURE__ */ jsx(
+            CopyButton,
+            {
+              size: "xs",
+              accessibilityLabel: labels.copyJson,
+              onCopy: () => onCopy?.(root ? formatJson(root) : "", "value")
+            }
+          )
+        ] }) : null,
+        hasBand && findable && findOpen ? /* @__PURE__ */ jsxs(View, { testID: "json-find", accessibilityRole: "search", style: styles.find, children: [
+          /* @__PURE__ */ jsx(
+            TextInput,
+            {
+              value: ownQuery,
+              onChangeText: setOwnQuery,
+              placeholder: labels.findPlaceholder,
+              placeholderTextColor: theme.codePanel.muted,
+              accessibilityLabel: labels.find,
+              autoCapitalize: "none",
+              autoCorrect: false,
+              style: [styles.findInput, { fontFamily: mono }]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Pressable,
+            {
+              accessibilityRole: "button",
+              accessibilityLabel: labels.closeFind,
+              onPress: () => {
+                setOwnQuery("");
+                setFindOpen(false);
+              },
+              style: styles.bandBtn,
+              children: /* @__PURE__ */ jsx(Icon, { name: "x", size: theme.ctl.icon.xs, color: theme.codePanel.dim })
+            }
+          )
+        ] }) : null,
+        level ? /* @__PURE__ */ jsxs(View, { style: [styles.nav, { minHeight: theme.space[android ? 56 : 52] }], children: [
+          /* @__PURE__ */ jsx(
+            Pressable,
+            {
+              accessibilityRole: "button",
+              accessibilityLabel: labels.back,
+              onPress: pop,
+              hitSlop: theme.space[8],
+              style: styles.back,
+              children: /* @__PURE__ */ jsx(
+                Icon,
+                {
+                  name: android ? "arrow-left" : "chevron-left",
+                  size: theme.space[20],
+                  color: theme.codePanel.dim
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxs(View, { style: styles.navText, children: [
+            /* @__PURE__ */ jsx(
+              Text,
+              {
+                accessibilityRole: "header",
+                numberOfLines: 1,
+                style: [styles.navTitle, { fontSize: metrics.font }],
+                children: String(level[level.length - 1])
+              }
+            ),
+            /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: [styles.navSub, { fontFamily: mono }], children: fmtPath(level) })
+          ] })
+        ] }) : null,
+        error ? /* @__PURE__ */ jsx(View, { style: styles.alert, children: /* @__PURE__ */ jsx(Alert, { tone: "danger", size: "compact", title: error }) }) : null,
+        input.status === "invalid" ? /* @__PURE__ */ jsx(View, { style: styles.alert, children: /* @__PURE__ */ jsx(
+          Alert,
+          {
+            tone: "danger",
+            size: "compact",
+            title: labels.parseError(input.error.reason, input.error.line, input.error.column)
+          }
+        ) }) : null,
+        body,
+        hasBand && showPath ? /* @__PURE__ */ jsxs(View, { testID: "json-foot", style: styles.foot, children: [
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              numberOfLines: 1,
+              ellipsizeMode: "head",
+              style: [styles.footPath, { fontFamily: mono }],
+              children: footPath
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            CopyButton,
+            {
+              size: "xs",
+              accessibilityLabel: labels.copyPath,
+              onCopy: () => onCopy?.(footPath, "path")
+            }
+          )
+        ] }) : null
+      ]
+    }
+  );
+}
+var sheet = createStyleSheet((theme) => ({
+  panel: {
+    borderRadius: theme.radius.lg,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.overlay.a5,
+    backgroundColor: theme.codePanel.bg,
+    overflow: "hidden"
+  },
+  raised: { ...theme.shadow.sm },
+  outline: { borderColor: theme.color.borderStrong },
+  flat: { borderWidth: 0, borderRadius: 0 },
+  nav: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space[8],
+    paddingHorizontal: theme.space[12],
+    borderBottomWidth: theme.borderWidth.base,
+    borderBottomColor: theme.overlay.a4
+  },
+  back: { width: theme.space[24], alignItems: "center" },
+  navText: { flex: 1, minWidth: 0, gap: theme.space[2] },
+  navTitle: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.semibold,
+    color: theme.codePanel.fg
+  },
+  navSub: {
+    fontSize: theme.fontSize[12],
+    fontWeight: theme.fontWeight.medium,
+    color: theme.codePanel.muted
+  },
+  band: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space[8],
+    minHeight: theme.space[40],
+    paddingHorizontal: theme.space[12],
+    borderBottomWidth: theme.borderWidth.base,
+    borderBottomColor: theme.overlay.a4
+  },
+  statusDot: { width: theme.space[8], height: theme.space[8], borderRadius: theme.radius.full },
+  name: {
+    flexShrink: 1,
+    fontSize: theme.fontSize[13],
+    fontWeight: theme.fontWeight.medium,
+    color: theme.codePanel.muted
+  },
+  size: { fontSize: theme.fontSize[12], color: theme.codePanel.faint },
+  bandBtn: {
+    width: theme.ctl.xs,
+    height: theme.ctl.xs,
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: theme.radius.sm
+  },
+  find: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space[8],
+    paddingHorizontal: theme.space[12],
+    paddingVertical: theme.space[6],
+    borderBottomWidth: theme.borderWidth.base,
+    borderBottomColor: theme.overlay.a4
+  },
+  findInput: {
+    flex: 1,
+    minWidth: 0,
+    height: theme.ctl.xs,
+    paddingHorizontal: theme.space[8],
+    fontSize: theme.fontSize[13],
+    color: theme.codePanel.fg,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.overlay.a6,
+    borderRadius: theme.radius.sm,
+    backgroundColor: theme.overlay.a2
+  },
+  foot: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space[8],
+    minHeight: theme.space[36],
+    paddingHorizontal: theme.space[12],
+    borderTopWidth: theme.borderWidth.base,
+    borderTopColor: theme.overlay.a4
+  },
+  footPath: { flex: 1, minWidth: 0, fontSize: theme.fontSize[12], color: theme.codePanel.muted },
+  alert: { padding: theme.space[8] },
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 0,
+    paddingEnd: theme.space[12]
+  },
+  copyOverlay: {
+    position: "absolute",
+    top: 0,
+    bottom: 0,
+    end: theme.space[12],
+    justifyContent: "center"
+  },
+  guide: { position: "absolute", top: 0, bottom: 0, width: theme.borderWidth.base },
+  slot: {
+    width: theme.space[16],
+    height: theme.space[20],
+    marginEnd: theme.space[4],
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  rotated: { transform: [{ rotate: "90deg" }] },
+  dot: { width: theme.space[6], height: theme.space[6], borderRadius: theme.radius.full },
+  keyRest: { fontWeight: theme.fontWeight.medium },
+  keySel: { fontWeight: theme.fontWeight.semibold },
+  value: { marginStart: theme.space[8], flexShrink: 1, fontWeight: theme.fontWeight.medium },
+  more: {
+    marginStart: theme.space[8],
+    fontSize: theme.fontSize[12],
+    fontWeight: theme.fontWeight.medium,
+    color: theme.codePanel.faint
+  },
+  fill: { flex: 1 },
+  copiedTag: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space[4],
+    marginStart: theme.space[8]
+  },
+  copiedText: {
+    fontSize: theme.fontSize[12],
+    fontWeight: theme.fontWeight.medium,
+    color: theme.codePanel.good
+  },
+  // loam-contrast-ignore — inline search-match highlight on text; a Text span cannot carry a border.
+  mark: { backgroundColor: theme.color.accentSoft, borderRadius: theme.radius.xs },
+  empty: {
+    alignItems: "center",
+    gap: theme.space[4],
+    paddingVertical: theme.space[32],
+    paddingHorizontal: theme.space[16]
+  },
+  emptyTitle: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[14],
+    fontWeight: theme.fontWeight.semibold,
+    color: theme.codePanel.fg
+  },
+  emptyBody: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[13],
+    color: theme.codePanel.muted,
+    textAlign: "center"
+  },
+  raw: { paddingVertical: theme.space[12] },
+  rawLine: { flexDirection: "row" },
+  gutter: {
+    width: theme.space[44],
+    paddingEnd: theme.space[12],
+    textAlign: "right",
+    fontSize: theme.fontSize[13],
+    lineHeight: theme.space[22],
+    color: theme.codePanel.faint
+  },
+  rawText: {
+    fontSize: theme.fontSize[13],
+    lineHeight: theme.space[22],
+    color: theme.codePanel.fg,
+    flexShrink: 1
+  }
+}));
+
+export { JsonInspector, dotPath, formatJson, pointerPath, readJsonInput };