@dxos/react-ui-syntax-highlighter 0.8.4-main.9be5663bfe → 0.8.4-main.abd8ff62ef

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-syntax-highlighter",
-  "version": "0.8.4-main.9be5663bfe",
+  "version": "0.8.4-main.abd8ff62ef",
   "description": "A syntax highlighter wrapper.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -21,18 +21,16 @@
     }
   },
   "types": "dist/types/src/index.d.ts",
-  "typesVersions": {
-    "*": {}
-  },
   "files": [
     "dist",
     "src"
   ],
   "dependencies": {
+    "@radix-ui/react-context": "1.1.1",
     "jsonpath-plus": "^10.3.0",
     "react-syntax-highlighter": "^15.6.1",
-    "@dxos/ui-types": "0.8.4-main.9be5663bfe",
-    "@dxos/util": "0.8.4-main.9be5663bfe"
+    "@dxos/util": "0.8.4-main.abd8ff62ef",
+    "@dxos/ui-types": "0.8.4-main.abd8ff62ef"
   },
   "devDependencies": {
     "@types/react": "~19.2.7",
@@ -40,18 +38,18 @@
     "@types/react-syntax-highlighter": "^15.5.13",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "vite": "^7.1.11",
-    "@dxos/random": "0.8.4-main.9be5663bfe",
-    "@dxos/react-ui": "0.8.4-main.9be5663bfe",
-    "@dxos/ui-theme": "0.8.4-main.9be5663bfe",
-    "@dxos/storybook-utils": "0.8.4-main.9be5663bfe",
-    "@dxos/util": "0.8.4-main.9be5663bfe"
+    "vite": "^8.0.10",
+    "@dxos/storybook-utils": "0.8.4-main.abd8ff62ef",
+    "@dxos/react-ui": "0.8.4-main.abd8ff62ef",
+    "@dxos/util": "0.8.4-main.abd8ff62ef",
+    "@dxos/ui-theme": "0.8.4-main.abd8ff62ef",
+    "@dxos/random": "0.8.4-main.abd8ff62ef"
   },
   "peerDependencies": {
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "@dxos/react-ui": "0.8.4-main.9be5663bfe",
-    "@dxos/ui-theme": "0.8.4-main.9be5663bfe"
+    "@dxos/react-ui": "0.8.4-main.abd8ff62ef",
+    "@dxos/ui-theme": "0.8.4-main.abd8ff62ef"
   },
   "publishConfig": {
     "access": "public"

package/src/JsonHighlighter/JsonHighlighter.stories.tsx

@@ -0,0 +1,65 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+
+import { random } from '@dxos/random';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+
+import { JsonHighlighter } from './JsonHighlighter';
+
+random.seed(0);
+
+const createNode = () => {
+  const data: Record<string, any> = {};
+  const keys = [...Array(random.number.int({ min: 1, max: 5 }))].map(() => random.lorem.word());
+  keys.forEach((key) => {
+    switch (random.helpers.arrayElement(['object', 'string', 'number', 'boolean', 'null'])) {
+      case 'object':
+        data[key] = createNode();
+        break;
+      case 'string':
+        data[key] = random.lorem.word();
+        break;
+      case 'number':
+        data[key] = random.number.int();
+        break;
+      case 'boolean':
+        data[key] = random.datatype.boolean();
+        break;
+      case 'null':
+        data[key] = null;
+        break;
+    }
+  });
+  return data;
+};
+
+const createCycle = () => {
+  const data: any = { a: 1, b: [] };
+  data.b.push(data);
+  return data;
+};
+
+const meta = {
+  title: 'ui/react-ui-syntax-highlighter/JsonHighlighter',
+  component: JsonHighlighter,
+  decorators: [withTheme(), withLayout({ layout: 'column' })],
+} satisfies Meta<typeof JsonHighlighter>;
+
+export default meta;
+
+type Story = StoryObj<typeof JsonHighlighter>;
+
+export const Default: Story = {
+  args: {
+    data: createNode(),
+  },
+};
+
+export const Cycle: Story = {
+  args: {
+    data: createCycle(),
+  },
+};

package/src/JsonHighlighter/JsonHighlighter.tsx

@@ -0,0 +1,47 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React from 'react';
+
+import { composable } from '@dxos/ui-theme';
+import { type CreateReplacerProps, createReplacer, safeStringify } from '@dxos/util';
+
+import { SyntaxHighlighter, type SyntaxHighlighterProps } from '../SyntaxHighlighter';
+
+export type JsonReplacer = CreateReplacerProps | ((key: string, value: any) => any);
+
+export type JsonHighlighterProps = Omit<SyntaxHighlighterProps, 'children' | 'language'> & {
+  data?: any;
+  replacer?: JsonReplacer;
+  /** Indentation passed to `JSON.stringify`. Default: `2` (pretty-printed). Pass `0` for single-line output. */
+  indent?: number;
+  testId?: string;
+};
+
+const resolveReplacer = (replacer?: JsonReplacer) => {
+  if (!replacer) {
+    return undefined;
+  }
+  return typeof replacer === 'function' ? replacer : createReplacer(replacer);
+};
+
+/**
+ * Inline, non-scrolling JSON renderer.
+ *
+ * Thin wrapper around `SyntaxHighlighter` that stringifies `data` with an optional replacer.
+ * `replacer` accepts either `CreateReplacerProps` (declarative truncation) or a raw
+ * `JSON.stringify`-compatible function (for bespoke serialization).
+ * For filtering and scroll behaviour, compose with the `Syntax.*` namespace.
+ */
+export const JsonHighlighter = composable<HTMLDivElement, JsonHighlighterProps>(
+  ({ data, replacer, indent = 2, testId, ...props }, forwardedRef) => {
+    return (
+      <SyntaxHighlighter {...props} language='json' data-testid={testId} ref={forwardedRef}>
+        {safeStringify(data, resolveReplacer(replacer), indent)}
+      </SyntaxHighlighter>
+    );
+  },
+);
+
+JsonHighlighter.displayName = 'JsonHighlighter';

package/src/JsonHighlighter/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './JsonHighlighter';

package/src/{Json/Json.stories.tsx → Syntax/Syntax.stories.tsx}

@@ -1,5 +1,5 @@
 //
-// Copyright 2024 DXOS.org
+// Copyright 2025 DXOS.org
 //
 
 import { type Meta, type StoryObj } from '@storybook/react-vite';
@@ -7,8 +7,9 @@ import React from 'react';
 
 import { random } from '@dxos/random';
 import { withLayout, withTheme } from '@dxos/react-ui/testing';
+import { trim } from '@dxos/util';
 
-import { Json } from './Json';
+import { Syntax } from './Syntax';
 
 random.seed(0);
 
@@ -34,7 +35,6 @@ const createNode = () => {
         break;
     }
   });
