@toolr/ui-design 0.1.7 → 0.1.8

package/dist/index.js

@@ -461,15 +461,14 @@ function Tooltip({
     if (!triggerRef.current) return;
     const triggerRect = triggerRef.current.getBoundingClientRect();
     const tooltipEl = tooltipRef.current;
+    const tooltipRect = tooltipEl?.getBoundingClientRect();
     let resolvedPosition = position === "auto" ? "top" : position;
-    if (position === "auto" && tooltipEl) {
-      const tooltipRect = tooltipEl.getBoundingClientRect();
+    if (position === "auto" && tooltipRect) {
       resolvedPosition = resolveAutoPosition(triggerRect, tooltipRect);
       setActualPosition(resolvedPosition);
     }
     let newCoords = calculateBasePosition(triggerRect, resolvedPosition, align);
-    if (tooltipEl) {
-      const tooltipRect = tooltipEl.getBoundingClientRect();
+    if (tooltipRect) {
       newCoords = adjustForTooltipSize(newCoords, tooltipRect, resolvedPosition, align);
       newCoords = clampToViewport(newCoords, tooltipRect);
     }
@@ -491,7 +490,8 @@ function Tooltip({
     "div",
     {
       ref: tooltipRef,
-      className: `fixed px-3 py-1.5 bg-[var(--popover)] border border-neutral-600 rounded-lg shadow-xl z-[9999] ${interactive || trigger === "click" ? "" : "pointer-events-none"} ${multiline ? "whitespace-pre-line" : "whitespace-nowrap"}`,
+      role: "tooltip",
+      className: `fixed px-3 py-1.5 bg-[var(--popover)] border border-neutral-600 rounded-lg shadow-lg z-[9999] ${interactive || trigger === "click" ? "" : "pointer-events-none"} ${multiline ? "whitespace-pre-line" : "whitespace-nowrap"}`,
       style: {
         top: coords.top,
         left: coords.left,
@@ -708,9 +708,9 @@ var statusIcons = {
 };
 var statusConfig = {
   loading: { color: void 0, active: true, animation: "animate-spin" },
-  success: { color: "green", active: true, animation: "animate-pulse" },
-  warning: { color: "amber", active: true, animation: "animate-pulse" },
-  error: { color: "red", active: true, animation: "animate-pulse" }
+  success: { color: "green", active: true, animation: "" },
+  warning: { color: "amber", active: true, animation: "" },
+  error: { color: "red", active: true, animation: "" }
 };
 function resolveIcon(icon, status) {
   if (status) return statusIcons[status];
@@ -772,7 +772,7 @@ function IconButton({
       href,
       target: "_blank",
       rel: "noopener noreferrer",
-      "aria-label": tooltip?.title,
+      "aria-label": tooltip?.title || (typeof tooltip?.description === "string" ? tooltip.description : void 0),
       "data-testid": testId,
       className: `${sharedClassName} cursor-pointer no-underline`,
       children: inner
@@ -783,7 +783,7 @@ function IconButton({
       type: "button",
       onClick,
       disabled,
-      "aria-label": tooltip?.title,
+      "aria-label": tooltip?.title || (typeof tooltip?.description === "string" ? tooltip.description : void 0),
       "data-testid": testId,
       className: `${sharedClassName} cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed`,
       children: inner
@@ -892,6 +892,10 @@ function Label({
     hasProgress && /* @__PURE__ */ jsx5(
       "span",
       {
+        role: "progressbar",
+        "aria-valuenow": Math.min(progress, 100),
+        "aria-valuemin": 0,
+        "aria-valuemax": 100,
         className: `absolute inset-y-0 left-0 ${progressFillColors[color]} rounded-[inherit]`,
         style: { width: `${Math.min(progress, 100)}%` }
       }
@@ -936,6 +940,16 @@ function Label({
   );
 }
 
+// components/ui/badge.tsx
+import { memo } from "react";
+
+// components/lib/cn.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
 // components/ui/badge.tsx
 import { jsx as jsx6 } from "react/jsx-runtime";
 var sizeClasses2 = {
@@ -945,11 +959,11 @@ var sizeClasses2 = {
   md: "min-w-[20px] h-[20px] px-1.5 text-xs",
   lg: "min-w-[22px] h-[22px] px-1.5 text-sm"
 };
-function Badge({
+var Badge = memo(function Badge2({
   value,
   color = "neutral",
   size = "sm",
-  className = "",
+  className,
   testId
 }) {
   const display = typeof value === "number" && value > 99 ? "99+" : value;
@@ -957,13 +971,20 @@ function Badge({
     "span",
     {
       "data-testid": testId,
-      className: `inline-flex items-center justify-center border rounded-full font-medium leading-none tabular-nums ${FORM_COLORS[color].border} ${FORM_COLORS[color].accent} ${sizeClasses2[size]} ${className}`,
+      className: cn(
+        "inline-flex items-center justify-center border rounded-full font-medium leading-none tabular-nums",
+        FORM_COLORS[color].border,
+        FORM_COLORS[color].accent,
+        sizeClasses2[size],
+        className
+      ),
       children: display
     }
   );
-}
+});
 
 // components/ui/confirm-badge.tsx
+import { memo as memo2 } from "react";
 import { Check as Check2 } from "lucide-react";
 import { jsx as jsx7 } from "react/jsx-runtime";
 var sizeClasses3 = {
@@ -980,21 +1001,27 @@ var iconSizeClasses2 = {
   md: "w-3.5 h-3.5",
   lg: "w-4 h-4"
 };
-function ConfirmBadge({
+var ConfirmBadge = memo2(function ConfirmBadge2({
   color = "neutral",
   size = "sm",
-  className = "",
+  className,
   testId
 }) {
   return /* @__PURE__ */ jsx7(
     "span",
     {
       "data-testid": testId,
-      className: `inline-flex items-center justify-center border ${FORM_COLORS[color].border} ${FORM_COLORS[color].accent} ${sizeClasses3[size]} ${className}`,
+      className: cn(
+        "inline-flex items-center justify-center border",
+        FORM_COLORS[color].border,
+        FORM_COLORS[color].accent,
+        sizeClasses3[size],
+        className
+      ),
       children: /* @__PURE__ */ jsx7(Check2, { className: iconSizeClasses2[size] })
     }
   );
-}
+});
 
 // components/ui/checkbox.tsx
 import { Check as Check3 } from "lucide-react";
@@ -1030,26 +1057,29 @@ function Checkbox({
   size = "sm",
   color = "blue",
   variant = "outline",
-  className = "",
+  className,
+  "aria-label": ariaLabel,
   testId
 }) {
   const s = CHECKBOX_SIZES[size];
   const c = CHECKBOX_COLORS[color];
-  const uncheckedStyle = variant === "outline" ? `${c.border} ${c.hover}` : `bg-neutral-700 ${c.border} ${c.hover}`;
   return /* @__PURE__ */ jsx8(
     "button",
     {
       type: "button",
+      role: "checkbox",
+      "aria-checked": checked,
+      "aria-label": ariaLabel,
       onClick: () => !disabled && onChange(!checked),
       disabled,
       "data-testid": testId,
-      className: `
-        ${s.box} rounded border flex items-center justify-center transition-colors flex-shrink-0
-        cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed
-        ${checked ? `${c.bg} ${c.border}` : uncheckedStyle}
-        ${className}
-      `,
-      children: checked && /* @__PURE__ */ jsx8(Check3, { className: `${s.icon} ${c.icon}` })
+      className: cn(
+        "rounded border flex items-center justify-center transition-colors flex-shrink-0 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed",
+        s.box,
+        checked ? cn(c.bg, c.border) : cn(variant === "filled" && "bg-neutral-700", c.border, c.hover),
+        className
+      ),
+      children: checked && /* @__PURE__ */ jsx8(Check3, { className: cn(s.icon, c.icon) })
     }
   );
 }
@@ -1136,8 +1166,9 @@ function Toggle({
   onChange,
   disabled = false,
   size = "sm",
-  className = "",
+  className,
   color = "blue",
+  "aria-label": ariaLabel,
   testId
 }) {
   const s = TOGGLE_SIZES[size];
@@ -1147,24 +1178,28 @@ function Toggle({
     "button",
     {
       type: "button",
+      role: "switch",
+      "aria-checked": checked,
+      "aria-label": ariaLabel,
       onClick: () => !disabled && onChange(!checked),
       disabled,
       "data-testid": testId,
       style: { boxShadow: `inset 0 0 0 1px ${checked ? bc.active : bc.idle}` },
-      className: `
-        relative ${s.track} rounded-full transition-all flex-shrink-0
-        cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed
-        ${checked ? TOGGLE_CHECKED_TRACK[color] : TOGGLE_UNCHECKED_TRACK[color]}
-        ${className}
-      `,
+      className: cn(
+        "relative rounded-full transition-all flex-shrink-0 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed",
+        s.track,
+        checked ? TOGGLE_CHECKED_TRACK[color] : TOGGLE_UNCHECKED_TRACK[color],
+        className
+      ),
       children: /* @__PURE__ */ jsx9(
         "span",
         {
           style: { backgroundColor: checked ? kc.on : kc.off },
-          className: `
-          block absolute top-0.5 left-0.5 ${s.knob} rounded-full transition-transform
-          ${checked ? s.translate : "translate-x-0"}
-        `
+          className: cn(
+            "block absolute top-0.5 left-0.5 rounded-full transition-transform",
+            s.knob,
+            checked ? s.translate : "translate-x-0"
+          )
         }
       )
     }
@@ -1172,7 +1207,7 @@ function Toggle({
 }
 
 // components/ui/input.tsx
-import { forwardRef, useEffect as useEffect3, useRef as useRef2, useState as useState2 } from "react";
+import { forwardRef, useEffect as useEffect3, useId, useRef as useRef2, useState as useState2 } from "react";
 import { Search as Search2, X as X2, Eye as Eye2, EyeOff as EyeOff2 } from "lucide-react";
 
 // components/ui/debounce-border-overlay.tsx
@@ -1254,6 +1289,7 @@ var Input = forwardRef(function Input2({
   const isSearch = type === "search";
   const isPassword = type === "password";
   const [isPasswordVisible, setIsPasswordVisible] = useState2(false);
+  const errorId = useId();
   const [internalValue, setInternalValue] = useState2(value);
   const [debounceKey, setDebounceKey] = useState2(0);
   const timerRef = useRef2(void 0);
@@ -1311,6 +1347,9 @@ var Input = forwardRef(function Input2({
               },
               disabled,
               "data-testid": testId,
+              "aria-invalid": hasError || void 0,
+              "aria-describedby": typeof error === "string" && error ? errorId : void 0,
+              ...isSearch && !props["aria-label"] ? { "aria-label": props.placeholder || "Search" } : {},
               ...searchAutoProps,
               className: `
             w-full border rounded-lg text-neutral-200 placeholder-neutral-500
@@ -1329,6 +1368,7 @@ var Input = forwardRef(function Input2({
             "button",
             {
               type: "button",
+              "aria-label": "Clear search",
               onClick: handleClear,
               className: "absolute right-2 top-1/2 -translate-y-1/2 w-[18px] h-[18px] flex items-center justify-center rounded-md text-neutral-400 hover:text-neutral-300 hover:bg-neutral-500/20 transition-colors z-10 cursor-pointer",
               children: /* @__PURE__ */ jsx11(X2, { className: "w-2.5 h-2.5" })
@@ -1340,14 +1380,14 @@ var Input = forwardRef(function Input2({
             {
               type: "button",
               onClick: () => setIsPasswordVisible(!isPasswordVisible),
-              title: isPasswordVisible ? "Hide" : "Reveal",
+              "aria-label": isPasswordVisible ? "Hide password" : "Show password",
               className: "absolute right-2 top-1/2 -translate-y-1/2 w-[18px] h-[18px] flex items-center justify-center rounded-md text-neutral-400 hover:text-neutral-300 hover:bg-neutral-500/20 transition-colors z-10 cursor-pointer",
               children: isPasswordVisible ? /* @__PURE__ */ jsx11(EyeOff2, { className: "w-2.5 h-2.5" }) : /* @__PURE__ */ jsx11(Eye2, { className: "w-2.5 h-2.5" })
             }
           ),
           debounceMs > 0 && debounceKey > 0 && /* @__PURE__ */ jsx11(DebounceBorderOverlay, { debounceKey, durationMs: debounceMs })
         ] }),
-        typeof error === "string" && error && /* @__PURE__ */ jsx11("p", { className: "text-sm text-red-400 mt-1 text-right", children: error })
+        typeof error === "string" && error && /* @__PURE__ */ jsx11("p", { id: errorId, className: "text-sm text-red-400 mt-1 text-right", role: "alert", children: error })
       ]
     }
   );
@@ -1378,7 +1418,8 @@ function NumberInput({
   color = "blue",
   size = "sm",
   disabled = false,
-  className = ""
+  className = "",
+  "aria-label": ariaLabel
 }) {
   const [focused, setFocused] = useState3(false);
   const [editText, setEditText] = useState3(null);
@@ -1429,6 +1470,7 @@ function NumberInput({
             ref: inputRef,
             type: "text",
             inputMode: "numeric",
+            "aria-label": ariaLabel,
             value: editText ?? value,
             onChange: (e) => setEditText(e.target.value),
             onFocus: () => {
@@ -1470,6 +1512,7 @@ function NumberInput({
                 "button",
                 {
                   type: "button",
+                  "aria-label": "Increase value",
                   tabIndex: -1,
                   onMouseDown: (e) => e.preventDefault(),
                   onClick: () => nudge(1),
@@ -1489,6 +1532,7 @@ function NumberInput({
                 "button",
                 {
                   type: "button",
+                  "aria-label": "Decrease value",
                   tabIndex: -1,
                   onMouseDown: (e) => e.preventDefault(),
                   onClick: () => nudge(-1),
@@ -1665,6 +1709,8 @@ function SegmentedToggle({
         return /* @__PURE__ */ jsx14(Tooltip, { content: option.tooltip, position: tooltipPosition, children: /* @__PURE__ */ jsxs8(
           "button",
           {
+            "aria-pressed": isActive,
+            "aria-label": option.label || (typeof option.tooltip.description === "string" ? option.tooltip.description : void 0),
             onClick: () => onChange(option.value),
             disabled,
             className: `flex items-center justify-center ${sizeClass} ${rounding} font-medium transition-all cursor-pointer ${isActive ? ACTIVE_COLORS[accentColor] || ACTIVE_COLORS.blue : `text-neutral-400 ${HOVER_COLORS[accentColor] || HOVER_COLORS.blue}`}`,
@@ -1980,12 +2026,14 @@ function Select({
       {
         ref: buttonRef,
         type: "button",
+        "aria-expanded": isOpen,
+        "aria-haspopup": "listbox",
         onClick: () => !disabled && (isOpen ? close() : open()),
         disabled,
         className: `flex items-center gap-1.5 min-w-0 rounded-lg border ${v.bg} ${FORM_COLORS[color].border} text-neutral-200 focus:outline-none ${FORM_COLORS[color].focus} transition-colors ${disabled ? "opacity-50 cursor-not-allowed" : `cursor-pointer ${FORM_COLORS[color].hover}`} ${s}`,
         children: [
           selectedOption?.icon,
-          /* @__PURE__ */ jsx16("span", { className: `whitespace-nowrap ${selectedOption ? "" : "text-neutral-500"}`, children: selectedOption?.label ?? placeholder }),
+          /* @__PURE__ */ jsx16("span", { className: `truncate ${selectedOption ? "" : "text-neutral-500"}`, children: selectedOption?.label ?? placeholder }),
           /* @__PURE__ */ jsx16(ChevronDown3, { className: `w-3 h-3 ml-auto text-neutral-500 transition-transform shrink-0 ${isOpen ? "rotate-180" : ""}` })
         ]
       }
@@ -1995,7 +2043,8 @@ function Select({
         "div",
         {
           ref: menuRef,
-          className: `fixed z-[9999] whitespace-nowrap ${v.menuBg} border ${FORM_COLORS[color].border} rounded-lg shadow-xl overflow-hidden`,
+          role: "listbox",
+          className: `fixed z-[9999] whitespace-nowrap ${v.menuBg} border ${FORM_COLORS[color].border} rounded-lg shadow-lg overflow-hidden`,
           style: {
             top: menuPos.top,
             left: align === "right" ? void 0 : menuPos.left,
@@ -2019,7 +2068,7 @@ function Select({
                 children: [
                   /* @__PURE__ */ jsx16(Check4, { className: `w-3 h-3 shrink-0 ${isSelected ? FORM_COLORS[color].accent : "invisible"}` }),
                   opt.icon,
-                  /* @__PURE__ */ jsx16("span", { children: opt.label })
+                  /* @__PURE__ */ jsx16("span", { className: "truncate", children: opt.label })
                 ]
               },
               String(opt.value)
@@ -2104,12 +2153,14 @@ function FilterDropdown({
     /* @__PURE__ */ jsxs11(
       "button",
       {
+        "aria-expanded": isOpen,
+        "aria-haspopup": "listbox",
         onClick: () => setIsOpen(!isOpen),
         className: `flex items-center gap-1.5 h-7 px-2 rounded-md border ${v.bg} text-sm transition-colors cursor-pointer ${isActive ? `${clearable ? "rounded-r-none border-r-0" : ""} ${FORM_COLORS[color].border} text-neutral-200 ${FORM_COLORS[color].hover}` : isOpen ? `${FORM_COLORS[color].border} text-neutral-200` : `${FORM_COLORS[color].border} text-neutral-400 ${FORM_COLORS[color].hover} hover:text-neutral-200`}`,
         children: [
           /* @__PURE__ */ jsx17(Filter2, { className: `w-3 h-3 ${isActive ? FORM_COLORS[color].accent : ""}` }),
           labelExtra,
-          /* @__PURE__ */ jsx17("span", { className: "whitespace-nowrap", children: selectedLabel }),
+          /* @__PURE__ */ jsx17("span", { className: "truncate", children: selectedLabel }),
           /* @__PURE__ */ jsx17(ChevronDown4, { className: `w-3 h-3 transition-transform ${isOpen ? "rotate-180" : ""}` })
         ]
       }
@@ -2117,12 +2168,13 @@ function FilterDropdown({
     isActive && clearable && /* @__PURE__ */ jsx17(
       "button",
       {
+        "aria-label": "Clear filter",
         onClick: () => onChange("all"),
         className: `flex items-center justify-center h-7 px-1.5 rounded-r-md border border-l-0 ${FORM_COLORS[color].border} ${v.bg} text-neutral-400 ${FORM_COLORS[color].hover} hover:text-neutral-200 transition-colors cursor-pointer`,
         children: /* @__PURE__ */ jsx17(X3, { className: "w-3 h-3" })
       }
     ),
-    isOpen && /* @__PURE__ */ jsxs11("div", { ref: menuRef, className: `absolute right-0 top-full z-50 mt-1 min-w-[140px] whitespace-nowrap bg-[var(--popover)] border ${FORM_COLORS[color].border} rounded-lg shadow-xl overflow-hidden`, children: [
+    isOpen && /* @__PURE__ */ jsxs11("div", { ref: menuRef, role: "listbox", className: `absolute right-0 top-full z-50 mt-1 min-w-[140px] whitespace-nowrap bg-[var(--popover)] border ${FORM_COLORS[color].border} rounded-lg shadow-lg overflow-hidden`, children: [
       showSearch && /* @__PURE__ */ jsx17("div", { className: `sticky top-0 p-1.5 bg-[var(--popover)] border-b ${FORM_COLORS[color].border} z-10`, children: /* @__PURE__ */ jsxs11("div", { className: "relative", children: [
         /* @__PURE__ */ jsx17(Search3, { className: "absolute left-2 top-1/2 -translate-y-1/2 w-3 h-3 text-neutral-500" }),
         /* @__PURE__ */ jsx17(
@@ -2222,18 +2274,21 @@ function SortDropdown({
     /* @__PURE__ */ jsxs12(
       "button",
       {
+        "aria-expanded": isOpen,
+        "aria-haspopup": "listbox",
         onClick: () => setIsOpen(!isOpen),
         className: `flex items-center gap-1.5 h-7 px-2 rounded-md border ${v.bg} text-sm transition-colors cursor-pointer ${FORM_COLORS[color].border} text-neutral-200 ${FORM_COLORS[color].hover}`,
         children: [
           /* @__PURE__ */ jsx18(
-            "span",
+            "button",
             {
-              className: `${FORM_COLORS[color].accent} hover:brightness-125 transition-colors`,
+              type: "button",
+              "aria-label": ascending ? "Sort descending" : "Sort ascending",
+              className: `${FORM_COLORS[color].accent} hover:brightness-125 transition-colors cursor-pointer`,
               onClick: (e) => {
                 e.stopPropagation();
                 onToggleDirection();
               },
-              role: "button",
               children: /* @__PURE__ */ jsx18(DirIcon, { className: "w-3 h-3" })
             }
           ),
@@ -2242,7 +2297,7 @@ function SortDropdown({
         ]
       }
     ),
-    isOpen && /* @__PURE__ */ jsx18("div", { ref: menuRef, className: `absolute right-0 top-full z-50 mt-1 min-w-[140px] bg-[var(--popover)] border ${FORM_COLORS[color].border} rounded-lg shadow-xl overflow-hidden`, children: fields.map((f, idx) => /* @__PURE__ */ jsxs12(
+    isOpen && /* @__PURE__ */ jsx18("div", { ref: menuRef, role: "listbox", className: `absolute right-0 top-full z-50 mt-1 min-w-[140px] bg-[var(--popover)] border ${FORM_COLORS[color].border} rounded-lg shadow-lg overflow-hidden`, children: fields.map((f, idx) => /* @__PURE__ */ jsxs12(
       "button",
       {
         onClick: () => {
@@ -2294,9 +2349,13 @@ function FormActions({
   padding = "normal"
 }) {
   const showBorder = border ?? DEFAULT_BORDER[padding];
-  const paddingClass = showBorder ? `${PADDING_CLASSES[padding]} ${BORDER_CLASS}` : PADDING_CLASSES[padding];
   const hasLeft = onBack || statusText;
-  return /* @__PURE__ */ jsxs13("div", { className: `flex items-center ${hasLeft ? "justify-between" : "justify-end"} gap-2 ${paddingClass}`, children: [
+  return /* @__PURE__ */ jsxs13("div", { className: cn(
+    "flex items-center gap-2",
+    hasLeft ? "justify-between" : "justify-end",
+    PADDING_CLASSES[padding],
+    showBorder && BORDER_CLASS
+  ), children: [
     hasLeft && /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-2", children: [
       onBack && /* @__PURE__ */ jsx19(
         IconButton,
@@ -2353,13 +2412,13 @@ function FormActions({
 }
 
 // components/ui/modal.tsx
-import { useRef as useRef9, useState as useState8 } from "react";
+import { useId as useId2, useRef as useRef9, useState as useState8 } from "react";
 import { createPortal as createPortal3 } from "react-dom";
 import { Info as Info2, AlertTriangle as AlertTriangle2, AlertCircle as AlertCircle2, Check as Check7 } from "lucide-react";
 
 // components/hooks/use-modal-behavior.ts
 import { useEffect as useEffect7 } from "react";
-function useModalBehavior(isOpen, onClose) {
+function useModalBehavior(isOpen, onClose, containerRef) {
   useEffect7(() => {
     if (!isOpen) return;
     const handler = (e) => {
@@ -2376,6 +2435,36 @@ function useModalBehavior(isOpen, onClose) {
       document.body.style.overflow = prev;
     };
   }, [isOpen]);
+  useEffect7(() => {
+    if (!isOpen || !containerRef?.current) return;
+    const container = containerRef.current;
+    const focusable = container.querySelectorAll(
+      'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'
+    );
+    if (focusable.length > 0) focusable[0].focus();
+    const handler = (e) => {
+      if (e.key !== "Tab") return;
+      const nodes = container.querySelectorAll(
+        'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'
+      );
+      if (nodes.length === 0) return;
+      const first = nodes[0];
+      const last = nodes[nodes.length - 1];
+      if (e.shiftKey) {
+        if (document.activeElement === first) {
+          e.preventDefault();
+          last.focus();
+        }
+      } else {
+        if (document.activeElement === last) {
+          e.preventDefault();
+          first.focus();
+        }
+      }
+    };
+    document.addEventListener("keydown", handler);
+    return () => document.removeEventListener("keydown", handler);
+  }, [isOpen, containerRef]);
 }
 
 // components/ui/modal.tsx
@@ -2395,21 +2484,25 @@ var KIND_ICON = {
 };
 function Modal({ isOpen, onClose, title, children, kind = "info", size = "md", hideCloseButton = false, headerActions, testId }) {
   const modalRef = useRef9(null);
-  useModalBehavior(isOpen, onClose);
+  const titleId = useId2();
+  useModalBehavior(isOpen, onClose, modalRef);
   if (!isOpen) return null;
   return createPortal3(
     /* @__PURE__ */ jsxs14("div", { className: "fixed inset-0 z-50 flex items-center justify-center", children: [
-      /* @__PURE__ */ jsx20("div", { className: "absolute inset-0 bg-[var(--dialog-backdrop)] backdrop-blur-sm", onClick: onClose }),
+      /* @__PURE__ */ jsx20("div", { className: "absolute inset-0 bg-[var(--dialog-backdrop)]", onClick: onClose, "aria-hidden": "true" }),
       /* @__PURE__ */ jsxs14(
         "div",
         {
           ref: modalRef,
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-labelledby": titleId,
           "data-testid": testId,
-          className: `relative bg-neutral-900 border border-neutral-700 rounded-xl shadow-2xl ${SIZE_CLASSES2[size]} w-full mx-4 overflow-hidden`,
+          className: `relative bg-neutral-900 border border-neutral-700 rounded-xl shadow-lg ${SIZE_CLASSES2[size]} w-full mx-4 overflow-hidden`,
           children: [
             /* @__PURE__ */ jsxs14("div", { className: "flex items-center gap-3 px-5 py-4 border-b border-neutral-800", children: [
               KIND_ICON[kind],
-              /* @__PURE__ */ jsx20("h3", { className: "text-lg font-semibold text-white flex-1", children: title }),
+              /* @__PURE__ */ jsx20("h3", { id: titleId, className: "text-lg font-semibold text-white flex-1 min-w-0 truncate", children: title }),
               headerActions?.map((a, i) => /* @__PURE__ */ jsx20(IconButton, { ...a }, i)),
               !hideCloseButton && /* @__PURE__ */ jsx20(
                 IconButton,
@@ -2504,15 +2597,9 @@ function AlertModal({
 }
 
 // components/ui/action-dialog.tsx
+import { useId as useId3, useRef as useRef10 } from "react";
 import { createPortal as createPortal4 } from "react-dom";
 
-// components/lib/cn.ts
-import { clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
-
 // components/ui/selection-grid.tsx
 import { jsx as jsx21, jsxs as jsxs15 } from "react/jsx-runtime";
 function makeToolLogo(toolKey) {
@@ -2623,6 +2710,8 @@ function GridCard({ item, selected, onClick }) {
     "button",
     {
       type: "button",
+      "aria-pressed": selected,
+      "aria-label": item.name,
       onClick,
       disabled: item.disabled,
       className: cn(
@@ -2651,6 +2740,8 @@ function ListCard({ item, selected, onClick }) {
     "button",
     {
       type: "button",
+      "aria-pressed": selected,
+      "aria-label": item.name,
       onClick,
       disabled: item.disabled,
       className: cn(
@@ -2762,7 +2853,9 @@ function ActionDialog({
   children,
   className
 }) {
-  useModalBehavior(true, () => onCancel?.());
+  const dialogRef = useRef10(null);
+  const titleId = useId3();
+  useModalBehavior(true, () => onCancel?.(), dialogRef);
   const Icon = icon ? iconMap[icon] : null;
   const hasSelection = (items && items.length > 0 || presets && presets.length > 0) && selectedIds && onSelect;
   const hasScenarios = scenarios && scenarios.length > 0 && selectedScenarioIds && onSelectScenarios;
@@ -2778,12 +2871,16 @@ function ActionDialog({
   }
   return createPortal4(
     /* @__PURE__ */ jsxs17("div", { className: "fixed inset-0 z-50 flex items-center justify-center", children: [
-      /* @__PURE__ */ jsx23("div", { className: "absolute inset-0 bg-[var(--dialog-backdrop)] backdrop-blur-sm", onClick: onCancel }),
+      /* @__PURE__ */ jsx23("div", { className: "absolute inset-0 bg-[var(--dialog-backdrop)]", onClick: onCancel, "aria-hidden": "true" }),
       /* @__PURE__ */ jsxs17(
         "div",
         {
+          ref: dialogRef,
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-labelledby": titleId,
           className: cn(
-            "relative bg-neutral-950 border border-neutral-700 rounded-xl shadow-2xl w-full max-w-[800px] mx-4 flex flex-col",
+            "relative bg-neutral-950 border border-neutral-700 rounded-xl shadow-lg w-full max-w-[800px] mx-4 flex flex-col",
             "max-h-[80vh]",
             className
           ),
@@ -2796,9 +2893,9 @@ function ActionDialog({
                   style: iconColor ? { color: iconColor } : void 0
                 }
               ),
-              /* @__PURE__ */ jsxs17("div", { className: "flex flex-col", children: [
-                /* @__PURE__ */ jsx23("span", { className: "text-md font-semibold text-neutral-200", children: title }),
-                subtitle && /* @__PURE__ */ jsx23("span", { className: "text-sm text-neutral-500", children: subtitle })
+              /* @__PURE__ */ jsxs17("div", { className: "flex flex-col min-w-0", children: [
+                /* @__PURE__ */ jsx23("span", { id: titleId, className: "text-md font-semibold text-neutral-200 truncate", children: title }),
+                subtitle && /* @__PURE__ */ jsx23("span", { className: "text-sm text-neutral-500 truncate", children: subtitle })
               ] }),
               /* @__PURE__ */ jsx23("div", { className: "flex-1" }),
               onSettings && /* @__PURE__ */ jsx23(
@@ -2927,7 +3024,7 @@ function collectDirPaths(nodes, rootName, prefix = "") {
 function FileTree({ nodes, rootName, selectedPath, onSelectFile, prefix = "", expandedPaths, onTogglePath, accentColor = "blue" }) {
   if (rootName) {
     const rootNode = { name: rootName, type: "directory", children: nodes };
-    return /* @__PURE__ */ jsx24("ul", { className: "space-y-0.5", children: /* @__PURE__ */ jsx24(
+    return /* @__PURE__ */ jsx24("ul", { role: "tree", className: "space-y-0.5", children: /* @__PURE__ */ jsx24(
       FileTreeNodeItem,
       {
         node: rootNode,
@@ -2940,7 +3037,7 @@ function FileTree({ nodes, rootName, selectedPath, onSelectFile, prefix = "", ex
       }
     ) });
   }
-  return /* @__PURE__ */ jsx24("ul", { className: "space-y-0.5", children: nodes.filter(nodeHasFiles).map((node) => {
+  return /* @__PURE__ */ jsx24("ul", { role: "tree", className: "space-y-0.5", children: nodes.filter(nodeHasFiles).map((node) => {
     const fullPath = prefix ? `${prefix}/${node.name}` : node.name;
     return /* @__PURE__ */ jsx24(
       FileTreeNodeItem,
@@ -2965,7 +3062,7 @@ function FileTreeNodeItem({ node, path, selectedPath, onSelectFile, expandedPath
   const selectedClass = ACCENT_SELECTED[accentColor] ?? ACCENT_SELECTED.blue;
   const iconColorClass = ACCENT_ICON[accentColor] ?? ACCENT_ICON.blue;
   const rowClass = isSelected ? `${base} ${selectedClass}` : isDir ? `${base} cursor-pointer text-white hover:text-neutral-200` : `${base} cursor-pointer text-white hover:bg-neutral-700/50 hover:text-neutral-200`;
-  return /* @__PURE__ */ jsxs18("li", { children: [
+  return /* @__PURE__ */ jsxs18("li", { role: "treeitem", "aria-expanded": isDir ? expanded : void 0, "aria-selected": isSelected, children: [
     /* @__PURE__ */ jsxs18(
       "button",
       {
@@ -2978,7 +3075,7 @@ function FileTreeNodeItem({ node, path, selectedPath, onSelectFile, expandedPath
         ]
       }
     ),
-    isDir && expanded && node.children && /* @__PURE__ */ jsx24("ul", { className: "ml-4 space-y-0.5", children: node.children.filter(nodeHasFiles).map((child) => {
+    isDir && expanded && node.children && /* @__PURE__ */ jsx24("ul", { role: "group", className: "ml-4 space-y-0.5", children: node.children.filter(nodeHasFiles).map((child) => {
       const childPath = `${path}/${child.name}`;
       return /* @__PURE__ */ jsx24(
         FileTreeNodeItem,
@@ -3090,7 +3187,7 @@ function EditorToolbar({
 }
 
 // components/ui/bottom-panel-header.tsx
-import { useState as useState10, useRef as useRef10, useEffect as useEffect8, useCallback as useCallback5 } from "react";
+import { useState as useState10, useRef as useRef11, useEffect as useEffect8, useCallback as useCallback5 } from "react";
 import { RefreshCw as RefreshCw2 } from "lucide-react";
 import { Fragment as Fragment6, jsx as jsx26, jsxs as jsxs20 } from "react/jsx-runtime";
 var DEFAULT_ACTIVE_TEXT = "text-neutral-300";
@@ -3118,8 +3215,8 @@ function BottomPanelHeader({
   statusBanner,
   onCollapse
 }) {
-  const containerRef = useRef10(null);
-  const actionsRef = useRef10(null);
+  const containerRef = useRef11(null);
+  const actionsRef = useRef11(null);
   const [layoutMode, setLayoutMode] = useState10("full");
   const computeLayout = useCallback5(() => {
     const container = containerRef.current;
@@ -3264,7 +3361,7 @@ function FrontmatterFormHeader({
 }
 
 // components/ui/editor-placeholder-card.tsx
-import { useState as useState11, useRef as useRef11, useLayoutEffect as useLayoutEffect3 } from "react";
+import { useState as useState11, useRef as useRef12, useLayoutEffect as useLayoutEffect3 } from "react";
 import { Fragment as Fragment7, jsx as jsx28, jsxs as jsxs22 } from "react/jsx-runtime";
 var COLORS = {
   purple: {
@@ -3301,7 +3398,7 @@ function EditorPlaceholderCard({
   const [isPlaceholderCopied, setIsPlaceholderCopied] = useState11(false);
   const [isValueCopied, setIsValueCopied] = useState11(false);
   const [isOverflowing, setIsOverflowing] = useState11(false);
-  const valueRef = useRef11(null);
+  const valueRef = useRef12(null);
   const colors = COLORS[accentColor];
   const hasValue = !!value;
   useLayoutEffect3(() => {
@@ -3927,11 +4024,11 @@ function RegistryCard(props) {
 }
 
 // components/ui/registry-detail.tsx
-import { useState as useState14, useRef as useRef13, useEffect as useEffect10, useCallback as useCallback7 } from "react";
+import { useState as useState14, useRef as useRef14, useEffect as useEffect10, useCallback as useCallback7 } from "react";
 import { ChevronsUpDown as ChevronsUpDown2, ChevronsDownUp as ChevronsDownUp2 } from "lucide-react";
 
 // components/ui/file-structure-section.tsx
-import { useState as useState13, useEffect as useEffect9, useCallback as useCallback6, useRef as useRef12, useMemo } from "react";
+import { useState as useState13, useEffect as useEffect9, useCallback as useCallback6, useRef as useRef13, useMemo } from "react";
 import { FileCode as FileCode3, FolderTree, Loader2 as Loader23, AlertCircle as AlertCircle3, AlignLeft, Code2, Type } from "lucide-react";
 import { jsx as jsx31, jsxs as jsxs25 } from "react/jsx-runtime";
 var ACCENT_BORDER = {
@@ -4102,10 +4199,10 @@ function FileStructureSection({
   }, []);
   const allCollapsed = expandedPaths.size === 0;
   const [treeHeight, setTreeHeight] = useState13(null);
-  const sectionRef = useRef12(null);
-  const resizing = useRef12(false);
-  const startY = useRef12(0);
-  const startHeight = useRef12(0);
+  const sectionRef = useRef13(null);
+  const resizing = useRef13(false);
+  const startY = useRef13(0);
+  const startHeight = useRef13(0);
   useEffect9(() => {
     if (variant === "list" || treeHeight !== null || !sectionRef.current) return;
     const el = sectionRef.current;
@@ -4299,7 +4396,7 @@ import { jsx as jsx32, jsxs as jsxs26 } from "react/jsx-runtime";
 var MARKDOWN_CLASSES = "text-md text-neutral-400 leading-relaxed [&_strong]:text-neutral-200 [&_code]:px-1.5 [&_code]:py-0.5 [&_code]:rounded [&_code]:bg-neutral-700/40 [&_code]:border [&_code]:border-neutral-500/40 [&_code]:text-neutral-200 [&_code]:font-mono [&_code]:text-sm [&_h1]:text-lg [&_h1]:font-semibold [&_h1]:text-neutral-200 [&_h1]:mb-2 [&_h2]:text-base [&_h2]:font-semibold [&_h2]:text-neutral-200 [&_h2]:mb-2 [&_h3]:text-md [&_h3]:font-medium [&_h3]:text-neutral-200 [&_h3]:mb-1 [&_ul]:list-disc [&_ul]:pl-4 [&_ol]:list-decimal [&_ol]:pl-4 [&_li]:mb-1 [&_p]:mb-2 [&_pre]:bg-neutral-900 [&_pre]:rounded [&_pre]:p-3 [&_pre]:overflow-x-auto [&_pre]:text-sm";
 var COLLAPSED_MAX_HEIGHT = 240;
 function CollapsibleTextSection({ children, header }) {
-  const contentRef = useRef13(null);
+  const contentRef = useRef14(null);
   const [overflows, setOverflows] = useState14(false);
   const [expanded, setExpanded] = useState14(false);
   const measure = useCallback7(() => {
@@ -4416,7 +4513,7 @@ function RegistryDetail({
 }
 
 // components/ui/registry-browser.tsx
-import { useState as useState15, useEffect as useEffect11, useRef as useRef14, useCallback as useCallback8 } from "react";
+import { useState as useState15, useEffect as useEffect11, useRef as useRef15, useCallback as useCallback8 } from "react";
 import { Search as Search4, ArrowRight as ArrowRight2, RefreshCw as RefreshCw3, Loader2 as Loader24, X as X4, AlertTriangle as AlertTriangle4 } from "lucide-react";
 import { jsx as jsx33, jsxs as jsxs27 } from "react/jsx-runtime";
 var PAGE_SIZE = 60;
@@ -4448,10 +4545,10 @@ function RegistryBrowser({
   const totalCount = items.length;
   const needsPaging = totalCount > PAGE_SIZE;
   const [visibleCount, setVisibleCount] = useState15(PAGE_SIZE);
-  const scrollRef = useRef14(null);
-  const sentinelRef = useRef14(null);
-  const isFirstRender = useRef14(true);
-  const prevTotalCount = useRef14(totalCount);
+  const scrollRef = useRef15(null);
+  const sentinelRef = useRef15(null);
+  const isFirstRender = useRef15(true);
+  const prevTotalCount = useRef15(totalCount);
   useEffect11(() => {
     setVisibleCount(PAGE_SIZE);
   }, [totalCount]);
@@ -4471,7 +4568,7 @@ function RegistryBrowser({
       prevTotalCount.current = totalCount;
     }
   }, [totalCount, initialScrollTop]);
-  const scrollTimerRef = useRef14(void 0);
+  const scrollTimerRef = useRef15(void 0);
   const handleScroll = useCallback8(() => {
     if (!onScrollChange) return;
     clearTimeout(scrollTimerRef.current);
@@ -4639,7 +4736,6 @@ function AiActionButton({
     return tooltip;
   }, [tooltip, forceDisabled, disabledReason, isRunning, isCompleted, runningTooltipTitle, completedTooltipTitle]);
   const isDisabled = forceDisabled;
-  const blinkClass = isCompleted ? "animate-pulse" : "";
   return /* @__PURE__ */ jsx34(
     IconButton,
     {
@@ -4650,8 +4746,8 @@ function AiActionButton({
       onClick: isDisabled ? () => {
       } : onClick,
       tooltip: resolvedTooltip,
-      active: isRunning,
-      className: `${className ?? ""} ${blinkClass}`.trim() || void 0,
+      active: isRunning || isCompleted,
+      className,
       testId
     }
   );
@@ -4745,7 +4841,7 @@ function AiExecutionActionButtons({
 import { Loader2 as Loader25, Send as Send2 } from "lucide-react";
 
 // components/sections/report-bug/screenshot-uploader.tsx
-import { useCallback as useCallback9, useRef as useRef15, useState as useState16 } from "react";
+import { useCallback as useCallback9, useRef as useRef16, useState as useState16 } from "react";
 import { ImagePlus, X as X5, AlertCircle as AlertCircle4 } from "lucide-react";
 import { jsx as jsx36, jsxs as jsxs29 } from "react/jsx-runtime";
 var DEFAULT_MAX_SIZE = 20 * 1024 * 1024;
@@ -4761,7 +4857,7 @@ function ScreenshotUploader({
   disabled = false,
   className
 }) {
-  const fileInputRef = useRef15(null);
+  const fileInputRef = useRef16(null);
   const [isDragging, setIsDragging] = useState16(false);
   const [error, setError] = useState16(null);
   const totalSize = screenshots.reduce((sum, s) => sum + s.size, 0);
@@ -5901,7 +5997,7 @@ import { useState as useState22, useEffect as useEffect13 } from "react";
 import { RefreshCw as RefreshCw4, AlertCircle as AlertCircle5, Check as Check9, Activity, GitCompareArrows, Archive as Archive3, Tag as Tag3 } from "lucide-react";
 
 // components/sections/golden-snapshots/status-overview.tsx
-import { useState as useState19, useRef as useRef16 } from "react";
+import { useState as useState19, useRef as useRef17 } from "react";
 import { Archive, Check as Check8, AlertTriangle as AlertTriangle5, RotateCcw as RotateCcw2 } from "lucide-react";
 import { jsx as jsx38, jsxs as jsxs31 } from "react/jsx-runtime";
 function getComponentVersion(meta, component) {
@@ -5952,7 +6048,7 @@ function StatusOverview({
 }) {
   const anyResetting = resettingComponent !== null || resettingAll;
   const [showResetMenu, setShowResetMenu] = useState19(false);
-  const resetMenuRef = useRef16(null);
+  const resetMenuRef = useRef17(null);
   const resetMenuDropdownRef = useDropdownMaxHeight(showResetMenu);
   useClickOutside(resetMenuRef, showResetMenu, () => setShowResetMenu(false));
   const getLabel = (comp) => componentLabels?.[comp] ?? comp.charAt(0).toUpperCase() + comp.slice(1);
@@ -6023,7 +6119,7 @@ function StatusOverview({
                 tooltip: { title: "Reset options", description: "Reset live files to golden" }
               }
             ),
-            showResetMenu && /* @__PURE__ */ jsxs31("div", { ref: resetMenuDropdownRef, className: "absolute right-0 top-full mt-1 w-56 bg-neutral-850 border border-neutral-700 rounded-lg shadow-xl z-50 py-1 overflow-hidden", children: [
+            showResetMenu && /* @__PURE__ */ jsxs31("div", { ref: resetMenuDropdownRef, className: "absolute right-0 top-full mt-1 w-56 bg-neutral-850 border border-neutral-700 rounded-lg shadow-lg z-50 py-1 overflow-hidden", children: [
               /* @__PURE__ */ jsx38(
                 "button",
                 {
@@ -6409,7 +6505,7 @@ function FileDiffViewer({ sync, componentLabels, monacoTheme, renderFileIcon })
       devtools && hasUnsavedChanges && /* @__PURE__ */ jsx39(
         IconButton,
         {
-          icon: /* @__PURE__ */ jsx39(Save2, { className: saving ? "animate-pulse" : "" }),
+          icon: /* @__PURE__ */ jsx39(Save2, { className: saving ? "animate-spin" : "" }),
           onClick: handleSaveLiveFile,
           disabled: saving,
           color: "amber",
@@ -6943,13 +7039,13 @@ function GoldenSyncPanel({
 import { Check as Check10, X as X6, RefreshCw as RefreshCw5, Terminal as Terminal3 } from "lucide-react";
 
 // components/sections/ai-tools-paths/use-tools-paths.ts
-import { useState as useState23, useCallback as useCallback12, useRef as useRef17, useEffect as useEffect14 } from "react";
+import { useState as useState23, useCallback as useCallback12, useRef as useRef18, useEffect as useEffect14 } from "react";
 function useToolsPaths({ api, tools, onToolConfigChange }) {
   const [isDetecting, setIsDetecting] = useState23(false);
   const [hasScanned, setHasScanned] = useState23(false);
   const [refreshingTools, setRefreshingTools] = useState23(/* @__PURE__ */ new Set());
   const [scannedTools, setScannedTools] = useState23(/* @__PURE__ */ new Set());
-  const wasDetectingRef = useRef17(false);
+  const wasDetectingRef = useRef18(false);
   useEffect14(() => {
     if (wasDetectingRef.current && !isDetecting) {
       setHasScanned(true);
@@ -7734,7 +7830,7 @@ function SnapshotTree({
 }
 
 // components/sections/snapshot-browser/use-snapshot-browser.ts
-import { useState as useState25, useMemo as useMemo6, useEffect as useEffect16, useRef as useRef18, useCallback as useCallback14 } from "react";
+import { useState as useState25, useMemo as useMemo6, useEffect as useEffect16, useRef as useRef19, useCallback as useCallback14 } from "react";
 function collectExpandablePaths(scopes) {
   const paths = [];
   for (const scope of scopes) {
@@ -7765,7 +7861,7 @@ function useSnapshotBrowser({ scopes, api }) {
   const [searchQuery, setSearchQuery] = useState25("");
   const [expandedPaths, setExpandedPaths] = useState25(() => /* @__PURE__ */ new Set());
   const [deletingSnapshotId, setDeletingSnapshotId] = useState25(null);
-  const prevSearchRef = useRef18("");
+  const prevSearchRef = useRef19("");
   const allExpandablePaths = useMemo6(() => collectExpandablePaths(scopes), [scopes]);
   const totalSnapshotCount = useMemo6(() => countSnapshots(scopes), [scopes]);
   const allExpanded = allExpandablePaths.length > 0 && allExpandablePaths.every((p) => expandedPaths.has(p));
@@ -7911,10 +8007,10 @@ function SnapshotBrowserPanel({
 }
 
 // components/hooks/use-resizable-sidebar.ts
-import { useState as useState26, useCallback as useCallback15, useRef as useRef19 } from "react";
+import { useState as useState26, useCallback as useCallback15, useRef as useRef20 } from "react";
 function useResizableSidebar({ min, max, defaultWidth, direction = "right" }) {
   const [width, setWidth] = useState26(defaultWidth);
-  const widthRef = useRef19(defaultWidth);
+  const widthRef = useRef20(defaultWidth);
   const onPointerDown = useCallback15((e) => {
     e.preventDefault();
     const el = e.currentTarget;
@@ -8402,7 +8498,7 @@ function SnippetForm({
 }
 
 // components/sections/prompt-editor/tabbed-prompt-editor.tsx
-import { useState as useState28, useRef as useRef20, useCallback as useCallback17, useEffect as useEffect17, useMemo as useMemo8 } from "react";
+import { useState as useState28, useRef as useRef21, useCallback as useCallback17, useEffect as useEffect17, useMemo as useMemo8 } from "react";
 import Editor2 from "@monaco-editor/react";
 import { Variable, Info as Info4, Search as Search6, X as X10, AlertTriangle as AlertTriangle7 } from "lucide-react";
 import { jsx as jsx48, jsxs as jsxs41 } from "react/jsx-runtime";
@@ -8426,10 +8522,10 @@ function TabbedPromptEditor({
   const [variableSearch, setVariableSearch] = useState28("");
   const [localContent, setLocalContent] = useState28(prompts);
   const [isDirty, setIsDirty] = useState28(false);
-  const editorRef = useRef20(null);
-  const monacoRef = useRef20(null);
-  const decorationsRef = useRef20([]);
-  const completionProviderRef = useRef20(null);
+  const editorRef = useRef21(null);
+  const monacoRef = useRef21(null);
+  const decorationsRef = useRef21([]);
+  const completionProviderRef = useRef21(null);
   useEffect17(() => {
     setLocalContent(prompts);
     setIsDirty(false);
@@ -9004,6 +9100,7 @@ function CollapsibleSection({
       "button",
       {
         type: "button",
+        "aria-expanded": open,
         onClick: () => setOpen(!open),
         className: "flex w-full items-center gap-2 py-2.5 px-1 text-left hover:bg-neutral-700/30 transition-colors cursor-pointer",
         children: [
@@ -9398,7 +9495,7 @@ function Breadcrumb({
 }) {
   const s = sizeConfig2[size];
   const isBox = variant === "box";
-  return /* @__PURE__ */ jsx54("nav", { className: cn("flex items-center", className), children: /* @__PURE__ */ jsx54("div", { className: cn(
+  return /* @__PURE__ */ jsx54("nav", { className: cn("flex items-center min-w-0", className), children: /* @__PURE__ */ jsx54("div", { className: cn(
     "flex items-center gap-1",
     isBox && [s.px, s.py, "bg-neutral-800/50 border border-neutral-700/50 rounded-lg"]
   ), children: segments.map((segment, index) => {
@@ -9406,7 +9503,7 @@ function Breadcrumb({
     const isClickable = !isLast && !!segment.onClick;
     const colors = segment.color && ACCENT_NAV[segment.color] ? ACCENT_NAV[segment.color] : null;
     const isFirstPlain = !isBox && index === 0;
-    return /* @__PURE__ */ jsxs47("div", { className: "flex items-center gap-1", children: [
+    return /* @__PURE__ */ jsxs47("div", { className: "flex items-center gap-1 min-w-0", children: [
       index > 0 && /* @__PURE__ */ jsx54(Separator, { type: separator, size }),
       isClickable ? /* @__PURE__ */ jsxs47(
         "button",
@@ -9414,7 +9511,7 @@ function Breadcrumb({
           type: "button",
           onClick: segment.onClick,
           className: cn(
-            "flex items-center gap-1.5 pr-2 py-0.5 rounded-md transition-colors cursor-pointer",
+            "flex items-center gap-1.5 pr-2 py-0.5 rounded-md transition-colors cursor-pointer min-w-0",
             isFirstPlain ? "pl-0" : "pl-2",
             s.text,
             "font-medium hover:text-white",
@@ -9422,14 +9519,14 @@ function Breadcrumb({
           ),
           children: [
             segment.icon && /* @__PURE__ */ jsx54(SegmentIcon, { icon: segment.icon, color: segment.color, size }),
-            /* @__PURE__ */ jsx54("span", { children: segment.label })
+            /* @__PURE__ */ jsx54("span", { className: "truncate max-w-[200px]", children: segment.label })
           ]
         }
       ) : /* @__PURE__ */ jsxs47(
         "div",
         {
           className: cn(
-            "flex items-center gap-1.5 pr-2 py-0.5 rounded-md",
+            "flex items-center gap-1.5 pr-2 py-0.5 rounded-md min-w-0",
             isFirstPlain ? "pl-0" : "pl-2",
             s.text,
             isLast ? ["font-medium bg-neutral-700/50", colors ? colors.text : "text-white"] : ["font-medium", colors ? colors.text : "text-neutral-300"]
@@ -9445,7 +9542,7 @@ function Breadcrumb({
 }
 
 // components/ui/navigation-bar.tsx
-import { useState as useState34, useRef as useRef21, useCallback as useCallback20 } from "react";
+import { useState as useState34, useRef as useRef22, useCallback as useCallback20 } from "react";
 import { ChevronLeft as ChevronLeft2, ChevronRight as ChevronRight10, History as History2 } from "lucide-react";
 import { Fragment as Fragment12, jsx as jsx55, jsxs as jsxs48 } from "react/jsx-runtime";
 var sizeConfig3 = {
@@ -9505,7 +9602,7 @@ function NavigationBar({
   const hasNav = !!(onBack || onForward);
   const LeadIcon = leadingAction ? iconMap[leadingAction.icon] : null;
   const [historyOpen, setHistoryOpen] = useState34(false);
-  const historyRef = useRef21(null);
+  const historyRef = useRef22(null);
   const closeHistory = useCallback20(() => setHistoryOpen(false), []);
   useClickOutside(historyRef, historyOpen, closeHistory);
   const hasHistoryEntries = historyEntries && historyEntries.length > 0;
@@ -9533,7 +9630,7 @@ function NavigationBar({
             active: historyOpen
           }
         ),
-        historyOpen && hasHistoryEntries && /* @__PURE__ */ jsxs48("div", { className: "absolute left-0 top-full mt-1 w-max min-w-[200px] max-w-[420px] bg-neutral-800 border border-neutral-700 rounded-lg shadow-xl z-50", children: [
+        historyOpen && hasHistoryEntries && /* @__PURE__ */ jsxs48("div", { className: "absolute left-0 top-full mt-1 w-max min-w-[200px] max-w-[420px] bg-neutral-800 border border-neutral-700 rounded-lg shadow-lg z-50", children: [
           /* @__PURE__ */ jsx55("div", { className: "px-3 py-1.5 border-b border-neutral-700/50", children: /* @__PURE__ */ jsx55("p", { className: "text-sm font-medium text-neutral-500", children: "History" }) }),
           /* @__PURE__ */ jsx55("div", { className: "max-h-[300px] overflow-y-auto py-1", children: historyEntries.map((entry, i) => /* @__PURE__ */ jsx55(
             "button",
@@ -9564,7 +9661,7 @@ function NavigationBar({
       const isLast = index === segments.length - 1;
       const isClickable = !isLast && !!segment.onClick;
       const colors = segment.color && ACCENT_NAV[segment.color] ? ACCENT_NAV[segment.color] : null;
-      return /* @__PURE__ */ jsxs48("div", { className: "flex items-center gap-1", children: [
+      return /* @__PURE__ */ jsxs48("div", { className: "flex items-center gap-1 min-w-0", children: [
         index > 0 && /* @__PURE__ */ jsx55(SegmentSeparator, { type: separator, size }),
         isClickable ? /* @__PURE__ */ jsxs48(
           "button",
@@ -9572,7 +9669,7 @@ function NavigationBar({
             type: "button",
             onClick: segment.onClick,
             className: cn(
-              "flex items-center gap-1.5 px-2 py-0.5 rounded-md transition-colors cursor-pointer",
+              "flex items-center gap-1.5 px-2 py-0.5 rounded-md transition-colors cursor-pointer min-w-0",
               s.text,
               "font-medium hover:text-white",
               colors ? [colors.text, `hover:${colors.bg}`] : ["text-neutral-300", "hover:bg-neutral-700/50"]
@@ -9586,7 +9683,7 @@ function NavigationBar({
           "div",
           {
             className: cn(
-              "flex items-center gap-1.5 px-2 py-0.5 rounded-md",
+              "flex items-center gap-1.5 px-2 py-0.5 rounded-md min-w-0",
               s.text,
               isLast ? ["font-medium bg-neutral-700/50", colors ? colors.text : "text-white"] : ["font-medium", colors ? colors.text : "text-neutral-300"]
             ),
@@ -9602,7 +9699,7 @@ function NavigationBar({
 }
 
 // components/ui/tab-bar.tsx
-import { useRef as useRef22, useState as useState35, useEffect as useEffect18, useCallback as useCallback21 } from "react";
+import { useRef as useRef23, useState as useState35, useEffect as useEffect18, useCallback as useCallback21 } from "react";
 import { X as X11 } from "lucide-react";
 import { jsx as jsx56, jsxs as jsxs49 } from "react/jsx-runtime";
 var sizeConfig4 = {
@@ -9658,12 +9755,13 @@ function TabBadge({ badge, size, badgeColor }) {
   const s = sizeConfig4[size];
   return /* @__PURE__ */ jsx56(Badge, { value: badge, color: badgeColor, size: s.badgeSize, className: "flex-shrink-0" });
 }
-function CloseButton({ size, onClick }) {
+function CloseButton({ size, onClick, tabLabel }) {
   const s = sizeConfig4[size];
   return /* @__PURE__ */ jsx56(
     "button",
     {
       type: "button",
+      "aria-label": `Close ${tabLabel}`,
       onClick: (e) => {
         e.stopPropagation();
         onClick();
@@ -9691,6 +9789,8 @@ function CompactTab({
     "button",
     {
       type: "button",
+      role: "tab",
+      "aria-selected": isActive,
       onClick: onSelect,
       className: cn(
         "relative flex items-center justify-center transition-colors cursor-pointer",
@@ -9725,6 +9825,8 @@ function UnderlineTab({
     "button",
     {
       type: "button",
+      role: "tab",
+      "aria-selected": isActive,
       onClick: onSelect,
       className: cn(
         "group relative flex items-center whitespace-nowrap transition-colors cursor-pointer",
@@ -9739,7 +9841,7 @@ function UnderlineTab({
         tab.icon && /* @__PURE__ */ jsx56(TabIcon, { icon: tab.icon, size, color: isActive ? tab.color : void 0 }),
         /* @__PURE__ */ jsx56("span", { children: tab.label }),
         tab.badge !== void 0 && /* @__PURE__ */ jsx56(TabBadge, { badge: tab.badge, size, badgeColor: tab.badgeColor }),
-        showClose && /* @__PURE__ */ jsx56(CloseButton, { size, onClick: onClose }),
+        showClose && /* @__PURE__ */ jsx56(CloseButton, { size, onClick: onClose, tabLabel: tab.label }),
         isActive && /* @__PURE__ */ jsx56("span", { className: cn("absolute bottom-0 left-0 right-0 h-0.5 rounded-full", c.indicator) })
       ]
     }
@@ -9759,6 +9861,8 @@ function PillTab({
     "button",
     {
       type: "button",
+      role: "tab",
+      "aria-selected": isActive,
       onClick: onSelect,
       className: cn(
         "group flex items-center whitespace-nowrap rounded-md transition-colors cursor-pointer",
@@ -9773,7 +9877,7 @@ function PillTab({
         tab.icon && /* @__PURE__ */ jsx56(TabIcon, { icon: tab.icon, size, color: isActive ? tab.color : void 0 }),
         /* @__PURE__ */ jsx56("span", { children: tab.label }),
         tab.badge !== void 0 && /* @__PURE__ */ jsx56(TabBadge, { badge: tab.badge, size, badgeColor: tab.badgeColor }),
-        showClose && /* @__PURE__ */ jsx56(CloseButton, { size, onClick: onClose })
+        showClose && /* @__PURE__ */ jsx56(CloseButton, { size, onClick: onClose, tabLabel: tab.label })
       ]
     }
   );
@@ -9792,6 +9896,8 @@ function CardTab({
     "button",
     {
       type: "button",
+      role: "tab",
+      "aria-selected": isActive,
       onClick: onSelect,
       className: cn(
         "group relative flex items-center whitespace-nowrap transition-colors cursor-pointer rounded-t-lg border border-b-0",
@@ -9806,7 +9912,7 @@ function CardTab({
         tab.icon && /* @__PURE__ */ jsx56(TabIcon, { icon: tab.icon, size, color: isActive ? tab.color : void 0 }),
         /* @__PURE__ */ jsx56("span", { children: tab.label }),
         tab.badge !== void 0 && /* @__PURE__ */ jsx56(TabBadge, { badge: tab.badge, size, badgeColor: tab.badgeColor }),
-        showClose && /* @__PURE__ */ jsx56(CloseButton, { size, onClick: onClose }),
+        showClose && /* @__PURE__ */ jsx56(CloseButton, { size, onClick: onClose, tabLabel: tab.label }),
         isActive && /* @__PURE__ */ jsx56("span", { className: "absolute -bottom-px left-0 right-0 h-px bg-neutral-800" })
       ]
     }
@@ -9826,7 +9932,7 @@ function TabBar({
   size = "sm",
   className
 }) {
-  const containerRef = useRef22(null);
+  const containerRef = useRef23(null);
   const [compact, setCompact] = useState35(false);
   const TabComponent = tabComponents[variant];
   const computeLayout = useCallback21(() => {
@@ -9848,6 +9954,7 @@ function TabBar({
     "div",
     {
       ref: containerRef,
+      role: "tablist",
       className: cn(
         "flex items-end",
         variant === "underline" && "border-b border-neutral-700",
@@ -9884,7 +9991,7 @@ function TabBar({
 }
 
 // components/ui/layout-tab-bar.tsx
-import { useState as useState36, useRef as useRef23, useCallback as useCallback22, useEffect as useEffect19 } from "react";
+import { useState as useState36, useRef as useRef24, useCallback as useCallback22, useEffect as useEffect19 } from "react";
 import { ChevronLeft as ChevronLeft3, ChevronRight as ChevronRight11, X as X12 } from "lucide-react";
 import { jsx as jsx57, jsxs as jsxs50 } from "react/jsx-runtime";
 var COLORS2 = {
@@ -9929,11 +10036,11 @@ function getGradient(color, isActive) {
   return isActive ? `linear-gradient(135deg, rgba(${rgb}, 0.54) 0%, rgba(${rgb}, 0.10) 100%)` : `linear-gradient(135deg, rgba(${rgb}, 0.36) 0%, rgba(${rgb}, 0.06) 100%)`;
 }
 function LayoutTabBar({ tabs, activeId, onSelect, onClose, onReorder, className }) {
-  const scrollRef = useRef23(null);
+  const scrollRef = useRef24(null);
   const [showLeft, setShowLeft] = useState36(false);
   const [showRight, setShowRight] = useState36(false);
   const [drag, setDrag] = useState36(null);
-  const skipClickRef = useRef23(false);
+  const skipClickRef = useRef24(false);
   const updateArrows = useCallback22(() => {
     const el = scrollRef.current;
     if (!el) return;
@@ -10056,20 +10163,15 @@ function LayoutTabBar({ tabs, activeId, onSelect, onClose, onReorder, className
                 /* @__PURE__ */ jsx57("span", { className: cn("truncate text-sm", isActive ? subC : "text-neutral-500"), children: tab.subtitle })
               ] }),
               tab.closable && onClose && /* @__PURE__ */ jsx57(
-                "span",
+                "button",
                 {
-                  role: "button",
+                  type: "button",
+                  "aria-label": `Close ${tab.title}`,
                   tabIndex: -1,
                   onClick: (e) => {
                     e.stopPropagation();
                     onClose(tab.id);
                   },
-                  onKeyDown: (e) => {
-                    if (e.key === "Enter") {
-                      e.stopPropagation();
-                      onClose(tab.id);
-                    }
-                  },
                   className: "absolute right-1.5 top-1/2 -translate-y-1/2 opacity-0 group-hover:opacity-100 hover:bg-neutral-700 rounded p-0.5 transition-opacity cursor-pointer",
                   children: /* @__PURE__ */ jsx57(X12, { className: "w-3 h-3" })
                 }
@@ -10088,7 +10190,7 @@ function LayoutTabBar({ tabs, activeId, onSelect, onClose, onReorder, className
       const ghostIconC = getTextClass(t.iconColor || t.titleColor || "white");
       const ghostSubC = getTextClass(t.subtitleColor || t.selectedColor || t.color);
       const ghostSubIconC = getTextClass(t.subtitleIconColor || t.subtitleColor || t.selectedColor || t.color);
-      return /* @__PURE__ */ jsx57("div", { className: "fixed z-50 pointer-events-none opacity-90", style: { left: drag.x + 12, top: drag.y - 20 }, children: /* @__PURE__ */ jsxs50("div", { className: cn("flex flex-col gap-0.5 px-2.5 py-1.5 rounded-t-lg border-t-2 shadow-xl bg-neutral-800", ghostBorder), children: [
+      return /* @__PURE__ */ jsx57("div", { className: "fixed z-50 pointer-events-none opacity-90", style: { left: drag.x + 12, top: drag.y - 20 }, children: /* @__PURE__ */ jsxs50("div", { className: cn("flex flex-col gap-0.5 px-2.5 py-1.5 rounded-t-lg border-t-2 shadow-lg bg-neutral-800", ghostBorder), children: [
         /* @__PURE__ */ jsxs50("div", { className: "flex items-center gap-1.5", children: [
           t.icon && /* @__PURE__ */ jsx57("span", { className: cn("shrink-0 inline-flex", ghostIconC), style: { width: 14, height: 14 }, children: t.icon }),
           /* @__PURE__ */ jsx57("span", { className: cn("text-md font-medium", ghostTitleC), children: t.title })
@@ -10139,7 +10241,7 @@ function NavCard({
             children: /* @__PURE__ */ jsx58(Icon, { className: "w-4.5 h-4.5", style: { color: iconColor } })
           }
         ),
-        /* @__PURE__ */ jsx58("h3", { className: "text-md font-medium text-neutral-200", children: title }),
+        /* @__PURE__ */ jsx58("h3", { className: "text-md font-medium text-neutral-200 truncate", children: title }),
         description && /* @__PURE__ */ jsx58("p", { className: "mt-1 text-sm text-neutral-500 leading-relaxed line-clamp-2", children: description }),
         stats && /* @__PURE__ */ jsx58("p", { className: "mt-2 text-sm text-neutral-600", children: stats })
       ]
@@ -10148,9 +10250,9 @@ function NavCard({
 }
 
 // components/ui/extension-list-card.tsx
-import { memo, useState as useState37, useRef as useRef24, useCallback as useCallback23, useEffect as useEffect20 } from "react";
+import { memo as memo3, useState as useState37, useRef as useRef25, useCallback as useCallback23, useEffect as useEffect20 } from "react";
 import { jsx as jsx59, jsxs as jsxs52 } from "react/jsx-runtime";
-var ExtensionListCard = memo(function ExtensionListCard2({
+var ExtensionListCard = memo3(function ExtensionListCard2({
   icon: Icon,
   iconColor,
   borderColor,
@@ -10164,7 +10266,7 @@ var ExtensionListCard = memo(function ExtensionListCard2({
   testId
 }) {
   const [isHovered, setIsHovered] = useState37(false);
-  const hoverTimerRef = useRef24(void 0);
+  const hoverTimerRef = useRef25(void 0);
   useEffect20(() => () => clearTimeout(hoverTimerRef.current), []);
   const handleMouseEnter = useCallback23(() => {
     hoverTimerRef.current = setTimeout(() => setIsHovered(true), 300);
@@ -10191,7 +10293,7 @@ var ExtensionListCard = memo(function ExtensionListCard2({
             /* @__PURE__ */ jsx59(Icon, { className: cn("w-5 h-5 shrink-0", iconColor) }),
             /* @__PURE__ */ jsxs52("div", { className: "min-w-0 flex-1", children: [
               /* @__PURE__ */ jsxs52("div", { className: "flex items-center gap-2 flex-wrap", children: [
-                /* @__PURE__ */ jsx59("span", { className: cn("text-md font-medium", titleClassName), children: title }),
+                /* @__PURE__ */ jsx59("span", { className: cn("text-md font-medium truncate", titleClassName), children: title }),
                 badges
               ] }),
               description && /* @__PURE__ */ jsx59("div", { className: cn("text-sm text-neutral-500 mt-1", !isHovered && "line-clamp-2"), children: description })
@@ -10386,7 +10488,7 @@ function CookieConsent({
     onConsent?.(choice);
   };
   if (!isVisible) return null;
-  return /* @__PURE__ */ jsx63("div", { className: "fixed bottom-0 left-0 right-0 z-50 p-4 bg-neutral-900/95 backdrop-blur-sm border-t border-neutral-700/50", children: /* @__PURE__ */ jsxs56("div", { className: "max-w-6xl mx-auto flex flex-col sm:flex-row items-start sm:items-center gap-4", children: [
+  return /* @__PURE__ */ jsx63("div", { className: "fixed bottom-0 left-0 right-0 z-50 p-4 bg-neutral-900 border-t border-neutral-700/50", children: /* @__PURE__ */ jsxs56("div", { className: "max-w-6xl mx-auto flex flex-col sm:flex-row items-start sm:items-center gap-4", children: [
     /* @__PURE__ */ jsxs56("div", { className: "flex-grow", children: [
       /* @__PURE__ */ jsx63("p", { className: "text-md text-neutral-200 mb-1", children: heading }),
       /* @__PURE__ */ jsx63("p", { className: "text-sm text-neutral-400", children: description })
@@ -10500,8 +10602,8 @@ function useNavigationHistory(initial, maxEntries = 50) {
 // components/ui/setting-row.tsx
 import { jsx as jsx64, jsxs as jsxs57 } from "react/jsx-runtime";
 function SettingRow(props) {
-  const { label, description, disabled, className = "" } = props;
-  return /* @__PURE__ */ jsxs57("div", { className: `flex items-start justify-between gap-4 ${className}`, children: [
+  const { label, description, disabled, className } = props;
+  return /* @__PURE__ */ jsxs57("div", { className: cn("flex items-start justify-between gap-4", className), children: [
     /* @__PURE__ */ jsxs57("div", { children: [
       /* @__PURE__ */ jsx64("label", { className: "text-neutral-200 leading-7", children: label }),
       description && /* @__PURE__ */ jsx64("p", { className: "text-md text-neutral-500", children: description })
@@ -10513,7 +10615,8 @@ function SettingRow(props) {
         onChange: props.onChange,
         disabled,
         color: props.color,
-        size: props.size
+        size: props.size,
+        "aria-label": label
       }
     ),
     props.type === "select" && /* @__PURE__ */ jsx64(
@@ -10551,8 +10654,8 @@ function SettingsCard({ children, className, title, description, testId }) {
       "data-testid": testId,
       children: [
         title && /* @__PURE__ */ jsxs58("div", { children: [
-          /* @__PURE__ */ jsx65("h3", { className: "text-md font-medium text-neutral-200", children: title }),
-          description && /* @__PURE__ */ jsx65("p", { className: "text-md text-neutral-500 mt-1", children: description })
+          /* @__PURE__ */ jsx65("h3", { className: "text-md font-medium text-neutral-200 truncate", children: title }),
+          description && /* @__PURE__ */ jsx65("p", { className: "text-md text-neutral-500 mt-1 line-clamp-2", children: description })
         ] }),
         !title && description && /* @__PURE__ */ jsx65("p", { className: "text-md text-neutral-500", children: description }),
         children
@@ -10603,8 +10706,7 @@ function SettingsInfoBox({ children, color = "neutral", className, testId }) {
   return /* @__PURE__ */ jsxs59(
     "div",
     {
-      className: cn("flex items-start gap-3 border-l-2", borderColorMap[color], className),
-      style: { paddingLeft: 10 },
+      className: cn("flex items-start gap-3 border-l-2 pl-2.5", borderColorMap[color], className),
       "data-testid": testId,
       children: [
         /* @__PURE__ */ jsx66(Icon, { className: cn("w-4 h-4 mt-0.5 shrink-0", ACCENT_TEXT[color]) }),