@actuate-media/cms-admin 0.1.4 → 0.2.0

package/src/components/FolderTree.tsx

@@ -0,0 +1,427 @@
+'use client';
+
+import {
+  ChevronRight, ChevronDown, FolderOpen, Folder as FolderIcon,
+  Plus, MoreHorizontal, Pencil, Trash2, FolderPlus, Clock,
+  Inbox, LayoutGrid, Loader2,
+} from 'lucide-react';
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { toast } from 'sonner';
+import { cmsApi } from '../lib/api.js';
+
+export interface FolderNode {
+  id: string;
+  name: string;
+  scope: string;
+  parentId: string | null;
+  position: number;
+  children: FolderNode[];
+}
+
+export type SmartFolder = 'all' | 'recent' | 'uncategorized';
+
+export type FolderSelection =
+  | { type: 'smart'; smart: SmartFolder }
+  | { type: 'folder'; folderId: string };
+
+export interface FolderTreeProps {
+  scope: string;
+  selected: FolderSelection;
+  onSelect: (selection: FolderSelection) => void;
+  itemCounts?: Record<string, number>;
+  totalCount?: number;
+  recentCount?: number;
+  uncategorizedCount?: number;
+  onDropItem?: (itemId: string, folderId: string | null) => void;
+}
+
+export function FolderTree({
+  scope,
+  selected,
+  onSelect,
+  itemCounts,
+  totalCount,
+  recentCount,
+  uncategorizedCount,
+  onDropItem,
+}: FolderTreeProps) {
+  const [folders, setFolders] = useState<FolderNode[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [expanded, setExpanded] = useState<Set<string>>(new Set());
+  const [editingId, setEditingId] = useState<string | null>(null);
+  const [editName, setEditName] = useState('');
+  const [contextMenu, setContextMenu] = useState<{ id: string; x: number; y: number } | null>(null);
+  const [creatingIn, setCreatingIn] = useState<string | null | false>(false);
+  const [newFolderName, setNewFolderName] = useState('');
+  const newFolderInputRef = useRef<HTMLInputElement>(null);
+  const editInputRef = useRef<HTMLInputElement>(null);
+  const [dragOverId, setDragOverId] = useState<string | null>(null);
+
+  const fetchFolders = useCallback(async () => {
+    const res = await cmsApi<FolderNode[]>(`/folders?scope=${scope}`);
+    if (res.data) setFolders(res.data);
+    setLoading(false);
+  }, [scope]);
+
+  useEffect(() => { fetchFolders(); }, [fetchFolders]);
+
+  useEffect(() => {
+    if (creatingIn !== false && newFolderInputRef.current) {
+      newFolderInputRef.current.focus();
+    }
+  }, [creatingIn]);
+
+  useEffect(() => {
+    if (editingId && editInputRef.current) {
+      editInputRef.current.focus();
+      editInputRef.current.select();
+    }
+  }, [editingId]);
+
+  useEffect(() => {
+    const handleClick = () => setContextMenu(null);
+    document.addEventListener('click', handleClick);
+    return () => document.removeEventListener('click', handleClick);
+  }, []);
+
+  const toggleExpand = (id: string) => {
+    setExpanded(prev => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  };
+
+  const handleCreate = async (parentId: string | null) => {
+    if (!newFolderName.trim()) {
+      setCreatingIn(false);
+      return;
+    }
+    const res = await cmsApi('/folders', {
+      method: 'POST',
+      body: JSON.stringify({ name: newFolderName.trim(), scope, parentId }),
+    });
+    if (res.error) {
+      toast.error(res.error);
+    } else {
+      toast.success('Folder created');
+      if (parentId) setExpanded(prev => new Set(prev).add(parentId));
+      fetchFolders();
+    }
+    setNewFolderName('');
+    setCreatingIn(false);
+  };
+
+  const handleRename = async (id: string) => {
+    if (!editName.trim()) {
+      setEditingId(null);
+      return;
+    }
+    const res = await cmsApi(`/folders/${id}`, {
+      method: 'PUT',
+      body: JSON.stringify({ name: editName.trim() }),
+    });
+    if (res.error) toast.error(res.error);
+    else fetchFolders();
+    setEditingId(null);
+  };
+
+  const handleDelete = async (id: string) => {
+    const res = await cmsApi(`/folders/${id}`, { method: 'DELETE' });
+    if (res.error) toast.error(res.error);
+    else {
+      toast.success('Folder deleted');
+      if (selected.type === 'folder' && selected.folderId === id) {
+        onSelect({ type: 'smart', smart: 'all' });
+      }
+      fetchFolders();
+    }
+  };
+
+  const isSelected = (sel: FolderSelection) => {
+    if (selected.type !== sel.type) return false;
+    if (sel.type === 'smart') return (selected as any).smart === sel.smart;
+    return (selected as any).folderId === (sel as any).folderId;
+  };
+
+  const handleDragOver = (e: React.DragEvent, folderId: string | null) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setDragOverId(folderId);
+  };
+
+  const handleDragLeave = () => {
+    setDragOverId(null);
+  };
+
+  const handleDrop = (e: React.DragEvent, folderId: string | null) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setDragOverId(null);
+    const itemId = e.dataTransfer.getData('text/actuate-item-id');
+    if (itemId && onDropItem) {
+      onDropItem(itemId, folderId);
+    }
+  };
+
+  const countForFolder = (id: string): number | undefined => itemCounts?.[id];
+
+  const renderFolder = (folder: FolderNode, depth: number) => {
+    const isExpanded = expanded.has(folder.id);
+    const hasChildren = folder.children.length > 0;
+    const isActive = isSelected({ type: 'folder', folderId: folder.id });
+    const isDragOver = dragOverId === folder.id;
+    const count = countForFolder(folder.id);
+
+    return (
+      <div key={folder.id}>
+        <div
+          className={`group flex items-center gap-1 px-2 py-1.5 rounded-md cursor-pointer text-sm transition-colors ${
+            isActive
+              ? 'bg-blue-50 text-blue-700 font-medium'
+              : isDragOver
+              ? 'bg-blue-100 ring-2 ring-blue-300'
+              : 'text-gray-700 hover:bg-gray-100'
+          }`}
+          style={{ paddingLeft: `${8 + depth * 16}px` }}
+          onClick={() => onSelect({ type: 'folder', folderId: folder.id })}
+          onContextMenu={(e) => {
+            e.preventDefault();
+            setContextMenu({ id: folder.id, x: e.clientX, y: e.clientY });
+          }}
+          onDragOver={(e) => handleDragOver(e, folder.id)}
+          onDragLeave={handleDragLeave}
+          onDrop={(e) => handleDrop(e, folder.id)}
+        >
+          <button
+            type="button"
+            className={`p-0.5 rounded hover:bg-gray-200 transition-colors ${hasChildren ? '' : 'invisible'}`}
+            onClick={(e) => { e.stopPropagation(); toggleExpand(folder.id); }}
+          >
+            {isExpanded ? (
+              <ChevronDown className="w-3.5 h-3.5" />
+            ) : (
+              <ChevronRight className="w-3.5 h-3.5" />
+            )}
+          </button>
+
+          {isExpanded ? (
+            <FolderOpen className="w-4 h-4 text-blue-500 shrink-0" />
+          ) : (
+            <FolderIcon className="w-4 h-4 text-gray-400 shrink-0" />
+          )}
+
+          {editingId === folder.id ? (
+            <input
+              ref={editInputRef}
+              type="text"
+              value={editName}
+              onChange={(e) => setEditName(e.target.value)}
+              onBlur={() => handleRename(folder.id)}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') handleRename(folder.id);
+                if (e.key === 'Escape') setEditingId(null);
+              }}
+              className="flex-1 min-w-0 text-sm border border-blue-300 rounded px-1 py-0 focus:outline-none focus:ring-1 focus:ring-blue-500"
+              onClick={(e) => e.stopPropagation()}
+            />
+          ) : (
+            <span className="flex-1 min-w-0 truncate">{folder.name}</span>
+          )}
+
+          {count !== undefined && !editingId && (
+            <span className="text-xs text-gray-400 tabular-nums">{count}</span>
+          )}
+
+          <button
+            type="button"
+            className="p-0.5 rounded opacity-0 group-hover:opacity-100 hover:bg-gray-200 transition-all"
+            onClick={(e) => {
+              e.stopPropagation();
+              setContextMenu({ id: folder.id, x: e.clientX, y: e.clientY });
+            }}
+          >
+            <MoreHorizontal className="w-3.5 h-3.5 text-gray-500" />
+          </button>
+        </div>
+
+        {isExpanded && (
+          <div>
+            {folder.children.map(child => renderFolder(child, depth + 1))}
+            {creatingIn === folder.id && (
+              <div className="flex items-center gap-1 px-2 py-1" style={{ paddingLeft: `${24 + (depth + 1) * 16}px` }}>
+                <FolderIcon className="w-4 h-4 text-gray-400 shrink-0" />
+                <input
+                  ref={newFolderInputRef}
+                  type="text"
+                  value={newFolderName}
+                  onChange={(e) => setNewFolderName(e.target.value)}
+                  onBlur={() => handleCreate(folder.id)}
+                  onKeyDown={(e) => {
+                    if (e.key === 'Enter') handleCreate(folder.id);
+                    if (e.key === 'Escape') { setCreatingIn(false); setNewFolderName(''); }
+                  }}
+                  placeholder="Folder name..."
+                  className="flex-1 min-w-0 text-sm border border-blue-300 rounded px-1 py-0 focus:outline-none focus:ring-1 focus:ring-blue-500"
+                />
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    );
+  };
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center py-8">
+        <Loader2 className="w-5 h-5 animate-spin text-gray-400" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="space-y-0.5 px-1 py-2">
+        <button
+          type="button"
+          className={`w-full flex items-center gap-2 px-2 py-1.5 rounded-md text-sm transition-colors ${
+            isSelected({ type: 'smart', smart: 'all' })
+              ? 'bg-blue-50 text-blue-700 font-medium'
+              : 'text-gray-700 hover:bg-gray-100'
+          }`}
+          onClick={() => onSelect({ type: 'smart', smart: 'all' })}
+          onDragOver={(e) => handleDragOver(e, null)}
+          onDragLeave={handleDragLeave}
+          onDrop={(e) => handleDrop(e, null)}
+        >
+          <LayoutGrid className="w-4 h-4 shrink-0" />
+          <span className="flex-1 text-left">All</span>
+          {totalCount !== undefined && <span className="text-xs text-gray-400 tabular-nums">{totalCount}</span>}
+        </button>
+
+        <button
+          type="button"
+          className={`w-full flex items-center gap-2 px-2 py-1.5 rounded-md text-sm transition-colors ${
+            isSelected({ type: 'smart', smart: 'recent' })
+              ? 'bg-blue-50 text-blue-700 font-medium'
+              : 'text-gray-700 hover:bg-gray-100'
+          }`}
+          onClick={() => onSelect({ type: 'smart', smart: 'recent' })}
+        >
+          <Clock className="w-4 h-4 shrink-0" />
+          <span className="flex-1 text-left">Recent</span>
+          {recentCount !== undefined && <span className="text-xs text-gray-400 tabular-nums">{recentCount}</span>}
+        </button>
+
+        <button
+          type="button"
+          className={`w-full flex items-center gap-2 px-2 py-1.5 rounded-md text-sm transition-colors ${
+            isSelected({ type: 'smart', smart: 'uncategorized' })
+              ? 'bg-blue-50 text-blue-700 font-medium'
+              : 'text-gray-700 hover:bg-gray-100'
+          }`}
+          onClick={() => onSelect({ type: 'smart', smart: 'uncategorized' })}
+        >
+          <Inbox className="w-4 h-4 shrink-0" />
+          <span className="flex-1 text-left">Uncategorized</span>
+          {uncategorizedCount !== undefined && <span className="text-xs text-gray-400 tabular-nums">{uncategorizedCount}</span>}
+        </button>
+      </div>
+
+      <div className="border-t border-gray-200 my-1" />
+
+      <div className="flex-1 overflow-y-auto px-1 py-1 space-y-0.5">
+        {folders.map(folder => renderFolder(folder, 0))}
+
+        {creatingIn === null && (
+          <div className="flex items-center gap-1 px-2 py-1">
+            <FolderIcon className="w-4 h-4 text-gray-400 shrink-0 ml-5" />
+            <input
+              ref={newFolderInputRef}
+              type="text"
+              value={newFolderName}
+              onChange={(e) => setNewFolderName(e.target.value)}
+              onBlur={() => handleCreate(null)}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') handleCreate(null);
+                if (e.key === 'Escape') { setCreatingIn(false); setNewFolderName(''); }
+              }}
+              placeholder="Folder name..."
+              className="flex-1 min-w-0 text-sm border border-blue-300 rounded px-1 py-0 focus:outline-none focus:ring-1 focus:ring-blue-500"
+            />
+          </div>
+        )}
+      </div>
+
+      <div className="border-t border-gray-200 p-2">
+        <button
+          type="button"
+          onClick={() => { setCreatingIn(null); setNewFolderName(''); }}
+          className="w-full flex items-center gap-2 px-2 py-1.5 rounded-md text-sm text-gray-600 hover:bg-gray-100 transition-colors"
+        >
+          <Plus className="w-4 h-4" />
+          New Folder
+        </button>
+      </div>
+
+      {contextMenu && (
+        <div
+          className="fixed z-50 bg-white rounded-lg border border-gray-200 shadow-lg py-1 min-w-[160px]"
+          style={{ left: contextMenu.x, top: contextMenu.y }}
+        >
+          <button
+            type="button"
+            className="w-full flex items-center gap-2 px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-100 transition-colors"
+            onClick={() => {
+              const folder = findFolder(folders, contextMenu.id);
+              if (folder) {
+                setEditingId(folder.id);
+                setEditName(folder.name);
+              }
+              setContextMenu(null);
+            }}
+          >
+            <Pencil className="w-3.5 h-3.5" />
+            Rename
+          </button>
+          <button
+            type="button"
+            className="w-full flex items-center gap-2 px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-100 transition-colors"
+            onClick={() => {
+              setCreatingIn(contextMenu.id);
+              setNewFolderName('');
+              setExpanded(prev => new Set(prev).add(contextMenu.id));
+              setContextMenu(null);
+            }}
+          >
+            <FolderPlus className="w-3.5 h-3.5" />
+            New Subfolder
+          </button>
+          <div className="border-t border-gray-200 my-1" />
+          <button
+            type="button"
+            className="w-full flex items-center gap-2 px-3 py-1.5 text-sm text-red-600 hover:bg-red-50 transition-colors"
+            onClick={() => {
+              handleDelete(contextMenu.id);
+              setContextMenu(null);
+            }}
+          >
+            <Trash2 className="w-3.5 h-3.5" />
+            Delete
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function findFolder(nodes: FolderNode[], id: string): FolderNode | null {
+  for (const n of nodes) {
+    if (n.id === id) return n;
+    const found = findFolder(n.children, id);
+    if (found) return found;
+  }
+  return null;
+}

package/src/components/LivePreview.tsx

@@ -0,0 +1,136 @@
+'use client';
+
+import { useState, useRef, useEffect, useCallback } from 'react';
+import { Monitor, Tablet, Smartphone, RefreshCw, ExternalLink, X } from 'lucide-react';
+import { cmsApi } from '../lib/api.js';
+
+interface LivePreviewProps {
+  collection: string;
+  documentId?: string;
+  previewUrl?: string;
+  values: Record<string, unknown>;
+  onClose: () => void;
+}
+
+type Viewport = 'desktop' | 'tablet' | 'mobile';
+
+const VIEWPORT_WIDTHS: Record<Viewport, string> = {
+  desktop: '100%',
+  tablet: '768px',
+  mobile: '375px',
+};
+
+export function LivePreview({ collection, documentId, previewUrl, values, onClose }: LivePreviewProps) {
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+  const [viewport, setViewport] = useState<Viewport>('desktop');
+  const [loading, setLoading] = useState(true);
+  const [previewSrc, setPreviewSrc] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!documentId || !previewUrl) {
+      setPreviewSrc(null);
+      return;
+    }
+
+    async function fetchToken() {
+      const res = await cmsApi<{ token: string }>('/preview/token', {
+        method: 'POST',
+        body: JSON.stringify({ collection, documentId }),
+      });
+      if (res.data?.token) {
+        const sep = previewUrl!.includes('?') ? '&' : '?';
+        setPreviewSrc(`${previewUrl}${sep}preview=true#token=${res.data.token}`);
+      }
+    }
+
+    fetchToken();
+  }, [collection, documentId, previewUrl]);
+
+  useEffect(() => {
+    if (!iframeRef.current?.contentWindow || !previewSrc) return;
+    let targetOrigin: string;
+    try {
+      targetOrigin = new URL(previewSrc).origin;
+    } catch {
+      targetOrigin = window.location.origin;
+    }
+    iframeRef.current.contentWindow.postMessage(
+      { type: 'actuate-preview-update', data: values },
+      targetOrigin,
+    );
+  }, [values, previewSrc]);
+
+  const handleRefresh = useCallback(() => {
+    if (iframeRef.current) {
+      setLoading(true);
+      iframeRef.current.src = iframeRef.current.src;
+    }
+  }, []);
+
+  const handleOpenExternal = useCallback(() => {
+    if (previewSrc) window.open(previewSrc, '_blank');
+  }, [previewSrc]);
+
+  if (!previewSrc) {
+    return (
+      <div className="flex flex-col items-center justify-center h-full bg-gray-50 rounded-lg border border-dashed border-gray-300 p-8">
+        <p className="text-sm text-gray-500 text-center">
+          {!documentId
+            ? 'Save the document first to enable preview'
+            : 'Configure a preview URL in the collection settings to enable live preview'}
+        </p>
+        <button onClick={onClose} className="mt-4 text-xs text-gray-400 hover:text-gray-600">
+          Close Preview
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col h-full border-l border-gray-200 bg-white">
+      <div className="flex items-center justify-between px-3 py-2 border-b border-gray-200 bg-gray-50">
+        <div className="flex items-center gap-1">
+          {([['desktop', Monitor], ['tablet', Tablet], ['mobile', Smartphone]] as const).map(([vp, Icon]) => (
+            <button
+              key={vp}
+              onClick={() => setViewport(vp)}
+              className={`p-1.5 rounded ${viewport === vp ? 'bg-white shadow-sm text-blue-600' : 'text-gray-400 hover:text-gray-600'}`}
+              title={vp}
+            >
+              <Icon className="w-4 h-4" />
+            </button>
+          ))}
+        </div>
+        <div className="flex items-center gap-1">
+          <button onClick={handleRefresh} className="p-1.5 rounded text-gray-400 hover:text-gray-600" title="Refresh">
+            <RefreshCw className="w-4 h-4" />
+          </button>
+          <button onClick={handleOpenExternal} className="p-1.5 rounded text-gray-400 hover:text-gray-600" title="Open in new tab">
+            <ExternalLink className="w-4 h-4" />
+          </button>
+          <button onClick={onClose} className="p-1.5 rounded text-gray-400 hover:text-gray-600" title="Close">
+            <X className="w-4 h-4" />
+          </button>
+        </div>
+      </div>
+
+      <div className="flex-1 overflow-auto flex justify-center bg-gray-100 p-4">
+        <div style={{ width: VIEWPORT_WIDTHS[viewport], maxWidth: '100%', transition: 'width 0.3s' }} className="relative">
+          {loading && (
+            <div className="absolute inset-0 flex items-center justify-center bg-white/80 z-10 rounded-lg">
+              <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600" />
+            </div>
+          )}
+          <iframe
+            ref={iframeRef}
+            src={previewSrc}
+            className="w-full h-full bg-white rounded-lg shadow-lg border border-gray-200"
+            style={{ minHeight: '600px' }}
+            onLoad={() => setLoading(false)}
+            title="Page Preview"
+          />
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/LocaleProvider.tsx

@@ -0,0 +1,51 @@
+'use client';
+
+import { createContext, useContext, useState, useEffect, useCallback, type ReactNode } from 'react';
+
+interface LocaleContextValue {
+  activeLocale: string;
+  setLocale: (locale: string) => void;
+  locales: Array<{ code: string; label: string; dir?: 'ltr' | 'rtl' }>;
+}
+
+const LocaleContext = createContext<LocaleContextValue>({
+  activeLocale: 'en',
+  setLocale: () => {},
+  locales: [],
+});
+
+export function useLocale() {
+  return useContext(LocaleContext);
+}
+
+const STORAGE_KEY = 'actuate-locale';
+
+export interface LocaleProviderProps {
+  config: { i18n?: { defaultLocale: string; locales: Array<{ code: string; label: string; dir?: 'ltr' | 'rtl' }>; fallbackLocale?: string } };
+  children: ReactNode;
+}
+
+export function LocaleProvider({ config, children }: LocaleProviderProps) {
+  const locales = config.i18n?.locales ?? [];
+  const defaultLocale = config.i18n?.defaultLocale ?? 'en';
+
+  const [activeLocale, setActiveLocale] = useState(defaultLocale);
+
+  useEffect(() => {
+    const stored = localStorage.getItem(STORAGE_KEY);
+    if (stored && locales.some((l) => l.code === stored)) {
+      setActiveLocale(stored);
+    }
+  }, [locales]);
+
+  const setLocale = useCallback((locale: string) => {
+    setActiveLocale(locale);
+    localStorage.setItem(STORAGE_KEY, locale);
+  }, []);
+
+  return (
+    <LocaleContext.Provider value={{ activeLocale, setLocale, locales }}>
+      {children}
+    </LocaleContext.Provider>
+  );
+}

package/src/components/LocaleSwitcher.tsx

@@ -0,0 +1,51 @@
+'use client';
+
+import { Globe, Check, ChevronDown } from 'lucide-react';
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
+import { useLocale } from './LocaleProvider.js';
+
+export function LocaleSwitcher() {
+  const { activeLocale, setLocale, locales } = useLocale();
+
+  if (locales.length < 2) return null;
+
+  const activeLabel = locales.find((l) => l.code === activeLocale)?.label ?? activeLocale;
+
+  return (
+    <DropdownMenu.Root>
+      <DropdownMenu.Trigger asChild>
+        <button
+          className="flex items-center gap-1.5 px-2 py-1.5 text-sm hover:bg-[var(--accent)] rounded-lg transition-colors"
+          aria-label="Switch locale"
+        >
+          <Globe className="w-4 h-4 text-[var(--muted-foreground)]" />
+          <span className="hidden sm:inline text-[var(--foreground)] text-sm font-medium">
+            {activeLabel}
+          </span>
+          <ChevronDown className="w-3 h-3 text-[var(--muted-foreground)]" />
+        </button>
+      </DropdownMenu.Trigger>
+
+      <DropdownMenu.Portal>
+        <DropdownMenu.Content
+          className="min-w-[160px] bg-[var(--popover)] text-[var(--popover-foreground)] rounded-lg border border-[var(--border)] shadow-lg p-1 z-50"
+          align="end"
+          sideOffset={5}
+        >
+          {locales.map((locale) => (
+            <DropdownMenu.Item
+              key={locale.code}
+              onSelect={() => setLocale(locale.code)}
+              className="flex items-center justify-between gap-2 px-3 py-2 text-sm hover:bg-[var(--accent)] rounded cursor-pointer outline-none"
+            >
+              <span>{locale.label}</span>
+              {locale.code === activeLocale && (
+                <Check className="w-4 h-4 text-[var(--primary)]" />
+              )}
+            </DropdownMenu.Item>
+          ))}
+        </DropdownMenu.Content>
+      </DropdownMenu.Portal>
+    </DropdownMenu.Root>
+  );
+}