collabmd 0.1.43 → 0.1.45

package/src/client/styles/features/quick-switcher.css

@@ -133,6 +133,14 @@
   text-transform: uppercase;
 }
 
+.qs-scope {
+  padding: var(--space-2) var(--space-4);
+  border-bottom: 1px solid var(--color-divider);
+  color: var(--color-text-faint);
+  font-size: var(--text-meta);
+  line-height: 1.4;
+}
+
 .qs-results {
   min-height: 0;
   overflow-y: auto;

package/src/client/styles/foundation/tokens.css

@@ -57,6 +57,7 @@
   --panel-outline-width: 220px;
 
   --toolbar-h: 48px;
+  --sidebar-width: 260px;
   --control-h-xs: 28px;
   --control-h-sm: 30px;
   --control-h-md: 36px;

package/src/client/styles/layout/editor-page.css

@@ -181,6 +181,43 @@
   min-width: 0;
 }
 
+.toolbar-search-trigger {
+  flex-shrink: 0;
+  min-height: 30px;
+  padding-inline: var(--space-2);
+  border-color: var(--color-divider);
+  background: var(--color-surface-offset);
+  color: var(--color-text-muted);
+  box-shadow: none;
+}
+
+.toolbar-search-trigger:hover {
+  border-color: var(--color-border);
+  background: var(--color-surface-dynamic);
+  color: var(--color-text);
+}
+
+.toolbar-search-trigger > svg {
+  color: var(--color-primary);
+}
+
+.toolbar-search-label {
+  font-weight: 600;
+}
+
+.toolbar-search-kbd {
+  margin-left: var(--space-1);
+  padding: 2px 5px;
+  border: 1px solid var(--color-divider);
+  border-radius: var(--radius-xs);
+  background: var(--color-surface);
+  color: var(--color-text-faint);
+  font-family: var(--font-body);
+  font-size: var(--text-meta);
+  font-weight: 600;
+  line-height: 1.4;
+}
+
 .toolbar-room-name {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -196,6 +233,9 @@
 }
 
 .toolbar-center {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
   flex-shrink: 0;
 }
 

package/src/client/styles/layout/responsive.css

@@ -19,9 +19,16 @@
     left: 0;
     bottom: 0;
     z-index: 100;
+    width: min(var(--sidebar-width), calc(100vw - 32px));
+    min-width: min(var(--sidebar-width), calc(100vw - 32px));
+    max-width: min(var(--sidebar-width), calc(100vw - 32px));
     box-shadow: var(--shadow-lg);
   }
 
+  .sidebar-resizer {
+    display: none;
+  }
+
   .sidebar.collapsed {
     display: none;
   }
@@ -42,6 +49,10 @@
   }
 
   .toolbar-center {
+    gap: 0;
+  }
+
+  .toolbar-center .view-toggle {
     display: none;
   }
 
@@ -72,6 +83,25 @@
     font-size: var(--text-xs);
   }
 
