@dxos/react-ui-syntax-highlighter 0.8.4-main.c4373fc → 0.8.4-main.c85a9c8dae

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): Use 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\nconst defaultClassNames = '!m-0 grow overflow-y-auto';\n\nexport type JsonProps = ThemedClassName<{\n  data?: any;\n  filter?: boolean;\n  replacer?: CreateReplacerProps;\n  testId?: string;\n}>;\n\nexport const Json = ({ filter, ...params }: JsonProps) => {\n  if (filter) {\n    return <JsonFilter {...params} />;\n  }\n\n  const { classNames, data, replacer, testId } = params;\n  return (\n    <SyntaxHighlighter language='json' classNames={[defaultClassNames, classNames]} data-testid={testId}>\n      {JSON.stringify(data, replacer && createReplacer(replacer), 2)}\n    </SyntaxHighlighter>\n  );\n};\n\nexport const JsonFilter = ({ classNames, data: initialData, replacer, 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={[defaultClassNames, classNames]} data-testid={testId}>\n        {JSON.stringify(data, replacer && createReplacer(replacer), 2)}\n      </SyntaxHighlighter>\n    </div>\n  );\n};\n\nexport type CreateReplacerProps = {\n  omit?: string[];\n  parse?: string[];\n  maxDepth?: number;\n  maxArrayLen?: number;\n  maxStringLen?: number;\n};\n\nexport type JsonReplacer = (this: any, key: string, value: any) => any;\n\nexport const createReplacer = ({\n  omit,\n  parse,\n  maxDepth,\n  maxArrayLen,\n  maxStringLen,\n}: CreateReplacerProps): JsonReplacer => {\n  let currentDepth = 0;\n  const depthMap = new WeakMap<object, number>();\n\n  return function (this: any, key: string, value: any) {\n    // Track depth.\n    if (key === '') {\n      currentDepth = 0;\n    } else if (this && typeof this === 'object') {\n      const parentDepth = depthMap.get(this) ?? 0;\n      currentDepth = parentDepth + 1;\n    }\n\n    // Store depth for this object.\n    if (value && typeof value === 'object') {\n      depthMap.set(value, currentDepth);\n\n      // Check max depth.\n      if (maxDepth != null && currentDepth >= maxDepth) {\n        return Array.isArray(value) ? `[{ length: ${value.length} }]` : `{ keys: ${Object.keys(value).length} }`;\n      }\n    }\n\n    // Apply other filters.\n    if (omit?.includes(key)) {\n      return undefined;\n    }\n    if (parse?.includes(key) && typeof value === 'string') {\n      try {\n        return JSON.parse(value);\n      } catch {\n        return value;\n      }\n    }\n    if (maxArrayLen != null && Array.isArray(value) && value.length > maxArrayLen) {\n      return `[length: ${value.length}]`;\n    }\n    if (maxStringLen != null && typeof value === 'string' && value.length > maxStringLen) {\n      return value.slice(0, maxStringLen) + '...';\n    }\n\n    return value;\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 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 { type ThemedClassName, useThemeContext } from '@dxos/react-ui';\nimport { mx } from '@dxos/react-ui-theme';\n\nconst zeroWidthSpace = '\\u200b';\n\nexport type SyntaxHighlighterProps = ThemedClassName<\n  NaturalSyntaxHighlighterProps & {\n    fallback?: string;\n  }\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 */\n// TODO(burdon): Replace with react-ui-editor (and reuse styles).\nexport const SyntaxHighlighter = ({\n  classNames,\n  children,\n  language = 'text',\n  fallback = zeroWidthSpace,\n  ...props\n}: SyntaxHighlighterProps) => {\n  const { themeMode } = useThemeContext();\n\n  return (\n    <div className={mx('flex is-full p-1 overflow-hidden text-baseText', classNames)}>\n      <NativeSyntaxHighlighter\n        className='is-full overflow-auto scrollbar-thin'\n        language={languages[language as keyof typeof languages] || language}\n        style={themeMode === 'dark' ? dark : light}\n        customStyle={{\n          background: 'unset',\n          border: 'none',\n          boxShadow: 'none',\n          padding: 0,\n          margin: 0,\n        }}\n        {...props}\n      >\n        {/* Non-empty fallback prevents collapse. */}\n        {children || fallback}\n      </NativeSyntaxHighlighter>\n    </div>\n  );\n};\n\nconst languages = {\n  js: 'javascript',\n  ts: 'typescript',\n};\n"],
-  "mappings": "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",
-  "names": ["jp", "React", "useEffect", "useState", "Input", "createElement", "React", "NativeSyntaxHighlighter", "coldarkDark", "dark", "coldarkCold", "light", "useThemeContext", "mx", "zeroWidthSpace", "SyntaxHighlighter", "classNames", "children", "language", "fallback", "props", "themeMode", "useThemeContext", "div", "className", "mx", "NativeSyntaxHighlighter", "languages", "style", "dark", "light", "customStyle", "background", "border", "boxShadow", "padding", "margin", "js", "ts", "defaultClassNames", "Json", "filter", "params", "React", "JsonFilter", "classNames", "data", "replacer", "testId", "SyntaxHighlighter", "language", "data-testid", "JSON", "stringify", "createReplacer", "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", "omit", "parse", "maxDepth", "maxArrayLen", "maxStringLen", "currentDepth", "depthMap", "WeakMap", "key", "parentDepth", "get", "set", "Array", "isArray", "Object", "keys", "includes", "undefined", "slice"]
+  "sourcesContent": ["//\n// Copyright 2025 DXOS.org\n//\n\nimport { JSONPath } from 'jsonpath-plus';\nimport React, { forwardRef, useEffect, useState } from 'react';\n\nimport { Input, type ThemedClassName } from '@dxos/react-ui';\nimport { type CreateReplacerProps, createReplacer, safeStringify } from '@dxos/util';\n\nimport { SyntaxHighlighter } from '../SyntaxHighlighter';\n\nexport type JsonProps = ThemedClassName<{\n  data?: any;\n  filter?: boolean;\n  replacer?: CreateReplacerProps;\n  testId?: string;\n}>;\n\nexport const Json = forwardRef<HTMLDivElement, JsonProps>((props, forwardedRef) => {\n  if (props.filter) {\n    return <JsonFilter {...props} />;\n  }\n\n  const { classNames, data, replacer, testId } = props;\n  return (\n    <SyntaxHighlighter\n      language='json'\n      classNames={['w-full overflow-y-auto text-sm', classNames]}\n      data-testid={testId}\n      ref={forwardedRef}\n    >\n      {safeStringify(data, replacer && createReplacer(replacer), 2)}\n    </SyntaxHighlighter>\n  );\n});\n\nexport const JsonFilter = forwardRef<HTMLDivElement, JsonProps>(\n  ({ classNames, data: initialData, replacer, testId }, forwardedRef) => {\n    const [data, setData] = useState(initialData);\n    const [text, setText] = useState('');\n    const [error, setError] = useState<Error | null>(null);\n\n    useEffect(() => {\n      if (!initialData || !text.trim().length) {\n        setData(initialData);\n      } else {\n        try {\n          setData(JSONPath({ path: text, json: initialData }));\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 h-full overflow-hidden' ref={forwardedRef}>\n        <Input.Root validationValence={error ? 'error' : 'success'}>\n          <Input.TextInput\n            classNames={['p-1 px-2 font-mono', error && 'border-rose-500']}\n            variant='subdued'\n            value={text}\n            placeholder='JSONPath (e.g., $.graph.nodes)'\n            onChange={(event) => setText(event.target.value)}\n          />\n        </Input.Root>\n        <SyntaxHighlighter\n          language='json'\n          classNames={['w-full overflow-y-auto text-sm', classNames]}\n          data-testid={testId}\n        >\n          {safeStringify(data, replacer && createReplacer(replacer), 2)}\n        </SyntaxHighlighter>\n      </div>\n    );\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 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, type ThemedClassName, useThemeContext } from '@dxos/react-ui';\nimport { mx } from '@dxos/ui-theme';\n\nconst zeroWidthSpace = '\\u200b';\n\nexport type SyntaxHighlighterProps = ThemedClassName<\n  NaturalSyntaxHighlighterProps & {\n    fallback?: string;\n  }\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 */\n// TODO(burdon): Replace with react-ui-editor (and reuse styles).\nexport const SyntaxHighlighter = ({\n  classNames,\n  children,\n  language = 'text',\n  fallback = zeroWidthSpace,\n  ...props\n}: SyntaxHighlighterProps) => {\n  const { themeMode } = useThemeContext();\n\n  return (\n    <ScrollArea.Root thin classNames={mx('p1', classNames)}>\n      <ScrollArea.Viewport>\n        <div role='none'>\n          <NativeSyntaxHighlighter\n            language={languages[language as keyof typeof languages] || language}\n            style={themeMode === 'dark' ? dark : light}\n            customStyle={{\n              background: 'unset',\n              border: 'none',\n              boxShadow: 'none',\n              padding: 0,\n              margin: 0,\n            }}\n            {...props}\n          >\n            {/* Non-empty fallback prevents collapse. */}\n            {children || fallback}\n          </NativeSyntaxHighlighter>\n        </div>\n      </ScrollArea.Viewport>\n    </ScrollArea.Root>\n  );\n};\n\nconst languages = {\n  js: 'javascript',\n  ts: 'typescript',\n};\n"],
+  "mappings": ";;;AAIA,SAASA,gBAAgB;AACzB,OAAOC,UAASC,YAAYC,WAAWC,gBAAgB;AAEvD,SAASC,aAAmC;AAC5C,SAAmCC,gBAAgBC,qBAAqB;;;ACHxE,OAAOC,mBAAmB;;;ACD1B,OAAOC,WAAW;AAElB,OAAOC,6BAA6B;AACpC,SAASC,eAAeC,MAAMC,eAAeC,aAAa;AAE1D,SAASC,YAAkCC,uBAAuB;AAClE,SAASC,UAAU;AAEnB,IAAMC,iBAAiB;AAgBhB,IAAMC,oBAAoB,CAAC,EAChCC,YACAC,UACAC,WAAW,QACXC,WAAWL,gBACX,GAAGM,MAAAA,MACoB;AACvB,QAAM,EAAEC,UAAS,IAAKC,gBAAAA;AAEtB,SACE,sBAAA,cAACC,WAAWC,MAAI;IAACC,MAAAA;IAAKT,YAAYU,GAAG,MAAMV,UAAAA;KACzC,sBAAA,cAACO,WAAWI,UAAQ,MAClB,sBAAA,cAACC,OAAAA;IAAIC,MAAK;KACR,sBAAA,cAACC,yBAAAA;IACCZ,UAAUa,UAAUb,QAAAA,KAAuCA;IAC3Dc,OAAOX,cAAc,SAASY,OAAOC;IACrCC,aAAa;MACXC,YAAY;MACZC,QAAQ;MACRC,WAAW;MACXC,SAAS;MACTC,QAAQ;IACV;IACC,GAAGpB;KAGHH,YAAYE,QAAAA,CAAAA,CAAAA,CAAAA;AAMzB;AAEA,IAAMY,YAAY;EAChBU,IAAI;EACJC,IAAI;AACN;;;AF9CO,IAAMC,OAAOC,2BAAsC,CAACC,OAAOC,iBAAAA;AAChE,MAAID,MAAME,QAAQ;AAChB,WAAO,gBAAAC,OAAA,cAACC,YAAeJ,KAAAA;EACzB;AAEA,QAAM,EAAEK,YAAYC,MAAMC,UAAUC,OAAM,IAAKR;AAC/C,SACE,gBAAAG,OAAA,cAACM,mBAAAA;IACCC,UAAS;IACTL,YAAY;MAAC;MAAkCA;;IAC/CM,eAAaH;IACbI,KAAKX;KAEJY,cAAcP,MAAMC,YAAYO,eAAeP,QAAAA,GAAW,CAAA,CAAA;AAGjE,CAAA;AAEO,IAAMH,aAAaL,2BACxB,CAAC,EAAEM,YAAYC,MAAMS,aAAaR,UAAUC,OAAM,GAAIP,iBAAAA;AACpD,QAAM,CAACK,MAAMU,OAAAA,IAAWC,SAASF,WAAAA;AACjC,QAAM,CAACG,MAAMC,OAAAA,IAAWF,SAAS,EAAA;AACjC,QAAM,CAACG,OAAOC,QAAAA,IAAYJ,SAAuB,IAAA;AAEjDK,YAAU,MAAA;AACR,QAAI,CAACP,eAAe,CAACG,KAAKK,KAAI,EAAGC,QAAQ;AACvCR,cAAQD,WAAAA;IACV,OAAO;AACL,UAAI;AACFC,gBAAQS,SAAS;UAAEC,MAAMR;UAAMS,MAAMZ;QAAY,CAAA,CAAA;AACjDM,iBAAS,IAAA;MACX,SAASO,KAAK;AACZZ,gBAAQD,WAAAA;AACRM,iBAASO,GAAAA;MACX;IACF;EACF,GAAG;IAACb;IAAaG;GAAK;AAEtB,SACE,gBAAAf,OAAA,cAAC0B,OAAAA;IAAIC,WAAU;IAAuClB,KAAKX;KACzD,gBAAAE,OAAA,cAAC4B,MAAMC,MAAI;IAACC,mBAAmBb,QAAQ,UAAU;KAC/C,gBAAAjB,OAAA,cAAC4B,MAAMG,WAAS;IACd7B,YAAY;MAAC;MAAsBe,SAAS;;IAC5Ce,SAAQ;IACRC,OAAOlB;IACPmB,aAAY;IACZC,UAAU,CAACC,UAAUpB,QAAQoB,MAAMC,OAAOJ,KAAK;OAGnD,gBAAAjC,OAAA,cAACM,mBAAAA;IACCC,UAAS;IACTL,YAAY;MAAC;MAAkCA;;IAC/CM,eAAaH;KAEZK,cAAcP,MAAMC,YAAYO,eAAeP,QAAAA,GAAW,CAAA,CAAA,CAAA;AAInE,CAAA;",
+  "names": ["JSONPath", "React", "forwardRef", "useEffect", "useState", "Input", "createReplacer", "safeStringify", "createElement", "React", "NativeSyntaxHighlighter", "coldarkDark", "dark", "coldarkCold", "light", "ScrollArea", "useThemeContext", "mx", "zeroWidthSpace", "SyntaxHighlighter", "classNames", "children", "language", "fallback", "props", "themeMode", "useThemeContext", "ScrollArea", "Root", "thin", "mx", "Viewport", "div", "role", "NativeSyntaxHighlighter", "languages", "style", "dark", "light", "customStyle", "background", "border", "boxShadow", "padding", "margin", "js", "ts", "Json", "forwardRef", "props", "forwardedRef", "filter", "React", "JsonFilter", "classNames", "data", "replacer", "testId", "SyntaxHighlighter", "language", "data-testid", "ref", "safeStringify", "createReplacer", "initialData", "setData", "useState", "text", "setText", "error", "setError", "useEffect", "trim", "length", "JSONPath", "path", "json", "err", "div", "className", "Input", "Root", "validationValence", "TextInput", "variant", "value", "placeholder", "onChange", "event", "target"]
 }

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

@@ -1 +1 @@
-{"inputs":{"src/SyntaxHighlighter/SyntaxHighlighter.tsx":{"bytes":6186,"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/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/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":13553,"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":10243},"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/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/react-ui-theme","kind":"import-statement","external":true}],"exports":["Json","JsonFilter","SyntaxHighlighter","createElement","createReplacer"],"entryPoint":"src/index.ts","inputs":{"src/Json/Json.tsx":{"bytesInOutput":3411},"src/SyntaxHighlighter/index.ts":{"bytesInOutput":78},"src/SyntaxHighlighter/SyntaxHighlighter.tsx":{"bytesInOutput":1283},"src/Json/index.ts":{"bytesInOutput":0},"src/index.ts":{"bytesInOutput":0}},"bytes":5115}}}
+{"inputs":{"src/SyntaxHighlighter/SyntaxHighlighter.tsx":{"bytes":6276,"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":8496,"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/util","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":8181},"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/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","JsonFilter","SyntaxHighlighter","createElement"],"entryPoint":"src/index.ts","inputs":{"src/Json/Json.tsx":{"bytesInOutput":2125},"src/SyntaxHighlighter/index.ts":{"bytesInOutput":78},"src/SyntaxHighlighter/SyntaxHighlighter.tsx":{"bytesInOutput":1162},"src/index.ts":{"bytesInOutput":0}},"bytes":3690}}}

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

