@dxos/react-ui-syntax-highlighter 0.8.4-main.d05673bc65 → 0.8.4-main.e00bdcdb52

package/dist/lib/browser/index.mjs

@@ -1,29 +1,41 @@
-// src/Json/Json.tsx
-import { JSONPath } from "jsonpath-plus";
-import React2, { forwardRef, useEffect, useState } from "react";
-import { Input } from "@dxos/react-ui";
+// 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 { mx } from "@dxos/ui-theme";
+import { Clipboard, useThemeContext } from "@dxos/react-ui";
+import { composable, composableProps } from "@dxos/ui-theme";
 var zeroWidthSpace = "\u200B";
-var SyntaxHighlighter = ({ classNames, children, language = "text", fallback = zeroWidthSpace, ...props }) => {
+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();
-  return /* @__PURE__ */ React.createElement(ScrollArea.Root, {
-    thin: true,
-    classNames: mx("p1", classNames)
-  }, /* @__PURE__ */ React.createElement(ScrollArea.Viewport, null, /* @__PURE__ */ React.createElement("div", {
-    role: "none"
+  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: themeMode === "dark" ? dark : light,
+    style: prismTheme,
     customStyle: {
       background: "unset",
       border: "none",
@@ -31,80 +43,167 @@ var SyntaxHighlighter = ({ classNames, children, language = "text", fallback = z
       padding: 0,
       margin: 0
     },
-    ...props
-  }, children || fallback))));
-};
-var languages = {
-  js: "javascript",
-  ts: "typescript"
-};
+    ...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 = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
-  if (props.filter) {
-    return /* @__PURE__ */ React2.createElement(JsonFilter, props);
+// src/JsonHighlighter/JsonHighlighter.tsx
+var resolveReplacer = (replacer) => {
+  if (!replacer) {
+    return void 0;
   }
-  const { classNames, data, replacer, testId } = props;
+  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",
-    classNames: [
-      "w-full overflow-y-auto text-sm",
-      classNames
-    ],
     "data-testid": testId,
     ref: forwardedRef
-  }, safeStringify(data, replacer && createReplacer(replacer), 2));
+  }, safeStringify(data, resolveReplacer(replacer), indent));
 });
-var JsonFilter = /* @__PURE__ */ forwardRef(({ classNames, data: initialData, replacer, testId }, forwardedRef) => {
-  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(JSONPath({
-          path: text,
-          json: initialData
-        }));
-        setError(null);
-      } catch (err) {
-        setData(initialData);
-        setError(err);
-      }
+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
+      };
     }
   }, [
-    initialData,
-    text
+    isJson,
+    data,
+    filterText
   ]);
