collabmd 0.1.49 → 0.1.52

package/src/client/styles/features/team-settings.css

@@ -0,0 +1,162 @@
+.team-settings-section {
+  margin-block-end: 1.25rem;
+}
+
+.team-settings-section h3 {
+  font-size: 0.95rem;
+  margin-block: 0 0.5rem;
+}
+
+.team-settings-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  list-style: none;
+  margin: 0;
+  max-block-size: 16rem;
+  overflow-block: auto;
+  padding: 0;
+}
+
+.team-settings-row {
+  align-items: center;
+  border: 1px solid var(--color-border);
+  border-radius: 8px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+}
+
+.team-settings-row-main {
+  display: flex;
+  flex: 1 1 14rem;
+  flex-direction: column;
+  min-inline-size: 0;
+}
+
+.team-settings-row-main span,
+.team-settings-row-main small {
+  color: var(--color-text-muted);
+  font-size: 0.8rem;
+  overflow-wrap: anywhere;
+}
+
+.team-settings-row-role {
+  align-items: center;
+  display: flex;
+  font-size: 0.8rem;
+  gap: 0.35rem;
+}
+
+.team-settings-row-role select {
+  inline-size: auto;
+}
+
+.team-settings-empty {
+  color: var(--color-text-muted);
+  font-size: 0.85rem;
+  margin: 0.25rem 0;
+}
+
+.team-settings-invite-form {
+  align-items: end;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin-block-start: 0.75rem;
+}
+
+.team-settings-invite-form .app-dialog-field {
+  flex: 1 1 10rem;
+}
+
+.team-settings-note {
+  color: var(--color-text-muted);
+  font-size: 0.8rem;
+  margin-block: 0.5rem 0;
+}
+
+.team-settings-status {
+  font-size: 0.9rem;
+  margin: 1rem 0;
+}
+
+.team-settings-status.is-error {
+  color: var(--color-danger);
+}
+
+.team-settings-actions {
+  display: flex;
+  justify-content: flex-end;
+  margin-block-start: 0.75rem;
+}
+
+.team-settings-live {
+  color: var(--color-text-muted);
+  font-size: 0.8rem;
+  margin: 0.5rem 0 0;
+  min-block-size: 1.1em;
+}
+
+.hosted-gate {
+  align-items: center;
+  background: var(--surface-scrim);
+  display: flex;
+  inset: 0;
+  justify-content: center;
+  padding: 1.5rem;
+  position: fixed;
+  z-index: 1000;
+}
+
+.hosted-gate.hidden {
+  display: none;
+}
+
+.hosted-gate-card {
+  background: var(--color-surface-raised);
+  border-radius: 12px;
+  box-shadow: var(--shadow-floating-soft);
+  color: inherit;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  inline-size: min(26rem, 100%);
+  padding: 1.5rem;
+}
+
+.hosted-gate-title {
+  font-size: 1.2rem;
+  margin: 0;
+}
+
+.hosted-gate-copy,
+.hosted-gate-status {
+  color: var(--color-text-muted);
+  font-size: 0.9rem;
+  margin: 0;
+}
+
+.hosted-gate-status.is-error {
+  color: var(--color-danger);
+}
+
+.hosted-gate-form {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.hosted-gate-live {
+  color: var(--color-text-muted);
+  font-size: 0.8rem;
+  margin: 0;
+  min-block-size: 1.1em;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .hosted-gate-card {
+    transition: opacity 120ms ease;
+  }
+}

package/src/client/styles/foundation/themes.css

@@ -1,6 +1,7 @@
 /* ===== FOUNDATION / THEMES ===== */
 
 :root {
+  color-scheme: light dark;
   --pdf-highlight-bg: rgb(180 0 170 / 25%);
   --pdf-highlight-selected-bg: rgb(0 100 0 / 25%);
   --pdf-selection-bg: rgb(0 90 255 / 25%);
@@ -8,52 +9,47 @@
 
 :root,
 [data-theme="light"] {
-  --color-bg: #f6f8fa;
-  --color-surface: #ffffff;
-  --color-surface-2: #fbfcfd;
-  --color-surface-offset: #f0f3f6;
-  --color-surface-offset-2: #e8edf2;
-  --color-surface-dynamic: #dde3ea;
-  --color-surface-raised: #ffffff;
-  --color-surface-ink: #0b1118;
-  --color-divider: #e3e8ee;
-  --color-border: #cbd4df;
-
-  --color-text: #17212b;
-  --color-text-muted: #596675;
-  --color-text-faint: #8391a1;
-  --color-text-inverse: #f8fafc;
-
-  --color-primary: #2563eb;
-  --color-primary-hover: #1d4ed8;
-  --color-primary-active: #1e40af;
-  --color-primary-contrast: #ffffff;
-  --color-primary-highlight: #dbeafe;
-  --color-comment: #2563eb;
-  --color-comment-soft: rgba(37, 99, 235, 0.08);
-  --color-comment-strong: rgba(37, 99, 235, 0.14);
-  --color-comment-text: #1e40af;
-
-  --color-error: #dc2626;
-  --color-danger: #dc2626;
-  --color-error-highlight: #fce8e8;
-  --color-success: #16a34a;
-  --color-success-highlight: #dcfce7;
-  --color-warning: #d97706;
-  --color-warning-highlight: #fef3c7;
-
-  --diff-add-bg: rgba(22, 163, 74, 0.06);
-  --diff-add-line-bg: rgba(22, 163, 74, 0.14);
-  --diff-add-text: #16a34a;
-  --diff-del-bg: rgba(220, 38, 38, 0.06);
-  --diff-del-line-bg: rgba(220, 38, 38, 0.14);
-  --diff-del-text: #dc2626;
-  --diff-hunk-bg: rgba(37, 99, 235, 0.08);
-  --diff-hunk-text: #2563eb;
-  --diff-gutter: #8391a1;
-
-  --surface-fill-subtle: color-mix(in oklab, var(--color-surface) 92%, var(--color-surface-offset) 8%);
-  --surface-fill-strong: color-mix(in oklab, var(--color-surface-offset) 72%, var(--color-surface-offset-2) 28%);
+  --color-bg: light-dark(#f6f8fa, #0b0f14);
+  --color-surface: light-dark(#ffffff, #11161d);
+  --color-surface-2: light-dark(#fbfcfd, #171d26);
+  --color-surface-offset: light-dark(#f0f3f6, #141a22);
+  --color-surface-offset-2: light-dark(#e8edf2, #1c2530);
+  --color-surface-dynamic: light-dark(#dde3ea, #253140);
+  --color-surface-raised: light-dark(#ffffff, #1a222c);
+  --color-surface-ink: light-dark(#0b1118, #030608);
+  --color-divider: light-dark(#e3e8ee, #242e3a);
+  --color-border: light-dark(#cbd4df, #303c4b);
+  --color-text: light-dark(#17212b, #e6edf3);
+  --color-text-muted: light-dark(#596675, #9aa7b4);
+  --color-text-faint: light-dark(#8391a1, #687584);
+  --color-text-inverse: light-dark(#f8fafc, #0b0f14);
+  --color-primary: light-dark(#2563eb, #60a5fa);
+  --color-primary-hover: light-dark(#1d4ed8, #3b82f6);
+  --color-primary-active: light-dark(#1e40af, #2563eb);
+  --color-primary-contrast: light-dark(#ffffff, #07111f);
+  --color-primary-highlight: light-dark(#dbeafe, #172a45);
+  --color-comment: light-dark(#2563eb, #60a5fa);
+  --color-comment-soft: light-dark(rgba(37, 99, 235, 0.08), rgba(96, 165, 250, 0.1));
+  --color-comment-strong: light-dark(rgba(37, 99, 235, 0.14), rgba(96, 165, 250, 0.16));
+  --color-comment-text: light-dark(#1e40af, #bfdbfe);
+  --color-error: light-dark(#dc2626, #f87171);
+  --color-danger: light-dark(#dc2626, #f87171);
+  --color-error-highlight: light-dark(#fce8e8, #2a1a1a);
+  --color-success: light-dark(#16a34a, #4ade80);
+  --color-success-highlight: light-dark(#dcfce7, #1a2a1a);
+  --color-warning: light-dark(#d97706, #fbbf24);
+  --color-warning-highlight: light-dark(#fef3c7, #2a261a);
+  --diff-add-bg: light-dark(rgba(22, 163, 74, 0.06), rgba(74, 222, 128, 0.08));
+  --diff-add-line-bg: light-dark(rgba(22, 163, 74, 0.14), rgba(74, 222, 128, 0.15));
+  --diff-add-text: light-dark(#16a34a, #4ade80);
+  --diff-del-bg: light-dark(rgba(220, 38, 38, 0.06), rgba(248, 113, 113, 0.08));
+  --diff-del-line-bg: light-dark(rgba(220, 38, 38, 0.14), rgba(248, 113, 113, 0.15));
+  --diff-del-text: light-dark(#dc2626, #f87171);
+  --diff-hunk-bg: light-dark(rgba(37, 99, 235, 0.08), rgba(96, 165, 250, 0.1));
+  --diff-hunk-text: light-dark(#2563eb, #60a5fa);
+  --diff-gutter: light-dark(#8391a1, #687584);
+  --surface-fill-subtle: light-dark(color-mix(in oklab, var(--color-surface) 92%, var(--color-surface-offset) 8%), color-mix(in oklab, var(--color-surface) 88%, var(--color-surface-offset) 12%));
+  --surface-fill-strong: light-dark(color-mix(in oklab, var(--color-surface-offset) 72%, var(--color-surface-offset-2) 28%), color-mix(in oklab, var(--color-surface-offset) 60%, var(--color-surface-offset-2) 40%));
   --surface-overlay: color-mix(in srgb, var(--color-surface) 84%, var(--color-surface-offset) 16%);
   --surface-overlay-soft: color-mix(in srgb, var(--color-surface) 88%, var(--color-surface-offset) 12%);
   --surface-overlay-strong: color-mix(in srgb, var(--color-surface) 90%, var(--color-surface-offset) 10%);
@@ -65,7 +61,7 @@
   --surface-inverse-glass: oklch(0.18 0.02 260 / 0.68);
   --surface-inverse-glass-hover: oklch(0.24 0.02 260 / 0.82);
   --surface-media-canvas: #000;
-  --surface-embed-canvas: #ffffff;
+  --surface-embed-canvas: light-dark(#ffffff, #121212);
   --surface-avatar-muted: rgb(255 255 255 / 0.22);
   --surface-avatar-label: rgb(15 17 23 / 0.84);
   --surface-accent-subtle: color-mix(in oklab, var(--color-primary) 8%, var(--color-surface));
@@ -94,8 +90,8 @@
   --border-comment-active: color-mix(in srgb, var(--color-border) 78%, var(--color-comment) 22%);
   --shadow-comment-outline: 0 0 0 1px oklch(from var(--color-comment) l c h / 0.14);
   --surface-warning-toast: var(--color-warning-highlight);
-  --border-warning-toast: color-mix(in oklab, #f59e0b 84%, #b45309 16%);
-  --text-warning-toast: #422006;
+  --border-warning-toast: light-dark(color-mix(in oklab, #f59e0b 84%, #b45309 16%), color-mix(in oklab, #f59e0b 78%, white 10%));
+  --text-warning-toast: light-dark(#422006, color-mix(in oklab, white 92%, #fef3c7 8%));
   --shadow-warning-toast: var(--shadow-md);
   --border-accent-soft: color-mix(in oklab, var(--color-primary) 22%, transparent);
   --border-accent-muted: color-mix(in oklab, var(--color-primary) 24%, var(--color-border));
@@ -112,241 +108,30 @@
   --shadow-floating-hover: 0 18px 40px oklch(0 0 0 / 0.2);
   --shadow-media-soft: 0 16px 40px oklch(0 0 0 / 0.24);
   --shadow-media-stage: 0 28px 80px oklch(0 0 0 / 0.28);
-  --shadow-media-modal: 0 10px 40px rgb(0 0 0 / 0.35);
+  --shadow-media-modal: light-dark(0 10px 40px rgb(0 0 0 / 0.35), 0 16px 48px rgb(0 0 0 / 0.6));
   --shadow-card-strong: 0 20px 56px oklch(0 0 0 / 0.24);
   --shadow-sheet-inset: inset 0 1px 0 color-mix(in oklab, var(--color-text) 4%, transparent);
   --shadow-focus: 0 0 0 3px oklch(from var(--color-primary) l c h / 0.15);
   --shadow-focus-compact: 0 0 0 2px oklch(from var(--color-primary) l c h / 0.45);
-  --interactive-border: color-mix(in oklab, var(--color-primary) 22%, transparent);
-  --interactive-surface: color-mix(in oklab, var(--color-primary) 14%, transparent);
+  --interactive-border: light-dark(color-mix(in oklab, var(--color-primary) 22%, transparent), color-mix(in oklab, var(--color-primary) 32%, transparent));
+  --interactive-surface: light-dark(color-mix(in oklab, var(--color-primary) 14%, transparent), color-mix(in oklab, var(--color-primary) 18%, transparent));
   --color-text-on-dark: #ffffff;
-  --shadow-sm: 0 1px 2px oklch(0.2 0.02 260 / 0.06);
-  --shadow-md: 0 4px 12px oklch(0.2 0.02 260 / 0.08);
-  --shadow-lg: 0 12px 32px oklch(0.2 0.02 260 / 0.12);
+  --shadow-sm: light-dark(0 1px 2px oklch(0.2 0.02 260 / 0.06), 0 1px 2px oklch(0 0 0 / 0.22));
+  --shadow-md: light-dark(0 4px 12px oklch(0.2 0.02 260 / 0.08), 0 4px 12px oklch(0 0 0 / 0.3));
+  --shadow-lg: light-dark(0 12px 32px oklch(0.2 0.02 260 / 0.12), 0 16px 40px oklch(0 0 0 / 0.45));
 }
 
-[data-theme="dark"] {
-  --color-bg: #0b0f14;
-  --color-surface: #11161d;
-  --color-surface-2: #171d26;
-  --color-surface-offset: #141a22;
-  --color-surface-offset-2: #1c2530;
-  --color-surface-dynamic: #253140;
-  --color-surface-raised: #1a222c;
-  --color-surface-ink: #030608;
-  --color-divider: #242e3a;
-  --color-border: #303c4b;
+[data-theme="light"] {
+  color-scheme: light;
+}
 
-  --color-text: #e6edf3;
-  --color-text-muted: #9aa7b4;
-  --color-text-faint: #687584;
-  --color-text-inverse: #0b0f14;
+[data-theme="dark"] {
+  color-scheme: dark;
   --color-code-text: #abb2bf;
-
-  --color-primary: #60a5fa;
-  --color-primary-hover: #3b82f6;
-  --color-primary-active: #2563eb;
-  --color-primary-contrast: #07111f;
-  --color-primary-highlight: #172a45;
-  --color-comment: #60a5fa;
-  --color-comment-soft: rgba(96, 165, 250, 0.1);
-  --color-comment-strong: rgba(96, 165, 250, 0.16);
-  --color-comment-text: #bfdbfe;
-
-  --color-error: #f87171;
-  --color-danger: #f87171;
-  --color-error-highlight: #2a1a1a;
-  --color-success: #4ade80;
-  --color-success-highlight: #1a2a1a;
-  --color-warning: #fbbf24;
-  --color-warning-highlight: #2a261a;
-
-  --diff-add-bg: rgba(74, 222, 128, 0.08);
-  --diff-add-line-bg: rgba(74, 222, 128, 0.15);
-  --diff-add-text: #4ade80;
-  --diff-del-bg: rgba(248, 113, 113, 0.08);
-  --diff-del-line-bg: rgba(248, 113, 113, 0.15);
-  --diff-del-text: #f87171;
-  --diff-hunk-bg: rgba(96, 165, 250, 0.1);
-  --diff-hunk-text: #60a5fa;
-  --diff-gutter: #687584;
-
-  --surface-fill-subtle: color-mix(in oklab, var(--color-surface) 88%, var(--color-surface-offset) 12%);
-  --surface-fill-strong: color-mix(in oklab, var(--color-surface-offset) 60%, var(--color-surface-offset-2) 40%);
-  --surface-overlay: color-mix(in srgb, var(--color-surface) 84%, var(--color-surface-offset) 16%);
-  --surface-overlay-soft: color-mix(in srgb, var(--color-surface) 88%, var(--color-surface-offset) 12%);
-  --surface-overlay-strong: color-mix(in srgb, var(--color-surface) 90%, var(--color-surface-offset) 10%);
-  --surface-overlay-raised: color-mix(in oklab, var(--color-surface) 94%, transparent);
-  --surface-overlay-header: color-mix(in srgb, var(--color-surface-offset) 76%, var(--color-bg) 24%);
-  --surface-overlay-offset: color-mix(in oklab, var(--color-surface-offset) 82%, transparent);
-  --surface-scrim: oklch(0.1 0 0 / 0.42);
-  --surface-scrim-strong: oklch(0.08 0.01 260 / 0.82);
-  --surface-inverse-glass: oklch(0.18 0.02 260 / 0.68);
-  --surface-inverse-glass-hover: oklch(0.24 0.02 260 / 0.82);
-  --surface-media-canvas: #000;
-  --surface-embed-canvas: #121212;
-  --surface-avatar-muted: rgb(255 255 255 / 0.22);
-  --surface-avatar-label: rgb(15 17 23 / 0.84);
-  --surface-accent-subtle: color-mix(in oklab, var(--color-primary) 8%, var(--color-surface));
-  --surface-accent-soft: color-mix(in oklab, var(--color-primary) 16%, transparent);
-  --surface-accent-strong: color-mix(in oklab, var(--color-primary) 22%, transparent);
-  --surface-success-soft: color-mix(in oklab, var(--color-success) 14%, transparent);
-  --surface-warning-soft: color-mix(in oklab, var(--color-warning) 14%, transparent);
-  --surface-danger-soft: color-mix(in oklab, var(--color-error) 14%, transparent);
-  --surface-comment-shell-header: color-mix(in srgb, var(--color-surface) 97%, var(--color-comment) 3%);
-  --surface-comment-record-hover: color-mix(in srgb, var(--color-surface-2) 92%, var(--color-comment) 8%);
-  --surface-comment-subtle: color-mix(in srgb, var(--color-surface-2) 95%, var(--color-comment) 5%);
-  --surface-comment-subtle-strong: color-mix(in srgb, var(--color-surface-2) 92%, var(--color-comment) 8%);
-  --surface-comment-card: color-mix(in srgb, var(--color-surface) 94%, var(--color-comment) 6%);
-  --surface-comment-elevated: color-mix(in srgb, var(--color-surface) 96%, var(--color-comment) 4%);
-  --surface-comment-offset: color-mix(in srgb, var(--color-surface-offset) 90%, var(--color-comment) 10%);
-  --surface-comment-offset-soft: color-mix(in srgb, var(--color-surface-offset) 88%, var(--color-comment) 12%);
-  --surface-comment-offset-strong: color-mix(in srgb, var(--color-surface-offset) 84%, var(--color-comment) 16%);
-  --surface-comment-offset-active: color-mix(in srgb, var(--color-surface-offset) 72%, var(--color-comment) 28%);
-  --surface-comment-highlight-hover: color-mix(in srgb, var(--color-comment-soft) 74%, var(--color-comment) 26%);
-  --surface-comment-highlight-active: color-mix(in srgb, var(--color-comment-soft) 62%, var(--color-comment) 38%);
-  --surface-comment-selection: color-mix(in srgb, var(--color-surface) 25%, var(--color-comment) 75%);
-  --surface-comment-preview-fade: linear-gradient(180deg, oklch(0 0 0 / 0), color-mix(in srgb, var(--color-surface-2) 95%, var(--color-comment) 5%));
-  --border-comment-soft: color-mix(in srgb, var(--color-divider) 90%, var(--color-comment) 10%);
-  --border-comment-muted: color-mix(in srgb, var(--color-divider) 88%, var(--color-comment) 12%);
-  --border-comment-strong: color-mix(in srgb, var(--color-border) 82%, var(--color-comment) 18%);
-  --border-comment-active: color-mix(in srgb, var(--color-border) 78%, var(--color-comment) 22%);
-  --shadow-comment-outline: 0 0 0 1px oklch(from var(--color-comment) l c h / 0.14);
-  --surface-warning-toast: var(--color-warning-highlight);
-  --border-warning-toast: color-mix(in oklab, #f59e0b 78%, white 10%);
-  --text-warning-toast: color-mix(in oklab, white 92%, #fef3c7 8%);
-  --shadow-warning-toast: var(--shadow-md);
-  --border-accent-soft: color-mix(in oklab, var(--color-primary) 22%, transparent);
-  --border-accent-muted: color-mix(in oklab, var(--color-primary) 24%, var(--color-border));
-  --border-accent-strong: color-mix(in oklab, var(--color-primary) 34%, var(--color-border));
-  --border-accent-stronger: color-mix(in oklab, var(--color-primary) 40%, var(--color-border));
-  --shadow-accent-inset: inset 0 0 0 1px color-mix(in oklab, var(--color-primary) 14%, transparent);
-  --shadow-accent-outline: 0 0 0 1px color-mix(in oklab, var(--color-primary) 16%, transparent);
-  --shadow-accent-halo: 0 0 0 3px oklch(from var(--color-primary) l c h / 0.16);
-  --shadow-accent-ring: 0 0 0 2px var(--color-surface), 0 0 0 4px oklch(from var(--color-primary) l c h / 0.18);
-  --shadow-accent-ring-strong: 0 0 0 2px var(--color-bg), 0 0 0 4px oklch(from var(--color-primary) l c h / 0.45);
-  --shadow-accent-ring-solid: 0 0 0 2px var(--color-primary), 0 0 0 4px oklch(from var(--color-primary) l c h / 0.2);
-  --shadow-elevated-soft: 0 10px 24px color-mix(in oklab, var(--color-surface-ink) 10%, transparent);
-  --shadow-floating-soft: 0 14px 34px oklch(0 0 0 / 0.18);
-  --shadow-floating-hover: 0 18px 40px oklch(0 0 0 / 0.2);
-  --shadow-media-soft: 0 16px 40px oklch(0 0 0 / 0.24);
-  --shadow-media-stage: 0 28px 80px oklch(0 0 0 / 0.28);
-  --shadow-media-modal: 0 16px 48px rgb(0 0 0 / 0.6);
-  --shadow-card-strong: 0 20px 56px oklch(0 0 0 / 0.24);
-  --shadow-sheet-inset: inset 0 1px 0 color-mix(in oklab, var(--color-text) 4%, transparent);
-  --shadow-focus: 0 0 0 3px oklch(from var(--color-primary) l c h / 0.15);
-  --shadow-focus-compact: 0 0 0 2px oklch(from var(--color-primary) l c h / 0.45);
-  --interactive-border: color-mix(in oklab, var(--color-primary) 32%, transparent);
-  --interactive-surface: color-mix(in oklab, var(--color-primary) 18%, transparent);
-  --color-text-on-dark: #ffffff;
-  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.22);
-  --shadow-md: 0 4px 12px oklch(0 0 0 / 0.3);
-  --shadow-lg: 0 16px 40px oklch(0 0 0 / 0.45);
 }
 
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme]) {
-    --color-bg: #0b0f14;
-    --color-surface: #11161d;
-    --color-surface-2: #171d26;
-    --color-surface-offset: #141a22;
-    --color-surface-offset-2: #1c2530;
-    --color-surface-dynamic: #253140;
-    --color-surface-raised: #1a222c;
-    --color-surface-ink: #030608;
-    --color-divider: #242e3a;
-    --color-border: #303c4b;
-    --color-text: #e6edf3;
-    --color-text-muted: #9aa7b4;
-    --color-text-faint: #687584;
-    --color-text-inverse: #0b0f14;
     --color-code-text: #abb2bf;
-    --color-primary: #60a5fa;
-    --color-primary-hover: #3b82f6;
-    --color-primary-active: #2563eb;
-    --color-primary-contrast: #07111f;
-    --color-primary-highlight: #172a45;
-    --color-comment: #60a5fa;
-    --color-comment-soft: rgba(96, 165, 250, 0.1);
-    --color-comment-strong: rgba(96, 165, 250, 0.16);
-    --color-comment-text: #bfdbfe;
-    --color-error: #f87171;
-    --color-danger: #f87171;
-    --color-error-highlight: #2a1a1a;
-    --color-success: #4ade80;
-    --color-success-highlight: #1a2a1a;
-    --color-warning: #fbbf24;
-    --color-warning-highlight: #2a261a;
-    --surface-fill-subtle: color-mix(in oklab, var(--color-surface) 88%, var(--color-surface-offset) 12%);
-    --surface-fill-strong: color-mix(in oklab, var(--color-surface-offset) 60%, var(--color-surface-offset-2) 40%);
-    --surface-overlay: color-mix(in srgb, var(--color-surface) 84%, var(--color-surface-offset) 16%);
-    --surface-overlay-soft: color-mix(in srgb, var(--color-surface) 88%, var(--color-surface-offset) 12%);
-    --surface-overlay-strong: color-mix(in srgb, var(--color-surface) 90%, var(--color-surface-offset) 10%);
-    --surface-overlay-raised: color-mix(in oklab, var(--color-surface) 94%, transparent);
-    --surface-overlay-header: color-mix(in srgb, var(--color-surface-offset) 76%, var(--color-bg) 24%);
-    --surface-overlay-offset: color-mix(in oklab, var(--color-surface-offset) 82%, transparent);
-    --surface-scrim: oklch(0.1 0 0 / 0.42);
-    --surface-scrim-strong: oklch(0.08 0.01 260 / 0.82);
-    --surface-inverse-glass: oklch(0.18 0.02 260 / 0.68);
-    --surface-inverse-glass-hover: oklch(0.24 0.02 260 / 0.82);
-    --surface-media-canvas: #000;
-    --surface-embed-canvas: #121212;
-    --surface-avatar-muted: rgb(255 255 255 / 0.22);
-    --surface-avatar-label: rgb(15 17 23 / 0.84);
-    --surface-accent-subtle: color-mix(in oklab, var(--color-primary) 8%, var(--color-surface));
-    --surface-accent-soft: color-mix(in oklab, var(--color-primary) 16%, transparent);
-    --surface-accent-strong: color-mix(in oklab, var(--color-primary) 22%, transparent);
-    --surface-success-soft: color-mix(in oklab, var(--color-success) 14%, transparent);
-    --surface-warning-soft: color-mix(in oklab, var(--color-warning) 14%, transparent);
-    --surface-danger-soft: color-mix(in oklab, var(--color-error) 14%, transparent);
-    --surface-comment-shell-header: color-mix(in srgb, var(--color-surface) 97%, var(--color-comment) 3%);
-    --surface-comment-record-hover: color-mix(in srgb, var(--color-surface-2) 92%, var(--color-comment) 8%);
-    --surface-comment-subtle: color-mix(in srgb, var(--color-surface-2) 95%, var(--color-comment) 5%);
-    --surface-comment-subtle-strong: color-mix(in srgb, var(--color-surface-2) 92%, var(--color-comment) 8%);
-    --surface-comment-card: color-mix(in srgb, var(--color-surface) 94%, var(--color-comment) 6%);
-    --surface-comment-elevated: color-mix(in srgb, var(--color-surface) 96%, var(--color-comment) 4%);
-    --surface-comment-offset: color-mix(in srgb, var(--color-surface-offset) 90%, var(--color-comment) 10%);
-    --surface-comment-offset-soft: color-mix(in srgb, var(--color-surface-offset) 88%, var(--color-comment) 12%);
-    --surface-comment-offset-strong: color-mix(in srgb, var(--color-surface-offset) 84%, var(--color-comment) 16%);
-    --surface-comment-offset-active: color-mix(in srgb, var(--color-surface-offset) 72%, var(--color-comment) 28%);
-    --surface-comment-highlight-hover: color-mix(in srgb, var(--color-comment-soft) 74%, var(--color-comment) 26%);
-    --surface-comment-highlight-active: color-mix(in srgb, var(--color-comment-soft) 62%, var(--color-comment) 38%);
-    --surface-comment-selection: color-mix(in srgb, var(--color-surface) 25%, var(--color-comment) 75%);
-    --surface-comment-preview-fade: linear-gradient(180deg, oklch(0 0 0 / 0), color-mix(in srgb, var(--color-surface-2) 95%, var(--color-comment) 5%));
-    --border-comment-soft: color-mix(in srgb, var(--color-divider) 90%, var(--color-comment) 10%);
-    --border-comment-muted: color-mix(in srgb, var(--color-divider) 88%, var(--color-comment) 12%);
-    --border-comment-strong: color-mix(in srgb, var(--color-border) 82%, var(--color-comment) 18%);
-    --border-comment-active: color-mix(in srgb, var(--color-border) 78%, var(--color-comment) 22%);
-    --shadow-comment-outline: 0 0 0 1px oklch(from var(--color-comment) l c h / 0.14);
-    --surface-warning-toast: var(--color-warning-highlight);
-    --border-warning-toast: color-mix(in oklab, #f59e0b 78%, white 10%);
-    --text-warning-toast: color-mix(in oklab, white 92%, #fef3c7 8%);
-    --shadow-warning-toast: var(--shadow-md);
-    --border-accent-soft: color-mix(in oklab, var(--color-primary) 22%, transparent);
-    --border-accent-muted: color-mix(in oklab, var(--color-primary) 24%, var(--color-border));
-    --border-accent-strong: color-mix(in oklab, var(--color-primary) 34%, var(--color-border));
-    --border-accent-stronger: color-mix(in oklab, var(--color-primary) 40%, var(--color-border));
-    --shadow-accent-inset: inset 0 0 0 1px color-mix(in oklab, var(--color-primary) 14%, transparent);
-    --shadow-accent-outline: 0 0 0 1px color-mix(in oklab, var(--color-primary) 16%, transparent);
-    --shadow-accent-halo: 0 0 0 3px oklch(from var(--color-primary) l c h / 0.16);
-    --shadow-accent-ring: 0 0 0 2px var(--color-surface), 0 0 0 4px oklch(from var(--color-primary) l c h / 0.18);
-    --shadow-accent-ring-strong: 0 0 0 2px var(--color-bg), 0 0 0 4px oklch(from var(--color-primary) l c h / 0.45);
-    --shadow-accent-ring-solid: 0 0 0 2px var(--color-primary), 0 0 0 4px oklch(from var(--color-primary) l c h / 0.2);
-    --shadow-elevated-soft: 0 10px 24px color-mix(in oklab, var(--color-surface-ink) 10%, transparent);
-    --shadow-floating-soft: 0 14px 34px oklch(0 0 0 / 0.18);
-    --shadow-floating-hover: 0 18px 40px oklch(0 0 0 / 0.2);
-    --shadow-media-soft: 0 16px 40px oklch(0 0 0 / 0.24);
-    --shadow-media-stage: 0 28px 80px oklch(0 0 0 / 0.28);
-    --shadow-media-modal: 0 16px 48px rgb(0 0 0 / 0.6);
-    --shadow-card-strong: 0 20px 56px oklch(0 0 0 / 0.24);
-    --shadow-sheet-inset: inset 0 1px 0 color-mix(in oklab, var(--color-text) 4%, transparent);
-    --shadow-focus: 0 0 0 3px oklch(from var(--color-primary) l c h / 0.15);
-    --shadow-focus-compact: 0 0 0 2px oklch(from var(--color-primary) l c h / 0.45);
-    --interactive-border: color-mix(in oklab, var(--color-primary) 32%, transparent);
-    --interactive-surface: color-mix(in oklab, var(--color-primary) 18%, transparent);
-    --color-text-on-dark: #ffffff;
-    --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.22);
-    --shadow-md: 0 4px 12px oklch(0 0 0 / 0.3);
-    --shadow-lg: 0 16px 40px oklch(0 0 0 / 0.45);
   }
 }

package/src/client/styles/foundation/tokens.css

@@ -25,8 +25,8 @@
   --text-title-sm: 15px;
   --text-title-md: 18px;
 
-  --font-body: 'Inter Variable', 'Inter', system-ui, sans-serif;
-  --font-display: 'Inter Variable', 'Inter', system-ui, sans-serif;
+  --font-body: system-ui, sans-serif;
+  --font-display: system-ui, sans-serif;
   --font-prose: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', 'Noto Sans', 'Liberation Sans', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
   --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', 'SF Mono', monospace;
 

package/src/client/styles/layout/editor-page.css

@@ -15,19 +15,6 @@
   gap: var(--space-2);
   max-width: 340px;
   text-align: center;
-  animation: empty-state-rise 320ms cubic-bezier(0.16, 1, 0.3, 1);
-}
-
-@keyframes empty-state-rise {
-  from {
-    opacity: 0;
-    transform: translateY(8px);
-  }
-
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
 }
 
 .empty-state-logo {
@@ -49,7 +36,6 @@
 
 .empty-state-logo svg {
   display: block;
-  opacity: 0.72;
 }
 
 .empty-state-title {

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

@@ -103,6 +103,22 @@
   background: var(--color-surface-offset);
 }
 
+.file-context-search {
+  width: 100%;
+  margin-bottom: var(--space-1);
+  padding: var(--space-1) var(--space-2);
+  border: 1px solid var(--color-divider);
+  border-radius: var(--radius-sm);
+  background: var(--color-surface-offset);
+  color: var(--color-text);
+  font-size: var(--text-ui-sm);
+  outline: none;
+}
+
+.file-context-search:focus {
+  border-color: var(--color-primary);
+}
+
 .file-context-danger {
   color: var(--color-error);
 }

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

@@ -115,15 +115,15 @@
   }
 
   .toolbar-presence-cluster .user-avatar {
-    width: 22px;
-    height: 22px;
-    margin-left: -3px;
+    width: 24px;
+    height: 24px;
+    margin-left: 2px;
     border-width: 1.5px;
   }
 
   .toolbar-presence-cluster .user-avatar.is-local {
-    width: 22px;
-    min-width: 22px;
+    width: 24px;
+    min-width: 24px;
     margin-right: 0;
     padding: 0;
     gap: 0;

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

@@ -67,7 +67,7 @@
 }
 
 .pane-label {
-  color: var(--color-text-faint);
+  color: var(--color-text-muted);
   text-transform: uppercase;
   letter-spacing: 0.08em;
   font-size: var(--text-meta);
@@ -155,6 +155,10 @@
   font-weight: 600;
 }
 
+.editor-container.hide-cursor-names .cm-ySelectionInfo {
+  display: none;
+}
+
 .preview-body {
   --preview-floating-sidebar-gap: var(--space-3);
   --preview-floating-comments-width: var(--panel-comments-width);
@@ -168,6 +172,8 @@
 }
 
 .preview-container {
+  /* Preview commits and scroll sync explicitly preserve the reading position. */
+  overflow-anchor: none;
   flex: 1;
   min-width: 0;
   overflow-x: hidden;
@@ -472,6 +478,25 @@ body.html-preview-maximized-open #htmlPreviewMaximize {
   height: 100% !important;
 }
 
+.drawio-embed.is-maximized {
+  position: fixed;
+  inset: var(--space-4);
+  z-index: 172;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  width: auto;
+  max-width: none;
+  margin: 0;
+}
+
+.preview-content.is-drawio-file-preview .drawio-embed.is-maximized {
+  width: auto !important;
+  height: auto !important;
+  min-height: 0;
+}
+
+
 .preview-shell {
   display: flex;
   align-items: center;