opentui-markdown-render 0.0.0-stage → 0.2.0

package/src/statusline.tsx

@@ -0,0 +1,183 @@
+import { For, Show } from "solid-js"
+import { TextAttributes, type RGBA } from "@opentui/core"
+import { statusLineFields } from "./config/types"
+import { deriveStatusLineTheme } from "./theme/resolve"
+import type { Theme } from "./theme/types"
+import type { StatusLineBorder, StatusLineField, StatusLineStyle } from "./config/types"
+
+// The host owns the values; the library owns the layout and the colours.
+export type StatusLineState = {
+  readonly title?: string
+  readonly mode?: string
+  readonly protocol?: string
+  readonly cell?: string
+  readonly mathScale?: number
+  readonly position?: string
+  readonly hint?: string
+  readonly text?: readonly string[]
+}
+
+export type StatusLineSegment = {
+  readonly text: string
+  readonly emphasis: "strong" | "muted"
+}
+
+// The colours the row is drawn with. `plain` keeps the line in the page
+// colours, `bar` gives it its own background and an accent border.
+export type StatusLinePalette = {
+  readonly background: RGBA
+  readonly foreground: RGBA
+  readonly title: RGBA
+  readonly muted: RGBA
+  readonly border: RGBA
+}
+
+// `text` is a list field, so it is only rendered when a host asks for it.
+export const defaultStatusLineFields: readonly StatusLineField[] = statusLineFields.filter(
+  (field) => field !== "text",
+)
+
+// A field without a value is skipped, so a host only has to provide what it
+// knows. `text` expands to every entry of the state's text list.
+export function statusLineSegments(
+  state: StatusLineState,
+  fields: readonly StatusLineField[] = defaultStatusLineFields,
+  highlight: StatusLineField = "title",
+): StatusLineSegment[] {
+  const segments: StatusLineSegment[] = []
+  for (const field of fields) {
+    if (field === "text") {
+      for (const entry of state.text ?? []) {
+        if (entry) segments.push({ text: entry, emphasis: "muted" })
+      }
+      continue
+    }
+    const value = statusLineValue(state, field)
+    if (value === undefined) continue
+    segments.push({ text: value, emphasis: field === highlight ? "strong" : "muted" })
+  }
+  return segments
+}
+
+export function formatStatusLine(
+  state: StatusLineState,
+  fields: readonly StatusLineField[] = defaultStatusLineFields,
+  separator = " · ",
+): string {
+  return statusLineSegments(state, fields)
+    .map((segment) => segment.text)
+    .join(separator)
+}
+
+// The effective colours of the row. The bar style uses the theme's status line
+// section, falling back to colours derived from the accent colour.
+export function statusLinePalette(theme: Theme, style: StatusLineStyle = "bar"): StatusLinePalette {
+  if (style === "plain") {
+    return {
+      background: theme.background.base,
+      foreground: theme.text.muted,
+      title: theme.text.base,
+      muted: theme.text.muted,
+      border: theme.border.base,
+    }
+  }
+  return theme.statusline ?? deriveStatusLineTheme(theme)
+}
+
+function statusLineValue(state: StatusLineState, field: StatusLineField): string | undefined {
+  switch (field) {
+    case "title":
+      return state.title || undefined
+    case "mode":
+      return state.mode || undefined
+    case "protocol":
+      return state.protocol ? `img:${state.protocol}` : undefined
+    case "cell":
+      return state.cell
+    case "mathScale":
+      return state.mathScale === undefined ? undefined : `${state.mathScale.toFixed(1)}x`
+    case "position":
+      return state.position
+    case "hint":
+      return state.hint
+    case "text":
+      return undefined
+  }
+}
+
+type StatusLinePart = {
+  readonly text: string
+  readonly kind: "value" | "separator"
+  readonly emphasis: "strong" | "muted"
+  // The separator that follows the highlighted field is drawn in the accent
+  // colour, so the highlighted field is cut off from the rest of the row.
+  readonly divider: boolean
+}
+
+function partColor(part: StatusLinePart, palette: StatusLinePalette): RGBA {
+  if (part.kind === "separator") return part.divider ? palette.border : palette.muted
+  return part.emphasis === "strong" ? palette.title : palette.foreground
+}
+
+export function StatusLine(props: {
+  readonly theme: Theme
+  readonly state: () => StatusLineState
+  readonly fields?: readonly StatusLineField[]
+  readonly separator?: string
+  readonly border?: StatusLineBorder
+  readonly style?: StatusLineStyle
+  readonly highlight?: StatusLineField
+}) {
+  const separator = () => props.separator ?? " · "
+  const style = () => props.style ?? "bar"
+  const highlight = () => props.highlight ?? "title"
+  const palette = () => statusLinePalette(props.theme, style())
+  const parts = (): StatusLinePart[] => {
+    const segments = statusLineSegments(props.state(), props.fields, highlight())
+    const result: StatusLinePart[] = []
+    let previousStrong = false
+    for (const segment of segments) {
+      if (result.length) {
+        result.push({ text: separator(), kind: "separator", emphasis: "muted", divider: previousStrong })
+      }
+      result.push({ text: segment.text, kind: "value", emphasis: segment.emphasis, divider: false })
+      previousStrong = segment.emphasis === "strong"
+    }
+    return result
+  }
+  const border = () => {
+    if (props.border === "top") return ["top"] as ["top"]
+    if (props.border === "bottom") return ["bottom"] as ["bottom"]
+    // An empty side list keeps the border off. Passing `false` together with
+    // a border colour makes OpenTUI draw a full frame instead.
+    return [] as []
+  }
+  return (
+    <box
+      width="100%"
+      flexShrink={0}
+      flexDirection="row"
+      alignItems="center"
+      paddingLeft={1}
+      paddingRight={1}
+      border={border()}
+      borderColor={palette().border}
+      backgroundColor={palette().background}
+    >
+      <Show when={parts().length}>
+        <For each={parts()}>
+          {(part) => (
+            <text
+              fg={partColor(part, palette())}
+              attributes={part.kind === "value" && part.emphasis === "strong" ? TextAttributes.BOLD : TextAttributes.NONE}
+              flexShrink={0}
+              wrapMode="none"
+            >
+              {part.text}
+            </text>
+          )}
+        </For>
+      </Show>
+    </box>
+  )
+}

