composite-monaco-diff 1.0.2

package/dist/esm/urlchange/urlchange.js

@@ -0,0 +1,197 @@
+import { cloneSearchParams, compareNormalizedSearchParams, mergeURLSearchParams, syncURLSearchParams, } from "./toolsURLSearchParams.js";
+/** Set of active listeners registered for URL/history updates. */
+const urlChangeListeners = new Set();
+/** Flag indicating whether the window.history methods have been monkey-patched. */
+let historyPatched = false;
+let originalPushState = null;
+let originalReplaceState = null;
+/**
+ * Notifies all registered listeners that a URL change has occurred.
+ */
+function notifyUrlChange() {
+    for (const listener of urlChangeListeners) {
+        listener();
+    }
+}
+/**
+ * Monkey-patches history.pushState and history.replaceState to notify our listeners
+ * of programmatic URL changes. Also listens to the window popstate event.
+ */
+function ensureHistoryPatched() {
+    if (historyPatched || typeof window === "undefined")
+        return;
+    historyPatched = true;
+    originalPushState = history.pushState.bind(history);
+    originalReplaceState = history.replaceState.bind(history);
+    history.pushState = function (...args) {
+        originalPushState(...args);
+        notifyUrlChange();
+    };
+    history.replaceState = function (...args) {
+        originalReplaceState(...args);
+        notifyUrlChange();
+    };
+    window.addEventListener("popstate", notifyUrlChange);
+}
+/**
+ * Subscribes a listener callback to URL change events (pushState, replaceState, popstate).
+ * Returns an unsubscribe function.
+ */
+function subscribeUrlChange(listener) {
+    ensureHistoryPatched();
+    urlChangeListeners.add(listener);
+    return () => {
+        urlChangeListeners.delete(listener);
+    };
+}
+// ─── Core factory ────────────────────────────────────────────────────────────
+/**
+ * Internal factory that creates trackers for a specific configuration of URL parameters.
+ * Encapsulates the logic of reading, writing, and separating parameter sets.
+ */
+function createURLParamTracker(config, keyFn) {
+    /** Applies optional keyFn namespace/index mapping to raw config parameter keys. */
+    const applyKey = (baseKey, ctx) => (keyFn ? keyFn(baseKey, ctx) : baseKey);
+    /**
+     * Filters and extracts only the keys governed by this tracker configuration and optional context
+     * from the provided search parameters or string.
+     */
+    function separateIndexedSearchParams(search, ctx) {
+        const keys = Object.values(config).map((def) => applyKey(def.getParam, ctx));
+        const normalized = typeof search === "string" ? new URLSearchParams(search) : search;
+        return mergeURLSearchParams(new URLSearchParams(), keys, normalized);
+    }
+    /**
+     * Reads, decodes, and parses parameter values from search parameters, falling back to defaults.
+     */
+    function readState(search, ctx) {
+        const updatedURLSearchParams = separateIndexedSearchParams(search, ctx);
+        const result = {};
+        for (const [key, def] of Object.entries(config)) {
+            const d = def;
+            const raw = updatedURLSearchParams.get(applyKey(d.getParam, ctx));
+            result[key] = raw !== null ? d.decode(raw) : d.default;
+        }
+        return {
+            params: result,
+            updatedURLSearchParams,
+        };
+    }
+    /** Generates a normalized signature of only the tracked keys for comparison. */
+    function trackedSignature(search, ctx) {
+        return separateIndexedSearchParams(search, ctx).toString();
+    }
+    /**
+     * Starts tracking the URL, invoking the onChange callback when tracked parameters change.
+     * Returns a handle containing functions to read/update the state.
+     */
+    function trackUrl(onChange, options) {
+        const ctx = options?.ctx;
+        const replace = options?.replace !== false;
+        const fireOnMount = options?.fireOnMount !== false;
+        const governedKeys = Object.values(config).map((def) => applyKey(def.getParam, ctx));
+        let lastSignature = "";
+        /** Decodes the current URL parameters and invokes the onChange callback. */
+        const emitCurrentState = (search = window.location.search) => {
+            lastSignature = trackedSignature(search, ctx);
+            const { params, updatedURLSearchParams } = readState(search, ctx);
+            onChange(params, updatedURLSearchParams, governedKeys);
+        };
+        /** Checks if the signature of the tracked parameters changed, and triggers update if so. */
+        const emitIfTrackedChanged = () => {
+            const signature = trackedSignature(window.location.search, ctx);
+            if (signature === lastSignature)
+                return;
+            emitCurrentState();
+        };
+        /** Syncs internal state signature and calls onChange callback after writing updates. */
+        const syncAfterLocalWrite = (next) => {
+            emitCurrentState(next);
+        };
+        /** Commits the new URLSearchParams using standard history methods. */
+        const writeSearch = (next) => {
+            const current = cloneSearchParams(new URLSearchParams(window.location.search));
+            if (compareNormalizedSearchParams(next, current))
+                return;
+            syncAfterLocalWrite(next);
+        };
+        /** Helper to set/update a single parameter value. */
+        const setParam = (key, value) => {
+            const def = config[key];
+            const finalKey = applyKey(def.getParam, ctx);
+            const current = cloneSearchParams(new URLSearchParams(window.location.search));
+            const patch = new URLSearchParams();
+            if (JSON.stringify(value) !== JSON.stringify(def.default)) {
+                patch.set(finalKey, def.encode(value));
+            }
+            writeSearch(syncURLSearchParams(current, [finalKey], patch));
+        };
+        /** Helper to set/update multiple parameter values at once. */
+        const setParams = (updates) => {
+            const current = cloneSearchParams(new URLSearchParams(window.location.search));
+            const governed = [];
+            const patch = new URLSearchParams();
+            for (const [key, value] of Object.entries(updates)) {
+                const def = config[key];
+                if (def && value !== undefined) {
+                    const finalKey = applyKey(def.getParam, ctx);
+                    governed.push(finalKey);
+                    if (JSON.stringify(value) !== JSON.stringify(def.default)) {
+                        patch.set(finalKey, def.encode(value));
+                    }
+                }
+            }
+            writeSearch(syncURLSearchParams(current, governed, patch));
+        };
+        if (fireOnMount) {
+            emitCurrentState();
+        }
+        else {
+            lastSignature = trackedSignature(window.location.search, ctx);
+        }
+        const unsubscribe = subscribeUrlChange(emitIfTrackedChanged);
+        return {
+            setParam,
+            setParams,
+            getParams: () => readState(window.location.search, ctx).params,
+            getUpdatedURLSearchParams: () => separateIndexedSearchParams(window.location.search, ctx),
+            refresh: () => emitCurrentState(),
+            disconnect: unsubscribe,
+            governedKeys,
+        };
+    }
+    return {
+        separateIndexedSearchParams,
+        trackUrl,
+        readState,
+    };
+}
+/**
+ * Vanilla counterpart to React `modURLSearchParams`. Define params once, then call
+ * `trackUrl(onChange)` or use the standalone `trackUrl(config, onChange)` helper.
+ */
+export default function modURLSearchParams(config, keyFn) {
+    return createURLParamTracker(config, keyFn);
+}
+/**
+ * Subscribe to URL changes for a fixed param schema. The callback runs only when
+ * tracked keys (per config) change — other query/hash navigation is ignored.
+ *
+ * @example
+ * const { setParam, setParams } = trackUrl(
+ *   {
+ *     emptyList: { default: false, getParam: "emp", encode: (v) => (v ? "1" : "0"), decode: (v) => v === "1" },
+ *   },
+ *   (params, updatedURLSearchParams) => { ... },
+ * );
+ */
+export function trackUrl(config, onChange, options) {
+    const { keyFn, ...trackOptions } = options ?? {};
+    const tracker = createURLParamTracker(config, keyFn);
+    return tracker.trackUrl(onChange, trackOptions);
+}
+/** Subscribe to query-string updates (history push/replace/popstate). */
+export function onUrlChange(listener) {
+    return subscribeUrlChange(listener);
+}
+export { mergeURLSearchParams, createURLParamTracker, compareNormalizedSearchParams };

