@pack/react 4.4.0 → 4.6.0

package/dist/pack/preview-toolbar.js

@@ -0,0 +1,730 @@
+import { useCallback, useEffect, useId, useLayoutEffect, useRef, useState, useSyncExternalStore, } from "react";
+import * as React from "react";
+const useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
+const PREVIEW_TOOLBAR_DOCK_KEY = "pack-preview-toolbar-dock";
+const TOOLBAR_EDGE_MARGIN = 16;
+const TOOLBAR_PILL_SIZE = 48;
+const TOOLBAR_PANEL_GAP = 12;
+const TOOLBAR_DRAG_THRESHOLD = 4;
+const TOOLBAR_PILL_TRANSITION_MS = 220;
+const TOOLBAR_MIN_TAP_TARGET = 44;
+const DEFAULT_TOOLBAR_DOCK = { edge: "bottom", offset: 0.5 };
+const Eye = (props) => (React.createElement("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", ...props },
+    React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M2.75 12c0-.338.136-.905.493-1.591a7.858 7.858 0 0 1 1.64-2.108C6.374 6.926 8.694 5.75 12 5.75c3.308 0 5.627 1.176 7.116 2.551a7.86 7.86 0 0 1 1.64 2.108c.358.686.494 1.253.494 1.591 0 .338-.136.905-.493 1.591a7.86 7.86 0 0 1-1.64 2.108c-1.49 1.375-3.81 2.551-7.117 2.551-3.308 0-5.627-1.176-7.116-2.551a7.858 7.858 0 0 1-1.64-2.108c-.358-.686-.494-1.253-.494-1.591ZM12 4.25c-3.692 0-6.373 1.324-8.134 2.949a9.356 9.356 0 0 0-1.953 2.517c-.424.814-.663 1.622-.663 2.284 0 .662.24 1.47.663 2.284a9.356 9.356 0 0 0 1.953 2.517C5.627 18.426 8.308 19.75 12 19.75s6.373-1.324 8.134-2.949a9.356 9.356 0 0 0 1.953-2.517c.424-.814.663-1.622.663-2.284 0-.662-.24-1.47-.663-2.284a9.355 9.355 0 0 0-1.953-2.517C18.373 5.574 15.692 4.25 12 4.25ZM9.75 12a2.25 2.25 0 1 1 4.5 0 2.25 2.25 0 0 1-4.5 0ZM12 8.25a3.75 3.75 0 1 0 0 7.5 3.75 3.75 0 0 0 0-7.5Z", fill: "currentColor" })));
+function getPreviewContextLabel(previewContext) {
+    if (previewContext?.linkName) {
+        return `preview link: ${previewContext.linkName}`;
+    }
+    if (previewContext?.releaseName) {
+        return `content release: ${previewContext.releaseName}`;
+    }
+    return previewContext?.releaseId ? "content release" : undefined;
+}
+export function buildPreviewDetails(environment, previewContext) {
+    const details = [];
+    if (previewContext?.linkName) {
+        details.push({ label: "Preview link", value: previewContext.linkName });
+    }
+    if (previewContext?.releaseName || previewContext?.releaseId) {
+        details.push({
+            label: "Content release",
+            value: previewContext.releaseName || "Active",
+        });
+    }
+    if (environment) {
+        details.push({ label: "Environment", value: environment });
+    }
+    if (previewContext?.locale) {
+        details.push({ label: "Locale", value: previewContext.locale });
+    }
+    // Backpack uses a lone `control` variant as a neutral preview fallback.
+    // Only describe an A/B test when the preview carries a complete test context.
+    if (previewContext?.testHandle && previewContext.testVariantHandle) {
+        details.push({
+            label: "A/B test",
+            value: `${previewContext.testHandle} · ${previewContext.testVariantHandle}`,
+        });
+    }
+    if (previewContext?.pageDraft) {
+        details.push({ label: "Page draft", value: previewContext.pageDraft });
+    }
+    if (previewContext?.siteSettingsDraft) {
+        details.push({
+            label: "Site settings",
+            value: previewContext.siteSettingsDraft,
+        });
+    }
+    return details;
+}
+export function buildPreviewSummary(environment, previewContext) {
+    const parts = [];
+    const contextLabel = getPreviewContextLabel(previewContext);
+    if (contextLabel)
+        parts.push(contextLabel);
+    if (environment)
+        parts.push(environment);
+    if (previewContext?.locale)
+        parts.push(previewContext.locale);
+    if (previewContext?.testHandle && previewContext.testVariantHandle) {
+        parts.push(`test: ${previewContext.testVariantHandle}`);
+    }
+    if (previewContext?.pageDraft) {
+        parts.push(`page: ${previewContext.pageDraft}`);
+    }
+    if (previewContext?.siteSettingsDraft) {
+        parts.push(`settings: ${previewContext.siteSettingsDraft}`);
+    }
+    // This is a tooltip and accessible label, not visible pill text. Keep the
+    // full context available without requiring the user to open the panel.
+    return parts.length > 0 ? parts.join(" · ") : "Preview mode";
+}
+// Whether this document is the top-level window is fixed for its lifetime, so
+// there is nothing to subscribe to. `useSyncExternalStore` is used purely as a
+// hydration-safe client-only gate: the server snapshot is `false`, and React
+// re-renders once after hydration when the client snapshot differs.
+function canShowPreviewToolbar() {
+    if (typeof window === "undefined")
+        return false;
+    try {
+        return window.self === window.top;
+    }
+    catch {
+        return false;
+    }
+}
+function subscribeToNothing() {
+    return () => { };
+}
+function getServerSnapshot() {
+    return false;
+}
+function clamp(value, min, max) {
+    return Math.min(Math.max(value, min), max);
+}
+function isVerticalEdge(edge) {
+    return edge === "left" || edge === "right";
+}
+function getViewport() {
+    if (typeof window === "undefined")
+        return { width: 0, height: 0 };
+    return { width: window.innerWidth, height: window.innerHeight };
+}
+function getStoredDock() {
+    if (typeof window === "undefined")
+        return DEFAULT_TOOLBAR_DOCK;
+    try {
+        const raw = window.localStorage.getItem(PREVIEW_TOOLBAR_DOCK_KEY);
+        if (!raw)
+            return DEFAULT_TOOLBAR_DOCK;
+        const parsed = JSON.parse(raw);
+        const isEdge = parsed.edge === "top" ||
+            parsed.edge === "right" ||
+            parsed.edge === "bottom" ||
+            parsed.edge === "left";
+        if (isEdge &&
+            typeof parsed.offset === "number" &&
+            parsed.offset >= 0 &&
+            parsed.offset <= 1) {
+            return { edge: parsed.edge, offset: parsed.offset };
+        }
+    }
+    catch {
+        // Ignore unavailable or malformed local storage.
+    }
+    return DEFAULT_TOOLBAR_DOCK;
+}
+function setStoredDock(dock) {
+    if (typeof window === "undefined")
+        return;
+    try {
+        window.localStorage.setItem(PREVIEW_TOOLBAR_DOCK_KEY, JSON.stringify(dock));
+    }
+    catch {
+        // Dock persistence is optional.
+    }
+}
+function getDockedPosition(dock, viewport) {
+    const size = TOOLBAR_PILL_SIZE;
+    if (isVerticalEdge(dock.edge)) {
+        const left = dock.edge === "left" ? 0 : Math.max(0, viewport.width - size);
+        const top = clamp(dock.offset * viewport.height - size / 2, 0, Math.max(0, viewport.height - size));
+        return { left, top };
+    }
+    const top = dock.edge === "top" ? 0 : Math.max(0, viewport.height - size);
+    const left = clamp(dock.offset * viewport.width - size / 2, 0, Math.max(0, viewport.width - size));
+    return { left, top };
+}
+function getDragPosition(event, drag, viewport) {
+    const size = TOOLBAR_PILL_SIZE;
+    return {
+        left: clamp(event.clientX - drag.offsetX, 0, Math.max(0, viewport.width - size)),
+        top: clamp(event.clientY - drag.offsetY, 0, Math.max(0, viewport.height - size)),
+    };
+}
+const SAFE_AREA_PROPERTY = {
+    top: "--pack-preview-toolbar-safe-area-top",
+    right: "--pack-preview-toolbar-safe-area-right",
+    bottom: "--pack-preview-toolbar-safe-area-bottom",
+    left: "--pack-preview-toolbar-safe-area-left",
+};
+function getSafeAreaInset(edge) {
+    return `var(${SAFE_AREA_PROPERTY[edge]})`;
+}
+function getSafeAreaOffset(edge, offset) {
+    return `max(${getSafeAreaInset(edge)}, ${Math.max(0, offset)}px)`;
+}
+export function getConstrainedPillPosition(position, viewport) {
+    const size = TOOLBAR_PILL_SIZE;
+    return {
+        left: `clamp(${getSafeAreaInset("left")}, ${position.left}px, calc(${viewport.width}px - ${getSafeAreaInset("right")} - ${size}px))`,
+        top: `clamp(${getSafeAreaInset("top")}, ${position.top}px, calc(${viewport.height}px - ${getSafeAreaInset("bottom")} - ${size}px))`,
+    };
+}
+function getNearestDock(centerX, centerY, viewport) {
+    const distances = [
+        { edge: "left", distance: centerX },
+        { edge: "right", distance: viewport.width - centerX },
+        { edge: "top", distance: centerY },
+        { edge: "bottom", distance: viewport.height - centerY },
+    ];
+    const nearest = distances.reduce((best, current) => current.distance < best.distance ? current : best);
+    const offset = isVerticalEdge(nearest.edge)
+        ? viewport.height > 0
+            ? centerY / viewport.height
+            : 0.5
+        : viewport.width > 0
+            ? centerX / viewport.width
+            : 0.5;
+    return { edge: nearest.edge, offset: clamp(offset, 0, 1) };
+}
+/**
+ * Resolves which side of one axis the panel anchors to, and how far from the
+ * viewport edge. When the pill is docked on this axis the panel sits on the
+ * far side of the pill plus a gap; otherwise it aligns with the pill's near
+ * side, in whichever half of the viewport the pill's center falls.
+ */
+function resolveAxisAnchor(dockEdge, [startEdge, endEdge], rectStart, rectEnd, viewportSize, gap) {
+    if (dockEdge === startEdge) {
+        return { edge: startEdge, offset: rectEnd + gap };
+    }
+    if (dockEdge === endEdge) {
+        return { edge: endEdge, offset: viewportSize - rectStart + gap };
+    }
+    const center = (rectStart + rectEnd) / 2;
+    if (center < viewportSize / 2) {
+        return { edge: startEdge, offset: rectStart };
+    }
+    return { edge: endEdge, offset: viewportSize - rectEnd };
+}
+export function getPanelPosition(edge, pillRect, viewport) {
+    const gap = TOOLBAR_PANEL_GAP;
+    // Before the pill has been measured, place the panel where a default
+    // bottom-docked pill would put it.
+    const rect = pillRect ?? {
+        left: 0,
+        top: viewport.height - TOOLBAR_PILL_SIZE,
+        right: TOOLBAR_PILL_SIZE,
+        bottom: viewport.height,
+    };
+    const horizontal = resolveAxisAnchor(pillRect ? edge : "bottom", ["left", "right"], rect.left, rect.right, viewport.width, gap);
+    const vertical = resolveAxisAnchor(pillRect ? edge : "bottom", ["top", "bottom"], rect.top, rect.bottom, viewport.height, gap);
+    const horizontalOffset = getSafeAreaOffset(horizontal.edge, horizontal.offset);
+    const verticalOffset = getSafeAreaOffset(vertical.edge, vertical.offset);
+    const oppositeHorizontalEdge = horizontal.edge === "left" ? "right" : "left";
+    const oppositeVerticalEdge = vertical.edge === "top" ? "bottom" : "top";
+    // Size against the measured viewport (window.innerWidth/innerHeight) rather
+    // than 100vw/100vh: on iOS Safari 100vh is the large viewport, which would
+    // let the panel extend under the browser's bottom bar.
+    return {
+        position: "fixed",
+        [horizontal.edge]: horizontalOffset,
+        [vertical.edge]: verticalOffset,
+        width: `min(360px, max(0px, calc(${viewport.width}px - ${horizontalOffset} - ${getSafeAreaInset(oppositeHorizontalEdge)})))`,
+        maxHeight: `max(0px, calc(${viewport.height}px - ${verticalOffset} - ${getSafeAreaInset(oppositeVerticalEdge)}))`,
+    };
+}
+const PILL_SURFACE = "#1a1a1a";
+const rootStyle = {
+    position: "fixed",
+    inset: 0,
+    zIndex: 2147483647,
+    pointerEvents: "none",
+    fontFamily: '"Inter", system-ui, sans-serif',
+    [SAFE_AREA_PROPERTY.top]: `max(${TOOLBAR_EDGE_MARGIN}px, env(safe-area-inset-top, 0px))`,
+    [SAFE_AREA_PROPERTY.right]: `max(${TOOLBAR_EDGE_MARGIN}px, env(safe-area-inset-right, 0px))`,
+    [SAFE_AREA_PROPERTY.bottom]: `max(${TOOLBAR_EDGE_MARGIN}px, env(safe-area-inset-bottom, 0px))`,
+    [SAFE_AREA_PROPERTY.left]: `max(${TOOLBAR_EDGE_MARGIN}px, env(safe-area-inset-left, 0px))`,
+};
+const pillStyle = {
+    position: "fixed",
+    pointerEvents: "auto",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: TOOLBAR_PILL_SIZE,
+    height: TOOLBAR_PILL_SIZE,
+    padding: 0,
+    border: "1px solid rgba(255, 255, 255, 0.14)",
+    borderRadius: "50%",
+    backgroundColor: PILL_SURFACE,
+    color: "#fafafa",
+    cursor: "pointer",
+    touchAction: "none",
+    boxShadow: "0 10px 30px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.25)",
+};
+const panelStyle = {
+    pointerEvents: "auto",
+    overflowY: "auto",
+    backgroundColor: PILL_SURFACE,
+    color: "#fafafa",
+    border: "1px solid rgba(255, 255, 255, 0.12)",
+    borderRadius: 14,
+    boxShadow: "0 16px 50px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3)",
+};
+const panelHeaderStyle = {
+    display: "flex",
+    alignItems: "flex-start",
+    gap: 10,
+    padding: "14px 14px 12px",
+};
+const panelTitleStyle = {
+    margin: 0,
+    fontSize: 13,
+    fontWeight: 600,
+    lineHeight: "18px",
+};
+const panelSummaryStyle = {
+    margin: "3px 0 0",
+    fontSize: 12,
+    lineHeight: "16px",
+    color: "#a1a1aa",
+    overflowWrap: "anywhere",
+};
+const detailListStyle = {
+    display: "grid",
+    gap: 10,
+    margin: 0,
+    padding: "12px 14px 14px",
+    borderTop: "1px solid rgba(255, 255, 255, 0.1)",
+};
+const detailRowStyle = {
+    display: "grid",
+    gridTemplateColumns: "minmax(88px, 0.8fr) minmax(0, 1.2fr)",
+    gap: 12,
+    alignItems: "baseline",
+};
+const detailLabelStyle = {
+    color: "#a1a1aa",
+    fontSize: 12,
+    lineHeight: "16px",
+};
+const detailValueStyle = {
+    margin: 0,
+    color: "#fafafa",
+    fontSize: 12,
+    lineHeight: "16px",
+    overflowWrap: "anywhere",
+};
+const panelFooterStyle = {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "flex-end",
+    gap: 8,
+    borderTop: "1px solid rgba(255, 255, 255, 0.1)",
+    padding: "6px 14px",
+};
+const buttonStyle = {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    minHeight: TOOLBAR_MIN_TAP_TARGET,
+    minWidth: TOOLBAR_MIN_TAP_TARGET,
+    border: 0,
+    borderRadius: 8,
+    background: "transparent",
+    color: "#a1a1aa",
+    cursor: "pointer",
+    fontSize: 12,
+    fontWeight: 500,
+    lineHeight: "16px",
+    padding: "7px 10px",
+};
+const exitConfirmButtonStyle = {
+    ...buttonStyle,
+    border: "1px solid rgba(239, 68, 68, 0.4)",
+    background: "rgba(239, 68, 68, 0.12)",
+    color: "#fca5a5",
+    fontWeight: 600,
+    padding: "6px 12px",
+};
+const toolbarStyles = `
+.pack-preview-toolbar *,
+.pack-preview-toolbar *::before,
+.pack-preview-toolbar *::after { box-sizing: border-box; }
+.pack-preview-toolbar button { font-family: inherit; }
+.pack-preview-toolbar__pill { transition: background-color 120ms ease, box-shadow 160ms ease, left ${TOOLBAR_PILL_TRANSITION_MS}ms cubic-bezier(0.16, 1, 0.3, 1), top ${TOOLBAR_PILL_TRANSITION_MS}ms cubic-bezier(0.16, 1, 0.3, 1); }
+.pack-preview-toolbar__pill:hover { background-color: #262626; }
+.pack-preview-toolbar__pill--dragging { transition: none; box-shadow: 0 20px 48px rgba(0, 0, 0, 0.55); }
+.pack-preview-toolbar__panel { animation: pack-preview-panel-in 160ms cubic-bezier(0.16, 1, 0.3, 1); }
+.pack-preview-toolbar__button:hover { background-color: rgba(255, 255, 255, 0.08); color: #fafafa; }
+.pack-preview-toolbar__exit:hover { color: #fca5a5; }
+.pack-preview-toolbar__exit-confirm:hover { background-color: rgba(239, 68, 68, 0.2); }
+.pack-preview-toolbar button:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; }
+.pack-preview-toolbar button:focus:not(:focus-visible),
+.pack-preview-toolbar__panel:focus { outline: none; }
+@keyframes pack-preview-panel-in {
+  from { opacity: 0; transform: translateY(8px) scale(0.98); }
+  to { opacity: 1; transform: translateY(0) scale(1); }
+}
+@media (prefers-reduced-motion: reduce) {
+  .pack-preview-toolbar__panel { animation: none; }
+  .pack-preview-toolbar__pill { transition: none; }
+}
+`;
+function PreviewDetails({ details }) {
+    if (details.length === 0) {
+        return (React.createElement("dl", { style: detailListStyle },
+            React.createElement("div", { style: detailRowStyle },
+                React.createElement("dt", { style: detailLabelStyle }, "Content"),
+                React.createElement("dd", { style: detailValueStyle }, "Draft content"))));
+    }
+    return (React.createElement("dl", { style: detailListStyle }, details.map((detail) => (React.createElement("div", { key: detail.label, style: detailRowStyle },
+        React.createElement("dt", { style: detailLabelStyle }, detail.label),
+        React.createElement("dd", { style: detailValueStyle }, detail.value))))));
+}
+function PreviewPanel({ details, panelId, panelRef, position, onHide, }) {
+    const [isConfirmingExit, setIsConfirmingExit] = useState(false);
+    const [isExiting, setIsExiting] = useState(false);
+    const [exitError, setExitError] = useState(null);
+    const exitPreviewMode = async () => {
+        if (isExiting)
+            return;
+        setIsExiting(true);
+        setExitError(null);
+        try {
+            const response = await fetch("/api/edit", {
+                method: "POST",
+                headers: { "Content-Type": "application/x-www-form-urlencoded" },
+            });
+            if (!response.ok) {
+                throw new Error(`ERR_RE_API_ERROR: HTTP error! Status: ${response.status} Doc: https://docs.packdigital.com/err/ERR_RE_API_ERROR`);
+            }
+            window.location.reload();
+        }
+        catch (error) {
+            console.error("Error exiting preview:", error.message);
+            setExitError("Couldn’t exit preview. Please try again.");
+            setIsExiting(false);
+        }
+    };
+    return (React.createElement("div", { ref: panelRef, id: panelId, role: "region", "aria-label": "Preview details", tabIndex: -1, "data-pack-preview-toolbar-panel": true, className: "pack-preview-toolbar__panel", style: { ...panelStyle, ...position } },
+        React.createElement("div", { style: panelHeaderStyle },
+            React.createElement(Eye, { style: { width: 18, height: 18, minWidth: 18, marginTop: 1 } }),
+            React.createElement("p", { style: panelTitleStyle }, "Preview mode")),
+        React.createElement(PreviewDetails, { details: details }),
+        React.createElement("div", { style: panelFooterStyle }, isConfirmingExit ? (React.createElement("div", { style: { display: "grid", gap: 8, width: "100%" } },
+            exitError && (React.createElement("p", { style: { ...panelSummaryStyle, color: "#fca5a5" }, role: "alert" }, exitError)),
+            React.createElement("div", { style: {
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "space-between",
+                    gap: 8,
+                } },
+                React.createElement("span", { style: { color: "#a1a1aa", fontSize: 12 } }, "Exit preview mode?"),
+                React.createElement("div", { style: { display: "flex", gap: 6 } },
+                    React.createElement("button", { type: "button", className: "pack-preview-toolbar__button", disabled: isExiting, onClick: () => {
+                            setIsConfirmingExit(false);
+                            setExitError(null);
+                        }, style: { ...buttonStyle, opacity: isExiting ? 0.55 : 1 } }, "Cancel"),
+                    React.createElement("button", { type: "button", className: "pack-preview-toolbar__exit-confirm", disabled: isExiting, onClick: exitPreviewMode, style: {
+                            ...exitConfirmButtonStyle,
+                            opacity: isExiting ? 0.65 : 1,
+                        } }, isExiting ? "Exiting…" : "Exit"))))) : (React.createElement(React.Fragment, null,
+            React.createElement("button", { type: "button", className: "pack-preview-toolbar__button", "data-pack-preview-toolbar-hide": true, title: "Hide the preview button until you reload or open another page", onClick: onHide, style: { ...buttonStyle, marginRight: "auto" } }, "Hide"),
+            React.createElement("button", { type: "button", className: "pack-preview-toolbar__exit", onClick: () => setIsConfirmingExit(true), style: buttonStyle }, "Exit preview"))))));
+}
+/**
+ * While the toolbar is hidden, watches for a client-side route change
+ * (pushState/replaceState from the storefront router, or back/forward) and
+ * resets the hidden flag. A full reload resets it naturally since it lives in
+ * component state. Nothing is patched while the toolbar is visible.
+ */
+function useUnhideOnNavigation(isHidden, setIsHidden) {
+    useEffect(() => {
+        if (!isHidden)
+            return;
+        let active = true;
+        const hiddenAtPathname = window.location.pathname;
+        const unhideIfNavigated = () => {
+            if (active && window.location.pathname !== hiddenAtPathname) {
+                setIsHidden(false);
+            }
+        };
+        const originalPushState = history.pushState;
+        const originalReplaceState = history.replaceState;
+        const patchedPushState = function pushState(...args) {
+            originalPushState.apply(this, args);
+            unhideIfNavigated();
+        };
+        const patchedReplaceState = function replaceState(...args) {
+            originalReplaceState.apply(this, args);
+            unhideIfNavigated();
+        };
+        history.pushState = patchedPushState;
+        history.replaceState = patchedReplaceState;
+        window.addEventListener("popstate", unhideIfNavigated);
+        return () => {
+            active = false;
+            window.removeEventListener("popstate", unhideIfNavigated);
+            // A later script may retain our wrapper. Leave its patch intact and make
+            // our retained callback inert after cleanup.
+            if (history.pushState === patchedPushState) {
+                history.pushState = originalPushState;
+            }
+            if (history.replaceState === patchedReplaceState) {
+                history.replaceState = originalReplaceState;
+            }
+        };
+    }, [isHidden, setIsHidden]);
+}
+function isSameRect(a, b) {
+    return (a !== null &&
+        a.top === b.top &&
+        a.left === b.left &&
+        a.right === b.right &&
+        a.bottom === b.bottom);
+}
+function PreviewToolbarSurface({ environment, previewContext, }) {
+    const panelId = useId();
+    const rootRef = useRef(null);
+    const pillRef = useRef(null);
+    const panelRef = useRef(null);
+    const statusRef = useRef(null);
+    const previousFocusRef = useRef(null);
+    const dragStateRef = useRef(null);
+    const [isPanelOpen, setIsPanelOpen] = useState(false);
+    const [isHidden, setIsHidden] = useState(false);
+    const [dock, setDock] = useState(getStoredDock);
+    const [viewport, setViewport] = useState(getViewport);
+    const [pillRect, setPillRect] = useState(null);
+    const [dragPosition, setDragPosition] = useState(null);
+    const isDragging = dragPosition !== null;
+    useEffect(() => {
+        const onResize = () => {
+            setViewport((current) => {
+                const next = getViewport();
+                return current.width === next.width && current.height === next.height
+                    ? current
+                    : next;
+            });
+        };
+        window.addEventListener("resize", onResize);
+        return () => window.removeEventListener("resize", onResize);
+    }, []);
+    const measurePill = useCallback(() => {
+        const node = pillRef.current;
+        if (!node)
+            return;
+        const rect = node.getBoundingClientRect();
+        const next = {
+            top: rect.top,
+            left: rect.left,
+            right: rect.right,
+            bottom: rect.bottom,
+        };
+        setPillRect((current) => (isSameRect(current, next) ? current : next));
+    }, []);
+    // The panel is anchored to the pill's rendered rect, which the CSS safe-area
+    // clamp can shift away from the JS position. Measure only while the panel is
+    // open (it is closed during drags). A synchronous read right after a dock or
+    // viewport change captures the pre-transition position, so re-measure once
+    // the pill's left/top transition has had time to settle, and again on the
+    // transition events themselves for the case where the timer runs early.
+    useIsomorphicLayoutEffect(() => {
+        if (!isPanelOpen)
+            return;
+        measurePill();
+        const timeoutId = window.setTimeout(measurePill, TOOLBAR_PILL_TRANSITION_MS + 50);
+        return () => window.clearTimeout(timeoutId);
+    }, [isPanelOpen, dock, viewport, measurePill]);
+    useEffect(() => {
+        const node = pillRef.current;
+        if (!isPanelOpen || !node)
+            return;
+        const onTransitionSettled = (event) => {
+            if (event.propertyName === "left" || event.propertyName === "top") {
+                measurePill();
+            }
+        };
+        node.addEventListener("transitionend", onTransitionSettled);
+        node.addEventListener("transitioncancel", onTransitionSettled);
+        return () => {
+            node.removeEventListener("transitionend", onTransitionSettled);
+            node.removeEventListener("transitioncancel", onTransitionSettled);
+        };
+    }, [isPanelOpen, measurePill]);
+    useEffect(() => {
+        if (!isPanelOpen)
+            return;
+        const handlePointerDown = (event) => {
+            const target = event.target;
+            if (target && !rootRef.current?.contains(target)) {
+                setIsPanelOpen(false);
+            }
+        };
+        // Only claim Escape while focus is inside the toolbar, so storefront
+        // dialogs and inputs keep their own Escape handling.
+        const handleKeyDown = (event) => {
+            if (event.key !== "Escape" || event.defaultPrevented)
+                return;
+            if (!rootRef.current?.contains(document.activeElement))
+                return;
+            setIsPanelOpen(false);
+            pillRef.current?.focus();
+        };
+        document.addEventListener("pointerdown", handlePointerDown, true);
+        document.addEventListener("keydown", handleKeyDown);
+        panelRef.current?.focus();
+        return () => {
+            document.removeEventListener("pointerdown", handlePointerDown, true);
+            document.removeEventListener("keydown", handleKeyDown);
+        };
+    }, [isPanelOpen]);
+    const togglePanel = () => setIsPanelOpen((open) => !open);
+    const beginDrag = (event) => {
+        if (event.pointerType === "mouse" && event.button !== 0)
+            return;
+        const rect = pillRef.current?.getBoundingClientRect();
+        if (!rect)
+            return;
+        dragStateRef.current = {
+            pointerId: event.pointerId,
+            startX: event.clientX,
+            startY: event.clientY,
+            offsetX: event.clientX - rect.left,
+            offsetY: event.clientY - rect.top,
+            moved: false,
+            captured: false,
+        };
+    };
+    const updateDrag = (event) => {
+        const drag = dragStateRef.current;
+        if (!drag || drag.pointerId !== event.pointerId)
+            return;
+        const distance = Math.hypot(event.clientX - drag.startX, event.clientY - drag.startY);
+        if (!drag.moved && distance < TOOLBAR_DRAG_THRESHOLD)
+            return;
+        if (!drag.moved) {
+            drag.moved = true;
+            setIsPanelOpen(false);
+            try {
+                pillRef.current?.setPointerCapture(event.pointerId);
+                drag.captured = true;
+            }
+            catch {
+                // Without capture, pointerup may go to the storefront. Cancel instead
+                // of leaving the pill stranded in its dragging state.
+                cancelDrag();
+                return;
+            }
+        }
+        setDragPosition(getDragPosition(event, drag, viewport));
+    };
+    // A pointer that never moved past the drag threshold is a tap: toggle here
+    // rather than in `onClick`, so a completed drag never has to suppress the
+    // click that may or may not follow it (touch drags produce no click).
+    const endDrag = (event) => {
+        const drag = dragStateRef.current;
+        if (!drag || drag.pointerId !== event.pointerId)
+            return;
+        dragStateRef.current = null;
+        if (drag.captured) {
+            try {
+                pillRef.current?.releasePointerCapture(event.pointerId);
+            }
+            catch {
+                // Capture is released implicitly on pointerup; ignore a stale id.
+            }
+        }
+        if (!drag.moved) {
+            togglePanel();
+            return;
+        }
+        const position = getDragPosition(event, drag, viewport);
+        const nextDock = getNearestDock(position.left + TOOLBAR_PILL_SIZE / 2, position.top + TOOLBAR_PILL_SIZE / 2, viewport);
+        setDock(nextDock);
+        setStoredDock(nextDock);
+        setDragPosition(null);
+    };
+    const cancelDrag = () => {
+        dragStateRef.current = null;
+        setDragPosition(null);
+    };
+    // Pointer taps are handled in `endDrag`; `click` is only needed for
+    // keyboard and assistive-technology activation, which carries `detail === 0`.
+    const handlePillClick = (event) => {
+        if (event.detail === 0)
+            togglePanel();
+    };
+    const hideToolbar = () => {
+        const previousFocus = previousFocusRef.current;
+        if (previousFocus?.isConnected)
+            previousFocus.focus({ preventScroll: true });
+        if (!previousFocus || document.activeElement !== previousFocus) {
+            statusRef.current?.focus({ preventScroll: true });
+        }
+        setIsPanelOpen(false);
+        setIsHidden(true);
+    };
+    useUnhideOnNavigation(isHidden, setIsHidden);
+    const summary = buildPreviewSummary(environment, previewContext);
+    const details = buildPreviewDetails(environment, previewContext);
+    const pillPosition = dragPosition ?? getDockedPosition(dock, viewport);
+    const panelPosition = getPanelPosition(dock.edge, pillRect, viewport);
+    const constrainedPillPosition = getConstrainedPillPosition(pillPosition, viewport);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { ref: statusRef, role: "status", tabIndex: -1, style: {
+                position: "fixed",
+                width: 1,
+                height: 1,
+                overflow: "hidden",
+                clipPath: "inset(50%)",
+                whiteSpace: "nowrap",
+            } }, isHidden
+            ? "Preview toolbar hidden. It returns when you open another page or reload."
+            : ""),
+        !isHidden && (React.createElement("div", { ref: rootRef, className: "pack-preview-toolbar", "data-pack-preview-toolbar": true, style: rootStyle, onFocusCapture: (event) => {
+                const previous = event.relatedTarget;
+                if (!event.currentTarget.contains(previous)) {
+                    previousFocusRef.current =
+                        previous instanceof HTMLElement &&
+                            previous !== document.body &&
+                            previous !== statusRef.current
+                            ? previous
+                            : null;
+                }
+            } },
+            React.createElement("style", null, toolbarStyles),
+            isPanelOpen && (React.createElement(PreviewPanel, { details: details, panelId: panelId, panelRef: panelRef, position: panelPosition, onHide: hideToolbar })),
+            React.createElement("button", { ref: pillRef, type: "button", "data-pack-preview-toolbar-pill": true, className: isDragging
+                    ? "pack-preview-toolbar__pill pack-preview-toolbar__pill--dragging"
+                    : "pack-preview-toolbar__pill", "aria-expanded": isPanelOpen, "aria-controls": isPanelOpen ? panelId : undefined, "aria-label": isPanelOpen
+                    ? "Close preview details"
+                    : `Open preview details. Current context: ${summary}. Drag to reposition.`, title: summary, onPointerDown: beginDrag, onPointerMove: updateDrag, onPointerUp: endDrag, onPointerCancel: cancelDrag, onClick: handlePillClick, style: {
+                    ...pillStyle,
+                    ...constrainedPillPosition,
+                    cursor: isDragging ? "grabbing" : "pointer",
+                } },
+                React.createElement(Eye, { style: { width: 20, height: 20 } }))))));
+}
+/**
+ * Thin gate so production storefront pages (preview off) mount no listeners,
+ * timers, storage reads, or effects. The top-window check is a hydration-safe
+ * client-only snapshot; it renders nothing on the server and during hydration.
+ */
+export const PreviewToolbar = ({ isPreviewModeEnabled, environment, previewContext, }) => {
+    const canRenderToolbar = useSyncExternalStore(subscribeToNothing, canShowPreviewToolbar, getServerSnapshot);
+    if (!isPreviewModeEnabled || !canRenderToolbar)
+        return null;
+    return (React.createElement(PreviewToolbarSurface, { environment: environment, previewContext: previewContext }));
+};