@actuate-media/cms-admin 0.7.3 → 0.8.1

package/src/lib/api.ts

@@ -1,67 +1,95 @@
-const DEFAULT_BASE = '/api/cms';
+const DEFAULT_BASE = '/api/cms'
 
-let basePath = DEFAULT_BASE;
+let basePath = DEFAULT_BASE
 
 export function setApiBase(path: string) {
-  basePath = path;
+  basePath = path
 }
 
 function getCsrfToken(): string {
-  if (typeof document === 'undefined') return '';
-  const match = document.cookie.match(/(?:^|;\s*)actuate_csrf=([^;]*)/);
-  return match?.[1] ?? '';
+  if (typeof document === 'undefined') return ''
+  const match = document.cookie.match(/(?:^|;\s*)actuate_csrf=([^;]*)/)
+  return match?.[1] ?? ''
 }
 
+/**
+ * Fetch a CSRF token if we don't have one in cookies yet. Used both as a
+ * one-shot bootstrap (e.g. on AdminRoot mount after a Server-Action login)
+ * and lazily inside `cmsApi` before mutating requests.
+ *
+ * Multiple concurrent callers share a single in-flight fetch via the
+ * `pendingFetch` cache so the admin doesn't fire N parallel `/auth/csrf`
+ * requests when a page lights up after navigation.
+ */
+let pendingFetch: Promise<void> | null = null
+
 export async function ensureCsrfToken(): Promise<void> {
-  if (getCsrfToken()) return;
-  try {
-    await fetch(`${basePath}/auth/csrf`, { credentials: 'include' });
-  } catch { /* best-effort */ }
+  if (getCsrfToken()) return
+  if (pendingFetch) return pendingFetch
+  pendingFetch = (async () => {
+    try {
+      await fetch(`${basePath}/auth/csrf`, { credentials: 'include' })
+    } catch {
+      // best-effort — caller will see the 403 from the actual mutation if
+      // the cookie still isn't set, instead of a silent network failure.
+    } finally {
+      pendingFetch = null
+    }
+  })()
+  return pendingFetch
 }
 
 function getActiveLocale(): string | null {
-  if (typeof localStorage === 'undefined') return null;
-  return localStorage.getItem('actuate-locale');
+  if (typeof localStorage === 'undefined') return null
+  return localStorage.getItem('actuate-locale')
 }
 
 function appendLocaleParam(endpoint: string): string {
-  const locale = getActiveLocale();
-  if (!locale) return endpoint;
-  const separator = endpoint.includes('?') ? '&' : '?';
-  return `${endpoint}${separator}locale=${encodeURIComponent(locale)}`;
+  const locale = getActiveLocale()
+  if (!locale) return endpoint
+  const separator = endpoint.includes('?') ? '&' : '?'
+  return `${endpoint}${separator}locale=${encodeURIComponent(locale)}`
 }
 
 export async function cmsApi<T = unknown>(
   endpoint: string,
-  options: RequestInit = {}
+  options: RequestInit = {},
 ): Promise<{ data?: T; error?: string; status: number }> {
-  const url = `${basePath}${appendLocaleParam(endpoint)}`;
-  const isFormData = typeof FormData !== 'undefined' && options.body instanceof FormData;
+  const url = `${basePath}${appendLocaleParam(endpoint)}`
+  const isFormData = typeof FormData !== 'undefined' && options.body instanceof FormData
 
   const headers: Record<string, string> = {
-    ...(options.headers as Record<string, string> || {}),
-  };
+    ...((options.headers as Record<string, string>) || {}),
+  }
 
   if (!isFormData) {
-    headers['Content-Type'] = 'application/json';
+    headers['Content-Type'] = 'application/json'
   }
 
