@zikojs/notebook 0.15.0 → 0.15.2

package/src/components/CellItem/index.js

@@ -1,180 +1,180 @@
-import { createCodeEditor } from "../../code-editor/index.js";
-import { tags } from 'ziko/dom'
-import { useState } from 'ziko/hooks'
-import {
-  Check,
-  Copy,
-  Lock,
-  Unlock,
-  Code2,
-  FileText,
-  Pencil,
-  Play,
-  Refresh,
-  Plus,
-  Trash2,
-} from '../icons/index.js';
-const { div, span } = tags;
-
-import { Button } from "../Button/index.js";
-
-export const Prompt = () => {
-  return span({ class: "prompt" })
-}
-
-export function CellItem({ cellData, app, store }) {
-  const outputRef = div({ class: "output-area" });
-  if (cellData.outputNode) outputRef.append(cellData.outputNode);
-  cellData._outputRef = outputRef.element;
-
-  const actions = app._cellActions(cellData);
-  cellData._actions = actions;
-  cellData._editor = createCodeEditor(app, cellData, actions);
-  
-  /* Check ziko */
-  const [In, setIn] = useState(0);
-  globalThis.setIn = setIn;
-  const inPrompt = span({ class: "prompt" }, In);
-  const outPrompt = span({ class: "prompt out" });
-  const bodySlot = div().style({ display: 'contents' });
-  
-  // Pass runtimePlugins from app into CellControls
-  const controlsEl = CellControls({ 
-    cellData, 
-    store, 
-    actions, 
-    runtimePlugins: app.runtimePlugins 
-  });
-
-  const inputRow = div({ class: "cell-input-row" }, inPrompt, bodySlot);
-  const outputRow = div({ class: "cell-output-row" }, outPrompt, div({ class: "output-wrapper" }, outputRef));
-  const root = div({ class: "cell" }, inputRow, controlsEl, outputRow);
-  root.onClick(() => app.setActiveCell(cellData.id));
-
-  cellData._dom = root.element;
-  cellData._inPrompt = inPrompt.element;
-  cellData._outPrompt = outPrompt.element;
-  cellData._bodySlot = bodySlot.element;
-  cellData._outputRow = outputRow.element;
-  cellData._setIn = setIn;
-
-  app._refreshCell(cellData);
-  return root.element;
-}
-export function CellControls({ cellData, store, actions, runtimePlugins = [] }) {
-  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;
-
-    // Build the runtime selector dropdown for code cells using native DOM options
-    let runtimeSelectEl = null;
-    if (cellData.type === "code") {
-      const selectElement = document.createElement("select");
-      selectElement.className = "runtime-select";
-      selectElement.title = "Select Cell Runtime";
-      selectElement.disabled = cellData.readonly;
-      
-      selectElement.onchange = (e) => {
-        actions.setRuntime(e.target.value === "" ? null : e.target.value);
-      };
-
-      // Default JS option
-      const optJs = document.createElement("option");
-      optJs.value = "";
-      optJs.textContent = "JS";
-      selectElement.appendChild(optJs);
-
-      // Runtime plugin options
-      for (const p of runtimePlugins) {
-        const opt = document.createElement("option");
-        opt.value = p.name;
-        opt.textContent = p.name.charAt(0).toUpperCase() + p.name.slice(1);
-        selectElement.appendChild(opt);
-      }
-
-      // Explicitly set the active value
-      selectElement.value = cellData.runtime || "";
-      runtimeSelectEl = selectElement;
-    }
-
-    const children = [
-      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())
-        : div(
-          Button({ 
-            class: "btn-icon", 
-            title: "Run (Shift+Enter)", 
-            disabled: isQueueRunning, 
-            onclick: () => actions.runCode(false) 
-          }, Refresh()),
-          Button({ 
-            class: "btn-icon btn-primary", 
-            title: "Run & Advance (Shift+Enter)", 
-            disabled: isQueueRunning, 
-            onclick: () => actions.runCode(true) 
-          }, Play())
-        ).style({ display : 'contents'}).element,
-
-      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())
-    ];
-
-    if (runtimeSelectEl) {
-      children.unshift(runtimeSelectEl);
-    }
-
-    controlsContainer.replaceChildren(...children);
-  };
-
-  renderButtons();
-  store.on('change', renderButtons);
-
-  return controlsContainer;
-}
+import { createCodeEditor } from "../../code-editor/index.js";
+import { tags } from 'ziko/dom'
+import { useState } from 'ziko/hooks'
+import {
+  Check,
+  Copy,
+  Lock,
+  Unlock,
+  Code2,
+  FileText,
+  Pencil,
+  Play,
+  Refresh,
+  Plus,
+  Trash2,
+} from '../icons/index.js';
+const { div, span } = tags;
+
+import { Button } from "../Button/index.js";
+
+export const Prompt = () => {
+  return span({ class: "prompt" })
+}
+
+export function CellItem({ cellData, app, store }) {
+  const outputRef = div({ class: "output-area" });
+  if (cellData.outputNode) outputRef.append(cellData.outputNode);
+  cellData._outputRef = outputRef.element;
+
+  const actions = app._cellActions(cellData);
+  cellData._actions = actions;
+  cellData._editor = createCodeEditor(app, cellData, actions);
+  
+  /* Check ziko */
+  const [In, setIn] = useState(0);
+  globalThis.setIn = setIn;
+  const inPrompt = span({ class: "prompt" }, In);
+  const outPrompt = span({ class: "prompt out" });
+  const bodySlot = div().style({ display: 'contents' });
+  
+  // Pass runtimePlugins from app into CellControls
+  const controlsEl = CellControls({ 
+    cellData, 
+    store, 
+    actions, 
+    runtimePlugins: app.runtimePlugins 
+  });
+
+  const inputRow = div({ class: "cell-input-row" }, inPrompt, bodySlot);
+  const outputRow = div({ class: "cell-output-row" }, outPrompt, div({ class: "output-wrapper" }, outputRef));
+  const root = div({ class: "cell" }, inputRow, controlsEl, outputRow);
+  root.onClick(() => app.setActiveCell(cellData.id));
+
+  cellData._dom = root.element;
+  cellData._inPrompt = inPrompt.element;
+  cellData._outPrompt = outPrompt.element;
+  cellData._bodySlot = bodySlot.element;
+  cellData._outputRow = outputRow.element;
+  cellData._setIn = setIn;
+
+  app._refreshCell(cellData);
+  return root.element;
+}
+export function CellControls({ cellData, store, actions, runtimePlugins = [] }) {
+  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;
+
+    // Build the runtime selector dropdown for code cells using native DOM options
+    let runtimeSelectEl = null;
+    if (cellData.type === "code") {
+      const selectElement = document.createElement("select");
+      selectElement.className = "runtime-select";
+      selectElement.title = "Select Cell Runtime";
+      selectElement.disabled = cellData.readonly;
+      
+      selectElement.onchange = (e) => {
+        actions.setRuntime(e.target.value === "" ? null : e.target.value);
+      };
+
+      // Default JS option
+      const optJs = document.createElement("option");
+      optJs.value = "";
+      optJs.textContent = "JS";
+      selectElement.appendChild(optJs);
+
+      // Runtime plugin options
+      for (const p of runtimePlugins) {
+        const opt = document.createElement("option");
+        opt.value = p.name;
+        opt.textContent = p.name.charAt(0).toUpperCase() + p.name.slice(1);
+        selectElement.appendChild(opt);
+      }
+
+      // Explicitly set the active value
+      selectElement.value = cellData.runtime || "";
+      runtimeSelectEl = selectElement;
+    }
+
+    const children = [
+      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())
+        : div(
+          Button({ 
+            class: "btn-icon", 
+            title: "Run (Shift+Enter)", 
+            disabled: isQueueRunning, 
+            onclick: () => actions.runCode(false) 
+          }, Refresh()),
+          Button({ 
+            class: "btn-icon btn-primary", 
+            title: "Run & Advance (Shift+Enter)", 
+            disabled: isQueueRunning, 
+            onclick: () => actions.runCode(true) 
+          }, Play())
+        ).style({ display : 'contents'}).element,
+
+      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())
+    ];
+
+    if (runtimeSelectEl) {
+      children.unshift(runtimeSelectEl);
+    }
+
+    controlsContainer.replaceChildren(...children);
+  };
+
+  renderButtons();
+  store.on('change', renderButtons);
+
+  return controlsContainer;
+}

