@actuate-media/cms-admin 0.1.4 → 0.2.0

package/src/fields/block-types.ts

@@ -0,0 +1,95 @@
+export interface BlockTypeDefinition {
+  type: string;
+  label: string;
+  icon: string;
+  description: string;
+  fields: { name: string; type: string; label: string; required?: boolean; options?: { value: string; label: string }[] }[];
+}
+
+export const PRESET_BLOCKS: BlockTypeDefinition[] = [
+  {
+    type: 'hero',
+    label: 'Hero',
+    icon: 'layout',
+    description: 'Full-width hero section with heading and CTA',
+    fields: [
+      { name: 'heading', type: 'text', label: 'Heading', required: true },
+      { name: 'subheading', type: 'text', label: 'Subheading' },
+      { name: 'buttonText', type: 'text', label: 'Button Text' },
+      { name: 'buttonUrl', type: 'text', label: 'Button URL' },
+      { name: 'backgroundImage', type: 'media', label: 'Background Image' },
+      { name: 'alignment', type: 'select', label: 'Alignment', options: [
+        { value: 'left', label: 'Left' },
+        { value: 'center', label: 'Center' },
+        { value: 'right', label: 'Right' },
+      ]},
+    ],
+  },
+  {
+    type: 'cta',
+    label: 'Call to Action',
+    icon: 'megaphone',
+    description: 'Attention-grabbing CTA section',
+    fields: [
+      { name: 'heading', type: 'text', label: 'Heading', required: true },
+      { name: 'description', type: 'text', label: 'Description' },
+      { name: 'buttonText', type: 'text', label: 'Button Text', required: true },
+      { name: 'buttonUrl', type: 'text', label: 'Button URL', required: true },
+      { name: 'style', type: 'select', label: 'Style', options: [
+        { value: 'primary', label: 'Primary' },
+        { value: 'secondary', label: 'Secondary' },
+        { value: 'outline', label: 'Outline' },
+      ]},
+    ],
+  },
+  {
+    type: 'columns',
+    label: 'Columns',
+    icon: 'columns',
+    description: '2 or 3 column layout with rich text',
+    fields: [
+      { name: 'columnCount', type: 'select', label: 'Columns', options: [
+        { value: '2', label: '2 Columns' },
+        { value: '3', label: '3 Columns' },
+      ]},
+      { name: 'column1', type: 'richText', label: 'Column 1' },
+      { name: 'column2', type: 'richText', label: 'Column 2' },
+      { name: 'column3', type: 'richText', label: 'Column 3' },
+    ],
+  },
+  {
+    type: 'imageText',
+    label: 'Image + Text',
+    icon: 'image',
+    description: 'Image alongside text content',
+    fields: [
+      { name: 'image', type: 'media', label: 'Image', required: true },
+      { name: 'content', type: 'richText', label: 'Content', required: true },
+      { name: 'imagePosition', type: 'select', label: 'Image Position', options: [
+        { value: 'left', label: 'Left' },
+        { value: 'right', label: 'Right' },
+      ]},
+    ],
+  },
+  {
+    type: 'quote',
+    label: 'Quote',
+    icon: 'quote',
+    description: 'Blockquote with attribution',
+    fields: [
+      { name: 'text', type: 'text', label: 'Quote Text', required: true },
+      { name: 'author', type: 'text', label: 'Author' },
+      { name: 'role', type: 'text', label: 'Author Role' },
+    ],
+  },
+  {
+    type: 'video',
+    label: 'Video Embed',
+    icon: 'play',
+    description: 'Embedded video from YouTube or Vimeo',
+    fields: [
+      { name: 'url', type: 'text', label: 'Video URL', required: true },
+      { name: 'caption', type: 'text', label: 'Caption' },
+    ],
+  },
+];

package/src/fields/index.ts

@@ -0,0 +1,17 @@
+export { FieldRenderer } from './FieldRenderer.js';
+export type { FieldRendererProps, FieldDefinition } from './FieldRenderer.js';
+export { TextField } from './TextField.js';
+export { RichTextField } from './RichTextField.js';
+export { SlugField } from './SlugField.js';
+export { SelectField } from './SelectField.js';
+export { MediaField } from './MediaField.js';
+export { RelationshipField } from './RelationshipField.js';
+export { DateField } from './DateField.js';
+export { ToggleField } from './ToggleField.js';
+export { ArrayField } from './ArrayField.js';
+export { BlockBuilderField } from './BlockBuilderField.js';
+export { PRESET_BLOCKS } from './block-types.js';
+export type { BlockTypeDefinition } from './block-types.js';
+export { GroupField } from './GroupField.js';
+export { NavBuilderField } from './NavBuilderField.js';
+export { NumberField } from './NumberField.js';

