collabmd 0.1.49 → 0.1.51

package/src/client/styles/features/team-settings.css

@@ -0,0 +1,162 @@
+.team-settings-section {
+  margin-block-end: 1.25rem;
+}
+
+.team-settings-section h3 {
+  font-size: 0.95rem;
+  margin-block: 0 0.5rem;
+}
+
+.team-settings-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  list-style: none;
+  margin: 0;
+  max-block-size: 16rem;
+  overflow-block: auto;
+  padding: 0;
+}
+
+.team-settings-row {
+  align-items: center;
+  border: 1px solid var(--color-border);
+  border-radius: 8px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+}
+
+.team-settings-row-main {
+  display: flex;
+  flex: 1 1 14rem;
+  flex-direction: column;
+  min-inline-size: 0;
+}
+
+.team-settings-row-main span,
+.team-settings-row-main small {
+  color: var(--color-text-muted);
+  font-size: 0.8rem;
+  overflow-wrap: anywhere;
+}
+
+.team-settings-row-role {
+  align-items: center;
+  display: flex;
+  font-size: 0.8rem;
+  gap: 0.35rem;
+}
+
+.team-settings-row-role select {
+  inline-size: auto;
+}
+
+.team-settings-empty {
+  color: var(--color-text-muted);
+  font-size: 0.85rem;
+  margin: 0.25rem 0;
+}
+
+.team-settings-invite-form {
+  align-items: end;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin-block-start: 0.75rem;
+}
+
+.team-settings-invite-form .app-dialog-field {
+  flex: 1 1 10rem;
+}
+
+.team-settings-note {
+  color: var(--color-text-muted);
+  font-size: 0.8rem;
+  margin-block: 0.5rem 0;
+}
+
+.team-settings-status {
+  font-size: 0.9rem;
+  margin: 1rem 0;
+}
+
+.team-settings-status.is-error {
+  color: var(--color-danger);
+}
+
+.team-settings-actions {
+  display: flex;
+  justify-content: flex-end;
+  margin-block-start: 0.75rem;
+}
+
+.team-settings-live {
+  color: var(--color-text-muted);
+  font-size: 0.8rem;
+  margin: 0.5rem 0 0;
+  min-block-size: 1.1em;
+}
+
+.hosted-gate {
+  align-items: center;
+  background: var(--surface-scrim);
+  display: flex;
+  inset: 0;
+  justify-content: center;
+  padding: 1.5rem;
+  position: fixed;
+  z-index: 1000;
+}
+
+.hosted-gate.hidden {
+  display: none;
+}
+
+.hosted-gate-card {
+  background: var(--color-surface-raised);
+  border-radius: 12px;
+  box-shadow: var(--shadow-floating-soft);
+  color: inherit;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  inline-size: min(26rem, 100%);
+  padding: 1.5rem;
+}
+
+.hosted-gate-title {
+  font-size: 1.2rem;
+  margin: 0;
+}
+
+.hosted-gate-copy,
+.hosted-gate-status {
+  color: var(--color-text-muted);
+  font-size: 0.9rem;
+  margin: 0;
+}
+
+.hosted-gate-status.is-error {
+  color: var(--color-danger);
+}
+
+.hosted-gate-form {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.hosted-gate-live {
+  color: var(--color-text-muted);
+  font-size: 0.8rem;
+  margin: 0;
+  min-block-size: 1.1em;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .hosted-gate-card {
+    transition: opacity 120ms ease;
+  }
+}

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

@@ -25,8 +25,8 @@
   --text-title-sm: 15px;
   --text-title-md: 18px;
 
-  --font-body: 'Inter Variable', 'Inter', system-ui, sans-serif;
-  --font-display: 'Inter Variable', 'Inter', system-ui, sans-serif;
+  --font-body: system-ui, sans-serif;
+  --font-display: system-ui, sans-serif;
   --font-prose: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', 'Noto Sans', 'Liberation Sans', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
   --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', 'SF Mono', monospace;
 

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

@@ -15,19 +15,6 @@
   gap: var(--space-2);
   max-width: 340px;
   text-align: center;
-  animation: empty-state-rise 320ms cubic-bezier(0.16, 1, 0.3, 1);
-}
-
-@keyframes empty-state-rise {
-  from {
-    opacity: 0;
-    transform: translateY(8px);
-  }
-
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
 }
 
 .empty-state-logo {

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

@@ -103,6 +103,22 @@
   background: var(--color-surface-offset);
 }
 
