collabmd 0.1.27 → 0.1.30

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

@@ -167,13 +167,105 @@
 }
 
 .toolbar-overflow-toggle {
-  display: none;
+  display: inline-flex;
 }
 
 .toolbar-overflow-menu {
+  position: absolute;
+  top: calc(100% + 6px);
+  right: 0;
+  z-index: 14;
+  display: none;
+  width: min(240px, calc(100vw - 24px));
+  flex-direction: column;
+  align-items: stretch;
+  gap: 0;
+  padding: 4px;
+  border: 1px solid var(--color-border);
+  border-radius: 18px;
+  background: oklch(from var(--color-surface) l c h / 0.98);
+  box-shadow: var(--shadow-lg);
+  backdrop-filter: blur(12px);
+}
+
+.toolbar-right.is-overflow-open .toolbar-overflow-menu {
   display: flex;
-  align-items: center;
-  gap: var(--space-2);
+}
+
+.toolbar-overflow-menu .ui-toolbar-button,
+.toolbar-overflow-menu .toolbar-overflow-group-toggle {
+  width: 100%;
+}
+
+.toolbar-overflow-menu .ui-toolbar-button-label {
+  display: inline;
+  min-width: 0;
+  flex: 1;
+  text-align: left;
+}
+
+.toolbar-overflow-menu .ui-toolbar-button {
+  justify-content: flex-start;
+  min-height: 36px;
+  gap: 8px;
+  padding: 0 10px;
+  border-radius: 12px;
+}
+
+.toolbar-overflow-menu .toolbar-theme-button {
+  width: 100%;
+  min-width: 0;
+  padding: 0 10px;
+  background: var(--color-surface-offset);
+  color: var(--color-text);
+}
+
+.toolbar-overflow-menu .toolbar-theme-button:hover {
+  background: var(--color-surface-dynamic);
+}
+
+.toolbar-overflow-menu .toolbar-theme-button .ui-toolbar-button-label {
+  display: inline !important;
+}
+
+.toolbar-overflow-menu .toolbar-theme-button .toolbar-theme-state {
+  display: inline-flex !important;
+  margin-left: auto;
+}
+
+.toolbar-overflow-group {
+  display: flex;
+  flex-direction: column;
+}
+
+.toolbar-overflow-group-toggle {
+  list-style: none;
+}
+
+.toolbar-overflow-group-toggle::-webkit-details-marker {
+  display: none;
+}
+
+.toolbar-overflow-group-toggle::after {
+  content: '';
+  width: 8px;
+  height: 8px;
+  margin-left: auto;
+  border-right: 1.5px solid currentColor;
+  border-bottom: 1.5px solid currentColor;
+  transform: rotate(45deg);
+  transition: transform var(--transition-interactive);
+}
+
+.toolbar-overflow-group[open] .toolbar-overflow-group-toggle::after {
+  transform: rotate(-135deg);
+}
+
+.toolbar-overflow-submenu {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  padding: 2px 0 4px 14px;
 }
 
 .diff-mode-toggle,
@@ -224,6 +316,12 @@
   border-left: 1px solid var(--color-divider);
 }
 
