@pro-laico/payload-dev-tools 0.0.0

package/dist/components/DevToolbarClient.js

@@ -0,0 +1,983 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import Link from "next/link";
+import { usePathname, useRouter } from "next/navigation";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { CHROME_COOKIES, STAGE_COOKIE } from "../cookies.js";
+const STORE_KEY = 'pdt-settings';
+const HIDE_KEY = 'pdt-hidden';
+const DEFAULTS = {
+    corner: 'bottom-right',
+    size: 'md'
+};
+const CORNER_CLASS = {
+    'bottom-right': 'br',
+    'bottom-left': 'bl',
+    'top-right': 'tr',
+    'top-left': 'tl'
+};
+const CORNERS = [
+    {
+        value: 'top-left',
+        arrow: '↖'
+    },
+    {
+        value: 'top-right',
+        arrow: '↗'
+    },
+    {
+        value: 'bottom-left',
+        arrow: '↙'
+    },
+    {
+        value: 'bottom-right',
+        arrow: '↘'
+    }
+];
+const SIZES = [
+    'sm',
+    'md',
+    'lg'
+];
+const VIEW_TITLE = {
+    info: 'Info',
+    seed: 'Seed',
+    pages: 'Pages',
+    tests: 'Tests',
+    settings: 'Settings'
+};
+const readSettings = ()=>{
+    try {
+        const parsed = JSON.parse(localStorage.getItem(STORE_KEY) ?? '{}');
+        return parsed && typeof parsed === 'object' ? {
+            ...DEFAULTS,
+            ...parsed
+        } : DEFAULTS;
+    } catch  {
+        return DEFAULTS;
+    }
+};
+/** A selection cookie (`testKey:versionId`), read client-side — the server reads the same cookie
+ *  (test pages for the stage cookie, `resolveDevChrome` for the chrome slots), so the toolbar
+ *  chips and the rendered result always agree. */ const readSelectionCookie = (name)=>{
+    const raw = document.cookie.split('; ').find((c)=>c.startsWith(`${name}=`))?.split('=')[1];
+    if (!raw) return null;
+    try {
+        const decoded = decodeURIComponent(raw);
+        const sep = decoded.indexOf(':');
+        return sep > 0 ? {
+            testKey: decoded.slice(0, sep),
+            versionId: decoded.slice(sep + 1)
+        } : null;
+    } catch  {
+        return null;
+    }
+};
+/**
+ * The toolbar panel — THE controller for the dev experience. Navigation happens through it (the
+ * dev pages render content only, no nav of their own), the panel stays open across route changes
+ * (it lives in the layout, and rows are client-side `<Link>`s), and the Tests view both opens a
+ * test's page and toggles which version that page shows.
+ */ export function DevToolbarClient({ tests, links }) {
+    const router = useRouter();
+    const pathname = usePathname();
+    const [mounted, setMounted] = useState(false);
+    const [hidden, setHidden] = useState(false);
+    const [open, setOpen] = useState(false);
+    const [view, setView] = useState('main');
+    const [settings, setSettings] = useState(DEFAULTS);
+    const [selection, setSelection] = useState(null);
+    const [chrome, setChrome] = useState({
+        header: null,
+        footer: null
+    });
+    const [snapshot, setSnapshot] = useState(null);
+    const [snapshotError, setSnapshotError] = useState(false);
+    const [seeding, setSeeding] = useState(false);
+    const [confirming, setConfirming] = useState(false);
+    const [seedError, setSeedError] = useState(null);
+    const rootRef = useRef(null);
+    useEffect(()=>{
+        setHidden(sessionStorage.getItem(HIDE_KEY) === '1');
+        setSettings(readSettings());
+        setSelection(readSelectionCookie(STAGE_COOKIE));
+        setChrome({
+            header: readSelectionCookie(CHROME_COOKIES.header),
+            footer: readSelectionCookie(CHROME_COOKIES.footer)
+        });
+        setMounted(true);
+    }, []);
+    const fetchSnapshot = useCallback(async ()=>{
+        try {
+            const res = await fetch('/api/dev', {
+                headers: {
+                    accept: 'application/json'
+                },
+                credentials: 'include'
+            });
+            if (!res.ok) throw new Error(String(res.status));
+            setSnapshot(await res.json());
+            setSnapshotError(false);
+        } catch  {
+            setSnapshotError(true);
+        }
+    }, []);
+    // Lazy: the snapshot loads on first open, not on page load.
+    useEffect(()=>{
+        if (open && !snapshot && !snapshotError) void fetchSnapshot();
+    }, [
+        open,
+        snapshot,
+        snapshotError,
+        fetchSnapshot
+    ]);
+    const base = snapshot?.devRoute ?? '/dev';
+    /** Select a version: write the cookie, then show it — refresh if we're already on the test's
+   *  page, navigate there if not. The panel stays open either way. */ const selectVersion = useCallback((testKey, versionId)=>{
+        // biome-ignore lint/suspicious/noDocumentCookie: dev-only synchronous cookie write; Cookie Store API is async and not universal
+        document.cookie = `${STAGE_COOKIE}=${encodeURIComponent(`${testKey}:${versionId}`)}; path=/; samesite=lax`;
+        setSelection({
+            testKey,
+            versionId
+        });
+        const testPath = `${base}/tests/${testKey}`;
+        if (pathname === testPath) router.refresh();
+        else router.push(testPath);
+    }, [
+        base,
+        pathname,
+        router
+    ]);
+    /** Set/clear a chrome override (header/footer swap): the cookie applies SITE-WIDE in dev —
+   *  `resolveDevChrome` in the host layout swaps the variant in wherever you browse. */ const selectChrome = useCallback((slot, sel)=>{
+        // biome-ignore lint/suspicious/noDocumentCookie: dev-only synchronous cookie write; Cookie Store API is async and not universal
+        document.cookie = sel ? `${CHROME_COOKIES[slot]}=${encodeURIComponent(`${sel.testKey}:${sel.versionId}`)}; path=/; samesite=lax` : `${CHROME_COOKIES[slot]}=; path=/; max-age=0; samesite=lax`;
+        setChrome((prev)=>({
+                ...prev,
+                [slot]: sel
+            }));
+        router.refresh();
+    }, [
+        router
+    ]);
+    const update = useCallback((patch)=>{
+        setSettings((prev)=>{
+            const next = {
+                ...prev,
+                ...patch
+            };
+            try {
+                localStorage.setItem(STORE_KEY, JSON.stringify(next));
+            } catch  {}
+            return next;
+        });
+    }, []);
+    const runSeed = async ()=>{
+        setSeeding(true);
+        setSeedError(null);
+        try {
+            const res = await fetch('/api/seed', {
+                method: 'POST',
+                credentials: 'include'
+            });
+            if (res.ok) {
+                setConfirming(false);
+                setSeeding(false);
+                await fetchSnapshot();
+                router.refresh();
+                return;
+            }
+            const body = await res.json().catch(()=>null);
+            setSeedError(body?.error ? body : {
+                error: `Seed failed (HTTP ${res.status}).`
+            });
+        } catch  {
+            setSeedError({
+                error: 'Seed request failed — is the dev server running?'
+            });
+        }
+        setSeeding(false);
+        setConfirming(false);
+    };
+    useEffect(()=>{
+        if (!open) return;
+        const onDown = (e)=>{
+            if (rootRef.current && e.target instanceof Node && !rootRef.current.contains(e.target)) setOpen(false);
+        };
+        document.addEventListener('mousedown', onDown);
+        return ()=>document.removeEventListener('mousedown', onDown);
+    }, [
+        open
+    ]);
+    useEffect(()=>{
+        const onKey = (e)=>{
+            if (e.key !== 'Escape' || !open) return;
+            if (view === 'main') setOpen(false);
+            else setView('main');
+        };
+        document.addEventListener('keydown', onKey);
+        return ()=>document.removeEventListener('keydown', onKey);
+    }, [
+        open,
+        view
+    ]);
+    if (!mounted || hidden) return null;
+    const corner = CORNER_CLASS[settings.corner];
+    const seed = snapshot?.seed;
+    const pageLinks = [
+        {
+            href: base,
+            title: 'Overview'
+        },
+        ...snapshot?.icons ? [
+            {
+                href: `${base}/icons`,
+                title: 'Icons'
+            }
+        ] : [],
+        ...snapshot?.fonts ? [
+            {
+                href: `${base}/fonts`,
+                title: 'Fonts'
+            }
+        ] : [],
+        ...snapshot?.images ? [
+            {
+                href: `${base}/images`,
+                title: 'Images'
+            }
+        ] : [],
+        ...snapshot?.mux ? [
+            {
+                href: `${base}/mux`,
+                title: 'Mux'
+            }
+        ] : [],
+        ...links,
+        {
+            href: snapshot?.adminRoute ?? '/admin',
+            title: 'Payload admin'
+        },
+        {
+            href: 'https://payload-plugins.prolaico.com/docs',
+            title: 'Plugin docs ↗'
+        }
+    ];
+    return /*#__PURE__*/ _jsxs("div", {
+        ref: rootRef,
+        className: `pdt-root pdt-corner-${corner}`,
+        children: [
+            open ? /*#__PURE__*/ _jsxs("div", {
+                className: `pdt-panel pdt-panel-${corner}`,
+                children: [
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: "pdt-head",
+                        children: [
+                            view !== 'main' ? /*#__PURE__*/ _jsx("button", {
+                                type: "button",
+                                className: "pdt-back",
+                                "aria-label": "Back",
+                                onClick: ()=>setView('main'),
+                                children: "‹"
+                            }) : null,
+                            /*#__PURE__*/ _jsx("span", {
+                                className: "pdt-head-title",
+                                children: view === 'main' ? 'Dev tools' : VIEW_TITLE[view]
+                            }),
+                            /*#__PURE__*/ _jsx("span", {
+                                className: "pdt-head-badge",
+                                children: "dev only"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: "pdt-body",
+                        children: [
+                            view === 'main' ? /*#__PURE__*/ _jsxs("ul", {
+                                className: "pdt-menu",
+                                children: [
+                                    /*#__PURE__*/ _jsx(MenuRow, {
+                                        label: "Info",
+                                        hint: snapshot ? snapshot.env.nodeEnv : undefined,
+                                        onClick: ()=>setView('info')
+                                    }),
+                                    snapshot?.plugins.seed !== false ? /*#__PURE__*/ _jsx(MenuRow, {
+                                        label: "Seed",
+                                        hint: seed ? seed.seeded ? `${seed.totalDocs} docs` : 'empty' : undefined,
+                                        onClick: ()=>setView('seed')
+                                    }) : null,
+                                    /*#__PURE__*/ _jsx(MenuRow, {
+                                        label: "Pages",
+                                        hint: pathname.startsWith(base) ? pathname : undefined,
+                                        onClick: ()=>setView('pages')
+                                    }),
+                                    tests.length ? /*#__PURE__*/ _jsx(MenuRow, {
+                                        label: "Tests",
+                                        hint: `${tests.length}`,
+                                        onClick: ()=>setView('tests')
+                                    }) : null,
+                                    /*#__PURE__*/ _jsx(MenuRow, {
+                                        label: "Settings",
+                                        onClick: ()=>setView('settings')
+                                    })
+                                ]
+                            }) : null,
+                            view === 'info' ? /*#__PURE__*/ _jsxs("div", {
+                                children: [
+                                    snapshotError ? /*#__PURE__*/ _jsx(SnapshotMissing, {
+                                        retry: fetchSnapshot
+                                    }) : null,
+                                    snapshot ? /*#__PURE__*/ _jsxs(_Fragment, {
+                                        children: [
+                                            /*#__PURE__*/ _jsxs("div", {
+                                                className: "pdt-card",
+                                                children: [
+                                                    /*#__PURE__*/ _jsxs("div", {
+                                                        className: "pdt-card-head",
+                                                        children: [
+                                                            /*#__PURE__*/ _jsx("span", {
+                                                                className: "pdt-card-title",
+                                                                children: "Environment"
+                                                            }),
+                                                            /*#__PURE__*/ _jsx("button", {
+                                                                type: "button",
+                                                                className: "pdt-kind",
+                                                                onClick: fetchSnapshot,
+                                                                children: "refresh"
+                                                            })
+                                                        ]
+                                                    }),
+                                                    /*#__PURE__*/ _jsxs("p", {
+                                                        className: "pdt-small",
+                                                        style: {
+                                                            margin: 0
+                                                        },
+                                                        children: [
+                                                            /*#__PURE__*/ _jsx("span", {
+                                                                className: "pdt-code",
+                                                                children: snapshot.env.nodeEnv
+                                                            }),
+                                                            " · node ",
+                                                            snapshot.env.nodeVersion
+                                                        ]
+                                                    }),
+                                                    /*#__PURE__*/ _jsx("div", {
+                                                        style: {
+                                                            marginTop: 8,
+                                                            display: 'flex',
+                                                            flexWrap: 'wrap',
+                                                            gap: '3px 12px'
+                                                        },
+                                                        className: "pdt-small",
+                                                        children: Object.entries(snapshot.plugins).map(([name, on])=>/*#__PURE__*/ _jsxs("span", {
+                                                                children: [
+                                                                    /*#__PURE__*/ _jsx("span", {
+                                                                        className: `pdt-dot ${on ? 'pdt-dot-on' : 'pdt-dot-off'}`
+                                                                    }),
+                                                                    name
+                                                                ]
+                                                            }, name))
+                                                    })
+                                                ]
+                                            }),
+                                            /*#__PURE__*/ _jsxs("div", {
+                                                className: "pdt-card",
+                                                children: [
+                                                    /*#__PURE__*/ _jsx("div", {
+                                                        className: "pdt-card-head",
+                                                        children: /*#__PURE__*/ _jsx("span", {
+                                                            className: "pdt-card-title",
+                                                            children: "Collections"
+                                                        })
+                                                    }),
+                                                    /*#__PURE__*/ _jsx("table", {
+                                                        className: "pdt-table",
+                                                        children: /*#__PURE__*/ _jsx("tbody", {
+                                                            children: snapshot.collections.map((c)=>/*#__PURE__*/ _jsxs("tr", {
+                                                                    children: [
+                                                                        /*#__PURE__*/ _jsx("td", {
+                                                                            children: c.slug
+                                                                        }),
+                                                                        /*#__PURE__*/ _jsx("td", {
+                                                                            children: c.count ?? '?'
+                                                                        })
+                                                                    ]
+                                                                }, c.slug))
+                                                        })
+                                                    })
+                                                ]
+                                            }),
+                                            snapshot.icons ? /*#__PURE__*/ _jsxs("div", {
+                                                className: "pdt-card",
+                                                children: [
+                                                    /*#__PURE__*/ _jsxs("div", {
+                                                        className: "pdt-card-head",
+                                                        children: [
+                                                            /*#__PURE__*/ _jsx("span", {
+                                                                className: "pdt-card-title",
+                                                                children: "Icons"
+                                                            }),
+                                                            /*#__PURE__*/ _jsx("span", {
+                                                                className: "pdt-kind",
+                                                                children: snapshot.icons.iconCount ?? '?'
+                                                            })
+                                                        ]
+                                                    }),
+                                                    /*#__PURE__*/ _jsxs("p", {
+                                                        className: "pdt-small",
+                                                        style: {
+                                                            margin: 0
+                                                        },
+                                                        children: [
+                                                            "Active set: ",
+                                                            snapshot.icons.activeSet ?? /*#__PURE__*/ _jsx("span", {
+                                                                className: "pdt-warn",
+                                                                children: "none"
+                                                            })
+                                                        ]
+                                                    }),
+                                                    snapshot.icons.misses.length ? /*#__PURE__*/ _jsxs("p", {
+                                                        className: "pdt-small pdt-warn",
+                                                        style: {
+                                                            margin: '6px 0 0'
+                                                        },
+                                                        children: [
+                                                            "Misses:",
+                                                            ' ',
+                                                            snapshot.icons.misses.map((m)=>/*#__PURE__*/ _jsxs("span", {
+                                                                    className: "pdt-code",
+                                                                    style: {
+                                                                        marginRight: 5
+                                                                    },
+                                                                    children: [
+                                                                        m.name,
+                                                                        " ×",
+                                                                        m.count
+                                                                    ]
+                                                                }, m.name))
+                                                        ]
+                                                    }) : null
+                                                ]
+                                            }) : null,
+                                            snapshot.fonts ? /*#__PURE__*/ _jsxs("div", {
+                                                className: "pdt-card",
+                                                children: [
+                                                    /*#__PURE__*/ _jsxs("div", {
+                                                        className: "pdt-card-head",
+                                                        children: [
+                                                            /*#__PURE__*/ _jsx("span", {
+                                                                className: "pdt-card-title",
+                                                                children: "Fonts"
+                                                            }),
+                                                            /*#__PURE__*/ _jsx("span", {
+                                                                className: "pdt-kind",
+                                                                children: snapshot.fonts.fontCount ?? '?'
+                                                            })
+                                                        ]
+                                                    }),
+                                                    /*#__PURE__*/ _jsx("table", {
+                                                        className: "pdt-table",
+                                                        children: /*#__PURE__*/ _jsx("tbody", {
+                                                            children: snapshot.fonts.familyKeys.map((key)=>/*#__PURE__*/ _jsxs("tr", {
+                                                                    children: [
+                                                                        /*#__PURE__*/ _jsx("td", {
+                                                                            children: key
+                                                                        }),
+                                                                        /*#__PURE__*/ _jsx("td", {
+                                                                            children: snapshot.fonts?.slots[key] ?? 'unset'
+                                                                        })
+                                                                    ]
+                                                                }, key))
+                                                        })
+                                                    })
+                                                ]
+                                            }) : null,
+                                            snapshot.mux ? /*#__PURE__*/ _jsxs("div", {
+                                                className: "pdt-card",
+                                                children: [
+                                                    /*#__PURE__*/ _jsxs("div", {
+                                                        className: "pdt-card-head",
+                                                        children: [
+                                                            /*#__PURE__*/ _jsx("span", {
+                                                                className: "pdt-card-title",
+                                                                children: "Mux"
+                                                            }),
+                                                            /*#__PURE__*/ _jsxs("span", {
+                                                                className: "pdt-kind",
+                                                                children: [
+                                                                    snapshot.mux.total ?? '?',
+                                                                    " / ",
+                                                                    snapshot.mux.ready ?? '?',
+                                                                    " ready"
+                                                                ]
+                                                            })
+                                                        ]
+                                                    }),
+                                                    !snapshot.mux.credentialed ? /*#__PURE__*/ _jsx("p", {
+                                                        className: "pdt-small pdt-warn",
+                                                        style: {
+                                                            margin: 0
+                                                        },
+                                                        children: "MUX_TOKEN_ID / MUX_TOKEN_SECRET not set"
+                                                    }) : null
+                                                ]
+                                            }) : null
+                                        ]
+                                    }) : !snapshotError ? /*#__PURE__*/ _jsx("p", {
+                                        className: "pdt-note",
+                                        children: "Loading…"
+                                    }) : null
+                                ]
+                            }) : null,
+                            view === 'seed' ? /*#__PURE__*/ _jsxs("div", {
+                                children: [
+                                    snapshotError ? /*#__PURE__*/ _jsx(SnapshotMissing, {
+                                        retry: fetchSnapshot
+                                    }) : null,
+                                    snapshot && !seed ? /*#__PURE__*/ _jsxs("p", {
+                                        className: "pdt-note",
+                                        children: [
+                                            /*#__PURE__*/ _jsx("span", {
+                                                className: "pdt-code",
+                                                children: "@pro-laico/payload-seed"
+                                            }),
+                                            " isn't installed — add",
+                                            ' ',
+                                            /*#__PURE__*/ _jsx("span", {
+                                                className: "pdt-code",
+                                                children: "seedPlugin()"
+                                            }),
+                                            " to get one-click seeding here."
+                                        ]
+                                    }) : null,
+                                    seed ? /*#__PURE__*/ _jsxs("div", {
+                                        className: "pdt-card",
+                                        children: [
+                                            /*#__PURE__*/ _jsxs("div", {
+                                                className: "pdt-card-head",
+                                                children: [
+                                                    /*#__PURE__*/ _jsx("span", {
+                                                        className: "pdt-card-title",
+                                                        children: seed.seeded ? `Seeded — ${seed.totalDocs} docs` : 'Not seeded'
+                                                    }),
+                                                    !seed.enabled ? /*#__PURE__*/ _jsx("span", {
+                                                        className: "pdt-kind pdt-warn",
+                                                        children: "locked"
+                                                    }) : null
+                                                ]
+                                            }),
+                                            seed.definitions.length ? /*#__PURE__*/ _jsx("table", {
+                                                className: "pdt-table",
+                                                children: /*#__PURE__*/ _jsx("tbody", {
+                                                    children: seed.definitions.map((d)=>/*#__PURE__*/ _jsxs("tr", {
+                                                            children: [
+                                                                /*#__PURE__*/ _jsxs("td", {
+                                                                    children: [
+                                                                        d.slug,
+                                                                        d.disabled ? /*#__PURE__*/ _jsx("span", {
+                                                                            className: "pdt-warn",
+                                                                            children: " · skipped"
+                                                                        }) : null
+                                                                    ]
+                                                                }),
+                                                                /*#__PURE__*/ _jsx("td", {
+                                                                    children: d.kind === 'global' ? 'global' : seed.counts[d.slug] ?? 0
+                                                                })
+                                                            ]
+                                                        }, d.slug))
+                                                })
+                                            }) : /*#__PURE__*/ _jsx("p", {
+                                                className: "pdt-note",
+                                                style: {
+                                                    margin: 0
+                                                },
+                                                children: "No seed definitions registered."
+                                            }),
+                                            /*#__PURE__*/ _jsxs("div", {
+                                                style: {
+                                                    marginTop: 10,
+                                                    display: 'flex',
+                                                    gap: 6
+                                                },
+                                                children: [
+                                                    /*#__PURE__*/ _jsx("button", {
+                                                        type: "button",
+                                                        className: `pdt-btn ${seed.seeded ? 'pdt-btn-danger' : 'pdt-btn-primary'}`,
+                                                        disabled: seeding,
+                                                        onClick: ()=>seed.seeded && !confirming ? setConfirming(true) : void runSeed(),
+                                                        children: seeding ? 'Seeding…' : confirming ? 'Destructive — click again' : seed.seeded ? 'Reseed' : 'Seed the database'
+                                                    }),
+                                                    confirming ? /*#__PURE__*/ _jsx("button", {
+                                                        type: "button",
+                                                        className: "pdt-btn",
+                                                        onClick: ()=>setConfirming(false),
+                                                        children: "Cancel"
+                                                    }) : null
+                                                ]
+                                            }),
+                                            !seed.enabled ? /*#__PURE__*/ _jsxs("p", {
+                                                className: "pdt-note",
+                                                children: [
+                                                    "Set ",
+                                                    /*#__PURE__*/ _jsx("span", {
+                                                        className: "pdt-code",
+                                                        children: "ENABLE_SEED=true"
+                                                    }),
+                                                    " in ",
+                                                    /*#__PURE__*/ _jsx("span", {
+                                                        className: "pdt-code",
+                                                        children: ".env.local"
+                                                    }),
+                                                    " — the seed wipes seeded collections, so it's off by default."
+                                                ]
+                                            }) : null,
+                                            /*#__PURE__*/ _jsxs("p", {
+                                                className: "pdt-note",
+                                                style: {
+                                                    marginBottom: 0
+                                                },
+                                                children: [
+                                                    "Needs a logged-in",
+                                                    ' ',
+                                                    /*#__PURE__*/ _jsx("a", {
+                                                        href: snapshot?.adminRoute ?? '/admin',
+                                                        style: {
+                                                            textDecoration: 'underline'
+                                                        },
+                                                        children: "admin"
+                                                    }),
+                                                    ' ',
+                                                    "user · CLI: ",
+                                                    /*#__PURE__*/ _jsx("span", {
+                                                        className: "pdt-code",
+                                                        children: "ENABLE_SEED=true pnpm seed"
+                                                    })
+                                                ]
+                                            }),
+                                            seedError ? /*#__PURE__*/ _jsxs("div", {
+                                                className: "pdt-error",
+                                                children: [
+                                                    seedError.error,
+                                                    seedError.issues?.length ? /*#__PURE__*/ _jsx("ul", {
+                                                        children: seedError.issues.map((issue)=>/*#__PURE__*/ _jsx("li", {
+                                                                children: issue
+                                                            }, issue))
+                                                    }) : null
+                                                ]
+                                            }) : null
+                                        ]
+                                    }) : null
+                                ]
+                            }) : null,
+                            view === 'pages' ? /*#__PURE__*/ _jsxs("div", {
+                                children: [
+                                    /*#__PURE__*/ _jsx("ul", {
+                                        className: "pdt-menu",
+                                        children: pageLinks.map((link)=>link.href.startsWith('http') ? /*#__PURE__*/ _jsx("li", {
+                                                children: /*#__PURE__*/ _jsxs("a", {
+                                                    className: "pdt-menu-row",
+                                                    href: link.href,
+                                                    target: "_blank",
+                                                    rel: "noreferrer",
+                                                    children: [
+                                                        /*#__PURE__*/ _jsx("span", {
+                                                            children: link.title
+                                                        }),
+                                                        /*#__PURE__*/ _jsx("span", {
+                                                            className: "pdt-menu-hint",
+                                                            children: link.href.replace(/^https?:\/\//, '')
+                                                        })
+                                                    ]
+                                                })
+                                            }, link.href) : /*#__PURE__*/ _jsx("li", {
+                                                children: /*#__PURE__*/ _jsxs(Link, {
+                                                    className: `pdt-menu-row ${pathname === link.href ? 'pdt-current' : ''}`,
+                                                    href: link.href,
+                                                    children: [
+                                                        /*#__PURE__*/ _jsx("span", {
+                                                            children: link.title
+                                                        }),
+                                                        /*#__PURE__*/ _jsx("span", {
+                                                            className: "pdt-menu-hint",
+                                                            children: link.href
+                                                        })
+                                                    ]
+                                                })
+                                            }, link.href))
+                                    }),
+                                    !snapshot && !snapshotError ? /*#__PURE__*/ _jsx("p", {
+                                        className: "pdt-note",
+                                        children: "Loading plugin pages…"
+                                    }) : null,
+                                    snapshotError ? /*#__PURE__*/ _jsx(SnapshotMissing, {
+                                        retry: fetchSnapshot
+                                    }) : null
+                                ]
+                            }) : null,
+                            view === 'tests' ? /*#__PURE__*/ _jsxs("div", {
+                                children: [
+                                    tests.map((t)=>{
+                                        // header/footer kinds are chrome OVERRIDES: chips swap the variant into the real
+                                        // layout site-wide (via resolveDevChrome) instead of opening a test page.
+                                        if (t.kind === 'header' || t.kind === 'footer') {
+                                            const slot = t.kind;
+                                            const active = chrome[slot]?.testKey === t.key ? chrome[slot] : null;
+                                            return /*#__PURE__*/ _jsxs("div", {
+                                                className: "pdt-card",
+                                                children: [
+                                                    /*#__PURE__*/ _jsxs("div", {
+                                                        className: "pdt-card-head",
+                                                        children: [
+                                                            /*#__PURE__*/ _jsx("span", {
+                                                                className: "pdt-card-title",
+                                                                children: t.label
+                                                            }),
+                                                            /*#__PURE__*/ _jsx("span", {
+                                                                className: "pdt-kind",
+                                                                children: active ? /*#__PURE__*/ _jsx("span", {
+                                                                    className: "pdt-viewing",
+                                                                    children: "override on"
+                                                                }) : `${t.kind} override`
+                                                            })
+                                                        ]
+                                                    }),
+                                                    /*#__PURE__*/ _jsxs("div", {
+                                                        className: "pdt-chips",
+                                                        children: [
+                                                            /*#__PURE__*/ _jsx("button", {
+                                                                type: "button",
+                                                                className: `pdt-chip ${active ? '' : 'pdt-active'}`,
+                                                                onClick: ()=>selectChrome(slot, null),
+                                                                children: "Real"
+                                                            }),
+                                                            t.versions.map((v)=>/*#__PURE__*/ _jsx("button", {
+                                                                    type: "button",
+                                                                    className: `pdt-chip ${active?.versionId === v.id ? 'pdt-active' : ''}`,
+                                                                    onClick: ()=>selectChrome(slot, {
+                                                                            testKey: t.key,
+                                                                            versionId: v.id
+                                                                        }),
+                                                                    children: v.label
+                                                                }, v.id))
+                                                        ]
+                                                    })
+                                                ]
+                                            }, t.key);
+                                        }
+                                        const testPath = `${base}/tests/${t.key}`;
+                                        const onPage = pathname === testPath;
+                                        // The page defaults to the first version when no cookie targets this test.
+                                        const selectedId = selection?.testKey === t.key ? selection.versionId : t.versions[0]?.id;
+                                        return /*#__PURE__*/ _jsxs("div", {
+                                            className: "pdt-card",
+                                            children: [
+                                                /*#__PURE__*/ _jsxs("div", {
+                                                    className: "pdt-card-head",
+                                                    children: [
+                                                        /*#__PURE__*/ _jsxs(Link, {
+                                                            href: testPath,
+                                                            className: "pdt-card-title",
+                                                            style: {
+                                                                textDecoration: onPage ? 'none' : undefined
+                                                            },
+                                                            children: [
+                                                                t.label,
+                                                                " ",
+                                                                onPage ? null : /*#__PURE__*/ _jsx("span", {
+                                                                    "aria-hidden": true,
+                                                                    children: "›"
+                                                                })
+                                                            ]
+                                                        }),
+                                                        /*#__PURE__*/ _jsx("span", {
+                                                            className: "pdt-kind",
+                                                            children: onPage ? /*#__PURE__*/ _jsx("span", {
+                                                                className: "pdt-viewing",
+                                                                children: "viewing"
+                                                            }) : t.kind
+                                                        })
+                                                    ]
+                                                }),
+                                                /*#__PURE__*/ _jsx("div", {
+                                                    className: "pdt-chips",
+                                                    children: t.versions.map((v)=>/*#__PURE__*/ _jsx("button", {
+                                                            type: "button",
+                                                            className: `pdt-chip ${selectedId === v.id ? 'pdt-active' : ''}`,
+                                                            onClick: ()=>selectVersion(t.key, v.id),
+                                                            children: v.label
+                                                        }, v.id))
+                                                })
+                                            ]
+                                        }, t.key);
+                                    }),
+                                    /*#__PURE__*/ _jsxs("p", {
+                                        className: "pdt-note",
+                                        children: [
+                                            "Page tests open as their own page; header/footer overrides swap into the live layout everywhere until you hit Real. Scriptable via ",
+                                            /*#__PURE__*/ _jsx("span", {
+                                                className: "pdt-code",
+                                                children: "/api/dev/stage?test=…&version=…"
+                                            })
+                                        ]
+                                    })
+                                ]
+                            }) : null,
+                            view === 'settings' ? /*#__PURE__*/ _jsxs("div", {
+                                children: [
+                                    /*#__PURE__*/ _jsxs("div", {
+                                        className: "pdt-settings-row",
+                                        children: [
+                                            /*#__PURE__*/ _jsx("span", {
+                                                className: "pdt-small pdt-muted",
+                                                children: "Corner"
+                                            }),
+                                            /*#__PURE__*/ _jsx("div", {
+                                                className: "pdt-corner-grid",
+                                                children: CORNERS.map((c)=>/*#__PURE__*/ _jsx("button", {
+                                                        type: "button",
+                                                        "aria-label": c.value,
+                                                        className: `pdt-corner-btn ${settings.corner === c.value ? 'pdt-active' : ''}`,
+                                                        onClick: ()=>update({
+                                                                corner: c.value
+                                                            }),
+                                                        children: c.arrow
+                                                    }, c.value))
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ _jsxs("div", {
+                                        className: "pdt-settings-row",
+                                        children: [
+                                            /*#__PURE__*/ _jsx("span", {
+                                                className: "pdt-small pdt-muted",
+                                                children: "Size"
+                                            }),
+                                            /*#__PURE__*/ _jsx("div", {
+                                                className: "pdt-seg",
+                                                children: SIZES.map((s)=>/*#__PURE__*/ _jsx("button", {
+                                                        type: "button",
+                                                        className: settings.size === s ? 'pdt-active' : '',
+                                                        onClick: ()=>update({
+                                                                size: s
+                                                            }),
+                                                        children: s
+                                                    }, s))
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ _jsxs("div", {
+                                        style: {
+                                            padding: '6px 4px 2px'
+                                        },
+                                        children: [
+                                            /*#__PURE__*/ _jsx("button", {
+                                                type: "button",
+                                                className: "pdt-btn",
+                                                style: {
+                                                    width: '100%',
+                                                    justifyContent: 'center'
+                                                },
+                                                onClick: ()=>{
+                                                    try {
+                                                        sessionStorage.setItem(HIDE_KEY, '1');
+                                                    } catch  {}
+                                                    setHidden(true);
+                                                    setOpen(false);
+                                                },
+                                                children: "Hide for this session"
+                                            }),
+                                            /*#__PURE__*/ _jsx("p", {
+                                                className: "pdt-note",
+                                                style: {
+                                                    textAlign: 'center'
+                                                },
+                                                children: "reopens in a new tab / session"
+                                            })
+                                        ]
+                                    })
+                                ]
+                            }) : null
+                        ]
+                    })
+                ]
+            }) : null,
+            /*#__PURE__*/ _jsx("button", {
+                type: "button",
+                "aria-label": "Dev tools",
+                title: "Dev tools",
+                className: `pdt-fab pdt-fab-${settings.size} ${open ? 'pdt-open' : ''}`,
+                onClick: ()=>{
+                    setOpen((v)=>!v);
+                    setView('main');
+                },
+                children: /*#__PURE__*/ _jsxs("svg", {
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: "2",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    "aria-hidden": true,
+                    children: [
+                        /*#__PURE__*/ _jsx("path", {
+                            d: "m5 8 4 4-4 4"
+                        }),
+                        /*#__PURE__*/ _jsx("path", {
+                            d: "M13 16h6"
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+}
+const MenuRow = ({ label, hint, onClick })=>/*#__PURE__*/ _jsx("li", {
+        children: /*#__PURE__*/ _jsxs("button", {
+            type: "button",
+            className: "pdt-menu-row",
+            onClick: onClick,
+            children: [
+                /*#__PURE__*/ _jsx("span", {
+                    children: label
+                }),
+                /*#__PURE__*/ _jsxs("span", {
+                    className: "pdt-menu-hint",
+                    children: [
+                        hint ? /*#__PURE__*/ _jsx("span", {
+                            children: hint
+                        }) : null,
+                        /*#__PURE__*/ _jsx("span", {
+                            "aria-hidden": true,
+                            children: "›"
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+const SnapshotMissing = ({ retry })=>/*#__PURE__*/ _jsxs("p", {
+        className: "pdt-note",
+        children: [
+            /*#__PURE__*/ _jsx("span", {
+                className: "pdt-warn",
+                children: "Couldn't reach /api/dev."
+            }),
+            " Is ",
+            /*#__PURE__*/ _jsx("span", {
+                className: "pdt-code",
+                children: "devToolsPlugin()"
+            }),
+            " in your Payload plugins list?",
+            ' ',
+            /*#__PURE__*/ _jsx("button", {
+                type: "button",
+                style: {
+                    textDecoration: 'underline'
+                },
+                onClick: ()=>void retry(),
+                children: "Retry"
+            })
+        ]
+    });
+
+//# sourceMappingURL=DevToolbarClient.js.map