@commentray/render 0.0.9 → 0.1.0

package/dist/code-browser-wide-intro-controller.js

@@ -0,0 +1,148 @@
+import { renderWideIntroArrows, repositionWideIntroBubble, } from "./code-browser-wide-intro-layout.js";
+import { wideIntroStepsForShell, wideIntroVisibleTargetsForCurrentStep, } from "./code-browser-wide-intro-steps.js";
+import { clearOpenWideModeIntroTourUi, createWideIntroElements, } from "./code-browser-wide-intro-ui.js";
+import { readWebStorageItem, writeWebStorageItem } from "./code-browser-web-storage.js";
+const STORAGE_WIDE_MODE_INTRO_DONE = "commentray.codeCommentrayStatic.wideModeIntro.v1";
+function refreshWideIntroSteps(runtime) {
+    const nextMode = runtime.isNarrowViewport() ? "narrow" : "wide";
+    if (nextMode === runtime.viewportMode)
+        return;
+    runtime.viewportMode = nextMode;
+    runtime.steps = wideIntroStepsForShell(runtime.shell, nextMode === "narrow");
+}
+function repositionWideIntro(runtime) {
+    const { bubble, arrowLayer } = runtime.elements;
+    refreshWideIntroSteps(runtime);
+    const targets = wideIntroVisibleTargetsForCurrentStep(runtime.steps, runtime.current);
+    const primary = targets[0];
+    if (!primary) {
+        bubble.dataset.side = "none";
+        bubble.style.top = "12px";
+        bubble.style.left = "12px";
+        arrowLayer.replaceChildren();
+        return;
+    }
+    repositionWideIntroBubble(bubble, primary);
+    renderWideIntroArrows(bubble, arrowLayer, targets);
+}
+function advanceWideIntroToRenderableStep(runtime) {
+    refreshWideIntroSteps(runtime);
+    while (runtime.current < runtime.steps.length) {
+        const step = runtime.steps[runtime.current];
+        if (!step)
+            break;
+        const visibleTargets = wideIntroVisibleTargetsForCurrentStep(runtime.steps, runtime.current);
+        const hasFallbackAction = typeof step.fallbackAction === "function";
+        if (visibleTargets.length > 0 || hasFallbackAction)
+            break;
+        runtime.current++;
+    }
+}
+function syncWideIntroStepActionUi(runtime, step, targets) {
+    const { stepActionBtn } = runtime.elements;
+    if (targets.length === 0 &&
+        typeof step.fallbackAction === "function" &&
+        step.fallbackActionLabel) {
+        stepActionBtn.hidden = false;
+        stepActionBtn.textContent = step.fallbackActionLabel;
+        stepActionBtn.disabled = false;
+        return;
+    }
+    stepActionBtn.hidden = true;
+    stepActionBtn.textContent = "";
+    stepActionBtn.disabled = true;
+}
+function renderWideIntro(runtime, closeTour) {
+    const { titleEl, bodyEl, progressEl, backBtn, nextBtn } = runtime.elements;
+    advanceWideIntroToRenderableStep(runtime);
+    if (runtime.current >= runtime.steps.length) {
+        closeTour();
+        return;
+    }
+    const step = runtime.steps[runtime.current];
+    if (!step)
+        return;
+    const targets = wideIntroVisibleTargetsForCurrentStep(runtime.steps, runtime.current);
+    for (const el of runtime.highlighted)
+        el.classList.remove("commentray-wide-intro-target");
+    runtime.highlighted = targets;
+    for (const el of runtime.highlighted)
+        el.classList.add("commentray-wide-intro-target");
+    titleEl.textContent = step.title;
+    bodyEl.textContent = step.body;
+    syncWideIntroStepActionUi(runtime, step, targets);
+    progressEl.textContent = `${String(runtime.current + 1)} / ${String(runtime.steps.length)}`;
+    backBtn.disabled = runtime.current === 0;
+    nextBtn.textContent = runtime.current === runtime.steps.length - 1 ? "Done" : "Next";
+    repositionWideIntro(runtime);
+}
+export function wireWideModeIntroTour(shell, isNarrowViewport, opts) {
+    if (!opts?.force && readWebStorageItem(localStorage, STORAGE_WIDE_MODE_INTRO_DONE) === "1")
+        return;
+    clearOpenWideModeIntroTourUi();
+    const elements = createWideIntroElements();
+    if (!elements)
+        return;
+    const runtime = {
+        shell,
+        steps: wideIntroStepsForShell(shell, isNarrowViewport()),
+        viewportMode: isNarrowViewport() ? "narrow" : "wide",
+        current: 0,
+        highlighted: [],
+        elements,
+        isNarrowViewport,
+    };
+    const { bubble, arrowLayer, stepActionBtn, backBtn, nextBtn, skipBtn } = runtime.elements;
+    const closeTour = () => {
+        for (const el of runtime.highlighted)
+            el.classList.remove("commentray-wide-intro-target");
+        runtime.highlighted = [];
+        arrowLayer.remove();
+        bubble.remove();
+        globalThis.removeEventListener("resize", onResize);
+        globalThis.removeEventListener("scroll", reposition, true);
+        document.removeEventListener("keydown", onKeyDown, true);
+        writeWebStorageItem(localStorage, STORAGE_WIDE_MODE_INTRO_DONE, "1");
+    };
+    const reposition = () => {
+        repositionWideIntro(runtime);
+    };
+    const render = () => {
+        renderWideIntro(runtime, closeTour);
+    };
+    const onResize = () => {
+        render();
+    };
+    const onKeyDown = (ev) => {
+        if (ev.key !== "Escape")
+            return;
+        ev.preventDefault();
+        closeTour();
+    };
+    backBtn.addEventListener("click", () => {
+        if (runtime.current > 0)
+            runtime.current--;
+        render();
+    });
+    stepActionBtn.addEventListener("click", () => {
+        const step = runtime.steps[runtime.current];
+        if (!step || typeof step.fallbackAction !== "function")
+            return;
+        step.fallbackAction();
+        render();
+    });
+    nextBtn.addEventListener("click", () => {
+        if (runtime.current >= runtime.steps.length - 1) {
+            closeTour();
+            return;
+        }
+        runtime.current++;
+        render();
+    });
+    skipBtn.addEventListener("click", closeTour);
+    globalThis.addEventListener("resize", onResize);
+    globalThis.addEventListener("scroll", reposition, true);
+    document.addEventListener("keydown", onKeyDown, true);
+    render();
+}
+//# sourceMappingURL=code-browser-wide-intro-controller.js.map

