orbcafe-ui 3.1.4 → 3.1.8

package/dist/orbis.css

@@ -2577,28 +2577,164 @@ button.orb-app-header-locale:hover,
   font-size: 12px;
 }
 
-.markdown-body .orb-html-demo-frame {
+/* ---------- 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(.orb-html-demo-card),
+.markdown-body pre:has(.orb-html-demo) {
+  margin: 0;
+  padding: 0;
+  overflow: visible;
+  background: transparent;
+  border: 0;
+}
+
+.markdown-body .orb-html-demo-card {
   margin: 12px 0 4px;
-  overflow: hidden;
+}
+
+.orb-html-demo-card {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  padding: 10px 12px;
   border: 1px solid var(--orb-border);
   border-radius: var(--orb-r);
   background: var(--orb-canvas);
+  color: var(--orb-fg);
+  font-family: var(--orb-font);
+  text-align: left;
+  cursor: pointer;
+  transition: background var(--orb-t-fast), border-color var(--orb-t-fast);
 }
 
-.markdown-body .orb-html-demo-caption {
-  padding: 8px 12px;
+.orb-html-demo-card:hover {
+  background: var(--orb-hover);
+  border-color: var(--orb-p200);
+}
+
+.orb-html-demo-card:focus-visible {
+  outline: 2px solid var(--orb-focus-solid);
+  outline-offset: 1px;
+}
+
+.orb-html-demo-glyph {
+  flex: none;
+  display: grid;
+  place-items: center;
+  width: 36px;
+  height: 36px;
+  border-radius: 8px;
+  background: var(--orb-p100);
+  color: var(--orb-primary);
+  font: 600 13px/1 ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+}
+
+.orb-html-demo-info {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.orb-html-demo-title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font: 600 14px/1.35 var(--orb-font);
+  color: var(--orb-fg-strong);
+}
+
+.orb-html-demo-meta {
+  font: 500 12px/1.3 var(--orb-font);
+  color: var(--orb-muted);
+}
+
+.orb-html-demo-openpill {
+  flex: none;
+  padding: 7px 16px;
+  border-radius: 999px;
+  background: var(--orb-primary);
+  color: var(--orb-on-primary);
+  font: 600 13px/1.2 var(--orb-font);
+  transition: background var(--orb-t-fast);
+}
+
+.orb-html-demo-card:hover .orb-html-demo-openpill {
+  background: var(--orb-p600);
+}
+
+/* Expanded demo: lives in the reply flow, no overlay. Height comes from the
+   iframe's content probe (clamped 200–560px in HtmlDemo). */
+.orb-html-demo {
+  margin: 12px 0;
+  overflow: hidden;
+  background: var(--orb-canvas);
+  border: 1px solid var(--orb-border);
+  border-radius: var(--orb-r);
+}
+
+.orb-html-demo-head {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 8px 10px 8px 14px;
   border-bottom: 1px solid var(--orb-border);
   background: var(--orb-surface);
-  color: var(--orb-fg-strong);
+}
+
+.orb-html-demo-head .orb-html-demo-glyph {
+  width: 28px;
+  height: 28px;
+  font-size: 11px;
+}
+
+.orb-html-demo-head-title {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
   font: 600 14px/1.3 var(--orb-font);
+  color: var(--orb-fg-strong);
+}
+
+.orb-html-demo-segment {
+  flex: none;
+}
+
+.orb-html-demo-actions {
+  flex: none;
+  display: flex;
+  align-items: center;
+  gap: 4px;
 }
 
-.markdown-body .orb-html-demo {
+.orb-html-demo-frame {
   display: block;
   width: 100%;
-  margin: 0;
   border: 0;
   background: var(--orb-canvas);
+  transition: height var(--orb-t-fast);
+}
+
+.orb-html-demo-code {
+  max-height: 480px;
+  overflow: auto;
+}
+
+/* Author display rules would beat the UA's [hidden], so hide explicitly. */
+.orb-html-demo-frame[hidden],
+.orb-html-demo-code[hidden] {
+  display: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .orb-html-demo-frame {
+    transition: none;
+  }
 }
 
 .markdown-body blockquote {
@@ -2933,6 +3069,19 @@ button.orb-app-header-locale:hover,
   color: var(--orb-on-primary);
   font: 600 12px/1 var(--orb-font);
 }
+/* 传 <img> 时放开圆形底：宽高自适应、无底色，宿主用它放品牌标识（如 MIXER pill） */
+.orb-omph-avatar:has(img) {
+  width: auto;
+  height: auto;
+  border-radius: 0;
+  background: none;
+  overflow: visible;
+}
+.orb-omph-avatar img {
+  display: block;
+  height: 28px;
+  width: auto;
+}
 
 .orb-omph-title {
   font: 600 14px/1.2 var(--orb-font);
@@ -3031,6 +3180,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);
@@ -3403,6 +3572,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,
@@ -3644,6 +3835,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.4",
+  "version": "3.1.8",
   "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",