convex-cms 0.0.15 → 0.0.16

package/admin/src/embed/pages/Entry.tsx

@@ -4,6 +4,7 @@
  * Renders the entry editor for editing an existing content entry.
  */
 
+import { useMemo } from "react";
 import { useApi } from "../contexts/ApiContext";
 import { useEmbedNavigation, useEmbedParams } from "../navigation";
 import { useQuery } from "convex/react";
@@ -13,10 +14,26 @@ import { CmsEmptyState } from "../../components/cmsds/CmsEmptyState";
 import { FileText } from "lucide-react";
 import { usePermissions } from "../../hooks";
 
+function extractEntryTitle(
+  entry: Record<string, unknown>,
+  titleField?: string
+): string {
+  if (titleField && typeof entry[titleField] === "string") {
+    return entry[titleField] as string;
+  }
+  // Fall back to common title fields
+  for (const key of ["title", "name", "heading", "label", "displayName"]) {
+    if (typeof entry[key] === "string" && (entry[key] as string).trim()) {
+      return entry[key] as string;
+    }
+  }
+  return "Untitled";
+}
+
 export function EmbedEntry() {
   const api = useApi();
   const params = useEmbedParams();
-  const { navigate } = useEmbedNavigation();
+  const { navigate, navigateToEntry, navigateToNewEntry } = useEmbedNavigation();
   const { canDelete } = usePermissions();
 
   const entryId = params.entryId;
@@ -27,9 +44,26 @@ export function EmbedEntry() {
   const contentTypeArgs = entry ? { name: entry.contentTypeName } : ("skip" as const);
   const contentType = useQuery(api.getContentType, contentTypeArgs);
 
+  // Fetch sibling entries for the entry switcher
+  const siblingsArgs = entry
+    ? {
+        contentTypeName: entry.contentTypeName,
+        paginationOpts: { numItems: 100, cursor: null },
+      }
+    : ("skip" as const);
+  const siblingsResult = useQuery(api.listEntries, siblingsArgs);
+
+  const siblingEntries = useMemo(() => {
+    if (!siblingsResult?.page || !contentType) return undefined;
+    return siblingsResult.page.map((e: any) => ({
+      _id: e._id as string,
+      title: extractEntryTitle(e.data ?? {}, contentType.titleField),
+    }));
+  }, [siblingsResult?.page, contentType]);
+
   if (!entryId) {
     return (
-      <div className="space-y-6 p-6">
+      <div className="flex flex-col gap-6 p-6">
         <CmsEmptyState
           icon={<FileText className="size-6" />}
           title="No Entry Selected"
@@ -45,7 +79,7 @@ export function EmbedEntry() {
 
   if (entry === undefined || (entry && contentType === undefined)) {
     return (
-      <div className="space-y-6 p-6">
+      <div className="flex flex-col gap-6 p-6">
         <div className="flex flex-col items-center justify-center py-12">
           <div className="size-8 animate-spin rounded-full border-2 border-muted border-t-primary" />
           <p className="mt-4 text-sm text-muted-foreground">Loading entry...</p>
@@ -56,7 +90,7 @@ export function EmbedEntry() {
 
   if (entry === null) {
     return (
-      <div className="space-y-6 p-6">
+      <div className="flex flex-col gap-6 p-6">
         <CmsEmptyState
           icon={<FileText className="size-6" />}
           title="Entry Not Found"
@@ -72,7 +106,7 @@ export function EmbedEntry() {
 
   if (contentType === null) {
     return (
-      <div className="space-y-6 p-6">
+      <div className="flex flex-col gap-6 p-6">
         <CmsEmptyState
           icon={<FileText className="size-6" />}
           title="Content Type Not Found"
@@ -99,15 +133,16 @@ export function EmbedEntry() {
   };
 
   return (
-    <div className="space-y-6 p-6">
-      <ContentEntryEditor
-        contentType={contentType as ContentType}
-        entry={entry as ContentEntry}
-        onSave={handleSave}
-        onCancel={handleCancel}
-        onDelete={handleDelete}
-        canDelete={canDelete("contentEntries")}
-      />
-    </div>
+    <ContentEntryEditor
+      contentType={contentType as ContentType}
+      entry={entry as ContentEntry}
+      onSave={handleSave}
+      onCancel={handleCancel}
+      onDelete={handleDelete}
+      canDelete={canDelete("contentEntries")}
+      siblingEntries={siblingEntries}
+      onNavigateToEntry={(id) => navigateToEntry(id)}
+      onNavigateToNewEntry={() => navigateToNewEntry((contentType as ContentType)._id)}
+    />
   );
 }

package/admin/src/embed/pages/Users.tsx

@@ -0,0 +1,11 @@
+/**
+ * Embed Users Page
+ *
+ * Thin wrapper around the shared UsersPage component.
+ */
+
+import { UsersPage } from "../../pages/UsersPage";
+
+export function EmbedUsers() {
+	return <UsersPage />;
+}

package/admin/src/embed/pages/index.ts

@@ -8,3 +8,4 @@ export { EmbedTrash } from "./Trash";
 export { EmbedTaxonomies } from "./Taxonomies";
 export { EmbedNewEntry } from "./NewEntry";
 export { EmbedEntry } from "./Entry";
+export { EmbedUsers } from "./Users";

package/admin/src/embed/theme.css

@@ -0,0 +1,65 @@
+/**
+ * Convex CMS — Embed Theme
+ *
+ * Import this file in your app's CSS to enable CMS admin styling:
+ *
+ *   @import "convex-cms/admin/embed-theme.css";
+ *
+ * This provides:
+ * 1. Tailwind v4 color token registration (so bg-sidebar etc. utilities generate)
+ * 2. Scoped CSS variable values for the CMS admin container
+ */
+
+/* --------------------------------------------------------------------------
+   Tailwind v4 theme registration
+   Maps sidebar semantic colors so utilities like bg-sidebar, text-sidebar-foreground,
+   border-sidebar-border etc. are generated in the consumer's Tailwind build.
+   -------------------------------------------------------------------------- */
+
+@theme inline {
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+/* --------------------------------------------------------------------------
+   Root-level fallbacks — light mode
+   Needed because Radix portals (Sheet, Dialog) render at document.body,
+   outside the [data-cms-admin] container. These provide fallback values
+   for portaled CMS UI. If the consumer defines their own --sidebar*
+   variables, those take precedence.
+   -------------------------------------------------------------------------- */
+
+:root {
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.371 0.01 285);
+  --sidebar-primary: oklch(0.205 0.006 285);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.967 0.001 285);
+  --sidebar-accent-foreground: oklch(0.205 0.006 285);
+  --sidebar-border: oklch(0.937 0.003 253);
+  --sidebar-ring: oklch(0.623 0.214 255);
+
+  --sidebar-width: 16rem;
+  --sidebar-width-icon: 3rem;
+}
+
+/* --------------------------------------------------------------------------
+   Root-level fallbacks — dark mode
+   -------------------------------------------------------------------------- */
+
+.dark {
+  --sidebar: oklch(0.205 0.006 285);
+  --sidebar-foreground: oklch(0.967 0.001 285);
+  --sidebar-primary: oklch(0.55 0.2 255);
+  --sidebar-primary-foreground: oklch(1 0 0);
+  --sidebar-accent: oklch(0.25 0.006 285);
+  --sidebar-accent-foreground: oklch(0.967 0.001 285);
+  --sidebar-border: oklch(0.25 0.006 285);
+  --sidebar-ring: oklch(0.623 0.214 255);
+}

package/admin/src/hooks/index.ts

@@ -1,2 +1,3 @@
 export { usePermissions, type UsePermissionsResult } from './usePermissions';
 export { useBreadcrumbLabel } from './useBreadcrumbLabel';
+export { useTaxonomyId } from './useTaxonomyId';

package/admin/src/hooks/useBreadcrumbLabel.ts

@@ -1,5 +1,5 @@
 import { useEffect } from 'react'
-import { useBreadcrumbContext } from '~/contexts/BreadcrumbContext'
+import { useBreadcrumbContext } from '../contexts/BreadcrumbContext'
 
 export function useBreadcrumbLabel(path: string, label: string | undefined) {
   const { setOverride, clearOverride } = useBreadcrumbContext()

package/admin/src/hooks/useTaxonomyId.ts

@@ -0,0 +1,32 @@
+/**
+ * Resolves a taxonomy name to its ID.
+ *
+ * Field definitions can specify either `taxonomyId` (direct) or `taxonomyName`
+ * (resolved at render time). Since `taxonomyId` in field configs is typically
+ * a human-readable name (e.g. "menu_categories"), this hook always resolves
+ * it to the actual Convex document ID.
+ */
+
+import { useQuery } from "convex/react";
+import { useApi } from "../embed/contexts/ApiContext";
+
+export function useTaxonomyId(options?: {
+  taxonomyId?: string;
+  taxonomyName?: string;
+}): string | null {
+  const api = useApi();
+  const directId = options?.taxonomyId;
+  const name = options?.taxonomyName ?? directId;
+
+  const taxonomiesResult = useQuery(
+    api.listTaxonomies,
+    name ? { isActive: true } : "skip"
+  );
+
+  if (!name) return null;
+
+  const match = taxonomiesResult?.page?.find(
+    (t: { name: string }) => t.name === name
+  );
+  return match?._id ?? directId ?? null;
+}

package/admin/src/index.css

@@ -195,6 +195,7 @@
 	--radius: 0.5rem;
 }
 
+.dark [data-cms-admin="isolated"],
 [data-cms-admin="isolated"].dark,
 [data-cms-admin="isolated"] .dark {
 	--background: oklch(0.145 0.005 285);
@@ -270,6 +271,8 @@
 
 	--animate-accordion-down: accordion-down 0.2s ease-out;
 	--animate-accordion-up: accordion-up 0.2s ease-out;
+	--animate-collapsible-down: collapsible-down 0.2s ease-out;
+	--animate-collapsible-up: collapsible-up 0.2s ease-out;
 
 	@keyframes accordion-down {
 		from {
@@ -288,6 +291,24 @@
 			height: 0;
 		}
 	}
+
+	@keyframes collapsible-down {
+		from {
+			height: 0;
+		}
+		to {
+			height: var(--radix-collapsible-content-height);
+		}
+	}
+
+	@keyframes collapsible-up {
+		from {
+			height: var(--radix-collapsible-content-height);
+		}
+		to {
+			height: 0;
+		}
+	}
 }
 
 @theme inline {

package/admin/src/lib/admin-config.ts

@@ -40,10 +40,17 @@ const navigationSchema = z.object({
   showTaxonomies: z.boolean().default(true),
   showContentTypes: z.boolean().default(true),
   showTrash: z.boolean().default(true),
+  showUsers: z.boolean().default(true),
   showSettings: z.boolean().default(true),
   customItems: z.array(navItemSchema).default([]),
 });
 
+const roleSchema = z.object({
+  value: z.string(),
+  label: z.string(),
+  description: z.string().optional(),
+});
+
 const themeSchema = z.object({
   mode: z.enum(["light", "dark", "system"]).default("system"),
   allowModeSwitch: z.boolean().default(true),
@@ -55,6 +62,13 @@ export const adminConfigSchema = z.object({
   layout: layoutSchema.default(() => layoutSchema.parse({})),
   navigation: navigationSchema.default(() => navigationSchema.parse({})),
   theme: themeSchema.default(() => themeSchema.parse({})),
+  /**
+   * Custom roles for the Users page role dropdown.
+   * By default, these are appended to the built-in roles (admin/editor/author/viewer).
+   * Set `overrideBuiltInRoles: true` to replace the built-in roles entirely.
+   */
+  customRoles: z.array(roleSchema).default([]),
+  overrideBuiltInRoles: z.boolean().default(false),
 });
 
 export type AdminConfig = z.infer<typeof adminConfigSchema>;
@@ -79,6 +93,7 @@ export const DEFAULT_NAV_ITEMS: NavItem[] = [
     section: "config",
   },
   { id: "trash", path: "/trash", label: "Trash", icon: "Trash2", section: "config" },
+  { id: "users", path: "/users", label: "Users", icon: "Users", section: "config" },
   { id: "settings", path: "/settings", label: "Settings", icon: "Settings", section: "config" },
 ];
 
@@ -94,6 +109,7 @@ export function getVisibleNavItems(config: AdminConfig): { main: NavItem[]; conf
     taxonomies: config.navigation.showTaxonomies,
     "content-types": config.navigation.showContentTypes,
     trash: config.navigation.showTrash,
+    users: config.navigation.showUsers,
     settings: config.navigation.showSettings,
   };
 

package/admin/src/lib/adminApi.ts

@@ -1,4 +1,4 @@
-import type { CmsAdminApi } from "~/embed/contexts/ApiContext";
+import type { CmsAdminApi } from "../embed/contexts/ApiContext";
 
 const fnSymbol = Symbol.for("functionName");
 

package/admin/src/lib/cmsExports.ts

@@ -1,16 +1,9 @@
 // Re-export CMS utilities that admin components need.
-// Uses published sub-path exports (not relative source paths) so this works both
-// in the monorepo (via workspace:* link) and in user projects (via npm install).
-//
-// IMPORTANT: Do NOT import from the main 'convex-cms' barrel export here.
-// It re-exports convex/server code (via admin functions) which contaminates
-// the browser bundle. Use specific sub-paths that are browser-safe:
-// - convex-cms/roles: only depends on convex/values
-// - convex-cms/types: type-only re-exports from component modules
-// - convex-cms/react: React hooks (browser-safe)
-export { getRole, getRolePermissions } from 'convex-cms/roles';
-export type { RoleName } from 'convex-cms/roles';
-export type { BaseAdminAPI } from 'convex-cms';
-export type { FieldType, ContentType } from 'convex-cms/types';
-export { useMediaUploadQueue } from 'convex-cms/react';
-export type { UploadQueueFile, UploadQueueFileStatus } from 'convex-cms/react';
+// Uses relative source paths so the admin embed works both from source (link:)
+// and when pre-built. These specific modules are browser-safe (no convex/server).
+export { getRole, getRolePermissions } from '../../../src/component/roles';
+export type { RoleName } from '../../../src/component/roles';
+export type { BaseAdminAPI } from '../../../src/client/admin/index';
+export type { FieldType, ContentType } from '../../../src/client/types';
+export { useMediaUploadQueue } from '../../../src/react/index';
+export type { UploadQueueFile, UploadQueueFileStatus } from '../../../src/react/index';

package/admin/src/lib/icons.tsx

@@ -11,6 +11,7 @@ import {
   HelpCircle,
   Home,
   User,
+  Users,
   Bell,
   Lock,
   Globe,
@@ -50,6 +51,7 @@ const iconRegistry: Record<string, LucideIcon> = {
   HelpCircle,
   Home,
   User,
+  Users,
   Bell,
   Lock,
   Globe,

package/admin/src/pages/ContentPage.tsx

@@ -7,8 +7,8 @@
 
 import { useState, useCallback, useEffect, useMemo } from "react";
 import { useQuery } from "convex/react";
-import { usePermissions } from "~/hooks";
-import { BulkActionBar } from "~/components/BulkActionBar";
+import { usePermissions } from "../hooks";
+import { BulkActionBar } from "../components/BulkActionBar";
 import {
   CmsPageHeader,
   CmsEmptyState,
@@ -18,16 +18,16 @@ import {
   CmsFilterBar,
   CmsTable,
   type CmsTableColumn,
-} from "~/components/cmsds";
+} from "../components/cmsds";
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from "~/components/ui/dropdown-menu";
+} from "../components/ui/dropdown-menu";
 import { Plus, FileText, ChevronDown } from "lucide-react";
-import type { AdminNavigation } from "~/lib/navigation";
-import { CmsAdminApi } from "~/embed/contexts/ApiContext";
+import type { AdminNavigation } from "../lib/navigation";
+import type { CmsAdminApi } from "../embed/contexts/ApiContext";
 
 type ContentType = {
   _id: string;
@@ -174,7 +174,7 @@ export function ContentPage({ api, navigation }: ContentPageProps) {
 
   if (isLoading) {
     return (
-      <div className="space-y-6 p-6">
+      <div className="flex flex-col gap-4 md:gap-6">
         <CmsPageHeader
           title="Content"
           description="Browse and manage content entries across all content types."
@@ -190,7 +190,7 @@ export function ContentPage({ api, navigation }: ContentPageProps) {
   }
 
   return (
-    <div className="space-y-6 p-6">
+    <div className="flex flex-col gap-4 md:gap-6">
       <CmsPageHeader
         title="Content"
         description="Browse and manage content entries across all content types."
@@ -201,7 +201,7 @@ export function ContentPage({ api, navigation }: ContentPageProps) {
           value: searchQuery,
           onChange: setSearchQuery,
           placeholder: "Search content...",
-          className: "w-64",
+          className: "w-full md:w-64",
         }}
         filters={[
           {
@@ -215,7 +215,7 @@ export function ContentPage({ api, navigation }: ContentPageProps) {
                 label: type.displayName,
               })),
             ],
-            className: "w-48",
+            className: "w-full sm:w-48",
           },
           {
             key: "status",
@@ -228,7 +228,7 @@ export function ContentPage({ api, navigation }: ContentPageProps) {
               { value: "scheduled", label: "Scheduled" },
               { value: "archived", label: "Archived" },
             ],
-            className: "w-36",
+            className: "w-full sm:w-36",
           },
         ]}
         actions={

package/admin/src/pages/ContentTypeEntriesPage.tsx

@@ -7,7 +7,7 @@
 
 import { useState, useMemo, useEffect, useCallback } from "react";
 import { useQuery, useMutation } from "convex/react";
-import { usePermissions } from "~/hooks";
+import { usePermissions } from "../hooks";
 import {
   CmsPageHeader,
   CmsButton,
@@ -19,10 +19,10 @@ import {
   CmsTable,
   type CmsTableColumn,
   CmsPagination,
-} from "~/components/cmsds";
+} from "../components/cmsds";
 import { Plus, FileText } from "lucide-react";
-import type { AdminNavigation } from "~/lib/navigation";
-import type { CmsAdminApi } from "~/embed/contexts/ApiContext";
+import type { AdminNavigation } from "../lib/navigation";
+import type { CmsAdminApi } from "../embed/contexts/ApiContext";
 
 type SortField = "title" | "status" | "updatedAt" | "createdAt";
 type SortDirection = "asc" | "desc";
@@ -260,7 +260,7 @@ export function ContentTypeEntriesPage({
 
   if (contentType === undefined || entriesResult === undefined) {
     return (
-      <div className="space-y-6 p-6">
+      <div className="flex flex-col gap-4 md:gap-6">
         <div className="flex flex-col items-center justify-center py-12">
           <div className="size-8 animate-spin rounded-full border-2 border-muted border-t-primary" />
           <p className="mt-4 text-sm text-muted-foreground">Loading entries...</p>
@@ -271,7 +271,7 @@ export function ContentTypeEntriesPage({
 
   if (contentType === null) {
     return (
-      <div className="space-y-6 p-6">
+      <div className="flex flex-col gap-4 md:gap-6">
         <CmsEmptyState
           icon={<FileText className="size-6" />}
           title="Content Type Not Found"
@@ -288,7 +288,7 @@ export function ContentTypeEntriesPage({
   const hasFilters = searchQuery || selectedStatus !== "all";
 
   return (
-    <div className="space-y-6 p-6">
+    <div className="flex flex-col gap-4 md:gap-6">
       <CmsPageHeader
         title={contentType.displayName}
         description={contentType.description}
@@ -307,7 +307,7 @@ export function ContentTypeEntriesPage({
           value: searchQuery,
           onChange: setSearchQuery,
           placeholder: "Search entries...",
-          className: "w-64",
+          className: "w-full md:w-64",
         }}
         filters={[
           {
@@ -324,7 +324,7 @@ export function ContentTypeEntriesPage({
               { value: "scheduled", label: "Scheduled" },
               { value: "archived", label: "Archived" },
             ],
-            className: "w-36",
+            className: "w-full sm:w-36",
           },
         ]}
         onClearFilters={hasFilters ? clearFilters : undefined}

package/admin/src/pages/ContentTypesPage.tsx

@@ -7,7 +7,7 @@
 
 import { useState, useMemo, useCallback } from "react";
 import { useQuery } from "convex/react";
-import { ContentTypeFormModal } from "~/components/ContentTypeFormModal";
+import { ContentTypeFormModal } from "../components/ContentTypeFormModal";
 
 interface ContentTypeField {
 	name: string;
@@ -34,10 +34,10 @@ import {
 	CmsFilterBar,
 	CmsTable,
 	type CmsTableColumn,
-} from "~/components/cmsds";
-import { Checkbox } from "~/components/ui/checkbox";
-import { Badge } from "~/components/ui/badge";
-import { cn } from "~/lib/cn";
+} from "../components/cmsds";
+import { Checkbox } from "../components/ui/checkbox";
+import { Badge } from "../components/ui/badge";
+import { cn } from "../lib/cn";
 import {
 	Grid3X3,
 	List,
@@ -57,8 +57,8 @@ import {
 	Code2,
 	Eye,
 } from "lucide-react";
-import type { AdminNavigation } from "~/lib/navigation";
-import { CmsAdminApi } from "~/embed/contexts/ApiContext";
+import type { AdminNavigation } from "../lib/navigation";
+import type { CmsAdminApi } from "../embed/contexts/ApiContext";
 
 type ViewMode = "grid" | "list";
 
@@ -267,7 +267,7 @@ export function ContentTypesPage({ api, navigation }: ContentTypesPageProps) {
 	);
 
 	return (
-		<div className="space-y-6 p-6">
+		<div className="flex flex-col gap-4 md:gap-6">
 			<CmsPageHeader
 				title="Content Types"
 				description="Define the structure of your content with custom fields and validation rules."
@@ -278,7 +278,7 @@ export function ContentTypesPage({ api, navigation }: ContentTypesPageProps) {
 					value: searchQuery,
 					onChange: setSearchQuery,
 					placeholder: "Search content types...",
-					className: "w-64",
+					className: "w-full md:w-64",
 				}}
 				actions={
 					<div className="flex items-center gap-3">

package/admin/src/pages/DashboardPage.tsx

@@ -12,12 +12,12 @@ import {
 	CardDescription,
 	CardHeader,
 	CardTitle,
-} from "~/components/ui/card";
-import { CmsPageHeader, CmsStatCard } from "~/components/cmsds";
-import { SchemaDriftWarning } from "~/components/SchemaDriftWarning";
+} from "../components/ui/card";
+import { CmsPageHeader, CmsStatCard } from "../components/cmsds";
+import { SchemaDriftWarning } from "../components/SchemaDriftWarning";
 import { FileText, Image, Layers, Settings, TrendingUp } from "lucide-react";
-import type { AdminNavigation } from "~/lib/navigation";
-import type { CmsAdminApi } from "~/embed/contexts/ApiContext";
+import type { AdminNavigation } from "../lib/navigation";
+import type { CmsAdminApi } from "../embed/contexts/ApiContext";
 
 interface DashboardPageProps {
 	api: CmsAdminApi;
@@ -30,7 +30,7 @@ export function DashboardPage({ api, navigation }: DashboardPageProps) {
 	const hasError = stats === null;
 
 	return (
-		<div className="space-y-8">
+		<div className="flex flex-col gap-8">
 			<CmsPageHeader
 				title="Dashboard"
 				description="Welcome to Convex CMS Admin. Manage your content, media, and publishing workflows."
@@ -65,7 +65,7 @@ export function DashboardPage({ api, navigation }: DashboardPageProps) {
 				/>
 			</div>
 
-			<section className="space-y-4">
+			<section className="flex flex-col gap-4">
 				<div className="flex items-center gap-2">
 					<TrendingUp className="size-5 text-muted-foreground" />
 					<h2 className="text-lg font-semibold">Quick Stats</h2>