@toolr/ui-design 0.1.6 → 0.1.8

package/components/ui/editor-placeholder-card.tsx

@@ -60,7 +60,8 @@ export function EditorPlaceholderCard({
   className = '',
 }: EditorPlaceholderCardProps) {
   const [isExpanded, setIsExpanded] = useState(false)
-  const [isCopied, setIsCopied] = useState(false)
+  const [isPlaceholderCopied, setIsPlaceholderCopied] = useState(false)
+  const [isValueCopied, setIsValueCopied] = useState(false)
   const [isOverflowing, setIsOverflowing] = useState(false)
   const valueRef = useRef<HTMLDivElement>(null)
 
@@ -78,8 +79,8 @@ export function EditorPlaceholderCard({
   const handleCopyPlaceholder = async () => {
     try {
       await navigator.clipboard.writeText(`{{${name}}}`)
-      setIsCopied(true)
-      setTimeout(() => setIsCopied(false), 1500)
+      setIsPlaceholderCopied(true)
+      setTimeout(() => setIsPlaceholderCopied(false), 1500)
     } catch {
       // Clipboard API not available
     }
@@ -89,8 +90,8 @@ export function EditorPlaceholderCard({
     if (!value) return
     try {
       await navigator.clipboard.writeText(value)
-      setIsCopied(true)
-      setTimeout(() => setIsCopied(false), 1500)
+      setIsValueCopied(true)
+      setTimeout(() => setIsValueCopied(false), 1500)
     } catch {
       // Clipboard API not available
     }
@@ -119,20 +120,20 @@ export function EditorPlaceholderCard({
         <div className="flex items-center gap-1 shrink-0">
           {showCopyPlaceholder && (
             <IconButton
-              icon={isCopied ? 'check' : 'copy'}
+              icon={isPlaceholderCopied ? 'check' : 'copy'}
               onClick={handleCopyPlaceholder}
               size="sm"
-              color={isCopied ? 'green' : 'neutral'}
+              color={isPlaceholderCopied ? 'green' : 'neutral'}
               tooltip={{ description: `Copy {{${name}}}` }}
               tooltipPosition="left"
             />
           )}
           {showCopyValue && hasValue && (
             <IconButton
-              icon={isCopied ? 'check' : 'copy'}
+              icon={isValueCopied ? 'check' : 'copy'}
               onClick={handleCopyValue}
               size="sm"
-              color={isCopied ? 'green' : 'neutral'}
+              color={isValueCopied ? 'green' : 'neutral'}
               tooltip={{ description: 'Copy value to clipboard' }}
               tooltipPosition="left"
             />

package/components/ui/execution-details-panel.tsx

@@ -9,15 +9,10 @@
 import { AlertTriangle, Info } from 'lucide-react'
 import { Checkbox } from './checkbox.tsx'
 import { cn } from '../lib/cn.ts'
-
-export interface ExecutionDetailRow {
-  label: string
-  value: string
-  mono?: boolean
-}
+import type { DetailRow } from './detail-section.tsx'
 
 export interface ExecutionDetailsPanelProps {
-  details: ExecutionDetailRow[]
+  details: DetailRow[]
   /** Show the "Allow direct edits" toggle */
   allowDirectEdits?: boolean
   onAllowDirectEditsChange?: (value: boolean) => void

package/components/ui/extension-list-card.tsx

@@ -81,7 +81,7 @@ export const ExtensionListCard = memo(function ExtensionListCard({
           <Icon className={cn('w-5 h-5 shrink-0', iconColor)} />
           <div className="min-w-0 flex-1">
             <div className="flex items-center gap-2 flex-wrap">
-              <span className={cn('text-md font-medium', titleClassName)}>{title}</span>
+              <span className={cn('text-md font-medium truncate', titleClassName)}>{title}</span>
               {badges}
             </div>
             {description && (

package/components/ui/file-structure-section.tsx

@@ -1,19 +1,11 @@
 import { useState, useEffect, useCallback, useRef, useMemo, type ReactNode } from 'react'
 import { FileCode, FolderTree, Loader2, AlertCircle, AlignLeft, Code2, Type } from 'lucide-react'
-import { CollapseButton, type IconButtonColor } from './icon-button.tsx'
+import { type AccentColor, ACCENT_ICON } from '../lib/form-colors.ts'
+import { CollapseButton } from './icon-button.tsx'
 import { SegmentedToggle } from './segmented-toggle.tsx'
 import { FileTree, collectDirPaths, type FileTreeNode } from './file-tree.tsx'
 
 export type PreviewMode = 'format' | 'language' | 'plain'
-export type AccentColor = 'blue' | 'green' | 'red' | 'orange' | 'cyan' | 'yellow' | 'purple' | 'indigo' | 'emerald' | 'amber' | 'violet' | 'neutral' | 'sky' | 'pink' | 'teal'
-
-const ACCENT_ICON: Record<AccentColor, string> = {
-  blue: 'text-blue-400', green: 'text-green-400', red: 'text-red-400',
-  orange: 'text-orange-400', cyan: 'text-cyan-400', yellow: 'text-yellow-400',
-  purple: 'text-purple-400', indigo: 'text-indigo-400', emerald: 'text-emerald-400',
-  amber: 'text-amber-400', violet: 'text-violet-400', neutral: 'text-neutral-400',
-  sky: 'text-sky-400', pink: 'text-pink-400', teal: 'text-teal-400',
-}
 
 const ACCENT_BORDER: Record<AccentColor, string> = {
   blue: 'border-blue-500/25', green: 'border-green-500/25', red: 'border-red-500/25',
@@ -23,13 +15,6 @@ const ACCENT_BORDER: Record<AccentColor, string> = {
   sky: 'border-sky-500/25', pink: 'border-pink-500/25', teal: 'border-teal-500/25',
 }
 
-const ACCENT_BUTTON: Record<AccentColor, IconButtonColor> = {
-  blue: 'blue', green: 'green', red: 'red',
-  orange: 'orange', cyan: 'cyan', yellow: 'yellow',
-  purple: 'purple', indigo: 'indigo', emerald: 'emerald',
-  amber: 'amber', violet: 'violet', neutral: 'neutral',
-  sky: 'sky', pink: 'pink', teal: 'teal',
-}
 
 const ACCENT_HANDLE: Record<AccentColor, string> = {
   blue: 'bg-blue-500/30 group-hover:bg-blue-400/50', green: 'bg-green-500/30 group-hover:bg-green-400/50', red: 'bg-red-500/30 group-hover:bg-red-400/50',
@@ -350,7 +335,7 @@ export function FileStructureSection({
         <CollapseButton
           collapsed={allCollapsed}
           onToggle={() => setExpandedPaths(allCollapsed ? new Set(allDirPaths) : new Set())}
-          color={ACCENT_BUTTON[accentColor]}
+          color={accentColor}
         />
       </div>
       <div className={`${variant === 'split' ? 'flex-1 overflow-y-auto' : ''} p-3`}>

package/components/ui/file-tree.tsx

@@ -1,4 +1,5 @@
 import { FileCode, Folder, FolderOpen, ChevronRight, ChevronDown } from 'lucide-react'
+import { ACCENT_ICON, type AccentColor } from '../lib/form-colors.ts'
 
 export interface FileTreeNode {
   name: string
@@ -30,19 +31,6 @@ const ACCENT_SELECTED: Record<string, string> = {
   violet: 'bg-violet-400/20 text-neutral-200',
 }
 
-const ACCENT_ICON: Record<string, string> = {
-  blue: 'text-blue-400',
-  purple: 'text-purple-400',
-  orange: 'text-orange-400',
-  green: 'text-green-400',
-  pink: 'text-pink-400',
-  amber: 'text-amber-400',
-  emerald: 'text-emerald-400',
-  teal: 'text-teal-400',
-  sky: 'text-sky-400',
-  violet: 'text-violet-400',
-}
-
 function nodeHasFiles(node: FileTreeNode): boolean {
   if (node.type === 'file') return true
   return !!node.children?.some(nodeHasFiles)
@@ -73,7 +61,7 @@ export function FileTree({ nodes, rootName, selectedPath, onSelectFile, prefix =
   if (rootName) {
     const rootNode: FileTreeNode = { name: rootName, type: 'directory', children: nodes }
     return (
-      <ul className="space-y-0.5">
+      <ul role="tree" className="space-y-0.5">
         <FileTreeNodeItem
           node={rootNode}
           path={rootName}
@@ -88,7 +76,7 @@ export function FileTree({ nodes, rootName, selectedPath, onSelectFile, prefix =
   }
 
   return (
-    <ul className="space-y-0.5">
+    <ul role="tree" className="space-y-0.5">
       {nodes.filter(nodeHasFiles).map((node) => {
         const fullPath = prefix ? `${prefix}/${node.name}` : node.name
         return (
@@ -124,7 +112,7 @@ function FileTreeNodeItem({ node, path, selectedPath, onSelectFile, expandedPath
   const expanded = isDir && expandedPaths.has(path)
   const base = 'flex items-center gap-1.5 py-0.5 px-1 rounded text-sm transition-colors overflow-hidden whitespace-nowrap'
   const selectedClass = ACCENT_SELECTED[accentColor] ?? ACCENT_SELECTED.blue
-  const iconColorClass = ACCENT_ICON[accentColor] ?? ACCENT_ICON.blue
+  const iconColorClass = ACCENT_ICON[accentColor as AccentColor] ?? ACCENT_ICON.blue
   const rowClass = isSelected
     ? `${base} ${selectedClass}`
     : isDir
@@ -132,7 +120,7 @@ function FileTreeNodeItem({ node, path, selectedPath, onSelectFile, expandedPath
       : `${base} cursor-pointer text-white hover:bg-neutral-700/50 hover:text-neutral-200`
 
   return (
-    <li>
+    <li role="treeitem" aria-expanded={isDir ? expanded : undefined} aria-selected={isSelected}>
       <button
         onClick={isDir ? () => onTogglePath(path) : () => onSelectFile(path)}
         className={rowClass}
@@ -150,7 +138,7 @@ function FileTreeNodeItem({ node, path, selectedPath, onSelectFile, expandedPath
         <span className="truncate">{node.name}</span>
       </button>
       {isDir && expanded && node.children && (
-        <ul className="ml-4 space-y-0.5">
+        <ul role="group" className="ml-4 space-y-0.5">
           {node.children.filter(nodeHasFiles).map((child) => {
             const childPath = `${path}/${child.name}`
             return (

package/components/ui/files-panel.tsx

@@ -3,7 +3,7 @@
 import { useState, useMemo } from 'react'
 import { Folder, FolderOpen, File, FileCode, FileText, FileJson, Image, ChevronRight, Search, MoreVertical } from 'lucide-react'
 import type { LucideIcon } from 'lucide-react'
-import type { IconName } from './icon-button.tsx'
+import { iconMap, type IconName } from './icon-button.tsx'
 import { cn } from '../lib/cn.ts'
 
 const ACCENT_SELECTED: Record<string, string> = {
@@ -19,14 +19,6 @@ const ACCENT_SELECTED: Record<string, string> = {
   violet: 'bg-violet-400/15 text-violet-400',
 }
 
-const iconSubset: Partial<Record<IconName, LucideIcon>> = {
-  folder: Folder,
-  file: File,
-  code: FileCode,
-  image: Image,
-  search: Search,
-}
-
 const EXTENSION_ICON_MAP: Record<string, LucideIcon> = {
   ts: FileCode,
   tsx: FileCode,
@@ -88,7 +80,7 @@ function countFiles(entries: FileEntry[]): number {
 }
 
 function getFileIcon(entry: FileEntry): LucideIcon {
-  if (entry.icon && iconSubset[entry.icon]) return iconSubset[entry.icon]!
+  if (entry.icon && iconMap[entry.icon]) return iconMap[entry.icon]!
   if (entry.type === 'folder') return Folder
   const ext = entry.name.split('.').pop()?.toLowerCase()
   if (ext && EXTENSION_ICON_MAP[ext]) return EXTENSION_ICON_MAP[ext]
@@ -96,7 +88,7 @@ function getFileIcon(entry: FileEntry): LucideIcon {
 }
 
 function getFolderIcon(expanded: boolean, entry: FileEntry): LucideIcon {
-  if (entry.icon && iconSubset[entry.icon]) return iconSubset[entry.icon]!
+  if (entry.icon && iconMap[entry.icon]) return iconMap[entry.icon]!
   return expanded ? FolderOpen : Folder
 }
 

package/components/ui/filter-dropdown.tsx

@@ -88,6 +88,8 @@ export function FilterDropdown({
   return (
     <div className="relative flex items-center" ref={ref} onKeyDown={handleKeyDown}>
       <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
@@ -99,11 +101,12 @@ export function FilterDropdown({
       >
         <Filter className={`w-3 h-3 ${isActive ? FORM_COLORS[color].accent : ''}`} />
         {labelExtra}
-        <span className="whitespace-nowrap">{selectedLabel}</span>
+        <span className="truncate">{selectedLabel}</span>
         <ChevronDown className={`w-3 h-3 transition-transform ${isOpen ? 'rotate-180' : ''}`} />
       </button>
       {isActive && clearable && (
         <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`}
         >
@@ -112,7 +115,7 @@ export function FilterDropdown({
       )}
 
       {isOpen && (
-        <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`}>
+        <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`}>
           {showSearch && (
             <div className={`sticky top-0 p-1.5 bg-[var(--popover)] border-b ${FORM_COLORS[color].border} z-10`}>
               <div className="relative">

package/components/ui/form-actions.tsx

@@ -1,4 +1,5 @@
 import { IconButton, type IconName, type IconButtonProps, type IconButtonStatus } from './icon-button.tsx'
+import { cn } from '../lib/cn.ts'
 
 export interface FormActionsProps {
   /** Cancel handler — renders X button. Optional (e.g. AlertModal has no cancel). */
@@ -34,10 +35,12 @@ export interface FormActionsProps {
 
 const PADDING_CLASSES = {
   compact: 'pt-2',
-  normal: 'pt-2 border-t border-neutral-700',
-  modal: 'px-4 py-3 border-t border-neutral-700',
+  normal: 'pt-2',
+  modal: 'px-4 py-3',
 } as const
 
+const BORDER_CLASS = 'border-t border-neutral-700'
+
 const DEFAULT_BORDER = {
   compact: false,
   normal: true,
@@ -64,15 +67,15 @@ export function FormActions({
   padding = 'normal',
 }: FormActionsProps) {
   const showBorder = border ?? DEFAULT_BORDER[padding]
-  const base = PADDING_CLASSES[padding]
-  const paddingClass = showBorder
-    ? base
-    : base.replace(/\s*border-t\s+border-neutral-700/g, '')
-
   const hasLeft = onBack || statusText
 
   return (
-    <div className={`flex items-center ${hasLeft ? 'justify-between' : 'justify-end'} gap-2 ${paddingClass}`}>
+    <div className={cn(
+      'flex items-center gap-2',
+      hasLeft ? 'justify-between' : 'justify-end',
+      PADDING_CLASSES[padding],
+      showBorder && BORDER_CLASS,
+    )}>
       {hasLeft && (
         <div className="flex items-center gap-2">
           {onBack && (

package/components/ui/icon-button.tsx

@@ -39,6 +39,7 @@ import {
   AlertCircle, FileCode, Gauge, Home, PieChart, Settings2,
 } from 'lucide-react'
 import type { LucideIcon } from 'lucide-react'
+import { type AccentColor } from '../lib/form-colors.ts'
 import { Tooltip, type TooltipContent } from './tooltip.tsx'
 
 export const iconMap = {
@@ -159,7 +160,7 @@ export interface ActionItem {
 
 export type IconButtonStatus = 'loading' | 'success' | 'warning' | 'error'
 
-export type IconButtonColor = 'blue' | 'green' | 'red' | 'orange' | 'cyan' | 'yellow' | 'purple' | 'indigo' | 'emerald' | 'amber' | 'violet' | 'neutral' | 'sky' | 'pink' | 'teal'
+export type IconButtonColor = AccentColor
 export type IconButtonVariant = 'filled' | 'outline'
 
 export interface IconButtonProps {
@@ -259,9 +260,9 @@ const statusIcons: Record<IconButtonStatus, LucideIcon> = {
 
 const statusConfig = {
   loading: { color: undefined, active: true, animation: 'animate-spin' },
-  success: { color: 'green' as const, active: true, animation: 'animate-pulse' },
-  warning: { color: 'amber' as const, active: true, animation: 'animate-pulse' },
-  error: { color: 'red' as const, active: true, animation: 'animate-pulse' },
+  success: { color: 'green' as const, active: true, animation: '' },
+  warning: { color: 'amber' as const, active: true, animation: '' },
+  error: { color: 'red' as const, active: true, animation: '' },
 }
 
 function resolveIcon(icon: IconName | ReactNode, status: IconButtonStatus | undefined): LucideIcon | null {
@@ -336,7 +337,7 @@ export function IconButton({
       href={href}
       target="_blank"
       rel="noopener noreferrer"
-      aria-label={tooltip?.title}
+      aria-label={tooltip?.title || (typeof tooltip?.description === 'string' ? tooltip.description : undefined)}
       data-testid={testId}
       className={`${sharedClassName} cursor-pointer no-underline`}
     >
@@ -347,7 +348,7 @@ export function IconButton({
       type="button"
       onClick={onClick}
       disabled={disabled}
-      aria-label={tooltip?.title}
+      aria-label={tooltip?.title || (typeof tooltip?.description === 'string' ? tooltip.description : undefined)}
       data-testid={testId}
       className={`${sharedClassName} cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed`}
     >

package/components/ui/input.tsx

@@ -17,8 +17,9 @@
  * - Extends native input attributes
  */
 
-import { forwardRef, useEffect, useRef, useState, type InputHTMLAttributes, type ReactNode } from 'react'
+import { forwardRef, useEffect, useId, useRef, useState, type InputHTMLAttributes, type ReactNode } from 'react'
 import { Search, X, Eye, EyeOff } from 'lucide-react'
+import { DebounceBorderOverlay } from './debounce-border-overlay.tsx'
 import { FORM_COLORS, type FormColor } from '../lib/form-colors.ts'
 
 export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'size' | 'type'> {
@@ -50,6 +51,13 @@ const variantClasses = {
   outline: 'bg-transparent',
 }
 
+const SEARCH_AUTO_PROPS = {
+  autoComplete: 'off' as const,
+  autoCorrect: 'off' as const,
+  autoCapitalize: 'off' as const,
+  spellCheck: false as const,
+}
+
 export const Input = forwardRef<HTMLInputElement, InputProps>(function Input({
   value,
   onChange,
@@ -76,6 +84,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input({
   const isSearch = type === 'search'
   const isPassword = type === 'password'
   const [isPasswordVisible, setIsPasswordVisible] = useState(false)
+  const errorId = useId()
 
   // Debounce state
   const [internalValue, setInternalValue] = useState(value)
@@ -115,12 +124,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input({
     return () => clearTimeout(timerRef.current)
   }, [])
 
-  const searchAutoProps = isSearch ? {
-    autoComplete: 'off' as const,
-    autoCorrect: 'off' as const,
-    autoCapitalize: 'off' as const,
-    spellCheck: false as const,
-  } : {}
+  const searchAutoProps = isSearch ? SEARCH_AUTO_PROPS : undefined
 
   const showClear = isSearch && displayValue && !disabled
 
@@ -143,6 +147,9 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input({
           onBlur={(e) => { setFocused(false); onBlurProp?.(e) }}
           disabled={disabled}
           data-testid={testId}
+          aria-invalid={hasError || undefined}
+          aria-describedby={typeof error === 'string' && error ? errorId : undefined}
+          {...(isSearch && !props['aria-label'] ? { 'aria-label': props.placeholder || 'Search' } : {})}
           {...searchAutoProps}
           className={`
             w-full border rounded-lg text-neutral-200 placeholder-neutral-500
@@ -159,6 +166,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input({
         {showClear && (
           <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"
           >
@@ -174,37 +182,18 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input({
           <button
             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"
           >
             {isPasswordVisible ? <EyeOff className="w-2.5 h-2.5" /> : <Eye className="w-2.5 h-2.5" />}
           </button>
         )}
         {debounceMs > 0 && debounceKey > 0 && (
-          <svg
-            key={debounceKey}
-            className="absolute inset-0 pointer-events-none text-emerald-400/70"
-            style={{ width: '100%', height: '100%' }}
-          >
-            <rect
-              x="1" y="1" rx="5" ry="5"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="1.5"
-              pathLength="100"
-              strokeDasharray="100"
-              strokeDashoffset="0"
-              style={{
-                width: 'calc(100% - 2px)',
-                height: 'calc(100% - 2px)',
-                animation: `debounce-border-drain ${debounceMs}ms linear forwards`,
-              }}
-            />
-          </svg>
+          <DebounceBorderOverlay debounceKey={debounceKey} durationMs={debounceMs} />
         )}
       </div>
       {typeof error === 'string' && error && (
-        <p className="text-sm text-red-400 mt-1 text-right">{error}</p>
+        <p id={errorId} className="text-sm text-red-400 mt-1 text-right" role="alert">{error}</p>
       )}
     </div>
   )

package/components/ui/label.tsx

@@ -12,25 +12,11 @@
  * - Clickable with hover state
  */
 
+import { type AccentColor } from '../lib/form-colors.ts'
 import { iconMap, type IconName } from './icon-button.tsx'
 import { Tooltip } from './tooltip.tsx'
 
-export type LabelColor =
-  | 'neutral'
-  | 'green'
-  | 'red'
-  | 'blue'
-  | 'yellow'
-  | 'orange'
-  | 'purple'
-  | 'amber'
-  | 'emerald'
-  | 'cyan'
-  | 'indigo'
-  | 'teal'
-  | 'violet'
-  | 'pink'
-  | 'sky'
+export type LabelColor = AccentColor
 
 export interface LabelProps {
   text: string
@@ -94,7 +80,7 @@ const sizeConfig = {
 }
 
 /** Smart capitalize: capitalizes first letter of each word separated by spaces or dashes */
-function smartCapitalize(value: string): string {
+export function smartCapitalize(value: string): string {
   return value.replace(/(^|[\s-])(\w)/g, (_match, separator: string, char: string) => separator + char.toUpperCase())
 }
 
@@ -139,6 +125,10 @@ export function Label({
     <>
       {hasProgress && (
         <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)}%` }}
         />

package/components/ui/layout-tab-bar.tsx

@@ -233,15 +233,15 @@ export function LayoutTabBar({ tabs, activeId, onSelect, onClose, onReorder, cla
 
                 {/* Close button */}
                 {tab.closable && onClose && (
-                  <span
-                    role="button"
+                  <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"
                   >
                     <X className="w-3 h-3" />
-                  </span>
+                  </button>
                 )}
               </button>
 
@@ -269,7 +269,7 @@ export function LayoutTabBar({ tabs, activeId, onSelect, onClose, onReorder, cla
         const ghostSubIconC = getTextClass(t.subtitleIconColor || t.subtitleColor || t.selectedColor || t.color)
         return (
           <div className="fixed z-50 pointer-events-none opacity-90" style={{ left: drag.x + 12, top: drag.y - 20 }}>
-            <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)}>
+            <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)}>
               <div className="flex items-center gap-1.5">
                 {t.icon && <span className={cn('shrink-0 inline-flex', ghostIconC)} style={{ width: 14, height: 14 }}>{t.icon}</span>}
                 <span className={cn('text-md font-medium', ghostTitleC)}>{t.title}</span>

package/components/ui/modal.tsx

@@ -1,6 +1,7 @@
-import { useEffect, useRef, useState } from 'react'
+import { useId, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
 import { Info, AlertTriangle, AlertCircle, Check } from 'lucide-react'
+import { useModalBehavior } from '../hooks/use-modal-behavior.ts'
 import { IconButton, type ActionItem } from './icon-button.tsx'
 import { FormActions } from './form-actions.tsx'
 import type { ReactNode } from 'react'
@@ -41,35 +42,26 @@ interface ModalProps {
 
 function Modal({ isOpen, onClose, title, children, kind = 'info', size = 'md', hideCloseButton = false, headerActions, testId }: ModalProps) {
   const modalRef = useRef<HTMLDivElement>(null)
+  const titleId = useId()
 
-  useEffect(() => {
-    if (!isOpen) return
-    const handleEscape = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') onClose()
-    }
-    document.addEventListener('keydown', handleEscape)
-    return () => document.removeEventListener('keydown', handleEscape)
-  }, [isOpen, onClose])
-
-  useEffect(() => {
-    if (!isOpen) return
-    document.body.style.overflow = 'hidden'
-    return () => { document.body.style.overflow = '' }
-  }, [isOpen])
+  useModalBehavior(isOpen, onClose, modalRef)
 
   if (!isOpen) return null
 
   return createPortal(
     <div className="fixed inset-0 z-50 flex items-center justify-center">
-      <div className="absolute inset-0 bg-[var(--dialog-backdrop)] backdrop-blur-sm" onClick={onClose} />
+      <div className="absolute inset-0 bg-[var(--dialog-backdrop)]" onClick={onClose} aria-hidden="true" />
       <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_CLASSES[size]} w-full mx-4 overflow-hidden`}
+        className={`relative bg-neutral-900 border border-neutral-700 rounded-xl shadow-lg ${SIZE_CLASSES[size]} w-full mx-4 overflow-hidden`}
       >
         <div className="flex items-center gap-3 px-5 py-4 border-b border-neutral-800">
           {KIND_ICON[kind]}
-          <h3 className="text-lg font-semibold text-white flex-1">{title}</h3>
+          <h3 id={titleId} className="text-lg font-semibold text-white flex-1 min-w-0 truncate">{title}</h3>
           {headerActions?.map((a, i) => <IconButton key={i} {...a} />)}
           {!hideCloseButton && (
             <IconButton

package/components/ui/nav-card.tsx

@@ -1,24 +1,9 @@
 /** Navigation card with icon, description, label, and hover lift effect. */
 
-import {
-  Settings, Puzzle, Zap, Shield, Folder, Code, Database, Globe,
-  Terminal, Star, Bell, User, Users, File, Tag, Sparkles, Search,
-  Lock, Mail, Cloud, Heart, Bookmark, Pin, Bot, Plug,
-} from 'lucide-react'
-import type { LucideIcon } from 'lucide-react'
-import type { IconName } from './icon-button.tsx'
+import { iconMap, type IconName } from './icon-button.tsx'
 import { Label, type LabelColor } from './label.tsx'
 import { cn } from '../lib/cn.ts'
 
-const iconSubset: Partial<Record<IconName, LucideIcon>> = {
-  settings: Settings, puzzle: Puzzle, zap: Zap, shield: Shield,
-  folder: Folder, code: Code, database: Database, globe: Globe,
-  terminal: Terminal, star: Star, bell: Bell, user: User,
-  users: Users, file: File, tag: Tag, sparkles: Sparkles,
-  search: Search, lock: Lock, mail: Mail, cloud: Cloud,
-  heart: Heart, bookmark: Bookmark, pin: Pin, bot: Bot, plug: Plug,
-}
-
 export interface NavCardProps {
   title: string
   description?: string
@@ -45,7 +30,7 @@ export function NavCard({
   disabled = false,
   className,
 }: NavCardProps) {
-  const Icon = IconComponent ?? (icon ? iconSubset[icon] : undefined)
+  const Icon = IconComponent ?? (icon ? iconMap[icon] : undefined)
 
   return (
     <button
@@ -74,7 +59,7 @@ export function NavCard({
         </div>
       )}
 
-      <h3 className="text-md font-medium text-neutral-200">{title}</h3>
+      <h3 className="text-md font-medium text-neutral-200 truncate">{title}</h3>
 
       {description && (
         <p className="mt-1 text-sm text-neutral-500 leading-relaxed line-clamp-2">{description}</p>