notations 1.0.2 → 1.0.4

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

@@ -0,0 +1 @@
+{"version":3,"file":"SideBySideEditor.js","sourceRoot":"","sources":["../../../../src/web/components/SideBySideEditor.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * SideBySideEditor - Manages editor and output components for side-by-side editing.\n *\n * This component handles:\n * - Creating editor textarea and NotationView output\n * - Scroll synchronization between editor and output\n * - Parsing and rendering on source changes\n *\n * Layout is NOT managed by this component - the client is responsible for\n * arranging the editor and output elements (e.g., using CSS grid, flexbox,\n * DockView, or any other layout system).\n */\n\nimport { load } from \"../../loader\";\nimport { NotationView } from \"../../carnatic\";\nimport { GridLayoutGroup } from \"../../grids\";\nimport { Notation } from \"../../notation\";\nimport { GlobalBeatLayout } from \"../../beats\";\n\n/**\n * Configuration for SideBySideEditor.\n */\nexport interface SideBySideEditorConfig {\n  /**\n   * Initial source text.\n   */\n  initialSource?: string;\n\n  /**\n   * Debounce delay (ms) for auto-parsing on input.\n   * Set to 0 to disable auto-parsing.\n   * @default 300\n   */\n  debounceDelay?: number;\n\n  /**\n   * Whether to enable scroll synchronization.\n   * @default true\n   */\n  syncScroll?: boolean;\n\n  /**\n   * Callback when source changes.\n   */\n  onSourceChange?: (source: string) => void;\n\n  /**\n   * Callback when notation is successfully parsed.\n   */\n  onNotationParsed?: (notation: Notation, beatLayout: GlobalBeatLayout) => void;\n\n  /**\n   * Callback when parsing fails.\n   */\n  onParseError?: (errors: any[]) => void;\n\n  /**\n   * Optional shared GridLayoutGroup for column alignment.\n   */\n  sharedGridLayoutGroup?: GridLayoutGroup;\n\n  /**\n   * Optional markdown parser for RawBlock content.\n   */\n  markdownParser?: (content: string) => string;\n\n  /**\n   * CSS class for the editor textarea.\n   */\n  editorClass?: string;\n\n  /**\n   * CSS class for the output container.\n   */\n  outputClass?: string;\n}\n\nconst DEFAULT_CONFIG: SideBySideEditorConfig = {\n  debounceDelay: 300,\n  syncScroll: true,\n};\n\n/**\n * SideBySideEditor creates and manages editor and output components.\n *\n * Usage:\n * ```typescript\n * const editor = new SideBySideEditor({\n *   initialSource: \"s r g m p\",\n *   onSourceChange: (source) => console.log(\"Source:\", source),\n * });\n *\n * // Get the elements to place in your layout\n * const editorElement = editor.editorElement;\n * const outputElement = editor.outputElement;\n *\n * // Place them in your layout (e.g., dockview, grid, etc.)\n * leftPanel.appendChild(editorElement);\n * rightPanel.appendChild(outputElement);\n * ```\n */\nexport default class SideBySideEditor {\n  /** The editor textarea element */\n  readonly editorElement: HTMLTextAreaElement;\n\n  /** The output container element (contains NotationView) */\n  readonly outputElement: HTMLDivElement;\n\n  /** The NotationView instance */\n  readonly notationView: NotationView;\n\n  /** Configuration */\n  readonly config: SideBySideEditorConfig;\n\n  /** Current notation (after successful parse) */\n  private notation: Notation | null = null;\n\n  /** Current beat layout (after successful parse) */\n  private beatLayout: GlobalBeatLayout | null = null;\n\n  /** Debounce timer */\n  private debounceTimer: ReturnType<typeof setTimeout> | null = null;\n\n  /** Whether scroll sync is active */\n  private isScrollSyncing = false;\n\n  /**\n   * Creates a new SideBySideEditor.\n   *\n   * @param config Configuration options\n   */\n  constructor(config: SideBySideEditorConfig = {}) {\n    this.config = { ...DEFAULT_CONFIG, ...config };\n\n    // Create editor textarea\n    this.editorElement = document.createElement(\"textarea\");\n    this.editorElement.className = \"side-by-side-editor\";\n    if (this.config.editorClass) {\n      this.editorElement.className += \" \" + this.config.editorClass;\n    }\n    this.editorElement.spellcheck = false;\n    this.editorElement.placeholder = \"Enter notation source...\";\n\n    // Set initial source\n    if (this.config.initialSource) {\n      this.editorElement.value = this.config.initialSource;\n    }\n\n    // Create output container\n    this.outputElement = document.createElement(\"div\");\n    this.outputElement.className = \"side-by-side-output\";\n    if (this.config.outputClass) {\n      this.outputElement.className += \" \" + this.config.outputClass;\n    }\n\n    // Create NotationView\n    this.notationView = new NotationView(this.outputElement, {\n      sharedGridLayoutGroup: this.config.sharedGridLayoutGroup,\n      markdownParser: this.config.markdownParser,\n    });\n\n    // Set up event listeners\n    this.setupEventListeners();\n\n    // Initial render\n    if (this.config.initialSource) {\n      this.render();\n    }\n  }\n\n  /**\n   * Gets the current source text.\n   */\n  get source(): string {\n    return this.editorElement.value;\n  }\n\n  /**\n   * Sets the source text and re-renders.\n   */\n  set source(value: string) {\n    this.editorElement.value = value;\n    this.render();\n  }\n\n  /**\n   * Gets the current notation (null if parse failed).\n   */\n  getNotation(): Notation | null {\n    return this.notation;\n  }\n\n  /**\n   * Gets the current beat layout (null if parse failed).\n   */\n  getBeatLayout(): GlobalBeatLayout | null {\n    return this.beatLayout;\n  }\n\n  /**\n   * Parses and renders the current source.\n   * Returns true if successful, false if there were errors.\n   */\n  render(): boolean {\n    const source = this.editorElement.value;\n\n    // Clear previous render\n    this.notationView.clear();\n\n    // Parse\n    const [notation, beatLayout, errors] = load(source, { log: false });\n\n    if (errors.length > 0) {\n      this.notation = null;\n      this.beatLayout = null;\n      this.config.onParseError?.(errors);\n      return false;\n    }\n\n    // Store results\n    this.notation = notation;\n    this.beatLayout = beatLayout;\n\n    // Render\n    this.notationView.renderNotation(notation, beatLayout);\n\n    // Notify callback\n    this.config.onNotationParsed?.(notation, beatLayout);\n\n    return true;\n  }\n\n  /**\n   * Sets up event listeners for the editor.\n   */\n  private setupEventListeners(): void {\n    // Input handler with debouncing\n    this.editorElement.addEventListener(\"input\", () => {\n      this.config.onSourceChange?.(this.editorElement.value);\n\n      if (this.config.debounceDelay && this.config.debounceDelay > 0) {\n        if (this.debounceTimer) {\n          clearTimeout(this.debounceTimer);\n        }\n        this.debounceTimer = setTimeout(() => {\n          this.render();\n        }, this.config.debounceDelay);\n      }\n    });\n\n    // Scroll synchronization\n    if (this.config.syncScroll) {\n      this.editorElement.addEventListener(\"scroll\", () => {\n        this.syncScrollToOutput();\n      });\n\n      this.outputElement.addEventListener(\"scroll\", () => {\n        this.syncScrollToEditor();\n      });\n    }\n  }\n\n  /**\n   * Synchronizes scroll from editor to output.\n   */\n  private syncScrollToOutput(): void {\n    if (this.isScrollSyncing) return;\n    this.isScrollSyncing = true;\n\n    const editor = this.editorElement;\n    const output = this.outputElement;\n\n    // Calculate scroll percentage\n    const maxScrollTop = editor.scrollHeight - editor.clientHeight;\n    if (maxScrollTop <= 0) {\n      this.isScrollSyncing = false;\n      return;\n    }\n\n    const scrollPercent = editor.scrollTop / maxScrollTop;\n\n    // Apply to output\n    const outputMaxScroll = output.scrollHeight - output.clientHeight;\n    output.scrollTop = scrollPercent * outputMaxScroll;\n\n    this.isScrollSyncing = false;\n  }\n\n  /**\n   * Synchronizes scroll from output to editor.\n   */\n  private syncScrollToEditor(): void {\n    if (this.isScrollSyncing) return;\n    this.isScrollSyncing = true;\n\n    const editor = this.editorElement;\n    const output = this.outputElement;\n\n    // Calculate scroll percentage\n    const maxScrollTop = output.scrollHeight - output.clientHeight;\n    if (maxScrollTop <= 0) {\n      this.isScrollSyncing = false;\n      return;\n    }\n\n    const scrollPercent = output.scrollTop / maxScrollTop;\n\n    // Apply to editor\n    const editorMaxScroll = editor.scrollHeight - editor.clientHeight;\n    editor.scrollTop = scrollPercent * editorMaxScroll;\n\n    this.isScrollSyncing = false;\n  }\n\n  /**\n   * Scrolls both editor and output to the top.\n   */\n  scrollToTop(): void {\n    this.editorElement.scrollTop = 0;\n    this.outputElement.scrollTop = 0;\n  }\n\n  /**\n   * Scrolls both editor and output to the bottom.\n   */\n  scrollToBottom(): void {\n    this.editorElement.scrollTop = this.editorElement.scrollHeight;\n    this.outputElement.scrollTop = this.outputElement.scrollHeight;\n  }\n\n  /**\n   * Scrolls to a specific line number in the editor.\n   */\n  scrollToLine(lineNumber: number): void {\n    const lines = this.editorElement.value.split(\"\\n\");\n    const lineHeight = this.editorElement.scrollHeight / lines.length;\n    this.editorElement.scrollTop = (lineNumber - 1) * lineHeight;\n    this.syncScrollToOutput();\n  }\n\n  /**\n   * Focuses the editor.\n   */\n  focus(): void {\n    this.editorElement.focus();\n  }\n\n  /**\n   * Inserts text at the current cursor position.\n   */\n  insertAtCursor(text: string): void {\n    const start = this.editorElement.selectionStart;\n    const end = this.editorElement.selectionEnd;\n    const value = this.editorElement.value;\n\n    this.editorElement.value = value.substring(0, start) + text + value.substring(end);\n\n    // Move cursor after inserted text\n    this.editorElement.selectionStart = start + text.length;\n    this.editorElement.selectionEnd = start + text.length;\n\n    // Trigger source change\n    this.config.onSourceChange?.(this.editorElement.value);\n  }\n\n  /**\n   * Gets the current selection range.\n   */\n  getSelection(): { start: number; end: number; text: string } {\n    return {\n      start: this.editorElement.selectionStart,\n      end: this.editorElement.selectionEnd,\n      text: this.editorElement.value.substring(this.editorElement.selectionStart, this.editorElement.selectionEnd),\n    };\n  }\n\n  /**\n   * Sets the selection range.\n   */\n  setSelection(start: number, end: number): void {\n    this.editorElement.selectionStart = start;\n    this.editorElement.selectionEnd = end;\n  }\n\n  /**\n   * Cleans up resources.\n   */\n  destroy(): void {\n    if (this.debounceTimer) {\n      clearTimeout(this.debounceTimer);\n    }\n    this.editorElement.remove();\n    this.outputElement.remove();\n  }\n}\n"]}

