composite-monaco-diff 1.0.2

package/dist/esm/MonacoDiffManager.js

@@ -0,0 +1,306 @@
+/**
+ * Monaco diff editor manager. Refresh version/CDN URLs: pnpm run monaco -- --skip
+ */
+import trimLeft from "./trimLeft.js";
+// autogenerate v
+export const MONACO_GENERATED = {
+    "version": "0.55.1",
+    "vs": [
+        "https://cdn.jsdelivr.net/npm/monaco-editor@0.55.1/min/vs",
+        "https://unpkg.com/monaco-editor@0.55.1/min/vs",
+        "/monaco/vs"
+    ]
+};
+let cachedMonaco = null;
+let cachedVsBase = null;
+let loadingPromise = null;
+/** Monaco AMD injects editor CSS into `document`; shadow roots need their own copy. */
+const MONACO_VS_STYLESHEET = /\/vs\/(base|editor|platform)/;
+/**
+ * Marker on `<link rel="stylesheet">` nodes we inject into a shadow root.
+ * Purpose: tag “our” Monaco CSS copies so we do not insert duplicates on reconnect
+ * or second editor in the same shadow tree. Usage: set on each cloned/created link
+ * before append; `ensureMonacoStylesInShadowRoot` bails out if one is already present.
+ */
+const MONACO_SHADOW_STYLES_ATTR = "data-monaco-shadow-styles";
+/** Waits until a CSS file linked in the page has finished loading (or is already loaded). */
+function loadStylesheetLink(link) {
+    if (link.sheet) {
+        return Promise.resolve();
+    }
+    return new Promise((resolve, reject) => {
+        link.addEventListener("load", () => resolve(), { once: true });
+        link.addEventListener("error", () => reject(new Error(`Failed to load Monaco stylesheet: ${link.href}`)), {
+            once: true,
+        });
+    });
+}
+/**
+ * Puts Monaco’s CSS inside the web component’s shadow DOM so the editor looks correct
+ * there (normal page CSS does not reach inside a shadow root).
+ *
+ * Each injected stylesheet is marked with {@link MONACO_SHADOW_STYLES_ATTR} so this
+ * runs only once per shadow root.
+ */
+async function ensureMonacoStylesInShadowRoot(container) {
+    const root = container.getRootNode();
+    if (!(root instanceof ShadowRoot)) {
+        return;
+    }
+    if (root.querySelector(`[${MONACO_SHADOW_STYLES_ATTR}]`)) {
+        return;
+    }
+    const documentLinks = Array.from(document.querySelectorAll("link[rel='stylesheet']")).filter((link) => {
+        const href = link.getAttribute("href") ?? "";
+        return MONACO_VS_STYLESHEET.test(href);
+    });
+    const loads = [];
+    for (const documentLink of documentLinks) {
+        const clone = documentLink.cloneNode(true);
+        clone.setAttribute(MONACO_SHADOW_STYLES_ATTR, "");
+        loads.push(loadStylesheetLink(clone));
+        root.insertBefore(clone, root.firstChild);
+    }
+    if (documentLinks.length === 0 && cachedVsBase) {
+        const link = document.createElement("link");
+        link.rel = "stylesheet";
+        link.href = `${cachedVsBase}/editor/editor.main.css`;
+        link.setAttribute(MONACO_SHADOW_STYLES_ATTR, "");
+        loads.push(loadStylesheetLink(link));
+        root.insertBefore(link, root.firstChild);
+    }
+    await Promise.all(loads);
+}
+/**
+ * Downloads and starts Monaco from a given base URL (CDN or local `/monaco/vs`),
+ * using the same loader script the official samples use.
+ */
+function loadMonaco(vsBase) {
+    return new Promise((resolve, reject) => {
+        const win = window;
+        const finish = () => {
+            win.require?.config({ paths: { vs: vsBase } });
+            win.require?.(["vs/editor/editor.main"], () => {
+                if (win.monaco) {
+                    resolve(win.monaco);
+                }
+                else {
+                    reject(new Error(`Monaco did not initialize from ${vsBase}`));
+                }
+            }, (err) => {
+                reject(err instanceof Error ? err : new Error(String(err)));
+            });
+        };
+        if (win.monaco) {
+            resolve(win.monaco);
+            return;
+        }
+        if (win.require) {
+            finish();
+            return;
+        }
+        const script = document.createElement("script");
+        script.src = `${vsBase}/loader.js`;
+        script.async = true;
+        script.onload = () => finish();
+        script.onerror = () => reject(new Error(`Failed to load Monaco loader from ${vsBase}`));
+        document.head.appendChild(script);
+    });
+}
+/**
+ * Loads Monaco once and keeps it in memory. Tries each configured URL until one works,
+ * so the app still runs if a CDN is down.
+ */
+export function hydrateCache(generated = MONACO_GENERATED) {
+    if (cachedMonaco) {
+        return Promise.resolve(cachedMonaco);
+    }
+    if (loadingPromise) {
+        return loadingPromise;
+    }
+    loadingPromise = (async () => {
+        const errors = [];
+        for (const vsBase of generated.vs) {
+            try {
+                cachedMonaco = await loadMonaco(vsBase);
+                cachedVsBase = vsBase;
+                return cachedMonaco;
+            }
+            catch (err) {
+                errors.push(err instanceof Error ? err : new Error(String(err)));
+            }
+        }
+        loadingPromise = null;
+        throw new AggregateError(errors, `Failed to load monaco-editor@${generated.version} from all sources`);
+    })();
+    return loadingPromise;
+}
+export const SCRIPT_TYPE_ORIGINAL = "text/original";
+export const SCRIPT_TYPE_MODIFIED = "text/modified";
+/**
+ * Reads the “before” and “after” code from `<script>` tags inside the element (HTML-first setup).
+ * Returns nothing if there are no scripts; throws if the markup is incomplete or wrong.
+ */
+export function readDeclarativeDiffScripts(host) {
+    const scripts = Array.from(host.querySelectorAll(":scope > script"));
+    if (scripts.length === 0) {
+        return null;
+    }
+    if (scripts.length < 2) {
+        throw new Error(`<composite-monaco-diff>: expected exactly at leasttwo <script> elements (type="${SCRIPT_TYPE_ORIGINAL}" and type="${SCRIPT_TYPE_MODIFIED}"), found ${scripts.length}`);
+    }
+    let originalScript;
+    let modifiedScript;
+    for (const script of scripts) {
+        const type = script.getAttribute("type");
+        if (type === SCRIPT_TYPE_ORIGINAL) {
+            if (originalScript) {
+                throw new Error(`<composite-monaco-diff>: duplicate <script type="${SCRIPT_TYPE_ORIGINAL}">`);
+            }
+            originalScript = script;
+        }
+        else if (type === SCRIPT_TYPE_MODIFIED) {
+            if (modifiedScript) {
+                throw new Error(`<composite-monaco-diff>: duplicate <script type="${SCRIPT_TYPE_MODIFIED}">`);
+            }
+            modifiedScript = script;
+        }
+        else {
+            throw new Error(`<composite-monaco-diff>: <script> must have type="${SCRIPT_TYPE_ORIGINAL}" or type="${SCRIPT_TYPE_MODIFIED}"`);
+        }
+    }
+    if (!originalScript || !modifiedScript) {
+        const missing = !originalScript ? SCRIPT_TYPE_ORIGINAL : SCRIPT_TYPE_MODIFIED;
+        throw new Error(`<composite-monaco-diff>: missing <script type="${missing}">`);
+    }
+    let original = originalScript.textContent ?? "";
+    let modified = modifiedScript.textContent ?? "";
+    const originalLanguage = originalScript.getAttribute("lang") ?? undefined;
+    const modifiedLanguage = modifiedScript.getAttribute("lang") ?? undefined;
+    let originalOffset = parseInt(originalScript.getAttribute("data-offset"), 10) ?? 0;
+    let modifiedOffset = parseInt(modifiedScript.getAttribute("data-offset"), 10) ?? 0;
+    if (!(originalOffset > 0)) {
+        throw new Error(`<composite-monaco-diff><script type='text/original'>: data-offset must be a positive integer >${originalOffset}<`);
+    }
+    if (!(modifiedOffset > 0)) {
+        throw new Error(`<composite-monaco-diff><script type='text/modified'>: data-offset must be a positive integer >${modifiedOffset}<`);
+    }
+    original = trimLeft(original, originalOffset);
+    modified = trimLeft(modified, modifiedOffset);
+    originalScript.remove();
+    modifiedScript.remove();
+    return { original, modified, originalLanguage, modifiedLanguage };
+}
+const DEFAULT_LANGUAGE = "javascript";
+/**
+ * Figures out what text and language to show on each side: from options, from HTML scripts,
+ * or empty strings with a sensible default language.
+ */
+function resolveDiffContent(options) {
+    let original = options.original ?? "";
+    let modified = options.modified ?? "";
+    let originalLanguage = options.originalLanguage;
+    let modifiedLanguage = options.modifiedLanguage;
+    if (options.host) {
+        const declarative = readDeclarativeDiffScripts(options.host);
+        if (declarative) {
+            original = declarative.original;
+            modified = declarative.modified;
+            originalLanguage = originalLanguage ?? declarative.originalLanguage;
+            modifiedLanguage = modifiedLanguage ?? declarative.modifiedLanguage;
+        }
+    }
+    const sharedLanguage = options.language;
+    return {
+        original,
+        modified,
+        originalLanguage: originalLanguage ?? sharedLanguage ?? DEFAULT_LANGUAGE,
+        modifiedLanguage: modifiedLanguage ?? sharedLanguage ?? DEFAULT_LANGUAGE,
+    };
+}
+export class MonacoDiffManager {
+    _readyPromise;
+    _editor = null;
+    _resizeObserver = null;
+    _layoutRaf = null;
+    _container;
+    /**
+     * Mounts a side-by-side diff editor into the given element: loads Monaco, applies styles,
+     * fills in original/modified text, and starts watching size changes.
+     */
+    constructor(container, options) {
+        this._container = container;
+        container.style.height = "100%";
+        container.style.width = "100%";
+        const { original, modified, originalLanguage, modifiedLanguage } = resolveDiffContent(options);
+        this._readyPromise = (async () => {
+            const monaco = await hydrateCache(MONACO_GENERATED);
+            await ensureMonacoStylesInShadowRoot(container);
+            this._editor = monaco.editor.createDiffEditor(container, {
+                automaticLayout: false,
+                scrollbar: {
+                    vertical: "auto",
+                },
+                scrollBeyondLastLine: false,
+                ...options.editorOptions,
+            });
+            this._editor.setModel({
+                original: monaco.editor.createModel(original, originalLanguage),
+                modified: monaco.editor.createModel(modified, modifiedLanguage),
+            });
+            this._scheduleLayout();
+            this._resizeObserver = new ResizeObserver(() => this._scheduleLayout());
+            this._resizeObserver.observe(container);
+        })();
+    }
+    /** Promise that resolves when the editor has finished loading and is safe to use. */
+    whenReady() {
+        return this._readyPromise;
+    }
+    /** Returns the underlying Monaco diff editor instance (or null if not ready yet). */
+    getEditor() {
+        return this._editor;
+    }
+    /** Returns the global Monaco API instance (or null if not loaded yet). */
+    getMonaco() {
+        return cachedMonaco;
+    }
+    /** Tears down the editor, frees memory, and stops listening for resize events. */
+    destroy() {
+        this._resizeObserver?.disconnect();
+        this._resizeObserver = null;
+        if (this._layoutRaf !== null) {
+            cancelAnimationFrame(this._layoutRaf);
+            this._layoutRaf = null;
+        }
+        const model = this._editor?.getModel();
+        this._editor?.dispose();
+        this._editor = null;
+        model?.original.dispose();
+        model?.modified.dispose();
+    }
+    /** Updates the language for both sides of the diff editor. Falls back to the default language when undefined. */
+    setLanguage(language) {
+        const model = this._editor?.getModel();
+        if (!model)
+            return;
+        const lang = language ?? DEFAULT_LANGUAGE;
+        cachedMonaco?.editor.setModelLanguage(model.original, lang);
+        cachedMonaco?.editor.setModelLanguage(model.modified, lang);
+    }
+    /** Resizes the editor to match its container on the next animation frame (avoids jank). */
+    _scheduleLayout() {
+        if (this._layoutRaf !== null)
+            return;
+        this._layoutRaf = requestAnimationFrame(() => {
+            this._layoutRaf = null;
+            if (!this._editor)
+                return;
+            const { width, height } = this._container.getBoundingClientRect();
+            if (width === 0 || height === 0) {
+                return;
+            }
+            this._editor.layout({ width, height });
+        });
+    }
+}

