@drawnagency/primitives 0.1.111 → 0.1.113

package/src/components/chat/ChatPanel.tsx

@@ -1,8 +1,9 @@
-import { useEffect, useRef, useState, type KeyboardEvent, type MouseEvent } from "react";
-import { marked } from "marked";
-import { ArrowDown, ChevronDown, ChevronRight, History, Pin, PinOff, SquarePen, Square, Trash2 } from "lucide-react";
+import { useEffect, useRef, useState, type MouseEvent } from "react";
+import { ArrowDown, ChevronDown, ChevronRight, History, Pin, PinOff, SquarePen, Trash2 } from "lucide-react";
 import { cn } from "../../lib/cn";
-import { ensureSanitizer, sanitizeHtml } from "../../lib/sanitize";
+import { ensureSanitizer } from "../../lib/sanitize";
+import { assistantHtml, MD_STYLES, USER_BUBBLE_CLASS } from "./markdown";
+import { ChatComposer } from "./ChatComposer";
 import { resolveThinkingPhrases } from "../../lib/chatbot";
 import { lockBodyScroll } from "../../lib/scroll-lock";
 import { loadHistory, upsertConversation, setConversationPinned, removeConversation, type StoredConversation } from "./chat-history";
@@ -63,24 +64,10 @@ const ERROR_COPY: Record<string, string> = {
 };
 const RETRYABLE = new Set(["rate_limited", "upstream_error"]);
 
