collabmd 0.1.47 → 0.1.49

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;
@@ -62,6 +63,7 @@
   align-items: baseline;
   gap: var(--space-3);
   min-width: 0;
+  overflow: hidden;
 }
 
 .pane-label {
@@ -76,6 +78,9 @@
   color: var(--color-text-muted);
   font-family: var(--font-mono);
   font-size: var(--text-meta);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .resizer {
@@ -171,29 +176,6 @@
   overscroll-behavior: contain;
 }
 
-.preview-content {
-  position: relative;
-  min-width: 0;
-  max-width: var(--preview-content-max-width);
-  margin: 0 auto;
-  overflow: visible;
-  padding: var(--space-6) var(--space-6) var(--space-12);
-  color: var(--color-text);
-  font-family: var(--font-body);
-  font-size: var(--text-sm);
-  line-height: 1.7;
-}
-
-.preview-content[data-render-phase='shell'] {
-  color: var(--color-text-muted);
-}
-
-@media (min-width: 769px) {
-  .preview-content {
-    padding-bottom: calc(var(--space-12) + 96px);
-  }
-}
-
 .preview-content.is-excalidraw-file-preview {
   position: relative;
   display: flex;
@@ -217,7 +199,8 @@
   padding: var(--space-4);
 }
 
-.preview-content.is-pdf-file-preview {
+.preview-content.is-pdf-file-preview,
+.preview-content.is-html-file-preview {
   position: relative;
   display: flex;
   box-sizing: border-box;
@@ -277,6 +260,7 @@
 .preview-content.is-excalidraw-file-preview [data-preview-render-host='true'],
 .preview-content.is-image-file-preview [data-preview-render-host='true'],
 .preview-content.is-pdf-file-preview [data-preview-render-host='true'],
+.preview-content.is-html-file-preview [data-preview-render-host='true'],
 .preview-content.is-base-file-preview [data-preview-render-host='true'] {
   display: flex;
   flex: 1;
@@ -290,6 +274,75 @@
   flex-direction: column;
 }
 
+.preview-content.is-html-file-preview [data-preview-render-host='true'] {
+  height: 100%;
+  min-height: 0;
+}
+
+.html-file-preview-shell {
+  position: relative;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  width: 100%;
+  min-width: 0;
+  min-height: 0;
+  height: 100%;
+}
+
+.html-file-preview-shell.is-maximized {
+  position: fixed;
+  inset: var(--space-3);
+  z-index: 172;
+  width: auto;
+  height: auto;
+  padding: var(--space-3);
+  border-radius: var(--radius-lg);
+  background: var(--color-bg);
+  box-shadow: var(--shadow-lg);
+}
+
+body.html-preview-maximized-open {
+  overflow: hidden;
+}
+
+body.html-preview-maximized-open #htmlPreviewMaximize {
+  position: fixed;
+  top: var(--space-5);
+  right: var(--space-5);
+  z-index: 174;
+  background: var(--color-surface-raised);
+  box-shadow: var(--shadow-md);
+}
+
+.html-file-preview-script-gate {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-2);
+  margin-bottom: var(--space-2);
+  padding: var(--space-2);
+  border: 1px solid var(--border-warning-toast);
+  border-radius: var(--radius-md);
+  background: var(--surface-warning-soft);
+  color: var(--color-text);
+  font-size: var(--text-xs);
+}
+
+.html-file-preview-frame {
+  display: block;
+  flex: 1;
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  min-height: 0;
+  height: 100%;
+  border: 1px solid var(--color-divider);
+  border-radius: var(--radius-lg);
+  background: white;
+}
+
 .image-file-preview-shell {
   display: flex;
   align-items: center;

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;

package/src/client/styles/layout/view-modes.css

@@ -30,6 +30,7 @@
 .editor-layout[data-view="preview"] .preview-content.is-base-file-preview,
 .editor-layout[data-view="preview"] .preview-content.is-image-file-preview,
 .editor-layout[data-view="preview"] .preview-content.is-pdf-file-preview,
+.editor-layout[data-view="preview"] .preview-content.is-html-file-preview,
 .editor-layout[data-view="preview"] .preview-content.is-mermaid-file-preview,
 .editor-layout[data-view="preview"] .preview-content.is-plantuml-file-preview {
   max-width: none;
@@ -40,6 +41,7 @@
 }
 
 .editor-layout[data-view="preview"] .preview-content p:has(> .excalidraw-embed-placeholder:only-child),
+.editor-layout[data-view="preview"] .preview-content p:has(> .drawio-embed-placeholder:only-child),
 .editor-layout[data-view="preview"] .preview-content p:has(> .bases-embed-placeholder:only-child),
 .editor-layout[data-view="preview"] .preview-content p:has(> .video-embed-placeholder:only-child),
 .editor-layout[data-view="preview"] .preview-content p:has(> .mermaid-shell:only-child),

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

@@ -1,55 +1,67 @@
 /* ===== OVERRIDES / CODEMIRROR ===== */
 
+.editor-container .cm-content {
+  font-variant-ligatures: none;
+}
+
 .cm-tooltip-autocomplete {
+  width: min(420px, calc(100vw - 24px));
+  max-width: calc(100vw - 24px);
   overflow: hidden;
-  border: 1px solid var(--color-divider) !important;
-  border-radius: var(--radius-md) !important;
-  background: var(--color-surface) !important;
-  box-shadow: var(--shadow-md) !important;
+  border: 1px solid var(--color-border) !important;
+  border-radius: var(--radius-lg) !important;
+  background: oklch(from var(--color-surface) l c h / 0.98) !important;
+  box-shadow: var(--shadow-lg) !important;
+  backdrop-filter: blur(12px);
   font-family: var(--font-body);
-  font-size: var(--text-sm);
+  font-size: var(--text-ui-sm);
 }
 
 .cm-tooltip-autocomplete > ul {
   max-height: 240px !important;
-  padding: var(--space-1) 0;
+  padding: var(--space-1);
 }
 
 .cm-tooltip-autocomplete > ul > li {
   display: flex;
   align-items: center;
   gap: var(--space-2);
+  min-height: 36px;
   padding: var(--space-2) var(--space-3) !important;
+  border-radius: var(--radius-md);
   line-height: 1.4;
 }
 
 .cm-tooltip-autocomplete > ul > li[aria-selected] {
-  background: var(--color-primary) !important;
-  color: var(--color-text-inverse) !important;
+  background: var(--color-surface-offset) !important;
+  color: var(--color-text) !important;
+}
+
+.cm-tooltip-autocomplete .cm-completionIcon {
+  display: none;
 }
 
 .cm-tooltip-autocomplete .cm-completionLabel {
   flex: 1;
   overflow: hidden;
+  font-family: var(--font-body) !important;
+  font-weight: 600;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
 .cm-tooltip-autocomplete .cm-completionDetail {
+  max-width: 45%;
   margin-left: auto;
-  color: inherit;
-  opacity: 0.6;
+  overflow: hidden;
+  color: var(--color-text-faint);
+  direction: rtl;
+  text-align: left;
+  text-overflow: ellipsis;
   white-space: nowrap;
+  font-family: var(--font-body) !important;
   font-size: var(--text-xs);
-}
-
-.cm-tooltip-autocomplete > ul > li[aria-selected] .cm-completionDetail {
-  opacity: 0.85;
-}
-
-.cm-completionIcon-text::after {
-  content: '📄';
-  font-size: var(--text-ui-sm);
+  font-style: normal;
 }
 
 .cm-panels-top {

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

@@ -21,7 +21,7 @@
     box-shadow var(--transition-interactive);
 }
 
-.ui-button:active {
+.ui-button:not(:disabled):active {
   transform: scale(0.97);
 }
 
@@ -31,7 +31,7 @@
   box-shadow: var(--shadow-sm);
 }
 
-.ui-button--primary:hover {
+.ui-button--primary:not(:disabled):hover {
   background: var(--color-primary-hover);
   box-shadow: var(--shadow-md);
 }
@@ -42,7 +42,7 @@
   border-color: var(--color-border);
 }
 
-.ui-button--secondary:hover {
+.ui-button--secondary:not(:disabled):hover {
   background: var(--color-surface-offset);
   border-color: color-mix(in oklab, var(--color-border) 72%, var(--color-text-faint) 28%);
 }
@@ -52,7 +52,7 @@
   color: var(--color-text-inverse);
 }
 
-.ui-button--danger:hover {
+.ui-button--danger:not(:disabled):hover {
   filter: brightness(0.95);
 }
 
@@ -61,7 +61,7 @@
   color: var(--color-text-muted);
 }
 
-.ui-button--ghost:hover {
+.ui-button--ghost:not(:disabled):hover {
   background: var(--color-surface-offset);
   color: var(--color-text);
 }
@@ -109,7 +109,7 @@
     border-color var(--transition-interactive);
 }
 
-.ui-icon-button:hover {
+.ui-icon-button:not(:disabled):hover {
   background: var(--color-surface-offset);
   color: var(--color-text);
 }
@@ -120,8 +120,7 @@
   height: 28px;
 }
 
-.ui-button--pill,
-.ui-pill-button {
+.ui-button--pill {
   border-radius: var(--radius-full);
 }
 
@@ -171,7 +170,7 @@
   border-radius: var(--radius-full);
 }
 
-.ui-segmented-btn:hover {
+.ui-segmented-btn:not(:disabled):hover {
   color: var(--color-text-muted);
 }
 
@@ -204,11 +203,11 @@
   transition: border-color var(--transition-interactive), box-shadow var(--transition-interactive), background var(--transition-interactive);
 }
 
-.ui-input:hover:not(:focus) {
+.ui-input:not(:disabled, [readonly]):hover:not(:focus) {
   border-color: color-mix(in oklab, var(--color-border) 70%, var(--color-text-faint) 30%);
 }
 
-.ui-input:focus {
+.ui-input:not(:disabled):focus {
   outline: none;
   border-color: var(--color-primary);
   box-shadow: var(--shadow-focus);
@@ -218,15 +217,17 @@
   color: var(--color-text-faint);
 }
 
-.ui-badge {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 20px;
-  padding: 0 8px;
-  border-radius: var(--radius-full);
-  font-size: var(--text-meta);
-  font-weight: 600;
+.ui-input:disabled,
+.ui-input[readonly] {
+  border-color: var(--color-divider);
+  background: var(--color-surface-offset);
+  color: var(--color-text-muted);
+  cursor: not-allowed;
+  opacity: 0.72;
+}
+
+.ui-input[readonly] {
+  cursor: default;
 }
 
 .ui-pill {
@@ -240,37 +241,3 @@
   color: var(--color-text-muted);
   font-size: var(--text-meta);
 }
-
-.ui-panel {
-  border: var(--panel-border-width) solid var(--color-border);
-  border-radius: var(--radius-lg);
-  background: var(--color-surface);
-  box-shadow: var(--shadow-md);
-}
-
-.ui-toolbar-group {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--space-2);
-}
-
-.ui-list-item {
-  border-radius: var(--radius-md);
-  border: var(--panel-border-width) solid var(--color-divider);
-  background: var(--color-surface);
-}
-
-.ui-floating-dock {
-  border: var(--panel-border-width) solid var(--color-divider);
-  border-radius: calc(var(--radius-lg) + 2px);
-  background: var(--surface-overlay);
-  box-shadow: var(--shadow-lg);
-  backdrop-filter: blur(14px);
-}
-
-.ui-dialog-surface {
-  border: var(--panel-border-width) solid var(--color-border);
-  border-radius: var(--radius-xl);
-  background: var(--color-surface);
-  box-shadow: var(--shadow-lg);
-}

package/src/client/styles/style.css

@@ -21,6 +21,7 @@
 @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';

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

@@ -38,6 +38,7 @@ body[data-surface='excalidraw-editor'][data-document-mode='preview'] .disable-vi
   pointer-events: none;
 }
 
+.excalidraw-editor-toolbar,
 .diagram-comments-toolbar {
   display: inline-flex;
   align-items: center;
@@ -45,6 +46,47 @@ body[data-surface='excalidraw-editor'][data-document-mode='preview'] .disable-vi
   pointer-events: auto;
 }
 
+.excalidraw-presentation-toggle {
+  width: var(--control-h-md);
+  min-width: var(--control-h-md);
+  height: var(--control-h-md);
+}
+
+.excalidraw-presentation-navigation {
+  position: absolute;
+  z-index: 30;
+  bottom: var(--space-4);
+  left: 50%;
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--space-2);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  background: var(--color-surface-raised);
+  box-shadow: var(--shadow-md);
+  color: var(--color-text);
+  transform: translateX(-50%);
+}
+
+.excalidraw-presentation-navigation .diagram-comment-button {
+  width: var(--control-h-sm);
+  min-width: var(--control-h-sm);
+  height: var(--control-h-sm);
+  padding: 0;
+}
+
+.excalidraw-presentation-status {
+  min-width: 7rem;
+  max-width: min(20rem, 55vw);
+  color: var(--color-text-muted);
+  font-size: var(--text-ui-sm);
+  text-align: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .diagram-comment-button,
 .diagram-comment-close,
 .diagram-comment-back,