@flanksource/clicky-ui 0.3.18 → 0.3.20

package/dist/components/JSONPathPlayground.cjs

@@ -0,0 +1,225 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const utils = require("../lib/utils.cjs");
+const Icon = require("../data/Icon.cjs");
+const JsonView = require("../data/JsonView.cjs");
+const Tree = require("../data/Tree.cjs");
+const Modal = require("../overlay/Modal.cjs");
+const button = require("./button.cjs");
+const InputField = require("./InputField.cjs");
+const jsonPathTree = require("./jsonPathTree.cjs");
+const UiWarningTriangle = require("../icons/components/UiWarningTriangle.cjs");
+const UiInfo = require("../icons/components/UiInfo.cjs");
+const EVALUATE_DEBOUNCE_MS = 250;
+function JSONPathPlayground({
+  open,
+  onClose,
+  rows,
+  value,
+  onCommit,
+  assignsRoot,
+  source,
+  evaluate,
+  title = "JSONPath playground"
+}) {
+  const [draft, setDraft] = react.useState(value);
+  const [rowIndex, setRowIndex] = react.useState(0);
+  const [selected, setSelected] = react.useState(null);
+  const [result, setResult] = react.useState(null);
+  const [evaluating, setEvaluating] = react.useState(false);
+  react.useEffect(() => {
+    if (open) {
+      setDraft(value);
+      setRowIndex((current) => current < rows.length ? current : 0);
+    }
+  }, [open, value, rows.length]);
+  const row = rows[rowIndex];
+  const browsed = react.useMemo(() => decodeSource(row, source), [row, source]);
+  const tree = react.useMemo(
+    () => jsonPathTree.createLazyJSONPathTree(browsed, { keyPrefix: `row${rowIndex}:${source ?? ""}:` }),
+    [browsed, rowIndex, source]
+  );
+  react.useEffect(() => {
+    if (!open) return;
+    setSelected(tree.materializePath(draft) ?? null);
+  }, [open, tree]);
+  const root = (selected == null ? void 0 : selected.root) ?? source;
+  const rootPending = root !== void 0 && root !== source && !assignsRoot;
+  const latestRequest = react.useRef(0);
+  react.useEffect(() => {
+    if (!open || !evaluate) return;
+    const request = latestRequest.current += 1;
+    setEvaluating(true);
+    const timer = setTimeout(() => {
+      const payload = { jsonpath: draft, row };
+      if (root !== void 0) payload.source = root;
+      void evaluate(payload).then((next) => {
+        if (latestRequest.current === request) setResult(next);
+      }).catch((error) => {
+        if (latestRequest.current === request) {
+          setResult({ matches: [], count: 0, error: String(error) });
+        }
+      }).finally(() => {
+        if (latestRequest.current === request) setEvaluating(false);
+      });
+    }, EVALUATE_DEBOUNCE_MS);
+    return () => clearTimeout(timer);
+  }, [open, evaluate, draft, row, root]);
+  const commit = () => {
+    onCommit(draft, root === void 0 ? {} : { root });
+    onClose();
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Modal.Modal,
+    {
+      open,
+      onClose,
+      title,
+      size: "2xl",
+      scrollBody: false,
+      className: "h-[80vh]",
+      footer: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(button.Button, { variant: "outline", onClick: onClose, children: "Cancel" }),
+        /* @__PURE__ */ jsxRuntime.jsx(button.Button, { onClick: commit, disabled: draft.trim() === "", children: "Use path" })
+      ] }),
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full min-h-0 flex-col gap-3", children: [
+        rows.length > 1 && /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex shrink-0 items-center gap-2 text-xs text-muted-foreground", children: [
+          "Sample row",
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "select",
+            {
+              "aria-label": "Sample row",
+              value: rowIndex,
+              onChange: (event) => setRowIndex(Number(event.target.value)),
+              className: "h-7 rounded-md border border-input bg-background px-2 text-xs text-foreground",
+              children: rows.map((_, index) => /* @__PURE__ */ jsxRuntime.jsxs("option", { value: index, children: [
+                index + 1,
+                " of ",
+                rows.length
+              ] }, index))
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Fields absent from the first row are only visible in the one that carries them." })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid min-h-0 flex-1 gap-3 md:grid-cols-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-h-0 flex-col overflow-hidden rounded-md border border-border", children: /* @__PURE__ */ jsxRuntime.jsx(
+            Tree.Tree,
+            {
+              className: "min-h-0 flex-1",
+              ariaLabel: "JSON paths",
+              roots: tree.roots,
+              getKey: (node) => node.key,
+              getChildren: tree.getChildren,
+              hasMoreChildren: tree.hasMoreChildren,
+              loadChildren: tree.loadChildren,
+              getSearchText: (node) => `${node.path} ${node.summary}`,
+              defaultOpen: (_node, depth) => depth < 2,
+              selected,
+              revealSelected: true,
+              onSelect: (node) => {
+                if (node.kind === "more") return;
+                setSelected(node);
+                setDraft(node.path);
+              },
+              renderRow: ({ node }) => /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 flex-1 items-center gap-density-2 font-mono text-xs", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: utils.cn("shrink-0", node.kind === "more" ? "text-muted-foreground" : "text-primary"), children: node.kind === "more" ? "…" : node.path }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-muted-foreground", title: node.summary, children: node.summary })
+              ] })
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-0 flex-col gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              InputField.InputField,
+              {
+                "aria-label": "JSONPath expression",
+                value: draft,
+                onChange: setDraft,
+                inputClassName: "font-mono text-xs",
+                placeholder: "$.messages[0].payload"
+              }
+            ),
+            root !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs(
+              "p",
+              {
+                className: utils.cn(
+                  "flex shrink-0 items-start gap-1.5 rounded-md border px-2 py-1.5 text-xs text-foreground",
+                  rootPending ? "border-amber-600/40 bg-amber-500/10" : "border-border bg-muted/40"
+                ),
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    Icon.Icon,
+                    {
+                      icon: rootPending ? UiWarningTriangle.UiWarningTriangle : UiInfo.UiInfo,
+                      className: utils.cn("mt-0.5 shrink-0", rootPending ? "text-amber-600" : "text-muted-foreground")
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+                    "This path is rooted inside ",
+                    /* @__PURE__ */ jsxRuntime.jsx("code", { className: "font-mono", children: root }),
+                    ", a column holding JSON as text.",
+                    " ",
+                    root === source ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                      "That is already the column's ",
+                      /* @__PURE__ */ jsxRuntime.jsx("code", { className: "font-mono", children: "Source" }),
+                      "."
+                    ] }) : assignsRoot ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                      "Applying it sets the column's ",
+                      /* @__PURE__ */ jsxRuntime.jsx("code", { className: "font-mono", children: "Source" }),
+                      " to",
+                      " ",
+                      /* @__PURE__ */ jsxRuntime.jsx("code", { className: "font-mono", children: root }),
+                      "."
+                    ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                      "The column's ",
+                      /* @__PURE__ */ jsxRuntime.jsx("code", { className: "font-mono", children: "Source" }),
+                      " must be set to",
+                      " ",
+                      /* @__PURE__ */ jsxRuntime.jsx("code", { className: "font-mono", children: root }),
+                      " for it to resolve."
+                    ] })
+                  ] })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(ResultPane, { evaluating, result, selected, evaluated: Boolean(evaluate) })
+          ] })
+        ] })
+      ] })
+    }
+  );
+}
+function decodeSource(row, source) {
+  if (!source) return row;
+  if (row === null || typeof row !== "object") return void 0;
+  const value = row[source];
+  if (typeof value !== "string") return value;
+  try {
+    return JSON.parse(value);
+  } catch {
+    return value;
+  }
+}
+function ResultPane({
+  evaluating,
+  result,
+  selected,
+  evaluated
+}) {
+  if (!evaluated) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-0 flex-1 overflow-auto rounded-md border border-border bg-muted/20 p-2 text-xs", children: selected ? /* @__PURE__ */ jsxRuntime.jsx(JsonView.JsonView, { data: selected.value, defaultOpenDepth: 1 }) : /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: "Select a node to see its value." }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex shrink-0 flex-wrap items-center gap-x-3 gap-y-1 text-xs", children: [
+      (result == null ? void 0 : result.error) ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono text-destructive", children: result.error }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: utils.cn(result && result.count === 0 && "text-muted-foreground"), children: evaluating && result === null ? "Evaluating…" : `${(result == null ? void 0 : result.count) ?? 0} match${(result == null ? void 0 : result.count) === 1 ? "" : "es"}` }),
+      result && !result.error && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: result.filterField ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        "Filterable as ",
+        /* @__PURE__ */ jsxRuntime.jsx("code", { className: "font-mono text-foreground", children: result.filterField })
+      ] }) : "Selects a set — not filterable unless the column declares filter.field" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-0 flex-1 overflow-auto rounded-md border border-border bg-muted/20 p-2 text-xs", children: result && !result.error && result.count > 0 ? /* @__PURE__ */ jsxRuntime.jsx(JsonView.JsonView, { data: result.count === 1 ? result.matches[0] : result.matches, defaultOpenDepth: 1 }) : /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: (result == null ? void 0 : result.error) ? "Fix the expression to see what it selects." : "This path selects nothing in this row." }) })
+  ] });
+}
+exports.JSONPathPlayground = JSONPathPlayground;
+//# sourceMappingURL=JSONPathPlayground.cjs.map

