@flanksource/clicky-ui 0.3.18 → 0.3.19

package/dist/components/JSONPathField.cjs

@@ -2,13 +2,14 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
+const Icon = require("../data/Icon.cjs");
 const IconButton = require("./IconButton.cjs");
 const InputField = require("./InputField.cjs");
+const jsonPathTree = require("./jsonPathTree.cjs");
+const JSONPathPlayground = require("./JSONPathPlayground.cjs");
 const TreePickerField = require("./TreePickerField.cjs");
 const UiListTree = require("../icons/components/UiListTree.cjs");
-const MAX_DEPTH = 12;
-const MAX_OBJECT_PROPERTIES = 100;
-const SIMPLE_PROPERTY = /^[A-Za-z_$][A-Za-z0-9_$]*$/;
+const UiFullscreen = require("../icons/components/UiFullscreen.cjs");
 function JSONPathField({
   json,
   value,
@@ -16,76 +17,96 @@ function JSONPathField({
   isSelectable,
   getPath,
   pickerLabel,
+  rows,
+  evaluate,
+  onSelectPath,
+  source,
   disabled,
   className,
   "aria-label": ariaLabel,
   ...inputProps
 }) {
-  const roots = react.useMemo(() => json === void 0 ? [] : [buildJSONPathNode(json, "$", 0)], [json]);
+  const [playgroundOpen, setPlaygroundOpen] = react.useState(false);
+  const roots = react.useMemo(() => json === void 0 ? [] : [jsonPathTree.buildJSONPathNode(json, "$", 0)], [json]);
+  const playgroundRows = react.useMemo(
+    () => rows ?? (json === void 0 ? [] : [json]),
+    [rows, json]
+  );
   const browseLabel = pickerLabel ?? `Browse ${ariaLabel ?? "JSONPath"} JSON paths`;
   const pickerDisabled = Boolean(disabled) || json === void 0;
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    TreePickerField.TreePickerField,
-    {
-      className: "w-full",
-      roots,
-      getKey: (node) => node.key,
-      getChildren: (node) => node.children,
-      getSearchText: (node) => `${node.path} ${node.summary}`,
-      defaultOpen: (_node, depth) => depth < 2,
-      ...isSelectable ? { isSelectable } : {},
-      disabled: pickerDisabled,
-      onSelect: (node) => onChange((getPath == null ? void 0 : getPath(node)) ?? 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: "shrink-0 text-primary", children: node.path }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-muted-foreground", title: node.summary, children: node.summary })
-      ] }),
-      renderTrigger: ({ open, triggerRef, toggle }) => /* @__PURE__ */ jsxRuntime.jsx(
-        InputField.InputField,
-        {
-          ...inputProps,
-          ...disabled !== void 0 ? { disabled } : {},
-          "aria-label": ariaLabel,
-          className,
-          value,
-          onChange,
-          suffix: /* @__PURE__ */ jsxRuntime.jsx(
-            IconButton.IconButton,
-            {
-              ref: triggerRef,
-              icon: UiListTree.UiListTree,
-              label: browseLabel,
-              disabled: pickerDisabled,
-              "aria-haspopup": "tree",
-              "aria-expanded": open,
-              onClick: toggle
-            }
-          )
-        }
-      )
-    }
-  );
-}
-function buildJSONPathNode(value, path, depth) {
-  const kind = Array.isArray(value) ? "array" : value !== null && typeof value === "object" ? "object" : "scalar";
-  const node = { key: path, path, value, kind, summary: summarizeJSON(value) };
-  if (kind === "scalar" || depth >= MAX_DEPTH) return node;
-  const entries = Array.isArray(value) ? value.length > 0 ? [[0, value[0]]] : [] : Object.entries(value).slice(0, MAX_OBJECT_PROPERTIES);
-  node.children = entries.map(([key, child]) => buildJSONPathNode(child, appendJSONPath(path, key), depth + 1));
-  return node;
-}
-function appendJSONPath(path, key) {
-  if (typeof key === "number") return `${path}[${key}]`;
-  return SIMPLE_PROPERTY.test(key) ? `${path}.${key}` : `${path}[${JSON.stringify(key)}]`;
-}
-function summarizeJSON(value) {
-  if (Array.isArray(value)) return `[${value.length} item${value.length === 1 ? "" : "s"}]`;
-  if (value !== null && typeof value === "object") {
-    const count = Object.keys(value).length;
-    return `{${count} ${count === 1 ? "property" : "properties"}}`;
-  }
-  if (typeof value === "string") return JSON.stringify(value.length > 80 ? `${value.slice(0, 77)}…` : value);
-  return String(value);
+  const commit = onSelectPath ?? ((path) => onChange(path));
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      TreePickerField.TreePickerField,
+      {
+        className: "w-full",
+        roots,
+        getKey: (node) => node.key,
+        getChildren: (node) => node.children,
+        getSearchText: (node) => `${node.path} ${node.summary}`,
+        defaultOpen: (_node, depth) => depth < 2,
+        ...isSelectable ? { isSelectable } : {},
+        disabled: pickerDisabled,
+        onSelect: (node) => onChange((getPath == null ? void 0 : getPath(node)) ?? node.path),
+        renderFooter: ({ close }) => /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => {
+              close();
+              setPlaygroundOpen(true);
+            },
+            className: "flex w-full items-center gap-2 px-3 py-2 text-left text-xs text-muted-foreground hover:bg-accent hover:text-accent-foreground",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiFullscreen.UiFullscreen, className: "text-xs" }),
+              "Open playground…"
+            ]
+          }
+        ),
+        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: "shrink-0 text-primary", children: node.path }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-muted-foreground", title: node.summary, children: node.summary })
+        ] }),
+        renderTrigger: ({ open, triggerRef, toggle }) => /* @__PURE__ */ jsxRuntime.jsx(
+          InputField.InputField,
+          {
+            ...inputProps,
+            ...disabled !== void 0 ? { disabled } : {},
+            "aria-label": ariaLabel,
+            className,
+            value,
+            onChange,
+            suffix: /* @__PURE__ */ jsxRuntime.jsx(
+              IconButton.IconButton,
+              {
+                ref: triggerRef,
+                icon: UiListTree.UiListTree,
+                label: browseLabel,
+                disabled: pickerDisabled,
+                "aria-haspopup": "tree",
+                "aria-expanded": open,
+                onClick: toggle
+              }
+            )
+          }
+        )
+      }
+    ),
+    playgroundOpen && /* @__PURE__ */ jsxRuntime.jsx(
+      JSONPathPlayground.JSONPathPlayground,
+      {
+        open: true,
+        onClose: () => setPlaygroundOpen(false),
+        rows: playgroundRows,
+        value,
+        onCommit: commit,
+        assignsRoot: onSelectPath !== void 0,
+        ...source ? { source } : {},
+        ...evaluate ? { evaluate } : {},
+        title: `${ariaLabel ?? "JSONPath"} playground`
+      }
+    )
+  ] });
 }
 exports.JSONPathField = JSONPathField;
 //# sourceMappingURL=JSONPathField.cjs.map

