@drawnagency/primitives 0.1.25 → 0.1.27

package/src/components/shell/EditorShell.tsx

@@ -16,9 +16,12 @@ import { MediaLibraryModal } from "./MediaLibraryModal";
 import { MediaLibraryContext } from "./MediaLibraryContext";
 import { ProcessingIndicator } from "./ProcessingIndicator";
 import { SectionSkeleton } from "./SectionSkeleton";
-import "../sections/register";
+import { ensureSectionsRegistered } from "../sections/register";
 import { getSection, getAllSections } from "../../lib/registry";
+
+ensureSectionsRegistered();
 import { SectionWrapper } from "../editor/SectionWrapper";
+import { SectionOrderingModal } from "../editor/SectionOrderingModal";
 import { SectionLayout } from "../sections/SectionLayout";
 import {
   initEditorStore,
@@ -30,7 +33,7 @@ import {
   persistMediaManifest,
   getMediaManifest,
   getPendingMediaItems,
-  getPendingMediaLocalUrls,
+  getPendingMediaBlobs,
   getPendingMediaDeletions,
 } from "../../lib/dexie";
 import { useEditorPersistence } from "../../hooks/useEditorPersistence";
@@ -47,7 +50,7 @@ import { SplitButton } from "../shared/SplitButton";
 import { IconButton } from "../shared/IconButton";
 import { SegmentedControl } from "../shared/SegmentedControl";
 import { SettingsIcon } from "../shared/icons";
-import { ImageIcon, X } from "lucide-react";
+import { ImageIcon, ListOrderedIcon, X } from "lucide-react";
 import { ErrorBoundary } from "../shared/ErrorBoundary";
 import { HistoryToolbar } from "./HistoryToolbar";
 import { RestoreModal } from "./RestoreModal";
@@ -110,6 +113,7 @@ export default function EditorShell({
   const [viewSections, setViewSections] = useState<LoadedSection[] | null>(null);
   const [isLoadingViewContent, setIsLoadingViewContent] = useState(false);
   const [showRestoreModal, setShowRestoreModal] = useState(false);
+  const [showOrderingModal, setShowOrderingModal] = useState(false);
   const [isRestoring, setIsRestoring] = useState(false);
 
   const siteIndexRef = useRef<SiteIndex>({ siteId, order: [], sections: {} });
@@ -149,6 +153,9 @@ export default function EditorShell({
     pendingMediaItems: mediaPipeline.pendingMediaItems,
     pendingMediaDeletions: mediaPipeline.pendingDeletions,
     onMediaPublished: (publishedItems, publishedDeletions) => {
+      for (const url of Object.values(mediaPipeline.pendingLocalUrls)) {
+        URL.revokeObjectURL(url);
+      }
       mediaPipeline.setPendingMediaItems([]);
       mediaPipeline.setPendingLocalUrls({});
       mediaPipeline.setPendingDeletions([]);
@@ -265,16 +272,16 @@ export default function EditorShell({
       siteIndexRef.current = loadedIndex;
       applySiteConfigPreview(loadedConfig);
 
-      // Load pending media from Dexie
+      // Load pending media from Dexie — recreate blob URLs from stored blobs
       const savedPendingItems = await getPendingMediaItems();
       if (!cancelled && savedPendingItems.length > 0) {
         mediaPipeline.setPendingMediaItems(savedPendingItems);
         const urlMap: Record<string, string> = {};
         for (const pi of savedPendingItems) {
-          const urls = await getPendingMediaLocalUrls(pi.id);
-          if (urls) {
-            const smallestKey = Object.keys(urls).find((k) => k !== "primary") ?? "primary";
-            if (urls[smallestKey]) urlMap[pi.id] = urls[smallestKey];
+          const blobs = await getPendingMediaBlobs(pi.id);
+          if (blobs) {
+            const displayKey = Object.keys(blobs).find((k) => k !== "primary" && k !== "poster") ?? "primary";
+            if (blobs[displayKey]) urlMap[pi.id] = URL.createObjectURL(blobs[displayKey]);
           }
         }
         if (!cancelled) mediaPipeline.setPendingLocalUrls(urlMap);
@@ -352,6 +359,9 @@ export default function EditorShell({
     await discardLocalChanges();
     setLocalChangesExist(false);
     setDirtySectionIds(new Set());
+    for (const url of Object.values(mediaPipeline.pendingLocalUrls)) {
+      URL.revokeObjectURL(url);
+    }
     mediaPipeline.setPendingMediaItems([]);
     mediaPipeline.setPendingLocalUrls({});
     mediaPipeline.setPendingDeletions([]);
@@ -534,7 +544,6 @@ export default function EditorShell({
         })),
         siteIndex: historyContent.index,
         siteConfig: historyContent.siteConfig,
-        targetBranch: "main",
       };
 
       const response = await fetch("/api/save", {
@@ -626,6 +635,7 @@ export default function EditorShell({
             buildElapsed={buildStatus.elapsedSeconds}
             onBuildDismiss={buildStatus.dismiss}
             onRestoreClick={() => setShowRestoreModal(true)}
+            onOrderingClick={() => setShowOrderingModal(true)}
           />
 
           <HistoryOrEditorContent sections={sections}>
@@ -704,6 +714,18 @@ export default function EditorShell({
               maxFileSize={siteConfig?.media.maxFileSize}
             />
           </EditorModal>
+          <EditorModal
+            isOpen={showOrderingModal}
+            onClose={() => setShowOrderingModal(false)}
+            title="Reorder Sections"
+            size="settings"
+          >
+            <SectionOrderingModal
+              sections={sections}
+              mediaManifest={mediaManifest}
+              onReorder={onReorderSections}
+            />
+          </EditorModal>
           <RestoreHandler
             showRestoreModal={showRestoreModal}
             setShowRestoreModal={setShowRestoreModal}
@@ -1097,6 +1119,7 @@ function EditorToolbar({
   buildElapsed,
   onBuildDismiss,
   onRestoreClick,
+  onOrderingClick,
 }: {
   buttonState: "synced" | "publish" | "saveAndPublish";
   localChangesExist: boolean;
@@ -1113,6 +1136,7 @@ function EditorToolbar({
   buildElapsed: number;
   onBuildDismiss: () => void;
   onRestoreClick: () => void;
+  onOrderingClick: () => void;
 }) {
   const { isEditMode, viewBranch, setViewBranch, toggleEditMode, historyState, setHistoryState } = useEditorContext();
 
@@ -1177,6 +1201,13 @@ function EditorToolbar({
             </div>
             <div className="flex items-center justify-end gap-2">
               <ProcessingIndicator items={processingItems} />
+              <IconButton
+                icon={<ListOrderedIcon size={16} />}
+                label="Reorder sections"
+                size="md"
+                onClick={onOrderingClick}
+                className="border border-base-200 bg-base-accent"
+              />
               <IconButton
                 icon={<ImageIcon size={16} />}
                 label="Media library"

package/src/components/shell/HistoryToolbar.tsx

@@ -1,3 +1,4 @@
+import { formatDateTime } from "../../lib/timestamp";
 import { Button } from "../shared/Button";
 
 interface HistoryToolbarProps {
@@ -7,12 +8,6 @@ interface HistoryToolbarProps {
 }
 
 export function HistoryToolbar({ date, onBackToCurrent, onRestore }: HistoryToolbarProps) {
-  const formattedDate = new Date(date).toLocaleDateString("en-US", {
-    month: "short",
-    day: "numeric",
-    year: "numeric",
-  });
-
   return (
     <div className="fixed top-0 right-0 left-0 z-50 border-b border-base-200 bg-base">
       <div className="mx-auto max-w-screen-xl grid grid-cols-3 items-center px-4 py-2">
@@ -23,7 +18,7 @@ export function HistoryToolbar({ date, onBackToCurrent, onRestore }: HistoryTool
         </div>
         <div className="flex items-center justify-center">
           <span className="text-xs font-medium text-base-contrast-light">
-            Viewing {formattedDate}
+            Viewing {formatDateTime(date)}
           </span>
         </div>
         <div className="flex items-center justify-end">

package/src/components/shell/RestoreModal.tsx

@@ -1,3 +1,4 @@
+import { formatDateTime } from "../../lib/timestamp";
 import { EditorModal } from "./EditorModal";
 import { Button } from "../shared/Button";
 
@@ -10,16 +11,10 @@ interface RestoreModalProps {
 }
 
 export function RestoreModal({ isOpen, onClose, date, onConfirm, isRestoring }: RestoreModalProps) {
-  const formattedDate = new Date(date).toLocaleDateString("en-US", {
-    month: "short",
-    day: "numeric",
-    year: "numeric",
-  });
-
   return (
     <EditorModal isOpen={isOpen} onClose={onClose} title="Restore this version?">
       <p className="mb-4 text-sm text-base-contrast-light">
-        This will publish the content from {formattedDate} as a new update.
+        This will publish the content from {formatDateTime(date)} as a new update.
         Your current content will still be available in the history.
       </p>
       <div className="flex justify-end gap-3">

package/src/deploy/index.ts

@@ -0,0 +1 @@
+export type { DeployStatus, DeployStatusProvider } from "./types";

package/src/deploy/types.ts

@@ -0,0 +1,12 @@
+export interface DeployStatus {
+  deployId: string;
+  state: "building" | "ready" | "error";
+  deployUrl: string;
+  commitSha: string | null;
+  updatedAt: string;
+}
+
+export interface DeployStatusProvider {
+  get(siteId: string): Promise<DeployStatus | null>;
+  upsert(siteId: string, data: Omit<DeployStatus, "updatedAt">): Promise<void>;
+}

package/src/hooks/useEditorPublish.ts

@@ -2,7 +2,7 @@ import { useState, useCallback, useRef, useEffect } from "react";
 import type { SiteIndex, SiteConfig } from "../schemas/site-config";
 import type { LoadedSection } from "../lib/loader";
 import type { MediaManifest, MediaItem } from "../media/types";
-import { getDirtySections, hasLocalChanges, discardLocalChanges, cacheContent, getPendingMediaLocalUrls, clearPendingMedia } from "../lib/dexie";
+import { getDirtySections, hasLocalChanges, discardLocalChanges, cacheContent, getPendingMediaBlobs, clearPendingMedia } from "../lib/dexie";
 
 function blobToBase64(blob: Blob): Promise<string> {
   return new Promise((resolve, reject) => {
@@ -36,7 +36,6 @@ interface PublishDeps {
 
 interface GatheredMedia {
   mediaUploads: { item: MediaItem; blobs: { path: string; base64: string }[] }[];
-  blobUrlsToRevoke: string[];
   updatedManifest: MediaManifest | undefined;
   hasMediaChanges: boolean;
 }
@@ -79,44 +78,31 @@ export function useEditorPublish({
   async function gatherMediaPayload(): Promise<GatheredMedia> {
     const hasMediaChanges = pendingMediaItems.length > 0 || pendingMediaDeletions.length > 0;
     const mediaUploads: { item: MediaItem; blobs: { path: string; base64: string }[] }[] = [];
-    const blobUrlsToRevoke: string[] = [];
 
-    for (const item of pendingMediaItems) {
-      const localUrls = await getPendingMediaLocalUrls(item.id);
-      if (!localUrls) continue;
+    const deletionSet = new Set(pendingMediaDeletions);
+    const itemsToUpload = pendingMediaItems.filter((i) => !deletionSet.has(i.id));
 
-      for (const url of Object.values(localUrls)) {
-        blobUrlsToRevoke.push(url);
-      }
+    for (const item of itemsToUpload) {
+      const storedBlobs = await getPendingMediaBlobs(item.id);
+      if (!storedBlobs) continue;
 
-      const blobs: { path: string; base64: string }[] = [];
-      const failedBlobFetches: string[] = [];
+      const blobPayloads: { path: string; base64: string }[] = [];
       const mimeExt: Record<string, string> = {
         "image/gif": "gif", "image/apng": "apng", "video/mp4": "mp4", "video/webm": "webm",
       };
-      for (const [key, url] of Object.entries(localUrls)) {
+      for (const [key, blob] of Object.entries(storedBlobs)) {
         if (key === "primary" && item.kind === "image") continue;
-        try {
-          const resp = await fetch(url);
-          const blob = await resp.blob();
-          const base64 = await blobToBase64(blob);
-          if (key === "primary") {
-            const ext = mimeExt[item.mimeType] ?? "bin";
-            blobs.push({ path: `assets/images/${item.folder}/original.${ext}`, base64 });
-          } else {
-            blobs.push({ path: `assets/images/${item.folder}/${key}.webp`, base64 });
-          }
-        } catch {
-          failedBlobFetches.push(`${item.id}/${key}`);
+        const base64 = await blobToBase64(blob);
+        if (key === "primary") {
+          const ext = mimeExt[item.mimeType] ?? "bin";
+          blobPayloads.push({ path: `assets/images/${item.folder}/original.${ext}`, base64 });
+        } else {
+          blobPayloads.push({ path: `assets/images/${item.folder}/${key}.webp`, base64 });
         }
       }
 
-      if (failedBlobFetches.length > 0) {
-        throw new Error(`Media upload failed: could not read blob data for ${failedBlobFetches.join(", ")}`);
-      }
-
-      if (blobs.length > 0) {
-        mediaUploads.push({ item, blobs });
+      if (blobPayloads.length > 0) {
+        mediaUploads.push({ item, blobs: blobPayloads });
       }
     }
 
@@ -132,7 +118,7 @@ export function useEditorPublish({
       updatedManifest = { images };
     }
 
-    return { mediaUploads, blobUrlsToRevoke, updatedManifest, hasMediaChanges };
+    return { mediaUploads, updatedManifest, hasMediaChanges };
   }
 
   const handleSave = useCallback(async () => {
@@ -154,7 +140,7 @@ export function useEditorPublish({
       }
 
       const dirty = await getDirtySections();
-      const { mediaUploads, blobUrlsToRevoke, updatedManifest, hasMediaChanges: mediaChanged } = await gatherMediaPayload();
+      const { mediaUploads, updatedManifest, hasMediaChanges: mediaChanged } = await gatherMediaPayload();
 
       // Build a filtered siteIndex if there are deletions
       let siteIndex = siteIndexRef.current;
@@ -175,7 +161,6 @@ export function useEditorPublish({
         method: "POST",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({
-          targetBranch: "saved",
           sections: dirty.map(({ sectionId, content }) => ({
             id: sectionId,
             content,
@@ -209,9 +194,6 @@ export function useEditorPublish({
       onSuccess();
       onMediaPublished(pendingMediaItems, pendingMediaDeletions);
       onShasUpdated(sha, null);
-      for (const url of blobUrlsToRevoke) {
-        URL.revokeObjectURL(url);
-      }
 
       showFeedback("Saved", 3000);
     } catch (error) {
@@ -264,12 +246,9 @@ export function useEditorPublish({
       const hasDeletedSections = (deletedSectionIds?.length ?? 0) > 0;
       const hasLocalEdits = hasChanges || isConfigDirty() || hasMediaChanges || hasDeletedSections;
 
-      let blobUrlsToRevoke: string[] = [];
-
       if (hasLocalEdits) {
         const dirty = await getDirtySections();
         const gathered = await gatherMediaPayload();
-        blobUrlsToRevoke = gathered.blobUrlsToRevoke;
 
         // Build a filtered siteIndex if there are deletions
         let siteIndex = siteIndexRef.current;
@@ -290,7 +269,6 @@ export function useEditorPublish({
           method: "POST",
           headers: { "Content-Type": "application/json" },
           body: JSON.stringify({
-            targetBranch: "saved",
             sections: dirty.map(({ sectionId, content }) => ({
               id: sectionId,
               content,
@@ -338,9 +316,6 @@ export function useEditorPublish({
         clearConfigDirty();
         onSuccess();
         onMediaPublished(pendingMediaItems, pendingMediaDeletions);
-        for (const url of blobUrlsToRevoke) {
-          URL.revokeObjectURL(url);
-        }
       }
 
       onShasUpdated(null, sha);

package/src/hooks/useMediaPipeline.ts

@@ -8,7 +8,9 @@ import type { LoadedSection } from "../lib/loader";
 import type { MediaLibraryContextValue } from "../components/shell/MediaLibraryContext";
 import {
   addPendingMediaItem,
+  removePendingMediaItem,
   markPendingMediaDeleted,
+  removePendingMediaDeletion,
 } from "../lib/dexie";
 import { generateVideoPoster } from "../media/videoPoster";
 
@@ -87,6 +89,7 @@ export function useMediaPipeline({
 
           const finalize = (
             localUrls: Record<string, string>,
+            blobsMap: Record<string, Blob>,
             width: number,
             height: number,
           ) => {
@@ -108,7 +111,9 @@ export function useMediaPipeline({
               alt: "",
             };
 
-            addPendingMediaItem(item, localUrls);
+            addPendingMediaItem(item, localUrls, blobsMap);
+            removePendingMediaDeletion(item.id);
+            setPendingDeletions((prev) => prev.filter((d) => d !== item.id));
             setPendingMediaItems((prev) => [...prev, item]);
             const displayKey = kind === "video"
               ? "primary"
@@ -126,28 +131,33 @@ export function useMediaPipeline({
           };
 
           const localUrls: Record<string, string> = {};
+          const blobsMap: Record<string, Blob> = {};
           for (const v of result.variants) {
+            blobsMap[String(v.width)] = v.blob;
             localUrls[String(v.width)] = URL.createObjectURL(v.blob);
           }
           if (result.primaryBlob) {
+            blobsMap["primary"] = result.primaryBlob;
             localUrls["primary"] = URL.createObjectURL(result.primaryBlob);
           }
 
           if (kind === "video") {
             generateVideoPoster(result.primaryBlob, mediaConfig.quality).then(
               ({ posterBlob, width, height }) => {
+                blobsMap["poster"] = posterBlob;
                 localUrls["poster"] = URL.createObjectURL(posterBlob);
-                finalize(localUrls, width, height);
+                finalize(localUrls, blobsMap, width, height);
               },
               () => {
-                finalize(localUrls, result.width, result.height);
+                finalize(localUrls, blobsMap, result.width, result.height);
               },
             );
           } else {
             if (result.posterBlob) {
+              blobsMap["poster"] = result.posterBlob;
               localUrls["poster"] = URL.createObjectURL(result.posterBlob);
             }
-            finalize(localUrls, result.width, result.height);
+            finalize(localUrls, blobsMap, result.width, result.height);
           }
         }
       },
@@ -171,9 +181,10 @@ export function useMediaPipeline({
       const buffer = await file.arrayBuffer();
       const hash = await hashFileBuffer(buffer);
 
+      const isDeleted = pendingDeletions.includes(hash);
       const existsInManifest = hash in mediaManifest.images;
       const existsInPending = pendingMediaItems.some((i) => i.hash === hash);
-      if (existsInManifest || existsInPending) continue;
+      if ((existsInManifest || existsInPending) && !isDeleted) continue;
 
       let kind: "image" | "animated" | "video" = "image";
       if (file.type === "image/gif" || file.type === "image/apng") kind = "animated";
@@ -181,15 +192,33 @@ export function useMediaPipeline({
 
       queue.add({ buffer, originalName: file.name, mimeType: file.type, hash, kind });
     }
-  }, [siteConfig, mediaManifest, pendingMediaItems]);
+  }, [siteConfig, mediaManifest, pendingMediaItems, pendingDeletions]);
 
   const handleMediaDelete = useCallback(async (ids: string[]) => {
+    const idSet = new Set(ids);
+    const pendingIds = new Set(pendingMediaItems.filter((i) => idSet.has(i.id)).map((i) => i.id));
+
     for (const id of ids) {
-      await markPendingMediaDeleted(id);
+      if (pendingIds.has(id)) {
+        await removePendingMediaItem(id);
+      } else {
+        await markPendingMediaDeleted(id);
+      }
     }
+
+    setPendingMediaItems((prev) => prev.filter((i) => !idSet.has(i.id)));
+    setPendingLocalUrls((prev) => {
+      const next = { ...prev };
+      for (const id of ids) {
+        if (next[id]) {
+          URL.revokeObjectURL(next[id]);
+          delete next[id];
+        }
+      }
+      return next;
+    });
     setPendingDeletions((prev) => [...prev, ...ids]);
 
-    const idSet = new Set(ids);
     setSections((prev) =>
       prev.map((loaded) => {
         const json = JSON.stringify(loaded.section);
@@ -204,7 +233,7 @@ export function useMediaPipeline({
     );
 
     setLocalChangesExist(true);
-  }, [markSectionDirty, setSections, setDirtySectionIds, setLocalChangesExist]);
+  }, [pendingMediaItems, markSectionDirty, setSections, setDirtySectionIds, setLocalChangesExist]);
 
   const handleMediaAltChange = useCallback((id: string, alt: string) => {
     setMediaManifest((prev) => {
@@ -247,10 +276,11 @@ export function useMediaPipeline({
         const buffer = await file.arrayBuffer();
         const hash = await hashFileBuffer(buffer);
 
+        const isDeleted = pendingDeletions.includes(hash);
         const existsInManifest = hash in mediaManifest.images;
         const existsInPending = pendingMediaItems.some((i) => i.hash === hash);
 
-        if (existsInManifest || existsInPending) {
+        if ((existsInManifest || existsInPending) && !isDeleted) {
           if (onComplete) onComplete(hash);
           return;
         }
@@ -268,7 +298,7 @@ export function useMediaPipeline({
         console.error(`[useMediaPipeline] Failed to enqueue file "${file.name}":`, err);
       }
     })();
-  }, [siteConfig, mediaManifest, pendingMediaItems]);
+  }, [siteConfig, mediaManifest, pendingMediaItems, pendingDeletions]);
 
   // --- Context value ---
 

package/src/hooks/useResolvedMedia.ts

@@ -1,6 +1,6 @@
 import { useMemo } from "react";
 import { useMediaLibrary } from "../components/shell/MediaLibraryContext";
-import { createMediaAdapter } from "../media";
+import { getMediaProvider } from "../media";
 
 export interface ResolvedMediaResult {
   src: string | undefined;
@@ -33,8 +33,8 @@ export function useResolvedMedia(imageId: string | undefined): ResolvedMediaResu
     }
 
     if (manifestItem) {
-      const adapter = createMediaAdapter(manifest);
-      const resolved = adapter.resolve(imageId, sizes);
+      const provider = getMediaProvider();
+      const resolved = provider.resolve(manifestItem, sizes);
       if (resolved && resolved.tag === "img") {
         return {
           src: resolved.src,

package/src/index.ts

@@ -2,3 +2,5 @@ export * from "./schemas";
 export * from "./lib";
 export * from "./auth";
 export * from "./media";
+export * from "./deploy";
+export * from "./storage";

package/src/lib/dexie.ts

@@ -52,6 +52,7 @@ interface PendingMediaRow {
   id: string;
   item: MediaItem;
   localUrls: Record<string, string>;
+  blobs: Record<string, Blob>;
   updatedAt: string;
 }
 
@@ -110,6 +111,18 @@ class EditorDatabase extends Dexie {
       pendingMedia: "id",
       pendingMediaDeletions: "id",
     });
+    this.version(6).stores({
+      sections: "sectionId",
+      siteIndex: "key",
+      meta: "key",
+      siteConfig: "key",
+      contentCache: "key",
+      mediaManifest: "key",
+      pendingMedia: "id",
+      pendingMediaDeletions: "id",
+    }).upgrade((tx) => {
+      return tx.table("pendingMedia").clear();
+    });
   }
 }
 
@@ -354,9 +367,10 @@ export async function getMediaManifest(): Promise<MediaManifest | null> {
 export async function addPendingMediaItem(
   item: MediaItem,
   localUrls: Record<string, string> = {},
+  blobs: Record<string, Blob> = {},
 ): Promise<void> {
   const now = new Date().toISOString();
-  await getDb().pendingMedia.put({ id: item.id, item, localUrls, updatedAt: now });
+  await getDb().pendingMedia.put({ id: item.id, item, localUrls, blobs, updatedAt: now });
 }
 
 export async function getPendingMediaItems(): Promise<MediaItem[]> {
@@ -369,11 +383,24 @@ export async function getPendingMediaLocalUrls(id: string): Promise<Record<strin
   return row?.localUrls ?? null;
 }
 
+export async function getPendingMediaBlobs(id: string): Promise<Record<string, Blob> | null> {
+  const row = await getDb().pendingMedia.get(id);
+  return row?.blobs ?? null;
+}
+
+export async function removePendingMediaItem(id: string): Promise<void> {
+  await getDb().pendingMedia.delete(id);
+}
+
 export async function markPendingMediaDeleted(id: string): Promise<void> {
   const now = new Date().toISOString();
   await getDb().pendingMediaDeletions.put({ id, deletedAt: now });
 }
 
+export async function removePendingMediaDeletion(id: string): Promise<void> {
+  await getDb().pendingMediaDeletions.delete(id);
+}
+
 export async function getPendingMediaDeletions(): Promise<string[]> {
   const rows = await getDb().pendingMediaDeletions.toArray();
   return rows.map((r) => r.id);

package/src/lib/nav.ts

@@ -1,4 +1,5 @@
 import type { LoadedSection } from "./loader";
+import { getSection, type SectionRegistry } from "./registry";
 
 export interface NavItem {
   href: string;
@@ -15,21 +16,27 @@ export function toSectionId(text: string): string {
     .replace(/\s+/g, "-");
 }
 
-/**
- * Generate a three-tier navigation structure from sections.
- * link_heading → top-level, sub_heading → second-level, sub_sub_heading → third-level.
- * Non-heading sections are skipped.
- */
-export function generateNavLinks(sections: LoadedSection[]): NavItem[] {
+export function generateNavLinks(
+  sections: LoadedSection[],
+  registry?: SectionRegistry,
+): NavItem[] {
   const nav: NavItem[] = [];
   let currentParent: NavItem | null = null;
   let currentChild: NavItem | null = null;
 
+  const lookupRole = (type: string) => {
+    const def = registry ? registry.getSection(type) : getSection(type);
+    return def?.navRole;
+  };
+
   for (const { section, meta } of sections) {
     const content = section.content as { heading?: string; excludeFromNav?: boolean };
     if (!content.heading) continue;
 
-    if (section.type === "link_heading") {
+    const role = lookupRole(section.type);
+    if (!role) continue;
+
+    if (role === "h1") {
       currentParent = {
         href: `#${toSectionId(content.heading)}`,
         label: content.heading,
@@ -38,7 +45,7 @@ export function generateNavLinks(sections: LoadedSection[]): NavItem[] {
       };
       currentChild = null;
       nav.push(currentParent);
-    } else if (section.type === "sub_heading") {
+    } else if (role === "h2") {
       if (content.excludeFromNav) continue;
       if (!currentParent) continue;
       currentChild = {
@@ -48,7 +55,7 @@ export function generateNavLinks(sections: LoadedSection[]): NavItem[] {
         children: [],
       };
       currentParent.children.push(currentChild);
-    } else if (section.type === "sub_sub_heading") {
+    } else if (role === "h3") {
       if (content.excludeFromNav) continue;
       if (!currentChild) continue;
       currentChild.children.push({

package/src/lib/registry.ts

@@ -46,6 +46,10 @@ export type SettingsFieldDef =
 
 export type SettingsSchema = Record<string, SettingsFieldDef>;
 
+export type Thumbnail =
+  | { type: "image"; src: string; alt?: string }
+  | { type: "color"; value: string };
+
 // --- Component prop types ---
 
 // Custom settings forms receive their fields as individual spread props plus onChange.
@@ -99,6 +103,9 @@ export interface SectionDefinition<T = unknown> {
   settings?: SettingsSchema;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   settingsForm?: ComponentType<any>;
+  getLabel?(content: T): string;
+  getThumbnails?(content: T): Thumbnail[];
+  navRole?: "h1" | "h2" | "h3";
 }
 
 // --- defineSection ---
@@ -114,6 +121,9 @@ type DefineSectionInput<S extends ZodType> = {
   settings?: SettingsSchema;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   settingsForm?: ComponentType<any>;
+  getLabel?(content: z.infer<S>): string;
+  getThumbnails?(content: z.infer<S>): Thumbnail[];
+  navRole?: "h1" | "h2" | "h3";
 };
 
 export function defineSection<S extends ZodType>(