@springbrand/message-panel 0.1.3-alpha.0 → 0.1.3-alpha.2

package/cloud-os/styles/cloud-os.css

@@ -0,0 +1,559 @@
+/* ============================================================================
+ * cloud-os 主题层 —— 从 cloudflare-os-main(packages/workshop-frontend/src/styles.css
+ * 与 ChatInterface.module.css)整段拷贝后做「作用域化」适配。
+ *
+ * 适配了什么、为什么:
+ *  1. 只有 kumo 命名空间的 token(--color-kumo-* / --text-color-kumo-*)进 @theme,
+ *     因为 Tailwind v4 只有见到 @theme 才会生成 bg-kumo-base / text-kumo-subtle
+ *     这类 utility。这些名字在 universal-agent-ui 里不存在,不会撞车。
+ *  2. 通用 token(字体、圆角、字号、缓动)一律**不进 @theme**,而是挂在
+ *     .cloud-os-root 上。CSS 自定义属性会继承,所以 cloud-os 子树里的 rounded-lg
+ *     拿到的是 cloudflare-os 的 0.5rem,外层 ui 的 shadcn 主题(--radius:10px)
+ *     分毫不动。这是本文件唯一的「适配性改动」,其余是原样搬运。
+ *     (注意:这段注释里不能出现连着的星号加斜杠 —— 会提前闭合注释,
+ *      @theme 块就会被当成裸文本,kumo 的 utility 一个都生成不出来。踩过。)
+ *  3. 暗色不再挂 [data-mode="dark"] 全局,而是 .cloud-os-root[data-mode="dark"],
+ *     由 <CloudOsRoot> 组件自己打标记。
+ *  4. 原 ChatInterface.module.css 是 CSS Module;本包不接 CSS Module 构建,
+ *     统一改成 cos- 前缀的全局类名。
+ * ========================================================================== */
+
+@theme {
+  /* ===== KUMO 语义色(浅色底本)===== */
+  --color-kumo-base: #fcfcfb;
+  --color-kumo-elevated: #f8f8f7;
+  --color-kumo-tint: #f3f3f1;
+  --color-kumo-overlay: #fbfbfa;
+  --color-kumo-recessed: #efeeec;
+  --color-kumo-control: #ffffff;
+  --color-kumo-contrast: #14110f;
+  --color-kumo-fill: #e8e7e4;
+  --color-kumo-fill-hover: #dededb;
+  --color-kumo-interact: #cac8c3;
+
+  --color-kumo-brand: #ff4801;
+  --color-kumo-brand-hover: #e03f00;
+  /* Kumo 基座里带的两个,cloudflare-os 只在暗色覆盖了 strong;浅色补上底本值。 */
+  --color-kumo-strong: #000000;
+  --color-kumo-inverse: #ffffff;
+
+  --color-kumo-line: #1411100f;
+  --color-kumo-ring: #cac8c3;
+
+  --color-kumo-bubble-user: #f1f0ee;
+
+  --color-kumo-info: oklch(62.3% 0.214 259.815);
+  --color-kumo-info-tint: oklch(90% 0.06 250);
+  --color-kumo-warning: oklch(79.5% 0.184 86.047);
+  --color-kumo-warning-tint: oklch(92% 0.08 85);
+  --color-kumo-danger: oklch(63.7% 0.237 25.331);
+  --color-kumo-danger-tint: oklch(92% 0.06 25);
+  --color-kumo-success: oklch(72.3% 0.219 149.579);
+  --color-kumo-success-tint: oklch(92% 0.08 150);
+
+  --color-kumo-tip-shadow: #14111014;
+  --color-kumo-tip-stroke: transparent;
+
+  /* 文本色 token(Tailwind v4 的 --text-color-* 命名空间 → text-kumo-* utility) */
+  --text-color-kumo-default: #1c1a18;
+  --text-color-kumo-default-hover: #100f0d;
+  --text-color-kumo-inverse: #ffffff;
+  --text-color-kumo-strong: #100f0d;
+  --text-color-kumo-subtle: oklch(52% 0.006 60);
+  --text-color-kumo-inactive: oklch(66% 0.005 60);
+  --text-color-kumo-brand: #ff4801;
+  --text-color-kumo-link: #ff4801;
+  --text-color-kumo-success: oklch(72.3% 0.219 149.579);
+  --text-color-kumo-danger: oklch(63.7% 0.237 25.331);
+  --text-color-kumo-warning: oklch(47.6% 0.114 61.907);
+
+  /* cloud-os 自有品牌档(和 kumo token 并用,避免和 shadcn 的 --accent 撞名) */
+  --color-cos-accent-100: #ff4801;
+  --color-cos-accent-200: #ff7038;
+  --color-cos-status-live: oklch(72.3% 0.219 149.579);
+  --color-cos-status-draft: oklch(68.1% 0.162 75.834);
+  --color-cos-status-building: oklch(62.3% 0.214 259.815);
+}
+
+/* ── 作用域根:通用 token 只在 cloud-os 子树内生效 ─────────────────────────── */
+.cloud-os-root {
+  --font-sans:
+    "FT Kunst Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
+    "Helvetica Neue", sans-serif;
+  --font-mono: "Apercu Mono Pro", "SF Mono", Menlo, Monaco, Consolas, monospace;
+
+  /* cloudflare-os 把 Kumo 压小的字号还原成 Tailwind 默认档 */
+  --text-xs: 0.75rem;
+  --text-xs--line-height: 1rem;
+  --text-sm: 0.875rem;
+  --text-sm--line-height: 1.25rem;
+  --text-base: 1rem;
+  --text-base--line-height: 1.5rem;
+  --text-lg: 1.125rem;
+  --text-lg--line-height: 1.75rem;
+
+  --radius-sm: 0.25rem;
+  --radius-md: 0.375rem;
+  --radius-lg: 0.5rem;
+  --radius-xl: 0.75rem;
+  --radius-2xl: 1rem;
+
+  --spacing: 0.25rem;
+
+  --ease-in: cubic-bezier(0.4, 0, 1, 1);
+  --ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+  --ease-out-strong: cubic-bezier(0.23, 1, 0.32, 1);
+  --ease-in-out-strong: cubic-bezier(0.77, 0, 0.175, 1);
+  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
+  --default-transition-duration: 0.15s;
+  --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+
+  --shadow-stack:
+    1px 6px 6px 0 #fff3 inset, 0 0 0px 0 #ffffff59 inset, 0 4px 12px 0 #00000005,
+    0 0 0px 0 #00000005, 0 2px 12px 0 #00000008;
+
+  --color-selection-bg: #ffe9e0;
+  --color-selection-text: #ff500a;
+
+  font-family: var(--font-sans);
+  background-color: var(--color-kumo-base);
+  color: var(--text-color-kumo-default);
+  -webkit-font-smoothing: antialiased;
+}
+
+/* ── 暗色:Seal 紫调深色盘(hue 285),不是中性黑 ──────────────────────────── */
+.cloud-os-root[data-mode="dark"] {
+  --color-kumo-base: oklch(0.115 0.012 285);
+  --color-kumo-elevated: oklch(0.155 0.011 285);
+  --color-kumo-tint: oklch(0.225 0.025 285);
+  --color-kumo-overlay: oklch(0.155 0.011 285);
+  --color-kumo-recessed: oklch(0.1 0.012 285);
+  --color-kumo-control: oklch(0.155 0.011 285);
+  --color-kumo-contrast: var(--color-kumo-brand);
+  --color-kumo-strong: var(--color-kumo-brand-hover);
+  --color-kumo-inverse: #ffffff;
+  --color-kumo-fill: oklch(0.225 0.025 285);
+  --color-kumo-fill-hover: oklch(0.295 0.045 285);
+  --color-kumo-interact: oklch(0.34 0.022 285);
+  --color-kumo-line: oklch(0.34 0.022 285);
+  --color-kumo-ring: oklch(0.52 0.065 285);
+  --color-kumo-bubble-user: oklch(0.225 0.025 285);
+
+  --color-kumo-brand: #b84e00;
+  --color-kumo-brand-hover: #a54200;
+
+  --color-kumo-info: oklch(62.3% 0.214 259.815);
+  --color-kumo-info-tint: oklch(0.25 0.065 259.815);
+  --color-kumo-warning: oklch(55.5% 0.163 48.998);
+  --color-kumo-warning-tint: oklch(0.27 0.06 84.429);
+  --color-kumo-danger: oklch(50.5% 0.213 27.518);
+  --color-kumo-danger-tint: oklch(0.25 0.065 25.331);
+  --color-kumo-success: oklch(52.7% 0.154 150.069);
+  --color-kumo-success-tint: oklch(0.25 0.06 150.069);
+
+  --color-kumo-tip-shadow: #00000066;
+  --color-kumo-tip-stroke: oklch(0.34 0.022 285);
+
+  --text-color-kumo-default: oklch(0.92 0.01 285);
+  --text-color-kumo-default-hover: oklch(0.97 0.006 285);
+  --text-color-kumo-inverse: #ffffff;
+  --text-color-kumo-strong: oklch(0.92 0.01 285);
+  --text-color-kumo-subtle: oklch(0.66 0.02 285);
+  --text-color-kumo-inactive: oklch(0.58 0.025 285);
+  --text-color-kumo-brand: #ff8a5c;
+  --text-color-kumo-link: #ff8a5c;
+  --text-color-kumo-success: oklch(79.2% 0.209 151.711);
+  --text-color-kumo-danger: oklch(70.4% 0.191 22.216);
+  --text-color-kumo-warning: oklch(82.8% 0.189 84.429);
+
+  --color-cos-accent-100: #b84e00;
+  --color-cos-accent-200: #ff8a5c;
+  --color-cos-status-live: oklch(79.2% 0.209 151.711);
+  --color-cos-status-draft: oklch(82.8% 0.189 84.429);
+  --color-cos-status-building: oklch(74% 0.16 250);
+
+  --color-selection-bg: color-mix(in srgb, var(--color-kumo-brand) 28%, transparent);
+  --color-selection-text: oklch(0.97 0.006 285);
+
+  --shadow-stack:
+    1px 6px 6px 0 #ffffff08 inset, 0 0 0 1px #ffffff05 inset,
+    0 18px 40px 0 #00000033, 0 4px 12px 0 #0000002e;
+}
+
+.cloud-os-root ::selection {
+  background-color: var(--color-selection-bg);
+  color: var(--color-selection-text);
+}
+
+.cloud-os-root code {
+  font-family: var(--font-mono);
+}
+
+.cloud-os-root button:not(:disabled),
+.cloud-os-root [role="button"]:not(:disabled) {
+  cursor: pointer;
+}
+
+/* ── themed-* 表面层(原样搬运)──────────────────────────────────────────── */
+.themed-surface-inset {
+  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--color-kumo-fill) 65%, transparent);
+}
+
+.themed-inset-outline {
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-kumo-fill) 65%, transparent);
+}
+
+.themed-prompt-card-shadow {
+  box-shadow:
+    inset 0 1px 0 color-mix(in srgb, var(--color-kumo-fill) 75%, transparent),
+    0 1px 2px rgba(20, 17, 16, 0.03),
+    0 10px 28px -16px rgba(20, 17, 16, 0.12);
+}
+
+.themed-prompt-card-shadow:focus-within {
+  box-shadow:
+    inset 0 1px 0 color-mix(in srgb, var(--color-kumo-fill) 85%, transparent),
+    0 1px 2px rgba(20, 17, 16, 0.04),
+    0 14px 34px -14px rgba(20, 17, 16, 0.16);
+}
+
+.themed-user-bubble-shadow {
+  box-shadow:
+    0 1px 1px rgba(82, 16, 0, 0.03),
+    inset 0 1px 0 color-mix(in srgb, var(--color-kumo-fill) 65%, transparent);
+}
+
+.themed-thumbnail-shadow {
+  box-shadow: 0 2px 14px rgba(20, 17, 16, 0.1);
+}
+
+.themed-floating-shadow {
+  box-shadow: 0 8px 20px rgba(82, 16, 0, 0.1);
+}
+
+.themed-floating-shadow-lg {
+  box-shadow: 0 14px 36px rgba(82, 16, 0, 0.1);
+}
+
+.themed-bottom-shadow {
+  box-shadow: 0 4px 10px -8px rgba(82, 16, 0, 0.1);
+}
+
+.themed-card-hover-shadow:hover {
+  box-shadow: 0 8px 20px -16px rgba(82, 16, 0, 0.12);
+}
+
+.themed-row-hover-shadow:hover {
+  box-shadow: 0 8px 20px -18px rgba(82, 16, 0, 0.28);
+}
+
+.cloud-os-root[data-mode="dark"] .themed-prompt-card-shadow {
+  box-shadow:
+    inset 0 1px 0 color-mix(in srgb, var(--color-kumo-fill-hover) 42%, transparent),
+    0 1px 2px rgba(0, 0, 0, 0.24),
+    0 10px 28px -16px rgba(0, 0, 0, 0.45);
+}
+
+.cloud-os-root[data-mode="dark"] .themed-prompt-card-shadow:focus-within {
+  box-shadow:
+    inset 0 1px 0 color-mix(in srgb, var(--color-kumo-fill-hover) 52%, transparent),
+    0 1px 2px rgba(0, 0, 0, 0.28),
+    0 14px 34px -14px rgba(0, 0, 0, 0.55);
+}
+
+.cloud-os-root[data-mode="dark"] .themed-surface-inset {
+  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--color-kumo-line) 80%, transparent);
+}
+
+.cloud-os-root[data-mode="dark"] .themed-inset-outline {
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-kumo-line) 80%, transparent);
+}
+
+.cloud-os-root[data-mode="dark"] .themed-user-bubble-shadow {
+  box-shadow:
+    0 1px 1px rgba(0, 0, 0, 0.15),
+    inset 0 1px 0 color-mix(in srgb, var(--color-kumo-line) 80%, transparent);
+}
+
+.cloud-os-root[data-mode="dark"] .themed-thumbnail-shadow {
+  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.34);
+}
+
+.cloud-os-root[data-mode="dark"] .themed-floating-shadow {
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.32);
+}
+
+.cloud-os-root[data-mode="dark"] .themed-floating-shadow-lg,
+[data-cloud-os-portal][data-mode="dark"] .themed-floating-shadow-lg {
+  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.38);
+}
+
+.cloud-os-root[data-mode="dark"] .themed-bottom-shadow {
+  box-shadow: 0 4px 10px -8px rgba(0, 0, 0, 0.48);
+}
+
+.cloud-os-root[data-mode="dark"] .themed-card-hover-shadow:hover {
+  box-shadow: 0 8px 20px -16px rgba(0, 0, 0, 0.55);
+}
+
+.cloud-os-root[data-mode="dark"] .themed-row-hover-shadow:hover {
+  box-shadow: 0 8px 20px -18px rgba(0, 0, 0, 0.58);
+}
+
+/* Popover / Dropdown 通过 portal 挂到 body,拿不到 .cloud-os-root 的作用域变量,
+   所以 portal 容器自己再带一份(见 primitives/portal.tsx)。 */
+[data-cloud-os-portal] {
+  --font-sans:
+    "FT Kunst Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
+    "Helvetica Neue", sans-serif;
+  --font-mono: "Apercu Mono Pro", "SF Mono", Menlo, Monaco, Consolas, monospace;
+  --radius-sm: 0.25rem;
+  --radius-md: 0.375rem;
+  --radius-lg: 0.5rem;
+  --radius-xl: 0.75rem;
+  --radius-2xl: 1rem;
+  font-family: var(--font-sans);
+}
+
+[data-cloud-os-portal][data-mode="dark"] {
+  --color-kumo-base: oklch(0.115 0.012 285);
+  --color-kumo-elevated: oklch(0.155 0.011 285);
+  --color-kumo-tint: oklch(0.225 0.025 285);
+  --color-kumo-control: oklch(0.155 0.011 285);
+  --color-kumo-fill: oklch(0.225 0.025 285);
+  --color-kumo-line: oklch(0.34 0.022 285);
+  --color-kumo-brand: #b84e00;
+  --color-kumo-danger: oklch(50.5% 0.213 27.518);
+  --color-kumo-danger-tint: oklch(0.25 0.065 25.331);
+  --text-color-kumo-default: oklch(0.92 0.01 285);
+  --text-color-kumo-subtle: oklch(0.66 0.02 285);
+  --text-color-kumo-inactive: oklch(0.58 0.025 285);
+  --text-color-kumo-brand: #ff8a5c;
+}
+
+/* ── 滚动条(原 styles.css)──────────────────────────────────────────────── */
+.cos-hide-scrollbar {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+.cos-hide-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+
+.cos-chat-panel {
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-kumo-line) transparent;
+}
+.cos-chat-panel::-webkit-scrollbar {
+  width: 4px;
+}
+.cos-chat-panel::-webkit-scrollbar-thumb {
+  background: var(--color-kumo-line);
+  border-radius: 4px;
+}
+.cos-chat-panel::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+/* ── 顶部推进条(isAgentActive)──────────────────────────────────────────── */
+@keyframes cos-thinking {
+  0% {
+    left: -33%;
+  }
+  50% {
+    left: 100%;
+  }
+  100% {
+    left: -33%;
+  }
+}
+
+.cos-progress-sweep {
+  animation: cos-thinking 1.5s ease-in-out infinite;
+}
+
+/* ============================================================================
+ * 以下整段来自 ChatInterface.module.css —— CSS Module 类名改成 cos- 全局前缀
+ * ========================================================================== */
+
+/* ── Markdown 正文 ─────────────────────────────────────────────────────── */
+.cos-markdown {
+  line-height: 1.6;
+  overflow-wrap: anywhere;
+}
+.cos-markdown p {
+  margin: 0.4em 0;
+}
+.cos-markdown p:first-child {
+  margin-top: 0;
+}
+.cos-markdown p:last-child {
+  margin-bottom: 0;
+}
+
+.cos-markdown h1,
+.cos-markdown h2,
+.cos-markdown h3,
+.cos-markdown h4 {
+  margin: 0.9em 0 0.4em;
+  font-weight: 600;
+  color: var(--text-color-kumo-default);
+}
+.cos-markdown h1:first-child,
+.cos-markdown h2:first-child,
+.cos-markdown h3:first-child {
+  margin-top: 0;
+}
+
+.cos-markdown code {
+  background-color: var(--color-kumo-tint);
+  color: var(--color-kumo-brand);
+  padding: 0.15em 0.4em;
+  border-radius: 4px;
+  font-family: var(--font-mono, monospace);
+  font-size: 0.85em;
+}
+
+.cos-markdown pre {
+  background-color: var(--color-kumo-elevated);
+  border: 1px solid var(--color-kumo-line);
+  border-radius: 8px;
+  padding: 10px 12px;
+  overflow-x: auto;
+  margin: 0.5em 0;
+}
+.cos-markdown pre code {
+  background: none;
+  color: var(--text-color-kumo-default);
+  padding: 0;
+  font-size: 0.8em;
+}
+
+.cos-markdown ul,
+.cos-markdown ol {
+  margin: 0.4em 0;
+  padding-left: 1.5em;
+}
+.cos-markdown ul {
+  list-style-type: disc;
+}
+.cos-markdown ol {
+  list-style-type: decimal;
+}
+.cos-markdown li {
+  margin: 0.2em 0;
+}
+
+.cos-markdown blockquote {
+  margin: 0.5em 0;
+  padding-left: 0.75em;
+  border-left: 2px solid var(--color-kumo-line);
+  color: var(--text-color-kumo-subtle);
+}
+
+.cos-markdown a {
+  color: var(--color-kumo-brand);
+  text-decoration: none;
+}
+.cos-markdown a:hover {
+  text-decoration: underline;
+}
+
+.cos-markdown hr {
+  border: none;
+  border-top: 1px solid var(--color-kumo-line);
+  margin: 0.8em 0;
+}
+
+.cos-markdown table {
+  border-collapse: collapse;
+  width: 100%;
+  margin: 0.5em 0;
+  font-size: 0.85em;
+  display: block;
+  max-width: 100%;
+  overflow-x: auto;
+}
+.cos-markdown th,
+.cos-markdown td {
+  border: 1px solid var(--color-kumo-line);
+  padding: 0.4em 0.6em;
+  text-align: left;
+}
+.cos-markdown th {
+  background-color: var(--color-kumo-elevated);
+  font-weight: 600;
+}
+.cos-markdown img {
+  max-width: 100%;
+  height: auto;
+}
+
+/* ── 输入框容器(container query 决定「添加资源」标签是否显示)─────────────── */
+.cos-chat-input-root {
+  container-type: inline-size;
+}
+
+.cos-attach-label {
+  display: inline;
+}
+
+@container (max-width: 460px) {
+  .cos-attach-label {
+    display: none;
+  }
+}
+
+/* ── 流式占位:Thinking 扫光 ──────────────────────────────────────────────── */
+.cos-thinking-shimmer {
+  color: var(--text-color-kumo-inactive);
+  background: linear-gradient(
+    90deg,
+    var(--text-color-kumo-inactive) 0%,
+    var(--text-color-kumo-subtle) 45%,
+    var(--text-color-kumo-inactive) 90%
+  );
+  background-size: 220% 100%;
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  animation: cos-thinking-shimmer 1.8s linear infinite;
+}
+
+@keyframes cos-thinking-shimmer {
+  from {
+    background-position: 140% 0;
+  }
+  to {
+    background-position: -80% 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .cos-thinking-shimmer {
+    animation: none;
+    background: none;
+    -webkit-text-fill-color: currentColor;
+  }
+  .cos-progress-sweep {
+    animation: none;
+  }
+}
+
+/* ── 观察类 markdown(行内、紧凑)────────────────────────────────────────── */
+.cos-observation-markdown {
+  line-height: 1.5;
+}
+.cos-observation-markdown p {
+  margin: 0.2em 0;
+  display: inline;
+}
+.cos-observation-markdown code {
+  background-color: var(--color-kumo-tint);
+  color: var(--color-kumo-brand);
+  padding: 0.1em 0.3em;
+  border-radius: 3px;
+  font-family: var(--font-mono, monospace);
+  font-size: 0.85em;
+}