@zaly/tui 0.0.12 → 0.1.0

package/dist/widgets/diff.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"diff.mjs","names":[],"sources":["../../src/widgets/diff.ts"],"sourcesContent":["import type { RenderCtx } from \"../core/ctx.ts\"\nimport type { Accessor, Reactive } from \"../core/reactive.ts\"\nimport type { Layout, State } from \"../core/state.ts\"\nimport type { WrapMode } from \"../layout/text.ts\"\n\nimport { splitAnsi, stringWidth, wrapAnsi } from \"@zaly/shared/ansi\"\nimport { basename, extname } from \"pathe\"\n// oxlint-disable no-nested-ternary\n// oxlint-disable typescript/no-unnecessary-condition\nimport { Node } from \"../core/node.ts\"\nimport { createAsync, memo, unwrap, useContext } from \"../core/reactive.ts\"\nimport { RenderContext } from \"../core/render.ts\"\nimport { calcLayout, countLines } from \"../layout/text.ts\"\nimport { codeToAnsi } from \"../shiki/shiki.ts\"\n\nexport interface DiffState {\n  /** Pre-state file content. Plain string or reactive accessor —\n   *  pass a signal to live-update the diff as either side changes. */\n  original: Reactive<string>\n  /** Post-state file content. The widget runs `diffLines` between\n   *  `original` and `modified` and renders the resulting hunks. */\n  modified: Reactive<string>\n  /** Optional file path. Drives the default `lang` (extension or\n   *  basename — shiki recognises both `.ts` and `Dockerfile`-style\n   *  names) and `title` when those aren't set explicitly. */\n  path?: Reactive<string>\n  /** Language for syntax highlighting (any shiki-bundled name or\n   *  alias). Defaults from `path` when set. */\n  lang?: string\n  /** Lines of surrounding context per hunk. Default: 3. */\n  context?: number\n  wrap?: WrapMode\n}\n\ntype DiffOpts = {\n  original: string[]\n  originalHi: string[]\n  modified: string[]\n  modifiedHi: string[]\n  context: number\n  ctx: RenderCtx\n}\n\n/**\n * Show a unified diff between two file contents with syntax-highlighted\n * rows. Added rows carry a green backdrop and `+` prefix; removed rows\n * carry a red backdrop and `-` prefix; context rows show both line\n * numbers with a neutral gutter.\n *\n * Both sides are highlighted as complete files (via shiki) before the\n * diff is assembled, so context around an edit tokenizes the way it\n * would in the actual file — multi-line strings, block comments, etc.\n * don't get truncated by the hunk window.\n */\nexport class Diff extends Node<DiffState> {\n  #lang: Accessor<string | undefined>\n  #highlighted: Accessor<{ original: string; modified: string }>\n\n  constructor(state: DiffState) {\n    super({ wrap: \"word\", ...state })\n\n    this.#lang = memo(() => {\n      const path = unwrap(this.state.path)\n      return this.state.lang ?? (path !== undefined ? langFromPath(path) : undefined)\n    })\n\n    const context = useContext(RenderContext)\n    this.#highlighted = createAsync(\n      async () => {\n        const lang = this.#lang()\n        const input = this.input\n        if (!lang) return input\n        const theme = context?.style().theme.shiki\n        const [original, modified] = await Promise.all([\n          codeToAnsi(input.original, lang, { theme }),\n          codeToAnsi(input.modified, lang, { theme }),\n        ])\n        return { modified, original }\n      },\n      {\n        initialValue: this.input,\n      }\n    )\n  }\n\n  #norm(s: string): string {\n    return s.replaceAll(\"\\r\\n\", \"\\n\").replaceAll(\"\\r\", \"\")\n  }\n\n  get input(): { original: string; modified: string } {\n    return {\n      modified: this.#norm(unwrap(this.state.modified)),\n      original: this.#norm(unwrap(this.state.original)),\n    }\n  }\n\n  protected async _render(ctx: RenderCtx): Promise<string[]> {\n    const highlighted = this.#highlighted()\n    const input = this.input\n    const layout = this.layout()\n    const width = Math.min(ctx.width, layout.width)\n\n    const opts: DiffOpts = {\n      context: this.state.context ?? 3,\n      ctx: { ...ctx, width },\n      modified: input.modified.split(\"\\n\"),\n      modifiedHi: highlighted.modified.split(\"\\n\"),\n      original: input.original.split(\"\\n\"),\n      originalHi: highlighted.original.split(\"\\n\"),\n    }\n\n    this.state.wrap ??= \"word\"\n    return await buildDiffRows(opts)\n  }\n\n  override layout(): Layout {\n    const input = this.input\n    const original = calcLayout(input.original, { wrap: this.state.wrap })\n    const modified = calcLayout(input.modified, { wrap: this.state.wrap })\n    const numWidth = Math.max(\n      1,\n      countLines(unwrap(this.state.original)),\n      countLines(unwrap(this.state.modified))\n    ).toString().length\n    const padding = numWidth * 2 + 4 + 4\n    return {\n      minWidth: Math.max(original.minWidth, modified.minWidth) + padding,\n      width: Math.max(original.width, modified.width) + padding,\n    }\n  }\n}\n\n/**\n * Factory for `Diff`.\n *\n * ```ts\n * diff({\n *   original: \"function foo() {}\\n\",\n *   modified: \"function foo(x) {}\\n\",\n *   path: \"foo.ts\",\n * })\n * ```\n */\nexport function diff(state: State<DiffState>): Diff {\n  return new Diff(state)\n}\n\n// ---------- internals ----------\n\ntype DiffRow =\n  | { type: \"context\"; origNum: number; newNum: number; content: string }\n  | { type: \"remove\"; origNum: number; content: string }\n  | { type: \"add\"; newNum: number; content: string }\n\nasync function buildDiffRows(opts: DiffOpts): Promise<string[]> {\n  const context = opts.context\n  // Async-import keeps cold start snappy — only the diff widget pulls\n  // in the library, and it lands at first render rather than at module\n  // load.\n  const { diffArrays } = await import(\"diff\")\n  const segments = diffArrays(opts.original, opts.modified)\n  const {\n    original: origLines,\n    modified: modLines,\n    originalHi: origHi,\n    modifiedHi: modHi,\n    ctx,\n  } = opts\n\n  // Annotate each line in the diff with its kind + (orig, mod) indices.\n  // The flattened list is the row-order the diff would print without\n  // any hunking; we compute hunks (with surrounding context) on top.\n  interface Annotated {\n    kind: \"equal\" | \"remove\" | \"add\"\n    origIdx?: number\n    modIdx?: number\n  }\n  const ann: Annotated[] = []\n  let oI = 0\n  let mI = 0\n  for (const seg of segments) {\n    if (seg.added) {\n      for (const _ of seg.value) ann.push({ kind: \"add\", modIdx: mI++ })\n    } else if (seg.removed) {\n      for (const _ of seg.value) ann.push({ kind: \"remove\", origIdx: oI++ })\n    } else {\n      for (const _ of seg.value) ann.push({ kind: \"equal\", modIdx: mI++, origIdx: oI++ })\n    }\n  }\n\n  // Find hunks: ranges around each non-equal line, expanded by `context`,\n  // merged when adjacent ranges touch.\n  const ranges: { start: number; end: number }[] = []\n  for (let i = 0; i < ann.length; i++) {\n    if (ann[i].kind === \"equal\") continue\n    const start = Math.max(0, i - context)\n    const end = Math.min(ann.length - 1, i + context)\n    const last = ranges.at(-1)\n    if (last && start <= last.end + 1) last.end = Math.max(last.end, end)\n    else ranges.push({ end, start })\n  }\n  if (ranges.length === 0) return [] // nothing changed\n\n  // Emit rows for each hunk. (Between hunks we just skip the equal\n  // lines — a `…` divider is a future polish.)\n  const rows: DiffRow[] = []\n  for (const r of ranges) {\n    for (let i = r.start; i <= r.end; i++) {\n      const a = ann[i]\n      if (a.kind === \"equal\") {\n        rows.push({\n          content: modHi[a.modIdx!] ?? origHi[a.origIdx!] ?? \"\",\n          newNum: a.modIdx! + 1,\n          origNum: a.origIdx! + 1,\n          type: \"context\",\n        })\n      } else if (a.kind === \"remove\") {\n        rows.push({\n          content: origHi[a.origIdx!] ?? \"\",\n          origNum: a.origIdx! + 1,\n          type: \"remove\",\n        })\n      } else {\n        rows.push({\n          content: modHi[a.modIdx!] ?? \"\",\n          newNum: a.modIdx! + 1,\n          type: \"add\",\n        })\n      }\n    }\n  }\n\n  return renderRows(ctx, rows, origLines.length, modLines.length)\n}\n\nfunction renderRows(\n  ctx: RenderCtx,\n  rows: DiffRow[],\n  origTotal: number,\n  modTotal: number\n): string[] {\n  const numWidth = Math.max(String(origTotal).length, String(modTotal).length, 1)\n  const s = ctx.style\n\n  // Two-column gutter: original line number | new line number | space.\n  // - Context rows show both numbers.\n  // - Remove rows show only the original number; new column blank.\n  // - Add rows show only the new number; original column blank.\n  // Wrapped continuation lines reuse the row style but emit a blank\n  // gutter so the line number isn't repeated per visual row.\n  const gutterWidth = numWidth * 2 + 4 // \"<orig> <new> \"\n  const contentWidth = Math.max(0, ctx.width - gutterWidth)\n  const blankGutter = \" \".repeat(gutterWidth - 2) + s.dim(\"↪ \")\n\n  const styles = {\n    add: \"diffAdd\",\n    context: \"diffContext\",\n    remove: \"diffDel\",\n  } as const\n\n  const out: string[] = []\n  for (const r of rows) {\n    const origStr = r.type === \"add\" ? \"\" : String(r.origNum)\n    const newStr = r.type === \"remove\" ? \"\" : String(r.newNum)\n    const gutterStyle = s.bg(`${styles[r.type]}+10`)\n    const gutter = gutterStyle(` ${pad(origStr, numWidth)}  ${pad(newStr, numWidth)} `)\n\n    const prefix = r.type === \"add\" ? \" + \" : r.type === \"remove\" ? \" - \" : \"   \"\n    const innerWidth = Math.max(0, contentWidth - stringWidth(prefix) - 1)\n\n    // Hard-wrap the content. Char-wrap (vs. word-wrap) keeps code\n    // diffs honest — splitting by word boundaries would shift columns\n    // mid-line and make alignment confusing.\n    const wrapped =\n      innerWidth > 0 && stringWidth(r.content) > innerWidth\n        ? splitAnsi(wrapAnsi(r.content, innerWidth, { mode: \"word\" }))\n        : [r.content]\n\n    const rowStyle = s.bg(styles[r.type])\n    for (let i = 0; i < wrapped.length; i++) {\n      const wline = wrapped[i]\n      const pw = Math.max(0, innerWidth - stringWidth(wline) + 1)\n      const bodyLine = (i === 0 ? prefix : \"   \") + wline + \" \".repeat(pw)\n      const styledBody = rowStyle?.(bodyLine) ?? bodyLine\n      out.push((i === 0 ? gutter : gutterStyle(blankGutter)) + styledBody)\n    }\n  }\n  return out\n}\n\nfunction pad(s: string, width: number): string {\n  return s.length >= width ? s : \" \".repeat(width - s.length) + s\n}\n\n/** Resolve a file path to a shiki language identifier. Falls back from\n *  extension to basename — shiki natively recognises `dockerfile`,\n *  `makefile`, `cmakelists.txt`, etc. */\nfunction langFromPath(path: string): string | undefined {\n  const ext = extname(path).slice(1).toLowerCase()\n  if (ext) return ext\n  const base = basename(path).toLowerCase()\n  return base || undefined\n}\n"],"mappings":"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"}
+{"version":3,"file":"diff.mjs","names":[],"sources":["../../src/widgets/diff.ts"],"sourcesContent":["import type { RenderCtx } from \"../core/ctx.ts\"\nimport type { Accessor, Reactive } from \"../core/reactive.ts\"\nimport type { Layout, State } from \"../core/state.ts\"\nimport type { WrapMode } from \"../layout/text.ts\"\n\nimport { splitAnsi, stringWidth, wrapAnsi } from \"@zaly/shared/ansi\"\nimport { basename, extname } from \"pathe\"\n// oxlint-disable no-nested-ternary\n// oxlint-disable typescript/no-unnecessary-condition\nimport { Node } from \"../core/node.ts\"\nimport { createAsync, memo, unwrap, useContext } from \"../core/reactive.ts\"\nimport { RenderContext } from \"../core/render.ts\"\nimport { calcLayout } from \"../layout/text.ts\"\nimport { codeToAnsi } from \"../shiki/shiki.ts\"\nimport { shikiTheme } from \"../shiki/theme.ts\"\n\nexport interface DiffState {\n  /** Pre-state file content. Plain string or reactive accessor —\n   *  pass a signal to live-update the diff as either side changes. */\n  original: Reactive<string>\n  /** Post-state file content. The widget runs `diffLines` between\n   *  `original` and `modified` and renders the resulting hunks. */\n  modified: Reactive<string>\n  /** Optional file path. Drives the default `lang` (extension or\n   *  basename — shiki recognises both `.ts` and `Dockerfile`-style\n   *  names) and `title` when those aren't set explicitly. */\n  path?: Reactive<string>\n  /** Language for syntax highlighting (any shiki-bundled name or\n   *  alias). Defaults from `path` when set. */\n  lang?: string\n  /** Lines of surrounding context per hunk. Default: 3. */\n  context?: number\n  wrap?: WrapMode\n}\n\nconst NO_NEWLINE = String.raw`\`\n\ntype DiffLine = { text: string; terminated: boolean }\n\ntype DiffOpts = {\n  original: DiffLine[]\n  originalHi: string[]\n  modified: DiffLine[]\n  modifiedHi: string[]\n  context: number\n  ctx: RenderCtx\n}\n\n/**\n * Show a unified diff between two file contents with syntax-highlighted\n * rows. Added rows carry a green backdrop and `+` prefix; removed rows\n * carry a red backdrop and `-` prefix; context rows show both line\n * numbers with a neutral gutter.\n *\n * Both sides are highlighted as complete files (via shiki) before the\n * diff is assembled, so context around an edit tokenizes the way it\n * would in the actual file — multi-line strings, block comments, etc.\n * don't get truncated by the hunk window.\n */\nexport class Diff extends Node<DiffState> {\n  #lang: Accessor<string | undefined>\n  #highlighted: Accessor<{ original: string; modified: string }>\n\n  constructor(state: DiffState) {\n    super({ wrap: \"word\", ...state })\n\n    this.#lang = memo(() => {\n      const path = unwrap(this.state.path)\n      return this.state.lang ?? (path !== undefined ? langFromPath(path) : undefined)\n    })\n\n    const context = useContext(RenderContext)\n    this.#highlighted = createAsync(\n      async () => {\n        const lang = this.#lang()\n        const input = this.input\n        if (!lang) return input\n        const theme = context ? shikiTheme(context.style().theme) : undefined\n        const [original, modified] = await Promise.all([\n          codeToAnsi(input.original, lang, { theme }),\n          codeToAnsi(input.modified, lang, { theme }),\n        ])\n        return { modified, original }\n      },\n      {\n        initialValue: this.input,\n      }\n    )\n  }\n\n  #norm(s: string): string {\n    return s.replaceAll(\"\\r\\n\", \"\\n\").replaceAll(\"\\r\", \"\")\n  }\n\n  get input(): { original: string; modified: string } {\n    return {\n      modified: this.#norm(unwrap(this.state.modified)),\n      original: this.#norm(unwrap(this.state.original)),\n    }\n  }\n\n  protected async _render(ctx: RenderCtx): Promise<string[]> {\n    const highlighted = this.#highlighted()\n    const input = this.input\n    const layout = this.layout()\n    const width = Math.min(ctx.width, layout.width)\n\n    const original = splitLines(input.original)\n    const modified = splitLines(input.modified)\n    const opts: DiffOpts = {\n      context: this.state.context ?? 3,\n      ctx: { ...ctx, width },\n      modified,\n      modifiedHi: splitAnsi(highlighted.modified).slice(0, modified.length),\n      original,\n      originalHi: splitAnsi(highlighted.original).slice(0, original.length),\n    }\n\n    this.state.wrap ??= \"word\"\n    return await buildDiffRows(opts)\n  }\n\n  override layout(): Layout {\n    const input = this.input\n    const original = calcLayout(input.original, { wrap: this.state.wrap })\n    const modified = calcLayout(input.modified, { wrap: this.state.wrap })\n    const numWidth = Math.max(\n      1,\n      splitLines(input.original).length,\n      splitLines(input.modified).length\n    ).toString().length\n    const markerWidth = [input.original, input.modified].some((s) => s !== \"\" && !s.endsWith(\"\\n\"))\n      ? stringWidth(NO_NEWLINE)\n      : 0\n    const padding = numWidth * 2 + 4 + 4\n    return {\n      minWidth: Math.max(original.minWidth, modified.minWidth) + padding,\n      width: Math.max(original.width, modified.width, markerWidth) + padding,\n    }\n  }\n}\n\n/**\n * Factory for `Diff`.\n *\n * ```ts\n * diff({\n *   original: \"function foo() {}\\n\",\n *   modified: \"function foo(x) {}\\n\",\n *   path: \"foo.ts\",\n * })\n * ```\n */\nexport function diff(state: State<DiffState>): Diff {\n  return new Diff(state)\n}\n\n// ---------- internals ----------\n\nfunction splitLines(text: string): DiffLine[] {\n  if (text === \"\") return []\n  const terminated = text.endsWith(\"\\n\")\n  const lines = text.split(\"\\n\")\n  if (terminated) lines.pop()\n  return lines.map((line, i) => ({ terminated: i < lines.length - 1 || terminated, text: line }))\n}\n\ntype DiffRow = { terminated: boolean } & (\n  | { type: \"context\"; origNum: number; newNum: number; content: string }\n  | { type: \"remove\"; origNum: number; content: string }\n  | { type: \"add\"; newNum: number; content: string }\n)\n\nasync function buildDiffRows(opts: DiffOpts): Promise<string[]> {\n  const context = opts.context\n  // Async-import keeps cold start snappy — only the diff widget pulls\n  // in the library, and it lands at first render rather than at module\n  // load.\n  const { diffArrays } = await import(\"diff\")\n  const segments = diffArrays(opts.original, opts.modified, {\n    comparator: (a, b) => a.text === b.text && a.terminated === b.terminated,\n  })\n  const {\n    original: origLines,\n    modified: modLines,\n    originalHi: origHi,\n    modifiedHi: modHi,\n    ctx,\n  } = opts\n\n  // Annotate each line in the diff with its kind + (orig, mod) indices.\n  // The flattened list is the row-order the diff would print without\n  // any hunking; we compute hunks (with surrounding context) on top.\n  interface Annotated {\n    kind: \"equal\" | \"remove\" | \"add\"\n    origIdx?: number\n    modIdx?: number\n  }\n  const ann: Annotated[] = []\n  let oI = 0\n  let mI = 0\n  for (const seg of segments) {\n    if (seg.added) {\n      for (const _ of seg.value) ann.push({ kind: \"add\", modIdx: mI++ })\n    } else if (seg.removed) {\n      for (const _ of seg.value) ann.push({ kind: \"remove\", origIdx: oI++ })\n    } else {\n      for (const _ of seg.value) ann.push({ kind: \"equal\", modIdx: mI++, origIdx: oI++ })\n    }\n  }\n\n  // Find hunks: ranges around each non-equal line, expanded by `context`,\n  // merged when adjacent ranges touch.\n  const ranges: { start: number; end: number }[] = []\n  for (let i = 0; i < ann.length; i++) {\n    if (ann[i].kind === \"equal\") continue\n    const start = Math.max(0, i - context)\n    const end = Math.min(ann.length - 1, i + context)\n    const last = ranges.at(-1)\n    if (last && start <= last.end + 1) last.end = Math.max(last.end, end)\n    else ranges.push({ end, start })\n  }\n  if (ranges.length === 0) return [] // nothing changed\n\n  // Emit rows for each hunk. (Between hunks we just skip the equal\n  // lines — a `…` divider is a future polish.)\n  const rows: DiffRow[] = []\n  for (const r of ranges) {\n    for (let i = r.start; i <= r.end; i++) {\n      const a = ann[i]\n      if (a.kind === \"equal\") {\n        rows.push({\n          content: modHi[a.modIdx!] ?? origHi[a.origIdx!] ?? \"\",\n          newNum: a.modIdx! + 1,\n          origNum: a.origIdx! + 1,\n          terminated: modLines[a.modIdx!].terminated,\n          type: \"context\",\n        })\n      } else if (a.kind === \"remove\") {\n        rows.push({\n          content: origHi[a.origIdx!] ?? \"\",\n          origNum: a.origIdx! + 1,\n          terminated: origLines[a.origIdx!].terminated,\n          type: \"remove\",\n        })\n      } else {\n        rows.push({\n          content: modHi[a.modIdx!] ?? \"\",\n          newNum: a.modIdx! + 1,\n          terminated: modLines[a.modIdx!].terminated,\n          type: \"add\",\n        })\n      }\n    }\n  }\n\n  return renderRows(ctx, rows, origLines.length, modLines.length)\n}\n\nfunction renderRows(\n  ctx: RenderCtx,\n  rows: DiffRow[],\n  origTotal: number,\n  modTotal: number\n): string[] {\n  const numWidth = Math.max(String(origTotal).length, String(modTotal).length, 1)\n  const s = ctx.style\n\n  // Two-column gutter: original line number | new line number | space.\n  // - Context rows show both numbers.\n  // - Remove rows show only the original number; new column blank.\n  // - Add rows show only the new number; original column blank.\n  // Wrapped continuation lines reuse the row style but emit a blank\n  // gutter so the line number isn't repeated per visual row.\n  const gutterWidth = numWidth * 2 + 4 // \"<orig> <new> \"\n  const contentWidth = Math.max(0, ctx.width - gutterWidth)\n  const blankGutter = \" \".repeat(gutterWidth - 2) + s.dim(\"↪ \")\n\n  const styles = {\n    add: \"diffAdd\",\n    context: \"diffContext\",\n    remove: \"diffDel\",\n  } as const\n\n  const out: string[] = []\n  for (const r of rows) {\n    const origStr = r.type === \"add\" ? \"\" : String(r.origNum)\n    const newStr = r.type === \"remove\" ? \"\" : String(r.newNum)\n\n    const gutterStyle = s[`${styles[r.type]}Num`] ?? ((x: string) => x)\n    const gutter = gutterStyle(` ${pad(origStr, numWidth)}  ${pad(newStr, numWidth)} `)\n\n    const prefix = r.type === \"add\" ? \" + \" : r.type === \"remove\" ? \" - \" : \"   \"\n    const innerWidth = Math.max(0, contentWidth - stringWidth(prefix) - 1)\n\n    // Hard-wrap the content. Char-wrap (vs. word-wrap) keeps code\n    // diffs honest — splitting by word boundaries would shift columns\n    // mid-line and make alignment confusing.\n    const wrapped =\n      innerWidth > 0 && stringWidth(r.content) > innerWidth\n        ? splitAnsi(wrapAnsi(r.content, innerWidth, { mode: \"word\" }))\n        : [r.content]\n\n    const rowStyle = s.bg(styles[r.type])\n    for (let i = 0; i < wrapped.length; i++) {\n      const wline = wrapped[i]\n      const pw = Math.max(0, innerWidth - stringWidth(wline) + 1)\n      const bodyLine = (i === 0 ? prefix : \"   \") + wline + \" \".repeat(pw)\n      const styledBody = rowStyle?.(bodyLine) ?? bodyLine\n      out.push((i === 0 ? gutter : gutterStyle(blankGutter)) + styledBody)\n    }\n    if (!r.terminated) {\n      const marker = wrapAnsi(NO_NEWLINE, Math.max(1, contentWidth), { mode: \"word\" })\n      for (const line of splitAnsi(marker)) out.push(\" \".repeat(gutterWidth) + s.dim(line))\n    }\n  }\n  return out\n}\n\nfunction pad(s: string, width: number): string {\n  return s.length >= width ? s : \" \".repeat(width - s.length) + s\n}\n\n/** Resolve a file path to a shiki language identifier. Falls back from\n *  extension to basename — shiki natively recognises `dockerfile`,\n *  `makefile`, `cmakelists.txt`, etc. */\nfunction langFromPath(path: string): string | undefined {\n  const ext = extname(path).slice(1).toLowerCase()\n  if (ext) return ext\n  const base = basename(path).toLowerCase()\n  return base || undefined\n}\n"],"mappings":"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"}

