collabmd 0.1.45 → 0.1.47

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/preview-markdown.css

@@ -1026,6 +1026,7 @@
 }
 
 .preview-content pre {
+  position: relative;
   max-width: 100%;
   margin: var(--space-4) 0;
   overflow-x: auto;
@@ -1049,6 +1050,30 @@
   overflow-wrap: normal;
 }
 
+.preview-content .preview-code-block {
+  position: relative;
+}
+
+.preview-content .preview-code-block pre 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;
+  top: calc(var(--space-2) + 1px);
+  right: var(--space-2);
+  background: color-mix(in oklab, var(--color-surface) 90%, transparent);
+  box-shadow: var(--shadow-sm);
+  backdrop-filter: blur(8px);
+}
+
 .preview-content .table-wrapper {
   margin: var(--space-4) 0;
   overflow-x: auto;

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

@@ -78,6 +78,12 @@
   color: var(--color-primary);
 }
 
+.qs-mode-tab:disabled {
+  color: var(--color-text-faint);
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
 .qs-overlay.visible .qs-modal {
   transform: translateY(0) scale(1);
 }
@@ -214,6 +220,8 @@
   max-width: 180px;
   overflow: hidden;
   color: var(--color-text-faint);
+  direction: rtl;
+  text-align: left;
   text-overflow: ellipsis;
   white-space: nowrap;
   font-size: var(--text-xs);

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;
@@ -135,6 +141,7 @@
   --color-text-muted: #9aa7b4;
   --color-text-faint: #687584;
   --color-text-inverse: #0b0f14;
+  --color-code-text: #abb2bf;
 
   --color-primary: #60a5fa;
   --color-primary-hover: #3b82f6;

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

@@ -217,6 +217,18 @@
   padding: var(--space-4);
 }
 
+.preview-content.is-pdf-file-preview {
+  position: relative;
+  display: flex;
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 100%;
+  height: 100%;
+  max-width: none;
+  margin: 0;
+  padding: var(--space-3);
+}
+
 .preview-content.is-base-file-preview {
   width: 100%;
   min-height: 100%;
@@ -236,7 +248,8 @@
   padding: var(--space-3);
 }
 
-.preview-content.is-drawio-file-preview {
+.preview-content.is-drawio-file-preview,
+.preview-content.is-structurizr-file-preview {
   position: relative;
   display: flex;
   box-sizing: border-box;
@@ -260,8 +273,10 @@
 }
 
 .preview-content.is-drawio-file-preview [data-preview-render-host='true'],
+.preview-content.is-structurizr-file-preview [data-preview-render-host='true'],
 .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-base-file-preview [data-preview-render-host='true'] {
   display: flex;
   flex: 1;
@@ -271,6 +286,10 @@
   min-height: 100%;
 }
 
+.preview-content.is-pdf-file-preview [data-preview-render-host='true'] {
+  flex-direction: column;
+}
+
 .image-file-preview-shell {
   display: flex;
   align-items: center;
@@ -289,6 +308,26 @@
   box-shadow: var(--shadow-lg);
 }
 
+.pdf-file-preview-viewer {
+  width: 100%;
+  height: calc(var(--app-viewport-height, 100dvh) - var(--toolbar-h) - 43px);
+  min-height: 320px;
+  overflow: hidden;
+  border: 1px solid var(--color-divider);
+  border-radius: var(--radius-lg);
+  background: var(--color-surface);
+}
+
+.pdf-file-preview-error {
+  display: grid;
+  height: 100%;
+  min-height: 240px;
+  place-items: center;
+  padding: var(--space-6);
+  color: var(--color-text-muted);
+  text-align: center;
+}
+
 .preview-content.is-mermaid-file-preview .mermaid-shell,
 .preview-content.is-plantuml-file-preview .plantuml-shell {
   flex: 1;

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

@@ -131,7 +131,7 @@
 }
 
 .sidebar-search-input::placeholder {
-  color: var(--color-text-faint);
+  color: var(--color-text-muted);
 }
 
 .sidebar-search-input:hover:not(:focus) {
@@ -144,6 +144,12 @@
   box-shadow: var(--shadow-focus);
 }
 
+.sidebar-search-status {
+  padding: 5px 2px 0;
+  color: var(--color-text-muted);
+  font-size: var(--text-caption);
+}
+
 @keyframes pulse-dot {
   0%,
   100% {
@@ -237,7 +243,7 @@ body.is-file-tree-dragging .file-tree-root-drop-zone {
   padding-top: 4px;
   padding-right: 8px;
   padding-bottom: 4px;
-  padding-left: calc(8px + var(--depth, 0) * 16px);
+  padding-left: calc(8px + var(--depth, 0) * 12px);
   border: none;
   border-radius: var(--radius-md);
   background: none;
@@ -266,14 +272,14 @@ body.is-file-tree-dragging * {
   position: absolute;
   top: 0;
   bottom: 0;
-  left: calc(8px + (var(--depth, 1) - 1) * 16px + 6px);
+  left: calc(8px + (var(--depth, 1) - 1) * 12px + 6px);
   width: 1px;
   background-color: var(--color-border);
   opacity: 0.2;
 }
 
 .file-tree-file {
-  padding-left: calc(8px + var(--depth, 0) * 16px + 18px);
+  padding-left: calc(8px + var(--depth, 0) * 12px + 18px);
 }
 
 .file-tree-item:hover {
@@ -316,8 +322,40 @@ body.is-file-tree-dragging * {
 }
 
 .file-tree-name {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.file-tree-search-result {
+  align-items: flex-start;
+  padding: 6px 8px;
+}
+
+.file-tree-search-result .file-tree-icon {
+  margin-top: 2px;
+}
+
+.file-tree-search-copy {
+  display: grid;
+  flex: 1 1 auto;
+  min-width: 0;
+  gap: 1px;
+}
+
+.file-tree-search-copy .file-tree-name,
+.file-tree-search-path {
   overflow: hidden;
   text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.file-tree-search-path {
+  color: var(--color-text-faint);
+  font-size: var(--text-caption);
+  font-weight: 400;
 }
 
 .file-tree-children {

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

@@ -29,6 +29,7 @@
 .editor-layout[data-view="preview"] .preview-content.is-drawio-file-preview,
 .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-mermaid-file-preview,
 .editor-layout[data-view="preview"] .preview-content.is-plantuml-file-preview {
   max-width: none;

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

@@ -1,7 +1,23 @@
 /* ===== OVERRIDES / HIGHLIGHTJS ===== */
 
-[data-theme="light"] .preview-content pre,
-[data-theme="light"] .preview-content pre code,
-[data-theme="light"] .hljs {
-  background: var(--color-surface) !important;
+[data-theme="light"] .preview-content pre {
+  border-color: color-mix(in oklab, var(--color-border) 78%, var(--color-primary) 22%);
+  background: color-mix(in oklab, var(--color-bg) 94%, var(--color-primary) 6%) !important;
+  box-shadow: var(--shadow-sm);
+}
+
+[data-theme="light"] .preview-content pre code {
+  background: transparent !important;
+  color: var(--color-text) !important;
+}
+
+[data-theme="dark"] .preview-content pre {
+  border-color: color-mix(in oklab, var(--color-border) 74%, var(--color-primary) 26%);
+  background: color-mix(in oklab, var(--color-bg) 88%, var(--color-primary) 12%) !important;
+  box-shadow: var(--shadow-elevated-soft);
+}
+
+[data-theme="dark"] .preview-content pre code {
+  background: transparent !important;
+  color: var(--color-code-text) !important;
 }

package/src/client/styles/style.css

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