@zikojs/notebook 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 ZAKARIA ELALAOUI
+
+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 @@
+# @zikojs/notebook

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@zikojs/notebook",
+  "version": "0.1.0",
+  "description": "",
+  "type": "module",
+  "publishConfig": {
+    "access": "public"
+  },
+  "author": "zakaria elalaoui",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/zikojs/notebook.git",
+    "directory": "packages/notebook"
+  },
+  "keywords": [
+    "zikojs",
+    "notebook"
+  ],
+  "exports": {
+    ".": {
+      "import": "./src/index.js",
+      "types": "./src/index.d.ts"
+    }
+  },
+  "files": [
+    "src",
+    "dist",
+    "LICENCE"
+  ],
+  "license": "MIT",
+  "dependencies": {
+    "@codemirror/autocomplete": "^6.20.3",
+    "@codemirror/commands": "^6.11.0",
+    "@codemirror/lang-javascript": "^6.2.5",
+    "@codemirror/lang-markdown": "^6.5.2",
+    "@codemirror/language": "^6.12.4",
+    "@codemirror/state": "^6.7.4",
+    "@codemirror/view": "^6.43.11",
+    "@zikojs/lucide": "^0.2.2",
+    "acorn": "^8.18.0",
+    "canvas-confetti": "^1.9.4",
+    "codemirror": "^6.0.2",
+    "lucide": "^1.44.0",
+    "marked": "^18.0.12",
+    "vanjs-core": "^1.6.1",
+    "zextra": "^1.15.0",
+    "ziko": "latest"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "dev": "cross-env NODE_ENV=development rollup --config rollup.config.js",
+    "watch": "cross-env NODE_ENV=development rollup --config rollup.config.js -w",
+    "build": "cross-env NODE_ENV=production rollup --config rollup.config.js"
+  }
+}

package/src/codeEditor.js

