collabmd 0.1.46 → 0.1.48

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

@@ -62,6 +62,7 @@
   align-items: baseline;
   gap: var(--space-3);
   min-width: 0;
+  overflow: hidden;
 }
 
 .pane-label {
@@ -76,6 +77,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,33 +175,6 @@
   overscroll-behavior: contain;
 }
 
-.preview-container.is-pdf-file-preview {
-  overflow-x: auto;
-}
-
-.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;
@@ -221,7 +198,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;
@@ -281,6 +259,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;
@@ -294,356 +273,111 @@
   flex-direction: column;
 }
 
-.image-file-preview-shell {
+.preview-content.is-html-file-preview [data-preview-render-host='true'] {
+  height: 100%;
+  min-height: 0;
+}
+
+.html-file-preview-shell {
+  position: relative;
   display: flex;
-  align-items: center;
-  justify-content: center;
+  flex: 1;
+  flex-direction: column;
   width: 100%;
-  min-height: 100%;
-  margin: 0;
+  min-width: 0;
+  min-height: 0;
+  height: 100%;
 }
 
-.image-file-preview-image {
-  max-width: min(100%, 1200px);
-  max-height: calc(100vh - 180px);
-  object-fit: contain;
+.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-surface);
+  background: var(--color-bg);
   box-shadow: var(--shadow-lg);
 }
 
-.pdf-file-preview-shell {
-  display: flex;
-  flex: 0 0 auto;
-  flex-direction: column;
-  width: 100%;
-  min-height: 100%;
-  margin: 0;
-  gap: var(--space-3);
+body.html-preview-maximized-open {
+  overflow: hidden;
 }
 
-.pdf-file-preview-toolbar {
-  position: sticky;
-  top: var(--space-3);
-  z-index: 2;
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--space-3);
-  width: min(100%, 960px);
-  min-height: 32px;
-  margin: 0 auto;
-  padding: var(--space-2) var(--space-3);
-  border: 1px solid var(--color-divider);
-  border-radius: var(--radius-lg);
-  background: var(--color-surface);
+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);
 }
 
