collabmd 0.1.21 → 0.1.25

package/src/client/presentation/layout-controller.js

@@ -98,7 +98,7 @@ export class LayoutController {
     const previewIcon = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>';
     const editorIcon = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="8" y1="8" x2="16" y2="8"/><line x1="8" y1="12" x2="14" y2="12"/><line x1="8" y1="16" x2="12" y2="16"/></svg>';
 
-    this.mobileToggleButton.innerHTML = `${label === 'Editor' ? editorIcon : previewIcon}<span class="toolbar-btn-label">${label}</span>`;
+    this.mobileToggleButton.innerHTML = `${label === 'Editor' ? editorIcon : previewIcon}<span class="ui-toolbar-button-label">${label}</span>`;
   }
 
   syncViewButtons() {

package/src/client/presentation/toast-controller.js

@@ -3,19 +3,62 @@ export class ToastController {
     this.container = container;
   }
 
-  show(message, duration = 3000) {
+  show(message, options = 3000) {
     if (!this.container) {
-      return;
+      return null;
     }
 
+    const normalizedOptions = typeof options === 'number'
+      ? { duration: options }
+      : { ...(options ?? {}) };
+    const duration = Number(normalizedOptions.duration) > 0
+      ? Number(normalizedOptions.duration)
+      : 0;
     const toast = document.createElement('div');
     toast.className = 'toast';
-    toast.textContent = message;
-    this.container.appendChild(toast);
+    const content = document.createElement('span');
+    content.className = 'toast__message';
+    content.textContent = message;
+    toast.appendChild(content);
 
-    setTimeout(() => {
+    const dismiss = () => {
+      if (!toast.isConnected || toast.classList.contains('leaving')) {
+        return;
+      }
       toast.classList.add('leaving');
       toast.addEventListener('animationend', () => toast.remove(), { once: true });
-    }, duration);
+    };
+
+    if (normalizedOptions.actionLabel && typeof normalizedOptions.onAction === 'function') {
+      const actionButton = document.createElement('button');
+      actionButton.className = 'toast__action';
+      actionButton.type = 'button';
+      actionButton.textContent = normalizedOptions.actionLabel;
+      actionButton.addEventListener('click', () => {
+        normalizedOptions.onAction();
+        if (normalizedOptions.closeOnAction !== false) {
+          dismiss();
+        }
+      });
+      toast.appendChild(actionButton);
+    }
+
+    if (normalizedOptions.dismissible) {
+      const dismissButton = document.createElement('button');
+      dismissButton.className = 'toast__dismiss';
+      dismissButton.type = 'button';
+      dismissButton.setAttribute('aria-label', 'Dismiss notification');
+      dismissButton.textContent = 'Close';
+      dismissButton.addEventListener('click', dismiss);
+      toast.appendChild(dismissButton);
+    }
+
+    this.container.appendChild(toast);
+
+    if (duration > 0) {
+      setTimeout(dismiss, duration);
+    }
+
+    return toast;
   }
 }

package/src/client/styles/components/actions.css

@@ -0,0 +1,89 @@
+/* ===== COMPONENTS / ACTIONS ===== */
+
+.ui-toolbar-action {
+  flex-shrink: 0;
+}
+
+.ui-action-button {
+  min-height: var(--control-h-md);
+  padding: 0 14px;
+  border-radius: var(--radius-lg-plus);
+  font-size: var(--text-label);
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.ui-action-button--wide {
+  min-width: 92px;
+}
+
+.ui-action-button--surface {
+  background: var(--color-surface-offset);
+}
+
+.ui-action-button--surface:hover:not(:disabled) {
+  background: var(--color-surface-dynamic);
+}
+
+.ui-action-pill {
+  flex-shrink: 0;
+  min-width: 0;
+}
+
+.ui-action-pill--surface {
+  background: var(--color-surface-offset);
+}
+
+.ui-action-pill--surface:hover:not(:disabled) {
+  background: var(--color-surface-dynamic);
+}
+
+.ui-action-icon {
+  flex-shrink: 0;
+}
+
+.ui-action-icon--surface {
+  background: var(--surface-overlay-offset);
+}
+
+.ui-preview-action {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  padding: 2px 8px;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-xs);
+  background: var(--color-surface-2);
+  color: var(--color-text);
+  box-shadow: inset 0 1px 0 oklch(from var(--color-text) l c h / 0.04);
+  font-size: var(--text-xs);
+  cursor: pointer;
+  transition:
+    background var(--transition-interactive),
+    color var(--transition-interactive),
+    border-color var(--transition-interactive);
+}
+
+.ui-preview-action:hover:not(:disabled) {
+  background: var(--color-surface-offset);
+  border-color: oklch(from var(--color-border) calc(l + 0.08) c h);
+}
+
+.ui-preview-action:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.ui-preview-action--icon-only {
+  width: 30px;
+  min-width: 30px;
+  height: 30px;
+  padding: 0;
+}
+
+.ui-preview-action--icon-only svg {
+  display: block;
+  width: 14px;
+  height: 14px;
+}

package/src/client/styles/components/feedback.css

@@ -0,0 +1,71 @@
+/* ===== COMPONENTS / FEEDBACK ===== */
+
+.toast-container {
+  position: fixed;
+  right: var(--space-4);
+  bottom: var(--space-4);
+  z-index: 100;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  pointer-events: none;
+}
+
+.toast {
+  max-width: 320px;
+  padding: var(--space-2) var(--space-4);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  background: var(--color-surface-2);
+  color: var(--color-text);
+  box-shadow: var(--shadow-md);
+  font-size: var(--text-xs);
+  pointer-events: auto;
+  opacity: 1;
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  transform: translateX(0) scale(1);
+  transition:
+    opacity 300ms cubic-bezier(0.16, 1, 0.3, 1),
+    transform 300ms cubic-bezier(0.16, 1, 0.3, 1),
+    display 300ms cubic-bezier(0.16, 1, 0.3, 1) allow-discrete;
+}
+
+.toast__message {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.toast__action,
+.toast__dismiss {
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  font-weight: 600;
+  cursor: pointer;
+  padding: 0;
+  white-space: nowrap;
+}
+
+.toast__action {
+  color: var(--color-primary);
+}
+
+.toast__dismiss {
+  opacity: 0.72;
+}
+
+@starting-style {
+  .toast {
+    opacity: 0;
+    transform: translateX(8px) scale(0.96);
+  }
+}
+
+.toast.leaving {
+  opacity: 0;
+  transform: translateX(8px) scale(0.96);
+  pointer-events: none;
+}

package/src/client/styles/components/navigation.css

@@ -0,0 +1,68 @@
+/* ===== COMPONENTS / NAVIGATION ===== */
+
+.ui-toolbar-button {
+  display: flex;
+  align-items: center;
+  gap: var(--space-1);
+  padding: var(--space-1) var(--space-2);
+  border-radius: var(--radius-md);
+  font-size: var(--text-xs);
+}
+
+.ui-toolbar-button-label,
+.ui-action-label {
+  font-size: var(--text-xs);
+}
+
+.ui-toolbar-button--name {
+  max-width: 132px;
+}
+
+.ui-toolbar-button-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ui-nav-tabs {
+  display: flex;
+  padding: 0 var(--space-2);
+  border-bottom: 1px solid var(--color-divider);
+}
+
+.ui-nav-tab {
+  position: relative;
+  flex: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: var(--space-2) var(--space-3);
+  border-bottom: 2px solid transparent;
+  color: var(--color-text-muted);
+  transition: all var(--transition-interactive);
+  font-size: var(--text-xs);
+  font-weight: 500;
+}
+
+.ui-nav-tab.has-changes::after {
+  content: '';
+  position: absolute;
+  top: 8px;
+  right: 12px;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background-color: var(--color-success);
+  animation: pulse-dot 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+.ui-nav-tab:hover {
+  background: var(--color-surface-offset);
+  color: var(--color-text);
+}
+
+.ui-nav-tab.active {
+  border-bottom-color: var(--color-primary);
+  color: var(--color-primary);
+}

package/src/client/styles/components/scrollbars.css

@@ -0,0 +1,104 @@
+/* ===== COMPONENTS / SCROLLBARS ===== */
+
+.preview-container,
+.cm-scroller,
+.file-tree,
+.git-panel,
+.diff-scroll,
+.comments-drawer-list,
+.comments-drawer-item-quote,
+.comment-card-quote,
+.comment-card-scroll,
+.markdown-toolbar,
+.comment-markdown pre,
+.comment-markdown .comment-markdown-table,
+.preview-content pre,
+.preview-content .table-wrapper,
+.preview-content .mermaid-frame,
+.preview-content .plantuml-frame,
+.plantuml-maximized-root .plantuml-frame {
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-surface-dynamic) transparent;
+}
+
+.preview-container::-webkit-scrollbar,
+.cm-scroller::-webkit-scrollbar,
+.file-tree::-webkit-scrollbar,
+.git-panel::-webkit-scrollbar,
+.diff-scroll::-webkit-scrollbar,
+.comments-drawer-list::-webkit-scrollbar,
+.comments-drawer-item-quote::-webkit-scrollbar,
+.comment-card-quote::-webkit-scrollbar,
+.comment-card-scroll::-webkit-scrollbar,
+.markdown-toolbar::-webkit-scrollbar,
+.comment-markdown pre::-webkit-scrollbar,
+.comment-markdown .comment-markdown-table::-webkit-scrollbar,
+.preview-content pre::-webkit-scrollbar,
+.preview-content .table-wrapper::-webkit-scrollbar,
+.preview-content .mermaid-frame::-webkit-scrollbar,
+.preview-content .plantuml-frame::-webkit-scrollbar,
+.plantuml-maximized-root .plantuml-frame::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+.preview-container::-webkit-scrollbar-track,
+.cm-scroller::-webkit-scrollbar-track,
+.file-tree::-webkit-scrollbar-track,
+.git-panel::-webkit-scrollbar-track,
+.diff-scroll::-webkit-scrollbar-track,
+.comments-drawer-list::-webkit-scrollbar-track,
+.comments-drawer-item-quote::-webkit-scrollbar-track,
+.comment-card-quote::-webkit-scrollbar-track,
+.comment-card-scroll::-webkit-scrollbar-track,
+.markdown-toolbar::-webkit-scrollbar-track,
+.comment-markdown pre::-webkit-scrollbar-track,
+.comment-markdown .comment-markdown-table::-webkit-scrollbar-track,
+.preview-content pre::-webkit-scrollbar-track,
+.preview-content .table-wrapper::-webkit-scrollbar-track,
+.preview-content .mermaid-frame::-webkit-scrollbar-track,
+.preview-content .plantuml-frame::-webkit-scrollbar-track,
+.plantuml-maximized-root .plantuml-frame::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.preview-container::-webkit-scrollbar-thumb,
+.cm-scroller::-webkit-scrollbar-thumb,
+.file-tree::-webkit-scrollbar-thumb,
+.git-panel::-webkit-scrollbar-thumb,
+.diff-scroll::-webkit-scrollbar-thumb,
+.comments-drawer-list::-webkit-scrollbar-thumb,
+.comments-drawer-item-quote::-webkit-scrollbar-thumb,
+.comment-card-quote::-webkit-scrollbar-thumb,
+.comment-card-scroll::-webkit-scrollbar-thumb,
+.markdown-toolbar::-webkit-scrollbar-thumb,
+.comment-markdown pre::-webkit-scrollbar-thumb,
+.comment-markdown .comment-markdown-table::-webkit-scrollbar-thumb,
+.preview-content pre::-webkit-scrollbar-thumb,
+.preview-content .table-wrapper::-webkit-scrollbar-thumb,
+.preview-content .mermaid-frame::-webkit-scrollbar-thumb,
+.preview-content .plantuml-frame::-webkit-scrollbar-thumb,
+.plantuml-maximized-root .plantuml-frame::-webkit-scrollbar-thumb {
+  background: var(--color-surface-dynamic);
+  border-radius: var(--radius-full);
+}
+
+.preview-container::-webkit-scrollbar-thumb:hover,
+.cm-scroller::-webkit-scrollbar-thumb:hover,
+.file-tree::-webkit-scrollbar-thumb:hover,
+.git-panel::-webkit-scrollbar-thumb:hover,
+.diff-scroll::-webkit-scrollbar-thumb:hover,
+.comments-drawer-list::-webkit-scrollbar-thumb:hover,
+.comments-drawer-item-quote::-webkit-scrollbar-thumb:hover,
+.comment-card-quote::-webkit-scrollbar-thumb:hover,
+.comment-card-scroll::-webkit-scrollbar-thumb:hover,
+.markdown-toolbar::-webkit-scrollbar-thumb:hover,
+.comment-markdown pre::-webkit-scrollbar-thumb:hover,
+.comment-markdown .comment-markdown-table::-webkit-scrollbar-thumb:hover,
+.preview-content pre::-webkit-scrollbar-thumb:hover,
+.preview-content .table-wrapper::-webkit-scrollbar-thumb:hover,
+.preview-content .mermaid-frame::-webkit-scrollbar-thumb:hover,
+.preview-content .plantuml-frame::-webkit-scrollbar-thumb:hover,
+.plantuml-maximized-root .plantuml-frame::-webkit-scrollbar-thumb:hover {
+  background: var(--color-text-faint);
+}

package/src/client/styles/components/states.css

@@ -0,0 +1,289 @@
+/* ===== COMPONENTS / STATES ===== */
+
+.ui-pill-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 20px;
+  padding: 2px var(--space-2);
+  border-radius: var(--radius-full);
+  white-space: nowrap;
+  font-size: var(--text-meta);
+  font-weight: 600;
+}
+
+.ui-pill-badge--count {
+  min-width: 20px;
+  padding-inline: 6px;
+}
+
+.ui-pill-badge--accent {
+  background: var(--color-primary-highlight);
+  color: var(--color-primary);
+}
+
+.ui-pill-badge--solid {
+  background: var(--color-primary);
+  color: var(--color-text-inverse);
+}
+
+.ui-pill-badge--muted {
+  background: var(--color-surface-dynamic);
+  color: var(--color-text-muted);
+}
+
+.ui-pill-badge--code {
+  background: var(--color-surface-offset-2);
+  color: var(--color-text-faint);
+  font-family: var(--font-mono);
+  font-size: 9px;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+}
+
+.ui-status-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  padding: 1px 5px;
+  border-radius: var(--radius-2xs);
+  font-family: var(--font-mono);
+  font-size: var(--text-caption);
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+}
+
+.ui-status-badge--success {
+  color: var(--color-success);
+  background: var(--surface-success-soft);
+}
+
+.ui-status-badge--warning {
+  color: var(--color-warning);
+  background: var(--surface-warning-soft);
+}
+
+.ui-status-badge--danger {
+  color: var(--color-error);
+  background: var(--surface-danger-soft);
+}
+
+.ui-status-badge--accent {
+  color: var(--color-primary);
+  background: var(--surface-accent-soft);
+}
+
+.ui-status-badge--muted {
+  color: var(--color-text-faint);
+  background: var(--color-surface-offset);
+}
+
+.ui-stat-token {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  font-family: var(--font-mono);
+  font-size: var(--text-label);
+  white-space: nowrap;
+}
+
+.ui-stat-token--add {
+  color: var(--diff-add-text);
+}
+
+.ui-stat-token--del {
+  color: var(--diff-del-text);
+}
+
+.ui-chip-button {
+  --ui-chip-border: var(--color-border);
+  --ui-chip-bg: var(--color-surface);
+  --ui-chip-color: var(--color-text-muted);
+  --ui-chip-border-hover: var(--ui-chip-border);
+  --ui-chip-bg-hover: var(--color-surface-offset);
+  --ui-chip-color-hover: var(--color-text);
+  --ui-chip-border-active: var(--ui-chip-border-hover);
+  --ui-chip-bg-active: var(--ui-chip-bg-hover);
+  --ui-chip-color-active: var(--ui-chip-color-hover);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  min-height: 30px;
+  padding: 4px 10px;
+  border: 1px solid var(--ui-chip-border);
+  border-radius: var(--radius-full);
+  background: var(--ui-chip-bg);
+  color: var(--ui-chip-color);
+  transition:
+    background var(--transition-interactive),
+    border-color var(--transition-interactive),
+    color var(--transition-interactive),
+    transform 140ms ease;
+  font-size: var(--text-meta);
+  font-weight: 600;
+}
+
+.ui-chip-button:hover {
+  color: var(--ui-chip-color-hover);
+  border-color: var(--ui-chip-border-hover);
+  background: var(--ui-chip-bg-hover);
+}
+
+.ui-chip-button.is-active,
+.ui-chip-button[aria-pressed='true'] {
+  color: var(--ui-chip-color-active);
+  border-color: var(--ui-chip-border-active);
+  background: var(--ui-chip-bg-active);
+}
+
+.ui-chip-button--comment {
+  --ui-chip-border: var(--border-comment-muted);
+  --ui-chip-bg: var(--surface-comment-offset);
+  --ui-chip-border-hover: oklch(from var(--color-comment) l c h / 0.22);
+  --ui-chip-bg-hover: var(--surface-comment-offset-active);
+  --ui-chip-border-active: oklch(from var(--color-comment) l c h / 0.28);
+  --ui-chip-bg-active: var(--surface-comment-selection);
+  --ui-chip-color-active: var(--color-comment);
+}
+
+.ui-icon-chip {
+  --ui-icon-chip-border: var(--color-border);
+  --ui-icon-chip-bg: var(--color-surface-2);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 34px;
+  min-width: 34px;
+  min-height: 34px;
+  padding: 0;
+  border: 1px solid var(--ui-icon-chip-border);
+  border-radius: var(--radius-md);
+  background: var(--ui-icon-chip-bg);
+  transition:
+    background var(--transition-interactive),
+    border-color var(--transition-interactive),
+    transform 140ms ease;
+  font-size: var(--text-title-md);
+}
+
+.ui-icon-chip:hover {
+  border-color: var(--ui-icon-chip-border);
+  background: var(--ui-icon-chip-bg);
+  transform: translateY(-1px);
+}
+
+.ui-icon-chip--comment {
+  --ui-icon-chip-border: var(--border-comment-muted);
+  --ui-icon-chip-bg: var(--surface-comment-subtle-strong);
+}
+
+.ui-icon-chip--comment:hover {
+  border-color: oklch(from var(--color-comment) l c h / 0.24);
+  background: var(--surface-comment-offset-active);
+}
+
+.ui-state-marker {
+  --ui-marker-border: var(--color-border);
+  --ui-marker-bg: var(--color-surface);
+  --ui-marker-color: var(--color-text);
+  --ui-marker-shadow: var(--shadow-md);
+  --ui-marker-border-active: var(--ui-marker-border);
+  --ui-marker-bg-active: var(--ui-marker-bg);
+  --ui-marker-color-active: var(--ui-marker-color);
+  --ui-marker-border-passive: var(--ui-marker-border);
+  --ui-marker-bg-passive: var(--ui-marker-bg);
+  --ui-marker-border-hover: var(--ui-marker-border-active);
+  --ui-marker-bg-hover: var(--ui-marker-bg-active);
+  --ui-marker-color-hover: var(--ui-marker-color-active);
+  position: absolute;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  min-width: 28px;
+  height: 24px;
+  padding: 0 7px;
+  border: 1px solid var(--ui-marker-border);
+  border-radius: var(--radius-full);
+  background: var(--ui-marker-bg);
+  color: var(--ui-marker-color);
+  box-shadow: var(--ui-marker-shadow);
+  pointer-events: auto;
+  transition:
+    transform 140ms ease,
+    box-shadow 140ms ease,
+    background-color 140ms ease,
+    border-color 140ms ease,
+    color 140ms ease,
+    opacity 140ms ease;
+  font-size: var(--text-caption);
+  font-weight: 700;
+}
+
+.ui-state-marker.is-active {
+  border-color: var(--ui-marker-border-active);
+  background: var(--ui-marker-bg-active);
+  color: var(--ui-marker-color-active);
+}
+
+.ui-state-marker.is-passive {
+  opacity: 0.48;
+  border-color: var(--ui-marker-border-passive);
+  background: var(--ui-marker-bg-passive);
+  box-shadow: none;
+}
+
+.ui-state-marker.is-hovered {
+  opacity: 1;
+  border-color: var(--ui-marker-border-hover);
+  background: var(--ui-marker-bg-hover);
+  color: var(--ui-marker-color-hover);
+}
+
+.ui-state-marker:hover {
+  transform: translateY(-1px) scale(1.04);
+  box-shadow: var(--shadow-lg);
+}
+
+.ui-state-marker--comment {
+  --ui-marker-border: oklch(from var(--color-comment) l c h / 0.24);
+  --ui-marker-bg: var(--surface-comment-offset-active);
+  --ui-marker-color: var(--color-comment);
+  --ui-marker-border-active: oklch(from var(--color-comment) l c h / 0.32);
+  --ui-marker-bg-active: var(--surface-comment-selection);
+  --ui-marker-color-active: var(--color-text-inverse);
+  --ui-marker-border-passive: oklch(from var(--color-comment) l c h / 0.16);
+  --ui-marker-bg-passive: var(--surface-comment-offset-soft);
+  --ui-marker-border-hover: oklch(from var(--color-comment) l c h / 0.28);
+  --ui-marker-bg-hover: var(--surface-comment-offset-strong);
+  --ui-marker-color-hover: var(--color-text-inverse);
+}
+
+.ui-selection-pill {
+  position: absolute;
+  min-width: 96px;
+  padding: 6px 10px;
+  border: 1px solid var(--color-primary);
+  border-radius: var(--radius-full);
+  text-align: center;
+  box-shadow: var(--shadow-md);
+  pointer-events: auto;
+  transition: transform 140ms ease, box-shadow 140ms ease;
+  font-size: var(--text-meta);
+  font-weight: 700;
+  letter-spacing: 0.02em;
+}
+
+.ui-selection-pill:hover {
+  transform: translateY(-1px) scale(1.04);
+  box-shadow: var(--shadow-lg);
+}
+
+.ui-selection-pill--comment {
+  border-color: oklch(from var(--color-comment) l c h / 0.22);
+  background: var(--surface-comment-selection);
+  color: var(--color-text-inverse);
+}