@zikojs/notebook 0.4.0 → 0.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zikojs/notebook",
-  "version": "0.4.0",
+  "version": "0.6.0",
   "description": "",
   "type": "module",
   "publishConfig": {
@@ -49,9 +49,12 @@
     "codemirror": "^6.0.2",
     "lucide": "^1.44.0",
     "marked": "^18.0.12",
+    "rehype-stringify": "^10.0.1",
+    "remark": "^15.0.1",
+    "remark-rehype": "^11.1.2",
     "vanjs-core": "^1.6.1",
     "zextra": "^1.15.0",
-    "ziko": "^2.0.0-beta.15.1"
+    "ziko": "^2.0.0-beta.16.0"
   },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",

package/src/codeEditor.js

@@ -5,15 +5,15 @@ import { bracketMatching, indentUnit, syntaxHighlighting, defaultHighlightStyle
 import { closeBrackets, closeBracketsKeymap } from "@codemirror/autocomplete";
 import { javascript } from "@codemirror/lang-javascript";
 import { markdown } from "@codemirror/lang-markdown";
-import van from "vanjs-core";
+import { tags } from "ziko/dom";
 
-const { div } = van.tags;
+const { div } = tags;
 
 const languageFor = (type) =>
   type === "markdown" ? markdown() : javascript();
 
 export function createCodeEditor(app, cellData, actions) {
-  const editorDom = div({ class: "input-wrapper" });
+  const editorDom = div({ class: "input-wrapper" }).element;
 
   const languageCompartment = new Compartment();
   const readOnlyCompartment = new Compartment();

package/src/components.js

@@ -0,0 +1,180 @@
+import van from "vanjs-core";
+import { remark } from "remark";
+import remarkRehype from "remark-rehype";
+import rehypeStringify from "rehype-stringify";
+import { createCodeEditor } from "./codeEditor.js";
+
+import {
+  Check,
+  Copy,
+  Lock,
+  Unlock,
+  Code2,
+  FileText,
+  Pencil,
+  Play,
+  Plus,
+  Trash2,
+  PlayForward,
+  Eraser,
+  Download,
+  Loader2
+} from './icons.js';
+
+const { button } = van.tags;
+
+import { tags } from 'ziko/dom'
+
+const { div, span } = tags
+
+export const Button = ({ class: className = "", title = "", disabled = false, onclick }, ...children) =>
+  button({ class: `btn ${className}`, title, disabled, onclick }, ...children);
+
+export function Header({ store, actions }) {
+  const statusBadge = span({ class: "status-badge" }, Loader2(), span('Loading ...')).element;
+  const runAllBtn = Button({ class: "btn-primary", onclick: actions.runAll }, PlayForward(), "Run All");
+  const clearBtn = Button({ onclick: actions.clearOutputs }, Eraser(), "Clear Outputs");
+  const addCodeBtn = Button({ onclick: actions.addCode }, Play(), "Add Code");
+  const addMdBtn = Button({ onclick: actions.addMarkdown }, FileText(), "Add Markdown");
+  const deleteActiveBtn = Button({ onclick: actions.deleteActive }, Trash2(), "Delete Active");
+  const exportBtn = Button({ onclick: actions.exportData }, Download(), "Export Data");
+
+  store.on('change:executionQueueState', (q) => {
+    statusBadge.style.display = q.isRunning ? "inline-flex" : "none";
+    statusBadge.lastChild.textContent = `Executing Queue (${q.currentIndex + 1}/${q.total})`;
+    [runAllBtn, clearBtn, deleteActiveBtn].forEach(b => { b.disabled = q.isRunning; });
+    const maxReached = store.get('cells').length >= store.get('maxCells');
+    addCodeBtn.disabled = q.isRunning || maxReached;
+    addMdBtn.disabled = q.isRunning || maxReached;
+  });
+
+  return div({ class: "header" },
+    div({ class: "brand" }, "</>", statusBadge),
+    div({ class: "toolbar" }, 
+      runAllBtn, clearBtn, addCodeBtn, addMdBtn, deleteActiveBtn, exportBtn
+    )
+  ).element;
+}
+
+export function MarkdownView({ cellData, actions }) {
+  const content = div().element;
+  
+  // Process Markdown asynchronously using Remark + Rehype
+  remark()
+    .use(remarkRehype, { allowDangerousHtml: true })
+    .use(rehypeStringify)
+    .process(cellData.code || "*Empty Markdown Cell*")
+    .then((file) => {
+      content.innerHTML = String(file);
+    })
+    .catch((err) => {
+      content.innerHTML = `<div class="error-output">Markdown rendering error: ${err.message}</div>`;
+    });
+  
+  const wrap = div({ class: "markdown-rendered-cell markdown-body" }, content);
+  wrap.onClick(() => actions.editMarkdown())
+  return wrap.element;
+}
+
+export function CellControls({ cellData, store, actions }) {
+  const controlsContainer = div({ class: "cell-controls" }).element;
+
+  const renderButtons = () => {
+    const isQueueRunning = store.get('executionQueueState').isRunning;
+    const isMaxCellsReached = store.get('cells').length >= store.get('maxCells');
+    const isCopied = cellData._copiedFlag === true;
+
+    controlsContainer.replaceChildren(
+      Button({ 
+        class: `btn-icon ${isCopied ? "btn-active" : ""}`, 
+        title: isCopied ? "Copied!" : "Copy Cell Content", 
+        onclick: async () => {
+          await actions.copyCode();
+          cellData._copiedFlag = true;
+          renderButtons();
+          setTimeout(() => { 
+            cellData._copiedFlag = false; 
+            renderButtons(); 
+          }, 1500);
+        }
+      }, isCopied ? Check() : Copy()),
+
+      Button({ 
+        class: `btn-icon ${cellData.readonly ? "btn-active" : ""}`, 
+        title: cellData.readonly ? "Make Editable" : "Make Read-Only", 
+        disabled: isQueueRunning, 
+        onclick: actions.toggleReadonly, 
+      }, cellData.readonly ? Lock() : Unlock()),
+
+      Button({ 
+        class: `btn-icon ${cellData.type === "markdown" ? "btn-active" : ""}`, 
+        title: `Switch to ${cellData.type === "code" ? "Markdown" : "JS Code"}`, 
+        disabled: isQueueRunning || cellData.readonly, 
+        onclick: actions.toggleType, 
+      }, cellData.type === "code" ? FileText() : Code2()),
+
+      (cellData.type === "markdown" && !cellData.isEditingMarkdown)
+        ? Button({ 
+            class: "btn-icon", 
+            title: "Edit Markdown", 
+            disabled: isQueueRunning || cellData.readonly, 
+            onclick: actions.editMarkdown 
+          }, Pencil())
+        : Button({ 
+            class: "btn-icon btn-primary", 
+            title: "Run & Advance (Shift+Enter)", 
+            disabled: isQueueRunning, 
+            onclick: () => actions.runCode(true) 
+          }, Play()),
+
+      Button({ 
+        class: "btn-icon", 
+        title: "Add Cell Below", 
+        disabled: isQueueRunning || isMaxCellsReached, 
+        onclick: actions.addBelow 
+      }, Plus()),
+
+      Button({ 
+        class: "btn-icon", 
+        title: "Delete Cell", 
+        disabled: isQueueRunning, 
+        onclick: actions.deleteCell 
+      }, Trash2())
+    );
+  };
+
+  renderButtons();
+  store.on('change', renderButtons);
+
+  return controlsContainer;
+}
+
+export function CellItem({ cellData, app, store }) {
+  const outputRef = div({ class: "output-area" }).element;
+  if (cellData.outputNode) outputRef.appendChild(cellData.outputNode);
+  cellData._outputRef = outputRef;
+
+  const actions = app._cellActions(cellData);
+  cellData._actions = actions;
+  cellData._editor = createCodeEditor(app, cellData, actions);
+
+  const inPrompt = span({ class: "prompt" }).element;
+  const outPrompt = span({ class: "prompt out" }).element;
+  const bodySlot = div().style({ display : 'contents'}).element;
+  const controlsEl = CellControls({ cellData, store, actions });
+
+  const outputGrid = div({ class: "cell-output-grid" }, outPrompt, div({ class: "output-wrapper" }, outputRef)).element;
+  const inputGrid = div({ class: "cell-input-grid" }, inPrompt, bodySlot, controlsEl).element;
+  const root = div({ class: "cell" }, inputGrid, outputGrid);
+  root.onClick(() => app.setActiveCell(cellData.id));
+  // root.onclick = () => app.setActiveCell(cellData.id);
+
+  cellData._dom = root.element;
+  cellData._inPrompt = inPrompt;
+  cellData._outPrompt = outPrompt;
+  cellData._bodySlot = bodySlot;
+  cellData._outputGrid = outputGrid;
+
+  app._refreshCell(cellData);
+  return root.element;
+}

package/src/main.js

@@ -1,528 +1,2 @@
-import van from "vanjs-core";
-import { marked } from "marked";
-import { Button } from "./ui.js";
-import { createCodeEditor } from "./codeEditor.js";
-import { evaluateCodeAsync } from "./transform.js";
-import { call_with_optional_props } from 'ziko/dom/internal-utils'
-
-import {
-  Check,
-  Copy,
-  Lock,
-  Unlock,
-  Code2,
-  FileText,
-  Pencil,
-  Play,
-  Plus,
-  Trash2,
-  PlayForward,
-  Eraser,
-  Download,
-  Loader2
-} from './icons.js'
-
-const { div, span } = van.tags;
-
-export function Header({ state, actions }) {
-  const { runAllBtn, clearBtn, addCodeBtn, addMdBtn, deleteActiveBtn, exportBtn, statusBadge, statusText } = state;
-
-  return div({ class: "header" },
-    div({ class: "brand" }, "</>", statusBadge),
-    div({ class: "toolbar" }, 
-      runAllBtn, clearBtn, addCodeBtn, addMdBtn, deleteActiveBtn, exportBtn
-    )
-  );
-}
-
-export function MarkdownView({ cellData, actions }) {
-  const content = div();
-  content.innerHTML = marked.parse(cellData.code || "*Empty Markdown Cell*");
-  
-  const wrap = div({ class: "markdown-rendered-cell markdown-body" }, content);
-  wrap.onclick = () => actions.editMarkdown();
-  return wrap;
-}
-
-export function CellControls({ cellData, state, actions }) {
-  const isQueueRunning = state.executionQueueState_state.isRunning;
-  const isMaxCellsReached = state.cells_state.length >= state.maxCells;
-  const isCopied = cellData._copiedFlag_state === true;
-
-  const handleCopy = async () => {
-    await actions.copyCode();
-    cellData._copiedFlag_state = true;
-    state.refreshControls(cellData);
-    setTimeout(() => { 
-      cellData._copiedFlag_state = false; 
-      state.refreshControls(cellData); 
-    }, 1500);
-  };
-
-  return [
-    Button({ 
-      class: `btn-icon ${isCopied ? "btn-active" : ""}`, 
-      title: isCopied ? "Copied!" : "Copy Cell Content", 
-      onclick: handleCopy
-    },
-    isCopied ? Check() : Copy()
-  ),
-    Button({ 
-      class: `btn-icon ${cellData.readonly ? "btn-active" : ""}`, 
-      title: cellData.readonly ? "Make Editable" : "Make Read-Only", 
-      disabled: isQueueRunning, 
-      onclick: actions.toggleReadonly, 
-      },
-      cellData.readonly ? Lock() : Unlock()
-    ),
-    Button({ 
-      class: `btn-icon ${cellData.type === "markdown" ? "btn-active" : ""}`, 
-      title: `Switch to ${cellData.type === "code" ? "Markdown" : "JS Code"}`, 
-      disabled: isQueueRunning || cellData.readonly, 
-      onclick: actions.toggleType, 
-      },
-      cellData.type === "code" ? FileText() : Code2()
-    ),
-    (cellData.type === "markdown" && !cellData.isEditingMarkdown)
-      ? Button(
-        { 
-          class: "btn-icon", 
-          title: "Edit Markdown", 
-          disabled: isQueueRunning || cellData.readonly, 
-          onclick: actions.editMarkdown
-        },
-          Pencil()
-        )
-      : Button({ 
-          class: "btn-icon btn-primary", 
-          title: "Run & Advance (Shift+Enter)", 
-          disabled: isQueueRunning, 
-          onclick: () => actions.runCode(true)
-        },
-          Play()
-        ),
-    Button({ 
-      class: "btn-icon", 
-      title: "Add Cell Below", 
-      disabled: isQueueRunning || isMaxCellsReached, 
-      onclick: actions.addBelow
-    }, Plus()),
-    Button({ 
-      class: "btn-icon", 
-      title: "Delete Cell", 
-      disabled: isQueueRunning, 
-      onclick: actions.deleteCell
-    }, Trash2())
-  ];
-}
-
-export function CellItem({ cellData, app }) {
-  const outputRef = div({ class: "output-area" });
-  if (cellData.outputNode) outputRef.appendChild(cellData.outputNode);
-  cellData._outputRef = outputRef;
-
-  const actions = app._cellActions(cellData);
-  cellData._actions = actions;
-  cellData._editor = createCodeEditor(app, cellData, actions);
-
-  const inPrompt = span({ class: "prompt" });
-  const outPrompt = span({ class: "prompt out" });
-  const bodySlot = div({ style: "display:contents;" });
-  const controlsEl = div({ class: "cell-controls" });
-
-  const outputGrid = div({ class: "cell-output-grid" }, outPrompt, div({ class: "output-wrapper" }, outputRef));
-  const inputGrid = div({ class: "cell-input-grid" }, inPrompt, bodySlot, controlsEl);
-  const root = div({ class: "cell" }, inputGrid, outputGrid);
-  root.onclick = () => app.setActiveCell(cellData.id);
-
-  cellData._dom = root;
-  cellData._inPrompt = inPrompt;
-  cellData._outPrompt = outPrompt;
-  cellData._bodySlot = bodySlot;
-  cellData._controlsEl = controlsEl;
-  cellData._outputGrid = outputGrid;
-
-  app._refreshCell(cellData);
-  return root;
-}
-
-export class UINotebook {
-  constructor({
-    cells: initialCells = [],
-    importMap = {},
-    runCells = true,
-    codeMirrorConfig = {},
-    markedPlugins = [],
-    codeMirrorPlugins = [],
-    minLines = 3,
-    maxCells = Infinity
-  } = {}) {
-    // 1. Generate unique UUID for this notebook instance
-    this.id = crypto.randomUUID ? crypto.randomUUID() : 'nb_' + Math.random().toString(36).substring(2, 9);
-    
-    // 2. Initialize the global scope map if not already present
-    if (!window.__notebook_scope_map) {
-      window.__notebook_scope_map = new Map();
-    }
-    
-    // 3. Register this instance's isolated scope
-    this.resetScope();
-
-    this.importMap = importMap;
-    this.codeMirrorConfig = codeMirrorConfig;
-    this.codeMirrorPlugins = codeMirrorPlugins;
-    this.minLines = minLines;
-    this.maxCells = maxCells;
-
-    if (Array.isArray(markedPlugins) && markedPlugins.length > 0) {
-      markedPlugins.forEach(plugin => marked.use(plugin));
-    }
-
-    const startingCells = maxCells !== Infinity ? initialCells.slice(0, maxCells) : initialCells;
-
-    this.nextCellId_state = startingCells.length ? Math.max(...startingCells.map(c => c.id || 0)) + 1 : 1;
-
-    this.cells_state = startingCells.map(cell => ({
-      id: cell.id || this.nextCellId_state++,
-      type: cell.type || "code",
-      code: cell.code || "",
-      readonly: cell.readonly ?? false,
-      isEditingMarkdown: cell.readonly ? false : (cell.isEditingMarkdown ?? true),
-      execCount: cell.execCount ?? null,
-      outputNode: cell.outputNode || null,
-      hasDomOutput: cell.hasDomOutput ?? false,
-      _copiedFlag_state: false,
-      _dom: null, _editor: null, _actions: null,
-      _inPrompt: null, _outPrompt: null, _bodySlot: null, _controlsEl: null, _outputGrid: null, _outputRef: null
-    }));
-
-    this.activeCellId_state = this.cells_state.length ? this.cells_state[0].id : null;
-    this.executionCounter_state = 1;
-    this.executionQueueState_state = { isRunning: false, currentIndex: 0, total: 0 };
-
-    this.notebookGlobalShortcuts = {
-      deleteActive: () => this.deleteCell(this.activeCellId_state),
-      addMdBelow: () => this.addCell("markdown", "", this.activeCellId_state),
-      addCodeBelow: () => this.addCell("code", "", this.activeCellId_state)
-    };
-
-    this.cellsContainer = div({ class: "cells-container" });
-    this.header = this._buildHeader();
-    this.element = div(this.header, div({ class: "notebook" }, this.cellsContainer));
-
-    this._renderAllCells();
-
-    if (runCells) {
-      setTimeout(() => { this.runAllCells(); }, 200);
-    }
-  }
-
-  _isMaxCellsReached() { return this.cells_state.length >= this.maxCells; }
-
-  // --- HEADER BUILDER ---
-
-  _buildHeader() {
-    this.runAllBtn = Button({ 
-      class: "btn-primary", 
-      onclick: () => this.runAllCells(), 
-      }, PlayForward(), "Run All"
-    );
-    this.clearBtn = Button({ 
-      onclick: () => this.clearOutputs()
-    }, Eraser(), "Clear Outputs");
-    this.addCodeBtn = Button({ 
-      onclick: () => this.addCell("code", "", this.activeCellId_state), 
-    }, Play(), "Add Code");
-    this.addMdBtn = Button({ 
-      onclick: () => this.addCell("markdown", "", this.activeCellId_state), 
-    }, FileText(), "Add Markdown");
-    this.deleteActiveBtn = Button({ 
-      onclick: () => this.deleteCell(this.activeCellId_state)
-    }, Trash2(), "Delete Active");
-    this.exportBtn = Button({ 
-      onclick: () => console.log("Notebook Data Export:", this.getNotebookData())
-    }, Download(), "Export Data");
-
-    this.statusText = span();
-    this.statusBadge = span({ 
-      class: "status-badge", 
-      style: "display:none;" 
-    }, Loader2(), this.statusText);
-
-    const header = Header({
-      state: {
-        runAllBtn: this.runAllBtn,
-        clearBtn: this.clearBtn,
-        addCodeBtn: this.addCodeBtn,
-        addMdBtn: this.addMdBtn,
-        deleteActiveBtn: this.deleteActiveBtn,
-        exportBtn: this.exportBtn,
-        statusBadge: this.statusBadge,
-        statusText: this.statusText
-      }
-    });
-
-    this._updateHeaderUI();
-    return header;
-  }
-
-  _updateHeaderUI() {
-    const q = this.executionQueueState_state;
-    this.statusBadge.style.display = q.isRunning ? "inline-flex" : "none";
-    this.statusText.textContent = `Executing Queue (${q.currentIndex + 1}/${q.total})`;
-    [this.runAllBtn, this.clearBtn, this.deleteActiveBtn].forEach(b => { b.disabled = q.isRunning; });
-    const maxReached = this._isMaxCellsReached();
-    this.addCodeBtn.disabled = q.isRunning || maxReached;
-    this.addMdBtn.disabled = q.isRunning || maxReached;
-  }
-
-  // --- CELL ACTIONS & DOM ---
-
-  _cellActions(cellData) {
-    const app = this;
-    return {
-      setActive: () => app.setActiveCell(cellData.id),
-      runCode: async (autoNext = true) => {
-        const code = cellData._editor.getValue();
-        cellData.code = code;
-
-        if (cellData.type === "markdown") {
-          cellData.isEditingMarkdown = false;
-          if (autoNext) app.nextCell(cellData.id, "markdown");
-          else app._refreshCell(cellData);
-          return;
-        }
-
-        if (!code.trim()) return;
-
-        cellData._outputRef.innerHTML = "";
-        let hasError = false;
-
-        try {
-          // Retrieve this specific instance's compatible scope from window.__notebook_scope_map
-          const scope = app.getScope();
-          
-          // Pass either the scope object or the instance ID (app.id) to evaluateCodeAsync
-          await evaluateCodeAsync(code, cellData._outputRef, app.importMap, scope);
-        } catch (err) {
-          hasError = true;
-          van.add(cellData._outputRef, div({ class: "error-output" }, err.toString()));
-        }
-
-        cellData.execCount = app.executionCounter_state++;
-        cellData.hasDomOutput = cellData._outputRef.childNodes.length > 0 || hasError;
-
-        const container = div({ class: "output-area" });
-        while (cellData._outputRef.firstChild) container.appendChild(cellData._outputRef.firstChild);
-        cellData.outputNode = container;
-        cellData._outputRef.appendChild(container);
-
-        if (autoNext && !hasError) app.nextCell(cellData.id, "code");
-        else app._refreshCell(cellData);
-      },
-      copyCode: async () => {
-        const textToCopy = cellData._editor.getValue() || cellData.code;
-        try {
-          await navigator.clipboard.writeText(textToCopy);
-        } catch (err) {
-          const textArea = document.createElement("textarea");
-          textArea.value = textToCopy;
-          document.body.appendChild(textArea);
-          textArea.select();
-          document.execCommand("copy");
-          document.body.removeChild(textArea);
-        }
-      },
-      toggleReadonly: () => {
-        cellData.readonly = !cellData.readonly;
-        if (cellData.readonly && cellData.type === "markdown") cellData.isEditingMarkdown = false;
-        app._refreshCell(cellData);
-      },
-      toggleType: () => {
-        if (cellData.readonly) return;
-        cellData.type = cellData.type === "code" ? "markdown" : "code";
-        cellData.isEditingMarkdown = true;
-        cellData.hasDomOutput = false;
-        app._refreshCell(cellData);
-      },
-      editMarkdown: () => {
-        if (cellData.readonly) return;
-        cellData.isEditingMarkdown = true;
-        app._refreshCell(cellData);
-      },
-      addBelow: () => app.addCell(cellData.type, null, cellData.id),
-      deleteCell: () => app.deleteCell(cellData.id)
-    };
-  }
-
-  _buildCellDom(cellData) {
-    return CellItem({ cellData, app: this });
-  }
-
-  _refreshCell(cellData) {
-    const isActive = this.activeCellId_state === cellData.id;
-    cellData._dom.className = `cell ${isActive ? "active" : ""} ${cellData.readonly ? "readonly" : ""}`.trim();
-
-    const countText = cellData.execCount ? `[${cellData.execCount}]` : "[ ]";
-    const isMarkdownView = cellData.type === "markdown" && !cellData.isEditingMarkdown;
-
-    cellData._inPrompt.textContent = cellData.type === "code" ? `In ${countText}:` : "";
-
-    cellData._editor.sync(isActive, isMarkdownView);
-    cellData._bodySlot.replaceChildren(
-      isMarkdownView ? MarkdownView({ cellData, actions: cellData._actions }) : cellData._editor.dom
-    );
-
-    this._refreshCellControls(cellData);
-
-    const showOutput = cellData.type === "code" && cellData.hasDomOutput;
-    cellData._outputGrid.style.display = showOutput ? "grid" : "none";
-    cellData._outPrompt.textContent = `Out ${countText}:`;
-  }
-
-  _refreshCellControls(cellData) {
-    const buttons = CellControls({
-      cellData,
-      state: this,
-      actions: cellData._actions
-    });
-    cellData._controlsEl.replaceChildren(...buttons);
-  }
-
-  // --- STATE & SCOPE MUTATORS ---
-
-  _renderAllCells() {
-    this.cellsContainer.replaceChildren(...this.cells_state.map(c => c._dom || this._buildCellDom(c)));
-    this._updateHeaderUI();
-  }
-
-  setActiveCell(id) {
-    if (this.activeCellId_state === id) return;
-    const current = this.cells_state.find(c => c.id === this.activeCellId_state);
-    if (current && current.type === "markdown" && current.isEditingMarkdown) current.isEditingMarkdown = false;
-    this.activeCellId_state = id;
-    if (current) this._refreshCell(current);
-    const next = this.cells_state.find(c => c.id === id);
-    if (next) this._refreshCell(next);
-  }
-
-  focusCell(targetId) {
-    const prevId = this.activeCellId_state;
-    this.activeCellId_state = targetId;
-    const target = this.cells_state.find(c => c.id === targetId);
-    if (target && target.type === "markdown" && !target.readonly) target.isEditingMarkdown = true;
-    if (prevId !== targetId) {
-      const prevCell = this.cells_state.find(c => c.id === prevId);
-      if (prevCell) this._refreshCell(prevCell);
-    }
-    if (target) this._refreshCell(target);
-  }
-
-  addCell(type = "code", initialCode = null, afterId = null, readonly = false) {
-    if (this.cells_state.length >= this.maxCells) {
-      console.warn(`Cannot create cell: Maximum cell limit (${this.maxCells}) reached.`);
-      return null;
-    }
-
-    const newId = this.nextCellId_state++;
-    const defaultText = type === "markdown" ? "### New Markdown Cell\nClick to edit..." : "";
-    const newCell = {
-      id: newId, type, code: initialCode !== null ? initialCode : defaultText, readonly,
-      isEditingMarkdown: !readonly && type === "markdown" && initialCode === null,
-      execCount: null, outputNode: null, hasDomOutput: false, _copiedFlag_state: false,
-      _dom: null, _editor: null, _actions: null,
-      _inPrompt: null, _outPrompt: null, _bodySlot: null, _controlsEl: null, _outputGrid: null, _outputRef: null
-    };
-
-    if (afterId === null) {
-      this.cells_state.push(newCell);
-    } else {
-      const index = this.cells_state.findIndex(c => c.id === afterId);
-      this.cells_state.splice(index + 1, 0, newCell);
-    }
-
-    this._renderAllCells();
-    this.focusCell(newId);
-    return newId;
-  }
-
-  deleteCell(id) {
-    if (this.cells_state.length <= 1) return;
-    const index = this.cells_state.findIndex(c => c.id === id);
-    this.cells_state = this.cells_state.filter(c => c.id !== id);
-    this._renderAllCells();
-    const nextActiveIndex = Math.min(index, this.cells_state.length - 1);
-    this.focusCell(this.cells_state[nextActiveIndex].id);
-  }
-
-  nextCell(currentId, defaultType) {
-    const idx = this.cells_state.findIndex(c => c.id === currentId);
-    if (idx === this.cells_state.length - 1) this.addCell(defaultType, null, currentId);
-    else this.focusCell(this.cells_state[idx + 1].id);
-  }
-
-  async runCell(id) {
-    const cell = this.cells_state.find(c => c.id === id);
-    if (cell && cell._actions) await cell._actions.runCode(false);
-  }
-
-  async runAllCells() {
-    const codeCells = this.cells_state.filter(c => c.type === "code");
-    if (codeCells.length === 0) return;
-
-    this.executionQueueState_state = { isRunning: true, currentIndex: 0, total: codeCells.length };
-    this._updateHeaderUI();
-    this.cells_state.forEach(c => this._refreshCellControls(c));
-
-    for (const cell of this.cells_state) {
-      if (cell.type === "code" && cell._actions) {
-        this.executionQueueState_state = { ...this.executionQueueState_state, currentIndex: codeCells.indexOf(cell) };
-        this._updateHeaderUI();
-        await cell._actions.runCode(false);
-      }
-    }
-
-    this.executionQueueState_state = { isRunning: false, currentIndex: 0, total: 0 };
-    this._updateHeaderUI();
-    this.cells_state.forEach(c => this._refreshCellControls(c));
-  }
-
-  clearOutputs() {
-    this.cells_state.forEach(cell => {
-      cell.execCount = null;
-      cell.outputNode = null;
-      cell.hasDomOutput = false;
-      if (cell._outputRef) cell._outputRef.innerHTML = "";
-    });
-    this.executionCounter_state = 1;
-    this.cells_state.forEach(c => this._refreshCell(c));
-  }
-
-  resetScope() {
-    if (!window.__notebook_scope_map) {
-      window.__notebook_scope_map = new Map();
-    }
-    const newScope = Object.create(null);
-    window.__notebook_scope_map.set(this.id, newScope);
-    return newScope;
-  }
-
-  getScope() {
-    if (!window.__notebook_scope_map || !window.__notebook_scope_map.has(this.id)) {
-      return this.resetScope();
-    }
-    return window.__notebook_scope_map.get(this.id);
-  }
-
-  getNotebookData({ inputs = true, outputs = true } = {}) {
-    return this.cells_state.map(cell => {
-      const exportedCell = { id: cell.id, type: cell.type, readonly: cell.readonly, order: cell.execCount };
-      if (inputs) exportedCell.code = cell.code;
-      if (outputs) exportedCell.outputHtml = cell.outputNode ? cell.outputNode.innerHTML : null;
-      return exportedCell;
-    });
-  }
-}
-
-
-export const Notebook = call_with_optional_props(UINotebook)
+import './index.css';
+export { UINotebook } from './notebook.js';

package/src/notebook.js

@@ -0,0 +1,344 @@
+import { NotebookStore } from "./store.js";
+import { Header, CellItem, MarkdownView } from "./components.js";
+import { evaluateCodeAsync } from "./transform.js";
+import { tags, UIElement } from "ziko/dom";
+
+export class UINotebook extends UIElement{
+  constructor({
+    cells: initialCells = [],
+    importMap = {},
+    runCells = true,
+    codeMirrorConfig = {},
+    codeMirrorPlugins = [],
+    minLines = 3,
+    maxCells = Infinity
+  } = {}) {
+    super({ element : 'div'})
+    this.id = crypto.randomUUID ? crypto.randomUUID() : 'nb_' + Math.random().toString(36).substring(2, 9);
+    
+    if (!window.__notebook_scope_map) {
+      window.__notebook_scope_map = new Map();
+    }
+    this.resetScope();
+
+    this.importMap = importMap;
+    this.codeMirrorConfig = codeMirrorConfig;
+    this.codeMirrorPlugins = codeMirrorPlugins;
+    this.minLines = minLines;
+    this.maxCells = maxCells;
+
+    const startingCells = maxCells !== Infinity ? initialCells.slice(0, maxCells) : initialCells;
+    const nextCellId = startingCells.length ? Math.max(...startingCells.map(c => c.id || 0)) + 1 : 1;
+
+    this.store = new NotebookStore({
+      cells: startingCells.map(cell => ({
+        id: cell.id || nextCellId++,
+        type: cell.type || "code",
+        code: cell.code || "",
+        readonly: cell.readonly ?? false,
+        isEditingMarkdown: cell.readonly ? false : (cell.isEditingMarkdown ?? true),
+        execCount: cell.execCount ?? null,
+        outputNode: cell.outputNode || null,
+        hasDomOutput: cell.hasDomOutput ?? false,
+        _copiedFlag: false,
+        _dom: null, _editor: null, _actions: null,
+        _inPrompt: null, _outPrompt: null, _bodySlot: null, _outputGrid: null, _outputRef: null
+      })),
+      activeCellId: startingCells.length ? startingCells[0].id : null,
+      executionCounter: 1,
+      executionQueueState: { isRunning: false, currentIndex: 0, total: 0 },
+      maxCells: this.maxCells
+    });
+
+    this.nextCellId = nextCellId;
+
+    this.notebookGlobalShortcuts = {
+      deleteActive: () => this.deleteCell(this.store.get('activeCellId')),
+      addMdBelow: () => this.addCell("markdown", "", this.store.get('activeCellId')),
+      addCodeBelow: () => this.addCell("code", "", this.store.get('activeCellId'))
+    };
+
+    this.cellsContainer = tags.div({ class: "cells-container" }).element;
+    this.header = Header({
+      store: this.store,
+      actions: {
+        runAll: () => this.runAllCells(),
+        clearOutputs: () => this.clearOutputs(),
+        addCode: () => this.addCell("code", "", this.store.get('activeCellId')),
+        addMarkdown: () => this.addCell("markdown", "", this.store.get('activeCellId')),
+        deleteActive: () => this.deleteCell(this.store.get('activeCellId')),
+        exportData: () => console.log("Notebook Data Export:", this.getNotebookData())
+      }
+    });
+
+    this.append(
+      this.header, 
+      tags.div({ class: "notebook" }, 
+      this.cellsContainer)  
+    )
+
+    this._renderAllCells();
+
+    this.store.on('change:activeCellId', (newId, oldId) => {
+      if (oldId !== null) {
+        const prev = this.store.get('cells').find(c => c.id === oldId);
+        if (prev) this._refreshCell(prev);
+      }
+      const next = this.store.get('cells').find(c => c.id === newId);
+      if (next) this._refreshCell(next);
+    });
+
+    if (runCells) {
+      setTimeout(() => { this.runAllCells(); }, 200);
+    }
+  }
+
+  _isMaxCellsReached() { return this.store.get('cells').length >= this.maxCells; }
+
+  _cellActions(cellData) {
+    const app = this;
+    return {
+      setActive: () => app.setActiveCell(cellData.id),
+      runCode: async (autoNext = true) => {
+        const code = cellData._editor.getValue();
+        cellData.code = code;
+
+        if (cellData.type === "markdown") {
+          cellData.isEditingMarkdown = false;
+          if (autoNext) app.nextCell(cellData.id, "markdown");
+          else app._refreshCell(cellData);
+          return;
+        }
+
+        if (!code.trim()) return;
+
+        cellData._outputRef.innerHTML = "";
+        let hasError = false;
+
+        try {
+          const scope = app.getScope();
+          await evaluateCodeAsync(code, cellData._outputRef, app.importMap, scope);
+        } catch (err) {
+          hasError = true;
+          tags.div({ class: "error-output" }, err.toString()).mount(cellData._outputRef)
+        }
+
+        const counter = this.store.get('executionCounter');
+        this.store.set('executionCounter', counter + 1);
+        cellData.execCount = counter;
+        cellData.hasDomOutput = cellData._outputRef.childNodes.length > 0 || hasError;
+
+        const container = tags.div({ class: "output-area" }).element;
+        while (cellData._outputRef.firstChild) container.appendChild(cellData._outputRef.firstChild);
+        cellData.outputNode = container;
+        cellData._outputRef.appendChild(container);
+
+        if (autoNext && !hasError) app.nextCell(cellData.id, "code");
+        else app._refreshCell(cellData);
+      },
+      copyCode: async () => {
+        const textToCopy = cellData._editor.getValue() || cellData.code;
+        try {
+          await navigator.clipboard.writeText(textToCopy);
+        } catch (err) {
+          const textArea = document.createElement("textarea");
+          textArea.value = textToCopy;
+          document.body.appendChild(textArea);
+          textArea.select();
+          document.execCommand("copy");
+          document.body.removeChild(textArea);
+        }
+      },
+      toggleReadonly: () => {
+        cellData.readonly = !cellData.readonly;
+        if (cellData.readonly && cellData.type === "markdown") cellData.isEditingMarkdown = false;
+        app._refreshCell(cellData);
+      },
+      toggleType: () => {
+        if (cellData.readonly) return;
+        cellData.type = cellData.type === "code" ? "markdown" : "code";
+        cellData.isEditingMarkdown = true;
+        cellData.hasDomOutput = false;
+        app._refreshCell(cellData);
+      },
+      editMarkdown: () => {
+        if (cellData.readonly) return;
+        cellData.isEditingMarkdown = true;
+        app._refreshCell(cellData);
+      },
+      addBelow: () => app.addCell(cellData.type, null, cellData.id),
+      deleteCell: () => app.deleteCell(cellData.id)
+    };
+  }
+
+  _buildCellDom(cellData) {
+    return CellItem({ cellData, app: this, store: this.store });
+  }
+
+  _refreshCell(cellData) {
+    const activeId = this.store.get('activeCellId');
+    const isActive = activeId === cellData.id;
+    cellData._dom.className = `cell ${isActive ? "active" : ""} ${cellData.readonly ? "readonly" : ""}`.trim();
+
+    const countText = cellData.execCount ? `[${cellData.execCount}]` : "[ ]";
+    const isMarkdownView = cellData.type === "markdown" && !cellData.isEditingMarkdown;
+
+    cellData._inPrompt.textContent = cellData.type === "code" ? `In ${countText}:` : "";
+
+    cellData._editor.sync(isActive, isMarkdownView);
+    cellData._bodySlot.replaceChildren(
+      isMarkdownView ? MarkdownView({ cellData, actions: cellData._actions }) : cellData._editor.dom
+    );
+
+    const showOutput = cellData.type === "code" && cellData.hasDomOutput;
+    cellData._outputGrid.style.display = showOutput ? "grid" : "none";
+    cellData._outPrompt.textContent = `Out ${countText}:`;
+  }
+
+  _renderAllCells() {
+    const cells = this.store.get('cells');
+    this.cellsContainer.replaceChildren(...cells.map(c => c._dom || this._buildCellDom(c)));
+  }
+
+  setActiveCell(id) {
+    const currentActiveId = this.store.get('activeCellId');
+    if (currentActiveId === id) return;
+
+    // Check all cells and close editing mode for any markdown cells that are losing focus
+    this.store.get('cells').forEach(c => {
+      if (c.type === "markdown" && c.isEditingMarkdown) {
+        c.isEditingMarkdown = false;
+        this._refreshCell(c);
+      }
+    });
+
+    this.store.set('activeCellId', id);
+  }
+
+  focusCell(targetId) {
+    // Close editing on other markdown cells before focusing
+    this.store.get('cells').forEach(c => {
+      if (c.type === "markdown" && c.isEditingMarkdown && c.id !== targetId) {
+        c.isEditingMarkdown = false;
+        this._refreshCell(c);
+      }
+    });
+
+    const target = this.store.get('cells').find(c => c.id === targetId);
+    if (target && target.type === "markdown" && !target.readonly) {
+      target.isEditingMarkdown = true;
+    }
+    this.store.set('activeCellId', targetId);
+  }
+
+  addCell(type = "code", initialCode = null, afterId = null, readonly = false) {
+    const cells = [...this.store.get('cells')];
+    if (cells.length >= this.maxCells) {
+      console.warn(`Cannot create cell: Maximum cell limit (${this.maxCells}) reached.`);
+      return null;
+    }
+
+    const newId = this.nextCellId++;
+    const defaultText = type === "markdown" ? "### New Markdown Cell\nClick to edit..." : "";
+    const newCell = {
+      id: newId, type, code: initialCode !== null ? initialCode : defaultText, readonly,
+      isEditingMarkdown: !readonly && type === "markdown" && initialCode === null,
+      execCount: null, outputNode: null, hasDomOutput: false, _copiedFlag: false,
+      _dom: null, _editor: null, _actions: null,
+      _inPrompt: null, _outPrompt: null, _bodySlot: null, _outputGrid: null, _outputRef: null
+    };
+
+    if (afterId === null) {
+      cells.push(newCell);
+    } else {
+      const index = cells.findIndex(c => c.id === afterId);
+      cells.splice(index + 1, 0, newCell);
+    }
+
+    this.store.set('cells', cells);
+    this._renderAllCells();
+    this.focusCell(newId);
+    return newId;
+  }
+
+  deleteCell(id) {
+    const cells = this.store.get('cells');
+    if (cells.length <= 1) return;
+    const index = cells.findIndex(c => c.id === id);
+    const updatedCells = cells.filter(c => c.id !== id);
+    
+    this.store.set('cells', updatedCells);
+    this._renderAllCells();
+    const nextActiveIndex = Math.min(index, updatedCells.length - 1);
+    this.focusCell(updatedCells[nextActiveIndex].id);
+  }
+
+  nextCell(currentId, defaultType) {
+    const cells = this.store.get('cells');
+    const idx = cells.findIndex(c => c.id === currentId);
+    if (idx === cells.length - 1) this.addCell(defaultType, null, currentId);
+    else this.focusCell(cells[idx + 1].id);
+  }
+
+  async runCell(id) {
+    const cell = this.store.get('cells').find(c => c.id === id);
+    if (cell && cell._actions) await cell._actions.runCode(false);
+  }
+
+  async runAllCells() {
+    const cells = this.store.get('cells');
+    const codeCells = cells.filter(c => c.type === "code");
+    if (codeCells.length === 0) return;
+
+    this.store.set('executionQueueState', { isRunning: true, currentIndex: 0, total: codeCells.length });
+
+    for (const cell of cells) {
+      if (cell.type === "code" && cell._actions) {
+        this.store.set('executionQueueState', { 
+          isRunning: true, 
+          currentIndex: codeCells.indexOf(cell), 
+          total: codeCells.length 
+        });
+        await cell._actions.runCode(false);
+      }
+    }
+
+    this.store.set('executionQueueState', { isRunning: false, currentIndex: 0, total: 0 });
+  }
+
+  clearOutputs() {
+    this.store.get('cells').forEach(cell => {
+      cell.execCount = null;
+      cell.outputNode = null;
+      cell.hasDomOutput = false;
+      if (cell._outputRef) cell._outputRef.innerHTML = "";
+    });
+    this.store.set('executionCounter', 1);
+    this.store.get('cells').forEach(c => this._refreshCell(c));
+  }
+
+  resetScope() {
+    if (!window.__notebook_scope_map) {
+      window.__notebook_scope_map = new Map();
+    }
+    const newScope = Object.create(null);
+    window.__notebook_scope_map.set(this.id, newScope);
+    return newScope;
+  }
+
+  getScope() {
+    if (!window.__notebook_scope_map || !window.__notebook_scope_map.has(this.id)) {
+      return this.resetScope();
+    }
+    return window.__notebook_scope_map.get(this.id);
+  }
+
+  getNotebookData({ inputs = true, outputs = true } = {}) {
+    return this.store.get('cells').map(cell => {
+      const exportedCell = { id: cell.id, type: cell.type, readonly: cell.readonly, order: cell.execCount };
+      if (inputs) exportedCell.code = cell.code;
+      if (outputs) exportedCell.outputHtml = cell.outputNode ? cell.outputNode.innerHTML : null;
+      return exportedCell;
+    });
+  }
+}

package/src/store.js

@@ -0,0 +1,38 @@
+export class NotebookStore {
+  constructor(initialState = {}) {
+    this.state = initialState;
+    this.listeners = new Map();
+  }
+
+  on(event, callback) {
+    if (!this.listeners.has(event)) {
+      this.listeners.set(event, new Set());
+    }
+    this.listeners.get(event).add(callback);
+    return () => this.off(event, callback);
+  }
+
+  off(event, callback) {
+    if (this.listeners.has(event)) {
+      this.listeners.get(event).delete(callback);
+    }
+  }
+
+  emit(event, payload) {
+    if (this.listeners.has(event)) {
+      for (const cb of this.listeners.get(event)) {
+        cb(payload);
+      }
+    }
+  }
+
+  set(key, value) {
+    this.state[key] = value;
+    this.emit(`change:${key}`, value);
+    this.emit('change', this.state);
+  }
+
+  get(key) {
+    return this.state[key];
+  }
+}

package/src/transform.js

@@ -114,7 +114,7 @@ export const evaluateCodeAsync = async (code, TARGET, importMapConfig, scope) =>
   `);
 
   const result = await runCell(TARGET, van, validScope);
-  if (result !== undefined && result !== null) {
-    van.add(TARGET, result);
-  }
+  // if (result !== undefined && result !== null) {
+  //   van.add(TARGET, result);
+  // }
 };

package/src/ui.js

@@ -1,6 +0,0 @@
-import van from "vanjs-core";
-
-const { button } = van.tags;
-
-export const Button = ({ class: className = "", title = "", disabled = false, onclick }, ...children) =>
-  button({ class: `btn ${className}`, title, disabled, onclick }, ...children);