@elaraai/e3-ui-components 1.0.60 → 1.0.62

package/dist/index.cjs

@@ -8944,7 +8944,7 @@ const ConflictRow = React.memo(function ConflictRow2({ row, depth, bindingPathSt
             gap: "8px",
             mt: "10px",
             p: "12px",
-            bg: "white",
+            bg: "bg.surface",
             border: "1px solid",
             borderColor: "fg.warning",
             borderRadius: "md",
@@ -20466,28 +20466,18 @@ function FiAlertTriangle(props) {
   return GenIcon({ "attr": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "child": [{ "tag": "path", "attr": { "d": "M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" }, "child": [] }, { "tag": "line", "attr": { "x1": "12", "y1": "9", "x2": "12", "y2": "13" }, "child": [] }, { "tag": "line", "attr": { "x1": "12", "y1": "17", "x2": "12.01", "y2": "17" }, "child": [] }] })(props);
 }
 const NODE_KIND_ACCENT = {
-  process: "#3a7780",
-  // brand.600
-  computation: "#42757d",
-  // color-mix(brand.600 60%, gray.500)
-  decision: "#2b4b55",
-  // brand.700
-  objective: "#253333",
-  // gray.800
-  kpi: "#2f7a5b",
-  // status.pos
-  agent: "#6d5a7a",
-  // color-mix(brand.700 45%, status.warn 15%, gray.500) — plum, people/role tone
-  data: "#b8862d",
-  // status.warn
-  resource: "#56727a",
-  // color-mix(brand.600 30%, gray.500)
-  policy: "#8d7a5f",
-  // color-mix(status.warn 50%, gray.600)
-  document: "#bcd1d3",
-  // color-mix(brand.600 30%, gray.100)
-  group: "#4a5f5f"
-  // gray.600
+  process: "brand.600",
+  computation: "color-mix(in srgb, var(--chakra-colors-brand-600) 60%, var(--chakra-colors-gray-500))",
+  decision: "brand.700",
+  objective: "gray.800",
+  kpi: "status.pos",
+  agent: "color-mix(in srgb, var(--chakra-colors-brand-700) 45%, color-mix(in srgb, var(--chakra-colors-status-warn) 15%, var(--chakra-colors-gray-500)))",
+  // plum — people/role tone
+  data: "status.warn",
+  resource: "color-mix(in srgb, var(--chakra-colors-brand-600) 30%, var(--chakra-colors-gray-500))",
+  policy: "color-mix(in srgb, var(--chakra-colors-status-warn) 50%, var(--chakra-colors-gray-600))",
+  document: "color-mix(in srgb, var(--chakra-colors-brand-600) 30%, var(--chakra-colors-gray-100))",
+  group: "gray.600"
 };
 const EDGE_DASH = {
   // flow — solid
@@ -57172,20 +57162,7 @@ function OntologyEditorBody({
   const proOptions = React.useMemo(() => ({ hideAttribution: true }), []);
   const miniMapNodeColor = React.useCallback((node2) => {
     const data4 = node2.data;
-    const accent = {
-      process: "#3a7780",
-      computation: "#42757d",
-      decision: "#2b4b55",
-      objective: "#253333",
-      kpi: "#2f7a5b",
-      agent: "#6d5a7a",
-      data: "#b8862d",
-      resource: "#56727a",
-      policy: "#8d7a5f",
-      document: "#bcd1d3",
-      group: "#4a5f5f"
-    };
-    return accent[data4.type] ?? "#6b8080";
+    return NODE_KIND_ACCENT[data4.type] ?? "fg.muted";
   }, []);
   const getNode = React.useCallback(
     (id3) => ontology.nodes.find((n2) => n2.id === id3),
@@ -64029,6 +64006,271 @@ class ErrorBoundary extends React.Component {
     return this.props.children;
   }
 }
+const FIND_DEBOUNCE_MS = 250;
+const POPUP_LIMIT = 20;
+function structFields(keyType) {
+  if (keyType.type !== "Struct") return null;
+  const fields = keyType.value;
+  return fields.length > 0 ? fields : null;
+}
+function splitTopLevel(text) {
+  const parts = [];
+  let current = "";
+  let inString = false;
+  let depth = 0;
+  for (let i = 0; i < text.length; i++) {
+    const ch = text[i];
+    if (inString) {
+      current += ch;
+      if (ch === "\\" && i + 1 < text.length) {
+        current += text[i + 1];
+        i++;
+      } else if (ch === '"') {
+        inString = false;
+      }
+      continue;
+    }
+    if (ch === '"') {
+      inString = true;
+      current += ch;
+    } else if (ch === "(" || ch === "[" || ch === "{") {
+      depth++;
+      current += ch;
+    } else if (ch === ")" || ch === "]" || ch === "}") {
+      depth--;
+      current += ch;
+    } else if (ch === "," && depth === 0) {
+      parts.push(current);
+      current = "";
+    } else {
+      current += ch;
+    }
+  }
+  parts.push(current);
+  return parts;
+}
+function keySignature(keyType) {
+  const fields = structFields(keyType);
+  if (fields === null) return keyType.type;
+  return `(${fields.map((f2) => `${f2.name}: ${f2.type.type}`).join(", ")})`;
+}
+function parseKeyInput(keyType, text) {
+  const fields = structFields(keyType);
+  if (fields === null) {
+    if (keyType.type === "String") return { kind: "query", query: { prefix: text } };
+    const parsed = east.parseFor(keyType)(text);
+    if (!parsed.success) return { kind: "hint", hint: `Key is ${keyType.type}` };
+    return { kind: "query", query: { key: east.printFor(keyType)(parsed.value) } };
+  }
+  if (text.trimStart().startsWith("(")) {
+    const parsed = east.parseFor(keyType)(text);
+    if (!parsed.success) return { kind: "hint", hint: `Key is ${keySignature(keyType)}` };
+    return { kind: "query", query: { key: east.printFor(keyType)(parsed.value) } };
+  }
+  const segments = splitTopLevel(text);
+  if (segments.length > fields.length) {
+    return { kind: "hint", hint: `Key is ${keySignature(keyType)}` };
+  }
+  const exact = [];
+  for (let i = 0; i < segments.length; i++) {
+    const field = fields[i];
+    const raw = segments[i].trim();
+    const isLast = i === segments.length - 1;
+    if (isLast && raw === "" && i > 0) {
+      return { kind: "query", query: { fields: exact } };
+    }
+    if (field.type.type === "String" && !raw.startsWith('"')) {
+      if (isLast) {
+        return exact.length === 0 ? { kind: "query", query: { prefix: raw } } : { kind: "query", query: { fields: exact, prefix: raw } };
+      }
+      exact.push(east.printFor(east.StringType)(raw));
+      continue;
+    }
+    const parsed = east.parseFor(field.type)(raw);
+    if (!parsed.success) {
+      return { kind: "hint", hint: `${field.name} is ${field.type.type} — key is ${keySignature(keyType)}` };
+    }
+    exact.push(east.printFor(field.type)(parsed.value));
+  }
+  return { kind: "query", query: { fields: exact } };
+}
+const MATCH_NOTHING = { lower: () => false, upper: () => false };
+function keyRangePredicates(keyType, query) {
+  if ("key" in query) return null;
+  if (keyType.type === "Struct") {
+    const meta3 = keyType.value;
+    const literals = "fields" in query ? query.fields : [];
+    if (literals.length > meta3.length) return MATCH_NOTHING;
+    const values = [];
+    for (let j2 = 0; j2 < literals.length; j2++) {
+      const parsed = east.parseFor(meta3[j2].type)(literals[j2]);
+      if (!parsed.success) return MATCH_NOTHING;
+      values.push(parsed.value);
+    }
+    const cmps = meta3.map((f2) => east.compareFor(f2.type));
+    const lead = (k2) => {
+      for (let j2 = 0; j2 < values.length; j2++) {
+        const c2 = cmps[j2](k2[meta3[j2].name], values[j2]);
+        if (c2 !== 0) return c2;
+      }
+      return 0;
+    };
+    const prefix22 = query.prefix;
+    if (prefix22 === void 0) {
+      return { lower: (k2) => lead(k2) >= 0, upper: (k2) => lead(k2) > 0 };
+    }
+    const prefixIdx = values.length;
+    if (prefixIdx >= meta3.length || meta3[prefixIdx].type.type !== "String") return MATCH_NOTHING;
+    const prefixName = meta3[prefixIdx].name;
+    const prefixCmp = cmps[prefixIdx];
+    return {
+      lower: (k2) => {
+        const c2 = lead(k2);
+        return c2 !== 0 ? c2 > 0 : prefixCmp(k2[prefixName], prefix22) >= 0;
+      },
+      upper: (k2) => {
+        const c2 = lead(k2);
+        if (c2 !== 0) return c2 > 0;
+        const field = k2[prefixName];
+        return prefixCmp(field, prefix22) > 0 && !field.startsWith(prefix22);
+      }
+    };
+  }
+  if (!("prefix" in query) || query.prefix === void 0 || keyType.type !== "String") return MATCH_NOTHING;
+  const prefix2 = query.prefix;
+  const cmp = east.compareFor(keyType);
+  return {
+    lower: (k2) => cmp(k2, prefix2) >= 0,
+    upper: (k2) => cmp(k2, prefix2) > 0 && !k2.startsWith(prefix2)
+  };
+}
+const DatasetKeySearch = React.memo(function DatasetKeySearch2({ keyType, onFind, onListRange, onJump, onClear }) {
+  const [range, setRange] = React.useState(null);
+  const [items, setItems] = React.useState([]);
+  const [activeIdx, setActiveIdx] = React.useState(-1);
+  const [hint, setHint] = React.useState(null);
+  const [resetSeq, setResetSeq] = React.useState(0);
+  const debounceRef = React.useRef(void 0);
+  const findSeqRef = React.useRef(0);
+  React.useEffect(() => () => clearTimeout(debounceRef.current), []);
+  const runFind = React.useCallback((query) => {
+    const seq = ++findSeqRef.current;
+    void (async () => {
+      try {
+        const result = await onFind(query);
+        if (seq !== findSeqRef.current) return;
+        setRange(result);
+        setActiveIdx(-1);
+        if (result.found) {
+          const labels = await onListRange(result.row, Math.min(POPUP_LIMIT, result.count));
+          if (seq !== findSeqRef.current) return;
+          setItems(labels.map((label, i) => ({ row: result.row + i, label })));
+        } else {
+          setItems([]);
+        }
+      } catch {
+        if (seq !== findSeqRef.current) return;
+        setRange(null);
+        setItems([]);
+      }
+    })();
+  }, [onFind, onListRange]);
+  const resetQueryState = React.useCallback(() => {
+    clearTimeout(debounceRef.current);
+    findSeqRef.current++;
+    setRange(null);
+    setItems([]);
+    setActiveIdx(-1);
+    setHint(null);
+  }, []);
+  const handleInput = React.useCallback((text) => {
+    clearTimeout(debounceRef.current);
+    if (text === "") {
+      resetQueryState();
+      onClear == null ? void 0 : onClear();
+      return;
+    }
+    const parsed = parseKeyInput(keyType, text);
+    if (parsed.kind === "hint") {
+      findSeqRef.current++;
+      setRange(null);
+      setItems([]);
+      setActiveIdx(-1);
+      setHint(parsed.hint);
+      return;
+    }
+    setHint(null);
+    debounceRef.current = setTimeout(() => runFind(parsed.query), FIND_DEBOUNCE_MS);
+  }, [keyType, runFind, resetQueryState, onClear]);
+  const clearSearch = React.useCallback(() => {
+    resetQueryState();
+    setResetSeq((s2) => s2 + 1);
+    onClear == null ? void 0 : onClear();
+  }, [resetQueryState, onClear]);
+  const commit = React.useCallback((row) => {
+    onJump(row);
+    if (range !== null) setActiveIdx(row - range.row);
+  }, [onJump, range]);
+  const step3 = React.useCallback((delta) => {
+    if (range === null || !range.found) return;
+    const next2 = Math.max(0, Math.min(range.count - 1, (activeIdx === -1 ? 0 : activeIdx) + delta));
+    commit(range.row + next2);
+  }, [range, activeIdx, commit]);
+  const onKeyDownCapture = React.useCallback((e3) => {
+    if (e3.key !== "Enter" || range === null || !range.found) return;
+    if (document.querySelector('[data-scope="combobox"][data-part="content"] [data-highlighted]') !== null) return;
+    commit(range.row + Math.max(0, activeIdx));
+  }, [range, activeIdx, commit]);
+  const placeholder = React.useMemo(() => {
+    const fields = structFields(keyType);
+    if (fields !== null) return `Search keys (${fields.map((f2) => f2.name).join(", ")})`;
+    return keyType.type === "String" ? "Search keys" : `Find key (${keyType.type})`;
+  }, [keyType]);
+  const payload = React.useMemo(() => ({
+    value: east.none,
+    items: items.map((it) => ({ value: String(it.row), label: it.label, disabled: east.none })),
+    placeholder: east.some(placeholder),
+    multiple: east.none,
+    disabled: east.none,
+    allowCustomValue: east.some(true),
+    onChange: east.some((v3) => commit(Number(v3))),
+    onChangeMultiple: east.none,
+    onInputValueChange: east.some(handleInput),
+    onOpenChange: east.none,
+    style: east.some({ size: east.some(east.variant("xs", null)), color: east.none, background: east.none, borderColor: east.none })
+  }), [items, placeholder, commit, handleInput]);
+  const status = hint !== null ? hint : range === null ? null : !range.found ? "No matches" : activeIdx === -1 ? `${range.count.toLocaleString()} ${range.count === 1 ? "match" : "matches"}` : `${(activeIdx + 1).toLocaleString()} of ${range.count.toLocaleString()}`;
+  const canStep = range !== null && range.found && range.count > 1;
+  return /* @__PURE__ */ jsxRuntime.jsxs(react.Flex, { gap: 1, align: "center", minW: "0", onKeyDownCapture, "data-part": "dataset-key-search", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(react.Flex, { width: `min(${placeholder.length + 10}ch, 40rem)`, minW: "12rem", flexShrink: 1, children: /* @__PURE__ */ jsxRuntime.jsx(eastUiComponents.EastChakraCombobox, { value: payload, selectionBehavior: "preserve" }, resetSeq) }),
+    status !== null && /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontSize: "xs", color: "fg.muted", whiteSpace: "nowrap", children: status }),
+    canStep && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        react.IconButton,
+        {
+          "aria-label": "Previous match",
+          size: "2xs",
+          variant: "ghost",
+          disabled: activeIdx <= 0,
+          onClick: () => step3(-1),
+          children: /* @__PURE__ */ jsxRuntime.jsx(FontAwesomeIcon, { icon: faChevronUp })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        react.IconButton,
+        {
+          "aria-label": "Next match",
+          size: "2xs",
+          variant: "ghost",
+          disabled: activeIdx >= range.count - 1,
+          onClick: () => step3(1),
+          children: /* @__PURE__ */ jsxRuntime.jsx(FontAwesomeIcon, { icon: faChevronDown })
+        }
+      )
+    ] }),
+    (range !== null || hint !== null) && /* @__PURE__ */ jsxRuntime.jsx(react.IconButton, { "aria-label": "Clear search", size: "2xs", variant: "ghost", onClick: clearSearch, children: /* @__PURE__ */ jsxRuntime.jsx(FontAwesomeIcon, { icon: faXmark }) })
+  ] });
+});
 function pagingDebug(...args) {
   try {
     if (typeof localStorage === "undefined") return;
@@ -64040,6 +64282,17 @@ function pagingDebug(...args) {
   console.info("[e3-paging]", ...args);
 }
 const PAGE_SIZE = 500;
+const MAX_RETAINED_PAGES = 8;
+function pruneRetainedPages(pages, firstPage, lastPage, max5) {
+  if (pages.size <= max5) return pages;
+  const distance2 = (p2) => p2 < firstPage ? firstPage - p2 : p2 > lastPage ? p2 - lastPage : 0;
+  const keep = [...pages.keys()].sort((a2, b2) => distance2(a2) - distance2(b2) || a2 - b2).slice(0, max5);
+  const kept = /* @__PURE__ */ new Map();
+  for (const p2 of keep.sort((a2, b2) => a2 - b2)) {
+    kept.set(p2, pages.get(p2));
+  }
+  return kept;
+}
 function pageRows(type, decoded, offset) {
   if (type.type === "Array") {
     const elemType2 = type.value;
@@ -64083,12 +64336,14 @@ const PagedDatasetPreview = React.memo(function PagedDatasetPreview2({
   const [totals, setTotals] = React.useState(null);
   const [loadingCount, setLoadingCount] = React.useState(0);
   const [error3, setError] = React.useState(null);
+  const [jumpRow, setJumpRow] = React.useState(void 0);
   const inflightRef = React.useRef(/* @__PURE__ */ new Set());
   React.useEffect(() => {
     pagingDebug(`reset (path=${path2}, hash=${hash2.slice(0, 8)})`);
     setPages(/* @__PURE__ */ new Map());
     setTotals(null);
     setError(null);
+    setJumpRow(void 0);
     inflightRef.current.clear();
   }, [path2, hash2]);
   const loadPage = React.useCallback((pageIdx) => {
@@ -64096,13 +64351,13 @@ const PagedDatasetPreview = React.memo(function PagedDatasetPreview2({
     inflightRef.current.add(pageIdx);
     setLoadingCount((n2) => n2 + 1);
     pagingDebug(`fetch p${pageIdx} (offset=${pageIdx * PAGE_SIZE}, limit=${PAGE_SIZE}, hash=${hash2.slice(0, 8)})`);
-    const pathParts = path2.split(".").filter(Boolean).map((v3) => east.variant("field", v3));
+    const pathParts2 = path2.split(".").filter(Boolean).map((v3) => east.variant("field", v3));
     const reqOpts = requestOptions ?? { token: null };
     queryClient.fetchQuery({
       queryKey: ["datasetPage", apiUrl, repo, workspace, path2, hash2, `p${pageIdx}`],
       // Hash-pinned: the URL is a pure function of the bytes, so any
       // HTTP cache between here and the server can hold it immutably.
-      queryFn: () => e3ApiClient.datasetGetPage(apiUrl, repo, workspace, pathParts, { offset: pageIdx * PAGE_SIZE, limit: PAGE_SIZE, hash: hash2 }, reqOpts),
+      queryFn: () => e3ApiClient.datasetGetPage(apiUrl, repo, workspace, pathParts2, { offset: pageIdx * PAGE_SIZE, limit: PAGE_SIZE, hash: hash2 }, reqOpts),
       staleTime: Infinity
       // pages of one content hash are immutable
     }).then((page) => {
@@ -64139,8 +64394,35 @@ const PagedDatasetPreview = React.memo(function PagedDatasetPreview2({
       if (!pages.has(p2)) missing.push(p2);
     }
     pagingDebug(`need rows [${startRow}, ${endRow}) → pages ${first2}..${last2}, missing=[${missing.join(",")}], inflight=[${[...inflightRef.current].join(",")}]`);
+    setPages((prev2) => pruneRetainedPages(prev2, first2, last2, MAX_RETAINED_PAGES));
     for (const p2 of missing) loadPage(p2);
   }, [pages, loadPage]);
+  const keyType = React.useMemo(() => type.type === "Dict" ? type.value.key : type.type === "Set" ? type.value : null, [type]);
+  const pathParts = React.useMemo(() => path2.split(".").filter(Boolean).map((v3) => east.variant("field", v3)), [path2]);
+  const onFindKey = React.useCallback(async (query) => {
+    const reqOpts = requestOptions ?? { token: null };
+    const queryTag = JSON.stringify(query);
+    const result = await queryClient.fetchQuery({
+      queryKey: ["datasetFind", apiUrl, repo, workspace, path2, hash2, queryTag],
+      queryFn: () => e3ApiClient.datasetFindKey(apiUrl, repo, workspace, pathParts, { ...query, hash: hash2 }, reqOpts),
+      staleTime: Infinity
+      // hash-pinned: one content hash, one answer
+    });
+    pagingDebug(`find ${queryTag}: found=${result.found} row=${result.row} count=${result.count}`);
+    return result;
+  }, [queryClient, apiUrl, repo, workspace, path2, hash2, pathParts, requestOptions]);
+  const onListRange = React.useCallback(async (row, limit2) => {
+    const reqOpts = requestOptions ?? { token: null };
+    const page = await queryClient.fetchQuery({
+      queryKey: ["datasetPage", apiUrl, repo, workspace, path2, hash2, `w${row}:${limit2}`],
+      queryFn: () => e3ApiClient.datasetGetPage(apiUrl, repo, workspace, pathParts, { offset: row, limit: limit2, hash: hash2 }, reqOpts),
+      staleTime: Infinity
+    });
+    const decoded = east.decodeBeast2For(type)(page.data);
+    const stringKeys = keyType !== null && keyType.type === "String";
+    const keys = type.type === "Dict" ? [...decoded.keys()] : [...decoded.values()];
+    return keys.map((k2) => stringKeys ? k2 : eastUi.ValueTree.keyLabel(keyType, k2));
+  }, [queryClient, apiUrl, repo, workspace, path2, hash2, pathParts, requestOptions, type, keyType]);
   const treeValue = React.useMemo(() => ({
     root: eastUi.ValueTree.materialize(type, emptyOf(type)),
     onEdit: east.none,
@@ -64153,8 +64435,9 @@ const PagedDatasetPreview = React.memo(function PagedDatasetPreview2({
     totalRows: totals.elements,
     pageSize: PAGE_SIZE,
     pages,
-    onNeedRows
-  }, [totals, pages, onNeedRows]);
+    onNeedRows,
+    scrollToRow: jumpRow
+  }, [totals, pages, onNeedRows, jumpRow]);
   if (error3 !== null) {
     if (error3 instanceof e3ApiClient.ApiError && error3.code === "dataset_too_large") {
       return /* @__PURE__ */ jsxRuntime.jsxs(react.Flex, { height: "100%", direction: "column", align: "center", justify: "center", gap: 3, p: 6, children: [
@@ -64179,6 +64462,16 @@ const PagedDatasetPreview = React.memo(function PagedDatasetPreview2({
         formatSize(totals.bytes > 0 ? totals.bytes : sizeBytes)
       ] }),
       loadingCount > 0 && /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontSize: "xs", color: "fg.muted", children: "Loading…" }),
+      keyType !== null && /* @__PURE__ */ jsxRuntime.jsx(
+        DatasetKeySearch,
+        {
+          keyType,
+          onFind: onFindKey,
+          onListRange,
+          onJump: setJumpRow,
+          onClear: () => setJumpRow(void 0)
+        }
+      ),
       /* @__PURE__ */ jsxRuntime.jsx(react.Flex, { flex: 1, justify: "flex-end", children: /* @__PURE__ */ jsxRuntime.jsx(DownloadButton, { onClick: onDownload }) })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx(react.Box, { flex: 1, minHeight: 0, overflow: "hidden", children: /* @__PURE__ */ jsxRuntime.jsx(eastUiComponents.EastChakraValueTree, { value: treeValue, storageKey: `${path2}:page`, paging }) })
@@ -64250,6 +64543,37 @@ const DatasetPreview = React.memo(function DatasetPreview2({
     await setMutation.mutateAsync({ path: treePath, data: data4 });
     await queryClient.invalidateQueries({ queryKey: ["datasetStatus", apiUrl, repo, workspace, path2] });
   }, [apiUrl, repo, workspace, path2, type, setMutation, queryClient]);
+  const keyType = React.useMemo(() => type === void 0 ? null : type.type === "Dict" ? type.value.key : type.type === "Set" ? type.value : null, [type]);
+  const inlineKeys = React.useMemo(() => decoded === void 0 || type === void 0 ? null : type.type === "Dict" ? [...decoded.keys()] : type.type === "Set" ? [...decoded.values()] : null, [type, decoded]);
+  const [jumpRow, setJumpRow] = React.useState(void 0);
+  React.useEffect(() => {
+    setJumpRow(void 0);
+  }, [decoded]);
+  const onFindInline = React.useCallback(async (query) => {
+    if (inlineKeys === null || keyType === null) return { found: false, row: 0, count: 0 };
+    const range = keyRangePredicates(keyType, query);
+    if (range === null) {
+      const parsed = east.parseFor(keyType)(query.key);
+      if (!parsed.success) return { found: false, row: 0, count: 0 };
+      const cmp = east.compareFor(keyType);
+      for (let i = 0; i < inlineKeys.length; i++) {
+        const order = cmp(inlineKeys[i], parsed.value);
+        if (order === 0) return { found: true, row: i, count: 1 };
+        if (order > 0) return { found: false, row: i, count: 0 };
+      }
+      return { found: false, row: inlineKeys.length, count: 0 };
+    }
+    let row = inlineKeys.findIndex(range.lower);
+    if (row === -1) row = inlineKeys.length;
+    let count2 = 0;
+    while (row + count2 < inlineKeys.length && !range.upper(inlineKeys[row + count2])) count2++;
+    return { found: count2 > 0, row, count: count2 };
+  }, [inlineKeys, keyType]);
+  const onListInline = React.useCallback(async (row, limit2) => {
+    if (inlineKeys === null || keyType === null) return [];
+    const stringKeys = keyType.type === "String";
+    return inlineKeys.slice(row, row + limit2).map((k2) => stringKeys ? k2 : eastUi.ValueTree.keyLabel(keyType, k2));
+  }, [inlineKeys, keyType]);
   const treeValue = React.useMemo(() => {
     if (type === void 0 || decoded === void 0) return null;
     const root2 = eastUi.ValueTree.materialize(type, decoded);
@@ -64304,14 +64628,26 @@ const DatasetPreview = React.memo(function DatasetPreview2({
   const count = type === void 0 || decoded === void 0 ? null : type.type === "Array" ? decoded.length : type.type === "Set" || type.type === "Dict" ? decoded.size : null;
   const countText = count === null ? "" : `${count.toLocaleString()} ${(type == null ? void 0 : type.type) === "Dict" ? "entries" : "items"} · `;
   return /* @__PURE__ */ jsxRuntime.jsxs(react.Flex, { direction: "column", height: "100%", overflow: "hidden", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(react.Flex, { px: 4, py: 2, justify: "flex-end", flexShrink: 0, borderBottom: "1px solid", borderColor: "border.subtle", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(react.Text, { fontSize: "xs", color: "fg.muted", mr: 2, alignSelf: "center", children: [
-        countText,
-        formatSize(sizeBytes)
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(DownloadButton, { onClick: download })
+    /* @__PURE__ */ jsxRuntime.jsxs(react.Flex, { px: 4, py: 2, gap: 2, align: "center", flexShrink: 0, borderBottom: "1px solid", borderColor: "border.subtle", children: [
+      keyType !== null && inlineKeys !== null && /* @__PURE__ */ jsxRuntime.jsx(
+        DatasetKeySearch,
+        {
+          keyType,
+          onFind: onFindInline,
+          onListRange: onListInline,
+          onJump: setJumpRow,
+          onClear: () => setJumpRow(void 0)
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs(react.Flex, { flex: 1, justify: "flex-end", align: "center", gap: 2, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(react.Text, { fontSize: "xs", color: "fg.muted", children: [
+          countText,
+          formatSize(sizeBytes)
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(DownloadButton, { onClick: download })
+      ] })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(react.Box, { flex: 1, minHeight: 0, overflow: "hidden", children: treeValue !== null && /* @__PURE__ */ jsxRuntime.jsx(eastUiComponents.EastChakraValueTree, { value: treeValue, storageKey: path2 ?? "value" }) })
+    /* @__PURE__ */ jsxRuntime.jsx(react.Box, { flex: 1, minHeight: 0, overflow: "hidden", children: treeValue !== null && /* @__PURE__ */ jsxRuntime.jsx(eastUiComponents.EastChakraValueTree, { value: treeValue, storageKey: path2 ?? "value", scrollToRow: jumpRow }) })
   ] });
 });
 const InputPreview = React.memo(function InputPreview2({
@@ -64457,10 +64793,10 @@ function HighlightedLine({
         "span",
         {
           style: {
-            backgroundColor: isCurrent ? "#f59e0b" : "#fbbf24",
-            color: "#000",
+            backgroundColor: isCurrent ? "var(--chakra-colors-status-warn)" : "var(--chakra-colors-status-warn-subtle-strong)",
+            color: "var(--chakra-colors-fg-default)",
             borderRadius: "2px",
-            outline: isCurrent ? "2px solid #f59e0b" : void 0
+            outline: isCurrent ? "2px solid var(--chakra-colors-status-warn)" : void 0
           },
           children: text.slice(match2.start, match2.end)
         },
@@ -64613,7 +64949,7 @@ function VirtualizedLogViewer({ content, tabs }) {
           {
             px: 3,
             py: 2,
-            bg: "gray.800",
+            bg: "bg.inverse",
             borderTopRadius: "md",
             align: "center",
             justify: "space-between",
@@ -64621,8 +64957,8 @@ function VirtualizedLogViewer({ content, tabs }) {
             gap: 2,
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(react.Tabs.RootProvider, { value: tabs, size: "sm", variant: "line", children: /* @__PURE__ */ jsxRuntime.jsxs(react.Tabs.List, { borderBottom: "none", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(react.Tabs.Trigger, { value: "stdout", color: "gray.300", _selected: { color: "white" }, children: "stdout" }),
-                /* @__PURE__ */ jsxRuntime.jsx(react.Tabs.Trigger, { value: "stderr", color: "gray.300", _selected: { color: "white" }, children: "stderr" })
+                /* @__PURE__ */ jsxRuntime.jsx(react.Tabs.Trigger, { value: "stdout", color: "fg.subtle", _selected: { color: "fg.inverse" }, children: "stdout" }),
+                /* @__PURE__ */ jsxRuntime.jsx(react.Tabs.Trigger, { value: "stderr", color: "fg.subtle", _selected: { color: "fg.inverse" }, children: "stderr" })
               ] }) }),
               /* @__PURE__ */ jsxRuntime.jsxs(react.Flex, { align: "center", gap: 1, children: [
                 /* @__PURE__ */ jsxRuntime.jsx(
@@ -64633,22 +64969,22 @@ function VirtualizedLogViewer({ content, tabs }) {
                     value: searchQuery,
                     onChange: (e3) => setSearchQuery(e3.target.value),
                     onKeyDown: handleSearchKeyDown,
-                    bg: "gray.700",
+                    bg: "bg.inverse",
                     border: "none",
-                    color: "white",
-                    _placeholder: { color: "gray.400" },
+                    color: "fg.inverse",
+                    _placeholder: { color: "fg.subtle" },
                     width: "min(150px, 40vw)"
                   }
                 ),
-                searchQuery && /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontSize: "xs", color: "gray.400", minWidth: "50px", textAlign: "center", children: matches33.length > 0 ? `${currentMatchIndex + 1}/${matches33.length}` : "0/0" }),
+                searchQuery && /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontSize: "xs", color: "fg.subtle", minWidth: "50px", textAlign: "center", children: matches33.length > 0 ? `${currentMatchIndex + 1}/${matches33.length}` : "0/0" }),
                 /* @__PURE__ */ jsxRuntime.jsx(
                   react.IconButton,
                   {
                     variant: "ghost",
                     size: "xs",
                     onClick: handlePrevMatch,
-                    color: "gray.400",
-                    _hover: { color: "white" },
+                    color: "fg.subtle",
+                    _hover: { color: "fg.inverse" },
                     "aria-label": "Previous match",
                     disabled: matches33.length === 0,
                     children: /* @__PURE__ */ jsxRuntime.jsx(FontAwesomeIcon, { icon: faChevronUp })
@@ -64660,8 +64996,8 @@ function VirtualizedLogViewer({ content, tabs }) {
                     variant: "ghost",
                     size: "xs",
                     onClick: handleNextMatch,
-                    color: "gray.400",
-                    _hover: { color: "white" },
+                    color: "fg.subtle",
+                    _hover: { color: "fg.inverse" },
                     "aria-label": "Next match",
                     disabled: matches33.length === 0,
                     children: /* @__PURE__ */ jsxRuntime.jsx(FontAwesomeIcon, { icon: faChevronDown })
@@ -64673,8 +65009,8 @@ function VirtualizedLogViewer({ content, tabs }) {
                     variant: "ghost",
                     size: "xs",
                     onClick: handleCopy,
-                    color: "gray.400",
-                    _hover: { color: "white" },
+                    color: "fg.subtle",
+                    _hover: { color: "fg.inverse" },
                     "aria-label": "Copy logs",
                     children: /* @__PURE__ */ jsxRuntime.jsx(FontAwesomeIcon, { icon: copied ? faCheck : faCopy })
                   }
@@ -64695,7 +65031,7 @@ function VirtualizedLogViewer({ content, tabs }) {
               borderTopWidth: "0",
               fontFamily: "mono",
               fontSize: "sm",
-              color: "gray.100",
+              color: "fg.inverse",
               onScroll: handleScroll,
               children: /* @__PURE__ */ jsxRuntime.jsx(
                 "div",
@@ -64720,12 +65056,12 @@ function VirtualizedLogViewer({ content, tabs }) {
                           height: `${virtualItem.size}px`,
                           transform: `translateY(${virtualItem.start}px)`
                         },
-                        children: /* @__PURE__ */ jsxRuntime.jsxs(react.Flex, { px: 3, py: 0.5, _hover: { bg: "gray.800" }, children: [
+                        children: /* @__PURE__ */ jsxRuntime.jsxs(react.Flex, { px: 3, py: 0.5, _hover: { bg: "bg.inverse" }, children: [
                           /* @__PURE__ */ jsxRuntime.jsx(
                             react.Text,
                             {
                               as: "span",
-                              color: "gray.500",
+                              color: "fg.muted",
                               minWidth: "50px",
                               textAlign: "right",
                               mr: 3,
@@ -65023,20 +65359,20 @@ function ValueNode({
 }) {
   if (depth > 20) {
     return /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { py: 0.5, display: "flex", alignItems: "center", gap: 2, children: [
-      label && /* @__PURE__ */ jsxRuntime.jsxs(react.Text, { as: "span", color: "purple.400", fontWeight: "medium", children: [
+      label && /* @__PURE__ */ jsxRuntime.jsxs(react.Text, { as: "span", color: "accent.purple", fontWeight: "medium", children: [
         label,
         ":"
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(react.Text, { as: "span", color: "gray.500", children: "[max depth reached]" })
+      /* @__PURE__ */ jsxRuntime.jsx(react.Text, { as: "span", color: "fg.muted", children: "[max depth reached]" })
     ] });
   }
   if (isPrimitive(type)) {
     return /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { py: 0.5, display: "flex", alignItems: "center", gap: 2, children: [
-      label && /* @__PURE__ */ jsxRuntime.jsxs(react.Text, { as: "span", color: "purple.400", fontWeight: "medium", children: [
+      label && /* @__PURE__ */ jsxRuntime.jsxs(react.Text, { as: "span", color: "accent.purple", fontWeight: "medium", children: [
         label,
         ":"
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(react.Text, { as: "span", color: type.type === "String" ? "green.400" : type.type === "Integer" || type.type === "Float" ? "blue.400" : "gray.300", children: formatPrimitive(type, value) }),
+      /* @__PURE__ */ jsxRuntime.jsx(react.Text, { as: "span", color: type.type === "String" ? "fg.success" : type.type === "Integer" || type.type === "Float" ? "link" : "fg.muted", children: formatPrimitive(type, value) }),
       /* @__PURE__ */ jsxRuntime.jsx(react.Badge, { size: "xs", colorPalette: "gray", variant: "subtle", children: type.type })
     ] });
   }
@@ -65046,28 +65382,28 @@ function ValueNode({
     const elementType = type.value;
     if (items.length === 0) {
       return /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { py: 0.5, display: "flex", alignItems: "center", gap: 2, children: [
-        label && /* @__PURE__ */ jsxRuntime.jsxs(react.Text, { as: "span", color: "purple.400", fontWeight: "medium", children: [
+        label && /* @__PURE__ */ jsxRuntime.jsxs(react.Text, { as: "span", color: "accent.purple", fontWeight: "medium", children: [
           label,
           ":"
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(react.Text, { as: "span", color: "gray.500", children: "[]" }),
-        /* @__PURE__ */ jsxRuntime.jsx(react.Badge, { size: "xs", colorPalette: "blue", variant: "subtle", children: "Array[0]" })
+        /* @__PURE__ */ jsxRuntime.jsx(react.Text, { as: "span", color: "fg.muted", children: "[]" }),
+        /* @__PURE__ */ jsxRuntime.jsx(react.Badge, { size: "xs", colorPalette: "brand", variant: "subtle", children: "Array[0]" })
       ] });
     }
     return /* @__PURE__ */ jsxRuntime.jsx(react.Box, { children: /* @__PURE__ */ jsxRuntime.jsxs("details", { children: [
       /* @__PURE__ */ jsxRuntime.jsxs("summary", { style: { cursor: "pointer", padding: "2px 0", display: "flex", alignItems: "center", gap: "8px" }, children: [
-        label && /* @__PURE__ */ jsxRuntime.jsxs(react.Text, { as: "span", color: "purple.400", fontWeight: "medium", children: [
+        label && /* @__PURE__ */ jsxRuntime.jsxs(react.Text, { as: "span", color: "accent.purple", fontWeight: "medium", children: [
           label,
           ":"
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(react.Badge, { size: "xs", colorPalette: "blue", variant: "subtle", children: typeLabel })
+        /* @__PURE__ */ jsxRuntime.jsx(react.Badge, { size: "xs", colorPalette: "brand", variant: "subtle", children: typeLabel })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx(react.Box, { pl: 4, children: items.map((item, index2) => /* @__PURE__ */ jsxRuntime.jsx(
         react.Box,
         {
           py: 1,
           borderBottom: index2 < items.length - 1 ? "1px solid" : void 0,
-          borderColor: "gray.700",
+          borderColor: "border.strong",
           children: /* @__PURE__ */ jsxRuntime.jsx(
             ValueNode,
             {
@@ -65087,21 +65423,21 @@ function ValueNode({
     const obj = value;
     if (fields.length === 0) {
       return /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { py: 0.5, display: "flex", alignItems: "center", gap: 2, children: [
-        label && /* @__PURE__ */ jsxRuntime.jsxs(react.Text, { as: "span", color: "purple.400", fontWeight: "medium", children: [
+        label && /* @__PURE__ */ jsxRuntime.jsxs(react.Text, { as: "span", color: "accent.purple", fontWeight: "medium", children: [
           label,
           ":"
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(react.Text, { as: "span", color: "gray.500", children: "{}" }),
-        /* @__PURE__ */ jsxRuntime.jsx(react.Badge, { size: "xs", colorPalette: "orange", variant: "subtle", children: "Struct" })
+        /* @__PURE__ */ jsxRuntime.jsx(react.Text, { as: "span", color: "fg.muted", children: "{}" }),
+        /* @__PURE__ */ jsxRuntime.jsx(react.Badge, { size: "xs", colorPalette: "warning", variant: "subtle", children: "Struct" })
       ] });
     }
     return /* @__PURE__ */ jsxRuntime.jsx(react.Box, { children: /* @__PURE__ */ jsxRuntime.jsxs("details", { children: [
       /* @__PURE__ */ jsxRuntime.jsxs("summary", { style: { cursor: "pointer", padding: "2px 0", display: "flex", alignItems: "center", gap: "8px" }, children: [
-        label && /* @__PURE__ */ jsxRuntime.jsxs(react.Text, { as: "span", color: "purple.400", fontWeight: "medium", children: [
+        label && /* @__PURE__ */ jsxRuntime.jsxs(react.Text, { as: "span", color: "accent.purple", fontWeight: "medium", children: [
           label,
           ":"
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(react.Badge, { size: "xs", colorPalette: "orange", variant: "subtle", children: typeLabel })
+        /* @__PURE__ */ jsxRuntime.jsx(react.Badge, { size: "xs", colorPalette: "warning", variant: "subtle", children: typeLabel })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx(react.Box, { pl: 4, children: fields.map((field) => /* @__PURE__ */ jsxRuntime.jsx(
         ValueNode,
@@ -65121,11 +65457,11 @@ function ValueNode({
     const activeCase = cases.find((c2) => c2.name === variant.type);
     if (!activeCase) {
       return /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { py: 0.5, display: "flex", alignItems: "center", gap: 2, children: [
-        label && /* @__PURE__ */ jsxRuntime.jsxs(react.Text, { as: "span", color: "purple.400", fontWeight: "medium", children: [
+        label && /* @__PURE__ */ jsxRuntime.jsxs(react.Text, { as: "span", color: "accent.purple", fontWeight: "medium", children: [
           label,
           ":"
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs(react.Text, { as: "span", color: "red.400", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(react.Text, { as: "span", color: "fg.danger", children: [
           "Unknown variant: ",
           variant.type
         ] })
@@ -65133,11 +65469,11 @@ function ValueNode({
     }
     if (activeCase.type.type === "Null") {
       return /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { py: 0.5, display: "flex", alignItems: "center", gap: 2, children: [
-        label && /* @__PURE__ */ jsxRuntime.jsxs(react.Text, { as: "span", color: "purple.400", fontWeight: "medium", children: [
+        label && /* @__PURE__ */ jsxRuntime.jsxs(react.Text, { as: "span", color: "accent.purple", fontWeight: "medium", children: [
           label,
           ":"
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs(react.Badge, { size: "xs", colorPalette: "purple", variant: "subtle", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(react.Badge, { size: "xs", colorPalette: "brand", variant: "subtle", children: [
           ".",
           variant.type
         ] })
@@ -65145,11 +65481,11 @@ function ValueNode({
     }
     return /* @__PURE__ */ jsxRuntime.jsx(react.Box, { children: /* @__PURE__ */ jsxRuntime.jsxs("details", { children: [
       /* @__PURE__ */ jsxRuntime.jsxs("summary", { style: { cursor: "pointer", padding: "2px 0", display: "flex", alignItems: "center", gap: "8px" }, children: [
-        label && /* @__PURE__ */ jsxRuntime.jsxs(react.Text, { as: "span", color: "purple.400", fontWeight: "medium", children: [
+        label && /* @__PURE__ */ jsxRuntime.jsxs(react.Text, { as: "span", color: "accent.purple", fontWeight: "medium", children: [
           label,
           ":"
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs(react.Badge, { size: "xs", colorPalette: "purple", variant: "subtle", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(react.Badge, { size: "xs", colorPalette: "brand", variant: "subtle", children: [
           ".",
           variant.type
         ] })
@@ -65170,29 +65506,29 @@ function ValueNode({
     const valueType = type.value.value;
     if (map3.size === 0) {
       return /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { py: 0.5, display: "flex", alignItems: "center", gap: 2, children: [
-        label && /* @__PURE__ */ jsxRuntime.jsxs(react.Text, { as: "span", color: "purple.400", fontWeight: "medium", children: [
+        label && /* @__PURE__ */ jsxRuntime.jsxs(react.Text, { as: "span", color: "accent.purple", fontWeight: "medium", children: [
           label,
           ":"
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(react.Text, { as: "span", color: "gray.500", children: "Map{}" }),
-        /* @__PURE__ */ jsxRuntime.jsx(react.Badge, { size: "xs", colorPalette: "teal", variant: "subtle", children: "Dict[0]" })
+        /* @__PURE__ */ jsxRuntime.jsx(react.Text, { as: "span", color: "fg.muted", children: "Map{}" }),
+        /* @__PURE__ */ jsxRuntime.jsx(react.Badge, { size: "xs", colorPalette: "info", variant: "subtle", children: "Dict[0]" })
       ] });
     }
     const entries = Array.from(map3.entries());
     return /* @__PURE__ */ jsxRuntime.jsx(react.Box, { children: /* @__PURE__ */ jsxRuntime.jsxs("details", { children: [
       /* @__PURE__ */ jsxRuntime.jsxs("summary", { style: { cursor: "pointer", padding: "2px 0", display: "flex", alignItems: "center", gap: "8px" }, children: [
-        label && /* @__PURE__ */ jsxRuntime.jsxs(react.Text, { as: "span", color: "purple.400", fontWeight: "medium", children: [
+        label && /* @__PURE__ */ jsxRuntime.jsxs(react.Text, { as: "span", color: "accent.purple", fontWeight: "medium", children: [
           label,
           ":"
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(react.Badge, { size: "xs", colorPalette: "teal", variant: "subtle", children: typeLabel })
+        /* @__PURE__ */ jsxRuntime.jsx(react.Badge, { size: "xs", colorPalette: "info", variant: "subtle", children: typeLabel })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx(react.Box, { pl: 4, children: entries.map(([k2, v3], i) => /* @__PURE__ */ jsxRuntime.jsxs(
         react.Box,
         {
           py: 2,
           borderBottom: i < entries.length - 1 ? "1px solid" : void 0,
-          borderColor: "gray.700",
+          borderColor: "border.strong",
           children: [
             /* @__PURE__ */ jsxRuntime.jsx(ValueNode, { type: keyType, value: k2, depth: depth + 1 }),
             /* @__PURE__ */ jsxRuntime.jsx(ValueNode, { type: valueType, value: v3, depth: depth + 1 })
@@ -65207,29 +65543,29 @@ function ValueNode({
     const elementType = type.value;
     if (set3.size === 0) {
       return /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { py: 0.5, display: "flex", alignItems: "center", gap: 2, children: [
-        label && /* @__PURE__ */ jsxRuntime.jsxs(react.Text, { as: "span", color: "purple.400", fontWeight: "medium", children: [
+        label && /* @__PURE__ */ jsxRuntime.jsxs(react.Text, { as: "span", color: "accent.purple", fontWeight: "medium", children: [
           label,
           ":"
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(react.Text, { as: "span", color: "gray.500", children: "Set{}" }),
-        /* @__PURE__ */ jsxRuntime.jsx(react.Badge, { size: "xs", colorPalette: "pink", variant: "subtle", children: "Set[0]" })
+        /* @__PURE__ */ jsxRuntime.jsx(react.Text, { as: "span", color: "fg.muted", children: "Set{}" }),
+        /* @__PURE__ */ jsxRuntime.jsx(react.Badge, { size: "xs", colorPalette: "brand", variant: "subtle", children: "Set[0]" })
       ] });
     }
     const items = Array.from(set3);
     return /* @__PURE__ */ jsxRuntime.jsx(react.Box, { children: /* @__PURE__ */ jsxRuntime.jsxs("details", { children: [
       /* @__PURE__ */ jsxRuntime.jsxs("summary", { style: { cursor: "pointer", padding: "2px 0", display: "flex", alignItems: "center", gap: "8px" }, children: [
-        label && /* @__PURE__ */ jsxRuntime.jsxs(react.Text, { as: "span", color: "purple.400", fontWeight: "medium", children: [
+        label && /* @__PURE__ */ jsxRuntime.jsxs(react.Text, { as: "span", color: "accent.purple", fontWeight: "medium", children: [
           label,
           ":"
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(react.Badge, { size: "xs", colorPalette: "pink", variant: "subtle", children: typeLabel })
+        /* @__PURE__ */ jsxRuntime.jsx(react.Badge, { size: "xs", colorPalette: "brand", variant: "subtle", children: typeLabel })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx(react.Box, { pl: 4, children: items.map((item, i) => /* @__PURE__ */ jsxRuntime.jsx(
         react.Box,
         {
           py: 1,
           borderBottom: i < items.length - 1 ? "1px solid" : void 0,
-          borderColor: "gray.700",
+          borderColor: "border.strong",
           children: /* @__PURE__ */ jsxRuntime.jsx(
             ValueNode,
             {
@@ -65247,11 +65583,11 @@ function ValueNode({
     const ref = value;
     return /* @__PURE__ */ jsxRuntime.jsx(react.Box, { children: /* @__PURE__ */ jsxRuntime.jsxs("details", { children: [
       /* @__PURE__ */ jsxRuntime.jsxs("summary", { style: { cursor: "pointer", padding: "2px 0", display: "flex", alignItems: "center", gap: "8px" }, children: [
-        label && /* @__PURE__ */ jsxRuntime.jsxs(react.Text, { as: "span", color: "purple.400", fontWeight: "medium", children: [
+        label && /* @__PURE__ */ jsxRuntime.jsxs(react.Text, { as: "span", color: "accent.purple", fontWeight: "medium", children: [
           label,
           ":"
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(react.Badge, { size: "xs", colorPalette: "red", variant: "subtle", children: "Ref" })
+        /* @__PURE__ */ jsxRuntime.jsx(react.Badge, { size: "xs", colorPalette: "danger", variant: "subtle", children: "Ref" })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx(react.Box, { pl: 4, children: /* @__PURE__ */ jsxRuntime.jsx(
         ValueNode,
@@ -65265,20 +65601,20 @@ function ValueNode({
   }
   if (type.type === "Function" || type.type === "AsyncFunction") {
     return /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { py: 0.5, display: "flex", alignItems: "center", gap: 2, children: [
-      label && /* @__PURE__ */ jsxRuntime.jsxs(react.Text, { as: "span", color: "purple.400", fontWeight: "medium", children: [
+      label && /* @__PURE__ */ jsxRuntime.jsxs(react.Text, { as: "span", color: "accent.purple", fontWeight: "medium", children: [
         label,
         ":"
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(react.Text, { as: "span", color: "gray.500", children: "[function]" }),
+      /* @__PURE__ */ jsxRuntime.jsx(react.Text, { as: "span", color: "fg.muted", children: "[function]" }),
       /* @__PURE__ */ jsxRuntime.jsx(react.Badge, { size: "xs", colorPalette: "gray", variant: "subtle", children: type.type })
     ] });
   }
   return /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { py: 0.5, display: "flex", alignItems: "center", gap: 2, children: [
-    label && /* @__PURE__ */ jsxRuntime.jsxs(react.Text, { as: "span", color: "purple.400", fontWeight: "medium", children: [
+    label && /* @__PURE__ */ jsxRuntime.jsxs(react.Text, { as: "span", color: "accent.purple", fontWeight: "medium", children: [
       label,
       ":"
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs(react.Text, { as: "span", color: "gray.500", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(react.Text, { as: "span", color: "fg.muted", children: [
       "[",
       type.type,
       "]"
@@ -65302,6 +65638,7 @@ function EastValueViewer({ type, value }) {
 exports.BindPlatform = BindPlatform;
 exports.BindRuntime = BindRuntime;
 exports.DataTaskPreview = DataTaskPreview;
+exports.DatasetKeySearch = DatasetKeySearch;
 exports.DatasetPreview = DatasetPreview;
 exports.E3Provider = E3Provider;
 exports.EastChakraDecisionJournal = EastChakraDecisionJournal;