@dxos/react-ui-syntax-highlighter 0.8.2-staging.7ac8446 → 0.8.2

package/dist/lib/browser/index.mjs

@@ -1,4 +1,5 @@
 // packages/ui/react-ui-syntax-highlighter/src/JsonFilter/JsonFilter.tsx
+import { useSignals as _useSignals2 } from "@preact-signals/safe-react/tracking";
 import jp from "jsonpath";
 import React2, { useEffect, useState } from "react";
 import { Input } from "@dxos/react-ui";
@@ -8,197 +9,82 @@ import { mx as mx2 } from "@dxos/react-ui-theme";
 import createElement from "react-syntax-highlighter/dist/esm/create-element";
 
 // packages/ui/react-ui-syntax-highlighter/src/SyntaxHighlighter/SyntaxHighlighter.tsx
+import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
 import React from "react";
 import NativeSyntaxHighlighter from "react-syntax-highlighter/dist/esm/light-async";
+import { github as light, a11yDark as dark } from "react-syntax-highlighter/dist/esm/styles/hljs";
 import { useThemeContext } from "@dxos/react-ui";
 import { mx } from "@dxos/react-ui-theme";
-
-// packages/ui/react-ui-syntax-highlighter/src/SyntaxHighlighter/styles.ts
-var alabasterDark = {
-  hljs: {
-    display: "block",
-    overflowX: "auto",
-    color: "#CECECE",
-    padding: "0.5em"
-  },
-  "hljs-comment": {
-    color: "#DFDF8E"
-  },
-  "hljs-string": {
-    color: "#95CB82"
-  },
-  "hljs-meta-string": {
-    color: "#95CB82"
-  },
-  "hljs-regexp": {
-    color: "#95CB82"
-  },
-  "hljs-number": {
-    color: "#CC8BC9"
-  },
-  "hljs-literal": {
-    color: "#CC8BC9"
-  },
-  "hljs-title": {
-    color: "#71ADE7"
-  },
-  "hljs-deletion": {
-    backgroundColor: "#ffdddd",
-    color: "#434343"
-  },
-  "hljs-addition": {
-    backgroundColor: "#ddffdd",
-    color: "#434343"
-  }
-};
-var githubLight = {
-  hljs: {
-    display: "block",
-    overflowX: "auto",
-    color: "#545454",
-    padding: "0.5em"
-  },
-  "hljs-comment": {
-    color: "#696969"
-  },
-  "hljs-quote": {
-    color: "#696969"
-  },
-  "hljs-variable": {
-    color: "#d91e18"
-  },
-  "hljs-template-variable": {
-    color: "#d91e18"
-  },
-  "hljs-tag": {
-    color: "#d91e18"
-  },
-  "hljs-name": {
-    color: "#d91e18"
-  },
-  "hljs-selector-id": {
-    color: "#d91e18"
-  },
-  "hljs-selector-class": {
-    color: "#d91e18"
-  },
-  "hljs-regexp": {
-    color: "#d91e18"
-  },
-  "hljs-deletion": {
-    color: "#d91e18"
-  },
-  "hljs-number": {
-    color: "#aa5d00"
-  },
-  "hljs-built_in": {
-    color: "#aa5d00"
-  },
-  "hljs-builtin-name": {
-    color: "#aa5d00"
-  },
-  "hljs-literal": {
-    color: "#aa5d00"
-  },
-  "hljs-type": {
-    color: "#aa5d00"
-  },
-  "hljs-params": {
-    color: "#aa5d00"
-  },
-  "hljs-meta": {
-    color: "#aa5d00"
-  },
-  "hljs-link": {
-    color: "#aa5d00"
-  },
-  "hljs-attribute": {
-    color: "#aa5d00"
-  },
-  "hljs-string": {
-    color: "#008000"
-  },
-  "hljs-symbol": {
-    color: "#008000"
-  },
-  "hljs-bullet": {
-    color: "#008000"
-  },
-  "hljs-addition": {
-    color: "#008000"
-  },
-  "hljs-title": {
-    color: "#007faa"
-  },
-  "hljs-section": {
-    color: "#007faa"
-  },
-  "hljs-keyword": {
-    color: "#7928a1"
-  },
-  "hljs-selector-tag": {
-    color: "#7928a1"
-  },
-  "hljs-emphasis": {
-    fontStyle: "italic"
-  },
-  "hljs-strong": {
-    fontWeight: "bold"
-  }
-};
-
-// packages/ui/react-ui-syntax-highlighter/src/SyntaxHighlighter/SyntaxHighlighter.tsx
 var zeroWidthSpace = "\u200B";