package/src/theme/colors.ts

@@ -0,0 +1,11 @@
+import { RGBA } from "@opentui/core"
+
+// Mixes `over` into `base` with the given weight. The result is opaque, so a
+// tint computed this way can be used as a solid background.
+export function mixColors(over: RGBA, base: RGBA, ratio: number): RGBA {
+  const weight = Math.min(Math.max(ratio, 0), 1)
+  const [overR, overG, overB] = over.toInts()
+  const [baseR, baseG, baseB] = base.toInts()
+  const channel = (from: number, to: number) => Math.round(to + (from - to) * weight)
+  return RGBA.fromInts(channel(overR, baseR), channel(overG, baseG), channel(overB, baseB), 255)
+}

package/src/theme/defaults.ts

@@ -0,0 +1,190 @@
+import { RGBA } from "@opentui/core"
+import type { Theme, ThemePreset } from "./types"
+
+const h = (hex: string) => RGBA.fromHex(hex)
+
+// The canonical Solarized base tones and accents (8 + 8), without interpolated
+// shades. Both presets share these swatches and differ only in how they use them.
+const solarizedPalette = [
+  "#002b36", "#073642", "#586e75", "#657b83", "#839496", "#93a1a1", "#eee8d5", "#fdf6e3",
+  "#b58900", "#cb4b16", "#dc322f", "#d33682", "#6c71c4", "#268bd2", "#2aa198", "#859900",
+].map(h)
+
+const light: Theme = {
+  mode: "light",
+  accent: h("#0969da"),
+  categorical: [h("#0969da"), h("#8250df"), h("#1a7f37"), h("#9a6700"), h("#cf222e"), h("#bc4c00")],
+  text: {
+    base: h("#1f2328"),
+    muted: h("#59636e"),
+    feedback: {
+      error: h("#cf222e"),
+      warning: h("#9a6700"),
+      success: h("#1a7f37"),
+      info: h("#0969da"),
+    },
+    action: { primary: { focused: h("#0969da") } },
+  },
+  background: { base: h("#ffffff") },
+  border: { base: h("#8c959f") },
+  frame: { border: h("#8c959f"), title: h("#59636e") },
+  markdown: {
+    text: h("#1f2328"),
+    heading: h("#8250df"),
+    // The ramp of the heading levels: the top level takes the accent, the
+    // middle levels the heading colour, the lowest ones a readable text colour.
+    headingLevels: [h("#0969da"), h("#8250df"), h("#8250df"), h("#6f42c1"), h("#3d444d"), h("#3d444d")],
+    link: h("#0969da"),
+    linkText: h("#0969da"),
+    code: h("#953800"),
+    blockQuote: h("#59636e"),
+    emphasis: h("#1f2328"),
+    strong: h("#1f2328"),
+    horizontalRule: h("#d1d9e0"),
+    listItem: h("#1f2328"),
+    listEnumeration: h("#1f2328"),
+    image: h("#0969da"),
+    imageText: h("#0969da"),
+    codeBlock: h("#1f2328"),
+  },
+  syntax: {
+    comment: h("#59636e"),
+    keyword: h("#cf222e"),
+    function: h("#8250df"),
+    variable: h("#1f2328"),
+    string: h("#0a3069"),
+    number: h("#0550ae"),
+    type: h("#0550ae"),
+    operator: h("#0550ae"),
+    punctuation: h("#1f2328"),
+  },
+  diff: {
+    text: { added: h("#1a7f37"), removed: h("#cf222e"), context: h("#59636e") },
+    background: { added: h("#dafbe1"), removed: h("#ffebe9"), context: h("#f6f8fa") },
+  },
+}
+
+const dark: Theme = {
+  mode: "dark",
+  accent: h("#58a6ff"),
+  categorical: [h("#58a6ff"), h("#d2a8ff"), h("#3fb950"), h("#d29922"), h("#f85149"), h("#ffa657")],
+  text: {
+    base: h("#e6edf3"),
+    muted: h("#8b949e"),
+    feedback: {
+      error: h("#f85149"),
+      warning: h("#d29922"),
+      success: h("#3fb950"),
+      info: h("#58a6ff"),
+    },
+    action: { primary: { focused: h("#58a6ff") } },
+  },
+  background: { base: h("#0d1117") },
+  border: { base: h("#30363d") },
+  frame: { border: h("#30363d"), title: h("#8b949e") },
+  markdown: {
+    text: h("#e6edf3"),
+    heading: h("#d2a8ff"),
+    headingLevels: [h("#58a6ff"), h("#d2a8ff"), h("#d2a8ff"), h("#8b949e"), h("#8b949e"), h("#8b949e")],
+    link: h("#58a6ff"),
+    linkText: h("#58a6ff"),
+    code: h("#ffa657"),
+    blockQuote: h("#8b949e"),
+    emphasis: h("#e6edf3"),
+    strong: h("#e6edf3"),
+    horizontalRule: h("#30363d"),
+    listItem: h("#e6edf3"),
+    listEnumeration: h("#e6edf3"),
+    image: h("#58a6ff"),
+    imageText: h("#58a6ff"),
+    codeBlock: h("#e6edf3"),
+  },
+  syntax: {
+    comment: h("#8b949e"),
+    keyword: h("#ff7b72"),
+    function: h("#d2a8ff"),
+    variable: h("#ffa657"),
+    string: h("#a5d6ff"),
+    number: h("#79c0ff"),
+    type: h("#ffa657"),
+    operator: h("#ff7b72"),
+    punctuation: h("#c9d1d9"),
+  },
+  diff: {
+    text: { added: h("#3fb950"), removed: h("#f85149"), context: h("#8b949e") },
+    background: { added: h("#12261e"), removed: h("#25171c"), context: h("#161b22") },
+  },
+}
+
+const solarizedLight: Theme = {
+  mode: "light",
+  palette: solarizedPalette,
+  accent: h("#268bd2"),
+  categorical: [h("#268bd2"), h("#6c71c4"), h("#859900"), h("#b58900"), h("#dc322f"), h("#cb4b16")],
+  text: {
+    base: h("#586e75"), muted: h("#657b83"),
+    feedback: { error: h("#dc322f"), warning: h("#b58900"), success: h("#859900"), info: h("#268bd2") },
+    action: { primary: { focused: h("#268bd2") } },
+  },
+  background: { base: h("#fdf6e3") },
+  border: { base: h("#657b83") },
+  frame: { border: h("#657b83"), title: h("#586e75") },
+  markdown: {
+    text: h("#586e75"), heading: h("#268bd2"),
+    headingLevels: [h("#268bd2"), h("#268bd2"), h("#268bd2"), h("#268bd2"), h("#268bd2"), h("#268bd2")],
+    link: h("#268bd2"), linkText: h("#268bd2"), code: h("#cb4b16"), blockQuote: h("#657b83"),
+    emphasis: h("#586e75"), strong: h("#586e75"), horizontalRule: h("#657b83"),
+    listItem: h("#586e75"), listEnumeration: h("#586e75"), image: h("#268bd2"),
+    imageText: h("#268bd2"), codeBlock: h("#586e75"),
+  },
+  syntax: {
+    comment: h("#657b83"), keyword: h("#dc322f"), function: h("#6c71c4"), variable: h("#586e75"),
+    string: h("#2aa198"), number: h("#d33682"), type: h("#b58900"), operator: h("#268bd2"),
+    punctuation: h("#586e75"),
+  },
+  diff: {
+    text: { added: h("#859900"), removed: h("#dc322f"), context: h("#657b83") },
+    background: { added: h("#eee8d5"), removed: h("#eee8d5"), context: h("#eee8d5") },
+  },
+}
+
+const solarizedDark: Theme = {
+  mode: "dark",
+  palette: solarizedPalette,
+  accent: h("#268bd2"),
+  categorical: [h("#268bd2"), h("#6c71c4"), h("#859900"), h("#b58900"), h("#dc322f"), h("#cb4b16")],
+  text: {
+    base: h("#93a1a1"), muted: h("#839496"),
+    feedback: { error: h("#dc322f"), warning: h("#b58900"), success: h("#859900"), info: h("#268bd2") },
+    action: { primary: { focused: h("#268bd2") } },
+  },
+  background: { base: h("#002b36") },
+  border: { base: h("#586e75") },
+  frame: { border: h("#586e75"), title: h("#93a1a1") },
+  markdown: {
+    text: h("#93a1a1"), heading: h("#268bd2"),
+    headingLevels: [h("#268bd2"), h("#268bd2"), h("#268bd2"), h("#268bd2"), h("#268bd2"), h("#268bd2")],
+    link: h("#268bd2"), linkText: h("#268bd2"), code: h("#cb4b16"), blockQuote: h("#839496"),
+    emphasis: h("#93a1a1"), strong: h("#93a1a1"), horizontalRule: h("#586e75"),
+    listItem: h("#93a1a1"), listEnumeration: h("#93a1a1"), image: h("#268bd2"),
+    imageText: h("#268bd2"), codeBlock: h("#93a1a1"),
+  },
+  syntax: {
+    comment: h("#839496"), keyword: h("#dc322f"), function: h("#6c71c4"), variable: h("#93a1a1"),
+    string: h("#2aa198"), number: h("#d33682"), type: h("#b58900"), operator: h("#268bd2"),
+    punctuation: h("#93a1a1"),
+  },
+  diff: {
+    text: { added: h("#859900"), removed: h("#dc322f"), context: h("#839496") },
+    background: { added: h("#073642"), removed: h("#073642"), context: h("#073642") },
+  },
+}
+
+export function defaultTheme(preset: ThemePreset): Theme {
+  switch (preset) {
+    case "light": return light
+    case "dark": return dark
+    case "solarized-light": return solarizedLight
+    case "solarized-dark": return solarizedDark
+  }
+}