package/dist/esm/composite-monaco-diff.js

@@ -0,0 +1,123 @@
+/**
+ * `<composite-monaco-diff>` — declarative diff editor with optional embedded `<script>` sources.
+ *
+ * Import this module to register the element (`customElements.define` at file bottom).
+ * Before querying the DOM or calling instance APIs from other modules, wait until the
+ * browser knows the tag (same pattern as other custom elements in this repo):
+ *
+ *   import { MonacoDiffElement } from "./composite-monaco-diff.js";
+ *
+ *   await customElements.whenDefined(MonacoDiffElement.tagName);
+ *
+ *   const diff = document.querySelector(MonacoDiffElement.tagName);
+ *   if (!(diff instanceof MonacoDiffElement)) throw new Error("Missing <composite-monaco-diff>");
+ *   await diff.whenReady();
+ *
+ * @example HTML
+ * ```html
+ * <composite-monaco-diff theme="vs-dark">
+ *   <script type="text/original" lang="javascript">
+ *     const a = 1;
+ *   </script>
+ *   <script type="text/modified" lang="typescript">
+ *     const a = 2;
+ *   </script>
+ * </composite-monaco-diff>
+ * ```
+ */
+import { hydrateCache, MonacoDiffManager } from "./MonacoDiffManager.js";
+/** Custom element tag name (`"composite-monaco-diff"`). Pass to `customElements.whenDefined(tagName)`. */
+export const tagName = "composite-monaco-diff";
+export const MONACO_THEMES = ["vs", "vs-dark", "hc-black", "hc-light"];
+export function isMonacoTheme(value) {
+    return MONACO_THEMES.includes(value);
+}
+function parseThemeAttribute(value) {
+    if (value && isMonacoTheme(value)) {
+        return value;
+    }
+    return undefined;
+}
+export class MonacoDiffElement extends HTMLElement {
+    static tagName = tagName;
+    static get observedAttributes() {
+        return ["theme", "language"];
+    }
+    _container;
+    _manager = null;
+    constructor() {
+        super();
+        this.attachShadow({ mode: "open" });
+        this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          width: 100%;
+          height: 100%;
+          min-height: 200px;
+        }
+        .container {
+          width: 100%;
+          height: 100%;
+        }
+      </style>
+      <div class="container"></div>
+    `;
+        this._container = this.shadowRoot.querySelector(".container");
+    }
+    connectedCallback() {
+        if (this._manager) {
+            return;
+        }
+        const theme = parseThemeAttribute(this.getAttribute("theme"));
+        const language = this.getAttribute("language") ?? undefined;
+        this._manager = new MonacoDiffManager(this._container, {
+            host: this,
+            language,
+            editorOptions: {
+                theme,
+            },
+        });
+    }
+    attributeChangedCallback(name, _oldValue, newValue) {
+        if (name === "theme") {
+            void this._applyTheme(parseThemeAttribute(newValue));
+        }
+        else if (name === "language") {
+            void this._applyLanguage(newValue ?? undefined);
+        }
+    }
+    disconnectedCallback() {
+        this._manager?.destroy();
+        this._manager = null;
+    }
+    /** Promise that resolves when the editor has finished loading and is safe to use. */
+    whenReady() {
+        if (!this._manager) {
+            throw new Error("<composite-monaco-diff>: not connected");
+        }
+        return this._manager.whenReady();
+    }
+    getManager() {
+        if (!this._manager) {
+            throw new Error("<composite-monaco-diff>: not connected");
+        }
+        return this._manager;
+    }
+    async _applyTheme(theme) {
+        if (!this._manager) {
+            return;
+        }
+        await this.whenReady();
+        const monaco = await hydrateCache();
+        monaco.editor.setTheme(theme ?? "vs");
+    }
+    async _applyLanguage(language) {
+        if (!this._manager) {
+            return;
+        }
+        await this.whenReady();
+        this._manager.setLanguage(language);
+    }
+}
+customElements.define(tagName, MonacoDiffElement);

package/dist/esm/manager/index.js

@@ -0,0 +1,177 @@
+import { CenterAndHeightResizer } from "../CenterAndHeightResizer.js";
+import modURLSearchParams from "../urlchange/urlchange.js";
+import { syncURLSearchParams, buildUrlWithSearchParams } from "../urlchange/toolsURLSearchParams.js";
+import { MonacoDiffManager } from "../MonacoDiffManager.js";
+import { isMonacoTheme } from "../composite-monaco-diff.js";
+await customElements.whenDefined(CenterAndHeightResizer.tagName);
+const container = document.getElementById("container");
+if (!container) {
+    throw new Error("Missing #container element");
+}
+const original = `
+const loadMonaco = (vsPath = VS_PATH) =>
+  new Promise((resolve, reject) => {
+    const win = window;
+
+    const finish = () => {
+      win.require.config({ paths: { vs: vsPath } });
+      win.require(["vs/editor/editor.main"], () => resolve(win.monaco));
+    };
+
+    if (win.require && win.monaco) return resolve(win.monaco);
+    if (win.require) return finish();
+
+    const script = document.createElement("script");
+    script.src = \`\${vsPath}/loader.js\`;
+    script.async = true;
+    script.onload = () => finish();
+    script.onerror = () => reject(new Error(\`Failed to load Monaco loader from \${vsPath}\`));
+    document.head.appendChild(script);
+  });
+`;
+const modified = `
+const loadMonaco = (vsPath = VS_PATH) =>
+  new Promise((resolve, reject) => {
+    const win = window;
+
+    const finish = () => {
+      win.require.config({ paths: { vs: vsPath } });
+      win.require(["vs/editor/editor.main"], () => resolve(win.monaco));
+    };
+
+    if (win.require && win.moneco) return resolve(win.monaco);    
+
+    const script = document.createElement("script");
+    script.src = \`\${vsPath}/loader.js\`;
+    script.async = true;
+    script.onload = () => finish();
+    script.added = 'stuff'
+    script.onerror = () => reject(new Error(\`Failed to load Monaco loader from \${vsPath}\`));
+    document.head.appendChild(script);
+  });
+`;
+const mgr = new MonacoDiffManager(container, {
+    original,
+    modified,
+    language: "javascript",
+});
+/**
+ * This is actually important for mgr to
+ * be ready before continuing with trackUrl()
+ */
+await mgr.whenReady();
+const themeSelect = document.getElementById("theme-select");
+if (!(themeSelect instanceof HTMLSelectElement)) {
+    throw new Error("Missing #theme-select element");
+}
+const languageSelect = document.getElementById("language-select");
+if (!(languageSelect instanceof HTMLSelectElement)) {
+    throw new Error("Missing #language-select element");
+}
+const config = {
+    left: {
+        default: "100px",
+        getParam: "l",
+        encode: (value) => value,
+        decode: (value) => value,
+    },
+    center: {
+        default: "1200px",
+        getParam: "c",
+        encode: (value) => value,
+        decode: (value) => value,
+    },
+    height: {
+        default: "100px",
+        getParam: "h",
+        encode: (value) => value,
+        decode: (value) => value,
+    },
+    theme: {
+        default: "",
+        getParam: "theme",
+        encode: (value) => value,
+        decode: (value) => value,
+    },
+};
+document.querySelectorAll(CenterAndHeightResizer.tagName).forEach((el, index) => {
+    const resizer = el;
+    const { trackUrl } = modURLSearchParams(config, (key, i) => {
+        let t;
+        const cond = /^\d+$/.test(String(i));
+        if (cond) {
+            t = `${key}-${i}`;
+        }
+        else {
+            t = key;
+        }
+        // console.log("instanceKeyFn", { cond, key, i }, "t: ", t);
+        return t;
+    });
+    const { setParams } = trackUrl((params, updatedURLSearchParams, governedKeys) => {
+        // console.log("trackUrl", index, JSON.stringify(params));
+        resizer.setAttribute("left", params.left);
+        resizer.setAttribute("center", params.center);
+        resizer.setAttribute("height", params.height);
+        const current = new URLSearchParams(window.location.search);
+        const next = syncURLSearchParams(current, governedKeys, updatedURLSearchParams);
+        if (next.toString() !== current.toString()) {
+            const url = buildUrlWithSearchParams(window.location.href, next);
+            history.replaceState(history.state, "", url);
+        }
+    }, { ctx: index, fireOnMount: true });
+    const syncToUrl = () => {
+        // console.log("syncToUrl: ", index);
+        setParams({
+            left: resizer.getAttribute("left") ?? config.left.default,
+            center: resizer.getAttribute("center") ?? config.center.default,
+            height: resizer.getAttribute("height") ?? config.height.default,
+        });
+    };
+    resizer.addEventListener("onLeft", syncToUrl);
+    resizer.addEventListener("onCenter", syncToUrl);
+    resizer.addEventListener("onHeight", syncToUrl);
+});
+function applyThemeAttribute(theme) {
+    console.log("applyThemeAttribute", theme);
+    mgr.getMonaco()?.editor.setTheme(theme || "vs");
+}
+function applyLanguageAttribute(language) {
+    console.log("applyLanguageAttribute", language);
+    mgr.setLanguage(language || undefined);
+}
+const { trackUrl: trackUrlNoIndex } = modURLSearchParams({
+    theme: {
+        default: "",
+        getParam: "theme",
+        encode: (value) => value,
+        decode: (value) => (isMonacoTheme(value) ? value : ""),
+    },
+    language: {
+        default: "javascript",
+        getParam: "lang",
+        encode: (value) => value,
+        decode: (value) => value,
+    },
+});
+const { setParam } = trackUrlNoIndex((params, updatedURLSearchParams, governedKeys) => {
+    console.log("trackUrlNoIndex", params);
+    themeSelect.value = params.theme;
+    applyThemeAttribute(params.theme);
+    languageSelect.value = params.language;
+    applyLanguageAttribute(params.language);
+    const current = new URLSearchParams(window.location.search);
+    const next = syncURLSearchParams(current, governedKeys, updatedURLSearchParams);
+    if (next.toString() !== current.toString()) {
+        const url = buildUrlWithSearchParams(window.location.href, next);
+        history.replaceState(history.state, "", url);
+    }
+}, { fireOnMount: true });
+themeSelect.addEventListener("change", () => {
+    console.log("themeSelect.value", themeSelect.value);
+    setParam("theme", themeSelect.value);
+});
+languageSelect.addEventListener("change", () => {
+    console.log("languageSelect.value", languageSelect.value);
+    setParam("language", languageSelect.value);
+});

package/dist/esm/react.js

@@ -0,0 +1,64 @@
+// @ts-ignore
+import * as React from "react";
+import "./composite-monaco-diff.js";
+export const MonacoDiff = React.forwardRef((props, ref) => {
+    const { theme, language, original, modified, originalLanguage, modifiedLanguage, children, ...rest } = props;
+    const internalRef = React.useRef(null);
+    const setRef = React.useCallback((node) => {
+        internalRef.current = node;
+        if (typeof ref === "function") {
+            ref(node);
+        }
+        else if (ref) {
+            ref.current = node;
+        }
+    }, [ref]);
+    React.useLayoutEffect(() => {
+        const el = internalRef.current;
+        if (el && el.getManager) {
+            let active = true;
+            (async () => {
+                try {
+                    await el.whenReady();
+                    if (!active)
+                        return;
+                    const mgr = el.getManager();
+                    const editor = mgr.getEditor();
+                    if (editor) {
+                        const model = editor.getModel();
+                        if (model) {
+                            if (original !== undefined && model.original.getValue() !== original) {
+                                model.original.setValue(original);
+                            }
+                            if (modified !== undefined && model.modified.getValue() !== modified) {
+                                model.modified.setValue(modified);
+                            }
+                            const monaco = mgr.getMonaco();
+                            if (monaco) {
+                                if (originalLanguage !== undefined) {
+                                    monaco.editor.setModelLanguage(model.original, originalLanguage);
+                                }
+                                if (modifiedLanguage !== undefined) {
+                                    monaco.editor.setModelLanguage(model.modified, modifiedLanguage);
+                                }
+                            }
+                        }
+                    }
+                }
+                catch (err) {
+                    console.error("MonacoDiff wrapper error:", err);
+                }
+            })();
+            return () => {
+                active = false;
+            };
+        }
+    }, [original, modified, originalLanguage, modifiedLanguage]);
+    const wcProps = { ...rest, ref: setRef };
+    if (theme !== undefined)
+        wcProps["theme"] = theme;
+    if (language !== undefined)
+        wcProps["language"] = language;
+    return React.createElement("composite-monaco-diff", wcProps, children);
+});
+export default MonacoDiff;

package/dist/esm/trimLeft.js

@@ -0,0 +1,28 @@
+export default function trimLeft(str, offset = 0) {
+    let o = typeof offset === "number" ? offset : parseInt(offset, 10);
+    if (isNaN(o)) {
+        throw new Error(`offset must be a number, ${offset}`);
+    }
+    if (o < 0) {
+        throw new Error(`offset must be a non-negative number, ${offset}`);
+    }
+    // Auto-detect indentation
+    const lines = str.split("\n");
+    let diff = Infinity;
+    lines.forEach((line) => {
+        if (!/^\s*$/.test(line)) {
+            const lengthBefore = line.length;
+            const lengthAfter = line.replace(/^\s+/, "").length;
+            const indentation = lengthBefore - lengthAfter;
+            if (indentation < diff) {
+                diff = indentation;
+            }
+        }
+    });
+    let result = lines.map((line) => line.substring(diff));
+    if (o > 0) {
+        const spaces = " ".repeat(o);
+        result = result.map((line) => `${spaces}${line}`);
+    }
+    return result.join("\n");
+}