-
   return data;
 };
 
@@ -42,30 +42,16 @@ const createData = ({ depth = 2, children = 3 } = {}): any => {
   const createChildren = (root: any, d = 0) => {
     if (d < depth) {
       const num = random.number.int({ min: 1, max: Math.round(Math.log(depth + 1 - d) * children) });
-      root.children = [...new Array(num)].map(() => {
-        return createChildren(createNode(), d + 1);
-      });
+      root.children = [...new Array(num)].map(() => createChildren(createNode(), d + 1));
     }
-
     return root;
   };
-
   return createChildren(createNode());
 };
 
-const createCycle = () => {
-  const data: any = {
-    a: 1,
-    b: [],
-  };
-
-  data.b.push(data);
-  return data;
-};
-
 const meta = {
-  title: 'ui/react-ui-syntax-highlighter/Json',
-  component: Json.Root,
+  title: 'ui/react-ui-syntax-highlighter/Syntax',
+  component: Syntax.Root,
   decorators: [withTheme(), withLayout({ layout: 'column' })],
 } satisfies Meta;
 
@@ -73,34 +59,41 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-/** Standalone Json.Data — simplest usage. */
-export const Default: Story = {
-  render: (args) => <Json.Data {...args} />,
-  args: {
-    data: createData(),
-  },
-};
-
-/** Circular reference handling. */
-export const Cycle: Story = {
-  render: (args) => <Json.Data {...args} />,
+/** JSON composite with filter and scrolling viewport. */
+export const Json: Story = {
+  render: (args) => (
+    <Syntax.Root {...args}>
+      <Syntax.Content>
+        <Syntax.Filter />
+        <Syntax.Viewport>
+          <Syntax.Code />
+        </Syntax.Viewport>
+      </Syntax.Content>
+    </Syntax.Root>
+  ),
   args: {
-    data: createCycle(),
-  },
+    data: createData({ depth: 5 }),
+    replacer: { maxDepth: 3, maxArrayLen: 10, maxStringLen: 10 },
+  } as any,
 };
 
