@anymux/ui-kit 0.1.0 → 0.2.0

package/src/git/BranchList.tsx

@@ -46,15 +46,15 @@ export const BranchList: React.FC<BranchListProps> = ({
   return (
     <div className={`flex flex-col h-full ${className ?? ''}`}>
       {/* Search input */}
-      <div className="px-2 py-2 border-b border-gray-200 dark:border-gray-700 flex-shrink-0">
+      <div className="px-2 py-2 border-b border-border flex-shrink-0">
         <div className="relative">
-          <Search className="absolute left-2 top-1/2 -translate-y-1/2 h-3 w-3 text-gray-400" />
+          <Search className="absolute left-2 top-1/2 -translate-y-1/2 h-3 w-3 text-muted-foreground" />
           <input
             type="text"
             placeholder="Filter branches..."
             value={search}
             onChange={(e) => setSearch(e.target.value)}
-            className="w-full pl-7 pr-2 py-1.5 text-xs rounded-md border border-gray-200 dark:border-gray-600 bg-gray-50 dark:bg-gray-900 focus:outline-none focus:ring-1 focus:ring-blue-500 placeholder-gray-400"
+            className="w-full pl-7 pr-2 py-1.5 text-xs rounded-md border border-border bg-muted/50 focus:outline-none focus:ring-1 focus:ring-ring placeholder-muted-foreground"
           />
         </div>
       </div>
@@ -62,7 +62,7 @@ export const BranchList: React.FC<BranchListProps> = ({
       {/* Branch list */}
       <div className="flex-1 overflow-auto">
         {sorted.length === 0 ? (
-          <div className="px-3 py-6 text-center text-xs text-gray-400">
+          <div className="px-3 py-6 text-center text-xs text-muted-foreground">
             {search ? 'No matching branches' : 'No branches found'}
           </div>
         ) : (
@@ -73,18 +73,18 @@ export const BranchList: React.FC<BranchListProps> = ({
               <button
                 key={branch.name}
                 onClick={() => onSelectBranch?.(branch)}
-                className={`flex items-center gap-2 w-full px-3 py-2 text-left transition-colors border-b border-gray-50 dark:border-gray-800/50 ${
+                className={`flex items-center gap-2 w-full px-3 py-2 text-left transition-colors border-b border-border ${
                   isCurrent
-                    ? 'bg-blue-50 dark:bg-blue-900/20'
-                    : 'hover:bg-gray-50 dark:hover:bg-gray-800/50'
+                    ? 'bg-primary/10'
+                    : 'hover:bg-muted/50'
                 }`}
               >
                 {/* Current indicator */}
                 <span className="w-4 flex-shrink-0 flex items-center justify-center">
                   {isCurrent ? (
-                    <Check className="h-3.5 w-3.5 text-blue-500" />
+                    <Check className="h-3.5 w-3.5 text-primary" />
                   ) : (
-                    <GitBranchIcon className="h-3.5 w-3.5 text-gray-400" />
+                    <GitBranchIcon className="h-3.5 w-3.5 text-muted-foreground" />
                   )}
                 </span>
 
@@ -92,8 +92,8 @@ export const BranchList: React.FC<BranchListProps> = ({
                 <span
                   className={`text-xs truncate flex-1 ${
                     isCurrent
-                      ? 'font-semibold text-blue-700 dark:text-blue-300'
-                      : 'text-gray-700 dark:text-gray-300'
+                      ? 'font-semibold text-primary'
+                      : 'text-foreground'
                   }`}
                 >
                   {branch.name}
@@ -115,7 +115,7 @@ export const BranchList: React.FC<BranchListProps> = ({
                 </div>
 
                 {/* Short SHA */}
-                <code className="text-[10px] font-mono text-gray-400 dark:text-gray-500 flex-shrink-0">
+                <code className="text-[10px] font-mono text-muted-foreground flex-shrink-0">
                   {branch.sha.slice(0, 7)}
                 </code>
               </button>

package/src/git/CommitList.tsx

@@ -98,10 +98,10 @@ function CommitRow({ commit, isHead, changedFileCount, isSelected, onSelect }: C
 
   return (
     <div
-      className={`group border-b border-gray-100 dark:border-gray-800 transition-colors ${
+      className={`group border-b border-border transition-colors ${
         isSelected
-          ? 'bg-blue-50 dark:bg-blue-900/20'
-          : 'hover:bg-gray-50 dark:hover:bg-gray-800/50'
+          ? 'bg-primary/10'
+          : 'hover:bg-muted/50'
       }`}
     >
       {/* Main row */}
@@ -115,7 +115,7 @@ function CommitRow({ commit, isHead, changedFileCount, isSelected, onSelect }: C
             e.stopPropagation();
             setExpanded(!expanded);
           }}
-          className="w-4 h-4 flex items-center justify-center text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 flex-shrink-0"
+          className="w-4 h-4 flex items-center justify-center text-muted-foreground hover:text-foreground flex-shrink-0"
         >
           {expanded ? (
             <ChevronDown className="h-3 w-3" />
@@ -144,17 +144,17 @@ function CommitRow({ commit, isHead, changedFileCount, isSelected, onSelect }: C
             )}
           </div>
           <div className="flex items-center gap-2 mt-0.5">
-            <span className="text-[10px] text-gray-500 dark:text-gray-400">
+            <span className="text-[10px] text-muted-foreground">
               {commit.author.name}
             </span>
-            <span className="text-[10px] text-gray-400 dark:text-gray-500">
+            <span className="text-[10px] text-muted-foreground">
               {formatRelativeTime(commit.author.date)}
             </span>
           </div>
         </div>
 
         {/* SHA badge */}
-        <code className="text-[10px] font-mono text-gray-400 dark:text-gray-500 bg-gray-100 dark:bg-gray-800 px-1.5 py-0.5 rounded flex-shrink-0">
+        <code className="text-[10px] font-mono text-muted-foreground bg-muted px-1.5 py-0.5 rounded flex-shrink-0">
           {shortSha(commit.sha)}
         </code>
       </button>
@@ -164,16 +164,16 @@ function CommitRow({ commit, isHead, changedFileCount, isSelected, onSelect }: C
         <div className="px-3 pb-3 pl-[52px] space-y-2">
           {/* Full commit message */}
           {hasFullBody && (
-            <div className="text-xs text-gray-600 dark:text-gray-300 whitespace-pre-wrap bg-gray-50 dark:bg-gray-800/50 rounded p-2 border border-gray-100 dark:border-gray-700">
+            <div className="text-xs text-muted-foreground whitespace-pre-wrap bg-muted/50 rounded p-2 border border-border">
               {commit.message}
             </div>
           )}
 
-          <div className="flex flex-wrap gap-x-4 gap-y-1 text-[10px] text-gray-500 dark:text-gray-400">
+          <div className="flex flex-wrap gap-x-4 gap-y-1 text-[10px] text-muted-foreground">
             <div className="flex items-center gap-1">
               <User className="h-3 w-3" />
               <span>{commit.author.name}</span>
-              <span className="text-gray-400 dark:text-gray-500">&lt;{commit.author.email}&gt;</span>
+              <span className="text-muted-foreground">&lt;{commit.author.email}&gt;</span>
             </div>
             <div className="flex items-center gap-1">
               <Clock className="h-3 w-3" />
@@ -224,7 +224,7 @@ export const CommitList: React.FC<CommitListProps> = ({
 
   if (commits.length === 0) {
     return (
-      <div className={`flex items-center justify-center py-8 text-xs text-gray-400 ${className ?? ''}`}>
+      <div className={`flex items-center justify-center py-8 text-xs text-muted-foreground ${className ?? ''}`}>
         No commits found
       </div>
     );

package/src/git/DiffViewer.tsx

@@ -23,7 +23,7 @@ function statusIcon(status: GitDiffEntry['status']) {
     case 'modified':
       return <FileEdit className="h-3.5 w-3.5 text-yellow-500" />;
     case 'renamed':
-      return <ArrowRightLeft className="h-3.5 w-3.5 text-blue-500" />;
+      return <ArrowRightLeft className="h-3.5 w-3.5 text-primary" />;
   }
 }
 
@@ -77,7 +77,7 @@ function lineClassName(type: PatchLine['type']): string {
     case 'header':
       return 'bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400 font-medium';
     default:
-      return 'text-gray-700 dark:text-gray-300';
+      return 'text-foreground';
   }
 }
 
@@ -100,13 +100,13 @@ function FileDiffSection({ entry, defaultExpanded = false }: FileDiffSectionProp
   const patchLines = entry.patch ? parsePatch(entry.patch) : [];
 
   return (
-    <div className="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden">
+    <div className="border border-border rounded-lg overflow-hidden">
       {/* File header */}
       <button
         onClick={() => setExpanded(!expanded)}
-        className="flex items-center gap-2 w-full px-3 py-2 bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700/50 transition-colors text-left"
+        className="flex items-center gap-2 w-full px-3 py-2 bg-muted/50 hover:bg-muted transition-colors text-left"
       >
-        <span className="flex-shrink-0 text-gray-400">
+        <span className="flex-shrink-0 text-muted-foreground">
           {expanded ? (
             <ChevronDown className="h-3.5 w-3.5" />
           ) : (
@@ -119,8 +119,8 @@ function FileDiffSection({ entry, defaultExpanded = false }: FileDiffSectionProp
         <span className="text-xs font-mono truncate flex-1">
           {entry.previousPath && entry.status === 'renamed' ? (
             <>
-              <span className="text-gray-400">{entry.previousPath}</span>
-              <span className="text-gray-500 mx-1">&rarr;</span>
+              <span className="text-muted-foreground">{entry.previousPath}</span>
+              <span className="text-muted-foreground mx-1">&rarr;</span>
               <span>{entry.path}</span>
             </>
           ) : (
@@ -163,7 +163,7 @@ function FileDiffSection({ entry, defaultExpanded = false }: FileDiffSectionProp
               ))}
             </pre>
           ) : (
-            <div className="px-3 py-4 text-center text-xs text-gray-400 italic">
+            <div className="px-3 py-4 text-center text-xs text-muted-foreground italic">
               No diff content available
             </div>
           )}
@@ -178,7 +178,7 @@ function FileDiffSection({ entry, defaultExpanded = false }: FileDiffSectionProp
 export const DiffViewer: React.FC<DiffViewerProps> = ({ entries, className }) => {
   if (entries.length === 0) {
     return (
-      <div className={`flex items-center justify-center py-8 text-xs text-gray-400 ${className ?? ''}`}>
+      <div className={`flex items-center justify-center py-8 text-xs text-muted-foreground ${className ?? ''}`}>
         No changes to display
       </div>
     );
@@ -190,9 +190,9 @@ export const DiffViewer: React.FC<DiffViewerProps> = ({ entries, className }) =>
   return (
     <div className={`space-y-2 ${className ?? ''}`}>
       {/* Summary bar */}
-      <div className="flex items-center gap-3 px-3 py-2 bg-gray-50 dark:bg-gray-800 rounded-lg text-xs text-gray-600 dark:text-gray-300">
+      <div className="flex items-center gap-3 px-3 py-2 bg-muted/50 rounded-lg text-xs text-muted-foreground">
         <div className="flex items-center gap-1">
-          <FileText className="h-3.5 w-3.5 text-gray-400" />
+          <FileText className="h-3.5 w-3.5 text-muted-foreground" />
           <span className="font-medium">{entries.length}</span>
           <span>file{entries.length !== 1 ? 's' : ''} changed</span>
         </div>

package/src/icons/iconMap.ts

@@ -27,8 +27,8 @@ export const iconColorMap: Record<string, string> = {
   'file-video': 'text-orange-500',
   'file-audio': 'text-violet-500',
   'file-code': 'text-blue-500',
-  'file-text': 'text-gray-500',
-  'file-type': 'text-gray-500',
+  'file-text': 'text-muted-foreground',
+  'file-type': 'text-muted-foreground',
   'file-json': 'text-yellow-500',
   'file-terminal': 'text-green-500',
   'file-spreadsheet': 'text-emerald-600',
@@ -37,7 +37,7 @@ export const iconColorMap: Record<string, string> = {
   'database': 'text-purple-500',
   'globe': 'text-blue-400',
   'presentation': 'text-orange-500',
-  'file': 'text-gray-400',
+  'file': 'text-muted-foreground',
 };
 
 // Comprehensive file extension to icon name mapping
@@ -140,7 +140,7 @@ export const contextMenuIconMap: Record<string, LucideIcon> = {
 export function resolveIcon(name: string, className?: string): React.ReactElement {
   const iconName = name || 'file';
   const MappedIcon = lucideIconMap[iconName] || File;
-  const colorClass = iconColorMap[iconName] || 'text-gray-400';
+  const colorClass = iconColorMap[iconName] || 'text-muted-foreground';
   const finalClassName = className ? `${className} ${colorClass}` : `w-4 h-4 ${colorClass}`;
   return React.createElement(MappedIcon, { className: finalClassName });
 }

package/src/layout/index.ts

@@ -1,6 +1,10 @@
-// AICODE-NOTE: Main exports for EditorLayout module
+// Layout components
 export { ExplorerLayout } from './components/ExplorerLayout/ExplorerLayout';
 export type { ExplorerLayoutProps, ExplorerSections } from './components/ExplorerLayout/ExplorerLayout';
 
+// Responsive layout model
+export { ResponsiveLayoutModel, getResponsiveLayout } from './models/ResponsiveLayoutModel';
+export type { Breakpoint } from './models/ResponsiveLayoutModel';
+
 // Examples
-export { SimpleExample as ExplorerLayoutSimpleExample } from './examples/SimpleExample'; 
+export { SimpleExample as ExplorerLayoutSimpleExample } from './examples/SimpleExample';

package/src/layout/models/ResponsiveLayoutModel.ts

@@ -0,0 +1,116 @@
+import { makeAutoObservable, action } from 'mobx';
+
+export type Breakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+
+const BREAKPOINTS: Record<Breakpoint, number> = {
+  xs: 0,
+  sm: 640,
+  md: 768,
+  lg: 1024,
+  xl: 1280,
+  '2xl': 1536,
+};
+
+/**
+ * MobX model that tracks viewport breakpoints via matchMedia.
+ * Shared across all ui-kit components for consistent responsive behavior.
+ *
+ * Usage:
+ *   const responsive = new ResponsiveLayoutModel();
+ *   responsive.attach(); // start listening
+ *   // ... use responsive.isMobile, responsive.breakpoint, etc.
+ *   responsive.detach(); // stop listening
+ */
+export class ResponsiveLayoutModel {
+  breakpoint: Breakpoint = 'lg';
+  width = typeof window !== 'undefined' ? window.innerWidth : 1024;
+
+  private queries = new Map<string, MediaQueryList>();
+  private cleanups: Array<() => void> = [];
+
+  constructor() {
+    makeAutoObservable(this, {
+      attach: false,
+      detach: false,
+    });
+  }
+
+  get isMobile(): boolean {
+    return this.width < BREAKPOINTS.md;
+  }
+
+  get isTablet(): boolean {
+    return this.width >= BREAKPOINTS.md && this.width < BREAKPOINTS.lg;
+  }
+
+  get isDesktop(): boolean {
+    return this.width >= BREAKPOINTS.lg;
+  }
+
+  /** True if viewport is at or above the given breakpoint */
+  isAtLeast(bp: Breakpoint): boolean {
+    return this.width >= BREAKPOINTS[bp];
+  }
+
+  /** Suggested column count for grid layouts */
+  get gridColumns(): number {
+    if (this.width < BREAKPOINTS.sm) return 1;
+    if (this.width < BREAKPOINTS.md) return 2;
+    if (this.width < BREAKPOINTS.lg) return 4;
+    if (this.width < BREAKPOINTS.xl) return 6;
+    return 8;
+  }
+
+  /** Start listening for viewport changes */
+  attach(): void {
+    if (typeof window === 'undefined') return;
+
+    const entries = Object.entries(BREAKPOINTS) as Array<[Breakpoint, number]>;
+    // Sort descending so we match the largest breakpoint first
+    entries.sort((a, b) => b[1] - a[1]);
+
+    for (const [bp, minWidth] of entries) {
+      const mql = window.matchMedia(`(min-width: ${minWidth}px)`);
+      this.queries.set(bp, mql);
+
+      const handler = action(() => {
+        this.width = window.innerWidth;
+        this.breakpoint = this.computeBreakpoint();
+      });
+
+      mql.addEventListener('change', handler);
+      this.cleanups.push(() => mql.removeEventListener('change', handler));
+    }
+
+    // Set initial values
+    this.width = window.innerWidth;
+    this.breakpoint = this.computeBreakpoint();
+  }
+
+  /** Stop listening */
+  detach(): void {
+    this.cleanups.forEach((fn) => fn());
+    this.cleanups = [];
+    this.queries.clear();
+  }
+
+  private computeBreakpoint(): Breakpoint {
+    const entries = Object.entries(BREAKPOINTS) as Array<[Breakpoint, number]>;
+    entries.sort((a, b) => b[1] - a[1]);
+    for (const [bp, minWidth] of entries) {
+      if (this.width >= minWidth) return bp;
+    }
+    return 'xs';
+  }
+}
+
+/** Singleton for app-wide responsive state */
+let _instance: ResponsiveLayoutModel | null = null;
+
+export function getResponsiveLayout(): ResponsiveLayoutModel {
+  if (!_instance) {
+    _instance = new ResponsiveLayoutModel();
+    _instance.attach();
+  }
+  return _instance;
+}

package/src/list/components/ListItem.tsx

@@ -200,7 +200,7 @@ const ListItemComponent = observer<ListItemProps>(({
   const resolveItemIcon = (iconName: string | undefined, sizeClass = 'w-4 h-4') => {
     const name = iconName || 'file';
     const MappedIcon = lucideIconMap[name] || File;
-    const colorClass = iconColorMap[name] || 'text-gray-400';
+    const colorClass = iconColorMap[name] || 'text-muted-foreground';
     return <MappedIcon className={`${sizeClass} ${colorClass}`} />;
   };
 

package/src/list/index.ts

@@ -14,7 +14,7 @@ export { CalculatedGridView } from './components/CalculatedGridView';
 // Shared components
 export { ListLoader } from './components/shared/ListLoader';
 export { LoadingIndicator, InlineLoading, LoadingProgress } from './components/shared/LoadingIndicator';
-export { ListErrorBoundary } from './components/shared/ErrorBoundary';
+export { ErrorBoundary as ListErrorBoundary } from '../shared/ErrorBoundary';
 export { ErrorDisplay, NetworkError, LoadError } from './components/shared/ErrorDisplay';
 export { EmptyState, NoItems, NoSearchResults, NoSelection } from './components/shared/EmptyState';
 

package/src/media/AlbumSidebar.tsx

@@ -18,13 +18,13 @@ export const AlbumSidebar = observer<AlbumSidebarProps>(({ model, provider, clas
   }, [provider]);
 
   return (
-    <div className={`w-56 border-r border-gray-200 bg-gray-50 overflow-y-auto ${className}`}>
+    <div className={`w-56 border-r border-border bg-muted/30 overflow-y-auto ${className}`}>
       <div className="p-3">
-        <h3 className="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">Albums</h3>
+        <h3 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-2">Albums</h3>
         <button
           onClick={() => model.setAlbum(null)}
           className={`flex items-center gap-2 w-full px-3 py-2 rounded-lg text-sm transition-colors ${
-            model.currentAlbum === null ? 'bg-blue-100 text-blue-700' : 'text-gray-700 hover:bg-gray-100'
+            model.currentAlbum === null ? 'bg-primary/10 text-primary' : 'text-foreground hover:bg-muted'
           }`}
         >
           <Image size={16} />
@@ -35,7 +35,7 @@ export const AlbumSidebar = observer<AlbumSidebarProps>(({ model, provider, clas
             key={album}
             onClick={() => model.setAlbum(album)}
             className={`flex items-center gap-2 w-full px-3 py-2 rounded-lg text-sm transition-colors ${
-              model.currentAlbum === album ? 'bg-blue-100 text-blue-700' : 'text-gray-700 hover:bg-gray-100'
+              model.currentAlbum === album ? 'bg-primary/10 text-primary' : 'text-foreground hover:bg-muted'
             }`}
           >
             <FolderOpen size={16} />

package/src/media/MediaBrowser.tsx

@@ -21,29 +21,29 @@ export const MediaBrowser = observer<MediaBrowserProps>(({ model, provider, clas
   useEffect(() => { model.loadItems(); }, [model]);
 
   return (
-    <div className={`flex h-full bg-white rounded-xl border border-gray-200 overflow-hidden ${className}`}>
-      {showSidebar && <AlbumSidebar model={model} provider={provider} />}
+    <div className={`flex h-full bg-background rounded-xl border border-border overflow-hidden ${className}`}>
+      {showSidebar && <AlbumSidebar model={model} provider={provider} className="hidden md:block" />}
 
       <div className="flex-1 flex flex-col min-w-0">
         {/* Toolbar */}
-        <div className="flex items-center gap-2 px-4 py-2 border-b border-gray-200">
-          <div className="relative flex-1 max-w-xs">
-            <Search size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
+        <div className="flex items-center gap-2 px-3 py-2 border-b border-border flex-wrap sm:flex-nowrap">
+          <div className="relative flex-1 min-w-[120px] sm:max-w-xs">
+            <Search size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground" />
             <input
               type="text"
               placeholder="Search media..."
               value={model.searchQuery}
               onChange={e => model.search(e.target.value)}
-              className="w-full pl-9 pr-3 py-1.5 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+              className="w-full pl-9 pr-3 py-1.5 text-sm border border-border rounded-lg bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-ring"
             />
           </div>
 
-          <div className="flex items-center border border-gray-200 rounded-lg overflow-hidden">
+          <div className="flex items-center border border-border rounded-lg overflow-hidden">
             {([['grid', Grid3X3], ['list', List], ['timeline', Clock]] as const).map(([mode, Icon]) => (
               <button
                 key={mode}
                 onClick={() => model.setViewMode(mode)}
-                className={`p-1.5 ${model.viewMode === mode ? 'bg-blue-50 text-blue-600' : 'text-gray-500 hover:bg-gray-50'}`}
+                className={`p-1.5 ${model.viewMode === mode ? 'bg-primary/10 text-primary' : 'text-muted-foreground hover:bg-muted'}`}
               >
                 <Icon size={16} />
               </button>
@@ -53,7 +53,7 @@ export const MediaBrowser = observer<MediaBrowserProps>(({ model, provider, clas
           <select
             value={model.filterByType ?? ''}
             onChange={e => model.setFilter(e.target.value as 'photo' | 'video' | 'audio' || null)}
-            className="text-sm border border-gray-200 rounded-lg px-2 py-1.5"
+            className="text-sm border border-border rounded-lg px-2 py-1.5 bg-background text-foreground"
           >
             <option value="">All types</option>
             <option value="photo">Photos</option>
@@ -66,7 +66,7 @@ export const MediaBrowser = observer<MediaBrowserProps>(({ model, provider, clas
         <div className="flex-1 overflow-y-auto">
           {model.loading ? (
             <div className="flex items-center justify-center h-64">
-              <Loader2 size={24} className="animate-spin text-gray-400" />
+              <Loader2 size={24} className="animate-spin text-muted-foreground" />
             </div>
           ) : model.error ? (
             <BrowserError
@@ -75,7 +75,7 @@ export const MediaBrowser = observer<MediaBrowserProps>(({ model, provider, clas
               onRetry={() => model.loadItems()}
             />
           ) : model.filteredItems.length === 0 ? (
-            <div className="flex items-center justify-center h-64 text-gray-400 text-sm">No media found</div>
+            <div className="flex items-center justify-center h-64 text-muted-foreground text-sm">No media found</div>
           ) : (
             <>
               {model.viewMode === 'grid' && <MediaGrid model={model} />}

package/src/media/MediaGrid.tsx

@@ -13,7 +13,7 @@ const MediaThumbnail = ({ item, onClick, selected }: { item: MediaItem; onClick:
   <button
     onClick={onClick}
     className={`relative aspect-square rounded-lg overflow-hidden cursor-pointer group border-2 transition-all ${
-      selected ? 'border-blue-500 ring-2 ring-blue-200' : 'border-transparent hover:border-gray-300'
+      selected ? 'border-primary ring-2 ring-ring' : 'border-transparent hover:border-border'
     }`}
   >
     {item.thumbnail || item.mediaType === 'photo' ? (
@@ -23,8 +23,8 @@ const MediaThumbnail = ({ item, onClick, selected }: { item: MediaItem; onClick:
         className="w-full h-full object-cover"
       />
     ) : (
-      <div className="w-full h-full bg-gray-100 flex items-center justify-center">
-        {item.mediaType === 'video' ? <Play size={32} className="text-gray-400" /> : <Music size={32} className="text-gray-400" />}
+      <div className="w-full h-full bg-muted flex items-center justify-center">
+        {item.mediaType === 'video' ? <Play size={32} className="text-muted-foreground" /> : <Music size={32} className="text-muted-foreground" />}
       </div>
     )}
     {item.mediaType === 'video' && (

package/src/media/MediaList.tsx

@@ -18,16 +18,16 @@ const mediaIcon = (item: MediaItem) => {
 };
 
 export const MediaList = observer<MediaListProps>(({ model, className = '' }) => (
-  <div className={`divide-y divide-gray-100 ${className}`}>
+  <div className={`divide-y divide-border ${className}`}>
     {model.filteredItems.map(item => (
       <button
         key={item.id}
         onClick={() => model.openPreview(item)}
-        className={`flex items-center gap-3 px-4 py-3 w-full text-left hover:bg-gray-50 transition-colors ${
-          model.selectedItems.has(item.id) ? 'bg-blue-50' : ''
+        className={`flex items-center gap-3 px-4 py-3 w-full text-left hover:bg-muted/50 transition-colors ${
+          model.selectedItems.has(item.id) ? 'bg-primary/10' : ''
         }`}
       >
-        <div className="w-12 h-12 rounded-lg overflow-hidden flex-shrink-0 bg-gray-100 flex items-center justify-center">
+        <div className="w-12 h-12 rounded-lg overflow-hidden flex-shrink-0 bg-muted flex items-center justify-center">
           {item.thumbnail ? (
             <img src={item.thumbnail} alt={item.title} className="w-full h-full object-cover" />
           ) : (
@@ -35,8 +35,8 @@ export const MediaList = observer<MediaListProps>(({ model, className = '' }) =>
           )}
         </div>
         <div className="flex-1 min-w-0">
-          <p className="text-sm font-medium text-gray-900 truncate" title={item.title}>{item.title}</p>
-          <p className="text-xs text-gray-500">
+          <p className="text-sm font-medium text-foreground truncate" title={item.title}>{item.title}</p>
+          <p className="text-xs text-muted-foreground">
             {item.mediaType} {item.album && `· ${item.album}`} · {item.createdAt.toLocaleDateString()}
           </p>
         </div>

package/src/media/MediaPreview.tsx

@@ -40,8 +40,8 @@ export const MediaPreview = observer<MediaPreviewProps>(({ model, className = ''
           <video src={item.url} controls className="max-w-full max-h-[80vh] rounded-lg" />
         )}
         {item.mediaType === 'audio' && (
-          <div className="bg-gray-900 rounded-xl p-8 flex flex-col items-center gap-4">
-            <div className="w-48 h-48 bg-gray-800 rounded-xl flex items-center justify-center text-6xl">🎵</div>
+          <div className="bg-background rounded-xl p-8 flex flex-col items-center gap-4">
+            <div className="w-48 h-48 bg-muted rounded-xl flex items-center justify-center text-6xl">🎵</div>
             <audio src={item.url} controls className="w-80" />
           </div>
         )}

package/src/media/MediaTimeline.tsx

@@ -14,8 +14,8 @@ const TimelineThumbnail = ({ item, onClick }: { item: MediaItem; onClick: () =>
     {item.thumbnail || item.mediaType === 'photo' ? (
       <img src={item.thumbnail ?? item.url} alt={item.title} className="w-full h-full object-cover" />
     ) : (
-      <div className="w-full h-full bg-gray-100 flex items-center justify-center">
-        {item.mediaType === 'video' ? <Play size={24} className="text-gray-400" /> : <Music size={24} className="text-gray-400" />}
+      <div className="w-full h-full bg-muted flex items-center justify-center">
+        {item.mediaType === 'video' ? <Play size={24} className="text-muted-foreground" /> : <Music size={24} className="text-muted-foreground" />}
       </div>
     )}
     <div className="absolute inset-0 bg-black/0 group-hover:bg-black/10 transition-colors" />
@@ -26,7 +26,7 @@ export const MediaTimeline = observer<MediaTimelineProps>(({ model, className =
   <div className={`space-y-6 p-4 ${className}`}>
     {Array.from(model.groupedByDate.entries()).map(([date, items]) => (
       <div key={date}>
-        <h3 className="text-sm font-semibold text-gray-700 mb-2 sticky top-0 bg-white/90 backdrop-blur-sm py-1">{date}</h3>
+        <h3 className="text-sm font-semibold text-foreground mb-2 sticky top-0 bg-background/90 backdrop-blur-sm py-1">{date}</h3>
         <div className="grid grid-cols-4 sm:grid-cols-6 md:grid-cols-8 gap-1">
           {items.map(item => (
             <TimelineThumbnail key={item.id} item={item} onClick={() => model.openPreview(item)} />

package/src/{file-browser/components/shared → shared}/ErrorBoundary.tsx

@@ -1,6 +1,6 @@
 import React, { Component, ReactNode } from 'react';
 import { AlertTriangle } from 'lucide-react';
-import { cn } from '../../../lib/utils';
+import { cn } from '../lib/utils';
 
 export interface ErrorBoundaryProps {
   children: ReactNode;
@@ -43,7 +43,7 @@ export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundarySt
     this.props.onError?.(error, errorInfoString);
 
     // Log error for debugging
-    console.error('FileBrowser Error Boundary caught an error:', error);
+    console.error('ErrorBoundary caught an error:', error);
     console.error('Error Info:', errorInfo);
   }
 
@@ -85,7 +85,7 @@ export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundarySt
           </h2>
           
           <p className="text-sm text-muted-foreground mb-4 max-w-md">
-            {error?.message || 'An unexpected error occurred while rendering the file browser.'}
+            {error?.message || 'An unexpected error occurred.'}
           </p>
           
           <div className="flex gap-2">