@drawnagency/primitives 0.1.11 → 0.1.13

package/src/hooks/useBuildStatus.ts

@@ -0,0 +1,139 @@
+import { useState, useCallback, useEffect, useRef } from "react";
+
+type BuildState = "idle" | "building" | "ready" | "error";
+
+interface BuildStatusResponse {
+  state: "building" | "ready" | "error";
+  deployUrl: string;
+  commitSha: string | null;
+  updatedAt: string;
+}
+
+interface BuildStatusResult {
+  state: BuildState;
+  deployUrl: string | null;
+  visible: boolean;
+  dismiss: () => void;
+  startTracking: () => void;
+}
+
+const POLL_INTERVAL = 5000;
+const AUTO_DISMISS_DELAY = 10000;
+
+export function useBuildStatus(): BuildStatusResult {
+  const [state, setState] = useState<BuildState>("idle");
+  const [deployUrl, setDeployUrl] = useState<string | null>(null);
+  const [dismissed, setDismissed] = useState(false);
+  const pollRef = useRef<ReturnType<typeof setInterval> | null>(null);
+  const dismissRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const isPolling = useRef(false);
+
+  const stopPolling = useCallback(() => {
+    if (pollRef.current) {
+      clearInterval(pollRef.current);
+      pollRef.current = null;
+    }
+    isPolling.current = false;
+  }, []);
+
+  const fetchStatus = useCallback(async (): Promise<BuildStatusResponse | null> => {
+    try {
+      const res = await fetch("/api/build-status");
+      if (!res.ok) return null;
+      const data = await res.json();
+      const validStates = ["building", "ready", "error"];
+      if (!data || !validStates.includes(data.state)) return null;
+      return data as BuildStatusResponse;
+    } catch {
+      return null;
+    }
+  }, []);
+
+  const handleStatusUpdate = useCallback(
+    (data: BuildStatusResponse | null, isInitialLoad: boolean) => {
+      if (!data) {
+        if (isInitialLoad) {
+          setState("idle");
+        }
+        return;
+      }
+
+      if (isInitialLoad && data.state === "ready") {
+        setState("idle");
+        return;
+      }
+
+      setState(data.state);
+      setDeployUrl(data.deployUrl);
+      setDismissed(false);
+
+      if (data.state === "ready" || data.state === "error") {
+        stopPolling();
+
+        if (data.state === "ready") {
+          dismissRef.current = setTimeout(() => {
+            setDismissed(true);
+          }, AUTO_DISMISS_DELAY);
+        }
+      }
+    },
+    [stopPolling],
+  );
+
+  const startPolling = useCallback(() => {
+    if (isPolling.current) return;
+    isPolling.current = true;
+
+    pollRef.current = setInterval(async () => {
+      const data = await fetchStatus();
+      handleStatusUpdate(data, false);
+    }, POLL_INTERVAL);
+  }, [fetchStatus, handleStatusUpdate]);
+
+  // Initial fetch on mount
+  useEffect(() => {
+    let cancelled = false;
+
+    async function check() {
+      const data = await fetchStatus();
+      if (cancelled) return;
+      handleStatusUpdate(data, true);
+
+      if (data && data.state === "building") {
+        startPolling();
+      }
+    }
+
+    check();
+
+    return () => {
+      cancelled = true;
+      stopPolling();
+      if (dismissRef.current) clearTimeout(dismissRef.current);
+    };
+  }, [fetchStatus, handleStatusUpdate, startPolling, stopPolling]);
+
+  const dismiss = useCallback(() => {
+    setDismissed(true);
+    stopPolling();
+    if (dismissRef.current) {
+      clearTimeout(dismissRef.current);
+      dismissRef.current = null;
+    }
+  }, [stopPolling]);
+
+  const startTracking = useCallback(() => {
+    setState("building");
+    setDeployUrl(null);
+    setDismissed(false);
+    if (dismissRef.current) {
+      clearTimeout(dismissRef.current);
+      dismissRef.current = null;
+    }
+    startPolling();
+  }, [startPolling]);
+
+  const visible = state !== "idle" && !dismissed;
+
+  return { state, deployUrl, visible, dismiss, startTracking };
+}

package/src/hooks/useContentLifecycle.ts

