@pro-laico/payload-dev-tools 0.0.0

package/dist/next/createDevPage.js

@@ -0,0 +1,287 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { cookies } from "next/headers";
+import { notFound } from "next/navigation";
+import { STAGE_COOKIE } from "../cookies.js";
+import { parseStage } from "../harness.js";
+import { getPayloadClient } from "../lib/getPayloadClient.js";
+import { buildDevSnapshot } from "../lib/snapshot.js";
+import { SeedCard } from "./client.js";
+import { PDTP_CSS } from "./pageStyles.js";
+import { FontsView, IconsView, ImagesView, MuxView } from "./views.js";
+/**
+ * The `/dev` pages — real routes inside your app, one drop-in file:
+ *
+ *   // app/(frontend)/dev/[[...view]]/page.tsx
+ *   import { createDevPage } from '@pro-laico/payload-dev-tools/next'
+ *   import { devTests } from '@/dev/tests'
+ *   export const dynamic = 'force-dynamic'
+ *   export default createDevPage({ tests: devTests })
+ *
+ * Views: `/dev` (overview + seed controls), `/dev/icons` (grid + active-set switcher),
+ * `/dev/fonts` (specimens in the real served fonts), `/dev/images`, `/dev/mux`, and
+ * `/dev/tests/<key>` (one page per test; the shown version is toggled from the toolbar). The
+ * pages render content only — navigation lives in the `<DevToolbar>`, which stays open while you
+ * browse between them. Because the file lives in your `(frontend)` group, everything inherits
+ * your layout — header, fonts, globals — which is the point: visual confirmation happens in the
+ * app, not a facsimile of it. The component resolves Payload itself (config stash → the
+ * `@payload-config` alias), so it takes no config prop. Your own labs coexist: a static route
+ * like `app/(frontend)/dev/blocks/page.tsx` always beats this catch-all.
+ */ export function createDevPage(options = {}) {
+    const { tests = [], enabled } = options;
+    return async function DevPage({ params, searchParams }) {
+        if (!(enabled ?? process.env.NODE_ENV === 'development')) notFound();
+        const { view = [] } = await params;
+        const query = await searchParams ?? {};
+        const payload = await getPayloadClient();
+        const snapshot = await buildDevSnapshot(payload);
+        const [section, ...rest] = view;
+        switch(section){
+            case undefined:
+                return /*#__PURE__*/ _jsx(Shell, {
+                    snapshot: snapshot,
+                    title: snapshot.devRoute,
+                    children: /*#__PURE__*/ _jsx(DevIndex, {
+                        snapshot: snapshot
+                    })
+                });
+            case 'icons':
+                if (!snapshot.icons || rest.length) notFound();
+                return /*#__PURE__*/ _jsx(Shell, {
+                    snapshot: snapshot,
+                    title: "Icons",
+                    children: /*#__PURE__*/ _jsx(IconsView, {
+                        payload: payload,
+                        snapshot: snapshot
+                    })
+                });
+            case 'fonts':
+                if (!snapshot.fonts || rest.length) notFound();
+                return /*#__PURE__*/ _jsx(Shell, {
+                    snapshot: snapshot,
+                    title: "Fonts",
+                    children: /*#__PURE__*/ _jsx(FontsView, {
+                        payload: payload,
+                        snapshot: snapshot
+                    })
+                });
+            case 'images':
+                if (!snapshot.images || rest.length) notFound();
+                return /*#__PURE__*/ _jsx(Shell, {
+                    snapshot: snapshot,
+                    title: "Images",
+                    children: /*#__PURE__*/ _jsx(ImagesView, {
+                        payload: payload,
+                        snapshot: snapshot,
+                        searchParams: query
+                    })
+                });
+            case 'mux':
+                if (!snapshot.mux || rest.length) notFound();
+                return /*#__PURE__*/ _jsx(Shell, {
+                    snapshot: snapshot,
+                    title: "Mux",
+                    children: /*#__PURE__*/ _jsx(MuxView, {
+                        payload: payload,
+                        snapshot: snapshot
+                    })
+                });
+            case 'tests':
+                {
+                    if (!tests.length || rest.length > 1) notFound();
+                    if (rest.length === 1) return /*#__PURE__*/ _jsx(TestPage, {
+                        tests: tests,
+                        testKey: rest[0] ?? ''
+                    });
+                    return /*#__PURE__*/ _jsx(Shell, {
+                        snapshot: snapshot,
+                        title: "Tests",
+                        children: /*#__PURE__*/ _jsx(TestsIndex, {
+                            tests: tests
+                        })
+                    });
+                }
+            default:
+                notFound();
+        }
+    };
+}
+/** Content chrome only — heading + env line. Navigation is the toolbar's job. */ const Shell = ({ snapshot, title, children })=>/*#__PURE__*/ _jsxs("div", {
+        className: "pdtp",
+        children: [
+            /*#__PURE__*/ _jsx("style", {
+                dangerouslySetInnerHTML: {
+                    __html: PDTP_CSS
+                }
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: "pdtp-container",
+                children: [
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: "pdtp-head",
+                        children: [
+                            /*#__PURE__*/ _jsx("h1", {
+                                children: title
+                            }),
+                            /*#__PURE__*/ _jsx("span", {
+                                className: "pdtp-badge",
+                                children: "dev only"
+                            }),
+                            /*#__PURE__*/ _jsxs("span", {
+                                className: "pdtp-env",
+                                children: [
+                                    snapshot.env.nodeEnv,
+                                    " · node ",
+                                    snapshot.env.nodeVersion,
+                                    " · navigate via the dev toolbar ↘"
+                                ]
+                            })
+                        ]
+                    }),
+                    children
+                ]
+            })
+        ]
+    });
+const DevIndex = ({ snapshot })=>/*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx("div", {
+                className: "pdtp-chips",
+                children: Object.entries(snapshot.plugins).map(([name, on])=>/*#__PURE__*/ _jsxs("span", {
+                        children: [
+                            /*#__PURE__*/ _jsx("span", {
+                                className: `pdtp-dot ${on ? 'pdtp-dot-on' : 'pdtp-dot-off'}`
+                            }),
+                            "payload-",
+                            name
+                        ]
+                    }, name))
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                className: "pdtp-section",
+                children: /*#__PURE__*/ _jsxs("div", {
+                    className: "pdtp-grid",
+                    children: [
+                        snapshot.seed ? /*#__PURE__*/ _jsx(SeedCard, {
+                            seed: snapshot.seed,
+                            adminRoute: snapshot.adminRoute
+                        }) : null,
+                        /*#__PURE__*/ _jsxs("div", {
+                            className: "pdtp-card",
+                            children: [
+                                /*#__PURE__*/ _jsxs("h2", {
+                                    children: [
+                                        "Collections ",
+                                        /*#__PURE__*/ _jsx("span", {
+                                            className: "pdtp-kind",
+                                            children: "docs"
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ _jsx("table", {
+                                    className: "pdtp-table",
+                                    children: /*#__PURE__*/ _jsx("tbody", {
+                                        children: snapshot.collections.map((c)=>/*#__PURE__*/ _jsxs("tr", {
+                                                children: [
+                                                    /*#__PURE__*/ _jsx("td", {
+                                                        children: c.slug
+                                                    }),
+                                                    /*#__PURE__*/ _jsx("td", {
+                                                        className: "pdtp-mono",
+                                                        children: c.count ?? '?'
+                                                    })
+                                                ]
+                                            }, c.slug))
+                                    })
+                                })
+                            ]
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ _jsxs("p", {
+                className: "pdtp-note",
+                children: [
+                    "Machine-readable: ",
+                    /*#__PURE__*/ _jsx("span", {
+                        className: "pdtp-code",
+                        children: "GET /api/dev"
+                    }),
+                    " serves this as JSON (browsers land here instead)."
+                ]
+            })
+        ]
+    });
+const TestsIndex = ({ tests })=>/*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsxs("table", {
+                className: "pdtp-table",
+                children: [
+                    /*#__PURE__*/ _jsx("thead", {
+                        children: /*#__PURE__*/ _jsxs("tr", {
+                            children: [
+                                /*#__PURE__*/ _jsx("th", {
+                                    children: "test"
+                                }),
+                                /*#__PURE__*/ _jsx("th", {
+                                    children: "kind"
+                                }),
+                                /*#__PURE__*/ _jsx("th", {
+                                    children: "versions"
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx("tbody", {
+                        children: tests.map((t)=>/*#__PURE__*/ _jsxs("tr", {
+                                children: [
+                                    /*#__PURE__*/ _jsx("td", {
+                                        children: t.label
+                                    }),
+                                    /*#__PURE__*/ _jsx("td", {
+                                        className: "pdtp-mono",
+                                        children: t.kind
+                                    }),
+                                    /*#__PURE__*/ _jsx("td", {
+                                        className: "pdtp-mono",
+                                        children: t.versions.map((v)=>v.label).join(' · ')
+                                    })
+                                ]
+                            }, t.key))
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs("p", {
+                className: "pdtp-note",
+                children: [
+                    "Each test is one page — open it (and toggle versions) from the toolbar's Tests view, or script it via",
+                    ' ',
+                    /*#__PURE__*/ _jsx("span", {
+                        className: "pdtp-code",
+                        children: "/api/dev/stage?test=…&version=…"
+                    })
+                ]
+            })
+        ]
+    });
+/** One page per test. The shown version comes from the toolbar's selection cookie (defaulting to
+ *  the first version) and renders inside your real frontend layout with NO extra chrome — the
+ *  toolbar's Tests view names what you're looking at. The `display: contents` wrapper is
+ *  layout-invisible; it exists only so screenshot tooling can assert `data-pdt-test` /
+ *  `data-pdt-version`. */ const TestPage = async ({ tests, testKey })=>{
+    const test = tests.find((t)=>t.key === testKey);
+    if (!test) notFound();
+    const jar = await cookies();
+    const stage = parseStage(jar.get(STAGE_COOKIE)?.value, tests);
+    const version = (stage?.test.key === test.key ? stage.version : undefined) ?? test.versions[0];
+    if (!version) notFound();
+    return /*#__PURE__*/ _jsx("div", {
+        style: {
+            display: 'contents'
+        },
+        "data-pdt-test": test.key,
+        "data-pdt-version": version.id,
+        children: await version.render()
+    });
+};
+
+//# sourceMappingURL=createDevPage.js.map

package/dist/next/createDevPage.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/next/createDevPage.tsx"],"sourcesContent":["import { cookies } from 'next/headers'\nimport { notFound } from 'next/navigation'\nimport type { ReactNode } from 'react'\nimport { STAGE_COOKIE } from '../cookies'\nimport { parseStage, type Test } from '../harness'\nimport { getPayloadClient } from '../lib/getPayloadClient'\nimport { buildDevSnapshot, type DevSnapshot } from '../lib/snapshot'\nimport { SeedCard } from './client'\nimport { PDTP_CSS } from './pageStyles'\nimport { FontsView, IconsView, ImagesView, MuxView } from './views'\n\nexport type CreateDevPageOptions = {\n  /** Component tests (from `defineTest`) — each gets ONE page at `/dev/tests/<key>`; which\n   *  version it shows is controlled from the dev toolbar (via the selection cookie). Pass the\n   *  same array to `<DevToolbar tests>`. */\n  tests?: Test[]\n  /** Force the pages on/off. Defaults to `NODE_ENV === 'development'` (404 otherwise). */\n  enabled?: boolean\n}\n\ntype DevPageProps = { params: Promise<{ view?: string[] }>; searchParams?: Promise<Record<string, string | string[] | undefined>> }\n\n/**\n * The `/dev` pages — real routes inside your app, one drop-in file:\n *\n *   // app/(frontend)/dev/[[...view]]/page.tsx\n *   import { createDevPage } from '@pro-laico/payload-dev-tools/next'\n *   import { devTests } from '@/dev/tests'\n *   export const dynamic = 'force-dynamic'\n *   export default createDevPage({ tests: devTests })\n *\n * Views: `/dev` (overview + seed controls), `/dev/icons` (grid + active-set switcher),\n * `/dev/fonts` (specimens in the real served fonts), `/dev/images`, `/dev/mux`, and\n * `/dev/tests/<key>` (one page per test; the shown version is toggled from the toolbar). The\n * pages render content only — navigation lives in the `<DevToolbar>`, which stays open while you\n * browse between them. Because the file lives in your `(frontend)` group, everything inherits\n * your layout — header, fonts, globals — which is the point: visual confirmation happens in the\n * app, not a facsimile of it. The component resolves Payload itself (config stash → the\n * `@payload-config` alias), so it takes no config prop. Your own labs coexist: a static route\n * like `app/(frontend)/dev/blocks/page.tsx` always beats this catch-all.\n */\nexport function createDevPage(options: CreateDevPageOptions = {}) {\n  const { tests = [], enabled } = options\n\n  return async function DevPage({ params, searchParams }: DevPageProps) {\n    if (!(enabled ?? process.env.NODE_ENV === 'development')) notFound()\n\n    const { view = [] } = await params\n    const query = (await searchParams) ?? {}\n    const payload = await getPayloadClient()\n    const snapshot = await buildDevSnapshot(payload)\n\n    const [section, ...rest] = view\n    switch (section) {\n      case undefined:\n        return (\n          <Shell snapshot={snapshot} title={snapshot.devRoute}>\n            <DevIndex snapshot={snapshot} />\n          </Shell>\n        )\n      case 'icons':\n        if (!snapshot.icons || rest.length) notFound()\n        return (\n          <Shell snapshot={snapshot} title=\"Icons\">\n            <IconsView payload={payload} snapshot={snapshot} />\n          </Shell>\n        )\n      case 'fonts':\n        if (!snapshot.fonts || rest.length) notFound()\n        return (\n          <Shell snapshot={snapshot} title=\"Fonts\">\n            <FontsView payload={payload} snapshot={snapshot} />\n          </Shell>\n        )\n      case 'images':\n        if (!snapshot.images || rest.length) notFound()\n        return (\n          <Shell snapshot={snapshot} title=\"Images\">\n            <ImagesView payload={payload} snapshot={snapshot} searchParams={query} />\n          </Shell>\n        )\n      case 'mux':\n        if (!snapshot.mux || rest.length) notFound()\n        return (\n          <Shell snapshot={snapshot} title=\"Mux\">\n            <MuxView payload={payload} snapshot={snapshot} />\n          </Shell>\n        )\n      case 'tests': {\n        if (!tests.length || rest.length > 1) notFound()\n        if (rest.length === 1) return <TestPage tests={tests} testKey={rest[0] ?? ''} />\n        return (\n          <Shell snapshot={snapshot} title=\"Tests\">\n            <TestsIndex tests={tests} />\n          </Shell>\n        )\n      }\n      default:\n        notFound()\n    }\n  }\n}\n\n/** Content chrome only — heading + env line. Navigation is the toolbar's job. */\nconst Shell = ({ snapshot, title, children }: { snapshot: DevSnapshot; title: string; children: ReactNode }) => (\n  <div className=\"pdtp\">\n    {/* dangerouslySetInnerHTML: our own static CSS — React would escape selector characters as a text child */}\n    <style dangerouslySetInnerHTML={{ __html: PDTP_CSS }} />\n    <div className=\"pdtp-container\">\n      <div className=\"pdtp-head\">\n        <h1>{title}</h1>\n        <span className=\"pdtp-badge\">dev only</span>\n        <span className=\"pdtp-env\">\n          {snapshot.env.nodeEnv} · node {snapshot.env.nodeVersion} · navigate via the dev toolbar ↘\n        </span>\n      </div>\n      {children}\n    </div>\n  </div>\n)\n\nconst DevIndex = ({ snapshot }: { snapshot: DevSnapshot }) => (\n  <>\n    <div className=\"pdtp-chips\">\n      {Object.entries(snapshot.plugins).map(([name, on]) => (\n        <span key={name}>\n          <span className={`pdtp-dot ${on ? 'pdtp-dot-on' : 'pdtp-dot-off'}`} />\n          payload-{name}\n        </span>\n      ))}\n    </div>\n\n    <div className=\"pdtp-section\">\n      <div className=\"pdtp-grid\">\n        {snapshot.seed ? <SeedCard seed={snapshot.seed} adminRoute={snapshot.adminRoute} /> : null}\n        <div className=\"pdtp-card\">\n          <h2>\n            Collections <span className=\"pdtp-kind\">docs</span>\n          </h2>\n          <table className=\"pdtp-table\">\n            <tbody>\n              {snapshot.collections.map((c) => (\n                <tr key={c.slug}>\n                  <td>{c.slug}</td>\n                  <td className=\"pdtp-mono\">{c.count ?? '?'}</td>\n                </tr>\n              ))}\n            </tbody>\n          </table>\n        </div>\n      </div>\n    </div>\n\n    <p className=\"pdtp-note\">\n      Machine-readable: <span className=\"pdtp-code\">GET /api/dev</span> serves this as JSON (browsers land here instead).\n    </p>\n  </>\n)\n\nconst TestsIndex = ({ tests }: { tests: Test[] }) => (\n  <>\n    <table className=\"pdtp-table\">\n      <thead>\n        <tr>\n          <th>test</th>\n          <th>kind</th>\n          <th>versions</th>\n        </tr>\n      </thead>\n      <tbody>\n        {tests.map((t) => (\n          <tr key={t.key}>\n            <td>{t.label}</td>\n            <td className=\"pdtp-mono\">{t.kind}</td>\n            <td className=\"pdtp-mono\">{t.versions.map((v) => v.label).join(' · ')}</td>\n          </tr>\n        ))}\n      </tbody>\n    </table>\n    <p className=\"pdtp-note\">\n      Each test is one page — open it (and toggle versions) from the toolbar's Tests view, or script it via{' '}\n      <span className=\"pdtp-code\">/api/dev/stage?test=…&version=…</span>\n    </p>\n  </>\n)\n\n/** One page per test. The shown version comes from the toolbar's selection cookie (defaulting to\n *  the first version) and renders inside your real frontend layout with NO extra chrome — the\n *  toolbar's Tests view names what you're looking at. The `display: contents` wrapper is\n *  layout-invisible; it exists only so screenshot tooling can assert `data-pdt-test` /\n *  `data-pdt-version`. */\nconst TestPage = async ({ tests, testKey }: { tests: Test[]; testKey: string }) => {\n  const test = tests.find((t) => t.key === testKey)\n  if (!test) notFound()\n\n  const jar = await cookies()\n  const stage = parseStage(jar.get(STAGE_COOKIE)?.value, tests)\n  const version = (stage?.test.key === test.key ? stage.version : undefined) ?? test.versions[0]\n  if (!version) notFound()\n\n  return (\n    <div style={{ display: 'contents' }} data-pdt-test={test.key} data-pdt-version={version.id}>\n      {await version.render()}\n    </div>\n  )\n}\n"],"names":["cookies","notFound","STAGE_COOKIE","parseStage","getPayloadClient","buildDevSnapshot","SeedCard","PDTP_CSS","FontsView","IconsView","ImagesView","MuxView","createDevPage","options","tests","enabled","DevPage","params","searchParams","process","env","NODE_ENV","view","query","payload","snapshot","section","rest","undefined","Shell","title","devRoute","DevIndex","icons","length","fonts","images","mux","TestPage","testKey","TestsIndex","children","div","className","style","dangerouslySetInnerHTML","__html","h1","span","nodeEnv","nodeVersion","Object","entries","plugins","map","name","on","seed","adminRoute","h2","table","tbody","collections","c","tr","td","slug","count","p","thead","th","t","label","kind","versions","v","join","key","test","find","jar","stage","get","value","version","display","data-pdt-test","data-pdt-version","id","render"],"mappings":"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"}

package/dist/next/pageStyles.d.ts

@@ -0,0 +1,5 @@
+/** The dev pages' stylesheet, injected once by the page shell. Scoped under `.pdtp` and
+ *  self-contained (own dark theme) — the pages inherit the host's frontend layout (header,
+ *  fonts, globals) but never depend on its utility classes. */
+export declare const PDTP_CSS = "\n.pdtp { color-scheme: dark;\n  --pdtp-accent: oklch(0.72 0.16 250); --pdtp-bg: oklch(0.145 0 0); --pdtp-card: oklch(0.2 0 0);\n  --pdtp-fg: oklch(0.985 0 0); --pdtp-muted: oklch(0.708 0 0); --pdtp-border: oklch(1 0 0 / 12%);\n  --pdtp-hover: oklch(1 0 0 / 7%); --pdtp-danger: oklch(0.65 0.18 25); --pdtp-warn: oklch(0.8 0.14 85);\n  background: var(--pdtp-bg); color: var(--pdtp-fg); min-height: 60vh;\n  font-family: ui-sans-serif, system-ui, sans-serif; font-size: 15px; line-height: 1.5; }\n.pdtp *, .pdtp *::before, .pdtp *::after { box-sizing: border-box; }\n.pdtp a { color: var(--pdtp-accent); text-decoration: none; }\n.pdtp a:hover { text-decoration: underline; }\n/* :where() keeps this reset at zero specificity so component classes below always win it. */\n:where(.pdtp) button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }\n\n.pdtp-container { max-width: 1000px; margin: 0 auto; padding: 40px 24px 80px; }\n.pdtp-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; }\n.pdtp-head h1 { margin: 0; font-size: 1.5rem; letter-spacing: -0.02em; color: var(--pdtp-fg); }\n.pdtp-badge { font-family: ui-monospace, Consolas, monospace; font-size: 10px; text-transform: uppercase;\n  letter-spacing: 0.08em; color: var(--pdtp-muted); border: 1px solid var(--pdtp-border); border-radius: 4px; padding: 2px 7px; }\n.pdtp-env { color: var(--pdtp-muted); font-size: 0.85rem; }\n\n.pdtp-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }\n.pdtp-card { border: 1px solid var(--pdtp-border); background: var(--pdtp-card); border-radius: 12px; padding: 16px; }\n.pdtp-card h2 { margin: 0 0 10px; font-size: 1rem; font-weight: 600; color: var(--pdtp-fg); display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }\n.pdtp-kind { font-family: ui-monospace, Consolas, monospace; font-size: 10.5px; text-transform: uppercase;\n  letter-spacing: 0.06em; color: var(--pdtp-muted); font-weight: 400; }\n.pdtp-section { margin: 32px 0 0; }\n.pdtp-section > h2 { margin: 0 0 12px; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--pdtp-muted); font-weight: 600; }\n\n.pdtp-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }\n.pdtp-table td, .pdtp-table th { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--pdtp-border); }\n.pdtp-table th { color: var(--pdtp-muted); font-weight: 500; font-size: 0.8rem; }\n.pdtp-table td:last-child, .pdtp-table th:last-child { text-align: right; }\n.pdtp-mono { font-family: ui-monospace, Consolas, monospace; font-size: 0.85em; }\n.pdtp-code { font-family: ui-monospace, Consolas, monospace; font-size: 0.85em; background: oklch(0.26 0 0); padding: 1px 6px; border-radius: 4px; }\n.pdtp-muted { color: var(--pdtp-muted); }\n.pdtp-warn { color: var(--pdtp-warn); }\n\n.pdtp-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; }\n.pdtp-dot-on { background: oklch(0.75 0.15 165); } .pdtp-dot-off { background: oklch(0.45 0 0); }\n.pdtp-chips { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 0.9rem; }\n\n.pdtp-chip { border: 1px solid var(--pdtp-border); border-radius: 999px; padding: 5px 14px; font-size: 0.85rem;\n  background: oklch(0.26 0 0); transition: border-color 0.15s ease, background 0.15s ease; }\n.pdtp-chip:hover { background: oklch(0.31 0 0); border-color: oklch(0.45 0 0); }\n.pdtp-chip.pdtp-active { background: var(--pdtp-accent); border-color: var(--pdtp-accent); color: oklch(0.13 0 0); font-weight: 600; }\n.pdtp-seg { display: inline-flex; overflow: hidden; border: 1px solid var(--pdtp-border); border-radius: 999px; }\n.pdtp-seg button { padding: 4px 13px; font-size: 0.8rem; }\n.pdtp-seg button:hover { background: var(--pdtp-hover); }\n.pdtp-seg button.pdtp-active { background: var(--pdtp-accent); color: oklch(0.13 0 0); font-weight: 600; }\n\n.pdtp-btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--pdtp-border);\n  border-radius: 8px; padding: 7px 14px; font-size: 0.9rem; font-weight: 500; }\n.pdtp-btn:hover { background: var(--pdtp-hover); text-decoration: none; }\n.pdtp-btn:disabled { opacity: 0.55; cursor: default; }\n.pdtp-btn-primary { background: var(--pdtp-accent); border-color: var(--pdtp-accent); color: oklch(0.13 0 0); font-weight: 600; }\n.pdtp-btn-danger { border-color: color-mix(in oklch, var(--pdtp-danger), transparent 45%); color: var(--pdtp-danger); }\n.pdtp-error { margin-top: 10px; border: 1px solid color-mix(in oklch, var(--pdtp-danger), transparent 55%);\n  border-radius: 8px; padding: 10px 12px; font-size: 0.85rem; color: var(--pdtp-danger); }\n.pdtp-error ul { margin: 6px 0 0; padding-left: 18px; color: var(--pdtp-fg); }\n.pdtp-note { color: var(--pdtp-muted); font-size: 0.82rem; margin: 10px 0 0; }\n\n.pdtp-icon-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }\n.pdtp-icon-cell { display: flex; flex-direction: column; align-items: center; gap: 8px; border: 1px solid var(--pdtp-border);\n  border-radius: 10px; padding: 14px 8px 10px; background: var(--pdtp-card); }\n.pdtp-icon-cell svg { width: 28px; height: 28px; color: var(--pdtp-fg); }\n.pdtp-icon-cell figcaption { font-family: ui-monospace, Consolas, monospace; font-size: 10.5px; color: var(--pdtp-muted);\n  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n\n.pdtp-img-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }\n.pdtp-img-cell { border: 1px solid var(--pdtp-border); border-radius: 10px; overflow: hidden; background: var(--pdtp-card); }\n.pdtp-img-cell img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }\n.pdtp-img-cell figcaption { padding: 7px 10px; font-family: ui-monospace, Consolas, monospace; font-size: 10.5px;\n  color: var(--pdtp-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n\n.pdtp-specimen { border: 1px solid var(--pdtp-border); background: var(--pdtp-card); border-radius: 12px; padding: 20px; margin-bottom: 14px; }\n.pdtp-specimen-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 12px; }\n.pdtp-specimen-big { font-size: 2.2rem; line-height: 1.15; margin: 0 0 8px; overflow-wrap: break-word; }\n.pdtp-specimen-body { margin: 0; color: var(--pdtp-muted); }\n";
+//# sourceMappingURL=pageStyles.d.ts.map

package/dist/next/pageStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pageStyles.d.ts","sourceRoot":"","sources":["../../src/next/pageStyles.ts"],"names":[],"mappings":"AAAA;;+DAE+D;AAC/D,eAAO,MAAM,QAAQ,21MA8EpB,CAAA"}

package/dist/next/pageStyles.js

@@ -0,0 +1,83 @@
+/** The dev pages' stylesheet, injected once by the page shell. Scoped under `.pdtp` and
+ *  self-contained (own dark theme) — the pages inherit the host's frontend layout (header,
+ *  fonts, globals) but never depend on its utility classes. */ export const PDTP_CSS = `
+.pdtp { color-scheme: dark;
+  --pdtp-accent: oklch(0.72 0.16 250); --pdtp-bg: oklch(0.145 0 0); --pdtp-card: oklch(0.2 0 0);
+  --pdtp-fg: oklch(0.985 0 0); --pdtp-muted: oklch(0.708 0 0); --pdtp-border: oklch(1 0 0 / 12%);
+  --pdtp-hover: oklch(1 0 0 / 7%); --pdtp-danger: oklch(0.65 0.18 25); --pdtp-warn: oklch(0.8 0.14 85);
+  background: var(--pdtp-bg); color: var(--pdtp-fg); min-height: 60vh;
+  font-family: ui-sans-serif, system-ui, sans-serif; font-size: 15px; line-height: 1.5; }
+.pdtp *, .pdtp *::before, .pdtp *::after { box-sizing: border-box; }
+.pdtp a { color: var(--pdtp-accent); text-decoration: none; }
+.pdtp a:hover { text-decoration: underline; }
+/* :where() keeps this reset at zero specificity so component classes below always win it. */
+:where(.pdtp) button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
+
+.pdtp-container { max-width: 1000px; margin: 0 auto; padding: 40px 24px 80px; }
+.pdtp-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; }
+.pdtp-head h1 { margin: 0; font-size: 1.5rem; letter-spacing: -0.02em; color: var(--pdtp-fg); }
+.pdtp-badge { font-family: ui-monospace, Consolas, monospace; font-size: 10px; text-transform: uppercase;
+  letter-spacing: 0.08em; color: var(--pdtp-muted); border: 1px solid var(--pdtp-border); border-radius: 4px; padding: 2px 7px; }
+.pdtp-env { color: var(--pdtp-muted); font-size: 0.85rem; }
+
+.pdtp-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
+.pdtp-card { border: 1px solid var(--pdtp-border); background: var(--pdtp-card); border-radius: 12px; padding: 16px; }
+.pdtp-card h2 { margin: 0 0 10px; font-size: 1rem; font-weight: 600; color: var(--pdtp-fg); display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
+.pdtp-kind { font-family: ui-monospace, Consolas, monospace; font-size: 10.5px; text-transform: uppercase;
+  letter-spacing: 0.06em; color: var(--pdtp-muted); font-weight: 400; }
+.pdtp-section { margin: 32px 0 0; }
+.pdtp-section > h2 { margin: 0 0 12px; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--pdtp-muted); font-weight: 600; }
+
+.pdtp-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
+.pdtp-table td, .pdtp-table th { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--pdtp-border); }
+.pdtp-table th { color: var(--pdtp-muted); font-weight: 500; font-size: 0.8rem; }
+.pdtp-table td:last-child, .pdtp-table th:last-child { text-align: right; }
+.pdtp-mono { font-family: ui-monospace, Consolas, monospace; font-size: 0.85em; }
+.pdtp-code { font-family: ui-monospace, Consolas, monospace; font-size: 0.85em; background: oklch(0.26 0 0); padding: 1px 6px; border-radius: 4px; }
+.pdtp-muted { color: var(--pdtp-muted); }
+.pdtp-warn { color: var(--pdtp-warn); }
+
+.pdtp-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; }
+.pdtp-dot-on { background: oklch(0.75 0.15 165); } .pdtp-dot-off { background: oklch(0.45 0 0); }
+.pdtp-chips { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 0.9rem; }
+
+.pdtp-chip { border: 1px solid var(--pdtp-border); border-radius: 999px; padding: 5px 14px; font-size: 0.85rem;
+  background: oklch(0.26 0 0); transition: border-color 0.15s ease, background 0.15s ease; }
+.pdtp-chip:hover { background: oklch(0.31 0 0); border-color: oklch(0.45 0 0); }
+.pdtp-chip.pdtp-active { background: var(--pdtp-accent); border-color: var(--pdtp-accent); color: oklch(0.13 0 0); font-weight: 600; }
+.pdtp-seg { display: inline-flex; overflow: hidden; border: 1px solid var(--pdtp-border); border-radius: 999px; }
+.pdtp-seg button { padding: 4px 13px; font-size: 0.8rem; }
+.pdtp-seg button:hover { background: var(--pdtp-hover); }
+.pdtp-seg button.pdtp-active { background: var(--pdtp-accent); color: oklch(0.13 0 0); font-weight: 600; }
+
+.pdtp-btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--pdtp-border);
+  border-radius: 8px; padding: 7px 14px; font-size: 0.9rem; font-weight: 500; }
+.pdtp-btn:hover { background: var(--pdtp-hover); text-decoration: none; }
+.pdtp-btn:disabled { opacity: 0.55; cursor: default; }
+.pdtp-btn-primary { background: var(--pdtp-accent); border-color: var(--pdtp-accent); color: oklch(0.13 0 0); font-weight: 600; }
+.pdtp-btn-danger { border-color: color-mix(in oklch, var(--pdtp-danger), transparent 45%); color: var(--pdtp-danger); }
+.pdtp-error { margin-top: 10px; border: 1px solid color-mix(in oklch, var(--pdtp-danger), transparent 55%);
+  border-radius: 8px; padding: 10px 12px; font-size: 0.85rem; color: var(--pdtp-danger); }
+.pdtp-error ul { margin: 6px 0 0; padding-left: 18px; color: var(--pdtp-fg); }
+.pdtp-note { color: var(--pdtp-muted); font-size: 0.82rem; margin: 10px 0 0; }
+
+.pdtp-icon-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
+.pdtp-icon-cell { display: flex; flex-direction: column; align-items: center; gap: 8px; border: 1px solid var(--pdtp-border);
+  border-radius: 10px; padding: 14px 8px 10px; background: var(--pdtp-card); }
+.pdtp-icon-cell svg { width: 28px; height: 28px; color: var(--pdtp-fg); }
+.pdtp-icon-cell figcaption { font-family: ui-monospace, Consolas, monospace; font-size: 10.5px; color: var(--pdtp-muted);
+  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+.pdtp-img-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
+.pdtp-img-cell { border: 1px solid var(--pdtp-border); border-radius: 10px; overflow: hidden; background: var(--pdtp-card); }
+.pdtp-img-cell img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
+.pdtp-img-cell figcaption { padding: 7px 10px; font-family: ui-monospace, Consolas, monospace; font-size: 10.5px;
+  color: var(--pdtp-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+.pdtp-specimen { border: 1px solid var(--pdtp-border); background: var(--pdtp-card); border-radius: 12px; padding: 20px; margin-bottom: 14px; }
+.pdtp-specimen-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 12px; }
+.pdtp-specimen-big { font-size: 2.2rem; line-height: 1.15; margin: 0 0 8px; overflow-wrap: break-word; }
+.pdtp-specimen-body { margin: 0; color: var(--pdtp-muted); }
+`;
+
+//# sourceMappingURL=pageStyles.js.map

package/dist/next/pageStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/next/pageStyles.ts"],"sourcesContent":["/** The dev pages' stylesheet, injected once by the page shell. Scoped under `.pdtp` and\n *  self-contained (own dark theme) — the pages inherit the host's frontend layout (header,\n *  fonts, globals) but never depend on its utility classes. */\nexport const PDTP_CSS = `\n.pdtp { color-scheme: dark;\n  --pdtp-accent: oklch(0.72 0.16 250); --pdtp-bg: oklch(0.145 0 0); --pdtp-card: oklch(0.2 0 0);\n  --pdtp-fg: oklch(0.985 0 0); --pdtp-muted: oklch(0.708 0 0); --pdtp-border: oklch(1 0 0 / 12%);\n  --pdtp-hover: oklch(1 0 0 / 7%); --pdtp-danger: oklch(0.65 0.18 25); --pdtp-warn: oklch(0.8 0.14 85);\n  background: var(--pdtp-bg); color: var(--pdtp-fg); min-height: 60vh;\n  font-family: ui-sans-serif, system-ui, sans-serif; font-size: 15px; line-height: 1.5; }\n.pdtp *, .pdtp *::before, .pdtp *::after { box-sizing: border-box; }\n.pdtp a { color: var(--pdtp-accent); text-decoration: none; }\n.pdtp a:hover { text-decoration: underline; }\n/* :where() keeps this reset at zero specificity so component classes below always win it. */\n:where(.pdtp) button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }\n\n.pdtp-container { max-width: 1000px; margin: 0 auto; padding: 40px 24px 80px; }\n.pdtp-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; }\n.pdtp-head h1 { margin: 0; font-size: 1.5rem; letter-spacing: -0.02em; color: var(--pdtp-fg); }\n.pdtp-badge { font-family: ui-monospace, Consolas, monospace; font-size: 10px; text-transform: uppercase;\n  letter-spacing: 0.08em; color: var(--pdtp-muted); border: 1px solid var(--pdtp-border); border-radius: 4px; padding: 2px 7px; }\n.pdtp-env { color: var(--pdtp-muted); font-size: 0.85rem; }\n\n.pdtp-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }\n.pdtp-card { border: 1px solid var(--pdtp-border); background: var(--pdtp-card); border-radius: 12px; padding: 16px; }\n.pdtp-card h2 { margin: 0 0 10px; font-size: 1rem; font-weight: 600; color: var(--pdtp-fg); display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }\n.pdtp-kind { font-family: ui-monospace, Consolas, monospace; font-size: 10.5px; text-transform: uppercase;\n  letter-spacing: 0.06em; color: var(--pdtp-muted); font-weight: 400; }\n.pdtp-section { margin: 32px 0 0; }\n.pdtp-section > h2 { margin: 0 0 12px; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--pdtp-muted); font-weight: 600; }\n\n.pdtp-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }\n.pdtp-table td, .pdtp-table th { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--pdtp-border); }\n.pdtp-table th { color: var(--pdtp-muted); font-weight: 500; font-size: 0.8rem; }\n.pdtp-table td:last-child, .pdtp-table th:last-child { text-align: right; }\n.pdtp-mono { font-family: ui-monospace, Consolas, monospace; font-size: 0.85em; }\n.pdtp-code { font-family: ui-monospace, Consolas, monospace; font-size: 0.85em; background: oklch(0.26 0 0); padding: 1px 6px; border-radius: 4px; }\n.pdtp-muted { color: var(--pdtp-muted); }\n.pdtp-warn { color: var(--pdtp-warn); }\n\n.pdtp-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; }\n.pdtp-dot-on { background: oklch(0.75 0.15 165); } .pdtp-dot-off { background: oklch(0.45 0 0); }\n.pdtp-chips { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 0.9rem; }\n\n.pdtp-chip { border: 1px solid var(--pdtp-border); border-radius: 999px; padding: 5px 14px; font-size: 0.85rem;\n  background: oklch(0.26 0 0); transition: border-color 0.15s ease, background 0.15s ease; }\n.pdtp-chip:hover { background: oklch(0.31 0 0); border-color: oklch(0.45 0 0); }\n.pdtp-chip.pdtp-active { background: var(--pdtp-accent); border-color: var(--pdtp-accent); color: oklch(0.13 0 0); font-weight: 600; }\n.pdtp-seg { display: inline-flex; overflow: hidden; border: 1px solid var(--pdtp-border); border-radius: 999px; }\n.pdtp-seg button { padding: 4px 13px; font-size: 0.8rem; }\n.pdtp-seg button:hover { background: var(--pdtp-hover); }\n.pdtp-seg button.pdtp-active { background: var(--pdtp-accent); color: oklch(0.13 0 0); font-weight: 600; }\n\n.pdtp-btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--pdtp-border);\n  border-radius: 8px; padding: 7px 14px; font-size: 0.9rem; font-weight: 500; }\n.pdtp-btn:hover { background: var(--pdtp-hover); text-decoration: none; }\n.pdtp-btn:disabled { opacity: 0.55; cursor: default; }\n.pdtp-btn-primary { background: var(--pdtp-accent); border-color: var(--pdtp-accent); color: oklch(0.13 0 0); font-weight: 600; }\n.pdtp-btn-danger { border-color: color-mix(in oklch, var(--pdtp-danger), transparent 45%); color: var(--pdtp-danger); }\n.pdtp-error { margin-top: 10px; border: 1px solid color-mix(in oklch, var(--pdtp-danger), transparent 55%);\n  border-radius: 8px; padding: 10px 12px; font-size: 0.85rem; color: var(--pdtp-danger); }\n.pdtp-error ul { margin: 6px 0 0; padding-left: 18px; color: var(--pdtp-fg); }\n.pdtp-note { color: var(--pdtp-muted); font-size: 0.82rem; margin: 10px 0 0; }\n\n.pdtp-icon-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }\n.pdtp-icon-cell { display: flex; flex-direction: column; align-items: center; gap: 8px; border: 1px solid var(--pdtp-border);\n  border-radius: 10px; padding: 14px 8px 10px; background: var(--pdtp-card); }\n.pdtp-icon-cell svg { width: 28px; height: 28px; color: var(--pdtp-fg); }\n.pdtp-icon-cell figcaption { font-family: ui-monospace, Consolas, monospace; font-size: 10.5px; color: var(--pdtp-muted);\n  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n\n.pdtp-img-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }\n.pdtp-img-cell { border: 1px solid var(--pdtp-border); border-radius: 10px; overflow: hidden; background: var(--pdtp-card); }\n.pdtp-img-cell img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }\n.pdtp-img-cell figcaption { padding: 7px 10px; font-family: ui-monospace, Consolas, monospace; font-size: 10.5px;\n  color: var(--pdtp-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n\n.pdtp-specimen { border: 1px solid var(--pdtp-border); background: var(--pdtp-card); border-radius: 12px; padding: 20px; margin-bottom: 14px; }\n.pdtp-specimen-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 12px; }\n.pdtp-specimen-big { font-size: 2.2rem; line-height: 1.15; margin: 0 0 8px; overflow-wrap: break-word; }\n.pdtp-specimen-body { margin: 0; color: var(--pdtp-muted); }\n`\n"],"names":["PDTP_CSS"],"mappings":"AAAA;;6DAE6D,GAC7D,OAAO,MAAMA,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8EzB,CAAC,CAAA"}

package/dist/next/specimen.d.ts

@@ -0,0 +1,24 @@
+/** A served face row from the `fontOptimized` collection (depth 0). */
+export type OptimizedFace = {
+    font?: string | number | null;
+    weight?: string | null;
+    style?: 'normal' | 'italic' | null;
+    isVariable?: boolean | null;
+    /** payload-fonts marks an upright variable file whose axes also carry italics (ital/slnt). */
+    italCapable?: boolean | null;
+};
+/** One selectable style on the `/dev/fonts` specimen: a real served style with the weights it
+ *  actually carries. Built server-side, so the controls never offer a synthesized face. */
+export type SpecimenStyle = {
+    style: 'normal' | 'italic';
+    /** e.g. "variable · 100–900" or "3 weights" — shown next to the style toggle. */
+    label: string;
+    weights: number[];
+};
+/** The served faces of one typeface → selectable specimen styles. A variable face's range
+ *  (`'100 900'`) becomes clickable stops at every 100 (range ends always included); static faces
+ *  list their exact weights. An upright variable face flagged `italCapable` (ital/slnt axes)
+ *  contributes an italic style from the same file — unless an explicit italic exists. Styles
+ *  with no faces are omitted. */
+export declare const facesToStyles: (faces: OptimizedFace[]) => SpecimenStyle[];
+//# sourceMappingURL=specimen.d.ts.map

package/dist/next/specimen.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"specimen.d.ts","sourceRoot":"","sources":["../../src/next/specimen.ts"],"names":[],"mappings":"AAAA,uEAAuE;AACvE,MAAM,MAAM,aAAa,GAAG;IAC1B,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAA;IAC7B,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACtB,KAAK,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,IAAI,CAAA;IAClC,UAAU,CAAC,EAAE,OAAO,GAAG,IAAI,CAAA;IAC3B,8FAA8F;IAC9F,WAAW,CAAC,EAAE,OAAO,GAAG,IAAI,CAAA;CAC7B,CAAA;AAED;2FAC2F;AAC3F,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,QAAQ,GAAG,QAAQ,CAAA;IAC1B,iFAAiF;IACjF,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,MAAM,EAAE,CAAA;CAClB,CAAA;AAED;;;;iCAIiC;AACjC,eAAO,MAAM,aAAa,GAAI,OAAO,aAAa,EAAE,KAAG,aAAa,EAoBnE,CAAA"}

package/dist/next/specimen.js

@@ -0,0 +1,48 @@
+/** A served face row from the `fontOptimized` collection (depth 0). */ /** The served faces of one typeface → selectable specimen styles. A variable face's range
+ *  (`'100 900'`) becomes clickable stops at every 100 (range ends always included); static faces
+ *  list their exact weights. An upright variable face flagged `italCapable` (ital/slnt axes)
+ *  contributes an italic style from the same file — unless an explicit italic exists. Styles
+ *  with no faces are omitted. */ export const facesToStyles = (faces)=>{
+    const hasExplicitItalic = faces.some((f)=>f.style === 'italic');
+    return [
+        'normal',
+        'italic'
+    ].flatMap((style)=>{
+        const own = faces.filter((f)=>(f.style ?? 'normal') === style);
+        if (style === 'italic' && !hasExplicitItalic) own.push(...faces.filter((f)=>(f.style ?? 'normal') === 'normal' && f.italCapable));
+        if (!own.length) return [];
+        const variable = own.find((f)=>f.isVariable && f.weight?.includes(' '));
+        if (variable?.weight) {
+            const [rawMin, rawMax] = variable.weight.split(' ').map(Number);
+            const min = rawMin ?? 400;
+            const max = rawMax ?? min;
+            const stops = new Set([
+                min
+            ]);
+            for(let w = Math.ceil(min / 100) * 100; w <= max; w += 100)stops.add(w);
+            stops.add(max);
+            return [
+                {
+                    style,
+                    label: `variable · ${min}–${max}`,
+                    weights: [
+                        ...stops
+                    ].sort((a, b)=>a - b)
+                }
+            ];
+        }
+        const weights = [
+            ...new Set(own.map((f)=>Number(f.weight)).filter((w)=>Number.isFinite(w)))
+        ].sort((a, b)=>a - b);
+        if (!weights.length) return [];
+        return [
+            {
+                style,
+                label: `${weights.length} weight${weights.length === 1 ? '' : 's'}`,
+                weights
+            }
+        ];
+    });
+};
+
+//# sourceMappingURL=specimen.js.map

package/dist/next/specimen.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/next/specimen.ts"],"sourcesContent":["/** A served face row from the `fontOptimized` collection (depth 0). */\nexport type OptimizedFace = {\n  font?: string | number | null\n  weight?: string | null\n  style?: 'normal' | 'italic' | null\n  isVariable?: boolean | null\n  /** payload-fonts marks an upright variable file whose axes also carry italics (ital/slnt). */\n  italCapable?: boolean | null\n}\n\n/** One selectable style on the `/dev/fonts` specimen: a real served style with the weights it\n *  actually carries. Built server-side, so the controls never offer a synthesized face. */\nexport type SpecimenStyle = {\n  style: 'normal' | 'italic'\n  /** e.g. \"variable · 100–900\" or \"3 weights\" — shown next to the style toggle. */\n  label: string\n  weights: number[]\n}\n\n/** The served faces of one typeface → selectable specimen styles. A variable face's range\n *  (`'100 900'`) becomes clickable stops at every 100 (range ends always included); static faces\n *  list their exact weights. An upright variable face flagged `italCapable` (ital/slnt axes)\n *  contributes an italic style from the same file — unless an explicit italic exists. Styles\n *  with no faces are omitted. */\nexport const facesToStyles = (faces: OptimizedFace[]): SpecimenStyle[] => {\n  const hasExplicitItalic = faces.some((f) => f.style === 'italic')\n  return (['normal', 'italic'] as const).flatMap((style) => {\n    const own = faces.filter((f) => (f.style ?? 'normal') === style)\n    if (style === 'italic' && !hasExplicitItalic) own.push(...faces.filter((f) => (f.style ?? 'normal') === 'normal' && f.italCapable))\n    if (!own.length) return []\n    const variable = own.find((f) => f.isVariable && f.weight?.includes(' '))\n    if (variable?.weight) {\n      const [rawMin, rawMax] = variable.weight.split(' ').map(Number)\n      const min = rawMin ?? 400\n      const max = rawMax ?? min\n      const stops = new Set<number>([min])\n      for (let w = Math.ceil(min / 100) * 100; w <= max; w += 100) stops.add(w)\n      stops.add(max)\n      return [{ style, label: `variable · ${min}–${max}`, weights: [...stops].sort((a, b) => a - b) }]\n    }\n    const weights = [...new Set(own.map((f) => Number(f.weight)).filter((w) => Number.isFinite(w)))].sort((a, b) => a - b)\n    if (!weights.length) return []\n    return [{ style, label: `${weights.length} weight${weights.length === 1 ? '' : 's'}`, weights }]\n  })\n}\n"],"names":["facesToStyles","faces","hasExplicitItalic","some","f","style","flatMap","own","filter","push","italCapable","length","variable","find","isVariable","weight","includes","rawMin","rawMax","split","map","Number","min","max","stops","Set","w","Math","ceil","add","label","weights","sort","a","b","isFinite"],"mappings":"AAAA,qEAAqE,GAmBrE;;;;+BAI+B,GAC/B,OAAO,MAAMA,gBAAgB,CAACC;IAC5B,MAAMC,oBAAoBD,MAAME,IAAI,CAAC,CAACC,IAAMA,EAAEC,KAAK,KAAK;IACxD,OAAO,AAAC;QAAC;QAAU;KAAS,CAAWC,OAAO,CAAC,CAACD;QAC9C,MAAME,MAAMN,MAAMO,MAAM,CAAC,CAACJ,IAAM,AAACA,CAAAA,EAAEC,KAAK,IAAI,QAAO,MAAOA;QAC1D,IAAIA,UAAU,YAAY,CAACH,mBAAmBK,IAAIE,IAAI,IAAIR,MAAMO,MAAM,CAAC,CAACJ,IAAM,AAACA,CAAAA,EAAEC,KAAK,IAAI,QAAO,MAAO,YAAYD,EAAEM,WAAW;QACjI,IAAI,CAACH,IAAII,MAAM,EAAE,OAAO,EAAE;QAC1B,MAAMC,WAAWL,IAAIM,IAAI,CAAC,CAACT,IAAMA,EAAEU,UAAU,IAAIV,EAAEW,MAAM,EAAEC,SAAS;QACpE,IAAIJ,UAAUG,QAAQ;YACpB,MAAM,CAACE,QAAQC,OAAO,GAAGN,SAASG,MAAM,CAACI,KAAK,CAAC,KAAKC,GAAG,CAACC;YACxD,MAAMC,MAAML,UAAU;YACtB,MAAMM,MAAML,UAAUI;YACtB,MAAME,QAAQ,IAAIC,IAAY;gBAACH;aAAI;YACnC,IAAK,IAAII,IAAIC,KAAKC,IAAI,CAACN,MAAM,OAAO,KAAKI,KAAKH,KAAKG,KAAK,IAAKF,MAAMK,GAAG,CAACH;YACvEF,MAAMK,GAAG,CAACN;YACV,OAAO;gBAAC;oBAAElB;oBAAOyB,OAAO,CAAC,WAAW,EAAER,IAAI,CAAC,EAAEC,KAAK;oBAAEQ,SAAS;2BAAIP;qBAAM,CAACQ,IAAI,CAAC,CAACC,GAAGC,IAAMD,IAAIC;gBAAG;aAAE;QAClG;QACA,MAAMH,UAAU;eAAI,IAAIN,IAAIlB,IAAIa,GAAG,CAAC,CAAChB,IAAMiB,OAAOjB,EAAEW,MAAM,GAAGP,MAAM,CAAC,CAACkB,IAAML,OAAOc,QAAQ,CAACT;SAAK,CAACM,IAAI,CAAC,CAACC,GAAGC,IAAMD,IAAIC;QACpH,IAAI,CAACH,QAAQpB,MAAM,EAAE,OAAO,EAAE;QAC9B,OAAO;YAAC;gBAAEN;gBAAOyB,OAAO,GAAGC,QAAQpB,MAAM,CAAC,OAAO,EAAEoB,QAAQpB,MAAM,KAAK,IAAI,KAAK,KAAK;gBAAEoB;YAAQ;SAAE;IAClG;AACF,EAAC"}

package/dist/next/views.d.ts

@@ -0,0 +1,31 @@
+import type { Payload } from 'payload';
+import type { DevSnapshot } from '../lib/snapshot';
+/** `/dev/icons` — every set as a switcher button (activating one re-skins the site), the active
+ *  set's glyphs as a grid, and any runtime misses. */
+export declare function IconsView({ payload, snapshot }: {
+    payload: Payload;
+    snapshot: DevSnapshot;
+}): Promise<import("react").JSX.Element>;
+/** `/dev/fonts` — one interactive specimen per family slot, rendered in the family's own
+ *  `--font-set*` variable so the page shows the actual served fonts (the host layout loads them
+ *  via extractFonts / DevFonts). The weight/style controls are built from the `fontOptimized`
+ *  docs, so only faces that really exist are offered. */
+export declare function FontsView({ payload, snapshot }: {
+    payload: Payload;
+    snapshot: DevSnapshot;
+}): Promise<import("react").JSX.Element>;
+/** `/dev/images` — every original through the on-demand transform endpoint (`?w=320`), so the
+ *  grid itself exercises payload-images end-to-end. When the collection has Payload folders
+ *  enabled, the folders render as filter chips (`?folder=<id>`, `?folder=none` for unfiled) so
+ *  you can click through the library the way it's organized. */
+export declare function ImagesView({ payload, snapshot, searchParams, }: {
+    payload: Payload;
+    snapshot: DevSnapshot;
+    searchParams?: Record<string, string | string[] | undefined>;
+}): Promise<import("react").JSX.Element>;
+/** `/dev/mux` — the videos with their persisted ingest status. */
+export declare function MuxView({ payload, snapshot }: {
+    payload: Payload;
+    snapshot: DevSnapshot;
+}): Promise<import("react").JSX.Element>;
+//# sourceMappingURL=views.d.ts.map

package/dist/next/views.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"views.d.ts","sourceRoot":"","sources":["../../src/next/views.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAA8B,OAAO,EAAE,MAAM,SAAS,CAAA;AAClE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAIlD;sDACsD;AACtD,wBAAsB,SAAS,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE;IAAE,OAAO,EAAE,OAAO,CAAC;IAAC,QAAQ,EAAE,WAAW,CAAA;CAAE,wCA2EjG;AAID;;;yDAGyD;AACzD,wBAAsB,SAAS,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE;IAAE,OAAO,EAAE,OAAO,CAAC;IAAC,QAAQ,EAAE,WAAW,CAAA;CAAE,wCAyDjG;AAKD;;;gEAGgE;AAChE,wBAAsB,UAAU,CAAC,EAC/B,OAAO,EACP,QAAQ,EACR,YAAiB,GAClB,EAAE;IACD,OAAO,EAAE,OAAO,CAAA;IAChB,QAAQ,EAAE,WAAW,CAAA;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,SAAS,CAAC,CAAA;CAC7D,wCAqFA;AASD,kEAAkE;AAClE,wBAAsB,OAAO,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE;IAAE,OAAO,EAAE,OAAO,CAAC;IAAC,QAAQ,EAAE,WAAW,CAAA;CAAE,wCAsC/F"}