-.pdf-file-preview-toolbar-start,
-.pdf-file-preview-zoom-controls {
-  display: inline-flex;
-  align-items: center;
-}
-
-.pdf-file-preview-toolbar-start {
+.html-file-preview-script-gate {
   display: flex;
-  flex: 1 1 auto;
-  min-width: 0;
   flex-wrap: wrap;
-  gap: var(--space-3);
-}
-
-.pdf-file-preview-zoom-controls {
-  gap: 4px;
-}
-
-.pdf-file-preview-zoom-button,
-.pdf-file-preview-back-button {
-  width: 28px;
-  min-width: 28px;
-  height: 28px;
-  padding: 0;
-  font-size: 16px;
-  font-weight: 700;
-  line-height: 1;
-}
-
-.pdf-file-preview-zoom-label {
-  min-width: 48px;
-  color: var(--color-text-muted);
-  font-size: var(--text-xs);
-  font-variant-numeric: tabular-nums;
-  font-weight: 600;
-  text-align: center;
-}
-
-.pdf-file-preview-status {
-  color: var(--color-text-muted);
-  font-size: var(--text-meta);
-  white-space: nowrap;
-}
-
-.pdf-file-preview-find-controls {
-  display: inline-flex;
-  min-width: 0;
   align-items: center;
-  gap: 4px;
-}
-
-.pdf-file-preview-find-input {
-  box-sizing: border-box;
-  width: min(190px, 24vw);
-  min-width: 120px;
-  height: 28px;
-  padding: 0 8px;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
-  background: var(--color-surface-offset);
+  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: inherit;
   font-size: var(--text-xs);
 }
 
-.pdf-file-preview-find-input:focus {
-  outline: none;
-  border-color: var(--color-primary);
-  box-shadow: var(--shadow-focus);
-}
-
-.pdf-file-preview-find-input::placeholder {
-  color: var(--color-text-faint);
-}
-
-.pdf-file-preview-find-status {
-  min-width: 48px;
-  color: var(--color-text-muted);
-  font-size: var(--text-xs);
-  font-variant-numeric: tabular-nums;
-  text-align: center;
-  white-space: nowrap;
-}
-
-.pdf-file-preview-find-button {
-  width: 28px;
-  min-width: 28px;
-  height: 28px;
-  padding: 0;
-  font-size: 20px;
-  line-height: 1;
-}
-
-.pdf-file-preview-download {
-  color: var(--color-primary);
-  font-size: var(--text-meta);
-  font-weight: 600;
+.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;
 }
 
-.pdf-file-preview-pages {
-  --pdf-page-width: min(100%, 960px);
-  touch-action: pan-x pan-y;
+.image-file-preview-shell {
   display: flex;
-  flex-direction: column;
-  align-items: flex-start;
+  align-items: center;
+  justify-content: center;
   width: 100%;
-  gap: var(--space-4);
-  padding: 0 var(--space-2) var(--space-8);
+  min-height: 100%;
+  margin: 0;
 }
 
-.pdf-page {
-  position: relative;
-  flex: 0 0 auto;
-  width: var(--pdf-page-width, min(100%, 960px));
-  max-width: none;
-  margin-inline: auto;
-  overflow: hidden;
-  border-radius: var(--radius-sm);
+.image-file-preview-image {
+  max-width: min(100%, 1200px);
+  max-height: calc(100vh - 180px);
+  object-fit: contain;
+  border-radius: var(--radius-lg);
   background: var(--color-surface);
   box-shadow: var(--shadow-lg);
-  --scale-factor: 1;
-  --user-unit: 1;
-  --total-scale-factor: calc(var(--scale-factor) * var(--user-unit));
-  --scale-round-x: 1px;
-  --scale-round-y: 1px;
-}
-
-.pdf-page > .page {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  margin: 0;
-  overflow: visible;
 }
 
-.pdf-page .canvasWrapper {
-  position: relative;
+.pdf-file-preview-viewer {
   width: 100%;
-  height: 100%;
+  height: calc(var(--app-viewport-height, 100dvh) - var(--toolbar-h) - 43px);
+  min-height: 320px;
   overflow: hidden;
-}
-
-.pdf-page-canvas {
-  position: absolute;
-  inset: 0;
-  z-index: 0;
-  display: block;
-  width: 100%;
-  height: 100%;
-  background: var(--color-surface);
-}
-
-.pdf-page .textLayer {
-  position: absolute;
-  inset: 0;
-  z-index: 1;
-  overflow: hidden;
-  color-scheme: only light;
-  text-align: initial;
-  opacity: 1;
-  line-height: 1;
-  letter-spacing: normal;
-  word-spacing: normal;
-  transform-origin: 0 0;
-  caret-color: CanvasText;
-}
-
-.pdf-page .annotationLayer {
-  position: absolute;
-  inset: 0;
-  z-index: 2;
-  pointer-events: none;
-  transform-origin: 0 0;
-}
-
-.pdf-page .annotationLayer section {
-  position: absolute;
-  box-sizing: border-box;
-  pointer-events: auto;
-}
-
-.pdf-page .annotationLayer :is(.linkAnnotation, .buttonWidgetAnnotation.pushButton) > a {
-  position: absolute;
-  inset: 0;
-  cursor: pointer;
-}
-
-.pdf-page .textLayer :is(span, br) {
-  position: absolute;
-  color: transparent;
-  white-space: pre;
-  cursor: text;
-  transform-origin: 0% 0%;
-  -webkit-user-select: text;
-  user-select: text;
-}
-
-.pdf-page .textLayer {
-  --min-font-size: 1;
-  --text-scale-factor: calc(var(--total-scale-factor) * var(--min-font-size));
-  --min-font-size-inv: calc(1 / var(--min-font-size));
-}
-
-.pdf-page .textLayer > :not(.markedContent),
-.pdf-page .textLayer .markedContent span:not(.markedContent) {
-  z-index: 1;
-  --font-height: 0;
-  font-size: calc(var(--text-scale-factor) * var(--font-height));
-  --scale-x: 1;
-  --rotate: 0deg;
-  transform: rotate(var(--rotate)) scaleX(var(--scale-x)) scale(var(--min-font-size-inv));
-}
-
-.pdf-page .textLayer .markedContent {
-  display: contents;
-}
-
-.pdf-page .textLayer .highlight {
-  margin: -1px;
-  padding: 1px;
-  border-radius: 4px;
-  background: var(--pdf-highlight-bg);
-}
-
-.pdf-page .textLayer .highlight.selected {
-  background: var(--pdf-highlight-selected-bg);
-  scroll-margin-top: 50px;
-}
-
-.pdf-page .textLayer .highlight.begin {
-  border-radius: 4px 0 0 4px;
-}
-
-.pdf-page .textLayer .highlight.middle {
-  border-radius: 0;
-}
-
-.pdf-page .textLayer .highlight.end {
-  border-radius: 0 4px 4px 0;
-}
-
-.pdf-page .textLayer ::selection {
-  background: var(--pdf-selection-bg);
-  color: transparent;
-}
-
-.pdf-page .textLayer .endOfContent {
-  position: absolute;
-  inset: 100% 0 0;
-  z-index: 0;
-  display: block;
-  cursor: default;
-  user-select: none;
-}
-
-.pdf-page .textLayer.selecting .endOfContent {
-  top: 0;
-}
-
-.pdf-file-preview-error,
-.pdf-file-preview-password-prompt {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: var(--space-3);
-  width: min(100%, 960px);
-  min-height: 240px;
-  margin: 0 auto;
-  padding: var(--space-6);
   border: 1px solid var(--color-divider);
   border-radius: var(--radius-lg);
-  color: var(--color-text-muted);
-  text-align: center;
-}
-
-.pdf-file-preview-password-prompt {
-  box-sizing: border-box;
-  align-items: stretch;
-  width: min(100%, 440px);
   background: var(--color-surface);
 }
 
-.pdf-file-preview-password-title,
-.pdf-file-preview-password-copy {
-  margin: 0;
-}
-
-.pdf-file-preview-password-title {
-  color: var(--color-text);
-  font-size: var(--text-lg);
-}
-
-.pdf-file-preview-password-field {
+.pdf-file-preview-error {
   display: grid;
-  gap: var(--space-2);
+  height: 100%;
+  min-height: 240px;
+  place-items: center;
+  padding: var(--space-6);
   color: var(--color-text-muted);
-  font-size: var(--text-meta);
-  text-align: left;
-}
-
-.pdf-file-preview-password-field .ui-input {
-  width: 100%;
+  text-align: center;
 }
 
 .preview-content.is-mermaid-file-preview .mermaid-shell,

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

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