+.file-context-search {
+  width: 100%;
+  margin-bottom: var(--space-1);
+  padding: var(--space-1) var(--space-2);
+  border: 1px solid var(--color-divider);
+  border-radius: var(--radius-sm);
+  background: var(--color-surface-offset);
+  color: var(--color-text);
+  font-size: var(--text-ui-sm);
+  outline: none;
+}
+
+.file-context-search:focus {
+  border-color: var(--color-primary);
+}
+
 .file-context-danger {
   color: var(--color-error);
 }

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

@@ -115,15 +115,15 @@
   }
 
   .toolbar-presence-cluster .user-avatar {
-    width: 22px;
-    height: 22px;
-    margin-left: -3px;
+    width: 24px;
+    height: 24px;
+    margin-left: 2px;
     border-width: 1.5px;
   }
 
   .toolbar-presence-cluster .user-avatar.is-local {
-    width: 22px;
-    min-width: 22px;
+    width: 24px;
+    min-width: 24px;
     margin-right: 0;
     padding: 0;
     gap: 0;

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

@@ -67,7 +67,7 @@
 }
 
 .pane-label {
-  color: var(--color-text-faint);
+  color: var(--color-text-muted);
   text-transform: uppercase;
   letter-spacing: 0.08em;
   font-size: var(--text-meta);
@@ -472,6 +472,25 @@ body.html-preview-maximized-open #htmlPreviewMaximize {
   height: 100% !important;
 }
 
+.drawio-embed.is-maximized {
+  position: fixed;
+  inset: var(--space-4);
+  z-index: 172;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  width: auto;
+  max-width: none;
+  margin: 0;
+}
+
+.preview-content.is-drawio-file-preview .drawio-embed.is-maximized {
+  width: auto !important;
+  height: auto !important;
+  min-height: 0;
+}
+
+
 .preview-shell {
   display: flex;
   align-items: center;

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

@@ -150,6 +150,48 @@
   font-size: var(--text-caption);
 }
 
