@dxos/react-ui-syntax-highlighter 0.8.4-main.bc674ce → 0.8.4-main.c351d160a8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-syntax-highlighter",
-  "version": "0.8.4-main.bc674ce",
+  "version": "0.8.4-main.c351d160a8",
   "description": "A syntax highlighter wrapper.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -29,29 +29,28 @@
     "src"
   ],
   "dependencies": {
-    "jsonpath": "^1.1.1",
+    "jsonpath-plus": "^10.3.0",
     "react-syntax-highlighter": "^15.6.1",
-    "@dxos/util": "0.8.4-main.bc674ce"
+    "@dxos/util": "0.8.4-main.c351d160a8"
   },
   "devDependencies": {
-    "@types/jsonpath": "^0.2.4",
     "@types/react": "~19.2.7",
     "@types/react-dom": "~19.2.3",
     "@types/react-syntax-highlighter": "^15.5.13",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "vite": "7.1.9",
-    "@dxos/random": "0.8.4-main.bc674ce",
-    "@dxos/react-ui": "0.8.4-main.bc674ce",
-    "@dxos/storybook-utils": "0.8.4-main.bc674ce",
-    "@dxos/util": "0.8.4-main.bc674ce",
-    "@dxos/ui-theme": "0.8.4-main.bc674ce"
+    "vite": "^7.1.11",
+    "@dxos/random": "0.8.4-main.c351d160a8",
+    "@dxos/storybook-utils": "0.8.4-main.c351d160a8",
+    "@dxos/react-ui": "0.8.4-main.c351d160a8",
+    "@dxos/ui-theme": "0.8.4-main.c351d160a8",
+    "@dxos/util": "0.8.4-main.c351d160a8"
   },
   "peerDependencies": {
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "@dxos/react-ui": "0.8.4-main.bc674ce",
-    "@dxos/ui-theme": "0.8.4-main.bc674ce"
+    "@dxos/react-ui": "0.8.4-main.c351d160a8",
+    "@dxos/ui-theme": "0.8.4-main.c351d160a8"
   },
   "publishConfig": {
     "access": "public"

package/src/Json/Json.stories.tsx

@@ -56,7 +56,7 @@ const createData = ({ depth = 2, children = 3 } = {}): any => {
 const meta = {
   title: 'ui/react-ui-syntax-highlighter/Json',
   component: Json,
-  decorators: [withTheme, withLayout({ layout: 'column' })],
+  decorators: [withTheme(), withLayout({ layout: 'column' })],
 } satisfies Meta<typeof Json>;
 
 export default meta;

package/src/Json/Json.tsx

@@ -2,8 +2,7 @@
 // Copyright 2025 DXOS.org
 //
 
-// TODO(burdon): Use to jsonpath-plus.
-import jp from 'jsonpath';
+import { JSONPath } from 'jsonpath-plus';
 import React, { forwardRef, useEffect, useState } from 'react';
 
 import { Input, type ThemedClassName } from '@dxos/react-ui';
@@ -27,7 +26,7 @@ export const Json = forwardRef<HTMLDivElement, JsonProps>((props, forwardedRef)
   return (
     <SyntaxHighlighter
       language='json'
-      classNames={['is-full overflow-y-auto text-sm', classNames]}
+      classNames={['w-full overflow-y-auto text-sm', classNames]}
       data-testid={testId}
       ref={forwardedRef}
     >
@@ -47,7 +46,7 @@ export const JsonFilter = forwardRef<HTMLDivElement, JsonProps>(
         setData(initialData);
       } else {
         try {
-          setData(jp.query(initialData, text));
+          setData(JSONPath({ path: text, json: initialData }));
           setError(null);
         } catch (err) {
           setData(initialData);
@@ -57,10 +56,10 @@ export const JsonFilter = forwardRef<HTMLDivElement, JsonProps>(
     }, [initialData, text]); // TODO(burdon): Need structural diff.
 
     return (
-      <div className='flex flex-col bs-full overflow-hidden' ref={forwardedRef}>
+      <div className='flex flex-col h-full overflow-hidden' ref={forwardedRef}>
         <Input.Root validationValence={error ? 'error' : 'success'}>
           <Input.TextInput
-            classNames={['p-1 pli-2 font-mono', error && 'border-rose-500']}
+            classNames={['p-1 px-2 font-mono', error && 'border-rose-500']}
             variant='subdued'
             value={text}
             placeholder='JSONPath (e.g., $.graph.nodes)'
@@ -69,7 +68,7 @@ export const JsonFilter = forwardRef<HTMLDivElement, JsonProps>(
         </Input.Root>
         <SyntaxHighlighter
           language='json'
-          classNames={['is-full overflow-y-auto text-sm', classNames]}
+          classNames={['w-full overflow-y-auto text-sm', classNames]}
           data-testid={testId}
         >
           {safeStringify(data, replacer && createReplacer(replacer), 2)}

package/src/SyntaxHighlighter/SyntaxHighlighter.stories.tsx

@@ -4,15 +4,21 @@
 
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 
-import { withTheme } from '@dxos/react-ui/testing';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import { trim } from '@dxos/util';
 
+// @ts-ignore - Vite raw import.
+import TEXT from '../../package.json?raw';
+
 import { SyntaxHighlighter } from './SyntaxHighlighter';
 
 const meta = {
   title: 'ui/react-ui-syntax-highlighter/SyntaxHighlighter',
   component: SyntaxHighlighter,
-  decorators: [withTheme],
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
+  parameters: {
+    layout: 'fullscreen',
+  },
 } satisfies Meta<typeof SyntaxHighlighter>;
 
 export default meta;
@@ -23,7 +29,7 @@ export const Default: Story = {
   args: {
     language: 'json',
     classNames: 'text-sm',
-    children: JSON.stringify({ message: 'DXOS', initialized: true }, null, 2),
+    children: TEXT,
   },
 };
 
@@ -32,7 +38,7 @@ export const Typescript: Story = {
     language: 'tsx',
     children: trim`
       import React from 'react'
-      
+
       const Test = () => {
         return <div>Test</div>
       }
@@ -40,8 +46,4 @@ export const Typescript: Story = {
   },
 };
 
-export const Empty: Story = {
-  args: {
-    children: false,
-  },
-};
+export const Empty: Story = {};

package/src/SyntaxHighlighter/SyntaxHighlighter.tsx

@@ -7,7 +7,7 @@ import { type SyntaxHighlighterProps as NaturalSyntaxHighlighterProps } from 're
 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 { ScrollArea, type ThemedClassName, useThemeContext } from '@dxos/react-ui';
 import { mx } from '@dxos/ui-theme';
 
 const zeroWidthSpace = '\u200b';
@@ -36,24 +36,27 @@ export const SyntaxHighlighter = ({
   const { themeMode } = useThemeContext();
 
   return (
-    <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>
+    <ScrollArea.Root thin classNames={mx('p1', classNames)}>
+      <ScrollArea.Viewport>
+        <div role='none'>
+          <NativeSyntaxHighlighter
+            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>
+      </ScrollArea.Viewport>
+    </ScrollArea.Root>
   );
 };