@@ -1,20 +1,26 @@
 import React from 'react';
 import { type ThemedClassName } from '@dxos/react-ui';
+import { type CreateReplacerProps } from '@dxos/util';
 export type JsonProps = ThemedClassName<{
     data?: any;
     filter?: boolean;
     replacer?: CreateReplacerProps;
     testId?: string;
 }>;
-export declare const Json: ({ filter, ...params }: JsonProps) => React.JSX.Element;
-export declare const JsonFilter: ({ classNames, data: initialData, replacer, testId }: JsonProps) => React.JSX.Element;
-export type CreateReplacerProps = {
-    omit?: string[];
-    parse?: string[];
-    maxDepth?: number;
-    maxArrayLen?: number;
-    maxStringLen?: number;
-};
-export type JsonReplacer = (this: any, key: string, value: any) => any;
-export declare const createReplacer: ({ omit, parse, maxDepth, maxArrayLen, maxStringLen, }: CreateReplacerProps) => JsonReplacer;
+export declare const Json: React.ForwardRefExoticComponent<Omit<{
+    data?: any;
+    filter?: boolean;
+    replacer?: CreateReplacerProps;
+    testId?: string;
+}, "className"> & {
+    classNames?: import("@dxos/ui-types").ClassNameValue;
+} & React.RefAttributes<HTMLDivElement>>;
+export declare const JsonFilter: React.ForwardRefExoticComponent<Omit<{
+    data?: any;
+    filter?: boolean;
+    replacer?: CreateReplacerProps;
+    testId?: string;
+}, "className"> & {
+    classNames?: import("@dxos/ui-types").ClassNameValue;
+} & React.RefAttributes<HTMLDivElement>>;
 //# 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;AAM7D,MAAM,MAAM,SAAS,GAAG,eAAe,CAAC;IACtC,IAAI,CAAC,EAAE,GAAG,CAAC;IACX,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,mBAAmB,CAAC;IAC/B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC,CAAC;AAEH,eAAO,MAAM,IAAI,GAAI,uBAAuB,SAAS,sBAWpD,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,qDAAqD,SAAS,sBAkCxF,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,CAAC,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,GAAG,CAAC;AAEvE,eAAO,MAAM,cAAc,GAAI,uDAM5B,mBAAmB,KAAG,YA2CxB,CAAC"}
