notations 1.0.2 → 1.0.4

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;
+}

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

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

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

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

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

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