collabmd 0.1.44 → 0.1.46

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

@@ -0,0 +1,309 @@
+/* ===== DIFF / SPECIAL FILES ===== */
+
+.diff-special {
+  padding: var(--space-4);
+  border-top: 1px solid var(--color-divider);
+  background: var(--color-surface);
+}
+
+.diff-special-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--space-3);
+  margin-bottom: var(--space-3);
+}
+
+.diff-special-eyebrow {
+  display: block;
+  margin-bottom: 3px;
+  color: var(--color-primary);
+  font-size: var(--text-meta);
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.diff-special-title {
+  margin: 0;
+  color: var(--color-text);
+  font-size: var(--text-ui-sm);
+  font-weight: 700;
+}
+
+.diff-special-note,
+.diff-special-footnote {
+  color: var(--color-text-faint);
+  font-size: var(--text-meta);
+}
+
+.diff-special-note {
+  flex-shrink: 0;
+  font-family: var(--font-mono);
+}
+
+.diff-special-footnote {
+  margin: var(--space-3) 0 0;
+}
+
+.diff-media-grid,
+.diff-excalidraw-grid,
+.diff-drawio-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--space-3);
+}
+
+.diff-media-pane,
+.diff-excalidraw-pane,
+.diff-drawio-pane {
+  min-width: 0;
+  overflow: hidden;
+  border: 1px solid var(--color-divider);
+  border-radius: var(--radius-md);
+  background: var(--color-surface-offset);
+}
+
+.diff-media-pane-header,
+.diff-excalidraw-pane-header,
+.diff-drawio-pane-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-2);
+  min-height: 34px;
+  padding: 0 var(--space-3);
+  border-bottom: 1px solid var(--color-divider);
+}
+
+.diff-media-pane-label {
+  color: var(--color-text);
+  font-size: var(--text-label);
+  font-weight: 700;
+}
+
+.diff-media-pane-meta {
+  overflow: hidden;
+  color: var(--color-text-faint);
+  font-family: var(--font-mono);
+  font-size: var(--text-meta);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.diff-media-canvas {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 280px;
+  padding: var(--space-4);
+  background-color: var(--color-surface);
+  background-image: linear-gradient(45deg, color-mix(in oklab, var(--color-text) 5%, transparent) 25%, transparent 25%, transparent 75%, color-mix(in oklab, var(--color-text) 5%, transparent) 75%), linear-gradient(45deg, color-mix(in oklab, var(--color-text) 5%, transparent) 25%, transparent 25%, transparent 75%, color-mix(in oklab, var(--color-text) 5%, transparent) 75%);
+  background-position: 0 0, 8px 8px;
+  background-size: 16px 16px;
+}
+
+.diff-media-image {
+  display: block;
+  width: auto;
+  max-width: 100%;
+  max-height: 380px;
+  object-fit: contain;
+  border-radius: var(--radius-sm);
+  box-shadow: var(--shadow-md);
+}
+
+.diff-media-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-2);
+  color: var(--color-text-faint);
+  font-size: var(--text-meta);
+  text-align: center;
+}
+
+.diff-media-empty-icon {
+  display: grid;
+  width: 30px;
+  height: 30px;
+  place-items: center;
+  border: 1px solid var(--color-divider);
+  border-radius: 50%;
+  color: var(--color-text-muted);
+  font-size: var(--text-title-md);
+}
+
+.diff-file-header-kind {
+  margin-left: auto;
+  color: var(--color-text-muted);
+  font-family: var(--font-mono);
+  font-size: var(--text-meta);
+}
+
+.diff-scene-summary {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+  margin-bottom: var(--space-3);
+}
+
+.diff-scene-stat {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 5px;
+  padding: 5px 8px;
+  border-radius: var(--radius-sm);
+  background: var(--color-surface-offset);
+  font-family: var(--font-mono);
+  font-size: var(--text-meta);
+}
+
+.diff-scene-stat strong {
+  font-size: var(--text-ui-sm);
+}
+
+.diff-scene-stat--add strong {
+  color: var(--diff-add-text);
+}
+
+.diff-scene-stat--update strong {
+  color: var(--color-primary);
+}
+
+.diff-scene-stat--remove strong {
+  color: var(--diff-del-text);
+}
+
+.diff-excalidraw-preview {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 220px;
+  padding: var(--space-3);
+  background: var(--surface-embed-canvas);
+}
+
+.diff-excalidraw-preview svg {
+  display: block;
+  width: 100%;
+  height: 220px;
+}
+
+.diff-excalidraw-preview-loading,
+.diff-excalidraw-preview--empty,
+.diff-excalidraw-preview.is-error {
+  color: var(--color-text-faint);
+  font-size: var(--text-meta);
+}
+
+.diff-excalidraw-preview.is-error {
+  background: var(--color-surface-offset);
+}
+
+.diff-excalidraw-source {
+  border-top: 1px solid var(--color-divider);
+}
+
+.diff-excalidraw-source summary {
+  padding: 8px var(--space-3);
+  color: var(--color-text-muted);
+  cursor: pointer;
+  font-size: var(--text-meta);
+  font-weight: 600;
+}
+
+.diff-excalidraw-source summary:hover {
+  color: var(--color-text);
+}
+
+.diff-excalidraw-source pre {
+  max-height: 300px;
+  margin: 0;
+  padding: var(--space-3);
+  overflow: auto;
+  border-top: 1px solid var(--color-divider);
+  color: var(--color-text-muted);
+  font-family: var(--font-mono);
+  font-size: var(--text-meta);
+  line-height: 1.55;
+  white-space: pre;
+}
+
+.diff-excalidraw-diff .diff-load-full-btn {
+  margin-top: var(--space-3);
+}
+
+.diff-drawio-preview {
+  display: flex;
+  align-items: stretch;
+  justify-content: center;
+  min-height: 280px;
+  overflow: hidden;
+  background: var(--surface-embed-canvas);
+}
+
+.diff-drawio-preview .drawio-viewer-frame {
+  min-height: 280px;
+  cursor: default;
+}
+
+.diff-drawio-preview-loading,
+.diff-drawio-preview--empty,
+.diff-drawio-preview.is-error {
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  color: var(--color-text-faint);
+  font-size: var(--text-meta);
+}
+
+.diff-drawio-preview.is-error {
+  background: var(--color-surface-offset);
+}
+
+.diff-drawio-source {
+  border-top: 1px solid var(--color-divider);
+}
+
+.diff-drawio-source summary {
+  padding: 8px var(--space-3);
+  color: var(--color-text-muted);
+  cursor: pointer;
+  font-size: var(--text-meta);
+  font-weight: 600;
+}
+
+.diff-drawio-source summary:hover {
+  color: var(--color-text);
+}
+
+.diff-drawio-source pre {
+  max-height: 300px;
+  margin: 0;
+  padding: var(--space-3);
+  overflow: auto;
+  border-top: 1px solid var(--color-divider);
+  color: var(--color-text-muted);
+  font-family: var(--font-mono);
+  font-size: var(--text-meta);
+  line-height: 1.55;
+  white-space: pre;
+}
+
+@media (max-width: 768px) {
+  .diff-media-grid,
+  .diff-excalidraw-grid,
+  .diff-drawio-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .diff-special-header {
+    flex-direction: column;
+    gap: var(--space-1);
+  }
+
+  .diff-media-canvas {
+    min-height: 220px;
+  }
+}

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

