@delmaredigital/payload-puck 0.1.0

package/dist/admin/client.d.mts

@@ -0,0 +1,108 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { UIFieldClientComponent, DefaultCellComponentProps } from 'payload';
+
+/**
+ * Props for EditWithPuckButton when used standalone
+ */
+interface EditWithPuckButtonProps {
+    /**
+     * Document ID to edit
+     */
+    id?: string;
+    /**
+     * Collection slug
+     * @default 'pages'
+     */
+    collectionSlug?: string;
+    /**
+     * Custom path pattern for the Puck editor
+     * Use {id} as placeholder for the document ID
+     * @default '/pages/{id}/edit'
+     */
+    editorPathPattern?: string;
+    /**
+     * Button label
+     * @default 'Edit with Puck'
+     */
+    label?: string;
+    /**
+     * Whether to show as icon only
+     * @default false
+     */
+    iconOnly?: boolean;
+}
+/**
+ * Edit with Puck button for use in Payload admin document edit views
+ *
+ * Links to a Puck editor page outside of Payload admin. Configure the
+ * `editorPathPattern` to match your editor route.
+ *
+ * @example
+ * ```tsx
+ * // In your Payload collection config:
+ * {
+ *   name: 'puckEdit',
+ *   type: 'ui',
+ *   admin: {
+ *     position: 'sidebar',
+ *     components: {
+ *       Field: '@delmaredigital/payload-puck/admin/client#EditWithPuckButton',
+ *     },
+ *     custom: {
+ *       editorPathPattern: '/pages/{id}/edit', // Your editor route
+ *       label: 'Visual Editor',
+ *     },
+ *   },
+ * }
+ * ```
+ */
+declare const EditWithPuckButton: UIFieldClientComponent;
+/**
+ * Standalone version of the button that doesn't rely on Payload context
+ */
+declare function EditWithPuckLink({ id, editorPathPattern, label, iconOnly, }: EditWithPuckButtonProps & {
+    id: string;
+}): react_jsx_runtime.JSX.Element;
+
+/**
+ * Props for configuring the EditWithPuckCell component
+ */
+interface EditWithPuckCellConfig {
+    /**
+     * Collection slug for building the editor URL
+     * @default 'pages'
+     */
+    collectionSlug?: string;
+    /**
+     * Custom editor path pattern
+     * Use {id} as placeholder for the document ID
+     * @default '/admin/puck/{collectionSlug}/{id}/edit'
+     */
+    editorPathPattern?: string;
+}
+/**
+ * Custom cell component that renders an "Edit with Puck" button in list views
+ *
+ * Add this to a UI field in your collection to show the visual editor button
+ * in the list view table.
+ *
+ * @example
+ * ```ts
+ * // In your collection config:
+ * {
+ *   name: 'puckEdit',
+ *   type: 'ui',
+ *   admin: {
+ *     components: {
+ *       Cell: '@delmaredigital/payload-puck/admin#EditWithPuckCell',
+ *     },
+ *     custom: {
+ *       collectionSlug: 'pages',
+ *     },
+ *   },
+ * }
+ * ```
+ */
+declare const EditWithPuckCell: React.FC<DefaultCellComponentProps>;
+
+export { EditWithPuckButton, type EditWithPuckButtonProps, EditWithPuckCell, type EditWithPuckCellConfig, EditWithPuckLink };

package/dist/admin/client.d.ts

@@ -0,0 +1,108 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { UIFieldClientComponent, DefaultCellComponentProps } from 'payload';
+
+/**
+ * Props for EditWithPuckButton when used standalone
+ */
+interface EditWithPuckButtonProps {
+    /**
+     * Document ID to edit
+     */
+    id?: string;
+    /**
+     * Collection slug
+     * @default 'pages'
+     */
+    collectionSlug?: string;
+    /**
+     * Custom path pattern for the Puck editor
+     * Use {id} as placeholder for the document ID
+     * @default '/pages/{id}/edit'
+     */
+    editorPathPattern?: string;
+    /**
+     * Button label
+     * @default 'Edit with Puck'
+     */
+    label?: string;
+    /**
+     * Whether to show as icon only
+     * @default false
+     */
+    iconOnly?: boolean;
+}
+/**
+ * Edit with Puck button for use in Payload admin document edit views
+ *
+ * Links to a Puck editor page outside of Payload admin. Configure the
+ * `editorPathPattern` to match your editor route.
+ *
+ * @example
+ * ```tsx
+ * // In your Payload collection config:
+ * {
+ *   name: 'puckEdit',
+ *   type: 'ui',
+ *   admin: {
+ *     position: 'sidebar',
+ *     components: {
+ *       Field: '@delmaredigital/payload-puck/admin/client#EditWithPuckButton',
+ *     },
+ *     custom: {
+ *       editorPathPattern: '/pages/{id}/edit', // Your editor route
+ *       label: 'Visual Editor',
+ *     },
+ *   },
+ * }
+ * ```
+ */
+declare const EditWithPuckButton: UIFieldClientComponent;
+/**
+ * Standalone version of the button that doesn't rely on Payload context
+ */
+declare function EditWithPuckLink({ id, editorPathPattern, label, iconOnly, }: EditWithPuckButtonProps & {
+    id: string;
+}): react_jsx_runtime.JSX.Element;
+
+/**
+ * Props for configuring the EditWithPuckCell component
+ */
+interface EditWithPuckCellConfig {
+    /**
+     * Collection slug for building the editor URL
+     * @default 'pages'
+     */
+    collectionSlug?: string;
+    /**
+     * Custom editor path pattern
+     * Use {id} as placeholder for the document ID
+     * @default '/admin/puck/{collectionSlug}/{id}/edit'
+     */
+    editorPathPattern?: string;
+}
+/**
+ * Custom cell component that renders an "Edit with Puck" button in list views
+ *
+ * Add this to a UI field in your collection to show the visual editor button
+ * in the list view table.
+ *
+ * @example
+ * ```ts
+ * // In your collection config:
+ * {
+ *   name: 'puckEdit',
+ *   type: 'ui',
+ *   admin: {
+ *     components: {
+ *       Cell: '@delmaredigital/payload-puck/admin#EditWithPuckCell',
+ *     },
+ *     custom: {
+ *       collectionSlug: 'pages',
+ *     },
+ *   },
+ * }
+ * ```
+ */
+declare const EditWithPuckCell: React.FC<DefaultCellComponentProps>;
+
+export { EditWithPuckButton, type EditWithPuckButtonProps, EditWithPuckCell, type EditWithPuckCellConfig, EditWithPuckLink };

package/dist/admin/client.js

@@ -0,0 +1,177 @@
+"use client";
+'use strict';
+
+var ui = require('@payloadcms/ui');
+var jsxRuntime = require('react/jsx-runtime');
+
+function PuckIcon({ size = 18 }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" }),
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18.375 2.625a2.121 2.121 0 1 1 3 3L12 15l-4 1 1-4Z" })
+      ]
+    }
+  );
+}
+var EditWithPuckButton = (props) => {
+  const { id } = ui.useDocumentInfo();
+  const customProps = props?.field?.custom;
+  const label = customProps?.label || "Edit with Puck";
+  const iconOnly = customProps?.iconOnly || false;
+  const pattern = customProps?.editorPathPattern || "/pages/{id}/edit";
+  const editorPath = pattern.replace("{id}", String(id));
+  if (!id) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginBottom: "1rem" }, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    "a",
+    {
+      href: editorPath,
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: "8px",
+        padding: iconOnly ? "8px" : "10px 16px",
+        backgroundColor: "#2563eb",
+        color: "#fff",
+        borderRadius: "6px",
+        textDecoration: "none",
+        fontSize: "14px",
+        fontWeight: 500,
+        transition: "background-color 0.2s"
+      },
+      onMouseEnter: (e) => {
+        e.currentTarget.style.backgroundColor = "#1d4ed8";
+      },
+      onMouseLeave: (e) => {
+        e.currentTarget.style.backgroundColor = "#2563eb";
+      },
+      title: iconOnly ? label : void 0,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(PuckIcon, { size: iconOnly ? 20 : 18 }),
+        !iconOnly && label
+      ]
+    }
+  ) });
+};
+function EditWithPuckLink({
+  id,
+  editorPathPattern = "/pages/{id}/edit",
+  label = "Edit with Puck",
+  iconOnly = false
+}) {
+  const path = editorPathPattern.replace("{id}", id);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "a",
+    {
+      href: path,
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: "8px",
+        padding: iconOnly ? "8px" : "10px 16px",
+        backgroundColor: "#2563eb",
+        color: "#fff",
+        borderRadius: "6px",
+        textDecoration: "none",
+        fontSize: "14px",
+        fontWeight: 500,
+        transition: "background-color 0.2s"
+      },
+      onMouseEnter: (e) => {
+        e.currentTarget.style.backgroundColor = "#1d4ed8";
+      },
+      onMouseLeave: (e) => {
+        e.currentTarget.style.backgroundColor = "#2563eb";
+      },
+      title: iconOnly ? label : void 0,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(PuckIcon, { size: iconOnly ? 20 : 18 }),
+        !iconOnly && label
+      ]
+    }
+  );
+}
+function PuckIcon2({ size = 16 }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" }),
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18.375 2.625a2.121 2.121 0 1 1 3 3L12 15l-4 1 1-4Z" })
+      ]
+    }
+  );
+}
+var EditWithPuckCell = ({
+  rowData,
+  field,
+  collectionSlug: contextCollectionSlug
+}) => {
+  const id = rowData?.id;
+  const customConfig = field?.custom;
+  const collectionSlug = customConfig?.collectionSlug || contextCollectionSlug || "pages";
+  if (!id) {
+    return null;
+  }
+  const editorPath = customConfig?.editorPathPattern ? customConfig.editorPathPattern.replace("{id}", id).replace("{collectionSlug}", collectionSlug) : `/admin/puck/${collectionSlug}/${id}/edit`;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "a",
+    {
+      href: editorPath,
+      onClick: (e) => e.stopPropagation(),
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: "6px 10px",
+        backgroundColor: "#2563eb",
+        color: "#fff",
+        borderRadius: "4px",
+        textDecoration: "none",
+        fontSize: "12px",
+        fontWeight: 500,
+        gap: "4px",
+        transition: "background-color 0.2s",
+        whiteSpace: "nowrap"
+      },
+      onMouseEnter: (e) => {
+        e.currentTarget.style.backgroundColor = "#1d4ed8";
+      },
+      onMouseLeave: (e) => {
+        e.currentTarget.style.backgroundColor = "#2563eb";
+      },
+      title: "Edit with Puck Visual Editor",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(PuckIcon2, { size: 14 }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Visual Editor" })
+      ]
+    }
+  );
+};
+
+exports.EditWithPuckButton = EditWithPuckButton;
+exports.EditWithPuckCell = EditWithPuckCell;
+exports.EditWithPuckLink = EditWithPuckLink;
+//# sourceMappingURL=client.js.map
+//# sourceMappingURL=client.js.map

package/dist/admin/client.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/admin/EditWithPuckButton.tsx","../../src/admin/EditWithPuckCell.tsx"],"names":["jsxs","jsx","useDocumentInfo","PuckIcon"],"mappings":"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","file":"client.js","sourcesContent":["'use client'\n\nimport type { UIFieldClientComponent } from 'payload'\nimport { useDocumentInfo } from '@payloadcms/ui'\n\n/**\n * Props for EditWithPuckButton when used standalone\n */\nexport interface EditWithPuckButtonProps {\n  /**\n   * Document ID to edit\n   */\n  id?: string\n  /**\n   * Collection slug\n   * @default 'pages'\n   */\n  collectionSlug?: string\n  /**\n   * Custom path pattern for the Puck editor\n   * Use {id} as placeholder for the document ID\n   * @default '/pages/{id}/edit'\n   */\n  editorPathPattern?: string\n  /**\n   * Button label\n   * @default 'Edit with Puck'\n   */\n  label?: string\n  /**\n   * Whether to show as icon only\n   * @default false\n   */\n  iconOnly?: boolean\n}\n\n/**\n * Pencil/Edit icon component\n */\nfunction PuckIcon({ size = 18 }: { size?: number }) {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    >\n      <path d=\"M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" />\n      <path d=\"M18.375 2.625a2.121 2.121 0 1 1 3 3L12 15l-4 1 1-4Z\" />\n    </svg>\n  )\n}\n\n/**\n * Edit with Puck button for use in Payload admin document edit views\n *\n * Links to a Puck editor page outside of Payload admin. Configure the\n * `editorPathPattern` to match your editor route.\n *\n * @example\n * ```tsx\n * // In your Payload collection config:\n * {\n *   name: 'puckEdit',\n *   type: 'ui',\n *   admin: {\n *     position: 'sidebar',\n *     components: {\n *       Field: '@delmaredigital/payload-puck/admin/client#EditWithPuckButton',\n *     },\n *     custom: {\n *       editorPathPattern: '/pages/{id}/edit', // Your editor route\n *       label: 'Visual Editor',\n *     },\n *   },\n * }\n * ```\n */\nexport const EditWithPuckButton: UIFieldClientComponent = (props) => {\n  // Get document context from Payload\n  const { id } = useDocumentInfo()\n\n  // Extract custom props passed via field config\n  const customProps = (props as any)?.field?.custom as EditWithPuckButtonProps | undefined\n  const label = customProps?.label || 'Edit with Puck'\n  const iconOnly = customProps?.iconOnly || false\n\n  // Build editor URL from pattern (default: /pages/{id}/edit)\n  const pattern = customProps?.editorPathPattern || '/pages/{id}/edit'\n  const editorPath = pattern.replace('{id}', String(id))\n\n  if (!id) {\n    return null\n  }\n\n  return (\n    <div style={{ marginBottom: '1rem' }}>\n      <a\n        href={editorPath}\n        style={{\n          display: 'inline-flex',\n          alignItems: 'center',\n          gap: '8px',\n          padding: iconOnly ? '8px' : '10px 16px',\n          backgroundColor: '#2563eb',\n          color: '#fff',\n          borderRadius: '6px',\n          textDecoration: 'none',\n          fontSize: '14px',\n          fontWeight: 500,\n          transition: 'background-color 0.2s',\n        }}\n        onMouseEnter={(e) => {\n          e.currentTarget.style.backgroundColor = '#1d4ed8'\n        }}\n        onMouseLeave={(e) => {\n          e.currentTarget.style.backgroundColor = '#2563eb'\n        }}\n        title={iconOnly ? label : undefined}\n      >\n        <PuckIcon size={iconOnly ? 20 : 18} />\n        {!iconOnly && label}\n      </a>\n    </div>\n  )\n}\n\n/**\n * Standalone version of the button that doesn't rely on Payload context\n */\nexport function EditWithPuckLink({\n  id,\n  editorPathPattern = '/pages/{id}/edit',\n  label = 'Edit with Puck',\n  iconOnly = false,\n}: EditWithPuckButtonProps & { id: string }) {\n  const path = editorPathPattern.replace('{id}', id)\n\n  return (\n    <a\n      href={path}\n      style={{\n        display: 'inline-flex',\n        alignItems: 'center',\n        gap: '8px',\n        padding: iconOnly ? '8px' : '10px 16px',\n        backgroundColor: '#2563eb',\n        color: '#fff',\n        borderRadius: '6px',\n        textDecoration: 'none',\n        fontSize: '14px',\n        fontWeight: 500,\n        transition: 'background-color 0.2s',\n      }}\n      onMouseEnter={(e) => {\n        e.currentTarget.style.backgroundColor = '#1d4ed8'\n      }}\n      onMouseLeave={(e) => {\n        e.currentTarget.style.backgroundColor = '#2563eb'\n      }}\n      title={iconOnly ? label : undefined}\n    >\n      <PuckIcon size={iconOnly ? 20 : 18} />\n      {!iconOnly && label}\n    </a>\n  )\n}\n\nexport default EditWithPuckButton\n","'use client'\n\nimport type { DefaultCellComponentProps } from 'payload'\n\n/**\n * Props for configuring the EditWithPuckCell component\n */\nexport interface EditWithPuckCellConfig {\n  /**\n   * Collection slug for building the editor URL\n   * @default 'pages'\n   */\n  collectionSlug?: string\n  /**\n   * Custom editor path pattern\n   * Use {id} as placeholder for the document ID\n   * @default '/admin/puck/{collectionSlug}/{id}/edit'\n   */\n  editorPathPattern?: string\n}\n\n/**\n * Pencil/Edit icon component\n */\nfunction PuckIcon({ size = 16 }: { size?: number }) {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    >\n      <path d=\"M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" />\n      <path d=\"M18.375 2.625a2.121 2.121 0 1 1 3 3L12 15l-4 1 1-4Z\" />\n    </svg>\n  )\n}\n\n/**\n * Custom cell component that renders an \"Edit with Puck\" button in list views\n *\n * Add this to a UI field in your collection to show the visual editor button\n * in the list view table.\n *\n * @example\n * ```ts\n * // In your collection config:\n * {\n *   name: 'puckEdit',\n *   type: 'ui',\n *   admin: {\n *     components: {\n *       Cell: '@delmaredigital/payload-puck/admin#EditWithPuckCell',\n *     },\n *     custom: {\n *       collectionSlug: 'pages',\n *     },\n *   },\n * }\n * ```\n */\nexport const EditWithPuckCell: React.FC<DefaultCellComponentProps> = ({\n  rowData,\n  field,\n  collectionSlug: contextCollectionSlug,\n}) => {\n  // Get document ID from row data\n  const id = rowData?.id as string | undefined\n\n  // Get custom config from field\n  const customConfig = (field as any)?.custom as EditWithPuckCellConfig | undefined\n  const collectionSlug = customConfig?.collectionSlug || contextCollectionSlug || 'pages'\n\n  if (!id) {\n    return null\n  }\n\n  // Build editor URL\n  const editorPath = customConfig?.editorPathPattern\n    ? customConfig.editorPathPattern.replace('{id}', id).replace('{collectionSlug}', collectionSlug)\n    : `/admin/puck/${collectionSlug}/${id}/edit`\n\n  return (\n    <a\n      href={editorPath}\n      onClick={(e) => e.stopPropagation()}\n      style={{\n        display: 'inline-flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n        padding: '6px 10px',\n        backgroundColor: '#2563eb',\n        color: '#fff',\n        borderRadius: '4px',\n        textDecoration: 'none',\n        fontSize: '12px',\n        fontWeight: 500,\n        gap: '4px',\n        transition: 'background-color 0.2s',\n        whiteSpace: 'nowrap',\n      }}\n      onMouseEnter={(e) => {\n        e.currentTarget.style.backgroundColor = '#1d4ed8'\n      }}\n      onMouseLeave={(e) => {\n        e.currentTarget.style.backgroundColor = '#2563eb'\n      }}\n      title=\"Edit with Puck Visual Editor\"\n    >\n      <PuckIcon size={14} />\n      <span>Visual Editor</span>\n    </a>\n  )\n}\n\nexport default EditWithPuckCell\n"]}

