orbcafe-ui 3.1.8 → 3.2.0

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;
@@ -2802,6 +2812,219 @@ button.orb-app-header-locale:hover,
   border-radius: var(--orb-shell-radius);
 }
 
+/* 作曲栏模型席：触发器贴在发送按钮左侧，菜单向上展开。目录由宿主传入。 */
+.orb-omph-model {
+  min-width: 0;
+}
+
+.orb-omph-model-trigger {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  max-width: min(360px, 46vw);
+  height: 28px;
+  min-width: 0;
+  padding: 0 4px 0 8px;
+  border: 0;
+  border-radius: var(--orb-r);
+  background: transparent;
+  color: var(--orb-fg);
+  font: 500 13px/20px var(--orb-font);
+  cursor: pointer;
+}
+
+.orb-omph-model-trigger:hover:not(:disabled) {
+  background: var(--orb-hover);
+}
+
+.orb-omph-model-trigger:focus-visible {
+  outline: 2px solid var(--orb-focus-solid);
+  outline-offset: 1px;
+}
+
+.orb-omph-model-trigger:disabled {
+  color: var(--orb-disabled-fg);
+  cursor: default;
+}
+
+.orb-omph-model-name,
+.orb-omph-model-effort {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.orb-omph-model-effort {
+  flex-shrink: 1;
+  color: var(--orb-muted);
+}
+
+.orb-omph-model-chevron {
+  flex: none;
+  color: var(--orb-muted);
+  transition: transform var(--orb-t-fast);
+}
+
+.orb-omph-model-trigger[aria-expanded="true"] .orb-omph-model-chevron {
+  transform: rotate(180deg);
+}
+
+.orb-omph-model-menu {
+  position: fixed;
+  z-index: 1302;
+  display: flex;
+  flex-direction: column;
+  width: max-content;
+  min-width: min(240px, calc(100vw - 32px));
+  max-width: min(420px, calc(100vw - 32px));
+  max-height: min(360px, calc(100vh - 96px));
+  padding: 4px;
+  overflow: hidden;
+  border: 1px solid var(--orb-border);
+  border-radius: var(--orb-r);
+  background: var(--orb-canvas);
+  box-shadow: var(--orb-shadow-2);
+  color: var(--orb-fg);
+  font: 500 13px/20px var(--orb-font);
+}
+
+.orb-omph-model-cell,
+.orb-omph-model-option {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  width: 100%;
+  min-height: 34px;
+  padding: 5px 8px;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.orb-omph-model-cell:hover,
+.orb-omph-model-cell:focus-visible,
+.orb-omph-model-option:hover,
+.orb-omph-model-option:focus-visible,
+.orb-omph-model-option[data-active] {
+  background: var(--orb-hover);
+  outline: none;
+}
+
+.orb-omph-model-cell-label {
+  flex: none;
+}
+
+.orb-omph-model-cell-value,
+.orb-omph-model-option-name {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.orb-omph-model-cell-value {
+  flex: 1;
+  text-align: right;
+  color: var(--orb-muted);
+}
+
+.orb-omph-model-option-name {
+  flex: 1;
+}
+
+.orb-omph-model-cell-chevron,
+.orb-omph-model-check {
+  flex: none;
+  color: var(--orb-muted);
+}
+
+.orb-omph-model-check {
+  display: grid;
+  width: 14px;
+  height: 14px;
+  place-items: center;
+  color: var(--orb-fg);
+}
+
+.orb-omph-model-search {
+  position: relative;
+  flex: none;
+  margin: 2px 0 4px;
+}
+
+.orb-omph-model-search-input {
+  width: 100%;
+  height: 32px;
+  padding: 0 32px 0 8px;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--orb-fg);
+  font: 500 12px/20px var(--orb-font);
+  outline: none;
+}
+
+.orb-omph-model-search-input::placeholder {
+  color: var(--orb-muted);
+}
+
+.orb-omph-model-search-input:focus-visible {
+  background: var(--orb-hover);
+}
+
+.orb-omph-model-search-clear {
+  position: absolute;
+  top: 50%;
+  right: 4px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: 0;
+  border-radius: 999px;
+  background: transparent;
+  color: var(--orb-muted);
+  cursor: pointer;
+  transform: translateY(-50%);
+}
+
+.orb-omph-model-search-clear:hover,
+.orb-omph-model-search-clear:focus-visible {
+  background: var(--orb-hover);
+  color: var(--orb-fg);
+  outline: none;
+}
+
+.orb-omph-model-list {
+  min-height: 0;
+  overflow: auto;
+}
+
+.orb-omph-model-group {
+  padding: 6px 8px 2px;
+  color: var(--orb-muted);
+  font: 500 11px/16px var(--orb-font);
+}
+
+.orb-omph-model-empty {
+  padding: 8px;
+  color: var(--orb-muted);
+  font: 500 12px/18px var(--orb-font);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .orb-omph-model-chevron {
+    transition: none;
+  }
+}
+
 /* Composer takeover while a tool waits for a one-shot decision. */
 .orb-omph-approval {
   --orb-omph-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
@@ -2810,7 +3033,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 +3041,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 +3185,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 +3333,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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "orbcafe-ui",
-  "version": "3.1.8",
+  "version": "3.2.0",
   "description": "ORBCAFE UI components — ORBIS brand system, MUI-free",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",