notations 1.0.2 → 1.0.4

package/lib/esm/web/components/NotationBlock.js

@@ -0,0 +1,216 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { load } from "../../loader";
+export default class NotationBlock {
+    constructor(container, config) {
+        var _a, _b, _c, _d, _e, _f;
+        this.container = container;
+        this.config = config;
+        this.caption = "";
+        this.isEditing = false;
+        this.editTextarea = null;
+        this.sourceCodeElement = null;
+        this.id = (container.getAttribute("id") || "").trim();
+        this.caption = (container.getAttribute("caption") || "").trim();
+        const sourceFrom = (container.getAttribute("sourceFrom") || "").trim();
+        this.source = container.textContent || "";
+        if (sourceFrom.length > 0) {
+            const sourceElem = document.getElementById(sourceFrom);
+            if (sourceElem) {
+                this.source = sourceElem.textContent || "";
+            }
+        }
+        this.height = container.getAttribute("height") || "";
+        this.showSource = (container.getAttribute("showSource") || "false") == "true";
+        const parent = container.parentNode;
+        const newRoot = document.createElement("div");
+        newRoot.classList.add("notationBlockRoot");
+        if ((_a = config.cssClasses) === null || _a === void 0 ? void 0 : _a.root) {
+            newRoot.className += " " + config.cssClasses.root;
+        }
+        this.newRoot = newRoot;
+        let html = "";
+        if (this.showSource) {
+            const sourceLines = this.source.split("\n");
+            const sourceClass = ((_b = config.cssClasses) === null || _b === void 0 ? void 0 : _b.sourceContainer) || "";
+            const captionClass = ((_c = config.cssClasses) === null || _c === void 0 ? void 0 : _c.sourceCaption) || "";
+            const codeClass = ((_d = config.cssClasses) === null || _d === void 0 ? void 0 : _d.sourceCode) || "";
+            html += `
+        <figure class="notation-source-block ${sourceClass}">
+          <div class="notation-source-header">
+            <figcaption class="notation-caption ${captionClass}">${this.caption}</figcaption>
+            <div class="notation-source-actions">
+              <button class="notation-btn notation-copy-btn" id="copyBtn_${this.id}" title="Copy to clipboard">
+                <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
+                  <path d="M4 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V2zm2-1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H6zM2 5a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-1h1v1a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h1v1H2z"/>
+                </svg>
+                <span class="notation-btn-text">Copy</span>
+              </button>
+              <button class="notation-btn notation-edit-btn" id="editBtn_${this.id}" title="Edit notation">
+                <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
+                  <path d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z"/>
+                </svg>
+                <span class="notation-btn-text">Edit</span>
+              </button>
+            </div>
+          </div>
+          <div class="notation-source" id="notationSource_${this.id}">
+            <pre class="notation-source-pre">
+              <code class="${codeClass}" id="sourceCode_${this.id}">${sourceLines.map((x) => `<span>${x}</span>`).join("\n")}</code>
+            </pre>
+            <textarea class="notation-edit-textarea" id="editTextarea_${this.id}" style="display: none;"></textarea>
+          </div>
+          <div class="notation-edit-actions" id="editActions_${this.id}" style="display: none;">
+            <button class="notation-btn notation-apply-btn" id="applyBtn_${this.id}">Apply</button>
+            <button class="notation-btn notation-cancel-btn" id="cancelBtn_${this.id}">Cancel</button>
+          </div>
+        </figure>`;
+        }
+        const outputLabelClass = ((_e = config.cssClasses) === null || _e === void 0 ? void 0 : _e.outputLabel) || "";
+        const outputClass = ((_f = config.cssClasses) === null || _f === void 0 ? void 0 : _f.outputContainer) || "";
+        html += `
+      <div class="notation-output">
+        <span class="notation-output-label ${outputLabelClass}"><strong>Output:</strong></span>
+        <div id="notationViewer_${this.id}" class="notation-view ${outputClass}">
+        </div>
+      </div>`;
+        newRoot.innerHTML = html;
+        parent.insertBefore(newRoot, container);
+        parent.removeChild(container);
+        const notationViewerBlock = newRoot.querySelector(".notation-view");
+        this.notationView = config.createViewer(notationViewerBlock);
+        if (this.showSource) {
+            this.sourceCodeElement = newRoot.querySelector(`#sourceCode_${this.id}`);
+            this.editTextarea = newRoot.querySelector(`#editTextarea_${this.id}`);
+            const copyBtn = newRoot.querySelector(`#copyBtn_${this.id}`);
+            if (copyBtn) {
+                copyBtn.addEventListener("click", () => this.copyToClipboard());
+            }
+            const editBtn = newRoot.querySelector(`#editBtn_${this.id}`);
+            if (editBtn) {
+                editBtn.addEventListener("click", () => this.toggleEditMode());
+            }
+            const applyBtn = newRoot.querySelector(`#applyBtn_${this.id}`);
+            if (applyBtn) {
+                applyBtn.addEventListener("click", () => this.applyEdit());
+            }
+            const cancelBtn = newRoot.querySelector(`#cancelBtn_${this.id}`);
+            if (cancelBtn) {
+                cancelBtn.addEventListener("click", () => this.cancelEdit());
+            }
+        }
+        this.updatePreview();
+        console.log("Done Rendering... Adjusting height");
+    }
+    updatePreview() {
+        const fullContents = this.source;
+        this.notationView.tableElement.innerHTML = "";
+        const [notation, beatLayout, errors, timings] = load(fullContents, { log: true });
+        if (errors.length > 0) {
+            console.log("Errors: ", errors);
+        }
+        else {
+            console.log("Rendering notation...");
+            this.notationView.renderNotation(notation, beatLayout);
+        }
+        const msg = `Document parsed (${Math.trunc(timings.parseTime * 100) / 100} ms) and built (${Math.trunc(timings.buildTime * 100) / 100} ms)`;
+        console.log(msg);
+    }
+    get captionId() {
+        return "notationCaption_" + this.id;
+    }
+    copyToClipboard() {
+        return __awaiter(this, void 0, void 0, function* () {
+            try {
+                yield navigator.clipboard.writeText(this.source);
+                const copyBtn = this.newRoot.querySelector(`#copyBtn_${this.id}`);
+                if (copyBtn) {
+                    const btnText = copyBtn.querySelector(".notation-btn-text");
+                    const originalText = btnText === null || btnText === void 0 ? void 0 : btnText.textContent;
+                    if (btnText) {
+                        btnText.textContent = "Copied!";
+                        setTimeout(() => {
+                            if (btnText)
+                                btnText.textContent = originalText || "Copy";
+                        }, 2000);
+                    }
+                }
+            }
+            catch (err) {
+                console.error("Failed to copy to clipboard:", err);
+                alert("Failed to copy to clipboard");
+            }
+        });
+    }
+    toggleEditMode() {
+        this.isEditing = !this.isEditing;
+        if (this.isEditing) {
+            this.enterEditMode();
+        }
+        else {
+            this.exitEditMode();
+        }
+    }
+    enterEditMode() {
+        if (!this.editTextarea || !this.sourceCodeElement)
+            return;
+        this.editTextarea.value = this.source;
+        if (this.sourceCodeElement.parentElement) {
+            this.sourceCodeElement.parentElement.style.display = "none";
+        }
+        this.editTextarea.style.display = "block";
+        this.editTextarea.style.height = "auto";
+        this.editTextarea.style.height = this.editTextarea.scrollHeight + "px";
+        const editActions = this.newRoot.querySelector(`#editActions_${this.id}`);
+        if (editActions) {
+            editActions.style.display = "flex";
+        }
+        const editBtn = this.newRoot.querySelector(`#editBtn_${this.id}`);
+        const btnText = editBtn === null || editBtn === void 0 ? void 0 : editBtn.querySelector(".notation-btn-text");
+        if (btnText) {
+            btnText.textContent = "Editing...";
+        }
+        this.editTextarea.focus();
+    }
+    exitEditMode() {
+        if (!this.editTextarea || !this.sourceCodeElement)
+            return;
+        this.editTextarea.style.display = "none";
+        if (this.sourceCodeElement.parentElement) {
+            this.sourceCodeElement.parentElement.style.display = "block";
+        }
+        const editActions = this.newRoot.querySelector(`#editActions_${this.id}`);
+        if (editActions) {
+            editActions.style.display = "none";
+        }
+        const editBtn = this.newRoot.querySelector(`#editBtn_${this.id}`);
+        const btnText = editBtn === null || editBtn === void 0 ? void 0 : editBtn.querySelector(".notation-btn-text");
+        if (btnText) {
+            btnText.textContent = "Edit";
+        }
+    }
+    applyEdit() {
+        if (!this.editTextarea)
+            return;
+        this.source = this.editTextarea.value;
+        if (this.sourceCodeElement) {
+            const sourceLines = this.source.split("\n");
+            this.sourceCodeElement.innerHTML = sourceLines.map((x) => `<span>${x}</span>`).join("\n");
+        }
+        this.updatePreview();
+        this.isEditing = false;
+        this.exitEditMode();
+    }
+    cancelEdit() {
+        this.isEditing = false;
+        this.exitEditMode();
+    }
+}
+//# sourceMappingURL=NotationBlock.js.map