package/lib/cjs/web/dockview.d.ts

@@ -0,0 +1,2 @@
+export { default as DockViewPlayground, DockViewPlaygroundConfig } from "./components/DockViewPlayground";
+export { default as SideBySideEditor, SideBySideEditorConfig } from "./components/SideBySideEditor";

package/lib/cjs/web/dockview.js

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SideBySideEditor = exports.DockViewPlayground = void 0;
+var DockViewPlayground_1 = require("./components/DockViewPlayground");
+Object.defineProperty(exports, "DockViewPlayground", { enumerable: true, get: function () { return __importDefault(DockViewPlayground_1).default; } });
+var SideBySideEditor_1 = require("./components/SideBySideEditor");
+Object.defineProperty(exports, "SideBySideEditor", { enumerable: true, get: function () { return __importDefault(SideBySideEditor_1).default; } });
+//# sourceMappingURL=dockview.js.map

package/lib/cjs/web/dockview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dockview.js","sourceRoot":"","sources":["../../../src/web/dockview.ts"],"names":[],"mappings":";;;;;;AAgBA,sEAA0G;AAAjG,yIAAA,OAAO,OAAsB;AAGtC,kEAAoG;AAA3F,qIAAA,OAAO,OAAoB","sourcesContent":["/**\n * DockView-based components for notations/web.\n *\n * Import from \"notations/web/dockview\" to use these components.\n * This keeps DockView out of the main bundle for users who don't need it.\n *\n * Usage:\n * ```typescript\n * import { DockViewPlayground } from \"notations/web/dockview\";\n *\n * const playground = new DockViewPlayground(container, {\n *   initialSource: \"s r g m p\",\n * });\n * ```\n */\n\nexport { default as DockViewPlayground, DockViewPlaygroundConfig } from \"./components/DockViewPlayground\";\n\n// Re-export SideBySideEditor for convenience\nexport { default as SideBySideEditor, SideBySideEditorConfig } from \"./components/SideBySideEditor\";\n"]}

