orbcafe-ui 3.1.7 → 3.1.9

package/dist/orbis.css

@@ -83,6 +83,9 @@
   --orb-p600: color-mix(in oklch, var(--orb-primary) 85%, #000000);
   --orb-p700: color-mix(in oklch, var(--orb-primary) 70%, #000000);
   --orb-accent: #fc4c02;
+  /* ORBIS Highlight Pink。风险授权卡的边框用它，不借用由橙色加深得到的 --orb-err。 */
+  --orb-highlight: #db3360;
+  --orb-omph-approval-tradeoff: color-mix(in oklch, var(--orb-primary) 58%, #ffffff);
   --orb-divider: var(--orb-border);
   --orb-primary-bg: var(--orb-p50);
   --orb-info: var(--orb-primary);
@@ -150,6 +153,8 @@
   --orb-p600: color-mix(in oklch, var(--orb-primary) 85%, #ffffff);
   --orb-p700: color-mix(in oklch, var(--orb-primary) 60%, #ffffff);
   --orb-accent: #fc4c02;
+  --orb-highlight: #db3360;
+  --orb-omph-approval-tradeoff: color-mix(in oklch, var(--orb-primary) 58%, #ffffff);
   --orb-divider: var(--orb-border);
   --orb-primary-bg: var(--orb-p50);
   --orb-info: var(--orb-p300);
@@ -2580,6 +2585,11 @@ button.orb-app-header-locale:hover,
 /* ---------- markdown: HTML artifact card + inline demo ---------- */
 /* The html fence renders as a card or an expanded inline block; react-markdown's
    <pre> wrapper steps aside so neither sits in a second padded frame. */
+.markdown-body pre:has(.mermaid-block) {
+  font: inherit;
+  color: inherit;
+}
+
 .markdown-body pre:has(.orb-html-demo-card),
 .markdown-body pre:has(.orb-html-demo) {
   margin: 0;
@@ -2810,7 +2820,7 @@ button.orb-app-header-locale:hover,
 
 .orb-omph-approval-card {
   overflow: hidden;
-  border: 1px solid var(--orb-warn);
+  border: 2px solid var(--orb-warn);
   border-radius: var(--orb-shell-radius);
   background: color-mix(in oklch, var(--orb-canvas) 64%, transparent);
   backdrop-filter: blur(28px);
@@ -2818,6 +2828,60 @@ button.orb-app-header-locale:hover,
   box-shadow: var(--orb-shadow-2);
 }
 
+.orb-omph-approval-card[data-kind='clarify'] {
+  border-color: var(--orb-accent);
+  --orb-omph-kind-ink: var(--orb-accent);
+  --orb-omph-kind-wash: var(--orb-warn-bg);
+}
+
+.orb-omph-approval-card[data-kind='tradeoff'] {
+  border-color: var(--orb-omph-approval-tradeoff);
+  --orb-omph-kind-ink: var(--orb-primary);
+  --orb-omph-kind-wash: color-mix(in oklch, var(--orb-primary) 8%, var(--orb-canvas));
+}
+
+.orb-omph-approval-card[data-kind='authorize'] {
+  border-color: var(--orb-highlight);
+  --orb-omph-kind-ink: var(--orb-highlight);
+  --orb-omph-kind-wash: color-mix(in oklch, var(--orb-highlight) 8%, var(--orb-canvas));
+}
+
+.orb-omph-approval-card[data-kind] .orb-omph-approval-strip {
+  background: var(--orb-omph-kind-wash);
+  color: var(--orb-omph-kind-ink);
+}
+
+.orb-omph-approval-card[data-kind] .orb-omph-approval-dot {
+  background: var(--orb-omph-kind-ink);
+}
+
+.orb-omph-approval-card[data-kind] .orb-omph-approval-headline {
+  color: var(--orb-omph-kind-ink);
+}
+
+/* 夜里标题跟边框同一色相，但要亮到能从夜蓝底上读出来。
+   oklch 把橙/红混进夜蓝会绕成紫，底纹改走 srgb。 */
+.orb-dark .orb-omph-approval-card[data-kind='clarify'],
+[data-orb-mode='dark'] .orb-omph-approval-card[data-kind='clarify'] {
+  --orb-omph-kind-ink: oklch(from var(--orb-accent) 0.74 c h);
+  --orb-omph-kind-wash: color-mix(in srgb, var(--orb-accent) 16%, var(--orb-canvas));
+  border-color: var(--orb-omph-kind-ink);
+}
+
+.orb-dark .orb-omph-approval-card[data-kind='tradeoff'],
+[data-orb-mode='dark'] .orb-omph-approval-card[data-kind='tradeoff'] {
+  --orb-omph-kind-ink: oklch(from var(--orb-primary) 0.74 0.15 h);
+  --orb-omph-kind-wash: color-mix(in srgb, var(--orb-primary) 32%, var(--orb-canvas));
+  border-color: var(--orb-omph-kind-ink);
+}
+
+.orb-dark .orb-omph-approval-card[data-kind='authorize'],
+[data-orb-mode='dark'] .orb-omph-approval-card[data-kind='authorize'] {
+  --orb-omph-kind-ink: oklch(from var(--orb-highlight) 0.74 c h);
+  --orb-omph-kind-wash: color-mix(in srgb, var(--orb-highlight) 16%, var(--orb-canvas));
+  border-color: var(--orb-omph-kind-ink);
+}
+
 .orb-omph-approval-strip {
   display: flex;
   align-items: center;
@@ -2908,6 +2972,12 @@ button.orb-app-header-locale:hover,
   font: 400 13px/1.45 var(--orb-font);
 }
 
+.orb-omph-approval-recommended {
+  margin-left: 6px;
+  color: var(--orb-muted);
+  font: 500 12px/1.4 var(--orb-font);
+}
+
 .orb-omph-approval-other {
   width: 100%;
   min-height: 72px;
@@ -3050,6 +3120,255 @@ button.orb-app-header-locale:hover,
   color: var(--orb-muted);
 }
 
+/* 新会话初始画面。背景只用 ORBIS 色的透明：夜蓝、企业蓝、石油青、品红。 */
+.orb-omph-initial {
+  --orb-omph-initial-night: #16203b;
+  --orb-omph-initial-blue: #00488a;
+  --orb-omph-initial-petrol: #00a3a3;
+  --orb-omph-initial-pink: #db3360;
+  /* 磨砂玻璃：取自 ORBIS 材质系统的 ultra-thin（着色 32% / 模糊 12px / 饱和 180%） */
+  --orb-frost-blur: 12px;
+  --orb-frost-tint: 32%;
+  --orb-frost-saturate: 180%;
+  --orb-frost-base: #ffffff;
+  --orb-frost-stroke: color-mix(in srgb, #ffffff 60%, transparent);
+  --orb-frost-highlight: color-mix(in srgb, #ffffff 85%, transparent);
+  --orb-frost-shadow: 0 1px 3px color-mix(in srgb, #16203b 8%, transparent),
+    0 6px 16px color-mix(in srgb, #16203b 10%, transparent);
+  --orb-frost-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
+  position: relative;
+  isolation: isolate;
+  display: flex;
+  flex: 1 1 auto;
+  align-items: center;
+  justify-content: center;
+  min-height: 0;
+  overflow: hidden;
+  background: var(--orb-canvas);
+  color: var(--orb-fg);
+}
+
+.orb-omph-initial-stage {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+}
+
+.orb-omph-initial-bloom {
+  position: absolute;
+  border-radius: 50%;
+  filter: blur(24px);
+}
+
+.orb-omph-initial-bloom-petrol {
+  width: min(78vw, 920px);
+  height: min(78vw, 920px);
+  left: -8vw;
+  top: -8vh;
+  background: radial-gradient(circle, color-mix(in srgb, var(--orb-omph-initial-petrol) 42%, transparent), transparent 68%);
+}
+
+.orb-omph-initial-bloom-blue {
+  width: min(62vw, 720px);
+  height: min(62vw, 720px);
+  left: 28vw;
+  top: 18vh;
+  background: radial-gradient(circle, color-mix(in srgb, var(--orb-omph-initial-blue) 28%, transparent), transparent 70%);
+}
+
+.orb-omph-initial-bloom-pink {
+  width: min(52vw, 600px);
+  height: min(52vw, 600px);
+  right: -4vw;
+  bottom: -8vh;
+  background: radial-gradient(circle, color-mix(in srgb, var(--orb-omph-initial-pink) 28%, transparent), transparent 70%);
+}
+
+.orb-omph-initial-arc {
+  position: absolute;
+  inset: -8% -6%;
+  width: 112%;
+  height: 116%;
+  fill: none;
+  stroke: var(--orb-omph-initial-petrol);
+  stroke-width: 1.25;
+  opacity: 0.28;
+}
+
+.orb-omph-initial-arc path:last-child {
+  opacity: 0.45;
+}
+
+.orb-dark .orb-omph-initial,
+[data-orb-mode="dark"] .orb-omph-initial {
+  background: var(--orb-omph-initial-night);
+  --orb-frost-base: #16203b;
+  --orb-frost-stroke: color-mix(in srgb, #ffffff 14%, transparent);
+  --orb-frost-highlight: color-mix(in srgb, #ffffff 18%, transparent);
+  --orb-frost-shadow: 0 1px 3px color-mix(in srgb, #000000 24%, transparent),
+    0 6px 16px color-mix(in srgb, #000000 30%, transparent);
+}
+
+.orb-dark .orb-omph-initial-bloom-petrol,
+[data-orb-mode="dark"] .orb-omph-initial-bloom-petrol {
+  background: radial-gradient(circle, color-mix(in srgb, var(--orb-omph-initial-petrol) 48%, transparent), transparent 68%);
+}
+
+.orb-dark .orb-omph-initial-bloom-pink,
+[data-orb-mode="dark"] .orb-omph-initial-bloom-pink {
+  background: radial-gradient(circle, color-mix(in srgb, var(--orb-omph-initial-pink) 36%, transparent), transparent 70%);
+}
+
+.orb-dark .orb-omph-initial-arc,
+[data-orb-mode="dark"] .orb-omph-initial-arc {
+  opacity: 0.42;
+}
+
+.orb-omph-initial-center {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: min(760px, calc(100% - 48px));
+  gap: 28px;
+}
+
+.orb-omph-initial-mark {
+  display: flex;
+  justify-content: center;
+}
+
+.orb-omph-initial-composer {
+  position: relative;
+  width: 100%;
+}
+
+.orb-omph-initial-composer > div {
+  max-width: none;
+}
+
+.orb-omph-initial-composer .orb-agent-input,
+.orb-omph-initial-suggestion,
+.orb-omph-initial-menu .orb-omph-icon-btn {
+  position: relative;
+  isolation: isolate;
+  border: 1px solid var(--orb-frost-stroke);
+  background-color: color-mix(in srgb, var(--orb-frost-base) var(--orb-frost-tint), transparent);
+  box-shadow: inset 0 1px 0 var(--orb-frost-highlight), var(--orb-frost-shadow);
+  -webkit-backdrop-filter: blur(var(--orb-frost-blur)) saturate(var(--orb-frost-saturate));
+  backdrop-filter: blur(var(--orb-frost-blur)) saturate(var(--orb-frost-saturate));
+}
+
+.orb-omph-initial-composer .orb-agent-input::after,
+.orb-omph-initial-suggestion::after,
+.orb-omph-initial-menu .orb-omph-icon-btn::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  border-radius: inherit;
+  background-image: var(--orb-frost-grain);
+  background-size: 180px;
+  opacity: 0.05;
+  mix-blend-mode: overlay;
+  pointer-events: none;
+}
+
+.orb-dark .orb-omph-initial-composer .orb-agent-input::after,
+.orb-dark .orb-omph-initial-suggestion::after,
+.orb-dark .orb-omph-initial-menu .orb-omph-icon-btn::after,
+[data-orb-mode="dark"] .orb-omph-initial-composer .orb-agent-input::after,
+[data-orb-mode="dark"] .orb-omph-initial-suggestion::after,
+[data-orb-mode="dark"] .orb-omph-initial-menu .orb-omph-icon-btn::after {
+  opacity: 0.07;
+}
+
+.orb-omph-initial-composer .orb-agent-input:focus-within {
+  border-color: var(--orb-frost-stroke);
+  --tw-ring-shadow: 0 0 #0000;
+  box-shadow: inset 0 1px 0 var(--orb-frost-highlight), var(--orb-frost-shadow);
+}
+
+.orb-omph-initial-composer .orb-agent-input .flex-col > div:first-child {
+  padding-right: 52px;
+}
+
+.orb-omph-initial-menu {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  z-index: 2;
+}
+
+.orb-omph-initial-menu .orb-omph-icon-btn {
+  width: 40px;
+  height: 40px;
+  border-radius: 12px;
+}
+
+.orb-omph-initial-hint {
+  margin: 0;
+  max-width: 42em;
+  color: var(--orb-muted);
+  font: 500 14px/1.55 var(--orb-font);
+  text-align: center;
+}
+
+.orb-omph-initial-suggestions {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 10px;
+  width: 100%;
+  margin: 0;
+}
+
+.orb-omph-initial-suggestion {
+  margin: 0;
+  padding: 16px 18px;
+  border-radius: var(--orb-shell-radius);
+  color: var(--orb-fg);
+  font: 500 14px/1.55 var(--orb-font);
+  text-align: left;
+  cursor: pointer;
+  transition: background-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.orb-omph-initial-suggestion:hover:not(:disabled) {
+  background-color: color-mix(in srgb, var(--orb-frost-base) calc(var(--orb-frost-tint) + 8%), transparent);
+}
+
+.orb-omph-initial-suggestion:focus-visible {
+  outline: 2px solid var(--orb-focus-ring);
+  outline-offset: 2px;
+}
+
+.orb-omph-initial-suggestion:disabled {
+  cursor: default;
+  opacity: 0.55;
+}
+
+@media (prefers-reduced-transparency: reduce) {
+  .orb-omph-initial {
+    --orb-frost-tint: 96%;
+  }
+
+  .orb-omph-initial-composer .orb-agent-input,
+  .orb-omph-initial-suggestion,
+  .orb-omph-initial-menu .orb-omph-icon-btn {
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+  }
+
+  .orb-omph-initial-composer .orb-agent-input::after,
+  .orb-omph-initial-suggestion::after,
+  .orb-omph-initial-menu .orb-omph-icon-btn::after {
+    opacity: 0;
+  }
+}
+
 .orb-omph-conversation-empty {
   margin: 0;
   padding: 12px 10px;
@@ -3180,6 +3499,26 @@ button.orb-app-header-locale:hover,
   white-space: pre-wrap;
 }
 
+/* 运行中补充的输入：虚线描边表示还没送达，送达后宿主清掉 queued 回到实线 */
+.orb-omph-user-bubble[data-queued] {
+  border-style: dashed;
+}
+
+.orb-omph-user-meta {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.orb-omph-user-queued {
+  padding: 1px 8px;
+  border: 1px solid var(--orb-p100);
+  border-radius: 999px;
+  color: var(--orb-primary);
+  font: 600 10px/1.4 var(--orb-font);
+  letter-spacing: 0.02em;
+}
+
 .orb-omph-clock {
   font: 500 11px/1.3 var(--orb-font);
   color: var(--orb-muted);
@@ -3552,6 +3891,28 @@ button.orb-app-header-locale:hover,
   background: var(--orb-err);
 }
 
+/* 忙碌且有草稿时的次级停止：描边样式和主发送按钮区分开 */
+.orb-omph-stop-secondary {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: 36px;
+  height: 36px;
+  border: 1px solid var(--orb-border);
+  border-radius: 50%;
+  background: transparent;
+  color: var(--orb-muted);
+  cursor: pointer;
+  transition: color var(--orb-t-fast), border-color var(--orb-t-fast);
+}
+
+.orb-omph-stop-secondary:hover,
+.orb-omph-stop-secondary:focus-visible {
+  border-color: var(--orb-err);
+  color: var(--orb-err);
+}
+
 @media (prefers-reduced-motion: reduce) {
   .orb-omph-dot[data-active="true"],
   .orb-omph-caret,
@@ -3793,6 +4154,121 @@ button.orb-app-header-locale:hover,
   font: 500 12px/1.5 var(--orb-font);
 }
 
+/* ----- sheet (xlsx) ----- */
+/* 表格吃满内容区：标签条固定，网格区两轴滚动 */
+.orb-omph-pv-body[data-kind="sheet"] {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.orb-omph-sheet {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.orb-omph-sheet-bar {
+  flex: none;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--orb-border);
+  background: var(--orb-surface);
+}
+
+.orb-omph-sheet-tabs {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  gap: 4px;
+  overflow-x: auto;
+}
+
+.orb-omph-sheet-tab {
+  flex: none;
+  padding: 4px 12px;
+  border: 1px solid transparent;
+  border-radius: var(--orb-r);
+  background: transparent;
+  color: var(--orb-muted);
+  font: 500 12px/1.4 var(--orb-font);
+  white-space: nowrap;
+  cursor: pointer;
+  transition: background var(--orb-t-fast), color var(--orb-t-fast);
+}
+
+.orb-omph-sheet-tab:hover {
+  background: var(--orb-hover);
+  color: var(--orb-fg-strong);
+}
+
+.orb-omph-sheet-tab[data-active] {
+  background: var(--orb-p100);
+  color: var(--orb-primary);
+}
+
+.orb-omph-sheet-tab:focus-visible {
+  outline: 2px solid var(--orb-focus-solid);
+  outline-offset: 1px;
+}
+
+.orb-omph-sheet-scroll {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  overscroll-behavior: contain;
+}
+
+.orb-omph-sheet-grid {
+  border-collapse: separate;
+  border-spacing: 0;
+  font: 400 12px/1.5 var(--orb-font);
+  color: var(--orb-fg);
+}
+
+.orb-omph-sheet-grid th,
+.orb-omph-sheet-grid td {
+  padding: 4px 10px;
+  border-right: 1px solid var(--orb-border);
+  border-bottom: 1px solid var(--orb-border);
+  text-align: left;
+  vertical-align: top;
+  white-space: pre-wrap;
+  word-break: break-word;
+  max-width: 320px;
+}
+
+.orb-omph-sheet-grid thead th {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  background: var(--orb-surface);
+  color: var(--orb-muted);
+  font-weight: 500;
+  text-align: center;
+  min-width: 72px;
+}
+
+.orb-omph-sheet-grid tbody th {
+  position: sticky;
+  left: 0;
+  z-index: 1;
+  background: var(--orb-surface);
+  color: var(--orb-muted);
+  font-weight: 500;
+  text-align: right;
+  min-width: 40px;
+}
+
+.orb-omph-sheet-grid .orb-omph-sheet-corner {
+  left: 0;
+  z-index: 3;
+  min-width: 40px;
+}
+
 .orb-omph-pv-doc {
   max-width: 760px;
   margin: 0 auto;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "orbcafe-ui",
-  "version": "3.1.7",
+  "version": "3.1.9",
   "description": "ORBCAFE UI components — ORBIS brand system, MUI-free",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -87,6 +87,7 @@
     "dayjs": "^1.11.19",
     "framer-motion": "^12.35.1",
     "i18next": "^25.8.18",
+    "jszip": "^3.10.2",
     "mermaid": "^10.9.0",
     "ogl": "^1.0.11",
     "react-i18next": "^16.5.8",