package/lib/esm/web/components/NotationBlock.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotationBlock.js","sourceRoot":"","sources":["../../../../src/web/components/NotationBlock.ts"],"names":[],"mappings":"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","sourcesContent":["import { load } from \"../../loader\";\nimport { NotationView } from \"../../carnatic\";\n\nexport interface NotationBlockConfig {\n  /** Function to create a notation viewer - allows different implementations */\n  createViewer: (container: HTMLDivElement) => NotationView;\n\n  /** CSS classes to apply to various elements */\n  cssClasses?: {\n    root?: string;\n    sourceContainer?: string;\n    sourceCaption?: string;\n    sourceCode?: string;\n    outputLabel?: string;\n    outputContainer?: string;\n  };\n}\n\nexport default class NotationBlock {\n  id: string;\n  source: string;\n  caption = \"\";\n  height: string;\n  newRoot: HTMLDivElement;\n  notationView: NotationView;\n  showSource: boolean;\n  isEditing = false;\n  editTextarea: HTMLTextAreaElement | null = null;\n  sourceCodeElement: HTMLElement | null = null;\n\n  constructor(\n    public readonly container: HTMLElement,\n    public readonly config: NotationBlockConfig,\n  ) {\n    this.id = (container.getAttribute(\"id\") || \"\").trim();\n    this.caption = (container.getAttribute(\"caption\") || \"\").trim();\n    const sourceFrom = (container.getAttribute(\"sourceFrom\") || \"\").trim();\n    this.source = container.textContent || \"\";\n\n    if (sourceFrom.length > 0) {\n      const sourceElem = document.getElementById(sourceFrom);\n      if (sourceElem) {\n        this.source = sourceElem.textContent || \"\";\n      }\n    }\n\n    this.height = container.getAttribute(\"height\") || \"\";\n    this.showSource = (container.getAttribute(\"showSource\") || \"false\") == \"true\";\n\n    const parent = container.parentNode as HTMLDivElement;\n    const newRoot = document.createElement(\"div\");\n    newRoot.classList.add(\"notationBlockRoot\");\n    if (config.cssClasses?.root) {\n      newRoot.className += \" \" + config.cssClasses.root;\n    }\n    this.newRoot = newRoot;\n\n    // Build HTML structure\n    let html = \"\";\n\n    // Add source code section if showSource is true\n    if (this.showSource) {\n      const sourceLines = this.source.split(\"\\n\");\n      const sourceClass = config.cssClasses?.sourceContainer || \"\";\n      const captionClass = config.cssClasses?.sourceCaption || \"\";\n      const codeClass = config.cssClasses?.sourceCode || \"\";\n\n      html += `\n        <figure class=\"notation-source-block ${sourceClass}\">\n          <div class=\"notation-source-header\">\n            <figcaption class=\"notation-caption ${captionClass}\">${this.caption}</figcaption>\n            <div class=\"notation-source-actions\">\n              <button class=\"notation-btn notation-copy-btn\" id=\"copyBtn_${this.id}\" title=\"Copy to clipboard\">\n                <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"currentColor\">\n                  <path d=\"M4 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V2zm2-1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H6zM2 5a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-1h1v1a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h1v1H2z\"/>\n                </svg>\n                <span class=\"notation-btn-text\">Copy</span>\n              </button>\n              <button class=\"notation-btn notation-edit-btn\" id=\"editBtn_${this.id}\" title=\"Edit notation\">\n                <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"currentColor\">\n                  <path d=\"M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z\"/>\n                </svg>\n                <span class=\"notation-btn-text\">Edit</span>\n              </button>\n            </div>\n          </div>\n          <div class=\"notation-source\" id=\"notationSource_${this.id}\">\n            <pre class=\"notation-source-pre\">\n              <code class=\"${codeClass}\" id=\"sourceCode_${this.id}\">${sourceLines.map((x) => `<span>${x}</span>`).join(\"\\n\")}</code>\n            </pre>\n            <textarea class=\"notation-edit-textarea\" id=\"editTextarea_${this.id}\" style=\"display: none;\"></textarea>\n          </div>\n          <div class=\"notation-edit-actions\" id=\"editActions_${this.id}\" style=\"display: none;\">\n            <button class=\"notation-btn notation-apply-btn\" id=\"applyBtn_${this.id}\">Apply</button>\n            <button class=\"notation-btn notation-cancel-btn\" id=\"cancelBtn_${this.id}\">Cancel</button>\n          </div>\n        </figure>`;\n    }\n\n    // Add output section\n    const outputLabelClass = config.cssClasses?.outputLabel || \"\";\n    const outputClass = config.cssClasses?.outputContainer || \"\";\n\n    html += `\n      <div class=\"notation-output\">\n        <span class=\"notation-output-label ${outputLabelClass}\"><strong>Output:</strong></span>\n        <div id=\"notationViewer_${this.id}\" class=\"notation-view ${outputClass}\">\n        </div>\n      </div>`;\n\n    newRoot.innerHTML = html;\n    parent.insertBefore(newRoot, container);\n    parent.removeChild(container);\n\n    const notationViewerBlock = newRoot.querySelector(\".notation-view\") as HTMLDivElement;\n    this.notationView = config.createViewer(notationViewerBlock);\n\n    // Set up event handlers\n    if (this.showSource) {\n      this.sourceCodeElement = newRoot.querySelector(`#sourceCode_${this.id}`);\n      this.editTextarea = newRoot.querySelector(`#editTextarea_${this.id}`);\n\n      // Copy button\n      const copyBtn = newRoot.querySelector(`#copyBtn_${this.id}`);\n      if (copyBtn) {\n        copyBtn.addEventListener(\"click\", () => this.copyToClipboard());\n      }\n\n      // Edit button\n      const editBtn = newRoot.querySelector(`#editBtn_${this.id}`);\n      if (editBtn) {\n        editBtn.addEventListener(\"click\", () => this.toggleEditMode());\n      }\n\n      // Apply button\n      const applyBtn = newRoot.querySelector(`#applyBtn_${this.id}`);\n      if (applyBtn) {\n        applyBtn.addEventListener(\"click\", () => this.applyEdit());\n      }\n\n      // Cancel button\n      const cancelBtn = newRoot.querySelector(`#cancelBtn_${this.id}`);\n      if (cancelBtn) {\n        cancelBtn.addEventListener(\"click\", () => this.cancelEdit());\n      }\n    }\n\n    this.updatePreview();\n    console.log(\"Done Rendering... Adjusting height\");\n  }\n\n  updatePreview(): void {\n    const fullContents = this.source;\n    // Clear previous render to avoid appending multiple times\n    this.notationView.tableElement.innerHTML = \"\";\n\n    const [notation, beatLayout, errors, timings] = load(fullContents, { log: true });\n\n    if (errors.length > 0) {\n      console.log(\"Errors: \", errors);\n    } else {\n      console.log(\"Rendering notation...\");\n      this.notationView.renderNotation(notation, beatLayout);\n    }\n\n    const msg = `Document parsed (${Math.trunc(timings.parseTime * 100) / 100} ms) and built (${\n      Math.trunc(timings.buildTime * 100) / 100\n    } ms)`;\n    console.log(msg);\n  }\n\n  get captionId(): string {\n    return \"notationCaption_\" + this.id;\n  }\n\n  async copyToClipboard(): Promise<void> {\n    try {\n      await navigator.clipboard.writeText(this.source);\n      const copyBtn = this.newRoot.querySelector(`#copyBtn_${this.id}`);\n      if (copyBtn) {\n        const btnText = copyBtn.querySelector(\".notation-btn-text\");\n        const originalText = btnText?.textContent;\n        if (btnText) {\n          btnText.textContent = \"Copied!\";\n          setTimeout(() => {\n            if (btnText) btnText.textContent = originalText || \"Copy\";\n          }, 2000);\n        }\n      }\n    } catch (err) {\n      console.error(\"Failed to copy to clipboard:\", err);\n      alert(\"Failed to copy to clipboard\");\n    }\n  }\n\n  toggleEditMode(): void {\n    this.isEditing = !this.isEditing;\n\n    if (this.isEditing) {\n      this.enterEditMode();\n    } else {\n      this.exitEditMode();\n    }\n  }\n\n  enterEditMode(): void {\n    if (!this.editTextarea || !this.sourceCodeElement) return;\n\n    // Populate textarea with current source\n    this.editTextarea.value = this.source;\n\n    // Hide source code, show textarea\n    if (this.sourceCodeElement.parentElement) {\n      this.sourceCodeElement.parentElement.style.display = \"none\";\n    }\n    this.editTextarea.style.display = \"block\";\n\n    // Auto-resize textarea to fit content\n    this.editTextarea.style.height = \"auto\";\n    this.editTextarea.style.height = this.editTextarea.scrollHeight + \"px\";\n\n    // Show edit actions\n    const editActions = this.newRoot.querySelector(`#editActions_${this.id}`) as HTMLElement;\n    if (editActions) {\n      editActions.style.display = \"flex\";\n    }\n\n    // Update edit button text\n    const editBtn = this.newRoot.querySelector(`#editBtn_${this.id}`);\n    const btnText = editBtn?.querySelector(\".notation-btn-text\");\n    if (btnText) {\n      btnText.textContent = \"Editing...\";\n    }\n\n    this.editTextarea.focus();\n  }\n\n  exitEditMode(): void {\n    if (!this.editTextarea || !this.sourceCodeElement) return;\n\n    // Hide textarea, show source code\n    this.editTextarea.style.display = \"none\";\n    if (this.sourceCodeElement.parentElement) {\n      this.sourceCodeElement.parentElement.style.display = \"block\";\n    }\n\n    // Hide edit actions\n    const editActions = this.newRoot.querySelector(`#editActions_${this.id}`) as HTMLElement;\n    if (editActions) {\n      editActions.style.display = \"none\";\n    }\n\n    // Update edit button text\n    const editBtn = this.newRoot.querySelector(`#editBtn_${this.id}`);\n    const btnText = editBtn?.querySelector(\".notation-btn-text\");\n    if (btnText) {\n      btnText.textContent = \"Edit\";\n    }\n  }\n\n  applyEdit(): void {\n    if (!this.editTextarea) return;\n\n    // Update source\n    this.source = this.editTextarea.value;\n\n    // Update source code display\n    if (this.sourceCodeElement) {\n      const sourceLines = this.source.split(\"\\n\");\n      this.sourceCodeElement.innerHTML = sourceLines.map((x) => `<span>${x}</span>`).join(\"\\n\");\n    }\n\n    // Re-render notation\n    this.updatePreview();\n\n    // Exit edit mode\n    this.isEditing = false;\n    this.exitEditMode();\n  }\n\n  cancelEdit(): void {\n    // Simply exit edit mode without applying changes\n    this.isEditing = false;\n    this.exitEditMode();\n  }\n}\n"]}

