opentui-markdown-render 0.2.0 → 0.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "opentui-markdown-render",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "OpenTUI Markdown renderer with optional native LaTeX math",
   "type": "module",
   "license": "MIT",
@@ -56,12 +56,12 @@
     "string-width": "7.2.0"
   },
   "devDependencies": {
-    "@opentui/core": "0.5.12",
-    "@opentui/solid": "0.5.12",
+    "@opentui/core": "0.8.2",
+    "@opentui/solid": "0.8.2",
     "@tsconfig/bun": "1.0.9",
     "@types/bun": "1.4.0",
     "@typescript/native-preview": "7.0.0-dev.20251207.1",
-    "solid-js": "1.9.15"
+    "solid-js": "1.9.18"
   },
   "engines": {
     "bun": ">=1.4.0"

package/src/app.tsx

@@ -1,5 +1,5 @@
-import type { CliRenderer } from "@opentui/core"
-import { createMemo, createSignal } from "solid-js"
+import type { CliRenderer, SyntaxStyle } from "@opentui/core"
+import { createMemo, createSignal, onCleanup } from "solid-js"
 import { useCanvasGraphics } from "./graphics"
 import { resolveHeadingStyles } from "./headings"
 import { rgbaToHex } from "./math"
@@ -9,6 +9,7 @@ import { parseDocument, type Document, type FrameConfig, type TablesConfig } fro
 import { MarkdownFrame } from "./view/frame"
 import { DocumentView, type RenderUnit } from "./view/document"
 import type { Theme } from "./theme/types"
+import { generateSyntax } from "./theme/syntax"
 
 export type { ThemeModeSetting } from "./config"
 export { loadRendererConfig } from "./config"
@@ -32,6 +33,8 @@ export type MarkdownRendererCommonProps = {
   // `cwd` looking for `opentui-markdown-render.json[c]`.
   readonly configPath?: string
   readonly themeMode?: ThemeModeSetting | (() => ThemeModeSetting | null | undefined)
+  // Host-controlled display-math enlargement. Inline formulas keep text size.
+  readonly mathScale?: number | (() => number)
   readonly cwd?: string
   // The viewer window. `enabled: false` keeps the document in the whole area.
   readonly frame?: FrameConfig | (() => FrameConfig)
@@ -97,6 +100,10 @@ export function MarkdownRenderer(props: MarkdownRendererProps) {
   }
 
   const themeModeSetting = () => (typeof props.themeMode === "function" ? props.themeMode() : props.themeMode)
+  const mathScale = () => {
+    const value = typeof props.mathScale === "function" ? props.mathScale() : props.mathScale
+    return value !== undefined && Number.isFinite(value) && value > 0 ? value : 1
+  }
   const config = createMemo<MarkdownConfig>(() => {
     const provided = typeof props.config === "function" ? props.config() : props.config
     if (provided) return provided
@@ -148,6 +155,14 @@ export function MarkdownRenderer(props: MarkdownRendererProps) {
   // The look of the heading levels is a configuration of its own: the colours
   // come from the theme, the attributes and the spacing from the config file.
   const headings = createMemo(() => resolveHeadingStyles(config().headings))
+  let currentSyntax: SyntaxStyle | undefined
+  const syntaxStyle = createMemo(() => {
+    currentSyntax?.destroy()
+    const nativeScene = (renderer as CliRenderer & { readonly nativeScene?: object }).nativeScene
+    currentSyntax = generateSyntax(theme(), headings(), theme().markdown.codeBlock, nativeScene)
+    return currentSyntax
+  })
+  onCleanup(() => currentSyntax?.destroy())
   return (
         <box
           width="100%"
@@ -171,6 +186,8 @@ export function MarkdownRenderer(props: MarkdownRendererProps) {
               imageLimits={config().images}
               tableOptions={tableOptions()}
               mermaidOptions={config().mermaid}
+              mathScale={mathScale()}
+              syntaxStyle={syntaxStyle()}
               onDiagnostic={props.onDiagnostic}
               renderUnit={props.renderUnit}
             />

package/src/index.ts

@@ -89,6 +89,7 @@ export {
   bundledThemeNames,
   themeFileNames,
   generateSyntax,
+  type SyntaxResourceOwner,
   resolveTheme,
   mergeTheme,
   deriveStatusLineTheme,

package/src/math/native.ts

@@ -30,10 +30,19 @@ export function loadNativeMath() {
 
 async function importNativeMath(): Promise<NativeModule | undefined> {
   if (process.platform !== "linux" || process.arch !== "x64") return undefined
-  try {
-    const file = path.join(import.meta.dir, "..", "..", "prebuilds", "linux-x64-gnu", "opentui_markdown_render.node")
-    return createRequire(import.meta.url)(file) as NativeModule
-  } catch {
-    return undefined
+  const relative = path.join("prebuilds", "linux-x64-gnu", "opentui_markdown_render.node")
+  // The first location is the published package layout. The second supports a
+  // host bundling the TypeScript implementation into its own package while
+  // copying `prebuilds` beside the generated entrypoint.
+  const candidates = [
+    path.join(import.meta.dir, "..", "..", relative),
+    path.join(import.meta.dir, relative),
+    path.join(import.meta.dir, "node_modules", "opentui-markdown-render", relative),
+  ]
+  for (const file of candidates) {
+    try {
+      return createRequire(import.meta.url)(file) as NativeModule
+    } catch {}
   }
+  return undefined
 }

package/src/theme/index.ts

@@ -1,7 +1,7 @@
 export { defaultTheme } from "./defaults"
 export { loadTheme, bundledThemeNames, themeFileNames } from "./load"
 export type { ThemeEnvironment } from "./load"
-export { generateSyntax } from "./syntax"
+export { generateSyntax, type SyntaxResourceOwner } from "./syntax"
 export { resolveTheme, mergeTheme, deriveStatusLineTheme } from "./resolve"
 export { mixColors } from "./colors"
 export type { Theme, ThemeMode, ThemePreset, ThemeOverride, StatusLineTheme, StatusLineThemeOverride, FrameTheme, FrameThemeOverride, MarkdownThemeOverride, HeadingLevel } from "./types"

package/src/theme/syntax.ts

@@ -2,7 +2,14 @@ import { SyntaxStyle, type RGBA, type ThemeTokenStyle } from "@opentui/core"
 import { defaultHeadingStyles, headingColor, headingLevels, type HeadingStyles } from "../headings"
 import type { HeadingLevel, Theme } from "./types"
 
-export function generateSyntax(theme: Theme, headings: HeadingStyles = defaultHeadingStyles, defaultColor: RGBA = theme.text.base) {
+export type SyntaxResourceOwner = object
+
+export function generateSyntax(
+  theme: Theme,
+  headings: HeadingStyles = defaultHeadingStyles,
+  defaultColor: RGBA = theme.text.base,
+  owner?: SyntaxResourceOwner,
+) {
   const { markdown, syntax, text } = theme
   const feedback = text.feedback
 
@@ -22,7 +29,7 @@ export function generateSyntax(theme: Theme, headings: HeadingStyles = defaultHe
     rule([`markup.heading.${level}`], headingColor(theme, level), headingStyle(level)),
   )
 
-  return SyntaxStyle.fromTheme([
+  const rules = [
     rule(["default"], defaultColor),
     rule(["prompt"], theme.accent),
     rule(["comment", "comment.documentation"], syntax.comment, { italic: true }),
@@ -84,7 +91,11 @@ export function generateSyntax(theme: Theme, headings: HeadingStyles = defaultHe
     rule(["error"], feedback.error, { bold: true }),
     rule(["warning"], feedback.warning, { bold: true }),
     rule(["info"], feedback.info),
-  ])
+  ]
+  // OpenTUI 0.8 makes native resource ownership explicit. Passing the owner is
+  // harmless on older supported releases, whose factory ignores extra args.
+  const fromTheme = SyntaxStyle.fromTheme as (rules: ThemeTokenStyle[], owner?: SyntaxResourceOwner) => SyntaxStyle
+  return fromTheme(rules, owner)
 }
 
 function rule(

package/src/view/code.tsx

@@ -1,4 +1,6 @@
-import { infoStringToFiletype } from "@opentui/core"
+import { infoStringToFiletype, type SyntaxStyle } from "@opentui/core"
+import { useRenderer } from "@opentui/solid"
+import { onCleanup } from "solid-js"
 import { generateSyntax } from "../theme/syntax"
 import type { Theme } from "../theme/types"
 import type { HeadingStyles } from "../headings"
@@ -8,14 +10,19 @@ export type CodeBlockProps = {
   language: string | null
   theme: Theme
   headings: HeadingStyles
+  syntaxStyle?: SyntaxStyle
 }
 
 export function CodeBlock(props: CodeBlockProps) {
+  const renderer = useRenderer()
+  const nativeScene = (renderer as typeof renderer & { readonly nativeScene?: object }).nativeScene
+  const owned = props.syntaxStyle ? undefined : generateSyntax(props.theme, props.headings, props.theme.markdown.codeBlock, nativeScene)
+  onCleanup(() => owned?.destroy())
   return (
     <code
       content={props.content}
       filetype={infoStringToFiletype(props.language ?? "")}
-      syntaxStyle={generateSyntax(props.theme, props.headings, props.theme.markdown.codeBlock)}
+      syntaxStyle={props.syntaxStyle ?? owned!}
       fg={props.theme.markdown.codeBlock}
       bg={props.theme.background.base}
       conceal={false}

package/src/view/document.tsx

@@ -1,6 +1,6 @@
 import { createMemo, For, type Accessor, type JSX } from "solid-js"
 import stringWidth from "string-width"
-import { type TextChunk } from "@opentui/core"
+import { type SyntaxStyle, type TextChunk } from "@opentui/core"
 import { assertNever, type Block, type Document, type ListItem, type UnitInfo } from "../core/document"
 import type { ResolvedTableOptions } from "../core/tables"
 import type { ImagesConfig, MermaidConfig } from "../config/types"
@@ -30,6 +30,8 @@ export type DocumentViewProps = {
   imageLimits?: ImagesConfig
   tableOptions: ResolvedTableOptions
   mermaidOptions?: MermaidConfig
+  mathScale?: number
+  syntaxStyle?: SyntaxStyle
   onDiagnostic?: (diagnostic: { level: "warning" | "error"; message: string }) => void
   renderUnit?: RenderUnit
 }
@@ -88,16 +90,19 @@ export function DocumentView(props: DocumentViewProps) {
           labelColor={() => props.theme.markdown.image} textColor={() => props.theme.markdown.imageText}
           limits={props.imageLimits} />
         case "display-math": return <DisplayMath content={block.content} open={block.open} close={block.close}
-          maxWidth={() => columns} theme={() => props.theme} graphics={props.graphics} surface={props.surface} />
+          maxWidth={() => columns} theme={() => props.theme} graphics={props.graphics} surface={props.surface}
+          scale={() => props.mathScale ?? 1} />
         case "quote": return <box border={columns > 2 ? ["left"] : []} borderColor={props.theme.markdown.blockQuote}
           paddingLeft={columns > 2 ? 1 : 0} width="100%" flexDirection="column">
           <For each={block.blocks}>{(child) => <BlockView block={() => child}
             columns={columns > 2 ? columns - 2 : columns} quote />}</For>
         </box>
         case "list": return <ListBlockView block={() => block} columns={columns} quote={input.quote} wrapItems={false} />
-        case "code": return <CodeBlock content={block.content} language={block.language} theme={props.theme} headings={props.headings} />
+        case "code": return <CodeBlock content={block.content} language={block.language} theme={props.theme}
+          headings={props.headings} syntaxStyle={props.syntaxStyle} />
         case "mermaid": return <MermaidDiagramView source={block.content} theme={props.theme} columns={columns}
-          mermaidOptions={props.mermaidOptions} headings={props.headings} onDiagnostic={props.onDiagnostic} />
+          mermaidOptions={props.mermaidOptions} headings={props.headings} syntaxStyle={props.syntaxStyle}
+          onDiagnostic={props.onDiagnostic} />
         case "table": return <TableBlock block={block} options={props.tableOptions} theme={props.theme} headings={props.headings}
           hyperlinks={props.graphics.hyperlinks?.() ?? true} />
         case "literal": return <text fg={props.theme.markdown.text} wrapMode="word" content={block.text} />

package/src/view/math.tsx

@@ -12,6 +12,7 @@ export function DisplayMath(props: {
   surface: () => string
   theme: () => Theme
   graphics: CanvasGraphics
+  scale: () => number
 }) {
   const [failed, setFailed] = createSignal(false)
   const color = () => rgbaToHex(props.theme().text.base)
@@ -27,11 +28,12 @@ export function DisplayMath(props: {
         color: color(),
         background: props.surface(),
         cell: props.graphics.cell(),
+        scale: props.scale(),
       }),
     async (key): Promise<{ raster: MathImage } | { error: string }> => {
-      const input = JSON.parse(key) as { content: string; color: string; background: string; cell: CellSize | null }
+      const input = JSON.parse(key) as { content: string; color: string; background: string; cell: CellSize | null; scale: number }
       try {
-        const raster = await renderMathImage(input.content, true, input.color, input.background, input.cell)
+        const raster = await renderMathImage(input.content, true, input.color, input.background, input.cell, input.scale)
         return raster ? { raster } : { error: "Renderer returned no image" }
       } catch (error) {
         return { error: error instanceof Error ? error.message : String(error) }
@@ -69,7 +71,7 @@ export function DisplayMath(props: {
         <Match when={raster()}>
           <box width="100%" height={box().rows} flexShrink={0} alignItems="center" justifyContent="center">
             <image
-              id={`opentui-markdown-math-${mathImageID(props.content, true, color(), props.graphics.cell())}-${props.surface()}`}
+              id={`opentui-markdown-math-${mathImageID(props.content, true, color(), props.graphics.cell(), props.scale())}-${props.surface()}`}
               source={raster()!.png}
               fit="fit"
               protocol="auto"

package/src/view/mermaid.tsx

@@ -1,5 +1,5 @@
 import { createEffect, createMemo, Show, type Accessor } from "solid-js"
-import { type MouseEvent, type TextRenderable } from "@opentui/core"
+import { type MouseEvent, type SyntaxStyle, type TextRenderable } from "@opentui/core"
 import { measureMermaidDiagram, type PreparedDiagram } from "../merman/diagram"
 import { detectMermaidDiagram } from "../merman/detect"
 import { MermaidSyntaxError } from "../merman/diagnostics"
@@ -16,6 +16,7 @@ export type MermaidDiagramViewProps = {
   columns: number
   mermaidOptions?: MermaidConfig
   headings?: HeadingStyles
+  syntaxStyle?: SyntaxStyle
   onDiagnostic?: (diagnostic: { level: "error"; message: string }) => void
 }
 
@@ -121,7 +122,7 @@ export function MermaidDiagramView(props: MermaidDiagramViewProps) {
   })
   return <box width="100%" flexDirection="column" flexShrink={0}>
     <Show when={prepared()} fallback={<CodeBlock content={props.source} language="mermaid"
-      theme={props.theme} headings={props.headings ?? defaultHeadingStyles} />}>
+      theme={props.theme} headings={props.headings ?? defaultHeadingStyles} syntaxStyle={props.syntaxStyle} />}>
       {(value) => <DiagramText prepared={value} />}
     </Show>
   </box>