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

package/dist/index.js

@@ -32,7 +32,7 @@ var index_exports = {};
 __export(index_exports, {
   ContentEditor: () => ContentEditor,
   ContentManager: () => ContentManager,
-  ContentManagerRouter: () => ContentManagerRouter
+  ContentManagerList: () => ContentManagerList
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -50,27 +50,8 @@ var import_loading_spinner = __toESM(require("@commercetools-uikit/loading-spinn
 var import_text_input = __toESM(require("@commercetools-uikit/text-input"));
 var import_label = __toESM(require("@commercetools-uikit/label"));
 var import_icons = require("@commercetools-uikit/icons");
+var import_stamp = __toESM(require("@commercetools-uikit/stamp"));
 var import_jsx_runtime = require("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__ */ (0, import_jsx_runtime.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" },
@@ -216,7 +197,7 @@ var ContentList = ({ defaultContentType, onEdit }) => {
         itemRenderer: (row, column) => {
           switch (column.key) {
             case "name":
-              return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_text.default.Body, { isBold: true, children: row.value.name });
+              return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_text.default.Body, { fontWeight: "bold", children: row.value.name });
             case "contentType":
               return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                 "code",
@@ -234,10 +215,10 @@ var ContentList = ({ defaultContentType, onEdit }) => {
             case "status": {
               const hasDraft = !!row.states.draft;
               const hasPublished = !!row.states.published;
-              return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
-                hasDraft && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StatusBadge, { variant: "draft" }),
-                hasPublished && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StatusBadge, { variant: "published" }),
-                !hasDraft && !hasPublished && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StatusBadge, { variant: "none" })
+              return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { style: { display: "inline-flex", gap: "4px", flexWrap: "wrap" }, children: [
+                hasDraft && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stamp.default, { tone: "warning", label: "Draft", isCondensed: true }),
+                hasPublished && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stamp.default, { tone: "positive", label: "Published", isCondensed: true }),
+                !hasDraft && !hasPublished && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stamp.default, { tone: "secondary", label: "No state", isCondensed: true })
               ] });
             }
             case "updatedAt":
@@ -263,7 +244,7 @@ var ContentList = ({ defaultContentType, onEdit }) => {
     )
   ] }) });
 };
