@zikojs/notebook 0.7.2 → 0.8.0

package/src/components/Header/index.js

@@ -0,0 +1,46 @@
+import van from "vanjs-core";
+
+import {
+  FileText,
+  Plus,
+  Trash2,
+  PlayForward,
+  Eraser,
+  Download,
+  Loader2
+} from '../icons/index.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 ...'));
+  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 }, Plus(), "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.element.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;
+}

package/src/components/MarkdownView/index.css

@@ -0,0 +1,90 @@
+/* --- MARKDOWN --- */
+
+.ziko-notebook .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;
+}
+
+.ziko-notebook .markdown-rendered-cell:hover {
+  background: #f8fafc;
+  border-color: #cbd5e1;
+}
+
+.ziko-notebook .cell.active .markdown-rendered-cell {
+  border-color: #94a3b8;
+}
+
+.ziko-notebook .markdown-body {
+  line-height: 1.6;
+}
+
+.ziko-notebook .markdown-body h1,
+.ziko-notebook .markdown-body h2,
+.ziko-notebook .markdown-body h3 {
+  margin-top: 8px;
+  margin-bottom: 8px;
+  font-weight: 600;
+}
+
+.ziko-notebook .markdown-body h1 {
+  font-size: 1.5em;
+  border-bottom: 1px solid var(--border-color);
+  padding-bottom: 4px;
+}
+
+.ziko-notebook .markdown-body h2 {
+  font-size: 1.25em;
+}
+
+.ziko-notebook .markdown-body h3 {
+  font-size: 1.1em;
+}
+
+.ziko-notebook .markdown-body p {
+  margin-bottom: 8px;
+}
+
+.ziko-notebook .markdown-body p:last-child {
+  margin-bottom: 0;
+}
+
+.ziko-notebook .markdown-body ul,
+.ziko-notebook .markdown-body ol {
+  padding-left: 20px;
+  margin-bottom: 8px;
+}
+
+.ziko-notebook .markdown-body code {
+  background: #f1f5f9;
+  padding: 2px 4px;
+  border-radius: 4px;
+  font-family: ui-monospace, SFMono-Regular, monospace;
+  font-size: 0.9em;
+}
+
+.ziko-notebook .markdown-body pre {
+  background: #1e293b;
+  color: #f8fafc;
+  padding: 10px;
+  border-radius: 6px;
+  overflow-x: auto;
+  margin: 8px 0;
+}
+
+.ziko-notebook .markdown-body pre code {
+  background: transparent;
+  color: inherit;
+  padding: 0;
+}
+
+.ziko-notebook .markdown-body blockquote {
+  border-left: 4px solid var(--primary);
+  padding-left: 10px;
+  color: #64748b;
+  margin: 8px 0;
+}

package/src/components/MarkdownView/index.js

@@ -0,0 +1,28 @@
+import { remark } from "remark";
+import remarkRehype from "remark-rehype";
+import rehypeStringify from "rehype-stringify";
+
+
+import { tags } from 'ziko/dom'
+
+const { div } = tags
+
+export function MarkdownView({ cellData, actions }) {
+  const content = div();
+  
+  // Process Markdown asynchronously using Remark + Rehype
+  remark()
+    .use(remarkRehype, { allowDangerousHtml: true })
+    .use(rehypeStringify)
+    .process(cellData.code || "*Empty Markdown Cell*")
+    .then((file) => {
+      content.element.innerHTML = String(file);
+    })
+    .catch((err) => {
+      content.element.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;
+}

package/src/components/index.css

@@ -0,0 +1,4 @@
+@import url('./ErrorOutput/index.css');
+@import url('./Button/index.css');
+@import url('./Header/index.css');
+@import url('./MarkdownView//index.css');

package/src/components/index.js

@@ -0,0 +1,4 @@
+export * from './MarkdownView/index.js'
+export * from './CellItem/index.js'
+export * from './Header/index.js'
+export * from './ErrorOutput/index.js'

package/src/index.css

@@ -1,3 +1,5 @@
+@import url('./components/index.css');
+
 .ziko-notebook {
   --primary: #0284c7;
   --primary-hover: #0369a1;
@@ -10,53 +12,6 @@
   color: #1e293b;
 }
 
-/* --- HEADER & TOOLBAR --- */
-
-.ziko-notebook .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%;
-}
-
-.ziko-notebook .brand {
-  font-weight: 600;
-  font-size: 16px;
-  color: #0f172a;
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  flex-shrink: 0;
-}
-
-.ziko-notebook .toolbar {
-  display: flex;
-  gap: 6px;
-  align-items: center;
-  flex-wrap: wrap;
-  max-width: 100%;
-}
-
-.ziko-notebook .status-badge {
-  font-size: 12px;
-  font-weight: 500;
-  color: var(--primary);
-  background: #e0f2fe;
-  padding: 4px 8px;
-  border-radius: 4px;
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-}
 
 /* --- NOTEBOOK & CELLS --- */
 
@@ -133,12 +88,6 @@
   border-color: #cbd5e1;
 }
 