+.markdown-toolbar .markdown-toolbar-group--mobile-only,
+.pane-header-actions .mobile-editor-find-btn,
+.toolbar-overflow-menu .toolbar-search-files-btn {
+  display: none !important;
+}
+
 .markdown-toolbar-block-trigger {
   display: inline-flex;
   align-items: center;

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

@@ -1,17 +1,18 @@
 /* ===== MOBILE / RESPONSIVE ===== */
 
 @media (max-width: 768px) {
-  .input,
+  input:not([type='checkbox']):not([type='radio']):not([type='range']),
+  textarea,
+  select,
+  .ui-input,
   .sidebar-search-input,
   .qs-input,
-  .chat-input {
+  .chat-input,
+  .editor-container .cm-editor,
+  .editor-container .cm-editor .cm-scroller {
     font-size: 16px;
   }
 
-  .editor-container .cm-editor {
-    font-size: 15px;
-  }
-
   .sidebar {
     position: fixed;
     top: 0;
@@ -129,6 +130,10 @@
     width: 100%;
   }
 
+  .toolbar-overflow-menu .toolbar-search-files-btn {
+    display: inline-flex !important;
+  }
+
   .toolbar-overflow-menu .ui-toolbar-button-label {
     display: inline;
     min-width: 0;
@@ -175,7 +180,7 @@
     color: var(--color-primary);
   }
 
-  .sidebar-close-btn {
+  .ui-icon-button.sidebar-close-btn {
     display: inline-flex;
   }
 
@@ -203,6 +208,53 @@
     flex: 1;
   }
 
+  .editor-pane {
+    position: relative;
+  }
+
+  .editor-pane > .pane-header {
+    position: sticky;
+    top: 0;
+    z-index: 8;
+    gap: var(--space-2);
+    padding-inline: var(--space-2);
+  }
+
+  .editor-pane > .pane-header .pane-header-meta {
+    flex: 1 1 auto;
+    gap: var(--space-2);
+    min-width: 0;
+    overflow: hidden;
+  }
+
+  .editor-pane > .pane-header .pane-label {
+    flex-shrink: 0;
+  }
+
+  .editor-pane > .pane-header .pane-label-meta {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .editor-pane > .pane-header .pane-header-actions {
+    flex-shrink: 0;
+    gap: 0;
+    min-width: 0;
+    margin-left: auto;
+  }
+
+  .editor-pane > .pane-header .ui-button--compact {
+    gap: 4px;
+    padding-inline: 6px;
+  }
+
+  .editor-pane > .pane-header .ui-action-label,
+  .editor-pane > .pane-header #wrapToggleLabel {
+    font-size: 11px;
+  }
+
   .preview-content {
     padding: var(--space-4);
   }
@@ -282,15 +334,29 @@
   }
 
   .markdown-toolbar {
+    position: sticky;
+    top: 28px;
+    z-index: 7;
     overflow-x: auto;
     flex-wrap: nowrap;
     scrollbar-width: thin;
   }
 
+  .markdown-toolbar .markdown-toolbar-group--mobile-only {
+    display: inline-flex !important;
+    margin-left: 0;
+    padding-left: 0;
+    border-left: none;
+  }
+
   .markdown-toolbar-popover {
     max-width: min(240px, calc(100vw - 24px));
   }
 
+  .pane-header-actions .mobile-editor-find-btn {
+    display: inline-flex !important;
+  }
+
   .outline-panel {
     position: absolute;
     inset: 0;
@@ -402,6 +468,30 @@
   }
 }
 
+@media (max-width: 480px) {
+  .editor-pane > .pane-header {
+    gap: var(--space-1);
+    padding-inline: var(--space-1);
+  }
+
+  .editor-pane > .pane-header .pane-header-meta {
+    gap: var(--space-1);
+  }
+
+  .editor-pane > .pane-header .pane-label-meta {
+    font-size: 11px;
+  }
+
+  .editor-pane > .pane-header .ui-button--compact {
+    padding-inline: 4px;
+  }
+
+  .editor-pane > .pane-header .ui-action-label,
+  .editor-pane > .pane-header #wrapToggleLabel {
+    font-size: 10px;
+  }
+}
+
 @media (min-width: 769px) {
   .mobile-view-toggle {
     display: none !important;

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

@@ -1,8 +1,14 @@
 /* ===== APP SHELL ===== */
 
 .app-shell {
+  position: fixed;
+  top: var(--app-viewport-offset-top, 0px);
+  right: 0;
+  left: 0;
   display: flex;
+  width: 100%;
   height: 100dvh;
+  height: var(--app-viewport-height, 100dvh);
   overflow: hidden;
 }
 

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

@@ -49,7 +49,7 @@
   margin-left: auto;
 }
 
-.sidebar-close-btn {
+.ui-icon-button.sidebar-close-btn {
   display: none;
 }
 

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

@@ -51,3 +51,77 @@
   content: '📄';
   font-size: var(--text-ui-sm);
 }
+
+.cm-panels-top {
+  border-bottom: 1px solid var(--color-divider);
+}
+
+.cm-panel.cm-search {
+  gap: var(--space-2);
+  align-items: center;
+  padding: var(--space-2);
+  background: oklch(from var(--color-surface) l c h / 0.98);
+  color: var(--color-text);
+  box-shadow: inset 0 -1px 0 var(--color-divider);
+  font-family: var(--font-body);
+}
+
+.cm-panel.cm-search label {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--color-text-muted);
+  font-size: var(--text-xs);
+  font-weight: 600;
+}
+
+.cm-panel.cm-search .cm-textfield {
+  min-height: 32px;
+  padding: 0 var(--space-2);
+  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);
+}
+
+.cm-panel.cm-search .cm-button {
+  min-height: 32px;
+  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-xs);
+  font-weight: 600;
+}
+
+.cm-panel.cm-search .cm-button:hover:not(:disabled),
+.cm-panel.cm-search .cm-button:focus-visible {
+  background: var(--color-surface-dynamic);
+  outline: none;
+}
+
+@media (max-width: 768px) {
+  .cm-panel.cm-search {
+    flex-wrap: wrap;
+    align-items: stretch;
+  }
+
+  .cm-panel.cm-search label {
+    flex: 1 1 100%;
+  }
+
+  .cm-panel.cm-search .cm-textfield {
+    width: 100%;
+    min-height: 40px;
+    font-size: 16px;
+  }
+
+  .cm-panel.cm-search .cm-button {
+    min-height: 40px;
+    padding: 0 12px;
+  }
+}