-var ContentManager = ({
+var ContentManagerList = ({
   baseURL,
   projectKey,
   businessUnitKey,
@@ -287,113 +268,11 @@ var import_puck = require("@measured/puck");
 var import_puck2 = require("@measured/puck/puck.css");
 var import_puck_api2 = require("@commercetools-demo/puck-api");
 var import_puck_editor = require("@commercetools-demo/puck-editor");
+var import_puck_version_history = require("@commercetools-demo/puck-version-history");
+var import_loading_spinner2 = __toESM(require("@commercetools-uikit/loading-spinner"));
+var import_text2 = __toESM(require("@commercetools-uikit/text"));
+var import_spacings2 = __toESM(require("@commercetools-uikit/spacings"));
 var import_jsx_runtime2 = require("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__ */ (0, import_jsx_runtime2.jsx)(
-    "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__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "12px", flexWrap: "wrap" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "6px" }, children: [
-      saving && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(StatusBadge2, { label: "Saving\u2026", variant: "saving" }),
-      !saving && isDirty && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(StatusBadge2, { label: "Unsaved", variant: "unsaved" }),
-      !saving && !isDirty && hasDraft && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(StatusBadge2, { label: "Draft", variant: "draft" }),
-      hasPublished && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(StatusBadge2, { label: "Published", variant: "published" })
-    ] }),
-    hasDraft && hasPublished && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-      "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__ */ (0, import_jsx_runtime2.jsx)(
-      "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__ */ (0, import_jsx_runtime2.jsx)(
-      "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,
@@ -404,16 +283,35 @@ var ContentEditorInner = ({
   const {
     content,
     states,
+    versions,
     saving,
     loading,
     error,
     saveDraft,
     publish,
-    revertToPublished
+    revertToPublished,
+    loadVersions
   } = (0, import_puck_api2.usePuckContent)(contentKey);
   const latestDataRef = (0, import_react2.useRef)(null);
   const [hasUnsavedChanges, setHasUnsavedChanges] = (0, import_react2.useState)(false);
+  const [isApplyingVersion, setIsApplyingVersion] = (0, import_react2.useState)(false);
+  const currentData = states.draft?.data ?? content?.data ?? {
+    content: [],
+    root: { props: {} }
+  };
+  const versionHistory = (0, import_puck_version_history.useVersionHistoryPanel)({
+    versions,
+    loadVersions,
+    currentData
+  });
+  const diff = (0, import_puck_version_history.useVersionDiff)(
+    versionHistory.previewData,
+    currentData
+  );
+  const isPreviewingRef = (0, import_react2.useRef)(false);
+  isPreviewingRef.current = versionHistory.isPreviewingHistory;
   const handleChange = (0, import_react2.useCallback)((data) => {
+    if (isPreviewingRef.current) return;
     latestDataRef.current = data;
     setHasUnsavedChanges(true);
   }, []);
@@ -449,6 +347,21 @@ var ContentEditorInner = ({
       onError?.(err);
     }
   }, [revertToPublished, onError]);
+  const handleApplyVersion = (0, import_react2.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 = (0, import_react2.useMemo)(() => {
     const otherRootFields = Object.fromEntries(
       Object.entries(config.root?.fields ?? {}).filter(([k]) => k !== "title")
@@ -471,69 +384,73 @@ var ContentEditorInner = ({
     };
   }, [config]);
   if (loading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-      "div",
-      {
-        style: {
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          height: "100vh",
-          fontSize: "16px",
-          color: "var(--text-muted)"
-        },
-        children: "Loading editor\u2026"
-      }
-    );
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", height: "100vh" }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_spacings2.default.Stack, { scale: "m", alignItems: "center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_loading_spinner2.default, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_text2.default.Body, { tone: "secondary", children: "Loading editor\u2026" })
+    ] }) });
   }
   if (error) {
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-      "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__ */ (0, import_jsx_runtime2.jsx)("strong", { children: "Error loading content:" }),
-          " ",
-          error
-        ]
-      }
-    );
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { padding: "32px" }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_text2.default.Body, { tone: "negative", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("strong", { children: "Error loading content:" }),
+      " ",
+      error
+    ] }) });
   }
-  const activeData = states.draft?.data ?? content?.data ?? {
-    content: [],
-    root: { props: {} }
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_puck_editor.ComponentSearchProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-    import_puck.Puck,
+  const activeData = versionHistory.previewData ?? currentData;
+  const toolbarStates = states;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_puck_version_history.VersionHistoryProvider,
     {
-      config: contentConfig,
-      data: activeData,
-      onChange: handleChange,
-      onPublish: handlePublish,
-      overrides: {
-        headerActions: () => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-          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__ */ (0, import_jsx_runtime2.jsx)(import_puck_editor.ComponentSearchProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        import_puck.Puck,
+        {
+          config: contentConfig,
+          data: activeData,
+          onChange: handleChange,
+          onPublish: handlePublish,
+          overrides: {
+            headerActions: () => versionHistory.isPreviewingHistory ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_spacings2.default.Inline, { scale: "s", alignItems: "center", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                import_puck_version_history.VersionPreviewBanner,
+                {
+                  timestamp: versionHistory.selectedVersion.timestamp,
+                  onApply: () => void handleApplyVersion(),
+                  onDiscard: versionHistory.clearSelection,
+                  isApplying: isApplyingVersion
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_puck_version_history.VersionHistoryButton, { disabled: isApplyingVersion })
+            ] }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              import_puck_editor.EditorToolbar,
+              {
+                saving,
+                isDirty: hasUnsavedChanges,
+                states: toolbarStates,
+                onSave: () => void handleSave(),
+                onPublish: () => void handlePublish(activeData),
+                onRevert: () => void handleRevert(),
+                showPublishButton: true
+              }
+            ),
+            components: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_puck_editor.ComponentsPanel, { children }),
+            componentItem: ({ children, name }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_puck_editor.ComponentItemFilter, { name, children }),
+            fields: ({ children, isLoading }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_puck_version_history.VersionAwareFieldsPanel, { isLoading, children })
           }
-        ),
-        components: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_puck_editor.ComponentsPanel, { children }),
-        componentItem: ({ children, name }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_puck_editor.ComponentItemFilter, { name, children })
-      }
+        },
+        versionHistory.selectedVersionId ?? "current"
+      ) })
     }