package/dist/components/JSONPathField.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"JSONPathField.cjs","sources":["../../src/components/JSONPathField.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport { UiListTree } from \"../icons\";\nimport { IconButton } from \"./IconButton\";\nimport { InputField, type InputFieldInputProps } from \"./InputField\";\nimport { TreePickerField } from \"./TreePickerField\";\n\nconst MAX_DEPTH = 12;\nconst MAX_OBJECT_PROPERTIES = 100;\nconst SIMPLE_PROPERTY = /^[A-Za-z_$][A-Za-z0-9_$]*$/;\n\nexport interface JSONPathNode {\n  key: string;\n  path: string;\n  value: unknown;\n  kind: \"array\" | \"object\" | \"scalar\";\n  summary: string;\n  children?: JSONPathNode[];\n}\n\nexport type JSONPathFieldProps = Omit<InputFieldInputProps, \"onChange\" | \"suffix\" | \"value\"> & {\n  json?: unknown;\n  value: string;\n  onChange: (path: string) => void;\n  isSelectable?: (node: JSONPathNode) => boolean;\n  getPath?: (node: JSONPathNode) => string;\n  pickerLabel?: string;\n};\n\nexport function JSONPathField({\n  json,\n  value,\n  onChange,\n  isSelectable,\n  getPath,\n  pickerLabel,\n  disabled,\n  className,\n  \"aria-label\": ariaLabel,\n  ...inputProps\n}: JSONPathFieldProps) {\n  const roots = useMemo(() => json === undefined ? [] : [buildJSONPathNode(json, \"$\", 0)], [json]);\n  const browseLabel = pickerLabel ?? `Browse ${ariaLabel ?? \"JSONPath\"} JSON paths`;\n  const pickerDisabled = Boolean(disabled) || json === undefined;\n\n  return (\n    <TreePickerField<JSONPathNode>\n      className=\"w-full\"\n      roots={roots}\n      getKey={(node) => node.key}\n      getChildren={(node) => node.children}\n      getSearchText={(node) => `${node.path} ${node.summary}`}\n      defaultOpen={(_node, depth) => depth < 2}\n      {...(isSelectable ? { isSelectable } : {})}\n      disabled={pickerDisabled}\n      onSelect={(node) => onChange(getPath?.(node) ?? node.path)}\n      renderRow={({ node }) => (\n        <span className=\"flex min-w-0 flex-1 items-center gap-density-2 font-mono text-xs\">\n          <span className=\"shrink-0 text-primary\">{node.path}</span>\n          <span className=\"truncate text-muted-foreground\" title={node.summary}>{node.summary}</span>\n        </span>\n      )}\n      renderTrigger={({ open, triggerRef, toggle }) => (\n        <InputField\n          {...inputProps}\n          {...(disabled !== undefined ? { disabled } : {})}\n          aria-label={ariaLabel}\n          className={className}\n          value={value}\n          onChange={onChange}\n          suffix={(\n            <IconButton\n              ref={triggerRef}\n              icon={UiListTree}\n              label={browseLabel}\n              disabled={pickerDisabled}\n              aria-haspopup=\"tree\"\n              aria-expanded={open}\n              onClick={toggle}\n            />\n          )}\n        />\n      )}\n    />\n  );\n}\n\nfunction buildJSONPathNode(value: unknown, path: string, depth: number): JSONPathNode {\n  const kind = Array.isArray(value) ? \"array\" : value !== null && typeof value === \"object\" ? \"object\" : \"scalar\";\n  const node: JSONPathNode = { key: path, path, value, kind, summary: summarizeJSON(value) };\n  if (kind === \"scalar\" || depth >= MAX_DEPTH) return node;\n  const entries = Array.isArray(value)\n    ? value.length > 0 ? [[0, value[0]] as const] : []\n    : Object.entries(value as Record<string, unknown>).slice(0, MAX_OBJECT_PROPERTIES);\n  node.children = entries.map(([key, child]) => buildJSONPathNode(child, appendJSONPath(path, key), depth + 1));\n  return node;\n}\n\nfunction appendJSONPath(path: string, key: string | number): string {\n  if (typeof key === \"number\") return `${path}[${key}]`;\n  return SIMPLE_PROPERTY.test(key) ? `${path}.${key}` : `${path}[${JSON.stringify(key)}]`;\n}\n\nfunction summarizeJSON(value: unknown): string {\n  if (Array.isArray(value)) return `[${value.length} item${value.length === 1 ? \"\" : \"s\"}]`;\n  if (value !== null && typeof value === \"object\") {\n    const count = Object.keys(value).length;\n    return `{${count} ${count === 1 ? \"property\" : \"properties\"}}`;\n  }\n  if (typeof value === \"string\") return JSON.stringify(value.length > 80 ? `${value.slice(0, 77)}…` : value);\n  return String(value);\n}\n"],"names":["useMemo","jsx","TreePickerField","jsxs","InputField","IconButton","UiListTree"],"mappings":";;;;;;;;AAMA,MAAM,YAAY;AAClB,MAAM,wBAAwB;AAC9B,MAAM,kBAAkB;AAoBjB,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,GAAG;AACL,GAAuB;AACrB,QAAM,QAAQA,MAAAA,QAAQ,MAAM,SAAS,SAAY,CAAA,IAAK,CAAC,kBAAkB,MAAM,KAAK,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC;AAC/F,QAAM,cAAc,eAAe,UAAU,aAAa,UAAU;AACpE,QAAM,iBAAiB,QAAQ,QAAQ,KAAK,SAAS;AAErD,SACEC,2BAAAA;AAAAA,IAACC,gBAAAA;AAAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV;AAAA,MACA,QAAQ,CAAC,SAAS,KAAK;AAAA,MACvB,aAAa,CAAC,SAAS,KAAK;AAAA,MAC5B,eAAe,CAAC,SAAS,GAAG,KAAK,IAAI,IAAI,KAAK,OAAO;AAAA,MACrD,aAAa,CAAC,OAAO,UAAU,QAAQ;AAAA,MACtC,GAAI,eAAe,EAAE,aAAA,IAAiB,CAAA;AAAA,MACvC,UAAU;AAAA,MACV,UAAU,CAAC,SAAS,UAAS,mCAAU,UAAS,KAAK,IAAI;AAAA,MACzD,WAAW,CAAC,EAAE,WACZC,2BAAAA,KAAC,QAAA,EAAK,WAAU,oEACd,UAAA;AAAA,QAAAF,2BAAAA,IAAC,QAAA,EAAK,WAAU,yBAAyB,UAAA,KAAK,MAAK;AAAA,QACnDA,2BAAAA,IAAC,UAAK,WAAU,kCAAiC,OAAO,KAAK,SAAU,eAAK,QAAA,CAAQ;AAAA,MAAA,GACtF;AAAA,MAEF,eAAe,CAAC,EAAE,MAAM,YAAY,aAClCA,2BAAAA;AAAAA,QAACG,WAAAA;AAAAA,QAAA;AAAA,UACE,GAAG;AAAA,UACH,GAAI,aAAa,SAAY,EAAE,SAAA,IAAa,CAAA;AAAA,UAC7C,cAAY;AAAA,UACZ;AAAA,UACA;AAAA,UACA;AAAA,UACA,QACEH,2BAAAA;AAAAA,YAACI,WAAAA;AAAAA,YAAA;AAAA,cACC,KAAK;AAAA,cACL,MAAMC,WAAAA;AAAAA,cACN,OAAO;AAAA,cACP,UAAU;AAAA,cACV,iBAAc;AAAA,cACd,iBAAe;AAAA,cACf,SAAS;AAAA,YAAA;AAAA,UAAA;AAAA,QACX;AAAA,MAAA;AAAA,IAEJ;AAAA,EAAA;AAIR;AAEA,SAAS,kBAAkB,OAAgB,MAAc,OAA6B;AACpF,QAAM,OAAO,MAAM,QAAQ,KAAK,IAAI,UAAU,UAAU,QAAQ,OAAO,UAAU,WAAW,WAAW;AACvG,QAAM,OAAqB,EAAE,KAAK,MAAM,MAAM,OAAO,MAAM,SAAS,cAAc,KAAK,EAAA;AACvF,MAAI,SAAS,YAAY,SAAS,UAAW,QAAO;AACpD,QAAM,UAAU,MAAM,QAAQ,KAAK,IAC/B,MAAM,SAAS,IAAI,CAAC,CAAC,GAAG,MAAM,CAAC,CAAC,CAAU,IAAI,CAAA,IAC9C,OAAO,QAAQ,KAAgC,EAAE,MAAM,GAAG,qBAAqB;AACnF,OAAK,WAAW,QAAQ,IAAI,CAAC,CAAC,KAAK,KAAK,MAAM,kBAAkB,OAAO,eAAe,MAAM,GAAG,GAAG,QAAQ,CAAC,CAAC;AAC5G,SAAO;AACT;AAEA,SAAS,eAAe,MAAc,KAA8B;AAClE,MAAI,OAAO,QAAQ,iBAAiB,GAAG,IAAI,IAAI,GAAG;AAClD,SAAO,gBAAgB,KAAK,GAAG,IAAI,GAAG,IAAI,IAAI,GAAG,KAAK,GAAG,IAAI,IAAI,KAAK,UAAU,GAAG,CAAC;AACtF;AAEA,SAAS,cAAc,OAAwB;AAC7C,MAAI,MAAM,QAAQ,KAAK,EAAG,QAAO,IAAI,MAAM,MAAM,QAAQ,MAAM,WAAW,IAAI,KAAK,GAAG;AACtF,MAAI,UAAU,QAAQ,OAAO,UAAU,UAAU;AAC/C,UAAM,QAAQ,OAAO,KAAK,KAAK,EAAE;AACjC,WAAO,IAAI,KAAK,IAAI,UAAU,IAAI,aAAa,YAAY;AAAA,EAC7D;AACA,MAAI,OAAO,UAAU,SAAU,QAAO,KAAK,UAAU,MAAM,SAAS,KAAK,GAAG,MAAM,MAAM,GAAG,EAAE,CAAC,MAAM,KAAK;AACzG,SAAO,OAAO,KAAK;AACrB;;"}
+{"version":3,"file":"JSONPathField.cjs","sources":["../../src/components/JSONPathField.tsx"],"sourcesContent":["import { useMemo, useState } from \"react\";\nimport { UiFullscreen, UiListTree } from \"../icons\";\nimport { Icon } from \"../data/Icon\";\nimport { IconButton } from \"./IconButton\";\nimport { InputField, type InputFieldInputProps } from \"./InputField\";\nimport { buildJSONPathNode, type JSONPathNode } from \"./jsonPathTree\";\nimport {\n  JSONPathPlayground,\n  type JSONPathEvalRequest,\n  type JSONPathEvalResult,\n} from \"./JSONPathPlayground\";\nimport { TreePickerField } from \"./TreePickerField\";\n\nexport type { JSONPathNode } from \"./jsonPathTree\";\n\nexport type JSONPathFieldProps = Omit<InputFieldInputProps, \"onChange\" | \"suffix\" | \"value\"> & {\n  json?: unknown;\n  value: string;\n  onChange: (path: string) => void;\n  isSelectable?: (node: JSONPathNode) => boolean;\n  getPath?: (node: JSONPathNode) => string;\n  pickerLabel?: string;\n  /**\n   * Every sampled row, for the playground's row switcher. Defaults to `json`\n   * alone — a field absent from the first row cannot be browsed otherwise.\n   */\n  rows?: unknown[];\n  /** Enables the playground's live match preview. See JSONPathPlaygroundProps. */\n  evaluate?: (request: JSONPathEvalRequest) => Promise<JSONPathEvalResult>;\n  /**\n   * Commits a picked path together with the column it must be rooted at, set\n   * when the path addresses a decoded JSON-encoded column. Consumers that own\n   * the whole column can write `source` alongside `jsonpath`; the default just\n   * calls `onChange`, leaving the pairing to whoever writes `source` by hand.\n   */\n  onSelectPath?: (path: string, context: { root?: string }) => void;\n  /**\n   * The column the current path is already rooted at — its saved `source`. The\n   * playground browses and evaluates from there, so a column that already pairs\n   * the two does not read as broken.\n   */\n  source?: string;\n};\n\nexport function JSONPathField({\n  json,\n  value,\n  onChange,\n  isSelectable,\n  getPath,\n  pickerLabel,\n  rows,\n  evaluate,\n  onSelectPath,\n  source,\n  disabled,\n  className,\n  \"aria-label\": ariaLabel,\n  ...inputProps\n}: JSONPathFieldProps) {\n  const [playgroundOpen, setPlaygroundOpen] = useState(false);\n  const roots = useMemo(() => json === undefined ? [] : [buildJSONPathNode(json, \"$\", 0)], [json]);\n  const playgroundRows = useMemo(\n    () => rows ?? (json === undefined ? [] : [json]),\n    [rows, json],\n  );\n  const browseLabel = pickerLabel ?? `Browse ${ariaLabel ?? \"JSONPath\"} JSON paths`;\n  const pickerDisabled = Boolean(disabled) || json === undefined;\n  const commit = onSelectPath ?? ((path: string) => onChange(path));\n\n  return (\n    <>\n      <TreePickerField<JSONPathNode>\n        className=\"w-full\"\n        roots={roots}\n        getKey={(node) => node.key}\n        getChildren={(node) => node.children}\n        getSearchText={(node) => `${node.path} ${node.summary}`}\n        defaultOpen={(_node, depth) => depth < 2}\n        {...(isSelectable ? { isSelectable } : {})}\n        disabled={pickerDisabled}\n        onSelect={(node) => onChange(getPath?.(node) ?? node.path)}\n        // The dropdown caps its walk to open instantly, so it can run out of\n        // room on a document this row happens to be. The playground is where\n        // that document is browsed in full.\n        renderFooter={({ close }) => (\n          <button\n            type=\"button\"\n            onClick={() => {\n              close();\n              setPlaygroundOpen(true);\n            }}\n            className=\"flex w-full items-center gap-2 px-3 py-2 text-left text-xs text-muted-foreground hover:bg-accent hover:text-accent-foreground\"\n          >\n            <Icon icon={UiFullscreen} className=\"text-xs\" />\n            Open playground…\n          </button>\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=\"shrink-0 text-primary\">{node.path}</span>\n            <span className=\"truncate text-muted-foreground\" title={node.summary}>{node.summary}</span>\n          </span>\n        )}\n        renderTrigger={({ open, triggerRef, toggle }) => (\n          <InputField\n            {...inputProps}\n            {...(disabled !== undefined ? { disabled } : {})}\n            aria-label={ariaLabel}\n            className={className}\n            value={value}\n            onChange={onChange}\n            suffix={(\n              <IconButton\n                ref={triggerRef}\n                icon={UiListTree}\n                label={browseLabel}\n                disabled={pickerDisabled}\n                aria-haspopup=\"tree\"\n                aria-expanded={open}\n                onClick={toggle}\n              />\n            )}\n          />\n        )}\n      />\n      {playgroundOpen && (\n        <JSONPathPlayground\n          open\n          onClose={() => setPlaygroundOpen(false)}\n          rows={playgroundRows}\n          value={value}\n          onCommit={commit}\n          assignsRoot={onSelectPath !== undefined}\n          {...(source ? { source } : {})}\n          {...(evaluate ? { evaluate } : {})}\n          title={`${ariaLabel ?? \"JSONPath\"} playground`}\n        />\n      )}\n    </>\n  );\n}\n"],"names":["useState","useMemo","buildJSONPathNode","jsxs","Fragment","jsx","TreePickerField","Icon","UiFullscreen","InputField","IconButton","UiListTree","JSONPathPlayground"],"mappings":"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"}

