@moontra/moonui 6.24.0 → 6.26.0

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;
 
 /**

package/src/components/ui/rating.tsx

@@ -138,6 +138,20 @@ const Rating = React.forwardRef<HTMLDivElement, RatingProps>(
       [readOnly, max, currentValue, step, commit]
     );
 
+    // #661-7: `role="radiogroup"` sarmalayıcısı tek tab durağıydı ve her
+    // `role="radio"` düğmesi `tabIndex={-1}` taşıyordu; ne roving-tabindex ne de
+    // `aria-activedescendant` vardı. Klavyeyle değer DEĞİŞİYORDU ama yardımcı
+    // teknolojiye HANGİ radyonun aktif olduğu hiç bildirilmiyordu (ARIA composite
+    // widget sözleşmesi ihlali). Odak DOM'da yerinde kalsın diye
+    // `aria-activedescendant` yolu seçildi — klavye davranışı değişmez.
+    const reactId = React.useId();
+    const optionId = React.useCallback(
+      (optionValue: number) => `${reactId}-option-${String(optionValue).replace(".", "-")}`,
+      [reactId]
+    );
+    // Henüz seçim yoksa ARIA'nın istediği gibi İLK seçenek aktif kabul edilir.
+    const activeValue = currentValue >= step && currentValue <= max ? currentValue : step;
+
     // İkonu doldurmalı/boş olarak üret (özel ikon desteklenir)
     const renderIcon = (filled: boolean): React.ReactNode => {
       if (React.isValidElement(icon)) {
@@ -168,6 +182,7 @@ const Rating = React.forwardRef<HTMLDivElement, RatingProps>(
         aria-label={ariaLabel}
         aria-orientation="horizontal"
         aria-readonly={readOnly || undefined}
+        aria-activedescendant={readOnly ? undefined : optionId(activeValue)}
         tabIndex={readOnly ? undefined : 0}
         onKeyDown={handleKeyDown}
         onMouseLeave={() => setHoverValue(null)}
@@ -193,10 +208,14 @@ const Rating = React.forwardRef<HTMLDivElement, RatingProps>(
                 {renderIcon(false)}
               </span>
 
-              {/* Dolu katman — overflow-hidden maske ile kısmi doldurma */}
+              {/* Dolu katman — overflow-hidden maske ile kısmi doldurma.
+                  #664 S3: `text-amber-400` → `--rating-star-rgb` (tokens.css).
+                  Değer AYNI (Tailwind amber-400) — yıldız rozeti bir DURUM rengi
+                  değil marka/konvansiyon rengidir, `--warning` token'ına
+                  çevirmek farklı bir tona (yellow ailesi) kayardı (§9). */}
               <span
                 aria-hidden="true"
-                className="pointer-events-none absolute left-0 top-0 h-full overflow-hidden text-amber-400"
+                className="pointer-events-none absolute left-0 top-0 h-full overflow-hidden text-[rgb(var(--rating-star-rgb))]"
                 style={{ width: `${fraction * 100}%` }}
               >
                 {renderIcon(true)}
