@commercetools-demo/puck-page-manager 0.1.0

package/dist/index.d.mts

@@ -0,0 +1,18 @@
+import React, { ReactNode } from 'react';
+import { Config } from '@measured/puck';
+
+interface PageManagerProps {
+    /** URL path where this manager is mounted, e.g. "/pages" — used as router basename */
+    parentUrl: string;
+    baseURL: string;
+    projectKey: string;
+    businessUnitKey: string;
+    jwtToken: string;
+    /** Puck component config — passed to editor and preview */
+    config: Config;
+    /** Optional element rendered before the breadcrumb in editor/preview headers */
+    backButton?: ReactNode;
+}
+declare const PageManager: React.FC<PageManagerProps>;
+
+export { PageManager, type PageManagerProps };

package/dist/index.d.ts

@@ -0,0 +1,18 @@
+import React, { ReactNode } from 'react';
+import { Config } from '@measured/puck';
+
+interface PageManagerProps {
+    /** URL path where this manager is mounted, e.g. "/pages" — used as router basename */
+    parentUrl: string;
+    baseURL: string;
+    projectKey: string;
+    businessUnitKey: string;
+    jwtToken: string;
+    /** Puck component config — passed to editor and preview */
+    config: Config;
+    /** Optional element rendered before the breadcrumb in editor/preview headers */
+    backButton?: ReactNode;
+}
+declare const PageManager: React.FC<PageManagerProps>;
+
+export { PageManager, type PageManagerProps };

package/dist/index.js