package/dist/admin/client.mjs

@@ -0,0 +1,173 @@
+"use client";
+import { useDocumentInfo } from '@payloadcms/ui';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function PuckIcon({ size = 18 }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" }),
+        /* @__PURE__ */ jsx("path", { d: "M18.375 2.625a2.121 2.121 0 1 1 3 3L12 15l-4 1 1-4Z" })
+      ]
+    }
+  );
+}
+var EditWithPuckButton = (props) => {
+  const { id } = useDocumentInfo();
+  const customProps = props?.field?.custom;
+  const label = customProps?.label || "Edit with Puck";
+  const iconOnly = customProps?.iconOnly || false;
+  const pattern = customProps?.editorPathPattern || "/pages/{id}/edit";
+  const editorPath = pattern.replace("{id}", String(id));
+  if (!id) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx("div", { style: { marginBottom: "1rem" }, children: /* @__PURE__ */ jsxs(
+    "a",
+    {
+      href: editorPath,
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: "8px",
+        padding: iconOnly ? "8px" : "10px 16px",
+        backgroundColor: "#2563eb",
+        color: "#fff",
+        borderRadius: "6px",
+        textDecoration: "none",
+        fontSize: "14px",
+        fontWeight: 500,
+        transition: "background-color 0.2s"
+      },
+      onMouseEnter: (e) => {
+        e.currentTarget.style.backgroundColor = "#1d4ed8";
+      },
+      onMouseLeave: (e) => {
+        e.currentTarget.style.backgroundColor = "#2563eb";
+      },
+      title: iconOnly ? label : void 0,
+      children: [
+        /* @__PURE__ */ jsx(PuckIcon, { size: iconOnly ? 20 : 18 }),
+        !iconOnly && label
+      ]
+    }
+  ) });
+};
+function EditWithPuckLink({
+  id,
+  editorPathPattern = "/pages/{id}/edit",
+  label = "Edit with Puck",
+  iconOnly = false
+}) {
+  const path = editorPathPattern.replace("{id}", id);
+  return /* @__PURE__ */ jsxs(
+    "a",
+    {
+      href: path,
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: "8px",
+        padding: iconOnly ? "8px" : "10px 16px",
+        backgroundColor: "#2563eb",
+        color: "#fff",
+        borderRadius: "6px",
+        textDecoration: "none",
+        fontSize: "14px",
+        fontWeight: 500,
+        transition: "background-color 0.2s"
+      },
+      onMouseEnter: (e) => {
+        e.currentTarget.style.backgroundColor = "#1d4ed8";
+      },
+      onMouseLeave: (e) => {
+        e.currentTarget.style.backgroundColor = "#2563eb";
+      },
+      title: iconOnly ? label : void 0,
+      children: [
+        /* @__PURE__ */ jsx(PuckIcon, { size: iconOnly ? 20 : 18 }),
+        !iconOnly && label
+      ]
+    }
+  );
+}
+function PuckIcon2({ size = 16 }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" }),
+        /* @__PURE__ */ jsx("path", { d: "M18.375 2.625a2.121 2.121 0 1 1 3 3L12 15l-4 1 1-4Z" })
+      ]
+    }
+  );
+}
+var EditWithPuckCell = ({
+  rowData,
+  field,
+  collectionSlug: contextCollectionSlug
+}) => {
+  const id = rowData?.id;
+  const customConfig = field?.custom;
+  const collectionSlug = customConfig?.collectionSlug || contextCollectionSlug || "pages";
+  if (!id) {
+    return null;
+  }
+  const editorPath = customConfig?.editorPathPattern ? customConfig.editorPathPattern.replace("{id}", id).replace("{collectionSlug}", collectionSlug) : `/admin/puck/${collectionSlug}/${id}/edit`;
+  return /* @__PURE__ */ jsxs(
+    "a",
+    {
+      href: editorPath,
+      onClick: (e) => e.stopPropagation(),
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: "6px 10px",
+        backgroundColor: "#2563eb",
+        color: "#fff",
+        borderRadius: "4px",
+        textDecoration: "none",
+        fontSize: "12px",
+        fontWeight: 500,
+        gap: "4px",
+        transition: "background-color 0.2s",
+        whiteSpace: "nowrap"
+      },
+      onMouseEnter: (e) => {
+        e.currentTarget.style.backgroundColor = "#1d4ed8";
+      },
+      onMouseLeave: (e) => {
+        e.currentTarget.style.backgroundColor = "#2563eb";
+      },
+      title: "Edit with Puck Visual Editor",
+      children: [
+        /* @__PURE__ */ jsx(PuckIcon2, { size: 14 }),
+        /* @__PURE__ */ jsx("span", { children: "Visual Editor" })
+      ]
+    }
+  );
+};
+
+export { EditWithPuckButton, EditWithPuckCell, EditWithPuckLink };
+//# sourceMappingURL=client.mjs.map
+//# sourceMappingURL=client.mjs.map