@@ -0,0 +1,212 @@
+import { EditorView, keymap, lineNumbers, highlightActiveLine } from "@codemirror/view";
+import { EditorState, Compartment } from "@codemirror/state";
+import { defaultKeymap, history, historyKeymap } from "@codemirror/commands";
+import { bracketMatching, indentUnit, syntaxHighlighting, defaultHighlightStyle } from "@codemirror/language";
+import { closeBrackets, closeBracketsKeymap } from "@codemirror/autocomplete";
+import { javascript } from "@codemirror/lang-javascript";
+import { markdown } from "@codemirror/lang-markdown";
+import van from "vanjs-core";
+
+const { div } = van.tags;
+
+const languageFor = (type) =>
+  type === "markdown" ? markdown() : javascript();
+
+export function createCodeEditor(app, cellData, actions) {
+  const editorDom = div({ class: "input-wrapper" });
+
+  const languageCompartment = new Compartment();
+  const readOnlyCompartment = new Compartment();
+  const editableCompartment = new Compartment();
+
+  let view = null;
+
+  const buildPluginKeymap = () => {
+    const bindings = [];
+
+    app.codeMirrorPlugins.forEach(plugin => {
+      if (plugin && typeof plugin === "object" && plugin.extraKeys) {
+        Object.entries(plugin.extraKeys).forEach(([key, run]) => {
+          bindings.push({
+            key,
+            run: () => {
+              run();
+              return true;
+            }
+          });
+        });
+      }
+    });
+
+    return bindings;
+  };
+
+  const initEditor = () => {
+    if (view) return;
+
+    const shortcutKeymap = keymap.of([
+      {
+        key: "Shift-Enter",
+        run: () => {
+          actions.runCode(true);
+          return true;
+        }
+      },
+      {
+        key: "Ctrl-Enter",
+        mac: "Cmd-Enter",
+        run: () => {
+          actions.runCode(false);
+          return true;
+        }
+      },
+      {
+        key: "Ctrl-Shift-d",
+        mac: "Cmd-Shift-d",
+        run: () => {
+          app.notebookGlobalShortcuts.deleteActive();
+          return true;
+        }
+      },
+      {
+        key: "Ctrl-Shift-m",
+        mac: "Cmd-Shift-m",
+        run: () => {
+          app.notebookGlobalShortcuts.addMdBelow();
+          return true;
+        }
+      },
+      {
+        key: "Ctrl-Shift-y",
+        mac: "Cmd-Shift-y",
+        run: () => {
+          app.notebookGlobalShortcuts.addCodeBelow();
+          return true;
+        }
+      },
+      ...buildPluginKeymap(),
+      ...closeBracketsKeymap,
+      ...defaultKeymap,
+      ...historyKeymap
+    ]);
+
+    const extraExtensions = Array.isArray(app.codeMirrorConfig)
+      ? app.codeMirrorConfig
+      : [];
+
+    const state = EditorState.create({
+      doc: cellData.code,
+      extensions: [
+        lineNumbers(),
+        highlightActiveLine(),
+
+        history(),
+        bracketMatching(),
+        closeBrackets(),
+
+        syntaxHighlighting(defaultHighlightStyle),
+
+        shortcutKeymap,
+
+        EditorView.lineWrapping,
+
+        indentUnit.of("  "),
+        EditorState.tabSize.of(2),
+
+        languageCompartment.of(
+          languageFor(cellData.type)
+        ),
+
+        readOnlyCompartment.of(
+          EditorState.readOnly.of(cellData.readonly)
+        ),
+
+        editableCompartment.of(
+          EditorView.editable.of(!cellData.readonly)
+        ),
+
+        EditorView.updateListener.of(update => {
+          if (update.docChanged) {
+            cellData.code = update.state.doc.toString();
+          }
+        }),
+
+        EditorView.domEventHandlers({
+          focus: () => {
+            actions.setActive();
+          }
+        }),
+
+        ...extraExtensions
+      ]
+    });
+
+    view = new EditorView({
+      state,
+      parent: editorDom
+    });
+
+    const lineHeight = view.defaultLineHeight || 19;
+
+    view.dom.style.minHeight =
+      `${Math.ceil(app.minLines * lineHeight + 8)}px`;
+
+    app.codeMirrorPlugins.forEach(plugin => {
+      if (typeof plugin === "function") {
+        plugin(view);
+      }
+    });
+  };
+
+  return {
+    dom: editorDom,
+
+    getValue: () =>
+      view
+        ? view.state.doc.toString()
+        : cellData.code,
+
+    sync: (isActive, isMarkdownView) => {
+      if (!isMarkdownView) {
+        if (!view) {
+          requestAnimationFrame(() => initEditor());
+        } else {
+          view.dispatch({
+            effects: [
+              languageCompartment.reconfigure(
+                languageFor(cellData.type)
+              ),
+
+              readOnlyCompartment.reconfigure(
+                EditorState.readOnly.of(cellData.readonly)
+              ),
+
+              editableCompartment.reconfigure(
+                EditorView.editable.of(!cellData.readonly)
+              )
+            ]
+          });
+
+          const currentValue = view.state.doc.toString();
+
+          if (currentValue !== cellData.code) {
+            view.dispatch({
+              changes: {
+                from: 0,
+                to: currentValue.length,
+                insert: cellData.code
+              }
+            });
+          }
+        }
+
+        if (isActive && view && !cellData.readonly) {
+          requestAnimationFrame(() => view.focus());
+        }
+      } else if (view) {
+        view.destroy();
+        view = null;
+      }
+    }
+  };
+}

package/src/icons.js

