@pb33f/cowboy-components 0.7.17 → 0.8.0

package/dist/components/editor/editor.js

@@ -10,6 +10,7 @@ import { html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { createRef, ref } from "lit/directives/ref.js";
 import { DocumentReferenceClicked, EditorClicked, EditorUpdated } from "../../events/doctor.js";
+import { PB33F_THEME_CHANGE } from "../../events/theme.js";
 import { SpecEditorBreadcrumb } from "./editor-breadcrumb.js";
 import editorCss from "./editor.css.js";
 // schemas
@@ -38,12 +39,26 @@ configureMonacoYaml(monaco, {
 });
 const editorGreen = '#00FF00FF';
 const editorGreenDim = '#008a00';
+const editorGreenDimmer = '#009B0047';
 const editorRed = '#ff3c74';
-const editorBrown = '#004f0d';
+const editorRedDim = '#600018A1';
+const editorRedDimmer = '#6000187E';
+const editorBrown = '#004F0D47';
 const editorBlue = '#62C4FFFF';
 const editorPink = '#E400FB';
+const editorGreenLight = '#000000';
+const editorGreenDimLight = '#444444';
+const editorGreenDimmerLight = 'rgba(0, 0, 0, 0.15)';
+const editorRedLight = '#d32f5a';
+const editorRedDimLight = 'rgba(211, 47, 90, 0.2)';
+const editorRedDimmerLight = 'rgba(211, 47, 90, 0.1)';
+const editorBrownLight = 'rgba(0, 0, 0, 0.08)';
+const editorBlueLight = '#000000';
+const editorPinkLight = '#000000';
 const Alive = 'pb33f';
 const Dead = 'dead';
+const AliveLight = 'pb33f-light';
+const DeadLight = 'dead-light';
 function generatePb33fTheme() {
     return {
         base: 'vs-dark',
@@ -93,8 +108,12 @@ function generatePb33fTheme() {
             'editorLineNumber.foreground': '#6368747F',
             'editorLineNumber.activeForeground': editorPink,
             'editor.inactiveSelectionBackground': '#FF3C742D',
-            'diffEditor.removedTextBackground': '#FF3C741A',
-            'diffEditor.insertedTextBackground': '#62C4FF1A',
+            'diffEditor.removedTextBackground': editorRedDim,
+            'diffEditor.insertedTextBackground': editorGreenDimmer,
+            'diffEditor.insertedLineBackground': editorBrown,
+            'diffEditor.removedLineBackground': editorRedDimmer,
+            'diffEditorGutter.insertedLineBackground': editorBrown,
+            'diffEditorGutter.removedLineBackground': editorRedDimmer,
             'editorLink.activeForeground': editorRed,
             'editorHoverWidget.background': '#0d1117',
             'editorHoverWidget.border': editorPink,
@@ -177,26 +196,234 @@ function generateDeadTheme() {
         }
     };
 }
+function generatePb33fLightTheme() {
+    return {
+        base: 'vs',
+        renderSideBySide: false,
+        inherit: true,
+        rules: [
+            {
+                "foreground": "555555",
+                "token": "string"
+            },
+            {
+                "foreground": "555555",
+                "token": "string.yaml"
+            },
+            {
+                "foreground": "555555",
+                "token": "string.quoted"
+            },
+            {
+                "foreground": "555555",
+                "token": "string.quoted.single"
+            },
+            {
+                "foreground": "555555",
+                "token": "string.quoted.double"
+            },
+            {
+                "foreground": "555555",
+                "token": "string.unquoted"
+            },
+            {
+                "foreground": "555555",
+                "token": "string.link"
+            },
+            {
+                "foreground": "555555",
+                "token": "string.uri"
+            },
+            {
+                "foreground": "555555",
+                "token": "type.identifier"
+            },
+            {
+                "foreground": "000000",
+                "token": "entity.name.tag"
+            },
+            {
+                "foreground": "000000",
+                "token": "entity.name.tag.yaml"
+            },
+            {
+                "foreground": "555555",
+                "token": "number"
+            },
+            {
+                "foreground": "000000",
+                "token": "type"
+            },
+            {
+                "foreground": "000000",
+                "token": "keyword"
+            },
+            { token: 'constant', foreground: 'd32f5a' },
+            {
+                "foreground": "888888",
+                "token": "comment",
+                "fontStyle": "italic"
+            },
+            {
+                "foreground": "888888",
+                "token": "delimiter.curly",
+            },
+            {
+                "foreground": "888888",
+                "token": "delimiter.parenthesis",
+            },
+            {
+                "foreground": "888888",
+                "token": "delimiter.square",
+            },
+        ],
+        colors: {
+            'editor.foreground': '#000000',
+            'editor.background': '#ffffff',
+            'editorCursor.foreground': '#000000',
+            'editor.lineHighlightBackground': '#e8e8e8',
+            'editorLineNumber.foreground': '#aaaaaa',
+            'editorLineNumber.activeForeground': '#000000',
+            'editor.inactiveSelectionBackground': 'rgba(211, 47, 90, 0.15)',
+            'diffEditor.removedTextBackground': editorRedDimLight,
+            'diffEditor.insertedTextBackground': editorGreenDimmerLight,
+            'diffEditor.insertedLineBackground': editorBrownLight,
+            'diffEditor.removedLineBackground': editorRedDimmerLight,
+            'diffEditorGutter.insertedLineBackground': editorBrownLight,
+            'diffEditorGutter.removedLineBackground': editorRedDimmerLight,
+            'editorLink.activeForeground': '#888888',
+            'editorHoverWidget.background': '#ffffff',
+            'editorHoverWidget.border': '#000000',
+            'peekView.border': editorRedLight,
+            'editorStickyScroll.border': '#000000',
+            'editorBracketMatch.border': '#000000',
+            'editorBracketMatch.background': 'rgba(0, 0, 0, 0.1)',
+            'editorBracketHighlight.foreground1': '#000000',
+            'editorBracketHighlight.foreground2': '#444444',
+            'editorBracketHighlight.foreground3': '#666666',
+            'editorBracketHighlight.foreground4': '#888888',
+            'editorError.foreground': '#d32f5a',
+            'editorWarning.foreground': '#888888',
+            'editorInfo.foreground': '#cccccc',
+            'editorOverviewRuler.errorForeground': '#d32f5a',
+            'editorOverviewRuler.warningForeground': '#888888',
+            'editorOverviewRuler.infoForeground': '#cccccc',
+        }
+    };
+}
+function generateDeadLightTheme() {
+    return {
+        base: 'vs',
+        renderSideBySide: false,
+        inherit: true,
+        rules: [
+            {
+                "foreground": "aaaaaa",
+                "token": "string"
+            },
+            {
+                "foreground": "aaaaaa",
+                "token": "number"
+            },
+            {
+                "foreground": "aaaaaa",
+                "token": "type"
+            },
+            {
+                "foreground": "aaaaaa",
+                "token": "keyword"
+            },
+            {
+                "token": "constant",
+                "foreground": "cccccc"
+            },
+            {
+                "foreground": "cccccc",
+                "token": "comment",
+                "fontStyle": "italic"
+            },
+            {
+                "foreground": "cccccc",
+                "token": "delimiter.curly",
+            },
+            {
+                "foreground": "cccccc",
+                "token": "delimiter.parenthesis",
+            },
+            {
+                "foreground": "cccccc",
+                "token": "delimiter.square",
+            },
+        ],
+        colors: {
+            'editor.foreground': '#aaaaaa',
+            'editor.background': '#ffffff',
+            'editorCursor.foreground': '#bbbbbb',
+            'editor.lineHighlightBackground': '#fafafa',
+            'editorLineNumber.foreground': '#cccccc',
+            'editorLineNumber.activeForeground': '#aaaaaa',
+            'editor.inactiveSelectionBackground': '#f0f0f0',
+            'diffEditor.removedTextBackground': 'rgba(211, 47, 90, 0.1)',
+            'diffEditor.insertedTextBackground': 'rgba(0, 0, 0, 0.05)',
+            'editorLink.activeForeground': '#bbbbbb',
+            'editorHoverWidget.background': '#fafafa',
+            'editorHoverWidget.border': '#dddddd',
+            'peekView.border': '#dddddd',
+            'editorStickyScroll.border': '#eeeeee',
+            'editorBracketMatch.border': '#cccccc',
+            'editorBracketMatch.background': '#f5f5f5',
+            'editorBracketHighlight.foreground1': '#bbbbbb',
+            'editorBracketHighlight.foreground2': '#bbbbbb',
+            'editorBracketHighlight.foreground3': '#bbbbbb',
+            'editorBracketHighlight.foreground4': '#bbbbbb',
+        }
+    };
+}
 let monacoConfigured = false;
 function setupMonaco() {
     if (!monacoConfigured) {
         const options = generatePb33fTheme();
         const deadOptions = generateDeadTheme();
-        // @ts-ignore
+        const lightOptions = generatePb33fLightTheme();
+        const deadLightOptions = generateDeadLightTheme();
         monaco.editor.defineTheme(Dead, deadOptions);
-        // @ts-ignore
         monaco.editor.defineTheme(Alive, options);
-        monaco.editor.setTheme(Alive);
+        monaco.editor.defineTheme(DeadLight, deadLightOptions);
+        monaco.editor.defineTheme(AliveLight, lightOptions);
         monacoConfigured = true;
     }
 }
+function getInitialTheme() {
+    const htmlElement = document.querySelector('html');
+    const htmlTheme = htmlElement?.getAttribute('theme');
+    if (htmlTheme === 'light' || htmlTheme === 'dark') {
+        return htmlTheme;
+    }
+    // Fallback to localStorage if HTML attribute not set yet
+    const storedTheme = localStorage.getItem('pb33f-theme');
+    return storedTheme === 'light' ? 'light' : 'dark';
+}
+function getActiveTheme(active, isLight) {
+    if (active) {
+        return isLight ? AliveLight : Alive;
+    }
+    return isLight ? DeadLight : Dead;
+}
 let SpecEditor = class SpecEditor extends LitElement {
     constructor(id = "spec") {
         super();
         this.container = createRef();
         this.currentVersion = null;
+        this.renderSideBySide = true;
+        this.showPlaceholder = true;
+        this.isLightTheme = false;
+        this.pendingValue = null;
         this.decorationIdToLinkTarget = new Map();
-        this.linkRun = false;
+        this.handleThemeChange = (e) => {
+            const customEvent = e;
+            this.isLightTheme = customEvent.detail.theme === 'light';
+            monaco.editor.setTheme(getActiveTheme(this.isActive, this.isLightTheme));
+        };
         this.id = id;
         this.links = [];
         this.decorationIdToLinkTarget = new Map();
@@ -205,14 +432,20 @@ let SpecEditor = class SpecEditor extends LitElement {
         this.breadcumb.currentPath = this.currentPath;
         this.showBreadcrumb = false;
         this.isActive = true;
+        this.isLightTheme = getInitialTheme() === 'light';
+        this.renderSideBySide = true;
     }
     createRenderRoot() {
         return this;
     }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        window.removeEventListener(PB33F_THEME_CHANGE, this.handleThemeChange);
+    }
     revive() {
         if (!this.isActive) {
             this.isActive = true;
-            monaco.editor.setTheme(Alive);
+            monaco.editor.setTheme(getActiveTheme(true, this.isLightTheme));
             this.breadcumb.isInvalid = false;
         }
     }
@@ -221,7 +454,7 @@ let SpecEditor = class SpecEditor extends LitElement {
             this.isActive = false;
             this.links = [];
             this.applyLinkDecorations();
-            monaco.editor.setTheme(Dead);
+            monaco.editor.setTheme(getActiveTheme(false, this.isLightTheme));
         }
     }
     setCurrentPath(path) {
@@ -229,25 +462,73 @@ let SpecEditor = class SpecEditor extends LitElement {
         this.breadcumb.currentPath = path;
     }
     render() {
+        const bannerHeight = this.readOnly ? 40 : 0;
+        const editorHeight = this.diffMode
+            ? `calc(100vh - ${this.showBreadcrumb ? '185px' : '159px'} - ${bannerHeight}px)`
+            : `calc(100vh - ${this.showBreadcrumb ? '155px' : '129px'} - ${bannerHeight}px)`;
         return html `
-            <div style="width: 100%; height: calc(100vh - ${this.showBreadcrumb ? '155px' : '129px'});"
-                 ${ref(this.container)}>
+            ${this.diffMode ? html `
+                <div class="mode-switcher">
+                    <sl-switch class="mode-switcher"
+                               size="small"
+                               ?checked=${this.renderSideBySide}
+                               @sl-change=${this.handleDiffModeToggle}>
+                        RENDER SIDE BY SIDE
+                    </sl-switch>
+                </div>
+            ` : ''}
+            ${this.readOnly ? html `
+                <div class="read-only-banner">
+                    <sl-icon name="lock"></sl-icon>
+                    <span>Workspace is <strong>read-only</strong> when linked to a repo, <strong>it cannot be edited here (yet)</strong></span>
+                </div>
+            ` : ''}
+            <div style="width: 100%; height: ${editorHeight}; position: relative;">
+                <div style="width: 100%; height: 100%;"
+                     ${ref(this.container)}>
+                </div>
+                ${this.placeholder && this.showPlaceholder ? html `
+                    <div style="width: 70%; position: absolute; top: 0; left: 50px;  bottom: 0; display: 
+                    flex; align-items: center; justify-content: center; color: var(--font-color-sub2); font-family: var(--font-stack), 
+                    sans-serif; font-size: 1.2rem; pointer-events: auto; cursor: text; z-index: 10;"
+                         @click=${this.focusEditor}>
+                        ${this.placeholder}
+                    </div>
+                ` : ''}
             </div>
             ${this.showBreadcrumb ? this.breadcumb : null}
         `;
     }
-    getFile() {
-        if (this.children.length > 0)
-            return this.children[0];
-        return null;
+    focusEditor() {
+        if (this.editor && !this.diffMode) {
+            this.editor.focus();
+        }
+    }
+    updatePlaceholderVisibility() {
+        if (!this.placeholder)
+            return;
+        const value = this.getValue();
+        this.showPlaceholder = !value || value.trim() === '';
+    }
+    handleDiffModeToggle(e) {
+        // Shoelace switch fires sl-change event, access checked via event.target
+        const switchElement = e.target;
+        this.renderSideBySide = switchElement.checked;
+        if (this.diffEditor) {
+            // Monaco supports changing renderSideBySide dynamically via updateOptions
+            this.diffEditor.updateOptions({
+                renderSideBySide: this.renderSideBySide,
+                useInlineViewWhenSpaceIsLimited: false, // Force the view mode regardless of width
+                renderSideBySideInlineBreakpoint: 0 // Never auto-switch based on width
+            });
+        }
     }
     getCode() {
+        if (this.placeholder)
+            return '';
         if (this.code)
             return this.code;
-        const file = this.getFile();
-        if (!file)
-            return;
-        return file.innerHTML.trim();
+        return '';
     }
     getTheme() {
         if (this.theme)
@@ -257,7 +538,7 @@ let SpecEditor = class SpecEditor extends LitElement {
         return "vs-light";
     }
     switchLanguage(language) {
-        if (this.editor) {
+        if (this.editor && !this.diffMode) {
             const model = this.editor.getModel(); // Get the current model
             if (model) {
                 monaco.editor.setModelLanguage(model, language);
@@ -272,28 +553,89 @@ let SpecEditor = class SpecEditor extends LitElement {
         if (firstBoot) {
             this.firstboot = firstBoot;
         }
-        this.editor?.setValue(value);
+        if (this.diffMode && this.diffEditor) {
+            // In diff mode, setValue updates the original (left) model
+            this.originalModel?.setValue(value);
+        }
+        else if (this.editor && !this.diffMode) {
+            // Standard editor mode
+            this.editor.setValue(value);
+        }
+        else if (!this.editor && !this.diffMode) {
+            // Editor not ready yet - queue the value for when it's initialized
+            this.pendingValue = { value, firstBoot };
+        }
+        this.updatePlaceholderVisibility();
+    }
+    setDiffValue(value) {
+        if (this.diffMode && this.modifiedModel) {
+            // Update the modified (right) model in diff mode
+            this.modifiedModel.setValue(value);
+        }
     }
     getValue() {
-        if (this.editor) {
+        if (this.diffMode && this.diffEditor) {
+            // In diff mode, return the modified (right) value
+            return this.modifiedModel?.getValue() || '';
+        }
+        else if (this.editor && !this.diffMode) {
             return this.editor.getValue();
         }
         return '';
     }
+    setPosition(position) {
+        if (this.editor && !this.diffMode) {
+            this.editor.setPosition(position);
+        }
+    }
+    revealLineInCenter(lineNumber) {
+        if (this.editor && !this.diffMode) {
+            this.editor.revealLineInCenter(lineNumber);
+        }
+    }
+    revealLineInCenterOriginal(lineNumber) {
+        if (this.diffEditor && this.diffMode) {
+            const originalEditor = this.diffEditor.getOriginalEditor();
+            originalEditor.revealLineInCenter(lineNumber);
+        }
+    }
+    setPositionOriginal(position) {
+        if (this.diffEditor && this.diffMode) {
+            const originalEditor = this.diffEditor.getOriginalEditor();
+            originalEditor.setPosition(position);
+            originalEditor.focus();
+        }
+    }
+    setReadOnly(readOnly) {
+        this.readOnly = readOnly;
+        if (this.editor && !this.diffMode) {
+            this.editor.updateOptions({
+                readOnly: readOnly,
+                renderValidationDecorations: readOnly ? "on" : "editable"
+            });
+        }
+    }
     updated(changed) {
         if (changed.has("links")) {
             this.applyLinkDecorations();
         }
     }
     clearDecorations() {
-        this.linkDecorations.clear();
+        if (this.linkDecorations) {
+            this.linkDecorations.clear();
+        }
         this.linkProvider?.dispose();
         this.links = [];
-        this.linkRun = false;
     }
     clearAllMarkers() {
         monaco.editor.removeAllMarkers("owner-" + this.id);
     }
+    disposeModel() {
+        if (this.model) {
+            this.model.dispose();
+            this.model = undefined;
+        }
+    }
     setMarkers(markers) {
         monaco.editor.removeAllMarkers("owner-" + this.id);
         monaco.editor.setModelMarkers(this.model, "owner-" + this.id, markers);
@@ -332,14 +674,19 @@ let SpecEditor = class SpecEditor extends LitElement {
         }
     }
     firstUpdated() {
-        // monkey patch the monaco API to drop monaco-yaml’s link providers
+        // Re-check theme now that DOM is fully connected
+        this.isLightTheme = getInitialTheme() === 'light';
+        // monkey patch the monaco API to drop monaco-yaml's link providers
         const origReg = monaco.languages.registerLinkProvider.bind(monaco.languages);
         monaco.languages.registerLinkProvider = (language, provider) => {
             const code = provider.provideLinks.toString();
             // drop *both* of monaco‑yaml's providers by matching on the workerManager call:
             if (code.includes('workerManager.getWorker') || code.includes('worker.findLinks')) {
                 // return a no‑op disposable
-                return { dispose() { } };
+                return {
+                    dispose() {
+                    }
+                };
             }
             return origReg(language, provider);
         };
@@ -352,28 +699,69 @@ let SpecEditor = class SpecEditor extends LitElement {
             schemas: [] // start empty
         });
         setupMonaco();
-        const uri = monaco.Uri.parse("inmemory://doc-" + this.id + '.yaml');
-        const value = this.getCode();
-        this.model = monaco.editor.createModel(value, "yaml", uri);
-        this.editor = monaco.editor.create(this.container.value, {
-            model: this.model,
-            language: 'yaml',
-            theme: 'pb33f',
-            glyphMargin: true,
-            readOnly: this.readOnly,
-            automaticLayout: true,
-            fontFamily: 'BerkeleyMono-Regular',
-            fontSize: 14,
-            minimap: {
-                enabled: this.minimapVisible
-            },
-            hover: {
-                enabled: true,
-                delay: 100,
-                above: false,
-                sticky: true,
-            },
-        });
+        const initialTheme = getActiveTheme(this.isActive, this.isLightTheme);
+        monaco.editor.setTheme(initialTheme);
+        window.addEventListener(PB33F_THEME_CHANGE, this.handleThemeChange);
+        if (this.diffMode) {
+            // Create diff editor
+            const originalUri = monaco.Uri.parse("inmemory://original-" + this.id + '.yaml');
+            const modifiedUri = monaco.Uri.parse("inmemory://modified-" + this.id + '.yaml');
+            // In diff mode, don't use getCode() as it might pick up rendered HTML elements
+            const originalValue = '';
+            const modifiedValue = this.diffValue || '';
+            this.originalModel = monaco.editor.createModel(originalValue, "yaml", originalUri);
+            this.modifiedModel = monaco.editor.createModel(modifiedValue, "yaml", modifiedUri);
+            this.diffEditor = monaco.editor.createDiffEditor(this.container.value, {
+                theme: getActiveTheme(this.isActive, this.isLightTheme),
+                readOnly: true, // Both sides read-only in diff mode
+                automaticLayout: true,
+                fontFamily: 'BerkeleyMono-Regular',
+                fontSize: 14,
+                minimap: {
+                    enabled: false,
+                },
+                renderSideBySide: this.renderSideBySide,
+                useInlineViewWhenSpaceIsLimited: false, // Prevent automatic switching to inline
+                renderSideBySideInlineBreakpoint: 0, // Never switch to inline based on width
+                enableSplitViewResizing: true, // Allow resizing the split
+                renderOverviewRuler: false,
+                ignoreTrimWhitespace: false,
+                glyphMargin: false
+            });
+            this.diffEditor.setModel({
+                original: this.originalModel,
+                modified: this.modifiedModel
+            });
+            this.editor = this.diffEditor;
+            // Store reference to the modified model as the primary model for consistency
+            this.model = this.modifiedModel;
+        }
+        else {
+            // Standard editor creation
+            const uri = monaco.Uri.parse("inmemory://doc-" + this.id + '.yaml');
+            const value = this.getCode();
+            this.model = monaco.editor.createModel(value, "yaml", uri);
+            this.editor = monaco.editor.create(this.container.value, {
+                model: this.model,
+                language: 'yaml',
+                theme: getActiveTheme(this.isActive, this.isLightTheme),
+                glyphMargin: true,
+                readOnly: this.readOnly,
+                renderValidationDecorations: this.readOnly ? "on" : "editable",
+                automaticLayout: true,
+                fontFamily: 'BerkeleyMono-Regular',
+                fontSize: 14,
+                minimap: {
+                    enabled: this.minimapVisible
+                },
+                hover: {
+                    enabled: true,
+                    delay: 100,
+                    above: false,
+                    sticky: true,
+                },
+            });
+        }
         // restore the original API so nothing else is affected
         monaco.languages.registerLinkProvider = origReg;
         this.linkProvider = monaco.languages.registerLinkProvider('yaml', { provideLinks: this.provideLinks.bind(this) });
@@ -454,33 +842,46 @@ let SpecEditor = class SpecEditor extends LitElement {
                 return null;
             },
         });
-        this.linkDecorations = this.editor.createDecorationsCollection();
-        this.model.onDidChangeContent(() => {
-            if (!this.firstboot) {
-                this.dispatchEvent(new CustomEvent(EditorUpdated, {
+        // Skip decorations and event handlers for diff editor mode
+        if (!this.diffMode) {
+            this.linkDecorations = this.editor.createDecorationsCollection();
+            this.model.onDidChangeContent(() => {
+                // Clear decorations when content changes significantly (like paste operations)
+                // The links array will be rebuilt when diagnosis runs
+                // This prevents stale decorations from appearing on new content
+                if (this.links.length > 0) {
+                    const currentContent = this.editor.getValue();
+                    // If content changed substantially, clear the links
+                    // This is a simple heuristic - you might want to refine this
+                    this.clearDecorations();
+                }
+                this.updatePlaceholderVisibility();
+                if (!this.firstboot) {
+                    this.dispatchEvent(new CustomEvent(EditorUpdated, {
+                        bubbles: true,
+                        composed: true,
+                        detail: {
+                            content: this.editor.getValue(),
+                            id: this.id
+                        }
+                    }));
+                    this.onDocChange();
+                }
+                else {
+                    this.firstboot = false;
+                }
+            });
+            this.editor.onMouseDown((e) => {
+                this.dispatchEvent(new CustomEvent(EditorClicked, {
                     bubbles: true,
                     composed: true,
                     detail: {
-                        content: this.editor.getValue(),
-                        id: this.id
+                        line: e.target.position?.lineNumber,
+                        column: e.target.position?.column
                     }
                 }));
-                this.onDocChange();
-            }
-            else {
-                this.firstboot = false;
-            }
-        });
-        this.editor.onMouseDown((e) => {
-            this.dispatchEvent(new CustomEvent(EditorClicked, {
-                bubbles: true,
-                composed: true,
-                detail: {
-                    line: e.target.position?.lineNumber,
-                    column: e.target.position?.column
-                }
-            }));
-        });
+            });
+        }
         // handle link clicks
         //this.editor.onMouseUp((e) => {
         // const position = e.target.position;
@@ -519,6 +920,13 @@ let SpecEditor = class SpecEditor extends LitElement {
             .addEventListener("change", () => {
             monaco.editor.setTheme(this.getTheme());
         });
+        // Apply any pending value that was set before Monaco was initialized
+        if (this.pendingValue && this.editor && !this.diffMode) {
+            this.firstboot = this.pendingValue.firstBoot;
+            this.editor.setValue(this.pendingValue.value);
+            this.pendingValue = null;
+            this.updatePlaceholderVisibility();
+        }
     }
     open(uri) {
         if (uri.scheme == 'doctor') {
@@ -533,7 +941,7 @@ let SpecEditor = class SpecEditor extends LitElement {
         return Promise.resolve(true);
     }
     applyLinkDecorations() {
-        if (!this.editor) {
+        if (!this.editor || this.diffMode || !this.linkDecorations) {
             return;
         }
         this.linkDecorations.clear();
@@ -557,7 +965,7 @@ let SpecEditor = class SpecEditor extends LitElement {
         }
     }
     provideLinks(_model, _token) {
-        if (this.linkRun) {
+        if (this.links.length === 0) {
             return null;
         }
         const links = this.links.map((link) => {
@@ -568,7 +976,6 @@ let SpecEditor = class SpecEditor extends LitElement {
                 url: monaco.Uri.parse(`doctor://${encodeURIComponent(linkString)}`),
             };
         });
-        this.linkRun = true;
         return { links };
     }
 };
@@ -576,6 +983,15 @@ SpecEditor.styles = [editorCss];
 __decorate([
     property({ type: Boolean, attribute: "readonly" })
 ], SpecEditor.prototype, "readOnly", void 0);
+__decorate([
+    property({ type: Boolean })
+], SpecEditor.prototype, "diffMode", void 0);
+__decorate([
+    property()
+], SpecEditor.prototype, "diffValue", void 0);
+__decorate([
+    property({ type: Boolean })
+], SpecEditor.prototype, "renderSideBySide", void 0);
 __decorate([
     property()
 ], SpecEditor.prototype, "theme", void 0);
@@ -594,9 +1010,15 @@ __decorate([
 __decorate([
     property()
 ], SpecEditor.prototype, "id", void 0);
+__decorate([
+    property()
+], SpecEditor.prototype, "placeholder", void 0);
 __decorate([
     state()
 ], SpecEditor.prototype, "showBreadcrumb", void 0);
+__decorate([
+    state()
+], SpecEditor.prototype, "showPlaceholder", void 0);
 SpecEditor = __decorate([
     customElement("pb33f-editor")
 ], SpecEditor);