@drawnagency/primitives 0.1.118 → 0.1.120

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,18 +73,19 @@ export function deriveStatusDisplay({ mainStatus, savedStatus, contentDiffers, i
   };
 }
 
-const dotColorClasses: Record<StatusColor, string> = {
-  live: "bg-status-live-text",
-  draft: "bg-status-draft-text",
-  archived: "bg-white border-status-draft-text",
-  modified: "bg-status-modified-text",
+export const dotColorClasses: Record<StatusColor, string> = {
+  live: "bg-status-live-dot",
+  draft: "bg-status-draft-dot",
+  archived: "bg-white border-status-archived-dot-border",
+  modified: "bg-status-modified-dot",
 };
 
 
 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/AudienceChips.tsx

@@ -2,9 +2,7 @@ import { cn } from "../../lib/cn";
 import { contrastColor } from "../../lib/contrast";
 import type { Audience } from "../../auth/types";
 
-/** Multi-select audience chips — the site-settings idiom for "who sees this".
- *  Shared by the chatbot and deck-builder opt-ins so the two gates, which have
- *  identical strict-opt-in semantics, cannot come to look like different rules. */
+/** Multi-select audience chips — the site-settings idiom for "who sees this". */
 export function AudienceChips({
   audiences,
   selected,

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;