@illuma-ai/codeviz 1.0.8 → 1.0.9

package/dist/index.js

@@ -24583,10 +24583,12 @@ const Xm = `
 /* ── Banking Theme: CSS Custom Properties ── */
 .theme-light {
   --surface-primary: #ffffff;
+  --surface-primary-alt: #efefef;
   --surface-secondary: #f7f7f8;
   --surface-tertiary: #ececec;
   --surface-left-nav: #ededee;
   --surface-active: #e3e3e3;
+  --surface-hover: #e3e3e3;
   --text-primary: #212121;
   --text-secondary: #424242;
   --text-tertiary: #595959;
@@ -24600,10 +24602,12 @@ const Xm = `
 }
 .theme-dark {
   --surface-primary: #0d0d0d;
+  --surface-primary-alt: #171717;
   --surface-secondary: #212121;
   --surface-tertiary: #2f2f2f;
   --surface-left-nav: #1a1a1b;
   --surface-active: #595959;
+  --surface-hover: #424242;
   --text-primary: #ececec;
   --text-secondary: #cdcdcd;
   --text-tertiary: #595959;
@@ -24629,8 +24633,10 @@ const Xm = `
 .text-accent-navy { color: var(--accent-navy); }
 .bg-accent-cyan { background-color: var(--accent-cyan); }
 .bg-accent-navy { background-color: var(--accent-navy); }
+.bg-surface-primary-alt { background-color: var(--surface-primary-alt); }
 .bg-surface-left-nav { background-color: var(--surface-left-nav); }
 .bg-surface-active { background-color: var(--surface-active); }
+.bg-surface-hover { background-color: var(--surface-hover); }
 .text-status-positive { color: var(--status-positive); }
 .text-status-negative { color: var(--status-negative); }
 .text-status-warning { color: var(--status-warning); }
@@ -24690,7 +24696,7 @@ function DataTable({ columns = [], data = [], searchable = true, pageSize = 10,
   };
 
   return (
-    <div className="bg-surface-secondary border border-border-light rounded-lg overflow-hidden">
+    <div className="bg-surface-secondary border border-border-light rounded-xl overflow-hidden">
       {searchable && (
         <div className="px-4 py-3 border-b border-border-light">
           <input
@@ -24705,13 +24711,13 @@ function DataTable({ columns = [], data = [], searchable = true, pageSize = 10,
       <div className="overflow-x-auto">
         <table className="w-full">
           <thead>
-            <tr className="bg-surface-tertiary">
+            <tr className="bg-surface-primary-alt border-b border-border-medium">
               {columns.map(col => (
                 <th
                   key={col.key}
                   onClick={() => col.sortable !== false && handleSort(col.key)}
                   className={cn(
-                    'px-4 py-2.5 text-xs font-semibold text-text-secondary whitespace-nowrap',
+                    'px-4 py-3 text-xs font-semibold uppercase tracking-wider text-text-secondary whitespace-nowrap',
                     col.align === 'right' ? 'text-right' : 'text-left',
                     col.sortable !== false && 'cursor-pointer hover:text-text-primary select-none'
                   )}
@@ -24731,13 +24737,13 @@ function DataTable({ columns = [], data = [], searchable = true, pageSize = 10,
               <tr
                 key={idx}
                 onClick={() => onRowClick && onRowClick(row, idx)}
-                className={cn('transition-colors', onRowClick && 'cursor-pointer', 'hover:bg-surface-tertiary')}
+                className={cn('border-b border-border-light last:border-b-0 transition-colors', onRowClick && 'cursor-pointer hover:bg-surface-hover')}
               >
                 {columns.map(col => (
                   <td
                     key={col.key}
                     className={cn(
-                      'px-4 py-2.5 text-sm',
+                      'px-4 py-3 text-sm',
                       col.align === 'right' ? 'text-right tabular-nums' : 'text-left',
                       'text-text-primary'
                     )}
@@ -24800,15 +24806,19 @@ function MetricCard({ label, value, trend, trendLabel, icon, iconColor = '#00C1D
   const IconComp = icon;
 
   return (
-    <div className="bg-surface-secondary border border-border-light rounded-lg p-3">
-      <div className="flex items-center justify-between mb-1.5">
-        <p className="text-text-secondary text-xs font-medium uppercase tracking-wide">{label}</p>
-        {IconComp && <IconComp className="w-4 h-4" style={{ color: iconColor }} />}
+    <div className="bg-surface-secondary border border-border-light rounded-xl p-4 transition-all">
+      <div className="flex items-center justify-between mb-1">
+        <p className="text-text-secondary text-xs font-medium">{label}</p>
+        {IconComp && (
+          <div className="flex items-center justify-center w-8 h-8 rounded-lg bg-surface-tertiary">
+            <IconComp className="w-4 h-4" style={{ color: iconColor }} />
+          </div>
+        )}
       </div>
       <p className="text-xl font-bold text-text-primary tabular-nums">{value}</p>
       {trend && (
-        <div className="flex items-center gap-1.5 mt-2">
-          <span className={cn('text-xs font-semibold', isPositive && 'text-status-positive', isNegative && 'text-status-negative')}>
+        <div className="flex items-center gap-1.5 mt-1.5">
+          <span className={cn('text-xs font-medium', isPositive && 'text-status-positive', isNegative && 'text-status-negative')}>
             {isPositive && '▲'}{isNegative && '▼'} {trend}
           </span>
           {trendLabel && <span className="text-text-tertiary text-xs">{trendLabel}</span>}
@@ -24855,11 +24865,11 @@ function DetailCard({ title, subtitle, status, fields = [], tabs, children }) {
   const [activeTab, setActiveTab] = useState(tabs?.[0]?.id || '');
 
   return (
-    <div className="bg-surface-secondary border border-border-light rounded-lg overflow-hidden">
-      <div className="p-3 border-b border-border-light">
+    <div className="bg-surface-secondary border border-border-light rounded-xl overflow-hidden">
+      <div className="p-4 border-b border-border-light">
         <div className="flex items-start justify-between mb-2">
           <div>
-            <h2 className="text-base font-bold text-text-primary">{title}</h2>
+            <h2 className="text-base font-semibold text-text-primary">{title}</h2>
             {subtitle && <p className="text-text-secondary text-sm mt-0.5">{subtitle}</p>}
           </div>
           {status && <StatusBadge status={status.status} label={status.label} />}
@@ -24923,8 +24933,8 @@ function StepWizard({ steps = [], onComplete }) {
   const prev = () => setCurrent(c => Math.max(0, c - 1));
 
   return (
-    <div className="bg-surface-secondary border border-border-light rounded-lg overflow-hidden">
-      <div className="flex items-center px-3 py-2.5 border-b border-border-light gap-2">
+    <div className="bg-surface-secondary border border-border-light rounded-xl overflow-hidden">
+      <div className="flex items-center px-4 py-3 border-b border-border-light gap-2">
         {steps.map((step, i) => (
           <div key={step.id} className="flex items-center gap-2">
             <div className={cn(