@zikojs/notebook 0.7.3 → 0.9.0

package/src/components/ErrorOutput/index.css

@@ -0,0 +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;
+}

package/src/components/ErrorOutput/index.js

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

package/src/components/Header/index.css

@@ -0,0 +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: 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;
+}

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, 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;
+  });
+
+  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,133 @@
+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,
+  remarkPlugins = [],
+  rehypePlugins = [],
+}) {
+  const content = div();
+
+  remark()
+    .use(remarkPlugins)
+    .use(remarkRehype, { allowDangerousHtml: true })
+    .use(rehypePlugins)
+    .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;
+}
+
+
+
+// import { remark } from "remark";
+// import remarkRehype from "remark-rehype";
+// import rehypeStringify from "rehype-stringify";
+
+// import { tags } from "ziko/dom";
+
+// const { div } = tags;
+
+// /**
+//  * Activate elements inserted through innerHTML.
+//  *
+//  * Scripts created by innerHTML are inert, so recreate them
+//  * as real DOM nodes. This also handles external scripts.
+//  */
+// async function activateHTML(container) {
+//   const scripts = [
+//     ...container.querySelectorAll("script"),
+//   ];
+
+//   for (const oldScript of scripts) {
+//     const script = document.createElement("script");
+
+//     for (const attribute of oldScript.attributes) {
+//       script.setAttribute(
+//         attribute.name,
+//         attribute.value
+//       );
+//     }
+
+//     script.textContent = oldScript.textContent;
+
+//     oldScript.replaceWith(script);
+
+//     if (script.src) {
+//       await new Promise((resolve, reject) => {
+//         script.addEventListener(
+//           "load",
+//           resolve,
+//           { once: true }
+//         );
+
+//         script.addEventListener(
+//           "error",
+//           reject,
+//           { once: true }
+//         );
+//       });
+//     }
+//   }
+// }
+
+// export function MarkdownView({
+//   cellData,
+//   actions,
+//   remarkPlugins = [],
+//   rehypePlugins = [],
+// }) {
+//   const content = div();
+
+//   remark()
+//     .use(remarkPlugins)
+//     .use(remarkRehype, {
+//       allowDangerousHtml: true,
+//     })
+//     .use(rehypePlugins)
+//     .use(rehypeStringify)
+//     .process(cellData.code || "*Empty Markdown Cell*")
+//     .then(async (file) => {
+//       content.element.innerHTML = String(file);
+
+//       await activateHTML(content.element);
+//     })
+//     .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,21 @@
+@import url('./ErrorOutput/index.css');
+@import url('./Button/index.css');
+@import url('./Header/index.css');
+@import url('./MarkdownView//index.css');
+
+.ziko-notebook .runtime-select {
+  font-family: inherit;
+  font-size: 11px;
+  padding: 2px 4px;
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+  background: #ffffff;
+  color: #1e293b;
+  cursor: pointer;
+  height: 24px;
+}
+
+.ziko-notebook .runtime-select:focus {
+  outline: none;
+  border-color: var(--primary);
+}

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 --- */
 
@@ -344,7 +141,7 @@
 
   .ziko-notebook .toolbar {
     width: 100%;
-    justify-content: flex-start;
+    justify-content: center;
   }
 
   .ziko-notebook .cell-input-grid {