@dxos/react-ui-syntax-highlighter 0.10.0 → 0.11.1

package/dist/lib/index.mjs

@@ -0,0 +1,259 @@
+import { Children, forwardRef, useCallback, useMemo, useState } from "react";
+import { Clipboard, Input, ScrollArea, composable, composableProps, useThemeContext } from "@dxos/react-ui";
+import { createReplacer, safeStringify } from "@dxos/util";
+import createElement from "react-syntax-highlighter/dist/esm/create-element";
+import NativeSyntaxHighlighter from "react-syntax-highlighter/dist/esm/prism-async-light";
+import { coldarkCold, coldarkDark } from "react-syntax-highlighter/dist/esm/styles/prism";
+import { mx } from "@dxos/ui-theme";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createContextScope } from "@radix-ui/react-context";
+import { JSONPath } from "jsonpath-plus";
+//#region src/SyntaxHighlighter/SyntaxHighlighter.tsx
+var zeroWidthSpace = "​";
+var languages = {
+	js: "javascript",
+	ts: "typescript"
+};
+/**
+* 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
+*/
+var SyntaxHighlighter = composable(({ classNames, className, children, role, style, themeStyle, language = "text", fallback = zeroWidthSpace, copyButton, ...nativeProps }, forwardedRef) => {
+	const { themeMode } = useThemeContext();
+	const source = Children.toArray(children).join("") || fallback;
+	const prismTheme = themeStyle && typeof themeStyle === "object" && Object.keys(themeStyle).length > 0 ? themeStyle : themeMode === "dark" ? coldarkDark : coldarkCold;
+	return /* @__PURE__ */ jsxs("div", {
+		...composableProps({
+			classNames,
+			className,
+			role,
+			style
+		}, {
+			role: "none",
+			classNames: mx("dx-expander p-1 overflow-auto", copyButton && "relative group")
+		}),
+		ref: forwardedRef,
+		children: [/* @__PURE__ */ jsx(NativeSyntaxHighlighter, {
+			language: languages[language] || language,
+			style: prismTheme,
+			customStyle: {
+				background: "unset",
+				border: "none",
+				boxShadow: "none",
+				padding: 0,
+				margin: 0,
+				overflow: "visible"
+			},
+			...nativeProps,
+			children: source
+		}), copyButton && /* @__PURE__ */ jsx("div", {
+			className: "pointer-events-none absolute top-1 right-1 z-10 opacity-0 group-hover:opacity-100 focus-within:opacity-100",
+			children: /* @__PURE__ */ jsx(Clipboard.Provider, { children: /* @__PURE__ */ jsx(Clipboard.IconButton, {
+				value: source,
+				variant: "ghost",
+				size: 4,
+				classNames: "pointer-events-auto aspect-square rounded-sm"
+			}) })
+		})]
+	});
+});
+SyntaxHighlighter.displayName = "SyntaxHighlighter";
+//#endregion
+//#region src/JsonHighlighter/JsonHighlighter.tsx
+var resolveReplacer = (replacer) => {
+	if (!replacer) return;
+	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.
+*/
+var JsonHighlighter = composable(({ data, replacer, indent = 2, testId, ...props }, forwardedRef) => {
+	return /* @__PURE__ */ jsx(SyntaxHighlighter, {
+		...props,
+		language: "json",
+		"data-testid": testId,
+		ref: forwardedRef,
+		children: safeStringify(data, resolveReplacer(replacer), indent)
+	});
+});
+JsonHighlighter.displayName = "JsonHighlighter";
+//#endregion
+//#region src/Syntax/SyntaxContext.ts
+var SYNTAX_NAME = "Syntax";
+var [createSyntaxContext, createSyntaxScope] = createContextScope(SYNTAX_NAME);
+var [SyntaxProvider, useSyntaxContext] = createSyntaxContext(SYNTAX_NAME);
+//#endregion
+//#region src/Syntax/Syntax.tsx
+var SYNTAX_ROOT_NAME = "Syntax.Root";
+/**
+* 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.
+*/
+var SyntaxRoot = (props) => {
+	const { __scopeSyntax, children, language, source, replacer, getReplacer, defaultDepth = 0, onDepthChange } = props;
+	const isJson = "data" in props;
+	const data = props.data;
+	const [filterText, setFilterText] = useState("");
+	const [depth, setDepthState] = useState(defaultDepth);
+	const setDepth = useCallback((next) => {
+		setDepthState(next);
+		onDepthChange?.(next);
+	}, [onDepthChange]);
+	const effectiveReplacer = useMemo(() => getReplacer ? getReplacer(depth) : replacer, [
+		getReplacer,
+		replacer,
+		depth
+	]);
+	const { filteredData, filterError } = useMemo(() => {
+		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
+			};
+		}
+	}, [
+		isJson,
+		data,
+		filterText
+	]);
+	return /* @__PURE__ */ jsx(SyntaxProvider, {
+		scope: __scopeSyntax,
+		mode: isJson ? "json" : "text",
+		source,
+		language,
+		data,
+		filteredData,
+		filterText,
+		setFilterText,
+		filterError,
+		replacer: effectiveReplacer,
+		depth,
+		setDepth,
+		children
+	});
+};
+SyntaxRoot.displayName = SYNTAX_ROOT_NAME;
+var SYNTAX_CONTENT_NAME = "Syntax.Content";
+/** Flex-column layout container for composite parts. */
+var SyntaxContent = composable(({ children, ...props }, forwardedRef) => {
+	return /* @__PURE__ */ jsx("div", {
+		...composableProps(props, { classNames: "flex flex-col h-full min-h-0 overflow-hidden" }),
+		ref: forwardedRef,
+		children
+	});
+});
+SyntaxContent.displayName = SYNTAX_CONTENT_NAME;
+var SYNTAX_FILTER_NAME = "Syntax.Filter";
+/** JSONPath filter input. Only meaningful when `Syntax.Root` is in JSON mode. */
+var SyntaxFilter = forwardRef(({ __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 /* @__PURE__ */ jsx(Input.Root, {
+		validationValence: filterError ? "error" : "success",
+		children: /* @__PURE__ */ jsx(Input.TextInput, {
+			classNames: [
+				"p-1 px-2 font-mono",
+				filterError && "border-rose-500",
+				classNames
+			],
+			variant: "subdued",
+			value: filterText,
+			placeholder,
+			onChange: (event) => setFilterText(event.target.value),
+			ref: forwardedRef
+		})
+	});
+});
+SyntaxFilter.displayName = SYNTAX_FILTER_NAME;
+var SYNTAX_DEPTH_NAME = "Syntax.Depth";
+/**
+* Numeric expansion-depth control bound to `Syntax.Root`'s depth state. Meaningful when the Root is
+* given a `getReplacer` that consumes depth (e.g. to resolve references N levels deep).
+*/
+var SyntaxDepth = forwardRef(({ __scopeSyntax, classNames }, forwardedRef) => {
+	const { depth, setDepth } = useSyntaxContext(SYNTAX_DEPTH_NAME, __scopeSyntax);
+	return /* @__PURE__ */ jsx(Input.Root, { children: /* @__PURE__ */ jsx(Input.TextInput, {
+		classNames: ["p-1 px-2 font-mono", classNames],
+		variant: "subdued",
+		type: "number",
+		min: 0,
+		step: 1,
+		"aria-label": "Depth",
+		value: depth,
+		onChange: (event) => setDepth(Math.max(0, Number(event.target.value) || 0)),
+		ref: forwardedRef
+	}) });
+});
+SyntaxDepth.displayName = SYNTAX_DEPTH_NAME;
+var SYNTAX_VIEWPORT_NAME = "Syntax.Viewport";
+/** Optional scroll wrapper. Compose around `Syntax.Code` to make it scrollable. */
+var SyntaxViewport = composable(({ children, ...props }, forwardedRef) => {
+	return /* @__PURE__ */ jsx(ScrollArea.Root, {
+		...composableProps(props),
+		orientation: "all",
+		thin: true,
+		ref: forwardedRef,
+		children: /* @__PURE__ */ jsx(ScrollArea.Viewport, { children })
+	});
+});
+SyntaxViewport.displayName = SYNTAX_VIEWPORT_NAME;
+var SYNTAX_CODE_NAME = "Syntax.Code";
+/** Highlighted code leaf. Reads source/data from `Syntax.Root` context. */
+var SyntaxCode = composable(({ __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 /* @__PURE__ */ jsx(JsonHighlighter, {
+		...merged,
+		data: context.filteredData,
+		replacer: context.replacer,
+		testId,
+		ref: forwardedRef
+	});
+	return /* @__PURE__ */ jsx(SyntaxHighlighter, {
+		...merged,
+		language: context.language,
+		"data-testid": testId,
+		ref: forwardedRef,
+		children: context.source ?? ""
+	});
+});
+SyntaxCode.displayName = SYNTAX_CODE_NAME;
+var Syntax = {
+	Root: SyntaxRoot,
+	Content: SyntaxContent,
+	Filter: SyntaxFilter,
+	Depth: SyntaxDepth,
+	Viewport: SyntaxViewport,
+	Code: SyntaxCode
+};
+//#endregion
+export { JsonHighlighter, Syntax, SyntaxHighlighter, createElement, createSyntaxScope };
+
+//# sourceMappingURL=index.mjs.map

package/dist/lib/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":[],"sources":["../../src/SyntaxHighlighter/SyntaxHighlighter.tsx","../../src/JsonHighlighter/JsonHighlighter.tsx","../../src/Syntax/SyntaxContext.ts","../../src/Syntax/Syntax.tsx"],"sourcesContent":["//\n// Copyright 2024 DXOS.org\n//\n\nimport React, { Children } from 'react';\nimport { type SyntaxHighlighterProps as NaturalSyntaxHighlighterProps } from 'react-syntax-highlighter';\nimport NativeSyntaxHighlighter from 'react-syntax-highlighter/dist/esm/prism-async-light';\nimport { coldarkDark as dark, coldarkCold as light } from 'react-syntax-highlighter/dist/esm/styles/prism';\n\nimport { Clipboard, composable, composableProps, useThemeContext } from '@dxos/react-ui';\nimport { mx } from '@dxos/ui-theme';\n\nconst zeroWidthSpace = '\\u200b';\n\nconst languages = {\n  js: 'javascript',\n  ts: 'typescript',\n};\n\nexport type SyntaxHighlighterProps = Pick<\n  NaturalSyntaxHighlighterProps,\n  | 'language'\n  | 'renderer'\n  | 'showLineNumbers'\n  | 'showInlineLineNumbers'\n  | 'startingLineNumber'\n  | 'wrapLines'\n  | 'wrapLongLines'\n  | 'PreTag'\n> & {\n  themeStyle?: NaturalSyntaxHighlighterProps['style'];\n  fallback?: string;\n  copyButton?: boolean;\n};\n\n/**\n * Inline, non-scrolling wrapper around `react-syntax-highlighter`.\n *\n * Use directly for small snippets (e.g. inside markdown code blocks).\n * For scrollable panels, compose with `Syntax.Viewport`.\n *\n * NOTE: Using `light-async` version directly from dist to avoid any chance of the heavy one being loaded.\n * The lightweight version will load specific language parsers asynchronously.\n *\n * https://github.com/react-syntax-highlighter/react-syntax-highlighter\n * https://react-syntax-highlighter.github.io/react-syntax-highlighter/demo/prism.html\n */\nexport const SyntaxHighlighter = composable<HTMLDivElement, SyntaxHighlighterProps>(\n  (\n    {\n      classNames,\n      className,\n      children,\n      role,\n      style,\n      themeStyle,\n      language = 'text',\n      fallback = zeroWidthSpace,\n      copyButton,\n      ...nativeProps\n    },\n    forwardedRef,\n  ) => {\n    const { themeMode } = useThemeContext();\n    const source = Children.toArray(children).join('') || fallback;\n\n    const hasCustomTheme = themeStyle && typeof themeStyle === 'object' && Object.keys(themeStyle).length > 0;\n    const prismTheme = hasCustomTheme ? themeStyle : themeMode === 'dark' ? dark : light;\n\n    return (\n      <div\n        {...composableProps(\n          { classNames, className, role, style },\n          {\n            role: 'none',\n            classNames: mx('dx-expander p-1 overflow-auto', copyButton && 'relative group'),\n          },\n        )}\n        ref={forwardedRef}\n      >\n        <NativeSyntaxHighlighter\n          language={languages[language as keyof typeof languages] || language}\n          style={prismTheme}\n          customStyle={{\n            background: 'unset',\n            border: 'none',\n            boxShadow: 'none',\n            padding: 0,\n            margin: 0,\n            // Non-scrolling wrapper: defer all scrolling to an enclosing `Syntax.Viewport`.\n            // The prism theme sets `overflow: auto` on the <pre>, which otherwise creates a\n            // nested native horizontal scrollbar alongside the viewport's custom one.\n            overflow: 'visible',\n          }}\n          {...nativeProps}\n        >\n          {/* Non-empty fallback prevents collapse. */}\n          {source}\n        </NativeSyntaxHighlighter>\n\n        {copyButton && (\n          <div className='pointer-events-none absolute top-1 right-1 z-10 opacity-0 group-hover:opacity-100 focus-within:opacity-100'>\n            <Clipboard.Provider>\n              <Clipboard.IconButton\n                value={source}\n                variant='ghost'\n                size={4}\n                classNames='pointer-events-auto aspect-square rounded-sm'\n              />\n            </Clipboard.Provider>\n          </div>\n        )}\n      </div>\n    );\n  },\n);\n\nSyntaxHighlighter.displayName = 'SyntaxHighlighter';\n","//\n// Copyright 2025 DXOS.org\n//\n\nimport React from 'react';\n\nimport { composable } from '@dxos/react-ui';\nimport { type CreateReplacerProps, createReplacer, safeStringify } from '@dxos/util';\n\nimport { SyntaxHighlighter, type SyntaxHighlighterProps } from '../SyntaxHighlighter';\n\nexport type JsonReplacer = CreateReplacerProps | ((key: string, value: any) => any);\n\nexport type JsonHighlighterProps = Omit<SyntaxHighlighterProps, 'children' | 'language'> & {\n  data?: any;\n  replacer?: JsonReplacer;\n  /** Indentation passed to `JSON.stringify`. Default: `2` (pretty-printed). Pass `0` for single-line output. */\n  indent?: number;\n  testId?: string;\n};\n\nconst resolveReplacer = (replacer?: JsonReplacer) => {\n  if (!replacer) {\n    return undefined;\n  }\n  return typeof replacer === 'function' ? replacer : createReplacer(replacer);\n};\n\n/**\n * Inline, non-scrolling JSON renderer.\n *\n * Thin wrapper around `SyntaxHighlighter` that stringifies `data` with an optional replacer.\n * `replacer` accepts either `CreateReplacerProps` (declarative truncation) or a raw\n * `JSON.stringify`-compatible function (for bespoke serialization).\n * For filtering and scroll behaviour, compose with the `Syntax.*` namespace.\n */\nexport const JsonHighlighter = composable<HTMLDivElement, JsonHighlighterProps>(\n  ({ data, replacer, indent = 2, testId, ...props }, forwardedRef) => {\n    return (\n      <SyntaxHighlighter {...props} language='json' data-testid={testId} ref={forwardedRef}>\n        {safeStringify(data, resolveReplacer(replacer), indent)}\n      </SyntaxHighlighter>\n    );\n  },\n);\n\nJsonHighlighter.displayName = 'JsonHighlighter';\n","//\n// Copyright 2025 DXOS.org\n//\n\nimport { type Scope, createContextScope } from '@radix-ui/react-context';\n\nimport { type SyntaxContextValue } from './Syntax';\n\n// Kept out of `Syntax.tsx`: react-refresh only fast-refreshes a module whose exports are all\n// components, so a context and its hook exported beside them force a full page reload on every edit.\n\nexport const SYNTAX_NAME = 'Syntax';\n\nexport type SyntaxScopedProps<P> = P & { __scopeSyntax?: Scope };\n\nexport const [createSyntaxContext, createSyntaxScope] = createContextScope(SYNTAX_NAME);\nexport const [SyntaxProvider, useSyntaxContext] = createSyntaxContext<SyntaxContextValue>(SYNTAX_NAME);\n","//\n// Copyright 2025 DXOS.org\n//\n\nimport { JSONPath } from 'jsonpath-plus';\nimport React, { type PropsWithChildren, forwardRef, useCallback, useMemo, useState } from 'react';\n\nimport { Input, ScrollArea } from '@dxos/react-ui';\nimport { composable, composableProps } from '@dxos/react-ui';\nimport { type ComposableProps } from '@dxos/ui-types';\n\nimport { JsonHighlighter, type JsonReplacer } from '../JsonHighlighter';\nimport { SyntaxHighlighter } from '../SyntaxHighlighter';\nimport { SyntaxProvider, type SyntaxScopedProps, useSyntaxContext } from './SyntaxContext';\n\n//\n// Context\n//\n\nexport type SyntaxContextValue = {\n  mode: 'text' | 'json';\n  // Text mode.\n  source?: string;\n  language?: string;\n  // JSON mode.\n  data?: any;\n  filteredData?: any;\n  filterText: string;\n  setFilterText: (text: string) => void;\n  filterError: Error | null;\n  replacer?: JsonReplacer;\n  // Expansion depth (JSON mode); consumed by a `getReplacer` factory, edited via `Syntax.Depth`.\n  depth: number;\n  setDepth: (depth: number) => void;\n};\n\n//\n// Root\n//\n\nconst SYNTAX_ROOT_NAME = 'Syntax.Root';\n\ntype SyntaxRootProps = PropsWithChildren<{\n  // Text mode.\n  language?: string;\n  source?: string;\n  // JSON mode (presence of the `data` prop selects JSON mode; `undefined` is still JSON).\n  data?: any;\n  /**\n   * `JSON.stringify` replacer applied to `data`. Use the function form to follow domain\n   * references (e.g. ECHO refs) by returning a transformed value at the root call. Keeps\n   * this package free of any domain-specific knowledge.\n   */\n  replacer?: JsonReplacer;\n  /**\n   * Depth-parametrized replacer, re-evaluated as the `Syntax.Depth` control changes. Takes\n   * precedence over `replacer`. The consumer owns any domain knowledge (e.g. how depth maps to\n   * ref resolution), so this package stays domain-free.\n   */\n  getReplacer?: (depth: number) => JsonReplacer | undefined;\n  /** Initial expansion depth for `Syntax.Depth` / `getReplacer`. */\n  defaultDepth?: number;\n  /** Notified when the depth changes (via `Syntax.Depth`). */\n  onDepthChange?: (depth: number) => void;\n}>;\n\n/**\n * Headless context provider. Selects JSON mode when the `data` prop is passed at all — even\n * `data={undefined}` — so loading states render an empty JSON view rather than flipping to\n * text mode (which would trip `Syntax.Filter`'s JSON-only guard). Mode is chosen by prop\n * presence, not value.\n */\nconst SyntaxRoot = (props: SyntaxScopedProps<SyntaxRootProps>) => {\n  const { __scopeSyntax, children, language, source, replacer, getReplacer, defaultDepth = 0, onDepthChange } = props;\n  const isJson = 'data' in props;\n  const data = props.data;\n  const [filterText, setFilterText] = useState('');\n  const [depth, setDepthState] = useState(defaultDepth);\n  const setDepth = useCallback(\n    (next: number) => {\n      setDepthState(next);\n      onDepthChange?.(next);\n    },\n    [onDepthChange],\n  );\n\n  // `getReplacer` (depth-parametrized) takes precedence over the static `replacer`.\n  const effectiveReplacer = useMemo(\n    () => (getReplacer ? getReplacer(depth) : replacer),\n    [getReplacer, replacer, depth],\n  );\n\n  const { filteredData, filterError } = useMemo<{ filteredData: any; filterError: Error | null }>(() => {\n    if (!isJson || !filterText.trim().length) {\n      return { filteredData: data, filterError: null };\n    }\n    try {\n      return { filteredData: JSONPath({ path: filterText, json: data }), filterError: null };\n    } catch (err) {\n      return { filteredData: data, filterError: err as Error };\n    }\n  }, [isJson, data, filterText]);\n\n  return (\n    <SyntaxProvider\n      scope={__scopeSyntax}\n      mode={isJson ? 'json' : 'text'}\n      source={source}\n      language={language}\n      data={data}\n      filteredData={filteredData}\n      filterText={filterText}\n      setFilterText={setFilterText}\n      filterError={filterError}\n      replacer={effectiveReplacer}\n      depth={depth}\n      setDepth={setDepth}\n    >\n      {children}\n    </SyntaxProvider>\n  );\n};\n\nSyntaxRoot.displayName = SYNTAX_ROOT_NAME;\n\n//\n// Content\n//\n\nconst SYNTAX_CONTENT_NAME = 'Syntax.Content';\n\ntype SyntaxContentProps = ComposableProps;\n\n/** Flex-column layout container for composite parts. */\nconst SyntaxContent = composable<HTMLDivElement, SyntaxContentProps>(({ children, ...props }, forwardedRef) => {\n  return (\n    <div {...composableProps(props, { classNames: 'flex flex-col h-full min-h-0 overflow-hidden' })} ref={forwardedRef}>\n      {children}\n    </div>\n  );\n});\n\nSyntaxContent.displayName = SYNTAX_CONTENT_NAME;\n\n//\n// Filter\n//\n\nconst SYNTAX_FILTER_NAME = 'Syntax.Filter';\n\ntype SyntaxFilterProps = ComposableProps<{\n  placeholder?: string;\n}>;\n\n/** JSONPath filter input. Only meaningful when `Syntax.Root` is in JSON mode. */\nconst SyntaxFilter = forwardRef<HTMLInputElement, SyntaxScopedProps<SyntaxFilterProps>>(\n  ({ __scopeSyntax, classNames, placeholder = 'JSONPath (e.g., $.graph.nodes)' }, forwardedRef) => {\n    const { mode, filterText, setFilterText, filterError } = useSyntaxContext(SYNTAX_FILTER_NAME, __scopeSyntax);\n    if (mode !== 'json') {\n      throw new Error(`\\`${SYNTAX_FILTER_NAME}\\` requires \\`Syntax.Root\\` to be in JSON mode (pass \\`data\\`).`);\n    }\n\n    return (\n      <Input.Root validationValence={filterError ? 'error' : 'success'}>\n        <Input.TextInput\n          classNames={['p-1 px-2 font-mono', filterError && 'border-rose-500', classNames]}\n          variant='subdued'\n          value={filterText}\n          placeholder={placeholder}\n          onChange={(event) => setFilterText(event.target.value)}\n          ref={forwardedRef}\n        />\n      </Input.Root>\n    );\n  },\n);\n\nSyntaxFilter.displayName = SYNTAX_FILTER_NAME;\n\n//\n// Depth\n//\n\nconst SYNTAX_DEPTH_NAME = 'Syntax.Depth';\n\ntype SyntaxDepthProps = ComposableProps;\n\n/**\n * Numeric expansion-depth control bound to `Syntax.Root`'s depth state. Meaningful when the Root is\n * given a `getReplacer` that consumes depth (e.g. to resolve references N levels deep).\n */\nconst SyntaxDepth = forwardRef<HTMLInputElement, SyntaxScopedProps<SyntaxDepthProps>>(\n  ({ __scopeSyntax, classNames }, forwardedRef) => {\n    const { depth, setDepth } = useSyntaxContext(SYNTAX_DEPTH_NAME, __scopeSyntax);\n    return (\n      <Input.Root>\n        <Input.TextInput\n          classNames={['p-1 px-2 font-mono', classNames]}\n          variant='subdued'\n          type='number'\n          min={0}\n          step={1}\n          aria-label='Depth'\n          value={depth}\n          onChange={(event) => setDepth(Math.max(0, Number(event.target.value) || 0))}\n          ref={forwardedRef}\n        />\n      </Input.Root>\n    );\n  },\n);\n\nSyntaxDepth.displayName = SYNTAX_DEPTH_NAME;\n\n//\n// Viewport\n//\n\nconst SYNTAX_VIEWPORT_NAME = 'Syntax.Viewport';\n\ntype SyntaxViewportProps = ComposableProps;\n\n/** Optional scroll wrapper. Compose around `Syntax.Code` to make it scrollable. */\nconst SyntaxViewport = composable<HTMLDivElement, SyntaxViewportProps>(({ children, ...props }, forwardedRef) => {\n  return (\n    <ScrollArea.Root {...composableProps(props)} orientation='all' thin ref={forwardedRef}>\n      <ScrollArea.Viewport>{children}</ScrollArea.Viewport>\n    </ScrollArea.Root>\n  );\n});\n\nSyntaxViewport.displayName = SYNTAX_VIEWPORT_NAME;\n\n//\n// Code\n//\n\nconst SYNTAX_CODE_NAME = 'Syntax.Code';\n\ntype SyntaxCodeProps = ComposableProps<{\n  testId?: string;\n}>;\n\n/** Highlighted code leaf. Reads source/data from `Syntax.Root` context. */\nconst SyntaxCode = composable<HTMLDivElement, SyntaxScopedProps<SyntaxCodeProps>>(\n  ({ __scopeSyntax, testId, ...props }, forwardedRef) => {\n    const context = useSyntaxContext(SYNTAX_CODE_NAME, __scopeSyntax);\n    const merged = composableProps(props, { classNames: 'py-1 px-2 text-sm' });\n\n    if (context.mode === 'json') {\n      return (\n        <JsonHighlighter\n          {...merged}\n          data={context.filteredData}\n          replacer={context.replacer}\n          testId={testId}\n          ref={forwardedRef}\n        />\n      );\n    }\n\n    return (\n      <SyntaxHighlighter {...merged} language={context.language} data-testid={testId} ref={forwardedRef}>\n        {context.source ?? ''}\n      </SyntaxHighlighter>\n    );\n  },\n);\n\nSyntaxCode.displayName = SYNTAX_CODE_NAME;\n\n//\n// Syntax\n//\n\nexport const Syntax = {\n  Root: SyntaxRoot,\n  Content: SyntaxContent,\n  Filter: SyntaxFilter,\n  Depth: SyntaxDepth,\n  Viewport: SyntaxViewport,\n  Code: SyntaxCode,\n};\n\nexport type {\n  SyntaxCodeProps,\n  SyntaxContentProps,\n  SyntaxDepthProps,\n  SyntaxFilterProps,\n  SyntaxRootProps,\n  SyntaxViewportProps,\n};\n"],"mappings":"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"}

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

@@ -19,5 +19,5 @@ export type JsonHighlighterProps = Omit<SyntaxHighlighterProps, 'children' | 'la
  */
 export declare const JsonHighlighter: React.ForwardRefExoticComponent<Omit<JsonHighlighterProps, "className"> & {
     classNames?: import("@dxos/ui-types").ClassNameValue;
-} & Pick<React.HTMLAttributes<Element>, "children" | "className" | "role" | "style"> & React.RefAttributes<HTMLDivElement>>;
+} & Pick<React.HTMLAttributes<Element>, "children" | "role" | "style"> & React.RefAttributes<HTMLDivElement>>;
 //# sourceMappingURL=JsonHighlighter.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"JsonHighlighter.d.ts","sourceRoot":"","sources":["../../../../src/JsonHighlighter/JsonHighlighter.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,KAAK,mBAAmB,EAAiC,MAAM,YAAY,CAAC;AAErF,OAAO,EAAqB,KAAK,sBAAsB,EAAE,MAAM,sBAAsB,CAAC;AAEtF,MAAM,MAAM,YAAY,GAAG,mBAAmB,GAAG,CAAC,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,GAAG,CAAC,CAAC;AAEpF,MAAM,MAAM,oBAAoB,GAAG,IAAI,CAAC,sBAAsB,EAAE,UAAU,GAAG,UAAU,CAAC,GAAG;IACzF,IAAI,CAAC,EAAE,GAAG,CAAC;IACX,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,8GAA8G;IAC9G,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AASF;;;;;;;GAOG;AACH,eAAO,MAAM,eAAe;;2HAQ3B,CAAC"}
+{"version":3,"file":"JsonHighlighter.d.ts","sourceRoot":"","sources":["../../../../src/JsonHighlighter/JsonHighlighter.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,KAAK,mBAAmB,EAAiC,MAAM,YAAY,CAAC;AAErF,OAAO,EAAqB,KAAK,sBAAsB,EAAE,MAAM,sBAAsB,CAAC;AAEtF,MAAM,MAAM,YAAY,GAAG,mBAAmB,GAAG,CAAC,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,GAAG,CAAC,CAAC;AAEpF,MAAM,MAAM,oBAAoB,GAAG,IAAI,CAAC,sBAAsB,EAAE,UAAU,GAAG,UAAU,CAAC,GAAG;IACzF,IAAI,CAAC,EAAE,GAAG,CAAC;IACX,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,8GAA8G;IAC9G,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AASF;;;;;;;GAOG;AACH,eAAO,MAAM,eAAe;;6GAQ3B,CAAC"}

package/dist/types/src/JsonHighlighter/JsonHighlighter.stories.d.ts

@@ -4,7 +4,7 @@ declare const meta: {
     title: string;
     component: import("react").ForwardRefExoticComponent<Omit<import("./JsonHighlighter").JsonHighlighterProps, "className"> & {
         classNames?: import("@dxos/ui-types").ClassNameValue;
-    } & Pick<import("react").HTMLAttributes<Element>, "children" | "className" | "role" | "style"> & import("react").RefAttributes<HTMLDivElement>>;
+    } & Pick<import("react").HTMLAttributes<Element>, "children" | "role" | "style"> & import("react").RefAttributes<HTMLDivElement>>;
     decorators: import("@storybook/react").Decorator[];
 };
 export default meta;

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

@@ -1,11 +1,20 @@
-import { type Scope } from '@radix-ui/react-context';
 import React, { type PropsWithChildren } from 'react';
 import { type ComposableProps } from '@dxos/ui-types';
 import { type JsonReplacer } from '../JsonHighlighter';
-type ScopedProps<P> = P & {
-    __scopeSyntax?: Scope;
+import { type SyntaxScopedProps } from './SyntaxContext';
+export type SyntaxContextValue = {
+    mode: 'text' | 'json';
+    source?: string;
+    language?: string;
+    data?: any;
+    filteredData?: any;
+    filterText: string;
+    setFilterText: (text: string) => void;
+    filterError: Error | null;
+    replacer?: JsonReplacer;
+    depth: number;
+    setDepth: (depth: number) => void;
 };
-declare const createSyntaxScope: import("@radix-ui/react-context").CreateScope;
 type SyntaxRootProps = PropsWithChildren<{
     language?: string;
     source?: string;
@@ -16,8 +25,18 @@ type SyntaxRootProps = PropsWithChildren<{
      * this package free of any domain-specific knowledge.
      */
     replacer?: JsonReplacer;
+    /**
+     * Depth-parametrized replacer, re-evaluated as the `Syntax.Depth` control changes. Takes
+     * precedence over `replacer`. The consumer owns any domain knowledge (e.g. how depth maps to
+     * ref resolution), so this package stays domain-free.
+     */
+    getReplacer?: (depth: number) => JsonReplacer | undefined;
+    /** Initial expansion depth for `Syntax.Depth` / `getReplacer`. */
+    defaultDepth?: number;
+    /** Notified when the depth changes (via `Syntax.Depth`). */
+    onDepthChange?: (depth: number) => void;
 }>;
-declare function SyntaxRoot(props: ScopedProps<SyntaxRootProps>): React.JSX.Element;
+declare function SyntaxRoot(props: SyntaxScopedProps<SyntaxRootProps>): React.JSX.Element;
 declare namespace SyntaxRoot {
     var displayName: string;
 }
@@ -25,32 +44,37 @@ type SyntaxContentProps = ComposableProps;
 type SyntaxFilterProps = ComposableProps<{
     placeholder?: string;
 }>;
+type SyntaxDepthProps = ComposableProps;
 type SyntaxViewportProps = ComposableProps;
 type SyntaxCodeProps = ComposableProps<{
     testId?: string;
 }>;
 export declare const Syntax: {
     Root: {
-        (props: ScopedProps<SyntaxRootProps>): React.JSX.Element;
+        (props: SyntaxScopedProps<SyntaxRootProps>): React.JSX.Element;
         displayName: string;
     };
     Content: React.ForwardRefExoticComponent<Omit<SyntaxContentProps, "className"> & {
         classNames?: import("@dxos/ui-types").ClassNameValue;
-    } & Pick<React.HTMLAttributes<Element>, "children" | "className" | "role" | "style"> & React.RefAttributes<HTMLDivElement>>;
+    } & Pick<React.HTMLAttributes<Element>, "children" | "role" | "style"> & React.RefAttributes<HTMLDivElement>>;
     Filter: React.ForwardRefExoticComponent<Omit<{
         placeholder?: string;
     }, "className"> & {
         classNames?: import("@dxos/ui-types").ClassNameValue;
-    } & Pick<React.HTMLAttributes<Element>, "children" | "className" | "role" | "style"> & {
-        __scopeSyntax?: Scope;
+    } & Pick<React.HTMLAttributes<Element>, "children" | "role" | "style"> & {
+        __scopeSyntax?: import("@radix-ui/react-context").Scope;
+    } & React.RefAttributes<HTMLInputElement>>;
+    Depth: React.ForwardRefExoticComponent<Omit<{}, "className"> & {
+        classNames?: import("@dxos/ui-types").ClassNameValue;
+    } & Pick<React.HTMLAttributes<Element>, "children" | "role" | "style"> & {
+        __scopeSyntax?: import("@radix-ui/react-context").Scope;
     } & React.RefAttributes<HTMLInputElement>>;
     Viewport: React.ForwardRefExoticComponent<Omit<SyntaxViewportProps, "className"> & {
         classNames?: import("@dxos/ui-types").ClassNameValue;
-    } & Pick<React.HTMLAttributes<Element>, "children" | "className" | "role" | "style"> & React.RefAttributes<HTMLDivElement>>;
-    Code: React.ForwardRefExoticComponent<Omit<ScopedProps<SyntaxCodeProps>, "className"> & {
+    } & Pick<React.HTMLAttributes<Element>, "children" | "role" | "style"> & React.RefAttributes<HTMLDivElement>>;
+    Code: React.ForwardRefExoticComponent<Omit<SyntaxScopedProps<SyntaxCodeProps>, "className"> & {
         classNames?: import("@dxos/ui-types").ClassNameValue;
-    } & Pick<React.HTMLAttributes<Element>, "children" | "className" | "role" | "style"> & React.RefAttributes<HTMLDivElement>>;
+    } & Pick<React.HTMLAttributes<Element>, "children" | "role" | "style"> & React.RefAttributes<HTMLDivElement>>;
 };
-export { createSyntaxScope };
-export type { SyntaxCodeProps, SyntaxContentProps, SyntaxFilterProps, SyntaxRootProps, SyntaxViewportProps };
+export type { SyntaxCodeProps, SyntaxContentProps, SyntaxDepthProps, SyntaxFilterProps, SyntaxRootProps, SyntaxViewportProps, };
 //# sourceMappingURL=Syntax.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Syntax.d.ts","sourceRoot":"","sources":["../../../../src/Syntax/Syntax.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,KAAK,EAAsB,MAAM,yBAAyB,CAAC;AAEzE,OAAO,KAAK,EAAE,EAAE,KAAK,iBAAiB,EAAiC,MAAM,OAAO,CAAC;AAIrF,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAEtD,OAAO,EAAmB,KAAK,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAuBxE,KAAK,WAAW,CAAC,CAAC,IAAI,CAAC,GAAG;IAAE,aAAa,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAEpD,QAAA,MAA4B,iBAAiB,+CAAmC,CAAC;AASjF,KAAK,eAAe,GAAG,iBAAiB,CAAC;IAEvC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,IAAI,CAAC,EAAE,GAAG,CAAC;IACX;;;;OAIG;IACH,QAAQ,CAAC,EAAE,YAAY,CAAC;CACzB,CAAC,CAAC;4BAQiB,KAAK,EAAE,WAAW,CAAC,eAAe,CAAC;;;;AA2CvD,KAAK,kBAAkB,GAAG,eAAe,CAAC;AAmB1C,KAAK,iBAAiB,GAAG,eAAe,CAAC;IACvC,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC,CAAC;AAiCH,KAAK,mBAAmB,GAAG,eAAe,CAAC;AAmB3C,KAAK,eAAe,GAAG,eAAe,CAAC;IACrC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC,CAAC;AAkCH,eAAO,MAAM,MAAM;IACjB,IAAI;gBAzJqB,WAAW,CAAC,eAAe,CAAC;;;IA0JrD,OAAO;;;IACP,MAAM;sBA5FQ,MAAM;;;;wBA9FsB,KAAK;;IA2L/C,QAAQ;;;IACR,IAAI;;;CACL,CAAC;AAEF,OAAO,EAAE,iBAAiB,EAAE,CAAC;AAE7B,YAAY,EAAE,eAAe,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,eAAe,EAAE,mBAAmB,EAAE,CAAC"}
+{"version":3,"file":"Syntax.d.ts","sourceRoot":"","sources":["../../../../src/Syntax/Syntax.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,EAAE,KAAK,iBAAiB,EAA8C,MAAM,OAAO,CAAC;AAIlG,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAEtD,OAAO,EAAmB,KAAK,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAExE,OAAO,EAAkB,KAAK,iBAAiB,EAAoB,MAAM,iBAAiB,CAAC;AAM3F,MAAM,MAAM,kBAAkB,GAAG;IAC/B,IAAI,EAAE,MAAM,GAAG,MAAM,CAAC;IAEtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,IAAI,CAAC,EAAE,GAAG,CAAC;IACX,YAAY,CAAC,EAAE,GAAG,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,WAAW,EAAE,KAAK,GAAG,IAAI,CAAC;IAC1B,QAAQ,CAAC,EAAE,YAAY,CAAC;IAExB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC,CAAC;AAQF,KAAK,eAAe,GAAG,iBAAiB,CAAC;IAEvC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,IAAI,CAAC,EAAE,GAAG,CAAC;IACX;;;;OAIG;IACH,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB;;;;OAIG;IACH,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,YAAY,GAAG,SAAS,CAAC;IAC1D,kEAAkE;IAClE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,4DAA4D;IAC5D,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC,CAAC,CAAC;4BAQiB,KAAK,EAAE,iBAAiB,CAAC,eAAe,CAAC;;;;AA2D7D,KAAK,kBAAkB,GAAG,eAAe,CAAC;AAmB1C,KAAK,iBAAiB,GAAG,eAAe,CAAC;IACvC,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC,CAAC;AAiCH,KAAK,gBAAgB,GAAG,eAAe,CAAC;AAmCxC,KAAK,mBAAmB,GAAG,eAAe,CAAC;AAmB3C,KAAK,eAAe,GAAG,eAAe,CAAC;IACrC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC,CAAC;AAkCH,eAAO,MAAM,MAAM;IACjB,IAAI;gBA5MqB,iBAAiB,CAAC,eAAe,CAAC;;;IA6M3D,OAAO;;;IACP,MAAM;sBA/HQ,MAAM;;;;;;IAgIpB,KAAK;;;;;IACL,QAAQ;;;IACR,IAAI;;;CACL,CAAC;AAEF,YAAY,EACV,eAAe,EACf,kBAAkB,EAClB,gBAAgB,EAChB,iBAAiB,EACjB,eAAe,EACf,mBAAmB,GACpB,CAAC"}

package/dist/types/src/Syntax/Syntax.stories.d.ts

@@ -3,16 +3,7 @@ import React from 'react';
 declare const meta: {
     title: string;
     component: {
-        (props: {
-            language?: string;
-            source?: string;
-            data?: any;
-            replacer?: import("..").JsonReplacer;
-        } & {
-            children?: React.ReactNode | undefined;
-        } & {
-            __scopeSyntax?: import("@radix-ui/react-context").Scope;
-        }): React.JSX.Element;
+        (props: import("./SyntaxContext").SyntaxScopedProps<import("./Syntax").SyntaxRootProps>): React.JSX.Element;
         displayName: string;
     };
     decorators: import("@storybook/react").Decorator[];

package/dist/types/src/Syntax/Syntax.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Syntax.stories.d.ts","sourceRoot":"","sources":["../../../../src/Syntax/Syntax.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAa,KAAK,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,KAAK,MAAM,OAAO,CAAC;AA8C1B,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;CAIM,CAAC;eAEF,IAAI;AAEnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,yDAAyD;AACzD,eAAO,MAAM,IAAI,EAAE,KAelB,CAAC;AAEF,gFAAgF;AAChF,eAAO,MAAM,IAAI,EAAE,KAkBlB,CAAC"}
+{"version":3,"file":"Syntax.stories.d.ts","sourceRoot":"","sources":["../../../../src/Syntax/Syntax.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAa,KAAK,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,KAAK,MAAM,OAAO,CAAC;AA8C1B,QAAA,MAAM,IAAI;;;;;;;CAIM,CAAC;eAEF,IAAI;AAEnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,yDAAyD;AACzD,eAAO,MAAM,IAAI,EAAE,KAelB,CAAC;AAEF,gFAAgF;AAChF,eAAO,MAAM,IAAI,EAAE,KAkBlB,CAAC"}

package/dist/types/src/Syntax/SyntaxContext.d.ts

@@ -0,0 +1,15 @@
+import { type Scope } from '@radix-ui/react-context';
+import { type SyntaxContextValue } from './Syntax';
+export declare const SYNTAX_NAME = "Syntax";
+export type SyntaxScopedProps<P> = P & {
+    __scopeSyntax?: Scope;
+};
+export declare const createSyntaxContext: <ContextValueType extends object | null>(rootComponentName: string, defaultContext?: ContextValueType | undefined) => readonly [React.FC<ContextValueType & {
+    scope: Scope<ContextValueType>;
+    children: import("react").ReactNode;
+}>, (consumerName: string, scope: Scope<ContextValueType | undefined>) => ContextValueType], createSyntaxScope: import("@radix-ui/react-context").CreateScope;
+export declare const SyntaxProvider: import("react").FC<SyntaxContextValue & {
+    scope: Scope<SyntaxContextValue>;
+    children: React.ReactNode;
+}>, useSyntaxContext: (consumerName: string, scope: Scope<SyntaxContextValue | undefined>) => SyntaxContextValue;
+//# sourceMappingURL=SyntaxContext.d.ts.map

package/dist/types/src/Syntax/SyntaxContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SyntaxContext.d.ts","sourceRoot":"","sources":["../../../../src/Syntax/SyntaxContext.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,KAAK,EAAsB,MAAM,yBAAyB,CAAC;AAEzE,OAAO,EAAE,KAAK,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAKnD,eAAO,MAAM,WAAW,WAAW,CAAC;AAEpC,MAAM,MAAM,iBAAiB,CAAC,CAAC,IAAI,CAAC,GAAG;IAAE,aAAa,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAEjE,eAAO,MAAO,mBAAmB;;;6FAAE,iBAAiB,+CAAmC,CAAC;AACxF,eAAO,MAAO,cAAc;;;IAAE,gBAAgB,4FAAwD,CAAC"}

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

@@ -1,2 +1,3 @@
+export { createSyntaxScope } from './SyntaxContext';
 export * from './Syntax';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Syntax/index.ts"],"names":[],"mappings":"AAIA,cAAc,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Syntax/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAEpD,cAAc,UAAU,CAAC"}

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

@@ -19,5 +19,5 @@ export type SyntaxHighlighterProps = Pick<NaturalSyntaxHighlighterProps, 'langua
  */
 export declare const SyntaxHighlighter: React.ForwardRefExoticComponent<Omit<SyntaxHighlighterProps, "className"> & {
     classNames?: import("@dxos/ui-types").ClassNameValue;
-} & Pick<React.HTMLAttributes<Element>, "children" | "className" | "role" | "style"> & React.RefAttributes<HTMLDivElement>>;
+} & Pick<React.HTMLAttributes<Element>, "children" | "role" | "style"> & React.RefAttributes<HTMLDivElement>>;
 //# sourceMappingURL=SyntaxHighlighter.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"SyntaxHighlighter.d.ts","sourceRoot":"","sources":["../../../../src/SyntaxHighlighter/SyntaxHighlighter.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,KAAK,sBAAsB,IAAI,6BAA6B,EAAE,MAAM,0BAA0B,CAAC;AAcxG,MAAM,MAAM,sBAAsB,GAAG,IAAI,CACvC,6BAA6B,EAC3B,UAAU,GACV,UAAU,GACV,iBAAiB,GACjB,uBAAuB,GACvB,oBAAoB,GACpB,WAAW,GACX,eAAe,GACf,QAAQ,CACX,GAAG;IACF,UAAU,CAAC,EAAE,6BAA6B,CAAC,OAAO,CAAC,CAAC;IACpD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,iBAAiB;;2HAoE7B,CAAC"}
+{"version":3,"file":"SyntaxHighlighter.d.ts","sourceRoot":"","sources":["../../../../src/SyntaxHighlighter/SyntaxHighlighter.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,KAAK,sBAAsB,IAAI,6BAA6B,EAAE,MAAM,0BAA0B,CAAC;AAcxG,MAAM,MAAM,sBAAsB,GAAG,IAAI,CACvC,6BAA6B,EAC3B,UAAU,GACV,UAAU,GACV,iBAAiB,GACjB,uBAAuB,GACvB,oBAAoB,GACpB,WAAW,GACX,eAAe,GACf,QAAQ,CACX,GAAG;IACF,UAAU,CAAC,EAAE,6BAA6B,CAAC,OAAO,CAAC,CAAC;IACpD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,iBAAiB;;6GAoE7B,CAAC"}

package/dist/types/src/SyntaxHighlighter/SyntaxHighlighter.stories.d.ts

@@ -4,7 +4,7 @@ declare const meta: {
     title: string;
     component: import("react").ForwardRefExoticComponent<Omit<import("./SyntaxHighlighter").SyntaxHighlighterProps, "className"> & {
         classNames?: import("@dxos/ui-types").ClassNameValue;
-    } & Pick<import("react").HTMLAttributes<Element>, "children" | "className" | "role" | "style"> & import("react").RefAttributes<HTMLDivElement>>;
+    } & Pick<import("react").HTMLAttributes<Element>, "children" | "role" | "style"> & import("react").RefAttributes<HTMLDivElement>>;
     decorators: import("@storybook/react").Decorator[];
     parameters: {
         layout: string;