收口 Makelore 客户端变更

2026-08-12 22:35:06 +08:00
parent 253bad8b40
commit f4113a872f
232 changed files with 4617 additions and 20121 deletions
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -2,6 +2,44 @@
@tailwind components;
@tailwind utilities;

+/*
+ * Bundled renderer typography.
+ *
+ * Inter owns Latin, Cyrillic, Greek and common UI punctuation while Source
+ * Han Sans SC owns Han ideographs and CJK punctuation. They use separate
+ * family names intentionally: Chromium can then perform reliable glyph
+ * fallback instead of keeping the first loaded face for the whole family.
+ */
+@font-face {
+  font-family: "Makelore Latin";
+  src: url("../assets/fonts/InterVariable.woff2") format("woff2");
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  unicode-range: U+0000-024F, U+0370-052F, U+1E00-1EFF, U+2000-206F,
+    U+20A0-20CF, U+2100-214F, U+2190-21FF, U+2C60-2C7F, U+A720-A7FF;
+}
+
+@font-face {
+  font-family: "Makelore Latin";
+  src: url("../assets/fonts/InterVariable-Italic.woff2") format("woff2");
+  font-style: italic;
+  font-weight: 100 900;
+  font-display: swap;
+  unicode-range: U+0000-024F, U+0370-052F, U+1E00-1EFF, U+2000-206F,
+    U+20A0-20CF, U+2100-214F, U+2190-21FF, U+2C60-2C7F, U+A720-A7FF;
+}
+
+@font-face {
+  font-family: "Makelore CJK";
+  src: url("../assets/fonts/SourceHanSansSC-Regular.otf") format("opentype");
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  unicode-range: U+2E80-2EFF, U+3000-303F, U+31C0-31EF, U+3400-4DBF,
+    U+4E00-9FFF, U+F900-FAFF, U+FE30-FE4F, U+FF00-FFEF, U+20000-2FA1F;
+}
+
 /* ──────────────────────────────────────────────────────────────────────────
 * Makelore 2.0 design tokens — single light-theme CSS variable layer
 * ──────────────────────────────────────────────────────────────────────────
@@ -29,6 +67,16 @@

@layer base {
  :root {
+    /* ── Makelore typography ───────────────────────────────────── */
+    --font-sans: "Makelore Latin", "Makelore CJK", -apple-system, BlinkMacSystemFont,
+      "Segoe UI", "Noto Sans", "PingFang SC", "Hiragino Sans GB",
+      "Microsoft YaHei", Roboto, "Helvetica Neue", Arial,
+      "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
+      "Noto Color Emoji", sans-serif;
+    --font-latin: "Makelore Latin";
+    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco,
+      Consolas, "Liberation Mono", "Courier New", monospace;
+
    /* ── shadcn semantic tokens ─────────────────────────────────── */
    --background: 0 0% 100%;
    --foreground: 220 20% 16%;
@@ -55,6 +103,7 @@
    --brand: 15 82% 45%;
    --brand-hover: 15 84% 38%;
    --brand-soft: 15 88% 95%;
+    --brand-selected: 15 82% 86%;
    --brand-quiet: 15 52% 58%;
    --brand-blue: 213 34% 35%;
    --accent-soft: 15 88% 95%;
@@ -69,15 +118,41 @@
  }
 }

+/* Preserve Japanese regional glyph forms while still keeping Latin text
+ * consistent with the bundled Inter face. */
+html[data-ui-language='ja'] {
+  --font-sans: var(--font-latin), -apple-system, BlinkMacSystemFont,
+    "Hiragino Sans", "Yu Gothic", "Noto Sans JP", "Segoe UI", Roboto,
+    "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji",
+    "Segoe UI Symbol", "Noto Color Emoji", sans-serif;
+}
+
+/* Russian uses the bundled Latin face for Cyrillic where available and keeps
+ * Noto/system fallback available for characters outside Inter's coverage. */
+html[data-ui-language='ru'] {
+  --font-sans: var(--font-latin), "Noto Sans", -apple-system,
+    BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
+    "Noto Color Emoji", sans-serif;
+}
+
@layer base {
  * {
    @apply border-border;
  }

+  html,
+  body,
+  #root {
+    background-color: transparent;
+  }
+
  body {
-    @apply bg-background text-foreground;
-    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+    @apply bg-transparent text-foreground;
+    font-family: var(--font-sans);
    font-feature-settings: "rlig" 1, "calt" 1;
+    font-kerning: normal;
+    font-optical-sizing: auto;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
@@ -162,6 +237,35 @@
  backdrop-filter: blur(18px) saturate(135%);
 }

