collabmd 0.1.45 → 0.1.46

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

@@ -171,6 +171,10 @@
   overscroll-behavior: contain;
 }
 
+.preview-container.is-pdf-file-preview {
+  overflow-x: auto;
+}
+
 .preview-content {
   position: relative;
   min-width: 0;
@@ -217,6 +221,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 +252,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 +277,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 +290,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 +312,340 @@
   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);
+}
+
+.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);
+  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 {
+  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);
+  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;
+}
+
+.pdf-file-preview-pages {
+  --pdf-page-width: min(100%, 960px);
+  touch-action: pan-x pan-y;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  width: 100%;
+  gap: var(--space-4);
+  padding: 0 var(--space-2) var(--space-8);
+}
+
+.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);
+  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;
+  width: 100%;
+  height: 100%;
+  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 {
+  display: grid;
+  gap: var(--space-2);
+  color: var(--color-text-muted);
+  font-size: var(--text-meta);
+  text-align: left;
+}
+
+.pdf-file-preview-password-field .ui-input {
+  width: 100%;
+}
+
 .preview-content.is-mermaid-file-preview .mermaid-shell,
 .preview-content.is-plantuml-file-preview .plantuml-shell {
   flex: 1;

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/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';

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

@@ -31,6 +31,300 @@ body[data-surface='excalidraw-editor'][data-document-mode='preview'] .disable-vi
   pointer-events: none;
 }
 
