@drawnagency/primitives 0.1.58 → 0.1.60

package/src/auth/types.ts

@@ -21,40 +21,50 @@ export type TokenExchangeResult =
   | { success: false; error: string };
 
 export interface AuthProvider {
-  capabilities: {
-    oauth: boolean;
-    emailPassword: boolean;
-    passwordOnly: boolean;
-    userManagement: boolean;
-    audienceManagement: boolean;
-    passwordToggle: boolean;
-  };
-  oauthProviders?: ("google" | "github")[];
-
+  // --- Required: every provider authenticates a session. ---
   resolveSession(ctx: AuthContext): Promise<Session | null>;
   signIn(method: SignInMethod, ctx: AuthContext): Promise<SignInResult>;
   signOut(ctx: AuthContext): Promise<void>;
 
-  listSiteUsers?(): Promise<SiteUser[]>;
-  inviteUser?(email: string, role: Role): Promise<void>;
-  revokeUser?(userId: string): Promise<void>;
-
-  listAudiences(): Promise<Audience[]>;
-  verifyAudiencePassword(name: string, password: string): Promise<boolean>;
+  // --- Declarative sign-in surface (drives the login UI only). ---
+  // signIn() is polymorphic and handles all of these; there is no backing method
+  // to derive presence from, so these stay declared rather than presence-derived.
+  signInMethods: {
+    oauth?: ("google" | "github")[]; // non-empty → render OAuth buttons
+    emailPassword?: boolean;         // render the email + password form
+    passwordOnly?: boolean;          // single shared-password mode
+  };
 
-  // Optional — single-row lookup (present when the adapter can efficiently query one audience).
-  getAudience?(name: string): Promise<Audience | null>;
+  // --- Viewer access control ("audiences"). Read required; manage optional. ---
+  audiences: {
+    list(): Promise<Audience[]>;
+    verify(name: string, password: string): Promise<boolean>;
+    get?(name: string): Promise<Audience | null>; // optional single-row optimization
+    // Presence of `manage` === the old capabilities.audienceManagement.
+    manage?: {
+      create(displayName: string, color: string | null, password: string): Promise<void>;
+      setPassword(name: string, password: string): Promise<void>;
+      setColor(name: string, color: string | null): Promise<void>;
+      setDisplayName(name: string, displayName: string): Promise<void>;
+      delete(name: string): Promise<void>;
+    };
+  };
 
-  // Optional — present only when capabilities.audienceManagement === true
-  createAudience?(displayName: string, color: string | null, password: string): Promise<void>;
-  setAudiencePassword?(name: string, password: string): Promise<void>;
-  setAudienceColor?(name: string, color: string | null): Promise<void>;
-  setAudienceDisplayName?(name: string, displayName: string): Promise<void>;
-  deleteAudience?(name: string): Promise<void>;
+  // --- Shared-password toggle. Read required; `set` optional. ---
+  // Presence of `set` === the old capabilities.passwordToggle.
+  passwordEnabled: {
+    get(): Promise<boolean>;
+    set?(enabled: boolean): Promise<void>;
+  };
 
-  getPasswordEnabled(): Promise<boolean>;
-  setPasswordEnabled?(enabled: boolean): Promise<void>;
+  // --- Site user management. Presence === the old capabilities.userManagement. ---
+  userManagement?: {
+    list(): Promise<SiteUser[]>;
+    invite(email: string, role: Role): Promise<void>;
+    revoke(userId: string): Promise<void>;
+  };
 
+  // --- Provider-specific auth flows (optional; shape unchanged). ---
   handleCallback?(request: Request, ctx: AuthContext): Promise<Response>;
   handleTokenExchange?(tokens: { accessToken: string; refreshToken: string }, type: TokenExchangeType, ctx: AuthContext): Promise<TokenExchangeResult>;
   updatePassword?(password: string, ctx: AuthContext): Promise<void>;

package/src/components/editor/DropEdgeIndicator.tsx

@@ -0,0 +1,13 @@
+/**
+ * The horizontal insertion line shown at the top or bottom edge of a row during
+ * a closest-edge drag-to-reorder, paired with `useSortableRow`'s `closestEdge`.
+ */
+export function DropEdgeIndicator({ edge }: { edge: "top" | "bottom" | null }) {
+  if (edge === "top") {
+    return <div className="absolute top-0 right-0 left-0 z-10 h-0.5 -translate-y-1/2 bg-primary" />;
+  }
+  if (edge === "bottom") {
+    return <div className="absolute right-0 bottom-0 left-0 z-10 h-0.5 translate-y-1/2 bg-primary" />;
+  }
+  return null;
+}

package/src/components/editor/PagesModal.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useRef } from "react";
+import { useState, useEffect } from "react";
 import { Check } from "lucide-react";
 import type { SiteIndex, Page } from "../../schemas/site-config";
 import type { Audience } from "../../auth/types";