package/dist/code-browser-wide-intro-controller.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-browser-wide-intro-controller.js","sourceRoot":"","sources":["../src/code-browser-wide-intro-controller.ts"],"names":[],"mappings":"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"}

package/dist/code-browser-wide-intro-layout.d.ts

@@ -0,0 +1,3 @@
+export declare function repositionWideIntroBubble(bubble: HTMLElement, target: HTMLElement): void;
+export declare function renderWideIntroArrows(bubble: HTMLElement, arrowLayer: HTMLElement, targets: HTMLElement[]): void;
+//# sourceMappingURL=code-browser-wide-intro-layout.d.ts.map

package/dist/code-browser-wide-intro-layout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-browser-wide-intro-layout.d.ts","sourceRoot":"","sources":["../src/code-browser-wide-intro-layout.ts"],"names":[],"mappings":"AAIA,wBAAgB,yBAAyB,CAAC,MAAM,EAAE,WAAW,EAAE,MAAM,EAAE,WAAW,GAAG,IAAI,CAkBxF;AAED,wBAAgB,qBAAqB,CACnC,MAAM,EAAE,WAAW,EACnB,UAAU,EAAE,WAAW,EACvB,OAAO,EAAE,WAAW,EAAE,GACrB,IAAI,CAsEN"}

package/dist/code-browser-wide-intro-layout.js

