Feat v0.6.12 css isolation (#47)

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

packages/sdk-test-runner/css/main.css

@@ -1,23 +1,23 @@
 /* SDK Test Runner — Styles */
 
-.sdkr-header {
+.ext-sdk-test-runner-header {
   display: flex;
   align-items: baseline;
   gap: 12px;
   margin-bottom: 4px;
 }
-.sdkr-header h1 {
+.ext-sdk-test-runner-header h1 {
   font-size: 20px;
   font-weight: 600;
   margin: 0;
   color: var(--text, #e0e0e0);
 }
-.sdkr-version {
+.ext-sdk-test-runner-version {
   font-size: 12px;
   color: var(--text-3, #888);
   font-family: 'JetBrains Mono', monospace;
 }
-.sdkr-desc {
+.ext-sdk-test-runner-desc {
   font-size: 13px;
   color: var(--text-2, #aaa);
   margin: 0 0 16px 0;
@@ -25,27 +25,27 @@
 }
 
 /* Fixtures panel */
-.sdkr-fixtures {
+.ext-sdk-test-runner-fixtures {
   margin-bottom: 16px;
   padding: 10px 14px;
   border: 1px solid var(--border, #333);
   border-radius: 6px;
   background: var(--bg-raised, #1a1a1a);
 }
-.sdkr-fixture-row {
+.ext-sdk-test-runner-fixture-row {
   display: flex;
   align-items: center;
   gap: 10px;
   flex-wrap: wrap;
 }
-.sdkr-fixture-label {
+.ext-sdk-test-runner-fixture-label {
   font-size: 12px;
   font-weight: 600;
   color: var(--text-2, #aaa);
   text-transform: uppercase;
   white-space: nowrap;
 }
-.sdkr-select {
+.ext-sdk-test-runner-select {
   padding: 4px 8px;
   font-size: 13px;
   background: var(--bg-raised, #222);
@@ -54,7 +54,7 @@
   border-radius: 4px;
   min-width: 130px;
 }
-.sdkr-input {
+.ext-sdk-test-runner-input {
   padding: 4px 8px;
   font-size: 13px;
   background: var(--bg-raised, #222);
@@ -66,16 +66,16 @@
   max-width: 400px;
   font-family: 'JetBrains Mono', monospace;
 }
-.sdkr-input::placeholder {
+.ext-sdk-test-runner-input::placeholder {
   color: var(--text-3, #666);
   font-family: inherit;
 }
-.sdkr-fixture-status {
+.ext-sdk-test-runner-fixture-status {
   font-size: 12px;
   color: var(--text-3, #888);
   font-family: 'JetBrains Mono', monospace;
 }
-.sdkr-fixture-note {
+.ext-sdk-test-runner-fixture-note {
   font-size: 11px;
   color: var(--text-3, #666);
   margin-top: 6px;
@@ -83,26 +83,26 @@
 }
 
 /* Controls */
-.sdkr-controls {
+.ext-sdk-test-runner-controls {
   display: flex;
   flex-direction: column;
   gap: 10px;
   margin-bottom: 16px;
 }
-.sdkr-filters {
+.ext-sdk-test-runner-filters {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 8px;
 }
-.sdkr-filter-label {
+.ext-sdk-test-runner-filter-label {
   font-size: 12px;
   font-weight: 600;
   color: var(--text-2, #aaa);
   text-transform: uppercase;
   letter-spacing: 0.05em;
 }
-.sdkr-check {
+.ext-sdk-test-runner-check {
   font-size: 13px;
   color: var(--text, #e0e0e0);
   cursor: pointer;
@@ -110,12 +110,12 @@
   align-items: center;
   gap: 3px;
 }
-.sdkr-check input { cursor: pointer; }
-.sdkr-btn-row {
+.ext-sdk-test-runner-check input { cursor: pointer; }
+.ext-sdk-test-runner-btn-row {
   display: flex;
   gap: 8px;
 }
-.sdkr-btn {
+.ext-sdk-test-runner-btn {
   padding: 6px 14px;
   border-radius: 6px;
   border: 1px solid var(--border, #444);
@@ -125,22 +125,22 @@
   cursor: pointer;
   transition: background 0.15s;
 }
-.sdkr-btn:hover { background: var(--bg-hover, #383838); }
-.sdkr-btn:disabled { opacity: 0.5; cursor: not-allowed; }
-.sdkr-btn-primary {
+.ext-sdk-test-runner-btn:hover { background: var(--bg-hover, #383838); }
+.ext-sdk-test-runner-btn:disabled { opacity: 0.5; cursor: not-allowed; }
+.ext-sdk-test-runner-btn-primary {
   background: var(--accent, #3b82f6);
   border-color: var(--accent, #3b82f6);
   color: #fff;
 }
-.sdkr-btn-primary:hover { filter: brightness(1.15); }
-.sdkr-btn-danger {
+.ext-sdk-test-runner-btn-primary:hover { filter: brightness(1.15); }
+.ext-sdk-test-runner-btn-danger {
   background: var(--danger, #ef4444);
   border-color: var(--danger, #ef4444);
   color: #fff;
 }
 
 /* Summary */
-.sdkr-summary {
+.ext-sdk-test-runner-summary {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
@@ -150,7 +150,7 @@
   border-radius: 8px;
   border: 1px solid var(--border, #333);
 }
-.sdkr-badge {
+.ext-sdk-test-runner-badge {
   display: inline-block;
   padding: 3px 10px;
   border-radius: 4px;
@@ -160,17 +160,17 @@
 }
 
 /* Table */
-.sdkr-table-wrap {
+.ext-sdk-test-runner-table-wrap {
   overflow-x: auto;
   border: 1px solid var(--border, #333);
   border-radius: 8px;
 }
-.sdkr-table {
+.ext-sdk-test-runner-table {
   width: 100%;
   border-collapse: collapse;
   font-size: 13px;
 }
-.sdkr-table th {
+.ext-sdk-test-runner-table th {
   text-align: left;
   padding: 8px 10px;
   background: var(--bg-raised, #1e1e1e);
@@ -184,31 +184,31 @@
   top: 0;
   z-index: 1;
 }
-.sdkr-table td {
+.ext-sdk-test-runner-table td {
   padding: 6px 10px;
   border-bottom: 1px solid var(--border-subtle, #2a2a2a);
   color: var(--text, #e0e0e0);
   vertical-align: top;
 }
-.sdkr-table tbody tr:hover {
+.ext-sdk-test-runner-table tbody tr:hover {
   background: var(--bg-hover, rgba(255,255,255,0.03));
 }
-.sdkr-test-name {
+.ext-sdk-test-runner-test-name {
   font-family: 'JetBrains Mono', monospace;
   font-size: 12px;
 }
-.sdkr-verdict {
+.ext-sdk-test-runner-verdict {
   font-weight: 700;
   font-family: 'JetBrains Mono', monospace;
   font-size: 11px;
 }
-.sdkr-ms {
+.ext-sdk-test-runner-ms {
   font-family: 'JetBrains Mono', monospace;
   font-size: 11px;
   color: var(--text-3, #888);
   text-align: right;
 }
-.sdkr-detail {
+.ext-sdk-test-runner-detail {
   font-size: 11px;
   color: var(--text-3, #888);
   max-width: 400px;
@@ -216,7 +216,7 @@
 }
 
 /* Row verdict highlights */
-.sdkr-row-sdk_bug td { background: rgba(245, 158, 11, 0.06); }
-.sdkr-row-icd_bug td { background: rgba(239, 68, 68, 0.06); }
-.sdkr-row-shape_bug td { background: rgba(168, 85, 247, 0.06); }
-.sdkr-row-error td { background: rgba(239, 68, 68, 0.08); }
+.ext-sdk-test-runner-row-sdk_bug td { background: rgba(245, 158, 11, 0.06); }
+.ext-sdk-test-runner-row-icd_bug td { background: rgba(239, 68, 68, 0.06); }
+.ext-sdk-test-runner-row-shape_bug td { background: rgba(168, 85, 247, 0.06); }
+.ext-sdk-test-runner-row-error td { background: rgba(239, 68, 68, 0.08); }

packages/sdk-test-runner/js/ui.js

@@ -58,25 +58,25 @@
     mount.innerHTML = '';
 
     // Header
-    var header = el('div', { className: 'sdkr-header' }, [
+    var header = el('div', { className: 'ext-sdk-test-runner-header' }, [
       el('h1', {}, 'SDK Test Runner'),
-      el('span', { className: 'sdkr-version' }, 'v' + (T.manifest.version || '?'))
+      el('span', { className: 'ext-sdk-test-runner-version' }, 'v' + (T.manifest.version || '?'))
     ]);
     mount.appendChild(header);
 
     // Description
-    mount.appendChild(el('p', { className: 'sdkr-desc' },
+    mount.appendChild(el('p', { className: 'ext-sdk-test-runner-desc' },
       'Dual-path validation: SDK call → raw ICD fetch. ' +
       'SDK fail + ICD pass = SDK bug. Both fail = ICD bug.'));
 
     // ── Fixtures Panel ──
-    var fixturePanel = el('div', { className: 'sdkr-fixtures' });
+    var fixturePanel = el('div', { className: 'ext-sdk-test-runner-fixtures' });
 
-    var fixRow = el('div', { className: 'sdkr-fixture-row' });
-    fixRow.appendChild(el('span', { className: 'sdkr-fixture-label' }, 'FIXTURES:'));
+    var fixRow = el('div', { className: 'ext-sdk-test-runner-fixture-row' });
+    fixRow.appendChild(el('span', { className: 'ext-sdk-test-runner-fixture-label' }, 'FIXTURES:'));
 
     // Provider dropdown
-    var provSelect = el('select', { className: 'sdkr-select' });
+    var provSelect = el('select', { className: 'ext-sdk-test-runner-select' });
     provSelect.appendChild(el('option', { value: '' }, '— provider —'));
     ['openrouter', 'openai', 'anthropic', 'venice'].forEach(function (p) {
       provSelect.appendChild(el('option', { value: p }, p));
@@ -85,18 +85,18 @@
 
     // API key input
     var keyInput = el('input', {
-      type: 'password', className: 'sdkr-input',
+      type: 'password', className: 'ext-sdk-test-runner-input',
       placeholder: 'API key (optional — enables model tests)'
     });
     fixRow.appendChild(keyInput);
 
     // Fixture status
-    var fixStatus = el('span', { className: 'sdkr-fixture-status' }, '');
+    var fixStatus = el('span', { className: 'ext-sdk-test-runner-fixture-status' }, '');
 
     fixRow.appendChild(fixStatus);
     fixturePanel.appendChild(fixRow);
 
-    var fixNote = el('div', { className: 'sdkr-fixture-note' },
+    var fixNote = el('div', { className: 'ext-sdk-test-runner-fixture-note' },
       'Provide a provider + API key to unlock embedding/model tests. ' +
       'Without a key, those tests are skipped. Key is never stored.');
     fixturePanel.appendChild(fixNote);
@@ -107,16 +107,16 @@
     T._fixtureInput = { provSelect: provSelect, keyInput: keyInput, statusEl: fixStatus };
 
     // Controls row
-    var controlRow = el('div', { className: 'sdkr-controls' });
+    var controlRow = el('div', { className: 'ext-sdk-test-runner-controls' });
 
     // Domain filter checkboxes
-    var filterBox = el('div', { className: 'sdkr-filters' });
-    filterBox.appendChild(el('span', { className: 'sdkr-filter-label' }, 'Domains: '));
+    var filterBox = el('div', { className: 'ext-sdk-test-runner-filters' });
+    filterBox.appendChild(el('span', { className: 'ext-sdk-test-runner-filter-label' }, 'Domains: '));
     var domainNames = Object.keys(T.domains).sort();
     var domainChecks = {};
 
     domainNames.forEach(function (name) {
-      var label = el('label', { className: 'sdkr-check' });
+      var label = el('label', { className: 'ext-sdk-test-runner-check' });
       var cb = el('input', { type: 'checkbox', checked: 'checked' });
       domainChecks[name] = cb;
       label.appendChild(cb);
@@ -126,11 +126,11 @@
     controlRow.appendChild(filterBox);
 
     // Buttons
-    var btnRow = el('div', { className: 'sdkr-btn-row' });
-    var runBtn = el('button', { className: 'sdkr-btn sdkr-btn-primary', onClick: onRun }, 'Run All');
-    var abortBtn = el('button', { className: 'sdkr-btn sdkr-btn-danger', onClick: function () { T.abort(); } }, 'Abort');
+    var btnRow = el('div', { className: 'ext-sdk-test-runner-btn-row' });
+    var runBtn = el('button', { className: 'ext-sdk-test-runner-btn ext-sdk-test-runner-btn-primary', onClick: onRun }, 'Run All');
+    var abortBtn = el('button', { className: 'ext-sdk-test-runner-btn ext-sdk-test-runner-btn-danger', onClick: function () { T.abort(); } }, 'Abort');
     abortBtn.style.display = 'none';
-    var exportBtn = el('button', { className: 'sdkr-btn', onClick: onExport }, 'Export JSON');
+    var exportBtn = el('button', { className: 'ext-sdk-test-runner-btn', onClick: onExport }, 'Export JSON');
     btnRow.appendChild(runBtn);
     btnRow.appendChild(abortBtn);
     btnRow.appendChild(exportBtn);
@@ -138,12 +138,12 @@
     mount.appendChild(controlRow);
 
     // Summary bar
-    var summaryBar = el('div', { className: 'sdkr-summary' });
+    var summaryBar = el('div', { className: 'ext-sdk-test-runner-summary' });
     mount.appendChild(summaryBar);
 
     // Results table
-    var tableWrap = el('div', { className: 'sdkr-table-wrap' });
-    var table = el('table', { className: 'sdkr-table' });
+    var tableWrap = el('div', { className: 'ext-sdk-test-runner-table-wrap' });
+    var table = el('table', { className: 'ext-sdk-test-runner-table' });
     var thead = el('thead', {}, [
       el('tr', {}, [
         el('th', {}, '#'),
@@ -176,7 +176,7 @@
       ];
       items.forEach(function (item) {
         var badge = el('span', {
-          className: 'sdkr-badge',
+          className: 'ext-sdk-test-runner-badge',
           style: {
             background: item[1] > 0 ? COLORS[item[0]] : 'var(--bg2, #333)',
             color: item[1] > 0 ? '#fff' : 'var(--text3, #888)'
@@ -184,7 +184,7 @@
         }, LABELS[item[0]] + ': ' + item[1]);
         summaryBar.appendChild(badge);
       });
-      summaryBar.appendChild(el('span', { className: 'sdkr-badge',
+      summaryBar.appendChild(el('span', { className: 'ext-sdk-test-runner-badge',
         style: { background: 'var(--bg2, #333)' }
       }, 'Total: ' + total));
     }
@@ -197,19 +197,19 @@
       if (entry.rawErr) detail += (detail ? ' | ' : '') + 'ICD: ' + esc(entry.rawErr);
       if (entry.note) detail += (detail ? ' | ' : '') + esc(entry.note);
 
-      var row = el('tr', { className: 'sdkr-row sdkr-row-' + v.toLowerCase() }, [
+      var row = el('tr', { className: 'ext-sdk-test-runner-row ext-sdk-test-runner-row-' + v.toLowerCase() }, [
         el('td', {}, String(idx)),
         el('td', {}, esc(entry.domain)),
         el('td', {}, esc(entry.group)),
-        el('td', { className: 'sdkr-test-name' }, esc(entry.name)),
+        el('td', { className: 'ext-sdk-test-runner-test-name' }, esc(entry.name)),
         el('td', {}, [
           el('span', {
-            className: 'sdkr-verdict',
+            className: 'ext-sdk-test-runner-verdict',
             style: { color: COLORS[v] || '#fff' }
           }, LABELS[v] || v)
         ]),
-        el('td', { className: 'sdkr-ms' }, String(entry.durationMs)),
-        el('td', { className: 'sdkr-detail' }, detail)
+        el('td', { className: 'ext-sdk-test-runner-ms' }, String(entry.durationMs)),
+        el('td', { className: 'ext-sdk-test-runner-detail' }, detail)
       ]);
       tbody.appendChild(row);
       updateSummary();