package/dist/components/JSONPathPlayground.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"JSONPathPlayground.cjs","sources":["../../src/components/JSONPathPlayground.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef, useState } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon } from \"../data/Icon\";\nimport { JsonView } from \"../data/JsonView\";\nimport { Tree } from \"../data/Tree\";\nimport { UiInfo, UiWarningTriangle } from \"../icons\";\nimport { Modal } from \"../overlay/Modal\";\nimport { Button } from \"./button\";\nimport { InputField } from \"./InputField\";\nimport { createLazyJSONPathTree, type JSONPathNode } from \"./jsonPathTree\";\n\n/** What evaluating an expression against one row reports back. */\nexport interface JSONPathEvalResult {\n  matches: unknown[];\n  count: number;\n  /** Why the expression could not be evaluated — a parse error is an answer, not a failure. */\n  error?: string;\n  /** Backend field the expression addresses, when it addresses one rather than selecting a set. */\n  filterField?: string;\n}\n\nexport interface JSONPathEvalRequest {\n  jsonpath: string;\n  /** Column the path is rooted at, when it addresses a decoded JSON-encoded column. */\n  source?: string;\n  row: unknown;\n}\n\nexport interface JSONPathPlaygroundProps {\n  open: boolean;\n  onClose: () => void;\n  /** Sampled rows to browse. A row switcher appears once there is more than one. */\n  rows: unknown[];\n  /** The expression the field currently holds. */\n  value: string;\n  /** Commits the drafted expression, along with the column it must be rooted at. */\n  onCommit: (path: string, context: { root?: string }) => void;\n  /**\n   * True when `onCommit` writes the root itself. It only changes what the\n   * dialog says about a path that descends into an encoded column: that the\n   * root will be recorded, rather than instructing the author to go and record\n   * it. Consumers that drop the root leave this unset and keep the warning.\n   */\n  assignsRoot?: boolean;\n  /**\n   * The column the field's path is *already* rooted at — its saved `source`.\n   *\n   * Without it the dialog browses and evaluates from the row while the value it\n   * was opened with is written against a decoded column, so a column that works\n   * perfectly well reports no matches and an author is invited to fix it.\n   */\n  source?: string;\n  /**\n   * Evaluates the draft against the selected row. Without it the dialog is a\n   * browser only — it shows the selected node's own value instead of a match\n   * set, which is all an offline demo can honestly claim.\n   */\n  evaluate?: (request: JSONPathEvalRequest) => Promise<JSONPathEvalResult>;\n  title?: string;\n}\n\nconst EVALUATE_DEBOUNCE_MS = 250;\n\n/**\n * The full-size counterpart to the inline JSONPath dropdown.\n *\n * The dropdown is a preview and caps its walk to stay instant; this browses the\n * row with no depth limit, every array element, and every property — and pairs\n * the tree with what the expression actually selects, evaluated by the backend\n * that will run it, so an author stops finding out at query time.\n */\nexport function JSONPathPlayground({\n  open,\n  onClose,\n  rows,\n  value,\n  onCommit,\n  assignsRoot,\n  source,\n  evaluate,\n  title = \"JSONPath playground\",\n}: JSONPathPlaygroundProps) {\n  const [draft, setDraft] = useState(value);\n  const [rowIndex, setRowIndex] = useState(0);\n  const [selected, setSelected] = useState<JSONPathNode | null>(null);\n  const [result, setResult] = useState<JSONPathEvalResult | null>(null);\n  const [evaluating, setEvaluating] = useState(false);\n\n  // Reopening starts from whatever the field holds now, not from the last\n  // session's draft — the operator may have typed over it in between.\n  useEffect(() => {\n    if (open) {\n      setDraft(value);\n      setRowIndex((current) => (current < rows.length ? current : 0));\n    }\n  }, [open, value, rows.length]);\n\n  const row = rows[rowIndex];\n  // A column with a `source` has its paths written against that column decoded,\n  // not against the row, so that is what the tree has to browse — otherwise the\n  // paths it offers and the path the field holds are in two different languages.\n  const browsed = useMemo(() => decodeSource(row, source), [row, source]);\n  const tree = useMemo(\n    () => createLazyJSONPathTree(browsed, { keyPrefix: `row${rowIndex}:${source ?? \"\"}:` }),\n    [browsed, rowIndex, source],\n  );\n\n  // Reveal the branch the current expression addresses, so the dialog opens\n  // showing the value rather than a collapsed root.\n  useEffect(() => {\n    if (!open) return;\n    setSelected(tree.materializePath(draft) ?? null);\n    // Only on (re)open and row change: re-running this per keystroke would yank\n    // the tree around while the operator is typing.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [open, tree]);\n\n  // The root belongs to the selection, and hand-editing the expression keeps it:\n  // an operator who descended into an encoded column and is now tuning the path\n  // inside it still means that column. It is never silent — the banner below\n  // names it — and selecting any node outside that subtree clears it. A column\n  // that already declares a source starts there rather than at nothing.\n  const root = selected?.root ?? source;\n  // Only a root nobody has recorded yet is a warning: one the column already\n  // declares, or one this dialog is about to write, is just context.\n  const rootPending = root !== undefined && root !== source && !assignsRoot;\n\n  const latestRequest = useRef(0);\n  useEffect(() => {\n    if (!open || !evaluate) return;\n    const request = (latestRequest.current += 1);\n    setEvaluating(true);\n    const timer = setTimeout(() => {\n      const payload: JSONPathEvalRequest = { jsonpath: draft, row };\n      if (root !== undefined) payload.source = root;\n      void evaluate(payload)\n        .then((next) => {\n          if (latestRequest.current === request) setResult(next);\n        })\n        .catch((error: unknown) => {\n          if (latestRequest.current === request) {\n            setResult({ matches: [], count: 0, error: String(error) });\n          }\n        })\n        .finally(() => {\n          if (latestRequest.current === request) setEvaluating(false);\n        });\n    }, EVALUATE_DEBOUNCE_MS);\n    return () => clearTimeout(timer);\n  }, [open, evaluate, draft, row, root]);\n\n  const commit = () => {\n    onCommit(draft, root === undefined ? {} : { root });\n    onClose();\n  };\n\n  return (\n    <Modal\n      open={open}\n      onClose={onClose}\n      title={title}\n      size=\"2xl\"\n      scrollBody={false}\n      className=\"h-[80vh]\"\n      footer={(\n        <div className=\"flex items-center justify-end gap-2\">\n          <Button variant=\"outline\" onClick={onClose}>Cancel</Button>\n          <Button onClick={commit} disabled={draft.trim() === \"\"}>Use path</Button>\n        </div>\n      )}\n    >\n      <div className=\"flex h-full min-h-0 flex-col gap-3\">\n        {rows.length > 1 && (\n          <label className=\"flex shrink-0 items-center gap-2 text-xs text-muted-foreground\">\n            Sample row\n            <select\n              aria-label=\"Sample row\"\n              value={rowIndex}\n              onChange={(event) => setRowIndex(Number(event.target.value))}\n              className=\"h-7 rounded-md border border-input bg-background px-2 text-xs text-foreground\"\n            >\n              {rows.map((_, index) => (\n                <option key={index} value={index}>{index + 1} of {rows.length}</option>\n              ))}\n            </select>\n            <span>Fields absent from the first row are only visible in the one that carries them.</span>\n          </label>\n        )}\n\n        <div className=\"grid min-h-0 flex-1 gap-3 md:grid-cols-2\">\n          <div className=\"flex min-h-0 flex-col overflow-hidden rounded-md border border-border\">\n            <Tree<JSONPathNode>\n              className=\"min-h-0 flex-1\"\n              ariaLabel=\"JSON paths\"\n              roots={tree.roots}\n              getKey={(node) => node.key}\n              getChildren={tree.getChildren}\n              hasMoreChildren={tree.hasMoreChildren}\n              loadChildren={tree.loadChildren}\n              getSearchText={(node) => `${node.path} ${node.summary}`}\n              defaultOpen={(_node, depth) => depth < 2}\n              selected={selected}\n              revealSelected\n              onSelect={(node) => {\n                if (node.kind === \"more\") return;\n                setSelected(node);\n                setDraft(node.path);\n              }}\n              renderRow={({ node }) => (\n                <span className=\"flex min-w-0 flex-1 items-center gap-density-2 font-mono text-xs\">\n                  <span className={cn(\"shrink-0\", node.kind === \"more\" ? \"text-muted-foreground\" : \"text-primary\")}>\n                    {node.kind === \"more\" ? \"…\" : node.path}\n                  </span>\n                  <span className=\"truncate text-muted-foreground\" title={node.summary}>{node.summary}</span>\n                </span>\n              )}\n            />\n          </div>\n\n          <div className=\"flex min-h-0 flex-col gap-2\">\n            <InputField\n              aria-label=\"JSONPath expression\"\n              value={draft}\n              onChange={setDraft}\n              inputClassName=\"font-mono text-xs\"\n              placeholder=\"$.messages[0].payload\"\n            />\n\n            {root !== undefined && (\n              <p\n                className={cn(\n                  \"flex shrink-0 items-start gap-1.5 rounded-md border px-2 py-1.5 text-xs text-foreground\",\n                  rootPending\n                    ? \"border-amber-600/40 bg-amber-500/10\"\n                    : \"border-border bg-muted/40\",\n                )}\n              >\n                <Icon\n                  icon={rootPending ? UiWarningTriangle : UiInfo}\n                  className={cn(\"mt-0.5 shrink-0\", rootPending ? \"text-amber-600\" : \"text-muted-foreground\")}\n                />\n                <span>\n                  This path is rooted inside <code className=\"font-mono\">{root}</code>, a column holding JSON\n                  as text.{\" \"}\n                  {root === source ? (\n                    <>\n                      That is already the column's <code className=\"font-mono\">Source</code>.\n                    </>\n                  ) : assignsRoot ? (\n                    <>\n                      Applying it sets the column's <code className=\"font-mono\">Source</code> to{\" \"}\n                      <code className=\"font-mono\">{root}</code>.\n                    </>\n                  ) : (\n                    <>\n                      The column's <code className=\"font-mono\">Source</code> must be set to{\" \"}\n                      <code className=\"font-mono\">{root}</code> for it to resolve.\n                    </>\n                  )}\n                </span>\n              </p>\n            )}\n\n            <ResultPane evaluating={evaluating} result={result} selected={selected} evaluated={Boolean(evaluate)} />\n          </div>\n        </div>\n      </div>\n    </Modal>\n  );\n}\n\n/**\n * The value a `source` column's paths are written against: the column itself,\n * decoded when it carries JSON as text — which mirrors what the backend does\n * before it applies the path.\n */\nfunction decodeSource(row: unknown, source: string | undefined): unknown {\n  if (!source) return row;\n  if (row === null || typeof row !== \"object\") return undefined;\n  const value = (row as Record<string, unknown>)[source];\n  if (typeof value !== \"string\") return value;\n  try {\n    return JSON.parse(value) as unknown;\n  } catch {\n    return value;\n  }\n}\n\nfunction ResultPane({\n  evaluating,\n  result,\n  selected,\n  evaluated,\n}: {\n  evaluating: boolean;\n  result: JSONPathEvalResult | null;\n  selected: JSONPathNode | null;\n  evaluated: boolean;\n}) {\n  if (!evaluated) {\n    return (\n      <div className=\"min-h-0 flex-1 overflow-auto rounded-md border border-border bg-muted/20 p-2 text-xs\">\n        {selected ? (\n          <JsonView data={selected.value} defaultOpenDepth={1} />\n        ) : (\n          <p className=\"text-muted-foreground\">Select a node to see its value.</p>\n        )}\n      </div>\n    );\n  }\n\n  return (\n    <>\n      <div className=\"flex shrink-0 flex-wrap items-center gap-x-3 gap-y-1 text-xs\">\n        {result?.error ? (\n          <span className=\"font-mono text-destructive\">{result.error}</span>\n        ) : (\n          <span className={cn(result && result.count === 0 && \"text-muted-foreground\")}>\n            {evaluating && result === null\n              ? \"Evaluating…\"\n              : `${result?.count ?? 0} match${result?.count === 1 ? \"\" : \"es\"}`}\n          </span>\n        )}\n        {result && !result.error && (\n          <span className=\"text-muted-foreground\">\n            {result.filterField\n              ? <>Filterable as <code className=\"font-mono text-foreground\">{result.filterField}</code></>\n              : \"Selects a set — not filterable unless the column declares filter.field\"}\n          </span>\n        )}\n      </div>\n      <div className=\"min-h-0 flex-1 overflow-auto rounded-md border border-border bg-muted/20 p-2 text-xs\">\n        {result && !result.error && result.count > 0 ? (\n          <JsonView data={result.count === 1 ? result.matches[0] : result.matches} defaultOpenDepth={1} />\n        ) : (\n          <p className=\"text-muted-foreground\">\n            {result?.error ? \"Fix the expression to see what it selects.\" : \"This path selects nothing in this row.\"}\n          </p>\n        )}\n      </div>\n    </>\n  );\n}\n"],"names":["useState","useEffect","useMemo","createLazyJSONPathTree","useRef","jsx","Modal","jsxs","Button","Tree","cn","InputField","Icon","UiWarningTriangle","UiInfo","Fragment","JsonView"],"mappings":";;;;;;;;;;;;;;AA6DA,MAAM,uBAAuB;AAUtB,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AACV,GAA4B;AAC1B,QAAM,CAAC,OAAO,QAAQ,IAAIA,MAAAA,SAAS,KAAK;AACxC,QAAM,CAAC,UAAU,WAAW,IAAIA,MAAAA,SAAS,CAAC;AAC1C,QAAM,CAAC,UAAU,WAAW,IAAIA,MAAAA,SAA8B,IAAI;AAClE,QAAM,CAAC,QAAQ,SAAS,IAAIA,MAAAA,SAAoC,IAAI;AACpE,QAAM,CAAC,YAAY,aAAa,IAAIA,MAAAA,SAAS,KAAK;AAIlDC,QAAAA,UAAU,MAAM;AACd,QAAI,MAAM;AACR,eAAS,KAAK;AACd,kBAAY,CAAC,YAAa,UAAU,KAAK,SAAS,UAAU,CAAE;AAAA,IAChE;AAAA,EACF,GAAG,CAAC,MAAM,OAAO,KAAK,MAAM,CAAC;AAE7B,QAAM,MAAM,KAAK,QAAQ;AAIzB,QAAM,UAAUC,cAAQ,MAAM,aAAa,KAAK,MAAM,GAAG,CAAC,KAAK,MAAM,CAAC;AACtE,QAAM,OAAOA,MAAAA;AAAAA,IACX,MAAMC,oCAAuB,SAAS,EAAE,WAAW,MAAM,QAAQ,IAAI,UAAU,EAAE,IAAA,CAAK;AAAA,IACtF,CAAC,SAAS,UAAU,MAAM;AAAA,EAAA;AAK5BF,QAAAA,UAAU,MAAM;AACd,QAAI,CAAC,KAAM;AACX,gBAAY,KAAK,gBAAgB,KAAK,KAAK,IAAI;AAAA,EAIjD,GAAG,CAAC,MAAM,IAAI,CAAC;AAOf,QAAM,QAAO,qCAAU,SAAQ;AAG/B,QAAM,cAAc,SAAS,UAAa,SAAS,UAAU,CAAC;AAE9D,QAAM,gBAAgBG,MAAAA,OAAO,CAAC;AAC9BH,QAAAA,UAAU,MAAM;AACd,QAAI,CAAC,QAAQ,CAAC,SAAU;AACxB,UAAM,UAAW,cAAc,WAAW;AAC1C,kBAAc,IAAI;AAClB,UAAM,QAAQ,WAAW,MAAM;AAC7B,YAAM,UAA+B,EAAE,UAAU,OAAO,IAAA;AACxD,UAAI,SAAS,OAAW,SAAQ,SAAS;AACzC,WAAK,SAAS,OAAO,EAClB,KAAK,CAAC,SAAS;AACd,YAAI,cAAc,YAAY,QAAS,WAAU,IAAI;AAAA,MACvD,CAAC,EACA,MAAM,CAAC,UAAmB;AACzB,YAAI,cAAc,YAAY,SAAS;AACrC,oBAAU,EAAE,SAAS,CAAA,GAAI,OAAO,GAAG,OAAO,OAAO,KAAK,GAAG;AAAA,QAC3D;AAAA,MACF,CAAC,EACA,QAAQ,MAAM;AACb,YAAI,cAAc,YAAY,QAAS,eAAc,KAAK;AAAA,MAC5D,CAAC;AAAA,IACL,GAAG,oBAAoB;AACvB,WAAO,MAAM,aAAa,KAAK;AAAA,EACjC,GAAG,CAAC,MAAM,UAAU,OAAO,KAAK,IAAI,CAAC;AAErC,QAAM,SAAS,MAAM;AACnB,aAAS,OAAO,SAAS,SAAY,CAAA,IAAK,EAAE,MAAM;AAClD,YAAA;AAAA,EACF;AAEA,SACEI,2BAAAA;AAAAA,IAACC,MAAAA;AAAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,MAAK;AAAA,MACL,YAAY;AAAA,MACZ,WAAU;AAAA,MACV,QACEC,2BAAAA,KAAC,OAAA,EAAI,WAAU,uCACb,UAAA;AAAA,QAAAF,+BAACG,OAAAA,QAAA,EAAO,SAAQ,WAAU,SAAS,SAAS,UAAA,UAAM;AAAA,QAClDH,2BAAAA,IAACG,OAAAA,UAAO,SAAS,QAAQ,UAAU,MAAM,KAAA,MAAW,IAAI,UAAA,WAAA,CAAQ;AAAA,MAAA,GAClE;AAAA,MAGF,UAAAD,2BAAAA,KAAC,OAAA,EAAI,WAAU,sCACZ,UAAA;AAAA,QAAA,KAAK,SAAS,KACbA,2BAAAA,KAAC,SAAA,EAAM,WAAU,kEAAiE,UAAA;AAAA,UAAA;AAAA,UAEhFF,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,cAAW;AAAA,cACX,OAAO;AAAA,cACP,UAAU,CAAC,UAAU,YAAY,OAAO,MAAM,OAAO,KAAK,CAAC;AAAA,cAC3D,WAAU;AAAA,cAET,UAAA,KAAK,IAAI,CAAC,GAAG,UACZE,2BAAAA,KAAC,UAAA,EAAmB,OAAO,OAAQ,UAAA;AAAA,gBAAA,QAAQ;AAAA,gBAAE;AAAA,gBAAK,KAAK;AAAA,cAAA,EAAA,GAA1C,KAAiD,CAC/D;AAAA,YAAA;AAAA,UAAA;AAAA,UAEHF,2BAAAA,IAAC,UAAK,UAAA,kFAAA,CAA+E;AAAA,QAAA,GACvF;AAAA,QAGFE,2BAAAA,KAAC,OAAA,EAAI,WAAU,4CACb,UAAA;AAAA,UAAAF,2BAAAA,IAAC,OAAA,EAAI,WAAU,yEACb,UAAAA,2BAAAA;AAAAA,YAACI,KAAAA;AAAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,WAAU;AAAA,cACV,OAAO,KAAK;AAAA,cACZ,QAAQ,CAAC,SAAS,KAAK;AAAA,cACvB,aAAa,KAAK;AAAA,cAClB,iBAAiB,KAAK;AAAA,cACtB,cAAc,KAAK;AAAA,cACnB,eAAe,CAAC,SAAS,GAAG,KAAK,IAAI,IAAI,KAAK,OAAO;AAAA,cACrD,aAAa,CAAC,OAAO,UAAU,QAAQ;AAAA,cACvC;AAAA,cACA,gBAAc;AAAA,cACd,UAAU,CAAC,SAAS;AAClB,oBAAI,KAAK,SAAS,OAAQ;AAC1B,4BAAY,IAAI;AAChB,yBAAS,KAAK,IAAI;AAAA,cACpB;AAAA,cACA,WAAW,CAAC,EAAE,WACZF,2BAAAA,KAAC,QAAA,EAAK,WAAU,oEACd,UAAA;AAAA,gBAAAF,+BAAC,QAAA,EAAK,WAAWK,MAAAA,GAAG,YAAY,KAAK,SAAS,SAAS,0BAA0B,cAAc,GAC5F,UAAA,KAAK,SAAS,SAAS,MAAM,KAAK,MACrC;AAAA,gBACAL,2BAAAA,IAAC,UAAK,WAAU,kCAAiC,OAAO,KAAK,SAAU,eAAK,QAAA,CAAQ;AAAA,cAAA,EAAA,CACtF;AAAA,YAAA;AAAA,UAAA,GAGN;AAAA,UAEAE,2BAAAA,KAAC,OAAA,EAAI,WAAU,+BACb,UAAA;AAAA,YAAAF,2BAAAA;AAAAA,cAACM,WAAAA;AAAAA,cAAA;AAAA,gBACC,cAAW;AAAA,gBACX,OAAO;AAAA,gBACP,UAAU;AAAA,gBACV,gBAAe;AAAA,gBACf,aAAY;AAAA,cAAA;AAAA,YAAA;AAAA,YAGb,SAAS,UACRJ,2BAAAA;AAAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAWG,MAAAA;AAAAA,kBACT;AAAA,kBACA,cACI,wCACA;AAAA,gBAAA;AAAA,gBAGN,UAAA;AAAA,kBAAAL,2BAAAA;AAAAA,oBAACO,KAAAA;AAAAA,oBAAA;AAAA,sBACC,MAAM,cAAcC,kBAAAA,oBAAoBC,OAAAA;AAAAA,sBACxC,WAAWJ,MAAAA,GAAG,mBAAmB,cAAc,mBAAmB,uBAAuB;AAAA,oBAAA;AAAA,kBAAA;AAAA,kDAE1F,QAAA,EAAK,UAAA;AAAA,oBAAA;AAAA,oBACuBL,2BAAAA,IAAC,QAAA,EAAK,WAAU,aAAa,UAAA,MAAK;AAAA,oBAAO;AAAA,oBAC3D;AAAA,oBACR,SAAS,SACRE,2BAAAA,KAAAQ,WAAAA,UAAA,EAAE,UAAA;AAAA,sBAAA;AAAA,sBAC6BV,2BAAAA,IAAC,QAAA,EAAK,WAAU,aAAY,UAAA,UAAM;AAAA,sBAAO;AAAA,oBAAA,EAAA,CACxE,IACE,cACFE,2BAAAA,KAAAQ,WAAAA,UAAA,EAAE,UAAA;AAAA,sBAAA;AAAA,sBAC8BV,2BAAAA,IAAC,QAAA,EAAK,WAAU,aAAY,UAAA,UAAM;AAAA,sBAAO;AAAA,sBAAI;AAAA,sBAC3EA,2BAAAA,IAAC,QAAA,EAAK,WAAU,aAAa,UAAA,MAAK;AAAA,sBAAO;AAAA,oBAAA,EAAA,CAC3C,IAEAE,2BAAAA,KAAAQ,WAAAA,UAAA,EAAE,UAAA;AAAA,sBAAA;AAAA,sBACaV,2BAAAA,IAAC,QAAA,EAAK,WAAU,aAAY,UAAA,UAAM;AAAA,sBAAO;AAAA,sBAAgB;AAAA,sBACtEA,2BAAAA,IAAC,QAAA,EAAK,WAAU,aAAa,UAAA,MAAK;AAAA,sBAAO;AAAA,oBAAA,EAAA,CAC3C;AAAA,kBAAA,EAAA,CAEJ;AAAA,gBAAA;AAAA,cAAA;AAAA,YAAA;AAAA,YAIJA,+BAAC,cAAW,YAAwB,QAAgB,UAAoB,WAAW,QAAQ,QAAQ,EAAA,CAAG;AAAA,UAAA,EAAA,CACxG;AAAA,QAAA,EAAA,CACF;AAAA,MAAA,EAAA,CACF;AAAA,IAAA;AAAA,EAAA;AAGN;AAOA,SAAS,aAAa,KAAc,QAAqC;AACvE,MAAI,CAAC,OAAQ,QAAO;AACpB,MAAI,QAAQ,QAAQ,OAAO,QAAQ,SAAU,QAAO;AACpD,QAAM,QAAS,IAAgC,MAAM;AACrD,MAAI,OAAO,UAAU,SAAU,QAAO;AACtC,MAAI;AACF,WAAO,KAAK,MAAM,KAAK;AAAA,EACzB,QAAQ;AACN,WAAO;AAAA,EACT;AACF;AAEA,SAAS,WAAW;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAKG;AACD,MAAI,CAAC,WAAW;AACd,0CACG,OAAA,EAAI,WAAU,wFACZ,UAAA,WACCA,2BAAAA,IAACW,qBAAS,MAAM,SAAS,OAAO,kBAAkB,GAAG,IAErDX,2BAAAA,IAAC,OAAE,WAAU,yBAAwB,6CAA+B,EAAA,CAExE;AAAA,EAEJ;AAEA,SACEE,2BAAAA,KAAAQ,qBAAA,EACE,UAAA;AAAA,IAAAR,2BAAAA,KAAC,OAAA,EAAI,WAAU,gEACZ,UAAA;AAAA,OAAA,iCAAQ,SACPF,+BAAC,QAAA,EAAK,WAAU,8BAA8B,UAAA,OAAO,MAAA,CAAM,IAE3DA,2BAAAA,IAAC,QAAA,EAAK,WAAWK,SAAG,UAAU,OAAO,UAAU,KAAK,uBAAuB,GACxE,UAAA,cAAc,WAAW,OACtB,gBACA,IAAG,iCAAQ,UAAS,CAAC,UAAS,iCAAQ,WAAU,IAAI,KAAK,IAAI,IACnE;AAAA,MAED,UAAU,CAAC,OAAO,SACjBL,2BAAAA,IAAC,UAAK,WAAU,yBACb,UAAA,OAAO,cACJE,2BAAAA,KAAAQ,WAAAA,UAAA,EAAE,UAAA;AAAA,QAAA;AAAA,QAAcV,2BAAAA,IAAC,QAAA,EAAK,WAAU,6BAA6B,iBAAO,YAAA,CAAY;AAAA,MAAA,EAAA,CAAO,IACvF,yEAAA,CACN;AAAA,IAAA,GAEJ;AAAA,IACAA,2BAAAA,IAAC,OAAA,EAAI,WAAU,wFACZ,oBAAU,CAAC,OAAO,SAAS,OAAO,QAAQ,IACzCA,+BAACW,SAAAA,UAAA,EAAS,MAAM,OAAO,UAAU,IAAI,OAAO,QAAQ,CAAC,IAAI,OAAO,SAAS,kBAAkB,EAAA,CAAG,IAE9FX,2BAAAA,IAAC,KAAA,EAAE,WAAU,yBACV,WAAA,iCAAQ,SAAQ,+CAA+C,0CAClE,EAAA,CAEJ;AAAA,EAAA,GACF;AAEJ;;"}