package/lib/esm/web/components/NotebookCell.d.ts

@@ -0,0 +1,41 @@
+import { CellModel, NotebookCssClasses } from "../types/notebook";
+export interface NotebookCellConfig {
+    cssClasses?: NotebookCssClasses;
+    markdownParser?: (content: string) => string;
+    showDeleteButton?: boolean;
+    showMoveButtons?: boolean;
+    onStartEdit?: (cellId: string) => void;
+    onApplyEdit?: (cellId: string, newSource: string) => void;
+    onCancelEdit?: (cellId: string) => void;
+    onDelete?: (cellId: string) => void;
+    onMoveUp?: (cellId: string) => void;
+    onMoveDown?: (cellId: string) => void;
+    onToggleExpanded?: (cellId: string) => void;
+    createChildCell?: (cell: CellModel, parent: HTMLElement) => NotebookCell;
+}
+export default class NotebookCell {
+    readonly element: HTMLDivElement;
+    readonly cell: CellModel;
+    readonly config: NotebookCellConfig;
+    private childCells;
+    private editTextarea;
+    constructor(cell: CellModel, config?: NotebookCellConfig);
+    private buildRootClassName;
+    private render;
+    private renderHeader;
+    private createBadge;
+    private createControls;
+    private renderError;
+    private renderContent;
+    private renderPreviewMode;
+    private renderEditMode;
+    private renderChildren;
+    private handleStartEdit;
+    private handleApplyEdit;
+    private handleCancelEdit;
+    private handleDelete;
+    private handleToggleExpanded;
+    getEditSource(): string;
+    update(newCell: CellModel): void;
+    destroy(): void;
+}

package/lib/esm/web/components/NotebookCell.js