@@ -0,0 +1,84 @@
+function clamp(n, lo, hi) {
+    return Math.max(lo, Math.min(hi, n));
+}
+export function repositionWideIntroBubble(bubble, target) {
+    const rect = target.getBoundingClientRect();
+    const vw = globalThis.innerWidth;
+    const vh = globalThis.innerHeight;
+    const bubbleRect = bubble.getBoundingClientRect();
+    const bubbleWidth = bubbleRect.width > 0 ? bubbleRect.width : 340;
+    const bubbleHeight = bubbleRect.height > 0 ? bubbleRect.height : 160;
+    const margin = 8;
+    const canPlaceBelow = rect.bottom + 12 + bubbleHeight <= vh - margin;
+    const top = canPlaceBelow
+        ? Math.max(margin, rect.bottom + 12)
+        : Math.max(margin, rect.top - bubbleHeight - 12);
+    const left = clamp(rect.left, margin, vw - bubbleWidth - margin);
+    bubble.style.top = `${String(Math.round(top))}px`;
+    bubble.style.left = `${String(Math.round(left))}px`;
+    bubble.dataset.side = canPlaceBelow ? "below" : "above";
+    const pointerLeft = clamp(rect.left + rect.width / 2 - left - 8, 10, bubbleWidth - 22);
+    bubble.style.setProperty("--pointer-left", `${String(Math.round(pointerLeft))}px`);
+}
+export function renderWideIntroArrows(bubble, arrowLayer, targets) {
+    arrowLayer.replaceChildren();
+    if (targets.length === 0)
+        return;
+    const bubbleRect = bubble.getBoundingClientRect();
+    const bubbleCenterX = bubbleRect.left + bubbleRect.width / 2;
+    const bubbleCenterY = bubbleRect.top + bubbleRect.height / 2;
+    const edgePadding = 12;
+    const sideInset = 8;
+    const spread = 12;
+    const side = bubble.dataset.side;
+    const pointerLeftRaw = Number.parseFloat(bubble.style.getPropertyValue("--pointer-left"));
+    const pointerCenterX = Number.isFinite(pointerLeftRaw)
+        ? bubbleRect.left + pointerLeftRaw + 8
+        : bubbleCenterX;
+    const pointerTipY = side === "below"
+        ? bubbleRect.top - sideInset
+        : side === "above"
+            ? bubbleRect.bottom + sideInset
+            : bubbleCenterY;
+    for (const [index, target] of targets.entries()) {
+        const rect = target.getBoundingClientRect();
+        // Point to the middle of each target element.
+        const endX = rect.left + rect.width / 2;
+        const endY = rect.top + rect.height / 2;
+        const toTargetX = endX - bubbleCenterX;
+        const toTargetY = endY - bubbleCenterY;
+        const horizontalDominant = Math.abs(toTargetX) >= Math.abs(toTargetY);
+        const spreadOffset = index - (targets.length - 1) / 2;
+        let startX;
+        let startY;
+        if (targets.length === 1 && (side === "below" || side === "above")) {
+            // Single-target tours look cleaner when the arrow starts from the bubble pointer notch.
+            startX = pointerCenterX;
+            startY = pointerTipY;
+        }
+        else if (horizontalDominant) {
+            startX = toTargetX >= 0 ? bubbleRect.right + sideInset : bubbleRect.left - sideInset;
+            startY = clamp(endY + spreadOffset * spread, bubbleRect.top + edgePadding, bubbleRect.bottom - edgePadding);
+        }
+        else {
+            startY = toTargetY >= 0 ? bubbleRect.bottom + sideInset : bubbleRect.top - sideInset;
+            startX = clamp(endX + spreadOffset * spread, bubbleRect.left + edgePadding, bubbleRect.right - edgePadding);
+        }
+        const dx = endX - startX;
+        const dy = endY - startY;
+        const length = Math.hypot(dx, dy);
+        if (!Number.isFinite(length) || length < 12)
+            continue;
+        const arrow = document.createElement("span");
+        arrow.className = "commentray-wide-intro-arrow";
+        arrow.style.left = `${String(Math.round(startX))}px`;
+        arrow.style.top = `${String(Math.round(startY))}px`;
+        arrow.style.width = `${String(Math.round(length))}px`;
+        arrow.style.setProperty("--wide-intro-arrow-angle", `${String(Math.atan2(dy, dx))}rad`);
+        const head = document.createElement("span");
+        head.className = "commentray-wide-intro-arrow-head";
+        arrow.appendChild(head);
+        arrowLayer.appendChild(arrow);
+    }
+}
+//# sourceMappingURL=code-browser-wide-intro-layout.js.map

