@dxos/react-ui-syntax-highlighter 0.8.3 → 0.8.4-main.1068cf700f

package/package.json

@@ -1,15 +1,20 @@
 {
   "name": "@dxos/react-ui-syntax-highlighter",
-  "version": "0.8.3",
+  "version": "0.8.4-main.1068cf700f",
   "description": "A syntax highlighter wrapper.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dxos/dxos"
+  },
   "license": "MIT",
   "author": "DXOS.org",
-  "sideEffects": true,
+  "sideEffects": false,
   "type": "module",
   "exports": {
     ".": {
+      "source": "./src/index.ts",
       "types": "./dist/types/src/index.d.ts",
       "browser": "./dist/lib/browser/index.mjs",
       "node": "./dist/lib/node-esm/index.mjs"
@@ -24,27 +29,29 @@
     "src"
   ],
   "dependencies": {
-    "@preact-signals/safe-react": "^0.9.0",
     "jsonpath": "^1.1.1",
-    "react-syntax-highlighter": "^15.5.0"
+    "react-syntax-highlighter": "^15.6.1",
+    "@dxos/util": "0.8.4-main.1068cf700f"
   },
   "devDependencies": {
     "@types/jsonpath": "^0.2.4",
-    "@types/react": "~18.2.0",
-    "@types/react-dom": "~18.2.0",
+    "@types/react": "~19.2.7",
+    "@types/react-dom": "~19.2.3",
     "@types/react-syntax-highlighter": "^15.5.13",
-    "react": "~18.2.0",
-    "react-dom": "~18.2.0",
-    "vite": "5.4.7",
-    "@dxos/react-ui-theme": "0.8.3",
-    "@dxos/storybook-utils": "0.8.3",
-    "@dxos/react-ui": "0.8.3"
+    "react": "~19.2.3",
+    "react-dom": "~19.2.3",
+    "vite": "7.1.9",
+    "@dxos/random": "0.8.4-main.1068cf700f",
+    "@dxos/react-ui": "0.8.4-main.1068cf700f",
+    "@dxos/storybook-utils": "0.8.4-main.1068cf700f",
+    "@dxos/util": "0.8.4-main.1068cf700f",
+    "@dxos/ui-theme": "0.8.4-main.1068cf700f"
   },
   "peerDependencies": {
-    "react": "~18.2.0",
-    "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.8.3",
-    "@dxos/react-ui-theme": "0.8.3"
+    "react": "~19.2.3",
+    "react-dom": "~19.2.3",
+    "@dxos/react-ui": "0.8.4-main.1068cf700f",
+    "@dxos/ui-theme": "0.8.4-main.1068cf700f"
   },
   "publishConfig": {
     "access": "public"

package/src/Json/Json.stories.tsx

@@ -0,0 +1,106 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React from 'react';
+
+import { faker } from '@dxos/random';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+
+import { Json } from './Json';
+
+faker.seed(0);
+
+const createNode = () => {
+  const data: Record<string, any> = {};
+  const keys = [...Array(faker.number.int({ min: 1, max: 5 }))].map(() => faker.lorem.word());
+  keys.forEach((key) => {
+    switch (faker.helpers.arrayElement(['object', 'string', 'number', 'boolean', 'null'])) {
+      case 'object':
+        data[key] = createNode();
+        break;
+      case 'string':
+        data[key] = faker.lorem.word();
+        break;
+      case 'number':
+        data[key] = faker.number.int();
+        break;
+      case 'boolean':
+        data[key] = faker.datatype.boolean();
+        break;
+      case 'null':
+        data[key] = null;
+        break;
+    }
+  });
+
+  return data;
+};
+
+const createData = ({ depth = 2, children = 3 } = {}): any => {
+  const createChildren = (root: any, d = 0) => {
+    if (d < depth) {
+      const num = faker.number.int({ min: 1, max: Math.round(Math.log(depth + 1 - d) * children) });
+      root.children = [...new Array(num)].map(() => {
+        return createChildren(createNode(), d + 1);
+      });
+    }
+
+    return root;
+  };
+
+  return createChildren(createNode());
+};
+
+const meta = {
+  title: 'ui/react-ui-syntax-highlighter/Json',
+  component: Json,
+  decorators: [withTheme(), withLayout({ layout: 'column' })],
+} satisfies Meta<typeof Json>;
+
+export default meta;
+
+type Story = StoryObj<typeof Json>;
+
+const data = createData();
+
+export const Default: Story = {
+  args: {
+    classNames: 'text-sm',
+    data,
+  },
+};
+
+export const Filter: Story = {
+  args: {
+    classNames: 'text-sm',
+    filter: true,
+    data,
+  },
+};
+
+export const Large: Story = {
+  args: {
+    classNames: 'text-sm',
+    filter: true,
+    data: createData({ depth: 5 }),
+    replacer: {
+      maxDepth: 3,
+      maxArrayLen: 10,
+      maxStringLen: 10,
+    },
+  },
+};
+
+const cycle: any = {
+  a: 1,
+  b: [],
+};
+
+cycle.b.push(cycle);
+
+// NOTE: Storybook args cannot be circular.
+export const Cycle: Story = {
+  render: () => <Json data={cycle} />,
+};

package/src/Json/Json.tsx

@@ -0,0 +1,80 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+// TODO(burdon): Use to jsonpath-plus.
+import jp from 'jsonpath';
+import React, { forwardRef, useEffect, useState } from 'react';
+
+import { Input, type ThemedClassName } from '@dxos/react-ui';
+import { type CreateReplacerProps, createReplacer, safeStringify } from '@dxos/util';
+
+import { SyntaxHighlighter } from '../SyntaxHighlighter';
+
+export type JsonProps = ThemedClassName<{
+  data?: any;
+  filter?: boolean;
+  replacer?: CreateReplacerProps;
+  testId?: string;
+}>;
+
+export const Json = forwardRef<HTMLDivElement, JsonProps>((props, forwardedRef) => {
+  if (props.filter) {
+    return <JsonFilter {...props} />;
+  }
+
+  const { classNames, data, replacer, testId } = props;
+  return (
+    <SyntaxHighlighter
+      language='json'
+      classNames={['is-full overflow-y-auto text-sm', classNames]}
+      data-testid={testId}
+      ref={forwardedRef}
+    >
+      {safeStringify(data, replacer && createReplacer(replacer), 2)}
+    </SyntaxHighlighter>
+  );
+});
+
+export const JsonFilter = forwardRef<HTMLDivElement, JsonProps>(
+  ({ classNames, data: initialData, replacer, testId }, forwardedRef) => {
+    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 bs-full overflow-hidden' ref={forwardedRef}>
+        <Input.Root validationValence={error ? 'error' : 'success'}>
+          <Input.TextInput
+            classNames={['p-1 pli-2 font-mono', error && 'border-rose-500']}
+            variant='subdued'
+            value={text}
+            placeholder='JSONPath (e.g., $.graph.nodes)'
+            onChange={(event) => setText(event.target.value)}
+          />
+        </Input.Root>
+        <SyntaxHighlighter
+          language='json'
+          classNames={['is-full overflow-y-auto text-sm', classNames]}
+          data-testid={testId}
+        >
+          {safeStringify(data, replacer && createReplacer(replacer), 2)}
+        </SyntaxHighlighter>
+      </div>
+    );
+  },
+);

package/src/{JsonFilter → Json}/index.ts

@@ -2,4 +2,4 @@
 // Copyright 2025 DXOS.org
 //
 
-export * from './JsonFilter';
+export * from './Json';

package/src/SyntaxHighlighter/SyntaxHighlighter.stories.tsx

@@ -2,19 +2,18 @@
 // Copyright 2024 DXOS.org
 //
 
-import '@dxos-theme';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 
-import { type Meta, type StoryObj } from '@storybook/react';
-
-import { withTheme } from '@dxos/storybook-utils';
+import { withTheme } from '@dxos/react-ui/testing';
+import { trim } from '@dxos/util';
 
 import { SyntaxHighlighter } from './SyntaxHighlighter';
 
-const meta: Meta<typeof SyntaxHighlighter> = {
+const meta = {
   title: 'ui/react-ui-syntax-highlighter/SyntaxHighlighter',
   component: SyntaxHighlighter,
-  decorators: [withTheme],
-};
+  decorators: [withTheme()],
+} satisfies Meta<typeof SyntaxHighlighter>;
 
 export default meta;
 
@@ -30,8 +29,14 @@ export const Default: Story = {
 
 export const Typescript: Story = {
   args: {
-    language: 'ts',
-    children: 'const x = 100;',
+    language: 'tsx',
+    children: trim`
+      import React from 'react'
+      
+      const Test = () => {
+        return <div>Test</div>
+      }
+    `,
   },
 };
 

package/src/SyntaxHighlighter/SyntaxHighlighter.tsx

@@ -3,47 +3,61 @@
 //
 
 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 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 { type ThemedClassName, useThemeContext } from '@dxos/react-ui';
-import { mx } from '@dxos/react-ui-theme';
+import { mx } from '@dxos/ui-theme';
 
 const zeroWidthSpace = '\u200b';
 
 export type SyntaxHighlighterProps = ThemedClassName<
-  NativeSyntaxHighlighterProps & {
+  NaturalSyntaxHighlighterProps & {
     fallback?: string;
   }
 >;
 
-light.hljs.background = '';
-dark.hljs.background = '';
-
 /**
+ * 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
  */
+// TODO(burdon): Replace with react-ui-editor (and reuse styles).
 export const SyntaxHighlighter = ({
   classNames,
   children,
+  language = 'text',
   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>
+    <div className={mx('flex is-full p-1 overflow-hidden', classNames)}>
+      <NativeSyntaxHighlighter
+        className='!m-0 is-full overflow-auto scrollbar-thin'
+        language={languages[language as keyof typeof languages] || language}
+        style={themeMode === 'dark' ? dark : light}
+        customStyle={{
+          background: 'unset',
+          border: 'none',
+          boxShadow: 'none',
+          padding: 0,
+          margin: 0,
+        }}
+        {...props}
+      >
+        {/* Non-empty fallback prevents collapse. */}
+        {children || fallback}
+      </NativeSyntaxHighlighter>
+    </div>
   );
 };
+
+const languages = {
+  js: 'javascript',
+  ts: 'typescript',
+};

package/src/index.ts

@@ -2,5 +2,5 @@
 // Copyright 2024 DXOS.org
 //
 
-export * from './JsonFilter';
+export * from './Json';
 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>
-  );
-};