notations 1.0.2 → 1.0.4

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

@@ -0,0 +1,269 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const block_1 = require("../../block");
+const notebook_1 = require("../types/notebook");
+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 ((0, block_1.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 = (0, notebook_1.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 ((0, block_1.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 ((0, block_1.isLine)(this.cell.blockItem)) {
+                preview.textContent = "[Line content]";
+            }
+            else if ((0, block_1.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();
+    }
+}
+exports.default = NotebookCell;
+//# sourceMappingURL=NotebookCell.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NotebookCell.js","sourceRoot":"","sources":["../../../../src/web/components/NotebookCell.ts"],"names":[],"mappings":"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","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"]}

package/lib/cjs/web/components/NotebookView.d.ts

@@ -0,0 +1,37 @@
+import { GridLayoutGroup } from "../../grids";
+import { Notation } from "../../notation";
+import { NotebookConfig, CellModel, CellOperations } from "../types/notebook";
+export default class NotebookView implements CellOperations {
+    readonly rootElement: HTMLDivElement;
+    readonly config: NotebookConfig;
+    readonly gridLayoutGroup: GridLayoutGroup;
+    private notation;
+    private notationSource;
+    private cells;
+    private cellElements;
+    private cellNotationViews;
+    private layoutChangeUnsubscribe;
+    constructor(container: HTMLElement, config?: Partial<NotebookConfig>);
+    loadNotation(source: string): void;
+    getNotation(): Notation | null;
+    getCells(): CellModel[];
+    getVisibleCells(): CellModel[];
+    getCell(cellId: string): CellModel | null;
+    private render;
+    private renderCell;
+    private renderCellHeader;
+    private renderCellPreviewMode;
+    private renderCellEditMode;
+    private renderAddCellButton;
+    private handleLayoutChange;
+    startEdit(cellId: string): void;
+    applyEdit(cellId: string, newSource: string): void;
+    cancelEdit(cellId: string): void;
+    deleteCell(cellId: string): void;
+    moveCell(cellId: string, targetIndex: number): void;
+    insertCell(index: number, source: string): CellModel;
+    toggleExpanded(cellId: string): void;
+    private replaceCellInTree;
+    private rerenderCell;
+    destroy(): void;
+}