package/dist/esm/web-component/from-js/index.js

@@ -0,0 +1,160 @@
+import modURLSearchParams from "../../urlchange/urlchange.js";
+import { syncURLSearchParams, buildUrlWithSearchParams } from "../../urlchange/toolsURLSearchParams.js";
+import { MonacoDiffManager } from "../../MonacoDiffManager.js";
+import { isMonacoTheme, MonacoDiffElement } from "../../composite-monaco-diff.js";
+import { CenterAndHeightResizer } from "../../CenterAndHeightResizer.js";
+await customElements.whenDefined(MonacoDiffElement.tagName);
+await customElements.whenDefined(CenterAndHeightResizer.tagName);
+const diffEl = document.querySelector(MonacoDiffElement.tagName);
+if (!(diffEl instanceof MonacoDiffElement)) {
+    throw new Error("Missing <composite-monaco-diff> element");
+}
+await diffEl.whenReady();
+let model;
+let mgr;
+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);
+  });
+`;
+function wireResizerUrlSync(resizer, index) {
+    const config = {
+        left: {
+            default: resizer.getAttribute("left") ?? "100px",
+            getParam: "l",
+            encode: (value) => value,
+            decode: (value) => value,
+        },
+        center: {
+            default: resizer.getAttribute("center") ?? "1200px",
+            getParam: "c",
+            encode: (value) => value,
+            decode: (value) => value,
+        },
+        height: {
+            default: resizer.getAttribute("height") ?? "100px",
+            getParam: "h",
+            encode: (value) => value,
+            decode: (value) => value,
+        },
+    };
+    const { trackUrl } = modURLSearchParams(config, (key, i) => `${key}-${i}`);
+    const { setParams } = trackUrl((params, updatedURLSearchParams, governedKeys) => {
+        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 = () => {
+        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(mgr, theme) {
+    mgr.getMonaco()?.editor.setTheme(theme || "vs");
+}
+function applyLanguageAttribute(mgr, language) {
+    mgr.setLanguage(language || undefined);
+}
+document.querySelectorAll(CenterAndHeightResizer.tagName).forEach((el, index) => {
+    wireResizerUrlSync(el, index);
+});
+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 { 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) => {
+    themeSelect.value = params.theme;
+    applyThemeAttribute(mgr, params.theme);
+    languageSelect.value = params.language;
+    applyLanguageAttribute(mgr, 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", () => {
+    setParam("theme", themeSelect.value);
+});
+languageSelect.addEventListener("change", () => {
+    setParam("language", languageSelect.value);
+});
+mgr = diffEl.getManager();
+const editor = mgr.getEditor();
+if (!editor) {
+    throw new Error("Diff editor not available");
+}
+model = editor.getModel();
+if (!model) {
+    throw new Error("Diff editor has no model");
+}
+model.original.setValue(original);
+model.modified.setValue(modified);

package/dist/esm/web-component/from-scripts/index.js

@@ -0,0 +1,114 @@
+import modURLSearchParams from "../../urlchange/urlchange.js";
+import { syncURLSearchParams, buildUrlWithSearchParams } from "../../urlchange/toolsURLSearchParams.js";
+import { isMonacoTheme, MonacoDiffElement } from "../../composite-monaco-diff.js";
+import { CenterAndHeightResizer } from "../../CenterAndHeightResizer.js";
+await customElements.whenDefined(MonacoDiffElement.tagName);
+await customElements.whenDefined(CenterAndHeightResizer.tagName);
+const diffEl = document.querySelector(MonacoDiffElement.tagName);
+if (!(diffEl instanceof MonacoDiffElement)) {
+    throw new Error("Missing <composite-monaco-diff> element");
+}
+await diffEl.whenReady();
+function wireResizerUrlSync(resizer, index) {
+    const config = {
+        left: {
+            default: resizer.getAttribute("left") ?? "100px",
+            getParam: "l",
+            encode: (value) => value,
+            decode: (value) => value,
+        },
+        center: {
+            default: resizer.getAttribute("center") ?? "1200px",
+            getParam: "c",
+            encode: (value) => value,
+            decode: (value) => value,
+        },
+        height: {
+            default: resizer.getAttribute("height") ?? "100px",
+            getParam: "h",
+            encode: (value) => value,
+            decode: (value) => value,
+        },
+    };
+    const { trackUrl } = modURLSearchParams(config, (key, i) => `${key}-${i}`);
+    const { setParams } = trackUrl((params, updatedURLSearchParams, governedKeys) => {
+        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 = () => {
+        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(diffEl, theme) {
+    if (theme) {
+        diffEl.setAttribute("theme", theme);
+    }
+    else {
+        diffEl.removeAttribute("theme");
+    }
+}
+function applyLanguageAttribute(diffEl, language) {
+    if (language) {
+        diffEl.setAttribute("language", language);
+    }
+    else {
+        diffEl.removeAttribute("language");
+    }
+}
+document.querySelectorAll(CenterAndHeightResizer.tagName).forEach((el, index) => {
+    wireResizerUrlSync(el, index);
+});
+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 { 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) => {
+    themeSelect.value = params.theme;
+    applyThemeAttribute(diffEl, params.theme);
+    languageSelect.value = params.language;
+    applyLanguageAttribute(diffEl, 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", () => {
+    setParam("theme", themeSelect.value);
+});
+languageSelect.addEventListener("change", () => {
+    setParam("language", languageSelect.value);
+});

package/dist/types/CenterAndHeightResizer.d.ts

@@ -0,0 +1,27 @@
+export declare class CenterAndHeightResizer extends HTMLElement {
+    static readonly tagName: "center-and-height-resizer";
+    leftDiv: HTMLElement;
+    rightDiv: HTMLElement;
+    centerDiv: HTMLElement;
+    resizerLeft: HTMLElement;
+    resizerRight: HTMLElement;
+    resizerBottom: HTMLElement;
+    private _isReady;
+    private readonly _readyPromise;
+    private _resolveReady;
+    constructor();
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    connectedCallback(): void;
+    /** Resolves after the first `connectedCallback` (attributes applied to the layout panel). */
+    whenReady(): Promise<void>;
+    static whenLayoutReady(el: HTMLElement, maxFrames?: number): Promise<void>;
+    /** Wait for custom element upgrade, `connectedCallback`, and a non-zero layout panel. */
+    static whenHostReady(container: HTMLElement): Promise<HTMLElement>;
+    _applyInternalStylesToCenterDiv(): void;
+    _initForwarding(): void;
+    _syncAttributes(): void;
+    getContentRoot(): HTMLElement;
+    setupResizer(handle: HTMLElement, target: HTMLElement, attrName: string, invert: boolean): void;
+    setupHeightResizer(handle: HTMLElement, target: HTMLElement): void;
+}

package/dist/types/CenterResizer.d.ts

@@ -0,0 +1,16 @@
+export declare class CenterResizer extends HTMLElement {
+    leftDiv: HTMLElement;
+    centerDiv: HTMLElement;
+    rightDiv: HTMLElement;
+    resizerLeft: HTMLElement;
+    resizerRight: HTMLElement;
+    constructor();
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    connectedCallback(): void;
+    _applyInternalStylesToCenterDiv(): void;
+    _initForwarding(): void;
+    _syncAttributes(): void;
+    getContentRoot(): HTMLElement;
+    setupResizer(handle: HTMLElement, target: HTMLElement, attributeName: "left" | "center"): void;
+}

package/dist/types/Module.d.ts

@@ -0,0 +1,11 @@
+/** @es.ts
+{
+   mode: "bundle",
+   extension: ".js",
+   options: {
+   }
+}
+@es.ts */
+export * from "./composite-monaco-diff.js";
+export * from "./MonacoDiffManager.js";
+export * from "./trimLeft.js";

package/dist/types/MonacoDiffManager.d.ts

@@ -0,0 +1,62 @@
+/**
+ * Monaco diff editor manager. Refresh version/CDN URLs: pnpm run monaco -- --skip
+ */
+import type * as Monaco from "monaco-editor";
+export declare const MONACO_GENERATED: {
+    readonly version: "0.55.1";
+    readonly vs: readonly ["https://cdn.jsdelivr.net/npm/monaco-editor@0.55.1/min/vs", "https://unpkg.com/monaco-editor@0.55.1/min/vs", "/monaco/vs"];
+};
+export type MonacoGenerated = typeof MONACO_GENERATED;
+/**
+ * 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 declare function hydrateCache(generated?: MonacoGenerated): Promise<typeof Monaco>;
+export declare const SCRIPT_TYPE_ORIGINAL: "text/original";
+export declare const SCRIPT_TYPE_MODIFIED: "text/modified";
+export interface DeclarativeDiffContent {
+    original: string;
+    modified: string;
+    originalLanguage?: string;
+    modifiedLanguage?: string;
+}
+/**
+ * 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 declare function readDeclarativeDiffScripts(host: HTMLElement): DeclarativeDiffContent | null;
+export interface MonacoDiffManagerOptions {
+    /** When set, reads optional declarative `<script>` children before creating models. */
+    host?: HTMLElement;
+    original?: string;
+    modified?: string;
+    /** Applies to both sides when `originalLanguage` / `modifiedLanguage` are not set. */
+    language?: string;
+    originalLanguage?: string;
+    modifiedLanguage?: string;
+    editorOptions?: Monaco.editor.IStandaloneDiffEditorConstructionOptions;
+}
+export declare class MonacoDiffManager {
+    private _readyPromise;
+    private _editor;
+    private _resizeObserver;
+    private _layoutRaf;
+    protected _container: HTMLElement;
+    /**
+     * 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: HTMLElement, options: MonacoDiffManagerOptions);
+    /** Promise that resolves when the editor has finished loading and is safe to use. */
+    whenReady(): Promise<void>;
+    /** Returns the underlying Monaco diff editor instance (or null if not ready yet). */
+    getEditor(): Monaco.editor.IStandaloneDiffEditor | null;
+    /** Returns the global Monaco API instance (or null if not loaded yet). */
+    getMonaco(): typeof Monaco | null;
+    /** Tears down the editor, frees memory, and stops listening for resize events. */
+    destroy(): void;
+    /** Updates the language for both sides of the diff editor. Falls back to the default language when undefined. */
+    setLanguage(language: string | undefined): void;
+    /** Resizes the editor to match its container on the next animation frame (avoids jank). */
+    private _scheduleLayout;
+}

package/dist/types/composite-monaco-diff.d.ts

@@ -0,0 +1,48 @@
+/**
+ * `<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 { MonacoDiffManager } from "./MonacoDiffManager.js";
+/** Custom element tag name (`"composite-monaco-diff"`). Pass to `customElements.whenDefined(tagName)`. */
+export declare const tagName: "composite-monaco-diff";
+export declare const MONACO_THEMES: readonly ["vs", "vs-dark", "hc-black", "hc-light"];
+export type MonacoTheme = (typeof MONACO_THEMES)[number];
+export declare function isMonacoTheme(value: string): value is MonacoTheme;
+export declare class MonacoDiffElement extends HTMLElement {
+    static readonly tagName: "composite-monaco-diff";
+    static get observedAttributes(): string[];
+    private _container;
+    private _manager;
+    constructor();
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null): void;
+    disconnectedCallback(): void;
+    /** Promise that resolves when the editor has finished loading and is safe to use. */
+    whenReady(): Promise<void>;
+    getManager(): MonacoDiffManager;
+    private _applyTheme;
+    private _applyLanguage;
+}

package/dist/types/manager/index.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/react.d.ts

@@ -0,0 +1,19 @@
+import * as React from "react";
+import "./composite-monaco-diff.js";
+import type { MonacoTheme } from "./composite-monaco-diff.js";
+export type MonacoDiffProps = {
+    className?: string;
+    style?: React.CSSProperties;
+    id?: string;
+    key?: React.Key;
+    ref?: React.Ref<HTMLElement>;
+    theme?: MonacoTheme;
+    language?: string;
+    original?: string;
+    modified?: string;
+    originalLanguage?: string;
+    modifiedLanguage?: string;
+    children?: React.ReactNode;
+};
+export declare const MonacoDiff: (props: MonacoDiffProps & React.RefAttributes<HTMLElement>) => React.ReactElement;
+export default MonacoDiff;

package/dist/types/trimLeft.d.ts

@@ -0,0 +1 @@
+export default function trimLeft(str: string, offset?: number | string): string;