-  const method = (options.method ?? 'GET').toUpperCase();
+  const method = (options.method ?? 'GET').toUpperCase()
   if (method !== 'GET' && method !== 'HEAD') {
-    const csrf = getCsrfToken();
-    if (csrf) headers['x-csrf-token'] = csrf;
+    // Bootstrap the CSRF cookie lazily — covers consumers that sign users
+    // in via a custom Server Action (the Next.js App Router pattern) where
+    // the admin never hits `/auth/login` directly and so never receives the
+    // cookie from the login response. Without this, the very first mutation
+    // after sign-in 403s.
+    if (!getCsrfToken()) {
+      await ensureCsrfToken()
+    }
+    const csrf = getCsrfToken()
+    if (csrf) headers['x-csrf-token'] = csrf
   }
 
   try {
-    const res = await fetch(url, { ...options, headers, credentials: 'include' });
-    const json = await res.json().catch(() => ({}));
+    const res = await fetch(url, { ...options, headers, credentials: 'include' })
+    const json = await res.json().catch(() => ({}))
 
     if (!res.ok) {
-      return { error: json.error || `Request failed (${res.status})`, status: res.status };
+      return { error: json.error || `Request failed (${res.status})`, status: res.status }
     }
 
-    return { data: json.data ?? json, status: res.status };
+    return { data: json.data ?? json, status: res.status }
   } catch (err) {
-    return { error: err instanceof Error ? err.message : 'Network error', status: 0 };
+    return { error: err instanceof Error ? err.message : 'Network error', status: 0 }
   }
 }

package/src/lib/search.ts

@@ -1,24 +1,24 @@
-type SortDirection = 'asc' | 'desc';
+type SortDirection = 'asc' | 'desc'
 
 export interface SortConfig<K extends string = string> {
-  key: K;
-  direction: SortDirection;
+  key: K
+  direction: SortDirection
 }
 
 function toSearchText(value: unknown): string {
-  return String(value ?? '');
+  return String(value ?? '')
 }
 
 export function scoreRelevance(text: unknown, query: unknown): number {
-  if (!query) return 0;
-  const lower = toSearchText(text).toLowerCase();
-  const q = toSearchText(query).toLowerCase();
-  if (lower === q) return 100;
-  if (lower.startsWith(q)) return 80;
-  const wordBoundary = new RegExp(`\\b${q.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}`);
-  if (wordBoundary.test(lower)) return 60;
-  if (lower.includes(q)) return 40;
-  return 0;
+  if (!query) return 0
+  const lower = toSearchText(text).toLowerCase()
+  const q = toSearchText(query).toLowerCase()
+  if (lower === q) return 100
+  if (lower.startsWith(q)) return 80
+  const wordBoundary = new RegExp(`\\b${q.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}`)
+  if (wordBoundary.test(lower)) return 60
+  if (lower.includes(q)) return 40
+  return 0
 }
 
 export function sortByRelevance<T>(
@@ -26,12 +26,12 @@ export function sortByRelevance<T>(
   query: string,
   getSearchFields: (item: T) => unknown[],
 ): T[] {
-  if (!query.trim()) return items;
+  if (!query.trim()) return items
   return [...items].sort((a, b) => {
-    const scoreA = Math.max(...getSearchFields(a).map(f => scoreRelevance(f, query)));
-    const scoreB = Math.max(...getSearchFields(b).map(f => scoreRelevance(f, query)));
-    return scoreB - scoreA;
-  });
+    const scoreA = Math.max(...getSearchFields(a).map((f) => scoreRelevance(f, query)))
+    const scoreB = Math.max(...getSearchFields(b).map((f) => scoreRelevance(f, query)))
+    return scoreB - scoreA
+  })
 }
 
 export function sortByColumn<T>(
@@ -39,25 +39,21 @@ export function sortByColumn<T>(
   sortConfig: SortConfig | null,
   getValue: (item: T, key: string) => string | number,
 ): T[] {
-  if (!sortConfig) return items;
+  if (!sortConfig) return items
   return [...items].sort((a, b) => {
-    const aVal = getValue(a, sortConfig.key);
-    const bVal = getValue(b, sortConfig.key);
-    const cmp = typeof aVal === 'number' && typeof bVal === 'number'
-      ? aVal - bVal
-      : String(aVal).localeCompare(String(bVal));
-    return sortConfig.direction === 'asc' ? cmp : -cmp;
-  });
+    const aVal = getValue(a, sortConfig.key)
+    const bVal = getValue(b, sortConfig.key)
+    const cmp =
+      typeof aVal === 'number' && typeof bVal === 'number'
+        ? aVal - bVal
+        : String(aVal).localeCompare(String(bVal))
+    return sortConfig.direction === 'asc' ? cmp : -cmp
+  })
 }
 
