@vexcms/next 0.1.0-alpha.2 → 0.1.0-alpha.21

package/README.md

@@ -1,87 +1,98 @@
-# @vexcms/admin-next
+# @vexcms/next
 
-The admin panel for [VEX CMS](https://github.com/ianyimi/vex), built for Next.js. Provides a complete content management interface with collection CRUD, media management, versioning, live preview, access control, and user impersonation.
+The Next.js adapter for [VEX CMS](https://github.com/ianyimi/vex). Provides the server and client components that render the admin panel — collection CRUD, media management, and role-based access control — plus config functions re-exported from `@vexcms/react`.
 
 ## Installation
 
 ```bash
-pnpm add @vexcms/admin-next
+pnpm add @vexcms/next@alpha
 ```
 
 ## Quick Setup
 
 ```tsx
-// app/admin/[[...path]]/page.tsx
-import { AdminLayout, AdminPage } from "@vexcms/admin-next"
+// app/admin/clientProviders.tsx
+"use client"
+import { VexConfigProvider } from "@vexcms/react"
 import config from "@/vex.config"
 
-export default function Admin({ params }) {
+export function ClientProviders({ children }: { children: React.ReactNode }) {
+  return <VexConfigProvider config={config}>{children}</VexConfigProvider>
+}
+```
+
+```tsx
+// app/admin/layout.tsx
+import { NextAdminLayout } from "@vexcms/next/client"
+import { getCurrentUser } from "@/auth/serverUtils"
+
+import { ClientProviders } from "./clientProviders"
+
+export default async function AdminRootLayout({ children }: { children: React.ReactNode }) {
+  const user = await getCurrentUser()
   return (
-    <AdminLayout config={config} user={user}>
-      <AdminPage config={config} path={params.path} />
-    </AdminLayout>
+    <ClientProviders>
+      <NextAdminLayout user={user ?? undefined}>{children}</NextAdminLayout>
+    </ClientProviders>
   )
 }
 ```
 
+```tsx
+// app/admin/[[...path]]/page.tsx
+import { NextAdminPage } from "@vexcms/next/server"
+import config from "@/vex.config.server"
+
+export default function AdminPage({
+  params,
+}: {
+  params: Promise<{ path?: string[] }>
+}) {
+  return <NextAdminPage config={config} params={params} />
+}
+```
+
+`NextAdminPage` and `NextAdminLayout` are exported from separate subpaths (`/server` and `/client`) rather than the package root, because an async server component and a `"use client"` component cannot share one bundle.
+
 ## Features
 
 ### Collection Management
 
-- **List view** — Paginated data table with search, sorting, bulk delete, and configurable columns
-- **Edit view** — Auto-generated forms from collection schema with field validation via TanStack React Form
-- **Create/delete** — Dialogs for document creation and deletion with permission checks
-- **Bidirectional pagination** — Instant access to first and last pages
+- **List view** — Data table with Load More pagination, row selection, and bulk delete
+- **Edit view** — Auto-generated forms from the collection schema, submitted via TanStack React Form
+- **Create dialog** — Modal for document creation, gated by a `create` permission check
 
 ### Media Management
 
 - **Grid/list views** — Browse media files with thumbnails
-- **Upload** — Drag-and-drop upload with file type detection
-- **Media picker** — Inline picker for upload and relationship fields with search and pagination
-- **Image dimensions** — Auto-detected on upload
-
-### Versioning & Drafts
+- **Upload** — Drag-and-drop or click-to-upload through the collection's configured storage adapter
+- **Media picker** — Inline picker for upload fields, with a client-side search filter and Load More pagination
 
-- **Draft/publish workflow** — Status badges, publish/unpublish actions
-- **Version history** — Dropdown to view, restore, or delete previous versions
-- **Autosave** — Configurable auto-save interval for draft documents
+### Roadmap note
 
-### Live Preview
-
-- **Side-by-side panel** — Preview content changes in an iframe alongside the editor
-- **Responsive breakpoints** — Test at different screen sizes
-- **Snapshot system** — Transient preview data without saving to database
+Versioning, drafts, and live preview are not implemented yet — both are in progress on the [roadmap](https://docs.vexcms.dev). A global's `versions.drafts` option parses and is stored on the resolved config, but it is not enforced: every read still returns the live document. See [docs.vexcms.dev](https://docs.vexcms.dev) for current status.
 
 ### Access Control
 
-- **Permission provider** — React context for role-based access control
-- **Field-level permissions** — Read-only fields based on user roles
-- **Collection-level permissions** — Control create, read, update, delete per collection
-- **UI enforcement** — Buttons and actions hidden/disabled based on permissions
-
-### User Impersonation
-
-- **Impersonation banner** — Shows when an admin is viewing as another user
-- **User switching** — Select from impersonatable users list
+- **Config provider** — `VexConfigProvider` (`@vexcms/react`) supplies the resolved client config — including `access` and `storage.clientUploads` — to the admin panel via React context, mounted once by your app around the admin route
+- **Collection-level permissions** — `usePermission` gates create, read, update, and delete per collection and per global
+- **Field-level permissions** — a per-field access rule hides a read-denied input entirely and renders an update-denied one read-only; edit forms submit only the fields the user actually changed
+- **UI enforcement** — Buttons and actions are disabled or hidden when the current user lacks permission
 
 ### Admin Layout
 
-- **Sidebar navigation** — Collections grouped by `admin.group`, with auth and media sections
-- **Theme support** — Light/dark mode
-- **User menu** — Profile, sign out, impersonation controls
+- **Sidebar navigation** — Links grouped into Collections, Globals, and Media sections
+- **Theme support** — Light, dark, and system modes via `ThemeToggle`
 
 ## Exports
 
-| Export | Description |
-|--------|-------------|
-| `AdminPage` | Main routing component — renders the correct view based on URL path |
-| `AdminLayout` | Server-side layout wrapper with sidebar and theme |
-| `PermissionProvider` | React context provider for RBAC |
-| `usePermission` | Hook to check a single action permission |
-| `usePermissions` | Hook to check all CRUD permissions for a resource |
-| `usePermissionContext` | Hook to access the full permission context |
-| `ImpersonationBanner` | Banner component for admin impersonation |
-| `useMediaPickerState` | Hook for media picker state management |
+| Export | From | Description |
+|--------|------|-------------|
+| `NextAdminPage` | `@vexcms/next/server` | Async server component that routes the admin panel by URL path (dashboard, list, edit) |
+| `NextAdminLayout` | `@vexcms/next/client` | Client component rendering the admin shell (sidebar, theme, breadcrumbs) around page content |
+| `defineConfig`, `defineCollection`, `relationship`, `text`, `number`, `select`, `date`, `url`, `checkbox` | `@vexcms/next` | Config functions re-exported from `@vexcms/react` |
+
+The compiled stylesheet is available at `@vexcms/next/styles`.
 
 ## Peer Dependencies
 

package/dist/NextAdminLayout.d.ts

@@ -1,43 +1,35 @@
 import type { ReactNode } from "react";
-import type { VexConfig } from "@vexcms/core";
 import type { AdminUser } from "@vexcms/react";
 /**
  * Next.js admin layout shell for VexCMS.
  *
- * A **server component** that sits on the server→client boundary for the admin
- * panel. It sanitizes the resolved `vex.config` with `sanitizeConfigForClient`
- * — stripping storage adapter class instances, functions, and React components
- * — *before* the config is handed to the client leaf `NextAdminLayoutClient`.
- *
- * This placement is the whole point: React serializes props when a server
- * component renders a client component, so the sanitize **must** happen on the
- * server side of that edge. Sanitizing inside the client component would run
- * too late — the raw config would already have failed to serialize.
- *
- * The client leaf handles everything that needs the browser (`usePathname`,
- * `NuqsAdapter`, `NextLink`/`NextImage`); this wrapper does no client work.
+ * A **server component** that reads the `sidebar_state` cookie server-side
+ * (so the sidebar's open/closed state is correct on first paint, with no
+ * client flash) and passes it, plus `user`/`organization`/`children`, to the
+ * client leaf `NextAdminLayoutClient`. Config no longer crosses this
+ * boundary at all — the admin panel's client tree gets its config from the
+ * app's own `VexConfigProvider` mount (`clientProviders.tsx`), not from a
+ * prop threaded through this layout.
  *
  * Render it from your admin `layout.tsx`. Because this is a server component,
  * your `layout.tsx` may itself be an `async` server component (e.g. to run auth
- * checks) and pass the **raw** `vex.config` straight through — no sanitize
- * needed on the application side.
- *
- * @param props - Layout props
- * @param props.config - The resolved VexCMS config from `vex.config.ts` (raw)
- * @param props.children - The page content from `[[...slug]]/page.tsx`
- * @param props.user - Current user for the admin shell
+ * checks).
  *
+ * @param props - Layout props.
+ * @param props.children - The page content from `[[...slug]]/page.tsx`.
+ * @param props.user - Current user for the admin shell.
+ * @returns The rendered admin shell, wrapping `children` in the client boundary
+ *   ({@link NextAdminLayoutClient}) with the server-read sidebar cookie state.
  * @example
  * ```tsx
  * // app/admin/layout.tsx
  * import { NextAdminLayout } from "@vexcms/next/client";
- * import config from "~/vex.config";
  * import { getCurrentUser } from "~/auth/serverUtils";
  *
  * export default async function AdminLayout({ children }: { children: ReactNode }) {
  *   const user = await getCurrentUser();
  *   return (
- *     <NextAdminLayout config={config} user={user ?? undefined}>
+ *     <NextAdminLayout user={user ?? undefined}>
  *       {children}
  *     </NextAdminLayout>
  *   );
@@ -45,7 +37,6 @@ import type { AdminUser } from "@vexcms/react";
  * ```
  */
 export declare function NextAdminLayout(props: {
-    config: VexConfig;
     children: ReactNode;
     user?: AdminUser;
     organization?: Record<string, unknown>;

package/dist/NextAdminLayout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NextAdminLayout.d.ts","sourceRoot":"","sources":["../src/NextAdminLayout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAI/C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,wBAAsB,eAAe,CAAC,KAAK,EAAE;IAC3C,MAAM,EAAE,SAAS,CAAC;IAClB,QAAQ,EAAE,SAAS,CAAC;IACpB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACxC,wCAmBA"}
+{"version":3,"file":"NextAdminLayout.d.ts","sourceRoot":"","sources":["../src/NextAdminLayout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAI/C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,wBAAsB,eAAe,CAAC,KAAK,EAAE;IAC3C,QAAQ,EAAE,SAAS,CAAC;IACpB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACxC,wCAaA"}

package/dist/NextAdminLayout.js

@@ -1,23 +1,6 @@
-// src/NextAdminLayout.tsx
-import { sanitizeConfigForClient } from "@vexcms/core";
-import { NextAdminLayoutClient } from "./NextAdminLayoutClient";
-import { cookies } from "next/headers";
-import { jsx } from "react/jsx-runtime";
-async function NextAdminLayout(props) {
-  const clientConfig = sanitizeConfigForClient(props.config);
-  const cookieStore = await cookies();
-  const sidebarOpen = String(cookieStore.get("sidebar_state")?.value) === "true";
-  return /* @__PURE__ */ jsx(
-    NextAdminLayoutClient,
-    {
-      config: clientConfig,
-      user: props.user,
-      organization: props.organization,
-      sidebarOpen,
-      children: props.children
-    }
-  );
-}
+import {
+  NextAdminLayout
+} from "./chunk-K4AAS5B5.js";
 export {
   NextAdminLayout
 };

package/dist/NextAdminLayout.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/NextAdminLayout.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport type { VexConfig } from \"@vexcms/core\";\nimport { sanitizeConfigForClient } from \"@vexcms/core\";\nimport type { AdminUser } from \"@vexcms/react\";\nimport { NextAdminLayoutClient } from \"./NextAdminLayoutClient\";\nimport { cookies } from \"next/headers\";\n\n/**\n * Next.js admin layout shell for VexCMS.\n *\n * A **server component** that sits on the server→client boundary for the admin\n * panel. It sanitizes the resolved `vex.config` with `sanitizeConfigForClient`\n * — stripping storage adapter class instances, functions, and React components\n * — *before* the config is handed to the client leaf `NextAdminLayoutClient`.\n *\n * This placement is the whole point: React serializes props when a server\n * component renders a client component, so the sanitize **must** happen on the\n * server side of that edge. Sanitizing inside the client component would run\n * too late — the raw config would already have failed to serialize.\n *\n * The client leaf handles everything that needs the browser (`usePathname`,\n * `NuqsAdapter`, `NextLink`/`NextImage`); this wrapper does no client work.\n *\n * Render it from your admin `layout.tsx`. Because this is a server component,\n * your `layout.tsx` may itself be an `async` server component (e.g. to run auth\n * checks) and pass the **raw** `vex.config` straight through — no sanitize\n * needed on the application side.\n *\n * @param props - Layout props\n * @param props.config - The resolved VexCMS config from `vex.config.ts` (raw)\n * @param props.children - The page content from `[[...slug]]/page.tsx`\n * @param props.user - Current user for the admin shell\n *\n * @example\n * ```tsx\n * // app/admin/layout.tsx\n * import { NextAdminLayout } from \"@vexcms/next/client\";\n * import config from \"~/vex.config\";\n * import { getCurrentUser } from \"~/auth/serverUtils\";\n *\n * export default async function AdminLayout({ children }: { children: ReactNode }) {\n *   const user = await getCurrentUser();\n *   return (\n *     <NextAdminLayout config={config} user={user ?? undefined}>\n *       {children}\n *     </NextAdminLayout>\n *   );\n * }\n * ```\n */\nexport async function NextAdminLayout(props: {\n  config: VexConfig;\n  children: ReactNode;\n  user?: AdminUser;\n  organization?: Record<string, unknown>;\n}) {\n  // Sanitize on the SERVER side of the server→client boundary, before the\n  // config is serialized as a prop into the client leaf. This removes the\n  // storage adapter class instances that would otherwise crash RSC\n  // serialization (\"Classes or null prototypes are not supported\").\n  const clientConfig = sanitizeConfigForClient(props.config);\n  const cookieStore = await cookies();\n  const sidebarOpen = String(cookieStore.get(\"sidebar_state\")?.value) === \"true\";\n\n  return (\n    <NextAdminLayoutClient\n      config={clientConfig}\n      user={props.user}\n      organization={props.organization}\n      sidebarOpen={sidebarOpen}\n    >\n      {props.children}\n    </NextAdminLayoutClient>\n  );\n}\n"],"mappings":";AAEA,SAAS,+BAA+B;AAExC,SAAS,6BAA6B;AACtC,SAAS,eAAe;AA4DpB;AAfJ,eAAsB,gBAAgB,OAKnC;AAKD,QAAM,eAAe,wBAAwB,MAAM,MAAM;AACzD,QAAM,cAAc,MAAM,QAAQ;AAClC,QAAM,cAAc,OAAO,YAAY,IAAI,eAAe,GAAG,KAAK,MAAM;AAExE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,QAAQ;AAAA,MACR,MAAM,MAAM;AAAA,MACZ,cAAc,MAAM;AAAA,MACpB;AAAA,MAEC,gBAAM;AAAA;AAAA,EACT;AAEJ;","names":[]}
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/NextAdminLayoutClient.d.ts

@@ -1,5 +1,4 @@
 import type { ReactNode } from "react";
-import type { ClientVexConfig } from "@vexcms/core";
 import { type AdminUser } from "@vexcms/react";
 /**
  * Client leaf for the Next.js admin layout.
@@ -12,24 +11,24 @@ import { type AdminUser } from "@vexcms/react";
  * - `NextLink` / `NextImage` passed as framework components so every
  *   `VexLink`/`VexImage` uses Next.js routing and image optimisation.
  *
- * **Receives an already-sanitized `ClientVexConfig`.** The server wrapper
- * ({@link NextAdminLayout}) calls `sanitizeConfigForClient` before this
- * component is reached, so no non-serializable values (storage adapter class
- * instances, functions, React components) cross the server→client boundary.
+ * Config reaches `AdminLayout`'s children through the app's own
+ * `VexConfigProvider` mount, not through a prop on this component — this
+ * leaf never touches config at all.
  *
  * This component is internal to `@vexcms/next` — applications render
  * {@link NextAdminLayout} instead.
  *
- * @param props - Layout props
- * @param props.config - Sanitized config, safe to serialize across the boundary
- * @param props.children - The page content from `[[...slug]]/page.tsx`
- * @param props.user - Current user for the admin shell
+ * @param props - Layout props.
+ * @param props.children - The page content from `[[...slug]]/page.tsx`.
+ * @param props.user - Current user for the admin shell.
+ * @returns The admin shell rendered from `children`, wrapped in `NuqsAdapter`
+ * and the shared `AdminLayout`, wired with the active slug/document id derived
+ * from `usePathname()` and Next.js `Link`/`Image` components.
  */
 export declare function NextAdminLayoutClient(props: {
-    config: ClientVexConfig;
     children: ReactNode;
-    user?: AdminUser;
     organization?: Record<string, unknown>;
     sidebarOpen?: boolean;
+    user?: AdminUser;
 }): import("react").JSX.Element;
 //# sourceMappingURL=NextAdminLayoutClient.d.ts.map

package/dist/NextAdminLayoutClient.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NextAdminLayoutClient.d.ts","sourceRoot":"","sources":["../src/NextAdminLayoutClient.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAKpD,OAAO,EAAe,KAAK,SAAS,EAAE,MAAM,eAAe,CAAC;AAE5D;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,qBAAqB,CAAC,KAAK,EAAE;IAC3C,MAAM,EAAE,eAAe,CAAC;IACxB,QAAQ,EAAE,SAAS,CAAC;IACpB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACvC,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,+BAwBA"}
+{"version":3,"file":"NextAdminLayoutClient.d.ts","sourceRoot":"","sources":["../src/NextAdminLayoutClient.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAe,KAAK,SAAS,EAAE,MAAM,eAAe,CAAC;AAM5D;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,qBAAqB,CAAC,KAAK,EAAE;IAC3C,QAAQ,EAAE,SAAS,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACvC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB,+BAuBA"}

package/dist/NextAdminLayoutClient.js

@@ -2,11 +2,11 @@
 "use client";
 
 // src/NextAdminLayoutClient.tsx
-import { usePathname } from "next/navigation";
-import NextLink from "next/link";
+import { AdminLayout } from "@vexcms/react";
 import NextImage from "next/image";
+import NextLink from "next/link";
+import { usePathname } from "next/navigation";
 import { NuqsAdapter } from "nuqs/adapters/next/app";
-import { AdminLayout } from "@vexcms/react";
 import { jsx } from "react/jsx-runtime";
 function NextAdminLayoutClient(props) {
   const pathname = usePathname();
@@ -16,14 +16,13 @@ function NextAdminLayoutClient(props) {
   return /* @__PURE__ */ jsx(NuqsAdapter, { children: /* @__PURE__ */ jsx(
     AdminLayout,
     {
-      config: props.config,
+      activeDocID,
       activeSlug,
       components: { Link: NextLink, Image: NextImage },
-      pathname,
-      activeDocID,
-      user: props.user,
       organization: props.organization,
+      pathname,
       sidebarOpen: props.sidebarOpen,
+      user: props.user,
       children: props.children
     }
   ) });

package/dist/NextAdminLayoutClient.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/NextAdminLayoutClient.tsx"],"sourcesContent":["\"use client\";\n// \"use client\" is injected by the tsup build banner for this entry (see\n// tsup.config.ts) so the emitted module carries the client boundary.\nimport type { ReactNode } from \"react\";\nimport type { ClientVexConfig } from \"@vexcms/core\";\nimport { usePathname } from \"next/navigation\";\nimport NextLink from \"next/link\";\nimport NextImage from \"next/image\";\nimport { NuqsAdapter } from \"nuqs/adapters/next/app\";\nimport { AdminLayout, type AdminUser } from \"@vexcms/react\";\n\n/**\n * Client leaf for the Next.js admin layout.\n *\n * Owns all client-only wiring that cannot run on the server:\n * - `usePathname()` to derive the active collection slug / document id for\n *   sidebar highlighting (Next.js layouts do not receive route params).\n * - `NuqsAdapter` (`nuqs/adapters/next/app`) so URL state works inside the\n *   admin routes.\n * - `NextLink` / `NextImage` passed as framework components so every\n *   `VexLink`/`VexImage` uses Next.js routing and image optimisation.\n *\n * **Receives an already-sanitized `ClientVexConfig`.** The server wrapper\n * ({@link NextAdminLayout}) calls `sanitizeConfigForClient` before this\n * component is reached, so no non-serializable values (storage adapter class\n * instances, functions, React components) cross the server→client boundary.\n *\n * This component is internal to `@vexcms/next` — applications render\n * {@link NextAdminLayout} instead.\n *\n * @param props - Layout props\n * @param props.config - Sanitized config, safe to serialize across the boundary\n * @param props.children - The page content from `[[...slug]]/page.tsx`\n * @param props.user - Current user for the admin shell\n */\nexport function NextAdminLayoutClient(props: {\n  config: ClientVexConfig;\n  children: ReactNode;\n  user?: AdminUser;\n  organization?: Record<string, unknown>;\n  sidebarOpen?: boolean;\n}) {\n  const pathname = usePathname();\n  // pathname: \"/admin\", \"/admin/posts\", \"/admin/posts/123\"\n  // Split on \"/\" and take the segment after \"admin\"\n  const segments = pathname.split(\"/\").filter(Boolean);\n  const activeSlug = segments[1]; // undefined on /admin, \"posts\" on /admin/posts\n  const activeDocID = segments[2];\n\n  return (\n    <NuqsAdapter>\n      <AdminLayout\n        config={props.config}\n        activeSlug={activeSlug}\n        components={{ Link: NextLink, Image: NextImage }}\n        pathname={pathname}\n        activeDocID={activeDocID}\n        user={props.user}\n        organization={props.organization}\n        sidebarOpen={props.sidebarOpen}\n      >\n        {props.children}\n      </AdminLayout>\n    </NuqsAdapter>\n  );\n}\n"],"mappings":";;;;AAKA,SAAS,mBAAmB;AAC5B,OAAO,cAAc;AACrB,OAAO,eAAe;AACtB,SAAS,mBAAmB;AAC5B,SAAS,mBAAmC;AA0CtC;AAhBC,SAAS,sBAAsB,OAMnC;AACD,QAAM,WAAW,YAAY;AAG7B,QAAM,WAAW,SAAS,MAAM,GAAG,EAAE,OAAO,OAAO;AACnD,QAAM,aAAa,SAAS,CAAC;AAC7B,QAAM,cAAc,SAAS,CAAC;AAE9B,SACE,oBAAC,eACC;AAAA,IAAC;AAAA;AAAA,MACC,QAAQ,MAAM;AAAA,MACd;AAAA,MACA,YAAY,EAAE,MAAM,UAAU,OAAO,UAAU;AAAA,MAC/C;AAAA,MACA;AAAA,MACA,MAAM,MAAM;AAAA,MACZ,cAAc,MAAM;AAAA,MACpB,aAAa,MAAM;AAAA,MAElB,gBAAM;AAAA;AAAA,EACT,GACF;AAEJ;","names":[]}
+{"version":3,"sources":["../src/NextAdminLayoutClient.tsx"],"sourcesContent":["\"use client\";\n// \"use client\" is injected by the tsup build banner for this entry (see\n// tsup.config.ts) so the emitted module carries the client boundary.\nimport type { ReactNode } from \"react\";\n\nimport { AdminLayout, type AdminUser } from \"@vexcms/react\";\nimport NextImage from \"next/image\";\nimport NextLink from \"next/link\";\nimport { usePathname } from \"next/navigation\";\nimport { NuqsAdapter } from \"nuqs/adapters/next/app\";\n\n/**\n * Client leaf for the Next.js admin layout.\n *\n * Owns all client-only wiring that cannot run on the server:\n * - `usePathname()` to derive the active collection slug / document id for\n *   sidebar highlighting (Next.js layouts do not receive route params).\n * - `NuqsAdapter` (`nuqs/adapters/next/app`) so URL state works inside the\n *   admin routes.\n * - `NextLink` / `NextImage` passed as framework components so every\n *   `VexLink`/`VexImage` uses Next.js routing and image optimisation.\n *\n * Config reaches `AdminLayout`'s children through the app's own\n * `VexConfigProvider` mount, not through a prop on this component — this\n * leaf never touches config at all.\n *\n * This component is internal to `@vexcms/next` — applications render\n * {@link NextAdminLayout} instead.\n *\n * @param props - Layout props.\n * @param props.children - The page content from `[[...slug]]/page.tsx`.\n * @param props.user - Current user for the admin shell.\n * @returns The admin shell rendered from `children`, wrapped in `NuqsAdapter`\n * and the shared `AdminLayout`, wired with the active slug/document id derived\n * from `usePathname()` and Next.js `Link`/`Image` components.\n */\nexport function NextAdminLayoutClient(props: {\n  children: ReactNode;\n  organization?: Record<string, unknown>;\n  sidebarOpen?: boolean;\n  user?: AdminUser;\n}) {\n  const pathname = usePathname();\n  // pathname: \"/admin\", \"/admin/posts\", \"/admin/posts/123\"\n  // Split on \"/\" and take the segment after \"admin\"\n  const segments = pathname.split(\"/\").filter(Boolean);\n  const activeSlug = segments[1]; // undefined on /admin, \"posts\" on /admin/posts\n  const activeDocID = segments[2];\n\n  return (\n    <NuqsAdapter>\n      <AdminLayout\n        activeDocID={activeDocID}\n        activeSlug={activeSlug}\n        components={{ Link: NextLink, Image: NextImage }}\n        organization={props.organization}\n        pathname={pathname}\n        sidebarOpen={props.sidebarOpen}\n        user={props.user}\n      >\n        {props.children}\n      </AdminLayout>\n    </NuqsAdapter>\n  );\n}\n"],"mappings":";;;;AAKA,SAAS,mBAAmC;AAC5C,OAAO,eAAe;AACtB,OAAO,cAAc;AACrB,SAAS,mBAAmB;AAC5B,SAAS,mBAAmB;AA0CtB;AAfC,SAAS,sBAAsB,OAKnC;AACD,QAAM,WAAW,YAAY;AAG7B,QAAM,WAAW,SAAS,MAAM,GAAG,EAAE,OAAO,OAAO;AACnD,QAAM,aAAa,SAAS,CAAC;AAC7B,QAAM,cAAc,SAAS,CAAC;AAE9B,SACE,oBAAC,eACC;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,YAAY,EAAE,MAAM,UAAU,OAAO,UAAU;AAAA,MAC/C,cAAc,MAAM;AAAA,MACpB;AAAA,MACA,aAAa,MAAM;AAAA,MACnB,MAAM,MAAM;AAAA,MAEX,gBAAM;AAAA;AAAA,EACT,GACF;AAEJ;","names":[]}

package/dist/NextAdminPage.d.ts

@@ -4,7 +4,7 @@ import type { VexConfig } from "@vexcms/core";
  *
  * An `async` server component that routes by the `[[...slug]]` catch-all
  * params, prefetches Convex data via `fetchQuery`, and renders the correct
- * view component. Does **not** include a layout wrapper — `VexAdminLayout`
+ * view component. Does **not** include a layout wrapper — `NextAdminLayout`
  * in `app/admin/layout.tsx` owns the persistent shell.
  *
  * **Route mapping:**
@@ -16,22 +16,24 @@ import type { VexConfig } from "@vexcms/core";
  * | `[collectionSlug, documentId]` | `CollectionEditView` with preloaded doc |
  *
  * @param props - Component props
- * @param props.config - The resolved VexCMS configuration from `vex.config.ts`
+ * @param props.config - The resolved server `VexConfig`, typically the default export of
+ *   `vex.config.server.ts` — not the client-safe `vex.config.ts`.
  * @param props.params - Next.js 15 async params `{ path?: string[] }`
+ * @param props.token - Optional session token forwarded to `fetchQuery` for authenticated reads.
  * @returns The appropriate admin view for the current URL path.
  *
  * @example
  * ```tsx
  * // app/admin/[[...slug]]/page.tsx
- * import { VexAdminPage } from "@vexcms/next";
- * import config from "../../../../vex.config";
+ * import { NextAdminPage } from "@vexcms/next/server";
+ * import config from "../../../../vex.config.server";
  *
  * export default function AdminPage({
  *   params,
  * }: {
  *   params: Promise<{ path?: string[] }>;
  * }) {
- *   return <VexAdminPage config={config} params={params} />;
+ *   return <NextAdminPage config={config} params={params} />;
  * }
  * ```
  */

package/dist/NextAdminPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NextAdminPage.d.ts","sourceRoot":"","sources":["../src/NextAdminPage.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAoC,SAAS,EAAoB,MAAM,cAAc,CAAC;AAYlG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,wBAAsB,aAAa,CAAC,KAAK,EAAE;IACzC,MAAM,EAAE,SAAS,CAAC;IAClB,MAAM,EAAE,OAAO,CAAC;QAAE,IAAI,CAAC,EAAE,MAAM,EAAE,CAAA;KAAE,CAAC,CAAC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,wCAoIA"}
+{"version":3,"file":"NextAdminPage.d.ts","sourceRoot":"","sources":["../src/NextAdminPage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAoC,SAAS,EAAoB,MAAM,cAAc,CAAC;AAqBlG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,wBAAsB,aAAa,CAAC,KAAK,EAAE;IACzC,MAAM,EAAE,SAAS,CAAC;IAClB,MAAM,EAAE,OAAO,CAAC;QAAE,IAAI,CAAC,EAAE,MAAM,EAAE,CAAA;KAAE,CAAC,CAAC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,wCAwIA"}

package/dist/NextAdminPage.js

@@ -1,141 +1,6 @@
-// src/NextAdminPage.tsx
-import { fetchQuery } from "convex/nextjs";
-import { vexConvexApi } from "@vexcms/core";
 import {
-  DashboardView,
-  CollectionListView,
-  CollectionEditView,
-  MediaCollectionEditView,
-  MediaCollectionListView,
-  GlobalsListView,
-  GlobalEditView
-} from "@vexcms/react";
-import { sanitizeConfigForClient } from "@vexcms/core";
-import { jsx, jsxs } from "react/jsx-runtime";
-async function NextAdminPage(props) {
-  const { path = [] } = await props.params;
-  const [collectionSlug, documentId] = path;
-  const clientConfig = sanitizeConfigForClient(props.config);
-  if (!collectionSlug) {
-    return /* @__PURE__ */ jsx(DashboardView, { config: clientConfig });
-  }
-  if (collectionSlug === "globals") {
-    if (!documentId) {
-      return /* @__PURE__ */ jsx(GlobalsListView, { config: clientConfig });
-    }
-    const globalConfig = clientConfig.globals.find((g) => g.slug === documentId);
-    if (!globalConfig) {
-      return /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsxs("p", { className: "text-muted-foreground p-6", children: [
-          'Global "',
-          documentId,
-          '" not found.'
-        ] }),
-        /* @__PURE__ */ jsx("p", { children: "TODO: add not found view" })
-      ] });
-    }
-    const global = await fetchQuery(
-      vexConvexApi.globals.get,
-      { slug: globalConfig.slug },
-      props.token ? { token: props.token } : void 0
-    );
-    return /* @__PURE__ */ jsx(GlobalEditView, { global: globalConfig, initialData: global });
-  }
-  const collection = clientConfig.collections.find((c) => c.slug === collectionSlug);
-  const mediaCollection = clientConfig.mediaCollections.find((mc) => mc.slug === collectionSlug);
-  if (!collection && !mediaCollection) {
-    return /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsxs("p", { className: "text-muted-foreground p-6", children: [
-        'Collection "',
-        collectionSlug,
-        '" not found.'
-      ] }),
-      /* @__PURE__ */ jsx("p", { children: "TODO: add not found view" })
-    ] });
-  }
-  if (mediaCollection && documentId) {
-    const initialData2 = await fetchQuery(
-      vexConvexApi.get,
-      {
-        id: documentId,
-        collection: mediaCollection.slug
-      },
-      props.token ? { token: props.token } : void 0
-    );
-    return /* @__PURE__ */ jsx(
-      MediaCollectionEditView,
-      {
-        collection: mediaCollection,
-        documentId,
-        initialData: initialData2
-      }
-    );
-  }
-  if (mediaCollection) {
-    const numItems2 = Math.max(
-      mediaCollection.admin.table.serverPageSize,
-      mediaCollection.admin.table.defaultPageSize
-    );
-    const initialData2 = await fetchQuery(
-      vexConvexApi.find,
-      {
-        collection: collectionSlug,
-        paginationOpts: {
-          numItems: numItems2,
-          totalDocs: true,
-          cursor: null
-        }
-      },
-      props.token ? { token: props.token } : void 0
-    );
-    return /* @__PURE__ */ jsx(
-      MediaCollectionListView,
-      {
-        collection: mediaCollection,
-        initialData: initialData2
-      }
-    );
-  }
-  if (collection && documentId) {
-    const initialData2 = await fetchQuery(
-      vexConvexApi.get,
-      {
-        id: documentId,
-        collection: collection.slug
-      },
-      props.token ? { token: props.token } : void 0
-    );
-    return /* @__PURE__ */ jsx(
-      CollectionEditView,
-      {
-        collection,
-        documentId,
-        initialData: initialData2
-      }
-    );
-  }
-  if (!collection) {
-    throw new Error("invalid collection slug");
-  }
-  const numItems = Math.max(
-    collection.admin.table.serverPageSize,
-    collection.admin.table.defaultPageSize
-  );
-  const initialData = await fetchQuery(
-    vexConvexApi.findPaginated,
-    {
-      collection: collectionSlug,
-      depth: 1,
-      paginationOpts: {
-        cursor: null,
-        numItems,
-        totalDocs: true
-      }
-    },
-    props.token ? { token: props.token } : void 0
-  );
-  return /* @__PURE__ */ jsx(CollectionListView, { collection, initialData });
-}
+  NextAdminPage
+} from "./chunk-L6N3D6L5.js";
 export {
   NextAdminPage
 };

package/dist/NextAdminPage.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/NextAdminPage.tsx"],"sourcesContent":["import { fetchQuery } from \"convex/nextjs\";\nimport { vexConvexApi } from \"@vexcms/core\";\nimport type { CollectionSlug, PaginationResult, VexConfig, VexMediaDocument } from \"@vexcms/core\";\nimport {\n  DashboardView,\n  CollectionListView,\n  CollectionEditView,\n  MediaCollectionEditView,\n  MediaCollectionListView,\n  GlobalsListView,\n  GlobalEditView,\n} from \"@vexcms/react\";\nimport { sanitizeConfigForClient } from \"@vexcms/core\";\n\n/**\n * VexCMS admin page server component for Next.js.\n *\n * An `async` server component that routes by the `[[...slug]]` catch-all\n * params, prefetches Convex data via `fetchQuery`, and renders the correct\n * view component. Does **not** include a layout wrapper — `VexAdminLayout`\n * in `app/admin/layout.tsx` owns the persistent shell.\n *\n * **Route mapping:**\n * | `path` array | View |\n * |---|---|\n * | `[]` or undefined | `DashboardView` |\n * | `[collectionSlug]` | `CollectionListView` with preloaded docs |\n * | `[collectionSlug, \"new\"]` | `CollectionEditView` (empty form) |\n * | `[collectionSlug, documentId]` | `CollectionEditView` with preloaded doc |\n *\n * @param props - Component props\n * @param props.config - The resolved VexCMS configuration from `vex.config.ts`\n * @param props.params - Next.js 15 async params `{ path?: string[] }`\n * @returns The appropriate admin view for the current URL path.\n *\n * @example\n * ```tsx\n * // app/admin/[[...slug]]/page.tsx\n * import { VexAdminPage } from \"@vexcms/next\";\n * import config from \"../../../../vex.config\";\n *\n * export default function AdminPage({\n *   params,\n * }: {\n *   params: Promise<{ path?: string[] }>;\n * }) {\n *   return <VexAdminPage config={config} params={params} />;\n * }\n * ```\n */\nexport async function NextAdminPage(props: {\n  config: VexConfig;\n  params: Promise<{ path?: string[] }>;\n  token?: string;\n}) {\n  const { path = [] } = await props.params;\n  const [collectionSlug, documentId] = path;\n\n  // Sanitize config for client components (strips storageAdapters, recursively sanitizes mediaCollections)\n  const clientConfig = sanitizeConfigForClient(props.config);\n\n  if (!collectionSlug) {\n    return <DashboardView config={clientConfig} />;\n  }\n\n  if (collectionSlug === \"globals\") {\n    if (!documentId) {\n      return <GlobalsListView config={clientConfig} />;\n    }\n    // Validate the route param against the registered globals first — the\n    // found config's `slug` carries the narrowed GlobalSlug type, so no cast\n    // of the raw URL segment is needed downstream.\n    const globalConfig = clientConfig.globals.find((g) => g.slug === documentId);\n    if (!globalConfig) {\n      return (\n        <div>\n          <p className=\"text-muted-foreground p-6\">Global &quot;{documentId}&quot; not found.</p>\n          <p>TODO: add not found view</p>\n        </div>\n      );\n    }\n    const global = await fetchQuery(\n      vexConvexApi.globals.get,\n      { slug: globalConfig.slug },\n      props.token ? { token: props.token } : undefined,\n    );\n    return <GlobalEditView global={globalConfig} initialData={global} />;\n  }\n\n  const collection = clientConfig.collections.find((c) => c.slug === collectionSlug);\n  const mediaCollection = clientConfig.mediaCollections.find((mc) => mc.slug === collectionSlug);\n\n  if (!collection && !mediaCollection) {\n    return (\n      <div>\n        <p className=\"text-muted-foreground p-6\">\n          Collection &quot;{collectionSlug}&quot; not found.\n        </p>\n        <p>TODO: add not found view</p>\n      </div>\n    );\n  }\n\n  if (mediaCollection && documentId) {\n    const initialData = await fetchQuery(\n      vexConvexApi.get,\n      {\n        id: documentId,\n        collection: mediaCollection.slug,\n      },\n      props.token ? { token: props.token } : undefined,\n    );\n    return (\n      <MediaCollectionEditView\n        collection={mediaCollection}\n        documentId={documentId}\n        initialData={initialData as VexMediaDocument | null}\n      />\n    );\n  }\n\n  if (mediaCollection) {\n    const numItems = Math.max(\n      mediaCollection.admin.table.serverPageSize,\n      mediaCollection.admin.table.defaultPageSize,\n    );\n    const initialData = await fetchQuery(\n      vexConvexApi.find,\n      {\n        collection: collectionSlug as CollectionSlug,\n        paginationOpts: {\n          numItems,\n          totalDocs: true,\n          cursor: null,\n        },\n      },\n      props.token ? { token: props.token } : undefined,\n    );\n    return (\n      <MediaCollectionListView\n        collection={mediaCollection}\n        initialData={initialData as PaginationResult<VexMediaDocument>}\n      />\n    );\n  }\n\n  if (collection && documentId) {\n    const initialData = await fetchQuery(\n      vexConvexApi.get,\n      {\n        id: documentId,\n        collection: collection.slug,\n      },\n      props.token ? { token: props.token } : undefined,\n    );\n    return (\n      <CollectionEditView\n        collection={collection}\n        documentId={documentId}\n        initialData={initialData}\n      />\n    );\n  }\n\n  if (!collection) {\n    throw new Error(\"invalid collection slug\");\n  }\n\n  const numItems = Math.max(\n    collection.admin.table.serverPageSize,\n    collection.admin.table.defaultPageSize,\n  );\n  const initialData = await fetchQuery(\n    vexConvexApi.findPaginated,\n    {\n      collection: collectionSlug as CollectionSlug,\n      depth: 1,\n      paginationOpts: {\n        cursor: null,\n        numItems,\n        totalDocs: true,\n      },\n    },\n    props.token ? { token: props.token } : undefined,\n  );\n  return <CollectionListView collection={collection} initialData={initialData} />;\n}\n"],"mappings":";AAAA,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAE7B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,+BAA+B;AAkD7B,cAcD,YAdC;AAZX,eAAsB,cAAc,OAIjC;AACD,QAAM,EAAE,OAAO,CAAC,EAAE,IAAI,MAAM,MAAM;AAClC,QAAM,CAAC,gBAAgB,UAAU,IAAI;AAGrC,QAAM,eAAe,wBAAwB,MAAM,MAAM;AAEzD,MAAI,CAAC,gBAAgB;AACnB,WAAO,oBAAC,iBAAc,QAAQ,cAAc;AAAA,EAC9C;AAEA,MAAI,mBAAmB,WAAW;AAChC,QAAI,CAAC,YAAY;AACf,aAAO,oBAAC,mBAAgB,QAAQ,cAAc;AAAA,IAChD;AAIA,UAAM,eAAe,aAAa,QAAQ,KAAK,CAAC,MAAM,EAAE,SAAS,UAAU;AAC3E,QAAI,CAAC,cAAc;AACjB,aACE,qBAAC,SACC;AAAA,6BAAC,OAAE,WAAU,6BAA4B;AAAA;AAAA,UAAc;AAAA,UAAW;AAAA,WAAiB;AAAA,QACnF,oBAAC,OAAE,sCAAwB;AAAA,SAC7B;AAAA,IAEJ;AACA,UAAM,SAAS,MAAM;AAAA,MACnB,aAAa,QAAQ;AAAA,MACrB,EAAE,MAAM,aAAa,KAAK;AAAA,MAC1B,MAAM,QAAQ,EAAE,OAAO,MAAM,MAAM,IAAI;AAAA,IACzC;AACA,WAAO,oBAAC,kBAAe,QAAQ,cAAc,aAAa,QAAQ;AAAA,EACpE;AAEA,QAAM,aAAa,aAAa,YAAY,KAAK,CAAC,MAAM,EAAE,SAAS,cAAc;AACjF,QAAM,kBAAkB,aAAa,iBAAiB,KAAK,CAAC,OAAO,GAAG,SAAS,cAAc;AAE7F,MAAI,CAAC,cAAc,CAAC,iBAAiB;AACnC,WACE,qBAAC,SACC;AAAA,2BAAC,OAAE,WAAU,6BAA4B;AAAA;AAAA,QACrB;AAAA,QAAe;AAAA,SACnC;AAAA,MACA,oBAAC,OAAE,sCAAwB;AAAA,OAC7B;AAAA,EAEJ;AAEA,MAAI,mBAAmB,YAAY;AACjC,UAAMA,eAAc,MAAM;AAAA,MACxB,aAAa;AAAA,MACb;AAAA,QACE,IAAI;AAAA,QACJ,YAAY,gBAAgB;AAAA,MAC9B;AAAA,MACA,MAAM,QAAQ,EAAE,OAAO,MAAM,MAAM,IAAI;AAAA,IACzC;AACA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,YAAY;AAAA,QACZ;AAAA,QACA,aAAaA;AAAA;AAAA,IACf;AAAA,EAEJ;AAEA,MAAI,iBAAiB;AACnB,UAAMC,YAAW,KAAK;AAAA,MACpB,gBAAgB,MAAM,MAAM;AAAA,MAC5B,gBAAgB,MAAM,MAAM;AAAA,IAC9B;AACA,UAAMD,eAAc,MAAM;AAAA,MACxB,aAAa;AAAA,MACb;AAAA,QACE,YAAY;AAAA,QACZ,gBAAgB;AAAA,UACd,UAAAC;AAAA,UACA,WAAW;AAAA,UACX,QAAQ;AAAA,QACV;AAAA,MACF;AAAA,MACA,MAAM,QAAQ,EAAE,OAAO,MAAM,MAAM,IAAI;AAAA,IACzC;AACA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,YAAY;AAAA,QACZ,aAAaD;AAAA;AAAA,IACf;AAAA,EAEJ;AAEA,MAAI,cAAc,YAAY;AAC5B,UAAMA,eAAc,MAAM;AAAA,MACxB,aAAa;AAAA,MACb;AAAA,QACE,IAAI;AAAA,QACJ,YAAY,WAAW;AAAA,MACzB;AAAA,MACA,MAAM,QAAQ,EAAE,OAAO,MAAM,MAAM,IAAI;AAAA,IACzC;AACA,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,aAAaA;AAAA;AAAA,IACf;AAAA,EAEJ;AAEA,MAAI,CAAC,YAAY;AACf,UAAM,IAAI,MAAM,yBAAyB;AAAA,EAC3C;AAEA,QAAM,WAAW,KAAK;AAAA,IACpB,WAAW,MAAM,MAAM;AAAA,IACvB,WAAW,MAAM,MAAM;AAAA,EACzB;AACA,QAAM,cAAc,MAAM;AAAA,IACxB,aAAa;AAAA,IACb;AAAA,MACE,YAAY;AAAA,MACZ,OAAO;AAAA,MACP,gBAAgB;AAAA,QACd,QAAQ;AAAA,QACR;AAAA,QACA,WAAW;AAAA,MACb;AAAA,IACF;AAAA,IACA,MAAM,QAAQ,EAAE,OAAO,MAAM,MAAM,IAAI;AAAA,EACzC;AACA,SAAO,oBAAC,sBAAmB,YAAwB,aAA0B;AAC/E;","names":["initialData","numItems"]}
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}