@incremark/devtools 0.0.1

package/LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2025 wangyishuai
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+

package/README.md

@@ -0,0 +1,101 @@
+# @incremark/devtools
+
+Incremark 的开发者工具，框架无关。
+
+## 特性
+
+- 🔍 **实时状态** - 查看解析状态、块列表、AST
+- 📊 **时间线** - 记录每次 append 操作
+- 🎨 **主题** - 支持 dark/light 主题
+- 📦 **框架无关** - 可在 Vue、React 或原生 JS 中使用
+
+## 安装
+
+```bash
+pnpm add @incremark/devtools
+```
+
+## 使用
+
+### 与 Vue 配合
+
+```ts
+import { useIncremark, useDevTools } from '@incremark/vue'
+
+const incremark = useIncremark()
+useDevTools(incremark)
+```
+
+### 与 React 配合
+
+```tsx
+import { useIncremark, useDevTools } from '@incremark/react'
+
+function App() {
+  const incremark = useIncremark()
+  useDevTools(incremark)
+}
+```
+
+### 独立使用
+
+```ts
+import { createIncremarkParser } from '@incremark/core'
+import { mountDevTools } from '@incremark/devtools'
+
+const parser = createIncremarkParser()
+parser.setOnChange(mountDevTools())
+```
+
+## API
+
+### mountDevTools(options?, target?)
+
+创建并挂载 DevTools，返回 onChange 回调。
+
+```ts
+const callback = mountDevTools({
+  open: false,
+  position: 'bottom-right',
+  theme: 'dark'
+})
+
+parser.setOnChange(callback)
+```
+
+### IncremarkDevTools
+
+DevTools 类，提供更细粒度控制。
+
+```ts
+const devtools = new IncremarkDevTools(options)
+devtools.mount()
+devtools.update(parserState)
+devtools.unmount()
+```
+
+## 配置选项
+
+```ts
+interface DevToolsOptions {
+  open?: boolean           // 初始是否打开
+  position?: Position      // 位置
+  theme?: 'dark' | 'light' // 主题
+}
+
+type Position = 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'
+```
+
+## 功能面板
+
+| 面板 | 功能 |
+|------|------|
+| Overview | 显示字符数、块数量等统计 |
+| Blocks | 查看所有解析出的块 |
+| AST | JSON 格式的完整 AST |
+| Timeline | append 操作历史 |
+
+## License
+
+MIT
+

package/dist/index.d.ts

@@ -0,0 +1,116 @@
+import { ParsedBlock, Root } from '@incremark/core';
+
+interface DevToolsState {
+    /** 所有块 */
+    blocks: Array<ParsedBlock & {
+        stableId: string;
+    }>;
+    /** 已完成的块 */
+    completedBlocks: ParsedBlock[];
+    /** 待处理的块 */
+    pendingBlocks: ParsedBlock[];
+    /** Markdown 字符串 */
+    markdown: string;
+    /** AST */
+    ast: Root;
+    /** 是否加载中 */
+    isLoading: boolean;
+}
+interface AppendRecord {
+    timestamp: number;
+    chunk: string;
+    completedCount: number;
+    pendingCount: number;
+}
+interface DevToolsOptions {
+    /** 初始是否打开 */
+    open?: boolean;
+    /** 位置 */
+    position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+    /** 主题 */
+    theme?: 'dark' | 'light';
+}
+
+declare class IncremarkDevTools {
+    private container;
+    private state;
+    private isOpen;
+    private activeTab;
+    private selectedBlockId;
+    private appendHistory;
+    private lastMarkdownLength;
+    private options;
+    private styleElement;
+    constructor(options?: DevToolsOptions);
+    /**
+     * 挂载 DevTools 到 DOM
+     */
+    mount(target?: HTMLElement | string): this;
+    /**
+     * 卸载 DevTools
+     */
+    unmount(): this;
+    /**
+     * 更新状态
+     */
+    update(state: DevToolsState): this;
+    /**
+     * 重置状态
+     */
+    reset(): this;
+    /**
+     * 打开面板
+     */
+    open(): this;
+    /**
+     * 关闭面板
+     */
+    close(): this;
+    /**
+     * 切换面板
+     */
+    toggle(): this;
+    private render;
+    private renderTabContent;
+    private renderOverview;
+    private renderBlocks;
+    private renderAst;
+    private renderTimeline;
+    private bindEvents;
+    private truncate;
+    private formatTime;
+    private escapeHtml;
+}
+/**
+ * 创建 DevTools 实例
+ */
+declare function createDevTools(options?: DevToolsOptions): IncremarkDevTools;
+/**
+ * 一行代码挂载 DevTools
+ *
+ * @example
+ * ```ts
+ * import { createIncremarkParser } from '@incremark/core'
+ * import { mountDevTools } from '@incremark/devtools'
+ *
+ * const parser = createIncremarkParser({
+ *   onChange: mountDevTools()  // 就这一行！
+ * })
+ * ```
+ *
+ * @example
+ * ```ts
+ * // 或者自定义选项
+ * const parser = createIncremarkParser({
+ *   onChange: mountDevTools({ position: 'bottom-left', theme: 'light' })
+ * })
+ * ```
+ */
+declare function mountDevTools(options?: DevToolsOptions): (state: {
+    completedBlocks: any[];
+    pendingBlocks: any[];
+    markdown: string;
+    ast: any;
+}) => void;
+
+export { type AppendRecord, type DevToolsOptions, type DevToolsState, IncremarkDevTools, createDevTools, mountDevTools };