-var SyntaxHighlighter = ({ classNames, fallback = zeroWidthSpace, children, ...props }) => {
-  const { themeMode } = useThemeContext();
-  return /* @__PURE__ */ React.createElement(NativeSyntaxHighlighter, {
-    className: mx("w-full p-0", classNames),
-    style: themeMode === "dark" ? alabasterDark : githubLight,
-    ...props
-  }, children || fallback);
+light.hljs.background = "";
+dark.hljs.background = "";
+var SyntaxHighlighter = ({ classNames, children, fallback = zeroWidthSpace, ...props }) => {
+  var _effect = _useSignals();
+  try {
+    const { themeMode } = useThemeContext();
+    return /* @__PURE__ */ React.createElement(NativeSyntaxHighlighter, {
+      className: mx("w-full p-0 bg-baseSurface font-thin", classNames),
+      style: themeMode === "dark" ? dark : light,
+      ...props
+    }, children || fallback);
+  } finally {
+    _effect.f();
+  }
 };
 
 // packages/ui/react-ui-syntax-highlighter/src/JsonFilter/JsonFilter.tsx
-var Json = ({ data, classNames }) => {
-  return /* @__PURE__ */ React2.createElement(SyntaxHighlighter, {
-    language: "json",
-    classNames
-  }, JSON.stringify(data, null, 2));
+var Json = ({ data, classNames, testId }) => {
+  var _effect = _useSignals2();
+  try {
+    return /* @__PURE__ */ React2.createElement(SyntaxHighlighter, {
+      language: "json",
+      classNames,
+      "data-testid": testId
+    }, JSON.stringify(data, null, 2));
+  } finally {
+    _effect.f();
+  }
 };
-var JsonFilter = ({ data: initialData, classNames }) => {
-  const [data, setData] = useState(initialData);
-  const [text, setText] = useState("");
-  const [error, setError] = useState(null);
-  useEffect(() => {
-    if (!initialData || !text.trim().length) {
-      setData(initialData);
-    } else {
-      try {
-        setData(jp.query(initialData, text));
-        setError(null);
-      } catch (err) {
+var JsonFilter = ({ data: initialData, classNames, testId }) => {
+  var _effect = _useSignals2();
+  try {
+    const [data, setData] = useState(initialData);
+    const [text, setText] = useState("");
+    const [error, setError] = useState(null);
+    useEffect(() => {
+      if (!initialData || !text.trim().length) {
         setData(initialData);
-        setError(err);
+      } else {
+        try {
+          setData(jp.query(initialData, text));
+          setError(null);
+        } catch (err) {
+          setData(initialData);
+          setError(err);
+        }
       }
-    }
-  }, [
-    initialData,
-    text
-  ]);
-  return /* @__PURE__ */ React2.createElement("div", {
-    className: "flex flex-col grow overflow-hidden"
-  }, /* @__PURE__ */ React2.createElement(Input.Root, {
-    validationValence: error ? "error" : "success"
-  }, /* @__PURE__ */ React2.createElement(Input.TextInput, {
-    classNames: mx2("p-1 px-2 font-mono", error && "border-red-500"),
-    variant: "subdued",
-    value: text,
-    onChange: (event) => setText(event.target.value),
-    placeholder: "JSONPath (e.g., $.graph.nodes)"
-  })), /* @__PURE__ */ React2.createElement(SyntaxHighlighter, {
-    language: "json",
-    classNames: mx2("grow overflow-y-auto", classNames)
-  }, JSON.stringify(data, null, 2)));
+    }, [
+      initialData,
+      text
+    ]);
+    return /* @__PURE__ */ React2.createElement("div", {
+      className: "flex flex-col grow overflow-hidden"
+    }, /* @__PURE__ */ React2.createElement(Input.Root, {
+      validationValence: error ? "error" : "success"
+    }, /* @__PURE__ */ React2.createElement(Input.TextInput, {
+      classNames: mx2("p-1 px-2 font-mono", error && "border-red-500"),
+      variant: "subdued",
+      value: text,
+      onChange: (event) => setText(event.target.value),
+      placeholder: "JSONPath (e.g., $.graph.nodes)"
+    })), /* @__PURE__ */ React2.createElement(SyntaxHighlighter, {
+      language: "json",
+      classNames: mx2("grow overflow-y-auto", classNames),
+      "data-testid": testId
+    }, JSON.stringify(data, null, 2)));
+  } finally {
+    _effect.f();
+  }
 };
 export {
   Json,

package/dist/lib/browser/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../src/JsonFilter/JsonFilter.tsx", "../../../src/SyntaxHighlighter/index.ts", "../../../src/SyntaxHighlighter/SyntaxHighlighter.tsx", "../../../src/SyntaxHighlighter/styles.ts"],
-  "sourcesContent": ["//\n// Copyright 2025 DXOS.org\n//\n\n// TODO(burdon): Move to jsonpath-plus.\nimport jp from 'jsonpath';\nimport React, { useEffect, useState } from 'react';\n\nimport { Input, type ThemedClassName } from '@dxos/react-ui';\nimport { mx } from '@dxos/react-ui-theme';\n\nimport { SyntaxHighlighter } from '../SyntaxHighlighter';\n\nexport type JsonProps = ThemedClassName<{ data?: any }>;\n\nexport const Json = ({ data, classNames }: JsonProps) => {\n  return (\n    <SyntaxHighlighter language='json' classNames={classNames}>\n      {JSON.stringify(data, null, 2)}\n    </SyntaxHighlighter>\n  );\n};\n\nexport const JsonFilter = ({ data: initialData, classNames }: JsonProps) => {\n  const [data, setData] = useState(initialData);\n  const [text, setText] = useState('');\n  const [error, setError] = useState<Error | null>(null);\n  useEffect(() => {\n    if (!initialData || !text.trim().length) {\n      setData(initialData);\n    } else {\n      try {\n        setData(jp.query(initialData, text));\n        setError(null);\n      } catch (err) {\n        setData(initialData);\n        setError(err as Error);\n      }\n    }\n  }, [initialData, text]);\n\n  return (\n    <div className='flex flex-col grow overflow-hidden'>\n      <Input.Root validationValence={error ? 'error' : 'success'}>\n        <Input.TextInput\n          classNames={mx('p-1 px-2 font-mono', error && 'border-red-500')}\n          variant='subdued'\n          value={text}\n          onChange={(event) => setText(event.target.value)}\n          placeholder='JSONPath (e.g., $.graph.nodes)'\n        />\n      </Input.Root>\n      <SyntaxHighlighter language='json' classNames={mx('grow overflow-y-auto', classNames)}>\n        {JSON.stringify(data, null, 2)}\n      </SyntaxHighlighter>\n    </div>\n  );\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\n// eslint-disable-next-line no-restricted-imports\nimport createElement from 'react-syntax-highlighter/dist/esm/create-element';\n\nexport { createElement };\n\nexport * from './SyntaxHighlighter';\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport React from 'react';\nimport { type SyntaxHighlighterProps as NativeSyntaxHighlighterProps } from 'react-syntax-highlighter';\n// Lightweight version will load specific language parsers asynchronously.\n// Using `light-async` version directly from dist to avoid any chance of the heavy one being loaded.\n// eslint-disable-next-line no-restricted-imports\nimport NativeSyntaxHighlighter from 'react-syntax-highlighter/dist/esm/light-async';\n\nimport { type ThemedClassName, useThemeContext } from '@dxos/react-ui';\nimport { mx } from '@dxos/react-ui-theme';\n\nimport { alabasterDark, githubLight } from './styles';\n\nconst zeroWidthSpace = '\\u200b';\n\nexport type SyntaxHighlighterProps = ThemedClassName<\n  NativeSyntaxHighlighterProps & {\n    fallback?: string;\n  }\n>;\n\n/**\n * https://github.com/react-syntax-highlighter/react-syntax-highlighter\n */\nexport const SyntaxHighlighter = ({\n  classNames,\n  fallback = zeroWidthSpace,\n  children,\n  ...props\n}: SyntaxHighlighterProps) => {\n  const { themeMode } = useThemeContext();\n\n  return (\n    <NativeSyntaxHighlighter\n      className={mx('w-full p-0', classNames)}\n      style={themeMode === 'dark' ? alabasterDark : githubLight}\n      {...props}\n    >\n      {/* Non-empty fallback prevents collapse. */}\n      {children || fallback}\n    </NativeSyntaxHighlighter>\n  );\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { type CSSProperties } from 'react';\n\n// https://highlightjs.org/examples\n// https://react-syntax-highlighter.github.io/react-syntax-highlighter/demo\n// https://github.com/react-syntax-highlighter/react-syntax-highlighter/blob/master/AVAILABLE_STYLES_HLJS.MD\n\n/**\n * https://github.com/findrakecil/hljs-alabaster-dark/blob/master/readme.md\n */\nexport const alabasterDark: Record<string, CSSProperties> = {\n  hljs: {\n    display: 'block',\n    overflowX: 'auto',\n    color: '#CECECE',\n    padding: '0.5em',\n  },\n  'hljs-comment': {\n    color: '#DFDF8E',\n  },\n  'hljs-string': {\n    color: '#95CB82',\n  },\n  'hljs-meta-string': {\n    color: '#95CB82',\n  },\n  'hljs-regexp': {\n    color: '#95CB82',\n  },\n  'hljs-number': {\n    color: '#CC8BC9',\n  },\n  'hljs-literal': {\n    color: '#CC8BC9',\n  },\n  'hljs-title': {\n    color: '#71ADE7',\n  },\n  'hljs-deletion': {\n    backgroundColor: '#ffdddd',\n    color: '#434343',\n  },\n  'hljs-addition': {\n    backgroundColor: '#ddffdd',\n    color: '#434343',\n  },\n};\n\n/**\n * https://github.com/highlightjs/highlight.js/blob/main/src/styles/github.css\n */\nexport const githubLight: Record<string, CSSProperties> = {\n  hljs: {\n    display: 'block',\n    overflowX: 'auto',\n    color: '#545454',\n    padding: '0.5em',\n  },\n  'hljs-comment': {\n    color: '#696969',\n  },\n  'hljs-quote': {\n    color: '#696969',\n  },\n  'hljs-variable': {\n    color: '#d91e18',\n  },\n  'hljs-template-variable': {\n    color: '#d91e18',\n  },\n  'hljs-tag': {\n    color: '#d91e18',\n  },\n  'hljs-name': {\n    color: '#d91e18',\n  },\n  'hljs-selector-id': {\n    color: '#d91e18',\n  },\n  'hljs-selector-class': {\n    color: '#d91e18',\n  },\n  'hljs-regexp': {\n    color: '#d91e18',\n  },\n  'hljs-deletion': {\n    color: '#d91e18',\n  },\n  'hljs-number': {\n    color: '#aa5d00',\n  },\n  'hljs-built_in': {\n    color: '#aa5d00',\n  },\n  'hljs-builtin-name': {\n    color: '#aa5d00',\n  },\n  'hljs-literal': {\n    color: '#aa5d00',\n  },\n  'hljs-type': {\n    color: '#aa5d00',\n  },\n  'hljs-params': {\n    color: '#aa5d00',\n  },\n  'hljs-meta': {\n    color: '#aa5d00',\n  },\n  'hljs-link': {\n    color: '#aa5d00',\n  },\n  'hljs-attribute': {\n    color: '#aa5d00',\n  },\n  'hljs-string': {\n    color: '#008000',\n  },\n  'hljs-symbol': {\n    color: '#008000',\n  },\n  'hljs-bullet': {\n    color: '#008000',\n  },\n  'hljs-addition': {\n    color: '#008000',\n  },\n  'hljs-title': {\n    color: '#007faa',\n  },\n  'hljs-section': {\n    color: '#007faa',\n  },\n  'hljs-keyword': {\n    color: '#7928a1',\n  },\n  'hljs-selector-tag': {\n    color: '#7928a1',\n  },\n  'hljs-emphasis': {\n    fontStyle: 'italic',\n  },\n  'hljs-strong': {\n    fontWeight: 'bold',\n  },\n};\n"],
-  "mappings": "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",
-  "names": ["jp", "React", "useEffect", "useState", "Input", "mx", "createElement", "React", "NativeSyntaxHighlighter", "useThemeContext", "mx", "alabasterDark", "hljs", "display", "overflowX", "color", "padding", "backgroundColor", "githubLight", "fontStyle", "fontWeight", "zeroWidthSpace", "SyntaxHighlighter", "classNames", "fallback", "children", "props", "themeMode", "useThemeContext", "NativeSyntaxHighlighter", "className", "mx", "style", "alabasterDark", "githubLight", "Json", "data", "classNames", "React", "SyntaxHighlighter", "language", "JSON", "stringify", "JsonFilter", "initialData", "setData", "useState", "text", "setText", "error", "setError", "useEffect", "trim", "length", "jp", "query", "err", "div", "className", "Input", "Root", "validationValence", "TextInput", "mx", "variant", "value", "onChange", "event", "target", "placeholder"]
+  "sources": ["../../../src/JsonFilter/JsonFilter.tsx", "../../../src/SyntaxHighlighter/index.ts", "../../../src/SyntaxHighlighter/SyntaxHighlighter.tsx"],
+  "sourcesContent": ["//\n// Copyright 2025 DXOS.org\n//\n\n// TODO(burdon): Move to jsonpath-plus.\nimport jp from 'jsonpath';\nimport React, { useEffect, useState } from 'react';\n\nimport { Input, type ThemedClassName } from '@dxos/react-ui';\nimport { mx } from '@dxos/react-ui-theme';\n\nimport { SyntaxHighlighter } from '../SyntaxHighlighter';\n\nexport type JsonProps = ThemedClassName<{ data?: any; testId?: string }>;\n\nexport const Json = ({ data, classNames, testId }: JsonProps) => {\n  return (\n    <SyntaxHighlighter language='json' classNames={classNames} data-testid={testId}>\n      {JSON.stringify(data, null, 2)}\n    </SyntaxHighlighter>\n  );\n};\n\nexport const JsonFilter = ({ data: initialData, classNames, testId }: JsonProps) => {\n  const [data, setData] = useState(initialData);\n  const [text, setText] = useState('');\n  const [error, setError] = useState<Error | null>(null);\n  useEffect(() => {\n    if (!initialData || !text.trim().length) {\n      setData(initialData);\n    } else {\n      try {\n        setData(jp.query(initialData, text));\n        setError(null);\n      } catch (err) {\n        setData(initialData);\n        setError(err as Error);\n      }\n    }\n  }, [initialData, text]); // TODO(burdon): Need structural diff.\n\n  return (\n    <div className='flex flex-col grow overflow-hidden'>\n      <Input.Root validationValence={error ? 'error' : 'success'}>\n        <Input.TextInput\n          classNames={mx('p-1 px-2 font-mono', error && 'border-red-500')}\n          variant='subdued'\n          value={text}\n          onChange={(event) => setText(event.target.value)}\n          placeholder='JSONPath (e.g., $.graph.nodes)'\n        />\n      </Input.Root>\n      <SyntaxHighlighter language='json' classNames={mx('grow overflow-y-auto', classNames)} data-testid={testId}>\n        {JSON.stringify(data, null, 2)}\n      </SyntaxHighlighter>\n    </div>\n  );\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\n// eslint-disable-next-line no-restricted-imports\nimport createElement from 'react-syntax-highlighter/dist/esm/create-element';\n\nexport { createElement };\n\nexport * from './SyntaxHighlighter';\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport React from 'react';\nimport { type SyntaxHighlighterProps as NativeSyntaxHighlighterProps } from 'react-syntax-highlighter';\n// Using `light-async` version directly from dist to avoid any chance of the heavy one being loaded.\n// Lightweight version will load specific language parsers asynchronously.\n// eslint-disable-next-line no-restricted-imports\nimport NativeSyntaxHighlighter from 'react-syntax-highlighter/dist/esm/light-async';\n// eslint-disable-next-line no-restricted-imports\nimport { github as light, a11yDark as dark } from 'react-syntax-highlighter/dist/esm/styles/hljs';\n\nimport { type ThemedClassName, useThemeContext } from '@dxos/react-ui';\nimport { mx } from '@dxos/react-ui-theme';\n\nconst zeroWidthSpace = '\\u200b';\n\nexport type SyntaxHighlighterProps = ThemedClassName<\n  NativeSyntaxHighlighterProps & {\n    fallback?: string;\n  }\n>;\n\nlight.hljs.background = '';\ndark.hljs.background = '';\n\n/**\n * https://github.com/react-syntax-highlighter/react-syntax-highlighter\n */\nexport const SyntaxHighlighter = ({\n  classNames,\n  children,\n  fallback = zeroWidthSpace,\n  ...props\n}: SyntaxHighlighterProps) => {\n  const { themeMode } = useThemeContext();\n\n  return (\n    <NativeSyntaxHighlighter\n      className={mx('w-full p-0 bg-baseSurface font-thin', classNames)}\n      style={themeMode === 'dark' ? dark : light}\n      {...props}\n    >\n      {/* Non-empty fallback prevents collapse. */}\n      {children || fallback}\n    </NativeSyntaxHighlighter>\n  );\n};\n"],
+  "mappings": ";;AAKA,OAAOA,QAAQ;AACf,OAAOC,UAASC,WAAWC,gBAAgB;AAE3C,SAASC,aAAmC;AAC5C,SAASC,MAAAA,WAAU;;;ACJnB,OAAOC,mBAAmB;;;;ACD1B,OAAOC,WAAW;AAKlB,OAAOC,6BAA6B;AAEpC,SAASC,UAAUC,OAAOC,YAAYC,YAAY;AAElD,SAA+BC,uBAAuB;AACtD,SAASC,UAAU;AAEnB,IAAMC,iBAAiB;AAQvBC,MAAMC,KAAKC,aAAa;AACxBC,KAAKF,KAAKC,aAAa;AAKhB,IAAME,oBAAoB,CAAC,EAChCC,YACAC,UACAC,WAAWR,gBACX,GAAGS,MAAAA,MACoB;;;AACvB,UAAM,EAAEC,UAAS,IAAKC,gBAAAA;AAEtB,WACE,sBAAA,cAACC,yBAAAA;MACCC,WAAWC,GAAG,uCAAuCR,UAAAA;MACrDS,OAAOL,cAAc,SAASN,OAAOH;MACpC,GAAGQ;OAGHF,YAAYC,QAAAA;;;;AAGnB;;;AFjCO,IAAMQ,OAAO,CAAC,EAAEC,MAAMC,YAAYC,OAAM,MAAa;;;AAC1D,WACE,gBAAAC,OAAA,cAACC,mBAAAA;MAAkBC,UAAS;MAAOJ;MAAwBK,eAAaJ;OACrEK,KAAKC,UAAUR,MAAM,MAAM,CAAA,CAAA;;;;AAGlC;AAEO,IAAMS,aAAa,CAAC,EAAET,MAAMU,aAAaT,YAAYC,OAAM,MAAa;;;AAC7E,UAAM,CAACF,MAAMW,OAAAA,IAAWC,SAASF,WAAAA;AACjC,UAAM,CAACG,MAAMC,OAAAA,IAAWF,SAAS,EAAA;AACjC,UAAM,CAACG,OAAOC,QAAAA,IAAYJ,SAAuB,IAAA;AACjDK,cAAU,MAAA;AACR,UAAI,CAACP,eAAe,CAACG,KAAKK,KAAI,EAAGC,QAAQ;AACvCR,gBAAQD,WAAAA;MACV,OAAO;AACL,YAAI;AACFC,kBAAQS,GAAGC,MAAMX,aAAaG,IAAAA,CAAAA;AAC9BG,mBAAS,IAAA;QACX,SAASM,KAAK;AACZX,kBAAQD,WAAAA;AACRM,mBAASM,GAAAA;QACX;MACF;IACF,GAAG;MAACZ;MAAaG;KAAK;AAEtB,WACE,gBAAAV,OAAA,cAACoB,OAAAA;MAAIC,WAAU;OACb,gBAAArB,OAAA,cAACsB,MAAMC,MAAI;MAACC,mBAAmBZ,QAAQ,UAAU;OAC/C,gBAAAZ,OAAA,cAACsB,MAAMG,WAAS;MACd3B,YAAY4B,IAAG,sBAAsBd,SAAS,gBAAA;MAC9Ce,SAAQ;MACRC,OAAOlB;MACPmB,UAAU,CAACC,UAAUnB,QAAQmB,MAAMC,OAAOH,KAAK;MAC/CI,aAAY;SAGhB,gBAAAhC,OAAA,cAACC,mBAAAA;MAAkBC,UAAS;MAAOJ,YAAY4B,IAAG,wBAAwB5B,UAAAA;MAAaK,eAAaJ;OACjGK,KAAKC,UAAUR,MAAM,MAAM,CAAA,CAAA,CAAA;;;;AAIpC;",
+  "names": ["jp", "React", "useEffect", "useState", "Input", "mx", "createElement", "React", "NativeSyntaxHighlighter", "github", "light", "a11yDark", "dark", "useThemeContext", "mx", "zeroWidthSpace", "light", "hljs", "background", "dark", "SyntaxHighlighter", "classNames", "children", "fallback", "props", "themeMode", "useThemeContext", "NativeSyntaxHighlighter", "className", "mx", "style", "Json", "data", "classNames", "testId", "React", "SyntaxHighlighter", "language", "data-testid", "JSON", "stringify", "JsonFilter", "initialData", "setData", "useState", "text", "setText", "error", "setError", "useEffect", "trim", "length", "jp", "query", "err", "div", "className", "Input", "Root", "validationValence", "TextInput", "mx", "variant", "value", "onChange", "event", "target", "placeholder"]
 }

package/dist/lib/browser/meta.json

@@ -1 +1 @@
-{"inputs":{"packages/ui/react-ui-syntax-highlighter/src/SyntaxHighlighter/styles.ts":{"bytes":9093,"imports":[],"format":"esm"},"packages/ui/react-ui-syntax-highlighter/src/SyntaxHighlighter/SyntaxHighlighter.tsx":{"bytes":4160,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"react-syntax-highlighter/dist/esm/light-async","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-syntax-highlighter/src/SyntaxHighlighter/styles.ts","kind":"import-statement","original":"./styles"}],"format":"esm"},"packages/ui/react-ui-syntax-highlighter/src/SyntaxHighlighter/index.ts":{"bytes":1028,"imports":[{"path":"react-syntax-highlighter/dist/esm/create-element","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-syntax-highlighter/src/SyntaxHighlighter/SyntaxHighlighter.tsx","kind":"import-statement","original":"./SyntaxHighlighter"}],"format":"esm"},"packages/ui/react-ui-syntax-highlighter/src/JsonFilter/JsonFilter.tsx":{"bytes":6481,"imports":[{"path":"jsonpath","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-syntax-highlighter/src/SyntaxHighlighter/index.ts","kind":"import-statement","original":"../SyntaxHighlighter"}],"format":"esm"},"packages/ui/react-ui-syntax-highlighter/src/JsonFilter/index.ts":{"bytes":528,"imports":[{"path":"packages/ui/react-ui-syntax-highlighter/src/JsonFilter/JsonFilter.tsx","kind":"import-statement","original":"./JsonFilter"}],"format":"esm"},"packages/ui/react-ui-syntax-highlighter/src/index.ts":{"bytes":630,"imports":[{"path":"packages/ui/react-ui-syntax-highlighter/src/JsonFilter/index.ts","kind":"import-statement","original":"./JsonFilter"},{"path":"packages/ui/react-ui-syntax-highlighter/src/SyntaxHighlighter/index.ts","kind":"import-statement","original":"./SyntaxHighlighter"}],"format":"esm"}},"outputs":{"packages/ui/react-ui-syntax-highlighter/dist/lib/browser/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":10051},"packages/ui/react-ui-syntax-highlighter/dist/lib/browser/index.mjs":{"imports":[{"path":"jsonpath","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"react-syntax-highlighter/dist/esm/create-element","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react-syntax-highlighter/dist/esm/light-async","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"exports":["Json","JsonFilter","SyntaxHighlighter","createElement"],"entryPoint":"packages/ui/react-ui-syntax-highlighter/src/index.ts","inputs":{"packages/ui/react-ui-syntax-highlighter/src/JsonFilter/JsonFilter.tsx":{"bytesInOutput":1536},"packages/ui/react-ui-syntax-highlighter/src/SyntaxHighlighter/index.ts":{"bytesInOutput":78},"packages/ui/react-ui-syntax-highlighter/src/SyntaxHighlighter/SyntaxHighlighter.tsx":{"bytesInOutput":596},"packages/ui/react-ui-syntax-highlighter/src/SyntaxHighlighter/styles.ts":{"bytesInOutput":2081},"packages/ui/react-ui-syntax-highlighter/src/JsonFilter/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-syntax-highlighter/src/index.ts":{"bytesInOutput":0}},"bytes":4871}}}
+{"inputs":{"packages/ui/react-ui-syntax-highlighter/src/SyntaxHighlighter/SyntaxHighlighter.tsx":{"bytes":4837,"imports":[{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react-syntax-highlighter/dist/esm/light-async","kind":"import-statement","external":true},{"path":"react-syntax-highlighter/dist/esm/styles/hljs","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-syntax-highlighter/src/SyntaxHighlighter/index.ts":{"bytes":992,"imports":[{"path":"react-syntax-highlighter/dist/esm/create-element","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-syntax-highlighter/src/SyntaxHighlighter/SyntaxHighlighter.tsx","kind":"import-statement","original":"./SyntaxHighlighter"}],"format":"esm"},"packages/ui/react-ui-syntax-highlighter/src/JsonFilter/JsonFilter.tsx":{"bytes":7197,"imports":[{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"path":"jsonpath","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-syntax-highlighter/src/SyntaxHighlighter/index.ts","kind":"import-statement","original":"../SyntaxHighlighter"}],"format":"esm"},"packages/ui/react-ui-syntax-highlighter/src/JsonFilter/index.ts":{"bytes":496,"imports":[{"path":"packages/ui/react-ui-syntax-highlighter/src/JsonFilter/JsonFilter.tsx","kind":"import-statement","original":"./JsonFilter"}],"format":"esm"},"packages/ui/react-ui-syntax-highlighter/src/index.ts":{"bytes":598,"imports":[{"path":"packages/ui/react-ui-syntax-highlighter/src/JsonFilter/index.ts","kind":"import-statement","original":"./JsonFilter"},{"path":"packages/ui/react-ui-syntax-highlighter/src/SyntaxHighlighter/index.ts","kind":"import-statement","original":"./SyntaxHighlighter"}],"format":"esm"}},"outputs":{"packages/ui/react-ui-syntax-highlighter/dist/lib/browser/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":6299},"packages/ui/react-ui-syntax-highlighter/dist/lib/browser/index.mjs":{"imports":[{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"path":"jsonpath","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"react-syntax-highlighter/dist/esm/create-element","kind":"import-statement","external":true},{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react-syntax-highlighter/dist/esm/light-async","kind":"import-statement","external":true},{"path":"react-syntax-highlighter/dist/esm/styles/hljs","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"exports":["Json","JsonFilter","SyntaxHighlighter","createElement"],"entryPoint":"packages/ui/react-ui-syntax-highlighter/src/index.ts","inputs":{"packages/ui/react-ui-syntax-highlighter/src/JsonFilter/JsonFilter.tsx":{"bytesInOutput":1916},"packages/ui/react-ui-syntax-highlighter/src/SyntaxHighlighter/index.ts":{"bytesInOutput":78},"packages/ui/react-ui-syntax-highlighter/src/SyntaxHighlighter/SyntaxHighlighter.tsx":{"bytesInOutput":927},"packages/ui/react-ui-syntax-highlighter/src/JsonFilter/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-syntax-highlighter/src/index.ts":{"bytesInOutput":0}},"bytes":3337}}}

package/dist/lib/node/index.cjs

@@ -34,196 +34,86 @@ __export(node_exports, {
   createElement: () => import_create_element.default
 });
 module.exports = __toCommonJS(node_exports);
+var import_tracking = require("@preact-signals/safe-react/tracking");
 var import_jsonpath = __toESM(require("jsonpath"));
 var import_react = __toESM(require("react"));
 var import_react_ui = require("@dxos/react-ui");
 var import_react_ui_theme = require("@dxos/react-ui-theme");
 var import_create_element = __toESM(require("react-syntax-highlighter/dist/esm/create-element"));
+var import_tracking2 = require("@preact-signals/safe-react/tracking");
 var import_react2 = __toESM(require("react"));
 var import_light_async = __toESM(require("react-syntax-highlighter/dist/esm/light-async"));
+var import_hljs = require("react-syntax-highlighter/dist/esm/styles/hljs");
 var import_react_ui2 = require("@dxos/react-ui");
 var import_react_ui_theme2 = require("@dxos/react-ui-theme");
-var alabasterDark = {
-  hljs: {
-    display: "block",
-    overflowX: "auto",
-    color: "#CECECE",
-    padding: "0.5em"
-  },
-  "hljs-comment": {
-    color: "#DFDF8E"
-  },
-  "hljs-string": {
-    color: "#95CB82"
-  },
-  "hljs-meta-string": {
-    color: "#95CB82"
-  },
-  "hljs-regexp": {
-    color: "#95CB82"
-  },
-  "hljs-number": {
-    color: "#CC8BC9"
-  },
-  "hljs-literal": {
-    color: "#CC8BC9"
-  },
-  "hljs-title": {
-    color: "#71ADE7"
-  },
-  "hljs-deletion": {
-    backgroundColor: "#ffdddd",
-    color: "#434343"
-  },
-  "hljs-addition": {
-    backgroundColor: "#ddffdd",
-    color: "#434343"
+var zeroWidthSpace = "\u200B";
+import_hljs.github.hljs.background = "";
+import_hljs.a11yDark.hljs.background = "";
+var SyntaxHighlighter = ({ classNames, children, fallback = zeroWidthSpace, ...props }) => {
+  var _effect = (0, import_tracking2.useSignals)();
+  try {
+    const { themeMode } = (0, import_react_ui2.useThemeContext)();
+    return /* @__PURE__ */ import_react2.default.createElement(import_light_async.default, {
+      className: (0, import_react_ui_theme2.mx)("w-full p-0 bg-baseSurface font-thin", classNames),
+      style: themeMode === "dark" ? import_hljs.a11yDark : import_hljs.github,
+      ...props
+    }, children || fallback);
+  } finally {
+    _effect.f();
   }
 };
-var githubLight = {
-  hljs: {
-    display: "block",
-    overflowX: "auto",
-    color: "#545454",
-    padding: "0.5em"
-  },
-  "hljs-comment": {
-    color: "#696969"
-  },
-  "hljs-quote": {
-    color: "#696969"
-  },
-  "hljs-variable": {
-    color: "#d91e18"
-  },
-  "hljs-template-variable": {
-    color: "#d91e18"
-  },
-  "hljs-tag": {
-    color: "#d91e18"
-  },
-  "hljs-name": {
-    color: "#d91e18"
-  },
-  "hljs-selector-id": {
-    color: "#d91e18"
-  },
-  "hljs-selector-class": {
-    color: "#d91e18"
-  },
-  "hljs-regexp": {
-    color: "#d91e18"
-  },
-  "hljs-deletion": {
-    color: "#d91e18"
-  },
-  "hljs-number": {
-    color: "#aa5d00"
-  },
-  "hljs-built_in": {
-    color: "#aa5d00"
-  },
-  "hljs-builtin-name": {
-    color: "#aa5d00"
-  },
-  "hljs-literal": {
-    color: "#aa5d00"
-  },
-  "hljs-type": {
-    color: "#aa5d00"
-  },
-  "hljs-params": {
-    color: "#aa5d00"
-  },
-  "hljs-meta": {
-    color: "#aa5d00"
-  },
-  "hljs-link": {
-    color: "#aa5d00"
-  },
-  "hljs-attribute": {
-    color: "#aa5d00"
-  },
-  "hljs-string": {
-    color: "#008000"
-  },
-  "hljs-symbol": {
-    color: "#008000"
-  },
-  "hljs-bullet": {
-    color: "#008000"
-  },
-  "hljs-addition": {
-    color: "#008000"
-  },
-  "hljs-title": {
-    color: "#007faa"
-  },
-  "hljs-section": {
-    color: "#007faa"
-  },
-  "hljs-keyword": {
-    color: "#7928a1"
-  },
-  "hljs-selector-tag": {
-    color: "#7928a1"
-  },
-  "hljs-emphasis": {
-    fontStyle: "italic"
-  },
-  "hljs-strong": {
-    fontWeight: "bold"
+var Json = ({ data, classNames, testId }) => {
+  var _effect = (0, import_tracking.useSignals)();
+  try {
+    return /* @__PURE__ */ import_react.default.createElement(SyntaxHighlighter, {
+      language: "json",
+      classNames,
+      "data-testid": testId
+    }, JSON.stringify(data, null, 2));
+  } finally {
+    _effect.f();
   }
 };
-var zeroWidthSpace = "\u200B";
-var SyntaxHighlighter = ({ classNames, fallback = zeroWidthSpace, children, ...props }) => {
-  const { themeMode } = (0, import_react_ui2.useThemeContext)();
-  return /* @__PURE__ */ import_react2.default.createElement(import_light_async.default, {
-    className: (0, import_react_ui_theme2.mx)("w-full p-0", classNames),
-    style: themeMode === "dark" ? alabasterDark : githubLight,
-    ...props
-  }, children || fallback);
-};
-var Json = ({ data, classNames }) => {
-  return /* @__PURE__ */ import_react.default.createElement(SyntaxHighlighter, {
-    language: "json",
-    classNames
-  }, JSON.stringify(data, null, 2));
-};
-var JsonFilter = ({ data: initialData, classNames }) => {
-  const [data, setData] = (0, import_react.useState)(initialData);
-  const [text, setText] = (0, import_react.useState)("");
-  const [error, setError] = (0, import_react.useState)(null);
-  (0, import_react.useEffect)(() => {
-    if (!initialData || !text.trim().length) {
-      setData(initialData);
-    } else {
-      try {
-        setData(import_jsonpath.default.query(initialData, text));
-        setError(null);
-      } catch (err) {
+var JsonFilter = ({ data: initialData, classNames, testId }) => {
+  var _effect = (0, import_tracking.useSignals)();
+  try {
+    const [data, setData] = (0, import_react.useState)(initialData);
+    const [text, setText] = (0, import_react.useState)("");
+    const [error, setError] = (0, import_react.useState)(null);
+    (0, import_react.useEffect)(() => {
+      if (!initialData || !text.trim().length) {
         setData(initialData);
-        setError(err);
+      } else {
+        try {
+          setData(import_jsonpath.default.query(initialData, text));
+          setError(null);
+        } catch (err) {
+          setData(initialData);
+          setError(err);
+        }
       }
-    }
-  }, [
-    initialData,
-    text
-  ]);
-  return /* @__PURE__ */ import_react.default.createElement("div", {
-    className: "flex flex-col grow overflow-hidden"
-  }, /* @__PURE__ */ import_react.default.createElement(import_react_ui.Input.Root, {
-    validationValence: error ? "error" : "success"
-  }, /* @__PURE__ */ import_react.default.createElement(import_react_ui.Input.TextInput, {
-    classNames: (0, import_react_ui_theme.mx)("p-1 px-2 font-mono", error && "border-red-500"),
-    variant: "subdued",
-    value: text,
-    onChange: (event) => setText(event.target.value),
-    placeholder: "JSONPath (e.g., $.graph.nodes)"
-  })), /* @__PURE__ */ import_react.default.createElement(SyntaxHighlighter, {
-    language: "json",
-    classNames: (0, import_react_ui_theme.mx)("grow overflow-y-auto", classNames)
-  }, JSON.stringify(data, null, 2)));
+    }, [
+      initialData,
+      text
+    ]);
+    return /* @__PURE__ */ import_react.default.createElement("div", {
+      className: "flex flex-col grow overflow-hidden"
+    }, /* @__PURE__ */ import_react.default.createElement(import_react_ui.Input.Root, {
+      validationValence: error ? "error" : "success"
+    }, /* @__PURE__ */ import_react.default.createElement(import_react_ui.Input.TextInput, {
+      classNames: (0, import_react_ui_theme.mx)("p-1 px-2 font-mono", error && "border-red-500"),
+      variant: "subdued",
+      value: text,
+      onChange: (event) => setText(event.target.value),
+      placeholder: "JSONPath (e.g., $.graph.nodes)"
+    })), /* @__PURE__ */ import_react.default.createElement(SyntaxHighlighter, {
+      language: "json",
+      classNames: (0, import_react_ui_theme.mx)("grow overflow-y-auto", classNames),
+      "data-testid": testId
+    }, JSON.stringify(data, null, 2)));
+  } finally {
+    _effect.f();
+  }
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {