@dxos/react-ui-syntax-highlighter 0.8.3-staging.0fa589b → 0.8.4-main.03d5cd7b56

package/src/SyntaxHighlighter/SyntaxHighlighter.tsx

@@ -2,48 +2,113 @@
 // Copyright 2024 DXOS.org
 //
 
-import React from 'react';
-import { type SyntaxHighlighterProps as NativeSyntaxHighlighterProps } from 'react-syntax-highlighter';
-// Using `light-async` version directly from dist to avoid any chance of the heavy one being loaded.
-// Lightweight version will load specific language parsers asynchronously.
-// eslint-disable-next-line no-restricted-imports
-import NativeSyntaxHighlighter from 'react-syntax-highlighter/dist/esm/light-async';
-// eslint-disable-next-line no-restricted-imports
-import { github as light, a11yDark as dark } from 'react-syntax-highlighter/dist/esm/styles/hljs';
-
-import { type ThemedClassName, useThemeContext } from '@dxos/react-ui';
-import { mx } from '@dxos/react-ui-theme';
+import React, { Children } from 'react';
+import { type SyntaxHighlighterProps as NaturalSyntaxHighlighterProps } from 'react-syntax-highlighter';
+import NativeSyntaxHighlighter from 'react-syntax-highlighter/dist/esm/prism-async-light';
+import { coldarkDark as dark, coldarkCold as light } from 'react-syntax-highlighter/dist/esm/styles/prism';
+
+import { Clipboard, useThemeContext } from '@dxos/react-ui';
+import { composable, composableProps } from '@dxos/ui-theme';
 
 const zeroWidthSpace = '\u200b';
 
-export type SyntaxHighlighterProps = ThemedClassName<
-  NativeSyntaxHighlighterProps & {
-    fallback?: string;
-  }
->;
+const languages = {
+  js: 'javascript',
+  ts: 'typescript',
+};
 
-light.hljs.background = '';
-dark.hljs.background = '';
+export type SyntaxHighlighterProps = Pick<
+  NaturalSyntaxHighlighterProps,
+  | 'language'
+  | 'renderer'
+  | 'showLineNumbers'
+  | 'showInlineLineNumbers'
+  | 'startingLineNumber'
+  | 'wrapLines'
+  | 'wrapLongLines'
+  | 'PreTag'
+> & {
+  themeStyle?: NaturalSyntaxHighlighterProps['style'];
+  fallback?: string;
+  copyButton?: boolean;
+};
 
 /**
+ * Inline, non-scrolling wrapper around `react-syntax-highlighter`.
+ *
+ * Use directly for small snippets (e.g. inside markdown code blocks).
+ * For scrollable panels, compose with `Syntax.Viewport`.
+ *
+ * NOTE: Using `light-async` version directly from dist to avoid any chance of the heavy one being loaded.
+ * The lightweight version will load specific language parsers asynchronously.
+ *
  * https://github.com/react-syntax-highlighter/react-syntax-highlighter
+ * https://react-syntax-highlighter.github.io/react-syntax-highlighter/demo/prism.html
  */
