collabmd 0.1.48 → 0.1.49

package/src/client/presentation/quick-switcher-text-search.js

@@ -7,20 +7,16 @@ export function formatMatchCount(count = 0, { truncated = false } = {}) {
 }
 
 export function flattenTextResults(payload = {}) {
-  const flattened = [];
-  (payload.files ?? []).forEach((fileGroup) => {
-    (fileGroup.snippets ?? []).forEach((snippet) => {
-      flattened.push({
-        column: snippet.column,
-        file: fileGroup.file,
-        kind: fileGroup.kind,
-        line: snippet.line,
-        matchLength: Math.max((snippet.matchEnd ?? 0) - (snippet.matchStart ?? 0), 0),
-        snippet,
-      });
-    });
-  });
-  return flattened;
+  return (payload.files ?? []).flatMap((fileGroup) => (
+    (fileGroup.snippets ?? []).map((snippet) => ({
+      column: snippet.column,
+      file: fileGroup.file,
+      kind: fileGroup.kind,
+      line: snippet.line,
+      matchLength: Math.max((snippet.matchEnd ?? 0) - (snippet.matchStart ?? 0), 0),
+      snippet,
+    }))
+  ));
 }
 
 export class QuickSwitcherTextSearchRunner {

package/src/client/styles/components/navigation.css

@@ -1,7 +1,6 @@
 /* ===== COMPONENTS / NAVIGATION ===== */
 
-.ui-button--toolbar,
-.ui-toolbar-button {
+.ui-button--toolbar {
   display: flex;
   align-items: center;
   gap: var(--space-1);

package/src/client/styles/features/agent-connection.css

@@ -0,0 +1,202 @@
+.agent-connection-dialog {
+  width: min(680px, calc(100vw - var(--space-6)));
+}
+
+#agentConnectionContent,
+.agent-connection-form,
+.agent-connection-section,
+.agent-connection-list {
+  display: grid;
+  gap: var(--space-3);
+}
+
+.agent-connection-section h3,
+.agent-connection-scopes legend {
+  font-size: var(--text-sm);
+  font-weight: 700;
+}
+
+.agent-connection-section code,
+.agent-connection-section pre,
+.agent-connection-details > code,
+.agent-connection-details pre {
+  overflow: auto;
+  padding: var(--space-3);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  background: var(--color-surface-offset);
+  color: var(--color-text);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: var(--text-xs);
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.agent-connection-section p,
+.agent-connection-note,
+.agent-connection-empty p,
+.agent-connection-status,
+.agent-connection-card span,
+.agent-connection-card small,
+.agent-connection-live,
+.agent-connection-details p,
+.agent-connection-step-header p,
+.agent-connection-steps span {
+  color: var(--color-text-muted);
+  font-size: var(--text-sm);
+  line-height: 1.5;
+}
+
+.agent-connection-status.is-error,
+.agent-connection-warning {
+  color: var(--color-error);
+}
+
+.agent-connection-empty {
+  display: grid;
+  gap: var(--space-2);
+  padding: var(--space-4);
+  border-radius: var(--radius-lg);
+  background: var(--color-surface-offset);
+}
+
+.agent-connection-empty strong,
+.agent-connection-step-header h3,
+.agent-connection-steps strong {
+  color: var(--color-text);
+  font-size: var(--text-sm);
+}
+
+.agent-connection-step-header {
+  display: grid;
+  gap: var(--space-1);
+}
+
+.agent-connection-step-header > span {
+  color: var(--color-primary);
+  font-size: var(--text-xs);
+  font-weight: 700;
+}
+
+.agent-connection-steps {
+  display: grid;
+  gap: var(--space-3);
+  margin: 0;
+  padding-left: var(--space-5);
+  color: var(--color-text-muted);
+  font-size: var(--text-sm);
+  line-height: 1.5;
+}
+
+.agent-connection-steps code {
+  color: var(--color-text);
+  font-size: var(--text-xs);
+}
+
+.agent-connection-steps--setup {
+  padding-left: var(--space-6);
+}
+
+.agent-connection-steps--setup > li {
+  padding-left: var(--space-1);
+}
+
+.agent-connection-steps--setup > li::marker {
+  color: var(--color-primary);
+  font-weight: 700;
+}
+
+.agent-connection-steps--setup li > div {
+  display: grid;
+  gap: var(--space-2);
+}
+
+.agent-connection-steps--setup .ui-button {
+  justify-self: start;
+  margin-top: var(--space-2);
+}
+
+.agent-connection-details {
+  display: grid;
+  gap: var(--space-3);
+  color: var(--color-text-muted);
+  font-size: var(--text-sm);
+}
+
+.agent-connection-details[open] {
+  padding-bottom: var(--space-1);
+}
+
+.agent-connection-details summary {
+  cursor: pointer;
+  font-weight: 500;
+}
+
+.agent-connection-details > :not(summary) {
+  margin-top: var(--space-3);
+}
+
+.agent-connection-card {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-3);
+  padding: var(--space-3);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  background: var(--color-surface-offset);
+}
+
+.agent-connection-card > div {
+  display: grid;
+  gap: var(--space-1);
+  min-width: 0;
+}
+
+.agent-connection-scopes {
+  display: grid;
+  gap: var(--space-2);
+  padding: var(--space-3);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+}
+
+.agent-connection-scopes label {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  color: var(--color-text);
+  font-size: var(--text-sm);
+}
+
+.agent-connection-actions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: var(--space-2);
+}
+
+.agent-connection-token {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+}
+
+@media (max-width: 640px) {
+  .agent-connection-card {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .agent-connection-actions {
+    display: grid;
+  }
+
+  .agent-connection-steps--setup .ui-button {
+    justify-self: stretch;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .agent-connection-dialog {
+    transition: none;
+  }
+}

package/src/client/styles/features/collaboration-chat.css

@@ -6,6 +6,7 @@
 
 .chat-toggle-btn {
   position: relative;
+  anchor-name: --chat-trigger;
 }
 
 .chat-toggle-btn.is-active {
@@ -35,13 +36,19 @@
 }
 
 .chat-panel {
-  display: flex;
+  top: calc(anchor(--chat-trigger bottom) + var(--space-2));
+  right: anchor(--chat-trigger right);
+  display: none;
   flex-direction: column;
   gap: var(--space-3);
   max-height: min(70vh, 520px);
   padding: var(--space-4);
 }
 
+.chat-panel:popover-open {
+  display: flex;
+}
+
 .chat-container > .chat-toast-container {
   position: fixed;
   top: calc(var(--toolbar-h) + var(--space-2));

package/src/client/styles/features/collaboration-dialogs.css

@@ -111,14 +111,29 @@
 .tab-lock-overlay {
   position: fixed;
   inset: 0;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  max-width: none;
+  max-height: none;
+  margin: 0;
   z-index: 1200;
-  display: grid;
   place-items: center;
   padding: var(--space-6);
+  border: none;
   background: oklch(from var(--color-bg) l c h / 0.86);
+  color: var(--color-text);
   backdrop-filter: blur(10px);
 }
 
+.tab-lock-overlay[open] {
+  display: grid;
+}
+
+.tab-lock-overlay::backdrop {
+  background: transparent;
+}
+
 .tab-lock-card {
   display: grid;
   gap: var(--space-4);

package/src/client/styles/features/collaboration-presence.css

@@ -137,31 +137,44 @@
   opacity: 0.85;
 }
 
+.user-avatar-overflow-trigger,
+.toolbar-presence-count {
+  anchor-name: --presence-trigger;
+}
+
 .user-avatar-overflow-trigger {
   background: var(--color-surface-dynamic);
   color: var(--color-text-muted);
 }
 
 .collaboration-popover {
-  position: absolute;
-  top: calc(100% + var(--space-2));
-  right: 0;
+  position: fixed;
+  inset: auto;
   z-index: 30;
   width: min(360px, calc(100vw - var(--space-6)));
+  margin: 0;
   border: 1px solid var(--color-border);
   border-radius: var(--radius-lg);
   background: var(--color-surface);
+  color: var(--color-text);
   box-shadow: var(--shadow-lg);
+  position-try-fallbacks: flip-block, flip-inline;
 }
 
 .presence-panel {
-  display: flex;
+  top: calc(anchor(--presence-trigger bottom) + var(--space-2));
+  right: anchor(--presence-trigger right);
+  display: none;
   flex-direction: column;
   gap: var(--space-2);
   max-height: min(72vh, 480px);
   padding: var(--space-3);
 }
 
+.presence-panel:popover-open {
+  display: flex;
+}
+
 .presence-panel-header {
   display: flex;
   align-items: flex-start;

package/src/client/styles/features/diff-toolbar.css

@@ -62,7 +62,7 @@
   gap: var(--space-2);
 }
 
-.diff-file-nav .ui-action-icon:disabled {
+.diff-file-nav .ui-icon-button--action:disabled {
   opacity: 0.3;
 }
 

package/src/client/styles/features/media-lightbox.css

@@ -3,12 +3,22 @@
 .image-lightbox-root {
   position: fixed;
   inset: 0;
+  width: 100%;
+  height: 100%;
+  max-width: none;
+  max-height: none;
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: transparent;
   z-index: 220;
-  display: grid;
-  place-items: center;
   pointer-events: auto;
 }
 
+.image-lightbox-root::backdrop {
+  background: transparent;
+}
+
 .image-lightbox-root[hidden] {
   display: none !important;
 }
@@ -67,7 +77,6 @@
 }
 
 .image-lightbox-btn {
-  min-width: 0;
   min-height: var(--control-target-min);
   min-width: var(--control-target-min);
   padding: var(--space-2) var(--space-3);

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/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/layout/editor-page.css

@@ -241,31 +241,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 +281,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 +407,7 @@
   padding: 0 8px;
   border-radius: var(--radius-sm);
   white-space: nowrap;
+  anchor-name: --markdown-block-trigger;
 }
 
 .markdown-toolbar-block-trigger-label {
@@ -417,15 +422,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/responsive.css

@@ -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;

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

@@ -362,18 +362,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;