-  ) });
+  );
 };
 var ContentEditor = ({
   baseURL,
@@ -571,134 +488,24 @@ var import_react_router_dom = require("react-router-dom");
 var import_puck3 = require("@measured/puck");
 var import_puck4 = require("@measured/puck/puck.css");
 var import_puck_editor2 = require("@commercetools-demo/puck-editor");
+var import_puck_version_history2 = require("@commercetools-demo/puck-version-history");
 var import_puck_api3 = require("@commercetools-demo/puck-api");
 var import_data_table2 = __toESM(require("@commercetools-uikit/data-table"));
 var import_primary_button2 = __toESM(require("@commercetools-uikit/primary-button"));
 var import_secondary_button2 = __toESM(require("@commercetools-uikit/secondary-button"));
 var import_flat_button2 = __toESM(require("@commercetools-uikit/flat-button"));
 var import_card2 = __toESM(require("@commercetools-uikit/card"));
-var import_spacings2 = __toESM(require("@commercetools-uikit/spacings"));
-var import_text2 = __toESM(require("@commercetools-uikit/text"));
-var import_loading_spinner2 = __toESM(require("@commercetools-uikit/loading-spinner"));
+var import_spacings3 = __toESM(require("@commercetools-uikit/spacings"));
+var import_text3 = __toESM(require("@commercetools-uikit/text"));
+var import_loading_spinner3 = __toESM(require("@commercetools-uikit/loading-spinner"));
 var import_text_input2 = __toESM(require("@commercetools-uikit/text-input"));
 var import_label2 = __toESM(require("@commercetools-uikit/label"));
+var import_stamp2 = __toESM(require("@commercetools-uikit/stamp"));
 var import_icons2 = require("@commercetools-uikit/icons");
 var import_jsx_runtime3 = require("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__ */ (0, import_jsx_runtime3.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 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__ */ (0, import_jsx_runtime3.jsx)(
-    "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__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "12px", flexWrap: "wrap" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "6px" }, children: [
-      saving && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(EditorStatusBadge, { label: "Saving\u2026", variant: "saving" }),
-      !saving && isDirty && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(EditorStatusBadge, { label: "Unsaved", variant: "unsaved" }),
-      !saving && !isDirty && hasDraft && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(EditorStatusBadge, { label: "Draft", variant: "draft" }),
-      hasPublished && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(EditorStatusBadge, { label: "Published", variant: "published" })
-    ] }),
-    hasDraft && hasPublished && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-      "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__ */ (0, import_jsx_runtime3.jsx)(
-      "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__ */ (0, import_jsx_runtime3.jsx)(
-      "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 = {
+  ...import_puck_editor2.defaultPuckConfig,
+  components: { ...import_puck_editor2.defaultPuckConfig.components }
 };
 var NAV_BAR_STYLE = {
   position: "sticky",
@@ -768,11 +575,11 @@ var ContentListRoute = ({ defaultContentType, backButton }) => {
     }
   };
   const rows = contents.map((c) => ({ ...c, id: c.key }));
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { maxWidth: "1200px", margin: "0 auto", padding: "32px 24px" }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_spacings2.default.Stack, { scale: "l", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_spacings2.default.Inline, { justifyContent: "space-between", alignItems: "center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_spacings2.default.Inline, { scale: "m", alignItems: "center", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { maxWidth: "1200px", margin: "0 auto", padding: "32px 24px" }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_spacings3.default.Stack, { scale: "l", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_spacings3.default.Inline, { justifyContent: "space-between", alignItems: "center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_spacings3.default.Inline, { scale: "m", alignItems: "center", children: [
         backButton,
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_text2.default.Headline, { as: "h1", children: "Content Items" })
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_text3.default.Headline, { as: "h1", children: "Content Items" })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         import_primary_button2.default,
@@ -783,11 +590,11 @@ var ContentListRoute = ({ defaultContentType, backButton }) => {
         }
       )
     ] }),