-export const SyntaxHighlighter = ({
-  classNames,
-  children,
-  fallback = zeroWidthSpace,
-  ...props
-}: SyntaxHighlighterProps) => {
-  const { themeMode } = useThemeContext();
-
-  return (
-    <NativeSyntaxHighlighter
-      className={mx('w-full p-0 bg-baseSurface font-thin overflow-auto scrollbar-thin', classNames)}
-      style={themeMode === 'dark' ? dark : light}
-      {...props}
-    >
-      {/* Non-empty fallback prevents collapse. */}
-      {children || fallback}
-    </NativeSyntaxHighlighter>
-  );
-};
+export const SyntaxHighlighter = composable<HTMLDivElement, SyntaxHighlighterProps>(
+  (
+    {
+      classNames,
+      className,
+      children,
+      role,
+      style,
+      themeStyle,
+      language = 'text',
+      fallback = zeroWidthSpace,
+      copyButton,
+      ...nativeProps
+    },
+    forwardedRef,
+  ) => {
+    const { themeMode } = useThemeContext();
+    const source = Children.toArray(children).join('') || fallback;
+
+    const hasCustomTheme = themeStyle && typeof themeStyle === 'object' && Object.keys(themeStyle).length > 0;
+    const prismTheme = hasCustomTheme ? themeStyle : themeMode === 'dark' ? dark : light;
+
+    return (
+      <div
+        {...composableProps(
+          { classNames, className, role, style },
+          {
+            role: 'none',
+            classNames: copyButton && 'relative group',
+          },
+        )}
+        ref={forwardedRef}
+      >
+        <NativeSyntaxHighlighter
+          language={languages[language as keyof typeof languages] || language}
+          style={prismTheme}
+          customStyle={{
+            background: 'unset',
+            border: 'none',
+            boxShadow: 'none',
+            padding: 0,
+            margin: 0,
+          }}
+          {...nativeProps}
+        >
+          {/* Non-empty fallback prevents collapse. */}
+          {source}
+        </NativeSyntaxHighlighter>
+
+        {copyButton && (
+          <div className='pointer-events-none absolute top-1 right-1 z-10 opacity-0 group-hover:opacity-100 focus-within:opacity-100'>
+            <Clipboard.Provider>
+              <Clipboard.IconButton
+                value={source}
+                variant='ghost'
+                size={4}
+                classNames='pointer-events-auto aspect-square rounded-sm'
+              />
+            </Clipboard.Provider>
+          </div>
+        )}
+      </div>
+    );
+  },
+);
+
+SyntaxHighlighter.displayName = 'SyntaxHighlighter';

package/src/index.ts

@@ -2,5 +2,6 @@
 // Copyright 2024 DXOS.org
 //
 
-export * from './JsonFilter';
+export * from './JsonHighlighter';
+export * from './Syntax';
 export * from './SyntaxHighlighter';

package/dist/lib/node/index.cjs

@@ -1,125 +0,0 @@
-"use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var node_exports = {};
-__export(node_exports, {
-  Json: () => Json,
-  JsonFilter: () => JsonFilter,
-  SyntaxHighlighter: () => SyntaxHighlighter,
-  createElement: () => import_create_element.default
-});
-module.exports = __toCommonJS(node_exports);
-var import_tracking = require("@preact-signals/safe-react/tracking");
-var import_jsonpath = __toESM(require("jsonpath"));
-var import_react = __toESM(require("react"));
-var import_react_ui = require("@dxos/react-ui");
-var import_react_ui_theme = require("@dxos/react-ui-theme");
-var import_create_element = __toESM(require("react-syntax-highlighter/dist/esm/create-element"));
-var import_tracking2 = require("@preact-signals/safe-react/tracking");
-var import_react2 = __toESM(require("react"));
-var import_light_async = __toESM(require("react-syntax-highlighter/dist/esm/light-async"));
-var import_hljs = require("react-syntax-highlighter/dist/esm/styles/hljs");
-var import_react_ui2 = require("@dxos/react-ui");
-var import_react_ui_theme2 = require("@dxos/react-ui-theme");
-var zeroWidthSpace = "\u200B";
-import_hljs.github.hljs.background = "";
-import_hljs.a11yDark.hljs.background = "";
-var SyntaxHighlighter = ({ classNames, children, fallback = zeroWidthSpace, ...props }) => {
-  var _effect = (0, import_tracking2.useSignals)();
-  try {
-    const { themeMode } = (0, import_react_ui2.useThemeContext)();
-    return /* @__PURE__ */ import_react2.default.createElement(import_light_async.default, {
-      className: (0, import_react_ui_theme2.mx)("w-full p-0 bg-baseSurface font-thin overflow-auto scrollbar-thin", classNames),
-      style: themeMode === "dark" ? import_hljs.a11yDark : import_hljs.github,
-      ...props
-    }, children || fallback);
-  } finally {
-    _effect.f();
-  }
-};
-var Json = ({ data, classNames, testId }) => {
-  var _effect = (0, import_tracking.useSignals)();
-  try {
-    return /* @__PURE__ */ import_react.default.createElement(SyntaxHighlighter, {
-      language: "json",
-      classNames,
-      "data-testid": testId
-    }, JSON.stringify(data, null, 2));
-  } finally {
-    _effect.f();
-  }
-};
-var JsonFilter = ({ data: initialData, classNames, testId }) => {
-  var _effect = (0, import_tracking.useSignals)();
-  try {
-    const [data, setData] = (0, import_react.useState)(initialData);
-    const [text, setText] = (0, import_react.useState)("");
-    const [error, setError] = (0, import_react.useState)(null);
-    (0, import_react.useEffect)(() => {
-      if (!initialData || !text.trim().length) {
-        setData(initialData);
-      } else {
-        try {
-          setData(import_jsonpath.default.query(initialData, text));
-          setError(null);
-        } catch (err) {
-          setData(initialData);
-          setError(err);
-        }
-      }
-    }, [
-      initialData,
-      text
-    ]);
-    return /* @__PURE__ */ import_react.default.createElement("div", {
-      className: "flex flex-col grow overflow-hidden"
-    }, /* @__PURE__ */ import_react.default.createElement(import_react_ui.Input.Root, {
-      validationValence: error ? "error" : "success"
-    }, /* @__PURE__ */ import_react.default.createElement(import_react_ui.Input.TextInput, {
-      classNames: (0, import_react_ui_theme.mx)("p-1 px-2 font-mono", error && "border-red-500"),
-      variant: "subdued",
-      value: text,
-      onChange: (event) => setText(event.target.value),
-      placeholder: "JSONPath (e.g., $.graph.nodes)"
-    })), /* @__PURE__ */ import_react.default.createElement(SyntaxHighlighter, {
-      language: "json",
-      classNames: (0, import_react_ui_theme.mx)("grow overflow-y-auto", classNames),
-      "data-testid": testId
-    }, JSON.stringify(data, null, 2)));
-  } finally {
-    _effect.f();
-  }
-};
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  Json,
-  JsonFilter,
-  SyntaxHighlighter,
-  createElement
-});
-//# sourceMappingURL=index.cjs.map