package/src/components/ErrorOutput/index.css

@@ -1,10 +1,10 @@
-.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;
+.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;
 }

package/src/components/ErrorOutput/index.js

@@ -1,2 +1,2 @@
-import { tags } from "ziko/dom"
+import { tags } from "ziko/dom"
 export const ErrorOutput = (err) => tags.div({ class: "error-output" }, err.toString())

package/src/components/Header/index.css

@@ -1,47 +1,47 @@
-/* --- HEADER & TOOLBAR --- */
-
-.ziko-notebook .header {
-  border-bottom: 1px solid var(--border-color);
-  background: #ffffff;
-  padding: 10px 16px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  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: baseline;
-  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;
+/* --- HEADER & TOOLBAR --- */
+
+.ziko-notebook .header {
+  border-bottom: 1px solid var(--border-color);
+  background: #ffffff;
+  padding: 10px 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  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: baseline;
+  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;
 }

package/src/components/Header/index.js

@@ -1,48 +1,48 @@
-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, title : 'Run All' }, PlayForward());
-  const clearBtn = Button({ onclick: actions.clearOutputs, title : 'Clear Outputs' }, Eraser());
-  const addCodeBtn = Button({ onclick: actions.addCode, title : 'Add Code'}, Plus());
-  const addMdBtn = Button({ onclick: actions.addMarkdown, title : 'Add Markdown' }, FileText());
-  const deleteActiveBtn = Button({ onclick: actions.deleteActive, title : 'Delete Active cell' }, Trash2());
-  const exportBtn = Button({ onclick: actions.exportData, title : 'Export Data' }, Download());
-
-  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;
-  });
-
-  statusBadge.unmount()
-
-  return div({ class: 'header' },
-    // div({ class: 'brand' }, '</>', statusBadge),
-    div({ class: 'toolbar' }, 
-      runAllBtn, clearBtn, addCodeBtn, addMdBtn, deleteActiveBtn, exportBtn
-    )
-  ).element;
+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, title : 'Run All' }, PlayForward());
+  const clearBtn = Button({ onclick: actions.clearOutputs, title : 'Clear Outputs' }, Eraser());
+  const addCodeBtn = Button({ onclick: actions.addCode, title : 'Add Code'}, Plus());
+  const addMdBtn = Button({ onclick: actions.addMarkdown, title : 'Add Markdown' }, FileText());
+  const deleteActiveBtn = Button({ onclick: actions.deleteActive, title : 'Delete Active cell' }, Trash2());
+  const exportBtn = Button({ onclick: actions.exportData, title : 'Export Data' }, Download());
+
+  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;
+  });
+
+  statusBadge.unmount()
+
+  return div({ class: 'header' },
+    // div({ class: 'brand' }, '</>', statusBadge),
+    div({ class: 'toolbar' }, 
+      runAllBtn, clearBtn, addCodeBtn, addMdBtn, deleteActiveBtn, exportBtn
+    )
+  ).element;
 }