@drawnagency/primitives 0.1.119 → 0.1.120

package/dist/{chunk-G6O3TYPJ.js → chunk-HZTPF6OK.js}

@@ -712,14 +712,18 @@ function Popover({
     panel.style.left = "";
     panel.style.right = "";
   }, [isOpen, align]);
-  useStackedEscape(onClose, { enabled: isOpen });
+  const escapeLayerRef = useStackedEscape(onClose, { enabled: isOpen });
+  useLayoutEffect(() => {
+    escapeLayerRef.current = isOpen ? anchorRef.current?.closest("[data-modal-layer]") ?? null : null;
+  }, [isOpen, anchorRef, escapeLayerRef]);
   useEffect3(() => {
     if (!isOpen) return;
     function onMouseDown(e) {
       const target = e.target;
       if (panelRef.current?.contains(target)) return;
       if (anchorRef.current?.contains(target)) return;
-      if (target instanceof Element && target.closest("[data-modal-layer]")) return;
+      const layer = target instanceof Element ? target.closest("[data-modal-layer]") : null;
+      if (layer && !layer.contains(anchorRef.current)) return;
       onClose();
     }
     document.addEventListener("mousedown", onMouseDown);
@@ -738,6 +742,7 @@ function Popover({
           ref: panelRef,
           role: "dialog",
           "aria-modal": "false",
+          "data-popover": "",
           style: {
             position: "fixed",
             left: `${fixedPos.left}px`,
@@ -757,8 +762,10 @@ function Popover({
       ref: panelRef,
       role: "dialog",
       "aria-modal": "false",
+      "data-popover": "",
       className: cn(
-        "absolute top-full z-50 mt-1 rounded-md border border-base-200 bg-base shadow-lg",
+        "absolute z-50 rounded-md border border-base-200 bg-base shadow-lg",
+        placement === "top" ? "bottom-full mb-1" : "top-full mt-1",
         effectiveAlign === "end" ? "right-0" : "left-0",
         className
       ),

package/dist/{chunk-YKKGVSJH.js → chunk-UZBFVVTC.js}

@@ -12,7 +12,7 @@ import {
   canDropBlock,
   isBlockDragData,
   useOptionalEditorContext
-} from "./chunk-G6O3TYPJ.js";
+} from "./chunk-HZTPF6OK.js";
 import {
   EditableRichText,
   defineHeadingSection,

package/dist/components/editor/AudienceIndicator.d.ts

@@ -3,8 +3,10 @@ interface AudienceChecklistProps {
     access: string[];
     audiences: Audience[];
     onToggle: (name: string) => void;
+    /** Bulk edit: audiences only some of the selected sections have. */
+    partial?: string[];
 }
-export declare function AudienceChecklist({ access, audiences, onToggle }: AudienceChecklistProps): import("react/jsx-runtime").JSX.Element;
+export declare function AudienceChecklist({ access, audiences, onToggle, partial }: AudienceChecklistProps): import("react/jsx-runtime").JSX.Element;
 interface AudienceIndicatorProps {
     access: string[];
     audiences: Audience[];

package/dist/components/editor/AudienceIndicator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AudienceIndicator.d.ts","sourceRoot":"","sources":["../../../src/components/editor/AudienceIndicator.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEjD,UAAU,sBAAsB;IAC9B,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,SAAS,EAAE,QAAQ,EAAE,CAAC;IACtB,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CAClC;AAED,wBAAgB,iBAAiB,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,sBAAsB,2CAyCxF;AAED,UAAU,sBAAsB;IAC9B,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,SAAS,EAAE,QAAQ,EAAE,CAAC;IACtB,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACrC,qFAAqF;IACrF,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,wBAAgB,iBAAiB,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,sBAAsB,2CA+BlG"}
+{"version":3,"file":"AudienceIndicator.d.ts","sourceRoot":"","sources":["../../../src/components/editor/AudienceIndicator.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEjD,UAAU,sBAAsB;IAC9B,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,SAAS,EAAE,QAAQ,EAAE,CAAC;IACtB,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,oEAAoE;IACpE,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;CACpB;AAED,wBAAgB,iBAAiB,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAY,EAAE,EAAE,sBAAsB,2CA2CtG;AAED,UAAU,sBAAsB;IAC9B,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,SAAS,EAAE,QAAQ,EAAE,CAAC;IACtB,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACrC,qFAAqF;IACrF,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,wBAAgB,iBAAiB,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,sBAAsB,2CA+BlG"}

package/dist/components/editor/IndicatorPill.d.ts

@@ -15,7 +15,9 @@ interface IndicatorPillProps {
     /** Display-only mode: dots/label still render but the popovers never open
      *  (e.g. while another editor holds the section lock). */
     disabled?: boolean;
+    /** Open the click popover above the pill — for pills in a bottom-pinned bar. */
+    placement?: "bottom" | "top";
 }
-export declare function IndicatorPill({ dots, label, hoverContent, clickContent, className, buttonClassName, ariaLabel, disabled, }: IndicatorPillProps): import("react/jsx-runtime").JSX.Element;
+export declare function IndicatorPill({ dots, label, hoverContent, clickContent, className, buttonClassName, ariaLabel, disabled, placement, }: IndicatorPillProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=IndicatorPill.d.ts.map

package/dist/components/editor/IndicatorPill.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IndicatorPill.d.ts","sourceRoot":"","sources":["../../../src/components/editor/IndicatorPill.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA4C,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAIjF,UAAU,MAAM;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,UAAU,kBAAkB;IAC1B,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,0FAA0F;IAC1F,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,YAAY,CAAC,EAAE,SAAS,GAAG,CAAC,CAAC,OAAO,EAAE,MAAM,IAAI,KAAK,SAAS,CAAC,CAAC;IAChE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;8DAC0D;IAC1D,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,wBAAgB,aAAa,CAAC,EAC5B,IAAI,EACJ,KAAK,EACL,YAAY,EACZ,YAAY,EACZ,SAAS,EACT,eAAe,EACf,SAAS,EACT,QAAQ,GACT,EAAE,kBAAkB,2CAmGpB"}
+{"version":3,"file":"IndicatorPill.d.ts","sourceRoot":"","sources":["../../../src/components/editor/IndicatorPill.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA4C,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAIjF,UAAU,MAAM;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,UAAU,kBAAkB;IAC1B,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,0FAA0F;IAC1F,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,YAAY,CAAC,EAAE,SAAS,GAAG,CAAC,CAAC,OAAO,EAAE,MAAM,IAAI,KAAK,SAAS,CAAC,CAAC;IAChE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;8DAC0D;IAC1D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gFAAgF;IAChF,SAAS,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC;CAC9B;AAED,wBAAgB,aAAa,CAAC,EAC5B,IAAI,EACJ,KAAK,EACL,YAAY,EACZ,YAAY,EACZ,SAAS,EACT,eAAe,EACf,SAAS,EACT,QAAQ,EACR,SAAoB,GACrB,EAAE,kBAAkB,2CAoGpB"}

package/dist/components/editor/SectionBulkEditModal.d.ts

@@ -0,0 +1,25 @@
+import type { LoadedSection } from "../../lib/loader";
+import type { MediaManifest } from "../../media/types";
+import type { Audience } from "../../auth/types";
+type Status = "draft" | "live" | "archived";
+interface SectionBulkEditModalProps {
+    sections: LoadedSection[];
+    mediaManifest: MediaManifest;
+    audiences: Audience[];
+    /** Sections another editor holds. They stay draggable but can't be selected,
+     *  matching the canvas, where a held section's status and audience are locked. */
+    locks: ReadonlyMap<string, {
+        email: string;
+    }>;
+    onReorder: (fromIndex: number, toIndex: number) => void;
+    onStatusChange: (sectionId: string, status: Status) => void;
+    onAccessChange: (sectionId: string, access: string[]) => void;
+}
+/**
+ * The toolbar's "Edit sections" panel: drag rows to reorder, or tick several and
+ * set their status and audience at once from the bar that appears. Every change
+ * applies to the working copy immediately, like the per-section pills it reuses.
+ */
+export declare function SectionBulkEditModal({ sections, mediaManifest, audiences, locks, onReorder, onStatusChange, onAccessChange, }: SectionBulkEditModalProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=SectionBulkEditModal.d.ts.map

package/dist/components/editor/SectionBulkEditModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SectionBulkEditModal.d.ts","sourceRoot":"","sources":["../../../src/components/editor/SectionBulkEditModal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEtD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AACvD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAajD,KAAK,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,UAAU,CAAC;AAI5C,UAAU,yBAAyB;IACjC,QAAQ,EAAE,aAAa,EAAE,CAAC;IAC1B,aAAa,EAAE,aAAa,CAAC;IAC7B,SAAS,EAAE,QAAQ,EAAE,CAAC;IACtB;sFACkF;IAClF,KAAK,EAAE,WAAW,CAAC,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAC9C,SAAS,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACxD,cAAc,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5D,cAAc,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CAC/D;AAiHD;;;;GAIG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,QAAQ,EACR,aAAa,EACb,SAAS,EACT,KAAK,EACL,SAAS,EACT,cAAc,EACd,cAAc,GACf,EAAE,yBAAyB,2CAyK3B"}

package/dist/components/editor/StatusIndicator.d.ts

@@ -15,8 +15,10 @@ interface DeriveResult {
     description: string;
 }
 export declare function deriveStatusDisplay({ mainStatus, savedStatus, contentDiffers, isLocalOnly }: DeriveInput): DeriveResult;
+export declare const dotColorClasses: Record<StatusColor, string>;
 interface StatusRadioListProps {
-    status: Status;
+    /** null when several sections with different statuses are being set at once. */
+    status: Status | null;
     onChange: (status: Status) => void;
     onClose?: () => void;
     ariaLabel?: string;

package/dist/components/editor/StatusIndicator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StatusIndicator.d.ts","sourceRoot":"","sources":["../../../src/components/editor/StatusIndicator.tsx"],"names":[],"mappings":"AAKA,KAAK,WAAW,GAAG,OAAO,GAAG,MAAM,GAAG,UAAU,GAAG,UAAU,CAAC;AAC9D,KAAK,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,UAAU,CAAC;AAE5C,UAAU,MAAM;IACd,KAAK,EAAE,WAAW,CAAC;CACpB;AAED,UAAU,WAAW;IACnB,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,OAAO,CAAC;IACxB,WAAW,EAAE,OAAO,CAAC;CACtB;AAED,UAAU,YAAY;IACpB,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,OAAO,EAAE,OAAO,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;CACrB;AAgBD,wBAAgB,mBAAmB,CAAC,EAAE,UAAU,EAAE,WAAW,EAAE,cAAc,EAAE,WAAW,EAAE,EAAE,WAAW,GAAG,YAAY,CAkCvH;AAYD,UAAU,oBAAoB;IAC5B,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,eAAe,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,SAA4B,EAAE,EAAE,oBAAoB,2CA2BhH;AAED,UAAU,oBAAoB;IAC5B,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,OAAO,CAAC;IACxB,WAAW,EAAE,OAAO,CAAC;IACrB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,kFAAkF;IAClF,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,wBAAgB,eAAe,CAAC,EAC9B,UAAU,EACV,WAAW,EACX,cAAc,EACd,WAAW,EACX,MAAM,EACN,KAAK,EACL,QAAQ,EACR,QAAQ,GACT,EAAE,oBAAoB,2CAsBtB"}
+{"version":3,"file":"StatusIndicator.d.ts","sourceRoot":"","sources":["../../../src/components/editor/StatusIndicator.tsx"],"names":[],"mappings":"AAKA,KAAK,WAAW,GAAG,OAAO,GAAG,MAAM,GAAG,UAAU,GAAG,UAAU,CAAC;AAC9D,KAAK,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,UAAU,CAAC;AAE5C,UAAU,MAAM;IACd,KAAK,EAAE,WAAW,CAAC;CACpB;AAED,UAAU,WAAW;IACnB,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,OAAO,CAAC;IACxB,WAAW,EAAE,OAAO,CAAC;CACtB;AAED,UAAU,YAAY;IACpB,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,OAAO,EAAE,OAAO,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;CACrB;AAgBD,wBAAgB,mBAAmB,CAAC,EAAE,UAAU,EAAE,WAAW,EAAE,cAAc,EAAE,WAAW,EAAE,EAAE,WAAW,GAAG,YAAY,CAkCvH;AAED,eAAO,MAAM,eAAe,EAAE,MAAM,CAAC,WAAW,EAAE,MAAM,CAKvD,CAAC;AAKF,UAAU,oBAAoB;IAC5B,gFAAgF;IAChF,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,eAAe,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,SAA4B,EAAE,EAAE,oBAAoB,2CA2BhH;AAED,UAAU,oBAAoB;IAC5B,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,OAAO,CAAC;IACxB,WAAW,EAAE,OAAO,CAAC;IACrB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,kFAAkF;IAClF,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,wBAAgB,eAAe,CAAC,EAC9B,UAAU,EACV,WAAW,EACX,cAAc,EACd,WAAW,EACX,MAAM,EACN,KAAK,EACL,QAAQ,EACR,QAAQ,GACT,EAAE,oBAAoB,2CAsBtB"}

package/dist/components/editor/index.js

@@ -12,7 +12,7 @@ import {
   canDropBlock,
   isBlockDragData,
   useEditorContext
-} from "../../chunk-G6O3TYPJ.js";
+} from "../../chunk-HZTPF6OK.js";
 import "../../chunk-GGYY3JQJ.js";
 import {
   CheckboxBox
@@ -71,7 +71,8 @@ function IndicatorPill({
   className,
   buttonClassName,
   ariaLabel,
-  disabled
+  disabled,
+  placement = "bottom"
 }) {
   const [hoverOpen, setHoverOpen] = useState(false);
   const [clickOpen, setClickOpen] = useState(false);
@@ -154,6 +155,7 @@ function IndicatorPill({
         isOpen: clickOpen,
         onClose: handleClickClose,
         anchorRef: buttonRef,
+        placement,
         className: "min-w-full max-w-xs",
         children: typeof clickContent === "function" ? clickContent(handleClickClose) : clickContent
       }
@@ -272,30 +274,34 @@ function StatusIndicator({
 }
 
 // src/components/editor/AudienceIndicator.tsx
-import { Check as Check2 } from "lucide-react";
+import { Check as Check2, Minus } from "lucide-react";
 import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
-function AudienceChecklist({ access, audiences, onToggle }) {
+function AudienceChecklist({ access, audiences, onToggle, partial = [] }) {
   if (audiences.length === 0) {
     return /* @__PURE__ */ jsx4("div", { className: "px-3 py-2 text-xs text-base-contrast-light whitespace-nowrap", children: "No audiences configured. Add audiences in Site Settings \u2192 Viewer Access." });
   }
   return /* @__PURE__ */ jsx4("ul", { role: "list", className: "w-full overflow-hidden py-1", children: audiences.map((a) => {
     const checked = access.includes(a.name);
+    const mixed = !checked && partial.includes(a.name);
     return /* @__PURE__ */ jsx4("li", { children: /* @__PURE__ */ jsxs4(
       PopoverItem,
       {
         role: "checkbox",
-        "aria-checked": checked,
+        "aria-checked": mixed ? "mixed" : checked,
         onClick: () => onToggle(a.name),
         children: [
-          /* @__PURE__ */ jsx4(
+          /* @__PURE__ */ jsxs4(
             "span",
             {
               "aria-hidden": "true",
               className: cn(
                 "flex h-5 w-5 shrink-0 items-center justify-center rounded border transition-colors",
-                checked ? "border-primary bg-primary text-primary-contrast" : "border-base-300 bg-base"
+                checked || mixed ? "border-primary bg-primary text-primary-contrast" : "border-base-300 bg-base"
               ),
-              children: checked && /* @__PURE__ */ jsx4(Check2, { size: 14, strokeWidth: 3 })
+              children: [
+                checked && /* @__PURE__ */ jsx4(Check2, { size: 14, strokeWidth: 3 }),
+                mixed && /* @__PURE__ */ jsx4(Minus, { size: 14, strokeWidth: 3 })
+              ]
             }
           ),
           /* @__PURE__ */ jsx4(

package/dist/components/sections/register-schemas.js

@@ -1,7 +1,7 @@
 import {
   allSectionDefs
-} from "../../chunk-YKKGVSJH.js";
-import "../../chunk-G6O3TYPJ.js";
+} from "../../chunk-UZBFVVTC.js";
+import "../../chunk-HZTPF6OK.js";
 import "../../chunk-UNFPATDE.js";
 import "../../chunk-GGYY3JQJ.js";
 import "../../chunk-RIN2QCYJ.js";

package/dist/components/sections/register.js

@@ -1,7 +1,7 @@
 import {
   allSectionDefs
-} from "../../chunk-YKKGVSJH.js";
-import "../../chunk-G6O3TYPJ.js";
+} from "../../chunk-UZBFVVTC.js";
+import "../../chunk-HZTPF6OK.js";
 import "../../chunk-UNFPATDE.js";
 import "../../chunk-GGYY3JQJ.js";
 import "../../chunk-RIN2QCYJ.js";

package/dist/components/shared/Popover.d.ts

@@ -13,7 +13,7 @@ interface PopoverProps {
      * panel wider than the sidebar is clipped and adds a horizontal scrollbar.
      */
     portal?: boolean;
-    /** Which side of the anchor to open toward. Only used with `portal`. */
+    /** Which side of the anchor to open toward. */
     placement?: "bottom" | "top";
 }
 export declare function Popover({ isOpen, onClose, anchorRef, children, align, className, portal, placement, }: PopoverProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/shared/Popover.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../../src/components/shared/Popover.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAgD,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAMrG,UAAU,YAAY;IACpB,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IACzC,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,MAAM,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,wEAAwE;IACxE,SAAS,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC;CAC9B;AAED,wBAAgB,OAAO,CAAC,EACtB,MAAM,EACN,OAAO,EACP,SAAS,EACT,QAAQ,EACR,KAAc,EACd,SAAS,EACT,MAAc,EACd,SAAoB,GACrB,EAAE,YAAY,kDA8Id"}
+{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../../src/components/shared/Popover.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAgD,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAMrG,UAAU,YAAY;IACpB,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IACzC,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,MAAM,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,+CAA+C;IAC/C,SAAS,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC;CAC9B;AAED,wBAAgB,OAAO,CAAC,EACtB,MAAM,EACN,OAAO,EACP,SAAS,EACT,QAAQ,EACR,KAAc,EACd,SAAS,EACT,MAAc,EACd,SAAoB,GACrB,EAAE,YAAY,kDA2Jd"}

package/dist/components/shared/SectionSummaryRow.d.ts

@@ -15,7 +15,7 @@ interface Props {
 }
 /**
  * One section as a compact card: type over label, with a thumbnail cluster.
- * Shared by the reorder modal (which wraps it in a drag handle + drop
+ * Shared by the Edit sections modal (which wraps it in a drag handle + drop
  * indicator) and the Audience Details page (which dims unavailable rows), so
  * both read as the same list of the same site.
  */

package/dist/components/shell/EditorModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EditorModal.d.ts","sourceRoot":"","sources":["../../../src/components/shell/EditorModal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA4B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AASjE,UAAU,gBAAgB;IACxB,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,UAAU,GAAG,OAAO,GAAG,UAAU,CAAC;IACzC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,WAAW,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,QAAgB,EAAE,IAAiB,EAAE,SAAiB,EAAE,MAAc,EAAE,QAAQ,EAAE,EAAE,gBAAgB,sCAqFzJ"}
+{"version":3,"file":"EditorModal.d.ts","sourceRoot":"","sources":["../../../src/components/shell/EditorModal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAyC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAS9E,UAAU,gBAAgB;IACxB,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,UAAU,GAAG,OAAO,GAAG,UAAU,CAAC;IACzC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,WAAW,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,QAAgB,EAAE,IAAiB,EAAE,SAAiB,EAAE,MAAc,EAAE,QAAQ,EAAE,EAAE,gBAAgB,sCAwFzJ"}

package/dist/components/shell/EditorShell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EditorShell.d.ts","sourceRoot":"","sources":["../../../src/components/shell/EditorShell.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAWjD,OAAO,EAAoC,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AA4CtF,OAAO,KAAK,EAAE,eAAe,EAA2D,MAAM,oBAAoB,CAAC;AA6DnH,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AA8BxD,UAAU,KAAK;IACb,OAAO,EAAE,MAAM,CAAC;IAIhB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,QAAQ,EAAE,CAAC;IACtB,YAAY,EAAE;QACZ,KAAK,EAAE,OAAO,CAAC;QACf,aAAa,EAAE,OAAO,CAAC;QACvB,YAAY,EAAE,OAAO,CAAC;QACtB,cAAc,EAAE,OAAO,CAAC;QACxB,kBAAkB,EAAE,OAAO,CAAC;QAC5B,cAAc,EAAE,OAAO,CAAC;KACzB,CAAC;IACF,WAAW,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,OAAO,GAAG,QAAQ,CAAA;KAAE,GAAG,IAAI,CAAC;IAIhE,sBAAsB,CAAC,EAAE,OAAO,CAAC;IAKjC,eAAe,CAAC,EAAE,eAAe,GAAG,IAAI,CAAC;CAC1C;AAQD,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,OAAO,EACP,YAAY,EACZ,MAAM,EACN,SAAS,EAAE,gBAAgB,EAC3B,YAAY,EACZ,WAAW,EACX,sBAA8B,EAC9B,eAAe,GAChB,EAAE,KAAK,2CA4rEP;AA8ED;6EAC6E;AAC7E,wBAAgB,kBAAkB,CAChC,YAAY,EAAE,WAAW,CAAC,YAAY,CAAC,EACvC,aAAa,EAAE,MAAM,GAAG,IAAI,EAC5B,eAAe,EAAE,MAAM,GAAG,IAAI;;;;;;;;;EAK/B"}
+{"version":3,"file":"EditorShell.d.ts","sourceRoot":"","sources":["../../../src/components/shell/EditorShell.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAWjD,OAAO,EAAoC,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AA4CtF,OAAO,KAAK,EAAE,eAAe,EAA2D,MAAM,oBAAoB,CAAC;AA6DnH,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AA8BxD,UAAU,KAAK;IACb,OAAO,EAAE,MAAM,CAAC;IAIhB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,QAAQ,EAAE,CAAC;IACtB,YAAY,EAAE;QACZ,KAAK,EAAE,OAAO,CAAC;QACf,aAAa,EAAE,OAAO,CAAC;QACvB,YAAY,EAAE,OAAO,CAAC;QACtB,cAAc,EAAE,OAAO,CAAC;QACxB,kBAAkB,EAAE,OAAO,CAAC;QAC5B,cAAc,EAAE,OAAO,CAAC;KACzB,CAAC;IACF,WAAW,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,OAAO,GAAG,QAAQ,CAAA;KAAE,GAAG,IAAI,CAAC;IAIhE,sBAAsB,CAAC,EAAE,OAAO,CAAC;IAKjC,eAAe,CAAC,EAAE,eAAe,GAAG,IAAI,CAAC;CAC1C;AAQD,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,OAAO,EACP,YAAY,EACZ,MAAM,EACN,SAAS,EAAE,gBAAgB,EAC3B,YAAY,EACZ,WAAW,EACX,sBAA8B,EAC9B,eAAe,GAChB,EAAE,KAAK,2CAgsEP;AA8ED;6EAC6E;AAC7E,wBAAgB,kBAAkB,CAChC,YAAY,EAAE,WAAW,CAAC,YAAY,CAAC,EACvC,aAAa,EAAE,MAAM,GAAG,IAAI,EAC5B,eAAe,EAAE,MAAM,GAAG,IAAI;;;;;;;;;EAK/B"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drawnagency/primitives",
-  "version": "0.1.119",
+  "version": "0.1.120",
   "description": "Browser-safe foundation of the Brand Portal framework: Zod schemas, section components, editor shell, hooks, pure libs, collab contract.",
   "type": "module",
   "exports": {

package/src/components/editor/AudienceIndicator.tsx

@@ -1,4 +1,4 @@
-import { Check } from "lucide-react";
+import { Check, Minus } from "lucide-react";
 import { cn } from "../../lib/cn";
 import { IndicatorPill } from "./IndicatorPill";
 import { PopoverItem } from "../shared/PopoverItem";
@@ -8,9 +8,11 @@ interface AudienceChecklistProps {
   access: string[];
   audiences: Audience[];
   onToggle: (name: string) => void;
+  /** Bulk edit: audiences only some of the selected sections have. */
+  partial?: string[];
 }
 
-export function AudienceChecklist({ access, audiences, onToggle }: AudienceChecklistProps) {
+export function AudienceChecklist({ access, audiences, onToggle, partial = [] }: AudienceChecklistProps) {
   if (audiences.length === 0) {
     return (
       <div className="px-3 py-2 text-xs text-base-contrast-light whitespace-nowrap">
@@ -22,23 +24,25 @@ export function AudienceChecklist({ access, audiences, onToggle }: AudienceCheck
     <ul role="list" className="w-full overflow-hidden py-1">
       {audiences.map((a) => {
         const checked = access.includes(a.name);
+        const mixed = !checked && partial.includes(a.name);
         return (
           <li key={a.name}>
             <PopoverItem
               role="checkbox"
-              aria-checked={checked}
+              aria-checked={mixed ? "mixed" : checked}
               onClick={() => onToggle(a.name)}
             >
               <span
                 aria-hidden="true"
                 className={cn(
                   "flex h-5 w-5 shrink-0 items-center justify-center rounded border transition-colors",
-                  checked
+                  checked || mixed
                     ? "border-primary bg-primary text-primary-contrast"
                     : "border-base-300 bg-base",
                 )}
               >
                 {checked && <Check size={14} strokeWidth={3} />}
+                {mixed && <Minus size={14} strokeWidth={3} />}
               </span>
               <span
                 className="h-3 w-3 shrink-0 rounded-full border border-base-200"

package/src/components/editor/IndicatorPill.tsx

@@ -19,6 +19,8 @@ interface IndicatorPillProps {
   /** Display-only mode: dots/label still render but the popovers never open
    *  (e.g. while another editor holds the section lock). */
   disabled?: boolean;
+  /** Open the click popover above the pill — for pills in a bottom-pinned bar. */
+  placement?: "bottom" | "top";
 }
 
 export function IndicatorPill({
@@ -30,6 +32,7 @@ export function IndicatorPill({
   buttonClassName,
   ariaLabel,
   disabled,
+  placement = "bottom",
 }: IndicatorPillProps) {
   const [hoverOpen, setHoverOpen] = useState(false);
   const [clickOpen, setClickOpen] = useState(false);
@@ -123,6 +126,7 @@ export function IndicatorPill({
         isOpen={clickOpen}
         onClose={handleClickClose}
         anchorRef={buttonRef}
+        placement={placement}
         className="min-w-full max-w-xs"
       >
         {typeof clickContent === "function" ? clickContent(handleClickClose) : clickContent}

package/src/components/editor/SectionBulkEditModal.tsx

@@ -0,0 +1,328 @@
+import { useRef, useState } from "react";
+import { Check, ChevronDown, Lock, Minus, X } from "lucide-react";
+import type { LoadedSection } from "../../lib/loader";
+import { getSection } from "../../lib/registry";
+import type { MediaManifest } from "../../media/types";
+import type { Audience } from "../../auth/types";
+import { DragHandle } from "./DragHandle";
+import { useSortableRow } from "../../hooks/useSortableRow";
+import { DropEdgeIndicator } from "./DropEdgeIndicator";
+import { IndicatorPill } from "./IndicatorPill";
+import { StatusRadioList, dotColorClasses } from "./StatusIndicator";
+import { AudienceChecklist } from "./AudienceIndicator";
+import { SectionSummaryRow } from "../shared/SectionSummaryRow";
+import { Popover } from "../shared/Popover";
+import { PopoverItem } from "../shared/PopoverItem";
+import { toThumbViews } from "../../lib/thumb-views";
+import { cn } from "../../lib/cn";
+
+type Status = "draft" | "live" | "archived";
+const STATUSES: Status[] = ["draft", "live", "archived"];
+type Coverage = "all" | "some" | "none";
+
+interface SectionBulkEditModalProps {
+  sections: LoadedSection[];
+  mediaManifest: MediaManifest;
+  audiences: Audience[];
+  /** Sections another editor holds. They stay draggable but can't be selected,
+   *  matching the canvas, where a held section's status and audience are locked. */
+  locks: ReadonlyMap<string, { email: string }>;
+  onReorder: (fromIndex: number, toIndex: number) => void;
+  onStatusChange: (sectionId: string, status: Status) => void;
+  onAccessChange: (sectionId: string, access: string[]) => void;
+}
+
+function audienceLabel(selected: Audience[]): string {
+  if (selected.length === 0) return "No audience";
+  if (selected.length === 1) return selected[0].displayName;
+  return `${selected.length} audiences`;
+}
+
+function coverage(sections: LoadedSection[], name: string): Coverage {
+  const n = sections.filter((s) => s.meta.access.includes(name)).length;
+  if (n === 0) return "none";
+  return n === sections.length ? "all" : "some";
+}
+
+function CheckBox({ state }: { state: Coverage }) {
+  return (
+    <span
+      aria-hidden="true"
+      className={cn(
+        "flex h-4 w-4 shrink-0 items-center justify-center rounded border transition-colors",
+        state === "none" ? "border-base-300 bg-base" : "border-primary bg-primary text-primary-contrast",
+      )}
+    >
+      {state === "all" && <Check size={12} strokeWidth={3} />}
+      {state === "some" && <Minus size={12} strokeWidth={3} />}
+    </span>
+  );
+}
+
+function SectionRow({
+  section,
+  index,
+  mediaManifest,
+  audiences,
+  selected,
+  lockedBy,
+  onToggle,
+  onReorder,
+}: {
+  section: LoadedSection;
+  index: number;
+  mediaManifest: MediaManifest;
+  audiences: Audience[];
+  selected: boolean;
+  lockedBy: string | null;
+  onToggle: (range: boolean) => void;
+  onReorder: (fromIndex: number, toIndex: number) => void;
+}) {
+  const { rowRef, handleRef, isDragging, closestEdge } = useSortableRow<HTMLDivElement, HTMLButtonElement>({
+    index,
+    dragType: "ordering-row",
+    onReorder,
+  });
+
+  const definition = getSection(section.section.type);
+  const label = definition?.getLabel?.(section.section) ?? definition?.label ?? section.section.type;
+  const typeLabel = definition?.label ?? section.section.type;
+  const status = section.meta.status as Status;
+  const access = audiences.filter((a) => section.meta.access.includes(a.name));
+
+  return (
+    <div ref={rowRef} className={cn("relative flex items-center gap-1", isDragging && "opacity-50")}>
+      <DropEdgeIndicator edge={closestEdge} />
+
+      {lockedBy ? (
+        <span title={`Being edited by ${lockedBy}`} className="flex h-8 w-8 shrink-0 items-center justify-center text-base-contrast-light">
+          <Lock size={14} aria-label={`${label} is being edited by ${lockedBy}`} />
+        </span>
+      ) : (
+        <button
+          type="button"
+          role="checkbox"
+          aria-checked={selected}
+          aria-label={`Select ${label}`}
+          onClick={(e) => onToggle(e.shiftKey)}
+          className="flex h-8 w-8 shrink-0 cursor-pointer items-center justify-center"
+        >
+          <CheckBox state={selected ? "all" : "none"} />
+        </button>
+      )}
+
+      <div className="shrink-0 [&_[role=tooltip]]:hidden">
+        <DragHandle ref={handleRef} />
+      </div>
+
+      <SectionSummaryRow
+        label={label}
+        typeLabel={typeLabel}
+        thumbnails={toThumbViews(definition?.getThumbnails?.(section.section) ?? [], mediaManifest)}
+        className={cn(selected && "border-primary/60 bg-primary/5", isDragging && "outline outline-2 outline-primary/50")}
+        trailing={
+          <div className="flex shrink-0 flex-col items-end gap-0.5 text-xs text-base-contrast-light">
+            <span className="inline-flex items-center gap-1.5 capitalize">
+              <span aria-hidden="true" className={cn("h-2.5 w-2.5 rounded-full border border-base-200", dotColorClasses[status])} />
+              {status}
+            </span>
+            <span className="inline-flex items-center gap-1.5">
+              {access.length > 0 && (
+                <span aria-hidden="true" className="flex -space-x-1">
+                  {access.slice(0, 3).map((a) => (
+                    <span key={a.name} className="h-2.5 w-2.5 rounded-full border border-base" style={{ backgroundColor: a.color ?? "#9ca3af" }} />
+                  ))}
+                </span>
+              )}
+              {audienceLabel(access)}
+            </span>
+          </div>
+        }
+      />
+    </div>
+  );
+}
+
+/**
+ * The toolbar's "Edit sections" panel: drag rows to reorder, or tick several and
+ * set their status and audience at once from the bar that appears. Every change
+ * applies to the working copy immediately, like the per-section pills it reuses.
+ */
+export function SectionBulkEditModal({
+  sections,
+  mediaManifest,
+  audiences,
+  locks,
+  onReorder,
+  onStatusChange,
+  onAccessChange,
+}: SectionBulkEditModalProps) {
+  const [selectedIds, setSelectedIds] = useState<ReadonlySet<string>>(new Set());
+  const [anchorId, setAnchorId] = useState<string | null>(null);
+  const [selectMenuOpen, setSelectMenuOpen] = useState(false);
+  const selectMenuRef = useRef<HTMLButtonElement>(null);
+
+  // Derived, so a section deleted or newly locked by a peer drops out of the selection.
+  const selectable = sections.filter((s) => !locks.has(s.section.id));
+  const selected = selectable.filter((s) => selectedIds.has(s.section.id));
+  const allSelected = selectable.length > 0 && selected.length === selectable.length;
+
+  function select(ids: string[]) {
+    setSelectedIds(new Set(ids));
+  }
+
+  function toggle(id: string, range: boolean) {
+    const ids = selectable.map((s) => s.section.id);
+    const next = new Set(selectedIds);
+    if (range && anchorId && ids.includes(anchorId)) {
+      const [a, b] = [ids.indexOf(anchorId), ids.indexOf(id)].sort((x, y) => x - y);
+      for (const rangeId of ids.slice(a, b + 1)) next.add(rangeId);
+    } else {
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      setAnchorId(id);
+    }
+    setSelectedIds(next);
+  }
+
+  const statuses = STATUSES.filter((s) => selected.some((x) => x.meta.status === s));
+  const commonStatus = statuses.length === 1 ? statuses[0] : null;
+  const coverageByName = new Map(audiences.map((a) => [a.name, coverage(selected, a.name)]));
+  const fullAudiences = audiences.filter((a) => coverageByName.get(a.name) === "all");
+  const partialAudiences = audiences.filter((a) => coverageByName.get(a.name) === "some");
+
+  function toggleAudience(name: string) {
+    // A partly-covered audience is added to every selected section; a fully
+    // covered one is removed from all of them.
+    const add = coverageByName.get(name) !== "all";
+    for (const s of selected) {
+      const has = s.meta.access.includes(name);
+      if (add && !has) onAccessChange(s.section.id, [...s.meta.access, name]);
+      if (!add && has) onAccessChange(s.section.id, s.meta.access.filter((n) => n !== name));
+    }
+  }
+
+  const selectMenu: { label: string; ids: () => string[]; status?: Status }[] = [
+    { label: "All", ids: () => selectable.map((s) => s.section.id) },
+    { label: "None", ids: () => [] },
+    ...STATUSES.map((status) => ({
+      label: status,
+      status,
+      ids: () => selectable.filter((s) => s.meta.status === status).map((s) => s.section.id),
+    })),
+  ];
+
+  return (
+    <div className="flex min-h-0 flex-1 flex-col">
+      <div className="-mx-6 mb-3 flex items-center border-b border-base-200 px-6 pb-2 text-xs text-base-contrast-light">
+        <div className="relative flex items-center rounded hover:bg-base-accent">
+          <button
+            type="button"
+            role="checkbox"
+            aria-checked={allSelected ? true : selected.length > 0 ? "mixed" : false}
+            aria-label={allSelected ? "Deselect all" : "Select all"}
+            onClick={() => select(allSelected ? [] : selectable.map((s) => s.section.id))}
+            className="flex cursor-pointer items-center py-1.5 pr-1 pl-2"
+          >
+            <CheckBox state={allSelected ? "all" : selected.length > 0 ? "some" : "none"} />
+          </button>
+          <button
+            ref={selectMenuRef}
+            type="button"
+            aria-haspopup="dialog"
+            aria-expanded={selectMenuOpen}
+            onClick={() => setSelectMenuOpen((open) => !open)}
+            className="flex cursor-pointer items-center gap-1 py-1.5 pr-2 pl-1 hover:text-base-contrast"
+          >
+            Select
+            <ChevronDown size={12} aria-hidden="true" />
+          </button>
+          <Popover isOpen={selectMenuOpen} onClose={() => setSelectMenuOpen(false)} anchorRef={selectMenuRef} align="start" className="min-w-40 py-1">
+            {selectMenu.map(({ label, ids, status }) => (
+              <PopoverItem
+                key={label}
+                className={cn(status === "draft" && "mt-1 border-t border-base-200 pt-2")}
+                onClick={() => {
+                  select(ids());
+                  setSelectMenuOpen(false);
+                }}
+              >
+                {status && <span aria-hidden="true" className={cn("h-2.5 w-2.5 rounded-full border border-base-200", dotColorClasses[status])} />}
+                <span className="flex-1 capitalize">{label}</span>
+                {status && <span className="tabular-nums text-base-contrast-light">{ids().length}</span>}
+              </PopoverItem>
+            ))}
+          </Popover>
+        </div>
+        {selected.length > 0 && <span className="ml-2">{selected.length} of {sections.length} selected</span>}
+      </div>
+
+      <div className="flex flex-col gap-2 pb-2">
+        {sections.map((loadedSection, index) => {
+          const id = loadedSection.section.id;
+          return (
+            <SectionRow
+              key={id}
+              section={loadedSection}
+              index={index}
+              mediaManifest={mediaManifest}
+              audiences={audiences}
+              selected={selectedIds.has(id)}
+              lockedBy={locks.get(id)?.email ?? null}
+              onToggle={(range) => toggle(id, range)}
+              onReorder={onReorder}
+            />
+          );
+        })}
+      </div>
+
+      {selected.length > 0 && (
+        <div className="sticky bottom-0 -mx-6 -mb-4 mt-auto flex items-center gap-2 border-t border-base-200 bg-base px-6 py-3 text-sm shadow-[0_-4px_12px_rgba(0,0,0,0.06)]">
+          <span className="font-medium text-base-contrast">{selected.length} selected</span>
+          <button
+            type="button"
+            onClick={() => select([])}
+            aria-label="Clear selection"
+            className="cursor-pointer rounded p-0.5 text-base-contrast-light hover:bg-base-accent"
+          >
+            <X size={14} />
+          </button>
+          <div className="ml-auto flex items-center gap-2">
+            <IndicatorPill
+              placement="top"
+              dots={statuses.map((s) => ({ className: dotColorClasses[s] }))}
+              label={commonStatus ? commonStatus.charAt(0).toUpperCase() + commonStatus.slice(1) : "Mixed status"}
+              ariaLabel="Status of selected sections"
+              buttonClassName="text-base-contrast-light"
+              clickContent={(onClose) => (
+                <StatusRadioList
+                  status={commonStatus}
+                  ariaLabel="Status for selected sections"
+                  onClose={onClose}
+                  onChange={(status) => {
+                    for (const s of selected) if (s.meta.status !== status) onStatusChange(s.section.id, status);
+                  }}
+                />
+              )}
+            />
+            <IndicatorPill
+              placement="top"
+              dots={[...fullAudiences, ...partialAudiences].map((a) => ({ color: a.color ?? "#9ca3af" }))}
+              label={partialAudiences.length > 0 ? "Mixed audiences" : audienceLabel(fullAudiences)}
+              ariaLabel="Audience of selected sections"
+              buttonClassName={fullAudiences.length + partialAudiences.length === 0 ? "text-base-contrast-light" : undefined}
+              clickContent={
+                <AudienceChecklist
+                  audiences={audiences}
+                  access={fullAudiences.map((a) => a.name)}
+                  partial={partialAudiences.map((a) => a.name)}
+                  onToggle={toggleAudience}
+                />
+              }
+            />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/editor/StatusIndicator.tsx

@@ -73,7 +73,7 @@ export function deriveStatusDisplay({ mainStatus, savedStatus, contentDiffers, i
   };
 }
 
-const dotColorClasses: Record<StatusColor, string> = {
+export const dotColorClasses: Record<StatusColor, string> = {
   live: "bg-status-live-dot",
   draft: "bg-status-draft-dot",
   archived: "bg-white border-status-archived-dot-border",
@@ -84,7 +84,8 @@ const dotColorClasses: Record<StatusColor, string> = {
 const STATUSES: Status[] = ["draft", "live", "archived"];
 
 interface StatusRadioListProps {
-  status: Status;
+  /** null when several sections with different statuses are being set at once. */
+  status: Status | null;
   onChange: (status: Status) => void;
   onClose?: () => void;
   ariaLabel?: string;

package/src/components/shared/Popover.tsx

@@ -18,7 +18,7 @@ interface PopoverProps {
    * panel wider than the sidebar is clipped and adds a horizontal scrollbar.
    */
   portal?: boolean;
-  /** Which side of the anchor to open toward. Only used with `portal`. */
+  /** Which side of the anchor to open toward. */
   placement?: "bottom" | "top";
 }
 
@@ -111,7 +111,14 @@ export function Popover({
   // this the one keypress dismisses both, losing the navigator's zoom stack
   // — inconsistent with the X button, and with the mousedown exemption below
   // that exists for exactly this stacking.
-  useStackedEscape(onClose, { enabled: isOpen });
+  const escapeLayerRef = useStackedEscape<HTMLElement>(onClose, { enabled: isOpen });
+  // A popover living INSIDE an EditorModal treats that modal's layer as its
+  // own, so only a modal stacked above it (one opened from this popover) takes
+  // Escape away. The modal, for its part, yields Escape while one of its
+  // popovers is open (EditorModal's `before`).
+  useLayoutEffect(() => {
+    escapeLayerRef.current = isOpen ? anchorRef.current?.closest<HTMLElement>("[data-modal-layer]") ?? null : null;
+  }, [isOpen, anchorRef, escapeLayerRef]);
 
   useEffect(() => {
     if (!isOpen) return;
@@ -122,7 +129,10 @@ export function Popover({
       // A modal opened from inside this popover portals to <body>, so it is
       // "outside" by DOM containment. Closing on its mousedowns would unmount
       // the modal along with the popover, and would break text selection in it.
-      if (target instanceof Element && target.closest("[data-modal-layer]")) return;
+      // The modal this popover itself sits in doesn't count: a click elsewhere
+      // in it is an ordinary outside click.
+      const layer = target instanceof Element ? target.closest("[data-modal-layer]") : null;
+      if (layer && !layer.contains(anchorRef.current)) return;
       onClose();
     }
     document.addEventListener("mousedown", onMouseDown);
@@ -145,6 +155,7 @@ export function Popover({
         ref={panelRef}
         role="dialog"
         aria-modal="false"
+        data-popover=""
         style={{
           position: "fixed",
           left: `${fixedPos.left}px`,
@@ -164,8 +175,10 @@ export function Popover({
       ref={panelRef}
       role="dialog"
       aria-modal="false"
+      data-popover=""
       className={cn(
-        "absolute top-full z-50 mt-1 rounded-md border border-base-200 bg-base shadow-lg",
+        "absolute z-50 rounded-md border border-base-200 bg-base shadow-lg",
+        placement === "top" ? "bottom-full mb-1" : "top-full mt-1",
         effectiveAlign === "end" ? "right-0" : "left-0",
         className,
       )}

package/src/components/shared/SectionSummaryRow.tsx

@@ -20,7 +20,7 @@ const MAX_THUMBS = 3;
 
 /**
  * One section as a compact card: type over label, with a thumbnail cluster.
- * Shared by the reorder modal (which wraps it in a drag handle + drop
+ * Shared by the Edit sections modal (which wraps it in a drag handle + drop
  * indicator) and the Audience Details page (which dims unavailable rows), so
  * both read as the same list of the same site.
  */

package/src/components/shell/EditorModal.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useId, useRef, type ReactNode } from "react";
+import { useCallback, useEffect, useId, useRef, type ReactNode } from "react";
 import { createPortal } from "react-dom";
 import { X } from "lucide-react";
 import { IconButton } from "../shared/IconButton";
@@ -31,7 +31,10 @@ export function EditorModal({ isOpen, onClose, title, blocking = false, size = "
   // Another EditorModal opened on top of this one (a ConfirmDialog, say) owns
   // Escape — attaching layerRef to our own data-modal-layer element below is
   // what lets the hook tell "another layer" from "just me".
-  const layerRef = useStackedEscape<HTMLDivElement>(onClose, { enabled: isOpen && !blocking });
+  // An open Popover inside this modal owns Escape: it closes first, the modal on
+  // the next press. Stable, so the keydown listener isn't re-bound every render.
+  const popoverOpenInside = useCallback(() => Boolean(panelRef.current?.querySelector("[data-popover]")), []);
+  const layerRef = useStackedEscape<HTMLDivElement>(onClose, { enabled: isOpen && !blocking, before: popoverOpenInside });
 
   useEffect(() => {
     if (!isOpen) return;

package/src/components/shell/EditorShell.tsx

@@ -42,7 +42,7 @@ import { buildInsertMenuOptions, resolveInsertedContent } from "../../lib/insert
 ensureSectionsRegistered();
 import { BugReportFAB } from "./BugReportFAB";
 import { SectionWrapper } from "../editor/SectionWrapper";
-import { SectionOrderingModal } from "../editor/SectionOrderingModal";
+import { SectionBulkEditModal } from "../editor/SectionBulkEditModal";
 import { MoveSectionModal } from "../editor/MoveSectionModal";
 import { SectionLayout } from "../sections/SectionLayout";
 import {
@@ -113,7 +113,7 @@ import { FabStack } from "../shared/FabStack";
 import { Tooltip } from "../shared/Tooltip";
 import { SegmentedControl } from "../shared/SegmentedControl";
 import { computeDisplaySections } from "./view-branch";
-import { ImageIcon, ListOrderedIcon, FilesIcon, JoystickIcon, Settings, X, Eye, Pencil } from "lucide-react";
+import { ImageIcon, ListChecks, FilesIcon, JoystickIcon, Settings, X, Eye, Pencil } from "lucide-react";
 import { ErrorBoundary } from "../shared/ErrorBoundary";
 import { HistoryToolbar } from "./HistoryToolbar";
 import { RestoreModal } from "./RestoreModal";
@@ -244,7 +244,7 @@ export default function EditorShell({
   useEffect(() => { deletedSectionsRef.current = deletedSections; }, [deletedSections]);
   const [pendingDeleteSectionId, setPendingDeleteSectionId] = useState<string | null>(null);
   // One shared aria-live region for every reorder — sections (via
-  // onReorderSections, the dispatch point shared by SectionOrderingModal's
+  // onReorderSections, the dispatch point shared by SectionBulkEditModal's
   // drag and SectionWrapper's Move up/down) and pages/groups (via
   // handleMoveNavEntry, shared the same way by PagesModal/NavGroupRow's drag
   // and their own Move up/down). The section canvas's own per-block drag
@@ -2361,13 +2361,17 @@ export default function EditorShell({
           <EditorModal
             isOpen={showOrderingModal}
             onClose={() => setShowOrderingModal(false)}
-            title="Reorder Sections"
+            title="Edit sections"
             size="settings"
           >
-            <SectionOrderingModal
+            <SectionBulkEditModal
               sections={activeSections}
               mediaManifest={mediaManifest}
+              audiences={pageAudiences}
+              locks={collab.locks}
               onReorder={onReorderSections}
+              onStatusChange={onStatusChange}
+              onAccessChange={onAccessChange}
             />
           </EditorModal>
           <EditorModal isOpen={showPagesModal} onClose={() => setShowPagesModal(false)} title="Pages" size="settings">
@@ -3132,8 +3136,8 @@ function EditorToolbar({
               <Tooltip side="bottom" content="Media library">
                 <IconButton icon={<ImageIcon size={16} />} label="Media library" size="md" onClick={onMediaClick} className="border border-base-200 bg-base-accent" />
               </Tooltip>
-              <Tooltip side="bottom" content="Reorder sections">
-                <IconButton icon={<ListOrderedIcon size={16} />} label="Reorder sections" size="md" onClick={onOrderingClick} className="border border-base-200 bg-base-accent" />
+              <Tooltip side="bottom" content="Edit sections">
+                <IconButton icon={<ListChecks size={16} />} label="Edit sections" size="md" onClick={onOrderingClick} className="border border-base-200 bg-base-accent" />
               </Tooltip>
               <Tooltip side="bottom" content="Pages">
                 <IconButton icon={<FilesIcon size={16} />} label="Pages" size="md" onClick={onPagesClick} className="border border-base-200 bg-base-accent" />

package/dist/components/editor/SectionOrderingModal.d.ts

@@ -1,10 +0,0 @@
-import type { LoadedSection } from "../../lib/loader";
-import type { MediaManifest } from "../../media/types";
-interface SectionOrderingModalProps {
-    sections: LoadedSection[];
-    mediaManifest: MediaManifest;
-    onReorder: (fromIndex: number, toIndex: number) => void;
-}
-export declare function SectionOrderingModal({ sections, mediaManifest, onReorder, }: SectionOrderingModalProps): import("react/jsx-runtime").JSX.Element;
-export {};
-//# sourceMappingURL=SectionOrderingModal.d.ts.map

package/dist/components/editor/SectionOrderingModal.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SectionOrderingModal.d.ts","sourceRoot":"","sources":["../../../src/components/editor/SectionOrderingModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEtD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAQvD,UAAU,yBAAyB;IACjC,QAAQ,EAAE,aAAa,EAAE,CAAC;IAC1B,aAAa,EAAE,aAAa,CAAC;IAC7B,SAAS,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CACzD;AA+CD,wBAAgB,oBAAoB,CAAC,EACnC,QAAQ,EACR,aAAa,EACb,SAAS,GACV,EAAE,yBAAyB,2CAc3B"}

package/src/components/editor/SectionOrderingModal.tsx

@@ -1,80 +0,0 @@
-import type { LoadedSection } from "../../lib/loader";
-import { getSection } from "../../lib/registry";
-import type { MediaManifest } from "../../media/types";
-import { DragHandle } from "./DragHandle";
-import { useSortableRow } from "../../hooks/useSortableRow";
-import { DropEdgeIndicator } from "./DropEdgeIndicator";
-import { SectionSummaryRow } from "../shared/SectionSummaryRow";
-import { toThumbViews } from "../../lib/thumb-views";
-import { cn } from "../../lib/cn";
-
-interface SectionOrderingModalProps {
-  sections: LoadedSection[];
-  mediaManifest: MediaManifest;
-  onReorder: (fromIndex: number, toIndex: number) => void;
-}
-
-function SectionRow({
-  section,
-  index,
-  mediaManifest,
-  onReorder,
-}: {
-  section: LoadedSection;
-  index: number;
-  mediaManifest: MediaManifest;
-  onReorder: (fromIndex: number, toIndex: number) => void;
-}) {
-  const { rowRef, handleRef, isDragging, closestEdge } = useSortableRow<HTMLDivElement, HTMLButtonElement>({
-    index,
-    dragType: "ordering-row",
-    onReorder,
-  });
-
-  const definition = getSection(section.section.type);
-  const label = definition?.getLabel?.(section.section) ?? definition?.label ?? section.section.type;
-  const typeLabel = definition?.label ?? section.section.type;
-
-  return (
-    <div
-      ref={rowRef}
-      className={cn(
-        "relative flex items-center gap-1",
-        isDragging && "opacity-50",
-      )}
-    >
-      <DropEdgeIndicator edge={closestEdge} />
-
-      <div className="shrink-0 [&_[role=tooltip]]:hidden">
-        <DragHandle ref={handleRef} />
-      </div>
-
-      <SectionSummaryRow
-        label={label}
-        typeLabel={typeLabel}
-        thumbnails={toThumbViews(definition?.getThumbnails?.(section.section) ?? [], mediaManifest)}
-        className={cn(isDragging && "outline outline-2 outline-primary/50")}
-      />
-    </div>
-  );
-}
-
-export function SectionOrderingModal({
-  sections,
-  mediaManifest,
-  onReorder,
-}: SectionOrderingModalProps) {
-  return (
-    <div className="flex flex-col gap-2 overflow-y-auto">
-      {sections.map((loadedSection, index) => (
-        <SectionRow
-          key={loadedSection.section.id}
-          section={loadedSection}
-          index={index}
-          mediaManifest={mediaManifest}
-          onReorder={onReorder}
-        />
-      ))}
-    </div>
-  );
-}