collabmd 0.1.21 → 0.1.23

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

@@ -0,0 +1,176 @@
+/* ===== SIDEBAR ===== */
+
+.sidebar {
+  display: flex;
+  flex-direction: column;
+  width: 260px;
+  min-width: 260px;
+  max-width: 260px;
+  overflow: hidden;
+  border-right: 1px solid var(--color-divider);
+  background: var(--color-surface);
+  transition: width 180ms cubic-bezier(0.16, 1, 0.3, 1), min-width 180ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.sidebar.collapsed {
+  width: 0;
+  min-width: 0;
+  overflow: hidden;
+  border-right: none;
+}
+
+.sidebar-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: var(--toolbar-h);
+  gap: var(--space-2);
+  padding: var(--space-3);
+  border-bottom: 1px solid var(--color-divider);
+}
+
+.sidebar-brand {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+.sidebar-title {
+  white-space: nowrap;
+  font-size: var(--text-sm);
+  font-weight: 700;
+  letter-spacing: -0.02em;
+}
+
+.sidebar-actions {
+  display: flex;
+  gap: 4px;
+}
+
+.sidebar-close-btn {
+  display: none;
+}
+
+.sidebar-search {
+  padding: var(--space-2) var(--space-3);
+  border-bottom: 1px solid var(--color-divider);
+}
+
+.sidebar-search-input {
+  width: 100%;
+  padding: var(--space-1) var(--space-2);
+  border: 1px solid transparent;
+  border-radius: var(--radius-sm);
+  background: var(--color-surface-offset);
+  color: var(--color-text);
+  outline: none;
+  transition: border-color var(--transition-interactive);
+  font-size: var(--text-xs);
+}
+
+.sidebar-search-input::placeholder {
+  color: var(--color-text-faint);
+}
+
+.sidebar-search-input:focus {
+  border-color: var(--color-primary);
+}
+
+@keyframes pulse-dot {
+  0%,
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  50% {
+    opacity: 0.5;
+    transform: scale(0.8);
+  }
+}
+
+.file-tree {
+  flex: 1;
+  overflow-x: hidden;
+  overflow-y: auto;
+  padding: var(--space-2) 0;
+}
+
+.file-tree-empty {
+  padding: var(--space-4) var(--space-3);
+  color: var(--color-text-faint);
+  text-align: center;
+  font-size: var(--text-xs);
+}
+
+.file-tree-item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: var(--space-1);
+  width: 100%;
+  overflow: hidden;
+  padding-top: 4px;
+  padding-right: 8px;
+  padding-bottom: 4px;
+  padding-left: calc(8px + var(--depth, 0) * 16px);
+  border: none;
+  border-radius: 0;
+  background: none;
+  color: var(--color-text-muted);
+  text-align: left;
+  cursor: pointer;
+  user-select: none;
+  text-overflow: ellipsis;
+  transition: background var(--transition-interactive), color var(--transition-interactive);
+  font-family: var(--font-body);
+  font-size: var(--text-ui-sm);
+}
+
+.file-tree-item:not([data-depth='0'])::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: calc(8px + (var(--depth, 1) - 1) * 16px + 6px);
+  width: 1px;
+  background-color: var(--color-border);
+  opacity: 0.3;
+}
+
+.file-tree-file {
+  padding-left: calc(8px + var(--depth, 0) * 16px + 18px);
+}
+
+.file-tree-item:hover {
+  background: var(--color-surface-offset);
+  color: var(--color-text);
+}
+
+.file-tree-file.active {
+  background: var(--color-primary-highlight);
+  color: var(--color-primary);
+}
+
+.file-tree-chevron {
+  flex-shrink: 0;
+  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.file-tree-chevron.expanded {
+  transform: rotate(90deg);
+}
+
+.file-tree-icon {
+  flex-shrink: 0;
+  opacity: 0.5;
+}
+
+.file-tree-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.file-tree-children {
+  /* Children indentation handled by paddingLeft on items */
+}

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

@@ -0,0 +1,92 @@
+/* ===== VIEW MODES ===== */
+
+.editor-layout[data-view="editor"] .preview-pane,
+.editor-layout[data-view="editor"] .resizer {
+  display: none;
+}
+
+.editor-layout[data-view="preview"] .editor-pane,
+.editor-layout[data-view="preview"] .resizer {
+  display: none;
+}
+
+.editor-layout[data-view="preview"] .preview-pane {
+  flex: 1;
+}
+
+.editor-layout[data-view="preview"] .preview-body {
+  --preview-content-max-width: 1080px;
+}
+
+.editor-layout[data-view="preview"] .preview-content {
+  max-width: 1080px;
+}
+
+.editor-layout[data-view="preview"] .preview-content.is-excalidraw-file-preview,
+.editor-layout[data-view="preview"] .preview-content.is-image-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;
+}
+
+.editor-layout[data-view="preview"] .preview-content p {
+  max-width: 84ch;
+}
+
+.editor-layout[data-view="preview"] .preview-content p:has(> .excalidraw-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),
+.editor-layout[data-view="preview"] .preview-content p:has(> .plantuml-shell:only-child) {
+  max-width: none;
+}
+
+@media (min-width: 769px) {
+  .preview-body > .comments-drawer,
+  .preview-body > .outline-panel {
+    position: absolute;
+    top: var(--preview-floating-sidebar-gap);
+    right: var(--preview-floating-sidebar-gap);
+    bottom: var(--preview-floating-sidebar-gap);
+    z-index: 20;
+    overflow: hidden;
+    border: 1px solid var(--color-divider);
+    border-radius: calc(var(--radius-lg) + 2px);
+    box-shadow: var(--shadow-lg);
+    backdrop-filter: blur(14px);
+  }
+
+  .preview-body > .comments-drawer {
+    width: var(--preview-floating-comments-width);
+    min-width: 240px;
+    border-left: 1px solid var(--color-divider);
+  }
+
+  .preview-body > .outline-panel {
+    width: var(--preview-floating-outline-width);
+    border-left: 1px solid var(--color-divider);
+  }
+
+  .preview-body > .comments-drawer.hidden,
+  .preview-body > .outline-panel.hidden {
+    display: flex !important;
+    opacity: 0;
+    pointer-events: none;
+    transform: translateX(12px);
+    visibility: hidden;
+  }
+
+  .preview-body > .comments-drawer:not(.hidden),
+  .preview-body > .outline-panel:not(.hidden) {
+    opacity: 1;
+    transform: translateX(0);
+    visibility: visible;
+  }
+
+  .preview-body:has(> .outline-panel:not(.hidden)) > .comments-drawer:not(.hidden) {
+    right: calc(var(--preview-floating-sidebar-gap) * 2 + var(--preview-floating-outline-width));
+  }
+}
+
+.editor-layout[data-view="editor"] .editor-pane {
+  flex: 1;
+}

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

