@dxos/react-ui-syntax-highlighter 0.8.1 → 0.8.2-main.10c050d

package/dist/lib/node/index.cjs.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": ["import_react", "import_react_ui", "import_react_ui_theme", "alabasterDark", "hljs", "display", "overflowX", "color", "padding", "backgroundColor", "githubLight", "fontStyle", "fontWeight", "zeroWidthSpace", "SyntaxHighlighter", "classNames", "fallback", "children", "props", "themeMode", "useThemeContext", "React", "NativeSyntaxHighlighter", "className", "mx", "style", "Json", "data", "language", "JSON", "stringify", "JsonFilter", "initialData", "setData", "useState", "text", "setText", "error", "setError", "useEffect", "trim", "length", "jp", "query", "err", "div", "Input", "Root", "validationValence", "TextInput", "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,sBAAe;AACf,mBAA2C;AAE3C,sBAA4C;AAC5C,4BAAmB;ACJnB,4BAA0B;;ACD1B,IAAAA,gBAAkB;AAKlB,yBAAoC;AAEpC,kBAAkD;AAElD,IAAAC,mBAAsD;AACtD,IAAAC,yBAAmB;AAEnB,IAAMC,iBAAiB;AAQvBC,YAAAA,OAAMC,KAAKC,aAAa;AACxBC,YAAAA,SAAKF,KAAKC,aAAa;AAKhB,IAAME,oBAAoB,CAAC,EAChCC,YACAC,UACAC,WAAWR,gBACX,GAAGS,MAAAA,MACoB;;;AACvB,UAAM,EAAEC,UAAS,QAAKC,kCAAAA;AAEtB,WACE,8BAAAC,QAAA,cAACC,mBAAAA,SAAAA;MACCC,eAAWC,2BAAG,uCAAuCT,UAAAA;MACrDU,OAAON,cAAc,SAASN,YAAAA,WAAOH,YAAAA;MACpC,GAAGQ;OAGHF,YAAYC,QAAAA;;;;AAGnB;AFjCO,IAAMS,OAAO,CAAC,EAAEC,MAAMZ,YAAYa,OAAM,MAAa;;;AAC1D,WACEP,6BAAAA,QAAA,cAACP,mBAAAA;MAAkBe,UAAS;MAAOd;MAAwBe,eAAaF;OACrEG,KAAKC,UAAUL,MAAM,MAAM,CAAA,CAAA;;;;AAGlC;AAEO,IAAMM,aAAa,CAAC,EAAEN,MAAMO,aAAanB,YAAYa,OAAM,MAAa;;;AAC7E,UAAM,CAACD,MAAMQ,OAAAA,QAAWC,uBAASF,WAAAA;AACjC,UAAM,CAACG,MAAMC,OAAAA,QAAWF,uBAAS,EAAA;AACjC,UAAM,CAACG,OAAOC,QAAAA,QAAYJ,uBAAuB,IAAA;AACjDK,gCAAU,MAAA;AACR,UAAI,CAACP,eAAe,CAACG,KAAKK,KAAI,EAAGC,QAAQ;AACvCR,gBAAQD,WAAAA;MACV,OAAO;AACL,YAAI;AACFC,kBAAQS,gBAAAA,QAAGC,MAAMX,aAAaG,IAAAA,CAAAA;AAC9BG,mBAAS,IAAA;QACX,SAASM,KAAK;AACZX,kBAAQD,WAAAA;AACRM,mBAASM,GAAAA;QACX;MACF;IACF,GAAG;MAACZ;MAAaG;KAAK;AAEtB,WACEhB,6BAAAA,QAAA,cAAC0B,OAAAA;MAAIxB,WAAU;OACbF,6BAAAA,QAAA,cAAC2B,sBAAMC,MAAI;MAACC,mBAAmBX,QAAQ,UAAU;OAC/ClB,6BAAAA,QAAA,cAAC2B,sBAAMG,WAAS;MACdpC,gBAAYS,sBAAAA,IAAG,sBAAsBe,SAAS,gBAAA;MAC9Ca,SAAQ;MACRC,OAAOhB;MACPiB,UAAU,CAACC,UAAUjB,QAAQiB,MAAMC,OAAOH,KAAK;MAC/CI,aAAY;SAGhBpC,6BAAAA,QAAA,cAACP,mBAAAA;MAAkBe,UAAS;MAAOd,gBAAYS,sBAAAA,IAAG,wBAAwBT,UAAAA;MAAae,eAAaF;OACjGG,KAAKC,UAAUL,MAAM,MAAM,CAAA,CAAA,CAAA;;;;AAIpC;",
+  "names": ["import_react", "import_react_ui", "import_react_ui_theme", "zeroWidthSpace", "light", "hljs", "background", "dark", "SyntaxHighlighter", "classNames", "children", "fallback", "props", "themeMode", "useThemeContext", "React", "NativeSyntaxHighlighter", "className", "mx", "style", "Json", "data", "testId", "language", "data-testid", "JSON", "stringify", "JsonFilter", "initialData", "setData", "useState", "text", "setText", "error", "setError", "useEffect", "trim", "length", "jp", "query", "err", "div", "Input", "Root", "validationValence", "TextInput", "variant", "value", "onChange", "event", "target", "placeholder"]
 }