-    showCreate && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_card2.default, { insetScale: "l", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_spacings2.default.Stack, { scale: "m", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_text2.default.Subheadline, { as: "h4", isBold: true, children: "Create Content Item" }),
-      createError && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_text2.default.Body, { tone: "negative", children: createError }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_spacings2.default.Inline, { scale: "m", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { flex: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_spacings2.default.Stack, { scale: "xs", children: [
+    showCreate && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_card2.default, { insetScale: "l", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_spacings3.default.Stack, { scale: "m", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_text3.default.Subheadline, { as: "h4", isBold: true, children: "Create Content Item" }),
+      createError && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_text3.default.Body, { tone: "negative", children: createError }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_spacings3.default.Inline, { scale: "m", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { flex: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_spacings3.default.Stack, { scale: "xs", children: [
           /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_label2.default, { htmlFor: "create-content-name", children: "Name" }),
           /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
             import_text_input2.default,
@@ -799,7 +606,7 @@ var ContentListRoute = ({ defaultContentType, backButton }) => {
             }
           )
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { flex: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_spacings2.default.Stack, { scale: "xs", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { flex: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_spacings3.default.Stack, { scale: "xs", children: [
           /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_label2.default, { htmlFor: "create-content-type", children: "Content Type" }),
           /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
             import_text_input2.default,
@@ -812,7 +619,7 @@ var ContentListRoute = ({ defaultContentType, backButton }) => {
           )
         ] }) })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_spacings2.default.Inline, { scale: "s", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_spacings3.default.Inline, { scale: "s", children: [
         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
           import_primary_button2.default,
           {
@@ -824,7 +631,7 @@ var ContentListRoute = ({ defaultContentType, backButton }) => {
         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_secondary_button2.default, { label: "Cancel", onClick: () => setShowCreate(false) })
       ] })
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_spacings2.default.Inline, { scale: "s", alignItems: "center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_spacings3.default.Inline, { scale: "s", alignItems: "center", children: [
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { flex: 1, maxWidth: "280px" }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         import_text_input2.default,
         {
@@ -853,8 +660,8 @@ var ContentListRoute = ({ defaultContentType, backButton }) => {
       ),
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_flat_button2.default, { label: "Refresh", onClick: () => void refresh() })
     ] }),
-    error && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_text2.default.Body, { tone: "negative", children: error }),
-    loading ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { display: "flex", justifyContent: "center", padding: "48px" }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_loading_spinner2.default, {}) }) : contents.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_spacings2.default.Stack, { scale: "m", alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_text2.default.Body, { tone: "secondary", children: "No content items found." }) }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    error && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_text3.default.Body, { tone: "negative", children: error }),
+    loading ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { display: "flex", justifyContent: "center", padding: "48px" }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_loading_spinner3.default, {}) }) : contents.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_spacings3.default.Stack, { scale: "m", alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_text3.default.Body, { tone: "secondary", children: "No content items found." }) }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       import_data_table2.default,
       {
         columns: COLUMNS,
@@ -862,7 +669,7 @@ var ContentListRoute = ({ defaultContentType, backButton }) => {
         itemRenderer: (row, column) => {
           switch (column.key) {
             case "name":
-              return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_text2.default.Body, { isBold: true, children: row.value.name });
+              return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_text3.default.Body, { fontWeight: "bold", children: row.value.name });
             case "contentType":
               return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                 "code",
@@ -880,16 +687,16 @@ var ContentListRoute = ({ defaultContentType, backButton }) => {
             case "status": {
               const hasDraft = !!row.states.draft;
               const hasPublished = !!row.states.published;
-              return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { children: [
-                hasDraft && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(StatusBadge3, { variant: "draft" }),
-                hasPublished && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(StatusBadge3, { variant: "published" }),
-                !hasDraft && !hasPublished && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(StatusBadge3, { variant: "none" })
+              return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { style: { display: "inline-flex", gap: "4px", flexWrap: "wrap" }, children: [
+                hasDraft && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_stamp2.default, { tone: "warning", label: "Draft", isCondensed: true }),
+                hasPublished && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_stamp2.default, { tone: "positive", label: "Published", isCondensed: true }),
+                !hasDraft && !hasPublished && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_stamp2.default, { tone: "secondary", label: "No state", isCondensed: true })
               ] });
             }
             case "updatedAt":
-              return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_text2.default.Body, { tone: "secondary", children: new Date(row.value.updatedAt).toLocaleDateString() });
+              return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_text3.default.Body, { tone: "secondary", children: new Date(row.value.updatedAt).toLocaleDateString() });
             case "actions":
