collabmd 0.1.48 → 0.1.51

package/src/client/styles/features/preview-markdown.css

@@ -13,6 +13,25 @@
   line-height: 1.7;
 }
 
+.preview-content > :is(p, h1, h2, h3, h4, h5, h6, ul, ol, pre, blockquote, table, .table-wrapper, .frontmatter-block) {
+  content-visibility: auto;
+  contain-intrinsic-size: auto 4rem;
+}
+
+.preview-content img {
+  content-visibility: auto;
+  contain-intrinsic-size: auto 240px;
+}
+
+.preview-content > pre,
+.preview-content > table,
+.preview-content > .table-wrapper {
+  contain-intrinsic-size: auto 12rem;
+}
+
+
+
+
 .preview-content[data-render-phase='shell'] {
   color: var(--color-text-muted);
 }
@@ -1047,6 +1066,10 @@
   position: relative;
 }
 
+.preview-content .task-list-label {
+  cursor: pointer;
+}
+
 .preview-content .task-list-item input[type='checkbox'] {
   position: absolute;
   top: 0.5em;
@@ -1104,20 +1127,11 @@
   overflow-wrap: normal;
 }
 
-.preview-content .preview-code-block {
-  position: relative;
-}
-
-.preview-content .preview-code-block pre code {
+.preview-content pre:has(> .preview-code-copy-button) > code {
   padding-right: 84px;
 }
 
-.preview-content .preview-code-actions {
-  position: sticky;
-  top: 0;
-  z-index: 2;
-  height: 0;
-}
+
 
 .preview-content .preview-code-copy-button {
   position: absolute;

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

@@ -4,24 +4,33 @@
   position: fixed;
   inset: 0;
   z-index: 9999;
-  display: flex;
+  display: none;
+  width: 100%;
+  max-width: none;
+  height: 100%;
+  max-height: none;
+  margin: 0;
+  padding: min(16vh, 128px) 0 0;
+  border: 0;
   align-items: flex-start;
   justify-content: center;
-  padding-top: min(16vh, 128px);
-  background: var(--surface-scrim);
-  backdrop-filter: blur(2px);
+  background: transparent;
   opacity: 0;
-  visibility: hidden;
-  transition: opacity 120ms ease, visibility 120ms ease, display 120ms ease allow-discrete;
+  transition: opacity 120ms ease, display 120ms ease allow-discrete;
 }
 
-.qs-overlay.visible {
+.qs-overlay[open] {
+  display: flex;
   opacity: 1;
-  visibility: visible;
+}
+
+.qs-overlay::backdrop {
+  background: var(--surface-scrim);
+  backdrop-filter: blur(2px);
 }
 
 @starting-style {
-  .qs-overlay.visible {
+  .qs-overlay[open] {
     opacity: 0;
   }
 }
@@ -84,12 +93,12 @@
   opacity: 0.6;
 }
 
-.qs-overlay.visible .qs-modal {
+.qs-overlay[open] .qs-modal {
   transform: translateY(0) scale(1);
 }
 
 @starting-style {
-  .qs-overlay.visible .qs-modal {
+  .qs-overlay[open] .qs-modal {
     transform: translateY(-8px) scale(0.98);
   }
 }

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/themes.css

@@ -260,6 +260,7 @@
     --color-text-muted: #9aa7b4;
     --color-text-faint: #687584;
     --color-text-inverse: #0b0f14;
+    --color-code-text: #abb2bf;
     --color-primary: #60a5fa;
     --color-primary-hover: #3b82f6;
     --color-primary-active: #2563eb;
@@ -270,6 +271,7 @@
     --color-comment-strong: rgba(96, 165, 250, 0.16);
     --color-comment-text: #bfdbfe;
     --color-error: #f87171;
+    --color-danger: #f87171;
     --color-error-highlight: #2a1a1a;
     --color-success: #4ade80;
     --color-success-highlight: #1a2a1a;

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 {
@@ -241,31 +228,35 @@
 
 .toolbar-overflow-toggle {
   display: inline-flex;
+  anchor-name: --toolbar-overflow;
 }
 
 .toolbar-overflow-menu {
-  position: absolute;
-  top: calc(100% + 6px);
-  right: 0;
+  position: fixed;
+  inset: auto;
+  top: calc(anchor(--toolbar-overflow bottom) + 6px);
+  right: anchor(--toolbar-overflow right);
   z-index: 14;
   display: none;
   width: min(240px, calc(100vw - 24px));
-  flex-direction: column;
-  align-items: stretch;
-  gap: 0;
+  margin: 0;
   padding: 6px;
   border: 1px solid var(--color-border);
   border-radius: var(--radius-lg);
+  flex-direction: column;
+  align-items: stretch;
+  gap: 0;
   background: oklch(from var(--color-surface) l c h / 0.98);
   box-shadow: var(--shadow-lg);
   backdrop-filter: blur(12px);
+  position-try-fallbacks: flip-block, flip-inline;
 }
 
-.toolbar-right.is-overflow-open .toolbar-overflow-menu {
+.toolbar-overflow-menu:popover-open {
   display: flex;
 }
 
-.toolbar-overflow-menu .ui-toolbar-button,
+.toolbar-overflow-menu .ui-button--toolbar,
 .toolbar-overflow-menu .toolbar-overflow-group-toggle {
   width: 100%;
 }
@@ -277,7 +268,7 @@
   text-align: left;
 }
 
-.toolbar-overflow-menu .ui-toolbar-button {
+.toolbar-overflow-menu .ui-button--toolbar {
   justify-content: flex-start;
   min-height: 36px;
   gap: 8px;
@@ -403,6 +394,7 @@
   padding: 0 8px;
   border-radius: var(--radius-sm);
   white-space: nowrap;
+  anchor-name: --markdown-block-trigger;
 }
 
 .markdown-toolbar-block-trigger-label {
@@ -417,15 +409,24 @@
   transform: scale(0.9);
 }
 
-.markdown-toolbar.is-menu-open .markdown-toolbar-block-trigger {
+body:has(.markdown-toolbar-popover:popover-open) .markdown-toolbar-block-trigger {
   background: var(--color-surface-offset);
   color: var(--color-text);
 }
 
 .markdown-toolbar-popover {
-  position: absolute;
+  position: fixed;
+  inset: auto;
+  top: calc(anchor(--markdown-block-trigger bottom) + 6px);
+  left: anchor(--markdown-block-trigger left);
   z-index: 12;
   min-width: 176px;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  overflow: visible;
+  position-try-fallbacks: flip-block, flip-inline;
 }
 
 .markdown-toolbar-menu {

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;
@@ -145,28 +145,10 @@
   }
 
   .toolbar-overflow-menu {
-    position: absolute;
-    top: calc(100% + 6px);
-    right: 0;
-    z-index: 14;
-    display: none;
     width: min(212px, calc(100vw - 20px));
-    flex-direction: column;
-    align-items: stretch;
-    gap: 0;
-    padding: 6px;
-    border: 1px solid var(--color-border);
-    border-radius: var(--radius-lg);
-    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;
   }
 
-  .toolbar-overflow-menu .ui-toolbar-button,
+  .toolbar-overflow-menu .ui-button--toolbar,
   .toolbar-overflow-menu .chat-container {
     width: 100%;
   }
@@ -186,7 +168,7 @@
     display: inline !important;
   }
 
-  .toolbar-overflow-menu .ui-toolbar-button {
+  .toolbar-overflow-menu .ui-button--toolbar {
     justify-content: flex-start;
     min-height: 36px;
     gap: 8px;

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

@@ -7,6 +7,7 @@
   left: 0;
   display: flex;
   width: 100%;
+  /* Fallback first; runtime viewport measurements override it when available. */
   height: 100dvh;
   height: var(--app-viewport-height, 100dvh);
   overflow: hidden;
@@ -66,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);
@@ -471,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;
@@ -362,18 +451,21 @@ body.is-file-tree-dragging * {
   /* Children indentation handled by paddingLeft on items */
 }
 
-.file-action-sheet-backdrop {
-  position: fixed;
-  inset: 0;
-  z-index: 130;
+.file-action-sheet::backdrop {
   background: oklch(from var(--color-bg) l c h / 0.44);
+  backdrop-filter: blur(12px);
 }
 
 .file-action-sheet {
   position: fixed;
+  top: auto;
   right: var(--space-3);
   bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
   left: var(--space-3);
+  width: auto;
+  max-width: none;
+  max-height: none;
+  margin: 0;
   z-index: 131;
   display: flex;
   flex-direction: column;