package/dist/components/JSONPathPlayground.d.ts

@@ -0,0 +1,59 @@
+/** What evaluating an expression against one row reports back. */
+export interface JSONPathEvalResult {
+    matches: unknown[];
+    count: number;
+    /** Why the expression could not be evaluated — a parse error is an answer, not a failure. */
+    error?: string;
+    /** Backend field the expression addresses, when it addresses one rather than selecting a set. */
+    filterField?: string;
+}
+export interface JSONPathEvalRequest {
+    jsonpath: string;
+    /** Column the path is rooted at, when it addresses a decoded JSON-encoded column. */
+    source?: string;
+    row: unknown;
+}
+export interface JSONPathPlaygroundProps {
+    open: boolean;
+    onClose: () => void;
+    /** Sampled rows to browse. A row switcher appears once there is more than one. */
+    rows: unknown[];
+    /** The expression the field currently holds. */
+    value: string;
+    /** Commits the drafted expression, along with the column it must be rooted at. */
+    onCommit: (path: string, context: {
+        root?: string;
+    }) => void;
+    /**
+     * True when `onCommit` writes the root itself. It only changes what the
+     * dialog says about a path that descends into an encoded column: that the
+     * root will be recorded, rather than instructing the author to go and record
+     * it. Consumers that drop the root leave this unset and keep the warning.
+     */
+    assignsRoot?: boolean;
+    /**
+     * The column the field's path is *already* rooted at — its saved `source`.
+     *
+     * Without it the dialog browses and evaluates from the row while the value it
+     * was opened with is written against a decoded column, so a column that works
+     * perfectly well reports no matches and an author is invited to fix it.
+     */
+    source?: string;
+    /**
+     * Evaluates the draft against the selected row. Without it the dialog is a
+     * browser only — it shows the selected node's own value instead of a match
+     * set, which is all an offline demo can honestly claim.
+     */
+    evaluate?: (request: JSONPathEvalRequest) => Promise<JSONPathEvalResult>;
+    title?: string;
+}
+/**
+ * The full-size counterpart to the inline JSONPath dropdown.
+ *
+ * The dropdown is a preview and caps its walk to stay instant; this browses the
+ * row with no depth limit, every array element, and every property — and pairs
+ * the tree with what the expression actually selects, evaluated by the backend
+ * that will run it, so an author stops finding out at query time.
+ */
+export declare function JSONPathPlayground({ open, onClose, rows, value, onCommit, assignsRoot, source, evaluate, title, }: JSONPathPlaygroundProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=JSONPathPlayground.d.ts.map

package/dist/components/JSONPathPlayground.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"JSONPathPlayground.d.ts","sourceRoot":"","sources":["../../src/components/JSONPathPlayground.tsx"],"names":[],"mappings":"AAWA,kEAAkE;AAClE,MAAM,WAAW,kBAAkB;IACjC,OAAO,EAAE,OAAO,EAAE,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,6FAA6F;IAC7F,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iGAAiG;IACjG,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,MAAM,CAAC;IACjB,qFAAqF;IACrF,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,GAAG,EAAE,OAAO,CAAC;CACd;AAED,MAAM,WAAW,uBAAuB;IACtC,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,kFAAkF;IAClF,IAAI,EAAE,OAAO,EAAE,CAAC;IAChB,gDAAgD;IAChD,KAAK,EAAE,MAAM,CAAC;IACd,kFAAkF;IAClF,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE;QAAE,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC7D;;;;;OAKG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,mBAAmB,KAAK,OAAO,CAAC,kBAAkB,CAAC,CAAC;IACzE,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAID;;;;;;;GAOG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,IAAI,EACJ,OAAO,EACP,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,WAAW,EACX,MAAM,EACN,QAAQ,EACR,KAA6B,GAC9B,EAAE,uBAAuB,2CA4LzB"}