@@ -94,20 +94,10 @@
   max-width: none;
 }
 
-.preview-content .mermaid-frame.is-pannable,
-.mermaid-maximized-root .mermaid-frame.is-pannable {
-  cursor: grab;
-}
-
-.preview-content .mermaid-frame.is-dragging,
-.mermaid-maximized-root .mermaid-frame.is-dragging {
-  cursor: grabbing;
-  user-select: none;
-}
-
-.preview-content .mermaid-frame svg,
-.mermaid-maximized-root .mermaid-frame svg {
-  display: block;
+.preview-content .mermaid-frame :is(text, tspan, foreignObject),
+.mermaid-maximized-root .mermaid-frame :is(text, tspan, foreignObject) {
+  cursor: text;
+  user-select: text;
 }
 
 body.mermaid-maximized-open {
@@ -181,25 +171,10 @@ body.mermaid-maximized-open::before {
   flex-shrink: 0;
 }
 
-.preview-content .plantuml-frame,
-.plantuml-maximized-root .plantuml-frame {
-  max-width: 100%;
-}
-
-.preview-content .plantuml-frame.is-pannable,
-.plantuml-maximized-root .plantuml-frame.is-pannable {
-  cursor: grab;
-}
-
-.preview-content .plantuml-frame.is-dragging,
-.plantuml-maximized-root .plantuml-frame.is-dragging {
-  cursor: grabbing;
-  user-select: none;
-}
-
-.preview-content .plantuml-frame svg,
-.plantuml-maximized-root .plantuml-frame svg {
-  display: block;
+.preview-content .plantuml-frame :is(text, tspan, foreignObject),
+.plantuml-maximized-root .plantuml-frame :is(text, tspan, foreignObject) {
+  cursor: text;
+  user-select: text;
 }
 
 body.plantuml-maximized-open {

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

@@ -133,6 +133,14 @@
   text-transform: uppercase;
 }
 
+.qs-scope {
+  padding: var(--space-2) var(--space-4);
+  border-bottom: 1px solid var(--color-divider);
+  color: var(--color-text-faint);
+  font-size: var(--text-meta);
+  line-height: 1.4;
+}
+
 .qs-results {
   min-height: 0;
   overflow-y: auto;

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

@@ -1,5 +1,11 @@
 /* ===== FOUNDATION / THEMES ===== */
 
+:root {
+  --pdf-highlight-bg: rgb(180 0 170 / 25%);
+  --pdf-highlight-selected-bg: rgb(0 100 0 / 25%);
+  --pdf-selection-bg: rgb(0 90 255 / 25%);
+}
+
 :root,
 [data-theme="light"] {
   --color-bg: #f6f8fa;

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

@@ -57,6 +57,7 @@
   --panel-outline-width: 220px;
 
   --toolbar-h: 48px;
+  --sidebar-width: 260px;
   --control-h-xs: 28px;
   --control-h-sm: 30px;
   --control-h-md: 36px;

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

@@ -181,6 +181,43 @@
   min-width: 0;
 }
 
+.toolbar-search-trigger {
+  flex-shrink: 0;
+  min-height: 30px;
+  padding-inline: var(--space-2);
+  border-color: var(--color-divider);
+  background: var(--color-surface-offset);
+  color: var(--color-text-muted);
+  box-shadow: none;
+}
+
+.toolbar-search-trigger:hover {
+  border-color: var(--color-border);
+  background: var(--color-surface-dynamic);
+  color: var(--color-text);
+}
+
+.toolbar-search-trigger > svg {
+  color: var(--color-primary);
+}
+
+.toolbar-search-label {
+  font-weight: 600;
+}
+
+.toolbar-search-kbd {
+  margin-left: var(--space-1);
+  padding: 2px 5px;
+  border: 1px solid var(--color-divider);
+  border-radius: var(--radius-xs);
+  background: var(--color-surface);
+  color: var(--color-text-faint);
+  font-family: var(--font-body);
+  font-size: var(--text-meta);
+  font-weight: 600;
+  line-height: 1.4;
+}
+
 .toolbar-room-name {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -196,6 +233,9 @@
 }
 
 .toolbar-center {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
   flex-shrink: 0;
 }
 

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

@@ -19,9 +19,16 @@
     left: 0;
     bottom: 0;
     z-index: 100;
+    width: min(var(--sidebar-width), calc(100vw - 32px));
+    min-width: min(var(--sidebar-width), calc(100vw - 32px));
+    max-width: min(var(--sidebar-width), calc(100vw - 32px));
     box-shadow: var(--shadow-lg);
   }
 
+  .sidebar-resizer {
+    display: none;
+  }
+
   .sidebar.collapsed {
     display: none;
   }
@@ -42,6 +49,10 @@
   }
 
   .toolbar-center {
+    gap: 0;
+  }
+
+  .toolbar-center .view-toggle {
     display: none;
   }
 
@@ -72,6 +83,25 @@
     font-size: var(--text-xs);
   }
 
+  .toolbar-search-trigger {
+    width: 28px;
+    min-width: 28px;
+    min-height: 28px;
+    padding: 0;
+    border-color: transparent;
+    background: transparent;
+  }
+
+  .toolbar-search-trigger:hover {
+    border-color: transparent;
+    background: var(--color-surface-offset);
+  }
+
+  .toolbar-search-label,
+  .toolbar-search-kbd {
+    display: none;
+  }
+
   .toolbar-badge {
     max-width: 68px;
     overflow: hidden;
@@ -419,7 +449,7 @@
     right: var(--space-2);
     left: var(--space-2);
     width: auto;
-    max-height: calc(100vh - var(--toolbar-h) - var(--space-6));
+    max-height: calc(var(--app-viewport-height, 100dvh) - var(--toolbar-h) - var(--space-6));
   }
 
   .chat-form {