@@ -7,7 +7,10 @@ import { Input } from "../shared/Input";
 import { Checkbox } from "../shared/Checkbox";
 import { AudienceIndicator } from "./AudienceIndicator";
 import { DragHandle } from "./DragHandle";
+import { useSortableRow } from "../../hooks/useSortableRow";
+import { DropEdgeIndicator } from "./DropEdgeIndicator";
 import { slugifyPageSlug, uniquePageSlug, pageDisplayTitle } from "../../lib/pages";
+import { pluralize } from "../../lib/text";
 import { RESERVED_SLUGS } from "../../schemas/site-config";
 import { cn } from "../../lib/cn";
 
@@ -111,11 +114,13 @@ function PageRow({
   onSetFields: (patch: Partial<Pick<Page, "title" | "slug" | "showInNav">>) => void;
   onSetAudience: (access: string[]) => void; onRequestDelete: () => void;
 }) {
-  const rowRef = useRef<HTMLDivElement>(null);
-  const handleRef = useRef<HTMLButtonElement>(null);
-  const [isDragging, setIsDragging] = useState(false);
-  const [closestEdge, setClosestEdge] = useState<"top" | "bottom" | null>(null);
   const draggable = dragIndex !== undefined;
+  const { rowRef, handleRef, isDragging, closestEdge } = useSortableRow<HTMLDivElement, HTMLButtonElement>({
+    index: dragIndex ?? 0,
+    dragType: "page-ordering-row",
+    onReorder,
+    enabled: draggable,
+  });
 
   // The slug input edits a local draft; only valid values commit to the index,
   // which must always hold a non-empty, unique, non-reserved slug.
@@ -189,85 +194,12 @@ function PageRow({
     onToggleExpand();
   };
 
-  useEffect(() => {
-    if (dragIndex === undefined) return;
-    const row = rowRef.current;
-    const handle = handleRef.current;
-    if (!row || !handle) return;
-
-    let cleanup: (() => void) | undefined;
-    let cancelled = false;
-
-    Promise.all([
-      import("@atlaskit/pragmatic-drag-and-drop/element/adapter"),
-      import("@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge"),
-    ]).then(([{ draggable, dropTargetForElements }, { attachClosestEdge, extractClosestEdge }]) => {
-      if (cancelled) return;
-
-      const cleanupDraggable = draggable({
-        element: row,
-        dragHandle: handle,
-        getInitialData: () => ({ dragType: "page-ordering-row", index: dragIndex }),
-        onGenerateDragPreview: () => {
-          row.style.opacity = "0.4";
-          requestAnimationFrame(() => {
-            row.style.opacity = "";
-          });
-        },
-        onDragStart: () => setIsDragging(true),
-        onDrop: () => setIsDragging(false),
-      });
-
-      const cleanupDropTarget = dropTargetForElements({
-        element: row,
-        canDrop: ({ source }) => source.data.dragType === "page-ordering-row",
-        getData: ({ input, element }) =>
-          attachClosestEdge({ index: dragIndex }, { input, element, allowedEdges: ["top", "bottom"] }),
-        onDragEnter: ({ self }) => {
-          const edge = extractClosestEdge(self.data);
-          setClosestEdge(edge === "top" || edge === "bottom" ? edge : null);
-        },
-        onDrag: ({ self }) => {
-          const edge = extractClosestEdge(self.data);
-          setClosestEdge(edge === "top" || edge === "bottom" ? edge : null);
-        },
-        onDragLeave: () => setClosestEdge(null),
-        onDrop: ({ source, self }) => {
-          setClosestEdge(null);
-          const fromIndex = source.data.index as number;
-          const edge = extractClosestEdge(self.data);
-          let toIndex = dragIndex;
-          if (edge === "bottom") toIndex = dragIndex + 1;
-          if (fromIndex < toIndex) toIndex--;
-          if (fromIndex !== toIndex) {
-            onReorder(fromIndex, toIndex);
-          }
-        },
-      });
-
-      cleanup = () => {
-        cleanupDraggable();
-        cleanupDropTarget();
-      };
-    });
-
-    return () => {
-      cancelled = true;
-      cleanup?.();
-    };
-  }, [dragIndex, onReorder]);
-
   return (
     <div
       ref={rowRef}
       className={cn("relative rounded-md border border-base-200", isDragging && "opacity-50")}
     >
-      {closestEdge === "top" && (
-        <div className="absolute top-0 right-0 left-0 z-10 h-0.5 -translate-y-1/2 bg-primary" />
-      )}
-      {closestEdge === "bottom" && (
-        <div className="absolute right-0 bottom-0 left-0 z-10 h-0.5 translate-y-1/2 bg-primary" />
-      )}
+      <DropEdgeIndicator edge={closestEdge} />
       <div className="flex items-center gap-2 px-3 py-2">
         {draggable && (
           <div className="shrink-0 [&_[role=tooltip]]:hidden">
@@ -375,7 +307,7 @@ function DeleteConfirm({ page, onCancel, onConfirm }: { page: Page; onCancel: ()
     <div className="flex flex-col gap-3">
       <p className="text-sm text-base-contrast">
         Deleting <strong>{confirmName}</strong> permanently removes the page and its{" "}
-        <strong>{n} section{n === 1 ? "" : "s"}</strong>. This is recoverable only via GitHub version history.
+        <strong>{pluralize(n, "section")}</strong>. This is recoverable only via GitHub version history.
       </p>
       <Input
         label={`Type the page name "${confirmName}" to confirm`}

package/src/components/editor/SectionOrderingModal.tsx

@@ -1,10 +1,11 @@
-import { useState, useEffect, useRef } from "react";
 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 { cn } from "../../lib/cn";
 
 interface SectionOrderingModalProps {
@@ -34,10 +35,11 @@ function SectionRow({
   mediaManifest: MediaManifest;
   onReorder: (fromIndex: number, toIndex: number) => void;
 }) {
-  const rowRef = useRef<HTMLDivElement>(null);
-  const handleRef = useRef<HTMLButtonElement>(null);
-  const [isDragging, setIsDragging] = useState(false);
-  const [closestEdge, setClosestEdge] = useState<"top" | "bottom" | null>(null);
+  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;
@@ -46,73 +48,6 @@ function SectionRow({
   const thumbnails = allThumbnails.slice(0, 3);
   const remainingCount = Math.max(0, allThumbnails.length - 3);
 
-  useEffect(() => {
-    const row = rowRef.current;
-    const handle = handleRef.current;
-    if (!row || !handle) return;
-
-    let cleanup: (() => void) | undefined;
-    let cancelled = false;
-
-    Promise.all([
-      import("@atlaskit/pragmatic-drag-and-drop/element/adapter"),
-      import("@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge"),
-    ]).then(([{ draggable, dropTargetForElements }, { attachClosestEdge, extractClosestEdge }]) => {
-      if (cancelled) return;
-
-      const cleanupDraggable = draggable({
-        element: row,
-        dragHandle: handle,
-        getInitialData: () => ({ dragType: "ordering-row", index }),
-        onGenerateDragPreview: () => {
-          row.style.opacity = "0.4";
-          requestAnimationFrame(() => {
-            row.style.opacity = "";
-          });
-        },
-        onDragStart: () => setIsDragging(true),
-        onDrop: () => setIsDragging(false),
-      });
-
-      const cleanupDropTarget = dropTargetForElements({
-        element: row,
-        canDrop: ({ source }) => source.data.dragType === "ordering-row",
-        getData: ({ input, element }) =>
-          attachClosestEdge({ index }, { input, element, allowedEdges: ["top", "bottom"] }),
-        onDragEnter: ({ self }) => {
-          const edge = extractClosestEdge(self.data);
-          setClosestEdge(edge === "top" || edge === "bottom" ? edge : null);
-        },
-        onDrag: ({ self }) => {
-          const edge = extractClosestEdge(self.data);
-          setClosestEdge(edge === "top" || edge === "bottom" ? edge : null);
-        },
-        onDragLeave: () => setClosestEdge(null),
-        onDrop: ({ source, self }) => {
-          setClosestEdge(null);
-          const fromIndex = source.data.index as number;
-          const edge = extractClosestEdge(self.data);
-          let toIndex = index;
-          if (edge === "bottom") toIndex = index + 1;
-          if (fromIndex < toIndex) toIndex--;
-          if (fromIndex !== toIndex) {
-            onReorder(fromIndex, toIndex);
-          }
-        },
-      });
-
-      cleanup = () => {
-        cleanupDraggable();
-        cleanupDropTarget();
-      };
-    });
-
-    return () => {
-      cancelled = true;
-      cleanup?.();
-    };
-  }, [index, onReorder]);
-
   return (
     <div
       ref={rowRef}
@@ -121,12 +56,7 @@ function SectionRow({
         isDragging && "opacity-50",
       )}
     >
-      {closestEdge === "top" && (
-        <div className="absolute top-0 right-0 left-0 z-10 h-0.5 -translate-y-1/2 bg-primary" />
-      )}
-      {closestEdge === "bottom" && (
-        <div className="absolute right-0 bottom-0 left-0 z-10 h-0.5 translate-y-1/2 bg-primary" />
-      )}
+      <DropEdgeIndicator edge={closestEdge} />
 
       <div className="shrink-0 [&_[role=tooltip]]:hidden">
         <DragHandle ref={handleRef} />

package/src/components/primitives/defineHeadingSection.tsx

@@ -0,0 +1,56 @@
+import type { ReactNode } from "react";
+import { z } from "zod";
+import { defineSection } from "../../lib/registry";
+import { HeadingSection } from "./HeadingSection";
+
+interface HeadingSectionConfig<T extends string> {
+  type: T;
+  label: string;
+  icon: ReactNode;
+  /** Heading level reported to nav generation (one above the rendered tag by design). */
+  navRole: "h1" | "h2" | "h3";
+  /** The actual HTML tag rendered. */
+  tag: "h2" | "h3" | "h4";
+  placeholder: string;
+  defaultHeading: string;
+  /** When true, adds the `excludeFromNav` content field plus its settings toggle. */
+  navExclusion?: boolean;
+}
+
+/**
+ * Factory for the heading section family (link / sub / sub-sub). They differ only
+ * in their type tag, label, icon, nav level, rendered tag, placeholder, default
+ * text, and whether they expose the nav-exclusion toggle — all three render the
+ * shared HeadingSection primitive through the identical edit/view plumbing.
+ */
+export function defineHeadingSection<T extends string>(config: HeadingSectionConfig<T>) {
+  const content = config.navExclusion
+    ? z.object({ heading: z.string(), excludeFromNav: z.boolean().optional() })
+    : z.object({ heading: z.string() });
+  const schema = z.object({ type: z.literal(config.type), content });
+
+  return defineSection({
+    type: config.type,
+    label: config.label,
+    icon: config.icon,
+    schema,
+    navRole: config.navRole,
+    component: ({ content, onChange }) => (
+      <HeadingSection
+        heading={content.content.heading}
+        tag={config.tag}
+        placeholder={config.placeholder}
+        onChange={onChange ? (heading: string) => onChange({ ...content, content: { ...content.content, heading } }) : undefined}
+      />
+    ),
+    defaults: () => ({ type: config.type, content: { heading: config.defaultHeading } }),
+    getLabel: (content) => content.content.heading,
+    ...(config.navExclusion
+      ? {
+          settings: {
+            excludeFromNav: { type: "checkbox" as const, label: "Exclude from navigation", default: false, target: "content" as const },
+          },
+        }
+      : {}),
+  });
+}

package/src/components/sections/Colors/index.tsx

@@ -3,6 +3,7 @@ import { z } from "zod";
 import { Palette } from "lucide-react";
 import { ColorItemSchema } from "../../../schemas/shared";
 import Colors from "../../brandguide/Colors";
+import { pluralize } from "../../../lib/text";
 
 const schema = z.object({
   type: z.literal("colors"),
@@ -35,10 +36,7 @@ export default defineSection({
     type: "colors" as const,
     content: { colors: [{ spaces: [{ hex: "#000000" }] }] },
   }),
-  getLabel: (content) => {
-    const n = content.content.colors.length;
-    return `${n} color${n === 1 ? "" : "s"}`;
-  },
+  getLabel: (content) => pluralize(content.content.colors.length, "color"),
   getThumbnails: (content) =>
     content.content.colors
       .filter((c) => c.spaces[0]?.hex)

package/src/components/sections/Container/index.tsx

@@ -5,6 +5,7 @@ import { getSectionSchema } from "../../../schemas/sections";
 import { MAX_CONTAINER_COLUMNS } from "../../../lib/container-grid";
 import { Container } from "./Container";
 import { ContainerSettingsForm } from "./ContainerSettingsForm";
+import { pluralize } from "../../../lib/text";
 
 const schema = z.object({
   type: z.literal("container"),
@@ -43,9 +44,6 @@ export default defineSection({
     type: "container" as const,
     content: { columns: 1, flow: "row" as const, children: [] },
   }),
-  getLabel: (content) => {
-    const n = content.content.children.length;
-    return `Container (${n} item${n === 1 ? "" : "s"})`;
-  },
+  getLabel: (content) => `Container (${pluralize(content.content.children.length, "item")})`,
   settingsForm: ContainerSettingsForm,
 });

package/src/components/sections/IconList/IconList.tsx

@@ -8,13 +8,7 @@ import { DragHandle, DeleteIcon, AddIcon } from "../../shared/icons";
 import { CopyPlus, Pencil } from "lucide-react";
 import { IconButton } from "../../shared/IconButton";
 import { IconPicker } from "../../primitives/IconPicker";
-
-interface IconListItem {
-  label: string;
-  text: string;
-  icon?: string;
-  dodont?: "do" | "dont";
-}
+import type { IconListItem } from "./index";
 
 interface Props {
   items: IconListItem[];

package/src/components/sections/IconList/index.tsx

@@ -3,11 +3,20 @@ import { z } from "zod";
 import { List } from "lucide-react";
 import IconList from "./IconList";
 import { IconListSettings } from "./IconListSettings";
+import { pluralize } from "../../../lib/text";
+
+export const IconListItemSchema = z.object({
+  label: z.string(),
+  text: z.string(),
+  icon: z.string().optional(),
+  dodont: z.enum(["do", "dont"]).optional(),
+});
+export type IconListItem = z.infer<typeof IconListItemSchema>;
 
 const schema = z.object({
   type: z.literal("icon_list"),
   content: z.object({
-    items: z.array(z.object({ label: z.string(), text: z.string(), icon: z.string().optional(), dodont: z.enum(["do", "dont"]).optional() })),
+    items: z.array(IconListItemSchema),
   }),
   options: z.object({
     icon: z.string().nullable().optional(),
@@ -34,9 +43,6 @@ export default defineSection({
     type: "icon_list" as const,
     content: { items: [{ label: "", text: "" }] },
   }),
-  getLabel: (content) => {
-    const n = content.content.items.length;
-    return `${n} icon${n === 1 ? "" : "s"}`;
-  },
+  getLabel: (content) => pluralize(content.content.items.length, "icon"),
   settingsForm: IconListSettings,
 });

package/src/components/sections/LinkHeading/index.tsx

@@ -1,27 +1,12 @@
-import { defineSection } from "../../../lib/registry";
-import { z } from "zod";
 import { Heading1 } from "lucide-react";
-import { HeadingSection } from "../../primitives/HeadingSection";
+import { defineHeadingSection } from "../../primitives/defineHeadingSection";
 
-const schema = z.object({
-  type: z.literal("link_heading"),
-  content: z.object({ heading: z.string() }),
-});
-
-export default defineSection({
+export default defineHeadingSection({
   type: "link_heading",
   label: "Link Heading",
   icon: <Heading1 size={18} />,
-  schema,
   navRole: "h1",
-  component: ({ content, onChange }) => (
-    <HeadingSection
-      heading={content.content.heading}
-      tag="h2"
-      placeholder="Section heading"
-      onChange={onChange ? (heading: string) => onChange({ type: "link_heading", content: { heading } }) : undefined}
-    />
-  ),
-  defaults: () => ({ type: "link_heading" as const, content: { heading: "New Section" } }),
-  getLabel: (content) => content.content.heading,
+  tag: "h2",
+  placeholder: "Section heading",
+  defaultHeading: "New Section",
 });

package/src/components/sections/SubHeading/index.tsx

@@ -1,30 +1,13 @@
-import { defineSection } from "../../../lib/registry";
-import { z } from "zod";
 import { Heading2 } from "lucide-react";
-import { HeadingSection } from "../../primitives/HeadingSection";
+import { defineHeadingSection } from "../../primitives/defineHeadingSection";
 
-const schema = z.object({
-  type: z.literal("sub_heading"),
-  content: z.object({ heading: z.string(), excludeFromNav: z.boolean().optional() }),
-});
-
-export default defineSection({
+export default defineHeadingSection({
   type: "sub_heading",
   label: "Sub Heading",
   icon: <Heading2 size={18} />,
-  schema,
   navRole: "h2",
-  component: ({ content, onChange }) => (
-    <HeadingSection
-      heading={content.content.heading}
-      tag="h3"
-      placeholder="Sub heading"
-      onChange={onChange ? (heading: string) => onChange({ ...content, content: { ...content.content, heading } }) : undefined}
-    />
-  ),
-  defaults: () => ({ type: "sub_heading" as const, content: { heading: "New Sub Heading" } }),
-  getLabel: (content) => content.content.heading,
-  settings: {
-    excludeFromNav: { type: "checkbox", label: "Exclude from navigation", default: false, target: "content" },
-  },
+  tag: "h3",
+  placeholder: "Sub heading",
+  defaultHeading: "New Sub Heading",
+  navExclusion: true,
 });

package/src/components/sections/SubSubHeading/index.tsx

@@ -1,30 +1,13 @@
-import { defineSection } from "../../../lib/registry";
-import { z } from "zod";
 import { Heading3 } from "lucide-react";
-import { HeadingSection } from "../../primitives/HeadingSection";
+import { defineHeadingSection } from "../../primitives/defineHeadingSection";
 
-const schema = z.object({
-  type: z.literal("sub_sub_heading"),
-  content: z.object({ heading: z.string(), excludeFromNav: z.boolean().optional() }),
-});
-
-export default defineSection({
+export default defineHeadingSection({
   type: "sub_sub_heading",
   label: "Sub Sub Heading",
   icon: <Heading3 size={18} />,
-  schema,
   navRole: "h3",
-  component: ({ content, onChange }) => (
-    <HeadingSection
-      heading={content.content.heading}
-      tag="h4"
-      placeholder="Sub sub heading"
-      onChange={onChange ? (heading: string) => onChange({ ...content, content: { ...content.content, heading } }) : undefined}
-    />
-  ),
-  defaults: () => ({ type: "sub_sub_heading" as const, content: { heading: "New Sub Sub Heading" } }),
-  getLabel: (content) => content.content.heading,
-  settings: {
-    excludeFromNav: { type: "checkbox", label: "Exclude from navigation", default: false, target: "content" },
-  },
+  tag: "h4",
+  placeholder: "Sub sub heading",
+  defaultHeading: "New Sub Sub Heading",
+  navExclusion: true,
 });

package/src/components/shared/Navigation.tsx

@@ -3,7 +3,7 @@ import { ChevronRight } from "lucide-react";
 import { cn } from "../../lib/cn";
 import { Toggle } from "./Toggle";
 import type { SiteNav, NavItem } from "../../lib/nav";
-import { editModeEvent, siteNavChangeEvent, pageSelectEvent, darkModeEvent, historySelectEvent } from "../../lib/events";
+import { editModeEvent, siteNavChangeEvent, pageSelectEvent, darkModeEvent, siteNameChangeEvent, historySelectEvent } from "../../lib/events";
 import { useActiveHeadings } from "../../hooks/useActiveHeadings";
 import { formatDate } from "../../lib/timestamp";
 import { Popover } from "./Popover";
@@ -23,6 +23,7 @@ export default function Navigation({ siteNav: initialNav, siteName, darkMode, la
   const [isOpen, setIsOpen] = useState(false);
   const [isEditMode, setIsEditMode] = useState(false);
   const [currentDarkMode, setCurrentDarkMode] = useState(darkMode);
+  const [currentSiteName, setCurrentSiteName] = useState(siteName);
   const [isDark, setIsDark] = useState(false);
   const [siteNav, setSiteNav] = useState<SiteNav>(initialNav);
   const [showHistory, setShowHistory] = useState(false);
@@ -34,7 +35,8 @@ export default function Navigation({ siteNav: initialNav, siteName, darkMode, la
     const unlistenEdit = editModeEvent.listen(({ isEditMode }) => setIsEditMode(isEditMode));
     const unlistenNav = siteNavChangeEvent.listen((n) => setSiteNav(n));
     const unlistenDark = darkModeEvent.listen((mode) => setCurrentDarkMode(mode as typeof darkMode));
-    return () => { unlistenEdit(); unlistenNav(); unlistenDark(); };
+    const unlistenName = siteNameChangeEvent.listen((name) => setCurrentSiteName(name));
+    return () => { unlistenEdit(); unlistenNav(); unlistenDark(); unlistenName(); };
   }, []);
 
   useEffect(() => {
@@ -191,7 +193,7 @@ export default function Navigation({ siteNav: initialNav, siteName, darkMode, la
     <>
       <header className="fixed top-0 left-0 right-0 z-50 bg-base lg:hidden">
         <div className="mx-auto max-w-screen-xl flex h-16 items-center justify-between px-4">
-          <span className="text-lg font-bold text-primary">{siteName}</span>
+          <span className="text-lg font-bold text-primary">{currentSiteName}</span>
           <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">
               {isOpen
@@ -207,7 +209,7 @@ export default function Navigation({ siteNav: initialNav, siteName, darkMode, la
       <nav className={cn("fixed top-0 left-0 lg:left-auto z-40 h-full w-64 flex flex-col overflow-y-auto border-r border-base-200 bg-base pt-16 transition-transform lg:translate-x-0 nav-sidebar",
         isOpen ? "translate-x-0" : "-translate-x-full")}>
         <div className="hidden px-4 py-4 lg:block">
-          <span className="text-lg font-bold text-primary">{siteName}</span>
+          <span className="text-lg font-bold text-primary">{currentSiteName}</span>
         </div>
 
         <ul className="space-y-1 px-4 py-2">