Feat v0.6.12 css isolation (#47)

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

packages/editor/css/main.css

@@ -8,7 +8,7 @@
 
 /* ── Surface Shell ─────────────────────────── */
 
-.surface-editor {
+.ext-editor {
     display: flex;
     flex-direction: column;
     height: 100%;
@@ -18,7 +18,7 @@
 
 /* ── Topbar ────────────────────────────────── */
 
-.editor-topbar {
+.ext-editor-topbar {
     display: flex;
     align-items: center;
     gap: 8px;
@@ -32,7 +32,7 @@
     z-index: 20;
 }
 
-.editor-topbar-back {
+.ext-editor-topbar-back {
     display: flex;
     align-items: center;
     gap: 4px;
@@ -45,18 +45,18 @@
     transition: color 0.15s, background 0.15s;
 }
 
-.editor-topbar-back:hover {
+.ext-editor-topbar-back:hover {
     color: var(--text, #eee);
     background: var(--bg-hover);
 }
 
-.editor-topbar-sep {
+.ext-editor-topbar-sep {
     width: 1px;
     height: 18px;
     background: var(--border, #2a2a2e);
 }
 
-.editor-topbar-name {
+.ext-editor-topbar-name {
     font-size: 13px;
     font-weight: 600;
     color: var(--text, #eee);
@@ -64,11 +64,11 @@
 
 /* ── Workspace Selector ────────────────────── */
 
-.editor-ws-selector {
+.ext-editor-ws-selector {
     position: relative;
 }
 
-.editor-ws-selector-btn {
+.ext-editor-ws-selector-btn {
     display: flex;
     align-items: center;
     gap: 6px;
@@ -84,12 +84,12 @@
     transition: border-color 0.15s, background 0.15s;
 }
 
-.editor-ws-selector-btn:hover {
+.ext-editor-ws-selector-btn:hover {
     border-color: var(--border, #2a2a2e);
     background: var(--bg-hover);
 }
 
-.editor-ws-dropdown {
+.ext-editor-ws-dropdown {
     display: none;
     position: absolute;
     top: 100%;
@@ -106,14 +106,14 @@
     padding: 4px 0;
 }
 
-.editor-ws-dropdown.open { display: block; }
+.ext-editor-ws-dropdown.open { display: block; }
 
-.editor-ws-list {
+.ext-editor-ws-list {
     max-height: 240px;
     overflow-y: auto;
 }
 
-.editor-ws-dropdown-item {
+.ext-editor-ws-dropdown-item {
     display: block;
     width: 100%;
     text-align: left;
@@ -127,29 +127,29 @@
     transition: background 0.1s;
 }
 
-.editor-ws-dropdown-item:hover {
+.ext-editor-ws-dropdown-item:hover {
     background: var(--bg-hover);
 }
 
-.editor-ws-dropdown-item.active {
+.ext-editor-ws-dropdown-item.active {
     color: var(--accent, #b38a4e);
     font-weight: 600;
 }
 
-.editor-ws-dropdown-divider {
+.ext-editor-ws-dropdown-divider {
     height: 1px;
     background: var(--border, #2a2a2e);
     margin: 4px 0;
 }
 
-.editor-ws-new {
+.ext-editor-ws-new {
     display: flex;
     align-items: center;
     gap: 6px;
     color: var(--accent, #b38a4e);
 }
 
-.editor-topbar-branch {
+.ext-editor-topbar-branch {
     display: flex;
     align-items: center;
     gap: 4px;
@@ -158,7 +158,7 @@
     border-radius: 4px;
 }
 
-.editor-topbar-branch-text {
+.ext-editor-topbar-branch-text {
     font-size: 11px;
     font-weight: 600;
     color: var(--purple, #a078ff);
@@ -167,7 +167,7 @@
 
 /* ── Body ──────────────────────────────────── */
 
-.editor-body {
+.ext-editor-body {
     flex: 1;
     min-height: 0;
     overflow: hidden;
@@ -175,14 +175,14 @@
 
 /* ── Bootstrap (no workspace) ──────────────── */
 
-.editor-bootstrap {
+.ext-editor-bootstrap {
     flex: 1;
     display: flex;
     align-items: center;
     justify-content: center;
 }
 
-.editor-bootstrap-card {
+.ext-editor-bootstrap-card {
     text-align: center;
     padding: 40px;
     background: var(--bg-secondary, #151517);
@@ -191,7 +191,7 @@
     max-width: 360px;
 }
 
-.editor-bootstrap-input {
+.ext-editor-bootstrap-input {
     width: 100%;
     padding: 8px 12px;
     background: var(--bg, #0e0e10);
@@ -205,11 +205,11 @@
     box-sizing: border-box;
 }
 
-.editor-bootstrap-input:focus {
+.ext-editor-bootstrap-input:focus {
     border-color: var(--accent, #b38a4e);
 }
 
-.editor-bootstrap-btn {
+.ext-editor-bootstrap-btn {
     width: 100%;
     padding: 10px 16px;
     background: var(--accent, #b38a4e);
@@ -223,11 +223,11 @@
     transition: opacity 0.15s;
 }
 
-.editor-bootstrap-btn:hover { opacity: 0.9; }
-.editor-bootstrap-btn:disabled { opacity: 0.5; cursor: not-allowed; }
+.ext-editor-bootstrap-btn:hover { opacity: 0.9; }
+.ext-editor-bootstrap-btn:disabled { opacity: 0.5; cursor: not-allowed; }
 
 /* Workspace list in bootstrap */
-.editor-bootstrap-ws-item {
+.ext-editor-bootstrap-ws-item {
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -245,30 +245,30 @@
     text-align: left;
 }
 
-.editor-bootstrap-ws-item:hover {
+.ext-editor-bootstrap-ws-item:hover {
     border-color: var(--accent, #b38a4e);
     background: var(--bg-hover);
 }
 
-.editor-bootstrap-ws-name {
+.ext-editor-bootstrap-ws-name {
     font-weight: 600;
 }
 
-.editor-bootstrap-ws-date {
+.ext-editor-bootstrap-ws-date {
     font-size: 11px;
     color: var(--text-3, #777);
 }
 
 /* ── FileTree overrides (in editor context) ── */
 
-.surface-editor .file-tree {
+.ext-editor .file-tree {
     height: 100%;
     display: flex;
     flex-direction: column;
     border-right: 1px solid var(--border, #2a2a2e);
 }
 
-.surface-editor .file-tree-header {
+.ext-editor .file-tree-header {
     display: flex;
     align-items: center;
     gap: 6px;
@@ -276,7 +276,7 @@
     border-bottom: 1px solid var(--border, #2a2a2e);
 }
 
-.surface-editor .file-tree-title {
+.ext-editor .file-tree-title {
     font-size: 11px;
     font-weight: 600;
     color: var(--text-2, #999);
@@ -285,13 +285,13 @@
     flex: 1;
 }
 
-.surface-editor .file-tree-items {
+.ext-editor .file-tree-items {
     flex: 1;
     overflow-y: auto;
     padding: 4px 0;
 }
 
-.surface-editor .file-tree-row {
+.ext-editor .file-tree-row {
     display: flex;
     align-items: center;
     gap: 4px;
@@ -302,29 +302,29 @@
     transition: background 0.1s;
 }
 
-.surface-editor .file-tree-row:hover {
+.ext-editor .file-tree-row:hover {
     background: var(--bg-hover);
 }
 
-.surface-editor .file-tree-row.active {
+.ext-editor .file-tree-row.active {
     background: var(--accent-dim, rgba(179, 138, 78, 0.15));
     color: var(--text, #eee);
 }
 
-.surface-editor .file-tree-arrow {
+.ext-editor .file-tree-arrow {
     width: 12px;
     font-size: 10px;
     color: var(--text-3, #555);
     text-align: center;
 }
 
-.surface-editor .file-tree-icon {
+.ext-editor .file-tree-icon {
     font-size: 13px;
     width: 18px;
     text-align: center;
 }
 
-.surface-editor .file-tree-name {
+.ext-editor .file-tree-name {
     flex: 1;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -332,13 +332,13 @@
 }
 
 /* Git status indicators */
-.surface-editor .file-tree-row.git-modified .file-tree-name { color: var(--warning, #e5a842); }
-.surface-editor .file-tree-row.git-added .file-tree-name { color: var(--success, #4caf50); }
-.surface-editor .file-tree-row.git-untracked .file-tree-name { color: var(--text-3, #555); font-style: italic; }
-.surface-editor .file-tree-row.git-deleted .file-tree-name { color: var(--danger, #f44336); text-decoration: line-through; }
+.ext-editor .file-tree-row.git-modified .file-tree-name { color: var(--warning, #e5a842); }
+.ext-editor .file-tree-row.git-added .file-tree-name { color: var(--success, #4caf50); }
+.ext-editor .file-tree-row.git-untracked .file-tree-name { color: var(--text-3, #555); font-style: italic; }
+.ext-editor .file-tree-row.git-deleted .file-tree-name { color: var(--danger, #f44336); text-decoration: line-through; }
 
 /* Context menu */
-.file-tree-ctx-menu {
+.ext-editor-file-tree-ctx-menu {
     position: fixed;
     background: var(--bg-secondary, #1a1a1e);
     border: 1px solid var(--border, #2a2a2e);
@@ -349,26 +349,26 @@
     box-shadow: 0 4px 12px rgba(0,0,0,0.4);
 }
 
-.file-tree-ctx-item {
+.ext-editor-file-tree-ctx-item {
     padding: 6px 12px;
     font-size: 12px;
     color: var(--text, #eee);
     cursor: pointer;
 }
 
-.file-tree-ctx-item:hover {
+.ext-editor-file-tree-ctx-item:hover {
     background: var(--bg-hover);
 }
 
 /* ── CodeEditor overrides ──────────────────── */
 
-.surface-editor .code-editor {
+.ext-editor .code-editor {
     height: 100%;
     display: flex;
     flex-direction: column;
 }
 
-.surface-editor .code-editor-tabs {
+.ext-editor .code-editor-tabs {
     display: flex;
     align-items: center;
     gap: 0;
@@ -379,9 +379,9 @@
     flex-shrink: 0;
 }
 
-.surface-editor .code-editor-tabs::-webkit-scrollbar { height: 0; }
+.ext-editor .code-editor-tabs::-webkit-scrollbar { height: 0; }
 
-.surface-editor .code-editor-tab {
+.ext-editor .code-editor-tab {
     display: flex;
     align-items: center;
     gap: 4px;
@@ -395,14 +395,14 @@
     white-space: nowrap;
 }
 
-.surface-editor .code-editor-tab:hover { background: var(--bg-hover); }
-.surface-editor .code-editor-tab.active { color: var(--text, #eee); background: var(--bg, #0e0e10); }
-.surface-editor .code-editor-tab.modified .code-editor-tab-modified { color: var(--warning, #e5a842); }
+.ext-editor .code-editor-tab:hover { background: var(--bg-hover); }
+.ext-editor .code-editor-tab.active { color: var(--text, #eee); background: var(--bg, #0e0e10); }
+.ext-editor .code-editor-tab.modified .code-editor-tab-modified { color: var(--warning, #e5a842); }
 
-.surface-editor .code-editor-tab-icon { font-size: 12px; }
-.surface-editor .code-editor-tab-modified { font-size: 10px; color: var(--text-3); }
+.ext-editor .code-editor-tab-icon { font-size: 12px; }
+.ext-editor .code-editor-tab-modified { font-size: 10px; color: var(--text-3); }
 
-.surface-editor .code-editor-tab-close {
+.ext-editor .code-editor-tab-close {
     background: none;
     border: none;
     color: var(--text-3, #555);
@@ -414,32 +414,32 @@
     line-height: 1;
 }
 
-.surface-editor .code-editor-tab-close:hover {
+.ext-editor .code-editor-tab-close:hover {
     background: var(--danger-dim, rgba(244, 67, 54, 0.15));
     color: var(--danger, #f44336);
 }
 
-.surface-editor .code-editor-content {
+.ext-editor .code-editor-content {
     flex: 1;
     min-height: 0;
     overflow: hidden;
     position: relative;
 }
 
-.surface-editor .code-editor-welcome {
+.ext-editor .code-editor-welcome {
     height: 100%;
 }
 
-.surface-editor .code-editor-cm-wrap {
+.ext-editor .code-editor-cm-wrap {
     height: 100%;
     overflow: auto;
 }
 
-.surface-editor .code-editor-cm-wrap .cm-editor {
+.ext-editor .code-editor-cm-wrap .cm-editor {
     height: 100%;
 }
 
-.surface-editor .code-editor-statusbar {
+.ext-editor .code-editor-statusbar {
     display: flex;
     align-items: center;
     gap: 16px;
@@ -453,7 +453,7 @@
     font-family: var(--mono, 'SF Mono', monospace);
 }
 
-.surface-editor .code-editor-textarea-fallback {
+.ext-editor .code-editor-textarea-fallback {
     width: 100%;
     height: 100%;
     background: var(--bg, #0e0e10);
@@ -469,18 +469,18 @@
 
 /* ── Tabbed assist pane overrides ──────────── */
 
-.surface-editor .pane-tabbed {
+.ext-editor .pane-tabbed {
     border-left: 1px solid var(--border, #2a2a2e);
 }
 
 /* ChatPane in editor tabbed pane */
-.surface-editor .chat-pane {
+.ext-editor .chat-pane {
     position: absolute;
     inset: 0;
 }
 
 /* Notes in editor pane */
-.surface-editor .note-editor {
+.ext-editor .ext-notes-editor {
     position: absolute;
     inset: 0;
     display: flex;
@@ -488,20 +488,20 @@
     overflow: hidden;
 }
 
-.surface-editor .note-editor-list-view {
+.ext-editor .ext-notes-editor-list-view {
     flex: 1;
     display: flex;
     flex-direction: column;
     overflow: hidden;
 }
 
-.surface-editor .notes-list {
+.ext-editor .ext-notes-list {
     flex: 1;
     overflow-y: auto;
 }
 
 /* Compact notes toolbar for narrow pane */
-.surface-editor .notes-toolbar {
+.ext-editor .ext-notes-toolbar {
     display: flex;
     flex-wrap: wrap;
     gap: 4px;
@@ -509,22 +509,22 @@
     border-bottom: 1px solid var(--border, #2a2a2e);
 }
 
-.surface-editor .notes-toolbar .sw-btn--sm {
+.ext-editor .ext-notes-toolbar .sw-btn--sm {
     font-size: 11px;
     padding: 3px 6px;
 }
 
-.surface-editor .notes-search-row {
+.ext-editor .ext-notes-search-row {
     padding: 4px 8px;
 }
 
-.surface-editor .notes-filter-row {
+.ext-editor .ext-notes-filter-row {
     padding: 2px 8px 4px;
     display: flex;
     gap: 4px;
 }
 
-.surface-editor .notes-filter-select {
+.ext-editor .ext-notes-filter-select {
     font-size: 11px;
     flex: 1;
     min-width: 0;

packages/editor/js/main.js

@@ -56,7 +56,7 @@
 
         // Wrap in surface container for CSS scoping
         const surface = document.createElement('div');
-        surface.className = 'surface-editor';
+        surface.className = 'ext-editor';
         surface.id = 'editorSurface';
         mount.appendChild(surface);
 
@@ -84,7 +84,7 @@
 
         // Build body + bootstrap
         const body = document.createElement('div');
-        body.className = 'editor-body';
+        body.className = 'ext-editor-body';
         body.id = 'editorBody';
         surface.appendChild(body);
 
@@ -113,32 +113,32 @@
 
     function _buildTopbar(wsName) {
         const el = document.createElement('div');
-        el.className = 'editor-topbar';
+        el.className = 'ext-editor-topbar';
         el.id = 'editorTopbar';
         el.innerHTML =
-            '<a href="' + esc(base) + '/" class="editor-topbar-back" title="Back to chat">' +
+            '<a href="' + esc(base) + '/" class="ext-editor-topbar-back" title="Back to chat">' +
                 '<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/></svg>' +
                 'Back' +
             '</a>' +
-            '<div class="editor-topbar-sep"></div>' +
+            '<div class="ext-editor-topbar-sep"></div>' +
             '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="color:var(--accent);"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>' +
-            '<div class="editor-ws-selector" id="editorWsSelector">' +
-                '<button class="editor-ws-selector-btn" id="editorWsSelectorBtn">' +
+            '<div class="ext-editor-ws-selector" id="editorWsSelector">' +
+                '<button class="ext-editor-ws-selector-btn" id="editorWsSelectorBtn">' +
                     '<span id="editorWorkspaceName">' + esc(wsName || 'Editor') + '</span>' +
                     '<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>' +
                 '</button>' +
-                '<div class="editor-ws-dropdown" id="editorWsDropdown">' +
-                    '<div id="editorWsList" class="editor-ws-list"></div>' +
-                    '<div class="editor-ws-dropdown-divider"></div>' +
-                    '<button class="editor-ws-dropdown-item editor-ws-new" id="editorWsNewBtn">' +
+                '<div class="ext-editor-ws-dropdown" id="editorWsDropdown">' +
+                    '<div id="editorWsList" class="ext-editor-ws-list"></div>' +
+                    '<div class="ext-editor-ws-dropdown-divider"></div>' +
+                    '<button class="ext-editor-ws-dropdown-item ext-editor-ws-new" id="editorWsNewBtn">' +
                         '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>' +
                         'New Workspace' +
                     '</button>' +
                 '</div>' +
             '</div>' +
-            '<div class="editor-topbar-branch" id="editorBranchBadge" style="display:none;">' +
+            '<div class="ext-editor-topbar-branch" id="editorBranchBadge" style="display:none;">' +
                 '<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="var(--purple)" stroke-width="2"><circle cx="12" cy="18" r="3"/><circle cx="12" cy="6" r="3"/><line x1="12" y1="9" x2="12" y2="15"/></svg>' +
-                '<span id="editorBranchName" class="editor-topbar-branch-text">main</span>' +
+                '<span id="editorBranchName" class="ext-editor-topbar-branch-text">main</span>' +
             '</div>' +
             '<div style="flex:1;"></div>' +
             '<button class="icon-btn" id="editorRefreshBtn" title="Refresh files">' +
@@ -151,11 +151,11 @@
 
     function _buildBootstrap() {
         const el = document.createElement('div');
-        el.className = 'editor-bootstrap';
+        el.className = 'ext-editor-bootstrap';
         el.id = 'editorBootstrap';
         el.style.display = 'none';
         el.innerHTML =
-            '<div class="editor-bootstrap-card">' +
+            '<div class="ext-editor-bootstrap-card">' +
                 '<svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" stroke-width="1.5" style="opacity:0.6;margin-bottom:12px;">' +
                     '<path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/>' +
                 '</svg>' +
@@ -168,8 +168,8 @@
                     '<span style="font-size:11px;color:var(--text-3);text-transform:uppercase;">or create new</span>' +
                     '<div style="flex:1;height:1px;background:var(--border);"></div>' +
                 '</div>' +
-                '<input type="text" id="editorBootstrapName" class="editor-bootstrap-input" placeholder="Workspace name" value="workspace">' +
-                '<button id="editorBootstrapBtn" class="editor-bootstrap-btn">Create Workspace</button>' +
+                '<input type="text" id="editorBootstrapName" class="ext-editor-bootstrap-input" placeholder="Workspace name" value="workspace">' +
+                '<button id="editorBootstrapBtn" class="ext-editor-bootstrap-btn">Create Workspace</button>' +
             '</div>';
         return el;
     }
@@ -218,7 +218,7 @@
             }
             workspaces.forEach(ws => {
                 const item = document.createElement('button');
-                item.className = 'editor-ws-dropdown-item' + (ws.id === currentWsId ? ' active' : '');
+                item.className = 'ext-editor-ws-dropdown-item' + (ws.id === currentWsId ? ' active' : '');
                 item.textContent = ws.name || ws.id?.slice(0, 8);
                 item.addEventListener('click', () => { window.location.href = base + '/s/editor?ws=' + ws.id; });
                 listEl.appendChild(item);
@@ -243,10 +243,10 @@
             listEl.innerHTML = '';
             workspaces.forEach(ws => {
                 const item = document.createElement('button');
-                item.className = 'editor-bootstrap-ws-item';
+                item.className = 'ext-editor-bootstrap-ws-item';
                 item.innerHTML =
-                    '<span class="editor-bootstrap-ws-name">' + esc(ws.name || ws.id?.slice(0, 8)) + '</span>' +
-                    '<span class="editor-bootstrap-ws-date">' + esc(ws.created_at ? new Date(ws.created_at).toLocaleDateString() : '') + '</span>';
+                    '<span class="ext-editor-bootstrap-ws-name">' + esc(ws.name || ws.id?.slice(0, 8)) + '</span>' +
+                    '<span class="ext-editor-bootstrap-ws-date">' + esc(ws.created_at ? new Date(ws.created_at).toLocaleDateString() : '') + '</span>';
                 item.addEventListener('click', () => { window.location.href = base + '/s/editor?ws=' + ws.id; });
                 listEl.appendChild(item);
             });