collabmd 0.1.21 → 0.1.23

package/src/client/styles/features/git-files.css

@@ -0,0 +1,105 @@
+/* ===== GIT / FILES ===== */
+
+.git-section {
+  border-bottom: 1px solid var(--color-divider);
+}
+
+.git-section-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  width: 100%;
+  padding: var(--space-2) var(--space-3);
+  background: transparent;
+  color: var(--color-text-muted);
+  font-size: var(--text-meta);
+  font-weight: 600;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  text-align: left;
+}
+
+.git-section-header:hover {
+  background: var(--color-surface-offset);
+}
+
+.git-section-count {
+  min-height: 20px;
+}
+
+.git-section-chevron {
+  color: var(--color-text-faint);
+  transition: transform 150ms ease;
+}
+
+.git-section-chevron.collapsed {
+  transform: rotate(-90deg);
+}
+
+.git-file-list {
+  padding: var(--space-1) 0;
+}
+
+.git-file-row {
+  margin: 0 var(--space-2) 2px;
+  --ui-item-row-bg-hover: var(--color-surface-offset);
+  --ui-item-row-bg-active: var(--color-primary-highlight);
+}
+
+.git-file-item {
+  padding: 5px var(--space-2) 5px calc(var(--space-2) + 10px);
+  border-radius: calc(var(--radius-md) - 2px);
+  background: transparent;
+  color: var(--color-text-muted);
+  text-align: left;
+  transition: color var(--transition-interactive);
+}
+
+.git-file-item:hover {
+  color: var(--color-text);
+}
+
+.git-file-item.active {
+  color: var(--color-primary);
+}
+
+.git-file-row.active .git-file-path {
+  color: color-mix(in oklab, var(--color-primary) 56%, var(--color-text-muted));
+}
+
+.git-file-icon {
+  flex-shrink: 0;
+  opacity: 0.5;
+}
+
+.git-file-copy {
+  min-width: 0;
+}
+
+.git-file-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--text-ui-sm);
+}
+
+.git-file-path {
+  overflow: hidden;
+  color: var(--color-text-faint);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--text-meta);
+}
+
+.git-file-actions {
+  padding-right: 4px;
+}
+
+.git-file-actions .ui-action-icon {
+  width: 30px;
+}
+
+.git-file-row.active .ui-action-icon--surface {
+  background: var(--surface-accent-subtle);
+  color: var(--color-text);
+}

package/src/client/styles/features/git-history.css

