@velo-sci/notebook-svelte 0.6.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 VeloSci
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.cjs

@@ -0,0 +1,233 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  SciNotebookSvelte: () => SciNotebookSvelte,
+  createNotebookStore: () => createNotebookStore
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/sci-notebook-svelte.ts
+var import_notebook_core = require("@velo-sci/notebook-core");
+var import_notebook_renderer = require("@velo-sci/notebook-renderer");
+
+// src/stores.ts
+function createNotebookStore(engine) {
+  const notebook = createReadable(engine.getNotebook(), (set) => {
+    return engine.on("notebook:updated", (payload) => {
+      set(payload.data.notebook);
+    });
+  });
+  const cells = createReadable([...engine.getCells()], (set) => {
+    return engine.on("notebook:updated", (payload) => {
+      set([...payload.data.notebook.cells]);
+    });
+  });
+  const focusedCellId = createReadable(null, (set) => {
+    return engine.on("cell:focused", (payload) => {
+      set(payload.data.cellId);
+    });
+  });
+  return { notebook, cells, focusedCellId, engine };
+}
+function createReadable(initialValue, start) {
+  let value = initialValue;
+  const subscribers = /* @__PURE__ */ new Set();
+  let stop = null;
+  function set(newValue) {
+    value = newValue;
+    for (const sub of subscribers) {
+      sub(value);
+    }
+  }
+  return {
+    subscribe(run) {
+      subscribers.add(run);
+      run(value);
+      if (subscribers.size === 1) {
+        stop = start(set);
+      }
+      return () => {
+        subscribers.delete(run);
+        if (subscribers.size === 0 && stop) {
+          stop();
+          stop = null;
+        }
+      };
+    }
+  };
+}
+
+// src/sci-notebook-svelte.ts
+var SciNotebookSvelte = class {
+  engine;
+  container;
+  pipeline;
+  options;
+  unsubscribers = [];
+  destroyed = false;
+  store;
+  constructor(options) {
+    this.options = options;
+    if (typeof options.target === "string") {
+      const el = document.querySelector(options.target);
+      if (!el) throw new Error(`SciNotebookSvelte: target "${options.target}" not found`);
+      this.container = el;
+    } else {
+      this.container = options.target;
+    }
+    if (options.engine) {
+      this.engine = options.engine;
+    } else {
+      this.engine = (0, import_notebook_core.createNotebook)({
+        notebook: options.notebook,
+        config: { plugins: options.plugins }
+      });
+    }
+    this.pipeline = new import_notebook_renderer.RenderPipeline();
+    this.store = createNotebookStore(this.engine);
+    this.render();
+    this.bindEvents();
+  }
+  getEngine() {
+    return this.engine;
+  }
+  getNotebook() {
+    return this.engine.getNotebook();
+  }
+  setTheme(theme) {
+    this.options.theme = theme;
+    this.container.dataset.theme = theme;
+  }
+  insertCell(index, type, source) {
+    return this.engine.insertCell(index, type, source);
+  }
+  destroy() {
+    if (this.destroyed) return;
+    this.destroyed = true;
+    for (const unsub of this.unsubscribers) unsub();
+    this.unsubscribers = [];
+    this.engine.destroy();
+    this.container.innerHTML = "";
+  }
+  render() {
+    this.container.innerHTML = "";
+    this.container.className = "sci-nb sci-nb--svelte";
+    this.container.dataset.theme = this.options.theme || "light";
+    this.container.tabIndex = 0;
+    if (this.options.showToolbar !== false) {
+      this.container.appendChild(this.createToolbar());
+    }
+    const cellsContainer = document.createElement("div");
+    cellsContainer.className = "sci-nb-cells";
+    this.container.appendChild(cellsContainer);
+    this.renderCells(cellsContainer);
+  }
+  renderCells(container) {
+    container.innerHTML = "";
+    const cells = this.engine.getCells();
+    if (cells.length === 0) {
+      container.innerHTML = `<div class="sci-nb-empty"><p>Empty notebook. Add a cell to get started.</p></div>`;
+      return;
+    }
+    for (const cell of cells) {
+      const el = document.createElement("div");
+      el.className = `sci-nb-cell sci-nb-cell--${cell.type}`;
+      el.dataset.cellId = cell.id;
+      const content = document.createElement("div");
+      content.className = "sci-nb-cell-content";
+      if (cell.editing) {
+        const editor = document.createElement("textarea");
+        editor.className = "sci-nb-cell-editor";
+        editor.value = cell.source;
+        editor.rows = Math.max(3, cell.source.split("\n").length + 1);
+        editor.addEventListener("input", () => {
+          this.engine.updateCellSource(cell.id, editor.value);
+        });
+        editor.addEventListener("keydown", (e) => {
+          if (e.key === "Escape") {
+            e.preventDefault();
+            this.engine.setViewMode(cell.id);
+          }
+        });
+        content.appendChild(editor);
+      } else {
+        content.innerHTML = this.pipeline.render(cell).html;
+        content.addEventListener("click", () => {
+          if (!this.options.readOnly) {
+            this.engine.focusCell(cell.id);
+            this.engine.setEditMode(cell.id);
+          }
+        });
+      }
+      el.appendChild(content);
+      container.appendChild(el);
+    }
+  }
+  createToolbar() {
+    const toolbar = document.createElement("div");
+    toolbar.className = "sci-nb-toolbar";
+    const nb = this.engine.getNotebook();
+    toolbar.innerHTML = `
+      <div class="sci-nb-toolbar-group">
+        <span class="sci-nb-toolbar-title">${nb.title}</span>
+      </div>
+      <div class="sci-nb-toolbar-group">
+        <button class="sci-nb-toolbar-btn" data-toolbar="undo">Undo</button>
+        <button class="sci-nb-toolbar-btn" data-toolbar="redo">Redo</button>
+        <button class="sci-nb-toolbar-btn" data-toolbar="edit-all">Edit All</button>
+        <button class="sci-nb-toolbar-btn" data-toolbar="view-all">View All</button>
+      </div>
+    `;
+    toolbar.addEventListener("click", (e) => {
+      const btn = e.target.closest("[data-toolbar]");
+      if (!btn) return;
+      switch (btn.dataset.toolbar) {
+        case "undo":
+          this.engine.undo();
+          break;
+        case "redo":
+          this.engine.redo();
+          break;
+        case "edit-all":
+          this.engine.setAllEditMode();
+          break;
+        case "view-all":
+          this.engine.setAllViewMode();
+          break;
+      }
+    });
+    return toolbar;
+  }
+  bindEvents() {
+    const unsub = this.engine.on("notebook:updated", (payload) => {
+      const cellsContainer = this.container.querySelector(".sci-nb-cells");
+      if (cellsContainer) this.renderCells(cellsContainer);
+      if (this.options.onChange) this.options.onChange(payload.data.notebook);
+    });
+    this.unsubscribers.push(unsub);
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  SciNotebookSvelte,
+  createNotebookStore
+});

