@actuate-media/cms-admin 0.7.1 → 0.7.3

package/src/components/SEOPanel.tsx

@@ -1,10 +1,12 @@
 'use client';
 
+import * as Select from '@radix-ui/react-select';
 import { useState, useMemo } from 'react';
 import {
   Search,
   RefreshCw,
   EyeOff,
+  Check,
   ChevronDown,
   ChevronUp,
   Globe,
@@ -24,6 +26,7 @@ export interface SEOData {
   metaDescription?: string;
   focusKeyphrase?: string;
   canonical?: string;
+  robotsPolicy?: 'inherit' | 'index-follow' | 'noindex-follow' | 'index-nofollow' | 'noindex-nofollow';
   noIndex?: boolean;
   noFollow?: boolean;
   ogTitle?: string;
@@ -45,6 +48,42 @@ export interface SEOPanelProps {
   siteUrl?: string;
 }
 
+const ROBOTS_POLICY_OPTIONS: Array<{ value: NonNullable<SEOData['robotsPolicy']>; label: string }> = [
+  { value: 'inherit', label: 'Inherit site default' },
+  { value: 'index-follow', label: 'Force index, follow' },
+  { value: 'noindex-follow', label: 'Force noindex, follow' },
+  { value: 'index-nofollow', label: 'Force index, nofollow' },
+  { value: 'noindex-nofollow', label: 'Force noindex, nofollow' },
+];
+
+function getRobotsPolicy(seoData: SEOData): NonNullable<SEOData['robotsPolicy']> {
+  if (seoData.robotsPolicy) return seoData.robotsPolicy;
+  if (typeof seoData.noIndex === 'boolean' || typeof seoData.noFollow === 'boolean') {
+    const noIndex = seoData.noIndex === true;
+    const noFollow = seoData.noFollow === true;
+    if (noIndex && noFollow) return 'noindex-nofollow';
+    if (noIndex) return 'noindex-follow';
+    if (noFollow) return 'index-nofollow';
+    return 'index-follow';
+  }
+  return 'inherit';
+}
+
+function robotsPolicyToBooleans(policy: NonNullable<SEOData['robotsPolicy']>): Pick<SEOData, 'noIndex' | 'noFollow'> {
+  switch (policy) {
+    case 'index-follow':
+      return { noIndex: false, noFollow: false };
+    case 'noindex-follow':
+      return { noIndex: true, noFollow: false };
+    case 'index-nofollow':
+      return { noIndex: false, noFollow: true };
+    case 'noindex-nofollow':
+      return { noIndex: true, noFollow: true };
+    default:
+      return { noIndex: undefined, noFollow: undefined };
+  }
+}
+
 interface SEOCheck {
   id: string;
   label: string;
@@ -459,6 +498,7 @@ export function SEOPanel({ title, slug, content = '', seoData, onChange, siteUrl
 
   const metaTitle = seoData.metaTitle ?? '';
   const metaDesc = seoData.metaDescription ?? '';
+  const robotsPolicy = getRobotsPolicy(seoData);
   const displayTitle = seoData.ogTitle || metaTitle || title || 'Page Title';
   const displayDesc = seoData.ogDescription || metaDesc || 'Add a meta description to see how this page will appear in search results.';
   const fleschLabel =
@@ -609,18 +649,49 @@ export function SEOPanel({ title, slug, content = '', seoData, onChange, siteUrl
           onToggle={toggleSection}
         >
           <div className="space-y-4">
-            <ToggleSwitch
-              label="No Index"
-              description="Prevent search engines from indexing this page"
-              checked={seoData.noIndex ?? false}
-              onChange={(v) => update({ noIndex: v })}
-            />
-            <ToggleSwitch
-              label="No Follow"
-              description="Prevent search engines from following links"
-              checked={seoData.noFollow ?? false}
-              onChange={(v) => update({ noFollow: v })}
-            />
+            <div>
+              <label id="robots-policy-label" className="mb-1 block text-xs font-medium text-muted-foreground">
+                Robots Policy
+              </label>
+              <Select.Root
+                value={robotsPolicy}
+                onValueChange={(value) => {
+                  const policy = value as NonNullable<SEOData['robotsPolicy']>;
+                  update({ robotsPolicy: policy, ...robotsPolicyToBooleans(policy) });
+                }}
+              >
+                <Select.Trigger
+                  aria-labelledby="robots-policy-label"
+                  className="flex w-full items-center justify-between rounded-lg border border-border bg-background px-3 py-1.5 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-primary"
+                >
+                  <Select.Value />
+                  <Select.Icon>
+                    <ChevronDown className="h-4 w-4 text-muted-foreground" />
+                  </Select.Icon>
+                </Select.Trigger>
+                <Select.Portal>
+                  <Select.Content className="z-50 overflow-hidden rounded-lg border border-border bg-card shadow-md">
+                    <Select.Viewport className="p-1">
+                      {ROBOTS_POLICY_OPTIONS.map((option) => (
+                        <Select.Item
+                          key={option.value}
+                          value={option.value}
+                          className="relative flex cursor-pointer select-none items-center rounded-md py-1.5 pl-8 pr-3 text-sm text-foreground outline-none hover:bg-muted focus:bg-muted"
+                        >
+                          <Select.ItemIndicator className="absolute left-2 inline-flex items-center">
+                            <Check className="h-4 w-4" />
+                          </Select.ItemIndicator>
+                          <Select.ItemText>{option.label}</Select.ItemText>
+                        </Select.Item>
+                      ))}
+                    </Select.Viewport>
+                  </Select.Content>
+                </Select.Portal>
+              </Select.Root>
+              <p className="mt-1 text-xs text-muted-foreground">
+                Use inheritance for most pages. Override only when a page needs different index/follow behavior.
+              </p>
+            </div>
           </div>
         </Section>
 

package/src/lib/search.ts

@@ -5,10 +5,14 @@ export interface SortConfig<K extends string = string> {
   direction: SortDirection;
 }
 
-export function scoreRelevance(text: string, query: string): number {
+function toSearchText(value: unknown): string {
+  return String(value ?? '');
+}
+
+export function scoreRelevance(text: unknown, query: unknown): number {
   if (!query) return 0;
-  const lower = text.toLowerCase();
-  const q = query.toLowerCase();
+  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, '\\$&')}`);
@@ -20,7 +24,7 @@ export function scoreRelevance(text: string, query: string): number {
 export function sortByRelevance<T>(
   items: T[],
   query: string,
-  getSearchFields: (item: T) => string[],
+  getSearchFields: (item: T) => unknown[],
 ): T[] {
   if (!query.trim()) return items;
   return [...items].sort((a, b) => {

package/src/views/DocumentEdit.tsx

@@ -85,7 +85,7 @@ export function DocumentEdit({ collectionSlug, documentId, config, onNavigate }:
 
   const SEO_FIELDS: (keyof SEOData)[] = [
     'metaTitle', 'metaDescription', 'focusKeyphrase', 'canonical',
-    'noIndex', 'noFollow', 'ogTitle', 'ogDescription', 'ogImage',
+    'robotsPolicy', 'noIndex', 'noFollow', 'ogTitle', 'ogDescription', 'ogImage',
     'twitterTitle', 'twitterDescription', 'twitterImage',
     'isCornerstone', 'schemaType',
   ];

package/src/views/Pages.tsx

@@ -52,6 +52,10 @@ function computeSeoScore(data: Record<string, unknown> | null | undefined): numb
   return score;
 }
 
+function textValue(value: unknown): string {
+  return String(value ?? '');
+}
+
 function SeoScoreBadge({ score }: { score: number }) {
   const color = score >= 80 ? 'bg-green-500' : score >= 60 ? 'bg-amber-500' : 'bg-red-500';
   return (
@@ -102,10 +106,10 @@ export function Pages({ onNavigate }: PagesProps) {
 
   const filteredAndSorted = useMemo(() => {
     let results = pages.filter((page: any) => {
-      const matchesSearch = (page.title ?? '').toLowerCase().includes(searchQuery.toLowerCase()) ||
-        (page.author ?? '').toLowerCase().includes(searchQuery.toLowerCase());
-      const matchesStatus = filterStatus === 'all' || (page.status ?? '').toLowerCase() === filterStatus.toLowerCase();
-      const matchesTemplate = filterTemplate === 'all' || (page.template ?? '').toLowerCase() === filterTemplate.toLowerCase();
+      const matchesSearch = textValue(page.title).toLowerCase().includes(searchQuery.toLowerCase()) ||
+        textValue(page.author).toLowerCase().includes(searchQuery.toLowerCase());
+      const matchesStatus = filterStatus === 'all' || textValue(page.status).toLowerCase() === filterStatus.toLowerCase();
+      const matchesTemplate = filterTemplate === 'all' || textValue(page.template).toLowerCase() === filterTemplate.toLowerCase();
       return matchesSearch && matchesStatus && matchesTemplate;
     });
 

package/src/views/ScriptTags.tsx

@@ -36,16 +36,18 @@ const PLACEMENT_COLORS: Record<string, string> = {
 };
 
 function scopeLabel(tag: ScriptTag): string {
-  if (tag.scope === 'site') return 'Entire Site';
-  if (tag.scope === 'parents') {
-    const count = tag.targetPaths?.length ?? 0;
+  const scope = String(tag.scope ?? '');
+  const targetPaths = Array.isArray(tag.targetPaths) ? tag.targetPaths : [];
+  if (scope === 'site') return 'Entire Site';
+  if (scope === 'parents') {
+    const count = targetPaths.length;
     return `${count} parent path${count !== 1 ? 's' : ''} + children`;
   }
-  if (tag.scope === 'urls') {
-    const count = tag.targetPaths?.length ?? 0;
+  if (scope === 'urls') {
+    const count = targetPaths.length;
     return `${count} URL${count !== 1 ? 's' : ''}`;
   }
-  return tag.scope;
+  return scope || 'Custom';
 }
 
 export function ScriptTags({ onNavigate }: ScriptTagsProps) {

package/src/views/Settings.tsx

@@ -22,6 +22,9 @@ export function Settings({ config, ..._props }: SettingsProps = {}) {
   const [siteUrl, setSiteUrl] = useState('https://example.com');
   const [language, setLanguage] = useState('en');
   const [timezone, setTimezone] = useState('UTC');
+  const [defaultNoIndex, setDefaultNoIndex] = useState(false);
+  const [defaultNoFollow, setDefaultNoFollow] = useState(false);
+  const [noIndexNonProduction, setNoIndexNonProduction] = useState(false);
   const [twoFactorEnabled, setTwoFactorEnabled] = useState(false);
   const [sessionTimeout, setSessionTimeout] = useState(false);
   const [ipWhitelist, setIpWhitelist] = useState(false);
@@ -61,6 +64,9 @@ export function Settings({ config, ..._props }: SettingsProps = {}) {
       setSiteUrl(data.siteUrl ?? '');
       setLanguage(data.language ?? 'en');
       setTimezone(data.timezone ?? 'UTC');
+      setDefaultNoIndex(data.defaultNoIndex ?? false);
+      setDefaultNoFollow(data.defaultNoFollow ?? false);
+      setNoIndexNonProduction(data.noIndexNonProduction ?? false);
       setTwoFactorEnabled(data.twoFactorEnabled ?? false);
       setSessionTimeout(data.sessionTimeout ?? false);
       setIpWhitelist(data.ipWhitelist ?? false);
@@ -87,6 +93,7 @@ export function Settings({ config, ..._props }: SettingsProps = {}) {
       method: 'PUT',
       body: JSON.stringify({
         siteTitle, tagline, siteUrl, language, timezone,
+        defaultNoIndex, defaultNoFollow, noIndexNonProduction,
         twoFactorEnabled, sessionTimeout, ipWhitelist,
         aiProvider, aiAltTags, aiMediaCategorize, aiMetaDescriptions,
         aiReadability, aiSchema, aiBrandVoice, aiWritingAssistant,
@@ -197,6 +204,32 @@ export function Settings({ config, ..._props }: SettingsProps = {}) {
               </div>
             </div>
           </div>
+          <div className="rounded-lg border border-border bg-card p-4">
+            <h3 className="mb-1 text-sm font-medium text-foreground">SEO & Robots Defaults</h3>
+            <p className="mb-4 text-xs text-muted-foreground">
+              Set the site-wide default for search engine indexing. Individual pages can inherit or override these rules in their SEO panel.
+            </p>
+            <div className="space-y-4">
+              <ToggleSetting
+                label="Default No Index"
+                description="Ask search engines not to index pages unless a page explicitly allows indexing"
+                checked={defaultNoIndex}
+                onChange={setDefaultNoIndex}
+              />
+              <ToggleSetting
+                label="Default No Follow"
+                description="Ask search engines not to follow page links unless a page explicitly allows following"
+                checked={defaultNoFollow}
+                onChange={setDefaultNoFollow}
+              />
+              <ToggleSetting
+                label="Noindex Non-Production Environments"
+                description="Force noindex when the deployed environment is not production"
+                checked={noIndexNonProduction}
+                onChange={setNoIndexNonProduction}
+              />
+            </div>
+          </div>
         </Tabs.Content>
 
         <Tabs.Content value="appearance" className="space-y-4">
@@ -513,14 +546,16 @@ function ToggleSetting({
   return (
     <div className="flex items-center justify-between gap-4">
       <div className="flex-1">
-        <label className="text-sm font-medium text-gray-700">{label}</label>
-        <p className="mt-0.5 text-xs text-gray-500">{description}</p>
+        <label className="text-sm font-medium text-foreground">{label}</label>
+        <p className="mt-0.5 text-xs text-muted-foreground">{description}</p>
       </div>
       <button
         type="button"
+        role="switch"
+        aria-checked={checked}
+        aria-label={label}
         onClick={() => onChange(!checked)}
-        className={`relative h-6 w-11 shrink-0 rounded-full transition-colors ${checked ? 'bg-blue-600' : 'bg-gray-300'}`}
-        aria-pressed={checked}
+        className={`relative h-6 w-11 shrink-0 rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-primary ${checked ? 'bg-primary' : 'bg-muted'}`}
       >
         <span
           className={`absolute top-0.5 block h-5 w-5 rounded-full bg-white transition-transform ${