@eclipse-lyra/extension-notebook 0.0.0

package/dist/notebook-runtime-CFgw3UmB.js

@@ -0,0 +1,1157 @@
+import { html, css } from "lit";
+import { property, state, customElement } from "lit/decorators.js";
+import { createRef, ref } from "lit/directives/ref.js";
+import { repeat } from "lit/directives/repeat.js";
+import { styleMap } from "lit/directives/style-map.js";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import { marked } from "marked";
+import * as monaco from "monaco-editor";
+import monacoStyles from "monaco-editor/min/vs/editor/editor.main.css?raw";
+import { LyraPart, workspaceService } from "@eclipse-lyra/core";
+import { PyEnv, pythonPackageManagerService } from "@eclipse-lyra/extension-python-runtime/api";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+let LyraNotebookEditor = class extends LyraPart {
+  constructor() {
+    super(...arguments);
+    this.cellOutputs = /* @__PURE__ */ new Map();
+    this.executingCells = /* @__PURE__ */ new Set();
+    this.pyConnected = false;
+    this.pyConnecting = false;
+    this.editingMarkdownCells = /* @__PURE__ */ new Set();
+    this.executionCounter = 0;
+    this.isRunningAll = false;
+    this.highlightedCellIndex = -1;
+    this.focusedCellIndex = -1;
+    this.cancelRunAll = false;
+    this.monacoEditors = /* @__PURE__ */ new Map();
+    this.cellRefs = /* @__PURE__ */ new Map();
+  }
+  doClose() {
+    this.input = void 0;
+    this.notebook = void 0;
+    this.cellOutputs.clear();
+    this.executingCells.clear();
+    this.monacoEditors.forEach((editor) => editor.dispose());
+    this.monacoEditors.clear();
+    this.cellRefs.clear();
+    this.focusedCellIndex = -1;
+    if (this.themeObserver) {
+      this.themeObserver.disconnect();
+      this.themeObserver = void 0;
+    }
+    if (this.pyenv) {
+      this.pyenv.close();
+      this.pyenv = void 0;
+    }
+    this.pyConnected = false;
+    this.pyVersion = void 0;
+  }
+  async save() {
+    if (!this.notebook || !this.input) return;
+    try {
+      this.saveEditorContents();
+      this.notebook.cells.forEach((cell, index) => {
+        if (cell.cell_type === "code") {
+          const output = this.cellOutputs.get(index);
+          cell.outputs = output ? this.convertOutputToJupyter(output, cell.execution_count) : [];
+        }
+      });
+      const notebookJson = JSON.stringify(this.notebook, null, 2);
+      const file = this.input.data;
+      await file.saveContents(notebookJson);
+      this.markDirty(false);
+    } catch (error) {
+      console.error("Failed to save notebook:", error);
+      throw error;
+    }
+  }
+  doBeforeUI() {
+    this.loadNotebook();
+  }
+  renderToolbar() {
+    const connectionTitle = this.pyConnecting ? "Connecting to Python..." : this.pyConnected ? "Python Connected" : "Python Disconnected - Click to connect";
+    const connectionText = this.pyConnecting ? "Connecting..." : this.pyConnected && this.pyVersion ? `Python ${this.pyVersion}` : "Not connected";
+    const iconColor = this.pyConnected ? "var(--wa-color-green-40)" : this.pyConnecting ? "var(--wa-color-warning-500)" : "var(--wa-color-red-40)";
+    const runAllButton = this.isRunningAll ? html`
+            <wa-button size="small" appearance="plain" @click=${() => this.cancelAllCells()} title="Cancel running all cells">
+                <wa-icon name="stop" label="Stop"></wa-icon>
+                Cancel All
+            </wa-button>
+        ` : html`
+            <wa-button size="small" appearance="plain" @click=${() => this.runAllCells()} title="Run all code cells sequentially">
+                <wa-icon name="play" label="Run"></wa-icon>
+                Run All
+            </wa-button>
+        `;
+    return html`
+            <wa-button 
+                appearance="plain" 
+                size="small"
+                style="display: flex; align-items: center; gap: 0.5rem;"
+                ?disabled=${this.pyConnecting}
+                @click=${() => this.connectPython()}
+                title=${connectionTitle}>
+                <wa-icon 
+                    name="circle"
+                    label="Python status"
+                    style=${styleMap({ color: iconColor })}
+                ></wa-icon>
+                ${connectionText}
+            </wa-button>
+            ${runAllButton}
+            <wa-button 
+                size="small" 
+                appearance="plain"
+                @click=${() => this.clearAllOutputs()}
+                title="Clear all outputs and reset execution counter">
+                <wa-icon name="eraser" label="Clear"></wa-icon>
+                Clear Outputs
+            </wa-button>
+            <wa-button 
+                size="small" 
+                appearance="plain"
+                @click=${() => this.restartKernel()}
+                title="Restart Python kernel (clears all variables and state)"
+                ?disabled=${!this.pyConnected || this.pyConnecting}>
+                <wa-icon name="arrows-rotate" label="Restart"></wa-icon>
+                Restart Kernel
+            </wa-button>
+            <wa-button 
+                size="small" 
+                appearance="plain"
+                @click=${() => this.openPackageManager()}
+                title="Manage required packages for this notebook">
+                <wa-icon name="box" label="Packages"></wa-icon>
+                Packages
+            </wa-button>
+        `;
+  }
+  doInitUI() {
+    this.setupThemeObserver();
+  }
+  async loadNotebook() {
+    const file = this.input.data;
+    const contents = await file.getContents();
+    try {
+      this.notebook = JSON.parse(contents);
+    } catch (e) {
+      console.error("Failed to parse notebook:", e);
+      this.notebook = {
+        cells: [{
+          cell_type: "markdown",
+          source: ["# Error\nFailed to parse notebook file."]
+        }]
+      };
+    }
+    if (this.notebook?.cells) {
+      const maxCount = this.notebook.cells.filter((cell) => cell.cell_type === "code").map((cell) => cell.execution_count ?? 0).reduce((max, count) => Math.max(max, count), 0);
+      this.executionCounter = maxCount;
+      this.notebook.cells.forEach((cell, index) => {
+        if (cell.cell_type === "code" && cell.outputs && cell.outputs.length > 0) {
+          const output = this.convertOutputFromJupyter(cell.outputs[0]);
+          if (output) {
+            this.cellOutputs.set(index, output);
+          }
+        }
+      });
+    }
+  }
+  setupThemeObserver() {
+    const rootElement = document.documentElement;
+    let currentTheme = this.getMonacoTheme();
+    this.themeObserver = new MutationObserver(() => {
+      const newTheme = this.getMonacoTheme();
+      if (newTheme !== currentTheme) {
+        currentTheme = newTheme;
+        monaco.editor.setTheme(newTheme);
+      }
+    });
+    this.themeObserver.observe(rootElement, {
+      attributes: true,
+      attributeFilter: ["class"]
+    });
+  }
+  getCellSource(cell) {
+    return Array.isArray(cell.source) ? cell.source.join("") : cell.source;
+  }
+  convertOutputToJupyter(output, executionCount) {
+    if (output.type === "execute_result") {
+      const data = {};
+      if (output.imageData) data["image/png"] = output.imageData;
+      if (output.data) data["text/plain"] = output.data;
+      return [{
+        output_type: "execute_result",
+        data,
+        execution_count: executionCount,
+        metadata: {}
+      }];
+    } else if (output.type === "error") {
+      return [{
+        output_type: "error",
+        ename: "Error",
+        evalue: output.data,
+        traceback: [output.data]
+      }];
+    }
+    return [];
+  }
+  convertOutputFromJupyter(jupyterOutput) {
+    if (jupyterOutput.output_type === "execute_result" && jupyterOutput.data) {
+      return {
+        type: "execute_result",
+        data: jupyterOutput.data["text/plain"] || "",
+        imageData: jupyterOutput.data["image/png"] || void 0
+      };
+    } else if (jupyterOutput.output_type === "error") {
+      return {
+        type: "error",
+        data: jupyterOutput.evalue || jupyterOutput.traceback?.join("\n") || "Unknown error"
+      };
+    }
+    return null;
+  }
+  renderHeaderActions(index, additionalButton) {
+    return html`
+            <div class="cell-header-actions">
+                ${additionalButton || ""}
+                ${additionalButton ? html`<span class="divider"></span>` : ""}
+                <wa-button size="small" appearance="plain" @click=${() => this.addCell(index, "code")} title="Add code cell before">
+                    <wa-icon name="plus"></wa-icon>
+                    <wa-icon name="code" label="Code"></wa-icon>
+                </wa-button>
+                <wa-button size="small" appearance="plain" @click=${() => this.addCell(index, "markdown")} title="Add markdown cell before">
+                    <wa-icon name="plus"></wa-icon>
+                    <wa-icon name="font" label="Markdown"></wa-icon>
+                </wa-button>
+                <span class="divider"></span>
+                <wa-button size="small" appearance="plain" @click=${() => this.deleteCell(index)} title="Delete cell" ?disabled=${this.notebook.cells.length <= 1}>
+                    <wa-icon name="trash" label="Delete cell"></wa-icon>
+                </wa-button>
+            </div>
+        `;
+  }
+  renderFooterActions(index) {
+    return html`
+            <div class="cell-footer">
+                <wa-button size="small" appearance="plain" @click=${() => this.addCell(index + 1, "code")} title="Add code cell after">
+                    <wa-icon name="code" label="Code"></wa-icon>
+                    <wa-icon name="plus"></wa-icon>
+                </wa-button>
+                <wa-button size="small" appearance="plain" @click=${() => this.addCell(index + 1, "markdown")} title="Add markdown cell after">
+                    <wa-icon name="font" label="Markdown"></wa-icon>
+                    <wa-icon name="plus"></wa-icon>
+                </wa-button>
+            </div>
+        `;
+  }
+  // Helper to convert string to Jupyter source format
+  stringToSourceArray(content) {
+    if (!content) return [""];
+    const lines = content.split("\n").map((line) => line + "\n");
+    if (lines.length > 0) {
+      lines[lines.length - 1] = lines[lines.length - 1].replace(/\n$/, "");
+    }
+    return lines;
+  }
+  // Helper to create a new cell
+  createCell(cellType) {
+    const newCell = {
+      cell_type: cellType,
+      source: [""],
+      metadata: {}
+    };
+    if (cellType === "code") {
+      newCell.execution_count = null;
+      newCell.outputs = [];
+    }
+    return newCell;
+  }
+  async initPyodide() {
+    if (!this.pyenv) {
+      this.pyenv = new PyEnv();
+      const workspace = await workspaceService.getWorkspace();
+      if (workspace) {
+        await this.pyenv.init(workspace);
+        this.pyConnected = true;
+        try {
+          const response = await this.pyenv.execCode("import sys; sys.version.split()[0]");
+          this.pyVersion = response?.result || "Unknown";
+        } catch (error) {
+          console.error("Failed to get Python version:", error);
+          this.pyVersion = "Unknown";
+        }
+        const requiredPackages = this.notebook?.metadata?.required_packages || [];
+        if (requiredPackages.length > 0) {
+          try {
+            await this.pyenv.loadPackages(requiredPackages);
+          } catch (error) {
+            console.error("Failed to load required packages:", error);
+          }
+        }
+        try {
+          await this.pyenv.execCode(`
+try:
+    import matplotlib
+    matplotlib.use('agg')
+    
+    import matplotlib.pyplot as plt
+    import io
+    import base64
+    
+    _original_show = plt.show
+    _display_data = None
+    
+    def _patched_show(*args, **kwargs):
+        """Patched plt.show() that captures the current figure for notebook display."""
+        global _display_data
+        if plt.get_fignums():
+            fig = plt.gcf()
+            buffer = io.BytesIO()
+            fig.savefig(buffer, format='png', bbox_inches='tight', dpi=100)
+            buffer.seek(0)
+            _display_data = base64.b64encode(buffer.read()).decode('utf-8')
+            plt.close(fig)
+        # Don't call original show() as it would try to display in a window
+    
+    plt.show = _patched_show
+except ImportError:
+    # matplotlib not installed - skip configuration
+    pass
+`);
+        } catch (error) {
+          console.error("Failed to configure matplotlib:", error);
+        }
+      }
+    }
+  }
+  async executeCell(cellIndex) {
+    const cell = this.notebook.cells[cellIndex];
+    if (cell.cell_type !== "code") return;
+    this.executingCells.add(cellIndex);
+    this.requestUpdate();
+    try {
+      await this.initPyodide();
+      const editor = this.monacoEditors.get(cellIndex);
+      let code = editor ? editor.getValue() : this.getCellSource(cell);
+      const response = await this.pyenv.execCode(code);
+      const outputParts = [];
+      if (response && typeof response === "object" && "console" in response) {
+        const consoleOutput = response.console;
+        if (Array.isArray(consoleOutput) && consoleOutput.length > 0) {
+          const filteredOutput = consoleOutput.filter((s) => s && s.trim());
+          if (filteredOutput.length > 0) {
+            outputParts.push(...filteredOutput);
+          }
+        }
+      }
+      let imageData = void 0;
+      try {
+        const checkDisplayData = await this.pyenv.execCode('_display_data if "_display_data" in dir() else None');
+        const displayResult = checkDisplayData && typeof checkDisplayData === "object" ? checkDisplayData.result : checkDisplayData;
+        if (displayResult && String(displayResult) !== "None" && String(displayResult) !== "undefined") {
+          imageData = String(displayResult);
+          await this.pyenv.execCode("_display_data = None");
+        }
+      } catch (e) {
+        console.debug("No display data to retrieve:", e);
+      }
+      if (!imageData) {
+        const result = response && typeof response === "object" ? response.result : response;
+        if (result !== void 0 && result !== null && String(result) !== "undefined") {
+          const resultStr = String(result);
+          if (resultStr && resultStr !== "undefined") {
+            outputParts.push(resultStr);
+          }
+        }
+      }
+      this.cellOutputs.set(cellIndex, {
+        type: "execute_result",
+        data: outputParts.length > 0 ? outputParts.join("\n") : void 0,
+        imageData
+      });
+      this.executionCounter++;
+      cell.execution_count = this.executionCounter;
+      this.markDirty(true);
+    } catch (error) {
+      if (this.executingCells.has(cellIndex)) {
+        this.cellOutputs.set(cellIndex, {
+          type: "error",
+          data: String(error)
+        });
+      }
+    } finally {
+      this.executingCells.delete(cellIndex);
+      this.requestUpdate();
+    }
+  }
+  async cancelExecution(cellIndex) {
+    if (!this.pyenv) return;
+    if (this.pyenv.canInterrupt()) {
+      this.pyenv.interrupt();
+    } else {
+      this.cellOutputs.set(cellIndex, {
+        type: "error",
+        data: "Execution cancelled by user (worker terminated - SharedArrayBuffer not available for graceful interrupt)"
+      });
+      this.executingCells.delete(cellIndex);
+      this.pyenv.close();
+      this.pyenv = void 0;
+      this.pyConnected = false;
+      this.pyVersion = void 0;
+      try {
+        await this.initPyodide();
+      } catch (error) {
+        console.error("Failed to reinitialize Python after cancellation:", error);
+      }
+      this.requestUpdate();
+    }
+  }
+  clearAllOutputs() {
+    this.cellOutputs.clear();
+    this.executionCounter = 0;
+    if (this.notebook?.cells) {
+      this.notebook.cells.forEach((cell) => {
+        if (cell.cell_type === "code") {
+          cell.execution_count = null;
+          cell.outputs = [];
+        }
+      });
+    }
+    this.markDirty(true);
+    this.requestUpdate();
+  }
+  async restartKernel() {
+    if (!this.pyenv || this.pyConnecting) return;
+    try {
+      this.pyConnecting = true;
+      this.pyenv.close();
+      this.pyenv = void 0;
+      this.pyConnected = false;
+      this.pyVersion = void 0;
+      this.requestUpdate();
+      await this.initPyodide();
+      this.requestUpdate();
+    } catch (error) {
+      console.error("Failed to restart kernel:", error);
+    } finally {
+      this.pyConnecting = false;
+    }
+  }
+  async runAllCells() {
+    if (!this.notebook?.cells) return;
+    this.isRunningAll = true;
+    this.cancelRunAll = false;
+    this.requestUpdate();
+    try {
+      for (let i = 0; i < this.notebook.cells.length; i++) {
+        if (this.cancelRunAll) {
+          break;
+        }
+        const cell = this.notebook.cells[i];
+        if (cell.cell_type === "code") {
+          await this.executeCell(i);
+        }
+      }
+    } finally {
+      this.isRunningAll = false;
+      this.cancelRunAll = false;
+      this.requestUpdate();
+    }
+  }
+  cancelAllCells() {
+    this.cancelRunAll = true;
+  }
+  toggleMarkdownEdit(index) {
+    if (this.editingMarkdownCells.has(index)) {
+      this.editingMarkdownCells.delete(index);
+    } else {
+      this.editingMarkdownCells.add(index);
+    }
+    this.requestUpdate();
+  }
+  saveMarkdownEdit(index, event) {
+    const textarea = event.target;
+    const newContent = textarea.value;
+    if (this.notebook && this.notebook.cells[index]) {
+      const cell = this.notebook.cells[index];
+      const oldContent = this.getCellSource(cell);
+      cell.source = this.stringToSourceArray(newContent);
+      if (oldContent !== newContent) {
+        this.markDirty(true);
+      }
+    }
+    this.editingMarkdownCells.delete(index);
+    this.requestUpdate();
+  }
+  renderMarkdownCell(cell, index) {
+    const source = this.getCellSource(cell);
+    const isEmpty = !source || source.trim() === "";
+    const isEditing = this.editingMarkdownCells.has(index);
+    if (isEditing) {
+      const editButtons = html`
+                <wa-button 
+                    size="small" 
+                    appearance="plain"
+                    @click=${(e) => {
+        const textarea = e.target.closest(".markdown-cell")?.querySelector("textarea");
+        if (textarea) {
+          this.saveMarkdownEdit(index, { target: textarea });
+        }
+      }}
+                    title="Save changes">
+                    <wa-icon name="check" label="Save"></wa-icon>
+                </wa-button>
+                <wa-button 
+                    size="small" 
+                    appearance="plain"
+                    @click=${() => this.toggleMarkdownEdit(index)}
+                    title="Cancel editing">
+                    <wa-icon name="xmark" label="Cancel"></wa-icon>
+                </wa-button>
+            `;
+      return html`
+                <div class="cell-wrapper">
+                    <wa-animation 
+                        name="bounce" 
+                        duration="1000" 
+                        iterations="1"
+                        ?play=${this.highlightedCellIndex === index}
+                        @wa-finish=${() => this.highlightedCellIndex = -1}>
+                        <div class="cell markdown-cell editing">
+                            <div class="cell-header">
+                                ${this.renderHeaderActions(index, editButtons)}
+                                <span class="cell-label">Markdown</span>
+                            </div>
+                            <textarea 
+                                class="markdown-editor"
+                                .value=${source}
+                                @blur=${(e) => this.saveMarkdownEdit(index, e)}
+                                placeholder="Enter markdown content here... (# for headings, ** for bold, etc.)"></textarea>
+                            ${this.renderFooterActions(index)}
+                        </div>
+                    </wa-animation>
+                </div>
+            `;
+    }
+    const rendered = marked.parse(source);
+    const editButton = html`
+            <wa-button 
+                size="small" 
+                appearance="plain"
+                @click=${() => this.toggleMarkdownEdit(index)}
+                title="Edit markdown">
+                <wa-icon name="pencil" label="Edit"></wa-icon>
+            </wa-button>
+        `;
+    return html`
+            <div class="cell-wrapper">
+                <wa-animation 
+                    name="bounce" 
+                    duration="1000" 
+                    iterations="1"
+                    ?play=${this.highlightedCellIndex === index}
+                    @wa-finish=${() => this.highlightedCellIndex = -1}>
+                    <div class="cell markdown-cell ${isEmpty ? "empty" : ""}" @dblclick=${() => this.toggleMarkdownEdit(index)}>
+                        <div class="cell-header">
+                            ${this.renderHeaderActions(index, editButton)}
+                            <span class="cell-label"></span>
+                        </div>
+                        <div class="cell-content">
+                            ${isEmpty ? html`
+                                <div class="markdown-placeholder">
+                                    <wa-icon name="font" label="Markdown"></wa-icon>
+                                    <span>Double-click or click the pencil icon to edit markdown</span>
+                                </div>
+                            ` : unsafeHTML(rendered)}
+                        </div>
+                        ${this.renderFooterActions(index)}
+                    </div>
+                </wa-animation>
+            </div>
+        `;
+  }
+  renderCodeCell(cell, index) {
+    const output = this.cellOutputs.get(index);
+    const isExecuting = this.executingCells.has(index);
+    if (!this.cellRefs.has(index)) {
+      this.cellRefs.set(index, createRef());
+    }
+    const cellRef = this.cellRefs.get(index);
+    const runButton = isExecuting ? html`
+            <wa-button 
+                size="small" 
+                appearance="plain"
+                @click=${() => this.cancelExecution(index)}
+                title="Stop execution">
+                <wa-icon name="stop" label="Stop" style="color: var(--wa-color-danger-500);"></wa-icon>
+            </wa-button>
+        ` : html`
+            <lyra-command 
+                cmd="python"
+                icon="play"
+                title="Run cell"
+                size="small"
+                appearance="plain"
+                .params=${{ cellIndex: index }}>
+            </lyra-command>
+        `;
+    return html`
+            <div class="cell-wrapper">
+                <wa-animation 
+                    name="bounce" 
+                    duration="1000" 
+                    iterations="1"
+                    ?play=${this.highlightedCellIndex === index}
+                    @wa-finish=${() => this.highlightedCellIndex = -1}>
+                    <div class="cell code-cell ${isExecuting ? "executing" : ""}">
+                        <div class="cell-header">
+                            <span class="cell-label">
+                                ${isExecuting ? html`
+                                    In [<wa-animation name="pulse" duration="1000" iterations="Infinity" ?play=${isExecuting}>
+                                        <span class="executing-indicator">*</span>
+                                    </wa-animation>]
+                                ` : html`
+                                    In [${cell.execution_count ?? " "}]
+                                `}
+                            </span>
+                            ${this.renderHeaderActions(index, runButton)}
+                        </div>
+                        <div class="cell-input monaco-container" ${ref(cellRef)} data-cell-index="${index}"></div>
+                        ${output ? html`
+                            <div class="cell-output ${output.type === "error" ? "output-error" : ""}">
+                                <div class="output-label">Out [${index + 1}]:</div>
+                                ${output.imageData ? html`
+                                    <img src="data:image/png;base64,${output.imageData}" alt="Output image" class="output-image" />
+                                ` : ""}
+                                ${output.data ? html`<pre><code>${output.data}</code></pre>` : ""}
+                            </div>
+                        ` : ""}
+                        ${this.renderFooterActions(index)}
+                    </div>
+                </wa-animation>
+            </div>
+        `;
+  }
+  renderCell(cell, index) {
+    if (cell.cell_type === "markdown") {
+      return this.renderMarkdownCell(cell, index);
+    } else if (cell.cell_type === "code") {
+      return this.renderCodeCell(cell, index);
+    } else {
+      const source = this.getCellSource(cell);
+      return html`
+                <div class="cell raw-cell">
+                    <pre><code>${source}</code></pre>
+                </div>
+            `;
+    }
+  }
+  async connectPython() {
+    if (this.pyConnecting || this.pyConnected) {
+      return;
+    }
+    try {
+      this.pyConnecting = true;
+      await this.initPyodide();
+    } catch (error) {
+      console.error("Failed to initialize Pyodide:", error);
+    } finally {
+      this.pyConnecting = false;
+    }
+  }
+  addCell(index, cellType = "code") {
+    if (!this.notebook) return;
+    this.saveEditorContents();
+    this.shiftIndices(index, "up");
+    this.notebook.cells.splice(index, 0, this.createCell(cellType));
+    if (cellType === "markdown") {
+      this.editingMarkdownCells.add(index);
+    }
+    this.resetCellState();
+    this.highlightedCellIndex = index;
+    this.updateComplete.then(() => {
+      this.scrollToCell(index);
+    });
+  }
+  scrollToCell(index) {
+    const cellWrapper = this.shadowRoot?.querySelectorAll(".cell-wrapper")[index];
+    if (!cellWrapper) return;
+    const scroller = this.closest("wa-scroller");
+    if (!scroller) {
+      cellWrapper.scrollIntoView({
+        behavior: "smooth",
+        block: "center",
+        inline: "nearest"
+      });
+      return;
+    }
+    const scrollerRect = scroller.getBoundingClientRect();
+    const cellRect = cellWrapper.getBoundingClientRect();
+    const scrollTop = scroller.scrollTop;
+    const targetScroll = scrollTop + (cellRect.top - scrollerRect.top) - scrollerRect.height / 2 + cellRect.height / 2;
+    scroller.scrollTo({
+      top: targetScroll,
+      behavior: "smooth"
+    });
+  }
+  saveEditorContents() {
+    this.monacoEditors.forEach((editor, index) => {
+      const cell = this.notebook.cells[index];
+      if (cell && cell.cell_type === "code") {
+        cell.source = this.stringToSourceArray(editor.getValue());
+      }
+    });
+  }
+  resetCellState() {
+    this.monacoEditors.forEach((editor) => editor.dispose());
+    this.monacoEditors.clear();
+    this.cellRefs.clear();
+    this.markDirty(true);
+  }
+  deleteCell(index) {
+    if (!this.notebook || this.notebook.cells.length <= 1) return;
+    this.saveEditorContents();
+    this.cellOutputs.delete(index);
+    this.executingCells.delete(index);
+    this.editingMarkdownCells.delete(index);
+    this.notebook.cells.splice(index, 1);
+    this.shiftIndices(index, "down");
+    this.resetCellState();
+  }
+  shiftIndices(startIndex, direction) {
+    const shift = direction === "up" ? 1 : -1;
+    const filterFn = direction === "up" ? (idx) => idx >= startIndex : (idx) => idx > startIndex;
+    const sortFn = direction === "up" ? (a, b) => b - a : (a, b) => a - b;
+    const shiftMap = (map) => {
+      const indices = Array.from(map.keys()).filter(filterFn).sort(sortFn);
+      indices.forEach((oldIndex) => {
+        const value = map.get(oldIndex);
+        map.delete(oldIndex);
+        map.set(oldIndex + shift, value);
+      });
+    };
+    const shiftSet = (set) => {
+      const indices = Array.from(set).filter(filterFn).sort(sortFn);
+      indices.forEach((oldIndex) => {
+        set.delete(oldIndex);
+        set.add(oldIndex + shift);
+      });
+    };
+    shiftMap(this.cellOutputs);
+    shiftSet(this.executingCells);
+    shiftSet(this.editingMarkdownCells);
+  }
+  initializeMonacoEditor(container, cell, index) {
+    const source = this.getCellSource(cell);
+    const lineCount = source.split("\n").length;
+    const lineHeight = 19;
+    const padding = 10;
+    const minHeight = 100;
+    const calculatedHeight = Math.max(minHeight, lineCount * lineHeight + padding);
+    container.style.height = `${calculatedHeight}px`;
+    const editor = monaco.editor.create(container, {
+      value: source,
+      language: "python",
+      theme: this.getMonacoTheme(),
+      minimap: { enabled: false },
+      scrollBeyondLastLine: false,
+      lineNumbers: "on",
+      renderLineHighlight: "all",
+      automaticLayout: true,
+      fontSize: 14,
+      tabSize: 4,
+      wordWrap: "on"
+    });
+    let isEditorFocused = false;
+    editor.onDidFocusEditorText(() => {
+      isEditorFocused = true;
+      this.focusedCellIndex = index;
+    });
+    editor.onDidBlurEditorText(() => {
+      isEditorFocused = false;
+      if (this.focusedCellIndex === index) {
+        this.focusedCellIndex = -1;
+      }
+    });
+    container.addEventListener("wheel", (e) => {
+      if (!isEditorFocused) {
+        const scrollTop = editor.getScrollTop();
+        const scrollHeight = editor.getScrollHeight();
+        const contentHeight = editor.getContentHeight();
+        const canScroll = scrollHeight > contentHeight;
+        const atBoundary = e.deltaY < 0 && scrollTop <= 0 || e.deltaY > 0 && scrollTop + contentHeight >= scrollHeight;
+        if (!canScroll || atBoundary) {
+          e.stopImmediatePropagation();
+        }
+      }
+    }, { passive: true, capture: true });
+    editor.onDidContentSizeChange(() => {
+      const contentHeight = editor.getContentHeight();
+      container.style.height = `${Math.max(minHeight, contentHeight + padding)}px`;
+      editor.layout();
+    });
+    editor.onDidChangeModelContent(() => {
+      const currentValue = editor.getValue();
+      const originalValue = this.getCellSource(cell);
+      if (currentValue !== originalValue) {
+        this.markDirty(true);
+      }
+    });
+    this.monacoEditors.set(index, editor);
+  }
+  getMonacoTheme() {
+    const rootElement = document.documentElement;
+    if (rootElement.classList.contains("wa-dark")) {
+      return "vs-dark";
+    } else if (rootElement.classList.contains("wa-light")) {
+      return "vs";
+    }
+    return "vs-dark";
+  }
+  openPackageManager() {
+    const packages = this.notebook?.metadata?.required_packages || [];
+    pythonPackageManagerService.showPackageManager({
+      packages,
+      pyenv: this.pyenv,
+      onPackageAdded: (packageName) => {
+        if (!this.notebook) return;
+        if (!this.notebook.metadata) {
+          this.notebook.metadata = {};
+        }
+        if (!this.notebook.metadata.required_packages) {
+          this.notebook.metadata.required_packages = [];
+        }
+        if (!this.notebook.metadata.required_packages.includes(packageName)) {
+          this.notebook.metadata.required_packages.push(packageName);
+          this.markDirty(true);
+        }
+      },
+      onPackageRemoved: (packageName) => {
+        if (!this.notebook?.metadata?.required_packages) return;
+        const index = this.notebook.metadata.required_packages.indexOf(packageName);
+        if (index > -1) {
+          this.notebook.metadata.required_packages.splice(index, 1);
+          this.markDirty(true);
+        }
+      }
+    });
+  }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    if (changedProperties.has("pyConnected") || changedProperties.has("pyConnecting") || changedProperties.has("pyVersion") || changedProperties.has("isRunningAll")) {
+      this.updateToolbar();
+    }
+    if (this.notebook?.cells) {
+      this.notebook.cells.forEach((cell, index) => {
+        if (cell.cell_type === "code") {
+          const ref2 = this.cellRefs.get(index);
+          if (ref2?.value && !this.monacoEditors.has(index)) {
+            this.initializeMonacoEditor(ref2.value, cell, index);
+          }
+        }
+      });
+    }
+  }
+  render() {
+    if (!this.notebook) {
+      return html`<div class="loading">Loading notebook...</div>`;
+    }
+    return html`
+            <style>
+                ${monacoStyles}
+            </style>
+            <div class="noteboocells">
+                ${repeat(
+      this.notebook.cells,
+      (_cell, index) => index,
+      (cell, index) => this.renderCell(cell, index)
+    )}
+            </div>
+        `;
+  }
+};
+LyraNotebookEditor.styles = css`
+        :host {
+            display: block;
+            width: 100%;
+        }
+
+        .python-status {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+
+        .python-version {
+            font-size: 0.9rem;
+            opacity: 0.8;
+        }
+
+        .noteboocells {
+            display: flex;
+            flex-direction: column;
+            gap: 3rem;
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 2rem 1rem;
+            width: 100%;
+            box-sizing: border-box;
+        }
+
+        .cell-wrapper {
+            position: relative;
+        }
+
+        .cell {
+            border-radius: 4px;
+            overflow: hidden;
+            opacity: 0.9;
+            position: relative;
+        }
+
+        .cell-header-actions {
+            display: flex;
+            gap: 0.25rem;
+            align-items: center;
+            opacity: 0.5;
+            transition: opacity 0.2s;
+        }
+
+        .cell-header-actions .divider {
+            width: 1px;
+            height: 1rem;
+            background: var(--wa-color-outline);
+            margin: 0 0.25rem;
+            opacity: 0.5;
+        }
+
+        .cell-header:hover .cell-header-actions {
+            opacity: 1;
+        }
+
+        .cell-footer {
+            display: flex;
+            gap: 0.5rem;
+            align-items: center;
+            justify-content: flex-start;
+            padding: 0.5rem;
+            border-top: 1px solid var(--wa-color-outline);
+            opacity: 0.5;
+            transition: opacity 0.2s;
+        }
+
+        .cell-footer:hover {
+            opacity: 1;
+        }
+
+        .markdown-cell {
+            cursor: pointer;
+            transition: opacity 0.2s;
+        }
+
+        .markdown-cell:hover:not(.editing) {
+            opacity: 0.9;
+        }
+        
+        .markdown-cell .cell-content {
+            padding: 1rem;
+        }
+
+        .markdown-cell.editing {
+            cursor: default;
+            padding: 0;
+        }
+        
+        .markdown-cell.editing .cell-actions {
+            display: none;
+        }
+
+        .markdown-editor {
+            width: 100%;
+            min-height: 200px;
+            padding: 1rem;
+            font-family: monospace;
+            font-size: 0.95rem;
+            line-height: 1.6;
+            border: none;
+            outline: none;
+            resize: vertical;
+            background: transparent;
+            color: inherit;
+        }
+
+        .code-cell {
+            border-left: 3px solid var(--wa-color-primary-500);
+            transition: all 0.3s ease;
+        }
+        
+        .code-cell.executing {
+            border-left: 4px solid var(--wa-color-primary-500);
+            box-shadow: 0 0 0 2px var(--wa-color-primary-500, rgba(59, 130, 246, 0.3));
+            animation: pulse-cell 2s ease-in-out infinite;
+        }
+        
+        @keyframes pulse-cell {
+            0%, 100% {
+                box-shadow: 0 0 0 2px var(--wa-color-primary-500, rgba(59, 130, 246, 0.3));
+                opacity: 1;
+            }
+            50% {
+                box-shadow: 0 0 0 4px var(--wa-color-primary-500, rgba(59, 130, 246, 0.5));
+                opacity: 0.95;
+            }
+        }
+
+        .cell-header {
+            display: flex;
+            align-items: center;
+            justify-content: flex-start;
+            gap: 0.5rem;
+            padding: 0.5rem 1rem;
+            flex-wrap: nowrap;
+        }
+
+        .cell-label {
+            font-family: monospace;
+            font-weight: bold;
+            flex-shrink: 0;
+        }
+        
+        .executing-indicator {
+            display: inline-block;
+            color: var(--wa-color-primary-500);
+            font-weight: bold;
+            font-size: 1.2em;
+        }
+
+        .cell-input {
+            margin: 0;
+        }
+
+        .monaco-container {
+            min-height: 100px;
+            height: auto;
+            width: 100%;
+        }
+
+        .cell-output {
+            padding: 1rem;
+        }
+
+        .output-label {
+            font-family: monospace;
+            font-weight: bold;
+            margin-bottom: 0.5rem;
+            opacity: 0.7;
+        }
+
+        .cell-output pre {
+            margin: 0;
+            overflow-x: auto;
+        }
+
+        .cell-output code {
+            font-family: 'Courier New', monospace;
+            font-size: 0.9rem;
+            line-height: 1.5;
+        }
+
+        .output-image {
+            max-width: 100%;
+            height: auto;
+            display: block;
+            margin: 0.5rem 0;
+            border-radius: 4px;
+        }
+
+        .output-error {
+            border-left: 3px solid var(--wa-color-danger-500);
+        }
+
+        .raw-cell {
+            padding: 1rem;
+        }
+
+        .raw-cell pre {
+            margin: 0;
+        }
+
+        .loading {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            height: 100%;
+            font-size: 1.2rem;
+        }
+
+        .markdown-placeholder {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 0.75rem;
+            padding: 3rem 1rem;
+            opacity: 0.5;
+            font-style: italic;
+            transition: opacity 0.2s;
+        }
+
+        .markdown-cell.empty:hover .markdown-placeholder {
+            opacity: 0.8;
+        }
+
+        .markdown-placeholder wa-icon {
+            font-size: 1.5rem;
+        }
+    `;
+__decorateClass([
+  property({ attribute: false })
+], LyraNotebookEditor.prototype, "input", 2);
+__decorateClass([
+  state()
+], LyraNotebookEditor.prototype, "notebook", 2);
+__decorateClass([
+  state()
+], LyraNotebookEditor.prototype, "cellOutputs", 2);
+__decorateClass([
+  state()
+], LyraNotebookEditor.prototype, "executingCells", 2);
+__decorateClass([
+  state()
+], LyraNotebookEditor.prototype, "pyenv", 2);
+__decorateClass([
+  state()
+], LyraNotebookEditor.prototype, "pyConnected", 2);
+__decorateClass([
+  state()
+], LyraNotebookEditor.prototype, "pyConnecting", 2);
+__decorateClass([
+  state()
+], LyraNotebookEditor.prototype, "pyVersion", 2);
+__decorateClass([
+  state()
+], LyraNotebookEditor.prototype, "editingMarkdownCells", 2);
+__decorateClass([
+  state()
+], LyraNotebookEditor.prototype, "executionCounter", 2);
+__decorateClass([
+  state()
+], LyraNotebookEditor.prototype, "isRunningAll", 2);
+__decorateClass([
+  state()
+], LyraNotebookEditor.prototype, "highlightedCellIndex", 2);
+LyraNotebookEditor = __decorateClass([
+  customElement("lyra-notebook-editor")
+], LyraNotebookEditor);
+export {
+  LyraNotebookEditor
+};
+//# sourceMappingURL=notebook-runtime-CFgw3UmB.js.map