@anymux/ui-kit 0.1.0 → 0.2.0

package/dist/tree.d.ts

@@ -1,2 +1,2 @@
-import { CheckboxState, DEFAULT_SELECTION_THEME$1 as DEFAULT_SELECTION_THEME, FocusIndicatorStyle, SelectionColorScheme, SelectionIntensity, SimpleTreeProvider$1 as SimpleTreeProvider, TestTreeProvider$1 as TestTreeProvider, Tree$1 as Tree, TreeCheckbox$1 as TreeCheckbox, TreeContextMenu$1 as TreeContextMenu, TreeContextMenuEvent, TreeContextMenuItem, TreeContextMenuProps, TreeDragDropInfo, TreeLoadOptions, TreeLoadResult, TreeModel$1 as TreeModel, TreeNodeData, TreeNodeList$1 as TreeNodeList, TreeNodeListProps, TreeNodeRenderer, TreeProps, TreeProvider, TreeSelectionInfo, TreeSelectionTheme, TreeTable$1 as TreeTable, TreeTableColumn, TreeTableExportOptions, TreeTableProps, TreeTableSort, getCustomColorVariables$1 as getCustomColorVariables, getSelectionClasses$1 as getSelectionClasses, logger$1 as logger } from "./index-kHr9udZD.js";
+import { CheckboxState, DEFAULT_SELECTION_THEME$1 as DEFAULT_SELECTION_THEME, FocusIndicatorStyle, SelectionColorScheme, SelectionIntensity, SimpleTreeProvider$1 as SimpleTreeProvider, TestTreeProvider$1 as TestTreeProvider, Tree$1 as Tree, TreeCheckbox$1 as TreeCheckbox, TreeContextMenu$1 as TreeContextMenu, TreeContextMenuEvent, TreeContextMenuItem, TreeContextMenuProps, TreeDragDropInfo, TreeLoadOptions, TreeLoadResult, TreeModel$1 as TreeModel, TreeNodeData, TreeNodeList$1 as TreeNodeList, TreeNodeListProps, TreeNodeRenderer, TreeProps, TreeProvider, TreeSelectionInfo, TreeSelectionTheme, TreeTable$1 as TreeTable, TreeTableColumn, TreeTableExportOptions, TreeTableProps, TreeTableSort, getCustomColorVariables$1 as getCustomColorVariables, getSelectionClasses$1 as getSelectionClasses, logger$1 as logger } from "./index-BkIh8oov.js";
 export { CheckboxState, DEFAULT_SELECTION_THEME, FocusIndicatorStyle, SelectionColorScheme, SelectionIntensity, SimpleTreeProvider, TestTreeProvider, Tree, TreeCheckbox, TreeContextMenu, TreeContextMenuEvent, TreeContextMenuItem, TreeContextMenuProps, TreeDragDropInfo, TreeLoadOptions, TreeLoadResult, TreeModel, TreeNodeData, TreeNodeList, TreeNodeListProps, TreeNodeRenderer, TreeProps, TreeProvider, TreeSelectionInfo, TreeSelectionTheme, TreeTable, TreeTableColumn, TreeTableExportOptions, TreeTableProps, TreeTableSort, getCustomColorVariables, getSelectionClasses, logger };

package/dist/tree.js

@@ -1,6 +1,6 @@
 import "./utils-B4fdKKsy.js";
-import { DEFAULT_SELECTION_THEME, SimpleTreeProvider, TestTreeProvider, Tree, TreeCheckbox, TreeContextMenu, TreeModel, TreeNodeList, TreeTable, getCustomColorVariables, getSelectionClasses, logger } from "./tree-Dd9Z0Aso.js";
-import "./iconMap-V4B8P-Uh.js";
+import { DEFAULT_SELECTION_THEME, SimpleTreeProvider, TestTreeProvider, Tree, TreeCheckbox, TreeContextMenu, TreeModel, TreeNodeList, TreeTable, getCustomColorVariables, getSelectionClasses, logger } from "./tree-B9VQcKBp.js";
+import "./iconMap-DDpe35ek.js";
 import "./FileBrowserContext-B6jixa2j.js";
 
 export { DEFAULT_SELECTION_THEME, SimpleTreeProvider, TestTreeProvider, Tree, TreeCheckbox, TreeContextMenu, TreeModel, TreeNodeList, TreeTable, getCustomColorVariables, getSelectionClasses, logger };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@anymux/ui-kit",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "type": "module",
   "license": "MIT",
   "description": "Composite UI components for AnyMux — file browser, media, calendar, contacts, git",