+.diagram-comments-overlay {
+  position: absolute;
+  z-index: 25;
+  inset: 0;
+  pointer-events: none;
+}
+
+.diagram-comments-toolbar {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  pointer-events: auto;
+}
+
+.diagram-comment-button,
+.diagram-comment-close,
+.diagram-comment-back,
+.diagram-comment-marker {
+  border: 0;
+  font: inherit;
+  cursor: pointer;
+}
+
+.diagram-comment-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-2);
+  min-height: var(--control-h-sm);
+  padding: 0 var(--space-3);
+  border: 1px solid transparent;
+  border-radius: var(--radius-md);
+  background: transparent;
+  color: var(--color-text);
+  box-shadow: none;
+  transition: transform var(--transition-interactive), background var(--transition-interactive), border-color var(--transition-interactive), color var(--transition-interactive);
+}
+
+.diagram-comment-button:hover:not(:disabled),
+.diagram-comment-back:hover {
+  border-color: var(--color-comment);
+}
+
+.diagram-comment-button:hover:not(:disabled),
+.diagram-comment-button.is-active {
+  background: var(--color-surface-raised);
+}
+
+.diagram-comment-button:active:not(:disabled),
+.diagram-comment-add:active:not(:disabled) {
+  transform: translateY(1px);
+}
+
+.diagram-comment-button:focus-visible,
+.diagram-comment-add:focus-visible,
+.diagram-comment-close:focus-visible,
+.diagram-comment-back:focus-visible,
+.diagram-comment-marker:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
+}
+
+.diagram-comment-icon {
+  width: 15px;
+  height: 15px;
+  flex: 0 0 auto;
+}
+
+.diagram-comments-toolbar .diagram-comment-button,
+.diagram-comments-toolbar .diagram-comment-add {
+  position: relative;
+}
+
+.diagram-comment-count {
+  position: absolute;
+  top: -4px;
+  right: -4px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  min-width: 1.125rem;
+  height: 1.125rem;
+  padding: 0 0.25rem;
+  border: 2px solid var(--color-surface);
+  border-radius: var(--radius-full);
+  background: var(--color-comment);
+  color: var(--color-primary-contrast);
+  font-family: inherit;
+  font-size: var(--text-caption);
+  font-variant-numeric: tabular-nums;
+  font-weight: 700;
+  line-height: 1;
+  text-align: center;
+  pointer-events: none;
+}
+
+.diagram-comment-add {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--control-h-sm);
+  min-width: var(--control-h-sm);
+  height: var(--control-h-sm);
+  padding: 0;
+  border: 1px solid var(--border-comment-soft);
+  border-radius: var(--radius-md);
+  background: var(--color-comment-soft);
+  color: var(--color-comment-text);
+  cursor: pointer;
+  transition: transform var(--transition-interactive), background var(--transition-interactive), border-color var(--transition-interactive), color var(--transition-interactive);
+}
+
+.diagram-comment-add:hover:not(:disabled) {
+  border-color: var(--border-comment-active);
+  background: var(--surface-comment-offset-active);
+}
+
+.diagram-comment-button.is-primary {
+  border-color: var(--color-primary);
+  background: var(--color-primary);
+  color: var(--color-primary-contrast);
+}
+
+.diagram-comment-button.is-danger {
+  color: var(--color-error);
+}
+
+.diagram-comment-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.diagram-comment-add:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.diagram-comment-markers {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+
+.diagram-comment-marker {
+  position: absolute;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: 2px solid var(--color-surface);
+  border-radius: 50%;
+  background: var(--color-comment);
+  color: var(--color-primary-contrast);
+  box-shadow: var(--shadow-accent-ring);
+  pointer-events: auto;
+  transform: translate(-50%, -50%);
+}
+
+.diagram-comment-marker.is-active {
+  box-shadow: var(--shadow-accent-ring-strong);
+}
+
+.diagram-comments-drawer {
+  position: absolute;
+  top: 4.5rem;
+  right: var(--space-3);
+  bottom: var(--space-3);
+  display: flex;
+  flex-direction: column;
+  width: min(22rem, calc(100vw - (2 * var(--space-3))));
+  border: 1px solid var(--color-divider);
+  border-radius: var(--radius-lg);
+  background: var(--color-surface);
+  box-shadow: var(--shadow-lg);
+  color: var(--color-text);
+  pointer-events: auto;
+  overflow: hidden;
+}
+
+.diagram-comments-drawer-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--space-3);
+  border-bottom: 1px solid var(--color-divider);
+  background: var(--color-surface);
+}
+
+.diagram-comments-drawer-header-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--space-1);
+}
+
+.diagram-comment-close {
+  width: 28px;
+  height: 28px;
+  border-radius: var(--radius-full);
+  background: transparent;
+  color: var(--color-text-muted);
+  font-size: 22px;
+}
+
+.diagram-comments-drawer-content {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: var(--space-3);
+  padding: var(--space-3);
+  overflow: auto;
+}
+
+.diagram-comment-message-body {
+  margin: 0;
+  color: var(--color-text-muted);
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.diagram-comment-message-meta {
+  color: var(--color-comment-text);
+  font-weight: 650;
+}
+
+.diagram-comments-drawer-content.is-list {
+  gap: 0;
+  padding: var(--space-2) var(--space-2) var(--space-4);
+}
+
+.diagram-comment-anchor-label {
+  margin: 0;
+  color: var(--color-text-muted);
+  font-size: var(--text-ui-sm);
+}
+
+.diagram-comment-back {
+  align-self: flex-start;
+  padding: 0;
+  background: transparent;
+  color: var(--color-comment-text);
+}
+
+.diagram-comment-messages {
+  display: grid;
+  gap: var(--space-2);
+}
+
+.diagram-comment-message {
+  padding: var(--space-3);
+  border: 1px solid var(--border-comment-soft);
+  border-radius: var(--radius-md);
+  background: var(--color-surface-2);
+}
+
+.diagram-comment-form {
+  display: grid;
+  gap: var(--space-3);
+}
+
+.diagram-comment-input {
+  width: 100%;
+  box-sizing: border-box;
+  resize: vertical;
+  padding: var(--space-2) var(--space-3);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  background: var(--color-surface);
+  color: var(--color-text);
+  font: inherit;
+}
+
+.diagram-comment-input:focus {
+  border-color: var(--color-primary);
+  outline: none;
+  box-shadow: var(--shadow-focus-compact);
+}
+
+.diagram-comment-form-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--space-2);
+}
+
+@media (max-width: 600px) {
+  .diagram-comments-drawer {
+    top: var(--space-3);
+    right: var(--space-3);
+    bottom: 4.25rem;
+  }
+}
+
 .loading-state {
   display: flex;
   align-items: center;