opentui-markdown-render 0.2.1 → 0.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "opentui-markdown-render",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "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 { createEffect, 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"
@@ -154,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))
+  const syntaxStyle = createMemo(() => {
+    const nativeScene = (renderer as CliRenderer & { readonly nativeScene?: object }).nativeScene
+    return generateSyntax(theme(), headings(), theme().markdown.codeBlock, nativeScene)
+  })
+  createEffect(() => {
+    const style = syntaxStyle()
+    onCleanup(() => void renderer.idle().then(() => style.destroy()))
+  })
   return (
         <box
           width="100%"
@@ -178,6 +187,7 @@ export function MarkdownRenderer(props: MarkdownRendererProps) {
               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/media.tsx

@@ -1,5 +1,6 @@
 import { NativeImage, imageInfo, parseColor, type ColorInput, type RGBA } from "@opentui/core"
-import { decompressFrames, parseGIF } from "gifuct-js"
+import { useRenderer } from "@opentui/solid"
+import { decompressFrame, parseGIF, type ParsedGif } from "gifuct-js"
 import path from "node:path"
 import { createEffect, createResource, createSignal, Match, onCleanup, Show, Switch } from "solid-js"
 
@@ -44,8 +45,16 @@ export function rgbToHex(color: Rgb) {
   return `#${channel(color[0])}${channel(color[1])}${channel(color[2])}`
 }
 
-type AnimatedFrame = { readonly image: NativeImage; readonly delay: number }
-type Media = { readonly box: { columns: number; rows: number }; readonly image?: NativeImage; readonly frames?: readonly AnimatedFrame[] }
+type GifFrame = Parameters<typeof decompressFrame>[0]
+type GifAnimation = {
+  readonly width: number
+  readonly height: number
+  readonly frames: readonly GifFrame[]
+  readonly colorTable: ParsedGif["gct"]
+  readonly target: { width: number; height: number }
+  readonly background: Rgb
+}
+type Media = { readonly box: { columns: number; rows: number }; readonly image?: NativeImage; readonly animation?: GifAnimation }
 
 export { standaloneImage, type MarkdownImage } from "./core/image"
 
@@ -88,6 +97,7 @@ export function LocalImage(props: {
   readonly textColor?: () => RGBA
   readonly limits?: ImageLimits
 }) {
+  const renderer = useRenderer()
   const [failure, setFailure] = createSignal<string>()
   // The cell size is part of the key so the image is reloaded and re-fitted once
   // the terminal reports its pixel resolution (kitty queries it after startup).
@@ -145,26 +155,40 @@ export function LocalImage(props: {
 
   createEffect(() => {
     const value = media()
-    if (!value?.frames?.length) {
+    if (!value?.animation) {
       setFrame(value?.image)
       return
     }
+    const animation = value.animation
+    const canvas = new Uint8Array(animation.width * animation.height * 4)
     let index = 0
+    let current: NativeImage | undefined
     let timer: ReturnType<typeof setTimeout> | undefined
     const next = () => {
-      const current = value.frames![index]!
-      setFrame(current.image)
-      index = (index + 1) % value.frames!.length
-      timer = setTimeout(next, current.delay)
+      const decoded = decompressFrame(animation.frames[index]!, animation.colorTable, true)
+      const before = decoded.disposalType === 3 ? canvas.slice() : undefined
+      drawPatch(canvas, animation.width, animation.height, decoded.patch, decoded.dims.left, decoded.dims.top, decoded.dims.width, decoded.dims.height)
+      const image = prepareImage(NativeImage.fromRgba(canvas.slice(), animation.width, animation.height), animation.target, animation.background)
+      const previous = current
+      current = image
+      setFrame(image)
+      if (previous) void renderer.idle().then(() => previous.dispose())
+      if (decoded.disposalType === 2) clearPatch(canvas, animation.width, decoded.dims.left, decoded.dims.top, decoded.dims.width, decoded.dims.height)
+      if (before) canvas.set(before)
+      index = (index + 1) % animation.frames.length
+      timer = setTimeout(next, Math.max(50, decoded.delay || 100))
     }
     next()
     onCleanup(() => {
       if (timer) clearTimeout(timer)
+      const image = current
+      if (image) void renderer.idle().then(() => image.dispose())
+      setFrame()
     })
   })
   createEffect(() => {
     const value = media()
-    onCleanup(() => disposeMedia(value))
+    onCleanup(() => void renderer.idle().then(() => disposeMedia(value)))
   })
 
   return (
@@ -197,21 +221,13 @@ export function LocalImage(props: {
   )
 }
 
-function loadGif(bytes: Uint8Array, box: { columns: number; rows: number }, target: { width: number; height: number }, background: Rgb) {
+export function loadGif(bytes: Uint8Array, box: { columns: number; rows: number }, target: { width: number; height: number }, background: Rgb) {
   const gif = parseGIF(bytes.slice().buffer as ArrayBuffer)
   const width = gif.lsd.width
   const height = gif.lsd.height
-  const canvas = new Uint8Array(width * height * 4)
-  const frames = decompressFrames(gif, true).map((frame) => {
-    const before = canvas.slice()
-    drawPatch(canvas, width, height, frame.patch, frame.dims.left, frame.dims.top, frame.dims.width, frame.dims.height)
-    const image = prepareImage(NativeImage.fromRgba(canvas.slice(), width, height), target, background)
-    if (frame.disposalType === 2) clearPatch(canvas, width, frame.dims.left, frame.dims.top, frame.dims.width, frame.dims.height)
-    if (frame.disposalType === 3) canvas.set(before)
-    return { image, delay: Math.max(50, frame.delay || 100) }
-  })
+  const frames = gif.frames.filter((frame): frame is GifFrame => "image" in frame)
   if (!frames.length) throw new Error("GIF contains no frames")
-  return { box, frames }
+  return { box, animation: { width, height, frames, colorTable: gif.gct, target, background } }
 }
 
 function drawPatch(canvas: Uint8Array, width: number, height: number, patch: Uint8ClampedArray, left: number, top: number, patchWidth: number, patchHeight: number) {
@@ -263,5 +279,4 @@ function prepareImage(image: NativeImage, target: { width: number; height: numbe
 
 function disposeMedia(media: Media | undefined) {
   media?.image?.dispose()
-  media?.frames?.forEach((frame) => frame.image.dispose())
 }

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,26 @@ export type CodeBlockProps = {
   language: string | null
   theme: Theme
   headings: HeadingStyles
+  syntaxStyle?: SyntaxStyle
+}
+
+export function resolveCodeFiletype(language: string | null) {
+  const token = language?.trim().split(/\s+/, 1)[0]?.toLowerCase() ?? ""
+  return token === "jsonc" ? "json" : infoStringToFiletype(language ?? "")
 }
 
 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(() => {
+    if (owned) void renderer.idle().then(() => owned.destroy())
+  })
   return (
     <code
       content={props.content}
-      filetype={infoStringToFiletype(props.language ?? "")}
-      syntaxStyle={generateSyntax(props.theme, props.headings, props.theme.markdown.codeBlock)}
+      filetype={resolveCodeFiletype(props.language)}
+      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"
@@ -31,6 +31,7 @@ export type DocumentViewProps = {
   tableOptions: ResolvedTableOptions
   mermaidOptions?: MermaidConfig
   mathScale?: number
+  syntaxStyle?: SyntaxStyle
   onDiagnostic?: (diagnostic: { level: "warning" | "error"; message: string }) => void
   renderUnit?: RenderUnit
 }
@@ -66,7 +67,7 @@ export function DocumentView(props: DocumentViewProps) {
     if (input.block().type === "mermaid") {
       return <MermaidDiagramView source={(input.block() as Extract<Block, { type: "mermaid" }>).content}
         theme={props.theme} columns={input.columns} mermaidOptions={props.mermaidOptions}
-        headings={props.headings} onDiagnostic={props.onDiagnostic} />
+        headings={props.headings} syntaxStyle={props.syntaxStyle} onDiagnostic={props.onDiagnostic} />
     }
     const view = createMemo(() => {
       const block = input.block()
@@ -97,9 +98,11 @@ export function DocumentView(props: DocumentViewProps) {
             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/inline-flow.tsx

@@ -25,24 +25,34 @@ export type InlineFlowProps = {
 
 function PrefixSegment(props: { chunks: () => TextChunk[]; width: number }) {
   let ref: TextRenderable | undefined
-  createEffect(() => {
-    if (ref) ref.content = new StyledText(props.chunks())
-  })
-  return <text ref={ref} wrapMode="none" width={props.width} flexShrink={0} />
+  const update = () => {
+    const content = new StyledText(props.chunks())
+    if (ref) ref.content = content
+    return content
+  }
+  createEffect(update)
+  return <text ref={(renderable) => {
+    ref = renderable
+    renderable.content = update()
+  }} wrapMode="none" width={props.width} flexShrink={0} />
 }
 
 function StyledSegment(props: { entry: LayoutRun; textRow: number }) {
   let ref: TextRenderable | undefined
-  createEffect(() => {
+  const update = () => {
     const atom = props.entry.atom
-    if (ref && atom.type === "text") {
-      ref.content = new StyledText([{
-        __isChunk: true, text: atom.text, fg: atom.fg, attributes: atom.attributes,
-        ...(atom.href ? { link: { url: atom.href } } : {}),
-      }])
-    }
-  })
-  return <text ref={ref} width={props.entry.columns} flexShrink={0} wrapMode="none" marginTop={props.textRow} />
+    const content = atom.type === "text" ? new StyledText([{
+      __isChunk: true, text: atom.text, fg: atom.fg, attributes: atom.attributes,
+      ...(atom.href ? { link: { url: atom.href } } : {}),
+    }]) : new StyledText([])
+    if (ref) ref.content = content
+    return content
+  }
+  createEffect(update)
+  return <text ref={(renderable) => {
+    ref = renderable
+    renderable.content = update()
+  }} width={props.entry.columns} flexShrink={0} wrapMode="none" marginTop={props.textRow} />
 }
 
 export function InlineFlow(props: InlineFlowProps) {

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>