@drawnagency/primitives 0.1.11 → 0.1.13

package/src/components/shared/SplitButton.tsx

@@ -0,0 +1,97 @@
+import { useRef, useState } from "react";
+import { ChevronDown } from "lucide-react";
+import { cn } from "../../lib/cn";
+import { Popover } from "./Popover";
+import { PopoverItem } from "./PopoverItem";
+
+export interface SplitButtonOption {
+  label: string;
+  onClick: () => void;
+  disabled?: boolean;
+}
+
+interface SplitButtonProps {
+  label: string;
+  onClick: () => void;
+  options: SplitButtonOption[];
+  disabled?: boolean;
+  isLoading?: boolean;
+  loadingLabel?: string;
+  className?: string;
+}
+
+export function SplitButton({
+  label,
+  onClick,
+  options,
+  disabled = false,
+  isLoading = false,
+  loadingLabel,
+  className,
+}: SplitButtonProps) {
+  const [open, setOpen] = useState(false);
+  const chevronRef = useRef<HTMLButtonElement>(null);
+  const resolvedDisabled = disabled || isLoading;
+  const displayLabel = isLoading && loadingLabel ? loadingLabel : label;
+  const hasOptions = options.length > 0 && !resolvedDisabled;
+
+  return (
+    <div className={cn("relative inline-flex", className)}>
+      <button
+        type="button"
+        onClick={onClick}
+        disabled={resolvedDisabled}
+        className={cn(
+          "inline-flex items-center px-4 py-1.5 text-xs font-medium transition-colors",
+          "bg-base-contrast text-base-accent",
+          hasOptions ? "rounded-l" : "rounded",
+          resolvedDisabled ? "cursor-not-allowed opacity-50" : "cursor-pointer hover:bg-base-contrast/90",
+        )}
+        aria-label={displayLabel}
+      >
+        {displayLabel}
+      </button>
+      {hasOptions && (
+        <>
+          <button
+            ref={chevronRef}
+            type="button"
+            onClick={() => setOpen((v) => !v)}
+            disabled={resolvedDisabled}
+            className={cn(
+              "inline-flex items-center border-l border-base-accent/20 px-2 py-1.5 transition-colors",
+              "bg-base-contrast text-base-accent rounded-r",
+              resolvedDisabled ? "cursor-not-allowed opacity-50" : "cursor-pointer hover:bg-base-contrast/90",
+            )}
+            aria-label="More actions"
+            aria-haspopup="true"
+            aria-expanded={open}
+          >
+            <ChevronDown size={14} />
+          </button>
+          <Popover isOpen={open} onClose={() => setOpen(false)} anchorRef={chevronRef} className="w-full">
+            <ul role="menu" className="py-1">
+              {options.map((option) => (
+                <li key={option.label}>
+                  <PopoverItem
+                    role="menuitem"
+                    aria-disabled={option.disabled}
+                    onClick={() => {
+                      if (!option.disabled) {
+                        option.onClick();
+                        setOpen(false);
+                      }
+                    }}
+                    className={cn(option.disabled && "opacity-50 cursor-not-allowed")}
+                  >
+                    <span className="font-medium text-base-contrast">{option.label}</span>
+                  </PopoverItem>
+                </li>
+              ))}
+            </ul>
+          </Popover>
+        </>
+      )}
+    </div>
+  );
+}

package/src/components/shell/BuildStatusIndicator.tsx