+/* Sidebar material: keep the rail visibly white while allowing a restrained
+ * amount of the canvas to show through. A low white alpha reads as gray over
+ * the transparent native window material, so the light surface needs to stay
+ * opaque enough to remain a light-theme surface in the pinned state. */
+.sidebar-glass-surface {
+  background-color: hsl(var(--background) / 0.88);
+  -webkit-backdrop-filter: blur(24px) saturate(140%);
+  backdrop-filter: blur(24px) saturate(140%);
+  box-shadow: inset -1px 0 0 hsl(var(--border) / 0.58);
+}
+
+@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
+  .sidebar-glass-surface {
+    background-color: hsl(var(--background));
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+    box-shadow: inset -1px 0 0 hsl(var(--border));
+  }
+}
+
+/* Hover preview: the full-window rail must be an opaque surface so the
+ * temporary navigation state does not inherit a dark native window backdrop.
+ * The pinned rail continues to use .sidebar-glass-surface above. */
+.sidebar-peek-surface {
+  background-color: hsl(var(--background));
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
+}
+
 .surface-card {
  background-color: hsl(var(--card));
  box-shadow: 0 1px 2px hsl(220 20% 16% / 0.035), 0 12px 30px hsl(220 20% 16% / 0.045);
@@ -196,19 +300,6 @@
  padding: 0;
 }

-/* Execution traces are secondary context: reveal them with a short, quiet
- * transition so the final answer remains the visual anchor of a turn. */
-.execution-trace-content,
-.execution-trace-detail {
-  opacity: 1;
-  transform: translateY(0);
-  transition: opacity 180ms cubic-bezier(0.23, 1, 0.32, 1), transform 180ms cubic-bezier(0.23, 1, 0.32, 1);
-  @starting-style {
-    opacity: 0;
-    transform: translateY(-4px);
-  }
-}
-
 .execution-trace-live-dot {
  display: inline-block;
  width: 0.375rem;
@@ -219,6 +310,14 @@
  box-shadow: 0 0 0 3px hsl(var(--brand) / 0.12);
 }

+/* Keep long completed transcripts cheap to paint while the active response
+ * continues to stream. Chromium can skip off-screen message subtrees without
+ * changing their scroll geometry. */
+.chat-transcript-message {
+  content-visibility: auto;
+  contain-intrinsic-size: 0 160px;
+}
+
 .motion-press {
  transition-property: background-color, border-color, color, box-shadow, opacity, transform;
  transition-duration: 220ms;
@@ -229,6 +328,130 @@
  transform: scale(0.985);
 }

