@gtsx/core 0.0.1

package/dist/studio-client.js

@@ -0,0 +1,1342 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { G_PREVIEW_PROTOCOL_VERSION, createGPreviewRequestValuesMessage, } from "./preview-protocol.js";
+export function applyStudioPreviewMessage(state, message) {
+    if (message.protocolVersion !== G_PREVIEW_PROTOCOL_VERSION || message.sessionId !== state.expectedSessionId) {
+        return state;
+    }
+    if (message.type === "gtsx:ready") {
+        return { ...state, ready: true };
+    }
+    if (message.type === "gtsx:tree") {
+        return { ...state, tree: message.tree };
+    }
+    if (message.type === "gtsx:resize") {
+        return { ...state, size: message.size };
+    }
+    if (message.type === "gtsx:error") {
+        return { ...state, error: message.error };
+    }
+    if (message.type === "gtsx:values") {
+        return {
+            ...state,
+            valuesByBoundaryId: {
+                ...state.valuesByBoundaryId,
+                [message.values.boundaryId]: message.values,
+            },
+        };
+    }
+    return state;
+}
+export function applyStudioPreviewMessageToFrameStates(frameStates, message, activeSessionIds) {
+    if (!activeSessionIds.has(message.sessionId))
+        return frameStates;
+    const currentFrameState = frameStates[message.sessionId] ?? {
+        expectedSessionId: message.sessionId,
+        ready: false,
+    };
+    return {
+        ...frameStates,
+        [message.sessionId]: applyStudioPreviewMessage(currentFrameState, message),
+    };
+}
+export function createStudioWorkspaceState(manifest, selection) {
+    const selected = resolveSelection(manifest, selection);
+    return {
+        canvasViewportPreset: "tablet",
+        columns: [{ components: selected.components }],
+        selectedCaseByCoordinate: {},
+        selectedCoordinatePath: [],
+        selectedRuntimeInstanceByCoordinate: {},
+        selectedViewportPresetByCoordinate: {},
+    };
+}
+export function selectStudioComponent(state, manifest, coordinate, tree) {
+    const selectedColumnIndex = state.columns.findIndex((column) => column.components.some((component) => component.coordinate === coordinate));
+    if (selectedColumnIndex < 0)
+        return state;
+    const nextColumns = state.columns.slice(0, selectedColumnIndex + 1);
+    const selectedPath = [...state.selectedCoordinatePath.slice(0, selectedColumnIndex), coordinate];
+    const childComponents = directChildComponentsForCoordinate(manifest, tree, coordinate);
+    if (childComponents.length > 0) {
+        nextColumns.push({ components: childComponents });
+    }
+    return {
+        canvasViewportPreset: canvasViewportPresetForWorkspace(state),
+        columns: nextColumns,
+        selectedCaseByCoordinate: state.selectedCaseByCoordinate,
+        selectedCoordinatePath: selectedPath,
+        selectedRuntimeInstanceByCoordinate: state.selectedRuntimeInstanceByCoordinate,
+        selectedViewportPresetByCoordinate: state.selectedViewportPresetByCoordinate,
+    };
+}
+export function selectedStudioCaseName(state, component) {
+    return state.selectedCaseByCoordinate[component.coordinate] ?? component.cases[0]?.name ?? "No cases";
+}
+export function changeStudioComponentCase(state, coordinate, caseName, options = {}) {
+    const selectedColumnIndex = state.columns.findIndex((column) => column.components.some((component) => component.coordinate === coordinate));
+    const columns = options.keepDrilldown || selectedColumnIndex < 0 ? state.columns : state.columns.slice(0, selectedColumnIndex + 1);
+    return {
+        canvasViewportPreset: canvasViewportPresetForWorkspace(state),
+        columns,
+        selectedCaseByCoordinate: {
+            ...state.selectedCaseByCoordinate,
+            [coordinate]: caseName,
+        },
+        selectedCoordinatePath: options.keepDrilldown || selectedColumnIndex < 0
+            ? state.selectedCoordinatePath
+            : [...state.selectedCoordinatePath.slice(0, selectedColumnIndex), coordinate],
+        selectedRuntimeInstanceByCoordinate: {},
+        selectedViewportPresetByCoordinate: state.selectedViewportPresetByCoordinate,
+    };
+}
+export function selectStudioRuntimeInstance(state, coordinate, boundaryId) {
+    return {
+        ...state,
+        selectedRuntimeInstanceByCoordinate: {
+            ...state.selectedRuntimeInstanceByCoordinate,
+            [coordinate]: boundaryId,
+        },
+    };
+}
+export function changeStudioViewportPreset(state, coordinate, preset) {
+    return {
+        ...state,
+        canvasViewportPreset: preset,
+        selectedViewportPresetByCoordinate: {
+            ...state.selectedViewportPresetByCoordinate,
+            [coordinate]: preset,
+        },
+    };
+}
+export function changeStudioCanvasViewportPreset(state, preset) {
+    return {
+        ...state,
+        canvasViewportPreset: preset,
+        selectedViewportPresetByCoordinate: {},
+    };
+}
+export function createStudioWorkspaceUrlSearchParams(selection, workspace) {
+    const params = new URLSearchParams();
+    if (selection)
+        params.set("selection", selection);
+    const canvasViewportPreset = canvasViewportPresetForWorkspace(workspace);
+    if (canvasViewportPreset !== "tablet")
+        params.set("canvasViewport", canvasViewportPreset);
+    for (const coordinate of workspace.selectedCoordinatePath) {
+        params.append("path", coordinate);
+    }
+    for (const coordinate of workspace.selectedCoordinatePath) {
+        const caseName = workspace.selectedCaseByCoordinate[coordinate];
+        if (caseName)
+            params.append("case", `${coordinate}:${caseName}`);
+        const boundaryId = workspace.selectedRuntimeInstanceByCoordinate[coordinate];
+        if (boundaryId)
+            params.append("instance", `${coordinate}:${boundaryId}`);
+        const viewport = workspace.selectedViewportPresetByCoordinate[coordinate];
+        if (viewport !== undefined)
+            params.append("viewport", `${coordinate}:${viewport}`);
+    }
+    return params;
+}
+export function createStudioWorkspaceStateFromUrl(manifest, params) {
+    const selection = params.get("selection") ?? undefined;
+    const resolvedSelection = resolveSelection(manifest, selection);
+    const rawPath = params.getAll("path");
+    const selectedCoordinatePath = rawPath.filter((coordinate) => Boolean(findManifestComponent(manifest, coordinate)));
+    const pathCoordinates = new Set(selectedCoordinatePath);
+    const selectedCaseByCoordinate = selectedCasesFromUrl(manifest, params, pathCoordinates);
+    const selectedRuntimeInstanceByCoordinate = selectedRuntimeInstancesFromUrl(manifest, params, pathCoordinates);
+    const selectedViewportPresetByCoordinate = selectedViewportPresetsFromUrl(manifest, params, pathCoordinates);
+    const canvasViewportPreset = canvasViewportPresetFromUrl(params, selectedViewportPresetByCoordinate, selectedCoordinatePath);
+    const hasInvalidUrlState = Boolean(selection && selection !== resolvedSelection.id) ||
+        rawPath.length !== selectedCoordinatePath.length ||
+        hasInvalidSelectedCase(manifest, params, pathCoordinates) ||
+        hasInvalidSelectedRuntimeInstance(manifest, params, pathCoordinates) ||
+        hasInvalidCanvasViewportPreset(params);
+    const warning = hasInvalidUrlState ? "Invalid Studio URL state was ignored." : undefined;
+    if (selectedCoordinatePath.length === 0) {
+        return {
+            selection: resolvedSelection.id,
+            workspace: {
+                canvasViewportPreset,
+                columns: [{ components: resolvedSelection.components }],
+                selectedCaseByCoordinate,
+                selectedCoordinatePath: [],
+                selectedRuntimeInstanceByCoordinate,
+                selectedViewportPresetByCoordinate,
+            },
+            ...(warning ? { warning } : {}),
+        };
+    }
+    return {
+        selection: resolvedSelection.id,
+        workspace: {
+            canvasViewportPreset,
+            columns: [
+                { components: resolvedSelection.components },
+                ...selectedCoordinatePath.slice(1).map((coordinate) => {
+                    const component = findManifestComponent(manifest, coordinate);
+                    return { components: component ? [component] : [] };
+                }),
+            ],
+            selectedCaseByCoordinate,
+            selectedCoordinatePath,
+            selectedRuntimeInstanceByCoordinate,
+            selectedViewportPresetByCoordinate,
+        },
+        ...(warning ? { warning } : {}),
+    };
+}
+export function createStudioRuntimeValuesRequest(manifest, workspace, boundaryId) {
+    const selectedCoordinate = workspace.selectedCoordinatePath.at(-1);
+    if (!selectedCoordinate)
+        return undefined;
+    const sourceCoordinate = workspace.selectedCoordinatePath.at(-2) ?? selectedCoordinate;
+    const sourceComponent = findManifestComponent(manifest, sourceCoordinate);
+    if (!sourceComponent)
+        return undefined;
+    const sourceCaseName = selectedStudioCaseName(workspace, sourceComponent);
+    const sessionId = previewSessionId(sourceComponent, sourceCaseName, previewCaseOverridesForComponent(workspace, sourceComponent));
+    return {
+        sessionId,
+        message: createGPreviewRequestValuesMessage(sessionId, boundaryId),
+    };
+}
+function selectedCasesFromUrl(manifest, params, pathCoordinates) {
+    const selectedCases = {};
+    for (const value of params.getAll("case")) {
+        const parsed = parseCoordinateValuePair(manifest, value);
+        if (!parsed)
+            continue;
+        const component = findManifestComponent(manifest, parsed.coordinate);
+        if (pathCoordinates.has(parsed.coordinate) && component?.cases.some((testCase) => testCase.name === parsed.value)) {
+            selectedCases[parsed.coordinate] = parsed.value;
+        }
+    }
+    return selectedCases;
+}
+function selectedRuntimeInstancesFromUrl(manifest, params, pathCoordinates) {
+    const selectedInstances = {};
+    for (const value of params.getAll("instance")) {
+        const parsed = parseCoordinateValuePair(manifest, value);
+        if (parsed && pathCoordinates.has(parsed.coordinate) && findManifestComponent(manifest, parsed.coordinate)) {
+            selectedInstances[parsed.coordinate] = parsed.value;
+        }
+    }
+    return selectedInstances;
+}
+function selectedViewportPresetsFromUrl(manifest, params, pathCoordinates) {
+    const selectedPresets = {};
+    for (const value of params.getAll("viewport")) {
+        const parsed = parseCoordinateValuePair(manifest, value);
+        if (parsed && pathCoordinates.has(parsed.coordinate) && isStudioViewportPreset(parsed.value)) {
+            selectedPresets[parsed.coordinate] = parsed.value;
+        }
+    }
+    return selectedPresets;
+}
+function canvasViewportPresetFromUrl(params, selectedViewportPresetByCoordinate, selectedCoordinatePath) {
+    const value = params.get("canvasViewport");
+    if (value && isStudioViewportPreset(value))
+        return value;
+    const legacyCoordinate = [...selectedCoordinatePath].reverse().find((coordinate) => selectedViewportPresetByCoordinate[coordinate]);
+    return legacyCoordinate ? selectedViewportPresetByCoordinate[legacyCoordinate] : "tablet";
+}
+function isStudioViewportPreset(value) {
+    return value === "phone" || value === "tablet" || value === "desktop";
+}
+function hasInvalidCanvasViewportPreset(params) {
+    const value = params.get("canvasViewport");
+    return Boolean(value && !isStudioViewportPreset(value));
+}
+function hasInvalidSelectedCase(manifest, params, pathCoordinates) {
+    return params.getAll("case").some((value) => {
+        const parsed = parseCoordinateValuePair(manifest, value);
+        if (!parsed || !pathCoordinates.has(parsed.coordinate))
+            return true;
+        const component = findManifestComponent(manifest, parsed.coordinate);
+        return !component?.cases.some((testCase) => testCase.name === parsed.value);
+    });
+}
+function hasInvalidSelectedRuntimeInstance(manifest, params, pathCoordinates) {
+    return params.getAll("instance").some((value) => {
+        const parsed = parseCoordinateValuePair(manifest, value);
+        return !parsed || !pathCoordinates.has(parsed.coordinate);
+    });
+}
+function parseCoordinateValuePair(manifest, value) {
+    const coordinate = manifest.files
+        .flatMap((file) => file.components)
+        .map((component) => component.coordinate)
+        .sort((left, right) => right.length - left.length)
+        .find((candidate) => value.startsWith(`${candidate}:`));
+    if (!coordinate)
+        return undefined;
+    return {
+        coordinate,
+        value: value.slice(coordinate.length + 1),
+    };
+}
+function directChildComponentsForCoordinate(manifest, tree, coordinate) {
+    const node = findBoundaryNode(tree, coordinate);
+    if (!node)
+        return [];
+    const componentsByCoordinate = new Map(manifest.files.flatMap((file) => file.components).map((component) => [component.coordinate, component]));
+    const seen = new Set();
+    const components = [];
+    for (const child of node.children) {
+        if (seen.has(child.coordinate))
+            continue;
+        const component = componentsByCoordinate.get(child.coordinate);
+        if (component) {
+            seen.add(child.coordinate);
+            components.push(component);
+        }
+    }
+    return components;
+}
+function findBoundaryNode(tree, coordinate) {
+    for (const node of tree) {
+        if (node.coordinate === coordinate)
+            return node;
+        const childMatch = findBoundaryNode(node.children, coordinate);
+        if (childMatch)
+            return childMatch;
+    }
+    return undefined;
+}
+export function StudioShell(props) {
+    const initialUrlState = React.useMemo(() => createStudioWorkspaceStateFromUrl(props.manifest, initialStudioUrlSearchParams(props.selection, props.urlSearch)), [props.manifest, props.selection, props.urlSearch]);
+    const [selection, setSelection] = React.useState(initialUrlState.selection);
+    const [urlWarning, setUrlWarning] = React.useState(initialUrlState.warning);
+    const [workspace, setWorkspace] = React.useState(initialUrlState.workspace);
+    const [frameStates, setFrameStates] = React.useState({});
+    const previewFrames = React.useRef(new Map());
+    const sessionIds = React.useMemo(() => currentPreviewSessionIds(workspace), [workspace]);
+    const selectionRef = React.useRef(selection);
+    React.useEffect(() => {
+        selectionRef.current = selection;
+    }, [selection]);
+    React.useEffect(() => {
+        const handleMessage = (event) => {
+            const message = event.data;
+            if (!isGPreviewProtocolMessage(message) || !sessionIds.has(message.sessionId))
+                return;
+            setFrameStates((current) => applyStudioPreviewMessageToFrameStates(current, message, sessionIds));
+        };
+        window.addEventListener("message", handleMessage);
+        return () => window.removeEventListener("message", handleMessage);
+    }, [sessionIds]);
+    React.useEffect(() => {
+        const handlePopState = () => {
+            const restored = createStudioWorkspaceStateFromUrl(props.manifest, new URLSearchParams(window.location.search));
+            setSelection(restored.selection);
+            setUrlWarning(restored.warning);
+            setWorkspace(restored.workspace);
+            setFrameStates({});
+        };
+        window.addEventListener("popstate", handlePopState);
+        return () => window.removeEventListener("popstate", handlePopState);
+    }, [props.manifest]);
+    const commitWorkspace = React.useCallback((updater) => {
+        setWorkspace((current) => {
+            const next = updater(current);
+            pushStudioWorkspaceUrlState(selectionRef.current, next);
+            return next;
+        });
+    }, []);
+    return (_jsx(StudioWorkspaceView, { frameStates: frameStates, manifest: props.manifest, onSelectComponent: (component, frameState) => {
+            commitWorkspace((current) => selectStudioComponent(current, props.manifest, component.coordinate, frameState?.tree ?? []));
+        }, onChangeCase: (component, caseName, options) => {
+            commitWorkspace((current) => changeStudioComponentCase(current, component.coordinate, caseName, options));
+        }, onChangeCanvasViewportPreset: (preset) => {
+            commitWorkspace((current) => changeStudioCanvasViewportPreset(current, preset));
+        }, onChangeSelection: (nextSelection) => {
+            const params = new URLSearchParams();
+            params.set("selection", nextSelection);
+            const canvasViewportPreset = canvasViewportPresetForWorkspace(workspace);
+            if (canvasViewportPreset !== "tablet")
+                params.set("canvasViewport", canvasViewportPreset);
+            const nextUrlState = createStudioWorkspaceStateFromUrl(props.manifest, params);
+            selectionRef.current = nextUrlState.selection;
+            setSelection(nextUrlState.selection);
+            setUrlWarning(nextUrlState.warning);
+            setWorkspace(nextUrlState.workspace);
+            setFrameStates({});
+            pushStudioWorkspaceUrlState(nextUrlState.selection, nextUrlState.workspace);
+        }, onChangeViewportPreset: (component, preset) => {
+            commitWorkspace((current) => changeStudioViewportPreset(current, component.coordinate, preset));
+        }, onPreviewFrameMount: (sessionId, frame) => {
+            if (frame) {
+                previewFrames.current.set(sessionId, frame);
+            }
+            else {
+                previewFrames.current.delete(sessionId);
+            }
+        }, onRequestValues: (request) => {
+            previewFrames.current.get(request.sessionId)?.contentWindow?.postMessage(request.message, "*");
+        }, onSelectRuntimeInstance: (component, boundaryId) => {
+            commitWorkspace((current) => selectStudioRuntimeInstance(current, component.coordinate, boundaryId));
+        }, selection: selection, urlWarning: urlWarning, workspace: workspace }));
+}
+function initialStudioUrlSearchParams(selection, urlSearch) {
+    if (urlSearch !== undefined)
+        return new URLSearchParams(urlSearch);
+    if (typeof window !== "undefined" && window.location.search) {
+        return new URLSearchParams(window.location.search);
+    }
+    const params = new URLSearchParams();
+    if (selection)
+        params.set("selection", selection);
+    return params;
+}
+function pushStudioWorkspaceUrlState(selection, workspace) {
+    if (typeof window === "undefined")
+        return;
+    const params = createStudioWorkspaceUrlSearchParams(selection, workspace);
+    const search = params.toString();
+    const nextUrl = `${window.location.pathname}${search ? `?${search}` : ""}`;
+    const currentUrl = `${window.location.pathname}${window.location.search}`;
+    if (nextUrl !== currentUrl) {
+        window.history.pushState({ gtsxStudio: true }, "", nextUrl);
+    }
+}
+const inspectorSectionTitleStyle = {
+    color: "#4b5563",
+    fontSize: 11,
+    fontWeight: 800,
+    letterSpacing: 0.8,
+    margin: "0 0 8px",
+    textTransform: "uppercase",
+};
+function clamp(value, min, max) {
+    return Math.min(max, Math.max(min, value));
+}
+const studioCanvasMinScale = 0.2;
+const studioCanvasMaxScale = 2.5;
+const studioPreviewPreloadMargin = 1200;
+const studioCasePreviewScale = 0.25;
+const studioCasePreviewWidth = 192;
+export function applyStudioCanvasWheel(current, input) {
+    if (!input.ctrlKey && !input.metaKey) {
+        return {
+            ...current,
+            x: current.x - input.deltaX,
+            y: current.y - input.deltaY,
+        };
+    }
+    const viewportX = input.clientX - input.viewportLeft;
+    const viewportY = input.clientY - input.viewportTop;
+    const focalCanvasX = (viewportX - current.x) / current.scale;
+    const focalCanvasY = (viewportY - current.y) / current.scale;
+    const wheelDelta = -input.deltaY * wheelDeltaModeMultiplier(input.deltaMode) * 10;
+    const nextScale = clamp(current.scale * 2 ** wheelDelta, studioCanvasMinScale, studioCanvasMaxScale);
+    return {
+        scale: nextScale,
+        x: viewportX - focalCanvasX * nextScale,
+        y: viewportY - focalCanvasY * nextScale,
+    };
+}
+export function applyStudioCardSelectionAction(current, action) {
+    if (action.type === "clear")
+        return undefined;
+    if (action.source === "keyboard")
+        return undefined;
+    if (action.coordinate === current)
+        return current;
+    return action.coordinate;
+}
+function wheelDeltaModeMultiplier(deltaMode) {
+    if (deltaMode === 1)
+        return 0.05;
+    if (deltaMode === 2)
+        return 1;
+    return 0.002;
+}
+export function StudioWorkspaceView(props) {
+    const selected = resolveSelection(props.manifest, props.selection);
+    const [selectedCardCoordinate, setSelectedCardCoordinate] = React.useState();
+    const canvasViewportPreset = canvasViewportPresetForWorkspace(props.workspace);
+    const [canvas, setCanvas] = React.useState({ x: 40, y: 40, scale: 1 });
+    const panRef = React.useRef(null);
+    const canvasViewportRef = React.useRef(null);
+    const selectedCardComponent = selectedCardCoordinate ? findManifestComponent(props.manifest, selectedCardCoordinate) : undefined;
+    const selectedCaseName = selectedCardComponent ? selectedStudioCaseName(props.workspace, selectedCardComponent) : undefined;
+    React.useEffect(() => {
+        setSelectedCardCoordinate(undefined);
+    }, [props.selection]);
+    React.useEffect(() => {
+        const viewport = canvasViewportRef.current;
+        if (!viewport)
+            return;
+        const handleWheel = (event) => {
+            event.preventDefault();
+            const rect = viewport.getBoundingClientRect();
+            setCanvas((current) => applyStudioCanvasWheel(current, {
+                clientX: event.clientX,
+                clientY: event.clientY,
+                ctrlKey: event.ctrlKey,
+                deltaMode: event.deltaMode,
+                deltaX: event.deltaX,
+                deltaY: event.deltaY,
+                metaKey: event.metaKey,
+                viewportLeft: rect.left,
+                viewportTop: rect.top,
+            }));
+        };
+        viewport.addEventListener("wheel", handleWheel, { passive: false });
+        return () => viewport.removeEventListener("wheel", handleWheel);
+    }, []);
+    return (_jsxs("main", { style: {
+            display: "grid",
+            gridTemplateColumns: "210px minmax(0, 1fr)",
+            height: "100vh",
+            overflow: "hidden",
+            background: "#f5f6f8",
+            color: "#1f2328",
+            fontFamily: "ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif",
+        }, children: [_jsxs("aside", { style: {
+                    background: "#fbfcfe",
+                    borderRight: "1px solid #d8dee8",
+                    boxShadow: "1px 0 0 rgba(255,255,255,0.8) inset",
+                    minHeight: 0,
+                    overflow: "auto",
+                    padding: "18px 12px",
+                }, children: [_jsxs("div", { style: { display: "grid", gap: 3, marginBottom: 22 }, children: [_jsx("h1", { style: { fontSize: 18, letterSpacing: -0.2, lineHeight: 1.1, margin: 0 }, children: "GTSX Studio" }), _jsx("p", { style: { color: "#6b7280", fontSize: 12, margin: 0 }, children: "Component workspace" })] }), props.urlWarning ? (_jsx("p", { role: "status", style: {
+                            background: "#fff8c5",
+                            border: "1px solid #d4a72c",
+                            borderRadius: 10,
+                            color: "#5a1e02",
+                            fontSize: 12,
+                            lineHeight: 1.45,
+                            padding: 10,
+                        }, children: props.urlWarning })) : null, _jsx("nav", { "aria-label": "GTSX component index", style: { display: "grid", gap: 16 }, children: props.manifest.files.map((file) => (_jsx(FileGroupLink, { file: file, manifest: props.manifest, onChangeSelection: props.onChangeSelection
+                                ? (nextSelection) => {
+                                    setSelectedCardCoordinate((current) => applyStudioCardSelectionAction(current, { type: "clear" }));
+                                    props.onChangeSelection?.(nextSelection);
+                                }
+                                : undefined, selectedId: selected.id }, file.path))) })] }), _jsx("section", { style: { display: "grid", minHeight: 0, minWidth: 0 }, children: _jsxs("div", { "aria-label": "GTSX canvas viewport", "data-gtsx-canvas-viewport": true, onPointerDown: (event) => {
+                        if (event.target.closest("a,button,iframe"))
+                            return;
+                        setSelectedCardCoordinate((current) => applyStudioCardSelectionAction(current, { type: "clear" }));
+                        panRef.current = {
+                            pointerId: event.pointerId,
+                            startX: event.clientX,
+                            startY: event.clientY,
+                            originX: canvas.x,
+                            originY: canvas.y,
+                        };
+                        try {
+                            event.currentTarget.setPointerCapture(event.pointerId);
+                        }
+                        catch {
+                            // Browsers can cancel trackpad pointer streams before React handles them.
+                        }
+                    }, onPointerMove: (event) => {
+                        const pan = panRef.current;
+                        if (!pan || pan.pointerId !== event.pointerId)
+                            return;
+                        setCanvas((current) => ({
+                            ...current,
+                            x: pan.originX + event.clientX - pan.startX,
+                            y: pan.originY + event.clientY - pan.startY,
+                        }));
+                    }, onPointerUp: (event) => {
+                        if (panRef.current?.pointerId === event.pointerId)
+                            panRef.current = null;
+                    }, onPointerCancel: (event) => {
+                        if (panRef.current?.pointerId === event.pointerId)
+                            panRef.current = null;
+                    }, ref: canvasViewportRef, style: {
+                        backgroundColor: "#f5f6f8",
+                        backgroundImage: "radial-gradient(circle at 1px 1px, rgba(31,35,40,0.10) 1px, transparent 0)",
+                        backgroundSize: "24px 24px",
+                        cursor: panRef.current ? "grabbing" : "grab",
+                        height: "100%",
+                        minHeight: 0,
+                        overscrollBehavior: "contain",
+                        overflow: "hidden",
+                        position: "relative",
+                        touchAction: "none",
+                    }, role: "application", tabIndex: 0, children: [_jsx(ViewportPresetTabs, { onChange: (preset) => {
+                                if (props.onChangeCanvasViewportPreset) {
+                                    props.onChangeCanvasViewportPreset(preset);
+                                }
+                                else {
+                                    for (const component of visibleWorkspaceComponents(props.workspace))
+                                        props.onChangeViewportPreset?.(component, preset);
+                                }
+                            }, selectedPreset: canvasViewportPreset }), _jsx("div", { "data-gtsx-canvas-surface": true, style: {
+                                alignItems: "flex-start",
+                                display: "flex",
+                                gap: 40,
+                                left: 0,
+                                padding: "0 80px 80px 0",
+                                position: "absolute",
+                                top: 0,
+                                transform: `translate(${canvas.x}px, ${canvas.y}px) scale(${canvas.scale})`,
+                                transformOrigin: "0 0",
+                            }, children: props.workspace.columns.map((column, columnIndex) => (_jsx("section", { "data-gtsx-column-index": columnIndex, style: { display: "grid", gap: 10, width: "max-content" }, children: column.components.map((component) => {
+                                    const caseName = selectedStudioCaseName(props.workspace, component);
+                                    const sessionId = previewSessionId(component, caseName, previewCaseOverridesForComponent(props.workspace, component));
+                                    return (_jsx(ComponentCard, { component: component, frameState: props.frameStates?.[sessionId], manifest: props.manifest, onPreviewFrameMount: props.onPreviewFrameMount, onSelect: (selectedComponent, frameState, source) => {
+                                            setSelectedCardCoordinate((current) => applyStudioCardSelectionAction(current, {
+                                                type: "activate-card",
+                                                coordinate: selectedComponent.coordinate,
+                                                source,
+                                            }));
+                                            props.onSelectComponent?.(selectedComponent, frameState);
+                                        }, selected: selectedCardCoordinate === component.coordinate, selectedCaseName: caseName, viewportPreset: canvasViewportPreset, workspace: props.workspace }, component.coordinate));
+                                }) }, columnIndex))) }), selectedCardComponent && selectedCaseName ? (_jsx(SelectedComponentCasesSidebar, { component: selectedCardComponent, manifest: props.manifest, onChangeCase: props.onChangeCase, selectedCaseName: selectedCaseName })) : null] }) })] }));
+}
+function ViewportPresetTabs(props) {
+    const presets = ["phone", "tablet", "desktop"];
+    const selectedIndex = Math.max(0, presets.indexOf(props.selectedPreset));
+    return (_jsxs("div", { "aria-label": "Viewport", "data-gtsx-floating-viewport-controls": true, style: {
+            background: "rgba(255,255,255,0.82)",
+            border: "1px solid rgba(216,222,232,0.92)",
+            borderRadius: 999,
+            boxShadow: "0 10px 30px rgba(31,35,40,0.12)",
+            display: "grid",
+            gridTemplateColumns: `repeat(${presets.length}, 34px)`,
+            left: "50%",
+            padding: 3,
+            position: "absolute",
+            top: 16,
+            transform: "translateX(-50%)",
+            zIndex: 3,
+        }, children: [_jsx("span", { "aria-hidden": "true", "data-gtsx-viewport-tab-highlight": true, style: {
+                    background: "#ffffff",
+                    border: "1px solid #d8dee8",
+                    borderRadius: 999,
+                    boxShadow: "0 3px 10px rgba(31,35,40,0.12)",
+                    height: 28,
+                    left: 3,
+                    position: "absolute",
+                    top: 3,
+                    transform: `translateX(${selectedIndex * 34}px)`,
+                    transition: "transform 120ms ease",
+                    width: 32,
+                } }), presets.map((preset) => (_jsx("button", { "aria-label": `Viewport ${preset}`, "data-gtsx-viewport-control": preset, onClick: () => props.onChange(preset), style: {
+                    alignItems: "center",
+                    background: "transparent",
+                    border: 0,
+                    color: props.selectedPreset === preset ? "#0969da" : "#57606a",
+                    cursor: "pointer",
+                    display: "grid",
+                    height: 28,
+                    justifyItems: "center",
+                    padding: 0,
+                    position: "relative",
+                    width: 32,
+                    zIndex: 1,
+                }, title: preset, type: "button", children: _jsx(ViewportPresetIcon, { preset: preset }) }, preset)))] }));
+}
+function ViewportPresetIcon(props) {
+    if (props.preset === "phone") {
+        return (_jsx("span", { "aria-hidden": "true", style: {
+                border: "1.5px solid currentColor",
+                borderRadius: 3,
+                display: "block",
+                height: 16,
+                width: 9,
+            } }));
+    }
+    if (props.preset === "tablet") {
+        return (_jsx("span", { "aria-hidden": "true", style: {
+                border: "1.5px solid currentColor",
+                borderRadius: 3,
+                display: "block",
+                height: 15,
+                width: 12,
+            } }));
+    }
+    return (_jsx("span", { "aria-hidden": "true", style: {
+            border: "1.5px solid currentColor",
+            borderRadius: 2,
+            display: "block",
+            height: 11,
+            width: 18,
+        } }));
+}
+function FileGroupLink(props) {
+    const fileSelection = `file:${props.file.path}`;
+    const fileName = props.file.path.split("/").pop() ?? props.file.path;
+    const directoryName = props.file.path.includes("/") ? props.file.path.slice(0, props.file.path.lastIndexOf("/")) : "";
+    return (_jsxs("section", { style: { display: "grid", gap: 8 }, children: [_jsxs("a", { href: `?selection=${encodeURIComponent(fileSelection)}`, onClick: (event) => {
+                    if (!props.onChangeSelection)
+                        return;
+                    event.preventDefault();
+                    props.onChangeSelection(fileSelection);
+                }, style: {
+                    color: props.selectedId === fileSelection ? "#0969da" : "#57606a",
+                    display: "grid",
+                    gap: 2,
+                    fontSize: 12,
+                    fontWeight: 750,
+                    lineHeight: 1.35,
+                    overflowWrap: "anywhere",
+                    textDecoration: "none",
+                }, children: [_jsx("span", { children: fileName }), directoryName ? (_jsx("span", { style: { color: "#8b949e", fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", fontSize: 10, fontWeight: 500 }, children: directoryName })) : null] }), _jsx("div", { style: { display: "grid", gap: 7 }, children: props.file.components.map((component) => {
+                    const componentSelection = `component:${component.coordinate}`;
+                    const isSelected = props.selectedId === componentSelection;
+                    return (_jsx("a", { href: `?selection=${encodeURIComponent(componentSelection)}`, onClick: (event) => {
+                            if (!props.onChangeSelection)
+                                return;
+                            event.preventDefault();
+                            props.onChangeSelection(componentSelection);
+                        }, style: {
+                            background: isSelected ? "#eaf4ff" : "#ffffff",
+                            border: "1px solid",
+                            borderColor: isSelected ? "#8ec5ff" : "#d8dee8",
+                            borderRadius: 12,
+                            boxShadow: isSelected ? "0 6px 18px rgba(9,105,218,0.12)" : "0 1px 2px rgba(31,35,40,0.04)",
+                            color: "#1f2328",
+                            display: "block",
+                            overflow: "hidden",
+                            padding: 8,
+                            textDecoration: "none",
+                        }, title: component.componentName, children: _jsx(SidebarComponentPreview, { component: component, manifest: props.manifest }) }, component.coordinate));
+                }) })] }));
+}
+function SidebarComponentPreview(props) {
+    const previewUrl = sidebarPreviewUrlForComponent(props.manifest, props.component);
+    const sessionId = sidebarPreviewSessionId(props.component);
+    const containerRef = React.useRef(null);
+    const [shouldLoad, setShouldLoad] = React.useState(false);
+    const [boundaryRect, setBoundaryRect] = React.useState();
+    React.useEffect(() => {
+        const container = containerRef.current;
+        if (!container)
+            return;
+        if (!("IntersectionObserver" in window)) {
+            setShouldLoad(true);
+            return;
+        }
+        const observer = new IntersectionObserver((entries) => {
+            if (entries.some((entry) => entry.isIntersecting)) {
+                setShouldLoad(true);
+                observer.disconnect();
+            }
+        }, { rootMargin: "500px" });
+        observer.observe(container);
+        return () => observer.disconnect();
+    }, []);
+    React.useEffect(() => {
+        if (!shouldLoad)
+            return;
+        const handleMessage = (event) => {
+            const message = event.data;
+            if (!isGPreviewProtocolMessage(message) || message.sessionId !== sessionId || message.type !== "gtsx:tree")
+                return;
+            setBoundaryRect(findBoundaryNode(message.tree, props.component.coordinate)?.rect);
+        };
+        window.addEventListener("message", handleMessage);
+        return () => window.removeEventListener("message", handleMessage);
+    }, [props.component.coordinate, sessionId, shouldLoad]);
+    const height = boundaryRect ? Math.max(1, Math.ceil((Math.max(0, boundaryRect.y) + boundaryRect.height) * 0.24)) : 96;
+    return (_jsx("div", { "aria-hidden": "true", "data-gtsx-sidebar-preview-coordinate": props.component.coordinate, "data-gtsx-sidebar-preview-loaded": shouldLoad ? "true" : undefined, "data-gtsx-viewport-preset": "tablet", ref: containerRef, style: {
+            background: "#f5f6f8",
+            height,
+            overflow: "hidden",
+            position: "relative",
+            width: 184.32,
+        }, children: previewUrl && shouldLoad ? (_jsx("iframe", { "data-gtsx-sidebar-preview-frame": "true", src: previewUrl, style: {
+                background: "transparent",
+                border: 0,
+                height: 1024,
+                left: 0,
+                pointerEvents: "none",
+                position: "absolute",
+                top: 0,
+                transform: "scale(0.24)",
+                transformOrigin: "0 0",
+                width: 768,
+            }, tabIndex: -1, title: `${props.component.componentName} thumbnail` })) : null }));
+}
+function sidebarPreviewUrlForComponent(manifest, component) {
+    const caseName = component.cases[0]?.name;
+    if (!caseName)
+        return undefined;
+    const params = new URLSearchParams({
+        entry: component.coordinate,
+        case: caseName,
+        chrome: "0",
+        sessionId: sidebarPreviewSessionId(component),
+    });
+    return `${manifest.routes.preview}?${params.toString()}`;
+}
+function sidebarPreviewSessionId(component) {
+    return `sidebar:${component.coordinate}:${component.cases[0]?.name ?? "No cases"}`;
+}
+function SelectedComponentCasesSidebar(props) {
+    return (_jsx("aside", { "aria-label": `${props.component.componentName} cases`, "data-gtsx-case-sidebar": props.component.coordinate, onPointerDown: (event) => event.stopPropagation(), style: {
+            background: "transparent",
+            border: 0,
+            boxShadow: "none",
+            display: "grid",
+            gap: 14,
+            maxHeight: "calc(100% - 96px)",
+            overflow: "auto",
+            padding: 0,
+            position: "absolute",
+            right: 12,
+            top: 72,
+            width: 200,
+            zIndex: 4,
+        }, children: props.component.cases.map((testCase) => (_jsx(CasePreviewCard, { component: props.component, manifest: props.manifest, onChangeCase: props.onChangeCase, selected: props.selectedCaseName === testCase.name, testCaseName: testCase.name }, testCase.name))) }));
+}
+function CasePreviewCard(props) {
+    const sessionId = casePreviewSessionId(props.component, props.testCaseName);
+    const previewUrl = casePreviewUrlForComponent(props.manifest, props.component, props.testCaseName);
+    const [boundaryRect, setBoundaryRect] = React.useState();
+    React.useEffect(() => {
+        const handleMessage = (event) => {
+            const message = event.data;
+            if (!isGPreviewProtocolMessage(message) || message.sessionId !== sessionId || message.type !== "gtsx:tree")
+                return;
+            setBoundaryRect(findBoundaryNode(message.tree, props.component.coordinate)?.rect);
+        };
+        window.addEventListener("message", handleMessage);
+        return () => window.removeEventListener("message", handleMessage);
+    }, [props.component.coordinate, sessionId]);
+    const height = boundaryRect ? Math.max(64, Math.ceil(boundaryRect.height * studioCasePreviewScale) + 32) : 112;
+    const iframeOffset = boundaryRect
+        ? {
+            left: (studioCasePreviewWidth - boundaryRect.width * studioCasePreviewScale) / 2 - boundaryRect.x * studioCasePreviewScale,
+            top: (height - boundaryRect.height * studioCasePreviewScale) / 2 - boundaryRect.y * studioCasePreviewScale,
+        }
+        : { left: 0, top: 0 };
+    return (_jsxs("div", { "data-gtsx-case-preview-card": props.testCaseName, "data-gtsx-case-preview-selected": props.selected ? "true" : undefined, onKeyDown: (event) => {
+            if (event.key !== "Enter" && event.key !== " ")
+                return;
+            event.preventDefault();
+            props.onChangeCase?.(props.component, props.testCaseName, { keepDrilldown: true });
+        }, onClick: () => props.onChangeCase?.(props.component, props.testCaseName, { keepDrilldown: true }), role: "button", style: {
+            background: "transparent",
+            border: 0,
+            boxShadow: "none",
+            color: "#1f2328",
+            cursor: props.onChangeCase ? "pointer" : "default",
+            display: "grid",
+            gap: 6,
+            padding: 0,
+            textAlign: "left",
+        }, tabIndex: 0, children: [_jsx("strong", { style: { fontSize: 12, lineHeight: 1.2 }, children: props.testCaseName }), _jsx("div", { "aria-hidden": "true", "data-gtsx-case-preview-frame": props.testCaseName, style: {
+                    background: "#ffffff",
+                    border: "1px solid",
+                    borderColor: props.selected ? "#0d99ff" : "transparent",
+                    borderRadius: 10,
+                    boxShadow: props.selected ? "0 0 0 4px rgba(13, 153, 255, 0.18)" : "none",
+                    height,
+                    overflow: "hidden",
+                    position: "relative",
+                    width: studioCasePreviewWidth,
+                }, children: _jsx("iframe", { src: previewUrl, style: {
+                        background: "transparent",
+                        border: 0,
+                        height: 1024,
+                        left: iframeOffset.left,
+                        pointerEvents: "none",
+                        position: "absolute",
+                        top: iframeOffset.top,
+                        transform: `scale(${studioCasePreviewScale})`,
+                        transformOrigin: "0 0",
+                        width: 768,
+                    }, tabIndex: -1, title: `${props.component.componentName} ${props.testCaseName} preview` }) })] }));
+}
+function casePreviewUrlForComponent(manifest, component, caseName) {
+    const params = new URLSearchParams({
+        entry: component.coordinate,
+        case: caseName,
+        chrome: "0",
+        sessionId: casePreviewSessionId(component, caseName),
+    });
+    return `${manifest.routes.preview}?${params.toString()}`;
+}
+function casePreviewSessionId(component, caseName) {
+    return `case:${component.coordinate}:${caseName}`;
+}
+function ComponentCard(props) {
+    const defaultCase = props.selectedCaseName;
+    const previewError = getPreviewError(props.component);
+    const caseOverrides = previewCaseOverridesForComponent(props.workspace, props.component);
+    const sessionId = previewSessionId(props.component, defaultCase, caseOverrides);
+    const previewSize = previewFrameSize(props.viewportPreset, props.frameState?.size);
+    const [measuredSize, setMeasuredSize] = React.useState();
+    const displaySize = mergePreviewFrameSize(previewSize, measuredSize, props.viewportPreset);
+    const previewUrl = previewUrlForComponent(props.manifest, props.component, defaultCase, caseOverrides);
+    const cardWidth = componentCardLayoutWidth(displaySize, props.frameState?.tree, props.component.coordinate);
+    const selectedBoundaryRect = props.selected ? selectedBoundaryRectForComponent(props.frameState?.tree, props.component.coordinate) : undefined;
+    return (_jsxs("article", { "aria-pressed": props.selected, "data-gtsx-card-coordinate": props.component.coordinate, "data-gtsx-card-selected": props.selected ? "true" : undefined, onKeyDown: (event) => {
+            if (event.key !== "Enter" && event.key !== " ")
+                return;
+            event.preventDefault();
+            props.onSelect?.(props.component, props.frameState, "keyboard");
+        }, role: "button", style: {
+            cursor: props.onSelect ? "pointer" : "default",
+            display: "grid",
+            gap: 6,
+            width: cardWidth,
+        }, tabIndex: 0, children: [_jsx("strong", { style: {
+                    color: "inherit",
+                    fontSize: 13,
+                    letterSpacing: -0.05,
+                    lineHeight: 1.2,
+                    overflow: "hidden",
+                    textOverflow: "ellipsis",
+                    whiteSpace: "nowrap",
+                }, children: props.component.componentName }), previewError || props.frameState?.error ? (_jsx(PreviewError, { caseName: defaultCase, coordinate: props.component.coordinate, error: props.frameState?.error ?? { message: previewError ?? "Unknown preview error" }, previewUrl: previewUrl })) : (_jsx(LazyPreviewFrame, { "data-gtsx-preview-session-id": sessionId, boundaryRect: selectedBoundaryRectForComponent(props.frameState?.tree, props.component.coordinate), coordinate: props.component.coordinate, frameState: props.frameState, onMeasureSize: setMeasuredSize, onSelect: () => props.onSelect?.(props.component, props.frameState, "pointer"), onPreviewFrameMount: props.onPreviewFrameMount, previewUrl: previewUrl, selectedBoundaryRect: selectedBoundaryRect, size: displaySize, sessionId: sessionId, title: `${props.component.componentName} preview`, viewportPreset: props.viewportPreset }))] }));
+}
+export function componentCardLayoutWidth(displaySize, tree, coordinate) {
+    const rect = tree ? findBoundaryNode(tree, coordinate)?.rect : undefined;
+    if (rect)
+        return Math.max(280, Math.ceil(Math.max(0, rect.x) + rect.width));
+    return typeof displaySize.width === "number" ? displaySize.width + 28 : 520;
+}
+function canvasViewportPresetForWorkspace(workspace) {
+    if (workspace.canvasViewportPreset)
+        return workspace.canvasViewportPreset;
+    const selectedCoordinate = workspace.selectedCoordinatePath.at(-1);
+    if (selectedCoordinate)
+        return workspace.selectedViewportPresetByCoordinate[selectedCoordinate] ?? "tablet";
+    return Object.values(workspace.selectedViewportPresetByCoordinate)[0] ?? "tablet";
+}
+function visibleWorkspaceComponents(workspace) {
+    const seen = new Set();
+    const components = [];
+    for (const component of workspace.columns.flatMap((column) => column.components)) {
+        if (seen.has(component.coordinate))
+            continue;
+        seen.add(component.coordinate);
+        components.push(component);
+    }
+    return components;
+}
+function selectedBoundaryRectForComponent(tree, coordinate) {
+    return tree ? findBoundaryNode(tree, coordinate)?.rect : undefined;
+}
+function LazyPreviewFrame(props) {
+    const containerRef = React.useRef(null);
+    const [shouldLoad, setShouldLoad] = React.useState(false);
+    const requestedSlot = React.useMemo(() => ({
+        previewUrl: props.previewUrl,
+        sessionId: props.sessionId,
+        title: props.title,
+    }), [props.previewUrl, props.sessionId, props.title]);
+    const [activeSlot, setActiveSlot] = React.useState(requestedSlot);
+    const [pendingSlot, setPendingSlot] = React.useState();
+    const layoutHeight = previewFrameLayoutHeight(props.size, props.boundaryRect);
+    React.useEffect(() => {
+        const container = containerRef.current;
+        if (!container)
+            return;
+        if (!("IntersectionObserver" in window)) {
+            setShouldLoad(true);
+            return;
+        }
+        if (isElementNearViewport(container, studioPreviewPreloadMargin)) {
+            setShouldLoad(true);
+            return;
+        }
+        const observer = new IntersectionObserver((entries) => {
+            if (entries.some((entry) => entry.isIntersecting)) {
+                setShouldLoad(true);
+                observer.disconnect();
+            }
+        }, { rootMargin: `${studioPreviewPreloadMargin}px` });
+        observer.observe(container);
+        return () => observer.disconnect();
+    }, []);
+    React.useEffect(() => {
+        if (!shouldLoad)
+            return;
+        if (isSamePreviewFrameSlot(activeSlot, requestedSlot)) {
+            setPendingSlot(undefined);
+            return;
+        }
+        setPendingSlot((current) => {
+            if (current && isSamePreviewFrameSlot(current, requestedSlot))
+                return current;
+            return requestedSlot;
+        });
+    }, [activeSlot, requestedSlot, shouldLoad]);
+    React.useEffect(() => {
+        if (!pendingSlot || !isSamePreviewFrameSlot(pendingSlot, requestedSlot))
+            return;
+        if (!props.frameState?.tree)
+            return;
+        setActiveSlot(pendingSlot);
+        setPendingSlot(undefined);
+    }, [pendingSlot, props.frameState?.tree, requestedSlot]);
+    const frameSlots = shouldLoad
+        ? [
+            { active: true, slot: activeSlot },
+            ...(pendingSlot && !isSamePreviewFrameSlot(pendingSlot, activeSlot) ? [{ active: false, slot: pendingSlot }] : []),
+        ]
+        : [];
+    return (_jsxs("div", { "data-gtsx-preview-session-id": props["data-gtsx-preview-session-id"], "data-gtsx-preview-src": props.previewUrl, "data-gtsx-viewport-preset": props.viewportPreset, ref: containerRef, style: {
+            height: layoutHeight,
+            overflow: "visible",
+            position: "relative",
+            width: props.size.width,
+        }, children: [frameSlots.map(({ active, slot }) => (_jsx(BufferedPreviewIframe, { active: active, onMeasureSize: props.onMeasureSize, onPreviewFrameMount: props.onPreviewFrameMount, size: props.size, slot: slot }, previewFrameSlotKey(slot)))), props.boundaryRect ? _jsx(ComponentBoundsHitTarget, { coordinate: props.coordinate, onSelect: props.onSelect, rect: props.boundaryRect }) : null, props.selectedBoundaryRect ? _jsx(SelectedBoundaryOutline, { rect: props.selectedBoundaryRect }) : null] }));
+}
+function BufferedPreviewIframe(props) {
+    const [frameElement, setFrameElement] = React.useState(null);
+    React.useEffect(() => {
+        if (!frameElement)
+            return;
+        const measure = () => {
+            const size = measureIframeContentSize(frameElement);
+            if (size)
+                props.onMeasureSize?.(size);
+        };
+        const timers = [window.setTimeout(measure, 0), window.setTimeout(measure, 80), window.setTimeout(measure, 250)];
+        return () => {
+            for (const timer of timers)
+                window.clearTimeout(timer);
+        };
+    }, [frameElement, props.onMeasureSize]);
+    return (_jsx("iframe", { "aria-hidden": props.active ? undefined : true, loading: "eager", onLoad: (event) => {
+            const frame = event.currentTarget;
+            const measure = () => {
+                const size = measureIframeContentSize(frame);
+                if (size)
+                    props.onMeasureSize?.(size);
+            };
+            measure();
+            window.setTimeout(measure, 80);
+        }, ref: (frame) => {
+            setFrameElement(frame);
+            props.onPreviewFrameMount?.(props.slot.sessionId, frame);
+        }, src: props.slot.previewUrl, style: {
+            background: "transparent",
+            border: 0,
+            height: props.size.height,
+            opacity: props.active ? 1 : 0,
+            pointerEvents: "none",
+            position: "absolute",
+            transition: "opacity 80ms linear",
+            width: props.size.width,
+            zIndex: props.active ? 1 : 0,
+        }, tabIndex: props.active ? undefined : -1, title: props.slot.title }));
+}
+function isSamePreviewFrameSlot(left, right) {
+    return left.previewUrl === right.previewUrl && left.sessionId === right.sessionId;
+}
+function previewFrameSlotKey(slot) {
+    return `${slot.sessionId}\n${slot.previewUrl}`;
+}
+function isElementNearViewport(element, margin) {
+    const rect = element.getBoundingClientRect();
+    return rect.bottom >= -margin && rect.right >= -margin && rect.top <= window.innerHeight + margin && rect.left <= window.innerWidth + margin;
+}
+function ComponentBoundsHitTarget(props) {
+    return (_jsx("div", { "aria-hidden": "true", "data-gtsx-card-select-coordinate": props.coordinate, "data-gtsx-card-select-target": "component-bounds", onClick: (event) => {
+            event.stopPropagation();
+            props.onSelect?.();
+        }, onPointerDown: (event) => event.stopPropagation(), style: {
+            height: props.rect.height,
+            left: props.rect.x,
+            pointerEvents: "auto",
+            position: "absolute",
+            top: props.rect.y,
+            width: props.rect.width,
+            zIndex: 2,
+        } }));
+}
+function SelectedBoundaryOutline(props) {
+    return (_jsx("div", { "aria-hidden": "true", "data-gtsx-selection-outline": "true", style: {
+            height: props.rect.height,
+            left: props.rect.x,
+            outline: "1px solid #0d99ff",
+            pointerEvents: "none",
+            position: "absolute",
+            top: props.rect.y,
+            width: props.rect.width,
+            zIndex: 1,
+        } }));
+}
+function mergePreviewFrameSize(reported, _measured, _preset) {
+    return reported;
+}
+function previewFrameLayoutHeight(displaySize, rect) {
+    if (!rect)
+        return displaySize.height;
+    return Math.max(1, Math.ceil(Math.max(0, rect.y) + rect.height));
+}
+function measureIframeContentSize(frame) {
+    const documentValue = frame.contentDocument;
+    if (!documentValue)
+        return undefined;
+    const rects = [...documentValue.querySelectorAll("*")]
+        .map((element) => element.getBoundingClientRect())
+        .filter((rect) => rect.width > 0 || rect.height > 0);
+    if (rects.length === 0) {
+        return {
+            width: documentValue.documentElement.scrollWidth,
+            height: documentValue.documentElement.scrollHeight,
+        };
+    }
+    const left = Math.min(0, ...rects.map((rect) => rect.left));
+    const top = Math.min(0, ...rects.map((rect) => rect.top));
+    const right = Math.max(documentValue.documentElement.scrollWidth, ...rects.map((rect) => rect.right));
+    const bottom = Math.max(documentValue.documentElement.scrollHeight, ...rects.map((rect) => rect.bottom));
+    return {
+        width: Math.ceil(right - left + 24),
+        height: Math.ceil(bottom - top),
+    };
+}
+function previewFrameSize(preset, reportedSize) {
+    if (preset === "phone")
+        return { width: 390, height: 844 };
+    if (preset === "tablet")
+        return { width: 768, height: 1024 };
+    if (preset === "desktop")
+        return { width: 1280, height: 900 };
+    return { width: 768, height: clamp(reportedSize?.height ?? 1024, 160, 1200) };
+}
+function PreviewError(props) {
+    return (_jsxs("div", { role: "status", style: { background: "#fff8c5", border: "1px solid #d4a72c", borderRadius: 8, color: "#5a1e02", padding: 12 }, children: [_jsx("strong", { children: "Preview unavailable" }), _jsx("p", { style: { margin: "6px 0 0" }, children: props.error.message }), props.error.stack ? _jsx("pre", { style: { whiteSpace: "pre-wrap" }, children: props.error.stack }) : null, _jsxs("dl", { style: { display: "grid", gap: 4, margin: "8px 0 0" }, children: [_jsxs("div", { children: [_jsx("dt", { children: "Entry" }), _jsx("dd", { style: { margin: 0 }, children: props.coordinate })] }), _jsxs("div", { children: [_jsx("dt", { children: "Case" }), _jsx("dd", { style: { margin: 0 }, children: props.caseName })] }), _jsxs("div", { children: [_jsx("dt", { children: "Preview URL" }), _jsx("dd", { style: { margin: 0 }, children: _jsx("code", { children: props.previewUrl }) })] })] })] }));
+}
+function StudioInspector(props) {
+    if (!props.component) {
+        return (_jsxs("aside", { style: { background: "#fbfcfe", borderLeft: "1px solid #d8dee8", minHeight: 0, overflow: "auto", padding: 20 }, children: [_jsx("h2", { style: { fontSize: 16, margin: 0 }, children: "Inspector" }), _jsx("p", { style: { color: "#6b7280", fontSize: 13 }, children: "Select a GTSX component." })] }));
+    }
+    const selectedCase = selectedStudioCaseName(props.workspace, props.component);
+    const selectedViewportPreset = props.workspace.selectedViewportPresetByCoordinate[props.component.coordinate] ?? "tablet";
+    const instances = runtimeInstancesForSelectedComponent(props.manifest, props.workspace, props.frameStates);
+    const selectedValues = selectedRuntimeValuesSnapshot(props.manifest, props.workspace, props.frameStates);
+    return (_jsxs("aside", { style: { background: "#fbfcfe", borderLeft: "1px solid #d8dee8", minHeight: 0, overflow: "auto", padding: "22px 18px" }, children: [_jsx("h2", { style: { fontSize: 16, letterSpacing: -0.1, margin: "0 0 18px" }, children: "Inspector" }), _jsxs("section", { style: { borderBottom: "1px solid #e5e7eb", display: "grid", gap: 5, marginBottom: 18, paddingBottom: 16 }, children: [_jsx("strong", { style: { fontSize: 14 }, children: props.component.componentName }), _jsx("code", { style: {
+                            color: "#6b7280",
+                            fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
+                            fontSize: 11,
+                            lineHeight: 1.4,
+                            overflowWrap: "anywhere",
+                        }, children: props.component.coordinate })] }), _jsxs("section", { children: [_jsx("h3", { style: inspectorSectionTitleStyle, children: "Cases" }), _jsx("div", { style: { display: "grid", gap: 8 }, children: props.component.cases.map((testCase) => (_jsx("button", { "data-gtsx-case-control": testCase.name, onClick: () => props.onChangeCase?.(props.component, testCase.name), style: {
+                                background: selectedCase === testCase.name ? "#eaf4ff" : "#ffffff",
+                                border: "1px solid",
+                                borderColor: selectedCase === testCase.name ? "#8ec5ff" : "#d8dee8",
+                                borderRadius: 10,
+                                color: "#24292f",
+                                cursor: props.onChangeCase ? "pointer" : "default",
+                                fontWeight: selectedCase === testCase.name ? 700 : 500,
+                                padding: "9px 10px",
+                                textAlign: "left",
+                            }, type: "button", children: testCase.name }, testCase.name))) })] }), _jsxs("section", { style: { marginTop: 20 }, children: [_jsx("h3", { style: inspectorSectionTitleStyle, children: "Viewport" }), _jsx("div", { style: { display: "grid", gap: 8 }, children: ["phone", "tablet", "desktop"].map((preset) => (_jsx("button", { "data-gtsx-viewport-control": preset, onClick: () => props.onChangeViewportPreset?.(props.component, preset), style: {
+                                background: selectedViewportPreset === preset ? "#eaf4ff" : "#ffffff",
+                                border: "1px solid",
+                                borderColor: selectedViewportPreset === preset ? "#8ec5ff" : "#d8dee8",
+                                borderRadius: 10,
+                                color: "#24292f",
+                                cursor: props.onChangeViewportPreset ? "pointer" : "default",
+                                fontWeight: selectedViewportPreset === preset ? 700 : 500,
+                                padding: "9px 10px",
+                                textAlign: "left",
+                            }, type: "button", children: preset }, preset))) })] }), _jsxs("section", { style: { marginTop: 20 }, children: [_jsx("h3", { style: inspectorSectionTitleStyle, children: "Instances" }), instances.length > 0 ? (_jsx("ol", { style: { display: "grid", gap: 8, listStyle: "none", margin: 0, padding: 0 }, children: instances.map((instance) => (_jsxs("li", { "data-gtsx-runtime-instance-id": instance.boundaryId, style: {
+                                background: "#ffffff",
+                                border: "1px solid #d8dee8",
+                                borderRadius: 10,
+                                display: "grid",
+                                gap: 4,
+                                padding: "10px",
+                            }, children: [_jsx("button", { onClick: () => {
+                                        props.onSelectRuntimeInstance?.(props.component, instance.boundaryId);
+                                        const request = createStudioRuntimeValuesRequest(props.manifest, props.workspace, instance.boundaryId);
+                                        if (request)
+                                            props.onRequestValues?.(request);
+                                    }, style: {
+                                        background: "transparent",
+                                        border: 0,
+                                        color: "inherit",
+                                        cursor: props.onRequestValues ? "pointer" : "default",
+                                        font: "inherit",
+                                        padding: 0,
+                                        textAlign: "left",
+                                    }, type: "button", children: _jsx("strong", { style: { fontSize: 12 }, children: instance.boundaryId }) }), _jsxs("span", { style: { color: "#6b7280", fontSize: 11, lineHeight: 1.35, overflowWrap: "anywhere" }, children: ["Parent: ", instance.parentPath.join(" > ") || "root"] }), instance.rect ? (_jsxs("span", { style: { color: "#6b7280", fontSize: 11 }, children: [instance.rect.width, "x", instance.rect.height, " at ", instance.rect.x, ",", instance.rect.y] })) : null] }, instance.boundaryId))) })) : (_jsx("p", { style: { color: "#6b7280", fontSize: 12, margin: 0 }, children: "No runtime instances reported yet." }))] }), _jsxs("section", { style: { marginTop: 20 }, children: [_jsx("h3", { style: inspectorSectionTitleStyle, children: "Values" }), selectedValues ? (_jsxs("div", { style: { display: "grid", gap: 12 }, children: [_jsx(RuntimeValueSection, { label: "Props", value: selectedValues.props }), selectedValues.scope ? _jsx(RuntimeValueSection, { label: "Scope", value: selectedValues.scope }) : null, _jsxs("section", { children: [_jsx("h4", { style: { fontSize: 12, margin: "0 0 6px" }, children: "Provider Values" }), selectedValues.providerValues.length > 0 ? (_jsx("div", { style: { display: "grid", gap: 8 }, children: selectedValues.providerValues.map((providerValue) => (_jsx(RuntimeValueSection, { label: providerValue.providerName, value: providerValue.value }, providerValue.providerName))) })) : (_jsx("p", { style: { color: "#6b7280", fontSize: 12, margin: 0 }, children: "No provider values reported." }))] })] })) : (_jsx("p", { style: { color: "#6b7280", fontSize: 12, margin: 0 }, children: "Select an instance to request runtime values." }))] })] }));
+}
+function RuntimeValueSection(props) {
+    return (_jsxs("section", { children: [_jsx("h4", { style: { fontSize: 12, margin: "0 0 6px" }, children: props.label }), _jsx(SerializedRuntimeValueView, { value: props.value })] }));
+}
+function SerializedRuntimeValueView(props) {
+    const value = props.value;
+    if (value.type === "object") {
+        return _jsx(RuntimeEntries, { entries: value.entries });
+    }
+    if (value.type === "array") {
+        return _jsx(RuntimeEntries, { entries: value.values.map((item, index) => ({ key: `[${index}]`, value: item })) });
+    }
+    if (value.type === "map") {
+        return (_jsx(RuntimeEntries, { entries: value.entries.map(([entryKey, entryValue], index) => ({
+                key: `entry ${index}`,
+                value: { type: "array", values: [entryKey, entryValue] },
+            })) }));
+    }
+    if (value.type === "set") {
+        return _jsx(RuntimeEntries, { entries: value.values.map((item, index) => ({ key: `value ${index}`, value: item })) });
+    }
+    if (value.type === "react-element") {
+        return (_jsx(RuntimeEntries, { entries: [
+                { key: "type", value: { type: "string", value: value.elementType } },
+                { key: "props", value: value.props },
+            ] }));
+    }
+    return _jsx("span", { style: { color: "#57606a", fontSize: 12 }, children: runtimeValueLabel(value) });
+}
+function RuntimeEntries(props) {
+    return (_jsx("dl", { style: { display: "grid", gap: 6, margin: 0 }, children: props.entries.map((entry) => (_jsxs("div", { style: { display: "grid", gap: 2 }, children: [_jsx("dt", { style: { color: "#57606a", fontSize: 12 }, children: entry.key }), _jsx("dd", { style: { margin: 0, paddingLeft: 8 }, children: _jsx(SerializedRuntimeValueView, { value: entry.value }) })] }, entry.key))) }));
+}
+function runtimeValueLabel(value) {
+    if (value.type === "undefined")
+        return "undefined";
+    if (value.type === "null")
+        return "null";
+    if (value.type === "string")
+        return value.value;
+    if (value.type === "number" || value.type === "boolean")
+        return String(value.value);
+    if (value.type === "bigint")
+        return `${value.value}n`;
+    if (value.type === "symbol" || value.type === "function")
+        return value.displayName;
+    if (value.type === "date")
+        return value.value;
+    if (value.type === "error")
+        return `${value.name}: ${value.message}`;
+    if (value.type === "circular")
+        return `Circular reference to ${value.path}`;
+    return "Truncated at max depth";
+}
+function runtimeInstancesForSelectedComponent(manifest, workspace, frameStates) {
+    const selectedCoordinate = workspace.selectedCoordinatePath.at(-1);
+    if (!selectedCoordinate)
+        return [];
+    const parentCoordinate = workspace.selectedCoordinatePath.at(-2);
+    if (parentCoordinate) {
+        const parentComponent = findManifestComponent(manifest, parentCoordinate);
+        if (!parentComponent)
+            return [];
+        const parentCaseName = selectedStudioCaseName(workspace, parentComponent);
+        const parentFrameState = frameStates?.[previewSessionId(parentComponent, parentCaseName, previewCaseOverridesForComponent(workspace, parentComponent))];
+        return findBoundaryNodes(parentFrameState?.tree ?? [], parentCoordinate).flatMap((parentNode) => parentNode.children
+            .filter((child) => child.coordinate === selectedCoordinate)
+            .map((child) => toRuntimeInstance(child, [parentCoordinate])));
+    }
+    const selectedComponent = findManifestComponent(manifest, selectedCoordinate);
+    if (!selectedComponent)
+        return [];
+    const selectedCaseName = selectedStudioCaseName(workspace, selectedComponent);
+    const selectedFrameState = frameStates?.[previewSessionId(selectedComponent, selectedCaseName, previewCaseOverridesForComponent(workspace, selectedComponent))];
+    return findBoundaryNodes(selectedFrameState?.tree ?? [], selectedCoordinate).map((node) => toRuntimeInstance(node, []));
+}
+function selectedRuntimeValuesSnapshot(manifest, workspace, frameStates) {
+    const selectedCoordinate = workspace.selectedCoordinatePath.at(-1);
+    if (!selectedCoordinate)
+        return undefined;
+    const selectedBoundaryId = workspace.selectedRuntimeInstanceByCoordinate[selectedCoordinate];
+    if (!selectedBoundaryId)
+        return undefined;
+    const sourceCoordinate = workspace.selectedCoordinatePath.at(-2) ?? selectedCoordinate;
+    const sourceComponent = findManifestComponent(manifest, sourceCoordinate);
+    if (!sourceComponent)
+        return undefined;
+    const sourceCaseName = selectedStudioCaseName(workspace, sourceComponent);
+    const sourceFrameState = frameStates?.[previewSessionId(sourceComponent, sourceCaseName, previewCaseOverridesForComponent(workspace, sourceComponent))];
+    return sourceFrameState?.valuesByBoundaryId?.[selectedBoundaryId];
+}
+function toRuntimeInstance(node, parentPath) {
+    return {
+        boundaryId: node.id,
+        coordinate: node.coordinate,
+        parentPath,
+        ...(node.rect ? { rect: node.rect } : {}),
+    };
+}
+function findManifestComponent(manifest, coordinate) {
+    return manifest.files.flatMap((file) => file.components).find((component) => component.coordinate === coordinate);
+}
+function findBoundaryNodes(tree, coordinate) {
+    return tree.flatMap((node) => {
+        const childMatches = findBoundaryNodes(node.children, coordinate);
+        return node.coordinate === coordinate ? [node, ...childMatches] : childMatches;
+    });
+}
+function selectedInspectorComponent(manifest, workspace) {
+    const selectedCoordinate = workspace.selectedCoordinatePath.at(-1);
+    if (selectedCoordinate) {
+        return manifest.files.flatMap((file) => file.components).find((component) => component.coordinate === selectedCoordinate);
+    }
+    return workspace.columns[0]?.components[0];
+}
+function getPreviewError(component) {
+    if (component.diagnostics.length > 0) {
+        return component.diagnostics.map((diagnostic) => diagnostic.code).join(", ");
+    }
+    if (!component.cases[0]) {
+        return "missing-case";
+    }
+    return undefined;
+}
+function previewUrlForComponent(manifest, component, caseName, caseOverrides = []) {
+    const params = new URLSearchParams({
+        entry: component.coordinate,
+        case: caseName,
+        chrome: "0",
+        sessionId: previewSessionId(component, caseName, caseOverrides),
+    });
+    for (const [coordinate, overrideCaseName] of caseOverrides) {
+        params.append("gcase", `${coordinate}:${overrideCaseName}`);
+    }
+    return `${manifest.routes.preview}?${params.toString()}`;
+}
+function previewSessionId(component, caseName, caseOverrides = []) {
+    if (caseOverrides.length === 0)
+        return `${component.coordinate}:${caseName}`;
+    return `${component.coordinate}:${caseName}|${caseOverrides
+        .map(([coordinate, overrideCaseName]) => `${coordinate}:${overrideCaseName}`)
+        .join("|")}`;
+}
+function previewCaseOverridesForComponent(workspace, component) {
+    const componentPathIndex = workspace.selectedCoordinatePath.indexOf(component.coordinate);
+    if (componentPathIndex < 0)
+        return [];
+    return workspace.selectedCoordinatePath
+        .slice(componentPathIndex + 1)
+        .flatMap((coordinate) => {
+        const caseName = workspace.selectedCaseByCoordinate[coordinate];
+        return caseName ? [[coordinate, caseName]] : [];
+    });
+}
+function currentPreviewSessionIds(workspace) {
+    return new Set(workspace.columns.flatMap((column) => column.components.flatMap((component) => {
+        const caseName = selectedStudioCaseName(workspace, component);
+        return caseName !== "No cases" ? [previewSessionId(component, caseName, previewCaseOverridesForComponent(workspace, component))] : [];
+    })));
+}
+function isGPreviewProtocolMessage(value) {
+    return (typeof value === "object" &&
+        value !== null &&
+        "type" in value &&
+        typeof value.type === "string" &&
+        value.type.startsWith("gtsx:"));
+}
+function resolveSelection(manifest, selection) {
+    if (selection?.startsWith("component:")) {
+        const coordinate = selection.slice("component:".length);
+        const component = manifest.files.flatMap((file) => file.components).find((candidate) => candidate.coordinate === coordinate);
+        if (component)
+            return { id: selection, components: [component] };
+    }
+    if (selection?.startsWith("file:")) {
+        const filePath = selection.slice("file:".length);
+        const file = manifest.files.find((candidate) => candidate.path === filePath);
+        if (file)
+            return { id: selection, components: file.components };
+    }
+    const firstFile = manifest.files[0];
+    return { id: firstFile ? `file:${firstFile.path}` : "", components: firstFile?.components ?? [] };
+}
+//# sourceMappingURL=studio-client.js.map