@commercetools-demo/puck-page-manager 0.5.2 → 0.6.1

package/dist/index.mjs

@@ -1,5 +1,5 @@
 // src/PageManager.tsx
-import { useState } from "react";
+import { useCallback, useState } from "react";
 import {
   BrowserRouter,
   Switch,
@@ -11,9 +11,15 @@ import {
 import {
   PuckApiProvider,
   usePuckPages,
+  usePuckTemplates,
   usePuckApiContext
 } from "@commercetools-demo/puck-api";
-import { PuckEditor, defaultPuckConfig } from "@commercetools-demo/puck-editor";
+import {
+  PropertiesResizer,
+  PuckEditor,
+  UnsavedChangesDialog,
+  defaultPuckConfig
+} from "@commercetools-demo/puck-editor";
 import { PuckRenderer } from "@commercetools-demo/puck-renderer";
 
 // src/EnsureIntlProvider.tsx
@@ -40,42 +46,67 @@ var EnsureIntlProvider = ({ children }) => {
   );
 };
 
+// src/EnsureNimbusProvider.tsx
+import { ChakraProvider, createSystem } from "@chakra-ui/react/styled-system";
+import {
+  NimbusI18nProvider,
+  _RegionProvider,
+  system as nimbusSystem
+} from "@commercetools/nimbus";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var SCOPED_SYSTEM_KEY = /* @__PURE__ */ Symbol.for(
+  "@commercetools-demo/puck:nimbus-scoped-system"
+);
+var globalScope = globalThis;
+var scopedSystem = globalScope[SCOPED_SYSTEM_KEY] ?? (globalScope[SCOPED_SYSTEM_KEY] = createSystem({
+  // `_config` is the fully-merged Nimbus + Chakra config used to build the
+  // stock system; reusing it keeps all Nimbus theming intact.
+  ...nimbusSystem._config,
+  preflight: false,
+  globalCss: {}
+}));
+var EnsureNimbusProvider = ({
+  locale = "en",
+  children
+}) => /* @__PURE__ */ jsx2(ChakraProvider, { value: scopedSystem, children: /* @__PURE__ */ jsx2(NimbusI18nProvider, { locale, children: /* @__PURE__ */ jsx2(_RegionProvider, { children }) }) });
+
 // src/PageManager.tsx
-import DataTable from "@commercetools-uikit/data-table";
-import PrimaryButton from "@commercetools-uikit/primary-button";
-import SecondaryButton from "@commercetools-uikit/secondary-button";
-import FlatButton from "@commercetools-uikit/flat-button";
-import Card from "@commercetools-uikit/card";
-import Spacings from "@commercetools-uikit/spacings";
-import Text from "@commercetools-uikit/text";
-import LoadingSpinner from "@commercetools-uikit/loading-spinner";
-import TextInput from "@commercetools-uikit/text-input";
-import Label from "@commercetools-uikit/label";
-import { PlusThinIcon, AngleLeftIcon } from "@commercetools-uikit/icons";
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+import {
+  Badge,
+  Button,
+  Card,
+  DataTable,
+  Dialog,
+  FormField,
+  Icon,
+  IconButton,
+  LoadingSpinner,
+  Select,
+  Stack,
+  Text,
+  TextInput
+} from "@commercetools/nimbus";
+import {
+  Add,
+  ChevronLeft,
+  Close,
+  Delete,
+  Edit,
+  Visibility
+} from "@commercetools/nimbus-icons";
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
 var DEFAULT_CONFIG = {
   ...defaultPuckConfig,
   components: { ...defaultPuckConfig.components }
 };
+var STATUS_BADGE = {
+  draft: { colorPalette: "warning", label: "Draft" },
+  published: { colorPalette: "positive", label: "Published" },
+  none: { colorPalette: "neutral", label: "No state" }
+};
 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__ */ jsx2(
-    "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"
-    }
-  );
+  const meta = STATUS_BADGE[variant];
+  return /* @__PURE__ */ jsx3(Badge, { colorPalette: meta.colorPalette, size: "xs", children: meta.label });
 };
 var NAV_BAR_STYLE = {
   position: "sticky",
@@ -85,26 +116,23 @@ var NAV_BAR_STYLE = {
   gap: "12px",
   padding: "8px 16px",
   background: "var(--color-surface, #fff)",
-  borderBottom: "1px solid var(--color-neutral-90)",
+  borderBottom: "1px solid var(--color-neutral-90, #e0e0e0)",
   zIndex: 200,
   flexShrink: 0
 };
-var COLUMNS = [
-  { key: "name", label: "Name" },
-  { key: "slug", label: "Slug" },
-  { key: "status", label: "Status" },
-  { key: "updatedAt", label: "Updated" },
-  { key: "actions", label: "Actions", shouldIgnoreRowClick: true }
-];
 var PageList = ({ backButton }) => {
   const history = useHistory();
   const { pages, loading, error, createPage, deletePage, refresh } = usePuckPages();
+  const { templates } = usePuckTemplates("page");
   const [creating, setCreating] = useState(false);
   const [newName, setNewName] = useState("");
   const [newSlug, setNewSlug] = useState("");
+  const [templateKey, setTemplateKey] = useState("");
   const [formError, setFormError] = useState("");
   const [submitting, setSubmitting] = useState(false);
   const [deleting, setDeleting] = useState(null);
+  const [pendingDelete, setPendingDelete] = useState(null);
+  const [search, setSearch] = useState("");
   const handleCreate = async () => {
     if (!newName.trim()) {
       setFormError("Name is required");
@@ -121,10 +149,15 @@ var PageList = ({ backButton }) => {
         name: newName.trim(),
         slug: newSlug.trim().startsWith("/") ? newSlug.trim() : `/${newSlug.trim()}`
       };
+      if (templateKey) {
+        const template = templates.find((t) => t.key === templateKey);
+        if (template) input.puckData = template.value.puckData;
+      }
       const created = await createPage(input);
       setCreating(false);
       setNewName("");
       setNewSlug("");
+      setTemplateKey("");
       history.push(`/${created.key}/edit`, { pageName: created.value.name });
     } catch (err) {
       setFormError(err.message);
@@ -133,206 +166,323 @@ var PageList = ({ backButton }) => {
     }
   };
   const handleDelete = async (page) => {
-    if (!confirm(`Delete "${page.value.name}"? This cannot be undone.`)) return;
     setDeleting(page.key);
     try {
       await deletePage(page.key);
       await refresh();
+      setPendingDelete(null);
     } finally {
       setDeleting(null);
     }
   };
   if (loading) {
-    return /* @__PURE__ */ jsx2("div", { style: { padding: "64px", display: "flex", justifyContent: "center" }, children: /* @__PURE__ */ jsx2(LoadingSpinner, {}) });
+    return /* @__PURE__ */ jsx3("div", { style: { padding: "64px", display: "flex", justifyContent: "center" }, children: /* @__PURE__ */ jsx3(LoadingSpinner, {}) });
   }
   if (error) {
-    return /* @__PURE__ */ jsx2("div", { style: { padding: "32px" }, children: /* @__PURE__ */ jsxs(Text.Body, { tone: "negative", children: [
+    return /* @__PURE__ */ jsx3("div", { style: { padding: "32px" }, children: /* @__PURE__ */ jsxs(Text, { color: "critical.11", children: [
       "Error: ",
       error
     ] }) });
   }
-  const rows = pages.map((p) => ({ ...p, id: p.key }));
-  return /* @__PURE__ */ jsx2("div", { style: { maxWidth: "1200px", margin: "0 auto", padding: "32px 24px" }, children: /* @__PURE__ */ jsxs(Spacings.Stack, { scale: "l", children: [
-    /* @__PURE__ */ jsxs(Spacings.Inline, { justifyContent: "space-between", alignItems: "center", children: [
-      /* @__PURE__ */ jsxs(Spacings.Inline, { scale: "m", alignItems: "center", children: [
-        backButton,
-        /* @__PURE__ */ jsx2(Text.Headline, { as: "h1", children: "Puck Pages" })
-      ] }),
-      /* @__PURE__ */ jsx2(
-        PrimaryButton,
+  const term = search.trim().toLowerCase();
+  const filteredPages = term ? pages.filter(
+    (p) => p.value.name.toLowerCase().includes(term) || p.value.slug.toLowerCase().includes(term)
+  ) : pages;
+  const rows = filteredPages.map((p) => ({ ...p, id: p.key }));
+  const columns = [
+    {
+      id: "name",
+      header: "Name",
+      accessor: (row) => row.value.name,
+      render: ({ row }) => /* @__PURE__ */ jsx3(Text, { fontWeight: "bold", children: row.value.name })
+    },
+    {
+      id: "slug",
+      header: "Slug",
+      accessor: (row) => row.value.slug,
+      render: ({ row }) => /* @__PURE__ */ jsx3(
+        "code",
         {
-          label: "New Page",
-          iconLeft: /* @__PURE__ */ jsx2(PlusThinIcon, {}),
-          onClick: () => setCreating(true)
+          style: {
+            background: "#f4f4f4",
+            padding: "2px 6px",
+            borderRadius: "4px",
+            fontSize: "11px",
+            fontFamily: "monospace"
+          },
+          children: row.value.slug
         }
       )
-    ] }),
-    creating && /* @__PURE__ */ jsx2(Card, { insetScale: "l", children: /* @__PURE__ */ jsxs(Spacings.Stack, { scale: "m", children: [
-      /* @__PURE__ */ jsx2(Text.Subheadline, { as: "h4", isBold: true, children: "Create New Page" }),
-      /* @__PURE__ */ jsxs(Spacings.Inline, { scale: "m", children: [
-        /* @__PURE__ */ jsx2("div", { style: { flex: 1 }, children: /* @__PURE__ */ jsxs(Spacings.Stack, { scale: "xs", children: [
-          /* @__PURE__ */ jsx2(Label, { htmlFor: "new-page-name", children: "Name *" }),
-          /* @__PURE__ */ jsx2(
-            TextInput,
-            {
-              id: "new-page-name",
-              value: newName,
-              onChange: (e) => setNewName(e.target.value),
-              placeholder: "Home Page"
-            }
-          )
-        ] }) }),
-        /* @__PURE__ */ jsx2("div", { style: { flex: 1 }, children: /* @__PURE__ */ jsxs(Spacings.Stack, { scale: "xs", children: [
-          /* @__PURE__ */ jsx2(Label, { htmlFor: "new-page-slug", children: "Slug *" }),
-          /* @__PURE__ */ jsx2(
-            TextInput,
-            {
-              id: "new-page-slug",
-              value: newSlug,
-              onChange: (e) => setNewSlug(e.target.value),
-              placeholder: "/home"
-            }
-          )
-        ] }) })
-      ] }),
-      formError && /* @__PURE__ */ jsx2(Text.Body, { tone: "negative", children: formError }),
-      /* @__PURE__ */ jsxs(Spacings.Inline, { scale: "s", children: [
-        /* @__PURE__ */ jsx2(
-          PrimaryButton,
+    },
+    {
+      id: "status",
+      header: "Status",
+      accessor: () => "",
+      isSortable: false,
+      render: ({ row }) => /* @__PURE__ */ jsxs(Stack, { direction: "row", gap: "100", wrap: "wrap", children: [
+        row.states.draft && /* @__PURE__ */ jsx3(StatusBadge, { variant: "draft" }),
+        row.states.published && /* @__PURE__ */ jsx3(StatusBadge, { variant: "published" }),
+        !row.states.draft && !row.states.published && /* @__PURE__ */ jsx3(StatusBadge, { variant: "none" })
+      ] })
+    },
+    {
+      id: "updatedAt",
+      header: "Updated",
+      accessor: (row) => row.value.updatedAt,
+      render: ({ row }) => /* @__PURE__ */ jsx3(Text, { fontSize: "xs", color: "neutral.11", children: new Date(row.value.updatedAt).toLocaleString() })
+    },
+    {
+      id: "actions",
+      header: "Actions",
+      accessor: () => "",
+      isSortable: false,
+      render: ({ row }) => /* @__PURE__ */ jsxs(Stack, { direction: "row", gap: "100", alignItems: "center", children: [
+        /* @__PURE__ */ jsx3(
+          IconButton,
           {
-            label: submitting ? "Creating\u2026" : "Create",
-            onClick: () => void handleCreate(),
-            isDisabled: submitting
+            "aria-label": `Edit ${row.value.name}`,
+            variant: "ghost",
+            size: "xs",
+            onPress: () => history.push(`/${row.key}/edit`, { pageName: row.value.name }),
+            children: /* @__PURE__ */ jsx3(Edit, {})
           }
         ),
-        /* @__PURE__ */ jsx2(
-          SecondaryButton,
+        /* @__PURE__ */ jsx3(
+          IconButton,
           {
-            label: "Cancel",
-            onClick: () => {
-              setCreating(false);
-              setFormError("");
-            }
+            "aria-label": `Preview ${row.value.name}`,
+            variant: "ghost",
+            size: "xs",
+            onPress: () => history.push(`/${row.key}/preview`, { pageName: row.value.name }),
+            children: /* @__PURE__ */ jsx3(Visibility, {})
+          }
+        ),
+        /* @__PURE__ */ jsx3(
+          IconButton,
+          {
+            "aria-label": `Delete ${row.value.name}`,
+            variant: "ghost",
+            colorPalette: "critical",
+            size: "xs",
+            isDisabled: deleting === row.key,
+            onPress: () => setPendingDelete(row),
+            children: /* @__PURE__ */ jsx3(Delete, {})
           }
         )
       ] })
-    ] }) }),
-    pages.length === 0 && !creating ? /* @__PURE__ */ jsxs(Spacings.Stack, { scale: "m", alignItems: "center", children: [
-      /* @__PURE__ */ jsx2(Text.Body, { tone: "secondary", children: "No pages yet." }),
-      /* @__PURE__ */ jsx2(
-        PrimaryButton,
-        {
-          label: "Create first page",
-          iconLeft: /* @__PURE__ */ jsx2(PlusThinIcon, {}),
-          onClick: () => setCreating(true)
-        }
-      )
-    ] }) : pages.length > 0 ? /* @__PURE__ */ jsx2(
-      DataTable,
-      {
-        columns: COLUMNS,
-        rows,
-        itemRenderer: (row, column) => {
-          switch (column.key) {
-            case "name":
-              return /* @__PURE__ */ jsxs(Spacings.Stack, { scale: "xs", children: [
-                /* @__PURE__ */ jsx2(Text.Body, { isBold: true, children: row.value.name }),
-                /* @__PURE__ */ jsx2(Text.Detail, { tone: "secondary", children: row.key })
-              ] });
-            case "slug":
-              return /* @__PURE__ */ jsx2(
-                "code",
-                {
-                  style: {
-                    background: "var(--color-neutral-95)",
-                    padding: "2px 6px",
-                    borderRadius: "var(--border-radius-4)",
-                    fontSize: "var(--font-size-10)",
-                    fontFamily: "monospace"
-                  },
-                  children: row.value.slug
-                }
-              );
-            case "status":
-              return /* @__PURE__ */ jsxs("span", { children: [
-                row.states.draft && /* @__PURE__ */ jsx2(StatusBadge, { variant: "draft" }),
-                row.states.published && /* @__PURE__ */ jsx2(StatusBadge, { variant: "published" }),
-                !row.states.draft && !row.states.published && /* @__PURE__ */ jsx2(StatusBadge, { variant: "none" })
-              ] });
-            case "updatedAt":
-              return /* @__PURE__ */ jsx2(Text.Body, { tone: "secondary", children: new Date(row.value.updatedAt).toLocaleString() });
-            case "actions":
-              return /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
-                /* @__PURE__ */ jsx2(
-                  PrimaryButton,
-                  {
-                    label: "Edit",
-                    size: "20",
-                    onClick: () => history.push(`/${row.key}/edit`, { pageName: row.value.name })
-                  }
-                ),
-                /* @__PURE__ */ jsx2(
-                  SecondaryButton,
-                  {
-                    label: "Preview",
-                    size: "20",
-                    onClick: () => history.push(`/${row.key}/preview`, { pageName: row.value.name })
-                  }
-                ),
-                /* @__PURE__ */ jsx2(
-                  FlatButton,
-                  {
-                    tone: "critical",
-                    label: deleting === row.key ? "\u2026" : "Delete",
-                    isDisabled: deleting === row.key,
-                    onClick: () => void handleDelete(row)
-                  }
-                )
-              ] });
-            default:
-              return null;
+    }
+  ];
+  return /* @__PURE__ */ jsxs("div", { style: { maxWidth: "1200px", margin: "0 auto", padding: "32px 24px" }, children: [
+    /* @__PURE__ */ jsxs(Stack, { direction: "column", gap: "600", children: [
+      /* @__PURE__ */ jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", children: [
+        /* @__PURE__ */ jsxs(Stack, { direction: "row", gap: "400", alignItems: "center", children: [
+          backButton,
+          /* @__PURE__ */ jsx3(Text, { as: "h1", fontSize: "2xl", fontWeight: "700", children: "Pages" })
+        ] }),
+        /* @__PURE__ */ jsxs(Button, { variant: "solid", onPress: () => setCreating(true), children: [
+          /* @__PURE__ */ jsx3(Icon, { as: Add }),
+          " New Page"
+        ] })
+      ] }),
+      creating && /* @__PURE__ */ jsx3(Card.Root, { variant: "outlined", children: /* @__PURE__ */ jsx3(Card.Body, { children: /* @__PURE__ */ jsxs(Stack, { direction: "column", gap: "400", children: [
+        /* @__PURE__ */ jsx3(Text, { as: "h4", fontSize: "xl", fontWeight: "700", children: "Create New Page" }),
+        /* @__PURE__ */ jsxs(Stack, { direction: "row", gap: "400", children: [
+          /* @__PURE__ */ jsx3("div", { style: { flex: 1 }, children: /* @__PURE__ */ jsxs(FormField.Root, { isRequired: true, children: [
+            /* @__PURE__ */ jsx3(FormField.Label, { children: "Name" }),
+            /* @__PURE__ */ jsx3(FormField.Input, { children: /* @__PURE__ */ jsx3(
+              TextInput,
+              {
+                value: newName,
+                onChange: (v) => setNewName(v),
+                placeholder: "Home Page"
+              }
+            ) })
+          ] }) }),
+          /* @__PURE__ */ jsx3("div", { style: { flex: 1 }, children: /* @__PURE__ */ jsxs(FormField.Root, { isRequired: true, children: [
+            /* @__PURE__ */ jsx3(FormField.Label, { children: "Slug" }),
+            /* @__PURE__ */ jsx3(FormField.Input, { children: /* @__PURE__ */ jsx3(
+              TextInput,
+              {
+                value: newSlug,
+                onChange: (v) => setNewSlug(v),
+                placeholder: "/home"
+              }
+            ) })
+          ] }) })
+        ] }),
+        /* @__PURE__ */ jsxs(FormField.Root, { children: [
+          /* @__PURE__ */ jsx3(FormField.Label, { children: "Template" }),
+          /* @__PURE__ */ jsx3(FormField.Input, { children: /* @__PURE__ */ jsx3(
+            Select.Root,
+            {
+              "aria-label": "Template",
+              selectedKey: templateKey || "empty",
+              onSelectionChange: (key) => setTemplateKey(key == null || key === "empty" ? "" : String(key)),
+              children: /* @__PURE__ */ jsxs(Select.Options, { children: [
+                /* @__PURE__ */ jsx3(Select.Option, { id: "empty", children: "Empty" }),
+                templates.map((t) => /* @__PURE__ */ jsx3(Select.Option, { id: t.key, children: t.value.name }, t.key))
+              ] })
+            }
+          ) })
+        ] }),
+        formError && /* @__PURE__ */ jsx3(Text, { color: "critical.11", children: formError }),
+        /* @__PURE__ */ jsxs(Stack, { direction: "row", gap: "200", children: [
+          /* @__PURE__ */ jsx3(Button, { variant: "solid", onPress: () => void handleCreate(), isDisabled: submitting, children: submitting ? "Creating\u2026" : "Create" }),
+          /* @__PURE__ */ jsx3(
+            Button,
+            {
+              variant: "outline",
+              onPress: () => {
+                setCreating(false);
+                setFormError("");
+              },
+              children: "Cancel"
+            }
+          )
+        ] })
+      ] }) }) }),
+      pages.length === 0 && !creating ? /* @__PURE__ */ jsxs(Stack, { direction: "column", gap: "400", alignItems: "center", children: [
+        /* @__PURE__ */ jsx3(Text, { color: "neutral.11", children: "No pages yet." }),
+        /* @__PURE__ */ jsxs(Button, { variant: "solid", onPress: () => setCreating(true), children: [
+          /* @__PURE__ */ jsx3(Icon, { as: Add }),
+          " Create first page"
+        ] })
+      ] }) : pages.length > 0 ? /* @__PURE__ */ jsxs(Stack, { direction: "column", gap: "400", children: [
+        /* @__PURE__ */ jsx3("div", { style: { maxWidth: 360 }, children: /* @__PURE__ */ jsx3(
+          TextInput,
+          {
+            "aria-label": "Search pages",
+            placeholder: "Search by name or path\u2026",
+            value: search,
+            onChange: (v) => setSearch(v),
+            width: "100%",
+            trailingElement: search !== "" ? /* @__PURE__ */ jsx3(
+              IconButton,
+              {
+                "aria-label": "Clear search",
+                variant: "ghost",
+                colorPalette: "neutral",
+                size: "2xs",
+                onPress: () => setSearch(""),
+                children: /* @__PURE__ */ jsx3(Close, {})
+              }
+            ) : void 0
           }
-        }
+        ) }),
+        /* @__PURE__ */ jsxs("div", { className: "puck-page-list", children: [
+          /* @__PURE__ */ jsx3("style", { children: `
+                .puck-page-list .pin-rows-column-header,
+                .puck-page-list [data-slot="pin-row-cell"] { display: none !important; }
+              ` }),
+          /* @__PURE__ */ jsx3(DataTable, { columns, rows, "aria-label": "Pages" })
+        ] })
+      ] }) : null
+    ] }),
+    /* @__PURE__ */ jsx3(
+      Dialog.Root,
+      {
+        isOpen: pendingDelete !== null,
+        onOpenChange: (open) => {
+          if (!open) setPendingDelete(null);
+        },
+        children: /* @__PURE__ */ jsxs(Dialog.Content, { children: [
+          /* @__PURE__ */ jsxs(Dialog.Header, { children: [
+            /* @__PURE__ */ jsx3(Dialog.Title, { children: "Delete page?" }),
+            /* @__PURE__ */ jsx3(Dialog.CloseTrigger, {})
+          ] }),
+          /* @__PURE__ */ jsx3(Dialog.Body, { children: /* @__PURE__ */ jsxs(Text, { children: [
+            "Are you sure you want to delete",
+            " ",
+            /* @__PURE__ */ jsx3(Text, { as: "span", fontWeight: "700", children: pendingDelete?.value.name }),
+            "? This cannot be undone."
+          ] }) }),
+          /* @__PURE__ */ jsxs(Dialog.Footer, { children: [
+            /* @__PURE__ */ jsx3(Button, { slot: "close", variant: "outline", isDisabled: deleting !== null, children: "Cancel" }),
+            /* @__PURE__ */ jsx3(
+              Button,
+              {
+                colorPalette: "critical",
+                isDisabled: deleting !== null,
+                onPress: () => {
+                  if (pendingDelete) void handleDelete(pendingDelete);
+                },
+                children: deleting !== null ? "Deleting\u2026" : "Delete"
+              }
+            )
+          ] })
+        ] })
       }
-    ) : null
-  ] }) });
+    )
+  ] });
 };
 var PageEditorRoute = ({ config, backButton }) => {
   const { pageKey } = useParams();
   const history = useHistory();
   const location = useLocation();
-  const { baseURL, projectKey, businessUnitKey, jwtToken } = usePuckApiContext();
+  const { baseURL, projectKey, businessUnitKey, jwtToken, locale } = usePuckApiContext();
   const pageName = location.state?.pageName ?? pageKey ?? "Page";
+  const [isDirty, setIsDirty] = useState(false);
+  const [pendingNav, setPendingNav] = useState(null);
+  const guardedNavigate = useCallback(
+    (navFn) => {
+      if (isDirty) {
+        setPendingNav(() => navFn);
+      } else {
+        navFn();
+      }
+    },
+    [isDirty]
+  );
   return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", height: "100%" }, children: [
     /* @__PURE__ */ jsxs("div", { style: NAV_BAR_STYLE, children: [
       backButton,
-      backButton && /* @__PURE__ */ jsx2(Text.Body, { tone: "secondary", children: "/" }),
-      /* @__PURE__ */ jsx2(
-        FlatButton,
+      backButton && /* @__PURE__ */ jsx3(Text, { color: "neutral.11", children: "/" }),
+      /* @__PURE__ */ jsxs(
+        Button,
         {
-          label: "Pages",
-          icon: /* @__PURE__ */ jsx2(AngleLeftIcon, {}),
-          iconPosition: "left",
-          onClick: () => history.push("/")
+          variant: "ghost",
+          onPress: () => guardedNavigate(() => history.push("/")),
+          children: [
+            /* @__PURE__ */ jsx3(Icon, { as: ChevronLeft }),
+            " Pages"
+          ]
         }
       ),
-      /* @__PURE__ */ jsx2(Text.Body, { tone: "secondary", children: "/" }),
-      /* @__PURE__ */ jsx2(Text.Body, { isBold: true, children: pageName })
+      /* @__PURE__ */ jsx3(Text, { color: "neutral.11", children: "/" }),
+      /* @__PURE__ */ jsx3(Text, { fontWeight: "bold", children: pageName })
     ] }),
-    /* @__PURE__ */ jsx2("div", { style: { flex: 1, overflow: "hidden" }, children: /* @__PURE__ */ jsx2(
-      PuckEditor,
-      {
-        baseURL,
-        projectKey,
-        businessUnitKey,
-        jwtToken: jwtToken ?? "",
-        pageKey,
-        config,
-        onError: (err) => {
-          console.error("[PageManager] editor error:", err);
+    /* @__PURE__ */ jsxs("div", { className: "puck-editor-fill", style: { flex: 1, overflow: "hidden" }, children: [
+      /* @__PURE__ */ jsx3(
+        PuckEditor,
+        {
+          baseURL,
+          projectKey,
+          businessUnitKey,
+          jwtToken: jwtToken ?? "",
+          locale,
+          pageKey,
+          config,
+          onDirtyChange: setIsDirty,
+          onPreview: () => guardedNavigate(
+            () => history.push(`/${pageKey}/preview`, { pageName })
+          ),
+          onError: (err) => {
+            console.error("[PageManager] editor error:", err);
+          }
         }
+      ),
+      /* @__PURE__ */ jsx3(PropertiesResizer, {})
+    ] }),
+    /* @__PURE__ */ jsx3(
+      UnsavedChangesDialog,
+      {
+        isOpen: pendingNav !== null,
+        onOpenChange: (open) => {
+          if (!open) setPendingNav(null);
+        },
+        onConfirm: () => pendingNav?.()
       }
-    ) })
+    )
   ] });
 };
 var PagePreviewRoute = ({ config, backButton }) => {
@@ -343,53 +493,36 @@ var PagePreviewRoute = ({ config, backButton }) => {
   return /* @__PURE__ */ jsxs("div", { children: [
     /* @__PURE__ */ jsxs("div", { style: NAV_BAR_STYLE, children: [
       backButton,
-      backButton && /* @__PURE__ */ jsx2(Text.Body, { tone: "secondary", children: "/" }),
-      /* @__PURE__ */ jsx2(
-        FlatButton,
-        {
-          label: "Pages",
-          icon: /* @__PURE__ */ jsx2(AngleLeftIcon, {}),
-          iconPosition: "left",
-          onClick: () => history.push("/")
-        }
-      ),
-      /* @__PURE__ */ jsx2(Text.Body, { tone: "secondary", children: "/" }),
-      /* @__PURE__ */ jsx2(Text.Body, { isBold: true, children: pageName }),
-      /* @__PURE__ */ jsx2(
-        "span",
-        {
-          style: {
-            background: "var(--color-primary-95)",
-            color: "var(--color-primary-25)",
-            border: "1px solid var(--color-primary-85)",
-            display: "inline-flex",
-            alignItems: "center",
-            padding: "2px 10px",
-            borderRadius: "var(--border-radius-20)",
-            fontSize: "var(--font-size-10)",
-            fontWeight: "var(--font-weight-600)"
-          },
-          children: "Preview"
-        }
-      )
+      backButton && /* @__PURE__ */ jsx3(Text, { color: "neutral.11", children: "/" }),
+      /* @__PURE__ */ jsxs(Button, { variant: "ghost", onPress: () => history.push("/"), children: [
+        /* @__PURE__ */ jsx3(Icon, { as: ChevronLeft }),
+        " Pages"
+      ] }),
+      /* @__PURE__ */ jsx3(Text, { color: "neutral.11", children: "/" }),
+      /* @__PURE__ */ jsx3(Text, { fontWeight: "bold", children: pageName }),
+      /* @__PURE__ */ jsx3(Badge, { colorPalette: "primary", size: "xs", children: "Preview" }),
+      /* @__PURE__ */ jsx3("div", { style: { marginLeft: "auto" }, children: /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "xs", onPress: () => history.goBack(), children: [
+        /* @__PURE__ */ jsx3(Icon, { as: Close }),
+        " Close preview"
+      ] }) })
     ] }),
-    /* @__PURE__ */ jsx2(PuckRenderer, { pageKey, mode: "preview", config })
+    /* @__PURE__ */ jsx3(PuckRenderer, { pageKey, mode: "preview", config })
   ] });
 };
 var PageManagerInner = ({ config, backButton }) => /* @__PURE__ */ jsxs(Switch, { children: [
-  /* @__PURE__ */ jsx2(Route, { exact: true, path: "/", render: () => /* @__PURE__ */ jsx2(PageList, { backButton }) }),
-  /* @__PURE__ */ jsx2(
+  /* @__PURE__ */ jsx3(Route, { exact: true, path: "/", render: () => /* @__PURE__ */ jsx3(PageList, { backButton }) }),
+  /* @__PURE__ */ jsx3(
     Route,
     {
       path: "/:pageKey/edit",
-      render: () => /* @__PURE__ */ jsx2(PageEditorRoute, { config, backButton })
+      render: () => /* @__PURE__ */ jsx3(PageEditorRoute, { config, backButton })
     }
   ),
-  /* @__PURE__ */ jsx2(
+  /* @__PURE__ */ jsx3(
     Route,
     {
       path: "/:pageKey/preview",
-      render: () => /* @__PURE__ */ jsx2(PagePreviewRoute, { config, backButton })
+      render: () => /* @__PURE__ */ jsx3(PagePreviewRoute, { config, backButton })
     }
   )
 ] });
@@ -399,18 +532,20 @@ var PageManager = ({
   projectKey,
   businessUnitKey,
   jwtToken,
+  locale,
   config = DEFAULT_CONFIG,
   backButton
-}) => /* @__PURE__ */ jsx2(EnsureIntlProvider, { children: /* @__PURE__ */ jsx2(
+}) => /* @__PURE__ */ jsx3(EnsureNimbusProvider, { locale, children: /* @__PURE__ */ jsx3(EnsureIntlProvider, { children: /* @__PURE__ */ jsx3(
   PuckApiProvider,
   {
     baseURL,
     projectKey,
     businessUnitKey,
     jwtToken,
-    children: /* @__PURE__ */ jsx2(BrowserRouter, { basename: parentUrl, children: /* @__PURE__ */ jsx2(PageManagerInner, { config, backButton }) })
+    locale,
+    children: /* @__PURE__ */ jsx3(BrowserRouter, { basename: parentUrl, children: /* @__PURE__ */ jsx3(PageManagerInner, { config, backButton }) })
   }
-) });
+) }) });
 export {
   PageManager
 };