collabmd 0.1.21 → 0.1.23

package/src/client/styles/features/diff-lines.css

@@ -0,0 +1,160 @@
+/* ===== DIFF / LINES ===== */
+
+.diff-hunk-header,
+.diff-split-hunk {
+  padding: 4px 14px 4px 84px;
+  background: var(--diff-hunk-bg);
+  color: var(--diff-hunk-text);
+  font-family: var(--font-mono);
+  font-size: var(--text-label);
+}
+
+.diff-line {
+  display: flex;
+  align-items: stretch;
+  min-height: 20px;
+  font-family: var(--font-mono);
+  font-size: var(--text-ui-sm);
+  line-height: 20px;
+}
+
+.diff-line-numbers {
+  display: flex;
+  flex-shrink: 0;
+  user-select: none;
+}
+
+.diff-line-num {
+  width: 40px;
+  padding: 0 8px;
+  border-right: 1px solid var(--color-divider);
+  color: var(--diff-gutter);
+  text-align: right;
+  font-size: var(--text-label);
+}
+
+.diff-line-num:first-child {
+  border-right: none;
+}
+
+.diff-line-prefix {
+  width: 20px;
+  padding-left: 8px;
+  flex-shrink: 0;
+  font-weight: 500;
+  user-select: none;
+}
+
+.diff-line-content {
+  flex: 1;
+  padding: 0 10px;
+  white-space: pre;
+  tab-size: 4;
+}
+
+.diff-line.addition {
+  background: var(--diff-add-bg);
+}
+
+.diff-line.addition .diff-line-num {
+  background: var(--diff-add-line-bg);
+  color: var(--diff-add-text);
+}
+
+.diff-line.addition .diff-line-prefix {
+  color: var(--diff-add-text);
+}
+
+.diff-line.deletion {
+  background: var(--diff-del-bg);
+}
+
+.diff-line.deletion .diff-line-num {
+  background: var(--diff-del-line-bg);
+  color: var(--diff-del-text);
+}
+
+.diff-line.deletion .diff-line-prefix {
+  color: var(--diff-del-text);
+}
+
+.diff-line.note {
+  background: var(--color-surface-offset);
+  color: var(--color-text-faint);
+}
+
+.diff-highlight-add {
+  padding: 0 1px;
+  border-radius: var(--radius-2xs);
+  background: var(--diff-add-line-bg);
+}
+
+.diff-highlight-del {
+  padding: 0 1px;
+  border-radius: var(--radius-2xs);
+  background: var(--diff-del-line-bg);
+}
+
+.diff-split {
+  display: block;
+}
+
+.diff-split-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+}
+
+.diff-split-pane-header {
+  display: none;
+}
+
+.diff-split-line {
+  display: flex;
+  min-height: 20px;
+  font-family: var(--font-mono);
+  font-size: var(--text-ui-sm);
+  line-height: 20px;
+}
+
+.diff-split-line:first-child {
+  border-right: 1px solid var(--color-divider);
+}
+
+.diff-split-num {
+  width: 44px;
+  padding: 0 8px;
+  border-right: 1px solid var(--color-divider);
+  color: var(--diff-gutter);
+  text-align: right;
+  font-size: var(--text-label);
+}
+
+.diff-split-content {
+  flex: 1;
+  padding: 0 10px;
+  white-space: pre;
+  tab-size: 4;
+}
+
+.diff-split-line.addition {
+  background: var(--diff-add-bg);
+}
+
+.diff-split-line.addition .diff-split-num {
+  background: var(--diff-add-line-bg);
+  color: var(--diff-add-text);
+}
+
+.diff-split-line.deletion {
+  background: var(--diff-del-bg);
+}
+
+.diff-split-line.deletion .diff-split-num {
+  background: var(--diff-del-line-bg);
+  color: var(--diff-del-text);
+}
+
+.diff-split-line.empty {
+  background: var(--color-surface-offset);
+  opacity: 0.45;
+}

package/src/client/styles/features/diff-toolbar.css