@@ -0,0 +1,53 @@
+/* ===== OVERRIDES / CODEMIRROR ===== */
+
+.cm-tooltip-autocomplete {
+  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;
+  font-family: var(--font-body);
+  font-size: var(--text-sm);
+}
+
+.cm-tooltip-autocomplete > ul {
+  max-height: 240px !important;
+  padding: var(--space-1) 0;
+}
+
+.cm-tooltip-autocomplete > ul > li {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--space-2) var(--space-3) !important;
+  line-height: 1.4;
+}
+
+.cm-tooltip-autocomplete > ul > li[aria-selected] {
+  background: var(--color-primary) !important;
+  color: var(--color-text-inverse) !important;
+}
+
+.cm-tooltip-autocomplete .cm-completionLabel {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.cm-tooltip-autocomplete .cm-completionDetail {
+  margin-left: auto;
+  color: inherit;
+  opacity: 0.6;
+  white-space: nowrap;
+  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);
+}

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

@@ -0,0 +1,7 @@
+/* ===== OVERRIDES / HIGHLIGHTJS ===== */
+
+[data-theme="light"] .preview-content pre,
+[data-theme="light"] .preview-content pre code,
+[data-theme="light"] .hljs {
+  background: var(--color-surface) !important;
+}

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

@@ -0,0 +1,2 @@
+@import './highlightjs.css';
+@import './codemirror.css';

package/src/client/styles/primitives/controls.css