@@ -0,0 +1,339 @@
+/* ===== GIT / HISTORY ===== */
+
+.git-history-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+  padding: var(--space-3);
+}
+
+.git-history-row {
+  --ui-record-padding: 10px 11px;
+  --ui-record-gap: 4px;
+  --ui-record-border: var(--color-border);
+  --ui-record-bg: var(--surface-overlay-raised);
+  --ui-record-border-hover: var(--border-accent-muted);
+  --ui-record-bg-hover: var(--surface-fill-subtle);
+  --ui-record-border-active: var(--border-accent-stronger);
+  --ui-record-bg-active: var(--surface-accent-subtle);
+  --ui-record-shadow-active: var(--shadow-accent-inset);
+}
+
+.git-history-subject {
+  color: var(--color-text);
+  font-size: var(--text-label);
+  font-weight: 700;
+}
+
+.git-history-row-top,
+.git-history-row-meta,
+.git-history-row-stats {
+  gap: var(--space-2);
+}
+
+.git-history-hash {
+  flex-shrink: 0;
+}
+
+.git-history-row-meta {
+  color: var(--color-text-faint);
+  font-size: var(--text-caption);
+}
+
+.git-history-row-stats {
+  font-family: var(--font-mono);
+  font-size: var(--text-caption);
+  font-weight: 700;
+}
+
+.git-history-footer {
+  padding: 0 var(--space-3) var(--space-3);
+}
+
+.git-history-load-more {
+  width: 100%;
+}
+
+.file-history-shell {
+  --file-history-shell-chrome-offset: calc(
+    var(--toolbar-h)
+    + var(--control-h-md)
+    + (var(--space-2) * 2)
+    + (var(--space-3) * 2)
+    + 1px
+  );
+  box-sizing: border-box;
+  display: grid;
+  flex: 1 0 auto;
+  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
+  align-items: start;
+  gap: var(--space-3);
+  overflow: visible;
+  width: 100%;
+  min-height: 0;
+  padding: var(--space-3);
+}
+
+.file-history-sidebar,
+.file-history-detail {
+  min-width: 0;
+}
+
+.file-history-sidebar {
+  position: sticky;
+  top: var(--space-4);
+  align-self: start;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+  max-height: calc(100dvh - var(--file-history-shell-chrome-offset));
+  min-height: 0;
+  overflow: hidden;
+  padding: var(--space-3);
+  border: 1px solid var(--color-divider);
+  border-radius: var(--radius-xl);
+  background: var(--surface-overlay-raised);
+  box-shadow: var(--shadow-elevated-soft);
+}
+
+.file-history-sidebar-header {
+  display: grid;
+  gap: var(--space-2);
+}
+
+.file-history-sidebar-copy {
+  margin: 0;
+  color: var(--color-text-muted);
+  font-size: var(--text-caption);
+  line-height: 1.5;
+}
+
+.file-history-kicker {
+  color: var(--color-text-faint);
+  font-size: var(--text-caption);
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+}
+
+.file-history-title {
+  display: grid;
+  gap: var(--space-1);
+}
+
+.file-history-path {
+  color: var(--color-text);
+  font-size: var(--text-title-sm);
+  font-weight: 700;
+}
+
+.file-history-dir {
+  color: var(--color-text-muted);
+  font-size: var(--text-caption);
+}
+
+.file-history-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  flex: 1 1 auto;
+  min-height: 0;
+  min-width: 0;
+  padding: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.file-history-item {
+  --ui-record-padding: var(--space-3);
+  --ui-record-gap: var(--space-2);
+  --ui-record-border: var(--color-border);
+  --ui-record-bg: var(--surface-overlay-offset);
+  --ui-record-border-hover: var(--color-border);
+  --ui-record-bg-hover: var(--surface-fill-strong);
+  --ui-record-border-active: var(--border-accent-strong);
+  --ui-record-bg-active: var(--surface-accent-subtle);
+  --ui-record-shadow-active: var(--shadow-accent-inset);
+  box-sizing: border-box;
+  display: block;
+  max-width: 100%;
+  width: 100%;
+  text-align: left;
+}
+
+.file-history-item.active {
+  border-color: var(--border-accent-strong);
+  box-shadow: var(--shadow-accent-outline);
+}
+
+.file-history-item-local {
+  --ui-record-border: color-mix(in srgb, var(--color-primary) 20%, var(--color-divider));
+  --ui-record-bg: color-mix(in srgb, var(--surface-accent-subtle) 58%, var(--surface-overlay-offset));
+}
+
+.file-history-item-top,
+.file-history-item-copy {
+  display: flex;
+  gap: var(--space-2);
+  min-width: 0;
+}
+
+.file-history-item-top {
+  align-items: flex-start;
+  justify-content: space-between;
+}
+
+.file-history-item-copy {
+  flex: 1;
+  flex-direction: column;
+}
+
+.file-history-item-title {
+  overflow: hidden;
+  color: var(--color-text);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--text-label);
+  font-weight: 700;
+}
+
+.file-history-item-meta {
+  overflow: hidden;
+  color: var(--color-text-faint);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--text-caption);
+}
+
+.file-history-item-badge {
+  flex-shrink: 0;
+}
+
+.file-history-item-stats {
+  display: inline-flex;
+  gap: var(--space-2);
+  color: var(--color-text-faint);
+  font-family: var(--font-mono);
+  font-size: var(--text-caption);
+  font-weight: 700;
+}
+
+.file-history-footer {
+  padding: 0;
+}
+
+.file-history-detail {
+  align-self: start;
+  display: grid;
+  grid-template-rows: auto auto;
+  gap: var(--space-3);
+  min-height: 0;
+  min-width: 0;
+}
+
+.file-history-detail-header {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: start;
+  align-content: start;
+  gap: var(--space-3) var(--space-4);
+  padding: var(--space-4);
+  border: 1px solid var(--color-divider);
+  border-radius: var(--radius-xl);
+  background: linear-gradient(180deg, var(--surface-accent-subtle), var(--color-surface));
+  overflow: hidden;
+}
+
+.file-history-detail-copy {
+  display: grid;
+  gap: var(--space-1);
+  min-width: 0;
+}
+
+.file-history-detail-kicker {
+  color: var(--color-text-faint);
+  font-size: var(--text-caption);
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.file-history-detail-title {
+  margin: 0;
+  color: var(--color-text);
+  font-size: var(--text-title-md);
+  font-weight: 700;
+  line-height: 1.3;
+}
+
+.file-history-detail-meta {
+  margin: 0;
+  color: var(--color-text-muted);
+  font-size: var(--text-label);
+  line-height: 1.5;
+}
+
+.file-history-detail-actions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: var(--space-2);
+  align-self: start;
+  flex-shrink: 0;
+}
+
+.file-history-detail-body {
+  border: 1px solid var(--color-divider);
+  border-radius: var(--radius-xl);
+  background: var(--surface-overlay-raised);
+  min-height: auto;
+  min-width: 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+.file-history-diff-block {
+  width: max-content;
+  min-width: 100%;
+  overflow: visible;
+}
+
+.file-history-diff-block .diff-file-header,
+.file-history-diff-block .diff-hunk-header,
+.file-history-diff-block .diff-line,
+.file-history-diff-block .diff-split-hunk,
+.file-history-diff-block .diff-split-row {
+  min-width: max-content;
+}
+
+@media (max-width: 960px) {
+  .file-history-shell {
+    grid-template-columns: 1fr;
+    flex: 0 0 auto;
+    overflow: visible;
+  }
+
+  .file-history-sidebar {
+    position: static;
+    max-height: none;
+  }
+}
+
+@media (max-width: 768px) {
+  .file-history-shell {
+    padding: var(--space-3);
+  }
+
+  .file-history-detail-header {
+    flex-direction: column;
+  }
+
+  .file-history-detail-actions {
+    width: 100%;
+    justify-content: stretch;
+  }
+
+  .file-history-detail-actions .ui-button {
+    flex: 1;
+  }
+}

package/src/client/styles/features/git.css

@@ -0,0 +1,3 @@
+@import './git-branch.css';
+@import './git-files.css';
+@import './git-history.css';

package/src/client/styles/features/media-lightbox.css

@@ -0,0 +1,157 @@
+/* ===== PREVIEW / MEDIA LIGHTBOX ===== */
+
+.image-lightbox-root {
+  position: fixed;
+  inset: 0;
+  z-index: 220;
+  display: grid;
+  place-items: center;
+  pointer-events: auto;
+}
+
+.image-lightbox-root[hidden] {
+  display: none !important;
+}
+
+.image-lightbox-backdrop {
+  position: absolute;
+  inset: 0;
+  border: none;
+  background: var(--surface-scrim-strong);
+  backdrop-filter: blur(10px);
+  cursor: zoom-out;
+}
+
+.image-lightbox-shell {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+}
+
+.image-lightbox-toolbar {
+  position: absolute;
+  top: var(--space-5);
+  left: var(--space-5);
+  right: var(--space-5);
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-3);
+  pointer-events: none;
+}
+
+.image-lightbox-title {
+  min-width: 0;
+  overflow: hidden;
+  padding: 8px 12px;
+  border-radius: var(--radius-full);
+  background: var(--surface-inverse-glass);
+  color: var(--color-text-on-dark);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  backdrop-filter: blur(12px);
+  box-shadow: var(--shadow-media-soft);
+  pointer-events: auto;
+  font-size: var(--text-xs);
+  font-weight: 600;
+}
+
+.image-lightbox-controls {
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--space-2);
+  flex-wrap: wrap;
+  pointer-events: auto;
+}
+
+.image-lightbox-btn {
+  min-width: 0;
+  padding: 8px 12px;
+  border: none;
+  border-radius: var(--radius-full);
+  background: var(--surface-inverse-glass);
+  color: var(--color-text-on-dark);
+  backdrop-filter: blur(12px);
+  box-shadow: var(--shadow-media-soft);
+  transition: background 0.18s ease, transform 0.18s ease;
+  font-size: var(--text-xs);
+  font-weight: 600;
+}
+
+.image-lightbox-btn:hover:not(:disabled) {
+  background: var(--surface-inverse-glass-hover);
+}
+
+.image-lightbox-btn:disabled {
+  opacity: 0.45;
+  cursor: default;
+}
+
+.image-lightbox-zoom-label {
+  min-width: 58px;
+  padding: 8px 12px;
+  border-radius: var(--radius-full);
+  background: var(--surface-inverse-glass);
+  color: var(--color-text-on-dark);
+  text-align: center;
+  backdrop-filter: blur(12px);
+  box-shadow: var(--shadow-media-soft);
+  font-size: var(--text-xs);
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
+
+.image-lightbox-viewport {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  touch-action: none;
+  user-select: none;
+}
+
+.image-lightbox-viewport.is-dragging .image-lightbox-image {
+  cursor: grabbing !important;
+}
+
+.image-lightbox-image {
+  position: absolute;
+  inset: 0;
+  width: auto;
+  height: auto;
+  max-width: calc(100vw - (var(--space-8) * 2));
+  max-height: calc(100vh - (var(--space-8) * 2));
+  margin: auto;
+  object-fit: contain;
+  transform-origin: center center;
+  will-change: transform;
+  box-shadow: var(--shadow-media-stage);
+}
+
+body.image-lightbox-open {
+  overflow: hidden;
+}
+
+@media (max-width: 768px) {
+  .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));
+  }
+}