package/dist/code-browser-wide-intro-layout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-browser-wide-intro-layout.js","sourceRoot":"","sources":["../src/code-browser-wide-intro-layout.ts"],"names":[],"mappings":"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"}

package/dist/code-browser-wide-intro-steps.d.ts

@@ -0,0 +1,11 @@
+export type WideIntroStep = {
+    targetSelector?: string;
+    targetSelectors?: string[];
+    title: string;
+    body: string;
+    fallbackActionLabel?: string;
+    fallbackAction?: () => void;
+};
+export declare function wideIntroStepsForShell(shell: HTMLElement, isNarrowViewport: boolean): WideIntroStep[];
+export declare function wideIntroVisibleTargetsForCurrentStep(steps: WideIntroStep[], current: number): HTMLElement[];
+//# sourceMappingURL=code-browser-wide-intro-steps.d.ts.map

package/dist/code-browser-wide-intro-steps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-browser-wide-intro-steps.d.ts","sourceRoot":"","sources":["../src/code-browser-wide-intro-steps.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,GAAG;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;CAC7B,CAAC;AAEF,wBAAgB,sBAAsB,CACpC,KAAK,EAAE,WAAW,EAClB,gBAAgB,EAAE,OAAO,GACxB,aAAa,EAAE,CA2EjB;AA8BD,wBAAgB,qCAAqC,CACnD,KAAK,EAAE,aAAa,EAAE,EACtB,OAAO,EAAE,MAAM,GACd,WAAW,EAAE,CAIf"}

package/dist/code-browser-wide-intro-steps.js