package/dist/lib/node/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/node/index.cjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":10051},"packages/ui/react-ui-syntax-highlighter/dist/lib/node/index.cjs":{"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/node/index.cjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":6299},"packages/ui/react-ui-syntax-highlighter/dist/lib/node/index.cjs":{"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-esm/index.mjs

@@ -1,6 +1,7 @@
 import { createRequire } from 'node:module';const require = createRequire(import.meta.url);
 
 // 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";
@@ -10,197 +11,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/node-esm/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/node-esm/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/node-esm/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":10053},"packages/ui/react-ui-syntax-highlighter/dist/lib/node-esm/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":4964}}}
+{"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/node-esm/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":6301},"packages/ui/react-ui-syntax-highlighter/dist/lib/node-esm/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":3430}}}

package/dist/types/src/JsonFilter/JsonFilter.d.ts

@@ -2,7 +2,8 @@ import React from 'react';
 import { type ThemedClassName } from '@dxos/react-ui';
 export type JsonProps = ThemedClassName<{
     data?: any;
+    testId?: string;
 }>;
-export declare const Json: ({ data, classNames }: JsonProps) => React.JSX.Element;
-export declare const JsonFilter: ({ data: initialData, classNames }: JsonProps) => React.JSX.Element;
+export declare const Json: ({ data, classNames, testId }: JsonProps) => React.JSX.Element;
+export declare const JsonFilter: ({ data: initialData, classNames, testId }: JsonProps) => React.JSX.Element;
 //# sourceMappingURL=JsonFilter.d.ts.map

package/dist/types/src/JsonFilter/JsonFilter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"JsonFilter.d.ts","sourceRoot":"","sources":["../../../../src/JsonFilter/JsonFilter.tsx"],"names":[],"mappings":"AAMA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAEnD,OAAO,EAAS,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAK7D,MAAM,MAAM,SAAS,GAAG,eAAe,CAAC;IAAE,IAAI,CAAC,EAAE,GAAG,CAAA;CAAE,CAAC,CAAC;AAExD,eAAO,MAAM,IAAI,yBAA0B,SAAS,sBAMnD,CAAC;AAEF,eAAO,MAAM,UAAU,sCAAuC,SAAS,sBAkCtE,CAAC"}
+{"version":3,"file":"JsonFilter.d.ts","sourceRoot":"","sources":["../../../../src/JsonFilter/JsonFilter.tsx"],"names":[],"mappings":"AAMA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAEnD,OAAO,EAAS,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAK7D,MAAM,MAAM,SAAS,GAAG,eAAe,CAAC;IAAE,IAAI,CAAC,EAAE,GAAG,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AAEzE,eAAO,MAAM,IAAI,GAAI,8BAA8B,SAAS,sBAM3D,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,2CAA2C,SAAS,sBAkC9E,CAAC"}