package/lib/cjs/web/index.d.ts

@@ -0,0 +1,8 @@
+export { default as NotationBlock, NotationBlockConfig } from "./components/NotationBlock";
+export { default as NotebookView } from "./components/NotebookView";
+export { default as NotebookCell, NotebookCellConfig } from "./components/NotebookCell";
+export { default as SideBySideEditor, SideBySideEditorConfig } from "./components/SideBySideEditor";
+export { default as DockViewPlayground, DockViewPlaygroundConfig } from "./components/DockViewPlayground";
+export * from "./types/notebook";
+export * from "./utils/cellFactory";
+export * from "./utils/sourceSerializer";

package/lib/cjs/web/index.js

@@ -0,0 +1,34 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DockViewPlayground = exports.SideBySideEditor = exports.NotebookCell = exports.NotebookView = exports.NotationBlock = void 0;
+var NotationBlock_1 = require("./components/NotationBlock");
+Object.defineProperty(exports, "NotationBlock", { enumerable: true, get: function () { return __importDefault(NotationBlock_1).default; } });
+var NotebookView_1 = require("./components/NotebookView");
+Object.defineProperty(exports, "NotebookView", { enumerable: true, get: function () { return __importDefault(NotebookView_1).default; } });
+var NotebookCell_1 = require("./components/NotebookCell");
+Object.defineProperty(exports, "NotebookCell", { enumerable: true, get: function () { return __importDefault(NotebookCell_1).default; } });
+var SideBySideEditor_1 = require("./components/SideBySideEditor");
+Object.defineProperty(exports, "SideBySideEditor", { enumerable: true, get: function () { return __importDefault(SideBySideEditor_1).default; } });
+var DockViewPlayground_1 = require("./components/DockViewPlayground");
+Object.defineProperty(exports, "DockViewPlayground", { enumerable: true, get: function () { return __importDefault(DockViewPlayground_1).default; } });
+__exportStar(require("./types/notebook"), exports);
+__exportStar(require("./utils/cellFactory"), exports);
+__exportStar(require("./utils/sourceSerializer"), exports);
+//# sourceMappingURL=index.js.map

package/lib/cjs/web/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/web/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AACA,4DAA2F;AAAlF,+HAAA,OAAO,OAAiB;AACjC,0DAAoE;AAA3D,6HAAA,OAAO,OAAgB;AAChC,0DAAwF;AAA/E,6HAAA,OAAO,OAAgB;AAChC,kEAAoG;AAA3F,qIAAA,OAAO,OAAoB;AACpC,sEAA0G;AAAjG,yIAAA,OAAO,OAAsB;AAGtC,mDAAiC;AACjC,sDAAoC;AACpC,2DAAyC","sourcesContent":["// Export all web components\nexport { default as NotationBlock, NotationBlockConfig } from \"./components/NotationBlock\";\nexport { default as NotebookView } from \"./components/NotebookView\";\nexport { default as NotebookCell, NotebookCellConfig } from \"./components/NotebookCell\";\nexport { default as SideBySideEditor, SideBySideEditorConfig } from \"./components/SideBySideEditor\";\nexport { default as DockViewPlayground, DockViewPlaygroundConfig } from \"./components/DockViewPlayground\";\n\n// Export notebook types and utilities\nexport * from \"./types/notebook\";\nexport * from \"./utils/cellFactory\";\nexport * from \"./utils/sourceSerializer\";\n"]}

package/lib/cjs/web/types/notebook.d.ts

@@ -0,0 +1,64 @@
+import type { BlockItem } from "../../block";
+import type { Notation } from "../../notation";
+import type { GridLayoutGroup, LayoutChangeEvent } from "../../grids";
+export type { LayoutChangeEvent };
+export interface CellState {
+    id: string;
+    type: string;
+    depth: number;
+    isExpanded: boolean;
+    isEditing: boolean;
+    hasError: boolean;
+    errorMessage?: string;
+}
+export interface CellModel {
+    blockItem: BlockItem;
+    state: CellState;
+    source: string;
+    sourceRange?: {
+        start: number;
+        end: number;
+    };
+    children: CellModel[];
+    parent: CellModel | null;
+}
+export interface NotebookConfig {
+    maxDepth: number;
+    sharedGridLayoutGroup?: GridLayoutGroup;
+    enableReordering?: boolean;
+    enableAddCell?: boolean;
+    enableDeleteCell?: boolean;
+    onNotationChange?: (source: string, notation: Notation | null) => void;
+    onCellError?: (cellId: string, error: Error) => void;
+    onLayoutChange?: (event: LayoutChangeEvent) => void;
+    markdownParser?: (content: string) => string;
+    cssClasses?: NotebookCssClasses;
+}
+export interface NotebookCssClasses {
+    root?: string;
+    cell?: string;
+    cellHeader?: string;
+    cellContent?: string;
+    cellControls?: string;
+    addCellButton?: string;
+    editTextarea?: string;
+    errorMessage?: string;
+}
+export interface CellOperations {
+    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;
+}
+export interface CellTypeBadge {
+    label: string;
+    cssClass: string;
+    icon?: string;
+}
+export declare const CELL_TYPE_BADGES: Record<string, CellTypeBadge>;
+export declare function getCellTypeBadge(blockType: string): CellTypeBadge;
+export declare function generateCellId(): string;
+export declare function createDefaultCellState(blockItem: BlockItem, depth: number): CellState;

package/lib/cjs/web/types/notebook.js