package/dist/index.d.cts

@@ -0,0 +1,108 @@
+import { Notebook, Cell, EditorEngine, SciNotebookPlugin, CellType } from '@velo-sci/notebook-core';
+
+/**
+ * Svelte-compatible store interface (subscribe pattern).
+ * Works with Svelte's `$store` syntax.
+ */
+interface Readable<T> {
+    subscribe(run: (value: T) => void): () => void;
+}
+interface NotebookStore {
+    notebook: Readable<Readonly<Notebook>>;
+    cells: Readable<ReadonlyArray<Cell>>;
+    focusedCellId: Readable<string | null>;
+    engine: EditorEngine;
+}
+/**
+ * Create a Svelte-compatible store from an EditorEngine.
+ *
+ * Usage in Svelte:
+ * ```svelte
+ * <script>
+ *   import { createNotebookStore } from '@velo-sci/notebook-svelte';
+ *   const { notebook, cells, focusedCellId, engine } = createNotebookStore(myEngine);
+ * </script>
+ *
+ * <p>{$notebook.title}</p>
+ * {#each $cells as cell}
+ *   <div>{cell.source}</div>
+ * {/each}
+ * ```
+ */
+declare function createNotebookStore(engine: EditorEngine): NotebookStore;
+
+interface SciNotebookSvelteOptions {
+    /** Target DOM element or CSS selector */
+    target: HTMLElement | string;
+    /** Pre-built notebook object */
+    notebook?: Notebook;
+    /** Pre-built engine (takes priority over notebook) */
+    engine?: EditorEngine;
+    /** Plugins to register */
+    plugins?: SciNotebookPlugin[];
+    /** Theme */
+    theme?: "light" | "dark" | string;
+    /** Callback when notebook changes */
+    onChange?: (notebook: Notebook) => void;
+    /** Read-only mode */
+    readOnly?: boolean;
+    /** Show toolbar */
+    showToolbar?: boolean;
+}
+/**
+ * Svelte 5+ adapter for sci-notebook.
+ *
+ * Provides a store-based API that integrates with Svelte's reactivity.
+ * Can also be used imperatively for mounting into a DOM element.
+ *
+ * Usage (imperative):
+ * ```ts
+ * const nb = new SciNotebookSvelte({
+ *   target: '#app',
+ *   notebook: myNotebook,
+ *   theme: 'dark',
+ * });
+ * // Access stores: nb.store.notebook, nb.store.cells, nb.store.focusedCellId
+ * nb.destroy();
+ * ```
+ *
+ * Usage (Svelte component):
+ * ```svelte
+ * <script>
+ *   import { createNotebookStore } from '@velo-sci/notebook-svelte';
+ *   import { createNotebook } from '@velo-sci/notebook-core';
+ *
+ *   const engine = createNotebook({ notebook: myNotebook });
+ *   const { notebook, cells, focusedCellId } = createNotebookStore(engine);
+ * </script>
+ *
+ * <div class="sci-nb" data-theme="dark">
+ *   {#each $cells as cell, idx}
+ *     <div class="sci-nb-cell sci-nb-cell--{cell.type}">
+ *       {cell.source}
+ *     </div>
+ *   {/each}
+ * </div>
+ * ```
+ */
+declare class SciNotebookSvelte {
+    private engine;
+    private container;
+    private pipeline;
+    private options;
+    private unsubscribers;
+    private destroyed;
+    readonly store: NotebookStore;
+    constructor(options: SciNotebookSvelteOptions);
+    getEngine(): EditorEngine;
+    getNotebook(): Readonly<Notebook>;
+    setTheme(theme: string): void;
+    insertCell(index: number, type?: CellType, source?: string): Cell;
+    destroy(): void;
+    private render;
+    private renderCells;
+    private createToolbar;
+    private bindEvents;
+}
+
+export { type NotebookStore, SciNotebookSvelte, type SciNotebookSvelteOptions, createNotebookStore };