-/** Large dataset with replacer. */
-export const Filter: Story = {
+/** Text composite (TypeScript source) with scrolling viewport and no filter. */
+export const Text: Story = {
   render: (args) => (
-    <Json.Root {...args}>
-      <Json.Content>
-        <Json.Filter />
-        <Json.Data />
-      </Json.Content>
-    </Json.Root>
+    <Syntax.Root {...args}>
+      <Syntax.Viewport>
+        <Syntax.Code />
+      </Syntax.Viewport>
+    </Syntax.Root>
   ),
   args: {
-    data: createData({ depth: 5 }),
-    replacer: { maxDepth: 3, maxArrayLen: 10, maxStringLen: 10 },
-  },
+    language: 'tsx',
+    source: trim`
+      import React from 'react'
+
+      const Test = () => {
+        return <div>Test</div>
+      }
+    `,
+  } as any,
 };

package/src/Syntax/Syntax.tsx

@@ -0,0 +1,229 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { createContextScope, type Scope } from '@radix-ui/react-context';
+import { JSONPath } from 'jsonpath-plus';
+import React, { type FC, type PropsWithChildren, forwardRef, useMemo, useState } from 'react';
+
+import { Input, ScrollArea } from '@dxos/react-ui';
+import { composable, composableProps } from '@dxos/ui-theme';
+import { type ComposableProps } from '@dxos/ui-types';
+
+import { JsonHighlighter, type JsonReplacer } from '../JsonHighlighter';
+import { SyntaxHighlighter } from '../SyntaxHighlighter';
+
+//
+// Context
+//
+
+const SYNTAX_NAME = 'Syntax';
+
+type SyntaxContextValue = {
+  mode: 'text' | 'json';
+  // Text mode.
+  source?: string;
+  language?: string;
+  // JSON mode.
+  data?: any;
+  filteredData?: any;
+  filterText: string;
+  setFilterText: (text: string) => void;
+  filterError: Error | null;
+  replacer?: JsonReplacer;
+};
+
+type ScopedProps<P> = P & { __scopeSyntax?: Scope };
+
+const [createSyntaxContext, createSyntaxScope] = createContextScope(SYNTAX_NAME);
+const [SyntaxProvider, useSyntaxContext] = createSyntaxContext<SyntaxContextValue>(SYNTAX_NAME);
+
+//
+// Root
+//
+
+const SYNTAX_ROOT_NAME = 'Syntax.Root';
+
+type SyntaxRootProps = PropsWithChildren<{
+  // Text mode.
+  language?: string;
+  source?: string;
+  // JSON mode (presence of the `data` prop selects JSON mode; `undefined` is still JSON).
+  data?: any;
+  /**
+   * `JSON.stringify` replacer applied to `data`. Use the function form to follow domain
+   * references (e.g. ECHO refs) by returning a transformed value at the root call. Keeps
+   * this package free of any domain-specific knowledge.
+   */
+  replacer?: JsonReplacer;
+}>;
+
+/**
+ * Headless context provider. Selects JSON mode when the `data` prop is passed at all — even
+ * `data={undefined}` — so loading states render an empty JSON view rather than flipping to
+ * text mode (which would trip `Syntax.Filter`'s JSON-only guard). Mode is chosen by prop
+ * presence, not value.
+ */
+const SyntaxRoot: FC<ScopedProps<SyntaxRootProps>> = (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<{ filteredData: any; filterError: Error | null }>(() => {
+    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 as Error };
+    }
+  }, [isJson, data, filterText]);
+
+  return (
+    <SyntaxProvider
+      scope={__scopeSyntax}
+      mode={isJson ? 'json' : 'text'}
+      source={source}
+      language={language}
+      data={data}
+      filteredData={filteredData}
+      filterText={filterText}
+      setFilterText={setFilterText}
+      filterError={filterError}
+      replacer={replacer}
+    >
+      {children}
+    </SyntaxProvider>
+  );
+};
+
+SyntaxRoot.displayName = SYNTAX_ROOT_NAME;
+
+//
+// Content
+//
+
+const SYNTAX_CONTENT_NAME = 'Syntax.Content';
+
+type SyntaxContentProps = ComposableProps;
+
+/** Flex-column layout container for composite parts. */
+const SyntaxContent = composable<HTMLDivElement, SyntaxContentProps>(({ children, ...props }, forwardedRef) => {
+  return (
+    <div {...composableProps(props, { classNames: 'flex flex-col h-full min-h-0 overflow-hidden' })} ref={forwardedRef}>
+      {children}
+    </div>
+  );
+});
+
+SyntaxContent.displayName = SYNTAX_CONTENT_NAME;
+
+//
+// Filter
+//
+
+const SYNTAX_FILTER_NAME = 'Syntax.Filter';
+
+type SyntaxFilterProps = ComposableProps<{
+  placeholder?: string;
+}>;
+
+/** JSONPath filter input. Only meaningful when `Syntax.Root` is in JSON mode. */
+const SyntaxFilter = forwardRef<HTMLInputElement, ScopedProps<SyntaxFilterProps>>(
+  ({ __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 (
+      <Input.Root validationValence={filterError ? 'error' : 'success'}>
+        <Input.TextInput
+          classNames={['p-1 px-2 font-mono', filterError && 'border-rose-500', classNames]}
+          variant='subdued'
+          value={filterText}
+          placeholder={placeholder}
+          onChange={(event) => setFilterText(event.target.value)}
+          ref={forwardedRef}
+        />
+      </Input.Root>
+    );
+  },
+);
+
+SyntaxFilter.displayName = SYNTAX_FILTER_NAME;
+
+//
+// Viewport
+//
+
+const SYNTAX_VIEWPORT_NAME = 'Syntax.Viewport';
+
+type SyntaxViewportProps = ComposableProps;
+
+/** Optional scroll wrapper. Compose around `Syntax.Code` to make it scrollable. */
+const SyntaxViewport = composable<HTMLDivElement, SyntaxViewportProps>(({ children, ...props }, forwardedRef) => {
+  return (
+    <ScrollArea.Root {...composableProps(props)} thin ref={forwardedRef}>
+      <ScrollArea.Viewport>{children}</ScrollArea.Viewport>
+    </ScrollArea.Root>
+  );
+});
+
+SyntaxViewport.displayName = SYNTAX_VIEWPORT_NAME;
+
+//
+// Code
+//
+
+const SYNTAX_CODE_NAME = 'Syntax.Code';
+
+type SyntaxCodeProps = ComposableProps<{
+  testId?: string;
+}>;
+
+/** Highlighted code leaf. Reads source/data from `Syntax.Root` context. */
+const SyntaxCode = composable<HTMLDivElement, ScopedProps<SyntaxCodeProps>>(
+  ({ __scopeSyntax, testId, ...props }, forwardedRef) => {
+    const context = useSyntaxContext(SYNTAX_CODE_NAME, __scopeSyntax);
+    const merged = composableProps(props, { classNames: 'py-1 px-2 text-sm' });
+
+    if (context.mode === 'json') {
+      return (
+        <JsonHighlighter
+          {...merged}
+          data={context.filteredData}
+          replacer={context.replacer}
+          testId={testId}
+          ref={forwardedRef}
+        />
+      );
+    }
+
+    return (
+      <SyntaxHighlighter {...merged} language={context.language} data-testid={testId} ref={forwardedRef}>
+        {context.source ?? ''}
+      </SyntaxHighlighter>
+    );
+  },
+);
+
+SyntaxCode.displayName = SYNTAX_CODE_NAME;
+
+//
+// Syntax
+//
+
+export const Syntax = {
+  Root: SyntaxRoot,
+  Content: SyntaxContent,
+  Filter: SyntaxFilter,
+  Viewport: SyntaxViewport,
+  Code: SyntaxCode,
+};
+
+export { createSyntaxScope };
+
+export type { SyntaxRootProps, SyntaxContentProps, SyntaxFilterProps, SyntaxViewportProps, SyntaxCodeProps };

package/src/Syntax/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './Syntax';

package/src/SyntaxHighlighter/SyntaxHighlighter.stories.tsx

@@ -14,7 +14,7 @@ import { SyntaxHighlighter } from './SyntaxHighlighter';
 const meta = {
   title: 'ui/react-ui-syntax-highlighter/SyntaxHighlighter',
   component: SyntaxHighlighter,
-  decorators: [withTheme(), withLayout({ layout: 'column' })],
+  decorators: [withTheme(), withLayout({ layout: 'column', scroll: true })],
   parameters: {
     layout: 'fullscreen',
   },
@@ -27,8 +27,8 @@ type Story = StoryObj<typeof SyntaxHighlighter>;
 export const Default: Story = {
   args: {
     language: 'json',
-    classNames: 'text-sm',
     children: TEXT,
+    copyButton: true,
   },
 };