@@ -0,0 +1,56 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CELL_TYPE_BADGES = void 0;
+exports.getCellTypeBadge = getCellTypeBadge;
+exports.generateCellId = generateCellId;
+exports.createDefaultCellState = createDefaultCellState;
+exports.CELL_TYPE_BADGES = {
+    notation: { label: "Root", cssClass: "badge-notation" },
+    section: { label: "Section", cssClass: "badge-section" },
+    repeat: { label: "Repeat", cssClass: "badge-repeat" },
+    cycle: { label: "Cycle", cssClass: "badge-cycle" },
+    beatduration: { label: "Beat", cssClass: "badge-beatduration" },
+    breaks: { label: "Breaks", cssClass: "badge-breaks" },
+    role: { label: "Role", cssClass: "badge-role" },
+    group: { label: "Group", cssClass: "badge-group" },
+    line: { label: "Line", cssClass: "badge-line" },
+    rawblock: { label: "Text", cssClass: "badge-rawblock" },
+};
+function getCellTypeBadge(blockType) {
+    const badge = exports.CELL_TYPE_BADGES[blockType.toLowerCase()];
+    if (badge) {
+        return badge;
+    }
+    return {
+        label: blockType,
+        cssClass: "badge-unknown",
+    };
+}
+let cellIdCounter = 0;
+function generateCellId() {
+    return `cell-${++cellIdCounter}`;
+}
+function createDefaultCellState(blockItem, depth) {
+    let type;
+    if (blockItem.TYPE === "Block") {
+        type = blockItem.blockType;
+    }
+    else if (blockItem.TYPE === "Line") {
+        type = "line";
+    }
+    else if (blockItem.TYPE === "RawBlock") {
+        type = "rawblock";
+    }
+    else {
+        type = "unknown";
+    }
+    return {
+        id: generateCellId(),
+        type,
+        depth,
+        isExpanded: true,
+        isEditing: false,
+        hasError: false,
+    };
+}
+//# sourceMappingURL=notebook.js.map