@@ -0,0 +1,98 @@
+/* ===== DIFF / TOOLBAR ===== */
+
+.diff-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-3);
+  padding: var(--space-2) var(--space-4);
+  background: var(--color-surface-2);
+  border-bottom: 1px solid var(--color-divider);
+}
+
+.diff-toolbar-left,
+.diff-toolbar-right {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+}
+
+.diff-toolbar-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+.diff-toolbar-actions-group {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+.diff-toolbar-actions-group-git {
+  padding: var(--space-1);
+  border: 1px solid var(--color-divider);
+  border-radius: var(--radius-lg);
+  background: var(--surface-overlay);
+  box-shadow: var(--shadow-sheet-inset);
+}
+
+.diff-toolbar-actions-divider {
+  width: 1px;
+  height: var(--control-h-xs);
+  background: var(--color-divider);
+  opacity: 0.9;
+}
+
+.diff-open-editor-btn {
+  min-width: 116px;
+}
+
+.diff-open-editor-btn:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.diff-back-btn {
+  min-width: 130px;
+}
+
+.diff-file-nav {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+.diff-file-nav .ui-action-icon:disabled {
+  opacity: 0.3;
+}
+
+.diff-file-indicator {
+  color: var(--color-text-muted);
+  font-size: var(--text-xs);
+  font-variant-numeric: tabular-nums;
+}
+
+.diff-stats {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  white-space: nowrap;
+}
+
+.diff-scroll {
+  flex: 1;
+  overflow: auto;
+}
+
+.diff-content {
+  min-width: fit-content;
+  min-height: 100%;
+}
+
+.diff-content--history {
+  display: flex;
+  min-width: 0;
+  min-height: 100%;
+  width: 100%;
+}

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

@@ -0,0 +1,3 @@
+@import './diff-toolbar.css';
+@import './diff-commit.css';
+@import './diff-lines.css';

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

@@ -0,0 +1,218 @@
+/* ===== PREVIEW / EMBEDDED MEDIA ===== */
+
+.preview-content .video-embed-shell {
+  display: block;
+  background: var(--surface-media-canvas);
+}
+
+.preview-content .video-embed,
+.preview-content .video-embed-placeholder {
+  display: block;
+  transition: box-shadow 0.18s ease;
+}
+
+.preview-content .video-embed-placeholder.is-hydrated {
+  visibility: hidden;
+}
+
+.video-embed-overlay-root {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  pointer-events: none;
+}
+
+.preview-content .video-embed-frame,
+.preview-content .video-embed,
+.preview-content .video-embed-placeholder {
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+}
+
+.preview-content .video-embed-frame {
+  height: 100%;
+}
+
+.preview-content .video-embed-placeholder-card {
+  min-height: 100%;
+  border-radius: 0;
+}
+
+.preview-content .video-embed-placeholder-copy {
+  display: grid;
+  gap: 2px;
+}
+
+.preview-content .video-embed-iframe,
+.preview-content .video-embed-player {
+  display: block;
+  width: 100%;
+  height: 100%;
+  max-width: 100%;
+  border: none;
+  background: var(--surface-media-canvas);
+}
+
+.preview-content .video-embed-player {
+  object-fit: contain;
+}
+
+.preview-content .mermaid-shell {
+  display: grid;
+  gap: 0;
+}
+
+.preview-content .mermaid-placeholder-card {
+  border-radius: 0;
+}
+
+.preview-content .mermaid-toolbar {
+  justify-content: flex-end;
+}
+
+.preview-content .mermaid-zoom-btn {
+  min-width: 32px;
+  line-height: 1.5;
+}
+
+.preview-content .mermaid-zoom-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.preview-content .mermaid-frame {
+  max-width: none;
+}
+
+.preview-content .mermaid-frame.is-pannable {
+  cursor: grab;
+}
+
+.preview-content .mermaid-frame.is-dragging {
+  cursor: grabbing;
+  user-select: none;
+}
+
+.preview-content .mermaid-frame svg {
+  display: block;
+}
+
+body.mermaid-maximized-open {
+  overflow: hidden;
+}
+
+body.mermaid-maximized-open::before {
+  content: '';
+  position: fixed;
+  inset: 0;
+  z-index: 170;
+  background: var(--surface-scrim);
+  backdrop-filter: blur(2px);
+}
+
+.preview-content .mermaid-shell.is-maximized {
+  position: fixed;
+  inset: var(--space-4);
+  z-index: 171;
+  width: auto;
+  max-width: none;
+  margin: 0;
+  box-shadow: var(--shadow-lg);
+  grid-template-rows: auto minmax(0, 1fr);
+}
+
+.preview-content .mermaid-shell.is-maximized .mermaid-frame {
+  max-height: none;
+  height: 100%;
+}
+
+.preview-content .plantuml-shell,
+.plantuml-maximized-root .plantuml-shell {
+  display: grid;
+  gap: 0;
+  min-width: 0;
+  width: 100%;
+}
+
+.preview-content .plantuml-placeholder-card,
+.plantuml-maximized-root .plantuml-placeholder-card {
+  border-radius: 0;
+}
+
+.preview-content .plantuml-tool-btn:disabled,
+.plantuml-maximized-root .plantuml-tool-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.preview-content .plantuml-toolbar,
+.plantuml-maximized-root .plantuml-toolbar {
+  justify-content: flex-end;
+}
+
+.preview-content .plantuml-tool-btn,
+.plantuml-maximized-root .plantuml-tool-btn {
+  min-width: 32px;
+  line-height: 1.5;
+}
+
+.preview-content .plantuml-frame,
+.plantuml-maximized-root .plantuml-frame {
+  max-width: 100%;
+}
+
+.preview-content .plantuml-frame.is-pannable,
+.plantuml-maximized-root .plantuml-frame.is-pannable {
+  cursor: grab;
+}
+
+.preview-content .plantuml-frame.is-dragging,
+.plantuml-maximized-root .plantuml-frame.is-dragging {
+  cursor: grabbing;
+  user-select: none;
+}
+
+.preview-content .plantuml-frame svg,
+.plantuml-maximized-root .plantuml-frame svg {
+  display: block;
+}
+
+body.plantuml-maximized-open {
+  overflow: hidden;
+}
+
+body.plantuml-maximized-open::before {
+  content: '';
+  position: fixed;
+  inset: 0;
+  z-index: 170;
+  background: var(--surface-scrim);
+  backdrop-filter: blur(2px);
+}
+
+.plantuml-maximized-root {
+  position: fixed;
+  inset: 0;
+  z-index: 171;
+  pointer-events: none;
+}
+
+.preview-content .plantuml-shell.is-maximized,
+.plantuml-maximized-root .plantuml-shell.is-maximized {
+  position: fixed;
+  inset: var(--space-4);
+  z-index: 171;
+  width: auto;
+  max-width: none;
+  margin: 0;
+  box-shadow: var(--shadow-lg);
+  pointer-events: auto;
+  grid-template-rows: auto minmax(0, 1fr);
+}
+
+.preview-content .plantuml-shell.is-maximized .plantuml-frame,
+.plantuml-maximized-root .plantuml-shell.is-maximized .plantuml-frame {
+  max-height: none;
+  height: 100%;
+}

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

@@ -0,0 +1,155 @@
+/* ===== GIT / BRANCH ===== */
+
+.git-panel {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+}
+
+.git-panel.active {
+  display: flex;
+}
+
+.git-branch-bar {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: var(--space-2);
+  padding: var(--space-3);
+  border-bottom: 1px solid var(--color-divider);
+  font-size: var(--text-xs);
+}
+
+.git-branch-meta {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-3);
+  min-width: 0;
+  width: 100%;
+}
+
+.git-branch-name {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+  max-width: 100%;
+  padding: 3px 8px;
+  border-radius: var(--radius-sm);
+  background: var(--color-surface-offset);
+  color: var(--color-text);
+  font-family: var(--font-mono);
+  font-size: var(--text-label);
+  font-weight: 500;
+}
+
+.git-branch-name svg {
+  flex-shrink: 0;
+  color: var(--color-primary);
+}
+
+.git-sync-info {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  font-family: var(--font-mono);
+  font-size: var(--text-meta);
+  flex-shrink: 0;
+}
+
+.git-sync-metric {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+}
+
+.git-sync-metric--ahead {
+  color: var(--color-success);
+}
+
+.git-sync-metric--behind {
+  color: var(--color-text-faint);
+}
+
+.git-sync-info-muted {
+  color: var(--color-text-faint);
+}
+
+.git-change-stats {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  font-family: var(--font-mono);
+  font-size: var(--text-meta);
+  font-weight: 600;
+  flex-shrink: 0;
+}
+
+.git-branch-actions {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 6px;
+  width: 100%;
+}
+
+.git-panel-mode-switch {
+  display: inline-grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.git-panel-mode-btn {
+  min-width: 0;
+}
+
+.git-branch-actions .ui-action-pill {
+  width: 100%;
+  justify-content: center;
+}
+
+.git-branch-actions .ui-action-pill svg {
+  flex-shrink: 0;
+}
+
+.git-change-add {
+  color: var(--diff-add-text);
+}
+
+.git-change-del {
+  color: var(--diff-del-text);
+}
+
+.git-panel-footer {
+  margin-top: auto;
+  padding: var(--space-3);
+  border-top: 1px solid var(--color-divider);
+}
+
+.git-panel-footer-actions {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+
+.git-panel-footer-actions .ui-action-button {
+  width: 100%;
+}
+
+.git-footer-commit-btn {
+  width: 100%;
+  border: 1px solid var(--border-accent-soft);
+  background: var(--surface-accent-soft);
+  color: var(--color-primary);
+}
+
+.git-footer-commit-btn:hover:not(:disabled) {
+  background: var(--surface-accent-strong);
+}
+
+.git-panel-empty {
+  padding: var(--space-4);
+  color: var(--color-text-faint);
+  text-align: center;
+  font-size: var(--text-xs);
+}