orbcafe-ui 3.1.9 → 3.2.0

package/dist/orbis.css

@@ -2812,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;

package/package.json

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