package/src/hooks/useContentLock.ts

@@ -0,0 +1,52 @@
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+
+interface ContentLock {
+  lockedBy: string | null;
+  lockedAt: Date | null;
+  isLocked: boolean;
+  isLockedByMe: boolean;
+}
+
+export function useContentLock(documentId: string | undefined, userId: string): ContentLock & {
+  acquireLock: () => Promise<boolean>;
+  releaseLock: () => Promise<void>;
+} {
+  const [lock, setLock] = useState<ContentLock>({
+    lockedBy: null,
+    lockedAt: null,
+    isLocked: false,
+    isLockedByMe: false,
+  });
+
+  const acquireLock = useCallback(async () => {
+    if (!documentId) return false;
+    setLock({
+      lockedBy: userId,
+      lockedAt: new Date(),
+      isLocked: true,
+      isLockedByMe: true,
+    });
+    return true;
+  }, [documentId, userId]);
+
+  const releaseLock = useCallback(async () => {
+    setLock({
+      lockedBy: null,
+      lockedAt: null,
+      isLocked: false,
+      isLockedByMe: false,
+    });
+  }, []);
+
+  useEffect(() => {
+    return () => {
+      if (lock.isLockedByMe) {
+        releaseLock();
+      }
+    };
+  }, [lock.isLockedByMe, releaseLock]);
+
+  return { ...lock, acquireLock, releaseLock };
+}

package/src/hooks/useDebounce.ts

@@ -0,0 +1,14 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+
+export function useDebounce<T>(value: T, delayMs: number): T {
+  const [debouncedValue, setDebouncedValue] = useState(value);
+
+  useEffect(() => {
+    const timer = setTimeout(() => setDebouncedValue(value), delayMs);
+    return () => clearTimeout(timer);
+  }, [value, delayMs]);
+
+  return debouncedValue;
+}

package/src/hooks/useKeyboardShortcuts.ts