-/*
- * CodeMirror is an external component.
- *
- * Don't globally style .CodeMirror.
- * Scope only the CodeMirror instances owned by the notebook.
- */
 .ziko-notebook .input-wrapper .CodeMirror {
   font-family: "Fira Code", SFMono-Regular, Consolas, monospace;
   font-size: 13px;
@@ -162,7 +111,11 @@
   gap: 4px;
   flex-shrink: 0;
   flex-wrap: wrap;
-  max-width: 120px;
+  max-width: 60px;
+}
+
+.ziko-notebook .cm-line{
+  line-height: 1.3 !important;
 }
 
 /* --- OUTPUT --- */
@@ -177,163 +130,7 @@
   word-break: break-word;
 }
 
-.ziko-notebook .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 --- */
-
-.ziko-notebook .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;
-}
-
-.ziko-notebook .markdown-rendered-cell:hover {
-  background: #f8fafc;
-  border-color: #cbd5e1;
-}
-
-.ziko-notebook .cell.active .markdown-rendered-cell {
-  border-color: #94a3b8;
-}
-
-.ziko-notebook .markdown-body {
-  line-height: 1.6;
-}
-
-.ziko-notebook .markdown-body h1,
-.ziko-notebook .markdown-body h2,
-.ziko-notebook .markdown-body h3 {
-  margin-top: 8px;
-  margin-bottom: 8px;
-  font-weight: 600;
-}
-
-.ziko-notebook .markdown-body h1 {
-  font-size: 1.5em;
-  border-bottom: 1px solid var(--border-color);
-  padding-bottom: 4px;
-}
-
-.ziko-notebook .markdown-body h2 {
-  font-size: 1.25em;
-}
-
-.ziko-notebook .markdown-body h3 {
-  font-size: 1.1em;
-}
-
-.ziko-notebook .markdown-body p {
-  margin-bottom: 8px;
-}
-
-.ziko-notebook .markdown-body p:last-child {
-  margin-bottom: 0;
-}
-
-.ziko-notebook .markdown-body ul,
-.ziko-notebook .markdown-body ol {
-  padding-left: 20px;
-  margin-bottom: 8px;
-}
-
-.ziko-notebook .markdown-body code {
-  background: #f1f5f9;
-  padding: 2px 4px;
-  border-radius: 4px;
-  font-family: ui-monospace, SFMono-Regular, monospace;
-  font-size: 0.9em;
-}
-
-.ziko-notebook .markdown-body pre {
-  background: #1e293b;
-  color: #f8fafc;
-  padding: 10px;
-  border-radius: 6px;
-  overflow-x: auto;
-  margin: 8px 0;
-}
-
-.ziko-notebook .markdown-body pre code {
-  background: transparent;
-  color: inherit;
-  padding: 0;
-}
-
-.ziko-notebook .markdown-body blockquote {
-  border-left: 4px solid var(--primary);
-  padding-left: 10px;
-  color: #64748b;
-  margin: 8px 0;
-}
-
-/* --- BUTTONS --- */
 
