@zikojs/notebook 0.14.1 → 0.15.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zikojs/notebook",
-  "version": "0.14.1",
+  "version": "0.15.0",
   "description": "A lightweight, extensible JavaScript notebook component with Markdown, executable cells, persistent state, and pluggable runtimes.",
   "type": "module",
   "publishConfig": {
@@ -41,16 +41,15 @@
   "dependencies": {
     "@codemirror/autocomplete": "^6.20.3",
     "@codemirror/commands": "^6.11.0",
-    "@codemirror/lang-javascript": "^6.2.5",
+    "@codemirror/lang-javascript": "latest",
     "@codemirror/lang-markdown": "^6.5.2",
     "@codemirror/language": "^6.12.4",
     "@codemirror/state": "^6.7.4",
     "@codemirror/view": "^6.43.11",
-    "@zikojs/lucide": "^0.2.2",
     "@zikojs/console": "^0.8.0",
+    "@zikojs/lucide": "^0.2.2",
     "acorn": "^8.18.0",
     "codemirror": "^6.0.2",
-    "lucide": "^1.44.0",
     "rehype-stringify": "^10.0.1",
     "remark": "^15.0.1",
     "remark-rehype": "^11.1.2",

package/src/code-editor/index.js

@@ -1,7 +1,22 @@
-import { EditorView, keymap, lineNumbers, highlightActiveLine } from "@codemirror/view";
+import {
+  EditorView,
+  keymap,
+  lineNumbers,
+  highlightActiveLine,
+} from "@codemirror/view";
 import { EditorState, Compartment } from "@codemirror/state";
-import { defaultKeymap, history, historyKeymap, indentWithTab } from "@codemirror/commands";
-import { bracketMatching, indentUnit, syntaxHighlighting, defaultHighlightStyle } from "@codemirror/language";
+import {
+  defaultKeymap,
+  history,
+  historyKeymap,
+  indentWithTab,
+} from "@codemirror/commands";
+import {
+  bracketMatching,
+  indentUnit,
+  syntaxHighlighting,
+  defaultHighlightStyle,
+} from "@codemirror/language";
 import { closeBrackets, closeBracketsKeymap } from "@codemirror/autocomplete";
 import { javascript } from "@codemirror/lang-javascript";
 import { markdown } from "@codemirror/lang-markdown";
@@ -9,7 +24,6 @@ import { tags } from "ziko/dom";
 
 const { div } = tags;
 
-
 const getRuntimePlugin = (runtime, runtimePlugins = []) =>
   runtimePlugins.find((plugin) => plugin?.name === runtime);
 
@@ -39,7 +53,7 @@ export function createCodeEditor(app, cellData, actions) {
   const buildPluginKeymap = () => {
     const bindings = [];
 
-    app.codeMirrorPlugins.forEach(plugin => {
+    app.codeMirrorPlugins.forEach((plugin) => {
       if (plugin && typeof plugin === "object" && plugin.extraKeys) {
         Object.entries(plugin.extraKeys).forEach(([key, run]) => {
           bindings.push({
@@ -47,7 +61,7 @@ export function createCodeEditor(app, cellData, actions) {
             run: () => {
               run();
               return true;
-            }
+            },
           });
         });
       }
@@ -60,12 +74,49 @@ export function createCodeEditor(app, cellData, actions) {
     if (view) return;
 
     const shortcutKeymap = keymap.of([
+      {
+        key: "Ctrl-ArrowDown",
+        run: () => actions.moveToAdjacentCell(1),
+      },
+      {
+        key: "Ctrl-ArrowUp",
+        run: () => actions.moveToAdjacentCell(-1),
+      },
+      {
+        key: "ArrowDown",
+        run: (editorView) => {
+          const selection = editorView.state.selection.main;
+          const line = editorView.state.doc.lineAt(selection.head);
+
+          if (
+            selection.empty &&
+            line.number === editorView.state.doc.lines
+          ) {
+            return actions.moveToAdjacentCell(1);
+          }
+
+          return false;
+        },
+      },
+      {
+        key: "ArrowUp",
+        run: (editorView) => {
+          const selection = editorView.state.selection.main;
+          const line = editorView.state.doc.lineAt(selection.head);
+
+          if (selection.empty && line.number === 1) {
+            return actions.moveToAdjacentCell(-1);
+          }
+
+          return false;
+        },
+      },
       {
         key: "Shift-Enter",
         run: () => {
           actions.runCode(true);
           return true;
-        }
+        },
       },
       {
         key: "Ctrl-Enter",
@@ -73,7 +124,7 @@ export function createCodeEditor(app, cellData, actions) {
         run: () => {
           actions.runCode(false);
           return true;
-        }
+        },
       },
       {
         key: "Ctrl-Shift-d",
@@ -81,7 +132,7 @@ export function createCodeEditor(app, cellData, actions) {
         run: () => {
           app.notebookGlobalShortcuts.deleteActive();
           return true;
-        }
+        },
       },
       {
         key: "Ctrl-Shift-m",
@@ -89,7 +140,7 @@ export function createCodeEditor(app, cellData, actions) {
         run: () => {
           app.notebookGlobalShortcuts.addMdBelow();
           return true;
-        }
+        },
       },
       {
         key: "Ctrl-Shift-y",
@@ -97,14 +148,13 @@ export function createCodeEditor(app, cellData, actions) {
         run: () => {
           app.notebookGlobalShortcuts.addCodeBelow();
           return true;
-        }
+        },
       },
       indentWithTab,
       ...buildPluginKeymap(),
       ...closeBracketsKeymap,
       ...defaultKeymap,
       ...historyKeymap,
-      
     ]);
 
     const extraExtensions = Array.isArray(app.codeMirrorConfig)
@@ -114,39 +164,38 @@ export function createCodeEditor(app, cellData, actions) {
     const state = EditorState.create({
       doc: cellData.code,
       extensions: [
-        lineNumbers(),
+        // lineNumbers(),
         highlightActiveLine(),
+        // EditorView.theme({
+        //   "&": {
+        //     fontFamily: '"Fira Code", SFMono-Regular, Consolas, monospace',
+        //     fontSize: "13px",
+        //     lineHeight: "17px",
+        //   },
+        //   ".cm-scroller, .cm-content, .cm-line, .cm-gutterElement": {
+        //     lineHeight: "17px",
+        //   },
+        // }),
 
         history(),
         bracketMatching(),
         closeBrackets(),
-
         syntaxHighlighting(defaultHighlightStyle),
-
         shortcutKeymap,
-
         EditorView.lineWrapping,
-
         indentUnit.of("  "),
         EditorState.tabSize.of(2),
-
         languageCompartment.of(
-  languageFor(cellData.type, cellData.runtime, app.runtimePlugins)
-),
+          languageFor(cellData.type, cellData.runtime, app.runtimePlugins),
+        ),
 
-themeCompartment.of(
-  themeFor(cellData.runtime, app.runtimePlugins)
-),
+        themeCompartment.of(themeFor(cellData.runtime, app.runtimePlugins)),
 
-        readOnlyCompartment.of(
-          EditorState.readOnly.of(cellData.readonly)
-        ),
+        readOnlyCompartment.of(EditorState.readOnly.of(cellData.readonly)),
 
-        editableCompartment.of(
-          EditorView.editable.of(!cellData.readonly)
-        ),
+        editableCompartment.of(EditorView.editable.of(!cellData.readonly)),
 
-        EditorView.updateListener.of(update => {
+        EditorView.updateListener.of((update) => {
           if (update.docChanged) {
             cellData.code = update.state.doc.toString();
           }
@@ -155,24 +204,23 @@ themeCompartment.of(
         EditorView.domEventHandlers({
           focus: () => {
             actions.setActive();
-          }
+          },
         }),
 
-        ...extraExtensions
-      ]
+        ...extraExtensions,
+      ],
     });
 
     view = new EditorView({
       state,
-      parent: editorDom.element
+      parent: editorDom.element,
     });
 
     const lineHeight = view.defaultLineHeight || 19;
 
-    view.dom.style.minHeight =
-      `${Math.ceil(app.minLines * lineHeight + 8)}px`;
+    view.dom.style.minHeight = `${Math.ceil(app.minLines * lineHeight + 8)}px`;
 
-    app.codeMirrorPlugins.forEach(plugin => {
+    app.codeMirrorPlugins.forEach((plugin) => {
       if (typeof plugin === "function") {
         plugin(view);
       }
@@ -182,10 +230,23 @@ themeCompartment.of(
   return {
     dom: editorDom.element,
 
-    getValue: () =>
-      view
-        ? view.state.doc.toString()
-        : cellData.code,
+    getValue: () => (view ? view.state.doc.toString() : cellData.code),
+
+    focusAt: (position) => {
+      requestAnimationFrame(() => {
+        if (!view) return;
+
+        const cursor = Math.max(
+          0,
+          Math.min(position, view.state.doc.length),
+        );
+
+        view.dispatch({
+          selection: { anchor: cursor },
+        });
+        view.focus();
+      });
+    },
 
     sync: (isActive, isMarkdownView) => {
       if (!isMarkdownView) {
@@ -195,21 +256,25 @@ themeCompartment.of(
           view.dispatch({
             effects: [
               languageCompartment.reconfigure(
-                languageFor(cellData.type, cellData.runtime, app.runtimePlugins)
+                languageFor(
+                  cellData.type,
+                  cellData.runtime,
+                  app.runtimePlugins,
+                ),
               ),
 
               themeCompartment.reconfigure(
-                themeFor(cellData.runtime, app.runtimePlugins)
+                themeFor(cellData.runtime, app.runtimePlugins),
               ),
 
               readOnlyCompartment.reconfigure(
-                EditorState.readOnly.of(cellData.readonly)
+                EditorState.readOnly.of(cellData.readonly),
               ),
 
               editableCompartment.reconfigure(
-                EditorView.editable.of(!cellData.readonly)
-              )
-            ]
+                EditorView.editable.of(!cellData.readonly),
+              ),
+            ],
           });
 
           const currentValue = view.state.doc.toString();
@@ -219,8 +284,8 @@ themeCompartment.of(
               changes: {
                 from: 0,
                 to: currentValue.length,
-                insert: cellData.code
-              }
+                insert: cellData.code,
+              },
             });
           }
         }
@@ -232,6 +297,6 @@ themeCompartment.of(
         view.destroy();
         view = null;
       }
-    }
+    },
   };
-}
+}

package/src/compiler/evaluate.js

@@ -17,12 +17,14 @@ export const evaluateCodeAsync = async (
     importMap = {},
     plugins = [],
     runtime = null,
+    cdnFallback = true,
   } = {},
   scope,
 ) => {
   const validScope = scope || Object.create(null);
+  const importScope = Object.create(null);
 
-  scope.console = Console
+  validScope.console = Console;
 
   const context = {
     TARGET,
@@ -30,6 +32,7 @@ export const evaluateCodeAsync = async (
     importMap,
     plugins,
     runtime,
+    cdnFallback
   };
 
   const selectedPlugin = plugins.find(
@@ -70,6 +73,8 @@ export const evaluateCodeAsync = async (
   {
     importMap,
     plugins,
+    cdnFallback,
+    importScopeIdentifier: "__imports__",
   },
 );
 // console.log(compiledCode)
@@ -77,6 +82,7 @@ export const evaluateCodeAsync = async (
   const runCell = new Function(
     "TARGET",
     "__scope__",
+    "__imports__",
     `
     // Bind the active TARGET for this cell evaluation
     if (typeof __Ziko__ !== "undefined" && __Ziko__.__Config__) {
@@ -89,9 +95,11 @@ export const evaluateCodeAsync = async (
     return (async () => {
       with (__scope__) {
         return await (async () => {
-          ${compiledCode}
+          with (__imports__) {
+            ${compiledCode}
+          }
         })();
-      }
+        }
     })();
     `,
   );
@@ -99,6 +107,7 @@ export const evaluateCodeAsync = async (
   let result = await runCell(
     TARGET,
     validScope,
+    importScope,
   );
 
   for (const plugin of plugins) {

package/src/compiler/imports.js

@@ -1,5 +1,42 @@
 
 const CDN = "https://esm.sh/";
+const MANIFEST_FILE = "ziko-notebook-imports.json";
+const isProductionBuild =
+  typeof import.meta.env !== "undefined" && import.meta.env.PROD;
+
+let buildImportMapPromise;
+
+const loadBuildImportMap = () => {
+  if (!isProductionBuild || typeof document === "undefined") {
+    return Promise.resolve({});
+  }
+
+  if (!buildImportMapPromise) {
+    const manifestUrl = new URL(MANIFEST_FILE, document.baseURI);
+
+    buildImportMapPromise = fetch(manifestUrl).then(async (response) => {
+      if (response.status === 404) {
+        return {};
+      }
+
+      if (!response.ok) {
+        throw new Error(
+          `Failed to load the notebook import map: ${response.status} ${response.statusText}`,
+        );
+      }
+
+      const imports = await response.json();
+
+      if (!imports || typeof imports !== "object" || Array.isArray(imports)) {
+        throw new TypeError("The notebook import map must be a JSON object.");
+      }
+
+      return imports;
+    });
+  }
+
+  return buildImportMapPromise;
+};
 
 const isURL = (source) =>
   /^(?:https?:\/\/|data:|blob:)/i.test(source);
@@ -16,8 +53,10 @@ export const resolveImport = async (
     importMap = {},
     plugins = [],
     resolverEndpoint = "/__notebook_resolve",
+    cdnFallback = true,
   } = {},
 ) => {
+  // Preserve explicit mappings, including package subpaths.
   if (importMap[source]) {
     return importMap[source];
   }
@@ -26,6 +65,7 @@ export const resolveImport = async (
     return source;
   }
 
+  // Preserve runtime-specific and custom resolution hooks.
   for (const plugin of plugins) {
     if (typeof plugin.resolveImport !== "function") {
       continue;
@@ -38,8 +78,17 @@ export const resolveImport = async (
     }
   }
 
+  const buildImportMap = await loadBuildImportMap();
+
+  if (typeof buildImportMap[source] === "string") {
+    return buildImportMap[source];
+  }
+
+  // Ask the host dev server to resolve installed packages.
   try {
-    const params = new URLSearchParams({ specifier: source });
+    const params = new URLSearchParams({
+      specifier: source,
+    });
 
     const response = await fetch(
       `${resolverEndpoint}?${params.toString()}`,
@@ -56,9 +105,19 @@ export const resolveImport = async (
     // The Vite endpoint may not be available outside development.
   }
 
-  return `${CDN}${source}`;
+  if (cdnFallback) {
+    return `${CDN}${source}`;
+  }
+
+  throw new Error(
+    `Cannot resolve "${source}" locally. ` +
+    `Install the package or provide an importMap entry. ` +
+    `CDN fallback is disabled.`,
+  );
 };
 
+// Keep your existing rewriteImportNode implementation below.
+
 export const rewriteImportNode = async (
   node,
   code,
@@ -68,6 +127,8 @@ export const rewriteImportNode = async (
     node.source.value,
     context,
   );
+  const importScope =
+    context.importScopeIdentifier || "__scope__";
 
   // Safely quote the URL in generated JavaScript.
   const url = JSON.stringify(source);
@@ -96,7 +157,7 @@ export const rewriteImportNode = async (
 
   if (namespaceId) {
     return (
-      `__scope__.${namespaceId} = ` +
+      `${importScope}.${namespaceId} = ` +
       `await import(${url});`
     );
   }
@@ -109,17 +170,19 @@ export const rewriteImportNode = async (
 
   if (defaultImportName) {
     lines.push(
-      `__scope__.${defaultImportName} = ` +
+      `${importScope}.${defaultImportName} = ` +
       `${tmp}.default ?? ${tmp};`,
     );
   }
 
   for (const { imported, local } of namedImports) {
     lines.push(
-      `__scope__.${local} = ` +
+      `${importScope}.${local} = ` +
       `${tmp}[${JSON.stringify(imported)}] !== undefined ` +
       `? ${tmp}[${JSON.stringify(imported)}] ` +
-      `: (${tmp}.default ?? ${tmp});`,
+      `: (${tmp}.default?.[${JSON.stringify(imported)}] !== undefined ` +
+      `? ${tmp}.default[${JSON.stringify(imported)}] ` +
+      `: (${tmp}.default ?? ${tmp}));`,
     );
   }
 

package/src/compiler/transform.js

@@ -17,6 +17,7 @@ export const transformImportsAndScope = async (
     importMap = {},
     plugins = [],
     resolverEndpoint,
+    importScopeIdentifier = "__scope__",
   } = {},
 ) => {
   try {
@@ -30,6 +31,7 @@ export const transformImportsAndScope = async (
       importMap,
       plugins,
       resolverEndpoint,
+      importScopeIdentifier,
     };
 
     const modifications = [];
@@ -95,6 +97,8 @@ export const transformImportsAndScope = async (
         transformedCode.slice(modification.end);
     }
 
+    console.log(transformedCode)
+
     return transformedCode;
   } catch (error) {
     if (

package/src/components/CellItem/index.js

@@ -46,16 +46,16 @@ export function CellItem({ cellData, app, store }) {
     runtimePlugins: app.runtimePlugins 
   });
 
-  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);
+  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._outputGrid = outputGrid.element;
+  cellData._outputRow = outputRow.element;
   cellData._setIn = setIn;
 
   app._refreshCell(cellData);

package/src/components/MarkdownView/index.css

@@ -1,7 +1,8 @@
 /* --- MARKDOWN --- */
 
 .ziko-notebook .markdown-rendered-cell {
-  grid-column: 1 / 3;
+  flex: 1 1 0;
+  min-width: 0;
   padding: 8px 12px;
   cursor: pointer;
   min-height: 38px;

package/src/components/MarkdownView/index.js

@@ -33,7 +33,9 @@ export function MarkdownView({
     content
   );
 
-  wrap.onClick(() => actions.editMarkdown());
+  wrap.element.addEventListener("dblclick", () =>
+    actions.editMarkdown()
+  );
 
   return wrap.element;
 }

package/src/index.css

@@ -23,6 +23,10 @@
   display: flex;
   flex-direction: column;
   gap: 12px;
+  overflow: auto;
+  /* max-height: 100vh; */
+  /* scrollbar-color: rebeccapurple transparent; */
+  /* scrollbar-color: var(--prompt-in) transparent; */
 }
 
 .ziko-notebook .cell {
@@ -32,7 +36,7 @@
   border-left: 4px solid transparent;
   border-radius: 6px;
   padding: 8px;
-  gap: 8px;
+  gap: 2px;
   background: #ffffff;
   transition: border-color 0.15s ease, box-shadow 0.15s ease;
   position: relative;
@@ -43,17 +47,15 @@
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
 }
 
-.ziko-notebook .cell-input-grid {
-  display: grid;
-  grid-template-columns: 56px 1fr auto;
+.ziko-notebook .cell-input-row {
+  display: flex;
   align-items: flex-start;
   gap: 8px;
   width: 100%;
 }
 
-.ziko-notebook .cell-output-grid {
-  display: grid;
-  grid-template-columns: 56px 1fr;
+.ziko-notebook .cell-output-row {
+  display: flex;
   align-items: flex-start;
   gap: 8px;
   width: 100%;
@@ -81,7 +83,9 @@
   border-radius: 4px;
   background: var(--bg-editor);
   overflow: hidden;
-  width: 100%;
+  flex: 1 1 0;
+  min-width: 0;
+  width: auto;
   transition: border-color 0.15s ease;
 }
 
@@ -111,13 +115,10 @@
   /* align-items: center; */
   align-items: baseline;
   justify-content: flex-end;
-  grid-column: 1 / -1;
-  gap: 4px;
-  flex-shrink: 0;
+  gap: 2px;
   flex-wrap: wrap;
-  /* border-bottom: 1px solid #f1f5f9; */
-  padding-bottom: 6px;
-  margin-bottom: 2px;
+  margin: 0;
+  padding: 0;
 }
 
 .ziko-notebook .cm-line{
@@ -127,7 +128,9 @@
 /* --- OUTPUT --- */
 
 .ziko-notebook .output-wrapper {
-  width: 100%;
+  flex: 1 1 0;
+  min-width: 0;
+  width: auto;
   padding: 4px 0;
 }
 
@@ -151,17 +154,23 @@
     align-items: baseline;
   }
 
-  .ziko-notebook .cell-input-grid {
-    grid-template-columns: 42px 1fr;
-    grid-template-rows: auto auto;
-  }
-
-  .ziko-notebook .cell-output-grid {
-    grid-template-columns: 42px 1fr;
-  }
-
   .ziko-notebook .prompt {
     font-size: 10px;
     padding-top: 6px;
   }
-}
+}
+
+
+/* TEMP */
+
+.ziko-notebook .cm-editor{
+  margin: 1px;
+  outline: none;
+}
+.ziko-notebook .cm-scroller{
+  margin: 1px;
+  outline: none;
+}
+.ziko-notebook .cm-line{
+  margin: 1px;
+}

package/src/notebook.js

@@ -33,6 +33,7 @@ export class UINotebook extends UIElement {
   constructor({
     cells: initialCells = [],
     importMap = {},
+    cdnFallback = true,
     runCells = true,
     minLines = 3,
     maxCells = Infinity,
@@ -58,6 +59,7 @@ export class UINotebook extends UIElement {
     this.resetScope();
 
     this.importMap = importMap;
+    this.cdnFallback = cdnFallback;
     this.runtimePlugins = runtimePlugins;
     this.codeMirrorConfig = codeMirrorConfig;
     this.codeMirrorPlugins = codeMirrorPlugins;
@@ -224,7 +226,7 @@ export class UINotebook extends UIElement {
         _inPrompt: null,
         _outPrompt: null,
         _bodySlot: null,
-        _outputGrid: null,
+        _outputRow: null,
         _outputRef: null,
       };
     });
@@ -312,6 +314,23 @@ export class UINotebook extends UIElement {
     return {
       setActive: () => app.setActiveCell(cellData.id),
 
+      moveToAdjacentCell: (direction) => {
+        const cells = app.store.get("cells");
+        const index = cells.findIndex(
+          (cell) => cell.id === cellData.id
+        );
+        const target = cells[index + direction];
+
+        if (!target) return false;
+
+        app.focusCell(target.id);
+        target._editor.focusAt(
+          direction > 0 ? 0 : target._editor.getValue().length
+        );
+
+        return true;
+      },
+
       runCode: async (autoNext = true) => {
         // If this cell's code is still loading, wait for it.
         await app._resolveCellCode(cellData);
@@ -349,6 +368,7 @@ export class UINotebook extends UIElement {
             cellData._outputRef,
             {
               importMap: app.importMap,
+              cdnFallback: app.cdnFallback,
               plugins: app.runtimePlugins,
               runtime: cellData.runtime,
             },
@@ -484,8 +504,8 @@ export class UINotebook extends UIElement {
     const showOutput =
       cellData.type === "code" && cellData.hasDomOutput;
 
-    cellData._outputGrid.style.display =
-      showOutput ? "grid" : "none";
+    cellData._outputRow.style.display =
+      showOutput ? "flex" : "none";
 
     cellData._outPrompt.textContent = `Out ${countText}:`;
   }
@@ -542,7 +562,11 @@ export class UINotebook extends UIElement {
   }
 
   this.store.set("activeCellId", id);
-  this._refreshCell(cell);
+  cells.forEach((currentCell) => {
+    if (currentCell._dom) {
+      this._refreshCell(currentCell);
+    }
+  });
 
   // Scroll the target cell into view when it is outside the viewport.
   requestAnimationFrame(() => {
@@ -609,7 +633,7 @@ addCell(type = "code", initialCode = null, afterId = null, readonly = false) {
     _inPrompt: null,
     _outPrompt: null,
     _bodySlot: null,
-    _outputGrid: null,
+    _outputRow: null,
     _outputRef: null,
   };