package/dist/index.d.ts

@@ -0,0 +1,108 @@
+import { Notebook, Cell, EditorEngine, SciNotebookPlugin, CellType } from '@velo-sci/notebook-core';
+
+/**
+ * Svelte-compatible store interface (subscribe pattern).
+ * Works with Svelte's `$store` syntax.
+ */
+interface Readable<T> {
+    subscribe(run: (value: T) => void): () => void;
+}
+interface NotebookStore {
+    notebook: Readable<Readonly<Notebook>>;
+    cells: Readable<ReadonlyArray<Cell>>;
+    focusedCellId: Readable<string | null>;
+    engine: EditorEngine;
+}
+/**
+ * Create a Svelte-compatible store from an EditorEngine.
+ *
+ * Usage in Svelte:
+ * ```svelte
+ * <script>
+ *   import { createNotebookStore } from '@velo-sci/notebook-svelte';
+ *   const { notebook, cells, focusedCellId, engine } = createNotebookStore(myEngine);
+ * </script>
+ *
+ * <p>{$notebook.title}</p>
+ * {#each $cells as cell}
+ *   <div>{cell.source}</div>
+ * {/each}
+ * ```
+ */
+declare function createNotebookStore(engine: EditorEngine): NotebookStore;
+
+interface SciNotebookSvelteOptions {
+    /** Target DOM element or CSS selector */
+    target: HTMLElement | string;
+    /** Pre-built notebook object */
+    notebook?: Notebook;
+    /** Pre-built engine (takes priority over notebook) */
+    engine?: EditorEngine;
+    /** Plugins to register */
+    plugins?: SciNotebookPlugin[];
+    /** Theme */
+    theme?: "light" | "dark" | string;
+    /** Callback when notebook changes */
+    onChange?: (notebook: Notebook) => void;
+    /** Read-only mode */
+    readOnly?: boolean;
+    /** Show toolbar */
+    showToolbar?: boolean;
+}
+/**
+ * Svelte 5+ adapter for sci-notebook.
+ *
+ * Provides a store-based API that integrates with Svelte's reactivity.
+ * Can also be used imperatively for mounting into a DOM element.
+ *
+ * Usage (imperative):
+ * ```ts
+ * const nb = new SciNotebookSvelte({
+ *   target: '#app',
+ *   notebook: myNotebook,
+ *   theme: 'dark',
+ * });
+ * // Access stores: nb.store.notebook, nb.store.cells, nb.store.focusedCellId
+ * nb.destroy();
+ * ```
+ *
+ * Usage (Svelte component):
+ * ```svelte
+ * <script>
+ *   import { createNotebookStore } from '@velo-sci/notebook-svelte';
+ *   import { createNotebook } from '@velo-sci/notebook-core';
+ *
+ *   const engine = createNotebook({ notebook: myNotebook });
+ *   const { notebook, cells, focusedCellId } = createNotebookStore(engine);
+ * </script>
+ *
+ * <div class="sci-nb" data-theme="dark">
+ *   {#each $cells as cell, idx}
+ *     <div class="sci-nb-cell sci-nb-cell--{cell.type}">
+ *       {cell.source}
+ *     </div>
+ *   {/each}
+ * </div>
+ * ```
+ */
+declare class SciNotebookSvelte {
+    private engine;
+    private container;
+    private pipeline;
+    private options;
+    private unsubscribers;
+    private destroyed;
+    readonly store: NotebookStore;
+    constructor(options: SciNotebookSvelteOptions);
+    getEngine(): EditorEngine;
+    getNotebook(): Readonly<Notebook>;
+    setTheme(theme: string): void;
+    insertCell(index: number, type?: CellType, source?: string): Cell;
+    destroy(): void;
+    private render;
+    private renderCells;
+    private createToolbar;
+    private bindEvents;
+}
+
+export { type NotebookStore, SciNotebookSvelte, type SciNotebookSvelteOptions, createNotebookStore };