package/dist/widgets/divider.d.mts

@@ -1,5 +1,5 @@
-import { H as Text } from "../queries-BDX8mcl5.mjs";
-import { f as Style } from "../types-D2EYlzmK.mjs";
+import { u as Style } from "../types-C9ceMsbJ.mjs";
+import { W as Text } from "../queries-C75-wG1B.mjs";
 //#region src/widgets/divider.d.ts
 export type DividerState = Style<false> & {
   char?: string;

package/dist/widgets/divider.mjs

@@ -1 +1 @@
-export { t as divider } from "../divider-TSx9NhI_.mjs";
+export { t as divider } from "../divider-BlNNN2OS.mjs";

package/dist/widgets/image.d.mts

@@ -1,2 +1,2 @@
-import { n as ImageState, r as image, t as Image } from "../image-VaT7AN-S.mjs";
+import { n as ImageState, r as image, t as Image } from "../image-BLls2F4t.mjs";
 export { Image, ImageState, image };

package/dist/widgets/image.mjs

@@ -1,6 +1,6 @@
 import { S as unwrap, w as useContext } from "../reactive-f7NpAi69.mjs";
 import { t as Node } from "../node-BZ7f6HzU.mjs";
-import { t as RenderContext } from "../render-DEIUNLkh.mjs";
+import { t as RenderContext } from "../render-B7LfNM5K.mjs";
 import { s as loadKittyGraphics } from "../kitty-JbCJC0iQ.mjs";
 import { fileDetect } from "@zaly/shared/detect";
 import { imageInfo } from "@zaly/shared/image";
@@ -31,7 +31,7 @@ var Image = class extends Node {
 		const detected = await fileDetect(this.state.src);
 		if (detected?.type !== "image") return this.fallback;
 		const img = await imageInfo(detected);
-		const { cols, rows } = dims(this.state, img, Math.min(ctx.width, 80));
+		const { cols, rows } = dims(this.state, img, ctx.width);
 		const t = await kitty.transmitOnce(img);
 		if (!t) return this.fallback;
 		const p = kitty.placement(t.imageId, {
@@ -61,9 +61,9 @@ function image(first, style) {
 function dims(state, meta, available) {
 	const cellAspect = state.cellAspect ?? 2;
 	const aspect = meta.height / meta.width;
-	let cols = state.width;
+	let cols = state.width === void 0 ? void 0 : Math.max(1, Math.min(state.width, available));
 	let rows = state.height;
-	if (cols === void 0 && rows === void 0) cols = Math.max(1, available);
+	if (cols === void 0 && rows === void 0) cols = Math.max(1, Math.min(available, 80));
 	if (cols !== void 0 && rows === void 0) rows = Math.max(1, Math.round(cols * aspect / cellAspect));
 	else if (rows !== void 0 && cols === void 0) cols = Math.max(1, Math.round(rows * cellAspect / aspect));
 	return {

package/dist/widgets/image.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"image.mjs","names":[],"sources":["../../src/widgets/image.ts"],"sourcesContent":["import type { RenderCtx } from \"../core/ctx.ts\"\nimport type { Accessor } from \"../core/reactive.ts\"\nimport type { Layout } from \"../core/state.ts\"\n\nimport { fileDetect } from \"@zaly/shared/detect\"\nimport { imageInfo } from \"@zaly/shared/image\"\nimport { Node } from \"../core/node.ts\"\nimport { unwrap, useContext } from \"../core/reactive.ts\"\nimport { RenderContext } from \"../core/render.ts\"\nimport { loadKittyGraphics } from \"../image/kitty.ts\"\n\nexport interface ImageState {\n  /**\n   * Path to an image file. PNG passes through with zero decoding; other\n   * formats (JPEG/WebP/GIF/AVIF/SVG) are read via image-meta for\n   * dimensions and — for KGP terminals — converted once to a cached\n   * temp PNG via sharp. iTerm2 accepts all formats natively.\n   */\n  src: string\n  /** Display width in terminal cells. Defaults to `ctx.width`. */\n  width?: number\n  /**\n   * Display height in terminal cells. When omitted, computed from the\n   * source aspect ratio + `cellAspect`.\n   */\n  height?: number\n  /** Fallback text shown on terminals without an image protocol. */\n  alt?: string\n  /**\n   * Character cell aspect ratio (cellHeight / cellWidth). Most terminals\n   * land around 2.0. Tweak if aspect-preserved images look stretched.\n   */\n  cellAspect?: number\n}\n\nexport class Image extends Node<ImageState> {\n  #delete?: () => void\n  #enabled?: Accessor<boolean>\n\n  constructor(state: ImageState) {\n    super(state)\n    this.on(\"unmount\", () => this.#delete?.())\n    const context = useContext(RenderContext)\n    this.#enabled = context?.images\n  }\n\n  get fallback(): string[] {\n    return [this.state.alt ?? `[Image: ${this.state.src}]`]\n  }\n\n  override layout(): Layout {\n    return { minWidth: 50, width: 100 }\n  }\n\n  protected async _render(ctx: RenderCtx): Promise<string[]> {\n    if (unwrap(this.#enabled) === false) return this.fallback\n\n    const queries = this.ctx?.input.queries\n    const kitty = queries ? await loadKittyGraphics(queries) : undefined\n    if (!kitty?.supported) return this.fallback\n\n    const detected = await fileDetect(this.state.src)\n    if (detected?.type !== \"image\") return this.fallback\n    const img = await imageInfo(detected)\n\n    const { cols, rows } = dims(this.state, img, Math.min(ctx.width, 80))\n\n    const t = await kitty.transmitOnce(img)\n    if (!t) return this.fallback\n    const p = kitty.placement(t.imageId, { cols, rows })\n    if (!p) return this.fallback\n    this.#delete = () =>\n      p.placementId ? kitty.deletePlacement(t.imageId, p.placementId) : undefined\n    // Route the transmit bytes through the side-channel queue (mount\n    // ctx → terminal). Cached rows then hold pure placement ANSI,\n    // which is safe to reuse across repaints. If we're rendering\n    // before mount (rare — tests, headless previews), fall back to\n    // inlining the transmit into the lead so the picture still\n    // shows correctly the first time.\n    if (t.transmit) {\n      ctx.transmit(t.transmit)\n      if (p.inline) ctx.transmit(p.seq)\n    }\n\n    if (p.inline) return p.data\n\n    const ret = [...p.data]\n    if (!ret.length) return this.fallback\n    ret[0] = p.seq + ret[0]\n    return ret\n  }\n}\n\nexport function image(src: string, style?: Omit<ImageState, \"src\">): Image\nexport function image(state: ImageState): Image\nexport function image(first: string | ImageState, style?: Omit<ImageState, \"src\">): Image {\n  if (typeof first === \"string\") return new Image({ src: first, ...style })\n  return new Image(first)\n}\n\nfunction dims(\n  state: ImageState,\n  meta: { width: number; height: number },\n  available: number\n): { cols: number; rows: number } {\n  const cellAspect = state.cellAspect ?? 2\n  const aspect = meta.height / meta.width\n  let cols = state.width\n  let rows = state.height\n  if (cols === undefined && rows === undefined) cols = Math.max(1, available)\n  if (cols !== undefined && rows === undefined) {\n    rows = Math.max(1, Math.round((cols * aspect) / cellAspect))\n  } else if (rows !== undefined && cols === undefined) {\n    cols = Math.max(1, Math.round((rows * cellAspect) / aspect))\n  }\n  return { cols: cols ?? available, rows: rows ?? 1 }\n}\n"],"mappings":";;;;;;;AAmCA,IAAa,QAAb,cAA2B,KAAiB;CAC1C;CACA;CAEA,YAAY,OAAmB;EAC7B,MAAM,KAAK;EACX,KAAK,GAAG,iBAAiB,KAAK,UAAU,CAAC;EACzC,MAAM,UAAU,WAAW,aAAa;EACxC,KAAK,WAAW,SAAS;CAC3B;CAEA,IAAI,WAAqB;EACvB,OAAO,CAAC,KAAK,MAAM,OAAO,WAAW,KAAK,MAAM,IAAI,EAAE;CACxD;CAEA,SAA0B;EACxB,OAAO;GAAE,UAAU;GAAI,OAAO;EAAI;CACpC;CAEA,MAAgB,QAAQ,KAAmC;EACzD,IAAI,OAAO,KAAK,QAAQ,MAAM,OAAO,OAAO,KAAK;EAEjD,MAAM,UAAU,KAAK,KAAK,MAAM;EAChC,MAAM,QAAQ,UAAU,MAAM,kBAAkB,OAAO,IAAI,KAAA;EAC3D,IAAI,CAAC,OAAO,WAAW,OAAO,KAAK;EAEnC,MAAM,WAAW,MAAM,WAAW,KAAK,MAAM,GAAG;EAChD,IAAI,UAAU,SAAS,SAAS,OAAO,KAAK;EAC5C,MAAM,MAAM,MAAM,UAAU,QAAQ;EAEpC,MAAM,EAAE,MAAM,SAAS,KAAK,KAAK,OAAO,KAAK,KAAK,IAAI,IAAI,OAAO,EAAE,CAAC;EAEpE,MAAM,IAAI,MAAM,MAAM,aAAa,GAAG;EACtC,IAAI,CAAC,GAAG,OAAO,KAAK;EACpB,MAAM,IAAI,MAAM,UAAU,EAAE,SAAS;GAAE;GAAM;EAAK,CAAC;EACnD,IAAI,CAAC,GAAG,OAAO,KAAK;EACpB,KAAK,gBACH,EAAE,cAAc,MAAM,gBAAgB,EAAE,SAAS,EAAE,WAAW,IAAI,KAAA;EAOpE,IAAI,EAAE,UAAU;GACd,IAAI,SAAS,EAAE,QAAQ;GACvB,IAAI,EAAE,QAAQ,IAAI,SAAS,EAAE,GAAG;EAClC;EAEA,IAAI,EAAE,QAAQ,OAAO,EAAE;EAEvB,MAAM,MAAM,CAAC,GAAG,EAAE,IAAI;EACtB,IAAI,CAAC,IAAI,QAAQ,OAAO,KAAK;EAC7B,IAAI,KAAK,EAAE,MAAM,IAAI;EACrB,OAAO;CACT;AACF;AAIA,SAAgB,MAAM,OAA4B,OAAwC;CACxF,IAAI,OAAO,UAAU,UAAU,OAAO,IAAI,MAAM;EAAE,KAAK;EAAO,GAAG;CAAM,CAAC;CACxE,OAAO,IAAI,MAAM,KAAK;AACxB;AAEA,SAAS,KACP,OACA,MACA,WACgC;CAChC,MAAM,aAAa,MAAM,cAAc;CACvC,MAAM,SAAS,KAAK,SAAS,KAAK;CAClC,IAAI,OAAO,MAAM;CACjB,IAAI,OAAO,MAAM;CACjB,IAAI,SAAS,KAAA,KAAa,SAAS,KAAA,GAAW,OAAO,KAAK,IAAI,GAAG,SAAS;CAC1E,IAAI,SAAS,KAAA,KAAa,SAAS,KAAA,GACjC,OAAO,KAAK,IAAI,GAAG,KAAK,MAAO,OAAO,SAAU,UAAU,CAAC;MACtD,IAAI,SAAS,KAAA,KAAa,SAAS,KAAA,GACxC,OAAO,KAAK,IAAI,GAAG,KAAK,MAAO,OAAO,aAAc,MAAM,CAAC;CAE7D,OAAO;EAAE,MAAM,QAAQ;EAAW,MAAM,QAAQ;CAAE;AACpD"}
+{"version":3,"file":"image.mjs","names":[],"sources":["../../src/widgets/image.ts"],"sourcesContent":["import type { RenderCtx } from \"../core/ctx.ts\"\nimport type { Accessor } from \"../core/reactive.ts\"\nimport type { Layout } from \"../core/state.ts\"\n\nimport { fileDetect } from \"@zaly/shared/detect\"\nimport { imageInfo } from \"@zaly/shared/image\"\nimport { Node } from \"../core/node.ts\"\nimport { unwrap, useContext } from \"../core/reactive.ts\"\nimport { RenderContext } from \"../core/render.ts\"\nimport { loadKittyGraphics } from \"../image/kitty.ts\"\n\nexport interface ImageState {\n  /**\n   * Path to an image file. PNG passes through with zero decoding; other\n   * formats (JPEG/WebP/GIF/AVIF/SVG) are read via image-meta for\n   * dimensions and — for KGP terminals — converted once to a cached\n   * temp PNG via sharp. iTerm2 accepts all formats natively.\n   */\n  src: string\n  /** Display width in terminal cells. Defaults to `ctx.width`. */\n  width?: number\n  /**\n   * Display height in terminal cells. When omitted, computed from the\n   * source aspect ratio + `cellAspect`.\n   */\n  height?: number\n  /** Fallback text shown on terminals without an image protocol. */\n  alt?: string\n  /**\n   * Character cell aspect ratio (cellHeight / cellWidth). Most terminals\n   * land around 2.0. Tweak if aspect-preserved images look stretched.\n   */\n  cellAspect?: number\n}\n\nexport class Image extends Node<ImageState> {\n  #delete?: () => void\n  #enabled?: Accessor<boolean>\n\n  constructor(state: ImageState) {\n    super(state)\n    this.on(\"unmount\", () => this.#delete?.())\n    const context = useContext(RenderContext)\n    this.#enabled = context?.images\n  }\n\n  get fallback(): string[] {\n    return [this.state.alt ?? `[Image: ${this.state.src}]`]\n  }\n\n  override layout(): Layout {\n    return { minWidth: 50, width: 100 }\n  }\n\n  protected async _render(ctx: RenderCtx): Promise<string[]> {\n    if (unwrap(this.#enabled) === false) return this.fallback\n\n    const queries = this.ctx?.input.queries\n    const kitty = queries ? await loadKittyGraphics(queries) : undefined\n    if (!kitty?.supported) return this.fallback\n\n    const detected = await fileDetect(this.state.src)\n    if (detected?.type !== \"image\") return this.fallback\n    const img = await imageInfo(detected)\n\n    const { cols, rows } = dims(this.state, img, ctx.width)\n\n    const t = await kitty.transmitOnce(img)\n    if (!t) return this.fallback\n    const p = kitty.placement(t.imageId, { cols, rows })\n    if (!p) return this.fallback\n    this.#delete = () =>\n      p.placementId ? kitty.deletePlacement(t.imageId, p.placementId) : undefined\n    // Route the transmit bytes through the side-channel queue (mount\n    // ctx → terminal). Cached rows then hold pure placement ANSI,\n    // which is safe to reuse across repaints. If we're rendering\n    // before mount (rare — tests, headless previews), fall back to\n    // inlining the transmit into the lead so the picture still\n    // shows correctly the first time.\n    if (t.transmit) {\n      ctx.transmit(t.transmit)\n      if (p.inline) ctx.transmit(p.seq)\n    }\n\n    if (p.inline) return p.data\n\n    const ret = [...p.data]\n    if (!ret.length) return this.fallback\n    ret[0] = p.seq + ret[0]\n    return ret\n  }\n}\n\nexport function image(src: string, style?: Omit<ImageState, \"src\">): Image\nexport function image(state: ImageState): Image\nexport function image(first: string | ImageState, style?: Omit<ImageState, \"src\">): Image {\n  if (typeof first === \"string\") return new Image({ src: first, ...style })\n  return new Image(first)\n}\n\nfunction dims(\n  state: ImageState,\n  meta: { width: number; height: number },\n  available: number\n): { cols: number; rows: number } {\n  const cellAspect = state.cellAspect ?? 2\n  const aspect = meta.height / meta.width\n  let cols = state.width === undefined ? undefined : Math.max(1, Math.min(state.width, available))\n  let rows = state.height\n  if (cols === undefined && rows === undefined) cols = Math.max(1, Math.min(available, 80))\n  if (cols !== undefined && rows === undefined) {\n    rows = Math.max(1, Math.round((cols * aspect) / cellAspect))\n  } else if (rows !== undefined && cols === undefined) {\n    cols = Math.max(1, Math.round((rows * cellAspect) / aspect))\n  }\n  return { cols: cols ?? available, rows: rows ?? 1 }\n}\n"],"mappings":";;;;;;;AAmCA,IAAa,QAAb,cAA2B,KAAiB;CAC1C;CACA;CAEA,YAAY,OAAmB;EAC7B,MAAM,KAAK;EACX,KAAK,GAAG,iBAAiB,KAAK,UAAU,CAAC;EACzC,MAAM,UAAU,WAAW,aAAa;EACxC,KAAK,WAAW,SAAS;CAC3B;CAEA,IAAI,WAAqB;EACvB,OAAO,CAAC,KAAK,MAAM,OAAO,WAAW,KAAK,MAAM,IAAI,EAAE;CACxD;CAEA,SAA0B;EACxB,OAAO;GAAE,UAAU;GAAI,OAAO;EAAI;CACpC;CAEA,MAAgB,QAAQ,KAAmC;EACzD,IAAI,OAAO,KAAK,QAAQ,MAAM,OAAO,OAAO,KAAK;EAEjD,MAAM,UAAU,KAAK,KAAK,MAAM;EAChC,MAAM,QAAQ,UAAU,MAAM,kBAAkB,OAAO,IAAI,KAAA;EAC3D,IAAI,CAAC,OAAO,WAAW,OAAO,KAAK;EAEnC,MAAM,WAAW,MAAM,WAAW,KAAK,MAAM,GAAG;EAChD,IAAI,UAAU,SAAS,SAAS,OAAO,KAAK;EAC5C,MAAM,MAAM,MAAM,UAAU,QAAQ;EAEpC,MAAM,EAAE,MAAM,SAAS,KAAK,KAAK,OAAO,KAAK,IAAI,KAAK;EAEtD,MAAM,IAAI,MAAM,MAAM,aAAa,GAAG;EACtC,IAAI,CAAC,GAAG,OAAO,KAAK;EACpB,MAAM,IAAI,MAAM,UAAU,EAAE,SAAS;GAAE;GAAM;EAAK,CAAC;EACnD,IAAI,CAAC,GAAG,OAAO,KAAK;EACpB,KAAK,gBACH,EAAE,cAAc,MAAM,gBAAgB,EAAE,SAAS,EAAE,WAAW,IAAI,KAAA;EAOpE,IAAI,EAAE,UAAU;GACd,IAAI,SAAS,EAAE,QAAQ;GACvB,IAAI,EAAE,QAAQ,IAAI,SAAS,EAAE,GAAG;EAClC;EAEA,IAAI,EAAE,QAAQ,OAAO,EAAE;EAEvB,MAAM,MAAM,CAAC,GAAG,EAAE,IAAI;EACtB,IAAI,CAAC,IAAI,QAAQ,OAAO,KAAK;EAC7B,IAAI,KAAK,EAAE,MAAM,IAAI;EACrB,OAAO;CACT;AACF;AAIA,SAAgB,MAAM,OAA4B,OAAwC;CACxF,IAAI,OAAO,UAAU,UAAU,OAAO,IAAI,MAAM;EAAE,KAAK;EAAO,GAAG;CAAM,CAAC;CACxE,OAAO,IAAI,MAAM,KAAK;AACxB;AAEA,SAAS,KACP,OACA,MACA,WACgC;CAChC,MAAM,aAAa,MAAM,cAAc;CACvC,MAAM,SAAS,KAAK,SAAS,KAAK;CAClC,IAAI,OAAO,MAAM,UAAU,KAAA,IAAY,KAAA,IAAY,KAAK,IAAI,GAAG,KAAK,IAAI,MAAM,OAAO,SAAS,CAAC;CAC/F,IAAI,OAAO,MAAM;CACjB,IAAI,SAAS,KAAA,KAAa,SAAS,KAAA,GAAW,OAAO,KAAK,IAAI,GAAG,KAAK,IAAI,WAAW,EAAE,CAAC;CACxF,IAAI,SAAS,KAAA,KAAa,SAAS,KAAA,GACjC,OAAO,KAAK,IAAI,GAAG,KAAK,MAAO,OAAO,SAAU,UAAU,CAAC;MACtD,IAAI,SAAS,KAAA,KAAa,SAAS,KAAA,GACxC,OAAO,KAAK,IAAI,GAAG,KAAK,MAAO,OAAO,aAAc,MAAM,CAAC;CAE7D,OAAO;EAAE,MAAM,QAAQ;EAAW,MAAM,QAAQ;CAAE;AACpD"}

package/dist/widgets/input.d.mts

@@ -1,2 +1,2 @@
-import { a as InputValue, i as InputState, n as InputAttachment, o as input, r as InputEvents, t as Input } from "../input-BAYux7qo.mjs";
+import { a as InputValue, i as InputState, n as InputAttachment, o as input, r as InputEvents, t as Input } from "../input-NuD8TH8N.mjs";
 export { Input, InputAttachment, InputEvents, InputState, InputValue, input };

package/dist/widgets/input.mjs

@@ -1 +1 @@
-export { t as Input, n as input } from "../input-BGTTujDN.mjs";
+export { t as Input, n as input } from "../input-ET2YEMcl.mjs";

package/dist/widgets/log.d.mts

@@ -1,2 +1,2 @@
-import { A as LogState, M as log, j as LogStyle } from "../queries-BDX8mcl5.mjs";
+import { M as LogState, N as LogStyle, P as log } from "../queries-C75-wG1B.mjs";
 export { LogState, LogStyle, log };

package/dist/widgets/log.mjs

@@ -1 +1 @@
-export { t as log } from "../log-ByKlM4iI.mjs";
+export { t as log } from "../log-B4djzy2m.mjs";

package/dist/widgets/markdown.d.mts

@@ -1,8 +1,8 @@
-import { J as Layout, P as RenderCtx, U as TextContent, X as State, p as Node } from "../queries-BDX8mcl5.mjs";
-import { o as AnyStyle } from "../types-D2EYlzmK.mjs";
-import { t as WrapMode } from "../text-CCYs9RB2.mjs";
+import { i as AnyStyle } from "../types-C9ceMsbJ.mjs";
+import { G as TextContent, I as RenderCtx, Q as State, X as Layout, h as Node } from "../queries-C75-wG1B.mjs";
+import { t as WrapMode } from "../text-CmxbA8lk.mjs";
 import { n as MdOptions } from "../types-D3jk1rtk.mjs";
-import { t as Image } from "../image-VaT7AN-S.mjs";
+import { t as Image } from "../image-BLls2F4t.mjs";
 //#region src/widgets/markdown.d.ts
 export interface MarkdownState {
   /** Markdown source. Accepts a plain string or a reactive accessor —

package/dist/widgets/markdown.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"markdown.d.mts","names":["_$___core_state_ts0.Layout"],"sources":["../../src/widgets/markdown.ts"],"mappings":";;;;;;iBAoBiB;;;;EAIf,SAAS;;EAET,UAAU;;;;;;;EAOV;EACA,OAAO;EACP,QAAQ;;qBAcG,iBAAiB,KAAK;;WAKxB,QAAM,YAAA;EASf,YAAY,OAAO,MAAM;YAwDT,QAAQ,KAAK,YAAY;EA0C1B,OAAO,KAAK,YAAS,QAATA;;;;;;;;;;;;wBAeb,SACd,SAAS,aACT,QAAQ,KAAK,MAAM,6BAClB;wBACa,SAAS,OAAO,MAAM,iBAAiB"}
+{"version":3,"file":"markdown.d.mts","names":["_$___core_state_ts0.Layout"],"sources":["../../src/widgets/markdown.ts"],"mappings":";;;;;;iBAqBiB;;;;EAIf,SAAS;;EAET,UAAU;;;;;;;EAOV;EACA,OAAO;EACP,QAAQ;;qBAcG,iBAAiB,KAAK;;WAKxB,QAAM,YAAA;EASf,YAAY,OAAO,MAAM;YAwDT,QAAQ,KAAK,YAAY;EA0C1B,OAAO,KAAK,YAAS,QAATA;;;;;;;;;;;;wBAeb,SACd,SAAS,aACT,QAAQ,KAAK,MAAM,6BAClB;wBACa,SAAS,OAAO,MAAM,iBAAiB"}

package/dist/widgets/markdown.mjs

@@ -1 +1 @@
-export { t as Markdown, n as markdown } from "../markdown-CwRmWuU6.mjs";
+export { t as Markdown, n as markdown } from "../markdown-D3ZtRn6C.mjs";

package/dist/widgets/overlay.d.mts

@@ -1,2 +1,2 @@
-import { F as Overlay, I as OverlayState, L as overlay } from "../queries-BDX8mcl5.mjs";
+import { L as Overlay, R as OverlayState, z as overlay } from "../queries-C75-wG1B.mjs";
 export { Overlay, OverlayState, overlay };

package/dist/widgets/overlay.mjs

@@ -1 +1 @@
-export { t as overlay } from "../overlay-BnvOKtGT.mjs";
+export { t as overlay } from "../overlay-LvOjG7kn.mjs";

package/dist/widgets/picker.d.mts

@@ -1,2 +1,2 @@
-import { a as picker, i as PickerTreeProps, n as PickerItem, r as PickerSelectProps, t as PickerActions } from "../picker-DQs_IW77.mjs";
+import { a as picker, i as PickerTreeProps, n as PickerItem, r as PickerSelectProps, t as PickerActions } from "../picker-B-OxKKnD.mjs";
 export { PickerActions, PickerItem, PickerSelectProps, PickerTreeProps, picker };

package/dist/widgets/picker.mjs

@@ -1 +1 @@
-export { t as picker } from "../picker-Dh5IUrTk.mjs";
+export { t as picker } from "../picker-f6xjgACX.mjs";

package/dist/widgets/progress.d.mts

@@ -1,5 +1,5 @@
-import { Nt as Size, P as RenderCtx, X as State, nt as Reactive, p as Node } from "../queries-BDX8mcl5.mjs";
-import { c as Color } from "../types-D2EYlzmK.mjs";
+import { o as Color } from "../types-C9ceMsbJ.mjs";
+import { Ft as Size, I as RenderCtx, Q as State, h as Node, it as Reactive } from "../queries-C75-wG1B.mjs";
 //#region src/widgets/progress.d.ts
 export interface ProgressState {
   /** Current value. Clamped to `[0, total]`. Accepts a signal accessor

package/dist/widgets/select.d.mts

@@ -1,2 +1,2 @@
-import { a as SelectEvents, i as Select, n as OptionRender, o as SelectState, r as OptionRenderCtx, s as select, t as Option } from "../select-J2KtwxyK.mjs";
+import { a as SelectEvents, i as Select, n as OptionRender, o as SelectState, r as OptionRenderCtx, s as select, t as Option } from "../select-BKE5LzdN.mjs";
 export { Option, OptionRender, OptionRenderCtx, Select, SelectEvents, SelectState, select };

package/dist/widgets/show.d.mts

@@ -1,4 +1,4 @@
-import { P as RenderCtx, nt as Reactive, p as Node } from "../queries-BDX8mcl5.mjs";
+import { I as RenderCtx, h as Node, it as Reactive } from "../queries-C75-wG1B.mjs";
 //#region src/widgets/show.d.ts
 export type ShowGate = {
   when: Reactive<unknown>;

package/dist/widgets/spinner.d.mts

@@ -1,5 +1,5 @@
-import { P as RenderCtx, X as State, nt as Reactive, p as Node } from "../queries-BDX8mcl5.mjs";
-import { o as AnyStyle } from "../types-D2EYlzmK.mjs";
+import { i as AnyStyle } from "../types-C9ceMsbJ.mjs";
+import { I as RenderCtx, Q as State, h as Node, it as Reactive } from "../queries-C75-wG1B.mjs";
 //#region src/widgets/spinner.d.ts
 /**
  * Frame sets from the common terminal-spinner vocabulary. Pick one to taste.

package/dist/widgets/text.d.mts

@@ -1,2 +1,2 @@
-import { G as text, H as Text, K as textContent, U as TextContent, W as TextStyle } from "../queries-BDX8mcl5.mjs";
+import { G as TextContent, J as textContent, K as TextStyle, W as Text, q as text } from "../queries-C75-wG1B.mjs";
 export { Text, TextContent, TextStyle, text, textContent };

package/dist/widgets/text.mjs

@@ -1 +1 @@
-export { t as Text, n as text, r as textContent } from "../text-XvPfweeg.mjs";
+export { t as Text, n as text, r as textContent } from "../text-DPrhma4x.mjs";

package/dist/widgets/tree.d.mts

@@ -1,2 +1,2 @@
-import { i as tree, n as TreeNode, r as TreeProps, t as TreeItem } from "../tree-DJl5W_B7.mjs";
+import { i as tree, n as TreeNode, r as TreeProps, t as TreeItem } from "../tree-CTvSpF9b.mjs";
 export { TreeItem, TreeNode, TreeProps, tree };

package/dist/widgets/widget.d.mts

@@ -1,2 +1,2 @@
-import { n as Widget, r as widget, t as Props } from "../widget-DPqBbB57.mjs";
+import { n as Widget, r as widget, t as Props } from "../widget-DlF32PRp.mjs";
 export { Props, Widget, widget };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zaly/tui",
-  "version": "0.0.12",
+  "version": "0.1.0",
   "description": "Terminal UI framework used by zaly.",
   "keywords": [
     "ansi",
@@ -79,18 +79,20 @@
     "access": "public"
   },
   "dependencies": {
-    "@zaly/shared": "0.0.12",
+    "@mathjax/src": "^4.1.3",
+    "@zaly/shared": "0.1.0",
     "diff": "^9.0.0",
     "marked": "^18.1.1",
     "pathe": "^2.0.3",
     "shiki": "^4.5.0"
   },
   "devDependencies": {
+    "@shikijs/vscode-textmate": "10.1.0",
     "ghostty-web": "^0.4.0",
     "mitata": "^1.0.34",
     "slice-ansi": "^9.0.1",
     "string-width": "^8.3.0",
-    "typia": "^15.1.0",
+    "typebox": "^1.4.2",
     "wrap-ansi": "^10.0.2"
   },
   "optionalDependencies": {
@@ -100,14 +102,10 @@
     "bun": ">=1.2",
     "node": ">=22.18.0"
   },
-  "inlinedDependencies": {
-    "typia": "15.1.0"
-  },
   "scripts": {
     "bench": "z bench",
     "build": "z build",
     "build:themes-1-shiki": "bun scripts/themes-shiki.ts",
-    "build:themes-2-nvim": "exit 0; nvim -l scripts/themes-nvim.lua",
     "build:themes-3-tokyonight": "bun scripts/themes-tokyonight.ts",
     "build:themes-4-builtin": "bun scripts/themes-builtin.ts && oxfmt src/themes/builtin.ts",
     "docs:api": "typedoc",

package/assets/themes/dracula-soft.json

@@ -1,100 +0,0 @@
-{
-  "$schema": "file:./../schemas/theme.schema.json",
-  "id": "dracula-soft",
-  "name": "Dracula Theme Soft",
-  "shiki": "dracula-soft",
-  "fg": "#f6f6f4",
-  "bg": "#282A36",
-  "primary": "#bf9eee",
-  "accent": "#f286c4",
-  "success": "#62e884",
-  "info": "#97e1f1",
-  "warn": "#97e1f1",
-  "error": "#ee6666",
-  "muted": "#7b7f8b",
-  "border": "#bf9eee",
-  "selection": {
-    "bg": "#44475A"
-  },
-  "diffAdd": {
-    "bg": "#2d443f",
-    "fg": "#62e884"
-  },
-  "diffDel": {
-    "bg": "#6b3740",
-    "fg": "#ee6666"
-  },
-  "diffTitle": {
-    "fg": "#7b7f8b"
-  },
-  "comment": {
-    "fg": "#7b7f8b"
-  },
-  "syntaxNumber": {
-    "fg": "#bf9eee"
-  },
-  "syntaxString": {
-    "fg": "#e7ee98"
-  },
-  "syntaxBoolean": {
-    "fg": "#bf9eee"
-  },
-  "syntaxFunction": {
-    "fg": "#62e884"
-  },
-  "syntaxField": {
-    "fg": "#f6f6f4"
-  },
-  "syntaxConstant": {
-    "fg": "#bf9eee"
-  },
-  "syntaxSpecial": {
-    "fg": "#f286c4"
-  },
-  "mdHeading": {
-    "bold": true,
-    "fg": "#bf9eee"
-  },
-  "mdHeading1": {
-    "bold": true,
-    "fg": "#bf9eee"
-  },
-  "mdHeading2": {
-    "bold": true,
-    "fg": "#bf9eee"
-  },
-  "mdHeading3": {
-    "bold": true,
-    "fg": "#bf9eee"
-  },
-  "mdHeading4": {
-    "bold": true,
-    "fg": "#bf9eee"
-  },
-  "mdHeading5": {
-    "bold": true,
-    "fg": "#bf9eee"
-  },
-  "mdHeading6": {
-    "bold": true,
-    "fg": "#bf9eee"
-  },
-  "mdBold": {
-    "bold": true,
-    "fg": "#FFB86C"
-  },
-  "mdItalic": {
-    "italic": true,
-    "fg": "#e7ee98"
-  },
-  "mdLink": {
-    "fg": "#97e1f1"
-  },
-  "mdQuote": {
-    "italic": true,
-    "fg": "#e7ee98"
-  },
-  "mdHr": {
-    "fg": "#7b7f8b"
-  }
-}

package/assets/themes/github-dark.json

@@ -1,104 +0,0 @@
-{
-  "$schema": "file:./../schemas/theme.schema.json",
-  "id": "github-dark",
-  "name": "GitHub Dark",
-  "shiki": "github-dark",
-  "fg": "#e1e4e8",
-  "bg": "#24292e",
-  "primary": "#79b8ff",
-  "accent": "#c8e1ff",
-  "success": "#34d058",
-  "info": "#39c5cf",
-  "warn": "#ffea7f",
-  "error": "#f97583",
-  "muted": "#959da5",
-  "border": "#1b1f23",
-  "selection": {
-    "bg": "#284566"
-  },
-  "diffAdd": {
-    "bg": "#254132",
-    "fg": "#85e89d"
-  },
-  "diffDel": {
-    "bg": "#462c33",
-    "fg": "#fdaeb7"
-  },
-  "diffTitle": {
-    "fg": "#fdaeb7",
-    "bg": "#86181d"
-  },
-  "comment": {
-    "fg": "#6a737d"
-  },
-  "syntaxNumber": {
-    "fg": "#79b8ff"
-  },
-  "syntaxString": {
-    "fg": "#9ecbff"
-  },
-  "syntaxBoolean": {
-    "fg": "#79b8ff"
-  },
-  "syntaxFunction": {
-    "fg": "#b392f0"
-  },
-  "syntaxField": {
-    "fg": "#e1e4e8"
-  },
-  "syntaxConstant": {
-    "fg": "#79b8ff"
-  },
-  "syntaxSpecial": {
-    "fg": "#f97583"
-  },
-  "mdHeading": {
-    "bold": true,
-    "fg": "#79b8ff"
-  },
-  "mdHeading1": {
-    "bold": true,
-    "fg": "#79b8ff"
-  },
-  "mdHeading2": {
-    "bold": true,
-    "fg": "#79b8ff"
-  },
-  "mdHeading3": {
-    "bold": true,
-    "fg": "#79b8ff"
-  },
-  "mdHeading4": {
-    "bold": true,
-    "fg": "#79b8ff"
-  },
-  "mdHeading5": {
-    "bold": true,
-    "fg": "#79b8ff"
-  },
-  "mdHeading6": {
-    "bold": true,
-    "fg": "#79b8ff"
-  },
-  "mdBold": {
-    "bold": true,
-    "fg": "#e1e4e8"
-  },
-  "mdItalic": {
-    "italic": true,
-    "fg": "#e1e4e8"
-  },
-  "mdStrikethrough": {
-    "strikethrough": true
-  },
-  "mdLink": {
-    "underline": true
-  },
-  "mdQuote": {
-    "fg": "#85e89d"
-  },
-  "mdHr": {
-    "bold": true,
-    "fg": "#79b8ff"
-  }
-}

package/assets/themes/github-light.json

@@ -1,104 +0,0 @@
-{
-  "$schema": "file:./../schemas/theme.schema.json",
-  "id": "github-light",
-  "name": "GitHub Light",
-  "shiki": "github-light",
-  "fg": "#24292e",
-  "bg": "#fff",
-  "primary": "#0366d6",
-  "accent": "#005cc5",
-  "success": "#28a745",
-  "info": "#1b7c83",
-  "warn": "#f9c513",
-  "error": "#cb2431",
-  "muted": "#959da5",
-  "border": "#e1e4e8",
-  "selection": {
-    "bg": "#dae9f9"
-  },
-  "diffAdd": {
-    "bg": "#e4f9e9",
-    "fg": "#22863a"
-  },
-  "diffDel": {
-    "bg": "#fae5e7",
-    "fg": "#b31d28"
-  },
-  "diffTitle": {
-    "fg": "#b31d28",
-    "bg": "#ffeef0"
-  },
-  "comment": {
-    "fg": "#6a737d"
-  },
-  "syntaxNumber": {
-    "fg": "#005cc5"
-  },
-  "syntaxString": {
-    "fg": "#032f62"
-  },
-  "syntaxBoolean": {
-    "fg": "#005cc5"
-  },
-  "syntaxFunction": {
-    "fg": "#6f42c1"
-  },
-  "syntaxField": {
-    "fg": "#24292e"
-  },
-  "syntaxConstant": {
-    "fg": "#005cc5"
-  },
-  "syntaxSpecial": {
-    "fg": "#d73a49"
-  },
-  "mdHeading": {
-    "bold": true,
-    "fg": "#005cc5"
-  },
-  "mdHeading1": {
-    "bold": true,
-    "fg": "#005cc5"
-  },
-  "mdHeading2": {
-    "bold": true,
-    "fg": "#005cc5"
-  },
-  "mdHeading3": {
-    "bold": true,
-    "fg": "#005cc5"
-  },
-  "mdHeading4": {
-    "bold": true,
-    "fg": "#005cc5"
-  },
-  "mdHeading5": {
-    "bold": true,
-    "fg": "#005cc5"
-  },
-  "mdHeading6": {
-    "bold": true,
-    "fg": "#005cc5"
-  },
-  "mdBold": {
-    "bold": true,
-    "fg": "#24292e"
-  },
-  "mdItalic": {
-    "italic": true,
-    "fg": "#24292e"
-  },
-  "mdStrikethrough": {
-    "strikethrough": true
-  },
-  "mdLink": {
-    "underline": true
-  },
-  "mdQuote": {
-    "fg": "#22863a"
-  },
-  "mdHr": {
-    "bold": true,
-    "fg": "#005cc5"
-  }
-}