@dxos/react-ui-syntax-highlighter 0.8.4-main.f9ba587 → 0.8.4-main.fcc0d83b33

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

@@ -1,100 +1,211 @@
 import { createRequire } from 'node:module';const require = createRequire(import.meta.url);
 
-// src/Json/Json.tsx
-import { useSignals as _useSignals2 } from "@preact-signals/safe-react/tracking";
-import jp from "jsonpath";
-import React2, { useEffect, useState } from "react";
-import { Input } from "@dxos/react-ui";
-import { mx as mx2 } from "@dxos/react-ui-theme";
+// src/JsonHighlighter/JsonHighlighter.tsx
+import React2 from "react";
+import { composable as composable2 } from "@dxos/ui-theme";
+import { createReplacer, safeStringify } from "@dxos/util";
 
 // src/SyntaxHighlighter/index.ts
 import createElement from "react-syntax-highlighter/dist/esm/create-element";
 
 // src/SyntaxHighlighter/SyntaxHighlighter.tsx
-import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
-import React from "react";
-import NativeSyntaxHighlighter from "react-syntax-highlighter/dist/esm/light-async";
-import { github as light, a11yDark as dark } from "react-syntax-highlighter/dist/esm/styles/hljs";
-import { useThemeContext } from "@dxos/react-ui";
-import { mx } from "@dxos/react-ui-theme";
+import React, { Children } from "react";
+import NativeSyntaxHighlighter from "react-syntax-highlighter/dist/esm/prism-async-light";
+import { coldarkDark as dark, coldarkCold as light } from "react-syntax-highlighter/dist/esm/styles/prism";
+import { Clipboard, useThemeContext } from "@dxos/react-ui";
+import { composable, composableProps } from "@dxos/ui-theme";
 var zeroWidthSpace = "\u200B";
