Feat v0.6.12 css isolation (#47)

Co-authored-by: Jeffrey Smith <jasafpro@gmail.com>
Co-committed-by: Jeffrey Smith <jasafpro@gmail.com>

packages/dashboard/css/main.css

@@ -6,7 +6,7 @@
    All SDK components style themselves.
    ========================================== */
 
-.surface-dashboard {
+.ext-dashboard {
     display: flex;
     flex-direction: column;
     height: 100%;
@@ -15,7 +15,7 @@
 
 /* ── Topbar ──────────────────────────────── */
 
-.dashboard-topbar {
+.ext-dashboard-topbar {
     display: flex;
     align-items: center;
     gap: 12px;
@@ -26,7 +26,7 @@
     border-bottom: 1px solid var(--border);
 }
 
-.dashboard-topbar-back {
+.ext-dashboard-topbar-back {
     display: flex;
     align-items: center;
     gap: 4px;
@@ -39,30 +39,30 @@
     transition: color 0.15s, background 0.15s;
 }
 
-.dashboard-topbar-back:hover {
+.ext-dashboard-topbar-back:hover {
     color: var(--text);
     background: var(--bg-hover);
 }
 
-.dashboard-topbar-title {
+.ext-dashboard-topbar-title {
     font-size: 14px;
     font-weight: 600;
     color: var(--text);
 }
 
-.dashboard-topbar-sep {
+.ext-dashboard-topbar-sep {
     width: 1px;
     height: 18px;
     background: var(--border);
 }
 
-.dashboard-topbar-spacer {
+.ext-dashboard-topbar-spacer {
     flex: 1;
 }
 
 /* ── Body ────────────────────────────────── */
 
-.dashboard-body {
+.ext-dashboard-body {
     display: flex;
     flex: 1;
     min-height: 0;
@@ -70,7 +70,7 @@
 
 /* ── Sidebar ─────────────────────────────── */
 
-.dashboard-sidebar {
+.ext-dashboard-sidebar {
     width: 300px;
     flex-shrink: 0;
     display: flex;
@@ -81,34 +81,34 @@
 
 /* ── Main Content ────────────────────────── */
 
-.dashboard-main {
+.ext-dashboard-main {
     flex: 1;
     overflow-y: auto;
     padding: 20px;
     min-width: 0;
 }
 
-.dashboard-greeting {
+.ext-dashboard-greeting {
     font-size: 18px;
     font-weight: 600;
     color: var(--text);
     margin-bottom: 4px;
 }
 
-.dashboard-subtitle {
+.ext-dashboard-subtitle {
     font-size: 13px;
     color: var(--text-3);
     margin-bottom: 20px;
 }
 
-.dashboard-filter-bar {
+.ext-dashboard-filter-bar {
     display: flex;
     align-items: center;
     gap: 12px;
     margin-bottom: 16px;
 }
 
-.dashboard-filter-label {
+.ext-dashboard-filter-label {
     font-size: 12px;
     font-weight: 600;
     color: var(--text-2);
@@ -118,13 +118,13 @@
 
 /* ── Cards Grid ──────────────────────────── */
 
-.dashboard-cards {
+.ext-dashboard-cards {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
     gap: 12px;
 }
 
-.dashboard-card {
+.ext-dashboard-card {
     background: var(--bg-raised);
     border: 1px solid var(--border);
     border-radius: var(--radius-lg);
@@ -135,17 +135,17 @@
     transition: border-color 0.15s;
 }
 
-.dashboard-card:hover {
+.ext-dashboard-card:hover {
     border-color: var(--border-elevated);
 }
 
-.dashboard-card-header {
+.ext-dashboard-card-header {
     display: flex;
     align-items: center;
     gap: 8px;
 }
 
-.dashboard-card-title {
+.ext-dashboard-card-title {
     font-size: 14px;
     font-weight: 600;
     color: var(--text);
@@ -155,24 +155,24 @@
     white-space: nowrap;
 }
 
-.dashboard-card-meta {
+.ext-dashboard-card-meta {
     font-size: 11px;
     color: var(--text-3);
 }
 
-.dashboard-card-desc {
+.ext-dashboard-card-desc {
     font-size: 12px;
     color: var(--text-2);
     line-height: 1.4;
 }
 
-.dashboard-card-actions {
+.ext-dashboard-card-actions {
     display: flex;
     justify-content: flex-end;
     margin-top: 4px;
 }
 
-.dashboard-empty {
+.ext-dashboard-empty {
     text-align: center;
     color: var(--text-3);
     font-size: 13px;
@@ -181,13 +181,13 @@
 
 /* ── Admin Section ───────────────────────── */
 
-.dashboard-admin-section {
+.ext-dashboard-admin-section {
     margin-top: 24px;
     padding-top: 16px;
     border-top: 1px solid var(--border);
 }
 
-.dashboard-section-title {
+.ext-dashboard-section-title {
     font-size: 12px;
     font-weight: 600;
     color: var(--text-2);