@@ -0,0 +1,413 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  PageManager: () => PageManager
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/PageManager.tsx
+var import_react = require("react");
+var import_react_router_dom = require("react-router-dom");
+var import_puck_api = require("@commercetools-demo/puck-api");
+var import_puck_editor = require("@commercetools-demo/puck-editor");
+var import_puck_renderer = require("@commercetools-demo/puck-renderer");
+var import_data_table = __toESM(require("@commercetools-uikit/data-table"));
+var import_primary_button = __toESM(require("@commercetools-uikit/primary-button"));
+var import_secondary_button = __toESM(require("@commercetools-uikit/secondary-button"));
+var import_flat_button = __toESM(require("@commercetools-uikit/flat-button"));
+var import_card = __toESM(require("@commercetools-uikit/card"));
+var import_spacings = __toESM(require("@commercetools-uikit/spacings"));
+var import_text = __toESM(require("@commercetools-uikit/text"));
+var import_loading_spinner = __toESM(require("@commercetools-uikit/loading-spinner"));
+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_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 NAV_BAR_STYLE = {
+  position: "sticky",
+  top: 0,
+  display: "flex",
+  alignItems: "center",
+  gap: "12px",
+  padding: "8px 16px",
+  background: "var(--color-surface, #fff)",
+  borderBottom: "1px solid var(--color-neutral-90)",
+  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 navigate = (0, import_react_router_dom.useNavigate)();
+  const { pages, loading, error, createPage, deletePage, refresh } = (0, import_puck_api.usePuckPages)();
+  const [creating, setCreating] = (0, import_react.useState)(false);
+  const [newName, setNewName] = (0, import_react.useState)("");
+  const [newSlug, setNewSlug] = (0, import_react.useState)("");
+  const [formError, setFormError] = (0, import_react.useState)("");
+  const [submitting, setSubmitting] = (0, import_react.useState)(false);
+  const [deleting, setDeleting] = (0, import_react.useState)(null);
+  const handleCreate = async () => {
+    if (!newName.trim()) {
+      setFormError("Name is required");
+      return;
+    }
+    if (!newSlug.trim()) {
+      setFormError("Slug is required");
+      return;
+    }
+    setFormError("");
+    setSubmitting(true);
+    try {
+      const input = {
+        name: newName.trim(),
+        slug: newSlug.trim().startsWith("/") ? newSlug.trim() : `/${newSlug.trim()}`
+      };
+      const created = await createPage(input);
+      setCreating(false);
+      setNewName("");
+      setNewSlug("");
+      navigate(`/${created.key}/edit`, { state: { pageName: created.value.name } });
+    } catch (err) {
+      setFormError(err.message);
+    } finally {
+      setSubmitting(false);
+    }
+  };
+  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();
+    } finally {
+      setDeleting(null);
+    }
+  };
+  if (loading) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { padding: "64px", display: "flex", justifyContent: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_loading_spinner.default, {}) });
+  }
+  if (error) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { padding: "32px" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_text.default.Body, { tone: "negative", children: [
+      "Error: ",
+      error
+    ] }) });
+  }
+  const rows = pages.map((p) => ({ ...p, id: p.key }));
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { maxWidth: "1200px", margin: "0 auto", padding: "32px 24px" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_spacings.default.Stack, { scale: "l", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_spacings.default.Inline, { justifyContent: "space-between", alignItems: "center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_spacings.default.Inline, { scale: "m", alignItems: "center", children: [
+        backButton,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_text.default.Headline, { as: "h1", children: "Puck Pages" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_primary_button.default,
+        {
+          label: "New Page",
+          iconLeft: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.PlusThinIcon, {}),
+          onClick: () => setCreating(true)
+        }
+      )
+    ] }),
+    creating && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_card.default, { insetScale: "l", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_spacings.default.Stack, { scale: "m", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_text.default.Subheadline, { as: "h4", isBold: true, children: "Create New Page" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_spacings.default.Inline, { scale: "m", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { flex: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_spacings.default.Stack, { scale: "xs", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_label.default, { htmlFor: "new-page-name", children: "Name *" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_text_input.default,
+            {
+              id: "new-page-name",
+              value: newName,
+              onChange: (e) => setNewName(e.target.value),
+              placeholder: "Home Page"
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { flex: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_spacings.default.Stack, { scale: "xs", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_label.default, { htmlFor: "new-page-slug", children: "Slug *" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_text_input.default,
+            {
+              id: "new-page-slug",
+              value: newSlug,
+              onChange: (e) => setNewSlug(e.target.value),
+              placeholder: "/home"
+            }
+          )
+        ] }) })
+      ] }),
+      formError && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_text.default.Body, { tone: "negative", children: formError }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_spacings.default.Inline, { scale: "s", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_primary_button.default,
+          {
+            label: submitting ? "Creating\u2026" : "Create",
+            onClick: () => void handleCreate(),
+            isDisabled: submitting
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_secondary_button.default,
+          {
+            label: "Cancel",
+            onClick: () => {
+              setCreating(false);
+              setFormError("");
+            }
+          }
+        )
+      ] })
+    ] }) }),
+    pages.length === 0 && !creating ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_spacings.default.Stack, { scale: "m", alignItems: "center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_text.default.Body, { tone: "secondary", children: "No pages yet." }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_primary_button.default,
+        {
+          label: "Create first page",
+          iconLeft: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.PlusThinIcon, {}),
+          onClick: () => setCreating(true)
+        }
+      )
+    ] }) : pages.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_data_table.default,
+      {
+        columns: COLUMNS,
+        rows,
+        itemRenderer: (row, column) => {
+          switch (column.key) {
+            case "name":
+              return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_spacings.default.Stack, { scale: "xs", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_text.default.Body, { isBold: true, children: row.value.name }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_text.default.Detail, { tone: "secondary", children: row.key })
+              ] });
+            case "slug":
+              return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "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__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
+                row.states.draft && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StatusBadge, { variant: "draft" }),
+                row.states.published && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StatusBadge, { variant: "published" }),
+                !row.states.draft && !row.states.published && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StatusBadge, { variant: "none" })
+              ] });
+            case "updatedAt":
+              return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_text.default.Body, { tone: "secondary", children: new Date(row.value.updatedAt).toLocaleString() });
+            case "actions":
+              return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_primary_button.default,
+                  {
+                    label: "Edit",
+                    size: "20",
+                    onClick: () => navigate(`/${row.key}/edit`, { state: { pageName: row.value.name } })
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_secondary_button.default,
+                  {
+                    label: "Preview",
+                    size: "20",
+                    onClick: () => navigate(`/${row.key}/preview`, { state: { pageName: row.value.name } })
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_flat_button.default,
+                  {
+                    tone: "critical",
+                    label: deleting === row.key ? "\u2026" : "Delete",
+                    isDisabled: deleting === row.key,
+                    onClick: () => void handleDelete(row)
+                  }
+                )
+              ] });
+            default:
+              return null;
+          }
+        }
+      }
+    ) : null
+  ] }) });
+};
+var PageEditorRoute = ({ config, backButton }) => {
+  const { pageKey } = (0, import_react_router_dom.useParams)();
+  const navigate = (0, import_react_router_dom.useNavigate)();
+  const location = (0, import_react_router_dom.useLocation)();
+  const { baseURL, projectKey, businessUnitKey, jwtToken } = (0, import_puck_api.usePuckApiContext)();
+  const pageName = location.state?.pageName ?? pageKey ?? "Page";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", flexDirection: "column", height: "100%" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: NAV_BAR_STYLE, children: [
+      backButton,
+      backButton && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_text.default.Body, { tone: "secondary", children: "/" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_flat_button.default,
+        {
+          label: "Pages",
+          icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.AngleLeftIcon, {}),
+          iconPosition: "left",
+          onClick: () => navigate("/")
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_text.default.Body, { tone: "secondary", children: "/" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_text.default.Body, { isBold: true, children: pageName })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { flex: 1, overflow: "hidden" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_puck_editor.PuckEditor,
+      {
+        baseURL,
+        projectKey,
+        businessUnitKey,
+        jwtToken: jwtToken ?? "",
+        pageKey,
+        config,
+        onError: (err) => {
+          console.error("[PageManager] editor error:", err);
+        }
+      }
+    ) })
+  ] });
+};
+var PagePreviewRoute = ({ config, backButton }) => {
+  const { pageKey } = (0, import_react_router_dom.useParams)();
+  const navigate = (0, import_react_router_dom.useNavigate)();
+  const location = (0, import_react_router_dom.useLocation)();
+  const pageName = location.state?.pageName ?? pageKey ?? "Page";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: NAV_BAR_STYLE, children: [
+      backButton,
+      backButton && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_text.default.Body, { tone: "secondary", children: "/" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_flat_button.default,
+        {
+          label: "Pages",
+          icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.AngleLeftIcon, {}),
+          iconPosition: "left",
+          onClick: () => navigate("/")
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_text.default.Body, { tone: "secondary", children: "/" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_text.default.Body, { isBold: true, children: pageName }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "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"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_puck_renderer.PuckRenderer, { pageKey, mode: "preview", config })
+  ] });
+};
+var PageManagerInner = ({ config, backButton }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_router_dom.Routes, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_router_dom.Route, { path: "/", element: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PageList, { backButton }) }),
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_react_router_dom.Route,
+    {
+      path: "/:pageKey/edit",
+      element: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PageEditorRoute, { config, backButton })
+    }
+  ),
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_react_router_dom.Route,
+    {
+      path: "/:pageKey/preview",
+      element: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PagePreviewRoute, { config, backButton })
+    }
+  )
+] });
+var PageManager = ({
+  parentUrl,
+  baseURL,
+  projectKey,
+  businessUnitKey,
+  jwtToken,
+  config,
+  backButton
+}) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  import_puck_api.PuckApiProvider,
+  {
+    baseURL,
+    projectKey,
+    businessUnitKey,
+    jwtToken,
+    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_router_dom.BrowserRouter, { basename: parentUrl, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PageManagerInner, { config, backButton }) })
+  }
+);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PageManager
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/PageManager.tsx"],"sourcesContent":["export { PageManager } from './PageManager';\nexport type { PageManagerProps } from './PageManager';\n","import React, { useState, type ReactNode } from 'react';\nimport {\n  BrowserRouter,\n  Routes,\n  Route,\n  useNavigate,\n  useParams,\n  useLocation,\n} from 'react-router-dom';\nimport {\n  PuckApiProvider,\n  usePuckPages,\n  usePuckApiContext,\n} from '@commercetools-demo/puck-api';\nimport { PuckEditor } from '@commercetools-demo/puck-editor';\nimport { PuckRenderer } from '@commercetools-demo/puck-renderer';\nimport type { Config } from '@measured/puck';\nimport type { CreatePuckPageInput, PuckPageListItem } from '@commercetools-demo/puck-types';\nimport DataTable from '@commercetools-uikit/data-table';\nimport PrimaryButton from '@commercetools-uikit/primary-button';\nimport SecondaryButton from '@commercetools-uikit/secondary-button';\nimport FlatButton from '@commercetools-uikit/flat-button';\nimport Card from '@commercetools-uikit/card';\nimport Spacings from '@commercetools-uikit/spacings';\nimport Text from '@commercetools-uikit/text';\nimport LoadingSpinner from '@commercetools-uikit/loading-spinner';\nimport TextInput from '@commercetools-uikit/text-input';\nimport Label from '@commercetools-uikit/label';\nimport { PlusThinIcon, AngleLeftIcon } from '@commercetools-uikit/icons';\n\n// ---------------------------------------------------------------------------\n// Status badge\n// ---------------------------------------------------------------------------\n\nconst StatusBadge: React.FC<{ variant: 'draft' | 'published' | 'none' }> = ({ variant }) => {\n  const styles: React.CSSProperties =\n    variant === 'published'\n      ? { background: 'var(--color-success-95)', color: 'var(--color-success-40)', border: '1px solid var(--color-success-85)' }\n      : variant === 'draft'\n        ? { background: 'var(--color-warning-95)', color: 'var(--color-warning-40)', border: '1px solid var(--color-warning-85)' }\n        : { background: 'var(--color-neutral-95)', color: 'var(--color-neutral-50)', border: '1px solid var(--color-neutral-85)' };\n  return (\n    <span\n      style={{\n        ...styles,\n        display: 'inline-flex',\n        alignItems: 'center',\n        padding: '2px 8px',\n        borderRadius: 'var(--border-radius-20)',\n        fontSize: 'var(--font-size-10)',\n        fontWeight: 'var(--font-weight-600)',\n        marginRight: '4px',\n        whiteSpace: 'nowrap',\n      }}\n    >\n      {variant === 'published' ? 'Published' : variant === 'draft' ? 'Draft' : 'No state'}\n    </span>\n  );\n};\n\n// ---------------------------------------------------------------------------\n// Shared nav bar style\n// ---------------------------------------------------------------------------\n\nconst NAV_BAR_STYLE: React.CSSProperties = {\n  position: 'sticky',\n  top: 0,\n  display: 'flex',\n  alignItems: 'center',\n  gap: '12px',\n  padding: '8px 16px',\n  background: 'var(--color-surface, #fff)',\n  borderBottom: '1px solid var(--color-neutral-90)',\n  zIndex: 200,\n  flexShrink: 0,\n};\n\n// ---------------------------------------------------------------------------\n// Table columns\n// ---------------------------------------------------------------------------\n\ntype PageRow = PuckPageListItem & { id: string };\n\nconst COLUMNS = [\n  { key: 'name', label: 'Name' },\n  { key: 'slug', label: 'Slug' },\n  { key: 'status', label: 'Status' },\n  { key: 'updatedAt', label: 'Updated' },\n  { key: 'actions', label: 'Actions', shouldIgnoreRowClick: true },\n];\n\n// ---------------------------------------------------------------------------\n// PageList route\n// ---------------------------------------------------------------------------\n\ninterface PageListProps {\n  backButton?: ReactNode;\n}\n\nconst PageList: React.FC<PageListProps> = ({ backButton }) => {\n  const navigate = useNavigate();\n  const { pages, loading, error, createPage, deletePage, refresh } = usePuckPages();\n\n  const [creating, setCreating] = useState(false);\n  const [newName, setNewName] = useState('');\n  const [newSlug, setNewSlug] = useState('');\n  const [formError, setFormError] = useState('');\n  const [submitting, setSubmitting] = useState(false);\n  const [deleting, setDeleting] = useState<string | null>(null);\n\n  const handleCreate = async () => {\n    if (!newName.trim()) { setFormError('Name is required'); return; }\n    if (!newSlug.trim()) { setFormError('Slug is required'); return; }\n    setFormError('');\n    setSubmitting(true);\n    try {\n      const input: CreatePuckPageInput = {\n        name: newName.trim(),\n        slug: newSlug.trim().startsWith('/') ? newSlug.trim() : `/${newSlug.trim()}`,\n      };\n      const created = await createPage(input);\n      setCreating(false);\n      setNewName('');\n      setNewSlug('');\n      navigate(`/${created.key}/edit`, { state: { pageName: created.value.name } });\n    } catch (err) {\n      setFormError((err as Error).message);\n    } finally {\n      setSubmitting(false);\n    }\n  };\n\n  const handleDelete = async (page: PuckPageListItem) => {\n    if (!confirm(`Delete \"${page.value.name}\"? This cannot be undone.`)) return;\n    setDeleting(page.key);\n    try {\n      await deletePage(page.key);\n      await refresh();\n    } finally {\n      setDeleting(null);\n    }\n  };\n\n  if (loading) {\n    return (\n      <div style={{ padding: '64px', display: 'flex', justifyContent: 'center' }}>\n        <LoadingSpinner />\n      </div>\n    );\n  }\n\n  if (error) {\n    return (\n      <div style={{ padding: '32px' }}>\n        <Text.Body tone=\"negative\">Error: {error}</Text.Body>\n      </div>\n    );\n  }\n\n  const rows: PageRow[] = pages.map((p) => ({ ...p, id: p.key }));\n\n  return (\n    <div style={{ maxWidth: '1200px', margin: '0 auto', padding: '32px 24px' }}>\n      <Spacings.Stack scale=\"l\">\n        <Spacings.Inline justifyContent=\"space-between\" alignItems=\"center\">\n          <Spacings.Inline scale=\"m\" alignItems=\"center\">\n            {backButton}\n            <Text.Headline as=\"h1\">Puck Pages</Text.Headline>\n          </Spacings.Inline>\n          <PrimaryButton\n            label=\"New Page\"\n            iconLeft={<PlusThinIcon />}\n            onClick={() => setCreating(true)}\n          />\n        </Spacings.Inline>\n\n        {creating && (\n          <Card insetScale=\"l\">\n            <Spacings.Stack scale=\"m\">\n              <Text.Subheadline as=\"h4\" isBold>Create New Page</Text.Subheadline>\n              <Spacings.Inline scale=\"m\">\n                <div style={{ flex: 1 }}>\n                  <Spacings.Stack scale=\"xs\">\n                    <Label htmlFor=\"new-page-name\">Name *</Label>\n                    <TextInput\n                      id=\"new-page-name\"\n                      value={newName}\n                      onChange={(e) => setNewName(e.target.value)}\n                      placeholder=\"Home Page\"\n                    />\n                  </Spacings.Stack>\n                </div>\n                <div style={{ flex: 1 }}>\n                  <Spacings.Stack scale=\"xs\">\n                    <Label htmlFor=\"new-page-slug\">Slug *</Label>\n                    <TextInput\n                      id=\"new-page-slug\"\n                      value={newSlug}\n                      onChange={(e) => setNewSlug(e.target.value)}\n                      placeholder=\"/home\"\n                    />\n                  </Spacings.Stack>\n                </div>\n              </Spacings.Inline>\n              {formError && <Text.Body tone=\"negative\">{formError}</Text.Body>}\n              <Spacings.Inline scale=\"s\">\n                <PrimaryButton\n                  label={submitting ? 'Creating…' : 'Create'}\n                  onClick={() => void handleCreate()}\n                  isDisabled={submitting}\n                />\n                <SecondaryButton\n                  label=\"Cancel\"\n                  onClick={() => { setCreating(false); setFormError(''); }}\n                />\n              </Spacings.Inline>\n            </Spacings.Stack>\n          </Card>\n        )}\n\n        {pages.length === 0 && !creating ? (\n          <Spacings.Stack scale=\"m\" alignItems=\"center\">\n            <Text.Body tone=\"secondary\">No pages yet.</Text.Body>\n            <PrimaryButton\n              label=\"Create first page\"\n              iconLeft={<PlusThinIcon />}\n              onClick={() => setCreating(true)}\n            />\n          </Spacings.Stack>\n        ) : pages.length > 0 ? (\n          <DataTable\n            columns={COLUMNS}\n            rows={rows}\n            itemRenderer={(row: PageRow, column) => {\n              switch (column.key) {\n                case 'name':\n                  return (\n                    <Spacings.Stack scale=\"xs\">\n                      <Text.Body isBold>{row.value.name}</Text.Body>\n                      <Text.Detail tone=\"secondary\">{row.key}</Text.Detail>\n                    </Spacings.Stack>\n                  );\n                case 'slug':\n                  return (\n                    <code\n                      style={{\n                        background: 'var(--color-neutral-95)',\n                        padding: '2px 6px',\n                        borderRadius: 'var(--border-radius-4)',\n                        fontSize: 'var(--font-size-10)',\n                        fontFamily: 'monospace',\n                      }}\n                    >\n                      {row.value.slug}\n                    </code>\n                  );\n                case 'status':\n                  return (\n                    <span>\n                      {row.states.draft && <StatusBadge variant=\"draft\" />}\n                      {row.states.published && <StatusBadge variant=\"published\" />}\n                      {!row.states.draft && !row.states.published && <StatusBadge variant=\"none\" />}\n                    </span>\n                  );\n                case 'updatedAt':\n                  return (\n                    <Text.Body tone=\"secondary\">\n                      {new Date(row.value.updatedAt).toLocaleString()}\n                    </Text.Body>\n                  );\n                case 'actions':\n                  return (\n                    <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>\n                      <PrimaryButton\n                        label=\"Edit\"\n                        size=\"20\"\n                        onClick={() =>\n                          navigate(`/${row.key}/edit`, { state: { pageName: row.value.name } })\n                        }\n                      />\n                      <SecondaryButton\n                        label=\"Preview\"\n                        size=\"20\"\n                        onClick={() =>\n                          navigate(`/${row.key}/preview`, { state: { pageName: row.value.name } })\n                        }\n                      />\n                      <FlatButton\n                        tone=\"critical\"\n                        label={deleting === row.key ? '…' : 'Delete'}\n                        isDisabled={deleting === row.key}\n                        onClick={() => void handleDelete(row)}\n                      />\n                    </div>\n                  );\n                default:\n                  return null;\n              }\n            }}\n          />\n        ) : null}\n      </Spacings.Stack>\n    </div>\n  );\n};\n\n// ---------------------------------------------------------------------------\n// PageEditorRoute\n// ---------------------------------------------------------------------------\n\ninterface RouteProps {\n  config: Config;\n  backButton?: ReactNode;\n}\n\nconst PageEditorRoute: React.FC<RouteProps> = ({ config, backButton }) => {\n  const { pageKey } = useParams<{ pageKey: string }>();\n  const navigate = useNavigate();\n  const location = useLocation();\n  const { baseURL, projectKey, businessUnitKey, jwtToken } = usePuckApiContext();\n  const pageName =\n    (location.state as { pageName?: string } | null)?.pageName ?? pageKey ?? 'Page';\n\n  return (\n    <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>\n      <div style={NAV_BAR_STYLE}>\n        {backButton}\n        {backButton && <Text.Body tone=\"secondary\">/</Text.Body>}\n        <FlatButton\n          label=\"Pages\"\n          icon={<AngleLeftIcon />}\n          iconPosition=\"left\"\n          onClick={() => navigate('/')}\n        />\n        <Text.Body tone=\"secondary\">/</Text.Body>\n        <Text.Body isBold>{pageName}</Text.Body>\n      </div>\n      <div style={{ flex: 1, overflow: 'hidden' }}>\n        <PuckEditor\n          baseURL={baseURL}\n          projectKey={projectKey}\n          businessUnitKey={businessUnitKey}\n          jwtToken={jwtToken ?? ''}\n          pageKey={pageKey!}\n          config={config}\n          onError={(err: Error) => { console.error('[PageManager] editor error:', err); }}\n        />\n      </div>\n    </div>\n  );\n};\n\n// ---------------------------------------------------------------------------\n// PagePreviewRoute\n// ---------------------------------------------------------------------------\n\nconst PagePreviewRoute: React.FC<RouteProps> = ({ config, backButton }) => {\n  const { pageKey } = useParams<{ pageKey: string }>();\n  const navigate = useNavigate();\n  const location = useLocation();\n  const pageName =\n    (location.state as { pageName?: string } | null)?.pageName ?? pageKey ?? 'Page';\n\n  return (\n    <div>\n      <div style={NAV_BAR_STYLE}>\n        {backButton}\n        {backButton && <Text.Body tone=\"secondary\">/</Text.Body>}\n        <FlatButton\n          label=\"Pages\"\n          icon={<AngleLeftIcon />}\n          iconPosition=\"left\"\n          onClick={() => navigate('/')}\n        />\n        <Text.Body tone=\"secondary\">/</Text.Body>\n        <Text.Body isBold>{pageName}</Text.Body>\n        <span\n          style={{\n            background: 'var(--color-primary-95)',\n            color: 'var(--color-primary-25)',\n            border: '1px solid var(--color-primary-85)',\n            display: 'inline-flex',\n            alignItems: 'center',\n            padding: '2px 10px',\n            borderRadius: 'var(--border-radius-20)',\n            fontSize: 'var(--font-size-10)',\n            fontWeight: 'var(--font-weight-600)',\n          }}\n        >\n          Preview\n        </span>\n      </div>\n      <PuckRenderer pageKey={pageKey} mode=\"preview\" config={config} />\n    </div>\n  );\n};\n\n// ---------------------------------------------------------------------------\n// Inner router component\n// ---------------------------------------------------------------------------\n\ninterface PageManagerInnerProps {\n  config: Config;\n  backButton?: ReactNode;\n}\n\nconst PageManagerInner: React.FC<PageManagerInnerProps> = ({ config, backButton }) => (\n  <Routes>\n    <Route path=\"/\" element={<PageList backButton={backButton} />} />\n    <Route\n      path=\"/:pageKey/edit\"\n      element={<PageEditorRoute config={config} backButton={backButton} />}\n    />\n    <Route\n      path=\"/:pageKey/preview\"\n      element={<PagePreviewRoute config={config} backButton={backButton} />}\n    />\n  </Routes>\n);\n\n// ---------------------------------------------------------------------------\n// Public component\n// ---------------------------------------------------------------------------\n\nexport interface PageManagerProps {\n  /** URL path where this manager is mounted, e.g. \"/pages\" — used as router basename */\n  parentUrl: string;\n  baseURL: string;\n  projectKey: string;\n  businessUnitKey: string;\n  jwtToken: string;\n  /** Puck component config — passed to editor and preview */\n  config: Config;\n  /** Optional element rendered before the breadcrumb in editor/preview headers */\n  backButton?: ReactNode;\n}\n\nexport const PageManager: React.FC<PageManagerProps> = ({\n  parentUrl,\n  baseURL,\n  projectKey,\n  businessUnitKey,\n  jwtToken,\n  config,\n  backButton,\n}) => (\n  <PuckApiProvider\n    baseURL={baseURL}\n    projectKey={projectKey}\n    businessUnitKey={businessUnitKey}\n    jwtToken={jwtToken}\n  >\n    <BrowserRouter basename={parentUrl}>\n      <PageManagerInner config={config} backButton={backButton} />\n    </BrowserRouter>\n  </PuckApiProvider>\n);\n"],"mappings":"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","names":["LoadingSpinner","Text","Spacings","PrimaryButton","Card","Label","TextInput","SecondaryButton","DataTable","FlatButton"]}

