@pack/react 4.3.4 → 4.5.0

package/dist/index.d.ts

@@ -4,7 +4,9 @@ import { usePackContext } from "./pack/pack-context";
 import { useSiteSettings } from "./use-site-settings";
 import { useLocale } from "./use-locale";
 import { useOverlayScript } from "./use-overlay-script";
+import { usePlaybookCart } from "./use-playbook-cart";
 import { registerSection } from "./register-section";
 import { registerStorefrontSettingsSchema } from "./register-storefront-settings-schema";
-export { PackProvider, PreviewProvider, RenderSection, RenderSections, registerSection, registerStorefrontSettingsSchema, useLocale, useOverlayScript, usePackContext, useSections, useSiteSettings, };
+export { PackProvider, PreviewProvider, RenderSection, RenderSections, registerSection, registerStorefrontSettingsSchema, useLocale, useOverlayScript, usePackContext, usePlaybookCart, useSections, useSiteSettings, };
+export type { PlaybookCartAdd, PlaybookCartInput } from "./use-playbook-cart";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,aAAa,EACb,cAAc,EACd,WAAW,EACZ,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACpE,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACrD,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,gCAAgC,EAAE,MAAM,uCAAuC,CAAC;AAEzF,OAAO,EACL,YAAY,EACZ,eAAe,EACf,aAAa,EACb,cAAc,EACd,eAAe,EACf,gCAAgC,EAChC,SAAS,EACT,gBAAgB,EAChB,cAAc,EACd,WAAW,EACX,eAAe,GAChB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,aAAa,EACb,cAAc,EACd,WAAW,EACZ,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACpE,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACrD,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,gCAAgC,EAAE,MAAM,uCAAuC,CAAC;AAEzF,OAAO,EACL,YAAY,EACZ,eAAe,EACf,aAAa,EACb,cAAc,EACd,eAAe,EACf,gCAAgC,EAChC,SAAS,EACT,gBAAgB,EAChB,cAAc,EACd,eAAe,EACf,WAAW,EACX,eAAe,GAChB,CAAC;AAEF,YAAY,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/index.js

@@ -4,6 +4,7 @@ import { usePackContext } from "./pack/pack-context";
 import { useSiteSettings } from "./use-site-settings";
 import { useLocale } from "./use-locale";
 import { useOverlayScript } from "./use-overlay-script";
+import { usePlaybookCart } from "./use-playbook-cart";
 import { registerSection } from "./register-section";
 import { registerStorefrontSettingsSchema } from "./register-storefront-settings-schema";
-export { PackProvider, PreviewProvider, RenderSection, RenderSections, registerSection, registerStorefrontSettingsSchema, useLocale, useOverlayScript, usePackContext, useSections, useSiteSettings, };
+export { PackProvider, PreviewProvider, RenderSection, RenderSections, registerSection, registerStorefrontSettingsSchema, useLocale, useOverlayScript, usePackContext, usePlaybookCart, useSections, useSiteSettings, };

package/dist/pack/pack-context.d.ts

@@ -1,4 +1,5 @@
 import React, { type ReactNode } from "react";
+import { type PreviewContext } from "./preview-toolbar";
 import "./pack-debug";
 type PackContextValue = {
     isPreview: boolean;
@@ -7,16 +8,7 @@ type PackContextValue = {
             src?: string;
             version?: string;
         };
-        previewContext?: {
-            linkName?: string;
-            releaseId?: string;
-            releaseName?: string;
-            locale?: string;
-            pageDraft?: string;
-            siteSettingsDraft?: string;
-            testHandle?: string;
-            testVariantHandle?: string;
-        };
+        previewContext?: PreviewContext;
         [key: string]: any;
     };
     siteSettings: any;