package/dist/components/JSONPathPlayground.js

@@ -0,0 +1,225 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useState, useEffect, useMemo, useRef } from "react";
+import { cn } from "../lib/utils.js";
+import { Icon } from "../data/Icon.js";
+import { JsonView } from "../data/JsonView.js";
+import { Tree } from "../data/Tree.js";
+import { Modal } from "../overlay/Modal.js";
+import { Button } from "./button.js";
+import { InputField } from "./InputField.js";
+import { createLazyJSONPathTree } from "./jsonPathTree.js";
+import { UiWarningTriangle } from "../icons/components/UiWarningTriangle.js";
+import { UiInfo } from "../icons/components/UiInfo.js";
+const EVALUATE_DEBOUNCE_MS = 250;
+function JSONPathPlayground({
+  open,
+  onClose,
+  rows,
+  value,
+  onCommit,
+  assignsRoot,
+  source,
+  evaluate,
+  title = "JSONPath playground"
+}) {
+  const [draft, setDraft] = useState(value);
+  const [rowIndex, setRowIndex] = useState(0);
+  const [selected, setSelected] = useState(null);
+  const [result, setResult] = useState(null);
+  const [evaluating, setEvaluating] = useState(false);
+  useEffect(() => {
+    if (open) {
+      setDraft(value);
+      setRowIndex((current) => current < rows.length ? current : 0);
+    }
+  }, [open, value, rows.length]);
+  const row = rows[rowIndex];
+  const browsed = useMemo(() => decodeSource(row, source), [row, source]);
+  const tree = useMemo(
+    () => createLazyJSONPathTree(browsed, { keyPrefix: `row${rowIndex}:${source ?? ""}:` }),
+    [browsed, rowIndex, source]
+  );
+  useEffect(() => {
+    if (!open) return;
+    setSelected(tree.materializePath(draft) ?? null);
+  }, [open, tree]);
+  const root = (selected == null ? void 0 : selected.root) ?? source;
+  const rootPending = root !== void 0 && root !== source && !assignsRoot;
+  const latestRequest = useRef(0);
+  useEffect(() => {
+    if (!open || !evaluate) return;
+    const request = latestRequest.current += 1;
+    setEvaluating(true);
+    const timer = setTimeout(() => {
+      const payload = { jsonpath: draft, row };
+      if (root !== void 0) payload.source = root;
+      void evaluate(payload).then((next) => {
+        if (latestRequest.current === request) setResult(next);
+      }).catch((error) => {
+        if (latestRequest.current === request) {
+          setResult({ matches: [], count: 0, error: String(error) });
+        }
+      }).finally(() => {
+        if (latestRequest.current === request) setEvaluating(false);
+      });
+    }, EVALUATE_DEBOUNCE_MS);
+    return () => clearTimeout(timer);
+  }, [open, evaluate, draft, row, root]);
+  const commit = () => {
+    onCommit(draft, root === void 0 ? {} : { root });
+    onClose();
+  };
+  return /* @__PURE__ */ jsx(
+    Modal,
+    {
+      open,
+      onClose,
+      title,
+      size: "2xl",
+      scrollBody: false,
+      className: "h-[80vh]",
+      footer: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-2", children: [
+        /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: onClose, children: "Cancel" }),
+        /* @__PURE__ */ jsx(Button, { onClick: commit, disabled: draft.trim() === "", children: "Use path" })
+      ] }),
+      children: /* @__PURE__ */ jsxs("div", { className: "flex h-full min-h-0 flex-col gap-3", children: [
+        rows.length > 1 && /* @__PURE__ */ jsxs("label", { className: "flex shrink-0 items-center gap-2 text-xs text-muted-foreground", children: [
+          "Sample row",
+          /* @__PURE__ */ jsx(
+            "select",
+            {
+              "aria-label": "Sample row",
+              value: rowIndex,
+              onChange: (event) => setRowIndex(Number(event.target.value)),
+              className: "h-7 rounded-md border border-input bg-background px-2 text-xs text-foreground",
+              children: rows.map((_, index) => /* @__PURE__ */ jsxs("option", { value: index, children: [
+                index + 1,
+                " of ",
+                rows.length
+              ] }, index))
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { children: "Fields absent from the first row are only visible in the one that carries them." })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "grid min-h-0 flex-1 gap-3 md:grid-cols-2", children: [
+          /* @__PURE__ */ jsx("div", { className: "flex min-h-0 flex-col overflow-hidden rounded-md border border-border", children: /* @__PURE__ */ jsx(
+            Tree,
+            {
+              className: "min-h-0 flex-1",
+              ariaLabel: "JSON paths",
+              roots: tree.roots,
+              getKey: (node) => node.key,
+              getChildren: tree.getChildren,
+              hasMoreChildren: tree.hasMoreChildren,
+              loadChildren: tree.loadChildren,
+              getSearchText: (node) => `${node.path} ${node.summary}`,
+              defaultOpen: (_node, depth) => depth < 2,
+              selected,
+              revealSelected: true,
+              onSelect: (node) => {
+                if (node.kind === "more") return;
+                setSelected(node);
+                setDraft(node.path);
+              },
+              renderRow: ({ node }) => /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 items-center gap-density-2 font-mono text-xs", children: [
+                /* @__PURE__ */ jsx("span", { className: cn("shrink-0", node.kind === "more" ? "text-muted-foreground" : "text-primary"), children: node.kind === "more" ? "…" : node.path }),
+                /* @__PURE__ */ jsx("span", { className: "truncate text-muted-foreground", title: node.summary, children: node.summary })
+              ] })
+            }
+          ) }),
+          /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-col gap-2", children: [
+            /* @__PURE__ */ jsx(
+              InputField,
+              {
+                "aria-label": "JSONPath expression",
+                value: draft,
+                onChange: setDraft,
+                inputClassName: "font-mono text-xs",
+                placeholder: "$.messages[0].payload"
+              }
+            ),
+            root !== void 0 && /* @__PURE__ */ jsxs(
+              "p",
+              {
+                className: cn(
+                  "flex shrink-0 items-start gap-1.5 rounded-md border px-2 py-1.5 text-xs text-foreground",
+                  rootPending ? "border-amber-600/40 bg-amber-500/10" : "border-border bg-muted/40"
+                ),
+                children: [
+                  /* @__PURE__ */ jsx(
+                    Icon,
+                    {
+                      icon: rootPending ? UiWarningTriangle : UiInfo,
+                      className: cn("mt-0.5 shrink-0", rootPending ? "text-amber-600" : "text-muted-foreground")
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs("span", { children: [
+                    "This path is rooted inside ",
+                    /* @__PURE__ */ jsx("code", { className: "font-mono", children: root }),
+                    ", a column holding JSON as text.",
+                    " ",
+                    root === source ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                      "That is already the column's ",
+                      /* @__PURE__ */ jsx("code", { className: "font-mono", children: "Source" }),
+                      "."
+                    ] }) : assignsRoot ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                      "Applying it sets the column's ",
+                      /* @__PURE__ */ jsx("code", { className: "font-mono", children: "Source" }),
+                      " to",
+                      " ",
+                      /* @__PURE__ */ jsx("code", { className: "font-mono", children: root }),
+                      "."
+                    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                      "The column's ",
+                      /* @__PURE__ */ jsx("code", { className: "font-mono", children: "Source" }),
+                      " must be set to",
+                      " ",
+                      /* @__PURE__ */ jsx("code", { className: "font-mono", children: root }),
+                      " for it to resolve."
+                    ] })
+                  ] })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(ResultPane, { evaluating, result, selected, evaluated: Boolean(evaluate) })
+          ] })
+        ] })
+      ] })
+    }
+  );
+}
+function decodeSource(row, source) {
+  if (!source) return row;
+  if (row === null || typeof row !== "object") return void 0;
+  const value = row[source];
+  if (typeof value !== "string") return value;
+  try {
+    return JSON.parse(value);
+  } catch {
+    return value;
+  }
+}
+function ResultPane({
+  evaluating,
+  result,
+  selected,
+  evaluated
+}) {
+  if (!evaluated) {
+    return /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 overflow-auto rounded-md border border-border bg-muted/20 p-2 text-xs", children: selected ? /* @__PURE__ */ jsx(JsonView, { data: selected.value, defaultOpenDepth: 1 }) : /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: "Select a node to see its value." }) });
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 flex-wrap items-center gap-x-3 gap-y-1 text-xs", children: [
+      (result == null ? void 0 : result.error) ? /* @__PURE__ */ jsx("span", { className: "font-mono text-destructive", children: result.error }) : /* @__PURE__ */ jsx("span", { className: cn(result && result.count === 0 && "text-muted-foreground"), children: evaluating && result === null ? "Evaluating…" : `${(result == null ? void 0 : result.count) ?? 0} match${(result == null ? void 0 : result.count) === 1 ? "" : "es"}` }),
+      result && !result.error && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: result.filterField ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        "Filterable as ",
+        /* @__PURE__ */ jsx("code", { className: "font-mono text-foreground", children: result.filterField })
+      ] }) : "Selects a set — not filterable unless the column declares filter.field" })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 overflow-auto rounded-md border border-border bg-muted/20 p-2 text-xs", children: result && !result.error && result.count > 0 ? /* @__PURE__ */ jsx(JsonView, { data: result.count === 1 ? result.matches[0] : result.matches, defaultOpenDepth: 1 }) : /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: (result == null ? void 0 : result.error) ? "Fix the expression to see what it selects." : "This path selects nothing in this row." }) })
+  ] });
+}
+export {
+  JSONPathPlayground
+};
+//# sourceMappingURL=JSONPathPlayground.js.map

