@dxos/react-ui-syntax-highlighter 0.8.1-main.ba2dec9 → 0.8.1-staging.31c3ee1

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.
@@ -152,7 +152,7 @@ var zeroWidthSpace = "\u200B";
152
152
  var SyntaxHighlighter = ({ classNames, fallback = zeroWidthSpace, children, ...props }) => {
153
153
  const { themeMode } = useThemeContext();
154
154
  return /* @__PURE__ */ React.createElement(NativeSyntaxHighlighter, {
155
- className: mx("w-full !p-0", classNames),
155
+ className: mx("w-full p-0", classNames),
156
156
  style: themeMode === "dark" ? alabasterDark : githubLight,
157
157
  ...props
158
158
  }, children || fallback);
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/JsonFilter/JsonFilter.tsx", "../../../src/SyntaxHighlighter/index.ts", "../../../src/SyntaxHighlighter/SyntaxHighlighter.tsx", "../../../src/SyntaxHighlighter/styles.ts"],
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';\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"],
5
- "mappings": "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",
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';\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"],
5
+ "mappings": "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",
6
6
  "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"]
7
7
  }
@@ -1 +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":4161,"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":10052},"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":597},"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":4872}}}
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}}}
@@ -179,7 +179,7 @@ var zeroWidthSpace = "\u200B";
179
179
  var SyntaxHighlighter = ({ classNames, fallback = zeroWidthSpace, children, ...props }) => {
180
180
  const { themeMode } = (0, import_react_ui2.useThemeContext)();
181
181
  return /* @__PURE__ */ import_react2.default.createElement(import_light_async.default, {
182
- className: (0, import_react_ui_theme2.mx)("w-full !p-0", classNames),
182
+ className: (0, import_react_ui_theme2.mx)("w-full p-0", classNames),
183
183
  style: themeMode === "dark" ? alabasterDark : githubLight,
184
184
  ...props
185
185
  }, children || fallback);
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/JsonFilter/JsonFilter.tsx", "../../../src/SyntaxHighlighter/index.ts", "../../../src/SyntaxHighlighter/SyntaxHighlighter.tsx", "../../../src/SyntaxHighlighter/styles.ts"],
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';\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"],
5
- "mappings": "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",
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';\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"],
5
+ "mappings": "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",
6
6
  "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"]
7
7
  }
@@ -1 +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":4161,"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":10052},"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":597},"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":4872}}}
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}}}
@@ -154,7 +154,7 @@ var zeroWidthSpace = "\u200B";
154
154
  var SyntaxHighlighter = ({ classNames, fallback = zeroWidthSpace, children, ...props }) => {
155
155
  const { themeMode } = useThemeContext();
156
156
  return /* @__PURE__ */ React.createElement(NativeSyntaxHighlighter, {
157
- className: mx("w-full !p-0", classNames),
157
+ className: mx("w-full p-0", classNames),
158
158
  style: themeMode === "dark" ? alabasterDark : githubLight,
159
159
  ...props
160
160
  }, children || fallback);
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/JsonFilter/JsonFilter.tsx", "../../../src/SyntaxHighlighter/index.ts", "../../../src/SyntaxHighlighter/SyntaxHighlighter.tsx", "../../../src/SyntaxHighlighter/styles.ts"],
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';\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"],
5
- "mappings": "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",
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';\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"],
5
+ "mappings": "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",
6
6
  "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"]
7
7
  }
@@ -1 +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":4161,"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":10054},"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":597},"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":4965}}}
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}}}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dxos/react-ui-syntax-highlighter",
3
- "version": "0.8.1-main.ba2dec9",
3
+ "version": "0.8.1-staging.31c3ee1",
4
4
  "description": "A syntax highlighter wrapper.",
5
5
  "homepage": "https://dxos.org",
6
6
  "bugs": "https://github.com/dxos/dxos/issues",
@@ -35,15 +35,15 @@
35
35
  "react": "~18.2.0",
36
36
  "react-dom": "~18.2.0",
37
37
  "vite": "5.4.7",
38
- "@dxos/react-ui": "0.8.1-main.ba2dec9",
39
- "@dxos/storybook-utils": "0.8.1-main.ba2dec9",
40
- "@dxos/react-ui-theme": "0.8.1-main.ba2dec9"
38
+ "@dxos/react-ui": "0.8.1-staging.31c3ee1",
39
+ "@dxos/storybook-utils": "0.8.1-staging.31c3ee1",
40
+ "@dxos/react-ui-theme": "0.8.1-staging.31c3ee1"
41
41
  },
42
42
  "peerDependencies": {
43
43
  "react": "~18.2.0",
44
44
  "react-dom": "~18.2.0",
45
- "@dxos/react-ui": "0.8.1-main.ba2dec9",
46
- "@dxos/react-ui-theme": "0.8.1-main.ba2dec9"
45
+ "@dxos/react-ui": "0.8.1-staging.31c3ee1",
46
+ "@dxos/react-ui-theme": "0.8.1-staging.31c3ee1"
47
47
  },
48
48
  "publishConfig": {
49
49
  "access": "public"
@@ -35,7 +35,7 @@ export const SyntaxHighlighter = ({
35
35
 
36
36
  return (
37
37
  <NativeSyntaxHighlighter
38
- className={mx('w-full !p-0', classNames)}
38
+ className={mx('w-full p-0', classNames)}
39
39
  style={themeMode === 'dark' ? alabasterDark : githubLight}
40
40
  {...props}
41
41
  >