collabmd 0.1.21 → 0.1.23

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (99) hide show
  1. package/README.md +94 -7
  2. package/bin/collabmd.js +3 -2
  3. package/docker-compose.yml +13 -1
  4. package/package.json +2 -1
  5. package/public/assets/css/style.css +1 -1
  6. package/public/assets/js/chunks/{chunk-HEWVH67U.js → chunk-CYK7KO7W.js} +8 -8
  7. package/public/assets/js/chunks/editor-session-S5AT7BMV.js +22 -0
  8. package/public/assets/js/{excalidraw-editor-TCIH6GJL.js → excalidraw-editor-5YWMGLKF.js} +145 -62
  9. package/public/assets/js/excalidraw-editor.js +1 -1
  10. package/public/assets/js/main.js +503 -182
  11. package/public/index.html +104 -84
  12. package/src/client/application/app-shell/git-feature.js +247 -9
  13. package/src/client/application/app-shell/ui-feature.js +65 -7
  14. package/src/client/application/app-shell/workspace-feature.js +46 -0
  15. package/src/client/application/app-shell-elements.js +2 -0
  16. package/src/client/application/mermaid-preview-hydrator.js +1 -1
  17. package/src/client/application/plantuml-preview-hydrator.js +1 -1
  18. package/src/client/application/workspace-coordinator.js +147 -18
  19. package/src/client/application/workspace-preview-controller.js +34 -0
  20. package/src/client/application/workspace-route-controller.js +104 -0
  21. package/src/client/bootstrap/collabmd-app-shell.js +95 -0
  22. package/src/client/domain/runtime-paths.js +5 -0
  23. package/src/client/excalidraw-editor.js +50 -2
  24. package/src/client/infrastructure/auth-client.js +219 -52
  25. package/src/client/infrastructure/browser-navigation-port.js +20 -0
  26. package/src/client/infrastructure/editor-collaboration-client.js +4 -0
  27. package/src/client/infrastructure/editor-session.js +47 -7
  28. package/src/client/infrastructure/editor-view-adapter.js +122 -58
  29. package/src/client/infrastructure/runtime-config.js +66 -0
  30. package/src/client/presentation/comment-ui-controller.js +82 -26
  31. package/src/client/presentation/comments-panel.js +2 -2
  32. package/src/client/presentation/excalidraw-embed-controller.js +60 -2
  33. package/src/client/presentation/file-history-view-controller.js +806 -0
  34. package/src/client/presentation/git-diff-view-controller.js +718 -121
  35. package/src/client/presentation/git-panel-controller.js +458 -66
  36. package/src/client/presentation/layout-controller.js +1 -1
  37. package/src/client/styles/components/actions.css +89 -0
  38. package/src/client/styles/components/feedback.css +43 -0
  39. package/src/client/styles/components/navigation.css +68 -0
  40. package/src/client/styles/components/scrollbars.css +104 -0
  41. package/src/client/styles/components/states.css +289 -0
  42. package/src/client/styles/components/surfaces.css +155 -0
  43. package/src/client/styles/features/backlinks.css +213 -0
  44. package/src/client/styles/features/collaboration-chat.css +228 -0
  45. package/src/client/styles/features/collaboration-dialogs.css +154 -0
  46. package/src/client/styles/features/collaboration-presence.css +103 -0
  47. package/src/client/styles/features/collaboration-ui.css +3 -0
  48. package/src/client/styles/features/comment-card.css +236 -0
  49. package/src/client/styles/features/comment-markdown.css +127 -0
  50. package/src/client/styles/features/comment-overlays.css +60 -0
  51. package/src/client/styles/features/comments-drawer.css +120 -0
  52. package/src/client/styles/features/comments.css +4 -0
  53. package/src/client/styles/features/diagram-preview.css +227 -0
  54. package/src/client/styles/features/diff-commit.css +268 -0
  55. package/src/client/styles/features/diff-lines.css +160 -0
  56. package/src/client/styles/features/diff-toolbar.css +98 -0
  57. package/src/client/styles/features/diff.css +3 -0
  58. package/src/client/styles/features/embedded-preview.css +218 -0
  59. package/src/client/styles/features/git-branch.css +155 -0
  60. package/src/client/styles/features/git-files.css +105 -0
  61. package/src/client/styles/features/git-history.css +339 -0
  62. package/src/client/styles/features/git.css +3 -0
  63. package/src/client/styles/features/media-lightbox.css +157 -0
  64. package/src/client/styles/features/outline.css +115 -0
  65. package/src/client/styles/features/preview-content.css +3 -0
  66. package/src/client/styles/features/preview-markdown.css +201 -0
  67. package/src/client/styles/features/preview-sidebars.css +2 -0
  68. package/src/client/styles/features/quick-switcher.css +167 -0
  69. package/src/client/styles/foundation/themes.css +347 -0
  70. package/src/client/styles/foundation/tokens.css +66 -0
  71. package/src/client/styles/foundation/utilities.css +36 -0
  72. package/src/client/styles/layout/editor-page.css +203 -0
  73. package/src/client/styles/layout/overlays.css +132 -0
  74. package/src/client/styles/layout/responsive.css +251 -0
  75. package/src/client/styles/layout/shell.css +314 -0
  76. package/src/client/styles/layout/sidebar.css +176 -0
  77. package/src/client/styles/layout/view-modes.css +92 -0
  78. package/src/client/styles/overrides/codemirror.css +53 -0
  79. package/src/client/styles/overrides/highlightjs.css +7 -0
  80. package/src/client/styles/overrides/vendor.css +2 -0
  81. package/src/client/styles/primitives/controls.css +276 -0
  82. package/src/client/styles/style.css +25 -4945
  83. package/src/server/auth/create-auth-service.js +373 -15
  84. package/src/server/auth/session-cookie.js +30 -4
  85. package/src/server/config/env.js +121 -5
  86. package/src/server/create-app-server.js +8 -0
  87. package/src/server/domain/collaboration/collaboration-room.js +90 -47
  88. package/src/server/index.js +3 -1
  89. package/src/server/infrastructure/git/command-runner.js +2 -1
  90. package/src/server/infrastructure/git/git-service.js +48 -2
  91. package/src/server/infrastructure/git/history-service.js +683 -0
  92. package/src/server/infrastructure/git/parsers.js +30 -0
  93. package/src/server/infrastructure/git/responses.js +73 -0
  94. package/src/server/infrastructure/http/create-auth-api-handler.js +30 -2
  95. package/src/server/infrastructure/http/create-git-api-command-handler.js +2 -0
  96. package/src/server/infrastructure/http/create-git-api-handler.js +2 -0
  97. package/src/server/infrastructure/http/create-git-api-query-handler.js +61 -0
  98. package/src/server/infrastructure/http/create-request-handler.js +15 -0
  99. package/public/assets/js/chunks/editor-session-EAUBJCHH.js +0 -22
