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

package/dist/lib/node-esm/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/Json/Json.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';\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"],
-  "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;",
-  "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"]
+  "sourcesContent": ["//\n// Copyright 2025 DXOS.org\n//\n\nimport { JSONPath } from 'jsonpath-plus';\nimport React, {\n  createContext,\n  type PropsWithChildren,\n  forwardRef,\n  useContext,\n  useEffect,\n  useMemo,\n  useState,\n} from 'react';\n\nimport { Input } from '@dxos/react-ui';\nimport { composable, composableProps } from '@dxos/ui-theme';\nimport { type ComposableProps } from '@dxos/ui-types';\nimport { type CreateReplacerProps, createReplacer, safeStringify } from '@dxos/util';\n\nimport { SyntaxHighlighter } from '../SyntaxHighlighter';\n\n//\n// Context\n//\n\ntype JsonContextType = {\n  data: any;\n  filteredData: any;\n  filterText: string;\n  setFilterText: (text: string) => void;\n  filterError: Error | null;\n  replacer?: CreateReplacerProps;\n};\n\nconst JsonContext = createContext<JsonContextType | null>(null);\n\n/** Require Json context (throws if used outside Json.Root). */\nconst useJsonContext = (consumerName: string): JsonContextType => {\n  const context = useContext(JsonContext);\n  if (!context) {\n    throw new Error(`\\`${consumerName}\\` must be used within \\`Json.Root\\`.`);\n  }\n  return context;\n};\n\n/** Optional Json context (returns null outside Json.Root). */\nconst useOptionalJsonContext = (): JsonContextType | null => {\n  return useContext(JsonContext);\n};\n\n//\n// Root\n//\n\nconst JSON_ROOT_NAME = 'Json.Root';\n\ntype JsonRootProps = PropsWithChildren<{\n  data?: any;\n  replacer?: CreateReplacerProps;\n}>;\n\n/** Headless context provider for Json composite. */\nconst JsonRoot = forwardRef<HTMLDivElement, JsonRootProps>(({ children, data, replacer }, _forwardedRef) => {\n  const [filterText, setFilterText] = useState('');\n  const [filteredData, setFilteredData] = useState(data);\n  const [filterError, setFilterError] = useState<Error | null>(null);\n\n  useEffect(() => {\n    if (!filterText.trim().length) {\n      setFilteredData(data);\n      setFilterError(null);\n    } else {\n      try {\n        setFilteredData(JSONPath({ path: filterText, json: data }));\n        setFilterError(null);\n      } catch (err) {\n        setFilteredData(data);\n        setFilterError(err as Error);\n      }\n    }\n  }, [data, filterText]);\n\n  const context = useMemo(\n    () => ({ data, filteredData, filterText, setFilterText, filterError, replacer }),\n    [data, filteredData, filterText, setFilterText, filterError, replacer],\n  );\n\n  return <JsonContext.Provider value={context}>{children}</JsonContext.Provider>;\n});\n\nJsonRoot.displayName = JSON_ROOT_NAME;\n\n//\n// Content\n//\n\nconst JSON_CONTENT_NAME = 'Json.Content';\n\ntype JsonContentProps = ComposableProps;\n\n/** Layout container for Json composite parts. */\nconst JsonContent = composable<HTMLDivElement, JsonContentProps>(({ children, ...props }, forwardedRef) => {\n  return (\n    <div {...composableProps(props, { classNames: 'flex flex-col h-full min-h-0 overflow-hidden' })} ref={forwardedRef}>\n      {children}\n    </div>\n  );\n});\n\nJsonContent.displayName = JSON_CONTENT_NAME;\n\n//\n// Filter\n//\n\nconst JSON_FILTER_NAME = 'Json.Filter';\n\ntype JsonFilterProps = ComposableProps<{\n  placeholder?: string;\n}>;\n\n/** JSONPath filter input. Must be used within Json.Root. */\nconst JsonFilter = forwardRef<HTMLInputElement, JsonFilterProps>(\n  ({ classNames, placeholder = 'JSONPath (e.g., $.graph.nodes)' }, forwardedRef) => {\n    const { filterText, setFilterText, filterError } = useJsonContext(JSON_FILTER_NAME);\n\n    return (\n      <Input.Root validationValence={filterError ? 'error' : 'success'}>\n        <Input.TextInput\n          classNames={['p-1 px-2 font-mono', filterError && 'border-rose-500', classNames]}\n          variant='subdued'\n          value={filterText}\n          placeholder={placeholder}\n          onChange={(event) => setFilterText(event.target.value)}\n          ref={forwardedRef}\n        />\n      </Input.Root>\n    );\n  },\n);\n\nJsonFilter.displayName = JSON_FILTER_NAME;\n\n//\n// Data\n//\n\nconst JSON_DATA_NAME = 'Json.Data';\n\ntype JsonDataProps = ComposableProps<{\n  data?: any;\n  replacer?: CreateReplacerProps;\n  testId?: string;\n}>;\n\n/** Syntax-highlighted JSON display. Works standalone or within Json.Root. */\nconst JsonData = composable<HTMLDivElement, JsonDataProps>(\n  ({ data: dataProp, replacer: replacerProp, testId, ...props }, forwardedRef) => {\n    const context = useOptionalJsonContext();\n    const data = dataProp ?? context?.filteredData;\n    const replacer = replacerProp ?? context?.replacer;\n\n    return (\n      <SyntaxHighlighter\n        {...composableProps(props, { classNames: 'flex-1 min-h-0 w-full py-1 px-2 overflow-y-auto text-sm' })}\n        language='json'\n        data-testid={testId}\n        ref={forwardedRef}\n      >\n        {safeStringify(data, replacer && createReplacer(replacer), 2)}\n      </SyntaxHighlighter>\n    );\n  },\n);\n\nJsonData.displayName = JSON_DATA_NAME;\n\n//\n// Json\n//\n\nexport const Json = {\n  Root: JsonRoot,\n  Content: JsonContent,\n  Filter: JsonFilter,\n  Data: JsonData,\n};\n\nexport type { JsonRootProps, JsonContentProps, JsonFilterProps, JsonDataProps };\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, { CSSProperties } from 'react';\nimport { type SyntaxHighlighterProps as NaturalSyntaxHighlighterProps } from 'react-syntax-highlighter';\nimport NativeSyntaxHighlighter from 'react-syntax-highlighter/dist/esm/prism-async-light';\nimport { coldarkDark as dark, coldarkCold as light } from 'react-syntax-highlighter/dist/esm/styles/prism';\n\nimport { ScrollArea, useThemeContext } from '@dxos/react-ui';\nimport { composable, composableProps } from '@dxos/ui-theme';\n\nconst zeroWidthSpace = '\\u200b';\n\nconst languages = {\n  js: 'javascript',\n  ts: 'typescript',\n};\n\nexport type SyntaxHighlighterProps = NaturalSyntaxHighlighterProps & {\n  fallback?: string;\n};\n\n/**\n * NOTE: Using `light-async` version directly from dist to avoid any chance of the heavy one being loaded.\n * The lightweight version will load specific language parsers asynchronously.\n *\n * https://github.com/react-syntax-highlighter/react-syntax-highlighter\n * https://react-syntax-highlighter.github.io/react-syntax-highlighter/demo/prism.html\n */\nexport const SyntaxHighlighter = composable<HTMLDivElement, SyntaxHighlighterProps>(\n  (\n    { children, language = 'text', fallback = zeroWidthSpace, classNames, className, style, ...nativeProps },\n    forwardedRef,\n  ) => {\n    const { themeMode } = useThemeContext();\n\n    return (\n      <ScrollArea.Root {...composableProps({ classNames, className })} thin ref={forwardedRef}>\n        <ScrollArea.Viewport>\n          {/* NOTE: The div prevents NativeSyntaxHighlighter from managing scrolling. */}\n          <div role='none'>\n            <NativeSyntaxHighlighter\n              language={languages[language as keyof typeof languages] || language}\n              style={(style as { [key: string]: CSSProperties }) ?? (themeMode === 'dark' ? dark : light)}\n              customStyle={{\n                background: 'unset',\n                border: 'none',\n                boxShadow: 'none',\n                padding: 0,\n                margin: 0,\n              }}\n              {...nativeProps}\n            >\n              {/* Non-empty fallback prevents collapse. */}\n              {children || fallback}\n            </NativeSyntaxHighlighter>\n          </div>\n        </ScrollArea.Viewport>\n      </ScrollArea.Root>\n    );\n  },\n);\n\nSyntaxHighlighter.displayName = 'SyntaxHighlighter';\n"],
+  "mappings": "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",
+  "names": ["JSONPath", "React", "createContext", "forwardRef", "useContext", "useEffect", "useMemo", "useState", "Input", "composable", "composableProps", "createReplacer", "safeStringify", "createElement", "React", "NativeSyntaxHighlighter", "coldarkDark", "dark", "coldarkCold", "light", "ScrollArea", "useThemeContext", "composable", "composableProps", "zeroWidthSpace", "languages", "js", "ts", "SyntaxHighlighter", "composable", "children", "language", "fallback", "classNames", "className", "style", "nativeProps", "forwardedRef", "themeMode", "useThemeContext", "ScrollArea", "Root", "composableProps", "thin", "ref", "Viewport", "div", "role", "NativeSyntaxHighlighter", "dark", "light", "customStyle", "background", "border", "boxShadow", "padding", "margin", "displayName", "JsonContext", "createContext", "useJsonContext", "consumerName", "context", "useContext", "Error", "useOptionalJsonContext", "JSON_ROOT_NAME", "JsonRoot", "forwardRef", "children", "data", "replacer", "_forwardedRef", "filterText", "setFilterText", "useState", "filteredData", "setFilteredData", "filterError", "setFilterError", "useEffect", "trim", "length", "JSONPath", "path", "json", "err", "useMemo", "React", "Provider", "value", "displayName", "JSON_CONTENT_NAME", "JsonContent", "composable", "props", "forwardedRef", "div", "composableProps", "classNames", "ref", "JSON_FILTER_NAME", "JsonFilter", "placeholder", "Input", "Root", "validationValence", "TextInput", "variant", "onChange", "event", "target", "JSON_DATA_NAME", "JsonData", "dataProp", "replacerProp", "testId", "SyntaxHighlighter", "language", "data-testid", "safeStringify", "createReplacer", "Json", "Content", "Filter", "Data"]
 }

