@dxos/react-ui-syntax-highlighter 0.8.4-main.9be5663bfe → 0.8.4-main.abd8ff62ef

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

@@ -1,40 +1,43 @@
 import { createRequire } from 'node:module';const require = createRequire(import.meta.url);
 
-// src/Json/Json.tsx
-import { JSONPath } from "jsonpath-plus";
-import React2, { createContext, forwardRef, useContext, useEffect, useMemo, useState } from "react";
-import { Input } from "@dxos/react-ui";
-import { composable as composable2, composableProps as composableProps2 } from "@dxos/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 React from "react";
+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 { ScrollArea, useThemeContext } from "@dxos/react-ui";
+import { Clipboard, useThemeContext } from "@dxos/react-ui";
 import { composable, composableProps } from "@dxos/ui-theme";
 var zeroWidthSpace = "\u200B";
 var languages = {
   js: "javascript",
   ts: "typescript"
 };
-var SyntaxHighlighter = composable(({ children, language = "text", fallback = zeroWidthSpace, classNames, className, style, ...nativeProps }, forwardedRef) => {
+var SyntaxHighlighter = composable(({ classNames, className, children, role, style, themeStyle, language = "text", fallback = zeroWidthSpace, copyButton, ...nativeProps }, forwardedRef) => {
   const { themeMode } = useThemeContext();
-  return /* @__PURE__ */ React.createElement(ScrollArea.Root, {
+  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
+      className,
+      role,
+      style
+    }, {
+      role: "none",
+      classNames: copyButton && "relative group"
     }),
-    thin: true,
     ref: forwardedRef
-  }, /* @__PURE__ */ React.createElement(ScrollArea.Viewport, null, /* @__PURE__ */ React.createElement("div", {
-    role: "none"
   }, /* @__PURE__ */ React.createElement(NativeSyntaxHighlighter, {
     language: languages[language] || language,
-    style: style ?? (themeMode === "dark" ? dark : light),
+    style: prismTheme,
     customStyle: {
       background: "unset",
       border: "none",
@@ -43,83 +46,109 @@ var SyntaxHighlighter = composable(({ children, language = "text", fallback = ze
       margin: 0
     },
     ...nativeProps
-  }, children || fallback))));
+  }, 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 JsonContext = /* @__PURE__ */ createContext(null);
-var useJsonContext = (consumerName) => {
-  const context = useContext(JsonContext);
-  if (!context) {
-    throw new Error(`\`${consumerName}\` must be used within \`Json.Root\`.`);
+// src/JsonHighlighter/JsonHighlighter.tsx
+var resolveReplacer = (replacer) => {
+  if (!replacer) {
+    return void 0;
   }
-  return context;
+  return typeof replacer === "function" ? replacer : createReplacer(replacer);
 };
-var useOptionalJsonContext = () => {
-  return useContext(JsonContext);
-};
-var JSON_ROOT_NAME = "Json.Root";
-var JsonRoot = /* @__PURE__ */ forwardRef(({ children, data, replacer }, _forwardedRef) => {
+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, setFilteredData] = useState(data);
-  const [filterError, setFilterError] = useState(null);
-  useEffect(() => {
-    if (!filterText.trim().length) {
-      setFilteredData(data);
-      setFilterError(null);
-    } else {
-      try {
-        setFilteredData(JSONPath({
+  const { filteredData, filterError } = useMemo(() => {
+    if (!isJson || !filterText.trim().length) {
+      return {
+        filteredData: data,
+        filterError: null
+      };
+    }
+    try {
+      return {
+        filteredData: JSONPath({
           path: filterText,
           json: data
-        }));
-        setFilterError(null);
-      } catch (err) {
-        setFilteredData(data);
-        setFilterError(err);
-      }
+        }),
+        filterError: null
+      };
+    } catch (err) {
+      return {
+        filteredData: data,
+        filterError: err
+      };
     }
   }, [
+    isJson,
     data,
     filterText
   ]);
-  const context = useMemo(() => ({
+  return /* @__PURE__ */ React3.createElement(SyntaxProvider, {
+    scope: __scopeSyntax,
+    mode: isJson ? "json" : "text",
+    source,
+    language,
     data,
     filteredData,
     filterText,
     setFilterText,
     filterError,
     replacer
-  }), [
-    data,
-    filteredData,
-    filterText,
-    setFilterText,
-    filterError,
-    replacer
-  ]);
-  return /* @__PURE__ */ React2.createElement(JsonContext.Provider, {
-    value: context
   }, children);
-});
-JsonRoot.displayName = JSON_ROOT_NAME;
-var JSON_CONTENT_NAME = "Json.Content";
-var JsonContent = composable2(({ children, ...props }, forwardedRef) => {
-  return /* @__PURE__ */ React2.createElement("div", {
+};
+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);
 });
-JsonContent.displayName = JSON_CONTENT_NAME;
-var JSON_FILTER_NAME = "Json.Filter";
-var JsonFilter = /* @__PURE__ */ forwardRef(({ classNames, placeholder = "JSONPath (e.g., $.graph.nodes)" }, forwardedRef) => {
-  const { filterText, setFilterText, filterError } = useJsonContext(JSON_FILTER_NAME);
-  return /* @__PURE__ */ React2.createElement(Input.Root, {
+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__ */ React2.createElement(Input.TextInput, {
+  }, /* @__PURE__ */ React3.createElement(Input.TextInput, {
     classNames: [
       "p-1 px-2 font-mono",
       filterError && "border-rose-500",
@@ -132,31 +161,51 @@ var JsonFilter = /* @__PURE__ */ forwardRef(({ classNames, placeholder = "JSONPa
     ref: forwardedRef
   }));
 });
-JsonFilter.displayName = JSON_FILTER_NAME;
-var JSON_DATA_NAME = "Json.Data";
-var JsonData = composable2(({ data: dataProp, replacer: replacerProp, testId, ...props }, forwardedRef) => {
-  const context = useOptionalJsonContext();
-  const data = dataProp ?? context?.filteredData;
-  const replacer = replacerProp ?? context?.replacer;
-  return /* @__PURE__ */ React2.createElement(SyntaxHighlighter, {
-    ...composableProps2(props, {
-      classNames: "flex-1 min-h-0 w-full py-1 px-2 overflow-y-auto text-sm"
-    }),
-    language: "json",
+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
-  }, safeStringify(data, replacer && createReplacer(replacer), 2));
+  }, context.source ?? "");
 });
-JsonData.displayName = JSON_DATA_NAME;
-var Json = {
-  Root: JsonRoot,
-  Content: JsonContent,
-  Filter: JsonFilter,
-  Data: JsonData
+SyntaxCode.displayName = SYNTAX_CODE_NAME;
+var Syntax = {
+  Root: SyntaxRoot,
+  Content: SyntaxContent,
+  Filter: SyntaxFilter,
+  Viewport: SyntaxViewport,
+  Code: SyntaxCode
 };
 export {
-  Json,
+  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\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"]
+  "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":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}}}
+{"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,9 +1,16 @@
 import React from 'react';
 import { type SyntaxHighlighterProps as NaturalSyntaxHighlighterProps } from 'react-syntax-highlighter';
-export type SyntaxHighlighterProps = NaturalSyntaxHighlighterProps & {
+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.
  *
@@ -12,5 +19,5 @@ export type SyntaxHighlighterProps = NaturalSyntaxHighlighterProps & {
  */
 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>>;
+} & 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,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"}
+{"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"}