notations 1.0.2 → 1.0.6

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

@@ -0,0 +1,364 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const dockview_core_1 = require("dockview-core");
+const SideBySideEditor_1 = __importDefault(require("./SideBySideEditor"));
+const DEFAULT_CONFIG = {
+    showConsole: true,
+    persistLayout: true,
+    storageKey: "notations-playground-layout",
+    layoutVersion: 1,
+    syncScroll: true,
+};
+class DockViewPlayground {
+    constructor(container, config = {}) {
+        var _a;
+        this.dockview = null;
+        this.sideBySideEditor = null;
+        this.consoleOutput = null;
+        this.consoleEntries = [];
+        this.container = container;
+        this.config = Object.assign(Object.assign({}, DEFAULT_CONFIG), config);
+        this._consoleVisible = (_a = this.config.showConsole) !== null && _a !== void 0 ? _a : true;
+        this.init();
+    }
+    get editor() {
+        return this.sideBySideEditor;
+    }
+    get source() {
+        var _a;
+        return ((_a = this.sideBySideEditor) === null || _a === void 0 ? void 0 : _a.source) || "";
+    }
+    set source(value) {
+        if (this.sideBySideEditor) {
+            this.sideBySideEditor.source = value;
+        }
+    }
+    log(message, level = "info") {
+        const entry = {
+            timestamp: new Date(),
+            level,
+            message,
+        };
+        this.consoleEntries.push(entry);
+        this.renderConsoleEntry(entry);
+    }
+    clearConsole() {
+        this.consoleEntries = [];
+        if (this.consoleOutput) {
+            this.consoleOutput.innerHTML = "";
+        }
+    }
+    render() {
+        var _a;
+        return ((_a = this.sideBySideEditor) === null || _a === void 0 ? void 0 : _a.render()) || false;
+    }
+    destroy() {
+        var _a, _b;
+        (_a = this.sideBySideEditor) === null || _a === void 0 ? void 0 : _a.destroy();
+        (_b = this.dockview) === null || _b === void 0 ? void 0 : _b.dispose();
+        this.container.innerHTML = "";
+    }
+    resetLayout() {
+        if (this.config.storageKey) {
+            localStorage.removeItem(this.config.storageKey);
+        }
+        if (this.dockview) {
+            this.dockview.clear();
+            this.createDefaultLayout();
+        }
+    }
+    isConsoleVisible() {
+        return this._consoleVisible;
+    }
+    showConsole() {
+        var _a;
+        if (this._consoleVisible || !this.dockview)
+            return;
+        this.dockview.addPanel({
+            id: "console",
+            component: "console",
+            title: "Console",
+            position: { direction: "below", referencePanel: "editor" },
+        });
+        const consolePanel = this.dockview.getPanel("console");
+        const containerHeight = this.container.clientHeight || 600;
+        if ((_a = consolePanel === null || consolePanel === void 0 ? void 0 : consolePanel.group) === null || _a === void 0 ? void 0 : _a.api) {
+            consolePanel.group.api.setSize({ height: Math.floor(containerHeight * 0.1) });
+        }
+        this._consoleVisible = true;
+    }
+    hideConsole() {
+        if (!this._consoleVisible || !this.dockview)
+            return;
+        const consolePanel = this.dockview.getPanel("console");
+        if (consolePanel) {
+            consolePanel.api.close();
+        }
+        this._consoleVisible = false;
+    }
+    toggleConsole() {
+        if (this._consoleVisible) {
+            this.hideConsole();
+        }
+        else {
+            this.showConsole();
+        }
+        return this._consoleVisible;
+    }
+    init() {
+        if (!this.container.style.height && !this.container.offsetHeight) {
+            this.container.style.height = "100%";
+        }
+        this.container.style.width = this.container.style.width || "100%";
+        const isDark = this.isDarkMode();
+        this.container.classList.add(isDark ? "dockview-theme-dark" : "dockview-theme-light");
+        const observer = new MutationObserver(() => {
+            const dark = this.isDarkMode();
+            this.container.classList.remove("dockview-theme-dark", "dockview-theme-light");
+            this.container.classList.add(dark ? "dockview-theme-dark" : "dockview-theme-light");
+        });
+        observer.observe(document.documentElement, {
+            attributes: true,
+            attributeFilter: ["class"],
+        });
+        const dockviewComponent = new dockview_core_1.DockviewComponent(this.container, {
+            createComponent: (options) => this.createComponent(options),
+        });
+        this.dockview = dockviewComponent.api;
+        if (!this.config.persistLayout || !this.loadLayout()) {
+            this.createDefaultLayout();
+        }
+        if (this.config.persistLayout) {
+            this.dockview.onDidLayoutChange(() => {
+                this.saveLayout();
+            });
+        }
+        this.log("Playground initialized", "info");
+    }
+    isDarkMode() {
+        if (this.config.isDarkMode) {
+            return this.config.isDarkMode();
+        }
+        return document.documentElement.classList.contains("dark");
+    }
+    saveLayout() {
+        if (!this.dockview || !this.config.storageKey)
+            return;
+        try {
+            const layout = this.dockview.toJSON();
+            const data = {
+                version: this.config.layoutVersion,
+                layout,
+            };
+            localStorage.setItem(this.config.storageKey, JSON.stringify(data));
+        }
+        catch (e) {
+            console.warn("Failed to save layout:", e);
+        }
+    }
+    loadLayout() {
+        if (!this.dockview || !this.config.storageKey)
+            return false;
+        try {
+            const saved = localStorage.getItem(this.config.storageKey);
+            if (saved) {
+                const data = JSON.parse(saved);
+                if (data.version !== this.config.layoutVersion) {
+                    localStorage.removeItem(this.config.storageKey);
+                    return false;
+                }
+                this.dockview.fromJSON(data.layout);
+                return true;
+            }
+        }
+        catch (e) {
+            console.warn("Failed to load layout:", e);
+            if (this.config.storageKey) {
+                localStorage.removeItem(this.config.storageKey);
+            }
+        }
+        return false;
+    }
+    createComponent(options) {
+        switch (options.name) {
+            case "editor":
+                return this.createEditorPanel();
+            case "output":
+                return this.createOutputPanel();
+            case "console":
+                return this.createConsolePanel();
+            default:
+                return {
+                    element: document.createElement("div"),
+                    init: () => { },
+                };
+        }
+    }
+    createDefaultLayout() {
+        var _a, _b, _c;
+        if (!this.dockview)
+            return;
+        const containerHeight = this.container.clientHeight || 600;
+        const containerWidth = this.container.clientWidth || 800;
+        this.dockview.addPanel({
+            id: "editor",
+            component: "editor",
+            title: "Editor",
+        });
+        if (this._consoleVisible) {
+            this.dockview.addPanel({
+                id: "console",
+                component: "console",
+                title: "Console",
+                position: { direction: "below", referencePanel: "editor" },
+            });
+        }
+        this.dockview.addPanel({
+            id: "output",
+            component: "output",
+            title: "Notation Output",
+            position: { direction: "right", referencePanel: "editor" },
+        });
+        const editorPanel = this.dockview.getPanel("editor");
+        const consolePanel = this.dockview.getPanel("console");
+        const outputPanel = this.dockview.getPanel("output");
+        if ((_a = consolePanel === null || consolePanel === void 0 ? void 0 : consolePanel.group) === null || _a === void 0 ? void 0 : _a.api) {
+            consolePanel.group.api.setSize({ height: Math.floor(containerHeight * 0.1) });
+        }
+        if ((_b = editorPanel === null || editorPanel === void 0 ? void 0 : editorPanel.group) === null || _b === void 0 ? void 0 : _b.api) {
+            editorPanel.group.api.setSize({ width: Math.floor(containerWidth * 0.5) });
+        }
+        if ((_c = outputPanel === null || outputPanel === void 0 ? void 0 : outputPanel.group) === null || _c === void 0 ? void 0 : _c.api) {
+            outputPanel.group.api.setSize({ width: Math.floor(containerWidth * 0.5) });
+        }
+    }
+    createEditorPanel() {
+        const element = document.createElement("div");
+        element.className = "dvp-panel dvp-editor-panel";
+        element.style.cssText = "display: flex; flex-direction: column; height: 100%; padding: 0.5rem;";
+        return {
+            element,
+            init: (_params) => {
+                const editorConfig = Object.assign(Object.assign({ initialSource: this.config.initialSource, debounceDelay: 300, syncScroll: this.config.syncScroll, markdownParser: this.config.markdownParser }, this.config.editorConfig), { onSourceChange: (source) => {
+                        var _a, _b, _c, _d;
+                        this.log(`Source changed (${source.length} chars)`, "info");
+                        (_b = (_a = this.config).onSourceChange) === null || _b === void 0 ? void 0 : _b.call(_a, source);
+                        (_d = (_c = this.config.editorConfig) === null || _c === void 0 ? void 0 : _c.onSourceChange) === null || _d === void 0 ? void 0 : _d.call(_c, source);
+                    }, onNotationParsed: (notation, beatLayout) => {
+                        var _a, _b, _c, _d;
+                        const lineCount = beatLayout.gridModelsForLine.size;
+                        this.log(`Parsed: ${lineCount} line${lineCount !== 1 ? "s" : ""}`, "info");
+                        (_b = (_a = this.config).onNotationParsed) === null || _b === void 0 ? void 0 : _b.call(_a, notation, beatLayout);
+                        (_d = (_c = this.config.editorConfig) === null || _c === void 0 ? void 0 : _c.onNotationParsed) === null || _d === void 0 ? void 0 : _d.call(_c, notation, beatLayout);
+                    }, onParseError: (errors) => {
+                        var _a, _b, _c, _d;
+                        errors.forEach((e) => {
+                            this.log(`Parse error: ${e.message || e}`, "error");
+                        });
+                        (_b = (_a = this.config).onParseError) === null || _b === void 0 ? void 0 : _b.call(_a, errors);
+                        (_d = (_c = this.config.editorConfig) === null || _c === void 0 ? void 0 : _c.onParseError) === null || _d === void 0 ? void 0 : _d.call(_c, errors);
+                    }, editorClass: this.config.editorClass });
+                this.sideBySideEditor = new SideBySideEditor_1.default(editorConfig);
+                const editorEl = this.sideBySideEditor.editorElement;
+                editorEl.style.cssText = `
+          width: 100%;
+          height: 100%;
+          resize: none;
+          font-family: "SF Mono", "Monaco", "Inconsolata", "Fira Code", monospace;
+          font-size: 14px;
+          padding: 0.5rem;
+          border: 1px solid var(--dv-separator-border, #ddd);
+          border-radius: 4px;
+          outline: none;
+        `;
+                element.appendChild(editorEl);
+            },
+        };
+    }
+    createOutputPanel() {
+        const element = document.createElement("div");
+        element.className = "dvp-panel dvp-output-panel";
+        element.style.cssText = "display: flex; flex-direction: column; height: 100%;";
+        return {
+            element,
+            init: (_params) => {
+                if (this.sideBySideEditor) {
+                    const outputEl = this.sideBySideEditor.outputElement;
+                    outputEl.style.cssText = `
+            width: 100%;
+            height: 100%;
+            overflow: auto;
+            padding: 1rem;
+          `;
+                    element.appendChild(outputEl);
+                }
+            },
+        };
+    }
+    createConsolePanel() {
+        const element = document.createElement("div");
+        element.className = "dvp-panel dvp-console-panel";
+        element.style.cssText = "display: flex; flex-direction: column; height: 100%;";
+        return {
+            element,
+            init: (_params) => {
+                const header = document.createElement("div");
+                header.className = "dvp-console-header";
+                header.style.cssText = `
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          padding: 0.25rem 0.5rem;
+          font-size: 0.75rem;
+        `;
+                const clearBtn = document.createElement("button");
+                clearBtn.className = "dvp-console-clear-btn";
+                clearBtn.textContent = "Clear";
+                clearBtn.style.cssText = `
+          padding: 0.125rem 0.5rem;
+          font-size: 0.75rem;
+          border-radius: 3px;
+          cursor: pointer;
+        `;
+                clearBtn.onclick = () => this.clearConsole();
+                header.appendChild(clearBtn);
+                element.appendChild(header);
+                this.consoleOutput = document.createElement("div");
+                this.consoleOutput.className = "dvp-console-output";
+                this.consoleOutput.style.cssText = `
+          flex: 1;
+          overflow: auto;
+          padding: 0.5rem;
+          font-family: "SF Mono", "Monaco", "Inconsolata", monospace;
+          font-size: 0.75rem;
+        `;
+                element.appendChild(this.consoleOutput);
+                this.consoleEntries.forEach((entry) => this.renderConsoleEntry(entry));
+            },
+        };
+    }
+    renderConsoleEntry(entry) {
+        if (!this.consoleOutput)
+            return;
+        const line = document.createElement("div");
+        line.style.cssText = `
+      padding: 0.125rem 0;
+      border-bottom: 1px solid var(--dv-separator-border, rgba(0,0,0,0.1));
+    `;
+        if (entry.level === "error") {
+            line.style.color = "#f44336";
+        }
+        else if (entry.level === "warning") {
+            line.style.color = "#ff9800";
+        }
+        const time = entry.timestamp.toLocaleTimeString();
+        line.textContent = `[${time}] ${entry.message}`;
+        this.consoleOutput.appendChild(line);
+        this.consoleOutput.scrollTop = this.consoleOutput.scrollHeight;
+    }
+}
+exports.default = DockViewPlayground;
+//# sourceMappingURL=DockViewPlayground.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DockViewPlayground.js","sourceRoot":"","sources":["../../../../src/web/components/DockViewPlayground.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * DockViewPlayground - A complete notation playground with DockView layout.\n *\n * Provides a ready-to-use playground experience with:\n * - Resizable editor panel\n * - Resizable notation output panel\n * - Optional console panel for logs/errors\n * - Layout persistence to localStorage\n * - Dark mode support\n *\n * Uses SideBySideEditor internally for editor/output management.\n */\n\nimport { DockviewComponent, DockviewApi, IContentRenderer, Parameters } from \"dockview-core\";\nimport SideBySideEditor, { SideBySideEditorConfig } from \"./SideBySideEditor\";\nimport { Notation } from \"../../notation\";\nimport { GlobalBeatLayout } from \"../../beats\";\n\n/**\n * Configuration for DockViewPlayground.\n */\nexport interface DockViewPlaygroundConfig {\n  /**\n   * Initial source text.\n   */\n  initialSource?: string;\n\n  /**\n   * Whether to show the console panel initially.\n   * @default true\n   */\n  showConsole?: boolean;\n\n  /**\n   * Whether to persist layout to localStorage.\n   * @default true\n   */\n  persistLayout?: boolean;\n\n  /**\n   * Storage key for layout persistence.\n   * @default \"notations-playground-layout\"\n   */\n  storageKey?: string;\n\n  /**\n   * Layout version number. Increment to force layout reset when structure changes.\n   * @default 1\n   */\n  layoutVersion?: number;\n\n  /**\n   * Whether to enable scroll synchronization between editor and output.\n   * @default true\n   */\n  syncScroll?: boolean;\n\n  /**\n   * Optional markdown parser for RawBlock content.\n   */\n  markdownParser?: (content: string) => string;\n\n  /**\n   * SideBySideEditor configuration options.\n   */\n  editorConfig?: Partial<SideBySideEditorConfig>;\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   * Function to detect dark mode. If not provided, checks for \"dark\" class on documentElement.\n   */\n  isDarkMode?: () => boolean;\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: DockViewPlaygroundConfig = {\n  showConsole: true,\n  persistLayout: true,\n  storageKey: \"notations-playground-layout\",\n  layoutVersion: 1,\n  syncScroll: true,\n};\n\n/**\n * Console log entry.\n */\ninterface ConsoleEntry {\n  timestamp: Date;\n  level: \"info\" | \"error\" | \"warning\";\n  message: string;\n}\n\n/**\n * DockViewPlayground creates a complete notation playground with DockView layout.\n *\n * Usage:\n * ```typescript\n * const playground = new DockViewPlayground(container, {\n *   initialSource: \"s r g m p\",\n *   onSourceChange: (source) => console.log(\"Source:\", source),\n * });\n *\n * // Access the SideBySideEditor\n * playground.editor.source = \"new source\";\n *\n * // Log to console panel\n * playground.log(\"Hello!\", \"info\");\n * ```\n */\nexport default class DockViewPlayground {\n  /** The container element */\n  readonly container: HTMLElement;\n\n  /** Configuration */\n  readonly config: DockViewPlaygroundConfig;\n\n  /** DockView API */\n  private dockview: DockviewApi | null = null;\n\n  /** SideBySideEditor instance */\n  private sideBySideEditor: SideBySideEditor | null = null;\n\n  /** Console output element */\n  private consoleOutput: HTMLElement | null = null;\n\n  /** Console entries */\n  private consoleEntries: ConsoleEntry[] = [];\n\n  /**\n   * Creates a new DockViewPlayground.\n   *\n   * @param container The container element for the playground\n   * @param config Configuration options\n   */\n  constructor(container: HTMLElement, config: DockViewPlaygroundConfig = {}) {\n    this.container = container;\n    this.config = { ...DEFAULT_CONFIG, ...config };\n    this._consoleVisible = this.config.showConsole ?? true;\n\n    this.init();\n  }\n\n  /**\n   * Gets the SideBySideEditor instance.\n   */\n  get editor(): SideBySideEditor | null {\n    return this.sideBySideEditor;\n  }\n\n  /**\n   * Gets the current source.\n   */\n  get source(): string {\n    return this.sideBySideEditor?.source || \"\";\n  }\n\n  /**\n   * Sets the source and re-renders.\n   */\n  set source(value: string) {\n    if (this.sideBySideEditor) {\n      this.sideBySideEditor.source = value;\n    }\n  }\n\n  /**\n   * Logs a message to the console panel.\n   */\n  log(message: string, level: \"info\" | \"error\" | \"warning\" = \"info\"): void {\n    const entry: ConsoleEntry = {\n      timestamp: new Date(),\n      level,\n      message,\n    };\n    this.consoleEntries.push(entry);\n    this.renderConsoleEntry(entry);\n  }\n\n  /**\n   * Clears the console.\n   */\n  clearConsole(): void {\n    this.consoleEntries = [];\n    if (this.consoleOutput) {\n      this.consoleOutput.innerHTML = \"\";\n    }\n  }\n\n  /**\n   * Renders the notation manually.\n   */\n  render(): boolean {\n    return this.sideBySideEditor?.render() || false;\n  }\n\n  /**\n   * Destroys the playground and cleans up resources.\n   */\n  destroy(): void {\n    this.sideBySideEditor?.destroy();\n    this.dockview?.dispose();\n    this.container.innerHTML = \"\";\n  }\n\n  /**\n   * Resets the layout to defaults.\n   * Clears persisted layout and recreates the default layout.\n   */\n  resetLayout(): void {\n    if (this.config.storageKey) {\n      localStorage.removeItem(this.config.storageKey);\n    }\n    if (this.dockview) {\n      this.dockview.clear();\n      this.createDefaultLayout();\n    }\n  }\n\n  // Console visibility API\n\n  /** Whether the console is currently visible */\n  private _consoleVisible: boolean;\n\n  /**\n   * Returns whether the console panel is currently visible.\n   */\n  isConsoleVisible(): boolean {\n    return this._consoleVisible;\n  }\n\n  /**\n   * Shows the console panel.\n   */\n  showConsole(): void {\n    if (this._consoleVisible || !this.dockview) return;\n\n    // Add console below editor (spans full width at bottom)\n    this.dockview.addPanel({\n      id: \"console\",\n      component: \"console\",\n      title: \"Console\",\n      position: { direction: \"below\", referencePanel: \"editor\" },\n    });\n\n    // Set console to ~10% height\n    const consolePanel = this.dockview.getPanel(\"console\");\n    const containerHeight = this.container.clientHeight || 600;\n    if (consolePanel?.group?.api) {\n      consolePanel.group.api.setSize({ height: Math.floor(containerHeight * 0.1) });\n    }\n\n    this._consoleVisible = true;\n  }\n\n  /**\n   * Hides the console panel.\n   */\n  hideConsole(): void {\n    if (!this._consoleVisible || !this.dockview) return;\n\n    const consolePanel = this.dockview.getPanel(\"console\");\n    if (consolePanel) {\n      consolePanel.api.close();\n    }\n    this._consoleVisible = false;\n  }\n\n  /**\n   * Toggles the console panel visibility.\n   * @returns The new visibility state.\n   */\n  toggleConsole(): boolean {\n    if (this._consoleVisible) {\n      this.hideConsole();\n    } else {\n      this.showConsole();\n    }\n    return this._consoleVisible;\n  }\n\n  /**\n   * Initializes the playground.\n   */\n  private init(): void {\n    // Ensure container has proper sizing for DockView\n    // DockView requires explicit height on its container\n    if (!this.container.style.height && !this.container.offsetHeight) {\n      this.container.style.height = \"100%\";\n    }\n    this.container.style.width = this.container.style.width || \"100%\";\n\n    // Apply theme class (preserve existing classes)\n    const isDark = this.isDarkMode();\n    this.container.classList.add(isDark ? \"dockview-theme-dark\" : \"dockview-theme-light\");\n\n    // Watch for theme changes\n    const observer = new MutationObserver(() => {\n      const dark = this.isDarkMode();\n      this.container.classList.remove(\"dockview-theme-dark\", \"dockview-theme-light\");\n      this.container.classList.add(dark ? \"dockview-theme-dark\" : \"dockview-theme-light\");\n    });\n    observer.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: [\"class\"],\n    });\n\n    // Create DockView\n    const dockviewComponent = new DockviewComponent(this.container, {\n      createComponent: (options) => this.createComponent(options),\n    });\n\n    this.dockview = dockviewComponent.api;\n\n    // Try to restore saved layout, otherwise create default\n    if (!this.config.persistLayout || !this.loadLayout()) {\n      this.createDefaultLayout();\n    }\n\n    // Listen for layout changes to persist them\n    if (this.config.persistLayout) {\n      this.dockview.onDidLayoutChange(() => {\n        this.saveLayout();\n      });\n    }\n\n    this.log(\"Playground initialized\", \"info\");\n  }\n\n  /**\n   * Checks if dark mode is active.\n   */\n  private isDarkMode(): boolean {\n    if (this.config.isDarkMode) {\n      return this.config.isDarkMode();\n    }\n    return document.documentElement.classList.contains(\"dark\");\n  }\n\n  /**\n   * Saves the layout to localStorage.\n   */\n  private saveLayout(): void {\n    if (!this.dockview || !this.config.storageKey) return;\n    try {\n      const layout = this.dockview.toJSON();\n      const data = {\n        version: this.config.layoutVersion,\n        layout,\n      };\n      localStorage.setItem(this.config.storageKey, JSON.stringify(data));\n    } catch (e) {\n      console.warn(\"Failed to save layout:\", e);\n    }\n  }\n\n  /**\n   * Loads the layout from localStorage.\n   */\n  private loadLayout(): boolean {\n    if (!this.dockview || !this.config.storageKey) return false;\n    try {\n      const saved = localStorage.getItem(this.config.storageKey);\n      if (saved) {\n        const data = JSON.parse(saved);\n        // Check version - if outdated or missing, reset to defaults\n        if (data.version !== this.config.layoutVersion) {\n          localStorage.removeItem(this.config.storageKey);\n          return false;\n        }\n        this.dockview.fromJSON(data.layout);\n        return true;\n      }\n    } catch (e) {\n      console.warn(\"Failed to load layout:\", e);\n      if (this.config.storageKey) {\n        localStorage.removeItem(this.config.storageKey);\n      }\n    }\n    return false;\n  }\n\n  /**\n   * Creates a component for DockView.\n   */\n  private createComponent(options: any): IContentRenderer {\n    switch (options.name) {\n      case \"editor\":\n        return this.createEditorPanel();\n      case \"output\":\n        return this.createOutputPanel();\n      case \"console\":\n        return this.createConsolePanel();\n      default:\n        return {\n          element: document.createElement(\"div\"),\n          init: () => {},\n        };\n    }\n  }\n\n  /**\n   * Creates the default layout.\n   * Layout: Editor and Output side by side on top (80% height),\n   * Console spanning full width on bottom (20% height).\n   */\n  private createDefaultLayout(): void {\n    if (!this.dockview) return;\n\n    // Get container dimensions for proportional sizing\n    const containerHeight = this.container.clientHeight || 600;\n    const containerWidth = this.container.clientWidth || 800;\n\n    // Editor panel (top left)\n    this.dockview.addPanel({\n      id: \"editor\",\n      component: \"editor\",\n      title: \"Editor\",\n    });\n\n    // Console panel (bottom, full width) - add BEFORE output\n    // so it creates a vertical split at the root level\n    if (this._consoleVisible) {\n      this.dockview.addPanel({\n        id: \"console\",\n        component: \"console\",\n        title: \"Console\",\n        position: { direction: \"below\", referencePanel: \"editor\" },\n      });\n    }\n\n    // Output panel (top right) - splits the top row\n    this.dockview.addPanel({\n      id: \"output\",\n      component: \"output\",\n      title: \"Notation Output\",\n      position: { direction: \"right\", referencePanel: \"editor\" },\n    });\n\n    // Set sizes using the group API\n    const editorPanel = this.dockview.getPanel(\"editor\");\n    const consolePanel = this.dockview.getPanel(\"console\");\n    const outputPanel = this.dockview.getPanel(\"output\");\n\n    // Set console height to ~10% of container\n    if (consolePanel?.group?.api) {\n      consolePanel.group.api.setSize({ height: Math.floor(containerHeight * 0.1) });\n    }\n\n    // Set editor and output to 50% width each\n    if (editorPanel?.group?.api) {\n      editorPanel.group.api.setSize({ width: Math.floor(containerWidth * 0.5) });\n    }\n    if (outputPanel?.group?.api) {\n      outputPanel.group.api.setSize({ width: Math.floor(containerWidth * 0.5) });\n    }\n  }\n\n  /**\n   * Creates the editor panel.\n   */\n  private createEditorPanel(): IContentRenderer {\n    const element = document.createElement(\"div\");\n    element.className = \"dvp-panel dvp-editor-panel\";\n    element.style.cssText = \"display: flex; flex-direction: column; height: 100%; padding: 0.5rem;\";\n\n    return {\n      element,\n      init: (_params: Parameters) => {\n        // Create SideBySideEditor config\n        const editorConfig: SideBySideEditorConfig = {\n          initialSource: this.config.initialSource,\n          debounceDelay: 300,\n          syncScroll: this.config.syncScroll,\n          markdownParser: this.config.markdownParser,\n          ...this.config.editorConfig,\n          onSourceChange: (source) => {\n            this.log(`Source changed (${source.length} chars)`, \"info\");\n            this.config.onSourceChange?.(source);\n            this.config.editorConfig?.onSourceChange?.(source);\n          },\n          onNotationParsed: (notation, beatLayout) => {\n            const lineCount = beatLayout.gridModelsForLine.size;\n            this.log(`Parsed: ${lineCount} line${lineCount !== 1 ? \"s\" : \"\"}`, \"info\");\n            this.config.onNotationParsed?.(notation, beatLayout);\n            this.config.editorConfig?.onNotationParsed?.(notation, beatLayout);\n          },\n          onParseError: (errors) => {\n            errors.forEach((e) => {\n              this.log(`Parse error: ${e.message || e}`, \"error\");\n            });\n            this.config.onParseError?.(errors);\n            this.config.editorConfig?.onParseError?.(errors);\n          },\n          editorClass: this.config.editorClass,\n        };\n\n        // Create the editor\n        this.sideBySideEditor = new SideBySideEditor(editorConfig);\n\n        // Style the editor element\n        const editorEl = this.sideBySideEditor.editorElement;\n        editorEl.style.cssText = `\n          width: 100%;\n          height: 100%;\n          resize: none;\n          font-family: \"SF Mono\", \"Monaco\", \"Inconsolata\", \"Fira Code\", monospace;\n          font-size: 14px;\n          padding: 0.5rem;\n          border: 1px solid var(--dv-separator-border, #ddd);\n          border-radius: 4px;\n          outline: none;\n        `;\n\n        element.appendChild(editorEl);\n      },\n    };\n  }\n\n  /**\n   * Creates the output panel.\n   */\n  private createOutputPanel(): IContentRenderer {\n    const element = document.createElement(\"div\");\n    element.className = \"dvp-panel dvp-output-panel\";\n    element.style.cssText = \"display: flex; flex-direction: column; height: 100%;\";\n\n    return {\n      element,\n      init: (_params: Parameters) => {\n        if (this.sideBySideEditor) {\n          // Style the output element\n          const outputEl = this.sideBySideEditor.outputElement;\n          outputEl.style.cssText = `\n            width: 100%;\n            height: 100%;\n            overflow: auto;\n            padding: 1rem;\n          `;\n\n          element.appendChild(outputEl);\n        }\n      },\n    };\n  }\n\n  /**\n   * Creates the console panel.\n   */\n  private createConsolePanel(): IContentRenderer {\n    const element = document.createElement(\"div\");\n    element.className = \"dvp-panel dvp-console-panel\";\n    element.style.cssText = \"display: flex; flex-direction: column; height: 100%;\";\n\n    return {\n      element,\n      init: (_params: Parameters) => {\n        // Console header\n        const header = document.createElement(\"div\");\n        header.className = \"dvp-console-header\";\n        header.style.cssText = `\n          display: flex;\n          align-items: center;\n          justify-content: space-between;\n          padding: 0.25rem 0.5rem;\n          font-size: 0.75rem;\n        `;\n\n        const clearBtn = document.createElement(\"button\");\n        clearBtn.className = \"dvp-console-clear-btn\";\n        clearBtn.textContent = \"Clear\";\n        clearBtn.style.cssText = `\n          padding: 0.125rem 0.5rem;\n          font-size: 0.75rem;\n          border-radius: 3px;\n          cursor: pointer;\n        `;\n        clearBtn.onclick = () => this.clearConsole();\n        header.appendChild(clearBtn);\n\n        element.appendChild(header);\n\n        // Console output\n        this.consoleOutput = document.createElement(\"div\");\n        this.consoleOutput.className = \"dvp-console-output\";\n        this.consoleOutput.style.cssText = `\n          flex: 1;\n          overflow: auto;\n          padding: 0.5rem;\n          font-family: \"SF Mono\", \"Monaco\", \"Inconsolata\", monospace;\n          font-size: 0.75rem;\n        `;\n        element.appendChild(this.consoleOutput);\n\n        // Re-render existing entries\n        this.consoleEntries.forEach((entry) => this.renderConsoleEntry(entry));\n      },\n    };\n  }\n\n  /**\n   * Renders a console entry.\n   */\n  private renderConsoleEntry(entry: ConsoleEntry): void {\n    if (!this.consoleOutput) return;\n\n    const line = document.createElement(\"div\");\n    line.style.cssText = `\n      padding: 0.125rem 0;\n      border-bottom: 1px solid var(--dv-separator-border, rgba(0,0,0,0.1));\n    `;\n\n    if (entry.level === \"error\") {\n      line.style.color = \"#f44336\";\n    } else if (entry.level === \"warning\") {\n      line.style.color = \"#ff9800\";\n    }\n\n    const time = entry.timestamp.toLocaleTimeString();\n    line.textContent = `[${time}] ${entry.message}`;\n\n    this.consoleOutput.appendChild(line);\n    this.consoleOutput.scrollTop = this.consoleOutput.scrollHeight;\n  }\n}\n"]}

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

@@ -0,0 +1,35 @@
+import { NotationView } from "../../carnatic";
+export interface NotationBlockConfig {
+    createViewer: (container: HTMLDivElement) => NotationView;
+    cssClasses?: {
+        root?: string;
+        sourceContainer?: string;
+        sourceCaption?: string;
+        sourceCode?: string;
+        outputLabel?: string;
+        outputContainer?: string;
+    };
+}
+export default class NotationBlock {
+    readonly container: HTMLElement;
+    readonly config: NotationBlockConfig;
+    id: string;
+    source: string;
+    caption: string;
+    height: string;
+    newRoot: HTMLDivElement;
+    notationView: NotationView;
+    showSource: boolean;
+    isEditing: boolean;
+    editTextarea: HTMLTextAreaElement | null;
+    sourceCodeElement: HTMLElement | null;
+    constructor(container: HTMLElement, config: NotationBlockConfig);
+    updatePreview(): void;
+    get captionId(): string;
+    copyToClipboard(): Promise<void>;
+    toggleEditMode(): void;
+    enterEditMode(): void;
+    exitEditMode(): void;
+    applyEdit(): void;
+    cancelEdit(): void;
+}