collabmd 0.1.21 → 0.1.23

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

@@ -0,0 +1,132 @@
+/* ===== SHARED OVERLAYS ===== */
+
+.editor-loading {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  gap: var(--space-2);
+  padding: var(--space-6) var(--space-8);
+}
+
+.editor-loading.hidden {
+  display: none;
+}
+
+.skeleton-line {
+  height: 16px;
+  border-radius: var(--radius-xs);
+  background: var(--color-surface-offset);
+  animation: pulse-skeleton 1.5s ease-in-out infinite;
+}
+
+.skeleton-line--title {
+  width: 40%;
+  height: 32px;
+}
+
+.skeleton-line--full {
+  width: 100%;
+}
+
+.skeleton-line--ninety {
+  width: 90%;
+}
+
+.skeleton-line--ninety-five {
+  width: 95%;
+}
+
+.skeleton-line--eighty {
+  width: 80%;
+}
+
+.skeleton-line--eighty-five {
+  width: 85%;
+}
+
+.skeleton-line--break {
+  margin-bottom: 24px;
+}
+
+@keyframes pulse-skeleton {
+  0% {
+    opacity: 0.6;
+  }
+
+  50% {
+    opacity: 0.3;
+  }
+
+  100% {
+    opacity: 0.6;
+  }
+}
+
+.file-context-menu {
+  position: fixed;
+  z-index: 1000;
+  min-width: 120px;
+  padding: var(--space-1);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  background: var(--color-surface);
+  box-shadow: var(--shadow-md);
+  transform-origin: top left;
+  opacity: 1;
+  transform: scale(1);
+  transition: opacity 0.15s cubic-bezier(0.16, 1, 0.3, 1), transform 0.15s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+@starting-style {
+  .file-context-menu {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+}
+
+.file-context-item {
+  display: block;
+  width: 100%;
+  padding: var(--space-1) var(--space-3);
+  border: none;
+  border-radius: var(--radius-sm);
+  background: none;
+  color: var(--color-text);
+  text-align: left;
+  cursor: pointer;
+  transition: background var(--transition-interactive);
+  font-family: var(--font-body);
+  font-size: var(--text-ui-sm);
+}
+
+.file-context-item:hover {
+  background: var(--color-surface-offset);
+}
+
+.file-context-danger {
+  color: var(--color-error);
+}
+
+.wiki-link {
+  color: var(--color-primary);
+  text-decoration: underline;
+  text-decoration-style: dotted;
+  text-underline-offset: 2px;
+  cursor: pointer;
+}
+
+.wiki-link:hover {
+  text-decoration-style: solid;
+}
+
+.wiki-link-new {
+  color: var(--color-text-muted);
+  text-decoration-style: dashed;
+  opacity: 0.7;
+}
+
+.wiki-link-new:hover {
+  color: var(--color-primary);
+  opacity: 1;
+  text-decoration-style: dashed;
+}

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

@@ -0,0 +1,251 @@
+/* ===== MOBILE / RESPONSIVE ===== */
+
+@media (max-width: 768px) {
+  .input,
+  .sidebar-search-input,
+  .qs-input,
+  .chat-input,
+  .editor-container .cm-editor {
+    font-size: 16px;
+  }
+
+  .sidebar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    z-index: 100;
+    box-shadow: var(--shadow-lg);
+  }
+
+  .sidebar.collapsed {
+    display: none;
+  }
+
+  .ui-toolbar-button-label {
+    display: none;
+  }
+
+  .toolbar-center {
+    display: none;
+  }
+
+  .mobile-view-toggle {
+    display: flex !important;
+  }
+
+  .ui-toolbar-button--name {
+    max-width: none;
+  }
+
+  .sidebar-close-btn {
+    display: inline-flex;
+  }
+
+  .ui-nav-tabs {
+    padding: 0 var(--space-1);
+  }
+
+  .ui-nav-tab {
+    padding: var(--space-2);
+  }
+
+  .editor-layout {
+    flex-direction: column;
+  }
+
+  .resizer {
+    display: none !important;
+  }
+
+  .editor-layout[data-view="split"] .preview-pane {
+    display: none;
+  }
+
+  .editor-layout[data-view="split"] .editor-pane {
+    flex: 1;
+  }
+
+  .preview-content {
+    padding: var(--space-4);
+  }
+
+  .backlinks-panel-layer {
+    display: none !important;
+  }
+
+  .diff-toolbar {
+    flex-wrap: wrap;
+    padding: var(--space-2) var(--space-3);
+  }
+
+  .diff-toolbar-left,
+  .diff-toolbar-right {
+    width: 100%;
+    justify-content: space-between;
+  }
+
+  .diff-toolbar-left {
+    flex-wrap: wrap;
+  }
+
+  .diff-toolbar-actions {
+    width: 100%;
+    justify-content: space-between;
+  }
+
+  .diff-toolbar-actions-group-git {
+    flex: 1;
+  }
+
+  .diff-toolbar-actions-group-git .ui-action-button {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .diff-toolbar-actions-divider {
+    display: none;
+  }
+
+  .diff-mode-btn {
+    min-width: 74px;
+  }
+
+  .diff-layout-btn {
+    min-width: 78px;
+  }
+
+  .diff-split-row {
+    grid-template-columns: 1fr;
+  }
+
+  .diff-commit-shell {
+    grid-template-columns: 1fr;
+    padding: var(--space-3);
+  }
+
+  .diff-commit-index {
+    position: static;
+    max-height: none;
+  }
+
+  .diff-commit-section-header {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .diff-commit-section-meta {
+    width: 100%;
+    justify-content: flex-start;
+  }
+
+  .diff-split-line:first-child {
+    border-right: none;
+    border-bottom: 1px solid var(--color-divider);
+  }
+
+  .markdown-toolbar {
+    overflow-x: auto;
+    flex-wrap: nowrap;
+    scrollbar-width: thin;
+  }
+
+  .outline-panel {
+    position: absolute;
+    inset: 0;
+    width: auto;
+    border-top: 1px solid var(--color-divider);
+    border-left: none;
+    background: oklch(from var(--color-surface) l c h / 0.98);
+    backdrop-filter: blur(10px);
+    box-shadow: var(--shadow-lg);
+    z-index: 6;
+  }
+
+  .outline-panel.hidden {
+    display: none !important;
+  }
+
+  #outlineToggle {
+    display: inline-flex !important;
+  }
+
+  .toolbar {
+    padding: 0 var(--space-2);
+  }
+
+  .toolbar-room-name {
+    max-width: 120px;
+    font-size: var(--text-xs);
+  }
+
+  .chat-panel {
+    position: fixed;
+    top: calc(var(--toolbar-h) + var(--space-2));
+    right: var(--space-2);
+    left: var(--space-2);
+    width: auto;
+    max-height: calc(100vh - var(--toolbar-h) - var(--space-6));
+  }
+
+  .chat-form {
+    align-items: stretch;
+  }
+
+  .chat-send-btn {
+    padding-inline: var(--space-3);
+  }
+
+  .comment-card {
+    width: min(100vw - 32px, 520px);
+    max-height: min(72vh, 680px);
+  }
+
+  .comment-thread-card-actions {
+    width: 100%;
+    margin-left: 0;
+    justify-content: flex-start;
+  }
+
+  .comment-reaction-picker {
+    left: 0;
+    right: auto;
+    min-width: min(240px, calc(100vw - 64px));
+  }
+
+  .excalidraw-embed.is-maximized {
+    inset: var(--space-3);
+    width: auto;
+  }
+
+  .excalidraw-embed.is-maximized .excalidraw-embed-iframe {
+    height: auto !important;
+  }
+
+  .image-lightbox-toolbar {
+    top: var(--space-3);
+    left: var(--space-3);
+    right: var(--space-3);
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .image-lightbox-controls {
+    justify-content: flex-start;
+  }
+
+  .image-lightbox-btn {
+    flex: 0 0 auto;
+  }
+
+  .image-lightbox-image {
+    max-width: calc(100vw - (var(--space-4) * 2));
+    max-height: calc(100vh - (var(--space-4) * 2));
+  }
+}
+
+@media (min-width: 769px) {
+  .mobile-view-toggle {
+    display: none !important;
+  }
+}

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

@@ -0,0 +1,314 @@
+/* ===== APP SHELL ===== */
+
+.app-shell {
+  display: flex;
+  height: 100dvh;
+  overflow: hidden;
+}
+
+.main-area {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.editor-layout {
+  position: relative;
+  display: flex;
+  flex: 1;
+  overflow: hidden;
+}
+
+.editor-pane,
+.preview-pane {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.editor-pane,
+.preview-pane {
+  flex: 1;
+  min-width: 200px;
+}
+
+.pane-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-shrink: 0;
+  height: 28px;
+  padding: var(--space-1) var(--space-3);
+  border-bottom: 1px solid var(--color-divider);
+  background: var(--color-surface-offset);
+}
+
+.pane-header-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--space-1);
+}
+
+.pane-header-meta {
+  display: flex;
+  align-items: baseline;
+  gap: var(--space-3);
+  min-width: 0;
+}
+
+.pane-label {
+  color: var(--color-text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  font-size: var(--text-meta);
+  font-weight: 500;
+}
+
+.pane-label-meta {
+  color: var(--color-text-muted);
+  font-family: var(--font-mono);
+  font-size: var(--text-meta);
+}
+
+.resizer {
+  position: relative;
+  z-index: 5;
+  width: 4px;
+  flex-shrink: 0;
+  background: var(--color-divider);
+  cursor: col-resize;
+  transition: background var(--transition-interactive);
+}
+
+.resizer:hover,
+.resizer.dragging {
+  background: var(--color-primary);
+}
+
+.resizer::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: -6px;
+  bottom: 0;
+  left: -6px;
+}
+
+.editor-container {
+  position: relative;
+  flex: 1;
+  overflow: hidden;
+  background: var(--color-bg);
+}
+
+.editor-container > .editor-loading {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  background: var(--color-bg);
+}
+
+.editor-container.is-loading-editor .cm-editor {
+  visibility: hidden;
+}
+
+.editor-container .cm-editor {
+  height: 100%;
+  font-family: var(--font-mono);
+  font-size: var(--text-ui-md);
+}
+
+.editor-container .cm-editor .cm-scroller {
+  overflow: auto;
+  font-family: var(--font-mono);
+}
+
+.editor-container .cm-editor.cm-focused {
+  outline: none;
+}
+
+.cm-editor .cm-ySelectionInfo {
+  position: absolute;
+  top: -1.2em;
+  left: -1px;
+  z-index: 10;
+  padding: 1px 4px;
+  border-radius: var(--radius-2xs) var(--radius-2xs) var(--radius-2xs) 0;
+  opacity: 1;
+  white-space: nowrap;
+  transition: opacity 0.3s;
+  font-family: var(--font-body);
+  font-size: var(--text-meta);
+  font-weight: 600;
+}
+
+.preview-body {
+  --preview-floating-sidebar-gap: var(--space-3);
+  --preview-floating-comments-width: var(--panel-comments-width);
+  --preview-floating-outline-width: var(--panel-outline-width);
+  --preview-content-max-width: var(--preview-content-width);
+  --preview-comment-rail-inset: 10px;
+  position: relative;
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.preview-container {
+  flex: 1;
+  min-width: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+  background: var(--color-bg);
+  overscroll-behavior: contain;
+}
+
+.preview-content {
+  --preview-comment-rail-reserved: 0px;
+  --preview-comment-rail-offset: 0px;
+  position: relative;
+  min-width: 0;
+  max-width: var(--preview-content-max-width);
+  margin: 0 auto;
+  overflow: visible;
+  padding: var(--space-6) calc(var(--space-6) + var(--preview-comment-rail-reserved)) var(--space-12) var(--space-6);
+  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;
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 100%;
+  height: 100%;
+  max-width: none;
+  margin: 0;
+  padding: var(--space-3);
+}
+
+.preview-content.is-image-file-preview {
+  position: relative;
+  display: flex;
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 100%;
+  max-width: none;
+  margin: 0;
+  padding: var(--space-4);
+}
+
+.preview-content.is-plantuml-file-preview,
+.preview-content.is-mermaid-file-preview {
+  width: 100%;
+  min-height: 100%;
+  max-width: none;
+}
+
+.preview-content.is-mermaid-file-preview [data-preview-render-host='true'],
+.preview-content.is-plantuml-file-preview [data-preview-render-host='true'] {
+  min-height: 100%;
+}
+
+.preview-content.is-excalidraw-file-preview [data-preview-render-host='true'],
+.preview-content.is-image-file-preview [data-preview-render-host='true'] {
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  min-height: 100%;
+}
+
+.image-file-preview-shell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  min-height: 100%;
+  margin: 0;
+}
+
+.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);
+}
+
+.preview-content.is-mermaid-file-preview .mermaid-shell,
+.preview-content.is-plantuml-file-preview .plantuml-shell {
+  min-height: 100%;
+  margin: 0;
+}
+
+.preview-content.is-excalidraw-file-preview .excalidraw-embed,
+.preview-content.is-excalidraw-file-preview .excalidraw-embed-placeholder {
+  width: 100%;
+  min-height: 100%;
+  margin: 0;
+}
+
+.preview-content.is-excalidraw-file-preview .excalidraw-embed {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.preview-content.is-excalidraw-file-preview .excalidraw-embed-placeholder {
+  display: flex;
+  align-items: stretch;
+}
+
+.preview-content.is-excalidraw-file-preview .preview-shell {
+  width: 100%;
+  min-height: 100%;
+}
+
+.preview-content.is-excalidraw-file-preview .excalidraw-embed-iframe {
+  flex: 1;
+  min-height: 0;
+  height: 100% !important;
+}
+
+.preview-content.is-excalidraw-file-preview .excalidraw-embed-resizer {
+  display: none;
+}
+
+.preview-content.is-excalidraw-file-preview .excalidraw-embed.is-maximized {
+  position: absolute;
+  inset: var(--space-3);
+  z-index: 2;
+  box-sizing: border-box;
+  max-width: calc(100% - (var(--space-3) * 2));
+  margin: 0;
+}
+
+.preview-content.is-excalidraw-file-preview .excalidraw-embed.is-maximized .excalidraw-embed-iframe {
+  height: 100% !important;
+}
+
+.preview-shell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 60vh;
+  color: var(--color-text-muted);
+  font-size: var(--text-sm);
+}