@@ -0,0 +1,34 @@
+import { useMemo } from "react";
+
+type ButtonState = "synced" | "publish" | "saveAndPublish";
+
+interface ContentLifecycleInput {
+  savedSha: string | null;
+  mainSha: string | null;
+  hasLocalChanges: boolean;
+}
+
+interface ContentLifecycleResult {
+  buttonState: ButtonState;
+  hasSavedChanges: boolean;
+}
+
+export function useContentLifecycle({
+  savedSha,
+  mainSha,
+  hasLocalChanges,
+}: ContentLifecycleInput): ContentLifecycleResult {
+  return useMemo(() => {
+    const hasSavedChanges = savedSha !== null && savedSha !== mainSha;
+
+    if (hasLocalChanges) {
+      return { buttonState: "saveAndPublish" as const, hasSavedChanges };
+    }
+
+    if (hasSavedChanges) {
+      return { buttonState: "publish" as const, hasSavedChanges };
+    }
+
+    return { buttonState: "synced" as const, hasSavedChanges: false };
+  }, [savedSha, mainSha, hasLocalChanges]);
+}

package/src/hooks/useEditorPublish.ts

@@ -24,11 +24,21 @@ interface PublishDeps {
   siteIndexRef: React.RefObject<SiteIndex>;
   siteConfig: SiteConfig | null;
   sections: LoadedSection[];
+  deletedSectionIds?: string[];
   onSuccess: () => void;
   mediaManifest: MediaManifest;
   pendingMediaItems: MediaItem[];
   pendingMediaDeletions: string[];
   onMediaPublished: (publishedItems: MediaItem[], publishedDeletions: string[]) => void;
+  onShasUpdated: (savedSha: string | null, mainSha: string | null) => void;
+  onPublishComplete?: () => void;
+}
+
+interface GatheredMedia {
+  mediaUploads: { item: MediaItem; blobs: { path: string; base64: string }[] }[];
+  blobUrlsToRevoke: string[];
+  updatedManifest: MediaManifest | undefined;
+  hasMediaChanges: boolean;
 }
 
 export function useEditorPublish({
@@ -39,11 +49,14 @@ export function useEditorPublish({
   siteIndexRef,
   siteConfig,
   sections,
+  deletedSectionIds,
   onSuccess,
   mediaManifest,
   pendingMediaItems,
   pendingMediaDeletions,
   onMediaPublished,
+  onShasUpdated,
+  onPublishComplete,
 }: PublishDeps) {
   const [isPublishing, setIsPublishing] = useState(false);
   const [publishFeedback, setPublishFeedback] = useState<string | null>(null);
@@ -55,7 +68,72 @@ export function useEditorPublish({
     };
   }, []);
 
-  const handlePublish = useCallback(async () => {
+  const showFeedback = useCallback((message: string, duration: number) => {
+    setPublishFeedback(message);
+    if (feedbackTimerRef.current) clearTimeout(feedbackTimerRef.current);
+    feedbackTimerRef.current = setTimeout(() => setPublishFeedback(null), duration);
+  }, []);
+
+  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;
+
+      for (const url of Object.values(localUrls)) {
+        blobUrlsToRevoke.push(url);
+      }
+
+      const blobs: { path: string; base64: string }[] = [];
+      const failedBlobFetches: 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)) {
+        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}`);
+        }
+      }
+
+      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 });
+      }
+    }
+
+    let updatedManifest: MediaManifest | undefined;
+    if (hasMediaChanges) {
+      const images = { ...mediaManifest.images };
+      for (const upload of mediaUploads) {
+        images[upload.item.id] = upload.item;
+      }
+      for (const id of pendingMediaDeletions) {
+        delete images[id];
+      }
+      updatedManifest = { images };
+    }
+
+    return { mediaUploads, blobUrlsToRevoke, updatedManifest, hasMediaChanges };
+  }
+
+  const handleSave = useCallback(async () => {
     if (!siteConfig) return;
 
     setIsPublishing(true);
@@ -67,80 +145,43 @@ export function useEditorPublish({
 
       const hasChanges = await hasLocalChanges();
       const hasMediaChanges = pendingMediaItems.length > 0 || pendingMediaDeletions.length > 0;
-      if (!hasChanges && !isConfigDirty() && !hasMediaChanges) {
+      const hasDeletedSections = (deletedSectionIds?.length ?? 0) > 0;
+      if (!hasChanges && !isConfigDirty() && !hasMediaChanges && !hasDeletedSections) {
         setIsPublishing(false);
         return;
       }
 
       const dirty = await getDirtySections();
+      const { mediaUploads, blobUrlsToRevoke, updatedManifest, hasMediaChanges: mediaChanged } = await gatherMediaPayload();
 
-      // Gather pending media for the commit
-      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;
-
-        for (const url of Object.values(localUrls)) {
-          blobUrlsToRevoke.push(url);
+      // Build a filtered siteIndex if there are deletions
+      let siteIndex = siteIndexRef.current;
+      if (deletedSectionIds?.length) {
+        const deleteSet = new Set(deletedSectionIds);
+        const filteredSections = { ...siteIndex.sections };
+        for (const id of deletedSectionIds) {
+          delete filteredSections[id];
         }
-
-        const blobs: { path: string; base64: string }[] = [];
-        const failedBlobFetches: string[] = [];
-        const mimeExt: Record<string, string> = {
-          "image/gif": "gif", "image/apng": "apng", "video/mp4": "mp4", "video/webm": "webm",
+        siteIndex = {
+          ...siteIndex,
+          order: siteIndex.order.filter((id) => !deleteSet.has(id)),
+          sections: filteredSections,
         };
-        for (const [key, url] of Object.entries(localUrls)) {
-          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}`);
-          }
-        }
-
-        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 });
-        }
-      }
-
-      // Build updated manifest
-      let updatedManifest: MediaManifest | undefined;
-      if (hasMediaChanges) {
-        const images = { ...mediaManifest.images };
-        for (const upload of mediaUploads) {
-          images[upload.item.id] = upload.item;
-        }
-        for (const id of pendingMediaDeletions) {
-          delete images[id];
-        }
-        updatedManifest = { images };
       }
 
       const response = await fetch("/api/save", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({
+          targetBranch: "saved",
           sections: dirty.map(({ sectionId, content }) => ({
             id: sectionId,
             content,
           })),
-          siteIndex: siteIndexRef.current,
+          siteIndex,
+          ...(deletedSectionIds?.length ? { deletedSectionIds } : {}),
           ...(isConfigDirty() ? { siteConfig } : {}),
-          ...(hasMediaChanges ? {
+          ...(mediaChanged ? {
             media: {
               uploads: mediaUploads.map(({ item, blobs }) => ({ item, blobs })),
               deletions: pendingMediaDeletions.map((id) => ({
@@ -155,33 +196,160 @@ export function useEditorPublish({
 
       if (!response.ok) {
         const errorBody = await response.json().catch(() => ({}));
-        throw new Error(errorBody.error || "Publish failed");
+        throw new Error(errorBody.error || "Save failed");
       }
 
       const { sha } = await response.json();
 
       await discardLocalChanges();
       await clearPendingMedia();
-      await cacheContent(sha, sections, siteIndexRef.current, siteConfig);
       clearConfigDirty();
       onSuccess();
       onMediaPublished(pendingMediaItems, pendingMediaDeletions);
+      onShasUpdated(sha, null);
       for (const url of blobUrlsToRevoke) {
         URL.revokeObjectURL(url);
       }
 
-      setPublishFeedback("Published");
-      if (feedbackTimerRef.current) clearTimeout(feedbackTimerRef.current);
-      feedbackTimerRef.current = setTimeout(() => setPublishFeedback(null), 3000);
+      showFeedback("Saved", 3000);
+    } catch (error) {
+      console.error("Save failed:", error);
+      showFeedback("Save failed", 5000);
+    } finally {
+      setIsPublishing(false);
+    }
+  }, [flushNow, cancelPendingFlush, isConfigDirty, clearConfigDirty, siteIndexRef, siteConfig, sections, deletedSectionIds, onSuccess, mediaManifest, pendingMediaItems, pendingMediaDeletions, onMediaPublished, onShasUpdated, showFeedback]);
+
+  const handlePublish = useCallback(async () => {
+    setIsPublishing(true);
+    setPublishFeedback(null);
+
+    try {
+      const response = await fetch("/api/publish", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+      });
+
+      if (!response.ok) {
+        const errorBody = await response.json().catch(() => ({}));
+        throw new Error(errorBody.error || "Publish failed");
+      }
+
+      const { sha } = await response.json();
+
+      onShasUpdated(null, sha);
+      showFeedback("Published", 3000);
+      onPublishComplete?.();
     } catch (error) {
       console.error("Publish failed:", error);
-      setPublishFeedback("Publish failed");
-      if (feedbackTimerRef.current) clearTimeout(feedbackTimerRef.current);
-      feedbackTimerRef.current = setTimeout(() => setPublishFeedback(null), 5000);
+      showFeedback("Publish failed", 5000);
+    } finally {
+      setIsPublishing(false);
+    }
+  }, [onShasUpdated, showFeedback, onPublishComplete]);
+
+  const handleSaveAndPublish = useCallback(async () => {
+    if (!siteConfig) return;
+
+    setIsPublishing(true);
+    setPublishFeedback(null);
+
+    try {
+      cancelPendingFlush();
+      await flushNow();
+
+      const hasChanges = await hasLocalChanges();
+      const hasMediaChanges = pendingMediaItems.length > 0 || pendingMediaDeletions.length > 0;
+      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;
+        if (deletedSectionIds?.length) {
+          const deleteSet = new Set(deletedSectionIds);
+          const filteredSections = { ...siteIndex.sections };
+          for (const id of deletedSectionIds) {
+            delete filteredSections[id];
+          }
+          siteIndex = {
+            ...siteIndex,
+            order: siteIndex.order.filter((id) => !deleteSet.has(id)),
+            sections: filteredSections,
+          };
+        }
+
+        const saveResponse = await fetch("/api/save", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            targetBranch: "saved",
+            sections: dirty.map(({ sectionId, content }) => ({
+              id: sectionId,
+              content,
+            })),
+            siteIndex,
+            ...(deletedSectionIds?.length ? { deletedSectionIds } : {}),
+            ...(isConfigDirty() ? { siteConfig } : {}),
+            ...(gathered.hasMediaChanges ? {
+              media: {
+                uploads: gathered.mediaUploads.map(({ item, blobs }) => ({ item, blobs })),
+                deletions: pendingMediaDeletions.map((id) => ({
+                  id,
+                  folder: mediaManifest.images[id]?.folder,
+                })).filter((d) => d.folder),
+                manifest: gathered.updatedManifest,
+              },
+            } : {}),
+          }),
+        });
+
+        if (!saveResponse.ok) {
+          const errorBody = await saveResponse.json().catch(() => ({}));
+          throw new Error(errorBody.error || "Save failed");
+        }
+      }
+
+      const publishResponse = await fetch("/api/publish", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+      });
+
+      if (!publishResponse.ok) {
+        const errorBody = await publishResponse.json().catch(() => ({}));
+        throw new Error(errorBody.error || "Publish failed");
+      }
+
+      const { sha } = await publishResponse.json();
+
+      if (hasLocalEdits) {
+        await discardLocalChanges();
+        await clearPendingMedia();
+        await cacheContent(sha, sections, siteIndexRef.current, siteConfig);
+        clearConfigDirty();
+        onSuccess();
+        onMediaPublished(pendingMediaItems, pendingMediaDeletions);
+        for (const url of blobUrlsToRevoke) {
+          URL.revokeObjectURL(url);
+        }
+      }
+
+      onShasUpdated(null, sha);
+      showFeedback("Published", 3000);
+      onPublishComplete?.();
+    } catch (error) {
+      console.error("Publish failed:", error);
+      showFeedback("Publish failed", 5000);
     } finally {
       setIsPublishing(false);
     }
-  }, [flushNow, cancelPendingFlush, isConfigDirty, clearConfigDirty, siteIndexRef, siteConfig, sections, onSuccess, mediaManifest, pendingMediaItems, pendingMediaDeletions, onMediaPublished]);
+  }, [flushNow, cancelPendingFlush, isConfigDirty, clearConfigDirty, siteIndexRef, siteConfig, sections, deletedSectionIds, onSuccess, mediaManifest, pendingMediaItems, pendingMediaDeletions, onMediaPublished, onShasUpdated, showFeedback, onPublishComplete]);
 
-  return { isPublishing, publishFeedback, handlePublish };
+  return { isPublishing, publishFeedback, handleSave, handlePublish, handleSaveAndPublish };
 }

package/src/lib/dexie.ts

@@ -15,12 +15,14 @@ interface SiteIndexRow {
   key: string;
   order: string[];
   sections: Record<string, SectionMeta>;
+  deletedSections: string[];
   updatedAt: string;
 }
 
 interface MetaRow {
   key: string;
   lastSavedSha: string | null;
+  mainSha: string | null;
   lastSavedAt: string | null;
   siteId: string;
 }
@@ -98,6 +100,16 @@ class EditorDatabase extends Dexie {
       pendingMedia: "id",
       pendingMediaDeletions: "id",
     });