package/dist/types/src/SyntaxHighlighter/SyntaxHighlighter.d.ts

@@ -7,5 +7,5 @@ export type SyntaxHighlighterProps = ThemedClassName<NativeSyntaxHighlighterProp
 /**
  * https://github.com/react-syntax-highlighter/react-syntax-highlighter
  */
-export declare const SyntaxHighlighter: ({ classNames, fallback, children, ...props }: SyntaxHighlighterProps) => React.JSX.Element;
+export declare const SyntaxHighlighter: ({ classNames, children, fallback, ...props }: SyntaxHighlighterProps) => React.JSX.Element;
 //# sourceMappingURL=SyntaxHighlighter.d.ts.map

package/dist/types/src/SyntaxHighlighter/SyntaxHighlighter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SyntaxHighlighter.d.ts","sourceRoot":"","sources":["../../../../src/SyntaxHighlighter/SyntaxHighlighter.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,KAAK,sBAAsB,IAAI,4BAA4B,EAAE,MAAM,0BAA0B,CAAC;AAMvG,OAAO,EAAE,KAAK,eAAe,EAAmB,MAAM,gBAAgB,CAAC;AAOvE,MAAM,MAAM,sBAAsB,GAAG,eAAe,CAClD,4BAA4B,GAAG;IAC7B,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CACF,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,iBAAiB,iDAK3B,sBAAsB,sBAaxB,CAAC"}
+{"version":3,"file":"SyntaxHighlighter.d.ts","sourceRoot":"","sources":["../../../../src/SyntaxHighlighter/SyntaxHighlighter.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,KAAK,sBAAsB,IAAI,4BAA4B,EAAE,MAAM,0BAA0B,CAAC;AAQvG,OAAO,EAAE,KAAK,eAAe,EAAmB,MAAM,gBAAgB,CAAC;AAKvE,MAAM,MAAM,sBAAsB,GAAG,eAAe,CAClD,4BAA4B,GAAG;IAC7B,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CACF,CAAC;AAKF;;GAEG;AACH,eAAO,MAAM,iBAAiB,GAAI,8CAK/B,sBAAsB,sBAaxB,CAAC"}

package/dist/types/src/SyntaxHighlighter/SyntaxHighlighter.stories.d.ts

@@ -1,26 +1,10 @@
 import '@dxos-theme';
-declare const _default: {
-    title: string;
-    component: ({ classNames, fallback, children, ...props }: import("./SyntaxHighlighter").SyntaxHighlighterProps) => import("react").JSX.Element;
-    decorators: import("@storybook/react").Decorator[];
-};
-export default _default;
-export declare const Default: {
-    args: {
-        language: string;
-        className: string;
-        children: string;
-    };
-};
-export declare const Typescript: {
-    args: {
-        language: string;
-        children: string;
-    };
-};
-export declare const Empty: {
-    args: {
-        children: boolean;
-    };
-};
+import { type Meta, type StoryObj } from '@storybook/react';
+import { SyntaxHighlighter } from './SyntaxHighlighter';
+declare const meta: Meta<typeof SyntaxHighlighter>;
+export default meta;
+type Story = StoryObj<typeof SyntaxHighlighter>;
+export declare const Default: Story;
+export declare const Typescript: Story;
+export declare const Empty: Story;
 //# sourceMappingURL=SyntaxHighlighter.stories.d.ts.map

package/dist/types/src/SyntaxHighlighter/SyntaxHighlighter.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SyntaxHighlighter.stories.d.ts","sourceRoot":"","sources":["../../../../src/SyntaxHighlighter/SyntaxHighlighter.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;;;;;;AAMrB,wBAIE;AAEF,eAAO,MAAM,OAAO;;;;;;CAMnB,CAAC;AAEF,eAAO,MAAM,UAAU;;;;;CAKtB,CAAC;AAEF,eAAO,MAAM,KAAK;;;;CAIjB,CAAC"}
+{"version":3,"file":"SyntaxHighlighter.stories.d.ts","sourceRoot":"","sources":["../../../../src/SyntaxHighlighter/SyntaxHighlighter.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAErB,OAAO,EAAE,KAAK,IAAI,EAAE,KAAK,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAI5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAExD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,iBAAiB,CAIxC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAEhD,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAKxB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAInB,CAAC"}

package/dist/types/tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"version":"5.7.3"}
+{"version":"5.8.3"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-syntax-highlighter",
-  "version": "0.8.1",
+  "version": "0.8.2-main.10c050d",
   "description": "A syntax highlighter wrapper.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -24,6 +24,7 @@
     "src"
   ],
   "dependencies": {
+    "@preact-signals/safe-react": "^0.9.0",
     "jsonpath": "^1.1.1",
     "react-syntax-highlighter": "^15.5.0"
   },
@@ -35,15 +36,15 @@
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/react-ui": "0.8.1",
-    "@dxos/storybook-utils": "0.8.1",
-    "@dxos/react-ui-theme": "0.8.1"
+    "@dxos/react-ui": "0.8.2-main.10c050d",
+    "@dxos/storybook-utils": "0.8.2-main.10c050d",
+    "@dxos/react-ui-theme": "0.8.2-main.10c050d"
   },
   "peerDependencies": {
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.8.1",
-    "@dxos/react-ui-theme": "0.8.1"
+    "@dxos/react-ui": "0.8.2-main.10c050d",
+    "@dxos/react-ui-theme": "0.8.2-main.10c050d"
   },
   "publishConfig": {
     "access": "public"

package/src/JsonFilter/JsonFilter.tsx

@@ -11,17 +11,17 @@ import { mx } from '@dxos/react-ui-theme';
 
 import { SyntaxHighlighter } from '../SyntaxHighlighter';
 
-export type JsonProps = ThemedClassName<{ data?: any }>;
+export type JsonProps = ThemedClassName<{ data?: any; testId?: string }>;
 
-export const Json = ({ data, classNames }: JsonProps) => {
+export const Json = ({ data, classNames, testId }: JsonProps) => {
   return (
-    <SyntaxHighlighter language='json' classNames={classNames}>
+    <SyntaxHighlighter language='json' classNames={classNames} data-testid={testId}>
       {JSON.stringify(data, null, 2)}
     </SyntaxHighlighter>
   );
 };
 
-export const JsonFilter = ({ data: initialData, classNames }: JsonProps) => {
+export const JsonFilter = ({ data: initialData, classNames, testId }: JsonProps) => {
   const [data, setData] = useState(initialData);
   const [text, setText] = useState('');
   const [error, setError] = useState<Error | null>(null);
@@ -37,7 +37,7 @@ export const JsonFilter = ({ data: initialData, classNames }: JsonProps) => {
         setError(err as Error);
       }
     }
-  }, [initialData, text]);
+  }, [initialData, text]); // TODO(burdon): Need structural diff.
 
   return (
     <div className='flex flex-col grow overflow-hidden'>
@@ -50,7 +50,7 @@ export const JsonFilter = ({ data: initialData, classNames }: JsonProps) => {
           placeholder='JSONPath (e.g., $.graph.nodes)'
         />
       </Input.Root>
-      <SyntaxHighlighter language='json' classNames={mx('grow overflow-y-auto', classNames)}>
+      <SyntaxHighlighter language='json' classNames={mx('grow overflow-y-auto', classNames)} data-testid={testId}>
         {JSON.stringify(data, null, 2)}
       </SyntaxHighlighter>
     </div>