package/src/theme/index.ts

@@ -0,0 +1,7 @@
+export { defaultTheme } from "./defaults"
+export { loadTheme, bundledThemeNames, themeFileNames } from "./load"
+export type { ThemeEnvironment } from "./load"
+export { generateSyntax } 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/load.ts

@@ -0,0 +1,39 @@
+import { existsSync, readFileSync, statSync } from "node:fs"
+import os from "node:os"
+import path from "node:path"
+import { parseJsonc } from "../config/load"
+import { validateTheme } from "../config/theme"
+import type { ThemeOverride } from "./types"
+
+export const bundledThemeNames = ["light", "dark", "solarized-light", "solarized-dark"] as const
+export const themeFileNames = [".jsonc", ".json"] as const
+
+export type ThemeEnvironment = {
+  readonly XDG_CONFIG_HOME?: string
+  readonly HOME?: string
+}
+
+export function loadTheme(
+  name: string,
+  environment: ThemeEnvironment = { XDG_CONFIG_HOME: process.env.XDG_CONFIG_HOME, HOME: process.env.HOME },
+): ThemeOverride | undefined {
+  if (!/^[A-Za-z0-9][A-Za-z0-9_-]*$/.test(name)) return undefined
+  const configured = environment.XDG_CONFIG_HOME
+  const configHome = configured && path.isAbsolute(configured)
+    ? configured
+    : path.join(environment.HOME || os.homedir(), ".config")
+  const directories = [
+    path.join(configHome, "otmd", "themes"),
+    path.resolve(import.meta.dir, "..", "..", "themes"),
+  ]
+  for (const directory of directories) {
+    for (const suffix of themeFileNames) {
+      const file = path.join(directory, `${name}${suffix}`)
+      if (!existsSync(file) || !statSync(file).isFile()) continue
+      const parsed = parseJsonc(readFileSync(file, "utf8"), file)
+      if (typeof parsed !== "object" || parsed === null || Array.isArray(parsed)) return undefined
+      return validateTheme(parsed as Record<string, unknown>, file)
+    }
+  }
+  return undefined
+}