package/src/client/styles/primitives/controls.css

@@ -1,7 +1,6 @@
 /* ===== PRIMITIVES / CONTROLS ===== */
 
-.ui-button,
-.btn {
+.ui-button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -22,66 +21,55 @@
     box-shadow var(--transition-interactive);
 }
 
-.ui-button:active,
-.btn:active {
+.ui-button:active {
   transform: scale(0.97);
 }
 
-.ui-button--primary,
-.btn-primary {
+.ui-button--primary {
   background: var(--color-primary);
   color: var(--color-text-inverse);
 }
 
-.ui-button--primary:hover,
-.btn-primary:hover {
+.ui-button--primary:hover {
   background: var(--color-primary-hover);
 }
 
-.ui-button--secondary,
-.btn-secondary {
+.ui-button--secondary {
   background: var(--color-surface-2);
   color: var(--color-text);
   border-color: var(--color-border);
 }
 
-.ui-button--secondary:hover,
-.btn-secondary:hover {
+.ui-button--secondary:hover {
   background: var(--color-surface-dynamic);
 }
 
-.ui-button--danger,
-.btn-danger {
+.ui-button--danger {
   background: var(--color-error);
   color: var(--color-text-inverse);
 }
 
-.ui-button--danger:hover,
-.btn-danger:hover {
+.ui-button--danger:hover {
   filter: brightness(0.95);
 }
 
-.ui-button--ghost,
-.btn-ghost {
+.ui-button--ghost {
   background: transparent;
   color: var(--color-text-muted);
 }
 
-.ui-button--ghost:hover,
-.btn-ghost:hover {
+.ui-button--ghost:hover {
   background: var(--color-surface-offset);
   color: var(--color-text);
 }
 
-.ui-button--lg,
-.btn-lg {
+.ui-button--lg {
   min-height: var(--control-h-lg);
   padding: 0 var(--space-6);
   font-weight: 600;
 }
 
-.ui-button--compact,
-.btn-compact {
+.ui-button--compact {
   min-height: var(--control-h-xs);
   gap: var(--space-1);
   padding: 0 var(--space-2);
@@ -129,10 +117,17 @@
   height: 28px;
 }
 
+.ui-button--pill,
 .ui-pill-button {
   border-radius: var(--radius-full);
 }
 
+.ui-button > svg,
+.ui-icon-button > svg,
+.ui-segmented-btn > svg {
+  flex-shrink: 0;
+}
+
 .ui-segmented-control {
   display: inline-flex;
   gap: 2px;
@@ -186,7 +181,6 @@
 }
 
 .ui-button:disabled,
-.btn:disabled,
 .ui-icon-button:disabled,
 .ui-segmented-btn:disabled {
   opacity: 0.45;
@@ -194,8 +188,7 @@
   transform: none;
 }
 
-.ui-input,
-.input {
+.ui-input {
   width: 100%;
   min-height: var(--control-h-md);
   padding: 0 var(--space-3);
@@ -207,15 +200,13 @@
   transition: border-color var(--transition-interactive), box-shadow var(--transition-interactive);
 }
 
-.ui-input:focus,
-.input:focus {
+.ui-input:focus {
   outline: none;
   border-color: var(--color-primary);
   box-shadow: var(--shadow-focus);
 }
 
-.ui-input::placeholder,
-.input::placeholder {
+.ui-input::placeholder {
   color: var(--color-text-faint);
 }
 

package/src/client/styles/style.css

@@ -1,15 +1,11 @@
 @import './foundation/tokens.css';
 @import './foundation/themes.css';
 @import './foundation/utilities.css';
-@import './primitives/controls.css';
 @import './layout/overlays.css';
 @import './layout/sidebar.css';
 @import './layout/editor-page.css';
 @import './layout/shell.css';
-@import './components/navigation.css';
-@import './components/actions.css';
 @import './components/surfaces.css';
-@import './components/states.css';
 @import './components/scrollbars.css';
 @import './features/git.css';
 @import './features/diff.css';

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

@@ -0,0 +1,104 @@
+body[data-surface='drawio-editor'] {
+  background: var(--color-bg);
+}
+
+.drawio-shell {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+}
+
+.drawio-banner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-3);
+  min-height: 40px;
+  padding: var(--space-2) var(--space-3);
+  border-bottom: 1px solid var(--color-border);
+  background: var(--surface-overlay);
+}
+
+.drawio-banner-status {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  min-width: 0;
+}
+
+.drawio-banner-pill {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 24px;
+  padding: 0 var(--space-2);
+  border-radius: var(--radius-full);
+  background: var(--surface-accent-soft);
+  color: var(--color-primary);
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.drawio-banner-copy {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.drawio-banner-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+.drawio-toolbar-btn {
+  min-height: 30px;
+  padding: 0 10px;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-full);
+  background: var(--surface-overlay-soft);
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+}
+
+.drawio-toolbar-btn[hidden] {
+  display: none !important;
+}
+
+.drawio-toolbar-btn:disabled {
+  opacity: 0.6;
+  cursor: default;
+}
+
+.drawio-frame-shell {
+  position: relative;
+  flex: 1;
+  min-height: 0;
+}
+
+.drawio-frame {
+  width: 100%;
+  height: 100%;
+  border: 0;
+  background: transparent;
+}
+
+.drawio-frame.is-read-only {
+  pointer-events: none;
+}
+
+.drawio-loading,
+.drawio-error {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  padding: var(--space-6);
+  text-align: center;
+}
+
+.drawio-error {
+  color: var(--color-error);
+}

package/src/client/styles/surfaces/embedded-editor-base.css

@@ -0,0 +1,23 @@
+@import '../foundation/tokens.css';
+@import '../foundation/themes.css';
+@import '../base.css';
+
+html,
+body {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  overflow: hidden;
+}
+
+body[data-surface] {
+  font-family: var(--font-body);
+  font-size: var(--text-ui-sm);
+  color: var(--color-text);
+  background: var(--color-bg);
+}
+
+#root {
+  width: 100%;
+  height: 100%;
+}

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

@@ -0,0 +1,16 @@
+body[data-surface='excalidraw-editor'] {
+  background: transparent;
+}
+
+.loading-state {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: var(--color-text-muted);
+  font-size: var(--text-ui-md);
+}
+
+.loading-state.error {
+  color: var(--color-error);
+}