-              return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+              return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_spacings3.default.Inline, { scale: "s", alignItems: "center", children: [
                 /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                   import_primary_button2.default,
                   {
@@ -924,16 +731,29 @@ var ContentEditorRoute = ({ config, backButton }) => {
   const {
     content,
     states,
+    versions,
     saving,
     loading,
     error,
     saveDraft,
     publish,
-    revertToPublished
+    revertToPublished,
+    loadVersions
   } = (0, import_puck_api3.usePuckContent)(contentKey);
   const latestDataRef = (0, import_react3.useRef)(null);
   const [hasUnsavedChanges, setHasUnsavedChanges] = (0, import_react3.useState)(false);
+  const [isApplyingVersion, setIsApplyingVersion] = (0, import_react3.useState)(false);
+  const currentData = states.draft?.data ?? content?.data ?? { content: [], root: { props: {} } };
+  const versionHistory = (0, import_puck_version_history2.useVersionHistoryPanel)({
+    versions,
+    loadVersions,
+    currentData
+  });
+  const diff = (0, import_puck_version_history2.useVersionDiff)(versionHistory.previewData, currentData);
+  const isPreviewingRef = (0, import_react3.useRef)(false);
+  isPreviewingRef.current = versionHistory.isPreviewingHistory;
   const handleChange = (0, import_react3.useCallback)((data) => {
+    if (isPreviewingRef.current) return;
     latestDataRef.current = data;
     setHasUnsavedChanges(true);
   }, []);
@@ -967,6 +787,20 @@ var ContentEditorRoute = ({ config, backButton }) => {
       console.error("[ContentManagerRouter] revert error:", err);
     }
   }, [revertToPublished]);
+  const handleApplyVersion = (0, import_react3.useCallback)(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 = (0, import_react3.useMemo)(() => {
     const otherRootFields = Object.fromEntries(
       Object.entries(config.root?.fields ?? {}).filter(([k]) => k !== "title")
@@ -989,86 +823,90 @@ var ContentEditorRoute = ({ config, backButton }) => {
     };
   }, [config]);
   if (loading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-      "div",
-      {
-        style: {
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          height: "100vh",
-          fontSize: "16px",
-          color: "var(--text-muted)"
-        },
-        children: "Loading editor\u2026"
-      }
-    );
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", height: "100vh" }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_spacings3.default.Stack, { scale: "m", alignItems: "center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_loading_spinner3.default, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_text3.default.Body, { tone: "secondary", children: "Loading editor\u2026" })
+    ] }) });
   }
   if (error) {
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-      "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__ */ (0, import_jsx_runtime3.jsx)("strong", { children: "Error loading content:" }),
-          " ",
-          error
-        ]
-      }
-    );
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { padding: "32px" }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_text3.default.Body, { tone: "negative", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("strong", { children: "Error loading content:" }),
+      " ",
+      error
+    ] }) });
   }