@@ -0,0 +1,67 @@
+import { cn } from "../../lib/cn";
+import { X } from "lucide-react";
+
+interface BuildStatusIndicatorProps {
+  state: "idle" | "building" | "ready" | "error";
+  deployUrl: string | null;
+  visible: boolean;
+  onDismiss: () => void;
+}
+
+const stateConfig = {
+  building: {
+    label: "Deploying...",
+    className: "border-orange-500 text-orange-600 hover:bg-orange-50",
+    dotClassName: "bg-orange-500 animate-pulse",
+  },
+  ready: {
+    label: "Live",
+    className: "border-green-600 text-green-600 hover:bg-green-50",
+    dotClassName: "bg-green-600",
+  },
+  error: {
+    label: "Deploy failed",
+    className: "border-red-600 text-red-600 hover:bg-red-50",
+    dotClassName: "bg-red-600",
+  },
+} as const;
+
+export function BuildStatusIndicator({
+  state,
+  deployUrl,
+  visible,
+  onDismiss,
+}: BuildStatusIndicatorProps) {
+  if (!visible || state === "idle") return null;
+
+  const config = stateConfig[state];
+
+  return (
+    <span className="inline-flex items-center gap-0">
+      <a
+        href={deployUrl ?? "#"}
+        target="_blank"
+        rel="noopener noreferrer"
+        aria-label={config.label}
+        className={cn(
+          "inline-flex items-center gap-1.5 rounded-l px-3 py-1.5 text-xs font-medium border transition-colors",
+          config.className,
+        )}
+      >
+        <span className={cn("h-1.5 w-1.5 rounded-full", config.dotClassName)} />
+        {config.label}
+      </a>
+      <button
+        type="button"
+        onClick={onDismiss}
+        aria-label="Dismiss build status"
+        className={cn(
+          "inline-flex items-center rounded-r border border-l-0 px-1.5 py-1.5 transition-colors cursor-pointer",
+          config.className,
+        )}
+      >
+        <X size={12} />
+      </button>
+    </span>
+  );
+}

package/src/components/shell/EditorContext.tsx

@@ -4,8 +4,10 @@ import { editModeEvent } from "../../lib/events";
 interface EditorContextValue {
   isEditMode: boolean;
   showAllChrome: boolean;
+  viewBranch: "saved" | "live";
   toggleEditMode: () => void;
   toggleShowAllChrome: () => void;
+  setViewBranch: (branch: "saved" | "live") => void;
 }
 
 const EditorContext = createContext<EditorContextValue | null>(null);
