@dxos/react-ui-syntax-highlighter 0.8.3 → 0.8.4-main.84f28bd

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-syntax-highlighter",
-  "version": "0.8.3",
+  "version": "0.8.4-main.84f28bd",
   "description": "A syntax highlighter wrapper.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -36,15 +36,15 @@
     "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"
+    "@dxos/react-ui": "0.8.4-main.84f28bd",
+    "@dxos/react-ui-theme": "0.8.4-main.84f28bd",
+    "@dxos/storybook-utils": "0.8.4-main.84f28bd"
   },
   "peerDependencies": {
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.8.3",
-    "@dxos/react-ui-theme": "0.8.3"
+    "@dxos/react-ui": "0.8.4-main.84f28bd",
+    "@dxos/react-ui-theme": "0.8.4-main.84f28bd"
   },
   "publishConfig": {
     "access": "public"

package/src/{JsonFilter/JsonFilter.tsx → Json/Json.tsx}

@@ -15,7 +15,7 @@ export type JsonProps = ThemedClassName<{ data?: any; testId?: string }>;
 
 export const Json = ({ data, classNames, testId }: JsonProps) => {
   return (
-    <SyntaxHighlighter language='json' classNames={classNames} data-testid={testId}>
+    <SyntaxHighlighter language='json' classNames={['w-full', classNames]} data-testid={testId}>
       {JSON.stringify(data, null, 2)}
     </SyntaxHighlighter>
   );

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

@@ -4,7 +4,7 @@
 
 import '@dxos-theme';
 
-import { type Meta, type StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 
 import { withTheme } from '@dxos/storybook-utils';
 

package/src/SyntaxHighlighter/SyntaxHighlighter.tsx

@@ -38,7 +38,7 @@ export const SyntaxHighlighter = ({
 
   return (
     <NativeSyntaxHighlighter
-      className={mx('w-full p-0 bg-baseSurface font-thin overflow-auto scrollbar-thin', classNames)}
+      className={mx('w-full p-0 font-thin overflow-auto scrollbar-thin !text-baseText', classNames)}
       style={themeMode === 'dark' ? dark : light}
       {...props}
     >

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.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"}