fix: page-builder security hardening + widget UX/responsive overhaul

Security
- Move pageBuilder GraphQL types (Changeset, ChangesetOperation, RolloutPlan,
  PageBuilderScope) to `.admin.*` so preview tokens, operations and creators are
  no longer readable through the public storefront /graphql endpoint (P0).
- Sanitize EditorJS HTML at the render sinks (Paragraph/RawHtml in
  common/Editor) so widget-authored content can't inject script.
- Allow-list link schemes in resolveLink (+ LinkPicker warning) to neutralize
  javascript:/data: hrefs before they reach an anchor.
- Gate changeset add-op/publish/discard/undo on created_by ownership for
  personal drafts (IDOR); rollout-backed changesets stay shared.
- SELECT ... FOR UPDATE in addChangesetOperation plus a unique
  (changeset_id, change_order) index (migration Version-1.2.0) to close the
  change_order collision / cursor lost-update race.
- Guard the publish apply-path against a duplicate widget_instance INSERT and a
  NULL widget FK on placement UPDATE so a previewable changeset can't abort.

Editor
- Fix the React #418 hydration error (a <button> nested inside the AdminUser
  account-menu trigger, firing on every admin page).
- Wire palette click-to-add (was drag-only while the hover card said "click").
- Keep the operation count live so beforeunload / exit-confirm / draft pills
  fire for work created in the current session.
- Resync the page form + saved snapshots on undo/redo so a later edit can't
  resurrect the value an undo just reverted.
- Allocate the preview sequence at fetch initiation so a stale-but-late response
  can't overwrite a newer edit.

Widgets
- Add in-editor empty-state placeholders (WidgetEmptyState) for text_block,
  featured_blogs, brand_story, faq_block and footer_menu.
- Fix responsive breakpoint jumps (TrustStrip, FeaturedBlogs, BentoGrid,
  CollectionSpotlight) and BentoGrid text contrast / scrim.
- Redesign BentoGrid around a dominant 50% hero (4-col 2x2) with rounded
  corners, soft shadow and image hover-zoom.
- Fix the image cover-fill gray bar (height:100%) across BentoGrid,
  CategoryMosaic, TieredCategories and BrandStory.
- Add nav landmarks (BasicMenu, FooterMenu) and wrap storefront strings in _().
- CollectionSpotlight: configurable view-all link (fixes the /collections 404),
  stack-until-lg responsive, 50/50 image/products split, edge-to-edge copy on
  mobile.
- Raise the product-list image to 720^2 so full-width retina thumbnails stay
  sharp (srcset cap was ~750px).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Author: treoden

packages/evershop/src/components/common/Editor.tsx

@@ -4,12 +4,13 @@ import { Row } from '@components/common/form/Editor.js';
 import { Image as ResponsiveImage } from '@components/common/Image.js';
 import { ProductData } from '@components/frontStore/catalog/ProductContext.js';
 import { ProductList } from '@components/frontStore/catalog/ProductList.js';