package/dist/lib/node/index.cjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/JsonFilter/JsonFilter.tsx", "../../../src/SyntaxHighlighter/index.ts", "../../../src/SyntaxHighlighter/SyntaxHighlighter.tsx"],
-  "sourcesContent": ["//\n// Copyright 2025 DXOS.org\n//\n\n// TODO(burdon): Move to jsonpath-plus.\nimport jp from 'jsonpath';\nimport React, { useEffect, useState } from 'react';\n\nimport { Input, type ThemedClassName } from '@dxos/react-ui';\nimport { mx } from '@dxos/react-ui-theme';\n\nimport { SyntaxHighlighter } from '../SyntaxHighlighter';\n\nexport type JsonProps = ThemedClassName<{ data?: any; testId?: string }>;\n\nexport const Json = ({ data, classNames, testId }: JsonProps) => {\n  return (\n    <SyntaxHighlighter language='json' classNames={classNames} data-testid={testId}>\n      {JSON.stringify(data, null, 2)}\n    </SyntaxHighlighter>\n  );\n};\n\nexport const JsonFilter = ({ data: initialData, classNames, testId }: JsonProps) => {\n  const [data, setData] = useState(initialData);\n  const [text, setText] = useState('');\n  const [error, setError] = useState<Error | null>(null);\n  useEffect(() => {\n    if (!initialData || !text.trim().length) {\n      setData(initialData);\n    } else {\n      try {\n        setData(jp.query(initialData, text));\n        setError(null);\n      } catch (err) {\n        setData(initialData);\n        setError(err as Error);\n      }\n    }\n  }, [initialData, text]); // TODO(burdon): Need structural diff.\n\n  return (\n    <div className='flex flex-col grow overflow-hidden'>\n      <Input.Root validationValence={error ? 'error' : 'success'}>\n        <Input.TextInput\n          classNames={mx('p-1 px-2 font-mono', error && 'border-red-500')}\n          variant='subdued'\n          value={text}\n          onChange={(event) => setText(event.target.value)}\n          placeholder='JSONPath (e.g., $.graph.nodes)'\n        />\n      </Input.Root>\n      <SyntaxHighlighter language='json' classNames={mx('grow overflow-y-auto', classNames)} data-testid={testId}>\n        {JSON.stringify(data, null, 2)}\n      </SyntaxHighlighter>\n    </div>\n  );\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\n// eslint-disable-next-line no-restricted-imports\nimport createElement from 'react-syntax-highlighter/dist/esm/create-element';\n\nexport { createElement };\n\nexport * from './SyntaxHighlighter';\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport React from 'react';\nimport { type SyntaxHighlighterProps as NativeSyntaxHighlighterProps } from 'react-syntax-highlighter';\n// Using `light-async` version directly from dist to avoid any chance of the heavy one being loaded.\n// Lightweight version will load specific language parsers asynchronously.\n// eslint-disable-next-line no-restricted-imports\nimport NativeSyntaxHighlighter from 'react-syntax-highlighter/dist/esm/light-async';\n// eslint-disable-next-line no-restricted-imports\nimport { github as light, a11yDark as dark } from 'react-syntax-highlighter/dist/esm/styles/hljs';\n\nimport { type ThemedClassName, useThemeContext } from '@dxos/react-ui';\nimport { mx } from '@dxos/react-ui-theme';\n\nconst zeroWidthSpace = '\\u200b';\n\nexport type SyntaxHighlighterProps = ThemedClassName<\n  NativeSyntaxHighlighterProps & {\n    fallback?: string;\n  }\n>;\n\nlight.hljs.background = '';\ndark.hljs.background = '';\n\n/**\n * https://github.com/react-syntax-highlighter/react-syntax-highlighter\n */\nexport const SyntaxHighlighter = ({\n  classNames,\n  children,\n  fallback = zeroWidthSpace,\n  ...props\n}: SyntaxHighlighterProps) => {\n  const { themeMode } = useThemeContext();\n\n  return (\n    <NativeSyntaxHighlighter\n      className={mx('w-full p-0 bg-baseSurface font-thin overflow-auto scrollbar-thin', classNames)}\n      style={themeMode === 'dark' ? dark : light}\n      {...props}\n    >\n      {/* Non-empty fallback prevents collapse. */}\n      {children || fallback}\n    </NativeSyntaxHighlighter>\n  );\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,sBAAe;AACf,mBAA2C;AAE3C,sBAA4C;AAC5C,4BAAmB;ACJnB,4BAA0B;;ACD1B,IAAAA,gBAAkB;AAKlB,yBAAoC;AAEpC,kBAAkD;AAElD,IAAAC,mBAAsD;AACtD,IAAAC,yBAAmB;AAEnB,IAAMC,iBAAiB;AAQvBC,YAAAA,OAAMC,KAAKC,aAAa;AACxBC,YAAAA,SAAKF,KAAKC,aAAa;AAKhB,IAAME,oBAAoB,CAAC,EAChCC,YACAC,UACAC,WAAWR,gBACX,GAAGS,MAAAA,MACoB;;;AACvB,UAAM,EAAEC,UAAS,QAAKC,kCAAAA;AAEtB,WACE,8BAAAC,QAAA,cAACC,mBAAAA,SAAAA;MACCC,eAAWC,2BAAG,oEAAoET,UAAAA;MAClFU,OAAON,cAAc,SAASN,YAAAA,WAAOH,YAAAA;MACpC,GAAGQ;OAGHF,YAAYC,QAAAA;;;;AAGnB;AFjCO,IAAMS,OAAO,CAAC,EAAEC,MAAMZ,YAAYa,OAAM,MAAa;;;AAC1D,WACEP,6BAAAA,QAAA,cAACP,mBAAAA;MAAkBe,UAAS;MAAOd;MAAwBe,eAAaF;OACrEG,KAAKC,UAAUL,MAAM,MAAM,CAAA,CAAA;;;;AAGlC;AAEO,IAAMM,aAAa,CAAC,EAAEN,MAAMO,aAAanB,YAAYa,OAAM,MAAa;;;AAC7E,UAAM,CAACD,MAAMQ,OAAAA,QAAWC,uBAASF,WAAAA;AACjC,UAAM,CAACG,MAAMC,OAAAA,QAAWF,uBAAS,EAAA;AACjC,UAAM,CAACG,OAAOC,QAAAA,QAAYJ,uBAAuB,IAAA;AACjDK,gCAAU,MAAA;AACR,UAAI,CAACP,eAAe,CAACG,KAAKK,KAAI,EAAGC,QAAQ;AACvCR,gBAAQD,WAAAA;MACV,OAAO;AACL,YAAI;AACFC,kBAAQS,gBAAAA,QAAGC,MAAMX,aAAaG,IAAAA,CAAAA;AAC9BG,mBAAS,IAAA;QACX,SAASM,KAAK;AACZX,kBAAQD,WAAAA;AACRM,mBAASM,GAAAA;QACX;MACF;IACF,GAAG;MAACZ;MAAaG;KAAK;AAEtB,WACEhB,6BAAAA,QAAA,cAAC0B,OAAAA;MAAIxB,WAAU;OACbF,6BAAAA,QAAA,cAAC2B,sBAAMC,MAAI;MAACC,mBAAmBX,QAAQ,UAAU;OAC/ClB,6BAAAA,QAAA,cAAC2B,sBAAMG,WAAS;MACdpC,gBAAYS,sBAAAA,IAAG,sBAAsBe,SAAS,gBAAA;MAC9Ca,SAAQ;MACRC,OAAOhB;MACPiB,UAAU,CAACC,UAAUjB,QAAQiB,MAAMC,OAAOH,KAAK;MAC/CI,aAAY;SAGhBpC,6BAAAA,QAAA,cAACP,mBAAAA;MAAkBe,UAAS;MAAOd,gBAAYS,sBAAAA,IAAG,wBAAwBT,UAAAA;MAAae,eAAaF;OACjGG,KAAKC,UAAUL,MAAM,MAAM,CAAA,CAAA,CAAA;;;;AAIpC;",
-  "names": ["import_react", "import_react_ui", "import_react_ui_theme", "zeroWidthSpace", "light", "hljs", "background", "dark", "SyntaxHighlighter", "classNames", "children", "fallback", "props", "themeMode", "useThemeContext", "React", "NativeSyntaxHighlighter", "className", "mx", "style", "Json", "data", "testId", "language", "data-testid", "JSON", "stringify", "JsonFilter", "initialData", "setData", "useState", "text", "setText", "error", "setError", "useEffect", "trim", "length", "jp", "query", "err", "div", "Input", "Root", "validationValence", "TextInput", "variant", "value", "onChange", "event", "target", "placeholder"]
-}