-  return /* @__PURE__ */ React2.createElement("div", {
-    className: "flex flex-col h-full overflow-hidden",
+  return /* @__PURE__ */ React3.createElement(SyntaxProvider, {
+    scope: __scopeSyntax,
+    mode: isJson ? "json" : "text",
+    source,
+    language,
+    data,
+    filteredData,
+    filterText,
+    setFilterText,
+    filterError,
+    replacer
+  }, children);
+};
+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
-  }, /* @__PURE__ */ React2.createElement(Input.Root, {
-    validationValence: error ? "error" : "success"
-  }, /* @__PURE__ */ React2.createElement(Input.TextInput, {
+  }, 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",
-      error && "border-rose-500"
-    ],
-    variant: "subdued",
-    value: text,
-    placeholder: "JSONPath (e.g., $.graph.nodes)",
-    onChange: (event) => setText(event.target.value)
-  })), /* @__PURE__ */ React2.createElement(SyntaxHighlighter, {
-    language: "json",
-    classNames: [
-      "w-full overflow-y-auto text-sm",
+      filterError && "border-rose-500",
       classNames
     ],
-    "data-testid": testId
-  }, safeStringify(data, replacer && createReplacer(replacer), 2)));
+    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/browser/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, { forwardRef, useEffect, useState } from 'react';\n\nimport { Input, type ThemedClassName } from '@dxos/react-ui';\nimport { type CreateReplacerProps, createReplacer, safeStringify } from '@dxos/util';\n\nimport { SyntaxHighlighter } from '../SyntaxHighlighter';\n\nexport type JsonProps = ThemedClassName<{\n  data?: any;\n  filter?: boolean;\n  replacer?: CreateReplacerProps;\n  testId?: string;\n}>;\n\nexport const Json = forwardRef<HTMLDivElement, JsonProps>((props, forwardedRef) => {\n  if (props.filter) {\n    return <JsonFilter {...props} />;\n  }\n\n  const { classNames, data, replacer, testId } = props;\n  return (\n    <SyntaxHighlighter\n      language='json'\n      classNames={['w-full overflow-y-auto text-sm', classNames]}\n      data-testid={testId}\n      ref={forwardedRef}\n    >\n      {safeStringify(data, replacer && createReplacer(replacer), 2)}\n    </SyntaxHighlighter>\n  );\n});\n\nexport const JsonFilter = forwardRef<HTMLDivElement, JsonProps>(\n  ({ classNames, data: initialData, replacer, testId }, forwardedRef) => {\n    const [data, setData] = useState(initialData);\n    const [text, setText] = useState('');\n    const [error, setError] = useState<Error | null>(null);\n\n    useEffect(() => {\n      if (!initialData || !text.trim().length) {\n        setData(initialData);\n      } else {\n        try {\n          setData(JSONPath({ path: text, json: initialData }));\n          setError(null);\n        } catch (err) {\n          setData(initialData);\n          setError(err as Error);\n        }\n      }\n    }, [initialData, text]); // TODO(burdon): Need structural diff.\n\n    return (\n      <div className='flex flex-col h-full overflow-hidden' ref={forwardedRef}>\n        <Input.Root validationValence={error ? 'error' : 'success'}>\n          <Input.TextInput\n            classNames={['p-1 px-2 font-mono', error && 'border-rose-500']}\n            variant='subdued'\n            value={text}\n            placeholder='JSONPath (e.g., $.graph.nodes)'\n            onChange={(event) => setText(event.target.value)}\n          />\n        </Input.Root>\n        <SyntaxHighlighter\n          language='json'\n          classNames={['w-full overflow-y-auto text-sm', classNames]}\n          data-testid={testId}\n        >\n          {safeStringify(data, replacer && createReplacer(replacer), 2)}\n        </SyntaxHighlighter>\n      </div>\n    );\n  },\n);\n", "//\n// Copyright 2024 DXOS.org\n//\n\n// eslint-disable-next-line no-restricted-imports\nimport createElement from 'react-syntax-highlighter/dist/esm/create-element';\n\nexport { createElement };\n\nexport * from './SyntaxHighlighter';\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport React from 'react';\nimport { type SyntaxHighlighterProps as NaturalSyntaxHighlighterProps } from 'react-syntax-highlighter';\nimport NativeSyntaxHighlighter from 'react-syntax-highlighter/dist/esm/prism-async-light';\nimport { coldarkDark as dark, coldarkCold as light } from 'react-syntax-highlighter/dist/esm/styles/prism';\n\nimport { ScrollArea, type ThemedClassName, useThemeContext } from '@dxos/react-ui';\nimport { mx } from '@dxos/ui-theme';\n\nconst zeroWidthSpace = '\\u200b';\n\nexport type SyntaxHighlighterProps = ThemedClassName<\n  NaturalSyntaxHighlighterProps & {\n    fallback?: string;\n  }\n>;\n\n/**\n * NOTE: Using `light-async` version directly from dist to avoid any chance of the heavy one being loaded.\n * The lightweight version will load specific language parsers asynchronously.\n *\n * https://github.com/react-syntax-highlighter/react-syntax-highlighter\n * https://react-syntax-highlighter.github.io/react-syntax-highlighter/demo/prism.html\n */\n// TODO(burdon): Replace with react-ui-editor (and reuse styles).\nexport const SyntaxHighlighter = ({\n  classNames,\n  children,\n  language = 'text',\n  fallback = zeroWidthSpace,\n  ...props\n}: SyntaxHighlighterProps) => {\n  const { themeMode } = useThemeContext();\n\n  return (\n    <ScrollArea.Root thin classNames={mx('p1', classNames)}>\n      <ScrollArea.Viewport>\n        <div role='none'>\n          <NativeSyntaxHighlighter\n            language={languages[language as keyof typeof languages] || language}\n            style={themeMode === 'dark' ? dark : light}\n            customStyle={{\n              background: 'unset',\n              border: 'none',\n              boxShadow: 'none',\n              padding: 0,\n              margin: 0,\n            }}\n            {...props}\n          >\n            {/* Non-empty fallback prevents collapse. */}\n            {children || fallback}\n          </NativeSyntaxHighlighter>\n        </div>\n      </ScrollArea.Viewport>\n    </ScrollArea.Root>\n  );\n};\n\nconst languages = {\n  js: 'javascript',\n  ts: 'typescript',\n};\n"],
-  "mappings": ";AAIA,SAASA,gBAAgB;AACzB,OAAOC,UAASC,YAAYC,WAAWC,gBAAgB;AAEvD,SAASC,aAAmC;AAC5C,SAAmCC,gBAAgBC,qBAAqB;;;ACHxE,OAAOC,mBAAmB;;;ACD1B,OAAOC,WAAW;AAElB,OAAOC,6BAA6B;AACpC,SAASC,eAAeC,MAAMC,eAAeC,aAAa;AAE1D,SAASC,YAAkCC,uBAAuB;AAClE,SAASC,UAAU;AAEnB,IAAMC,iBAAiB;AAgBhB,IAAMC,oBAAoB,CAAC,EAChCC,YACAC,UACAC,WAAW,QACXC,WAAWL,gBACX,GAAGM,MAAAA,MACoB;AACvB,QAAM,EAAEC,UAAS,IAAKC,gBAAAA;AAEtB,SACE,sBAAA,cAACC,WAAWC,MAAI;IAACC,MAAAA;IAAKT,YAAYU,GAAG,MAAMV,UAAAA;KACzC,sBAAA,cAACO,WAAWI,UAAQ,MAClB,sBAAA,cAACC,OAAAA;IAAIC,MAAK;KACR,sBAAA,cAACC,yBAAAA;IACCZ,UAAUa,UAAUb,QAAAA,KAAuCA;IAC3Dc,OAAOX,cAAc,SAASY,OAAOC;IACrCC,aAAa;MACXC,YAAY;MACZC,QAAQ;MACRC,WAAW;MACXC,SAAS;MACTC,QAAQ;IACV;IACC,GAAGpB;KAGHH,YAAYE,QAAAA,CAAAA,CAAAA,CAAAA;AAMzB;AAEA,IAAMY,YAAY;EAChBU,IAAI;EACJC,IAAI;AACN;;;AF9CO,IAAMC,OAAOC,2BAAsC,CAACC,OAAOC,iBAAAA;AAChE,MAAID,MAAME,QAAQ;AAChB,WAAO,gBAAAC,OAAA,cAACC,YAAeJ,KAAAA;EACzB;AAEA,QAAM,EAAEK,YAAYC,MAAMC,UAAUC,OAAM,IAAKR;AAC/C,SACE,gBAAAG,OAAA,cAACM,mBAAAA;IACCC,UAAS;IACTL,YAAY;MAAC;MAAkCA;;IAC/CM,eAAaH;IACbI,KAAKX;KAEJY,cAAcP,MAAMC,YAAYO,eAAeP,QAAAA,GAAW,CAAA,CAAA;AAGjE,CAAA;AAEO,IAAMH,aAAaL,2BACxB,CAAC,EAAEM,YAAYC,MAAMS,aAAaR,UAAUC,OAAM,GAAIP,iBAAAA;AACpD,QAAM,CAACK,MAAMU,OAAAA,IAAWC,SAASF,WAAAA;AACjC,QAAM,CAACG,MAAMC,OAAAA,IAAWF,SAAS,EAAA;AACjC,QAAM,CAACG,OAAOC,QAAAA,IAAYJ,SAAuB,IAAA;AAEjDK,YAAU,MAAA;AACR,QAAI,CAACP,eAAe,CAACG,KAAKK,KAAI,EAAGC,QAAQ;AACvCR,cAAQD,WAAAA;IACV,OAAO;AACL,UAAI;AACFC,gBAAQS,SAAS;UAAEC,MAAMR;UAAMS,MAAMZ;QAAY,CAAA,CAAA;AACjDM,iBAAS,IAAA;MACX,SAASO,KAAK;AACZZ,gBAAQD,WAAAA;AACRM,iBAASO,GAAAA;MACX;IACF;EACF,GAAG;IAACb;IAAaG;GAAK;AAEtB,SACE,gBAAAf,OAAA,cAAC0B,OAAAA;IAAIC,WAAU;IAAuClB,KAAKX;KACzD,gBAAAE,OAAA,cAAC4B,MAAMC,MAAI;IAACC,mBAAmBb,QAAQ,UAAU;KAC/C,gBAAAjB,OAAA,cAAC4B,MAAMG,WAAS;IACd7B,YAAY;MAAC;MAAsBe,SAAS;;IAC5Ce,SAAQ;IACRC,OAAOlB;IACPmB,aAAY;IACZC,UAAU,CAACC,UAAUpB,QAAQoB,MAAMC,OAAOJ,KAAK;OAGnD,gBAAAjC,OAAA,cAACM,mBAAAA;IACCC,UAAS;IACTL,YAAY;MAAC;MAAkCA;;IAC/CM,eAAaH;KAEZK,cAAcP,MAAMC,YAAYO,eAAeP,QAAAA,GAAW,CAAA,CAAA,CAAA;AAInE,CAAA;",
-  "names": ["JSONPath", "React", "forwardRef", "useEffect", "useState", "Input", "createReplacer", "safeStringify", "createElement", "React", "NativeSyntaxHighlighter", "coldarkDark", "dark", "coldarkCold", "light", "ScrollArea", "useThemeContext", "mx", "zeroWidthSpace", "SyntaxHighlighter", "classNames", "children", "language", "fallback", "props", "themeMode", "useThemeContext", "ScrollArea", "Root", "thin", "mx", "Viewport", "div", "role", "NativeSyntaxHighlighter", "languages", "style", "dark", "light", "customStyle", "background", "border", "boxShadow", "padding", "margin", "js", "ts", "Json", "forwardRef", "props", "forwardedRef", "filter", "React", "JsonFilter", "classNames", "data", "replacer", "testId", "SyntaxHighlighter", "language", "data-testid", "ref", "safeStringify", "createReplacer", "initialData", "setData", "useState", "text", "setText", "error", "setError", "useEffect", "trim", "length", "JSONPath", "path", "json", "err", "div", "className", "Input", "Root", "validationValence", "TextInput", "variant", "value", "placeholder", "onChange", "event", "target"]
+  "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/browser/meta.json

@@ -1 +1 @@
-{"inputs":{"src/SyntaxHighlighter/SyntaxHighlighter.tsx":{"bytes":6276,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"react-syntax-highlighter/dist/esm/prism-async-light","kind":"import-statement","external":true},{"path":"react-syntax-highlighter/dist/esm/styles/prism","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/ui-theme","kind":"import-statement","external":true}],"format":"esm"},"src/SyntaxHighlighter/index.ts":{"bytes":979,"imports":[{"path":"react-syntax-highlighter/dist/esm/create-element","kind":"import-statement","external":true},{"path":"src/SyntaxHighlighter/SyntaxHighlighter.tsx","kind":"import-statement","original":"./SyntaxHighlighter"}],"format":"esm"},"src/Json/Json.tsx":{"bytes":8496,"imports":[{"path":"jsonpath-plus","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/util","kind":"import-statement","external":true},{"path":"src/SyntaxHighlighter/index.ts","kind":"import-statement","original":"../SyntaxHighlighter"}],"format":"esm"},"src/Json/index.ts":{"bytes":463,"imports":[{"path":"src/Json/Json.tsx","kind":"import-statement","original":"./Json"}],"format":"esm"},"src/index.ts":{"bytes":571,"imports":[{"path":"src/Json/index.ts","kind":"import-statement","original":"./Json"},{"path":"src/SyntaxHighlighter/index.ts","kind":"import-statement","original":"./SyntaxHighlighter"}],"format":"esm"}},"outputs":{"dist/lib/browser/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":8179},"dist/lib/browser/index.mjs":{"imports":[{"path":"jsonpath-plus","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/util","kind":"import-statement","external":true},{"path":"react-syntax-highlighter/dist/esm/create-element","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react-syntax-highlighter/dist/esm/prism-async-light","kind":"import-statement","external":true},{"path":"react-syntax-highlighter/dist/esm/styles/prism","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/ui-theme","kind":"import-statement","external":true}],"exports":["Json","JsonFilter","SyntaxHighlighter","createElement"],"entryPoint":"src/index.ts","inputs":{"src/Json/Json.tsx":{"bytesInOutput":2125},"src/SyntaxHighlighter/index.ts":{"bytesInOutput":78},"src/SyntaxHighlighter/SyntaxHighlighter.tsx":{"bytesInOutput":1162},"src/index.ts":{"bytesInOutput":0}},"bytes":3597}}}
+{"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/browser/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":18614},"dist/lib/browser/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":7240}}}