@dxos/react-ui-syntax-highlighter 0.8.4-main.c1de068 → 0.8.4-main.fd6878d

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -11,7 +11,7 @@ import createElement from "react-syntax-highlighter/dist/esm/create-element";
11
11
  import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
12
12
  import React from "react";
13
13
  import NativeSyntaxHighlighter from "react-syntax-highlighter/dist/esm/light-async";
14
- import { github as light, a11yDark as dark } from "react-syntax-highlighter/dist/esm/styles/hljs";
14
+ import { a11yDark as dark, github as light } from "react-syntax-highlighter/dist/esm/styles/hljs";
15
15
  import { useThemeContext } from "@dxos/react-ui";
16
16
  import { mx } from "@dxos/react-ui-theme";
17
17
  var zeroWidthSpace = "\u200B";
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/Json/Json.tsx", "../../../src/SyntaxHighlighter/index.ts", "../../../src/SyntaxHighlighter/SyntaxHighlighter.tsx"],
4
- "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';\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={['w-full', 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={['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={['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 font-thin overflow-auto scrollbar-thin !text-baseText', classNames)}\n style={themeMode === 'dark' ? dark : light}\n {...props}\n >\n {/* Non-empty fallback prevents collapse. */}\n {children || fallback}\n </NativeSyntaxHighlighter>\n );\n};\n"],
5
- "mappings": ";;AAKA,OAAOA,QAAQ;AACf,OAAOC,UAASC,WAAWC,gBAAgB;AAE3C,SAASC,aAAmC;;;ACH5C,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,oEAAoER,UAAAA;MAClFS,OAAOL,cAAc,SAASN,OAAOH;MACpC,GAAGQ;OAGHF,YAAYC,QAAAA;;;;AAGnB;;;AFlCO,IAAMQ,OAAO,CAAC,EAAEC,MAAMC,YAAYC,OAAM,MAAa;;;AAC1D,WACE,gBAAAC,OAAA,cAACC,mBAAAA;MAAkBC,UAAS;MAAOJ,YAAY;QAAC;QAAUA;;MAAaK,eAAaJ;OACjFK,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,YAAY;QAAC;QAAsBc,SAAS;;MAC5Cc,SAAQ;MACRC,OAAOjB;MACPkB,UAAU,CAACC,UAAUlB,QAAQkB,MAAMC,OAAOH,KAAK;MAC/CI,aAAY;SAGhB,gBAAA/B,OAAA,cAACC,mBAAAA;MAAkBC,UAAS;MAAOJ,YAAY;QAAC;QAAwBA;;MAAaK,eAAaJ;OAC/FK,KAAKC,UAAUR,MAAM,MAAM,CAAA,CAAA,CAAA;;;;AAIpC;",
6
- "names": ["jp", "React", "useEffect", "useState", "Input", "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", "variant", "value", "onChange", "event", "target", "placeholder"]
4
+ "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';\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={['w-full', 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={['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={['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 { a11yDark as dark, github as light } 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 font-thin overflow-auto scrollbar-thin !text-baseText', classNames)}\n style={themeMode === 'dark' ? dark : light}\n {...props}\n >\n {/* Non-empty fallback prevents collapse. */}\n {children || fallback}\n </NativeSyntaxHighlighter>\n );\n};\n"],
5
+ "mappings": ";;AAKA,OAAOA,QAAQ;AACf,OAAOC,UAASC,WAAWC,gBAAgB;AAE3C,SAASC,aAAmC;;;ACH5C,OAAOC,mBAAmB;;;;ACD1B,OAAOC,WAAW;AAKlB,OAAOC,6BAA6B;AAEpC,SAASC,YAAYC,MAAMC,UAAUC,aAAa;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,oEAAoER,UAAAA;MAClFS,OAAOL,cAAc,SAASN,OAAOH;MACpC,GAAGQ;OAGHF,YAAYC,QAAAA;;;;AAGnB;;;AFlCO,IAAMQ,OAAO,CAAC,EAAEC,MAAMC,YAAYC,OAAM,MAAa;;;AAC1D,WACE,gBAAAC,OAAA,cAACC,mBAAAA;MAAkBC,UAAS;MAAOJ,YAAY;QAAC;QAAUA;;MAAaK,eAAaJ;OACjFK,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,YAAY;QAAC;QAAsBc,SAAS;;MAC5Cc,SAAQ;MACRC,OAAOjB;MACPkB,UAAU,CAACC,UAAUlB,QAAQkB,MAAMC,OAAOH,KAAK;MAC/CI,aAAY;SAGhB,gBAAA/B,OAAA,cAACC,mBAAAA;MAAkBC,UAAS;MAAOJ,YAAY;QAAC;QAAwBA;;MAAaK,eAAaJ;OAC/FK,KAAKC,UAAUR,MAAM,MAAM,CAAA,CAAA,CAAA;;;;AAIpC;",
6
+ "names": ["jp", "React", "useEffect", "useState", "Input", "createElement", "React", "NativeSyntaxHighlighter", "a11yDark", "dark", "github", "light", "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", "variant", "value", "onChange", "event", "target", "placeholder"]
7
7
  }