-  const activeData = states.draft?.data ?? content?.data ?? {
-    content: [],
-    root: { props: {} }
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { display: "flex", flexDirection: "column", height: "100%" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: NAV_BAR_STYLE, children: [
-      backButton,
-      backButton && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_text2.default.Body, { tone: "secondary", children: "/" }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-        import_flat_button2.default,
-        {
-          label: "Content Items",
-          icon: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons2.AngleLeftIcon, {}),
-          iconPosition: "left",
-          onClick: () => history.push("/")
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_text2.default.Body, { tone: "secondary", children: "/" }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_text2.default.Body, { isBold: true, children: contentName })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { flex: 1, overflow: "hidden" }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_puck_editor2.ComponentSearchProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-      import_puck3.Puck,
-      {
-        config: contentConfig,
-        data: activeData,
-        onChange: handleChange,
-        onPublish: handlePublish,
-        overrides: {
-          headerActions: () => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-            ContentToolbar2,
+  const activeData = versionHistory.previewData ?? currentData;
+  const toolbarStates = states;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    import_puck_version_history2.VersionHistoryProvider,
+    {
+      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__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { display: "flex", flexDirection: "column", height: "100%" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: NAV_BAR_STYLE, children: [
+          backButton,
+          backButton && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_text3.default.Body, { tone: "secondary", children: "/" }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            import_flat_button2.default,
             {
-              saving,
-              isDirty: hasUnsavedChanges,
-              states,
-              onSave: () => void handleSave(),
-              onPublish: () => void handlePublish(activeData),
-              onRevert: () => void handleRevert()
+              label: "Content Items",
+              icon: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons2.AngleLeftIcon, {}),
+              iconPosition: "left",
+              onClick: () => history.push("/")
             }
           ),
-          components: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_puck_editor2.ComponentsPanel, { children }),
-          componentItem: ({ children, name }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_puck_editor2.ComponentItemFilter, { name, children })
-        }
-      }
-    ) }) })
-  ] });
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_text3.default.Body, { tone: "secondary", children: "/" }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_text3.default.Body, { fontWeight: "bold", children: contentName })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { flex: 1, overflow: "hidden" }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_puck_editor2.ComponentSearchProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          import_puck3.Puck,
+          {
+            config: contentConfig,
+            data: activeData,
+            onChange: handleChange,
+            onPublish: handlePublish,
+            overrides: {
+              headerActions: () => versionHistory.isPreviewingHistory ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_spacings3.default.Inline, { scale: "s", alignItems: "center", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  import_puck_version_history2.VersionPreviewBanner,
+                  {
+                    timestamp: versionHistory.selectedVersion.timestamp,
+                    onApply: () => void handleApplyVersion(),
+                    onDiscard: versionHistory.clearSelection,
+                    isApplying: isApplyingVersion
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_puck_version_history2.VersionHistoryButton, { disabled: isApplyingVersion })
+              ] }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                import_puck_editor2.EditorToolbar,
+                {
+                  saving,
+                  isDirty: hasUnsavedChanges,
+                  states: toolbarStates,
+                  onSave: () => void handleSave(),
+                  onPublish: () => void handlePublish(activeData),
+                  onRevert: () => void handleRevert(),
+                  showPublishButton: true
+                }
+              ),
+              components: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_puck_editor2.ComponentsPanel, { children }),
+              componentItem: ({ children, name }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_puck_editor2.ComponentItemFilter, { name, children }),
+              fields: ({ children, isLoading }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_puck_version_history2.VersionAwareFieldsPanel, { isLoading, children })
+            }
+          },
+          versionHistory.selectedVersionId ?? "current"
+        ) }) })
+      ] })
+    }
+  );
 };
 var ContentManagerRouterInner = ({
   config,
@@ -1091,13 +929,13 @@ var ContentManagerRouterInner = ({
     }
   )
 ] });
-var ContentManagerRouter = ({
+var ContentManager = ({
   parentUrl,
   baseURL,
   projectKey,
   businessUnitKey,
   jwtToken,
-  config,
+  config = DEFAULT_CONFIG,
   defaultContentType,
   backButton
 }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
@@ -1121,6 +959,6 @@ var ContentManagerRouter = ({
 0 && (module.exports = {
   ContentEditor,
   ContentManager,
-  ContentManagerRouter
+  ContentManagerList
 });
 //# sourceMappingURL=index.js.map