package/dist/pack/pack-context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pack-context.d.ts","sourceRoot":"","sources":["../../src/pack/pack-context.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAKZ,KAAK,SAAS,EAEf,MAAM,OAAO,CAAC;AAKf,OAAO,cAAc,CAAC;AAEtB,KAAK,gBAAgB,GAAG;IACtB,SAAS,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE;QACf,OAAO,CAAC,EAAE;YACR,GAAG,CAAC,EAAE,MAAM,CAAC;YACb,OAAO,CAAC,EAAE,MAAM,CAAC;SAClB,CAAC;QACF,cAAc,CAAC,EAAE;YACf,QAAQ,CAAC,EAAE,MAAM,CAAC;YAClB,SAAS,CAAC,EAAE,MAAM,CAAC;YACnB,WAAW,CAAC,EAAE,MAAM,CAAC;YACrB,MAAM,CAAC,EAAE,MAAM,CAAC;YAChB,SAAS,CAAC,EAAE,MAAM,CAAC;YACnB,iBAAiB,CAAC,EAAE,MAAM,CAAC;YAC3B,UAAU,CAAC,EAAE,MAAM,CAAC;YACpB,iBAAiB,CAAC,EAAE,MAAM,CAAC;SAC5B,CAAC;QACF,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;KACpB,CAAC;IACF,YAAY,EAAE,GAAG,CAAC;IAClB,eAAe,EAAE,CAAC,YAAY,EAAE,GAAG,KAAK,IAAI,CAAC;IAC7C,WAAW,EAAE,GAAG,CAAC;IACjB,cAAc,EAAE,CAAC,OAAO,EAAE,GAAG,KAAK,IAAI,CAAC;IACvC,kBAAkB,EAAE,MAAM,CAAC;IAC3B,MAAM,EAAE;QACN,QAAQ,EAAE,MAAM,CAAC;QACjB,OAAO,EAAE,MAAM,CAAC;KACjB,GAAG,IAAI,CAAC;IACT,SAAS,EAAE,CACT,MAAM,EAAE;QACN,QAAQ,EAAE,MAAM,CAAC;QACjB,OAAO,EAAE,MAAM,CAAC;KACjB,GAAG,IAAI,KACL,IAAI,CAAC;CACX,CAAC;AAEF,eAAO,MAAM,WAAW,iCAUtB,CAAC;AAEH,eAAO,MAAM,cAAc,wBAAgC,CAAC;AAE5D,UAAU,gBAAgB;IACxB,QAAQ,EAAE,SAAS,CAAC;IACpB,YAAY,EAAE,GAAG,CAAC;IAClB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,cAAc,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IACpD,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,MAAM,CAAC,EAAE;QACP,QAAQ,EAAE,MAAM,CAAC;QACjB,OAAO,EAAE,MAAM,CAAC;KACjB,GAAG,IAAI,CAAC;IACT,WAAW,CAAC,EAAE,GAAG,CAAC;CACnB;AAUD,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,oBAA4B,EAC5B,YAAY,EAAE,yBAAyB,EACvC,cAAc,EACd,kBAAuB,EACvB,MAAM,EAAE,aAAoB,GAC7B,EAAE,gBAAgB,qBAuDlB;AAED,eAAO,MAAM,eAAe,qBAAe,CAAC"}
+{"version":3,"file":"pack-context.d.ts","sourceRoot":"","sources":["../../src/pack/pack-context.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAKZ,KAAK,SAAS,EAEf,MAAM,OAAO,CAAC;AAEf,OAAO,EAAkB,KAAK,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAGxE,OAAO,cAAc,CAAC;AAEtB,KAAK,gBAAgB,GAAG;IACtB,SAAS,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE;QACf,OAAO,CAAC,EAAE;YACR,GAAG,CAAC,EAAE,MAAM,CAAC;YACb,OAAO,CAAC,EAAE,MAAM,CAAC;SAClB,CAAC;QACF,cAAc,CAAC,EAAE,cAAc,CAAC;QAChC,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;KACpB,CAAC;IACF,YAAY,EAAE,GAAG,CAAC;IAClB,eAAe,EAAE,CAAC,YAAY,EAAE,GAAG,KAAK,IAAI,CAAC;IAC7C,WAAW,EAAE,GAAG,CAAC;IACjB,cAAc,EAAE,CAAC,OAAO,EAAE,GAAG,KAAK,IAAI,CAAC;IACvC,kBAAkB,EAAE,MAAM,CAAC;IAC3B,MAAM,EAAE;QACN,QAAQ,EAAE,MAAM,CAAC;QACjB,OAAO,EAAE,MAAM,CAAC;KACjB,GAAG,IAAI,CAAC;IACT,SAAS,EAAE,CACT,MAAM,EAAE;QACN,QAAQ,EAAE,MAAM,CAAC;QACjB,OAAO,EAAE,MAAM,CAAC;KACjB,GAAG,IAAI,KACL,IAAI,CAAC;CACX,CAAC;AAEF,eAAO,MAAM,WAAW,iCAUtB,CAAC;AAEH,eAAO,MAAM,cAAc,wBAAgC,CAAC;AAE5D,UAAU,gBAAgB;IACxB,QAAQ,EAAE,SAAS,CAAC;IACpB,YAAY,EAAE,GAAG,CAAC;IAClB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,cAAc,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IACpD,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,MAAM,CAAC,EAAE;QACP,QAAQ,EAAE,MAAM,CAAC;QACjB,OAAO,EAAE,MAAM,CAAC;KACjB,GAAG,IAAI,CAAC;IACT,WAAW,CAAC,EAAE,GAAG,CAAC;CACnB;AAUD,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,oBAA4B,EAC5B,YAAY,EAAE,yBAAyB,EACvC,cAAc,EACd,kBAAuB,EACvB,MAAM,EAAE,aAAoB,GAC7B,EAAE,gBAAgB,qBAuDlB;AAED,eAAO,MAAM,eAAe,qBAAe,CAAC"}

package/dist/pack/pack-context.js

@@ -1,6 +1,6 @@
 import React, { createContext, useContext, useState, useMemo, useEffect, } from "react";
 import { usePackTrack } from "./pack-analytics";
-import { PreviewToast } from "./preview-toast";
+import { PreviewToolbar } from "./preview-toolbar";
 import { useOverlayScript } from "../use-overlay-script";
 import { useCustomizerShell } from "../use-customizer-shell";
 import "./pack-debug";
@@ -56,6 +56,6 @@ export function PackProvider({ children, isPreviewModeEnabled = false, siteSetti
     return (React.createElement(PackContext.Provider, { value: value },
         React.createElement(CustomizerShell, null),
         children,
-        React.createElement(PreviewToast, { isPreviewModeEnabled: !!isPreviewModeEnabled, environment: value.contentEnvironment, previewContext: customizerMeta?.previewContext })));
+        React.createElement(PreviewToolbar, { isPreviewModeEnabled: !!isPreviewModeEnabled, environment: value.contentEnvironment, previewContext: customizerMeta?.previewContext })));
 }
 export const PreviewProvider = PackProvider;

