@invana/editor 0.0.25 → 0.0.27

package/dist/index.cjs

@@ -85,6 +85,7 @@ var MODES = {
   python: () => language.StreamLanguage.define(python.python),
   shell: () => language.StreamLanguage.define(shell.shell),
   javascript: () => language.StreamLanguage.define(javascript.javascript),
+  json: () => language.StreamLanguage.define(javascript.json),
   cypher: () => language.StreamLanguage.define(cypher.cypher),
   plain: () => null
 };
@@ -92,7 +93,9 @@ function CodeBlock({
   value,
   language: language$1 = "plain",
   showLineNumbers,
+  maxHeight,
   className,
+  style,
   ...props
 }) {
   const extensions = React__namespace.useMemo(() => {
@@ -105,9 +108,13 @@ function CodeBlock({
       state.EditorState.readOnly.of(true),
       view.EditorView.lineWrapping,
       ...showLineNumbers ? [view.lineNumbers()] : [],
-      ...mode ? [mode] : []
+      ...mode ? [mode] : [],
+      // The scroller lives inside CodeMirror rather than on the wrapper, so the
+      // editor knows its own viewport and does not render every line of a long
+      // document into a box that then clips them.
+      ...maxHeight != null ? [view.EditorView.theme({ "&": { maxHeight: `${maxHeight}px` } })] : []
     ];
-  }, [language$1, showLineNumbers]);
+  }, [language$1, showLineNumbers, maxHeight]);
   const { ref } = useCodeMirror({ value, extensions });
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -119,6 +126,7 @@ function CodeBlock({
         "[&_.cm-gutters]:border-none [&_.cm-gutters]:bg-transparent [&_.cm-gutters]:text-muted-foreground",
         className
       ),
+      style,
       ...props
     }
   );

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/use-code-mirror.ts","../src/code-block.tsx","../src/markdown-editor-block.tsx"],"names":["React","view","Compartment","EditorView","EditorState","StreamLanguage","python","shell","javascript","cypher","language","React2","syntaxHighlighting","defaultHighlightStyle","lineNumbers","jsx","cn","React3","history","keymap","defaultKeymap","historyKeymap","jsxs"],"mappings":"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","file":"index.cjs","sourcesContent":["import * as React from \"react\"\nimport { Compartment, EditorState, type Extension } from \"@codemirror/state\"\nimport { EditorView } from \"@codemirror/view\"\n\nexport interface UseCodeMirrorOptions {\n  value: string\n  extensions: Extension[]\n  onChange?: (value: string) => void\n}\n\n/**\n * Mounts a CodeMirror view into a ref'd element and keeps it in sync.\n *\n * The whole reason this is a hook rather than a component: CodeMirror owns its\n * own DOM, so React must not re-render into it. Value changes are pushed as\n * transactions, and only when they actually differ — writing the view's own\n * output back into it would move the cursor to the end on every keystroke.\n */\nexport function useCodeMirror({\n  value,\n  extensions,\n  onChange,\n}: UseCodeMirrorOptions) {\n  const host = React.useRef<HTMLDivElement | null>(null)\n  const view = React.useRef<EditorView | null>(null)\n\n  // Keep the latest onChange without tearing down the view when it changes\n  // identity — a caller passing an inline arrow would otherwise remount the\n  // editor on every render.\n  const onChangeRef = React.useRef(onChange)\n  React.useEffect(() => {\n    onChangeRef.current = onChange\n  }, [onChange])\n\n  // The view is created once and reconfigured in place. Keying the effect on\n  // `extensions` identity looked simpler, but a caller passing an inline array\n  // would then rebuild the editor on every render — losing the cursor, the\n  // selection and focus mid-keystroke. \"Callers are expected to memoise\" is a\n  // trap, not a contract, so the hook does not depend on it.\n  const extensionsRef = React.useRef(extensions)\n  extensionsRef.current = extensions\n\n  const compartment = React.useRef(new Compartment())\n\n  React.useEffect(() => {\n    if (!host.current) return\n    const v = new EditorView({\n      state: EditorState.create({\n        doc: value,\n        extensions: [\n          compartment.current.of(extensionsRef.current),\n          EditorView.updateListener.of((u) => {\n            if (u.docChanged) onChangeRef.current?.(u.state.doc.toString())\n          }),\n        ],\n      }),\n      parent: host.current,\n    })\n    view.current = v\n    return () => {\n      v.destroy()\n      view.current = null\n    }\n    // Mount once. Configuration changes go through the compartment below.\n  }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n  // Swap configuration without touching the document — this is what a\n  // Compartment is for, and it is why toggling `readOnly` or a language keeps\n  // the caret where it was.\n  React.useEffect(() => {\n    const v = view.current\n    if (!v) return\n    v.dispatch({ effects: compartment.current.reconfigure(extensions) })\n  }, [extensions])\n\n  React.useEffect(() => {\n    const v = view.current\n    if (!v) return\n    const current = v.state.doc.toString()\n    if (current === value) return\n    v.dispatch({ changes: { from: 0, to: current.length, insert: value } })\n  }, [value])\n\n  return { ref: host, view }\n}\n","import * as React from \"react\"\nimport { EditorView, lineNumbers } from \"@codemirror/view\"\nimport { EditorState } from \"@codemirror/state\"\nimport {\n  StreamLanguage,\n  syntaxHighlighting,\n  defaultHighlightStyle,\n} from \"@codemirror/language\"\nimport { python } from \"@codemirror/legacy-modes/mode/python\"\nimport { shell } from \"@codemirror/legacy-modes/mode/shell\"\nimport { javascript } from \"@codemirror/legacy-modes/mode/javascript\"\nimport { cypher } from \"@codemirror/legacy-modes/mode/cypher\"\nimport { cn } from \"@invana/ui\"\n\nimport { useCodeMirror } from \"./use-code-mirror\"\n\nexport type CodeLanguage = \"python\" | \"shell\" | \"javascript\" | \"cypher\" | \"plain\"\n\nexport interface CodeBlockProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  value: string\n  language?: CodeLanguage\n  /** Line numbers are off by default — a five-line snippet does not need a gutter. */\n  showLineNumbers?: boolean\n}\n\nconst MODES = {\n  python: () => StreamLanguage.define(python),\n  shell: () => StreamLanguage.define(shell),\n  javascript: () => StreamLanguage.define(javascript),\n  cypher: () => StreamLanguage.define(cypher),\n  plain: () => null,\n}\n\n/**\n * Code, shown as it is — read-only.\n *\n * The DAG in a hand-off, a query in a diagnosis, an exported model. It is not a\n * disabled editor: `EditorState.readOnly` plus a non-editable view means there\n * is no cursor to place and no illusion that typing would do something.\n */\nexport function CodeBlock({\n  value,\n  language = \"plain\",\n  showLineNumbers,\n  className,\n  ...props\n}: CodeBlockProps) {\n  const extensions = React.useMemo(() => {\n    const mode = MODES[language]()\n    return [\n      // StreamLanguage only produces tokens; without a highlight style nothing\n      // paints them and the block renders as flat text.\n      syntaxHighlighting(defaultHighlightStyle, { fallback: true }),\n      EditorView.editable.of(false),\n      EditorState.readOnly.of(true),\n      EditorView.lineWrapping,\n      ...(showLineNumbers ? [lineNumbers()] : []),\n      ...(mode ? [mode] : []),\n    ]\n  }, [language, showLineNumbers])\n\n  const { ref } = useCodeMirror({ value, extensions })\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        \"overflow-hidden border border-border bg-muted/40 [&_.cm-editor]:bg-transparent\",\n        \"[&_.cm-content]:font-mono [&_.cm-content]:text-meta [&_.cm-focused]:outline-none\",\n        \"[&_.cm-gutters]:border-none [&_.cm-gutters]:bg-transparent [&_.cm-gutters]:text-muted-foreground\",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n","import * as React from \"react\"\nimport { EditorView } from \"@codemirror/view\"\nimport { history, defaultKeymap, historyKeymap } from \"@codemirror/commands\"\nimport { keymap } from \"@codemirror/view\"\nimport { cn } from \"@invana/ui\"\n\nimport { useCodeMirror } from \"./use-code-mirror\"\n\nexport interface MarkdownEditorBlockProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, \"onChange\" | \"children\"> {\n  value: string\n  onChange?: (value: string) => void\n  readOnly?: boolean\n  /** A version marker shown in the corner — `v5`, `v7 · editing`. */\n  version?: React.ReactNode\n  placeholder?: string\n}\n\n/**\n * The prose a person writes for an agent to read — graph rules, a skill's\n * content, an acceptance note.\n *\n * Plain markdown in a monospace field, not a rich-text editor. What is typed\n * here is offered verbatim in a model's prompt, so what you see has to be\n * exactly what the agent gets; a WYSIWYG layer would put a translation step\n * between the author and the thing that runs.\n *\n * `version` sits in the corner because these documents are versioned and a\n * running thinking finishes on the version it started with — editing without\n * seeing which version you are on is how two people overwrite each other.\n */\nexport function MarkdownEditorBlock({\n  value,\n  onChange,\n  readOnly,\n  version,\n  className,\n  ...props\n}: MarkdownEditorBlockProps) {\n  const extensions = React.useMemo(\n    () => [\n      // No markdown syntax mode, deliberately. What is typed here is offered\n      // verbatim in a model's prompt, and highlighting it would be decoration\n      // on text whose whole contract is that it is plain. It also keeps this\n      // package's dependencies to the CodeMirror set the product already ships.\n      EditorView.lineWrapping,\n      history(),\n      keymap.of([...defaultKeymap, ...historyKeymap]),\n      EditorView.editable.of(!readOnly),\n    ],\n    [readOnly],\n  )\n\n  const { ref } = useCodeMirror({ value, extensions, onChange })\n\n  return (\n    <div className={cn(\"relative border border-border bg-muted/40\", className)} {...props}>\n      {version != null ? (\n        <span className=\"absolute right-1 top-1 z-10 border border-border bg-card px-1 text-meta text-muted-foreground\">\n          {version}\n        </span>\n      ) : null}\n      <div\n        ref={ref}\n        className={cn(\n          \"[&_.cm-editor]:bg-transparent [&_.cm-content]:font-mono [&_.cm-content]:text-meta\",\n          \"[&_.cm-focused]:outline-none [&_.cm-cursor]:border-foreground\",\n        )}\n      />\n    </div>\n  )\n}\n"]}
+{"version":3,"sources":["../src/use-code-mirror.ts","../src/code-block.tsx","../src/markdown-editor-block.tsx"],"names":["React","view","Compartment","EditorView","EditorState","StreamLanguage","python","shell","javascript","json","cypher","language","React2","syntaxHighlighting","defaultHighlightStyle","lineNumbers","jsx","cn","React3","history","keymap","defaultKeymap","historyKeymap","jsxs"],"mappings":"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","file":"index.cjs","sourcesContent":["import * as React from \"react\"\nimport { Compartment, EditorState, type Extension } from \"@codemirror/state\"\nimport { EditorView } from \"@codemirror/view\"\n\nexport interface UseCodeMirrorOptions {\n  value: string\n  extensions: Extension[]\n  onChange?: (value: string) => void\n}\n\n/**\n * Mounts a CodeMirror view into a ref'd element and keeps it in sync.\n *\n * The whole reason this is a hook rather than a component: CodeMirror owns its\n * own DOM, so React must not re-render into it. Value changes are pushed as\n * transactions, and only when they actually differ — writing the view's own\n * output back into it would move the cursor to the end on every keystroke.\n */\nexport function useCodeMirror({\n  value,\n  extensions,\n  onChange,\n}: UseCodeMirrorOptions) {\n  const host = React.useRef<HTMLDivElement | null>(null)\n  const view = React.useRef<EditorView | null>(null)\n\n  // Keep the latest onChange without tearing down the view when it changes\n  // identity — a caller passing an inline arrow would otherwise remount the\n  // editor on every render.\n  const onChangeRef = React.useRef(onChange)\n  React.useEffect(() => {\n    onChangeRef.current = onChange\n  }, [onChange])\n\n  // The view is created once and reconfigured in place. Keying the effect on\n  // `extensions` identity looked simpler, but a caller passing an inline array\n  // would then rebuild the editor on every render — losing the cursor, the\n  // selection and focus mid-keystroke. \"Callers are expected to memoise\" is a\n  // trap, not a contract, so the hook does not depend on it.\n  const extensionsRef = React.useRef(extensions)\n  extensionsRef.current = extensions\n\n  const compartment = React.useRef(new Compartment())\n\n  React.useEffect(() => {\n    if (!host.current) return\n    const v = new EditorView({\n      state: EditorState.create({\n        doc: value,\n        extensions: [\n          compartment.current.of(extensionsRef.current),\n          EditorView.updateListener.of((u) => {\n            if (u.docChanged) onChangeRef.current?.(u.state.doc.toString())\n          }),\n        ],\n      }),\n      parent: host.current,\n    })\n    view.current = v\n    return () => {\n      v.destroy()\n      view.current = null\n    }\n    // Mount once. Configuration changes go through the compartment below.\n  }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n  // Swap configuration without touching the document — this is what a\n  // Compartment is for, and it is why toggling `readOnly` or a language keeps\n  // the caret where it was.\n  React.useEffect(() => {\n    const v = view.current\n    if (!v) return\n    v.dispatch({ effects: compartment.current.reconfigure(extensions) })\n  }, [extensions])\n\n  React.useEffect(() => {\n    const v = view.current\n    if (!v) return\n    const current = v.state.doc.toString()\n    if (current === value) return\n    v.dispatch({ changes: { from: 0, to: current.length, insert: value } })\n  }, [value])\n\n  return { ref: host, view }\n}\n","import * as React from \"react\"\nimport { EditorView, lineNumbers } from \"@codemirror/view\"\nimport { EditorState } from \"@codemirror/state\"\nimport {\n  StreamLanguage,\n  syntaxHighlighting,\n  defaultHighlightStyle,\n} from \"@codemirror/language\"\nimport { python } from \"@codemirror/legacy-modes/mode/python\"\nimport { shell } from \"@codemirror/legacy-modes/mode/shell\"\nimport { javascript, json } from \"@codemirror/legacy-modes/mode/javascript\"\nimport { cypher } from \"@codemirror/legacy-modes/mode/cypher\"\nimport { cn } from \"@invana/ui\"\n\nimport { useCodeMirror } from \"./use-code-mirror\"\n\nexport type CodeLanguage =\n  | \"python\"\n  | \"shell\"\n  | \"javascript\"\n  | \"json\"\n  | \"cypher\"\n  | \"plain\"\n\nexport interface CodeBlockProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  value: string\n  language?: CodeLanguage\n  /** Line numbers are off by default — a five-line snippet does not need a gutter. */\n  showLineNumbers?: boolean\n  /**\n   * Cap the block's height in px and let it scroll inside that, for a document\n   * whose length is not the point — a run's `result.json`, an exported model.\n   *\n   * Unset, the block is as tall as its content, which is right for a snippet\n   * and wrong for a record that grows as a run proceeds.\n   */\n  maxHeight?: number\n}\n\nconst MODES = {\n  python: () => StreamLanguage.define(python),\n  shell: () => StreamLanguage.define(shell),\n  javascript: () => StreamLanguage.define(javascript),\n  json: () => StreamLanguage.define(json),\n  cypher: () => StreamLanguage.define(cypher),\n  plain: () => null,\n}\n\n/**\n * Code, shown as it is — read-only.\n *\n * The DAG in a hand-off, a query in a diagnosis, an exported model. It is not a\n * disabled editor: `EditorState.readOnly` plus a non-editable view means there\n * is no cursor to place and no illusion that typing would do something.\n */\nexport function CodeBlock({\n  value,\n  language = \"plain\",\n  showLineNumbers,\n  maxHeight,\n  className,\n  style,\n  ...props\n}: CodeBlockProps) {\n  const extensions = React.useMemo(() => {\n    const mode = MODES[language]()\n    return [\n      // StreamLanguage only produces tokens; without a highlight style nothing\n      // paints them and the block renders as flat text.\n      syntaxHighlighting(defaultHighlightStyle, { fallback: true }),\n      EditorView.editable.of(false),\n      EditorState.readOnly.of(true),\n      EditorView.lineWrapping,\n      ...(showLineNumbers ? [lineNumbers()] : []),\n      ...(mode ? [mode] : []),\n      // The scroller lives inside CodeMirror rather than on the wrapper, so the\n      // editor knows its own viewport and does not render every line of a long\n      // document into a box that then clips them.\n      ...(maxHeight != null\n        ? [EditorView.theme({ \"&\": { maxHeight: `${maxHeight}px` } })]\n        : []),\n    ]\n  }, [language, showLineNumbers, maxHeight])\n\n  const { ref } = useCodeMirror({ value, extensions })\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        \"overflow-hidden border border-border bg-muted/40 [&_.cm-editor]:bg-transparent\",\n        \"[&_.cm-content]:font-mono [&_.cm-content]:text-meta [&_.cm-focused]:outline-none\",\n        \"[&_.cm-gutters]:border-none [&_.cm-gutters]:bg-transparent [&_.cm-gutters]:text-muted-foreground\",\n        className,\n      )}\n      style={style}\n      {...props}\n    />\n  )\n}\n","import * as React from \"react\"\nimport { EditorView } from \"@codemirror/view\"\nimport { history, defaultKeymap, historyKeymap } from \"@codemirror/commands\"\nimport { keymap } from \"@codemirror/view\"\nimport { cn } from \"@invana/ui\"\n\nimport { useCodeMirror } from \"./use-code-mirror\"\n\nexport interface MarkdownEditorBlockProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, \"onChange\" | \"children\"> {\n  value: string\n  onChange?: (value: string) => void\n  readOnly?: boolean\n  /** A version marker shown in the corner — `v5`, `v7 · editing`. */\n  version?: React.ReactNode\n  placeholder?: string\n}\n\n/**\n * The prose a person writes for an agent to read — graph rules, a skill's\n * content, an acceptance note.\n *\n * Plain markdown in a monospace field, not a rich-text editor. What is typed\n * here is offered verbatim in a model's prompt, so what you see has to be\n * exactly what the agent gets; a WYSIWYG layer would put a translation step\n * between the author and the thing that runs.\n *\n * `version` sits in the corner because these documents are versioned and a\n * running thinking finishes on the version it started with — editing without\n * seeing which version you are on is how two people overwrite each other.\n */\nexport function MarkdownEditorBlock({\n  value,\n  onChange,\n  readOnly,\n  version,\n  className,\n  ...props\n}: MarkdownEditorBlockProps) {\n  const extensions = React.useMemo(\n    () => [\n      // No markdown syntax mode, deliberately. What is typed here is offered\n      // verbatim in a model's prompt, and highlighting it would be decoration\n      // on text whose whole contract is that it is plain. It also keeps this\n      // package's dependencies to the CodeMirror set the product already ships.\n      EditorView.lineWrapping,\n      history(),\n      keymap.of([...defaultKeymap, ...historyKeymap]),\n      EditorView.editable.of(!readOnly),\n    ],\n    [readOnly],\n  )\n\n  const { ref } = useCodeMirror({ value, extensions, onChange })\n\n  return (\n    <div className={cn(\"relative border border-border bg-muted/40\", className)} {...props}>\n      {version != null ? (\n        <span className=\"absolute right-1 top-1 z-10 border border-border bg-card px-1 text-meta text-muted-foreground\">\n          {version}\n        </span>\n      ) : null}\n      <div\n        ref={ref}\n        className={cn(\n          \"[&_.cm-editor]:bg-transparent [&_.cm-content]:font-mono [&_.cm-content]:text-meta\",\n          \"[&_.cm-focused]:outline-none [&_.cm-cursor]:border-foreground\",\n        )}\n      />\n    </div>\n  )\n}\n"]}

