@mainarchfn/point-overlay 0.1.0

package/dist/index.js

@@ -0,0 +1,710 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.routeForDocument = exports.relativeSourceFile = exports.inspectElement = void 0;
+exports.mountPaseoOverlay = mountPaseoOverlay;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const point_client_1 = require("@mainarchfn/point-client");
+const react_1 = require("react");
+const client_1 = require("react-dom/client");
+const inspection_1 = require("./inspection");
+var inspection_2 = require("./inspection");
+Object.defineProperty(exports, "inspectElement", { enumerable: true, get: function () { return inspection_2.inspectElement; } });
+Object.defineProperty(exports, "relativeSourceFile", { enumerable: true, get: function () { return inspection_2.relativeSourceFile; } });
+Object.defineProperty(exports, "routeForDocument", { enumerable: true, get: function () { return inspection_2.routeForDocument; } });
+const HOST_ID = "paseo-overlay-host";
+const ROOT_ID = "paseo-overlay-root";
+const OVERLAY_Z_INDEX = "2147483646";
+const NEW_SPACE_VALUE = "__new__";
+function makeId(prefix) {
+    const cryptoObject = globalThis.crypto;
+    if (cryptoObject?.randomUUID)
+        return `${prefix}_${cryptoObject.randomUUID()}`;
+    return `${prefix}_${Date.now()}_${Math.random().toString(36).slice(2)}`;
+}
+function currentNodeEnvironment() {
+    const processLike = globalThis.process;
+    return processLike?.env?.NODE_ENV;
+}
+function createSelectionController(options) {
+    const { document, host, shadowRoot, onSelected, onCancel } = options;
+    const highlight = document.createElement("div");
+    const label = document.createElement("div");
+    highlight.setAttribute("aria-hidden", "true");
+    highlight.style.cssText = [
+        "position:fixed",
+        "display:none",
+        "box-sizing:border-box",
+        "border:2px solid #7c3aed",
+        "background:rgba(124,58,237,.10)",
+        "border-radius:4px",
+        "pointer-events:none",
+        `z-index:${OVERLAY_Z_INDEX}`,
+        "transition:top 80ms ease,left 80ms ease,width 80ms ease,height 80ms ease"
+    ].join(";");
+    label.style.cssText = [
+        "position:absolute",
+        "left:-2px",
+        "top:-28px",
+        "max-width:360px",
+        "padding:5px 8px",
+        "border-radius:5px",
+        "background:#241447",
+        "color:#fff",
+        "font:12px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace",
+        "white-space:nowrap",
+        "overflow:hidden",
+        "text-overflow:ellipsis"
+    ].join(";");
+    highlight.append(label);
+    shadowRoot.append(highlight);
+    let current = null;
+    const isOverlayElement = (element) => element === host || host.contains(element);
+    const updateHighlight = () => {
+        if (!current || !current.isConnected || isOverlayElement(current)) {
+            highlight.style.display = "none";
+            return;
+        }
+        const rectangle = current.getBoundingClientRect();
+        if (rectangle.width === 0 && rectangle.height === 0) {
+            highlight.style.display = "none";
+            return;
+        }
+        const target = (0, inspection_1.inspectElement)(current, document);
+        const source = (0, inspection_1.targetSourceLabel)(target);
+        label.textContent = source
+            ? `${(0, inspection_1.targetLabel)(target)}  ${source}`
+            : (0, inspection_1.targetLabel)(target);
+        highlight.style.display = "block";
+        highlight.style.top = `${rectangle.top}px`;
+        highlight.style.left = `${rectangle.left}px`;
+        highlight.style.width = `${rectangle.width}px`;
+        highlight.style.height = `${rectangle.height}px`;
+    };
+    const elementFromEvent = (event) => {
+        const target = event.target;
+        if (target && target instanceof Element)
+            return target;
+        return null;
+    };
+    const onPointerMove = (event) => {
+        const element = elementFromEvent(event);
+        if (!element || isOverlayElement(element)) {
+            current = null;
+            updateHighlight();
+            return;
+        }
+        current = element;
+        updateHighlight();
+    };
+    const onClick = (event) => {
+        const element = elementFromEvent(event);
+        if (!element || isOverlayElement(element))
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        event.stopImmediatePropagation();
+        onSelected((0, inspection_1.inspectElement)(element, document));
+    };
+    const onKeyDown = (event) => {
+        if (event.key !== "Escape")
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        onCancel();
+    };
+    document.addEventListener("mousemove", onPointerMove, true);
+    document.addEventListener("click", onClick, true);
+    document.addEventListener("keydown", onKeyDown, true);
+    document.addEventListener("scroll", updateHighlight, true);
+    return () => {
+        document.removeEventListener("mousemove", onPointerMove, true);
+        document.removeEventListener("click", onClick, true);
+        document.removeEventListener("keydown", onKeyDown, true);
+        document.removeEventListener("scroll", updateHighlight, true);
+        highlight.remove();
+    };
+}
+function phaseForSession(session) {
+    const runtimeReady = session.runtime?.status === "ready";
+    const changeSetActive = session.activeChangeSetId !== null;
+    if (runtimeReady && !changeSetActive && ["waiting_for_user", "completed", "ready", "failed"].includes(session.status)) {
+        return "ready";
+    }
+    return "working";
+}
+function requestStatusForSession(session) {
+    const latestChangeSet = session.changeSets[session.changeSets.length - 1];
+    if (session.runtime?.status === "failed" || session.runtime?.status === "stopped") {
+        return "error";
+    }
+    if (session.runtime?.status === "starting")
+        return "setup";
+    // A runtime that is up is the source of truth for the application status.
+    // Session/change-set failures describe the previous agent request and must
+    // not make a healthy, reloadable workspace look like a dead app.
+    if (session.runtime?.status === "ready" && !session.activeChangeSetId) {
+        return "ready";
+    }
+    if (session.status === "failed" || latestChangeSet?.status === "failed")
+        return "error";
+    if (latestChangeSet?.status === "queued" || session.status === "creating") {
+        return "setup";
+    }
+    return "working";
+}
+function requestStatusLabel(status, session) {
+    if (status === "setup" && session?.runtime?.status === "starting")
+        return "Starting";
+    return { setup: "Setup", working: "Working", ready: "Ready", error: "Error" }[status];
+}
+function spaceStatus(space) {
+    if (space.runtimeStatus === "failed")
+        return { kind: "error", label: "Failed" };
+    if (space.runtimeStatus === "stopped")
+        return { kind: "error", label: "Stopped" };
+    if (space.runtimeStatus === "starting" || space.status === "creating" || space.status === "working") {
+        return { kind: "working", label: "Working" };
+    }
+    if (space.runtimeStatus === "ready")
+        return { kind: "ready", label: "Ready" };
+    if (space.status === "failed")
+        return { kind: "error", label: "Failed" };
+    return { kind: "idle", label: "No active workspace" };
+}
+function directivePreview(instruction) {
+    return instruction?.trim() || "No directive submitted yet";
+}
+function sessionErrorDetail(session) {
+    const latestChangeSet = session.changeSets[session.changeSets.length - 1];
+    if (session.runtime?.status === "failed") {
+        return "The workspace service is not reachable.";
+    }
+    if (session.runtime?.status === "stopped") {
+        return "The workspace service is stopped.";
+    }
+    if (latestChangeSet?.status === "failed") {
+        return latestChangeSet.error ?? "The previous change set failed.";
+    }
+    if (session.status === "failed")
+        return "The development session is in a failed state.";
+    return undefined;
+}
+function canRestartRuntime(session) {
+    return session.runtime?.status === "failed" || session.runtime?.status === "stopped";
+}
+function SpaceStatusIcon({ space }) {
+    const status = spaceStatus(space);
+    return ((0, jsx_runtime_1.jsx)("span", { className: `paseo-space-status is-${status.kind}`, role: "img", "aria-label": status.label, title: status.label, children: status.kind === "ready" ? "✓" : status.kind === "error" ? "!" : status.kind === "working" ? "·" : "–" }));
+}
+function readableError(error) {
+    if (error instanceof point_client_1.RuntimeIdentityError) {
+        return { summary: "Invalid runtime identity", detail: error.message };
+    }
+    if (error instanceof point_client_1.PaseoNetworkError) {
+        return { summary: "Unable to contact Paseo", detail: error.message };
+    }
+    if (error instanceof point_client_1.PaseoApiError) {
+        const summaries = {
+            RUNTIME_NOT_FOUND: "Invalid runtime identity",
+            RUNTIME_INACTIVE: "The application runtime is not active",
+            WORKTREE_CREATE_FAILED: "Failed to create worktree",
+            RUNTIME_START_FAILED: "Failed to start runtime",
+            AGENT_FAILED: "Agent failed",
+            CHANGE_SET_FAILED: "Change set failed",
+            VALIDATION_ERROR: "The submitted change set is invalid"
+        };
+        return {
+            summary: summaries[error.code] ?? error.message,
+            detail: error.message
+        };
+    }
+    if (error instanceof Error)
+        return { summary: error.message };
+    return { summary: "Paseo request failed" };
+}
+function TargetBadge({ target }) {
+    if (target.type === "page") {
+        return (0, jsx_runtime_1.jsx)("span", { className: "paseo-target-badge", children: "Current page" });
+    }
+    return ((0, jsx_runtime_1.jsxs)("span", { className: "paseo-target-badge", children: [(0, inspection_1.targetLabel)(target), (0, inspection_1.targetSourceLabel)(target) ? ` · ${(0, inspection_1.targetSourceLabel)(target)}` : ""] }));
+}
+function OverlayApp({ client, runtime, document, initiallyOpen = false }) {
+    const [open, setOpen] = (0, react_1.useState)(initiallyOpen);
+    const [selecting, setSelecting] = (0, react_1.useState)(false);
+    const [selectedTarget, setSelectedTarget] = (0, react_1.useState)(null);
+    const [selectedInstruction, setSelectedInstruction] = (0, react_1.useState)("");
+    const [pageInstruction, setPageInstruction] = (0, react_1.useState)("");
+    const [pending, setPending] = (0, react_1.useState)([]);
+    const [phase, setPhase] = (0, react_1.useState)("compose");
+    const [sessionId, setSessionId] = (0, react_1.useState)(runtime.sessionId);
+    const [session, setSession] = (0, react_1.useState)(null);
+    const [spaces, setSpaces] = (0, react_1.useState)([]);
+    const [selectedSpaceId, setSelectedSpaceId] = (0, react_1.useState)(runtime.sessionId ?? NEW_SPACE_VALUE);
+    const [expandedSpaceId, setExpandedSpaceId] = (0, react_1.useState)(null);
+    const [spaceDetails, setSpaceDetails] = (0, react_1.useState)({});
+    const [spaceDetailsError, setSpaceDetailsError] = (0, react_1.useState)(null);
+    const [error, setError] = (0, react_1.useState)(null);
+    const [showChanges, setShowChanges] = (0, react_1.useState)(false);
+    const [restartingSessionId, setRestartingSessionId] = (0, react_1.useState)(null);
+    const [shelfClosing, setShelfClosing] = (0, react_1.useState)(false);
+    const drawerRef = (0, react_1.useRef)(null);
+    const shelfCloseTimerRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        if (!open)
+            return;
+        drawerRef.current?.querySelector(".paseo-input")?.focus();
+    }, [open]);
+    const refreshSession = (0, react_1.useCallback)(async (id) => {
+        try {
+            const next = await client.getDevelopmentSession(id);
+            setSession(next);
+            setPhase(phaseForSession(next));
+            const latestChangeSet = next.changeSets[next.changeSets.length - 1];
+            if (next.runtime?.status === "failed" || next.runtime?.status === "stopped") {
+                setError({ summary: "Working application failed to start" });
+            }
+            else if (next.runtime?.status === "ready" && !next.activeChangeSetId) {
+                setError((current) => current?.summary === "Change set failed" || current?.summary === "Working application failed to start"
+                    ? null
+                    : current);
+            }
+            else if (latestChangeSet?.status === "failed") {
+                setError({
+                    summary: "Change set failed",
+                    detail: latestChangeSet.error
+                });
+            }
+            else if (next.status !== "failed") {
+                setError((current) => current?.summary === "Change set failed" || current?.summary === "Working application failed to start"
+                    ? null
+                    : current);
+            }
+        }
+        catch (requestError) {
+            setError(readableError(requestError));
+        }
+    }, [client]);
+    const restartSessionRuntime = async (id) => {
+        setRestartingSessionId(id);
+        setSelectedSpaceId(id);
+        setSessionId(id);
+        setError(null);
+        setPhase("working");
+        try {
+            await client.restartRuntime(id);
+            await refreshSession(id);
+            await refreshSpaces();
+        }
+        catch (requestError) {
+            setPhase("compose");
+            setError(readableError(requestError));
+        }
+        finally {
+            setRestartingSessionId(null);
+        }
+    };
+    const refreshSpaces = (0, react_1.useCallback)(async () => {
+        try {
+            const next = await client.listDevelopmentSessions();
+            setSpaces(next);
+            if (selectedSpaceId !== NEW_SPACE_VALUE &&
+                !next.some((space) => space.id === selectedSpaceId && space.status !== "closed")) {
+                setSelectedSpaceId(NEW_SPACE_VALUE);
+            }
+        }
+        catch (requestError) {
+            setError(readableError(requestError));
+        }
+    }, [client, selectedSpaceId]);
+    (0, react_1.useEffect)(() => {
+        if (!open)
+            return;
+        void refreshSpaces();
+        const timer = document.defaultView?.setInterval(() => void refreshSpaces(), 1_500);
+        return () => {
+            if (timer !== undefined)
+                document.defaultView?.clearInterval(timer);
+        };
+    }, [document, open, refreshSpaces]);
+    (0, react_1.useEffect)(() => {
+        if (!expandedSpaceId)
+            return;
+        let disposed = false;
+        const refresh = () => {
+            void client
+                .getDevelopmentSession(expandedSpaceId)
+                .then((next) => {
+                if (disposed)
+                    return;
+                setSpaceDetails((current) => ({ ...current, [expandedSpaceId]: next }));
+                setSpaceDetailsError(null);
+            })
+                .catch((requestError) => {
+                if (!disposed)
+                    setSpaceDetailsError(readableError(requestError).summary);
+            });
+        };
+        refresh();
+        const timer = document.defaultView?.setInterval(refresh, 1_000);
+        return () => {
+            disposed = true;
+            if (timer !== undefined)
+                document.defaultView?.clearInterval(timer);
+        };
+    }, [client, document, expandedSpaceId]);
+    (0, react_1.useEffect)(() => {
+        if (!sessionId)
+            return;
+        let disposed = false;
+        const refresh = () => {
+            if (!disposed)
+                void refreshSession(sessionId);
+        };
+        refresh();
+        // The overlay only needs the current projection. Polling avoids presenting
+        // an implementation event log as the request's user-facing state.
+        const timer = document.defaultView?.setInterval(refresh, 750);
+        return () => {
+            disposed = true;
+            if (timer !== undefined)
+                document.defaultView?.clearInterval(timer);
+        };
+    }, [document, refreshSession, sessionId]);
+    (0, react_1.useEffect)(() => {
+        if (!selecting)
+            return;
+        const host = document.getElementById(HOST_ID);
+        const shadowRoot = host?.shadowRoot;
+        if (!host || !shadowRoot)
+            return;
+        return createSelectionController({
+            document,
+            host,
+            shadowRoot,
+            onSelected: (target) => {
+                setSelectedTarget(target);
+                setSelectedInstruction("");
+                setSelecting(false);
+                if (shelfCloseTimerRef.current !== null) {
+                    window.clearTimeout(shelfCloseTimerRef.current);
+                    shelfCloseTimerRef.current = null;
+                }
+                setShelfClosing(false);
+                setOpen(true);
+            },
+            onCancel: () => {
+                setSelecting(false);
+                setShelfClosing(false);
+                setOpen(false);
+            }
+        });
+    }, [document, selecting]);
+    const addSelectedDirective = () => {
+        const instruction = selectedInstruction.trim();
+        if (!selectedTarget || !instruction)
+            return;
+        setPending((current) => [
+            ...current,
+            { instruction, target: selectedTarget }
+        ]);
+        setSelectedTarget(null);
+        setSelectedInstruction("");
+        setError(null);
+    };
+    const startSelection = () => {
+        setError(null);
+        setSelecting(true);
+        setShelfClosing(true);
+        if (shelfCloseTimerRef.current !== null)
+            window.clearTimeout(shelfCloseTimerRef.current);
+        shelfCloseTimerRef.current = window.setTimeout(() => {
+            setOpen(false);
+            setShelfClosing(false);
+            shelfCloseTimerRef.current = null;
+        }, 160);
+    };
+    const submit = async () => {
+        const directives = [...pending];
+        const instruction = pageInstruction.trim();
+        if (instruction) {
+            directives.push({
+                instruction,
+                target: {
+                    type: "page",
+                    route: (0, inspection_1.routeForDocument)(document),
+                    documentTitle: document.title || undefined
+                }
+            });
+        }
+        if (!directives.length) {
+            setError({ summary: "Add an instruction before submitting" });
+            return;
+        }
+        setPhase("submitting");
+        setError(null);
+        try {
+            const result = await client.createChangeSet({
+                runtimeId: runtime.runtimeId,
+                developmentSessionId: selectedSpaceId === NEW_SPACE_VALUE ? null : selectedSpaceId,
+                route: (0, inspection_1.routeForDocument)(document),
+                directives
+            });
+            setPending([]);
+            setPageInstruction("");
+            setSessionId(result.developmentSessionId);
+            setSelectedSpaceId(result.developmentSessionId);
+            void refreshSpaces();
+            setPhase("working");
+        }
+        catch (requestError) {
+            setPhase("compose");
+            setError(readableError(requestError));
+        }
+    };
+    const openSessionRuntime = (nextSession) => {
+        if (!nextSession.runtime || nextSession.runtime.status !== "ready")
+            return;
+        const currentUrl = document.defaultView?.location.href;
+        const url = (0, point_client_1.appendRuntimeContext)((0, point_client_1.constructWorkingRuntimeUrl)(nextSession.runtime, currentUrl), {
+            controlPlaneUrl: runtime.controlPlaneUrl,
+            ...(runtime.defaultRuntimeUrl ? { defaultRuntimeUrl: runtime.defaultRuntimeUrl } : {}),
+            projectId: nextSession.runtime.projectId ?? runtime.projectId,
+            runtimeId: nextSession.runtime.id,
+            sessionId: nextSession.runtime.developmentSessionId ?? nextSession.id,
+            checkoutKind: nextSession.runtime.checkoutKind ?? "worktree",
+            ...(nextSession.runtime.branch ? { branch: nextSession.runtime.branch } : {})
+        });
+        document.defaultView?.location.assign(url);
+    };
+    const openWorkingVersion = () => {
+        if (!session?.runtime || session.runtime.status !== "ready")
+            return;
+        openSessionRuntime(session);
+    };
+    const activeRuntime = session?.runtime;
+    const canOpenWorkingVersion = activeRuntime?.status === "ready" &&
+        activeRuntime.id !== runtime.runtimeId;
+    const requestStatus = session
+        ? requestStatusForSession(session)
+        : phase === "compose"
+            ? "working"
+            : "setup";
+    const activeSpaces = spaces.filter((space) => space.status !== "closed");
+    const selectSpace = (nextSpaceId) => {
+        setSelectedSpaceId(nextSpaceId);
+        setError(null);
+    };
+    const toggleSpaceDetails = (spaceId) => {
+        selectSpace(spaceId);
+        setSpaceDetailsError(null);
+        setExpandedSpaceId((current) => current === spaceId ? null : spaceId);
+    };
+    const openSpace = (space) => {
+        if (space.runtimeStatus !== "ready")
+            return;
+        selectSpace(space.id);
+        void client
+            .getDevelopmentSession(space.id)
+            .then((nextSession) => {
+            setSpaceDetails((current) => ({ ...current, [space.id]: nextSession }));
+            openSessionRuntime(nextSession);
+        })
+            .catch((requestError) => setError(readableError(requestError)));
+    };
+    const startNewSpace = () => {
+        selectSpace(NEW_SPACE_VALUE);
+        setExpandedSpaceId(null);
+        setSpaceDetailsError(null);
+        setSessionId(null);
+        setSession(null);
+        setPending([]);
+        setPageInstruction("");
+        setSelectedTarget(null);
+        setSelectedInstruction("");
+        setPhase("compose");
+        setError(null);
+        setShowChanges(false);
+        if (runtime.checkoutKind === "worktree") {
+            if (runtime.defaultRuntimeUrl) {
+                document.defaultView?.location.assign(runtime.defaultRuntimeUrl);
+            }
+            else {
+                setError({
+                    summary: "Open the baseline app to create a new space",
+                    detail: "This working space does not have a default runtime URL configured."
+                });
+            }
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("style", { children: `
+        :host { all: initial; }
+        * { box-sizing: border-box; }
+        .paseo-shell { position: fixed; inset: 0; z-index: ${OVERLAY_Z_INDEX}; pointer-events: none; color: #f7f5ff; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 14px; }
+        .paseo-fab { pointer-events: auto; position: fixed; right: 20px; bottom: 20px; width: 46px; height: 46px; border: 0; border-radius: 999px; background: #6d28d9; color: white; box-shadow: 0 8px 24px rgba(34, 17, 66, .32); cursor: pointer; font: 700 15px/1 system-ui, sans-serif; transition: transform 160ms ease, background 160ms ease; }
+        .paseo-fab:hover { background: #5b21b6; transform: scale(1.04); }
+        .paseo-fab:focus-visible, .paseo-shelf button:focus-visible { outline: 3px solid #c4b5fd; outline-offset: 2px; }
+        .paseo-shelf input:focus-visible { outline: 2px solid #594477; outline-offset: 1px; }
+        .paseo-shelf { pointer-events: auto; position: fixed; right: 20px; bottom: 20px; display: grid; gap: 7px; width: min(420px, calc(100vw - 40px)); max-height: calc(100vh - 40px); overflow: visible; padding: 7px; border: 1px solid #3d2d59; border-radius: 14px; background: #171122; color: #f7f5ff; box-shadow: 0 12px 38px rgba(15, 7, 30, .42); transition: opacity 160ms ease, transform 160ms ease; }
+        .paseo-shelf.is-closing { pointer-events: none; opacity: 0; transform: translateY(7px) scale(.98); }
+        .paseo-shelf-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; width: 100%; animation: paseo-shelf-in 180ms ease-out both; }
+        .paseo-shelf-top:empty { display: none; }
+        .paseo-spaces-heading { color: #f0eaff; font-size: 12px; font-weight: 750; }
+        .paseo-new-space { border: 0; padding: 2px 4px; background: transparent; color: #c4b5fd; cursor: pointer; font: 650 11px/1.2 inherit; }
+        .paseo-new-space:hover { color: #fff; }
+        .paseo-changes-trigger { overflow: hidden; max-width: 185px; height: 28px; border: 1px solid #594477; border-radius: 7px; padding: 0 9px; background: #281a3c; color: #d9cfea; cursor: pointer; font: 650 11px/1 inherit; text-overflow: ellipsis; white-space: nowrap; box-shadow: 0 7px 22px rgba(15, 7, 30, .2); }
+        .paseo-changes-trigger:hover, .paseo-icon-button:hover { background: #35214f; }
+        .paseo-space-list { display: grid; gap: 4px; max-height: min(42vh, 320px); overflow: auto; padding-right: 1px; }
+        .paseo-space-row { display: grid; grid-template-columns: 18px minmax(0, 1fr) 30px; align-items: center; gap: 7px; min-width: 0; padding: 7px 6px; border: 1px solid #302244; border-radius: 8px; background: #1e152c; color: #eee7fa; cursor: pointer; text-align: left; }
+        .paseo-space-row:hover, .paseo-space-row.is-selected { border-color: #594477; background: #251936; }
+        .paseo-space-row:focus-visible { outline: 3px solid #c4b5fd; outline-offset: 1px; }
+        .paseo-space-status { display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 999px; font: 800 12px/1 system-ui, sans-serif; }
+        .paseo-space-status.is-ready { background: #245b42; color: #baf1ce; }
+        .paseo-space-status.is-working { background: #49356c; color: #decfff; }
+        .paseo-space-status.is-working::first-letter { animation: paseo-status-pulse 1s ease-in-out infinite; }
+        .paseo-space-status.is-error { background: #71324b; color: #ffd4df; }
+        .paseo-space-status.is-idle { background: #3a3044; color: #b9abc9; }
+        .paseo-space-copy { min-width: 0; }
+        .paseo-space-directive { display: block; overflow: hidden; margin-top: 2px; color: #a99bb9; font-size: 11px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
+        .paseo-space-open { display: inline-grid; place-items: center; width: 28px; height: 28px; border: 1px solid #594477; border-radius: 7px; background: #281a3c; color: #f7f5ff; cursor: pointer; }
+        .paseo-space-open:hover { background: #35214f; }
+        .paseo-space-open:disabled { cursor: not-allowed; opacity: .35; }
+        .paseo-space-details { grid-column: 1 / -1; margin: 1px 0 0 24px; padding: 7px 8px 2px; border-top: 1px solid #302244; color: #c7bdd6; font-size: 11px; line-height: 1.35; }
+        .paseo-space-detail-line { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 5px; }
+        .paseo-space-detail-line strong { color: #f0eaff; font-weight: 650; }
+        .paseo-space-detail-directive { margin: 0 0 5px; color: #d9cfea; overflow-wrap: anywhere; }
+        .paseo-space-empty { margin: 0; padding: 4px 2px; }
+        .paseo-shelf-bar { display: flex; align-items: center; gap: 5px; width: 100%; min-height: 46px; padding: 5px; border: 1px solid #3d2d59; border-radius: 12px; background: #100b18; animation: paseo-shelf-in 180ms ease-out both; }
+        .paseo-input { flex: 1 1 auto; width: 1px; height: 34px; min-width: 0; border: 1px solid #302244; border-radius: 8px; padding: 0 10px; background: #100b18; color: #fff; font: 13px/34px inherit; }
+        .paseo-input::placeholder { color: #897b9c; }
+        .paseo-icon-button { display: inline-grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; border: 1px solid #594477; border-radius: 8px; background: #281a3c; color: #f7f5ff; cursor: pointer; font: 800 16px/1 inherit; }
+        .paseo-icon-button.primary { border-color: #7c3aed; background: #6d28d9; }
+        .paseo-icon-button.primary:hover { background: #7c3aed; }
+        .paseo-icon-button:disabled { cursor: not-allowed; opacity: .45; }
+        .paseo-icon-button.paseo-close-button { font-size: 20px; font-weight: 900; line-height: .8; }
+        .paseo-close { border: 0; background: transparent; color: #c7bdd6; cursor: pointer; font-size: 20px; line-height: 1; }
+        .paseo-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
+        .paseo-popover { width: 100%; max-height: min(60vh, 430px); overflow: auto; padding: 4px; border: 1px solid #4b3965; border-radius: 11px; background: #171122; box-shadow: 0 8px 24px rgba(15, 7, 30, .3); animation: paseo-popover-in 140ms ease-out both; }
+        .paseo-popover-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; color: #f0eaff; font-size: 12px; font-weight: 750; }
+        .paseo-popover-header span { color: #a99bb9; font-size: 11px; font-weight: 500; }
+        .paseo-target-list { display: grid; gap: 6px; }
+        .paseo-target-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; min-width: 0; padding: 8px 9px; border: 1px solid #302244; border-radius: 8px; background: #1e152c; }
+        .paseo-target-copy { min-width: 0; color: #d9cfea; font-size: 12px; line-height: 1.35; }
+        .paseo-target-badge { display: block; overflow: hidden; margin-bottom: 2px; color: #c4b5fd; font-size: 10px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
+        .paseo-remove { flex: 0 0 auto; border: 0; background: transparent; color: #a99bb9; cursor: pointer; padding: 0 2px; }
+        .paseo-popover-actions { display: flex; align-items: center; gap: 7px; margin-top: 9px; }
+        .paseo-button { border: 1px solid #594477; border-radius: 8px; padding: 7px 10px; background: #281a3c; color: #f7f5ff; cursor: pointer; font: 650 12px/1.2 inherit; }
+        .paseo-button:hover { background: #35214f; }
+        .paseo-button.primary { border-color: #7c3aed; background: #6d28d9; }
+        .paseo-button.primary:hover { background: #7c3aed; }
+        .paseo-button:disabled { cursor: not-allowed; opacity: .55; }
+        .paseo-status-line { display: flex; justify-content: space-between; gap: 12px; padding-top: 8px; margin-top: 9px; border-top: 1px solid #302244; color: #b9abc9; font-size: 11px; }
+        .paseo-status-line strong { min-width: 0; overflow: hidden; color: #f0eaff; text-align: right; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
+        .paseo-error { margin-top: 8px; padding: 8px 9px; border: 1px solid #9f3f5b; border-radius: 8px; background: #351522; color: #ffd9e2; font-size: 12px; }
+        .paseo-error strong { display: block; }
+        .paseo-error button { border: 0; margin-top: 4px; padding: 0; background: transparent; color: #f5a9bd; cursor: pointer; text-decoration: underline; }
+        .paseo-error-details { margin-top: 5px; }
+        .paseo-error-details summary { color: #f5a9bd; cursor: pointer; }
+        .paseo-error-details p { margin: 5px 0 0; }
+        .paseo-error-action { border: 1px solid #c45a76 !important; border-radius: 6px; padding: 5px 8px !important; color: #ffe8ee !important; text-decoration: none !important; }
+        .paseo-error pre { max-height: 130px; overflow: auto; margin: 7px 0 0; white-space: pre-wrap; font: 11px/1.35 ui-monospace, monospace; }
+        .paseo-ready, .paseo-working { margin-top: 8px; padding: 8px 9px; border-radius: 8px; font-size: 12px; }
+        .paseo-ready { border: 1px solid #367a59; background: #10271c; color: #c8f5d7; }
+        .paseo-working { border: 1px solid #594477; background: #20142f; color: #e5d8f5; }
+        .paseo-hint { margin: 5px 0 0; color: #b9abc9; font-size: 11px; line-height: 1.4; }
+        @keyframes paseo-shelf-in { from { opacity: 0; transform: translateY(7px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
+        @keyframes paseo-status-pulse { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
+        @keyframes paseo-popover-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
+        @media (prefers-reduced-motion: reduce) { .paseo-shelf-top, .paseo-shelf-bar, .paseo-popover { animation: none; } }
+        @media (max-width: 480px) { .paseo-shelf { right: 12px; bottom: 12px; width: calc(100vw - 24px); } .paseo-fab { right: 12px; bottom: 12px; } }
+      ` }), (0, jsx_runtime_1.jsxs)("div", { className: "paseo-shell", children: [(0, jsx_runtime_1.jsx)("button", { className: "paseo-fab", type: "button", "aria-label": open ? "Close Paseo shelf" : "Open Paseo shelf", "aria-expanded": open, onClick: () => {
+                            setOpen((current) => !current);
+                            setShowChanges(false);
+                        }, children: "P" }), open ? ((0, jsx_runtime_1.jsxs)("aside", { className: `paseo-shelf${shelfClosing ? " is-closing" : ""}`, ref: (element) => {
+                            drawerRef.current = element;
+                        }, "aria-label": "Paseo development overlay", role: "dialog", "aria-modal": "false", children: [showChanges ? ((0, jsx_runtime_1.jsxs)("div", { className: "paseo-popover", role: "dialog", "aria-label": "Pending changes", children: [(0, jsx_runtime_1.jsxs)("div", { className: "paseo-popover-header", children: [(0, jsx_runtime_1.jsx)("div", { children: "Pending changes" }), (0, jsx_runtime_1.jsxs)("span", { children: [pending.length, " ", pending.length === 1 ? "item" : "items"] })] }), pending.length ? ((0, jsx_runtime_1.jsx)("div", { className: "paseo-target-list", children: pending.map((directive, index) => ((0, jsx_runtime_1.jsxs)("div", { className: "paseo-target-row", children: [(0, jsx_runtime_1.jsxs)("div", { className: "paseo-target-copy", children: [(0, jsx_runtime_1.jsx)(TargetBadge, { target: directive.target }), (0, jsx_runtime_1.jsx)("div", { children: directive.instruction })] }), (0, jsx_runtime_1.jsx)("button", { className: "paseo-remove", type: "button", "aria-label": `Remove directive ${index + 1}`, onClick: () => setPending((current) => current.filter((_, item) => item !== index)), children: "\u00D7" })] }, `${directive.instruction}-${index}`))) })) : (0, jsx_runtime_1.jsx)("p", { className: "paseo-hint", children: "No pending changes." }), (0, jsx_runtime_1.jsxs)("div", { className: "paseo-popover-actions", children: [(0, jsx_runtime_1.jsx)("button", { className: "paseo-button primary", type: "button", onClick: () => void submit(), disabled: !pending.length || phase === "submitting", children: phase === "submitting" ? "Submitting…" : "Submit change set" }), (0, jsx_runtime_1.jsx)("button", { className: "paseo-button", type: "button", onClick: () => setShowChanges(false), children: "Done" })] }), sessionId && (phase === "working" || phase === "ready") ? ((0, jsx_runtime_1.jsxs)("div", { className: "paseo-status-line", "aria-live": "polite", children: [(0, jsx_runtime_1.jsx)("span", { children: requestStatus === "error" ? "View details" : requestStatusLabel(requestStatus, session) }), (0, jsx_runtime_1.jsx)("strong", { children: session?.branch ?? sessionId })] })) : null, requestStatus === "ready" && canOpenWorkingVersion ? ((0, jsx_runtime_1.jsx)("button", { className: "paseo-button primary", style: { width: "100%", marginTop: 8 }, type: "button", onClick: openWorkingVersion, children: "Open working version" })) : null, requestStatus === "error" ? ((0, jsx_runtime_1.jsxs)("div", { className: "paseo-error", role: "alert", children: [(0, jsx_runtime_1.jsx)("strong", { children: session?.runtime?.status === "failed" || session?.runtime?.status === "stopped"
+                                                    ? "Workspace service unavailable"
+                                                    : "Change set failed" }), (0, jsx_runtime_1.jsxs)("details", { className: "paseo-error-details", children: [(0, jsx_runtime_1.jsx)("summary", { children: "View error details" }), (0, jsx_runtime_1.jsx)("p", { children: error?.detail ?? (session ? sessionErrorDetail(session) : "The working application failed.") })] }), session && canRestartRuntime(session) ? ((0, jsx_runtime_1.jsx)("button", { className: "paseo-error-action", type: "button", onClick: () => void restartSessionRuntime(session.id), disabled: restartingSessionId === session.id, children: restartingSessionId === session.id ? "Starting service…" : "Start service" })) : null] })) : null] })) : null, (0, jsx_runtime_1.jsxs)("div", { className: "paseo-shelf-top", children: [(0, jsx_runtime_1.jsx)("span", { className: "paseo-spaces-heading", children: "Spaces" }), (0, jsx_runtime_1.jsx)("button", { className: "paseo-new-space", type: "button", onClick: startNewSpace, disabled: phase === "submitting", children: runtime.checkoutKind === "worktree" ? "Back to main app" : "+ Add space" }), pending.length ? ((0, jsx_runtime_1.jsxs)("button", { className: "paseo-changes-trigger", type: "button", "aria-expanded": showChanges, onClick: () => setShowChanges((current) => !current), children: [pending.length, " pending ", pending.length === 1 ? "change" : "changes"] })) : null] }), (0, jsx_runtime_1.jsx)("div", { className: "paseo-space-list", "aria-label": "Spaces", children: activeSpaces.length ? activeSpaces.map((space) => {
+                                    const details = spaceDetails[space.id];
+                                    const latest = details?.changeSets[details.changeSets.length - 1];
+                                    const expanded = expandedSpaceId === space.id;
+                                    return ((0, jsx_runtime_1.jsxs)("div", { className: `paseo-space-row${selectedSpaceId === space.id ? " is-selected" : ""}`, role: "button", tabIndex: 0, "aria-expanded": expanded, onClick: () => toggleSpaceDetails(space.id), onKeyDown: (event) => {
+                                            if (event.key === "Enter" || event.key === " ") {
+                                                event.preventDefault();
+                                                toggleSpaceDetails(space.id);
+                                            }
+                                        }, children: [(0, jsx_runtime_1.jsx)(SpaceStatusIcon, { space: space }), (0, jsx_runtime_1.jsx)("div", { className: "paseo-space-copy", children: (0, jsx_runtime_1.jsx)("span", { className: "paseo-space-directive", title: directivePreview(space.latestDirective), children: directivePreview(space.latestDirective) }) }), (0, jsx_runtime_1.jsx)("button", { className: "paseo-space-open", type: "button", "aria-label": "Open space", title: space.runtimeStatus === "ready" ? "Open workspace" : "Workspace is not active", disabled: space.runtimeStatus !== "ready" || phase === "submitting", onClick: (event) => {
+                                                    event.stopPropagation();
+                                                    openSpace(space);
+                                                }, children: (0, jsx_runtime_1.jsxs)("svg", { width: "15", height: "15", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [(0, jsx_runtime_1.jsx)("path", { d: "M2.5 12s3.5-6 9.5-6 9.5 6 9.5 6-3.5 6-9.5 6-9.5-6-9.5-6Z" }), (0, jsx_runtime_1.jsx)("circle", { cx: "12", cy: "12", r: "2.5" })] }) }), expanded ? ((0, jsx_runtime_1.jsxs)("div", { className: "paseo-space-details", children: [spaceDetailsError && !details ? (0, jsx_runtime_1.jsx)("div", { children: spaceDetailsError }) : null, !details && !spaceDetailsError ? (0, jsx_runtime_1.jsx)("div", { children: "Loading details\u2026" }) : null, details ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "paseo-space-detail-line", children: [(0, jsx_runtime_1.jsx)("span", { children: "Step" }), (0, jsx_runtime_1.jsx)("strong", { children: requestStatusForSession(details) === "error" ? "View details" : requestStatusLabel(requestStatusForSession(details), details) })] }), (0, jsx_runtime_1.jsx)("p", { className: "paseo-space-detail-directive", children: latest?.directives[0]?.instruction ?? "No directive submitted yet" }), requestStatusForSession(details) === "error" ? ((0, jsx_runtime_1.jsxs)("div", { className: "paseo-error", role: "alert", children: [(0, jsx_runtime_1.jsx)("strong", { children: "Workspace service unavailable" }), (0, jsx_runtime_1.jsxs)("details", { className: "paseo-error-details", children: [(0, jsx_runtime_1.jsx)("summary", { children: "View error details" }), (0, jsx_runtime_1.jsx)("p", { children: sessionErrorDetail(details) ?? "The working application failed." })] }), canRestartRuntime(details) ? ((0, jsx_runtime_1.jsx)("button", { className: "paseo-error-action", type: "button", onClick: (event) => {
+                                                                            event.stopPropagation();
+                                                                            void restartSessionRuntime(details.id);
+                                                                        }, disabled: restartingSessionId === details.id, children: restartingSessionId === details.id ? "Starting service…" : "Start service" })) : null] })) : null] })) : null] })) : null] }, space.id));
+                                }) : ((0, jsx_runtime_1.jsx)("p", { className: "paseo-hint paseo-space-empty", children: "No spaces yet. Submit a change to create one." })) }), (0, jsx_runtime_1.jsxs)("div", { className: "paseo-shelf-bar", children: [selectedTarget ? ((0, jsx_runtime_1.jsx)("input", { id: "paseo-element-instruction", className: "paseo-input", value: selectedInstruction, onChange: (event) => setSelectedInstruction(event.target.value), onKeyDown: (event) => {
+                                            if (event.key === "Enter")
+                                                addSelectedDirective();
+                                        }, "aria-label": `Instruction for ${(0, inspection_1.targetLabel)(selectedTarget)}`, placeholder: `Change ${(0, inspection_1.targetLabel)(selectedTarget)}`, disabled: phase === "submitting" })) : ((0, jsx_runtime_1.jsx)("input", { id: "paseo-page-instruction", className: "paseo-input", value: pageInstruction, onChange: (event) => setPageInstruction(event.target.value), onKeyDown: (event) => {
+                                            if (event.key === "Enter")
+                                                void submit();
+                                        }, "aria-label": "Instruction for this page", placeholder: "Describe a change\u2026", disabled: phase === "submitting" })), selectedTarget ? (0, jsx_runtime_1.jsxs)("span", { className: "paseo-visually-hidden", children: ["Selected element: ", (0, inspection_1.targetLabel)(selectedTarget)] }) : null, selectedTarget ? ((0, jsx_runtime_1.jsx)("button", { className: "paseo-icon-button primary", type: "button", "aria-label": "Add selected element to pending changes", onClick: addSelectedDirective, disabled: !selectedInstruction.trim() || phase === "submitting", children: "+" })) : ((0, jsx_runtime_1.jsxs)("button", { className: "paseo-icon-button", type: "button", "aria-label": "Select element", title: "Select element", onClick: startSelection, disabled: phase === "submitting", children: [(0, jsx_runtime_1.jsx)("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: (0, jsx_runtime_1.jsx)("path", { d: "M5 3.5 19.5 12l-6.7 1.1 3.5 6.1-2.3 1.3-3.5-6.1L5 19.5V3.5Z", fill: "currentColor" }) }), (0, jsx_runtime_1.jsx)("span", { className: "paseo-visually-hidden", children: "Select Element" })] })), (0, jsx_runtime_1.jsx)("button", { className: "paseo-icon-button paseo-close-button", type: "button", "aria-label": selectedTarget ? "Cancel selected element" : "Close Paseo shelf", title: selectedTarget ? "Cancel" : "Close", onClick: () => {
+                                            if (selectedTarget) {
+                                                setSelectedTarget(null);
+                                                setSelectedInstruction("");
+                                            }
+                                            else {
+                                                setOpen(false);
+                                                setShowChanges(false);
+                                            }
+                                        }, children: "\u00D7" })] }), error && (!session || requestStatus !== "error") ? ((0, jsx_runtime_1.jsxs)("div", { className: "paseo-error", role: "alert", children: [(0, jsx_runtime_1.jsx)("strong", { children: error.summary }), error.detail ? ((0, jsx_runtime_1.jsxs)("details", { className: "paseo-error-details", children: [(0, jsx_runtime_1.jsx)("summary", { children: "View error details" }), (0, jsx_runtime_1.jsx)("p", { children: error.detail })] })) : null] })) : null] })) : null] })] }));
+}
+function ensureStyleRoot(shadowRoot) {
+    const root = shadowRoot.querySelector(`#${ROOT_ID}`);
+    if (root)
+        return;
+    const container = shadowRoot.ownerDocument.createElement("div");
+    container.id = ROOT_ID;
+    container.style.pointerEvents = "none";
+    shadowRoot.append(container);
+}
+function mountPaseoOverlay(options = {}) {
+    if (options.enabled === false || currentNodeEnvironment() === "production") {
+        return null;
+    }
+    const document = options.document ?? (typeof globalThis.document !== "undefined" ? globalThis.document : undefined);
+    if (!document?.body)
+        return null;
+    let client;
+    try {
+        client = options.client ?? (0, point_client_1.createPaseoClient)({ runtime: options.runtime });
+    }
+    catch {
+        // The overlay fails closed until the application's explicit bootstrap is present.
+        return null;
+    }
+    const runtime = client.getRuntime();
+    const existing = document.getElementById(HOST_ID);
+    if (existing)
+        return null;
+    const host = document.createElement("div");
+    host.id = HOST_ID;
+    host.setAttribute("data-paseo-overlay", "true");
+    host.style.cssText = `position:fixed;inset:0;z-index:${OVERLAY_Z_INDEX};pointer-events:none;`;
+    const shadowRoot = host.attachShadow({ mode: "open" });
+    ensureStyleRoot(shadowRoot);
+    document.body.append(host);
+    const rootContainer = shadowRoot.querySelector(`#${ROOT_ID}`);
+    if (!rootContainer) {
+        host.remove();
+        return null;
+    }
+    const root = (0, client_1.createRoot)(rootContainer);
+    root.render((0, jsx_runtime_1.jsx)(OverlayApp, { client: client, runtime: runtime, document: document, initiallyOpen: options.initiallyOpen }));
+    return {
+        host,
+        unmount() {
+            root.unmount();
+            host.remove();
+        }
+    };
+}
+exports.default = mountPaseoOverlay;
+//# sourceMappingURL=index.js.map