@drawnagency/primitives 0.1.11 → 0.1.12

package/src/components/editor/StatusPicker.tsx

@@ -4,7 +4,7 @@ import { cn } from "../../lib/cn";
 import { Popover } from "../shared/Popover";
 import { PopoverItem } from "../shared/PopoverItem";
 
-type Status = "draft" | "published" | "archived";
+type Status = "draft" | "live" | "archived";
 
 interface Props {
   status: Status;
@@ -12,18 +12,18 @@ interface Props {
   onChange: (status: Status) => void;
 }
 
-const STATUSES: Status[] = ["draft", "published", "archived"];
+const STATUSES: Status[] = ["draft", "live", "archived"];
 
 const statusClasses: Record<Status, string> = {
-  published: "bg-status-published-bg text-status-published-text",
+  live: "bg-status-live-bg text-status-live-text",
   draft: "bg-status-draft-bg text-status-draft-text",
   archived: "bg-status-archived-bg text-status-archived-text",
 };
 
 const dotClasses: Record<Status, string> = {
-  published: "bg-status-published-bg",
-  draft: "bg-status-draft-bg",
-  archived: "bg-status-archived-bg",
+  live: "bg-green-500",
+  draft: "bg-gray-400",
+  archived: "bg-white",
 };
 
 export function StatusPicker({ status, dirty, onChange }: Props) {

package/src/components/editor/index.ts

@@ -5,3 +5,4 @@ export { SettingsButton } from "./SettingsButton";
 export { SettingsForm } from "./SettingsForm";
 export { StatusBadge } from "./StatusBadge";
 export { SectionWrapper } from "./SectionWrapper";
+export { StatusDots, deriveStatusDots } from "./StatusDots";

package/src/components/sections/SectionLayout.tsx

@@ -19,7 +19,7 @@ interface Props {
 }
 
 export function SectionLayout({ type, status, dimNonPublished, children }: Props) {
-  const isDimmed = dimNonPublished && status && status !== "published";
+  const isDimmed = dimNonPublished && status && status !== "live";
 
   return (
     <div className={cn("section-wrapper group", getSectionCategory(type), isDimmed && "opacity-50")}>

package/src/components/shared/Navigation.tsx

@@ -121,7 +121,7 @@ export default function Navigation({ navLinks: initialNavLinks, siteName, darkMo
                   className={cn(
                     "cursor-pointer w-full rounded px-3 py-2 text-left text-sm font-bold transition-colors",
                     isActiveParent ? "text-primary" : "text-base-contrast hover:text-primary",
-                    !isEditMode && parent.status && parent.status !== "published" && "opacity-50",
+                    !isEditMode && parent.status && parent.status !== "live" && "opacity-50",
                   )}
                 >
                   {parent.label}
@@ -140,7 +140,7 @@ export default function Navigation({ navLinks: initialNavLinks, siteName, darkMo
                             className={cn(
                               "cursor-pointer w-full rounded px-2 py-1 text-left text-sm transition-colors",
                               isActiveChild ? "font-bold text-primary" : "text-base-contrast-light hover:text-primary",
-                              !isEditMode && child.status && child.status !== "published" && "opacity-50",
+                              !isEditMode && child.status && child.status !== "live" && "opacity-50",
                             )}
                           >
                             {child.label}
@@ -157,7 +157,7 @@ export default function Navigation({ navLinks: initialNavLinks, siteName, darkMo
                                       className={cn(
                                         "cursor-pointer block w-full px-2 py-1 text-left text-xs transition-colors",
                                         activeGrandchildId === gid ? "font-bold text-primary" : "text-base-contrast-light hover:text-primary",
-                                        !isEditMode && gc.status && gc.status !== "published" && "opacity-50",
+                                        !isEditMode && gc.status && gc.status !== "live" && "opacity-50",
                                       )}
                                     >
                                       {gc.label}

package/src/components/shared/SegmentedControl.tsx

@@ -0,0 +1,43 @@
+import { cn } from "../../lib/cn";
+
+export interface SegmentedOption {
+  value: string;
+  label: string;
+}
+
+interface SegmentedControlProps {
+  options: SegmentedOption[];
+  value: string;
+  onChange: (value: string) => void;
+  className?: string;
+}
+
+export function SegmentedControl({ options, value, onChange, className }: SegmentedControlProps) {
+  return (
+    <div role="radiogroup" className={cn("inline-flex rounded border border-base-200 bg-base-accent", className)}>
+      {options.map((option) => {
+        const selected = option.value === value;
+        return (
+          <button
+            key={option.value}
+            type="button"
+            role="radio"
+            aria-checked={selected}
+            aria-label={option.label}
+            onClick={() => {
+              if (!selected) onChange(option.value);
+            }}
+            className={cn(
+              "cursor-pointer px-3 py-1 text-xs font-medium transition-colors first:rounded-l last:rounded-r",
+              selected
+                ? "bg-base-contrast text-base-accent"
+                : "text-base-contrast-light hover:text-base-contrast",
+            )}
+          >
+            {option.label}
+          </button>
+        );
+      })}
+    </div>
+  );
+}

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} align="end" className="w-44">
+            <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="text-sm font-medium text-base-contrast">{option.label}</span>
+                  </PopoverItem>
+                </li>
+              ))}
+            </ul>
+          </Popover>
+        </>
+      )}
+    </div>
+  );
+}

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,16 @@ import {
 } from "../../lib/dexie";
 import { useEditorPersistence } from "../../hooks/useEditorPersistence";
 import { useEditorPublish } from "../../hooks/useEditorPublish";
+import { useContentLifecycle } from "../../hooks/useContentLifecycle";
 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 +98,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 +123,7 @@ export default function EditorShell({
     markSectionDirty: persistence.markSectionDirty,
   });
 
-  const { isPublishing, publishFeedback, handlePublish } = useEditorPublish({
+  const { isPublishing, publishFeedback, handleSave, handlePublish, handleSaveAndPublish } = useEditorPublish({
     flushNow: persistence.flushNow,
     cancelPendingFlush: persistence.cancelPendingFlush,
     isConfigDirty: persistence.isConfigDirty,
@@ -121,8 +131,10 @@ export default function EditorShell({
     siteIndexRef,
     siteConfig,
     sections,
+    deletedSectionIds: Array.from(deletedSections),
     onSuccess: () => {
       setDirtySectionIds(new Set());
+      setDeletedSections(new Set());
       setLocalChangesExist(false);
     },
     mediaManifest,
@@ -143,6 +155,16 @@ export default function EditorShell({
         return { images };
       });
     },
+    onShasUpdated: (newSavedSha, newMainSha) => {
+      setSavedSha(newSavedSha);
+      setMainSha((prev) => newMainSha ?? prev);
+    },
+  });
+
+  const { buttonState } = useContentLifecycle({
+    savedSha,
+    mainSha,
+    hasLocalChanges: localChangesExist,
   });
 
   useEffect(() => {
@@ -208,7 +230,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 +241,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 +427,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 +435,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 +487,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 +552,10 @@ export default function EditorShell({
 
   return (
     <EditorProvider>
+      <ViewBranchWatcher
+        setViewSections={setViewSections}
+        setIsLoadingViewContent={setIsLoadingViewContent}
+      />
       <EditorModalProvider>
         <MediaLibraryContext.Provider value={{
           ...mediaPipeline.contextValue,
@@ -537,10 +567,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={() => {
@@ -554,13 +587,18 @@ export default function EditorShell({
             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 +664,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 +752,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 +788,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 +822,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 +838,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 +868,31 @@ function GlobalModal() {
 }
 
 function EditorToolbar({
+  buttonState,
   localChangesExist,
   isPublishing,
   publishFeedback,
+  onSave,
   onPublish,
+  onSaveAndPublish,
   onDiscardClick,
   onSettingsClick,
   onMediaClick,
   processingItems,
 }: {
+  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[];
 }) {
-  const { isEditMode, toggleEditMode } = useEditorContext();
+  const { isEditMode, viewBranch, setViewBranch, toggleEditMode } = useEditorContext();
 
   return (
     <>
@@ -826,23 +902,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={[]}
+              />
             )}
-            {localChangesExist && (
+            {buttonState === "synced" && (
+              <SplitButton
+                label="Everything up-to-date"
+                onClick={() => {}}
+                disabled
+                options={[]}
+              />
+            )}
+            {localChangesExist && !isPublishing && (
               <Button
                 type="button"
                 variant="destructive"
@@ -873,6 +966,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"