@commercetools-demo/puck-content-manager 0.1.0

package/dist/index.mjs

@@ -0,0 +1,1105 @@
+// src/ContentManager.tsx
+import { useState } from "react";
+import { PuckApiProvider, usePuckContents } from "@commercetools-demo/puck-api";
+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, SearchIcon } 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 columns = [
+  { key: "name", label: "Name" },
+  { key: "contentType", label: "Content Type" },
+  { key: "status", label: "Status" },
+  { key: "updatedAt", label: "Updated" },
+  { key: "actions", label: "Actions", shouldIgnoreRowClick: true }
+];
+var ContentList = ({ defaultContentType, onEdit }) => {
+  const { contents, loading, error, fetchContents, createContent, deleteContent, refresh } = usePuckContents(defaultContentType);
+  const [filterType, setFilterType] = useState(defaultContentType ?? "");
+  const [showCreate, setShowCreate] = useState(false);
+  const [createName, setCreateName] = useState("");
+  const [createType, setCreateType] = useState(defaultContentType ?? "");
+  const [createError, setCreateError] = useState(null);
+  const [creating, setCreating] = useState(false);
+  const [deleting, setDeleting] = useState(null);
+  const handleFilter = () => void fetchContents(filterType || void 0);
+  const handleCreate = async () => {
+    setCreateError(null);
+    if (!createName.trim()) {
+      setCreateError("Name is required");
+      return;
+    }
+    if (!createType.trim()) {
+      setCreateError("Content type is required");
+      return;
+    }
+    setCreating(true);
+    try {
+      const input = {
+        name: createName.trim(),
+        contentType: createType.trim(),
+        data: { content: [], root: { props: {} } }
+      };
+      await createContent(input);
+      setShowCreate(false);
+      setCreateName("");
+      setCreateType(defaultContentType ?? "");
+    } catch (err) {
+      setCreateError(err.message);
+    } finally {
+      setCreating(false);
+    }
+  };
+  const handleDelete = async (key) => {
+    if (!confirm("Delete this content item and all its versions?")) return;
+    setDeleting(key);
+    try {
+      await deleteContent(key);
+    } finally {
+      setDeleting(null);
+    }
+  };
+  const rows = contents.map((c) => ({ ...c, id: c.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__ */ jsx(Text.Headline, { as: "h1", children: "Content Items" }),
+      /* @__PURE__ */ jsx(
+        PrimaryButton,
+        {
+          label: "New Content",
+          iconLeft: /* @__PURE__ */ jsx(PlusThinIcon, {}),
+          onClick: () => setShowCreate((v) => !v)
+        }
+      )
+    ] }),
+    showCreate && /* @__PURE__ */ jsx(Card, { insetScale: "l", children: /* @__PURE__ */ jsxs(Spacings.Stack, { scale: "m", children: [
+      /* @__PURE__ */ jsx(Text.Subheadline, { as: "h4", isBold: true, children: "Create Content Item" }),
+      createError && /* @__PURE__ */ jsx(Text.Body, { tone: "negative", children: createError }),
+      /* @__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: "create-name", children: "Name" }),
+          /* @__PURE__ */ jsx(
+            TextInput,
+            {
+              id: "create-name",
+              value: createName,
+              onChange: (e) => setCreateName(e.target.value),
+              placeholder: "e.g. Homepage Hero"
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ jsx("div", { style: { flex: 1 }, children: /* @__PURE__ */ jsxs(Spacings.Stack, { scale: "xs", children: [
+          /* @__PURE__ */ jsx(Label, { htmlFor: "create-type", children: "Content Type" }),
+          /* @__PURE__ */ jsx(
+            TextInput,
+            {
+              id: "create-type",
+              value: createType,
+              onChange: (e) => setCreateType(e.target.value),
+              placeholder: "e.g. hero, banner"
+            }
+          )
+        ] }) })
+      ] }),
+      /* @__PURE__ */ jsxs(Spacings.Inline, { scale: "s", children: [
+        /* @__PURE__ */ jsx(
+          PrimaryButton,
+          {
+            label: creating ? "Creating\u2026" : "Create",
+            onClick: () => void handleCreate(),
+            isDisabled: creating
+          }
+        ),
+        /* @__PURE__ */ jsx(SecondaryButton, { label: "Cancel", onClick: () => setShowCreate(false) })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxs(Spacings.Inline, { scale: "s", alignItems: "center", children: [
+      /* @__PURE__ */ jsx("div", { style: { flex: 1, maxWidth: "280px" }, children: /* @__PURE__ */ jsx(
+        TextInput,
+        {
+          value: filterType,
+          onChange: (e) => setFilterType(e.target.value),
+          placeholder: "Filter by content type\u2026"
+        }
+      ) }),
+      /* @__PURE__ */ jsx(
+        SecondaryButton,
+        {
+          label: "Filter",
+          iconLeft: /* @__PURE__ */ jsx(SearchIcon, {}),
+          onClick: handleFilter
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        FlatButton,
+        {
+          label: "Clear",
+          onClick: () => {
+            setFilterType("");
+            void fetchContents(void 0);
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(FlatButton, { label: "Refresh", onClick: () => void refresh() })
+    ] }),
+    error && /* @__PURE__ */ jsx(Text.Body, { tone: "negative", children: error }),
+    loading ? /* @__PURE__ */ jsx("div", { style: { display: "flex", justifyContent: "center", padding: "48px" }, children: /* @__PURE__ */ jsx(LoadingSpinner, {}) }) : contents.length === 0 ? /* @__PURE__ */ jsx(Spacings.Stack, { scale: "m", alignItems: "center", children: /* @__PURE__ */ jsx(Text.Body, { tone: "secondary", children: "No content items found." }) }) : /* @__PURE__ */ jsx(
+      DataTable,
+      {
+        columns,
+        rows,
+        itemRenderer: (row, column) => {
+          switch (column.key) {
+            case "name":
+              return /* @__PURE__ */ jsx(Text.Body, { isBold: true, children: row.value.name });
+            case "contentType":
+              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.contentType
+                }
+              );
+            case "status": {
+              const hasDraft = !!row.states.draft;
+              const hasPublished = !!row.states.published;
+              return /* @__PURE__ */ jsxs("span", { children: [
+                hasDraft && /* @__PURE__ */ jsx(StatusBadge, { variant: "draft" }),
+                hasPublished && /* @__PURE__ */ jsx(StatusBadge, { variant: "published" }),
+                !hasDraft && !hasPublished && /* @__PURE__ */ jsx(StatusBadge, { variant: "none" })
+              ] });
+            }
+            case "updatedAt":
+              return /* @__PURE__ */ jsx(Text.Body, { tone: "secondary", children: new Date(row.value.updatedAt).toLocaleDateString() });
+            case "actions":
+              return /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+                /* @__PURE__ */ jsx(PrimaryButton, { label: "Edit", size: "20", onClick: () => onEdit(row) }),
+                /* @__PURE__ */ jsx(
+                  FlatButton,
+                  {
+                    tone: "critical",
+                    label: deleting === row.key ? "\u2026" : "Delete",
+                    isDisabled: deleting === row.key,
+                    onClick: () => void handleDelete(row.key)
+                  }
+                )
+              ] });
+            default:
+              return null;
+          }
+        }
+      }
+    )
+  ] }) });
+};
+var ContentManager = ({
+  baseURL,
+  projectKey,
+  businessUnitKey,
+  jwtToken,
+  defaultContentType,
+  onEdit
+}) => /* @__PURE__ */ jsx(
+  PuckApiProvider,
+  {
+    baseURL,
+    projectKey,
+    businessUnitKey,
+    jwtToken,
+    children: /* @__PURE__ */ jsx(ContentList, { defaultContentType, onEdit })
+  }
+);
+
+// src/ContentEditor.tsx
+import { useCallback, useMemo, useRef, useState as useState2 } from "react";
+import { Puck } from "@measured/puck";
+import "@measured/puck/puck.css";
+import { PuckApiProvider as PuckApiProvider2, usePuckContent } from "@commercetools-demo/puck-api";
+import {
+  ComponentSearchProvider,
+  ComponentsPanel,
+  ComponentItemFilter
+} from "@commercetools-demo/puck-editor";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var BADGE_STYLES = {
+  saving: { bg: "rgba(251, 191, 36, 0.12)", color: "var(--status-saving)", border: "rgba(251, 191, 36, 0.3)" },
+  unsaved: { bg: "rgba(100, 116, 139, 0.12)", color: "var(--text-muted)", border: "rgba(100, 116, 139, 0.3)" },
+  draft: { bg: "rgba(129, 140, 248, 0.12)", color: "var(--status-draft)", border: "rgba(129, 140, 248, 0.3)" },
+  published: { bg: "rgba(6, 214, 160, 0.12)", color: "var(--status-published)", border: "rgba(6, 214, 160, 0.3)" }
+};
+var StatusBadge2 = ({
+  label,
+  variant
+}) => {
+  const bs = BADGE_STYLES[variant];
+  return /* @__PURE__ */ jsx2(
+    "span",
+    {
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        padding: "2px 10px",
+        borderRadius: "12px",
+        fontSize: "12px",
+        fontWeight: 600,
+        background: bs.bg,
+        color: bs.color,
+        border: `1px solid ${bs.border}`
+      },
+      children: label
+    }
+  );
+};
+var ContentToolbar = ({
+  saving,
+  isDirty,
+  states,
+  onSave,
+  onPublish,
+  onRevert
+}) => {
+  const hasDraft = Boolean(states.draft);
+  const hasPublished = Boolean(states.published);
+  return /* @__PURE__ */ jsxs2("div", { style: { display: "flex", alignItems: "center", gap: "12px", flexWrap: "wrap" }, children: [
+    /* @__PURE__ */ jsxs2("div", { style: { display: "flex", alignItems: "center", gap: "6px" }, children: [
+      saving && /* @__PURE__ */ jsx2(StatusBadge2, { label: "Saving\u2026", variant: "saving" }),
+      !saving && isDirty && /* @__PURE__ */ jsx2(StatusBadge2, { label: "Unsaved", variant: "unsaved" }),
+      !saving && !isDirty && hasDraft && /* @__PURE__ */ jsx2(StatusBadge2, { label: "Draft", variant: "draft" }),
+      hasPublished && /* @__PURE__ */ jsx2(StatusBadge2, { label: "Published", variant: "published" })
+    ] }),
+    hasDraft && hasPublished && /* @__PURE__ */ jsx2(
+      "button",
+      {
+        onClick: onRevert,
+        disabled: saving,
+        style: {
+          padding: "6px 14px",
+          borderRadius: "4px",
+          border: "1px solid var(--border-glow)",
+          background: "transparent",
+          color: "var(--text-muted)",
+          fontWeight: 500,
+          fontSize: "13px",
+          cursor: saving ? "not-allowed" : "pointer",
+          opacity: saving ? 0.5 : 1
+        },
+        children: "Revert to Published"
+      }
+    ),
+    /* @__PURE__ */ jsx2(
+      "button",
+      {
+        onClick: onSave,
+        disabled: !isDirty || saving,
+        style: {
+          padding: "6px 14px",
+          borderRadius: "4px",
+          border: "1px solid var(--border-glow)",
+          background: "transparent",
+          color: "var(--text-muted)",
+          fontWeight: 500,
+          fontSize: "13px",
+          cursor: !isDirty || saving ? "not-allowed" : "pointer",
+          opacity: !isDirty || saving ? 0.4 : 1
+        },
+        children: "Save"
+      }
+    ),
+    /* @__PURE__ */ jsx2(
+      "button",
+      {
+        onClick: onPublish,
+        disabled: saving,
+        style: {
+          padding: "6px 16px",
+          borderRadius: "4px",
+          border: "1px solid var(--accent-cyan)",
+          background: "rgba(0, 212, 255, 0.1)",
+          color: "var(--accent-cyan)",
+          fontWeight: 600,
+          fontSize: "13px",
+          cursor: saving ? "not-allowed" : "pointer",
+          opacity: saving ? 0.5 : 1,
+          boxShadow: "0 0 12px rgba(0, 212, 255, 0.15)"
+        },
+        children: hasPublished ? "Re-publish" : "Publish"
+      }
+    )
+  ] });
+};
+var ContentEditorInner = ({
+  contentKey,
+  config,
+  onPublish,
+  onSave,
+  onError
+}) => {
+  const {
+    content,
+    states,
+    saving,
+    loading,
+    error,
+    saveDraft,
+    publish,
+    revertToPublished
+  } = usePuckContent(contentKey);
+  const latestDataRef = useRef(null);
+  const [hasUnsavedChanges, setHasUnsavedChanges] = useState2(false);
+  const handleChange = useCallback((data) => {
+    latestDataRef.current = data;
+    setHasUnsavedChanges(true);
+  }, []);
+  const handleSave = useCallback(async () => {
+    const data = latestDataRef.current;
+    if (!data) return;
+    try {
+      await saveDraft(data);
+      setHasUnsavedChanges(false);
+      onSave?.(data);
+    } catch (err) {
+      onError?.(err);
+    }
+  }, [saveDraft, onSave, onError]);
+  const handlePublish = useCallback(
+    async (data) => {
+      try {
+        await saveDraft(data);
+        setHasUnsavedChanges(false);
+        await publish(false);
+        onPublish?.(data);
+      } catch (err) {
+        onError?.(err);
+      }
+    },
+    [saveDraft, publish, onPublish, onError]
+  );
+  const handleRevert = useCallback(async () => {
+    try {
+      await revertToPublished();
+      setHasUnsavedChanges(false);
+    } catch (err) {
+      onError?.(err);
+    }
+  }, [revertToPublished, onError]);
+  const contentConfig = useMemo(() => {
+    const otherRootFields = Object.fromEntries(
+      Object.entries(config.root?.fields ?? {}).filter(([k]) => k !== "title")
+    );
+    return {
+      ...config,
+      root: {
+        ...config.root,
+        fields: {
+          title: { type: "text", label: "Content Title" },
+          slot: { type: "text", label: "Slot" },
+          ...otherRootFields
+        },
+        defaultProps: {
+          title: "New Content",
+          slot: "",
+          ...config.root?.defaultProps
+        }
+      }
+    };
+  }, [config]);
+  if (loading) {
+    return /* @__PURE__ */ jsx2(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          height: "100vh",
+          fontSize: "16px",
+          color: "var(--text-muted)"
+        },
+        children: "Loading editor\u2026"
+      }
+    );
+  }
+  if (error) {
+    return /* @__PURE__ */ jsxs2(
+      "div",
+      {
+        style: {
+          padding: "32px",
+          color: "var(--status-error)",
+          background: "rgba(248, 113, 113, 0.08)",
+          border: "1px solid rgba(248, 113, 113, 0.25)",
+          borderRadius: "8px",
+          margin: "16px"
+        },
+        children: [
+          /* @__PURE__ */ jsx2("strong", { children: "Error loading content:" }),
+          " ",
+          error
+        ]
+      }
+    );
+  }
+  const activeData = states.draft?.data ?? content?.data ?? {
+    content: [],
+    root: { props: {} }
+  };
+  return /* @__PURE__ */ jsx2(ComponentSearchProvider, { children: /* @__PURE__ */ jsx2(
+    Puck,
+    {
+      config: contentConfig,
+      data: activeData,
+      onChange: handleChange,
+      onPublish: handlePublish,
+      overrides: {
+        headerActions: () => /* @__PURE__ */ jsx2(
+          ContentToolbar,
+          {
+            saving,
+            isDirty: hasUnsavedChanges,
+            states,
+            onSave: () => void handleSave(),
+            onPublish: () => void handlePublish(activeData),
+            onRevert: () => void handleRevert()
+          }
+        ),
+        components: ({ children }) => /* @__PURE__ */ jsx2(ComponentsPanel, { children }),
+        componentItem: ({ children, name }) => /* @__PURE__ */ jsx2(ComponentItemFilter, { name, children })
+      }
+    }
+  ) });
+};
+var ContentEditor = ({
+  baseURL,
+  projectKey,
+  businessUnitKey,
+  jwtToken,
+  contentKey,
+  config,
+  onPublish,
+  onSave,
+  onError
+}) => /* @__PURE__ */ jsx2(
+  PuckApiProvider2,
+  {
+    baseURL,
+    projectKey,
+    businessUnitKey,
+    jwtToken,
+    children: /* @__PURE__ */ jsx2(
+      ContentEditorInner,
+      {
+        contentKey,
+        config,
+        onPublish,
+        onSave,
+        onError
+      }
+    )
+  }
+);
+
+// src/ContentManagerRouter.tsx
+import { useState as useState3, useCallback as useCallback2, useMemo as useMemo2, useRef as useRef2 } from "react";
+import {
+  BrowserRouter,
+  Routes,
+  Route,
+  useNavigate,
+  useParams,
+  useLocation
+} from "react-router-dom";
+import { Puck as Puck2 } from "@measured/puck";
+import "@measured/puck/puck.css";
+import {
+  ComponentSearchProvider as ComponentSearchProvider2,
+  ComponentsPanel as ComponentsPanel2,
+  ComponentItemFilter as ComponentItemFilter2
+} from "@commercetools-demo/puck-editor";
+import {
+  PuckApiProvider as PuckApiProvider3,
+  usePuckContents as usePuckContents2,
+  usePuckContent as usePuckContent2
+} from "@commercetools-demo/puck-api";
+import DataTable2 from "@commercetools-uikit/data-table";
+import PrimaryButton2 from "@commercetools-uikit/primary-button";
+import SecondaryButton2 from "@commercetools-uikit/secondary-button";
+import FlatButton2 from "@commercetools-uikit/flat-button";
+import Card2 from "@commercetools-uikit/card";
+import Spacings2 from "@commercetools-uikit/spacings";
+import Text2 from "@commercetools-uikit/text";
+import LoadingSpinner2 from "@commercetools-uikit/loading-spinner";
+import TextInput2 from "@commercetools-uikit/text-input";
+import Label2 from "@commercetools-uikit/label";
+import { PlusThinIcon as PlusThinIcon2, SearchIcon as SearchIcon2, AngleLeftIcon } from "@commercetools-uikit/icons";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var StatusBadge3 = ({ variant }) => {
+  const styles = variant === "published" ? { background: "var(--color-success-95)", color: "var(--color-success-40)", border: "1px solid var(--color-success-85)" } : variant === "draft" ? { background: "var(--color-warning-95)", color: "var(--color-warning-40)", border: "1px solid var(--color-warning-85)" } : { background: "var(--color-neutral-95)", color: "var(--color-neutral-50)", border: "1px solid var(--color-neutral-85)" };
+  return /* @__PURE__ */ jsx3(
+    "span",
+    {
+      style: {
+        ...styles,
+        display: "inline-flex",
+        alignItems: "center",
+        padding: "2px 8px",
+        borderRadius: "var(--border-radius-20)",
+        fontSize: "var(--font-size-10)",
+        fontWeight: "var(--font-weight-600)",
+        marginRight: "4px",
+        whiteSpace: "nowrap"
+      },
+      children: variant === "published" ? "Published" : variant === "draft" ? "Draft" : "No state"
+    }
+  );
+};
+var BADGE_STYLES2 = {
+  saving: { bg: "rgba(251, 191, 36, 0.12)", color: "var(--status-saving)", border: "rgba(251, 191, 36, 0.3)" },
+  unsaved: { bg: "rgba(100, 116, 139, 0.12)", color: "var(--text-muted)", border: "rgba(100, 116, 139, 0.3)" },
+  draft: { bg: "rgba(129, 140, 248, 0.12)", color: "var(--status-draft)", border: "rgba(129, 140, 248, 0.3)" },
+  published: { bg: "rgba(6, 214, 160, 0.12)", color: "var(--status-published)", border: "rgba(6, 214, 160, 0.3)" }
+};
+var EditorStatusBadge = ({ label, variant }) => {
+  const bs = BADGE_STYLES2[variant];
+  return /* @__PURE__ */ jsx3(
+    "span",
+    {
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        padding: "2px 10px",
+        borderRadius: "12px",
+        fontSize: "12px",
+        fontWeight: 600,
+        background: bs.bg,
+        color: bs.color,
+        border: `1px solid ${bs.border}`
+      },
+      children: label
+    }
+  );
+};
+var ContentToolbar2 = ({ saving, isDirty, states, onSave, onPublish, onRevert }) => {
+  const hasDraft = Boolean(states.draft);
+  const hasPublished = Boolean(states.published);
+  return /* @__PURE__ */ jsxs3("div", { style: { display: "flex", alignItems: "center", gap: "12px", flexWrap: "wrap" }, children: [
+    /* @__PURE__ */ jsxs3("div", { style: { display: "flex", alignItems: "center", gap: "6px" }, children: [
+      saving && /* @__PURE__ */ jsx3(EditorStatusBadge, { label: "Saving\u2026", variant: "saving" }),
+      !saving && isDirty && /* @__PURE__ */ jsx3(EditorStatusBadge, { label: "Unsaved", variant: "unsaved" }),
+      !saving && !isDirty && hasDraft && /* @__PURE__ */ jsx3(EditorStatusBadge, { label: "Draft", variant: "draft" }),
+      hasPublished && /* @__PURE__ */ jsx3(EditorStatusBadge, { label: "Published", variant: "published" })
+    ] }),
+    hasDraft && hasPublished && /* @__PURE__ */ jsx3(
+      "button",
+      {
+        onClick: onRevert,
+        disabled: saving,
+        style: {
+          padding: "6px 14px",
+          borderRadius: "4px",
+          border: "1px solid var(--border-glow)",
+          background: "transparent",
+          color: "var(--text-muted)",
+          fontWeight: 500,
+          fontSize: "13px",
+          cursor: saving ? "not-allowed" : "pointer",
+          opacity: saving ? 0.5 : 1
+        },
+        children: "Revert to Published"
+      }
+    ),
+    /* @__PURE__ */ jsx3(
+      "button",
+      {
+        onClick: onSave,
+        disabled: !isDirty || saving,
+        style: {
+          padding: "6px 14px",
+          borderRadius: "4px",
+          border: "1px solid var(--border-glow)",
+          background: "transparent",
+          color: "var(--text-muted)",
+          fontWeight: 500,
+          fontSize: "13px",
+          cursor: !isDirty || saving ? "not-allowed" : "pointer",
+          opacity: !isDirty || saving ? 0.4 : 1
+        },
+        children: "Save"
+      }
+    ),
+    /* @__PURE__ */ jsx3(
+      "button",
+      {
+        onClick: onPublish,
+        disabled: saving,
+        style: {
+          padding: "6px 16px",
+          borderRadius: "4px",
+          border: "1px solid var(--accent-cyan)",
+          background: "rgba(0, 212, 255, 0.1)",
+          color: "var(--accent-cyan)",
+          fontWeight: 600,
+          fontSize: "13px",
+          cursor: saving ? "not-allowed" : "pointer",
+          opacity: saving ? 0.5 : 1,
+          boxShadow: "0 0 12px rgba(0, 212, 255, 0.15)"
+        },
+        children: hasPublished ? "Re-publish" : "Publish"
+      }
+    )
+  ] });
+};
+var 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: "contentType", label: "Content Type" },
+  { key: "status", label: "Status" },
+  { key: "updatedAt", label: "Updated" },
+  { key: "actions", label: "Actions", shouldIgnoreRowClick: true }
+];
+var ContentListRoute = ({ defaultContentType, backButton }) => {
+  const navigate = useNavigate();
+  const { contents, loading, error, fetchContents, createContent, deleteContent, refresh } = usePuckContents2(defaultContentType);
+  const [filterType, setFilterType] = useState3(defaultContentType ?? "");
+  const [showCreate, setShowCreate] = useState3(false);
+  const [createName, setCreateName] = useState3("");
+  const [createType, setCreateType] = useState3(defaultContentType ?? "");
+  const [createError, setCreateError] = useState3(null);
+  const [creating, setCreating] = useState3(false);
+  const [deleting, setDeleting] = useState3(null);
+  const handleFilter = () => void fetchContents(filterType || void 0);
+  const handleCreate = async () => {
+    setCreateError(null);
+    if (!createName.trim()) {
+      setCreateError("Name is required");
+      return;
+    }
+    if (!createType.trim()) {
+      setCreateError("Content type is required");
+      return;
+    }
+    setCreating(true);
+    try {
+      const input = {
+        name: createName.trim(),
+        contentType: createType.trim(),
+        data: { content: [], root: { props: {} } }
+      };
+      const created = await createContent(input);
+      setShowCreate(false);
+      setCreateName("");
+      setCreateType(defaultContentType ?? "");
+      navigate(`/${created.key}`, { state: { contentName: created.value.name } });
+    } catch (err) {
+      setCreateError(err.message);
+    } finally {
+      setCreating(false);
+    }
+  };
+  const handleDelete = async (key) => {
+    if (!confirm("Delete this content item and all its versions?")) return;
+    setDeleting(key);
+    try {
+      await deleteContent(key);
+    } finally {
+      setDeleting(null);
+    }
+  };
+  const rows = contents.map((c) => ({ ...c, id: c.key }));
+  return /* @__PURE__ */ jsx3("div", { style: { maxWidth: "1200px", margin: "0 auto", padding: "32px 24px" }, children: /* @__PURE__ */ jsxs3(Spacings2.Stack, { scale: "l", children: [
+    /* @__PURE__ */ jsxs3(Spacings2.Inline, { justifyContent: "space-between", alignItems: "center", children: [
+      /* @__PURE__ */ jsxs3(Spacings2.Inline, { scale: "m", alignItems: "center", children: [
+        backButton,
+        /* @__PURE__ */ jsx3(Text2.Headline, { as: "h1", children: "Content Items" })
+      ] }),
+      /* @__PURE__ */ jsx3(
+        PrimaryButton2,
+        {
+          label: "New Content",
+          iconLeft: /* @__PURE__ */ jsx3(PlusThinIcon2, {}),
+          onClick: () => setShowCreate((v) => !v)
+        }
+      )
+    ] }),
+    showCreate && /* @__PURE__ */ jsx3(Card2, { insetScale: "l", children: /* @__PURE__ */ jsxs3(Spacings2.Stack, { scale: "m", children: [
+      /* @__PURE__ */ jsx3(Text2.Subheadline, { as: "h4", isBold: true, children: "Create Content Item" }),
+      createError && /* @__PURE__ */ jsx3(Text2.Body, { tone: "negative", children: createError }),
+      /* @__PURE__ */ jsxs3(Spacings2.Inline, { scale: "m", children: [
+        /* @__PURE__ */ jsx3("div", { style: { flex: 1 }, children: /* @__PURE__ */ jsxs3(Spacings2.Stack, { scale: "xs", children: [
+          /* @__PURE__ */ jsx3(Label2, { htmlFor: "create-content-name", children: "Name" }),
+          /* @__PURE__ */ jsx3(
+            TextInput2,
+            {
+              id: "create-content-name",
+              value: createName,
+              onChange: (e) => setCreateName(e.target.value),
+              placeholder: "e.g. Homepage Hero"
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ jsx3("div", { style: { flex: 1 }, children: /* @__PURE__ */ jsxs3(Spacings2.Stack, { scale: "xs", children: [
+          /* @__PURE__ */ jsx3(Label2, { htmlFor: "create-content-type", children: "Content Type" }),
+          /* @__PURE__ */ jsx3(
+            TextInput2,
+            {
+              id: "create-content-type",
+              value: createType,
+              onChange: (e) => setCreateType(e.target.value),
+              placeholder: "e.g. hero, banner"
+            }
+          )
+        ] }) })
+      ] }),
+      /* @__PURE__ */ jsxs3(Spacings2.Inline, { scale: "s", children: [
+        /* @__PURE__ */ jsx3(
+          PrimaryButton2,
+          {
+            label: creating ? "Creating\u2026" : "Create",
+            onClick: () => void handleCreate(),
+            isDisabled: creating
+          }
+        ),
+        /* @__PURE__ */ jsx3(SecondaryButton2, { label: "Cancel", onClick: () => setShowCreate(false) })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxs3(Spacings2.Inline, { scale: "s", alignItems: "center", children: [
+      /* @__PURE__ */ jsx3("div", { style: { flex: 1, maxWidth: "280px" }, children: /* @__PURE__ */ jsx3(
+        TextInput2,
+        {
+          value: filterType,
+          onChange: (e) => setFilterType(e.target.value),
+          placeholder: "Filter by content type\u2026"
+        }
+      ) }),
+      /* @__PURE__ */ jsx3(
+        SecondaryButton2,
+        {
+          label: "Filter",
+          iconLeft: /* @__PURE__ */ jsx3(SearchIcon2, {}),
+          onClick: handleFilter
+        }
+      ),
+      /* @__PURE__ */ jsx3(
+        FlatButton2,
+        {
+          label: "Clear",
+          onClick: () => {
+            setFilterType("");
+            void fetchContents(void 0);
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx3(FlatButton2, { label: "Refresh", onClick: () => void refresh() })
+    ] }),
+    error && /* @__PURE__ */ jsx3(Text2.Body, { tone: "negative", children: error }),
+    loading ? /* @__PURE__ */ jsx3("div", { style: { display: "flex", justifyContent: "center", padding: "48px" }, children: /* @__PURE__ */ jsx3(LoadingSpinner2, {}) }) : contents.length === 0 ? /* @__PURE__ */ jsx3(Spacings2.Stack, { scale: "m", alignItems: "center", children: /* @__PURE__ */ jsx3(Text2.Body, { tone: "secondary", children: "No content items found." }) }) : /* @__PURE__ */ jsx3(
+      DataTable2,
+      {
+        columns: COLUMNS,
+        rows,
+        itemRenderer: (row, column) => {
+          switch (column.key) {
+            case "name":
+              return /* @__PURE__ */ jsx3(Text2.Body, { isBold: true, children: row.value.name });
+            case "contentType":
+              return /* @__PURE__ */ jsx3(
+                "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.contentType
+                }
+              );
+            case "status": {
+              const hasDraft = !!row.states.draft;
+              const hasPublished = !!row.states.published;
+              return /* @__PURE__ */ jsxs3("span", { children: [
+                hasDraft && /* @__PURE__ */ jsx3(StatusBadge3, { variant: "draft" }),
+                hasPublished && /* @__PURE__ */ jsx3(StatusBadge3, { variant: "published" }),
+                !hasDraft && !hasPublished && /* @__PURE__ */ jsx3(StatusBadge3, { variant: "none" })
+              ] });
+            }
+            case "updatedAt":
+              return /* @__PURE__ */ jsx3(Text2.Body, { tone: "secondary", children: new Date(row.value.updatedAt).toLocaleDateString() });
+            case "actions":
+              return /* @__PURE__ */ jsxs3("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+                /* @__PURE__ */ jsx3(
+                  PrimaryButton2,
+                  {
+                    label: "Edit",
+                    size: "20",
+                    onClick: () => navigate(`/${row.key}`, { state: { contentName: row.value.name } })
+                  }
+                ),
+                /* @__PURE__ */ jsx3(
+                  FlatButton2,
+                  {
+                    tone: "critical",
+                    label: deleting === row.key ? "\u2026" : "Delete",
+                    isDisabled: deleting === row.key,
+                    onClick: () => void handleDelete(row.key)
+                  }
+                )
+              ] });
+            default:
+              return null;
+          }
+        }
+      }
+    )
+  ] }) });
+};
+var ContentEditorRoute = ({ config, backButton }) => {
+  const { contentKey } = useParams();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const contentName = location.state?.contentName ?? contentKey ?? "Content";
+  const {
+    content,
+    states,
+    saving,
+    loading,
+    error,
+    saveDraft,
+    publish,
+    revertToPublished
+  } = usePuckContent2(contentKey);
+  const latestDataRef = useRef2(null);
+  const [hasUnsavedChanges, setHasUnsavedChanges] = useState3(false);
+  const handleChange = useCallback2((data) => {
+    latestDataRef.current = data;
+    setHasUnsavedChanges(true);
+  }, []);
+  const handleSave = useCallback2(async () => {
+    const data = latestDataRef.current;
+    if (!data) return;
+    try {
+      await saveDraft(data);
+      setHasUnsavedChanges(false);
+    } catch (err) {
+      console.error("[ContentManagerRouter] save error:", err);
+    }
+  }, [saveDraft]);
+  const handlePublish = useCallback2(
+    async (data) => {
+      try {
+        await saveDraft(data);
+        setHasUnsavedChanges(false);
+        await publish(false);
+      } catch (err) {
+        console.error("[ContentManagerRouter] publish error:", err);
+      }
+    },
+    [saveDraft, publish]
+  );
+  const handleRevert = useCallback2(async () => {
+    try {
+      await revertToPublished();
+      setHasUnsavedChanges(false);
+    } catch (err) {
+      console.error("[ContentManagerRouter] revert error:", err);
+    }
+  }, [revertToPublished]);
+  const contentConfig = useMemo2(() => {
+    const otherRootFields = Object.fromEntries(
+      Object.entries(config.root?.fields ?? {}).filter(([k]) => k !== "title")
+    );
+    return {
+      ...config,
+      root: {
+        ...config.root,
+        fields: {
+          title: { type: "text", label: "Content Title" },
+          slot: { type: "text", label: "Slot" },
+          ...otherRootFields
+        },
+        defaultProps: {
+          title: "New Content",
+          slot: "",
+          ...config.root?.defaultProps
+        }
+      }
+    };
+  }, [config]);
+  if (loading) {
+    return /* @__PURE__ */ jsx3(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          height: "100vh",
+          fontSize: "16px",
+          color: "var(--text-muted)"
+        },
+        children: "Loading editor\u2026"
+      }
+    );
+  }
+  if (error) {
+    return /* @__PURE__ */ jsxs3(
+      "div",
+      {
+        style: {
+          padding: "32px",
+          color: "var(--status-error)",
+          background: "rgba(248, 113, 113, 0.08)",
+          border: "1px solid rgba(248, 113, 113, 0.25)",
+          borderRadius: "8px",
+          margin: "16px"
+        },
+        children: [
+          /* @__PURE__ */ jsx3("strong", { children: "Error loading content:" }),
+          " ",
+          error
+        ]
+      }
+    );
+  }
+  const activeData = states.draft?.data ?? content?.data ?? {
+    content: [],
+    root: { props: {} }
+  };
+  return /* @__PURE__ */ jsxs3("div", { style: { display: "flex", flexDirection: "column", height: "100%" }, children: [
+    /* @__PURE__ */ jsxs3("div", { style: NAV_BAR_STYLE, children: [
+      backButton,
+      backButton && /* @__PURE__ */ jsx3(Text2.Body, { tone: "secondary", children: "/" }),
+      /* @__PURE__ */ jsx3(
+        FlatButton2,
+        {
+          label: "Content Items",
+          icon: /* @__PURE__ */ jsx3(AngleLeftIcon, {}),
+          iconPosition: "left",
+          onClick: () => navigate("/")
+        }
+      ),
+      /* @__PURE__ */ jsx3(Text2.Body, { tone: "secondary", children: "/" }),
+      /* @__PURE__ */ jsx3(Text2.Body, { isBold: true, children: contentName })
+    ] }),
+    /* @__PURE__ */ jsx3("div", { style: { flex: 1, overflow: "hidden" }, children: /* @__PURE__ */ jsx3(ComponentSearchProvider2, { children: /* @__PURE__ */ jsx3(
+      Puck2,
+      {
+        config: contentConfig,
+        data: activeData,
+        onChange: handleChange,
+        onPublish: handlePublish,
+        overrides: {
+          headerActions: () => /* @__PURE__ */ jsx3(
+            ContentToolbar2,
+            {
+              saving,
+              isDirty: hasUnsavedChanges,
+              states,
+              onSave: () => void handleSave(),
+              onPublish: () => void handlePublish(activeData),
+              onRevert: () => void handleRevert()
+            }
+          ),
+          components: ({ children }) => /* @__PURE__ */ jsx3(ComponentsPanel2, { children }),
+          componentItem: ({ children, name }) => /* @__PURE__ */ jsx3(ComponentItemFilter2, { name, children })
+        }
+      }
+    ) }) })
+  ] });
+};
+var ContentManagerRouterInner = ({
+  config,
+  defaultContentType,
+  backButton
+}) => /* @__PURE__ */ jsxs3(Routes, { children: [
+  /* @__PURE__ */ jsx3(
+    Route,
+    {
+      path: "/",
+      element: /* @__PURE__ */ jsx3(ContentListRoute, { defaultContentType, backButton })
+    }
+  ),
+  /* @__PURE__ */ jsx3(
+    Route,
+    {
+      path: "/:contentKey",
+      element: /* @__PURE__ */ jsx3(ContentEditorRoute, { config, backButton })
+    }
+  )
+] });
+var ContentManagerRouter = ({
+  parentUrl,
+  baseURL,
+  projectKey,
+  businessUnitKey,
+  jwtToken,
+  config,
+  defaultContentType,
+  backButton
+}) => /* @__PURE__ */ jsx3(
+  PuckApiProvider3,
+  {
+    baseURL,
+    projectKey,
+    businessUnitKey,
+    jwtToken,
+    children: /* @__PURE__ */ jsx3(BrowserRouter, { basename: parentUrl, children: /* @__PURE__ */ jsx3(
+      ContentManagerRouterInner,
+      {
+        config,
+        defaultContentType,
+        backButton
+      }
+    ) })
+  }
+);
+export {
+  ContentEditor,
+  ContentManager,
+  ContentManagerRouter
+};
+//# sourceMappingURL=index.mjs.map