@kyro-cms/admin 0.12.19 → 0.12.21

package/src/components/UserManagement.tsx

@@ -39,9 +39,30 @@ export function UserManagement() {
   const [createError, setCreateError] = useState("");
   const [creating, setCreating] = useState(false);
   const { confirm, alert } = useUIStore();
+  const [currentUserRole, setCurrentUserRole] = useState<string>(() => {
+    return (typeof window !== "undefined" && (window as any).__kyroAuth?.user?.role) || "";
+  });
 
   useEffect(() => {
     loadUsers();
+
+    if ((window as any).__kyroAuth?.user?.role) {
+      setCurrentUserRole((window as any).__kyroAuth.user.role);
+    } else {
+      apiGet<any>("/api/auth/me")
+        .then((res) => {
+          if (res?.user?.role) setCurrentUserRole(res.user.role);
+        })
+        .catch(() => {});
+    }
+
+    const handler = (e: any) => {
+      if (e.detail?.user?.role) {
+        setCurrentUserRole(e.detail.user.role);
+      }
+    };
+    window.addEventListener("kyro:auth-ready", handler);
+    return () => window.removeEventListener("kyro:auth-ready", handler);
   }, []);
 
   const loadUsers = async () => {
@@ -300,15 +321,28 @@ export function UserManagement() {
             </div>
             <div>
               <label className="block text-xs font-bold mb-1.5 text-[var(--kyro-text-secondary)] uppercase tracking-wider">Role</label>
-              <select
-                value={createForm.role}
-                onChange={(e) => setCreateForm({ ...createForm, role: e.target.value })}
-                className="w-full px-4 py-3 bg-[var(--kyro-bg)] border border-[var(--kyro-border)] rounded-xl text-[var(--kyro-text-primary)] focus:outline-none focus:border-[var(--kyro-primary)]"
-              >
-                {roleOptions.map((r) => (
-                  <option key={r} value={r}>{r}</option>
-                ))}
-              </select>
+              {(() => {
+                const isSuperAdmin = currentUserRole === "super_admin";
+                return (
+                  <div>
+                    <select
+                      value={createForm.role}
+                      disabled={!isSuperAdmin}
+                      onChange={(e) => setCreateForm({ ...createForm, role: e.target.value })}
+                      className="w-full px-4 py-3 bg-[var(--kyro-bg)] border border-[var(--kyro-border)] rounded-xl text-[var(--kyro-text-primary)] focus:outline-none focus:border-[var(--kyro-primary)] disabled:opacity-60 disabled:cursor-not-allowed"
+                    >
+                      {roleOptions.map((r) => (
+                        <option key={r} value={r}>{r}</option>
+                      ))}
+                    </select>
+                    {!isSuperAdmin && (
+                      <p className="text-[11px] text-[var(--kyro-text-secondary)] mt-1 font-medium">
+                        Only Super Admin can assign administrative roles.
+                      </p>
+                    )}
+                  </div>
+                );
+              })()}
             </div>
             {createError && (
               <div className="p-3 bg-red-500/10 border border-red-500/20 rounded-xl flex items-center gap-2 text-red-500 text-xs font-bold">

package/src/components/UserMenu.tsx

@@ -3,6 +3,7 @@ import { Dropdown, DropdownItem, DropdownSeparator } from "./ui/Dropdown";
 import { User, Shield, Key, Webhook, Clock, FileText, ExternalLink, HelpCircle, LogOut, Terminal, Zap } from "./ui/icons";
 import { useAuthStore } from "../lib/stores";
 import { apiGet } from "../lib/api";
+import { resolveMedia } from "../lib/paths";
 import { useTranslation } from "react-i18next";
 import { navigate } from '../lib/navigate';
 
@@ -17,17 +18,47 @@ export function UserMenu({ adminPath }: UserMenuProps) {
   const [apiAccess, setApiAccess] = useState<{ graphqlEnabled?: boolean } | null>(null);
 
   useEffect(() => {
-    const avatar = currentUser?.avatar;
-    if (typeof avatar === "string" && /^[0-9a-f-]+$/i.test(avatar)) {
-      apiGet<any>(`/api/media/${avatar}`)
-        .then((media) => setAvatarUrl(media?.thumbnailUrl || media?.url || null))
-        .catch(() => setAvatarUrl(null));
-    } else if (typeof avatar === "string") {
-      setAvatarUrl(avatar);
-    } else {
+    const rawAvatar = (currentUser as any)?.avatar || (currentUser as any)?.photo || (currentUser as any)?.picture || (currentUser as any)?.image;
+    
+    if (!rawAvatar) {
       setAvatarUrl(null);
+      return;
     }
-  }, [currentUser?.avatar]);
+
+    if (typeof rawAvatar === "object" && rawAvatar !== null) {
+      const url = rawAvatar.thumbnailUrl || rawAvatar.url || rawAvatar.filename;
+      if (url) {
+        setAvatarUrl(resolveMedia(url));
+        return;
+      }
+    }
+
+    if (typeof rawAvatar === "string") {
+      if (rawAvatar.startsWith("http") || rawAvatar.startsWith("data:") || rawAvatar.startsWith("blob:") || rawAvatar.startsWith("/")) {
+        setAvatarUrl(resolveMedia(rawAvatar));
+      } else if (/^[0-9a-f-]+$/i.test(rawAvatar)) {
+        apiGet<any>(`/api/media/${rawAvatar}`)
+          .then((media) => {
+            const fetchedUrl = media?.thumbnailUrl || media?.url || media?.filename;
+            setAvatarUrl(fetchedUrl ? resolveMedia(fetchedUrl) : null);
+          })
+          .catch(() => setAvatarUrl(null));
+      } else {
+        setAvatarUrl(resolveMedia(rawAvatar));
+      }
+    }
+  }, [currentUser]);
+
+  useEffect(() => {
+    apiGet<any>("/api/auth/me")
+      .then((res: any) => {
+        const u = res?.user || (res?.id ? res : null);
+        if (u) {
+          useAuthStore.getState().setUser(u);
+        }
+      })
+      .catch(() => {});
+  }, []);
 
   useEffect(() => {
     apiGet<any>("/api/globals/access-settings")
@@ -38,16 +69,29 @@ export function UserMenu({ adminPath }: UserMenuProps) {
       .catch(() => setApiAccess({}));
   }, []);
 
+  const userRole = currentUser?.role || "";
+  const isSuperAdmin = userRole === "super_admin";
+  const isAdmin = userRole === "admin" || isSuperAdmin;
+  const authPermissions = typeof window !== "undefined" ? (window as any).__kyroAuth?.permissions : null;
+  const canReadAudit = isAdmin || authPermissions?.collections?.audit_logs?.read === true;
+
+  const showDeveloperSection = isAdmin || canReadAudit;
+
   return (
     <Dropdown
       align="right"
       trigger={
         <div
-          className="flex justify-center p-.5 text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface)] rounded-xl transition-all shadow-sm active:scale-95"
-          title={t("userMenu.account", { defaultValue: "Account" })}
+          className="flex items-center justify-center w-7 h-7 text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface)] rounded-xl transition-all shadow-sm active:scale-95 overflow-hidden"
+          title={currentUser?.email || t("userMenu.account", { defaultValue: "Account" })}
         >
           {avatarUrl ? (
-            <img src={avatarUrl} alt="" className="w-8 h-8 rounded-full object-cover" />
+            <img
+              src={avatarUrl}
+              alt=""
+              className="w-full h-full rounded-xl object-cover"
+              onError={() => setAvatarUrl(null)}
+            />
           ) : (
             <User className="w-4 h-4" strokeWidth={2.5} />
           )}
@@ -74,61 +118,79 @@ export function UserMenu({ adminPath }: UserMenuProps) {
         {t("userMenu.profileSettings", { defaultValue: "Profile Settings" })}
       </DropdownItem>
 
-      <DropdownItem
-        icon={<Shield className="w-4 h-4" />}
-        onClick={() => navigate(`${adminPath}/roles`)}
-      >
-        {t("userMenu.permissions", { defaultValue: "Permissions" })}
-      </DropdownItem>
+      {isSuperAdmin && (
+        <DropdownItem
+          icon={<Shield className="w-4 h-4" />}
+          onClick={() => navigate(`${adminPath}/roles`)}
+        >
+          {t("userMenu.permissions", { defaultValue: "Permissions" })}
+        </DropdownItem>
+      )}
 
-      <DropdownSeparator />
+      {showDeveloperSection && (
+        <>
+          <DropdownSeparator />
+
+          <div className="px-4 py-2 mb-1">
+            <p className="text-[10px] font-medium tracking-[0.2em] text-[var(--kyro-text-secondary)] opacity-40">
+              {t("userMenu.developer", { defaultValue: "Developer" })}
+            </p>
+          </div>
+
+          {isAdmin && (
+            <DropdownItem
+              icon={<Key className="w-4 h-4" />}
+              onClick={() => navigate(`${adminPath}/keys`)}
+            >
+              {t("userMenu.apiKeys", { defaultValue: "API Keys" })}
+            </DropdownItem>
+          )}
 
-      <div className="px-4 py-2 mb-1">
-        <p className="text-[10px] font-medium tracking-[0.2em] text-[var(--kyro-text-secondary)] opacity-40">
-          {t("userMenu.developer", { defaultValue: "Developer" })}
-        </p>
-      </div>
+          {isAdmin && (
+            <DropdownItem
+              icon={<Webhook className="w-4 h-4" />}
+              onClick={() => navigate(`${adminPath}/webhooks`)}
+            >
+              {t("userMenu.webHooks", { defaultValue: "Web Hooks" })}
+            </DropdownItem>
+          )}
 
-      <DropdownItem
-        icon={<Key className="w-4 h-4" />}
-        onClick={() => (navigate(`${adminPath}/keys`))}
-      >
-        {t("userMenu.apiKeys", { defaultValue: "API Keys" })}
-      </DropdownItem>
+          {isAdmin && (
+            <DropdownItem
+              icon={<Clock className="w-4 h-4" />}
+              onClick={() => navigate(`${adminPath}/sessions`)}
+            >
+              {t("userMenu.sessions", { defaultValue: "Sessions" })}
+            </DropdownItem>
+          )}
 
-      <DropdownItem
-        icon={<Webhook className="w-4 h-4" />}
-        onClick={() => (navigate(`${adminPath}/webhooks`))}
-      >
-        {t("userMenu.webHooks", { defaultValue: "Web Hooks" })}
-      </DropdownItem>
-      <DropdownItem
-        icon={<Clock className="w-4 h-4" />}
-        onClick={() => (navigate(`${adminPath}/sessions`))}
-      >
-        {t("userMenu.sessions", { defaultValue: "Sessions" })}
-      </DropdownItem>
-      <DropdownItem
-        icon={<FileText className="w-4 h-4" />}
-        onClick={() => (navigate(`${adminPath}/audit`))}
-      >
-        {t("userMenu.auditLogs", { defaultValue: "Audit Logs" })}
-      </DropdownItem>
+          {canReadAudit && (
+            <DropdownItem
+              icon={<FileText className="w-4 h-4" />}
+              onClick={() => navigate(`${adminPath}/audit`)}
+            >
+              {t("userMenu.auditLogs", { defaultValue: "Audit Logs" })}
+            </DropdownItem>
+          )}
 
-      <DropdownItem
-        icon={<Terminal className="w-4 h-4" />}
-        onClick={() => (navigate(`${adminPath}/rest-playground`))}
-      >
-        {t("userMenu.apiExplorer", { defaultValue: "API Explorer" })}
-      </DropdownItem>
+          {isAdmin && (
+            <DropdownItem
+              icon={<Terminal className="w-4 h-4" />}
+              onClick={() => navigate(`${adminPath}/rest-playground`)}
+            >
+              {t("userMenu.apiExplorer", { defaultValue: "API Explorer" })}
+            </DropdownItem>
+          )}
 
-      {(apiAccess === null || apiAccess?.graphqlEnabled) && (
-        <DropdownItem
-          icon={<Zap className="w-4 h-4" />}
-          onClick={() => (navigate(`${adminPath}/graphql`))}
-        >
-          {t("userMenu.graphqlPlayground", { defaultValue: "GraphQL Playground" })}
-        </DropdownItem>
+          {isAdmin && (apiAccess === null || apiAccess?.graphqlEnabled) && (
+            <DropdownItem
+              icon={<Zap className="w-4 h-4" />}
+              onClick={() => navigate(`${adminPath}/graphql`)}
+            >
+              {t("userMenu.graphqlPlayground", { defaultValue: "GraphQL Playground" })}
+            </DropdownItem>
+          )}
+        </>
       )}
 
       <DropdownSeparator />

package/src/components/autoform/AutoFormEditView.tsx

@@ -16,13 +16,13 @@ export function AutoFormEditView({
   collectionSlug,
   renderField,
 }: AutoFormEditViewProps) {
-    const { t } = useTranslation();
+  const { t } = useTranslation();
   const { showPreview, sidebarCollapsed, formData, previewUrl } = useAutoFormStore();
 
   if (layout === "single") {
     return (
       <div className="w-full space-y-6 md:space-y-8">
-        <div className="surface-tile p-4 md:p-8 space-y-6 md:space-y-8">
+        <div className="surface-tile p-4 md:p-8 space-y-6 md:space-y-8 rounded-lg">
           {config.fields.map((f: Field) => renderField(f))}
         </div>
       </div>
@@ -47,7 +47,7 @@ export function AutoFormEditView({
         {config.tabs ? (
           renderField({ type: "tabs", tabs: config.tabs } as Field)
         ) : (
-          <div className="surface-tile p-4 md:p-8 space-y-6 md:space-y-8">
+          <div className="surface-tile p-4 md:p-8 space-y-6 md:space-y-8 rounded-lg">
             {config.fields
               .filter(
                 (f: Field) => !f.admin?.position || f.admin.position === "main",
@@ -77,7 +77,7 @@ export function AutoFormEditView({
       ) : sidebarCollapsed ? null : (
         <div className="space-y-4 md:space-y-6 animate-in fade-in slide-in-from-right-4 duration-500">
           {config.fields.some((f: Field) => f.admin?.position === "sidebar") && (
-            <div className="surface-tile p-4 md:p-6 space-y-4 md:space-y-6">
+            <div className="surface-tile p-4 md:p-6 space-y-4 md:space-y-6 rounded-lg">
               <h3 className="text-[10px] font-bold tracking-[0.2em] opacity-40">
                 Settings
               </h3>

package/src/components/autoform/AutoFormHeader.tsx

@@ -42,7 +42,7 @@ export function AutoFormHeader({
   handleSchedulePublish,
   handleConflictOverride,
 }: AutoFormHeaderProps) {
-    const { t } = useTranslation();
+  const { t } = useTranslation();
   const [now, setNow] = useState(Date.now());
   const [showSchedulePicker, setShowSchedulePicker] = useState(false);
   const scheduleRef = useRef<HTMLDivElement>(null);
@@ -402,7 +402,7 @@ export function AutoFormHeader({
       </header>
 
       {/* DESKTOP HEADER */}
-      <header className="hidden md:flex surface-tile px-8 py-6 items-center justify-between sticky top-0 border-b border-[var(--kyro-border)] mb-8 bg-[var(--kyro-surface)] z-50 backdrop-blur-md">
+      <header className="hidden md:flex surface-tile px-8 py-6 items-center justify-between sticky top-0 border-b border-[var(--kyro-border)] mb-8 bg-[var(--kyro-surface)] z-50 backdrop-blur-md rounded-lg">
         <div className="flex flex-col gap-2 min-w-0">
           <div className="flex items-center gap-3 flex-wrap min-w-0">
             <a

package/src/components/fields/ArrayLayout.tsx

@@ -19,7 +19,7 @@ import {
 import { CSS } from "@dnd-kit/utilities";
 import { useTranslation } from "react-i18next";
 
-const SIMPLE_TYPES = new Set(["text", "number", "checkbox", "select", "radio", "color", "email", "password"]);
+const SIMPLE_TYPES = new Set(["text", "number", "checkbox", "select", "radio", "color", "email", "password", "url", "id"]);
 
 function extractLabelFromObj(obj: unknown): string | null {
   if (!obj || typeof obj !== "object") return null;
@@ -120,7 +120,7 @@ function SortableArrayItem({
       <div
         ref={setNodeRef}
         style={style}
-        className="flex items-start gap-2 px-3 py-1.5 border-b border-[var(--kyro-border)] last:border-b-0"
+        className="flex items-start gap-3 p-3.5 mb-2 border border-[var(--kyro-border)] rounded-[var(--kyro-radius-md)] bg-[var(--kyro-surface-accent)]/15 hover:border-[var(--kyro-border-accent)] transition-all group/item shadow-xs"
       >
         <div
           {...attributes}
@@ -132,9 +132,9 @@ function SortableArrayItem({
         <span className="text-[10px] font-bold text-[var(--kyro-text-muted)] pt-2.5 min-w-[18px] text-center">
           {index + 1}
         </span>
-        <div className={`flex-1 min-w-0 ${fields.length >= 3 ? "flex flex-col gap-1.5" : "flex items-start gap-1.5"}`}>
+        <div className={`flex-1 min-w-0 ${fields.length >= 3 ? "flex flex-col gap-2" : "grid grid-cols-1 sm:grid-cols-2 gap-3"}`}>
           {fields.map((f: Field) => (
-            <div key={f.name} className="flex-1 min-w-0">
+            <div key={f.name} className="min-w-0">
               {renderField(f, item, onChangeItem)}
             </div>
           ))}
@@ -143,10 +143,10 @@ function SortableArrayItem({
           type="button"
           disabled={disabled}
           onClick={onRemove}
-          className="text-[var(--kyro-text-muted)] hover:text-[var(--kyro-error)] transition-colors disabled:opacity-30 p-0.5 mt-1.5 flex-shrink-0"
+          className="text-[var(--kyro-text-muted)] hover:text-[var(--kyro-error)] transition-colors disabled:opacity-30 p-1 mt-1.5 flex-shrink-0 rounded hover:bg-[var(--kyro-surface-accent)]"
           title={t("tooltips.remove", { defaultValue: "Remove" })}
         >
-          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
             <line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" />
           </svg>
         </button>
@@ -437,7 +437,7 @@ export function ArrayLayout({
         onDragEnd={handleDragEnd}
       >
         {compact ? (
-          <div className="kyro-form-array kyro-form-array--compact border border-[var(--kyro-border)] bg-[var(--kyro-surface-accent)]/30 rounded-md overflow-hidden">
+          <div className="kyro-form-array kyro-form-array--compact border border-[var(--kyro-border)] bg-[var(--kyro-surface-accent)]/10 rounded-lg p-3">
             <SortableContext
               items={itemIds}
               strategy={verticalListSortingStrategy}
@@ -466,7 +466,7 @@ export function ArrayLayout({
             </SortableContext>
             <button
               type="button"
-              className="w-full py-2 border-2 border-dashed border-[var(--kyro-border)] rounded-none text-xs font-bold text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-primary)] hover:border-[var(--kyro-primary)] transition-all disabled:opacity-50"
+              className="w-full py-2.5 border border-dashed border-[var(--kyro-border)] rounded-md text-xs font-bold text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-primary)] hover:border-[var(--kyro-primary)] bg-[var(--kyro-surface)]/50 transition-all disabled:opacity-50 mt-1"
               disabled={disabled}
               onClick={() => onChange([...items, { id: Math.random().toString(36).substr(2, 9) }])}
             >

package/src/components/fields/CodeField.tsx

@@ -286,7 +286,6 @@ export const CodeField: React.FC<CodeFieldProps> = ({
         style={{ color: "var(--kyro-text-muted)" }}
       >
         <span>{value.split("\n").length} lines</span>
-        <span style={{ color: accent }}>CodeMirror</span>
       </div>
     </div>
   );

package/src/components/fields/TabsLayout.tsx

@@ -5,6 +5,7 @@ import { SeoPreview } from "../ui/SeoPreview";
 interface TabsLayoutProps {
   field: Field;
   formData: Record<string, unknown>;
+  collectionSlug?: string;
   onTabDataChange: (value: unknown) => void;
   renderField: (
     field: Field,
@@ -16,6 +17,7 @@ interface TabsLayoutProps {
 export function TabsLayout({
   field,
   formData,
+  collectionSlug,
   onTabDataChange,
   renderField,
 }: TabsLayoutProps) {
@@ -39,7 +41,7 @@ export function TabsLayout({
             <button
               key={index}
               type="button"
-              className={`px-6 py-3 text-sm  tracking-widest font-medium transition-all border-b-2 -mb-[1px] whitespace-nowrap ${
+              className={`px-6 py-3 text-sm tracking-widest font-medium transition-all border-b-2 -mb-[1px] whitespace-nowrap ${
                 activeTab === index
                   ? "border-[var(--kyro-primary)] text-[var(--kyro-primary)]"
                   : "border-transparent text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-text-primary)] opacity-60 hover:opacity-100"
@@ -63,7 +65,7 @@ export function TabsLayout({
 
       {currentTab?.label === "SEO Settings" && (
         <div className="mt-12 pt-8 border-t border-[var(--kyro-border)]">
-          <h4 className="text-[10px] font-bold text-[var(--kyro-text-secondary)]  tracking-[0.2em] mb-6 opacity-50">
+          <h4 className="text-[10px] font-bold text-[var(--kyro-text-secondary)] tracking-[0.2em] mb-6 opacity-50">
             Live Google Preview
           </h4>
           <SeoPreview
@@ -80,6 +82,7 @@ export function TabsLayout({
               (typeof formData.slug === "object" ? "" : formData.slug) ||
               "your-slug"
             )}
+            collectionSlug={collectionSlug}
           />
         </div>
       )}

package/src/components/ui/CommandPalette.tsx

@@ -140,7 +140,7 @@ export function CommandPalette({
       type: "action",
       view: "media",
       icon: ImageIcon,
-      visible: permissions?.collections?.media?.read !== false,
+      visible: isAdmin || permissions?.collections?.media?.read === true,
     },
     {
       id: "action-users",

package/src/components/ui/Dropdown.tsx

@@ -1,4 +1,5 @@
 import React, { useState, useRef, useEffect, type ReactNode } from "react";
+import { createPortal } from "react-dom";
 
 interface DropdownProps {
   trigger: ReactNode;
@@ -14,37 +15,91 @@ export function Dropdown({
   direction = "up",
 }: DropdownProps) {
   const [open, setOpen] = useState(false);
-  const ref = useRef<HTMLDivElement>(null);
+  const triggerRef = useRef<HTMLDivElement>(null);
+  const menuRef = useRef<HTMLDivElement>(null);
+  const [coords, setCoords] = useState<{ top?: number; bottom?: number; left?: number; right?: number }>({});
+  const [mounted, setMounted] = useState(false);
 
   useEffect(() => {
-    const handleClickOutside = (e: MouseEvent) => {
-      if (ref.current && !ref.current.contains(e.target as Node)) {
+    setMounted(true);
+  }, []);
+
+  useEffect(() => {
+    if (!open || !triggerRef.current) return;
+
+    const sidebar = triggerRef.current.closest("#kyro-sidebar");
+    const isMinimized = sidebar?.getAttribute("data-minimized") === "true";
+    const rect = triggerRef.current.getBoundingClientRect();
+
+    if (isMinimized) {
+      // Sidebar is minimized: float dropdown menu to the right of the sidebar rail
+      setCoords({
+        left: rect.right + 12,
+        bottom: Math.max(12, window.innerHeight - rect.bottom),
+      });
+    } else {
+      // Standard dropdown positioning inside trigger bounds
+      if (align === "right") {
+        setCoords({
+          right: Math.max(12, window.innerWidth - rect.right),
+          bottom: direction === "up" ? Math.max(12, window.innerHeight - rect.top + 8) : undefined,
+          top: direction === "down" ? rect.bottom + 8 : undefined,
+        });
+      } else {
+        setCoords({
+          left: rect.left,
+          bottom: direction === "up" ? Math.max(12, window.innerHeight - rect.top + 8) : undefined,
+          top: direction === "down" ? rect.bottom + 8 : undefined,
+        });
+      }
+    }
+
+    const handleOutsideClick = (e: MouseEvent) => {
+      if (
+        triggerRef.current && !triggerRef.current.contains(e.target as Node) &&
+        menuRef.current && !menuRef.current.contains(e.target as Node)
+      ) {
         setOpen(false);
       }
     };
 
-    if (open) {
-      document.addEventListener("mousedown", handleClickOutside);
-    }
-    return () => document.removeEventListener("mousedown", handleClickOutside);
-  }, [open]);
+    const handleScrollOrResize = () => {
+      setOpen(false);
+    };
+
+    document.addEventListener("mousedown", handleOutsideClick);
+    window.addEventListener("scroll", handleScrollOrResize, { capture: true, passive: true });
+    window.addEventListener("resize", handleScrollOrResize);
+
+    return () => {
+      document.removeEventListener("mousedown", handleOutsideClick);
+      window.removeEventListener("scroll", handleScrollOrResize, { capture: true });
+      window.removeEventListener("resize", handleScrollOrResize);
+    };
+  }, [open, align, direction]);
 
   return (
-    <div className="relative" ref={ref}>
+    <div className="relative inline-block" ref={triggerRef}>
       <div onClick={() => setOpen(!open)} className="cursor-pointer">
         {trigger}
       </div>
-      {open && (
+
+      {open && mounted && createPortal(
         <div
-          className={`absolute z-[100] min-w-[200px] py-2 bg-[var(--kyro-surface)] rounded-2xl shadow-2xl border border-[var(--kyro-border)] animate-in fade-in zoom-in-95 duration-100 ${
-            align === "right" ? "right-0" : "left-0"
-          } ${
-            direction === "down" ? "top-full mt-2" : "bottom-full mb-2"
-          }`}
+          ref={menuRef}
+          style={{
+            position: "fixed",
+            top: coords.top !== undefined ? `${coords.top}px` : "auto",
+            bottom: coords.bottom !== undefined ? `${coords.bottom}px` : "auto",
+            left: coords.left !== undefined ? `${coords.left}px` : "auto",
+            right: coords.right !== undefined ? `${coords.right}px` : "auto",
+          }}
+          className="z-[99999] min-w-[220px] max-h-[80vh] overflow-y-auto py-2 bg-[var(--kyro-surface)] rounded-2xl shadow-2xl border border-[var(--kyro-border)] animate-in fade-in zoom-in-95 duration-100"
           onClick={() => setOpen(false)}
         >
           {children}
-        </div>
+        </div>,
+        document.body
       )}
     </div>
   );

package/src/components/ui/PageHeader.tsx

@@ -170,7 +170,7 @@ export function PageHeader({
   const lastBreadcrumb = breadcrumbs?.[breadcrumbs.length - 1];
 
   return (
-    <div className="surface-tile px-3 md:px-6 py-3 md:pt-4 mb-4 md:mb-8">
+    <div className="surface-tile px-3 md:px-6 py-3 md:pt-4 mb-4 md:mb-8 rounded-lg">
       {/* ─── MOBILE ─── */}
       <div className="md:hidden space-y-2">
         {(breadcrumbs || back) && (

package/src/components/ui/Pagination.tsx

@@ -13,7 +13,7 @@ export function Pagination({ page, totalPages, totalDocs, limit, onPageChange, o
   if (totalPages <= 1) return null;
 
   return (
-    <div className="surface-tile flex flex-col sm:flex-row items-center justify-between gap-3 px-4 py-3 border-t border-[var(--kyro-border)]">
+    <div className="surface-tile flex flex-col sm:flex-row items-center justify-between gap-3 px-4 py-3 border-t border-[var(--kyro-border)] rounded-lg">
       {totalDocs !== undefined && limit ? (
         <span className="text-xs text-[var(--kyro-text-secondary)] font-medium">
           Showing {(page - 1) * limit + 1} to {Math.min(page * limit, totalDocs)} of {totalDocs}