diff --git a/BitFun-Installer/README.md b/BitFun-Installer/README.md
index 295da1ead3..ffcf6cbb54 100644
--- a/BitFun-Installer/README.md
+++ b/BitFun-Installer/README.md
@@ -7,7 +7,7 @@ A fully custom, branded installer for BitFun — built with **Tauri 2 + React**
 Instead of relying on the generic NSIS wizard UI from Tauri's built-in bundler, this project provides:
 
 - **100% custom UI** — React-based, with smooth animations, dark theme, and brand consistency
-- **Modern experience** — Similar to Discord, Figma, and VS Code installers
+- **Modern experience** — Similar to Discord and VS Code installers
 - **Full control** — Custom installation logic, right-click context menu, PATH integration
 - **Cross-platform potential** — Same codebase can target Windows, macOS, and Linux
 
diff --git a/design-system/README.md b/design-system/README.md
index 884f5f503f..c944bb0276 100644
--- a/design-system/README.md
+++ b/design-system/README.md
@@ -18,6 +18,17 @@ Design Lab exposes an Overview, a searchable component catalog with interactive
 
 `@bitfun/ui/registry` is the component source of truth. Design Lab derives its component navigation, counts, token scopes, and detail routes from that package export; adding Lab copy or a preview cannot publish a component or keep a removed component alive.
 
+The **Patterns** page composes public controls into settings, navigation,
+search/actions, device cards, provider configuration, scene toolbars, and nested
+command menus. The provider specimen includes an actual modal interaction demo,
+model multi-selection/custom values and expandable detail cards. The toolbar
+supports tab selection, closing and addition; the command menu supports both
+button and right-click entry with nested keyboard and pointer navigation.
+These are local interaction previews: they do not call product APIs or save
+credentials.
+Review these manually in light/dark, high-contrast and density modes; build and
+interaction checks do not establish pixel-level visual fidelity.
+
 The same entry publishes `ChatComposer`, the shared context-band and
 compact/expanded input anatomy used by product composers without importing
 their stores, localized menus, editor, model, voice, or host actions.
diff --git a/design-system/apps/design-lab/src/i18n/componentMetadata.ts b/design-system/apps/design-lab/src/i18n/componentMetadata.ts
index 999b9a822e..e5763e068b 100644
--- a/design-system/apps/design-lab/src/i18n/componentMetadata.ts
+++ b/design-system/apps/design-lab/src/i18n/componentMetadata.ts
@@ -23,6 +23,7 @@ const descriptionKeys: Readonly<Record<string, MessageKey>> = {
   Card: "component.Card.description",
   CommandToolCard: "component.CommandToolCard.description",
   Composer: "component.Composer.description",
+  Combobox: "component.Combobox.description",
   ConfirmDialog: "component.ConfirmDialog.description",
   ContextCompressionToolCard: "component.ContextCompressionToolCard.description",
   DefaultToolCard: "component.DefaultToolCard.description",
diff --git a/design-system/apps/design-lab/src/i18n/messages.ts b/design-system/apps/design-lab/src/i18n/messages.ts
index 8ad54fe3a8..fe5e0679bd 100644
--- a/design-system/apps/design-lab/src/i18n/messages.ts
+++ b/design-system/apps/design-lab/src/i18n/messages.ts
@@ -197,6 +197,49 @@ export const enUSMessages = {
   "patterns.device.online": "Online",
   "patterns.device.connect": "Connect",
   "patterns.device.refresh": "Refresh device status",
+  "component.Combobox.description": "Searchable, grouped single or multiple selection with custom values, tags and async states.",
+  "patterns.provider.title": "Provider configuration dialog",
+  "patterns.provider.description": "Grouped connection fields, searchable multi-selection, custom models, expandable model details, and a fixed action footer.",
+  "patterns.provider.search": "Search models",
+  "patterns.provider.empty": "No matching models",
+  "patterns.provider.loading": "Loading models…",
+  "patterns.provider.remove": "Remove model",
+  "patterns.provider.all": "Select all models",
+  "patterns.provider.add": "Add custom model",
+  "patterns.provider.custom": "Enter model ID",
+  "patterns.provider.presets": "Preset models",
+  "patterns.provider.category": "Model category",
+  "patterns.provider.general": "General",
+  "patterns.provider.vision": "Vision",
+  "patterns.provider.context": "Context window",
+  "patterns.provider.increase": "Increase context window",
+  "patterns.provider.decrease": "Decrease context window",
+  "patterns.provider.reasoning": "Reasoning",
+  "patterns.provider.preset": "Reasoning preset",
+  "patterns.provider.presetDescription": "Keep model-specific controls together inside the expanded card.",
+  "patterns.provider.auto": "Automatic",
+  "patterns.provider.high": "High",
+  "patterns.provider.advanced": "Advanced settings",
+  "patterns.provider.headers": "Custom headers",
+  "patterns.provider.previewOnly": "Interactive preview only; no network requests or credentials are saved.",
+  "patterns.provider.saved": "Preview confirmed. No product configuration was changed.",
+  "patterns.toolbar.title": "Scene tabs and toolbar",
+  "patterns.toolbar.description": "Scrollable tabs and independent close actions share one bar with change counts and trailing tools.",
+  "patterns.toolbar.tabs": "Open files",
+  "patterns.toolbar.search": "Search in file",
+  "patterns.toolbar.details": "Toggle details",
+  "patterns.toolbar.panel": "Select, close or add tabs; use the trailing controls to reveal search and details.",
+  "patterns.toolbar.empty": "No open files. Use the plus button to add a tab.",
+  "patterns.toolbar.detailsVisible": "Details panel enabled",
+  "patterns.menu.title": "Nested command menu",
+  "patterns.menu.description": "Anchored and pointer-positioned menus share navigation, disabled items, checked state, edge flipping and focus return.",
+  "patterns.menu.hint": "Open with the button or right-click this card. Move across the gap to a submenu.",
+  "patterns.menu.open": "Open commands",
+  "patterns.menu.local": "Local terminal",
+  "patterns.menu.remote": "Remote terminal (unavailable in this preview)",
+  "patterns.menu.pin": "Pin command",
+  "patterns.menu.lastAction": "Preview action: {action}",
+  "patterns.menu.keyboard": "Use arrows, Home/End, Enter and Escape; Tab closes the menu.",
   "components.preview.primary": "Primary",
   "components.preview.actionCardTitle": "New session",
   "components.preview.actionCardDescription": "Start a conversation using the selected assistant",
@@ -442,6 +485,10 @@ export const enUSMessages = {
   "detail.option.completed": "Completed",
   "detail.option.expanded": "Expanded",
   "detail.option.loading": "Loading",
+  "detail.option.multiple": "Multiple selection",
+  "detail.option.searching": "Searching",
+  "detail.option.custom": "Custom value",
+  "detail.option.empty": "Empty",
   "detail.option.submitting": "Submitting",
   "detail.option.none": "None",
   "detail.option.chevron": "Chevron",
@@ -841,6 +888,49 @@ export const zhCNMessages = {
   "patterns.device.online": "在线",
   "patterns.device.connect": "连接",
   "patterns.device.refresh": "刷新设备状态",
+  "component.Combobox.description": "支持搜索、分组、单选或多选、自定义值、标签及异步状态的选择器。",
+  "patterns.provider.title": "供应商配置弹窗",
+  "patterns.provider.description": "组合连接参数、搜索多选、自定义模型、可展开的模型详情和固定底部操作区。",
+  "patterns.provider.search": "搜索模型",
+  "patterns.provider.empty": "没有匹配的模型",
+  "patterns.provider.loading": "正在加载模型…",
+  "patterns.provider.remove": "移除模型",
+  "patterns.provider.all": "选择全部模型",
+  "patterns.provider.add": "添加自定义模型",
+  "patterns.provider.custom": "输入模型 ID",
+  "patterns.provider.presets": "预设模型",
+  "patterns.provider.category": "模型类别",
+  "patterns.provider.general": "通用",
+  "patterns.provider.vision": "视觉",
+  "patterns.provider.context": "上下文窗口",
+  "patterns.provider.increase": "增大上下文窗口",
+  "patterns.provider.decrease": "减小上下文窗口",
+  "patterns.provider.reasoning": "推理能力",
+  "patterns.provider.preset": "推理预设",
+  "patterns.provider.presetDescription": "将模型专属设置集中在展开卡片中。",
+  "patterns.provider.auto": "自动",
+  "patterns.provider.high": "高",
+  "patterns.provider.advanced": "高级设置",
+  "patterns.provider.headers": "自定义请求头",
+  "patterns.provider.previewOnly": "仅交互预览；不会发送网络请求或保存凭据。",
+  "patterns.provider.saved": "已确认预览，未修改产品配置。",
+  "patterns.toolbar.title": "场景标签与工具栏",
+  "patterns.toolbar.description": "可滚动标签和独立关闭按钮，与变更计数及右侧工具组合成统一顶栏。",
+  "patterns.toolbar.tabs": "打开的文件",
+  "patterns.toolbar.search": "在文件中搜索",
+  "patterns.toolbar.details": "切换详情",
+  "patterns.toolbar.panel": "选择、关闭或添加标签，使用右侧工具显示搜索和详情。",
+  "patterns.toolbar.empty": "没有打开的文件，点击加号添加标签。",
+  "patterns.toolbar.detailsVisible": "已启用详情面板",
+  "patterns.menu.title": "嵌套命令菜单",
+  "patterns.menu.description": "锚点菜单和右键菜单共享导航、禁用项、勾选状态、边缘翻转及焦点恢复。",
+  "patterns.menu.hint": "点击按钮或在此卡片上右键打开，跨过间隙进入子菜单。",
+  "patterns.menu.open": "打开命令",
+  "patterns.menu.local": "本地终端",
+  "patterns.menu.remote": "远程终端（此预览中不可用）",
+  "patterns.menu.pin": "固定命令",
+  "patterns.menu.lastAction": "预览操作：{action}",
+  "patterns.menu.keyboard": "支持方向键、Home/End、Enter 和 Escape，Tab 可关闭菜单。",
   "components.preview.primary": "主要操作",
   "components.preview.actionCardTitle": "新建会话",
   "components.preview.actionCardDescription": "使用所选助手开始对话",
@@ -1086,6 +1176,10 @@ export const zhCNMessages = {
   "detail.option.completed": "已完成",
   "detail.option.expanded": "展开",
   "detail.option.loading": "加载中",
+  "detail.option.multiple": "多选",
+  "detail.option.searching": "搜索中",
+  "detail.option.custom": "自定义值",
+  "detail.option.empty": "空选项",
   "detail.option.submitting": "提交中",
   "detail.option.none": "无",
   "detail.option.chevron": "箭头",
@@ -1287,6 +1381,49 @@ export const zhCNMessages = {
 
 export const zhTWMessages = {
   ...zhCNMessages,
+  "component.Combobox.description": "支援搜尋、分組、單選或多選、自訂值、標籤及非同步狀態的選擇器。",
+  "patterns.provider.title": "供應商設定對話框",
+  "patterns.provider.description": "組合連線參數、搜尋多選、自訂模型、可展開的模型詳情和固定底部操作區。",
+  "patterns.provider.search": "搜尋模型",
+  "patterns.provider.empty": "沒有符合的模型",
+  "patterns.provider.loading": "正在載入模型…",
+  "patterns.provider.remove": "移除模型",
+  "patterns.provider.all": "選擇全部模型",
+  "patterns.provider.add": "新增自訂模型",
+  "patterns.provider.custom": "輸入模型 ID",
+  "patterns.provider.presets": "預設模型",
+  "patterns.provider.category": "模型類別",
+  "patterns.provider.general": "通用",
+  "patterns.provider.vision": "視覺",
+  "patterns.provider.context": "上下文視窗",
+  "patterns.provider.increase": "增大上下文視窗",
+  "patterns.provider.decrease": "縮小上下文視窗",
+  "patterns.provider.reasoning": "推理能力",
+  "patterns.provider.preset": "推理預設",
+  "patterns.provider.presetDescription": "將模型專屬設定集中在展開卡片中。",
+  "patterns.provider.auto": "自動",
+  "patterns.provider.high": "高",
+  "patterns.provider.advanced": "進階設定",
+  "patterns.provider.headers": "自訂請求標頭",
+  "patterns.provider.previewOnly": "僅互動預覽；不會傳送網路請求或儲存憑證。",
+  "patterns.provider.saved": "已確認預覽，未修改產品設定。",
+  "patterns.toolbar.title": "場景標籤與工具列",
+  "patterns.toolbar.description": "可捲動標籤和獨立關閉按鈕，與變更計數及右側工具組合成統一頂列。",
+  "patterns.toolbar.tabs": "開啟的檔案",
+  "patterns.toolbar.search": "在檔案中搜尋",
+  "patterns.toolbar.details": "切換詳情",
+  "patterns.toolbar.panel": "選擇、關閉或新增標籤，使用右側工具顯示搜尋和詳情。",
+  "patterns.toolbar.empty": "沒有開啟的檔案，點擊加號新增標籤。",
+  "patterns.toolbar.detailsVisible": "已啟用詳情面板",
+  "patterns.menu.title": "巢狀命令選單",
+  "patterns.menu.description": "錨點選單和右鍵選單共用導覽、停用項目、勾選狀態、邊緣翻轉及焦點還原。",
+  "patterns.menu.hint": "點擊按鈕或在此卡片上按右鍵開啟，跨過間隙進入子選單。",
+  "patterns.menu.open": "開啟命令",
+  "patterns.menu.local": "本機終端機",
+  "patterns.menu.remote": "遠端終端機（此預覽中無法使用）",
+  "patterns.menu.pin": "釘選命令",
+  "patterns.menu.lastAction": "預覽操作：{action}",
+  "patterns.menu.keyboard": "支援方向鍵、Home/End、Enter 和 Escape，Tab 可關閉選單。",
   "app.brandSubtitle": "獨立 Design Lab",
   "app.closeNavigation": "關閉導覽",
   "app.openNavigation": "開啟導覽",
@@ -1669,6 +1806,10 @@ export const zhTWMessages = {
   "detail.option.completed": "已完成",
   "detail.option.expanded": "展開",
   "detail.option.loading": "載入中",
+  "detail.option.multiple": "多選",
+  "detail.option.searching": "搜尋中",
+  "detail.option.custom": "自訂值",
+  "detail.option.empty": "空選項",
   "detail.option.submitting": "提交中",
   "detail.option.none": "無",
   "detail.option.chevron": "箭頭",
diff --git a/design-system/apps/design-lab/src/pages/ComponentDetailPage.tsx b/design-system/apps/design-lab/src/pages/ComponentDetailPage.tsx
index 46d66ceb11..860c92d9dc 100644
--- a/design-system/apps/design-lab/src/pages/ComponentDetailPage.tsx
+++ b/design-system/apps/design-lab/src/pages/ComponentDetailPage.tsx
@@ -34,6 +34,7 @@ import {
   CardMedia,
   ChangeCount,
   Composer,
+  Combobox,
   ComposerContextBar,
   ComposerDivider,
   ComposerToolbar,
@@ -88,6 +89,7 @@ import {
   type TokenOverrides,
 } from "@bitfun/ui";
 import type { ComponentMeta } from "@bitfun/ui/registry";
+import { NestedMenuPattern } from "./ReferencePatterns";
 import { useI18n, type MessageKey } from "../i18n";
 import {
   getComponentCategoryLabel,
@@ -162,6 +164,10 @@ const optionLabelKeys: Readonly<Record<string, MessageKey>> = {
   left: "detail.option.left",
   lg: "detail.option.lg",
   loading: "detail.option.loading",
+  multiple: "detail.option.multiple",
+  searching: "detail.option.searching",
+  custom: "detail.option.custom",
+  empty: "detail.option.empty",
   pending: "detail.option.pending",
   md: "detail.option.md",
   none: "detail.option.none",
@@ -355,6 +361,8 @@ export function ComponentDetailPage({
         return ["default", "with-center", "overflow"] as const;
       case "Tooltip":
         return ["top", "bottom", "left", "right"] as const;
+      case "Combobox":
+        return component.states;
       default:
         return ["off", "on", "focus-visible", "disabled"] as const;
     }
@@ -364,6 +372,7 @@ export function ComponentDetailPage({
     : states;
 
   const codeSample = useMemo(() => {
+    if (component.name === "Combobox") return 'import { Combobox } from "@bitfun/ui";\n\n<Combobox label="Models" multiple searchable allowCustomValue options={[{ label: "OpenBitFun", value: "openbitfun" }]} />';
     if (flowChatPreview) {
       return flowChatPreview.codeSample(t);
     }
@@ -776,6 +785,9 @@ export function ComponentDetailPage({
       );
     }
 
+    if (component.name === "Combobox") {
+      return <Combobox key={state} label={t("components.preview.modalSelectModels")} multiple={state === "multiple"} defaultValue={state === "multiple" ? ["glm-5.2", "openbitfun"] : undefined} defaultOpen={state === "open" || state === "searching"} defaultSearchValue={state === "searching" ? "glm" : ""} allowCustomValue={state === "custom"} disabled={state === "disabled"} error={state === "invalid"} loading={state === "loading"} options={state === "empty" || state === "loading" ? [] : [{ value: "glm-5.2", label: "GLM 5.2", group: "API" }, { value: "openbitfun", label: "OpenBitFun", group: "API" }]} />;
+    }
     if (component.name === "Select") {
       return (
         <Select
@@ -1565,6 +1577,11 @@ export function ComponentDetailPage({
                   </span>
                   {renderPreview(previewState)}
                 </div>
+              ) : component.name === "Combobox" ? (
+                <div className="component-combobox-preview" data-component="combobox">
+                  <span>{t(optionLabelKeys[previewState] ?? "detail.option.default")}</span>
+                  {renderPreview(previewState)}
+                </div>
               ) : isFlowChatComponent ? (
                 <div
                   className="flow-chat-state-list"
@@ -1774,6 +1791,7 @@ export function ComponentDetailPage({
                   ))}
                 </div>
               )}
+              {component.name === "Menu" && <div className="component-menu-interaction"><NestedMenuPattern /></div>}
             </ThemeRoot>
           </section>
 
diff --git a/design-system/apps/design-lab/src/pages/ComponentsPage.tsx b/design-system/apps/design-lab/src/pages/ComponentsPage.tsx
index 289cb63b96..62ed2807d4 100644
--- a/design-system/apps/design-lab/src/pages/ComponentsPage.tsx
+++ b/design-system/apps/design-lab/src/pages/ComponentsPage.tsx
@@ -33,6 +33,7 @@ import {
   ChangeCount,
   Checkbox,
   Composer,
+  Combobox,
   ComposerToolbar,
   Disclosure,
   Empty,
@@ -126,6 +127,7 @@ const componentIcons = {
 
 function ComponentCardPreview({ component }: { component: ComponentMeta }) {
   const { t } = useI18n();
+  if (component.name === "Combobox") return <Combobox label={t("components.preview.modalProviderName")} defaultValue="openbitfun" options={[{ value: "openbitfun", label: "OpenBitFun" }, { value: "custom", label: t("components.preview.add") }]} />;
   const flowChatPreview = getFlowChatPreviewDefinition(component.name);
 
   if (flowChatPreview) {
diff --git a/design-system/apps/design-lab/src/pages/PatternsPage.tsx b/design-system/apps/design-lab/src/pages/PatternsPage.tsx
index c5fb1ac720..02ac3ec295 100644
--- a/design-system/apps/design-lab/src/pages/PatternsPage.tsx
+++ b/design-system/apps/design-lab/src/pages/PatternsPage.tsx
@@ -31,6 +31,7 @@ import {
   type TokenOverrides,
 } from "@bitfun/ui";
 import { useI18n, type MessageKey } from "../i18n";
+import { NestedMenuPattern, ProviderConfigurationPattern, SceneToolbarPattern } from "./ReferencePatterns";
 
 interface PatternsPageProps {
   colorScheme: ColorScheme;
@@ -162,6 +163,15 @@ export function PatternsPage({ colorScheme, contrast, density, tokenOverrides }:
             <Button leadingIcon={<Icon name="link" />} size="sm" variant="fill">{t("patterns.device.connect")}</Button>
           </Card>
         </PatternSection>
+        <PatternSection description={t("patterns.provider.description")} index="05" title={t("patterns.provider.title")}>
+          <ProviderConfigurationPattern />
+        </PatternSection>
+        <PatternSection description={t("patterns.toolbar.description")} index="06" title={t("patterns.toolbar.title")}>
+          <SceneToolbarPattern />
+        </PatternSection>
+        <PatternSection description={t("patterns.menu.description")} index="07" title={t("patterns.menu.title")}>
+          <NestedMenuPattern />
+        </PatternSection>
       </main>
     </ThemeRoot>
   );
diff --git a/design-system/apps/design-lab/src/pages/ReferencePatterns.tsx b/design-system/apps/design-lab/src/pages/ReferencePatterns.tsx
new file mode 100644
index 0000000000..9f1899ef6e
--- /dev/null
+++ b/design-system/apps/design-lab/src/pages/ReferencePatterns.tsx
@@ -0,0 +1,127 @@
+import { useRef, useState } from "react";
+import {
+  Button, Card, CardFooter, ChangeCount, Combobox, ComboboxProvider, Disclosure,
+  Field, FieldGroup, FieldRow, Icon, IconButton, Input, KeyHint, MenuPopover, Modal,
+  NumberInput, PageHeader, SearchField, Select, StatusPill, Switch, TabGroup,
+  Textarea, Toolbar, ToolbarGroup, ToolbarSeparator,
+} from "@bitfun/ui";
+import { useI18n } from "../i18n";
+
+export function ProviderConfigurationPattern() {
+  const { t } = useI18n();
+  const [open, setOpen] = useState(false);
+  const [revision, setRevision] = useState(0);
+  const [saved, setSaved] = useState(false);
+  const footer = (close: () => void) => <CardFooter align="center">
+    <Button variant="outline" onClick={close}>{t("components.preview.modalCancel")}</Button>
+    <Button variant="fill" onClick={() => { setSaved(true); setOpen(false); }}>{t("components.preview.modalSave")}</Button>
+  </CardFooter>;
+
+  return <div className="pattern-provider" data-bf-pattern="provider-configuration">
+    <div className="pattern-demo-actions">
+      <Button size="sm" onClick={() => setOpen(true)}>{t("components.preview.modalInteractionDemo")}</Button>
+    </div>
+    <ComboboxProvider labels={{ placeholder: t("components.preview.modalSelectModels"), search: t("patterns.provider.search"), empty: t("patterns.provider.empty"), loading: t("patterns.provider.loading"), clear: t("patterns.provider.remove"), selectAll: t("patterns.provider.all"), create: t("patterns.provider.add") }}>
+      <Card appearance="raised" padding="md" gap="lg" radius="lg">
+        <PageHeader level={3} size="md" title={t("components.preview.modalTitle")} />
+        <ProviderFields key={revision} />
+        {footer(() => { setRevision(value => value + 1); setSaved(false); })}
+      </Card>
+      <Modal isOpen={open} onClose={() => setOpen(false)} title={t("components.preview.modalTitle")} closeButtonLabel={t("components.preview.close")} size="medium" contentClassName="pattern-provider-modal" footer={footer(() => setOpen(false))}>
+        <ProviderFields />
+      </Modal>
+    </ComboboxProvider>
+    <p className="pattern-feedback" role="status">{t(saved ? "patterns.provider.saved" : "patterns.provider.previewOnly")}</p>
+  </div>;
+}
+
+function ProviderFields() {
+  const { t } = useI18n();
+  const [models, setModels] = useState(["glm-5.2", "glm-4.7"]);
+  const [custom, setCustom] = useState("");
+  const [contextWindows, setContextWindows] = useState<Record<string, number>>({});
+  const add = () => { const model = custom.trim(); if (model && !models.includes(model)) setModels([...models, model]); setCustom(""); };
+  return <div className="pattern-provider-fields">
+    <FieldGroup appearance="subtle" dividers>
+      <FieldRow><Field label={t("components.preview.modalProviderName")} orientation="horizontal" labelWidth="sm" controlWidth="fill"><Input defaultValue="Z.ai" /></Field></FieldRow>
+      <FieldRow><Field label={t("components.preview.modalApiKey")} orientation="horizontal" labelWidth="sm" controlWidth="fill"><Input type="password" placeholder="sk-…" autoComplete="off" /></Field></FieldRow>
+      <FieldRow><Field label={t("components.preview.modalApiUrl")} orientation="horizontal" labelWidth="sm" controlWidth="fill"><Input type="url" defaultValue="https://api.example.com/v1" /></Field></FieldRow>
+      <FieldRow><Field label={t("components.preview.modalRequestFormat")} orientation="horizontal" labelWidth="sm" controlWidth="fill"><Select defaultValue="openai" options={[{ label: "OpenAI", value: "openai" }, { label: "Anthropic", value: "anthropic" }]} /></Field></FieldRow>
+      <FieldRow><Field label={t("components.preview.modalSelectModels")} orientation="horizontal" labelWidth="sm" controlWidth="fill" required>
+        <Combobox multiple searchable allowCustomValue clearable indicator={<Icon name="plus" size="sm" />} value={models} onChange={value => setModels(Array.isArray(value) ? value.map(String) : [])} options={[
+          { value: "glm-5.2", label: "GLM 5.2", group: t("patterns.provider.presets") },
+          { value: "glm-4.7", label: "GLM 4.7", group: t("patterns.provider.presets") },
+          { value: "glm-4.6v", label: "GLM 4.6V", group: t("patterns.provider.vision") },
+        ]} />
+      </Field></FieldRow>
+    </FieldGroup>
+    <div className="pattern-model-entry">
+      <Input aria-label={t("patterns.provider.custom")} placeholder={t("patterns.provider.custom")} value={custom} onChange={event => setCustom(event.target.value)} onKeyDown={event => { if (event.key === "Enter" && !event.nativeEvent.isComposing && event.nativeEvent.keyCode !== 229) { event.preventDefault(); add(); } }} />
+      <Button variant="outline" disabled={!custom.trim()} onClick={add}>{t("patterns.provider.add")}</Button>
+    </div>
+    {models.map((model, index) => <Card key={model} appearance="subtle" padding="sm">
+      <Disclosure summary={model} defaultOpen={index === 0} description={t("components.preview.modalModelSummary")} actions={<IconButton aria-label={`${t("patterns.provider.remove")}: ${model}`} icon={<Icon name="xmark" />} size="sm" variant="quiet" onClick={() => setModels(models.filter(value => value !== model))} />}>
+        <FieldGroup appearance="plain" dividers>
+          <FieldRow><Field label={t("patterns.provider.category")} orientation="horizontal" labelWidth="sm" controlWidth="fill"><Select defaultValue="general" options={[{ label: t("patterns.provider.general"), value: "general" }, { label: t("patterns.provider.vision"), value: "vision" }]} /></Field></FieldRow>
+          <FieldRow><Field label={t("patterns.provider.context")} orientation="horizontal" labelWidth="sm" controlWidth="fill"><NumberInput value={contextWindows[model] ?? 131072} onChange={value => setContextWindows(previous => ({ ...previous, [model]: value }))} min={1024} step={1024} disableWheel incrementLabel={t("patterns.provider.increase")} decrementLabel={t("patterns.provider.decrease")} /></Field></FieldRow>
+          <FieldRow><Field label={t("patterns.provider.reasoning")} orientation="horizontal" labelWidth="sm"><Switch defaultChecked aria-label={t("patterns.provider.reasoning")} /></Field></FieldRow>
+        </FieldGroup>
+        <Card appearance="raised" padding="sm" gap="sm"><PageHeader level={4} size="sm" title={t("patterns.provider.preset")} description={t("patterns.provider.presetDescription")} /><Select aria-label={t("patterns.provider.preset")} defaultValue="auto" options={[{ label: t("patterns.provider.auto"), value: "auto" }, { label: t("patterns.provider.high"), value: "high" }]} /></Card>
+      </Disclosure>
+    </Card>)}
+    <Disclosure summary={t("patterns.provider.advanced")}>
+      <Field label={t("patterns.provider.headers")} controlWidth="fill"><Textarea defaultValue={'{\n  "X-Client": "BitFun"\n}'} rows={3} /></Field>
+    </Disclosure>
+  </div>;
+}
+
+export function SceneToolbarPattern() {
+  const { t } = useI18n();
+  const [tabs, setTabs] = useState(["README.md", "models.ts", "design-system"]);
+  const [active, setActive] = useState("README.md");
+  const [search, setSearch] = useState(false);
+  const [details, setDetails] = useState(false);
+  const nextTab = useRef(1);
+  const close = (value: string) => { const next = tabs.filter(tab => tab !== value); setTabs(next); if (active === value) setActive(next[0] ?? ""); };
+  return <Card appearance="raised" data-bf-pattern="scene-toolbar" className="pattern-scene-toolbar">
+    <Toolbar leadingOverflow="scroll" leading={<TabGroup aria-label={t("patterns.toolbar.tabs")} value={active} onValueChange={setActive} items={tabs.map(value => ({ value, label: value, id: `pattern-tab-${value}`, panelId: `pattern-panel-${value}`, icon: <Icon name="files" size="sm" />, endAction: <IconButton aria-label={`${t("components.preview.close")}: ${value}`} icon={<Icon name="xmark" />} variant="quiet" size="xs" onClick={() => close(value)} /> }))} />}
+      trailing={<ToolbarGroup>
+        <ChangeCount additions={12} deletions={3} />
+        <ToolbarSeparator />
+        <IconButton aria-label={t("components.preview.add")} icon={<Icon name="plus" />} variant="quiet" onClick={() => { const name = `file-${nextTab.current++}.ts`; setTabs([...tabs, name]); setActive(name); }} />
+        <IconButton aria-label={t("patterns.toolbar.search")} aria-pressed={search} icon={<Icon name="search" />} variant="quiet" onClick={() => setSearch(!search)} />
+        <IconButton aria-label={t("patterns.toolbar.details")} aria-pressed={details} icon={<Icon name="settings" />} variant="quiet" onClick={() => setDetails(!details)} />
+      </ToolbarGroup>} />
+    <div className="pattern-scene-content">
+      {search && <SearchField aria-label={t("patterns.toolbar.search")} placeholder={t("patterns.toolbar.search")} />}
+      {active ? <div role="tabpanel" tabIndex={0} id={`pattern-panel-${active}`} aria-labelledby={`pattern-tab-${active}`}><PageHeader level={3} size="sm" title={active} description={t("patterns.toolbar.panel")} /></div> : <p>{t("patterns.toolbar.empty")}</p>}
+      {details && <StatusPill tone="info">{t("patterns.toolbar.detailsVisible")}</StatusPill>}
+    </div>
+  </Card>;
+}
+
+export function NestedMenuPattern() {
+  const { t } = useI18n();
+  const anchorRef = useRef<HTMLButtonElement>(null);
+  const [open, setOpen] = useState(false);
+  const [position, setPosition] = useState<{ x: number; y: number } | undefined>();
+  const [lastAction, setLastAction] = useState("");
+  const [pinned, setPinned] = useState(false);
+  return <Card appearance="subtle" padding="md" gap="md" data-bf-pattern="nested-menu" onContextMenu={event => { event.preventDefault(); setPosition({ x: event.clientX, y: event.clientY }); setOpen(true); }}>
+    <PageHeader level={3} size="sm" title={t("patterns.menu.title")} description={t("patterns.menu.hint")} />
+    <Button ref={anchorRef} aria-haspopup="menu" aria-expanded={open} leadingIcon={<Icon name="more" />} onClick={() => { setPosition(undefined); setOpen(!open); }}>{t("patterns.menu.open")}</Button>
+    <MenuPopover aria-label={t("patterns.menu.title")} open={open} onClose={() => setOpen(false)} anchorRef={position ? undefined : anchorRef} position={position} items={[
+      { id: "open", label: t("patterns.actions.openFiles"), icon: <Icon name="files" />, shortcut: <KeyHint>Ctrl O</KeyHint>, onSelect: () => setLastAction(t("patterns.actions.openFiles")) },
+      { id: "tools", label: t("patterns.navigation.tools"), icon: <Icon name="extension" />, submenu: [
+        { id: "browser", label: t("patterns.actions.openBrowser"), icon: <Icon name="browser" />, onSelect: () => setLastAction(t("patterns.actions.openBrowser")) },
+        { id: "terminal", label: t("patterns.actions.openTerminal"), icon: <Icon name="terminal" />, submenu: [
+          { id: "local", label: t("patterns.menu.local"), onSelect: () => setLastAction(t("patterns.menu.local")) },
+          { id: "remote", label: t("patterns.menu.remote"), disabled: true },
+        ] },
+      ] },
+      { id: "separator", label: "", separator: true },
+      { id: "pin", label: t("patterns.menu.pin"), role: "menuitemcheckbox", checked: pinned, icon: <Icon name={pinned ? "check-line" : "pin"} />, onSelect: () => { setPinned(!pinned); setLastAction(t("patterns.menu.pin")); } },
+    ]} />
+    <p className="pattern-feedback" role="status">{lastAction ? t("patterns.menu.lastAction", { action: lastAction }) : t("patterns.menu.keyboard")}</p>
+  </Card>;
+}
diff --git a/design-system/apps/design-lab/src/styles.css b/design-system/apps/design-lab/src/styles.css
index 192c168981..c0f0145d78 100644
--- a/design-system/apps/design-lab/src/styles.css
+++ b/design-system/apps/design-lab/src/styles.css
@@ -2995,6 +2995,100 @@ input.lab-force-focus {
   background: var(--bf-color-surface-subtle);
 }
 
+.pattern-provider,
+.pattern-provider-fields {
+  display: grid;
+  min-inline-size: 0;
+  gap: var(--bf-space-4);
+}
+
+.pattern-provider > [data-bf-component="card"] {
+  max-inline-size: 640px;
+  container-type: inline-size;
+}
+
+.pattern-provider-modal {
+  container-type: inline-size;
+}
+
+.pattern-provider-fields [data-bf-component="disclosure"] [data-bf-part="content-inner"] {
+  display: grid;
+  gap: var(--bf-space-3);
+  padding-inline: 0;
+}
+
+.pattern-model-entry {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: var(--bf-space-2);
+}
+
+.pattern-demo-actions {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--bf-space-4);
+  font-size: var(--bf-font-size-small);
+}
+
+.pattern-feedback {
+  margin: 0;
+  font-size: var(--bf-font-size-small);
+  color: var(--bf-color-content-muted);
+}
+
+.pattern-scene-toolbar {
+  min-inline-size: 0;
+}
+
+.pattern-scene-toolbar [data-bf-component="toolbar"] {
+  border-start-start-radius: inherit;
+  border-start-end-radius: inherit;
+}
+
+.pattern-scene-content {
+  display: grid;
+  align-content: start;
+  min-block-size: 180px;
+  padding: var(--bf-space-5);
+  gap: var(--bf-space-4);
+}
+
+@container (max-width: 480px) {
+  .pattern-provider-fields [data-bf-component="field"][data-orientation="horizontal"] {
+    grid-template-columns: minmax(0, 1fr);
+    gap: var(--bf-space-2);
+  }
+}
+
+@media (max-width: 640px) {
+  .pattern-provider-fields [data-bf-component="field"][data-orientation="horizontal"],
+  .pattern-model-entry {
+    grid-template-columns: minmax(0, 1fr);
+    gap: var(--bf-space-2);
+  }
+
+  .pattern-scene-toolbar [data-bf-component="toolbar"] {
+    grid-template-columns: minmax(0, 1fr);
+    row-gap: var(--bf-space-2);
+  }
+
+  .pattern-scene-toolbar [data-bf-component="toolbar"] > [data-bf-part="trailing"] {
+    grid-column: 1;
+    justify-self: start;
+  }
+}
+
+.component-combobox-preview {
+  display: grid;
+  gap: var(--bf-space-3);
+  inline-size: min(100%, 380px);
+  min-block-size: 280px;
+  align-content: start;
+}
+
+.component-menu-interaction { margin-block-start: var(--bf-space-5); }
+
 /* Component reference page */
 .lab-page--component-detail {
   width: 100%;
diff --git a/design-system/apps/design-lab/vite/component-detail-contract.test.mjs b/design-system/apps/design-lab/vite/component-detail-contract.test.mjs
index 07eecfb551..c8623c3462 100644
--- a/design-system/apps/design-lab/vite/component-detail-contract.test.mjs
+++ b/design-system/apps/design-lab/vite/component-detail-contract.test.mjs
@@ -553,3 +553,11 @@ test("Toolbar preview keeps leading, centered, trailing, and overflow compositio
   assert.match(detail, /setToolbarSize/);
   assert.match(styles, /\.component-toolbar-example\s*\{[^}]*max-inline-size:\s*760px/s);
 });
+
+test("Combobox details render their own live state and menus include nested interaction", async () => {
+  const detail = await readFile(detailSource, "utf8");
+  assert.match(detail, /data-component="combobox"/);
+  assert.match(detail, /defaultOpen=\{state === "open" \|\| state === "searching"\}/);
+  assert.match(detail, /defaultSearchValue=\{state === "searching"/);
+  assert.match(detail, /<NestedMenuPattern/);
+});
diff --git a/design-system/apps/design-lab/vite/patterns-page-contract.test.mjs b/design-system/apps/design-lab/vite/patterns-page-contract.test.mjs
index 6c9bd26234..b2ac3d432c 100644
--- a/design-system/apps/design-lab/vite/patterns-page-contract.test.mjs
+++ b/design-system/apps/design-lab/vite/patterns-page-contract.test.mjs
@@ -37,3 +37,20 @@ test("Patterns remain responsive and consume theme contracts", async () => {
   assert.match(styles, /\.pattern-settings \[data-bf-component="field"\]\[data-orientation="horizontal"\]\s*\{[^}]*grid-template-columns:\s*minmax\(0, 1fr\)/s);
   assert.doesNotMatch(styles.match(/\/\* Patterns \*\/[\s\S]*?\/\* Component reference page \*\//)?.[0] ?? "", /#[0-9a-f]{3,8}/i);
 });
+
+test("Reference patterns use real provider controls, scene tabs and nested popovers", async () => {
+  const page = await readFile(pageSource, "utf8");
+  const recipes = await readFile(new URL("../src/pages/ReferencePatterns.tsx", import.meta.url), "utf8");
+  for (const name of ["ProviderConfigurationPattern", "SceneToolbarPattern", "NestedMenuPattern"]) {
+    assert.match(page, new RegExp(`<${name}`));
+  }
+  for (const name of ["Modal", "Combobox", "Disclosure", "NumberInput", "Textarea", "FieldGroup", "Toolbar", "TabGroup", "MenuPopover"]) {
+    assert.match(recipes, new RegExp(`<${name}\\b`));
+  }
+  assert.match(recipes, /className="pattern-demo-actions"/);
+  assert.doesNotMatch(recipes, /<a\b|node-id=/);
+  assert.match(recipes, /onContextMenu=/);
+  assert.match(recipes, /role: "menuitemcheckbox"/);
+  assert.match(recipes, /submenu: \[/);
+  assert.doesNotMatch(recipes, /from ["']@\/|FlowChat|ChatComposer|fetch\(/);
+});
diff --git a/design-system/packages/ui/README.md b/design-system/packages/ui/README.md
index 3f85d3c36c..465ead7939 100644
--- a/design-system/packages/ui/README.md
+++ b/design-system/packages/ui/README.md
@@ -23,8 +23,35 @@ uncontrolled open state, trigger/region accessibility wiring, focus exclusion
 while collapsed, reduced-motion behavior, and independent header actions.
 Product copy and the revealed content remain consumer-owned.
 
+## Advanced selection and menus
+
+Use native `Select` for simple options. `Combobox` adds search, grouped options,
+multiple selection with removable tags, custom values and async loading states.
+`value` is authoritative when controlled; option discovery remains host-owned.
+Wrap consumers in `ComboboxProvider` to supply translated labels and the host's
+overlay container. Explicit `portalContainer` overrides that default.
+The Web UI's legacy Select implementation is retired. Like retired Button and
+Switch overrides, legacy `components.select` Appearance rules are ignored at
+the existing read-only migration boundary; original packages are not rewritten.
+Selection visuals now come from the public field/menu semantic tokens.
+
+`Menu` remains composable inline anatomy. `MenuPopover` composes it into a
+controlled anchored or coordinate popup. Pass `items`, `open`, `onClose` and
+either `anchorRef` or `position`. Entries can include `submenu`, `shortcut`,
+`disabled`, `checked`/`role`, and `onSelect`. Activation closes the tree and
+restores focus before dispatching `onSelect`; the host owns asynchronous work
+and error handling. The popup flips and clamps to the viewport, keeps keyboard
+navigation in the active menu, and supports safe pointer travel to either side.
+
+Portals default to the nearest ThemeRoot. Supply `portalContainer` for a
+host-managed overlay layer; use `portalled={false}` only inside an existing
+overlay host. Stable `parts` wrappers preserve host data hooks; they must forward
+all props and refs and retain public component ownership. `useSubmenuIntent` is available
+for staged migration of other product popovers using the same pointer corridor.
+
 ## FlowChat tool cards
 
+
 FlowChat frameworks use an attention model rather than a size or border model:
 
 - `AmbientToolCard` keeps routine tool traces lightweight and glanceable.
diff --git a/design-system/packages/ui/src/components/Combobox/Combobox.meta.ts b/design-system/packages/ui/src/components/Combobox/Combobox.meta.ts
new file mode 100644
index 0000000000..98fef8dccc
--- /dev/null
+++ b/design-system/packages/ui/src/components/Combobox/Combobox.meta.ts
@@ -0,0 +1,18 @@
+import type { ComponentMeta } from "../../registry.types";
+export const comboboxMeta = {
+  name: "Combobox", category: "form", maturity: "stable",
+  description: "A searchable single or multiple picker with grouped rich options, async loading and custom values.",
+  props: [
+    { name: "options", type: "readonly ComboboxOption[]" },
+    { name: "value", type: "string | number | (string | number)[]" },
+    { name: "onChange", type: "(value: ComboboxValue) => void" },
+    { name: "multiple", type: "boolean", defaultValue: "false" },
+    { name: "searchable", type: "boolean", defaultValue: "true" },
+    { name: "allowCustomValue", type: "boolean", defaultValue: "false" },
+    { name: "loading", type: "boolean" },
+    { name: "renderOption / renderValue", type: "render function" },
+    { name: "portalContainer", type: "Element | DocumentFragment | (() => Element | DocumentFragment | null)" },
+  ],
+  states: ["default", "open", "searching", "multiple", "custom", "loading", "empty", "disabled", "invalid"],
+  tokens: ["color.field.background", "color.field.border", "color.focus.ring", "color.content.primary", "color.surface.panel", "overlay.menu.itemHeight", "shadow.menu"],
+} as const satisfies ComponentMeta;
diff --git a/design-system/packages/ui/src/components/Combobox/Combobox.module.css b/design-system/packages/ui/src/components/Combobox/Combobox.module.css
new file mode 100644
index 0000000000..80bb7cce2d
--- /dev/null
+++ b/design-system/packages/ui/src/components/Combobox/Combobox.module.css
@@ -0,0 +1,37 @@
+@layer bf.components {
+  .root { min-inline-size: 0; inline-size: 100%; font-family: var(--bf-font-family-control); font-size: var(--bf-font-size-small); color: var(--bf-color-content-primary); }
+  .control { display: flex; align-items: center; border: var(--bf-border-width-default) solid var(--bf-color-field-border); border-radius: var(--bf-control-select-radius); background: var(--bf-color-field-background); }
+  .control:hover { border-color: var(--bf-color-field-border-hover); }
+  .control:focus-within { outline: var(--bf-focus-width) solid var(--bf-color-focus-ring); }
+  .root[data-invalid="true"] .control { border-color: var(--bf-color-status-danger-border); }
+  .root[data-disabled="true"] { color: var(--bf-color-content-disabled); }
+  .trigger { display: flex; align-items: center; gap: var(--bf-space-2); flex: 1; min-inline-size: 0; min-block-size: var(--bf-control-height-md); padding: var(--bf-space-1) var(--bf-control-select-padding-inline); border: 0; border-radius: inherit; color: inherit; background: transparent; font: inherit; text-align: start; cursor: pointer; outline: none; }
+  .trigger:disabled { cursor: not-allowed; }
+  .root[data-size="sm"] .trigger { min-block-size: var(--bf-control-height-sm); }
+  .root[data-size="lg"] .trigger { min-block-size: var(--bf-control-height-lg); }
+  .value { flex: 1; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .value[data-placeholder="true"], .group, .empty { color: var(--bf-color-content-muted); }
+  .tags { display: flex; flex: 1; flex-wrap: wrap; align-items: center; min-inline-size: 0; gap: var(--bf-space-1); padding: var(--bf-space-1); }
+  .tag { display: inline-flex; align-items: center; min-inline-size: 0; max-inline-size: 100%; padding-inline-start: var(--bf-space-1); border-radius: var(--bf-radius-xs); background: var(--bf-color-action-neutral-surface); }
+  .tag > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .control[data-tags="true"] .trigger { flex: 0 0 auto; }
+  .control[data-tags="true"] .value { display: none; }
+  .label { display: block; margin-block-end: var(--bf-space-2); }
+  .popup { box-sizing: border-box; z-index: var(--bf-layer-popover); display: flex; flex-direction: column; gap: var(--bf-space-1); min-inline-size: 0; padding: var(--bf-overlay-menu-surface-padding); border: var(--bf-border-width-default) solid var(--bf-color-border-subtle); border-radius: var(--bf-overlay-menu-surface-radius); background: var(--bf-color-surface-panel); color: var(--bf-color-content-primary); box-shadow: var(--bf-shadow-menu); font-family: var(--bf-font-family-control); font-size: var(--bf-font-size-small); }
+  .search { flex: 0 0 auto; }
+  .options { min-block-size: 0; max-block-size: var(--bf-overlay-menu-max-block-size); }
+  .option { display: flex; align-items: center; gap: var(--bf-space-2); min-block-size: var(--bf-overlay-menu-item-height); padding: var(--bf-space-2) var(--bf-overlay-menu-item-padding-inline); border-radius: var(--bf-overlay-menu-item-radius); cursor: pointer; overflow-wrap: anywhere; }
+  .option[data-active="true"], .option[data-selected="true"] { background: var(--bf-color-action-neutral-surface); }
+  .option[aria-disabled="true"] { color: var(--bf-color-content-disabled); cursor: not-allowed; }
+  .option > svg { flex-shrink: 0; inline-size: var(--bf-overlay-menu-item-icon-size); block-size: var(--bf-overlay-menu-item-icon-size); }
+  .copy { display: flex; flex-direction: column; flex: 1; min-inline-size: 0; }
+  .copy small { color: var(--bf-color-content-muted); }
+  .group, .empty { padding: var(--bf-space-2); }
+  .selectAll { padding: var(--bf-space-2); border: 0; background: transparent; color: inherit; font: inherit; text-align: start; cursor: pointer; }
+  .error { margin-block-start: var(--bf-space-1); color: var(--bf-color-status-danger-content); }
+  @media (forced-colors: active) {
+    .control, .popup { border-color: ButtonText; }
+    .option[data-active="true"] { outline: 1px solid Highlight; }
+    .option[data-selected="true"] { background: Highlight; color: HighlightText; }
+  }
+}
diff --git a/design-system/packages/ui/src/components/Combobox/Combobox.tsx b/design-system/packages/ui/src/components/Combobox/Combobox.tsx
new file mode 100644
index 0000000000..91cd422c95
--- /dev/null
+++ b/design-system/packages/ui/src/components/Combobox/Combobox.tsx
@@ -0,0 +1,239 @@
+import { createContext, useContext, useEffect, useId, useLayoutEffect, useRef, useState, type HTMLAttributes, type KeyboardEvent, type ReactNode } from "react";
+import { createPortal } from "react-dom";
+import { Icon } from "../Icon";
+import { IconButton } from "../IconButton";
+import { SearchField } from "../SearchField";
+import { ScrollArea } from "../ScrollArea";
+import { classNames } from "../../internal/classNames";
+import { isImeOwnedKeyboardEvent } from "../../internal/ime";
+import { resolveLayerPortal, useAnchoredLayer, type PortalTarget } from "../../internal/useAnchoredLayer";
+import styles from "./Combobox.module.css";
+
+export type ComboboxValue = string | number | (string | number)[];
+export interface ComboboxOption {
+  label: string;
+  value: string | number;
+  disabled?: boolean;
+  description?: string;
+  icon?: ReactNode;
+  group?: string;
+  testId?: string;
+  testAttributes?: Record<`data-${string}`, string | number | boolean | undefined>;
+}
+export interface ComboboxLabels {
+  placeholder: string;
+  search: string;
+  empty: string;
+  loading: string;
+  clear: string;
+  selectAll: string;
+  create: string;
+}
+const defaultLabels: ComboboxLabels = { placeholder: "Select…", search: "Search options", empty: "No options", loading: "Loading…", clear: "Clear selection", selectAll: "Select all", create: "Add value" };
+const ComboboxContext = createContext<{ labels: ComboboxLabels; portalContainer?: PortalTarget }>({ labels: defaultLabels });
+export function ComboboxProvider({ children, labels, portalContainer }: { children: ReactNode; labels?: Partial<ComboboxLabels>; portalContainer?: PortalTarget }) {
+  return <ComboboxContext.Provider value={{ labels: { ...defaultLabels, ...labels }, portalContainer }}>{children}</ComboboxContext.Provider>;
+}
+
+export interface ComboboxProps extends Omit<HTMLAttributes<HTMLDivElement>, "defaultValue" | "onChange"> {
+  required?: boolean;
+  defaultOpen?: boolean;
+  defaultSearchValue?: string;
+  options?: readonly ComboboxOption[];
+  value?: ComboboxValue;
+  defaultValue?: ComboboxValue;
+  onChange?: (value: ComboboxValue) => void;
+  placeholder?: string;
+  label?: string;
+  disabled?: boolean;
+  multiple?: boolean;
+  searchable?: boolean;
+  clearable?: boolean;
+  showSelectAll?: boolean;
+  loading?: boolean;
+  error?: boolean;
+  errorMessage?: string;
+  size?: "sm" | "md" | "lg" | "small" | "medium" | "large";
+  maxTagCount?: number;
+  searchPlaceholder?: string;
+  emptyText?: string;
+  renderOption?: (option: ComboboxOption) => ReactNode;
+  renderValue?: (option?: ComboboxOption | ComboboxOption[]) => ReactNode;
+  placement?: "top" | "bottom";
+  autoClose?: boolean;
+  allowCustomValue?: boolean;
+  customValueHint?: string;
+  indicator?: ReactNode;
+  onOpenChange?: (open: boolean) => void;
+  triggerTestId?: string;
+  dropdownTestId?: string;
+  triggerAriaLabel?: string;
+  triggerAriaLabelledBy?: string;
+  triggerAriaDescribedBy?: string;
+  dropdownClassName?: string;
+  dropdownMode?: "overlay" | "inline";
+  dropdownMatchTriggerWidth?: boolean;
+  portalContainer?: PortalTarget;
+}
+
+/** Searchable single/multiple selection. Data, async discovery and copy remain host-owned. */
+export function Combobox({
+  options = [], value, defaultValue, onChange, placeholder, label, disabled = false, required = false, id: providedId, defaultOpen = false, defaultSearchValue = "",
+  multiple = false, searchable = true, clearable = false, showSelectAll = false,
+  loading = false, error = false, errorMessage, size = "md", maxTagCount = 3,
+  searchPlaceholder, emptyText, renderOption, renderValue, placement = "bottom",
+  autoClose = false, allowCustomValue = false, customValueHint, indicator, onOpenChange,
+  triggerTestId, dropdownTestId, triggerAriaLabel, triggerAriaLabelledBy, triggerAriaDescribedBy,
+  dropdownClassName, dropdownMode = "overlay", dropdownMatchTriggerWidth = true,
+  portalContainer, className, ...props
+}: ComboboxProps) {
+  const context = useContext(ComboboxContext);
+  const labels = context.labels;
+  const generatedId = useId();
+  const id = providedId ?? `bf-combobox-${generatedId}`;
+  const invalid = error || props['aria-invalid'] === true || props['aria-invalid'] === 'true';
+  const listId = `${id}-list`;
+  const rootRef = useRef<HTMLDivElement>(null);
+  const controlRef = useRef<HTMLDivElement>(null);
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const popupRef = useRef<HTMLDivElement>(null);
+  const composing = useRef(false);
+  const [mounted, setMounted] = useState(false);
+  useLayoutEffect(() => setMounted(true), []);
+  const [open, setOpen] = useState(defaultOpen && !disabled);
+  const [query, setQuery] = useState(defaultSearchValue);
+  const [active, setActive] = useState(-1);
+  const [internalValue, setInternalValue] = useState<ComboboxValue>(defaultValue ?? (multiple ? [] : ""));
+  const selectedValue = value === undefined ? internalValue : value;
+  const values = Array.isArray(selectedValue) ? selectedValue : selectedValue === "" ? [] : [selectedValue];
+  const selectedOptions = values.map(v => options.find(option => option.value === v) ?? { label: String(v), value: v });
+  const filtered = options.filter(option => !query || !searchable || `${option.label} ${option.value} ${option.description ?? ""}`.toLowerCase().includes(query.toLowerCase()));
+  // Flatten groups in exactly the same order used by keyboard navigation and the DOM.
+  const groups = new Map<string, ComboboxOption[]>();
+  for (const option of filtered) { const group = option.group ?? ""; groups.set(group, [...(groups.get(group) ?? []), option]); }
+  const displayed = [...groups.values()].flat();
+  const custom: ComboboxOption | null = allowCustomValue && query.trim() && !options.some(option => String(option.value).toLowerCase() === query.trim().toLowerCase() || option.label.toLowerCase() === query.trim().toLowerCase())
+    ? { label: query.trim(), value: query.trim() } : null;
+  const choices = custom ? [...displayed, custom] : displayed;
+  const activeIndex = choices[active] && !choices[active].disabled ? active : -1;
+  const setValue = (next: ComboboxValue) => { if (value === undefined) setInternalValue(next); onChange?.(next); };
+  const changeOpen = (next: boolean, restore = false) => {
+    if (next === open || (next && disabled)) return;
+    setOpen(next); onOpenChange?.(next); setActive(-1);
+    if (!next) { setQuery(""); if (restore) triggerRef.current?.focus(); }
+  };
+  const select = (option: ComboboxOption) => {
+    if (option.disabled || disabled) return;
+    setValue(multiple ? (values.includes(option.value) ? values.filter(v => v !== option.value) : [...values, option.value]) : option.value);
+    setQuery(""); setActive(-1);
+    if (!multiple || autoClose) changeOpen(false, true);
+    else inputRef.current?.focus();
+  };
+  const commitQuery = () => {
+    if (!allowCustomValue || !query.trim()) return;
+    const exact = options.find(option => String(option.value).toLowerCase() === query.trim().toLowerCase() || option.label.toLowerCase() === query.trim().toLowerCase());
+    const option = exact ?? custom;
+    if (option && !option.disabled && !values.includes(option.value)) {
+      setValue(multiple ? [...values, option.value] : option.value);
+    }
+  };
+  const layout = useAnchoredLayer({ open: open && mounted && dropdownMode === "overlay", anchorRef: controlRef, layerRef: popupRef, placement, matchWidth: dropdownMatchTriggerWidth, revision: `${query}:${options.length}:${loading}` });
+
+  useEffect(() => {
+    if (!open) return;
+    if (disabled) { changeOpen(false); return; }
+    const doc = rootRef.current?.ownerDocument;
+    const outside = (event: MouseEvent) => {
+      const target = event.target as Node;
+      if (!rootRef.current?.contains(target) && !popupRef.current?.contains(target)) {
+        if (!multiple) commitQuery();
+        changeOpen(false);
+      }
+    };
+    doc?.addEventListener("mousedown", outside);
+    return () => doc?.removeEventListener("mousedown", outside);
+  });
+  useEffect(() => { if (open && mounted && searchable) inputRef.current?.focus(); }, [open, mounted, searchable]);
+  useEffect(() => {
+    if (open && activeIndex >= 0) popupRef.current?.querySelector(`[data-option-index="${activeIndex}"]`)?.scrollIntoView?.({ block: "nearest" });
+  }, [open, activeIndex]);
+
+  const keyboard = (event: KeyboardEvent) => {
+    if (disabled) return;
+    if (isImeOwnedKeyboardEvent(event, composing.current)) { event.stopPropagation(); return; }
+    if (event.key === "Escape" && open) { event.preventDefault(); event.stopPropagation(); changeOpen(false, true); return; }
+    if (event.key === "Tab" && open) {
+      // Portalled search is outside the trigger's tab order: return to the trigger before native Tab.
+      commitQuery(); changeOpen(false, true); return;
+    }
+    if ((event.target as HTMLElement).closest("button") && event.target !== triggerRef.current) return;
+    if (event.key === "ArrowDown" || event.key === "ArrowUp" || (open && (event.key === "Home" || event.key === "End"))) {
+      event.preventDefault(); event.stopPropagation();
+      if (!open) changeOpen(true);
+      const indices = choices.flatMap((option, i) => option.disabled ? [] : [i]);
+      if (!indices.length) return;
+      const current = indices.indexOf(activeIndex);
+      const next = event.key === "Home" ? 0 : event.key === "End" ? indices.length - 1 : event.key === "ArrowDown" ? (current + 1) % indices.length : (current <= 0 ? indices.length - 1 : current - 1);
+      setActive(indices[next] ?? -1); return;
+    }
+    if (event.key === "Enter") {
+      event.preventDefault(); event.stopPropagation();
+      if (!open) changeOpen(true);
+      else if (activeIndex >= 0 && choices[activeIndex]) select(choices[activeIndex]);
+      else if (custom) select(custom);
+      else if (query.trim()) { const exact = displayed.find(option => !option.disabled && (option.label.toLowerCase() === query.trim().toLowerCase() || String(option.value).toLowerCase() === query.trim().toLowerCase())); if (exact) select(exact); }
+    }
+  };
+  const optionNode = (option: ComboboxOption, index: number, isCustom = false) => (
+    <div key={`${typeof option.value}:${option.value}`} id={`${listId}-${index}`} role="option" aria-selected={values.includes(option.value)} aria-disabled={option.disabled || undefined}
+      className={styles.option} data-bf-part="option" data-option-index={index} data-active={activeIndex === index} data-selected={values.includes(option.value)}
+      data-testid={option.testId} {...option.testAttributes} onMouseDown={event => event.preventDefault()} onMouseMove={() => !option.disabled && setActive(index)} onClick={() => select(option)}>
+      {isCustom ? <><Icon name="plus" size="sm" /><span>{customValueHint ?? labels.create}: {option.label}</span></> : <>
+        {renderOption ? renderOption(option) : <>{option.icon}<span className={styles.copy}><span>{option.label}</span>{option.description && <small>{option.description}</small>}</span></>}
+        {values.includes(option.value) && <Icon name="check-line" size="sm" />}
+      </>}
+    </div>
+  );
+  let optionIndex = 0;
+  const popup = <div ref={popupRef} className={classNames(styles.popup, dropdownClassName)} data-bf-component="combobox-popup" data-placement={layout?.placement ?? placement}
+    data-testid={dropdownTestId} onKeyDown={keyboard} style={dropdownMode === "inline" ? undefined : layout?.style ?? { position: "fixed", visibility: "hidden" }}>
+    {searchable && <SearchField ref={inputRef} className={styles.search} aria-label={searchPlaceholder ?? labels.search} placeholder={searchPlaceholder ?? labels.search}
+      role="combobox" aria-autocomplete="list" aria-expanded={open} aria-controls={listId} aria-activedescendant={activeIndex >= 0 ? `${listId}-${activeIndex}` : undefined}
+      value={query} onValueChange={next => { setQuery(next); setActive(-1); }} onCompositionStart={() => { composing.current = true; }} onCompositionEnd={() => { composing.current = false; }} />}
+    {multiple && showSelectAll && filtered.some(option => !option.disabled) && <button type="button" className={styles.selectAll} onClick={() => {
+      const enabled = filtered.filter(option => !option.disabled).map(option => option.value);
+      setValue(enabled.every(v => values.includes(v)) ? values.filter(v => !enabled.includes(v)) : [...new Set([...values, ...enabled])]);
+    }}>{labels.selectAll}</button>}
+    <ScrollArea className={styles.options} id={listId} role="listbox" aria-label={label ?? triggerAriaLabel ?? placeholder ?? labels.placeholder} aria-multiselectable={multiple || undefined} aria-busy={loading || undefined}>
+      {[...groups].map(([group, groupOptions]) => group ? <div key={group} role="group" aria-label={group}><div className={styles.group}>{group}</div>{groupOptions.map(option => optionNode(option, optionIndex++))}</div> : groupOptions.map(option => optionNode(option, optionIndex++)))}
+      {custom && optionNode(custom, displayed.length, true)}
+      {!choices.length && <div className={styles.empty} role="status">{loading ? labels.loading : emptyText ?? labels.empty}</div>}
+    </ScrollArea>
+  </div>;
+  const target = open && mounted ? resolveLayerPortal(portalContainer ?? context.portalContainer, triggerRef.current) : null;
+  const selectedCopy = renderValue?.(multiple ? selectedOptions : selectedOptions[0]) ?? (selectedOptions.length ? selectedOptions.slice(0, Math.max(1, maxTagCount)).map(option => option.label).join(", ") + (selectedOptions.length > maxTagCount ? ` +${selectedOptions.length - maxTagCount}` : "") : placeholder ?? labels.placeholder);
+  return <div {...props} ref={rootRef} className={classNames(styles.root, className)} data-bf-component="combobox" data-multiple={multiple} data-size={({ small: "sm", medium: "md", large: "lg" } as Record<string, string>)[size] ?? size} data-invalid={invalid} data-disabled={disabled}>
+    {label && <label id={`${id}-label`} htmlFor={id} className={styles.label}>{label}</label>}
+    <div ref={controlRef} className={styles.control} data-bf-part="control" data-tags={multiple && !renderValue && values.length > 0}>
+      {multiple && !renderValue && values.length > 0 && <div className={styles.tags} data-bf-part="tags">
+        {selectedOptions.slice(0, Math.max(1, maxTagCount)).map(option => <span key={`${typeof option.value}:${option.value}`} className={styles.tag} data-bf-part="tag">
+          <span>{option.label}</span><IconButton aria-label={`${labels.clear}: ${option.label}`} icon={<Icon name="xmark" size="xs" />} size="xs" variant="quiet" disabled={disabled} onClick={() => setValue(values.filter(v => v !== option.value))} />
+        </span>)}
+        {values.length > Math.max(1, maxTagCount) && <span>+{values.length - Math.max(1, maxTagCount)}</span>}
+      </div>}
+      <button id={id} ref={triggerRef} type="button" disabled={disabled} className={styles.trigger} data-bf-part="trigger" data-testid={triggerTestId}
+        role="combobox" aria-haspopup="listbox" aria-expanded={open} aria-controls={open ? listId : undefined}
+        aria-activedescendant={open && !searchable && activeIndex >= 0 ? `${listId}-${activeIndex}` : undefined}
+        aria-label={triggerAriaLabel ?? props["aria-label"] ?? (label || providedId ? undefined : placeholder ?? labels.placeholder)} aria-labelledby={triggerAriaLabelledBy ?? (label ? `${id}-label` : props["aria-labelledby"])}
+        aria-describedby={[triggerAriaDescribedBy ?? props['aria-describedby'], error && errorMessage ? `${id}-error` : undefined].filter(Boolean).join(' ') || undefined} aria-invalid={invalid || undefined} aria-required={required || undefined} aria-busy={loading || undefined}
+        onClick={() => changeOpen(!open)} onKeyDown={keyboard}>
+        <span className={styles.value} data-bf-part="value" data-placeholder={!selectedOptions.length}>{selectedCopy}</span>
+        <span data-bf-part="indicator">{loading ? <Icon name="refresh" size="sm" /> : indicator ?? <Icon name="chevron-down" size="sm" />}</span>
+      </button>
+      {clearable && values.length > 0 && <IconButton aria-label={labels.clear} icon={<Icon name="xmark" />} disabled={disabled} size="xs" variant="quiet" onClick={() => { setValue(multiple ? [] : ""); triggerRef.current?.focus(); }} />}
+    </div>
+    {open && !disabled && (dropdownMode === "inline" ? popup : target ? createPortal(popup, target) : null)}
+    {error && errorMessage && <div id={`${id}-error`} className={styles.error}>{errorMessage}</div>}
+  </div>;
+}
diff --git a/design-system/packages/ui/src/components/Combobox/index.ts b/design-system/packages/ui/src/components/Combobox/index.ts
new file mode 100644
index 0000000000..0bdf6d9618
--- /dev/null
+++ b/design-system/packages/ui/src/components/Combobox/index.ts
@@ -0,0 +1 @@
+export { Combobox, ComboboxProvider, type ComboboxProps, type ComboboxOption, type ComboboxValue, type ComboboxLabels } from "./Combobox";
diff --git a/design-system/packages/ui/src/components/Menu/Menu.meta.ts b/design-system/packages/ui/src/components/Menu/Menu.meta.ts
index 30f81d7f30..508b04b7a4 100644
--- a/design-system/packages/ui/src/components/Menu/Menu.meta.ts
+++ b/design-system/packages/ui/src/components/Menu/Menu.meta.ts
@@ -2,13 +2,18 @@ import type { ComponentMeta } from "../../registry.types";
 
 export const menuMeta = {
   category: "navigation",
-  description: "A grouped, scrollable menu surface with native item roles and keyboard navigation.",
+  description: "Grouped menu anatomy plus anchored MenuPopover with nested keyboard navigation, pointer corridors and focus return.",
   maturity: "stable",
   name: "Menu",
   props: [
     { name: "children", type: "ReactNode" },
     { defaultValue: "false", name: "autoFocusFirstItem", type: "boolean" },
     { defaultValue: "auto", name: "scrollbarVisibility", type: "auto | always | hidden" },
+    { name: "MenuPopover.items", type: "readonly MenuEntry[]" },
+    { name: "MenuPopover.open / onClose", type: "boolean / () => void" },
+    { name: "MenuPopover.anchorRef / position", type: "RefObject<HTMLElement> / { x: number; y: number }" },
+    { name: "MenuPopover.placement", type: "top | bottom | left | right", defaultValue: "bottom" },
+    { name: "MenuPopover.portalContainer", type: "Element | DocumentFragment | (() => Element | null)" },
   ],
   states: ["default", "scrolling", "focus-within", "disabled-item", "checked-item"],
   tokens: [
diff --git a/design-system/packages/ui/src/components/Menu/Menu.tsx b/design-system/packages/ui/src/components/Menu/Menu.tsx
index 5c64fba6a1..51c70eb7e8 100644
--- a/design-system/packages/ui/src/components/Menu/Menu.tsx
+++ b/design-system/packages/ui/src/components/Menu/Menu.tsx
@@ -15,6 +15,7 @@ import { ActionItem, type ActionItemProps } from "../ActionItem";
 import { IconButton, type IconButtonProps } from "../IconButton";
 import { ScrollArea, type ScrollbarVisibility } from "../ScrollArea";
 import { classNames } from "../../internal/classNames";
+import { isImeOwnedKeyboardEvent } from "../../internal/ime";
 import styles from "./Menu.module.css";
 
 export type MenuItemRole = "menuitem" | "menuitemcheckbox" | "menuitemradio";
@@ -62,7 +63,7 @@ function assignRef<T>(ref: ForwardedRef<T>, value: T | null) {
 function getEnabledItems(root: HTMLElement) {
   return Array.from(
     root.querySelectorAll<HTMLButtonElement>("[data-bf-menu-item]"),
-  ).filter((item) => !item.disabled && item.getAttribute("aria-disabled") !== "true");
+  ).filter((item) => item.closest('[role="menu"]') === root && !item.disabled && item.getAttribute("aria-disabled") !== "true");
 }
 
 function setActiveItem(items: readonly HTMLButtonElement[], index: number, focus = true) {
@@ -97,9 +98,16 @@ export const Menu = forwardRef<HTMLDivElement, MenuProps>(function Menu({
   useEffect(() => {
     const root = rootRef.current.node;
     if (!root) return;
+    if (!autoFocusFirstItem) hasAutoFocusedRef.current = false;
 
     const items = getEnabledItems(root);
-    if (items.length === 0) return;
+    if (items.length === 0) {
+      if (autoFocusFirstItem && !hasAutoFocusedRef.current) {
+        hasAutoFocusedRef.current = true;
+        root.focus();
+      }
+      return;
+    }
 
     const activeIndex = Math.max(items.findIndex((item) => item.tabIndex === 0), 0);
     setActiveItem(items, activeIndex, false);
@@ -113,8 +121,8 @@ export const Menu = forwardRef<HTMLDivElement, MenuProps>(function Menu({
     onFocusCapture?.(event);
     if (event.defaultPrevented) return;
 
-    const target = event.target instanceof Element
-      ? event.target.closest<HTMLButtonElement>("[data-bf-menu-item]")
+    const target = (event.target as Element).closest
+      ? (event.target as Element).closest<HTMLButtonElement>("[data-bf-menu-item]")
       : null;
     if (!target || !event.currentTarget.contains(target)) return;
 
@@ -125,10 +133,10 @@ export const Menu = forwardRef<HTMLDivElement, MenuProps>(function Menu({
 
   const handleKeyDown: KeyboardEventHandler<HTMLDivElement> = (event) => {
     onKeyDown?.(event);
-    if (event.defaultPrevented) return;
+    if (event.defaultPrevented || isImeOwnedKeyboardEvent(event)) return;
 
-    const target = event.target instanceof Element
-      ? event.target.closest<HTMLButtonElement>("[data-bf-menu-item]")
+    const target = (event.target as Element).closest
+      ? (event.target as Element).closest<HTMLButtonElement>("[data-bf-menu-item]")
       : null;
     if (!target || !event.currentTarget.contains(target)) return;
 
diff --git a/design-system/packages/ui/src/components/Menu/MenuPopover.module.css b/design-system/packages/ui/src/components/Menu/MenuPopover.module.css
new file mode 100644
index 0000000000..ee47d3cdab
--- /dev/null
+++ b/design-system/packages/ui/src/components/Menu/MenuPopover.module.css
@@ -0,0 +1,16 @@
+@layer bf.components {
+  .submenuBoundary { display: contents; }
+  .popup {
+    position: fixed;
+    z-index: var(--bf-layer-context-menu);
+    transform-origin: top left;
+    opacity: 0;
+    translate: 0 -4px;
+    transition: opacity var(--bf-motion-duration-fast) var(--bf-motion-easing-enter), translate var(--bf-motion-duration-fast) var(--bf-motion-easing-enter);
+    pointer-events: none;
+  }
+  .popup[data-state="entered"] { opacity: 1; translate: 0 0; pointer-events: auto; }
+  .popup[data-state="exiting"] { transition-duration: 100ms; }
+  .popup [aria-expanded="true"] { background: var(--bf-color-action-neutral-surface); }
+  @media (prefers-reduced-motion: reduce) { .popup { translate: none; transition: none; } }
+}
diff --git a/design-system/packages/ui/src/components/Menu/MenuPopover.tsx b/design-system/packages/ui/src/components/Menu/MenuPopover.tsx
new file mode 100644
index 0000000000..36ef6496c3
--- /dev/null
+++ b/design-system/packages/ui/src/components/Menu/MenuPopover.tsx
@@ -0,0 +1,233 @@
+import { useEffect, useId, useLayoutEffect, useRef, useState, type ComponentType, type HTMLAttributes, type ReactNode, type RefObject } from "react";
+import { createPortal } from "react-dom";
+import { Menu, MenuItem, MenuSeparator, type MenuProps, type MenuItemRole } from "./Menu";
+import { Icon } from "../Icon";
+import { classNames } from "../../internal/classNames";
+import { isImeOwnedKeyboardEvent } from "../../internal/ime";
+import { resolveLayerPortal, useAnchoredLayer, type LayerPlacement, type PortalTarget } from "../../internal/useAnchoredLayer";
+import { useSubmenuIntent } from "../../internal/useSubmenuIntent";
+import styles from "./MenuPopover.module.css";
+
+export interface MenuEntry {
+  id: string;
+  label: string;
+  icon?: ReactNode;
+  shortcut?: ReactNode;
+  disabled?: boolean;
+  separator?: boolean;
+  submenu?: readonly MenuEntry[];
+  role?: MenuItemRole;
+  checked?: boolean;
+  tone?: "neutral" | "danger";
+  /** Dispatch only: the host owns async work and error presentation. */
+  onSelect?: () => void;
+}
+
+export interface MenuPopoverProps extends Omit<MenuProps, "children"> {
+  items: readonly MenuEntry[];
+  open: boolean;
+  onClose: () => void;
+  anchorRef?: RefObject<HTMLElement | null>;
+  position?: { x: number; y: number };
+  placement?: LayerPlacement;
+  portalContainer?: PortalTarget;
+  /** Hosts that already own an overlay root can render in place. */
+  portalled?: boolean;
+  /** Stable wrappers must forward all props (and refs for root/item/separator). */
+  parts?: MenuPopoverParts;
+}
+
+export interface MenuPopoverParts {
+  root?: typeof Menu;
+  item?: typeof MenuItem;
+  separator?: typeof MenuSeparator;
+  icon?: ComponentType<HTMLAttributes<HTMLSpanElement>>;
+  label?: ComponentType<HTMLAttributes<HTMLSpanElement>>;
+  shortcut?: ComponentType<HTMLAttributes<HTMLSpanElement>>;
+  submenuArrow?: ComponentType<HTMLAttributes<HTMLSpanElement>>;
+  submenu?: ComponentType<HTMLAttributes<HTMLDivElement>>;
+}
+
+function ownItems(menu: HTMLElement) {
+  return Array.from(menu.querySelectorAll<HTMLButtonElement>("[data-bf-menu-item]"))
+    .filter(item => item.closest('[role="menu"]') === menu && !item.disabled && item.getAttribute("aria-disabled") !== "true");
+}
+
+/** Anchored/coordinate menu with nested navigation, safe pointer corridors and focus return. */
+export function MenuPopover({ items, open, onClose, anchorRef, position, placement = "bottom", portalContainer, portalled = true, autoFocusFirstItem = true, ...props }: MenuPopoverProps) {
+  const markerRef = useRef<HTMLSpanElement>(null);
+  const previousFocus = useRef<HTMLElement | null>(null);
+  const wasOpen = useRef(false);
+  const treeId = useId();
+  const [present, setPresent] = useState(open);
+  const [phase, setPhase] = useState("entering");
+  const [target, setTarget] = useState<Element | DocumentFragment | null>(null);
+  const resolvedAnchor = anchorRef ?? markerRef;
+  const restoreFocus = () => {
+    const target = previousFocus.current;
+    if (target?.isConnected && !target.matches(":disabled")) target.focus();
+  };
+  const close = () => { restoreFocus(); onClose(); };
+
+  useLayoutEffect(() => {
+    setTarget(resolveLayerPortal(portalContainer, markerRef.current ?? resolvedAnchor.current));
+  }, [portalContainer, resolvedAnchor, open]);
+
+  useLayoutEffect(() => {
+    const doc = markerRef.current?.ownerDocument;
+    if (open && !wasOpen.current) {
+      previousFocus.current = doc?.activeElement as HTMLElement | null;
+      setPresent(true);
+    } else if (!open && wasOpen.current && doc?.activeElement?.closest("[data-bf-menu-tree]")?.getAttribute("data-bf-menu-tree") === treeId) {
+      restoreFocus();
+    }
+    wasOpen.current = open;
+  }, [open, treeId]);
+
+  useEffect(() => {
+    const view = markerRef.current?.ownerDocument.defaultView;
+    if (!view) return;
+    let first = 0;
+    let second = 0;
+    let timer = 0;
+    if (open) {
+      setPhase("entering");
+      first = view.requestAnimationFrame(() => {
+        second = view.requestAnimationFrame(() => setPhase("entered"));
+      });
+    } else {
+      setPhase("exiting");
+      timer = view.setTimeout(() => setPresent(false), 100);
+    }
+    return () => { view.cancelAnimationFrame(first); view.cancelAnimationFrame(second); view.clearTimeout(timer); };
+  }, [open]);
+
+  useEffect(() => {
+    if (!open) return;
+    const doc = markerRef.current?.ownerDocument;
+    const outside = (event: MouseEvent) => {
+      const target = event.target as Element;
+      if (target.closest?.("[data-bf-menu-tree]")?.getAttribute("data-bf-menu-tree") !== treeId && !anchorRef?.current?.contains(target)) onClose();
+    };
+    doc?.addEventListener("mousedown", outside, true);
+    doc?.addEventListener("contextmenu", outside, true);
+    return () => { doc?.removeEventListener("mousedown", outside, true); doc?.removeEventListener("contextmenu", outside, true); };
+  }, [open, onClose, treeId, anchorRef]);
+
+  const content = present ? <MenuLevel {...props} items={items} open={open} phase={phase} treeId={treeId} onClose={close} anchorRef={resolvedAnchor} position={position} placement={placement} autoFocusFirstItem={autoFocusFirstItem} portalTarget={portalled ? target : null} /> : null;
+  return <><span ref={markerRef} hidden />{portalled ? target && createPortal(content, target) : content}</>;
+}
+
+interface MenuLevelProps extends Omit<MenuProps, "children"> {
+  items: readonly MenuEntry[];
+  open: boolean;
+  phase: string;
+  treeId: string;
+  onClose: () => void;
+  onBack?: () => void;
+  anchorRef: RefObject<HTMLElement | null>;
+  position?: { x: number; y: number };
+  placement: LayerPlacement;
+  portalTarget: Element | DocumentFragment | null;
+  menuRef?: RefObject<HTMLDivElement | null>;
+  parts?: MenuPopoverParts;
+}
+
+function MenuLevel({ items, open, phase, treeId, onClose, onBack, anchorRef, position, placement, portalTarget, menuRef: externalRef, autoFocusFirstItem, className, style, parts, ...props }: MenuLevelProps) {
+  const MenuSurface = parts?.root ?? Menu;
+  const Item = parts?.item ?? MenuItem;
+  const Separator = parts?.separator ?? MenuSeparator;
+  const Leading = parts?.icon ?? "span";
+  const Label = parts?.label ?? "span";
+  const Shortcut = parts?.shortcut ?? "span";
+  const Arrow = parts?.submenuArrow ?? "span";
+  const SubmenuBoundary = parts?.submenu ?? "div";
+  const localRef = useRef<HTMLDivElement>(null);
+  const menuRef = externalRef ?? localRef;
+  const submenuRef = useRef<HTMLDivElement>(null);
+  const submenuAnchor = useRef<HTMLElement | null>(null);
+  const keyboardOpen = useRef(false);
+  const [activeId, setActiveId] = useState<string | null>(null);
+  const submenuId = useId();
+  const intent = useSubmenuIntent({ activeId, onActiveIdChange: setActiveId, parentRef: menuRef, submenuRef, enabled: open, openDelayMs: 150, closeDelayMs: 300, switchDelayMs: 300, tolerance: 50 });
+  // Keep geometry until presence unmounts the menu, including its exit transition.
+  const layout = useAnchoredLayer({ open: true, anchorRef, layerRef: menuRef, placement, point: position });
+  const activeEntry = items.find(item => item.id === activeId && !item.disabled && item.submenu?.length);
+  const openSubmenu = (item: MenuEntry, trigger: HTMLElement, keyboard: boolean) => {
+    if (item.disabled || !item.submenu?.length) return;
+    submenuAnchor.current = trigger;
+    keyboardOpen.current = keyboard;
+    intent.openNow(item.id);
+    if (keyboard && activeId === item.id && submenuRef.current) ownItems(submenuRef.current)[0]?.focus();
+  };
+  const activate = (item: MenuEntry) => {
+    if (item.disabled || item.separator) return;
+    onClose();
+    item.onSelect?.();
+  };
+
+  useEffect(() => { if (!open) intent.closeNow(); }, [open, intent.closeNow]);
+  useEffect(() => {
+    if (!open) return;
+    const menu = menuRef.current;
+    const doc = menu?.ownerDocument;
+    const keyboard = (event: KeyboardEvent) => {
+      if (!menu || doc?.activeElement?.closest('[role="menu"]') !== menu || isImeOwnedKeyboardEvent(event)) return;
+      const enabled = ownItems(menu);
+      const current = enabled.indexOf(doc.activeElement as HTMLButtonElement);
+      const button = enabled[current];
+      const item = items.find(entry => entry.id === button?.getAttribute("data-menu-id"));
+      let index: number | undefined;
+      switch (event.key) {
+        case "ArrowDown": index = (current + 1) % enabled.length; break;
+        case "ArrowUp": index = (current - 1 + enabled.length) % enabled.length; break;
+        case "Home": index = 0; break;
+        case "End": index = enabled.length - 1; break;
+        case "Escape": event.preventDefault(); event.stopPropagation(); onClose(); return;
+        case "Tab": onClose(); return;
+        case "ArrowLeft":
+          if (onBack) { event.preventDefault(); event.stopPropagation(); onBack(); }
+          return;
+        case "ArrowRight":
+          if (item?.submenu?.length && button) { event.preventDefault(); event.stopPropagation(); openSubmenu(item, button, true); }
+          return;
+        case "Enter":
+        case " ":
+          event.preventDefault(); event.stopPropagation();
+          if (item && button) { if (item.submenu?.length) openSubmenu(item, button, true); else activate(item); }
+          return;
+        default:
+          if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+            for (let offset = 1; offset <= enabled.length; offset++) {
+              const candidate = (current + offset) % enabled.length;
+              if (enabled[candidate]?.textContent?.trim().toLowerCase().startsWith(event.key.toLowerCase())) { index = candidate; break; }
+            }
+          }
+      }
+      if (index !== undefined) { event.preventDefault(); event.stopPropagation(); enabled[index]?.focus(); enabled[index]?.scrollIntoView?.({ block: "nearest" }); }
+    };
+    doc?.addEventListener("keydown", keyboard, true);
+    return () => doc?.removeEventListener("keydown", keyboard, true);
+  });
+
+  const submenu = activeEntry ? <SubmenuBoundary className={styles.submenuBoundary}><MenuLevel key={activeEntry.id} id={submenuId} aria-label={activeEntry.label} menuRef={submenuRef} items={activeEntry.submenu!} open={open} phase={phase} treeId={treeId} onClose={onClose} parts={parts}
+    onBack={() => { intent.closeNow(); submenuAnchor.current?.focus(); }} anchorRef={submenuAnchor} placement="right" portalTarget={portalTarget} autoFocusFirstItem={keyboardOpen.current}
+    onPointerEnter={intent.keepOpen} onPointerLeave={intent.requestClose} /></SubmenuBoundary> : null;
+
+  return <>
+    <MenuSurface {...props} ref={node => { (menuRef as { current: HTMLDivElement | null }).current = node; }} className={classNames(styles.popup, className)} autoFocusFirstItem={open && autoFocusFirstItem && Boolean(layout)} tabIndex={-1}
+      style={{ ...layout?.style, ...style, visibility: layout ? undefined : "hidden" }} data-bf-menu-tree={treeId} data-placement={layout?.placement ?? placement} data-state={phase}
+      aria-hidden={!open || undefined} {...(!open ? { inert: "" } : {})} onContextMenu={event => event.preventDefault()}>
+      {items.map(item => item.separator ? <Separator key={item.id} /> : <Item key={item.id} data-menu-id={item.id} leading={item.icon ? <Leading>{item.icon}</Leading> : undefined} shortcut={item.shortcut ? <Shortcut>{item.shortcut}</Shortcut> : undefined} tone={item.tone} role={item.role} checked={item.checked}
+        disabled={item.disabled} aria-disabled={item.disabled || undefined} aria-haspopup={item.submenu?.length ? "menu" : undefined} aria-expanded={item.submenu?.length ? activeEntry?.id === item.id : undefined}
+        aria-controls={activeEntry?.id === item.id ? submenuId : undefined} metadata={item.submenu?.length ? <Arrow><Icon name="chevron-right" size="sm" /></Arrow> : undefined}
+        onClick={event => { event.stopPropagation(); if (item.submenu?.length) openSubmenu(item, event.currentTarget, true); else activate(item); }}
+        onPointerEnter={event => { if (activeId === null || activeId === item.id) submenuAnchor.current = event.currentTarget; keyboardOpen.current = false; intent.requestChange(!item.disabled && item.submenu?.length ? item.id : null, event); }}
+        onPointerLeave={intent.requestClose}
+        ref={element => { if (activeEntry?.id === item.id && element) submenuAnchor.current = element; }}>
+        <Label>{item.label}</Label>
+      </Item>)}
+    </MenuSurface>
+    {submenu && (portalTarget ? createPortal(submenu, portalTarget) : submenu)}
+  </>;
+}
diff --git a/design-system/packages/ui/src/components/Menu/index.ts b/design-system/packages/ui/src/components/Menu/index.ts
index c55cd0bf2e..9de4dae7b2 100644
--- a/design-system/packages/ui/src/components/Menu/index.ts
+++ b/design-system/packages/ui/src/components/Menu/index.ts
@@ -10,3 +10,4 @@ export {
   type MenuSectionProps,
   type MenuSeparatorProps,
 } from "./Menu";
+export { MenuPopover, type MenuPopoverProps, type MenuPopoverParts, type MenuEntry } from "./MenuPopover";
diff --git a/design-system/packages/ui/src/components/NumberInput/NumberInput.tsx b/design-system/packages/ui/src/components/NumberInput/NumberInput.tsx
index 6d87401208..02cef101b3 100644
--- a/design-system/packages/ui/src/components/NumberInput/NumberInput.tsx
+++ b/design-system/packages/ui/src/components/NumberInput/NumberInput.tsx
@@ -10,7 +10,7 @@ import { classNames } from "../../internal/classNames";
 import { isImeOwnedKeyboardEvent } from "../../internal/ime";
 import styles from "./NumberInput.module.css";
 
-export interface NumberInputProps {
+export interface NumberInputProps extends Pick<InputHTMLAttributes<HTMLInputElement>, "id" | "aria-label" | "aria-labelledby" | "aria-describedby" | "aria-invalid" | "required"> {
   className?: string;
   decrementLabel?: string;
   disabled?: boolean;
@@ -52,6 +52,12 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(functi
   unit,
   value,
   variant = "default",
+  id,
+  required,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy,
+  "aria-invalid": ariaInvalid,
 }, ref) {
   const format = useCallback((next: number) => precision > 0 ? next.toFixed(precision) : String(Math.round(next)), [precision]);
   const clamp = useCallback((next: number) => Math.min(max, Math.max(min, next)), [max, min]);
@@ -88,8 +94,13 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(functi
         }}
       >
         <input
+          id={id}
+          required={required}
+          aria-labelledby={ariaLabelledBy}
+          aria-describedby={ariaDescribedBy}
+          aria-invalid={ariaInvalid}
           {...inputProps}
-          aria-label={inputProps?.["aria-label"] ?? label}
+          aria-label={inputProps?.["aria-label"] ?? ariaLabel ?? label}
           className={styles.input}
           data-bf-part="input"
           disabled={disabled}
diff --git a/design-system/packages/ui/src/index.ts b/design-system/packages/ui/src/index.ts
index ed38fde050..5a38fc29d9 100644
--- a/design-system/packages/ui/src/index.ts
+++ b/design-system/packages/ui/src/index.ts
@@ -95,6 +95,10 @@ export { KeyHint, type KeyHintProps } from "./components/KeyHint";
 export { NumberInput, type NumberInputProps } from "./components/NumberInput";
 export {
   Menu,
+  MenuPopover,
+  type MenuPopoverProps,
+  type MenuPopoverParts,
+  type MenuEntry,
   MenuItem,
   MenuSection,
   MenuSeparator,
@@ -105,6 +109,7 @@ export {
   type MenuSectionProps,
   type MenuSeparatorProps,
 } from "./components/Menu";
+export { useSubmenuIntent, isPointInSubmenuBridge, isPointerMovingTowardSubmenu, type SubmenuIntentPoint, type SubmenuIntentRect, type UseSubmenuIntentOptions, type SubmenuIntentControls } from "./internal/useSubmenuIntent";
 export {
   Modal,
   ModalProvider,
@@ -201,3 +206,4 @@ export {
   type TokenOverrideName,
   type TokenOverrides,
 } from "./primitives/ThemeRoot";
+export { Combobox, ComboboxProvider, type ComboboxProps, type ComboboxOption, type ComboboxValue, type ComboboxLabels } from "./components/Combobox";
diff --git a/design-system/packages/ui/src/internal/useAnchoredLayer.ts b/design-system/packages/ui/src/internal/useAnchoredLayer.ts
new file mode 100644
index 0000000000..12f763a55b
--- /dev/null
+++ b/design-system/packages/ui/src/internal/useAnchoredLayer.ts
@@ -0,0 +1,78 @@
+import { useLayoutEffect, useState, type CSSProperties, type RefObject } from "react";
+
+export type LayerPlacement = "top" | "bottom" | "left" | "right";
+export type PortalTarget = Element | DocumentFragment | (() => Element | DocumentFragment | null) | null;
+
+/** Default portals stay inside the nearest theme scope; hosts may supply an overlay root. */
+export function resolveLayerPortal(target: PortalTarget | undefined, anchor: HTMLElement | null) {
+  if (typeof target === "function") return target();
+  return target ?? anchor?.closest("[data-bf-design-system-root]") ?? anchor?.ownerDocument.body ?? null;
+}
+
+export function useAnchoredLayer({ open, anchorRef, layerRef, placement = "bottom", matchWidth = false, revision, point }: {
+  open: boolean;
+  anchorRef: RefObject<HTMLElement | null>;
+  layerRef: RefObject<HTMLElement | null>;
+  placement?: LayerPlacement;
+  matchWidth?: boolean;
+  revision?: unknown;
+  point?: { x: number; y: number };
+}) {
+  const [layout, setLayout] = useState<{ style: CSSProperties; placement: LayerPlacement } | null>(null);
+  useLayoutEffect(() => {
+    if (!open) { setLayout(null); return; }
+    const anchor = anchorRef.current;
+    const layer = layerRef.current;
+    const view = layer?.ownerDocument.defaultView;
+    if (!layer || !view || (!anchor && !point)) return;
+    const update = () => {
+      const padding = 8;
+      const gap = point ? 0 : 4;
+      const rect = point
+        ? { left: point.x, right: point.x, top: point.y, bottom: point.y, width: 0 }
+        : anchor!.getBoundingClientRect();
+      const viewport = view.visualViewport;
+      const vx = viewport?.offsetLeft ?? 0;
+      const vy = viewport?.offsetTop ?? 0;
+      const vw = viewport?.width ?? view.innerWidth;
+      const vh = viewport?.height ?? view.innerHeight;
+      const width = matchWidth ? Math.min(rect.width, vw - padding * 2) : undefined;
+      layer.style.maxWidth = `${Math.max(0, vw - padding * 2)}px`;
+      if (width !== undefined) layer.style.width = `${width}px`;
+      const box = layer.getBoundingClientRect();
+      const horizontal = placement === "left" || placement === "right";
+      const before = horizontal ? rect.left - vx : rect.top - vy;
+      const after = horizontal ? vx + vw - rect.right : vy + vh - rect.bottom;
+      const needs = (horizontal ? box.width : box.height) + gap + padding;
+      const preferBefore = placement === "top" || placement === "left";
+      const useBefore = preferBefore ? before >= needs || before > after : after < needs && before > after;
+      const side: LayerPlacement = horizontal ? (useBefore ? "left" : "right") : (useBefore ? "top" : "bottom");
+      const maxHeight = horizontal ? vh - padding * 2 : Math.max(0, (useBefore ? before : after) - gap - padding);
+      const height = Math.min(box.height, maxHeight);
+      const left = horizontal ? (useBefore ? rect.left - box.width - gap : rect.right + gap) : rect.left;
+      const top = horizontal ? rect.top : (useBefore ? rect.top - height - gap : rect.bottom + gap);
+      const style: CSSProperties = {
+        position: "fixed", width, maxWidth: vw - padding * 2, maxHeight,
+        left: Math.max(vx + padding, Math.min(left, vx + vw - box.width - padding)),
+        top: Math.max(vy + padding, Math.min(top, vy + vh - height - padding)),
+      };
+      setLayout(previous => JSON.stringify(previous) === JSON.stringify({ style, placement: side }) ? previous : { style, placement: side });
+    };
+    update();
+    const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(update);
+    if (anchor) observer?.observe(anchor);
+    observer?.observe(layer);
+    view.addEventListener("resize", update);
+    view.addEventListener("scroll", update, true);
+    view.visualViewport?.addEventListener("resize", update);
+    view.visualViewport?.addEventListener("scroll", update);
+    return () => {
+      observer?.disconnect();
+      view.removeEventListener("resize", update);
+      view.removeEventListener("scroll", update, true);
+      view.visualViewport?.removeEventListener("resize", update);
+      view.visualViewport?.removeEventListener("scroll", update);
+    };
+  }, [open, anchorRef, layerRef, placement, matchWidth, revision, point?.x, point?.y]);
+  return layout;
+}
diff --git a/design-system/packages/ui/src/internal/useSubmenuIntent.ts b/design-system/packages/ui/src/internal/useSubmenuIntent.ts
new file mode 100644
index 0000000000..faaeb8dcfa
--- /dev/null
+++ b/design-system/packages/ui/src/internal/useSubmenuIntent.ts
@@ -0,0 +1,406 @@
+import { useCallback, useEffect, useRef, type RefObject } from 'react';
+
+export interface SubmenuIntentPoint {
+  x: number;
+  y: number;
+}
+
+export interface SubmenuIntentRect {
+  left: number;
+  right: number;
+  top: number;
+  bottom: number;
+}
+
+interface TimedPointerPoint extends SubmenuIntentPoint {
+  time: number;
+}
+
+interface PointerLikeEvent {
+  clientX: number;
+  clientY: number;
+  pointerType?: string;
+  timeStamp: number;
+}
+
+interface PendingTransition<T> {
+  targetId: T | null;
+  kind: 'open' | 'switch';
+  timer: number;
+}
+
+export interface UseSubmenuIntentOptions<T> {
+  activeId: T | null;
+  onActiveIdChange: (id: T | null) => void;
+  parentRef: RefObject<HTMLElement | null>;
+  submenuRef: RefObject<HTMLElement | null>;
+  enabled?: boolean;
+  openDelayMs?: number;
+  closeDelayMs?: number;
+  switchDelayMs?: number;
+  tolerance?: number;
+}
+
+export interface SubmenuIntentControls<T> {
+  requestChange: (targetId: T | null, event: PointerLikeEvent) => void;
+  requestClose: (event?: PointerLikeEvent) => void;
+  keepOpen: () => void;
+  openNow: (id: T) => void;
+  closeNow: () => void;
+  cancelPending: () => void;
+}
+
+const DEFAULT_OPEN_DELAY_MS = 120;
+const DEFAULT_CLOSE_DELAY_MS = 300;
+const DEFAULT_SWITCH_DELAY_MS = 300;
+const DEFAULT_TOLERANCE = 48;
+const POINTER_HISTORY_MAX_AGE_MS = 300;
+const POINTER_HISTORY_MIN_DISTANCE_PX = 2;
+// Include the parent's inner edge padding, not a wide band of sibling rows.
+const BRIDGE_EDGE_PADDING_PX = 4;
+
+const pointInRect = (point: SubmenuIntentPoint, rect: SubmenuIntentRect): boolean => (
+  rect.right > rect.left
+  && rect.bottom > rect.top
+  && point.x >= rect.left
+  && point.x <= rect.right
+  && point.y >= rect.top
+  && point.y <= rect.bottom
+);
+
+/** A stationary, bidirectional bridge across the gap; independent of menu aim. */
+export const isPointInSubmenuBridge = (
+  point: SubmenuIntentPoint,
+  parentRect: SubmenuIntentRect,
+  submenuRect: SubmenuIntentRect,
+): boolean => {
+  if (parentRect.right <= parentRect.left || parentRect.bottom <= parentRect.top
+    || submenuRect.right <= submenuRect.left || submenuRect.bottom <= submenuRect.top) {
+    return false;
+  }
+
+  const opensRight = submenuRect.left + submenuRect.right > parentRect.left + parentRect.right;
+  return pointInRect(point, {
+    left: (opensRight ? parentRect.right : submenuRect.right) - BRIDGE_EDGE_PADDING_PX,
+    right: (opensRight ? submenuRect.left : parentRect.left) + BRIDGE_EDGE_PADDING_PX,
+    top: submenuRect.top - BRIDGE_EDGE_PADDING_PX,
+    bottom: submenuRect.bottom + BRIDGE_EDGE_PADDING_PX,
+  });
+};
+
+const distanceToRect = (point: SubmenuIntentPoint, rect: SubmenuIntentRect): number => {
+  const dx = Math.max(rect.left - point.x, 0, point.x - rect.right);
+  const dy = Math.max(rect.top - point.y, 0, point.y - rect.bottom);
+  return Math.hypot(dx, dy);
+};
+
+const signedArea = (
+  point: SubmenuIntentPoint,
+  start: SubmenuIntentPoint,
+  end: SubmenuIntentPoint,
+): number => (
+  (point.x - end.x) * (start.y - end.y)
+  - (start.x - end.x) * (point.y - end.y)
+);
+
+const pointInTriangle = (
+  point: SubmenuIntentPoint,
+  first: SubmenuIntentPoint,
+  second: SubmenuIntentPoint,
+  third: SubmenuIntentPoint,
+): boolean => {
+  const firstSign = signedArea(point, first, second);
+  const secondSign = signedArea(point, second, third);
+  const thirdSign = signedArea(point, third, first);
+  const hasNegative = firstSign < 0 || secondSign < 0 || thirdSign < 0;
+  const hasPositive = firstSign > 0 || secondSign > 0 || thirdSign > 0;
+  return !(hasNegative && hasPositive);
+};
+
+/**
+ * Returns true when the pointer is entering the corridor between its previous
+ * position and the nearest vertical edge of the open submenu. The nearest edge
+ * makes the same calculation work for menus that open to either side.
+ */
+export const isPointerMovingTowardSubmenu = (
+  previous: SubmenuIntentPoint,
+  current: SubmenuIntentPoint,
+  submenuRect: SubmenuIntentRect,
+  tolerance = DEFAULT_TOLERANCE,
+): boolean => {
+  if (pointInRect(current, submenuRect)) return true;
+
+  const submenuOpensRight = previous.x <= submenuRect.left;
+  const submenuOpensLeft = previous.x >= submenuRect.right;
+  if (!submenuOpensRight && !submenuOpensLeft) return false;
+
+  const edgeX = submenuOpensRight ? submenuRect.left : submenuRect.right;
+  const horizontalDelta = current.x - previous.x;
+  if ((submenuOpensRight && horizontalDelta <= 0) || (submenuOpensLeft && horizontalDelta >= 0)) {
+    return false;
+  }
+
+  if (distanceToRect(current, submenuRect) >= distanceToRect(previous, submenuRect)) {
+    return false;
+  }
+
+  return pointInTriangle(
+    current,
+    previous,
+    { x: edgeX, y: submenuRect.top - tolerance },
+    { x: edgeX, y: submenuRect.bottom + tolerance },
+  );
+};
+
+const isMousePointer = (event: PointerLikeEvent): boolean => (
+  !event.pointerType || event.pointerType === 'mouse'
+);
+
+export const useSubmenuIntent = <T,>({
+  activeId,
+  onActiveIdChange,
+  parentRef,
+  submenuRef,
+  enabled = true,
+  openDelayMs = DEFAULT_OPEN_DELAY_MS,
+  closeDelayMs = DEFAULT_CLOSE_DELAY_MS,
+  switchDelayMs = DEFAULT_SWITCH_DELAY_MS,
+  tolerance = DEFAULT_TOLERANCE,
+}: UseSubmenuIntentOptions<T>): SubmenuIntentControls<T> => {
+  const activeIdRef = useRef(activeId);
+  const onActiveIdChangeRef = useRef(onActiveIdChange);
+  const pointerHistoryRef = useRef<TimedPointerPoint[]>([]);
+  const pendingTransitionRef = useRef<PendingTransition<T> | null>(null);
+  const closeTimerRef = useRef<number | null>(null);
+  // Preserve the leave intent when the bridge cancels its timer, so moving out
+  // of the bridge can arm closing again without another DOM pointerleave.
+  const closeRequestedRef = useRef(false);
+
+  activeIdRef.current = activeId;
+  onActiveIdChangeRef.current = onActiveIdChange;
+
+  const clearPendingTransition = useCallback(() => {
+    const pending = pendingTransitionRef.current;
+    if (pending) {
+      window.clearTimeout(pending.timer);
+      pendingTransitionRef.current = null;
+    }
+  }, []);
+
+  const clearCloseTimer = useCallback(() => {
+    if (closeTimerRef.current !== null) {
+      window.clearTimeout(closeTimerRef.current);
+      closeTimerRef.current = null;
+    }
+  }, []);
+
+  const cancelPending = useCallback(() => {
+    clearPendingTransition();
+    clearCloseTimer();
+    closeRequestedRef.current = false;
+  }, [clearCloseTimer, clearPendingTransition]);
+
+  const commitChange = useCallback((targetId: T | null) => {
+    cancelPending();
+    activeIdRef.current = targetId;
+    onActiveIdChangeRef.current(targetId);
+  }, [cancelPending]);
+
+  const scheduleTransition = useCallback((
+    targetId: T | null,
+    kind: PendingTransition<T>['kind'],
+    delayMs: number,
+  ) => {
+    clearPendingTransition();
+    const timer = window.setTimeout(() => {
+      pendingTransitionRef.current = null;
+      commitChange(targetId);
+    }, delayMs);
+    pendingTransitionRef.current = { targetId, kind, timer };
+  }, [clearPendingTransition, commitChange]);
+
+  const scheduleClose = useCallback(() => {
+    clearCloseTimer();
+    closeTimerRef.current = window.setTimeout(() => {
+      closeTimerRef.current = null;
+      commitChange(null);
+    }, closeDelayMs);
+  }, [clearCloseTimer, closeDelayMs, commitChange]);
+
+  const findPreviousPoint = useCallback((current: TimedPointerPoint): TimedPointerPoint | null => {
+    for (let index = pointerHistoryRef.current.length - 1; index >= 0; index -= 1) {
+      const candidate = pointerHistoryRef.current[index];
+      if (!candidate) continue;
+      const age = current.time - candidate.time;
+      const distance = Math.hypot(current.x - candidate.x, current.y - candidate.y);
+      if (age >= 0 && age <= POINTER_HISTORY_MAX_AGE_MS && distance >= POINTER_HISTORY_MIN_DISTANCE_PX) {
+        return candidate;
+      }
+    }
+    return null;
+  }, []);
+
+  const pointerHeadsToOpenSubmenu = useCallback((
+    previous: TimedPointerPoint | null,
+    current: TimedPointerPoint,
+  ): boolean => {
+    const submenuRect = submenuRef.current?.getBoundingClientRect();
+    return Boolean(
+      previous
+      && submenuRect
+      && isPointerMovingTowardSubmenu(previous, current, submenuRect, tolerance),
+    );
+  }, [submenuRef, tolerance]);
+
+  const getProtectedRegion = useCallback((point: SubmenuIntentPoint): 'submenu' | 'bridge' | null => {
+    if (activeIdRef.current === null) return null;
+    const submenuRect = submenuRef.current?.getBoundingClientRect();
+    if (!submenuRect) return null;
+    if (pointInRect(point, submenuRect)) return 'submenu';
+    const parentRect = parentRef.current?.getBoundingClientRect();
+    return parentRect && isPointInSubmenuBridge(point, parentRect, submenuRect) ? 'bridge' : null;
+  }, [parentRef, submenuRef]);
+
+  const requestChange = useCallback((targetId: T | null, event: PointerLikeEvent) => {
+    if (!enabled || !isMousePointer(event)) return;
+
+    clearCloseTimer();
+    closeRequestedRef.current = false;
+    const currentActiveId = activeIdRef.current;
+    if (Object.is(currentActiveId, targetId)) {
+      clearPendingTransition();
+      return;
+    }
+
+    const currentPoint: TimedPointerPoint = {
+      x: event.clientX,
+      y: event.clientY,
+      time: event.timeStamp,
+    };
+    const previousPoint = findPreviousPoint(currentPoint);
+
+    if (
+      currentActiveId !== null
+      && pointerHeadsToOpenSubmenu(previousPoint, currentPoint)
+    ) {
+      scheduleTransition(targetId, 'switch', switchDelayMs);
+      return;
+    }
+
+    if (currentActiveId === null && targetId !== null && openDelayMs > 0) {
+      scheduleTransition(targetId, 'open', openDelayMs);
+      return;
+    }
+
+    commitChange(targetId);
+  }, [
+    clearCloseTimer,
+    clearPendingTransition,
+    commitChange,
+    enabled,
+    findPreviousPoint,
+    openDelayMs,
+    pointerHeadsToOpenSubmenu,
+    scheduleTransition,
+    switchDelayMs,
+  ]);
+
+  const requestClose = useCallback((event?: PointerLikeEvent) => {
+    if (!enabled || (event && !isMousePointer(event))) return;
+    clearPendingTransition();
+    if (activeIdRef.current === null) return;
+    closeRequestedRef.current = true;
+    // pointerleave can be the last event before the mouse stops in the gap.
+    // Do not depend on receiving a later pointermove to cancel closing.
+    if (event && getProtectedRegion({ x: event.clientX, y: event.clientY })) {
+      clearCloseTimer();
+      return;
+    }
+    scheduleClose();
+  }, [clearCloseTimer, clearPendingTransition, enabled, getProtectedRegion, scheduleClose]);
+
+  const keepOpen = useCallback(() => {
+    cancelPending();
+  }, [cancelPending]);
+
+  const openNow = useCallback((id: T) => {
+    commitChange(id);
+  }, [commitChange]);
+
+  const closeNow = useCallback(() => {
+    commitChange(null);
+  }, [commitChange]);
+
+  useEffect(() => {
+    if (!enabled) {
+      cancelPending();
+      pointerHistoryRef.current = [];
+      return;
+    }
+
+    const handlePointerMove = (event: PointerEvent) => {
+      if (!isMousePointer(event)) return;
+
+      const currentPoint: TimedPointerPoint = {
+        x: event.clientX,
+        y: event.clientY,
+        time: event.timeStamp,
+      };
+      const previousPoint = findPreviousPoint(currentPoint);
+      const protectedRegion = getProtectedRegion(currentPoint);
+      const headingToSubmenu = !protectedRegion && activeIdRef.current !== null
+        && pointerHeadsToOpenSubmenu(previousPoint, currentPoint);
+      const pending = pendingTransitionRef.current;
+
+      if (protectedRegion) {
+        cancelPending();
+        closeRequestedRef.current = protectedRegion === 'bridge';
+      } else if (pending?.kind === 'switch') {
+        if (headingToSubmenu) {
+          scheduleTransition(pending.targetId, 'switch', switchDelayMs);
+        } else {
+          commitChange(pending.targetId);
+        }
+      } else if (closeRequestedRef.current && (closeTimerRef.current === null || headingToSubmenu)) {
+        scheduleClose();
+      }
+
+      pointerHistoryRef.current.push(currentPoint);
+      if (pointerHistoryRef.current.length > 4) {
+        pointerHistoryRef.current.shift();
+      }
+    };
+
+    const handlePointerExit = () => requestClose();
+    document.addEventListener('pointermove', handlePointerMove, { capture: true, passive: true });
+    document.addEventListener('pointerleave', handlePointerExit);
+    window.addEventListener('blur', handlePointerExit);
+    return () => {
+      document.removeEventListener('pointermove', handlePointerMove, true);
+      document.removeEventListener('pointerleave', handlePointerExit);
+      window.removeEventListener('blur', handlePointerExit);
+    };
+  }, [
+    cancelPending,
+    commitChange,
+    enabled,
+    findPreviousPoint,
+    getProtectedRegion,
+    pointerHeadsToOpenSubmenu,
+    requestClose,
+    scheduleClose,
+    scheduleTransition,
+    switchDelayMs,
+  ]);
+
+  useEffect(() => cancelPending, [cancelPending]);
+
+  return {
+    requestChange,
+    requestClose,
+    keepOpen,
+    openNow,
+    closeNow,
+    cancelPending,
+  };
+};
diff --git a/design-system/packages/ui/src/registry.ts b/design-system/packages/ui/src/registry.ts
index 42c387ad4b..3c127b7889 100644
--- a/design-system/packages/ui/src/registry.ts
+++ b/design-system/packages/ui/src/registry.ts
@@ -7,6 +7,7 @@ import { buttonMeta } from "./components/Button/Button.meta";
 import { checkboxMeta } from "./components/Checkbox/Checkbox.meta";
 import { cardMeta } from "./components/Card/Card.meta";
 import { composerMeta } from "./components/Composer/Composer.meta";
+import { comboboxMeta } from "./components/Combobox/Combobox.meta";
 import { confirmDialogMeta } from "./components/ConfirmDialog/ConfirmDialog.meta";
 import { disclosureMeta } from "./components/Disclosure/Disclosure.meta";
 import { emptyMeta } from "./components/Empty/Empty.meta";
@@ -89,6 +90,7 @@ export const componentRegistry = [
   chatComposerMeta,
   commandToolCardMeta,
   composerMeta,
+  comboboxMeta,
   confirmDialogMeta,
   contextCompressionToolCardMeta,
   defaultToolCardMeta,
diff --git a/design-system/packages/ui/tests/combobox.test.mjs b/design-system/packages/ui/tests/combobox.test.mjs
new file mode 100644
index 0000000000..71598e7e71
--- /dev/null
+++ b/design-system/packages/ui/tests/combobox.test.mjs
@@ -0,0 +1,20 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+import { createElement } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { Combobox, ComboboxProvider } from "../dist/index.js";
+
+test("Combobox preserves typed selections and accessible labels", () => {
+  const html = renderToStaticMarkup(createElement(Combobox, { label: "Models", multiple: true, value: [0, "custom"], options: [{ label: "Zero", value: 0 }] }));
+  assert.match(html, /role="combobox"/);
+  assert.match(html, /aria-expanded="false"/);
+  assert.match(html, /Zero, custom/);
+  assert.match(html, /data-multiple="true"/);
+});
+test("Combobox localizes defaults through its provider and exposes invalid state", () => {
+  const html = renderToStaticMarkup(createElement(ComboboxProvider, { labels: { placeholder: "Choose model" } }, createElement(Combobox, { disabled: true, error: true, errorMessage: "Required" })));
+  assert.match(html, /Choose model/);
+  assert.match(html, /aria-invalid="true"/);
+  assert.match(html, /aria-describedby="bf-combobox-[^"]+-error"/);
+  assert.match(html, /disabled=""/);
+});
diff --git a/design-system/packages/ui/tests/number-input.test.mjs b/design-system/packages/ui/tests/number-input.test.mjs
index 35c2fadda9..6225f785b8 100644
--- a/design-system/packages/ui/tests/number-input.test.mjs
+++ b/design-system/packages/ui/tests/number-input.test.mjs
@@ -37,3 +37,11 @@ test("NumberInput forwards native input attributes", () => {
   assert.match(markup, /aria-label="Font size"/);
   assert.match(markup, /data-testid="font-size"/);
 });
+
+test("NumberInput forwards Field composition attributes onto its native input", () => {
+  const markup = renderToStaticMarkup(createElement(NumberInput, {
+    id: "context-window", "aria-describedby": "context-help", "aria-invalid": true,
+    required: true, onChange: () => undefined, value: 1024,
+  }));
+  assert.match(markup, /<input[^>]*id="context-window"[^>]*required=""[^>]*aria-describedby="context-help"[^>]*aria-invalid="true"/);
+});
diff --git a/design-system/packages/ui/tests/registry.test.mjs b/design-system/packages/ui/tests/registry.test.mjs
index ad49fa8832..a4fc3d0803 100644
--- a/design-system/packages/ui/tests/registry.test.mjs
+++ b/design-system/packages/ui/tests/registry.test.mjs
@@ -26,6 +26,7 @@ test("registry exposes only the formal stable components", () => {
       "ChatComposer",
       "CommandToolCard",
       "Composer",
+      "Combobox",
       "ConfirmDialog",
       "ContextCompressionToolCard",
       "DefaultToolCard",
diff --git a/src/crates/assembly/core/builtin_skills/agent-browser/SKILL.md b/src/crates/assembly/core/builtin_skills/agent-browser/SKILL.md
index bae5e0bc98..df21411ce2 100644
--- a/src/crates/assembly/core/builtin_skills/agent-browser/SKILL.md
+++ b/src/crates/assembly/core/builtin_skills/agent-browser/SKILL.md
@@ -1,6 +1,6 @@
 ---
 name: agent-browser
-description: Browser automation CLI for AI agents. Use when the user needs to interact with websites, including navigating pages, filling forms, clicking buttons, taking screenshots, extracting data, testing web apps, or automating any browser task. Triggers include requests to "open a website", "fill out a form", "click a button", "take a screenshot", "scrape data from a page", "test this web app", "login to a site", "automate browser actions", or any task requiring programmatic web interaction. Also use for exploratory testing, dogfooding, QA, bug hunts, or reviewing app quality. Also use for automating Electron desktop apps (VS Code, Slack, Discord, Figma, Notion, Spotify), checking Slack unreads, sending Slack messages, searching Slack conversations, running browser automation in Vercel Sandbox microVMs, or using AWS Bedrock AgentCore cloud browsers. Prefer BitFun's ControlHub browser domain for web automation when it is available; use agent-browser only when ControlHub is unavailable or for supported Electron automation, and use BitFun ComputerUse for native desktop UI that agent-browser cannot reach.
+description: Browser automation CLI for AI agents. Use when the user needs to interact with websites, including navigating pages, filling forms, clicking buttons, taking screenshots, extracting data, testing web apps, or automating any browser task. Triggers include requests to "open a website", "fill out a form", "click a button", "take a screenshot", "scrape data from a page", "test this web app", "login to a site", "automate browser actions", or any task requiring programmatic web interaction. Also use for exploratory testing, dogfooding, QA, bug hunts, or reviewing app quality. Also use for automating Electron desktop apps (VS Code, Slack, Discord, Notion, Spotify), checking Slack unreads, sending Slack messages, searching Slack conversations, running browser automation in Vercel Sandbox microVMs, or using AWS Bedrock AgentCore cloud browsers. Prefer BitFun's ControlHub browser domain for web automation when it is available; use agent-browser only when ControlHub is unavailable or for supported Electron automation, and use BitFun ComputerUse for native desktop UI that agent-browser cannot reach.
 allowed-tools: ExecCommand(agent-browser:*), ExecCommand(npx agent-browser:*)
 hidden: true
 ---
@@ -31,7 +31,7 @@ The CLI serves skill content that always matches the installed version, so instr
 Load a specialized skill when the task falls outside browser web pages:
 
 ```bash
-agent-browser skills get electron          # Electron desktop apps (VS Code, Slack, Discord, Figma, ...)
+agent-browser skills get electron          # Electron desktop apps (VS Code, Slack, Discord, ...)
 agent-browser skills get slack             # Slack workspace automation
 agent-browser skills get dogfood           # Exploratory testing / QA / bug hunts
 agent-browser skills get derive-client     # Record a HAR, derive a standalone API client for a site
diff --git a/src/web-ui/src/app/App.tsx b/src/web-ui/src/app/App.tsx
index 484efcc4a7..99b6c877b8 100644
--- a/src/web-ui/src/app/App.tsx
+++ b/src/web-ui/src/app/App.tsx
@@ -1,5 +1,5 @@
 import { lazy, Suspense, useEffect, useCallback, useLayoutEffect, useState, useRef } from 'react';
-import { ConfirmDialogProvider, ModalProvider, TooltipProvider } from '@bitfun/ui';
+import { ComboboxProvider, ConfirmDialogProvider, ModalProvider, TooltipProvider } from '@bitfun/ui';
 import { useShortcut } from '@/infrastructure/hooks/useShortcut';
 import { useHasDismissibleLayer } from '@/infrastructure/hooks/useDismissibleLayer';
 import { dismissibleLayerManager } from '@/infrastructure/services/DismissibleLayerManager';
@@ -971,6 +971,15 @@ function App() {
       portalContainer={getAppearanceOverlayHost}
     >
       <TooltipProvider portalContainer={getAppearanceOverlayHost}>
+      <ComboboxProvider portalContainer={getAppearanceOverlayHost} labels={{
+        placeholder: tComponents('select.placeholder'),
+        search: tComponents('select.search'),
+        empty: tComponents('select.emptyText'),
+        loading: tComponents('select.loading'),
+        clear: tComponents('search.clear'),
+        selectAll: tComponents('select.selectAll'),
+        create: tComponents('select.customValueHint'),
+      }}>
       <ConfirmDialogProvider
         cancelLabel={tComponents('dialog.confirm.cancel')}
         confirmLabel={tComponents('dialog.confirm.ok')}
@@ -1018,6 +1027,7 @@ function App() {
         </ViewModeProvider>
         </ChatProvider>
       </ConfirmDialogProvider>
+      </ComboboxProvider>
       </TooltipProvider>
     </ModalProvider>
   );
diff --git a/src/web-ui/src/app/components/SceneTopBar/SceneTopBar.scss b/src/web-ui/src/app/components/SceneTopBar/SceneTopBar.scss
index df3fe0c57f..0a2ce2669e 100644
--- a/src/web-ui/src/app/components/SceneTopBar/SceneTopBar.scss
+++ b/src/web-ui/src/app/components/SceneTopBar/SceneTopBar.scss
@@ -1,18 +1,25 @@
 .bitfun-scene-top-bar {
   position: relative;
   z-index: 10;
-  display: flex;
   align-items: center;
   flex: 0 0 var(--bf-control-tab-group-item-height);
   width: 100%;
   min-width: 0;
   height: var(--bf-control-tab-group-item-height);
+  min-block-size: var(--bf-control-tab-group-item-height);
+  padding: 0;
+  column-gap: 0;
   overflow: visible;
   background: var(--bf-appearance-token-color-bg-scene);
   container-name: scene-top-bar;
   container-type: inline-size;
   user-select: none;
 
+  > [data-bf-part='leading'],
+  > [data-bf-part='trailing'] {
+    height: 100%;
+  }
+
   &__actions {
     display: flex;
     align-items: center;
diff --git a/src/web-ui/src/app/components/SceneTopBar/SceneTopBar.test.tsx b/src/web-ui/src/app/components/SceneTopBar/SceneTopBar.test.tsx
new file mode 100644
index 0000000000..3812fbde62
--- /dev/null
+++ b/src/web-ui/src/app/components/SceneTopBar/SceneTopBar.test.tsx
@@ -0,0 +1,35 @@
+// @vitest-environment jsdom
+import React, { act } from 'react';
+import { createRoot } from 'react-dom/client';
+import { describe, expect, it, vi } from 'vitest';
+import SceneTopBar from './SceneTopBar';
+
+vi.mock('@/component-library', () => ({ WindowControls: () => <button>Window controls</button> }));
+vi.mock('@/infrastructure/runtime', () => ({ supportsNativeWindowDragging: () => false }));
+vi.mock('../../stores/sceneStore', () => ({ useSceneStore: (selector: (state: unknown) => unknown) => selector({ openTabs: [{}] }) }));
+vi.mock('../SceneBar/SceneBar', () => ({ default: () => <div role="tablist"><button role="tab">Settings</button></div> }));
+vi.mock('./SceneChrome', () => ({ SceneChromeHost: (props: React.HTMLAttributes<HTMLDivElement>) => <div {...props}><button>Scene action</button></div> }));
+
+describe('SceneTopBar', () => {
+  it('composes the public Toolbar without changing scene actions or window interaction boundaries', () => {
+    const host = document.createElement('div');
+    document.body.append(host);
+    const root = createRoot(host);
+    const maximize = vi.fn();
+    try {
+      act(() => root.render(<SceneTopBar onMinimize={vi.fn()} onMaximize={maximize} onClose={vi.fn()} />));
+      const toolbar = host.querySelector('[data-bf-component="toolbar"]')!;
+      expect(toolbar.getAttribute('data-bf-part')).toBe('topBar');
+      expect(toolbar.querySelector(':scope > [data-bf-part="leading"] [role="tablist"]')).not.toBeNull();
+      expect(toolbar.querySelector(':scope > [data-bf-part="trailing"] [data-bf-part="sceneActions"]')).not.toBeNull();
+      expect(toolbar.querySelector('[data-bf-part="controls"] button')).not.toBeNull();
+      act(() => toolbar.dispatchEvent(new MouseEvent('dblclick', { bubbles: true })));
+      expect(maximize).toHaveBeenCalledOnce();
+      act(() => toolbar.querySelector('[data-bf-part="sceneActions"] button')!.dispatchEvent(new MouseEvent('dblclick', { bubbles: true })));
+      expect(maximize).toHaveBeenCalledOnce();
+    } finally {
+      act(() => root.unmount());
+      host.remove();
+    }
+  });
+});
diff --git a/src/web-ui/src/app/components/SceneTopBar/SceneTopBar.tsx b/src/web-ui/src/app/components/SceneTopBar/SceneTopBar.tsx
index af74714b9b..d28c581fa6 100644
--- a/src/web-ui/src/app/components/SceneTopBar/SceneTopBar.tsx
+++ b/src/web-ui/src/app/components/SceneTopBar/SceneTopBar.tsx
@@ -1,4 +1,5 @@
 import React, { useCallback, useRef } from 'react';
+import { Toolbar } from '@bitfun/ui';
 import { WindowControls } from '@/component-library';
 import { supportsNativeWindowDragging } from '@/infrastructure/runtime';
 import { createLogger } from '@/shared/utils/logger';
@@ -65,14 +66,15 @@ const SceneTopBar: React.FC<SceneTopBarProps> = ({
   }, [isSingleTab, onMaximize]);
 
   return (
-    <div
+    <Toolbar
+      bordered={false}
       className={`bitfun-scene-top-bar ${className}`.trim()}
       onMouseDown={handleMouseDown}
       onDoubleClick={handleDoubleClick}
       data-bf-scene="workbench"
       data-bf-part="topBar"
-    >
-      <SceneBar />
+      leading={<SceneBar />}
+      trailing={<>
       <SceneChromeHost
         className="bitfun-scene-top-bar__actions"
         data-bf-scene="workbench"
@@ -92,7 +94,8 @@ const SceneTopBar: React.FC<SceneTopBarProps> = ({
           />
         </div>
       ) : null}
-    </div>
+      </>}
+    />
   );
 };
 
diff --git a/src/web-ui/src/app/components/panels/review-platform/ReviewPlatformPanel.tsx b/src/web-ui/src/app/components/panels/review-platform/ReviewPlatformPanel.tsx
index 09a61566f6..8d4a91cfb0 100644
--- a/src/web-ui/src/app/components/panels/review-platform/ReviewPlatformPanel.tsx
+++ b/src/web-ui/src/app/components/panels/review-platform/ReviewPlatformPanel.tsx
@@ -1,7 +1,8 @@
+import { Combobox, type ComboboxOption } from '@bitfun/ui';
 import { Button, Field, Icon, IconButton, Input as DesignInput, Modal, ScrollArea, TabGroup, Tooltip } from '@bitfun/ui';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { ChevronLeft, CircleDot, Code2, GitCommitHorizontal, GitPullRequest, GitPullRequestClosed, KeyRound, Loader2, MessageSquareText, RefreshCw, ShieldCheck, Trash2 } from 'lucide-react';
-import { MarkdownRenderer, Select, type SelectOption } from '@/component-library';
+import { MarkdownRenderer } from '@/component-library';
 import { reviewPlatformAPI, systemAPI, type ReviewPlatformAccount, type ReviewPlatformAuthChallenge, type ReviewPlatformCiItem, type ReviewPlatformCiLog, type ReviewPlatformCommit, type ReviewPlatformDetailSection, type ReviewPlatformFile, type ReviewPlatformPagination, type ReviewPlatformPullRequest, type ReviewPlatformPullRequestDetail, type ReviewPlatformPullRequestDetailPage, type ReviewPlatformRemote, type ReviewPlatformRepositoryRef, type ReviewPlatformThread, type ReviewPlatformWorkspaceSnapshot } from '@/infrastructure/api';
 import { createLogger } from '@/shared/utils/logger';
 import { notificationService } from '@/shared/notification-system';
@@ -730,7 +731,7 @@ export const ReviewPlatformPanel: React.FC<ReviewPlatformPanelProps> = ({
   const pagedChangedFiles = changedFiles;
   const pagedCommits = commits;
   const pagedReviewThreads = reviewThreads;
-  const remoteOptions = useMemo<SelectOption[]>(
+  const remoteOptions = useMemo<ComboboxOption[]>(
     () => snapshot.remotes.map(remote => ({
       value: remote.id,
       label: remoteLabel(remote),
@@ -1849,7 +1850,7 @@ export const ReviewPlatformPanel: React.FC<ReviewPlatformPanelProps> = ({
 
           <div className="review-platform__topbar-actions" data-bf-component="review-platform" data-bf-part="actions">
             <div className="review-platform__remote-select">
-              <Select
+              <Combobox
                 size="small"
                 value={selectedRemoteId ?? ''}
                 options={remoteOptions}
diff --git a/src/web-ui/src/app/components/scheduled-jobs/ScheduledJobsView.tsx b/src/web-ui/src/app/components/scheduled-jobs/ScheduledJobsView.tsx
index e7b116bc74..9c958b25e4 100644
--- a/src/web-ui/src/app/components/scheduled-jobs/ScheduledJobsView.tsx
+++ b/src/web-ui/src/app/components/scheduled-jobs/ScheduledJobsView.tsx
@@ -1,3 +1,4 @@
+import { Combobox } from '@bitfun/ui';
 /**
  * ScheduledJobsView — inline view for managing scheduled jobs.
  *
@@ -8,7 +9,7 @@
 import { Button, Switch, IconButton, Input, Select, Textarea, Tooltip } from '@bitfun/ui';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { RefreshCw, Trash2 } from 'lucide-react';
-import { Select as LegacySelect } from '@/component-library';
+
 import { confirmDanger } from '@/infrastructure/confirm-dialog';
 import {
   cronAPI,
@@ -907,7 +908,7 @@ const ScheduledJobsView: React.FC<ScheduledJobsViewProps> = ({
               <span className="asv__field-label">{t('nav.scheduledJobs.fields.session')}</span>
             </div>
             <div className="asv__field-control" data-bf-component="scheduled-jobs-view" data-bf-part="fieldControl">
-              <LegacySelect
+              <Combobox
                 size="small"
                 options={sessionOptions}
                 value={draft.sessionId}
@@ -931,7 +932,7 @@ const ScheduledJobsView: React.FC<ScheduledJobsViewProps> = ({
               <span className="asv__field-label">{t('nav.scheduledJobs.fields.agentType')}</span>
             </div>
             <div className="asv__field-control" data-bf-component="scheduled-jobs-view" data-bf-part="fieldControl">
-              <LegacySelect
+              <Combobox
                 size="small"
                 options={workspaceAgentOptions}
                 value={draft.agentType}
@@ -962,7 +963,7 @@ const ScheduledJobsView: React.FC<ScheduledJobsViewProps> = ({
               <span className="asv__field-label">{t('nav.scheduledJobs.fields.session')}</span>
             </div>
             <div className="asv__field-control" data-bf-component="scheduled-jobs-view" data-bf-part="fieldControl">
-              <LegacySelect
+              <Combobox
                 size="small"
                 options={sessionOptions}
                 value={draft.sessionId}
diff --git a/src/web-ui/src/app/layout/panelConfig.ts b/src/web-ui/src/app/layout/panelConfig.ts
index 4ca38f67fd..f2c104b2a1 100644
--- a/src/web-ui/src/app/layout/panelConfig.ts
+++ b/src/web-ui/src/app/layout/panelConfig.ts
@@ -4,7 +4,6 @@
  * Design references:
  * - VS Code: three modes (hidden/narrow/wide) + shortcuts + width memory
  * - JetBrains: multi-mode (floating/fixed/collapsed/icon)
- * - Figma: smart snapping + smooth animations
  *
  * Panel display modes:
  * - collapsed: fully hidden
diff --git a/src/web-ui/src/app/scenes/agents/AgentsScene.tsx b/src/web-ui/src/app/scenes/agents/AgentsScene.tsx
index 03e673f74f..2f0b2e5023 100644
--- a/src/web-ui/src/app/scenes/agents/AgentsScene.tsx
+++ b/src/web-ui/src/app/scenes/agents/AgentsScene.tsx
@@ -1,9 +1,10 @@
+import { Combobox } from '@bitfun/ui';
 import { Button, Icon, IconButton, SearchField, Select, StatusPill, Tooltip, ScrollArea } from '@bitfun/ui';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import type { TFunction } from 'i18next';
 import { Bot, Cpu, FileText, MessageSquareText, RotateCcw, Trash2, Wrench, type LucideIcon } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
-import { Select as LegacySelect } from '@/component-library';
+
 import { useI18n } from '@/infrastructure/i18n/hooks/useI18n';
 import { confirmDanger } from '@/infrastructure/confirm-dialog';
 import { HarnessCreativeIcon } from '@/component-library/icons';
@@ -1282,7 +1283,7 @@ const AgentsHomeView: React.FC = () => {
                 {currentCapabilityTab === 'model'
                 && selectedAgent.agentKind === 'subagent'
                 && !selectedAgentIsExternal ? (
-                  <LegacySelect
+                  <Combobox
                     size="small"
                     searchable
                     className="bitfun-agents-scene__subagent-model-select model-select-presentation__select"
diff --git a/src/web-ui/src/app/scenes/my-agent/InsightsScene.scss b/src/web-ui/src/app/scenes/my-agent/InsightsScene.scss
index 66f4fd5c8b..bef1d89450 100644
--- a/src/web-ui/src/app/scenes/my-agent/InsightsScene.scss
+++ b/src/web-ui/src/app/scenes/my-agent/InsightsScene.scss
@@ -139,7 +139,7 @@ $ins-label:   12px;
   width: 260px;
   min-width: 0;
 
-  .select__trigger {
+  [data-bf-component='combobox'] [data-bf-part='trigger'] {
     min-height: 42px;
     padding-top: 5px;
     padding-bottom: 5px;
diff --git a/src/web-ui/src/app/scenes/my-agent/InsightsScene.tsx b/src/web-ui/src/app/scenes/my-agent/InsightsScene.tsx
index 618190c327..5d66d83e5c 100644
--- a/src/web-ui/src/app/scenes/my-agent/InsightsScene.tsx
+++ b/src/web-ui/src/app/scenes/my-agent/InsightsScene.tsx
@@ -1,10 +1,11 @@
+import { Combobox, type ComboboxOption } from '@bitfun/ui';
 /* eslint-disable @typescript-eslint/no-use-before-define */
 import React, { useEffect, useCallback, useMemo, useState, useRef } from 'react';
 import { Button, Icon, IconButton, ScrollArea } from '@bitfun/ui';
 import { Loader2, AlertTriangle, BarChart3, Calendar, Target, Zap, Trophy, AlertCircle, Lightbulb, Rocket, Database, ScanSearch, Layers3, FileCheck2, Gauge, Brain } from 'lucide-react';
 import { useI18n } from '@/infrastructure/i18n/hooks/useI18n';
 import { insightsApi, type InsightsReport, type InsightsReportMeta, type InsightsStats } from '@/infrastructure/api/insightsApi';
-import { Select, type SelectOption } from '@/component-library';
+
 import { configManager } from '@/infrastructure/config/services/ConfigManager';
 import { getProviderDisplayName } from '@/infrastructure/config/services/modelConfigs';
 import type { AIModelConfig } from '@/infrastructure/config/types';
@@ -81,7 +82,7 @@ interface GenerationProgress {
   isRetrying: boolean;
 }
 
-interface InsightsModelOption extends SelectOption {
+interface InsightsModelOption extends ComboboxOption {
   modelName: string;
   meta: string;
 }
@@ -209,7 +210,7 @@ const InsightsScene: React.FC = () => {
     })),
   ], [availableModels, t]);
 
-  const renderModelValue = useCallback((option?: SelectOption | SelectOption[]) => {
+  const renderModelValue = useCallback((option?: ComboboxOption | ComboboxOption[]) => {
     const selected = (Array.isArray(option) ? option[0] : option) as InsightsModelOption | undefined;
     if (!selected) return null;
     const fullLabel = selected.meta ? `${selected.modelName} · ${selected.meta}` : selected.modelName;
@@ -221,7 +222,7 @@ const InsightsScene: React.FC = () => {
     );
   }, []);
 
-  const renderModelOption = useCallback((option: SelectOption) => {
+  const renderModelOption = useCallback((option: ComboboxOption) => {
     const model = option as InsightsModelOption;
     const fullLabel = model.meta ? `${model.modelName} · ${model.meta}` : model.modelName;
     return (
@@ -246,7 +247,7 @@ const InsightsScene: React.FC = () => {
         <div className="insights-scene__header-actions">
           <div className="insights-scene__model-control">
             <span className="insights-scene__control-label">{t('insights.modelLabel')}</span>
-            <Select
+            <Combobox
               className="insights-scene__model-select"
               dropdownClassName="insights-scene__model-select-dropdown"
               dropdownMatchTriggerWidth={false}
diff --git a/src/web-ui/src/app/scenes/todos/components/TodoEditor.tsx b/src/web-ui/src/app/scenes/todos/components/TodoEditor.tsx
index f022722082..a027abee3a 100644
--- a/src/web-ui/src/app/scenes/todos/components/TodoEditor.tsx
+++ b/src/web-ui/src/app/scenes/todos/components/TodoEditor.tsx
@@ -1,3 +1,4 @@
+import { Combobox } from '@bitfun/ui';
 /**
  * Create / edit form for a Todo.
  *
@@ -9,7 +10,7 @@
 import { Button, Icon, Input, Select, Switch, ScrollArea, Textarea } from '@bitfun/ui';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { Bot, CalendarClock, ClipboardList, RefreshCw } from 'lucide-react';
-import { Select as LegacySelect } from '@/component-library';
+
 import { agentAPI, type ModeInfo } from '@/infrastructure/api/service-api/AgentAPI';
 import { useI18n } from '@/infrastructure/i18n';
 import { WorkspaceKind } from '@/shared/types';
@@ -236,7 +237,7 @@ const TodoEditor: React.FC<TodoEditorProps> = ({
                 <Icon name="folder" size="md" aria-hidden="true" />
                 {t('shared:features.workspace')}
               </span>
-              <LegacySelect
+              <Combobox
                 size="medium"
                 className="bf-todos__field-control"
                 options={workspaceSelectOptions}
diff --git a/src/web-ui/src/component-library/components/Select/Select.scss b/src/web-ui/src/component-library/components/Select/Select.scss
deleted file mode 100644
index ce4d0aef95..0000000000
--- a/src/web-ui/src/component-library/components/Select/Select.scss
+++ /dev/null
@@ -1,762 +0,0 @@
-/**
- * Select dropdown component styles
- */
-@use '../../styles/tokens.scss' as tokens;
-@use '../../styles/overlay-surfaces' as surfaces;
-
-.select {
-  position: relative;
-  width: 100%;
-  min-width: 0;
-
-  &__label {
-    display: block;
-    margin-bottom: var(--bf-appearance-token-size-gap-2);
-    font-size: var(--bf-appearance-token-font-size-sm);
-    font-weight: var(--bf-appearance-token-font-weight-medium);
-    color: var(--bf-appearance-token-color-text-secondary);
-    letter-spacing: 0.2px;
-  }
-
-  &__trigger {
-    display: flex;
-    align-items: center;
-    gap: var(--bf-appearance-token-size-gap-3);
-    padding: 6px 12px;
-    background: transparent;
-    border: 1px solid var(--bf-appearance-token-border-base);
-    border-radius: var(--bf-appearance-token-size-radius-sm);
-    cursor: pointer;
-    transition:
-      background-color var(--bf-appearance-token-motion-fast) var(--bf-appearance-token-easing-standard),
-      border-color var(--bf-appearance-token-motion-fast) var(--bf-appearance-token-easing-standard);
-    min-height: 36px;
-    position: relative;
-    min-width: 0;
-    overflow: hidden;
-
-    &:hover:not(.select--disabled &) {
-      background: var(--bf-appearance-token-element-bg-subtle);
-      border-color: var(--bf-appearance-token-border-strong);
-    }
-
-    &:focus-visible {
-      outline: none;
-      background: transparent;
-      border-color: var(--bf-appearance-token-color-accent-500);
-    }
-  }
-
-  &--open &__trigger {
-    background: var(--bf-appearance-token-color-bg-secondary);
-    border-style: solid;
-    border-color: var(--bf-appearance-token-border-medium);
-  }
-
-  &--open.select--placement-top &__trigger {
-    border-color: var(--bf-appearance-token-border-medium);
-  }
-
-  &--disabled {
-    opacity: var(--bf-appearance-token-opacity-disabled);
-    cursor: default;
-
-    .select__trigger {
-      cursor: default;
-    }
-  }
-
-  &--error {
-    .select__trigger {
-      border-color: var(--bf-appearance-token-color-error-border);
-
-      &:hover:not(.select--disabled &) {
-        border-color: var(--bf-appearance-token-color-error);
-      }
-    }
-  }
-
-  &__value,
-  &__placeholder {
-    flex: 1;
-    font-size: var(--bf-appearance-token-font-size-sm);
-    line-height: var(--bf-appearance-token-line-height-base);
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    display: flex;
-    align-items: center;
-    gap: var(--bf-appearance-token-size-gap-2);
-  }
-
-  &__value {
-    color: var(--bf-appearance-token-color-text-primary);
-  }
-
-  &__placeholder {
-    color: var(--bf-appearance-token-color-text-muted);
-  }
-
-  &__value-icon,
-  &__option-icon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-  }
-
-  &__tags {
-    flex: 1;
-    display: flex;
-    flex-wrap: wrap;
-    gap: 6px;
-    max-width: 100%;
-  }
-
-  &__tag {
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-    padding: 3px 8px;
-    background: transparent;
-    border: 1px solid var(--bf-appearance-token-border-accent-soft);
-    border-radius: var(--bf-appearance-token-size-radius-sm);
-    font-size: var(--bf-appearance-token-font-size-xs);
-    color: var(--bf-appearance-token-color-accent-500);
-    max-width: 150px;
-    transition:
-      background-color var(--bf-appearance-token-motion-fast) var(--bf-appearance-token-easing-standard),
-      border-color var(--bf-appearance-token-motion-fast) var(--bf-appearance-token-easing-standard),
-      color var(--bf-appearance-token-motion-fast) var(--bf-appearance-token-easing-standard);
-
-    &:hover {
-      background: var(--bf-appearance-token-color-accent-100);
-      border-color: var(--bf-appearance-token-border-accent);
-    }
-
-    &--more {
-      background: transparent;
-      border: 1px solid var(--bf-appearance-token-border-base);
-      color: var(--bf-appearance-token-color-text-secondary);
-      cursor: default;
-
-    }
-  }
-
-  &__tag-icon {
-    display: flex;
-    align-items: center;
-    flex-shrink: 0;
-  }
-
-  &__tag-label {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  &__tag-remove {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 14px;
-    height: 14px;
-    border-radius: 50%;
-    cursor: pointer;
-    font-size: 14px;
-    line-height: 1;
-    color: var(--bf-appearance-token-color-text-muted);
-    transition:
-      background-color var(--bf-appearance-token-motion-fast) var(--bf-appearance-token-easing-standard),
-      color var(--bf-appearance-token-motion-fast) var(--bf-appearance-token-easing-standard);
-    margin-left: 2px;
-
-    &:hover {
-      background: var(--bf-appearance-token-color-error-bg);
-      color: var(--bf-appearance-token-color-error);
-    }
-  }
-
-  &__suffix {
-    display: flex;
-    align-items: center;
-    gap: var(--bf-appearance-token-size-gap-2);
-    flex-shrink: 0;
-  }
-
-  &__clear {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 16px;
-    height: 16px;
-    border-radius: 50%;
-    color: var(--bf-appearance-token-color-text-muted);
-    cursor: pointer;
-    transition:
-      background-color var(--bf-appearance-token-motion-fast) var(--bf-appearance-token-easing-standard),
-      color var(--bf-appearance-token-motion-fast) var(--bf-appearance-token-easing-standard);
-    font-size: 16px;
-    line-height: 1;
-    padding: 0;
-    border: 0;
-    background: transparent;
-
-    &:hover {
-      background: var(--bf-appearance-token-color-error-bg);
-      color: var(--bf-appearance-token-color-error);
-    }
-  }
-
-  &__loading {
-    display: flex;
-    align-items: center;
-  }
-
-  &__loading-spinner {
-    width: 14px;
-    height: 14px;
-    border: 1.5px solid var(--bf-appearance-token-color-accent-200);
-    border-top-color: var(--bf-appearance-token-color-accent-500);
-    border-radius: 50%;
-    animation: select-spin 0.8s linear infinite;
-  }
-
-  &__arrow {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: var(--bf-appearance-token-color-text-muted);
-    transition:
-      color var(--bf-appearance-token-motion-fast) var(--bf-appearance-token-easing-standard),
-      transform var(--bf-appearance-token-motion-fast) var(--bf-appearance-token-easing-standard);
-
-    &--open {
-      transform: rotate(180deg);
-      color: var(--bf-appearance-token-color-accent-500);
-    }
-  }
-
-  &__dropdown {
-    @include surfaces.floating-surface;
-
-    --select-motion-y: -2px;
-    position: fixed;
-    box-sizing: border-box;
-    max-width: calc(100vw - 16px);
-    max-height: min(240px, calc(100vh - 16px));
-    color: var(--bf-appearance-token-color-text-primary);
-    font-family: var(--bf-appearance-token-font-family-sans);
-    z-index: tokens.$z-popover;
-    opacity: 1;
-    transform: translateY(0) scale(1);
-    transform-origin: center top;
-    transition:
-      opacity 100ms tokens.$easing-decelerate,
-      transform 120ms tokens.$easing-decelerate;
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-
-    &[data-open='true']:not([data-keyboard-open='true']) {
-      @starting-style {
-        opacity: 0;
-        transform: translateY(var(--select-motion-y)) scale(0.985);
-      }
-    }
-
-    &[data-open='false'] {
-      opacity: 0;
-      transform: translateY(var(--select-motion-y)) scale(0.985);
-      transition-duration: 100ms;
-      pointer-events: none;
-    }
-
-    &[data-keyboard-open='true'] {
-      transition: none;
-    }
-
-    &::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 8px;
-      right: 8px;
-      height: 1px;
-      background: var(--bf-appearance-token-border-subtle);
-    }
-
-    &--top {
-      --select-motion-y: 2px;
-      transform-origin: center bottom;
-      &::before {
-        top: auto;
-        bottom: 0;
-      }
-    }
-
-    &--inline {
-      position: absolute;
-      left: 0;
-      right: 0;
-      z-index: tokens.$z-dropdown;
-    }
-  }
-
-  &__search {
-    padding: 6px 8px;
-    border-bottom: 1px solid var(--bf-appearance-token-border-subtle);
-    position: relative;
-    display: flex;
-    align-items: center;
-  }
-
-  &__search-clear {
-    position: absolute;
-    right: 16px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 16px;
-    height: 16px;
-    border-radius: 50%;
-    color: var(--bf-appearance-token-color-text-muted);
-    cursor: pointer;
-    font-size: 14px;
-    line-height: 1;
-    transition:
-      background-color var(--bf-appearance-token-motion-fast) var(--bf-appearance-token-easing-standard),
-      color var(--bf-appearance-token-motion-fast) var(--bf-appearance-token-easing-standard);
-    flex-shrink: 0;
-    padding: 0;
-    border: 0;
-    background: transparent;
-
-    &:hover {
-      background: var(--bf-appearance-token-color-error-bg);
-      color: var(--bf-appearance-token-color-error);
-    }
-  }
-
-  &__search-input {
-    width: 100%;
-    padding: 6px 28px 6px 10px;
-    background: var(--bf-appearance-token-element-bg-subtle);
-    border: none;
-    border-radius: 3px;
-    color: var(--bf-appearance-token-color-text-primary);
-    font-size: var(--bf-appearance-token-font-size-sm);
-    outline: none !important;
-    box-shadow: none !important;
-    appearance: none;
-    -webkit-appearance: none;
-    transition: background-color var(--bf-appearance-token-motion-fast) var(--bf-appearance-token-easing-standard);
-
-    &::placeholder {
-      color: var(--bf-appearance-token-color-text-muted);
-    }
-
-    &:hover {
-      background: var(--bf-appearance-token-element-bg-soft);
-    }
-
-    &:focus,
-    &:focus-visible {
-      background: var(--bf-appearance-token-element-bg-soft);
-      outline: none !important;
-      box-shadow: none !important;
-    }
-  }
-
-  &__select-all {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    padding: 6px 10px;
-    margin: 4px;
-    cursor: pointer;
-    font-size: var(--bf-appearance-token-font-size-sm);
-    color: var(--bf-appearance-token-color-accent-500);
-    font-weight: var(--bf-appearance-token-font-weight-medium);
-    border-bottom: 1px solid var(--bf-appearance-token-border-subtle);
-    background: transparent;
-    transition:
-      background-color var(--bf-appearance-token-motion-fast) var(--bf-appearance-token-easing-standard),
-      color var(--bf-appearance-token-motion-fast) var(--bf-appearance-token-easing-standard);
-    border-radius: 3px;
-    margin-bottom: 0;
-    padding-bottom: 8px;
-
-    &:hover {
-      background: var(--bf-appearance-token-element-bg-subtle);
-    }
-  }
-
-  &__options {
-    flex: 1;
-    overflow-y: auto;
-    padding: 4px;
-  }
-
-  &__option {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    padding: 6px 10px;
-    cursor: pointer;
-    font-size: var(--bf-appearance-token-font-size-sm);
-    color: var(--bf-appearance-token-color-text-secondary);
-    border-radius: 3px;
-    margin-bottom: 1px;
-    position: relative;
-    background: transparent;
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-
-    &:hover:not(&--disabled) {
-      background: var(--bf-appearance-token-element-bg-subtle);
-      color: var(--bf-appearance-token-color-text-primary);
-    }
-
-    &--highlighted:not(&--disabled) {
-      background: var(--bf-appearance-token-element-bg-subtle);
-      color: var(--bf-appearance-token-color-text-primary);
-    }
-
-    &--selected {
-      background: var(--bf-appearance-token-color-accent-100);
-      color: var(--bf-appearance-token-color-accent-500);
-      font-weight: var(--bf-appearance-token-font-weight-medium);
-
-      &:hover {
-        background: var(--bf-appearance-token-color-accent-200);
-      }
-    }
-
-    &--disabled {
-      opacity: var(--bf-appearance-token-opacity-disabled);
-      cursor: default;
-      color: var(--bf-appearance-token-color-text-disabled);
-    }
-  }
-
-  &__option-content {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    flex: 1;
-    min-width: 0;
-  }
-
-  &__option-text {
-    flex: 1;
-    min-width: 0;
-  }
-
-  &__option-label {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  &__option-description {
-    font-size: var(--bf-appearance-token-font-size-xs);
-    color: var(--bf-appearance-token-color-text-muted);
-    margin-top: 2px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  &__checkbox {
-    width: 16px;
-    height: 16px;
-    border: 1px solid var(--bf-appearance-token-border-medium);
-    border-radius: 3px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-    font-size: 11px;
-    transition:
-      background-color var(--bf-appearance-token-motion-fast) var(--bf-appearance-token-easing-standard),
-      border-color var(--bf-appearance-token-motion-fast) var(--bf-appearance-token-easing-standard),
-      color var(--bf-appearance-token-motion-fast) var(--bf-appearance-token-easing-standard);
-    background: transparent;
-    color: transparent;
-
-    &--checked {
-      background: var(--bf-appearance-token-color-accent-500);
-      border-color: var(--bf-appearance-token-color-accent-500);
-      color: white;
-    }
-  }
-
-  &__group {
-    &:not(:first-child) {
-      margin-top: var(--bf-appearance-token-size-gap-2);
-      padding-top: var(--bf-appearance-token-size-gap-2);
-      border-top: 1px solid var(--bf-appearance-token-border-subtle);
-    }
-  }
-
-  &__group-label {
-    padding: 6px 12px;
-    font-size: var(--bf-appearance-token-font-size-xs);
-    font-weight: var(--bf-appearance-token-font-weight-semibold);
-    color: var(--bf-appearance-token-color-text-muted);
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-    margin-bottom: 4px;
-  }
-
-  &__empty {
-    padding: 24px 16px;
-    text-align: center;
-    color: var(--bf-appearance-token-color-text-muted);
-    font-size: var(--bf-appearance-token-font-size-sm);
-
-    &--loading {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      gap: 8px;
-    }
-  }
-
-  &__custom-value-hint {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 8px;
-    padding: 8px 12px;
-    cursor: pointer;
-    transition:
-      background-color var(--bf-appearance-token-motion-fast) var(--bf-appearance-token-easing-standard),
-      border-color var(--bf-appearance-token-motion-fast) var(--bf-appearance-token-easing-standard),
-      color var(--bf-appearance-token-motion-fast) var(--bf-appearance-token-easing-standard);
-    font-size: var(--bf-appearance-token-font-size-sm);
-    color: var(--bf-appearance-token-color-accent-500);
-    border-radius: 3px;
-    margin: 4px;
-    background: var(--bf-appearance-token-color-accent-100);
-    border: 1px dashed var(--bf-appearance-token-border-accent-soft);
-
-    &:hover {
-      background: var(--bf-appearance-token-color-accent-200);
-      border-color: var(--bf-appearance-token-border-accent);
-    }
-  }
-
-  &__custom-value-text {
-    font-weight: var(--bf-appearance-token-font-weight-medium);
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  &__custom-value-action {
-    font-size: var(--bf-appearance-token-font-size-xs);
-    color: var(--bf-appearance-token-color-text-muted);
-    white-space: nowrap;
-    flex-shrink: 0;
-  }
-
-  &__value-label--custom {
-    color: var(--bf-appearance-token-color-accent-500);
-    font-style: italic;
-  }
-
-  &__error-message {
-    margin-top: 6px;
-    font-size: var(--bf-appearance-token-font-size-xs);
-    color: var(--bf-appearance-token-color-error);
-    display: flex;
-    align-items: center;
-    gap: 4px;
-  }
-
-  &--small {
-    .select__trigger {
-      padding: 4px 10px;
-      min-height: 28px;
-    }
-
-    .select__label {
-      font-size: 13px;
-      margin-bottom: 6px;
-    }
-
-    .select__value,
-    .select__placeholder {
-      font-size: 13px;
-    }
-
-    .select__tag {
-      padding: 2px 6px;
-      font-size: 12px;
-    }
-
-  }
-
-  &--large {
-    .select__trigger {
-      padding: 10px 14px;
-      min-height: 44px;
-    }
-
-    .select__label {
-      font-size: 15px;
-      margin-bottom: 10px;
-    }
-
-    .select__value,
-    .select__placeholder {
-      font-size: 15px;
-    }
-
-    .select__tag {
-      padding: 4px 10px;
-      font-size: 13px;
-    }
-
-  }
-}
-
-.select__dropdown--inline.select__dropdown--bottom {
-  top: 100%;
-}
-
-.select__dropdown--inline.select__dropdown--top {
-  bottom: 100%;
-}
-
-.select__dropdown--small {
-  .select__option {
-    padding: 5px 8px;
-    font-size: 13px;
-  }
-
-  .select__checkbox {
-    width: 14px;
-    height: 14px;
-    font-size: 10px;
-  }
-}
-
-.select__dropdown--large {
-  .select__option {
-    padding: 8px 12px;
-    font-size: 15px;
-  }
-
-  .select__checkbox {
-    width: 18px;
-    height: 18px;
-    font-size: 12px;
-  }
-}
-
-@media (hover: hover) and (pointer: fine) {
-  .select:not(.select--disabled) .select__trigger:hover {
-    background: var(--bf-appearance-token-element-bg-subtle);
-    border-color: var(--bf-appearance-token-border-strong);
-  }
-
-  .select--error:not(.select--disabled) .select__trigger:hover {
-    border-color: var(--bf-appearance-token-color-error);
-  }
-
-  .select__tag:hover {
-    background: var(--bf-appearance-token-color-accent-100);
-    border-color: var(--bf-appearance-token-border-accent);
-  }
-
-  .select__tag--more:hover {
-    background: transparent;
-    border-color: var(--bf-appearance-token-border-base);
-  }
-
-  .select__tag-remove:hover,
-  .select__clear:hover,
-  .select__search-clear:hover {
-    background: var(--bf-appearance-token-color-error-bg);
-    color: var(--bf-appearance-token-color-error);
-  }
-
-  .select__search-input:hover {
-    background: var(--bf-appearance-token-element-bg-soft);
-  }
-
-  .select__select-all:hover,
-  .select__option:hover:not(.select__option--disabled) {
-    background: var(--bf-appearance-token-element-bg-subtle);
-    color: var(--bf-appearance-token-color-text-primary);
-  }
-
-  .select__option--selected:hover {
-    background: var(--bf-appearance-token-color-accent-200);
-  }
-
-  .select__custom-value-hint:hover {
-    background: var(--bf-appearance-token-color-accent-200);
-    border-color: var(--bf-appearance-token-border-accent);
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .select__trigger,
-  .select__tag,
-  .select__tag-remove,
-  .select__clear,
-  .select__arrow,
-  .select__search-clear,
-  .select__search-input,
-  .select__select-all,
-  .select__checkbox,
-  .select__custom-value-hint {
-    transition-duration: var(--bf-appearance-token-motion-instant);
-  }
-
-  .select__trigger,
-  .select__tag-remove,
-  .select__clear,
-  .select__arrow,
-  .select__search-clear {
-    transform: none;
-  }
-
-  .select__dropdown {
-    transform: none;
-    transition: opacity var(--bf-appearance-token-motion-instant) ease;
-  }
-
-  .select__dropdown[data-open='true']:not([data-keyboard-open='true']) {
-    @starting-style {
-      opacity: 0;
-      transform: none;
-    }
-  }
-
-  .select__dropdown[data-open='false'] {
-    opacity: 0;
-    transform: none;
-    transition-duration: var(--bf-appearance-token-motion-instant);
-  }
-
-  .select__dropdown[data-keyboard-open='true'] {
-    transition: none;
-  }
-
-  .select__loading-spinner {
-    animation: none;
-  }
-}
-
-@keyframes select-spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
diff --git a/src/web-ui/src/component-library/components/Select/Select.test.tsx b/src/web-ui/src/component-library/components/Select/Select.test.tsx
deleted file mode 100644
index b4700d147d..0000000000
--- a/src/web-ui/src/component-library/components/Select/Select.test.tsx
+++ /dev/null
@@ -1,442 +0,0 @@
-// @vitest-environment jsdom
-
-import React, { act } from 'react';
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-import { createRoot, type Root } from 'react-dom/client';
-import { Select } from './Select';
-
-vi.mock('@/infrastructure/i18n', () => ({
-  useI18n: () => ({
-    t: (key: string, options?: Record<string, unknown> & { defaultValue?: string }) => (
-      options?.defaultValue ?? key
-    ),
-  }),
-}));
-
-describe('Select', () => {
-  let container: HTMLDivElement;
-  let root: Root;
-  let getBoundingClientRectSpy: ReturnType<typeof vi.spyOn>;
-  let offsetHeightSpy: ReturnType<typeof vi.spyOn>;
-  const innerHeight = 800;
-
-  beforeEach(() => {
-    (globalThis as typeof globalThis & { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
-
-    container = document.createElement('div');
-    document.body.appendChild(container);
-    root = createRoot(container);
-
-    Object.defineProperty(window, 'innerHeight', {
-      configurable: true,
-      value: innerHeight,
-    });
-
-    getBoundingClientRectSpy = vi.spyOn(HTMLElement.prototype, 'getBoundingClientRect').mockImplementation(function () {
-      if (this instanceof HTMLElement && this.classList.contains('select__trigger')) {
-        return {
-          top: 700,
-          bottom: 740,
-          left: 0,
-          right: 240,
-          width: 240,
-          height: 40,
-          x: 0,
-          y: 700,
-          toJSON() {
-            return this;
-          },
-        } as DOMRect;
-      }
-      return {
-        top: 0,
-        bottom: 0,
-        left: 0,
-        right: 0,
-        width: 0,
-        height: 0,
-        x: 0,
-        y: 0,
-        toJSON() {
-          return this;
-        },
-      } as DOMRect;
-    });
-
-    offsetHeightSpy = vi.spyOn(HTMLElement.prototype, 'offsetHeight', 'get').mockImplementation(function () {
-      if (this instanceof HTMLElement && this.classList.contains('select__dropdown')) {
-        return 220;
-      }
-      return 0;
-    });
-  });
-
-  afterEach(() => {
-    act(() => {
-      root.unmount();
-    });
-    container.remove();
-    document.querySelector('[data-bf-overlay-host="true"]')?.remove();
-    getBoundingClientRectSpy.mockRestore();
-    offsetHeightSpy.mockRestore();
-    vi.useRealTimers();
-    vi.restoreAllMocks();
-  });
-
-  it('flips the dropdown upward when there is not enough room below', async () => {
-    await act(async () => {
-      root.render(
-        <Select
-          options={[
-            { value: 'ask', label: 'Ask' },
-            { value: 'allow_once', label: 'Allow once' },
-          ]}
-          value="ask"
-        />
-      );
-    });
-
-    const trigger = container.querySelector('.select__trigger') as HTMLElement;
-    expect(trigger).toBeTruthy();
-
-    await act(async () => {
-      trigger.click();
-      await Promise.resolve();
-    });
-
-    const selectRoot = container.querySelector('.select');
-    const dropdown = document.querySelector<HTMLElement>('.select__dropdown');
-
-    expect(selectRoot?.className).toContain('select--placement-top');
-    expect(dropdown?.className).toContain('select__dropdown--top');
-    expect(dropdown?.parentElement?.getAttribute('data-bf-overlay-host')).toBe('true');
-    expect(dropdown?.style.position).toBe('fixed');
-    expect(dropdown?.style.top).toBe('480px');
-    expect(dropdown?.style.width).toBe('240px');
-  });
-
-  it('keeps the dropdown downward when there is enough room below', async () => {
-    getBoundingClientRectSpy.mockImplementation(function () {
-      if (this instanceof HTMLElement && this.classList.contains('select__trigger')) {
-        return {
-          top: 100,
-          bottom: 140,
-          left: 0,
-          right: 240,
-          width: 240,
-          height: 40,
-          x: 0,
-          y: 100,
-          toJSON() {
-            return this;
-          },
-        } as DOMRect;
-      }
-      return {
-        top: 0,
-        bottom: 0,
-        left: 0,
-        right: 0,
-        width: 0,
-        height: 0,
-        x: 0,
-        y: 0,
-        toJSON() {
-          return this;
-        },
-      } as DOMRect;
-    });
-
-    await act(async () => {
-      root.render(
-        <Select
-          options={[
-            { value: 'ask', label: 'Ask' },
-            { value: 'allow_once', label: 'Allow once' },
-          ]}
-          value="ask"
-        />
-      );
-    });
-
-    const trigger = container.querySelector('.select__trigger') as HTMLElement;
-
-    await act(async () => {
-      trigger.click();
-      await Promise.resolve();
-    });
-
-    const selectRoot = container.querySelector('.select');
-    const dropdown = document.querySelector<HTMLElement>('.select__dropdown');
-
-    expect(selectRoot?.className).toContain('select--placement-bottom');
-    expect(dropdown?.className).toContain('select__dropdown--bottom');
-  });
-
-  it('repositions a portalled dropdown when an ancestor scrolls', async () => {
-    let triggerTop = 100;
-    getBoundingClientRectSpy.mockImplementation(function () {
-      if (this instanceof HTMLElement && this.classList.contains('select__trigger')) {
-        return {
-          top: triggerTop,
-          bottom: triggerTop + 40,
-          left: 80,
-          right: 320,
-          width: 240,
-          height: 40,
-          x: 80,
-          y: triggerTop,
-          toJSON() { return this; },
-        } as DOMRect;
-      }
-      return {
-        top: 0,
-        bottom: 0,
-        left: 0,
-        right: 0,
-        width: 0,
-        height: 0,
-        x: 0,
-        y: 0,
-        toJSON() { return this; },
-      } as DOMRect;
-    });
-
-    await act(async () => {
-      root.render(<Select options={[{ value: 'one', label: 'One' }]} />);
-    });
-    const trigger = container.querySelector<HTMLElement>('.select__trigger');
-    await act(async () => trigger?.click());
-    const dropdown = document.querySelector<HTMLElement>('.select__dropdown');
-    expect(dropdown?.style.top).toBe('140px');
-
-    triggerTop = 300;
-    await act(async () => {
-      window.dispatchEvent(new Event('scroll'));
-      await new Promise<void>((resolve) => window.requestAnimationFrame(() => resolve()));
-    });
-
-    expect(dropdown?.style.top).toBe('340px');
-  });
-
-  it('keeps grouped order stable and skips disabled options during keyboard navigation', async () => {
-    const onChange = vi.fn();
-    Object.defineProperty(HTMLElement.prototype, 'scrollIntoView', {
-      configurable: true,
-      value: vi.fn(),
-    });
-    await act(async () => {
-      root.render(
-        <Select
-          options={[
-            { value: 'disabled', label: 'Disabled ungrouped', disabled: true },
-            { value: 'group-a', label: 'Group A choice', group: 'Group A' },
-            { value: 'group-b', label: 'Group B choice', group: 'Group B' },
-          ]}
-          onChange={onChange}
-        />
-      );
-    });
-
-    const trigger = container.querySelector('.select__trigger') as HTMLElement;
-    await act(async () => {
-      trigger.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }));
-      await Promise.resolve();
-    });
-
-    const listbox = document.querySelector('[role="listbox"]') as HTMLElement;
-    const options = Array.from(document.querySelectorAll<HTMLElement>('[role="option"]'));
-    expect(options.map((option) => option.textContent)).toEqual([
-      'Disabled ungrouped',
-      'Group A choice',
-      'Group B choice',
-    ]);
-    expect(trigger.getAttribute('aria-controls')).toBe(listbox.id);
-    expect(trigger.getAttribute('aria-activedescendant')).toBe(options[1].id);
-    expect(options[1].className).toContain('select__option--highlighted');
-    expect(document.querySelector('[role="group"]')?.getAttribute('aria-label')).toBe('Group A');
-
-    await act(async () => {
-      trigger.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
-    });
-    expect(onChange).toHaveBeenCalledWith('group-a');
-  });
-
-  it('links the searchable input to the listbox and active option', async () => {
-    Object.defineProperty(HTMLElement.prototype, 'scrollIntoView', {
-      configurable: true,
-      value: vi.fn(),
-    });
-    await act(async () => {
-      root.render(
-        <Select
-          searchable
-          searchPlaceholder="Find a choice"
-          options={[
-            { value: 'disabled', label: 'Disabled', disabled: true },
-            { value: 'enabled', label: 'Enabled' },
-          ]}
-        />
-      );
-    });
-    const trigger = container.querySelector('.select__trigger') as HTMLElement;
-    await act(async () => trigger.click());
-    const input = document.querySelector('.select__search-input') as HTMLInputElement;
-    const listbox = document.querySelector('[role="listbox"]') as HTMLElement;
-
-    await act(async () => {
-      input.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }));
-      await Promise.resolve();
-    });
-
-    expect(input.getAttribute('aria-controls')).toBe(listbox.id);
-    expect(input.getAttribute('aria-label')).toBe('Find a choice');
-    expect(input.getAttribute('aria-activedescendant')).toBe(
-      document.querySelectorAll<HTMLElement>('[role="option"]')[1].id,
-    );
-  });
-
-  it('keeps portalled interactions inside the Select and safely retains an outside-closed dropdown', async () => {
-    await act(async () => {
-      root.render(<Select options={[{ value: 'one', label: 'One' }]} />);
-    });
-    const trigger = container.querySelector<HTMLElement>('.select__trigger');
-    await act(async () => trigger?.click());
-
-    const dropdown = document.querySelector<HTMLElement>('.select__dropdown');
-    await act(async () => {
-      dropdown?.dispatchEvent(new MouseEvent('mousedown', { bubbles: true }));
-    });
-    expect(document.querySelector('.select__dropdown')).not.toBeNull();
-
-    vi.useFakeTimers();
-    await act(async () => {
-      document.body.dispatchEvent(new MouseEvent('mousedown', { bubbles: true }));
-    });
-    const closingDropdown = document.querySelector<HTMLElement>('.select__dropdown');
-    expect(closingDropdown).not.toBeNull();
-    expect(closingDropdown?.getAttribute('data-open')).toBe('false');
-    expect(closingDropdown?.getAttribute('aria-hidden')).toBe('true');
-    expect(closingDropdown?.hasAttribute('inert')).toBe(true);
-    expect(closingDropdown?.getAttribute('tabindex')).toBe('-1');
-
-    act(() => vi.advanceTimersByTime(119));
-    expect(document.querySelector('.select__dropdown')).not.toBeNull();
-    act(() => vi.advanceTimersByTime(1));
-    expect(document.querySelector('.select__dropdown')).toBeNull();
-  });
-
-  it('keeps the last options and resolved placement stable during exit', async () => {
-    await act(async () => {
-      root.render(
-        <Select
-          options={[{ value: 'old', label: 'Original option' }]}
-          placement="top"
-        />,
-      );
-    });
-    const trigger = container.querySelector<HTMLElement>('.select__trigger');
-    await act(async () => trigger?.click());
-
-    expect(document.querySelector('.select__dropdown--top')).not.toBeNull();
-    expect(document.querySelector('.select__option')?.textContent).toContain('Original option');
-
-    vi.useFakeTimers();
-    await act(async () => trigger?.click());
-    await act(async () => {
-      root.render(
-        <Select
-          options={[{ value: 'new', label: 'Replacement option' }]}
-          placement="bottom"
-        />,
-      );
-    });
-
-    const closingDropdown = document.querySelector<HTMLElement>('.select__dropdown');
-    expect(closingDropdown?.className).toContain('select__dropdown--top');
-    expect(closingDropdown?.textContent).toContain('Original option');
-    expect(closingDropdown?.textContent).not.toContain('Replacement option');
-
-    act(() => vi.advanceTimersByTime(120));
-    expect(document.querySelector('.select__dropdown')).toBeNull();
-  });
-
-  it('cancels pending dropdown removal when reopened quickly', async () => {
-    await act(async () => {
-      root.render(<Select options={[{ value: 'one', label: 'One' }]} />);
-    });
-    const trigger = container.querySelector<HTMLElement>('.select__trigger');
-    await act(async () => trigger?.click());
-
-    vi.useFakeTimers();
-    await act(async () => trigger?.click());
-    act(() => vi.advanceTimersByTime(60));
-    await act(async () => trigger?.click());
-    act(() => vi.advanceTimersByTime(120));
-
-    const reopenedDropdown = document.querySelector<HTMLElement>('.select__dropdown');
-    expect(reopenedDropdown).not.toBeNull();
-    expect(reopenedDropdown?.getAttribute('data-open')).toBe('true');
-    expect(reopenedDropdown?.getAttribute('aria-hidden')).toBe('false');
-    expect(reopenedDropdown?.hasAttribute('inert')).toBe(false);
-  });
-
-  it('opens from the keyboard without motion and returns focus when closed', async () => {
-    Object.defineProperty(HTMLElement.prototype, 'scrollIntoView', {
-      configurable: true,
-      value: vi.fn(),
-    });
-    await act(async () => {
-      root.render(
-        <Select
-          searchable
-          options={[{ value: 'one', label: 'One' }]}
-        />,
-      );
-    });
-    const trigger = container.querySelector<HTMLElement>('.select__trigger');
-    await act(async () => {
-      trigger?.dispatchEvent(new KeyboardEvent('keydown', {
-        key: 'ArrowDown',
-        bubbles: true,
-      }));
-    });
-
-    const openDropdown = document.querySelector<HTMLElement>('.select__dropdown');
-    const searchInput = document.querySelector<HTMLInputElement>('.select__search-input');
-    expect(openDropdown?.getAttribute('data-keyboard-open')).toBe('true');
-    expect(document.activeElement).toBe(searchInput);
-
-    vi.useFakeTimers();
-    await act(async () => {
-      searchInput?.dispatchEvent(new KeyboardEvent('keydown', {
-        key: 'Escape',
-        bubbles: true,
-      }));
-    });
-
-    const closingDropdown = document.querySelector<HTMLElement>('.select__dropdown');
-    expect(document.activeElement).toBe(trigger);
-    expect(closingDropdown?.getAttribute('data-open')).toBe('false');
-    expect(closingDropdown?.getAttribute('data-keyboard-open')).toBe('true');
-    expect(searchInput?.tabIndex).toBe(-1);
-  });
-
-  it('retains the explicit inline mode for layout-expanding selectors', async () => {
-    await act(async () => {
-      root.render(
-        <Select
-          dropdownMode="inline"
-          options={[{ value: 'one', label: 'One' }]}
-        />,
-      );
-    });
-    const trigger = container.querySelector<HTMLElement>('.select__trigger');
-    await act(async () => trigger?.click());
-
-    const dropdown = container.querySelector<HTMLElement>('.select__dropdown');
-    expect(dropdown).not.toBeNull();
-    expect(dropdown?.className).toContain('select__dropdown--inline');
-    expect(dropdown?.style.position).toBe('');
-  });
-});
diff --git a/src/web-ui/src/component-library/components/Select/Select.tsx b/src/web-ui/src/component-library/components/Select/Select.tsx
deleted file mode 100644
index deada956ef..0000000000
--- a/src/web-ui/src/component-library/components/Select/Select.tsx
+++ /dev/null
@@ -1,879 +0,0 @@
-/**
- * Select dropdown component
- */
-
-import React, {
-  useState,
-  useRef,
-  useEffect,
-  useLayoutEffect,
-  useMemo,
-  useCallback,
-} from 'react';
-import { createPortal } from 'react-dom';
-import { getAppearanceOverlayHost } from '@/infrastructure/appearance/runtime/AppearanceOverlayHost';
-import { useI18n } from '@/infrastructure/i18n';
-import {
-  useAnchoredPopoverPosition,
-  type AnchoredPopoverLayout,
-} from '@/shared/utils/useAnchoredPopoverPosition';
-import { isImeOwnedKeyboardEvent } from '@/shared/utils/ime';
-import { PresenceBoundary } from '../PresenceBoundary/PresenceBoundary';
-import './Select.scss';
-
-const SELECT_DROPDOWN_EXIT_RETENTION_MS = 120;
-
-export interface SelectOption {
-  label: string;
-  value: string | number;
-  disabled?: boolean;
-  description?: string;
-  icon?: React.ReactNode;
-  group?: string;
-  testId?: string;
-  testAttributes?: Record<`data-${string}`, string | number | boolean | undefined>;
-}
-
-export interface SelectProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'onChange'> {
-  options?: SelectOption[];
-  value?: string | number | (string | number)[];
-  defaultValue?: string | number | (string | number)[];
-  placeholder?: string;
-  disabled?: boolean;
-  onChange?: (value: string | number | (string | number)[]) => void;
-  size?: 'small' | 'medium' | 'large';
-  label?: string;
-  multiple?: boolean;
-  searchable?: boolean;
-  clearable?: boolean;
-  showSelectAll?: boolean;
-  loading?: boolean;
-  error?: boolean;
-  errorMessage?: string;
-  maxTagCount?: number;
-  searchPlaceholder?: string;
-  emptyText?: string;
-  renderOption?: (option: SelectOption) => React.ReactNode;
-  renderValue?: (option?: SelectOption | SelectOption[]) => React.ReactNode;
-  className?: string;
-  placement?: 'bottom' | 'top';
-  autoClose?: boolean;
-  allowCustomValue?: boolean;
-  customValueHint?: string;
-  onOpenChange?: (isOpen: boolean) => void;
-  triggerTestId?: string;
-  dropdownTestId?: string;
-  triggerAriaLabel?: string;
-  triggerAriaLabelledBy?: string;
-  triggerAriaDescribedBy?: string;
-  /** Additional class applied directly to the dropdown, including when portalled. */
-  dropdownClassName?: string;
-  /** Overlay escapes clipping by default; inline is reserved for layout-expanding selectors. */
-  dropdownMode?: 'overlay' | 'inline';
-  /** Match the trigger width, preserving the historical Select default. */
-  dropdownMatchTriggerWidth?: boolean;
-}
-
-interface SelectDropdownMountProps {
-  mode: NonNullable<SelectProps['dropdownMode']>;
-  children: React.ReactNode;
-}
-
-const SelectDropdownMount: React.FC<SelectDropdownMountProps> = ({ mode, children }) => (
-  mode === 'overlay'
-    ? createPortal(children, getAppearanceOverlayHost())
-    : <>{children}</>
-);
-
-export const Select: React.FC<SelectProps> = ({
-  options = [],
-  value,
-  defaultValue,
-  placeholder,
-  disabled = false,
-  onChange,
-  size = 'medium',
-  label,
-  multiple = false,
-  searchable = false,
-  clearable = false,
-  showSelectAll = false,
-  loading = false,
-  error = false,
-  errorMessage,
-  maxTagCount = 3,
-  searchPlaceholder,
-  emptyText,
-  renderOption,
-  renderValue,
-  className = '',
-  placement = 'bottom',
-  autoClose = false,
-  allowCustomValue = false,
-  customValueHint,
-  onOpenChange,
-  triggerTestId,
-  dropdownTestId,
-  triggerAriaLabel,
-  triggerAriaLabelledBy,
-  triggerAriaDescribedBy,
-  dropdownClassName = '',
-  dropdownMode = 'overlay',
-  dropdownMatchTriggerWidth = true,
-  ...rootProps
-}) => {
-  const { t } = useI18n('components');
-  const baseId = React.useId();
-  const labelId = `${baseId}-label`;
-  const listboxId = `${baseId}-listbox`;
-  const errorId = `${baseId}-error`;
-  
-  // Resolve i18n default values
-  const resolvedPlaceholder = placeholder ?? t('select.placeholder');
-  const resolvedSearchPlaceholder = searchPlaceholder ?? t('select.search');
-  const resolvedEmptyText = emptyText ?? t('select.emptyText');
-  const resolvedCustomValueHint = customValueHint ?? t('select.customValueHint');
-  const [isOpen, setIsOpen] = useState(false);
-  const [selectedValue, setSelectedValue] = useState<string | number | (string | number)[]>(
-    value !== undefined ? value : defaultValue !== undefined ? defaultValue : multiple ? [] : ''
-  );
-  const [searchQuery, setSearchQuery] = useState('');
-  const [highlightedIndex, setHighlightedIndex] = useState(-1);
-  const [keyboardOpen, setKeyboardOpen] = useState(false);
-  const hasMountedRef = useRef(false);
-  
-  const selectRef = useRef<HTMLDivElement>(null);
-  const triggerRef = useRef<HTMLDivElement>(null);
-  const searchInputRef = useRef<HTMLInputElement>(null);
-  const searchCompositionActiveRef = useRef(false);
-  const dropdownRef = useRef<HTMLDivElement>(null);
-  const isKeyboardNavigation = useRef(false);
-
-  useEffect(() => {
-    if (value !== undefined) {
-      setSelectedValue(value);
-    }
-  }, [value]);
-
-  const filteredOptions = useMemo(() => {
-    if (!searchQuery || !searchable) return options;
-    const query = searchQuery.toLowerCase();
-    return options.filter(opt => 
-      opt.label.toLowerCase().includes(query) ||
-      String(opt.value).toLowerCase().includes(query) ||
-      opt.description?.toLowerCase().includes(query)
-    );
-  }, [options, searchQuery, searchable]);
-
-  const dropdownLayout = useAnchoredPopoverPosition({
-    open: isOpen && dropdownMode === 'overlay',
-    anchorRef: triggerRef,
-    popoverRef: dropdownRef,
-    preferredPlacement: placement,
-    gap: 0,
-    matchAnchorWidth: dropdownMatchTriggerWidth,
-    layoutRevision: `${filteredOptions.length}:${searchQuery}:${loading}`,
-  });
-  const resolvedPlacement = dropdownMode === 'inline'
-    ? 'bottom'
-    : dropdownLayout?.placement ?? placement;
-
-  const groupedOptions = useMemo(() => {
-    const groups: { [key: string]: SelectOption[] } = {};
-    const ungrouped: SelectOption[] = [];
-    
-    filteredOptions.forEach(opt => {
-      if (opt.group) {
-        if (!groups[opt.group]) {
-          groups[opt.group] = [];
-        }
-        groups[opt.group].push(opt);
-      } else {
-        ungrouped.push(opt);
-      }
-    });
-    
-    return { groups, ungrouped, hasGroups: Object.keys(groups).length > 0 };
-  }, [filteredOptions]);
-
-  const displayOptions = useMemo(() => [
-    ...groupedOptions.ungrouped,
-    ...Object.values(groupedOptions.groups).flat(),
-  ], [groupedOptions]);
-
-  const liveDropdownSnapshot = useMemo<{
-    filteredOptions: SelectOption[];
-    groupedOptions: typeof groupedOptions;
-    highlightedIndex: number;
-    searchQuery: string;
-    loading: boolean;
-    placement: 'bottom' | 'top';
-    layout: AnchoredPopoverLayout | null;
-  }>(() => ({
-    filteredOptions,
-    groupedOptions,
-    highlightedIndex,
-    searchQuery,
-    loading,
-    placement: resolvedPlacement,
-    layout: dropdownLayout,
-  }), [
-    dropdownLayout,
-    filteredOptions,
-    groupedOptions,
-    highlightedIndex,
-    loading,
-    resolvedPlacement,
-    searchQuery,
-  ]);
-  const lastOpenDropdownSnapshotRef = useRef(liveDropdownSnapshot);
-  useLayoutEffect(() => {
-    if (isOpen) {
-      lastOpenDropdownSnapshotRef.current = liveDropdownSnapshot;
-    }
-  }, [isOpen, liveDropdownSnapshot]);
-  const renderedDropdownSnapshot = isOpen
-    ? liveDropdownSnapshot
-    : lastOpenDropdownSnapshotRef.current;
-  const {
-    filteredOptions: renderedFilteredOptions,
-    groupedOptions: renderedGroupedOptions,
-    highlightedIndex: renderedHighlightedIndex,
-    searchQuery: renderedSearchQuery,
-    loading: renderedLoading,
-    placement: renderedPlacement,
-    layout: renderedDropdownLayout,
-  } = renderedDropdownSnapshot;
-
-  const isSelected = useCallback((optionValue: string | number) => {
-    if (multiple) {
-      return (selectedValue as (string | number)[]).includes(optionValue);
-    }
-    return selectedValue === optionValue;
-  }, [selectedValue, multiple]);
-
-  const selectedOptions = useMemo(() => {
-    if (multiple) {
-      return options.filter(opt => 
-        (selectedValue as (string | number)[]).includes(opt.value)
-      );
-    }
-    return options.find(opt => opt.value === selectedValue);
-  }, [selectedValue, options, multiple]);
-
-  const handleSelect = useCallback((option: SelectOption) => {
-    if (option.disabled) return;
-
-    let newValue: string | number | (string | number)[];
-    
-    if (multiple) {
-      const currentValues = selectedValue as (string | number)[];
-      if (currentValues.includes(option.value)) {
-        newValue = currentValues.filter(v => v !== option.value);
-      } else {
-        newValue = [...currentValues, option.value];
-      }
-      setSelectedValue(newValue);
-      onChange?.(newValue);
-      
-      if (autoClose && newValue.length > 0) {
-        setIsOpen(false);
-        setSearchQuery('');
-      }
-    } else {
-      newValue = option.value;
-      setSelectedValue(newValue);
-      onChange?.(newValue);
-      setIsOpen(false);
-      setSearchQuery('');
-    }
-    
-    setHighlightedIndex(-1);
-  }, [selectedValue, multiple, onChange, autoClose]);
-
-  const handleSelectAll = useCallback(() => {
-    if (!multiple) return;
-    
-    const currentValues = selectedValue as (string | number)[];
-    const availableOptions = filteredOptions.filter(opt => !opt.disabled);
-    const availableValues = availableOptions.map(opt => opt.value);
-    
-    const allSelected = availableValues.every(v => currentValues.includes(v));
-    
-    let newValue: (string | number)[];
-    if (allSelected) {
-      newValue = currentValues.filter(v => !availableValues.includes(v));
-    } else {
-      newValue = [...new Set([...currentValues, ...availableValues])];
-    }
-    
-    setSelectedValue(newValue);
-    onChange?.(newValue);
-  }, [multiple, selectedValue, filteredOptions, onChange]);
-
-  const handleClear = useCallback((e: React.MouseEvent) => {
-    e.stopPropagation();
-    const newValue = multiple ? [] : '';
-    setSelectedValue(newValue);
-    onChange?.(newValue);
-    setSearchQuery('');
-  }, [multiple, onChange]);
-
-  const handleCustomValueSubmit = useCallback(() => {
-    if (!allowCustomValue || !searchQuery.trim()) return false;
-    
-    const trimmedValue = searchQuery.trim();
-    const existingOption = options.find(opt => 
-      opt.value === trimmedValue || opt.label.toLowerCase() === trimmedValue.toLowerCase()
-    );
-    
-    if (existingOption) {
-      handleSelect(existingOption);
-    } else if (multiple) {
-      const currentValues = selectedValue as (string | number)[];
-      if (!currentValues.includes(trimmedValue)) {
-        const newValue = [...currentValues, trimmedValue];
-        setSelectedValue(newValue);
-        onChange?.(newValue);
-      }
-      setIsOpen(false);
-      setSearchQuery('');
-    } else {
-      setSelectedValue(trimmedValue);
-      onChange?.(trimmedValue);
-      setIsOpen(false);
-      setSearchQuery('');
-    }
-    return true;
-  }, [allowCustomValue, multiple, searchQuery, options, handleSelect, selectedValue, onChange]);
-
-  const moveHighlight = useCallback((current: number, direction: 1 | -1) => {
-    if (displayOptions.length === 0) return -1;
-    let index = current;
-    for (let count = 0; count < displayOptions.length; count += 1) {
-      index += direction;
-      if (index < 0) index = displayOptions.length - 1;
-      if (index >= displayOptions.length) index = 0;
-      if (!displayOptions[index]?.disabled) return index;
-    }
-    return -1;
-  }, [displayOptions]);
-
-  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
-    if (disabled) return;
-
-    if (['Enter', 'Escape', 'ArrowDown', 'ArrowUp', 'Tab'].includes(e.key)) {
-      setKeyboardOpen(true);
-    }
-
-    switch (e.key) {
-      case 'Enter':
-        e.preventDefault();
-        if (!isOpen) {
-          setIsOpen(true);
-        } else if (highlightedIndex >= 0 && highlightedIndex < displayOptions.length) {
-          handleSelect(displayOptions[highlightedIndex]);
-        } else if (allowCustomValue && searchQuery.trim()) {
-          handleCustomValueSubmit();
-        }
-        break;
-        
-      case 'Escape':
-        e.preventDefault();
-        setIsOpen(false);
-        setSearchQuery('');
-        break;
-        
-      case 'ArrowDown':
-        e.preventDefault();
-        isKeyboardNavigation.current = true;
-        if (!isOpen) {
-          setIsOpen(true);
-          setHighlightedIndex(moveHighlight(-1, 1));
-        } else {
-          setHighlightedIndex((previous) => moveHighlight(previous, 1));
-        }
-        break;
-        
-      case 'ArrowUp':
-        e.preventDefault();
-        isKeyboardNavigation.current = true;
-        if (isOpen) {
-          setHighlightedIndex((previous) => moveHighlight(
-            previous < 0 ? displayOptions.length : previous,
-            -1,
-          ));
-        }
-        break;
-        
-      case 'Tab':
-        if (isOpen) {
-          if (allowCustomValue && searchQuery.trim()) {
-            handleCustomValueSubmit();
-          }
-          setIsOpen(false);
-        }
-        break;
-    }
-  }, [disabled, isOpen, highlightedIndex, displayOptions, handleSelect, allowCustomValue,
-    searchQuery, handleCustomValueSubmit, moveHighlight]);
-
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      const target = event.target as Node;
-      if (
-        selectRef.current
-        && !selectRef.current.contains(target)
-        && !dropdownRef.current?.contains(target)
-      ) {
-        setKeyboardOpen(false);
-        if (allowCustomValue && !multiple && searchQuery.trim()) {
-          const trimmedValue = searchQuery.trim();
-          const existingOption = options.find(opt => 
-            opt.value === trimmedValue || opt.label.toLowerCase() === trimmedValue.toLowerCase()
-          );
-          if (existingOption) {
-            setSelectedValue(existingOption.value);
-            onChange?.(existingOption.value);
-          } else {
-            setSelectedValue(trimmedValue);
-            onChange?.(trimmedValue);
-          }
-        }
-        setIsOpen(false);
-        setSearchQuery('');
-      }
-    };
-
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => document.removeEventListener('mousedown', handleClickOutside);
-  }, [allowCustomValue, multiple, searchQuery, options, onChange]);
-
-  useEffect(() => {
-    if (!hasMountedRef.current) {
-      hasMountedRef.current = true;
-      return;
-    }
-    onOpenChange?.(isOpen);
-  }, [isOpen, onOpenChange]);
-
-  useEffect(() => {
-    if (isOpen && searchable && searchInputRef.current) {
-      searchInputRef.current.focus();
-    }
-  }, [isOpen, searchable]);
-
-  useLayoutEffect(() => {
-    if (
-      !isOpen
-      && dropdownRef.current?.contains(document.activeElement)
-    ) {
-      triggerRef.current?.focus({ preventScroll: true });
-    }
-  }, [isOpen]);
-
-  useEffect(() => {
-    if (highlightedIndex >= 0 && dropdownRef.current && isKeyboardNavigation.current) {
-      const highlightedElement = document.getElementById(`${listboxId}-option-${highlightedIndex}`);
-      highlightedElement?.scrollIntoView({ block: 'nearest' });
-      isKeyboardNavigation.current = false;
-    }
-  }, [highlightedIndex, listboxId]);
-
-  const classNames = [
-    'select',
-    `select--${size}`,
-    `select--placement-${resolvedPlacement}`,
-    isOpen && 'select--open',
-    disabled && 'select--disabled',
-    error && 'select--error',
-    multiple && 'select--multiple',
-    className
-  ]
-    .filter(Boolean)
-    .join(' ');
-
-  const renderSelectedValue = () => {
-    if (renderValue) {
-      const customRenderedValue = renderValue(selectedOptions);
-      if (customRenderedValue) {
-        return customRenderedValue;
-      }
-    }
-
-    if (multiple) {
-      const selected = selectedOptions as SelectOption[];
-      if (selected.length === 0) {
-        return <span className="select__placeholder" data-bf-component="select" data-bf-part="value">{resolvedPlaceholder}</span>;
-      }
-      
-      const displayTags = selected.slice(0, maxTagCount);
-      const remaining = selected.length - maxTagCount;
-      
-      return (
-        <div className="select__tags">
-          {displayTags.map(opt => (
-            <span key={opt.value} className="select__tag">
-              {opt.icon && <span className="select__tag-icon">{opt.icon}</span>}
-              <span className="select__tag-label">{opt.label}</span>
-              <button
-                type="button"
-                className="select__tag-remove"
-                onClick={(e) => {
-                  e.stopPropagation();
-                  handleSelect(opt);
-                }}
-                aria-label={opt.label}
-              >
-                ×
-              </button>
-            </span>
-          ))}
-          {remaining > 0 && (
-            <span className="select__tag select__tag--more">+{remaining}</span>
-          )}
-        </div>
-      );
-    } else {
-      const selected = selectedOptions as SelectOption | undefined;
-      if (!selected) {
-        if (allowCustomValue && selectedValue && selectedValue !== '') {
-          return (
-            <span className="select__value" data-bf-component="select" data-bf-part="value">
-              <span className="select__value-label select__value-label--custom">{String(selectedValue)}</span>
-            </span>
-          );
-        }
-        return <span className="select__placeholder" data-bf-component="select" data-bf-part="value">{resolvedPlaceholder}</span>;
-      }
-      return (
-        <span className="select__value" data-bf-component="select" data-bf-part="value">
-          {selected.icon && <span className="select__value-icon">{selected.icon}</span>}
-          <span className="select__value-label">{selected.label}</span>
-        </span>
-      );
-    }
-  };
-
-  const renderOptionItem = (option: SelectOption, index: number) => {
-    const selected = isSelected(option.value);
-    const highlighted = index === renderedHighlightedIndex;
-    
-    return (
-      <div
-        id={`${listboxId}-option-${index}`}
-        key={option.value}
-        className={`select__option ${selected ? 'select__option--selected' : ''} ${
-          option.disabled ? 'select__option--disabled' : ''
-        } ${highlighted ? 'select__option--highlighted' : ''}`}
-        onClick={() => {
-          setKeyboardOpen(false);
-          handleSelect(option);
-        }}
-        onMouseEnter={() => {
-          if (!option.disabled) setHighlightedIndex(index);
-        }}
-        role="option"
-        aria-selected={selected}
-        aria-disabled={option.disabled}
-        data-selected={selected ? 'true' : 'false'}
-        data-testid={option.testId}
-        {...option.testAttributes}
-        data-bf-component="select"
-        data-bf-part="option"
-        data-bf-state={[selected && 'selected', highlighted && 'highlighted', option.disabled && 'disabled'].filter(Boolean).join(' ') || undefined}
-      >
-        {multiple && (
-          <span className={`select__checkbox ${selected ? 'select__checkbox--checked' : ''}`}>
-            {selected && '✓'}
-          </span>
-        )}
-        
-        {renderOption ? renderOption(option) : (
-          <div className="select__option-content">
-            {option.icon && <span className="select__option-icon" data-bf-component="select" data-bf-part="optionIcon">{option.icon}</span>}
-            <div className="select__option-text">
-              <div className="select__option-label" data-bf-component="select" data-bf-part="optionLabel">{option.label}</div>
-              {option.description && (
-                <div className="select__option-description" data-bf-component="select" data-bf-part="optionDescription">{option.description}</div>
-              )}
-            </div>
-          </div>
-        )}
-      </div>
-    );
-  };
-
-  const dropdownNode = (
-    <div
-      id={listboxId}
-      className={[
-        'select__dropdown',
-        `select__dropdown--${renderedPlacement}`,
-        `select__dropdown--${size}`,
-        `select__dropdown--${dropdownMode}`,
-        dropdownClassName,
-      ].filter(Boolean).join(' ')}
-      ref={dropdownRef}
-      style={dropdownMode === 'overlay' ? {
-        position: 'fixed',
-        top: `${renderedDropdownLayout?.top ?? 0}px`,
-        left: `${renderedDropdownLayout?.left ?? 0}px`,
-        width: renderedDropdownLayout?.width === undefined
-          ? undefined
-          : `${renderedDropdownLayout.width}px`,
-        visibility: renderedDropdownLayout ? 'visible' : 'hidden',
-      } : undefined}
-      role="listbox"
-      tabIndex={isOpen ? undefined : -1}
-      aria-hidden={!isOpen}
-      {...(!isOpen ? { inert: '' } : {})}
-      aria-multiselectable={multiple || undefined}
-      aria-busy={renderedLoading || undefined}
-      data-testid={dropdownTestId}
-      data-bf-component="select"
-      data-bf-part="dropdown"
-      data-bf-placement={renderedPlacement}
-      data-open={isOpen ? 'true' : 'false'}
-      data-keyboard-open={keyboardOpen ? 'true' : 'false'}
-    >
-      {searchable && (
-        <div className="select__search" data-bf-component="select" data-bf-part="search">
-          <input
-            ref={searchInputRef}
-            type="text"
-            className="select__search-input"
-            role="combobox"
-            aria-label={resolvedSearchPlaceholder}
-            aria-autocomplete="list"
-            aria-expanded={isOpen}
-            aria-controls={listboxId}
-            aria-activedescendant={isOpen && renderedHighlightedIndex >= 0
-              ? `${listboxId}-option-${renderedHighlightedIndex}`
-              : undefined}
-            placeholder={resolvedSearchPlaceholder}
-            value={renderedSearchQuery}
-            tabIndex={isOpen ? 0 : -1}
-            onChange={(e) => setSearchQuery(e.target.value)}
-            onClick={(e) => e.stopPropagation()}
-            onKeyDown={(e) => {
-              if (
-                (e.key === 'Enter' || e.key === 'Escape')
-                && isImeOwnedKeyboardEvent(e, searchCompositionActiveRef.current)
-              ) {
-                e.stopPropagation();
-                return;
-              }
-              if (['Enter', 'Escape', 'ArrowDown', 'ArrowUp'].includes(e.key)) {
-                setKeyboardOpen(true);
-              }
-              if (e.key === 'Enter') {
-                e.preventDefault();
-                if (highlightedIndex >= 0 && highlightedIndex < displayOptions.length) {
-                  handleSelect(displayOptions[highlightedIndex]);
-                } else if (allowCustomValue && searchQuery.trim()) {
-                  handleCustomValueSubmit();
-                }
-              } else if (e.key === 'Escape') {
-                e.preventDefault();
-                setIsOpen(false);
-                setSearchQuery('');
-              } else if (e.key === 'ArrowDown') {
-                e.preventDefault();
-                isKeyboardNavigation.current = true;
-                setHighlightedIndex((previous) => moveHighlight(previous, 1));
-              } else if (e.key === 'ArrowUp') {
-                e.preventDefault();
-                isKeyboardNavigation.current = true;
-                setHighlightedIndex((previous) => moveHighlight(
-                  previous < 0 ? displayOptions.length : previous,
-                  -1,
-                ));
-              }
-            }}
-            onCompositionStart={() => {
-              searchCompositionActiveRef.current = true;
-            }}
-            onCompositionEnd={() => {
-              searchCompositionActiveRef.current = false;
-            }}
-            data-bf-component="select"
-            data-bf-part="searchInput"
-          />
-          {renderedSearchQuery && (
-            <button
-              type="button"
-              className="select__search-clear"
-              tabIndex={isOpen ? 0 : -1}
-              onClick={(e) => {
-                e.stopPropagation();
-                setSearchQuery('');
-                setHighlightedIndex(-1);
-                searchInputRef.current?.focus();
-              }}
-              aria-label={t('search.clear')}
-            >
-              ×
-            </button>
-          )}
-        </div>
-      )}
-
-      {multiple && showSelectAll && renderedFilteredOptions.length > 0 && (
-        <div
-          className="select__select-all"
-          onClick={() => {
-            setKeyboardOpen(false);
-            handleSelectAll();
-          }}
-          role="option"
-          aria-selected={renderedFilteredOptions
-            .filter(opt => !opt.disabled)
-            .every(opt => isSelected(opt.value))}
-        >
-          <span className={`select__checkbox ${
-            renderedFilteredOptions.filter(opt => !opt.disabled).every(opt => isSelected(opt.value))
-              ? 'select__checkbox--checked' : ''
-          }`}>
-            {renderedFilteredOptions
-              .filter(opt => !opt.disabled)
-              .every(opt => isSelected(opt.value)) && '✓'}
-          </span>
-          <span>{t('select.selectAll')}</span>
-        </div>
-      )}
-
-      <div className="select__options" data-bf-component="select" data-bf-part="options">
-        {renderedFilteredOptions.length === 0 ? (
-          renderedLoading ? (
-            <div className="select__empty select__empty--loading" data-bf-component="select" data-bf-part="empty">
-              <span className="select__loading-spinner" aria-hidden="true" />
-              <span>{t('select.loading')}</span>
-            </div>
-          ) : allowCustomValue && renderedSearchQuery.trim() ? (
-            <div
-              className="select__custom-value-hint"
-              onClick={() => {
-                setKeyboardOpen(false);
-                handleCustomValueSubmit();
-              }}
-            >
-              <span className="select__custom-value-text">"{renderedSearchQuery.trim()}"</span>
-              <span className="select__custom-value-action">{resolvedCustomValueHint}</span>
-            </div>
-          ) : (
-            <div className="select__empty" data-bf-component="select" data-bf-part="empty">{resolvedEmptyText}</div>
-          )
-        ) : renderedGroupedOptions.hasGroups ? (
-          (() => {
-            let globalIndex = 0;
-            return (
-              <>
-                {renderedGroupedOptions.ungrouped.map((option) => renderOptionItem(option, globalIndex++))}
-                {Object.entries(renderedGroupedOptions.groups).map(([groupName, groupOptions]) => (
-                  <div
-                    key={groupName}
-                    className="select__group"
-                    role="group"
-                    aria-label={groupName}
-                    data-bf-component="select"
-                    data-bf-part="group"
-                  >
-                    <div className="select__group-label" data-bf-component="select" data-bf-part="groupLabel">{groupName}</div>
-                    {groupOptions.map((option) => renderOptionItem(option, globalIndex++))}
-                  </div>
-                ))}
-              </>
-            );
-          })()
-        ) : (
-          <>
-            {renderedFilteredOptions.map((option, index) => renderOptionItem(option, index))}
-            {allowCustomValue && renderedSearchQuery.trim()
-              && !renderedFilteredOptions.some(opt => (
-                opt.label.toLowerCase() === renderedSearchQuery.trim().toLowerCase()
-                || String(opt.value).toLowerCase() === renderedSearchQuery.trim().toLowerCase()
-              )) && (
-              <div
-                className="select__custom-value-hint"
-                onClick={() => {
-                  setKeyboardOpen(false);
-                  handleCustomValueSubmit();
-                }}
-              >
-                <span className="select__custom-value-text">"{renderedSearchQuery.trim()}"</span>
-                <span className="select__custom-value-action">{resolvedCustomValueHint}</span>
-              </div>
-            )}
-          </>
-        )}
-      </div>
-    </div>
-  );
-
-  return (
-    <div {...rootProps} className={classNames} ref={selectRef} data-bf-component="select" data-bf-part="root" data-bf-size={size} data-bf-placement={resolvedPlacement} data-bf-multiple={String(multiple)} data-bf-state={[isOpen && 'open', disabled && 'disabled', error && 'error', loading && 'loading'].filter(Boolean).join(' ') || undefined}>
-      {label && <div id={labelId} className="select__label" data-bf-component="select" data-bf-part="label">{label}</div>}
-
-      <div
-        ref={triggerRef}
-        className="select__trigger"
-        onClick={(event) => {
-          if (disabled) return;
-          setKeyboardOpen(event.detail === 0);
-          setIsOpen(!isOpen);
-        }}
-        onKeyDown={handleKeyDown}
-        tabIndex={disabled ? -1 : 0}
-        role="combobox"
-        aria-expanded={isOpen}
-        aria-haspopup="listbox"
-        aria-controls={isOpen ? listboxId : undefined}
-        aria-activedescendant={isOpen && highlightedIndex >= 0
-          ? `${listboxId}-option-${highlightedIndex}`
-          : undefined}
-        aria-disabled={disabled}
-        aria-busy={loading || undefined}
-        aria-invalid={error || undefined}
-        aria-label={triggerAriaLabel}
-        aria-labelledby={triggerAriaLabelledBy ?? (label ? labelId : undefined)}
-        aria-describedby={error && errorMessage ? errorId : triggerAriaDescribedBy}
-        data-testid={triggerTestId}
-        data-bf-component="select"
-        data-bf-part="trigger"
-      >
-        {renderSelectedValue()}
-
-        <div className="select__suffix" data-bf-component="select" data-bf-part="suffix">
-          {loading && (
-            <span className="select__loading" data-bf-component="select" data-bf-part="loading">
-              <span className="select__loading-spinner" />
-            </span>
-          )}
-          {clearable && !loading && (multiple ? (selectedValue as any[]).length > 0 : selectedValue) && (
-            <span className="select__clear" onClick={handleClear} data-bf-component="select" data-bf-part="clear">×</span>
-          )}
-          <span className={`select__arrow ${isOpen ? 'select__arrow--open' : ''}`} data-bf-component="select" data-bf-part="arrow">
-            <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
-              <path d="M2 4L6 8L10 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
-            </svg>
-          </span>
-        </div>
-      </div>
-
-      <PresenceBoundary
-        active={isOpen}
-        exitDurationMs={SELECT_DROPDOWN_EXIT_RETENTION_MS}
-        minimumExitDurationMs={SELECT_DROPDOWN_EXIT_RETENTION_MS}
-      >
-        <SelectDropdownMount mode={dropdownMode}>
-          {dropdownNode}
-        </SelectDropdownMount>
-      </PresenceBoundary>
-
-      {error && errorMessage && (
-        <div className="select__error-message" data-bf-component="select" data-bf-part="message">{errorMessage}</div>
-      )}
-    </div>
-  );
-};
diff --git a/src/web-ui/src/component-library/components/Select/appearance.ts b/src/web-ui/src/component-library/components/Select/appearance.ts
deleted file mode 100644
index 247aca0b74..0000000000
--- a/src/web-ui/src/component-library/components/Select/appearance.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import type { AppearanceSurfaceDescriptor } from '@/infrastructure/appearance/types';
-export const selectAppearanceDescriptor: AppearanceSurfaceDescriptor = {
-  id: 'select', parts: [
-    { id: 'root', propertyProfile: 'control', visualRole: 'control' },
-    { id: 'label', propertyProfile: 'paint', visualRole: 'content' },
-    { id: 'trigger', propertyProfile: 'control', visualRole: 'control' },
-    { id: 'value', propertyProfile: 'paint', visualRole: 'content' },
-    { id: 'suffix', propertyProfile: 'paint', visualRole: 'decoration' },
-    { id: 'loading', propertyProfile: 'paint', visualRole: 'decoration' },
-    { id: 'clear', propertyProfile: 'control', visualRole: 'control' },
-    { id: 'arrow', propertyProfile: 'paint', visualRole: 'decoration' },
-    { id: 'dropdown', propertyProfile: 'overlay', visualRole: 'popup' },
-    { id: 'search', propertyProfile: 'control', visualRole: 'control' },
-    { id: 'searchInput', propertyProfile: 'control', visualRole: 'control' },
-    { id: 'options', visualRole: 'content' },
-    { id: 'option', propertyProfile: 'control', visualRole: 'control' },
-    { id: 'optionIcon', propertyProfile: 'paint', visualRole: 'decoration' },
-    { id: 'optionLabel', propertyProfile: 'paint', visualRole: 'content' },
-    { id: 'optionDescription', propertyProfile: 'paint', visualRole: 'content' },
-    { id: 'group', visualRole: 'content' },
-    { id: 'groupLabel', propertyProfile: 'paint', visualRole: 'content' },
-    { id: 'empty', visualRole: 'content' },
-    { id: 'message', propertyProfile: 'paint', visualRole: 'content' },
-  ],
-  facets: [{ id: 'size', attribute: 'data-bf-size', values: ['small', 'medium', 'large'] }, { id: 'placement', attribute: 'data-bf-placement', values: ['top', 'bottom'] }, { id: 'multiple', attribute: 'data-bf-multiple', values: ['true', 'false'] }],
-  states: [{ id: 'hover', selector: { kind: 'self', suffix: ':hover' } }, { id: 'focusWithin', selector: { kind: 'self', suffix: ':focus-within' } }, { id: 'open', selector: { kind: 'self', suffix: '[data-bf-state~="open"]' } }, { id: 'selected', selector: { kind: 'self', suffix: '[data-bf-state~="selected"]' } }, { id: 'highlighted', selector: { kind: 'self', suffix: '[data-bf-state~="highlighted"]' } }, { id: 'disabled', selector: { kind: 'self', suffix: '[data-bf-state~="disabled"]' } }, { id: 'error', selector: { kind: 'self', suffix: '[data-bf-state~="error"]' } }, { id: 'loading', selector: { kind: 'self', suffix: '[data-bf-state~="loading"]' } }],
-};
diff --git a/src/web-ui/src/component-library/components/Select/index.ts b/src/web-ui/src/component-library/components/Select/index.ts
deleted file mode 100644
index b8f466f68b..0000000000
--- a/src/web-ui/src/component-library/components/Select/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { Select } from './Select';
-export type { SelectProps, SelectOption } from './Select';
\ No newline at end of file
diff --git a/src/web-ui/src/component-library/components/index.ts b/src/web-ui/src/component-library/components/index.ts
index 9d8142a977..0c01feae72 100644
--- a/src/web-ui/src/component-library/components/index.ts
+++ b/src/web-ui/src/component-library/components/index.ts
@@ -14,7 +14,6 @@ export * from './InputDialog';
 export { Alert, type AlertProps, type AlertTone } from '@bitfun/ui';
 
 export { NumberInput, type NumberInputProps } from '@bitfun/ui';
-export * from './Select';
 export { Checkbox, type CheckboxProps, type CheckboxSize } from '@bitfun/ui';
 export { Textarea, type TextareaProps } from '@bitfun/ui';
 
diff --git a/src/web-ui/src/component-library/components/registry.tsx b/src/web-ui/src/component-library/components/registry.tsx
index 9a2fb1af70..5b6aea2efe 100644
--- a/src/web-ui/src/component-library/components/registry.tsx
+++ b/src/web-ui/src/component-library/components/registry.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import type { ComponentCategory } from '../types';
 import { Alert, Avatar, AvatarGroup, Button, Checkbox, IconButton, StatusPill, TabGroup, Textarea } from '@bitfun/ui';
 import { WindowControls } from '@components/WindowControls';
-import { Select } from '@components/Select';
+import { Combobox } from '@bitfun/ui';
 import { CubeLoading } from '@components/CubeLoading';
 import { Tooltip } from '@components/Tooltip';
 import { Markdown } from '@components/Markdown';
@@ -281,7 +281,7 @@ export const componentRegistry: ComponentCategory[] = [
     components: [
       {
         id: 'select-basic',
-        name: 'Select - 基础选择',
+        name: 'Combobox - 基础选择',
         description: '基础单选和多选示例',
         category: 'form',
         component: () => {
@@ -290,7 +290,7 @@ export const componentRegistry: ComponentCategory[] = [
 
           return (
             <div style={{ display: 'flex', flexDirection: 'column', gap: '20px', maxWidth: '400px' }}>
-              <Select
+              <Combobox
                 label="Select"
                 options={[
                   { label: 'Option 1', value: '1' },
@@ -304,7 +304,7 @@ export const componentRegistry: ComponentCategory[] = [
                 clearable
               />
 
-              <Select
+              <Combobox
                 label="Multiple"
                 multiple
                 showSelectAll
@@ -322,7 +322,7 @@ export const componentRegistry: ComponentCategory[] = [
               />
 
               <div style={{ display: 'flex', gap: '12px', flexDirection: 'column' }}>
-                <Select
+                <Combobox
                   size="small"
                   options={[
                     { label: 'Small', value: 's1' },
@@ -330,7 +330,7 @@ export const componentRegistry: ComponentCategory[] = [
                   ]}
                   placeholder="Small size"
                 />
-                <Select
+                <Combobox
                   size="large"
                   options={[
                     { label: 'Large', value: 'l1' },
@@ -345,7 +345,7 @@ export const componentRegistry: ComponentCategory[] = [
       },
       {
         id: 'select-searchable',
-        name: 'Select - Demo',
+        name: 'Combobox - Demo',
         description: '可搜索的选择器示例',
         category: 'form',
         component: () => {
@@ -366,7 +366,7 @@ export const componentRegistry: ComponentCategory[] = [
 
           return (
             <div style={{ maxWidth: '400px' }}>
-              <Select
+              <Combobox
                 label="Country"
                 searchable
                 searchPlaceholder="Search..."
@@ -382,7 +382,7 @@ export const componentRegistry: ComponentCategory[] = [
       },
       {
         id: 'select-grouped',
-        name: 'Select - 分组选择',
+        name: 'Combobox - 分组选择',
         description: '带分组的选择器',
         category: 'form',
         component: () => {
@@ -402,7 +402,7 @@ export const componentRegistry: ComponentCategory[] = [
 
           return (
             <div style={{ maxWidth: '400px' }}>
-              <Select
+              <Combobox
                 label="选择框架"
                 searchable
                 options={options}
@@ -417,7 +417,7 @@ export const componentRegistry: ComponentCategory[] = [
       },
       {
         id: 'select-with-icons',
-        name: 'Select - Demo',
+        name: 'Combobox - Demo',
         description: '带图标的选择器',
         category: 'form',
         component: () => {
@@ -458,7 +458,7 @@ export const componentRegistry: ComponentCategory[] = [
 
           return (
             <div style={{ maxWidth: '400px' }}>
-              <Select
+              <Combobox
                 label="Language"
                 searchable
                 options={options}
@@ -473,7 +473,7 @@ export const componentRegistry: ComponentCategory[] = [
       },
       {
         id: 'select-advanced',
-        name: 'Select - Demo',
+        name: 'Combobox - Demo',
         description: '加载、错误和禁用状态',
         category: 'form',
         component: () => {
@@ -488,7 +488,7 @@ export const componentRegistry: ComponentCategory[] = [
 
           return (
             <div style={{ display: 'flex', flexDirection: 'column', gap: '20px', maxWidth: '400px' }}>
-              <Select
+              <Combobox
                 label="Loading"
                 loading
                 options={options}
@@ -497,7 +497,7 @@ export const componentRegistry: ComponentCategory[] = [
                 onChange={(v) => setValue1(v as string | number)}
               />
 
-              <Select
+              <Combobox
                 label="Error"
                 error
                 errorMessage="Error message"
@@ -507,7 +507,7 @@ export const componentRegistry: ComponentCategory[] = [
                 onChange={(v) => setValue2(v as string | number)}
               />
 
-              <Select
+              <Combobox
                 label="Disabled"
                 disabled
                 options={options}
diff --git a/src/web-ui/src/component-library/preview/PreviewApp.tsx b/src/web-ui/src/component-library/preview/PreviewApp.tsx
index db0941fd52..9839063a1f 100644
--- a/src/web-ui/src/component-library/preview/PreviewApp.tsx
+++ b/src/web-ui/src/component-library/preview/PreviewApp.tsx
@@ -6,8 +6,7 @@ import React, { useMemo, useState } from 'react';
 import { componentRegistry } from '../components/registry';
 import type { ComponentCategory } from '../types';
 import { FullPageLayout, LargeCardLayout, GridLayout, DemoLayout, ColumnLayout } from './layouts';
-import { Select } from '@components/Select';
-import type { SelectOption } from '@components/Select';
+import { Combobox, type ComboboxOption } from '@bitfun/ui';
 import { useI18n } from '@/infrastructure/i18n';
 import { useAppearance } from '@/infrastructure/appearance';
 import './preview.css';
@@ -37,7 +36,7 @@ export const PreviewApp: React.FC = () => {
   const appearanceModeLabel = appearanceMode === 'light'
     ? t('componentLibrary.previewApp.appearanceModeLight')
     : t('componentLibrary.previewApp.appearanceModeDark');
-  const appearanceOptions = useMemo<SelectOption[]>(
+  const appearanceOptions = useMemo<ComboboxOption[]>(
     () =>
       appearances.map((entry) => ({
         label: entry.name,
@@ -66,7 +65,8 @@ export const PreviewApp: React.FC = () => {
               {t('componentLibrary.previewApp.appearanceLabel')}
             </span>
             <div className="preview-appearance-selector__control">
-              <Select
+              <Combobox
+                triggerAriaLabel={t('componentLibrary.previewApp.appearanceLabel')}
                 className="preview-appearance-selector__select-component"
                 size="small"
                 value={selectedAppearanceId}
diff --git a/src/web-ui/src/component-library/preview/preview.css b/src/web-ui/src/component-library/preview/preview.css
index bbdfc80bb9..37915dcba6 100644
--- a/src/web-ui/src/component-library/preview/preview.css
+++ b/src/web-ui/src/component-library/preview/preview.css
@@ -119,21 +119,17 @@ body {
   width: 220px;
 }
 
-.preview-appearance-selector__select-component .select__trigger {
+.preview-appearance-selector__select-component [data-bf-part='trigger'] {
   min-height: 30px;
   padding: 4px 10px;
   border-radius: 10px;
   background: var(--bf-appearance-token-element-bg-base);
 }
 
-.preview-appearance-selector__select-component .select__value,
-.preview-appearance-selector__select-component .select__placeholder {
+.preview-appearance-selector__select-component [data-bf-part='value'] {
   font-size: 13px;
 }
 
-.preview-appearance-selector__select-component .select__dropdown {
-  z-index: 20;
-}
 
 .preview-container {
   flex: 1;
diff --git a/src/web-ui/src/component-library/styles/overlay-surfaces.contract.test.ts b/src/web-ui/src/component-library/styles/overlay-surfaces.contract.test.ts
index ed660f84ff..c3f47fd18e 100644
--- a/src/web-ui/src/component-library/styles/overlay-surfaces.contract.test.ts
+++ b/src/web-ui/src/component-library/styles/overlay-surfaces.contract.test.ts
@@ -223,8 +223,6 @@ describe('overlay surface contracts', () => {
   });
 
   it.each([
-    'component-library/components/Select/Select.scss',
-    'shared/context-menu-system/components/ui/ContextMenu.scss',
     'flow_chat/components/modern/SessionTreePopover.scss',
     'flow_chat/components/ChatInput.scss',
     'flow_chat/components/ModelSelector.scss',
@@ -234,6 +232,30 @@ describe('overlay surface contracts', () => {
     expect(readSource(path)).toContain('@include surfaces.floating-surface');
   });
 
+  it('retires the legacy Select after all consumers use public selection components', () => {
+    expect(existsSync(join(SOURCE_ROOT, 'component-library/components/Select'))).toBe(false);
+    expect(readSource('component-library/components/index.ts')).not.toContain("./Select");
+    expect(readSource('component-library/preview/PreviewApp.tsx')).toContain('<Combobox');
+    const styles = readRepositorySource('design-system/packages/ui/src/components/Combobox/Combobox.module.css');
+    expect(styles).toContain('var(--bf-color-surface-panel)');
+    expect(styles).toContain('var(--bf-shadow-menu)');
+  });
+
+  it('delegates context menu surface, items and positioning to the public menu owner', () => {
+    const adapter = readSource('shared/context-menu-system/components/ui/ContextMenu.tsx');
+    const menu = readRepositorySource('design-system/packages/ui/src/components/Menu/MenuPopover.tsx');
+    const styles = readRepositorySource('design-system/packages/ui/src/components/Menu/Menu.module.css');
+    expect(adapter).toContain('<MenuPopover');
+    expect(adapter).toContain('portalContainer={getAppearanceOverlayHost}');
+    expect(adapter).not.toContain('ContextMenu.scss');
+    expect(menu).toContain('parts?.root ?? Menu');
+    expect(menu).toContain('parts?.item ?? MenuItem');
+    expect(menu).toContain('useAnchoredLayer');
+    expect(styles).toContain('var(--bf-shadow-menu)');
+    expect(styles).toContain('var(--bf-color-surface-panel)');
+    expect(existsSync(join(SOURCE_ROOT, 'shared/context-menu-system/components/ui/ContextMenu.scss'))).toBe(false);
+  });
+
   it.each([
     'app/components/AgentCompanionDesktopPet/AgentCompanionDesktopPet.scss',
     'app/layout/AppLayout.scss',
diff --git a/src/web-ui/src/flow_chat/components/overlayClippingContract.test.ts b/src/web-ui/src/flow_chat/components/overlayClippingContract.test.ts
index 50f16c2021..c4d1b5cea0 100644
--- a/src/web-ui/src/flow_chat/components/overlayClippingContract.test.ts
+++ b/src/web-ui/src/flow_chat/components/overlayClippingContract.test.ts
@@ -8,7 +8,6 @@ function readSource(relativePath: string): string {
 }
 
 const ANCHORED_OVERLAYS = [
-  { name: 'shared Select', path: '../../component-library/components/Select/Select.tsx' },
   { name: 'chat input pickers', path: './ChatInput.tsx' },
   { name: 'file mention picker', path: './FileMentionPicker.tsx' },
   { name: 'permission menu', path: './ChatInputWorkspaceStrip.tsx' },
@@ -26,6 +25,21 @@ const ANCHORED_OVERLAYS = [
   { name: 'navigation footer menu', path: '../../app/components/NavPanel/components/PersistentFooterActions.tsx' },
 ];
 
+describe('shared Combobox clipping contract', () => {
+  it('uses the public portal positioner and the product overlay host', () => {
+    const source = readSource('../../../../../design-system/packages/ui/src/components/Combobox/Combobox.tsx');
+    const positioner = readSource('../../../../../design-system/packages/ui/src/internal/useAnchoredLayer.ts');
+    const app = readSource('../../app/App.tsx');
+    expect(source).toContain('createPortal');
+    expect(source).toContain('resolveLayerPortal');
+    expect(source).toContain('useAnchoredLayer');
+    expect(positioner).toContain('getBoundingClientRect');
+    expect(positioner).toContain('view.addEventListener("scroll", update, true)');
+    expect(app).toContain('ComboboxProvider');
+    expect(app).toContain('portalContainer={getAppearanceOverlayHost}');
+  });
+});
+
 describe.each(ANCHORED_OVERLAYS)('$name clipping contract', ({ path }) => {
   const source = readSource(path);
 
diff --git a/src/web-ui/src/infrastructure/appearance/compiler/AppearanceCompiler.test.ts b/src/web-ui/src/infrastructure/appearance/compiler/AppearanceCompiler.test.ts
index ee79a5b7fb..ac36e2ae8e 100644
--- a/src/web-ui/src/infrastructure/appearance/compiler/AppearanceCompiler.test.ts
+++ b/src/web-ui/src/infrastructure/appearance/compiler/AppearanceCompiler.test.ts
@@ -178,16 +178,23 @@ describe('AppearanceCompiler', () => {
       components: {
         button: { parts: { root: { base: { opacity: visible } } } },
         switch: { parts: { root: { base: { opacity: visible } } } },
+        select: { parts: { dropdown: { base: { opacity: visible } } } },
         card: { parts: { root: { base: { opacity: visible } } } },
       },
     };
 
+    const original = JSON.stringify(pkg);
     const snapshot = new AppearanceCompiler(createDefaultAppearanceRegistry()).compile(pkg, 1);
     expect(snapshot.cssText).toContain('[data-bf-component="card"][data-bf-part="root"]');
     expect(snapshot.cssText).not.toContain('[data-bf-component="button"]');
     expect(snapshot.cssText).not.toContain('[data-bf-component="switch"]');
     expect(snapshot.components).not.toHaveProperty('button');
     expect(snapshot.components).not.toHaveProperty('switch');
+    expect(snapshot.components).not.toHaveProperty('select');
+    expect(JSON.stringify(pkg)).toBe(original);
+    const roundTrip = new AppearanceCompiler(createDefaultAppearanceRegistry()).compile(JSON.parse(original), 2);
+    expect(roundTrip.components).not.toHaveProperty('select');
+    expect(roundTrip.components).toHaveProperty('card');
   });
 
   it('compiles canonical Settings surface ids', () => {
diff --git a/src/web-ui/src/infrastructure/appearance/registry/defaultAppearanceRegistry.ts b/src/web-ui/src/infrastructure/appearance/registry/defaultAppearanceRegistry.ts
index 2bb38f3026..78b8c529be 100644
--- a/src/web-ui/src/infrastructure/appearance/registry/defaultAppearanceRegistry.ts
+++ b/src/web-ui/src/infrastructure/appearance/registry/defaultAppearanceRegistry.ts
@@ -1,7 +1,6 @@
 import { cardAppearanceDescriptor } from '@/component-library/components/Card/appearance';
 import { tooltipAppearanceDescriptor } from '@/component-library/components/Tooltip/appearance';
 import { popupCloseButtonAppearanceDescriptor } from '@/component-library/components/PopupCloseButton/appearance';
-import { selectAppearanceDescriptor } from '@/component-library/components/Select/appearance';
 import { codeEditorAppearanceDescriptor } from '@/component-library/components/CodeEditor/appearance';
 import { configPageAppearanceDescriptor } from '@/component-library/components/ConfigPage/appearance';
 import { confirmDialogAppearanceDescriptor } from '@/infrastructure/confirm-dialog';
@@ -261,7 +260,6 @@ export function createDefaultAppearanceRegistry(): AppearanceRegistry {
     .registerComponent(cardAppearanceDescriptor)
     .registerComponent(tooltipAppearanceDescriptor)
     .registerComponent(popupCloseButtonAppearanceDescriptor)
-    .registerComponent(selectAppearanceDescriptor)
     .registerComponent(codeEditorAppearanceDescriptor)
     .registerComponent(configPageAppearanceDescriptor)
     .registerComponent(confirmDialogAppearanceDescriptor)
diff --git a/src/web-ui/src/infrastructure/appearance/schema/migrateAppearancePackage.ts b/src/web-ui/src/infrastructure/appearance/schema/migrateAppearancePackage.ts
index 44765f8e36..7149d47515 100644
--- a/src/web-ui/src/infrastructure/appearance/schema/migrateAppearancePackage.ts
+++ b/src/web-ui/src/infrastructure/appearance/schema/migrateAppearancePackage.ts
@@ -23,7 +23,7 @@ const RETIRED_APPEARANCE_SETTINGS_PARTS = new Set([
   'packageEmpty',
 ]);
 
-const RETIRED_COMPONENT_SURFACE_IDS = new Set(['button', 'switch']);
+const RETIRED_COMPONENT_SURFACE_IDS = new Set(['button', 'switch', 'select']);
 
 const RETIRED_COMPONENT_PARTS: Readonly<Record<string, ReadonlySet<string>>> = {
   'assistant-card': new Set(['configure', 'newSession']),
diff --git a/src/web-ui/src/infrastructure/config/components/AppearanceSettingsPage.scss b/src/web-ui/src/infrastructure/config/components/AppearanceSettingsPage.scss
index c6d39765d7..6ce29a7cb3 100644
--- a/src/web-ui/src/infrastructure/config/components/AppearanceSettingsPage.scss
+++ b/src/web-ui/src/infrastructure/config/components/AppearanceSettingsPage.scss
@@ -742,7 +742,7 @@
     margin-bottom: $size-gap-4;
 
     > .search,
-    > .select {
+    > :is([data-bf-component='combobox'], [data-bf-component='select']) {
       width: 100%;
       min-width: 0;
     }
diff --git a/src/web-ui/src/infrastructure/config/components/AppearanceSettingsPage.test.tsx b/src/web-ui/src/infrastructure/config/components/AppearanceSettingsPage.test.tsx
index 2de8901798..d69bf4aecb 100644
--- a/src/web-ui/src/infrastructure/config/components/AppearanceSettingsPage.test.tsx
+++ b/src/web-ui/src/infrastructure/config/components/AppearanceSettingsPage.test.tsx
@@ -11,7 +11,11 @@ vi.mock('react-i18next', () => ({
   }),
 }));
 
-vi.mock('@bitfun/ui', () => ({
+vi.mock('@bitfun/ui', async (importOriginal) => ({
+  ...await importOriginal<typeof import('@bitfun/ui')>(),
+  Combobox: ({ triggerTestId }: { triggerTestId?: string }) => (
+    <button type="button" data-testid={triggerTestId} />
+  ),
   ScrollArea: ({ children, ...props }: React.HTMLAttributes<HTMLDivElement>) => <div {...props}>{children}</div>,
   FormSection: ({ children, ...props }: React.HTMLAttributes<HTMLElement>) => <section {...props}>{children}</section>,
   FieldGroup: ({ children, ...props }: React.HTMLAttributes<HTMLDivElement>) => <div {...props}>{children}</div>,
diff --git a/src/web-ui/src/infrastructure/config/components/AppearanceSettingsPage.tsx b/src/web-ui/src/infrastructure/config/components/AppearanceSettingsPage.tsx
index d5a176f7aa..1db8595861 100644
--- a/src/web-ui/src/infrastructure/config/components/AppearanceSettingsPage.tsx
+++ b/src/web-ui/src/infrastructure/config/components/AppearanceSettingsPage.tsx
@@ -1,8 +1,9 @@
+import { Combobox } from '@bitfun/ui';
 import { Select } from '@bitfun/ui';
 import React, { useCallback, useMemo, useState } from 'react';
 import { FontPreferencePanel } from '@/infrastructure/font-preference';
 import { useTranslation } from 'react-i18next';
-import { Select as LegacySelect } from '@/component-library';
+
 import {
   SYSTEM_APPEARANCE_ID,
   getAppearancePackageValidationError,
@@ -191,7 +192,7 @@ function AppearanceSelectionSection() {
                 data-bf-component="appearance-settings"
                 data-bf-part="paletteSelect"
               >
-                <LegacySelect
+                <Combobox
                   size="small"
                   value={selectedAppearanceId}
                   onChange={(value) => handleAppearanceChange(value as string)}
diff --git a/src/web-ui/src/infrastructure/config/components/ApplicationSettingsPages.tsx b/src/web-ui/src/infrastructure/config/components/ApplicationSettingsPages.tsx
index beb99f3556..64c2b315d8 100644
--- a/src/web-ui/src/infrastructure/config/components/ApplicationSettingsPages.tsx
+++ b/src/web-ui/src/infrastructure/config/components/ApplicationSettingsPages.tsx
@@ -1,13 +1,9 @@
+import { Combobox, type ComboboxOption } from '@bitfun/ui';
 import { Alert, Button, Select, Switch, Tooltip } from '@bitfun/ui';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Archive, FolderOpen } from 'lucide-react';
-import {
-  Select as LegacySelect,
-  type SelectOption,
-  ConfigPageLoading,
-  ConfigPageMessage,
-} from '@/component-library';
+import { ConfigPageLoading, ConfigPageMessage } from '@/component-library';
 import { configAPI, workspaceAPI } from '@/infrastructure/api';
 import { systemAPI } from '@/infrastructure/api/service-api/SystemAPI';
 import type { CloseBehavior } from '@/infrastructure/api/service-api/SystemAPI';
@@ -36,7 +32,7 @@ import './ApplicationSettingsPages.scss';
 
 const log = createLogger('ApplicationSettings');
 
-type TerminalShellOption = SelectOption & {
+type TerminalShellOption = ComboboxOption & {
   shell?: ShellInfo;
 };
 
@@ -674,7 +670,7 @@ function TerminalSection() {
     </div>
   ), []);
 
-  const renderShellOption = useCallback((option: SelectOption) => {
+  const renderShellOption = useCallback((option: ComboboxOption) => {
     const shellOption = option as TerminalShellOption;
     if (!shellOption.shell) {
       return <div className="bitfun-terminal-config__shell-option-name" data-bf-component="application-settings" data-bf-part="shellOption">{option.label}</div>;
@@ -694,7 +690,7 @@ function TerminalSection() {
     );
   }, [renderShellDetails]);
 
-  const renderShellValue = useCallback((option?: SelectOption | SelectOption[]) => {
+  const renderShellValue = useCallback((option?: ComboboxOption | ComboboxOption[]) => {
     const selectedOption = Array.isArray(option) ? option[0] : option;
     const shell = (selectedOption as TerminalShellOption | undefined)?.shell;
     if (!shell) return null;
@@ -742,7 +738,7 @@ function TerminalSection() {
             align="center"
           >
             {availableShells.length > 0 ? (
-              <LegacySelect
+              <Combobox
                 value={selectedShellValue}
                 onChange={(v) => handleShellChange(v as string)}
                 options={shellOptions}
diff --git a/src/web-ui/src/infrastructure/config/components/DefaultModelConfig.tsx b/src/web-ui/src/infrastructure/config/components/DefaultModelConfig.tsx
index e752c5ad5a..46a3480244 100644
--- a/src/web-ui/src/infrastructure/config/components/DefaultModelConfig.tsx
+++ b/src/web-ui/src/infrastructure/config/components/DefaultModelConfig.tsx
@@ -1,9 +1,10 @@
+import { Combobox } from '@bitfun/ui';
  
 
 import React, { useState, useEffect, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Layers } from 'lucide-react';
-import { Select, CubeLoading } from '@/component-library';
+import { CubeLoading } from '@/component-library';
 import { notificationService } from '@/shared/notification-system';
 import { configManager } from '../services/ConfigManager';
 import type {
@@ -182,7 +183,7 @@ export const DefaultModelConfig: React.FC = () => {
         description={t('core.primary.description')}
         align="center"
       >
-        <Select
+        <Combobox
           data-bf-component="default-model-config"
           data-bf-part="primaryModel"
           value={defaultModels.primary || ''}
@@ -203,7 +204,7 @@ export const DefaultModelConfig: React.FC = () => {
         description={t('core.fast.description')}
         align="center"
       >
-        <Select
+        <Combobox
           data-bf-component="default-model-config"
           data-bf-part="lightweightModel"
           value={defaultModels.fast || ''}
@@ -226,7 +227,7 @@ export const DefaultModelConfig: React.FC = () => {
         description={t('optional.capabilities.image_understanding.description')}
         align="center"
       >
-        <Select
+        <Combobox
           data-bf-component="default-model-config"
           data-bf-part="embeddingModel"
           value={defaultModels.image_understanding || ''}
@@ -249,7 +250,7 @@ export const DefaultModelConfig: React.FC = () => {
         description={t('optional.capabilities.speech_recognition.description')}
         align="center"
       >
-        <Select
+        <Combobox
           value={defaultModels.speech_recognition || ''}
           onChange={(value) => handleDefaultModelChange('speech_recognition', normalizeSelectValue(value))}
           placeholder={t('optional.notSet')}
diff --git a/src/web-ui/src/infrastructure/config/components/ExternalSourcesConfig.scss b/src/web-ui/src/infrastructure/config/components/ExternalSourcesConfig.scss
index 6be000d4f3..fb4e3559c5 100644
--- a/src/web-ui/src/infrastructure/config/components/ExternalSourcesConfig.scss
+++ b/src/web-ui/src/infrastructure/config/components/ExternalSourcesConfig.scss
@@ -315,8 +315,8 @@
    * Ecosystem mode and per-capability access are the same control at two
    * levels — one width so they read as a single column of dropdowns.
    */
-  &__policy-actions .select,
-  &__capability-row .select {
+  &__policy-actions :is([data-bf-component='combobox'], [data-bf-component='select']),
+  &__capability-row :is([data-bf-component='combobox'], [data-bf-component='select']) {
     min-width: 142px;
   }
 
@@ -744,8 +744,8 @@
       width: 100%;
     }
 
-    &__policy-actions .select,
-    &__capability-row .select {
+    &__policy-actions :is([data-bf-component='combobox'], [data-bf-component='select']),
+    &__capability-row :is([data-bf-component='combobox'], [data-bf-component='select']) {
       width: 100%;
     }
 
diff --git a/src/web-ui/src/infrastructure/config/components/ExternalSourcesConfig.tsx b/src/web-ui/src/infrastructure/config/components/ExternalSourcesConfig.tsx
index 99a1cdb605..39d851fd5a 100644
--- a/src/web-ui/src/infrastructure/config/components/ExternalSourcesConfig.tsx
+++ b/src/web-ui/src/infrastructure/config/components/ExternalSourcesConfig.tsx
@@ -1,9 +1,10 @@
+import { Combobox } from '@bitfun/ui';
 import { Button, ConfirmDialog, Icon, Select, Switch, Tooltip } from '@bitfun/ui';
 import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import type { TFunction } from 'i18next';
 import { useTranslation } from 'react-i18next';
 import { AlertTriangle, CircleDashed, FolderKanban, MinusCircle, RefreshCw, ShieldCheck } from 'lucide-react';
-import { ConfigPageLoading, Select as LegacySelect } from '@/component-library';
+import { ConfigPageLoading } from '@/component-library';
 
 import { useCurrentWorkspace } from '@/infrastructure/contexts/WorkspaceContext';
 import { i18nService } from '@/infrastructure/i18n';
@@ -2712,7 +2713,7 @@ const ExternalSourcesConfig: React.FC<ExternalSourcesConfigProps> = ({
                       align="center"
                     >
                       {canEdit ? (
-                        <LegacySelect
+                        <Combobox
                           size="small"
                           value={selectedKey}
                           triggerAriaLabel={t('agentModelBindings.selectLabel', {
diff --git a/src/web-ui/src/infrastructure/config/components/ModelSelectPresentation.scss b/src/web-ui/src/infrastructure/config/components/ModelSelectPresentation.scss
index 3d0ed6e730..97b1e3e6b8 100644
--- a/src/web-ui/src/infrastructure/config/components/ModelSelectPresentation.scss
+++ b/src/web-ui/src/infrastructure/config/components/ModelSelectPresentation.scss
@@ -2,15 +2,15 @@
 
 .model-select-presentation {
   &__select {
-    .select__trigger {
+    [data-bf-component='combobox'] [data-bf-part='trigger'] {
       min-height: 48px;
       align-items: flex-start;
       padding-top: 8px;
       padding-bottom: 8px;
     }
 
-    .select__placeholder,
-    .select__suffix {
+    [data-bf-part='value'][data-placeholder='true'],
+    [data-bf-part='indicator'] {
       align-self: center;
     }
 
@@ -74,7 +74,7 @@
   }
 }
 
-.model-select-presentation__dropdown .select__option {
+.model-select-presentation__dropdown [data-bf-part='option'] {
   padding: 8px 10px;
   border-radius: 6px;
 }
diff --git a/src/web-ui/src/infrastructure/config/components/ModelSelectPresentation.tsx b/src/web-ui/src/infrastructure/config/components/ModelSelectPresentation.tsx
index 21aa708f2f..e683f7e059 100644
--- a/src/web-ui/src/infrastructure/config/components/ModelSelectPresentation.tsx
+++ b/src/web-ui/src/infrastructure/config/components/ModelSelectPresentation.tsx
@@ -1,5 +1,5 @@
 import { useCallback } from 'react';
-import { type SelectOption } from '@/component-library';
+import { type ComboboxOption as SelectOption } from '@bitfun/ui';
 import { getProviderDisplayName } from '../services/modelConfigs';
 import type { AIModelConfig } from '../types';
 import './ModelSelectPresentation.scss';
diff --git a/src/web-ui/src/infrastructure/config/components/ModelSettingsPage.scss b/src/web-ui/src/infrastructure/config/components/ModelSettingsPage.scss
index c331db218a..36f8e6ea75 100644
--- a/src/web-ui/src/infrastructure/config/components/ModelSettingsPage.scss
+++ b/src/web-ui/src/infrastructure/config/components/ModelSettingsPage.scss
@@ -1145,7 +1145,7 @@
   &__form,
   &__form--modal {
     [data-bf-component='input'],
-    .select__trigger,
+    [data-bf-component='combobox'] [data-bf-part='trigger'],
     [data-bf-component='number-input'] > [data-bf-part='control'],
     .resolved-url__value {
       min-height: 35px;
@@ -1154,13 +1154,13 @@
     }
 
     [data-bf-component='input'],
-    .select__trigger,
+    [data-bf-component='combobox'] [data-bf-part='trigger'],
     .resolved-url__value {
       padding-inline: 12px;
     }
 
     [data-bf-component='input'],
-    .select,
+    :is([data-bf-component='combobox'], [data-bf-component='select']),
     [data-bf-component='number-input'],
     .bitfun-model-settings__resolved-url {
       width: 100%;
@@ -1169,9 +1169,9 @@
 
     [data-bf-component='input'],
     [data-bf-component='input'] input,
-    .select__value,
-    .select__placeholder,
-    .select__value-label,
+    [data-bf-component='combobox'] [data-bf-part='value'],
+    [data-bf-part='value'][data-placeholder='true'],
+    [data-bf-component='combobox'] [data-bf-part='value'],
     .resolved-url__value,
     .bitfun-model-settings__selected-models-empty {
       font-size: 13px;
@@ -1187,7 +1187,7 @@
     width: 100%;
     align-items: stretch;
 
-    > .select,
+    > :is([data-bf-component='combobox'], [data-bf-component='select']),
     > [data-bf-component='input'] {
       width: 100%;
       min-width: 0;
@@ -1198,40 +1198,40 @@
       align-self: flex-end;
     }
 
-    .select--multiple {
-      .select__trigger {
+    [data-bf-component='combobox'][data-multiple='true'] {
+      [data-bf-part='trigger'] {
         flex-wrap: nowrap;
         overflow: hidden;
       }
 
-      .select__tags {
+      [data-bf-part='tags'] {
         flex-wrap: nowrap;
         min-width: 0;
         overflow: hidden;
       }
 
-      .select__tag {
+      [data-bf-part='tag'] {
         background: var(--bf-appearance-token-element-bg-subtle);
         border: none;
         color: var(--bf-appearance-token-color-text-secondary);
         max-width: none;
       }
 
-      .select__tag:hover {
+      [data-bf-part='tag']:hover {
         background: var(--bf-appearance-token-element-bg-medium);
         border-color: transparent;
       }
 
-      .select__tag-label {
+      [data-bf-part='tag'] > span {
         overflow: visible;
         text-overflow: clip;
       }
 
-      .select__tag-remove {
+      [data-bf-part='tag'] button {
         color: var(--bf-appearance-token-color-text-muted);
       }
 
-      .select__tag-remove:hover {
+      [data-bf-part='tag'] button:hover {
         background: var(--bf-appearance-token-element-bg-base);
         color: var(--bf-appearance-token-color-text-primary);
       }
@@ -1261,33 +1261,6 @@
     white-space: nowrap;
   }
 
-  &__model-picker-select {
-    &--has-value {
-      .select__arrow {
-        width: 12px;
-        height: 12px;
-        color: var(--bf-appearance-token-color-text-muted);
-        transform: none;
-
-        &::before {
-          content: '+';
-          font-size: 16px;
-          line-height: 1;
-          font-weight: 400;
-        }
-
-        svg {
-          display: none;
-        }
-
-        &.select__arrow--open {
-          transform: none;
-          color: var(--bf-appearance-token-color-text-muted);
-        }
-      }
-    }
-  }
-
   &__manual-model-entry {
     display: grid;
     grid-template-columns: minmax(0, 1fr) auto;
@@ -1451,7 +1424,7 @@
     padding-top: $size-gap-2;
     border-top: 1px dashed var(--bf-appearance-token-border-subtle);
 
-    .select__trigger,
+    [data-bf-component='combobox'] [data-bf-part='trigger'],
     [data-bf-component='number-input'] > [data-bf-part='control'] {
       min-height: 32px;
       border-color: color-mix(
@@ -1461,9 +1434,9 @@
       );
     }
 
-    .select__value,
-    .select__placeholder,
-    .select__value-label,
+    [data-bf-component='combobox'] [data-bf-part='value'],
+    [data-bf-part='value'][data-placeholder='true'],
+    [data-bf-component='combobox'] [data-bf-part='value'],
     [data-bf-component='number-input'] [data-bf-part='input'] {
       font-size: 12px;
       line-height: 1.4;
@@ -1486,7 +1459,7 @@
       line-height: 1.3;
     }
 
-    > .select,
+    > :is([data-bf-component='combobox'], [data-bf-component='select']),
     [data-bf-component='number-input'] {
       width: 100%;
       min-width: 0;
@@ -2057,11 +2030,11 @@
   min-width: min(176px, calc(100vw - 16px));
   max-width: min(240px, calc(100vw - 16px));
 
-  .select__option-text {
+  [data-bf-part='option']-text {
     min-width: max-content;
   }
 
-  .select__option-label {
+  [data-bf-part='option']-label {
     overflow: visible;
     text-overflow: clip;
   }
diff --git a/src/web-ui/src/infrastructure/config/components/ModelSettingsPage.tsx b/src/web-ui/src/infrastructure/config/components/ModelSettingsPage.tsx
index e383a4258d..205eb6c7db 100644
--- a/src/web-ui/src/infrastructure/config/components/ModelSettingsPage.tsx
+++ b/src/web-ui/src/infrastructure/config/components/ModelSettingsPage.tsx
@@ -1,8 +1,8 @@
-import { Button, Card, Icon, IconButton, Input, Modal, SearchField, Select, Switch, Tooltip, ScrollArea } from '@bitfun/ui';
+import { Combobox, type ComboboxOption } from '@bitfun/ui';
+import { Button, Card, Icon, IconButton, Input, Modal, NumberInput, SearchField, Select, Switch, Textarea, Tooltip, ScrollArea } from '@bitfun/ui';
 import React, { useState, useEffect, useMemo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Trash2, Wifi, Loader, RefreshCw, AlertTriangle, EyeOff, ChevronUp, Brain, FolderOpen } from 'lucide-react';
-import { Select as LegacySelect, NumberInput, Textarea, type SelectOption } from '@/component-library';
 import {
   AIModelConfig as AIModelConfigType, 
   ProxyConfig, 
@@ -233,7 +233,7 @@ function dedupeSelectedModelDraftsByModelName(drafts: SelectedModelDraft[]): Sel
 
 /**
  * Compute the stored request URL from a base URL and provider format.
- * For gemini, stores the bare base (no /v1beta/models/... suffix) �
+ * For gemini, stores the bare base (no /v1beta/models/... suffix) �
  * the backend dynamically appends /v1beta/models/{model}:streamGenerateContent?alt=sse.
  */
 function resolveRequestUrl(baseUrl: string, provider: string, _modelName = ''): string {
@@ -455,7 +455,7 @@ const ModelSettingsPage: React.FC = () => {
     [requestFormatOptions]
   );
 
-  const categoryOptions = useMemo<SelectOption[]>(
+  const categoryOptions = useMemo<ComboboxOption[]>(
     () => [
       { label: t('category.general_chat'), value: 'general_chat' },
       { label: t('category.multimodal'), value: 'multimodal' },
@@ -2080,7 +2080,7 @@ const ModelSettingsPage: React.FC = () => {
           || normalizedEndpoint.startsWith(`${normalizedEditingBaseUrl}/`)
           || normalizedEditingBaseUrl.startsWith(`${normalizedEndpoint}/`);
       })?.id;
-    const catalogModelOptions: SelectOption[] = (catalogProvider?.models || [])
+    const catalogModelOptions: ComboboxOption[] = (catalogProvider?.models || [])
       .filter(model => (
         !selectedEndpointId
         || !model.endpoint_ids?.length
@@ -2097,7 +2097,7 @@ const ModelSettingsPage: React.FC = () => {
           'data-model-source': model.source,
         },
       }));
-    const fetchedOrPresetModelOptions: SelectOption[] = remoteModelOptions.length > 0
+    const fetchedOrPresetModelOptions: ComboboxOption[] = remoteModelOptions.length > 0
       ? remoteModelOptions.map(model => ({
           label: model.display_name || model.id,
           value: model.id,
@@ -2119,7 +2119,7 @@ const ModelSettingsPage: React.FC = () => {
             'data-model-name': model,
           },
         }));
-    const selectedModelOptions: SelectOption[] = selectedModelDrafts.map(draft => ({
+    const selectedModelOptions: ComboboxOption[] = selectedModelDrafts.map(draft => ({
       label: draft.modelName,
       value: draft.modelName,
       testId: 'settings-model-option',
@@ -2128,7 +2128,7 @@ const ModelSettingsPage: React.FC = () => {
         'data-model-name': draft.modelName,
       },
     }));
-    const availableModelOptions: SelectOption[] = Array.from(
+    const availableModelOptions: ComboboxOption[] = Array.from(
       new Map(
         [...fetchedOrPresetModelOptions, ...selectedModelOptions]
           .map(option => [String(option.value), option] as const)
@@ -2146,7 +2146,7 @@ const ModelSettingsPage: React.FC = () => {
               ? t('providerSelection.noPresetModels')
               : null;
     const selectedModelValues = selectedModelDrafts.map(draft => draft.modelName);
-    const renderModelPickerValue = (option?: SelectOption | SelectOption[]) => {
+    const renderModelPickerValue = (option?: ComboboxOption | ComboboxOption[]) => {
       const selectedOptions = Array.isArray(option) ? option : option ? [option] : [];
 
       if (selectedOptions.length === 0) {
@@ -2306,9 +2306,9 @@ const ModelSettingsPage: React.FC = () => {
                     <div className="bitfun-model-settings__selected-model-head-bottom">
                       <span className="bitfun-model-settings__selected-model-summary">
                         {categoryLabel}
-                        {' � '}
+                        {' � '}
                         {formatTokenCountShort(draft.contextWindow)} ctx
-                        {' � '}
+                        {' � '}
                         {formatReasoningSummary(draft, reasoningProjection)}
                       </span>
                     </div>
@@ -2318,7 +2318,7 @@ const ModelSettingsPage: React.FC = () => {
                   <div className="bitfun-model-settings__selected-model-grid">
                     <div className="bitfun-model-settings__selected-model-field">
                       <span>{t('category.label')}</span>
-                      <LegacySelect
+                      <Combobox
                         value={draft.category}
                         onChange={(value) => updateModelDraft(draft.modelName, { category: value as ModelCategory })}
                         options={categoryOptions}
@@ -2411,7 +2411,7 @@ const ModelSettingsPage: React.FC = () => {
         ? `subscription:opencode:${selectedOpenCodePlan || 'zen'}`
         : `subscription:${selectedSubscriptionProvider || 'codex'}`
       : 'api_key';
-    const authOptions: SelectOption[] = [
+    const authOptions: ComboboxOption[] = [
       { value: 'api_key', label: t('subscriptionAuth.options.apiKey') },
       { value: 'subscription:codex', label: t('subscriptionAuth.options.codex') },
       { value: 'subscription:antigravity', label: t('subscriptionAuth.options.antigravity') },
@@ -2525,7 +2525,7 @@ const ModelSettingsPage: React.FC = () => {
                 <ConfigPageRow label={t('form.baseUrl')} align="center" wide>
                   <div className="bitfun-model-settings__control-stack">
                     {currentTemplate?.baseUrlOptions && currentTemplate.baseUrlOptions.length > 0 && (
-                      <LegacySelect
+                      <Combobox
                         value={currentTemplate.baseUrlOptions.some(opt => opt.url === editingConfig.base_url) ? editingConfig.base_url : ''}
                         onChange={(value) => {
                           const selectedOption = currentTemplate.baseUrlOptions!.find(opt => opt.url === value);
@@ -2539,7 +2539,7 @@ const ModelSettingsPage: React.FC = () => {
                           }));
                         }}
                         placeholder={t('form.baseUrl')}
-                        options={currentTemplate.baseUrlOptions.map(opt => ({ label: opt.url, value: opt.url, description: `${opt.format.toUpperCase()} � ${opt.note}` }))}
+                        options={currentTemplate.baseUrlOptions.map(opt => ({ label: opt.url, value: opt.url, description: `${opt.format.toUpperCase()} � ${opt.note}` }))}
                         size="small"
                       />
                     )}
@@ -2593,7 +2593,7 @@ const ModelSettingsPage: React.FC = () => {
                 <ConfigPageRow label={`${t('form.modelSelection')} *`} wide multiline>
                   <div className="bitfun-model-settings__control-stack">
                     <div className="bitfun-model-settings__model-picker-row">
-                      <LegacySelect
+                      <Combobox
                         data-testid="settings-model-select"
                         triggerTestId="settings-model-select-btn"
                         dropdownTestId="settings-model-select-menu"
@@ -2614,6 +2614,7 @@ const ModelSettingsPage: React.FC = () => {
                         size="small"
                         onOpenChange={handleModelSelectionOpenChange}
                         renderValue={renderModelPickerValue}
+                        indicator={selectedModelValues.length > 0 ? <Icon name="plus" size="sm" /> : undefined}
                         className={selectedModelValues.length > 0 ? 'bitfun-model-settings__model-picker-select bitfun-model-settings__model-picker-select--has-value' : 'bitfun-model-settings__model-picker-select'}
                       />
                     </div>
@@ -2711,7 +2712,7 @@ const ModelSettingsPage: React.FC = () => {
                 <ConfigPageRow label={`${t('form.modelSelection')} *`} wide multiline>
                   <div className="bitfun-model-settings__control-stack">
                     <div className="bitfun-model-settings__model-picker-row">
-                      <LegacySelect
+                      <Combobox
                         data-testid="settings-model-select"
                         triggerTestId="settings-model-select-btn"
                         dropdownTestId="settings-model-select-menu"
@@ -3652,7 +3653,7 @@ const ModelSettingsPage: React.FC = () => {
           </ConfigPageRow>
           <ConfigPageRow label={t('modelsDevCatalog.cachePath')} align="center" wide>
             <div className="bitfun-model-settings__catalog-path">
-              <code title={modelsDevStatus?.cache_path}>{modelsDevStatus?.cache_path || '�'}</code>
+              <code title={modelsDevStatus?.cache_path}>{modelsDevStatus?.cache_path || '�'}</code>
               <Tooltip content={t('modelsDevCatalog.reveal')}>
                 <IconButton
                   aria-label={t('modelsDevCatalog.reveal')}
@@ -3670,7 +3671,7 @@ const ModelSettingsPage: React.FC = () => {
           </ConfigPageRow>
           <ConfigPageRow label={t('modelsDevCatalog.revision')} align="center">
             <code className="bitfun-model-settings__catalog-revision" title={modelsDevStatus?.revision}>
-              {modelsDevStatus?.revision ? `${modelsDevStatus.revision.slice(0, 12)}�` : '�'}
+              {modelsDevStatus?.revision ? `${modelsDevStatus.revision.slice(0, 12)}�` : '�'}
             </code>
           </ConfigPageRow>
           <div className="bitfun-model-settings__catalog-offline-help" role="note">
@@ -3746,7 +3747,7 @@ const ModelSettingsPage: React.FC = () => {
             <ScrollArea className="bitfun-model-settings__subscription-logout-list">
               <ul>
                 {subscriptionLogoutRequest.affectedModels.map((model) => (
-                  <li key={model.id}>{model.name} � {model.model_name}</li>
+                  <li key={model.id}>{model.name} � {model.model_name}</li>
                 ))}
               </ul>
             </ScrollArea>
diff --git a/src/web-ui/src/infrastructure/config/components/ReasoningPresetEditor.scss b/src/web-ui/src/infrastructure/config/components/ReasoningPresetEditor.scss
index 879367844b..778f90024c 100644
--- a/src/web-ui/src/infrastructure/config/components/ReasoningPresetEditor.scss
+++ b/src/web-ui/src/infrastructure/config/components/ReasoningPresetEditor.scss
@@ -32,7 +32,7 @@
     gap: $size-gap-3;
     min-width: 0;
 
-    > .select {
+    > :is([data-bf-component='combobox'], [data-bf-component='select']) {
       flex: 1 1 auto;
       min-width: 0;
     }
@@ -427,13 +427,13 @@
     min-width: 0;
   }
 
-  &__action > .select,
+  &__action > :is([data-bf-component='combobox'], [data-bf-component='select']),
   &__action > [data-bf-component='input'],
   &__action > [data-bf-component='number-input'] {
     min-width: 0;
   }
 
-  &__action > .select:first-child {
+  &__action > :is([data-bf-component='combobox'], [data-bf-component='select']):first-child {
     flex: 0 0 190px;
     width: 190px;
   }
@@ -450,7 +450,7 @@
     gap: $size-gap-1;
     min-width: 0;
 
-    > .select {
+    > :is([data-bf-component='combobox'], [data-bf-component='select']) {
       flex: 1 1 auto;
       min-width: 0;
     }
@@ -529,7 +529,7 @@
       flex-basis: auto;
     }
 
-    &__action > .select:first-child,
+    &__action > :is([data-bf-component='combobox'], [data-bf-component='select']):first-child,
     &__action > [data-bf-component='input'],
     &__action > [data-bf-component='number-input'],
     &__effort-control,
diff --git a/src/web-ui/src/infrastructure/config/components/ReasoningPresetEditor.test.tsx b/src/web-ui/src/infrastructure/config/components/ReasoningPresetEditor.test.tsx
index f3b7179703..c2616cddda 100644
--- a/src/web-ui/src/infrastructure/config/components/ReasoningPresetEditor.test.tsx
+++ b/src/web-ui/src/infrastructure/config/components/ReasoningPresetEditor.test.tsx
@@ -70,6 +70,18 @@ vi.mock('@bitfun/ui', () => ({
     );
   },
   Textarea: () => <textarea />,
+  Combobox: (props: SelectSpyProps) => {
+    const label = props.triggerAriaLabel ?? '';
+    selectProps[label] = props;
+    return (
+      <select aria-label={label} value={typeof props.value === 'string' ? props.value : ''}
+        disabled={props.disabled} onChange={(event) => props.onChange?.(event.target.value)}>
+        {props.options?.map(option => (
+          <option key={String(option.value)} value={String(option.value)}>{option.label}</option>
+        ))}
+      </select>
+    );
+  },
 }));
 
 vi.mock('@/component-library', () => ({
diff --git a/src/web-ui/src/infrastructure/config/components/ReasoningPresetEditor.tsx b/src/web-ui/src/infrastructure/config/components/ReasoningPresetEditor.tsx
index f1040fae04..415424b83b 100644
--- a/src/web-ui/src/infrastructure/config/components/ReasoningPresetEditor.tsx
+++ b/src/web-ui/src/infrastructure/config/components/ReasoningPresetEditor.tsx
@@ -1,3 +1,4 @@
+import { Combobox } from '@bitfun/ui';
 import { Button, Icon, IconButton, Input, NumberInput, Select, Switch, Textarea, Tooltip, type SelectOption } from '@bitfun/ui';
 import React, { useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
@@ -7,7 +8,7 @@ import {
   Trash2,
 } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
-import { Select as LegacySelect } from '@/component-library';
+
 import type {
   ReasoningCatalogProjection,
   ReasoningConfig,
@@ -358,7 +359,7 @@ export const ReasoningPresetEditor: React.FC<ReasoningPresetEditorProps> = ({
             <span className="bitfun-reasoning-preset-editor__primary-setting-label">
               {t('reasoningPresets.catalogSource')}
             </span>
-            <LegacySelect
+            <Combobox
               value={catalog.source}
               disabled={disabled}
               size="small"
@@ -511,7 +512,7 @@ export const ReasoningPresetEditor: React.FC<ReasoningPresetEditorProps> = ({
             </div>
             <div className="bitfun-reasoning-preset-editor__binding-field">
               <span>{t('reasoningPresets.catalogProvider')}</span>
-              <LegacySelect
+              <Combobox
                 size="small"
                 triggerAriaLabel={t('reasoningPresets.catalogProvider')}
                 value={catalog.provider}
@@ -532,7 +533,7 @@ export const ReasoningPresetEditor: React.FC<ReasoningPresetEditorProps> = ({
             </div>
             <div className="bitfun-reasoning-preset-editor__binding-field">
               <span>{t('reasoningPresets.catalogModel')}</span>
-              <LegacySelect
+              <Combobox
                 size="small"
                 triggerAriaLabel={t('reasoningPresets.catalogModel')}
                 value={catalog.model}
@@ -799,7 +800,7 @@ export const ReasoningPresetEditor: React.FC<ReasoningPresetEditorProps> = ({
                         />
                         {action.type === 'effort' && (
                           <div className="bitfun-reasoning-preset-editor__effort-control">
-                            <LegacySelect
+                            <Combobox
                               size="small"
                               value={action.value}
                               disabled={disabled}
diff --git a/src/web-ui/src/infrastructure/config/components/RuntimeSettingsPages.tsx b/src/web-ui/src/infrastructure/config/components/RuntimeSettingsPages.tsx
index a00275b7d0..a5001852d5 100644
--- a/src/web-ui/src/infrastructure/config/components/RuntimeSettingsPages.tsx
+++ b/src/web-ui/src/infrastructure/config/components/RuntimeSettingsPages.tsx
@@ -1,8 +1,8 @@
-import { Button, Icon, IconButton, Modal, NumberInput, Select, Switch, Tooltip, ScrollArea } from '@bitfun/ui';
+import { Button, Icon, IconButton, Modal, NumberInput, Select, Switch, Tooltip, ScrollArea, type ComboboxOption } from '@bitfun/ui';
 import React, { useState, useEffect, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { RefreshCw, Trash2 } from 'lucide-react';
-import { ConfigPageLoading, type SelectOption } from '@/component-library';
+import { ConfigPageLoading } from '@/component-library';
 import { confirmDanger } from '@/infrastructure/confirm-dialog';
 import { ConfigPageHeader, ConfigPageLayout, ConfigPageContent, ConfigPageSection, ConfigPageRow } from './common';
 import { aiExperienceConfigService, type AIExperienceSettings } from '../services/AIExperienceConfigService';
@@ -502,7 +502,7 @@ const RuntimeSettingsPage: React.FC<RuntimeSettingsPageProps> = ({ page }) => {
     }
   };
 
-  const companionPetOptions: SelectOption[] = companionPets.map(pet => {
+  const companionPetOptions: ComboboxOption[] = companionPets.map(pet => {
     const displayName = pet.source === 'preset' && pet.id === 'blue-golden'
       ? t('features.pet.presets.blueGolden.name')
       : pet.displayName;
@@ -515,7 +515,7 @@ const RuntimeSettingsPage: React.FC<RuntimeSettingsPageProps> = ({ page }) => {
     };
   });
 
-  const companionDisplayModeOptions: SelectOption[] = [
+  const companionDisplayModeOptions: ComboboxOption[] = [
     {
       value: 'desktop',
       label: t('features.pet.displayDesktop'),
@@ -528,7 +528,7 @@ const RuntimeSettingsPage: React.FC<RuntimeSettingsPageProps> = ({ page }) => {
     },
   ];
 
-  const subagentBatchExecutionPolicyOptions: SelectOption[] = [
+  const subagentBatchExecutionPolicyOptions: ComboboxOption[] = [
     {
       value: 'safe_only',
       label: tTools('config.subagentBatchPolicy.safeOnly'),
@@ -843,7 +843,7 @@ const RuntimeSettingsPage: React.FC<RuntimeSettingsPageProps> = ({ page }) => {
       : browserReady
         ? t('browserControl.readyNotConnected')
         : t('browserControl.notConnected');
-  const browserSelectOptions: SelectOption[] = browserOptions.map((option) => ({
+  const browserSelectOptions: ComboboxOption[] = browserOptions.map((option) => ({
     value: option.value,
     label: option.installed ? option.label : `${option.label} (${t('browserControl.notInstalled')})`,
     disabled: !option.installed,
diff --git a/src/web-ui/src/infrastructure/config/components/SessionTitleConfig.tsx b/src/web-ui/src/infrastructure/config/components/SessionTitleConfig.tsx
index cd86dd6507..4ed2cc2495 100644
--- a/src/web-ui/src/infrastructure/config/components/SessionTitleConfig.tsx
+++ b/src/web-ui/src/infrastructure/config/components/SessionTitleConfig.tsx
@@ -1,7 +1,8 @@
+import { Combobox } from '@bitfun/ui';
 import { Switch } from '@bitfun/ui';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Select } from '@/component-library';
+
 import { useNotification, notificationService } from '@/shared/notification-system';
 import { createLogger } from '@/shared/utils/logger';
 import { aiExperienceConfigService, type AIExperienceSettings } from '../services/AIExperienceConfigService';
@@ -174,7 +175,7 @@ export const SessionTitleConfig: React.FC = () => {
             data-bf-component="session-title-config"
             data-bf-part="modelControl"
           >
-            <Select
+            <Combobox
               size="small"
               searchable
               className="model-select-presentation__select"
diff --git a/src/web-ui/src/infrastructure/config/components/common/ConfigPageHeader.scss b/src/web-ui/src/infrastructure/config/components/common/ConfigPageHeader.scss
index 23d72dfa12..8ce47811ea 100644
--- a/src/web-ui/src/infrastructure/config/components/common/ConfigPageHeader.scss
+++ b/src/web-ui/src/infrastructure/config/components/common/ConfigPageHeader.scss
@@ -45,7 +45,8 @@
 }
 
 .bitfun-config-page-header__subtitle {
-  margin: var(--bf-appearance-token-size-gap-2) 0 0;
+  display: block;
+  margin: 0;
   font-size: var(--bf-appearance-token-font-size-lg);
   color: var(--bf-appearance-token-color-text-primary);
   line-height: 1.35;
diff --git a/src/web-ui/src/infrastructure/config/components/common/ConfigPageHeader.tsx b/src/web-ui/src/infrastructure/config/components/common/ConfigPageHeader.tsx
index a2ad19790d..9e6d53fc0d 100644
--- a/src/web-ui/src/infrastructure/config/components/common/ConfigPageHeader.tsx
+++ b/src/web-ui/src/infrastructure/config/components/common/ConfigPageHeader.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { PageHeader } from '@bitfun/ui';
 import './ConfigPageHeader.scss';
 
 export interface ConfigPageHeaderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
@@ -22,10 +23,15 @@ export const ConfigPageHeader: React.FC<ConfigPageHeaderProps> = ({
       <div className="bitfun-config-page-header__inner" data-bf-component="config" data-bf-part="pageHeaderInner">
         <div className="bitfun-config-page-header__left">
           <div className="bitfun-config-page-header__info" data-bf-component="config" data-bf-part="pageHeaderInfo">
-            <h2 className="bitfun-config-page-header__title" data-bf-component="config" data-bf-part="pageHeaderTitle">{title}</h2>
-            {subtitle ? (
-              <p className="bitfun-config-page-header__subtitle" data-bf-component="config" data-bf-part="pageHeaderSubtitle">{subtitle}</p>
-            ) : null}
+            <PageHeader
+              level={2}
+              size="lg"
+              headingClassName="bitfun-config-page-header__title"
+              title={<span data-bf-component="config" data-bf-part="pageHeaderTitle">{title}</span>}
+              description={subtitle ? (
+                <span className="bitfun-config-page-header__subtitle" data-bf-component="config" data-bf-part="pageHeaderSubtitle">{subtitle}</span>
+              ) : undefined}
+            />
           </div>
         </div>
         {extra && (
diff --git a/src/web-ui/src/infrastructure/config/components/common/ConfigPageLayout.scss b/src/web-ui/src/infrastructure/config/components/common/ConfigPageLayout.scss
index 4e0128f94c..66bb6b46c1 100644
--- a/src/web-ui/src/infrastructure/config/components/common/ConfigPageLayout.scss
+++ b/src/web-ui/src/infrastructure/config/components/common/ConfigPageLayout.scss
@@ -210,7 +210,7 @@
   justify-self: stretch;
 
   > [data-bf-component='input'],
-  > .select,
+  > :is([data-bf-component='combobox'], [data-bf-component='select']),
   > [data-bf-component='number-input'] {
     width: 100%;
     min-width: 0;
@@ -221,13 +221,13 @@
    * unstyled wrapper is a flex item, so it would shrink to content width and
    * that row's dropdown would render narrower than every other row's.
    */
-  > div:has(> .select),
+  > div:has(> :is([data-bf-component='combobox'], [data-bf-component='select'])),
   > div:has(> [data-bf-component='input']),
   > div:has(> [data-bf-component='number-input']) {
     width: 100%;
     min-width: 0;
 
-    > .select,
+    > :is([data-bf-component='combobox'], [data-bf-component='select']),
     > [data-bf-component='input'],
     > [data-bf-component='number-input'] {
       width: 100%;
diff --git a/src/web-ui/src/infrastructure/config/components/common/ConfigPageLayout.test.tsx b/src/web-ui/src/infrastructure/config/components/common/ConfigPageLayout.test.tsx
index 562f137e3e..e960c2ea43 100644
--- a/src/web-ui/src/infrastructure/config/components/common/ConfigPageLayout.test.tsx
+++ b/src/web-ui/src/infrastructure/config/components/common/ConfigPageLayout.test.tsx
@@ -5,6 +5,7 @@ import { resolve } from 'node:path';
 import React, { act } from 'react';
 import { afterEach, beforeEach, describe, expect, it } from 'vitest';
 import { createRoot, type Root } from 'react-dom/client';
+import { ConfigPageHeader } from './ConfigPageHeader';
 import {
   ConfigPageLayout,
   ConfigPageContent,
@@ -60,6 +61,15 @@ describe('ConfigPageLayout', () => {
     expect(stack?.querySelectorAll(':scope > .bitfun-config-page-section')).toHaveLength(2);
   });
 
+  it('uses the public PageHeader while preserving appearance extension targets', () => {
+    act(() => root.render(<ConfigPageHeader title="Models" subtitle="Provider configuration" extra={<button>Import</button>} />));
+    const header = container.querySelector('[data-bf-component="page-header"]');
+    expect(header?.querySelector('h2')?.textContent).toBe('Models');
+    expect(header?.querySelector('[data-bf-part="pageHeaderTitle"]')?.textContent).toBe('Models');
+    expect(header?.querySelector('[data-bf-part="pageHeaderSubtitle"]')?.textContent).toBe('Provider configuration');
+    expect(container.querySelector('[data-bf-part="pageHeaderExtra"] button')?.textContent).toBe('Import');
+  });
+
   it('keeps the compact 680px settings geometry from the shared layout contract', () => {
     const tokens = readStyleFixture('config-page-layout.tokens.scss');
     const layout = readStyleFixture('ConfigPageLayout.scss');
diff --git a/src/web-ui/src/shared/context-menu-system/appearance.ts b/src/web-ui/src/shared/context-menu-system/appearance.ts
index 88d0827310..20d633658a 100644
--- a/src/web-ui/src/shared/context-menu-system/appearance.ts
+++ b/src/web-ui/src/shared/context-menu-system/appearance.ts
@@ -2,6 +2,7 @@ import type { AppearanceSurfaceDescriptor } from '@/infrastructure/appearance';
 
 export const contextMenuAppearanceDescriptor: AppearanceSurfaceDescriptor = {
   id: 'context-menu',
+  componentAttribute: 'data-bf-product-component',
   parts: [
     { id: 'root' },
     { id: 'item' },
diff --git a/src/web-ui/src/shared/context-menu-system/components/ui/ContextMenu.scss b/src/web-ui/src/shared/context-menu-system/components/ui/ContextMenu.scss
deleted file mode 100644
index 6d85666aad..0000000000
--- a/src/web-ui/src/shared/context-menu-system/components/ui/ContextMenu.scss
+++ /dev/null
@@ -1,353 +0,0 @@
- 
-
-@use '@/component-library/styles/tokens.scss' as *;
-@use '@/component-library/styles/overlay-surfaces' as surfaces;
-
-
-
-// Surface + motion aligned with .bitfun-nav-panel__workspace-menu / __workspace-item-menu-popover
-.context-menu {
-  @include surfaces.floating-surface;
-
-  --context-menu-transform-origin: top left;
-
-  position: fixed;
-  z-index: $z-context-menu;
-  min-width: 180px;
-  max-width: min(320px, calc(100vw - 24px));
-
-  padding: $size-gap-1 0;
-  box-sizing: border-box;
-
-  opacity: 0;
-  transform: translateY(-4px) scale(0.97);
-  transform-origin: var(--context-menu-transform-origin);
-  transition:
-    opacity 160ms cubic-bezier(0.23, 1, 0.32, 1),
-    transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
-  pointer-events: none;
-
-  font-family: var(--bf-appearance-token-font-family-sans);
-  font-size: var(--bf-appearance-token-font-size-sm);
-  line-height: 1.4;
-
-  &[data-state='entered'] {
-    opacity: 1;
-    transform: translateY(0) scale(1);
-    pointer-events: all;
-  }
-
-  &[data-state='exiting'] {
-    transition-duration: 100ms;
-  }
-}
-
-
-
-.context-menu-item {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  padding: 0 $size-gap-2;
-  min-height: 30px;
-  border: none;
-  border-radius: $size-radius-sm;
-  color: var(--bf-appearance-token-color-text-secondary);
-  font-weight: 400;
-  cursor: pointer;
-  transition:
-    color $motion-fast $easing-standard,
-    background $motion-fast $easing-standard;
-  user-select: none;
-  position: relative;
-  z-index: 1;
-  gap: $size-gap-2;
-  box-sizing: border-box;
-
-  &:hover:not(.disabled) {
-    color: var(--bf-appearance-token-color-text-primary);
-    background: var(--bf-appearance-token-element-bg-soft);
-  }
-
-  &:active:not(.disabled) {
-    background: var(--bf-appearance-token-element-bg-medium);
-  }
-
-  &.disabled {
-    color: var(--bf-appearance-token-color-text-muted);
-    cursor: not-allowed;
-    opacity: 0.45;
-
-    &:hover {
-      background: transparent;
-    }
-  }
-}
-
-
-
-.context-menu-item-icon {
-  width: 14px;
-  height: 14px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  font-size: var(--bf-appearance-token-font-size-xs);
-  opacity: 0.7;
-  transition: opacity $motion-fast $easing-standard;
-
-  .context-menu-item:hover:not(.disabled) & {
-    opacity: 1;
-  }
-}
-
-.context-menu-item-label {
-  flex: 1;
-  font-weight: 400;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.context-menu-item-shortcut {
-  font-size: 10px;
-  color: var(--bf-appearance-token-color-text-muted);
-  font-weight: var(--bf-appearance-token-font-weight-normal);
-  opacity: 0.7;
-  margin-left: auto;
-  padding-left: var(--bf-appearance-token-size-gap-2);
-  
-  .context-menu-item:hover:not(.disabled) & {
-    color: var(--bf-appearance-token-color-text-secondary);
-    opacity: 0.9;
-  }
-}
-
-
-
-.context-menu-separator {
-  height: 1px;
-  margin: $size-gap-1 0;
-  position: relative;
-  z-index: 1;
-  border: none;
-  background: var(--bf-appearance-token-border-subtle);
-  opacity: 1;
-}
-
-
-
-.context-menu-submenu-arrow {
-  width: 16px;
-  height: 16px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-left: auto;
-  position: relative;
-  flex-shrink: 0;
-  
-  
-  font-size: 0;
-  color: transparent;
-  
-  
-  &::before {
-    content: '';
-    position: absolute;
-    width: 5px;
-    height: 5px;
-    border-right: 1.5px solid var(--bf-appearance-token-color-text-muted);
-    border-bottom: 1.5px solid var(--bf-appearance-token-color-text-muted);
-    transform: rotate(-45deg);
-    transition: transform var(--bf-appearance-token-motion-fast) ease, border-color var(--bf-appearance-token-motion-fast) ease;
-  }
-  
-  
-  .context-menu-item:hover:not(.disabled) &::before,
-  .context-menu-item.submenu-active &::before {
-    border-color: var(--bf-appearance-token-color-text-primary);
-  }
-  
-  
-  .context-menu-item.submenu-active &::before {
-    transform: rotate(-45deg) translateX(2px) translateY(2px);
-  }
-}
-
-.context-menu-submenu {
-  position: absolute;
-  left: 100%;
-  top: calc(-1 * var(--bf-appearance-token-size-gap-1));
-  
-  
-  
-  margin-left: -8px;
-  padding-left: 12px; 
-  
-  
-  opacity: 0;
-  visibility: hidden;
-  pointer-events: none;
-  
-  
-  transition: 
-    opacity var(--bf-appearance-token-motion-fast) var(--bf-appearance-token-easing-standard),
-    visibility var(--bf-appearance-token-motion-fast) var(--bf-appearance-token-easing-standard),
-    transform var(--bf-appearance-token-motion-fast) var(--bf-appearance-token-easing-standard);
-  transform: translateX(-4px);
-  
-  
-  &.visible {
-    opacity: 1;
-    visibility: visible;
-    pointer-events: auto;
-    transform: translateX(0);
-  }
-  
-  
-  .context-menu {
-    position: relative !important;
-    left: auto !important;
-    top: auto !important;
-    
-    
-    opacity: 1;
-    visibility: visible;
-    pointer-events: auto;
-    transform: none;
-  }
-}
-
-
-.context-menu-item.submenu-active:not(.disabled) {
-  color: var(--bf-appearance-token-color-text-primary);
-  background: var(--bf-appearance-token-element-bg-soft);
-}
-
-@media (max-width: 768px) {
-  .context-menu {
-    min-width: 180px;
-    font-size: var(--bf-appearance-token-font-size-lg);
-  }
-  
-  .context-menu-item {
-    padding: var(--bf-appearance-token-size-gap-3) var(--bf-appearance-token-size-gap-4);
-    min-height: 44px;
-  }
-  
-  .context-menu-item-shortcut {
-    display: none;
-  }
-}
-
-
-
-
-@media (prefers-contrast: high) {
-  .context-menu {
-    border-width: 2px;
-    border-color: var(--bf-appearance-token-border-strong);
-  }
-
-  .context-menu-item:hover:not(.disabled) {
-    background: var(--bf-appearance-token-element-bg-medium);
-  }
-
-  .context-menu-separator {
-    background: var(--bf-appearance-token-border-medium);
-  }
-}
-
-
-@media (prefers-reduced-motion: reduce) {
-  .context-menu {
-    transition: opacity $motion-instant ease;
-    transform: none;
-  }
-
-  .context-menu[data-state='entered'] {
-    transform: none;
-  }
-
-  .context-menu-item {
-    transition: background-color $motion-instant ease, color $motion-instant ease;
-  }
-}
-
-
-
-.context-menu-item:focus-visible {
-  outline: 1px solid var(--bf-appearance-token-color-accent-500);
-  outline-offset: 1px;
-  border-radius: $size-radius-sm;
-}
-
-
-
-
-.context-menu-item {
-  
-  &.is-active {
-    background: var(--bf-appearance-token-element-bg-medium);
-    color: var(--bf-appearance-token-color-text-primary);
-
-    .context-menu-item-label {
-      font-weight: 500;
-    }
-  }
-  
-  
-  &.is-dirty {
-    .context-menu-item-label {
-      color: var(--bf-appearance-token-color-warning);
-    }
-    
-    &.is-active .context-menu-item-label {
-      color: var(--bf-appearance-token-color-warning);
-    }
-  }
-  
-  
-  &--danger,
-  &.context-menu-item--danger {
-    &:hover:not(.disabled) {
-      color: var(--bf-appearance-token-color-error);
-      background: color-mix(in srgb, var(--bf-appearance-token-color-error) 10%, transparent);
-    }
-  }
-}
-
-
-.context-menu-item-close {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 18px;
-  height: 18px;
-  padding: 0;
-  background: transparent;
-  border: none;
-  border-radius: 50%;
-  color: var(--bf-appearance-token-color-text-muted);
-  cursor: pointer;
-  transition:
-    background-color var(--bf-appearance-token-motion-fast) ease,
-    color var(--bf-appearance-token-motion-fast) ease,
-    opacity var(--bf-appearance-token-motion-fast) ease,
-    scale var(--bf-appearance-token-motion-fast) var(--bf-appearance-token-easing-standard);
-  flex-shrink: 0;
-  opacity: 0.5;
-  margin-left: auto;
-
-  &:hover {
-    background: var(--bf-appearance-token-color-error-bg);
-    color: var(--bf-appearance-token-color-error);
-    opacity: 1;
-  }
-  
-  .context-menu-item:hover & {
-    opacity: 1;
-  }
-}
diff --git a/src/web-ui/src/shared/context-menu-system/components/ui/ContextMenu.test.tsx b/src/web-ui/src/shared/context-menu-system/components/ui/ContextMenu.test.tsx
index efd3894153..ec5e1faf5f 100644
--- a/src/web-ui/src/shared/context-menu-system/components/ui/ContextMenu.test.tsx
+++ b/src/web-ui/src/shared/context-menu-system/components/ui/ContextMenu.test.tsx
@@ -10,6 +10,10 @@ vi.mock('@/shared/utils/logger', () => ({
   createLogger: () => ({ error: vi.fn() }),
 }));
 
+vi.mock('@/infrastructure/appearance/runtime/AppearanceOverlayHost', () => ({
+  getAppearanceOverlayHost: () => document.body,
+}));
+
 globalThis.IS_REACT_ACT_ENVIRONMENT = true;
 
 describe('ContextMenu presence', () => {
@@ -48,17 +52,17 @@ describe('ContextMenu presence', () => {
     act(() => root.render(<ContextMenu {...props} visible />));
     act(() => vi.runOnlyPendingTimers());
     act(() => vi.runOnlyPendingTimers());
-    expect(container.querySelector('[role="menu"]')?.getAttribute('data-state')).toBe('entered');
+    expect(document.querySelector('[role="menu"]')?.getAttribute('data-state')).toBe('entered');
 
     act(() => root.render(<ContextMenu {...props} visible={false} />));
-    const exitingMenu = container.querySelector('[role="menu"]');
+    const exitingMenu = document.querySelector('[role="menu"]');
     expect(exitingMenu?.getAttribute('data-state')).toBe('exiting');
     expect(exitingMenu?.getAttribute('aria-hidden')).toBe('true');
     expect(exitingMenu?.hasAttribute('inert')).toBe(true);
     expect(document.activeElement).toBe(trigger);
 
     act(() => vi.advanceTimersByTime(100));
-    expect(container.querySelector('[role="menu"]')).toBeNull();
+    expect(document.querySelector('[role="menu"]')).toBeNull();
   });
 
   it('uses roving focus and skips disabled items and separators', () => {
@@ -74,7 +78,7 @@ describe('ContextMenu presence', () => {
       <ContextMenu items={items} position={{ x: 0, y: 0 }} visible onClose={vi.fn()} />,
     ));
 
-    const menuItems = Array.from(container.querySelectorAll<HTMLElement>('[role="menuitem"]'));
+    const menuItems = Array.from(document.querySelectorAll<HTMLElement>('[role="menuitem"]'));
     expect(document.activeElement?.textContent).toContain('Copy');
     expect(menuItems[0].tabIndex).toBe(-1);
     expect(menuItems[1].tabIndex).toBe(0);
@@ -90,7 +94,7 @@ describe('ContextMenu presence', () => {
 
     act(() => document.dispatchEvent(new window.KeyboardEvent('keydown', { key: 'ArrowUp', bubbles: true })));
     expect(document.activeElement?.textContent).toContain('Delete');
-    expect(container.querySelector('[role="separator"]')).not.toBeNull();
+    expect(document.querySelector('[role="separator"]')).not.toBeNull();
   });
 
   it('activates focused items with Enter and Space', async () => {
@@ -125,7 +129,7 @@ describe('ContextMenu presence', () => {
     expect(document.activeElement).toBe(trigger);
 
     act(() => {
-      const firstItem = container.querySelector<HTMLElement>('[role="menuitem"]');
+      const firstItem = document.querySelector<HTMLElement>('[role="menuitem"]');
       firstItem?.focus();
       document.dispatchEvent(new window.KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }));
     });
@@ -166,14 +170,14 @@ describe('ContextMenu presence', () => {
         onClose={vi.fn()}
       />,
     ));
-    const parentItem = container.querySelector<HTMLElement>('[role="menuitem"]')!;
+    const parentItem = document.querySelector<HTMLElement>('[role="menuitem"]')!;
     act(() => parentItem.dispatchEvent(new window.MouseEvent('pointerover', {
       bubbles: true, clientX: 150, clientY: 40,
     })));
     act(() => vi.advanceTimersByTime(150));
 
-    const parent = container.querySelector<HTMLElement>('[role="menu"]')!;
-    const submenu = container.querySelector<HTMLElement>('.context-menu-submenu.visible')!;
+    const parent = document.querySelector<HTMLElement>('[role="menu"]')!;
+    const submenu = document.querySelector<HTMLElement>('[role="menu"][aria-label="Share"]')!;
     parent.getBoundingClientRect = () => new window.DOMRect(0, 20, 215, 200);
     submenu.getBoundingClientRect = () => new window.DOMRect(220, 20, 220, 200);
 
@@ -213,7 +217,7 @@ describe('ContextMenu presence', () => {
     act(() => root.render(
       <ContextMenu items={items} position={{ x: 0, y: 0 }} visible onClose={vi.fn()} />,
     ));
-    const parentItem = container.querySelector<HTMLElement>('[role="menuitem"]');
+    const parentItem = document.querySelector<HTMLElement>('[role="menuitem"]');
     expect(parentItem?.getAttribute('aria-haspopup')).toBe('menu');
 
     act(() => document.dispatchEvent(new window.KeyboardEvent('keydown', { key: 'Enter', bubbles: true })));
@@ -229,4 +233,19 @@ describe('ContextMenu presence', () => {
     expect(document.activeElement).toBe(parentItem);
     expect(parentItem?.getAttribute('aria-expanded')).toBe('false');
   });
+
+  it('keeps every persisted appearance part on the public menu anatomy', () => {
+    act(() => root.render(<ContextMenu visible position={{ x: 20, y: 20 }} onClose={vi.fn()} items={[
+      { id: 'disabled', label: 'Disabled', disabled: true },
+      { id: 'separator', label: '', separator: true },
+      { id: 'share', label: 'Share', icon: <svg />, shortcut: 'Ctrl S', submenu: [{ id: 'email', label: 'Email' }] },
+    ]} />));
+    act(() => document.dispatchEvent(new window.KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true })));
+    for (const part of ['root', 'item', 'separator', 'icon', 'label', 'shortcut', 'submenuArrow', 'submenu']) {
+      expect(document.querySelector(`[data-bf-product-component="context-menu"][data-bf-product-part="${part}"]`)).not.toBeNull();
+    }
+    expect(document.querySelector('[data-bf-component="menu"][data-bf-product-part="root"]')).not.toBeNull();
+    expect(document.querySelector('[data-bf-product-part="item"][data-bf-state="disabled"]')?.getAttribute('aria-disabled')).toBe('true');
+    expect(document.querySelector('[data-bf-product-part="item"][data-bf-state="submenu-active"]')?.getAttribute('aria-expanded')).toBe('true');
+  });
 });
diff --git a/src/web-ui/src/shared/context-menu-system/components/ui/ContextMenu.tsx b/src/web-ui/src/shared/context-menu-system/components/ui/ContextMenu.tsx
index d623e314ef..2e45cf6551 100644
--- a/src/web-ui/src/shared/context-menu-system/components/ui/ContextMenu.tsx
+++ b/src/web-ui/src/shared/context-menu-system/components/ui/ContextMenu.tsx
@@ -1,551 +1,46 @@
- 
-
-import React, { useEffect, useLayoutEffect, useMemo, useRef, useCallback, useState } from 'react';
-import { ContextMenuProps, ContextMenuItem } from './types';
+import React from 'react';
+import { Menu, MenuItem, MenuPopover, MenuSeparator, type MenuEntry, type MenuItemProps, type MenuProps, type MenuPopoverParts, type MenuSeparatorProps } from '@bitfun/ui';
+import { getAppearanceOverlayHost } from '@/infrastructure/appearance/runtime/AppearanceOverlayHost';
 import { createLogger } from '@/shared/utils/logger';
-import { useSubmenuIntent } from '@/shared/utils/useSubmenuIntent';
-import './ContextMenu.scss';
+import type { ContextMenuProps, ContextMenuItem } from './types';
 
 const log = createLogger('ContextMenu');
 
+// Keep persisted appearance part IDs while the public components retain DOM ownership.
+const menuParts: MenuPopoverParts = {
+  root: React.forwardRef<HTMLDivElement, MenuProps>((props, ref) => <Menu {...props} ref={ref} data-bf-product-component="context-menu" data-bf-product-part="root" />),
+  item: React.forwardRef<HTMLButtonElement, MenuItemProps>((props, ref) => <MenuItem {...props} ref={ref} data-bf-product-component="context-menu" data-bf-product-part="item" data-bf-state={[props.disabled && 'disabled', props['aria-expanded'] === true && 'submenu-active'].filter(Boolean).join(' ') || undefined} />),
+  separator: React.forwardRef<HTMLDivElement, MenuSeparatorProps>((props, ref) => <MenuSeparator {...props} ref={ref} data-bf-product-component="context-menu" data-bf-product-part="separator" />),
+  icon: props => <span {...props} data-bf-product-component="context-menu" data-bf-product-part="icon" />,
+  label: props => <span {...props} data-bf-product-component="context-menu" data-bf-product-part="label" />,
+  shortcut: props => <span {...props} data-bf-product-component="context-menu" data-bf-product-part="shortcut" />,
+  submenuArrow: props => <span {...props} data-bf-product-component="context-menu" data-bf-product-part="submenuArrow" />,
+  submenu: props => <div {...props} data-bf-product-component="context-menu" data-bf-product-part="submenu" />,
+};
 
-const SUBMENU_OPEN_DELAY = 150;
-const SUBMENU_CLOSE_DELAY = 300;
-const SUBMENU_SWITCH_DELAY = 300;
-const SAFE_TRIANGLE_TOLERANCE = 50;
-const CONTEXT_MENU_EXIT_DURATION_MS = 100;
-
-interface InternalContextMenuProps extends ContextMenuProps {
-  autoFocusOnOpen?: boolean;
-  onKeyboardBack?: () => void;
-}
-
-export const ContextMenu: React.FC<InternalContextMenuProps> = ({
-  items,
-  position,
-  visible,
-  context,
-  onClose,
-  onItemClick,
-  autoFocusOnOpen = true,
-  onKeyboardBack,
-}) => {
-  const menuRef = useRef<HTMLDivElement>(null);
-  const itemRefs = useRef(new Map<number, HTMLDivElement>());
-  const previousFocusRef = useRef<HTMLElement | null>(null);
-  const wasVisibleRef = useRef(false);
-  const exitTimerRef = useRef<number | null>(null);
-  const enterFrameRef = useRef<number | null>(null);
-  const submenuFocusFrameRef = useRef<number | null>(null);
-  const [isPresent, setIsPresent] = useState(visible);
-  const [motionPhase, setMotionPhase] = useState<'entering' | 'entered' | 'exiting'>(
-    visible ? 'entering' : 'exiting',
-  );
-  const [activeSubmenuId, setActiveSubmenuId] = useState<string | null>(null);
-  const activeSubmenuRef = useRef<HTMLDivElement>(null);
-  const {
-    requestChange: requestSubmenuChange,
-    requestClose: requestSubmenuClose,
-    keepOpen: keepSubmenuOpen,
-    openNow: openSubmenuNow,
-    closeNow: closeSubmenuNow,
-    cancelPending: cancelPendingSubmenuIntent,
-  } = useSubmenuIntent<string>({
-    activeId: activeSubmenuId,
-    onActiveIdChange: setActiveSubmenuId,
-    parentRef: menuRef,
-    submenuRef: activeSubmenuRef,
-    enabled: visible,
-    openDelayMs: SUBMENU_OPEN_DELAY,
-    closeDelayMs: SUBMENU_CLOSE_DELAY,
-    switchDelayMs: SUBMENU_SWITCH_DELAY,
-    tolerance: SAFE_TRIANGLE_TOLERANCE,
+/** Product adapter: portable menus own UI; callbacks retain their product context. */
+export const ContextMenu: React.FC<ContextMenuProps> = ({ items, position, visible, context, onClose, onItemClick }) => {
+  const convert = (item: ContextMenuItem): MenuEntry => ({
+    id: item.id,
+    label: item.label,
+    disabled: item.disabled,
+    separator: item.separator,
+    icon: typeof item.icon === 'string' ? <i className={item.icon} /> : item.icon,
+    shortcut: item.shortcut,
+    submenu: item.submenu?.map(convert),
+    onSelect: () => {
+      void (async () => {
+        try {
+          await item.onClick?.(context);
+        } catch (error) {
+          log.error('onClick handler failed', { itemId: item.id, error });
+        }
+        onItemClick?.(item, context);
+      })();
+    },
   });
-  const focusableItemIndices = useMemo(
-    () => items.reduce<number[]>((indices, item, index) => {
-      if (!item.separator && !item.disabled) {
-        indices.push(index);
-      }
-      return indices;
-    }, []),
-    [items],
-  );
-  const [focusedItemIndex, setFocusedItemIndex] = useState(
-    () => focusableItemIndices[0] ?? -1,
-  );
-  const restorePreviousFocus = useCallback(() => {
-    const previousFocus = previousFocusRef.current;
-    if (previousFocus?.isConnected && !previousFocus.matches(':disabled')) {
-      previousFocus.focus();
-      return;
-    }
-
-    const activeElement = document.activeElement;
-    if (activeElement instanceof window.HTMLElement && menuRef.current?.contains(activeElement)) {
-      activeElement.blur();
-    }
-  }, []);
-
-  const focusItemAtIndex = useCallback((index: number) => {
-    setFocusedItemIndex(index);
-    itemRefs.current.get(index)?.focus();
-  }, []);
-
-  useLayoutEffect(() => {
-    if (visible && !wasVisibleRef.current) {
-      previousFocusRef.current = document.activeElement instanceof window.HTMLElement
-        ? document.activeElement
-        : null;
-      const firstItemIndex = focusableItemIndices[0] ?? -1;
-      setFocusedItemIndex(firstItemIndex);
-
-      if (autoFocusOnOpen) {
-        if (firstItemIndex >= 0) {
-          itemRefs.current.get(firstItemIndex)?.focus();
-        } else {
-          menuRef.current?.focus();
-        }
-      }
-    } else if (!visible && wasVisibleRef.current) {
-      const activeElement = document.activeElement;
-      if (activeElement instanceof window.HTMLElement && menuRef.current?.contains(activeElement)) {
-        restorePreviousFocus();
-      }
-    }
-
-    wasVisibleRef.current = visible;
-  }, [autoFocusOnOpen, focusableItemIndices, restorePreviousFocus, visible]);
-
-  useEffect(() => {
-    if (!focusableItemIndices.includes(focusedItemIndex)) {
-      setFocusedItemIndex(focusableItemIndices[0] ?? -1);
-    }
-  }, [focusableItemIndices, focusedItemIndex]);
-
-  useEffect(() => {
-    if (exitTimerRef.current !== null) {
-      window.clearTimeout(exitTimerRef.current);
-      exitTimerRef.current = null;
-    }
-    if (enterFrameRef.current !== null) {
-      window.cancelAnimationFrame(enterFrameRef.current);
-      enterFrameRef.current = null;
-    }
-
-    if (visible) {
-      setIsPresent(true);
-      setMotionPhase('entering');
-      enterFrameRef.current = window.requestAnimationFrame(() => {
-        enterFrameRef.current = window.requestAnimationFrame(() => {
-          setMotionPhase('entered');
-          enterFrameRef.current = null;
-        });
-      });
-    } else {
-      setMotionPhase('exiting');
-      exitTimerRef.current = window.setTimeout(() => {
-        setIsPresent(false);
-        exitTimerRef.current = null;
-      }, CONTEXT_MENU_EXIT_DURATION_MS);
-    }
-
-    return () => {
-      if (exitTimerRef.current !== null) {
-        window.clearTimeout(exitTimerRef.current);
-        exitTimerRef.current = null;
-      }
-      if (enterFrameRef.current !== null) {
-        window.cancelAnimationFrame(enterFrameRef.current);
-        enterFrameRef.current = null;
-      }
-      if (submenuFocusFrameRef.current !== null) {
-        window.cancelAnimationFrame(submenuFocusFrameRef.current);
-        submenuFocusFrameRef.current = null;
-      }
-    };
-  }, [visible]);
-
-  
-  const handleMenuItemPointerEnter = useCallback((
-    item: ContextMenuItem,
-    index: number,
-    event: React.PointerEvent<HTMLDivElement>,
-  ) => {
-    const itemId = item.id || `item-${index}`;
-    requestSubmenuChange(item.submenu?.length ? itemId : null, event);
-  }, [requestSubmenuChange]);
-
-  
-  const activateItem = useCallback(async (item: ContextMenuItem, restoreFocusAfter = false) => {
-    if (item.disabled || item.separator) {
-      return;
-    }
-
-    
-    if (item.submenu && item.submenu.length > 0) {
-      return;
-    }
-
-    
-    if (item.onClick) {
-      try {
-        await Promise.resolve(item.onClick(context));
-      } catch (error) {
-        log.error('onClick handler failed', { itemId: item.id, error });
-      }
-    }
-
-    if (onItemClick) {
-      onItemClick(item, context);
-    }
-
-    if (restoreFocusAfter) {
-      restorePreviousFocus();
-    }
-    onClose();
-  }, [context, onItemClick, onClose, restorePreviousFocus]);
-
-  const handleItemClick = useCallback((item: ContextMenuItem, event: React.MouseEvent) => {
-    event.preventDefault();
-    event.stopPropagation();
-    void activateItem(item);
-  }, [activateItem]);
-
-  const openSubmenuFromKeyboard = useCallback((item: ContextMenuItem, index: number) => {
-    if (!item.submenu?.length || item.disabled) {
-      return;
-    }
-
-    openSubmenuNow(item.id || `item-${index}`);
-    if (submenuFocusFrameRef.current !== null) {
-      window.cancelAnimationFrame(submenuFocusFrameRef.current);
-    }
-    submenuFocusFrameRef.current = window.requestAnimationFrame(() => {
-      const firstSubmenuItem = itemRefs.current.get(index)?.querySelector<HTMLElement>(
-        '.context-menu-submenu [role="menu"] > [role="menuitem"]:not([aria-disabled="true"])',
-      );
-      firstSubmenuItem?.focus();
-      submenuFocusFrameRef.current = null;
-    });
-  }, [openSubmenuNow]);
-
-  
-  const handleKeyDown = useCallback((event: KeyboardEvent) => {
-    if (!visible) return;
-
-    const activeElement = document.activeElement instanceof window.HTMLElement
-      ? document.activeElement
-      : null;
-    const owningMenu = activeElement?.closest('[role="menu"]');
-    if (owningMenu !== menuRef.current) {
-      return;
-    }
-
-    const currentPosition = focusableItemIndices.indexOf(focusedItemIndex);
-    const currentItem = focusedItemIndex >= 0 ? items[focusedItemIndex] : undefined;
-
-    switch (event.key) {
-      case 'Escape':
-        event.preventDefault();
-        event.stopPropagation();
-        restorePreviousFocus();
-        onClose();
-        break;
-      case 'ArrowDown': {
-        event.preventDefault();
-        event.stopPropagation();
-        if (focusableItemIndices.length > 0) {
-          const nextPosition = currentPosition < 0
-            ? 0
-            : (currentPosition + 1) % focusableItemIndices.length;
-          focusItemAtIndex(focusableItemIndices[nextPosition]);
-        }
-        break;
-      }
-      case 'ArrowUp': {
-        event.preventDefault();
-        event.stopPropagation();
-        if (focusableItemIndices.length > 0) {
-          const previousPosition = currentPosition <= 0
-            ? focusableItemIndices.length - 1
-            : currentPosition - 1;
-          focusItemAtIndex(focusableItemIndices[previousPosition]);
-        }
-        break;
-      }
-      case 'Home':
-        event.preventDefault();
-        event.stopPropagation();
-        if (focusableItemIndices.length > 0) {
-          focusItemAtIndex(focusableItemIndices[0]);
-        }
-        break;
-      case 'End':
-        event.preventDefault();
-        event.stopPropagation();
-        if (focusableItemIndices.length > 0) {
-          focusItemAtIndex(focusableItemIndices[focusableItemIndices.length - 1]);
-        }
-        break;
-      case 'Enter':
-      case ' ':
-        event.preventDefault();
-        event.stopPropagation();
-        if (currentItem?.submenu?.length) {
-          openSubmenuFromKeyboard(currentItem, focusedItemIndex);
-        } else if (currentItem) {
-          void activateItem(currentItem, true);
-        }
-        break;
-      case 'ArrowRight':
-        if (currentItem?.submenu?.length) {
-          event.preventDefault();
-          event.stopPropagation();
-          openSubmenuFromKeyboard(currentItem, focusedItemIndex);
-        }
-        break;
-      case 'ArrowLeft':
-        if (onKeyboardBack) {
-          event.preventDefault();
-          event.stopPropagation();
-          onKeyboardBack();
-        }
-        break;
-    }
-  }, [
-    activateItem,
-    focusItemAtIndex,
-    focusedItemIndex,
-    focusableItemIndices,
-    items,
-    onClose,
-    onKeyboardBack,
-    openSubmenuFromKeyboard,
-    restorePreviousFocus,
-    visible,
-  ]);
-
-  
-  const handleClickOutside = useCallback((event: MouseEvent) => {
-    if (!visible) return;
-    
-    
-    
-    const target = event.target as HTMLElement;
-    const isMenuClick = target.closest('.context-menu') !== null;
-    
-    if (!isMenuClick) {
-      onClose();
-    }
-  }, [visible, onClose]);
-
-  
-  const handlersRef = useRef<{
-    keydown: (e: KeyboardEvent) => void;
-    mousedown: (e: MouseEvent) => void;
-    contextmenu: (e: MouseEvent) => void;
-  } | null>(null);
-
-  useEffect(() => {
-    if (visible) {
-      
-      if (handlersRef.current) {
-        document.removeEventListener('keydown', handlersRef.current.keydown, true);
-        document.removeEventListener('mousedown', handlersRef.current.mousedown, true);
-        document.removeEventListener('contextmenu', handlersRef.current.contextmenu, true);
-      }
-      
-      
-      handlersRef.current = {
-        keydown: handleKeyDown,
-        mousedown: handleClickOutside,
-        contextmenu: handleClickOutside
-      };
-      
-      
-      document.addEventListener('keydown', handlersRef.current.keydown, true);
-      document.addEventListener('mousedown', handlersRef.current.mousedown, true);
-      document.addEventListener('contextmenu', handlersRef.current.contextmenu, true);
-
-      return () => {
-        if (handlersRef.current) {
-          document.removeEventListener('keydown', handlersRef.current.keydown, true);
-          document.removeEventListener('mousedown', handlersRef.current.mousedown, true);
-          document.removeEventListener('contextmenu', handlersRef.current.contextmenu, true);
-          handlersRef.current = null;
-        }
-      };
-    } else {
-      
-      if (handlersRef.current) {
-        document.removeEventListener('keydown', handlersRef.current.keydown, true);
-        document.removeEventListener('mousedown', handlersRef.current.mousedown, true);
-        document.removeEventListener('contextmenu', handlersRef.current.contextmenu, true);
-        handlersRef.current = null;
-      }
-    }
-  }, [visible, handleKeyDown, handleClickOutside]);
-
-  
-  useEffect(() => {
-    if (!visible) {
-      cancelPendingSubmenuIntent();
-      setActiveSubmenuId(null);
-    }
-  }, [cancelPendingSubmenuIntent, visible]);
-
-  
-  const adjustPosition = useCallback(() => {
-    if (!menuRef.current || !isPresent) return;
-
-    const menu = menuRef.current;
-    const rect = menu.getBoundingClientRect();
-    const viewport = {
-      width: window.innerWidth,
-      height: window.innerHeight
-    };
-
-    let { x, y } = position;
-
-    
-    if (x + rect.width > viewport.width) {
-      x = viewport.width - rect.width - 8;
-    }
-
-    
-    if (x < 8) {
-      x = 8;
-    }
-
-    
-    if (y + rect.height > viewport.height) {
-      y = viewport.height - rect.height - 8;
-    }
-
-    
-    if (y < 8) {
-      y = 8;
-    }
-
-    menu.style.left = `${x}px`;
-    menu.style.top = `${y}px`;
-    const originX = Math.min(Math.max(position.x - x, 8), Math.max(rect.width - 8, 8));
-    const originY = Math.min(Math.max(position.y - y, 8), Math.max(rect.height - 8, 8));
-    menu.style.setProperty('--context-menu-transform-origin', `${originX}px ${originY}px`);
-  }, [position, isPresent]);
-
-  
-  useEffect(() => {
-    if (isPresent) {
-      
-      window.requestAnimationFrame(adjustPosition);
-    }
-  }, [isPresent, adjustPosition]);
-
-  
-  const renderMenuItem = (item: ContextMenuItem, index: number) => {
-    if (item.separator) {
-      return <div key={`separator-${index}`} className="context-menu-separator" data-bf-component="context-menu" data-bf-part="separator" role="separator" />;
-    }
-
-    const itemId = item.id || `item-${index}`;
-    const hasSubmenu = item.submenu && item.submenu.length > 0;
-    const isSubmenuActive = hasSubmenu && activeSubmenuId === itemId;
-
-    return (
-      <div
-        ref={(element) => {
-          if (element) {
-            itemRefs.current.set(index, element);
-          } else {
-            itemRefs.current.delete(index);
-          }
-        }}
-        key={itemId}
-        className={`context-menu-item ${item.disabled ? 'disabled' : ''} ${isSubmenuActive ? 'submenu-active' : ''}`}
-        onClick={(event) => handleItemClick(item, event)}
-        onPointerEnter={(event) => handleMenuItemPointerEnter(item, index, event)}
-        onPointerLeave={requestSubmenuClose}
-        onContextMenu={(event) => event.preventDefault()}
-        data-bf-component="context-menu"
-        data-bf-part="item"
-        data-bf-state={[item.disabled && 'disabled', isSubmenuActive && 'submenu-active'].filter(Boolean).join(' ') || undefined}
-        role="menuitem"
-        aria-disabled={item.disabled || undefined}
-        aria-haspopup={hasSubmenu ? 'menu' : undefined}
-        aria-expanded={hasSubmenu ? isSubmenuActive : undefined}
-        tabIndex={!item.disabled && index === focusedItemIndex ? 0 : -1}
-        data-menu-index={index}
-      >
-        {item.icon && (
-          <span className="context-menu-item-icon" data-bf-component="context-menu" data-bf-part="icon">
-            {typeof item.icon === 'string' ? <i className={item.icon} /> : item.icon}
-          </span>
-        )}
-        <span className="context-menu-item-label" data-bf-component="context-menu" data-bf-part="label">
-          {item.label}
-        </span>
-        {item.shortcut && (
-          <span className="context-menu-item-shortcut" data-bf-component="context-menu" data-bf-part="shortcut">
-            {item.shortcut}
-          </span>
-        )}
-        {hasSubmenu && (
-          <>
-            <span className="context-menu-submenu-arrow" data-bf-component="context-menu" data-bf-part="submenuArrow">▶</span>
-            <div 
-              ref={isSubmenuActive ? activeSubmenuRef : undefined}
-              className={`context-menu-submenu ${isSubmenuActive ? 'visible' : ''}`}
-              onPointerEnter={keepSubmenuOpen}
-              onPointerLeave={requestSubmenuClose}
-              data-bf-component="context-menu"
-              data-bf-part="submenu"
-            >
-              <ContextMenu
-                items={item.submenu!}
-                position={{ x: 0, y: 0 }}
-                visible={isSubmenuActive === true}
-                context={context}
-                onClose={onClose}
-                onItemClick={onItemClick}
-                autoFocusOnOpen={false}
-                onKeyboardBack={() => {
-                  closeSubmenuNow();
-                  focusItemAtIndex(index);
-                }}
-              />
-            </div>
-          </>
-        )}
-      </div>
-    );
-  };
-
-  if (!isPresent) {
-    return null;
-  }
 
-  return (
-    <div
-      ref={menuRef}
-      className="context-menu"
-      style={{
-        left: position.x,
-        top: position.y
-      }}
-      onContextMenu={(event) => event.preventDefault()}
-      data-bf-component="context-menu"
-      data-bf-part="root"
-      data-motion="presence"
-      data-state={motionPhase}
-      role="menu"
-      tabIndex={-1}
-      aria-hidden={(!visible || motionPhase === 'exiting') || undefined}
-      {...(!visible || motionPhase === 'exiting' ? { inert: '' } : {})}
-    >
-      {items.map(renderMenuItem)}
-    </div>
-  );
+  return <MenuPopover items={items.map(convert)} position={position} open={visible} onClose={onClose} portalContainer={getAppearanceOverlayHost} parts={menuParts} />;
 };
 
 export default ContextMenu;
diff --git a/src/web-ui/src/shared/ui/Combobox.test.tsx b/src/web-ui/src/shared/ui/Combobox.test.tsx
new file mode 100644
index 0000000000..e5e7ba51ae
--- /dev/null
+++ b/src/web-ui/src/shared/ui/Combobox.test.tsx
@@ -0,0 +1,98 @@
+// @vitest-environment jsdom
+import React, { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { Combobox, Field, Modal, type ComboboxProps } from '@bitfun/ui';
+
+describe('public Combobox product integration', () => {
+  let root: Root;
+  let host: HTMLDivElement;
+  const change = vi.fn();
+  const render = (props: ComboboxProps = {}) => act(() => root.render(<Combobox label="Models" options={[{ value: 'a', label: 'Alpha', group: 'First' }, { value: 'b', label: 'Beta', disabled: true }, { value: 'c', label: 'Gamma', group: 'First' }]} onChange={change} {...props} />));
+  const trigger = () => host.querySelector<HTMLButtonElement>('button[role="combobox"]')!;
+  const key = (element: Element, value: string, composing = false) => act(() => { element.dispatchEvent(new KeyboardEvent('keydown', { key: value, isComposing: composing, bubbles: true })); });
+  const input = () => document.querySelector<HTMLInputElement>('input[role="combobox"]')!;
+  const type = (value: string) => act(() => { Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')!.set!.call(input(), value); input().dispatchEvent(new Event('input', { bubbles: true })); });
+  beforeEach(() => { host = document.createElement('div'); document.body.append(host); root = createRoot(host); change.mockClear(); });
+  afterEach(() => { act(() => root.unmount()); host.remove(); vi.restoreAllMocks(); });
+
+  it('navigates grouped options in DOM order and skips disabled entries', () => {
+    render(); key(trigger(), 'ArrowDown'); key(input(), 'ArrowDown'); key(input(), 'Enter');
+    expect(change).toHaveBeenLastCalledWith('c');
+    expect(document.activeElement).toBe(trigger());
+    expect(document.querySelector('[role="listbox"]')).toBeNull();
+  });
+  it('does not accept an IME confirmation as an option selection', () => {
+    render({ allowCustomValue: true }); act(() => trigger().click()); type('custom'); key(input(), 'Enter', true);
+    expect(change).not.toHaveBeenCalled();
+    key(input(), 'Enter'); expect(change).toHaveBeenLastCalledWith('custom');
+  });
+  it('keeps controlled values authoritative and preserves numeric zero', () => {
+    render({ value: 0, options: [{ value: 0, label: 'Zero' }, { value: 1, label: 'One' }] });
+    act(() => trigger().click()); key(input(), 'ArrowDown'); key(input(), 'ArrowDown'); key(input(), 'Enter');
+    expect(change).toHaveBeenLastCalledWith(1); expect(trigger().textContent).toContain('Zero');
+  });
+  it('supports multi-selection, select-all, custom values and async option hydration', () => {
+    render({ multiple: true, defaultValue: ['custom'], options: [], loading: true, showSelectAll: true });
+    act(() => trigger().click()); expect(document.querySelector('[role="status"]')?.textContent).toContain('Loading');
+    render({ multiple: true, defaultValue: ['custom'], options: [{ value: 'a', label: 'Alpha' }], showSelectAll: true });
+    const all = [...document.querySelectorAll('button')].find(button => button.textContent === 'Select all')!;
+    act(() => all.click()); expect(change).toHaveBeenLastCalledWith(['custom', 'a']);
+    expect(document.querySelector('[role="listbox"]')).not.toBeNull();
+  });
+  it('closes only the picker on Escape inside a modal and restores trigger focus', () => {
+    const close = vi.fn();
+    act(() => root.render(<Modal isOpen title="Provider" onClose={close}><Combobox label="Models" /></Modal>));
+    const button = document.querySelector<HTMLButtonElement>('button[role="combobox"]')!;
+    act(() => button.click()); key(input(), 'Escape');
+    expect(close).not.toHaveBeenCalled(); expect(document.activeElement).toBe(button);
+  });
+  it('commits a typed custom single value on Tab and releases the popup', () => {
+    render({ allowCustomValue: true }); act(() => trigger().click()); type('custom'); key(input(), 'Tab');
+    expect(change).toHaveBeenLastCalledWith('custom'); expect(document.querySelector('[role="listbox"]')).toBeNull();
+  });
+  it('removes individual selected tags without nesting buttons or opening the popup', () => {
+    render({ multiple: true, defaultValue: ['a', 'c'] });
+    const remove = host.querySelector<HTMLButtonElement>('button[aria-label="Clear selection: Alpha"]')!;
+    expect(remove.closest('button[role="combobox"]')).toBeNull();
+    act(() => remove.click());
+    expect(change).toHaveBeenLastCalledWith(['c']);
+    expect(document.querySelector('[role="listbox"]')).toBeNull();
+  });
+  it('connects the public Field label, description, required and error states to the trigger', () => {
+    act(() => root.render(<Field label="Models" description="Choose a model" error="Required" required><Combobox /></Field>));
+    expect(host.querySelector('label')?.htmlFor).toBe(trigger().id);
+    expect(trigger().getAttribute('aria-label')).toBeNull();
+    expect(trigger().getAttribute('aria-required')).toBe('true');
+    expect(trigger().getAttribute('aria-invalid')).toBe('true');
+    const describedBy = trigger().getAttribute('aria-describedby')!.split(' ');
+    expect(describedBy.map(id => document.getElementById(id)?.textContent)).toEqual(['Choose a model', 'Required']);
+  });
+  it('mounts an initially open, filtered picker into its portal', () => {
+    render({ defaultOpen: true, defaultSearchValue: 'gam' });
+    expect(input().value).toBe('gam');
+    expect(document.querySelectorAll('[role="option"]')).toHaveLength(1);
+    expect(document.querySelector('[role="option"]')?.textContent).toBe('Gamma');
+    expect(document.activeElement).toBe(input());
+  });
+  it('flips at the bottom edge and repositions after ancestor scrolling', () => {
+    let top = window.innerHeight - 48;
+    vi.spyOn(HTMLElement.prototype, 'getBoundingClientRect').mockImplementation(function (this: HTMLElement) {
+      if (this.dataset.bfComponent === 'combobox-popup') return new DOMRect(0, 0, 240, 180);
+      return new DOMRect(40, top, 240, 40);
+    });
+    render(); act(() => trigger().click());
+    const popup = document.querySelector<HTMLElement>('[data-bf-component="combobox-popup"]')!;
+    expect(popup.dataset.placement).toBe('top');
+    top = 20;
+    act(() => host.dispatchEvent(new Event('scroll', { bubbles: true })));
+    expect(popup.dataset.placement).toBe('bottom');
+    expect(popup.style.top).toBe('64px');
+    expect(popup.style.width).toBe('240px');
+  });
+  it('keeps explicit inline popups in the local component tree', () => {
+    render({ dropdownMode: 'inline' }); act(() => trigger().click());
+    expect(host.querySelector('[data-bf-component="combobox"] [role="listbox"]')).not.toBeNull();
+    expect(host.querySelector<HTMLElement>('[data-bf-component="combobox-popup"]')?.style.position).toBe('');
+  });
+});
diff --git a/src/web-ui/src/shared/ui/MenuPopover.test.tsx b/src/web-ui/src/shared/ui/MenuPopover.test.tsx
new file mode 100644
index 0000000000..b8ebfd7d84
--- /dev/null
+++ b/src/web-ui/src/shared/ui/MenuPopover.test.tsx
@@ -0,0 +1,88 @@
+// @vitest-environment jsdom
+import React, { act, useRef, useState } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { MenuPopover, ThemeRoot, type MenuEntry } from '@bitfun/ui';
+
+describe('public MenuPopover', () => {
+  let host: HTMLDivElement;
+  let root: Root;
+  const selected = vi.fn();
+  const items: MenuEntry[] = [
+    { id: 'disabled', label: 'Unavailable', disabled: true },
+    { id: 'copy', label: 'Copy', onSelect: selected },
+    { id: 'share', label: 'Share', submenu: [{ id: 'email', label: 'Email', onSelect: selected }, { id: 'link', label: 'Link' }] },
+  ];
+  const key = (value: string, isComposing = false) => act(() => { document.activeElement!.dispatchEvent(new KeyboardEvent('keydown', { key: value, bubbles: true, isComposing })); });
+  function Harness() {
+    const anchorRef = useRef<HTMLButtonElement>(null);
+    const [open, setOpen] = useState(false);
+    return <ThemeRoot><button ref={anchorRef} onClick={() => setOpen(!open)}>Commands</button><MenuPopover items={items} open={open} onClose={() => setOpen(false)} anchorRef={anchorRef} aria-label="Commands" /></ThemeRoot>;
+  }
+  const open = () => {
+    act(() => root.render(<Harness />));
+    const trigger = host.querySelector<HTMLButtonElement>('button')!;
+    act(() => { trigger.focus(); trigger.click(); });
+    return trigger;
+  };
+  beforeEach(() => { host = document.createElement('div'); document.body.append(host); root = createRoot(host); selected.mockClear(); });
+  afterEach(() => { act(() => root.unmount()); host.remove(); vi.restoreAllMocks(); });
+
+  it('portals inside the theme scope, supports typeahead and dispatches after focus return', () => {
+    const trigger = open();
+    expect(host.querySelector('[role="menu"]')?.closest('[data-bf-design-system-root]')).not.toBeNull();
+    expect(document.activeElement?.textContent).toBe('Copy');
+    key('s'); expect(document.activeElement?.textContent).toBe('Share');
+    key('Home'); key('Enter', true); expect(selected).not.toHaveBeenCalled();
+    key('Enter'); expect(selected).toHaveBeenCalledOnce(); expect(document.activeElement).toBe(trigger);
+  });
+  it('opens and backs out of nested menus and closes the tree on Tab', () => {
+    const trigger = open(); key('End'); key('ArrowRight');
+    expect(document.activeElement?.textContent).toBe('Email');
+    key('ArrowDown'); expect(document.activeElement?.textContent).toBe('Link');
+    key('ArrowLeft'); expect(document.activeElement?.textContent).toBe('Share');
+    key('Tab'); expect(document.activeElement).toBe(trigger);
+    expect(host.querySelector('[role="menu"]')?.getAttribute('aria-hidden')).toBe('true');
+  });
+  it('flips the root above its anchor and submenus left near viewport edges', () => {
+    Object.defineProperty(window, 'innerWidth', { configurable: true, value: 1000 });
+    Object.defineProperty(window, 'innerHeight', { configurable: true, value: 600 });
+    vi.spyOn(HTMLElement.prototype, 'getBoundingClientRect').mockImplementation(function (this: HTMLElement) {
+      if (this.getAttribute('role') === 'menu') return new DOMRect(0, 0, 220, 200);
+      return new DOMRect(940, 560, 40, 32);
+    });
+    open();
+    const menu = host.querySelector<HTMLElement>('[role="menu"]')!;
+    expect(menu.dataset.placement).toBe('top');
+    expect(Number.parseFloat(menu.style.left)).toBeLessThanOrEqual(772);
+    key('End'); key('ArrowRight');
+    const submenu = host.querySelector<HTMLElement>('[role="menu"][aria-label="Share"]')!;
+    expect(submenu.dataset.placement).toBe('left');
+    expect(Number.parseFloat(submenu.style.top)).toBeLessThanOrEqual(392);
+  });
+  it('opens a coordinate menu initially and releases it on outside interaction', () => {
+    const close = vi.fn();
+    act(() => root.render(<MenuPopover items={items} open onClose={close} position={{ x: 50, y: 50 }} />));
+    expect(document.activeElement?.textContent).toBe('Copy');
+    act(() => document.body.dispatchEvent(new MouseEvent('mousedown', { bubbles: true })));
+    expect(close).toHaveBeenCalledOnce();
+  });
+  it('retains exit geometry and focuses the first item when reopened during exit', () => {
+    const trigger = open();
+    const menu = host.querySelector<HTMLElement>('[role="menu"]')!;
+    const left = menu.style.left;
+    key('Escape');
+    expect(menu.style.left).toBe(left);
+    expect(menu.style.visibility).not.toBe('hidden');
+    act(() => trigger.click());
+    expect(document.activeElement?.textContent).toBe('Copy');
+    expect(menu.getAttribute('aria-hidden')).toBeNull();
+  });
+  it('allows Escape from an empty menu', () => {
+    const close = vi.fn();
+    act(() => root.render(<MenuPopover items={[]} open onClose={close} position={{ x: 20, y: 20 }} />));
+    expect(document.activeElement?.getAttribute('role')).toBe('menu');
+    key('Escape');
+    expect(close).toHaveBeenCalledOnce();
+  });
+});
diff --git a/src/web-ui/src/shared/utils/useSubmenuIntent.ts b/src/web-ui/src/shared/utils/useSubmenuIntent.ts
index 782a184a0a..564ff60a7d 100644
--- a/src/web-ui/src/shared/utils/useSubmenuIntent.ts
+++ b/src/web-ui/src/shared/utils/useSubmenuIntent.ts
@@ -1,405 +1,11 @@
-import { useCallback, useEffect, useRef, type RefObject } from 'react';
-
-export interface SubmenuIntentPoint {
-  x: number;
-  y: number;
-}
-
-export interface SubmenuIntentRect {
-  left: number;
-  right: number;
-  top: number;
-  bottom: number;
-}
-
-interface TimedPointerPoint extends SubmenuIntentPoint {
-  time: number;
-}
-
-interface PointerLikeEvent {
-  clientX: number;
-  clientY: number;
-  pointerType?: string;
-  timeStamp: number;
-}
-
-interface PendingTransition<T> {
-  targetId: T | null;
-  kind: 'open' | 'switch';
-  timer: number;
-}
-
-export interface UseSubmenuIntentOptions<T> {
-  activeId: T | null;
-  onActiveIdChange: (id: T | null) => void;
-  parentRef: RefObject<HTMLElement | null>;
-  submenuRef: RefObject<HTMLElement | null>;
-  enabled?: boolean;
-  openDelayMs?: number;
-  closeDelayMs?: number;
-  switchDelayMs?: number;
-  tolerance?: number;
-}
-
-export interface SubmenuIntentControls<T> {
-  requestChange: (targetId: T | null, event: PointerLikeEvent) => void;
-  requestClose: (event?: PointerLikeEvent) => void;
-  keepOpen: () => void;
-  openNow: (id: T) => void;
-  closeNow: () => void;
-  cancelPending: () => void;
-}
-
-const DEFAULT_OPEN_DELAY_MS = 120;
-const DEFAULT_CLOSE_DELAY_MS = 300;
-const DEFAULT_SWITCH_DELAY_MS = 300;
-const DEFAULT_TOLERANCE = 48;
-const POINTER_HISTORY_MAX_AGE_MS = 300;
-const POINTER_HISTORY_MIN_DISTANCE_PX = 2;
-// Include the parent's inner edge padding, not a wide band of sibling rows.
-const BRIDGE_EDGE_PADDING_PX = 4;
-
-const pointInRect = (point: SubmenuIntentPoint, rect: SubmenuIntentRect): boolean => (
-  rect.right > rect.left
-  && rect.bottom > rect.top
-  && point.x >= rect.left
-  && point.x <= rect.right
-  && point.y >= rect.top
-  && point.y <= rect.bottom
-);
-
-/** A stationary, bidirectional bridge across the gap; independent of menu aim. */
-export const isPointInSubmenuBridge = (
-  point: SubmenuIntentPoint,
-  parentRect: SubmenuIntentRect,
-  submenuRect: SubmenuIntentRect,
-): boolean => {
-  if (parentRect.right <= parentRect.left || parentRect.bottom <= parentRect.top
-    || submenuRect.right <= submenuRect.left || submenuRect.bottom <= submenuRect.top) {
-    return false;
-  }
-
-  const opensRight = submenuRect.left + submenuRect.right > parentRect.left + parentRect.right;
-  return pointInRect(point, {
-    left: (opensRight ? parentRect.right : submenuRect.right) - BRIDGE_EDGE_PADDING_PX,
-    right: (opensRight ? submenuRect.left : parentRect.left) + BRIDGE_EDGE_PADDING_PX,
-    top: submenuRect.top - BRIDGE_EDGE_PADDING_PX,
-    bottom: submenuRect.bottom + BRIDGE_EDGE_PADDING_PX,
-  });
-};
-
-const distanceToRect = (point: SubmenuIntentPoint, rect: SubmenuIntentRect): number => {
-  const dx = Math.max(rect.left - point.x, 0, point.x - rect.right);
-  const dy = Math.max(rect.top - point.y, 0, point.y - rect.bottom);
-  return Math.hypot(dx, dy);
-};
-
-const signedArea = (
-  point: SubmenuIntentPoint,
-  start: SubmenuIntentPoint,
-  end: SubmenuIntentPoint,
-): number => (
-  (point.x - end.x) * (start.y - end.y)
-  - (start.x - end.x) * (point.y - end.y)
-);
-
-const pointInTriangle = (
-  point: SubmenuIntentPoint,
-  first: SubmenuIntentPoint,
-  second: SubmenuIntentPoint,
-  third: SubmenuIntentPoint,
-): boolean => {
-  const firstSign = signedArea(point, first, second);
-  const secondSign = signedArea(point, second, third);
-  const thirdSign = signedArea(point, third, first);
-  const hasNegative = firstSign < 0 || secondSign < 0 || thirdSign < 0;
-  const hasPositive = firstSign > 0 || secondSign > 0 || thirdSign > 0;
-  return !(hasNegative && hasPositive);
-};
-
-/**
- * Returns true when the pointer is entering the corridor between its previous
- * position and the nearest vertical edge of the open submenu. The nearest edge
- * makes the same calculation work for menus that open to either side.
- */
-export const isPointerMovingTowardSubmenu = (
-  previous: SubmenuIntentPoint,
-  current: SubmenuIntentPoint,
-  submenuRect: SubmenuIntentRect,
-  tolerance = DEFAULT_TOLERANCE,
-): boolean => {
-  if (pointInRect(current, submenuRect)) return true;
-
-  const submenuOpensRight = previous.x <= submenuRect.left;
-  const submenuOpensLeft = previous.x >= submenuRect.right;
-  if (!submenuOpensRight && !submenuOpensLeft) return false;
-
-  const edgeX = submenuOpensRight ? submenuRect.left : submenuRect.right;
-  const horizontalDelta = current.x - previous.x;
-  if ((submenuOpensRight && horizontalDelta <= 0) || (submenuOpensLeft && horizontalDelta >= 0)) {
-    return false;
-  }
-
-  if (distanceToRect(current, submenuRect) >= distanceToRect(previous, submenuRect)) {
-    return false;
-  }
-
-  return pointInTriangle(
-    current,
-    previous,
-    { x: edgeX, y: submenuRect.top - tolerance },
-    { x: edgeX, y: submenuRect.bottom + tolerance },
-  );
-};
-
-const isMousePointer = (event: PointerLikeEvent): boolean => (
-  !event.pointerType || event.pointerType === 'mouse'
-);
-
-export const useSubmenuIntent = <T,>({
-  activeId,
-  onActiveIdChange,
-  parentRef,
-  submenuRef,
-  enabled = true,
-  openDelayMs = DEFAULT_OPEN_DELAY_MS,
-  closeDelayMs = DEFAULT_CLOSE_DELAY_MS,
-  switchDelayMs = DEFAULT_SWITCH_DELAY_MS,
-  tolerance = DEFAULT_TOLERANCE,
-}: UseSubmenuIntentOptions<T>): SubmenuIntentControls<T> => {
-  const activeIdRef = useRef(activeId);
-  const onActiveIdChangeRef = useRef(onActiveIdChange);
-  const pointerHistoryRef = useRef<TimedPointerPoint[]>([]);
-  const pendingTransitionRef = useRef<PendingTransition<T> | null>(null);
-  const closeTimerRef = useRef<number | null>(null);
-  // Preserve the leave intent when the bridge cancels its timer, so moving out
-  // of the bridge can arm closing again without another DOM pointerleave.
-  const closeRequestedRef = useRef(false);
-
-  activeIdRef.current = activeId;
-  onActiveIdChangeRef.current = onActiveIdChange;
-
-  const clearPendingTransition = useCallback(() => {
-    const pending = pendingTransitionRef.current;
-    if (pending) {
-      window.clearTimeout(pending.timer);
-      pendingTransitionRef.current = null;
-    }
-  }, []);
-
-  const clearCloseTimer = useCallback(() => {
-    if (closeTimerRef.current !== null) {
-      window.clearTimeout(closeTimerRef.current);
-      closeTimerRef.current = null;
-    }
-  }, []);
-
-  const cancelPending = useCallback(() => {
-    clearPendingTransition();
-    clearCloseTimer();
-    closeRequestedRef.current = false;
-  }, [clearCloseTimer, clearPendingTransition]);
-
-  const commitChange = useCallback((targetId: T | null) => {
-    cancelPending();
-    activeIdRef.current = targetId;
-    onActiveIdChangeRef.current(targetId);
-  }, [cancelPending]);
-
-  const scheduleTransition = useCallback((
-    targetId: T | null,
-    kind: PendingTransition<T>['kind'],
-    delayMs: number,
-  ) => {
-    clearPendingTransition();
-    const timer = window.setTimeout(() => {
-      pendingTransitionRef.current = null;
-      commitChange(targetId);
-    }, delayMs);
-    pendingTransitionRef.current = { targetId, kind, timer };
-  }, [clearPendingTransition, commitChange]);
-
-  const scheduleClose = useCallback(() => {
-    clearCloseTimer();
-    closeTimerRef.current = window.setTimeout(() => {
-      closeTimerRef.current = null;
-      commitChange(null);
-    }, closeDelayMs);
-  }, [clearCloseTimer, closeDelayMs, commitChange]);
-
-  const findPreviousPoint = useCallback((current: TimedPointerPoint): TimedPointerPoint | null => {
-    for (let index = pointerHistoryRef.current.length - 1; index >= 0; index -= 1) {
-      const candidate = pointerHistoryRef.current[index];
-      const age = current.time - candidate.time;
-      const distance = Math.hypot(current.x - candidate.x, current.y - candidate.y);
-      if (age >= 0 && age <= POINTER_HISTORY_MAX_AGE_MS && distance >= POINTER_HISTORY_MIN_DISTANCE_PX) {
-        return candidate;
-      }
-    }
-    return null;
-  }, []);
-
-  const pointerHeadsToOpenSubmenu = useCallback((
-    previous: TimedPointerPoint | null,
-    current: TimedPointerPoint,
-  ): boolean => {
-    const submenuRect = submenuRef.current?.getBoundingClientRect();
-    return Boolean(
-      previous
-      && submenuRect
-      && isPointerMovingTowardSubmenu(previous, current, submenuRect, tolerance),
-    );
-  }, [submenuRef, tolerance]);
-
-  const getProtectedRegion = useCallback((point: SubmenuIntentPoint): 'submenu' | 'bridge' | null => {
-    if (activeIdRef.current === null) return null;
-    const submenuRect = submenuRef.current?.getBoundingClientRect();
-    if (!submenuRect) return null;
-    if (pointInRect(point, submenuRect)) return 'submenu';
-    const parentRect = parentRef.current?.getBoundingClientRect();
-    return parentRect && isPointInSubmenuBridge(point, parentRect, submenuRect) ? 'bridge' : null;
-  }, [parentRef, submenuRef]);
-
-  const requestChange = useCallback((targetId: T | null, event: PointerLikeEvent) => {
-    if (!enabled || !isMousePointer(event)) return;
-
-    clearCloseTimer();
-    closeRequestedRef.current = false;
-    const currentActiveId = activeIdRef.current;
-    if (Object.is(currentActiveId, targetId)) {
-      clearPendingTransition();
-      return;
-    }
-
-    const currentPoint: TimedPointerPoint = {
-      x: event.clientX,
-      y: event.clientY,
-      time: event.timeStamp,
-    };
-    const previousPoint = findPreviousPoint(currentPoint);
-
-    if (
-      currentActiveId !== null
-      && pointerHeadsToOpenSubmenu(previousPoint, currentPoint)
-    ) {
-      scheduleTransition(targetId, 'switch', switchDelayMs);
-      return;
-    }
-
-    if (currentActiveId === null && targetId !== null && openDelayMs > 0) {
-      scheduleTransition(targetId, 'open', openDelayMs);
-      return;
-    }
-
-    commitChange(targetId);
-  }, [
-    clearCloseTimer,
-    clearPendingTransition,
-    commitChange,
-    enabled,
-    findPreviousPoint,
-    openDelayMs,
-    pointerHeadsToOpenSubmenu,
-    scheduleTransition,
-    switchDelayMs,
-  ]);
-
-  const requestClose = useCallback((event?: PointerLikeEvent) => {
-    if (!enabled || (event && !isMousePointer(event))) return;
-    clearPendingTransition();
-    if (activeIdRef.current === null) return;
-    closeRequestedRef.current = true;
-    // pointerleave can be the last event before the mouse stops in the gap.
-    // Do not depend on receiving a later pointermove to cancel closing.
-    if (event && getProtectedRegion({ x: event.clientX, y: event.clientY })) {
-      clearCloseTimer();
-      return;
-    }
-    scheduleClose();
-  }, [clearCloseTimer, clearPendingTransition, enabled, getProtectedRegion, scheduleClose]);
-
-  const keepOpen = useCallback(() => {
-    cancelPending();
-  }, [cancelPending]);
-
-  const openNow = useCallback((id: T) => {
-    commitChange(id);
-  }, [commitChange]);
-
-  const closeNow = useCallback(() => {
-    commitChange(null);
-  }, [commitChange]);
-
-  useEffect(() => {
-    if (!enabled) {
-      cancelPending();
-      pointerHistoryRef.current = [];
-      return;
-    }
-
-    const handlePointerMove = (event: PointerEvent) => {
-      if (!isMousePointer(event)) return;
-
-      const currentPoint: TimedPointerPoint = {
-        x: event.clientX,
-        y: event.clientY,
-        time: event.timeStamp,
-      };
-      const previousPoint = findPreviousPoint(currentPoint);
-      const protectedRegion = getProtectedRegion(currentPoint);
-      const headingToSubmenu = !protectedRegion && activeIdRef.current !== null
-        && pointerHeadsToOpenSubmenu(previousPoint, currentPoint);
-      const pending = pendingTransitionRef.current;
-
-      if (protectedRegion) {
-        cancelPending();
-        closeRequestedRef.current = protectedRegion === 'bridge';
-      } else if (pending?.kind === 'switch') {
-        if (headingToSubmenu) {
-          scheduleTransition(pending.targetId, 'switch', switchDelayMs);
-        } else {
-          commitChange(pending.targetId);
-        }
-      } else if (closeRequestedRef.current && (closeTimerRef.current === null || headingToSubmenu)) {
-        scheduleClose();
-      }
-
-      pointerHistoryRef.current.push(currentPoint);
-      if (pointerHistoryRef.current.length > 4) {
-        pointerHistoryRef.current.shift();
-      }
-    };
-
-    const handlePointerExit = () => requestClose();
-    document.addEventListener('pointermove', handlePointerMove, { capture: true, passive: true });
-    document.addEventListener('pointerleave', handlePointerExit);
-    window.addEventListener('blur', handlePointerExit);
-    return () => {
-      document.removeEventListener('pointermove', handlePointerMove, true);
-      document.removeEventListener('pointerleave', handlePointerExit);
-      window.removeEventListener('blur', handlePointerExit);
-    };
-  }, [
-    cancelPending,
-    commitChange,
-    enabled,
-    findPreviousPoint,
-    getProtectedRegion,
-    pointerHeadsToOpenSubmenu,
-    requestClose,
-    scheduleClose,
-    scheduleTransition,
-    switchDelayMs,
-  ]);
-
-  useEffect(() => cancelPending, [cancelPending]);
-
-  return {
-    requestChange,
-    requestClose,
-    keepOpen,
-    openNow,
-    closeNow,
-    cancelPending,
-  };
-};
+// Compatibility entry point for product menus not yet moved to MenuPopover.
+// Pointer corridor and timer behavior are owned by the portable UI package.
+export {
+  useSubmenuIntent,
+  isPointInSubmenuBridge,
+  isPointerMovingTowardSubmenu,
+  type SubmenuIntentPoint,
+  type SubmenuIntentRect,
+  type UseSubmenuIntentOptions,
+  type SubmenuIntentControls,
+} from '@bitfun/ui';