package/dist/admin/client.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/admin/EditWithPuckButton.tsx","../../src/admin/EditWithPuckCell.tsx"],"names":["PuckIcon","jsxs","jsx"],"mappings":"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","file":"client.mjs","sourcesContent":["'use client'\n\nimport type { UIFieldClientComponent } from 'payload'\nimport { useDocumentInfo } from '@payloadcms/ui'\n\n/**\n * Props for EditWithPuckButton when used standalone\n */\nexport interface EditWithPuckButtonProps {\n  /**\n   * Document ID to edit\n   */\n  id?: string\n  /**\n   * Collection slug\n   * @default 'pages'\n   */\n  collectionSlug?: string\n  /**\n   * Custom path pattern for the Puck editor\n   * Use {id} as placeholder for the document ID\n   * @default '/pages/{id}/edit'\n   */\n  editorPathPattern?: string\n  /**\n   * Button label\n   * @default 'Edit with Puck'\n   */\n  label?: string\n  /**\n   * Whether to show as icon only\n   * @default false\n   */\n  iconOnly?: boolean\n}\n\n/**\n * Pencil/Edit icon component\n */\nfunction PuckIcon({ size = 18 }: { size?: number }) {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    >\n      <path d=\"M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" />\n      <path d=\"M18.375 2.625a2.121 2.121 0 1 1 3 3L12 15l-4 1 1-4Z\" />\n    </svg>\n  )\n}\n\n/**\n * Edit with Puck button for use in Payload admin document edit views\n *\n * Links to a Puck editor page outside of Payload admin. Configure the\n * `editorPathPattern` to match your editor route.\n *\n * @example\n * ```tsx\n * // In your Payload collection config:\n * {\n *   name: 'puckEdit',\n *   type: 'ui',\n *   admin: {\n *     position: 'sidebar',\n *     components: {\n *       Field: '@delmaredigital/payload-puck/admin/client#EditWithPuckButton',\n *     },\n *     custom: {\n *       editorPathPattern: '/pages/{id}/edit', // Your editor route\n *       label: 'Visual Editor',\n *     },\n *   },\n * }\n * ```\n */\nexport const EditWithPuckButton: UIFieldClientComponent = (props) => {\n  // Get document context from Payload\n  const { id } = useDocumentInfo()\n\n  // Extract custom props passed via field config\n  const customProps = (props as any)?.field?.custom as EditWithPuckButtonProps | undefined\n  const label = customProps?.label || 'Edit with Puck'\n  const iconOnly = customProps?.iconOnly || false\n\n  // Build editor URL from pattern (default: /pages/{id}/edit)\n  const pattern = customProps?.editorPathPattern || '/pages/{id}/edit'\n  const editorPath = pattern.replace('{id}', String(id))\n\n  if (!id) {\n    return null\n  }\n\n  return (\n    <div style={{ marginBottom: '1rem' }}>\n      <a\n        href={editorPath}\n        style={{\n          display: 'inline-flex',\n          alignItems: 'center',\n          gap: '8px',\n          padding: iconOnly ? '8px' : '10px 16px',\n          backgroundColor: '#2563eb',\n          color: '#fff',\n          borderRadius: '6px',\n          textDecoration: 'none',\n          fontSize: '14px',\n          fontWeight: 500,\n          transition: 'background-color 0.2s',\n        }}\n        onMouseEnter={(e) => {\n          e.currentTarget.style.backgroundColor = '#1d4ed8'\n        }}\n        onMouseLeave={(e) => {\n          e.currentTarget.style.backgroundColor = '#2563eb'\n        }}\n        title={iconOnly ? label : undefined}\n      >\n        <PuckIcon size={iconOnly ? 20 : 18} />\n        {!iconOnly && label}\n      </a>\n    </div>\n  )\n}\n\n/**\n * Standalone version of the button that doesn't rely on Payload context\n */\nexport function EditWithPuckLink({\n  id,\n  editorPathPattern = '/pages/{id}/edit',\n  label = 'Edit with Puck',\n  iconOnly = false,\n}: EditWithPuckButtonProps & { id: string }) {\n  const path = editorPathPattern.replace('{id}', id)\n\n  return (\n    <a\n      href={path}\n      style={{\n        display: 'inline-flex',\n        alignItems: 'center',\n        gap: '8px',\n        padding: iconOnly ? '8px' : '10px 16px',\n        backgroundColor: '#2563eb',\n        color: '#fff',\n        borderRadius: '6px',\n        textDecoration: 'none',\n        fontSize: '14px',\n        fontWeight: 500,\n        transition: 'background-color 0.2s',\n      }}\n      onMouseEnter={(e) => {\n        e.currentTarget.style.backgroundColor = '#1d4ed8'\n      }}\n      onMouseLeave={(e) => {\n        e.currentTarget.style.backgroundColor = '#2563eb'\n      }}\n      title={iconOnly ? label : undefined}\n    >\n      <PuckIcon size={iconOnly ? 20 : 18} />\n      {!iconOnly && label}\n    </a>\n  )\n}\n\nexport default EditWithPuckButton\n","'use client'\n\nimport type { DefaultCellComponentProps } from 'payload'\n\n/**\n * Props for configuring the EditWithPuckCell component\n */\nexport interface EditWithPuckCellConfig {\n  /**\n   * Collection slug for building the editor URL\n   * @default 'pages'\n   */\n  collectionSlug?: string\n  /**\n   * Custom editor path pattern\n   * Use {id} as placeholder for the document ID\n   * @default '/admin/puck/{collectionSlug}/{id}/edit'\n   */\n  editorPathPattern?: string\n}\n\n/**\n * Pencil/Edit icon component\n */\nfunction PuckIcon({ size = 16 }: { size?: number }) {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    >\n      <path d=\"M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" />\n      <path d=\"M18.375 2.625a2.121 2.121 0 1 1 3 3L12 15l-4 1 1-4Z\" />\n    </svg>\n  )\n}\n\n/**\n * Custom cell component that renders an \"Edit with Puck\" button in list views\n *\n * Add this to a UI field in your collection to show the visual editor button\n * in the list view table.\n *\n * @example\n * ```ts\n * // In your collection config:\n * {\n *   name: 'puckEdit',\n *   type: 'ui',\n *   admin: {\n *     components: {\n *       Cell: '@delmaredigital/payload-puck/admin#EditWithPuckCell',\n *     },\n *     custom: {\n *       collectionSlug: 'pages',\n *     },\n *   },\n * }\n * ```\n */\nexport const EditWithPuckCell: React.FC<DefaultCellComponentProps> = ({\n  rowData,\n  field,\n  collectionSlug: contextCollectionSlug,\n}) => {\n  // Get document ID from row data\n  const id = rowData?.id as string | undefined\n\n  // Get custom config from field\n  const customConfig = (field as any)?.custom as EditWithPuckCellConfig | undefined\n  const collectionSlug = customConfig?.collectionSlug || contextCollectionSlug || 'pages'\n\n  if (!id) {\n    return null\n  }\n\n  // Build editor URL\n  const editorPath = customConfig?.editorPathPattern\n    ? customConfig.editorPathPattern.replace('{id}', id).replace('{collectionSlug}', collectionSlug)\n    : `/admin/puck/${collectionSlug}/${id}/edit`\n\n  return (\n    <a\n      href={editorPath}\n      onClick={(e) => e.stopPropagation()}\n      style={{\n        display: 'inline-flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n        padding: '6px 10px',\n        backgroundColor: '#2563eb',\n        color: '#fff',\n        borderRadius: '4px',\n        textDecoration: 'none',\n        fontSize: '12px',\n        fontWeight: 500,\n        gap: '4px',\n        transition: 'background-color 0.2s',\n        whiteSpace: 'nowrap',\n      }}\n      onMouseEnter={(e) => {\n        e.currentTarget.style.backgroundColor = '#1d4ed8'\n      }}\n      onMouseLeave={(e) => {\n        e.currentTarget.style.backgroundColor = '#2563eb'\n      }}\n      title=\"Edit with Puck Visual Editor\"\n    >\n      <PuckIcon size={14} />\n      <span>Visual Editor</span>\n    </a>\n  )\n}\n\nexport default EditWithPuckCell\n"]}