@@ -0,0 +1,266 @@
+import { isBlock, isLine, isRawBlock } from "../../block";
+import { getCellTypeBadge } from "../types/notebook";
+export default class NotebookCell {
+    constructor(cell, config = {}) {
+        this.childCells = [];
+        this.editTextarea = null;
+        this.cell = cell;
+        this.config = config;
+        this.element = document.createElement("div");
+        this.element.className = this.buildRootClassName();
+        this.element.dataset.cellId = cell.state.id;
+        this.element.dataset.depth = String(cell.state.depth);
+        this.render();
+    }
+    buildRootClassName() {
+        var _a;
+        const classes = [
+            "notebook-cell",
+            `notebook-cell-${this.cell.state.type}`,
+            `notebook-cell-depth-${this.cell.state.depth}`,
+        ];
+        if (this.cell.state.isEditing) {
+            classes.push("notebook-cell-editing");
+        }
+        if (this.cell.state.hasError) {
+            classes.push("notebook-cell-error");
+        }
+        if (!this.cell.state.isExpanded && this.cell.children.length > 0) {
+            classes.push("notebook-cell-collapsed");
+        }
+        if ((_a = this.config.cssClasses) === null || _a === void 0 ? void 0 : _a.cell) {
+            classes.push(this.config.cssClasses.cell);
+        }
+        return classes.join(" ");
+    }
+    render() {
+        this.element.innerHTML = "";
+        this.renderHeader();
+        if (this.cell.state.hasError && this.cell.state.errorMessage) {
+            this.renderError();
+        }
+        this.renderContent();
+        if (this.cell.state.isExpanded && this.cell.children.length > 0) {
+            this.renderChildren();
+        }
+    }
+    renderHeader() {
+        var _a;
+        const header = document.createElement("div");
+        header.className = "notebook-cell-header";
+        if ((_a = this.config.cssClasses) === null || _a === void 0 ? void 0 : _a.cellHeader) {
+            header.className += " " + this.config.cssClasses.cellHeader;
+        }
+        const leftSide = document.createElement("div");
+        leftSide.className = "notebook-cell-header-left";
+        const badge = this.createBadge();
+        leftSide.appendChild(badge);
+        if (isBlock(this.cell.blockItem)) {
+            const block = this.cell.blockItem;
+            if (block.name) {
+                const nameSpan = document.createElement("span");
+                nameSpan.className = "notebook-cell-name";
+                nameSpan.textContent = block.name;
+                leftSide.appendChild(nameSpan);
+            }
+        }
+        if (this.cell.children.length > 0) {
+            const expandBtn = document.createElement("button");
+            expandBtn.className = "notebook-btn notebook-expand-btn";
+            expandBtn.innerHTML = this.cell.state.isExpanded
+                ? '<svg width="12" height="12" viewBox="0 0 12 12"><path d="M2 4l4 4 4-4" stroke="currentColor" fill="none"/></svg>'
+                : '<svg width="12" height="12" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" stroke="currentColor" fill="none"/></svg>';
+            expandBtn.title = this.cell.state.isExpanded ? "Collapse" : "Expand";
+            expandBtn.addEventListener("click", () => this.handleToggleExpanded());
+            leftSide.appendChild(expandBtn);
+            const countSpan = document.createElement("span");
+            countSpan.className = "notebook-cell-child-count";
+            countSpan.textContent = `(${this.cell.children.length})`;
+            leftSide.appendChild(countSpan);
+        }
+        header.appendChild(leftSide);
+        const controls = this.createControls();
+        header.appendChild(controls);
+        this.element.appendChild(header);
+    }
+    createBadge() {
+        const badgeInfo = getCellTypeBadge(this.cell.state.type);
+        const badge = document.createElement("span");
+        badge.className = `notebook-cell-badge ${badgeInfo.cssClass}`;
+        badge.textContent = badgeInfo.label;
+        return badge;
+    }
+    createControls() {
+        var _a;
+        const controls = document.createElement("div");
+        controls.className = "notebook-cell-controls";
+        if ((_a = this.config.cssClasses) === null || _a === void 0 ? void 0 : _a.cellControls) {
+            controls.className += " " + this.config.cssClasses.cellControls;
+        }
+        if (this.config.showMoveButtons && !this.cell.state.isEditing) {
+            const moveUpBtn = document.createElement("button");
+            moveUpBtn.className = "notebook-btn notebook-move-btn";
+            moveUpBtn.innerHTML = "↑";
+            moveUpBtn.title = "Move up";
+            moveUpBtn.addEventListener("click", () => { var _a, _b; return (_b = (_a = this.config).onMoveUp) === null || _b === void 0 ? void 0 : _b.call(_a, this.cell.state.id); });
+            controls.appendChild(moveUpBtn);
+            const moveDownBtn = document.createElement("button");
+            moveDownBtn.className = "notebook-btn notebook-move-btn";
+            moveDownBtn.innerHTML = "↓";
+            moveDownBtn.title = "Move down";
+            moveDownBtn.addEventListener("click", () => { var _a, _b; return (_b = (_a = this.config).onMoveDown) === null || _b === void 0 ? void 0 : _b.call(_a, this.cell.state.id); });
+            controls.appendChild(moveDownBtn);
+        }
+        const editBtn = document.createElement("button");
+        editBtn.className = "notebook-btn notebook-edit-btn";
+        if (this.cell.state.isEditing) {
+            editBtn.textContent = "Cancel";
+            editBtn.addEventListener("click", () => this.handleCancelEdit());
+        }
+        else {
+            editBtn.textContent = "Edit";
+            editBtn.addEventListener("click", () => this.handleStartEdit());
+        }
+        controls.appendChild(editBtn);
+        if (this.config.showDeleteButton && !this.cell.state.isEditing) {
+            const deleteBtn = document.createElement("button");
+            deleteBtn.className = "notebook-btn notebook-delete-btn";
+            deleteBtn.textContent = "Delete";
+            deleteBtn.addEventListener("click", () => this.handleDelete());
+            controls.appendChild(deleteBtn);
+        }
+        return controls;
+    }
+    renderError() {
+        var _a;
+        const errorDiv = document.createElement("div");
+        errorDiv.className = "notebook-cell-error-message";
+        if ((_a = this.config.cssClasses) === null || _a === void 0 ? void 0 : _a.errorMessage) {
+            errorDiv.className += " " + this.config.cssClasses.errorMessage;
+        }
+        errorDiv.textContent = this.cell.state.errorMessage || "Error";
+        this.element.appendChild(errorDiv);
+    }
+    renderContent() {
+        var _a;
+        const content = document.createElement("div");
+        content.className = "notebook-cell-content";
+        if ((_a = this.config.cssClasses) === null || _a === void 0 ? void 0 : _a.cellContent) {
+            content.className += " " + this.config.cssClasses.cellContent;
+        }
+        if (this.cell.state.isEditing) {
+            this.renderEditMode(content);
+        }
+        else {
+            this.renderPreviewMode(content);
+        }
+        this.element.appendChild(content);
+    }
+    renderPreviewMode(container) {
+        if (isRawBlock(this.cell.blockItem)) {
+            const rawBlock = this.cell.blockItem;
+            const contentDiv = document.createElement("div");
+            contentDiv.className = "notebook-rawblock-content";
+            if (this.config.markdownParser && rawBlock.contentType === "md") {
+                contentDiv.innerHTML = this.config.markdownParser(rawBlock.content);
+            }
+            else {
+                contentDiv.textContent = rawBlock.content;
+            }
+            container.appendChild(contentDiv);
+        }
+        else {
+            const preview = document.createElement("div");
+            preview.className = "notebook-notation-preview";
+            if (isLine(this.cell.blockItem)) {
+                preview.textContent = "[Line content]";
+            }
+            else if (isBlock(this.cell.blockItem)) {
+                const block = this.cell.blockItem;
+                const itemCount = block.blockItems.length;
+                preview.textContent = `[${block.blockType}: ${itemCount} item${itemCount !== 1 ? "s" : ""}]`;
+            }
+            container.appendChild(preview);
+        }
+    }
+    renderEditMode(container) {
+        var _a;
+        this.editTextarea = document.createElement("textarea");
+        this.editTextarea.className = "notebook-edit-textarea";
+        if ((_a = this.config.cssClasses) === null || _a === void 0 ? void 0 : _a.editTextarea) {
+            this.editTextarea.className += " " + this.config.cssClasses.editTextarea;
+        }
+        this.editTextarea.value = this.cell.source;
+        this.editTextarea.rows = Math.max(3, this.cell.source.split("\n").length + 1);
+        container.appendChild(this.editTextarea);
+        const actions = document.createElement("div");
+        actions.className = "notebook-edit-actions";
+        const applyBtn = document.createElement("button");
+        applyBtn.className = "notebook-btn notebook-apply-btn";
+        applyBtn.textContent = "Apply";
+        applyBtn.addEventListener("click", () => this.handleApplyEdit());
+        actions.appendChild(applyBtn);
+        const cancelBtn = document.createElement("button");
+        cancelBtn.className = "notebook-btn notebook-cancel-btn";
+        cancelBtn.textContent = "Cancel";
+        cancelBtn.addEventListener("click", () => this.handleCancelEdit());
+        actions.appendChild(cancelBtn);
+        container.appendChild(actions);
+        setTimeout(() => { var _a; return (_a = this.editTextarea) === null || _a === void 0 ? void 0 : _a.focus(); }, 0);
+    }
+    renderChildren() {
+        const childrenContainer = document.createElement("div");
+        childrenContainer.className = "notebook-cell-children";
+        this.element.appendChild(childrenContainer);
+        this.childCells = [];
+        for (const childModel of this.cell.children) {
+            if (this.config.createChildCell) {
+                const childCell = this.config.createChildCell(childModel, childrenContainer);
+                this.childCells.push(childCell);
+            }
+            else {
+                const childCell = new NotebookCell(childModel, this.config);
+                childrenContainer.appendChild(childCell.element);
+                this.childCells.push(childCell);
+            }
+        }
+    }
+    handleStartEdit() {
+        var _a, _b;
+        (_b = (_a = this.config).onStartEdit) === null || _b === void 0 ? void 0 : _b.call(_a, this.cell.state.id);
+    }
+    handleApplyEdit() {
+        var _a, _b, _c;
+        const newSource = ((_a = this.editTextarea) === null || _a === void 0 ? void 0 : _a.value) || "";
+        (_c = (_b = this.config).onApplyEdit) === null || _c === void 0 ? void 0 : _c.call(_b, this.cell.state.id, newSource);
+    }
+    handleCancelEdit() {
+        var _a, _b;
+        (_b = (_a = this.config).onCancelEdit) === null || _b === void 0 ? void 0 : _b.call(_a, this.cell.state.id);
+    }
+    handleDelete() {
+        var _a, _b;
+        (_b = (_a = this.config).onDelete) === null || _b === void 0 ? void 0 : _b.call(_a, this.cell.state.id);
+    }
+    handleToggleExpanded() {
+        var _a, _b;
+        (_b = (_a = this.config).onToggleExpanded) === null || _b === void 0 ? void 0 : _b.call(_a, this.cell.state.id);
+    }
+    getEditSource() {
+        var _a;
+        return ((_a = this.editTextarea) === null || _a === void 0 ? void 0 : _a.value) || this.cell.source;
+    }
+    update(newCell) {
+        this.cell = newCell;
+        this.element.className = this.buildRootClassName();
+        this.render();
+    }
+    destroy() {
+        for (const child of this.childCells) {
+            child.destroy();
+        }
+        this.childCells = [];
+        this.element.remove();
+    }
+}
+//# sourceMappingURL=NotebookCell.js.map

