@runelight/react 0.0.9

package/dist/preview.js

@@ -0,0 +1,824 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { readGBoundaryElementRect } from "@runelight/core/boundary-rect";
+import { createGPreviewErrorMessage, createGPreviewPoolReadyMessage, createGPreviewReadyMessage, createGPreviewRenderAcceptedMessage, createGPreviewResizeMessage, createGPreviewTreeMessage, createGPreviewValuesMessage, isGPreviewRenderMessage, isGPreviewRenderTarget, readRunelightPreviewFrameOverridesFromSearchParams, } from "@runelight/core/preview-protocol";
+import { computeRunelightPreviewFrameGridLayout, runelightPreviewFixedFrameScale, runelightPreviewCardTitleGap, runelightPreviewCardTitleHeight, runelightPreviewCardTitleScreenGap, runelightPreviewCardTitleScreenHeight, runelightPreviewFrameChromeHeight, runelightPreviewFrameGridGap, runelightPreviewFrameGridMinScale, runelightPreviewFrameLabelGap, runelightPreviewFrameLabelMinHeight, runelightPreviewFrameLabelScreenGap, runelightPreviewFrameGridMaxSide, } from "@runelight/core/frame-grid-layout";
+import { GPreviewProvider, createGBoundaryCollector } from "./runtime.js";
+const loadedRunelightPreviewEntriesByLoader = new WeakMap();
+const loadingRunelightPreviewEntriesByLoader = new WeakMap();
+const runelightPreviewStudioFontFamily = '"JetBrains Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace';
+const runelightPreviewDefaultViewportSize = { height: 1024, width: 768 };
+const runelightPreviewFrameGridFallbackItem = { height: 160, width: 280 };
+const runelightPreviewStudioColors = {
+    canvasBg: "#181818",
+    panelBg: "#1e1e1e",
+    panelBgElevated: "#282828",
+    panelBorder: "#3a3a3a",
+    panelBorderSubtle: "#2e2e2e",
+    text: "#d4d4d4",
+    textMuted: "#a0a0a0",
+    textDim: "#8f8f8f",
+    textLabel: "#9a9a9a",
+    textTitle: "#a8a8a8",
+    accent: "#ff8c82",
+    accentText: "#e68a7d",
+    accentMuted: "rgba(255,140,130,0.28)",
+};
+const visibleChromePreviewSheetStyle = {
+    alignContent: "start",
+    backgroundColor: runelightPreviewStudioColors.canvasBg,
+    boxSizing: "border-box",
+    color: runelightPreviewStudioColors.text,
+    display: "grid",
+    fontFamily: runelightPreviewStudioFontFamily,
+    gap: 28,
+    minHeight: "100vh",
+    padding: 32,
+};
+const hiddenChromePreviewSheetStyle = {
+    display: "grid",
+    gap: 0,
+    padding: 0,
+};
+function contactSheetCardTitleSlotStyle(width) {
+    return {
+        alignContent: "start",
+        alignItems: "start",
+        display: "grid",
+        height: runelightPreviewCardTitleHeight + runelightPreviewCardTitleGap,
+        minWidth: 0,
+        overflow: "visible",
+        width,
+    };
+}
+const contactSheetCardTitleStyle = {
+    alignItems: "center",
+    color: runelightPreviewStudioColors.accentText,
+    display: "flex",
+    fontFamily: runelightPreviewStudioFontFamily,
+    fontSize: 9,
+    fontSynthesis: "none",
+    fontWeight: 400,
+    gap: 7,
+    letterSpacing: "0.06em",
+    lineHeight: 1,
+    minWidth: 0,
+    overflow: "hidden",
+    position: "relative",
+    textRendering: "geometricPrecision",
+    textOverflow: "ellipsis",
+    top: runelightPreviewCardTitleHeight + runelightPreviewCardTitleGap,
+    transform: `translateY(-${runelightPreviewCardTitleScreenHeight + runelightPreviewCardTitleScreenGap}px)`,
+    whiteSpace: "nowrap",
+};
+const contactSheetCardTitleIndicatorStyle = {
+    background: runelightPreviewStudioColors.accentText,
+    flexShrink: 0,
+    height: 9,
+    opacity: 1,
+    width: 2,
+};
+const contactSheetCardTitleTextStyle = {
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+};
+function contactSheetComponentGroupStyle(width) {
+    return {
+        display: "grid",
+        gap: 0,
+        minWidth: 0,
+        width,
+    };
+}
+function contactSheetFrameGridStyle(layout) {
+    return {
+        alignItems: "start",
+        display: "grid",
+        gap: layout.gap,
+        gridTemplateColumns: `repeat(${layout.columns}, ${layout.cellWidth}px)`,
+        width: layout.width,
+    };
+}
+function contactSheetFrameTileStyle(cellWidth) {
+    return {
+        alignItems: "start",
+        display: "grid",
+        gap: runelightPreviewFrameLabelGap,
+        justifyItems: "start",
+        minWidth: 0,
+        width: cellWidth,
+    };
+}
+function contactSheetFrameShellStyle(frameLayout, groupLayout) {
+    if (!frameLayout.measured) {
+        return {
+            overflow: "visible",
+            position: "relative",
+            width: runelightPreviewDefaultViewportSize.width,
+        };
+    }
+    return {
+        height: Math.ceil(frameLayout.height * groupLayout.previewScale),
+        overflow: "visible",
+        position: "relative",
+        width: Math.ceil(frameLayout.width * groupLayout.previewScale),
+    };
+}
+function contactSheetFrameScaledCanvasStyle(frameLayout, groupLayout) {
+    if (!frameLayout.measured) {
+        return {
+            position: "relative",
+            transform: "translateZ(0)",
+            transformOrigin: "0 0",
+            width: runelightPreviewDefaultViewportSize.width,
+        };
+    }
+    return {
+        height: frameLayout.height,
+        left: 0,
+        position: "absolute",
+        top: 0,
+        transform: `scale(${formatRunelightPreviewCssNumber(groupLayout.previewScale)})`,
+        transformOrigin: "0 0",
+        width: frameLayout.width,
+    };
+}
+function contactSheetFrameViewportStyle(frameLayout) {
+    if (!frameLayout.measured) {
+        return {
+            overflow: "visible",
+            position: "relative",
+            width: runelightPreviewDefaultViewportSize.width,
+        };
+    }
+    return {
+        height: frameLayout.height,
+        overflow: "hidden",
+        position: "relative",
+        width: frameLayout.width,
+    };
+}
+function contactSheetFrameContentStyle(frameLayout) {
+    if (!frameLayout.measured) {
+        return {
+            position: "relative",
+            width: runelightPreviewDefaultViewportSize.width,
+        };
+    }
+    return {
+        left: -frameLayout.offset.x,
+        position: "absolute",
+        top: -frameLayout.offset.y,
+        width: frameLayout.viewportSize.width,
+    };
+}
+const contactSheetFrameLabelSlotStyle = {
+    alignContent: "start",
+    display: "grid",
+    height: runelightPreviewFrameLabelMinHeight,
+    justifyItems: "center",
+    minWidth: 0,
+    overflow: "visible",
+    width: "100%",
+};
+const contactSheetFrameLabelStyle = {
+    color: runelightPreviewStudioColors.textLabel,
+    display: "block",
+    fontSize: 9,
+    fontWeight: 400,
+    letterSpacing: "0.05em",
+    lineHeight: 1.35,
+    maxWidth: "100%",
+    overflow: "hidden",
+    textAlign: "center",
+    textOverflow: "ellipsis",
+    textTransform: "lowercase",
+    position: "relative",
+    top: -runelightPreviewFrameLabelGap,
+    transform: `translateY(${runelightPreviewFrameLabelScreenGap}px)`,
+    transformOrigin: "top center",
+    whiteSpace: "nowrap",
+};
+const contactSheetMeasuringFrameGridStyle = {
+    alignItems: "start",
+    display: "grid",
+    gap: 20,
+    gridTemplateColumns: "repeat(auto-fit, max-content)",
+};
+const runelightVisiblePreviewDocumentStyle = `html, body {
+  background: ${runelightPreviewStudioColors.canvasBg} !important;
+  margin: 0;
+}`;
+const runelightHiddenPreviewDocumentStyle = `html, body {
+  background: transparent !important;
+  margin: 0;
+}`;
+export function RunelightReactPreviewClient({ frameName = null, frameOverrides = new Map(), chrome = null, defaultEntry, entry, loadComponent, missingEntryDetail = "Pass ?entry=src/components/.../*.g.tsx to render a Runelight preview.", pool = null, poolMode, sessionId = null, staticMode = false, }) {
+    const resolvedPoolMode = poolMode ?? (typeof pool === "boolean" ? pool : pool === "1");
+    const routeTarget = React.useMemo(() => ({
+        frameName,
+        frameOverrides,
+        chrome: typeof chrome === "boolean" ? (chrome ? "1" : "0") : chrome,
+        entry: entry ?? defaultEntry ?? null,
+        poolMode: resolvedPoolMode,
+        renderRequestSequence: 0,
+        sessionId,
+        staticMode,
+    }), [frameName, frameOverrides, chrome, defaultEntry, entry, resolvedPoolMode, sessionId, staticMode]);
+    const renderTarget = useRunelightPreviewRenderTarget(routeTarget);
+    const showChrome = showChromeForPreviewTarget(renderTarget.chrome);
+    if (!renderTarget.entry) {
+        if (renderTarget.poolMode) {
+            return _jsx(RunelightPreviewDocumentBackground, { showChrome: false });
+        }
+        return (_jsxs(_Fragment, { children: [_jsx(RunelightPreviewDocumentBackground, { showChrome: showChrome }), _jsx(RunelightPreviewMessage, { detail: missingEntryDetail, sessionId: renderTarget.sessionId, title: "Missing entry" })] }));
+    }
+    return (_jsxs(_Fragment, { children: [_jsx(RunelightPreviewDocumentBackground, { showChrome: showChrome }), _jsx(RunelightEntryPreview, { frameName: renderTarget.frameName, frameOverrides: renderTarget.frameOverrides, entry: renderTarget.entry, loadComponent: loadComponent, sessionId: renderTarget.sessionId, showChrome: showChrome, staticMode: renderTarget.staticMode }, previewRenderTargetKey(renderTarget))] }));
+}
+function RunelightEntryPreview({ frameName, frameOverrides, entry, loadComponent, sessionId, showChrome, staticMode, }) {
+    const cachedEntry = readLoadedRunelightPreviewEntry(loadComponent, entry);
+    const [loadedEntry, setLoadedEntry] = React.useState(cachedEntry);
+    const effectiveLoadedEntry = cachedEntry ?? loadedEntry;
+    React.useEffect(() => {
+        const cached = readLoadedRunelightPreviewEntry(loadComponent, entry);
+        if (cached) {
+            setLoadedEntry(cached);
+            return;
+        }
+        let ignore = false;
+        loadRunelightPreviewEntry(loadComponent, entry)
+            .then((loaded) => {
+            if (!ignore) {
+                setLoadedEntry(loaded);
+            }
+        });
+        return () => {
+            ignore = true;
+        };
+    }, [entry, loadComponent]);
+    if (!effectiveLoadedEntry || effectiveLoadedEntry.entry !== entry) {
+        return showChrome ? _jsx(RunelightPreviewMessage, { detail: entry, title: "Loading" }) : null;
+    }
+    if (!effectiveLoadedEntry.component) {
+        return _jsx(RunelightPreviewMessage, { detail: entry, sessionId: sessionId, title: "Unknown Runelight entry" });
+    }
+    return (_jsx(LoadedRunelightEntryPreview, { frameName: frameName, frameOverrides: frameOverrides, component: effectiveLoadedEntry.component, entry: entry, sessionId: sessionId, showChrome: showChrome, staticMode: staticMode }));
+}
+function readLoadedRunelightPreviewEntry(loadComponent, entry) {
+    return loadedRunelightPreviewEntriesByLoader.get(loadComponent)?.get(entry) ?? null;
+}
+function loadRunelightPreviewEntry(loadComponent, entry) {
+    let loadedEntries = loadedRunelightPreviewEntriesByLoader.get(loadComponent);
+    if (!loadedEntries) {
+        loadedEntries = new Map();
+        loadedRunelightPreviewEntriesByLoader.set(loadComponent, loadedEntries);
+    }
+    const loadedEntry = loadedEntries.get(entry);
+    if (loadedEntry)
+        return Promise.resolve(loadedEntry);
+    let loadingEntries = loadingRunelightPreviewEntriesByLoader.get(loadComponent);
+    if (!loadingEntries) {
+        loadingEntries = new Map();
+        loadingRunelightPreviewEntriesByLoader.set(loadComponent, loadingEntries);
+    }
+    const loadingEntry = loadingEntries.get(entry);
+    if (loadingEntry)
+        return loadingEntry;
+    const nextLoadingEntry = Promise.resolve(loadComponent(entry))
+        .then((component) => ({ component: component ?? null, entry }))
+        .catch(() => ({ component: null, entry }))
+        .then((loaded) => {
+        loadedEntries.set(entry, loaded);
+        loadingEntries.delete(entry);
+        return loaded;
+    });
+    loadingEntries.set(entry, nextLoadingEntry);
+    return nextLoadingEntry;
+}
+function LoadedRunelightEntryPreview({ frameName, frameOverrides, component, entry, sessionId, showChrome, staticMode, }) {
+    const collector = React.useMemo(() => createGBoundaryCollector(), []);
+    const frames = component.frames ?? {};
+    const selectedFrames = frameName ? [[frameName, frames[frameName]]] : Object.entries(frames);
+    const renderableFrames = selectedFrames.flatMap(([name, frame]) => (frame ? [{ name, frame }] : []));
+    const hasRenderableFrames = selectedFrames.length > 0 && renderableFrames.length === selectedFrames.length;
+    useRunelightPreviewProtocolMessages(sessionId, collector, hasRenderableFrames, { staticMode });
+    if (!hasRenderableFrames) {
+        return _jsx(RunelightPreviewMessage, { detail: frameName ?? "No frames declared", sessionId: sessionId, title: "Unknown Runelight frame" });
+    }
+    return (_jsx(RunelightReactPreviewFrameSheetInternal, { boundaryCollector: collector, frameOverrides: frameOverrides, component: component, entry: entry, selectedFrames: renderableFrames, showChrome: showChrome }));
+}
+export function RunelightReactPreviewFrameSheet(props) {
+    return _jsx(RunelightReactPreviewFrameSheetInternal, { ...props });
+}
+function RunelightReactPreviewFrameSheetInternal({ boundaryCollector, frameOverrides = new Map(), component: Component, entry, selectedFrames, showChrome = true, }) {
+    if (!showChrome) {
+        return (_jsx("main", { style: hiddenChromePreviewSheetStyle, children: selectedFrames.map(({ name, frame }) => (_jsx("section", { "data-runelight-preview-capture-bounds": selectedFrames.length === 1 ? "true" : undefined, "data-runelight-preview-frame": name, children: _jsx(GPreviewProvider, { boundaryCollector: boundaryCollector, frameOverrides: frameOverridesForFrame(entry, name, frameOverrides), ...previewRuntimeProps(frame), children: _jsx(Component, { ...frame.props }) }) }, name))) }));
+    }
+    return (_jsx(RunelightPreviewContactSheetFrameGroup, { frameOverrides: frameOverrides, component: Component, entry: entry, selectedFrames: selectedFrames }));
+}
+function RunelightPreviewContactSheetFrameGroup({ frameOverrides, component: Component, entry, selectedFrames, }) {
+    const frameModels = React.useMemo(() => selectedFrames.map(({ name, frame }) => ({
+        collector: createGBoundaryCollector(),
+        frame,
+        name,
+    })), [selectedFrames]);
+    const frameViewportElements = React.useRef(new Map());
+    const frameContentElements = React.useRef(new Map());
+    const geometryByFrame = useRunelightPreviewContactSheetGeometry({
+        coordinate: toComponentCoordinate(entry),
+        contentElements: frameContentElements,
+        frameModels,
+        viewportElements: frameViewportElements,
+    });
+    const frameLayouts = frameModels.map((model) => runelightPreviewContactSheetFrameLayout(geometryByFrame[model.name]));
+    const groupLayout = computeRunelightPreviewFrameGridLayout({
+        frameChromeHeight: runelightPreviewFrameChromeHeight,
+        gap: runelightPreviewFrameGridGap,
+        items: frameLayouts,
+        maxSide: runelightPreviewFrameGridMaxSide("desktop", selectedFrames.length),
+        minScale: runelightPreviewFrameGridMinScale,
+        previewScale: runelightPreviewFixedFrameScale,
+    });
+    const groupWidth = groupLayout.width;
+    const entryTitle = previewEntryTitle(entry);
+    return (_jsx("main", { "data-runelight-preview-contact-sheet": "true", style: visibleChromePreviewSheetStyle, children: _jsxs("div", { "data-runelight-preview-capture-bounds": "true", "data-runelight-preview-frame-group": "true", "data-runelight-preview-frame-group-measured": runelightPreviewContactSheetHasMeasuredEveryFrame(frameLayouts) ? "true" : "false", style: contactSheetComponentGroupStyle(groupWidth), children: [_jsx("header", { title: `${entry} / ${selectedFrames.length} ${selectedFrames.length === 1 ? "frame" : "frames"}`, style: contactSheetCardTitleSlotStyle(groupWidth), children: _jsxs("span", { style: contactSheetCardTitleStyle, children: [_jsx("span", { "aria-hidden": "true", style: contactSheetCardTitleIndicatorStyle }), _jsx("span", { style: contactSheetCardTitleTextStyle, children: entryTitle })] }) }), _jsx("div", { "data-runelight-preview-frame-grid-columns": groupLayout.columns, "data-runelight-preview-frame-grid-scale": formatRunelightPreviewCssNumber(groupLayout.previewScale), style: runelightPreviewContactSheetHasMeasuredEveryFrame(frameLayouts)
+                        ? contactSheetFrameGridStyle(groupLayout)
+                        : contactSheetMeasuringFrameGridStyle, children: frameModels.map((model, frameIndex) => {
+                        const frameLayout = frameLayouts[frameIndex] ?? runelightPreviewContactSheetFrameLayout(undefined);
+                        return (_jsxs("section", { "data-runelight-preview-frame": model.name, "data-runelight-preview-frame-measured": frameLayout.measured ? "true" : "false", style: frameLayout.measured
+                                ? contactSheetFrameTileStyle(groupLayout.cellWidth)
+                                : contactSheetFrameTileStyle(frameLayout.width), children: [_jsx("div", { style: contactSheetFrameShellStyle(frameLayout, groupLayout), children: _jsx("div", { style: contactSheetFrameScaledCanvasStyle(frameLayout, groupLayout), children: _jsx("div", { "data-runelight-preview-frame-viewport": model.name, ref: (element) => setRunelightPreviewContactSheetElement(frameViewportElements.current, model.name, element), style: contactSheetFrameViewportStyle(frameLayout), children: _jsx("div", { "data-runelight-preview-frame-content": model.name, ref: (element) => setRunelightPreviewContactSheetElement(frameContentElements.current, model.name, element), style: contactSheetFrameContentStyle(frameLayout), children: _jsx(GPreviewProvider, { boundaryCollector: model.collector, frameOverrides: frameOverridesForFrame(entry, model.name, frameOverrides), ...previewRuntimeProps(model.frame), children: _jsx(Component, { ...model.frame.props }) }) }) }) }) }), _jsx("span", { style: contactSheetFrameLabelSlotStyle, children: _jsx("span", { style: contactSheetFrameLabelStyle, children: model.name }) })] }, model.name));
+                    }) })] }) }));
+}
+const useRunelightPreviewLayoutEffect = typeof window === "undefined" ? React.useEffect : React.useLayoutEffect;
+function useRunelightPreviewContactSheetGeometry(input) {
+    const geometrySignature = `${input.coordinate}\n${input.frameModels.map((model) => model.name).join("\n")}`;
+    const [geometryState, setGeometryState] = React.useState(() => ({ frames: {}, signature: geometrySignature }));
+    const geometryByFrame = geometryState.signature === geometrySignature ? geometryState.frames : {};
+    useRunelightPreviewLayoutEffect(() => {
+        if (geometryState.signature !== geometrySignature) {
+            setGeometryState({ frames: {}, signature: geometrySignature });
+            return;
+        }
+        const nextGeometry = {};
+        let hasNextGeometry = false;
+        for (const model of input.frameModels) {
+            if (geometryByFrame[model.name])
+                continue;
+            const viewportElement = input.viewportElements.current.get(model.name);
+            const contentElement = input.contentElements.current.get(model.name);
+            if (!viewportElement || !contentElement)
+                continue;
+            const geometry = measureRunelightReactPreviewFrameGeometry({
+                collector: model.collector,
+                contentElement,
+                coordinate: input.coordinate,
+                viewportElement,
+            });
+            nextGeometry[model.name] = geometry;
+            hasNextGeometry = true;
+        }
+        if (!hasNextGeometry)
+            return;
+        setGeometryState((current) => ({
+            frames: current.signature === geometrySignature ? { ...current.frames, ...nextGeometry } : nextGeometry,
+            signature: geometrySignature,
+        }));
+    }, [geometryByFrame, geometrySignature, geometryState.signature, input]);
+    return geometryByFrame;
+}
+function setRunelightPreviewContactSheetElement(elements, frameName, element) {
+    if (element) {
+        elements.set(frameName, element);
+    }
+    else {
+        elements.delete(frameName);
+    }
+}
+function measureRunelightReactPreviewFrameGeometry(input) {
+    const localBoundaryRects = updateRunelightPreviewLocalBoundaryRects(input.collector, input.viewportElement);
+    const tree = input.collector.getTree();
+    const measuredBoundaryRect = runelightPreviewBoundaryRectForCoordinate(tree, input.coordinate);
+    const contentRect = input.contentElement.getBoundingClientRect();
+    const viewportSize = runelightPreviewMeasuredViewportSize(input.viewportElement, contentRect, localBoundaryRects);
+    const boundaryRect = clipRunelightPreviewBoundaryRectToViewport(measuredBoundaryRect, viewportSize);
+    return {
+        ...(boundaryRect ? { boundaryRect } : {}),
+        viewportSize,
+    };
+}
+function updateRunelightPreviewLocalBoundaryRects(collector, viewportElement) {
+    const viewportRect = viewportElement.getBoundingClientRect();
+    const rects = [];
+    for (const element of viewportElement.querySelectorAll("[data-runelight-boundary-id]")) {
+        const boundaryId = element.dataset.runelightBoundaryId;
+        const rect = readGBoundaryElementRect(element);
+        if (!boundaryId || !rect)
+            continue;
+        const localRect = {
+            x: rect.x - viewportRect.x,
+            y: rect.y - viewportRect.y,
+            width: rect.width,
+            height: rect.height,
+        };
+        collector.updateBoundaryRect(boundaryId, localRect);
+        rects.push(localRect);
+    }
+    return rects;
+}
+function runelightPreviewMeasuredViewportSize(viewportElement, contentRect, boundaryRects) {
+    const right = Math.max(1, viewportElement.scrollWidth, contentRect.width, ...boundaryRects.map((rect) => rect.x + rect.width));
+    const bottom = Math.max(1, viewportElement.scrollHeight, contentRect.height, ...boundaryRects.map((rect) => rect.y + rect.height));
+    return {
+        width: Math.ceil(right),
+        height: Math.ceil(bottom),
+    };
+}
+function runelightPreviewContactSheetFrameLayout(geometry) {
+    if (!geometry) {
+        return {
+            ...runelightPreviewFrameGridFallbackItem,
+            measured: false,
+            offset: { x: 0, y: 0 },
+            viewportSize: runelightPreviewFrameGridFallbackItem,
+        };
+    }
+    const width = previewFrameLayoutWidth(geometry.viewportSize, geometry.boundaryRect);
+    const height = previewFrameLayoutHeight(geometry.viewportSize, geometry.boundaryRect);
+    return {
+        height,
+        measured: true,
+        offset: previewFrameViewportOffset(geometry.boundaryRect),
+        viewportSize: geometry.viewportSize,
+        width,
+    };
+}
+function runelightPreviewContactSheetHasMeasuredEveryFrame(frames) {
+    return frames.every((frame) => frame.measured);
+}
+function previewFrameLayoutHeight(displaySize, rect) {
+    return rect ? Math.max(1, Math.ceil(rect.height)) : displaySize.height;
+}
+function previewFrameLayoutWidth(displaySize, rect) {
+    return rect ? Math.max(1, Math.ceil(rect.width)) : displaySize.width;
+}
+function previewFrameViewportOffset(rect) {
+    return {
+        x: Math.max(0, Math.floor(rect?.x ?? 0)),
+        y: Math.max(0, Math.floor(rect?.y ?? 0)),
+    };
+}
+function clipRunelightPreviewBoundaryRectToViewport(rect, viewport) {
+    if (!rect)
+        return undefined;
+    const left = clampRunelightPreviewNumber(rect.x, 0, viewport.width);
+    const top = clampRunelightPreviewNumber(rect.y, 0, viewport.height);
+    const right = clampRunelightPreviewNumber(rect.x + rect.width, 0, viewport.width);
+    const bottom = clampRunelightPreviewNumber(rect.y + rect.height, 0, viewport.height);
+    if (right <= left || bottom <= top)
+        return undefined;
+    return {
+        x: left,
+        y: top,
+        width: right - left,
+        height: bottom - top,
+    };
+}
+function runelightPreviewBoundaryRectForCoordinate(tree, coordinate) {
+    const node = runelightPreviewBoundaryNodeForCoordinate(tree, coordinate);
+    return node?.rect;
+}
+function runelightPreviewBoundaryNodeForCoordinate(tree, coordinate) {
+    if (!tree)
+        return undefined;
+    for (const node of tree) {
+        if (node.coordinate === coordinate)
+            return node;
+        const childMatch = runelightPreviewBoundaryNodeForCoordinate(node.children, coordinate);
+        if (childMatch)
+            return childMatch;
+    }
+    return undefined;
+}
+function clampRunelightPreviewNumber(value, min, max) {
+    return Math.min(max, Math.max(min, value));
+}
+function formatRunelightPreviewCssNumber(value) {
+    const rounded = Math.round(value * 1000) / 1000;
+    return String(Object.is(rounded, -0) ? 0 : rounded);
+}
+function RunelightPreviewDocumentBackground({ showChrome }) {
+    if (showChrome) {
+        return _jsx("style", { children: runelightVisiblePreviewDocumentStyle });
+    }
+    return _jsx("style", { children: runelightHiddenPreviewDocumentStyle });
+}
+function RunelightPreviewMessage({ detail, sessionId, title, }) {
+    React.useEffect(() => {
+        if (!sessionId)
+            return;
+        window.parent.postMessage(createGPreviewErrorMessage(sessionId, new Error(`${title}: ${detail}`)), "*");
+    }, [detail, sessionId, title]);
+    return (_jsxs("main", { "data-runelight-preview-message": true, style: {
+            backgroundColor: runelightPreviewStudioColors.canvasBg,
+            color: runelightPreviewStudioColors.text,
+            display: "grid",
+            fontFamily: runelightPreviewStudioFontFamily,
+            gap: 9,
+            minHeight: "100vh",
+            padding: 32,
+        }, children: [_jsx("h1", { style: { fontSize: 13, fontWeight: 500, lineHeight: 1.25, margin: 0 }, children: title }), _jsx("p", { style: { color: runelightPreviewStudioColors.textMuted, fontSize: 11, lineHeight: 1.45, margin: 0 }, children: detail })] }));
+}
+export function readRunelightReactPreviewRouteParams(params) {
+    return {
+        frameName: params.get("frame"),
+        frameOverrides: readRunelightReactPreviewFrameOverrides(params),
+        chrome: params.get("chrome"),
+        entry: params.get("entry"),
+        poolMode: params.get("pool") === "1",
+        renderRequestSequence: 0,
+        sessionId: params.get("sessionId"),
+        staticMode: params.get("static") === "1",
+    };
+}
+function readRunelightPreviewMailboxWindow() {
+    return typeof window === "undefined" ? null : window;
+}
+let runelightPreviewRenderTargetMailbox = null;
+function useRunelightPreviewRenderTarget(routeTarget) {
+    const mailbox = routeTarget.poolMode ? ensureRunelightPreviewRenderTargetMailbox() : null;
+    const [messageTarget, setMessageTarget] = React.useState(() => mailbox?.getTarget() ?? null);
+    React.useEffect(() => {
+        if (!mailbox)
+            return;
+        const unsubscribe = mailbox.subscribe(setMessageTarget);
+        mailbox.announcePoolReady();
+        return unsubscribe;
+    }, [mailbox]);
+    if (!routeTarget.poolMode)
+        return routeTarget;
+    return messageTarget ?? routeTarget;
+}
+function ensureRunelightPreviewRenderTargetMailbox() {
+    const mailboxWindow = readRunelightPreviewMailboxWindow();
+    if (!mailboxWindow)
+        return null;
+    if (runelightPreviewRenderTargetMailbox)
+        return runelightPreviewRenderTargetMailbox;
+    const subscribers = new Set();
+    let mailboxState = createRunelightPreviewRenderTargetMailboxState(mailboxWindow.__runelightPreviewPendingRenderTarget ?? null);
+    let poolReadyAnnounced = false;
+    const applyRenderTarget = (target, options) => {
+        mailboxWindow.__runelightPreviewPendingRenderTarget = target;
+        if (options.acknowledge && target.sessionId) {
+            mailboxWindow.parent.postMessage(createGPreviewRenderAcceptedMessage(target.sessionId), "*");
+        }
+        const update = applyRunelightPreviewRenderTargetRequest(mailboxState, target, options);
+        mailboxState = update.state;
+        if (!update.shouldNotifySubscribers || !mailboxState.currentTarget)
+            return;
+        for (const subscriber of subscribers)
+            subscriber(mailboxState.currentTarget);
+    };
+    const render = (target) => applyRenderTarget(target, { acknowledge: true });
+    const handlePrehydrationRenderTarget = (event) => {
+        const target = event.detail;
+        if (isGPreviewRenderTarget(target))
+            applyRenderTarget(target, { acknowledge: false });
+    };
+    mailboxWindow.__runelightPreviewRenderTargetMailbox = { render };
+    if (mailboxWindow.__runelightPreviewPrehydrationMailboxInstalled) {
+        mailboxWindow.addEventListener("runelight:preview-render-target", handlePrehydrationRenderTarget);
+    }
+    else {
+        mailboxWindow.addEventListener("message", (event) => {
+            if (!isGPreviewRenderMessage(event.data))
+                return;
+            render(event.data.target);
+        });
+    }
+    runelightPreviewRenderTargetMailbox = {
+        announcePoolReady() {
+            if (poolReadyAnnounced)
+                return;
+            poolReadyAnnounced = true;
+            if (mailboxWindow.__runelightPreviewPrehydrationMailboxInstalled)
+                return;
+            mailboxWindow.setTimeout(() => {
+                mailboxWindow.parent.postMessage(createGPreviewPoolReadyMessage(), "*");
+            }, 0);
+        },
+        getTarget() {
+            return mailboxState.currentTarget;
+        },
+        render,
+        subscribe(subscriber) {
+            subscribers.add(subscriber);
+            const target = this.getTarget();
+            if (target)
+                subscriber(target);
+            return () => {
+                subscribers.delete(subscriber);
+            };
+        },
+    };
+    return runelightPreviewRenderTargetMailbox;
+}
+function previewRouteParamsFromRenderTarget(target, renderRequestSequence) {
+    return {
+        frameName: target.frameName,
+        frameOverrides: new Map(target.frameOverrides ?? []),
+        chrome: target.chrome,
+        entry: target.entry,
+        poolMode: false,
+        renderRequestSequence,
+        sessionId: target.sessionId,
+        staticMode: target.staticMode,
+    };
+}
+function createRunelightPreviewRenderTargetMailboxState(target) {
+    const currentTarget = target ? previewRouteParamsFromRenderTarget(target, 0) : null;
+    return {
+        currentTarget,
+        currentTargetContentKey: currentTarget ? previewRenderTargetContentKey(currentTarget) : null,
+        renderRequestSequence: 0,
+    };
+}
+function applyRunelightPreviewRenderTargetRequest(state, target, options) {
+    const renderRequestSequence = options.acknowledge ? state.renderRequestSequence + 1 : state.renderRequestSequence;
+    const currentTarget = previewRouteParamsFromRenderTarget(target, renderRequestSequence);
+    const currentTargetContentKey = previewRenderTargetContentKey(currentTarget);
+    const sameContentTarget = state.currentTargetContentKey === currentTargetContentKey;
+    if (sameContentTarget && !options.acknowledge) {
+        return { shouldNotifySubscribers: false, state };
+    }
+    return {
+        shouldNotifySubscribers: true,
+        state: {
+            currentTarget,
+            currentTargetContentKey,
+            renderRequestSequence,
+        },
+    };
+}
+function showChromeForPreviewTarget(chrome) {
+    return chrome === null ? true : chrome !== "0";
+}
+function previewRenderTargetKey(target) {
+    return JSON.stringify({
+        frameName: target.frameName,
+        frameOverrides: [...target.frameOverrides],
+        chrome: target.chrome,
+        entry: target.entry,
+        poolMode: target.poolMode,
+        renderRequestSequence: target.renderRequestSequence,
+        sessionId: target.sessionId,
+        staticMode: target.staticMode,
+    });
+}
+function previewRenderTargetContentKey(target) {
+    return JSON.stringify({
+        frameName: target.frameName,
+        frameOverrides: [...target.frameOverrides],
+        chrome: target.chrome,
+        entry: target.entry,
+        poolMode: target.poolMode,
+        sessionId: target.sessionId,
+        staticMode: target.staticMode,
+    });
+}
+function readRunelightReactPreviewFrameOverrides(params) {
+    return readRunelightPreviewFrameOverridesFromSearchParams(params);
+}
+function frameOverridesForFrame(entry, frameName, childOverrides) {
+    return new Map([...childOverrides, [toComponentCoordinate(entry), frameName]]);
+}
+export function parseRunelightReactPreviewEntry(entry) {
+    const [file, exportName] = entry.split("#", 2);
+    return { file, exportName: exportName || "default" };
+}
+function previewEntryTitle(entry) {
+    const coordinate = parseRunelightReactPreviewEntry(entry);
+    const fileName = coordinate.file.split(/[\\/]/).pop() ?? coordinate.file;
+    const componentName = fileName.replace(/\.g\.(?:tsx|vue)$/, "");
+    return coordinate.exportName === "default" ? componentName : `${componentName} / ${coordinate.exportName}`;
+}
+export function isRunelightReactPreviewComponent(value) {
+    return typeof value === "function";
+}
+function previewRuntimeProps(frame) {
+    return {
+        ...(Object.prototype.hasOwnProperty.call(frame, "scope") ? { scope: frame.scope } : {}),
+        ...(frame.providers ? { providerValues: new Map(frame.providers) } : {}),
+    };
+}
+function toComponentCoordinate(entry) {
+    return entry.includes("#") ? entry : `${entry}#default`;
+}
+function useRunelightPreviewProtocolMessages(sessionId, collector, enabled, options = {}) {
+    React.useEffect(() => {
+        if (!sessionId || !enabled)
+            return;
+        let scheduledFrame = 0;
+        let settleTimer = 0;
+        let settled = false;
+        let resizeObserver;
+        const settleStaticPreview = () => {
+            settled = true;
+            window.removeEventListener("message", handleMessage);
+            window.removeEventListener("resize", scheduleLayoutPublish);
+            resizeObserver?.disconnect();
+            if (scheduledFrame)
+                window.cancelAnimationFrame(scheduledFrame);
+            if (settleTimer)
+                window.clearTimeout(settleTimer);
+            scheduledFrame = 0;
+            settleTimer = 0;
+        };
+        const publishLayout = () => {
+            updateBoundaryRects(collector);
+            const tree = collector.getTree();
+            window.parent.postMessage(createGPreviewTreeMessage(sessionId, tree), "*");
+            window.parent.postMessage(createGPreviewResizeMessage(sessionId, previewContentSize(tree)), "*");
+            if (options.staticMode) {
+                if (settleTimer)
+                    window.clearTimeout(settleTimer);
+                settleTimer = window.setTimeout(settleStaticPreview, 400);
+            }
+        };
+        const scheduleLayoutPublish = () => {
+            if (settled)
+                return;
+            if (scheduledFrame)
+                return;
+            scheduledFrame = window.requestAnimationFrame(() => {
+                scheduledFrame = 0;
+                publishLayout();
+            });
+        };
+        const handleMessage = (event) => {
+            if (!isRuntimeValuesRequest(event.data, sessionId))
+                return;
+            const values = collector.getValues(event.data.boundaryId);
+            if (values) {
+                window.parent.postMessage(createGPreviewValuesMessage(sessionId, values), "*");
+            }
+        };
+        window.addEventListener("message", handleMessage);
+        window.addEventListener("resize", scheduleLayoutPublish);
+        resizeObserver = "ResizeObserver" in window ? new ResizeObserver(scheduleLayoutPublish) : undefined;
+        resizeObserver?.observe(document.documentElement);
+        if (document.body)
+            resizeObserver?.observe(document.body);
+        window.parent.postMessage(createGPreviewReadyMessage(sessionId), "*");
+        publishLayout();
+        return () => {
+            window.removeEventListener("message", handleMessage);
+            window.removeEventListener("resize", scheduleLayoutPublish);
+            resizeObserver?.disconnect();
+            if (settleTimer)
+                window.clearTimeout(settleTimer);
+            if (scheduledFrame)
+                window.cancelAnimationFrame(scheduledFrame);
+        };
+    }, [collector, enabled, options.staticMode, sessionId]);
+}
+function previewContentSize(tree) {
+    const rects = tree.flatMap(flattenBoundaryRects);
+    if (rects.length === 0) {
+        return {
+            width: document.documentElement.scrollWidth,
+            height: document.documentElement.scrollHeight,
+        };
+    }
+    const left = Math.min(0, ...rects.map((rect) => rect.x));
+    const top = Math.min(0, ...rects.map((rect) => rect.y));
+    const right = Math.max(...rects.map((rect) => rect.x + rect.width));
+    const bottom = Math.max(...rects.map((rect) => rect.y + rect.height));
+    return {
+        width: Math.ceil(right - left),
+        height: Math.ceil(bottom - top),
+    };
+}
+function flattenBoundaryRects(node) {
+    return [...(node.rect ? [node.rect] : []), ...node.children.flatMap(flattenBoundaryRects)];
+}
+function isRuntimeValuesRequest(message, sessionId) {
+    return (typeof message === "object" &&
+        message !== null &&
+        message.type === "runelight:request-values" &&
+        message.protocolVersion === 1 &&
+        message.sessionId === sessionId &&
+        typeof message.boundaryId === "string");
+}
+function updateBoundaryRects(collector) {
+    for (const element of document.querySelectorAll("[data-runelight-boundary-id]")) {
+        const boundaryId = element.dataset.runelightBoundaryId;
+        const rect = readGBoundaryElementRect(element);
+        if (boundaryId && rect) {
+            collector.updateBoundaryRect(boundaryId, rect);
+        }
+    }
+}
+//# sourceMappingURL=preview.js.map