package/lib/cjs/web/types/notebook.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"notebook.js","sourceRoot":"","sources":["../../../../src/web/types/notebook.ts"],"names":[],"mappings":";;;AAoOA,4CAUC;AAMD,wCAEC;AAOD,wDAqBC;AAjEY,QAAA,gBAAgB,GAAkC;IAC7D,QAAQ,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,gBAAgB,EAAE;IACvD,OAAO,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,eAAe,EAAE;IACxD,MAAM,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,cAAc,EAAE;IACrD,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE;IAClD,YAAY,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,oBAAoB,EAAE;IAC/D,MAAM,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,cAAc,EAAE;IACrD,IAAI,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,YAAY,EAAE;IAC/C,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE;IAElD,IAAI,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,YAAY,EAAE;IAC/C,QAAQ,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,gBAAgB,EAAE;CACxD,CAAC;AAOF,SAAgB,gBAAgB,CAAC,SAAiB;IAChD,MAAM,KAAK,GAAG,wBAAgB,CAAC,SAAS,CAAC,WAAW,EAAE,CAAC,CAAC;IACxD,IAAI,KAAK,EAAE,CAAC;QACV,OAAO,KAAK,CAAC;IACf,CAAC;IAED,OAAO;QACL,KAAK,EAAE,SAAS;QAChB,QAAQ,EAAE,eAAe;KAC1B,CAAC;AACJ,CAAC;AAKD,IAAI,aAAa,GAAG,CAAC,CAAC;AACtB,SAAgB,cAAc;IAC5B,OAAO,QAAQ,EAAE,aAAa,EAAE,CAAC;AACnC,CAAC;AAOD,SAAgB,sBAAsB,CAAC,SAAoB,EAAE,KAAa;IAExE,IAAI,IAAY,CAAC;IACjB,IAAI,SAAS,CAAC,IAAI,KAAK,OAAO,EAAE,CAAC;QAC/B,IAAI,GAAI,SAAmB,CAAC,SAAS,CAAC;IACxC,CAAC;SAAM,IAAI,SAAS,CAAC,IAAI,KAAK,MAAM,EAAE,CAAC;QACrC,IAAI,GAAG,MAAM,CAAC;IAChB,CAAC;SAAM,IAAI,SAAS,CAAC,IAAI,KAAK,UAAU,EAAE,CAAC;QACzC,IAAI,GAAG,UAAU,CAAC;IACpB,CAAC;SAAM,CAAC;QACN,IAAI,GAAG,SAAS,CAAC;IACnB,CAAC;IAED,OAAO;QACL,EAAE,EAAE,cAAc,EAAE;QACpB,IAAI;QACJ,KAAK;QACL,UAAU,EAAE,IAAI;QAChB,SAAS,EAAE,KAAK;QAChB,QAAQ,EAAE,KAAK;KAChB,CAAC;AACJ,CAAC","sourcesContent":["/**\n * Types and interfaces for the notebook-style cell editing UI.\n *\n * The notebook UI represents a Notation as a collection of editable cells,\n * where each Block becomes a cell with preview/edit modes.\n */\n\nimport type { BlockItem, Block } from \"../../block\";\nimport type { Notation } from \"../../notation\";\nimport type { GridLayoutGroup, LayoutChangeEvent } from \"../../grids\";\n\n// Re-export for convenience\nexport type { LayoutChangeEvent };\n\n/**\n * State of a single cell in the notebook.\n */\nexport interface CellState {\n  /** Unique identifier for this cell */\n  id: string;\n\n  /** Block type from block.blockType (e.g., \"section\", \"repeat\", \"notation\") */\n  type: string;\n\n  /** Nesting depth in the block hierarchy (0 = top level) */\n  depth: number;\n\n  /** Whether nested children are expanded (for collapsible blocks) */\n  isExpanded: boolean;\n\n  /** Whether the cell is currently in edit mode */\n  isEditing: boolean;\n\n  /** Whether parsing the cell's source resulted in an error */\n  hasError: boolean;\n\n  /** Error message if hasError is true */\n  errorMessage?: string;\n}\n\n/**\n * Model representing a cell in the notebook.\n * Wraps a BlockItem with UI state and source tracking.\n */\nexport interface CellModel {\n  /** The underlying block item from the notation */\n  blockItem: BlockItem;\n\n  /** UI state for this cell */\n  state: CellState;\n\n  /** Source text for this cell (extracted from original notation source) */\n  source: string;\n\n  /** Source range in original notation (for serialization back to source) */\n  sourceRange?: {\n    start: number;\n    end: number;\n  };\n\n  /** Child cells (for nested blocks) */\n  children: CellModel[];\n\n  /** Parent cell (null for top-level cells) */\n  parent: CellModel | null;\n}\n\n/**\n * Configuration options for the NotebookView component.\n */\nexport interface NotebookConfig {\n  /**\n   * Maximum depth of block nesting to expose as cells.\n   * 0 = only show top-level blocks\n   * 1 = show one level of nesting\n   * Infinity = show all nesting levels\n   * @default 1\n   */\n  maxDepth: number;\n\n  /**\n   * Optional shared GridLayoutGroup for column alignment across cells.\n   * When provided, all NotationViews in the notebook share this layout group.\n   * If not provided, a new one is created internally.\n   */\n  sharedGridLayoutGroup?: GridLayoutGroup;\n\n  /**\n   * Whether to allow reordering cells via drag-and-drop.\n   * @default false\n   */\n  enableReordering?: boolean;\n\n  /**\n   * Whether to allow adding new cells.\n   * @default true\n   */\n  enableAddCell?: boolean;\n\n  /**\n   * Whether to allow deleting cells.\n   * @default true\n   */\n  enableDeleteCell?: boolean;\n\n  /**\n   * Callback when notation source changes (after cell edit is applied).\n   * @param source The new full notation source\n   * @param notation The parsed Notation object (if parsing succeeded)\n   */\n  onNotationChange?: (source: string, notation: Notation | null) => void;\n\n  /**\n   * Callback when a cell encounters a parse error.\n   * @param cellId The ID of the cell with the error\n   * @param error The error that occurred\n   */\n  onCellError?: (cellId: string, error: Error) => void;\n\n  /**\n   * Callback when layout changes (column widths/row heights changed).\n   * Useful for external components that need to react to layout changes.\n   */\n  onLayoutChange?: (event: LayoutChangeEvent) => void;\n\n  /**\n   * Optional markdown parser for RawBlock content.\n   * If not provided, markdown is rendered as plain text.\n   */\n  markdownParser?: (content: string) => string;\n\n  /**\n   * CSS classes to apply to various elements.\n   */\n  cssClasses?: NotebookCssClasses;\n}\n\n/**\n * CSS class overrides for notebook elements.\n */\nexport interface NotebookCssClasses {\n  /** Root container class */\n  root?: string;\n\n  /** Individual cell container */\n  cell?: string;\n\n  /** Cell header (type badge, name, controls) */\n  cellHeader?: string;\n\n  /** Cell content area (preview or edit mode) */\n  cellContent?: string;\n\n  /** Cell controls (edit/delete/move buttons) */\n  cellControls?: string;\n\n  /** Add cell button */\n  addCellButton?: string;\n\n  /** Edit mode textarea */\n  editTextarea?: string;\n\n  /** Error message display */\n  errorMessage?: string;\n}\n\n/**\n * Operations that can be performed on cells.\n */\nexport interface CellOperations {\n  /** Enter edit mode for a cell */\n  startEdit(cellId: string): void;\n\n  /** Apply changes and exit edit mode */\n  applyEdit(cellId: string, newSource: string): void;\n\n  /** Cancel edit mode without applying changes */\n  cancelEdit(cellId: string): void;\n\n  /** Delete a cell */\n  deleteCell(cellId: string): void;\n\n  /** Move a cell to a new position */\n  moveCell(cellId: string, targetIndex: number): void;\n\n  /** Insert a new cell at the given index */\n  insertCell(index: number, source: string): CellModel;\n\n  /** Toggle expanded state for a cell with children */\n  toggleExpanded(cellId: string): void;\n}\n\n/**\n * Badge info for displaying cell type.\n */\nexport interface CellTypeBadge {\n  /** Display label for the badge */\n  label: string;\n\n  /** CSS class for styling (e.g., \"badge-section\", \"badge-repeat\") */\n  cssClass: string;\n\n  /** Optional icon (SVG string or class name) */\n  icon?: string;\n}\n\n/**\n * Maps block types to badge display info.\n */\nexport const CELL_TYPE_BADGES: Record<string, CellTypeBadge> = {\n  notation: { label: \"Root\", cssClass: \"badge-notation\" },\n  section: { label: \"Section\", cssClass: \"badge-section\" },\n  repeat: { label: \"Repeat\", cssClass: \"badge-repeat\" },\n  cycle: { label: \"Cycle\", cssClass: \"badge-cycle\" },\n  beatduration: { label: \"Beat\", cssClass: \"badge-beatduration\" },\n  breaks: { label: \"Breaks\", cssClass: \"badge-breaks\" },\n  role: { label: \"Role\", cssClass: \"badge-role\" },\n  group: { label: \"Group\", cssClass: \"badge-group\" },\n  // For Line and RawBlock (not blocks, but can be cells)\n  line: { label: \"Line\", cssClass: \"badge-line\" },\n  rawblock: { label: \"Text\", cssClass: \"badge-rawblock\" },\n};\n\n/**\n * Gets badge info for a block type.\n * @param blockType The block type string\n * @returns Badge info, or a default badge for unknown types\n */\nexport function getCellTypeBadge(blockType: string): CellTypeBadge {\n  const badge = CELL_TYPE_BADGES[blockType.toLowerCase()];\n  if (badge) {\n    return badge;\n  }\n  // Default badge for unknown types\n  return {\n    label: blockType,\n    cssClass: \"badge-unknown\",\n  };\n}\n\n/**\n * Generates a unique cell ID.\n */\nlet cellIdCounter = 0;\nexport function generateCellId(): string {\n  return `cell-${++cellIdCounter}`;\n}\n\n/**\n * Creates default cell state for a block item.\n * @param blockItem The block item to create state for\n * @param depth The nesting depth\n */\nexport function createDefaultCellState(blockItem: BlockItem, depth: number): CellState {\n  // Determine the type string\n  let type: string;\n  if (blockItem.TYPE === \"Block\") {\n    type = (blockItem as Block).blockType;\n  } else if (blockItem.TYPE === \"Line\") {\n    type = \"line\";\n  } else if (blockItem.TYPE === \"RawBlock\") {\n    type = \"rawblock\";\n  } else {\n    type = \"unknown\";\n  }\n\n  return {\n    id: generateCellId(),\n    type,\n    depth,\n    isExpanded: true,\n    isEditing: false,\n    hasError: false,\n  };\n}\n"]}

package/lib/cjs/web/utils/cellFactory.d.ts

@@ -0,0 +1,16 @@
+import type { Notation } from "../../notation";
+import { CellModel, CellState } from "../types/notebook";
+export interface CellFactoryOptions {
+    maxDepth: number;
+    notationSource?: string;
+    includeLines?: boolean;
+    includeRawBlocks?: boolean;
+}
+export declare function createCellModels(notation: Notation, options?: Partial<CellFactoryOptions>): CellModel[];
+export declare function createCellModelWithRoot(notation: Notation, options?: Partial<CellFactoryOptions>): CellModel;
+export declare function findCellById(cells: CellModel[], cellId: string): CellModel | null;
+export declare function findCellIndex(cell: CellModel): number;
+export declare function flattenCells(cells: CellModel[]): CellModel[];
+export declare function getVisibleCells(cells: CellModel[]): CellModel[];
+export declare function updateCellState(cell: CellModel, updates: Partial<CellState>): CellModel;
+export declare function regenerateCellIds(cells: CellModel[]): CellModel[];