-light.hljs.background = "";
-dark.hljs.background = "";
-var SyntaxHighlighter = ({ classNames, children, fallback = zeroWidthSpace, ...props }) => {
-  var _effect = _useSignals();
-  try {
-    const { themeMode } = useThemeContext();
-    return /* @__PURE__ */ React.createElement(NativeSyntaxHighlighter, {
-      className: mx("w-full p-0 font-thin overflow-auto scrollbar-thin !text-baseText", classNames),
-      style: themeMode === "dark" ? dark : light,
-      ...props
-    }, children || fallback);
-  } finally {
-    _effect.f();
-  }
+var languages = {
+  js: "javascript",
+  ts: "typescript"
 };
+var SyntaxHighlighter = composable(({ classNames, className, children, role, style, themeStyle, language = "text", fallback = zeroWidthSpace, copyButton, ...nativeProps }, forwardedRef) => {
+  const { themeMode } = useThemeContext();
+  const source = Children.toArray(children).join("") || fallback;
+  const hasCustomTheme = themeStyle && typeof themeStyle === "object" && Object.keys(themeStyle).length > 0;
+  const prismTheme = hasCustomTheme ? themeStyle : themeMode === "dark" ? dark : light;
+  return /* @__PURE__ */ React.createElement("div", {
+    ...composableProps({
+      classNames,
+      className,
+      role,
+      style
+    }, {
+      role: "none",
+      classNames: copyButton && "relative group"
+    }),
+    ref: forwardedRef
+  }, /* @__PURE__ */ React.createElement(NativeSyntaxHighlighter, {
+    language: languages[language] || language,
+    style: prismTheme,
+    customStyle: {
+      background: "unset",
+      border: "none",
+      boxShadow: "none",
+      padding: 0,
+      margin: 0
+    },
+    ...nativeProps
+  }, source), copyButton && /* @__PURE__ */ React.createElement("div", {
+    role: "none",
+    className: "pointer-events-none absolute top-1 right-1 z-10 opacity-0 group-hover:opacity-100 focus-within:opacity-100"
+  }, /* @__PURE__ */ React.createElement(Clipboard.Provider, null, /* @__PURE__ */ React.createElement(Clipboard.IconButton, {
+    value: source,
+    variant: "ghost",
+    size: 4,
+    classNames: "pointer-events-auto aspect-square rounded-sm"
+  }))));
+});
+SyntaxHighlighter.displayName = "SyntaxHighlighter";
 
-// src/Json/Json.tsx
-var Json = ({ data, classNames, testId }) => {
-  var _effect = _useSignals2();
-  try {
-    return /* @__PURE__ */ React2.createElement(SyntaxHighlighter, {
-      language: "json",
-      classNames: [
-        "w-full",
-        classNames
-      ],
-      "data-testid": testId
-    }, JSON.stringify(data, null, 2));
-  } finally {
-    _effect.f();
+// src/JsonHighlighter/JsonHighlighter.tsx
+var resolveReplacer = (replacer) => {
+  if (!replacer) {
+    return void 0;
   }
+  return typeof replacer === "function" ? replacer : createReplacer(replacer);
+};
+var JsonHighlighter = composable2(({ data, replacer, indent = 2, testId, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ React2.createElement(SyntaxHighlighter, {
+    ...props,
+    language: "json",
+    "data-testid": testId,
+    ref: forwardedRef
+  }, safeStringify(data, resolveReplacer(replacer), indent));
+});
+JsonHighlighter.displayName = "JsonHighlighter";
+
+// src/Syntax/Syntax.tsx
+import { createContextScope } from "@radix-ui/react-context";
+import { JSONPath } from "jsonpath-plus";
+import React3, { forwardRef, useMemo, useState } from "react";
+import { Input, ScrollArea } from "@dxos/react-ui";
+import { composable as composable3, composableProps as composableProps2 } from "@dxos/ui-theme";
+var SYNTAX_NAME = "Syntax";
+var [createSyntaxContext, createSyntaxScope] = createContextScope(SYNTAX_NAME);
+var [SyntaxProvider, useSyntaxContext] = createSyntaxContext(SYNTAX_NAME);
+var SYNTAX_ROOT_NAME = "Syntax.Root";
+var SyntaxRoot = (props) => {
+  const { __scopeSyntax, children, language, source, replacer } = props;
+  const isJson = "data" in props;
+  const data = props.data;
+  const [filterText, setFilterText] = useState("");
+  const { filteredData, filterError } = useMemo(() => {
+    if (!isJson || !filterText.trim().length) {
+      return {
+        filteredData: data,
+        filterError: null
+      };
+    }
+    try {
+      return {
+        filteredData: JSONPath({
+          path: filterText,
+          json: data
+        }),
+        filterError: null
+      };
+    } catch (err) {
+      return {
+        filteredData: data,
+        filterError: err
+      };
+    }
+  }, [
+    isJson,
+    data,
+    filterText
+  ]);
+  return /* @__PURE__ */ React3.createElement(SyntaxProvider, {
+    scope: __scopeSyntax,
+    mode: isJson ? "json" : "text",
+    source,
+    language,
+    data,
+    filteredData,
+    filterText,
+    setFilterText,
+    filterError,
+    replacer
+  }, children);
 };
-var JsonFilter = ({ data: initialData, classNames, testId }) => {
-  var _effect = _useSignals2();
-  try {
-    const [data, setData] = useState(initialData);
-    const [text, setText] = useState("");
-    const [error, setError] = useState(null);
-    useEffect(() => {
-      if (!initialData || !text.trim().length) {
-        setData(initialData);
-      } else {
-        try {
-          setData(jp.query(initialData, text));
-          setError(null);
-        } catch (err) {
-          setData(initialData);
-          setError(err);
-        }
-      }
-    }, [
-      initialData,
-      text
-    ]);
-    return /* @__PURE__ */ React2.createElement("div", {
-      className: "flex flex-col grow overflow-hidden"
-    }, /* @__PURE__ */ React2.createElement(Input.Root, {
-      validationValence: error ? "error" : "success"
-    }, /* @__PURE__ */ React2.createElement(Input.TextInput, {
-      classNames: mx2("p-1 px-2 font-mono", error && "border-red-500"),
-      variant: "subdued",
-      value: text,
-      onChange: (event) => setText(event.target.value),
-      placeholder: "JSONPath (e.g., $.graph.nodes)"
-    })), /* @__PURE__ */ React2.createElement(SyntaxHighlighter, {
-      language: "json",
-      classNames: mx2("grow overflow-y-auto", classNames),
-      "data-testid": testId
-    }, JSON.stringify(data, null, 2)));
-  } finally {
-    _effect.f();
+SyntaxRoot.displayName = SYNTAX_ROOT_NAME;
+var SYNTAX_CONTENT_NAME = "Syntax.Content";
+var SyntaxContent = composable3(({ children, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ React3.createElement("div", {
+    ...composableProps2(props, {
+      classNames: "flex flex-col h-full min-h-0 overflow-hidden"
+    }),
+    ref: forwardedRef
+  }, children);
+});
+SyntaxContent.displayName = SYNTAX_CONTENT_NAME;
+var SYNTAX_FILTER_NAME = "Syntax.Filter";
+var SyntaxFilter = /* @__PURE__ */ forwardRef(({ __scopeSyntax, classNames, placeholder = "JSONPath (e.g., $.graph.nodes)" }, forwardedRef) => {
+  const { mode, filterText, setFilterText, filterError } = useSyntaxContext(SYNTAX_FILTER_NAME, __scopeSyntax);
+  if (mode !== "json") {
+    throw new Error(`\`${SYNTAX_FILTER_NAME}\` requires \`Syntax.Root\` to be in JSON mode (pass \`data\`).`);
+  }
+  return /* @__PURE__ */ React3.createElement(Input.Root, {
+    validationValence: filterError ? "error" : "success"
+  }, /* @__PURE__ */ React3.createElement(Input.TextInput, {
+    classNames: [
+      "p-1 px-2 font-mono",
+      filterError && "border-rose-500",
+      classNames
+    ],
+    variant: "subdued",
+    value: filterText,
+    placeholder,
+    onChange: (event) => setFilterText(event.target.value),
+    ref: forwardedRef
+  }));
+});
+SyntaxFilter.displayName = SYNTAX_FILTER_NAME;
+var SYNTAX_VIEWPORT_NAME = "Syntax.Viewport";
+var SyntaxViewport = composable3(({ children, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ React3.createElement(ScrollArea.Root, {
+    ...composableProps2(props),
+    thin: true,
+    ref: forwardedRef
+  }, /* @__PURE__ */ React3.createElement(ScrollArea.Viewport, null, children));
+});
+SyntaxViewport.displayName = SYNTAX_VIEWPORT_NAME;
+var SYNTAX_CODE_NAME = "Syntax.Code";
+var SyntaxCode = composable3(({ __scopeSyntax, testId, ...props }, forwardedRef) => {
+  const context = useSyntaxContext(SYNTAX_CODE_NAME, __scopeSyntax);
+  const merged = composableProps2(props, {
+    classNames: "py-1 px-2 text-sm"
+  });
+  if (context.mode === "json") {
+    return /* @__PURE__ */ React3.createElement(JsonHighlighter, {
+      ...merged,
+      data: context.filteredData,
+      replacer: context.replacer,
+      testId,
+      ref: forwardedRef
+    });
   }
+  return /* @__PURE__ */ React3.createElement(SyntaxHighlighter, {
+    ...merged,
+    language: context.language,
+    "data-testid": testId,
+    ref: forwardedRef
+  }, context.source ?? "");
+});
+SyntaxCode.displayName = SYNTAX_CODE_NAME;
+var Syntax = {
+  Root: SyntaxRoot,
+  Content: SyntaxContent,
+  Filter: SyntaxFilter,
+  Viewport: SyntaxViewport,
+  Code: SyntaxCode
 };
 export {
-  Json,
-  JsonFilter,
+  JsonHighlighter,
+  Syntax,
   SyntaxHighlighter,
-  createElement
+  createElement,
+  createSyntaxScope
 };
 //# sourceMappingURL=index.mjs.map

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';\nimport { mx } from '@dxos/react-ui-theme';\n\nimport { SyntaxHighlighter } from '../SyntaxHighlighter';\n\nexport type JsonProps = ThemedClassName<{ data?: any; testId?: string }>;\n\nexport const Json = ({ data, classNames, testId }: JsonProps) => {\n  return (\n    <SyntaxHighlighter language='json' classNames={['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={mx('p-1 px-2 font-mono', error && 'border-red-500')}\n          variant='subdued'\n          value={text}\n          onChange={(event) => setText(event.target.value)}\n          placeholder='JSONPath (e.g., $.graph.nodes)'\n        />\n      </Input.Root>\n      <SyntaxHighlighter language='json' classNames={mx('grow overflow-y-auto', classNames)} data-testid={testId}>\n        {JSON.stringify(data, null, 2)}\n      </SyntaxHighlighter>\n    </div>\n  );\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\n// eslint-disable-next-line no-restricted-imports\nimport createElement from 'react-syntax-highlighter/dist/esm/create-element';\n\nexport { createElement };\n\nexport * from './SyntaxHighlighter';\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport React from 'react';\nimport { type SyntaxHighlighterProps as NativeSyntaxHighlighterProps } from 'react-syntax-highlighter';\n// Using `light-async` version directly from dist to avoid any chance of the heavy one being loaded.\n// Lightweight version will load specific language parsers asynchronously.\n// eslint-disable-next-line no-restricted-imports\nimport NativeSyntaxHighlighter from 'react-syntax-highlighter/dist/esm/light-async';\n// eslint-disable-next-line no-restricted-imports\nimport { github as light, a11yDark as dark } from 'react-syntax-highlighter/dist/esm/styles/hljs';\n\nimport { type ThemedClassName, useThemeContext } from '@dxos/react-ui';\nimport { mx } from '@dxos/react-ui-theme';\n\nconst zeroWidthSpace = '\\u200b';\n\nexport type SyntaxHighlighterProps = ThemedClassName<\n  NativeSyntaxHighlighterProps & {\n    fallback?: string;\n  }\n>;\n\nlight.hljs.background = '';\ndark.hljs.background = '';\n\n/**\n * https://github.com/react-syntax-highlighter/react-syntax-highlighter\n */\nexport const SyntaxHighlighter = ({\n  classNames,\n  children,\n  fallback = zeroWidthSpace,\n  ...props\n}: SyntaxHighlighterProps) => {\n  const { themeMode } = useThemeContext();\n\n  return (\n    <NativeSyntaxHighlighter\n      className={mx('w-full p-0 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;AAC5C,SAASC,MAAAA,WAAU;;;ACJnB,OAAOC,mBAAmB;;;;ACD1B,OAAOC,WAAW;AAKlB,OAAOC,6BAA6B;AAEpC,SAASC,UAAUC,OAAOC,YAAYC,YAAY;AAElD,SAA+BC,uBAAuB;AACtD,SAASC,UAAU;AAEnB,IAAMC,iBAAiB;AAQvBC,MAAMC,KAAKC,aAAa;AACxBC,KAAKF,KAAKC,aAAa;AAKhB,IAAME,oBAAoB,CAAC,EAChCC,YACAC,UACAC,WAAWR,gBACX,GAAGS,MAAAA,MACoB;;;AACvB,UAAM,EAAEC,UAAS,IAAKC,gBAAAA;AAEtB,WACE,sBAAA,cAACC,yBAAAA;MACCC,WAAWC,GAAG,oEAAoER,UAAAA;MAClFS,OAAOL,cAAc,SAASN,OAAOH;MACpC,GAAGQ;OAGHF,YAAYC,QAAAA;;;;AAGnB;;;AFjCO,IAAMQ,OAAO,CAAC,EAAEC,MAAMC,YAAYC,OAAM,MAAa;;;AAC1D,WACE,gBAAAC,OAAA,cAACC,mBAAAA;MAAkBC,UAAS;MAAOJ,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,YAAY4B,IAAG,sBAAsBd,SAAS,gBAAA;MAC9Ce,SAAQ;MACRC,OAAOlB;MACPmB,UAAU,CAACC,UAAUnB,QAAQmB,MAAMC,OAAOH,KAAK;MAC/CI,aAAY;SAGhB,gBAAAhC,OAAA,cAACC,mBAAAA;MAAkBC,UAAS;MAAOJ,YAAY4B,IAAG,wBAAwB5B,UAAAA;MAAaK,eAAaJ;OACjGK,KAAKC,UAAUR,MAAM,MAAM,CAAA,CAAA,CAAA;;;;AAIpC;",
-  "names": ["jp", "React", "useEffect", "useState", "Input", "mx", "createElement", "React", "NativeSyntaxHighlighter", "github", "light", "a11yDark", "dark", "useThemeContext", "mx", "zeroWidthSpace", "light", "hljs", "background", "dark", "SyntaxHighlighter", "classNames", "children", "fallback", "props", "themeMode", "useThemeContext", "NativeSyntaxHighlighter", "className", "mx", "style", "Json", "data", "classNames", "testId", "React", "SyntaxHighlighter", "language", "data-testid", "JSON", "stringify", "JsonFilter", "initialData", "setData", "useState", "text", "setText", "error", "setError", "useEffect", "trim", "length", "jp", "query", "err", "div", "className", "Input", "Root", "validationValence", "TextInput", "mx", "variant", "value", "onChange", "event", "target", "placeholder"]
+  "sources": ["../../../src/JsonHighlighter/JsonHighlighter.tsx", "../../../src/SyntaxHighlighter/index.ts", "../../../src/SyntaxHighlighter/SyntaxHighlighter.tsx", "../../../src/Syntax/Syntax.tsx"],
+  "sourcesContent": ["//\n// Copyright 2025 DXOS.org\n//\n\nimport React from 'react';\n\nimport { composable } from '@dxos/ui-theme';\nimport { type CreateReplacerProps, createReplacer, safeStringify } from '@dxos/util';\n\nimport { SyntaxHighlighter, type SyntaxHighlighterProps } from '../SyntaxHighlighter';\n\nexport type JsonReplacer = CreateReplacerProps | ((key: string, value: any) => any);\n\nexport type JsonHighlighterProps = Omit<SyntaxHighlighterProps, 'children' | 'language'> & {\n  data?: any;\n  replacer?: JsonReplacer;\n  /** Indentation passed to `JSON.stringify`. Default: `2` (pretty-printed). Pass `0` for single-line output. */\n  indent?: number;\n  testId?: string;\n};\n\nconst resolveReplacer = (replacer?: JsonReplacer) => {\n  if (!replacer) {\n    return undefined;\n  }\n  return typeof replacer === 'function' ? replacer : createReplacer(replacer);\n};\n\n/**\n * Inline, non-scrolling JSON renderer.\n *\n * Thin wrapper around `SyntaxHighlighter` that stringifies `data` with an optional replacer.\n * `replacer` accepts either `CreateReplacerProps` (declarative truncation) or a raw\n * `JSON.stringify`-compatible function (for bespoke serialization).\n * For filtering and scroll behaviour, compose with the `Syntax.*` namespace.\n */\nexport const JsonHighlighter = composable<HTMLDivElement, JsonHighlighterProps>(\n  ({ data, replacer, indent = 2, testId, ...props }, forwardedRef) => {\n    return (\n      <SyntaxHighlighter {...props} language='json' data-testid={testId} ref={forwardedRef}>\n        {safeStringify(data, resolveReplacer(replacer), indent)}\n      </SyntaxHighlighter>\n    );\n  },\n);\n\nJsonHighlighter.displayName = 'JsonHighlighter';\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, { Children } 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 { Clipboard, 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 = Pick<\n  NaturalSyntaxHighlighterProps,\n  | 'language'\n  | 'renderer'\n  | 'showLineNumbers'\n  | 'showInlineLineNumbers'\n  | 'startingLineNumber'\n  | 'wrapLines'\n  | 'wrapLongLines'\n  | 'PreTag'\n> & {\n  themeStyle?: NaturalSyntaxHighlighterProps['style'];\n  fallback?: string;\n  copyButton?: boolean;\n};\n\n/**\n * Inline, non-scrolling wrapper around `react-syntax-highlighter`.\n *\n * Use directly for small snippets (e.g. inside markdown code blocks).\n * For scrollable panels, compose with `Syntax.Viewport`.\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    {\n      classNames,\n      className,\n      children,\n      role,\n      style,\n      themeStyle,\n      language = 'text',\n      fallback = zeroWidthSpace,\n      copyButton,\n      ...nativeProps\n    },\n    forwardedRef,\n  ) => {\n    const { themeMode } = useThemeContext();\n    const source = Children.toArray(children).join('') || fallback;\n\n    const hasCustomTheme = themeStyle && typeof themeStyle === 'object' && Object.keys(themeStyle).length > 0;\n    const prismTheme = hasCustomTheme ? themeStyle : themeMode === 'dark' ? dark : light;\n\n    return (\n      <div\n        {...composableProps(\n          { classNames, className, role, style },\n          {\n            role: 'none',\n            classNames: copyButton && 'relative group',\n          },\n        )}\n        ref={forwardedRef}\n      >\n        <NativeSyntaxHighlighter\n          language={languages[language as keyof typeof languages] || language}\n          style={prismTheme}\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          {source}\n        </NativeSyntaxHighlighter>\n\n        {copyButton && (\n          <div\n            role='none'\n            className='pointer-events-none absolute top-1 right-1 z-10 opacity-0 group-hover:opacity-100 focus-within:opacity-100'\n          >\n            <Clipboard.Provider>\n              <Clipboard.IconButton\n                value={source}\n                variant='ghost'\n                size={4}\n                classNames='pointer-events-auto aspect-square rounded-sm'\n              />\n            </Clipboard.Provider>\n          </div>\n        )}\n      </div>\n    );\n  },\n);\n\nSyntaxHighlighter.displayName = 'SyntaxHighlighter';\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport { createContextScope, type Scope } from '@radix-ui/react-context';\nimport { JSONPath } from 'jsonpath-plus';\nimport React, { type FC, type PropsWithChildren, forwardRef, useMemo, useState } from 'react';\n\nimport { Input, ScrollArea } from '@dxos/react-ui';\nimport { composable, composableProps } from '@dxos/ui-theme';\nimport { type ComposableProps } from '@dxos/ui-types';\n\nimport { JsonHighlighter, type JsonReplacer } from '../JsonHighlighter';\nimport { SyntaxHighlighter } from '../SyntaxHighlighter';\n\n//\n// Context\n//\n\nconst SYNTAX_NAME = 'Syntax';\n\ntype SyntaxContextValue = {\n  mode: 'text' | 'json';\n  // Text mode.\n  source?: string;\n  language?: string;\n  // JSON mode.\n  data?: any;\n  filteredData?: any;\n  filterText: string;\n  setFilterText: (text: string) => void;\n  filterError: Error | null;\n  replacer?: JsonReplacer;\n};\n\ntype ScopedProps<P> = P & { __scopeSyntax?: Scope };\n\nconst [createSyntaxContext, createSyntaxScope] = createContextScope(SYNTAX_NAME);\nconst [SyntaxProvider, useSyntaxContext] = createSyntaxContext<SyntaxContextValue>(SYNTAX_NAME);\n\n//\n// Root\n//\n\nconst SYNTAX_ROOT_NAME = 'Syntax.Root';\n\ntype SyntaxRootProps = PropsWithChildren<{\n  // Text mode.\n  language?: string;\n  source?: string;\n  // JSON mode (presence of the `data` prop selects JSON mode; `undefined` is still JSON).\n  data?: any;\n  /**\n   * `JSON.stringify` replacer applied to `data`. Use the function form to follow domain\n   * references (e.g. ECHO refs) by returning a transformed value at the root call. Keeps\n   * this package free of any domain-specific knowledge.\n   */\n  replacer?: JsonReplacer;\n}>;\n\n/**\n * Headless context provider. Selects JSON mode when the `data` prop is passed at all — even\n * `data={undefined}` — so loading states render an empty JSON view rather than flipping to\n * text mode (which would trip `Syntax.Filter`'s JSON-only guard). Mode is chosen by prop\n * presence, not value.\n */\nconst SyntaxRoot: FC<ScopedProps<SyntaxRootProps>> = (props) => {\n  const { __scopeSyntax, children, language, source, replacer } = props;\n  const isJson = 'data' in props;\n  const data = props.data;\n  const [filterText, setFilterText] = useState('');\n\n  const { filteredData, filterError } = useMemo<{ filteredData: any; filterError: Error | null }>(() => {\n    if (!isJson || !filterText.trim().length) {\n      return { filteredData: data, filterError: null };\n    }\n    try {\n      return { filteredData: JSONPath({ path: filterText, json: data }), filterError: null };\n    } catch (err) {\n      return { filteredData: data, filterError: err as Error };\n    }\n  }, [isJson, data, filterText]);\n\n  return (\n    <SyntaxProvider\n      scope={__scopeSyntax}\n      mode={isJson ? 'json' : 'text'}\n      source={source}\n      language={language}\n      data={data}\n      filteredData={filteredData}\n      filterText={filterText}\n      setFilterText={setFilterText}\n      filterError={filterError}\n      replacer={replacer}\n    >\n      {children}\n    </SyntaxProvider>\n  );\n};\n\nSyntaxRoot.displayName = SYNTAX_ROOT_NAME;\n\n//\n// Content\n//\n\nconst SYNTAX_CONTENT_NAME = 'Syntax.Content';\n\ntype SyntaxContentProps = ComposableProps;\n\n/** Flex-column layout container for composite parts. */\nconst SyntaxContent = composable<HTMLDivElement, SyntaxContentProps>(({ 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\nSyntaxContent.displayName = SYNTAX_CONTENT_NAME;\n\n//\n// Filter\n//\n\nconst SYNTAX_FILTER_NAME = 'Syntax.Filter';\n\ntype SyntaxFilterProps = ComposableProps<{\n  placeholder?: string;\n}>;\n\n/** JSONPath filter input. Only meaningful when `Syntax.Root` is in JSON mode. */\nconst SyntaxFilter = forwardRef<HTMLInputElement, ScopedProps<SyntaxFilterProps>>(\n  ({ __scopeSyntax, classNames, placeholder = 'JSONPath (e.g., $.graph.nodes)' }, forwardedRef) => {\n    const { mode, filterText, setFilterText, filterError } = useSyntaxContext(SYNTAX_FILTER_NAME, __scopeSyntax);\n    if (mode !== 'json') {\n      throw new Error(`\\`${SYNTAX_FILTER_NAME}\\` requires \\`Syntax.Root\\` to be in JSON mode (pass \\`data\\`).`);\n    }\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\nSyntaxFilter.displayName = SYNTAX_FILTER_NAME;\n\n//\n// Viewport\n//\n\nconst SYNTAX_VIEWPORT_NAME = 'Syntax.Viewport';\n\ntype SyntaxViewportProps = ComposableProps;\n\n/** Optional scroll wrapper. Compose around `Syntax.Code` to make it scrollable. */\nconst SyntaxViewport = composable<HTMLDivElement, SyntaxViewportProps>(({ children, ...props }, forwardedRef) => {\n  return (\n    <ScrollArea.Root {...composableProps(props)} thin ref={forwardedRef}>\n      <ScrollArea.Viewport>{children}</ScrollArea.Viewport>\n    </ScrollArea.Root>\n  );\n});\n\nSyntaxViewport.displayName = SYNTAX_VIEWPORT_NAME;\n\n//\n// Code\n//\n\nconst SYNTAX_CODE_NAME = 'Syntax.Code';\n\ntype SyntaxCodeProps = ComposableProps<{\n  testId?: string;\n}>;\n\n/** Highlighted code leaf. Reads source/data from `Syntax.Root` context. */\nconst SyntaxCode = composable<HTMLDivElement, ScopedProps<SyntaxCodeProps>>(\n  ({ __scopeSyntax, testId, ...props }, forwardedRef) => {\n    const context = useSyntaxContext(SYNTAX_CODE_NAME, __scopeSyntax);\n    const merged = composableProps(props, { classNames: 'py-1 px-2 text-sm' });\n\n    if (context.mode === 'json') {\n      return (\n        <JsonHighlighter\n          {...merged}\n          data={context.filteredData}\n          replacer={context.replacer}\n          testId={testId}\n          ref={forwardedRef}\n        />\n      );\n    }\n\n    return (\n      <SyntaxHighlighter {...merged} language={context.language} data-testid={testId} ref={forwardedRef}>\n        {context.source ?? ''}\n      </SyntaxHighlighter>\n    );\n  },\n);\n\nSyntaxCode.displayName = SYNTAX_CODE_NAME;\n\n//\n// Syntax\n//\n\nexport const Syntax = {\n  Root: SyntaxRoot,\n  Content: SyntaxContent,\n  Filter: SyntaxFilter,\n  Viewport: SyntaxViewport,\n  Code: SyntaxCode,\n};\n\nexport { createSyntaxScope };\n\nexport type { SyntaxRootProps, SyntaxContentProps, SyntaxFilterProps, SyntaxViewportProps, SyntaxCodeProps };\n"],
+  "mappings": "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",
+  "names": ["React", "composable", "createReplacer", "safeStringify", "createElement", "React", "Children", "NativeSyntaxHighlighter", "coldarkDark", "dark", "coldarkCold", "light", "Clipboard", "useThemeContext", "composable", "composableProps", "zeroWidthSpace", "languages", "js", "ts", "SyntaxHighlighter", "classNames", "className", "children", "role", "style", "themeStyle", "language", "fallback", "copyButton", "nativeProps", "forwardedRef", "themeMode", "source", "toArray", "join", "hasCustomTheme", "Object", "keys", "length", "prismTheme", "div", "ref", "customStyle", "background", "border", "boxShadow", "padding", "margin", "Provider", "IconButton", "value", "variant", "size", "displayName", "resolveReplacer", "replacer", "undefined", "createReplacer", "JsonHighlighter", "composable", "data", "indent", "testId", "props", "forwardedRef", "React", "SyntaxHighlighter", "language", "data-testid", "ref", "safeStringify", "displayName", "createContextScope", "JSONPath", "React", "forwardRef", "useMemo", "useState", "Input", "ScrollArea", "composable", "composableProps", "SYNTAX_NAME", "createSyntaxContext", "createSyntaxScope", "createContextScope", "SyntaxProvider", "useSyntaxContext", "SYNTAX_ROOT_NAME", "SyntaxRoot", "props", "__scopeSyntax", "children", "language", "source", "replacer", "isJson", "data", "filterText", "setFilterText", "useState", "filteredData", "filterError", "useMemo", "trim", "length", "JSONPath", "path", "json", "err", "React", "scope", "mode", "displayName", "SYNTAX_CONTENT_NAME", "SyntaxContent", "composable", "forwardedRef", "div", "composableProps", "classNames", "ref", "SYNTAX_FILTER_NAME", "SyntaxFilter", "forwardRef", "placeholder", "Error", "Input", "Root", "validationValence", "TextInput", "variant", "value", "onChange", "event", "target", "SYNTAX_VIEWPORT_NAME", "SyntaxViewport", "ScrollArea", "thin", "Viewport", "SYNTAX_CODE_NAME", "SyntaxCode", "testId", "context", "merged", "JsonHighlighter", "SyntaxHighlighter", "data-testid", "Syntax", "Content", "Filter", "Code"]
 }

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":7262,"imports":[{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"path":"jsonpath","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"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":6346},"dist/lib/node-esm/index.mjs":{"imports":[{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"path":"jsonpath","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"react-syntax-highlighter/dist/esm/create-element","kind":"import-statement","external":true},{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react-syntax-highlighter/dist/esm/light-async","kind":"import-statement","external":true},{"path":"react-syntax-highlighter/dist/esm/styles/hljs","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"exports":["Json","JsonFilter","SyntaxHighlighter","createElement"],"entryPoint":"src/index.ts","inputs":{"src/Json/Json.tsx":{"bytesInOutput":1964},"src/SyntaxHighlighter/index.ts":{"bytesInOutput":78},"src/SyntaxHighlighter/SyntaxHighlighter.tsx":{"bytesInOutput":956},"src/Json/index.ts":{"bytesInOutput":0},"src/index.ts":{"bytesInOutput":0}},"bytes":3323}}}
+{"inputs":{"src/SyntaxHighlighter/SyntaxHighlighter.tsx":{"bytes":10001,"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":871,"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/JsonHighlighter/JsonHighlighter.tsx":{"bytes":4584,"imports":[{"path":"react","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/JsonHighlighter/index.ts":{"bytes":395,"imports":[{"path":"src/JsonHighlighter/JsonHighlighter.tsx","kind":"import-statement","original":"./JsonHighlighter"}],"format":"esm"},"src/Syntax/Syntax.tsx":{"bytes":19872,"imports":[{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"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":"src/JsonHighlighter/index.ts","kind":"import-statement","original":"../JsonHighlighter"},{"path":"src/SyntaxHighlighter/index.ts","kind":"import-statement","original":"../SyntaxHighlighter"}],"format":"esm"},"src/Syntax/index.ts":{"bytes":370,"imports":[{"path":"src/Syntax/Syntax.tsx","kind":"import-statement","original":"./Syntax"}],"format":"esm"},"src/index.ts":{"bytes":590,"imports":[{"path":"src/JsonHighlighter/index.ts","kind":"import-statement","original":"./JsonHighlighter"},{"path":"src/Syntax/index.ts","kind":"import-statement","original":"./Syntax"},{"path":"src/SyntaxHighlighter/index.ts","kind":"import-statement","original":"./SyntaxHighlighter"}],"format":"esm"}},"outputs":{"dist/lib/node-esm/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":18616},"dist/lib/node-esm/index.mjs":{"imports":[{"path":"react","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},{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"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}],"exports":["JsonHighlighter","Syntax","SyntaxHighlighter","createElement","createSyntaxScope"],"entryPoint":"src/index.ts","inputs":{"src/JsonHighlighter/JsonHighlighter.tsx":{"bytesInOutput":681},"src/SyntaxHighlighter/index.ts":{"bytesInOutput":78},"src/SyntaxHighlighter/SyntaxHighlighter.tsx":{"bytesInOutput":2013},"src/index.ts":{"bytesInOutput":0},"src/Syntax/Syntax.tsx":{"bytesInOutput":4138}},"bytes":7333}}}

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

@@ -0,0 +1,23 @@
+import React from 'react';
+import { type CreateReplacerProps } from '@dxos/util';
+import { type SyntaxHighlighterProps } from '../SyntaxHighlighter';
+export type JsonReplacer = CreateReplacerProps | ((key: string, value: any) => any);
+export type JsonHighlighterProps = Omit<SyntaxHighlighterProps, 'children' | 'language'> & {
+    data?: any;
+    replacer?: JsonReplacer;
+    /** Indentation passed to `JSON.stringify`. Default: `2` (pretty-printed). Pass `0` for single-line output. */
+    indent?: number;
+    testId?: string;
+};
+/**
+ * Inline, non-scrolling JSON renderer.
+ *
+ * Thin wrapper around `SyntaxHighlighter` that stringifies `data` with an optional replacer.
+ * `replacer` accepts either `CreateReplacerProps` (declarative truncation) or a raw
+ * `JSON.stringify`-compatible function (for bespoke serialization).
+ * For filtering and scroll behaviour, compose with the `Syntax.*` namespace.
+ */
+export declare const JsonHighlighter: React.ForwardRefExoticComponent<Omit<JsonHighlighterProps, "className"> & {
+    classNames?: import("@dxos/ui-types").ClassNameValue;
+} & Pick<React.HTMLAttributes<Element>, "children" | "className" | "role" | "style"> & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=JsonHighlighter.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"JsonHighlighter.d.ts","sourceRoot":"","sources":["../../../../src/JsonHighlighter/JsonHighlighter.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,KAAK,mBAAmB,EAAiC,MAAM,YAAY,CAAC;AAErF,OAAO,EAAqB,KAAK,sBAAsB,EAAE,MAAM,sBAAsB,CAAC;AAEtF,MAAM,MAAM,YAAY,GAAG,mBAAmB,GAAG,CAAC,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,GAAG,CAAC,CAAC;AAEpF,MAAM,MAAM,oBAAoB,GAAG,IAAI,CAAC,sBAAsB,EAAE,UAAU,GAAG,UAAU,CAAC,GAAG;IACzF,IAAI,CAAC,EAAE,GAAG,CAAC;IACX,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,8GAA8G;IAC9G,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AASF;;;;;;;GAOG;AACH,eAAO,MAAM,eAAe;;2HAQ3B,CAAC"}

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

@@ -0,0 +1,14 @@
+import { type StoryObj } from '@storybook/react-vite';
+import { JsonHighlighter } from './JsonHighlighter';
+declare const meta: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<Omit<import("./JsonHighlighter").JsonHighlighterProps, "className"> & {
+        classNames?: import("@dxos/ui-types").ClassNameValue;
+    } & Pick<import("react").HTMLAttributes<Element>, "children" | "className" | "role" | "style"> & import("react").RefAttributes<HTMLDivElement>>;
+    decorators: import("@storybook/react").Decorator[];
+};
+export default meta;
+type Story = StoryObj<typeof JsonHighlighter>;
+export declare const Default: Story;
+export declare const Cycle: Story;
+//# sourceMappingURL=JsonHighlighter.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"JsonHighlighter.stories.d.ts","sourceRoot":"","sources":["../../../../src/JsonHighlighter/JsonHighlighter.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAa,KAAK,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAKjE,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAmCpD,QAAA,MAAM,IAAI;;;;;;CAI8B,CAAC;eAE1B,IAAI;AAEnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,eAAe,CAAC,CAAC;AAE9C,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAInB,CAAC"}

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

@@ -0,0 +1,2 @@
+export * from './JsonHighlighter';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/JsonHighlighter/index.ts"],"names":[],"mappings":"AAIA,cAAc,mBAAmB,CAAC"}

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

@@ -0,0 +1,49 @@
+import { type Scope } from '@radix-ui/react-context';
+import React, { type FC, type PropsWithChildren } from 'react';
+import { type ComposableProps } from '@dxos/ui-types';
+import { type JsonReplacer } from '../JsonHighlighter';
+type ScopedProps<P> = P & {
+    __scopeSyntax?: Scope;
+};
+declare const createSyntaxScope: import("@radix-ui/react-context").CreateScope;
+type SyntaxRootProps = PropsWithChildren<{
+    language?: string;
+    source?: string;
+    data?: any;
+    /**
+     * `JSON.stringify` replacer applied to `data`. Use the function form to follow domain
+     * references (e.g. ECHO refs) by returning a transformed value at the root call. Keeps
+     * this package free of any domain-specific knowledge.
+     */
+    replacer?: JsonReplacer;
+}>;
+type SyntaxContentProps = ComposableProps;
+type SyntaxFilterProps = ComposableProps<{
+    placeholder?: string;
+}>;
+type SyntaxViewportProps = ComposableProps;
+type SyntaxCodeProps = ComposableProps<{
+    testId?: string;
+}>;
+export declare const Syntax: {
+    Root: FC<ScopedProps<SyntaxRootProps>>;
+    Content: React.ForwardRefExoticComponent<Omit<SyntaxContentProps, "className"> & {
+        classNames?: import("@dxos/ui-types").ClassNameValue;
+    } & Pick<React.HTMLAttributes<Element>, "children" | "className" | "role" | "style"> & React.RefAttributes<HTMLDivElement>>;
+    Filter: React.ForwardRefExoticComponent<Omit<{
+        placeholder?: string;
+    }, "className"> & {
+        classNames?: import("@dxos/ui-types").ClassNameValue;
+    } & Pick<React.HTMLAttributes<Element>, "children" | "className" | "role" | "style"> & {
+        __scopeSyntax?: Scope;
+    } & React.RefAttributes<HTMLInputElement>>;
+    Viewport: React.ForwardRefExoticComponent<Omit<SyntaxViewportProps, "className"> & {
+        classNames?: import("@dxos/ui-types").ClassNameValue;
+    } & Pick<React.HTMLAttributes<Element>, "children" | "className" | "role" | "style"> & React.RefAttributes<HTMLDivElement>>;
+    Code: React.ForwardRefExoticComponent<Omit<ScopedProps<SyntaxCodeProps>, "className"> & {
+        classNames?: import("@dxos/ui-types").ClassNameValue;
+    } & Pick<React.HTMLAttributes<Element>, "children" | "className" | "role" | "style"> & React.RefAttributes<HTMLDivElement>>;
+};
+export { createSyntaxScope };
+export type { SyntaxRootProps, SyntaxContentProps, SyntaxFilterProps, SyntaxViewportProps, SyntaxCodeProps };
+//# sourceMappingURL=Syntax.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Syntax.d.ts","sourceRoot":"","sources":["../../../../src/Syntax/Syntax.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAsB,KAAK,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAEzE,OAAO,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,KAAK,iBAAiB,EAAiC,MAAM,OAAO,CAAC;AAI9F,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAEtD,OAAO,EAAmB,KAAK,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAuBxE,KAAK,WAAW,CAAC,CAAC,IAAI,CAAC,GAAG;IAAE,aAAa,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAEpD,QAAA,MAA4B,iBAAiB,+CAAmC,CAAC;AASjF,KAAK,eAAe,GAAG,iBAAiB,CAAC;IAEvC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,IAAI,CAAC,EAAE,GAAG,CAAC;IACX;;;;OAIG;IACH,QAAQ,CAAC,EAAE,YAAY,CAAC;CACzB,CAAC,CAAC;AAmDH,KAAK,kBAAkB,GAAG,eAAe,CAAC;AAmB1C,KAAK,iBAAiB,GAAG,eAAe,CAAC;IACvC,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC,CAAC;AAiCH,KAAK,mBAAmB,GAAG,eAAe,CAAC;AAmB3C,KAAK,eAAe,GAAG,eAAe,CAAC;IACrC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC,CAAC;AAkCH,eAAO,MAAM,MAAM;IACjB,IAAI;IACJ,OAAO;;;IACP,MAAM;sBA5FQ,MAAM;;;;wBA9FsB,KAAK;;IA2L/C,QAAQ;;;IACR,IAAI;;;CACL,CAAC;AAEF,OAAO,EAAE,iBAAiB,EAAE,CAAC;AAE7B,YAAY,EAAE,eAAe,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,eAAe,EAAE,CAAC"}

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

@@ -0,0 +1,23 @@
+import { type StoryObj } from '@storybook/react-vite';
+import React from 'react';
+declare const meta: {
+    title: string;
+    component: React.FC<{
+        language?: string;
+        source?: string;
+        data?: any;
+        replacer?: import("..").JsonReplacer;
+    } & {
+        children?: React.ReactNode | undefined;
+    } & {
+        __scopeSyntax?: import("@radix-ui/react-context").Scope;
+    }>;
+    decorators: import("@storybook/react").Decorator[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+/** JSON composite with filter and scrolling viewport. */
+export declare const Json: Story;
+/** Text composite (TypeScript source) with scrolling viewport and no filter. */
+export declare const Text: Story;
+//# sourceMappingURL=Syntax.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Syntax.stories.d.ts","sourceRoot":"","sources":["../../../../src/Syntax/Syntax.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAa,KAAK,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,KAAK,MAAM,OAAO,CAAC;AA8C1B,QAAA,MAAM,IAAI;;;;;;;;;;;;;CAIM,CAAC;eAEF,IAAI;AAEnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,yDAAyD;AACzD,eAAO,MAAM,IAAI,EAAE,KAelB,CAAC;AAEF,gFAAgF;AAChF,eAAO,MAAM,IAAI,EAAE,KAkBlB,CAAC"}

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

@@ -0,0 +1,2 @@
+export * from './Syntax';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Syntax/index.ts"],"names":[],"mappings":"AAIA,cAAc,UAAU,CAAC"}

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

@@ -1,11 +1,23 @@
 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 = Pick<NaturalSyntaxHighlighterProps, 'language' | 'renderer' | 'showLineNumbers' | 'showInlineLineNumbers' | 'startingLineNumber' | 'wrapLines' | 'wrapLongLines' | 'PreTag'> & {
+    themeStyle?: NaturalSyntaxHighlighterProps['style'];
     fallback?: string;
-}>;
+    copyButton?: boolean;
+};
 /**
+ * Inline, non-scrolling wrapper around `react-syntax-highlighter`.
+ *
+ * Use directly for small snippets (e.g. inside markdown code blocks).
+ * For scrollable panels, compose with `Syntax.Viewport`.
+ *
+ * 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>, "children" | "className" | "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,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,KAAK,sBAAsB,IAAI,6BAA6B,EAAE,MAAM,0BAA0B,CAAC;AAcxG,MAAM,MAAM,sBAAsB,GAAG,IAAI,CACvC,6BAA6B,EAC3B,UAAU,GACV,UAAU,GACV,iBAAiB,GACjB,uBAAuB,GACvB,oBAAoB,GACpB,WAAW,GACX,eAAe,GACf,QAAQ,CACX,GAAG;IACF,UAAU,CAAC,EAAE,6BAA6B,CAAC,OAAO,CAAC,CAAC;IACpD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,iBAAiB;;2HAmE7B,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>, "children" | "className" | "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;