@@ -0,0 +1,29 @@
+import _Check from '@zikojs/lucide/Check'
+import _Copy from '@zikojs/lucide/Copy'
+import _Lock from '@zikojs/lucide/Lock'
+import _Unlock from '@zikojs/lucide/Unlock'
+import _Code2 from '@zikojs/lucide/Code2'
+import _FileText from '@zikojs/lucide/FileText'
+import _Pencil from '@zikojs/lucide/Pencil'
+import _Play from '@zikojs/lucide/Play'
+import _Plus from '@zikojs/lucide/Plus'
+import _Trash2 from '@zikojs/lucide/Trash2'
+import _PlayForward from '@zikojs/lucide/StepForward'
+import _Eraser from '@zikojs/lucide/Eraser'
+import _Download from '@zikojs/lucide/Download'
+import _Loader2 from '@zikojs/lucide/Loader2'
+
+export const Check = () => _Check({ class: 'icon', stroke : 'currentColor' }).element
+export const Copy = () => _Copy({ class: 'icon', stroke : 'currentColor' }).element
+export const Lock = () => _Lock({ class: 'icon', stroke : 'currentColor' }).element
+export const Unlock = () => _Unlock({ class: 'icon', stroke : 'currentColor' }).element
+export const Code2 = () => _Code2({ class: 'icon', stroke : 'currentColor' }).element
+export const FileText = () => _FileText({ class: 'icon', stroke : 'currentColor' }).element
+export const Pencil = () => _Pencil({ class: 'icon', stroke : 'currentColor' }).element
+export const Play = () => _Play({ class: 'icon', stroke : 'currentColor' }).element
+export const Plus = () => _Plus({ class: 'icon', stroke : 'currentColor' }).element
+export const Trash2 = () => _Trash2({ class: 'icon', stroke : 'currentColor' }).element
+export const PlayForward = () => _PlayForward({ class: 'icon', stroke : 'currentColor' }).element
+export const Eraser = () => _Eraser({ class: 'icon', stroke : 'currentColor' }).element
+export const Download = () => _Download({ class: 'icon', stroke : 'currentColor' }).element
+export const Loader2 = () => _Loader2({ class: 'icon', stroke : 'currentColor' }).element

package/src/index.css