package/dist/lib/node-esm/meta.json

@@ -1 +1 @@
-{"inputs":{"src/SyntaxHighlighter/SyntaxHighlighter.tsx":{"bytes":4893,"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"},"src/SyntaxHighlighter/index.ts":{"bytes":979,"imports":[{"path":"react-syntax-highlighter/dist/esm/create-element","kind":"import-statement","external":true},{"path":"src/SyntaxHighlighter/SyntaxHighlighter.tsx","kind":"import-statement","original":"./SyntaxHighlighter"}],"format":"esm"},"src/Json/Json.tsx":{"bytes":7207,"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":"src/SyntaxHighlighter/index.ts","kind":"import-statement","original":"../SyntaxHighlighter"}],"format":"esm"},"src/Json/index.ts":{"bytes":463,"imports":[{"path":"src/Json/Json.tsx","kind":"import-statement","original":"./Json"}],"format":"esm"},"src/index.ts":{"bytes":571,"imports":[{"path":"src/Json/index.ts","kind":"import-statement","original":"./Json"},{"path":"src/SyntaxHighlighter/index.ts","kind":"import-statement","original":"./SyntaxHighlighter"}],"format":"esm"}},"outputs":{"dist/lib/node-esm/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":6246},"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":"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":"src/index.ts","inputs":{"src/Json/Json.tsx":{"bytesInOutput":1956},"src/SyntaxHighlighter/index.ts":{"bytesInOutput":78},"src/SyntaxHighlighter/SyntaxHighlighter.tsx":{"bytesInOutput":956},"src/Json/index.ts":{"bytesInOutput":0},"src/index.ts":{"bytesInOutput":0}},"bytes":3315}}}
+{"inputs":{"src/SyntaxHighlighter/SyntaxHighlighter.tsx":{"bytes":7063,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"react-syntax-highlighter/dist/esm/prism-async-light","kind":"import-statement","external":true},{"path":"react-syntax-highlighter/dist/esm/styles/prism","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/ui-theme","kind":"import-statement","external":true}],"format":"esm"},"src/SyntaxHighlighter/index.ts":{"bytes":979,"imports":[{"path":"react-syntax-highlighter/dist/esm/create-element","kind":"import-statement","external":true},{"path":"src/SyntaxHighlighter/SyntaxHighlighter.tsx","kind":"import-statement","original":"./SyntaxHighlighter"}],"format":"esm"},"src/Json/Json.tsx":{"bytes":16024,"imports":[{"path":"jsonpath-plus","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/ui-theme","kind":"import-statement","external":true},{"path":"@dxos/util","kind":"import-statement","external":true},{"path":"src/SyntaxHighlighter/index.ts","kind":"import-statement","original":"../SyntaxHighlighter"}],"format":"esm"},"src/Json/index.ts":{"bytes":618,"imports":[{"path":"src/Json/Json.tsx","kind":"import-statement","original":"./Json"}],"format":"esm"},"src/index.ts":{"bytes":571,"imports":[{"path":"src/Json/index.ts","kind":"import-statement","original":"./Json"},{"path":"src/SyntaxHighlighter/index.ts","kind":"import-statement","original":"./SyntaxHighlighter"}],"format":"esm"}},"outputs":{"dist/lib/node-esm/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":12709},"dist/lib/node-esm/index.mjs":{"imports":[{"path":"jsonpath-plus","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/ui-theme","kind":"import-statement","external":true},{"path":"@dxos/util","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/prism-async-light","kind":"import-statement","external":true},{"path":"react-syntax-highlighter/dist/esm/styles/prism","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/ui-theme","kind":"import-statement","external":true}],"exports":["Json","SyntaxHighlighter","createElement"],"entryPoint":"src/index.ts","inputs":{"src/Json/Json.tsx":{"bytesInOutput":3608},"src/SyntaxHighlighter/index.ts":{"bytesInOutput":78},"src/SyntaxHighlighter/SyntaxHighlighter.tsx":{"bytesInOutput":1359},"src/Json/index.ts":{"bytesInOutput":0},"src/index.ts":{"bytesInOutput":0}},"bytes":5356}}}

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

