@moontra/moonui 6.24.0 → 6.25.0

package/src/components/ui/button.tsx

@@ -1,6 +1,7 @@
 "use client"
 
 import * as React from "react";
+import { Slot, Slottable } from "@radix-ui/react-slot";
 import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "../../lib/utils";
 import { Loader2 } from "lucide-react";
@@ -112,9 +113,11 @@ const buttonVariants = cva(
         ],
         glow: [
           "bg-blue-500 text-white",
-          "shadow-[0_0_30px_rgba(59,130,246,0.5)]",
-          "hover:shadow-[0_0_40px_rgba(59,130,246,0.7)]",
-          "active:shadow-[0_0_20px_rgba(59,130,246,0.4)]",
+          // #664 S3: rgba(59,130,246,…) → --glow-blue-rgb (tokens.css). Değer AYNI
+          // (Tailwind blue-500), yalnız merkezi token'a taşındı — görsel değişiklik yok.
+          "shadow-[0_0_30px_rgba(var(--glow-blue-rgb),0.5)]",
+          "hover:shadow-[0_0_40px_rgba(var(--glow-blue-rgb),0.7)]",
+          "active:shadow-[0_0_20px_rgba(var(--glow-blue-rgb),0.4)]",
           "hover:bg-blue-600",
           "focus-visible:ring-blue-500/50",
           "transition-all duration-300",
@@ -143,8 +146,9 @@ const buttonVariants = cva(
           "bg-transparent text-green-400",
           "border-2 border-green-400",
           "hover:bg-green-400 hover:text-gray-900",
-          "hover:shadow-[0_0_30px_rgba(74,222,128,0.6)]",
-          "active:shadow-[0_0_15px_rgba(74,222,128,0.4)]",
+          // #664 S3: rgba(74,222,128,…) → --glow-green-rgb (tokens.css), piksel-özdeş.
+          "hover:shadow-[0_0_30px_rgba(var(--glow-green-rgb),0.6)]",
+          "active:shadow-[0_0_15px_rgba(var(--glow-green-rgb),0.4)]",
           "focus-visible:ring-green-400/50",
           "transition-all duration-300",
         ],
@@ -200,14 +204,21 @@ export interface ButtonProps
  * @param props.rightIcon - Icon on the right side
  * @param props.fullWidth - Full width display
  * @param props.rounded - Corner rounding style (default, full, none)
- * @param props.asChild - For Radix UI polymorphic component
+ * @param props.asChild - Renders the single child element instead of a native
+ *   `<button>` (Radix `Slot`), e.g. `<Button asChild><a href="/x">Go</a></Button>`.
+ *   The `buttonVariants` classes, the loading spinner and `leftIcon`/`rightIcon`
+ *   are merged INTO that child. Because non-button elements ignore the native
+ *   `disabled` attribute, `disabled`/`loading` are expressed as `aria-disabled` +
+ *   `data-disabled` plus inert styling, and activation is blocked in the click
+ *   handler. Falls back to a native `<button>` when the child is not a valid
+ *   React element.
  */
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ 
-    className, 
-    variant, 
-    size, 
-    rounded, 
+  ({
+    className,
+    variant,
+    size,
+    rounded,
     fullWidth,
     asChild = false,
     loading = false,
@@ -215,27 +226,74 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
     rightIcon,
     children,
     disabled,
-    ...props 
+    onClick,
+    ...props
   }, ref) => {
-    // Radix UI'ın asChild pattern'i için - "as" prop yerine
-    const Comp = asChild ? "button" : "button";
-    
+    // #649: `asChild` daha önce `asChild ? "button" : "button"` idi — ternary'nin iki
+    // dalı BİREBİR aynıydı, yani prop tipte ve docs'ta vaat edilmesine rağmen hiçbir
+    // şey yapmıyordu. Radix `Slot`a bağlandı (kardeş desen: breadcrumb #309, card #310).
+    //
+    // Slot TEK ve GEÇERLİ bir element çocuğu ister. `asChild` bugüne dek etkisiz
+    // olduğu için `<Button asChild>düz metin</Button>` yazan mevcut kullanım sorunsuz
+    // çalışıyordu; doğrudan Slot'a düşseydi sessizce BOŞ render ederdi. Bu yüzden
+    // çocuk element değilse native <button>'a geri düşülür.
+    const renderAsSlot = asChild && React.isValidElement(children);
+    const Comp = renderAsSlot ? Slot : "button";
+    const isDisabled = disabled || loading;
+
+    // asChild modunda çocuk <a>/<Link>/<span> olabilir; bu elemanlar native `disabled`
+    // özniteliğini TANIMAZ:
+    //   • React onu geçersiz bir öznitelik olarak DOM'a basar,
+    //   • `:disabled` hiç eşleşmez → cva'daki `disabled:*` stilleri ölü kalır,
+    //   • yardımcı teknoloji "devre dışı" duyurusunu alamaz.
+    // Bu yüzden devre dışılık Slot dalında ARIA + veri özniteliği ile ifade edilir;
+    // native `disabled` yalnız gerçek <button> dalında verilir.
+    const disabledProps = renderAsSlot
+      ? {
+          "aria-disabled": isDisabled || undefined,
+          "data-disabled": isDisabled ? "" : undefined,
+        }
+      : { disabled: isDisabled };
+
+    // asChild + devre dışı: `pointer-events-none` fareyi keser ama bir <a> klavyeden
+    // (Enter) hâlâ etkinleşir. Etkinleştirme burada durdurulur; `preventDefault`
+    // bağlantı gezinmesini de iptal eder.
+    // SINIR: Radix `Slot` olay işleyicilerini birleştirirken ÖNCE çocuğun kendi
+    // işleyicisini çağırır — çocuğa doğrudan bağlanmış bir `onClick` engellenemez.
+    const handleClick =
+      renderAsSlot && isDisabled
+        ? (event: React.MouseEvent<HTMLButtonElement>) => {
+            event.preventDefault();
+            event.stopPropagation();
+          }
+        : onClick;
+
     return (
       <Comp
-        className={cn("moonui-theme", buttonVariants({ variant, size, rounded, fullWidth, className }))}
+        className={cn(
+          "moonui-theme",
+          buttonVariants({ variant, size, rounded, fullWidth, className }),
+          // `:disabled` eşleşmediği için görsel/etkileşimsel devre dışılık Slot
+          // dalında açık sınıflarla verilir.
+          renderAsSlot && isDisabled && "opacity-50 cursor-not-allowed pointer-events-none"
+        )}
         ref={ref}
-        disabled={disabled || loading}
+        {...disabledProps}
         // Görsel spinner + data-loading vardı ama yardımcı teknolojiye meşgul
         // durumu hiç duyurulmuyordu.
         aria-busy={loading || undefined}
         data-loading={loading ? "" : undefined}
         {...props}
+        onClick={handleClick}
       >
         {loading && (
           <Loader2 className="w-4 h-4 animate-spin" aria-hidden="true" />
         )}
         {!loading && leftIcon}
-        {children}
+        {/* #649: Slot dalında spinner ve ikonlar `Slottable` sayesinde çocuğun İÇİNE
+            taşınır; aksi hâlde Slot birden çok çocuk görüp `Children.only` ile patlardı
+            ve `loading`/ikon sözleşmesi asChild'da tamamen kaybolurdu. */}
+        {renderAsSlot ? <Slottable>{children}</Slottable> : children}
         {!loading && rightIcon}
       </Comp>
     );

package/src/components/ui/card.tsx

@@ -21,17 +21,71 @@ import { microInteractionVariants, hoverAnimations, tapAnimations } from "@/lib/
 //   • `asChild`: yalnız tipteydi, gövdede hiç okunmuyordu → `...props` ile native div'e
 //     sızıyor (`<div aschild="true">`, React uyarısı). Radix `Slot`a bağlandı.
 
+// #646: cva TABANINDAKİ `dark:bg-gray-900` KALDIRILDI — `bg-card` token'ı zaten
+// aynı dizede duruyordu, ikisi birden gereksiz bir İKİNCİ katmandı.
+//
+// NEDEN kaldırıldı (mekanizma): `tailwind-merge` yalnız AYNI değiştirici (modifier)
+// kümesindeki sınıfları çakıştırır. Tüketicinin verdiği ÖNEKSİZ `bg-white/90`,
+// `dark:` önekli `dark:bg-gray-900` ile aynı grupta görülmediği için ikisi birden
+// hayatta kalıyor; koyu temada `.dark .dark\:bg-gray-900` daha yüksek özgüllükle
+// kazanıyordu. Yani component, tüketicinin arka planını SESSİZCE eziyordu.
+// Ölçüm (gradient-flow demosu, koyu tema): kart rgb(17,24,39)'de kalıyor, üstündeki
+// `text-gray-900` metinler TAM 1.00:1 — matematiksel olarak görünmez. Kaldırıldıktan
+// sonra `bg-white/90` kazanıyor: 1.00 → 14.46, 2.35 → 6.16, 1.72 → 8.40.
+//
+// GÖRSEL DELTA (tüketici override'ı YOKken): koyu temada varsayılan kart
+// rgb(17,24,39) → rgb(3,7,17) (= `bg-card`). Kartın kendi metniyle kontrastı
+// 16.12 → 18.31'e ÇIKAR; kenarlık (`dark:border-gray-800`) yüzeyden 1.17 → 1.35
+// ile daha iyi ayrışır. Bu, `elevated` varyantının #310'dan beri zaten yayımladığı
+// koyu yüzeyin ta kendisidir (`dark:bg-card`) — yani yeni bir görünüm değil.
+// Açık temada hiçbir değişiklik yok (`dark:` sınıfı orada zaten uygulanmıyordu).
+//
+// #643 (TERS PARİTE — free geride): #646 sonrasında bu dosyada HÂLÂ 12 ham `gray-*`
+// sınıfı duruyordu (issue "6" diyordu; yorumsuz gerçek sayım 12: 3+2+3+2+2), pro
+// `card.tsx`te 0. Tümü token'a taşındı. Ölçümler (WCAG 2.1 kontrast oranı, önce→sonra):
+//
+//   • `dark:text-gray-100` / `dark:text-gray-200` (4 yer) → KALDIRILDI.
+//     `text-card-foreground` zaten aynı dizede; `dark:` önekli sınıf onu ezmekle
+//     kalmıyor, #646'nın `dark:bg-gray-900` için belgelediği tuzağın aynısıyla
+//     TÜKETİCİNİN `text-*` override'ını da sessizce eziyordu (farklı değiştirici
+//     kümesi → `tailwind-merge` çakıştırmıyor, `.dark` özgüllüğü kazanıyor).
+//     Metin/yüzey kontrastı koyu temada 18.31 → 16.19 (AA 4.5'in 3.6 katı).
+//   • `dark:border-gray-800` → tabanda `border-border`. Koyu tema 1.37 → 1.36.
+//     BONUS: taban yalnız `border` (genişlik) taşıdığı için AÇIK temada kenar rengi
+//     token'dan değil Tailwind varsayılanı `gray-200`den geliyordu; artık token.
+//     Açık tema 1.24 → 1.23 (görsel olarak ayırt edilemez).
+//   • `outline` › `dark:border-gray-700` → KALDIRILDI (taban `border-border` yeterli).
+//     Koyu tema kenar/zemin 1.95 → 1.36. Bu bilinçli: `gray-700` sistemdeki TEK
+//     aykırı değerdi — input/popover/dialog dahil her component koyu temada zaten
+//     `--border`i (1.36) kullanıyor. tokens.css:163-166 `--border`i açıkça
+//     "dekoratif" ilan eder (metin eşiği uygulanmaz). Kart, sistemle hizalandı.
+//   • `filled` › `dark:bg-gray-800` → `dark:bg-muted`. Yüzey/sayfa-zemini AYRIŞMASI
+//     1.37 → 1.49 (İYİLEŞTİ); metin/yüzey 13.34 → 10.87 (AA'nın 2.4 katı).
+//     #368 `--muted`i tam bu rol için ("DEKORATİF YÜZEY", koyu temada ayrışmalı)
+//     ayarlamıştı.
+//     ⚠ Pro'nun seçimi (`dark:bg-secondary`) BİLİNÇLİ OLARAK REDDEDİLDİ: koyu temada
+//     `--secondary` = rgb(2,8,23), sayfa zemini rgb(3,7,17) → ayrışma 1.01, yani
+//     `filled` yüzeyi fiilen GÖRÜNMEZ. Ham-gri ihlalini görünmez-yüzey ihlaliyle
+//     takas etmemek için (#545 dersi) pro yerine `--muted` alındı; pro `card.tsx`
+//     de aynı ölçümle `--muted`e çekildi.
+//   • `dark:shadow-gray-900/20`, `…/30`, `dark:shadow-gray-950/10` → aynı alfalarla
+//     `dark:shadow-black`. Gölge rengi; koyu zeminde ölçülebilir kontrast rolü yok,
+//     pro idiyomu. (Not: bu blokta bilerek ardışık eğik-yıldız yazılmaz — depodaki
+//     regex tabanlı tarayıcılar onu blok yorum başlangıcı sanıp gerisini yutuyor.)
+//   • `glass` › `dark:border-gray-700/30` → `dark:border-white/10` (kenar/cam yüzey
+//     1.15 → 1.23, İYİLEŞTİ), `dark:bg-gray-800/10` → `dark:bg-black/10`
+//     (yüzey/zemin 1.02 → 1.01; cam varyantı zaten arkasındaki içeriği gösterir).
 const cardVariants = cva(
-  "rounded-lg border bg-card text-card-foreground shadow-sm dark:shadow-gray-900/20 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-100 transition-all duration-200",
+  "rounded-lg border border-border bg-card text-card-foreground shadow-sm dark:shadow-black/20 transition-all duration-200",
   {
     variants: {
       variant: {
         default: "",
-        outline: "border border-border shadow-none bg-transparent dark:border-gray-700 dark:bg-transparent dark:text-gray-200",
-        filled: "border-none bg-secondary dark:bg-gray-800 dark:text-gray-100 dark:shadow-inner dark:shadow-gray-950/10",
-        elevated: "border-none shadow-md dark:shadow-lg dark:shadow-gray-900/30 dark:bg-card dark:text-gray-100",
+        outline: "border border-border shadow-none bg-transparent dark:bg-transparent",
+        filled: "border-none bg-secondary dark:bg-muted dark:shadow-inner dark:shadow-black/10",
+        elevated: "border-none shadow-md dark:shadow-lg dark:shadow-black/30 dark:bg-card",
         gradient: "border-none bg-gradient-to-br from-primary/5 to-primary/10 dark:from-primary/10 dark:to-primary/20",
-        glass: "border border-white/20 bg-white/10 backdrop-blur-md dark:border-gray-700/30 dark:bg-gray-800/10",
+        glass: "border border-white/20 bg-white/10 backdrop-blur-md dark:border-white/10 dark:bg-black/10",
       },
       size: {
         md: "",

package/src/components/ui/dropdown-menu.tsx

@@ -6,7 +6,91 @@ import { Check, ChevronRight, Circle } from "lucide-react"
 
 import { cn } from "../../lib/utils"
 
-const DropdownMenu = DropdownMenuPrimitive.Root
+/* #645 — Menü açıkken Tab hiçbir şey yapmıyordu.
+ *
+ * KÖK NEDEN (Radix kaynağı, `@radix-ui/react-menu` → `MenuContentImpl`):
+ *   if (isKeyDownInside) { if (event.key === "Tab") event.preventDefault(); ... }
+ * Radix, Tab'ı bilinçli olarak yutuyor ("menus should not be navigated using tab
+ * key") ama karşılığında HİÇBİR ŞEY yapmıyor — menü ne kapanıyor ne odak
+ * ilerliyor. Üstelik `modal` menüde `FocusScope` da `trapped` olduğu için odak
+ * konteynerden çıkamıyor. Yani kusur sarmalayıcımızda değil, devraldığımız
+ * Radix davranışında.
+ *
+ * SEÇİLEN SEMANTİK: WAI-ARIA APG "menu button" — menü TEK bir tab durağıdır;
+ * Tab menüyü kapatır ve odağı tetikleyiciye döndürür (Escape ile aynı çıkış
+ * yolu, dolayısıyla ailede tutarlı). Alt menüde basılan Tab da kökü kapatır.
+ *
+ * Kapatma için köke kontrollü bir açık/kapalı durumu takılır; `close` yalnız bu
+ * dosyanın içinde, public export açılmadan paylaşılır (#667).
+ */
+const DropdownMenuCloseContext = React.createContext<(() => void) | null>(null)
+
+type DropdownMenuRootProps = React.ComponentPropsWithoutRef<
+  typeof DropdownMenuPrimitive.Root
+>
+
+const DropdownMenu = ({
+  open,
+  defaultOpen,
+  onOpenChange,
+  children,
+  ...props
+}: DropdownMenuRootProps) => {
+  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(
+    defaultOpen ?? false
+  )
+  const isControlled = open !== undefined
+  const currentOpen = isControlled ? open : uncontrolledOpen
+
+  const handleOpenChange = React.useCallback(
+    (nextOpen: boolean) => {
+      if (!isControlled) setUncontrolledOpen(nextOpen)
+      onOpenChange?.(nextOpen)
+    },
+    [isControlled, onOpenChange]
+  )
+
+  const close = React.useCallback(() => handleOpenChange(false), [
+    handleOpenChange,
+  ])
+
+  return (
+    <DropdownMenuCloseContext.Provider value={close}>
+      <DropdownMenuPrimitive.Root
+        {...props}
+        open={currentOpen}
+        onOpenChange={handleOpenChange}
+      >
+        {children}
+      </DropdownMenuPrimitive.Root>
+    </DropdownMenuCloseContext.Provider>
+  )
+}
+DropdownMenu.displayName = "DropdownMenu"
+
+/**
+ * Menü içeriğinde Tab'ı WAI-ARIA menü sözleşmesine bağlayan ortak işleyici.
+ * Alt menülerden köpüren tuş olayları yok sayılır — onları kendi içerikleri ele alır.
+ */
+function useDropdownMenuTabDismiss(
+  onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>
+) {
+  const close = React.useContext(DropdownMenuCloseContext)
+  return (event: React.KeyboardEvent<HTMLDivElement>) => {
+    onKeyDown?.(event)
+    if (event.defaultPrevented) return
+    if (event.key !== "Tab") return
+    if (event.altKey || event.ctrlKey || event.metaKey) return
+    if (!close) return
+    const target = event.target as HTMLElement | null
+    if (target?.closest("[data-radix-menu-content]") !== event.currentTarget) {
+      return
+    }
+    // Odağı Radix'in `onCloseAutoFocus`'u tetikleyiciye geri taşır.
+    event.preventDefault()
+    close()
+  }
+}
 
 const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
 
@@ -43,27 +127,36 @@ DropdownMenuSubTrigger.displayName =
 const DropdownMenuSubContent = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
->(({ className, ...props }, ref) => (
+>(({ className, onKeyDown, ...props }, ref) => {
+  // #645: alt menüde Tab da kökü kapatır (WAI-ARIA: tüm ata menüler kapanır).
+  const handleKeyDown = useDropdownMenuTabDismiss(onKeyDown)
+  return (
   <DropdownMenuPrimitive.SubContent
     ref={ref}
+    onKeyDown={handleKeyDown}
     className={cn(
       "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       className
     )}
     {...props}
   />
-))
+  )
+})
 DropdownMenuSubContent.displayName =
   DropdownMenuPrimitive.SubContent.displayName
 
 const DropdownMenuContent = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
+>(({ className, sideOffset = 4, onKeyDown, ...props }, ref) => {
+  // #645: Tab menüyü kapatır, odak tetikleyiciye döner.
+  const handleKeyDown = useDropdownMenuTabDismiss(onKeyDown)
+  return (
   <DropdownMenuPrimitive.Portal>
     <DropdownMenuPrimitive.Content
       ref={ref}
       sideOffset={sideOffset}
+      onKeyDown={handleKeyDown}
       className={cn(
         "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         className
@@ -71,7 +164,8 @@ const DropdownMenuContent = React.forwardRef<
       {...props}
     />
   </DropdownMenuPrimitive.Portal>
-))
+  )
+})
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
 
 const DropdownMenuItem = React.forwardRef<

package/src/components/ui/file-upload.tsx

@@ -376,6 +376,10 @@ export const FileUpload = React.forwardRef<HTMLDivElement, FileUploadProps>(
         <motion.div
           className={cn(
             "relative border-2 border-dashed rounded-lg p-8 text-center transition-colors",
+            // #661-2: dosya girdisi `opacity-0` ile tum alani kapliyor; klavyeyle
+            // Tab'landiginda HICBIR gorsel iz yoktu (WCAG 2.4.7). Odak halkasi
+            // sarmalayiciya `focus-within` ile bagli — kutunun kendisi odaklanamaz.
+            "focus-within:outline-none focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2",
             isDragOver && "border-primary bg-primary/5",
             disabled && "opacity-50 cursor-not-allowed",
             !disabled && "hover:border-primary/50 cursor-pointer"

package/src/components/ui/index.ts

@@ -363,7 +363,10 @@ export type {
 } from "./select";
 
 // Separator
-export { Separator as MoonUISeparator } from "./separator";
+// #643 (#667 ile açıldı) — TERS PARİTE kapatıldı: pro barrel `MoonUISeparatorProProps`i
+// dışa açıyordu, free tarafta MoonUI önekli yüzey eksikti.
+export { Separator as MoonUISeparator, separatorVariants as moonUISeparatorVariants } from "./separator";
+export type { SeparatorProps as MoonUISeparatorProps } from "./separator";
 
 // SimpleEditor
 export { SimpleEditor as MoonUISimpleEditor } from "./simple-editor";

package/src/components/ui/popover-pro.tsx

@@ -1,5 +1,46 @@
 "use client"
 
+/**
+ * #664 (S9) — ÖLÜ DOSYA. Silinmedi; gerekçesi aşağıda. Silmeden ÖNCE bu notu okuyun.
+ *
+ * ── DURUM: bu dosya hiçbir yerden erişilemiyor ───────────────────────────────
+ * Dört kanıt (2026-08-28 ölçümü):
+ *   1. Barrel'da yok      — `components/ui/index.ts`, `src/index.tsx` ve
+ *                           `popover.tsx` içinde `popover-pro` grep'i **0**.
+ *   2. Yayımlı yüzeyde yok — `packages/moonui/dist/index.d.ts` içinde
+ *                           `PopoverHeaderPro` / `PopoverContentProProps` **0**.
+ *   3. Tüketici yok       — repo genelinde bu dosyayı import eden **0** modül.
+ *   4. Kanonik başka yerde — docs'un GERÇEKTEN kullandığı Pro popover
+ *                           `MoonUIPopoverPro`'dur ve
+ *                           `packages/moonui-pro/src/components/ui/popover.tsx`te
+ *                           yaşar (`src/docs-config/popover.config.tsx:47-51`
+ *                           oradan import eder; yayımlı moonui-pro dist'inde var).
+ *
+ * ── NEDEN EXPORT EDİLMİYOR (kalıcı hüküm) ────────────────────────────────────
+ * Export etmek kusuru P3'ten P2'ye YÜKSELTİR: `customBackdrop` (:~215) ve
+ * `focusTrap` (:~219) ilan edilip varsayılanlarıyla destructure ediliyor ama
+ * gövdede HİÇ okunmuyor — public API'ye iki ölü prop eklemek olurdu.
+ * Ayrıca #667 registry kilidi: yayımlanmamış bir export eklenirse registry
+ * *tazelik* ya da *tutarlılık* kapısından biri mutlaka kırmızıya döner.
+ *
+ * ── NEDEN BU KOŞUDA SİLİNMEDİ (gerekçe — "zahmetli" DEĞİL) ───────────────────
+ * `scripts/lib/free-registry.js:285-288` free registry'yi diskteki dosya
+ * listesinden üretir ve barrel'da olmayan her modülü `excluded.notExported`
+ * altına yazar. Bu dosya şu an `free-registry.generated.json:27-29`ta öyle
+ * duruyor. Dosyayı silmek üretilen JSON'u ZORUNLU olarak değiştirir →
+ * `npm run check:free-registry` kırmızıya döner ve düzeltmenin tek yolu
+ * registry çıktısını yeniden üretmektir. Bu koşunun kısıtı registry generated
+ * dosyalarını yeniden üretmeyi yasaklıyor.
+ *
+ * ── YAPILACAK: #667 yayın kontrol listesinde sil ─────────────────────────────
+ * #667 zaten bump anında `build:free-registry` koşup çıktıyı commit'lemeyi
+ * planlıyor. Silme O ADIMLA BİRLİKTE yapılmalı — tek komut:
+ *     git rm packages/moonui/src/components/ui/popover-pro.tsx
+ *     npm run build:free-registry
+ * Silme kararı teknik olarak ONAYLI; bekleyen tek şey registry'yi yeniden
+ * üretme iznidir.
+ */
+
 import * as React from "react"
 import * as PopoverPrimitive from "@radix-ui/react-popover"
 import { motion, AnimatePresence, useSpring, useTransform } from "framer-motion"

package/src/components/ui/popover.tsx

@@ -65,7 +65,119 @@ const popoverContentVariants = cva(
   }
 );
 
-const Popover = PopoverPrimitive.Root;
+/* #645 — Tab odağı popover konteynerinde donuyordu.
+ *
+ * KÖK NEDEN (Radix kaynağı, `@radix-ui/react-popover` → `PopoverContentImpl`):
+ * içerik her zaman `FocusScope`'a `loop: true` ile sarılır; `trapped` yalnız
+ * `modal` popover'da true olur. Ancak `FocusScope`'un Tab işleyicisi
+ * `if (!loop && !trapped) return;` diyerek `loop` tek başına yeterli sayılıyor:
+ *   - içerikte hiç odaklanabilir eleman YOKSA → `event.preventDefault()` (odak donar)
+ *   - varsa → son elemandan sonra başa döndürür (non-modal'da yanlış tuzak)
+ * Yani kusur sarmalayıcımızda değil, Radix'in devraldığımız davranışında.
+ *
+ * SEÇİLEN SEMANTİK: popover = non-modal disclosure. Tab içeriğe girer, içeride
+ * doğal DOM sırasında ilerler, KENARDA (ilk/son eleman ya da hiç odaklanabilir
+ * yok) overlay'den çıkar; çıkış Radix'in `onFocusOutside` yolunu tetiklediği için
+ * popover kapanır. `modal` popover'da WAI-ARIA gereği tuzak KORUNUR.
+ */
+const PopoverModalContext = React.createContext(false);
+
+/** Bir düğümün gerçek bir Tab durağı olup olmadığı. */
+const POPOVER_TAB_STOP_SELECTOR =
+  "a[href],button,input,select,textarea,[tabindex],audio[controls],video[controls],[contenteditable]";
+
+/* Görünürlük ölçütü bilinçli olarak Radix'in `findVisible`/`isHidden` mantığıyla
+   AYNI: `getClientRects()` yerine hesaplanmış stil. Böylece hem tarayıcıda hem
+   düzen motoru olmayan jsdom'da aynı sonucu verir. */
+function isPopoverElementHidden(node: HTMLElement) {
+  const view = node.ownerDocument.defaultView;
+  if (!view) return false;
+  if (view.getComputedStyle(node).visibility === "hidden") return true;
+  let current: HTMLElement | null = node;
+  while (current) {
+    if (view.getComputedStyle(current).display === "none") return true;
+    current = current.parentElement;
+  }
+  return false;
+}
+
+function isPopoverTabStop(node: HTMLElement) {
+  if (node.hasAttribute("data-radix-focus-guard")) return false;
+  if (node.tabIndex < 0) return false;
+  if ((node as HTMLButtonElement).disabled) return false;
+  if (node.hidden) return false;
+  if (node.getAttribute("aria-hidden") === "true") return false;
+  if (node.closest("[inert]")) return false;
+  return !isPopoverElementHidden(node);
+}
+
+function getPopoverTabStopsWithin(container: HTMLElement) {
+  return Array.from(
+    container.querySelectorAll<HTMLElement>(POPOVER_TAB_STOP_SELECTOR)
+  ).filter(isPopoverTabStop);
+}
+
+/** Radix tetikleyiciyi `aria-controls` ile içeriğe bağlar; çıkış referansı odur. */
+function getPopoverTrigger(content: HTMLElement) {
+  if (!content.id) return null;
+  const id =
+    typeof CSS !== "undefined" && typeof CSS.escape === "function"
+      ? CSS.escape(content.id)
+      : content.id;
+  return content.ownerDocument.querySelector<HTMLElement>(
+    `[aria-controls="${id}"]`
+  );
+}
+
+/** İçerik dışında, referansa göre bir sonraki/önceki gerçek Tab durağı. */
+function getPopoverTabStopOutside(
+  reference: HTMLElement,
+  content: HTMLElement,
+  direction: "next" | "previous"
+) {
+  const candidates = Array.from(
+    content.ownerDocument.querySelectorAll<HTMLElement>(
+      POPOVER_TAB_STOP_SELECTOR
+    )
+  ).filter((node) => !content.contains(node) && isPopoverTabStop(node));
+
+  if (direction === "next") {
+    return (
+      candidates.find((node) =>
+        Boolean(
+          reference.compareDocumentPosition(node) &
+            Node.DOCUMENT_POSITION_FOLLOWING
+        )
+      ) ?? null
+    );
+  }
+
+  let previous: HTMLElement | null = null;
+  for (const node of candidates) {
+    const relation = reference.compareDocumentPosition(node);
+    if (node === reference || relation & Node.DOCUMENT_POSITION_PRECEDING) {
+      previous = node;
+    } else {
+      break;
+    }
+  }
+  return previous;
+}
+
+/* Yeni public export açılmaz (#667) — tip yerel kalır. */
+type PopoverRootProps = React.ComponentPropsWithoutRef<
+  typeof PopoverPrimitive.Root
+>;
+
+const Popover = ({ modal = false, children, ...props }: PopoverRootProps) => (
+  <PopoverModalContext.Provider value={modal}>
+    <PopoverPrimitive.Root {...props} modal={modal}>
+      {children}
+    </PopoverPrimitive.Root>
+  </PopoverModalContext.Provider>
+);
+Popover.displayName = "Popover";
+
 const PopoverTrigger = PopoverPrimitive.Trigger;
 const PopoverAnchor = PopoverPrimitive.Anchor;
 
@@ -101,8 +213,49 @@ const PopoverContent = React.forwardRef<
   closeOnInteractOutside = true,
   overlayBackdrop = false,
   sideOffset = 4,
+  onKeyDown,
   ...props
-}, ref) => (
+}, ref) => {
+  const isModal = React.useContext(PopoverModalContext);
+
+  /* #645: yalnız KENAR durumlarını devral — Radix'in içerideki doğal Tab
+     akışına dokunulmaz. Modal popover'da hiç devreye girmez. */
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+    onKeyDown?.(event);
+    if (event.defaultPrevented) return;
+    if (isModal) return;
+    if (event.key !== "Tab") return;
+    if (event.altKey || event.ctrlKey || event.metaKey) return;
+
+    const content = event.currentTarget;
+    const active = content.ownerDocument.activeElement as HTMLElement | null;
+    if (!active || (active !== content && !content.contains(active))) return;
+
+    const tabStops = getPopoverTabStopsWithin(content);
+    const forward = !event.shiftKey;
+    const atEdge =
+      tabStops.length === 0
+        ? active === content
+        : active === (forward ? tabStops[tabStops.length - 1] : tabStops[0]);
+    if (!atEdge) return;
+
+    const reference = getPopoverTrigger(content) ?? content;
+    const target = getPopoverTabStopOutside(
+      reference,
+      content,
+      forward ? "next" : "previous"
+    );
+
+    event.preventDefault();
+    if (target) {
+      target.focus();
+    } else {
+      // Gidilecek durak yoksa bile odak konteynerde kilitli KALMAMALI.
+      active.blur();
+    }
+  };
+
+  return (
   <>
     {overlayBackdrop && (
       <div
@@ -126,11 +279,12 @@ const PopoverContent = React.forwardRef<
           e.preventDefault();
         }
       }}
+      onKeyDown={handleKeyDown}
       className={cn(
-        popoverContentVariants({ 
-          variant, 
-          size, 
-          side, 
+        popoverContentVariants({
+          variant,
+          size,
+          side,
           position,
           radius,
           shadow
@@ -141,7 +295,8 @@ const PopoverContent = React.forwardRef<
       {...props}
     />
   </>
-));
+  );
+});
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 
 /**