-export function toggleSort<K extends string>(
-  current: SortConfig<K> | null,
-  key: K,
-): SortConfig<K> {
+export function toggleSort<K extends string>(current: SortConfig<K> | null, key: K): SortConfig<K> {
   if (current?.key === key) {
-    return current.direction === 'asc'
-      ? { key, direction: 'desc' }
-      : { key, direction: 'asc' };
+    return current.direction === 'asc' ? { key, direction: 'desc' } : { key, direction: 'asc' }
   }
-  return { key, direction: 'asc' };
+  return { key, direction: 'asc' }
 }

package/src/lib/useApiData.ts

@@ -1,20 +1,20 @@
-'use client';
-import { useState, useEffect, useCallback, useRef } from 'react';
-import { cmsApi } from './api.js';
+'use client'
+import { useState, useEffect, useCallback, useRef } from 'react'
+import { cmsApi } from './api.js'
 
 export interface UseApiDataOptions {
-  maxRetries?: number;
+  maxRetries?: number
   /** Base delay in ms for exponential backoff (default 1000). Actual delay = base * 2^attempt. */
-  retryBaseMs?: number;
+  retryBaseMs?: number
 }
 
 export interface UseApiDataResult<T> {
-  data: T | null;
-  loading: boolean;
-  error: string | null;
+  data: T | null
+  loading: boolean
+  error: string | null
   /** True when all retries are exhausted and the request permanently failed. */
-  exhausted: boolean;
-  refetch: () => void;
+  exhausted: boolean
+  refetch: () => void
 }
 
 export function useApiData<T>(
@@ -22,74 +22,77 @@ export function useApiData<T>(
   defaultValue: T | null = null,
   options: UseApiDataOptions = {},
 ): UseApiDataResult<T> {
-  const { maxRetries = 3, retryBaseMs = 1000 } = options;
-  const [data, setData] = useState<T | null>(defaultValue);
-  const [loading, setLoading] = useState(endpoint !== null);
-  const [error, setError] = useState<string | null>(null);
-  const [exhausted, setExhausted] = useState(false);
-  const abortRef = useRef<AbortController | null>(null);
-  const retryCountRef = useRef(0);
-  const retryTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const { maxRetries = 3, retryBaseMs = 1000 } = options
+  const [data, setData] = useState<T | null>(defaultValue)
+  const [loading, setLoading] = useState(endpoint !== null)
+  const [error, setError] = useState<string | null>(null)
+  const [exhausted, setExhausted] = useState(false)
+  const abortRef = useRef<AbortController | null>(null)
+  const retryCountRef = useRef(0)
+  const retryTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
 
-  const fetchData = useCallback(async (isRetry = false) => {
-    if (!endpoint) {
-      setLoading(false);
-      return;
-    }
+  const fetchData = useCallback(
+    async (isRetry = false) => {
+      if (!endpoint) {
+        setLoading(false)
+        return
+      }
 
-    abortRef.current?.abort();
-    const controller = new AbortController();
-    abortRef.current = controller;
+      abortRef.current?.abort()
+      const controller = new AbortController()
+      abortRef.current = controller
 
-    if (!isRetry) {
-      retryCountRef.current = 0;
-      setExhausted(false);
-    }
+      if (!isRetry) {
+        retryCountRef.current = 0
+        setExhausted(false)
+      }
 
-    setLoading(true);
-    setError(null);
+      setLoading(true)
+      setError(null)
 
-    const res = await cmsApi<T>(endpoint, { signal: controller.signal });
+      const res = await cmsApi<T>(endpoint, { signal: controller.signal })
 
-    if (controller.signal.aborted) return;
+      if (controller.signal.aborted) return
 
-    if (res.error) {
-      if (retryCountRef.current < maxRetries) {
-        const delay = retryBaseMs * Math.pow(2, retryCountRef.current);
-        retryCountRef.current += 1;
-        retryTimerRef.current = setTimeout(() => fetchData(true), delay);
-        return;
+      if (res.error) {
+        if (retryCountRef.current < maxRetries) {
+          const delay = retryBaseMs * Math.pow(2, retryCountRef.current)
+          retryCountRef.current += 1
+          retryTimerRef.current = setTimeout(() => fetchData(true), delay)
+          return
+        }
+        setError(res.error)
+        setExhausted(true)
+        setLoading(false)
+      } else {
+        setData(res.data ?? null)
+        setLoading(false)
+        retryCountRef.current = 0
       }
-      setError(res.error);
-      setExhausted(true);
-      setLoading(false);
-    } else {
-      setData(res.data ?? null);
-      setLoading(false);
-      retryCountRef.current = 0;
-    }
-  }, [endpoint, maxRetries, retryBaseMs]);
+    },
+    [endpoint, maxRetries, retryBaseMs],
+  )
 
   const manualRefetch = useCallback(() => {
     if (retryTimerRef.current) {
-      clearTimeout(retryTimerRef.current);
-      retryTimerRef.current = null;
+      clearTimeout(retryTimerRef.current)
+      retryTimerRef.current = null
     }
-    retryCountRef.current = 0;
-    setExhausted(false);
-    fetchData(false);
-  }, [fetchData]);
+    retryCountRef.current = 0
+    setExhausted(false)
+    fetchData(false)
+  }, [fetchData])
 
   useEffect(() => {
-    fetchData(false);
+    fetchData(false)
     return () => {
-      abortRef.current?.abort();
+      abortRef.current?.abort()
       if (retryTimerRef.current) {
-        clearTimeout(retryTimerRef.current);
-        retryTimerRef.current = null;
+        clearTimeout(retryTimerRef.current)
+        retryTimerRef.current = null
       }
-    };
-  }, [fetchData]);
+    }
+  }, [fetchData])
 