package/dist/index.js

@@ -0,0 +1,723 @@
+// src/styles.ts
+var styles = `
+.incremark-devtools {
+  position: fixed;
+  z-index: 99999;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, monospace;
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.incremark-devtools.bottom-right { bottom: 20px; right: 20px; }
+.incremark-devtools.bottom-left { bottom: 20px; left: 20px; }
+.incremark-devtools.top-right { top: 20px; right: 20px; }
+.incremark-devtools.top-left { top: 20px; left: 20px; }
+
+.incremark-devtools * {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+.devtools-trigger {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  border: none;
+  background: #1e1e1e;
+  color: white;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+  position: relative;
+  font-size: 20px;
+}
+
+.devtools-trigger:hover {
+  background: #2d2d2d;
+}
+
+.loading-dot {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  width: 8px;
+  height: 8px;
+  background: #22c55e;
+  border-radius: 50%;
+  animation: pulse 1s infinite;
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+
+.devtools-panel {
+  position: absolute;
+  width: 420px;
+  max-height: 500px;
+  background: #1e1e1e;
+  border-radius: 12px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+  overflow: hidden;
+  display: none;
+  flex-direction: column;
+}
+
+.devtools-panel.open {
+  display: flex;
+}
+
+.bottom-right .devtools-panel,
+.bottom-left .devtools-panel {
+  bottom: 60px;
+}
+
+.top-right .devtools-panel,
+.top-left .devtools-panel {
+  top: 60px;
+}
+
+.bottom-right .devtools-panel,
+.top-right .devtools-panel {
+  right: 0;
+}
+
+.bottom-left .devtools-panel,
+.top-left .devtools-panel {
+  left: 0;
+}
+
+.devtools-header {
+  display: flex;
+  align-items: center;
+  padding: 12px 16px;
+  background: #252525;
+  border-bottom: 1px solid #333;
+}
+
+.devtools-header h3 {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 600;
+  color: #fff;
+}
+
+.devtools-tabs {
+  display: flex;
+  gap: 4px;
+  margin-left: auto;
+  margin-right: 12px;
+}
+
+.devtools-tabs button {
+  padding: 4px 10px;
+  border: none;
+  background: transparent;
+  color: #888;
+  cursor: pointer;
+  border-radius: 4px;
+  font-size: 12px;
+  text-transform: capitalize;
+}
+
+.devtools-tabs button.active {
+  background: #3b82f6;
+  color: white;
+}
+
+.close-btn {
+  width: 24px;
+  height: 24px;
+  border: none;
+  background: transparent;
+  color: #888;
+  cursor: pointer;
+  font-size: 18px;
+  line-height: 1;
+}
+
+.close-btn:hover {
+  color: #fff;
+}
+
+.devtools-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px;
+  color: #e0e0e0;
+  min-height: 200px;
+}
+
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 12px;
+  margin-bottom: 20px;
+}
+
+.stat-card {
+  background: #2a2a2a;
+  padding: 12px;
+  border-radius: 8px;
+  text-align: center;
+}
+
+.stat-value {
+  font-size: 24px;
+  font-weight: 700;
+  color: #fff;
+}
+
+.stat-label {
+  font-size: 11px;
+  color: #888;
+  margin-top: 4px;
+}
+
+.stat-card.completed .stat-value { color: #22c55e; }
+.stat-card.pending .stat-value { color: #a855f7; }
+
+.section {
+  margin-bottom: 20px;
+}
+
+.section h4 {
+  margin: 0 0 12px;
+  font-size: 12px;
+  color: #888;
+  text-transform: uppercase;
+}
+
+.type-bars {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.type-bar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.type-color {
+  width: 12px;
+  height: 12px;
+  border-radius: 3px;
+}
+
+.type-name { flex: 1; }
+.type-count { color: #888; }
+
+.status-indicator {
+  padding: 8px 12px;
+  background: #2a2a2a;
+  border-radius: 6px;
+}
+
+.status-indicator.loading {
+  background: #22c55e20;
+  color: #22c55e;
+}
+
+.blocks-list {
+  max-height: 200px;
+  overflow-y: auto;
+  margin-bottom: 16px;
+}
+
+.block-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px;
+  cursor: pointer;
+  border-radius: 6px;
+}
+
+.block-item:hover { background: #2a2a2a; }
+.block-item.selected { background: #3b82f620; }
+
+.block-status {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #888;
+}
+
+.block-status.completed { background: #22c55e; }
+.block-status.pending { background: #a855f7; }
+
+.block-type {
+  font-weight: 600;
+  min-width: 80px;
+}
+
+.block-preview {
+  color: #888;
+  font-size: 12px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.block-detail {
+  background: #2a2a2a;
+  padding: 12px;
+  border-radius: 8px;
+}
+
+.block-detail h4,
+.block-detail h5 {
+  margin: 0 0 8px;
+  font-size: 12px;
+  color: #888;
+}
+
+.block-detail h5 { margin-top: 12px; }
+
+.detail-row {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 4px;
+}
+
+.detail-row .label {
+  color: #888;
+  min-width: 50px;
+}
+
+.detail-row .value.completed { color: #22c55e; }
+.detail-row .value.pending { color: #a855f7; }
+
+.raw-text,
+.ast-json,
+.ast-tree {
+  background: #1a1a1a;
+  padding: 12px;
+  border-radius: 6px;
+  overflow-x: auto;
+  font-size: 11px;
+  white-space: pre-wrap;
+  word-break: break-all;
+  max-height: 150px;
+  font-family: monospace;
+}
+
+.timeline-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+}
+
+.timeline-header button {
+  padding: 4px 8px;
+  border: none;
+  background: #333;
+  color: #888;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.timeline-list {
+  max-height: 300px;
+  overflow-y: auto;
+}
+
+.timeline-item {
+  display: flex;
+  gap: 12px;
+  padding: 8px 0;
+  border-bottom: 1px solid #333;
+  font-size: 12px;
+}
+
+.timeline-item .time {
+  color: #888;
+  min-width: 70px;
+}
+
+.timeline-item .chunk {
+  flex: 1;
+  color: #22c55e;
+  font-family: monospace;
+}
+
+.timeline-item .stats { color: #888; }
+
+/* Light theme */
+.incremark-devtools.light .devtools-trigger {
+  background: #fff;
+  color: #333;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.incremark-devtools.light .devtools-panel {
+  background: #fff;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
+}
+
+.incremark-devtools.light .devtools-header {
+  background: #f5f5f5;
+  border-bottom: 1px solid #e0e0e0;
+}
+
+.incremark-devtools.light .devtools-header h3 { color: #333; }
+.incremark-devtools.light .devtools-content { color: #333; }
+.incremark-devtools.light .stat-card { background: #f5f5f5; }
+.incremark-devtools.light .stat-value { color: #333; }
+`;
+
+// src/devtools.ts
+var NODE_TYPE_COLORS = {
+  heading: "#3b82f6",
+  paragraph: "#22c55e",
+  code: "#f59e0b",
+  list: "#8b5cf6",
+  table: "#ec4899",
+  blockquote: "#06b6d4",
+  thematicBreak: "#6b7280"
+};
+var IncremarkDevTools = class {
+  container = null;
+  state = null;
+  isOpen = false;
+  activeTab = "overview";
+  selectedBlockId = null;
+  appendHistory = [];
+  lastMarkdownLength = 0;
+  options;
+  styleElement = null;
+  constructor(options = {}) {
+    this.options = {
+      open: options.open ?? false,
+      position: options.position ?? "bottom-right",
+      theme: options.theme ?? "dark"
+    };
+    this.isOpen = this.options.open;
+  }
+  /**
+   * 挂载 DevTools 到 DOM
+   */
+  mount(target = "body") {
+    const parent = typeof target === "string" ? document.querySelector(target) : target;
+    if (!parent) {
+      console.warn("[IncremarkDevTools] Mount target not found");
+      return this;
+    }
+    if (!this.styleElement) {
+      this.styleElement = document.createElement("style");
+      this.styleElement.textContent = styles;
+      document.head.appendChild(this.styleElement);
+    }
+    this.container = document.createElement("div");
+    this.container.className = `incremark-devtools ${this.options.position} ${this.options.theme}`;
+    this.render();
+    parent.appendChild(this.container);
+    return this;
+  }
+  /**
+   * 卸载 DevTools
+   */
+  unmount() {
+    if (this.container) {
+      this.container.remove();
+      this.container = null;
+    }
+    if (this.styleElement) {
+      this.styleElement.remove();
+      this.styleElement = null;
+    }
+    return this;
+  }
+  /**
+   * 更新状态
+   */
+  update(state) {
+    if (state.markdown.length < this.lastMarkdownLength) {
+      this.appendHistory = [];
+      this.lastMarkdownLength = 0;
+    }
+    if (state.markdown.length > this.lastMarkdownLength) {
+      const chunk = state.markdown.slice(this.lastMarkdownLength);
+      this.appendHistory.push({
+        timestamp: Date.now(),
+        chunk,
+        completedCount: state.completedBlocks.length,
+        pendingCount: state.pendingBlocks.length
+      });
+      this.lastMarkdownLength = state.markdown.length;
+    }
+    this.state = state;
+    this.render();
+    return this;
+  }
+  /**
+   * 重置状态
+   */
+  reset() {
+    this.state = null;
+    this.appendHistory = [];
+    this.lastMarkdownLength = 0;
+    this.selectedBlockId = null;
+    this.render();
+    return this;
+  }
+  /**
+   * 打开面板
+   */
+  open() {
+    this.isOpen = true;
+    this.render();
+    return this;
+  }
+  /**
+   * 关闭面板
+   */
+  close() {
+    this.isOpen = false;
+    this.render();
+    return this;
+  }
+  /**
+   * 切换面板
+   */
+  toggle() {
+    this.isOpen = !this.isOpen;
+    this.render();
+    return this;
+  }
+  render() {
+    if (!this.container) return;
+    const state = this.state;
+    this.container.innerHTML = `
+      <button class="devtools-trigger" title="Incremark DevTools">
+        <span>\u{1F527}</span>
+        ${state?.isLoading ? '<span class="loading-dot"></span>' : ""}
+      </button>
+      <div class="devtools-panel ${this.isOpen ? "open" : ""}">
+        <header class="devtools-header">
+          <h3>Incremark DevTools</h3>
+          <div class="devtools-tabs">
+            ${["overview", "blocks", "ast", "timeline"].map((tab) => `
+              <button class="${this.activeTab === tab ? "active" : ""}" data-tab="${tab}">
+                ${tab}
+              </button>
+            `).join("")}
+          </div>
+          <button class="close-btn">\xD7</button>
+        </header>
+        <main class="devtools-content">
+          ${this.renderTabContent()}
+        </main>
+      </div>
+    `;
+    this.bindEvents();
+  }
+  renderTabContent() {
+    const state = this.state;
+    if (!state) {
+      return '<div style="color: #888; text-align: center;">\u7B49\u5F85\u6570\u636E...</div>';
+    }
+    switch (this.activeTab) {
+      case "overview":
+        return this.renderOverview(state);
+      case "blocks":
+        return this.renderBlocks(state);
+      case "ast":
+        return this.renderAst(state);
+      case "timeline":
+        return this.renderTimeline();
+      default:
+        return "";
+    }
+  }
+  renderOverview(state) {
+    const nodeTypeStats = {};
+    for (const block of state.blocks) {
+      const type = block.node.type;
+      nodeTypeStats[type] = (nodeTypeStats[type] || 0) + 1;
+    }
+    return `
+      <div class="stats-grid">
+        <div class="stat-card">
+          <div class="stat-value">${state.markdown.length}</div>
+          <div class="stat-label">\u5B57\u7B26</div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-value">${state.blocks.length}</div>
+          <div class="stat-label">\u603B\u5757\u6570</div>
+        </div>
+        <div class="stat-card completed">
+          <div class="stat-value">${state.completedBlocks.length}</div>
+          <div class="stat-label">\u5DF2\u5B8C\u6210</div>
+        </div>
+        <div class="stat-card pending">
+          <div class="stat-value">${state.pendingBlocks.length}</div>
+          <div class="stat-label">\u5F85\u5904\u7406</div>
+        </div>
+      </div>
+
+      <div class="section">
+        <h4>\u8282\u70B9\u7C7B\u578B\u5206\u5E03</h4>
+        <div class="type-bars">
+          ${Object.entries(nodeTypeStats).map(([type, count]) => `
+            <div class="type-bar">
+              <span class="type-color" style="background: ${NODE_TYPE_COLORS[type] || "#9ca3af"}"></span>
+              <span class="type-name">${type}</span>
+              <span class="type-count">${count}</span>
+            </div>
+          `).join("")}
+        </div>
+      </div>
+
+      <div class="section">
+        <h4>\u72B6\u6001</h4>
+        <div class="status-indicator ${state.isLoading ? "loading" : ""}">
+          ${state.isLoading ? "\u{1F504} \u89E3\u6790\u4E2D..." : "\u2705 \u7A7A\u95F2"}
+        </div>
+      </div>
+    `;
+  }
+  renderBlocks(state) {
+    const selectedBlock = state.blocks.find((b) => b.id === this.selectedBlockId);
+    return `
+      <div class="blocks-list">
+        ${state.blocks.map((block) => `
+          <div class="block-item ${block.id === this.selectedBlockId ? "selected" : ""}" 
+               data-block-id="${block.id}">
+            <span class="block-status ${block.status}"></span>
+            <span class="block-type" style="color: ${NODE_TYPE_COLORS[block.node.type] || "#9ca3af"}">
+              ${block.node.type}
+            </span>
+            <span class="block-preview">${this.truncate(block.rawText, 50)}</span>
+          </div>
+        `).join("")}
+      </div>
+      ${selectedBlock ? `
+        <div class="block-detail">
+          <h4>\u5757\u8BE6\u60C5</h4>
+          <div class="detail-row">
+            <span class="label">ID:</span>
+            <span class="value">${selectedBlock.id}</span>
+          </div>
+          <div class="detail-row">
+            <span class="label">\u7C7B\u578B:</span>
+            <span class="value">${selectedBlock.node.type}</span>
+          </div>
+          <div class="detail-row">
+            <span class="label">\u72B6\u6001:</span>
+            <span class="value ${selectedBlock.status}">${selectedBlock.status}</span>
+          </div>
+          <div class="detail-row">
+            <span class="label">\u8303\u56F4:</span>
+            <span class="value">${selectedBlock.startOffset} - ${selectedBlock.endOffset}</span>
+          </div>
+          <h5>\u539F\u59CB\u6587\u672C</h5>
+          <pre class="raw-text">${this.escapeHtml(selectedBlock.rawText)}</pre>
+          <h5>AST \u8282\u70B9</h5>
+          <pre class="ast-json">${this.escapeHtml(JSON.stringify(selectedBlock.node, null, 2))}</pre>
+        </div>
+      ` : ""}
+    `;
+  }
+  renderAst(state) {
+    return `<pre class="ast-tree">${this.escapeHtml(JSON.stringify(state.ast, null, 2))}</pre>`;
+  }
+  renderTimeline() {
+    return `
+      <div class="timeline-header">
+        <span>\u5171 ${this.appendHistory.length} \u6B21 append</span>
+        <button data-action="clear-history">\u6E05\u7A7A</button>
+      </div>
+      <div class="timeline-list">
+        ${this.appendHistory.map((record, i) => `
+          <div class="timeline-item">
+            <span class="time">${this.formatTime(record.timestamp)}</span>
+            <span class="chunk">${this.escapeHtml(this.truncate(record.chunk.replace(/\n/g, "\u21B5"), 30))}</span>
+            <span class="stats">\u2705${record.completedCount} \u23F3${record.pendingCount}</span>
+          </div>
+        `).join("")}
+      </div>
+    `;
+  }
+  bindEvents() {
+    if (!this.container) return;
+    const trigger = this.container.querySelector(".devtools-trigger");
+    trigger?.addEventListener("click", () => this.toggle());
+    const closeBtn = this.container.querySelector(".close-btn");
+    closeBtn?.addEventListener("click", () => this.close());
+    const tabs = this.container.querySelectorAll(".devtools-tabs button");
+    tabs.forEach((tab) => {
+      tab.addEventListener("click", () => {
+        const tabName = tab.getAttribute("data-tab");
+        if (tabName) {
+          this.activeTab = tabName;
+          this.render();
+        }
+      });
+    });
+    const blockItems = this.container.querySelectorAll(".block-item");
+    blockItems.forEach((item) => {
+      item.addEventListener("click", () => {
+        const blockId = item.getAttribute("data-block-id");
+        if (blockId) {
+          this.selectedBlockId = blockId;
+          this.render();
+        }
+      });
+    });
+    const clearBtn = this.container.querySelector('[data-action="clear-history"]');
+    clearBtn?.addEventListener("click", () => {
+      this.appendHistory = [];
+      this.render();
+    });
+  }
+  truncate(str, len) {
+    if (str.length <= len) return str;
+    return str.slice(0, len) + "...";
+  }
+  formatTime(timestamp) {
+    return new Date(timestamp).toLocaleTimeString();
+  }
+  escapeHtml(str) {
+    return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+  }
+};
+function createDevTools(options) {
+  return new IncremarkDevTools(options);
+}
+function mountDevTools(options) {
+  const devtools = new IncremarkDevTools(options);
+  if (typeof document !== "undefined") {
+    if (document.readyState === "loading") {
+      document.addEventListener("DOMContentLoaded", () => devtools.mount());
+    } else {
+      devtools.mount();
+    }
+  }
+  return (state) => {
+    const blocks = [
+      ...state.completedBlocks.map((b) => ({ ...b, stableId: b.id })),
+      ...state.pendingBlocks.map((b, i) => ({ ...b, stableId: `pending-${i}` }))
+    ];
+    devtools.update({
+      blocks,
+      completedBlocks: state.completedBlocks,
+      pendingBlocks: state.pendingBlocks,
+      markdown: state.markdown,
+      ast: state.ast,
+      isLoading: state.pendingBlocks.length > 0
+    });
+  };
+}
+export {
+  IncremarkDevTools,
+  createDevTools,
+  mountDevTools
+};

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@incremark/devtools",
+  "version": "0.0.1",
+  "license": "MIT",
+  "description": "Incremark DevTools - Framework-agnostic debugging panel",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./style.css": "./dist/style.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "@incremark/core": "0.0.1"
+  },
+  "devDependencies": {
+    "tsup": "^8.0.0",
+    "typescript": "^5.3.0"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch"
+  }
+}