@@ -0,0 +1,32 @@
+'use client';
+
+import { useEffect } from 'react';
+
+interface ShortcutMap {
+  [combo: string]: (e: KeyboardEvent) => void;
+}
+
+export function useKeyboardShortcuts(shortcuts: ShortcutMap) {
+  useEffect(() => {
+    function handleKeyDown(e: KeyboardEvent) {
+      const meta = e.metaKey || e.ctrlKey;
+      const parts: string[] = [];
+
+      if (meta) parts.push('mod');
+      if (e.shiftKey) parts.push('shift');
+      if (e.altKey) parts.push('alt');
+      parts.push(e.key.toLowerCase());
+
+      const combo = parts.join('+');
+      const handler = shortcuts[combo];
+
+      if (handler) {
+        e.preventDefault();
+        handler(e);
+      }
+    }
+
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [shortcuts]);
+}

package/src/index.ts

@@ -0,0 +1,55 @@
+export { AdminRoot } from './AdminRoot.js';
+export type { AdminRootProps } from './AdminRoot.js';
+
+export { Layout } from './layout/Layout.js';
+export type { LayoutProps } from './layout/Layout.js';
+export { Sidebar } from './layout/Sidebar.js';
+export type { SidebarProps } from './layout/Sidebar.js';
+export { Header } from './layout/Header.js';
+export type { HeaderProps } from './layout/Header.js';
+
+export { Dashboard } from './views/Dashboard.js';
+export { Posts } from './views/Posts.js';
+export { Pages } from './views/Pages.js';
+export { PostEditor } from './views/PostEditor.js';
+export { PageEditor } from './views/PageEditor.js';
+export { MediaBrowser } from './views/MediaBrowser.js';
+export { Forms } from './views/Forms.js';
+export { FormEditor } from './views/FormEditor.js';
+export type { FormEditorProps } from './views/FormEditor.js';
+export { FormSubmissions } from './views/FormSubmissions.js';
+export { Redirects } from './views/Redirects.js';
+export { Users } from './views/Users.js';
+export { Settings } from './views/Settings.js';
+export { SEO } from './views/SEO.js';
+export { SetupWizard } from './views/SetupWizard.js';
+export type { SetupWizardProps } from './views/SetupWizard.js';
+export { Login } from './views/Login.js';
+export type { LoginProps, CaptchaConfig } from './views/Login.js';
+export { CollectionList } from './views/CollectionList.js';
+export { DocumentEdit } from './views/DocumentEdit.js';
+
+export { Breadcrumbs } from './components/Breadcrumbs.js';
+export { CommandPalette } from './components/CommandPalette.js';
+export { ErrorBoundary } from './components/ErrorBoundary.js';
+export { FolderTree } from './components/FolderTree.js';
+export type { FolderTreeProps, FolderNode, FolderSelection, SmartFolder } from './components/FolderTree.js';
+export { TipTapEditor } from './components/TipTapEditor.js';
+export { SEOPanel } from './components/SEOPanel.js';
+export type { SEOData, SEOPanelProps } from './components/SEOPanel.js';
+export { LivePreview } from './components/LivePreview.js';
+export { VersionHistory } from './components/VersionHistory.js';
+export type { VersionHistoryProps } from './components/VersionHistory.js';
+export { MediaPickerModal } from './components/MediaPickerModal.js';
+export type { MediaPickerModalProps } from './components/MediaPickerModal.js';
+export { ThemeProvider, useTheme } from './components/ThemeProvider.js';
+export { FocalPointPicker } from './components/FocalPointPicker.js';
+export { PresenceIndicator } from './components/PresenceIndicator.js';
+export { LocaleProvider, useLocale } from './components/LocaleProvider.js';
+export type { LocaleProviderProps } from './components/LocaleProvider.js';
+export { LocaleSwitcher } from './components/LocaleSwitcher.js';
+export { useKeyboardShortcuts } from './hooks/useKeyboardShortcuts.js';
+
+export { cmsApi, setApiBase, ensureCsrfToken } from './lib/api.js';
+export { useApiData } from './lib/useApiData.js';
+export type { UseApiDataResult } from './lib/useApiData.js';

package/src/layout/Header.tsx

@@ -0,0 +1,135 @@
+'use client';
+
+import { useState } from 'react';
+import { Search, Bell, User, ChevronDown, Menu, Sun, Moon } from 'lucide-react';
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
+import { CommandPalette } from '../components/CommandPalette.js';
+import { useTheme } from '../components/ThemeProvider.js';
+import { LocaleSwitcher } from '../components/LocaleSwitcher.js';
+
+export interface HeaderProps {
+  onToggleSidebar: () => void;
+  session?: any;
+  onNavigate: (path: string) => void;
+}
+
+export function Header({ onToggleSidebar, session, onNavigate }: HeaderProps) {
+  const [showCommandPalette, setShowCommandPalette] = useState(false);
+  const [searchQuery, setSearchQuery] = useState('');
+  const { resolvedTheme, setTheme } = useTheme();
+
+  const toggleTheme = () => {
+    setTheme(resolvedTheme === 'dark' ? 'light' : 'dark');
+  };
+
+  return (
+    <>
+      <header className="h-14 border-b border-border bg-background flex items-center justify-between px-4 gap-4">
+        <button
+          onClick={onToggleSidebar}
+          className="lg:hidden p-2 hover:bg-accent rounded-lg transition-colors"
+          aria-label="Toggle sidebar"
+        >
+          <Menu className="w-5 h-5 text-foreground" strokeWidth={2} />
+        </button>
+
+        <div className="flex items-center lg:hidden">
+          <span className="text-lg font-semibold text-foreground">Actuate</span>
+        </div>
+
+        <div className="flex-1" />
+
+        <div className="flex items-center gap-2 sm:gap-3">
+          <div className="hidden md:block relative">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground pointer-events-none" />
+            <input
+              type="text"
+              placeholder="Search... (⌘K)"
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              onFocus={() => setShowCommandPalette(true)}
+              className="w-64 pl-9 pr-3 py-1.5 text-sm border border-border rounded-lg bg-input-background text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent"
+            />
+          </div>
+
+          <button
+            onClick={() => setShowCommandPalette(true)}
+            className="md:hidden p-2 hover:bg-accent rounded-lg transition-colors"
+            aria-label="Search"
+          >
+            <Search className="w-5 h-5 text-muted-foreground" />
+          </button>
+
+          <LocaleSwitcher />
+
+          <button
+            onClick={toggleTheme}
+            className="p-2 hover:bg-accent rounded-lg transition-colors"
+            aria-label="Toggle theme"
+          >
+            {resolvedTheme === 'dark' ? (
+              <Sun className="w-5 h-5 text-muted-foreground" />
+            ) : (
+              <Moon className="w-5 h-5 text-muted-foreground" />
+            )}
+          </button>
+
+          <button className="p-2 hover:bg-accent rounded-lg transition-colors relative" aria-label="Notifications">
+            <Bell className="w-5 h-5 text-muted-foreground" />
+            <span className="absolute top-1.5 right-1.5 w-2 h-2 bg-destructive rounded-full" />
+          </button>
+
+          <DropdownMenu.Root>
+            <DropdownMenu.Trigger asChild>
+              <button className="flex items-center gap-2 p-1.5 hover:bg-accent rounded-lg transition-colors">
+                <div className="w-8 h-8 bg-linear-to-br from-blue-500 to-purple-600 rounded-full flex items-center justify-center">
+                  <span className="text-white text-sm font-medium">
+                    {session?.user?.name?.charAt(0)?.toUpperCase() ?? 'A'}
+                  </span>
+                </div>
+                <ChevronDown className="w-4 h-4 text-muted-foreground hidden sm:block" />
+              </button>
+            </DropdownMenu.Trigger>
+
+            <DropdownMenu.Portal>
+              <DropdownMenu.Content
+                className="min-w-[200px] bg-popover text-popover-foreground rounded-lg border border-border shadow-lg p-1 z-50"
+                align="end"
+                sideOffset={5}
+              >
+                <div className="px-3 py-2 border-b border-border">
+                  <p className="text-sm font-medium">
+                    {session?.user?.name ?? 'Admin User'}
+                  </p>
+                  <p className="text-xs text-muted-foreground">
+                    {session?.user?.email ?? 'admin@example.com'}
+                  </p>
+                </div>
+                <DropdownMenu.Item className="flex items-center gap-2 px-3 py-2 text-sm hover:bg-accent rounded cursor-pointer outline-none">
+                  <User className="w-4 h-4" />
+                  Profile
+                </DropdownMenu.Item>
+                <DropdownMenu.Item
+                  className="flex items-center gap-2 px-3 py-2 text-sm hover:bg-accent rounded cursor-pointer outline-none"
+                  onSelect={() => onNavigate('/settings')}
+                >
+                  Settings
+                </DropdownMenu.Item>
+                <DropdownMenu.Separator className="h-px bg-border my-1" />
+                <DropdownMenu.Item className="flex items-center gap-2 px-3 py-2 text-sm text-destructive hover:bg-accent rounded cursor-pointer outline-none">
+                  Logout
+                </DropdownMenu.Item>
+              </DropdownMenu.Content>
+            </DropdownMenu.Portal>
+          </DropdownMenu.Root>
+        </div>
+      </header>
+
+      <CommandPalette
+        open={showCommandPalette}
+        onOpenChange={setShowCommandPalette}
+        onNavigate={onNavigate}
+      />
+    </>
+  );
+}

package/src/layout/Layout.tsx

@@ -0,0 +1,77 @@
+'use client';
+
+import { useState, useEffect, type ReactNode } from 'react';
+import { Sidebar } from './Sidebar.js';
+import { Header } from './Header.js';
+import { Breadcrumbs } from '../components/Breadcrumbs.js';
+import { Toaster } from 'sonner';
+
+export interface LayoutProps {
+  config: any;
+  session: any;
+  currentPath: string;
+  onNavigate: (path: string) => void;
+  children: ReactNode;
+}
+
+export function Layout({ config, session, currentPath, onNavigate, children }: LayoutProps) {
+  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
+  const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
+
+  useEffect(() => {
+    setMobileSidebarOpen(false);
+  }, [currentPath]);
+
+  useEffect(() => {
+    const handleResize = () => {
+      if (window.innerWidth < 1024) {
+        setMobileSidebarOpen(false);
+      }
+    };
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  return (
+    <div className="h-screen flex overflow-hidden bg-background text-foreground">
+      <Toaster position="bottom-right" />
+
+      {mobileSidebarOpen && (
+        <div
+          className="fixed inset-0 bg-black/50 z-40 lg:hidden"
+          onClick={() => setMobileSidebarOpen(false)}
+        />
+      )}
+
+      <div
+        className={`fixed lg:static inset-y-0 left-0 z-50 transform transition-transform duration-300 lg:transform-none ${
+          mobileSidebarOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'
+        }`}
+      >
+        <Sidebar
+          collapsed={sidebarCollapsed}
+          onToggleCollapse={() => setSidebarCollapsed(!sidebarCollapsed)}
+          currentPath={currentPath}
+          onNavigate={onNavigate}
+          config={config}
+        />
+      </div>
+
+      <div className="flex-1 flex flex-col overflow-hidden">
+        <Header
+          onToggleSidebar={() => setMobileSidebarOpen(!mobileSidebarOpen)}
+          session={session}
+          onNavigate={onNavigate}
+        />
+
+        <Breadcrumbs currentPath={currentPath} onNavigate={onNavigate} />
+
+        <main className="flex-1 overflow-auto bg-background">
+          <div className="h-full">
+            {children}
+          </div>
+        </main>
+      </div>
+    </div>
+  );
+}