@zikojs/notebook 0.7.0 → 0.7.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zikojs/notebook",
-  "version": "0.7.0",
+  "version": "0.7.2",
   "description": "",
   "type": "module",
   "publishConfig": {

package/src/components.js

@@ -34,7 +34,7 @@ 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 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");

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/index.d.ts

@@ -1,2 +1,5 @@
 import type { UIElement } from 'ziko/dom/UIElement' 
-export declare function Notebook() : UIElement
+export declare class UINotebook extends UIElement{
+
+}
+export declare function Notebook() : UINotebook

package/src/main.js

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

package/src/notebook.js

@@ -2,6 +2,7 @@ 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'
 
 export class UINotebook extends UIElement{
   constructor({
@@ -11,9 +12,11 @@ export class UINotebook extends UIElement{
     codeMirrorConfig = {},
     codeMirrorPlugins = [],
     minLines = 3,
-    maxCells = Infinity
+    maxCells = Infinity,
+    showHeader = false
   } = {}) {
     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 +31,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 => ({
@@ -71,6 +74,8 @@ export class UINotebook extends UIElement{
       }
     });
 
+    if(!showHeader) this.header.style.display = 'none'
+
     this.append(
       this.header, 
       tags.div({ class: "notebook" }, 
@@ -341,4 +346,6 @@ export class UINotebook extends UIElement{
       return exportedCell;
     });
   }
-}
+}
+
+export const Notebook = call_with_optional_props(UINotebook)