convex-cms 0.0.9-alpha.6 → 0.0.9-alpha.7

package/admin/src/contexts/SettingsConfigContext.tsx

@@ -18,8 +18,12 @@ export interface Settings {
 }
 
 type SettingsApi = {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  getSettings: FunctionReference<"query", "public", Record<string, never>, Settings | null>;
+  getSettings: FunctionReference<
+    "query",
+    "public",
+    Record<string, never>,
+    Settings | null
+  >;
 };
 
 interface SettingsConfigContextValue {
@@ -27,21 +31,22 @@ interface SettingsConfigContextValue {
   settings: Settings | undefined;
 }
 
-const SettingsConfigContext = createContext<SettingsConfigContextValue | null>(null);
+const SettingsConfigContext = createContext<SettingsConfigContextValue | null>(
+  null
+);
 
-export function SettingsConfigProvider({
+// Component that queries settings (only rendered when api is provided)
+function SettingsConfigProviderWithQuery({
   baseConfig,
   children,
   api,
 }: {
   baseConfig: AdminConfig;
   children: ReactNode;
-  api?: SettingsApi;
+  api: SettingsApi;
 }) {
-  // 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;
+  // Proper skip pattern: function ref first, args (or "skip") second
+  const settings = useQuery(api.getSettings, {}) ?? undefined;
 
   const mergedConfig = useMemo((): AdminConfig => {
     if (!settings) return baseConfig;
@@ -50,7 +55,8 @@ export function SettingsConfigProvider({
       ...baseConfig,
       navigation: {
         ...baseConfig.navigation,
-        showMedia: baseConfig.navigation.showMedia && settings.features.mediaManagement,
+        showMedia:
+          baseConfig.navigation.showMedia && settings.features.mediaManagement,
       },
     };
   }, [baseConfig, settings]);
@@ -69,10 +75,60 @@ export function SettingsConfigProvider({
   );
 }
 
+// Component without query (when api is not provided)
+function SettingsConfigProviderWithoutQuery({
+  baseConfig,
+  children,
+}: {
+  baseConfig: AdminConfig;
+  children: ReactNode;
+}) {
+  const contextValue = useMemo(
+    () => ({ baseConfig, settings: undefined }),
+    [baseConfig]
+  );
+
+  return (
+    <SettingsConfigContext.Provider value={contextValue}>
+      <AdminConfigProvider config={baseConfig}>{children}</AdminConfigProvider>
+    </SettingsConfigContext.Provider>
+  );
+}
+
+export function SettingsConfigProvider({
+  baseConfig,
+  children,
+  api,
+}: {
+  baseConfig: AdminConfig;
+  children: ReactNode;
+  api?: SettingsApi;
+}) {
+  // Use component splitting to avoid calling useQuery without a valid function ref
+  if (api) {
+    return (
+      <SettingsConfigProviderWithQuery
+        baseConfig={baseConfig}
+        api={api}
+        children={children}
+      />
+    );
+  }
+
+  return (
+    <SettingsConfigProviderWithoutQuery
+      baseConfig={baseConfig}
+      children={children}
+    />
+  );
+}
+
 export function useSettingsConfig(): SettingsConfigContextValue {
   const ctx = useContext(SettingsConfigContext);
   if (!ctx) {
-    throw new Error("useSettingsConfig must be used within SettingsConfigProvider");
+    throw new Error(
+      "useSettingsConfig must be used within SettingsConfigProvider"
+    );
   }
   return ctx;
 }

package/admin/src/pages/SettingsPage.tsx

@@ -126,22 +126,110 @@ export interface SettingsPageProps {
 	navigation: AdminNavigation;
 }
 
-export function SettingsPage({
+// Unconfigured settings page (no useQuery needed)
+function SettingsPageUnconfigured() {
+	return (
+		<RouteGuard requiredPermission={{ resource: "settings", action: "manage" }}>
+			<div className="space-y-6 p-6">
+				<CmsPageHeader
+					title="Settings"
+					description="Configure your CMS settings and preferences."
+				/>
+
+				<div className="space-y-6">
+					<AppearanceSection />
+
+					<Alert>
+						<Info className="size-4" />
+						<AlertDescription>
+							<strong>Settings not configured.</strong> To enable CMS settings,
+							export{" "}
+							<code className="rounded bg-muted px-1 py-0.5 text-xs">
+								getSettings
+							</code>
+							,{" "}
+							<code className="rounded bg-muted px-1 py-0.5 text-xs">
+								updateSettings
+							</code>
+							, and{" "}
+							<code className="rounded bg-muted px-1 py-0.5 text-xs">
+								resetSettings
+							</code>{" "}
+							from your{" "}
+							<code className="rounded bg-muted px-1 py-0.5 text-xs">
+								convex/admin.ts
+							</code>{" "}
+							file.
+						</AlertDescription>
+					</Alert>
+
+					<CmsSurface elevation="base" className="p-6">
+						<div className="mb-4 flex items-center gap-2">
+							<h2 className="text-lg font-semibold text-foreground">Features</h2>
+							<Badge variant="secondary" className="gap-1">
+								<Lock className="size-3" />
+								Default values
+							</Badge>
+						</div>
+						<p className="mb-4 text-sm text-muted-foreground">
+							Showing default feature flags. Configure settings in your admin
+							API to customize.
+						</p>
+						<div className="space-y-4">
+							{(
+								[
+									"versioning",
+									"scheduling",
+									"localization",
+									"mediaManagement",
+								] as const
+							).map((feature) => (
+								<div
+									key={feature}
+									className="flex items-center justify-between opacity-75"
+								>
+									<div>
+										<Label className="text-sm font-medium capitalize">
+											{feature}
+										</Label>
+									</div>
+									<Switch checked={DEFAULT_FEATURES[feature]} disabled={true} />
+								</div>
+							))}
+						</div>
+					</CmsSurface>
+
+					<CmsSurface elevation="base" className="p-6">
+						<h2 className="mb-4 text-lg font-semibold text-foreground">API</h2>
+						<div className="space-y-4">
+							<div>
+								<Label className="text-sm font-medium">
+									Convex Deployment URL
+								</Label>
+								<code className="mt-1 block rounded-md bg-muted px-3 py-2 text-sm">
+									{import.meta.env.VITE_CONVEX_URL || "Not configured"}
+								</code>
+							</div>
+						</div>
+					</CmsSurface>
+				</div>
+			</div>
+		</RouteGuard>
+	);
+}
+
+// Configured settings page with query
+function SettingsPageConfigured({
 	api,
-	navigation: _navigation,
-}: SettingsPageProps) {
+}: {
+	api: CmsAdminApi & { getSettings: NonNullable<CmsAdminApi["getSettings"]> };
+}) {
 	const { canManageSettings } = usePermissions();
 	const canEdit = canManageSettings();
 	const adminConfig = useAdminConfig();
 
-	const isConfigured = useMemo(() => {
-		return api.getSettings != null;
-	}, [api]);
-
-	const settings = useQuery(
-		isConfigured ? api.getSettings : ("skip" as unknown as typeof api.getSettings),
-		isConfigured ? {} : "skip"
-	);
+	// Proper skip pattern: valid function ref, args as second param
+	const settings = useQuery(api.getSettings, {});
 
 	const updateSettingsMutation = useMutation(
 		api.updateSettings ?? ((() => {}) as unknown as typeof api.updateSettings)
@@ -197,7 +285,7 @@ export function SettingsPage({
 	);
 
 	const handleSave = useCallback(async () => {
-		if (!formData || !isDirty || !isConfigured || !api.updateSettings) return;
+		if (!formData || !isDirty || !api.updateSettings) return;
 
 		setFeedbackStatus("saving");
 		setErrorMessage(null);
@@ -219,10 +307,10 @@ export function SettingsPage({
 				error instanceof Error ? error.message : "Failed to save settings",
 			);
 		}
-	}, [formData, isDirty, isConfigured, api.updateSettings, updateSettingsMutation]);
+	}, [formData, isDirty, api.updateSettings, updateSettingsMutation]);
 
 	const handleReset = useCallback(async () => {
-		if (!isConfigured || !api.resetSettings) return;
+		if (!api.resetSettings) return;
 
 		const confirmed = window.confirm(
 			"Are you sure you want to reset all settings to their defaults? This action cannot be undone.",
@@ -257,7 +345,7 @@ export function SettingsPage({
 				error instanceof Error ? error.message : "Failed to reset settings",
 			);
 		}
-	}, [isConfigured, api.resetSettings, resetSettingsMutation]);
+	}, [api.resetSettings, resetSettingsMutation]);
 
 	const handleDiscard = useCallback(() => {
 		if (normalizedSettings) {
@@ -268,71 +356,6 @@ export function SettingsPage({
 		}
 	}, [normalizedSettings]);
 
-	if (!isConfigured) {
-		return (
-			<RouteGuard
-				requiredPermission={{ resource: "settings", action: "manage" }}
-			>
-				<div className="space-y-6 p-6">
-					<CmsPageHeader
-						title="Settings"
-						description="Configure your CMS settings and preferences."
-					/>
-
-					<div className="space-y-6">
-						<AppearanceSection />
-
-						<Alert>
-							<Info className="size-4" />
-							<AlertDescription>
-								<strong>Settings not configured.</strong> To enable CMS settings, export{" "}
-								<code className="rounded bg-muted px-1 py-0.5 text-xs">getSettings</code>,{" "}
-								<code className="rounded bg-muted px-1 py-0.5 text-xs">updateSettings</code>, and{" "}
-								<code className="rounded bg-muted px-1 py-0.5 text-xs">resetSettings</code> from your{" "}
-								<code className="rounded bg-muted px-1 py-0.5 text-xs">convex/admin.ts</code> file.
-							</AlertDescription>
-						</Alert>
-
-						<CmsSurface elevation="base" className="p-6">
-							<div className="mb-4 flex items-center gap-2">
-								<h2 className="text-lg font-semibold text-foreground">Features</h2>
-								<Badge variant="secondary" className="gap-1">
-									<Lock className="size-3" />
-									Default values
-								</Badge>
-							</div>
-							<p className="mb-4 text-sm text-muted-foreground">
-								Showing default feature flags. Configure settings in your admin API to customize.
-							</p>
-							<div className="space-y-4">
-								{(["versioning", "scheduling", "localization", "mediaManagement"] as const).map((feature) => (
-									<div key={feature} className="flex items-center justify-between opacity-75">
-										<div>
-											<Label className="text-sm font-medium capitalize">{feature}</Label>
-										</div>
-										<Switch checked={DEFAULT_FEATURES[feature]} disabled={true} />
-									</div>
-								))}
-							</div>
-						</CmsSurface>
-
-						<CmsSurface elevation="base" className="p-6">
-							<h2 className="mb-4 text-lg font-semibold text-foreground">API</h2>
-							<div className="space-y-4">
-								<div>
-									<Label className="text-sm font-medium">Convex Deployment URL</Label>
-									<code className="mt-1 block rounded-md bg-muted px-3 py-2 text-sm">
-										{import.meta.env.VITE_CONVEX_URL || "Not configured"}
-									</code>
-								</div>
-							</div>
-						</CmsSurface>
-					</div>
-				</div>
-			</RouteGuard>
-		);
-	}
-
 	if (settings === undefined) {
 		return (
 			<RouteGuard
@@ -547,3 +570,24 @@ export function SettingsPage({
 		</RouteGuard>
 	);
 }
+
+// Main wrapper that decides which component to render
+export function SettingsPage({
+	api,
+	navigation: _navigation,
+}: SettingsPageProps) {
+	// Check if settings API is configured
+	if (api.getSettings) {
+		return (
+			<SettingsPageConfigured
+				api={
+					api as CmsAdminApi & {
+						getSettings: NonNullable<CmsAdminApi["getSettings"]>;
+					}
+				}
+			/>
+		);
+	}
+
+	return <SettingsPageUnconfigured />;
+}

package/admin/src/routes/__root.tsx

@@ -231,7 +231,10 @@ function ConvexProviderWrapper({
   return (
     <ConvexProvider client={convex}>
       <ApiProvider api={api.admin}>
-        <SettingsConfigProvider baseConfig={adminConfig}>
+        <SettingsConfigProvider
+          baseConfig={adminConfig}
+          api={{ getSettings: api.admin.getSettings }}
+        >
           {children}
         </SettingsConfigProvider>
       </ApiProvider>

package/admin-dist/nitro.json

@@ -1,5 +1,5 @@
 {
-  "date": "2026-01-28T12:28:07.860Z",
+  "date": "2026-01-28T13:35:47.975Z",
   "preset": "node-server",
   "framework": {
     "name": "nitro",

package/admin-dist/public/assets/{CmsEmptyState-la_kLGHv.js → CmsEmptyState-gxhf-b6F.js}

@@ -1 +1 @@
-import{j as e,C as n,h as x}from"./main-BrFRroF1.js";function d({icon:s,title:m,description:r,action:t,className:l,...a}){return e.jsxs("div",{className:x("flex flex-col items-center justify-center py-12 text-center",l),...a,children:[s&&e.jsx("div",{className:"mb-4 flex size-12 items-center justify-center rounded-full bg-muted text-muted-foreground",children:s}),e.jsx("h3",{className:"text-base font-semibold text-foreground",children:m}),r&&e.jsx("p",{className:"mt-1 max-w-sm text-sm text-muted-foreground",children:r}),t&&e.jsx(n,{variant:t.variant??"primary",onClick:t.onClick,className:"mt-4",children:t.label})]})}export{d as C};
+import{j as e,C as n,h as x}from"./main-DWSY6jZL.js";function d({icon:s,title:m,description:r,action:t,className:l,...a}){return e.jsxs("div",{className:x("flex flex-col items-center justify-center py-12 text-center",l),...a,children:[s&&e.jsx("div",{className:"mb-4 flex size-12 items-center justify-center rounded-full bg-muted text-muted-foreground",children:s}),e.jsx("h3",{className:"text-base font-semibold text-foreground",children:m}),r&&e.jsx("p",{className:"mt-1 max-w-sm text-sm text-muted-foreground",children:r}),t&&e.jsx(n,{variant:t.variant??"primary",onClick:t.onClick,className:"mt-4",children:t.label})]})}export{d as C};

package/admin-dist/public/assets/{CmsPageHeader-Cf0SafVG.js → CmsPageHeader-equV7Sd9.js}

@@ -1 +1 @@
-import{j as e,h as m}from"./main-BrFRroF1.js";function c({title:i,description:s,actions:t,breadcrumbs:a,className:l,...r}){return e.jsxs("div",{className:m("mb-6",l),...r,children:[a&&e.jsx("div",{className:"mb-2",children:a}),e.jsxs("div",{className:"flex items-start justify-between gap-4",children:[e.jsxs("div",{className:"space-y-1",children:[e.jsx("h1",{className:"text-2xl font-semibold tracking-tight text-foreground",children:i}),s&&e.jsx("p",{className:"text-sm text-muted-foreground",children:s})]}),t&&e.jsx("div",{className:"flex items-center gap-2",children:t})]})]})}export{c as C};
+import{j as e,h as m}from"./main-DWSY6jZL.js";function c({title:i,description:s,actions:t,breadcrumbs:a,className:l,...r}){return e.jsxs("div",{className:m("mb-6",l),...r,children:[a&&e.jsx("div",{className:"mb-2",children:a}),e.jsxs("div",{className:"flex items-start justify-between gap-4",children:[e.jsxs("div",{className:"space-y-1",children:[e.jsx("h1",{className:"text-2xl font-semibold tracking-tight text-foreground",children:i}),s&&e.jsx("p",{className:"text-sm text-muted-foreground",children:s})]}),t&&e.jsx("div",{className:"flex items-center gap-2",children:t})]})]})}export{c as C};

package/admin-dist/public/assets/{CmsStatusBadge-BovugIHH.js → CmsStatusBadge-DQAslyW4.js}

@@ -1 +1 @@
-import{j as e,h as t}from"./main-BrFRroF1.js";import{B as a}from"./badge-Cmc3T9vs.js";const c={draft:{label:"Draft",className:"status-draft",icon:e.jsx("svg",{className:"size-3",fill:"currentColor",viewBox:"0 0 8 8",children:e.jsx("circle",{cx:"4",cy:"4",r:"3"})})},published:{label:"Published",className:"status-published",icon:e.jsx("svg",{className:"size-3",fill:"none",stroke:"currentColor",strokeWidth:"2",viewBox:"0 0 24 24",children:e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M5 13l4 4L19 7"})})},scheduled:{label:"Scheduled",className:"status-scheduled",icon:e.jsxs("svg",{className:"size-3",fill:"none",stroke:"currentColor",strokeWidth:"2",viewBox:"0 0 24 24",children:[e.jsx("circle",{cx:"12",cy:"12",r:"10"}),e.jsx("path",{strokeLinecap:"round",d:"M12 6v6l4 2"})]})},archived:{label:"Archived",className:"status-archived",icon:e.jsx("svg",{className:"size-3",fill:"none",stroke:"currentColor",strokeWidth:"2",viewBox:"0 0 24 24",children:e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4"})})}},n={gray:"bg-muted text-muted-foreground",yellow:"bg-diff-modified-bg text-diff-modified-foreground",blue:"bg-info-bg text-info-foreground",green:"bg-diff-added-bg text-diff-added-foreground",red:"bg-diff-removed-bg text-diff-removed-foreground",purple:"bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-400",orange:"bg-diff-modified-bg text-diff-modified-foreground"};function l(){return e.jsx("svg",{className:"size-3",fill:"currentColor",viewBox:"0 0 8 8",children:e.jsx("circle",{cx:"4",cy:"4",r:"3"})})}function x({status:d,customConfig:s,className:o,...i}){if(s)return e.jsxs(a,{variant:"secondary",className:t("gap-1.5 px-2 py-0.5 text-xs font-medium",n[s.color],o),...i,children:[l(),s.displayName]});const r=c[d];return r?e.jsxs(a,{variant:"secondary",className:t("gap-1.5 px-2 py-0.5 text-xs font-medium",r.className,o),...i,children:[r.icon,r.label]}):e.jsxs(a,{variant:"secondary",className:t("gap-1.5 px-2 py-0.5 text-xs font-medium",n.gray,o),...i,children:[l(),d]})}export{x as C};
+import{j as e,h as t}from"./main-DWSY6jZL.js";import{B as a}from"./badge-DiaAY1It.js";const c={draft:{label:"Draft",className:"status-draft",icon:e.jsx("svg",{className:"size-3",fill:"currentColor",viewBox:"0 0 8 8",children:e.jsx("circle",{cx:"4",cy:"4",r:"3"})})},published:{label:"Published",className:"status-published",icon:e.jsx("svg",{className:"size-3",fill:"none",stroke:"currentColor",strokeWidth:"2",viewBox:"0 0 24 24",children:e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M5 13l4 4L19 7"})})},scheduled:{label:"Scheduled",className:"status-scheduled",icon:e.jsxs("svg",{className:"size-3",fill:"none",stroke:"currentColor",strokeWidth:"2",viewBox:"0 0 24 24",children:[e.jsx("circle",{cx:"12",cy:"12",r:"10"}),e.jsx("path",{strokeLinecap:"round",d:"M12 6v6l4 2"})]})},archived:{label:"Archived",className:"status-archived",icon:e.jsx("svg",{className:"size-3",fill:"none",stroke:"currentColor",strokeWidth:"2",viewBox:"0 0 24 24",children:e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4"})})}},n={gray:"bg-muted text-muted-foreground",yellow:"bg-diff-modified-bg text-diff-modified-foreground",blue:"bg-info-bg text-info-foreground",green:"bg-diff-added-bg text-diff-added-foreground",red:"bg-diff-removed-bg text-diff-removed-foreground",purple:"bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-400",orange:"bg-diff-modified-bg text-diff-modified-foreground"};function l(){return e.jsx("svg",{className:"size-3",fill:"currentColor",viewBox:"0 0 8 8",children:e.jsx("circle",{cx:"4",cy:"4",r:"3"})})}function x({status:d,customConfig:s,className:o,...i}){if(s)return e.jsxs(a,{variant:"secondary",className:t("gap-1.5 px-2 py-0.5 text-xs font-medium",n[s.color],o),...i,children:[l(),s.displayName]});const r=c[d];return r?e.jsxs(a,{variant:"secondary",className:t("gap-1.5 px-2 py-0.5 text-xs font-medium",r.className,o),...i,children:[r.icon,r.label]}):e.jsxs(a,{variant:"secondary",className:t("gap-1.5 px-2 py-0.5 text-xs font-medium",n.gray,o),...i,children:[l(),d]})}export{x as C};

package/admin-dist/public/assets/{CmsSurface-Dp1TegU4.js → CmsSurface-DdC_aGB5.js}

@@ -1 +1 @@
-import{j as r,h as t}from"./main-BrFRroF1.js";const l={base:"surface-base",elevated:"surface-elevated",floating:"surface-floating"},m={none:"",sm:"p-3",md:"p-4",lg:"p-6"},u={none:"rounded-none",sm:"rounded-sm",md:"rounded-md",lg:"rounded-lg"};function f({elevation:e="base",padding:s="md",rounded:n="lg",className:a,children:d,...o}){return r.jsx("div",{className:t(l[e],m[s],u[n],a),...o,children:d})}export{f as C};
+import{j as r,h as t}from"./main-DWSY6jZL.js";const l={base:"surface-base",elevated:"surface-elevated",floating:"surface-floating"},m={none:"",sm:"p-3",md:"p-4",lg:"p-6"},u={none:"rounded-none",sm:"rounded-sm",md:"rounded-md",lg:"rounded-lg"};function f({elevation:e="base",padding:s="md",rounded:n="lg",className:a,children:d,...o}){return r.jsx("div",{className:t(l[e],m[s],u[n],a),...o,children:d})}export{f as C};

package/admin-dist/public/assets/{CmsToolbar-B1zdfMu0.js → CmsToolbar-Crleacii.js}

@@ -1 +1 @@
-import{j as e,I as i,h as o}from"./main-BrFRroF1.js";import{S as p}from"./search-BsuImjd-.js";function u({left:t,right:s,search:a,filters:r,actions:l,className:n,children:x,...m}){return e.jsxs("div",{className:o("flex flex-wrap items-center justify-between gap-3 pb-4",n),...m,children:[e.jsxs("div",{className:"flex flex-1 flex-wrap items-center gap-2",children:[a&&e.jsxs("div",{className:"relative w-full max-w-xs",children:[e.jsx(p,{className:"absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground"}),e.jsx(i,{type:"search",placeholder:a.placeholder??"Search...",value:a.value,onChange:c=>a.onChange(c.target.value),className:"pl-9"})]}),r,t,x]}),(s||l)&&e.jsx("div",{className:"flex items-center gap-2",children:s??l})]})}export{u as C};
+import{j as e,I as i,h as o}from"./main-DWSY6jZL.js";import{S as p}from"./search-BT8HTHxb.js";function u({left:t,right:s,search:a,filters:r,actions:l,className:n,children:x,...m}){return e.jsxs("div",{className:o("flex flex-wrap items-center justify-between gap-3 pb-4",n),...m,children:[e.jsxs("div",{className:"flex flex-1 flex-wrap items-center gap-2",children:[a&&e.jsxs("div",{className:"relative w-full max-w-xs",children:[e.jsx(p,{className:"absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground"}),e.jsx(i,{type:"search",placeholder:a.placeholder??"Search...",value:a.value,onChange:c=>a.onChange(c.target.value),className:"pl-9"})]}),r,t,x]}),(s||l)&&e.jsx("div",{className:"flex items-center gap-2",children:s??l})]})}export{u as C};