@drawnagency/primitives 0.1.24 → 0.1.26

package/dist/{chunk-46QI4FDZ.js → chunk-FSVPD7TW.js}

@@ -199,6 +199,7 @@ function createEvent(name) {
 var editModeEvent = createEvent("editmodechange");
 var navChangeEvent = createEvent("sitenavchange");
 var darkModeEvent = createEvent("sitedarkmode");
+var historySelectEvent = createEvent("history-select");
 
 // src/lib/loader.ts
 function mergeSiteContent(index, sectionFiles) {

package/dist/components/brandguide/ColorSwatchSettings.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ColorSwatchSettings.d.ts","sourceRoot":"","sources":["../../../src/components/brandguide/ColorSwatchSettings.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAc,MAAM,sBAAsB,CAAC;AAElE,UAAU,KAAK;IACb,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;CACtC;AAED,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,KAAK,2CAyBrE"}
+{"version":3,"file":"ColorSwatchSettings.d.ts","sourceRoot":"","sources":["../../../src/components/brandguide/ColorSwatchSettings.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAc,MAAM,sBAAsB,CAAC;AAElE,UAAU,KAAK;IACb,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;CACtC;AAMD,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,KAAK,2CAkCrE"}

package/dist/components/shared/HistoryPopover.d.ts

@@ -0,0 +1,6 @@
+interface HistoryPopoverProps {
+    onSelectCommit: (sha: string, date: string) => void;
+}
+export declare function HistoryPopover({ onSelectCommit }: HistoryPopoverProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=HistoryPopover.d.ts.map

package/dist/components/shared/HistoryPopover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HistoryPopover.d.ts","sourceRoot":"","sources":["../../../src/components/shared/HistoryPopover.tsx"],"names":[],"mappings":"AAWA,UAAU,mBAAmB;IAC3B,cAAc,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACrD;AAED,wBAAgB,cAAc,CAAC,EAAE,cAAc,EAAE,EAAE,mBAAmB,2CAwFrE"}

package/dist/components/shared/Navigation.d.ts

@@ -3,7 +3,8 @@ interface Props {
     navLinks: NavItem[];
     siteName: string;
     darkMode: "light" | "dark" | "optional";
+    lastUpdated: string | null;
 }
-export default function Navigation({ navLinks: initialNavLinks, siteName, darkMode }: Props): import("react/jsx-runtime").JSX.Element;
+export default function Navigation({ navLinks: initialNavLinks, siteName, darkMode, lastUpdated }: Props): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=Navigation.d.ts.map

package/dist/components/shared/Navigation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Navigation.d.ts","sourceRoot":"","sources":["../../../src/components/shared/Navigation.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAI7C,UAAU,KAAK;IACb,QAAQ,EAAE,OAAO,EAAE,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,OAAO,GAAG,MAAM,GAAG,UAAU,CAAC;CACzC;AAED,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EAAE,QAAQ,EAAE,eAAe,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,KAAK,2CAsL1F"}
+{"version":3,"file":"Navigation.d.ts","sourceRoot":"","sources":["../../../src/components/shared/Navigation.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAO7C,UAAU,KAAK;IACb,QAAQ,EAAE,OAAO,EAAE,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,OAAO,GAAG,MAAM,GAAG,UAAU,CAAC;IACxC,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;CAC5B;AAED,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EAAE,QAAQ,EAAE,eAAe,EAAE,QAAQ,EAAE,QAAQ,EAAE,WAAW,EAAE,EAAE,KAAK,2CA8NvG"}

package/dist/components/shell/EditorContext.d.ts

@@ -1,11 +1,22 @@
 import { type ReactNode } from "react";
+import type { LoadedSection } from "../../lib/loader";
+import type { SiteIndex, SiteConfig } from "../../schemas/site-config";
+export type HistoryState = {
+    sha: string;
+    date: string;
+    sections: LoadedSection[];
+    index: SiteIndex;
+    siteConfig: SiteConfig;
+} | null;
 interface EditorContextValue {
     isEditMode: boolean;
     showAllChrome: boolean;
     viewBranch: "saved" | "live";
+    historyState: HistoryState;
     toggleEditMode: () => void;
     toggleShowAllChrome: () => void;
     setViewBranch: (branch: "saved" | "live") => void;
+    setHistoryState: (state: HistoryState) => void;
 }
 interface EditorProviderProps {
     children: ReactNode;

package/dist/components/shell/EditorContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EditorContext.d.ts","sourceRoot":"","sources":["../../../src/components/shell/EditorContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAoD,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGzF,UAAU,kBAAkB;IAC1B,UAAU,EAAE,OAAO,CAAC;IACpB,aAAa,EAAE,OAAO,CAAC;IACvB,UAAU,EAAE,OAAO,GAAG,MAAM,CAAC;IAC7B,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,mBAAmB,EAAE,MAAM,IAAI,CAAC;IAChC,aAAa,EAAE,CAAC,MAAM,EAAE,OAAO,GAAG,MAAM,KAAK,IAAI,CAAC;CACnD;AAID,UAAU,mBAAmB;IAC3B,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,EAAE,mBAAmB,2CAqB/D;AAED,wBAAgB,gBAAgB,IAAI,kBAAkB,CAMrD"}
+{"version":3,"file":"EditorContext.d.ts","sourceRoot":"","sources":["../../../src/components/shell/EditorContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAoD,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEzF,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAEvE,MAAM,MAAM,YAAY,GAAG;IACzB,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,aAAa,EAAE,CAAC;IAC1B,KAAK,EAAE,SAAS,CAAC;IACjB,UAAU,EAAE,UAAU,CAAC;CACxB,GAAG,IAAI,CAAC;AAET,UAAU,kBAAkB;IAC1B,UAAU,EAAE,OAAO,CAAC;IACpB,aAAa,EAAE,OAAO,CAAC;IACvB,UAAU,EAAE,OAAO,GAAG,MAAM,CAAC;IAC7B,YAAY,EAAE,YAAY,CAAC;IAC3B,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,mBAAmB,EAAE,MAAM,IAAI,CAAC;IAChC,aAAa,EAAE,CAAC,MAAM,EAAE,OAAO,GAAG,MAAM,KAAK,IAAI,CAAC;IAClD,eAAe,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;CAChD;AAID,UAAU,mBAAmB;IAC3B,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,EAAE,mBAAmB,2CAyB/D;AAED,wBAAgB,gBAAgB,IAAI,kBAAkB,CAMrD"}

package/dist/components/shell/EditorShell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EditorShell.d.ts","sourceRoot":"","sources":["../../../src/components/shell/EditorShell.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAYjD,OAAO,sBAAsB,CAAC;AAkC9B,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAcxD,UAAU,KAAK;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,QAAQ,EAAE,CAAC;IACtB,YAAY,EAAE;QACZ,KAAK,EAAE,OAAO,CAAC;QACf,aAAa,EAAE,OAAO,CAAC;QACvB,YAAY,EAAE,OAAO,CAAC;QACtB,cAAc,EAAE,OAAO,CAAC;QACxB,kBAAkB,EAAE,OAAO,CAAC;QAC5B,cAAc,EAAE,OAAO,CAAC;KACzB,CAAC;IACF,WAAW,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,OAAO,GAAG,QAAQ,CAAA;KAAE,GAAG,IAAI,CAAC;CACjE;AAED,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,OAAO,EACP,MAAM,EACN,SAAS,EAAE,gBAAgB,EAC3B,YAAY,EACZ,WAAW,GACZ,EAAE,KAAK,2CAukBP"}
+{"version":3,"file":"EditorShell.d.ts","sourceRoot":"","sources":["../../../src/components/shell/EditorShell.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAYjD,OAAO,sBAAsB,CAAC;AAqC9B,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAcxD,UAAU,KAAK;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,QAAQ,EAAE,CAAC;IACtB,YAAY,EAAE;QACZ,KAAK,EAAE,OAAO,CAAC;QACf,aAAa,EAAE,OAAO,CAAC;QACvB,YAAY,EAAE,OAAO,CAAC;QACtB,cAAc,EAAE,OAAO,CAAC;QACxB,kBAAkB,EAAE,OAAO,CAAC;QAC5B,cAAc,EAAE,OAAO,CAAC;KACzB,CAAC;IACF,WAAW,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,OAAO,GAAG,QAAQ,CAAA;KAAE,GAAG,IAAI,CAAC;CACjE;AAED,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,OAAO,EACP,MAAM,EACN,SAAS,EAAE,gBAAgB,EAC3B,YAAY,EACZ,WAAW,GACZ,EAAE,KAAK,2CAmnBP"}

package/dist/components/shell/HistoryToolbar.d.ts

@@ -0,0 +1,8 @@
+interface HistoryToolbarProps {
+    date: string;
+    onBackToCurrent: () => void;
+    onRestore: () => void;
+}
+export declare function HistoryToolbar({ date, onBackToCurrent, onRestore }: HistoryToolbarProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=HistoryToolbar.d.ts.map

package/dist/components/shell/HistoryToolbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HistoryToolbar.d.ts","sourceRoot":"","sources":["../../../src/components/shell/HistoryToolbar.tsx"],"names":[],"mappings":"AAGA,UAAU,mBAAmB;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,SAAS,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,wBAAgB,cAAc,CAAC,EAAE,IAAI,EAAE,eAAe,EAAE,SAAS,EAAE,EAAE,mBAAmB,2CAsBvF"}

package/dist/components/shell/RestoreModal.d.ts

@@ -0,0 +1,10 @@
+interface RestoreModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    date: string;
+    onConfirm: () => void;
+    isRestoring: boolean;
+}
+export declare function RestoreModal({ isOpen, onClose, date, onConfirm, isRestoring }: RestoreModalProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=RestoreModal.d.ts.map

package/dist/components/shell/RestoreModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RestoreModal.d.ts","sourceRoot":"","sources":["../../../src/components/shell/RestoreModal.tsx"],"names":[],"mappings":"AAIA,UAAU,iBAAiB;IACzB,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,WAAW,EAAE,OAAO,CAAC;CACtB;AAED,wBAAgB,YAAY,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,WAAW,EAAE,EAAE,iBAAiB,2CAiBhG"}

package/dist/index.js

@@ -27,7 +27,7 @@ import {
   safeRedirect,
   sanitizeHtml,
   toSectionId
-} from "./chunk-46QI4FDZ.js";
+} from "./chunk-FSVPD7TW.js";
 import {
   ColorItemSchema,
   ColorSpaceSchema,

package/dist/lib/events.d.ts

@@ -9,4 +9,8 @@ export declare const editModeEvent: TypedEvent<{
 }>;
 export declare const navChangeEvent: TypedEvent<NavItem[]>;
 export declare const darkModeEvent: TypedEvent<string>;
+export declare const historySelectEvent: TypedEvent<{
+    sha: string;
+    date: string;
+}>;
 //# sourceMappingURL=events.d.ts.map

package/dist/lib/events.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"events.d.ts","sourceRoot":"","sources":["../../src/lib/events.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAErC,MAAM,WAAW,UAAU,CAAC,CAAC;IAC3B,QAAQ,CAAC,MAAM,EAAE,CAAC,GAAG,IAAI,CAAC;IAC1B,MAAM,CAAC,QAAQ,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,IAAI,GAAG,MAAM,IAAI,CAAC;CACnD;AAED,wBAAgB,WAAW,CAAC,CAAC,EAAE,IAAI,EAAE,MAAM,GAAG,UAAU,CAAC,CAAC,CAAC,CAW1D;AAED,eAAO,MAAM,aAAa;gBAA6B,OAAO;EAAqB,CAAC;AACpF,eAAO,MAAM,cAAc,uBAA0C,CAAC;AACtE,eAAO,MAAM,aAAa,oBAAsC,CAAC"}
+{"version":3,"file":"events.d.ts","sourceRoot":"","sources":["../../src/lib/events.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAErC,MAAM,WAAW,UAAU,CAAC,CAAC;IAC3B,QAAQ,CAAC,MAAM,EAAE,CAAC,GAAG,IAAI,CAAC;IAC1B,MAAM,CAAC,QAAQ,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,IAAI,GAAG,MAAM,IAAI,CAAC;CACnD;AAED,wBAAgB,WAAW,CAAC,CAAC,EAAE,IAAI,EAAE,MAAM,GAAG,UAAU,CAAC,CAAC,CAAC,CAW1D;AAED,eAAO,MAAM,aAAa;gBAA6B,OAAO;EAAqB,CAAC;AACpF,eAAO,MAAM,cAAc,uBAA0C,CAAC;AACtE,eAAO,MAAM,aAAa,oBAAsC,CAAC;AACjE,eAAO,MAAM,kBAAkB;SAAsB,MAAM;UAAQ,MAAM;EAAqB,CAAC"}

package/dist/lib/index.js

@@ -17,7 +17,7 @@ import {
   safeRedirect,
   sanitizeHtml,
   toSectionId
-} from "../chunk-46QI4FDZ.js";
+} from "../chunk-FSVPD7TW.js";
 import {
   clearRegistry,
   createRegistry,

package/dist/lib/timestamp.d.ts

@@ -1,2 +1,4 @@
+export declare function formatDate(iso: string): string;
+export declare function formatDateTime(iso: string): string;
 export declare function formatTimestamp(iso: string): string;
 //# sourceMappingURL=timestamp.d.ts.map

package/dist/lib/timestamp.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"timestamp.d.ts","sourceRoot":"","sources":["../../src/lib/timestamp.ts"],"names":[],"mappings":"AAAA,wBAAgB,eAAe,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CA8BnD"}
+{"version":3,"file":"timestamp.d.ts","sourceRoot":"","sources":["../../src/lib/timestamp.ts"],"names":[],"mappings":"AAAA,wBAAgB,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAM9C;AAED,wBAAgB,cAAc,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAalD;AAED,wBAAgB,eAAe,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CA8BnD"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drawnagency/primitives",
-  "version": "0.1.24",
+  "version": "0.1.26",
   "type": "module",
   "exports": {
     "./package.json": "./package.json",

package/src/components/brandguide/ColorSwatchSettings.tsx

@@ -1,3 +1,4 @@
+import { useState } from "react";
 import { Input } from "../shared/Input";
 import type { ColorItem, ColorSpace } from "../../schemas/shared";
 
@@ -6,20 +7,33 @@ interface Props {
   onChange: (color: ColorItem) => void;
 }
 
+function mergeSpaces(spaces: ColorSpace[]): ColorSpace {
+  return Object.assign({}, ...spaces);
+}
+
 export default function ColorSwatchSettings({ color, onChange }: Props) {
-  const space = color.spaces[0] || {};
+  const [localColor, setLocalColor] = useState(() => ({
+    ...color,
+    spaces: [mergeSpaces(color.spaces)],
+  }));
+  const space = localColor.spaces[0] || {};
+
+  const update = (updated: ColorItem) => {
+    setLocalColor(updated);
+    onChange(updated);
+  };
 
   const updateSpace = (key: keyof ColorSpace, value: string) => {
     const newSpace = { ...space, [key]: value || undefined };
-    onChange({ ...color, spaces: [newSpace, ...color.spaces.slice(1)] });
+    update({ ...localColor, spaces: [newSpace] });
   };
 
   return (
     <div className="space-y-3">
       <Input
         label="Name"
-        value={color.name || ""}
-        onChange={(value) => onChange({ ...color, name: value })}
+        value={localColor.name || ""}
+        onChange={(name) => update({ ...localColor, name })}
       />
       {(["hex", "rgb", "cmyk", "pantone"] as const).map((key) => (
         <Input

package/src/components/shared/HistoryPopover.tsx

@@ -0,0 +1,104 @@
+import { useState, useCallback, useEffect } from "react";
+import { cn } from "../../lib/cn";
+import { formatDateTime } from "../../lib/timestamp";
+import { Button } from "./Button";
+
+interface CommitItem {
+  sha: string;
+  date: string;
+  message: string;
+}
+
+interface HistoryPopoverProps {
+  onSelectCommit: (sha: string, date: string) => void;
+}
+
+export function HistoryPopover({ onSelectCommit }: HistoryPopoverProps) {
+  const [commits, setCommits] = useState<CommitItem[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [loadingMore, setLoadingMore] = useState(false);
+  const [page, setPage] = useState(1);
+  const [hasMore, setHasMore] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchPage = useCallback(async (pageNum: number) => {
+    const isFirst = pageNum === 1;
+    if (isFirst) setLoading(true);
+    else setLoadingMore(true);
+
+    try {
+      const res = await fetch(`/api/history?page=${pageNum}&per_page=20`);
+      if (!res.ok) throw new Error(`Failed to load history: ${res.status}`);
+      const data = await res.json();
+      const items = data.items as CommitItem[];
+      setCommits((prev) => isFirst ? items : [...prev, ...items]);
+      setHasMore(items.length === 20);
+      setPage(pageNum);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to load history");
+    } finally {
+      setLoading(false);
+      setLoadingMore(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchPage(1);
+  }, [fetchPage]);
+
+  if (loading) {
+    return (
+      <div className="p-4 text-center text-xs text-base-contrast-light">
+        Loading history...
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="p-4 text-center text-xs text-red-600">
+        {error}
+      </div>
+    );
+  }
+
+  if (commits.length === 0) {
+    return (
+      <div className="p-4 text-center text-xs text-base-contrast-light">
+        No history found
+      </div>
+    );
+  }
+
+  return (
+    <div className="max-h-64 overflow-y-auto">
+      <ul className="py-1">
+        {commits.map((commit) => (
+          <li key={commit.sha}>
+            <button
+              onClick={() => onSelectCommit(commit.sha, commit.date)}
+              className={cn(
+                "w-full cursor-pointer px-4 py-2 text-left text-xs transition-colors",
+                "hover:bg-base-accent text-base-contrast-light hover:text-base-contrast",
+              )}
+            >
+              {formatDateTime(commit.date)}
+            </button>
+          </li>
+        ))}
+      </ul>
+      {hasMore && (
+        <div className="border-t border-base-200 p-2 text-center">
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => fetchPage(page + 1)}
+            disabled={loadingMore}
+          >
+            {loadingMore ? "Loading..." : "Load more"}
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/shared/Navigation.tsx

@@ -1,22 +1,28 @@
-import { useState, useCallback, useEffect } from "react";
+import { useState, useCallback, useEffect, useRef } from "react";
 import { cn } from "../../lib/cn";
 import { Toggle } from "./Toggle";
 import type { NavItem } from "../../lib/nav";
-import { editModeEvent, navChangeEvent, darkModeEvent } from "../../lib/events";
+import { editModeEvent, navChangeEvent, darkModeEvent, historySelectEvent } from "../../lib/events";
 import { useActiveHeadings } from "../../hooks/useActiveHeadings";
+import { formatDate } from "../../lib/timestamp";
+import { Popover } from "./Popover";
+import { HistoryPopover } from "./HistoryPopover";
 
 interface Props {
   navLinks: NavItem[];
   siteName: string;
   darkMode: "light" | "dark" | "optional";
+  lastUpdated: string | null;
 }
 
-export default function Navigation({ navLinks: initialNavLinks, siteName, darkMode }: Props) {
+export default function Navigation({ navLinks: initialNavLinks, siteName, darkMode, lastUpdated }: Props) {
   const [isOpen, setIsOpen] = useState(false);
-  const [isEditMode, setIsEditMode] = useState(false);
+  const [isEditMode, setIsEditMode] = useState(() => typeof window !== "undefined" && window.location.pathname.startsWith("/edit"));
   const [currentDarkMode, setCurrentDarkMode] = useState(darkMode);
   const [isDark, setIsDark] = useState(false);
   const [navLinks, setNavLinks] = useState<NavItem[]>(initialNavLinks);
+  const [showHistory, setShowHistory] = useState(false);
+  const historyButtonRef = useRef<HTMLButtonElement>(null);
 
   useEffect(() => {
     const unlistenEdit = editModeEvent.listen(({ isEditMode }) => setIsEditMode(isEditMode));
@@ -73,20 +79,22 @@ export default function Navigation({ navLinks: initialNavLinks, siteName, darkMo
   return (
     <>
       {/* Mobile header bar */}
-      <header className="fixed top-0 left-0 right-0 z-50 flex h-16 items-center justify-between bg-base px-4 lg:hidden">
-        <span className="text-lg font-bold text-primary">{siteName}</span>
-        <button
-          onClick={() => setIsOpen(!isOpen)}
-          className="cursor-pointer p-2 text-base-contrast"
-          aria-label="Toggle navigation"
-        >
-          <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
-            {isOpen
-              ? <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
-              : <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
-            }
-          </svg>
-        </button>
+      <header className="fixed top-0 left-0 right-0 z-50 bg-base lg:hidden">
+        <div className="mx-auto max-w-screen-xl flex h-16 items-center justify-between px-4">
+          <span className="text-lg font-bold text-primary">{siteName}</span>
+          <button
+            onClick={() => setIsOpen(!isOpen)}
+            className="cursor-pointer p-2 text-base-contrast"
+            aria-label="Toggle navigation"
+          >
+            <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+              {isOpen
+                ? <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                : <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
+              }
+            </svg>
+          </button>
+        </div>
       </header>
 
       {/* Backdrop */}
@@ -100,7 +108,7 @@ export default function Navigation({ navLinks: initialNavLinks, siteName, darkMo
       {/* Sidebar nav */}
       <nav
         className={cn(
-          "fixed top-0 left-0 z-40 h-full w-64 overflow-y-auto bg-base pt-16 transition-transform lg:translate-x-0",
+          "fixed top-0 left-0 lg:left-auto z-40 h-full w-64 flex flex-col overflow-y-auto border-r border-base-200 bg-base pt-16 transition-transform lg:translate-x-0 nav-sidebar",
           isOpen ? "translate-x-0" : "-translate-x-full",
         )}
       >
@@ -177,19 +185,55 @@ export default function Navigation({ navLinks: initialNavLinks, siteName, darkMo
           })}
         </ul>
 
-        {currentDarkMode === "optional" && (
-          <div className="mt-auto border-t border-base-200 px-4 py-4">
-            <div className="flex items-center gap-2 text-sm text-base-contrast-light">
-              <span className={cn(!isDark && "text-base-contrast")}>Light</span>
-              <Toggle
-                checked={isDark}
-                onChange={handleThemeToggle}
-                label="Toggle dark mode"
-              />
-              <span className={cn(isDark && "text-base-contrast")}>Dark</span>
+        <div className="mt-auto">
+          {currentDarkMode === "optional" && (
+            <div className="mx-4 border-t border-base-200 py-4">
+              <div className="flex items-center gap-2 text-sm text-base-contrast-light">
+                <span className={cn(!isDark && "text-base-contrast")}>Light</span>
+                <Toggle checked={isDark} onChange={handleThemeToggle} label="Toggle dark mode" />
+                <span className={cn(isDark && "text-base-contrast")}>Dark</span>
+              </div>
             </div>
-          </div>
-        )}
+          )}
+
+          {lastUpdated && (
+            <div className={cn(currentDarkMode !== "optional" && "border-t border-base-200", "mx-4 py-4 text-center")}>
+              {isEditMode ? (
+                <div className="relative">
+                  <button
+                    ref={historyButtonRef}
+                    onClick={() => setShowHistory((prev) => !prev)}
+                    className="cursor-pointer text-xs text-base-contrast-light hover:text-primary transition-colors"
+                    aria-label="View history"
+                  >
+                    Last updated {formatDate(lastUpdated)}
+                  </button>
+                  <Popover
+                    isOpen={showHistory}
+                    onClose={() => setShowHistory(false)}
+                    anchorRef={historyButtonRef}
+                    className="w-56 !bottom-full !top-auto !mb-1 !mt-0"
+                  >
+                    <HistoryPopover
+                      onSelectCommit={(sha, date) => {
+                        setShowHistory(false);
+                        historySelectEvent.dispatch({ sha, date });
+                      }}
+                    />
+                  </Popover>
+                </div>
+              ) : (
+                <p className="text-xs text-base-contrast-light">
+                  Last updated {new Date(lastUpdated).toLocaleDateString("en-US", {
+                    month: "short",
+                    day: "numeric",
+                    year: "numeric",
+                  })}
+                </p>
+              )}
+            </div>
+          )}
+        </div>
       </nav>
     </>
   );

package/src/components/shell/EditorContext.tsx

@@ -1,13 +1,25 @@
 import { createContext, useContext, useState, useCallback, type ReactNode } from "react";
 import { editModeEvent } from "../../lib/events";
+import type { LoadedSection } from "../../lib/loader";
+import type { SiteIndex, SiteConfig } from "../../schemas/site-config";
+
+export type HistoryState = {
+  sha: string;
+  date: string;
+  sections: LoadedSection[];
+  index: SiteIndex;
+  siteConfig: SiteConfig;
+} | null;
 
 interface EditorContextValue {
   isEditMode: boolean;
   showAllChrome: boolean;
   viewBranch: "saved" | "live";
+  historyState: HistoryState;
   toggleEditMode: () => void;
   toggleShowAllChrome: () => void;
   setViewBranch: (branch: "saved" | "live") => void;
+  setHistoryState: (state: HistoryState) => void;
 }
 
 const EditorContext = createContext<EditorContextValue | null>(null);
@@ -20,6 +32,10 @@ export function EditorProvider({ children }: EditorProviderProps) {
   const [isEditMode, setIsEditMode] = useState(true);
   const [showAllChrome, setShowAllChrome] = useState(false);
   const [viewBranch, setViewBranchState] = useState<"saved" | "live">("saved");
+  const [historyState, setHistoryStateRaw] = useState<HistoryState>(null);
+  const setHistoryState = useCallback((state: HistoryState) => {
+    setHistoryStateRaw(state);
+  }, []);
 
   const toggleEditMode = useCallback(() => {
     setIsEditMode((prev) => {
@@ -33,7 +49,7 @@ export function EditorProvider({ children }: EditorProviderProps) {
   const setViewBranch = useCallback((b: "saved" | "live") => setViewBranchState(b), []);
 
   return (
-    <EditorContext.Provider value={{ isEditMode, showAllChrome, viewBranch, toggleEditMode, toggleShowAllChrome, setViewBranch }}>
+    <EditorContext.Provider value={{ isEditMode, showAllChrome, viewBranch, historyState, toggleEditMode, toggleShowAllChrome, setViewBranch, setHistoryState }}>
       {children}
     </EditorContext.Provider>
   );

package/src/components/shell/EditorShell.tsx

@@ -1,4 +1,4 @@
-import { Fragment, useState, useCallback, useEffect, useRef } from "react";
+import { Fragment, useState, useCallback, useEffect, useRef, type ReactNode } from "react";
 
 import { monitorForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
 import type { LoadedSection } from "../../lib/loader";
@@ -40,7 +40,7 @@ import { useBuildStatus } from "../../hooks/useBuildStatus";
 import { useMediaPipeline } from "../../hooks/useMediaPipeline";
 import { formatTimestamp } from "../../lib/timestamp";
 import { generateNavLinks } from "../../lib/nav";
-import { navChangeEvent, darkModeEvent } from "../../lib/events";
+import { navChangeEvent, darkModeEvent, historySelectEvent } from "../../lib/events";
 import { cn } from "../../lib/cn";
 import { Button } from "../shared/Button";
 import { SplitButton } from "../shared/SplitButton";
@@ -49,6 +49,9 @@ import { SegmentedControl } from "../shared/SegmentedControl";
 import { SettingsIcon } from "../shared/icons";
 import { ImageIcon, X } from "lucide-react";
 import { ErrorBoundary } from "../shared/ErrorBoundary";
+import { HistoryToolbar } from "./HistoryToolbar";
+import { RestoreModal } from "./RestoreModal";
+import ViewRenderer from "../sections/ViewRenderer";
 
 export { useMediaLibrary } from "./MediaLibraryContext";
 
@@ -106,6 +109,8 @@ export default function EditorShell({
   const [mainIndex, setMainIndex] = useState<SiteIndex | null>(null);
   const [viewSections, setViewSections] = useState<LoadedSection[] | null>(null);
   const [isLoadingViewContent, setIsLoadingViewContent] = useState(false);
+  const [showRestoreModal, setShowRestoreModal] = useState(false);
+  const [isRestoring, setIsRestoring] = useState(false);
 
   const siteIndexRef = useRef<SiteIndex>({ siteId, order: [], sections: {} });
   const fontLinkRef = useRef<HTMLLinkElement | null>(null);
@@ -515,6 +520,38 @@ export default function EditorShell({
     setLocalChangesExist(true);
   }, [applySiteConfigPreview, persistence]);
 
+  const handleHistoryRestore = useCallback(async (historyContent: {
+    sections: LoadedSection[];
+    index: SiteIndex;
+    siteConfig: SiteConfig;
+  }) => {
+    setIsRestoring(true);
+    try {
+      const payload = {
+        sections: historyContent.sections.map((s) => ({
+          id: s.section.id,
+          content: s.section,
+        })),
+        siteIndex: historyContent.index,
+        siteConfig: historyContent.siteConfig,
+        targetBranch: "main",
+      };
+
+      const response = await fetch("/api/save", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(payload),
+      });
+
+      if (!response.ok) throw new Error(`Restore failed: ${response.status}`);
+      await discardLocalChanges();
+      window.location.reload();
+    } catch (err) {
+      console.error("Failed to restore:", err);
+      setIsRestoring(false);
+    }
+  }, []);
+
   // --- Render ---
 
   if (shellState.phase === "loading-content") {
@@ -559,6 +596,7 @@ export default function EditorShell({
         setViewSections={setViewSections}
         setIsLoadingViewContent={setIsLoadingViewContent}
       />
+      <HistoryWatcher />
       <EditorModalProvider>
         <MediaLibraryContext.Provider value={{
           ...mediaPipeline.contextValue,
@@ -587,25 +625,28 @@ export default function EditorShell({
             buildState={buildStatus.state}
             buildElapsed={buildStatus.elapsedSeconds}
             onBuildDismiss={buildStatus.dismiss}
+            onRestoreClick={() => setShowRestoreModal(true)}
           />
 
-          <EditorContent
-            sections={sections}
-            audiences={audiences}
-            dirtySectionIds={dirtySectionIds}
-            deletedSections={deletedSections}
-            isPublishing={publishAction !== "idle"}
-            onSectionChange={onSectionChange}
-            onAddSection={onAddSection}
-            onDeleteSection={onDeleteSection}
-            onUndoDelete={handleUndoDelete}
-            onReorderSections={onReorderSections}
-            onAccessChange={onAccessChange}
-            onStatusChange={onStatusChange}
-            mainIndex={mainIndex}
-            changedSectionIds={changedSectionIds}
-            viewSections={viewSections}
-          />
+          <HistoryOrEditorContent sections={sections}>
+            <EditorContent
+              sections={sections}
+              audiences={audiences}
+              dirtySectionIds={dirtySectionIds}
+              deletedSections={deletedSections}
+              isPublishing={publishAction !== "idle"}
+              onSectionChange={onSectionChange}
+              onAddSection={onAddSection}
+              onDeleteSection={onDeleteSection}
+              onUndoDelete={handleUndoDelete}
+              onReorderSections={onReorderSections}
+              onAccessChange={onAccessChange}
+              onStatusChange={onStatusChange}
+              mainIndex={mainIndex}
+              changedSectionIds={changedSectionIds}
+              viewSections={viewSections}
+            />
+          </HistoryOrEditorContent>
           <GlobalModal />
           <SiteSettingsModal
             isOpen={showSiteSettings}
@@ -663,6 +704,12 @@ export default function EditorShell({
               maxFileSize={siteConfig?.media.maxFileSize}
             />
           </EditorModal>
+          <RestoreHandler
+            showRestoreModal={showRestoreModal}
+            setShowRestoreModal={setShowRestoreModal}
+            isRestoring={isRestoring}
+            onRestore={handleHistoryRestore}
+          />
         </div>
         </MediaLibraryContext.Provider>
       </EditorModalProvider>
@@ -700,6 +747,85 @@ function ViewBranchWatcher({
   return null;
 }
 
+function HistoryWatcher() {
+  const { setHistoryState } = useEditorContext();
+
+  useEffect(() => {
+    const unlisten = historySelectEvent.listen(async ({ sha, date }) => {
+      try {
+        const res = await fetch(`/api/content/history?sha=${sha}`);
+        if (!res.ok) throw new Error(`Failed to load history: ${res.status}`);
+        const data = await res.json();
+        setHistoryState({
+          sha,
+          date,
+          sections: data.sections,
+          index: data.index,
+          siteConfig: data.siteConfig,
+        });
+        const navLinks = generateNavLinks(data.sections);
+        navChangeEvent.dispatch(navLinks);
+      } catch (err) {
+        console.error("Failed to load historical content:", err);
+      }
+    });
+    return unlisten;
+  }, [setHistoryState]);
+
+  return null;
+}
+
+function HistoryOrEditorContent({ children, sections }: { children: ReactNode; sections: LoadedSection[] }) {
+  const { historyState } = useEditorContext();
+  const wasInHistory = useRef(false);
+
+  useEffect(() => {
+    if (historyState) {
+      wasInHistory.current = true;
+    } else if (wasInHistory.current) {
+      wasInHistory.current = false;
+      if (sections.length > 0) {
+        const navLinks = generateNavLinks(sections);
+        navChangeEvent.dispatch(navLinks);
+      }
+    }
+  }, [historyState, sections]);
+
+  if (historyState) {
+    return <ViewRenderer sections={historyState.sections} />;
+  }
+  return <>{children}</>;
+}
+
+function RestoreHandler({
+  showRestoreModal,
+  setShowRestoreModal,
+  isRestoring,
+  onRestore,
+}: {
+  showRestoreModal: boolean;
+  setShowRestoreModal: (show: boolean) => void;
+  isRestoring: boolean;
+  onRestore: (content: { sections: LoadedSection[]; index: SiteIndex; siteConfig: SiteConfig }) => void;
+}) {
+  const { historyState } = useEditorContext();
+  if (!historyState) return null;
+
+  return (
+    <RestoreModal
+      isOpen={showRestoreModal}
+      onClose={() => setShowRestoreModal(false)}
+      date={historyState.date}
+      onConfirm={() => onRestore({
+        sections: historyState.sections,
+        index: historyState.index,
+        siteConfig: historyState.siteConfig,
+      })}
+      isRestoring={isRestoring}
+    />
+  );
+}
+
 function EditorContent({
   sections,
   audiences,
@@ -970,6 +1096,7 @@ function EditorToolbar({
   buildState,
   buildElapsed,
   onBuildDismiss,
+  onRestoreClick,
 }: {
   buttonState: "synced" | "publish" | "saveAndPublish";
   localChangesExist: boolean;
@@ -985,105 +1112,122 @@ function EditorToolbar({
   buildState: "idle" | "building" | "ready" | "error" | "fading";
   buildElapsed: number;
   onBuildDismiss: () => void;
+  onRestoreClick: () => void;
 }) {
-  const { isEditMode, viewBranch, setViewBranch, toggleEditMode } = useEditorContext();
+  const { isEditMode, viewBranch, setViewBranch, toggleEditMode, historyState, setHistoryState } = useEditorContext();
+
+  if (historyState) {
+    return (
+      <HistoryToolbar
+        date={historyState.date}
+        onBackToCurrent={() => setHistoryState(null)}
+        onRestore={onRestoreClick}
+      />
+    );
+  }
 
   return (
     <>
       {isEditMode && (
-        <div className="fixed top-0 right-0 left-0 z-50 grid grid-cols-3 items-center border-b border-base-200 bg-base px-4 py-2">
-          <div className="flex items-center gap-2">
-            {buttonState === "saveAndPublish" && (
-              <SplitButton
-                label="Save & Publish"
-                onClick={onSaveAndPublish}
-                disabled={publishAction !== "idle"}
-                options={[{ label: "Save", onClick: onSave }]}
+        <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">
+            <div className="flex items-center gap-2">
+              {buttonState === "saveAndPublish" && (
+                <SplitButton
+                  label="Save & Publish"
+                  onClick={onSaveAndPublish}
+                  disabled={publishAction !== "idle"}
+                  options={[{ label: "Save", onClick: onSave }]}
+                />
+              )}
+              {buttonState === "publish" && (
+                <SplitButton
+                  label="Publish"
+                  onClick={onPublish}
+                  disabled={publishAction !== "idle"}
+                  options={[]}
+                />
+              )}
+              {buttonState === "synced" && (
+                <SplitButton
+                  label="Up to date"
+                  onClick={() => {}}
+                  disabled
+                  options={[]}
+                />
+              )}
+              {localChangesExist && publishAction === "idle" && (
+                <Button
+                  type="button"
+                  variant="destructive"
+                  onClick={onDiscardClick}
+                >
+                  Discard Changes
+                </Button>
+              )}
+            </div>
+            <div className="flex items-center justify-center">
+              <StatusText
+                publishAction={publishAction}
+                publishFeedback={publishFeedback}
+                buildState={buildState}
+                buildElapsed={buildElapsed}
+                onDismiss={onBuildDismiss}
               />
-            )}
-            {buttonState === "publish" && (
-              <SplitButton
-                label="Publish"
-                onClick={onPublish}
-                disabled={publishAction !== "idle"}
-                options={[]}
+            </div>
+            <div className="flex items-center justify-end gap-2">
+              <ProcessingIndicator items={processingItems} />
+              <IconButton
+                icon={<ImageIcon size={16} />}
+                label="Media library"
+                size="md"
+                onClick={onMediaClick}
+                className="border border-base-200 bg-base-accent"
               />
-            )}
-            {buttonState === "synced" && (
-              <SplitButton
-                label="Up to date"
-                onClick={() => {}}
-                disabled
-                options={[]}
+              <IconButton
+                icon={<SettingsIcon size={16} />}
+                label="Site settings"
+                size="md"
+                onClick={onSettingsClick}
+                className="border border-base-200 bg-base-accent"
               />
-            )}
-            {localChangesExist && publishAction === "idle" && (
-              <Button
-                type="button"
-                variant="destructive"
-                onClick={onDiscardClick}
-              >
-                Discard Changes
-              </Button>
-            )}
-          </div>
-          <div className="flex items-center justify-center">
-            <StatusText
-              publishAction={publishAction}
-              publishFeedback={publishFeedback}
-              buildState={buildState}
-              buildElapsed={buildElapsed}
-              onDismiss={onBuildDismiss}
-            />
-          </div>
-          <div className="flex items-center justify-end gap-2">
-            <ProcessingIndicator items={processingItems} />
-            <IconButton
-              icon={<ImageIcon size={16} />}
-              label="Media library"
-              size="md"
-              onClick={onMediaClick}
-              className="border border-base-200 bg-base-accent"
-            />
-            <IconButton
-              icon={<SettingsIcon size={16} />}
-              label="Site settings"
-              size="md"
-              onClick={onSettingsClick}
-              className="border border-base-200 bg-base-accent"
-            />
-            <ShowAllChromeToggle />
+              <ShowAllChromeToggle />
+            </div>
           </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 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 flex items-center justify-center px-4 py-2">
+            <SegmentedControl
+              options={[
+                { value: "saved", label: "Draft" },
+                { value: "live", label: "Live" },
+              ]}
+              value={viewBranch}
+              onChange={(v) => setViewBranch(v as "saved" | "live")}
+            />
+          </div>
         </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"
-        aria-label={isEditMode ? "Switch to view mode" : "Switch to edit mode"}
-      >
-        {isEditMode ? (
-          <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
-            <path d="M10 12a2 2 0 100-4 2 2 0 000 4z" />
-            <path fillRule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clipRule="evenodd" />
-          </svg>
-        ) : (
-          <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
-            <path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z" />
-          </svg>
-        )}
-      </button>
+      {!historyState && (
+        <button
+          onClick={toggleEditMode}
+          className="cursor-pointer fixed bottom-4 right-4 lg:right-auto 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 fab-container-right"
+          aria-label={isEditMode ? "Switch to view mode" : "Switch to edit mode"}
+        >
+          {isEditMode ? (
+            <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+              <path d="M10 12a2 2 0 100-4 2 2 0 000 4z" />
+              <path fillRule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clipRule="evenodd" />
+            </svg>
+          ) : (
+            <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+              <path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z" />
+            </svg>
+          )}
+        </button>
+      )}
     </>
   );
 }

package/src/components/shell/HistoryToolbar.tsx

@@ -0,0 +1,32 @@
+import { formatDateTime } from "../../lib/timestamp";
+import { Button } from "../shared/Button";
+
+interface HistoryToolbarProps {
+  date: string;
+  onBackToCurrent: () => void;
+  onRestore: () => void;
+}
+
+export function HistoryToolbar({ date, onBackToCurrent, onRestore }: HistoryToolbarProps) {
+  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">
+        <div className="flex items-center">
+          <Button variant="secondary" size="sm" onClick={onBackToCurrent}>
+            Back to current
+          </Button>
+        </div>
+        <div className="flex items-center justify-center">
+          <span className="text-xs font-medium text-base-contrast-light">
+            Viewing {formatDateTime(date)}
+          </span>
+        </div>
+        <div className="flex items-center justify-end">
+          <Button variant="primary" size="sm" onClick={onRestore}>
+            Restore this version
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/shell/RestoreModal.tsx

@@ -0,0 +1,30 @@
+import { formatDateTime } from "../../lib/timestamp";
+import { EditorModal } from "./EditorModal";
+import { Button } from "../shared/Button";
+
+interface RestoreModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  date: string;
+  onConfirm: () => void;
+  isRestoring: boolean;
+}
+
+export function RestoreModal({ isOpen, onClose, date, onConfirm, isRestoring }: RestoreModalProps) {
+  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 {formatDateTime(date)} as a new update.
+        Your current content will still be available in the history.
+      </p>
+      <div className="flex justify-end gap-3">
+        <Button variant="secondary" size="md" onClick={onClose} disabled={isRestoring}>
+          Cancel
+        </Button>
+        <Button variant="primary" size="md" onClick={onConfirm} disabled={isRestoring}>
+          {isRestoring ? "Restoring..." : "Restore"}
+        </Button>
+      </div>
+    </EditorModal>
+  );
+}

package/src/lib/events.ts

@@ -21,3 +21,4 @@ export function createEvent<T>(name: string): TypedEvent<T> {
 export const editModeEvent = createEvent<{ isEditMode: boolean }>("editmodechange");
 export const navChangeEvent = createEvent<NavItem[]>("sitenavchange");
 export const darkModeEvent = createEvent<string>("sitedarkmode");
+export const historySelectEvent = createEvent<{ sha: string; date: string }>("history-select");

package/src/lib/timestamp.ts

@@ -1,3 +1,26 @@
+export function formatDate(iso: string): string {
+  return new Date(iso).toLocaleDateString("en-US", {
+    month: "short",
+    day: "numeric",
+    year: "numeric",
+  });
+}
+
+export function formatDateTime(iso: string): string {
+  const date = new Date(iso);
+  const datePart = date.toLocaleDateString("en-US", {
+    month: "short",
+    day: "numeric",
+    year: "numeric",
+  });
+  const timePart = date.toLocaleTimeString("en-US", {
+    hour: "numeric",
+    minute: "2-digit",
+    hour12: true,
+  });
+  return `${datePart} | ${timePart}`;
+}
+
 export function formatTimestamp(iso: string): string {
   const date = new Date(iso);
   const now = new Date();