+  .toolbar-search-trigger {
+    width: 28px;
+    min-width: 28px;
+    min-height: 28px;
+    padding: 0;
+    border-color: transparent;
+    background: transparent;
+  }
+
+  .toolbar-search-trigger:hover {
+    border-color: transparent;
+    background: var(--color-surface-offset);
+  }
+
+  .toolbar-search-label,
+  .toolbar-search-kbd {
+    display: none;
+  }
+
   .toolbar-badge {
     max-width: 68px;
     overflow: hidden;
@@ -419,7 +449,7 @@
     right: var(--space-2);
     left: var(--space-2);
     width: auto;
-    max-height: calc(100vh - var(--toolbar-h) - var(--space-6));
+    max-height: calc(var(--app-viewport-height, 100dvh) - var(--toolbar-h) - var(--space-6));
   }
 
   .chat-form {

package/src/client/styles/layout/shell.css

@@ -155,7 +155,6 @@
   --preview-floating-comments-width: var(--panel-comments-width);
   --preview-floating-outline-width: var(--panel-outline-width);
   --preview-content-max-width: var(--preview-content-width);
-  --preview-comment-rail-inset: 10px;
   position: relative;
   display: flex;
   flex: 1;
@@ -173,14 +172,12 @@
 }
 
 .preview-content {
-  --preview-comment-rail-reserved: 0px;
-  --preview-comment-rail-offset: 0px;
   position: relative;
   min-width: 0;
   max-width: var(--preview-content-max-width);
   margin: 0 auto;
   overflow: visible;
-  padding: var(--space-6) calc(var(--space-6) + var(--preview-comment-rail-reserved)) var(--space-12) var(--space-6);
+  padding: var(--space-6) var(--space-6) var(--space-12);
   color: var(--color-text);
   font-family: var(--font-body);
   font-size: var(--text-sm);
@@ -228,9 +225,15 @@
 
 .preview-content.is-plantuml-file-preview,
 .preview-content.is-mermaid-file-preview {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
   width: 100%;
   min-height: 100%;
+  height: 100%;
   max-width: none;
+  margin: 0;
+  padding: var(--space-3);
 }
 
 .preview-content.is-drawio-file-preview {
@@ -247,7 +250,13 @@
 
 .preview-content.is-mermaid-file-preview [data-preview-render-host='true'],
 .preview-content.is-plantuml-file-preview [data-preview-render-host='true'] {
-  min-height: 100%;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  width: 100%;
+  max-width: none;
+  min-width: 0;
+  min-height: 0;
 }
 
 .preview-content.is-drawio-file-preview [data-preview-render-host='true'],
@@ -282,8 +291,18 @@
 
 .preview-content.is-mermaid-file-preview .mermaid-shell,
 .preview-content.is-plantuml-file-preview .plantuml-shell {
-  min-height: 100%;
+  flex: 1;
+  min-height: 0;
+  height: auto;
   margin: 0;
+  grid-template-rows: auto minmax(0, 1fr);
+}
+
+.preview-content.is-mermaid-file-preview .mermaid-frame,
+.preview-content.is-plantuml-file-preview .plantuml-frame {
+  height: 100%;
+  min-height: 0;
+  max-height: none;
 }
 
 .preview-content.is-drawio-file-preview .drawio-embed,

package/src/client/styles/layout/sidebar.css

@@ -1,11 +1,12 @@
 /* ===== SIDEBAR ===== */
 
 .sidebar {
+  position: relative;
   display: flex;
   flex-direction: column;
-  width: 260px;
-  min-width: 260px;
-  max-width: 260px;
+  width: var(--sidebar-width);
+  min-width: var(--sidebar-width);
+  max-width: var(--sidebar-width);
   overflow: hidden;
   border-right: 1px solid var(--color-divider);
   background: var(--color-surface);
@@ -19,6 +20,36 @@
   border-right: none;
 }
 
+.sidebar.is-resizing {
+  transition: none;
+}
+
+.sidebar-resizer {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 5;
+  width: 8px;
+  padding: 0;
+  border: 0;
+  border-right: 2px solid transparent;
+  cursor: col-resize;
+  touch-action: none;
+  transition: border-color var(--transition-interactive);
+}
+
+.sidebar-resizer:hover,
+.sidebar-resizer:focus-visible,
+.sidebar.is-resizing .sidebar-resizer {
+  border-right-color: var(--color-primary);
+  opacity: 0.72;
+}
+
+.sidebar-resizer:focus-visible {
+  outline: none;
+}
+
 .sidebar-backdrop,
 .sidebar-backdrop[hidden] {
   display: none;
@@ -70,7 +101,8 @@
   font-weight: 600;
 }
 
-.sidebar-create-btn[aria-expanded='true'] {
+.sidebar-create-btn[aria-expanded='true'],
+.sidebar-options-btn[aria-expanded='true'] {
   border-color: var(--interactive-border);
   background: var(--interactive-surface);
   color: var(--color-primary);
@@ -328,8 +360,8 @@ body.is-file-tree-dragging * {
 .create-menu {
   position: fixed;
   z-index: 1010;
-  width: min(280px, calc(100vw - 16px));
-  padding: var(--space-2);
+  width: min(240px, calc(100vw - 24px));
+  padding: 6px;
   border: 1px solid var(--color-border);
   border-radius: var(--radius-lg);
   background: oklch(from var(--color-surface) l c h / 0.98);
@@ -340,7 +372,7 @@ body.is-file-tree-dragging * {
 .create-menu-group,
 .create-action-sheet-group,
 .create-action-sheet-header {
-  padding: 0 var(--space-2);
+  padding: 0 10px;
   color: var(--color-text-faint);
   font-size: var(--text-meta);
   font-weight: 700;
@@ -350,7 +382,7 @@ body.is-file-tree-dragging * {
 
 .create-menu-group:not(:first-child),
 .create-action-sheet-group:not(:first-child) {
-  margin-top: 8px;
+  margin-top: 10px;
 }
 
 .create-action-sheet-header {
@@ -360,10 +392,10 @@ body.is-file-tree-dragging * {
 .create-menu-item {
   display: flex;
   align-items: center;
-  gap: var(--space-2);
+  gap: 8px;
   width: 100%;
-  margin-top: 2px;
-  padding: var(--space-2);
+  min-height: 36px;
+  padding: 0 10px;
   border: none;
   border-radius: var(--radius-md);
   background: transparent;
@@ -384,19 +416,19 @@ body.is-file-tree-dragging * {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 18px;
-  min-width: 18px;
+  width: 16px;
+  min-width: 16px;
   color: var(--color-text-muted);
 }
 
 .create-menu-item-copy {
   display: grid;
-  gap: 2px;
+  gap: 1px;
   min-width: 0;
 }
 
 .create-menu-item-label {
-  font-size: var(--text-sm);
+  font-size: var(--text-xs);
   font-weight: 600;
 }
 

package/src/client/styles/overrides/codemirror.css

@@ -56,38 +56,174 @@
   border-bottom: 1px solid var(--color-divider);
 }
 
+.cm-panels-bottom {
+  border-top: 1px solid var(--color-divider);
+}
+
 .cm-panel.cm-search {
-  gap: var(--space-2);
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 8px;
+  width: 100%;
   align-items: center;
-  padding: var(--space-2);
-  background: oklch(from var(--color-surface) l c h / 0.98);
+  padding: 8px !important;
+  border-top: 0;
+  background: var(--color-surface);
   color: var(--color-text);
-  box-shadow: inset 0 -1px 0 var(--color-divider);
   font-family: var(--font-body);
 }
 
+.cm-panel.cm-search > * {
+  margin: 0 !important;
+}
+
 .cm-panel.cm-search label {
   display: inline-flex;
   align-items: center;
-  gap: 6px;
+  min-height: 22px;
+  gap: var(--space-1);
+  padding: 0 8px 0 6px;
+  border: 1px solid transparent;
+  border-radius: var(--radius-sm);
+  background: transparent;
   color: var(--color-text-muted);
-  font-size: var(--text-xs);
+  font-size: var(--text-meta) !important;
   font-weight: 600;
+  line-height: 1;
+  white-space: nowrap !important;
+  transition:
+    background var(--transition-interactive),
+    border-color var(--transition-interactive),
+    color var(--transition-interactive);
+}
+
+.cm-panel.cm-search label:hover {
+  background: var(--color-surface-offset);
+  color: var(--color-text);
+}
+
+.cm-panel.cm-search label:has(input:checked) {
+  border-color: var(--interactive-border);
+  background: var(--interactive-surface);
+  color: var(--color-primary);
+}
+
+.cm-panel.cm-search label input[type='checkbox'] {
+  width: 13px;
+  height: 13px;
+  margin: 0;
+  accent-color: var(--color-primary);
 }
 
 .cm-panel.cm-search .cm-textfield {
-  min-height: 32px;
-  padding: 0 var(--space-2);
+  width: auto;
+  min-width: 0;
+  min-height: var(--control-h-sm);
+  padding: 0 10px;
   border: 1px solid var(--color-border);
   border-radius: var(--radius-sm);
   background: var(--color-surface-offset);
   color: var(--color-text);
   font-family: var(--font-body);
-  font-size: var(--text-sm);
+  font-size: var(--text-ui-sm);
+  line-height: 1;
+  transition:
+    background var(--transition-interactive),
+    border-color var(--transition-interactive),
+    box-shadow var(--transition-interactive);
+}
+
+.cm-panel.cm-search .cm-textfield:hover:not(:focus) {
+  border-color: color-mix(in oklab, var(--color-border) 70%, var(--color-text-faint) 30%);
+}
+
+.cm-panel.cm-search .cm-textfield:focus {
+  outline: none;
+  border-color: var(--color-primary);
+  background: var(--color-surface);
+  box-shadow: var(--shadow-focus);
+}
+
+.cm-panel.cm-search .cm-textfield::placeholder {
+  color: var(--color-text-faint);
+}
+
+.cm-panel.cm-search > input[name='search'] {
+  order: 1;
+  flex: 1 1 120px;
+}
+
+.cm-panel.cm-search > button[name='next'] {
+  order: 2;
+}
+
+.cm-panel.cm-search > button[name='prev'] {
+  order: 3;
+}
+
+.cm-panel.cm-search > button[name='select'] {
+  order: 4;
+}
+
+.cm-panel.cm-search > button[name='close'] {
+  order: 5;
+}
+
+.cm-panel.cm-search > label:has(input[name='case']) {
+  order: 6;
+}
+
+.cm-panel.cm-search > label:has(input[name='re']) {
+  order: 7;
+}
+
+.cm-panel.cm-search > label:has(input[name='word']) {
+  order: 8;
+}
+
+.cm-panel.cm-search > br {
+  display: none;
+}
+
+.cm-panel.cm-search::before,
+.cm-panel.cm-search::after {
+  content: '';
+  flex: 0 0 100%;
+  width: 0;
+  height: 0;
+  min-height: 0;
+  padding: 0;
+  font-size: 0;
+  line-height: 0;
+}
+
+.cm-panel.cm-search::before {
+  order: 6;
+}
+
+.cm-panel.cm-search::after {
+  order: 9;
+}
+
+.cm-panel.cm-search > input[name='replace'] {
+  order: 10;
+  flex: 1 1 120px;
+}
+
+.cm-panel.cm-search > button[name='replace'] {
+  order: 11;
+}
+
+.cm-panel.cm-search > button[name='replaceAll'] {
+  order: 12;
 }
 
 .cm-panel.cm-search .cm-button {
-  min-height: 32px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 0;
+  min-height: var(--control-h-sm);
   padding: 0 10px;
   border: 1px solid var(--color-border);
   border-radius: var(--radius-sm);
@@ -96,26 +232,85 @@
   font-family: var(--font-body);
   font-size: var(--text-xs);
   font-weight: 600;
+  line-height: 1;
+  white-space: nowrap;
+  transition:
+    transform var(--transition-interactive),
+    background var(--transition-interactive),
+    border-color var(--transition-interactive),
+    color var(--transition-interactive);
 }
 
 .cm-panel.cm-search .cm-button:hover:not(:disabled),
 .cm-panel.cm-search .cm-button:focus-visible {
   background: var(--color-surface-dynamic);
-  outline: none;
+  border-color: color-mix(in oklab, var(--color-border) 70%, var(--color-text-faint) 30%);
+}
+
+.cm-panel.cm-search .cm-button:active {
+  transform: scale(0.97);
+}
+
+.cm-panel.cm-search > button[name='close'] {
+  position: static !important;
+  align-self: start;
+  width: 24px;
+  min-width: 24px;
+  height: 24px;
+  min-height: 24px;
+  padding: 0;
+  border: 1px solid transparent;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--color-text-faint);
+  font-size: 20px;
+  line-height: 1;
+  transition:
+    background var(--transition-interactive),
+    color var(--transition-interactive);
+}
+
+.cm-panel.cm-search > button[name='close']:hover,
+.cm-panel.cm-search > button[name='close']:focus-visible {
+  background: var(--color-surface-offset);
+  color: var(--color-text);
 }
 
 @media (max-width: 768px) {
   .cm-panel.cm-search {
-    flex-wrap: wrap;
-    align-items: stretch;
+    gap: 6px;
+    padding: 8px;
+  }
+
+  .cm-panel.cm-search > input[name='search'] {
+    flex: 0 0 calc(100% - 38px);
+  }
+
+  .cm-panel.cm-search > button[name='close'] {
+    order: 2;
+  }
+
+  .cm-panel.cm-search > button[name='next'] {
+    order: 3;
+  }
+
+  .cm-panel.cm-search > button[name='prev'] {
+    order: 4;
+  }
+
+  .cm-panel.cm-search > button[name='select'] {
+    order: 5;
+  }
+
+  .cm-panel.cm-search > input[name='replace'] {
+    flex: 0 0 100%;
   }
 
   .cm-panel.cm-search label {
-    flex: 1 1 100%;
+    min-height: 32px;
   }
 
   .cm-panel.cm-search .cm-textfield {
-    width: 100%;
     min-height: 40px;
     font-size: 16px;
   }
@@ -124,4 +319,11 @@
     min-height: 40px;
     padding: 0 12px;
   }
+
+  .cm-panel.cm-search > button[name='close'] {
+    width: 32px;
+    min-width: 32px;
+    height: 32px;
+    min-height: 32px;
+  }
 }

package/src/client/styles/style.css

@@ -5,17 +5,35 @@
 @import './layout/sidebar.css';
 @import './layout/editor-page.css';
 @import './layout/shell.css';
+@import './primitives/controls.css';
+@import './components/actions.css';
+@import './components/navigation.css';
+@import './components/states.css';
 @import './components/surfaces.css';
 @import './components/scrollbars.css';
-@import './features/git.css';
-@import './features/diff.css';
-@import './features/collaboration-ui.css';
-@import './features/preview-content.css';
-@import './features/comments.css';
-@import './features/preview-sidebars.css';
+@import './features/git-branch.css';
+@import './features/git-files.css';
+@import './features/git-history.css';
+@import './features/diff-toolbar.css';
+@import './features/diff-commit.css';
+@import './features/diff-lines.css';
+@import './features/collaboration-presence.css';
+@import './features/collaboration-chat.css';
+@import './features/collaboration-dialogs.css';
+@import './features/preview-markdown.css';
+@import './features/media-lightbox.css';
+@import './features/embedded-preview.css';
+@import './features/comments-drawer.css';
+@import './features/comment-overview.css';
+@import './features/comment-overlays.css';
+@import './features/comment-card.css';
+@import './features/comment-markdown.css';
+@import './features/backlinks.css';
+@import './features/outline.css';
 @import './layout/view-modes.css';
 @import './components/feedback.css';
 @import './layout/responsive.css';
-@import './overrides/vendor.css';
+@import './overrides/highlightjs.css';
+@import './overrides/codemirror.css';
 @import './features/quick-switcher.css';
 @import './features/diagram-preview.css';

package/src/client/styles/surfaces/excalidraw-editor.css

@@ -6,6 +6,31 @@ body[data-surface='excalidraw-editor'][data-document-mode='preview'] .disable-vi
   display: none !important;
 }
 
+.excalidraw-editor-shell {
+  position: relative;
+  width: 100%;
+  height: 100vh;
+}
+
+.excalidraw-authority-banner {
+  position: absolute;
+  z-index: 20;
+  top: var(--space-3);
+  left: 50%;
+  max-width: min(36rem, calc(100vw - (2 * var(--space-4))));
+  padding: var(--space-2) var(--space-3);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  background: var(--color-surface-raised);
+  box-shadow: var(--shadow-md);
+  color: var(--color-text-muted);
+  font-size: var(--text-ui-sm);
+  line-height: 1.4;
+  text-align: center;
+  transform: translateX(-50%);
+  pointer-events: none;
+}
+
 .loading-state {
   display: flex;
   align-items: center;