+{"version":3,"file":"Json.d.ts","sourceRoot":"","sources":["../../../../src/Json/Json.tsx"],"names":[],"mappings":"AAKA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAE/D,OAAO,EAAS,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAC7D,OAAO,EAAE,KAAK,mBAAmB,EAAiC,MAAM,YAAY,CAAC;AAIrF,MAAM,MAAM,SAAS,GAAG,eAAe,CAAC;IACtC,IAAI,CAAC,EAAE,GAAG,CAAC;IACX,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,mBAAmB,CAAC;IAC/B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC,CAAC;AAEH,eAAO,MAAM,IAAI;WANR,GAAG;aACD,OAAO;eACL,mBAAmB;aACrB,MAAM;;;wCAmBf,CAAC;AAEH,eAAO,MAAM,UAAU;WAxBd,GAAG;aACD,OAAO;eACL,mBAAmB;aACrB,MAAM;;;wCA8DhB,CAAC"}

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

@@ -1,16 +1,22 @@
 import { type StoryObj } from '@storybook/react-vite';
+import React from 'react';
 import { Json } from './Json';
 declare const meta: {
     title: string;
-    component: ({ filter, ...params }: import("./Json").JsonProps) => import("react").JSX.Element;
+    component: React.ForwardRefExoticComponent<Omit<{
+        data?: any;
+        filter?: boolean;
+        replacer?: import("@dxos/util").CreateReplacerProps;
+        testId?: string;
+    }, "className"> & {
+        classNames?: import("@dxos/ui-types").ClassNameValue;
+    } & React.RefAttributes<HTMLDivElement>>;
     decorators: import("@storybook/react").Decorator[];
-    parameters: {
-        layout: string;
-    };
 };
 export default meta;
 type Story = StoryObj<typeof Json>;
 export declare const Default: Story;
 export declare const Filter: Story;
 export declare const Large: Story;