package/lib/cjs/web/utils/cellFactory.js

@@ -0,0 +1,137 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createCellModels = createCellModels;
+exports.createCellModelWithRoot = createCellModelWithRoot;
+exports.findCellById = findCellById;
+exports.findCellIndex = findCellIndex;
+exports.flattenCells = flattenCells;
+exports.getVisibleCells = getVisibleCells;
+exports.updateCellState = updateCellState;
+exports.regenerateCellIds = regenerateCellIds;
+const block_1 = require("../../block");
+const notebook_1 = require("../types/notebook");
+const DEFAULT_OPTIONS = {
+    maxDepth: 1,
+    includeLines: true,
+    includeRawBlocks: true,
+};
+function createCellModels(notation, options = {}) {
+    const opts = Object.assign(Object.assign({}, DEFAULT_OPTIONS), options);
+    const rootCell = createCellForBlock(notation, 0, opts, null);
+    return rootCell.children;
+}
+function createCellModelWithRoot(notation, options = {}) {
+    const opts = Object.assign(Object.assign({}, DEFAULT_OPTIONS), options);
+    return createCellForBlock(notation, 0, opts, null);
+}
+function createCellForBlock(block, depth, options, parent) {
+    const state = (0, notebook_1.createDefaultCellState)(block, depth);
+    const source = extractBlockSource(block, options.notationSource);
+    const cell = {
+        blockItem: block,
+        state,
+        source,
+        children: [],
+        parent,
+    };
+    if (depth < options.maxDepth) {
+        for (const child of block.blockItems) {
+            const childCell = createCellForBlockItem(child, depth + 1, options, cell);
+            if (childCell) {
+                cell.children.push(childCell);
+            }
+        }
+    }
+    return cell;
+}
+function createCellForBlockItem(item, depth, options, parent) {
+    if ((0, block_1.isBlock)(item)) {
+        return createCellForBlock(item, depth, options, parent);
+    }
+    if ((0, block_1.isLine)(item)) {
+        if (!options.includeLines) {
+            return null;
+        }
+        return createCellForLine(item, depth, options, parent);
+    }
+    if ((0, block_1.isRawBlock)(item)) {
+        if (!options.includeRawBlocks) {
+            return null;
+        }
+        return createCellForRawBlock(item, depth, options, parent);
+    }
+    return null;
+}
+function createCellForLine(line, depth, options, parent) {
+    const state = (0, notebook_1.createDefaultCellState)(line, depth);
+    const source = extractLineSource(line, options.notationSource);
+    return {
+        blockItem: line,
+        state,
+        source,
+        children: [],
+        parent,
+    };
+}
+function createCellForRawBlock(rawBlock, depth, options, parent) {
+    const state = (0, notebook_1.createDefaultCellState)(rawBlock, depth);
+    return {
+        blockItem: rawBlock,
+        state,
+        source: rawBlock.content,
+        children: [],
+        parent,
+    };
+}
+function extractBlockSource(block, notationSource) {
+    if (block.name) {
+        return `\\${block.blockType}("${block.name}") { ... }`;
+    }
+    return `\\${block.blockType} { ... }`;
+}
+function extractLineSource(line, notationSource) {
+    return "[Line content]";
+}
+function findCellById(cells, cellId) {
+    for (const cell of cells) {
+        if (cell.state.id === cellId) {
+            return cell;
+        }
+        const found = findCellById(cell.children, cellId);
+        if (found) {
+            return found;
+        }
+    }
+    return null;
+}
+function findCellIndex(cell) {
+    if (!cell.parent) {
+        return -1;
+    }
+    return cell.parent.children.indexOf(cell);
+}
+function flattenCells(cells) {
+    const result = [];
+    for (const cell of cells) {
+        result.push(cell);
+        result.push(...flattenCells(cell.children));
+    }
+    return result;
+}
+function getVisibleCells(cells) {
+    const result = [];
+    for (const cell of cells) {
+        result.push(cell);
+        if (cell.state.isExpanded) {
+            result.push(...getVisibleCells(cell.children));
+        }
+    }
+    return result;
+}
+function updateCellState(cell, updates) {
+    return Object.assign(Object.assign({}, cell), { state: Object.assign(Object.assign({}, cell.state), updates) });
+}
+function regenerateCellIds(cells) {
+    return cells.map((cell) => (Object.assign(Object.assign({}, cell), { state: Object.assign(Object.assign({}, cell.state), { id: (0, notebook_1.generateCellId)() }), children: regenerateCellIds(cell.children) })));
+}
+//# sourceMappingURL=cellFactory.js.map