@@ -0,0 +1,108 @@
+export function wideIntroStepsForShell(shell, isNarrowViewport) {
+    const introTargetSelector = isNarrowViewport ? "#mobile-pane-flip" : "#shell";
+    const shellSelector = shell.id.trim().length > 0 && typeof globalThis.CSS?.escape === "function"
+        ? `#${globalThis.CSS.escape(shell.id)}`
+        : "#shell";
+    const shellOrIntroTargetSelector = introTargetSelector === "#shell" ? shellSelector : introTargetSelector;
+    return [
+        {
+            targetSelectors: isNarrowViewport
+                ? [shellOrIntroTargetSelector]
+                : ["#code-pane", "#doc-pane"],
+            title: "Welcome",
+            body: "Welcome to commentray, a system to create and view commentaries next to the source tree. Angles are different aspects of these commentaries, so switch between them and keep scrolling while both panes stay aligned.",
+        },
+        {
+            targetSelectors: isNarrowViewport
+                ? [shellOrIntroTargetSelector]
+                : ["#code-pane", "#doc-pane"],
+            title: "Two views",
+            body: isNarrowViewport
+                ? "You are in narrow view now. Use the pane flip to switch code and commentary. Wide view shows both panes side by side."
+                : "You are in wide view now. It shows code and commentary side by side. Narrow view uses one pane and a flip control.",
+        },
+        {
+            targetSelectors: isNarrowViewport
+                ? ["#mobile-pane-flip", "#doc-pane"]
+                : ["#code-pane", "#doc-pane"],
+            title: isNarrowViewport ? "Scroll and toggle" : "Scroll both panes",
+            body: isNarrowViewport
+                ? "Try scrolling commentary, then use the pane flip to switch to source and keep exploring."
+                : "Try scrolling in either pane. Source and commentary stay aligned while you read side by side.",
+        },
+        {
+            targetSelector: "#search-q",
+            title: "Search quickly",
+            body: "Use this search input to jump to documented source lines and markdown snippets.",
+        },
+        {
+            targetSelector: "#angle-select",
+            title: "Angle switch",
+            body: "Change the Commentray angle to view a different narrative for this same source file.",
+        },
+        {
+            targetSelector: "#source-markdown-pane-flip",
+            title: "Source view mode",
+            body: "Toggle between raw source and rendered markdown in the source pane.",
+        },
+        {
+            targetSelector: "#wrap-lines",
+            title: "Readability controls",
+            body: "Wrap lines to reduce horizontal scrolling in both source and commentary panes.",
+            fallbackActionLabel: "Switch to markdown source",
+            fallbackAction: () => {
+                const sourceModeFlip = document.getElementById("source-markdown-pane-flip");
+                if (sourceModeFlip instanceof HTMLButtonElement)
+                    sourceModeFlip.click();
+            },
+        },
+        {
+            targetSelector: "#commentray-theme-trigger",
+            title: "Appearance",
+            body: "Change theme mode from this trigger (menu on left-click, quick cycle on right-click).",
+        },
+        {
+            targetSelector: "#commentray-share-link",
+            title: "Share this view",
+            body: "Use this link button to copy a shareable permalink to the exact page and state you are viewing.",
+        },
+        {
+            targetSelector: "#commentray-help-tour",
+            title: "Need a refresher?",
+            body: "You can always go back to this tutorial via the help button.",
+        },
+    ];
+}
+function wideIntroTargetsForCurrentStep(steps, current) {
+    const step = steps[current];
+    if (!step)
+        return [];
+    const selectors = Array.isArray(step.targetSelectors) && step.targetSelectors.length > 0
+        ? step.targetSelectors
+        : step.targetSelector
+            ? [step.targetSelector]
+            : [];
+    const targets = [];
+    const seen = new Set();
+    for (const selector of selectors) {
+        const found = document.querySelector(selector);
+        if (!(found instanceof HTMLElement) || seen.has(found))
+            continue;
+        seen.add(found);
+        targets.push(found);
+    }
+    return targets;
+}
+function isWideIntroTargetVisible(target) {
+    if (target.hidden)
+        return false;
+    const style = globalThis.getComputedStyle(target);
+    if (style.display === "none" || style.visibility === "hidden")
+        return false;
+    const rect = target.getBoundingClientRect();
+    return rect.width > 0 && rect.height > 0;
+}
+export function wideIntroVisibleTargetsForCurrentStep(steps, current) {
+    return wideIntroTargetsForCurrentStep(steps, current).filter((target) => isWideIntroTargetVisible(target));
+}
+//# sourceMappingURL=code-browser-wide-intro-steps.js.map

package/dist/code-browser-wide-intro-steps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-browser-wide-intro-steps.js","sourceRoot":"","sources":["../src/code-browser-wide-intro-steps.ts"],"names":[],"mappings":"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"}

package/dist/code-browser-wide-intro-ui.d.ts

@@ -0,0 +1,14 @@
+export type WideIntroElements = {
+    bubble: HTMLElement;
+    arrowLayer: HTMLElement;
+    titleEl: HTMLElement;
+    bodyEl: HTMLElement;
+    stepActionBtn: HTMLButtonElement;
+    progressEl: HTMLElement;
+    backBtn: HTMLButtonElement;
+    nextBtn: HTMLButtonElement;
+    skipBtn: HTMLButtonElement;
+};
+export declare function clearOpenWideModeIntroTourUi(): void;
+export declare function createWideIntroElements(): WideIntroElements | null;
+//# sourceMappingURL=code-browser-wide-intro-ui.d.ts.map

package/dist/code-browser-wide-intro-ui.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-browser-wide-intro-ui.d.ts","sourceRoot":"","sources":["../src/code-browser-wide-intro-ui.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,iBAAiB,GAAG;IAC9B,MAAM,EAAE,WAAW,CAAC;IACpB,UAAU,EAAE,WAAW,CAAC;IACxB,OAAO,EAAE,WAAW,CAAC;IACrB,MAAM,EAAE,WAAW,CAAC;IACpB,aAAa,EAAE,iBAAiB,CAAC;IACjC,UAAU,EAAE,WAAW,CAAC;IACxB,OAAO,EAAE,iBAAiB,CAAC;IAC3B,OAAO,EAAE,iBAAiB,CAAC;IAC3B,OAAO,EAAE,iBAAiB,CAAC;CAC5B,CAAC;AAEF,wBAAgB,4BAA4B,IAAI,IAAI,CAQnD;AAED,wBAAgB,uBAAuB,IAAI,iBAAiB,GAAG,IAAI,CAyDlE"}