@@ -84,10 +84,10 @@
     "squarify": "^1.1.0",
     "tailwind-merge": "^2.2.1",
     "transformation-matrix": "^3.1.0",
-    "@anymux/file-system": "0.1.0",
     "@anymux/ui": "0.1.0"
   },
   "peerDependencies": {
+    "@anymux/file-system": ">=0.1.0",
     "mobx": "^6.13.5",
     "mobx-react-lite": "^4.0.7",
     "react": "^19.0.0",

package/src/calendar/AgendaView.tsx

@@ -15,13 +15,13 @@ export const AgendaView = observer<AgendaViewProps>(({ model, className = '' })
   return (
     <div className={`overflow-y-auto p-4 space-y-4 ${className}`}>
       {sortedEntries.length === 0 && (
-        <div className="flex items-center justify-center h-32 text-gray-400 text-sm">No upcoming events</div>
+        <div className="flex items-center justify-center h-32 text-muted-foreground text-sm">No upcoming events</div>
       )}
       {sortedEntries.map(([dateKey, events]) => {
         const date = new Date(dateKey + 'T00:00:00');
         return (
           <div key={dateKey}>
-            <h3 className="text-sm font-semibold text-gray-700 mb-2 sticky top-0 bg-white/90 backdrop-blur-sm py-1">
+            <h3 className="text-sm font-semibold text-foreground mb-2 sticky top-0 bg-background/90 backdrop-blur-sm py-1">
               {date.toLocaleDateString(undefined, { weekday: 'long', month: 'long', day: 'numeric' })}
             </h3>
             <div className="space-y-1.5">

package/src/calendar/CalendarBrowser.tsx

@@ -26,35 +26,35 @@ export const CalendarBrowser = observer<CalendarBrowserProps>(({ model, classNam
   useEffect(() => { model.loadEvents(); }, [model]);
 
   return (
-    <div className={`flex h-full bg-white rounded-xl border border-gray-200 overflow-hidden ${className}`}>
-      {showSidebar && <CalendarSidebar model={model} />}
+    <div className={`flex h-full bg-background rounded-xl border border-border overflow-hidden ${className}`}>
+      {showSidebar && <CalendarSidebar model={model} 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">
-          <button onClick={() => model.today()} className="text-sm px-3 py-1.5 border border-gray-200 rounded-lg hover:bg-gray-50">
+        <div className="flex items-center gap-1.5 sm:gap-2 px-3 py-2 border-b border-border flex-wrap sm:flex-nowrap">
+          <button onClick={() => model.today()} className="text-sm px-3 py-1.5 border border-border rounded-lg hover:bg-muted">
             Today
           </button>
-          <button onClick={() => model.navigateBack()} className="p-1.5 hover:bg-gray-100 rounded-lg">
+          <button onClick={() => model.navigateBack()} className="p-1.5 hover:bg-muted rounded-lg">
             <ChevronLeft size={16} />
           </button>
-          <button onClick={() => model.navigateForward()} className="p-1.5 hover:bg-gray-100 rounded-lg">
+          <button onClick={() => model.navigateForward()} className="p-1.5 hover:bg-muted rounded-lg">
             <ChevronRight size={16} />
           </button>
-          <h2 className="text-sm font-medium text-gray-900 ml-2">
+          <h2 className="text-sm font-medium text-foreground ml-2 truncate">
             {model.currentDate.toLocaleDateString(undefined, {
               month: 'long',
               year: 'numeric',
               ...(model.viewMode === 'day' ? { day: 'numeric', weekday: 'long' } : {})
             })}
           </h2>
-          <div className="ml-auto flex items-center border border-gray-200 rounded-lg overflow-hidden">
+          <div className="ml-auto flex items-center border border-border rounded-lg overflow-hidden">
             {(Object.keys(VIEW_LABELS) as CalendarViewMode[]).map(mode => (
               <button
                 key={mode}
                 onClick={() => model.setViewMode(mode)}
-                className={`px-3 py-1.5 text-xs font-medium ${
-                  model.viewMode === mode ? 'bg-blue-50 text-blue-600' : 'text-gray-500 hover:bg-gray-50'
+                className={`px-2 sm:px-3 py-1.5 text-xs font-medium ${
+                  model.viewMode === mode ? 'bg-primary/10 text-primary' : 'text-muted-foreground hover:bg-muted'
                 }`}
               >
                 {VIEW_LABELS[mode]}
@@ -67,7 +67,7 @@ export const CalendarBrowser = observer<CalendarBrowserProps>(({ model, classNam
         <div className="flex-1 overflow-hidden">
           {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

package/src/calendar/CalendarSidebar.tsx

@@ -30,23 +30,23 @@ export const CalendarSidebar = observer<CalendarSidebarProps>(({ model, classNam
     day === d.getDate();
 
   return (
-    <div className={`w-56 border-r border-gray-200 bg-gray-50 p-3 ${className}`}>
+    <div className={`w-56 border-r border-border bg-muted/30 p-3 ${className}`}>
       {/* Mini month */}
       <div className="mb-4">
         <div className="flex items-center justify-between mb-2">
-          <button onClick={() => model.navigateBack()} className="p-1 hover:bg-gray-200 rounded">
+          <button onClick={() => model.navigateBack()} className="p-1 hover:bg-muted rounded">
             <ChevronLeft size={14} />
           </button>
-          <span className="text-sm font-medium">
+          <span className="text-sm font-medium text-foreground">
             {d.toLocaleDateString(undefined, { month: 'long', year: 'numeric' })}
           </span>
-          <button onClick={() => model.navigateForward()} className="p-1 hover:bg-gray-200 rounded">
+          <button onClick={() => model.navigateForward()} className="p-1 hover:bg-muted rounded">
             <ChevronRight size={14} />
           </button>
         </div>
         <div className="grid grid-cols-7 gap-0.5 text-center">
           {DAYS.map(day => (
-            <div key={day} className="text-[10px] text-gray-400 font-medium py-0.5">{day}</div>
+            <div key={day} className="text-[10px] text-muted-foreground font-medium py-0.5">{day}</div>
           ))}
           {cells.map((day, i) => (
             <button
@@ -55,9 +55,9 @@ export const CalendarSidebar = observer<CalendarSidebarProps>(({ model, classNam
               onClick={() => day && model.setDate(new Date(year, month, day))}
               className={`text-xs py-0.5 rounded ${
                 day === null ? '' :
-                isSelected(day) ? 'bg-blue-500 text-white' :
-                isToday(day) ? 'bg-blue-100 text-blue-700 font-bold' :
-                'text-gray-700 hover:bg-gray-200'
+                isSelected(day) ? 'bg-primary text-primary-foreground' :
+                isToday(day) ? 'bg-primary/10 text-primary font-bold' :
+                'text-foreground hover:bg-muted'
               }`}
             >
               {day}
@@ -68,9 +68,9 @@ export const CalendarSidebar = observer<CalendarSidebarProps>(({ model, classNam
 
       {/* Calendar list */}
       <div>
-        <h3 className="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">Calendars</h3>
+        <h3 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-2">Calendars</h3>
         {model.calendars.map(cal => (
-          <div key={cal.id} className="flex items-center gap-2 px-2 py-1.5 text-sm text-gray-700">
+          <div key={cal.id} className="flex items-center gap-2 px-2 py-1.5 text-sm text-foreground">
             <div className="w-3 h-3 rounded-full" style={{ backgroundColor: cal.color }} />
             <span className="truncate" title={cal.name}>{cal.name}</span>
           </div>

package/src/calendar/DayView.tsx

@@ -19,8 +19,8 @@ export const DayView = observer<DayViewProps>(({ model, className = '' }) => {
   return (
     <div className={`flex flex-col h-full overflow-auto ${className}`}>
       {/* Header */}
-      <div className="border-b border-gray-200 px-4 py-2 sticky top-0 bg-white z-10">
-        <h2 className="text-lg font-medium text-gray-900">
+      <div className="border-b border-border px-4 py-2 sticky top-0 bg-background z-10">
+        <h2 className="text-lg font-medium text-foreground">
           {d.toLocaleDateString(undefined, { weekday: 'long', month: 'long', day: 'numeric' })}
         </h2>
         {allDayEvents.length > 0 && (
@@ -44,11 +44,11 @@ export const DayView = observer<DayViewProps>(({ model, className = '' }) => {
         {HOURS.map(hour => {
           const hourEvents = timedEvents.filter(e => e.startDate.getHours() === hour);
           return (
-            <div key={hour} className="grid grid-cols-[60px_1fr] border-b border-gray-50 min-h-[48px]">
-              <div className="text-[10px] text-gray-400 text-right pr-2 -mt-2">
+            <div key={hour} className="grid grid-cols-[60px_1fr] border-b border-border/50 min-h-[48px]">
+              <div className="text-[10px] text-muted-foreground text-right pr-2 -mt-2">
                 {hour === 0 ? '' : `${hour % 12 || 12} ${hour < 12 ? 'AM' : 'PM'}`}
               </div>
-              <div className="border-l border-gray-100 relative pl-1">
+              <div className="border-l border-border relative pl-1">
                 {hourEvents.map(ev => (
                   <button
                     key={ev.id}

package/src/calendar/EventCard.tsx

@@ -30,11 +30,11 @@ export const EventCard = ({ event, compact = false, onClick, className = '' }: E
   return (
     <button
       onClick={onClick}
-      className={`text-left w-full p-3 rounded-lg border border-gray-200 hover:shadow-sm transition-shadow ${className}`}
+      className={`text-left w-full p-3 rounded-lg border border-border hover:shadow-sm transition-shadow ${className}`}
       style={{ borderLeftWidth: '3px', borderLeftColor: color }}
     >
-      <p className="text-sm font-medium text-gray-900 truncate" title={event.title}>{event.title}</p>
-      <div className="mt-1 flex items-center gap-3 text-xs text-gray-500">
+      <p className="text-sm font-medium text-foreground truncate" title={event.title}>{event.title}</p>
+      <div className="mt-1 flex items-center gap-3 text-xs text-muted-foreground">
         <span className="flex items-center gap-1">
           <Clock size={12} />
           {event.allDay ? 'All day' : `${formatTime(event.startDate)} - ${formatTime(event.endDate)}`}

package/src/calendar/MonthView.tsx

@@ -36,23 +36,23 @@ export const MonthView = observer<MonthViewProps>(({ model, className = '' }) =>
 
   return (
     <div className={`flex flex-col h-full ${className}`}>
-      <div className="grid grid-cols-7 border-b border-gray-200">
+      <div className="grid grid-cols-7 border-b border-border">
         {DAYS.map(day => (
-          <div key={day} className="px-2 py-2 text-xs font-medium text-gray-500 text-center">{day.slice(0, 3)}</div>
+          <div key={day} className="px-2 py-2 text-xs font-medium text-muted-foreground text-center">{day.slice(0, 3)}</div>
         ))}
       </div>
       <div className="flex-1 grid grid-rows-[repeat(auto-fill,1fr)]">
         {weeks.map((week, wi) => (
-          <div key={wi} className="grid grid-cols-7 border-b border-gray-100 min-h-[80px]">
+          <div key={wi} className="grid grid-cols-7 border-b border-border min-h-[80px]">
             {week.map((day, di) => {
               const dateKey = day ? `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}` : null;
               const events = dateKey ? (model.eventsByDay.get(dateKey) ?? []) : [];
               return (
-                <div key={di} className={`border-r border-gray-100 p-1 ${day === null ? 'bg-gray-50' : ''}`}>
+                <div key={di} className={`border-r border-border p-1 ${day === null ? 'bg-muted/50' : ''}`}>
                   {day !== null && (
                     <>
                       <div className={`text-xs mb-0.5 w-6 h-6 flex items-center justify-center rounded-full ${
-                        isToday(day) ? 'bg-blue-500 text-white font-bold' : 'text-gray-700'
+                        isToday(day) ? 'bg-primary text-white font-bold' : 'text-foreground'
                       }`}>
                         {day}
                       </div>
@@ -61,7 +61,7 @@ export const MonthView = observer<MonthViewProps>(({ model, className = '' }) =>
                           <EventCard key={ev.id} event={ev} compact onClick={() => model.selectEvent(ev)} />
                         ))}
                         {events.length > 3 && (
-                          <p className="text-[10px] text-gray-400 pl-1">+{events.length - 3} more</p>
+                          <p className="text-[10px] text-muted-foreground pl-1">+{events.length - 3} more</p>
                         )}
                       </div>
                     </>

package/src/calendar/WeekView.tsx

@@ -32,23 +32,23 @@ export const WeekView = observer<WeekViewProps>(({ model, className = '' }) => {
   return (
     <div className={`flex flex-col h-full overflow-auto ${className}`}>
       {/* Day headers */}
-      <div className="sticky top-0 bg-white z-10 border-b border-gray-200">
+      <div className="sticky top-0 bg-background z-10 border-b border-border">
         <div className="grid" style={{ gridTemplateColumns: '60px repeat(7, 1fr)' }}>
           <div />
           {days.map((d, i) => (
-            <div key={i} className={`text-center py-2 border-l border-gray-100 ${isToday(d) ? 'bg-blue-50' : ''}`}>
-              <div className="text-xs text-gray-500">{d.toLocaleDateString(undefined, { weekday: 'short' })}</div>
-              <div className={`text-lg font-medium ${isToday(d) ? 'text-blue-600' : 'text-gray-900'}`}>{d.getDate()}</div>
+            <div key={i} className={`text-center py-2 border-l border-border ${isToday(d) ? 'bg-primary/10' : ''}`}>
+              <div className="text-xs text-muted-foreground">{d.toLocaleDateString(undefined, { weekday: 'short' })}</div>
+              <div className={`text-lg font-medium ${isToday(d) ? 'text-primary' : 'text-foreground'}`}>{d.getDate()}</div>
             </div>
           ))}
         </div>
 
         {/* All-day events row */}
         {hasAllDay && (
-          <div className="grid border-t border-gray-100" style={{ gridTemplateColumns: '60px repeat(7, 1fr)' }}>
-            <div className="text-[10px] text-gray-400 text-right pr-2 py-1">all-day</div>
+          <div className="grid border-t border-border" style={{ gridTemplateColumns: '60px repeat(7, 1fr)' }}>
+            <div className="text-[10px] text-muted-foreground text-right pr-2 py-1">all-day</div>
             {allDayEventsByDay.map((events, i) => (
-              <div key={i} className="border-l border-gray-100 px-0.5 py-0.5 space-y-0.5">
+              <div key={i} className="border-l border-border px-0.5 py-0.5 space-y-0.5">
                 {events.map(ev => (
                   <button
                     key={ev.id}
@@ -73,8 +73,8 @@ export const WeekView = observer<WeekViewProps>(({ model, className = '' }) => {
       {/* Time grid */}
       <div className="flex-1 relative">
         {HOURS.map(hour => (
-          <div key={hour} className="grid border-b border-gray-50" style={{ gridTemplateColumns: '60px repeat(7, 1fr)', height: '48px' }}>
-            <div className="text-[10px] text-gray-400 text-right pr-2 -mt-2">
+          <div key={hour} className="grid border-b border-border/50" style={{ gridTemplateColumns: '60px repeat(7, 1fr)', height: '48px' }}>
+            <div className="text-[10px] text-muted-foreground text-right pr-2 -mt-2">
               {hour === 0 ? '' : `${hour % 12 || 12} ${hour < 12 ? 'AM' : 'PM'}`}
             </div>
             {days.map((d, i) => {
@@ -84,7 +84,7 @@ export const WeekView = observer<WeekViewProps>(({ model, className = '' }) => {
               );
               const showTimeLine = isToday(d) && hour === currentHour;
               return (
-                <div key={i} className="border-l border-gray-100 relative">
+                <div key={i} className="border-l border-border relative">
                   {/* Current time indicator */}
                   {showTimeLine && (
                     <div

package/src/contacts/ContactBrowser.tsx

@@ -17,27 +17,27 @@ export const ContactBrowser = observer<ContactBrowserProps>(({ model, className
   useEffect(() => { model.loadContacts(); }, [model]);
 
   return (
-    <div className={`flex h-full bg-white rounded-xl border border-gray-200 overflow-hidden ${className}`}>
-      {showSidebar && <ContactGroupSidebar model={model} />}
+    <div className={`flex h-full bg-background rounded-xl border border-border overflow-hidden ${className}`}>
+      {showSidebar && <ContactGroupSidebar model={model} className="hidden lg:block" />}
 
-      <div className="flex-1 flex flex-col min-w-0 border-r border-gray-200" style={{ maxWidth: '380px' }}>
+      <div className="flex-1 flex flex-col min-w-0 border-r border-border sm:max-w-[380px]">
         {/* Search */}
-        <div className="px-4 py-2 border-b border-gray-200">
+        <div className="px-3 py-2 border-b border-border">
           <div className="relative">
-            <Search size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
+            <Search size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground" />
             <input
               type="text"
               placeholder="Search contacts..."
               value={model.searchQuery}
               onChange={e => model.setSearch(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>
 
         {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
@@ -50,7 +50,7 @@ export const ContactBrowser = observer<ContactBrowserProps>(({ model, className
         )}
       </div>
 
-      <ContactDetail model={model} className="flex-1" />
+      <ContactDetail model={model} className="flex-1 hidden sm:block" />
     </div>
   );
 });

package/src/contacts/ContactCard.tsx

@@ -14,22 +14,22 @@ export const ContactCard = ({ contact, selected = false, onClick, className = ''
   <button
     onClick={onClick}
     className={`flex items-center gap-3 px-4 py-3 w-full text-left transition-colors ${
-      selected ? 'bg-blue-50 border-l-2 border-blue-500' : 'hover:bg-gray-50 border-l-2 border-transparent'
+      selected ? 'bg-primary/10 border-l-2 border-primary' : 'hover:bg-muted/50 border-l-2 border-transparent'
     } ${className}`}
   >
     <ContactAvatar firstName={contact.firstName} lastName={contact.lastName} avatar={contact.avatar} />
     <div className="flex-1 min-w-0">
-      <p className="text-sm font-medium text-gray-900 truncate" title={`${contact.firstName} ${contact.lastName}`}>
+      <p className="text-sm font-medium text-foreground truncate" title={`${contact.firstName} ${contact.lastName}`}>
         {contact.firstName} {contact.lastName}
       </p>
       {contact.company && (
-        <p className="text-xs text-gray-500 flex items-center gap-1 truncate" title={contact.company}>
+        <p className="text-xs text-muted-foreground flex items-center gap-1 truncate" title={contact.company}>
           <Building size={12} />
           {contact.company}
         </p>
       )}
     </div>
-    <div className="flex items-center gap-1.5 text-gray-400">
+    <div className="flex items-center gap-1.5 text-muted-foreground">
       {contact.email && <Mail size={14} />}
       {contact.phone && <Phone size={14} />}
     </div>

package/src/contacts/ContactDetail.tsx

@@ -11,10 +11,10 @@ export interface ContactDetailProps {
 
 const DetailRow = ({ icon: Icon, label, value }: { icon: React.ElementType; label: string; value: string }) => (
   <div className="flex items-start gap-3 py-2">
-    <Icon size={16} className="text-gray-400 mt-0.5 flex-shrink-0" />
+    <Icon size={16} className="text-muted-foreground mt-0.5 flex-shrink-0" />
     <div>
-      <p className="text-xs text-gray-500">{label}</p>
-      <p className="text-sm text-gray-900">{value}</p>
+      <p className="text-xs text-muted-foreground">{label}</p>
+      <p className="text-sm text-foreground">{value}</p>
     </div>
   </div>
 );
@@ -24,7 +24,7 @@ export const ContactDetail = observer<ContactDetailProps>(({ model, className =
 
   if (!contact) {
     return (
-      <div className={`flex items-center justify-center h-full text-gray-400 text-sm ${className}`}>
+      <div className={`flex items-center justify-center h-full text-muted-foreground text-sm ${className}`}>
         Select a contact to view details
       </div>
     );
@@ -34,11 +34,11 @@ export const ContactDetail = observer<ContactDetailProps>(({ model, className =
     <div className={`p-6 overflow-y-auto ${className}`}>
       <div className="flex flex-col items-center mb-6">
         <ContactAvatar firstName={contact.firstName} lastName={contact.lastName} avatar={contact.avatar} size="lg" />
-        <h2 className="mt-3 text-lg font-semibold text-gray-900">{contact.firstName} {contact.lastName}</h2>
-        {contact.company && <p className="text-sm text-gray-500">{contact.company}</p>}
+        <h2 className="mt-3 text-lg font-semibold text-foreground">{contact.firstName} {contact.lastName}</h2>
+        {contact.company && <p className="text-sm text-muted-foreground">{contact.company}</p>}
       </div>
 
-      <div className="divide-y divide-gray-100">
+      <div className="divide-y divide-border">
         {contact.email && <DetailRow icon={Mail} label="Email" value={contact.email} />}
         {contact.phone && <DetailRow icon={Phone} label="Phone" value={contact.phone} />}
         {contact.company && <DetailRow icon={Building} label="Company" value={contact.company} />}
@@ -46,12 +46,12 @@ export const ContactDetail = observer<ContactDetailProps>(({ model, className =
         {contact.birthday && <DetailRow icon={Calendar} label="Birthday" value={contact.birthday.toLocaleDateString()} />}
         {contact.groups && contact.groups.length > 0 && (
           <div className="flex items-start gap-3 py-2">
-            <Tag size={16} className="text-gray-400 mt-0.5 flex-shrink-0" />
+            <Tag size={16} className="text-muted-foreground mt-0.5 flex-shrink-0" />
             <div>
-              <p className="text-xs text-gray-500">Groups</p>
+              <p className="text-xs text-muted-foreground">Groups</p>
               <div className="flex flex-wrap gap-1 mt-1">
                 {contact.groups.map(g => (
-                  <span key={g} className="text-xs bg-gray-100 text-gray-600 px-2 py-0.5 rounded-full">{g}</span>
+                  <span key={g} className="text-xs bg-muted text-muted-foreground px-2 py-0.5 rounded-full">{g}</span>
                 ))}
               </div>
             </div>

package/src/contacts/ContactGroupSidebar.tsx

@@ -9,30 +9,30 @@ export interface ContactGroupSidebarProps {
 }
 
 export const ContactGroupSidebar = observer<ContactGroupSidebarProps>(({ model, className = '' }) => (
-  <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">Groups</h3>
+      <h3 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-2">Groups</h3>
       <button
         onClick={() => model.setGroup(null)}
         className={`flex items-center gap-2 w-full px-3 py-2 rounded-lg text-sm transition-colors ${
-          model.currentGroup === null ? 'bg-blue-100 text-blue-700' : 'text-gray-700 hover:bg-gray-100'
+          model.currentGroup === null ? 'bg-primary/10 text-primary' : 'text-foreground hover:bg-muted'
         }`}
       >
         <Users size={16} />
         <span>All Contacts</span>
-        <span className="ml-auto text-xs text-gray-400">{model.contacts.length}</span>
+        <span className="ml-auto text-xs text-muted-foreground">{model.contacts.length}</span>
       </button>
       {model.groups.map(group => (
         <button
           key={group.id}
           onClick={() => model.setGroup(group.id)}
           className={`flex items-center gap-2 w-full px-3 py-2 rounded-lg text-sm transition-colors ${
-            model.currentGroup === group.id ? 'bg-blue-100 text-blue-700' : 'text-gray-700 hover:bg-gray-100'
+            model.currentGroup === group.id ? 'bg-primary/10 text-primary' : 'text-foreground hover:bg-muted'
           }`}
         >
           <User size={16} />
           <span className="truncate" title={group.name}>{group.name}</span>
-          <span className="ml-auto text-xs text-gray-400">{group.count}</span>
+          <span className="ml-auto text-xs text-muted-foreground">{group.count}</span>
         </button>
       ))}
     </div>

package/src/contacts/ContactList.tsx

@@ -12,8 +12,8 @@ export const ContactList = observer<ContactListProps>(({ model, className = '' }
   <div className={`overflow-y-auto ${className}`}>
     {Array.from(model.groupedByLetter.entries()).map(([letter, contacts]) => (
       <div key={letter}>
-        <div className="sticky top-0 bg-gray-50/90 backdrop-blur-sm px-4 py-1 border-b border-gray-100">
-          <span className="text-xs font-semibold text-gray-500">{letter}</span>
+        <div className="sticky top-0 bg-muted/50 backdrop-blur-sm px-4 py-1 border-b border-border">
+          <span className="text-xs font-semibold text-muted-foreground">{letter}</span>
         </div>
         {contacts.map(contact => (
           <ContactCard
@@ -26,7 +26,7 @@ export const ContactList = observer<ContactListProps>(({ model, className = '' }
       </div>
     ))}
     {model.filteredContacts.length === 0 && (
-      <div className="flex items-center justify-center h-32 text-gray-400 text-sm">No contacts found</div>
+      <div className="flex items-center justify-center h-32 text-muted-foreground text-sm">No contacts found</div>
     )}
   </div>
 ));

package/src/file-browser/components/FileBrowser.tsx

@@ -177,6 +177,7 @@ export const FileBrowser: React.FC<FileBrowserProps> = observer(({
               onClick={() => model.navigateToPrevFile()}
               disabled={!model.canNavigatePrev}
               title="Previous file (left arrow)"
+              aria-label="Previous file"
             >
               <ChevronLeft className="w-4 h-4" />
             </Button>
@@ -412,8 +413,8 @@ export const FileBrowser: React.FC<FileBrowserProps> = observer(({
       >
         {/* Native file drop overlay */}
         {isDragOver && (
-          <div className="absolute inset-0 z-50 bg-blue-500/10 border-2 border-dashed border-blue-500 rounded-lg flex items-center justify-center pointer-events-none">
-            <div className="flex flex-col items-center gap-2 text-blue-600 dark:text-blue-400">
+          <div className="absolute inset-0 z-50 bg-primary/10 border-2 border-dashed border-primary rounded-lg flex items-center justify-center pointer-events-none">
+            <div className="flex flex-col items-center gap-2 text-primary">
               <Upload className="w-8 h-8" />
               <p className="text-sm font-medium">Drop files here to upload</p>
               <p className="text-xs text-muted-foreground">Files will be added to {model.currentPath}</p>

package/src/file-browser/components/FileBrowserContent.tsx

@@ -4,7 +4,7 @@ import { AlertCircle, FolderOpen } from 'lucide-react';
 import { cn } from '../../lib/utils';
 import { FileBrowserModel } from '../models/FileBrowserModel';
 import { LoadingSpinner } from '@anymux/ui/components/loading-spinner';
-import { ErrorBoundary } from './shared/ErrorBoundary';
+import { ErrorBoundary } from '../../shared/ErrorBoundary';
 
 export interface FileBrowserContentProps {
   model: FileBrowserModel;

package/src/file-browser/examples/BasicUsage.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { FileBrowser } from '../components/FileBrowser';
-import { IFileSystem } from '@anymux/file-system';
+import type { IFileSystem } from '@anymux/file-system';
 
 interface BasicUsageProps {
   fileSystem: IFileSystem;
@@ -8,7 +8,7 @@ interface BasicUsageProps {
 
 export const BasicUsage: React.FC<BasicUsageProps> = ({ fileSystem }) => {
   return (
-    <div className="w-full h-96 border border-gray-300 rounded-lg">
+    <div className="w-full h-96 border border-border rounded-lg">
       <FileBrowser
         fileSystem={fileSystem}
         initialPath="/"

package/src/file-browser/index.ts

@@ -3,7 +3,7 @@ export { FileBrowser } from './components/FileBrowser';
 
 // Shared components
 export { default as FileBrowserItemComponent } from './components/shared/FileBrowserItem';
-export { ErrorBoundary, type ErrorBoundaryProps } from './components/shared/ErrorBoundary';
+export { ErrorBoundary, type ErrorBoundaryProps } from '../shared/ErrorBoundary';
 export { default as FileIcon } from './components/shared/FileIcon';
 
 // Types

package/src/file-browser/providers/FileSystemProvider.ts

@@ -1,4 +1,4 @@
-import { IFileSystem } from '@anymux/file-system';
+import type { IFileSystem } from '@anymux/file-system';
 import { IFileBrowserProvider } from './IFileBrowserProvider';
 import { FileBrowserItem, IconDefinition, PreviewData } from '../types/FileBrowserTypes';
 import { LeftPanelMode } from '../models/LeftPanelManagerModel';