package/dist/components/JSONPathField.d.ts

@@ -1,12 +1,7 @@
 import { InputFieldInputProps } from './InputField';
-export interface JSONPathNode {
-    key: string;
-    path: string;
-    value: unknown;
-    kind: "array" | "object" | "scalar";
-    summary: string;
-    children?: JSONPathNode[];
-}
+import { JSONPathNode } from './jsonPathTree';
+import { JSONPathEvalRequest, JSONPathEvalResult } from './JSONPathPlayground';
+export type { JSONPathNode } from './jsonPathTree';
 export type JSONPathFieldProps = Omit<InputFieldInputProps, "onChange" | "suffix" | "value"> & {
     json?: unknown;
     value: string;
@@ -14,6 +9,28 @@ export type JSONPathFieldProps = Omit<InputFieldInputProps, "onChange" | "suffix
     isSelectable?: (node: JSONPathNode) => boolean;
     getPath?: (node: JSONPathNode) => string;
     pickerLabel?: string;
+    /**
+     * Every sampled row, for the playground's row switcher. Defaults to `json`
+     * alone — a field absent from the first row cannot be browsed otherwise.
+     */
+    rows?: unknown[];
+    /** Enables the playground's live match preview. See JSONPathPlaygroundProps. */
+    evaluate?: (request: JSONPathEvalRequest) => Promise<JSONPathEvalResult>;
+    /**
+     * Commits a picked path together with the column it must be rooted at, set
+     * when the path addresses a decoded JSON-encoded column. Consumers that own
+     * the whole column can write `source` alongside `jsonpath`; the default just
+     * calls `onChange`, leaving the pairing to whoever writes `source` by hand.
+     */
+    onSelectPath?: (path: string, context: {
+        root?: string;
+    }) => void;
+    /**
+     * The column the current path is already rooted at — its saved `source`. The
+     * playground browses and evaluates from there, so a column that already pairs
+     * the two does not read as broken.
+     */
+    source?: string;
 };