@@ -1,9 +1,37 @@
-import React from 'react';
-import { type ThemedClassName } from '@dxos/react-ui';
-export type JsonProps = ThemedClassName<{
+import React, { type PropsWithChildren } from 'react';
+import { type ComposableProps } from '@dxos/ui-types';
+import { type CreateReplacerProps } from '@dxos/util';
+type JsonRootProps = PropsWithChildren<{
     data?: any;
+    replacer?: CreateReplacerProps;
+}>;
+type JsonContentProps = ComposableProps;
+type JsonFilterProps = ComposableProps<{
+    placeholder?: string;
+}>;
+type JsonDataProps = ComposableProps<{
+    data?: any;
+    replacer?: CreateReplacerProps;
     testId?: string;
 }>;
-export declare const Json: ({ data, classNames, testId }: JsonProps) => React.JSX.Element;
-export declare const JsonFilter: ({ data: initialData, classNames, testId }: JsonProps) => React.JSX.Element;
+export declare const Json: {
+    Root: React.ForwardRefExoticComponent<{
+        data?: any;
+        replacer?: CreateReplacerProps;
+    } & {
+        children?: React.ReactNode | undefined;
+    } & React.RefAttributes<HTMLDivElement>>;
+    Content: React.ForwardRefExoticComponent<Omit<JsonContentProps, "className"> & {
+        classNames?: import("@dxos/ui-types").ClassNameValue;
+    } & Pick<React.HTMLAttributes<Element>, "className" | "children" | "role" | "style"> & React.RefAttributes<HTMLDivElement>>;
+    Filter: React.ForwardRefExoticComponent<Omit<{
+        placeholder?: string;
+    }, "className"> & {
+        classNames?: import("@dxos/ui-types").ClassNameValue;
+    } & Pick<React.HTMLAttributes<Element>, "className" | "children" | "role" | "style"> & React.RefAttributes<HTMLInputElement>>;
+    Data: React.ForwardRefExoticComponent<Omit<JsonDataProps, "className"> & {
+        classNames?: import("@dxos/ui-types").ClassNameValue;
+    } & Pick<React.HTMLAttributes<Element>, "className" | "children" | "role" | "style"> & React.RefAttributes<HTMLDivElement>>;
+};
+export type { JsonRootProps, JsonContentProps, JsonFilterProps, JsonDataProps };
 //# sourceMappingURL=Json.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Json.d.ts","sourceRoot":"","sources":["../../../../src/Json/Json.tsx"],"names":[],"mappings":"AAMA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAEnD,OAAO,EAAS,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAI7D,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"}
+{"version":3,"file":"Json.d.ts","sourceRoot":"","sources":["../../../../src/Json/Json.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,EAEZ,KAAK,iBAAiB,EAMvB,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AACtD,OAAO,EAAE,KAAK,mBAAmB,EAAiC,MAAM,YAAY,CAAC;AAuCrF,KAAK,aAAa,GAAG,iBAAiB,CAAC;IACrC,IAAI,CAAC,EAAE,GAAG,CAAC;IACX,QAAQ,CAAC,EAAE,mBAAmB,CAAC;CAChC,CAAC,CAAC;AAuCH,KAAK,gBAAgB,GAAG,eAAe,CAAC;AAmBxC,KAAK,eAAe,GAAG,eAAe,CAAC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC,CAAC;AA8BH,KAAK,aAAa,GAAG,eAAe,CAAC;IACnC,IAAI,CAAC,EAAE,GAAG,CAAC;IACX,QAAQ,CAAC,EAAE,mBAAmB,CAAC;IAC/B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC,CAAC;AA4BH,eAAO,MAAM,IAAI;;eA5HR,GAAG;mBACC,mBAAmB;;;;;;;;sBA4DhB,MAAM;;;;;;;CAoErB,CAAC;AAEF,YAAY,EAAE,aAAa,EAAE,gBAAgB,EAAE,eAAe,EAAE,aAAa,EAAE,CAAC"}

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

@@ -0,0 +1,21 @@
+import { type StoryObj } from '@storybook/react-vite';
+import React from 'react';
+declare const meta: {
+    title: string;
+    component: React.ForwardRefExoticComponent<{
+        data?: any;
+        replacer?: import("@dxos/util").CreateReplacerProps;
+    } & {
+        children?: React.ReactNode | undefined;
+    } & React.RefAttributes<HTMLDivElement>>;
+    decorators: import("@storybook/react").Decorator[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+/** Standalone Json.Data — simplest usage. */
+export declare const Default: Story;
+/** Circular reference handling. */
+export declare const Cycle: Story;
+/** Large dataset with replacer. */
+export declare const Filter: Story;
+//# sourceMappingURL=Json.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Json.stories.d.ts","sourceRoot":"","sources":["../../../../src/Json/Json.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAa,KAAK,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,KAAK,MAAM,OAAO,CAAC;AA4D1B,QAAA,MAAM,IAAI;;;;;;;;;CAIM,CAAC;AAEjB,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,6CAA6C;AAC7C,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,mCAAmC;AACnC,eAAO,MAAM,KAAK,EAAE,KAKnB,CAAC;AAEF,mCAAmC;AACnC,eAAO,MAAM,MAAM,EAAE,KAapB,CAAC"}

package/dist/types/src/Json/index.d.ts

@@ -1,2 +1,2 @@
-export * from './Json';
+export { Json, type JsonRootProps, type JsonContentProps, type JsonFilterProps, type JsonDataProps } from './Json';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/src/Json/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Json/index.ts"],"names":[],"mappings":"AAIA,cAAc,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Json/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,IAAI,EAAE,KAAK,aAAa,EAAE,KAAK,gBAAgB,EAAE,KAAK,eAAe,EAAE,KAAK,aAAa,EAAE,MAAM,QAAQ,CAAC"}

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

@@ -1,11 +1,16 @@
 import React from 'react';
-import { type SyntaxHighlighterProps as NativeSyntaxHighlighterProps } from 'react-syntax-highlighter';
-import { type ThemedClassName } from '@dxos/react-ui';
-export type SyntaxHighlighterProps = ThemedClassName<NativeSyntaxHighlighterProps & {
+import { type SyntaxHighlighterProps as NaturalSyntaxHighlighterProps } from 'react-syntax-highlighter';
+export type SyntaxHighlighterProps = NaturalSyntaxHighlighterProps & {
     fallback?: string;
-}>;
+};
 /**
+ * NOTE: Using `light-async` version directly from dist to avoid any chance of the heavy one being loaded.
+ * The lightweight version will load specific language parsers asynchronously.
+ *
  * https://github.com/react-syntax-highlighter/react-syntax-highlighter
+ * https://react-syntax-highlighter.github.io/react-syntax-highlighter/demo/prism.html
  */
-export declare const SyntaxHighlighter: ({ classNames, children, fallback, ...props }: SyntaxHighlighterProps) => React.JSX.Element;
+export declare const SyntaxHighlighter: React.ForwardRefExoticComponent<Omit<SyntaxHighlighterProps, "className"> & {
+    classNames?: import("@dxos/ui-types").ClassNameValue;
+} & Pick<React.HTMLAttributes<Element>, "className" | "children" | "role" | "style"> & React.RefAttributes<HTMLDivElement>>;
 //# 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;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"}
+{"version":3,"file":"SyntaxHighlighter.d.ts","sourceRoot":"","sources":["../../../../src/SyntaxHighlighter/SyntaxHighlighter.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAE,KAAK,sBAAsB,IAAI,6BAA6B,EAAE,MAAM,0BAA0B,CAAC;AAcxG,MAAM,MAAM,sBAAsB,GAAG,6BAA6B,GAAG;IACnE,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,iBAAiB;;2HAgC7B,CAAC"}

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

@@ -1,7 +1,15 @@
-import '@dxos-theme';
-import { type Meta, type StoryObj } from '@storybook/react-vite';
+import { type StoryObj } from '@storybook/react-vite';
 import { SyntaxHighlighter } from './SyntaxHighlighter';
-declare const meta: Meta<typeof SyntaxHighlighter>;
+declare const meta: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<Omit<import("./SyntaxHighlighter").SyntaxHighlighterProps, "className"> & {
+        classNames?: import("@dxos/ui-types").ClassNameValue;
+    } & Pick<import("react").HTMLAttributes<Element>, "className" | "children" | "role" | "style"> & import("react").RefAttributes<HTMLDivElement>>;
+    decorators: import("@storybook/react").Decorator[];
+    parameters: {
+        layout: string;
+    };
+};
 export default meta;
 type Story = StoryObj<typeof SyntaxHighlighter>;
 export declare const Default: Story;

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;AAErB,OAAO,EAAE,KAAK,IAAI,EAAE,KAAK,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAIjE,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"}
+{"version":3,"file":"SyntaxHighlighter.stories.d.ts","sourceRoot":"","sources":["../../../../src/SyntaxHighlighter/SyntaxHighlighter.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAa,KAAK,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAOjE,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAExD,QAAA,MAAM,IAAI;;;;;;;;;CAOgC,CAAC;AAE3C,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,KAWxB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAAU,CAAC"}