+export declare const Cycle: Story;
 //# sourceMappingURL=Json.stories.d.ts.map

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

@@ -1 +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;AAKjE,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AA6C9B,QAAA,MAAM,IAAI;;;;;;;CAOmB,CAAC;AAE9B,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAInC,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAMpB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAWnB,CAAC"}
+{"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;AAK1B,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AA6C9B,QAAA,MAAM,IAAI;;;;;;;;;;;CAImB,CAAC;AAE9B,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAInC,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAMpB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAWnB,CAAC;AAUF,eAAO,MAAM,KAAK,EAAE,KAEnB,CAAC"}

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,6BAA6B,EAAE,MAAM,0BAA0B,CAAC;AAIxG,OAAO,EAAE,KAAK,eAAe,EAAmB,MAAM,gBAAgB,CAAC;AAKvE,MAAM,MAAM,sBAAsB,GAAG,eAAe,CAClD,6BAA6B,GAAG;IAC9B,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CACF,CAAC;AAEF;;;;;;GAMG;AAEH,eAAO,MAAM,iBAAiB,GAAI,wDAM/B,sBAAsB,sBAuBxB,CAAC"}
+{"version":3,"file":"SyntaxHighlighter.d.ts","sourceRoot":"","sources":["../../../../src/SyntaxHighlighter/SyntaxHighlighter.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,KAAK,sBAAsB,IAAI,6BAA6B,EAAE,MAAM,0BAA0B,CAAC;AAIxG,OAAO,EAAc,KAAK,eAAe,EAAmB,MAAM,gBAAgB,CAAC;AAKnF,MAAM,MAAM,sBAAsB,GAAG,eAAe,CAClD,6BAA6B,GAAG;IAC9B,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CACF,CAAC;AAEF;;;;;;GAMG;AAEH,eAAO,MAAM,iBAAiB,GAAI,wDAM/B,sBAAsB,sBA0BxB,CAAC"}

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

@@ -4,6 +4,9 @@ declare const meta: {
     title: string;
     component: ({ classNames, children, language, fallback, ...props }: import("./SyntaxHighlighter").SyntaxHighlighterProps) => import("react").JSX.Element;
     decorators: import("@storybook/react").Decorator[];
+    parameters: {
+        layout: string;
+    };
 };
 export default meta;
 type Story = StoryObj<typeof SyntaxHighlighter>;

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,EAAa,KAAK,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAKjE,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAExD,QAAA,MAAM,IAAI;;;;CAIgC,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,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;AAQjE,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"}