fix: No droppable zone when no widget

Author: treoden

packages/evershop/src/components/common/page-builder/PageBuilderBridge.tsx

@@ -4,6 +4,7 @@ import {
   isInPageBuilderIframe,
   markPageBuilderActive
 } from './pageBuilderMode.js';
+import { ensureChromeStyleInjected } from './WidgetChrome.js';
 
 /**
  * Listens for `data-update` postMessages from the admin window and applies
@@ -102,6 +103,12 @@ export function PageBuilderBridge(): null {
     markPageBuilderActive();
 
     ensureGlobalsOutlineStyle();
+    // The chrome stylesheet carries the `[data-evershop-pb-dropzone]` sizing /
+    // visibility rules. `WidgetChrome` injects it too, but only mounts per
+    // existing widget — so on a route with no widgets the drop zones would
+    // have no CSS and stay invisible / zero-height. Inject here (always
+    // mounted in the iframe) so drop zones work on a fresh, empty store.
+    ensureChromeStyleInjected();
 
     // Capture-phase link guard: edit mode disables in-preview navigation.
     // The page-builder session lives in the iframe's URL (`?changeset=`),
@@ -154,6 +161,22 @@ export function PageBuilderBridge(): null {
         | null;
       if (!raw) return;
 
+      // Drag lifecycle: the admin posts `pb-drag-start` / `pb-drag-end` when a
+      // palette drag begins / ends. Toggling `body[data-evershop-pb-drag]`
+      // reveals every drop zone via the chrome CSS. `WidgetChrome` also
+      // listens, but only when a widget is mounted — handling it here too
+      // makes drops work on a route with no widgets. Setting / removing the
+      // attribute is idempotent, so both listeners firing is harmless.
+      const dragType = (raw as { type?: string }).type;
+      if (dragType === 'pb-drag-start') {
+        document.body.setAttribute('data-evershop-pb-drag', 'true');
+        return;
+      }
+      if (dragType === 'pb-drag-end') {
+        document.body.removeAttribute('data-evershop-pb-drag');
+        return;
+      }
+
       // Globals-view toggle: outline `[data-evershop-global]` areas.
       if ((raw as GlobalsViewMessage).type === 'globals-view') {
         const enabled = !!(raw as GlobalsViewMessage).enabled;

packages/evershop/src/components/common/page-builder/WidgetChrome.tsx

@@ -89,7 +89,17 @@ const CHROME_CSS = `
   }
 `;
 
-function ensureChromeStyleInjected(): void {
+/**
+ * Inject the page-builder chrome stylesheet (widget outlines, toolbar
+ * visibility, and — critically — the `[data-evershop-pb-dropzone]` sizing /
+ * visibility rules) once per document. Idempotent via the element-id guard.
+ *
+ * Exported because the drop-zone rules must exist even on a route with **no
+ * widgets** (a fresh store): `WidgetChrome` only mounts per existing widget,
+ * so `PageBuilderBridge` (always mounted in the iframe) also calls this to
+ * guarantee the stylesheet is present regardless of widget count.
+ */
+export function ensureChromeStyleInjected(): void {
   if (typeof document === 'undefined') return;
   if (document.getElementById(CHROME_STYLE_ID)) return;
   const el = document.createElement('style');