-/** Assistant markdown → sanitized HTML. Callers MUST gate on the sanitizer
- *  having loaded (`mdReady`) — before then sanitizeHtml passes raw HTML
- *  through, and model output is untrusted. Exported for tests. */
-export function assistantHtml(md: string): string {
-  return sanitizeHtml(marked.parse(md, { async: false, gfm: true, breaks: true }) as string);
-}
-
-// Tailwind preflight makes h1–h6 inherit size/weight, so headings only need
-// weight + spacing to clamp to the message's text scale.
-const MD_STYLES =
-  "[&_p:not(:first-child)]:mt-2 [&_ul]:mt-1 [&_ul]:list-disc [&_ul]:pl-4 " +
-  "[&_ol]:mt-1 [&_ol]:list-decimal [&_ol]:pl-4 [&_li:not(:first-child)]:mt-1 " +
-  "[&_a]:underline [&_a]:underline-offset-2 [&_a]:text-primary " +
-  "[&_code]:rounded-inner [&_code]:bg-base-200 [&_code]:px-1 [&_code]:font-mono [&_code]:text-[0.8em] " +
-  "[&_pre]:mt-2 [&_pre]:overflow-x-auto [&_pre]:rounded-inner [&_pre]:bg-base-200 [&_pre]:p-2 " +
-  "[&_h1]:mt-2 [&_h1]:font-semibold [&_h2]:mt-2 [&_h2]:font-semibold " +
-  "[&_h3]:mt-2 [&_h3]:font-semibold [&_h4]:mt-2 [&_h4]:font-semibold " +
-  "[&_blockquote]:mt-2 [&_blockquote]:border-l-2 [&_blockquote]:border-base-200 [&_blockquote]:pl-2";
+/** Re-exported from ./markdown, where the rendering rules now live so the deck
+ *  assistant shares them. Kept here because tests and callers import it from
+ *  this module. */
+export { assistantHtml };
 
 /** Parse our /api/chat SSE frames out of a fetch body. Exported for tests. */
 export async function streamChat(
@@ -207,25 +194,6 @@ export default function ChatPanel({ open, closing, animateEnter, onClose, siteNa
   const listRef = useRef<HTMLDivElement>(null);
   const pinnedRef = useRef(true);
 
-  // Autosize the composer: height tracks content up to the className's
-  // 4-line max-h cap, then it scrolls internally. Keyed on `input` so the
-  // post-send clear snaps it back to a single row. (field-sizing: content
-  // would do this in CSS alone, but it's still Chromium-only.)
-  useEffect(() => {
-    const el = composerRef.current;
-    if (!el) return;
-    el.style.height = "auto";
-    el.style.height = `${el.scrollHeight}px`;
-  }, [input]);
-
-  function onComposerKeyDown(e: KeyboardEvent<HTMLTextAreaElement>) {
-    // Chat convention: Enter sends, Shift+Enter inserts a newline.
-    if (e.key === "Enter" && !e.shiftKey) {
-      e.preventDefault();
-      void send();
-    }
-  }
-
   // The tasks prop can shrink live (the configurator's Preview-as filters it):
   // never keep a selected task that's no longer offered, or the next send would
   // assemble a task the previewed audience can't access.
@@ -589,7 +557,7 @@ export default function ChatPanel({ open, closing, animateEnter, onClose, siteNa
             )}
             {messages.map((m, i) =>
               m.role === "user" ? (
-                <div key={i} className="ml-auto max-w-[85%] whitespace-pre-wrap rounded-outer bg-primary px-3 py-2 text-sm text-primary-contrast">
+                <div key={i} className={USER_BUBBLE_CLASS}>
                   {m.content}
                 </div>
               ) : m.content === "" ? (
@@ -657,33 +625,16 @@ export default function ChatPanel({ open, closing, animateEnter, onClose, siteNa
           )}
         </div>
         <p role="status" className="sr-only">{busy ? thinking : ""}</p>
-        <form
-          className={cn(
-            "flex shrink-0 items-end gap-2 border-t border-base-200 p-2",
-            mode === "sheet" && "pb-[max(0.5rem,env(safe-area-inset-bottom))]",
-          )}
-          onSubmit={(e) => { e.preventDefault(); void send(); }}
-        >
-          <textarea
-            ref={composerRef}
-            rows={1}
-            value={input}
-            onChange={(e) => setInput(e.target.value)}
-            onKeyDown={onComposerKeyDown}
-            placeholder={`Ask about ${siteName}…`}
-            maxLength={4000}
-            className="max-h-[5.625rem] min-w-0 flex-1 resize-none overflow-y-auto rounded-inner border border-base-200 bg-base px-2 py-1 text-sm text-base-contrast focus:outline-none focus:bg-[color-mix(in_srgb,var(--color-base),var(--color-base-contrast)_5%)]"
-          />
-          {busy ? (
-            <button type="button" aria-label="Stop" onClick={stop}
-              className="flex cursor-pointer items-center rounded-inner bg-primary px-3 py-1.5 text-sm text-primary-contrast">
-              <Square size={12} fill="currentColor" aria-hidden="true" />
-            </button>
-          ) : (
-            <button type="submit" aria-label="Send"
-              className="rounded-inner bg-primary px-3 py-1 text-sm text-primary-contrast disabled:opacity-50">→</button>
-          )}
-        </form>
+        <ChatComposer
+          value={input}
+          onChange={setInput}
+          onSend={() => void send()}
+          onStop={stop}
+          busy={busy}
+          placeholder={`Ask about ${siteName}…`}
+          textareaRef={composerRef}
+          className={mode === "sheet" ? "pb-[max(0.5rem,env(safe-area-inset-bottom))]" : undefined}
+        />
         {isEditor && <p className="shrink-0 border-t border-base-200 px-3 py-1 text-[10px] text-base-contrast-light">Editor view — answers ground on published content.</p>}
       </div>
     </>

package/src/components/chat/ChatWidget.tsx

@@ -5,8 +5,9 @@
 // see base.css); below 768px it opens as a bottom sheet. Open/close is
 // animated (sidebar slides in as the band shifts, sheet slides up, and ALL
 // page FABs shrink/fade away); prefers-reduced-motion keeps everything
-// instant. FABs show only while closed. Docked-open is the default and the
-// preference persists per tab (sessionStorage, mirrored by Layout.astro's
+// instant. FABs show only while closed. Docked-CLOSED is the default — the
+// visitor opens it — and the choice then persists per tab (sessionStorage,
+// so a tab that opened the chat keeps it open across pages; mirrored by Layout.astro's
 // pre-paint script so the column is reserved before hydration) — shared
 // across viewer pages and /edit.
 //
@@ -116,8 +117,8 @@ export default function ChatWidget({ siteName, botName, thinkingPhrases, tasks,
     const apply = () => setDocked(mq.matches);
     apply();
     mq.addEventListener("change", apply);
-    let storedOpen = true; // default: sidebar open
-    try { storedOpen = window.sessionStorage.getItem(OPEN_KEY) !== "0"; } catch {}
+    let storedOpen = false; // default: sidebar closed until the visitor opens it
+    try { storedOpen = window.sessionStorage.getItem(OPEN_KEY) === "1"; } catch {}
     if (mq.matches && storedOpen) { setOpen(true); setEverOpened(true); }
     return () => mq.removeEventListener("change", apply);
   }, []);

package/src/components/chat/markdown.ts

@@ -0,0 +1,32 @@
+import { marked } from "marked";
+import { sanitizeHtml } from "../../lib/sanitize";
+
+/**
+ * The assistant-message treatment, shared by every chat surface (brand chat's
+ * ChatPanel and the Deck Builder's docked assistant). Extracted so a second
+ * chat pane is a second CALLER, not a second copy of the rendering rules —
+ * particularly the sanitizer gate below, which is a security property.
+ */
+
+/** Assistant markdown → sanitized HTML. Callers MUST gate on the sanitizer
+ *  having loaded (`mdReady`) — before then sanitizeHtml passes raw HTML
+ *  through, and model output is untrusted. */
+export function assistantHtml(md: string): string {
+  return sanitizeHtml(marked.parse(md, { async: false, gfm: true, breaks: true }) as string);
+}
+
+// Tailwind preflight makes h1–h6 inherit size/weight, so headings only need
+// weight + spacing to clamp to the message's text scale.
+export const MD_STYLES =
+  "[&_p:not(:first-child)]:mt-2 [&_ul]:mt-1 [&_ul]:list-disc [&_ul]:pl-4 " +
+  "[&_ol]:mt-1 [&_ol]:list-decimal [&_ol]:pl-4 [&_li:not(:first-child)]:mt-1 " +
+  "[&_a]:underline [&_a]:underline-offset-2 [&_a]:text-primary " +
+  "[&_code]:rounded-inner [&_code]:bg-base-200 [&_code]:px-1 [&_code]:font-mono [&_code]:text-[0.8em] " +
+  "[&_pre]:mt-2 [&_pre]:overflow-x-auto [&_pre]:rounded-inner [&_pre]:bg-base-200 [&_pre]:p-2 " +
+  "[&_h1]:mt-2 [&_h1]:font-semibold [&_h2]:mt-2 [&_h2]:font-semibold " +
+  "[&_h3]:mt-2 [&_h3]:font-semibold [&_h4]:mt-2 [&_h4]:font-semibold " +
+  "[&_blockquote]:mt-2 [&_blockquote]:border-l-2 [&_blockquote]:border-base-200 [&_blockquote]:pl-2";
+
+/** The user's turn: the only side of a transcript that gets a filled bubble. */
+export const USER_BUBBLE_CLASS =
+  "ml-auto max-w-[85%] whitespace-pre-wrap rounded-outer bg-primary px-3 py-2 text-sm text-primary-contrast";

package/src/components/primitives/EditablePlainText.tsx

@@ -29,6 +29,16 @@ export function EditablePlainText({
   ...htmlAttrs
 }: EditablePlainTextProps) {
   const ref = useRef<HTMLElement>(null);
+  // React must NOT own the text node while the field is being typed into. Every
+  // keystroke commits (see useEditablePlainText), the parent echoes the new
+  // value straight back, and React's children diff then rewrites the element's
+  // text — which destroys the live text node and collapses the caret to offset
+  // 0, so a heading comes out backwards. In edit mode we therefore render the
+  // text React knew at the moment editing began and hand ownership to the
+  // effect below, which writes only when the DOM has genuinely drifted.
+  const uncontrolled = useRef(value);
+  if (!isEditMode) uncontrolled.current = value;
+
   const {
     value: localValue,
     handleInput,
@@ -94,6 +104,6 @@ export function EditablePlainText({
       "data-placeholder": isEditMode && placeholder ? placeholder : undefined,
       ...htmlAttrs,
     },
-    value,
+    isEditMode ? uncontrolled.current : value,
   );
 }

package/src/components/shared/Navigation.tsx

@@ -16,7 +16,7 @@ interface Props {
   siteName: string;
   darkMode: "light" | "dark" | "optional";
   lastUpdated: string | null;
-  logo?: { lightUrl: string; darkUrl: string | null; invertInDark: boolean } | null;
+  logo?: { lightUrl: string; darkUrl: string | null; invertInDark: boolean; hideTitle?: boolean } | null;
   // Optional same-island handler (tests). In production the editor nav is a
   // separate island from EditorShell, so a click dispatches pageSelectEvent.
   onPageSelect?: (pageId: string) => void;
@@ -217,18 +217,24 @@ export default function Navigation({ siteNav: initialNav, siteName, darkMode, la
     </ul>
   );
 
-  const logoMark = logo ? (
-    <>
-      <img
-        src={logo.lightUrl}
-        alt={currentSiteName}
-        className={logo.darkUrl ? "block h-8 w-auto object-contain dark:hidden" : logo.invertInDark ? "h-8 w-auto object-contain dark:invert" : "h-8 w-auto object-contain"}
-      />
-      {logo.darkUrl && (
-        <img src={logo.darkUrl} alt={currentSiteName} className="hidden h-8 w-auto object-contain dark:block" />
-      )}
-    </>
-  ) : null;
+  // `size` differs by surface: the mobile header is a 16-unit bar so the logo is
+  // height-capped there, while the sidebar sizes it to 80% of the nav's width.
+  const renderLogo = (size: string) =>
+    logo ? (
+      <>
+        <img
+          src={logo.lightUrl}
+          alt={currentSiteName}
+          className={cn("object-contain", size, logo.darkUrl ? "block dark:hidden" : logo.invertInDark && "dark:invert")}
+        />
+        {logo.darkUrl && (
+          <img src={logo.darkUrl} alt={currentSiteName} className={cn("hidden object-contain dark:block", size)} />
+        )}
+      </>
+    ) : null;
+
+  // A logo stands in for the site name unless the editor has opted to keep both.
+  const showTitle = !logo || !logo.hideTitle;
 
   const handlePageClick = useCallback((id: string) => {
     setEditorAudienceOpen(false);
@@ -368,8 +374,8 @@ export default function Navigation({ siteNav: initialNav, siteName, darkMode, la
       <header className={cn("fixed top-0 left-0 right-0 z-50 bg-base", bp.hidden)}>
         <div className="mx-auto max-w-screen-xl flex h-16 items-center justify-between px-4">
           <div className="flex flex-col items-start gap-1">
-            {logoMark}
-            <span className="text-lg font-bold text-primary">{currentSiteName}</span>
+            {renderLogo("h-8 w-auto")}
+            {showTitle && <span className="text-lg font-bold text-primary">{currentSiteName}</span>}
           </div>
           <button onClick={() => setIsOpen(!isOpen)} className="cursor-pointer p-2 text-base-contrast" aria-label="Toggle navigation">
             <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
@@ -386,9 +392,11 @@ export default function Navigation({ siteNav: initialNav, siteName, darkMode, la
       <nav className={cn("fixed top-0 left-0 z-40 h-full w-64 flex flex-col overflow-y-auto border-r border-base-200 bg-base pt-16 transition-transform nav-sidebar",
         bp.leftAuto, bp.translate,
         isOpen ? "translate-x-0" : "-translate-x-full")}>
-        <div className={cn("hidden px-4 py-4", bp.block)}>
-          {logoMark}
-          <span className="text-lg font-bold text-primary">{currentSiteName}</span>
+        {/* No horizontal padding on the wrapper: the logo's 80% is of the nav
+            column itself, not of a padded box inside it. */}
+        <div className={cn("hidden py-4", bp.block)}>
+          {renderLogo("mx-auto h-auto w-4/5")}
+          {showTitle && <span className="block px-4 text-lg font-bold text-primary">{currentSiteName}</span>}
         </div>
 
         <ul className="space-y-1 px-4 py-2">

package/src/components/shell/AudienceChips.tsx

@@ -0,0 +1,30 @@
+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. */
+export function AudienceChips({
+  audiences,
+  selected,
+  onToggle,
+}: {
+  audiences: Audience[];
+  selected: string[];
+  onToggle: (name: string) => void;
+}) {
+  return (
+    <div className="flex flex-wrap gap-1">
+      {audiences.map((a) => (
+        <button key={a.name} type="button" onClick={() => onToggle(a.name)}
+          className={cn("rounded-full border px-2 py-0.5 text-xs",
+            selected.includes(a.name) ? "border-primary bg-primary text-primary-contrast" : "border-base-200 bg-base-accent text-base-contrast")}
+          style={a.color && selected.includes(a.name) ? { backgroundColor: a.color, borderColor: a.color, color: contrastColor(a.color) } : undefined}>
+          {a.displayName}
+        </button>
+      ))}
+      {audiences.length === 0 && <span className="text-xs text-base-contrast-light">No audiences configured</span>}
+    </div>
+  );
+}

package/src/components/shell/EditorShell.tsx

@@ -2025,6 +2025,18 @@ export default function EditorShell({
               </svg>
             </Fab>
           )}
+          {/* Deck Builder (#34). Editors are super-admins over decks and are
+              never gated by deckBuilder.audiences, so this is unconditional.
+              An <a>, not a click handler: builder mode is its own route.
+              bottom-52 clears the bottom-40 document FAB + gap. Taking over the
+              editor top bar in place is #38 — this just goes there. */}
+          <Fab href="/decks?next=%2Fedit" label="Build a deck" column="editor" className="bottom-52">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden="true">
+              <rect x="3" y="4" width="18" height="12" rx="1" />
+              <path d="M12 16v4" />
+              <path d="M9 20h6" />
+            </svg>
+          </Fab>
           {showDocumentEditor && resolvedActivePage?.document?.enabled && (
             <Suspense fallback={<DocumentOverlayFallback />}>
               {/* Branch/history view (viewSections !== null → previewing the

package/src/components/shell/SiteSettingsChatbot.tsx

@@ -1,8 +1,7 @@
 import { useEffect, useState } from "react";
 import { Button } from "../shared/Button";
 import { SubTabs } from "../shared/SubTabs";
-import { cn } from "../../lib/cn";
-import { contrastColor } from "../../lib/contrast";
+import { AudienceChips } from "./AudienceChips";
 import ChatPanel from "../chat/ChatPanel";
 import type { SiteConfig, ChatbotConfig, ChatbotTask } from "../../schemas/site-config";
 import type { Audience } from "../../auth/types";
@@ -30,22 +29,6 @@ function slugify(label: string): string {
   return label.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "").slice(0, 32) || "task";
 }
 
-function AudienceChips({ audiences, selected, onToggle }: { audiences: Audience[]; selected: string[]; onToggle: (name: string) => void }) {
-  return (
-    <div className="flex flex-wrap gap-1">
-      {audiences.map((a) => (
-        <button key={a.name} type="button" onClick={() => onToggle(a.name)}
-          className={cn("rounded-full border px-2 py-0.5 text-xs",
-            selected.includes(a.name) ? "border-primary bg-primary text-primary-contrast" : "border-base-200 bg-base-accent text-base-contrast")}
-          style={a.color && selected.includes(a.name) ? { backgroundColor: a.color, borderColor: a.color, color: contrastColor(a.color) } : undefined}>
-          {a.displayName}
-        </button>
-      ))}
-      {audiences.length === 0 && <span className="text-xs text-base-contrast-light">No audiences configured</span>}
-    </div>
-  );
-}
-
 export function SiteSettingsChatbot({ siteConfig, onSiteConfigChange, audiences, platformEnabled }: Props) {
   const chatbot = siteConfig.chatbot;
   const [newTaskLabel, setNewTaskLabel] = useState("");

package/src/components/shell/SiteSettingsDecks.tsx

@@ -0,0 +1,41 @@
+import { AudienceChips } from "./AudienceChips";
+import type { SiteConfig } from "../../schemas/site-config";
+import type { Audience } from "../../auth/types";
+
+interface Props {
+  siteConfig: SiteConfig;
+  onSiteConfigChange: (config: SiteConfig) => void;
+  audiences: Audience[];
+}
+
+/** Deck Builder settings. One control today — the creation opt-in — because
+ *  that is the only `deckBuilder` key that exists; public sharing (#37) is the
+ *  next one and belongs on this tab. */
+export function SiteSettingsDecks({ siteConfig, onSiteConfigChange, audiences }: Props) {
+  const selected = siteConfig.deckBuilder.audiences;
+
+  function toggle(name: string) {
+    const next = selected.includes(name) ? selected.filter((n) => n !== name) : [...selected, name];
+    onSiteConfigChange({ ...siteConfig, deckBuilder: { ...siteConfig.deckBuilder, audiences: next } });
+  }
+
+  return (
+    <div className="space-y-3">
+      <div>
+        <h3 className="mb-1 text-sm font-medium text-base-contrast">Who can build decks</h3>
+        <p className="mb-2 text-xs text-base-contrast-light">
+          Members of the selected audiences get the Decks button and can create and publish their own presentations.
+          None selected means no viewer can start a new one. Editors always can.
+        </p>
+        <AudienceChips audiences={audiences} selected={selected} onToggle={toggle} />
+      </div>
+      <p className="text-xs text-base-contrast-light">
+        Removing an audience here stops its members starting new decks. Decks they already own stay theirs — they can
+        still open, edit and delete them — so remove the deck itself if that is what you want gone.
+      </p>
+      <p className="text-xs text-base-contrast-light">
+        A deck is private to the person who made it. Sharing it with an audience, or by public link, comes later.
+      </p>
+    </div>
+  );
+}

package/src/components/shell/SiteSettingsDisplay.tsx

@@ -88,7 +88,7 @@ export function SiteSettingsDisplay({ siteConfig, onChange }: Props) {
 
   function pickLogo(which: "light" | "dark") {
     mediaLibrary?.openSelectModal((imageId) => {
-      const base = siteConfig.logo ?? { light: { imageId: "" }, dark: null, invertInDark: false, showInNav: true };
+      const base = siteConfig.logo ?? { light: { imageId: "" }, dark: null, invertInDark: false, showInNav: true, hideTitle: true };
       update({ logo: { ...base, [which]: { imageId } } });
     });
   }
@@ -292,6 +292,15 @@ export function SiteSettingsDisplay({ siteConfig, onChange }: Props) {
                   label="Show in navigation"
                 />
 
+                {/* Not gated on showInNav: the login page shows the logo either
+                    way, so this has to stay reachable when the nav one is off. */}
+                <Checkbox
+                  checked={logo.hideTitle}
+                  onChange={(v) => update({ logo: { ...logo, hideTitle: v } })}
+                  label="Hide site title"
+                  description="The logo stands in for the site name in the navigation and on the login page. Turn this off to show both."
+                />
+
                 {needsDarkHint && (
                   <p className="text-xs text-amber-600">
                     Add a dark variant or enable invert so the logo stays legible in dark mode.

package/src/components/shell/SiteSettingsModal.tsx

@@ -6,6 +6,7 @@ import { SiteSettingsViewerAccess } from "./SiteSettingsViewerAccess";
 import { SiteSettingsDisplay } from "./SiteSettingsDisplay";
 import { SiteSettingsUsers } from "./SiteSettingsUsers";
 import { SiteSettingsChatbot } from "./SiteSettingsChatbot";
+import { SiteSettingsDecks } from "./SiteSettingsDecks";
 import type { SiteConfig } from "../../schemas/site-config";
 import type { Audience } from "../../auth/types";
 
@@ -81,6 +82,16 @@ export function SiteSettingsModal({ isOpen, onClose, siteConfig, onSiteConfigCha
         </div>
       ),
     },
+    {
+      id: "decks",
+      label: "Decks",
+      show: true,
+      content: (
+        <div data-testid="site-settings-tab-panel" className="flex flex-1 flex-col overflow-y-auto px-6 py-4">
+          <SiteSettingsDecks siteConfig={siteConfig} onSiteConfigChange={onSiteConfigChange} audiences={audiences} />
+        </div>
+      ),
+    },
     {
       id: "display",
       label: "Display",

package/src/components/shell/SiteSettingsUsers.tsx

@@ -83,6 +83,29 @@ export function SiteSettingsUsers({ currentUser }: Props) {
     setConfirmingRevoke(userId);
   }
 
+  async function handleRoleChange(userId: string, role: Role) {
+    setError(null);
+    try {
+      const res = await fetch("/api/auth/users", {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ userId, role }),
+      });
+      if (!res.ok) {
+        const data = await res.json().catch(() => ({}));
+        // Resync first: a rejected change would otherwise leave the select
+        // showing a role the user does not have. loadUsers() clears `error` on
+        // success, so the message has to be set after it, not before.
+        await loadUsers();
+        setError(data.error || "Role change failed");
+        return;
+      }
+      await loadUsers();
+    } catch {
+      setError("Network error while changing role");
+    }
+  }
+
   async function confirmRevoke(userId: string) {
     setConfirmingRevoke(null);
     try {
@@ -114,8 +137,28 @@ export function SiteSettingsUsers({ currentUser }: Props) {
         {users.map((user) => (
           <Fragment key={user.id}>
             <div className="flex items-center border-b border-base-200 py-2 pr-2 text-base-contrast">{user.email}</div>
-            <div className="flex items-center border-b border-base-200 py-2 pr-2 capitalize text-base-contrast-light">
-              {user.role}
+            <div className="flex items-center border-b border-base-200 py-2 pr-2 text-base-contrast-light">
+              {currentUser?.email === user.email ? (
+                // Owners can't change their own role — the same rule that makes
+                // this row's Remove control a dash.
+                <span className="capitalize">{user.role}</span>
+              ) : (
+                <div className="relative w-full">
+                  <select
+                    value={user.role}
+                    onChange={(e) => handleRoleChange(user.id, e.target.value as Role)}
+                    aria-label={`Role for ${user.email}`}
+                    className="w-full appearance-none rounded border border-base-200 bg-base py-1 pr-7 pl-2 text-sm text-base-contrast focus:border-base-contrast focus:outline-none focus:ring-1 focus:ring-base-contrast"
+                  >
+                    <option value="editor">Editor</option>
+                    <option value="owner">Owner</option>
+                  </select>
+                  <ChevronDown
+                    size={14}
+                    className="pointer-events-none absolute right-2 top-1/2 -translate-y-1/2 text-base-contrast-light"
+                  />
+                </div>
+              )}
             </div>
             <div className="flex items-center justify-end border-b border-base-200 py-2">
               {currentUser?.email === user.email ? (
@@ -187,6 +230,10 @@ export function SiteSettingsUsers({ currentUser }: Props) {
         </Button>
       </form>
 
+      <p className="text-xs text-base-contrast-light">
+        Role changes take effect the next time the user signs in, or within 24 hours.
+      </p>
+
       {error && <p className="text-sm text-red-600">{error}</p>}
     </div>
   );

package/src/deck/DeckComponentView.tsx

@@ -0,0 +1,28 @@
+import type { DeckTextSlot } from "../lib/deck-edit";
+import type { DeckComponent } from "../schemas/deck";
+import { DeckImage } from "./components/DeckImage";
+import { DeckImageGrid } from "./components/DeckImageGrid";
+import { DeckRichText } from "./components/DeckRichText";
+import { DeckVideo } from "./components/DeckVideo";
+
+interface Props {
+  component: DeckComponent;
+  /** The Layout slot this component fills — carried only so text leaves can
+   *  address themselves for inline editing (#39). Optional: a caller that omits
+   *  it gets the read-only render. */
+  slot?: DeckTextSlot;
+}
+
+/** Dispatches a Deck Component onto its runtime implementation. */
+export function DeckComponentView({ component, slot }: Props) {
+  switch (component.type) {
+    case "richText":
+      return <DeckRichText content={component} slot={slot} />;
+    case "image":
+      return <DeckImage content={component} />;
+    case "imageGrid":
+      return <DeckImageGrid content={component} />;
+    case "video":
+      return <DeckVideo content={component} />;
+  }
+}