package/dist/index.js

@@ -0,0 +1,207 @@
+// src/sci-notebook-svelte.ts
+import {
+  createNotebook
+} from "@velo-sci/notebook-core";
+import { RenderPipeline } from "@velo-sci/notebook-renderer";
+
+// src/stores.ts
+function createNotebookStore(engine) {
+  const notebook = createReadable(engine.getNotebook(), (set) => {
+    return engine.on("notebook:updated", (payload) => {
+      set(payload.data.notebook);
+    });
+  });
+  const cells = createReadable([...engine.getCells()], (set) => {
+    return engine.on("notebook:updated", (payload) => {
+      set([...payload.data.notebook.cells]);
+    });
+  });
+  const focusedCellId = createReadable(null, (set) => {
+    return engine.on("cell:focused", (payload) => {
+      set(payload.data.cellId);
+    });
+  });
+  return { notebook, cells, focusedCellId, engine };
+}
+function createReadable(initialValue, start) {
+  let value = initialValue;
+  const subscribers = /* @__PURE__ */ new Set();
+  let stop = null;
+  function set(newValue) {
+    value = newValue;
+    for (const sub of subscribers) {
+      sub(value);
+    }
+  }
+  return {
+    subscribe(run) {
+      subscribers.add(run);
+      run(value);
+      if (subscribers.size === 1) {
+        stop = start(set);
+      }
+      return () => {
+        subscribers.delete(run);
+        if (subscribers.size === 0 && stop) {
+          stop();
+          stop = null;
+        }
+      };
+    }
+  };
+}
+
+// src/sci-notebook-svelte.ts
+var SciNotebookSvelte = class {
+  engine;
+  container;
+  pipeline;
+  options;
+  unsubscribers = [];
+  destroyed = false;
+  store;
+  constructor(options) {
+    this.options = options;
+    if (typeof options.target === "string") {
+      const el = document.querySelector(options.target);
+      if (!el) throw new Error(`SciNotebookSvelte: target "${options.target}" not found`);
+      this.container = el;
+    } else {
+      this.container = options.target;
+    }
+    if (options.engine) {
+      this.engine = options.engine;
+    } else {
+      this.engine = createNotebook({
+        notebook: options.notebook,
+        config: { plugins: options.plugins }
+      });
+    }
+    this.pipeline = new RenderPipeline();
+    this.store = createNotebookStore(this.engine);
+    this.render();
+    this.bindEvents();
+  }
+  getEngine() {
+    return this.engine;
+  }
+  getNotebook() {
+    return this.engine.getNotebook();
+  }
+  setTheme(theme) {
+    this.options.theme = theme;
+    this.container.dataset.theme = theme;
+  }
+  insertCell(index, type, source) {
+    return this.engine.insertCell(index, type, source);
+  }
+  destroy() {
+    if (this.destroyed) return;
+    this.destroyed = true;
+    for (const unsub of this.unsubscribers) unsub();
+    this.unsubscribers = [];
+    this.engine.destroy();
+    this.container.innerHTML = "";
+  }
+  render() {
+    this.container.innerHTML = "";
+    this.container.className = "sci-nb sci-nb--svelte";
+    this.container.dataset.theme = this.options.theme || "light";
+    this.container.tabIndex = 0;
+    if (this.options.showToolbar !== false) {
+      this.container.appendChild(this.createToolbar());
+    }
+    const cellsContainer = document.createElement("div");
+    cellsContainer.className = "sci-nb-cells";
+    this.container.appendChild(cellsContainer);
+    this.renderCells(cellsContainer);
+  }
+  renderCells(container) {
+    container.innerHTML = "";
+    const cells = this.engine.getCells();
+    if (cells.length === 0) {
+      container.innerHTML = `<div class="sci-nb-empty"><p>Empty notebook. Add a cell to get started.</p></div>`;
+      return;
+    }
+    for (const cell of cells) {
+      const el = document.createElement("div");
+      el.className = `sci-nb-cell sci-nb-cell--${cell.type}`;
+      el.dataset.cellId = cell.id;
+      const content = document.createElement("div");
+      content.className = "sci-nb-cell-content";
+      if (cell.editing) {
+        const editor = document.createElement("textarea");
+        editor.className = "sci-nb-cell-editor";
+        editor.value = cell.source;
+        editor.rows = Math.max(3, cell.source.split("\n").length + 1);
+        editor.addEventListener("input", () => {
+          this.engine.updateCellSource(cell.id, editor.value);
+        });
+        editor.addEventListener("keydown", (e) => {
+          if (e.key === "Escape") {
+            e.preventDefault();
+            this.engine.setViewMode(cell.id);
+          }
+        });
+        content.appendChild(editor);
+      } else {
+        content.innerHTML = this.pipeline.render(cell).html;
+        content.addEventListener("click", () => {
+          if (!this.options.readOnly) {
+            this.engine.focusCell(cell.id);
+            this.engine.setEditMode(cell.id);
+          }
+        });
+      }
+      el.appendChild(content);
+      container.appendChild(el);
+    }
+  }
+  createToolbar() {
+    const toolbar = document.createElement("div");
+    toolbar.className = "sci-nb-toolbar";
+    const nb = this.engine.getNotebook();
+    toolbar.innerHTML = `
+      <div class="sci-nb-toolbar-group">
+        <span class="sci-nb-toolbar-title">${nb.title}</span>
+      </div>
+      <div class="sci-nb-toolbar-group">
+        <button class="sci-nb-toolbar-btn" data-toolbar="undo">Undo</button>
+        <button class="sci-nb-toolbar-btn" data-toolbar="redo">Redo</button>
+        <button class="sci-nb-toolbar-btn" data-toolbar="edit-all">Edit All</button>
+        <button class="sci-nb-toolbar-btn" data-toolbar="view-all">View All</button>
+      </div>
+    `;
+    toolbar.addEventListener("click", (e) => {
+      const btn = e.target.closest("[data-toolbar]");
+      if (!btn) return;
+      switch (btn.dataset.toolbar) {
+        case "undo":
+          this.engine.undo();
+          break;
+        case "redo":
+          this.engine.redo();
+          break;
+        case "edit-all":
+          this.engine.setAllEditMode();
+          break;
+        case "view-all":
+          this.engine.setAllViewMode();
+          break;
+      }
+    });
+    return toolbar;
+  }
+  bindEvents() {
+    const unsub = this.engine.on("notebook:updated", (payload) => {
+      const cellsContainer = this.container.querySelector(".sci-nb-cells");
+      if (cellsContainer) this.renderCells(cellsContainer);
+      if (this.options.onChange) this.options.onChange(payload.data.notebook);
+    });
+    this.unsubscribers.push(unsub);
+  }
+};
+export {
+  SciNotebookSvelte,
+  createNotebookStore
+};

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@velo-sci/notebook-svelte",
+  "version": "0.6.2",
+  "description": "Svelte 5+ adapter for sci-notebook",
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@velo-sci/notebook-core": "0.6.2",
+    "@velo-sci/notebook-renderer": "0.6.2"
+  },
+  "peerDependencies": {
+    "svelte": "^5.0.0"
+  },
+  "devDependencies": {
+    "tsup": "^8.0.0",
+    "vitest": "^1.0.0"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts --format esm,cjs --dts",
+    "dev": "tsup src/index.ts --format esm --watch --dts",
+    "test": "vitest run"
+  }
+}