package/dist/components/JSONPathPlayground.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"JSONPathPlayground.js","sources":["../../src/components/JSONPathPlayground.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef, useState } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon } from \"../data/Icon\";\nimport { JsonView } from \"../data/JsonView\";\nimport { Tree } from \"../data/Tree\";\nimport { UiInfo, UiWarningTriangle } from \"../icons\";\nimport { Modal } from \"../overlay/Modal\";\nimport { Button } from \"./button\";\nimport { InputField } from \"./InputField\";\nimport { createLazyJSONPathTree, type JSONPathNode } from \"./jsonPathTree\";\n\n/** What evaluating an expression against one row reports back. */\nexport interface JSONPathEvalResult {\n  matches: unknown[];\n  count: number;\n  /** Why the expression could not be evaluated — a parse error is an answer, not a failure. */\n  error?: string;\n  /** Backend field the expression addresses, when it addresses one rather than selecting a set. */\n  filterField?: string;\n}\n\nexport interface JSONPathEvalRequest {\n  jsonpath: string;\n  /** Column the path is rooted at, when it addresses a decoded JSON-encoded column. */\n  source?: string;\n  row: unknown;\n}\n\nexport interface JSONPathPlaygroundProps {\n  open: boolean;\n  onClose: () => void;\n  /** Sampled rows to browse. A row switcher appears once there is more than one. */\n  rows: unknown[];\n  /** The expression the field currently holds. */\n  value: string;\n  /** Commits the drafted expression, along with the column it must be rooted at. */\n  onCommit: (path: string, context: { root?: string }) => void;\n  /**\n   * True when `onCommit` writes the root itself. It only changes what the\n   * dialog says about a path that descends into an encoded column: that the\n   * root will be recorded, rather than instructing the author to go and record\n   * it. Consumers that drop the root leave this unset and keep the warning.\n   */\n  assignsRoot?: boolean;\n  /**\n   * The column the field's path is *already* rooted at — its saved `source`.\n   *\n   * Without it the dialog browses and evaluates from the row while the value it\n   * was opened with is written against a decoded column, so a column that works\n   * perfectly well reports no matches and an author is invited to fix it.\n   */\n  source?: string;\n  /**\n   * Evaluates the draft against the selected row. Without it the dialog is a\n   * browser only — it shows the selected node's own value instead of a match\n   * set, which is all an offline demo can honestly claim.\n   */\n  evaluate?: (request: JSONPathEvalRequest) => Promise<JSONPathEvalResult>;\n  title?: string;\n}\n\nconst EVALUATE_DEBOUNCE_MS = 250;\n\n/**\n * The full-size counterpart to the inline JSONPath dropdown.\n *\n * The dropdown is a preview and caps its walk to stay instant; this browses the\n * row with no depth limit, every array element, and every property — and pairs\n * the tree with what the expression actually selects, evaluated by the backend\n * that will run it, so an author stops finding out at query time.\n */\nexport function JSONPathPlayground({\n  open,\n  onClose,\n  rows,\n  value,\n  onCommit,\n  assignsRoot,\n  source,\n  evaluate,\n  title = \"JSONPath playground\",\n}: JSONPathPlaygroundProps) {\n  const [draft, setDraft] = useState(value);\n  const [rowIndex, setRowIndex] = useState(0);\n  const [selected, setSelected] = useState<JSONPathNode | null>(null);\n  const [result, setResult] = useState<JSONPathEvalResult | null>(null);\n  const [evaluating, setEvaluating] = useState(false);\n\n  // Reopening starts from whatever the field holds now, not from the last\n  // session's draft — the operator may have typed over it in between.\n  useEffect(() => {\n    if (open) {\n      setDraft(value);\n      setRowIndex((current) => (current < rows.length ? current : 0));\n    }\n  }, [open, value, rows.length]);\n\n  const row = rows[rowIndex];\n  // A column with a `source` has its paths written against that column decoded,\n  // not against the row, so that is what the tree has to browse — otherwise the\n  // paths it offers and the path the field holds are in two different languages.\n  const browsed = useMemo(() => decodeSource(row, source), [row, source]);\n  const tree = useMemo(\n    () => createLazyJSONPathTree(browsed, { keyPrefix: `row${rowIndex}:${source ?? \"\"}:` }),\n    [browsed, rowIndex, source],\n  );\n\n  // Reveal the branch the current expression addresses, so the dialog opens\n  // showing the value rather than a collapsed root.\n  useEffect(() => {\n    if (!open) return;\n    setSelected(tree.materializePath(draft) ?? null);\n    // Only on (re)open and row change: re-running this per keystroke would yank\n    // the tree around while the operator is typing.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [open, tree]);\n\n  // The root belongs to the selection, and hand-editing the expression keeps it:\n  // an operator who descended into an encoded column and is now tuning the path\n  // inside it still means that column. It is never silent — the banner below\n  // names it — and selecting any node outside that subtree clears it. A column\n  // that already declares a source starts there rather than at nothing.\n  const root = selected?.root ?? source;\n  // Only a root nobody has recorded yet is a warning: one the column already\n  // declares, or one this dialog is about to write, is just context.\n  const rootPending = root !== undefined && root !== source && !assignsRoot;\n\n  const latestRequest = useRef(0);\n  useEffect(() => {\n    if (!open || !evaluate) return;\n    const request = (latestRequest.current += 1);\n    setEvaluating(true);\n    const timer = setTimeout(() => {\n      const payload: JSONPathEvalRequest = { jsonpath: draft, row };\n      if (root !== undefined) payload.source = root;\n      void evaluate(payload)\n        .then((next) => {\n          if (latestRequest.current === request) setResult(next);\n        })\n        .catch((error: unknown) => {\n          if (latestRequest.current === request) {\n            setResult({ matches: [], count: 0, error: String(error) });\n          }\n        })\n        .finally(() => {\n          if (latestRequest.current === request) setEvaluating(false);\n        });\n    }, EVALUATE_DEBOUNCE_MS);\n    return () => clearTimeout(timer);\n  }, [open, evaluate, draft, row, root]);\n\n  const commit = () => {\n    onCommit(draft, root === undefined ? {} : { root });\n    onClose();\n  };\n\n  return (\n    <Modal\n      open={open}\n      onClose={onClose}\n      title={title}\n      size=\"2xl\"\n      scrollBody={false}\n      className=\"h-[80vh]\"\n      footer={(\n        <div className=\"flex items-center justify-end gap-2\">\n          <Button variant=\"outline\" onClick={onClose}>Cancel</Button>\n          <Button onClick={commit} disabled={draft.trim() === \"\"}>Use path</Button>\n        </div>\n      )}\n    >\n      <div className=\"flex h-full min-h-0 flex-col gap-3\">\n        {rows.length > 1 && (\n          <label className=\"flex shrink-0 items-center gap-2 text-xs text-muted-foreground\">\n            Sample row\n            <select\n              aria-label=\"Sample row\"\n              value={rowIndex}\n              onChange={(event) => setRowIndex(Number(event.target.value))}\n              className=\"h-7 rounded-md border border-input bg-background px-2 text-xs text-foreground\"\n            >\n              {rows.map((_, index) => (\n                <option key={index} value={index}>{index + 1} of {rows.length}</option>\n              ))}\n            </select>\n            <span>Fields absent from the first row are only visible in the one that carries them.</span>\n          </label>\n        )}\n\n        <div className=\"grid min-h-0 flex-1 gap-3 md:grid-cols-2\">\n          <div className=\"flex min-h-0 flex-col overflow-hidden rounded-md border border-border\">\n            <Tree<JSONPathNode>\n              className=\"min-h-0 flex-1\"\n              ariaLabel=\"JSON paths\"\n              roots={tree.roots}\n              getKey={(node) => node.key}\n              getChildren={tree.getChildren}\n              hasMoreChildren={tree.hasMoreChildren}\n              loadChildren={tree.loadChildren}\n              getSearchText={(node) => `${node.path} ${node.summary}`}\n              defaultOpen={(_node, depth) => depth < 2}\n              selected={selected}\n              revealSelected\n              onSelect={(node) => {\n                if (node.kind === \"more\") return;\n                setSelected(node);\n                setDraft(node.path);\n              }}\n              renderRow={({ node }) => (\n                <span className=\"flex min-w-0 flex-1 items-center gap-density-2 font-mono text-xs\">\n                  <span className={cn(\"shrink-0\", node.kind === \"more\" ? \"text-muted-foreground\" : \"text-primary\")}>\n                    {node.kind === \"more\" ? \"…\" : node.path}\n                  </span>\n                  <span className=\"truncate text-muted-foreground\" title={node.summary}>{node.summary}</span>\n                </span>\n              )}\n            />\n          </div>\n\n          <div className=\"flex min-h-0 flex-col gap-2\">\n            <InputField\n              aria-label=\"JSONPath expression\"\n              value={draft}\n              onChange={setDraft}\n              inputClassName=\"font-mono text-xs\"\n              placeholder=\"$.messages[0].payload\"\n            />\n\n            {root !== undefined && (\n              <p\n                className={cn(\n                  \"flex shrink-0 items-start gap-1.5 rounded-md border px-2 py-1.5 text-xs text-foreground\",\n                  rootPending\n                    ? \"border-amber-600/40 bg-amber-500/10\"\n                    : \"border-border bg-muted/40\",\n                )}\n              >\n                <Icon\n                  icon={rootPending ? UiWarningTriangle : UiInfo}\n                  className={cn(\"mt-0.5 shrink-0\", rootPending ? \"text-amber-600\" : \"text-muted-foreground\")}\n                />\n                <span>\n                  This path is rooted inside <code className=\"font-mono\">{root}</code>, a column holding JSON\n                  as text.{\" \"}\n                  {root === source ? (\n                    <>\n                      That is already the column's <code className=\"font-mono\">Source</code>.\n                    </>\n                  ) : assignsRoot ? (\n                    <>\n                      Applying it sets the column's <code className=\"font-mono\">Source</code> to{\" \"}\n                      <code className=\"font-mono\">{root}</code>.\n                    </>\n                  ) : (\n                    <>\n                      The column's <code className=\"font-mono\">Source</code> must be set to{\" \"}\n                      <code className=\"font-mono\">{root}</code> for it to resolve.\n                    </>\n                  )}\n                </span>\n              </p>\n            )}\n\n            <ResultPane evaluating={evaluating} result={result} selected={selected} evaluated={Boolean(evaluate)} />\n          </div>\n        </div>\n      </div>\n    </Modal>\n  );\n}\n\n/**\n * The value a `source` column's paths are written against: the column itself,\n * decoded when it carries JSON as text — which mirrors what the backend does\n * before it applies the path.\n */\nfunction decodeSource(row: unknown, source: string | undefined): unknown {\n  if (!source) return row;\n  if (row === null || typeof row !== \"object\") return undefined;\n  const value = (row as Record<string, unknown>)[source];\n  if (typeof value !== \"string\") return value;\n  try {\n    return JSON.parse(value) as unknown;\n  } catch {\n    return value;\n  }\n}\n\nfunction ResultPane({\n  evaluating,\n  result,\n  selected,\n  evaluated,\n}: {\n  evaluating: boolean;\n  result: JSONPathEvalResult | null;\n  selected: JSONPathNode | null;\n  evaluated: boolean;\n}) {\n  if (!evaluated) {\n    return (\n      <div className=\"min-h-0 flex-1 overflow-auto rounded-md border border-border bg-muted/20 p-2 text-xs\">\n        {selected ? (\n          <JsonView data={selected.value} defaultOpenDepth={1} />\n        ) : (\n          <p className=\"text-muted-foreground\">Select a node to see its value.</p>\n        )}\n      </div>\n    );\n  }\n\n  return (\n    <>\n      <div className=\"flex shrink-0 flex-wrap items-center gap-x-3 gap-y-1 text-xs\">\n        {result?.error ? (\n          <span className=\"font-mono text-destructive\">{result.error}</span>\n        ) : (\n          <span className={cn(result && result.count === 0 && \"text-muted-foreground\")}>\n            {evaluating && result === null\n              ? \"Evaluating…\"\n              : `${result?.count ?? 0} match${result?.count === 1 ? \"\" : \"es\"}`}\n          </span>\n        )}\n        {result && !result.error && (\n          <span className=\"text-muted-foreground\">\n            {result.filterField\n              ? <>Filterable as <code className=\"font-mono text-foreground\">{result.filterField}</code></>\n              : \"Selects a set — not filterable unless the column declares filter.field\"}\n          </span>\n        )}\n      </div>\n      <div className=\"min-h-0 flex-1 overflow-auto rounded-md border border-border bg-muted/20 p-2 text-xs\">\n        {result && !result.error && result.count > 0 ? (\n          <JsonView data={result.count === 1 ? result.matches[0] : result.matches} defaultOpenDepth={1} />\n        ) : (\n          <p className=\"text-muted-foreground\">\n            {result?.error ? \"Fix the expression to see what it selects.\" : \"This path selects nothing in this row.\"}\n          </p>\n        )}\n      </div>\n    </>\n  );\n}\n"],"names":[],"mappings":"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"}