package/dist/index.d.cts

@@ -2,12 +2,20 @@ import * as React from 'react';
 import { Extension } from '@codemirror/state';
 import { EditorView } from '@codemirror/view';
 
-type CodeLanguage = "python" | "shell" | "javascript" | "cypher" | "plain";
+type CodeLanguage = "python" | "shell" | "javascript" | "json" | "cypher" | "plain";
 interface CodeBlockProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
     value: string;
     language?: CodeLanguage;
     /** Line numbers are off by default — a five-line snippet does not need a gutter. */
     showLineNumbers?: boolean;
+    /**
+     * Cap the block's height in px and let it scroll inside that, for a document
+     * whose length is not the point — a run's `result.json`, an exported model.
+     *
+     * Unset, the block is as tall as its content, which is right for a snippet
+     * and wrong for a record that grows as a run proceeds.
+     */
+    maxHeight?: number;
 }
 /**
  * Code, shown as it is — read-only.
@@ -16,7 +24,7 @@ interface CodeBlockProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onC
  * disabled editor: `EditorState.readOnly` plus a non-editable view means there
  * is no cursor to place and no illusion that typing would do something.
  */
-declare function CodeBlock({ value, language, showLineNumbers, className, ...props }: CodeBlockProps): React.JSX.Element;
+declare function CodeBlock({ value, language, showLineNumbers, maxHeight, className, style, ...props }: CodeBlockProps): React.JSX.Element;
 
 interface MarkdownEditorBlockProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "children"> {
     value: string;

package/dist/index.d.ts

@@ -2,12 +2,20 @@ import * as React from 'react';
 import { Extension } from '@codemirror/state';
 import { EditorView } from '@codemirror/view';
 
-type CodeLanguage = "python" | "shell" | "javascript" | "cypher" | "plain";
+type CodeLanguage = "python" | "shell" | "javascript" | "json" | "cypher" | "plain";
 interface CodeBlockProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
     value: string;
     language?: CodeLanguage;
     /** Line numbers are off by default — a five-line snippet does not need a gutter. */
     showLineNumbers?: boolean;
+    /**
+     * Cap the block's height in px and let it scroll inside that, for a document
+     * whose length is not the point — a run's `result.json`, an exported model.
+     *
+     * Unset, the block is as tall as its content, which is right for a snippet
+     * and wrong for a record that grows as a run proceeds.
+     */
+    maxHeight?: number;
 }
 /**
  * Code, shown as it is — read-only.
@@ -16,7 +24,7 @@ interface CodeBlockProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onC
  * disabled editor: `EditorState.readOnly` plus a non-editable view means there
  * is no cursor to place and no illusion that typing would do something.
  */