package/src/theme/resolve.ts

@@ -0,0 +1,167 @@
+import { parseColor, type ColorInput, type RGBA } from "@opentui/core"
+import { defaultTheme } from "./defaults"
+import { mixColors } from "./colors"
+import type { StatusLineTheme, StatusLineThemeOverride, Theme, ThemeMode, ThemePreset, ThemeOverride, MarkdownThemeOverride } from "./types"
+
+export function resolveTheme(options: {
+  mode: ThemePreset | null | undefined
+  override?: ThemeOverride
+}): Theme {
+  const override = options.override
+  const mode = override?.mode ?? options.mode ?? "light"
+  return mergeTheme(defaultTheme(mode), override)
+}
+
+// The bar background is the accent colour toned down over the page background,
+// so the strip separates from the page without a loud block of colour.
+export function deriveStatusLineTheme(theme: {
+  readonly mode: ThemeMode
+  readonly palette?: readonly RGBA[]
+  readonly accent: RGBA
+  readonly background: { readonly base: RGBA }
+  readonly text: { readonly base: RGBA; readonly muted: RGBA }
+}): StatusLineTheme {
+  // The same weight in both modes: a soft tint in light mode and a slightly
+  // stronger one in dark mode.
+  const ratio = theme.mode === "light" ? 0.12 : 0.14
+  return {
+    background: theme.palette?.[theme.mode === "light" ? 6 : 1] ?? mixColors(theme.accent, theme.background.base, ratio),
+    foreground: theme.text.base,
+    title: theme.accent,
+    muted: theme.text.muted,
+    border: theme.accent,
+  }
+}
+
+export function mergeTheme(base: Theme, override: ThemeOverride | undefined): Theme {
+  if (!override) return base
+  const color = (value: ColorInput | undefined, fallback: RGBA) => (value === undefined ? fallback : parseColor(value))
+  const accent = color(override.accent, base.accent)
+  const palette = override.palette ? override.palette.map((entry) => parseColor(entry)) : base.palette
+  const background = { base: color(override.background?.base, base.background.base) }
+  const text = {
+    base: color(override.text?.base, base.text.base),
+    muted: color(override.text?.muted, base.text.muted),
+  }
+  const border = { base: color(override.border?.base, base.border.base) }
+  // An explicit border or muted-text override moves the frame with it, unless
+  // the frame names its own colour. A hand-built theme keeps its frame colours.
+  const frame = {
+    border: color(
+      override.frame?.border,
+      override.border?.base !== undefined ? border.base : (base.frame?.border ?? border.base),
+    ),
+    title: color(
+      override.frame?.title,
+      override.text?.muted !== undefined ? text.muted : (base.frame?.title ?? text.muted),
+    ),
+  }
+  const mode = override.mode ? (override.mode.endsWith("light") ? "light" : "dark") : base.mode
+  const derived = deriveStatusLineTheme({ mode, accent, background, text, palette })
+  return {
+    mode,
+    palette,
+    accent,
+    categorical: override.categorical ? override.categorical.map((entry) => parseColor(entry)) : base.categorical,
+    text: {
+      base: text.base,
+      muted: text.muted,
+      feedback: {
+        error: color(override.text?.feedback?.error, base.text.feedback.error),
+        warning: color(override.text?.feedback?.warning, base.text.feedback.warning),
+        success: color(override.text?.feedback?.success, base.text.feedback.success),
+        info: color(override.text?.feedback?.info, base.text.feedback.info),
+      },
+      action: {
+        primary: { focused: color(override.text?.action?.primary?.focused, base.text.action.primary.focused) },
+      },
+    },
+    background,
+    border,
+    frame,
+    // The bar colours follow the merged accent, so overriding the accent in
+    // the config file moves the bar with it. A theme that already carries
+    // explicit bar colours keeps them.
+    statusline: mergeStatusLineTheme(derived, base.statusline, override.statusline),
+    markdown: mergeMarkdownTheme(base.markdown, override.markdown),
+    syntax: mergeColors(base.syntax, override.syntax),
+    diff: {
+      text: {
+        added: color(override.diff?.text?.added, base.diff.text.added),
+        removed: color(override.diff?.text?.removed, base.diff.text.removed),
+        context: color(override.diff?.text?.context, base.diff.text.context),
+      },
+      background: {
+        added: color(override.diff?.background?.added, base.diff.background.added),
+        removed: color(override.diff?.background?.removed, base.diff.background.removed),
+        context: color(override.diff?.background?.context, base.diff.background.context),
+      },
+    },
+  }
+}
+
+function mergeStatusLineTheme(
+  derived: StatusLineTheme,
+  base: StatusLineTheme | undefined,
+  override: StatusLineThemeOverride | undefined,
+): StatusLineTheme {
+  const color = (value: ColorInput | undefined, fallback: RGBA) => (value === undefined ? fallback : parseColor(value))
+  const pick = (key: keyof StatusLineTheme) => color(override?.[key], base?.[key] ?? derived[key])
+  return {
+    background: pick("background"),
+    foreground: pick("foreground"),
+    title: pick("title"),
+    muted: pick("muted"),
+    border: pick("border"),
+  }
+}
+
+function mergeColors<T extends Record<string, RGBA>>(
+  base: T,
+  override: Partial<Record<keyof T, ColorInput>> | undefined,
+): T {
+  if (!override) return base
+  const merged = { ...base } as Record<string, RGBA>
+  for (const key of Object.keys(base) as (keyof T)[]) {
+    const value = override[key]
+    if (value !== undefined) merged[key as string] = parseColor(value)
+  }
+  return merged as T
+}
+
+// The heading colours are resolved on their own: a colour for a single level
+// only replaces that level, while a base heading colour replaces the whole
+// ramp, which is how the theme behaved before the levels existed.
+function mergeMarkdownTheme(
+  base: Theme["markdown"],
+  override: MarkdownThemeOverride | undefined,
+): Theme["markdown"] {
+  const levels = (override ?? {}) as Record<string, ColorInput | undefined>
+  const pick = (level: number, fallback: RGBA) => {
+    const color = levels[`heading${level}`]
+    if (color !== undefined) return parseColor(color)
+    if (levels.heading !== undefined) return parseColor(levels.heading)
+    return fallback
+  }
+  // A theme that was built by hand may not carry the ramp; every level then
+  // takes the base heading colour.
+  const [one, two, three, four, five, six] = base.headingLevels ?? [
+    base.heading,
+    base.heading,
+    base.heading,
+    base.heading,
+    base.heading,
+    base.heading,
+  ]
+  const headingLevels: Theme["markdown"]["headingLevels"] = [
+    pick(1, one),
+    pick(2, two),
+    pick(3, three),
+    pick(4, four),
+    pick(5, five),
+    pick(6, six),
+  ]
+  const { headingLevels: _levels, ...colors } = base
+  const merged = mergeColors(colors, override)
+  return { ...merged, headingLevels }
+}