package/dist/pack/preview-toolbar.d.ts

@@ -0,0 +1,47 @@
+import { type CSSProperties } from "react";
+import * as React from "react";
+export interface PreviewContext {
+    linkName?: string;
+    releaseId?: string;
+    releaseName?: string;
+    locale?: string;
+    pageDraft?: string;
+    siteSettingsDraft?: string;
+    testHandle?: string;
+    testVariantHandle?: string;
+}
+export interface PreviewToolbarProps {
+    isPreviewModeEnabled: boolean;
+    environment?: string;
+    previewContext?: PreviewContext;
+}
+export type PreviewDetail = {
+    label: string;
+    value: string;
+};
+type ToolbarEdge = "top" | "right" | "bottom" | "left";
+type ToolbarRect = {
+    top: number;
+    left: number;
+    right: number;
+    bottom: number;
+};
+type ToolbarViewport = {
+    width: number;
+    height: number;
+};
+export declare function buildPreviewDetails(environment?: string, previewContext?: PreviewContext): PreviewDetail[];
+export declare function buildPreviewSummary(environment?: string, previewContext?: PreviewContext): string;
+export declare function getConstrainedPillPosition(position: {
+    left: number;
+    top: number;
+}, viewport: ToolbarViewport): CSSProperties;
+export declare function getPanelPosition(edge: ToolbarEdge, pillRect: ToolbarRect | null, viewport: ToolbarViewport): CSSProperties;
+/**
+ * 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 declare const PreviewToolbar: ({ isPreviewModeEnabled, environment, previewContext, }: PreviewToolbarProps) => React.JSX.Element | null;
+export {};
+//# sourceMappingURL=preview-toolbar.d.ts.map

package/dist/pack/preview-toolbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"preview-toolbar.d.ts","sourceRoot":"","sources":["../../src/pack/preview-toolbar.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,aAAa,EAUnB,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,MAAM,WAAW,cAAc;IAC7B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,MAAM,WAAW,mBAAmB;IAClC,oBAAoB,EAAE,OAAO,CAAC;IAC9B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,cAAc,CAAC;CACjC;AAED,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAUF,KAAK,WAAW,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;AAEvD,KAAK,WAAW,GAAG;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAAC;AAChF,KAAK,eAAe,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAAC;AA4CzD,wBAAgB,mBAAmB,CACjC,WAAW,CAAC,EAAE,MAAM,EACpB,cAAc,CAAC,EAAE,cAAc,GAC9B,aAAa,EAAE,CA2CjB;AAED,wBAAgB,mBAAmB,CACjC,WAAW,CAAC,EAAE,MAAM,EACpB,cAAc,CAAC,EAAE,cAAc,UAqBhC;AAsID,wBAAgB,0BAA0B,CACxC,QAAQ,EAAE;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,EACvC,QAAQ,EAAE,eAAe,GACxB,aAAa,CAOf;AA0DD,wBAAgB,gBAAgB,CAC9B,IAAI,EAAE,WAAW,EACjB,QAAQ,EAAE,WAAW,GAAG,IAAI,EAC5B,QAAQ,EAAE,eAAe,GACxB,aAAa,CA6Cf;AAorBD;;;;GAIG;AACH,eAAO,MAAM,cAAc,2DAIxB,mBAAmB,6BAerB,CAAC"}

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 }));
+};

package/dist/use-customizer-shell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-customizer-shell.d.ts","sourceRoot":"","sources":["../src/use-customizer-shell.tsx"],"names":[],"mappings":"AAeA,eAAO,MAAM,kBAAkB,YAiT9B,CAAC"}
+{"version":3,"file":"use-customizer-shell.d.ts","sourceRoot":"","sources":["../src/use-customizer-shell.tsx"],"names":[],"mappings":"AAeA,eAAO,MAAM,kBAAkB,YAkU9B,CAAC"}

package/dist/use-customizer-shell.js

@@ -183,24 +183,35 @@ export const useCustomizerShell = () => {
     // so SET_CURRENT_ROUTE fires even between pages that both lack CMS content.
     useEffect(() => {
         setCurrentPath(window.location.pathname);
-        const updatePath = () => setCurrentPath(window.location.pathname);
+        let active = true;
+        const updatePath = () => {
+            if (active)
+                setCurrentPath(window.location.pathname);
+        };
         // Intercept pushState/replaceState for client-side routing (e.g. React Router)
-        const originalPushState = history.pushState.bind(history);
-        const originalReplaceState = history.replaceState.bind(history);
-        history.pushState = (...args) => {
-            originalPushState(...args);
+        const originalPushState = history.pushState;
+        const originalReplaceState = history.replaceState;
+        const patchedPushState = function (...args) {
+            originalPushState.apply(this, args);
             updatePath();
         };
-        history.replaceState = (...args) => {
-            originalReplaceState(...args);
+        const patchedReplaceState = function (...args) {
+            originalReplaceState.apply(this, args);
             updatePath();
         };
+        history.pushState = patchedPushState;
+        history.replaceState = patchedReplaceState;
         // Handle back/forward navigation
         window.addEventListener("popstate", updatePath);
         return () => {
+            active = false;
             window.removeEventListener("popstate", updatePath);
-            history.pushState = originalPushState;
-            history.replaceState = originalReplaceState;
+            if (history.pushState === patchedPushState) {
+                history.pushState = originalPushState;
+            }
+            if (history.replaceState === patchedReplaceState) {
+                history.replaceState = originalReplaceState;
+            }
         };
     }, []);
     // Tell the parent window about the current route

package/dist/use-playbook-cart.d.ts

@@ -0,0 +1,62 @@
+/**
+ * Bridges a storefront's own cart to Playbook's collection-grid "Add to cart".
+ *
+ * WHY A BRIDGE AND NOT A DIRECT WRITE. Playbook's storefront SDK adds a line on
+ * a Liquid theme through Shopify's AJAX Cart API (`/cart/add.js`). Hydrogen has
+ * no such endpoint, and the one thing Playbook must not do is write the line
+ * behind the storefront's back: it could add it through the Storefront API, but
+ * a Hydrogen cart's UI is rendered from React state that no third-party script
+ * can reach, so the line would land in Shopify while the cart icon still read
+ * zero and the drawer never opened. The shopper would click again. A correct
+ * backend behind a frontend that looks broken is worse than an honest link to
+ * the product page, which is what Playbook falls back to when no bridge exists.
+ *
+ * So the storefront — the only code that CAN update its own cart UI — supplies
+ * the write, and Playbook calls it. Registering this also wins on Liquid, where
+ * Playbook prefers a registered bridge over its own event fan-out, because the
+ * store's real drawer always beats a simulated one.
+ *
+ * OPT-IN, ALWAYS. Nothing here runs unless a storefront calls this hook. It is
+ * a `window` global, and a package installed by 50+ storefronts must never
+ * assign one on their behalf.
+ *
+ *   const { linesAdd } = useCart();
+ *   usePlaybookCart(async ({ variantId, quantity }) => {
+ *     await linesAdd([{ merchandiseId: variantId, quantity }]);
+ *   });
+ *
+ * THE OTHER HALF OF THIS CONTRACT LIVES IN PLAYBOOK, not here, and nothing in
+ * this repo can verify it: `sdk/experience/src/cart-add.ts` in
+ * `packdigital/playbook` defines the global's name, decides whether the button
+ * renders at all (`canAddToCart`), and treats a rejection as the shopper-facing
+ * failure state. Read that file before changing the shape below.
+ */
+/**
+ * What Playbook passes to the bridge.
+ *
+ * Deliberately OPEN: Playbook owns this payload, and the bridge forwards every
+ * field it receives so a later addition there (a selling plan, line attributes)
+ * reaches the storefront without a release here.
+ */
+export interface PlaybookCartInput {
+    /** Numeric variant id as Playbook sends it; normalized to a GID before the
+     *  storefront's callback sees it. */
+    variantId: string;
+    quantity: number;
+    [key: string]: unknown;
+}
+/** The storefront's own add-to-cart. Resolve = added; throw = failed. */
+export type PlaybookCartAdd = (input: PlaybookCartInput) => Promise<unknown> | unknown;
+/**
+ * Accept either form and always hand the callback a variant GID. Playbook sends
+ * the legacy numeric id (its Liquid path needs that for `/cart/add.js`), which
+ * every Hydrogen cart API rejects.
+ *
+ * This is a globally-callable entry point, so it validates rather than coercing:
+ * an empty id would otherwise build the bare prefix `gid://shopify/…/`, and a
+ * PRODUCT gid would sail through as if it were a variant. Both fail far away
+ * from here, inside the cart mutation, with a message that doesn't name Playbook.
+ */
+export declare const toVariantGid: (variantId: string) => string;
+export declare const usePlaybookCart: (addToCart: PlaybookCartAdd | null | undefined) => void;
+//# sourceMappingURL=use-playbook-cart.d.ts.map