-export declare function JSONPathField({ json, value, onChange, isSelectable, getPath, pickerLabel, disabled, className, "aria-label": ariaLabel, ...inputProps }: JSONPathFieldProps): import("react/jsx-runtime").JSX.Element;
+export declare function JSONPathField({ json, value, onChange, isSelectable, getPath, pickerLabel, rows, evaluate, onSelectPath, source, disabled, className, "aria-label": ariaLabel, ...inputProps }: JSONPathFieldProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=JSONPathField.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"JSONPathField.d.ts","sourceRoot":"","sources":["../../src/components/JSONPathField.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAc,KAAK,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAOrE,MAAM,WAAW,YAAY;IAC3B,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,OAAO,CAAC;IACf,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,QAAQ,CAAC;IACpC,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,YAAY,EAAE,CAAC;CAC3B;AAED,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,oBAAoB,EAAE,UAAU,GAAG,QAAQ,GAAG,OAAO,CAAC,GAAG;IAC7F,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,OAAO,CAAC;IAC/C,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,MAAM,CAAC;IACzC,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,wBAAgB,aAAa,CAAC,EAC5B,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,OAAO,EACP,WAAW,EACX,QAAQ,EACR,SAAS,EACT,YAAY,EAAE,SAAS,EACvB,GAAG,UAAU,EACd,EAAE,kBAAkB,2CA6CpB"}
+{"version":3,"file":"JSONPathField.d.ts","sourceRoot":"","sources":["../../src/components/JSONPathField.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAc,KAAK,oBAAoB,EAAE,MAAM,cAAc,CAAC;AACrE,OAAO,EAAqB,KAAK,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACtE,OAAO,EAEL,KAAK,mBAAmB,EACxB,KAAK,kBAAkB,EACxB,MAAM,sBAAsB,CAAC;AAG9B,YAAY,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAEnD,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,oBAAoB,EAAE,UAAU,GAAG,QAAQ,GAAG,OAAO,CAAC,GAAG;IAC7F,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,OAAO,CAAC;IAC/C,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,MAAM,CAAC;IACzC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,EAAE,CAAC;IACjB,gFAAgF;IAChF,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,mBAAmB,KAAK,OAAO,CAAC,kBAAkB,CAAC,CAAC;IACzE;;;;;OAKG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE;QAAE,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAClE;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,wBAAgB,aAAa,CAAC,EAC5B,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,OAAO,EACP,WAAW,EACX,IAAI,EACJ,QAAQ,EACR,YAAY,EACZ,MAAM,EACN,QAAQ,EACR,SAAS,EACT,YAAY,EAAE,SAAS,EACvB,GAAG,UAAU,EACd,EAAE,kBAAkB,2CAkFpB"}

package/dist/components/JSONPathField.js

@@ -1,12 +1,13 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useMemo } from "react";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useState, useMemo } from "react";
+import { Icon } from "../data/Icon.js";
 import { IconButton } from "./IconButton.js";
 import { InputField } from "./InputField.js";