+    this.version(5).stores({
+      sections: "sectionId",
+      siteIndex: "key",
+      meta: "key",
+      siteConfig: "key",
+      contentCache: "key",
+      mediaManifest: "key",
+      pendingMedia: "id",
+      pendingMediaDeletions: "id",
+    });
   }
 }
 
@@ -132,6 +144,7 @@ export async function restoreLocalChanges(): Promise<{
   sections: Record<string, SectionContent>;
   siteIndex?: SiteIndex;
   siteConfig?: Record<string, unknown>;
+  deletedSections: string[];
 }> {
   const sectionRows = await getDb().sections.toArray();
   const sections: Record<string, SectionContent> = {};
@@ -149,10 +162,11 @@ export async function restoreLocalChanges(): Promise<{
       sections,
       siteIndex: { siteId, order: indexRow.order, sections: indexRow.sections },
       siteConfig: configRow?.config,
+      deletedSections: indexRow.deletedSections ?? [],
     };
   }
 
-  return { sections, siteIndex: undefined, siteConfig: configRow?.config };
+  return { sections, siteIndex: undefined, siteConfig: configRow?.config, deletedSections: [] };
 }
 
 export async function discardLocalChanges(): Promise<void> {
@@ -168,7 +182,7 @@ export async function discardLocalChanges(): Promise<void> {
   });
 }
 