package/dist/lib/node/meta.json

@@ -1 +0,0 @@
-{"inputs":{"packages/ui/react-ui-syntax-highlighter/src/SyntaxHighlighter/SyntaxHighlighter.tsx":{"bytes":4906,"imports":[{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react-syntax-highlighter/dist/esm/light-async","kind":"import-statement","external":true},{"path":"react-syntax-highlighter/dist/esm/styles/hljs","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-syntax-highlighter/src/SyntaxHighlighter/index.ts":{"bytes":992,"imports":[{"path":"react-syntax-highlighter/dist/esm/create-element","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-syntax-highlighter/src/SyntaxHighlighter/SyntaxHighlighter.tsx","kind":"import-statement","original":"./SyntaxHighlighter"}],"format":"esm"},"packages/ui/react-ui-syntax-highlighter/src/JsonFilter/JsonFilter.tsx":{"bytes":7197,"imports":[{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"path":"jsonpath","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-syntax-highlighter/src/SyntaxHighlighter/index.ts","kind":"import-statement","original":"../SyntaxHighlighter"}],"format":"esm"},"packages/ui/react-ui-syntax-highlighter/src/JsonFilter/index.ts":{"bytes":496,"imports":[{"path":"packages/ui/react-ui-syntax-highlighter/src/JsonFilter/JsonFilter.tsx","kind":"import-statement","original":"./JsonFilter"}],"format":"esm"},"packages/ui/react-ui-syntax-highlighter/src/index.ts":{"bytes":598,"imports":[{"path":"packages/ui/react-ui-syntax-highlighter/src/JsonFilter/index.ts","kind":"import-statement","original":"./JsonFilter"},{"path":"packages/ui/react-ui-syntax-highlighter/src/SyntaxHighlighter/index.ts","kind":"import-statement","original":"./SyntaxHighlighter"}],"format":"esm"}},"outputs":{"packages/ui/react-ui-syntax-highlighter/dist/lib/node/index.cjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":6328},"packages/ui/react-ui-syntax-highlighter/dist/lib/node/index.cjs":{"imports":[{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"path":"jsonpath","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"react-syntax-highlighter/dist/esm/create-element","kind":"import-statement","external":true},{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react-syntax-highlighter/dist/esm/light-async","kind":"import-statement","external":true},{"path":"react-syntax-highlighter/dist/esm/styles/hljs","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"exports":["Json","JsonFilter","SyntaxHighlighter","createElement"],"entryPoint":"packages/ui/react-ui-syntax-highlighter/src/index.ts","inputs":{"packages/ui/react-ui-syntax-highlighter/src/JsonFilter/JsonFilter.tsx":{"bytesInOutput":1916},"packages/ui/react-ui-syntax-highlighter/src/SyntaxHighlighter/index.ts":{"bytesInOutput":78},"packages/ui/react-ui-syntax-highlighter/src/SyntaxHighlighter/SyntaxHighlighter.tsx":{"bytesInOutput":956},"packages/ui/react-ui-syntax-highlighter/src/JsonFilter/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-syntax-highlighter/src/index.ts":{"bytesInOutput":0}},"bytes":3366}}}

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

@@ -1,9 +0,0 @@
-import React from 'react';
-import { type ThemedClassName } from '@dxos/react-ui';
-export type JsonProps = ThemedClassName<{
-    data?: any;
-    testId?: string;
-}>;
-export declare const Json: ({ data, classNames, testId }: JsonProps) => React.JSX.Element;
-export declare const JsonFilter: ({ data: initialData, classNames, testId }: JsonProps) => React.JSX.Element;
-//# sourceMappingURL=JsonFilter.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"JsonFilter.d.ts","sourceRoot":"","sources":["../../../../src/JsonFilter/JsonFilter.tsx"],"names":[],"mappings":"AAMA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAEnD,OAAO,EAAS,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAK7D,MAAM,MAAM,SAAS,GAAG,eAAe,CAAC;IAAE,IAAI,CAAC,EAAE,GAAG,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AAEzE,eAAO,MAAM,IAAI,GAAI,8BAA8B,SAAS,sBAM3D,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,2CAA2C,SAAS,sBAkC9E,CAAC"}

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

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

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

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

package/src/JsonFilter/JsonFilter.tsx

@@ -1,58 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-// TODO(burdon): Move to jsonpath-plus.
-import jp from 'jsonpath';
-import React, { useEffect, useState } from 'react';
-
-import { Input, type ThemedClassName } from '@dxos/react-ui';
-import { mx } from '@dxos/react-ui-theme';
-
-import { SyntaxHighlighter } from '../SyntaxHighlighter';
-
-export type JsonProps = ThemedClassName<{ data?: any; testId?: string }>;
-
-export const Json = ({ data, classNames, testId }: JsonProps) => {
-  return (
-    <SyntaxHighlighter language='json' classNames={classNames} data-testid={testId}>
-      {JSON.stringify(data, null, 2)}
-    </SyntaxHighlighter>
-  );
-};
-
-export const JsonFilter = ({ data: initialData, classNames, testId }: JsonProps) => {
-  const [data, setData] = useState(initialData);
-  const [text, setText] = useState('');
-  const [error, setError] = useState<Error | null>(null);
-  useEffect(() => {
-    if (!initialData || !text.trim().length) {
-      setData(initialData);
-    } else {
-      try {
-        setData(jp.query(initialData, text));
-        setError(null);
-      } catch (err) {
-        setData(initialData);
-        setError(err as Error);
-      }
-    }
-  }, [initialData, text]); // TODO(burdon): Need structural diff.
-
-  return (
-    <div className='flex flex-col grow overflow-hidden'>
-      <Input.Root validationValence={error ? 'error' : 'success'}>
-        <Input.TextInput
-          classNames={mx('p-1 px-2 font-mono', error && 'border-red-500')}
-          variant='subdued'
-          value={text}
-          onChange={(event) => setText(event.target.value)}
-          placeholder='JSONPath (e.g., $.graph.nodes)'
-        />
-      </Input.Root>
-      <SyntaxHighlighter language='json' classNames={mx('grow overflow-y-auto', classNames)} data-testid={testId}>
-        {JSON.stringify(data, null, 2)}
-      </SyntaxHighlighter>
-    </div>
-  );
-};