orbcafe-ui 3.1.3 → 3.1.7

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);

package/package.json

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