@boba-cli/markdown 0.1.0-alpha.2

package/README.md

@@ -0,0 +1,41 @@
+# @boba-cli/markdown
+
+Markdown viewer component for Boba terminal UIs.
+
+<img src="../../examples/markdown-demo.gif" width="950" alt="Markdown component demo" />
+
+## Features
+
+- Renders markdown with beautiful terminal styling
+- Scrollable viewport for long documents
+- Automatic light/dark theme detection
+- Support for headers, code blocks, lists, links, and more
+- Word wrapping at viewport width
+
+## Installation
+
+```bash
+pnpm add @boba-cli/markdown
+```
+
+## Usage
+
+```typescript
+import { MarkdownModel } from '@boba-cli/markdown'
+import { Program } from '@boba-cli/tea'
+
+let model = MarkdownModel.new({ active: true })
+const [updatedModel, cmd] = model.setFileName('README.md')
+model = updatedModel
+
+// Handle resize
+const [resizedModel] = model.setSize(width, height)
+model = resizedModel
+
+// Render
+const view = model.view()
+```
+
+## API
+
+See the [API documentation](../../docs/markdown.md) for complete details.

package/dist/index.cjs

@@ -0,0 +1,200 @@
+'use strict';
+
+var chapstick = require('@boba-cli/chapstick');
+var filesystem = require('@boba-cli/filesystem');
+var viewport = require('@boba-cli/viewport');
+var marked = require('marked');
+var markedTerminal = require('marked-terminal');
+var machine = require('@boba-cli/machine');
+
+// src/model.ts
+
+// src/messages.ts
+var RenderMarkdownMsg = class {
+  constructor(content) {
+    this.content = content;
+  }
+  _tag = "markdown-render";
+};
+var ErrorMsg = class {
+  constructor(error) {
+    this.error = error;
+  }
+  _tag = "markdown-error";
+};
+function renderMarkdown(content, options = {}) {
+  const width = options.width ?? 80;
+  const background = options.background ?? options.env?.getTerminalBackground() ?? "dark";
+  const isDark = background !== "light";
+  const style = machine.createAlwaysEnabledStyle();
+  const marked$1 = new marked.Marked(
+    markedTerminal.markedTerminal({
+      // Wrap text at specified width
+      width,
+      reflowText: true,
+      // Headings - brighter on dark backgrounds
+      firstHeading: isDark ? style.cyan.bold : style.blue.bold,
+      heading: isDark ? style.cyan.bold : style.blue.bold,
+      // Code blocks
+      code: isDark ? style.white : style.gray,
+      blockquote: isDark ? style.white : style.gray,
+      // Emphasis
+      strong: style.bold,
+      em: style.italic,
+      // Lists
+      listitem: style,
+      // Links
+      link: isDark ? style.blueBright : style.blue,
+      // Other elements
+      hr: style.gray,
+      paragraph: style
+    })
+  );
+  try {
+    const rendered = marked$1.parse(content);
+    return rendered.trim();
+  } catch (error) {
+    throw new Error(
+      `Failed to render markdown: ${error instanceof Error ? error.message : String(error)}`
+    );
+  }
+}
+
+// src/model.ts
+var MarkdownModel = class _MarkdownModel {
+  viewport;
+  active;
+  fileName;
+  filesystem;
+  constructor(options) {
+    this.viewport = options.viewport;
+    this.active = options.active;
+    this.fileName = options.fileName;
+    this.filesystem = options.filesystem;
+  }
+  /**
+   * Create a new markdown model.
+   * @param options - Configuration options
+   */
+  static new(options) {
+    const viewport$1 = viewport.ViewportModel.new({
+      width: options.width ?? 0,
+      height: options.height ?? 0,
+      style: options.style
+    });
+    return new _MarkdownModel({
+      viewport: viewport$1,
+      active: options.active ?? true,
+      fileName: "",
+      filesystem: options.filesystem
+    });
+  }
+  /**
+   * Tea init hook (no-op).
+   */
+  init() {
+    return null;
+  }
+  /**
+   * Set the filename to render. Returns a command that will read and render the file.
+   * @param fileName - Path to the markdown file
+   */
+  setFileName(fileName) {
+    const updated = this.with({ fileName });
+    const cmd = renderMarkdownCmd(this.filesystem, this.viewport.width, fileName);
+    return [updated, cmd];
+  }
+  /**
+   * Set the size of the viewport and re-render if a file is set.
+   * @param width - New width
+   * @param height - New height
+   */
+  setSize(width, height) {
+    const updatedViewport = this.viewport.setWidth(width).setHeight(height);
+    const updated = this.with({ viewport: updatedViewport });
+    if (this.fileName !== "") {
+      const cmd = renderMarkdownCmd(this.filesystem, width, this.fileName);
+      return [updated, cmd];
+    }
+    return [updated, null];
+  }
+  /**
+   * Set whether the component is active and should handle input.
+   * @param active - Active state
+   */
+  setIsActive(active) {
+    if (active === this.active) return this;
+    return this.with({ active });
+  }
+  /**
+   * Scroll to the top of the viewport.
+   */
+  gotoTop() {
+    const updatedViewport = this.viewport.scrollToTop();
+    if (updatedViewport === this.viewport) return this;
+    return this.with({ viewport: updatedViewport });
+  }
+  /**
+   * Handle messages. Processes viewport scrolling and markdown rendering.
+   * @param msg - The message to handle
+   */
+  update(msg) {
+    if (msg instanceof RenderMarkdownMsg) {
+      const styled = new chapstick.Style().width(this.viewport.width).alignHorizontal("left").render(msg.content);
+      const updatedViewport = this.viewport.setContent(styled);
+      return [this.with({ viewport: updatedViewport }), null];
+    }
+    if (msg instanceof ErrorMsg) {
+      const errorContent = msg.error.message;
+      const updatedViewport = this.viewport.setContent(errorContent);
+      return [
+        this.with({
+          fileName: "",
+          viewport: updatedViewport
+        }),
+        null
+      ];
+    }
+    if (this.active) {
+      const [updatedViewport, cmd] = this.viewport.update(msg);
+      if (updatedViewport !== this.viewport) {
+        return [this.with({ viewport: updatedViewport }), cmd];
+      }
+    }
+    return [this, null];
+  }
+  /**
+   * Render the markdown viewport.
+   */
+  view() {
+    return this.viewport.view();
+  }
+  with(patch) {
+    return new _MarkdownModel({
+      viewport: patch.viewport ?? this.viewport,
+      active: patch.active ?? this.active,
+      fileName: patch.fileName ?? this.fileName,
+      filesystem: patch.filesystem ?? this.filesystem
+    });
+  }
+};
+function renderMarkdownCmd(fs, width, fileName) {
+  return async () => {
+    try {
+      const content = await filesystem.readFileContent(fs, fileName);
+      const rendered = renderMarkdown(content, { width });
+      return new RenderMarkdownMsg(rendered);
+    } catch (error) {
+      return new ErrorMsg(
+        error instanceof Error ? error : new Error(String(error))
+      );
+    }
+  };
+}
+
+exports.ErrorMsg = ErrorMsg;
+exports.MarkdownModel = MarkdownModel;
+exports.RenderMarkdownMsg = RenderMarkdownMsg;
+exports.renderMarkdown = renderMarkdown;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/messages.ts","../src/renderer.ts","../src/model.ts"],"names":["createAlwaysEnabledStyle","marked","Marked","markedTerminal","viewport","ViewportModel","Style","readFileContent"],"mappings":"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","file":"index.cjs","sourcesContent":["/**\n * Message types for the markdown component.\n */\n\n/**\n * Message containing rendered markdown content.\n * @public\n */\nexport class RenderMarkdownMsg {\n  readonly _tag = 'markdown-render'\n\n  constructor(public readonly content: string) {}\n}\n\n/**\n * Message containing an error from file reading or rendering.\n * @public\n */\nexport class ErrorMsg {\n  readonly _tag = 'markdown-error'\n\n  constructor(public readonly error: Error) {}\n}\n","/**\n * Markdown rendering utilities.\n */\n\nimport { Marked } from 'marked'\nimport { markedTerminal } from 'marked-terminal'\nimport type { EnvironmentAdapter, TerminalBackground } from '@boba-cli/machine'\nimport { createAlwaysEnabledStyle } from '@boba-cli/machine'\n\n/**\n * Options for rendering markdown.\n * @public\n */\nexport interface RenderMarkdownOptions {\n  /**\n   * Width for word wrapping. Defaults to 80.\n   */\n  width?: number\n  /**\n   * Terminal background mode. Defaults to 'dark'.\n   */\n  background?: TerminalBackground\n  /**\n   * Environment adapter for detecting terminal capabilities.\n   */\n  env?: EnvironmentAdapter\n}\n\n/**\n * Renders markdown content with terminal styling.\n * Detects terminal background (light/dark) and applies appropriate styling.\n *\n * @param content - The markdown string to render\n * @param options - Rendering options\n * @returns The styled markdown output\n * @public\n */\nexport function renderMarkdown(\n  content: string,\n  options: RenderMarkdownOptions = {},\n): string {\n  const width = options.width ?? 80\n  const background = options.background ?? options.env?.getTerminalBackground() ?? 'dark'\n\n  // Use appropriate colors for terminal background\n  const isDark = background !== 'light'\n\n  // Create a style function with full color support for markdown rendering\n  const style = createAlwaysEnabledStyle()\n\n  // Create marked instance with terminal renderer\n  const marked = new Marked(\n    markedTerminal({\n      // Wrap text at specified width\n      width,\n      reflowText: true,\n      // Headings - brighter on dark backgrounds\n      firstHeading: isDark ? style.cyan.bold : style.blue.bold,\n      heading: isDark ? style.cyan.bold : style.blue.bold,\n      // Code blocks\n      code: isDark ? style.white : style.gray,\n      blockquote: isDark ? style.white : style.gray,\n      // Emphasis\n      strong: style.bold,\n      em: style.italic,\n      // Lists\n      listitem: style,\n      // Links\n      link: isDark ? style.blueBright : style.blue,\n      // Other elements\n      hr: style.gray,\n      paragraph: style,\n    }),\n  )\n\n  try {\n    const rendered = marked.parse(content) as string\n    return rendered.trim()\n  } catch (error) {\n    throw new Error(\n      `Failed to render markdown: ${error instanceof Error ? error.message : String(error)}`,\n    )\n  }\n}\n","/**\n * Markdown viewer component.\n */\n\nimport { Style } from '@boba-cli/chapstick'\nimport { readFileContent } from '@boba-cli/filesystem'\nimport { ViewportModel } from '@boba-cli/viewport'\nimport type { Cmd, Msg } from '@boba-cli/tea'\nimport type { FileSystemAdapter } from '@boba-cli/machine'\nimport { RenderMarkdownMsg, ErrorMsg } from './messages.js'\nimport { renderMarkdown } from './renderer.js'\n\n/**\n * Options for creating a markdown model.\n * @public\n */\nexport interface MarkdownOptions {\n  /**\n   * Filesystem adapter for file operations.\n   */\n  filesystem: FileSystemAdapter\n  /**\n   * Whether the component is active and should handle input.\n   * Defaults to true.\n   */\n  active?: boolean\n  /**\n   * Initial width for the viewport.\n   * Defaults to 0.\n   */\n  width?: number\n  /**\n   * Initial height for the viewport.\n   * Defaults to 0.\n   */\n  height?: number\n  /**\n   * Style for the viewport.\n   */\n  style?: Style\n}\n\n/**\n * Markdown viewer model that renders markdown files with terminal styling\n * in a scrollable viewport.\n * @public\n */\nexport class MarkdownModel {\n  readonly viewport: ViewportModel\n  readonly active: boolean\n  readonly fileName: string\n  readonly filesystem: FileSystemAdapter\n\n  private constructor(options: {\n    viewport: ViewportModel\n    active: boolean\n    fileName: string\n    filesystem: FileSystemAdapter\n  }) {\n    this.viewport = options.viewport\n    this.active = options.active\n    this.fileName = options.fileName\n    this.filesystem = options.filesystem\n  }\n\n  /**\n   * Create a new markdown model.\n   * @param options - Configuration options\n   */\n  static new(options: MarkdownOptions): MarkdownModel {\n    const viewport = ViewportModel.new({\n      width: options.width ?? 0,\n      height: options.height ?? 0,\n      style: options.style,\n    })\n\n    return new MarkdownModel({\n      viewport,\n      active: options.active ?? true,\n      fileName: '',\n      filesystem: options.filesystem,\n    })\n  }\n\n  /**\n   * Tea init hook (no-op).\n   */\n  init(): Cmd<Msg> {\n    return null\n  }\n\n  /**\n   * Set the filename to render. Returns a command that will read and render the file.\n   * @param fileName - Path to the markdown file\n   */\n  setFileName(fileName: string): [MarkdownModel, Cmd<Msg>] {\n    const updated = this.with({ fileName })\n    const cmd = renderMarkdownCmd(this.filesystem, this.viewport.width, fileName)\n    return [updated, cmd]\n  }\n\n  /**\n   * Set the size of the viewport and re-render if a file is set.\n   * @param width - New width\n   * @param height - New height\n   */\n  setSize(width: number, height: number): [MarkdownModel, Cmd<Msg>] {\n    const updatedViewport = this.viewport.setWidth(width).setHeight(height)\n    const updated = this.with({ viewport: updatedViewport })\n\n    if (this.fileName !== '') {\n      const cmd = renderMarkdownCmd(this.filesystem, width, this.fileName)\n      return [updated, cmd]\n    }\n\n    return [updated, null]\n  }\n\n  /**\n   * Set whether the component is active and should handle input.\n   * @param active - Active state\n   */\n  setIsActive(active: boolean): MarkdownModel {\n    if (active === this.active) return this\n    return this.with({ active })\n  }\n\n  /**\n   * Scroll to the top of the viewport.\n   */\n  gotoTop(): MarkdownModel {\n    const updatedViewport = this.viewport.scrollToTop()\n    if (updatedViewport === this.viewport) return this\n    return this.with({ viewport: updatedViewport })\n  }\n\n  /**\n   * Handle messages. Processes viewport scrolling and markdown rendering.\n   * @param msg - The message to handle\n   */\n  update(msg: Msg): [MarkdownModel, Cmd<Msg>] {\n    // Handle markdown rendering\n    if (msg instanceof RenderMarkdownMsg) {\n      // Apply width for word wrapping and left-align to pad lines to consistent width\n      // Viewport handles height/scrolling\n      const styled = new Style()\n        .width(this.viewport.width)\n        .alignHorizontal('left')\n        .render(msg.content)\n\n      const updatedViewport = this.viewport.setContent(styled)\n      return [this.with({ viewport: updatedViewport }), null]\n    }\n\n    // Handle errors\n    if (msg instanceof ErrorMsg) {\n      const errorContent = msg.error.message\n      const updatedViewport = this.viewport.setContent(errorContent)\n      return [\n        this.with({\n          fileName: '',\n          viewport: updatedViewport,\n        }),\n        null,\n      ]\n    }\n\n    // Handle viewport updates if active\n    if (this.active) {\n      const [updatedViewport, cmd] = this.viewport.update(msg)\n      if (updatedViewport !== this.viewport) {\n        return [this.with({ viewport: updatedViewport }), cmd]\n      }\n    }\n\n    return [this, null]\n  }\n\n  /**\n   * Render the markdown viewport.\n   */\n  view(): string {\n    return this.viewport.view()\n  }\n\n  private with(patch: Partial<MarkdownModel>): MarkdownModel {\n    return new MarkdownModel({\n      viewport: patch.viewport ?? this.viewport,\n      active: patch.active ?? this.active,\n      fileName: patch.fileName ?? this.fileName,\n      filesystem: patch.filesystem ?? this.filesystem,\n    })\n  }\n}\n\n/**\n * Command to read and render a markdown file.\n */\nfunction renderMarkdownCmd(\n  fs: FileSystemAdapter,\n  width: number,\n  fileName: string,\n): Cmd<Msg> {\n  return async () => {\n    try {\n      const content = await readFileContent(fs, fileName)\n      const rendered = renderMarkdown(content, { width })\n      return new RenderMarkdownMsg(rendered)\n    } catch (error) {\n      return new ErrorMsg(\n        error instanceof Error ? error : new Error(String(error)),\n      )\n    }\n  }\n}\n"]}

package/dist/index.d.cts

@@ -0,0 +1,146 @@
+import { Style } from '@boba-cli/chapstick';
+import { ViewportModel } from '@boba-cli/viewport';
+import { Cmd, Msg } from '@boba-cli/tea';
+import { FileSystemAdapter, TerminalBackground, EnvironmentAdapter } from '@boba-cli/machine';
+
+/**
+ * Markdown viewer component.
+ */
+
+/**
+ * Options for creating a markdown model.
+ * @public
+ */
+interface MarkdownOptions {
+    /**
+     * Filesystem adapter for file operations.
+     */
+    filesystem: FileSystemAdapter;
+    /**
+     * Whether the component is active and should handle input.
+     * Defaults to true.
+     */
+    active?: boolean;
+    /**
+     * Initial width for the viewport.
+     * Defaults to 0.
+     */
+    width?: number;
+    /**
+     * Initial height for the viewport.
+     * Defaults to 0.
+     */
+    height?: number;
+    /**
+     * Style for the viewport.
+     */
+    style?: Style;
+}
+/**
+ * Markdown viewer model that renders markdown files with terminal styling
+ * in a scrollable viewport.
+ * @public
+ */
+declare class MarkdownModel {
+    readonly viewport: ViewportModel;
+    readonly active: boolean;
+    readonly fileName: string;
+    readonly filesystem: FileSystemAdapter;
+    private constructor();
+    /**
+     * Create a new markdown model.
+     * @param options - Configuration options
+     */
+    static new(options: MarkdownOptions): MarkdownModel;
+    /**
+     * Tea init hook (no-op).
+     */
+    init(): Cmd<Msg>;
+    /**
+     * Set the filename to render. Returns a command that will read and render the file.
+     * @param fileName - Path to the markdown file
+     */
+    setFileName(fileName: string): [MarkdownModel, Cmd<Msg>];
+    /**
+     * Set the size of the viewport and re-render if a file is set.
+     * @param width - New width
+     * @param height - New height
+     */
+    setSize(width: number, height: number): [MarkdownModel, Cmd<Msg>];
+    /**
+     * Set whether the component is active and should handle input.
+     * @param active - Active state
+     */
+    setIsActive(active: boolean): MarkdownModel;
+    /**
+     * Scroll to the top of the viewport.
+     */
+    gotoTop(): MarkdownModel;
+    /**
+     * Handle messages. Processes viewport scrolling and markdown rendering.
+     * @param msg - The message to handle
+     */
+    update(msg: Msg): [MarkdownModel, Cmd<Msg>];
+    /**
+     * Render the markdown viewport.
+     */
+    view(): string;
+    private with;
+}
+
+/**
+ * Message types for the markdown component.
+ */
+/**
+ * Message containing rendered markdown content.
+ * @public
+ */
+declare class RenderMarkdownMsg {
+    readonly content: string;
+    readonly _tag = "markdown-render";
+    constructor(content: string);
+}
+/**
+ * Message containing an error from file reading or rendering.
+ * @public
+ */
+declare class ErrorMsg {
+    readonly error: Error;
+    readonly _tag = "markdown-error";
+    constructor(error: Error);
+}
+
+/**
+ * Markdown rendering utilities.
+ */
+
+/**
+ * Options for rendering markdown.
+ * @public
+ */
+interface RenderMarkdownOptions {
+    /**
+     * Width for word wrapping. Defaults to 80.
+     */
+    width?: number;
+    /**
+     * Terminal background mode. Defaults to 'dark'.
+     */
+    background?: TerminalBackground;
+    /**
+     * Environment adapter for detecting terminal capabilities.
+     */
+    env?: EnvironmentAdapter;
+}
+/**
+ * Renders markdown content with terminal styling.
+ * Detects terminal background (light/dark) and applies appropriate styling.
+ *
+ * @param content - The markdown string to render
+ * @param options - Rendering options
+ * @returns The styled markdown output
+ * @public
+ */
+declare function renderMarkdown(content: string, options?: RenderMarkdownOptions): string;
+
+export { ErrorMsg, MarkdownModel, type MarkdownOptions, RenderMarkdownMsg, type RenderMarkdownOptions, renderMarkdown };

package/dist/index.d.ts

@@ -0,0 +1,146 @@
+import { Style } from '@boba-cli/chapstick';
+import { ViewportModel } from '@boba-cli/viewport';
+import { Cmd, Msg } from '@boba-cli/tea';
+import { FileSystemAdapter, TerminalBackground, EnvironmentAdapter } from '@boba-cli/machine';
+
+/**
+ * Markdown viewer component.
+ */
+
+/**
+ * Options for creating a markdown model.
+ * @public
+ */
+interface MarkdownOptions {
+    /**
+     * Filesystem adapter for file operations.
+     */
+    filesystem: FileSystemAdapter;
+    /**
+     * Whether the component is active and should handle input.
+     * Defaults to true.
+     */
+    active?: boolean;
+    /**
+     * Initial width for the viewport.
+     * Defaults to 0.
+     */
+    width?: number;
+    /**
+     * Initial height for the viewport.
+     * Defaults to 0.
+     */
+    height?: number;
+    /**
+     * Style for the viewport.
+     */
+    style?: Style;
+}
+/**
+ * Markdown viewer model that renders markdown files with terminal styling
+ * in a scrollable viewport.
+ * @public
+ */
+declare class MarkdownModel {
+    readonly viewport: ViewportModel;
+    readonly active: boolean;
+    readonly fileName: string;
+    readonly filesystem: FileSystemAdapter;
+    private constructor();
+    /**
+     * Create a new markdown model.
+     * @param options - Configuration options
+     */
+    static new(options: MarkdownOptions): MarkdownModel;
+    /**
+     * Tea init hook (no-op).
+     */
+    init(): Cmd<Msg>;
+    /**
+     * Set the filename to render. Returns a command that will read and render the file.
+     * @param fileName - Path to the markdown file
+     */
+    setFileName(fileName: string): [MarkdownModel, Cmd<Msg>];
+    /**
+     * Set the size of the viewport and re-render if a file is set.
+     * @param width - New width
+     * @param height - New height
+     */
+    setSize(width: number, height: number): [MarkdownModel, Cmd<Msg>];
+    /**
+     * Set whether the component is active and should handle input.
+     * @param active - Active state
+     */
+    setIsActive(active: boolean): MarkdownModel;
+    /**
+     * Scroll to the top of the viewport.
+     */
+    gotoTop(): MarkdownModel;
+    /**
+     * Handle messages. Processes viewport scrolling and markdown rendering.
+     * @param msg - The message to handle
+     */
+    update(msg: Msg): [MarkdownModel, Cmd<Msg>];
+    /**
+     * Render the markdown viewport.
+     */
+    view(): string;
+    private with;
+}
+
+/**
+ * Message types for the markdown component.
+ */
+/**
+ * Message containing rendered markdown content.
+ * @public
+ */
+declare class RenderMarkdownMsg {
+    readonly content: string;
+    readonly _tag = "markdown-render";
+    constructor(content: string);
+}
+/**
+ * Message containing an error from file reading or rendering.
+ * @public
+ */
+declare class ErrorMsg {
+    readonly error: Error;
+    readonly _tag = "markdown-error";
+    constructor(error: Error);
+}
+
+/**
+ * Markdown rendering utilities.
+ */
+
+/**
+ * Options for rendering markdown.
+ * @public
+ */
+interface RenderMarkdownOptions {
+    /**
+     * Width for word wrapping. Defaults to 80.
+     */
+    width?: number;
+    /**
+     * Terminal background mode. Defaults to 'dark'.
+     */
+    background?: TerminalBackground;
+    /**
+     * Environment adapter for detecting terminal capabilities.
+     */
+    env?: EnvironmentAdapter;
+}
+/**
+ * Renders markdown content with terminal styling.
+ * Detects terminal background (light/dark) and applies appropriate styling.
+ *
+ * @param content - The markdown string to render
+ * @param options - Rendering options
+ * @returns The styled markdown output
+ * @public
+ */
+declare function renderMarkdown(content: string, options?: RenderMarkdownOptions): string;
+
+export { ErrorMsg, MarkdownModel, type MarkdownOptions, RenderMarkdownMsg, type RenderMarkdownOptions, renderMarkdown };

package/dist/index.js

@@ -0,0 +1,195 @@
+import { Style } from '@boba-cli/chapstick';
+import { readFileContent } from '@boba-cli/filesystem';
+import { ViewportModel } from '@boba-cli/viewport';
+import { Marked } from 'marked';
+import { markedTerminal } from 'marked-terminal';
+import { createAlwaysEnabledStyle } from '@boba-cli/machine';
+
+// src/model.ts
+
+// src/messages.ts
+var RenderMarkdownMsg = class {
+  constructor(content) {
+    this.content = content;
+  }
+  _tag = "markdown-render";
+};
+var ErrorMsg = class {
+  constructor(error) {
+    this.error = error;
+  }
+  _tag = "markdown-error";
+};
+function renderMarkdown(content, options = {}) {
+  const width = options.width ?? 80;
+  const background = options.background ?? options.env?.getTerminalBackground() ?? "dark";
+  const isDark = background !== "light";
+  const style = createAlwaysEnabledStyle();
+  const marked = new Marked(
+    markedTerminal({
+      // Wrap text at specified width
+      width,
+      reflowText: true,
+      // Headings - brighter on dark backgrounds
+      firstHeading: isDark ? style.cyan.bold : style.blue.bold,
+      heading: isDark ? style.cyan.bold : style.blue.bold,
+      // Code blocks
+      code: isDark ? style.white : style.gray,
+      blockquote: isDark ? style.white : style.gray,
+      // Emphasis
+      strong: style.bold,
+      em: style.italic,
+      // Lists
+      listitem: style,
+      // Links
+      link: isDark ? style.blueBright : style.blue,
+      // Other elements
+      hr: style.gray,
+      paragraph: style
+    })
+  );
+  try {
+    const rendered = marked.parse(content);
+    return rendered.trim();
+  } catch (error) {
+    throw new Error(
+      `Failed to render markdown: ${error instanceof Error ? error.message : String(error)}`
+    );
+  }
+}
+
+// src/model.ts
+var MarkdownModel = class _MarkdownModel {
+  viewport;
+  active;
+  fileName;
+  filesystem;
+  constructor(options) {
+    this.viewport = options.viewport;
+    this.active = options.active;
+    this.fileName = options.fileName;
+    this.filesystem = options.filesystem;
+  }
+  /**
+   * Create a new markdown model.
+   * @param options - Configuration options
+   */
+  static new(options) {
+    const viewport = ViewportModel.new({
+      width: options.width ?? 0,
+      height: options.height ?? 0,
+      style: options.style
+    });
+    return new _MarkdownModel({
+      viewport,
+      active: options.active ?? true,
+      fileName: "",
+      filesystem: options.filesystem
+    });
+  }
+  /**
+   * Tea init hook (no-op).
+   */
+  init() {
+    return null;
+  }
+  /**
+   * Set the filename to render. Returns a command that will read and render the file.
+   * @param fileName - Path to the markdown file
+   */
+  setFileName(fileName) {
+    const updated = this.with({ fileName });
+    const cmd = renderMarkdownCmd(this.filesystem, this.viewport.width, fileName);
+    return [updated, cmd];
+  }
+  /**
+   * Set the size of the viewport and re-render if a file is set.
+   * @param width - New width
+   * @param height - New height
+   */
+  setSize(width, height) {
+    const updatedViewport = this.viewport.setWidth(width).setHeight(height);
+    const updated = this.with({ viewport: updatedViewport });
+    if (this.fileName !== "") {
+      const cmd = renderMarkdownCmd(this.filesystem, width, this.fileName);
+      return [updated, cmd];
+    }
+    return [updated, null];
+  }
+  /**
+   * Set whether the component is active and should handle input.
+   * @param active - Active state
+   */
+  setIsActive(active) {
+    if (active === this.active) return this;
+    return this.with({ active });
+  }
+  /**
+   * Scroll to the top of the viewport.
+   */
+  gotoTop() {
+    const updatedViewport = this.viewport.scrollToTop();
+    if (updatedViewport === this.viewport) return this;
+    return this.with({ viewport: updatedViewport });
+  }
+  /**
+   * Handle messages. Processes viewport scrolling and markdown rendering.
+   * @param msg - The message to handle
+   */
+  update(msg) {
+    if (msg instanceof RenderMarkdownMsg) {
+      const styled = new Style().width(this.viewport.width).alignHorizontal("left").render(msg.content);
+      const updatedViewport = this.viewport.setContent(styled);
+      return [this.with({ viewport: updatedViewport }), null];
+    }
+    if (msg instanceof ErrorMsg) {
+      const errorContent = msg.error.message;
+      const updatedViewport = this.viewport.setContent(errorContent);
+      return [
+        this.with({
+          fileName: "",
+          viewport: updatedViewport
+        }),
+        null
+      ];
+    }
+    if (this.active) {
+      const [updatedViewport, cmd] = this.viewport.update(msg);
+      if (updatedViewport !== this.viewport) {
+        return [this.with({ viewport: updatedViewport }), cmd];
+      }
+    }
+    return [this, null];
+  }
+  /**
+   * Render the markdown viewport.
+   */
+  view() {
+    return this.viewport.view();
+  }
+  with(patch) {
+    return new _MarkdownModel({
+      viewport: patch.viewport ?? this.viewport,
+      active: patch.active ?? this.active,
+      fileName: patch.fileName ?? this.fileName,
+      filesystem: patch.filesystem ?? this.filesystem
+    });
+  }
+};
+function renderMarkdownCmd(fs, width, fileName) {
+  return async () => {
+    try {
+      const content = await readFileContent(fs, fileName);
+      const rendered = renderMarkdown(content, { width });
+      return new RenderMarkdownMsg(rendered);
+    } catch (error) {
+      return new ErrorMsg(
+        error instanceof Error ? error : new Error(String(error))
+      );
+    }
+  };
+}
+
+export { ErrorMsg, MarkdownModel, RenderMarkdownMsg, renderMarkdown };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/messages.ts","../src/renderer.ts","../src/model.ts"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["/**\n * Message types for the markdown component.\n */\n\n/**\n * Message containing rendered markdown content.\n * @public\n */\nexport class RenderMarkdownMsg {\n  readonly _tag = 'markdown-render'\n\n  constructor(public readonly content: string) {}\n}\n\n/**\n * Message containing an error from file reading or rendering.\n * @public\n */\nexport class ErrorMsg {\n  readonly _tag = 'markdown-error'\n\n  constructor(public readonly error: Error) {}\n}\n","/**\n * Markdown rendering utilities.\n */\n\nimport { Marked } from 'marked'\nimport { markedTerminal } from 'marked-terminal'\nimport type { EnvironmentAdapter, TerminalBackground } from '@boba-cli/machine'\nimport { createAlwaysEnabledStyle } from '@boba-cli/machine'\n\n/**\n * Options for rendering markdown.\n * @public\n */\nexport interface RenderMarkdownOptions {\n  /**\n   * Width for word wrapping. Defaults to 80.\n   */\n  width?: number\n  /**\n   * Terminal background mode. Defaults to 'dark'.\n   */\n  background?: TerminalBackground\n  /**\n   * Environment adapter for detecting terminal capabilities.\n   */\n  env?: EnvironmentAdapter\n}\n\n/**\n * Renders markdown content with terminal styling.\n * Detects terminal background (light/dark) and applies appropriate styling.\n *\n * @param content - The markdown string to render\n * @param options - Rendering options\n * @returns The styled markdown output\n * @public\n */\nexport function renderMarkdown(\n  content: string,\n  options: RenderMarkdownOptions = {},\n): string {\n  const width = options.width ?? 80\n  const background = options.background ?? options.env?.getTerminalBackground() ?? 'dark'\n\n  // Use appropriate colors for terminal background\n  const isDark = background !== 'light'\n\n  // Create a style function with full color support for markdown rendering\n  const style = createAlwaysEnabledStyle()\n\n  // Create marked instance with terminal renderer\n  const marked = new Marked(\n    markedTerminal({\n      // Wrap text at specified width\n      width,\n      reflowText: true,\n      // Headings - brighter on dark backgrounds\n      firstHeading: isDark ? style.cyan.bold : style.blue.bold,\n      heading: isDark ? style.cyan.bold : style.blue.bold,\n      // Code blocks\n      code: isDark ? style.white : style.gray,\n      blockquote: isDark ? style.white : style.gray,\n      // Emphasis\n      strong: style.bold,\n      em: style.italic,\n      // Lists\n      listitem: style,\n      // Links\n      link: isDark ? style.blueBright : style.blue,\n      // Other elements\n      hr: style.gray,\n      paragraph: style,\n    }),\n  )\n\n  try {\n    const rendered = marked.parse(content) as string\n    return rendered.trim()\n  } catch (error) {\n    throw new Error(\n      `Failed to render markdown: ${error instanceof Error ? error.message : String(error)}`,\n    )\n  }\n}\n","/**\n * Markdown viewer component.\n */\n\nimport { Style } from '@boba-cli/chapstick'\nimport { readFileContent } from '@boba-cli/filesystem'\nimport { ViewportModel } from '@boba-cli/viewport'\nimport type { Cmd, Msg } from '@boba-cli/tea'\nimport type { FileSystemAdapter } from '@boba-cli/machine'\nimport { RenderMarkdownMsg, ErrorMsg } from './messages.js'\nimport { renderMarkdown } from './renderer.js'\n\n/**\n * Options for creating a markdown model.\n * @public\n */\nexport interface MarkdownOptions {\n  /**\n   * Filesystem adapter for file operations.\n   */\n  filesystem: FileSystemAdapter\n  /**\n   * Whether the component is active and should handle input.\n   * Defaults to true.\n   */\n  active?: boolean\n  /**\n   * Initial width for the viewport.\n   * Defaults to 0.\n   */\n  width?: number\n  /**\n   * Initial height for the viewport.\n   * Defaults to 0.\n   */\n  height?: number\n  /**\n   * Style for the viewport.\n   */\n  style?: Style\n}\n\n/**\n * Markdown viewer model that renders markdown files with terminal styling\n * in a scrollable viewport.\n * @public\n */\nexport class MarkdownModel {\n  readonly viewport: ViewportModel\n  readonly active: boolean\n  readonly fileName: string\n  readonly filesystem: FileSystemAdapter\n\n  private constructor(options: {\n    viewport: ViewportModel\n    active: boolean\n    fileName: string\n    filesystem: FileSystemAdapter\n  }) {\n    this.viewport = options.viewport\n    this.active = options.active\n    this.fileName = options.fileName\n    this.filesystem = options.filesystem\n  }\n\n  /**\n   * Create a new markdown model.\n   * @param options - Configuration options\n   */\n  static new(options: MarkdownOptions): MarkdownModel {\n    const viewport = ViewportModel.new({\n      width: options.width ?? 0,\n      height: options.height ?? 0,\n      style: options.style,\n    })\n\n    return new MarkdownModel({\n      viewport,\n      active: options.active ?? true,\n      fileName: '',\n      filesystem: options.filesystem,\n    })\n  }\n\n  /**\n   * Tea init hook (no-op).\n   */\n  init(): Cmd<Msg> {\n    return null\n  }\n\n  /**\n   * Set the filename to render. Returns a command that will read and render the file.\n   * @param fileName - Path to the markdown file\n   */\n  setFileName(fileName: string): [MarkdownModel, Cmd<Msg>] {\n    const updated = this.with({ fileName })\n    const cmd = renderMarkdownCmd(this.filesystem, this.viewport.width, fileName)\n    return [updated, cmd]\n  }\n\n  /**\n   * Set the size of the viewport and re-render if a file is set.\n   * @param width - New width\n   * @param height - New height\n   */\n  setSize(width: number, height: number): [MarkdownModel, Cmd<Msg>] {\n    const updatedViewport = this.viewport.setWidth(width).setHeight(height)\n    const updated = this.with({ viewport: updatedViewport })\n\n    if (this.fileName !== '') {\n      const cmd = renderMarkdownCmd(this.filesystem, width, this.fileName)\n      return [updated, cmd]\n    }\n\n    return [updated, null]\n  }\n\n  /**\n   * Set whether the component is active and should handle input.\n   * @param active - Active state\n   */\n  setIsActive(active: boolean): MarkdownModel {\n    if (active === this.active) return this\n    return this.with({ active })\n  }\n\n  /**\n   * Scroll to the top of the viewport.\n   */\n  gotoTop(): MarkdownModel {\n    const updatedViewport = this.viewport.scrollToTop()\n    if (updatedViewport === this.viewport) return this\n    return this.with({ viewport: updatedViewport })\n  }\n\n  /**\n   * Handle messages. Processes viewport scrolling and markdown rendering.\n   * @param msg - The message to handle\n   */\n  update(msg: Msg): [MarkdownModel, Cmd<Msg>] {\n    // Handle markdown rendering\n    if (msg instanceof RenderMarkdownMsg) {\n      // Apply width for word wrapping and left-align to pad lines to consistent width\n      // Viewport handles height/scrolling\n      const styled = new Style()\n        .width(this.viewport.width)\n        .alignHorizontal('left')\n        .render(msg.content)\n\n      const updatedViewport = this.viewport.setContent(styled)\n      return [this.with({ viewport: updatedViewport }), null]\n    }\n\n    // Handle errors\n    if (msg instanceof ErrorMsg) {\n      const errorContent = msg.error.message\n      const updatedViewport = this.viewport.setContent(errorContent)\n      return [\n        this.with({\n          fileName: '',\n          viewport: updatedViewport,\n        }),\n        null,\n      ]\n    }\n\n    // Handle viewport updates if active\n    if (this.active) {\n      const [updatedViewport, cmd] = this.viewport.update(msg)\n      if (updatedViewport !== this.viewport) {\n        return [this.with({ viewport: updatedViewport }), cmd]\n      }\n    }\n\n    return [this, null]\n  }\n\n  /**\n   * Render the markdown viewport.\n   */\n  view(): string {\n    return this.viewport.view()\n  }\n\n  private with(patch: Partial<MarkdownModel>): MarkdownModel {\n    return new MarkdownModel({\n      viewport: patch.viewport ?? this.viewport,\n      active: patch.active ?? this.active,\n      fileName: patch.fileName ?? this.fileName,\n      filesystem: patch.filesystem ?? this.filesystem,\n    })\n  }\n}\n\n/**\n * Command to read and render a markdown file.\n */\nfunction renderMarkdownCmd(\n  fs: FileSystemAdapter,\n  width: number,\n  fileName: string,\n): Cmd<Msg> {\n  return async () => {\n    try {\n      const content = await readFileContent(fs, fileName)\n      const rendered = renderMarkdown(content, { width })\n      return new RenderMarkdownMsg(rendered)\n    } catch (error) {\n      return new ErrorMsg(\n        error instanceof Error ? error : new Error(String(error)),\n      )\n    }\n  }\n}\n"]}

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@boba-cli/markdown",
+  "description": "Markdown viewer component for Boba terminal UIs",
+  "version": "0.1.0-alpha.2",
+  "dependencies": {
+    "marked": "^15.0.0",
+    "marked-terminal": "^7.3.0",
+    "@boba-cli/chapstick": "0.1.0-alpha.2",
+    "@boba-cli/filesystem": "0.1.0-alpha.2",
+    "@boba-cli/machine": "0.1.0-alpha.1",
+    "@boba-cli/tea": "0.1.0-alpha.1",
+    "@boba-cli/viewport": "0.1.0-alpha.2"
+  },
+  "devDependencies": {
+    "typescript": "5.8.2",
+    "vitest": "^4.0.16"
+  },
+  "engines": {
+    "node": ">=20.0.0"
+  },
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "type": "module",
+  "types": "./dist/index.d.ts",
+  "scripts": {
+    "build": "tsup",
+    "check:api-report": "pnpm run generate:api-report",
+    "check:eslint": "pnpm run lint",
+    "generate:api-report": "api-extractor run --local",
+    "lint": "eslint \"{src,test}/**/*.{ts,tsx}\"",
+    "test": "vitest run"
+  }
+}