-  return { data, loading, error, exhausted, refetch: manualRefetch };
+  return { data, loading, error, exhausted, refetch: manualRefetch }
 }

package/src/lib/utils.ts

@@ -1,6 +1,6 @@
-import { clsx, type ClassValue } from 'clsx';
-import { twMerge } from 'tailwind-merge';
+import { clsx, type ClassValue } from 'clsx'
+import { twMerge } from 'tailwind-merge'
 
 export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
+  return twMerge(clsx(inputs))
 }

package/src/router/index.ts

@@ -1,81 +1,79 @@
-'use client';
+'use client'
 
-import { useState, useCallback, useEffect, useRef } from 'react';
+import { useState, useCallback, useEffect, useRef } from 'react'
 
 interface RouteParams {
-  [key: string]: string;
+  [key: string]: string
 }
 
 function stripBase(pathname: string, basePath: string): string {
   if (pathname.startsWith(basePath)) {
-    const rest = pathname.slice(basePath.length);
-    return rest === '' || rest === '/' ? '/' : rest.startsWith('/') ? rest : `/${rest}`;
+    const rest = pathname.slice(basePath.length)
+    return rest === '' || rest === '/' ? '/' : rest.startsWith('/') ? rest : `/${rest}`
   }
-  return '/';
+  return '/'
 }
 
 export function useAdminRouter(basePath = '/admin', serverPath = '/') {
-  const [currentPath, setCurrentPath] = useState(serverPath);
-  const baseRef = useRef(basePath);
-  baseRef.current = basePath;
+  const [currentPath, setCurrentPath] = useState(serverPath)
+  const baseRef = useRef(basePath)
+  baseRef.current = basePath
 
   useEffect(() => {
     if (typeof window !== 'undefined') {
-      const browserPath = stripBase(window.location.pathname, basePath);
+      const browserPath = stripBase(window.location.pathname, basePath)
       if (browserPath !== currentPath) {
-        setCurrentPath(browserPath);
+        setCurrentPath(browserPath)
       }
     }
-  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+  }, []) // eslint-disable-line react-hooks/exhaustive-deps
 
   useEffect(() => {
     function onPopState() {
-      setCurrentPath(stripBase(window.location.pathname, baseRef.current));
+      setCurrentPath(stripBase(window.location.pathname, baseRef.current))
     }
-    window.addEventListener('popstate', onPopState);
-    return () => window.removeEventListener('popstate', onPopState);
-  }, []);
+    window.addEventListener('popstate', onPopState)
+    return () => window.removeEventListener('popstate', onPopState)
+  }, [])
 
   const navigate = useCallback((path: string) => {
-    const normalizedPath = path.startsWith('/') ? path : `/${path}`;
-    setCurrentPath(normalizedPath);
+    const normalizedPath = path.startsWith('/') ? path : `/${path}`
+    setCurrentPath(normalizedPath)
 
-    const fullUrl = normalizedPath === '/'
-      ? baseRef.current
-      : `${baseRef.current}${normalizedPath}`;
-    window.history.pushState({ adminPath: normalizedPath }, '', fullUrl);
-  }, []);
+    const fullUrl = normalizedPath === '/' ? baseRef.current : `${baseRef.current}${normalizedPath}`
+    window.history.pushState({ adminPath: normalizedPath }, '', fullUrl)
+  }, [])
 
   const matchRoute = useCallback(
     (pattern: string): RouteParams | null => {
-      const patternParts = pattern.split('/').filter(Boolean);
-      const pathParts = currentPath.split('/').filter(Boolean);
+      const patternParts = pattern.split('/').filter(Boolean)
+      const pathParts = currentPath.split('/').filter(Boolean)
 
       if (pattern === '/' && pathParts.length === 0) {
-        return {};
+        return {}
       }
 
       if (patternParts.length !== pathParts.length) {
-        return null;
+        return null
       }
 
-      const params: RouteParams = {};
+      const params: RouteParams = {}
 
       for (let i = 0; i < patternParts.length; i++) {
-        const patternPart = patternParts[i]!;
-        const pathPart = pathParts[i]!;
+        const patternPart = patternParts[i]!
+        const pathPart = pathParts[i]!
 
         if (patternPart.startsWith(':')) {
-          params[patternPart.slice(1)] = pathPart;
+          params[patternPart.slice(1)] = pathPart
         } else if (patternPart !== pathPart) {
-          return null;
+          return null
         }
       }
 
-      return params;
+      return params
     },
     [currentPath],
-  );
+  )
 
-  return { currentPath, navigate, matchRoute };
+  return { currentPath, navigate, matchRoute }
 }

package/src/styles/build-input.css

@@ -6,6 +6,6 @@
  * Consumers import the compiled output:
  *   import '@actuate-media/cms-admin/styles/precompiled.css'
  */
-@import "tailwindcss";
+@import 'tailwindcss';
 @source "../../src/**/*.{ts,tsx}";
-@import "./theme.css";
+@import './theme.css';

package/src/styles/tailwind.css

@@ -8,4 +8,4 @@
  * If using this file, you must add @source to scan the admin components:
  *   @source "../../../node_modules/@actuate-media/cms-admin/src/**\/*.{ts,tsx}";
  */
-@import "./theme.css";
+@import './theme.css';

package/src/styles/theme.css

@@ -129,7 +129,13 @@
 
   .actuate-admin {
     @apply bg-background text-foreground;
-    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
+    font-family:
+      system-ui,
+      -apple-system,
+      BlinkMacSystemFont,
+      'Segoe UI',
+      Roboto,
+      sans-serif !important;
     font-size: var(--font-size);
     line-height: 1.5;
     isolation: isolate;