package/dist/use-playbook-cart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-playbook-cart.d.ts","sourceRoot":"","sources":["../src/use-playbook-cart.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AAEH;;;;;;GAMG;AACH,MAAM,WAAW,iBAAiB;IAChC;yCACqC;IACrC,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED,yEAAyE;AACzE,MAAM,MAAM,eAAe,GAAG,CAC5B,KAAK,EAAE,iBAAiB,KACrB,OAAO,CAAC,OAAO,CAAC,GAAG,OAAO,CAAC;AAmBhC;;;;;;;;;GASG;AACH,eAAO,MAAM,YAAY,cAAe,MAAM,KAAG,MAahD,CAAC;AAYF,eAAO,MAAM,eAAe,cACf,eAAe,GAAG,IAAI,GAAG,SAAS,KAC5C,IAqDF,CAAC"}

package/dist/use-playbook-cart.js

@@ -0,0 +1,87 @@
+import { useEffect, useRef } from "react";
+/** Shopify variant GID prefix — the form every Hydrogen cart API expects. */
+const VARIANT_GID_PREFIX = "gid://shopify/ProductVariant/";
+/**
+ * Accept either form and always hand the callback a variant GID. Playbook sends
+ * the legacy numeric id (its Liquid path needs that for `/cart/add.js`), which
+ * every Hydrogen cart API rejects.
+ *
+ * This is a globally-callable entry point, so it validates rather than coercing:
+ * an empty id would otherwise build the bare prefix `gid://shopify/…/`, and a
+ * PRODUCT gid would sail through as if it were a variant. Both fail far away
+ * from here, inside the cart mutation, with a message that doesn't name Playbook.
+ */
+export const toVariantGid = (variantId) => {
+    const id = String(variantId ?? "").trim();
+    if (!id)
+        throw new Error("[playbook] add-to-cart called with no variantId");
+    if (id.startsWith("gid://")) {
+        if (!id.startsWith(VARIANT_GID_PREFIX)) {
+            throw new Error(`[playbook] expected a ProductVariant gid, got "${id}"`);
+        }
+        return id;
+    }
+    if (!/^\d+$/.test(id)) {
+        throw new Error(`[playbook] variantId must be numeric or a gid, got "${id}"`);
+    }
+    return `${VARIANT_GID_PREFIX}${id}`;
+};
+/** Quantity arrives from a third-party script; a cart mutation should never see
+ *  a fraction, a negative, or `NaN`. */
+const toQuantity = (quantity) => {
+    const n = Number(quantity);
+    if (!Number.isInteger(n) || n < 1) {
+        throw new Error(`[playbook] quantity must be a positive integer, got "${quantity}"`);
+    }
+    return n;
+};
+export const usePlaybookCart = (addToCart) => {
+    // The documented usage passes an INLINE arrow, so `addToCart` is a new
+    // identity every render. Keeping it in a ref means the global is registered
+    // once and the callback stays current, instead of the handler being torn down
+    // and reassigned on every render of the component that mounts the bridge.
+    const latest = useRef(addToCart);
+    useEffect(() => {
+        latest.current = addToCart;
+    }, [addToCart]);
+    const enabled = Boolean(addToCart);
+    useEffect(() => {
+        if (!enabled)
+            return;
+        const host = window;
+        if (host.playbookAddToCart) {
+            // Two bridges racing means one silently wins and the other's cart is
+            // never used — worth a word in dev, where a storefront author can act on
+            // it. Not an throw: the page still works, and the later mount wins
+            // consistently.
+            console.warn("[playbook] window.playbookAddToCart was already registered; the most recent usePlaybookCart wins.");
+        }
+        // `async` so a SYNCHRONOUS throw from the storefront's callback (or from
+        // validation above) reaches Playbook as a REJECTION. Playbook awaits this
+        // and renders the shopper a failure state; a sync throw would escape that
+        // path entirely and the button would sit there having done nothing.
+        const handler = async (input) => {
+            const add = latest.current;
+            if (!add)
+                return;
+            // Spread FIRST so any field Playbook adds later rides along untouched;
+            // only the two we normalize are overridden.
+            return add({
+                ...input,
+                variantId: toVariantGid(input.variantId),
+                quantity: toQuantity(input.quantity),
+            });
+        };
+        host.playbookAddToCart = handler;
+        return () => {
+            // Clear ONLY our own registration, by identity. React can mount the next
+            // instance before unmounting the previous one (a route transition, or
+            // StrictMode's double-invoke in dev), so an unconditional delete would
+            // remove the NEWER handler and leave the storefront with no bridge at
+            // all — the button silently degrading to navigation, on a store that had
+            // opted in.
+            if (host.playbookAddToCart === handler)
+                delete host.playbookAddToCart;
+        };
+    }, [enabled]);
+};