package/dist/code-browser-wide-intro-ui.js

@@ -0,0 +1,67 @@
+export function clearOpenWideModeIntroTourUi() {
+    for (const el of Array.from(document.querySelectorAll(".commentray-wide-intro-target"))) {
+        if (el instanceof HTMLElement)
+            el.classList.remove("commentray-wide-intro-target");
+    }
+    const open = document.getElementById("commentray-wide-intro");
+    if (open instanceof HTMLElement)
+        open.remove();
+    const arrows = document.getElementById("commentray-wide-intro-arrows");
+    if (arrows instanceof HTMLElement)
+        arrows.remove();
+}
+export function createWideIntroElements() {
+    const arrowLayer = document.createElement("div");
+    arrowLayer.id = "commentray-wide-intro-arrows";
+    arrowLayer.setAttribute("aria-hidden", "true");
+    document.body.appendChild(arrowLayer);
+    const bubble = document.createElement("section");
+    bubble.id = "commentray-wide-intro";
+    bubble.setAttribute("role", "dialog");
+    bubble.setAttribute("aria-live", "polite");
+    bubble.innerHTML = `
+    <span class="commentray-wide-intro-pointer" aria-hidden="true"></span>
+    <p class="commentray-wide-intro-title"></p>
+    <p class="commentray-wide-intro-body"></p>
+    <button type="button" class="commentray-wide-intro-step-action" hidden></button>
+    <div class="commentray-wide-intro-footer">
+      <span class="commentray-wide-intro-progress"></span>
+      <div class="commentray-wide-intro-actions">
+        <button type="button" data-wide-intro="back">Back</button>
+        <button type="button" data-wide-intro="next">Next</button>
+        <button type="button" data-wide-intro="skip">Skip</button>
+      </div>
+    </div>
+  `;
+    document.body.appendChild(bubble);
+    const titleEl = bubble.querySelector(".commentray-wide-intro-title");
+    const bodyEl = bubble.querySelector(".commentray-wide-intro-body");
+    const stepActionBtn = bubble.querySelector(".commentray-wide-intro-step-action");
+    const progressEl = bubble.querySelector(".commentray-wide-intro-progress");
+    const backBtn = bubble.querySelector('button[data-wide-intro="back"]');
+    const nextBtn = bubble.querySelector('button[data-wide-intro="next"]');
+    const skipBtn = bubble.querySelector('button[data-wide-intro="skip"]');
+    if (!(titleEl instanceof HTMLElement) ||
+        !(bodyEl instanceof HTMLElement) ||
+        !(stepActionBtn instanceof HTMLButtonElement) ||
+        !(progressEl instanceof HTMLElement) ||
+        !(backBtn instanceof HTMLButtonElement) ||
+        !(nextBtn instanceof HTMLButtonElement) ||
+        !(skipBtn instanceof HTMLButtonElement)) {
+        arrowLayer.remove();
+        bubble.remove();
+        return null;
+    }
+    return {
+        bubble,
+        arrowLayer,
+        titleEl,
+        bodyEl,
+        stepActionBtn,
+        progressEl,
+        backBtn,
+        nextBtn,
+        skipBtn,
+    };
+}
+//# sourceMappingURL=code-browser-wide-intro-ui.js.map

