@zikojs/notebook 0.7.1 → 0.7.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zikojs/notebook",
-  "version": "0.7.1",
+  "version": "0.7.3",
   "description": "",
   "type": "module",
   "publishConfig": {
@@ -23,7 +23,7 @@
     },
     "./no-css": {
       "import": "./src/main.js",
-      "types": "./src/main.d.ts"
+      "types": "./src/index.d.ts"
     },
     "./style": {
       "import": "./src/index.css"

package/src/codeEditor.js

@@ -13,7 +13,7 @@ const languageFor = (type) =>
   type === "markdown" ? markdown() : javascript();
 
 export function createCodeEditor(app, cellData, actions) {
-  const editorDom = div({ class: "input-wrapper" }).element;
+  const editorDom = div({ class: "input-wrapper" });
 
   const languageCompartment = new Compartment();
   const readOnlyCompartment = new Compartment();
@@ -143,7 +143,7 @@ export function createCodeEditor(app, cellData, actions) {
 
     view = new EditorView({
       state,
-      parent: editorDom
+      parent: editorDom.element
     });
 
     const lineHeight = view.defaultLineHeight || 19;
@@ -159,7 +159,7 @@ export function createCodeEditor(app, cellData, actions) {
   };
 
   return {
-    dom: editorDom,
+    dom: editorDom.element,
 
     getValue: () =>
       view

package/src/components.js

@@ -31,17 +31,17 @@ export const Button = ({ class: className = "", title = "", disabled = false, on
   button({ class: `btn ${className}`, title, disabled, onclick }, ...children);
 
 export function Header({ store, actions }) {
-  const statusBadge = span({ class: "status-badge" }, Loader2(), span('Loading ...')).element;
+  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 }, Play(), "Add Code");
+  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.lastChild.textContent = `Executing Queue (${q.currentIndex + 1}/${q.total})`;
+    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;
@@ -57,7 +57,7 @@ export function Header({ store, actions }) {
 }
 
 export function MarkdownView({ cellData, actions }) {
-  const content = div().element;
+  const content = div();
   
   // Process Markdown asynchronously using Remark + Rehype
   remark()
@@ -65,10 +65,10 @@ export function MarkdownView({ cellData, actions }) {
     .use(rehypeStringify)
     .process(cellData.code || "*Empty Markdown Cell*")
     .then((file) => {
-      content.innerHTML = String(file);
+      content.element.innerHTML = String(file);
     })
     .catch((err) => {
-      content.innerHTML = `<div class="error-output">Markdown rendering error: ${err.message}</div>`;
+      content.element.innerHTML = `<div class="error-output">Markdown rendering error: ${err.message}</div>`;
     });
   
   const wrap = div({ class: "markdown-rendered-cell markdown-body" }, content);
@@ -150,30 +150,29 @@ export function CellControls({ cellData, store, actions }) {
 }
 
 export function CellItem({ cellData, app, store }) {
-  const outputRef = div({ class: "output-area" }).element;
-  if (cellData.outputNode) outputRef.appendChild(cellData.outputNode);
-  cellData._outputRef = outputRef;
+  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);
 
-  const inPrompt = span({ class: "prompt" }).element;
-  const outPrompt = span({ class: "prompt out" }).element;
-  const bodySlot = div().style({ display : 'contents'}).element;
+  const inPrompt = span({ class: "prompt" });
+  const outPrompt = span({ class: "prompt out" });
+  const bodySlot = div().style({ display : 'contents'});
   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 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));
-  // root.onclick = () => app.setActiveCell(cellData.id);
 
   cellData._dom = root.element;
-  cellData._inPrompt = inPrompt;
-  cellData._outPrompt = outPrompt;
-  cellData._bodySlot = bodySlot;
-  cellData._outputGrid = outputGrid;
+  cellData._inPrompt = inPrompt.element;
+  cellData._outPrompt = outPrompt.element;
+  cellData._bodySlot = bodySlot.element;
+  cellData._outputGrid = outputGrid.element;
 
   app._refreshCell(cellData);
   return root.element;

package/src/index.css

@@ -1,27 +1,18 @@
-:root {
+.ziko-notebook {
   --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 {
+.ziko-notebook .header {
   border-bottom: 1px solid var(--border-color);
   background: #ffffff;
   padding: 10px 16px;
@@ -37,7 +28,7 @@ body {
   width: 100%;
 }
 
-.brand {
+.ziko-notebook .brand {
   font-weight: 600;
   font-size: 16px;
   color: #0f172a;
@@ -47,7 +38,7 @@ body {
   flex-shrink: 0;
 }
 
-.toolbar {
+.ziko-notebook .toolbar {
   display: flex;
   gap: 6px;
   align-items: center;
@@ -55,10 +46,10 @@ body {
   max-width: 100%;
 }
 
-.status-badge {
+.ziko-notebook .status-badge {
   font-size: 12px;
   font-weight: 500;
-  color: #0284c7;
+  color: var(--primary);
   background: #e0f2fe;
   padding: 4px 8px;
   border-radius: 4px;
@@ -69,7 +60,7 @@ body {
 
 /* --- NOTEBOOK & CELLS --- */
 
-.notebook {
+.ziko-notebook .notebook {
   max-width: 900px;
   margin: 16px auto;
   padding: 0 8px;
@@ -78,7 +69,7 @@ body {
   gap: 12px;
 }
 
-.cell {
+.ziko-notebook .cell {
   display: flex;
   flex-direction: column;
   border: 1px solid var(--border-color);
@@ -91,12 +82,12 @@ body {
   position: relative;
 }
 
-.cell.active {
+.ziko-notebook .cell.active {
   border-left-color: var(--primary);
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
 }
 
-.cell-input-grid {
+.ziko-notebook .cell-input-grid {
   display: grid;
   grid-template-columns: 56px 1fr auto;
   align-items: flex-start;
@@ -104,7 +95,7 @@ body {
   width: 100%;
 }
 
-.cell-output-grid {
+.ziko-notebook .cell-output-grid {
   display: grid;
   grid-template-columns: 56px 1fr;
   align-items: flex-start;
@@ -112,7 +103,7 @@ body {
   width: 100%;
 }
 
-.prompt {
+.ziko-notebook .prompt {
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
   font-size: 11px;
   color: var(--prompt-in);
@@ -123,13 +114,13 @@ body {
   font-weight: 700;
 }
 
-.prompt.out {
+.ziko-notebook .prompt.out {
   color: var(--prompt-out);
 }
 
-/* --- CODEMIRROR / INPUT --- */
+/* --- INPUT --- */
 
-.input-wrapper {
+.ziko-notebook .input-wrapper {
   border: 1px solid var(--border-color);
   border-radius: 4px;
   background: var(--bg-editor);
@@ -138,11 +129,17 @@ body {
   transition: border-color 0.15s ease;
 }
 
-.cell.active .input-wrapper {
+.ziko-notebook .cell.active .input-wrapper {
   border-color: #cbd5e1;
 }
 
-.CodeMirror {
+/*
+ * 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;
   height: auto !important;
@@ -150,17 +147,16 @@ body {
   border-radius: 4px;
 }
 
-.CodeMirror-scroll {
-  /* Overflow reset ensures height auto-fits custom minLines properly */
+.ziko-notebook .input-wrapper .CodeMirror-scroll {
   overflow-y: hidden !important;
   overflow-x: auto !important;
 }
 
-.CodeMirror-activeline-background {
+.ziko-notebook .input-wrapper .CodeMirror-activeline-background {
   background: rgba(2, 132, 199, 0.05);
 }
 
-.cell-controls {
+.ziko-notebook .cell-controls {
   display: flex;
   align-items: center;
   gap: 4px;
@@ -169,19 +165,19 @@ body {
   max-width: 120px;
 }
 
-/* --- OUTPUTS & MARKDOWN --- */
+/* --- OUTPUT --- */
 
-.output-wrapper {
+.ziko-notebook .output-wrapper {
   width: 100%;
   padding: 4px 0;
 }
 
-.output-area {
+.ziko-notebook .output-area {
   font-size: 14px;
   word-break: break-word;
 }
 
-.error-output {
+.ziko-notebook .error-output {
   color: #e11d48;
   font-family: ui-monospace, SFMono-Regular, monospace;
   white-space: pre-wrap;
@@ -192,7 +188,9 @@ body {
   border: 1px solid #fecdd3;
 }
 
-.markdown-rendered-cell {
+/* --- MARKDOWN --- */
+
+.ziko-notebook .markdown-rendered-cell {
   grid-column: 1 / 3;
   padding: 8px 12px;
   cursor: pointer;
@@ -202,56 +200,56 @@ body {
   transition: background 0.15s ease, border-color 0.15s ease;
 }
 
-.markdown-rendered-cell:hover {
+.ziko-notebook .markdown-rendered-cell:hover {
   background: #f8fafc;
   border-color: #cbd5e1;
 }
 
-.cell.active .markdown-rendered-cell {
+.ziko-notebook .cell.active .markdown-rendered-cell {
   border-color: #94a3b8;
 }
 
-.markdown-body {
+.ziko-notebook .markdown-body {
   line-height: 1.6;
 }
 
-.markdown-body h1,
-.markdown-body h2,
-.markdown-body h3 {
+.ziko-notebook .markdown-body h1,
+.ziko-notebook .markdown-body h2,
+.ziko-notebook .markdown-body h3 {
   margin-top: 8px;
   margin-bottom: 8px;
   font-weight: 600;
 }
 
-.markdown-body h1 {
+.ziko-notebook .markdown-body h1 {
   font-size: 1.5em;
   border-bottom: 1px solid var(--border-color);
   padding-bottom: 4px;
 }
 
-.markdown-body h2 {
+.ziko-notebook .markdown-body h2 {
   font-size: 1.25em;
 }
 
-.markdown-body h3 {
+.ziko-notebook .markdown-body h3 {
   font-size: 1.1em;
 }
 
-.markdown-body p {
+.ziko-notebook .markdown-body p {
   margin-bottom: 8px;
 }
 
-.markdown-body p:last-child {
+.ziko-notebook .markdown-body p:last-child {
   margin-bottom: 0;
 }
 
-.markdown-body ul,
-.markdown-body ol {
+.ziko-notebook .markdown-body ul,
+.ziko-notebook .markdown-body ol {
   padding-left: 20px;
   margin-bottom: 8px;
 }
 
-.markdown-body code {
+.ziko-notebook .markdown-body code {
   background: #f1f5f9;
   padding: 2px 4px;
   border-radius: 4px;
@@ -259,7 +257,7 @@ body {
   font-size: 0.9em;
 }
 
-.markdown-body pre {
+.ziko-notebook .markdown-body pre {
   background: #1e293b;
   color: #f8fafc;
   padding: 10px;
@@ -268,22 +266,22 @@ body {
   margin: 8px 0;
 }
 
-.markdown-body pre code {
+.ziko-notebook .markdown-body pre code {
   background: transparent;
   color: inherit;
   padding: 0;
 }
 
-.markdown-body blockquote {
+.ziko-notebook .markdown-body blockquote {
   border-left: 4px solid var(--primary);
   padding-left: 10px;
   color: #64748b;
   margin: 8px 0;
 }
 
-/* --- BUTTONS & ICONS --- */
+/* --- BUTTONS --- */
 
-.btn {
+.ziko-notebook .btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -301,60 +299,60 @@ body {
   transition: background 0.12s ease, border-color 0.12s ease;
 }
 
-.btn:hover {
+.ziko-notebook .btn:hover {
   background: #f1f5f9;
 }
 
-.btn:disabled {
+.ziko-notebook .btn:disabled {
   opacity: 0.5;
   cursor: not-allowed;
 }
 
-.btn-icon {
+.ziko-notebook .btn-icon {
   padding: 6px;
   border-radius: 4px;
 }
 
-.btn-primary {
+.ziko-notebook .btn-primary {
   background: var(--primary);
   color: #ffffff;
   border-color: var(--primary);
 }
 
-.btn-primary:hover {
+.ziko-notebook .btn-primary:hover {
   background: var(--primary-hover);
   border-color: var(--primary-hover);
 }
 
-.btn-active {
+.ziko-notebook .btn-active {
   background: #e2e8f0;
   border-color: #cbd5e1;
 }
 
-.icon {
+.ziko-notebook .icon {
   width: 14px;
   height: 14px;
   stroke-width: 2;
 }
 
-/* --- MOBILE RESPONSIVE --- */
+/* --- MOBILE --- */
 
 @media (max-width: 640px) {
-  .header {
+  .ziko-notebook .header {
     padding: 8px 12px;
   }
 
-  .toolbar {
+  .ziko-notebook .toolbar {
     width: 100%;
     justify-content: flex-start;
   }
 
-  .cell-input-grid {
+  .ziko-notebook .cell-input-grid {
     grid-template-columns: 42px 1fr;
     grid-template-rows: auto auto;
   }
 
-  .cell-controls {
+  .ziko-notebook .cell-controls {
     grid-column: 1 / -1;
     justify-content: flex-end;
     border-bottom: 1px solid #f1f5f9;
@@ -363,11 +361,11 @@ body {
     max-width: 100%;
   }
 
-  .cell-output-grid {
+  .ziko-notebook .cell-output-grid {
     grid-template-columns: 42px 1fr;
   }
 
-  .prompt {
+  .ziko-notebook .prompt {
     font-size: 10px;
     padding-top: 6px;
   }

package/src/main.js

@@ -1,2 +1 @@
-import './index.css';
 export { UINotebook } from './notebook.js';

package/src/notebook.js

@@ -2,7 +2,9 @@ import { NotebookStore } from "./store.js";
 import { Header, CellItem, MarkdownView } from "./components.js";
 import { evaluateCodeAsync } from "./transform.js";
 import { tags, UIElement } from "ziko/dom";
+import { call_with_optional_props } from 'ziko/dom/internal-utils'
 
+const { div } = tags
 export class UINotebook extends UIElement{
   constructor({
     cells: initialCells = [],
@@ -11,9 +13,11 @@ export class UINotebook extends UIElement{
     codeMirrorConfig = {},
     codeMirrorPlugins = [],
     minLines = 3,
-    maxCells = Infinity
+    maxCells = Infinity,
+    showHeader = true
   } = {}) {
     super({ element : 'div'})
+    this.setAttr({class : 'ziko-notebook'})
     this.id = crypto.randomUUID ? crypto.randomUUID() : 'nb_' + Math.random().toString(36).substring(2, 9);
     
     if (!window.__notebook_scope_map) {
@@ -28,7 +32,7 @@ export class UINotebook extends UIElement{
     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;
+    let nextCellId = startingCells.length ? Math.max(...startingCells.map(c => c.id || 0)) + 1 : 1;
 
     this.store = new NotebookStore({
       cells: startingCells.map(cell => ({
@@ -58,7 +62,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: {
@@ -71,9 +75,11 @@ export class UINotebook extends UIElement{
       }
     });
 
+    if(!showHeader) this.header.style.display = 'none'
+
     this.append(
       this.header, 
-      tags.div({ class: "notebook" }, 
+      div({ class: "notebook" }, 
       this.cellsContainer)  
     )
 
@@ -120,7 +126,7 @@ export class UINotebook extends UIElement{
           await evaluateCodeAsync(code, cellData._outputRef, app.importMap, scope);
         } catch (err) {
           hasError = true;
-          tags.div({ class: "error-output" }, err.toString()).mount(cellData._outputRef)
+          div({ class: "error-output" }, err.toString()).mount(cellData._outputRef)
         }
 
         const counter = this.store.get('executionCounter');
@@ -128,7 +134,7 @@ 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);
@@ -341,4 +347,6 @@ export class UINotebook extends UIElement{
       return exportedCell;
     });
   }
-}
+}
+
+export const Notebook = call_with_optional_props(UINotebook)