package/dist/version.js

@@ -1 +1 @@
-export const VERSION = "4.3.4";
+export const VERSION = "4.5.0";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pack/react",
   "description": "React",
-  "version": "4.3.4",
+  "version": "4.5.0",
   "exports": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "engines": {

package/dist/pack/preview-toast.d.ts

@@ -1,20 +0,0 @@
-import React from "react";
-interface PreviewContext {
-    linkName?: string;
-    releaseId?: string;
-    releaseName?: string;
-    locale?: string;
-    pageDraft?: string;
-    siteSettingsDraft?: string;
-    testHandle?: string;
-    testVariantHandle?: string;
-}
-interface PreviewToastProps {
-    isPreviewModeEnabled: boolean;
-    environment?: string;
-    previewContext?: PreviewContext;
-}
-export declare const buildPreviewMessage: (environment?: string, previewContext?: PreviewContext) => string;
-export declare const PreviewToast: ({ isPreviewModeEnabled, environment, previewContext, }: PreviewToastProps) => React.JSX.Element | null;
-export {};
-//# sourceMappingURL=preview-toast.d.ts.map

package/dist/pack/preview-toast.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"preview-toast.d.ts","sourceRoot":"","sources":["../../src/pack/preview-toast.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAEnD,UAAU,cAAc;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,UAAU,iBAAiB;IACzB,oBAAoB,EAAE,OAAO,CAAC;IAC9B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,cAAc,CAAC;CACjC;AAsBD,eAAO,MAAM,mBAAmB,iBAChB,MAAM,mBACH,cAAc,WAgDhC,CAAC;AAEF,eAAO,MAAM,YAAY,2DAItB,iBAAiB,6BAkInB,CAAC"}

package/dist/pack/preview-toast.js

@@ -1,140 +0,0 @@
-import React, { useEffect, useState } from "react";
-const Eye = (props) => {
-    return (React.createElement("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...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" })));
-};
-export const buildPreviewMessage = (environment, previewContext) => {
-    const primaryContextParts = [];
-    const secondaryContextParts = [];
-    if (previewContext?.linkName) {
-        primaryContextParts.push(`preview link: ${previewContext.linkName}`);
-    }
-    else if (previewContext?.releaseName) {
-        primaryContextParts.push(`content release: ${previewContext.releaseName}`);
-    }
-    else if (previewContext?.releaseId) {
-        primaryContextParts.push("content release");
-    }
-    if (previewContext?.locale) {
-        secondaryContextParts.push(`locale: ${previewContext.locale}`);
-    }
-    if (previewContext?.pageDraft) {
-        secondaryContextParts.push(`page: ${previewContext.pageDraft}`);
-    }
-    if (previewContext?.siteSettingsDraft) {
-        secondaryContextParts.push(`settings: ${previewContext.siteSettingsDraft}`);
-    }
-    // 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) {
-        secondaryContextParts.push(`test: ${previewContext.testVariantHandle}`);
-    }
-    if (primaryContextParts.length === 0 && secondaryContextParts.length === 0) {
-        const baseMessage = "You are currently previewing your storefront with draft content";
-        return environment
-            ? `${baseMessage} on ${environment} environment`
-            : baseMessage;
-    }
-    const parts = ["Previewing", ...primaryContextParts];
-    if (environment) {
-        parts.push(`${environment} environment`);
-    }
-    parts.push(...secondaryContextParts);
-    return parts.join(" • ");
-};
-export const PreviewToast = ({ isPreviewModeEnabled, environment, previewContext, }) => {
-    const [showToast, setShowToast] = useState(false);
-    const exitPreviewMode = async () => {
-        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);
-        }
-    };
-    useEffect(() => {
-        const isIframe = window.self !== window.top;
-        if (isPreviewModeEnabled && !isIframe) {
-            setShowToast(true);
-        }
-    }, [isPreviewModeEnabled]);
-    if (showToast) {
-        return (React.createElement("div", { "data-pack-preview-toast": true, style: {
-                position: "fixed",
-                zIndex: "2147483647",
-                left: 0,
-                right: 0,
-                paddingLeft: "max(16px, env(safe-area-inset-left))",
-                paddingRight: "max(16px, env(safe-area-inset-right))",
-                bottom: "max(16px, env(safe-area-inset-bottom))",
-                width: "100%",
-                boxSizing: "border-box",
-                pointerEvents: "none",
-            } },
-            React.createElement("div", { "data-pack-preview-toast-content": true, style: {
-                    margin: "0 auto",
-                    pointerEvents: "auto",
-                    minWidth: "min(640px, 100%)",
-                    maxWidth: "min(960px, 100%)",
-                    boxShadow: "0px 2px 10px 0px rgba(0, 0, 0, 0.10), 0px 0px 2px 0px rgba(0, 0, 0, 0.10)",
-                    width: "fit-content",
-                    boxSizing: "border-box",
-                    padding: "8px 12px",
-                    backgroundColor: "#1f2937",
-                    color: "#f9fafb",
-                    borderRadius: "8px",
-                    display: "flex",
-                    alignItems: "center",
-                    fontFamily: '"Inter", sans-serif',
-                    justifyContent: "space-between",
-                    gap: "8px",
-                } },
-                React.createElement("div", { style: {
-                        display: "flex",
-                        alignItems: "center",
-                        gap: "8px",
-                        overflow: "hidden",
-                        flex: "1 1 auto",
-                        minWidth: 0,
-                    } },
-                    React.createElement(Eye, { style: { width: 16, height: 16, minWidth: 16 } }),
-                    React.createElement("p", { style: {
-                            flex: 1,
-                            minWidth: 0,
-                            margin: 0,
-                            fontSize: "14px",
-                            lineHeight: "20px",
-                            display: "-webkit-box",
-                            WebkitBoxOrient: "vertical",
-                            WebkitLineClamp: 2,
-                            overflow: "hidden",
-                            overflowWrap: "anywhere",
-                        } }, buildPreviewMessage(environment, previewContext))),
-                React.createElement("button", { type: "button", "aria-label": "Exit preview mode", onClick: exitPreviewMode, style: {
-                        cursor: "pointer",
-                        fontSize: 13,
-                        fontWeight: "500",
-                        flexShrink: "0",
-                        minHeight: 44,
-                        padding: "6px 8px",
-                        border: 0,
-                        borderRadius: 4,
-                        background: "transparent",
-                        color: "inherit",
-                        fontFamily: "inherit",
-                        textDecoration: "underline",
-                        textUnderlineOffset: 2,
-                        whiteSpace: "nowrap",
-                    } }, "Exit preview"))));
-    }
-    return null;
-};