@@ -13,7 +13,7 @@ import createElement from "react-syntax-highlighter/dist/esm/create-element";
13
13
  import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
14
14
  import React from "react";
15
15
  import NativeSyntaxHighlighter from "react-syntax-highlighter/dist/esm/light-async";
16
- import { github as light, a11yDark as dark } from "react-syntax-highlighter/dist/esm/styles/hljs";
16
+ import { a11yDark as dark, github as light } from "react-syntax-highlighter/dist/esm/styles/hljs";
17
17
  import { useThemeContext } from "@dxos/react-ui";
18
18
  import { mx } from "@dxos/react-ui-theme";
19
19
  var zeroWidthSpace = "\u200B";
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/Json/Json.tsx", "../../../src/SyntaxHighlighter/index.ts", "../../../src/SyntaxHighlighter/SyntaxHighlighter.tsx"],
4
- "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';\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={['w-full', 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={['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={['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 font-thin overflow-auto scrollbar-thin !text-baseText', classNames)}\n style={themeMode === 'dark' ? dark : light}\n {...props}\n >\n {/* Non-empty fallback prevents collapse. */}\n {children || fallback}\n </NativeSyntaxHighlighter>\n );\n};\n"],
5
- "mappings": ";;;;AAKA,OAAOA,QAAQ;AACf,OAAOC,UAASC,WAAWC,gBAAgB;AAE3C,SAASC,aAAmC;;;ACH5C,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,oEAAoER,UAAAA;MAClFS,OAAOL,cAAc,SAASN,OAAOH;MACpC,GAAGQ;OAGHF,YAAYC,QAAAA;;;;AAGnB;;;AFlCO,IAAMQ,OAAO,CAAC,EAAEC,MAAMC,YAAYC,OAAM,MAAa;;;AAC1D,WACE,gBAAAC,OAAA,cAACC,mBAAAA;MAAkBC,UAAS;MAAOJ,YAAY;QAAC;QAAUA;;MAAaK,eAAaJ;OACjFK,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,YAAY;QAAC;QAAsBc,SAAS;;MAC5Cc,SAAQ;MACRC,OAAOjB;MACPkB,UAAU,CAACC,UAAUlB,QAAQkB,MAAMC,OAAOH,KAAK;MAC/CI,aAAY;SAGhB,gBAAA/B,OAAA,cAACC,mBAAAA;MAAkBC,UAAS;MAAOJ,YAAY;QAAC;QAAwBA;;MAAaK,eAAaJ;OAC/FK,KAAKC,UAAUR,MAAM,MAAM,CAAA,CAAA,CAAA;;;;AAIpC;",
6
- "names": ["jp", "React", "useEffect", "useState", "Input", "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", "variant", "value", "onChange", "event", "target", "placeholder"]
4
+ "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';\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={['w-full', 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={['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={['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 { a11yDark as dark, github as light } 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 font-thin overflow-auto scrollbar-thin !text-baseText', classNames)}\n style={themeMode === 'dark' ? dark : light}\n {...props}\n >\n {/* Non-empty fallback prevents collapse. */}\n {children || fallback}\n </NativeSyntaxHighlighter>\n );\n};\n"],
5
+ "mappings": ";;;;AAKA,OAAOA,QAAQ;AACf,OAAOC,UAASC,WAAWC,gBAAgB;AAE3C,SAASC,aAAmC;;;ACH5C,OAAOC,mBAAmB;;;;ACD1B,OAAOC,WAAW;AAKlB,OAAOC,6BAA6B;AAEpC,SAASC,YAAYC,MAAMC,UAAUC,aAAa;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,oEAAoER,UAAAA;MAClFS,OAAOL,cAAc,SAASN,OAAOH;MACpC,GAAGQ;OAGHF,YAAYC,QAAAA;;;;AAGnB;;;AFlCO,IAAMQ,OAAO,CAAC,EAAEC,MAAMC,YAAYC,OAAM,MAAa;;;AAC1D,WACE,gBAAAC,OAAA,cAACC,mBAAAA;MAAkBC,UAAS;MAAOJ,YAAY;QAAC;QAAUA;;MAAaK,eAAaJ;OACjFK,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,YAAY;QAAC;QAAsBc,SAAS;;MAC5Cc,SAAQ;MACRC,OAAOjB;MACPkB,UAAU,CAACC,UAAUlB,QAAQkB,MAAMC,OAAOH,KAAK;MAC/CI,aAAY;SAGhB,gBAAA/B,OAAA,cAACC,mBAAAA;MAAkBC,UAAS;MAAOJ,YAAY;QAAC;QAAwBA;;MAAaK,eAAaJ;OAC/FK,KAAKC,UAAUR,MAAM,MAAM,CAAA,CAAA,CAAA;;;;AAIpC;",
6
+ "names": ["jp", "React", "useEffect", "useState", "Input", "createElement", "React", "NativeSyntaxHighlighter", "a11yDark", "dark", "github", "light", "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", "variant", "value", "onChange", "event", "target", "placeholder"]
7
7
  }