package/src/client/styles/features/outline.css

@@ -0,0 +1,115 @@
+/* ===== PREVIEW SIDEBARS / OUTLINE ===== */
+
+.outline-panel {
+  display: flex;
+  flex-direction: column;
+  width: var(--preview-floating-outline-width, var(--panel-outline-width));
+  flex-shrink: 0;
+  overflow: hidden;
+  border-left: 1px solid var(--color-divider);
+  background: var(--color-surface-offset);
+  transition: width 0.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.15s ease;
+}
+
+.outline-panel.hidden {
+  width: 0;
+  border-left: none;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.outline-header {
+  padding: var(--space-2) var(--space-3);
+  border-bottom: 1px solid var(--color-divider);
+  flex-shrink: 0;
+}
+
+.outline-title {
+  color: var(--color-text-muted);
+  font-size: var(--text-meta);
+  font-weight: 600;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+}
+
+.outline-nav {
+  flex: 1;
+  overflow-x: hidden;
+  overflow-y: auto;
+  padding: var(--space-2) 0;
+}
+
+.outline-nav::-webkit-scrollbar {
+  width: 4px;
+}
+
+.outline-nav::-webkit-scrollbar-thumb {
+  background: var(--color-surface-dynamic);
+  border-radius: var(--radius-full);
+}
+
+.outline-item {
+  display: block;
+  width: 100%;
+  padding: 3px var(--space-3);
+  border: none;
+  border-left: 2px solid transparent;
+  background: none;
+  color: var(--color-text-muted);
+  text-align: left;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  cursor: pointer;
+  transition: color var(--transition-interactive), border-color var(--transition-interactive), background var(--transition-interactive);
+  font-family: var(--font-body);
+  font-size: var(--text-label);
+  line-height: 1.5;
+}
+
+.outline-item:hover {
+  color: var(--color-text);
+  background: var(--color-surface-dynamic);
+}
+
+.outline-item.active {
+  border-left-color: var(--color-primary);
+  background: oklch(from var(--color-primary) l c h / 0.06);
+  color: var(--color-primary);
+}
+
+.outline-item[data-level='1'] {
+  padding-left: var(--space-3);
+  font-weight: 600;
+}
+
+.outline-item[data-level='2'] {
+  padding-left: calc(var(--space-3) + 12px);
+}
+
+.outline-item[data-level='3'] {
+  padding-left: calc(var(--space-3) + 24px);
+  font-size: var(--text-meta);
+}
+
+.outline-item[data-level='4'] {
+  padding-left: calc(var(--space-3) + 36px);
+  font-size: var(--text-meta);
+}
+
+.outline-item[data-level='5'] {
+  padding-left: calc(var(--space-3) + 48px);
+  font-size: var(--text-meta);
+}
+
+.outline-item[data-level='6'] {
+  padding-left: calc(var(--space-3) + 60px);
+  font-size: var(--text-meta);
+}
+
+.outline-empty {
+  padding: var(--space-4) var(--space-3);
+  color: var(--color-text-faint);
+  font-size: var(--text-label);
+  font-style: italic;
+}

package/src/client/styles/features/preview-content.css

@@ -0,0 +1,3 @@
+@import './preview-markdown.css';
+@import './media-lightbox.css';
+@import './embedded-preview.css';