@pythia-software/query-table-ui 0.9.7 → 0.9.8

package/dist/index.js

@@ -389,7 +389,8 @@ function metricFormatFromMeasure(clause, measure) {
 }
 
 // src/JsonCell.tsx
-import { useEffect as useEffect3, useMemo, useRef as useRef2, useState as useState3 } from "react";
+import { useEffect as useEffect3, useLayoutEffect as useLayoutEffect2, useMemo, useRef as useRef2, useState as useState3 } from "react";
+import { jsonInspectionScopeKey } from "@pythia-software/query-table-core";
 
 // src/AdaptiveOverlay.tsx
 import {
@@ -467,7 +468,8 @@ function ModalSurface({
   chrome = true,
   returnFocus,
   backdropClassName,
-  initialFocus
+  initialFocus,
+  preserveFocus = false
 }) {
   const mobile = useMobileLayout();
   const titleId = useId();
@@ -506,7 +508,7 @@ function ModalSurface({
       document.body.style.overflow = "hidden";
     }
     modalStack.push(element);
-    (element.querySelector(initialFocus ?? ":not(*)") ?? element).focus();
+    if (!preserveFocus) (element.querySelector(initialFocus ?? ":not(*)") ?? element).focus();
     const isTop = () => modalStack[modalStack.length - 1] === element;
     const focusable = () => Array.from(
       element.querySelectorAll(
@@ -551,7 +553,7 @@ function ModalSurface({
       }
     };
     const onFocus = (event) => {
-      if (isTop() && !element.contains(event.target)) element.focus();
+      if (!preserveFocus && isTop() && !element.contains(event.target)) element.focus();
     };
     document.addEventListener("keydown", onKey);
     document.addEventListener("focusin", onFocus);
@@ -562,7 +564,7 @@ function ModalSurface({
       if (modalStack.length === 0)
         document.body.style.overflow = originalOverflow;
       const destination = focusDestination.current ?? previous;
-      if (destination?.isConnected) destination.focus({ preventScroll: true });
+      if (!preserveFocus && destination?.isConnected) destination.focus({ preventScroll: true });
     };
   }, [mobile]);
   const content = /* @__PURE__ */ jsx2(
@@ -853,9 +855,37 @@ function jsonSearchMatches(entries, search) {
 
 // src/JsonCell.tsx
 import { Fragment as Fragment3, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-function JsonCell({ value, label = "JSON", display: display2 }) {
-  const [open, setOpen] = useState3(false);
+function JsonCell(props) {
+  const { value, label = "JSON", display: display2 } = props;
   const inspection = useMemo(() => inspectJsonValue(value, display2, false), [value, display2]);
+  const [state, change] = useInspectionState(props, inspection);
+  const preserveFocus = useRef2(false);
+  const latest = useRef2({ state, change, controlled: props.inspectionState !== void 0 });
+  latest.current = { state, change, controlled: props.inspectionState !== void 0 };
+  const initialized = useRef2(null);
+  const sessionKey = props.inspectionScope ? jsonInspectionScopeKey(props.inspectionScope) : inspection.raw + JSON.stringify(display2);
+  const openInspector = (preserve, full = inspectJsonValue(value, display2)) => {
+    const current = latest.current;
+    const next = current.controlled || initialized.current === sessionKey ? current.state : createJsonInspectionState(full, display2);
+    initialized.current = sessionKey;
+    preserveFocus.current = preserve;
+    current.change({ ...next, open: true });
+  };
+  const scopeKey = props.inspectionScope ? jsonInspectionScopeKey(props.inspectionScope) : "";
+  useEffect3(() => {
+    if (!props.attention || !props.inspectionScope || state.open || value == null || value === "") return;
+    const registry = props.attention;
+    const target = props.inspectionScope;
+    const provider = { reveal: async (destination, signal) => {
+      if (signal.aborted) return false;
+      const full = inspectJsonValue(value, display2);
+      if (destination.path && !full.entries.some((entry) => entry.path === destination.path)) return false;
+      openInspector(true, full);
+      const mounted = await registry.whenRegistered(target, signal, provider);
+      return signal.aborted ? false : mounted.reveal(destination, signal);
+    } };
+    return registry.register(target, provider);
+  }, [props.attention, scopeKey, state.open, inspection]);
   if (value == null || value === "") return /* @__PURE__ */ jsx3("span", { className: "qt-muted", children: "\u2014" });
   return /* @__PURE__ */ jsxs3("div", { className: "qt-json-cell", children: [
     /* @__PURE__ */ jsx3(
@@ -866,28 +896,54 @@ function JsonCell({ value, label = "JSON", display: display2 }) {
         title: inspection.error ?? "Open in JSON Viewer",
         "aria-label": `Inspect ${label}`,
         "aria-haspopup": "dialog",
+        "aria-expanded": state.open,
         onClick: (event) => {
           event.stopPropagation();
-          setOpen(true);
+          openInspector(false);
         },
         onDoubleClick: (event) => event.stopPropagation(),
         children: /* @__PURE__ */ jsx3("span", { className: "qt-json-badge", children: inspection.error ? "JSON?" : "JSON" })
       }
     ),
     /* @__PURE__ */ jsx3("code", { className: "qt-json-preview-text", title: inspection.error ?? inspection.preview, children: inspection.preview }),
-    open && /* @__PURE__ */ jsx3(JsonViewerModal, { value, label, display: display2, onClose: () => setOpen(false) })
+    state.open && /* @__PURE__ */ jsx3(JsonViewerModal, { ...props, preserveFocus: preserveFocus.current, inspectionState: state, onInspectionStateChange: change, onClose: () => change({ ...state, open: false }) })
   ] });
 }
-function JsonViewerModal({ value, label = "JSON", display: display2, onClose, returnFocus }) {
+function JsonViewerModal({ onClose, returnFocus, preserveFocus, ...props }) {
+  const { value, label = "JSON", display: display2 } = props;
   const inspection = useMemo(() => inspectJsonValue(value, display2), [value, display2]);
-  return /* @__PURE__ */ jsx3("span", { onClick: (event) => event.stopPropagation(), onDoubleClick: (event) => event.stopPropagation(), onContextMenu: (event) => event.stopPropagation(), children: /* @__PURE__ */ jsx3(ModalSurface, { title: `${label} \xB7 JSON`, onClose, returnFocus, chrome: false, className: "qt-modal qt-json-inspector", children: /* @__PURE__ */ jsx3(JsonValueContent, { inspection, label, display: display2, onClose }) }) });
+  const [state, change] = useInspectionState(props, inspection);
+  return /* @__PURE__ */ jsx3("span", { onClick: (event) => event.stopPropagation(), onDoubleClick: (event) => event.stopPropagation(), onContextMenu: (event) => event.stopPropagation(), children: /* @__PURE__ */ jsx3(ModalSurface, { title: `${label} \xB7 JSON`, onClose, returnFocus, preserveFocus, chrome: false, className: "qt-modal qt-json-inspector", children: /* @__PURE__ */ jsx3(JsonValueContent, { ...props, inspection, state, change, label, onClose }) }) });
+}
+function createJsonInspectionState(inspection, display2, compact = false) {
+  return {
+    version: 1,
+    open: false,
+    search: "",
+    raw: Boolean(inspection.error),
+    visibleEntryLimit: 200,
+    collapsedPaths: inspection.entries.filter((entry) => entry.children > 0 && (compact || entry.depth > 0 && (display2?.expandDepth === void 0 ? entry.children >= 4 : entry.depth >= boundedJsonOption(display2.expandDepth, 1, 0, 8)))).map((entry) => entry.path),
+    expandedBuckets: [],
+    searchMode: "filter",
+    searchOverrides: []
+  };
 }
-function JsonValueView({ value, label = "JSON", display: display2, compact = false }) {
+function useInspectionState(props, inspection, compact = false) {
+  const key = props.inspectionScope ? jsonInspectionScopeKey(props.inspectionScope) : inspection.raw + JSON.stringify(props.display);
+  const [local, setLocal] = useState3(() => ({ key, state: createJsonInspectionState(inspection, props.display, compact) }));
+  const state = props.inspectionState ?? (local.key === key ? local.state : createJsonInspectionState(inspection, props.display, compact));
+  const change = (next) => {
+    if (props.inspectionState === void 0) setLocal({ key, state: next });
+    props.onInspectionStateChange?.(next);
+  };
+  return [state, change];
+}
+function JsonValueView(props) {
+  const { value, label = "JSON", display: display2, compact = false } = props;
   const inspection = useMemo(() => inspectJsonValue(value, display2), [value, display2]);
+  const [state, change] = useInspectionState(props, inspection, compact);
   if (value == null || value === "") return /* @__PURE__ */ jsx3("span", { className: "qt-muted", children: "\u2014" });
-  return /* @__PURE__ */ jsx3("div", { className: `qt-json-inline${compact ? " qt-json-inline--compact" : ""}`, "data-qt-json-inline": true, children: /* @__PURE__ */ jsx3(JsonValueContent, { inspection, label, display: display2, compact }, `${inspection.raw}
-${JSON.stringify(display2)}
-${compact}`) });
+  return /* @__PURE__ */ jsx3("div", { className: `qt-json-inline${compact ? " qt-json-inline--compact" : ""}`, "data-qt-json-inline": true, children: /* @__PURE__ */ jsx3(JsonValueContent, { ...props, inspection, state, change, label, compact }) });
 }
 function highlight(text, search, entry, part, active) {
   const needle = search.trim().toLowerCase();
@@ -902,22 +958,20 @@ function highlight(text, search, entry, part, active) {
   parts.push(text.slice(start));
   return parts;
 }
-function JsonValueContent({ inspection, label, display: display2, onClose, compact = false }) {
-  const [search, setSearch] = useState3("");
-  const [raw, setRaw] = useState3(Boolean(inspection.error));
+function JsonValueContent({ inspection, label, onClose, compact = false, state, change, inspectionScope, attention, onInspectionResolution }) {
+  const { search, raw, searchMode, visibleEntryLimit: pageSize } = state;
+  const collapsed = useMemo(() => new Set(state.collapsedPaths), [state.collapsedPaths]);
+  const expandedBuckets = useMemo(() => new Set(state.expandedBuckets), [state.expandedBuckets]);
+  const searchOverrides = useMemo(() => new Map(state.searchOverrides.map((entry) => [entry.path, entry.expanded])), [state.searchOverrides]);
   const [copyStatus, setCopyStatus] = useState3("");
-  const [pageSize, setPageSize] = useState3(200);
-  const [collapsed, setCollapsed] = useState3(() => new Set(inspection.entries.filter((entry) => entry.children > 0 && (compact || entry.depth > 0 && (display2?.expandDepth === void 0 ? entry.children >= 4 : entry.depth >= boundedJsonOption(display2.expandDepth, 1, 0, 8)))).map((entry) => entry.path)));
-  const [expandedBuckets, setExpandedBuckets] = useState3(/* @__PURE__ */ new Set());
-  const [searchMode, setSearchMode] = useState3("filter");
-  const [matchIndex, setMatchIndex] = useState3(0);
   const [navigationRequest, setNavigationRequest] = useState3(0);
-  const [searchOverrides, setSearchOverrides] = useState3(/* @__PURE__ */ new Map());
   const contentRef = useRef2(null);
   const searching = Boolean(search.trim());
   const matches = useMemo(() => searchJsonEntries(inspection.entries, search), [inspection, search]);
   const occurrences = useMemo(() => jsonSearchMatches(inspection.entries, search), [inspection, search]);
-  const activeMatch = occurrences[matchIndex];
+  const selectedIndex = state.selectedMatch ? occurrences.findIndex((match) => match.path === state.selectedMatch.path && match.part === state.selectedMatch.part && match.start === state.selectedMatch.start) : 0;
+  const matchIndex = Math.max(0, selectedIndex);
+  const activeMatch = selectedIndex < 0 ? void 0 : occurrences[matchIndex];
   const matchedPaths = useMemo(() => new Set(matches.map((entry) => entry.path)), [matches]);
   const byPath = useMemo(() => new Map(inspection.entries.map((entry) => [entry.path, entry])), [inspection]);
   const presentation = useMemo(() => {
@@ -949,6 +1003,69 @@ function JsonValueContent({ inspection, label, display: display2, onClose, compa
     presentation.expandedBuckets,
     searching ? JSON_MAX_ENTRIES * 2 : pageSize
   ), [inspection, searching, searchMode, matches, presentation, pageSize]);
+  const missingPaths = [...state.collapsedPaths, ...state.expandedBuckets, ...state.searchOverrides.map((entry) => entry.path)].filter((path) => {
+    if (byPath.has(path)) return false;
+    const split = path.lastIndexOf(":bucket:");
+    const parent = byPath.get(path.slice(0, split));
+    return !(split > 0 && parent?.type === "array" && parent.children > Number(path.slice(split + 8)));
+  });
+  const resolutionKey = JSON.stringify([missingPaths, selectedIndex < 0]);
+  const resolutionCallback = useRef2(onInspectionResolution);
+  resolutionCallback.current = onInspectionResolution;
+  useEffect3(() => {
+    resolutionCallback.current?.({ status: missingPaths.length || selectedIndex < 0 ? "unavailable" : "ready", missingPaths, selectedMatchUnavailable: selectedIndex < 0 });
+  }, [resolutionKey]);
+  const [attentionPath, setAttentionPath] = useState3(null);
+  const pendingReveal = useRef2(null);
+  const latest = useRef2({ state, change, byPath });
+  latest.current = { state, change, byPath };
+  const scopeKey = inspectionScope ? jsonInspectionScopeKey(inspectionScope) : "";
+  useEffect3(() => {
+    if (!attention || !inspectionScope) return;
+    return attention.register(inspectionScope, { reveal: (target, signal) => {
+      const path = target.path ?? "$";
+      const current = latest.current;
+      let entry = current.byPath.get(path);
+      if (!entry || signal.aborted) return false;
+      const folded = new Set(current.state.collapsedPaths), buckets = new Set(current.state.expandedBuckets);
+      while (entry) {
+        folded.delete(entry.path);
+        const parent = entry.parent ? current.byPath.get(entry.parent) : void 0;
+        if (parent?.type === "array" && Number(entry.key) >= JSON_ARRAY_BUCKET_SIZE) buckets.add(jsonBucketId(parent.path, Number(entry.key)));
+        entry = parent;
+      }
+      return new Promise((resolve) => {
+        const abort = () => {
+          if (pendingReveal.current?.signal === signal) pendingReveal.current = null;
+          resolve(false);
+        };
+        const finish = (found) => {
+          signal.removeEventListener("abort", abort);
+          resolve(found);
+        };
+        signal.addEventListener("abort", abort, { once: true });
+        pendingReveal.current?.finish(false);
+        pendingReveal.current = { path, signal, finish };
+        const { selectedMatch: _match, ...next } = current.state;
+        current.change({ ...next, raw: false, search: "", searchOverrides: [], collapsedPaths: [...folded], expandedBuckets: [...buckets], visibleEntryLimit: 1e4 });
+        setAttentionPath(path);
+        setNavigationRequest((request) => request + 1);
+      });
+    } });
+  }, [attention, scopeKey]);
+  useLayoutEffect2(() => {
+    const request = pendingReveal.current;
+    if (!request || request.signal.aborted) return;
+    const element = [...contentRef.current?.querySelectorAll(".qt-json-entry") ?? []].find((node) => node.dataset.jsonPath === request.path);
+    if (!element) return;
+    pendingReveal.current = null;
+    element.scrollIntoView?.({ block: "nearest", behavior: "instant" });
+    request.finish(true);
+  });
+  useEffect3(() => () => {
+    pendingReveal.current?.finish(false);
+    pendingReveal.current = null;
+  }, []);
   useEffect3(() => {
     if (!searching || raw) return;
     const content = contentRef.current;
@@ -957,12 +1074,11 @@ function JsonValueContent({ inspection, label, display: display2, onClose, compa
     const bounds = content.getBoundingClientRect();
     const target = selected.getBoundingClientRect();
     if (target.top < bounds.top || target.bottom > bounds.bottom) content.scrollTop += target.top - bounds.top - (bounds.height - target.height) / 2;
-  }, [searching, raw, activeMatch, searchMode, navigationRequest]);
+  }, [searching, raw, activeMatch?.path, activeMatch?.part, activeMatch?.start, searchMode, navigationRequest]);
   const navigate = (direction) => {
     if (!occurrences.length) return;
-    setMatchIndex((current) => (current + direction + occurrences.length) % occurrences.length);
+    change({ ...state, selectedMatch: occurrences[selectedIndex < 0 ? direction > 0 ? 0 : occurrences.length - 1 : (matchIndex + direction + occurrences.length) % occurrences.length], searchOverrides: [] });
     setNavigationRequest((current) => current + 1);
-    setSearchOverrides(/* @__PURE__ */ new Map());
   };
   const copy2 = async (text, message) => {
     try {
@@ -974,19 +1090,19 @@ function JsonValueContent({ inspection, label, display: display2, onClose, compa
   };
   const toggle = (path, bucket = false) => {
     const expanded = bucket ? presentation.expandedBuckets.has(path) : !presentation.collapsed.has(path);
-    if (searching) setSearchOverrides((current) => new Map(current).set(path, !expanded));
-    else (bucket ? setExpandedBuckets : setCollapsed)((current) => {
-      const next = new Set(current);
+    if (searching) change({ ...state, searchOverrides: [...searchOverrides].filter(([key]) => key !== path).map(([path2, expanded2]) => ({ path: path2, expanded: expanded2 })).concat({ path, expanded: !expanded }) });
+    else {
+      const next = new Set(bucket ? expandedBuckets : collapsed);
       if (next.has(path)) next.delete(path);
       else next.add(path);
-      return next;
-    });
+      change({ ...state, ...bucket ? { expandedBuckets: [...next] } : { collapsedPaths: [...next] } });
+    }
   };
   return /* @__PURE__ */ jsxs3("section", { className: "qt-json-value-view", "aria-label": `${label} JSON value`, children: [
     !compact && /* @__PURE__ */ jsxs3("div", { className: "qt-json-toolbar", children: [
       onClose && /* @__PURE__ */ jsx3("strong", { className: "qt-json-title", children: label }),
       /* @__PURE__ */ jsxs3("div", { className: "qt-json-actions", children: [
-        /* @__PURE__ */ jsx3("button", { type: "button", className: "qt-link-btn qt-json-action", "aria-label": raw ? "Show JSON" : "Show original", title: raw ? "Show pretty-printed JSON" : "Show original source", "aria-pressed": raw, disabled: Boolean(inspection.error), onClick: () => setRaw(!raw), children: /* @__PURE__ */ jsx3(Icon, { name: "panelDefinition", size: 14 }) }),
+        /* @__PURE__ */ jsx3("button", { type: "button", className: "qt-link-btn qt-json-action", "aria-label": raw ? "Show JSON" : "Show original", title: raw ? "Show pretty-printed JSON" : "Show original source", "aria-pressed": raw, disabled: Boolean(inspection.error), onClick: () => change({ ...state, raw: !raw }), children: /* @__PURE__ */ jsx3(Icon, { name: "panelDefinition", size: 14 }) }),
         /* @__PURE__ */ jsx3("button", { type: "button", className: "qt-link-btn qt-json-action", "aria-label": "Copy original", title: "Copy original source", onClick: () => copy2(inspection.raw, "Original value copied"), children: /* @__PURE__ */ jsx3(Icon, { name: "panelReference", size: 14 }) }),
         /* @__PURE__ */ jsx3("button", { type: "button", className: "qt-link-btn qt-json-action", "aria-label": "Copy JSON", title: "Copy JSON object or value", disabled: Boolean(inspection.error), onClick: () => copy2(inspection.formatted, "Formatted JSON copied"), children: /* @__PURE__ */ jsx3(Icon, { name: "copy", size: 14 }) })
       ] }),
@@ -1000,12 +1116,11 @@ function JsonValueContent({ inspection, label, display: display2, onClose, compa
             value: searchMode,
             disabled: raw || Boolean(inspection.error),
             onChange: (event) => {
-              setSearchMode(event.target.value);
-              setSearchOverrides(/* @__PURE__ */ new Map());
+              change({ ...state, searchMode: event.target.value, searchOverrides: [] });
             },
             children: [
               /* @__PURE__ */ jsx3("option", { value: "filter", children: "Filter" }),
-              /* @__PURE__ */ jsx3("option", { value: "highlight", children: "Highlight" })
+              /* @__PURE__ */ jsx3("option", { value: "find", children: "Find" })
             ]
           }
         ),
@@ -1019,12 +1134,11 @@ function JsonValueContent({ inspection, label, display: display2, onClose, compa
             title: "Search keys, paths and values",
             disabled: raw || Boolean(inspection.error),
             placeholder: "Search JSON",
+            maxLength: 1e4,
             onChange: (event) => {
-              setSearch(event.target.value);
-              setMatchIndex(0);
-              setSearchOverrides(/* @__PURE__ */ new Map());
+              const { selectedMatch: _selected, ...next } = state;
+              change({ ...next, search: event.target.value, searchOverrides: [], visibleEntryLimit: 200 });
               setCopyStatus("");
-              setPageSize(200);
             },
             onKeyDown: (event) => {
               if (event.key === "Enter") {
@@ -1035,7 +1149,7 @@ function JsonValueContent({ inspection, label, display: display2, onClose, compa
           }
         ),
         searching && /* @__PURE__ */ jsxs3("span", { className: "qt-json-search-count", "aria-live": "polite", children: [
-          occurrences.length ? matchIndex + 1 : 0,
+          activeMatch ? matchIndex + 1 : 0,
           "/",
           occurrences.length
         ] }),
@@ -1048,6 +1162,7 @@ function JsonValueContent({ inspection, label, display: display2, onClose, compa
       ] })
     ] }),
     /* @__PURE__ */ jsxs3("div", { className: "qt-json-content", ref: contentRef, children: [
+      state.selectedMatch && !activeMatch && /* @__PURE__ */ jsx3("p", { className: "qt-json-notice", role: "status", children: "Selected JSON match is unavailable." }),
       inspection.error && /* @__PURE__ */ jsx3("p", { className: "qt-json-notice", role: "alert", children: inspection.error }),
       inspection.raw.length > JSON_MAX_CHARACTERS && /* @__PURE__ */ jsx3("p", { className: "qt-json-notice", children: "Original text is truncated in this view. Copy original retains the full source." }),
       inspection.limited && /* @__PURE__ */ jsx3("p", { className: "qt-json-notice", children: "Inspection is limited to 5,000 entries and 64 levels. Search covers the inspected entries only; Copy JSON includes the full value." }),
@@ -1075,7 +1190,7 @@ function JsonValueContent({ inspection, label, display: display2, onClose, compa
           return /* @__PURE__ */ jsxs3(
             "div",
             {
-              className: `qt-json-line${kind === "value" ? " qt-json-entry" : ""}${searching && kind === "value" && matchedPaths.has(entry.path) ? " qt-json-match" : ""}${searching && kind === "value" && activeMatch?.path === entry.path ? " qt-json-match--active" : ""}`,
+              className: `qt-json-line${kind === "value" && attentionPath === entry.path ? " qt-attention-target" : ""}${kind === "value" ? " qt-json-entry" : ""}${searching && kind === "value" && matchedPaths.has(entry.path) ? " qt-json-match" : ""}${searching && kind === "value" && activeMatch?.path === entry.path ? " qt-json-match--active" : ""}`,
               "data-json-path": entry.path,
               title: entry.path,
               style: { paddingInlineStart: `${Math.min(entry.depth + (kind === "omitted" ? 1 : 0), 32) * 16}px` },
@@ -1110,7 +1225,7 @@ function JsonValueContent({ inspection, label, display: display2, onClose, compa
           );
         }),
         lines.length === 0 && /* @__PURE__ */ jsx3("p", { className: "qt-json-notice", children: "No matching keys or values." }),
-        remaining > 0 && /* @__PURE__ */ jsx3("button", { type: "button", className: "qt-btn qt-json-more", onClick: () => setPageSize(pageSize + 200), children: "Show more" })
+        remaining > 0 && /* @__PURE__ */ jsx3("button", { type: "button", className: "qt-btn qt-json-more", onClick: () => change({ ...state, visibleEntryLimit: Math.min(1e4, pageSize + 200) }), children: "Show more" })
       ] })
     ] }),
     !compact && /* @__PURE__ */ jsxs3("footer", { className: "qt-json-footer", children: [
@@ -1374,9 +1489,11 @@ import { encodeQuery, renderItemPageTemplate } from "@pythia-software/query-tabl
 import { usePropertyView } from "@pythia-software/query-table-react";
 
 // src/ObjectProperties.tsx
-import { cloneElement, isValidElement, useEffect as useEffect4, useMemo as useMemo2, useRef as useRef3, useState as useState4 } from "react";
+import { cloneElement, isValidElement, useEffect as useEffect4, useLayoutEffect as useLayoutEffect3, useMemo as useMemo2, useRef as useRef3, useState as useState4 } from "react";
 import {
   EMPTY_QUERY,
+  isPropertyFieldLoaded,
+  jsonInspectionScopeKey as jsonInspectionScopeKey2,
   readFieldValue,
   readObjectReference,
   objectReferenceKey
@@ -1648,14 +1765,52 @@ function ObjectProperties(props) {
   const drag = useRef3(null);
   const [copied, setCopied] = useState4(null);
   const [copyError, setCopyError] = useState4("");
-  const [jsonViewer, setJsonViewer] = useState4(null);
+  const [localInspections, setLocalInspections] = useState4([]);
+  const inspections = [...props.jsonInspections ?? [], ...localInspections];
+  const idField = schema.fields.find((field) => field.name === schema.idField);
+  const identity = props.recordId ?? (idField ? readFieldValue(idField, row) : row[schema.idField]);
+  const rowId = typeof identity === "string" || typeof identity === "number" && Number.isFinite(identity) ? identity : void 0;
+  const [anonymousInspection, setAnonymousInspection] = useState4(() => ({ row, states: /* @__PURE__ */ new Map() }));
+  const triggers = useRef3(/* @__PURE__ */ new Map());
+  const latest = useRef3(props);
+  latest.current = props;
+  const renderedJson = /* @__PURE__ */ new Map();
+  const jsonTargets = useRef3(renderedJson);
+  useLayoutEffect3(() => {
+    jsonTargets.current = renderedJson;
+  });
+  useEffect4(() => {
+    if (!props.attention || rowId === void 0) return;
+    return props.attention.register({ dataset: schema.name, rowId }, { reveal: async (target, signal) => {
+      if (signal.aborted) return false;
+      if (target.field !== void 0) {
+        const property = latest.current.view.properties.find((entry) => entry.field === target.field);
+        const field = latest.current.schema.fields.find((entry) => entry.name === target.field && entry.property?.enabled !== false);
+        if (!property || !field || !isPropertyFieldLoaded(field, latest.current.loadedFields)) return false;
+        if (target.path !== void 0) {
+          const json = jsonTargets.current.get(target.field);
+          if (!json || !inspectJsonValue(json.value, json.display).entries.some((entry) => entry.path === target.path)) return false;
+          const provider = await props.attention.whenRegistered({ dataset: schema.name, rowId, field: target.field }, signal);
+          return signal.aborted ? false : provider.reveal(target, signal);
+        }
+        const element = [...surface.current?.querySelectorAll("[data-property-field]") ?? []].find((element2) => element2.dataset.propertyField === target.field);
+        if (!element) return false;
+        element.scrollIntoView?.({ block: "nearest", behavior: "instant" });
+        element.classList.add("qt-attention-target");
+        return true;
+      }
+      surface.current?.scrollIntoView?.({ block: "nearest", behavior: "instant" });
+      return Boolean(surface.current);
+    } });
+  }, [props.attention, schema.name, rowId]);
+  const changeInspection = (entry) => {
+    if (!props.jsonInspections || rowId === void 0) setLocalInspections((current) => [...current.filter((previous) => jsonInspectionScopeKey2(previous) !== jsonInspectionScopeKey2(entry)), entry]);
+    if (rowId !== void 0) props.onJsonInspectionChange?.(entry);
+  };
   useEffect4(() => {
     setCopied(null);
     setCopyError("");
   }, [row]);
-  useEffect4(() => {
-    setJsonViewer(null);
-  }, [row]);
   useEffect4(() => {
     if (!copied) return;
     const timer = setTimeout(() => setCopied(null), 1800);
@@ -1777,7 +1932,7 @@ function ObjectProperties(props) {
       let jsonProps;
       if (!field || field.property?.enabled === false)
         content = /* @__PURE__ */ jsx6("span", { className: "qt-property-unavailable", children: "Field unavailable" });
-      else if (coverage && !coverage.has(field.name) && !(field.source.kind === "derived" && field.source.dependencies?.every((name) => coverage.has(name))))
+      else if (!isPropertyFieldLoaded(field, loadedFields))
         content = /* @__PURE__ */ jsx6("span", { className: "qt-property-unavailable", children: "Not loaded" });
       else {
         const value = readFieldValue(field, row);
@@ -1788,8 +1943,23 @@ function ObjectProperties(props) {
         const href = result?.href ? safeLinkHref(result.href) : null;
         let display2 = result?.label ?? propertyContent(field, property, value, props, now);
         if (isValidElement(display2) && display2.type === JsonValueView) {
-          if (value != null && value !== "") jsonProps = { ...display2.props, label: property.label ?? field.label };
-          display2 = cloneElement(display2, { compact: true });
+          if (display2.props.value != null && display2.props.value !== "") {
+            const scope = rowId === void 0 ? void 0 : { dataset: schema.name, rowId, field: property.field };
+            const state = scope ? inspections.find((entry) => jsonInspectionScopeKey2(entry) === jsonInspectionScopeKey2(scope))?.state : anonymousInspection.row === row ? anonymousInspection.states.get(property.field) : void 0;
+            jsonProps = {
+              ...display2.props,
+              label: property.label ?? field.label,
+              inspectionState: state ?? createJsonInspectionState(inspectJsonValue(display2.props.value, display2.props.display), display2.props.display, true),
+              inspectionScope: scope,
+              onInspectionStateChange: (state2) => {
+                if (scope) changeInspection({ ...scope, state: state2 });
+                else setAnonymousInspection((previous) => ({ row, states: new Map(previous.row === row ? previous.states : []).set(property.field, state2) }));
+              },
+              attention: props.attention
+            };
+            renderedJson.set(property.field, jsonProps);
+          }
+          display2 = cloneElement(display2, { ...jsonProps, compact: true });
         }
         content = href ? /* @__PURE__ */ jsxs4(
           "a",
@@ -1820,7 +1990,7 @@ function ObjectProperties(props) {
           }
         ) : display2;
       }
-      return /* @__PURE__ */ jsxs4("div", { className: "qt-property", "data-property-type": field?.type, children: [
+      return /* @__PURE__ */ jsxs4("div", { className: "qt-property", "data-property-field": property.field, "data-property-type": field?.type, children: [
         /* @__PURE__ */ jsxs4("dt", { children: [
           /* @__PURE__ */ jsx6("span", { children: property.label ?? field?.label ?? property.field }),
           jsonProps && /* @__PURE__ */ jsx6(
@@ -1830,7 +2000,10 @@ function ObjectProperties(props) {
               className: "qt-link-btn qt-property-json-open",
               "aria-label": `Open ${property.label ?? field?.label ?? property.field} in JSON Viewer`,
               title: "Open in JSON Viewer",
-              onClick: (event) => setJsonViewer({ props: jsonProps, trigger: event.currentTarget }),
+              onClick: (event) => {
+                triggers.current.set(property.field, event.currentTarget);
+                jsonProps.onInspectionStateChange?.({ ...jsonProps.inspectionState, open: true });
+              },
               children: /* @__PURE__ */ jsx6(Icon, { name: "panelDefinition", size: 14 })
             }
           )
@@ -1859,10 +2032,18 @@ function ObjectProperties(props) {
               ] })
             ]
           }
+        ),
+        jsonProps?.inspectionState?.open && entries.find((entry) => entry.property.field === property.field)?.property.id === property.id && /* @__PURE__ */ jsx6(
+          JsonViewerModal,
+          {
+            ...jsonProps,
+            returnFocus: triggers.current.get(property.field),
+            preserveFocus: props.preserveFocus && !triggers.current.get(property.field)?.isConnected,
+            onClose: () => jsonProps.onInspectionStateChange?.({ ...jsonProps.inspectionState, open: false })
+          }
         )
-      ] }, property.id);
+      ] }, JSON.stringify([rowId, property.id]));
     }) }),
-    jsonViewer && /* @__PURE__ */ jsx6(JsonViewerModal, { ...jsonViewer.props, onClose: () => setJsonViewer(null), returnFocus: jsonViewer.trigger }),
     copyError && /* @__PURE__ */ jsx6("p", { className: "qt-property-copy-error", role: "status", children: copyError }),
     resolved.error ? /* @__PURE__ */ jsxs4("p", { role: "status", className: "qt-property-unavailable", children: [
       "Relationship labels unavailable: ",
@@ -1884,7 +2065,7 @@ import { useMemo as useMemo3, useState as useState7, useEffect as useEffect6, us
 import {
   createContext,
   useContext,
-  useLayoutEffect as useLayoutEffect2,
+  useLayoutEffect as useLayoutEffect4,
   useRef as useRef4,
   useState as useState5
 } from "react";
@@ -1907,7 +2088,7 @@ function PickerSurface({
   const returnFocus = useRef4(null);
   close.current = onClose;
   const [position, setPosition] = useState5({ top: 0, left: 0, maxHeight: 440 });
-  useLayoutEffect2(() => {
+  useLayoutEffect4(() => {
     if (mobile) return;
     const element = surface.current;
     if (!element) return;
@@ -2614,7 +2795,7 @@ function useMetricResize() {
 }
 
 // src/useEditorWorkbench.ts
-import { useLayoutEffect as useLayoutEffect3, useRef as useRef8, useState as useState8 } from "react";
+import { useLayoutEffect as useLayoutEffect5, useRef as useRef8, useState as useState8 } from "react";
 function fitPanes(previous, available, visible, minimums) {
   const total = Math.max(
     minimums.reduce((sum, width, i) => sum + (visible[i] ? width : 0), 0),
@@ -2670,7 +2851,7 @@ function useEditorWorkbench(panes5, isEditor = true) {
     (visible, i) => visible ? [i] : []
   );
   const widths = fitPanes(preferredWidths, available, visiblePanes, minimums);
-  useLayoutEffect3(() => {
+  useLayoutEffect5(() => {
     const element = root.current;
     if (!element || !isEditor) return;
     const fit = () => {
@@ -3752,6 +3933,11 @@ function DetailContent({ api, record, loading, error, onRetry, renderers, mode,
     {
       schema: api.schema,
       row: record.row,
+      recordId: id,
+      ...api.jsonInspections ? { jsonInspections: api.jsonInspections } : {},
+      ...api.setJsonInspection ? { onJsonInspectionChange: api.setJsonInspection } : {},
+      attention: api.attention,
+      preserveFocus: api.preserveFocus,
       ...api.subject === "group" ? { query } : {},
       propertyApi: api.propertiesByMode[mode],
       viewScope: mode === "hover" ? "Popover" : mode === "expand" ? "Row expand" : "Modal",
@@ -3806,7 +3992,7 @@ function ItemDetailsPanel({ api, query, renderers, outsidePage = false }) {
   if (!api.active) return null;
   const { id, mode } = api.active;
   const content = /* @__PURE__ */ jsx17(DetailContent, { api, record: api.record, loading: api.loading, error: api.error, onRetry: api.retry, renderers, mode, query, id, onClose: api.close });
-  if (mode === "modal") return /* @__PURE__ */ jsx17(ModalSurface, { title: api.subject === "group" ? "Group details" : "Item details", className: "qt-modal qt-item-detail-modal", chrome: false, onClose: api.close, children: content });
+  if (mode === "modal") return /* @__PURE__ */ jsx17(ModalSurface, { title: api.subject === "group" ? "Group details" : "Item details", className: "qt-modal qt-item-detail-modal", preserveFocus: api.preserveFocus, chrome: false, onClose: api.close, children: content });
   const noun = api.subject === "group" ? "group" : "item";
   return /* @__PURE__ */ jsxs13("section", { className: "qt-item-expanded", "aria-label": `Expanded ${noun} ${id}`, children: [
     outsidePage && /* @__PURE__ */ jsxs13("p", { className: "qt-item-detail-note", children: [
@@ -4017,8 +4203,8 @@ function ItemHoverCard({ api, query, id, renderers, anchor, onClose }) {
 
 // src/DataTable.tsx
 import { GROUP_ID_FIELD, GROUP_LINK_RENDER, ITEM_DETAILS_COLUMN, groupKeyFields, isComputedCellError, isGroupLinkValue as isGroupLinkValue2 } from "@pythia-software/query-table-core";
-import { useId as useId4, useCallback as useCallback3, useEffect as useEffect12, useLayoutEffect as useLayoutEffect4, useMemo as useMemo5, useRef as useRef14, useState as useState16 } from "react";
-import { useVirtualizer } from "@tanstack/react-virtual";
+import { useId as useId4, useCallback as useCallback3, useEffect as useEffect12, useLayoutEffect as useLayoutEffect6, useMemo as useMemo5, useRef as useRef14, useState as useState16 } from "react";
+import { defaultRangeExtractor, useVirtualizer } from "@tanstack/react-virtual";
 import { isSortable, readFieldValue as readFieldValue2 } from "@pythia-software/query-table-core";
 import { useColumnDrag } from "@pythia-software/query-table-react";
 
@@ -4769,8 +4955,14 @@ function DataTable(props) {
   const estimateVirtualRow = useCallback3((index) => entries[index]?.detail ? 400 : normalizedEstimate, [normalizedEstimate, entries]);
   const initialViewportHeight = typeof maxHeight === "number" && maxHeight > 0 ? maxHeight : DEFAULT_MAX_HEIGHT;
   const initialRect = useMemo5(() => ({ width: 0, height: initialViewportHeight }), [initialViewportHeight]);
+  const [attentionRange, setAttentionRange] = useState16(null);
+  const holdingAttention = attentionRange?.index === expandedRowIndex && attentionRange?.revision === details?.attentionRevision;
+  const detailRange = useCallback3((range) => {
+    return defaultRangeExtractor((details?.attentionPending || holdingAttention) && expandedRowIndex >= 0 ? { ...range, startIndex: expandedRowIndex, endIndex: expandedRowIndex + 1 } : range);
+  }, [details?.attentionPending, holdingAttention, expandedRowIndex]);
   const rowVirtualizer = useVirtualizer({
     count: entries.length,
+    rangeExtractor: detailRange,
     getScrollElement: () => tableWrapRef.current,
     estimateSize: estimateVirtualRow,
     getItemKey: getVirtualRowKey,
@@ -4782,9 +4974,17 @@ function DataTable(props) {
     // Row refs measure during React's commit phase; schedule size updates normally.
     useFlushSync: false
   });
+  useLayoutEffect6(() => {
+    if (details?.attentionPending && expandedRowIndex >= 0) {
+      setAttentionRange((previous) => previous?.index === expandedRowIndex && previous.revision === details.attentionRevision ? previous : { index: expandedRowIndex, revision: details.attentionRevision });
+    } else {
+      const range = rowVirtualizer.range;
+      if (expandedRowIndex < 0 || range && range.startIndex - normalizedOverscan <= expandedRowIndex + 1 && range.endIndex + normalizedOverscan >= expandedRowIndex + 1) setAttentionRange(null);
+    }
+  }, [details?.attentionPending, details?.attentionRevision, expandedRowIndex, rowVirtualizer.range?.startIndex, rowVirtualizer.range?.endIndex, normalizedOverscan]);
   useEffect12(() => {
     if (expandedRowIndex >= 0) rowVirtualizer.scrollToIndex(expandedRowIndex, { align: "start" });
-  }, [expandedRowIndex]);
+  }, [expandedRowIndex, details?.attentionRevision]);
   useEffect12(() => {
     return () => {
       if (copiedCellTimerRef.current) {
@@ -5085,7 +5285,7 @@ function DataTable(props) {
   const renderedColumnNames = useMemo5(() => columnDrag.preview(tableColumnNames), [columnDrag, tableColumnNames]);
   const dragPreviewRef = useRef14(null);
   const dropRevisionRef = useRef14(columnDrag.dropRevision);
-  const useCommitLayoutEffect = typeof window === "undefined" ? useEffect12 : useLayoutEffect4;
+  const useCommitLayoutEffect = typeof window === "undefined" ? useEffect12 : useLayoutEffect6;
   useCommitLayoutEffect(() => {
     if (columnDrag.active) {
       dragPreviewRef.current = renderedColumnNames;
@@ -5233,6 +5433,7 @@ function DataTable(props) {
         onWheel: onTableWheel,
         style: { maxHeight, overflowY: "auto" },
         onScroll: () => {
+          if (!details?.attentionPending) setAttentionRange(null);
           const wrap = tableWrapRef.current;
           if (!wrap) return;
           setShowHorizontalCue(wrap.scrollWidth - wrap.clientWidth - wrap.scrollLeft > 2);
@@ -6160,7 +6361,7 @@ function ColumnPicker({
 // src/grouping/GroupedColumnsEditor.tsx
 import {
   useEffect as useEffect14,
-  useLayoutEffect as useLayoutEffect5,
+  useLayoutEffect as useLayoutEffect7,
   useId as useId6,
   useMemo as useMemo7,
   useRef as useRef16,
@@ -7238,7 +7439,7 @@ function GroupedColumnsEditor({
   const workbench = useEditorWorkbench(panes2.map(
     (pane, index) => index === 2 ? { ...pane, defaultVisible: editingAggregate } : pane
   ));
-  useLayoutEffect5(() => {
+  useLayoutEffect7(() => {
     if (editingAggregate) workbench.showPane(2);
     else {
       if (workbench.visibleIndices.length === 1 && workbench.visiblePanes[2])
@@ -8621,7 +8822,7 @@ import {
   Suspense as Suspense2,
   useEffect as useEffect17,
   useId as useId8,
-  useLayoutEffect as useLayoutEffect6,
+  useLayoutEffect as useLayoutEffect8,
   useMemo as useMemo11,
   useRef as useRef18,
   useState as useState27
@@ -10625,7 +10826,7 @@ function MetricsEditor({
     retry,
     api.aggregations.preview
   ]);
-  useLayoutEffect6(() => {
+  useLayoutEffect8(() => {
     setInspectOpen(false);
     setInspectedKey(null);
     pendingInsertion.current = null;
@@ -10657,7 +10858,7 @@ function MetricsEditor({
     observer.observe(element);
     return () => observer.disconnect();
   }, [view, !!selected]);
-  useLayoutEffect6(() => {
+  useLayoutEffect8(() => {
     if (view === "dashboard") {
       const card2 = Array.from(
         canvasElement.current?.querySelectorAll(
@@ -16645,6 +16846,7 @@ export {
   SelectColumnEditor,
   SelectionToolbar,
   createGroupLinkRenderer,
+  createJsonInspectionState,
   createMetricColorResolver,
   defaultRenderers,
   formatMetricOutput,