@@ -208,6 +227,7 @@ const Rating = React.forwardRef<HTMLDivElement, RatingProps>(
                   <button
                     type="button"
                     role="radio"
+                    id={optionId(halfValue)}
                     aria-checked={currentValue === halfValue}
                     aria-label={`${halfValue} stars`}
                     tabIndex={-1}
@@ -218,6 +238,7 @@ const Rating = React.forwardRef<HTMLDivElement, RatingProps>(
                   <button
                     type="button"
                     role="radio"
+                    id={optionId(starValue)}
                     aria-checked={currentValue === starValue}
                     aria-label={`${starValue} stars`}
                     tabIndex={-1}
@@ -232,6 +253,7 @@ const Rating = React.forwardRef<HTMLDivElement, RatingProps>(
                 <button
                   type="button"
                   role="radio"
+                  id={optionId(starValue)}
                   aria-checked={currentValue === starValue}
                   aria-label={`${starValue} ${starValue === 1 ? "star" : "stars"}`}
                   tabIndex={-1}

package/src/components/ui/select.tsx

@@ -114,7 +114,7 @@ const SelectTrigger = React.forwardRef<
    * Tüketici kendi `aria-label`/`aria-labelledby`sini verdiyse ona dokunulmaz.
    */
   const icerikId = React.useId()
-  const adVerilmis =
+  const isNamed =
     props["aria-label"] != null || props["aria-labelledby"] != null
 
   return (
@@ -136,7 +136,7 @@ const SelectTrigger = React.forwardRef<
     data-error={error ? true : undefined}
     data-success={success ? true : undefined}
     data-loading={loading ? true : undefined}
-    aria-labelledby={adVerilmis ? props["aria-labelledby"] : icerikId}
+    aria-labelledby={isNamed ? props["aria-labelledby"] : icerikId}
   >
     <div id={icerikId} className="flex items-center flex-1 gap-2">
       {leftIcon && (
@@ -296,8 +296,8 @@ const SelectItem = React.forwardRef<
       variant === "default" && "focus:bg-accent focus:text-accent-foreground dark:focus:bg-gray-700 dark:focus:text-gray-100",
       variant === "subtle" && "focus:bg-gray-100 dark:focus:bg-gray-800 focus:text-foreground dark:focus:text-gray-200",
       variant === "destructive" && "text-error dark:text-red-400 focus:bg-error/10 dark:focus:bg-red-900/20 focus:text-error dark:focus:text-red-300",
-      variant === "success" && "text-success dark:text-green-400 focus:bg-success/10 dark:focus:bg-green-900/20 focus:text-success dark:focus:text-green-300",
-      variant === "warning" && "text-warning dark:text-yellow-400 focus:bg-warning/10 dark:focus:bg-yellow-900/20 focus:text-warning dark:focus:text-yellow-300",
+      variant === "success" && "text-success focus:bg-success/10 focus:text-success",
+      variant === "warning" && "text-warning-700 dark:text-warning-500 focus:bg-warning/10 focus:text-warning-700 dark:focus:text-warning-500",
       
       className
     )}

package/src/components/ui/simple-editor.tsx

@@ -283,24 +283,9 @@ export const SimpleEditor = React.forwardRef<HTMLDivElement, SimpleEditorProps>(
       }
     }, [executeCommand, updateContent])
 
-    // Convert HTML to plain text for preview
-    const getPlainText = (html: string) => {
-      if (typeof window === 'undefined') {
-        // Server-side: simple regex-based HTML stripping
-        return html
-          .replace(/<[^>]*>/g, '') // Remove HTML tags
-          .replace(/&nbsp;/g, ' ') // Replace &nbsp; with space
-          .replace(/&amp;/g, '&')  // Replace &amp; with &
-          .replace(/&lt;/g, '<')   // Replace &lt; with <
-          .replace(/&gt;/g, '>')   // Replace &gt; with >
-          .replace(/&quot;/g, '"') // Replace &quot; with "
-          .replace(/&#39;/g, "'")  // Replace &#39; with '
-      }
-      // Client-side: use DOM for accurate conversion
-      const div = document.createElement('div')
-      div.innerHTML = html
-      return div.textContent || div.innerText || ''
-    }
+    /* #664 (S9): burada duran ikinci bir `getPlainText` kopyası SİLİNDİ — component
+       gövdesinde tanımlanıp hiçbir yerden çağrılmıyordu (0 çağrı yeri). Karakter
+       sayacı kendi kopyasını `CharacterCount` içinde tutuyor; canlı olan odur. */
 
     React.useEffect(() => {
       if (editorRef.current && content && content !== editorRef.current.innerHTML) {

package/src/components/ui/tabs.tsx

@@ -132,7 +132,22 @@ const tabsTriggerVariants = cva(
       variant: {
         default: "rounded-md data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm dark:data-[state=active]:bg-gray-900 dark:data-[state=active]:text-gray-100 dark:data-[state=active]:shadow-gray-950/10",
         underline: "rounded-none border-b-2 border-transparent pb-2 data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:text-foreground dark:data-[state=active]:border-primary/80 dark:data-[state=active]:text-gray-100",
-        pills: "rounded-lg bg-gray-100 hover:bg-gray-200/80 border border-gray-300 data-[state=active]:bg-primary data-[state=active]:text-primary-foreground data-[state=active]:border-primary dark:bg-gray-800 dark:hover:bg-gray-700 dark:border-gray-700 dark:data-[state=active]:bg-primary/90 dark:data-[state=active]:text-white dark:data-[state=active]:border-primary",
+        // #646: `dark:data-[state=active]:text-white` KALDIRILDI. `--primary` koyu
+        // temada BİLİNÇLİ near-white'tır (tokens.css:500, #368 kararı — DEĞİŞMEZ),
+        // dolayısıyla aktif pill'e açıkça beyaz metin yazmak beyaz-üstüne-beyaz
+        // demekti: ölçülen 1.28:1 (gerçek tarayıcı, /docs/components/tabs, koyu tema).
+        // Sınıf kalkınca öneksiz `data-[state=active]:text-primary-foreground`
+        // (koyu temada near-black) devreye girer → 15.91:1. Açık temada hiçbir
+        // değişiklik yok (`dark:` sınıfı orada zaten uygulanmıyordu; ölçülen 4.70:1).
+        //
+        // ⚠️ `dark:data-[state=active]:bg-primary/90` BİLEREK KORUNDU: onu da
+        // kaldırmak #545'in "ihlal takası" tuzağına düşürüyor. Aynı varyanttaki
+        // `dark:bg-gray-800` (inaktif zemin) ile `data-[state=active]:bg-primary`
+        // ÖZGÜLLÜKÇE EŞİT (0,2,0); kaynak sırası nedeniyle `dark:bg-gray-800`
+        // kazanıyor ve aktif pill koyu temada inaktif görünüyordu — near-black metin
+        // gray-800 üstünde 1.41:1 ile YENİ bir ihlal (ölçüldü). Koyu temada aktif
+        // durumun zemini bu yüzden `dark:` özgüllüğünde kalmak ZORUNDA.
+        pills: "rounded-lg bg-gray-100 hover:bg-gray-200/80 border border-gray-300 data-[state=active]:bg-primary data-[state=active]:text-primary-foreground data-[state=active]:border-primary dark:bg-gray-800 dark:hover:bg-gray-700 dark:border-gray-700 dark:data-[state=active]:bg-primary/90 dark:data-[state=active]:border-primary",
         cards: "rounded-md bg-muted/50 hover:bg-muted data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-md dark:bg-gray-800/50 dark:hover:bg-gray-700/50 dark:data-[state=active]:bg-gray-900 dark:data-[state=active]:text-gray-100 dark:data-[state=active]:shadow-gray-950/20",
         minimal: "rounded-sm bg-transparent hover:bg-muted/30 data-[state=active]:bg-transparent data-[state=active]:text-foreground data-[state=active]:underline data-[state=active]:underline-offset-4 dark:hover:bg-gray-800/30 dark:data-[state=active]:text-gray-200",
       },

package/src/components/ui/textarea.tsx

@@ -222,8 +222,13 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
           )}
 
           {/* Character Count */}
+          {/* #661-14: `dark:text-gray-500` KALDIRILDI. `text-muted-foreground`
+              zaten koyu temada 62% L üretiyor (kart üstünde 6.29:1); üstüne
+              binen `dark:` katmanı gray-500'e düşürüp 3.68:1 veriyordu — yani
+              token DOĞRUYKEN ikinci katman onu AA altına indiriyordu (#646 ile
+              aynı kusur sınıfı). Açık temada değişiklik yok. */}
           {showCharCount && (
-            <p className="text-xs text-muted-foreground dark:text-gray-500 ml-auto">
+            <p className="text-xs text-muted-foreground ml-auto">
               {currentLength}{maxLength !== undefined && ` / ${maxLength}`}
             </p>
           )}

package/src/components/ui/toast.tsx

@@ -160,7 +160,22 @@ const addToRemoveQueue = (toastId: string) => {
   toastTimeouts.set(toastId, timeout);
 };
 
-const reducer = (state: State, action: any): State => {
+/**
+ * Store eylemleri. Önceden `action: any` idi (#664 S1): `dispatch({ type: "TYPO" })`
+ * gibi bir çağrı sessizce `default` dalına düşüp hiçbir şey yapmıyordu ve tip
+ * denetimi bunu yakalayamıyordu. Ayrımlı birlik (discriminated union) o dalı
+ * derleme zamanına taşır.
+ *
+ * Pro ikiziyle (`packages/moonui-pro/src/components/ui/toast.tsx`, #651) birebir
+ * aynı birlik — ikiz parite kapısının koruduğu eşleşme.
+ */
+type ToastStoreAction =
+  | { type: "ADD_TOAST"; toast: ToastData }
+  | { type: "UPDATE_TOAST"; toast: Partial<ToastData> & { id: string } }
+  | { type: "DISMISS_TOAST"; toastId?: string }
+  | { type: "REMOVE_TOAST"; toastId?: string };
+
+const reducer = (state: State, action: ToastStoreAction): State => {
   switch (action.type) {
     case "ADD_TOAST":
       return {
@@ -220,7 +235,7 @@ const listeners: Array<(state: State) => void> = [];
 let memoryState: State = { toasts: [] };
 let toastCounter = 0;
 
-function dispatch(action: any) {
+function dispatch(action: ToastStoreAction) {
   memoryState = reducer(memoryState, action);
   listeners.forEach((listener) => {
     listener(memoryState);

package/src/components/ui/tooltip.tsx

@@ -33,9 +33,161 @@ const tooltipVariants = cva(
   }
 )
 
-const Tooltip = TooltipPrimitive.Root
+/* -------------------------------------------------------------------------------
+ * #650 — klavye odağı kilidi (WCAG 1.4.13 "Content on Hover or Focus")
+ *
+ * Radix `TooltipContentImpl` içinde KOŞULSUZ bir "kaydırma → kapat" etkisi var:
+ *
+ *   window.addEventListener("scroll", (e) => {
+ *     if (e.target?.contains(trigger)) onClose()
+ *   }, { capture: true })
+ *
+ * Bu davranış FARE tooltip'i için doğrudur (sayfa imlecin altından kayarsa tooltip
+ * bayatlar) ama KLAVYE odağı için yıkıcıdır: görünür alanın dışındaki bir
+ * tetikleyiciye `Tab` ile gelindiğinde tarayıcı elemanı görünür alana KAYDIRIR ve
+ * bu kaydırma tooltip'i açıldığı anda kapatır.
+ *
+ * Gerçek tarayıcıda ölçülen sıra (docs sayfası, 365 gerçek `Tab` basışı):
+ *
+ *   8244.1  FOCUSIN trigger  (scroll-behavior: smooth)
+ *   8248.6  data-state=instant-open      ← Radix onFocus açtı  (+4.5 ms)
+ *   8251.7  SCROLL #1  target=document containsTrigger=true
+ *   8255.0  data-state=closed            ← Radix handleScroll kapattı (+6.4 ms)
+ *   ... toplam 34 kaydırma olayı (yumuşak kaydırma)
+ *
+ * Sonuç: klavye ve ekran-okuyucu kullanıcısı içeriği HİÇ göremiyor. Tetikleyici
+ * görünür alandaysa (kısa sayfa, izole test) hata görünmez — bu yüzden birim
+ * testlerinden kaçmıştı.
+ *
+ * Çözüm: tetikleyici KLAVYE odağını tuttuğu sürece gelen kapatma isteklerini yok
+ * say. Kilit yalnızca `:focus-visible` eşleşen odakta kurulur, yani fare
+ * etkileşiminin davranışı hiç değişmez. `Escape` ve işaretleyici (pointer)
+ * etkileşimi kilidi açar — 1.4.13'ün "Dismissible" şartı korunur.
+ * ---------------------------------------------------------------------------- */
 
-const TooltipTrigger = TooltipPrimitive.Trigger
+type TooltipFocusHold = {
+  hold: () => void
+  release: () => void
+}
+
+const TooltipFocusHoldContext = React.createContext<TooltipFocusHold | null>(null)
+
+/**
+ * Odağın klavyeden gelip gelmediğini söyler. jsdom `:focus-visible`i desteklemez
+ * ve `matches()` atar; bu ortamda kilit kurulur (test edilebilirlik) çünkü jsdom'da
+ * gerçek bir işaretleyici yoktur.
+ */
+function isKeyboardFocus(element: Element | null | undefined): boolean {
+  if (!element) return false
+  try {
+    return element.matches(":focus-visible")
+  } catch {
+    return true
+  }
+}
+
+const Tooltip = ({
+  open,
+  defaultOpen,
+  onOpenChange,
+  children,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Root>) => {
+  const isControlled = open !== undefined
+  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen ?? false)
+  const resolvedOpen = isControlled ? open : uncontrolledOpen
+
+  // Tetikleyici klavye odağını tutuyor mu? Kapatma isteklerini süzmek için kullanılır.
+  const isFocusHeldRef = React.useRef(false)
+
+  const hold = React.useCallback(() => {
+    isFocusHeldRef.current = true
+  }, [])
+  const release = React.useCallback(() => {
+    isFocusHeldRef.current = false
+  }, [])
+
+  const setOpen = React.useCallback(
+    (next: boolean) => {
+      if (!isControlled) setUncontrolledOpen(next)
+      onOpenChange?.(next)
+    },
+    [isControlled, onOpenChange]
+  )
+
+  const handleOpenChange = React.useCallback(
+    (next: boolean) => {
+      // Klavye odağı tetikleyicideyken kapatma isteğini yut (kaydırma, işaretleyici
+      // ayrılması vb.). Açma istekleri her zaman geçer.
+      if (!next && isFocusHeldRef.current) return
+      setOpen(next)
+    },
+    [setOpen]
+  )
+
+  // 1.4.13 "Dismissible": `Escape` kilidi açar ve kapatır. Yakalama (capture)
+  // fazında dinlenir; böylece Radix'in kendi `DismissableLayer` dinleyicisiyle
+  // kayıt sırasından BAĞIMSIZ olarak önce çalışır ve kapatma asla yutulmaz.
+  React.useEffect(() => {
+    if (!resolvedOpen) return
+    const handleEscape = (event: KeyboardEvent) => {
+      if (event.key !== "Escape") return
+      isFocusHeldRef.current = false
+      setOpen(false)
+    }
+    document.addEventListener("keydown", handleEscape, true)
+    return () => document.removeEventListener("keydown", handleEscape, true)
+  }, [resolvedOpen, setOpen])
+
+  const focusHold = React.useMemo<TooltipFocusHold>(
+    () => ({ hold, release }),
+    [hold, release]
+  )
+
+  return (
+    <TooltipFocusHoldContext.Provider value={focusHold}>
+      <TooltipPrimitive.Root
+        {...props}
+        open={resolvedOpen}
+        onOpenChange={handleOpenChange}
+      >
+        {children}
+      </TooltipPrimitive.Root>
+    </TooltipFocusHoldContext.Provider>
+  )
+}
+Tooltip.displayName = "Tooltip"
+
+const TooltipTrigger = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Trigger>
+>(({ onFocus, onBlur, onPointerDown, ...props }, ref) => {
+  const focusHold = React.useContext(TooltipFocusHoldContext)
+
+  return (
+    <TooltipPrimitive.Trigger
+      ref={ref}
+      {...props}
+      onFocus={(event) => {
+        // Yalnızca klavye odağı kilitlenir; fare tıklaması sonrası odak
+        // (`:focus-visible` eşleşmez) Radix'in normal akışında bırakılır.
+        if (isKeyboardFocus(event.currentTarget)) focusHold?.hold()
+        onFocus?.(event)
+      }}
+      onBlur={(event) => {
+        // Odak ayrıldı → kilit kalkar, Radix'in kendi kapatması işler.
+        focusHold?.release()
+        onBlur?.(event)
+      }}
+      onPointerDown={(event) => {
+        // Fare etkileşimi kilidi açar; "tıkla-kapat" davranışı korunur.
+        focusHold?.release()
+        onPointerDown?.(event)
+      }}
+    />
+  )
+})
+TooltipTrigger.displayName = TooltipPrimitive.Trigger.displayName
 
 const TooltipArrow = React.forwardRef<
   React.ElementRef<typeof TooltipPrimitive.Arrow>,

package/src/styles/tokens.css

@@ -145,7 +145,15 @@
      --background üzerinde zaten 4.76 geçiyordu; kırılan yüzey bg-muted (kbd). */
   --muted-foreground: 215.4 16.3% 45%;
   --accent: 217.2 32.6% 94%;
-  --accent-foreground: 217.2 91.2% 51%;
+  /* #647: --accent-foreground 51% idi -> 4.26 (AA 4.5 altı). Zemin (--accent, 94%)
+     --secondary ile BİREBİR aynı token değeri; #284'ün --secondary-foreground'da
+     uyguladığı düzeltmenin (51%→49%) aynısı burada da geçerli: aynı zemin + aynı
+     başlangıç L → aynı sonuç, 4.54. --accent zemin rolünde DEĞİŞMEDİ (dört yüzey de
+     --accent'i zemin, --accent-foreground'u metin olarak kullanıyor: toggle-group,
+     command/command-pro seçili satır, navbar aktif öğe, magnetic-button outline/ghost
+     hover — inline style `hsl(var(--accent-foreground))` okuduğu için component
+     kaynağına dokunmadan düzelir). Koyu tema zaten 14.11 → dokunulmadı. */
+  --accent-foreground: 217.2 91.2% 49%;
   /* #327: 60.2% idi. HİÇBİR kullanımda AA'yı geçmiyordu — beyaz zeminde metin 3.76,
      kendi foreground'uyla düz dolgu 3.59. 48%, her İKİ testi de geçen en açık değer
      (4.86 / 4.64), yani marka rengine en yakın kalan seçenek. Koyu tema (0 63% 31%)
@@ -356,7 +364,31 @@
   --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
   --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
   --shadow-none: 0 0 #0000;
-  
+
+  /* === #664 S3: DEKORATİF HAM-LİTERAL TOKEN'LARI ===
+   *
+   * Bu grup, hiçbir mevcut semantik token'a (--primary/--success/--warning/…)
+   * KARŞILIK GELMEYEN dekoratif renkleri barındırır — durum anlamı taşımazlar,
+   * yalnız sabit bir görsel kimliğin (glow/neon efekti, yıldız rozeti rengi,
+   * sürükleme önizleme gölgesi) parçasıdır. §9 gereği var olan rengi KAYDIRMIYORUZ:
+   * her değer, değiştirdiği ham Tailwind/rgba literaliyle PİKSEL-ÖZDEŞ tutulur —
+   * tek fark artık tek merkezden (burada) tanımlı olmaları ve `rgba(`/hex taramasının
+   * component kaynağında bir daha bunları YAKALAMAMASI.
+   *
+   * RGB üçlüsü formatı (`R G B`, boşlukla ayrık) — `--secondary-500` ile aynı
+   * kalıp, `rgb(var(--x))` / `rgba(var(--x),alpha)` Tailwind keyfi-değer
+   * söz dizimiyle tüketilir (kanıtlı kalıp: slider.tsx/switch.tsx/progress.tsx).
+   */
+  --glow-blue-rgb: 59 130 246;     /* Tailwind blue-500 — button "glow", dialog/menubar/context-menu "neon" gölgesi */
+  --glow-green-rgb: 74 222 128;    /* Tailwind green-400 — button "neon" gölgesi */
+  --glow-purple-rgb: 139 92 246;   /* Tailwind violet-500 — tabs-pro "neon" gölgesi */
+  --rating-star-rgb: 251 191 36;   /* Tailwind amber-400 — rating yıldız dolgu rengi (durum değil, marka rengi) */
+
+  /* Sürükleme önizleme gölgesi: draggable-list `dragPreviewStyle="clone"` — siyah
+   * gölge kasıtlı olarak tema-bağımsız (koyu temada da beyaz değil, siyah gölge
+   * kullanılır — çoğu tasarım sisteminin box-shadow konvansiyonu budur). */
+  --drag-preview-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+
   /* Elevation System */
   --elevation-0: var(--shadow-none);
   --elevation-1: var(--shadow-sm);