@actuate-media/cms-admin 0.1.4 → 0.2.1

package/src/__tests__/lib/utils.test.ts

@@ -0,0 +1,19 @@
+import { describe, it, expect } from 'vitest';
+import { cn } from '../../lib/utils.js';
+
+describe('cn', () => {
+  it('merges multiple class names into a single string', () => {
+    expect(cn('foo', 'bar')).toBe('foo bar');
+    expect(cn('a', 'b', 'c')).toBe('a b c');
+  });
+
+  it('omits falsy conditional classes', () => {
+    expect(cn('base', false && 'hidden', 'visible')).toBe('base visible');
+    expect(cn('x', undefined, null, 0, 'y')).toBe('x y');
+  });
+
+  it('resolves conflicting Tailwind utilities in favor of the last one', () => {
+    expect(cn('p-4', 'p-2')).toBe('p-2');
+    expect(cn('text-sm', 'text-lg')).toBe('text-lg');
+  });
+});

package/src/__tests__/router/match-route.test.ts

@@ -0,0 +1,47 @@
+import { describe, it, expect } from 'vitest';
+
+function matchRoute(currentPath: string, pattern: string): Record<string, string> | null {
+  const patternParts = pattern.split('/').filter(Boolean);
+  const pathParts = currentPath.split('/').filter(Boolean);
+  if (pattern === '/' && pathParts.length === 0) return {};
+  if (patternParts.length !== pathParts.length) return null;
+  const params: Record<string, string> = {};
+  for (let i = 0; i < patternParts.length; i++) {
+    const patternPart = patternParts[i]!;
+    const pathPart = pathParts[i]!;
+    if (patternPart.startsWith(':')) {
+      params[patternPart.slice(1)] = pathPart;
+    } else if (patternPart !== pathPart) {
+      return null;
+    }
+  }
+  return params;
+}
+
+describe('matchRoute', () => {
+  it('matches the root pattern against an empty path', () => {
+    expect(matchRoute('/', '/')).toEqual({});
+  });
+
+  it('matches static multi-segment paths', () => {
+    expect(matchRoute('/collections/posts', '/collections/posts')).toEqual({});
+  });
+
+  it('extracts named parameters from dynamic segments', () => {
+    expect(matchRoute('/collections/posts/abc-123', '/collections/posts/:id')).toEqual({
+      id: 'abc-123',
+    });
+    expect(
+      matchRoute('/users/u1/settings', '/users/:userId/settings'),
+    ).toEqual({ userId: 'u1' });
+  });
+
+  it('returns null when a static segment does not match', () => {
+    expect(matchRoute('/collections/pages', '/collections/posts')).toBeNull();
+  });
+
+  it('returns null when segment counts differ', () => {
+    expect(matchRoute('/a', '/a/b')).toBeNull();
+    expect(matchRoute('/a/b', '/a')).toBeNull();
+  });
+});

package/src/__tests__/router/strip-base.test.ts

@@ -0,0 +1,30 @@
+import { describe, it, expect } from 'vitest';
+
+// Copy of the internal stripBase function for testing
+function stripBase(pathname: string, basePath: string): string {
+  if (pathname.startsWith(basePath)) {
+    const rest = pathname.slice(basePath.length);
+    return rest === '' || rest === '/' ? '/' : rest.startsWith('/') ? rest : `/${rest}`;
+  }
+  return '/';
+}
+
+describe('stripBase', () => {
+  it('strips the base path and returns the remainder with a leading slash', () => {
+    expect(stripBase('/admin/dashboard', '/admin')).toBe('/dashboard');
+    expect(stripBase('/admin/collections/posts', '/admin')).toBe('/collections/posts');
+  });
+
+  it('returns root when the pathname is exactly the base or base plus trailing slash', () => {
+    expect(stripBase('/admin', '/admin')).toBe('/');
+    expect(stripBase('/admin/', '/admin')).toBe('/');
+  });
+
+  it('returns root when the pathname does not start with the base path', () => {
+    expect(stripBase('/public/page', '/admin')).toBe('/');
+  });
+
+  it('normalizes remainder that lacks a leading slash', () => {
+    expect(stripBase('/adminfoo', '/admin')).toBe('/foo');
+  });
+});