package/lib/cjs/web/utils/cellFactory.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cellFactory.js","sourceRoot":"","sources":["../../../../src/web/utils/cellFactory.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Factory for converting Block hierarchy to CellModel tree.\n *\n * The cell factory walks the notation's block structure and creates\n * a parallel tree of CellModel objects suitable for the notebook UI.\n */\n\nimport type { BlockItem, Block, RawBlock } from \"../../block\";\nimport type { Line } from \"../../core\";\nimport type { Notation } from \"../../notation\";\nimport { isBlock, isLine, isRawBlock } from \"../../block\";\nimport { CellModel, CellState, createDefaultCellState, generateCellId } from \"../types/notebook\";\n\n/**\n * Options for cell factory.\n */\nexport interface CellFactoryOptions {\n  /**\n   * Maximum depth of block nesting to expose as cells.\n   * 0 = only show top-level blocks\n   * 1 = show one level of nesting\n   * Infinity = show all nesting levels\n   * @default 1\n   */\n  maxDepth: number;\n\n  /**\n   * The full notation source text (for extracting cell source ranges).\n   * If not provided, cell.source will be empty.\n   */\n  notationSource?: string;\n\n  /**\n   * Whether to include Line items as cells.\n   * @default true\n   */\n  includeLines?: boolean;\n\n  /**\n   * Whether to include RawBlock items as cells.\n   * @default true\n   */\n  includeRawBlocks?: boolean;\n}\n\nconst DEFAULT_OPTIONS: CellFactoryOptions = {\n  maxDepth: 1,\n  includeLines: true,\n  includeRawBlocks: true,\n};\n\n/**\n * Creates a CellModel tree from a Notation.\n *\n * @param notation The notation to convert\n * @param options Factory options\n * @returns Array of top-level CellModel objects\n */\nexport function createCellModels(notation: Notation, options: Partial<CellFactoryOptions> = {}): CellModel[] {\n  const opts = { ...DEFAULT_OPTIONS, ...options };\n\n  // Create the root cell for the notation itself\n  const rootCell = createCellForBlock(notation, 0, opts, null);\n\n  // Return the children of the root (top-level items)\n  // The root itself represents the whole notation\n  return rootCell.children;\n}\n\n/**\n * Creates a CellModel tree from a Notation, including the root cell.\n *\n * @param notation The notation to convert\n * @param options Factory options\n * @returns The root CellModel representing the entire notation\n */\nexport function createCellModelWithRoot(notation: Notation, options: Partial<CellFactoryOptions> = {}): CellModel {\n  const opts = { ...DEFAULT_OPTIONS, ...options };\n  return createCellForBlock(notation, 0, opts, null);\n}\n\n/**\n * Creates a CellModel for a Block and recursively processes its children.\n */\nfunction createCellForBlock(\n  block: Block,\n  depth: number,\n  options: CellFactoryOptions,\n  parent: CellModel | null,\n): CellModel {\n  const state = createDefaultCellState(block, depth);\n  const source = extractBlockSource(block, options.notationSource);\n\n  const cell: CellModel = {\n    blockItem: block,\n    state,\n    source,\n    children: [],\n    parent,\n  };\n\n  // Process children if within depth limit\n  if (depth < options.maxDepth) {\n    for (const child of block.blockItems) {\n      const childCell = createCellForBlockItem(child, depth + 1, options, cell);\n      if (childCell) {\n        cell.children.push(childCell);\n      }\n    }\n  }\n\n  return cell;\n}\n\n/**\n * Creates a CellModel for a BlockItem (Block, Line, or RawBlock).\n * Returns null if the item type is excluded by options.\n */\nfunction createCellForBlockItem(\n  item: BlockItem,\n  depth: number,\n  options: CellFactoryOptions,\n  parent: CellModel | null,\n): CellModel | null {\n  if (isBlock(item)) {\n    return createCellForBlock(item as Block, depth, options, parent);\n  }\n\n  if (isLine(item)) {\n    if (!options.includeLines) {\n      return null;\n    }\n    return createCellForLine(item as Line, depth, options, parent);\n  }\n\n  if (isRawBlock(item)) {\n    if (!options.includeRawBlocks) {\n      return null;\n    }\n    return createCellForRawBlock(item as RawBlock, depth, options, parent);\n  }\n\n  return null;\n}\n\n/**\n * Creates a CellModel for a Line.\n */\nfunction createCellForLine(\n  line: Line,\n  depth: number,\n  options: CellFactoryOptions,\n  parent: CellModel | null,\n): CellModel {\n  const state = createDefaultCellState(line, depth);\n  const source = extractLineSource(line, options.notationSource);\n\n  return {\n    blockItem: line,\n    state,\n    source,\n    children: [], // Lines don't have children\n    parent,\n  };\n}\n\n/**\n * Creates a CellModel for a RawBlock.\n */\nfunction createCellForRawBlock(\n  rawBlock: RawBlock,\n  depth: number,\n  options: CellFactoryOptions,\n  parent: CellModel | null,\n): CellModel {\n  const state = createDefaultCellState(rawBlock, depth);\n\n  return {\n    blockItem: rawBlock,\n    state,\n    source: rawBlock.content, // RawBlock has its content directly\n    children: [], // RawBlocks don't have children\n    parent,\n  };\n}\n\n/**\n * Extracts the source text for a Block from the notation source.\n * Currently returns empty string - source range tracking would need\n * parser support to track positions.\n */\nfunction extractBlockSource(block: Block, notationSource?: string): string {\n  // TODO: Implement source range tracking in parser\n  // For now, we don't have position info in the AST\n  // This would require the parser to track source positions\n  if (block.name) {\n    return `\\\\${block.blockType}(\"${block.name}\") { ... }`;\n  }\n  return `\\\\${block.blockType} { ... }`;\n}\n\n/**\n * Extracts the source text for a Line from the notation source.\n * Currently returns a placeholder - would need parser source tracking.\n */\nfunction extractLineSource(line: Line, notationSource?: string): string {\n  // TODO: Implement source range tracking in parser\n  // For now, generate a placeholder representation\n  return \"[Line content]\";\n}\n\n/**\n * Finds a cell by ID in a cell tree.\n *\n * @param cells Array of cells to search\n * @param cellId The ID to find\n * @returns The cell with the given ID, or null if not found\n */\nexport function findCellById(cells: CellModel[], cellId: string): CellModel | null {\n  for (const cell of cells) {\n    if (cell.state.id === cellId) {\n      return cell;\n    }\n    const found = findCellById(cell.children, cellId);\n    if (found) {\n      return found;\n    }\n  }\n  return null;\n}\n\n/**\n * Finds a cell's index within its parent's children array.\n *\n * @param cell The cell to find\n * @returns The index, or -1 if the cell has no parent or is not found\n */\nexport function findCellIndex(cell: CellModel): number {\n  if (!cell.parent) {\n    return -1;\n  }\n  return cell.parent.children.indexOf(cell);\n}\n\n/**\n * Gets all cells in a flat array (pre-order traversal).\n *\n * @param cells The root cells\n * @returns Flat array of all cells\n */\nexport function flattenCells(cells: CellModel[]): CellModel[] {\n  const result: CellModel[] = [];\n  for (const cell of cells) {\n    result.push(cell);\n    result.push(...flattenCells(cell.children));\n  }\n  return result;\n}\n\n/**\n * Gets all visible cells (respecting isExpanded state).\n *\n * @param cells The root cells\n * @returns Flat array of visible cells\n */\nexport function getVisibleCells(cells: CellModel[]): CellModel[] {\n  const result: CellModel[] = [];\n  for (const cell of cells) {\n    result.push(cell);\n    if (cell.state.isExpanded) {\n      result.push(...getVisibleCells(cell.children));\n    }\n  }\n  return result;\n}\n\n/**\n * Updates a cell's state immutably.\n *\n * @param cell The cell to update\n * @param updates Partial state updates\n * @returns A new CellModel with updated state\n */\nexport function updateCellState(cell: CellModel, updates: Partial<CellState>): CellModel {\n  return {\n    ...cell,\n    state: {\n      ...cell.state,\n      ...updates,\n    },\n  };\n}\n\n/**\n * Recreates cell IDs for a cell tree (useful after cloning).\n *\n * @param cells The cells to update\n * @returns New cells with fresh IDs\n */\nexport function regenerateCellIds(cells: CellModel[]): CellModel[] {\n  return cells.map((cell) => ({\n    ...cell,\n    state: {\n      ...cell.state,\n      id: generateCellId(),\n    },\n    children: regenerateCellIds(cell.children),\n  }));\n}\n"]}

package/lib/cjs/web/utils/sourceSerializer.d.ts

@@ -0,0 +1,19 @@
+import type { BlockItem } from "../../block";
+import { CellModel } from "../types/notebook";
+export interface SerializerOptions {
+    indent?: string;
+    lineSeparator?: string;
+    preserveUnmodified?: boolean;
+}
+export declare function serializeCells(cells: CellModel[], options?: SerializerOptions): string;
+export declare function serializeCell(cell: CellModel, depth: number, options: SerializerOptions): string;
+export declare function serializeBlockItem(item: BlockItem, depth: number, options: SerializerOptions): string;
+export declare function updateCellSource(cell: CellModel, newSource: string): CellModel;
+export declare function validateCellSource(source: string): {
+    isValid: boolean;
+    error?: string;
+};
+export declare function findCellSourceRange(cell: CellModel, fullSource: string): {
+    start: number;
+    end: number;
+} | null;

package/lib/cjs/web/utils/sourceSerializer.js

@@ -0,0 +1,162 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.serializeCells = serializeCells;
+exports.serializeCell = serializeCell;
+exports.serializeBlockItem = serializeBlockItem;
+exports.updateCellSource = updateCellSource;
+exports.validateCellSource = validateCellSource;
+exports.findCellSourceRange = findCellSourceRange;
+const block_1 = require("../../block");
+const DEFAULT_OPTIONS = {
+    indent: "  ",
+    lineSeparator: "\n",
+    preserveUnmodified: true,
+};
+function serializeCells(cells, options = {}) {
+    const opts = Object.assign(Object.assign({}, DEFAULT_OPTIONS), options);
+    const parts = [];
+    for (const cell of cells) {
+        const serialized = serializeCell(cell, 0, opts);
+        if (serialized) {
+            parts.push(serialized);
+        }
+    }
+    return parts.join(opts.lineSeparator + opts.lineSeparator);
+}
+function serializeCell(cell, depth, options) {
+    const indent = options.indent.repeat(depth);
+    if (options.preserveUnmodified && cell.source && !cell.state.hasError) {
+        if (depth === 0) {
+            return cell.source;
+        }
+        return cell.source
+            .split("\n")
+            .map((line) => indent + line)
+            .join(options.lineSeparator);
+    }
+    return serializeBlockItem(cell.blockItem, depth, options);
+}
+function serializeBlockItem(item, depth, options) {
+    if ((0, block_1.isRawBlock)(item)) {
+        return serializeRawBlock(item, depth, options);
+    }
+    if ((0, block_1.isLine)(item)) {
+        return serializeLine(item, depth, options);
+    }
+    if ((0, block_1.isBlock)(item)) {
+        return serializeBlock(item, depth, options);
+    }
+    return "";
+}
+function serializeRawBlock(rawBlock, depth, options) {
+    const indent = options.indent.repeat(depth);
+    const content = rawBlock.content;
+    if (rawBlock.contentType === "md") {
+        return `${indent}---${options.lineSeparator}${content}${options.lineSeparator}${indent}---`;
+    }
+    if (rawBlock.contentType === "metadata") {
+        return `${indent}@@${content}`;
+    }
+    return content
+        .split("\n")
+        .map((line) => indent + line)
+        .join(options.lineSeparator);
+}
+function serializeLine(line, depth, options) {
+    const indent = options.indent.repeat(depth);
+    return `${indent}; [Line serialization not fully implemented]`;
+}
+function serializeBlock(block, depth, options) {
+    const indent = options.indent.repeat(depth);
+    const childIndent = options.indent.repeat(depth + 1);
+    const parts = [];
+    const header = serializeBlockHeader(block);
+    parts.push(`${indent}${header} {`);
+    for (const child of block.blockItems) {
+        const childSource = serializeBlockItem(child, depth + 1, options);
+        if (childSource) {
+            parts.push(childSource);
+        }
+    }
+    parts.push(`${indent}}`);
+    return parts.join(options.lineSeparator);
+}
+function serializeBlockHeader(block) {
+    var _a;
+    const type = block.blockType;
+    switch (type) {
+        case "section":
+            return `\\section("${block.name || ""}")`;
+        case "repeat": {
+            const repeatCount = (_a = block.repeatCount) !== null && _a !== void 0 ? _a : 1;
+            return `\\repeat(${repeatCount})`;
+        }
+        case "cycle":
+            if (block.localCycle) {
+                return `\\cycle("${block.localCycle.toString()}")`;
+            }
+            return "\\cycle()";
+        case "beatduration":
+            if (block.localAtomsPerBeat !== null) {
+                return `\\beatDuration(${block.localAtomsPerBeat})`;
+            }
+            return "\\beatDuration(1)";
+        case "breaks":
+            if (block.localBreaks) {
+                return `\\breaks(${block.localBreaks.join(", ")})`;
+            }
+            return "\\breaks()";
+        case "role": {
+            const roleName = Array.from(block.localRoles.keys())[0] || "";
+            return `\\role("${roleName}")`;
+        }
+        case "group":
+            if (block.name) {
+                return `\\group("${block.name}")`;
+            }
+            return "\\group()";
+        case "notation":
+            return "";
+        default:
+            return `\\${type}()`;
+    }
+}
+function updateCellSource(cell, newSource) {
+    return Object.assign(Object.assign({}, cell), { source: newSource });
+}
+function validateCellSource(source) {
+    let braceCount = 0;
+    for (const char of source) {
+        if (char === "{")
+            braceCount++;
+        if (char === "}")
+            braceCount--;
+        if (braceCount < 0) {
+            return {
+                isValid: false,
+                error: "Unmatched closing brace",
+            };
+        }
+    }
+    if (braceCount !== 0) {
+        return {
+            isValid: false,
+            error: "Unmatched opening brace",
+        };
+    }
+    return { isValid: true };
+}
+function findCellSourceRange(cell, fullSource) {
+    if ((0, block_1.isRawBlock)(cell.blockItem)) {
+        const rawBlock = cell.blockItem;
+        const start = fullSource.indexOf(rawBlock.content);
+        if (start >= 0) {
+            return {
+                start,
+                end: start + rawBlock.content.length,
+            };
+        }
+    }
+    return null;
+}
+//# sourceMappingURL=sourceSerializer.js.map