-export async function persistSiteIndex(index: SiteIndex): Promise<void> {
+export async function persistSiteIndex(index: SiteIndex, deletedSections: string[] = []): Promise<void> {
   const now = new Date().toISOString();
   const database = getDb();
   await database.transaction("rw", [database.siteIndex, database.meta], async () => {
@@ -176,11 +190,13 @@ export async function persistSiteIndex(index: SiteIndex): Promise<void> {
       key: "current",
       order: index.order,
       sections: index.sections,
+      deletedSections,
       updatedAt: now,
     });
     await database.meta.put({
       key: "current",
       lastSavedSha: null,
+      mainSha: null,
       lastSavedAt: null,
       siteId: index.siteId,
     });
@@ -246,11 +262,13 @@ export async function persistAll(
           key: "current",
           order: siteIndex.order,
           sections: siteIndex.sections,
+          deletedSections: [],
           updatedAt: now,
         });
         await database.meta.put({
           key: "current",
           lastSavedSha: null,
+          mainSha: null,
           lastSavedAt: null,
           siteId: siteIndex.siteId,
         });
@@ -267,6 +285,29 @@ export async function persistAll(
   );
 }
 
+export async function updateBranchShas(savedSha: string | null, mainSha: string | null): Promise<void> {
+  const database = getDb();
+  const existing = await database.meta.get("current");
+  if (!existing) return;
+  await database.meta.put({
+    ...existing,
+    lastSavedSha: savedSha,
+    mainSha,
+    lastSavedAt: new Date().toISOString(),
+  });
+}
+
+export async function getBranchShas(): Promise<{ savedSha: string | null; mainSha: string | null } | null> {
+  const row = await getDb().meta.get("current");
+  if (!row) return null;
+  return { savedSha: row.lastSavedSha, mainSha: row.mainSha ?? null };
+}
+
+export async function getDeletedSections(): Promise<string[]> {
+  const row = await getDb().siteIndex.get("current");
+  return row?.deletedSections ?? [];
+}
+
 export async function cacheContent(
   sha: string,
   sections: LoadedSection[],

package/src/lib/registry.ts

@@ -73,11 +73,16 @@ export interface WrapperProps {
   audiences: Audience[];
   access: string[];
   onAccessChange?: (access: string[]) => void;
-  onStatusChange?: (status: "draft" | "published" | "archived") => void;
+  onStatusChange?: (status: "draft" | "live" | "archived") => void;
   onSectionChange?: (options: Record<string, unknown>) => void;
   onReorder?: (fromIndex: number, toIndex: number) => void;
   onRequestInsert?: (index: number) => void;
   onDelete?: () => void;
+  isDeleted?: boolean;
+  onUndoDelete?: () => void;
+  mainStatus?: string | null;
+  contentDiffersFromMain?: boolean;
+  isLocalOnly?: boolean;
   children: React.ReactNode;
 }