+/* Agent switching keeps the card in place while its content disclosure
+ * retargets. The active rail is a separate layer so its enter/exit does not
+ * make the whole card jump when the selection changes. */
+.agent-switch-card {
+  --agent-switch-duration: 180ms;
+  --agent-switch-ease: cubic-bezier(0.22, 1, 0.36, 1);
+  transition:
+    background-color var(--agent-switch-duration) var(--agent-switch-ease),
+    border-color var(--agent-switch-duration) var(--agent-switch-ease),
+    box-shadow var(--agent-switch-duration) var(--agent-switch-ease);
+}
+
+.agent-switch-card::before {
+  position: absolute;
+  inset-block: 0.5rem;
+  left: 0;
+  width: 0.125rem;
+  border-radius: 9999px;
+  background-color: hsl(var(--brand));
+  content: '';
+  opacity: 0;
+  pointer-events: none;
+  transform: scaleY(0.55);
+  transform-origin: center;
+  transition:
+    opacity 120ms ease-out,
+    transform var(--agent-switch-duration) var(--agent-switch-ease),
+    background-color var(--agent-switch-duration) var(--agent-switch-ease);
+}
+
+.agent-switch-card[data-selected='true']::before {
+  opacity: 1;
+  transform: scaleY(1);
+}
+
+/* Expandable workspace sections share the Codex-style reveal curve. */
+.codex-disclosure {
+  --disclosure-duration: 180ms;
+  --disclosure-ease: cubic-bezier(0.23, 1, 0.32, 1);
+  display: grid;
+  grid-template-rows: 0fr;
+  opacity: 0;
+  transform: translateY(-5px);
+  visibility: hidden;
+  pointer-events: none;
+  transition:
+    grid-template-rows var(--disclosure-duration) var(--disclosure-ease),
+    opacity var(--disclosure-duration) var(--disclosure-ease),
+    transform var(--disclosure-duration) var(--disclosure-ease),
+    visibility 0s linear var(--disclosure-duration);
+}
+
+.codex-disclosure[data-state='open'] {
+  --disclosure-duration: 240ms;
+  grid-template-rows: 1fr;
+  opacity: 1;
+  transform: translateY(0);
+  visibility: visible;
+  pointer-events: auto;
+  transition-delay: 0s;
+}
+
+.codex-disclosure-inner {
+  min-height: 0;
+  overflow: hidden;
+}
+
+.agent-session-disclosure {
+  --disclosure-duration: 160ms;
+}
+
+.agent-session-disclosure[data-state='open'] {
+  --disclosure-duration: 220ms;
+}
+
+.codex-browser-drawer {
+  transform: translateX(100%);
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  transition:
+    transform 180ms cubic-bezier(0.23, 1, 0.32, 1),
+    opacity 180ms cubic-bezier(0.23, 1, 0.32, 1),
+    visibility 0s linear 180ms;
+  @starting-style {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+}
+
+.codex-browser-drawer[data-state='open'] {
+  transform: translateX(0);
+  opacity: 1;
+  visibility: visible;
+  pointer-events: auto;
+  transition-duration: 240ms;
+  transition-delay: 0s;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .agent-switch-card {
+    transition-duration: 0ms;
+  }
+
+  .agent-switch-card::before {
+    transform: none;
+    transition-duration: 0ms;
+  }
+
+  .codex-disclosure,
+  .codex-disclosure[data-state='open'] {
+    --disclosure-duration: 160ms;
+    transform: none;
+    transition-property: opacity, visibility;
+  }
+
+  .codex-browser-drawer,
+  .codex-browser-drawer[data-state='open'] {
+    transform: none;
+    transition-property: opacity, visibility;
+    transition-duration: 160ms;
+  }
+}
+
 /* Adapted from Uiverse.io card by Pravins01 (odd-fly-66). The card keeps the
 * original pseudo-element rotation and blur animation, with Makelore colors. */
 .module-option-card {
@@ -340,6 +563,31 @@
  margin-bottom: 0.25em;
 }

+/* Assistant replies can contain many short markdown paragraphs. Keep their
+ * rhythm compact so blank lines in model output do not create oversized gaps. */
+.chat-assistant-message-markdown p {
+  margin-top: 0.5em;
+  margin-bottom: 0.5em;
+}
+
+.chat-assistant-message-markdown > :first-child {
+  margin-top: 0;
+}
+
+.chat-assistant-message-markdown > :last-child {
+  margin-bottom: 0;
+}
+
+.chat-assistant-message-markdown ul,
+.chat-assistant-message-markdown ol {
+  margin-top: 0.35em;
+  margin-bottom: 0.35em;
+}
+
+.chat-assistant-message-markdown li {
+  margin-bottom: 0.125em;
+}
+
 .prose pre {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
@@ -441,9 +689,4 @@
    transform: scaleY(1);
  }

-  .execution-trace-content,
-  .execution-trace-detail {
-    transition: none;
-    transform: none;
-  }
 }