+import { buildJSONPathNode } from "./jsonPathTree.js";
+import { JSONPathPlayground } from "./JSONPathPlayground.js";
 import { TreePickerField } from "./TreePickerField.js";
 import { UiListTree } from "../icons/components/UiListTree.js";
-const MAX_DEPTH = 12;
-const MAX_OBJECT_PROPERTIES = 100;
-const SIMPLE_PROPERTY = /^[A-Za-z_$][A-Za-z0-9_$]*$/;
+import { UiFullscreen } from "../icons/components/UiFullscreen.js";
 function JSONPathField({
   json,
   value,
@@ -14,76 +15,96 @@ function JSONPathField({
   isSelectable,
   getPath,
   pickerLabel,
+  rows,
+  evaluate,
+  onSelectPath,
+  source,
   disabled,
   className,
   "aria-label": ariaLabel,
   ...inputProps
 }) {
+  const [playgroundOpen, setPlaygroundOpen] = useState(false);
   const roots = useMemo(() => json === void 0 ? [] : [buildJSONPathNode(json, "$", 0)], [json]);
+  const playgroundRows = useMemo(
+    () => rows ?? (json === void 0 ? [] : [json]),
+    [rows, json]
+  );
   const browseLabel = pickerLabel ?? `Browse ${ariaLabel ?? "JSONPath"} JSON paths`;
   const pickerDisabled = Boolean(disabled) || json === void 0;
-  return /* @__PURE__ */ jsx(
-    TreePickerField,
-    {
-      className: "w-full",
-      roots,
-      getKey: (node) => node.key,
-      getChildren: (node) => node.children,
-      getSearchText: (node) => `${node.path} ${node.summary}`,
-      defaultOpen: (_node, depth) => depth < 2,
-      ...isSelectable ? { isSelectable } : {},
-      disabled: pickerDisabled,
-      onSelect: (node) => onChange((getPath == null ? void 0 : getPath(node)) ?? 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: "shrink-0 text-primary", children: node.path }),
-        /* @__PURE__ */ jsx("span", { className: "truncate text-muted-foreground", title: node.summary, children: node.summary })
-      ] }),
-      renderTrigger: ({ open, triggerRef, toggle }) => /* @__PURE__ */ jsx(
-        InputField,
-        {
-          ...inputProps,
-          ...disabled !== void 0 ? { disabled } : {},
-          "aria-label": ariaLabel,
-          className,
-          value,
-          onChange,
-          suffix: /* @__PURE__ */ jsx(
-            IconButton,
-            {
-              ref: triggerRef,
-              icon: UiListTree,
-              label: browseLabel,
-              disabled: pickerDisabled,
-              "aria-haspopup": "tree",
-              "aria-expanded": open,
-              onClick: toggle
-            }
-          )
-        }
-      )
-    }
-  );
-}
-function buildJSONPathNode(value, path, depth) {
-  const kind = Array.isArray(value) ? "array" : value !== null && typeof value === "object" ? "object" : "scalar";
-  const node = { key: path, path, value, kind, summary: summarizeJSON(value) };
-  if (kind === "scalar" || depth >= MAX_DEPTH) return node;
-  const entries = Array.isArray(value) ? value.length > 0 ? [[0, value[0]]] : [] : Object.entries(value).slice(0, MAX_OBJECT_PROPERTIES);
-  node.children = entries.map(([key, child]) => buildJSONPathNode(child, appendJSONPath(path, key), depth + 1));
-  return node;
-}
-function appendJSONPath(path, key) {
-  if (typeof key === "number") return `${path}[${key}]`;
-  return SIMPLE_PROPERTY.test(key) ? `${path}.${key}` : `${path}[${JSON.stringify(key)}]`;
-}
-function summarizeJSON(value) {
-  if (Array.isArray(value)) return `[${value.length} item${value.length === 1 ? "" : "s"}]`;
-  if (value !== null && typeof value === "object") {
-    const count = Object.keys(value).length;
-    return `{${count} ${count === 1 ? "property" : "properties"}}`;
-  }
-  if (typeof value === "string") return JSON.stringify(value.length > 80 ? `${value.slice(0, 77)}…` : value);
-  return String(value);
+  const commit = onSelectPath ?? ((path) => onChange(path));
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      TreePickerField,
+      {
+        className: "w-full",
+        roots,
+        getKey: (node) => node.key,
+        getChildren: (node) => node.children,
+        getSearchText: (node) => `${node.path} ${node.summary}`,
+        defaultOpen: (_node, depth) => depth < 2,
+        ...isSelectable ? { isSelectable } : {},
+        disabled: pickerDisabled,
+        onSelect: (node) => onChange((getPath == null ? void 0 : getPath(node)) ?? node.path),
+        renderFooter: ({ close }) => /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => {
+              close();
+              setPlaygroundOpen(true);
+            },
+            className: "flex w-full items-center gap-2 px-3 py-2 text-left text-xs text-muted-foreground hover:bg-accent hover:text-accent-foreground",
+            children: [
+              /* @__PURE__ */ jsx(Icon, { icon: UiFullscreen, className: "text-xs" }),
+              "Open playground…"
+            ]
+          }
+        ),
+        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: "shrink-0 text-primary", children: node.path }),
+          /* @__PURE__ */ jsx("span", { className: "truncate text-muted-foreground", title: node.summary, children: node.summary })
+        ] }),
+        renderTrigger: ({ open, triggerRef, toggle }) => /* @__PURE__ */ jsx(
+          InputField,
+          {
+            ...inputProps,
+            ...disabled !== void 0 ? { disabled } : {},
+            "aria-label": ariaLabel,
+            className,
+            value,
+            onChange,
+            suffix: /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                ref: triggerRef,
+                icon: UiListTree,
+                label: browseLabel,
+                disabled: pickerDisabled,
+                "aria-haspopup": "tree",
+                "aria-expanded": open,
+                onClick: toggle
+              }
+            )
+          }
+        )
+      }
+    ),
+    playgroundOpen && /* @__PURE__ */ jsx(
+      JSONPathPlayground,
+      {
+        open: true,
+        onClose: () => setPlaygroundOpen(false),
+        rows: playgroundRows,
+        value,
+        onCommit: commit,
+        assignsRoot: onSelectPath !== void 0,
+        ...source ? { source } : {},
+        ...evaluate ? { evaluate } : {},
+        title: `${ariaLabel ?? "JSONPath"} playground`
+      }
+    )
+  ] });
 }
 export {
   JSONPathField

package/dist/components/JSONPathField.js.map

@@ -1 +1 @@
-{"version":3,"file":"JSONPathField.js","sources":["../../src/components/JSONPathField.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport { UiListTree } from \"../icons\";\nimport { IconButton } from \"./IconButton\";\nimport { InputField, type InputFieldInputProps } from \"./InputField\";\nimport { TreePickerField } from \"./TreePickerField\";\n\nconst MAX_DEPTH = 12;\nconst MAX_OBJECT_PROPERTIES = 100;\nconst SIMPLE_PROPERTY = /^[A-Za-z_$][A-Za-z0-9_$]*$/;\n\nexport interface JSONPathNode {\n  key: string;\n  path: string;\n  value: unknown;\n  kind: \"array\" | \"object\" | \"scalar\";\n  summary: string;\n  children?: JSONPathNode[];\n}\n\nexport type JSONPathFieldProps = Omit<InputFieldInputProps, \"onChange\" | \"suffix\" | \"value\"> & {\n  json?: unknown;\n  value: string;\n  onChange: (path: string) => void;\n  isSelectable?: (node: JSONPathNode) => boolean;\n  getPath?: (node: JSONPathNode) => string;\n  pickerLabel?: string;\n};\n\nexport function JSONPathField({\n  json,\n  value,\n  onChange,\n  isSelectable,\n  getPath,\n  pickerLabel,\n  disabled,\n  className,\n  \"aria-label\": ariaLabel,\n  ...inputProps\n}: JSONPathFieldProps) {\n  const roots = useMemo(() => json === undefined ? [] : [buildJSONPathNode(json, \"$\", 0)], [json]);\n  const browseLabel = pickerLabel ?? `Browse ${ariaLabel ?? \"JSONPath\"} JSON paths`;\n  const pickerDisabled = Boolean(disabled) || json === undefined;\n\n  return (\n    <TreePickerField<JSONPathNode>\n      className=\"w-full\"\n      roots={roots}\n      getKey={(node) => node.key}\n      getChildren={(node) => node.children}\n      getSearchText={(node) => `${node.path} ${node.summary}`}\n      defaultOpen={(_node, depth) => depth < 2}\n      {...(isSelectable ? { isSelectable } : {})}\n      disabled={pickerDisabled}\n      onSelect={(node) => onChange(getPath?.(node) ?? node.path)}\n      renderRow={({ node }) => (\n        <span className=\"flex min-w-0 flex-1 items-center gap-density-2 font-mono text-xs\">\n          <span className=\"shrink-0 text-primary\">{node.path}</span>\n          <span className=\"truncate text-muted-foreground\" title={node.summary}>{node.summary}</span>\n        </span>\n      )}\n      renderTrigger={({ open, triggerRef, toggle }) => (\n        <InputField\n          {...inputProps}\n          {...(disabled !== undefined ? { disabled } : {})}\n          aria-label={ariaLabel}\n          className={className}\n          value={value}\n          onChange={onChange}\n          suffix={(\n            <IconButton\n              ref={triggerRef}\n              icon={UiListTree}\n              label={browseLabel}\n              disabled={pickerDisabled}\n              aria-haspopup=\"tree\"\n              aria-expanded={open}\n              onClick={toggle}\n            />\n          )}\n        />\n      )}\n    />\n  );\n}\n\nfunction buildJSONPathNode(value: unknown, path: string, depth: number): JSONPathNode {\n  const kind = Array.isArray(value) ? \"array\" : value !== null && typeof value === \"object\" ? \"object\" : \"scalar\";\n  const node: JSONPathNode = { key: path, path, value, kind, summary: summarizeJSON(value) };\n  if (kind === \"scalar\" || depth >= MAX_DEPTH) return node;\n  const entries = Array.isArray(value)\n    ? value.length > 0 ? [[0, value[0]] as const] : []\n    : Object.entries(value as Record<string, unknown>).slice(0, MAX_OBJECT_PROPERTIES);\n  node.children = entries.map(([key, child]) => buildJSONPathNode(child, appendJSONPath(path, key), depth + 1));\n  return node;\n}\n\nfunction appendJSONPath(path: string, key: string | number): string {\n  if (typeof key === \"number\") return `${path}[${key}]`;\n  return SIMPLE_PROPERTY.test(key) ? `${path}.${key}` : `${path}[${JSON.stringify(key)}]`;\n}\n\nfunction summarizeJSON(value: unknown): string {\n  if (Array.isArray(value)) return `[${value.length} item${value.length === 1 ? \"\" : \"s\"}]`;\n  if (value !== null && typeof value === \"object\") {\n    const count = Object.keys(value).length;\n    return `{${count} ${count === 1 ? \"property\" : \"properties\"}}`;\n  }\n  if (typeof value === \"string\") return JSON.stringify(value.length > 80 ? `${value.slice(0, 77)}…` : value);\n  return String(value);\n}\n"],"names":[],"mappings":";;;;;;AAMA,MAAM,YAAY;AAClB,MAAM,wBAAwB;AAC9B,MAAM,kBAAkB;AAoBjB,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,GAAG;AACL,GAAuB;AACrB,QAAM,QAAQ,QAAQ,MAAM,SAAS,SAAY,CAAA,IAAK,CAAC,kBAAkB,MAAM,KAAK,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC;AAC/F,QAAM,cAAc,eAAe,UAAU,aAAa,UAAU;AACpE,QAAM,iBAAiB,QAAQ,QAAQ,KAAK,SAAS;AAErD,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV;AAAA,MACA,QAAQ,CAAC,SAAS,KAAK;AAAA,MACvB,aAAa,CAAC,SAAS,KAAK;AAAA,MAC5B,eAAe,CAAC,SAAS,GAAG,KAAK,IAAI,IAAI,KAAK,OAAO;AAAA,MACrD,aAAa,CAAC,OAAO,UAAU,QAAQ;AAAA,MACtC,GAAI,eAAe,EAAE,aAAA,IAAiB,CAAA;AAAA,MACvC,UAAU;AAAA,MACV,UAAU,CAAC,SAAS,UAAS,mCAAU,UAAS,KAAK,IAAI;AAAA,MACzD,WAAW,CAAC,EAAE,WACZ,qBAAC,QAAA,EAAK,WAAU,oEACd,UAAA;AAAA,QAAA,oBAAC,QAAA,EAAK,WAAU,yBAAyB,UAAA,KAAK,MAAK;AAAA,QACnD,oBAAC,UAAK,WAAU,kCAAiC,OAAO,KAAK,SAAU,eAAK,QAAA,CAAQ;AAAA,MAAA,GACtF;AAAA,MAEF,eAAe,CAAC,EAAE,MAAM,YAAY,aAClC;AAAA,QAAC;AAAA,QAAA;AAAA,UACE,GAAG;AAAA,UACH,GAAI,aAAa,SAAY,EAAE,SAAA,IAAa,CAAA;AAAA,UAC7C,cAAY;AAAA,UACZ;AAAA,UACA;AAAA,UACA;AAAA,UACA,QACE;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,KAAK;AAAA,cACL,MAAM;AAAA,cACN,OAAO;AAAA,cACP,UAAU;AAAA,cACV,iBAAc;AAAA,cACd,iBAAe;AAAA,cACf,SAAS;AAAA,YAAA;AAAA,UAAA;AAAA,QACX;AAAA,MAAA;AAAA,IAEJ;AAAA,EAAA;AAIR;AAEA,SAAS,kBAAkB,OAAgB,MAAc,OAA6B;AACpF,QAAM,OAAO,MAAM,QAAQ,KAAK,IAAI,UAAU,UAAU,QAAQ,OAAO,UAAU,WAAW,WAAW;AACvG,QAAM,OAAqB,EAAE,KAAK,MAAM,MAAM,OAAO,MAAM,SAAS,cAAc,KAAK,EAAA;AACvF,MAAI,SAAS,YAAY,SAAS,UAAW,QAAO;AACpD,QAAM,UAAU,MAAM,QAAQ,KAAK,IAC/B,MAAM,SAAS,IAAI,CAAC,CAAC,GAAG,MAAM,CAAC,CAAC,CAAU,IAAI,CAAA,IAC9C,OAAO,QAAQ,KAAgC,EAAE,MAAM,GAAG,qBAAqB;AACnF,OAAK,WAAW,QAAQ,IAAI,CAAC,CAAC,KAAK,KAAK,MAAM,kBAAkB,OAAO,eAAe,MAAM,GAAG,GAAG,QAAQ,CAAC,CAAC;AAC5G,SAAO;AACT;AAEA,SAAS,eAAe,MAAc,KAA8B;AAClE,MAAI,OAAO,QAAQ,iBAAiB,GAAG,IAAI,IAAI,GAAG;AAClD,SAAO,gBAAgB,KAAK,GAAG,IAAI,GAAG,IAAI,IAAI,GAAG,KAAK,GAAG,IAAI,IAAI,KAAK,UAAU,GAAG,CAAC;AACtF;AAEA,SAAS,cAAc,OAAwB;AAC7C,MAAI,MAAM,QAAQ,KAAK,EAAG,QAAO,IAAI,MAAM,MAAM,QAAQ,MAAM,WAAW,IAAI,KAAK,GAAG;AACtF,MAAI,UAAU,QAAQ,OAAO,UAAU,UAAU;AAC/C,UAAM,QAAQ,OAAO,KAAK,KAAK,EAAE;AACjC,WAAO,IAAI,KAAK,IAAI,UAAU,IAAI,aAAa,YAAY;AAAA,EAC7D;AACA,MAAI,OAAO,UAAU,SAAU,QAAO,KAAK,UAAU,MAAM,SAAS,KAAK,GAAG,MAAM,MAAM,GAAG,EAAE,CAAC,MAAM,KAAK;AACzG,SAAO,OAAO,KAAK;AACrB;"}
+{"version":3,"file":"JSONPathField.js","sources":["../../src/components/JSONPathField.tsx"],"sourcesContent":["import { useMemo, useState } from \"react\";\nimport { UiFullscreen, UiListTree } from \"../icons\";\nimport { Icon } from \"../data/Icon\";\nimport { IconButton } from \"./IconButton\";\nimport { InputField, type InputFieldInputProps } from \"./InputField\";\nimport { buildJSONPathNode, type JSONPathNode } from \"./jsonPathTree\";\nimport {\n  JSONPathPlayground,\n  type JSONPathEvalRequest,\n  type JSONPathEvalResult,\n} from \"./JSONPathPlayground\";\nimport { TreePickerField } from \"./TreePickerField\";\n\nexport type { JSONPathNode } from \"./jsonPathTree\";\n\nexport type JSONPathFieldProps = Omit<InputFieldInputProps, \"onChange\" | \"suffix\" | \"value\"> & {\n  json?: unknown;\n  value: string;\n  onChange: (path: string) => void;\n  isSelectable?: (node: JSONPathNode) => boolean;\n  getPath?: (node: JSONPathNode) => string;\n  pickerLabel?: string;\n  /**\n   * Every sampled row, for the playground's row switcher. Defaults to `json`\n   * alone — a field absent from the first row cannot be browsed otherwise.\n   */\n  rows?: unknown[];\n  /** Enables the playground's live match preview. See JSONPathPlaygroundProps. */\n  evaluate?: (request: JSONPathEvalRequest) => Promise<JSONPathEvalResult>;\n  /**\n   * Commits a picked path together with the column it must be rooted at, set\n   * when the path addresses a decoded JSON-encoded column. Consumers that own\n   * the whole column can write `source` alongside `jsonpath`; the default just\n   * calls `onChange`, leaving the pairing to whoever writes `source` by hand.\n   */\n  onSelectPath?: (path: string, context: { root?: string }) => void;\n  /**\n   * The column the current path is already rooted at — its saved `source`. The\n   * playground browses and evaluates from there, so a column that already pairs\n   * the two does not read as broken.\n   */\n  source?: string;\n};\n\nexport function JSONPathField({\n  json,\n  value,\n  onChange,\n  isSelectable,\n  getPath,\n  pickerLabel,\n  rows,\n  evaluate,\n  onSelectPath,\n  source,\n  disabled,\n  className,\n  \"aria-label\": ariaLabel,\n  ...inputProps\n}: JSONPathFieldProps) {\n  const [playgroundOpen, setPlaygroundOpen] = useState(false);\n  const roots = useMemo(() => json === undefined ? [] : [buildJSONPathNode(json, \"$\", 0)], [json]);\n  const playgroundRows = useMemo(\n    () => rows ?? (json === undefined ? [] : [json]),\n    [rows, json],\n  );\n  const browseLabel = pickerLabel ?? `Browse ${ariaLabel ?? \"JSONPath\"} JSON paths`;\n  const pickerDisabled = Boolean(disabled) || json === undefined;\n  const commit = onSelectPath ?? ((path: string) => onChange(path));\n\n  return (\n    <>\n      <TreePickerField<JSONPathNode>\n        className=\"w-full\"\n        roots={roots}\n        getKey={(node) => node.key}\n        getChildren={(node) => node.children}\n        getSearchText={(node) => `${node.path} ${node.summary}`}\n        defaultOpen={(_node, depth) => depth < 2}\n        {...(isSelectable ? { isSelectable } : {})}\n        disabled={pickerDisabled}\n        onSelect={(node) => onChange(getPath?.(node) ?? node.path)}\n        // The dropdown caps its walk to open instantly, so it can run out of\n        // room on a document this row happens to be. The playground is where\n        // that document is browsed in full.\n        renderFooter={({ close }) => (\n          <button\n            type=\"button\"\n            onClick={() => {\n              close();\n              setPlaygroundOpen(true);\n            }}\n            className=\"flex w-full items-center gap-2 px-3 py-2 text-left text-xs text-muted-foreground hover:bg-accent hover:text-accent-foreground\"\n          >\n            <Icon icon={UiFullscreen} className=\"text-xs\" />\n            Open playground…\n          </button>\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=\"shrink-0 text-primary\">{node.path}</span>\n            <span className=\"truncate text-muted-foreground\" title={node.summary}>{node.summary}</span>\n          </span>\n        )}\n        renderTrigger={({ open, triggerRef, toggle }) => (\n          <InputField\n            {...inputProps}\n            {...(disabled !== undefined ? { disabled } : {})}\n            aria-label={ariaLabel}\n            className={className}\n            value={value}\n            onChange={onChange}\n            suffix={(\n              <IconButton\n                ref={triggerRef}\n                icon={UiListTree}\n                label={browseLabel}\n                disabled={pickerDisabled}\n                aria-haspopup=\"tree\"\n                aria-expanded={open}\n                onClick={toggle}\n              />\n            )}\n          />\n        )}\n      />\n      {playgroundOpen && (\n        <JSONPathPlayground\n          open\n          onClose={() => setPlaygroundOpen(false)}\n          rows={playgroundRows}\n          value={value}\n          onCommit={commit}\n          assignsRoot={onSelectPath !== undefined}\n          {...(source ? { source } : {})}\n          {...(evaluate ? { evaluate } : {})}\n          title={`${ariaLabel ?? \"JSONPath\"} playground`}\n        />\n      )}\n    </>\n  );\n}\n"],"names":[],"mappings":"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"}