+import { sanitize } from '@evershop/evershop/lib/util/sanitizeHtml';
 import React from 'react';
 import { useQuery } from 'urql';
 import './Editor.scss';
 
 const Paragraph: React.FC<{ data: { text: string } }> = ({ data }) => {
-  return <p dangerouslySetInnerHTML={{ __html: data.text }} />;
+  return <p dangerouslySetInnerHTML={{ __html: sanitize(data.text) }} />;
 };
 
 const Header: React.FC<{ data: { level: number; text: string } }> = ({
@@ -119,7 +120,7 @@ const Image: React.FC<{
 };
 
 const RawHtml: React.FC<{ data: { html: string } }> = ({ data }) => {
-  return <div dangerouslySetInnerHTML={{ __html: data.html }} />;
+  return <div dangerouslySetInnerHTML={{ __html: sanitize(data.html) }} />;
 };
 
 interface SavedProduct {

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

@@ -0,0 +1,70 @@
+import React, { useEffect, useState } from 'react';
+import { isInPageBuilderIframe } from './pageBuilderMode.js';
+
+/**
+ * Shared in-editor placeholder for widgets that render nothing until they're
+ * configured. On the live storefront an unconfigured widget should render
+ * nothing (return null); but in the page-builder iframe that makes a freshly
+ * dropped widget invisible and unselectable except via the Layers panel.
+ *
+ * Drop this in the widget's empty branch instead of `return null`:
+ *
+ *   if (rows.length === 0) {
+ *     return <WidgetEmptyState type="text_block" title="Text block"
+ *       hint="Open settings to add your copy." />;
+ *   }
+ *
+ * It renders the dashed placeholder ONLY inside the page-builder iframe, and
+ * only after mount — the first (SSR) render is `null` so it matches the
+ * production storefront output and never trips hydration.
+ */
+export function WidgetEmptyState({
+  type,
+  title,
+  hint,
+  icon
+}: {
+  /** Widget type id — emitted as `data-evershop-pb-empty` for tooling. */
+  type: string;
+  title: string;
+  hint: string;
+  /** Optional custom glyph; defaults to a generic block icon. */
+  icon?: React.ReactNode;
+}): React.ReactElement | null {
+  const [isClient, setIsClient] = useState(false);
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
+
+  if (!isClient || !isInPageBuilderIframe()) return null;
+
+  return (
+    <div
+      className="evershop-widget-empty py-6"
+      data-evershop-pb-empty={type}
+    >
+      <div className="mx-auto max-w-xl rounded-lg border-2 border-dashed border-divider bg-muted/30 p-8 text-center">
+        <div className="mx-auto mb-3 flex h-10 w-10 items-center justify-center rounded-full border border-divider bg-background text-muted-foreground">
+          {icon ?? (
+            <svg
+              width="18"
+              height="18"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="1.8"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              aria-hidden="true"
+            >
+              <rect x="3" y="3" width="18" height="18" rx="2" />
+              <path d="M3 9h18M9 21V9" />
+            </svg>
+          )}
+        </div>
+        <div className="text-sm font-medium text-foreground">{title}</div>
+        <div className="mt-1 text-xs text-muted-foreground">{hint}</div>
+      </div>
+    </div>
+  );
+}

packages/evershop/src/components/common/page-builder/index.ts

@@ -9,6 +9,7 @@ export {
   useWidgetSettings
 } from './WidgetContext.js';
 export { WidgetChrome } from './WidgetChrome.js';
+export { WidgetEmptyState } from './WidgetEmptyState.js';
 export {
   WidgetSettingsScope,
   useWidgetSettingsScope,

packages/evershop/src/components/common/page-builder/pickers/LinkPicker.tsx

@@ -13,6 +13,7 @@ import {
   PromotionUrn,
   UrnService
 } from '@evershop/evershop/lib/urn';
+import { isSafeUrl } from '@evershop/evershop/lib/util/safeUrl';
 import React, { useState } from 'react';
 
 /**
@@ -222,10 +223,18 @@ export function LinkPicker({
             placeholder="/c/sale or https://example.com"
             className={drawerInputClass}
           />
-          <div className="text-[11px] text-muted-foreground">
-            {_('Paste a URL or a relative path starting with ')}
-            <code>/</code>.
-          </div>
+          {!parsed && value && !isSafeUrl(value) ? (
+            <div className="text-[11px] text-destructive">
+              {_(
+                'Only http(s), mailto, tel or relative links are allowed — this link will be ignored on the storefront.'
+              )}
+            </div>
+          ) : (
+            <div className="text-[11px] text-muted-foreground">
+              {_('Paste a URL or a relative path starting with ')}
+              <code>/</code>.
+            </div>
+          )}
         </div>
       )}
     </div>

packages/evershop/src/components/frontStore/catalog/ProductList.tsx

@@ -21,8 +21,12 @@ export interface ProductListProps {
 
 export const ProductList: React.FC<ProductListProps> = ({
   products = [],
-  imageWidth = 300,
-  imageHeight = 300,
+  // 720² keeps the 1:1 grid ratio but lifts the <Image> srcset cap (width × 3
+  // = 2160) so full-width product cards on retina phones get a sharp 1200–1920
+  // tile instead of the old 300² cap of ~750px. Display size is unchanged (CSS
+  // controls it). The `list` layout still clamps to 150 below.
+  imageWidth = 720,
+  imageHeight = 720,
   isLoading = false,
   emptyMessage = _('No products found'),
   className = '',

packages/evershop/src/lib/util/safeUrl.ts

@@ -0,0 +1,35 @@
+/**
+ * URL scheme allow-list for user/admin-authored links (widget CTAs, menu
+ * items, tile links). Blocks the `javascript:` / `data:` / `vbscript:` href
+ * XSS vector while letting through the schemes a storefront link legitimately
+ * uses.
+ *
+ * Used on both surfaces:
+ *  - server: `resolveLink` neutralizes an unsafe stored value to `null` so it
+ *    never reaches an `href` (the security boundary),
+ *  - client: the LinkPicker "Custom" tab warns the merchant as they type.
+ */
+
+const SAFE_SCHEMES = ['http', 'https', 'mailto', 'tel'];
+
+/**
+ * True when `url` is safe to place in an `href`. Relative paths, anchors and
+ * query links are safe; absolute URLs must use an allow-listed scheme.
+ *
+ * Browsers strip TAB/LF/CR anywhere in a URL and ignore leading control
+ * characters before a scheme, so `java\tscript:alert(1)` executes — the check
+ * strips control characters before inspecting the scheme to close that hole.
+ */
+export function isSafeUrl(url: unknown): boolean {
+  if (typeof url !== 'string') return false;
+  // Strip ASCII control chars (0x00-0x1F, 0x7F) so a smuggled scheme like
+  // `java\tscript:` can't slip past the scheme test below.
+   
+  const stripped = url.replace(/[\x00-\x1F\x7F]/g, '').trim();
+  if (stripped === '') return true; // empty -> nothing to render, harmless
+  // Relative path, anchor or query - no scheme, always safe.
+  if (/^(?:[/#?]|\.{1,2}\/)/.test(stripped)) return true;
+  const match = stripped.match(/^([a-zA-Z][a-zA-Z0-9+.-]*):/);
+  if (!match) return true; // no scheme (e.g. "foo/bar") -> relative, safe
+  return SAFE_SCHEMES.includes(match[1].toLowerCase());
+}

packages/evershop/src/lib/util/sanitizeHtml.ts

@@ -16,6 +16,22 @@ const sanitizeOptions: sanitizeHtml.IOptions = {
   }
 };
 
+/**
+ * Sanitize a single HTML string with the same allow-list used for stored
+ * rich-text. Safe to run isomorphically (sanitize-html is pure JS) and
+ * deterministic, so it can run at render time without a hydration mismatch.
+ *
+ * Use this at any `dangerouslySetInnerHTML` sink that renders
+ * user/admin-authored HTML — it strips `<script>`, event-handler attributes
+ * (`onerror`, …), and `javascript:`/`data:` URLs while keeping formatting.
+ */
+export function sanitize(html: unknown): string {
+  if (typeof html !== 'string' || html.length === 0) {
+    return '';
+  }
+  return sanitizeHtml(html, sanitizeOptions);
+}
+
 export interface Row {
   id: string;
   size: number;

packages/evershop/src/lib/widget/linkResolver.ts

@@ -4,6 +4,7 @@ import { select } from '../postgres/query.js';
 import { buildUrl } from '../router/buildUrl.js';
 import { UrnService } from '../urn/index.js';
 import { addProcessor, getValueSync } from '../util/registry.js';
+import { isSafeUrl } from '../util/safeUrl.js';
 
 /**
  * Widget link URN + resolver.
@@ -218,7 +219,10 @@ export async function resolveLink(
   loaders: LinkLoaders | undefined
 ): Promise<string | null> {
   if (!value) return null;
-  if (!UrnService.isValid(value)) return value; // plain URL passthrough
+  // Plain URL passthrough — but drop `javascript:`/`data:` and other unsafe
+  // schemes so a hand-authored custom link can't become an href XSS on the
+  // storefront. Returning null makes the widget suppress the anchor.
+  if (!UrnService.isValid(value)) return isSafeUrl(value) ? value : null;
   const { service, type, uuid } = UrnService.parse(value);
   const loader = loaders?.[loaderKey(service, type)];
   if (!loader) return null;

packages/evershop/src/modules/auth/pages/admin/all/AdminUser.jsx

@@ -35,13 +35,21 @@ export default function AdminUser({ adminUser = null, logoutUrl, loginPage }) {
     <div className="admin-user flex grow justify-end items-center">
       <div className="flex justify-items-start gap-2 justify-center">
         <DropdownMenu>
-          <DropdownMenuTrigger>
-            <button
-              className="w-[2.188rem] h-[2.188rem] flex items-center justify-center rounded-full bg-primary/45 font-semibold border-2 border-primary cursor-pointer hover:bg-primary/60 transition-colors"
-              onClick={(e) => e.preventDefault()}
-            >
-              {fullName[0]}
-            </button>
+          {/* `render` makes the trigger BE the avatar button. Nesting a
+              <button> inside the trigger (which renders its own <button>) is
+              invalid HTML — the browser reparents it on parse, so the
+              server-rendered markup and the hydrated DOM diverge and every
+              admin page logs React hydration error #418. */}
+          <DropdownMenuTrigger
+            aria-label={_('Account menu')}
+            render={
+              <button
+                type="button"
+                className="w-[2.188rem] h-[2.188rem] flex items-center justify-center rounded-full bg-primary/45 font-semibold border-2 border-primary cursor-pointer hover:bg-primary/60 transition-colors"
+              />
+            }
+          >
+            {fullName[0]}
           </DropdownMenuTrigger>
           <DropdownMenuContent align="end" className="w-45">
             <DropdownMenuLabel className="text-base font-normal">

packages/evershop/src/modules/blog/components/frontStore/FeaturedBlogs.tsx

@@ -1,14 +1,19 @@
+import { WidgetEmptyState } from '@components/common/page-builder/index.js';
 import {
   BlogPostCardData,
   PostListItem
 } from '@components/frontStore/blog/PostListItem.js';
 import React from 'react';
 
+// Full column ladder per setting. Blog cards carry an image + title + excerpt,
+// so they need a single column on phones and only reach 3–4 columns on real
+// desktops — jumping straight from 1 to 3/4 at `md` (768px) crushed them on
+// tablets. 2-up fills the 640–1023px range.
 const GRID_COLS: Record<number, string> = {
   1: 'grid-cols-1',
-  2: 'md:grid-cols-2',
-  3: 'md:grid-cols-3',
-  4: 'md:grid-cols-4'
+  2: 'grid-cols-1 sm:grid-cols-2',
+  3: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3',
+  4: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-4'
 };
 
 interface FeaturedBlogsProps {
@@ -26,25 +31,37 @@ export default function FeaturedBlogs({
 }: FeaturedBlogsProps) {
   const widget = featuredBlogsWidget;
   if (!widget || !widget.posts || widget.posts.length === 0) {
-    return null;
+    return (
+      <WidgetEmptyState
+        type="featured_blogs"
+        title="Featured blogs"
+        hint="Pick posts to feature in the settings panel."
+      />
+    );
   }
   const cols = widget.columns || 3;
   const gridClass = GRID_COLS[cols] || GRID_COLS[3];
 
   return (
-    <div className="featured-blogs page-width py-8">
+    // Match the shared band rhythm (py-6 md:py-10) and theme tokens used by
+    // the other widgets, and don't self-apply `page-width` — it double-pads /
+    // re-centers when the widget is dropped inside a Section or Columns. Width
+    // comes from the surrounding Area/Section like every other widget.
+    <div className="featured-blogs py-6 md:py-10">
       {widget.eyebrow && (
-        <p className="text-sm uppercase tracking-wide text-gray-500">
+        <p className="text-[11px] font-semibold uppercase tracking-widest text-foreground/70">
           {widget.eyebrow}
         </p>
       )}
       {widget.heading && (
-        <h2 className="text-2xl font-bold mb-2">{widget.heading}</h2>
+        <h2 className="mt-1 text-2xl font-semibold tracking-tight md:text-3xl">
+          {widget.heading}
+        </h2>
       )}
       {widget.subText && (
-        <p className="text-gray-600 mb-6">{widget.subText}</p>
+        <p className="mt-2 mb-6 text-muted-foreground">{widget.subText}</p>
       )}
-      <div className={`grid grid-cols-1 ${gridClass} gap-8`}>
+      <div className={`mt-6 grid ${gridClass} gap-8`}>
         {widget.posts.map((post) => (
           <PostListItem key={post.uuid} post={post} />
         ))}