package/dist/index.mjs

@@ -0,0 +1,387 @@
+// src/PageManager.tsx
+import { useState } from "react";
+import {
+  BrowserRouter,
+  Routes,
+  Route,
+  useNavigate,
+  useParams,
+  useLocation
+} from "react-router-dom";
+import {
+  PuckApiProvider,
+  usePuckPages,
+  usePuckApiContext
+} from "@commercetools-demo/puck-api";
+import { PuckEditor } from "@commercetools-demo/puck-editor";
+import { PuckRenderer } from "@commercetools-demo/puck-renderer";
+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, 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 NAV_BAR_STYLE = {
+  position: "sticky",
+  top: 0,
+  display: "flex",
+  alignItems: "center",
+  gap: "12px",
+  padding: "8px 16px",
+  background: "var(--color-surface, #fff)",
+  borderBottom: "1px solid var(--color-neutral-90)",
+  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 navigate = useNavigate();
+  const { pages, loading, error, createPage, deletePage, refresh } = usePuckPages();
+  const [creating, setCreating] = useState(false);
+  const [newName, setNewName] = useState("");
+  const [newSlug, setNewSlug] = useState("");
+  const [formError, setFormError] = useState("");
+  const [submitting, setSubmitting] = useState(false);
+  const [deleting, setDeleting] = useState(null);
+  const handleCreate = async () => {
+    if (!newName.trim()) {
+      setFormError("Name is required");
+      return;
+    }
+    if (!newSlug.trim()) {
+      setFormError("Slug is required");
+      return;
+    }
+    setFormError("");
+    setSubmitting(true);
+    try {
+      const input = {
+        name: newName.trim(),
+        slug: newSlug.trim().startsWith("/") ? newSlug.trim() : `/${newSlug.trim()}`
+      };
+      const created = await createPage(input);
+      setCreating(false);
+      setNewName("");
+      setNewSlug("");
+      navigate(`/${created.key}/edit`, { state: { pageName: created.value.name } });
+    } catch (err) {
+      setFormError(err.message);
+    } finally {
+      setSubmitting(false);
+    }
+  };
+  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();
+    } finally {
+      setDeleting(null);
+    }
+  };
+  if (loading) {
+    return /* @__PURE__ */ jsx("div", { style: { padding: "64px", display: "flex", justifyContent: "center" }, children: /* @__PURE__ */ jsx(LoadingSpinner, {}) });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsx("div", { style: { padding: "32px" }, children: /* @__PURE__ */ jsxs(Text.Body, { tone: "negative", children: [
+      "Error: ",
+      error
+    ] }) });
+  }
+  const rows = pages.map((p) => ({ ...p, id: p.key }));
+  return /* @__PURE__ */ jsx("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__ */ jsx(Text.Headline, { as: "h1", children: "Puck Pages" })
+      ] }),
+      /* @__PURE__ */ jsx(
+        PrimaryButton,
+        {
+          label: "New Page",
+          iconLeft: /* @__PURE__ */ jsx(PlusThinIcon, {}),
+          onClick: () => setCreating(true)
+        }
+      )
+    ] }),
+    creating && /* @__PURE__ */ jsx(Card, { insetScale: "l", children: /* @__PURE__ */ jsxs(Spacings.Stack, { scale: "m", children: [
+      /* @__PURE__ */ jsx(Text.Subheadline, { as: "h4", isBold: true, children: "Create New Page" }),
+      /* @__PURE__ */ jsxs(Spacings.Inline, { scale: "m", children: [
+        /* @__PURE__ */ jsx("div", { style: { flex: 1 }, children: /* @__PURE__ */ jsxs(Spacings.Stack, { scale: "xs", children: [
+          /* @__PURE__ */ jsx(Label, { htmlFor: "new-page-name", children: "Name *" }),
+          /* @__PURE__ */ jsx(
+            TextInput,
+            {
+              id: "new-page-name",
+              value: newName,
+              onChange: (e) => setNewName(e.target.value),
+              placeholder: "Home Page"
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ jsx("div", { style: { flex: 1 }, children: /* @__PURE__ */ jsxs(Spacings.Stack, { scale: "xs", children: [
+          /* @__PURE__ */ jsx(Label, { htmlFor: "new-page-slug", children: "Slug *" }),
+          /* @__PURE__ */ jsx(
+            TextInput,
+            {
+              id: "new-page-slug",
+              value: newSlug,
+              onChange: (e) => setNewSlug(e.target.value),
+              placeholder: "/home"
+            }
+          )
+        ] }) })
+      ] }),
+      formError && /* @__PURE__ */ jsx(Text.Body, { tone: "negative", children: formError }),
+      /* @__PURE__ */ jsxs(Spacings.Inline, { scale: "s", children: [
+        /* @__PURE__ */ jsx(
+          PrimaryButton,
+          {
+            label: submitting ? "Creating\u2026" : "Create",
+            onClick: () => void handleCreate(),
+            isDisabled: submitting
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          SecondaryButton,
+          {
+            label: "Cancel",
+            onClick: () => {
+              setCreating(false);
+              setFormError("");
+            }
+          }
+        )
+      ] })
+    ] }) }),
+    pages.length === 0 && !creating ? /* @__PURE__ */ jsxs(Spacings.Stack, { scale: "m", alignItems: "center", children: [
+      /* @__PURE__ */ jsx(Text.Body, { tone: "secondary", children: "No pages yet." }),
+      /* @__PURE__ */ jsx(
+        PrimaryButton,
+        {
+          label: "Create first page",
+          iconLeft: /* @__PURE__ */ jsx(PlusThinIcon, {}),
+          onClick: () => setCreating(true)
+        }
+      )
+    ] }) : pages.length > 0 ? /* @__PURE__ */ jsx(
+      DataTable,
+      {
+        columns: COLUMNS,
+        rows,
+        itemRenderer: (row, column) => {
+          switch (column.key) {
+            case "name":
+              return /* @__PURE__ */ jsxs(Spacings.Stack, { scale: "xs", children: [
+                /* @__PURE__ */ jsx(Text.Body, { isBold: true, children: row.value.name }),
+                /* @__PURE__ */ jsx(Text.Detail, { tone: "secondary", children: row.key })
+              ] });
+            case "slug":
+              return /* @__PURE__ */ jsx(
+                "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__ */ jsx(StatusBadge, { variant: "draft" }),
+                row.states.published && /* @__PURE__ */ jsx(StatusBadge, { variant: "published" }),
+                !row.states.draft && !row.states.published && /* @__PURE__ */ jsx(StatusBadge, { variant: "none" })
+              ] });
+            case "updatedAt":
+              return /* @__PURE__ */ jsx(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__ */ jsx(
+                  PrimaryButton,
+                  {
+                    label: "Edit",
+                    size: "20",
+                    onClick: () => navigate(`/${row.key}/edit`, { state: { pageName: row.value.name } })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  SecondaryButton,
+                  {
+                    label: "Preview",
+                    size: "20",
+                    onClick: () => navigate(`/${row.key}/preview`, { state: { pageName: row.value.name } })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  FlatButton,
+                  {
+                    tone: "critical",
+                    label: deleting === row.key ? "\u2026" : "Delete",
+                    isDisabled: deleting === row.key,
+                    onClick: () => void handleDelete(row)
+                  }
+                )
+              ] });
+            default:
+              return null;
+          }
+        }
+      }
+    ) : null
+  ] }) });
+};
+var PageEditorRoute = ({ config, backButton }) => {
+  const { pageKey } = useParams();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const { baseURL, projectKey, businessUnitKey, jwtToken } = usePuckApiContext();
+  const pageName = location.state?.pageName ?? pageKey ?? "Page";
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", height: "100%" }, children: [
+    /* @__PURE__ */ jsxs("div", { style: NAV_BAR_STYLE, children: [
+      backButton,
+      backButton && /* @__PURE__ */ jsx(Text.Body, { tone: "secondary", children: "/" }),
+      /* @__PURE__ */ jsx(
+        FlatButton,
+        {
+          label: "Pages",
+          icon: /* @__PURE__ */ jsx(AngleLeftIcon, {}),
+          iconPosition: "left",
+          onClick: () => navigate("/")
+        }
+      ),
+      /* @__PURE__ */ jsx(Text.Body, { tone: "secondary", children: "/" }),
+      /* @__PURE__ */ jsx(Text.Body, { isBold: true, children: pageName })
+    ] }),
+    /* @__PURE__ */ jsx("div", { style: { flex: 1, overflow: "hidden" }, children: /* @__PURE__ */ jsx(
+      PuckEditor,
+      {
+        baseURL,
+        projectKey,
+        businessUnitKey,
+        jwtToken: jwtToken ?? "",
+        pageKey,
+        config,
+        onError: (err) => {
+          console.error("[PageManager] editor error:", err);
+        }
+      }
+    ) })
+  ] });
+};
+var PagePreviewRoute = ({ config, backButton }) => {
+  const { pageKey } = useParams();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const pageName = location.state?.pageName ?? pageKey ?? "Page";
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs("div", { style: NAV_BAR_STYLE, children: [
+      backButton,
+      backButton && /* @__PURE__ */ jsx(Text.Body, { tone: "secondary", children: "/" }),
+      /* @__PURE__ */ jsx(
+        FlatButton,
+        {
+          label: "Pages",
+          icon: /* @__PURE__ */ jsx(AngleLeftIcon, {}),
+          iconPosition: "left",
+          onClick: () => navigate("/")
+        }
+      ),
+      /* @__PURE__ */ jsx(Text.Body, { tone: "secondary", children: "/" }),
+      /* @__PURE__ */ jsx(Text.Body, { isBold: true, children: pageName }),
+      /* @__PURE__ */ jsx(
+        "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"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(PuckRenderer, { pageKey, mode: "preview", config })
+  ] });
+};
+var PageManagerInner = ({ config, backButton }) => /* @__PURE__ */ jsxs(Routes, { children: [
+  /* @__PURE__ */ jsx(Route, { path: "/", element: /* @__PURE__ */ jsx(PageList, { backButton }) }),
+  /* @__PURE__ */ jsx(
+    Route,
+    {
+      path: "/:pageKey/edit",
+      element: /* @__PURE__ */ jsx(PageEditorRoute, { config, backButton })
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    Route,
+    {
+      path: "/:pageKey/preview",
+      element: /* @__PURE__ */ jsx(PagePreviewRoute, { config, backButton })
+    }
+  )
+] });
+var PageManager = ({
+  parentUrl,
+  baseURL,
+  projectKey,
+  businessUnitKey,
+  jwtToken,
+  config,
+  backButton
+}) => /* @__PURE__ */ jsx(
+  PuckApiProvider,
+  {
+    baseURL,
+    projectKey,
+    businessUnitKey,
+    jwtToken,
+    children: /* @__PURE__ */ jsx(BrowserRouter, { basename: parentUrl, children: /* @__PURE__ */ jsx(PageManagerInner, { config, backButton }) })
+  }
+);
+export {
+  PageManager
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/PageManager.tsx"],"sourcesContent":["import React, { useState, type ReactNode } from 'react';\nimport {\n  BrowserRouter,\n  Routes,\n  Route,\n  useNavigate,\n  useParams,\n  useLocation,\n} from 'react-router-dom';\nimport {\n  PuckApiProvider,\n  usePuckPages,\n  usePuckApiContext,\n} from '@commercetools-demo/puck-api';\nimport { PuckEditor } from '@commercetools-demo/puck-editor';\nimport { PuckRenderer } from '@commercetools-demo/puck-renderer';\nimport type { Config } from '@measured/puck';\nimport type { CreatePuckPageInput, PuckPageListItem } from '@commercetools-demo/puck-types';\nimport DataTable from '@commercetools-uikit/data-table';\nimport PrimaryButton from '@commercetools-uikit/primary-button';\nimport SecondaryButton from '@commercetools-uikit/secondary-button';\nimport FlatButton from '@commercetools-uikit/flat-button';\nimport Card from '@commercetools-uikit/card';\nimport Spacings from '@commercetools-uikit/spacings';\nimport Text from '@commercetools-uikit/text';\nimport LoadingSpinner from '@commercetools-uikit/loading-spinner';\nimport TextInput from '@commercetools-uikit/text-input';\nimport Label from '@commercetools-uikit/label';\nimport { PlusThinIcon, AngleLeftIcon } from '@commercetools-uikit/icons';\n\n// ---------------------------------------------------------------------------\n// Status badge\n// ---------------------------------------------------------------------------\n\nconst StatusBadge: React.FC<{ variant: 'draft' | 'published' | 'none' }> = ({ variant }) => {\n  const styles: React.CSSProperties =\n    variant === 'published'\n      ? { background: 'var(--color-success-95)', color: 'var(--color-success-40)', border: '1px solid var(--color-success-85)' }\n      : variant === 'draft'\n        ? { background: 'var(--color-warning-95)', color: 'var(--color-warning-40)', border: '1px solid var(--color-warning-85)' }\n        : { background: 'var(--color-neutral-95)', color: 'var(--color-neutral-50)', border: '1px solid var(--color-neutral-85)' };\n  return (\n    <span\n      style={{\n        ...styles,\n        display: 'inline-flex',\n        alignItems: 'center',\n        padding: '2px 8px',\n        borderRadius: 'var(--border-radius-20)',\n        fontSize: 'var(--font-size-10)',\n        fontWeight: 'var(--font-weight-600)',\n        marginRight: '4px',\n        whiteSpace: 'nowrap',\n      }}\n    >\n      {variant === 'published' ? 'Published' : variant === 'draft' ? 'Draft' : 'No state'}\n    </span>\n  );\n};\n\n// ---------------------------------------------------------------------------\n// Shared nav bar style\n// ---------------------------------------------------------------------------\n\nconst NAV_BAR_STYLE: React.CSSProperties = {\n  position: 'sticky',\n  top: 0,\n  display: 'flex',\n  alignItems: 'center',\n  gap: '12px',\n  padding: '8px 16px',\n  background: 'var(--color-surface, #fff)',\n  borderBottom: '1px solid var(--color-neutral-90)',\n  zIndex: 200,\n  flexShrink: 0,\n};\n\n// ---------------------------------------------------------------------------\n// Table columns\n// ---------------------------------------------------------------------------\n\ntype PageRow = PuckPageListItem & { id: string };\n\nconst COLUMNS = [\n  { key: 'name', label: 'Name' },\n  { key: 'slug', label: 'Slug' },\n  { key: 'status', label: 'Status' },\n  { key: 'updatedAt', label: 'Updated' },\n  { key: 'actions', label: 'Actions', shouldIgnoreRowClick: true },\n];\n\n// ---------------------------------------------------------------------------\n// PageList route\n// ---------------------------------------------------------------------------\n\ninterface PageListProps {\n  backButton?: ReactNode;\n}\n\nconst PageList: React.FC<PageListProps> = ({ backButton }) => {\n  const navigate = useNavigate();\n  const { pages, loading, error, createPage, deletePage, refresh } = usePuckPages();\n\n  const [creating, setCreating] = useState(false);\n  const [newName, setNewName] = useState('');\n  const [newSlug, setNewSlug] = useState('');\n  const [formError, setFormError] = useState('');\n  const [submitting, setSubmitting] = useState(false);\n  const [deleting, setDeleting] = useState<string | null>(null);\n\n  const handleCreate = async () => {\n    if (!newName.trim()) { setFormError('Name is required'); return; }\n    if (!newSlug.trim()) { setFormError('Slug is required'); return; }\n    setFormError('');\n    setSubmitting(true);\n    try {\n      const input: CreatePuckPageInput = {\n        name: newName.trim(),\n        slug: newSlug.trim().startsWith('/') ? newSlug.trim() : `/${newSlug.trim()}`,\n      };\n      const created = await createPage(input);\n      setCreating(false);\n      setNewName('');\n      setNewSlug('');\n      navigate(`/${created.key}/edit`, { state: { pageName: created.value.name } });\n    } catch (err) {\n      setFormError((err as Error).message);\n    } finally {\n      setSubmitting(false);\n    }\n  };\n\n  const handleDelete = async (page: PuckPageListItem) => {\n    if (!confirm(`Delete \"${page.value.name}\"? This cannot be undone.`)) return;\n    setDeleting(page.key);\n    try {\n      await deletePage(page.key);\n      await refresh();\n    } finally {\n      setDeleting(null);\n    }\n  };\n\n  if (loading) {\n    return (\n      <div style={{ padding: '64px', display: 'flex', justifyContent: 'center' }}>\n        <LoadingSpinner />\n      </div>\n    );\n  }\n\n  if (error) {\n    return (\n      <div style={{ padding: '32px' }}>\n        <Text.Body tone=\"negative\">Error: {error}</Text.Body>\n      </div>\n    );\n  }\n\n  const rows: PageRow[] = pages.map((p) => ({ ...p, id: p.key }));\n\n  return (\n    <div style={{ maxWidth: '1200px', margin: '0 auto', padding: '32px 24px' }}>\n      <Spacings.Stack scale=\"l\">\n        <Spacings.Inline justifyContent=\"space-between\" alignItems=\"center\">\n          <Spacings.Inline scale=\"m\" alignItems=\"center\">\n            {backButton}\n            <Text.Headline as=\"h1\">Puck Pages</Text.Headline>\n          </Spacings.Inline>\n          <PrimaryButton\n            label=\"New Page\"\n            iconLeft={<PlusThinIcon />}\n            onClick={() => setCreating(true)}\n          />\n        </Spacings.Inline>\n\n        {creating && (\n          <Card insetScale=\"l\">\n            <Spacings.Stack scale=\"m\">\n              <Text.Subheadline as=\"h4\" isBold>Create New Page</Text.Subheadline>\n              <Spacings.Inline scale=\"m\">\n                <div style={{ flex: 1 }}>\n                  <Spacings.Stack scale=\"xs\">\n                    <Label htmlFor=\"new-page-name\">Name *</Label>\n                    <TextInput\n                      id=\"new-page-name\"\n                      value={newName}\n                      onChange={(e) => setNewName(e.target.value)}\n                      placeholder=\"Home Page\"\n                    />\n                  </Spacings.Stack>\n                </div>\n                <div style={{ flex: 1 }}>\n                  <Spacings.Stack scale=\"xs\">\n                    <Label htmlFor=\"new-page-slug\">Slug *</Label>\n                    <TextInput\n                      id=\"new-page-slug\"\n                      value={newSlug}\n                      onChange={(e) => setNewSlug(e.target.value)}\n                      placeholder=\"/home\"\n                    />\n                  </Spacings.Stack>\n                </div>\n              </Spacings.Inline>\n              {formError && <Text.Body tone=\"negative\">{formError}</Text.Body>}\n              <Spacings.Inline scale=\"s\">\n                <PrimaryButton\n                  label={submitting ? 'Creating…' : 'Create'}\n                  onClick={() => void handleCreate()}\n                  isDisabled={submitting}\n                />\n                <SecondaryButton\n                  label=\"Cancel\"\n                  onClick={() => { setCreating(false); setFormError(''); }}\n                />\n              </Spacings.Inline>\n            </Spacings.Stack>\n          </Card>\n        )}\n\n        {pages.length === 0 && !creating ? (\n          <Spacings.Stack scale=\"m\" alignItems=\"center\">\n            <Text.Body tone=\"secondary\">No pages yet.</Text.Body>\n            <PrimaryButton\n              label=\"Create first page\"\n              iconLeft={<PlusThinIcon />}\n              onClick={() => setCreating(true)}\n            />\n          </Spacings.Stack>\n        ) : pages.length > 0 ? (\n          <DataTable\n            columns={COLUMNS}\n            rows={rows}\n            itemRenderer={(row: PageRow, column) => {\n              switch (column.key) {\n                case 'name':\n                  return (\n                    <Spacings.Stack scale=\"xs\">\n                      <Text.Body isBold>{row.value.name}</Text.Body>\n                      <Text.Detail tone=\"secondary\">{row.key}</Text.Detail>\n                    </Spacings.Stack>\n                  );\n                case 'slug':\n                  return (\n                    <code\n                      style={{\n                        background: 'var(--color-neutral-95)',\n                        padding: '2px 6px',\n                        borderRadius: 'var(--border-radius-4)',\n                        fontSize: 'var(--font-size-10)',\n                        fontFamily: 'monospace',\n                      }}\n                    >\n                      {row.value.slug}\n                    </code>\n                  );\n                case 'status':\n                  return (\n                    <span>\n                      {row.states.draft && <StatusBadge variant=\"draft\" />}\n                      {row.states.published && <StatusBadge variant=\"published\" />}\n                      {!row.states.draft && !row.states.published && <StatusBadge variant=\"none\" />}\n                    </span>\n                  );\n                case 'updatedAt':\n                  return (\n                    <Text.Body tone=\"secondary\">\n                      {new Date(row.value.updatedAt).toLocaleString()}\n                    </Text.Body>\n                  );\n                case 'actions':\n                  return (\n                    <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>\n                      <PrimaryButton\n                        label=\"Edit\"\n                        size=\"20\"\n                        onClick={() =>\n                          navigate(`/${row.key}/edit`, { state: { pageName: row.value.name } })\n                        }\n                      />\n                      <SecondaryButton\n                        label=\"Preview\"\n                        size=\"20\"\n                        onClick={() =>\n                          navigate(`/${row.key}/preview`, { state: { pageName: row.value.name } })\n                        }\n                      />\n                      <FlatButton\n                        tone=\"critical\"\n                        label={deleting === row.key ? '…' : 'Delete'}\n                        isDisabled={deleting === row.key}\n                        onClick={() => void handleDelete(row)}\n                      />\n                    </div>\n                  );\n                default:\n                  return null;\n              }\n            }}\n          />\n        ) : null}\n      </Spacings.Stack>\n    </div>\n  );\n};\n\n// ---------------------------------------------------------------------------\n// PageEditorRoute\n// ---------------------------------------------------------------------------\n\ninterface RouteProps {\n  config: Config;\n  backButton?: ReactNode;\n}\n\nconst PageEditorRoute: React.FC<RouteProps> = ({ config, backButton }) => {\n  const { pageKey } = useParams<{ pageKey: string }>();\n  const navigate = useNavigate();\n  const location = useLocation();\n  const { baseURL, projectKey, businessUnitKey, jwtToken } = usePuckApiContext();\n  const pageName =\n    (location.state as { pageName?: string } | null)?.pageName ?? pageKey ?? 'Page';\n\n  return (\n    <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>\n      <div style={NAV_BAR_STYLE}>\n        {backButton}\n        {backButton && <Text.Body tone=\"secondary\">/</Text.Body>}\n        <FlatButton\n          label=\"Pages\"\n          icon={<AngleLeftIcon />}\n          iconPosition=\"left\"\n          onClick={() => navigate('/')}\n        />\n        <Text.Body tone=\"secondary\">/</Text.Body>\n        <Text.Body isBold>{pageName}</Text.Body>\n      </div>\n      <div style={{ flex: 1, overflow: 'hidden' }}>\n        <PuckEditor\n          baseURL={baseURL}\n          projectKey={projectKey}\n          businessUnitKey={businessUnitKey}\n          jwtToken={jwtToken ?? ''}\n          pageKey={pageKey!}\n          config={config}\n          onError={(err: Error) => { console.error('[PageManager] editor error:', err); }}\n        />\n      </div>\n    </div>\n  );\n};\n\n// ---------------------------------------------------------------------------\n// PagePreviewRoute\n// ---------------------------------------------------------------------------\n\nconst PagePreviewRoute: React.FC<RouteProps> = ({ config, backButton }) => {\n  const { pageKey } = useParams<{ pageKey: string }>();\n  const navigate = useNavigate();\n  const location = useLocation();\n  const pageName =\n    (location.state as { pageName?: string } | null)?.pageName ?? pageKey ?? 'Page';\n\n  return (\n    <div>\n      <div style={NAV_BAR_STYLE}>\n        {backButton}\n        {backButton && <Text.Body tone=\"secondary\">/</Text.Body>}\n        <FlatButton\n          label=\"Pages\"\n          icon={<AngleLeftIcon />}\n          iconPosition=\"left\"\n          onClick={() => navigate('/')}\n        />\n        <Text.Body tone=\"secondary\">/</Text.Body>\n        <Text.Body isBold>{pageName}</Text.Body>\n        <span\n          style={{\n            background: 'var(--color-primary-95)',\n            color: 'var(--color-primary-25)',\n            border: '1px solid var(--color-primary-85)',\n            display: 'inline-flex',\n            alignItems: 'center',\n            padding: '2px 10px',\n            borderRadius: 'var(--border-radius-20)',\n            fontSize: 'var(--font-size-10)',\n            fontWeight: 'var(--font-weight-600)',\n          }}\n        >\n          Preview\n        </span>\n      </div>\n      <PuckRenderer pageKey={pageKey} mode=\"preview\" config={config} />\n    </div>\n  );\n};\n\n// ---------------------------------------------------------------------------\n// Inner router component\n// ---------------------------------------------------------------------------\n\ninterface PageManagerInnerProps {\n  config: Config;\n  backButton?: ReactNode;\n}\n\nconst PageManagerInner: React.FC<PageManagerInnerProps> = ({ config, backButton }) => (\n  <Routes>\n    <Route path=\"/\" element={<PageList backButton={backButton} />} />\n    <Route\n      path=\"/:pageKey/edit\"\n      element={<PageEditorRoute config={config} backButton={backButton} />}\n    />\n    <Route\n      path=\"/:pageKey/preview\"\n      element={<PagePreviewRoute config={config} backButton={backButton} />}\n    />\n  </Routes>\n);\n\n// ---------------------------------------------------------------------------\n// Public component\n// ---------------------------------------------------------------------------\n\nexport interface PageManagerProps {\n  /** URL path where this manager is mounted, e.g. \"/pages\" — used as router basename */\n  parentUrl: string;\n  baseURL: string;\n  projectKey: string;\n  businessUnitKey: string;\n  jwtToken: string;\n  /** Puck component config — passed to editor and preview */\n  config: Config;\n  /** Optional element rendered before the breadcrumb in editor/preview headers */\n  backButton?: ReactNode;\n}\n\nexport const PageManager: React.FC<PageManagerProps> = ({\n  parentUrl,\n  baseURL,\n  projectKey,\n  businessUnitKey,\n  jwtToken,\n  config,\n  backButton,\n}) => (\n  <PuckApiProvider\n    baseURL={baseURL}\n    projectKey={projectKey}\n    businessUnitKey={businessUnitKey}\n    jwtToken={jwtToken}\n  >\n    <BrowserRouter basename={parentUrl}>\n      <PageManagerInner config={config} backButton={backButton} />\n    </BrowserRouter>\n  </PuckApiProvider>\n);\n"],"mappings":"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","names":[]}

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@commercetools-demo/puck-page-manager",
+  "version": "0.1.0",
+  "description": "Router-aware page manager UI (list, editor, preview) for the Puck CMS integration",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "package.json"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsup",
+    "build:watch": "tsup --watch",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@commercetools-demo/puck-api": "^0.1.0",
+    "@commercetools-demo/puck-editor": "^0.1.0",
+    "@commercetools-demo/puck-renderer": "^0.1.0",
+    "@commercetools-demo/puck-types": "^0.1.0",
+    "@commercetools-uikit/card": "^20.5.0",
+    "@commercetools-uikit/data-table": "^20.5.0",
+    "@commercetools-uikit/flat-button": "^20.5.0",
+    "@commercetools-uikit/icons": "^20.5.0",
+    "@commercetools-uikit/label": "^20.5.0",
+    "@commercetools-uikit/loading-spinner": "^20.5.0",
+    "@commercetools-uikit/primary-button": "^20.5.0",
+    "@commercetools-uikit/secondary-button": "^20.5.0",
+    "@commercetools-uikit/spacings": "^20.5.0",
+    "@commercetools-uikit/text": "^20.5.0",
+    "@commercetools-uikit/text-input": "^20.5.0",
+    "@measured/puck": "^0.18.2"
+  },
+  "peerDependencies": {
+    "react": ">=19.0.0",
+    "react-dom": ">=19.0.0",
+    "react-intl": ">=6.0.0",
+    "react-router-dom": ">=5.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "tsup": "^8.3.0",
+    "typescript": "^5.7.2"
+  }
+}