payload-nested-docs-page-tree 1.5.0 → 1.5.1

package/README.md

@@ -114,18 +114,20 @@ https://github.com/user-attachments/assets/e5fdb350-4740-4d80-9811-8c23deaf8701
 
 Enable `badgesLinks` as shown in [Setup](#setup).
 
-Published badges open live; draft-only badges open preview. For drafts with a published version, choose:
+Published badges open live with a right-side link icon; draft-only badges open preview with a right-side eye icon. Because drafts with a published version has two (live and draft) states, choose:
 
 | Value | Behavior |
 | --- | --- |
-| `'live'` | Badge opens live |
-| `'preview'` | Badge opens preview |
-| `'both'` (default) | Body opens live; right-side icon opens preview |
+| `'live'` | Whole badge, including the right-side link icon, opens live |
+| `'preview'` | Whole badge, including the right-side eye icon, opens preview |
+| `'both'` (default) | Body with link icon opens live; eye icon after a separator opens preview |
 
 - **Live:** Uses the published document's last breadcrumb URL and `liveURL`. Breadcrumbs must match your frontend routes. Omit `liveURL` for preview links only.
 - **Preview:** Uses the collection's [`admin.preview`](https://payloadcms.com/docs/admin/preview) callback. Your frontend must serve draft content.
 
-All links open in new tabs. Omit `badgesLinks` to keep badges unlinked, even with preview configured.
+All links open in new tabs. Unlinked badges have no icon. Omit `badgesLinks` to keep badges unlinked, even with preview configured.
+
+`badgesLinks.showIcons` defaults to `true`: live links use Payload's chain-link `LinkIcon`, and preview links use `EyeIcon`. Set it to `false` to hide inline badge icons; in `'both'` mode, the separate preview action still shows `ExternalLinkIcon` after the separator.
 
 <details>
 <summary>URL resolution and unavailable links</summary>
@@ -208,6 +210,7 @@ export const plugins = [
     },
 
     badgesLinks: { // Omit to disable links; preview uses collection admin.preview.
+      showIcons: true, // Default; false hides inline icons and keeps the split preview action.
       draftHasPublishedVersion: 'both', // 'live' | 'preview' | 'both'
       liveURL: 'https://www.example.com', // Base URL for the published breadcrumb path.
     },

package/dist/components/PageTreeListView.module.css

@@ -300,14 +300,10 @@
 
 .root :global(a.pages-hierarchy-status-badge),
 .root :global(.pages-hierarchy-status-badge__body) {
+  gap: 0.32rem;
   text-decoration: none;
 }
 
-.root :global(a.pages-hierarchy-status-badge:hover),
-.root :global(a.pages-hierarchy-status-badge__body:hover) {
-  text-decoration: underline;
-}
-
 .root :global(.pages-hierarchy-status-badge--split) {
   align-items: stretch;
   padding: 0;
@@ -318,7 +314,7 @@
   align-items: center;
   border-radius: 4px 0 0 4px;
   display: inline-flex;
-  padding: 0.32rem 0.32rem 0.32rem 0.72rem;
+  padding: 0.32rem 0.52rem;
 }
 
 .root :global(.pages-hierarchy-status-badge__preview) {
@@ -326,17 +322,41 @@
   align-items: center;
   justify-content: center;
   background: transparent;
+  border-inline-start: 1px solid color-mix(in srgb, currentColor 25%, transparent);
   border-radius: 0 4px 4px 0;
   color: inherit;
   min-inline-size: 24px;
   min-block-size: 20px;
-  padding: 0;
+  padding: 0 0.52rem 0 0.42rem;
   text-decoration: none;
 }
 
-.root :global(.pages-hierarchy-status-badge__preview .icon--externalLink) {
+.root :global(.pages-hierarchy-status-badge__icon) {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.root :global(.pages-hierarchy-status-badge__icon:has(.icon--link)) {
+  justify-content: center;
   width: 12px;
   height: 12px;
+  overflow: hidden;
+}
+
+.root :global(.pages-hierarchy-status-badge__icon .icon) {
+  width: 12px;
+  height: 12px;
+}
+
+.root :global(.pages-hierarchy-status-badge__icon .icon--link) {
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+}
+
+.root :global(.pages-hierarchy-status-badge__icon .icon .stroke) {
+  vector-effect: non-scaling-stroke;
 }
 
 .root :global(a.pages-hierarchy-status-badge:hover),

package/dist/components/PageTreeStatusBadge.js

@@ -1,6 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ExternalLinkIcon, useTranslation } from '@payloadcms/ui';
+import { ExternalLinkIcon, LinkIcon, useTranslation } from '@payloadcms/ui';
+import { EyeIcon } from '@payloadcms/ui/icons/Eye';
 import React from 'react';
 import { getPageTreeBadgeColor, getPageTreeBadgeLabel, getPageTreeDisplayStatus } from '../utilities/status.js';
 export function PageTreeStatusBadge({ badgeConfig, badgesLinks, doc }) {
@@ -20,6 +21,7 @@ export function PageTreeStatusBadge({ badgeConfig, badgesLinks, doc }) {
     const publicURL = badgesLinks ? doc.__pageTreeStatusLinks?.publicURL : undefined;
     const previewURL = badgesLinks ? doc.__pageTreeStatusLinks?.previewURL : undefined;
     const mode = badgesLinks?.draftHasPublishedVersion ?? 'both';
+    const showIcons = badgesLinks?.showIcons ?? true;
     const split = status === 'changed' && mode === 'both' && Boolean(previewURL);
     const opensPreview = status === 'draft' || status === 'changed' && mode === 'preview';
     const href = opensPreview ? previewURL : status === 'published' || status === 'changed' ? publicURL : undefined;
@@ -39,10 +41,19 @@ export function PageTreeStatusBadge({ badgeConfig, badgesLinks, doc }) {
         title: `${opensPreview ? previewLabel : 'Live'} (${openInNewTabLabel})`
     };
     if (!split) {
-        return href ? /*#__PURE__*/ _jsx("a", {
+        return href ? /*#__PURE__*/ _jsxs("a", {
             ...badgeProps,
             ...linkProps,
-            children: label
+            children: [
+                label,
+                showIcons && /*#__PURE__*/ _jsx("span", {
+                    "aria-hidden": "true",
+                    className: "pages-hierarchy-status-badge__icon",
+                    children: opensPreview ? /*#__PURE__*/ _jsx(EyeIcon, {
+                        active: false
+                    }) : /*#__PURE__*/ _jsx(LinkIcon, {})
+                })
+            ]
         }) : /*#__PURE__*/ _jsx("span", {
             ...badgeProps,
             children: label
@@ -51,10 +62,17 @@ export function PageTreeStatusBadge({ badgeConfig, badgesLinks, doc }) {
     return /*#__PURE__*/ _jsxs("span", {
         ...badgeProps,
         children: [
-            href ? /*#__PURE__*/ _jsx("a", {
+            href ? /*#__PURE__*/ _jsxs("a", {
                 ...linkProps,
                 className: "pages-hierarchy-status-badge__body",
-                children: label
+                children: [
+                    label,
+                    showIcons && /*#__PURE__*/ _jsx("span", {
+                        "aria-hidden": "true",
+                        className: "pages-hierarchy-status-badge__icon",
+                        children: /*#__PURE__*/ _jsx(LinkIcon, {})
+                    })
+                ]
             }) : /*#__PURE__*/ _jsx("span", {
                 className: "pages-hierarchy-status-badge__body",
                 children: label
@@ -67,7 +85,10 @@ export function PageTreeStatusBadge({ badgeConfig, badgesLinks, doc }) {
                 title: `${previewLabel} (${openInNewTabLabel})`,
                 children: /*#__PURE__*/ _jsx("span", {
                     "aria-hidden": "true",
-                    children: /*#__PURE__*/ _jsx(ExternalLinkIcon, {})
+                    className: "pages-hierarchy-status-badge__icon",
+                    children: showIcons ? /*#__PURE__*/ _jsx(EyeIcon, {
+                        active: false
+                    }) : /*#__PURE__*/ _jsx(ExternalLinkIcon, {})
                 })
             })
         ]

package/dist/components/PageTreeStatusBadge.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/PageTreeStatusBadge.tsx"],"sourcesContent":["'use client'\n\nimport { ExternalLinkIcon, useTranslation } from '@payloadcms/ui'\nimport React from 'react'\n\nimport type {\n  NestedDocsPageTreePluginBadgesLinks,\n  NestedDocsPageTreePluginResolvedBadgeConfig,\n  PageTreeSourceDoc,\n} from '../types.js'\n\nimport {\n  getPageTreeBadgeColor,\n  getPageTreeBadgeLabel,\n  getPageTreeDisplayStatus,\n} from '../utilities/status.js'\n\nexport function PageTreeStatusBadge({\n  badgeConfig,\n  badgesLinks,\n  doc,\n}: {\n  badgeConfig: NestedDocsPageTreePluginResolvedBadgeConfig\n  badgesLinks?: NestedDocsPageTreePluginBadgesLinks\n  doc: PageTreeSourceDoc\n}) {\n  const { t } = useTranslation()\n  const status = getPageTreeDisplayStatus(doc)\n  const color = getPageTreeBadgeColor({ badgeColors: badgeConfig.colors, status })\n  const label = getPageTreeBadgeLabel({ badgeLabels: badgeConfig.labels, status, t })\n  const previewLabel = t('version:preview')\n  const openInNewTabLabel = t('fields:openInNewTab')\n  const publicURL = badgesLinks ? doc.__pageTreeStatusLinks?.publicURL : undefined\n  const previewURL = badgesLinks ? doc.__pageTreeStatusLinks?.previewURL : undefined\n  const mode = badgesLinks?.draftHasPublishedVersion ?? 'both'\n  const split = status === 'changed' && mode === 'both' && Boolean(previewURL)\n  const opensPreview = status === 'draft' || (status === 'changed' && mode === 'preview')\n  const href = opensPreview\n    ? previewURL\n    : status === 'published' || status === 'changed'\n      ? publicURL\n      : undefined\n\n  const badgeProps = {\n    className: `pages-hierarchy-status-badge pages-hierarchy-status-badge--${status}${split ? ' pages-hierarchy-status-badge--split' : ''}`,\n    'data-custom-color': color ? 'true' : undefined,\n    style: color ? ({ '--page-tree-badge-base': color } as React.CSSProperties) : undefined,\n  }\n  const linkProps = {\n    href,\n    onClick: (event: React.MouseEvent) => event.stopPropagation(),\n    onPointerDown: (event: React.PointerEvent) => event.stopPropagation(),\n    rel: 'noopener noreferrer',\n    target: '_blank',\n    title: `${opensPreview ? previewLabel : 'Live'} (${openInNewTabLabel})`,\n  }\n\n  if (!split) {\n    return href ? (\n      <a {...badgeProps} {...linkProps}>\n        {label}\n      </a>\n    ) : (\n      <span {...badgeProps}>{label}</span>\n    )\n  }\n\n  return (\n    <span {...badgeProps}>\n      {href ? (\n        <a {...linkProps} className=\"pages-hierarchy-status-badge__body\">\n          {label}\n        </a>\n      ) : (\n        <span className=\"pages-hierarchy-status-badge__body\">{label}</span>\n      )}\n      <a\n        {...linkProps}\n        aria-label={previewLabel}\n        className=\"pages-hierarchy-status-badge__preview\"\n        href={previewURL}\n        title={`${previewLabel} (${openInNewTabLabel})`}\n      >\n        <span aria-hidden=\"true\">\n          <ExternalLinkIcon />\n        </span>\n      </a>\n    </span>\n  )\n}\n"],"names":["ExternalLinkIcon","useTranslation","React","getPageTreeBadgeColor","getPageTreeBadgeLabel","getPageTreeDisplayStatus","PageTreeStatusBadge","badgeConfig","badgesLinks","doc","t","status","color","badgeColors","colors","label","badgeLabels","labels","previewLabel","openInNewTabLabel","publicURL","__pageTreeStatusLinks","undefined","previewURL","mode","draftHasPublishedVersion","split","Boolean","opensPreview","href","badgeProps","className","style","linkProps","onClick","event","stopPropagation","onPointerDown","rel","target","title","a","span","aria-label","aria-hidden"],"mappings":"AAAA;;AAEA,SAASA,gBAAgB,EAAEC,cAAc,QAAQ,iBAAgB;AACjE,OAAOC,WAAW,QAAO;AAQzB,SACEC,qBAAqB,EACrBC,qBAAqB,EACrBC,wBAAwB,QACnB,yBAAwB;AAE/B,OAAO,SAASC,oBAAoB,EAClCC,WAAW,EACXC,WAAW,EACXC,GAAG,EAKJ;IACC,MAAM,EAAEC,CAAC,EAAE,GAAGT;IACd,MAAMU,SAASN,yBAAyBI;IACxC,MAAMG,QAAQT,sBAAsB;QAAEU,aAAaN,YAAYO,MAAM;QAAEH;IAAO;IAC9E,MAAMI,QAAQX,sBAAsB;QAAEY,aAAaT,YAAYU,MAAM;QAAEN;QAAQD;IAAE;IACjF,MAAMQ,eAAeR,EAAE;IACvB,MAAMS,oBAAoBT,EAAE;IAC5B,MAAMU,YAAYZ,cAAcC,IAAIY,qBAAqB,EAAED,YAAYE;IACvE,MAAMC,aAAaf,cAAcC,IAAIY,qBAAqB,EAAEE,aAAaD;IACzE,MAAME,OAAOhB,aAAaiB,4BAA4B;IACtD,MAAMC,QAAQf,WAAW,aAAaa,SAAS,UAAUG,QAAQJ;IACjE,MAAMK,eAAejB,WAAW,WAAYA,WAAW,aAAaa,SAAS;IAC7E,MAAMK,OAAOD,eACTL,aACAZ,WAAW,eAAeA,WAAW,YACnCS,YACAE;IAEN,MAAMQ,aAAa;QACjBC,WAAW,CAAC,2DAA2D,EAAEpB,SAASe,QAAQ,yCAAyC,IAAI;QACvI,qBAAqBd,QAAQ,SAASU;QACtCU,OAAOpB,QAAS;YAAE,0BAA0BA;QAAM,IAA4BU;IAChF;IACA,MAAMW,YAAY;QAChBJ;QACAK,SAAS,CAACC,QAA4BA,MAAMC,eAAe;QAC3DC,eAAe,CAACF,QAA8BA,MAAMC,eAAe;QACnEE,KAAK;QACLC,QAAQ;QACRC,OAAO,GAAGZ,eAAeV,eAAe,OAAO,EAAE,EAAEC,kBAAkB,CAAC,CAAC;IACzE;IAEA,IAAI,CAACO,OAAO;QACV,OAAOG,qBACL,KAACY;YAAG,GAAGX,UAAU;YAAG,GAAGG,SAAS;sBAC7BlB;2BAGH,KAAC2B;YAAM,GAAGZ,UAAU;sBAAGf;;IAE3B;IAEA,qBACE,MAAC2B;QAAM,GAAGZ,UAAU;;YACjBD,qBACC,KAACY;gBAAG,GAAGR,SAAS;gBAAEF,WAAU;0BACzBhB;+BAGH,KAAC2B;gBAAKX,WAAU;0BAAsChB;;0BAExD,KAAC0B;gBACE,GAAGR,SAAS;gBACbU,cAAYzB;gBACZa,WAAU;gBACVF,MAAMN;gBACNiB,OAAO,GAAGtB,aAAa,EAAE,EAAEC,kBAAkB,CAAC,CAAC;0BAE/C,cAAA,KAACuB;oBAAKE,eAAY;8BAChB,cAAA,KAAC5C;;;;;AAKX"}
+{"version":3,"sources":["../../src/components/PageTreeStatusBadge.tsx"],"sourcesContent":["'use client'\n\nimport { ExternalLinkIcon, LinkIcon, useTranslation } from '@payloadcms/ui'\nimport { EyeIcon } from '@payloadcms/ui/icons/Eye'\nimport React from 'react'\n\nimport type {\n  NestedDocsPageTreePluginBadgesLinks,\n  NestedDocsPageTreePluginResolvedBadgeConfig,\n  PageTreeSourceDoc,\n} from '../types.js'\n\nimport {\n  getPageTreeBadgeColor,\n  getPageTreeBadgeLabel,\n  getPageTreeDisplayStatus,\n} from '../utilities/status.js'\n\nexport function PageTreeStatusBadge({\n  badgeConfig,\n  badgesLinks,\n  doc,\n}: {\n  badgeConfig: NestedDocsPageTreePluginResolvedBadgeConfig\n  badgesLinks?: NestedDocsPageTreePluginBadgesLinks\n  doc: PageTreeSourceDoc\n}) {\n  const { t } = useTranslation()\n  const status = getPageTreeDisplayStatus(doc)\n  const color = getPageTreeBadgeColor({ badgeColors: badgeConfig.colors, status })\n  const label = getPageTreeBadgeLabel({ badgeLabels: badgeConfig.labels, status, t })\n  const previewLabel = t('version:preview')\n  const openInNewTabLabel = t('fields:openInNewTab')\n  const publicURL = badgesLinks ? doc.__pageTreeStatusLinks?.publicURL : undefined\n  const previewURL = badgesLinks ? doc.__pageTreeStatusLinks?.previewURL : undefined\n  const mode = badgesLinks?.draftHasPublishedVersion ?? 'both'\n  const showIcons = badgesLinks?.showIcons ?? true\n  const split = status === 'changed' && mode === 'both' && Boolean(previewURL)\n  const opensPreview = status === 'draft' || (status === 'changed' && mode === 'preview')\n  const href = opensPreview\n    ? previewURL\n    : status === 'published' || status === 'changed'\n      ? publicURL\n      : undefined\n\n  const badgeProps = {\n    className: `pages-hierarchy-status-badge pages-hierarchy-status-badge--${status}${split ? ' pages-hierarchy-status-badge--split' : ''}`,\n    'data-custom-color': color ? 'true' : undefined,\n    style: color ? ({ '--page-tree-badge-base': color } as React.CSSProperties) : undefined,\n  }\n  const linkProps = {\n    href,\n    onClick: (event: React.MouseEvent) => event.stopPropagation(),\n    onPointerDown: (event: React.PointerEvent) => event.stopPropagation(),\n    rel: 'noopener noreferrer',\n    target: '_blank',\n    title: `${opensPreview ? previewLabel : 'Live'} (${openInNewTabLabel})`,\n  }\n\n  if (!split) {\n    return href ? (\n      <a {...badgeProps} {...linkProps}>\n        {label}\n        {showIcons && (\n          <span aria-hidden=\"true\" className=\"pages-hierarchy-status-badge__icon\">\n            {opensPreview ? <EyeIcon active={false} /> : <LinkIcon />}\n          </span>\n        )}\n      </a>\n    ) : (\n      <span {...badgeProps}>{label}</span>\n    )\n  }\n\n  return (\n    <span {...badgeProps}>\n      {href ? (\n        <a {...linkProps} className=\"pages-hierarchy-status-badge__body\">\n          {label}\n          {showIcons && (\n            <span aria-hidden=\"true\" className=\"pages-hierarchy-status-badge__icon\">\n              <LinkIcon />\n            </span>\n          )}\n        </a>\n      ) : (\n        <span className=\"pages-hierarchy-status-badge__body\">{label}</span>\n      )}\n      <a\n        {...linkProps}\n        aria-label={previewLabel}\n        className=\"pages-hierarchy-status-badge__preview\"\n        href={previewURL}\n        title={`${previewLabel} (${openInNewTabLabel})`}\n      >\n        <span aria-hidden=\"true\" className=\"pages-hierarchy-status-badge__icon\">\n          {showIcons ? <EyeIcon active={false} /> : <ExternalLinkIcon />}\n        </span>\n      </a>\n    </span>\n  )\n}\n"],"names":["ExternalLinkIcon","LinkIcon","useTranslation","EyeIcon","React","getPageTreeBadgeColor","getPageTreeBadgeLabel","getPageTreeDisplayStatus","PageTreeStatusBadge","badgeConfig","badgesLinks","doc","t","status","color","badgeColors","colors","label","badgeLabels","labels","previewLabel","openInNewTabLabel","publicURL","__pageTreeStatusLinks","undefined","previewURL","mode","draftHasPublishedVersion","showIcons","split","Boolean","opensPreview","href","badgeProps","className","style","linkProps","onClick","event","stopPropagation","onPointerDown","rel","target","title","a","span","aria-hidden","active","aria-label"],"mappings":"AAAA;;AAEA,SAASA,gBAAgB,EAAEC,QAAQ,EAAEC,cAAc,QAAQ,iBAAgB;AAC3E,SAASC,OAAO,QAAQ,2BAA0B;AAClD,OAAOC,WAAW,QAAO;AAQzB,SACEC,qBAAqB,EACrBC,qBAAqB,EACrBC,wBAAwB,QACnB,yBAAwB;AAE/B,OAAO,SAASC,oBAAoB,EAClCC,WAAW,EACXC,WAAW,EACXC,GAAG,EAKJ;IACC,MAAM,EAAEC,CAAC,EAAE,GAAGV;IACd,MAAMW,SAASN,yBAAyBI;IACxC,MAAMG,QAAQT,sBAAsB;QAAEU,aAAaN,YAAYO,MAAM;QAAEH;IAAO;IAC9E,MAAMI,QAAQX,sBAAsB;QAAEY,aAAaT,YAAYU,MAAM;QAAEN;QAAQD;IAAE;IACjF,MAAMQ,eAAeR,EAAE;IACvB,MAAMS,oBAAoBT,EAAE;IAC5B,MAAMU,YAAYZ,cAAcC,IAAIY,qBAAqB,EAAED,YAAYE;IACvE,MAAMC,aAAaf,cAAcC,IAAIY,qBAAqB,EAAEE,aAAaD;IACzE,MAAME,OAAOhB,aAAaiB,4BAA4B;IACtD,MAAMC,YAAYlB,aAAakB,aAAa;IAC5C,MAAMC,QAAQhB,WAAW,aAAaa,SAAS,UAAUI,QAAQL;IACjE,MAAMM,eAAelB,WAAW,WAAYA,WAAW,aAAaa,SAAS;IAC7E,MAAMM,OAAOD,eACTN,aACAZ,WAAW,eAAeA,WAAW,YACnCS,YACAE;IAEN,MAAMS,aAAa;QACjBC,WAAW,CAAC,2DAA2D,EAAErB,SAASgB,QAAQ,yCAAyC,IAAI;QACvI,qBAAqBf,QAAQ,SAASU;QACtCW,OAAOrB,QAAS;YAAE,0BAA0BA;QAAM,IAA4BU;IAChF;IACA,MAAMY,YAAY;QAChBJ;QACAK,SAAS,CAACC,QAA4BA,MAAMC,eAAe;QAC3DC,eAAe,CAACF,QAA8BA,MAAMC,eAAe;QACnEE,KAAK;QACLC,QAAQ;QACRC,OAAO,GAAGZ,eAAeX,eAAe,OAAO,EAAE,EAAEC,kBAAkB,CAAC,CAAC;IACzE;IAEA,IAAI,CAACQ,OAAO;QACV,OAAOG,qBACL,MAACY;YAAG,GAAGX,UAAU;YAAG,GAAGG,SAAS;;gBAC7BnB;gBACAW,2BACC,KAACiB;oBAAKC,eAAY;oBAAOZ,WAAU;8BAChCH,6BAAe,KAAC5B;wBAAQ4C,QAAQ;uCAAY,KAAC9C;;;2BAKpD,KAAC4C;YAAM,GAAGZ,UAAU;sBAAGhB;;IAE3B;IAEA,qBACE,MAAC4B;QAAM,GAAGZ,UAAU;;YACjBD,qBACC,MAACY;gBAAG,GAAGR,SAAS;gBAAEF,WAAU;;oBACzBjB;oBACAW,2BACC,KAACiB;wBAAKC,eAAY;wBAAOZ,WAAU;kCACjC,cAAA,KAACjC;;;+BAKP,KAAC4C;gBAAKX,WAAU;0BAAsCjB;;0BAExD,KAAC2B;gBACE,GAAGR,SAAS;gBACbY,cAAY5B;gBACZc,WAAU;gBACVF,MAAMP;gBACNkB,OAAO,GAAGvB,aAAa,EAAE,EAAEC,kBAAkB,CAAC,CAAC;0BAE/C,cAAA,KAACwB;oBAAKC,eAAY;oBAAOZ,WAAU;8BAChCN,0BAAY,KAACzB;wBAAQ4C,QAAQ;uCAAY,KAAC/C;;;;;AAKrD"}

package/dist/components/PageTreeTitleCell.js

@@ -25,7 +25,8 @@ function ParentMoveHandleIcon() {
             d: "M13.75 4.25L6.25 15.75",
             stroke: "currentColor",
             strokeLinecap: "round",
-            strokeWidth: "2.25"
+            strokeWidth: "1",
+            vectorEffect: "non-scaling-stroke"
         })
     });
 }
@@ -42,7 +43,8 @@ function HomeIndicatorIcon() {
             d: "M2.5 7L7 3L11.5 7V13.25H2.5V7Z",
             stroke: "currentColor",
             strokeLinejoin: "round",
-            strokeWidth: "1.5"
+            strokeWidth: "1",
+            vectorEffect: "non-scaling-stroke"
         })
     });
 }

package/dist/components/PageTreeTitleCell.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/PageTreeTitleCell.tsx"],"sourcesContent":["'use client'\n\nimport { useDraggable } from '@dnd-kit/core'\nimport { ChevronIcon, useListQuery } from '@payloadcms/ui'\nimport React from 'react'\n\nimport type { PageTreeDoc } from '../utilities/pageTree.js'\n\nimport { usePageTree, usePageTreeRowDnd } from './PageTreeContext.js'\n\nconst HOME_PAGE_SLUG = 'home'\n\nfunction isHomePageDoc(doc: PageTreeDoc): boolean {\n  return doc.__pageTreeParentID === null && doc.slug?.trim() === HOME_PAGE_SLUG\n}\n\nfunction normalizeSort(value: string | string[] | undefined): string | undefined {\n  return Array.isArray(value) ? value[0] : value\n}\n\nfunction ParentMoveHandleIcon() {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      className=\"icon icon--drag-handle\"\n      fill=\"none\"\n      height=\"20\"\n      viewBox=\"0 0 20 20\"\n      width=\"20\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        className=\"stroke\"\n        d=\"M13.75 4.25L6.25 15.75\"\n        stroke=\"currentColor\"\n        strokeLinecap=\"round\"\n        strokeWidth=\"2.25\"\n      />\n    </svg>\n  )\n}\n\nfunction HomeIndicatorIcon() {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      className=\"pages-hierarchy-cell__home-icon\"\n      fill=\"none\"\n      height=\"14\"\n      viewBox=\"0 0 14 14\"\n      width=\"14\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M2.5 7L7 3L11.5 7V13.25H2.5V7Z\"\n        stroke=\"currentColor\"\n        strokeLinejoin=\"round\"\n        strokeWidth=\"1.5\"\n      />\n    </svg>\n  )\n}\n\nexport function PageTreeTitleCell({\n  children,\n  doc,\n  homeIndicatorEnabled,\n}: {\n  children: React.ReactNode\n  doc: PageTreeDoc\n  homeIndicatorEnabled: boolean\n}) {\n  const {\n    activeDragRowID,\n    canMoveDocs,\n    collapsedIDs,\n    parentMoveEnabled,\n    pendingMoveRowID,\n    toggleRow,\n  } = usePageTree()\n  const rowDnd = usePageTreeRowDnd()\n  const { orderableFieldName, query = {} } = useListQuery()\n  const depth = doc.__pageTreeDepth\n  const hasChildren = doc.__pageTreeHasChildren\n  const shadeLevel = Math.min(doc.__pageTreeShadeLevel, 6)\n  const rowID = doc.__pageTreeID\n  const isCollapsed = hasChildren && collapsedIDs.has(rowID)\n  const dragIsDisabled = !canMoveDocs || !rowID || pendingMoveRowID !== null\n  const showHomeIcon = homeIndicatorEnabled && isHomePageDoc(doc)\n  const parentMoveDrag = useDraggable({\n    id: `page-drag:${rowID}`,\n    data: {\n      dragType: 'move',\n      rowID,\n    },\n    disabled: dragIsDisabled,\n  })\n  const querySort = normalizeSort(query.sort)\n  const showOrderableHandle =\n    canMoveDocs &&\n    Boolean(orderableFieldName) &&\n    (querySort === orderableFieldName || querySort === `-${orderableFieldName}`)\n  const isActiveDragRow = activeDragRowID === rowID\n  const isDragging = parentMoveDrag.isDragging || rowDnd?.isOrderDragging || isActiveDragRow\n\n  return (\n    <div\n      className=\"pages-hierarchy-cell\"\n      data-row-dragging={isDragging ? 'true' : 'false'}\n      data-tree-depth={depth}\n      data-tree-has-children={hasChildren ? 'true' : 'false'}\n      data-tree-home={showHomeIcon ? 'true' : undefined}\n      data-tree-shade-level={shadeLevel}\n      style={{ '--pages-tree-depth': String(depth) } as React.CSSProperties}\n    >\n      {hasChildren ? (\n        <button\n          aria-expanded={!isCollapsed}\n          aria-label={isCollapsed ? 'Expand nested items' : 'Collapse nested items'}\n          className=\"pages-hierarchy-cell__toggle\"\n          onClick={(event) => {\n            event.preventDefault()\n            event.stopPropagation()\n            toggleRow(rowID)\n          }}\n          type=\"button\"\n        >\n          <ChevronIcon\n            className={[\n              'pages-hierarchy-cell__chevron',\n              isCollapsed ? 'pages-hierarchy-cell__chevron--collapsed' : '',\n            ]\n              .filter(Boolean)\n              .join(' ')}\n          />\n        </button>\n      ) : (\n        <span className=\"pages-hierarchy-cell__spacer\" />\n      )}\n      {showOrderableHandle ? (\n        <button\n          {...(rowDnd?.orderHandleAttributes ?? {})}\n          {...(rowDnd?.orderHandleListeners ?? {})}\n          aria-label=\"Reorder document within this parent\"\n          className={[\n            'pages-hierarchy-cell__drag-handle',\n            'pages-hierarchy-cell__drag-handle--orderable',\n            rowDnd?.isOrderDragging || isActiveDragRow\n              ? 'pages-hierarchy-cell__drag-handle--active'\n              : '',\n          ]\n            .filter(Boolean)\n            .join(' ')}\n          disabled={dragIsDisabled || !rowDnd}\n          onClick={(event) => {\n            event.preventDefault()\n            event.stopPropagation()\n          }}\n          ref={rowDnd?.orderHandleRef}\n          type=\"button\"\n        >\n      <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M7.125 6C7.95343 6 8.625 5.32843 8.625 4.5C8.625 3.67157 7.95343 3 7.125 3C6.29657 3 5.625 3.67157 5.625 4.5C5.625 5.32843 6.29657 6 7.125 6Z\" fill=\"black\"/>\n      <path d=\"M7.125 12C7.95343 12 8.625 11.3284 8.625 10.5C8.625 9.67157 7.95343 9 7.125 9C6.29657 9 5.625 9.67157 5.625 10.5C5.625 11.3284 6.29657 12 7.125 12Z\" fill=\"black\"/>\n      <path d=\"M7.125 18C7.95343 18 8.625 17.3284 8.625 16.5C8.625 15.6716 7.95343 15 7.125 15C6.29657 15 5.625 15.6716 5.625 16.5C5.625 17.3284 6.29657 18 7.125 18Z\" fill=\"black\"/>\n      <path d=\"M12.875 6C13.7034 6 14.375 5.32843 14.375 4.5C14.375 3.67157 13.7034 3 12.875 3C12.0466 3 11.375 3.67157 11.375 4.5C11.375 5.32843 12.0466 6 12.875 6Z\" fill=\"black\"/>\n      <path d=\"M12.875 12C13.7034 12 14.375 11.3284 14.375 10.5C14.375 9.67157 13.7034 9 12.875 9C12.0466 9 11.375 9.67157 11.375 10.5C11.375 11.3284 12.0466 12 12.875 12Z\" fill=\"black\"/>\n      <path d=\"M12.875 18C13.7034 18 14.375 17.3284 14.375 16.5C14.375 15.6716 13.7034 15 12.875 15C12.0466 15 11.375 15.6716 11.375 16.5C11.375 17.3284 12.0466 18 12.875 18Z\" fill=\"black\"/>\n      </svg>\n        </button>\n      ) : null}\n      {canMoveDocs && parentMoveEnabled ? (\n        <button\n          {...parentMoveDrag.attributes}\n          {...parentMoveDrag.listeners}\n          aria-label=\"Move document under another page\"\n          className={[\n            'pages-hierarchy-cell__drag-handle',\n            'pages-hierarchy-cell__drag-handle--parent',\n            parentMoveDrag.isDragging || isActiveDragRow\n              ? 'pages-hierarchy-cell__drag-handle--active'\n              : '',\n          ]\n            .filter(Boolean)\n            .join(' ')}\n          disabled={dragIsDisabled}\n          onClick={(event) => {\n            event.preventDefault()\n            event.stopPropagation()\n          }}\n          ref={parentMoveDrag.setNodeRef}\n          type=\"button\"\n        >\n          <ParentMoveHandleIcon />\n        </button>\n      ) : null}\n      <span className=\"pages-hierarchy-cell__content\">\n        {showHomeIcon ? <HomeIndicatorIcon /> : null}\n        {children}\n      </span>\n    </div>\n  )\n}\n"],"names":["useDraggable","ChevronIcon","useListQuery","React","usePageTree","usePageTreeRowDnd","HOME_PAGE_SLUG","isHomePageDoc","doc","__pageTreeParentID","slug","trim","normalizeSort","value","Array","isArray","ParentMoveHandleIcon","svg","aria-hidden","className","fill","height","viewBox","width","xmlns","path","d","stroke","strokeLinecap","strokeWidth","HomeIndicatorIcon","strokeLinejoin","PageTreeTitleCell","children","homeIndicatorEnabled","activeDragRowID","canMoveDocs","collapsedIDs","parentMoveEnabled","pendingMoveRowID","toggleRow","rowDnd","orderableFieldName","query","depth","__pageTreeDepth","hasChildren","__pageTreeHasChildren","shadeLevel","Math","min","__pageTreeShadeLevel","rowID","__pageTreeID","isCollapsed","has","dragIsDisabled","showHomeIcon","parentMoveDrag","id","data","dragType","disabled","querySort","sort","showOrderableHandle","Boolean","isActiveDragRow","isDragging","isOrderDragging","div","data-row-dragging","data-tree-depth","data-tree-has-children","data-tree-home","undefined","data-tree-shade-level","style","String","button","aria-expanded","aria-label","onClick","event","preventDefault","stopPropagation","type","filter","join","span","orderHandleAttributes","orderHandleListeners","ref","orderHandleRef","attributes","listeners","setNodeRef"],"mappings":"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"}
+{"version":3,"sources":["../../src/components/PageTreeTitleCell.tsx"],"sourcesContent":["'use client'\n\nimport { useDraggable } from '@dnd-kit/core'\nimport { ChevronIcon, useListQuery } from '@payloadcms/ui'\nimport React from 'react'\n\nimport type { PageTreeDoc } from '../utilities/pageTree.js'\n\nimport { usePageTree, usePageTreeRowDnd } from './PageTreeContext.js'\n\nconst HOME_PAGE_SLUG = 'home'\n\nfunction isHomePageDoc(doc: PageTreeDoc): boolean {\n  return doc.__pageTreeParentID === null && doc.slug?.trim() === HOME_PAGE_SLUG\n}\n\nfunction normalizeSort(value: string | string[] | undefined): string | undefined {\n  return Array.isArray(value) ? value[0] : value\n}\n\nfunction ParentMoveHandleIcon() {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      className=\"icon icon--drag-handle\"\n      fill=\"none\"\n      height=\"20\"\n      viewBox=\"0 0 20 20\"\n      width=\"20\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        className=\"stroke\"\n        d=\"M13.75 4.25L6.25 15.75\"\n        stroke=\"currentColor\"\n        strokeLinecap=\"round\"\n        strokeWidth=\"1\"\n        vectorEffect=\"non-scaling-stroke\"\n      />\n    </svg>\n  )\n}\n\nfunction HomeIndicatorIcon() {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      className=\"pages-hierarchy-cell__home-icon\"\n      fill=\"none\"\n      height=\"14\"\n      viewBox=\"0 0 14 14\"\n      width=\"14\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M2.5 7L7 3L11.5 7V13.25H2.5V7Z\"\n        stroke=\"currentColor\"\n        strokeLinejoin=\"round\"\n        strokeWidth=\"1\"\n        vectorEffect=\"non-scaling-stroke\"\n      />\n    </svg>\n  )\n}\n\nexport function PageTreeTitleCell({\n  children,\n  doc,\n  homeIndicatorEnabled,\n}: {\n  children: React.ReactNode\n  doc: PageTreeDoc\n  homeIndicatorEnabled: boolean\n}) {\n  const {\n    activeDragRowID,\n    canMoveDocs,\n    collapsedIDs,\n    parentMoveEnabled,\n    pendingMoveRowID,\n    toggleRow,\n  } = usePageTree()\n  const rowDnd = usePageTreeRowDnd()\n  const { orderableFieldName, query = {} } = useListQuery()\n  const depth = doc.__pageTreeDepth\n  const hasChildren = doc.__pageTreeHasChildren\n  const shadeLevel = Math.min(doc.__pageTreeShadeLevel, 6)\n  const rowID = doc.__pageTreeID\n  const isCollapsed = hasChildren && collapsedIDs.has(rowID)\n  const dragIsDisabled = !canMoveDocs || !rowID || pendingMoveRowID !== null\n  const showHomeIcon = homeIndicatorEnabled && isHomePageDoc(doc)\n  const parentMoveDrag = useDraggable({\n    id: `page-drag:${rowID}`,\n    data: {\n      dragType: 'move',\n      rowID,\n    },\n    disabled: dragIsDisabled,\n  })\n  const querySort = normalizeSort(query.sort)\n  const showOrderableHandle =\n    canMoveDocs &&\n    Boolean(orderableFieldName) &&\n    (querySort === orderableFieldName || querySort === `-${orderableFieldName}`)\n  const isActiveDragRow = activeDragRowID === rowID\n  const isDragging = parentMoveDrag.isDragging || rowDnd?.isOrderDragging || isActiveDragRow\n\n  return (\n    <div\n      className=\"pages-hierarchy-cell\"\n      data-row-dragging={isDragging ? 'true' : 'false'}\n      data-tree-depth={depth}\n      data-tree-has-children={hasChildren ? 'true' : 'false'}\n      data-tree-home={showHomeIcon ? 'true' : undefined}\n      data-tree-shade-level={shadeLevel}\n      style={{ '--pages-tree-depth': String(depth) } as React.CSSProperties}\n    >\n      {hasChildren ? (\n        <button\n          aria-expanded={!isCollapsed}\n          aria-label={isCollapsed ? 'Expand nested items' : 'Collapse nested items'}\n          className=\"pages-hierarchy-cell__toggle\"\n          onClick={(event) => {\n            event.preventDefault()\n            event.stopPropagation()\n            toggleRow(rowID)\n          }}\n          type=\"button\"\n        >\n          <ChevronIcon\n            className={[\n              'pages-hierarchy-cell__chevron',\n              isCollapsed ? 'pages-hierarchy-cell__chevron--collapsed' : '',\n            ]\n              .filter(Boolean)\n              .join(' ')}\n          />\n        </button>\n      ) : (\n        <span className=\"pages-hierarchy-cell__spacer\" />\n      )}\n      {showOrderableHandle ? (\n        <button\n          {...(rowDnd?.orderHandleAttributes ?? {})}\n          {...(rowDnd?.orderHandleListeners ?? {})}\n          aria-label=\"Reorder document within this parent\"\n          className={[\n            'pages-hierarchy-cell__drag-handle',\n            'pages-hierarchy-cell__drag-handle--orderable',\n            rowDnd?.isOrderDragging || isActiveDragRow\n              ? 'pages-hierarchy-cell__drag-handle--active'\n              : '',\n          ]\n            .filter(Boolean)\n            .join(' ')}\n          disabled={dragIsDisabled || !rowDnd}\n          onClick={(event) => {\n            event.preventDefault()\n            event.stopPropagation()\n          }}\n          ref={rowDnd?.orderHandleRef}\n          type=\"button\"\n        >\n      <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M7.125 6C7.95343 6 8.625 5.32843 8.625 4.5C8.625 3.67157 7.95343 3 7.125 3C6.29657 3 5.625 3.67157 5.625 4.5C5.625 5.32843 6.29657 6 7.125 6Z\" fill=\"black\"/>\n      <path d=\"M7.125 12C7.95343 12 8.625 11.3284 8.625 10.5C8.625 9.67157 7.95343 9 7.125 9C6.29657 9 5.625 9.67157 5.625 10.5C5.625 11.3284 6.29657 12 7.125 12Z\" fill=\"black\"/>\n      <path d=\"M7.125 18C7.95343 18 8.625 17.3284 8.625 16.5C8.625 15.6716 7.95343 15 7.125 15C6.29657 15 5.625 15.6716 5.625 16.5C5.625 17.3284 6.29657 18 7.125 18Z\" fill=\"black\"/>\n      <path d=\"M12.875 6C13.7034 6 14.375 5.32843 14.375 4.5C14.375 3.67157 13.7034 3 12.875 3C12.0466 3 11.375 3.67157 11.375 4.5C11.375 5.32843 12.0466 6 12.875 6Z\" fill=\"black\"/>\n      <path d=\"M12.875 12C13.7034 12 14.375 11.3284 14.375 10.5C14.375 9.67157 13.7034 9 12.875 9C12.0466 9 11.375 9.67157 11.375 10.5C11.375 11.3284 12.0466 12 12.875 12Z\" fill=\"black\"/>\n      <path d=\"M12.875 18C13.7034 18 14.375 17.3284 14.375 16.5C14.375 15.6716 13.7034 15 12.875 15C12.0466 15 11.375 15.6716 11.375 16.5C11.375 17.3284 12.0466 18 12.875 18Z\" fill=\"black\"/>\n      </svg>\n        </button>\n      ) : null}\n      {canMoveDocs && parentMoveEnabled ? (\n        <button\n          {...parentMoveDrag.attributes}\n          {...parentMoveDrag.listeners}\n          aria-label=\"Move document under another page\"\n          className={[\n            'pages-hierarchy-cell__drag-handle',\n            'pages-hierarchy-cell__drag-handle--parent',\n            parentMoveDrag.isDragging || isActiveDragRow\n              ? 'pages-hierarchy-cell__drag-handle--active'\n              : '',\n          ]\n            .filter(Boolean)\n            .join(' ')}\n          disabled={dragIsDisabled}\n          onClick={(event) => {\n            event.preventDefault()\n            event.stopPropagation()\n          }}\n          ref={parentMoveDrag.setNodeRef}\n          type=\"button\"\n        >\n          <ParentMoveHandleIcon />\n        </button>\n      ) : null}\n      <span className=\"pages-hierarchy-cell__content\">\n        {showHomeIcon ? <HomeIndicatorIcon /> : null}\n        {children}\n      </span>\n    </div>\n  )\n}\n"],"names":["useDraggable","ChevronIcon","useListQuery","React","usePageTree","usePageTreeRowDnd","HOME_PAGE_SLUG","isHomePageDoc","doc","__pageTreeParentID","slug","trim","normalizeSort","value","Array","isArray","ParentMoveHandleIcon","svg","aria-hidden","className","fill","height","viewBox","width","xmlns","path","d","stroke","strokeLinecap","strokeWidth","vectorEffect","HomeIndicatorIcon","strokeLinejoin","PageTreeTitleCell","children","homeIndicatorEnabled","activeDragRowID","canMoveDocs","collapsedIDs","parentMoveEnabled","pendingMoveRowID","toggleRow","rowDnd","orderableFieldName","query","depth","__pageTreeDepth","hasChildren","__pageTreeHasChildren","shadeLevel","Math","min","__pageTreeShadeLevel","rowID","__pageTreeID","isCollapsed","has","dragIsDisabled","showHomeIcon","parentMoveDrag","id","data","dragType","disabled","querySort","sort","showOrderableHandle","Boolean","isActiveDragRow","isDragging","isOrderDragging","div","data-row-dragging","data-tree-depth","data-tree-has-children","data-tree-home","undefined","data-tree-shade-level","style","String","button","aria-expanded","aria-label","onClick","event","preventDefault","stopPropagation","type","filter","join","span","orderHandleAttributes","orderHandleListeners","ref","orderHandleRef","attributes","listeners","setNodeRef"],"mappings":"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"}

package/dist/types.d.ts

@@ -65,6 +65,8 @@ export type NestedDocsPageTreePluginBadgesLinks = {
     draftHasPublishedVersion?: 'both' | 'live' | 'preview';
     /** Website base URL, resolved with the published document's last breadcrumb URL. */
     liveURL?: string;
+    /** Show live link and preview eye icons. When false, 'both' keeps an external-link preview action. @default true */
+    showIcons?: boolean;
 };
 export type PageTreeStatusLinks = {
     previewURL?: string;

package/dist/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/types.ts"],"sourcesContent":["import type { CollectionSlug } from 'payload'\n\nimport type { NestedDocsPageTreePluginDiagnosticsConfig } from './utilities/diagnostics.js'\n\nexport type {\n  NestedDocsPageTreePluginDiagnosticEvent,\n  NestedDocsPageTreePluginDiagnosticsConfig,\n} from './utilities/diagnostics.js'\n\nexport const nestedDocsPageTreePluginBadgeStatuses = ['published', 'changed', 'draft'] as const\n\nexport type NestedDocsPageTreePluginBadgeStatus =\n  (typeof nestedDocsPageTreePluginBadgeStatuses)[number]\n\nexport type NestedDocsPageTreePluginBadgeMap = Partial<\n  Record<NestedDocsPageTreePluginBadgeStatus, string>\n>\n\nexport type NestedDocsPageTreePluginBadgeConfig = {\n  colors?: NestedDocsPageTreePluginBadgeMap\n  labels?: NestedDocsPageTreePluginBadgeMap\n}\n\nexport type NestedDocsPageTreePluginResolvedBadgeConfig = {\n  colors: NestedDocsPageTreePluginBadgeMap\n  labels: NestedDocsPageTreePluginBadgeMap\n}\n\nexport type NestedDocsPageTreePluginHomeIndicatorConfig =\n  | false\n  | {\n      collections?: CollectionSlug[]\n    }\n\nexport type NestedDocsPageTreePluginResolvedHomeIndicatorConfig = {\n  enabled: boolean\n}\n\nexport type NestedDocsPageTreePluginConfig = {\n  badges?: NestedDocsPageTreePluginBadgeConfig\n  /** Opt in to status badge links. Preview uses the collection's admin.preview. */\n  badgesLinks?: NestedDocsPageTreePluginBadgesLinks\n  breadcrumbsFieldSlug?: string\n  collections: CollectionSlug[]\n  defaultLimit?: number\n  /**\n   * When set, the plugin emits structured diagnostic events for page-tree\n   * triggered moves, including before/after snapshots of the published main row.\n   * Disabled by default. Pass `true` to log to `console`, or pass an object\n   * with a custom `logger` to route events elsewhere.\n   */\n  diagnostics?: NestedDocsPageTreePluginDiagnosticsConfig\n  disabled?: boolean\n  hideBreadcrumbs?: boolean\n  homeIndicator?: NestedDocsPageTreePluginHomeIndicatorConfig\n  parentFieldSlug?: string\n  /**\n   * Publish a hierarchy move immediately instead of staging it as a draft - but\n   * ONLY when the moved document had no unpublished changes before the move (its\n   * latest version is already published). A document with pending draft edits (a\n   * \"changed\" or draft-only doc) always stays staged, so in-progress edits are\n   * never published as a side effect of a move. Only affects collections with\n   * drafts enabled; collections without drafts move live regardless.\n   *\n   * Disabled by default: every move is staged as a draft and the live URL/path\n   * changes only when the document is next published.\n   *\n   * @default false\n   */\n  publishOnMove?: boolean\n}\n\nexport type NestedDocsPageTreePluginCollectionCustom = {\n  badges: NestedDocsPageTreePluginResolvedBadgeConfig\n  badgesLinks?: NestedDocsPageTreePluginBadgesLinks\n  breadcrumbsFieldSlug: string\n  defaultLimit: number\n  hideBreadcrumbs: boolean\n  homeIndicator: NestedDocsPageTreePluginResolvedHomeIndicatorConfig\n  parentFieldSlug: string\n}\n\nexport type NestedDocsPageTreePluginBadgesLinks = {\n  /** Which links to offer for a draft with a published version. @default 'both' */\n  draftHasPublishedVersion?: 'both' | 'live' | 'preview'\n  /** Website base URL, resolved with the published document's last breadcrumb URL. */\n  liveURL?: string\n}\n\nexport type PageTreeStatusLinks = {\n  previewURL?: string\n  publicURL?: string\n}\n\nexport type PageTreeSourceDoc = Record<string, unknown> & {\n  __pageTreeStatusLinks?: PageTreeStatusLinks\n  _displayStatus?: null | string\n  _status?: null | string\n  id?: number | string\n  slug?: null | string\n}\n\nexport const nestedDocsPageTreePluginCustomKey = 'nestedDocsPageTreePlugin'\n\n/**\n * Set on Payload's hook context for every page-tree write that leaves the\n * published site unchanged: sibling reorders, and parent moves staged as\n * drafts. Deploy/revalidate hooks read it to skip rebuilds they do not need.\n *\n * It is deliberately NOT set when `publishOnMove` publishes a move, because\n * that move changed the live URL of the page and its descendants and the site\n * does need rebuilding. That way one guard covers every configuration:\n *\n * ```ts\n * if (req.context?.[pageTreeMoveContextKey]) return\n * ```\n *\n * Note the flag describes the *effect* of the write, not its kind - it is\n * absent on published moves even though those are still page-tree moves. Use\n * `pageTreeWriteContextKey` when you need \"was this a page-tree write at all\".\n */\nexport const pageTreeMoveContextKey = 'pageTreeMove'\n\n/**\n * Internal: set on every page-tree write regardless of whether it published.\n * Diagnostics uses it so that published moves are still traced, which is the\n * case most worth observing. Not part of the public API.\n */\nexport const pageTreeWriteContextKey = 'pageTreeWrite'\n\nexport type PageTreeMoveContext = {\n  [pageTreeMoveContextKey]?: boolean\n  [pageTreeWriteContextKey]?: boolean\n}\n"],"names":["nestedDocsPageTreePluginBadgeStatuses","nestedDocsPageTreePluginCustomKey","pageTreeMoveContextKey","pageTreeWriteContextKey"],"mappings":"AASA,OAAO,MAAMA,wCAAwC;IAAC;IAAa;IAAW;CAAQ,CAAS;AA6F/F,OAAO,MAAMC,oCAAoC,2BAA0B;AAE3E;;;;;;;;;;;;;;;;CAgBC,GACD,OAAO,MAAMC,yBAAyB,eAAc;AAEpD;;;;CAIC,GACD,OAAO,MAAMC,0BAA0B,gBAAe"}
+{"version":3,"sources":["../src/types.ts"],"sourcesContent":["import type { CollectionSlug } from 'payload'\n\nimport type { NestedDocsPageTreePluginDiagnosticsConfig } from './utilities/diagnostics.js'\n\nexport type {\n  NestedDocsPageTreePluginDiagnosticEvent,\n  NestedDocsPageTreePluginDiagnosticsConfig,\n} from './utilities/diagnostics.js'\n\nexport const nestedDocsPageTreePluginBadgeStatuses = ['published', 'changed', 'draft'] as const\n\nexport type NestedDocsPageTreePluginBadgeStatus =\n  (typeof nestedDocsPageTreePluginBadgeStatuses)[number]\n\nexport type NestedDocsPageTreePluginBadgeMap = Partial<\n  Record<NestedDocsPageTreePluginBadgeStatus, string>\n>\n\nexport type NestedDocsPageTreePluginBadgeConfig = {\n  colors?: NestedDocsPageTreePluginBadgeMap\n  labels?: NestedDocsPageTreePluginBadgeMap\n}\n\nexport type NestedDocsPageTreePluginResolvedBadgeConfig = {\n  colors: NestedDocsPageTreePluginBadgeMap\n  labels: NestedDocsPageTreePluginBadgeMap\n}\n\nexport type NestedDocsPageTreePluginHomeIndicatorConfig =\n  | false\n  | {\n      collections?: CollectionSlug[]\n    }\n\nexport type NestedDocsPageTreePluginResolvedHomeIndicatorConfig = {\n  enabled: boolean\n}\n\nexport type NestedDocsPageTreePluginConfig = {\n  badges?: NestedDocsPageTreePluginBadgeConfig\n  /** Opt in to status badge links. Preview uses the collection's admin.preview. */\n  badgesLinks?: NestedDocsPageTreePluginBadgesLinks\n  breadcrumbsFieldSlug?: string\n  collections: CollectionSlug[]\n  defaultLimit?: number\n  /**\n   * When set, the plugin emits structured diagnostic events for page-tree\n   * triggered moves, including before/after snapshots of the published main row.\n   * Disabled by default. Pass `true` to log to `console`, or pass an object\n   * with a custom `logger` to route events elsewhere.\n   */\n  diagnostics?: NestedDocsPageTreePluginDiagnosticsConfig\n  disabled?: boolean\n  hideBreadcrumbs?: boolean\n  homeIndicator?: NestedDocsPageTreePluginHomeIndicatorConfig\n  parentFieldSlug?: string\n  /**\n   * Publish a hierarchy move immediately instead of staging it as a draft - but\n   * ONLY when the moved document had no unpublished changes before the move (its\n   * latest version is already published). A document with pending draft edits (a\n   * \"changed\" or draft-only doc) always stays staged, so in-progress edits are\n   * never published as a side effect of a move. Only affects collections with\n   * drafts enabled; collections without drafts move live regardless.\n   *\n   * Disabled by default: every move is staged as a draft and the live URL/path\n   * changes only when the document is next published.\n   *\n   * @default false\n   */\n  publishOnMove?: boolean\n}\n\nexport type NestedDocsPageTreePluginCollectionCustom = {\n  badges: NestedDocsPageTreePluginResolvedBadgeConfig\n  badgesLinks?: NestedDocsPageTreePluginBadgesLinks\n  breadcrumbsFieldSlug: string\n  defaultLimit: number\n  hideBreadcrumbs: boolean\n  homeIndicator: NestedDocsPageTreePluginResolvedHomeIndicatorConfig\n  parentFieldSlug: string\n}\n\nexport type NestedDocsPageTreePluginBadgesLinks = {\n  /** Which links to offer for a draft with a published version. @default 'both' */\n  draftHasPublishedVersion?: 'both' | 'live' | 'preview'\n  /** Website base URL, resolved with the published document's last breadcrumb URL. */\n  liveURL?: string\n  /** Show live link and preview eye icons. When false, 'both' keeps an external-link preview action. @default true */\n  showIcons?: boolean\n}\n\nexport type PageTreeStatusLinks = {\n  previewURL?: string\n  publicURL?: string\n}\n\nexport type PageTreeSourceDoc = Record<string, unknown> & {\n  __pageTreeStatusLinks?: PageTreeStatusLinks\n  _displayStatus?: null | string\n  _status?: null | string\n  id?: number | string\n  slug?: null | string\n}\n\nexport const nestedDocsPageTreePluginCustomKey = 'nestedDocsPageTreePlugin'\n\n/**\n * Set on Payload's hook context for every page-tree write that leaves the\n * published site unchanged: sibling reorders, and parent moves staged as\n * drafts. Deploy/revalidate hooks read it to skip rebuilds they do not need.\n *\n * It is deliberately NOT set when `publishOnMove` publishes a move, because\n * that move changed the live URL of the page and its descendants and the site\n * does need rebuilding. That way one guard covers every configuration:\n *\n * ```ts\n * if (req.context?.[pageTreeMoveContextKey]) return\n * ```\n *\n * Note the flag describes the *effect* of the write, not its kind - it is\n * absent on published moves even though those are still page-tree moves. Use\n * `pageTreeWriteContextKey` when you need \"was this a page-tree write at all\".\n */\nexport const pageTreeMoveContextKey = 'pageTreeMove'\n\n/**\n * Internal: set on every page-tree write regardless of whether it published.\n * Diagnostics uses it so that published moves are still traced, which is the\n * case most worth observing. Not part of the public API.\n */\nexport const pageTreeWriteContextKey = 'pageTreeWrite'\n\nexport type PageTreeMoveContext = {\n  [pageTreeMoveContextKey]?: boolean\n  [pageTreeWriteContextKey]?: boolean\n}\n"],"names":["nestedDocsPageTreePluginBadgeStatuses","nestedDocsPageTreePluginCustomKey","pageTreeMoveContextKey","pageTreeWriteContextKey"],"mappings":"AASA,OAAO,MAAMA,wCAAwC;IAAC;IAAa;IAAW;CAAQ,CAAS;AA+F/F,OAAO,MAAMC,oCAAoC,2BAA0B;AAE3E;;;;;;;;;;;;;;;;CAgBC,GACD,OAAO,MAAMC,yBAAyB,eAAc;AAEpD;;;;CAIC,GACD,OAAO,MAAMC,0BAA0B,gBAAe"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payload-nested-docs-page-tree",
-  "version": "1.5.0",
+  "version": "1.5.1",
   "description": "Page tree plugin for Payload nested docs collections",
   "license": "MIT",
   "author": "WLF Studios",