package/src/components/Breadcrumbs.tsx

@@ -0,0 +1,92 @@
+'use client';
+
+import { ChevronRight, Home } from 'lucide-react';
+
+const LABEL_MAP: Record<string, string> = {
+  posts: 'Posts',
+  pages: 'Pages',
+  media: 'Media Library',
+  forms: 'Forms',
+  seo: 'SEO',
+  redirects: 'Redirects',
+  canonicals: 'Canonicalization',
+  links: 'Link Health',
+  users: 'Users',
+  settings: 'Settings',
+  collections: 'Collections',
+  submissions: 'Submissions',
+  new: 'New',
+  edit: 'Edit',
+};
+
+function labelFor(segment: string): string {
+  return LABEL_MAP[segment] ?? segment.replace(/[-_]/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
+}
+
+function isId(segment: string): boolean {
+  return /^\d+$/.test(segment) || /^[0-9a-f]{8,}$/i.test(segment);
+}
+
+export interface BreadcrumbsProps {
+  currentPath: string;
+  onNavigate: (path: string) => void;
+}
+
+export function Breadcrumbs({ currentPath, onNavigate }: BreadcrumbsProps) {
+  const segments = currentPath.split('/').filter(Boolean);
+
+  if (segments.length === 0) return null;
+
+  const crumbs: { label: string; path: string }[] = [];
+  let accumulated = '';
+
+  for (let i = 0; i < segments.length; i++) {
+    const seg = segments[i]!;
+    accumulated += `/${seg}`;
+
+    let label: string;
+    if (isId(seg)) {
+      const parentLabel = i > 0 ? labelFor(segments[i - 1]!) : '';
+      label = parentLabel
+        ? `Edit ${parentLabel.replace(/s$/, '')}`
+        : `#${seg}`;
+    } else {
+      label = labelFor(seg);
+    }
+
+    crumbs.push({ label, path: accumulated });
+  }
+
+  return (
+    <nav aria-label="Breadcrumb" className="flex items-center gap-1 text-sm py-2.5 px-4 bg-white border-b border-gray-200 overflow-x-auto">
+      <button
+        type="button"
+        onClick={() => onNavigate('/')}
+        className="flex items-center gap-1 text-gray-500 hover:text-blue-600 transition-colors shrink-0"
+      >
+        <Home className="w-3.5 h-3.5" />
+        <span className="hidden sm:inline">Dashboard</span>
+      </button>
+
+      {crumbs.map((crumb, i) => {
+        const isLast = i === crumbs.length - 1;
+        return (
+          <span key={crumb.path} className="flex items-center gap-1 shrink-0">
+            <ChevronRight className="w-3.5 h-3.5 text-gray-400" />
+            {isLast ? (
+              <span className="font-medium text-gray-900">{crumb.label}</span>
+            ) : (
+              <button
+                type="button"
+                onClick={() => onNavigate(crumb.path)}
+                className="text-gray-500 hover:text-blue-600 transition-colors"
+              >
+                {crumb.label}
+              </button>
+            )}
+          </span>
+        );
+      })}
+    </nav>
+  );
+}

package/src/components/CommandPalette.tsx

@@ -0,0 +1,384 @@
+'use client';
+
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { Command } from 'cmdk';
+import {
+  Search,
+  FileText,
+  File,
+  Image,
+  Settings,
+  LayoutDashboard,
+  Plus,
+  Users,
+  ArrowRightLeft,
+  ClipboardList,
+  Upload,
+  BarChart3,
+  Clock,
+} from 'lucide-react';
+import { cmsApi } from '../lib/api.js';
+
+interface SearchResultDocument {
+  id: string;
+  title: string | null;
+  slug: string | null;
+  collection: string;
+  status: string;
+  updatedAt: string;
+}
+
+interface SearchResultMedia {
+  id: string;
+  filename: string;
+  altText: string | null;
+  mimeType: string;
+  storageKey: string;
+}
+
+interface SearchResultUser {
+  id: string;
+  name: string;
+  email: string;
+  role: string;
+}
+
+interface RecentItem {
+  id: string;
+  label: string;
+  path: string;
+  type: 'document' | 'media' | 'user' | 'action';
+}
+
+const RECENT_ITEMS_KEY = 'actuate-recent-items';
+const MAX_RECENT_ITEMS = 5;
+
+function loadRecentItems(): RecentItem[] {
+  try {
+    const raw = localStorage.getItem(RECENT_ITEMS_KEY);
+    return raw ? JSON.parse(raw) : [];
+  } catch {
+    return [];
+  }
+}
+
+function saveRecentItem(item: RecentItem): void {
+  try {
+    const items = loadRecentItems().filter((i) => i.id !== item.id);
+    items.unshift(item);
+    localStorage.setItem(RECENT_ITEMS_KEY, JSON.stringify(items.slice(0, MAX_RECENT_ITEMS)));
+  } catch { /* localStorage unavailable */ }
+}
+
+const staticActions = [
+  { id: 'action-new-page', label: 'Create new page', icon: Plus, action: '/pages/new' },
+  { id: 'action-new-post', label: 'Create new post', icon: Plus, action: '/posts/new' },
+  { id: 'action-upload-media', label: 'Upload media', icon: Upload, action: '/media?upload=true' },
+  { id: 'action-view-seo', label: 'View SEO', icon: BarChart3, action: '/seo' },
+  { id: 'action-open-settings', label: 'Open settings', icon: Settings, action: '/settings' },
+];
+
+const navigationCommands = [
+  { id: 'nav-dashboard', label: 'Dashboard', icon: LayoutDashboard, action: '/' },
+  { id: 'nav-posts', label: 'Posts', icon: FileText, action: '/posts' },
+  { id: 'nav-pages', label: 'Pages', icon: File, action: '/pages' },
+  { id: 'nav-media', label: 'Media', icon: Image, action: '/media' },
+  { id: 'nav-forms', label: 'Forms', icon: ClipboardList, action: '/forms' },
+  { id: 'nav-redirects', label: 'Redirects', icon: ArrowRightLeft, action: '/redirects' },
+  { id: 'nav-users', label: 'Users', icon: Users, action: '/users' },
+  { id: 'nav-settings', label: 'Settings', icon: Settings, action: '/settings' },
+];
+
+export interface CommandPaletteProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onNavigate: (path: string) => void;
+}
+
+export function CommandPalette({ open, onOpenChange, onNavigate }: CommandPaletteProps) {
+  const [search, setSearch] = useState('');
+  const [documents, setDocuments] = useState<SearchResultDocument[]>([]);
+  const [media, setMedia] = useState<SearchResultMedia[]>([]);
+  const [users, setUsers] = useState<SearchResultUser[]>([]);
+  const [recentItems, setRecentItems] = useState<RecentItem[]>([]);
+  const [loading, setLoading] = useState(false);
+  const debounceRef = useRef<ReturnType<typeof setTimeout>>(undefined);
+
+  useEffect(() => {
+    const down = (e: KeyboardEvent) => {
+      if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault();
+        onOpenChange(!open);
+      }
+    };
+    document.addEventListener('keydown', down);
+    return () => document.removeEventListener('keydown', down);
+  }, [open, onOpenChange]);
+
+  useEffect(() => {
+    if (open) {
+      setRecentItems(loadRecentItems());
+    }
+  }, [open]);
+
+  const fetchResults = useCallback(async (query: string) => {
+    if (!query.trim()) {
+      setDocuments([]);
+      setMedia([]);
+      setUsers([]);
+      return;
+    }
+    setLoading(true);
+    try {
+      const res = await cmsApi<{ documents: SearchResultDocument[]; media: SearchResultMedia[]; users: SearchResultUser[] }>(
+        `/search/global?q=${encodeURIComponent(query)}`,
+      );
+      if (res.data) {
+        setDocuments(res.data.documents ?? []);
+        setMedia(res.data.media ?? []);
+        setUsers(res.data.users ?? []);
+      }
+    } catch {
+      setDocuments([]);
+      setMedia([]);
+      setUsers([]);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (debounceRef.current) clearTimeout(debounceRef.current);
+    if (!search.trim()) {
+      setDocuments([]);
+      setMedia([]);
+      setUsers([]);
+      return;
+    }
+    debounceRef.current = setTimeout(() => fetchResults(search), 250);
+    return () => { if (debounceRef.current) clearTimeout(debounceRef.current); };
+  }, [search, fetchResults]);
+
+  const handleSelect = (action: string, recent?: RecentItem) => {
+    if (recent) {
+      saveRecentItem(recent);
+    }
+    onNavigate(action);
+    onOpenChange(false);
+    setSearch('');
+  };
+
+  if (!open) return null;
+
+  const hasQuery = search.trim().length > 0;
+  const hasResults = documents.length > 0 || media.length > 0 || users.length > 0;
+
+  return (
+    <div
+      className="fixed inset-0 z-50 bg-black/50 flex items-start justify-center pt-[20vh] px-4"
+      onClick={() => {
+        onOpenChange(false);
+        setSearch('');
+      }}
+      role="presentation"
+    >
+      <div
+        role="dialog"
+        aria-modal="true"
+        className="w-full max-w-2xl"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <Command
+          className="bg-white rounded-lg shadow-2xl w-full overflow-hidden"
+          onKeyDown={(e) => {
+            if (e.key === 'Escape') {
+              onOpenChange(false);
+              setSearch('');
+            }
+          }}
+          shouldFilter={!hasQuery}
+        >
+          <div className="flex items-center border-b border-gray-200 px-4">
+            <Search className="w-5 h-5 text-gray-400 mr-3 shrink-0" />
+            <Command.Input
+              value={search}
+              onValueChange={setSearch}
+              placeholder="Search or jump to..."
+              className="w-full py-4 text-base bg-transparent focus:outline-none placeholder:text-gray-400"
+            />
+            {loading && (
+              <div className="w-4 h-4 border-2 border-gray-300 border-t-gray-600 rounded-full animate-spin shrink-0 mr-2" />
+            )}
+            <kbd className="hidden sm:inline-block px-2 py-1 text-xs font-mono bg-gray-100 text-gray-600 rounded shrink-0">
+              ESC
+            </kbd>
+          </div>
+
+          <Command.List className="max-h-[400px] overflow-y-auto p-2">
+            <Command.Empty className="py-6 text-center text-sm text-gray-500">
+              {loading ? 'Searching...' : 'No results found.'}
+            </Command.Empty>
+
+            {!hasQuery && recentItems.length > 0 && (
+              <Command.Group heading="Recent" className="px-2 py-2">
+                <div className="text-xs font-medium text-gray-500 mb-2">RECENT</div>
+                {recentItems.map((item) => (
+                  <Command.Item
+                    key={`recent-${item.id}`}
+                    value={`recent ${item.label}`}
+                    onSelect={() => handleSelect(item.path, item)}
+                    className="flex items-center gap-3 px-3 py-2 rounded-lg cursor-pointer hover:bg-gray-100 data-[selected=true]:bg-gray-100"
+                  >
+                    <Clock className="w-4 h-4 text-gray-400" />
+                    <span>{item.label}</span>
+                    <span className="ml-auto text-xs text-gray-400 capitalize">{item.type}</span>
+                  </Command.Item>
+                ))}
+              </Command.Group>
+            )}
+
+            {hasQuery && documents.length > 0 && (
+              <Command.Group heading="Documents" className="px-2 py-2">
+                <div className="text-xs font-medium text-gray-500 mb-2">DOCUMENTS</div>
+                {documents.map((doc) => (
+                  <Command.Item
+                    key={`doc-${doc.id}`}
+                    value={doc.title ?? doc.slug ?? doc.id}
+                    onSelect={() =>
+                      handleSelect(`/collections/${doc.collection}/${doc.id}`, {
+                        id: `doc-${doc.id}`,
+                        label: doc.title ?? doc.slug ?? doc.id,
+                        path: `/collections/${doc.collection}/${doc.id}`,
+                        type: 'document',
+                      })
+                    }
+                    className="flex items-center gap-3 px-3 py-2 rounded-lg cursor-pointer hover:bg-gray-100 data-[selected=true]:bg-gray-100"
+                  >
+                    <FileText className="w-4 h-4 text-gray-500" />
+                    <div className="flex flex-col min-w-0">
+                      <span className="truncate">{doc.title ?? doc.slug ?? doc.id}</span>
+                      <span className="text-xs text-gray-400">{doc.collection} &middot; {doc.status}</span>
+                    </div>
+                  </Command.Item>
+                ))}
+              </Command.Group>
+            )}
+
+            {hasQuery && media.length > 0 && (
+              <Command.Group heading="Media" className="px-2 py-2 mt-1">
+                <div className="text-xs font-medium text-gray-500 mb-2">MEDIA</div>
+                {media.map((m) => (
+                  <Command.Item
+                    key={`media-${m.id}`}
+                    value={m.filename}
+                    onSelect={() =>
+                      handleSelect(`/media?selected=${m.id}`, {
+                        id: `media-${m.id}`,
+                        label: m.filename,
+                        path: `/media?selected=${m.id}`,
+                        type: 'media',
+                      })
+                    }
+                    className="flex items-center gap-3 px-3 py-2 rounded-lg cursor-pointer hover:bg-gray-100 data-[selected=true]:bg-gray-100"
+                  >
+                    <Image className="w-4 h-4 text-gray-500" />
+                    <div className="flex flex-col min-w-0">
+                      <span className="truncate">{m.filename}</span>
+                      <span className="text-xs text-gray-400">{m.mimeType}</span>
+                    </div>
+                  </Command.Item>
+                ))}
+              </Command.Group>
+            )}
+
+            {hasQuery && users.length > 0 && (
+              <Command.Group heading="Users" className="px-2 py-2 mt-1">
+                <div className="text-xs font-medium text-gray-500 mb-2">USERS</div>
+                {users.map((u) => (
+                  <Command.Item
+                    key={`user-${u.id}`}
+                    value={`${u.name} ${u.email}`}
+                    onSelect={() =>
+                      handleSelect(`/users?selected=${u.id}`, {
+                        id: `user-${u.id}`,
+                        label: u.name,
+                        path: `/users?selected=${u.id}`,
+                        type: 'user',
+                      })
+                    }
+                    className="flex items-center gap-3 px-3 py-2 rounded-lg cursor-pointer hover:bg-gray-100 data-[selected=true]:bg-gray-100"
+                  >
+                    <Users className="w-4 h-4 text-gray-500" />
+                    <div className="flex flex-col min-w-0">
+                      <span className="truncate">{u.name}</span>
+                      <span className="text-xs text-gray-400">{u.email} &middot; {u.role}</span>
+                    </div>
+                  </Command.Item>
+                ))}
+              </Command.Group>
+            )}
+
+            {(!hasQuery || !hasResults) && (
+              <Command.Group heading="Navigation" className="px-2 py-2">
+                <div className="text-xs font-medium text-gray-500 mb-2">NAVIGATION</div>
+                {navigationCommands.map((cmd) => {
+                  const Icon = cmd.icon;
+                  return (
+                    <Command.Item
+                      key={cmd.id}
+                      value={cmd.label}
+                      onSelect={() => handleSelect(cmd.action)}
+                      className="flex items-center gap-3 px-3 py-2 rounded-lg cursor-pointer hover:bg-gray-100 data-[selected=true]:bg-gray-100"
+                    >
+                      <Icon className="w-4 h-4 text-gray-500" />
+                      <span>{cmd.label}</span>
+                    </Command.Item>
+                  );
+                })}
+              </Command.Group>
+            )}
+
+            <Command.Group heading="Actions" className="px-2 py-2 mt-2">
+              <div className="text-xs font-medium text-gray-500 mb-2">ACTIONS</div>
+              {staticActions.map((cmd) => {
+                const Icon = cmd.icon;
+                return (
+                  <Command.Item
+                    key={cmd.id}
+                    value={cmd.label}
+                    onSelect={() =>
+                      handleSelect(cmd.action, {
+                        id: cmd.id,
+                        label: cmd.label,
+                        path: cmd.action,
+                        type: 'action',
+                      })
+                    }
+                    className="flex items-center gap-3 px-3 py-2 rounded-lg cursor-pointer hover:bg-gray-100 data-[selected=true]:bg-gray-100"
+                  >
+                    <Icon className="w-4 h-4 text-gray-500" />
+                    <span>{cmd.label}</span>
+                  </Command.Item>
+                );
+              })}
+            </Command.Group>
+          </Command.List>
+
+          <div className="border-t border-gray-200 px-4 py-3 bg-gray-50 flex items-center justify-between text-xs text-gray-500">
+            <div className="flex items-center gap-4">
+              <span className="flex items-center gap-1">
+                <kbd className="px-1.5 py-0.5 bg-white border border-gray-300 rounded text-[10px]">↑</kbd>
+                <kbd className="px-1.5 py-0.5 bg-white border border-gray-300 rounded text-[10px]">↓</kbd>
+                to navigate
+              </span>
+              <span className="flex items-center gap-1">
+                <kbd className="px-1.5 py-0.5 bg-white border border-gray-300 rounded text-[10px]">↵</kbd>
+                to select
+              </span>
+            </div>
+          </div>
+        </Command>
+      </div>
+    </div>
+  );
+}