@@ -0,0 +1,374 @@
+:root {
+  --primary: #0284c7;
+  --primary-hover: #0369a1;
+  --border-color: #e2e8f0;
+  --prompt-in: #303f9f;
+  --prompt-out: #d62728;
+  --bg-editor: #f8fafc;
+}
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  background: #ffffff;
+  color: #1e293b;
+}
+
+/* --- HEADER & TOOLBAR --- */
+
+.header {
+  border-bottom: 1px solid var(--border-color);
+  background: #ffffff;
+  padding: 10px 16px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  flex-wrap: wrap;
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
+  width: 100%;
+}
+
+.brand {
+  font-weight: 600;
+  font-size: 16px;
+  color: #0f172a;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-shrink: 0;
+}
+
+.toolbar {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  flex-wrap: wrap;
+  max-width: 100%;
+}
+
+.status-badge {
+  font-size: 12px;
+  font-weight: 500;
+  color: #0284c7;
+  background: #e0f2fe;
+  padding: 4px 8px;
+  border-radius: 4px;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+/* --- NOTEBOOK & CELLS --- */
+
+.notebook {
+  max-width: 900px;
+  margin: 16px auto;
+  padding: 0 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.cell {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--border-color);
+  border-left: 4px solid transparent;
+  border-radius: 6px;
+  padding: 8px;
+  gap: 8px;
+  background: #ffffff;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+  position: relative;
+}
+
+.cell.active {
+  border-left-color: var(--primary);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+}
+
+.cell-input-grid {
+  display: grid;
+  grid-template-columns: 56px 1fr auto;
+  align-items: flex-start;
+  gap: 8px;
+  width: 100%;
+}
+
+.cell-output-grid {
+  display: grid;
+  grid-template-columns: 56px 1fr;
+  align-items: flex-start;
+  gap: 8px;
+  width: 100%;
+}
+
+.prompt {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 11px;
+  color: var(--prompt-in);
+  text-align: right;
+  padding-top: 8px;
+  white-space: nowrap;
+  user-select: none;
+  font-weight: 700;
+}
+
+.prompt.out {
+  color: var(--prompt-out);
+}
+
+/* --- CODEMIRROR / INPUT --- */
+
+.input-wrapper {
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+  background: var(--bg-editor);
+  overflow: hidden;
+  width: 100%;
+  transition: border-color 0.15s ease;
+}
+
+.cell.active .input-wrapper {
+  border-color: #cbd5e1;
+}
+
+.CodeMirror {
+  font-family: "Fira Code", SFMono-Regular, Consolas, monospace;
+  font-size: 13px;
+  height: auto !important;
+  background: transparent;
+  border-radius: 4px;
+}
+
+.CodeMirror-scroll {
+  /* Overflow reset ensures height auto-fits custom minLines properly */
+  overflow-y: hidden !important;
+  overflow-x: auto !important;
+}
+
+.CodeMirror-activeline-background {
+  background: rgba(2, 132, 199, 0.05);
+}
+
+.cell-controls {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex-shrink: 0;
+  flex-wrap: wrap;
+  max-width: 120px;
+}
+
+/* --- OUTPUTS & MARKDOWN --- */
+
+.output-wrapper {
+  width: 100%;
+  padding: 4px 0;
+}
+
+.output-area {
+  font-size: 14px;
+  word-break: break-word;
+}
+
+.error-output {
+  color: #e11d48;
+  font-family: ui-monospace, SFMono-Regular, monospace;
+  white-space: pre-wrap;
+  font-size: 12px;
+  background: #fff1f2;
+  padding: 8px;
+  border-radius: 4px;
+  border: 1px solid #fecdd3;
+}
+
+.markdown-rendered-cell {
+  grid-column: 1 / 3;
+  padding: 8px 12px;
+  cursor: pointer;
+  min-height: 38px;
+  border: 1px dashed transparent;
+  border-radius: 4px;
+  transition: background 0.15s ease, border-color 0.15s ease;
+}
+
+.markdown-rendered-cell:hover {
+  background: #f8fafc;
+  border-color: #cbd5e1;
+}
+
+.cell.active .markdown-rendered-cell {
+  border-color: #94a3b8;
+}
+
+.markdown-body {
+  line-height: 1.6;
+}
+
+.markdown-body h1,
+.markdown-body h2,
+.markdown-body h3 {
+  margin-top: 8px;
+  margin-bottom: 8px;
+  font-weight: 600;
+}
+
+.markdown-body h1 {
+  font-size: 1.5em;
+  border-bottom: 1px solid var(--border-color);
+  padding-bottom: 4px;
+}
+
+.markdown-body h2 {
+  font-size: 1.25em;
+}
+
+.markdown-body h3 {
+  font-size: 1.1em;
+}
+
+.markdown-body p {
+  margin-bottom: 8px;
+}
+
+.markdown-body p:last-child {
+  margin-bottom: 0;
+}
+
+.markdown-body ul,
+.markdown-body ol {
+  padding-left: 20px;
+  margin-bottom: 8px;
+}
+
+.markdown-body code {
+  background: #f1f5f9;
+  padding: 2px 4px;
+  border-radius: 4px;
+  font-family: ui-monospace, SFMono-Regular, monospace;
+  font-size: 0.9em;
+}
+
+.markdown-body pre {
+  background: #1e293b;
+  color: #f8fafc;
+  padding: 10px;
+  border-radius: 6px;
+  overflow-x: auto;
+  margin: 8px 0;
+}
+
+.markdown-body pre code {
+  background: transparent;
+  color: inherit;
+  padding: 0;
+}
+
+.markdown-body blockquote {
+  border-left: 4px solid var(--primary);
+  padding-left: 10px;
+  color: #64748b;
+  margin: 8px 0;
+}
+
+/* --- BUTTONS & ICONS --- */
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  background: #ffffff;
+  border: 1px solid var(--border-color);
+  padding: 6px 10px;
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: 500;
+  color: #334155;
+  cursor: pointer;
+  line-height: 1;
+  white-space: nowrap;
+  transition: background 0.12s ease, border-color 0.12s ease;
+}
+
+.btn:hover {
+  background: #f1f5f9;
+}
+
+.btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.btn-icon {
+  padding: 6px;
+  border-radius: 4px;
+}
+
+.btn-primary {
+  background: var(--primary);
+  color: #ffffff;
+  border-color: var(--primary);
+}
+
+.btn-primary:hover {
+  background: var(--primary-hover);
+  border-color: var(--primary-hover);
+}
+
+.btn-active {
+  background: #e2e8f0;
+  border-color: #cbd5e1;
+}
+
+.icon {
+  width: 14px;
+  height: 14px;
+  stroke-width: 2;
+}
+
+/* --- MOBILE RESPONSIVE --- */
+
+@media (max-width: 640px) {
+  .header {
+    padding: 8px 12px;
+  }
+
+  .toolbar {
+    width: 100%;
+    justify-content: flex-start;
+  }
+
+  .cell-input-grid {
+    grid-template-columns: 42px 1fr;
+    grid-template-rows: auto auto;
+  }
+
+  .cell-controls {
+    grid-column: 1 / -1;
+    justify-content: flex-end;
+    border-bottom: 1px solid #f1f5f9;
+    padding-bottom: 6px;
+    margin-bottom: 2px;
+    max-width: 100%;
+  }
+
+  .cell-output-grid {
+    grid-template-columns: 42px 1fr;
+  }
+
+  .prompt {
+    font-size: 10px;
+    padding-top: 6px;
+  }
+}

