@drawnagency/primitives 0.1.104 → 0.1.106

package/src/components/editor/SectionOrderingModal.tsx

@@ -1,11 +1,11 @@
 import type { LoadedSection } from "../../lib/loader";
-import type { Thumbnail } from "../../lib/registry";
 import { getSection } from "../../lib/registry";
-import { getMediaProvider } from "../../media";
 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 {
@@ -14,16 +14,6 @@ interface SectionOrderingModalProps {
   onReorder: (fromIndex: number, toIndex: number) => void;
 }
 
-function resolveThumbnailSrc(thumb: Thumbnail, manifest: MediaManifest): string | null {
-  if (thumb.type === "color") return null;
-  const item = manifest.images[thumb.src];
-  if (!item) return null;
-  const provider = getMediaProvider();
-  const resolved = provider.resolve(item, [200]);
-  if (!resolved) return null;
-  return resolved.tag === "img" || resolved.tag === "video" ? resolved.src : null;
-}
-
 function SectionRow({
   section,
   index,
@@ -44,9 +34,6 @@ function SectionRow({
   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 allThumbnails = definition?.getThumbnails?.(section.section) ?? [];
-  const thumbnails = allThumbnails.slice(0, 3);
-  const remainingCount = Math.max(0, allThumbnails.length - 3);
 
   return (
     <div
@@ -62,68 +49,16 @@ function SectionRow({
         <DragHandle ref={handleRef} />
       </div>
 
-      <div className={cn(
-        "flex min-w-0 flex-1 items-center gap-3 rounded-md border border-base-200 bg-base px-3 py-2",
-        isDragging && "outline outline-2 outline-primary/50",
-      )}>
-        <div className="min-w-0 flex-1">
-          <div className="text-xs text-base-contrast-light">{typeLabel}</div>
-          <div className="truncate text-sm font-medium text-base-contrast">
-            {label}
-          </div>
-        </div>
-
-        {thumbnails.length > 0 && (
-          <div className="flex items-center -space-x-2">
-            {thumbnails.map((thumb, i) => (
-              thumb.type === "color" ? (
-                <div
-                  key={i}
-                  className="h-8 w-8 rounded border-2 border-base"
-                  style={{ backgroundColor: thumb.value }}
-                />
-              ) : (
-                <ResolvedImage
-                  key={i}
-                  thumb={thumb}
-                  manifest={mediaManifest}
-                />
-              )
-            ))}
-            {remainingCount > 0 && (
-              <div className="ml-1 flex h-8 w-8 items-center justify-center rounded border-2 border-base bg-base-accent text-xs text-base-contrast-light">
-                +{remainingCount}
-              </div>
-            )}
-          </div>
-        )}
-      </div>
+      <SectionSummaryRow
+        label={label}
+        typeLabel={typeLabel}
+        thumbnails={toThumbViews(definition?.getThumbnails?.(section.section) ?? [], mediaManifest)}
+        className={cn(isDragging && "outline outline-2 outline-primary/50")}
+      />
     </div>
   );
 }
 
-function ResolvedImage({
-  thumb,
-  manifest,
-}: {
-  thumb: Thumbnail & { type: "image" };
-  manifest: MediaManifest;
-}) {
-  const src = resolveThumbnailSrc(thumb, manifest);
-  if (!src) {
-    return (
-      <div className="h-8 w-8 rounded border-2 border-base bg-base-accent" />
-    );
-  }
-  return (
-    <img
-      src={src}
-      alt={thumb.alt ?? ""}
-      className="h-8 w-8 rounded border-2 border-base object-cover"
-    />
-  );
-}
-
 export function SectionOrderingModal({
   sections,
   mediaManifest,

package/src/components/shared/Navigation.tsx

@@ -1,11 +1,11 @@
 import { useState, useCallback, useEffect, useRef, type ReactNode } from "react";
-import { ChevronRight } from "lucide-react";
+import { ChevronRight, Users } from "lucide-react";
 import { cn } from "../../lib/cn";
 import { Toggle } from "./Toggle";
 import type { SiteNav, NavItem, GroupNavItem, PageNavItem, DocGroupNavItem, DocNavItem } from "../../lib/nav";
 import { groupDisplayLabel } from "../../lib/nav-tree";
 import { openDocFile, closeDocFile } from "../docfile/doc-file-state";
-import { editModeEvent, siteNavChangeEvent, pageSelectEvent, darkModeEvent, siteNameChangeEvent, historySelectEvent, editorDirtyEvent } from "../../lib/events";
+import { editModeEvent, siteNavChangeEvent, pageSelectEvent, darkModeEvent, siteNameChangeEvent, historySelectEvent, editorDirtyEvent, audienceDetailsEvent } from "../../lib/events";
 import { useActiveHeadings } from "../../hooks/useActiveHeadings";
 import { formatDate } from "../../lib/timestamp";
 import { Popover } from "./Popover";
@@ -25,6 +25,17 @@ interface Props {
    *  the freed column to chat. Static per page render — deliberately keyed to
    *  chat being ENABLED, not open, so the nav never flaps when chat toggles. */
   desktopBreakpoint?: "lg" | "xl";
+  /** Link to the auto-generated Audience Details page, or null to omit it.
+   *  The caller owns the gate (editors and the default audience only), because
+   *  only it knows the requester — this component just renders what it is told. */
+  audienceDetailsHref?: string | null;
+  /** Highlight the Audience details link as the current page. Passed by the
+   *  /audiences route; the editor sets it locally when its own surface is open. */
+  audienceDetailsActive?: boolean;
+  /** Who is signed in, for the bottom identity row and its log-out button.
+   *  Null on a public (password-disabled) site, where nobody is signed in.
+   *  `kind` only picks the post-logout destination. */
+  identity?: { label: string; sublabel?: string; kind: "editor" | "viewer" } | null;
 }
 
 // Both branches are literal class strings so Tailwind's scanner sees them.
@@ -33,7 +44,7 @@ const BP_CLASSES = {
   xl: { hidden: "xl:hidden", leftAuto: "xl:left-auto", translate: "xl:translate-x-0", block: "xl:block" },
 } as const;
 
-export default function Navigation({ siteNav: initialNav, siteName, darkMode, lastUpdated, logo, onPageSelect, desktopBreakpoint = "lg" }: Props) {
+export default function Navigation({ siteNav: initialNav, siteName, darkMode, lastUpdated, logo, onPageSelect, desktopBreakpoint = "lg", audienceDetailsHref = null, audienceDetailsActive = false, identity = null }: Props) {
   const bp = BP_CLASSES[desktopBreakpoint];
   const [isOpen, setIsOpen] = useState(false);
   const [isEditMode, setIsEditMode] = useState(false);
@@ -45,6 +56,13 @@ export default function Navigation({ siteNav: initialNav, siteName, darkMode, la
   const [isDark, setIsDark] = useState(false);
   const [siteNav, setSiteNav] = useState<SiteNav>(initialNav);
   const [showHistory, setShowHistory] = useState(false);
+  // Editor only: the audience surface opens in place (EditorShell swaps its
+  // body) rather than navigating, so the nav owns the highlight. Cleared by any
+  // page selection — including one made from the Pages modal, hence the listener
+  // rather than only the local click handler.
+  const [editorAudienceOpen, setEditorAudienceOpen] = useState(false);
+  const [loggingOut, setLoggingOut] = useState(false);
+  const [logoutError, setLogoutError] = useState<string | null>(null);
   // Keyed by group id for authored groups and by label for the derived editor
   // buckets ("Hidden from Menu", "Archive"). Generated ids never collide with
   // those two literals, so one record safely serves both.
@@ -61,7 +79,8 @@ export default function Navigation({ siteNav: initialNav, siteName, darkMode, la
     const unlistenNav = siteNavChangeEvent.listen((n) => setSiteNav(n));
     const unlistenDark = darkModeEvent.listen((mode) => setCurrentDarkMode(mode as typeof darkMode));
     const unlistenName = siteNameChangeEvent.listen((name) => setCurrentSiteName(name));
-    return () => { unlistenEdit(); unlistenDirty(); unlistenNav(); unlistenDark(); unlistenName(); };
+    const unlistenPage = pageSelectEvent.listen(() => setEditorAudienceOpen(false));
+    return () => { unlistenEdit(); unlistenDirty(); unlistenNav(); unlistenDark(); unlistenName(); unlistenPage(); };
   }, []);
 
   useEffect(() => {
@@ -72,6 +91,25 @@ export default function Navigation({ siteNav: initialNav, siteName, darkMode, la
     return () => observer.disconnect();
   }, []);
 
+  // /api/auth/sign-out clears BOTH the editor session and the audience cookie,
+  // so one call serves either kind of session; only the destination differs.
+  const handleLogout = useCallback(async () => {
+    setLogoutError(null);
+    setLoggingOut(true);
+    try {
+      const res = await fetch("/api/auth/sign-out", { method: "POST" });
+      if (!res.ok) {
+        setLogoutError("Log out failed");
+        setLoggingOut(false);
+        return;
+      }
+      window.location.assign(identity?.kind === "editor" ? "/edit/login" : "/login");
+    } catch {
+      setLogoutError("Network error");
+      setLoggingOut(false);
+    }
+  }, [identity?.kind]);
+
   const handleThemeToggle = useCallback((next: boolean) => {
     const root = document.documentElement;
     root.classList.add("theme-changing");
@@ -178,6 +216,7 @@ export default function Navigation({ siteNav: initialNav, siteName, darkMode, la
   ) : null;
 
   const handlePageClick = useCallback((id: string) => {
+    setEditorAudienceOpen(false);
     if (onPageSelect) onPageSelect(id);
     else pageSelectEvent.dispatch(id);
     setIsOpen(false);
@@ -187,6 +226,15 @@ export default function Navigation({ siteNav: initialNav, siteName, darkMode, la
   // a same-island handler is supplied; otherwise a real <a> for the viewer.
   const asButton = isEditMode || !!onPageSelect;
 
+  // Active either because the /audiences route said so, or because the editor's
+  // in-place surface is open.
+  const audienceActive = audienceDetailsActive || editorAudienceOpen;
+  const audienceLinkClass = cn(
+    "inline-flex items-center gap-1.5 text-xs transition-colors hover:text-primary",
+    // Same active treatment as a nav page link.
+    audienceActive ? "font-bold text-primary" : "text-base-contrast-light",
+  );
+
   const renderPage = (page: PageNavItem) => (
     <li key={page.id}>
       {asButton ? (
@@ -338,23 +386,57 @@ export default function Navigation({ siteNav: initialNav, siteName, darkMode, la
         {isEditMode && renderPageGroup("Hidden from Menu", siteNav.hidden)}
         {isEditMode && renderPageGroup("Archive", siteNav.archive, true)}
 
+        {/* Bottom stack, in order: dark-mode toggle, audience details, last
+            updated, then who you are. Every block carries its own top divider
+            and is centred, so the stack reads as evenly separated rows — and
+            every line shares one type size (text-xs). */}
         <div className="mt-auto">
           {currentDarkMode === "optional" && (
             <div className="mx-4 border-t border-base-200 py-4">
-              <div className="flex items-center justify-center gap-2 text-sm text-base-contrast-light">
+              <div className="flex items-center justify-center gap-2 text-xs text-base-contrast-light">
                 <span className={cn(!isDark && "text-base-contrast")}>Light</span>
                 <Toggle checked={isDark} onChange={handleThemeToggle} label="Toggle dark mode" />
                 <span className={cn(isDark && "text-base-contrast")}>Dark</span>
               </div>
             </div>
           )}
+          {/* A real anchor, not a pageSelectEvent: /audiences is a platform
+              route, and in the editor it deliberately navigates out of the shell
+              (drafts live in IndexedDB, so leaving and coming back loses
+              nothing). */}
+          {audienceDetailsHref && (
+            <div className="mx-4 border-t border-base-200 py-3 text-center">
+              {isEditMode ? (
+                // In the editor this is a surface, not a destination: EditorShell
+                // swaps its body so the toolbar (and unsaved work) stay put.
+                <button
+                  onClick={() => { setEditorAudienceOpen(true); audienceDetailsEvent.dispatch(); setIsOpen(false); }}
+                  aria-current={audienceActive ? "page" : undefined}
+                  className={cn("cursor-pointer", audienceLinkClass)}
+                >
+                  <Users className="h-3.5 w-3.5 shrink-0" aria-hidden />
+                  Audience details
+                </button>
+              ) : (
+                <a
+                  href={audienceDetailsHref}
+                  aria-current={audienceActive ? "page" : undefined}
+                  className={audienceLinkClass}
+                >
+                  <Users className="h-3.5 w-3.5 shrink-0" aria-hidden />
+                  Audience details
+                </a>
+              )}
+            </div>
+          )}
+
           {lastUpdated && (
-            <div ref={historyAnchorRef} className={cn(currentDarkMode !== "optional" && "border-t border-base-200", "mx-4 py-4 text-center")}>
+            <div ref={historyAnchorRef} className="mx-4 border-t border-base-200 py-3 text-center">
               {isEditMode ? (
                 <div className="relative">
                   <button onClick={() => setShowHistory((p) => !p)}
                     aria-label="View history" aria-expanded={showHistory}
-                    className="inline-flex cursor-pointer items-center gap-1 text-xs text-base-contrast-light transition-colors hover:text-primary">
+                    className="inline-flex cursor-pointer items-center gap-2 text-xs text-base-contrast-light transition-colors hover:text-primary">
                     Last updated {formatDate(lastUpdated)}
                     {/* The panel opens upward, so the caret points up when closed
                         and flips when open — the affordance that this is a toggle
@@ -380,6 +462,30 @@ export default function Navigation({ siteNav: initialNav, siteName, darkMode, la
               )}
             </div>
           )}
+
+          {identity && (
+            <div className="mx-4 border-t border-base-200 py-3 text-center">
+              {/* Identity and sign-out share ONE line, dot-separated. The button
+                  is phrasing content inside the <p> so it sits inline and
+                  inherits the row's type size rather than declaring its own.
+                  The audience moves to `title` — visible text stays terse. */}
+              <p
+                className="truncate text-xs text-base-contrast-light"
+                title={identity.sublabel ? `${identity.label} · ${identity.sublabel}` : identity.label}
+              >
+                <span className="text-base-contrast">{identity.label}</span>
+                {" · "}
+                <button
+                  onClick={handleLogout}
+                  disabled={loggingOut}
+                  className="cursor-pointer underline-offset-2 transition-colors hover:text-primary hover:underline disabled:cursor-wait"
+                >
+                  {loggingOut ? "Logging out..." : "Log out"}
+                </button>
+              </p>
+              {logoutError && <p className="mt-1 text-xs text-red-600">{logoutError}</p>}
+            </div>
+          )}
         </div>
       </nav>
     </>

package/src/components/shared/SectionSummaryRow.tsx

@@ -0,0 +1,73 @@
+import type { ReactNode } from "react";
+import { cn } from "../../lib/cn";
+import type { ThumbView } from "../../lib/thumb-views";
+
+interface Props {
+  /** Section's own label (registry getLabel), e.g. its heading. */
+  label: string;
+  /** Section type's display name, e.g. "Colour palette". */
+  typeLabel: string;
+  /** Already resolved to URLs/colours by the caller. Rendered at most 3 + count. */
+  thumbnails: ThumbView[];
+  /** Dim the row (audience overview: this section isn't visible to them). */
+  muted?: boolean;
+  /** Slot at the right edge, before the thumbnails — badges, status pills. */
+  trailing?: ReactNode;
+  className?: string;
+}
+
+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
+ * indicator) and the Audience Details page (which dims unavailable rows), so
+ * both read as the same list of the same site.
+ */
+export function SectionSummaryRow({ label, typeLabel, thumbnails, muted, trailing, className }: Props) {
+  const shown = thumbnails.slice(0, MAX_THUMBS);
+  const remaining = Math.max(0, thumbnails.length - MAX_THUMBS);
+
+  return (
+    <div className={cn(
+      "flex min-w-0 flex-1 items-center gap-3 rounded-md border border-base-200 bg-base px-3 py-2",
+      muted && "opacity-50",
+      className,
+    )}>
+      <div className="min-w-0 flex-1">
+        <div className="text-xs text-base-contrast-light">{typeLabel}</div>
+        <div className="truncate text-sm font-medium text-base-contrast">{label}</div>
+      </div>
+
+      {trailing}
+
+      {shown.length > 0 && (
+        <div className="flex items-center -space-x-2">
+          {shown.map((thumb, i) =>
+            thumb.kind === "color" ? (
+              <div
+                key={i}
+                className="h-8 w-8 rounded border-2 border-base"
+                style={{ backgroundColor: thumb.value }}
+              />
+            ) : thumb.src ? (
+              <img
+                key={i}
+                src={thumb.src}
+                alt={thumb.alt}
+                className="h-8 w-8 rounded border-2 border-base object-cover"
+              />
+            ) : (
+              <div key={i} className="h-8 w-8 rounded border-2 border-base bg-base-accent" />
+            ),
+          )}
+          {remaining > 0 && (
+            <div className="ml-1 flex h-8 w-8 items-center justify-center rounded border-2 border-base bg-base-accent text-xs text-base-contrast-light">
+              +{remaining}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/shell/AudienceAddForm.tsx

@@ -8,11 +8,14 @@ import { ColorPicker } from "../shared/ColorPicker";
 interface Props {
   onSubmit: (data: { displayName: string; color: string | null; password: string }) => Promise<void>;
   onCancel: () => void;
+  /** Credential mode: an audience has no password of its own — access comes from
+   *  the named sign-ins added to it afterwards, so the field is hidden. */
+  requirePassword?: boolean;
 }
 
 const DEFAULT_COLOR = "#3b82f6";
 
-export function AudienceAddForm({ onSubmit, onCancel }: Props) {
+export function AudienceAddForm({ onSubmit, onCancel, requirePassword = true }: Props) {
   const [name, setName] = useState("");
   const [color, setColor] = useState(DEFAULT_COLOR);
   const [password, setPassword] = useState("");
@@ -32,7 +35,7 @@ export function AudienceAddForm({ onSubmit, onCancel }: Props) {
       setError("Invalid color");
       return;
     }
-    if (password.length === 0) {
+    if (requirePassword && password.length === 0) {
       setError("Password is required");
       return;
     }
@@ -61,13 +64,19 @@ export function AudienceAddForm({ onSubmit, onCancel }: Props) {
             value={name}
             onChange={setName}
           />
-          <PasswordInput
-            label="Password"
-            value={password}
-            onChange={setPassword}
-            autoComplete="new-password"
-            showToggle
-          />
+          {requirePassword ? (
+            <PasswordInput
+              label="Password"
+              value={password}
+              onChange={setPassword}
+              autoComplete="new-password"
+              showToggle
+            />
+          ) : (
+            <p className="text-[11px] text-base-contrast-light">
+              Add sign-ins to this audience once it exists — that is what grants access.
+            </p>
+          )}
         </div>
       </div>
       {error && <p className="text-xs text-red-600">{error}</p>}