package/lib/esm/web/components/NotebookCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotebookCell.js","sourceRoot":"","sources":["../../../../src/web/components/NotebookCell.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAmB,MAAM,aAAa,CAAC;AAC3E,OAAO,EAA4B,gBAAgB,EAAsB,MAAM,mBAAmB,CAAC;AAqDnG,MAAM,CAAC,OAAO,OAAO,YAAY;IAsB/B,YAAY,IAAe,EAAE,SAA6B,EAAE;QAXpD,eAAU,GAAmB,EAAE,CAAC;QAGhC,iBAAY,GAA+B,IAAI,CAAC;QAStD,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QACjB,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;QAGrB,IAAI,CAAC,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC7C,IAAI,CAAC,OAAO,CAAC,SAAS,GAAG,IAAI,CAAC,kBAAkB,EAAE,CAAC;QACnD,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC;QAC5C,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QAGtD,IAAI,CAAC,MAAM,EAAE,CAAC;IAChB,CAAC;IAKO,kBAAkB;;QACxB,MAAM,OAAO,GAAG;YACd,eAAe;YACf,iBAAiB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE;YACvC,uBAAuB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE;SAC/C,CAAC;QAEF,IAAI,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,CAAC;YAC9B,OAAO,CAAC,IAAI,CAAC,uBAAuB,CAAC,CAAC;QACxC,CAAC;QACD,IAAI,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;YAC7B,OAAO,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC;QACtC,CAAC;QACD,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YACjE,OAAO,CAAC,IAAI,CAAC,yBAAyB,CAAC,CAAC;QAC1C,CAAC;QAED,IAAI,MAAA,IAAI,CAAC,MAAM,CAAC,UAAU,0CAAE,IAAI,EAAE,CAAC;YACjC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;QAC5C,CAAC;QAED,OAAO,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC3B,CAAC;IAKO,MAAM;QACZ,IAAI,CAAC,OAAO,CAAC,SAAS,GAAG,EAAE,CAAC;QAG5B,IAAI,CAAC,YAAY,EAAE,CAAC;QAGpB,IAAI,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,IAAI,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,YAAY,EAAE,CAAC;YAC7D,IAAI,CAAC,WAAW,EAAE,CAAC;QACrB,CAAC;QAGD,IAAI,CAAC,aAAa,EAAE,CAAC;QAGrB,IAAI,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YAChE,IAAI,CAAC,cAAc,EAAE,CAAC;QACxB,CAAC;IACH,CAAC;IAKO,YAAY;;QAClB,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC7C,MAAM,CAAC,SAAS,GAAG,sBAAsB,CAAC;QAC1C,IAAI,MAAA,IAAI,CAAC,MAAM,CAAC,UAAU,0CAAE,UAAU,EAAE,CAAC;YACvC,MAAM,CAAC,SAAS,IAAI,GAAG,GAAG,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,UAAU,CAAC;QAC9D,CAAC;QAGD,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC/C,QAAQ,CAAC,SAAS,GAAG,2BAA2B,CAAC;QAGjD,MAAM,KAAK,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;QACjC,QAAQ,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;QAG5B,IAAI,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE,CAAC;YACjC,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,SAAkB,CAAC;YAC3C,IAAI,KAAK,CAAC,IAAI,EAAE,CAAC;gBACf,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;gBAChD,QAAQ,CAAC,SAAS,GAAG,oBAAoB,CAAC;gBAC1C,QAAQ,CAAC,WAAW,GAAG,KAAK,CAAC,IAAI,CAAC;gBAClC,QAAQ,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;YACjC,CAAC;QACH,CAAC;QAGD,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YAClC,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;YACnD,SAAS,CAAC,SAAS,GAAG,kCAAkC,CAAC;YACzD,SAAS,CAAC,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU;gBAC9C,CAAC,CAAC,kHAAkH;gBACpH,CAAC,CAAC,kHAAkH,CAAC;YACvH,SAAS,CAAC,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC;YACrE,SAAS,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,oBAAoB,EAAE,CAAC,CAAC;YACvE,QAAQ,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;YAGhC,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;YACjD,SAAS,CAAC,SAAS,GAAG,2BAA2B,CAAC;YAClD,SAAS,CAAC,WAAW,GAAG,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC;YACzD,QAAQ,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;QAClC,CAAC;QAED,MAAM,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;QAG7B,MAAM,QAAQ,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC;QACvC,MAAM,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;QAE7B,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;IACnC,CAAC;IAKO,WAAW;QACjB,MAAM,SAAS,GAAG,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;QACzD,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QAC7C,KAAK,CAAC,SAAS,GAAG,uBAAuB,SAAS,CAAC,QAAQ,EAAE,CAAC;QAC9D,KAAK,CAAC,WAAW,GAAG,SAAS,CAAC,KAAK,CAAC;QACpC,OAAO,KAAK,CAAC;IACf,CAAC;IAKO,cAAc;;QACpB,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC/C,QAAQ,CAAC,SAAS,GAAG,wBAAwB,CAAC;QAC9C,IAAI,MAAA,IAAI,CAAC,MAAM,CAAC,UAAU,0CAAE,YAAY,EAAE,CAAC;YACzC,QAAQ,CAAC,SAAS,IAAI,GAAG,GAAG,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,YAAY,CAAC;QAClE,CAAC;QAGD,IAAI,IAAI,CAAC,MAAM,CAAC,eAAe,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,CAAC;YAC9D,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;YACnD,SAAS,CAAC,SAAS,GAAG,gCAAgC,CAAC;YACvD,SAAS,CAAC,SAAS,GAAG,GAAG,CAAC;YAC1B,SAAS,CAAC,KAAK,GAAG,SAAS,CAAC;YAC5B,SAAS,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE,eAAC,OAAA,MAAA,MAAA,IAAI,CAAC,MAAM,EAAC,QAAQ,mDAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,CAAA,EAAA,CAAC,CAAC;YACtF,QAAQ,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;YAEhC,MAAM,WAAW,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;YACrD,WAAW,CAAC,SAAS,GAAG,gCAAgC,CAAC;YACzD,WAAW,CAAC,SAAS,GAAG,GAAG,CAAC;YAC5B,WAAW,CAAC,KAAK,GAAG,WAAW,CAAC;YAChC,WAAW,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE,eAAC,OAAA,MAAA,MAAA,IAAI,CAAC,MAAM,EAAC,UAAU,mDAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,CAAA,EAAA,CAAC,CAAC;YAC1F,QAAQ,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC;QACpC,CAAC;QAGD,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QACjD,OAAO,CAAC,SAAS,GAAG,gCAAgC,CAAC;QACrD,IAAI,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,CAAC;YAC9B,OAAO,CAAC,WAAW,GAAG,QAAQ,CAAC;YAC/B,OAAO,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC;QACnE,CAAC;aAAM,CAAC;YACN,OAAO,CAAC,WAAW,GAAG,MAAM,CAAC;YAC7B,OAAO,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,EAAE,CAAC,CAAC;QAClE,CAAC;QACD,QAAQ,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;QAG9B,IAAI,IAAI,CAAC,MAAM,CAAC,gBAAgB,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,CAAC;YAC/D,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;YACnD,SAAS,CAAC,SAAS,GAAG,kCAAkC,CAAC;YACzD,SAAS,CAAC,WAAW,GAAG,QAAQ,CAAC;YACjC,SAAS,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC;YAC/D,QAAQ,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;QAClC,CAAC;QAED,OAAO,QAAQ,CAAC;IAClB,CAAC;IAKO,WAAW;;QACjB,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC/C,QAAQ,CAAC,SAAS,GAAG,6BAA6B,CAAC;QACnD,IAAI,MAAA,IAAI,CAAC,MAAM,CAAC,UAAU,0CAAE,YAAY,EAAE,CAAC;YACzC,QAAQ,CAAC,SAAS,IAAI,GAAG,GAAG,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,YAAY,CAAC;QAClE,CAAC;QACD,QAAQ,CAAC,WAAW,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,YAAY,IAAI,OAAO,CAAC;QAC/D,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;IACrC,CAAC;IAKO,aAAa;;QACnB,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC9C,OAAO,CAAC,SAAS,GAAG,uBAAuB,CAAC;QAC5C,IAAI,MAAA,IAAI,CAAC,MAAM,CAAC,UAAU,0CAAE,WAAW,EAAE,CAAC;YACxC,OAAO,CAAC,SAAS,IAAI,GAAG,GAAG,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,WAAW,CAAC;QAChE,CAAC;QAED,IAAI,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,CAAC;YAC9B,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC;QAC/B,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC;QAClC,CAAC;QAED,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;IACpC,CAAC;IAKO,iBAAiB,CAAC,SAAsB;QAC9C,IAAI,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE,CAAC;YACpC,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,SAAqB,CAAC;YACjD,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;YACjD,UAAU,CAAC,SAAS,GAAG,2BAA2B,CAAC;YAEnD,IAAI,IAAI,CAAC,MAAM,CAAC,cAAc,IAAI,QAAQ,CAAC,WAAW,KAAK,IAAI,EAAE,CAAC;gBAChE,UAAU,CAAC,SAAS,GAAG,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;YACtE,CAAC;iBAAM,CAAC;gBACN,UAAU,CAAC,WAAW,GAAG,QAAQ,CAAC,OAAO,CAAC;YAC5C,CAAC;YACD,SAAS,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;QACpC,CAAC;aAAM,CAAC;YAEN,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;YAC9C,OAAO,CAAC,SAAS,GAAG,2BAA2B,CAAC;YAEhD,IAAI,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE,CAAC;gBAChC,OAAO,CAAC,WAAW,GAAG,gBAAgB,CAAC;YACzC,CAAC;iBAAM,IAAI,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE,CAAC;gBACxC,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,SAAkB,CAAC;gBAC3C,MAAM,SAAS,GAAG,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC;gBAC1C,OAAO,CAAC,WAAW,GAAG,IAAI,KAAK,CAAC,SAAS,KAAK,SAAS,QAAQ,SAAS,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,CAAC;YAC/F,CAAC;YACD,SAAS,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;QACjC,CAAC;IACH,CAAC;IAKO,cAAc,CAAC,SAAsB;;QAE3C,IAAI,CAAC,YAAY,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;QACvD,IAAI,CAAC,YAAY,CAAC,SAAS,GAAG,wBAAwB,CAAC;QACvD,IAAI,MAAA,IAAI,CAAC,MAAM,CAAC,UAAU,0CAAE,YAAY,EAAE,CAAC;YACzC,IAAI,CAAC,YAAY,CAAC,SAAS,IAAI,GAAG,GAAG,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,YAAY,CAAC;QAC3E,CAAC;QACD,IAAI,CAAC,YAAY,CAAC,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC;QAC3C,IAAI,CAAC,YAAY,CAAC,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;QAC9E,SAAS,CAAC,WAAW,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QAGzC,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC9C,OAAO,CAAC,SAAS,GAAG,uBAAuB,CAAC;QAE5C,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QAClD,QAAQ,CAAC,SAAS,GAAG,iCAAiC,CAAC;QACvD,QAAQ,CAAC,WAAW,GAAG,OAAO,CAAC;QAC/B,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,EAAE,CAAC,CAAC;QACjE,OAAO,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;QAE9B,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QACnD,SAAS,CAAC,SAAS,GAAG,kCAAkC,CAAC;QACzD,SAAS,CAAC,WAAW,GAAG,QAAQ,CAAC;QACjC,SAAS,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC;QACnE,OAAO,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;QAE/B,SAAS,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;QAG/B,UAAU,CAAC,GAAG,EAAE,WAAC,OAAA,MAAA,IAAI,CAAC,YAAY,0CAAE,KAAK,EAAE,CAAA,EAAA,EAAE,CAAC,CAAC,CAAC;IAClD,CAAC;IAKO,cAAc;QACpB,MAAM,iBAAiB,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QACxD,iBAAiB,CAAC,SAAS,GAAG,wBAAwB,CAAC;QACvD,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,iBAAiB,CAAC,CAAC;QAG5C,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC;QAGrB,KAAK,MAAM,UAAU,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;YAC5C,IAAI,IAAI,CAAC,MAAM,CAAC,eAAe,EAAE,CAAC;gBAChC,MAAM,SAAS,GAAG,IAAI,CAAC,MAAM,CAAC,eAAe,CAAC,UAAU,EAAE,iBAAiB,CAAC,CAAC;gBAC7E,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;YAClC,CAAC;iBAAM,CAAC;gBAEN,MAAM,SAAS,GAAG,IAAI,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;gBAC5D,iBAAiB,CAAC,WAAW,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;gBACjD,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;YAClC,CAAC;QACH,CAAC;IACH,CAAC;IAMO,eAAe;;QACrB,MAAA,MAAA,IAAI,CAAC,MAAM,EAAC,WAAW,mDAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;IAChD,CAAC;IAEO,eAAe;;QACrB,MAAM,SAAS,GAAG,CAAA,MAAA,IAAI,CAAC,YAAY,0CAAE,KAAK,KAAI,EAAE,CAAC;QACjD,MAAA,MAAA,IAAI,CAAC,MAAM,EAAC,WAAW,mDAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,EAAE,SAAS,CAAC,CAAC;IAC3D,CAAC;IAEO,gBAAgB;;QACtB,MAAA,MAAA,IAAI,CAAC,MAAM,EAAC,YAAY,mDAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;IACjD,CAAC;IAEO,YAAY;;QAClB,MAAA,MAAA,IAAI,CAAC,MAAM,EAAC,QAAQ,mDAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;IAC7C,CAAC;IAEO,oBAAoB;;QAC1B,MAAA,MAAA,IAAI,CAAC,MAAM,EAAC,gBAAgB,mDAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;IACrD,CAAC;IASD,aAAa;;QACX,OAAO,CAAA,MAAA,IAAI,CAAC,YAAY,0CAAE,KAAK,KAAI,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC;IACtD,CAAC;IAKD,MAAM,CAAC,OAAkB;QAEtB,IAA4B,CAAC,IAAI,GAAG,OAAO,CAAC;QAG7C,IAAI,CAAC,OAAO,CAAC,SAAS,GAAG,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAGnD,IAAI,CAAC,MAAM,EAAE,CAAC;IAChB,CAAC;IAKD,OAAO;QAEL,KAAK,MAAM,KAAK,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACpC,KAAK,CAAC,OAAO,EAAE,CAAC;QAClB,CAAC;QACD,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC;QAGrB,IAAI,CAAC,OAAO,CAAC,MAAM,EAAE,CAAC;IACxB,CAAC;CACF","sourcesContent":["/**\n * NotebookCell - Individual cell component for notebook-style editing.\n *\n * A cell represents a single BlockItem (Block, Line, or RawBlock) with\n * preview/edit modes, controls, and optional nested children.\n */\n\nimport { isBlock, isLine, isRawBlock, Block, RawBlock } from \"../../block\";\nimport { CellModel, CellTypeBadge, getCellTypeBadge, NotebookCssClasses } from \"../types/notebook\";\n\n/**\n * Configuration for NotebookCell.\n */\nexport interface NotebookCellConfig {\n  /** CSS classes for cell elements */\n  cssClasses?: NotebookCssClasses;\n\n  /** Markdown parser for RawBlock content */\n  markdownParser?: (content: string) => string;\n\n  /** Whether to show delete button */\n  showDeleteButton?: boolean;\n\n  /** Whether to show move buttons (for reordering) */\n  showMoveButtons?: boolean;\n\n  /** Callback when edit is started */\n  onStartEdit?: (cellId: string) => void;\n\n  /** Callback when edit is applied */\n  onApplyEdit?: (cellId: string, newSource: string) => void;\n\n  /** Callback when edit is cancelled */\n  onCancelEdit?: (cellId: string) => void;\n\n  /** Callback when cell is deleted */\n  onDelete?: (cellId: string) => void;\n\n  /** Callback when cell is moved up */\n  onMoveUp?: (cellId: string) => void;\n\n  /** Callback when cell is moved down */\n  onMoveDown?: (cellId: string) => void;\n\n  /** Callback when expand/collapse is toggled */\n  onToggleExpanded?: (cellId: string) => void;\n\n  /** Factory to create child cells (for nesting) */\n  createChildCell?: (cell: CellModel, parent: HTMLElement) => NotebookCell;\n}\n\n/**\n * NotebookCell renders a single cell with header, content, and controls.\n *\n * Features:\n * - Type badge showing block type\n * - Preview mode showing rendered content\n * - Edit mode with textarea\n * - Controls for edit, delete, move\n * - Support for nested children\n */\nexport default class NotebookCell {\n  /** The root element for this cell */\n  readonly element: HTMLDivElement;\n\n  /** The cell model */\n  readonly cell: CellModel;\n\n  /** Configuration */\n  readonly config: NotebookCellConfig;\n\n  /** Child cell instances (for nested blocks) */\n  private childCells: NotebookCell[] = [];\n\n  /** Reference to textarea in edit mode */\n  private editTextarea: HTMLTextAreaElement | null = null;\n\n  /**\n   * Creates a new NotebookCell.\n   *\n   * @param cell The cell model to render\n   * @param config Configuration options\n   */\n  constructor(cell: CellModel, config: NotebookCellConfig = {}) {\n    this.cell = cell;\n    this.config = config;\n\n    // Create root element\n    this.element = document.createElement(\"div\");\n    this.element.className = this.buildRootClassName();\n    this.element.dataset.cellId = cell.state.id;\n    this.element.dataset.depth = String(cell.state.depth);\n\n    // Render content\n    this.render();\n  }\n\n  /**\n   * Builds the root element class name.\n   */\n  private buildRootClassName(): string {\n    const classes = [\n      \"notebook-cell\",\n      `notebook-cell-${this.cell.state.type}`,\n      `notebook-cell-depth-${this.cell.state.depth}`,\n    ];\n\n    if (this.cell.state.isEditing) {\n      classes.push(\"notebook-cell-editing\");\n    }\n    if (this.cell.state.hasError) {\n      classes.push(\"notebook-cell-error\");\n    }\n    if (!this.cell.state.isExpanded && this.cell.children.length > 0) {\n      classes.push(\"notebook-cell-collapsed\");\n    }\n\n    if (this.config.cssClasses?.cell) {\n      classes.push(this.config.cssClasses.cell);\n    }\n\n    return classes.join(\" \");\n  }\n\n  /**\n   * Renders the cell content.\n   */\n  private render(): void {\n    this.element.innerHTML = \"\";\n\n    // Render header\n    this.renderHeader();\n\n    // Render error message if any\n    if (this.cell.state.hasError && this.cell.state.errorMessage) {\n      this.renderError();\n    }\n\n    // Render content (preview or edit mode)\n    this.renderContent();\n\n    // Render children if expanded\n    if (this.cell.state.isExpanded && this.cell.children.length > 0) {\n      this.renderChildren();\n    }\n  }\n\n  /**\n   * Renders the cell header.\n   */\n  private renderHeader(): void {\n    const header = document.createElement(\"div\");\n    header.className = \"notebook-cell-header\";\n    if (this.config.cssClasses?.cellHeader) {\n      header.className += \" \" + this.config.cssClasses.cellHeader;\n    }\n\n    // Left side: badge, name, expand/collapse\n    const leftSide = document.createElement(\"div\");\n    leftSide.className = \"notebook-cell-header-left\";\n\n    // Type badge\n    const badge = this.createBadge();\n    leftSide.appendChild(badge);\n\n    // Name (if block has one)\n    if (isBlock(this.cell.blockItem)) {\n      const block = this.cell.blockItem as Block;\n      if (block.name) {\n        const nameSpan = document.createElement(\"span\");\n        nameSpan.className = \"notebook-cell-name\";\n        nameSpan.textContent = block.name;\n        leftSide.appendChild(nameSpan);\n      }\n    }\n\n    // Expand/collapse toggle for cells with children\n    if (this.cell.children.length > 0) {\n      const expandBtn = document.createElement(\"button\");\n      expandBtn.className = \"notebook-btn notebook-expand-btn\";\n      expandBtn.innerHTML = this.cell.state.isExpanded\n        ? '<svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"><path d=\"M2 4l4 4 4-4\" stroke=\"currentColor\" fill=\"none\"/></svg>'\n        : '<svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"><path d=\"M4 2l4 4-4 4\" stroke=\"currentColor\" fill=\"none\"/></svg>';\n      expandBtn.title = this.cell.state.isExpanded ? \"Collapse\" : \"Expand\";\n      expandBtn.addEventListener(\"click\", () => this.handleToggleExpanded());\n      leftSide.appendChild(expandBtn);\n\n      // Child count\n      const countSpan = document.createElement(\"span\");\n      countSpan.className = \"notebook-cell-child-count\";\n      countSpan.textContent = `(${this.cell.children.length})`;\n      leftSide.appendChild(countSpan);\n    }\n\n    header.appendChild(leftSide);\n\n    // Right side: controls\n    const controls = this.createControls();\n    header.appendChild(controls);\n\n    this.element.appendChild(header);\n  }\n\n  /**\n   * Creates the type badge element.\n   */\n  private createBadge(): HTMLSpanElement {\n    const badgeInfo = getCellTypeBadge(this.cell.state.type);\n    const badge = document.createElement(\"span\");\n    badge.className = `notebook-cell-badge ${badgeInfo.cssClass}`;\n    badge.textContent = badgeInfo.label;\n    return badge;\n  }\n\n  /**\n   * Creates the controls container.\n   */\n  private createControls(): HTMLDivElement {\n    const controls = document.createElement(\"div\");\n    controls.className = \"notebook-cell-controls\";\n    if (this.config.cssClasses?.cellControls) {\n      controls.className += \" \" + this.config.cssClasses.cellControls;\n    }\n\n    // Move buttons (if enabled and not in edit mode)\n    if (this.config.showMoveButtons && !this.cell.state.isEditing) {\n      const moveUpBtn = document.createElement(\"button\");\n      moveUpBtn.className = \"notebook-btn notebook-move-btn\";\n      moveUpBtn.innerHTML = \"↑\";\n      moveUpBtn.title = \"Move up\";\n      moveUpBtn.addEventListener(\"click\", () => this.config.onMoveUp?.(this.cell.state.id));\n      controls.appendChild(moveUpBtn);\n\n      const moveDownBtn = document.createElement(\"button\");\n      moveDownBtn.className = \"notebook-btn notebook-move-btn\";\n      moveDownBtn.innerHTML = \"↓\";\n      moveDownBtn.title = \"Move down\";\n      moveDownBtn.addEventListener(\"click\", () => this.config.onMoveDown?.(this.cell.state.id));\n      controls.appendChild(moveDownBtn);\n    }\n\n    // Edit/Cancel button\n    const editBtn = document.createElement(\"button\");\n    editBtn.className = \"notebook-btn notebook-edit-btn\";\n    if (this.cell.state.isEditing) {\n      editBtn.textContent = \"Cancel\";\n      editBtn.addEventListener(\"click\", () => this.handleCancelEdit());\n    } else {\n      editBtn.textContent = \"Edit\";\n      editBtn.addEventListener(\"click\", () => this.handleStartEdit());\n    }\n    controls.appendChild(editBtn);\n\n    // Delete button (if enabled and not in edit mode)\n    if (this.config.showDeleteButton && !this.cell.state.isEditing) {\n      const deleteBtn = document.createElement(\"button\");\n      deleteBtn.className = \"notebook-btn notebook-delete-btn\";\n      deleteBtn.textContent = \"Delete\";\n      deleteBtn.addEventListener(\"click\", () => this.handleDelete());\n      controls.appendChild(deleteBtn);\n    }\n\n    return controls;\n  }\n\n  /**\n   * Renders the error message.\n   */\n  private renderError(): void {\n    const errorDiv = document.createElement(\"div\");\n    errorDiv.className = \"notebook-cell-error-message\";\n    if (this.config.cssClasses?.errorMessage) {\n      errorDiv.className += \" \" + this.config.cssClasses.errorMessage;\n    }\n    errorDiv.textContent = this.cell.state.errorMessage || \"Error\";\n    this.element.appendChild(errorDiv);\n  }\n\n  /**\n   * Renders the cell content (preview or edit mode).\n   */\n  private renderContent(): void {\n    const content = document.createElement(\"div\");\n    content.className = \"notebook-cell-content\";\n    if (this.config.cssClasses?.cellContent) {\n      content.className += \" \" + this.config.cssClasses.cellContent;\n    }\n\n    if (this.cell.state.isEditing) {\n      this.renderEditMode(content);\n    } else {\n      this.renderPreviewMode(content);\n    }\n\n    this.element.appendChild(content);\n  }\n\n  /**\n   * Renders preview mode content.\n   */\n  private renderPreviewMode(container: HTMLElement): void {\n    if (isRawBlock(this.cell.blockItem)) {\n      const rawBlock = this.cell.blockItem as RawBlock;\n      const contentDiv = document.createElement(\"div\");\n      contentDiv.className = \"notebook-rawblock-content\";\n\n      if (this.config.markdownParser && rawBlock.contentType === \"md\") {\n        contentDiv.innerHTML = this.config.markdownParser(rawBlock.content);\n      } else {\n        contentDiv.textContent = rawBlock.content;\n      }\n      container.appendChild(contentDiv);\n    } else {\n      // For Line and Block, show a placeholder or summary\n      const preview = document.createElement(\"div\");\n      preview.className = \"notebook-notation-preview\";\n\n      if (isLine(this.cell.blockItem)) {\n        preview.textContent = \"[Line content]\";\n      } else if (isBlock(this.cell.blockItem)) {\n        const block = this.cell.blockItem as Block;\n        const itemCount = block.blockItems.length;\n        preview.textContent = `[${block.blockType}: ${itemCount} item${itemCount !== 1 ? \"s\" : \"\"}]`;\n      }\n      container.appendChild(preview);\n    }\n  }\n\n  /**\n   * Renders edit mode content.\n   */\n  private renderEditMode(container: HTMLElement): void {\n    // Textarea for editing\n    this.editTextarea = document.createElement(\"textarea\");\n    this.editTextarea.className = \"notebook-edit-textarea\";\n    if (this.config.cssClasses?.editTextarea) {\n      this.editTextarea.className += \" \" + this.config.cssClasses.editTextarea;\n    }\n    this.editTextarea.value = this.cell.source;\n    this.editTextarea.rows = Math.max(3, this.cell.source.split(\"\\n\").length + 1);\n    container.appendChild(this.editTextarea);\n\n    // Action buttons\n    const actions = document.createElement(\"div\");\n    actions.className = \"notebook-edit-actions\";\n\n    const applyBtn = document.createElement(\"button\");\n    applyBtn.className = \"notebook-btn notebook-apply-btn\";\n    applyBtn.textContent = \"Apply\";\n    applyBtn.addEventListener(\"click\", () => this.handleApplyEdit());\n    actions.appendChild(applyBtn);\n\n    const cancelBtn = document.createElement(\"button\");\n    cancelBtn.className = \"notebook-btn notebook-cancel-btn\";\n    cancelBtn.textContent = \"Cancel\";\n    cancelBtn.addEventListener(\"click\", () => this.handleCancelEdit());\n    actions.appendChild(cancelBtn);\n\n    container.appendChild(actions);\n\n    // Focus textarea\n    setTimeout(() => this.editTextarea?.focus(), 0);\n  }\n\n  /**\n   * Renders child cells.\n   */\n  private renderChildren(): void {\n    const childrenContainer = document.createElement(\"div\");\n    childrenContainer.className = \"notebook-cell-children\";\n    this.element.appendChild(childrenContainer);\n\n    // Clear existing child cells\n    this.childCells = [];\n\n    // Create child cells\n    for (const childModel of this.cell.children) {\n      if (this.config.createChildCell) {\n        const childCell = this.config.createChildCell(childModel, childrenContainer);\n        this.childCells.push(childCell);\n      } else {\n        // Default: create NotebookCell with same config\n        const childCell = new NotebookCell(childModel, this.config);\n        childrenContainer.appendChild(childCell.element);\n        this.childCells.push(childCell);\n      }\n    }\n  }\n\n  // ============================================\n  // Event handlers\n  // ============================================\n\n  private handleStartEdit(): void {\n    this.config.onStartEdit?.(this.cell.state.id);\n  }\n\n  private handleApplyEdit(): void {\n    const newSource = this.editTextarea?.value || \"\";\n    this.config.onApplyEdit?.(this.cell.state.id, newSource);\n  }\n\n  private handleCancelEdit(): void {\n    this.config.onCancelEdit?.(this.cell.state.id);\n  }\n\n  private handleDelete(): void {\n    this.config.onDelete?.(this.cell.state.id);\n  }\n\n  private handleToggleExpanded(): void {\n    this.config.onToggleExpanded?.(this.cell.state.id);\n  }\n\n  // ============================================\n  // Public methods\n  // ============================================\n\n  /**\n   * Gets the current source text from the edit textarea.\n   */\n  getEditSource(): string {\n    return this.editTextarea?.value || this.cell.source;\n  }\n\n  /**\n   * Updates the cell with a new model and re-renders.\n   */\n  update(newCell: CellModel): void {\n    // Update reference (cast away readonly for internal update)\n    (this as { cell: CellModel }).cell = newCell;\n\n    // Update class name\n    this.element.className = this.buildRootClassName();\n\n    // Re-render\n    this.render();\n  }\n\n  /**\n   * Destroys the cell and cleans up resources.\n   */\n  destroy(): void {\n    // Destroy child cells\n    for (const child of this.childCells) {\n      child.destroy();\n    }\n    this.childCells = [];\n\n    // Remove element\n    this.element.remove();\n  }\n}\n"]}