@commercetools-demo/puck-content-manager 0.2.0 → 0.3.0

package/dist/index.mjs

@@ -12,27 +12,8 @@ import LoadingSpinner from "@commercetools-uikit/loading-spinner";
 import TextInput from "@commercetools-uikit/text-input";
 import Label from "@commercetools-uikit/label";
 import { PlusThinIcon, SearchIcon } from "@commercetools-uikit/icons";
+import Stamp from "@commercetools-uikit/stamp";
 import { jsx, jsxs } from "react/jsx-runtime";
-var StatusBadge = ({ variant }) => {
-  const styles = variant === "published" ? { background: "var(--color-success-95)", color: "var(--color-success-40)", border: "1px solid var(--color-success-85)" } : variant === "draft" ? { background: "var(--color-warning-95)", color: "var(--color-warning-40)", border: "1px solid var(--color-warning-85)" } : { background: "var(--color-neutral-95)", color: "var(--color-neutral-50)", border: "1px solid var(--color-neutral-85)" };
-  return /* @__PURE__ */ jsx(
-    "span",
-    {
-      style: {
-        ...styles,
-        display: "inline-flex",
-        alignItems: "center",
-        padding: "2px 8px",
-        borderRadius: "var(--border-radius-20)",
-        fontSize: "var(--font-size-10)",
-        fontWeight: "var(--font-weight-600)",
-        marginRight: "4px",
-        whiteSpace: "nowrap"
-      },
-      children: variant === "published" ? "Published" : variant === "draft" ? "Draft" : "No state"
-    }
-  );
-};
 var columns = [
   { key: "name", label: "Name" },
   { key: "contentType", label: "Content Type" },
@@ -178,7 +159,7 @@ var ContentList = ({ defaultContentType, onEdit }) => {
         itemRenderer: (row, column) => {
           switch (column.key) {
             case "name":
-              return /* @__PURE__ */ jsx(Text.Body, { isBold: true, children: row.value.name });
+              return /* @__PURE__ */ jsx(Text.Body, { fontWeight: "bold", children: row.value.name });
             case "contentType":
               return /* @__PURE__ */ jsx(
                 "code",
@@ -196,10 +177,10 @@ var ContentList = ({ defaultContentType, onEdit }) => {
             case "status": {
               const hasDraft = !!row.states.draft;
               const hasPublished = !!row.states.published;
-              return /* @__PURE__ */ jsxs("span", { children: [
-                hasDraft && /* @__PURE__ */ jsx(StatusBadge, { variant: "draft" }),
-                hasPublished && /* @__PURE__ */ jsx(StatusBadge, { variant: "published" }),
-                !hasDraft && !hasPublished && /* @__PURE__ */ jsx(StatusBadge, { variant: "none" })
+              return /* @__PURE__ */ jsxs("span", { style: { display: "inline-flex", gap: "4px", flexWrap: "wrap" }, children: [
+                hasDraft && /* @__PURE__ */ jsx(Stamp, { tone: "warning", label: "Draft", isCondensed: true }),
+                hasPublished && /* @__PURE__ */ jsx(Stamp, { tone: "positive", label: "Published", isCondensed: true }),
+                !hasDraft && !hasPublished && /* @__PURE__ */ jsx(Stamp, { tone: "secondary", label: "No state", isCondensed: true })
               ] });
             }
             case "updatedAt":
@@ -225,7 +206,7 @@ var ContentList = ({ defaultContentType, onEdit }) => {
     )
   ] }) });
 };
-var ContentManager = ({
+var ContentManagerList = ({
   baseURL,
   projectKey,
   businessUnitKey,
@@ -251,115 +232,21 @@ import { PuckApiProvider as PuckApiProvider2, usePuckContent } from "@commerceto
 import {
   ComponentSearchProvider,
   ComponentsPanel,
-  ComponentItemFilter
+  ComponentItemFilter,
+  EditorToolbar
 } from "@commercetools-demo/puck-editor";
+import {
+  VersionHistoryProvider,
+  VersionPreviewBanner,
+  VersionAwareFieldsPanel,
+  VersionHistoryButton,
+  useVersionHistoryPanel,
+  useVersionDiff
+} from "@commercetools-demo/puck-version-history";
+import LoadingSpinner2 from "@commercetools-uikit/loading-spinner";
+import Text2 from "@commercetools-uikit/text";
+import Spacings2 from "@commercetools-uikit/spacings";
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var BADGE_STYLES = {
-  saving: { bg: "rgba(251, 191, 36, 0.12)", color: "var(--status-saving)", border: "rgba(251, 191, 36, 0.3)" },
-  unsaved: { bg: "rgba(100, 116, 139, 0.12)", color: "var(--text-muted)", border: "rgba(100, 116, 139, 0.3)" },
-  draft: { bg: "rgba(129, 140, 248, 0.12)", color: "var(--status-draft)", border: "rgba(129, 140, 248, 0.3)" },
-  published: { bg: "rgba(6, 214, 160, 0.12)", color: "var(--status-published)", border: "rgba(6, 214, 160, 0.3)" }
-};
-var StatusBadge2 = ({
-  label,
-  variant
-}) => {
-  const bs = BADGE_STYLES[variant];
-  return /* @__PURE__ */ jsx2(
-    "span",
-    {
-      style: {
-        display: "inline-flex",
-        alignItems: "center",
-        padding: "2px 10px",
-        borderRadius: "12px",
-        fontSize: "12px",
-        fontWeight: 600,
-        background: bs.bg,
-        color: bs.color,
-        border: `1px solid ${bs.border}`
-      },
-      children: label
-    }
-  );
-};
-var ContentToolbar = ({
-  saving,
-  isDirty,
-  states,
-  onSave,
-  onPublish,
-  onRevert
-}) => {
-  const hasDraft = Boolean(states.draft);
-  const hasPublished = Boolean(states.published);
-  return /* @__PURE__ */ jsxs2("div", { style: { display: "flex", alignItems: "center", gap: "12px", flexWrap: "wrap" }, children: [
-    /* @__PURE__ */ jsxs2("div", { style: { display: "flex", alignItems: "center", gap: "6px" }, children: [
-      saving && /* @__PURE__ */ jsx2(StatusBadge2, { label: "Saving\u2026", variant: "saving" }),
-      !saving && isDirty && /* @__PURE__ */ jsx2(StatusBadge2, { label: "Unsaved", variant: "unsaved" }),
-      !saving && !isDirty && hasDraft && /* @__PURE__ */ jsx2(StatusBadge2, { label: "Draft", variant: "draft" }),
-      hasPublished && /* @__PURE__ */ jsx2(StatusBadge2, { label: "Published", variant: "published" })
-    ] }),
-    hasDraft && hasPublished && /* @__PURE__ */ jsx2(
-      "button",
-      {
-        onClick: onRevert,
-        disabled: saving,
-        style: {
-          padding: "6px 14px",
-          borderRadius: "4px",
-          border: "1px solid var(--border-glow)",
-          background: "transparent",
-          color: "var(--text-muted)",
-          fontWeight: 500,
-          fontSize: "13px",
-          cursor: saving ? "not-allowed" : "pointer",
-          opacity: saving ? 0.5 : 1
-        },
-        children: "Revert to Published"
-      }
-    ),
-    /* @__PURE__ */ jsx2(
-      "button",
-      {
-        onClick: onSave,
-        disabled: !isDirty || saving,
-        style: {
-          padding: "6px 14px",
-          borderRadius: "4px",
-          border: "1px solid var(--border-glow)",
-          background: "transparent",
-          color: "var(--text-muted)",
-          fontWeight: 500,
-          fontSize: "13px",
-          cursor: !isDirty || saving ? "not-allowed" : "pointer",
-          opacity: !isDirty || saving ? 0.4 : 1
-        },
-        children: "Save"
-      }
-    ),
-    /* @__PURE__ */ jsx2(
-      "button",
-      {
-        onClick: onPublish,
-        disabled: saving,
-        style: {
-          padding: "6px 16px",
-          borderRadius: "4px",
-          border: "1px solid var(--accent-cyan)",
-          background: "rgba(0, 212, 255, 0.1)",
-          color: "var(--accent-cyan)",
-          fontWeight: 600,
-          fontSize: "13px",
-          cursor: saving ? "not-allowed" : "pointer",
-          opacity: saving ? 0.5 : 1,
-          boxShadow: "0 0 12px rgba(0, 212, 255, 0.15)"
-        },
-        children: hasPublished ? "Re-publish" : "Publish"
-      }
-    )
-  ] });
-};
 var ContentEditorInner = ({
   contentKey,
   config,
@@ -370,16 +257,35 @@ var ContentEditorInner = ({
   const {
     content,
     states,
+    versions,
     saving,
     loading,
     error,
     saveDraft,
     publish,
-    revertToPublished
+    revertToPublished,
+    loadVersions
   } = usePuckContent(contentKey);
   const latestDataRef = useRef(null);
   const [hasUnsavedChanges, setHasUnsavedChanges] = useState2(false);
+  const [isApplyingVersion, setIsApplyingVersion] = useState2(false);
+  const currentData = states.draft?.data ?? content?.data ?? {
+    content: [],
+    root: { props: {} }
+  };
+  const versionHistory = useVersionHistoryPanel({
+    versions,
+    loadVersions,
+    currentData
+  });
+  const diff = useVersionDiff(
+    versionHistory.previewData,
+    currentData
+  );
+  const isPreviewingRef = useRef(false);
+  isPreviewingRef.current = versionHistory.isPreviewingHistory;
   const handleChange = useCallback((data) => {
+    if (isPreviewingRef.current) return;
     latestDataRef.current = data;
     setHasUnsavedChanges(true);
   }, []);
@@ -415,6 +321,21 @@ var ContentEditorInner = ({
       onError?.(err);
     }
   }, [revertToPublished, onError]);
+  const handleApplyVersion = useCallback(async () => {
+    const versionData = versionHistory.previewData;
+    if (!versionData) return;
+    setIsApplyingVersion(true);
+    try {
+      await saveDraft(versionData);
+      setHasUnsavedChanges(false);
+      onSave?.(versionData);
+      versionHistory.clearSelection();
+    } catch (err) {
+      onError?.(err);
+    } finally {
+      setIsApplyingVersion(false);
+    }
+  }, [versionHistory, saveDraft, onSave, onError]);
   const contentConfig = useMemo(() => {
     const otherRootFields = Object.fromEntries(
       Object.entries(config.root?.fields ?? {}).filter(([k]) => k !== "title")
@@ -437,69 +358,73 @@ var ContentEditorInner = ({
     };
   }, [config]);
   if (loading) {
-    return /* @__PURE__ */ jsx2(
-      "div",
-      {
-        style: {
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          height: "100vh",
-          fontSize: "16px",
-          color: "var(--text-muted)"
-        },
-        children: "Loading editor\u2026"
-      }
-    );
+    return /* @__PURE__ */ jsx2("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", height: "100vh" }, children: /* @__PURE__ */ jsxs2(Spacings2.Stack, { scale: "m", alignItems: "center", children: [
+      /* @__PURE__ */ jsx2(LoadingSpinner2, {}),
+      /* @__PURE__ */ jsx2(Text2.Body, { tone: "secondary", children: "Loading editor\u2026" })
+    ] }) });
   }
   if (error) {
-    return /* @__PURE__ */ jsxs2(
-      "div",
-      {
-        style: {
-          padding: "32px",
-          color: "var(--status-error)",
-          background: "rgba(248, 113, 113, 0.08)",
-          border: "1px solid rgba(248, 113, 113, 0.25)",
-          borderRadius: "8px",
-          margin: "16px"
-        },
-        children: [
-          /* @__PURE__ */ jsx2("strong", { children: "Error loading content:" }),
-          " ",
-          error
-        ]
-      }
-    );
+    return /* @__PURE__ */ jsx2("div", { style: { padding: "32px" }, children: /* @__PURE__ */ jsxs2(Text2.Body, { tone: "negative", children: [
+      /* @__PURE__ */ jsx2("strong", { children: "Error loading content:" }),
+      " ",
+      error
+    ] }) });
   }
-  const activeData = states.draft?.data ?? content?.data ?? {
-    content: [],
-    root: { props: {} }
-  };
-  return /* @__PURE__ */ jsx2(ComponentSearchProvider, { children: /* @__PURE__ */ jsx2(
-    Puck,
+  const activeData = versionHistory.previewData ?? currentData;
+  const toolbarStates = states;
+  return /* @__PURE__ */ jsx2(
+    VersionHistoryProvider,
     {
-      config: contentConfig,
-      data: activeData,
-      onChange: handleChange,
-      onPublish: handlePublish,
-      overrides: {
-        headerActions: () => /* @__PURE__ */ jsx2(
-          ContentToolbar,
-          {
-            saving,
-            isDirty: hasUnsavedChanges,
-            states,
-            onSave: () => void handleSave(),
-            onPublish: () => void handlePublish(activeData),
-            onRevert: () => void handleRevert()
+      diff,
+      isPreviewingHistory: versionHistory.isPreviewingHistory,
+      versions,
+      isLoadingVersions: versionHistory.isLoadingVersions,
+      selectedVersionId: versionHistory.selectedVersionId,
+      isApplying: isApplyingVersion,
+      onVersionSelect: versionHistory.selectVersion,
+      onApply: () => void handleApplyVersion(),
+      onDiscard: versionHistory.clearSelection,
+      onLoadVersions: versionHistory.openPanel,
+      children: /* @__PURE__ */ jsx2(ComponentSearchProvider, { children: /* @__PURE__ */ jsx2(
+        Puck,
+        {
+          config: contentConfig,
+          data: activeData,
+          onChange: handleChange,
+          onPublish: handlePublish,
+          overrides: {
+            headerActions: () => versionHistory.isPreviewingHistory ? /* @__PURE__ */ jsxs2(Spacings2.Inline, { scale: "s", alignItems: "center", children: [
+              /* @__PURE__ */ jsx2(
+                VersionPreviewBanner,
+                {
+                  timestamp: versionHistory.selectedVersion.timestamp,
+                  onApply: () => void handleApplyVersion(),
+                  onDiscard: versionHistory.clearSelection,
+                  isApplying: isApplyingVersion
+                }
+              ),
+              /* @__PURE__ */ jsx2(VersionHistoryButton, { disabled: isApplyingVersion })
+            ] }) : /* @__PURE__ */ jsx2(
+              EditorToolbar,
+              {
+                saving,
+                isDirty: hasUnsavedChanges,
+                states: toolbarStates,
+                onSave: () => void handleSave(),
+                onPublish: () => void handlePublish(activeData),
+                onRevert: () => void handleRevert(),
+                showPublishButton: true
+              }
+            ),
+            components: ({ children }) => /* @__PURE__ */ jsx2(ComponentsPanel, { children }),
+            componentItem: ({ children, name }) => /* @__PURE__ */ jsx2(ComponentItemFilter, { name, children }),
+            fields: ({ children, isLoading }) => /* @__PURE__ */ jsx2(VersionAwareFieldsPanel, { isLoading, children })
           }
-        ),
-        components: ({ children }) => /* @__PURE__ */ jsx2(ComponentsPanel, { children }),
-        componentItem: ({ children, name }) => /* @__PURE__ */ jsx2(ComponentItemFilter, { name, children })
-      }
+        },
+        versionHistory.selectedVersionId ?? "current"
+      ) })
     }
-  ) });
+  );
 };
 var ContentEditor = ({
   baseURL,
@@ -546,8 +471,18 @@ import "@measured/puck/puck.css";
 import {
   ComponentSearchProvider as ComponentSearchProvider2,
   ComponentsPanel as ComponentsPanel2,
-  ComponentItemFilter as ComponentItemFilter2
+  ComponentItemFilter as ComponentItemFilter2,
+  defaultPuckConfig,
+  EditorToolbar as EditorToolbar2
 } from "@commercetools-demo/puck-editor";
+import {
+  VersionHistoryProvider as VersionHistoryProvider2,
+  VersionHistoryButton as VersionHistoryButton2,
+  VersionPreviewBanner as VersionPreviewBanner2,
+  VersionAwareFieldsPanel as VersionAwareFieldsPanel2,
+  useVersionHistoryPanel as useVersionHistoryPanel2,
+  useVersionDiff as useVersionDiff2
+} from "@commercetools-demo/puck-version-history";
 import {
   PuckApiProvider as PuckApiProvider3,
   usePuckContents as usePuckContents2,
@@ -558,128 +493,17 @@ import PrimaryButton2 from "@commercetools-uikit/primary-button";
 import SecondaryButton2 from "@commercetools-uikit/secondary-button";
 import FlatButton2 from "@commercetools-uikit/flat-button";
 import Card2 from "@commercetools-uikit/card";
-import Spacings2 from "@commercetools-uikit/spacings";
-import Text2 from "@commercetools-uikit/text";
-import LoadingSpinner2 from "@commercetools-uikit/loading-spinner";
+import Spacings3 from "@commercetools-uikit/spacings";
+import Text3 from "@commercetools-uikit/text";
+import LoadingSpinner3 from "@commercetools-uikit/loading-spinner";
 import TextInput2 from "@commercetools-uikit/text-input";
 import Label2 from "@commercetools-uikit/label";
+import Stamp2 from "@commercetools-uikit/stamp";
 import { PlusThinIcon as PlusThinIcon2, SearchIcon as SearchIcon2, AngleLeftIcon } from "@commercetools-uikit/icons";
 import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-var StatusBadge3 = ({ variant }) => {
-  const styles = variant === "published" ? { background: "var(--color-success-95)", color: "var(--color-success-40)", border: "1px solid var(--color-success-85)" } : variant === "draft" ? { background: "var(--color-warning-95)", color: "var(--color-warning-40)", border: "1px solid var(--color-warning-85)" } : { background: "var(--color-neutral-95)", color: "var(--color-neutral-50)", border: "1px solid var(--color-neutral-85)" };
-  return /* @__PURE__ */ jsx3(
-    "span",
-    {
-      style: {
-        ...styles,
-        display: "inline-flex",
-        alignItems: "center",
-        padding: "2px 8px",
-        borderRadius: "var(--border-radius-20)",
-        fontSize: "var(--font-size-10)",
-        fontWeight: "var(--font-weight-600)",
-        marginRight: "4px",
-        whiteSpace: "nowrap"
-      },
-      children: variant === "published" ? "Published" : variant === "draft" ? "Draft" : "No state"
-    }
-  );
-};
-var BADGE_STYLES2 = {
-  saving: { bg: "rgba(251, 191, 36, 0.12)", color: "var(--status-saving)", border: "rgba(251, 191, 36, 0.3)" },
-  unsaved: { bg: "rgba(100, 116, 139, 0.12)", color: "var(--text-muted)", border: "rgba(100, 116, 139, 0.3)" },
-  draft: { bg: "rgba(129, 140, 248, 0.12)", color: "var(--status-draft)", border: "rgba(129, 140, 248, 0.3)" },
-  published: { bg: "rgba(6, 214, 160, 0.12)", color: "var(--status-published)", border: "rgba(6, 214, 160, 0.3)" }
-};
-var EditorStatusBadge = ({ label, variant }) => {
-  const bs = BADGE_STYLES2[variant];
-  return /* @__PURE__ */ jsx3(
-    "span",
-    {
-      style: {
-        display: "inline-flex",
-        alignItems: "center",
-        padding: "2px 10px",
-        borderRadius: "12px",
-        fontSize: "12px",
-        fontWeight: 600,
-        background: bs.bg,
-        color: bs.color,
-        border: `1px solid ${bs.border}`
-      },
-      children: label
-    }
-  );
-};
-var ContentToolbar2 = ({ saving, isDirty, states, onSave, onPublish, onRevert }) => {
-  const hasDraft = Boolean(states.draft);
-  const hasPublished = Boolean(states.published);
-  return /* @__PURE__ */ jsxs3("div", { style: { display: "flex", alignItems: "center", gap: "12px", flexWrap: "wrap" }, children: [
-    /* @__PURE__ */ jsxs3("div", { style: { display: "flex", alignItems: "center", gap: "6px" }, children: [
-      saving && /* @__PURE__ */ jsx3(EditorStatusBadge, { label: "Saving\u2026", variant: "saving" }),
-      !saving && isDirty && /* @__PURE__ */ jsx3(EditorStatusBadge, { label: "Unsaved", variant: "unsaved" }),
-      !saving && !isDirty && hasDraft && /* @__PURE__ */ jsx3(EditorStatusBadge, { label: "Draft", variant: "draft" }),
-      hasPublished && /* @__PURE__ */ jsx3(EditorStatusBadge, { label: "Published", variant: "published" })
-    ] }),
-    hasDraft && hasPublished && /* @__PURE__ */ jsx3(
-      "button",
-      {
-        onClick: onRevert,
-        disabled: saving,
-        style: {
-          padding: "6px 14px",
-          borderRadius: "4px",
-          border: "1px solid var(--border-glow)",
-          background: "transparent",
-          color: "var(--text-muted)",
-          fontWeight: 500,
-          fontSize: "13px",
-          cursor: saving ? "not-allowed" : "pointer",
-          opacity: saving ? 0.5 : 1
-        },
-        children: "Revert to Published"
-      }
-    ),
-    /* @__PURE__ */ jsx3(
-      "button",
-      {
-        onClick: onSave,
-        disabled: !isDirty || saving,
-        style: {
-          padding: "6px 14px",
-          borderRadius: "4px",
-          border: "1px solid var(--border-glow)",
-          background: "transparent",
-          color: "var(--text-muted)",
-          fontWeight: 500,
-          fontSize: "13px",
-          cursor: !isDirty || saving ? "not-allowed" : "pointer",
-          opacity: !isDirty || saving ? 0.4 : 1
-        },
-        children: "Save"
-      }
-    ),
-    /* @__PURE__ */ jsx3(
-      "button",
-      {
-        onClick: onPublish,
-        disabled: saving,
-        style: {
-          padding: "6px 16px",
-          borderRadius: "4px",
-          border: "1px solid var(--accent-cyan)",
-          background: "rgba(0, 212, 255, 0.1)",
-          color: "var(--accent-cyan)",
-          fontWeight: 600,
-          fontSize: "13px",
-          cursor: saving ? "not-allowed" : "pointer",
-          opacity: saving ? 0.5 : 1,
-          boxShadow: "0 0 12px rgba(0, 212, 255, 0.15)"
-        },
-        children: hasPublished ? "Re-publish" : "Publish"
-      }
-    )
-  ] });
+var DEFAULT_CONFIG = {
+  ...defaultPuckConfig,
+  components: { ...defaultPuckConfig.components }
 };
 var NAV_BAR_STYLE = {
   position: "sticky",
@@ -749,11 +573,11 @@ var ContentListRoute = ({ defaultContentType, backButton }) => {
     }
   };
   const rows = contents.map((c) => ({ ...c, id: c.key }));
-  return /* @__PURE__ */ jsx3("div", { style: { maxWidth: "1200px", margin: "0 auto", padding: "32px 24px" }, children: /* @__PURE__ */ jsxs3(Spacings2.Stack, { scale: "l", children: [
-    /* @__PURE__ */ jsxs3(Spacings2.Inline, { justifyContent: "space-between", alignItems: "center", children: [
-      /* @__PURE__ */ jsxs3(Spacings2.Inline, { scale: "m", alignItems: "center", children: [
+  return /* @__PURE__ */ jsx3("div", { style: { maxWidth: "1200px", margin: "0 auto", padding: "32px 24px" }, children: /* @__PURE__ */ jsxs3(Spacings3.Stack, { scale: "l", children: [
+    /* @__PURE__ */ jsxs3(Spacings3.Inline, { justifyContent: "space-between", alignItems: "center", children: [
+      /* @__PURE__ */ jsxs3(Spacings3.Inline, { scale: "m", alignItems: "center", children: [
         backButton,
-        /* @__PURE__ */ jsx3(Text2.Headline, { as: "h1", children: "Content Items" })
+        /* @__PURE__ */ jsx3(Text3.Headline, { as: "h1", children: "Content Items" })
       ] }),
       /* @__PURE__ */ jsx3(
         PrimaryButton2,
@@ -764,11 +588,11 @@ var ContentListRoute = ({ defaultContentType, backButton }) => {
         }
       )
     ] }),
-    showCreate && /* @__PURE__ */ jsx3(Card2, { insetScale: "l", children: /* @__PURE__ */ jsxs3(Spacings2.Stack, { scale: "m", children: [
-      /* @__PURE__ */ jsx3(Text2.Subheadline, { as: "h4", isBold: true, children: "Create Content Item" }),
-      createError && /* @__PURE__ */ jsx3(Text2.Body, { tone: "negative", children: createError }),
-      /* @__PURE__ */ jsxs3(Spacings2.Inline, { scale: "m", children: [
-        /* @__PURE__ */ jsx3("div", { style: { flex: 1 }, children: /* @__PURE__ */ jsxs3(Spacings2.Stack, { scale: "xs", children: [
+    showCreate && /* @__PURE__ */ jsx3(Card2, { insetScale: "l", children: /* @__PURE__ */ jsxs3(Spacings3.Stack, { scale: "m", children: [
+      /* @__PURE__ */ jsx3(Text3.Subheadline, { as: "h4", isBold: true, children: "Create Content Item" }),
+      createError && /* @__PURE__ */ jsx3(Text3.Body, { tone: "negative", children: createError }),
+      /* @__PURE__ */ jsxs3(Spacings3.Inline, { scale: "m", children: [
+        /* @__PURE__ */ jsx3("div", { style: { flex: 1 }, children: /* @__PURE__ */ jsxs3(Spacings3.Stack, { scale: "xs", children: [
           /* @__PURE__ */ jsx3(Label2, { htmlFor: "create-content-name", children: "Name" }),
           /* @__PURE__ */ jsx3(
             TextInput2,
@@ -780,7 +604,7 @@ var ContentListRoute = ({ defaultContentType, backButton }) => {
             }
           )
         ] }) }),
-        /* @__PURE__ */ jsx3("div", { style: { flex: 1 }, children: /* @__PURE__ */ jsxs3(Spacings2.Stack, { scale: "xs", children: [
+        /* @__PURE__ */ jsx3("div", { style: { flex: 1 }, children: /* @__PURE__ */ jsxs3(Spacings3.Stack, { scale: "xs", children: [
           /* @__PURE__ */ jsx3(Label2, { htmlFor: "create-content-type", children: "Content Type" }),
           /* @__PURE__ */ jsx3(
             TextInput2,
@@ -793,7 +617,7 @@ var ContentListRoute = ({ defaultContentType, backButton }) => {
           )
         ] }) })
       ] }),
-      /* @__PURE__ */ jsxs3(Spacings2.Inline, { scale: "s", children: [
+      /* @__PURE__ */ jsxs3(Spacings3.Inline, { scale: "s", children: [
         /* @__PURE__ */ jsx3(
           PrimaryButton2,
           {
@@ -805,7 +629,7 @@ var ContentListRoute = ({ defaultContentType, backButton }) => {
         /* @__PURE__ */ jsx3(SecondaryButton2, { label: "Cancel", onClick: () => setShowCreate(false) })
       ] })
     ] }) }),
-    /* @__PURE__ */ jsxs3(Spacings2.Inline, { scale: "s", alignItems: "center", children: [
+    /* @__PURE__ */ jsxs3(Spacings3.Inline, { scale: "s", alignItems: "center", children: [
       /* @__PURE__ */ jsx3("div", { style: { flex: 1, maxWidth: "280px" }, children: /* @__PURE__ */ jsx3(
         TextInput2,
         {
@@ -834,8 +658,8 @@ var ContentListRoute = ({ defaultContentType, backButton }) => {
       ),
       /* @__PURE__ */ jsx3(FlatButton2, { label: "Refresh", onClick: () => void refresh() })
     ] }),
-    error && /* @__PURE__ */ jsx3(Text2.Body, { tone: "negative", children: error }),
-    loading ? /* @__PURE__ */ jsx3("div", { style: { display: "flex", justifyContent: "center", padding: "48px" }, children: /* @__PURE__ */ jsx3(LoadingSpinner2, {}) }) : contents.length === 0 ? /* @__PURE__ */ jsx3(Spacings2.Stack, { scale: "m", alignItems: "center", children: /* @__PURE__ */ jsx3(Text2.Body, { tone: "secondary", children: "No content items found." }) }) : /* @__PURE__ */ jsx3(
+    error && /* @__PURE__ */ jsx3(Text3.Body, { tone: "negative", children: error }),
+    loading ? /* @__PURE__ */ jsx3("div", { style: { display: "flex", justifyContent: "center", padding: "48px" }, children: /* @__PURE__ */ jsx3(LoadingSpinner3, {}) }) : contents.length === 0 ? /* @__PURE__ */ jsx3(Spacings3.Stack, { scale: "m", alignItems: "center", children: /* @__PURE__ */ jsx3(Text3.Body, { tone: "secondary", children: "No content items found." }) }) : /* @__PURE__ */ jsx3(
       DataTable2,
       {
         columns: COLUMNS,
@@ -843,7 +667,7 @@ var ContentListRoute = ({ defaultContentType, backButton }) => {
         itemRenderer: (row, column) => {
           switch (column.key) {
             case "name":
-              return /* @__PURE__ */ jsx3(Text2.Body, { isBold: true, children: row.value.name });
+              return /* @__PURE__ */ jsx3(Text3.Body, { fontWeight: "bold", children: row.value.name });
             case "contentType":
               return /* @__PURE__ */ jsx3(
                 "code",
@@ -861,16 +685,16 @@ var ContentListRoute = ({ defaultContentType, backButton }) => {
             case "status": {
               const hasDraft = !!row.states.draft;
               const hasPublished = !!row.states.published;
-              return /* @__PURE__ */ jsxs3("span", { children: [
-                hasDraft && /* @__PURE__ */ jsx3(StatusBadge3, { variant: "draft" }),
-                hasPublished && /* @__PURE__ */ jsx3(StatusBadge3, { variant: "published" }),
-                !hasDraft && !hasPublished && /* @__PURE__ */ jsx3(StatusBadge3, { variant: "none" })
+              return /* @__PURE__ */ jsxs3("span", { style: { display: "inline-flex", gap: "4px", flexWrap: "wrap" }, children: [
+                hasDraft && /* @__PURE__ */ jsx3(Stamp2, { tone: "warning", label: "Draft", isCondensed: true }),
+                hasPublished && /* @__PURE__ */ jsx3(Stamp2, { tone: "positive", label: "Published", isCondensed: true }),
+                !hasDraft && !hasPublished && /* @__PURE__ */ jsx3(Stamp2, { tone: "secondary", label: "No state", isCondensed: true })
               ] });
             }
             case "updatedAt":
-              return /* @__PURE__ */ jsx3(Text2.Body, { tone: "secondary", children: new Date(row.value.updatedAt).toLocaleDateString() });
+              return /* @__PURE__ */ jsx3(Text3.Body, { tone: "secondary", children: new Date(row.value.updatedAt).toLocaleDateString() });
             case "actions":
-              return /* @__PURE__ */ jsxs3("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+              return /* @__PURE__ */ jsxs3(Spacings3.Inline, { scale: "s", alignItems: "center", children: [
                 /* @__PURE__ */ jsx3(
                   PrimaryButton2,
                   {
@@ -905,16 +729,29 @@ var ContentEditorRoute = ({ config, backButton }) => {
   const {
     content,
     states,
+    versions,
     saving,
     loading,
     error,
     saveDraft,
     publish,
-    revertToPublished
+    revertToPublished,
+    loadVersions
   } = usePuckContent2(contentKey);
   const latestDataRef = useRef2(null);
   const [hasUnsavedChanges, setHasUnsavedChanges] = useState3(false);
+  const [isApplyingVersion, setIsApplyingVersion] = useState3(false);
+  const currentData = states.draft?.data ?? content?.data ?? { content: [], root: { props: {} } };
+  const versionHistory = useVersionHistoryPanel2({
+    versions,
+    loadVersions,
+    currentData
+  });
+  const diff = useVersionDiff2(versionHistory.previewData, currentData);
+  const isPreviewingRef = useRef2(false);
+  isPreviewingRef.current = versionHistory.isPreviewingHistory;
   const handleChange = useCallback2((data) => {
+    if (isPreviewingRef.current) return;
     latestDataRef.current = data;
     setHasUnsavedChanges(true);
   }, []);
@@ -948,6 +785,20 @@ var ContentEditorRoute = ({ config, backButton }) => {
       console.error("[ContentManagerRouter] revert error:", err);
     }
   }, [revertToPublished]);
+  const handleApplyVersion = useCallback2(async () => {
+    const versionData = versionHistory.previewData;
+    if (!versionData) return;
+    setIsApplyingVersion(true);
+    try {
+      await saveDraft(versionData);
+      setHasUnsavedChanges(false);
+      versionHistory.clearSelection();
+    } catch (err) {
+      console.error("[ContentManagerRouter] apply version error:", err);
+    } finally {
+      setIsApplyingVersion(false);
+    }
+  }, [versionHistory, saveDraft]);
   const contentConfig = useMemo2(() => {
     const otherRootFields = Object.fromEntries(
       Object.entries(config.root?.fields ?? {}).filter(([k]) => k !== "title")
@@ -970,86 +821,90 @@ var ContentEditorRoute = ({ config, backButton }) => {
     };
   }, [config]);
   if (loading) {
-    return /* @__PURE__ */ jsx3(
-      "div",
-      {
-        style: {
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          height: "100vh",
-          fontSize: "16px",
-          color: "var(--text-muted)"
-        },
-        children: "Loading editor\u2026"
-      }
-    );
+    return /* @__PURE__ */ jsx3("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", height: "100vh" }, children: /* @__PURE__ */ jsxs3(Spacings3.Stack, { scale: "m", alignItems: "center", children: [
+      /* @__PURE__ */ jsx3(LoadingSpinner3, {}),
+      /* @__PURE__ */ jsx3(Text3.Body, { tone: "secondary", children: "Loading editor\u2026" })
+    ] }) });
   }
   if (error) {
-    return /* @__PURE__ */ jsxs3(
-      "div",
-      {
-        style: {
-          padding: "32px",
-          color: "var(--status-error)",
-          background: "rgba(248, 113, 113, 0.08)",
-          border: "1px solid rgba(248, 113, 113, 0.25)",
-          borderRadius: "8px",
-          margin: "16px"
-        },
-        children: [
-          /* @__PURE__ */ jsx3("strong", { children: "Error loading content:" }),
-          " ",
-          error
-        ]
-      }
-    );
+    return /* @__PURE__ */ jsx3("div", { style: { padding: "32px" }, children: /* @__PURE__ */ jsxs3(Text3.Body, { tone: "negative", children: [
+      /* @__PURE__ */ jsx3("strong", { children: "Error loading content:" }),
+      " ",
+      error
+    ] }) });
   }
-  const activeData = states.draft?.data ?? content?.data ?? {
-    content: [],
-    root: { props: {} }
-  };
-  return /* @__PURE__ */ jsxs3("div", { style: { display: "flex", flexDirection: "column", height: "100%" }, children: [
-    /* @__PURE__ */ jsxs3("div", { style: NAV_BAR_STYLE, children: [
-      backButton,
-      backButton && /* @__PURE__ */ jsx3(Text2.Body, { tone: "secondary", children: "/" }),
-      /* @__PURE__ */ jsx3(
-        FlatButton2,
-        {
-          label: "Content Items",
-          icon: /* @__PURE__ */ jsx3(AngleLeftIcon, {}),
-          iconPosition: "left",
-          onClick: () => history.push("/")
-        }
-      ),
-      /* @__PURE__ */ jsx3(Text2.Body, { tone: "secondary", children: "/" }),
-      /* @__PURE__ */ jsx3(Text2.Body, { isBold: true, children: contentName })
-    ] }),
-    /* @__PURE__ */ jsx3("div", { style: { flex: 1, overflow: "hidden" }, children: /* @__PURE__ */ jsx3(ComponentSearchProvider2, { children: /* @__PURE__ */ jsx3(
-      Puck2,
-      {
-        config: contentConfig,
-        data: activeData,
-        onChange: handleChange,
-        onPublish: handlePublish,
-        overrides: {
-          headerActions: () => /* @__PURE__ */ jsx3(
-            ContentToolbar2,
+  const activeData = versionHistory.previewData ?? currentData;
+  const toolbarStates = states;
+  return /* @__PURE__ */ jsx3(
+    VersionHistoryProvider2,
+    {
+      diff,
+      isPreviewingHistory: versionHistory.isPreviewingHistory,
+      versions,
+      isLoadingVersions: versionHistory.isLoadingVersions,
+      selectedVersionId: versionHistory.selectedVersionId,
+      isApplying: isApplyingVersion,
+      onVersionSelect: versionHistory.selectVersion,
+      onApply: () => void handleApplyVersion(),
+      onDiscard: versionHistory.clearSelection,
+      onLoadVersions: versionHistory.openPanel,
+      children: /* @__PURE__ */ jsxs3("div", { style: { display: "flex", flexDirection: "column", height: "100%" }, children: [
+        /* @__PURE__ */ jsxs3("div", { style: NAV_BAR_STYLE, children: [
+          backButton,
+          backButton && /* @__PURE__ */ jsx3(Text3.Body, { tone: "secondary", children: "/" }),
+          /* @__PURE__ */ jsx3(
+            FlatButton2,
             {
-              saving,
-              isDirty: hasUnsavedChanges,
-              states,
-              onSave: () => void handleSave(),
-              onPublish: () => void handlePublish(activeData),
-              onRevert: () => void handleRevert()
+              label: "Content Items",
+              icon: /* @__PURE__ */ jsx3(AngleLeftIcon, {}),
+              iconPosition: "left",
+              onClick: () => history.push("/")
             }
           ),
-          components: ({ children }) => /* @__PURE__ */ jsx3(ComponentsPanel2, { children }),
-          componentItem: ({ children, name }) => /* @__PURE__ */ jsx3(ComponentItemFilter2, { name, children })
-        }
-      }
-    ) }) })
-  ] });
+          /* @__PURE__ */ jsx3(Text3.Body, { tone: "secondary", children: "/" }),
+          /* @__PURE__ */ jsx3(Text3.Body, { fontWeight: "bold", children: contentName })
+        ] }),
+        /* @__PURE__ */ jsx3("div", { style: { flex: 1, overflow: "hidden" }, children: /* @__PURE__ */ jsx3(ComponentSearchProvider2, { children: /* @__PURE__ */ jsx3(
+          Puck2,
+          {
+            config: contentConfig,
+            data: activeData,
+            onChange: handleChange,
+            onPublish: handlePublish,
+            overrides: {
+              headerActions: () => versionHistory.isPreviewingHistory ? /* @__PURE__ */ jsxs3(Spacings3.Inline, { scale: "s", alignItems: "center", children: [
+                /* @__PURE__ */ jsx3(
+                  VersionPreviewBanner2,
+                  {
+                    timestamp: versionHistory.selectedVersion.timestamp,
+                    onApply: () => void handleApplyVersion(),
+                    onDiscard: versionHistory.clearSelection,
+                    isApplying: isApplyingVersion
+                  }
+                ),
+                /* @__PURE__ */ jsx3(VersionHistoryButton2, { disabled: isApplyingVersion })
+              ] }) : /* @__PURE__ */ jsx3(
+                EditorToolbar2,
+                {
+                  saving,
+                  isDirty: hasUnsavedChanges,
+                  states: toolbarStates,
+                  onSave: () => void handleSave(),
+                  onPublish: () => void handlePublish(activeData),
+                  onRevert: () => void handleRevert(),
+                  showPublishButton: true
+                }
+              ),
+              components: ({ children }) => /* @__PURE__ */ jsx3(ComponentsPanel2, { children }),
+              componentItem: ({ children, name }) => /* @__PURE__ */ jsx3(ComponentItemFilter2, { name, children }),
+              fields: ({ children, isLoading }) => /* @__PURE__ */ jsx3(VersionAwareFieldsPanel2, { isLoading, children })
+            }
+          },
+          versionHistory.selectedVersionId ?? "current"
+        ) }) })
+      ] })
+    }
+  );
 };
 var ContentManagerRouterInner = ({
   config,
@@ -1072,13 +927,13 @@ var ContentManagerRouterInner = ({
     }
   )
 ] });
-var ContentManagerRouter = ({
+var ContentManager = ({
   parentUrl,
   baseURL,
   projectKey,
   businessUnitKey,
   jwtToken,
-  config,
+  config = DEFAULT_CONFIG,
   defaultContentType,
   backButton
 }) => /* @__PURE__ */ jsx3(
@@ -1101,6 +956,6 @@ var ContentManagerRouter = ({
 export {
   ContentEditor,
   ContentManager,
-  ContentManagerRouter
+  ContentManagerList
 };
 //# sourceMappingURL=index.mjs.map