package/public/index.html CHANGED
@@ -16,13 +16,17 @@
16
16
  >
17
17
  <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><rect x='2' y='4' width='18' height='24' rx='3' fill='%23818cf8'/><rect x='12' y='4' width='18' height='24' rx='3' fill='%234f46e5' opacity='0.8'/><path d='M18 12h6M18 16h6M18 20h4' stroke='white' stroke-width='1.5' stroke-linecap='round'/></svg>">
18
18
  <script>
19
- if (window.location.hash.includes('file=') || window.location.hash.includes('git-diff=')) {
19
+ if (
20
+ window.location.hash.includes('file=')
21
+ || window.location.hash.includes('git-diff=')
22
+ || window.location.hash.includes('git-file-preview=')
23
+ ) {
20
24
  document.documentElement.setAttribute('data-initial-file-requested', 'true');
21
25
  }
22
26
  </script>
23
27
  </head>
24
28
  <body>
25
- <a href="#editorContainer" class="sr-only" style="position:absolute;top:8px;left:8px;z-index:1000;background:var(--color-primary);color:var(--color-text-inverse);padding:8px 16px;border-radius:6px;" onfocus="this.style.position='fixed';this.style.clip='auto';this.style.width='auto';this.style.height='auto'" onblur="this.style.position='absolute';this.className='sr-only'">Skip to editor</a>
29
+ <a href="#editorContainer" class="sr-only skip-link">Skip to editor</a>
26
30
 
27
31
  <div class="app-shell">
28
32
  <!-- ========== SIDEBAR ========== -->
@@ -38,38 +42,38 @@
38
42
  <span class="sidebar-title">CollabMD</span>
39
43
  </div>
40
44
  <div class="sidebar-actions">
41
- <button class="sidebar-action-btn sidebar-close-btn" id="sidebarClose" aria-label="Close sidebar" title="Close sidebar">
45
+ <button class="ui-icon-button sidebar-close-btn" id="sidebarClose" aria-label="Close sidebar" title="Close sidebar">
42
46
  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
43
47
  <line x1="18" y1="6" x2="6" y2="18"/>
44
48
  <line x1="6" y1="6" x2="18" y2="18"/>
45
49
  </svg>
46
50
  </button>
47
- <button class="sidebar-action-btn" id="newFileBtn" aria-label="New file" title="New file">
51
+ <button class="ui-icon-button" id="newFileBtn" aria-label="New file" title="New file">
48
52
  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
49
53
  </button>
50
- <button class="sidebar-action-btn" id="newDrawingBtn" aria-label="New drawing" title="New Excalidraw drawing">
54
+ <button class="ui-icon-button" id="newDrawingBtn" aria-label="New drawing" title="New Excalidraw drawing">
51
55
  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 19l7-7 3 3-7 7-3-3z"/><path d="M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z"/><path d="M2 2l7.586 7.586"/><circle cx="11" cy="11" r="2"/></svg>
52
56
  </button>
53
- <button class="sidebar-action-btn" id="newMermaidBtn" aria-label="New Mermaid diagram" title="New Mermaid diagram">
57
+ <button class="ui-icon-button" id="newMermaidBtn" aria-label="New Mermaid diagram" title="New Mermaid diagram">
54
58
  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 7.5c0-1.38 1.12-2.5 2.5-2.5 1.04 0 1.93.64 2.3 1.56A2.5 2.5 0 0 1 14 8.5v1"/><path d="M19 16.5c0 1.38-1.12 2.5-2.5 2.5-1.04 0-1.93-.64-2.3-1.56A2.5 2.5 0 0 1 10 15.5v-1"/><path d="M8 10.5h8"/><path d="M8 13.5h8"/><path d="M10 8.5v7"/><path d="M14 8.5v7"/></svg>
55
59
  </button>
56
- <button class="sidebar-action-btn" id="newPlantumlBtn" aria-label="New PlantUML diagram" title="New PlantUML diagram">
60
+ <button class="ui-icon-button" id="newPlantumlBtn" aria-label="New PlantUML diagram" title="New PlantUML diagram">
57
61
  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="7" height="6" rx="1"/><rect x="14" y="4" width="7" height="6" rx="1"/><rect x="8.5" y="14" width="7" height="6" rx="1"/><path d="M10 7h4"/><path d="M17.5 10v2.5"/><path d="M6.5 10v2.5"/><path d="M6.5 12.5h11"/></svg>
58
62
  </button>
59
- <button class="sidebar-action-btn" id="newFolderBtn" aria-label="New folder" title="New folder">
63
+ <button class="ui-icon-button" id="newFolderBtn" aria-label="New folder" title="New folder">
60
64
  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><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"/><line x1="12" y1="11" x2="12" y2="17"/><line x1="9" y1="14" x2="15" y2="14"/></svg>
61
65
  </button>
62
- <button class="sidebar-action-btn" id="refreshFilesBtn" aria-label="Refresh" title="Refresh file list">
66
+ <button class="ui-icon-button" id="refreshFilesBtn" aria-label="Refresh" title="Refresh file list">
63
67
  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/></svg>
64
68
  </button>
65
69
  </div>
66
70
  </div>
67
- <div class="sidebar-tabs hidden" id="sidebarTabs">
68
- <button class="sidebar-tab active" id="filesSidebarTab" type="button">
71
+ <div class="ui-nav-tabs hidden" id="sidebarTabs">
72
+ <button class="ui-nav-tab active" id="filesSidebarTab" type="button">
69
73
  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><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>
70
74
  Files
71
75
  </button>
72
- <button class="sidebar-tab hidden" id="gitSidebarTab" type="button">
76
+ <button class="ui-nav-tab hidden" id="gitSidebarTab" type="button">
73
77
  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="18" cy="18" r="3"/><circle cx="6" cy="6" r="3"/><path d="M13 6h3a2 2 0 0 1 2 2v7"/><path d="M6 9v12"/></svg>
74
78
  Git
75
79
  </button>
@@ -89,47 +93,56 @@
89
93
  <!-- Toolbar -->
90
94
  <header class="toolbar" role="banner">
91
95
  <div class="toolbar-left">
92
- <button class="btn btn-ghost toolbar-btn" id="sidebarToggle" aria-label="Toggle sidebar" title="Toggle sidebar">
96
+ <button class="ui-button btn btn-ghost ui-toolbar-button" id="sidebarToggle" aria-label="Toggle sidebar" title="Toggle sidebar">
93
97
  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
94
98
  </button>
95
99
  <div class="toolbar-room-info">
96
100
  <span class="toolbar-room-name" id="activeFileName">CollabMD</span>
97
- <span class="toolbar-badge" id="userCount"></span>
98
- <span class="toolbar-badge hidden" id="toolbarDiffBadge">Diff</span>
99
- <span class="toolbar-badge hidden" id="gitOperationStatus" aria-live="polite" aria-atomic="true"></span>
101
+ <span class="ui-pill-badge ui-pill-badge--accent toolbar-badge" id="userCount"></span>
102
+ <span class="ui-pill-badge ui-pill-badge--accent toolbar-badge hidden" id="toolbarDiffBadge">Diff</span>
103
+ <span class="ui-pill-badge ui-pill-badge--accent toolbar-badge hidden" id="gitOperationStatus" aria-live="polite" aria-atomic="true"></span>
100
104
  </div>
101
105
  </div>
102
106
 
103
107
  <div class="toolbar-center" id="toolbarCenter">
104
- <div class="view-toggle" role="group" aria-label="View mode">
105
- <button class="view-btn active" data-view="split" aria-label="Split view" aria-pressed="true" title="Split view">
108
+ <div class="ui-segmented-control view-toggle" role="group" aria-label="View mode">
109
+ <button class="ui-segmented-btn view-btn active" data-view="split" aria-label="Split view" aria-pressed="true" title="Split view">
106
110
  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="12" y1="3" x2="12" y2="21"/></svg>
107
111
  </button>
108
- <button class="view-btn" data-view="editor" aria-label="Editor only" aria-pressed="false" title="Editor only">
112
+ <button class="ui-segmented-btn view-btn" data-view="editor" aria-label="Editor only" aria-pressed="false" title="Editor only">
109
113
  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="8" y1="8" x2="16" y2="8"/><line x1="8" y1="12" x2="14" y2="12"/><line x1="8" y1="16" x2="12" y2="16"/></svg>
110
114
  </button>
111
- <button class="view-btn" data-view="preview" aria-label="Preview only" aria-pressed="false" title="Preview only">
115
+ <button class="ui-segmented-btn view-btn" data-view="preview" aria-label="Preview only" aria-pressed="false" title="Preview only">
112
116
  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
113
117
  </button>
114
118
  </div>
115
119
  </div>
116
120
 
117
121
  <div class="toolbar-right">
118
- <button class="btn btn-ghost toolbar-btn mobile-view-toggle" id="mobileViewToggle" aria-label="Toggle editor/preview" title="Toggle view">
122
+ <button class="ui-button btn btn-ghost ui-toolbar-button hidden" id="fileHistoryBtn" aria-label="Open file history" title="View file history">
123
+ <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
124
+ <path d="M3 12a9 9 0 1 0 3-6.7"/>
125
+ <path d="M3 4v5h5"/>
126
+ <path d="M12 7v5l3 3"/>
127
+ </svg>
128
+ <span class="ui-toolbar-button-label" id="fileHistoryBtnLabel">History</span>
129
+ </button>
130
+
131
+ <button class="ui-button btn btn-ghost ui-toolbar-button mobile-view-toggle" id="mobileViewToggle" aria-label="Toggle editor/preview" title="Toggle view">
119
132
  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
120
- <span class="toolbar-btn-label">Preview</span>
133
+ <span class="ui-toolbar-button-label">Preview</span>
121
134
  </button>
122
135
 
123
- <button class="btn btn-ghost toolbar-btn toolbar-name-btn" id="editNameBtn" aria-label="Set name. Change display name" title="Change display name">
136
+ <button class="ui-button btn btn-ghost ui-toolbar-button ui-toolbar-button--name" id="editNameBtn" aria-label="Set name. Change display name" title="Change display name">
124
137
  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9"/><path d="M16.5 3.5a2.12 2.12 0 1 1 3 3L7 19l-4 1 1-4Z"/></svg>
125
- <span class="toolbar-btn-label toolbar-user-name" id="currentUserName">Set name</span>
138
+ <span class="ui-toolbar-button-label ui-toolbar-button-text" id="currentUserName">Set name</span>
126
139
  </button>
127
140
  <div class="user-avatars" id="userAvatars"></div>
128
141
  <div class="chat-container" id="chatContainer">
129
- <button class="btn btn-ghost toolbar-btn chat-toggle-btn" id="chatToggleBtn" aria-label="Open team chat" aria-expanded="false" title="Team chat">
142
+ <button class="ui-button btn btn-ghost ui-toolbar-button chat-toggle-btn" id="chatToggleBtn" aria-label="Open team chat" aria-expanded="false" title="Team chat">
130
143
  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
131
- <span class="toolbar-btn-label">Chat</span>
132
- <span class="chat-toggle-badge hidden" id="chatToggleBadge">0</span>
144
+ <span class="ui-toolbar-button-label">Chat</span>
145
+ <span class="ui-pill-badge ui-pill-badge--solid ui-pill-badge--count chat-toggle-badge hidden" id="chatToggleBadge">0</span>
133
146
  </button>
134
147
  <div class="toast-container chat-toast-container" id="chatToastContainer" aria-live="polite" aria-atomic="true"></div>
135
148
 
@@ -139,7 +152,7 @@
139
152
  <h2 class="chat-panel-title">Team chat</h2>
140
153
  <p class="chat-panel-status" id="chatStatus">Syncing...</p>
141
154
  </div>
142
- <button class="btn btn-secondary chat-alert-btn" id="chatNotificationBtn" type="button">Enable alerts</button>
155
+ <button class="ui-button ui-button--compact ui-pill-button ui-action-pill ui-action-pill--surface btn btn-secondary chat-notification-action" id="chatNotificationBtn" type="button">Enable alerts</button>
143
156
  </div>
144
157
 
145
158
  <div class="chat-empty-state" id="chatEmptyState">
@@ -149,15 +162,15 @@
149
162
 
150
163
  <form class="chat-form" id="chatForm">
151
164
  <input type="text" class="input chat-input" id="chatInput" placeholder="Send a quick update..." autocomplete="off" spellcheck="true" maxlength="280" aria-label="Team chat message">
152
- <button type="submit" class="btn btn-primary chat-send-btn">Send</button>
165
+ <button type="submit" class="ui-button btn btn-primary chat-send-btn">Send</button>
153
166
  </form>
154
167
  </section>
155
168
  </div>
156
- <button class="btn btn-ghost toolbar-btn" id="shareBtn" aria-label="Share. Copy link" title="Share link">
169
+ <button class="ui-button btn btn-ghost ui-toolbar-button" id="shareBtn" aria-label="Share. Copy link" title="Share link">
157
170
  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
158
- <span class="toolbar-btn-label">Share</span>
171
+ <span class="ui-toolbar-button-label">Share</span>
159
172
  </button>
160
- <button class="btn btn-ghost toolbar-btn" data-theme-toggle aria-label="Toggle theme" title="Toggle theme">
173
+ <button class="ui-button btn btn-ghost ui-toolbar-button" data-theme-toggle aria-label="Toggle theme" title="Toggle theme">
161
174
  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg>
162
175
  </button>
163
176
  </div>
@@ -177,11 +190,11 @@
177
190
  <h2 class="empty-state-title">Welcome to CollabMD</h2>
178
191
  <p class="empty-state-desc">Open a file from the sidebar, or get started quickly:</p>
179
192
  <div class="empty-state-actions">
180
- <button class="btn btn-secondary empty-state-btn" id="emptyStateNewFileBtn">
193
+ <button class="ui-button btn btn-secondary empty-state-btn" id="emptyStateNewFileBtn">
181
194
  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
182
195
  New File
183
196
  </button>
184
- <button class="btn btn-secondary empty-state-btn" id="emptyStateSearchBtn">
197
+ <button class="ui-button btn btn-secondary empty-state-btn" id="emptyStateSearchBtn">
185
198
  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
186
199
  Search Everything
187
200
  <kbd class="empty-state-kbd">⌘K</kbd>
@@ -200,13 +213,13 @@
200
213
  <span class="pane-label-meta" id="lineInfo">Ln 1, Col 1</span>
201
214
  </div>
202
215
  <div class="pane-header-actions">
203
- <button class="btn btn-ghost pane-header-btn hidden" id="commentSelectionBtn" aria-label="Comment current line or selection" title="Comment current line or selection">
216
+ <button class="ui-button ui-button--compact ui-button--toggle btn btn-ghost hidden" id="commentSelectionBtn" aria-label="Comment current line or selection" title="Comment current line or selection">
204
217
  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
205
218
  <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
206
219
  </svg>
207
- <span class="pane-header-btn-label">Comment</span>
220
+ <span class="ui-action-label">Comment</span>
208
221
  </button>
209
- <button class="btn btn-ghost pane-header-btn" id="toggleWrapBtn" aria-label="Disable line wrap" title="Disable line wrap">
222
+ <button class="ui-button ui-button--compact ui-button--toggle btn btn-ghost" id="toggleWrapBtn" aria-label="Disable line wrap" title="Disable line wrap">
210
223
  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
211
224
  <path d="M3 6h14a4 4 0 1 1 0 8H9"/>
212
225
  <path d="m9 10-4 4 4 4"/>
@@ -217,7 +230,7 @@
217
230
  </div>
218
231
  </div>
219
232
  <div id="markdownToolbar" class="markdown-toolbar hidden" role="toolbar" aria-label="Markdown formatting">
220
- <button type="button" class="btn btn-ghost markdown-toolbar-btn" data-markdown-action="heading" aria-label="Toggle heading" title="Toggle heading">
233
+ <button type="button" class="ui-icon-button ui-icon-button--toolbar ui-toolbar-action" data-markdown-action="heading" aria-label="Toggle heading" title="Toggle heading">
221
234
  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
222
235
  <path d="M4 6v12"/>
223
236
  <path d="M14 6v12"/>
@@ -226,52 +239,52 @@
226
239
  <path d="M19.5 6v12"/>
227
240
  </svg>
228
241
  </button>
229
- <button type="button" class="btn btn-ghost markdown-toolbar-btn" data-markdown-action="bold" aria-label="Bold" title="Bold">
242
+ <button type="button" class="ui-icon-button ui-icon-button--toolbar ui-toolbar-action" data-markdown-action="bold" aria-label="Bold" title="Bold">
230
243
  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
231
244
  <path d="M7 5h6a4 4 0 0 1 0 8H7z"/>
232
245
  <path d="M7 13h7a4 4 0 0 1 0 8H7z"/>
233
246
  </svg>
234
247
  </button>
235
- <button type="button" class="btn btn-ghost markdown-toolbar-btn" data-markdown-action="italic" aria-label="Italic" title="Italic">
248
+ <button type="button" class="ui-icon-button ui-icon-button--toolbar ui-toolbar-action" data-markdown-action="italic" aria-label="Italic" title="Italic">
236
249
  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
237
250
  <path d="M14 4h6"/>
238
251
  <path d="M4 20h6"/>
239
252
  <path d="M14 4 10 20"/>
240
253
  </svg>
241
254
  </button>
242
- <button type="button" class="btn btn-ghost markdown-toolbar-btn" data-markdown-action="strikethrough" aria-label="Strikethrough" title="Strikethrough">
255
+ <button type="button" class="ui-icon-button ui-icon-button--toolbar ui-toolbar-action" data-markdown-action="strikethrough" aria-label="Strikethrough" title="Strikethrough">
243
256
  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.1" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
244
257
  <path d="M6 6.5c1.4-1.2 3.2-1.9 5.4-1.9 3.1 0 5.6 1.4 5.6 3.9 0 2.1-1.7 3-4.3 3.5l-2.4.5c-2.7.5-4.3 1.6-4.3 3.6 0 2.7 2.7 4.2 6 4.2 2.1 0 4.2-.6 5.7-1.8"/>
245
258
  <path d="M3 12h18"/>
246
259
  </svg>
247
260
  </button>
248
- <button type="button" class="btn btn-ghost markdown-toolbar-btn" data-markdown-action="link" aria-label="Insert link" title="Insert link">
261
+ <button type="button" class="ui-icon-button ui-icon-button--toolbar ui-toolbar-action" data-markdown-action="link" aria-label="Insert link" title="Insert link">
249
262
  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
250
263
  <path d="M10 13a5 5 0 0 0 7.54.54l2.92-2.92a5 5 0 0 0-7.07-7.07L11.5 5.4"/>
251
264
  <path d="M14 11a5 5 0 0 0-7.54-.54L3.54 13.38a5 5 0 1 0 7.07 7.07L12.5 18.6"/>
252
265
  </svg>
253
266
  </button>
254
- <button type="button" class="btn btn-ghost markdown-toolbar-btn" data-markdown-action="image" aria-label="Insert image" title="Insert image">
267
+ <button type="button" class="ui-icon-button ui-icon-button--toolbar ui-toolbar-action" data-markdown-action="image" aria-label="Insert image" title="Insert image">
255
268
  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
256
269
  <rect x="3" y="5" width="18" height="14" rx="2"/>
257
270
  <circle cx="9" cy="10" r="1.5"/>
258
271
  <path d="m21 16-5.5-5.5L7 19"/>
259
272
  </svg>
260
273
  </button>
261
- <button type="button" class="btn btn-ghost markdown-toolbar-btn" data-markdown-action="video" aria-label="Insert video" title="Insert video">
274
+ <button type="button" class="ui-icon-button ui-icon-button--toolbar ui-toolbar-action" data-markdown-action="video" aria-label="Insert video" title="Insert video">
262
275
  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
263
276
  <rect x="3" y="5" width="18" height="14" rx="2"/>
264
277
  <path d="m10 9 5 3-5 3z" fill="currentColor" stroke="none"/>
265
278
  </svg>
266
279
  </button>
267
280
  <span class="markdown-toolbar-separator" aria-hidden="true"></span>
268
- <button type="button" class="btn btn-ghost markdown-toolbar-btn" data-markdown-action="quote" aria-label="Toggle quote" title="Toggle quote">
281
+ <button type="button" class="ui-icon-button ui-icon-button--toolbar ui-toolbar-action" data-markdown-action="quote" aria-label="Toggle quote" title="Toggle quote">
269
282
  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
270
283
  <path d="M8 17H5a2 2 0 0 1-2-2v-3a6 6 0 0 1 6-6"/>
271
284
  <path d="M19 17h-3a2 2 0 0 1-2-2v-3a6 6 0 0 1 6-6"/>
272
285
  </svg>
273
286
  </button>
274
- <button type="button" class="btn btn-ghost markdown-toolbar-btn" data-markdown-action="bullet-list" aria-label="Toggle bullet list" title="Toggle bullet list">
287
+ <button type="button" class="ui-icon-button ui-icon-button--toolbar ui-toolbar-action" data-markdown-action="bullet-list" aria-label="Toggle bullet list" title="Toggle bullet list">
275
288
  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
276
289
  <circle cx="5" cy="7" r="1.25" fill="currentColor" stroke="none"/>
277
290
  <circle cx="5" cy="12" r="1.25" fill="currentColor" stroke="none"/>
@@ -281,7 +294,7 @@
281
294
  <path d="M9 17h10"/>
282
295
  </svg>
283
296
  </button>
284
- <button type="button" class="btn btn-ghost markdown-toolbar-btn" data-markdown-action="numbered-list" aria-label="Toggle numbered list" title="Toggle numbered list">
297
+ <button type="button" class="ui-icon-button ui-icon-button--toolbar ui-toolbar-action" data-markdown-action="numbered-list" aria-label="Toggle numbered list" title="Toggle numbered list">
285
298
  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
286
299
  <path d="M10 7h10"/>
287
300
  <path d="M10 12h10"/>
@@ -291,7 +304,7 @@
291
304
  <path d="M4 17h2"/>
292
305
  </svg>
293
306
  </button>
294
- <button type="button" class="btn btn-ghost markdown-toolbar-btn" data-markdown-action="task-list" aria-label="Toggle task list" title="Toggle task list">
307
+ <button type="button" class="ui-icon-button ui-icon-button--toolbar ui-toolbar-action" data-markdown-action="task-list" aria-label="Toggle task list" title="Toggle task list">
295
308
  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
296
309
  <rect x="3.5" y="4.5" width="4" height="4" rx="1"/>
297
310
  <rect x="3.5" y="10.5" width="4" height="4" rx="1"/>
@@ -301,7 +314,7 @@
301
314
  <path d="M10 18.5h10"/>
302
315
  </svg>
303
316
  </button>
304
- <button type="button" class="btn btn-ghost markdown-toolbar-btn" data-markdown-action="table" aria-label="Insert table" title="Insert table">
317
+ <button type="button" class="ui-icon-button ui-icon-button--toolbar ui-toolbar-action" data-markdown-action="table" aria-label="Insert table" title="Insert table">
305
318
  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
306
319
  <rect x="3" y="5" width="18" height="14" rx="1"/>
307
320
  <path d="M3 10h18"/>
@@ -310,20 +323,20 @@
310
323
  </svg>
311
324
  </button>
312
325
  <span class="markdown-toolbar-separator" aria-hidden="true"></span>
313
- <button type="button" class="btn btn-ghost markdown-toolbar-btn" data-markdown-action="code" aria-label="Inline code" title="Inline code">
326
+ <button type="button" class="ui-icon-button ui-icon-button--toolbar ui-toolbar-action" data-markdown-action="code" aria-label="Inline code" title="Inline code">
314
327
  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.1" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
315
328
  <path d="m8 9-4 3 4 3"/>
316
329
  <path d="m16 9 4 3-4 3"/>
317
330
  <path d="m13 6-2 12"/>
318
331
  </svg>
319
332
  </button>
320
- <button type="button" class="btn btn-ghost markdown-toolbar-btn" data-markdown-action="code-block" aria-label="Code block" title="Code block">
333
+ <button type="button" class="ui-icon-button ui-icon-button--toolbar ui-toolbar-action" data-markdown-action="code-block" aria-label="Code block" title="Code block">
321
334
  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.1" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
322
335
  <path d="m9 18-6-6 6-6"/>
323
336
  <path d="m15 6 6 6-6 6"/>
324
337
  </svg>
325
338
  </button>
326
- <button type="button" class="btn btn-ghost markdown-toolbar-btn" data-markdown-action="horizontal-rule" aria-label="Insert horizontal rule" title="Insert horizontal rule">
339
+ <button type="button" class="ui-icon-button ui-icon-button--toolbar ui-toolbar-action" data-markdown-action="horizontal-rule" aria-label="Insert horizontal rule" title="Insert horizontal rule">
327
340
  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
328
341
  <path d="M4 12h16"/>
329
342
  <path d="M9 8h6"/>
@@ -333,13 +346,13 @@
333
346
  </div>
334
347
  <div id="editorContainer" class="editor-container">
335
348
  <div class="editor-loading" id="editorLoading">
336
- <div class="skeleton-line" style="width: 40%; height: 32px; margin-bottom: 24px;"></div>
337
- <div class="skeleton-line" style="width: 100%;"></div>
338
- <div class="skeleton-line" style="width: 90%;"></div>
339
- <div class="skeleton-line" style="width: 95%;"></div>
340
- <div class="skeleton-line" style="width: 80%; margin-bottom: 24px;"></div>
341
- <div class="skeleton-line" style="width: 100%;"></div>
342
- <div class="skeleton-line" style="width: 85%;"></div>
349
+ <div class="skeleton-line skeleton-line--title skeleton-line--break"></div>
350
+ <div class="skeleton-line skeleton-line--full"></div>
351
+ <div class="skeleton-line skeleton-line--ninety"></div>
352
+ <div class="skeleton-line skeleton-line--ninety-five"></div>
353
+ <div class="skeleton-line skeleton-line--eighty skeleton-line--break"></div>
354
+ <div class="skeleton-line skeleton-line--full"></div>
355
+ <div class="skeleton-line skeleton-line--eighty-five"></div>
343
356
  </div>
344
357
  </div>
345
358
  </div>
@@ -350,13 +363,13 @@
350
363
  <div class="pane-header">
351
364
  <span class="pane-label">Preview</span>
352
365
  <div class="pane-header-actions">
353
- <button class="btn btn-ghost pane-header-btn hidden" id="commentsToggle" aria-label="Toggle comments" title="Toggle comments">
366
+ <button class="ui-button ui-button--compact ui-button--toggle btn btn-ghost hidden" id="commentsToggle" aria-label="Toggle comments" title="Toggle comments">
354
367
  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
355
368
  <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
356
369
  </svg>
357
- <span class="pane-header-btn-label">Comments</span>
370
+ <span class="ui-action-label">Comments</span>
358
371
  </button>
359
- <button class="btn btn-ghost pane-header-btn" id="outlineToggle" aria-label="Toggle outline" title="Toggle outline">
372
+ <button class="ui-button ui-button--compact ui-button--toggle btn btn-ghost" id="outlineToggle" aria-label="Toggle outline" title="Toggle outline">
360
373
  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="15" y2="12"/><line x1="3" y1="18" x2="18" y2="18"/></svg>
361
374
  </button>
362
375
  </div>
@@ -411,26 +424,29 @@
411
424
  <div class="diff-toolbar">
412
425
  <div class="diff-toolbar-left">
413
426
  <div class="diff-file-nav">
414
- <button class="diff-nav-btn" id="diffPrevBtn" type="button" disabled aria-label="Previous changed file">
427
+ <button class="ui-icon-button ui-action-icon" id="diffPrevBtn" type="button" disabled aria-label="Previous changed file">
415
428
  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><polyline points="15 18 9 12 15 6"/></svg>
416
429
  </button>
417
430
  <span class="diff-file-indicator" id="diffFileIndicator">0 / 0 files</span>
418
- <button class="diff-nav-btn" id="diffNextBtn" type="button" disabled aria-label="Next changed file">
431
+ <button class="ui-icon-button ui-action-icon" id="diffNextBtn" type="button" disabled aria-label="Next changed file">
419
432
  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><polyline points="9 18 15 12 9 6"/></svg>
420
433
  </button>
421
434
  </div>
422
435
  <div class="diff-toolbar-actions">
423
- <div class="diff-toolbar-actions-group diff-toolbar-actions-group-git" role="group" aria-label="Git file actions">
424
- <button class="btn btn-secondary diff-action-btn" id="diffPrimaryActionBtn" type="button" disabled>
436
+ <button class="ui-button ui-action-button ui-action-button--surface ui-action-button--wide btn btn-secondary diff-back-btn hidden" id="diffBackToHistoryBtn" type="button">
437
+ Back to History
438
+ </button>
439
+ <div class="diff-toolbar-actions-group diff-toolbar-actions-group-git" id="diffGitActionsGroup" role="group" aria-label="Git file actions">
440
+ <button class="ui-button ui-action-button ui-action-button--surface ui-action-button--wide btn btn-secondary" id="diffPrimaryActionBtn" type="button" disabled>
425
441
  Stage
426
442
  </button>
427
- <button class="btn btn-primary diff-action-btn" id="diffCommitBtn" type="button" disabled>
443
+ <button class="ui-button ui-action-button ui-action-button--wide btn btn-primary" id="diffCommitBtn" type="button" disabled>
428
444
  Commit Staged
429
445
  </button>
430
446
  </div>
431
- <span class="diff-toolbar-actions-divider" aria-hidden="true"></span>
432
- <div class="diff-toolbar-actions-group" role="group" aria-label="Navigation actions">
433
- <button class="btn btn-secondary diff-open-editor-btn" id="diffOpenEditorBtn" type="button" disabled>
447
+ <span class="diff-toolbar-actions-divider" id="diffToolbarDivider" aria-hidden="true"></span>
448
+ <div class="diff-toolbar-actions-group" id="diffEditorActionsGroup" role="group" aria-label="Navigation actions">
449
+ <button class="ui-button ui-action-button ui-action-button--surface ui-action-button--wide btn btn-secondary diff-open-editor-btn" id="diffOpenEditorBtn" type="button" disabled>
434
450
  Open in Editor
435
451
  </button>
436
452
  </div>
@@ -438,12 +454,16 @@
438
454
  </div>
439
455
  <div class="diff-toolbar-right">
440
456
  <div class="diff-stats" id="diffStats">
441
- <span class="diff-stats-add">+0</span>
442
- <span class="diff-stats-del">-0</span>
457
+ <span class="ui-stat-token ui-stat-token--add diff-stats-add">+0</span>
458
+ <span class="ui-stat-token ui-stat-token--del diff-stats-del">-0</span>
459
+ </div>
460
+ <div class="ui-segmented-control diff-layout-toggle hidden" id="diffLayoutToggle" role="group" aria-label="Commit diff layout">
461
+ <button class="ui-segmented-btn view-btn diff-layout-btn" data-diff-layout="stacked" type="button">Stacked</button>
462
+ <button class="ui-segmented-btn view-btn diff-layout-btn active" data-diff-layout="focused" type="button">Focused</button>
443
463
  </div>
444
- <div class="view-toggle diff-mode-toggle" role="group" aria-label="Diff view mode">
445
- <button class="view-btn diff-mode-btn active" data-diff-mode="unified" type="button">Unified</button>
446
- <button class="view-btn diff-mode-btn" data-diff-mode="split" type="button">Split</button>
464
+ <div class="ui-segmented-control diff-mode-toggle" role="group" aria-label="Diff view mode">
465
+ <button class="ui-segmented-btn view-btn diff-mode-btn active" data-diff-mode="unified" type="button">Unified</button>
466
+ <button class="ui-segmented-btn view-btn diff-mode-btn" data-diff-mode="split" type="button">Split</button>
447
467
  </div>
448
468
  </div>
449
469
  </div>
@@ -465,8 +485,8 @@
465
485
  <input type="text" class="input" id="displayNameInput" name="displayName" maxlength="24" autocomplete="nickname" spellcheck="false" required>
466
486
  </label>
467
487
  <div class="app-dialog-actions">
468
- <button type="button" class="btn btn-secondary" id="displayNameCancel">Cancel</button>
469
- <button type="submit" class="btn btn-primary" id="displayNameSubmit">Save name</button>
488
+ <button type="button" class="ui-button btn btn-secondary" id="displayNameCancel">Cancel</button>
489
+ <button type="submit" class="ui-button btn btn-primary" id="displayNameSubmit">Save name</button>
470
490
  </div>
471
491
  </form>
472
492
  </dialog>
@@ -484,8 +504,8 @@
484
504
  </label>
485
505
  <p class="app-dialog-note" id="fileActionNote" hidden></p>
486
506
  <div class="app-dialog-actions">
487
- <button type="button" class="btn btn-secondary" id="fileActionCancel">Cancel</button>
488
- <button type="submit" class="btn btn-primary" id="fileActionSubmit">Create</button>
507
+ <button type="button" class="ui-button btn btn-secondary" id="fileActionCancel">Cancel</button>
508
+ <button type="submit" class="ui-button btn btn-primary" id="fileActionSubmit">Create</button>
489
509
  </div>
490
510
  </form>
491
511
  </dialog>
@@ -501,8 +521,8 @@
501
521
  <input type="text" class="input" id="gitCommitInput" name="gitCommitMessage" autocomplete="off" spellcheck="true" required>
502
522
  </label>
503
523
  <div class="app-dialog-actions">
504
- <button type="button" class="btn btn-secondary" id="gitCommitCancel">Cancel</button>
505
- <button type="submit" class="btn btn-primary" id="gitCommitSubmit">Commit staged changes</button>
524
+ <button type="button" class="ui-button btn btn-secondary" id="gitCommitCancel">Cancel</button>
525
+ <button type="submit" class="ui-button btn btn-primary" id="gitCommitSubmit">Commit staged changes</button>
506
526
  </div>
507
527
  </form>
508
528
  </dialog>
@@ -521,8 +541,8 @@
521
541
  Local file content and staged changes for this path will be discarded.
522
542
  </div>
523
543
  <div class="app-dialog-actions">
524
- <button class="btn btn-secondary" id="gitResetCancel" type="button">Cancel</button>
525
- <button class="btn btn-danger" id="gitResetSubmit" type="button">Reset File</button>
544
+ <button class="ui-button btn btn-secondary" id="gitResetCancel" type="button">Cancel</button>
545
+ <button class="ui-button btn btn-danger" id="gitResetSubmit" type="button">Reset File</button>
526
546
  </div>
527
547
  </form>
528
548
  </dialog>
@@ -533,7 +553,7 @@
533
553
  <h2 class="tab-lock-title" id="tabLockTitle">This vault is active in another tab</h2>
534
554
  <p class="tab-lock-copy" id="tabLockCopy">To avoid duplicate presence and chat, only one tab can stay connected at a time. Use the other tab, or take over the session here.</p>
535
555
  <div class="tab-lock-actions">
536
- <button type="button" class="btn btn-primary btn-lg" id="tabLockTakeoverBtn">Take over here</button>
556
+ <button type="button" class="ui-button btn btn-primary btn-lg" id="tabLockTakeoverBtn">Take over here</button>
537
557
  </div>
538
558
  </div>
539
559
  </div>