-declare function CodeBlock({ value, language, showLineNumbers, className, ...props }: CodeBlockProps): React.JSX.Element;
+declare function CodeBlock({ value, language, showLineNumbers, maxHeight, className, style, ...props }: CodeBlockProps): React.JSX.Element;
 
 interface MarkdownEditorBlockProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "children"> {
     value: string;

package/dist/index.js

@@ -4,7 +4,7 @@ import { Compartment, EditorState } from '@codemirror/state';
 import { syntaxHighlighting, defaultHighlightStyle, StreamLanguage } from '@codemirror/language';
 import { python } from '@codemirror/legacy-modes/mode/python';
 import { shell } from '@codemirror/legacy-modes/mode/shell';
-import { javascript } from '@codemirror/legacy-modes/mode/javascript';
+import { json, javascript } from '@codemirror/legacy-modes/mode/javascript';
 import { cypher } from '@codemirror/legacy-modes/mode/cypher';
 import { cn } from '@invana/ui';
 import { jsx, jsxs } from 'react/jsx-runtime';
@@ -63,6 +63,7 @@ var MODES = {
   python: () => StreamLanguage.define(python),
   shell: () => StreamLanguage.define(shell),
   javascript: () => StreamLanguage.define(javascript),
+  json: () => StreamLanguage.define(json),
   cypher: () => StreamLanguage.define(cypher),
   plain: () => null
 };
@@ -70,7 +71,9 @@ function CodeBlock({
   value,
   language = "plain",
   showLineNumbers,
+  maxHeight,
   className,
+  style,
   ...props
 }) {
   const extensions = React.useMemo(() => {
@@ -83,9 +86,13 @@ function CodeBlock({
       EditorState.readOnly.of(true),
       EditorView.lineWrapping,
       ...showLineNumbers ? [lineNumbers()] : [],
-      ...mode ? [mode] : []
+      ...mode ? [mode] : [],
+      // The scroller lives inside CodeMirror rather than on the wrapper, so the
+      // editor knows its own viewport and does not render every line of a long
+      // document into a box that then clips them.
+      ...maxHeight != null ? [EditorView.theme({ "&": { maxHeight: `${maxHeight}px` } })] : []
     ];
-  }, [language, showLineNumbers]);
+  }, [language, showLineNumbers, maxHeight]);
   const { ref } = useCodeMirror({ value, extensions });
   return /* @__PURE__ */ jsx(
     "div",
@@ -97,6 +104,7 @@ function CodeBlock({
         "[&_.cm-gutters]:border-none [&_.cm-gutters]:bg-transparent [&_.cm-gutters]:text-muted-foreground",
         className
       ),
+      style,
       ...props
     }
   );

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/use-code-mirror.ts","../src/code-block.tsx","../src/markdown-editor-block.tsx"],"names":["React2","EditorView","EditorState","React3","cn","jsx"],"mappings":"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","file":"index.js","sourcesContent":["import * as React from \"react\"\nimport { Compartment, EditorState, type Extension } from \"@codemirror/state\"\nimport { EditorView } from \"@codemirror/view\"\n\nexport interface UseCodeMirrorOptions {\n  value: string\n  extensions: Extension[]\n  onChange?: (value: string) => void\n}\n\n/**\n * Mounts a CodeMirror view into a ref'd element and keeps it in sync.\n *\n * The whole reason this is a hook rather than a component: CodeMirror owns its\n * own DOM, so React must not re-render into it. Value changes are pushed as\n * transactions, and only when they actually differ — writing the view's own\n * output back into it would move the cursor to the end on every keystroke.\n */\nexport function useCodeMirror({\n  value,\n  extensions,\n  onChange,\n}: UseCodeMirrorOptions) {\n  const host = React.useRef<HTMLDivElement | null>(null)\n  const view = React.useRef<EditorView | null>(null)\n\n  // Keep the latest onChange without tearing down the view when it changes\n  // identity — a caller passing an inline arrow would otherwise remount the\n  // editor on every render.\n  const onChangeRef = React.useRef(onChange)\n  React.useEffect(() => {\n    onChangeRef.current = onChange\n  }, [onChange])\n\n  // The view is created once and reconfigured in place. Keying the effect on\n  // `extensions` identity looked simpler, but a caller passing an inline array\n  // would then rebuild the editor on every render — losing the cursor, the\n  // selection and focus mid-keystroke. \"Callers are expected to memoise\" is a\n  // trap, not a contract, so the hook does not depend on it.\n  const extensionsRef = React.useRef(extensions)\n  extensionsRef.current = extensions\n\n  const compartment = React.useRef(new Compartment())\n\n  React.useEffect(() => {\n    if (!host.current) return\n    const v = new EditorView({\n      state: EditorState.create({\n        doc: value,\n        extensions: [\n          compartment.current.of(extensionsRef.current),\n          EditorView.updateListener.of((u) => {\n            if (u.docChanged) onChangeRef.current?.(u.state.doc.toString())\n          }),\n        ],\n      }),\n      parent: host.current,\n    })\n    view.current = v\n    return () => {\n      v.destroy()\n      view.current = null\n    }\n    // Mount once. Configuration changes go through the compartment below.\n  }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n  // Swap configuration without touching the document — this is what a\n  // Compartment is for, and it is why toggling `readOnly` or a language keeps\n  // the caret where it was.\n  React.useEffect(() => {\n    const v = view.current\n    if (!v) return\n    v.dispatch({ effects: compartment.current.reconfigure(extensions) })\n  }, [extensions])\n\n  React.useEffect(() => {\n    const v = view.current\n    if (!v) return\n    const current = v.state.doc.toString()\n    if (current === value) return\n    v.dispatch({ changes: { from: 0, to: current.length, insert: value } })\n  }, [value])\n\n  return { ref: host, view }\n}\n","import * as React from \"react\"\nimport { EditorView, lineNumbers } from \"@codemirror/view\"\nimport { EditorState } from \"@codemirror/state\"\nimport {\n  StreamLanguage,\n  syntaxHighlighting,\n  defaultHighlightStyle,\n} from \"@codemirror/language\"\nimport { python } from \"@codemirror/legacy-modes/mode/python\"\nimport { shell } from \"@codemirror/legacy-modes/mode/shell\"\nimport { javascript } from \"@codemirror/legacy-modes/mode/javascript\"\nimport { cypher } from \"@codemirror/legacy-modes/mode/cypher\"\nimport { cn } from \"@invana/ui\"\n\nimport { useCodeMirror } from \"./use-code-mirror\"\n\nexport type CodeLanguage = \"python\" | \"shell\" | \"javascript\" | \"cypher\" | \"plain\"\n\nexport interface CodeBlockProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  value: string\n  language?: CodeLanguage\n  /** Line numbers are off by default — a five-line snippet does not need a gutter. */\n  showLineNumbers?: boolean\n}\n\nconst MODES = {\n  python: () => StreamLanguage.define(python),\n  shell: () => StreamLanguage.define(shell),\n  javascript: () => StreamLanguage.define(javascript),\n  cypher: () => StreamLanguage.define(cypher),\n  plain: () => null,\n}\n\n/**\n * Code, shown as it is — read-only.\n *\n * The DAG in a hand-off, a query in a diagnosis, an exported model. It is not a\n * disabled editor: `EditorState.readOnly` plus a non-editable view means there\n * is no cursor to place and no illusion that typing would do something.\n */\nexport function CodeBlock({\n  value,\n  language = \"plain\",\n  showLineNumbers,\n  className,\n  ...props\n}: CodeBlockProps) {\n  const extensions = React.useMemo(() => {\n    const mode = MODES[language]()\n    return [\n      // StreamLanguage only produces tokens; without a highlight style nothing\n      // paints them and the block renders as flat text.\n      syntaxHighlighting(defaultHighlightStyle, { fallback: true }),\n      EditorView.editable.of(false),\n      EditorState.readOnly.of(true),\n      EditorView.lineWrapping,\n      ...(showLineNumbers ? [lineNumbers()] : []),\n      ...(mode ? [mode] : []),\n    ]\n  }, [language, showLineNumbers])\n\n  const { ref } = useCodeMirror({ value, extensions })\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        \"overflow-hidden border border-border bg-muted/40 [&_.cm-editor]:bg-transparent\",\n        \"[&_.cm-content]:font-mono [&_.cm-content]:text-meta [&_.cm-focused]:outline-none\",\n        \"[&_.cm-gutters]:border-none [&_.cm-gutters]:bg-transparent [&_.cm-gutters]:text-muted-foreground\",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n","import * as React from \"react\"\nimport { EditorView } from \"@codemirror/view\"\nimport { history, defaultKeymap, historyKeymap } from \"@codemirror/commands\"\nimport { keymap } from \"@codemirror/view\"\nimport { cn } from \"@invana/ui\"\n\nimport { useCodeMirror } from \"./use-code-mirror\"\n\nexport interface MarkdownEditorBlockProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, \"onChange\" | \"children\"> {\n  value: string\n  onChange?: (value: string) => void\n  readOnly?: boolean\n  /** A version marker shown in the corner — `v5`, `v7 · editing`. */\n  version?: React.ReactNode\n  placeholder?: string\n}\n\n/**\n * The prose a person writes for an agent to read — graph rules, a skill's\n * content, an acceptance note.\n *\n * Plain markdown in a monospace field, not a rich-text editor. What is typed\n * here is offered verbatim in a model's prompt, so what you see has to be\n * exactly what the agent gets; a WYSIWYG layer would put a translation step\n * between the author and the thing that runs.\n *\n * `version` sits in the corner because these documents are versioned and a\n * running thinking finishes on the version it started with — editing without\n * seeing which version you are on is how two people overwrite each other.\n */\nexport function MarkdownEditorBlock({\n  value,\n  onChange,\n  readOnly,\n  version,\n  className,\n  ...props\n}: MarkdownEditorBlockProps) {\n  const extensions = React.useMemo(\n    () => [\n      // No markdown syntax mode, deliberately. What is typed here is offered\n      // verbatim in a model's prompt, and highlighting it would be decoration\n      // on text whose whole contract is that it is plain. It also keeps this\n      // package's dependencies to the CodeMirror set the product already ships.\n      EditorView.lineWrapping,\n      history(),\n      keymap.of([...defaultKeymap, ...historyKeymap]),\n      EditorView.editable.of(!readOnly),\n    ],\n    [readOnly],\n  )\n\n  const { ref } = useCodeMirror({ value, extensions, onChange })\n\n  return (\n    <div className={cn(\"relative border border-border bg-muted/40\", className)} {...props}>\n      {version != null ? (\n        <span className=\"absolute right-1 top-1 z-10 border border-border bg-card px-1 text-meta text-muted-foreground\">\n          {version}\n        </span>\n      ) : null}\n      <div\n        ref={ref}\n        className={cn(\n          \"[&_.cm-editor]:bg-transparent [&_.cm-content]:font-mono [&_.cm-content]:text-meta\",\n          \"[&_.cm-focused]:outline-none [&_.cm-cursor]:border-foreground\",\n        )}\n      />\n    </div>\n  )\n}\n"]}
+{"version":3,"sources":["../src/use-code-mirror.ts","../src/code-block.tsx","../src/markdown-editor-block.tsx"],"names":["React2","EditorView","EditorState","React3","cn","jsx"],"mappings":"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","file":"index.js","sourcesContent":["import * as React from \"react\"\nimport { Compartment, EditorState, type Extension } from \"@codemirror/state\"\nimport { EditorView } from \"@codemirror/view\"\n\nexport interface UseCodeMirrorOptions {\n  value: string\n  extensions: Extension[]\n  onChange?: (value: string) => void\n}\n\n/**\n * Mounts a CodeMirror view into a ref'd element and keeps it in sync.\n *\n * The whole reason this is a hook rather than a component: CodeMirror owns its\n * own DOM, so React must not re-render into it. Value changes are pushed as\n * transactions, and only when they actually differ — writing the view's own\n * output back into it would move the cursor to the end on every keystroke.\n */\nexport function useCodeMirror({\n  value,\n  extensions,\n  onChange,\n}: UseCodeMirrorOptions) {\n  const host = React.useRef<HTMLDivElement | null>(null)\n  const view = React.useRef<EditorView | null>(null)\n\n  // Keep the latest onChange without tearing down the view when it changes\n  // identity — a caller passing an inline arrow would otherwise remount the\n  // editor on every render.\n  const onChangeRef = React.useRef(onChange)\n  React.useEffect(() => {\n    onChangeRef.current = onChange\n  }, [onChange])\n\n  // The view is created once and reconfigured in place. Keying the effect on\n  // `extensions` identity looked simpler, but a caller passing an inline array\n  // would then rebuild the editor on every render — losing the cursor, the\n  // selection and focus mid-keystroke. \"Callers are expected to memoise\" is a\n  // trap, not a contract, so the hook does not depend on it.\n  const extensionsRef = React.useRef(extensions)\n  extensionsRef.current = extensions\n\n  const compartment = React.useRef(new Compartment())\n\n  React.useEffect(() => {\n    if (!host.current) return\n    const v = new EditorView({\n      state: EditorState.create({\n        doc: value,\n        extensions: [\n          compartment.current.of(extensionsRef.current),\n          EditorView.updateListener.of((u) => {\n            if (u.docChanged) onChangeRef.current?.(u.state.doc.toString())\n          }),\n        ],\n      }),\n      parent: host.current,\n    })\n    view.current = v\n    return () => {\n      v.destroy()\n      view.current = null\n    }\n    // Mount once. Configuration changes go through the compartment below.\n  }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n  // Swap configuration without touching the document — this is what a\n  // Compartment is for, and it is why toggling `readOnly` or a language keeps\n  // the caret where it was.\n  React.useEffect(() => {\n    const v = view.current\n    if (!v) return\n    v.dispatch({ effects: compartment.current.reconfigure(extensions) })\n  }, [extensions])\n\n  React.useEffect(() => {\n    const v = view.current\n    if (!v) return\n    const current = v.state.doc.toString()\n    if (current === value) return\n    v.dispatch({ changes: { from: 0, to: current.length, insert: value } })\n  }, [value])\n\n  return { ref: host, view }\n}\n","import * as React from \"react\"\nimport { EditorView, lineNumbers } from \"@codemirror/view\"\nimport { EditorState } from \"@codemirror/state\"\nimport {\n  StreamLanguage,\n  syntaxHighlighting,\n  defaultHighlightStyle,\n} from \"@codemirror/language\"\nimport { python } from \"@codemirror/legacy-modes/mode/python\"\nimport { shell } from \"@codemirror/legacy-modes/mode/shell\"\nimport { javascript, json } from \"@codemirror/legacy-modes/mode/javascript\"\nimport { cypher } from \"@codemirror/legacy-modes/mode/cypher\"\nimport { cn } from \"@invana/ui\"\n\nimport { useCodeMirror } from \"./use-code-mirror\"\n\nexport type CodeLanguage =\n  | \"python\"\n  | \"shell\"\n  | \"javascript\"\n  | \"json\"\n  | \"cypher\"\n  | \"plain\"\n\nexport interface CodeBlockProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  value: string\n  language?: CodeLanguage\n  /** Line numbers are off by default — a five-line snippet does not need a gutter. */\n  showLineNumbers?: boolean\n  /**\n   * Cap the block's height in px and let it scroll inside that, for a document\n   * whose length is not the point — a run's `result.json`, an exported model.\n   *\n   * Unset, the block is as tall as its content, which is right for a snippet\n   * and wrong for a record that grows as a run proceeds.\n   */\n  maxHeight?: number\n}\n\nconst MODES = {\n  python: () => StreamLanguage.define(python),\n  shell: () => StreamLanguage.define(shell),\n  javascript: () => StreamLanguage.define(javascript),\n  json: () => StreamLanguage.define(json),\n  cypher: () => StreamLanguage.define(cypher),\n  plain: () => null,\n}\n\n/**\n * Code, shown as it is — read-only.\n *\n * The DAG in a hand-off, a query in a diagnosis, an exported model. It is not a\n * disabled editor: `EditorState.readOnly` plus a non-editable view means there\n * is no cursor to place and no illusion that typing would do something.\n */\nexport function CodeBlock({\n  value,\n  language = \"plain\",\n  showLineNumbers,\n  maxHeight,\n  className,\n  style,\n  ...props\n}: CodeBlockProps) {\n  const extensions = React.useMemo(() => {\n    const mode = MODES[language]()\n    return [\n      // StreamLanguage only produces tokens; without a highlight style nothing\n      // paints them and the block renders as flat text.\n      syntaxHighlighting(defaultHighlightStyle, { fallback: true }),\n      EditorView.editable.of(false),\n      EditorState.readOnly.of(true),\n      EditorView.lineWrapping,\n      ...(showLineNumbers ? [lineNumbers()] : []),\n      ...(mode ? [mode] : []),\n      // The scroller lives inside CodeMirror rather than on the wrapper, so the\n      // editor knows its own viewport and does not render every line of a long\n      // document into a box that then clips them.\n      ...(maxHeight != null\n        ? [EditorView.theme({ \"&\": { maxHeight: `${maxHeight}px` } })]\n        : []),\n    ]\n  }, [language, showLineNumbers, maxHeight])\n\n  const { ref } = useCodeMirror({ value, extensions })\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        \"overflow-hidden border border-border bg-muted/40 [&_.cm-editor]:bg-transparent\",\n        \"[&_.cm-content]:font-mono [&_.cm-content]:text-meta [&_.cm-focused]:outline-none\",\n        \"[&_.cm-gutters]:border-none [&_.cm-gutters]:bg-transparent [&_.cm-gutters]:text-muted-foreground\",\n        className,\n      )}\n      style={style}\n      {...props}\n    />\n  )\n}\n","import * as React from \"react\"\nimport { EditorView } from \"@codemirror/view\"\nimport { history, defaultKeymap, historyKeymap } from \"@codemirror/commands\"\nimport { keymap } from \"@codemirror/view\"\nimport { cn } from \"@invana/ui\"\n\nimport { useCodeMirror } from \"./use-code-mirror\"\n\nexport interface MarkdownEditorBlockProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, \"onChange\" | \"children\"> {\n  value: string\n  onChange?: (value: string) => void\n  readOnly?: boolean\n  /** A version marker shown in the corner — `v5`, `v7 · editing`. */\n  version?: React.ReactNode\n  placeholder?: string\n}\n\n/**\n * The prose a person writes for an agent to read — graph rules, a skill's\n * content, an acceptance note.\n *\n * Plain markdown in a monospace field, not a rich-text editor. What is typed\n * here is offered verbatim in a model's prompt, so what you see has to be\n * exactly what the agent gets; a WYSIWYG layer would put a translation step\n * between the author and the thing that runs.\n *\n * `version` sits in the corner because these documents are versioned and a\n * running thinking finishes on the version it started with — editing without\n * seeing which version you are on is how two people overwrite each other.\n */\nexport function MarkdownEditorBlock({\n  value,\n  onChange,\n  readOnly,\n  version,\n  className,\n  ...props\n}: MarkdownEditorBlockProps) {\n  const extensions = React.useMemo(\n    () => [\n      // No markdown syntax mode, deliberately. What is typed here is offered\n      // verbatim in a model's prompt, and highlighting it would be decoration\n      // on text whose whole contract is that it is plain. It also keeps this\n      // package's dependencies to the CodeMirror set the product already ships.\n      EditorView.lineWrapping,\n      history(),\n      keymap.of([...defaultKeymap, ...historyKeymap]),\n      EditorView.editable.of(!readOnly),\n    ],\n    [readOnly],\n  )\n\n  const { ref } = useCodeMirror({ value, extensions, onChange })\n\n  return (\n    <div className={cn(\"relative border border-border bg-muted/40\", className)} {...props}>\n      {version != null ? (\n        <span className=\"absolute right-1 top-1 z-10 border border-border bg-card px-1 text-meta text-muted-foreground\">\n          {version}\n        </span>\n      ) : null}\n      <div\n        ref={ref}\n        className={cn(\n          \"[&_.cm-editor]:bg-transparent [&_.cm-content]:font-mono [&_.cm-content]:text-meta\",\n          \"[&_.cm-focused]:outline-none [&_.cm-cursor]:border-foreground\",\n        )}\n      />\n    </div>\n  )\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@invana/editor",
-  "version": "0.0.25",
+  "version": "0.0.27",
   "description": "Invana Design System - Code and markdown editing surfaces (CodeMirror 6)",
   "homepage": "https://github.com/invana/design-kit#readme",
   "type": "module",
@@ -40,8 +40,8 @@
   "peerDependencies": {
     "react": "^18 || ^19",
     "react-dom": "^18 || ^19",
-    "@invana/ui": "0.0.25",
-    "@invana/styling": "0.0.25"
+    "@invana/styling": "0.0.27",
+    "@invana/ui": "0.0.27"
   },
   "dependencies": {
     "@codemirror/commands": "^6.10.3",
@@ -57,8 +57,8 @@
     "react-dom": "^19.2.7",
     "tsup": "^8.5.1",
     "typescript": "~5.9.3",
-    "@invana/styling": "0.0.25",
-    "@invana/ui": "0.0.25"
+    "@invana/styling": "0.0.27",
+    "@invana/ui": "0.0.27"
   },
   "scripts": {
     "build": "tsup",