@@ -17,6 +19,7 @@ interface EditorProviderProps {
 export function EditorProvider({ children }: EditorProviderProps) {
   const [isEditMode, setIsEditMode] = useState(true);
   const [showAllChrome, setShowAllChrome] = useState(false);
+  const [viewBranch, setViewBranchState] = useState<"saved" | "live">("saved");
 
   const toggleEditMode = useCallback(() => {
     setIsEditMode((prev) => {
@@ -27,9 +30,10 @@ export function EditorProvider({ children }: EditorProviderProps) {
   }, []);
 
   const toggleShowAllChrome = useCallback(() => setShowAllChrome((prev) => !prev), []);
+  const setViewBranch = useCallback((b: "saved" | "live") => setViewBranchState(b), []);
 
   return (
-    <EditorContext.Provider value={{ isEditMode, showAllChrome, toggleEditMode, toggleShowAllChrome }}>
+    <EditorContext.Provider value={{ isEditMode, showAllChrome, viewBranch, toggleEditMode, toggleShowAllChrome, setViewBranch }}>
       {children}
     </EditorContext.Provider>
   );

package/src/components/shell/EditorShell.tsx

@@ -35,13 +35,18 @@ import {
 } from "../../lib/dexie";
 import { useEditorPersistence } from "../../hooks/useEditorPersistence";
 import { useEditorPublish } from "../../hooks/useEditorPublish";
+import { useContentLifecycle } from "../../hooks/useContentLifecycle";
+import { useBuildStatus } from "../../hooks/useBuildStatus";
+import { BuildStatusIndicator } from "./BuildStatusIndicator";
 import { useMediaPipeline } from "../../hooks/useMediaPipeline";
 import { formatTimestamp } from "../../lib/timestamp";
 import { generateNavLinks } from "../../lib/nav";
 import { navChangeEvent, darkModeEvent } from "../../lib/events";
 import { cn } from "../../lib/cn";
 import { Button } from "../shared/Button";
+import { SplitButton } from "../shared/SplitButton";
 import { IconButton } from "../shared/IconButton";
+import { SegmentedControl } from "../shared/SegmentedControl";
 import { SettingsIcon } from "../shared/icons";
 import { ImageIcon } from "lucide-react";
 import { ErrorBoundary } from "../shared/ErrorBoundary";
@@ -95,6 +100,13 @@ export default function EditorShell({
   const [showMediaLibrary, setShowMediaLibrary] = useState(false);
   const [mediaModalMode, setMediaModalMode] = useState<"select" | "manage">("manage");
   const [mediaSelectCallback, setMediaSelectCallback] = useState<((id: string) => void) | null>(null);
+  const [deletedSections, setDeletedSections] = useState<Set<string>>(new Set());
+  const [savedSha, setSavedSha] = useState<string | null>(null);
+  const [mainSha, setMainSha] = useState<string | null>(null);
+  const [changedSectionIds, setChangedSectionIds] = useState<Set<string>>(new Set());
+  const [mainIndex, setMainIndex] = useState<SiteIndex | null>(null);
+  const [viewSections, setViewSections] = useState<LoadedSection[] | null>(null);
+  const [isLoadingViewContent, setIsLoadingViewContent] = useState(false);
 
   const siteIndexRef = useRef<SiteIndex>({ siteId, order: [], sections: {} });
   const fontLinkRef = useRef<HTMLLinkElement | null>(null);
@@ -113,7 +125,9 @@ export default function EditorShell({
     markSectionDirty: persistence.markSectionDirty,
   });
 
-  const { isPublishing, publishFeedback, handlePublish } = useEditorPublish({
+  const buildStatus = useBuildStatus();
+
+  const { isPublishing, publishFeedback, handleSave, handlePublish, handleSaveAndPublish } = useEditorPublish({
     flushNow: persistence.flushNow,
     cancelPendingFlush: persistence.cancelPendingFlush,
     isConfigDirty: persistence.isConfigDirty,
@@ -121,8 +135,10 @@ export default function EditorShell({
     siteIndexRef,
     siteConfig,
     sections,
+    deletedSectionIds: Array.from(deletedSections),
     onSuccess: () => {
       setDirtySectionIds(new Set());
+      setDeletedSections(new Set());
       setLocalChangesExist(false);
     },
     mediaManifest,
@@ -143,6 +159,17 @@ export default function EditorShell({
         return { images };
       });
     },
+    onShasUpdated: (newSavedSha, newMainSha) => {
+      setSavedSha(newSavedSha);
+      setMainSha((prev) => newMainSha ?? prev);
+    },
+    onPublishComplete: buildStatus.startTracking,
+  });
+
+  const { buttonState } = useContentLifecycle({
+    savedSha,
+    mainSha,
+    hasLocalChanges: localChangesExist,
   });
 
   useEffect(() => {
@@ -208,7 +235,7 @@ export default function EditorShell({
         const savedManifest = await getMediaManifest();
         if (savedManifest) loadedManifest = savedManifest;
       } else {
-        const response = await fetch("/api/content");
+        const response = await fetch("/api/content?branch=saved");
         if (!response.ok) throw new Error(`Failed to load content: ${response.status}`);
         const data = await response.json();
         loadedSections = data.sections;
@@ -219,6 +246,12 @@ export default function EditorShell({
           loadedManifest = data.mediaManifest as MediaManifest;
           await persistMediaManifest(loadedManifest);
         }
+        setSavedSha(data.savedBranchSha ?? null);
+        setMainSha(data.sha);
+        setChangedSectionIds(new Set(data.changedSectionIds ?? []));
+        if (data.mainIndex) {
+          setMainIndex(data.mainIndex);
+        }
       }
 
       if (cancelled) return;
@@ -399,17 +432,7 @@ export default function EditorShell({
 
   const onDeleteSection = useCallback(
     (sectionId: string) => {
-      setSections((prev) => prev.filter((s) => s.section.id !== sectionId));
-      setSiteIndex((prev) => {
-        const { [sectionId]: _, ...remainingSections } = prev.sections;
-        return {
-          ...prev,
-          order: prev.order.filter((id) => id !== sectionId),
-          sections: remainingSections,
-        };
-      });
-
-      persistence.markSectionDeleted(sectionId);
+      setDeletedSections((prev) => new Set(prev).add(sectionId));
       setLocalChangesExist(true);
       setDirtySectionIds((prev) => {
         const next = new Set(prev);
@@ -417,9 +440,17 @@ export default function EditorShell({
         return next;
       });
     },
-    [persistence],
+    [],
   );
 
+  const handleUndoDelete = useCallback((sectionId: string) => {
+    setDeletedSections((prev) => {
+      const next = new Set(prev);
+      next.delete(sectionId);
+      return next;
+    });
+  }, []);
+
   const onReorderSections = useCallback(
     (fromIndex: number, toIndex: number) => {
       setSections((prev) => {
@@ -461,7 +492,7 @@ export default function EditorShell({
   );
 
   const onStatusChange = useCallback(
-    (sectionId: string, status: "draft" | "published" | "archived") => {
+    (sectionId: string, status: "draft" | "live" | "archived") => {
       setSections((prev) =>
         prev.map((loaded) =>
           loaded.section.id === sectionId
@@ -526,6 +557,10 @@ export default function EditorShell({
 
   return (
     <EditorProvider>
+      <ViewBranchWatcher
+        setViewSections={setViewSections}
+        setIsLoadingViewContent={setIsLoadingViewContent}
+      />
       <EditorModalProvider>
         <MediaLibraryContext.Provider value={{
           ...mediaPipeline.contextValue,
@@ -537,10 +572,13 @@ export default function EditorShell({
         }}>
         <div className="editor-shell relative">
           <EditorToolbar
+            buttonState={buttonState}
             localChangesExist={localChangesExist}
             isPublishing={isPublishing}
             publishFeedback={publishFeedback}
+            onSave={handleSave}
             onPublish={handlePublish}
+            onSaveAndPublish={handleSaveAndPublish}
             onDiscardClick={() => setShowDiscardConfirm(true)}
             onSettingsClick={() => setShowSiteSettings(true)}
             onMediaClick={() => {
@@ -548,19 +586,28 @@ export default function EditorShell({
               setShowMediaLibrary(true);
             }}
             processingItems={mediaPipeline.processingItems}
+            buildState={buildStatus.state}
+            buildDeployUrl={buildStatus.deployUrl}
+            buildVisible={buildStatus.visible}
+            onBuildDismiss={buildStatus.dismiss}
           />
 
           <EditorContent
             sections={sections}
             audiences={audiences}
             dirtySectionIds={dirtySectionIds}
+            deletedSections={deletedSections}
             isPublishing={isPublishing}
             onSectionChange={onSectionChange}
             onAddSection={onAddSection}
             onDeleteSection={onDeleteSection}
+            onUndoDelete={handleUndoDelete}
             onReorderSections={onReorderSections}
             onAccessChange={onAccessChange}
             onStatusChange={onStatusChange}
+            mainIndex={mainIndex}
+            changedSectionIds={changedSectionIds}
+            viewSections={viewSections}
           />
           <GlobalModal />
           <SiteSettingsModal
@@ -626,36 +673,82 @@ export default function EditorShell({
   );
 }
 
+function ViewBranchWatcher({
+  setViewSections,
+  setIsLoadingViewContent,
+}: {
+  setViewSections: (sections: LoadedSection[] | null) => void;
+  setIsLoadingViewContent: (loading: boolean) => void;
+}) {
+  const { isEditMode, viewBranch } = useEditorContext();
+
+  useEffect(() => {
+    if (isEditMode) {
+      setViewSections(null);
+      return;
+    }
+
+    const branch = viewBranch === "live" ? "main" : "saved";
+    setIsLoadingViewContent(true);
+
+    fetch(`/api/content?branch=${branch}`)
+      .then((res) => res.json())
+      .then((data) => {
+        setViewSections(data.sections);
+      })
+      .catch(console.error)
+      .finally(() => setIsLoadingViewContent(false));
+  }, [viewBranch, isEditMode]);
+
+  return null;
+}
+
 function EditorContent({
   sections,
   audiences,
   dirtySectionIds,
+  deletedSections,
   isPublishing,
   onSectionChange,
   onAddSection,
   onDeleteSection,
+  onUndoDelete,
   onReorderSections,
   onAccessChange,
   onStatusChange,
+  mainIndex,
+  changedSectionIds,
+  viewSections,
 }: {
   sections: LoadedSection[];
   audiences: Audience[];
   dirtySectionIds: Set<string>;
+  deletedSections: Set<string>;
   isPublishing: boolean;
   onSectionChange: (sectionId: string, content: SectionContent) => void;
   onAddSection: (insertIndex: number, type: string) => void;
   onDeleteSection: (sectionId: string) => void;
+  onUndoDelete: (sectionId: string) => void;
   onReorderSections: (fromIndex: number, toIndex: number) => void;
   onAccessChange: (sectionId: string, access: string[]) => void;
-  onStatusChange: (sectionId: string, status: "draft" | "published" | "archived") => void;
+  onStatusChange: (sectionId: string, status: "draft" | "live" | "archived") => void;
+  mainIndex: SiteIndex | null;
+  changedSectionIds: Set<string>;
+  viewSections: LoadedSection[] | null;
 }) {
-  const { isEditMode } = useEditorContext();
-  const { openModal, closeModal } = useEditorModal();
+  const { isEditMode, viewBranch } = useEditorContext();
+  const { openModal } = useEditorModal();
   const [pendingInsertIndex, setPendingInsertIndex] = useState<number | null>(null);
   const dismissPendingInsert = useCallback(() => setPendingInsertIndex(null), []);
 
   const editingEnabled = isEditMode && !isPublishing;
 
+  // In view mode, render viewSections (fetched from the selected branch).
+  // When viewBranch is "live", additionally filter to only live sections.
+  const displaySections = !isEditMode && viewSections !== null
+    ? (viewBranch === "live" ? viewSections.filter((s) => s.meta.status === "live") : viewSections)
+    : sections;
+
   useEffect(() => {
     return monitorForElements({
       onDragStart: ({ source }) => {
@@ -668,7 +761,7 @@ function EditorContent({
 
   return (
     <div>
-      {sections.map(({ section, meta }, index) => {
+      {displaySections.map(({ section, meta }, index) => {
         const definition = getSection(section.type);
         if (!definition) {
           return (
@@ -704,14 +797,19 @@ function EditorContent({
                   status={meta.status}
                   dirty={dirtySectionIds.has(section.id)}
                   index={index}
-                  isLast={index === sections.length - 1}
+                  isLast={index === displaySections.length - 1}
                   definition={definition}
+                  mainStatus={mainIndex?.sections[section.id]?.status ?? null}
+                  contentDiffersFromMain={changedSectionIds.has(section.id) || dirtySectionIds.has(section.id)}
+                  isLocalOnly={dirtySectionIds.has(section.id) && !changedSectionIds.has(section.id)}
                   options={{
                     ...(section.content as Record<string, unknown>),
                     ...("options" in section ? (section.options as Record<string, unknown>) : {}),
                   }}
                   audiences={audiences}
                   access={meta.access}
+                  isDeleted={deletedSections.has(section.id)}
+                  onUndoDelete={() => onUndoDelete(section.id)}
                   onAccessChange={editingEnabled ? (a) => onAccessChange(section.id, a) : undefined}
                   onStatusChange={editingEnabled ? (s) => onStatusChange(section.id, s) : undefined}
                   onSectionChange={editingEnabled ? (settingsResult) => {
@@ -733,26 +831,7 @@ function EditorContent({
                   } : undefined}
                   onReorder={editingEnabled ? onReorderSections : undefined}
                   onRequestInsert={editingEnabled ? (i) => setPendingInsertIndex(i) : undefined}
-                  onDelete={editingEnabled ? () => {
-                    openModal("Delete Section", (
-                      <div>
-                        <p className="mb-4 text-sm text-base-contrast-light">
-                          Delete this <strong>{definition.label}</strong> section? This cannot be undone.
-                        </p>
-                        <div className="flex justify-end gap-3">
-                          <Button variant="secondary" size="md" onClick={() => closeModal()}>
-                            Cancel
-                          </Button>
-                          <Button variant="destructive" size="md" onClick={() => {
-                            onDeleteSection(section.id);
-                            closeModal();
-                          }}>
-                            Confirm
-                          </Button>
-                        </div>
-                      </div>
-                    ));
-                  } : undefined}
+                  onDelete={editingEnabled ? () => onDeleteSection(section.id) : undefined}
                 >
                   <Component
                     content={section}
@@ -768,11 +847,11 @@ function EditorContent({
         );
       })}
 
-      {editingEnabled && pendingInsertIndex === sections.length && (
+      {editingEnabled && pendingInsertIndex === displaySections.length && (
         <SectionSkeleton
           types={typeOptions}
           onSelect={(type) => {
-            onAddSection(sections.length, type);
+            onAddSection(displaySections.length, type);
             setPendingInsertIndex(null);
           }}
           onDismiss={dismissPendingInsert}
@@ -798,25 +877,39 @@ function GlobalModal() {
 }
 
 function EditorToolbar({
+  buttonState,
   localChangesExist,
   isPublishing,
   publishFeedback,
+  onSave,
   onPublish,
+  onSaveAndPublish,
   onDiscardClick,
   onSettingsClick,
   onMediaClick,
   processingItems,
+  buildState,
+  buildDeployUrl,
+  buildVisible,
+  onBuildDismiss,
 }: {
+  buttonState: "synced" | "publish" | "saveAndPublish";
   localChangesExist: boolean;
   isPublishing: boolean;
   publishFeedback: string | null;
+  onSave: () => void;
   onPublish: () => void;
+  onSaveAndPublish: () => void;
   onDiscardClick: () => void;
   onSettingsClick: () => void;
   onMediaClick: () => void;
   processingItems: QueueItem[];
+  buildState: "idle" | "building" | "ready" | "error";
+  buildDeployUrl: string | null;
+  buildVisible: boolean;
+  onBuildDismiss: () => void;
 }) {
-  const { isEditMode, toggleEditMode } = useEditorContext();
+  const { isEditMode, viewBranch, setViewBranch, toggleEditMode } = useEditorContext();
 
   return (
     <>
@@ -826,23 +919,40 @@ function EditorToolbar({
             {publishFeedback && (
               <span className={cn(
                 "text-xs font-medium",
-                publishFeedback === "Published" ? "text-green-600" : "text-red-600",
+                publishFeedback === "Published" || publishFeedback === "Saved"
+                  ? "text-green-600"
+                  : "text-red-600",
               )}>
                 {publishFeedback}
               </span>
             )}
-            {localChangesExist && (
-              <Button
-                type="button"
-                variant="primary"
+            {buttonState === "saveAndPublish" && (
+              <SplitButton
+                label="Save & Publish"
+                onClick={onSaveAndPublish}
+                isLoading={isPublishing}
+                loadingLabel="Publishing..."
+                options={[{ label: "Save", onClick: onSave }]}
+              />
+            )}
+            {buttonState === "publish" && (
+              <SplitButton
+                label="Publish"
                 onClick={onPublish}
                 isLoading={isPublishing}
                 loadingLabel="Publishing..."
-              >
-                Publish
-              </Button>
+                options={[]}
+              />
+            )}
+            {buttonState === "synced" && (
+              <SplitButton
+                label="Everything up-to-date"
+                onClick={() => {}}
+                disabled
+                options={[]}
+              />
             )}
-            {localChangesExist && (
+            {localChangesExist && !isPublishing && (
               <Button
                 type="button"
                 variant="destructive"
@@ -852,6 +962,12 @@ function EditorToolbar({
                 Discard Changes
               </Button>
             )}
+            <BuildStatusIndicator
+              state={buildState}
+              deployUrl={buildDeployUrl}
+              visible={buildVisible}
+              onDismiss={onBuildDismiss}
+            />
           </div>
           <div className="flex items-center gap-2">
             <ProcessingIndicator items={processingItems} />
@@ -873,6 +989,18 @@ function EditorToolbar({
           </div>
         </div>
       )}
+      {!isEditMode && (
+        <div className="fixed top-0 right-0 left-0 z-50 flex items-center justify-center border-b border-base-200 bg-base px-4 py-2">
+          <SegmentedControl
+            options={[
+              { value: "saved", label: "Draft" },
+              { value: "live", label: "Live" },
+            ]}
+            value={viewBranch}
+            onChange={(v) => setViewBranch(v as "saved" | "live")}
+          />
+        </div>
+      )}
       <button
         onClick={toggleEditMode}
         className="cursor-pointer fixed bottom-4 right-4 z-50 flex h-10 w-10 items-center justify-center rounded-full bg-primary text-primary-contrast shadow-lg hover:opacity-90 transition-opacity"

package/src/hooks/index.ts

@@ -1,4 +1,6 @@
 export { useActiveHeadings } from "./useActiveHeadings";
+export { useBuildStatus } from "./useBuildStatus";
+export { useContentLifecycle } from "./useContentLifecycle";
 export { useEditorPersistence } from "./useEditorPersistence";
 export { useEditorPublish } from "./useEditorPublish";
 export { useFocusTrap } from "./useFocusTrap";