-.ziko-notebook .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;
-}
-
-.ziko-notebook .btn:hover {
-  background: #f1f5f9;
-}
-
-.ziko-notebook .btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.ziko-notebook .btn-icon {
-  padding: 6px;
-  border-radius: 4px;
-}
-
-.ziko-notebook .btn-primary {
-  background: var(--primary);
-  color: #ffffff;
-  border-color: var(--primary);
-}
-
-.ziko-notebook .btn-primary:hover {
-  background: var(--primary-hover);
-  border-color: var(--primary-hover);
-}
-
-.ziko-notebook .btn-active {
-  background: #e2e8f0;
-  border-color: #cbd5e1;
-}
-
-.ziko-notebook .icon {
-  width: 14px;
-  height: 14px;
-  stroke-width: 2;
-}
 
 /* --- MOBILE --- */
 

package/src/notebook.js

@@ -1,8 +1,20 @@
 import { NotebookStore } from "./store.js";
-import { Header, CellItem, MarkdownView } from "./components.js";
-import { evaluateCodeAsync } from "./transform.js";
+import { 
+  Header, 
+  CellItem, 
+  MarkdownView,
+  ErrorOutput
+} from "./components/index.js";
+import { evaluateCodeAsync } from "./compiler/index.js";
 import { tags, UIElement } from "ziko/dom";
 import { call_with_optional_props } from 'ziko/dom/internal-utils'
+import { useState, useDerived } from "ziko/hooks";
+const { div } = tags
+// const [st, setSt] = useState('hh')
+// globalThis.mm = useDerived((n)=>n, [st])
+// globalThis.pp = tags.p({}, mm).mount(document.body)
+// globalThis.st = st
+// globalThis.setSt = setSt
 
 export class UINotebook extends UIElement{
   constructor({
@@ -13,7 +25,8 @@ export class UINotebook extends UIElement{
     codeMirrorPlugins = [],
     minLines = 3,
     maxCells = Infinity,
-    showHeader = false
+    showHeader = true,
+    runtimePlugins = []
   } = {}) {
     super({ element : 'div'})
     this.setAttr({class : 'ziko-notebook'})
@@ -25,6 +38,7 @@ export class UINotebook extends UIElement{
     this.resetScope();
 
     this.importMap = importMap;
+    this.runtimePlugins = runtimePlugins;
     this.codeMirrorConfig = codeMirrorConfig;
     this.codeMirrorPlugins = codeMirrorPlugins;
     this.minLines = minLines;
@@ -61,7 +75,7 @@ export class UINotebook extends UIElement{
       addCodeBelow: () => this.addCell("code", "", this.store.get('activeCellId'))
     };
 
-    this.cellsContainer = tags.div({ class: "cells-container" }).element;
+    this.cellsContainer = div({ class: "cells-container" }).element;
     this.header = Header({
       store: this.store,
       actions: {
@@ -78,7 +92,7 @@ export class UINotebook extends UIElement{
 
     this.append(
       this.header, 
-      tags.div({ class: "notebook" }, 
+      div({ class: "notebook" }, 
       this.cellsContainer)  
     )
 
@@ -122,10 +136,18 @@ export class UINotebook extends UIElement{
 
         try {
           const scope = app.getScope();
-          await evaluateCodeAsync(code, cellData._outputRef, app.importMap, scope);
+          await evaluateCodeAsync(
+            code,
+            cellData._outputRef,
+            {
+              importMap: app.importMap,
+              plugins: app.runtimePlugins,
+            },
+            scope,
+          );
         } catch (err) {
           hasError = true;
-          tags.div({ class: "error-output" }, err.toString()).mount(cellData._outputRef)
+          ErrorOutput(err).mount(cellData._outputRef)
         }
 
         const counter = this.store.get('executionCounter');
@@ -133,25 +155,23 @@ export class UINotebook extends UIElement{
         cellData.execCount = counter;
         cellData.hasDomOutput = cellData._outputRef.childNodes.length > 0 || hasError;
 
-        const container = tags.div({ class: "output-area" }).element;
+        const container = 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);
+        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();
+          const temporary = tags.textarea(textToCopy).mount(document.body)
+          temporary.element.select()
           document.execCommand("copy");
-          document.body.removeChild(textArea);
+          temporary.unmount()
         }
       },
       toggleReadonly: () => {