package/dist/code-browser-wide-intro-ui.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-browser-wide-intro-ui.js","sourceRoot":"","sources":["../src/code-browser-wide-intro-ui.ts"],"names":[],"mappings":"AAYA,MAAM,UAAU,4BAA4B;IAC1C,KAAK,MAAM,EAAE,IAAI,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,+BAA+B,CAAC,CAAC,EAAE,CAAC;QACxF,IAAI,EAAE,YAAY,WAAW;YAAE,EAAE,CAAC,SAAS,CAAC,MAAM,CAAC,8BAA8B,CAAC,CAAC;IACrF,CAAC;IACD,MAAM,IAAI,GAAG,QAAQ,CAAC,cAAc,CAAC,uBAAuB,CAAC,CAAC;IAC9D,IAAI,IAAI,YAAY,WAAW;QAAE,IAAI,CAAC,MAAM,EAAE,CAAC;IAC/C,MAAM,MAAM,GAAG,QAAQ,CAAC,cAAc,CAAC,8BAA8B,CAAC,CAAC;IACvE,IAAI,MAAM,YAAY,WAAW;QAAE,MAAM,CAAC,MAAM,EAAE,CAAC;AACrD,CAAC;AAED,MAAM,UAAU,uBAAuB;IACrC,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IACjD,UAAU,CAAC,EAAE,GAAG,8BAA8B,CAAC;IAC/C,UAAU,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;IAC/C,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;IAEtC,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;IACjD,MAAM,CAAC,EAAE,GAAG,uBAAuB,CAAC;IACpC,MAAM,CAAC,YAAY,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;IACtC,MAAM,CAAC,YAAY,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC;IAC3C,MAAM,CAAC,SAAS,GAAG;;;;;;;;;;;;;GAalB,CAAC;IACF,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;IAElC,MAAM,OAAO,GAAG,MAAM,CAAC,aAAa,CAAC,8BAA8B,CAAC,CAAC;IACrE,MAAM,MAAM,GAAG,MAAM,CAAC,aAAa,CAAC,6BAA6B,CAAC,CAAC;IACnE,MAAM,aAAa,GAAG,MAAM,CAAC,aAAa,CAAC,oCAAoC,CAAC,CAAC;IACjF,MAAM,UAAU,GAAG,MAAM,CAAC,aAAa,CAAC,iCAAiC,CAAC,CAAC;IAC3E,MAAM,OAAO,GAAG,MAAM,CAAC,aAAa,CAAC,gCAAgC,CAAC,CAAC;IACvE,MAAM,OAAO,GAAG,MAAM,CAAC,aAAa,CAAC,gCAAgC,CAAC,CAAC;IACvE,MAAM,OAAO,GAAG,MAAM,CAAC,aAAa,CAAC,gCAAgC,CAAC,CAAC;IACvE,IACE,CAAC,CAAC,OAAO,YAAY,WAAW,CAAC;QACjC,CAAC,CAAC,MAAM,YAAY,WAAW,CAAC;QAChC,CAAC,CAAC,aAAa,YAAY,iBAAiB,CAAC;QAC7C,CAAC,CAAC,UAAU,YAAY,WAAW,CAAC;QACpC,CAAC,CAAC,OAAO,YAAY,iBAAiB,CAAC;QACvC,CAAC,CAAC,OAAO,YAAY,iBAAiB,CAAC;QACvC,CAAC,CAAC,OAAO,YAAY,iBAAiB,CAAC,EACvC,CAAC;QACD,UAAU,CAAC,MAAM,EAAE,CAAC;QACpB,MAAM,CAAC,MAAM,EAAE,CAAC;QAChB,OAAO,IAAI,CAAC;IACd,CAAC;IACD,OAAO;QACL,MAAM;QACN,UAAU;QACV,OAAO;QACP,MAAM;QACN,aAAa;QACb,UAAU;QACV,OAAO;QACP,OAAO;QACP,OAAO;KACR,CAAC;AACJ,CAAC"}