@@ -0,0 +1,276 @@
+/* ===== PRIMITIVES / CONTROLS ===== */
+
+.ui-button,
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-2);
+  min-height: var(--control-h-md);
+  padding: 0 var(--space-4);
+  border: 1px solid transparent;
+  border-radius: var(--radius-md);
+  font-size: var(--text-sm);
+  font-weight: 500;
+  text-decoration: none;
+  white-space: nowrap;
+  transition:
+    transform var(--transition-interactive),
+    background var(--transition-interactive),
+    color var(--transition-interactive),
+    border-color var(--transition-interactive),
+    box-shadow var(--transition-interactive);
+}
+
+.ui-button:active,
+.btn:active {
+  transform: scale(0.97);
+}
+
+.ui-button--primary,
+.btn-primary {
+  background: var(--color-primary);
+  color: var(--color-text-inverse);
+}
+
+.ui-button--primary:hover,
+.btn-primary:hover {
+  background: var(--color-primary-hover);
+}
+
+.ui-button--secondary,
+.btn-secondary {
+  background: var(--color-surface-2);
+  color: var(--color-text);
+  border-color: var(--color-border);
+}
+
+.ui-button--secondary:hover,
+.btn-secondary:hover {
+  background: var(--color-surface-dynamic);
+}
+
+.ui-button--danger,
+.btn-danger {
+  background: var(--color-error);
+  color: var(--color-text-inverse);
+}
+
+.ui-button--danger:hover,
+.btn-danger:hover {
+  filter: brightness(0.95);
+}
+
+.ui-button--ghost,
+.btn-ghost {
+  background: transparent;
+  color: var(--color-text-muted);
+}
+
+.ui-button--ghost:hover,
+.btn-ghost:hover {
+  background: var(--color-surface-offset);
+  color: var(--color-text);
+}
+
+.ui-button--lg,
+.btn-lg {
+  min-height: var(--control-h-lg);
+  padding: 0 var(--space-6);
+  font-weight: 600;
+}
+
+.ui-button--compact,
+.btn-compact {
+  min-height: var(--control-h-xs);
+  gap: var(--space-1);
+  padding: 0 var(--space-2);
+  border-radius: var(--radius-sm);
+  font-size: var(--text-xs);
+  font-weight: 600;
+}
+
+.ui-button--toggle.active,
+.ui-button--toggle.is-active,
+.ui-button--toggle[aria-pressed='true'],
+.ui-button--toggle[aria-selected='true'] {
+  border-color: var(--interactive-border);
+  background: var(--interactive-surface);
+  color: var(--color-primary);
+}
+
+.ui-icon-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--control-h-xs);
+  min-width: var(--control-h-xs);
+  height: var(--control-h-xs);
+  padding: 0;
+  border: 1px solid transparent;
+  border-radius: var(--radius-sm);
+  color: var(--color-text-muted);
+  background: transparent;
+  transition:
+    transform var(--transition-interactive),
+    background var(--transition-interactive),
+    color var(--transition-interactive),
+    border-color var(--transition-interactive);
+}
+
+.ui-icon-button:hover {
+  background: var(--color-surface-offset);
+  color: var(--color-text);
+}
+
+.ui-icon-button--toolbar {
+  width: 36px;
+  min-width: 36px;
+}
+
+.ui-pill-button {
+  border-radius: var(--radius-full);
+}
+
+.ui-segmented-control {
+  display: inline-flex;
+  gap: 2px;
+  padding: 2px;
+  border-radius: var(--radius-md);
+  background: var(--color-surface-offset);
+}
+
+.ui-segmented-control--pill {
+  padding: 3px;
+  border-radius: var(--radius-full);
+}
+
+.ui-segmented-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 32px;
+  min-height: var(--control-h-xs);
+  padding: 0 var(--space-3);
+  border: 1px solid transparent;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--color-text-faint);
+  white-space: nowrap;
+  transition:
+    transform var(--transition-interactive),
+    background var(--transition-interactive),
+    color var(--transition-interactive),
+    border-color var(--transition-interactive),
+    box-shadow var(--transition-interactive);
+  font-size: var(--text-xs);
+  font-weight: 600;
+}
+
+.ui-segmented-control--pill .ui-segmented-btn {
+  border-radius: var(--radius-full);
+}
+
+.ui-segmented-btn:hover {
+  color: var(--color-text-muted);
+}
+
+.ui-segmented-btn.active,
+.ui-segmented-btn.is-active,
+.ui-segmented-btn[aria-pressed='true'],
+.ui-segmented-btn[aria-selected='true'] {
+  background: var(--color-surface);
+  color: var(--color-text);
+  box-shadow: var(--shadow-sm);
+}
+
+.ui-button:disabled,
+.btn:disabled,
+.ui-icon-button:disabled,
+.ui-segmented-btn:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+  transform: none;
+}
+
+.ui-input,
+.input {
+  width: 100%;
+  min-height: var(--control-h-md);
+  padding: 0 var(--space-3);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  background: var(--color-surface);
+  color: var(--color-text);
+  font-size: var(--text-sm);
+  transition: border-color var(--transition-interactive), box-shadow var(--transition-interactive);
+}
+
+.ui-input:focus,
+.input:focus {
+  outline: none;
+  border-color: var(--color-primary);
+  box-shadow: var(--shadow-focus);
+}
+
+.ui-input::placeholder,
+.input::placeholder {
+  color: var(--color-text-faint);
+}
+
+.ui-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 20px;
+  padding: 0 8px;
+  border-radius: var(--radius-full);
+  font-size: var(--text-meta);
+  font-weight: 600;
+}
+
+.ui-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+  min-height: 20px;
+  padding: 0 8px;
+  border-radius: var(--radius-full);
+  background: var(--surface-fill-strong);
+  color: var(--color-text-muted);
+  font-size: var(--text-meta);
+}
+
+.ui-panel {
+  border: var(--panel-border-width) solid var(--color-border);
+  border-radius: var(--radius-lg);
+  background: var(--color-surface);
+  box-shadow: var(--shadow-md);
+}
+
+.ui-toolbar-group {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+.ui-list-item {
+  border-radius: var(--radius-md);
+  border: var(--panel-border-width) solid var(--color-border);
+  background: var(--surface-fill-subtle);
+}
+
+.ui-floating-dock {
+  border: var(--panel-border-width) solid var(--color-divider);
+  border-radius: calc(var(--radius-lg) + 2px);
+  background: var(--surface-overlay);
+  box-shadow: var(--shadow-lg);
+  backdrop-filter: blur(14px);
+}
+
+.ui-dialog-surface {
+  border: var(--panel-border-width) solid var(--color-border);
+  border-radius: var(--radius-xl);
+  background: var(--color-surface);
+  box-shadow: var(--shadow-lg);
+}