collabmd 0.1.21 → 0.1.25

package/src/client/styles/features/collaboration-dialogs.css

@@ -0,0 +1,154 @@
+/* ===== COLLABORATION / DIALOGS ===== */
+
+.app-dialog {
+  width: min(420px, calc(100vw - var(--space-6)));
+  margin: auto;
+  padding: 0;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-xl);
+  background: var(--color-surface);
+  color: var(--color-text);
+  box-shadow: var(--shadow-lg);
+  opacity: 0;
+  transform: scale(0.95);
+  transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), display 0.2s cubic-bezier(0.16, 1, 0.3, 1) allow-discrete;
+}
+
+.app-dialog[open] {
+  opacity: 1;
+  transform: scale(1);
+}
+
+@starting-style {
+  .app-dialog[open] {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+}
+
+.app-dialog::backdrop {
+  background: oklch(from var(--color-bg) l c h / 0.72);
+  backdrop-filter: blur(6px);
+  opacity: 0;
+  transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), display 0.2s cubic-bezier(0.16, 1, 0.3, 1) allow-discrete;
+}
+
+.app-dialog[open]::backdrop {
+  opacity: 1;
+}
+
+@starting-style {
+  .app-dialog[open]::backdrop {
+    opacity: 0;
+  }
+}
+
+.app-dialog-form {
+  display: grid;
+  gap: var(--space-4);
+  padding: var(--space-5);
+}
+
+.app-dialog-header {
+  display: grid;
+  gap: var(--space-1);
+}
+
+.app-dialog-title {
+  font-size: var(--text-base);
+  font-weight: 600;
+}
+
+.app-dialog-copy {
+  color: var(--color-text-muted);
+  font-size: var(--text-sm);
+}
+
+.app-dialog-field {
+  display: grid;
+  gap: var(--space-2);
+}
+
+.app-dialog-label {
+  color: var(--color-text-muted);
+  font-size: var(--text-xs);
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.app-dialog-hint {
+  color: var(--color-text-muted);
+  font-size: var(--text-xs);
+  line-height: 1.5;
+}
+
+.app-dialog-note {
+  overflow-wrap: anywhere;
+  padding: var(--space-3);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  background: var(--color-surface-offset);
+  color: var(--color-text);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: var(--text-xs);
+  line-height: 1.6;
+}
+
+.app-dialog-note.is-danger {
+  border-color: oklch(from var(--color-error) l c h / 0.35);
+  background: var(--color-error-highlight);
+  color: var(--color-error);
+}
+
+.app-dialog-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--space-2);
+}
+
+.tab-lock-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 1200;
+  display: grid;
+  place-items: center;
+  padding: var(--space-6);
+  background: radial-gradient(circle at top, oklch(from var(--color-primary) l c h / 0.16), transparent 38%), oklch(from var(--color-bg) l c h / 0.82);
+  backdrop-filter: blur(10px);
+}
+
+.tab-lock-card {
+  display: grid;
+  gap: var(--space-4);
+  width: min(520px, 100%);
+  padding: var(--space-6);
+  border: 1px solid oklch(from var(--color-primary) l c h / 0.25);
+  border-radius: var(--radius-xl);
+  background: linear-gradient(180deg, var(--color-surface), var(--color-surface-2));
+  box-shadow: var(--shadow-lg);
+}
+
+.tab-lock-kicker {
+  color: var(--color-primary);
+  font-size: var(--text-xs);
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.tab-lock-title {
+  font-size: var(--text-lg);
+  line-height: 1.2;
+}
+
+.tab-lock-copy {
+  color: var(--color-text-muted);
+  font-size: var(--text-sm);
+  line-height: 1.6;
+}
+
+.tab-lock-actions {
+  display: flex;
+  justify-content: flex-start;
+}

package/src/client/styles/features/collaboration-presence.css

@@ -0,0 +1,103 @@
+/* ===== COLLABORATION / PRESENCE ===== */
+
+.mobile-view-toggle {
+  display: none;
+}
+
+.user-avatars {
+  display: flex;
+  align-items: center;
+}
+
+.user-avatar {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  margin-left: -4px;
+  border: 2px solid var(--color-surface);
+  border-radius: var(--radius-full);
+  color: var(--color-text-on-dark);
+  font-size: var(--text-meta);
+  font-weight: 600;
+  flex-shrink: 0;
+}
+
+.user-avatar-initial {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+}
+
+.user-avatar:first-child {
+  margin-left: 0;
+}
+
+.user-avatar.is-local {
+  z-index: 5;
+  width: auto;
+  min-width: 44px;
+  margin-right: 6px;
+  padding: 0 8px 0 6px;
+  gap: 4px;
+  border-radius: var(--radius-full);
+  box-shadow: var(--shadow-accent-ring);
+}
+
+.user-avatar.is-local + .user-avatar {
+  margin-left: 0;
+}
+
+.user-avatar.is-local .user-avatar-initial {
+  width: 14px;
+  height: 14px;
+  border-radius: var(--radius-full);
+  background: var(--surface-avatar-muted);
+  font-size: var(--text-micro);
+}
+
+.user-avatar-self-label {
+  padding: 2px 4px;
+  border-radius: var(--radius-full);
+  background: var(--surface-avatar-label);
+  color: var(--color-text-on-dark);
+  font-size: var(--text-micro);
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  line-height: 1;
+  text-transform: uppercase;
+}
+
+.user-avatar-button {
+  cursor: pointer;
+  padding: 0;
+  transition: transform var(--transition-interactive), box-shadow var(--transition-interactive);
+}
+
+.user-avatar-button:hover {
+  z-index: 2;
+  transform: translateY(-1px);
+}
+
+.user-avatar-button:focus-visible {
+  z-index: 3;
+  outline: none;
+  box-shadow: var(--shadow-accent-ring-strong);
+}
+
+.user-avatar.is-following {
+  z-index: 4;
+  box-shadow: var(--shadow-accent-ring-solid);
+}
+
+.user-avatar-button.different-file {
+  opacity: 0.55;
+}
+
+.user-avatar-button.different-file:hover {
+  opacity: 0.85;
+}

package/src/client/styles/features/collaboration-ui.css

@@ -0,0 +1,3 @@
+@import './collaboration-presence.css';
+@import './collaboration-chat.css';
+@import './collaboration-dialogs.css';

package/src/client/styles/features/comment-card.css

@@ -0,0 +1,236 @@
+/* ===== COMMENTS / CARD ===== */
+
+.comment-card-root {
+  position: fixed;
+  z-index: 50;
+}
+
+.comment-card {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+  width: min(100%, 520px);
+  max-height: min(78vh, 720px);
+  overflow: hidden;
+  padding: var(--space-4);
+  border: 1px solid var(--border-comment-strong);
+  border-radius: var(--radius-xl-plus);
+  background: var(--surface-comment-card);
+  box-shadow: var(--shadow-card-strong);
+  animation: comment-card-in 140ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.comment-card-header {
+  flex-shrink: 0;
+}
+
+.comment-card-scroll {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+  min-height: 0;
+  overflow: auto;
+  padding-right: 2px;
+}
+
+.comment-card-title {
+  font-size: var(--text-title-sm);
+  font-weight: 700;
+  letter-spacing: -0.01em;
+}
+
+.comment-card-meta {
+  margin-top: 2px;
+  color: var(--color-comment);
+  font-size: var(--text-meta);
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+}
+
+.comment-card-close,
+.comment-thread-card-action {
+  border: 1px solid transparent;
+  background: var(--surface-comment-offset-soft);
+  color: var(--color-text-muted);
+  transition: color var(--transition-interactive), background var(--transition-interactive), border-color var(--transition-interactive);
+}
+
+.comment-card-close:hover,
+.comment-thread-card-action:hover {
+  color: var(--color-text);
+  border-color: oklch(from var(--color-comment) l c h / 0.16);
+}
+
+.comment-thread-card-action.is-active {
+  border-color: oklch(from var(--color-comment) l c h / 0.2);
+  background: var(--surface-comment-offset-active);
+  color: var(--color-text);
+}
+
+.comment-thread-card-action.is-danger {
+  color: var(--color-error);
+}
+
+.comment-card-quote,
+.comment-thread-card-excerpt {
+  padding: var(--space-2) var(--space-3);
+  border: 1px solid var(--border-comment-muted);
+  border-radius: var(--radius-md);
+  background: var(--surface-comment-offset);
+  color: var(--color-text-muted);
+  font-size: var(--text-label);
+}
+
+.comment-card-quote {
+  max-height: 11rem;
+  overflow: auto;
+  overflow-wrap: anywhere;
+  padding-bottom: calc(var(--space-3) + 2px);
+  white-space: pre-wrap;
+  word-break: break-word;
+  scrollbar-width: thin;
+  font-family: var(--font-mono);
+  font-size: var(--text-code-sm);
+  line-height: 1.65;
+}
+
+.comment-card-form,
+.comment-reply-form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+}
+
+.comment-card-actions {
+  justify-content: flex-end;
+}
+
+.comment-card-input {
+  resize: vertical;
+  min-height: 88px;
+}
+
+.comment-thread-card {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+  padding-top: var(--space-3);
+  border-top: 1px solid var(--color-divider);
+}
+
+.comment-thread-card-header {
+  align-items: flex-start;
+  flex-wrap: wrap;
+}
+
+.comment-thread-card-heading {
+  display: flex;
+  flex: 1 1 160px;
+  flex-wrap: wrap;
+  gap: var(--space-1) var(--space-2);
+  min-width: 0;
+}
+
+.comment-thread-card-author,
+.comment-message-card-author {
+  font-size: var(--text-label);
+  font-weight: 700;
+}
+
+.comment-thread-card-time,
+.comment-message-card-time {
+  color: var(--color-text-faint);
+  font-size: var(--text-meta);
+}
+
+.comment-thread-card-actions {
+  margin-left: auto;
+  justify-content: flex-end;
+}
+
+.comment-message-card {
+  padding: var(--space-2) var(--space-3);
+  border: 1px solid var(--border-comment-soft);
+  border-radius: var(--radius-md);
+  background: var(--surface-comment-subtle-strong);
+}
+
+.comment-message-card-body {
+  margin-top: var(--space-1);
+  font-size: var(--text-label);
+  line-height: 1.65;
+}
+
+.comment-reaction-bar {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--space-2);
+  flex-wrap: wrap;
+  margin-top: var(--space-2);
+}
+
+.comment-reaction-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+}
+
+.comment-reaction-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  flex-wrap: wrap;
+}
+
+.comment-reaction-chip-emoji,
+.comment-reaction-chip-count {
+  line-height: 1;
+}
+
+.comment-reaction-picker-wrap {
+  position: relative;
+  display: inline-flex;
+}
+
+.comment-reaction-picker {
+  position: absolute;
+  top: calc(100% + 8px);
+  right: 0;
+  z-index: 2;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  min-width: 220px;
+  overflow: auto;
+  padding: var(--space-3);
+  border: 1px solid var(--border-comment-strong);
+  border-radius: var(--radius-lg);
+  background: var(--surface-comment-elevated);
+  box-shadow: var(--shadow-lg);
+  scrollbar-width: thin;
+}
+
+.comment-reaction-picker.is-upward {
+  top: auto;
+  bottom: calc(100% + 8px);
+}
+
+.comment-reaction-picker-grid {
+  display: grid;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  gap: var(--space-2);
+}
+
+@keyframes comment-card-in {
+  from {
+    opacity: 0;
+    transform: translateY(6px) scale(0.98);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}

package/src/client/styles/features/comment-markdown.css

@@ -0,0 +1,127 @@
+/* ===== COMMENTS / MARKDOWN ===== */
+
+.comment-markdown {
+  color: var(--color-text);
+  font-size: var(--text-label);
+  line-height: 1.65;
+}
+
+.comment-markdown > :first-child {
+  margin-top: 0;
+}
+
+.comment-markdown > :last-child {
+  margin-bottom: 0;
+}
+
+.comment-markdown p,
+.comment-markdown ul,
+.comment-markdown ol,
+.comment-markdown blockquote,
+.comment-markdown pre,
+.comment-markdown .comment-markdown-table,
+.comment-markdown table {
+  max-width: none;
+}
+
+.comment-markdown p,
+.comment-markdown ul,
+.comment-markdown ol,
+.comment-markdown blockquote,
+.comment-markdown pre,
+.comment-markdown .comment-markdown-table {
+  margin: var(--space-2) 0;
+}
+
+.comment-markdown li + li {
+  margin-top: 4px;
+}
+
+.comment-markdown ul,
+.comment-markdown ol {
+  padding-left: var(--space-5);
+}
+
+.comment-markdown a {
+  color: var(--color-primary);
+  overflow-wrap: anywhere;
+  text-decoration: underline;
+}
+
+.comment-markdown blockquote {
+  padding: var(--space-2) var(--space-3);
+  border-left: 3px solid oklch(from var(--color-comment) l c h / 0.45);
+  border-radius: 0 var(--radius-md) var(--radius-md) 0;
+  background: var(--surface-comment-offset-strong);
+  color: var(--color-text-muted);
+}
+
+.comment-markdown code {
+  padding: 2px 6px;
+  border-radius: var(--radius-sm);
+  background: var(--surface-comment-offset-soft);
+  color: var(--color-primary);
+  font-family: var(--font-mono);
+  font-size: 0.9em;
+}
+
+.comment-markdown pre {
+  max-width: 100%;
+  overflow: auto;
+  border: 1px solid var(--border-comment-muted);
+  border-radius: var(--radius-lg);
+  background: var(--surface-comment-elevated);
+}
+
+.comment-markdown pre code {
+  display: block;
+  width: max-content;
+  min-width: 100%;
+  padding: var(--space-3);
+  background: none;
+  color: var(--color-text);
+  white-space: pre;
+  font-size: var(--text-label);
+  line-height: 1.6;
+}
+
+.comment-markdown .comment-markdown-table {
+  overflow: auto;
+  border: 1px solid var(--border-comment-muted);
+  border-radius: var(--radius-md);
+}
+
+.comment-markdown table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.comment-markdown th,
+.comment-markdown td {
+  padding: var(--space-2) var(--space-3);
+  border-bottom: 1px solid var(--color-divider);
+  text-align: left;
+  font-size: var(--text-label);
+}
+
+.comment-markdown th {
+  background: var(--surface-comment-offset);
+}
+
+.comment-markdown-preview > :not(pre):not(blockquote):not(.comment-markdown-table) {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 4;
+  overflow: hidden;
+}
+
+.comment-markdown-preview pre code {
+  width: 100%;
+  min-width: 0;
+  max-height: 6.6rem;
+  overflow: hidden;
+}
+
+.comment-markdown-preview .comment-markdown-table {
+  display: none;
+}

package/src/client/styles/features/comment-overlays.css

@@ -0,0 +1,60 @@
+/* ===== COMMENTS / OVERLAYS ===== */
+
+.comment-editor-layer,
+.comment-preview-layer,
+.comment-preview-highlights {
+  position: absolute;
+  inset: 0;
+  overflow: visible;
+  pointer-events: none;
+}
+
+.comment-preview-badge {
+  right: calc(var(--preview-comment-rail-inset) - var(--preview-comment-rail-offset, 0px));
+}
+
+.comment-marker-icon {
+  display: inline-flex;
+  width: 12px;
+  height: 12px;
+  flex: 0 0 auto;
+}
+
+.comment-marker-icon svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.comment-marker-count {
+  line-height: 1;
+}
+
+.comment-selection-chip {
+  position: absolute;
+}
+
+.comment-preview-highlight {
+  position: absolute;
+  border: 1px solid oklch(from var(--color-comment) l c h / 0.16);
+  border-radius: var(--radius-sm);
+  background: var(--color-comment-soft);
+  opacity: 0.56;
+  transition: opacity 140ms ease, background-color 140ms ease, border-color 140ms ease;
+}
+
+.comment-preview-highlight.is-passive {
+  opacity: 0.32;
+}
+
+.comment-preview-highlight.is-hovered {
+  opacity: 0.72;
+  border-color: oklch(from var(--color-comment) l c h / 0.24);
+  background: var(--surface-comment-highlight-hover);
+}
+
+.comment-preview-highlight.is-active {
+  opacity: 0.9;
+  border-color: oklch(from var(--color-comment) l c h / 0.3);
+  background: var(--surface-comment-highlight-active);
+}