package/src/components/ErrorBoundary.tsx

@@ -0,0 +1,52 @@
+'use client';
+
+import { Component, type ReactNode, type ErrorInfo } from 'react';
+
+interface Props {
+  children: ReactNode;
+  fallback?: ReactNode;
+}
+
+interface State {
+  hasError: boolean;
+  error: Error | null;
+}
+
+export class ErrorBoundary extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+
+  static getDerivedStateFromError(error: Error): State {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, info: ErrorInfo) {
+    console.error('[Actuate CMS] Unhandled error:', error, info.componentStack);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      if (this.props.fallback) return this.props.fallback;
+      return (
+        <div className="flex min-h-[200px] items-center justify-center p-6">
+          <div className="text-center">
+            <h2 className="text-lg font-semibold text-gray-900 mb-2">Something went wrong</h2>
+            <p className="text-sm text-gray-600 mb-4">
+              {this.state.error?.message ?? 'An unexpected error occurred'}
+            </p>
+            <button
+              onClick={() => this.setState({ hasError: false, error: null })}
+              className="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-md hover:bg-blue-700"
+            >
+              Try Again
+            </button>
+          </div>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}

package/src/components/FocalPointPicker.tsx

@@ -0,0 +1,54 @@
+'use client';
+
+import { useState, useCallback, useRef } from 'react';
+import { Crosshair } from 'lucide-react';
+
+interface FocalPointPickerProps {
+  imageUrl: string;
+  focalX: number;
+  focalY: number;
+  onChange: (x: number, y: number) => void;
+}
+
+export function FocalPointPicker({ imageUrl, focalX, focalY, onChange }: FocalPointPickerProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [dragging, setDragging] = useState(false);
+
+  const handlePosition = useCallback((e: React.MouseEvent) => {
+    const rect = containerRef.current?.getBoundingClientRect();
+    if (!rect) return;
+    const x = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+    const y = Math.max(0, Math.min(1, (e.clientY - rect.top) / rect.height));
+    onChange(Math.round(x * 100) / 100, Math.round(y * 100) / 100);
+  }, [onChange]);
+
+  return (
+    <div className="space-y-2">
+      <div className="flex items-center gap-2 text-sm font-medium text-[var(--foreground)]">
+        <Crosshair className="w-4 h-4" />
+        Focal Point
+      </div>
+      <div
+        ref={containerRef}
+        className="relative rounded-lg overflow-hidden border border-[var(--border)] cursor-crosshair select-none"
+        style={{ maxHeight: '200px' }}
+        onClick={handlePosition}
+        onMouseDown={() => setDragging(true)}
+        onMouseUp={() => setDragging(false)}
+        onMouseLeave={() => setDragging(false)}
+        onMouseMove={(e) => { if (dragging) handlePosition(e); }}
+      >
+        <img src={imageUrl} alt="Focal point preview" className="w-full h-full object-contain" draggable={false} />
+        <div
+          className="absolute w-6 h-6 -ml-3 -mt-3 rounded-full border-2 border-white shadow-lg bg-blue-500/50 pointer-events-none"
+          style={{ left: `${focalX * 100}%`, top: `${focalY * 100}%` }}
+        >
+          <div className="absolute inset-1 rounded-full bg-white" />
+        </div>
+      </div>
+      <p className="text-xs text-[var(--muted-foreground)]">
+        Click or drag to set the focal point ({Math.round(focalX * 100)}%, {Math.round(focalY * 100)}%)
+      </p>
+    </div>
+  );
+}