@microsoft/webui-framework 0.0.24 → 0.0.26

package/dist/element/link-styles.js

@@ -0,0 +1,1030 @@
+import { templateHtmlMayContainLink, getTemplateStylesheets, } from '../template-content.js';
+const READY = Promise.resolve();
+const NO_DESCRIPTORS = Object.freeze([]);
+const NO_LINK_STYLE_STATE = {
+    descriptors: NO_DESCRIPTORS,
+    ready: READY,
+};
+const CSS_IMPORT_RULE = 3;
+const STYLESHEET_PREPARATION_TIMEOUT_MS = 3_000;
+const SPECULATIVE_PRELOAD_TTL_MS = 3_000;
+const GUARD_CSS = '@layer{:host{transition:none!important;visibility:hidden!important}}';
+const templateLinkStyles = new WeakMap();
+const activeStyleMounts = new WeakMap();
+let speculativeStylesheetPreloads;
+export function prepareTemplateLinkStyles(meta) {
+    const ready = getTemplateLinkStyleState(meta).ready;
+    return ready === READY ? undefined : ready;
+}
+export function prepareRegisteredLinkStyles(templates) {
+    const names = Object.keys(templates);
+    let pending;
+    for (let i = 0; i < names.length; i++) {
+        const ready = prepareTemplateLinkStyles(templates[names[i]]);
+        if (!ready)
+            continue;
+        (pending ??= []).push(ready);
+    }
+    return pending ? Promise.all(pending).then(ignorePromiseResults) : undefined;
+}
+export function prepareComponentStyleLinks(styles) {
+    if (styles.strategy !== 'link')
+        return undefined;
+    const ids = Object.keys(styles.resources);
+    if (ids.length === 0)
+        return undefined;
+    const hrefs = [];
+    const seen = new Set();
+    for (let i = 0; i < ids.length; i++) {
+        const resource = styles.resources[ids[i]];
+        if (resource.kind !== 'link' || seen.has(resource.href))
+            continue;
+        seen.add(resource.href);
+        hrefs.push(resource.href);
+    }
+    return preloadComponentAssetStyles(hrefs);
+}
+export function preloadComponentAssetStyles(hrefs) {
+    if (hrefs.length === 0 || !supportsConstructableStylesheets())
+        return undefined;
+    const preloads = (speculativeStylesheetPreloads ??= new Map());
+    let pending;
+    for (let i = 0; i < hrefs.length; i++) {
+        if (hrefs[i].length === 0)
+            continue;
+        const href = resolveHref(hrefs[i]);
+        const existing = preloads.get(href);
+        if (existing) {
+            (pending ??= []).push(existing.ready);
+            continue;
+        }
+        if (hasDocumentStylesheetPreload(href))
+            continue;
+        const link = createStylesheetPreload(href);
+        const startedAt = performanceNow();
+        const preload = {
+            claimed: false,
+            link,
+            ready: waitForStylesheetPreload(link, href),
+            startedAt,
+        };
+        preloads.set(href, preload);
+        (pending ??= []).push(preload.ready);
+        preload.cleanupTimer = setTimeout(() => {
+            releaseStylesheetPreload(link);
+        }, SPECULATIVE_PRELOAD_TTL_MS);
+    }
+    return pending ? Promise.all(pending).then(ignorePromiseResults) : undefined;
+}
+export function installComponentLinkStyles(host, root, links) {
+    if (links.length === 0 || !supportsConstructableStylesheets())
+        return;
+    const mountStartedAt = performanceNow();
+    let timingStartedAt = mountStartedAt;
+    const preloads = [];
+    const pendingPreloads = [];
+    for (let i = 0; i < links.length; i++) {
+        const speculative = speculativeStylesheetPreloads?.get(resolveHref(links[i].href));
+        if (!speculative)
+            continue;
+        speculative.claimed = true;
+        preloads.push(speculative);
+        pendingPreloads.push(speculative.ready);
+        timingStartedAt = Math.min(timingStartedAt, speculative.startedAt);
+    }
+    const guard = installGuard(host, root);
+    const settled = new Uint8Array(links.length);
+    const loadHandlers = new Array(links.length);
+    const errorHandlers = new Array(links.length);
+    let remaining = 0;
+    let cancelled = false;
+    const releasePreloads = () => {
+        for (let i = 0; i < preloads.length; i++) {
+            releaseStylesheetPreload(preloads[i].link);
+        }
+    };
+    const cleanup = () => {
+        for (let i = 0; i < links.length; i++) {
+            const onLoad = loadHandlers[i];
+            const onError = errorHandlers[i];
+            if (onLoad)
+                links[i].removeEventListener('load', onLoad);
+            if (onError)
+                links[i].removeEventListener('error', onError);
+        }
+        releasePreloads();
+    };
+    const fail = () => {
+        if (cancelled)
+            return;
+        cancelled = true;
+        cleanup();
+        guard.release();
+    };
+    const finish = () => {
+        if (cancelled || remaining !== 0)
+            return;
+        void Promise.all(pendingPreloads).then(results => {
+            if (cancelled || results.some(result => result !== undefined)) {
+                fail();
+                return;
+            }
+            const sheets = constructComponentStylesheets(links, timingStartedAt);
+            if (!sheets || !adoptPreparedSheets(root, sheets)) {
+                fail();
+                return;
+            }
+            deactivatePromotedLinks(links);
+            cancelled = true;
+            cleanup();
+            guard.release();
+        });
+    };
+    const settle = (index) => {
+        if (cancelled || settled[index] !== 0)
+            return;
+        settled[index] = 1;
+        remaining -= 1;
+        const onLoad = loadHandlers[index];
+        const onError = errorHandlers[index];
+        if (onLoad)
+            links[index].removeEventListener('load', onLoad);
+        if (onError)
+            links[index].removeEventListener('error', onError);
+        finish();
+    };
+    for (let i = 0; i < links.length; i++) {
+        if (!requiresNativeLoad(links[i])) {
+            settled[i] = 1;
+            continue;
+        }
+        if (links[i].sheet) {
+            settled[i] = 1;
+            continue;
+        }
+        remaining += 1;
+        const onLoad = () => settle(i);
+        const onError = () => fail();
+        loadHandlers[i] = onLoad;
+        errorHandlers[i] = onError;
+        links[i].addEventListener('load', onLoad, { once: true });
+        links[i].addEventListener('error', onError, { once: true });
+    }
+    if (remaining === 0)
+        finish();
+}
+export function templateMayContainLinkStyles(meta) {
+    return getTemplateLinkStyleState(meta) !== NO_LINK_STYLE_STATE;
+}
+export function installTemplateLinkStyles(host, meta, shadowRoot, stagingRoot, bindings, deferredCallbacks) {
+    if (!shadowRoot)
+        return false;
+    const root = shadowRoot;
+    const links = collectStylesheetLinks(stagingRoot);
+    if (links.length === 0)
+        return false;
+    activeStyleMounts.get(root)?.();
+    const state = getTemplateLinkStyleState(meta);
+    let nativeOnly = hasBoundStylesheetLink(links, bindings) ||
+        hasEventStylesheetLink(meta, state.descriptors);
+    if (!nativeOnly &&
+        state.sheets &&
+        !deferredCallbacks?.hasAuthorHydrationLifecycle &&
+        !hasAuthorStyle(root, stagingRoot)) {
+        if (state.sheets.length === links.length && adoptPreparedSheets(root, state.sheets)) {
+            deactivatePromotedLinks(links);
+            return false;
+        }
+        nativeOnly = true;
+    }
+    const settled = new Uint8Array(links.length);
+    const loadHandlers = new Array(links.length);
+    const errorHandlers = new Array(links.length);
+    const mountStartedAt = performanceNow();
+    const timingStartedAt = state.preloadStartedAt === undefined
+        ? mountStartedAt
+        : Math.min(state.preloadStartedAt, mountStartedAt);
+    let remaining = 0;
+    for (let i = 0; i < links.length; i++) {
+        if (requiresNativeLoad(links[i])) {
+            remaining += 1;
+        }
+        else {
+            settled[i] = 1;
+        }
+    }
+    if (remaining === 0)
+        return false;
+    let failed = false;
+    let cancelled = false;
+    let contentAppended = false;
+    let deferContent = false;
+    let guardStyle;
+    let releaseGuard;
+    const settle = (index) => {
+        if (cancelled || failed || settled[index] !== 0)
+            return;
+        settled[index] = 1;
+        remaining -= 1;
+        removeLinkListeners(index);
+        if (remaining === 0)
+            finishMount(true);
+    };
+    const fail = (index) => {
+        if (cancelled || failed)
+            return;
+        failed = true;
+        nativeOnly = true;
+        removeAllLinkListeners();
+        removeStylesheetPreloads(state);
+        const result = state.descriptors.length === links.length
+            ? state.results?.[index]
+            : undefined;
+        const href = result?.href || links[index].href;
+        let reason = '';
+        if (result?.reason) {
+            reason = ` Constructable preparation failed: ${result.reason}.`;
+        }
+        console.error(`[WebUI] Stylesheet "${href}" failed to load for <${host.localName}>.${reason} ` +
+            'The component will continue with its native stylesheet links and may be unstyled.');
+        finishMount(false);
+    };
+    const tryAdoptNativeSheets = () => {
+        if (cancelled || nativeOnly)
+            return;
+        if (state.descriptors.length !== links.length) {
+            nativeOnly = true;
+            return;
+        }
+        let sheets = state.sheets;
+        if (!sheets) {
+            sheets = constructNativeStylesheets(links, state.descriptors, timingStartedAt);
+            if (!sheets) {
+                nativeOnly = true;
+                return;
+            }
+            state.sheets = sheets;
+        }
+        if (!adoptPreparedSheets(root, sheets)) {
+            nativeOnly = true;
+            return;
+        }
+        deactivatePromotedLinks(links);
+    };
+    function removeLinkListeners(index) {
+        const load = loadHandlers[index];
+        const error = errorHandlers[index];
+        if (load)
+            links[index].removeEventListener('load', load);
+        if (error)
+            links[index].removeEventListener('error', error);
+    }
+    function removeAllLinkListeners() {
+        for (let i = 0; i < links.length; i++)
+            removeLinkListeners(i);
+    }
+    function armLink(index) {
+        const onLoad = () => {
+            if (settled[index] === 0)
+                settle(index);
+        };
+        const onError = () => {
+            if (cancelled)
+                return;
+            fail(index);
+        };
+        loadHandlers[index] = onLoad;
+        errorHandlers[index] = onError;
+        links[index].addEventListener('load', onLoad, { once: true });
+        links[index].addEventListener('error', onError, { once: true });
+    }
+    function rearmChangedLinks(previousKeys) {
+        let rearmed = false;
+        for (let i = 0; i < links.length; i++) {
+            if (previousKeys[i] === nativeLoadKey(links[i]))
+                continue;
+            removeLinkListeners(i);
+            if (!requiresNativeLoad(links[i])) {
+                settled[i] = 1;
+                continue;
+            }
+            settled[i] = 0;
+            remaining += 1;
+            armLink(i);
+            rearmed = true;
+        }
+        return rearmed;
+    }
+    function clearActiveMount() {
+        if (activeStyleMounts.get(root) === cancel) {
+            activeStyleMounts.delete(root);
+        }
+    }
+    function appendDeferredContent() {
+        if (!deferContent || contentAppended)
+            return false;
+        contentAppended = true;
+        while (stagingRoot.firstChild) {
+            root.appendChild(stagingRoot.firstChild);
+        }
+        return true;
+    }
+    function finishMount(reconcileLinks) {
+        if (deferContent && !contentAppended) {
+            const loadKeys = reconcileLinks ? captureNativeLoadKeys(links) : undefined;
+            deferredCallbacks?.beforeAppend?.();
+            if (loadKeys && rearmChangedLinks(loadKeys))
+                return;
+        }
+        const appended = appendDeferredContent();
+        if (appended) {
+            try {
+                deferredCallbacks?.afterAppend?.();
+            }
+            finally {
+                finishStyleMount();
+            }
+        }
+        else {
+            finishStyleMount();
+        }
+    }
+    function finishStyleMount() {
+        const hasAuthoredStyle = !nativeOnly && hasAuthorStyle(root, stagingRoot, guardStyle);
+        releaseGuard?.();
+        releaseGuard = undefined;
+        removeStylesheetPreloads(state);
+        clearActiveMount();
+        if (!nativeOnly &&
+            !hasAuthoredStyle &&
+            state.descriptors.length === links.length) {
+            tryAdoptNativeSheets();
+        }
+    }
+    const cancel = (discardRoot = false) => {
+        if (cancelled)
+            return;
+        cancelled = true;
+        removeAllLinkListeners();
+        releaseGuard?.();
+        releaseGuard = undefined;
+        removeStylesheetPreloads(state);
+        if (discardRoot)
+            root.replaceChildren();
+        clearActiveMount();
+    };
+    activeStyleMounts.set(root, cancel);
+    const guard = installGuard(host, root);
+    guardStyle = guard.style;
+    releaseGuard = guard.release;
+    deferContent = !guard.effective;
+    for (let i = 0; i < links.length; i++) {
+        if (settled[i] !== 0)
+            continue;
+        armLink(i);
+    }
+    if (deferContent) {
+        for (let i = 0; i < links.length; i++)
+            root.appendChild(links[i]);
+    }
+    return deferContent;
+}
+export function cancelTemplateLinkStyleMount(root) {
+    const cancel = activeStyleMounts.get(root);
+    if (!cancel)
+        return false;
+    cancel(true);
+    return true;
+}
+export function rewriteCssUrls(cssText, stylesheetHref) {
+    let quote = 0;
+    let output = '';
+    let copiedThrough = 0;
+    for (let i = 0; i < cssText.length; i++) {
+        const code = cssText.charCodeAt(i);
+        if (quote !== 0) {
+            if (code === 92) {
+                i += 1;
+            }
+            else if (code === quote) {
+                quote = 0;
+            }
+            continue;
+        }
+        if (code === 34 || code === 39) {
+            quote = code;
+            continue;
+        }
+        if (code === 47 && cssText.charCodeAt(i + 1) === 42) {
+            i = skipComment(cssText, i + 2);
+            continue;
+        }
+        if (code === 92)
+            return undefined;
+        if (matchesCssFunction(cssText, i, 'image-set') ||
+            matchesCssFunction(cssText, i, '-webkit-image-set')) {
+            return undefined;
+        }
+        if (!matchesCssFunction(cssText, i, 'url'))
+            continue;
+        const token = readUrlToken(cssText, i + 3);
+        if (!token)
+            return undefined;
+        const value = cssText.slice(token.valueStart, token.valueEnd);
+        if (value.length > 0 && value.charCodeAt(0) !== 35) {
+            let resolved;
+            try {
+                resolved = new URL(value, stylesheetHref).href;
+            }
+            catch {
+                return undefined;
+            }
+            output += cssText.slice(copiedThrough, token.valueStart);
+            output += token.quoted
+                ? escapeCssString(resolved, token.quote)
+                : `"${escapeCssString(resolved, 34)}"`;
+            copiedThrough = token.valueEnd;
+        }
+        i = token.closeIndex;
+    }
+    if (copiedThrough === 0)
+        return cssText;
+    output += cssText.slice(copiedThrough);
+    return output;
+}
+function getTemplateLinkStyleState(meta) {
+    const cached = templateLinkStyles.get(meta);
+    if (cached)
+        return cached;
+    if (!templateHtmlMayContainLink(meta.h)) {
+        templateLinkStyles.set(meta, NO_LINK_STYLE_STATE);
+        return NO_LINK_STYLE_STATE;
+    }
+    const descriptors = getTemplateStylesheets(meta);
+    if (!descriptors) {
+        templateLinkStyles.set(meta, NO_LINK_STYLE_STATE);
+        return NO_LINK_STYLE_STATE;
+    }
+    const state = {
+        descriptors,
+        ready: READY,
+    };
+    templateLinkStyles.set(meta, state);
+    if (descriptors.length === 0)
+        return state;
+    if (!supportsConstructableStylesheets()) {
+        state.results = fallbackResults(descriptors, 'Constructable stylesheets are unavailable');
+        return state;
+    }
+    const pending = new Array(descriptors.length);
+    for (let i = 0; i < descriptors.length; i++) {
+        pending[i] = warmStylesheet(descriptors[i], state);
+    }
+    state.ready = Promise.all(pending).then(results => {
+        state.results = results;
+    });
+    return state;
+}
+function supportsConstructableStylesheets() {
+    return (typeof CSSStyleSheet === 'function' &&
+        typeof ShadowRoot === 'function' &&
+        'adoptedStyleSheets' in ShadowRoot.prototype &&
+        typeof CSSStyleSheet.prototype.replaceSync === 'function' &&
+        typeof document === 'object' &&
+        document.head !== null);
+}
+function performanceNow() {
+    return typeof performance === 'object' && typeof performance.now === 'function'
+        ? performance.now()
+        : Number.POSITIVE_INFINITY;
+}
+function removeStylesheetPreloads(state) {
+    const preloads = state.preloads;
+    if (!preloads)
+        return;
+    state.preloads = undefined;
+    void state.ready.then(() => {
+        for (let i = 0; i < preloads.length; i++) {
+            releaseStylesheetPreload(preloads[i]);
+        }
+    });
+}
+function warmStylesheet(descriptor, state) {
+    const href = resolveHref(descriptor.href);
+    const fallbackReason = unsupportedLinkReason(descriptor);
+    const speculative = speculativeStylesheetPreloads?.get(href);
+    if (fallbackReason) {
+        if (speculative && !speculative.claimed) {
+            releaseStylesheetPreload(speculative.link);
+        }
+        return Promise.resolve({ href, reason: fallbackReason });
+    }
+    if (speculative && hasDefaultPreloadAttributes(descriptor)) {
+        speculative.claimed = true;
+        trackStylesheetPreload(state, speculative.link, speculative.startedAt);
+        return speculative.ready;
+    }
+    if (speculative && !speculative.claimed) {
+        releaseStylesheetPreload(speculative.link);
+    }
+    const preload = createStylesheetPreload(href, descriptor);
+    const startedAt = performanceNow();
+    trackStylesheetPreload(state, preload, startedAt);
+    return waitForStylesheetPreload(preload, href);
+}
+function createStylesheetPreload(href, descriptor) {
+    const preload = document.createElement('link');
+    preload.rel = 'preload';
+    preload.as = 'style';
+    preload.href = href;
+    if (descriptor?.crossOrigin !== null && descriptor?.crossOrigin !== undefined) {
+        preload.crossOrigin = descriptor.crossOrigin;
+    }
+    if (descriptor?.integrity)
+        preload.integrity = descriptor.integrity;
+    if (descriptor?.referrerPolicy) {
+        preload.referrerPolicy = descriptor.referrerPolicy;
+    }
+    return preload;
+}
+function waitForStylesheetPreload(preload, href) {
+    return new Promise(resolve => {
+        let settled = false;
+        const finish = (reason) => {
+            if (settled)
+                return;
+            settled = true;
+            clearTimeout(timeout);
+            preload.onload = null;
+            preload.onerror = null;
+            resolve(reason ? { href, reason } : undefined);
+        };
+        const timeout = setTimeout(() => {
+            finish(`preparation timed out after ${STYLESHEET_PREPARATION_TIMEOUT_MS}ms`);
+        }, STYLESHEET_PREPARATION_TIMEOUT_MS);
+        preload.onload = () => finish();
+        preload.onerror = () => finish('stylesheet preload failed');
+        try {
+            document.head.appendChild(preload);
+        }
+        catch (error) {
+            finish(errorMessage(error));
+        }
+    });
+}
+function trackStylesheetPreload(state, preload, startedAt) {
+    (state.preloads ??= []).push(preload);
+    state.preloadStartedAt = state.preloadStartedAt === undefined
+        ? startedAt
+        : Math.min(state.preloadStartedAt, startedAt);
+}
+function releaseStylesheetPreload(preload) {
+    const speculative = speculativeStylesheetPreloads?.get(preload.href);
+    if (speculative?.link === preload) {
+        if (speculative.cleanupTimer !== undefined) {
+            clearTimeout(speculative.cleanupTimer);
+        }
+        speculativeStylesheetPreloads?.delete(preload.href);
+    }
+    preload.remove();
+}
+function hasDocumentStylesheetPreload(href) {
+    const head = document.head;
+    if (typeof head.querySelectorAll !== 'function')
+        return false;
+    const candidates = head.querySelectorAll('link[rel="preload"][as="style"]');
+    for (let i = 0; i < candidates.length; i++) {
+        if (resolveHref(candidates[i].href) === href)
+            return true;
+    }
+    return false;
+}
+function hasDefaultPreloadAttributes(descriptor) {
+    return (descriptor.crossOrigin === null &&
+        descriptor.integrity.length === 0 &&
+        descriptor.referrerPolicy.length === 0);
+}
+function fallbackResults(descriptors, reason) {
+    const results = new Array(descriptors.length);
+    for (let i = 0; i < descriptors.length; i++) {
+        results[i] = {
+            href: resolveHref(descriptors[i].href),
+            reason,
+        };
+    }
+    return results;
+}
+function unsupportedLinkReason(descriptor) {
+    if (descriptor.disabled)
+        return 'disabled stylesheets require native link loading';
+    if (descriptor.title)
+        return 'titled stylesheets require native link loading';
+    if (descriptor.hasUnsupportedAttributes) {
+        return 'unsupported link attributes require native link loading';
+    }
+    if (descriptor.hasInlineStyles) {
+        return 'mixed inline and external shadow styles require native link cascade order';
+    }
+    if (descriptor.type && descriptor.type.toLowerCase() !== 'text/css') {
+        return `stylesheet type "${descriptor.type}" requires native link loading`;
+    }
+    if (descriptor.referrerPolicy &&
+        !isReferrerPolicy(descriptor.referrerPolicy)) {
+        return 'unsupported referrer policy requires native link loading';
+    }
+    return undefined;
+}
+function resolveHref(href) {
+    try {
+        return new URL(href, document.baseURI).href;
+    }
+    catch {
+        return href;
+    }
+}
+function collectStylesheetLinks(root) {
+    const candidates = root.querySelectorAll('link[rel]');
+    const links = [];
+    for (let i = 0; i < candidates.length; i++) {
+        const link = candidates[i];
+        if (link.relList.contains('stylesheet') &&
+            !link.relList.contains('alternate') &&
+            link.hasAttribute('href')) {
+            links.push(link);
+        }
+    }
+    return links;
+}
+function requiresNativeLoad(link) {
+    if (!link.relList.contains('stylesheet') ||
+        link.relList.contains('alternate') ||
+        !link.hasAttribute('href')) {
+        return false;
+    }
+    if (link.disabled)
+        return false;
+    const type = link.type.toLowerCase();
+    return type.length === 0 || type === 'text/css';
+}
+function captureNativeLoadKeys(links) {
+    const keys = new Array(links.length);
+    for (let i = 0; i < links.length; i++)
+        keys[i] = nativeLoadKey(links[i]);
+    return keys;
+}
+function nativeLoadKey(link) {
+    return [
+        link.disabled ? '1' : '0',
+        link.rel,
+        link.href,
+        link.type,
+        link.crossOrigin ?? '',
+        link.integrity,
+        link.referrerPolicy,
+    ].join('\0');
+}
+function deactivatePromotedLinks(links) {
+    for (let i = 0; i < links.length; i++)
+        links[i].disabled = true;
+}
+function hasBoundStylesheetLink(links, bindings) {
+    for (let i = 0; i < bindings.length; i++) {
+        const element = bindings[i].element;
+        for (let linkIndex = 0; linkIndex < links.length; linkIndex++) {
+            if (element === links[linkIndex])
+                return true;
+        }
+    }
+    return false;
+}
+function hasEventStylesheetLink(meta, descriptors) {
+    const groups = meta.eg;
+    if (!groups)
+        return false;
+    for (let groupIndex = 0; groupIndex < groups.length; groupIndex++) {
+        const eventBindings = groups[groupIndex][1];
+        for (let bindingIndex = 0; bindingIndex < eventBindings.length; bindingIndex++) {
+            const target = eventBindings[bindingIndex][2];
+            for (let descriptorIndex = 0; descriptorIndex < descriptors.length; descriptorIndex++) {
+                if (descriptors[descriptorIndex].elementIndex === target)
+                    return true;
+            }
+        }
+    }
+    return false;
+}
+function constructNativeStylesheets(links, descriptors, mountStartedAt) {
+    const sheets = new Array(links.length);
+    for (let i = 0; i < links.length; i++) {
+        if (unsupportedLinkReason(descriptors[i]))
+            return undefined;
+        const cssText = readNativeStylesheet(links[i], mountStartedAt);
+        if (cssText === undefined)
+            return undefined;
+        const options = { baseURL: links[i].href };
+        if (descriptors[i].media)
+            options.media = descriptors[i].media;
+        try {
+            const sheet = new CSSStyleSheet(options);
+            sheet.replaceSync(cssText);
+            sheets[i] = sheet;
+        }
+        catch {
+            return undefined;
+        }
+    }
+    return sheets;
+}
+function constructComponentStylesheets(links, mountStartedAt) {
+    const sheets = new Array(links.length);
+    for (let i = 0; i < links.length; i++) {
+        const cssText = readNativeStylesheet(links[i], mountStartedAt);
+        if (cssText === undefined)
+            return undefined;
+        try {
+            const sheet = new CSSStyleSheet({ baseURL: links[i].href });
+            sheet.replaceSync(cssText);
+            sheets[i] = sheet;
+        }
+        catch {
+            return undefined;
+        }
+    }
+    return sheets;
+}
+function readNativeStylesheet(link, mountStartedAt) {
+    if (!hasUnredirectedNativeTiming(link, mountStartedAt))
+        return undefined;
+    const sheet = link.sheet;
+    if (!sheet)
+        return undefined;
+    let rules;
+    try {
+        rules = sheet.cssRules;
+    }
+    catch {
+        return undefined;
+    }
+    const rewritten = new Array(rules.length);
+    for (let i = 0; i < rules.length; i++) {
+        const rule = rules[i];
+        if (rule.type === CSS_IMPORT_RULE)
+            return undefined;
+        const cssText = rewriteCssUrls(rule.cssText, link.href);
+        if (cssText === undefined)
+            return undefined;
+        rewritten[i] = cssText;
+    }
+    return rewritten.join('\n');
+}
+function hasUnredirectedNativeTiming(link, mountStartedAt) {
+    if (typeof performance !== 'object' ||
+        typeof performance.getEntriesByName !== 'function') {
+        return false;
+    }
+    const entries = performance.getEntriesByName(link.href, 'resource');
+    for (let i = entries.length - 1; i >= 0; i--) {
+        const entry = entries[i];
+        if (entry.initiatorType !== 'link' ||
+            entry.startTime + 1 < mountStartedAt) {
+            continue;
+        }
+        if (entry.redirectStart !== 0 || entry.redirectEnd !== 0)
+            return false;
+        if (entry.workerStart !== 0)
+            return false;
+        const status = entry.responseStatus;
+        if (typeof status === 'number' && status !== 0) {
+            return status >= 200 && status < 300;
+        }
+        return (entry.transferSize > 0 ||
+            entry.encodedBodySize > 0 ||
+            entry.decodedBodySize > 0);
+    }
+    return false;
+}
+function adoptPreparedSheets(root, sheets) {
+    if (!('adoptedStyleSheets' in root))
+        return false;
+    const current = root.adoptedStyleSheets;
+    if (current.length === 0) {
+        try {
+            root.adoptedStyleSheets = sheets;
+            return true;
+        }
+        catch {
+            return false;
+        }
+    }
+    let retained = 0;
+    for (let i = 0; i < current.length; i++) {
+        let prepared = false;
+        for (let sheetIndex = 0; sheetIndex < sheets.length; sheetIndex++) {
+            if (current[i] === sheets[sheetIndex]) {
+                prepared = true;
+                break;
+            }
+        }
+        if (!prepared)
+            retained += 1;
+    }
+    const next = new Array(sheets.length + retained);
+    for (let i = 0; i < sheets.length; i++)
+        next[i] = sheets[i];
+    let index = sheets.length;
+    for (let i = 0; i < current.length; i++) {
+        let prepared = false;
+        for (let sheetIndex = 0; sheetIndex < sheets.length; sheetIndex++) {
+            if (current[i] === sheets[sheetIndex]) {
+                prepared = true;
+                break;
+            }
+        }
+        if (!prepared) {
+            next[index] = current[i];
+            index += 1;
+        }
+    }
+    try {
+        root.adoptedStyleSheets = next;
+        return true;
+    }
+    catch {
+        return false;
+    }
+}
+function hasAuthorStyle(root, stagingRoot, guard) {
+    const mounted = root.querySelectorAll('style');
+    for (let i = 0; i < mounted.length; i++) {
+        if (mounted[i] !== guard)
+            return true;
+    }
+    return stagingRoot.querySelector('style') !== null;
+}
+function installGuard(host, root) {
+    const style = document.createElement('style');
+    const nonce = window.__webui?.nonce;
+    if (typeof nonce === 'string' && nonce)
+        style.nonce = nonce;
+    style.textContent = GUARD_CSS;
+    root.prepend(style);
+    let effective = false;
+    try {
+        effective = (style.sheet?.cssRules.length ?? 0) > 0;
+    }
+    catch {
+        effective = false;
+    }
+    const previousTransitionValue = host.style.getPropertyValue('transition-property');
+    const previousTransitionPriority = host.style.getPropertyPriority('transition-property');
+    const previousValue = host.style.getPropertyValue('visibility');
+    const previousPriority = host.style.getPropertyPriority('visibility');
+    host.style.setProperty('transition-property', 'none', 'important');
+    host.style.setProperty('visibility', 'hidden', 'important');
+    return {
+        effective,
+        release: () => {
+            style.remove();
+            if (host.style.getPropertyValue('visibility') === 'hidden' &&
+                host.style.getPropertyPriority('visibility') === 'important') {
+                if (previousValue) {
+                    host.style.setProperty('visibility', previousValue, previousPriority);
+                }
+                else {
+                    host.style.removeProperty('visibility');
+                }
+            }
+            if (host.style.getPropertyValue('transition-property') === 'none' &&
+                host.style.getPropertyPriority('transition-property') === 'important') {
+                if (previousTransitionValue) {
+                    host.style.setProperty('transition-property', previousTransitionValue, previousTransitionPriority);
+                }
+                else {
+                    host.style.removeProperty('transition-property');
+                }
+            }
+        },
+        style,
+    };
+}
+function skipComment(cssText, start) {
+    for (let i = start; i < cssText.length - 1; i++) {
+        if (cssText.charCodeAt(i) === 42 && cssText.charCodeAt(i + 1) === 47) {
+            return i + 1;
+        }
+    }
+    return cssText.length;
+}
+function readUrlToken(cssText, openIndex) {
+    let cursor = openIndex + 1;
+    while (isCssWhitespace(cssText.charCodeAt(cursor)))
+        cursor += 1;
+    const quote = cssText.charCodeAt(cursor);
+    if (quote === 34 || quote === 39) {
+        const valueStart = cursor + 1;
+        cursor = valueStart;
+        while (cursor < cssText.length) {
+            const code = cssText.charCodeAt(cursor);
+            if (code === 92)
+                return undefined;
+            if (code === quote)
+                break;
+            cursor += 1;
+        }
+        if (cursor >= cssText.length)
+            return undefined;
+        const valueEnd = cursor;
+        cursor += 1;
+        while (isCssWhitespace(cssText.charCodeAt(cursor)))
+            cursor += 1;
+        if (cssText.charCodeAt(cursor) !== 41)
+            return undefined;
+        return {
+            closeIndex: cursor,
+            quote,
+            quoted: true,
+            valueEnd,
+            valueStart,
+        };
+    }
+    const valueStart = cursor;
+    while (cursor < cssText.length && cssText.charCodeAt(cursor) !== 41) {
+        const code = cssText.charCodeAt(cursor);
+        if (code === 34 ||
+            code === 39 ||
+            code === 40 ||
+            code === 92 ||
+            (code === 47 && cssText.charCodeAt(cursor + 1) === 42)) {
+            return undefined;
+        }
+        cursor += 1;
+    }
+    if (cursor >= cssText.length)
+        return undefined;
+    let valueEnd = cursor;
+    while (valueEnd > valueStart &&
+        isCssWhitespace(cssText.charCodeAt(valueEnd - 1))) {
+        valueEnd -= 1;
+    }
+    return {
+        closeIndex: cursor,
+        quote: 0,
+        quoted: false,
+        valueEnd,
+        valueStart,
+    };
+}
+function matchesCssFunction(cssText, start, name) {
+    if (start > 0 && isCssNameCode(cssText.charCodeAt(start - 1)))
+        return false;
+    if (start + name.length >= cssText.length)
+        return false;
+    for (let i = 0; i < name.length; i++) {
+        let code = cssText.charCodeAt(start + i);
+        if (code >= 65 && code <= 90)
+            code += 32;
+        if (code !== name.charCodeAt(i))
+            return false;
+    }
+    return cssText.charCodeAt(start + name.length) === 40;
+}
+function isCssWhitespace(code) {
+    return code === 9 || code === 10 || code === 12 || code === 13 || code === 32;
+}
+function escapeCssString(value, quote) {
+    let escaped = '';
+    let copiedThrough = 0;
+    for (let i = 0; i < value.length; i++) {
+        const code = value.charCodeAt(i);
+        if (code !== quote && code !== 92)
+            continue;
+        escaped += value.slice(copiedThrough, i);
+        escaped += code === 92 ? '\\\\' : `\\${String.fromCharCode(code)}`;
+        copiedThrough = i + 1;
+    }
+    return copiedThrough === 0
+        ? value
+        : escaped + value.slice(copiedThrough);
+}
+function isCssNameCode(code) {
+    return ((code >= 48 && code <= 57) ||
+        (code >= 65 && code <= 90) ||
+        (code >= 97 && code <= 122) ||
+        code === 45 ||
+        code === 95 ||
+        code >= 128);
+}
+function isReferrerPolicy(value) {
+    return (value === 'no-referrer' ||
+        value === 'no-referrer-when-downgrade' ||
+        value === 'origin' ||
+        value === 'origin-when-cross-origin' ||
+        value === 'same-origin' ||
+        value === 'strict-origin' ||
+        value === 'strict-origin-when-cross-origin' ||
+        value === 'unsafe-url');
+}
+function ignorePromiseResults() { }
+function errorMessage(error) {
+    return error instanceof Error ? error.message : String(error);
+}