package/src/index.js

@@ -0,0 +1,500 @@
+import './index.css'
+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 {
+  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" }, "Jupyter VanJS Notebook", 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;
+}
+
+// --- MAIN NOTEBOOK APP CLASS ---
+
+export class NotebookApp {
+  constructor({
+    cells: initialCells = [],
+    importMap = {},
+    runCells = true,
+    codeMirrorConfig = {},
+    markedPlugins = [],
+    codeMirrorPlugins = [],
+    minLines = 3,
+    maxCells = Infinity
+  } = {}) {
+    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 {
+          await evaluateCodeAsync(code, cellData._outputRef, app.importMap);
+        } 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 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() {
+    window.__notebook_scope = Object.create(null);
+  }
+
+  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;
+    });
+  }
+}

package/src/transform.js

@@ -0,0 +1,119 @@
+import van from "vanjs-core";
+import * as acorn from "acorn";
+
+export const rewriteImportNode = (node, code, importMapConfig) => {
+  let source = node.source.value;
+  if (importMapConfig && importMapConfig[source]) {
+    source = importMapConfig[source];
+  } else if (!source.startsWith("http://") && !source.startsWith("https://") && !source.startsWith("./") && !source.startsWith("../")) {
+    source = `https://esm.sh/${source}`;
+  }
+
+  if (node.specifiers.length === 0) return `await import("${source}");`;
+
+  let defaultImportName = null;
+  let namespaceId = null;
+  let namedImports = [];
+
+  node.specifiers.forEach(spec => {
+    if (spec.type === "ImportNamespaceSpecifier") namespaceId = spec.local.name;
+    else if (spec.type === "ImportDefaultSpecifier") defaultImportName = spec.local.name;
+    else if (spec.type === "ImportSpecifier") namedImports.push({ imported: spec.imported.name, local: spec.local.name });
+  });
+
+  if (namespaceId) return `window.__notebook_scope.${namespaceId} = await import("${source}");`;
+
+  const tmp = `__mod_${node.start}`;
+  let lines = [`const ${tmp} = await import("${source}");`];
+
+  if (defaultImportName && namedImports.length === 0) {
+    lines.push(`window.__notebook_scope.${defaultImportName} = ${tmp}.default ?? ${tmp};`);
+    return lines.join("\n");
+  }
+
+  if (defaultImportName) lines.push(`window.__notebook_scope.${defaultImportName} = ${tmp}.default ?? ${tmp};`);
+  namedImports.forEach(({ imported, local }) => {
+    lines.push(`window.__notebook_scope.${local} = ${tmp}.${imported} !== undefined ? ${tmp}.${imported} : (${tmp}.default ?? ${tmp});`);
+  });
+
+  return lines.join("\n");
+};
+
+export const transformImportsAndScope = (code, importMapConfig) => {
+  try {
+    const ast = acorn.parse(code, { ecmaVersion: "latest", sourceType: "module", allowReturnOutsideFunction: true });
+    let modifications = [];
+
+    ast.body.forEach(node => {
+      if (node.type === "ImportDeclaration") {
+        modifications.push({ start: node.start, end: node.end, replacement: rewriteImportNode(node, code, importMapConfig) });
+      } else if (node.type === "VariableDeclaration") {
+        let replacementCode = "";
+        node.declarations.forEach(decl => {
+          if (decl.id.type === "Identifier") {
+            const varName = decl.id.name;
+            const initCode = decl.init ? code.slice(decl.init.start, decl.init.end) : "undefined";
+            replacementCode += `window.__notebook_scope.${varName} = ${initCode};\n`;
+          } else if (decl.id.type === "ObjectPattern") {
+            const initCode = decl.init ? code.slice(decl.init.start, decl.init.end) : "undefined";
+            const tempVar = `__destruct_obj_${decl.start}`;
+            replacementCode += `(() => { const ${tempVar} = ${initCode}; `;
+            decl.id.properties.forEach(prop => {
+              if (prop.value && prop.value.type === "Identifier") {
+                const localName = prop.value.name;
+                const keyName = prop.key.type === "Identifier" ? prop.key.name : prop.key.value;
+                replacementCode += `window.__notebook_scope.${localName} = ${tempVar}.${keyName}; `;
+              }
+            });
+            replacementCode += `})();\n`;
+          } else if (decl.id.type === "ArrayPattern") {
+            const initCode = decl.init ? code.slice(decl.init.start, decl.init.end) : "undefined";
+            const tempVar = `__destruct_arr_${decl.start}`;
+            replacementCode += `(() => { const ${tempVar} = ${initCode}; `;
+            decl.id.elements.forEach((elem, index) => {
+              if (elem && elem.type === "Identifier") {
+                const localName = elem.name;
+                replacementCode += `window.__notebook_scope.${localName} = ${tempVar}[${index}]; `;
+              }
+            });
+            replacementCode += `})();\n`;
+          }
+        });
+        modifications.push({ start: node.start, end: node.end, replacement: replacementCode });
+      } else if (node.type === "FunctionDeclaration" && node.id) {
+        const funcName = node.id.name;
+        const funcBody = code.slice(node.start, node.end);
+        modifications.push({ start: node.start, end: node.end, replacement: `window.__notebook_scope.${funcName} = ${funcBody.replace(/^function\s+\w+/, "function")}` });
+      } else if (node.type === "ClassDeclaration" && node.id) {
+        const className = node.id.name;
+        const classBody = code.slice(node.start, node.end);
+        modifications.push({ start: node.start, end: node.end, replacement: `window.__notebook_scope.${className} = ${classBody.replace(/^class\s+\w+/, "class")}` });
+      }
+    });
+
+    modifications.sort((a, b) => b.start - a.start);
+    let transformedCode = code;
+    modifications.forEach(mod => { transformedCode = transformedCode.slice(0, mod.start) + mod.replacement + transformedCode.slice(mod.end); });
+    return transformedCode;
+  } catch (e) {
+    if (code.trim().startsWith("import ") || code.includes("\nimport ")) throw new SyntaxError("Invalid code module layout syntax.");
+    return code;
+  }
+};
+
+export const evaluateCodeAsync = async (code, TARGET, importMapConfig) => {
+  const compiledCode = transformImportsAndScope(code, importMapConfig);
+
+  const runCell = new Function("TARGET", "van", `
+    return (async () => {
+      with (window.__notebook_scope) {
+        ${compiledCode}
+      }
+    })();
+  `);
+
+  const result = await runCell(TARGET, van);
+  if (result !== undefined && result !== null) {
+    van.add(TARGET, result);
+  }
+};

package/src/ui.js

@@ -0,0 +1,6 @@
+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);