+.vault-switcher-button {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  width: 100%;
+  min-height: var(--control-h-sm);
+  padding: var(--space-1) var(--space-3);
+  border: 1px solid var(--color-divider);
+  border-radius: var(--radius-md);
+  background: var(--color-surface-offset);
+  color: var(--color-text);
+  font-size: var(--text-xs);
+  font-weight: 600;
+}
+
+.vault-switcher-button:hover {
+  background: var(--color-surface-offset-2);
+}
+
+.vault-switcher-button:focus {
+  border-color: var(--color-primary);
+  background: var(--color-surface);
+  box-shadow: var(--shadow-focus);
+  outline: none;
+}
+
+.vault-switcher-name {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-align: left;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.vault-switcher-icon,
+.vault-switcher-chevron {
+  display: inline-flex;
+  flex: none;
+  color: var(--color-text-muted);
+}
+
 @keyframes pulse-dot {
   0%,
   100% {
@@ -252,6 +294,8 @@ body.is-file-tree-dragging .file-tree-root-drop-zone {
   cursor: pointer;
   user-select: none;
   text-overflow: ellipsis;
+  content-visibility: auto;
+  contain-intrinsic-size: auto 28px;
   transition: background var(--transition-interactive), color var(--transition-interactive);
   font-family: var(--font-body);
   font-size: var(--text-ui-sm);
@@ -307,8 +351,18 @@ body.is-file-tree-dragging * {
   font-weight: 600;
 }
 
-.file-tree-chevron {
+.file-tree-chevron,
+.file-tree-icon {
   flex-shrink: 0;
+  width: 14px;
+  height: 14px;
+  background-color: currentColor;
+  -webkit-mask: var(--file-tree-glyph) center / contain no-repeat;
+  mask: var(--file-tree-glyph) center / contain no-repeat;
+}
+
+.file-tree-chevron {
+  --file-tree-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");
   transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
 }
 
@@ -316,11 +370,46 @@ body.is-file-tree-dragging * {
   transform: rotate(90deg);
 }
 
-.file-tree-icon {
-  flex-shrink: 0;
+.file-tree-dir .file-tree-icon {
+  --file-tree-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath 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'/%3E%3C/svg%3E");
+}
+
+.file-tree-file .file-tree-icon {
   opacity: 0.5;
+  --file-tree-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3C/svg%3E");
+}
+
+.file-tree-file[data-kind='base'] .file-tree-icon {
+  --file-tree-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M7 4h7l5 5v11a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z'/%3E%3Cpath d='M14 4v5h5'/%3E%3Cpath d='M8 13h8'/%3E%3Cpath d='M8 17h6'/%3E%3Cpath d='M8 9h3'/%3E%3C/svg%3E");
 }
 
+.file-tree-file[data-kind='drawio'] .file-tree-icon,
+.file-tree-file[data-kind='plantuml'] .file-tree-icon,
+.file-tree-file[data-kind='structurizr'] .file-tree-icon {
+  --file-tree-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='4' width='7' height='6' rx='1'/%3E%3Crect x='14' y='4' width='7' height='6' rx='1'/%3E%3Crect x='8.5' y='14' width='7' height='6' rx='1'/%3E%3Cpath d='M10 7h4'/%3E%3Cpath d='M17.5 10v2.5'/%3E%3Cpath d='M6.5 10v2.5'/%3E%3Cpath d='M6.5 12.5h11'/%3E%3C/svg%3E");
+}
+
+.file-tree-file[data-kind='excalidraw'] .file-tree-icon {
+  color: var(--color-primary);
+  --file-tree-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M12 19l7-7 3 3-7 7-3-3z'/%3E%3Cpath d='M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z'/%3E%3Cpath d='M2 2l7.586 7.586'/%3E%3Ccircle cx='11' cy='11' r='2'/%3E%3C/svg%3E");
+}
+
+.file-tree-file[data-kind='image'] .file-tree-icon {
+  --file-tree-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Ccircle cx='9' cy='10' r='1.5'/%3E%3Cpath d='m21 16-5-5L7 20'/%3E%3Cpath d='m14 14 2 2'/%3E%3C/svg%3E");
+}
+
+.file-tree-file[data-kind='pdf'] .file-tree-icon {
+  color: var(--color-danger);
+  --file-tree-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cpath d='M8 15h8'/%3E%3Cpath d='M8 18h5'/%3E%3C/svg%3E");
+}
+
+.file-tree-file[data-kind='mermaid'] .file-tree-icon {
+  color: oklch(from var(--color-primary) calc(l * 0.96) calc(c * 0.86) 215);
+  --file-tree-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath 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'/%3E%3Cpath 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'/%3E%3Cpath d='M8 10.5h8'/%3E%3Cpath d='M8 13.5h8'/%3E%3Cpath d='M10 8.5v7'/%3E%3Cpath d='M14 8.5v7'/%3E%3C/svg%3E");
+}
+
+
+
 .file-tree-name {
   flex: 1 1 auto;
   min-width: 0;

package/src/client/styles/style.css

@@ -1,3 +1,5 @@
+@import './base.css';
+
 @import './foundation/tokens.css';
 @import './foundation/themes.css';
 @import './foundation/utilities.css';
@@ -11,31 +13,13 @@
 @import './components/states.css';
 @import './components/surfaces.css';
 @import './components/scrollbars.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/diff-special.css';
 @import './features/collaboration-presence.css';
 @import './features/collaboration-chat.css';
 @import './features/collaboration-dialogs.css';
 @import './features/agent-connection.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/team-settings.css';
 @import './features/outline.css';
 @import './layout/view-modes.css';
 @import './components/feedback.css';
 @import './layout/responsive.css';
-@import './overrides/highlightjs.css';
 @import './overrides/codemirror.css';
-@import './features/quick-switcher.css';
-@import './features/diagram-preview.css';