package/dist/code-browser.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"code-browser.d.ts","sourceRoot":"","sources":["../src/code-browser.ts"],"names":[],"mappings":"AAGA,OAAO,EAIL,KAAK,eAAe,EAGrB,MAAM,kBAAkB,CAAC;AAU1B,OAAO,EAAE,KAAK,0BAA0B,EAAwB,MAAM,wBAAwB,CAAC;AAG/F,2EAA2E;AAC3E,MAAM,MAAM,yBAAyB,GAAG;IACtC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gBAAgB,CAAC,EAAE;QACjB,KAAK,EAAE,eAAe,CAAC;QACvB,cAAc,EAAE,MAAM,CAAC;QACvB,iBAAiB,EAAE,MAAM,CAAC;KAC3B,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,6BAA6B,GAAG;IAC1C,cAAc,EAAE,MAAM,CAAC;IACvB,MAAM,EAAE,yBAAyB,EAAE,CAAC;CACrC,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0FAA0F;IAC1F,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,oEAAoE;IACpE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,oBAAoB,CAAC,EAAE,0BAA0B,CAAC;IAClD;;;OAGG;IACH,gBAAgB,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IACrD;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,OAAO,CAAC,EAAE,IAAI,CAAC;IACf;;;;;;OAMG;IACH,gBAAgB,CAAC,EAAE;QACjB,KAAK,EAAE,eAAe,CAAC;QACvB,cAAc,EAAE,MAAM,CAAC;QACvB,iBAAiB,EAAE,MAAM,CAAC;KAC3B,CAAC;IACF;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACpC;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,GAAG,sBAAsB,CAAC;IACpD,oHAAoH;IACpH,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B;;;OAGG;IACH,yBAAyB,CAAC,EAAE,MAAM,CAAC;IACnC;;;OAGG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;;;OAIG;IACH,0BAA0B,CAAC,EAAE,MAAM,CAAC;IACpC;;;OAGG;IACH,kBAAkB,CAAC,EAAE,6BAA6B,CAAC;CACpD,CAAC;AAiiEF;;;;GAIG;AACH,wBAAsB,qBAAqB,CAAC,IAAI,EAAE,sBAAsB,GAAG,OAAO,CAAC,MAAM,CAAC,CAoEzF"}
+{"version":3,"file":"code-browser.d.ts","sourceRoot":"","sources":["../src/code-browser.ts"],"names":[],"mappings":"AAGA,OAAO,EAIL,KAAK,eAAe,EAGrB,MAAM,kBAAkB,CAAC;AAU1B,OAAO,EAAE,KAAK,0BAA0B,EAAwB,MAAM,wBAAwB,CAAC;AAI/F,2EAA2E;AAC3E,MAAM,MAAM,yBAAyB,GAAG;IACtC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gBAAgB,CAAC,EAAE;QACjB,KAAK,EAAE,eAAe,CAAC;QACvB,cAAc,EAAE,MAAM,CAAC;QACvB,iBAAiB,EAAE,MAAM,CAAC;KAC3B,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,6BAA6B,GAAG;IAC1C,cAAc,EAAE,MAAM,CAAC;IACvB,MAAM,EAAE,yBAAyB,EAAE,CAAC;CACrC,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0FAA0F;IAC1F,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,oEAAoE;IACpE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,oBAAoB,CAAC,EAAE,0BAA0B,CAAC;IAClD;;;OAGG;IACH,gBAAgB,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IACrD;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,OAAO,CAAC,EAAE,IAAI,CAAC;IACf;;;;;;OAMG;IACH,gBAAgB,CAAC,EAAE;QACjB,KAAK,EAAE,eAAe,CAAC;QACvB,cAAc,EAAE,MAAM,CAAC;QACvB,iBAAiB,EAAE,MAAM,CAAC;KAC3B,CAAC;IACF;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACpC;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,GAAG,sBAAsB,CAAC;IACpD,oHAAoH;IACpH,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B;;;OAGG;IACH,yBAAyB,CAAC,EAAE,MAAM,CAAC;IACnC;;;OAGG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;;;OAIG;IACH,0BAA0B,CAAC,EAAE,MAAM,CAAC;IACpC;;;OAGG;IACH,kBAAkB,CAAC,EAAE,6BAA6B,CAAC;CACpD,CAAC;AAmpFF;;;;GAIG;AACH,wBAAsB,qBAAqB,CAAC,IAAI,EAAE,sBAAsB,GAAG,OAAO,CAAC,MAAM,CAAC,CA4EzF"}