@moontra/moonui 6.24.0 → 6.26.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";
@@ -86,10 +87,15 @@ const buttonVariants = cva(
           "transition-all duration-200",
         ],
         success: [
+          // Koyu temada `--success` (#16a34a) foreground'uyla 3.15 veriyordu (AA 4.5
+          // ister) — `--destructive`in #544'teki birebir aynı kusuru. Açık tema
+          // dokunulmadı (#442 kuralı: geçen yüzeyde regresyon riski açma).
+          // Dolgu opak `success` skalasına bağlandı: -600 hâlâ 3.15, ölçümle geçen
+          // en açık kademe -700 (4.79).
           "bg-success text-success-foreground",
-          "dark:bg-success dark:text-success-foreground",
-          "hover:bg-success/90 dark:hover:bg-success/90",
-          "active:bg-success/80 dark:active:bg-success/80",
+          "dark:bg-success-700 dark:text-success-foreground",
+          "hover:bg-success/90 dark:hover:bg-success-800",
+          "active:bg-success/80 dark:active:bg-success-900",
           "shadow-sm hover:shadow-md", 
           "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
           "transition-all duration-200",
@@ -111,11 +117,16 @@ const buttonVariants = cva(
           "transition-all duration-300",
         ],
         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)]",
-          "hover:bg-blue-600",
+          // blue-500 (#3b82f6) beyaz metinle 3.68 veriyordu (AA 4.5 ister).
+          // Ölçümle geçen en açık kademe blue-600 (#2563eb → 5.17); parıltı
+          // gölgesi `--glow-blue-rgb` üzerinden AYNI kaldı, yalnız dolgu koyulaştı.
+          "bg-blue-600 text-white",
+          // #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-700",
           "focus-visible:ring-blue-500/50",
           "transition-all duration-300",
         ],
@@ -124,7 +135,12 @@ const buttonVariants = cva(
           "hover:bg-primary/20",
           "active:bg-primary/30",
           "focus-visible:ring-primary/50",
-          "dark:bg-primary/20 dark:text-primary-foreground",
+          // Koyu temada `bg-primary/20` + `text-primary-foreground` 1.76 veriyordu:
+          // dark `--primary` neredeyse beyaz olduğu için /20 açık-gri bir zemin
+          // üretiyor, `--primary-foreground` ise koyu — ikisi birbirini yiyordu.
+          // #354'ün sidebar'da kanıtlanmış çözümü: subtle token ÇİFTİ (zemin+metin
+          // birlikte tanımlı, koyu temada koyu zemin + açık metin).
+          "dark:bg-primary-subtle dark:text-primary-subtle-foreground",
           "dark:hover:bg-primary/30 dark:active:bg-primary/40",
           "transition-colors duration-200",
         ],
@@ -143,8 +159,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 +217,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 +239,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"