convex-cms 0.0.7 → 0.0.9-alpha.1

package/README.md

@@ -3,10 +3,14 @@
 [![npm version](https://badge.fury.io/js/convex-cms.svg)](https://www.npmjs.com/package/convex-cms)
 [![License: Apache-2.0](https://img.shields.io/badge/License-Apache_2.0-blue.svg)](https://opensource.org/licenses/Apache-2.0)
 
-> **Alpha (v0.0.7)** Actively developed. APIs may change. [Report issues](https://github.com/obkaro/convex-cms/issues).
+> **Alpha (v0.0.8)** Actively developed. APIs may change. [Report issues](https://github.com/obkaro/convex-cms/issues).
 
 A headless CMS built as a [Convex Component](https://docs.convex.dev/components). Content management that runs inside your Convex app.
 
+[![Live Demo](docs/screenshot.png)](https://convex-cms-example.vercel.app)
+
+[Live Demo](https://convex-cms-example.vercel.app)
+
 ## Quick Start
 
 ### 1. Install
@@ -41,11 +45,11 @@ If you're building on Convex and need content management without the overhead of
 
 ### What you get:
 
-- **Typesafe admin API** Admin APIs exported directly from your backend for use in your React queries and mutations
-- **Built in admin UI** A well designed admin UI that you can view and edit content from
-- **Embeddable content manager** Ability to embed and serve the prebuilt UI as part of you React application
-- **Data independence** CMS that lives in your own convex deployment, extendable and customizable with your convex functions
-- **Agent-native.** Pre-built tools useful for AI agent integration with `@convex-dev/agent`
+- **Typesafe admin API:** Admin APIs exported directly from your backend for use in your React queries and mutations
+- **Built in admin UI:** A well designed admin UI that you can view and edit content from
+- **Embeddable content manager:** Ability to embed and serve the prebuilt UI as part of you React application
+- **Data independence:** CMS that lives in your own convex deployment, extendable and customizable with your convex functions
+- **Agent-native content management:** Pre-built tools useful for AI agent integration with `@convex-dev/agent`
 
 ## Features
 
@@ -146,3 +150,9 @@ Both modes call the same functions from your `convex/admin.ts`.
 ## License
 
 Apache-2.0
+
+## Support
+
+- [GitHub Issues](https://github.com/obkaro/convex-cms/issues): Bug reports and feature requests
+- [Discord Community](https://discord.gg/convex): Chat with other users
+- [Convex Documentation](https://docs.convex.dev): Learn about Convex

package/admin/src/components/BulkActionBar.tsx

@@ -1,6 +1,6 @@
 import { useState, useCallback } from 'react'
 import { useMutation } from 'convex/react'
-import { api } from '../../convex/_generated/api'
+import { useApi } from '~/embed/contexts/ApiContext'
 import { BulkOperationModal } from './BulkOperationModal'
 import { CmsButton } from '~/components/cmsds/CmsButton'
 import { Badge } from '~/components/ui/badge'
@@ -19,6 +19,7 @@ export function BulkActionBar({
   onClearSelection,
   onOperationComplete,
 }: BulkActionBarProps) {
+  const api = useApi()
   const [activeAction, setActiveAction] = useState<BulkAction | null>(null)
   const [isProcessing, setIsProcessing] = useState(false)
   const [result, setResult] = useState<{
@@ -27,10 +28,10 @@ export function BulkActionBar({
     errors?: string[]
   } | null>(null)
 
-  const bulkPublish = useMutation(api.admin.bulkPublish)
-  const bulkUnpublish = useMutation(api.admin.bulkUnpublish)
-  const bulkDelete = useMutation(api.admin.bulkDelete)
-  const bulkUpdate = useMutation(api.admin.bulkUpdate)
+  const bulkPublish = useMutation(api.bulkPublish)
+  const bulkUnpublish = useMutation(api.bulkUnpublish)
+  const bulkDelete = useMutation(api.bulkDelete)
+  const bulkUpdate = useMutation(api.bulkUpdate)
 
   const handleAction = useCallback((action: BulkAction) => {
     setActiveAction(action)

package/admin/src/components/ContentEntryEditor.tsx

@@ -1,6 +1,6 @@
 import { useState, useCallback, useEffect, useRef } from 'react'
 import { useMutation } from 'convex/react'
-import { api } from '../../convex/_generated/api'
+import { useApi } from '~/embed/contexts/ApiContext'
 import { FieldRenderer } from './fields/FieldRenderer'
 import { VersionHistory } from './VersionHistory'
 import type { FieldDefinition, FieldError } from './fields/types'
@@ -188,14 +188,15 @@ export function ContentEntryEditor({
   const formDataRef = useRef(formData)
   formDataRef.current = formData
 
-  const createEntry = useMutation(api.admin.createEntry)
-  const updateEntry = useMutation(api.admin.updateEntry)
-  const publishEntry = useMutation(api.admin.publishEntry)
-  const unpublishEntry = useMutation(api.admin.unpublishEntry)
-  const scheduleEntry = useMutation(api.admin.scheduleEntry)
-  const cancelScheduleEntry = useMutation(api.admin.cancelScheduledEntry)
-  const deleteEntryMutation = useMutation(api.admin.deleteEntry)
-  const duplicateEntryMutation = useMutation(api.admin.duplicateEntry)
+  const api = useApi()
+  const createEntry = useMutation(api.createEntry)
+  const updateEntry = useMutation(api.updateEntry)
+  const publishEntry = useMutation(api.publishEntry)
+  const unpublishEntry = useMutation(api.unpublishEntry)
+  const scheduleEntry = useMutation(api.scheduleEntry)
+  const cancelScheduleEntry = useMutation(api.cancelScheduledEntry)
+  const deleteEntryMutation = useMutation(api.deleteEntry)
+  const duplicateEntryMutation = useMutation(api.duplicateEntry)
 
   const [showScheduleModal, setShowScheduleModal] = useState(false)
   const [scheduleDateTime, setScheduleDateTime] = useState<string>(() => {

package/admin/src/components/ContentTypeFormModal.tsx

@@ -1,6 +1,6 @@
 import { useState, useCallback, useMemo, useEffect } from "react";
 import { useMutation } from "convex/react";
-import { api } from "../../convex/_generated/api";
+import { useApi } from "~/embed/contexts/ApiContext";
 import type { FieldType, ContentType } from "convex-cms/types";
 import { CmsDialog } from "~/components/cmsds/CmsDialog";
 import { CmsButton } from "~/components/cmsds/CmsButton";
@@ -191,8 +191,9 @@ export function ContentTypeFormModal({
 	const [showBreakingWarning, setShowBreakingWarning] = useState(false);
 	const [isForceUpdating, setIsForceUpdating] = useState(false);
 
-	const createContentType = useMutation(api.admin.createContentType);
-	const updateContentType = useMutation(api.admin.updateContentType);
+	const api = useApi();
+	const createContentType = useMutation(api.createContentType);
+	const updateContentType = useMutation(api.updateContentType);
 
 	// Populate form when editing
 	useEffect(() => {

package/admin/src/components/Sidebar.tsx

@@ -5,7 +5,7 @@ import { Layers, ChevronDown } from "lucide-react";
 import { cn } from "~/lib/cn";
 import { useAdminConfig } from "~/contexts";
 import { Icon } from "~/lib/icons";
-import { api } from "../../convex/_generated/api";
+import { useApi } from "~/embed/contexts/ApiContext";
 import {
   Collapsible,
   CollapsibleTrigger,
@@ -19,10 +19,11 @@ export function Sidebar() {
   const currentPath = routerState.location.pathname;
   const config = useAdminConfig();
   const { navItems, branding, layout } = config;
+  const api = useApi();
 
   const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
 
-  const contentTypesResult = useQuery(api.admin.listContentTypes, {
+  const contentTypesResult = useQuery(api.listContentTypes, {
     isActive: true,
   });
   const contentTypes = contentTypesResult?.page ?? [];

package/admin/src/components/TaxonomyEditor.tsx

@@ -1,6 +1,6 @@
 import { useState, useCallback, useEffect } from 'react'
 import { useMutation } from 'convex/react'
-import { api } from '../../convex/_generated/api'
+import { useApi } from '~/embed/contexts/ApiContext'
 import { CmsDialog } from '~/components/cmsds/CmsDialog'
 import { CmsButton } from '~/components/cmsds/CmsButton'
 import { Input } from '~/components/ui/input'
@@ -49,8 +49,9 @@ export function TaxonomyEditor({
   const [submitError, setSubmitError] = useState<string | null>(null)
   const [slugManuallyEdited, setSlugManuallyEdited] = useState(false)
 
-  const createTaxonomy = useMutation(api.admin.createTaxonomy)
-  const updateTaxonomy = useMutation(api.admin.updateTaxonomy)
+  const api = useApi()
+  const createTaxonomy = useMutation(api.createTaxonomy)
+  const updateTaxonomy = useMutation(api.updateTaxonomy)
 
   useEffect(() => {
     if (taxonomy) {

package/admin/src/components/TermTree.tsx

@@ -1,6 +1,6 @@
 import { useState, useCallback } from 'react'
 import { useQuery, useMutation } from 'convex/react'
-import { api } from '../../convex/_generated/api'
+import { useApi } from '~/embed/contexts/ApiContext'
 import { CmsDialog, CmsConfirmDialog } from '~/components/cmsds/CmsDialog'
 import { CmsButton } from '~/components/cmsds/CmsButton'
 import { CmsEmptyState } from '~/components/cmsds/CmsEmptyState'
@@ -34,6 +34,7 @@ export function TermTree({
   isHierarchical,
   allowInlineCreation,
 }: TermTreeProps) {
+  const api = useApi()
   const [expandedTerms, setExpandedTerms] = useState<Set<string>>(new Set())
   const [editingTerm, setEditingTerm] = useState<Term | null>(null)
   const [showCreateModal, setShowCreateModal] = useState(false)
@@ -42,10 +43,10 @@ export function TermTree({
   const [error, setError] = useState<string | null>(null)
 
   const termsQuery = isHierarchical
-    ? useQuery(api.admin.getTermsHierarchy, { taxonomyId })
-    : useQuery(api.admin.listTerms, { taxonomyId })
+    ? useQuery(api.getTermsHierarchy, { taxonomyId })
+    : useQuery(api.listTerms, { taxonomyId })
 
-  const deleteTerm = useMutation(api.admin.deleteTerm)
+  const deleteTerm = useMutation(api.deleteTerm)
 
   const terms = (
     isHierarchical ? termsQuery : (termsQuery as { page?: Term[] })?.page
@@ -304,8 +305,9 @@ function TermEditModal({
   const [submitError, setSubmitError] = useState<string | null>(null)
   const [slugManuallyEdited, setSlugManuallyEdited] = useState(false)
 
-  const createTerm = useMutation(api.admin.createTerm)
-  const updateTerm = useMutation(api.admin.updateTerm)
+  const api = useApi()
+  const createTerm = useMutation(api.createTerm)
+  const updateTerm = useMutation(api.updateTerm)
 
   const handleChange = useCallback(
     (field: keyof typeof formData, value: string | number) => {

package/admin/src/components/VersionCompare.tsx

@@ -1,5 +1,5 @@
 import { useQuery } from 'convex/react'
-import { api } from '../../convex/_generated/api'
+import { useApi } from '~/embed/contexts/ApiContext'
 import { CmsButton } from '~/components/cmsds/CmsButton'
 import { Badge } from '~/components/ui/badge'
 import { ScrollArea } from '~/components/ui/scroll-area'
@@ -47,7 +47,8 @@ export function VersionCompare({
   onClose,
   onRollback,
 }: VersionCompareProps) {
-  const comparisonQuery = useQuery(api.admin.compareVersions, {
+  const api = useApi()
+  const comparisonQuery = useQuery(api.compareVersions, {
     entryId,
     fromVersionNumber: fromVersion,
     toVersionNumber: toVersion,

package/admin/src/components/VersionHistory.tsx

@@ -1,6 +1,6 @@
 import { useState, useCallback } from 'react'
 import { useQuery, useMutation } from 'convex/react'
-import { api } from '../../convex/_generated/api'
+import { useApi } from '~/embed/contexts/ApiContext'
 import { VersionCompare } from './VersionCompare'
 import { VersionRollbackModal } from './VersionRollbackModal'
 import { CmsButton } from '~/components/cmsds/CmsButton'
@@ -34,6 +34,7 @@ export function VersionHistory({
   onRollbackComplete,
   onClose,
 }: VersionHistoryProps) {
+  const api = useApi()
   const [selectedVersions, setSelectedVersions] = useState<
     [number, number] | null
   >(null)
@@ -42,12 +43,12 @@ export function VersionHistory({
   const [rollbackError, setRollbackError] = useState<string | null>(null)
   const [rollbackSuccess, setRollbackSuccess] = useState(false)
 
-  const versionsQuery = useQuery(api.admin.getVersionHistory, {
+  const versionsQuery = useQuery(api.getVersionHistory, {
     entryId,
     paginationOpts: { numItems: 50, cursor: null },
   })
 
-  const rollbackMutation = useMutation(api.admin.rollbackVersion)
+  const rollbackMutation = useMutation(api.rollbackVersion)
 
   const versions = (versionsQuery?.page ?? []) as VersionItem[]
   const isLoading = versionsQuery === undefined

package/admin/src/components/fields/CategoryField.tsx

@@ -1,6 +1,6 @@
 import { useState, useCallback, useRef, useEffect } from 'react'
 import { useQuery } from 'convex/react'
-import { api } from '../../../convex/_generated/api'
+import { useApi } from '~/embed/contexts/ApiContext'
 import { FieldWrapper } from './FieldWrapper'
 import type { BaseFieldProps } from './types'
 import { asTaxonomyId } from '../../types'
@@ -41,6 +41,7 @@ export function CategoryField({
   id,
   placeholder = 'Select category...',
 }: CategoryFieldProps) {
+  const api = useApi()
   const fieldId = id || `field-${field.name}`
   const taxonomyId = field.options?.taxonomyId
   const allowMultiple = field.options?.allowMultiple ?? false
@@ -52,7 +53,7 @@ export function CategoryField({
   const containerRef = useRef<HTMLDivElement>(null)
 
   const hierarchyResult = useQuery(
-    api.admin.getTermsHierarchy,
+    api.getTermsHierarchy,
     taxonomyId ? { taxonomyId: asTaxonomyId(taxonomyId) } : 'skip'
   )
   const categoryTree = (hierarchyResult ?? []) as CategoryTerm[]

package/admin/src/components/fields/MediaField.tsx

@@ -1,6 +1,6 @@
 import { useState, useCallback } from 'react'
 import { useQuery } from 'convex/react'
-import { api } from '../../../convex/_generated/api'
+import { useApi } from '~/embed/contexts/ApiContext'
 // IDs are strings when crossing component boundaries
 import { FieldWrapper } from './FieldWrapper'
 import type { BaseFieldProps } from './types'
@@ -96,6 +96,7 @@ export function MediaField({
   id,
   placeholder = 'Select media...',
 }: MediaFieldProps) {
+  const api = useApi()
   const fieldId = id || `field-${field.name}`
   const [showPicker, setShowPicker] = useState(false)
   const [activeTab, setActiveTab] = useState<string>('browse')
@@ -105,12 +106,12 @@ export function MediaField({
   const allowedMimeTypes = field.options?.allowedMimeTypes ?? []
 
   const selectedAsset = useQuery(
-    api.admin.getMediaAsset,
+    api.getMediaAsset,
     value ? { id: value } : 'skip'
   )
 
   const assetsResult = useQuery(
-    api.admin.listMediaAssets,
+    api.listMediaAssets,
     showPicker
       ? {
           type: typeFilter
@@ -345,8 +346,8 @@ export function MediaField({
 
             <TabsContent value="upload" className="mt-4">
               <UploadDropzone
-                generateUploadUrl={api.admin.generateUploadUrl}
-                createAsset={api.admin.createMediaAsset}
+                generateUploadUrl={api.generateUploadUrl}
+                createAsset={api.createMediaAsset}
                 onUploadComplete={handleUploadComplete}
                 allowedMimeTypes={allowedMimeTypes}
                 maxFileSize={field.options?.maxFileSize}

package/admin/src/components/fields/ReferenceField.tsx

@@ -1,6 +1,6 @@
 import { useState, useCallback, useMemo } from 'react'
 import { useQuery } from 'convex/react'
-import { api } from '../../../convex/_generated/api'
+import { useApi } from '~/embed/contexts/ApiContext'
 import { FieldWrapper } from './FieldWrapper'
 import type { BaseFieldProps } from './types'
 import {
@@ -62,6 +62,7 @@ export function ReferenceField({
   id,
   placeholder = 'Select content...',
 }: ReferenceFieldProps) {
+  const api = useApi()
   const fieldId = id || `field-${field.name}`
   const [showPicker, setShowPicker] = useState(false)
   const [searchQuery, setSearchQuery] = useState('')
@@ -75,7 +76,7 @@ export function ReferenceField({
     return Array.isArray(value) ? value : [value]
   }, [value])
 
-  const contentTypes = useQuery(api.admin.listContentTypes, {
+  const contentTypes = useQuery(api.listContentTypes, {
     isActive: true,
     includeEntryCounts: false,
   })
@@ -91,12 +92,12 @@ export function ReferenceField({
   }, [contentTypes?.page, allowedContentTypes])
 
   const selectedEntry = useQuery(
-    api.admin.getEntry,
+    api.getEntry,
     selectedIds.length === 1 ? { id: selectedIds[0] } : 'skip'
   )
 
   const selectedEntries = useQuery(
-    api.admin.listEntries,
+    api.listEntries,
     selectedIds.length > 1
       ? {
           paginationOpts: { numItems: 100, cursor: null },
@@ -110,7 +111,7 @@ export function ReferenceField({
   }, [selectedEntries?.page, selectedIds])
 
   const entriesResult = useQuery(
-    api.admin.listEntries,
+    api.listEntries,
     showPicker
       ? {
           contentTypeName: contentTypeFilter || undefined,

package/admin/src/components/fields/TagField.tsx

@@ -1,6 +1,6 @@
 import { useState, useCallback, useRef, useEffect, useId } from 'react'
 import { useQuery, useMutation } from 'convex/react'
-import { api } from '../../../convex/_generated/api'
+import { useApi } from '~/embed/contexts/ApiContext'
 import { FieldWrapper } from './FieldWrapper'
 import type { BaseFieldProps } from './types'
 import { asTaxonomyId, asTaxonomyTermIds } from '../../types'
@@ -34,6 +34,7 @@ export function TagField({
   id,
   placeholder = 'Add tags...',
 }: TagFieldProps) {
+  const api = useApi()
   const generatedId = useId()
   const fieldId = id ?? `field-${field.name}-${generatedId}`
   const taxonomyId = field.options?.taxonomyId
@@ -51,7 +52,7 @@ export function TagField({
   const containerRef = useRef<HTMLDivElement>(null)
 
   const suggestionsResult = useQuery(
-    api.admin.suggestTerms,
+    api.suggestTerms,
     taxonomyId
       ? {
           taxonomyId: asTaxonomyId(taxonomyId),
@@ -64,7 +65,7 @@ export function TagField({
   const suggestions = suggestionsResult ?? []
 
   const selectedTermsResult = useQuery(
-    api.admin.listTerms,
+    api.listTerms,
     taxonomyId && value && value.length > 0
       ? {
           taxonomyId: asTaxonomyId(taxonomyId),
@@ -82,7 +83,7 @@ export function TagField({
     }
   }
 
-  const createTermMutation = useMutation(api.admin.createTerm)
+  const createTermMutation = useMutation(api.createTerm)
 
   useEffect(() => {
     function handleClickOutside(event: MouseEvent) {

package/admin/src/components/filters/TaxonomyFilter.tsx

@@ -1,6 +1,6 @@
 import { useState, useCallback, useMemo } from 'react'
 import { useQuery } from 'convex/react'
-import { api } from '../../../convex/_generated/api'
+import { useApi } from '~/embed/contexts/ApiContext'
 import { CmsButton } from '~/components/cmsds/CmsButton'
 import {
   Popover,
@@ -46,10 +46,11 @@ export function TaxonomyFilter({
   disabled = false,
   className,
 }: TaxonomyFilterProps) {
+  const api = useApi()
   const [open, setOpen] = useState(false)
   const [search, setSearch] = useState('')
 
-  const taxonomiesResult = useQuery(api.admin.listTaxonomies, { isActive: true })
+  const taxonomiesResult = useQuery(api.listTaxonomies, { isActive: true })
   const taxonomies = taxonomiesResult?.page ?? []
 
   const activeTaxonomy = useMemo(() => {
@@ -62,7 +63,7 @@ export function TaxonomyFilter({
   const targetTaxonomyId = taxonomyId ?? taxonomies[0]?._id
 
   const termsResult = useQuery(
-    api.admin.listTerms,
+    api.listTerms,
     targetTaxonomyId
       ? {
           taxonomyId: targetTaxonomyId,

package/admin/src/components/media/MediaAssetEditDialog.tsx

@@ -1,6 +1,6 @@
 import { useState, useCallback, useEffect } from 'react'
 import { useMutation, useQuery } from 'convex/react'
-import { api } from '../../../convex/_generated/api'
+import { useApi } from '~/embed/contexts/ApiContext'
 import { CmsDialog } from '~/components/cmsds/CmsDialog'
 import { CmsButton } from '~/components/cmsds/CmsButton'
 import { CmsField } from '~/components/cmsds/CmsField'
@@ -30,6 +30,7 @@ export function MediaAssetEditDialog({
   onOpenChange,
   onSaved,
 }: MediaAssetEditDialogProps) {
+  const api = useApi()
   const [name, setName] = useState('')
   const [title, setTitle] = useState('')
   const [description, setDescription] = useState('')
@@ -38,9 +39,9 @@ export function MediaAssetEditDialog({
   const [isSaving, setIsSaving] = useState(false)
   const [error, setError] = useState('')
 
-  const updateAsset = useMutation(api.admin.updateMediaAsset)
+  const updateAsset = useMutation(api.updateMediaAsset)
 
-  const taxonomiesResult = useQuery(api.admin.listTaxonomies, {
+  const taxonomiesResult = useQuery(api.listTaxonomies, {
     isActive: true,
     paginationOpts: { numItems: 50, cursor: null },
   })

package/admin/src/components/media/MediaFolderEditDialog.tsx

@@ -1,6 +1,6 @@
 import { useState, useCallback, useEffect } from 'react'
 import { useMutation } from 'convex/react'
-import { api } from '../../../convex/_generated/api'
+import { useApi } from '~/embed/contexts/ApiContext'
 import { CmsDialog } from '~/components/cmsds/CmsDialog'
 import { CmsButton } from '~/components/cmsds/CmsButton'
 import { CmsField } from '~/components/cmsds/CmsField'
@@ -26,12 +26,13 @@ export function MediaFolderEditDialog({
   onOpenChange,
   onSaved,
 }: MediaFolderEditDialogProps) {
+  const api = useApi()
   const [name, setName] = useState('')
   const [description, setDescription] = useState('')
   const [isSaving, setIsSaving] = useState(false)
   const [error, setError] = useState('')
 
-  const updateFolder = useMutation(api.admin.updateMediaFolder)
+  const updateFolder = useMutation(api.updateMediaFolder)
 
   useEffect(() => {
     if (folder) {

package/admin/src/components/media/MediaMoveModal.tsx

@@ -1,6 +1,6 @@
 import { useState, useMemo } from 'react'
 import { useQuery, useMutation } from 'convex/react'
-import { api } from '../../../convex/_generated/api'
+import { useApi } from '~/embed/contexts/ApiContext'
 import { CmsDialog } from '~/components/cmsds/CmsDialog'
 import { CmsButton } from '~/components/cmsds/CmsButton'
 import { cn } from '~/lib/cn'
@@ -28,14 +28,15 @@ export function MediaMoveModal({
   currentFolderId,
   onMoved,
 }: MediaMoveModalProps) {
+  const api = useApi()
   const [selectedFolderId, setSelectedFolderId] = useState<string | undefined>(
     undefined
   )
   const [isMoving, setIsMoving] = useState(false)
   const [error, setError] = useState('')
 
-  const folderTree = useQuery(api.admin.getMediaFolderTree, {})
-  const moveAssets = useMutation(api.admin.moveMediaAssets)
+  const folderTree = useQuery(api.getMediaFolderTree, {})
+  const moveAssets = useMutation(api.moveMediaAssets)
 
   const sortedFolders = useMemo(() => {
     if (!folderTree) return []

package/admin/src/components/media/MediaTaxonomyPicker.tsx

@@ -1,6 +1,6 @@
 import { useState, useCallback, useRef, useEffect } from 'react'
 import { useQuery, useMutation } from 'convex/react'
-import { api } from '../../../convex/_generated/api'
+import { useApi } from '~/embed/contexts/ApiContext'
 import { Badge } from '~/components/ui/badge'
 import { Input } from '~/components/ui/input'
 import { Button } from '~/components/ui/button'
@@ -32,6 +32,7 @@ export function MediaTaxonomyPicker({
   disabled = false,
   className = '',
 }: MediaTaxonomyPickerProps) {
+  const api = useApi()
   const [inputValue, setInputValue] = useState('')
   const [showSuggestions, setShowSuggestions] = useState(false)
   const [activeSuggestionIndex, setActiveSuggestionIndex] = useState(0)
@@ -42,14 +43,14 @@ export function MediaTaxonomyPicker({
   const suggestionsRef = useRef<HTMLDivElement>(null)
   const containerRef = useRef<HTMLDivElement>(null)
 
-  const currentTerms = useQuery(api.admin.getTermsByMedia, {
+  const currentTerms = useQuery(api.getTermsByMedia, {
     mediaId,
     taxonomyId,
   })
 
   const selectedTermIds = currentTerms?.map((t: TaxonomyTermDisplay) => t._id) ?? []
 
-  const suggestionsResult = useQuery(api.admin.suggestTerms, {
+  const suggestionsResult = useQuery(api.suggestTerms, {
     taxonomyId,
     query: inputValue,
     limit: 10,
@@ -57,8 +58,8 @@ export function MediaTaxonomyPicker({
   })
   const suggestions = (suggestionsResult ?? []) as TaxonomyTermDisplay[]
 
-  const setMediaTermsMutation = useMutation(api.admin.setMediaTerms)
-  const createTermMutation = useMutation(api.admin.createTermAndAddToMedia)
+  const setMediaTermsMutation = useMutation(api.setMediaTerms)
+  const createTermMutation = useMutation(api.createTermAndAddToMedia)
 
   useEffect(() => {
     function handleClickOutside(event: MouseEvent) {

package/admin/src/contexts/SettingsConfigContext.tsx

@@ -1,13 +1,25 @@
 import { useQuery } from "convex/react";
+import type { FunctionReference } from "convex/server";
 import { createContext, useContext, useMemo, type ReactNode } from "react";
-import { api as localApi } from "../../convex/_generated/api";
 import type { AdminConfig } from "~/lib/admin-config";
 import { AdminConfigProvider } from "./AdminConfigContext";
 
-type Settings = NonNullable<typeof localApi.admin.getSettings._returnType>;
+/**
+ * Settings returned by the getSettings query.
+ * This type is defined explicitly to avoid importing from convex/_generated.
+ */
+export interface Settings {
+  features: {
+    versioning: boolean;
+    scheduling: boolean;
+    localization: boolean;
+    mediaManagement: boolean;
+  };
+}
 
 type SettingsApi = {
-  getSettings: typeof localApi.admin.getSettings;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  getSettings: FunctionReference<"query", "public", Record<string, never>, Settings | null>;
 };
 
 interface SettingsConfigContextValue {
@@ -26,8 +38,10 @@ export function SettingsConfigProvider({
   children: ReactNode;
   api?: SettingsApi;
 }) {
-  const resolvedApi = api ?? localApi.admin;
-  const settings = useQuery(resolvedApi.getSettings);
+  // Use skip pattern when api is not provided
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const queryArg = api ? api.getSettings : ("skip" as any);
+  const settings = useQuery(queryArg) as Settings | undefined;
 
   const mergedConfig = useMemo((): AdminConfig => {
     if (!settings) return baseConfig;

package/admin/src/embed/contexts/ApiContext.tsx

@@ -7,9 +7,13 @@
  */
 
 import { createContext, useContext, type ReactNode } from "react";
-import { api } from "../../../convex/_generated/api";
+import type { BaseAdminAPI } from "convex-cms";
 
-export type CmsAdminApi = typeof api["admin"];
+// CmsAdminApi accepts BaseAdminAPI with optional namespaced exports.
+// This allows the API to work with Convex's FilterApi which removes
+// non-FunctionReference types (the namespaced objects get filtered out).
+type NamespacedKeys = "stats" | "settings" | "contentTypes" | "entries" | "bulk" | "trash" | "contentLock" | "versions" | "media" | "taxonomies";
+export type CmsAdminApi = Omit<BaseAdminAPI, NamespacedKeys> & Partial<Pick<BaseAdminAPI, NamespacedKeys>>;
 
 const ApiContext = createContext<CmsAdminApi | null>(null);