diff --git a/design-system/apps/design-lab/src/App.tsx b/design-system/apps/design-lab/src/App.tsx
index f662ab53be..00d11a5445 100644
--- a/design-system/apps/design-lab/src/App.tsx
+++ b/design-system/apps/design-lab/src/App.tsx
@@ -20,6 +20,7 @@ import {
   MousePointerClick,
   Palette,
   PanelTop,
+  PanelsTopLeft,
   Search,
   Settings2,
   SquareTerminal,
@@ -49,6 +50,7 @@ import { ComponentsPage } from "./pages/ComponentsPage";
 import { ComponentDetailPage } from "./pages/ComponentDetailPage";
 import { GettingStartedPage } from "./pages/GettingStartedPage";
 import { ResourcesPage } from "./pages/ResourcesPage";
+import { PatternsPage } from "./pages/PatternsPage";
 import { ColorsPage } from "./pages/ColorsPage";
 import {
   colorTokenCatalog,
@@ -72,6 +74,7 @@ type LabRoute =
   | { page: "overview" }
   | { page: "getting-started" }
   | { page: "components" }
+  | { page: "patterns" }
   | { page: "flow-chat" }
   | { page: "colors" }
   | { page: "resources" }
@@ -129,6 +132,9 @@ function parseRoute(hash: string): LabRoute {
   if (route === "components") {
     return { page: "components" };
   }
+  if (route === "patterns") {
+    return { page: "patterns" };
+  }
   if (route === "flow-chat") {
     return { page: "flow-chat" };
   }
@@ -215,6 +221,13 @@ export function App() {
       label: t("nav.components"),
       route: { page: "components" },
     },
+    {
+      detail: t("search.patternsDetail"),
+      icon: PanelsTopLeft,
+      keywords: `patterns recipes settings navigation search device ${t("nav.patterns")}`,
+      label: t("nav.patterns"),
+      route: { page: "patterns" },
+    },
     {
       detail: t("search.flowChatDetail", { count: flowChatComponents.length }),
       icon: SquareTerminal,
@@ -456,6 +469,17 @@ export function App() {
             <Blocks aria-hidden="true" size={17} />
             <span>{t("nav.components")}</span>
           </a>
+          <a
+            aria-current={route.page === "patterns" ? "page" : undefined}
+            href="#patterns"
+            onClick={(event) => {
+              event.preventDefault();
+              navigate({ page: "patterns" });
+            }}
+          >
+            <PanelsTopLeft aria-hidden="true" size={17} />
+            <span>{t("nav.patterns")}</span>
+          </a>
           <div className="lab-component-links">
             {standardComponents.map((component) => {
               const Icon = componentIcons[component.name] ?? Blocks;
@@ -701,6 +725,15 @@ export function App() {
             />
           )}
 
+          {route.page === "patterns" && (
+            <PatternsPage
+              colorScheme={colorScheme}
+              contrast={contrast}
+              density={density}
+              tokenOverrides={tokenOverrides}
+            />
+          )}
+
           {route.page === "flow-chat" && (
             <ComponentsPage
               category="flow-chat"
diff --git a/design-system/apps/design-lab/src/i18n/messages.ts b/design-system/apps/design-lab/src/i18n/messages.ts
index 09046d6a76..8ad54fe3a8 100644
--- a/design-system/apps/design-lab/src/i18n/messages.ts
+++ b/design-system/apps/design-lab/src/i18n/messages.ts
@@ -13,6 +13,7 @@ export const enUSMessages = {
   "nav.colors": "Colors",
   "nav.library": "Library",
   "nav.components": "Components",
+  "nav.patterns": "Patterns",
   "nav.flowChat": "FlowChat",
   "nav.docs": "Docs",
   "nav.resources": "Resources",
@@ -24,6 +25,7 @@ export const enUSMessages = {
   "search.tokensDetail": "{count} editable contracts",
   "search.colorsDetail": "{count} semantic color tokens and real reference scales",
   "search.componentsDetail": "{count} registered components",
+  "search.patternsDetail": "Reference compositions assembled from public components",
   "search.flowChatDetail": "{count} shared templates and standard tool-card specimens",
   "search.resourcesDetail": "Package documentation and release policy",
   "search.componentDetail": "{category}",
@@ -64,6 +66,7 @@ export const enUSMessages = {
   "component.CommandToolCard.description": "A prominent command view with controlled output disclosure, process metadata, and capability-driven actions.",
   "component.Composer.description": "A composable message editor shell with independent context, editor, and action regions.",
   "component.ConfirmDialog.description": "A semantic confirmation dialog with optional preview content, destructive emphasis, and async actions.",
+  "component.Disclosure.description": "Reveals supporting content with controlled or uncontrolled state, accessible relationships, and independent header actions.",
   "component.ContextCompressionToolCard.description": "A prominent context-compression result with one compact length-and-ratio summary, plus progress and failure states.",
   "component.DefaultToolCard.description": "The ambient fallback for an unregistered tool summary, sanitized input, result, and confirmation state.",
   "component.DirectoryListToolCard.description": "An ambient directory-list card with structured metadata and file results.",
@@ -153,6 +156,47 @@ export const enUSMessages = {
   "resources.boundaryKicker": "Dependency direction",
   "resources.boundaryTitle": "Tokens → theme → components → Design Lab",
   "resources.boundaryDescription": "Design Lab is an authoring and inspection surface. Public packages remain independent from its routes, state, and locale catalog.",
+  "patterns.kicker": "Recipes",
+  "patterns.title": "Product patterns from the reference design.",
+  "patterns.description": "Reusable settings, navigation, command-search, and device compositions built only from public design-system contracts.",
+  "patterns.settings.title": "Settings form",
+  "patterns.settings.description": "A 216-pixel navigation companion, clear page hierarchy, and compact grouped fields mirror the reference settings surface.",
+  "patterns.settings.language": "Interface language",
+  "patterns.settings.languageDescription": "Choose the language used throughout the interface.",
+  "patterns.settings.theme": "Appearance",
+  "patterns.settings.themeDescription": "Follow the system or choose a fixed color scheme.",
+  "patterns.settings.system": "System",
+  "patterns.settings.pointer": "Pointer glow",
+  "patterns.settings.pointerDescription": "Highlight interactive targets while the pointer moves.",
+  "patterns.settings.fontSize": "Font size",
+  "patterns.settings.fontSizeDescription": "Adjust the density of interface text and controls.",
+  "patterns.navigation.title": "Application navigation",
+  "patterns.navigation.description": "Compact 30-pixel rows, grouped destinations, disclosure, search, and persistent device status.",
+  "patterns.navigation.search": "Search navigation",
+  "patterns.navigation.workspace": "Workspace",
+  "patterns.navigation.projects": "Projects",
+  "patterns.navigation.tools": "Development tools",
+  "patterns.navigation.status": "Keep primary navigation quiet; reveal secondary destinations only when they are needed.",
+  "patterns.search.title": "Search and quick actions",
+  "patterns.search.description": "One searchable surface combines scope selection, common actions, and recent resources.",
+  "patterns.search.searchPlaceholder": "Search files, commands, and actions",
+  "patterns.search.all": "All",
+  "patterns.search.files": "Files",
+  "patterns.search.commands": "Commands",
+  "patterns.search.recent": "Recent resources",
+  "patterns.actions.newProject": "New project",
+  "patterns.actions.newProjectDescription": "Create a workspace from a template.",
+  "patterns.actions.openFiles": "Open files",
+  "patterns.actions.openFilesDescription": "Choose one or more local files.",
+  "patterns.actions.openBrowser": "Open browser",
+  "patterns.actions.openBrowserDescription": "Inspect a web page inside the workspace.",
+  "patterns.actions.openTerminal": "Open terminal",
+  "patterns.actions.openTerminalDescription": "Start a shell in the active workspace.",
+  "patterns.device.title": "Connected device card",
+  "patterns.device.description": "A compact status-and-action card for local and remote product surfaces.",
+  "patterns.device.online": "Online",
+  "patterns.device.connect": "Connect",
+  "patterns.device.refresh": "Refresh device status",
   "components.preview.primary": "Primary",
   "components.preview.actionCardTitle": "New session",
   "components.preview.actionCardDescription": "Start a conversation using the selected assistant",
@@ -613,6 +657,7 @@ export const zhCNMessages = {
   "nav.colors": "Colors",
   "nav.library": "组件库",
   "nav.components": "组件",
+  "nav.patterns": "模式",
   "nav.flowChat": "FlowChat",
   "nav.docs": "文档",
   "nav.resources": "资源",
@@ -624,6 +669,7 @@ export const zhCNMessages = {
   "search.tokensDetail": "{count} 个可编辑契约",
   "search.colorsDetail": "{count} 个语义颜色 Token 与真实基础色阶",
   "search.componentsDetail": "{count} 个已注册组件",
+  "search.patternsDetail": "由公开组件组合而成的参考界面模式",
   "search.flowChatDetail": "{count} 个通用模板及标准工具卡片样例",
   "search.resourcesDetail": "包文档与发布策略",
   "search.componentDetail": "{category}",
@@ -664,6 +710,7 @@ export const zhCNMessages = {
   "component.CommandToolCard.description": "关注型命令视图，统一承载受控输出展开、进程元数据与能力驱动的操作。",
   "component.Composer.description": "可组合的消息编辑外壳，提供彼此独立的上下文、编辑和操作区域。",
   "component.ConfirmDialog.description": "支持可选预览、危险操作强调和异步操作的语义化确认对话框。",
+  "component.Disclosure.description": "以受控或非受控状态展开辅助内容，并提供可访问关系和独立标题操作。",
   "component.ContextCompressionToolCard.description": "关注型上下文压缩结果，以一条紧凑信息呈现压缩后长度与压缩比例，并保留处理和失败状态。",
   "component.DefaultToolCard.description": "未注册工具的低关注兜底卡片，统一承载摘要、净化后的输入、结果与确认状态。",
   "component.DirectoryListToolCard.description": "带结构化元数据和文件结果的低关注目录列表卡片。",
@@ -753,6 +800,47 @@ export const zhCNMessages = {
   "resources.boundaryKicker": "依赖方向",
   "resources.boundaryTitle": "Token → 主题 → 组件 → Design Lab",
   "resources.boundaryDescription": "Design Lab 是创作与检查界面，公共包继续与它的路由、状态和语言目录保持独立。",
+  "patterns.kicker": "组合范式",
+  "patterns.title": "来自参考设计的产品模式。",
+  "patterns.description": "仅使用公开设计系统契约构建的设置、导航、命令搜索和设备组合。",
+  "patterns.settings.title": "设置表单",
+  "patterns.settings.description": "216 像素导航搭档、清晰页面层级与紧凑分组字段复现参考设置界面。",
+  "patterns.settings.language": "界面语言",
+  "patterns.settings.languageDescription": "选择整个界面使用的语言。",
+  "patterns.settings.theme": "外观",
+  "patterns.settings.themeDescription": "跟随系统或选择固定配色模式。",
+  "patterns.settings.system": "跟随系统",
+  "patterns.settings.pointer": "指针光效",
+  "patterns.settings.pointerDescription": "指针移动时突出显示可交互目标。",
+  "patterns.settings.fontSize": "字体大小",
+  "patterns.settings.fontSizeDescription": "调整界面文字和控件的密度。",
+  "patterns.navigation.title": "应用导航",
+  "patterns.navigation.description": "紧凑的 30 像素行、分组目标、展开区域、搜索与常驻设备状态。",
+  "patterns.navigation.search": "搜索导航",
+  "patterns.navigation.workspace": "工作区",
+  "patterns.navigation.projects": "项目",
+  "patterns.navigation.tools": "开发工具",
+  "patterns.navigation.status": "保持主导航安静，只在需要时展开次要目标。",
+  "patterns.search.title": "搜索与快捷操作",
+  "patterns.search.description": "在一个可搜索界面中组合范围选择、常用操作和最近资源。",
+  "patterns.search.searchPlaceholder": "搜索文件、命令和操作",
+  "patterns.search.all": "全部",
+  "patterns.search.files": "文件",
+  "patterns.search.commands": "命令",
+  "patterns.search.recent": "最近资源",
+  "patterns.actions.newProject": "新建项目",
+  "patterns.actions.newProjectDescription": "从模板创建工作区。",
+  "patterns.actions.openFiles": "打开文件",
+  "patterns.actions.openFilesDescription": "选择一个或多个本地文件。",
+  "patterns.actions.openBrowser": "打开浏览器",
+  "patterns.actions.openBrowserDescription": "在工作区内检查网页。",
+  "patterns.actions.openTerminal": "打开终端",
+  "patterns.actions.openTerminalDescription": "在当前工作区启动 Shell。",
+  "patterns.device.title": "已连接设备卡片",
+  "patterns.device.description": "适用于本地和远端产品界面的紧凑状态操作卡片。",
+  "patterns.device.online": "在线",
+  "patterns.device.connect": "连接",
+  "patterns.device.refresh": "刷新设备状态",
   "components.preview.primary": "主要操作",
   "components.preview.actionCardTitle": "新建会话",
   "components.preview.actionCardDescription": "使用所选助手开始对话",
diff --git a/design-system/apps/design-lab/src/pages/ComponentDetailPage.tsx b/design-system/apps/design-lab/src/pages/ComponentDetailPage.tsx
index 42f104a4a2..46d66ceb11 100644
--- a/design-system/apps/design-lab/src/pages/ComponentDetailPage.tsx
+++ b/design-system/apps/design-lab/src/pages/ComponentDetailPage.tsx
@@ -38,6 +38,7 @@ import {
   ComposerDivider,
   ComposerToolbar,
   ConfirmDialog,
+  Disclosure,
   Field,
   FieldGroup,
   FieldRow,
@@ -271,6 +272,8 @@ export function ComponentDetailPage({
   const [previewState, setPreviewState] = useState(
     component.name === "Card"
       ? "raised"
+      : component.name === "Disclosure"
+        ? "open"
       : component.name === "Composer"
       ? "with-context"
       : component.name === "Switch"
@@ -335,6 +338,8 @@ export function ComponentDetailPage({
         return ["default"] as const;
       case "FieldGroup":
         return ["subtle", "plain", "divided"] as const;
+      case "Disclosure":
+        return ["closed", "open", "hover", "focus-visible", "disabled"] as const;
       case "Menu":
         return ["default", "scrolling", "focus-within", "disabled-item", "checked-item"] as const;
       case "NavigationPanel":
@@ -472,6 +477,10 @@ export function ComponentDetailPage({
     if (component.name === "StatusPill") {
       return `import { Icon, StatusPill } from "@bitfun/ui";\n\n<StatusPill leading={<Icon name="circle" />} tone="${previewState}">\n  Ask\n</StatusPill>`;
     }
+    if (component.name === "Disclosure") {
+      const stateProps = previewState === "open" ? " defaultOpen" : previewState === "disabled" ? " disabled" : "";
+      return `import { Disclosure } from "@bitfun/ui";\n\n<Disclosure summary="${t("components.preview.appearance")}"${stateProps}>\n  ${t("components.preview.appearanceDescription")}\n</Disclosure>`;
+    }
     if (component.name === "NavigationPanel") {
       return `import { IconButton, NavigationPanel, NavigationPanelItem, NavigationPanelSection, SearchField } from "@bitfun/ui";\nimport { Monitor, Search, Settings } from "lucide-react";\n\n<NavigationPanel\n  aria-label="${t("components.preview.navigationPanelLabel")}"\n  footer={<>\n    <NavigationPanelItem leading={<Monitor />}>${t("components.preview.navigationPanelDevice")}</NavigationPanelItem>\n    <IconButton aria-label="${t("components.preview.settings")}" icon={<Settings />} />\n  </>}\n  header={<SearchField aria-label="${t("components.preview.searchLabel")}" leadingIcon={<Search />} />}\n  scrollbarVisibility="${navigationPanelShowScrollbar ? "auto" : "hidden"}"\n>\n  <NavigationPanelSection title="${t("components.preview.navigationPanelSectionTitle")}">\n    <NavigationPanelItem selected>${t("components.preview.menuItemOne")}</NavigationPanelItem>\n    <NavigationPanelItem>${t("components.preview.menuItemTwo")}</NavigationPanelItem>\n  </NavigationPanelSection>\n</NavigationPanel>`;
     }
@@ -718,6 +727,20 @@ export function ComponentDetailPage({
       return <Icon name={iconName} size={iconSize} tone={iconTone} />;
     }
 
+    if (component.name === "Disclosure") {
+      return (
+        <Disclosure
+          data-bf-preview-state={state === "hover" || state === "focus-visible" ? state : undefined}
+          defaultOpen={state === "open"}
+          disabled={state === "disabled"}
+          key={state}
+          summary={t("components.preview.appearance")}
+        >
+          {t("components.preview.appearanceDescription")}
+        </Disclosure>
+      );
+    }
+
     if (component.name === "ActionCard") {
       return (
         <ActionCard
diff --git a/design-system/apps/design-lab/src/pages/ComponentsPage.tsx b/design-system/apps/design-lab/src/pages/ComponentsPage.tsx
index 4a6ff35152..289cb63b96 100644
--- a/design-system/apps/design-lab/src/pages/ComponentsPage.tsx
+++ b/design-system/apps/design-lab/src/pages/ComponentsPage.tsx
@@ -3,6 +3,7 @@ import {
   ArrowUp,
   ArrowRight,
   Check,
+  ChevronRight,
   Command,
   Eye,
   Heading,
@@ -23,12 +24,18 @@ import {
   ActionCard,
   ActionItem,
   ActivityItem,
+  Alert,
+  Avatar,
+  AvatarGroup,
   Button,
   Card,
   CardHeader,
   ChangeCount,
+  Checkbox,
   Composer,
   ComposerToolbar,
+  Disclosure,
+  Empty,
   Field,
   FieldGroup,
   FieldRow,
@@ -43,7 +50,9 @@ import {
   NavigationPanel,
   NavigationPanelItem,
   NavigationPanelSection,
+  NumberInput,
   PageHeader,
+  Radio,
   ScrollArea,
   SearchField,
   SegmentedControl,
@@ -52,6 +61,7 @@ import {
   StatusPill,
   Switch,
   TabGroup,
+  Textarea,
   ThemeRoot,
   Toolbar,
   ToolbarBadge,
@@ -108,6 +118,7 @@ const componentIcons = {
   Select: List,
   StatusPill: Check,
   Switch: ToggleLeft,
+  Disclosure: ChevronRight,
   TabGroup: PanelTop,
   Toolbar: PanelTop,
   Tooltip: MessageCircle,
@@ -262,6 +273,65 @@ function ComponentCardPreview({ component }: { component: ComponentMeta }) {
           {t("components.preview.confirmDelete")}
         </Button>
       );
+    case "Alert":
+      return (
+        <Alert
+          message={t("components.preview.fieldDescription")}
+          title={t("components.preview.notifications")}
+          tone="info"
+        />
+      );
+    case "Avatar":
+      return (
+        <AvatarGroup maxCount={3}>
+          <Avatar>BF</Avatar>
+          <Avatar>UI</Avatar>
+          <Avatar>DS</Avatar>
+          <Avatar>+1</Avatar>
+        </AvatarGroup>
+      );
+    case "Checkbox":
+      return (
+        <Checkbox
+          defaultChecked
+          description={t("components.preview.fieldDescription")}
+          label={t("components.preview.notifications")}
+          tabIndex={-1}
+        />
+      );
+    case "NumberInput":
+      return <NumberInput onChange={() => undefined} value={8} />;
+    case "Radio":
+      return (
+        <Radio
+          defaultChecked
+          description={t("components.preview.fieldDescription")}
+          label={t("components.preview.fieldValue")}
+          name="component-preview-radio"
+          tabIndex={-1}
+        />
+      );
+    case "Textarea":
+      return (
+        <Textarea
+          aria-label={t("components.preview.inputLabel")}
+          defaultValue={t("components.preview.fieldValue")}
+          showCount
+        />
+      );
+    case "Disclosure":
+      return (
+        <Disclosure defaultOpen summary={t("components.preview.appearance")}>
+          <span>{t("components.preview.appearanceDescription")}</span>
+        </Disclosure>
+      );
+    case "Empty":
+      return (
+        <Empty
+          description={t("components.preview.cardDescription")}
+          title={t("components.preview.cardTitle")}
+        />
+      );
     case "Composer":
       return (
         <Composer
diff --git a/design-system/apps/design-lab/src/pages/PatternsPage.tsx b/design-system/apps/design-lab/src/pages/PatternsPage.tsx
new file mode 100644
index 0000000000..c5fb1ac720
--- /dev/null
+++ b/design-system/apps/design-lab/src/pages/PatternsPage.tsx
@@ -0,0 +1,177 @@
+import { useMemo, useState, type ReactNode } from "react";
+import {
+  ActionCard,
+  ActivityItem,
+  Button,
+  Card,
+  CardBody,
+  CardHeader,
+  Disclosure,
+  Field,
+  FieldGroup,
+  FieldRow,
+  FormSection,
+  Icon,
+  IconButton,
+  KeyHint,
+  NavigationPanel,
+  NavigationPanelItem,
+  NavigationPanelSection,
+  PageHeader,
+  SearchField,
+  SegmentedControl,
+  Select,
+  StatusPill,
+  Switch,
+  ThemeRoot,
+  type ColorScheme,
+  type ContrastMode,
+  type DensityMode,
+  type IconName,
+  type TokenOverrides,
+} from "@bitfun/ui";
+import { useI18n, type MessageKey } from "../i18n";
+
+interface PatternsPageProps {
+  colorScheme: ColorScheme;
+  contrast: ContrastMode;
+  density: DensityMode;
+  tokenOverrides: TokenOverrides;
+}
+
+const quickActions: readonly {
+  description: MessageKey;
+  icon: IconName;
+  title: MessageKey;
+}[] = [
+  { description: "patterns.actions.newProjectDescription", icon: "plus", title: "patterns.actions.newProject" },
+  { description: "patterns.actions.openFilesDescription", icon: "files", title: "patterns.actions.openFiles" },
+  { description: "patterns.actions.openBrowserDescription", icon: "browser", title: "patterns.actions.openBrowser" },
+  { description: "patterns.actions.openTerminalDescription", icon: "terminal", title: "patterns.actions.openTerminal" },
+];
+
+export function PatternsPage({ colorScheme, contrast, density, tokenOverrides }: PatternsPageProps) {
+  const { t } = useI18n();
+  const [appearance, setAppearance] = useState("system");
+  const [fontSize, setFontSize] = useState("medium");
+  const [language, setLanguage] = useState("zh-CN");
+  const [pointerGlow, setPointerGlow] = useState(true);
+  const [query, setQuery] = useState("");
+  const [scope, setScope] = useState("all");
+  const visibleActions = useMemo(() => {
+    const normalized = query.trim().toLowerCase();
+    if (!normalized) return quickActions;
+    return quickActions.filter((action) => (
+      `${t(action.title)} ${t(action.description)}`.toLowerCase().includes(normalized)
+    ));
+  }, [query, t]);
+
+  return (
+    <ThemeRoot className="patterns-theme-host" colorScheme={colorScheme} contrast={contrast} density={density} tokenOverrides={tokenOverrides}>
+      <main className="lab-page lab-page--patterns" id="patterns">
+        <header className="page-heading">
+          <span className="page-kicker">{t("patterns.kicker")}</span>
+          <h1>{t("patterns.title")}</h1>
+          <p>{t("patterns.description")}</p>
+        </header>
+
+        <PatternSection description={t("patterns.settings.description")} index="01" title={t("patterns.settings.title")}>
+          <Card appearance="raised" className="pattern-settings" data-bf-pattern="settings-form" padding="md" radius="md">
+            <PageHeader description={t("components.preview.appearanceDescription")} level={3} size="lg" title={t("components.preview.appearance")} />
+            <CardBody>
+              <FormSection description={t("patterns.settings.description")} headingAs="h4" title={t("components.preview.appearance")}>
+                <FieldGroup appearance="subtle" dividers>
+                  <FieldRow>
+                    <Field controlWidth="fill" description={t("patterns.settings.languageDescription")} label={t("patterns.settings.language")} labelWidth="md" orientation="horizontal">
+                      <Select onValueChange={(value) => setLanguage(String(value))} options={[{ label: "简体中文", value: "zh-CN" }, { label: "English", value: "en-US" }, { label: "繁體中文", value: "zh-TW" }]} value={language} />
+                    </Field>
+                  </FieldRow>
+                  <FieldRow>
+                    <Field controlWidth="fill" description={t("patterns.settings.themeDescription")} label={t("patterns.settings.theme")} labelWidth="md" orientation="horizontal">
+                      <SegmentedControl onValueChange={setAppearance} options={[{ label: t("patterns.settings.system"), value: "system" }, { label: t("settings.light"), value: "light" }, { label: t("settings.dark"), value: "dark" }]} value={appearance} />
+                    </Field>
+                  </FieldRow>
+                  <FieldRow>
+                    <Field description={t("patterns.settings.pointerDescription")} label={t("patterns.settings.pointer")} labelWidth="md" orientation="horizontal">
+                      <Switch aria-label={t("patterns.settings.pointer")} checked={pointerGlow} onCheckedChange={setPointerGlow} />
+                    </Field>
+                  </FieldRow>
+                </FieldGroup>
+              </FormSection>
+              <FormSection title={t("patterns.settings.fontSize")}>
+                <FieldGroup appearance="subtle">
+                  <FieldRow>
+                    <Field controlWidth="fill" description={t("patterns.settings.fontSizeDescription")} label={t("patterns.settings.fontSize")} labelWidth="md" orientation="horizontal">
+                      <SegmentedControl onValueChange={setFontSize} options={[{ label: t("settings.compact"), value: "small" }, { label: t("settings.comfortable"), value: "medium" }, { label: t("settings.touch"), value: "large" }]} value={fontSize} />
+                    </Field>
+                  </FieldRow>
+                </FieldGroup>
+              </FormSection>
+            </CardBody>
+          </Card>
+        </PatternSection>
+
+        <PatternSection description={t("patterns.navigation.description")} index="02" title={t("patterns.navigation.title")}>
+          <div className="pattern-navigation-stage" data-bf-pattern="navigation-panel">
+            <NavigationPanel
+              aria-label={t("patterns.navigation.title")}
+              footer={<div className="pattern-navigation-footer"><StatusPill leading={<Icon name="circle" />} tone="success">{t("patterns.device.online")}</StatusPill><IconButton aria-label={t("patterns.device.refresh")} icon={<Icon name="refresh" />} size="xs" variant="quiet" /></div>}
+              header={<SearchField aria-label={t("patterns.navigation.search")} leadingIcon={<Icon name="search" />} placeholder={t("patterns.navigation.search")} />}
+            >
+              <NavigationPanelSection title={t("patterns.navigation.workspace")}>
+                <NavigationPanelItem leading={<Icon name="folder" />} selected>Open-BitFun</NavigationPanelItem>
+                <NavigationPanelItem leading={<Icon name="star" />}>BitFun UI</NavigationPanelItem>
+              </NavigationPanelSection>
+              <Disclosure defaultOpen leading={<Icon name="extension" />} summary={t("patterns.navigation.tools")}>
+                <NavigationPanelItem leading={<Icon name="browser" />}>{t("patterns.actions.openBrowser")}</NavigationPanelItem>
+                <NavigationPanelItem leading={<Icon name="terminal" />}>{t("patterns.actions.openTerminal")}</NavigationPanelItem>
+              </Disclosure>
+              <NavigationPanelSection title={t("patterns.navigation.projects")}>
+                <NavigationPanelItem leading={<Icon name="files" />}>design-system</NavigationPanelItem>
+                <NavigationPanelItem leading={<Icon name="git" />}>fmy/ui-sys</NavigationPanelItem>
+              </NavigationPanelSection>
+            </NavigationPanel>
+            <div className="pattern-navigation-copy">
+              <PageHeader description={t("patterns.navigation.description")} level={3} size="lg" title={t("patterns.navigation.workspace")} />
+              <p>{t("patterns.navigation.status")}</p>
+            </div>
+          </div>
+        </PatternSection>
+
+        <PatternSection description={t("patterns.search.description")} index="03" title={t("patterns.search.title")}>
+          <Card appearance="raised" className="pattern-command" data-bf-pattern="search-command-surface" gap="md" padding="md" radius="md">
+            <CardHeader actions={<SegmentedControl onValueChange={setScope} options={[{ label: t("patterns.search.all"), value: "all" }, { label: t("patterns.search.files"), value: "files" }, { label: t("patterns.search.commands"), value: "commands" }]} value={scope} />} description={t("patterns.search.description")} title={t("patterns.search.title")} />
+            <SearchField aria-label={t("patterns.search.searchPlaceholder")} clearLabel={t("components.preview.close")} leadingIcon={<Icon name="search" />} onClear={() => setQuery("")} onValueChange={setQuery} placeholder={t("patterns.search.searchPlaceholder")} shortcut={<KeyHint>Ctrl K</KeyHint>} value={query} />
+            <CardBody>
+              <div className="pattern-action-grid">
+                {visibleActions.map((action) => <ActionCard description={t(action.description)} key={action.title} leading={<Icon name={action.icon} />} size="md">{t(action.title)}</ActionCard>)}
+              </div>
+              <div className="pattern-recent-list">
+                <strong>{t("patterns.search.recent")}</strong>
+                <ActivityItem actions={[{ icon: <Icon name="arrow-up-right" />, id: "open-readme", label: t("patterns.actions.openFiles") }]} appearance="surface" label="README.md" leading={<Icon name="files" />}>design-system/README.md</ActivityItem>
+                <ActivityItem actions={[{ icon: <Icon name="arrow-up-right" />, id: "open-package", label: t("patterns.actions.openFiles") }]} appearance="surface" label="package.json" leading={<Icon name="files" />}>design-system/packages/ui/package.json</ActivityItem>
+              </div>
+            </CardBody>
+          </Card>
+        </PatternSection>
+
+        <PatternSection description={t("patterns.device.description")} index="04" title={t("patterns.device.title")}>
+          <Card appearance="subtle" className="pattern-device-card" data-bf-pattern="device-card" gap="md" padding="md" radius="md">
+            <CardHeader actions={<IconButton aria-label={t("patterns.device.refresh")} icon={<Icon name="refresh" />} size="sm" variant="quiet" />} description="macOS · 127.0.0.1" leading={<span className="pattern-device-icon"><Icon name="device-mac" size="lg" /></span>} title="MacBook Pro" />
+            <CardBody><StatusPill leading={<Icon name="circle" />} tone="success">{t("patterns.device.online")}</StatusPill></CardBody>
+            <Button leadingIcon={<Icon name="link" />} size="sm" variant="fill">{t("patterns.device.connect")}</Button>
+          </Card>
+        </PatternSection>
+      </main>
+    </ThemeRoot>
+  );
+}
+
+function PatternSection({ children, description, index, title }: { children: ReactNode; description: string; index: string; title: string }) {
+  return (
+    <section className="pattern-section">
+      <div className="pattern-section__heading"><span>{index}</span><div><h2>{title}</h2><p>{description}</p></div></div>
+      {children}
+    </section>
+  );
+}
diff --git a/design-system/apps/design-lab/src/styles.css b/design-system/apps/design-lab/src/styles.css
index f4cd165144..192c168981 100644
--- a/design-system/apps/design-lab/src/styles.css
+++ b/design-system/apps/design-lab/src/styles.css
@@ -2823,6 +2823,178 @@ input.lab-force-focus {
   text-align: right;
 }
 
+/* Patterns */
+.patterns-theme-host {
+  display: block;
+  min-height: 100%;
+  color: var(--bf-color-content-primary);
+}
+
+.lab-page--patterns {
+  display: grid;
+  gap: 48px;
+}
+
+.lab-page--patterns > .page-heading {
+  margin-bottom: 0;
+}
+
+.pattern-section {
+  display: grid;
+  grid-template-columns: minmax(180px, 0.34fr) minmax(0, 1fr);
+  gap: clamp(28px, 4vw, 64px);
+  align-items: start;
+  padding-block-start: 30px;
+  border-block-start: 1px solid var(--lab-border);
+}
+
+.pattern-section__heading {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  gap: 14px;
+}
+
+.pattern-section__heading > span {
+  color: var(--lab-text-muted);
+  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
+  font-size: 10px;
+}
+
+.pattern-section__heading div {
+  display: grid;
+  gap: 7px;
+}
+
+.pattern-section__heading h2,
+.pattern-section__heading p,
+.pattern-navigation-copy p {
+  margin: 0;
+}
+
+.pattern-section__heading h2 {
+  font-size: 17px;
+  letter-spacing: -0.02em;
+}
+
+.pattern-section__heading p,
+.pattern-navigation-copy p {
+  color: var(--lab-text-secondary);
+  font-size: 11px;
+  line-height: 1.65;
+}
+
+.pattern-settings {
+  display: grid;
+  gap: var(--bf-space-8);
+  max-inline-size: 860px;
+}
+
+.pattern-settings [data-bf-part="body"] {
+  display: grid;
+  gap: var(--bf-space-8);
+}
+
+.pattern-settings [data-bf-component="select"],
+.pattern-settings [data-bf-component="segmented-control"] {
+  inline-size: min(100%, 240px);
+}
+
+.pattern-navigation-stage {
+  display: grid;
+  grid-template-columns: 216px minmax(0, 1fr);
+  min-block-size: 560px;
+  overflow: hidden;
+  border: 1px solid var(--bf-color-border-subtle);
+  border-radius: var(--bf-radius-lg);
+  background: var(--bf-color-surface-base);
+}
+
+.pattern-navigation-stage > [data-bf-component="navigation-panel"] {
+  inline-size: 216px;
+  block-size: 560px;
+  border-inline-end: 1px solid var(--bf-color-border-subtle);
+}
+
+.pattern-navigation-stage [data-bf-component="disclosure"] {
+  inline-size: 100%;
+}
+
+.pattern-navigation-stage [data-bf-component="disclosure"] [data-bf-part="content-inner"] {
+  display: grid;
+  gap: var(--bf-space-1);
+  padding-inline-end: 0;
+}
+
+.pattern-navigation-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  inline-size: 100%;
+}
+
+.pattern-navigation-copy {
+  display: grid;
+  align-content: center;
+  gap: var(--bf-space-5);
+  max-inline-size: 520px;
+  padding: clamp(32px, 6vw, 80px);
+}
+
+.pattern-command {
+  max-inline-size: 900px;
+}
+
+.pattern-command > [data-bf-component="search-field"] {
+  inline-size: 100%;
+}
+
+.pattern-command [data-bf-part="body"] {
+  display: grid;
+  gap: var(--bf-space-6);
+}
+
+.pattern-action-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--bf-space-2);
+}
+
+.pattern-action-grid [data-bf-component="action-card"] {
+  inline-size: 100%;
+}
+
+.pattern-recent-list {
+  display: grid;
+  gap: var(--bf-space-2);
+  padding-block-start: var(--bf-space-5);
+  border-block-start: 1px solid var(--bf-color-border-subtle);
+}
+
+.pattern-recent-list > strong {
+  color: var(--bf-color-content-secondary);
+  font-size: var(--bf-font-size-caption);
+  font-weight: var(--bf-font-weight-semibold);
+}
+
+.pattern-device-card {
+  inline-size: min(100%, 380px);
+}
+
+.pattern-device-card [data-bf-part="body"] {
+  display: flex;
+  align-items: center;
+}
+
+.pattern-device-icon {
+  display: grid;
+  inline-size: var(--bf-control-height-lg);
+  block-size: var(--bf-control-height-lg);
+  place-items: center;
+  border-radius: var(--bf-radius-base);
+  color: var(--bf-color-content-secondary);
+  background: var(--bf-color-surface-subtle);
+}
+
 /* Component reference page */
 .lab-page--component-detail {
   width: 100%;
@@ -3079,6 +3251,10 @@ input.lab-force-focus {
     grid-template-columns: 1fr;
   }
 
+  .pattern-section {
+    grid-template-columns: 1fr;
+  }
+
 }
 
 @media (max-width: 860px) {
@@ -3155,6 +3331,45 @@ input.lab-force-focus {
     text-align: left;
   }
 
+  .pattern-navigation-stage {
+    grid-template-columns: 1fr;
+  }
+
+  .pattern-navigation-stage > [data-bf-component="navigation-panel"] {
+    inline-size: 100%;
+    border-inline-end: 0;
+    border-block-end: 1px solid var(--bf-color-border-subtle);
+  }
+
+  .pattern-navigation-copy {
+    padding: 28px;
+  }
+
+  .pattern-action-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .pattern-settings [data-bf-component="field"][data-orientation="horizontal"] {
+    grid-template-columns: minmax(0, 1fr);
+    align-items: start;
+  }
+
+  .pattern-settings [data-bf-component="field"] [data-bf-part="control"],
+  .pattern-settings [data-bf-component="select"],
+  .pattern-settings [data-bf-component="segmented-control"] {
+    inline-size: 100%;
+  }
+
+  .pattern-command > [data-bf-part="header"] {
+    flex-direction: column;
+  }
+
+  .pattern-command > [data-bf-part="header"] > [data-bf-part="actions"],
+  .pattern-command > [data-bf-part="header"] [data-bf-component="segmented-control"] {
+    inline-size: 100%;
+    margin-inline-start: 0;
+  }
+
   .component-workbench__toolbar {
     align-items: start;
     flex-direction: column;
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 740620d428..07eecfb551 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
@@ -160,7 +160,8 @@ test("FlowChat gallery renders only the real migrated tool-card components", asy
 
 test("CommandToolCard previews follow the runtime command-state presentation", async () => {
   const preview = await readFile(flowChatPreviewSource, "utf8");
-  const commandPreview = /function CommandPreview[\s\S]*?\r?\n}\r?\n\r?\nfunction resolveFileOperation/.exec(preview)?.[0];
+  const commandPreview =
+    /function CommandPreview[\s\S]*?\r?\n}\r?\n\r?\nfunction resolveFileOperation/.exec(preview)?.[0];
 
   assert.ok(commandPreview);
   assert.match(
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
new file mode 100644
index 0000000000..6c9bd26234
--- /dev/null
+++ b/design-system/apps/design-lab/vite/patterns-page-contract.test.mjs
@@ -0,0 +1,39 @@
+import assert from "node:assert/strict";
+import { readFile } from "node:fs/promises";
+import test from "node:test";
+
+const appSource = new URL("../src/App.tsx", import.meta.url);
+const pageSource = new URL("../src/pages/PatternsPage.tsx", import.meta.url);
+const stylesSource = new URL("../src/styles.css", import.meta.url);
+
+test("Patterns is a first-class searchable Design Lab route", async () => {
+  const app = await readFile(appSource, "utf8");
+  assert.match(app, /page: "patterns"/);
+  assert.match(app, /<PatternsPage/);
+  assert.match(app, /search\.patternsDetail/);
+  assert.match(app, /nav\.patterns/);
+});
+
+test("Patterns composes only public non-FlowChat contracts", async () => {
+  const page = await readFile(pageSource, "utf8");
+  assert.match(page, /data-bf-pattern="settings-form"/);
+  assert.match(page, /data-bf-pattern="navigation-panel"/);
+  assert.match(page, /data-bf-pattern="search-command-surface"/);
+  assert.match(page, /data-bf-pattern="device-card"/);
+  assert.match(page, /<Disclosure/);
+  assert.match(page, /<FieldGroup/);
+  assert.match(page, /<NavigationPanel/);
+  assert.match(page, /<SearchField/);
+  assert.match(page, /<ActionCard/);
+  assert.match(page, /<StatusPill/);
+  assert.doesNotMatch(page, /FlowChat|ChatComposer|<Composer/);
+});
+
+test("Patterns remain responsive and consume theme contracts", async () => {
+  const styles = await readFile(stylesSource, "utf8");
+  assert.match(styles, /\.pattern-navigation-stage\s*\{[^}]*grid-template-columns:\s*216px minmax\(0, 1fr\)/s);
+  assert.match(styles, /\.pattern-action-grid\s*\{[^}]*grid-template-columns:\s*repeat\(2, minmax\(0, 1fr\)\)/s);
+  assert.match(styles, /@media \(max-width: 640px\)[\s\S]*\.pattern-action-grid\s*\{[^}]*grid-template-columns:\s*1fr/s);
+  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);
+});
diff --git a/design-system/packages/design-tokens/src/system.tokens.json b/design-system/packages/design-tokens/src/system.tokens.json
index e48b5612c3..c443d2ec88 100644
--- a/design-system/packages/design-tokens/src/system.tokens.json
+++ b/design-system/packages/design-tokens/src/system.tokens.json
@@ -314,6 +314,17 @@
       "footerHeight": { "$value": "40px" },
       "footerPadding": { "$value": "{space.2}" }
     },
+    "disclosure": {
+      "triggerMinBlockSize": { "$value": "30px" },
+      "triggerPaddingBlock": { "$value": "{space.1}" },
+      "triggerPaddingInline": { "$value": "{space.2}" },
+      "triggerGap": { "$value": "{space.2}" },
+      "triggerRadius": { "$value": "{radius.base}" },
+      "indicatorSize": { "$value": "14px" },
+      "actionsGap": { "$value": "{space.1}" },
+      "contentPaddingBlock": { "$value": "{space.3}" },
+      "contentPaddingInline": { "$value": "{space.8}" }
+    },
     "splitView": {
       "contentPanelRadius": {
         "$description": "Corner radius for the content panel where it meets a companion navigation panel.",
diff --git a/design-system/packages/design-tokens/tests/contract.test.mjs b/design-system/packages/design-tokens/tests/contract.test.mjs
index 200a3f29e9..9f5a362de5 100644
--- a/design-system/packages/design-tokens/tests/contract.test.mjs
+++ b/design-system/packages/design-tokens/tests/contract.test.mjs
@@ -209,6 +209,19 @@ test("NavigationPanel tokens preserve the grouped sidebar composition contract",
   assert.equal(systemDocument.layout.navigationPanel.itemRadius.$value, "{radius.base}");
 });
 
+test("Disclosure tokens preserve the compact reference row and nested content rhythm", async () => {
+  const systemDocument = await readSource("system.tokens.json");
+
+  assert.equal(tokens["layout.disclosure.triggerMinBlockSize"], "30px");
+  assert.equal(tokens["layout.disclosure.triggerPaddingBlock"], "4px");
+  assert.equal(tokens["layout.disclosure.triggerPaddingInline"], "8px");
+  assert.equal(tokens["layout.disclosure.triggerGap"], "8px");
+  assert.equal(tokens["layout.disclosure.indicatorSize"], "14px");
+  assert.equal(tokens["layout.disclosure.contentPaddingBlock"], "12px");
+  assert.equal(tokens["layout.disclosure.contentPaddingInline"], "32px");
+  assert.equal(systemDocument.layout.disclosure.triggerRadius.$value, "{radius.base}");
+});
+
 test("Card tokens preserve raised, compact, and media surface compositions", async () => {
   const systemDocument = await readSource("system.tokens.json");
 
diff --git a/design-system/packages/ui/README.md b/design-system/packages/ui/README.md
index b653c88110..3f85d3c36c 100644
--- a/design-system/packages/ui/README.md
+++ b/design-system/packages/ui/README.md
@@ -18,6 +18,11 @@ export function Example() {
 
 The package owns component anatomy, behavior, accessibility, and stable variants. It does not own theme selection persistence, product state, routes, locale resources, or platform APIs.
 
+`Disclosure` is the shared expandable-content primitive. It owns controlled or
+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.
+
 ## FlowChat tool cards
 
 FlowChat frameworks use an attention model rather than a size or border model:
diff --git a/design-system/packages/ui/src/components/Alert/Alert.meta.ts b/design-system/packages/ui/src/components/Alert/Alert.meta.ts
new file mode 100644
index 0000000000..fa2d193bee
--- /dev/null
+++ b/design-system/packages/ui/src/components/Alert/Alert.meta.ts
@@ -0,0 +1,2 @@
+import type { ComponentMeta } from "../../registry.types";
+export const alertMeta = { category: "feedback", description: "A semantic inline notice with optional title, description, icon, and dismissal.", maturity: "stable", name: "Alert", props: [{ name: "message", type: "ReactNode" }, { name: "tone", type: "info | success | warning | error", defaultValue: "info" }, { name: "closable", type: "boolean", defaultValue: "false" }], states: ["info", "success", "warning", "error"], tokens: ["color.content.primary", "color.content.secondary", "color.status.info.surface", "color.status.success.surface", "color.status.warning.surface", "color.status.danger.surface", "radius.base"], } as const satisfies ComponentMeta;
diff --git a/design-system/packages/ui/src/components/Alert/Alert.module.css b/design-system/packages/ui/src/components/Alert/Alert.module.css
new file mode 100644
index 0000000000..0cbb8615ae
--- /dev/null
+++ b/design-system/packages/ui/src/components/Alert/Alert.module.css
@@ -0,0 +1,13 @@
+@layer bf.components {
+  .root { display: flex; align-items: flex-start; gap: var(--bf-space-3); padding: var(--bf-space-3) var(--bf-space-4); border: var(--bf-border-width-default) solid var(--bf-color-status-info-border); border-radius: var(--bf-radius-base); color: var(--bf-color-status-info-content); background: var(--bf-color-status-info-surface); font-family: var(--bf-font-family-control); font-size: var(--bf-font-size-small); line-height: var(--bf-line-height-base); }
+  .root[data-bf-tone="success"] { border-color: var(--bf-color-status-success-border); color: var(--bf-color-status-success-content); background: var(--bf-color-status-success-surface); }
+  .root[data-bf-tone="warning"] { border-color: var(--bf-color-status-warning-border); color: var(--bf-color-status-warning-content); background: var(--bf-color-status-warning-surface); }
+  .root[data-bf-tone="error"] { border-color: var(--bf-color-status-danger-border); color: var(--bf-color-status-danger-content); background: var(--bf-color-status-danger-surface); }
+  .icon { display: inline-flex; flex: 0 0 auto; margin-block-start: 1px; }
+  .content { display: flex; flex: 1 1 auto; min-inline-size: 0; flex-direction: column; gap: var(--bf-space-1); }
+  .title { color: var(--bf-color-content-primary); font-weight: var(--bf-font-weight-semibold); }
+  .message { color: var(--bf-color-content-primary); }
+  .description { color: var(--bf-color-content-secondary); font-size: var(--bf-font-size-caption); }
+  .close { flex: 0 0 auto; margin: calc(var(--bf-space-1) * -1); }
+  @media (forced-colors: active) { .root { border-color: CanvasText; } }
+}
diff --git a/design-system/packages/ui/src/components/Alert/Alert.tsx b/design-system/packages/ui/src/components/Alert/Alert.tsx
new file mode 100644
index 0000000000..089b745f99
--- /dev/null
+++ b/design-system/packages/ui/src/components/Alert/Alert.tsx
@@ -0,0 +1,74 @@
+import { forwardRef, useState, type HTMLAttributes, type ReactNode } from "react";
+import { classNames } from "../../internal/classNames";
+import { Icon, type IconName } from "../Icon";
+import { IconButton } from "../IconButton";
+import styles from "./Alert.module.css";
+
+export type AlertTone = "success" | "error" | "warning" | "info";
+
+export interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, "children" | "title"> {
+  closable?: boolean;
+  closeLabel?: string;
+  description?: ReactNode;
+  message: ReactNode;
+  onClose?: () => void;
+  showIcon?: boolean;
+  title?: ReactNode;
+  tone?: AlertTone;
+  type?: AlertTone;
+}
+
+const toneIcons: Record<AlertTone, IconName> = {
+  error: "info",
+  info: "info",
+  success: "check-circle",
+  warning: "info",
+};
+
+export const Alert = forwardRef<HTMLDivElement, AlertProps>(function Alert({
+  "aria-live": ariaLive,
+  className,
+  closable = false,
+  closeLabel = "Close",
+  description,
+  message,
+  onClose,
+  showIcon = true,
+  title,
+  tone,
+  type = "info",
+  ...props
+}, ref) {
+  const [visible, setVisible] = useState(true);
+  const resolvedTone = tone ?? type;
+  if (!visible) return null;
+
+  return (
+    <div
+      {...props}
+      aria-live={ariaLive ?? (resolvedTone === "error" ? "assertive" : "polite")}
+      className={classNames(styles.root, className)}
+      data-bf-component="alert"
+      data-bf-tone={resolvedTone}
+      ref={ref}
+      role="alert"
+    >
+      {showIcon && <span className={styles.icon} data-bf-part="icon"><Icon name={toneIcons[resolvedTone]} size="sm" /></span>}
+      <span className={styles.content} data-bf-part="content">
+        {title !== undefined && <span className={styles.title} data-bf-part="title">{title}</span>}
+        <span className={styles.message} data-bf-part="message">{message}</span>
+        {description !== undefined && <span className={styles.description} data-bf-part="description">{description}</span>}
+      </span>
+      {closable && (
+        <IconButton
+          aria-label={closeLabel}
+          className={styles.close}
+          icon={<Icon name="xmark" />}
+          onClick={() => { setVisible(false); onClose?.(); }}
+          size="xs"
+          variant="quiet"
+        />
+      )}
+    </div>
+  );
+});
diff --git a/design-system/packages/ui/src/components/Alert/index.ts b/design-system/packages/ui/src/components/Alert/index.ts
new file mode 100644
index 0000000000..35a80b023f
--- /dev/null
+++ b/design-system/packages/ui/src/components/Alert/index.ts
@@ -0,0 +1 @@
+export { Alert, type AlertProps, type AlertTone } from "./Alert";
diff --git a/design-system/packages/ui/src/components/Avatar/Avatar.meta.ts b/design-system/packages/ui/src/components/Avatar/Avatar.meta.ts
new file mode 100644
index 0000000000..93bd4f6a29
--- /dev/null
+++ b/design-system/packages/ui/src/components/Avatar/Avatar.meta.ts
@@ -0,0 +1,2 @@
+import type { ComponentMeta } from "../../registry.types";
+export const avatarMeta = { category: "primitive", description: "A compact image, icon, or text identity with grouped overflow composition.", maturity: "stable", name: "Avatar", props: [{ name: "src", type: "string" }, { name: "size", type: "sm | md | lg | number", defaultValue: "md" }, { name: "shape", type: "circle | square", defaultValue: "circle" }], states: ["image", "fallback", "grouped"], tokens: ["color.content.secondary", "color.surface.subtle", "color.field.border", "control.height.sm", "control.height.md", "control.height.lg", "radius.base", "radius.pill"], } as const satisfies ComponentMeta;
diff --git a/design-system/packages/ui/src/components/Avatar/Avatar.module.css b/design-system/packages/ui/src/components/Avatar/Avatar.module.css
new file mode 100644
index 0000000000..e05153751c
--- /dev/null
+++ b/design-system/packages/ui/src/components/Avatar/Avatar.module.css
@@ -0,0 +1,11 @@
+@layer bf.components {
+  .root { display: inline-flex; align-items: center; justify-content: center; inline-size: var(--bf-control-height-md); block-size: var(--bf-control-height-md); overflow: hidden; flex: 0 0 auto; border: var(--bf-border-width-default) solid var(--bf-color-field-border); border-radius: var(--bf-radius-pill); color: var(--bf-color-content-secondary); background: var(--bf-color-surface-subtle); font-family: var(--bf-font-family-control); font-size: var(--bf-font-size-small); font-weight: var(--bf-font-weight-semibold); }
+  .root[data-size="sm"] { inline-size: var(--bf-control-height-sm); block-size: var(--bf-control-height-sm); font-size: var(--bf-font-size-caption); }
+  .root[data-size="lg"] { inline-size: var(--bf-control-height-lg); block-size: var(--bf-control-height-lg); }
+  .root[data-bf-shape="square"] { border-radius: var(--bf-radius-base); }
+  .image { inline-size: 100%; block-size: 100%; object-fit: cover; }
+  .content { display: inline-flex; align-items: center; justify-content: center; inline-size: 100%; block-size: 100%; }
+  .content > :where(svg, img) { inline-size: 55%; block-size: 55%; }
+  .group { display: inline-flex; align-items: center; }
+  .group > .root + .root { margin-inline-start: calc(var(--bf-space-2) * -1); }
+}
diff --git a/design-system/packages/ui/src/components/Avatar/Avatar.tsx b/design-system/packages/ui/src/components/Avatar/Avatar.tsx
new file mode 100644
index 0000000000..fff6ffdb33
--- /dev/null
+++ b/design-system/packages/ui/src/components/Avatar/Avatar.tsx
@@ -0,0 +1,30 @@
+import { Children, useState, type CSSProperties, type HTMLAttributes, type ReactNode } from "react";
+import { classNames } from "../../internal/classNames";
+import styles from "./Avatar.module.css";
+
+export type AvatarSize = "sm" | "md" | "lg" | "small" | "medium" | "large" | number;
+export interface AvatarProps extends Omit<HTMLAttributes<HTMLSpanElement>, "children"> { alt?: string; children?: ReactNode; icon?: ReactNode; onError?: () => void; shape?: "circle" | "square"; size?: AvatarSize; src?: string; }
+export interface AvatarGroupProps extends HTMLAttributes<HTMLDivElement> { children: ReactNode; maxCount?: number; }
+function normalizedSize(size: AvatarSize) { return size === "small" ? "sm" : size === "large" ? "lg" : size === "medium" ? "md" : size; }
+
+export function Avatar({ alt = "", children, className, icon, onError, shape = "circle", size = "md", src, style, ...props }: AvatarProps) {
+  const [imageFailed, setImageFailed] = useState(false);
+  const resolvedSize = normalizedSize(size);
+  const customStyle: CSSProperties | undefined = typeof resolvedSize === "number" ? { ...style, blockSize: resolvedSize, inlineSize: resolvedSize } : style;
+  return (
+    <span {...props} className={classNames(styles.root, className)} data-bf-component="avatar" data-bf-shape={shape} data-size={typeof resolvedSize === "number" ? "custom" : resolvedSize} style={customStyle}>
+      {src && !imageFailed
+        ? <img alt={alt} className={styles.image} data-bf-part="image" onError={() => { setImageFailed(true); onError?.(); }} src={src} />
+        : icon !== undefined
+          ? <span className={styles.content} data-bf-part="icon">{icon}</span>
+          : <span className={styles.content} data-bf-part="text">{children}</span>}
+    </span>
+  );
+}
+
+export function AvatarGroup({ children, className, maxCount = 5, ...props }: AvatarGroupProps) {
+  const items = Children.toArray(children);
+  const visible = maxCount > 0 ? items.slice(0, maxCount) : items;
+  const hiddenCount = Math.max(0, items.length - visible.length);
+  return <div {...props} className={classNames(styles.group, className)} data-bf-component="avatar-group">{visible}{hiddenCount > 0 && <Avatar aria-label={`${hiddenCount} more`}>+{hiddenCount}</Avatar>}</div>;
+}
diff --git a/design-system/packages/ui/src/components/Avatar/index.ts b/design-system/packages/ui/src/components/Avatar/index.ts
new file mode 100644
index 0000000000..504329d7d9
--- /dev/null
+++ b/design-system/packages/ui/src/components/Avatar/index.ts
@@ -0,0 +1 @@
+export { Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarSize } from "./Avatar";
diff --git a/design-system/packages/ui/src/components/Checkbox/Checkbox.meta.ts b/design-system/packages/ui/src/components/Checkbox/Checkbox.meta.ts
new file mode 100644
index 0000000000..badf4785a0
--- /dev/null
+++ b/design-system/packages/ui/src/components/Checkbox/Checkbox.meta.ts
@@ -0,0 +1,18 @@
+import type { ComponentMeta } from "../../registry.types";
+
+export const checkboxMeta = {
+  category: "form",
+  description: "A native checkbox with indeterminate, invalid, label, and description states.",
+  maturity: "stable",
+  name: "Checkbox",
+  props: [
+    { name: "checked", type: "boolean" },
+    { name: "indeterminate", type: "boolean", defaultValue: "false" },
+    { name: "invalid", type: "boolean", defaultValue: "false" },
+    { name: "label", type: "ReactNode" },
+    { name: "description", type: "ReactNode" },
+    { name: "size", type: "sm | md | lg", defaultValue: "md" },
+  ],
+  states: ["default", "hover", "focus-visible", "checked", "indeterminate", "invalid", "disabled"],
+  tokens: ["color.content.primary", "color.content.muted", "color.content.disabled", "color.field.background", "color.field.border", "color.accent.default", "color.focus.ring"],
+} as const satisfies ComponentMeta;
diff --git a/design-system/packages/ui/src/components/Checkbox/Checkbox.module.css b/design-system/packages/ui/src/components/Checkbox/Checkbox.module.css
new file mode 100644
index 0000000000..f6845e3d8c
--- /dev/null
+++ b/design-system/packages/ui/src/components/Checkbox/Checkbox.module.css
@@ -0,0 +1,87 @@
+@layer bf.components {
+  .root {
+    --_checkbox-size: 14px;
+
+    display: inline-flex;
+    align-items: flex-start;
+    min-inline-size: 0;
+    gap: var(--bf-space-2);
+    color: var(--bf-color-content-primary);
+    font-family: var(--bf-font-family-control);
+    font-size: var(--bf-font-size-small);
+    line-height: var(--bf-line-height-base);
+    cursor: pointer;
+  }
+
+  .root[data-size="sm"] { --_checkbox-size: 12px; }
+  .root[data-size="lg"] { --_checkbox-size: 16px; }
+  .root[data-disabled="true"] { color: var(--bf-color-content-disabled); cursor: not-allowed; }
+
+  .control {
+    position: relative;
+    display: inline-flex;
+    flex: 0 0 auto;
+    inline-size: var(--_checkbox-size);
+    block-size: var(--_checkbox-size);
+    margin-block-start: 1px;
+  }
+
+  .input {
+    position: absolute;
+    z-index: 1;
+    inset: 0;
+    inline-size: 100%;
+    block-size: 100%;
+    margin: 0;
+    opacity: 0;
+    cursor: inherit;
+  }
+
+  .box {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    inline-size: 100%;
+    block-size: 100%;
+    border: var(--bf-border-width-default) solid var(--bf-color-field-border);
+    border-radius: var(--bf-radius-sm);
+    color: var(--bf-color-content-inverse);
+    background: var(--bf-color-field-background);
+    transition: background-color var(--bf-motion-duration-fast) var(--bf-motion-easing-standard), border-color var(--bf-motion-duration-fast) var(--bf-motion-easing-standard);
+  }
+
+  .input:is(:checked, :indeterminate) + .box {
+    border-color: var(--bf-color-accent-default);
+    background: var(--bf-color-accent-default);
+  }
+
+  .input:focus-visible + .box {
+    outline: var(--bf-focus-width) solid var(--bf-color-focus-ring);
+    outline-offset: var(--bf-focus-offset);
+  }
+
+  .root[data-invalid="true"] .box { border-color: var(--bf-color-status-danger-border); }
+  .root[data-disabled="true"] .box { background: var(--bf-color-field-background); }
+
+  .icon {
+    inline-size: 100%;
+    block-size: 100%;
+    fill: none;
+    stroke: currentColor;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    stroke-width: 2;
+    opacity: 0;
+  }
+
+  .input:is(:checked, :indeterminate) + .box .icon { opacity: 1; }
+  .content { display: inline-flex; min-inline-size: 0; flex-direction: column; gap: var(--bf-space-1); }
+  .label { color: inherit; }
+  .description { color: var(--bf-color-content-muted); font-size: var(--bf-font-size-caption); }
+
+  @media (prefers-reduced-motion: reduce) { .box { transition: none; } }
+  @media (forced-colors: active) {
+    .box { border-color: ButtonText; }
+    .input:is(:checked, :indeterminate) + .box { border-color: Highlight; background: Highlight; }
+  }
+}
diff --git a/design-system/packages/ui/src/components/Checkbox/Checkbox.tsx b/design-system/packages/ui/src/components/Checkbox/Checkbox.tsx
new file mode 100644
index 0000000000..5fb21758cc
--- /dev/null
+++ b/design-system/packages/ui/src/components/Checkbox/Checkbox.tsx
@@ -0,0 +1,100 @@
+import {
+  forwardRef,
+  useEffect,
+  useRef,
+  useImperativeHandle,
+  type InputHTMLAttributes,
+  type ReactNode,
+} from "react";
+import { classNames } from "../../internal/classNames";
+import styles from "./Checkbox.module.css";
+
+export type CheckboxSize = "sm" | "md" | "lg" | "small" | "medium" | "large";
+
+export interface CheckboxProps
+  extends Omit<InputHTMLAttributes<HTMLInputElement>, "children" | "size" | "type"> {
+  children?: ReactNode;
+  description?: ReactNode;
+  error?: boolean;
+  indeterminate?: boolean;
+  invalid?: boolean;
+  label?: ReactNode;
+  onCheckedChange?: (checked: boolean) => void;
+  size?: CheckboxSize;
+}
+
+function normalizeSize(size: CheckboxSize): "sm" | "md" | "lg" {
+  if (size === "small") return "sm";
+  if (size === "large") return "lg";
+  if (size === "medium") return "md";
+  return size;
+}
+
+export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(function Checkbox({
+  checked,
+  children,
+  className,
+  defaultChecked,
+  description,
+  disabled = false,
+  error = false,
+  indeterminate = false,
+  invalid = false,
+  label,
+  onChange,
+  onCheckedChange,
+  size = "md",
+  ...props
+}, forwardedRef) {
+  const inputRef = useRef<HTMLInputElement>(null);
+  useImperativeHandle(forwardedRef, () => inputRef.current as HTMLInputElement);
+
+  useEffect(() => {
+    if (inputRef.current) inputRef.current.indeterminate = indeterminate;
+  }, [indeterminate]);
+
+  const resolvedInvalid = error || invalid;
+  const hasContent = label !== undefined || description !== undefined || children !== undefined;
+
+  return (
+    <label
+      className={classNames(styles.root, className)}
+      data-bf-component="checkbox"
+      data-disabled={disabled ? "true" : "false"}
+      data-indeterminate={indeterminate ? "true" : "false"}
+      data-invalid={resolvedInvalid ? "true" : "false"}
+      data-size={normalizeSize(size)}
+    >
+      <span className={styles.control} data-bf-part="control">
+        <input
+          {...props}
+          aria-invalid={resolvedInvalid || undefined}
+          checked={checked}
+          className={styles.input}
+          defaultChecked={defaultChecked}
+          disabled={disabled}
+          onChange={(event) => {
+            onChange?.(event);
+            if (!event.defaultPrevented) onCheckedChange?.(event.currentTarget.checked);
+          }}
+          ref={inputRef}
+          type="checkbox"
+        />
+        <span aria-hidden="true" className={styles.box} data-bf-part="box">
+          <svg className={styles.icon} viewBox="0 0 16 16">
+            {indeterminate
+              ? <path d="M4 8h8" />
+              : <path d="m3.5 8 3 3 6-6" />}
+          </svg>
+        </span>
+      </span>
+      {hasContent && (
+        <span className={styles.content} data-bf-part="content">
+          {label !== undefined && <span className={styles.label}>{label}</span>}
+          {description !== undefined && <span className={styles.description}>{description}</span>}
+          {children}
+        </span>
+      )}
+    </label>
+  );
+});
diff --git a/design-system/packages/ui/src/components/Checkbox/index.ts b/design-system/packages/ui/src/components/Checkbox/index.ts
new file mode 100644
index 0000000000..93075bcf65
--- /dev/null
+++ b/design-system/packages/ui/src/components/Checkbox/index.ts
@@ -0,0 +1 @@
+export { Checkbox, type CheckboxProps, type CheckboxSize } from "./Checkbox";
diff --git a/design-system/packages/ui/src/components/Disclosure/Disclosure.meta.ts b/design-system/packages/ui/src/components/Disclosure/Disclosure.meta.ts
new file mode 100644
index 0000000000..3d04b2fb7c
--- /dev/null
+++ b/design-system/packages/ui/src/components/Disclosure/Disclosure.meta.ts
@@ -0,0 +1,44 @@
+import type { ComponentMeta } from "../../registry.types";
+
+export const disclosureMeta = {
+  category: "primitive",
+  description: "Reveals supporting content with controlled or uncontrolled state, accessible relationships, and independent header actions.",
+  maturity: "stable",
+  name: "Disclosure",
+  props: [
+    { name: "summary", type: "ReactNode" },
+    { name: "children", type: "ReactNode" },
+    { name: "leading", type: "ReactNode" },
+    { name: "description", type: "ReactNode" },
+    { name: "actions", type: "ReactNode" },
+    { name: "open", type: "boolean" },
+    { defaultValue: "false", name: "defaultOpen", type: "boolean" },
+    { defaultValue: "false", name: "disabled", type: "boolean" },
+    { name: "onOpenChange", type: "(open: boolean) => void" },
+  ],
+  states: ["closed", "open", "hover", "focus-visible", "disabled"],
+  tokens: [
+    "color.action.neutral.content",
+    "color.action.neutral.contentDisabled",
+    "color.action.neutral.surface",
+    "color.action.neutral.surfacePressed",
+    "color.content.muted",
+    "color.focus.ring",
+    "font.family.control",
+    "font.size.caption",
+    "font.size.small",
+    "font.weight.medium",
+    "layout.disclosure.triggerMinBlockSize",
+    "layout.disclosure.triggerPaddingBlock",
+    "layout.disclosure.triggerPaddingInline",
+    "layout.disclosure.triggerGap",
+    "layout.disclosure.triggerRadius",
+    "layout.disclosure.indicatorSize",
+    "layout.disclosure.actionsGap",
+    "layout.disclosure.contentPaddingBlock",
+    "layout.disclosure.contentPaddingInline",
+    "lineHeight.body",
+    "lineHeight.tight",
+    "space.1",
+  ],
+} as const satisfies ComponentMeta;
diff --git a/design-system/packages/ui/src/components/Disclosure/Disclosure.module.css b/design-system/packages/ui/src/components/Disclosure/Disclosure.module.css
new file mode 100644
index 0000000000..3559ddf9e1
--- /dev/null
+++ b/design-system/packages/ui/src/components/Disclosure/Disclosure.module.css
@@ -0,0 +1,154 @@
+@layer bf.components {
+  .root {
+    min-inline-size: 0;
+    color: var(--bf-color-action-neutral-content);
+    font-family: var(--bf-font-family-control);
+  }
+
+  .header {
+    display: flex;
+    align-items: center;
+    min-block-size: var(--bf-layout-disclosure-trigger-min-block-size);
+    border-radius: var(--bf-layout-disclosure-trigger-radius);
+    background: transparent;
+    transition: background-color var(--bf-motion-duration-fast) var(--bf-motion-easing-standard);
+  }
+
+  .root:not([data-disabled="true"]) .header:hover,
+  .root:not([data-disabled="true"])[data-bf-preview-state="hover"] .header {
+    background: var(--bf-color-action-neutral-surface);
+  }
+
+  .root[data-open="true"]:not([data-disabled="true"]) .header {
+    background: var(--bf-color-action-neutral-surface-pressed);
+  }
+
+  .header:has(.trigger:focus-visible),
+  .root[data-bf-preview-state="focus-visible"] .header {
+    box-shadow: 0 0 0 var(--bf-focus-width) var(--bf-color-focus-ring);
+  }
+
+  .trigger {
+    display: flex;
+    flex: 1 1 auto;
+    align-items: center;
+    min-inline-size: 0;
+    min-block-size: inherit;
+    gap: var(--bf-layout-disclosure-trigger-gap);
+    margin: 0;
+    padding-block: var(--bf-layout-disclosure-trigger-padding-block);
+    padding-inline: var(--bf-layout-disclosure-trigger-padding-inline);
+    border: 0;
+    outline: 0;
+    color: inherit;
+    background: transparent;
+    font: inherit;
+    text-align: start;
+    cursor: pointer;
+  }
+
+  .trigger:disabled {
+    color: var(--bf-color-action-neutral-content-disabled);
+    cursor: not-allowed;
+  }
+
+  .indicator,
+  .leading {
+    display: inline-flex;
+    flex: 0 0 auto;
+    align-items: center;
+    justify-content: center;
+    inline-size: var(--bf-layout-disclosure-indicator-size);
+    block-size: var(--bf-layout-disclosure-indicator-size);
+  }
+
+  .indicator {
+    color: var(--bf-color-content-muted);
+    transform: rotate(0deg);
+    transition: transform var(--bf-motion-duration-fast) var(--bf-motion-easing-standard);
+  }
+
+  .root[data-open="true"] .indicator {
+    transform: rotate(90deg);
+  }
+
+  .heading {
+    display: grid;
+    flex: 1 1 auto;
+    min-inline-size: 0;
+    gap: var(--bf-space-1);
+  }
+
+  .summary {
+    overflow: hidden;
+    font-size: var(--bf-font-size-small);
+    font-weight: var(--bf-font-weight-medium);
+    line-height: var(--bf-line-height-tight);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .description {
+    color: var(--bf-color-content-muted);
+    font-size: var(--bf-font-size-caption);
+    line-height: var(--bf-line-height-body);
+  }
+
+  .actions {
+    display: inline-flex;
+    flex: 0 0 auto;
+    align-items: center;
+    gap: var(--bf-layout-disclosure-actions-gap);
+    padding-inline-end: var(--bf-layout-disclosure-trigger-padding-inline);
+  }
+
+  .content {
+    display: grid;
+    grid-template-rows: 0fr;
+    visibility: hidden;
+    opacity: 0;
+    transition:
+      grid-template-rows var(--bf-motion-duration-normal) var(--bf-motion-easing-standard),
+      opacity var(--bf-motion-duration-fast) var(--bf-motion-easing-standard),
+      visibility 0s linear var(--bf-motion-duration-normal);
+  }
+
+  .root[data-open="true"] .content {
+    grid-template-rows: 1fr;
+    visibility: visible;
+    opacity: 1;
+    transition-delay: 0s;
+  }
+
+  .contentInner {
+    min-block-size: 0;
+    overflow: hidden;
+    padding-block: 0;
+    padding-inline: var(--bf-layout-disclosure-content-padding-inline);
+    transition: padding-block var(--bf-motion-duration-normal) var(--bf-motion-easing-standard);
+  }
+
+  .root[data-open="true"] .contentInner {
+    padding-block: var(--bf-layout-disclosure-content-padding-block);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .header,
+    .indicator,
+    .content,
+    .contentInner {
+      transition: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .header:has(.trigger:focus-visible) {
+      box-shadow: 0 0 0 var(--bf-focus-width) Highlight;
+    }
+
+    .root[data-open="true"]:not([data-disabled="true"]) .header {
+      background: Highlight;
+      color: HighlightText;
+    }
+  }
+}
diff --git a/design-system/packages/ui/src/components/Disclosure/Disclosure.tsx b/design-system/packages/ui/src/components/Disclosure/Disclosure.tsx
new file mode 100644
index 0000000000..f163863255
--- /dev/null
+++ b/design-system/packages/ui/src/components/Disclosure/Disclosure.tsx
@@ -0,0 +1,111 @@
+import {
+  forwardRef,
+  useId,
+  useState,
+  type HTMLAttributes,
+  type ReactNode,
+} from "react";
+import { classNames } from "../../internal/classNames";
+import { Icon } from "../Icon";
+import styles from "./Disclosure.module.css";
+
+export interface DisclosureProps
+  extends Omit<HTMLAttributes<HTMLElement>, "children" | "onToggle" | "title"> {
+  actions?: ReactNode;
+  children: ReactNode;
+  defaultOpen?: boolean;
+  description?: ReactNode;
+  disabled?: boolean;
+  leading?: ReactNode;
+  onOpenChange?: (open: boolean) => void;
+  open?: boolean;
+  summary: ReactNode;
+}
+
+type InertContentAttributes = HTMLAttributes<HTMLDivElement> & { inert?: "" };
+
+export const Disclosure = forwardRef<HTMLElement, DisclosureProps>(
+  function Disclosure({
+    actions,
+    children,
+    className,
+    defaultOpen = false,
+    description,
+    disabled = false,
+    leading,
+    onOpenChange,
+    open,
+    summary,
+    ...props
+  }, ref) {
+    const generatedId = useId();
+    const triggerId = `bf-disclosure-${generatedId}-trigger`;
+    const contentId = `bf-disclosure-${generatedId}-content`;
+    const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+    const resolvedOpen = open ?? uncontrolledOpen;
+    const inertContentAttributes: InertContentAttributes = resolvedOpen ? {} : { inert: "" };
+
+    function toggle() {
+      if (disabled) return;
+      const nextOpen = !resolvedOpen;
+      if (open === undefined) setUncontrolledOpen(nextOpen);
+      onOpenChange?.(nextOpen);
+    }
+
+    return (
+      <section
+        {...props}
+        className={classNames(styles.root, className)}
+        data-bf-component="disclosure"
+        data-disabled={disabled ? "true" : "false"}
+        data-open={resolvedOpen ? "true" : "false"}
+        ref={ref}
+      >
+        <div className={styles.header} data-bf-part="header">
+          <button
+            aria-controls={contentId}
+            aria-expanded={resolvedOpen}
+            className={styles.trigger}
+            disabled={disabled}
+            id={triggerId}
+            onClick={toggle}
+            type="button"
+          >
+            <span aria-hidden="true" className={styles.indicator} data-bf-part="indicator">
+              <Icon name="chevron-right" size="sm" />
+            </span>
+            {leading !== undefined && leading !== null && (
+              <span aria-hidden="true" className={styles.leading} data-bf-part="leading">
+                {leading}
+              </span>
+            )}
+            <span className={styles.heading} data-bf-part="heading">
+              <span className={styles.summary} data-bf-part="summary">{summary}</span>
+              {description !== undefined && description !== null && (
+                <span className={styles.description} data-bf-part="description">
+                  {description}
+                </span>
+              )}
+            </span>
+          </button>
+          {actions !== undefined && actions !== null && (
+            <span className={styles.actions} data-bf-part="actions">{actions}</span>
+          )}
+        </div>
+        <div
+          {...inertContentAttributes}
+          aria-hidden={!resolvedOpen}
+          aria-labelledby={triggerId}
+          className={styles.content}
+          data-bf-part="content"
+          id={contentId}
+          role="region"
+        >
+          <div className={styles.contentInner} data-bf-part="content-inner">
+            {children}
+          </div>
+        </div>
+      </section>
+    );
+  },
+);
diff --git a/design-system/packages/ui/src/components/Disclosure/index.ts b/design-system/packages/ui/src/components/Disclosure/index.ts
new file mode 100644
index 0000000000..3810dacae0
--- /dev/null
+++ b/design-system/packages/ui/src/components/Disclosure/index.ts
@@ -0,0 +1 @@
+export { Disclosure, type DisclosureProps } from "./Disclosure";
diff --git a/design-system/packages/ui/src/components/Empty/Empty.meta.ts b/design-system/packages/ui/src/components/Empty/Empty.meta.ts
new file mode 100644
index 0000000000..db2ca69900
--- /dev/null
+++ b/design-system/packages/ui/src/components/Empty/Empty.meta.ts
@@ -0,0 +1,23 @@
+import type { ComponentMeta } from "../../registry.types";
+
+export const emptyMeta = {
+  category: "feedback",
+  description: "Explains an empty result or unavailable collection with optional identity and actions.",
+  maturity: "stable",
+  name: "Empty",
+  props: [
+    { name: "title", type: "ReactNode" },
+    { name: "description", type: "ReactNode" },
+    { name: "icon", type: "ReactNode" },
+    { name: "actions", type: "ReactNode" },
+    { defaultValue: "md", name: "imageSize", type: "sm | md | lg | number" },
+  ],
+  states: ["default", "with-title", "with-actions"],
+  tokens: [
+    "color.content.primary",
+    "color.content.secondary",
+    "color.content.muted",
+    "control.height.md",
+    "control.height.lg",
+  ],
+} as const satisfies ComponentMeta;
diff --git a/design-system/packages/ui/src/components/Empty/Empty.module.css b/design-system/packages/ui/src/components/Empty/Empty.module.css
new file mode 100644
index 0000000000..7cb1e6de83
--- /dev/null
+++ b/design-system/packages/ui/src/components/Empty/Empty.module.css
@@ -0,0 +1,62 @@
+@layer bf.components {
+  .root {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: var(--bf-space-3);
+    min-inline-size: 0;
+    padding: var(--bf-space-8) var(--bf-space-5);
+    color: var(--bf-color-content-secondary);
+    text-align: center;
+  }
+
+  .media {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    inline-size: var(--bf-control-height-lg);
+    block-size: var(--bf-control-height-lg);
+    color: var(--bf-color-content-muted);
+  }
+
+  .media[data-size="sm"] {
+    inline-size: var(--bf-control-height-md);
+    block-size: var(--bf-control-height-md);
+  }
+
+  .media[data-size="lg"] {
+    inline-size: calc(var(--bf-control-height-lg) + var(--bf-space-4));
+    block-size: calc(var(--bf-control-height-lg) + var(--bf-space-4));
+  }
+
+  .media > :where(svg, img) {
+    display: block;
+    max-inline-size: 100%;
+    max-block-size: 100%;
+  }
+
+  .title {
+    color: var(--bf-color-content-primary);
+    font-family: var(--bf-font-family-control);
+    font-size: var(--bf-font-size-label);
+    font-weight: var(--bf-font-weight-semibold);
+    line-height: var(--bf-line-height-tight);
+  }
+
+  .description {
+    max-inline-size: 42ch;
+    color: var(--bf-color-content-muted);
+    font-family: var(--bf-font-family-control);
+    font-size: var(--bf-font-size-small);
+    line-height: var(--bf-line-height-body);
+  }
+
+  .actions {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--bf-space-2);
+    margin-block-start: var(--bf-space-1);
+  }
+}
diff --git a/design-system/packages/ui/src/components/Empty/Empty.tsx b/design-system/packages/ui/src/components/Empty/Empty.tsx
new file mode 100644
index 0000000000..1c5577b63a
--- /dev/null
+++ b/design-system/packages/ui/src/components/Empty/Empty.tsx
@@ -0,0 +1,77 @@
+import {
+  forwardRef,
+  type CSSProperties,
+  type HTMLAttributes,
+  type ReactNode,
+} from "react";
+import { classNames } from "../../internal/classNames";
+import { Icon } from "../Icon";
+import styles from "./Empty.module.css";
+
+export type EmptyMediaSize = "sm" | "md" | "lg" | "small" | "medium" | "large" | number;
+
+export interface EmptyProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, "children" | "title"> {
+  actions?: ReactNode;
+  children?: ReactNode;
+  description?: ReactNode;
+  icon?: ReactNode;
+  image?: ReactNode;
+  imageSize?: EmptyMediaSize;
+  title?: ReactNode;
+}
+
+function normalizeMediaSize(size: EmptyMediaSize) {
+  if (size === "small") return "sm";
+  if (size === "large") return "lg";
+  if (size === "medium") return "md";
+  return size;
+}
+
+export const Empty = forwardRef<HTMLDivElement, EmptyProps>(function Empty({
+  actions,
+  children,
+  className,
+  description,
+  icon,
+  image,
+  imageSize = "md",
+  style,
+  title,
+  ...props
+}, ref) {
+  const resolvedSize = normalizeMediaSize(imageSize);
+  const media = icon ?? image ?? <Icon name="folder" size="lg" tone="muted" />;
+  const mediaStyle = typeof resolvedSize === "number"
+    ? { blockSize: resolvedSize, inlineSize: resolvedSize } as CSSProperties
+    : undefined;
+  const footer = actions ?? children;
+
+  return (
+    <div
+      {...props}
+      className={classNames(styles.root, className)}
+      data-bf-component="empty"
+      ref={ref}
+      style={style}
+    >
+      <div
+        className={styles.media}
+        data-bf-part="media"
+        data-size={typeof resolvedSize === "number" ? "custom" : resolvedSize}
+        style={mediaStyle}
+      >
+        {media}
+      </div>
+      {title !== undefined && title !== null && (
+        <div className={styles.title} data-bf-part="title">{title}</div>
+      )}
+      {description !== undefined && description !== null && (
+        <div className={styles.description} data-bf-part="description">{description}</div>
+      )}
+      {footer !== undefined && footer !== null && (
+        <div className={styles.actions} data-bf-part="actions">{footer}</div>
+      )}
+    </div>
+  );
+});
diff --git a/design-system/packages/ui/src/components/Empty/index.ts b/design-system/packages/ui/src/components/Empty/index.ts
new file mode 100644
index 0000000000..7e57dcb3c8
--- /dev/null
+++ b/design-system/packages/ui/src/components/Empty/index.ts
@@ -0,0 +1 @@
+export { Empty, type EmptyMediaSize, type EmptyProps } from "./Empty";
diff --git a/design-system/packages/ui/src/components/Icon/Icon.tsx b/design-system/packages/ui/src/components/Icon/Icon.tsx
index f6d64d245f..8672e3cccb 100644
--- a/design-system/packages/ui/src/components/Icon/Icon.tsx
+++ b/design-system/packages/ui/src/components/Icon/Icon.tsx
@@ -15,6 +15,7 @@ import checkFillUrl from "./assets/check-fill.svg";
 import checkLineUrl from "./assets/check-line.svg";
 import chevronDownUrl from "./assets/chevron-down.svg";
 import chevronRightUrl from "./assets/chevron-right.svg";
+import chevronUpUrl from "./assets/chevron-up.svg";
 import circleUrl from "./assets/circle.svg";
 import clockUrl from "./assets/clock.svg";
 import commandMacUrl from "./assets/command-mac.svg";
@@ -42,6 +43,7 @@ import paletteUrl from "./assets/palette.svg";
 import pinUrl from "./assets/pin.svg";
 import plusUrl from "./assets/plus.svg";
 import progress25Url from "./assets/progress-25.svg";
+import refreshUrl from "./assets/refresh.svg";
 import searchUrl from "./assets/search.svg";
 import sessionUrl from "./assets/session.svg";
 import settingsUrl from "./assets/settings.svg";
@@ -72,6 +74,7 @@ export const iconNames = [
   "check-line",
   "chevron-down",
   "chevron-right",
+  "chevron-up",
   "circle",
   "clock",
   "command-mac",
@@ -99,6 +102,7 @@ export const iconNames = [
   "pin",
   "plus",
   "progress-25",
+  "refresh",
   "search",
   "session",
   "settings",
@@ -142,6 +146,7 @@ const iconSources = {
   "check-line": checkLineUrl,
   "chevron-down": chevronDownUrl,
   "chevron-right": chevronRightUrl,
+  "chevron-up": chevronUpUrl,
   circle: circleUrl,
   clock: clockUrl,
   "command-mac": commandMacUrl,
@@ -169,6 +174,7 @@ const iconSources = {
   pin: pinUrl,
   plus: plusUrl,
   "progress-25": progress25Url,
+  refresh: refreshUrl,
   search: searchUrl,
   session: sessionUrl,
   settings: settingsUrl,
diff --git a/design-system/packages/ui/src/components/Icon/assets/chevron-up.svg b/design-system/packages/ui/src/components/Icon/assets/chevron-up.svg
new file mode 100644
index 0000000000..4eac2397ee
--- /dev/null
+++ b/design-system/packages/ui/src/components/Icon/assets/chevron-up.svg
@@ -0,0 +1,5 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="HarmonyOS Icon">
+<path id="Vector" d="M12.0049 7.2246C12.249 7.2246 12.4932 7.3223 12.6592 7.5078L20.2177 15.252C20.3837 15.418 20.4815 15.6328 20.4815 15.877C20.4815 16.3848 20.1005 16.7754 19.5927 16.7754C19.3486 16.7754 19.124 16.6777 18.958 16.5215L11.4775 8.875H12.5225L5.04199 16.5215C4.88574 16.6777 4.66113 16.7754 4.40722 16.7754C3.89941 16.7754 3.51855 16.3848 3.51855 15.877C3.51855 15.6328 3.61621 15.418 3.78222 15.2422L11.3408 7.5078C11.5264 7.3223 11.751 7.2246 12.0049 7.2246Z" fill="black" fill-opacity="0.8"/>
+</g>
+</svg>
diff --git a/design-system/packages/ui/src/components/Icon/assets/refresh.svg b/design-system/packages/ui/src/components/Icon/assets/refresh.svg
new file mode 100644
index 0000000000..a42ac053f4
--- /dev/null
+++ b/design-system/packages/ui/src/components/Icon/assets/refresh.svg
@@ -0,0 +1,5 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="HarmonyOS Icon">
+<path id="Vector" d="M12 22.4883C16.7657 22.4883 20.6231 18.6308 20.6231 13.8555C20.6231 13.4258 20.2715 13.0742 19.8418 13.0742C19.4122 13.0742 19.0508 13.4258 19.0508 13.8555C19.0508 17.7519 15.8965 20.9062 12 20.9062C8.10352 20.9062 4.94923 17.7519 4.94923 13.8555C4.94923 9.95896 8.10352 6.80466 12 6.80466C12.8692 6.80466 13.6993 6.96091 14.4708 7.24411C14.9688 7.43942 15.5547 7.15622 15.5645 6.55075C15.5743 6.05271 15.2032 5.86716 14.9395 5.7695C14.0411 5.42771 13.0449 5.24216 12 5.24216C7.23438 5.24216 3.37696 9.09958 3.37696 13.8652C3.37696 18.6308 7.23438 22.4883 12 22.4883ZM14.6465 6.41403L11.1016 9.93942C10.9356 10.0859 10.877 10.2812 10.877 10.4863C10.877 10.9355 11.209 11.2773 11.6387 11.2773C11.8828 11.2773 12.0586 11.1894 12.2051 11.0527L16.2286 7.00974C16.4043 6.83396 16.4825 6.63864 16.4825 6.4238C16.4825 6.20896 16.3946 5.99411 16.2286 5.83786L12.2149 1.75583C12.0586 1.60935 11.8828 1.51169 11.6387 1.51169C11.209 1.51169 10.877 1.87302 10.877 2.31247C10.877 2.51755 10.9356 2.73239 11.0918 2.87888L14.6465 6.41403Z" fill="black" fill-opacity="0.8"/>
+</g>
+</svg>
diff --git a/design-system/packages/ui/src/components/NumberInput/NumberInput.meta.ts b/design-system/packages/ui/src/components/NumberInput/NumberInput.meta.ts
new file mode 100644
index 0000000000..e846e6d3aa
--- /dev/null
+++ b/design-system/packages/ui/src/components/NumberInput/NumberInput.meta.ts
@@ -0,0 +1,16 @@
+import type { ComponentMeta } from "../../registry.types";
+
+export const numberInputMeta = {
+  category: "form",
+  description: "A numeric text field with clamping, keyboard stepping, optional units, and step controls.",
+  maturity: "stable",
+  name: "NumberInput",
+  props: [
+    { name: "value", type: "number" }, { name: "onChange", type: "(value: number) => void" },
+    { name: "inputProps", type: "InputHTMLAttributes<HTMLInputElement>" },
+    { name: "min", type: "number" }, { name: "max", type: "number" }, { name: "step", type: "number", defaultValue: "1" },
+    { name: "unit", type: "string" }, { name: "variant", type: "default | compact | stepper", defaultValue: "default" },
+  ],
+  states: ["default", "hover", "focus-visible", "disabled"],
+  tokens: ["color.content.primary", "color.content.muted", "color.content.disabled", "color.field.background", "color.field.border", "color.field.borderFocus", "color.focus.ring", "control.height.sm", "control.height.md", "control.height.lg"],
+} as const satisfies ComponentMeta;
diff --git a/design-system/packages/ui/src/components/NumberInput/NumberInput.module.css b/design-system/packages/ui/src/components/NumberInput/NumberInput.module.css
new file mode 100644
index 0000000000..c1de704ae6
--- /dev/null
+++ b/design-system/packages/ui/src/components/NumberInput/NumberInput.module.css
@@ -0,0 +1,19 @@
+@layer bf.components {
+  .root { --_height: var(--bf-control-height-md); display: inline-flex; min-inline-size: 0; flex-direction: column; gap: var(--bf-space-2); color: var(--bf-color-content-primary); font-family: var(--bf-font-family-control); }
+  .root[data-size="sm"] { --_height: var(--bf-control-height-sm); }
+  .root[data-size="lg"] { --_height: var(--bf-control-height-lg); }
+  .label { font-size: var(--bf-font-size-small); font-weight: var(--bf-font-weight-medium); }
+  .control { display: inline-flex; align-items: stretch; min-inline-size: 0; block-size: var(--_height); overflow: hidden; border: var(--bf-border-width-default) solid var(--bf-color-field-border); border-radius: var(--bf-radius-base); background: var(--bf-color-field-background); transition: border-color var(--bf-motion-duration-fast) var(--bf-motion-easing-standard), box-shadow var(--bf-motion-duration-fast) var(--bf-motion-easing-standard); }
+  .control:hover { border-color: var(--bf-color-field-border-hover); }
+  .control:focus-within { border-color: var(--bf-color-field-border-focus); box-shadow: 0 0 0 var(--bf-focus-width) var(--bf-color-focus-ring); }
+  .input { min-inline-size: 0; inline-size: 100%; padding-inline: var(--bf-space-3); border: 0; outline: 0; color: inherit; background: transparent; font: inherit; font-size: var(--bf-font-size-small); text-align: end; }
+  .unit { display: inline-flex; align-items: center; padding-inline-end: var(--bf-space-2); color: var(--bf-color-content-muted); font-size: var(--bf-font-size-caption); }
+  .buttons { display: inline-grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-inline-start: var(--bf-border-width-default) solid var(--bf-color-field-border); }
+  .buttons button { min-inline-size: 22px; padding: 0; border: 0; color: var(--bf-color-content-muted); background: transparent; font: inherit; cursor: pointer; }
+  .buttons button:hover:not(:disabled) { color: var(--bf-color-content-primary); background: var(--bf-color-action-neutral-surface-hover); }
+  .buttons button:disabled, .root[data-disabled="true"] { color: var(--bf-color-content-disabled); cursor: not-allowed; }
+  .root[data-variant="default"] .buttons { grid-template-columns: 1fr; grid-template-rows: repeat(2, minmax(0, 1fr)); }
+  .root[data-variant="default"] .buttons button { min-inline-size: 20px; font-size: var(--bf-font-size-caption); line-height: 1; }
+  @media (prefers-reduced-motion: reduce) { .control { transition: none; } }
+  @media (forced-colors: active) { .control { border-color: ButtonText; } .control:focus-within { border-color: Highlight; box-shadow: 0 0 0 var(--bf-focus-width) Highlight; } }
+}
diff --git a/design-system/packages/ui/src/components/NumberInput/NumberInput.tsx b/design-system/packages/ui/src/components/NumberInput/NumberInput.tsx
new file mode 100644
index 0000000000..6d87401208
--- /dev/null
+++ b/design-system/packages/ui/src/components/NumberInput/NumberInput.tsx
@@ -0,0 +1,137 @@
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  type InputHTMLAttributes,
+} from "react";
+import { classNames } from "../../internal/classNames";
+import { isImeOwnedKeyboardEvent } from "../../internal/ime";
+import styles from "./NumberInput.module.css";
+
+export interface NumberInputProps {
+  className?: string;
+  decrementLabel?: string;
+  disabled?: boolean;
+  disableWheel?: boolean;
+  draggable?: boolean;
+  incrementLabel?: string;
+  inputProps?: Omit<
+    InputHTMLAttributes<HTMLInputElement>,
+    "className" | "defaultValue" | "disabled" | "onChange" | "type" | "value"
+  > & Record<`data-${string}`, string | number | boolean | undefined>;
+  label?: string;
+  max?: number;
+  min?: number;
+  onChange: (value: number) => void;
+  precision?: number;
+  showButtons?: boolean;
+  size?: "small" | "medium" | "large" | "sm" | "md" | "lg";
+  step?: number;
+  unit?: string;
+  value: number;
+  variant?: "default" | "compact" | "stepper";
+}
+
+export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(function NumberInput({
+  className,
+  decrementLabel = "Decrease value",
+  disabled = false,
+  disableWheel = false,
+  incrementLabel = "Increase value",
+  inputProps,
+  label,
+  max = Number.POSITIVE_INFINITY,
+  min = Number.NEGATIVE_INFINITY,
+  onChange,
+  precision = 0,
+  showButtons = true,
+  size = "medium",
+  step = 1,
+  unit,
+  value,
+  variant = "default",
+}, 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]);
+  const [draft, setDraft] = useState(() => format(value));
+  const [editing, setEditing] = useState(false);
+  const compositionActiveRef = useRef(false);
+
+  useEffect(() => { if (!editing) setDraft(format(value)); }, [editing, format, value]);
+
+  const commit = useCallback(() => {
+    const parsed = Number.parseFloat(draft);
+    if (Number.isFinite(parsed)) {
+      const next = clamp(parsed);
+      onChange(next);
+      setDraft(format(next));
+    } else {
+      setDraft(format(value));
+    }
+    setEditing(false);
+  }, [clamp, draft, format, onChange, value]);
+  const changeBy = (amount: number) => onChange(clamp(value + amount));
+  const normalizedSize = size === "small" ? "sm" : size === "large" ? "lg" : size === "medium" ? "md" : size;
+
+  return (
+    <span className={classNames(styles.root, className)} data-bf-component="number-input" data-disabled={disabled ? "true" : "false"} data-size={normalizedSize} data-variant={variant}>
+      {label && <span className={styles.label} data-bf-part="label">{label}</span>}
+      <span
+        className={styles.control}
+        data-bf-part="control"
+        onWheel={(event) => {
+          if (disabled || disableWheel || document.activeElement !== event.currentTarget.querySelector("input")) return;
+          event.preventDefault();
+          changeBy(event.deltaY < 0 ? step : -step);
+        }}
+      >
+        <input
+          {...inputProps}
+          aria-label={inputProps?.["aria-label"] ?? label}
+          className={styles.input}
+          data-bf-part="input"
+          disabled={disabled}
+          inputMode="decimal"
+          onBlur={(event) => {
+            inputProps?.onBlur?.(event);
+            if (!event.defaultPrevented) commit();
+          }}
+          onChange={(event) => setDraft(event.currentTarget.value)}
+          onCompositionEnd={(event) => {
+            compositionActiveRef.current = false;
+            inputProps?.onCompositionEnd?.(event);
+          }}
+          onCompositionStart={(event) => {
+            compositionActiveRef.current = true;
+            inputProps?.onCompositionStart?.(event);
+          }}
+          onFocus={(event) => {
+            setEditing(true);
+            inputProps?.onFocus?.(event);
+          }}
+          onKeyDown={(event) => {
+            inputProps?.onKeyDown?.(event);
+            if (event.defaultPrevented) return;
+            if ((event.key === "Enter" || event.key === "Escape") && isImeOwnedKeyboardEvent(event, compositionActiveRef.current)) { event.stopPropagation(); return; }
+            if (event.key === "ArrowUp") { event.preventDefault(); changeBy(step); }
+            if (event.key === "ArrowDown") { event.preventDefault(); changeBy(-step); }
+            if (event.key === "Enter") { commit(); event.currentTarget.blur(); }
+            if (event.key === "Escape") { setDraft(format(value)); setEditing(false); event.currentTarget.blur(); }
+          }}
+          ref={ref}
+          type="text"
+          value={draft}
+        />
+        {unit && <span className={styles.unit} data-bf-part="unit">{unit}</span>}
+        {showButtons && variant !== "compact" && (
+          <span className={styles.buttons} data-bf-part="buttons">
+            <button aria-label={decrementLabel} disabled={disabled || value <= min} onClick={() => changeBy(-step)} tabIndex={-1} type="button">−</button>
+            <button aria-label={incrementLabel} disabled={disabled || value >= max} onClick={() => changeBy(step)} tabIndex={-1} type="button">+</button>
+          </span>
+        )}
+      </span>
+    </span>
+  );
+});
diff --git a/design-system/packages/ui/src/components/NumberInput/index.ts b/design-system/packages/ui/src/components/NumberInput/index.ts
new file mode 100644
index 0000000000..3f941e0ba5
--- /dev/null
+++ b/design-system/packages/ui/src/components/NumberInput/index.ts
@@ -0,0 +1 @@
+export { NumberInput, type NumberInputProps } from "./NumberInput";
diff --git a/design-system/packages/ui/src/components/Radio/Radio.meta.ts b/design-system/packages/ui/src/components/Radio/Radio.meta.ts
new file mode 100644
index 0000000000..6dc645cd37
--- /dev/null
+++ b/design-system/packages/ui/src/components/Radio/Radio.meta.ts
@@ -0,0 +1,17 @@
+import type { ComponentMeta } from "../../registry.types";
+
+export const radioMeta = {
+  category: "form",
+  description: "A native radio control with label, description, invalid, and disabled states.",
+  maturity: "stable",
+  name: "Radio",
+  props: [
+    { name: "checked", type: "boolean" },
+    { name: "label", type: "ReactNode" },
+    { name: "description", type: "ReactNode" },
+    { name: "invalid", type: "boolean", defaultValue: "false" },
+    { name: "size", type: "sm | md | lg", defaultValue: "md" },
+  ],
+  states: ["default", "hover", "focus-visible", "checked", "invalid", "disabled"],
+  tokens: ["color.content.primary", "color.content.muted", "color.content.disabled", "color.field.background", "color.field.border", "color.accent.default", "color.focus.ring"],
+} as const satisfies ComponentMeta;
diff --git a/design-system/packages/ui/src/components/Radio/Radio.module.css b/design-system/packages/ui/src/components/Radio/Radio.module.css
new file mode 100644
index 0000000000..95a44ba95b
--- /dev/null
+++ b/design-system/packages/ui/src/components/Radio/Radio.module.css
@@ -0,0 +1,123 @@
+@layer bf.components {
+  .root {
+    --_radio-size: 16px;
+
+    display: inline-flex;
+    min-inline-size: 0;
+    align-items: flex-start;
+    gap: var(--bf-space-2);
+    color: var(--bf-color-content-primary);
+    font-family: var(--bf-font-family-control);
+    cursor: pointer;
+  }
+
+  .root[data-size="sm"] { --_radio-size: 14px; }
+  .root[data-size="lg"] { --_radio-size: 18px; }
+
+  .control {
+    position: relative;
+    display: inline-grid;
+    flex: 0 0 auto;
+    inline-size: var(--_radio-size);
+    block-size: var(--_radio-size);
+    margin-block-start: 1px;
+    place-items: center;
+  }
+
+  .input {
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    inline-size: 100%;
+    block-size: 100%;
+    margin: 0;
+    opacity: 0;
+    cursor: inherit;
+  }
+
+  .circle {
+    display: grid;
+    inline-size: 100%;
+    block-size: 100%;
+    place-items: center;
+    border: var(--bf-border-width-default) solid var(--bf-color-field-border);
+    border-radius: 50%;
+    background: var(--bf-color-field-background);
+    transition:
+      background-color var(--bf-motion-duration-fast) var(--bf-motion-easing-standard),
+      border-color var(--bf-motion-duration-fast) var(--bf-motion-easing-standard),
+      box-shadow var(--bf-motion-duration-fast) var(--bf-motion-easing-standard);
+  }
+
+  .dot {
+    inline-size: 50%;
+    block-size: 50%;
+    border-radius: 50%;
+    background: var(--bf-color-content-inverse);
+    opacity: 0;
+    transform: scale(0.5);
+    transition:
+      opacity var(--bf-motion-duration-fast) var(--bf-motion-easing-standard),
+      transform var(--bf-motion-duration-fast) var(--bf-motion-easing-standard);
+  }
+
+  .input:checked + .circle {
+    border-color: var(--bf-color-accent-default);
+    background: var(--bf-color-accent-default);
+  }
+
+  .input:checked + .circle .dot {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  .input:hover:not(:disabled) + .circle {
+    border-color: var(--bf-color-field-border-hover);
+    background-color: var(--bf-color-field-background-hover);
+  }
+
+  .input:focus-visible + .circle {
+    border-color: var(--bf-color-field-border-focus);
+    box-shadow: 0 0 0 var(--bf-focus-width) var(--bf-color-focus-ring);
+  }
+
+  .root[data-invalid="true"] .circle {
+    border-color: var(--bf-color-status-danger-border);
+  }
+
+  .root[data-disabled="true"] {
+    color: var(--bf-color-content-disabled);
+    opacity: var(--bf-opacity-disabled);
+    cursor: not-allowed;
+  }
+
+  .content {
+    display: inline-flex;
+    min-inline-size: 0;
+    flex-direction: column;
+    gap: var(--bf-space-1);
+  }
+
+  .label {
+    font-size: var(--bf-font-size-small);
+    font-weight: var(--bf-font-weight-medium);
+    line-height: var(--bf-line-height-tight);
+  }
+
+  .description {
+    color: var(--bf-color-content-muted);
+    font-size: var(--bf-font-size-caption);
+    line-height: var(--bf-line-height-base);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .circle,
+    .dot { transition: none; }
+  }
+
+  @media (forced-colors: active) {
+    .circle { border-color: ButtonText; }
+    .input:checked + .circle { border-color: Highlight; background: Highlight; }
+    .input:focus-visible + .circle { box-shadow: 0 0 0 var(--bf-focus-width) Highlight; }
+  }
+}
diff --git a/design-system/packages/ui/src/components/Radio/Radio.tsx b/design-system/packages/ui/src/components/Radio/Radio.tsx
new file mode 100644
index 0000000000..5da72b9300
--- /dev/null
+++ b/design-system/packages/ui/src/components/Radio/Radio.tsx
@@ -0,0 +1,80 @@
+import {
+  forwardRef,
+  type InputHTMLAttributes,
+  type ReactNode,
+} from "react";
+import { classNames } from "../../internal/classNames";
+import styles from "./Radio.module.css";
+
+export type RadioSize = "sm" | "md" | "lg" | "small" | "medium" | "large";
+
+export interface RadioProps
+  extends Omit<InputHTMLAttributes<HTMLInputElement>, "children" | "size" | "type"> {
+  children?: ReactNode;
+  description?: ReactNode;
+  invalid?: boolean;
+  label?: ReactNode;
+  onCheckedChange?: (checked: boolean) => void;
+  size?: RadioSize;
+}
+
+function normalizeSize(size: RadioSize): "sm" | "md" | "lg" {
+  if (size === "small") return "sm";
+  if (size === "large") return "lg";
+  if (size === "medium") return "md";
+  return size;
+}
+
+export const Radio = forwardRef<HTMLInputElement, RadioProps>(function Radio({
+  checked,
+  children,
+  className,
+  defaultChecked,
+  description,
+  disabled = false,
+  invalid = false,
+  label,
+  onChange,
+  onCheckedChange,
+  size = "md",
+  ...props
+}, ref) {
+  const hasContent = label !== undefined || description !== undefined || children !== undefined;
+
+  return (
+    <label
+      className={classNames(styles.root, className)}
+      data-bf-component="radio"
+      data-disabled={disabled ? "true" : "false"}
+      data-invalid={invalid ? "true" : "false"}
+      data-size={normalizeSize(size)}
+    >
+      <span className={styles.control} data-bf-part="control">
+        <input
+          {...props}
+          aria-invalid={invalid || undefined}
+          checked={checked}
+          className={styles.input}
+          defaultChecked={defaultChecked}
+          disabled={disabled}
+          onChange={(event) => {
+            onChange?.(event);
+            if (!event.defaultPrevented) onCheckedChange?.(event.currentTarget.checked);
+          }}
+          ref={ref}
+          type="radio"
+        />
+        <span aria-hidden="true" className={styles.circle} data-bf-part="circle">
+          <span className={styles.dot} />
+        </span>
+      </span>
+      {hasContent && (
+        <span className={styles.content} data-bf-part="content">
+          {label !== undefined && <span className={styles.label}>{label}</span>}
+          {description !== undefined && <span className={styles.description}>{description}</span>}
+          {children}
+        </span>
+      )}
+    </label>
+  );
+});
diff --git a/design-system/packages/ui/src/components/Radio/index.ts b/design-system/packages/ui/src/components/Radio/index.ts
new file mode 100644
index 0000000000..30796ad5dd
--- /dev/null
+++ b/design-system/packages/ui/src/components/Radio/index.ts
@@ -0,0 +1 @@
+export { Radio, type RadioProps, type RadioSize } from "./Radio";
diff --git a/design-system/packages/ui/src/components/Textarea/Textarea.meta.ts b/design-system/packages/ui/src/components/Textarea/Textarea.meta.ts
new file mode 100644
index 0000000000..cf54844c2d
--- /dev/null
+++ b/design-system/packages/ui/src/components/Textarea/Textarea.meta.ts
@@ -0,0 +1,15 @@
+import type { ComponentMeta } from "../../registry.types";
+
+export const textareaMeta = {
+  category: "form",
+  description: "A multiline native text field with IME safety, support text, count, and auto-resize behavior.",
+  maturity: "stable",
+  name: "Textarea",
+  props: [
+    { name: "value", type: "string" }, { name: "label", type: "string" },
+    { name: "hint", type: "string" }, { name: "invalid", type: "boolean", defaultValue: "false" },
+    { name: "autoResize", type: "boolean", defaultValue: "false" }, { name: "showCount", type: "boolean", defaultValue: "false" },
+  ],
+  states: ["default", "hover", "focus-visible", "invalid", "disabled"],
+  tokens: ["color.content.primary", "color.content.muted", "color.content.disabled", "color.field.background", "color.field.border", "color.field.borderFocus", "color.focus.ring", "color.status.danger.border"],
+} as const satisfies ComponentMeta;
diff --git a/design-system/packages/ui/src/components/Textarea/Textarea.module.css b/design-system/packages/ui/src/components/Textarea/Textarea.module.css
new file mode 100644
index 0000000000..c1e9c8c0ce
--- /dev/null
+++ b/design-system/packages/ui/src/components/Textarea/Textarea.module.css
@@ -0,0 +1,33 @@
+@layer bf.components {
+  .root { display: inline-flex; min-inline-size: 0; flex-direction: column; gap: var(--bf-space-2); color: var(--bf-color-content-primary); font-family: var(--bf-font-family-control); }
+  .label { font-size: var(--bf-font-size-small); font-weight: var(--bf-font-weight-medium); line-height: var(--bf-line-height-tight); }
+  .required, .error { color: var(--bf-color-status-danger-content); }
+  .textarea {
+    min-block-size: calc(var(--bf-control-height-lg) * 2);
+    inline-size: 100%;
+    margin: 0;
+    padding: var(--bf-space-3);
+    resize: vertical;
+    border: var(--bf-border-width-default) solid var(--bf-color-field-border);
+    border-radius: var(--bf-radius-base);
+    outline: 0;
+    caret-color: var(--bf-color-accent-default);
+    color: var(--bf-color-content-primary);
+    background: var(--bf-color-field-background);
+    font: inherit;
+    font-size: var(--bf-font-size-small);
+    line-height: var(--bf-line-height-base);
+    transition: background-color var(--bf-motion-duration-fast) var(--bf-motion-easing-standard), border-color var(--bf-motion-duration-fast) var(--bf-motion-easing-standard), box-shadow var(--bf-motion-duration-fast) var(--bf-motion-easing-standard);
+  }
+  .root[data-auto-resize="true"] .textarea { overflow: hidden; resize: none; }
+  .root[data-variant="filled"] .textarea { border-color: transparent; }
+  .textarea:hover:not(:disabled) { border-color: var(--bf-color-field-border-hover); background: var(--bf-color-field-background-hover); }
+  .textarea:focus { border-color: var(--bf-color-field-border-focus); box-shadow: 0 0 0 var(--bf-focus-width) var(--bf-color-focus-ring); }
+  .root[data-invalid="true"] .textarea { border-color: var(--bf-color-status-danger-border); }
+  .textarea:disabled { color: var(--bf-color-content-disabled); cursor: not-allowed; }
+  .textarea::placeholder, .hint, .count { color: var(--bf-color-content-muted); }
+  .support { display: flex; justify-content: space-between; gap: var(--bf-space-3); font-size: var(--bf-font-size-caption); line-height: var(--bf-line-height-tight); }
+  .count { margin-inline-start: auto; white-space: nowrap; }
+  @media (prefers-reduced-motion: reduce) { .textarea { transition: none; } }
+  @media (forced-colors: active) { .textarea { border-color: ButtonText; } .textarea:focus { border-color: Highlight; box-shadow: 0 0 0 var(--bf-focus-width) Highlight; } }
+}
diff --git a/design-system/packages/ui/src/components/Textarea/Textarea.tsx b/design-system/packages/ui/src/components/Textarea/Textarea.tsx
new file mode 100644
index 0000000000..b4d568d2d4
--- /dev/null
+++ b/design-system/packages/ui/src/components/Textarea/Textarea.tsx
@@ -0,0 +1,125 @@
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useId,
+  useImperativeHandle,
+  useLayoutEffect,
+  useRef,
+  useState,
+  type ChangeEventHandler,
+  type TextareaHTMLAttributes,
+} from "react";
+import { classNames } from "../../internal/classNames";
+import { isImeOwnedKeyboardEvent } from "../../internal/ime";
+import styles from "./Textarea.module.css";
+
+const useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+
+export interface TextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "className"> {
+  autoResize?: boolean;
+  className?: string;
+  error?: boolean;
+  errorMessage?: string;
+  hint?: string;
+  invalid?: boolean;
+  label?: string;
+  onValueChange?: (value: string) => void;
+  showCount?: boolean;
+  textareaClassName?: string;
+  variant?: "default" | "filled" | "outlined";
+}
+
+export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(function Textarea({
+  "aria-describedby": ariaDescribedBy,
+  "aria-invalid": ariaInvalid,
+  autoResize = false,
+  className,
+  error = false,
+  errorMessage,
+  hint,
+  id,
+  invalid = false,
+  label,
+  maxLength,
+  onChange,
+  onCompositionEnd,
+  onCompositionStart,
+  onKeyDown,
+  onValueChange,
+  required,
+  showCount = false,
+  textareaClassName,
+  value,
+  variant = "default",
+  ...props
+}, ref) {
+  const generatedId = useId();
+  const resolvedId = id ?? `${generatedId}-textarea`;
+  const supportId = `${generatedId}-support`;
+  const compositionActiveRef = useRef(false);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const [uncontrolledCount, setUncontrolledCount] = useState(() => String(props.defaultValue ?? "").length);
+  const count = value === undefined ? uncontrolledCount : String(value).length;
+  const resolvedInvalid = invalid || error || (ariaInvalid !== undefined && ariaInvalid !== false && ariaInvalid !== "false");
+  const hasSupport = Boolean((resolvedInvalid && errorMessage) || (!resolvedInvalid && hint) || showCount);
+
+  const resize = useCallback((node: HTMLTextAreaElement) => {
+    if (!autoResize) return;
+    node.style.height = "auto";
+    node.style.height = `${node.scrollHeight}px`;
+  }, [autoResize]);
+
+  useImperativeHandle(ref, () => textareaRef.current as HTMLTextAreaElement);
+
+  useIsomorphicLayoutEffect(() => {
+    if (textareaRef.current) resize(textareaRef.current);
+  }, [resize, value]);
+
+  const handleChange: ChangeEventHandler<HTMLTextAreaElement> = (event) => {
+    setUncontrolledCount(event.currentTarget.value.length);
+    resize(event.currentTarget);
+    onChange?.(event);
+    onValueChange?.(event.currentTarget.value);
+  };
+
+  return (
+    <span
+      className={classNames(styles.root, className)}
+      data-auto-resize={autoResize ? "true" : "false"}
+      data-bf-component="textarea"
+      data-invalid={resolvedInvalid ? "true" : "false"}
+      data-variant={variant}
+    >
+      {label && <label className={styles.label} data-bf-part="label" htmlFor={resolvedId}>{label}{required && <span className={styles.required}>*</span>}</label>}
+      <textarea
+        {...props}
+        aria-describedby={hasSupport ? supportId : ariaDescribedBy}
+        aria-invalid={resolvedInvalid || undefined}
+        className={classNames(styles.textarea, textareaClassName)}
+        data-bf-part="input"
+        id={resolvedId}
+        maxLength={maxLength}
+        onChange={handleChange}
+        onCompositionEnd={(event) => { compositionActiveRef.current = false; onCompositionEnd?.(event); }}
+        onCompositionStart={(event) => { compositionActiveRef.current = true; onCompositionStart?.(event); }}
+        onKeyDown={(event) => {
+          if ((event.key === "Enter" || event.key === "Escape") && isImeOwnedKeyboardEvent(event, compositionActiveRef.current)) {
+            event.stopPropagation();
+            return;
+          }
+          onKeyDown?.(event);
+        }}
+        ref={textareaRef}
+        required={required}
+        value={value}
+      />
+      {hasSupport && (
+        <span className={styles.support} data-bf-part="support" id={supportId}>
+          <span className={resolvedInvalid ? styles.error : styles.hint} data-bf-part="message">{resolvedInvalid ? errorMessage : hint}</span>
+          {showCount && <span className={styles.count} data-bf-part="count">{count}{maxLength ? ` / ${maxLength}` : ""}</span>}
+        </span>
+      )}
+    </span>
+  );
+});
diff --git a/design-system/packages/ui/src/components/Textarea/index.ts b/design-system/packages/ui/src/components/Textarea/index.ts
new file mode 100644
index 0000000000..707cba84bd
--- /dev/null
+++ b/design-system/packages/ui/src/components/Textarea/index.ts
@@ -0,0 +1 @@
+export { Textarea, type TextareaProps } from "./Textarea";
diff --git a/design-system/packages/ui/src/index.ts b/design-system/packages/ui/src/index.ts
index 4c26911dc1..ed38fde050 100644
--- a/design-system/packages/ui/src/index.ts
+++ b/design-system/packages/ui/src/index.ts
@@ -20,7 +20,10 @@ export {
   type ActivityItemProps,
   type ChangeCountProps,
 } from "./components/ActivityItem";
+export { Alert, type AlertProps, type AlertTone } from "./components/Alert";
+export { Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarSize } from "./components/Avatar";
 export { Button, type ButtonProps } from "./components/Button";
+export { Checkbox, type CheckboxProps, type CheckboxSize } from "./components/Checkbox";
 export {
   Card,
   CardBody,
@@ -89,6 +92,7 @@ export {
 export { IconButton, type IconButtonProps } from "./components/IconButton";
 export { Input, type InputProps } from "./components/Input";
 export { KeyHint, type KeyHintProps } from "./components/KeyHint";
+export { NumberInput, type NumberInputProps } from "./components/NumberInput";
 export {
   Menu,
   MenuItem,
@@ -129,6 +133,7 @@ export {
   type NavigationPanelSeparatorProps,
 } from "./components/NavigationPanel";
 export { PageHeader, type PageHeaderProps } from "./components/PageHeader";
+export { Radio, type RadioProps, type RadioSize } from "./components/Radio";
 export {
   ScrollArea,
   type ScrollAreaOrientation,
@@ -154,6 +159,9 @@ export {
   type StatusPillTone,
 } from "./components/StatusPill";
 export { Switch, type SwitchProps } from "./components/Switch";
+export { Textarea, type TextareaProps } from "./components/Textarea";
+export { Disclosure, type DisclosureProps } from "./components/Disclosure";
+export { Empty, type EmptyMediaSize, type EmptyProps } from "./components/Empty";
 export {
   TabGroup,
   type TabGroupItem,
diff --git a/design-system/packages/ui/src/registry.ts b/design-system/packages/ui/src/registry.ts
index 87235f61f8..42c387ad4b 100644
--- a/design-system/packages/ui/src/registry.ts
+++ b/design-system/packages/ui/src/registry.ts
@@ -1,10 +1,15 @@
 import { actionItemMeta } from "./components/ActionItem/ActionItem.meta";
 import { actionCardMeta } from "./components/ActionCard/ActionCard.meta";
 import { activityItemMeta } from "./components/ActivityItem/ActivityItem.meta";
+import { alertMeta } from "./components/Alert/Alert.meta";
+import { avatarMeta } from "./components/Avatar/Avatar.meta";
 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 { confirmDialogMeta } from "./components/ConfirmDialog/ConfirmDialog.meta";
+import { disclosureMeta } from "./components/Disclosure/Disclosure.meta";
+import { emptyMeta } from "./components/Empty/Empty.meta";
 import { fieldMeta } from "./components/Field/Field.meta";
 import { fieldGroupMeta } from "./components/FieldGroup/FieldGroup.meta";
 import { iconMeta } from "./components/Icon/Icon.meta";
@@ -14,13 +19,16 @@ import { keyHintMeta } from "./components/KeyHint/KeyHint.meta";
 import { menuMeta } from "./components/Menu/Menu.meta";
 import { modalMeta } from "./components/Modal/Modal.meta";
 import { navigationPanelMeta } from "./components/NavigationPanel/NavigationPanel.meta";
+import { numberInputMeta } from "./components/NumberInput/NumberInput.meta";
 import { pageHeaderMeta } from "./components/PageHeader/PageHeader.meta";
+import { radioMeta } from "./components/Radio/Radio.meta";
 import { scrollAreaMeta } from "./components/ScrollArea/ScrollArea.meta";
 import { searchFieldMeta } from "./components/SearchField/SearchField.meta";
 import { segmentedControlMeta } from "./components/SegmentedControl/SegmentedControl.meta";
 import { selectMeta } from "./components/Select/Select.meta";
 import { statusPillMeta } from "./components/StatusPill/StatusPill.meta";
 import { switchMeta } from "./components/Switch/Switch.meta";
+import { textareaMeta } from "./components/Textarea/Textarea.meta";
 import { tabGroupMeta } from "./components/TabGroup/TabGroup.meta";
 import { toolbarMeta } from "./components/Toolbar/Toolbar.meta";
 import { tooltipMeta } from "./components/Tooltip/Tooltip.meta";
@@ -69,18 +77,23 @@ export const componentRegistry = [
   actionCardMeta,
   actionItemMeta,
   activityItemMeta,
+  alertMeta,
   agentControlToolCardMeta,
   agentWaitToolCardMeta,
   ambientToolCardMeta,
   askUserMeta,
+  avatarMeta,
   buttonMeta,
   cardMeta,
+  checkboxMeta,
   chatComposerMeta,
   commandToolCardMeta,
   composerMeta,
   confirmDialogMeta,
   contextCompressionToolCardMeta,
   defaultToolCardMeta,
+  disclosureMeta,
+  emptyMeta,
   directoryListToolCardMeta,
   fieldMeta,
   fieldGroupMeta,
@@ -97,8 +110,10 @@ export const componentRegistry = [
   menuMeta,
   modalMeta,
   navigationPanelMeta,
+  numberInputMeta,
   pageDeployToolCardMeta,
   pageHeaderMeta,
+  radioMeta,
   pagePublishToolCardMeta,
   prominentToolCardMeta,
   readFileToolCardMeta,
@@ -114,6 +129,7 @@ export const componentRegistry = [
   statusPillMeta,
   switchMeta,
   tabGroupMeta,
+  textareaMeta,
   terminalControlToolCardMeta,
   todoToolCardMeta,
   toolbarMeta,
diff --git a/design-system/packages/ui/tests/alert.test.mjs b/design-system/packages/ui/tests/alert.test.mjs
new file mode 100644
index 0000000000..c780cd3a00
--- /dev/null
+++ b/design-system/packages/ui/tests/alert.test.mjs
@@ -0,0 +1,21 @@
+import assert from "node:assert/strict";
+import { createElement } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import test from "node:test";
+import { Alert } from "../dist/index.js";
+
+test("Alert exposes semantic tone and public anatomy", () => {
+  const markup = renderToStaticMarkup(createElement(Alert, {
+    description: "Reconnect to continue.",
+    message: "The remote host is offline.",
+    showIcon: false,
+    title: "Connection unavailable",
+    tone: "warning",
+  }));
+
+  assert.match(markup, /data-bf-component="alert"/);
+  assert.match(markup, /data-bf-tone="warning"/);
+  assert.match(markup, /data-bf-part="title"/);
+  assert.match(markup, /data-bf-part="message"/);
+  assert.match(markup, /data-bf-part="description"/);
+});
diff --git a/design-system/packages/ui/tests/avatar.test.mjs b/design-system/packages/ui/tests/avatar.test.mjs
new file mode 100644
index 0000000000..fb52e372f5
--- /dev/null
+++ b/design-system/packages/ui/tests/avatar.test.mjs
@@ -0,0 +1,30 @@
+import assert from "node:assert/strict";
+import { createElement } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import test from "node:test";
+import { Avatar, AvatarGroup } from "../dist/index.js";
+
+test("Avatar renders text fallback with a stable anatomy contract", () => {
+  const markup = renderToStaticMarkup(createElement(Avatar, {
+    children: "BF",
+    shape: "square",
+    size: "small",
+  }));
+
+  assert.match(markup, /data-bf-component="avatar"/);
+  assert.match(markup, /data-bf-shape="square"/);
+  assert.match(markup, /data-size="sm"/);
+  assert.match(markup, /data-bf-part="text"/);
+});
+
+test("AvatarGroup reports overflow", () => {
+  const markup = renderToStaticMarkup(createElement(
+    AvatarGroup,
+    { maxCount: 1 },
+    createElement(Avatar, null, "A"),
+    createElement(Avatar, null, "B"),
+  ));
+
+  assert.match(markup, /data-bf-component="avatar-group"/);
+  assert.match(markup, /\+1/);
+});
diff --git a/design-system/packages/ui/tests/checkbox.test.mjs b/design-system/packages/ui/tests/checkbox.test.mjs
new file mode 100644
index 0000000000..d90b17255a
--- /dev/null
+++ b/design-system/packages/ui/tests/checkbox.test.mjs
@@ -0,0 +1,32 @@
+import assert from "node:assert/strict";
+import { createElement } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import test from "node:test";
+import { Checkbox } from "../dist/index.js";
+
+test("Checkbox keeps native semantics and independent content", () => {
+  const markup = renderToStaticMarkup(createElement(Checkbox, {
+    checked: true,
+    description: "Runs at startup",
+    label: "Enable hooks",
+    readOnly: true,
+  }));
+  assert.match(markup, /type="checkbox"/);
+  assert.match(markup, /checked=""/);
+  assert.match(markup, /Enable hooks/);
+  assert.match(markup, /Runs at startup/);
+  assert.match(markup, /data-bf-component="checkbox"/);
+});
+
+test("Checkbox exposes migration-compatible sizes and states", () => {
+  const markup = renderToStaticMarkup(createElement(Checkbox, {
+    disabled: true,
+    error: true,
+    indeterminate: true,
+    size: "small",
+  }));
+  assert.match(markup, /data-size="sm"/);
+  assert.match(markup, /data-disabled="true"/);
+  assert.match(markup, /data-invalid="true"/);
+  assert.match(markup, /data-indeterminate="true"/);
+});
diff --git a/design-system/packages/ui/tests/disclosure.test.mjs b/design-system/packages/ui/tests/disclosure.test.mjs
new file mode 100644
index 0000000000..08d2905424
--- /dev/null
+++ b/design-system/packages/ui/tests/disclosure.test.mjs
@@ -0,0 +1,47 @@
+import assert from "node:assert/strict";
+import { readFile } from "node:fs/promises";
+import test from "node:test";
+import { createElement } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { Disclosure } from "../dist/index.js";
+
+test("Disclosure connects its trigger and region with accessible state", () => {
+  const markup = renderToStaticMarkup(createElement(
+    Disclosure,
+    { defaultOpen: true, summary: "Advanced" },
+    createElement("button", null, "Reset"),
+  ));
+
+  assert.match(markup, /data-bf-component="disclosure"/);
+  assert.match(markup, /data-open="true"/);
+  assert.match(markup, /aria-expanded="true"/);
+  assert.match(markup, /aria-controls="bf-disclosure-[^"]+-content"/);
+  assert.match(markup, /role="region"/);
+  assert.match(markup, /aria-labelledby="bf-disclosure-[^"]+-trigger"/);
+  assert.doesNotMatch(markup, /inert=""/);
+});
+
+test("Disclosure removes collapsed content from sequential focus navigation", () => {
+  const markup = renderToStaticMarkup(createElement(
+    Disclosure,
+    { summary: "Advanced" },
+    createElement("button", null, "Reset"),
+  ));
+
+  assert.match(markup, /data-open="false"/);
+  assert.match(markup, /aria-expanded="false"/);
+  assert.match(markup, /aria-hidden="true"/);
+  assert.match(markup, /inert=""/);
+});
+
+test("Disclosure uses public geometry tokens and honors reduced motion", async () => {
+  const styles = await readFile(
+    new URL("../src/components/Disclosure/Disclosure.module.css", import.meta.url),
+    "utf8",
+  );
+
+  assert.match(styles, /--bf-layout-disclosure-trigger-min-block-size/);
+  assert.match(styles, /--bf-layout-disclosure-content-padding-inline/);
+  assert.match(styles, /prefers-reduced-motion: reduce/);
+  assert.doesNotMatch(styles, /#[0-9a-f]{3,8}/i);
+});
diff --git a/design-system/packages/ui/tests/empty.test.mjs b/design-system/packages/ui/tests/empty.test.mjs
new file mode 100644
index 0000000000..03eb90fb56
--- /dev/null
+++ b/design-system/packages/ui/tests/empty.test.mjs
@@ -0,0 +1,21 @@
+import assert from "node:assert/strict";
+import { createElement } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import test from "node:test";
+import { Empty } from "../dist/index.js";
+
+test("Empty exposes independent media, copy, and action regions", () => {
+  const markup = renderToStaticMarkup(createElement(Empty, {
+    actions: createElement("button", null, "Create"),
+    description: "Create an item to get started.",
+    imageSize: "small",
+    title: "No items",
+  }));
+
+  assert.match(markup, /data-bf-component="empty"/);
+  assert.match(markup, /data-bf-part="media"/);
+  assert.match(markup, /data-size="sm"/);
+  assert.match(markup, /data-bf-part="title"/);
+  assert.match(markup, /data-bf-part="description"/);
+  assert.match(markup, /data-bf-part="actions"/);
+});
diff --git a/design-system/packages/ui/tests/icon.test.mjs b/design-system/packages/ui/tests/icon.test.mjs
index e01721dcef..215b964095 100644
--- a/design-system/packages/ui/tests/icon.test.mjs
+++ b/design-system/packages/ui/tests/icon.test.mjs
@@ -6,11 +6,13 @@ import test from "node:test";
 import { Icon, iconNames } from "../dist/index.js";
 
 test("Icon exposes the complete named catalog without duplicate names", () => {
-  assert.equal(iconNames.length, 54);
+  assert.equal(iconNames.length, 56);
   assert.equal(new Set(iconNames).size, iconNames.length);
   assert.ok(iconNames.includes("search"));
   assert.ok(iconNames.includes("commit"));
   assert.ok(iconNames.includes("sidebar-right"));
+  assert.ok(iconNames.includes("chevron-up"));
+  assert.ok(iconNames.includes("refresh"));
 });
 
 test("Icon is decorative by default and owns its exact asset source", () => {
diff --git a/design-system/packages/ui/tests/number-input.test.mjs b/design-system/packages/ui/tests/number-input.test.mjs
new file mode 100644
index 0000000000..35c2fadda9
--- /dev/null
+++ b/design-system/packages/ui/tests/number-input.test.mjs
@@ -0,0 +1,39 @@
+import assert from "node:assert/strict";
+import { createElement } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import test from "node:test";
+import { NumberInput } from "../dist/index.js";
+
+test("NumberInput exposes a decimal input, unit, and labelled step controls", () => {
+  const markup = renderToStaticMarkup(createElement(NumberInput, {
+    decrementLabel: "Less",
+    incrementLabel: "More",
+    onChange: () => undefined,
+    unit: "%",
+    value: 50,
+  }));
+  assert.match(markup, /inputMode="decimal"/);
+  assert.match(markup, /aria-label="Less"/);
+  assert.match(markup, /aria-label="More"/);
+  assert.match(markup, />%<\/span>/);
+  assert.match(markup, /data-bf-component="number-input"/);
+});
+
+test("NumberInput normalizes legacy size names", () => {
+  const markup = renderToStaticMarkup(createElement(NumberInput, {
+    onChange: () => undefined,
+    size: "large",
+    value: 3,
+  }));
+  assert.match(markup, /data-size="lg"/);
+});
+
+test("NumberInput forwards native input attributes", () => {
+  const markup = renderToStaticMarkup(createElement(NumberInput, {
+    inputProps: { "aria-label": "Font size", "data-testid": "font-size" },
+    onChange: () => undefined,
+    value: 14,
+  }));
+  assert.match(markup, /aria-label="Font size"/);
+  assert.match(markup, /data-testid="font-size"/);
+});
diff --git a/design-system/packages/ui/tests/radio.test.mjs b/design-system/packages/ui/tests/radio.test.mjs
new file mode 100644
index 0000000000..5fe8a0b04c
--- /dev/null
+++ b/design-system/packages/ui/tests/radio.test.mjs
@@ -0,0 +1,34 @@
+import assert from "node:assert/strict";
+import { createElement } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import test from "node:test";
+import { Radio } from "../dist/index.js";
+
+test("Radio keeps native semantics and supporting copy", () => {
+  const markup = renderToStaticMarkup(createElement(Radio, {
+    checked: true,
+    description: "Uses the recommended model",
+    label: "Primary",
+    name: "model",
+    readOnly: true,
+    value: "primary",
+  }));
+  assert.match(markup, /type="radio"/);
+  assert.match(markup, /checked=""/);
+  assert.match(markup, /name="model"/);
+  assert.match(markup, /Primary/);
+  assert.match(markup, /Uses the recommended model/);
+  assert.match(markup, /data-bf-component="radio"/);
+});
+
+test("Radio exposes normalized sizes and states", () => {
+  const markup = renderToStaticMarkup(createElement(Radio, {
+    disabled: true,
+    invalid: true,
+    label: "Unavailable",
+    size: "small",
+  }));
+  assert.match(markup, /data-size="sm"/);
+  assert.match(markup, /data-disabled="true"/);
+  assert.match(markup, /data-invalid="true"/);
+});
diff --git a/design-system/packages/ui/tests/registry.test.mjs b/design-system/packages/ui/tests/registry.test.mjs
index f2994e9303..ad49fa8832 100644
--- a/design-system/packages/ui/tests/registry.test.mjs
+++ b/design-system/packages/ui/tests/registry.test.mjs
@@ -14,18 +14,23 @@ test("registry exposes only the formal stable components", () => {
       "ActionCard",
       "ActionItem",
       "ActivityItem",
+      "Alert",
       "AgentControlToolCard",
       "AgentWaitToolCard",
       "AmbientToolCard",
       "AskUser",
+      "Avatar",
       "Button",
       "Card",
+      "Checkbox",
       "ChatComposer",
       "CommandToolCard",
       "Composer",
       "ConfirmDialog",
       "ContextCompressionToolCard",
       "DefaultToolCard",
+      "Disclosure",
+      "Empty",
       "DirectoryListToolCard",
       "Field",
       "FieldGroup",
@@ -42,8 +47,10 @@ test("registry exposes only the formal stable components", () => {
       "Menu",
       "Modal",
       "NavigationPanel",
+      "NumberInput",
       "PageDeployToolCard",
       "PageHeader",
+      "Radio",
       "PagePublishToolCard",
       "ProminentToolCard",
       "ReadFileToolCard",
@@ -59,6 +66,7 @@ test("registry exposes only the formal stable components", () => {
       "StatusPill",
       "Switch",
       "TabGroup",
+      "Textarea",
       "TerminalControlToolCard",
       "TodoToolCard",
       "Toolbar",
@@ -85,6 +93,7 @@ test("every registered component declares states and owned tokens", () => {
           token.startsWith("color.") ||
           token.startsWith("control.") ||
           token.startsWith("font.") ||
+          token.startsWith("lineHeight.") ||
           token.startsWith("layout.") ||
           token.startsWith("lineHeight.") ||
           token.startsWith("overlay.") ||
diff --git a/design-system/packages/ui/tests/textarea.test.mjs b/design-system/packages/ui/tests/textarea.test.mjs
new file mode 100644
index 0000000000..f9b32253aa
--- /dev/null
+++ b/design-system/packages/ui/tests/textarea.test.mjs
@@ -0,0 +1,35 @@
+import assert from "node:assert/strict";
+import { createElement } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { readFile } from "node:fs/promises";
+import test from "node:test";
+import { Textarea } from "../dist/index.js";
+
+test("Textarea keeps native semantics, labels, support text, and count", () => {
+  const markup = renderToStaticMarkup(createElement(Textarea, {
+    label: "Instructions",
+    maxLength: 80,
+    showCount: true,
+    value: "Review this change",
+    readOnly: true,
+  }));
+  assert.match(markup, /<textarea/);
+  assert.match(markup, /Instructions/);
+  assert.match(markup, /18 \/ 80/);
+  assert.match(markup, /data-bf-component="textarea"/);
+});
+
+test("Textarea guards IME-owned commit and cancel keys", async () => {
+  const source = await readFile(new URL("../src/components/Textarea/Textarea.tsx", import.meta.url), "utf8");
+  assert.match(source, /isImeOwnedKeyboardEvent/);
+  assert.match(source, /event\.stopPropagation\(\)/);
+  assert.match(source, /onCompositionStart/);
+  assert.match(source, /onCompositionEnd/);
+});
+
+test("Textarea resizes on mount and when a controlled value changes", async () => {
+  const source = await readFile(new URL("../src/components/Textarea/Textarea.tsx", import.meta.url), "utf8");
+  assert.match(source, /useIsomorphicLayoutEffect/);
+  assert.match(source, /\[resize, value\]/);
+  assert.match(source, /resize\(textareaRef\.current\)/);
+});
diff --git a/src/web-ui/src/app/components/AboutDialog/AboutDialog.tsx b/src/web-ui/src/app/components/AboutDialog/AboutDialog.tsx
index 81cc8acf2d..8e02677def 100644
--- a/src/web-ui/src/app/components/AboutDialog/AboutDialog.tsx
+++ b/src/web-ui/src/app/components/AboutDialog/AboutDialog.tsx
@@ -4,10 +4,9 @@
  * persistent GitHub repository entry point.
  */
 
-import { Button, Icon, Modal, ScrollArea, Tooltip } from '@bitfun/ui';
+import { Alert, Button, Icon, Modal, ScrollArea, Tooltip } from '@bitfun/ui';
 import React, { useCallback, useEffect, useState } from 'react';
 import { useI18n } from '@/infrastructure/i18n';
-import { Alert } from '@/component-library';
 import {
   CalendarDays,
   Code2,
diff --git a/src/web-ui/src/app/components/MCPInteractionDialog/MCPInteractionDialog.scss b/src/web-ui/src/app/components/MCPInteractionDialog/MCPInteractionDialog.scss
index f6967b7bc4..ec919adb82 100644
--- a/src/web-ui/src/app/components/MCPInteractionDialog/MCPInteractionDialog.scss
+++ b/src/web-ui/src/app/components/MCPInteractionDialog/MCPInteractionDialog.scss
@@ -49,6 +49,10 @@
   max-height: 180px;
 }
 
+.mcp-interaction-dialog__editor-field {
+  width: 100%;
+}
+
 .mcp-interaction-dialog__editor {
   width: 100%;
   min-height: 190px;
diff --git a/src/web-ui/src/app/components/MCPInteractionDialog/MCPInteractionDialog.tsx b/src/web-ui/src/app/components/MCPInteractionDialog/MCPInteractionDialog.tsx
index e346794cc7..8000c73625 100644
--- a/src/web-ui/src/app/components/MCPInteractionDialog/MCPInteractionDialog.tsx
+++ b/src/web-ui/src/app/components/MCPInteractionDialog/MCPInteractionDialog.tsx
@@ -1,4 +1,4 @@
-import { Button, Modal, ScrollArea } from '@bitfun/ui';
+import { Button, Modal, ScrollArea, Textarea } from '@bitfun/ui';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { globalEventBus } from '@/infrastructure/event-bus';
 import { MCPAPI } from '@/infrastructure/api/service-api/MCPAPI';
@@ -160,12 +160,13 @@ export const MCPInteractionDialog: React.FC = () => {
 
           <div className="mcp-interaction-dialog__section" data-bf-component="mcp-interaction-dialog" data-bf-part="section">
             <div className="mcp-interaction-dialog__label" data-bf-component="mcp-interaction-dialog" data-bf-part="label">Response JSON</div>
-            <textarea
-              className="mcp-interaction-dialog__editor"
+            <Textarea
+              className="mcp-interaction-dialog__editor-field"
+              textareaClassName="mcp-interaction-dialog__editor"
               data-bf-component="mcp-interaction-dialog"
               data-bf-part="editor"
               value={editorValue}
-              onChange={(e) => setEditorValue(e.target.value)}
+              onValueChange={setEditorValue}
               placeholder="{}"
               spellCheck={false}
             />
diff --git a/src/web-ui/src/app/components/NavPanel/components/BranchQuickSwitch.scss b/src/web-ui/src/app/components/NavPanel/components/BranchQuickSwitch.scss
index e93b877313..f575d91505 100644
--- a/src/web-ui/src/app/components/NavPanel/components/BranchQuickSwitch.scss
+++ b/src/web-ui/src/app/components/NavPanel/components/BranchQuickSwitch.scss
@@ -21,6 +21,10 @@
   border-bottom: 1px solid var(--bf-appearance-token-border-subtle);
 }
 
+.branch-quick-switch__input-field {
+  width: 100%;
+}
+
 .branch-quick-switch__input {
   width: 100%;
   padding: 6px 10px;
diff --git a/src/web-ui/src/app/components/NavPanel/components/BranchQuickSwitch.tsx b/src/web-ui/src/app/components/NavPanel/components/BranchQuickSwitch.tsx
index c06cc63b7b..a18de9fdd6 100644
--- a/src/web-ui/src/app/components/NavPanel/components/BranchQuickSwitch.tsx
+++ b/src/web-ui/src/app/components/NavPanel/components/BranchQuickSwitch.tsx
@@ -5,7 +5,7 @@
  */
 
 import React, { useState, useEffect, useMemo, useRef, useCallback } from 'react';
-import { Icon, ScrollArea } from '@bitfun/ui';
+import { Icon, ScrollArea, SearchField } from '@bitfun/ui';
 import { Loader2 } from 'lucide-react';
 import { type GitBranch as GitBranchType } from '../../../../infrastructure/api/service-api/GitAPI';
 import { useI18n } from '@/infrastructure/i18n';
@@ -242,19 +242,20 @@ export const BranchQuickSwitch: React.FC<BranchQuickSwitchProps> = ({
       onKeyDown={handleKeyDown}
     >
       <div data-bf-component="branch-quick-switch" data-bf-part="search" className="branch-quick-switch__search">
-        <input
+        <SearchField
           ref={inputRef}
-          type="text"
+          className="branch-quick-switch__input-field"
+          inputClassName="branch-quick-switch__input"
+          leadingIcon={<Icon name="search" size="sm" />}
           placeholder={t('quickSwitch.searchPlaceholder')}
           value={searchTerm}
-          onChange={(e) => setSearchTerm(e.target.value)}
+          onValueChange={setSearchTerm}
           onCompositionStart={() => {
             inputCompositionActiveRef.current = true;
           }}
           onCompositionEnd={() => {
             inputCompositionActiveRef.current = false;
           }}
-          className="branch-quick-switch__input"
           data-bf-component="branch-quick-switch"
           data-bf-part="input"
         />
diff --git a/src/web-ui/src/app/components/NavPanel/components/GithubStarButton.tsx b/src/web-ui/src/app/components/NavPanel/components/GithubStarButton.tsx
index 6cb5e01587..b717275317 100644
--- a/src/web-ui/src/app/components/NavPanel/components/GithubStarButton.tsx
+++ b/src/web-ui/src/app/components/NavPanel/components/GithubStarButton.tsx
@@ -4,7 +4,7 @@ import React, { useCallback, useState } from 'react';
 import { useI18n } from '@/infrastructure/i18n/hooks/useI18n';
 import { systemAPI } from '@/infrastructure/api/service-api/SystemAPI';
 import { createLogger } from '@/shared/utils/logger';
-import { Icon, Tooltip } from '@bitfun/ui';
+import { Button, Icon, Tooltip } from '@bitfun/ui';
 import {
   GITHUB_STAR_URL,
   isGithubStarCtaDismissed,
@@ -38,20 +38,23 @@ const GithubStarButton: React.FC = () => {
   return (
     <div className="bitfun-nav-panel__footer-star">
       <Tooltip content={t('nav.githubStar.tooltip')} placement="top">
-        <button
-          type="button"
+        <Button
+          variant="text"
+          size="xs"
           className="bitfun-nav-panel__footer-star-btn"
           onClick={handleStar}
           data-testid="nav-footer-github-star-btn"
           data-bf-component="nav-panel"
           data-bf-part="footerButton"
+          leadingIcon={(
+            <span className="bitfun-nav-panel__footer-btn-icon-swap" aria-hidden="true">
+              <Icon name="star" size="sm" className="bitfun-nav-panel__footer-btn-icon-swap-default" />
+              <Icon name="star" size="sm" className="bitfun-nav-panel__footer-btn-icon-swap-hover" />
+            </span>
+          )}
         >
-          <span className="bitfun-nav-panel__footer-btn-icon-swap" aria-hidden="true">
-            <Icon name="star" size="sm" className="bitfun-nav-panel__footer-btn-icon-swap-default" />
-            <Icon name="star" size="sm" className="bitfun-nav-panel__footer-btn-icon-swap-hover" />
-          </span>
           <span className="bitfun-nav-panel__footer-star-label">{t('nav.githubStar.label')}</span>
-        </button>
+        </Button>
       </Tooltip>
     </div>
   );
diff --git a/src/web-ui/src/app/components/NavPanel/components/PersistentFooterActions.tsx b/src/web-ui/src/app/components/NavPanel/components/PersistentFooterActions.tsx
index 65cc239986..1356553a91 100644
--- a/src/web-ui/src/app/components/NavPanel/components/PersistentFooterActions.tsx
+++ b/src/web-ui/src/app/components/NavPanel/components/PersistentFooterActions.tsx
@@ -3,7 +3,7 @@ import { createPortal } from 'react-dom';
 import {
   PictureInPicture2,
 } from 'lucide-react';
-import { Icon, Menu, MenuItem, MenuSeparator, Modal, Tooltip } from '@bitfun/ui';
+import { Icon, IconButton, Menu, MenuItem, MenuSeparator, Modal, Tooltip } from '@bitfun/ui';
 import { PresenceBoundary } from '@/component-library';
 import { useI18n } from '@/infrastructure/i18n/hooks/useI18n';
 import { useSceneStore } from '../../../stores/sceneStore';
@@ -185,9 +185,8 @@ const PersistentFooterActions: React.FC = () => {
               followCursor
               disabled={menuOpen}
             >
-              <button
+              <IconButton
                 ref={menuTriggerRef}
-                type="button"
                 className={`bitfun-nav-panel__footer-btn bitfun-nav-panel__footer-btn--icon${menuOpen || isSettingsActive ? ' is-active' : ''}`}
                 aria-label={t('shared:features.settings')}
                 aria-expanded={menuOpen}
@@ -198,9 +197,10 @@ const PersistentFooterActions: React.FC = () => {
                 data-bf-component="nav-panel"
                 data-bf-part="settingsEntry"
                 data-bf-state={menuOpen ? 'open' : isSettingsActive ? 'active' : undefined}
-              >
-                <Icon name="settings" size="sm" aria-hidden="true" />
-              </button>
+                icon={<Icon name="settings" size="sm" aria-hidden="true" />}
+                size="sm"
+                variant="quiet"
+              />
             </Tooltip>
 
             {menuOpen && createPortal(
diff --git a/src/web-ui/src/app/components/NavPanel/components/WorkspaceSessionGroupingToggle.tsx b/src/web-ui/src/app/components/NavPanel/components/WorkspaceSessionGroupingToggle.tsx
index 88429874ec..0b2ff8e6b3 100644
--- a/src/web-ui/src/app/components/NavPanel/components/WorkspaceSessionGroupingToggle.tsx
+++ b/src/web-ui/src/app/components/NavPanel/components/WorkspaceSessionGroupingToggle.tsx
@@ -5,7 +5,7 @@ import {
   NavigationSessionViewGroupedIcon,
 } from '@/component-library';
 import { useI18n } from '@/infrastructure/i18n';
-import { Tooltip } from '@bitfun/ui';
+import { IconButton, Tooltip } from '@bitfun/ui';
 import {
   getNextWorkspaceSessionGrouping,
   useWorkspaceSessionViewStore,
@@ -27,11 +27,13 @@ const WorkspaceSessionGroupingToggle: React.FC = () => {
       placement="right"
       followCursor
     >
-      <button
-        type="button"
+      <IconButton
         className="bitfun-nav-panel__section-action bitfun-nav-panel__session-view-toggle"
-        aria-label={t('nav.sessions.viewToggle.allTooltip')}
+        aria-label={actionTooltip}
         aria-pressed={isAll}
+        icon={<ViewIcon size={BITFUN_ICON_SIZE.navigation} aria-hidden="true" />}
+        size="xs"
+        variant="quiet"
         data-bf-action="toggle-session-view"
         data-bf-component="session-navigation"
         data-bf-part="viewToggle"
@@ -39,9 +41,7 @@ const WorkspaceSessionGroupingToggle: React.FC = () => {
         data-testid="nav-workspace-session-view-toggle"
         data-view-mode={grouping}
         onClick={() => setGrouping(getNextWorkspaceSessionGrouping(grouping))}
-      >
-        <ViewIcon size={BITFUN_ICON_SIZE.navigation} aria-hidden="true" />
-      </button>
+      />
     </Tooltip>
   );
 };
diff --git a/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceRelatedPathsDialog.scss b/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceRelatedPathsDialog.scss
index ecc78e2f43..460c7a8964 100644
--- a/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceRelatedPathsDialog.scss
+++ b/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceRelatedPathsDialog.scss
@@ -254,7 +254,7 @@
   }
 
   &__path-input[data-bf-component='input'],
-  &__description .bitfun-textarea__field {
+  &__description [data-bf-component='textarea'] > [data-bf-part='input'] {
     border-radius: 8px;
   }
 
@@ -267,7 +267,7 @@
     min-width: 84px;
   }
 
-  &__description .bitfun-textarea__field {
+  &__description [data-bf-component='textarea'] > [data-bf-part='input'] {
     min-height: 64px;
     padding: 10px 12px;
     background: transparent;
diff --git a/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceRelatedPathsDialog.tsx b/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceRelatedPathsDialog.tsx
index 03d2713700..60a876946e 100644
--- a/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceRelatedPathsDialog.tsx
+++ b/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceRelatedPathsDialog.tsx
@@ -1,6 +1,5 @@
-import { Button, Icon, Input, Modal } from '@bitfun/ui';
+import { Button, Icon, Input, Modal, Textarea } from '@bitfun/ui';
 import React, { useEffect, useMemo, useState } from 'react';
-import { Textarea } from '@/component-library';
 import { useI18n } from '@/infrastructure/i18n';
 import { useWorkspaceContext } from '@/infrastructure/contexts/WorkspaceContext';
 import {
diff --git a/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceSessionBatchModal.tsx b/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceSessionBatchModal.tsx
index 25139712fe..bafa999d6e 100644
--- a/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceSessionBatchModal.tsx
+++ b/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceSessionBatchModal.tsx
@@ -1,7 +1,6 @@
-import { Button, Icon, Modal, ScrollArea } from '@bitfun/ui';
+import { Button, Checkbox, Icon, Modal, ScrollArea } from '@bitfun/ui';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { Archive, Bot, FolderKanban, Loader2, Trash2 } from 'lucide-react';
-import { Checkbox} from '@/component-library';
 import { useI18n } from '@/infrastructure/i18n';
 import { sessionAPI } from '@/infrastructure/api/service-api/SessionAPI';
 import type { SessionMetadata } from '@/shared/types/session-history';
diff --git a/src/web-ui/src/app/components/RemoteConnectDialog/AccountPanel.scss b/src/web-ui/src/app/components/RemoteConnectDialog/AccountPanel.scss
index 469898c1b8..a07d2877d7 100644
--- a/src/web-ui/src/app/components/RemoteConnectDialog/AccountPanel.scss
+++ b/src/web-ui/src/app/components/RemoteConnectDialog/AccountPanel.scss
@@ -27,7 +27,7 @@
     background: var(--bf-color-surface-panel);
   }
 
-  &__error-alert.alert {
+  &__error-alert[data-bf-component='alert'] {
     padding: 9px 11px;
     align-items: center;
   }
diff --git a/src/web-ui/src/app/components/RemoteConnectDialog/AccountPanel.tsx b/src/web-ui/src/app/components/RemoteConnectDialog/AccountPanel.tsx
index dedd9ce0a2..2ca10be564 100644
--- a/src/web-ui/src/app/components/RemoteConnectDialog/AccountPanel.tsx
+++ b/src/web-ui/src/app/components/RemoteConnectDialog/AccountPanel.tsx
@@ -15,11 +15,10 @@
  *   group), not an external README. See `src/features/relay-deploy/README.md`.
  */
 
-import { Button, Field, Icon, IconButton, Input, ScrollArea } from '@bitfun/ui';
+import { Alert, Button, Field, Icon, IconButton, Input, ScrollArea } from '@bitfun/ui';
 import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react';
 import { useI18n } from '@/infrastructure/i18n';
 import { useCurrentWorkspace } from '@/infrastructure/contexts/WorkspaceContext';
-import { Alert } from '@/component-library';
 import {
   confirmDanger,
   confirmWarning,
diff --git a/src/web-ui/src/app/components/RemoteConnectDialog/RemoteConnectDialog.tsx b/src/web-ui/src/app/components/RemoteConnectDialog/RemoteConnectDialog.tsx
index d1dc68fdd0..281382cfbf 100644
--- a/src/web-ui/src/app/components/RemoteConnectDialog/RemoteConnectDialog.tsx
+++ b/src/web-ui/src/app/components/RemoteConnectDialog/RemoteConnectDialog.tsx
@@ -20,6 +20,7 @@ import {
   Modal,
   PageHeader,
   ScrollArea,
+  Select,
   StatusPill,
   Switch,
   TabGroup,
@@ -30,7 +31,6 @@ import { QRCodeSVG } from 'qrcode.react';
 import { Monitor, MonitorSmartphone, Radar, Smartphone } from 'lucide-react';
 import { useI18n } from '@/infrastructure/i18n';
 import { getLocaleFallbackChain, type LocaleId } from '@/infrastructure/i18n/presets';
-import { Select } from '@/component-library';
 import { confirmWarning } from '@/infrastructure/confirm-dialog';
 import { systemAPI } from '@/infrastructure/api/service-api/SystemAPI';
 import { api } from '@/infrastructure/api/service-api/ApiClient';
@@ -1114,13 +1114,12 @@ export const RemoteConnectDialog: React.FC<RemoteConnectDialogProps> = ({
                     </span>
                     <Select
                       className="bitfun-remote-connect__lan-ip-dropdown"
-                      size="small"
+                      size="sm"
                       value={selectedLanIp}
-                      onChange={(v) => setSelectedLanIp(String(v))}
+                      onValueChange={(v) => setSelectedLanIp(String(v))}
                       options={lanNetworkInfo.availableIps.map(e => ({
-                        label: e.ip,
+                        label: `${e.ip} — ${e.interface_name}`,
                         value: e.ip,
-                        description: e.interface_name,
                       }))}
                     />
                   </div>
diff --git a/src/web-ui/src/app/components/panels/BranchSelectModal.tsx b/src/web-ui/src/app/components/panels/BranchSelectModal.tsx
index d1daad11ba..ae370ed72d 100644
--- a/src/web-ui/src/app/components/panels/BranchSelectModal.tsx
+++ b/src/web-ui/src/app/components/panels/BranchSelectModal.tsx
@@ -3,14 +3,14 @@
  * Supports selecting existing branches or creating new branches
  */
 
-import { Button, Icon, IconButton, Input, ScrollArea, Tooltip } from '@bitfun/ui';
+import { Button, Checkbox, Icon, IconButton, Input, ScrollArea, Tooltip } from '@bitfun/ui';
 import React, { useState, useEffect, useMemo, useCallback, useRef } from 'react';
 import { createPortal } from 'react-dom';
 import { getAppearanceOverlayHost } from '@/infrastructure/appearance/runtime/AppearanceOverlayHost';
 ;
 import { createLogger } from '@/shared/utils/logger';
 import { isImeOwnedKeyboardEvent } from '@/shared/utils/ime';
-import { Checkbox, PresenceBoundary, PRESENCE_BOUNDARY_MIN_EXIT_MS } from '@/component-library';
+import { PresenceBoundary, PRESENCE_BOUNDARY_MIN_EXIT_MS } from '@/component-library';
 import { useI18n } from '@/infrastructure/i18n';
 import { gitAPI, type GitBranch as GitBranchType } from '../../../infrastructure/api/service-api/GitAPI';
 import './BranchSelectModal.scss';
diff --git a/src/web-ui/src/app/components/scheduled-jobs/ScheduledJobsView.scss b/src/web-ui/src/app/components/scheduled-jobs/ScheduledJobsView.scss
index fb1d3bbd89..8d050b6a0e 100644
--- a/src/web-ui/src/app/components/scheduled-jobs/ScheduledJobsView.scss
+++ b/src/web-ui/src/app/components/scheduled-jobs/ScheduledJobsView.scss
@@ -404,14 +404,14 @@
     position: relative;
     gap: 0;
 
-    .bitfun-textarea__field {
+    > [data-bf-part='input'] {
       min-height: 92px;
       padding: 10px 12px 24px;
       border-radius: $size-radius-base;
       background: color-mix(in srgb, var(--bf-appearance-token-element-bg-base) 82%, transparent);
     }
 
-    .bitfun-textarea__footer {
+    > [data-bf-part='support'] {
       position: absolute;
       right: 10px;
       bottom: 6px;
@@ -420,11 +420,11 @@
       pointer-events: none;
     }
 
-    .bitfun-textarea__hint-wrapper {
+    [data-bf-part='message'] {
       display: none;
     }
 
-    .bitfun-textarea__count {
+    [data-bf-part='count'] {
       padding: 1px 5px;
       border-radius: $size-radius-sm;
       background: color-mix(in srgb, var(--bf-appearance-token-element-bg-base) 88%, transparent);
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 1c1839a040..e7b116bc74 100644
--- a/src/web-ui/src/app/components/scheduled-jobs/ScheduledJobsView.tsx
+++ b/src/web-ui/src/app/components/scheduled-jobs/ScheduledJobsView.tsx
@@ -5,10 +5,10 @@
  * job list at top, inline editor expands below the selected job.
  */
 
-import { Button, Switch, IconButton, Input, Select, Tooltip } from '@bitfun/ui';
+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, Textarea } from '@/component-library';
+import { Select as LegacySelect } from '@/component-library';
 import { confirmDanger } from '@/infrastructure/confirm-dialog';
 import {
   cronAPI,
diff --git a/src/web-ui/src/app/global-search/GlobalSearchRoot.scss b/src/web-ui/src/app/global-search/GlobalSearchRoot.scss
index 1a684e6615..4bc4b80486 100644
--- a/src/web-ui/src/app/global-search/GlobalSearchRoot.scss
+++ b/src/web-ui/src/app/global-search/GlobalSearchRoot.scss
@@ -89,38 +89,6 @@
     }
   }
 
-  &__query-icon {
-    box-sizing: content-box;
-    flex: 0 0 auto;
-    padding-right: 8px;
-    border-right: 1px solid var(--bf-appearance-token-border-subtle);
-    color: var(--bf-appearance-token-color-text-secondary);
-  }
-
-  &__clear {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 28px;
-    height: 28px;
-    padding: 0;
-    border: 0;
-    border-radius: 7px;
-    background: transparent;
-    color: var(--bf-appearance-token-color-text-muted);
-    cursor: pointer;
-
-    &:hover {
-      background: var(--bf-appearance-token-element-bg-soft);
-      color: var(--bf-appearance-token-color-text-primary);
-    }
-
-    &:focus-visible {
-      outline: 2px solid var(--bf-appearance-token-color-accent-500);
-      outline-offset: 1px;
-    }
-  }
-
   &__scope-bar {
     display: flex;
     align-items: center;
diff --git a/src/web-ui/src/app/global-search/GlobalSearchRoot.tsx b/src/web-ui/src/app/global-search/GlobalSearchRoot.tsx
index 9bbbe99fa6..376a043049 100644
--- a/src/web-ui/src/app/global-search/GlobalSearchRoot.tsx
+++ b/src/web-ui/src/app/global-search/GlobalSearchRoot.tsx
@@ -411,48 +411,38 @@ export const GlobalSearchContent: React.FC<GlobalSearchContentProps> = ({
               />
             </div>
           ) : (
-            <div className="global-search__query" data-bf-component="global-search" data-bf-part="query">
-              <Icon name="search" size="lg" aria-hidden="true" className="global-search__query-icon" />
-              <input
-                ref={inputRef}
-                type="text"
-                value={query}
-                onChange={(event) => {
-                  setQuery(event.target.value);
-                  setDrilldownGroup(null);
-                }}
-                onKeyDown={handleInputKeyDown}
-                onCompositionStart={() => {
-                  inputCompositionActiveRef.current = true;
-                }}
-                onCompositionEnd={() => {
-                  inputCompositionActiveRef.current = false;
-                }}
-                placeholder={tCommon('nav.search.inputPlaceholder')}
-                aria-label={tCommon('nav.search.inputLabel')}
-                role="combobox"
-                aria-autocomplete="list"
-                aria-expanded="true"
-                aria-controls={resultsId}
-                aria-activedescendant={activeId ? `${instanceId}-option-${activeId}` : undefined}
-                maxLength={SEARCH_QUERY_MAX_LENGTH}
-                autoFocus={autoFocus}
-              />
-              {query ? (
-                <button
-                  type="button"
-                  className="global-search__clear"
-                  onClick={() => {
-                    setQuery('');
-                    setDrilldownGroup(null);
-                    inputRef.current?.focus();
-                  }}
-                  aria-label={tCommon('nav.search.clear')}
-                >
-                  <Icon name="xmark" size="sm" aria-hidden="true" />
-                </button>
-              ) : null}
-            </div>
+            <SearchField
+              ref={inputRef}
+              className="global-search__query"
+              value={query}
+              onValueChange={(nextQuery) => {
+                setQuery(nextQuery);
+                setDrilldownGroup(null);
+              }}
+              onKeyDown={handleInputKeyDown}
+              onCompositionStart={() => {
+                inputCompositionActiveRef.current = true;
+              }}
+              onCompositionEnd={() => {
+                inputCompositionActiveRef.current = false;
+              }}
+              onClear={query ? () => {
+                setQuery('');
+                setDrilldownGroup(null);
+                inputRef.current?.focus();
+              } : undefined}
+              clearLabel={query ? tCommon('nav.search.clear') : undefined}
+              leadingIcon={<Icon name="search" size="lg" />}
+              placeholder={tCommon('nav.search.inputPlaceholder')}
+              aria-label={tCommon('nav.search.inputLabel')}
+              role="combobox"
+              aria-autocomplete="list"
+              aria-expanded="true"
+              aria-controls={resultsId}
+              aria-activedescendant={activeId ? `${instanceId}-option-${activeId}` : undefined}
+              maxLength={SEARCH_QUERY_MAX_LENGTH}
+              autoFocus={autoFocus}
+            />
           )}
 
           <div className="global-search__scope-bar" data-bf-component="global-search" data-bf-part="scopeBar">
diff --git a/src/web-ui/src/app/scenes/agents/components/CreateAgentPage.scss b/src/web-ui/src/app/scenes/agents/components/CreateAgentPage.scss
index c07e9416c1..4ab2b1bc53 100644
--- a/src/web-ui/src/app/scenes/agents/components/CreateAgentPage.scss
+++ b/src/web-ui/src/app/scenes/agents/components/CreateAgentPage.scss
@@ -311,13 +311,7 @@
   min-height: 0;
   flex: 1;
 
-  .bitfun-textarea__wrapper {
-    display: flex;
-    min-height: 0;
-    flex: 1;
-  }
-
-  .bitfun-textarea__field {
+  > [data-bf-part='input'] {
     min-height: clamp(320px, 47vh, 560px);
     flex: 1;
     padding: $size-gap-4;
@@ -487,7 +481,7 @@
     background: var(--bf-appearance-token-color-bg-scene);
   }
 
-  .th-create-panel__prompt-textarea .bitfun-textarea__field:hover:not(:disabled) {
+  .th-create-panel__prompt-textarea > [data-bf-part='input']:hover:not(:disabled) {
     background: var(--bf-appearance-token-color-bg-scene);
     border-color: transparent;
   }
@@ -514,7 +508,7 @@
     grid-template-columns: minmax(0, 1fr);
   }
 
-  .th-create-panel__prompt-textarea .bitfun-textarea__field {
+  .th-create-panel__prompt-textarea > [data-bf-part='input'] {
     min-height: 340px;
   }
 }
diff --git a/src/web-ui/src/app/scenes/agents/components/CreateAgentPage.tsx b/src/web-ui/src/app/scenes/agents/components/CreateAgentPage.tsx
index 63a26b0ec0..5064d6d8c9 100644
--- a/src/web-ui/src/app/scenes/agents/components/CreateAgentPage.tsx
+++ b/src/web-ui/src/app/scenes/agents/components/CreateAgentPage.tsx
@@ -1,4 +1,4 @@
-import { Button, Icon, Input, ScrollArea, Switch, Tooltip, type IconName, type IconSize } from '@bitfun/ui';
+import { Button, Icon, Input, ScrollArea, Switch, Textarea, Tooltip, type IconName, type IconSize } from '@bitfun/ui';
 import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import {
   FileText,
@@ -7,7 +7,6 @@ import {
   type LucideIcon,
 } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
-import { Textarea } from '@/component-library';
 import {
   CustomAgentAPI,
   type CustomAgentKind,
diff --git a/src/web-ui/src/app/scenes/browser/BrowserPanel.scss b/src/web-ui/src/app/scenes/browser/BrowserPanel.scss
index 759d06adc0..d1a32f21f5 100644
--- a/src/web-ui/src/app/scenes/browser/BrowserPanel.scss
+++ b/src/web-ui/src/app/scenes/browser/BrowserPanel.scss
@@ -59,6 +59,12 @@
     }
   }
 
+  &__address-field {
+    flex: 1;
+    width: 0;
+    min-width: 0;
+  }
+
   &__error {
     display: flex;
     align-items: center;
diff --git a/src/web-ui/src/app/scenes/browser/BrowserPanel.tsx b/src/web-ui/src/app/scenes/browser/BrowserPanel.tsx
index 0947b53972..9e84e9666c 100644
--- a/src/web-ui/src/app/scenes/browser/BrowserPanel.tsx
+++ b/src/web-ui/src/app/scenes/browser/BrowserPanel.tsx
@@ -7,7 +7,7 @@
  */
 
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { Icon, IconButton } from '@bitfun/ui';
+import { Icon, IconButton, Input } from '@bitfun/ui';
 import { AlertTriangle, ChevronLeft, RefreshCw, MousePointer2 } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { createLogger } from '@/shared/utils/logger';
@@ -194,11 +194,12 @@ const BrowserPanel: React.FC<BrowserPanelProps> = ({ isActive, initialUrl, openR
           data-testid="browser-refresh-button"
         />
         <div data-bf-component="browser-panel" data-bf-part="address" className="browser-panel__address">
-          <Icon name="browser" size="md" />
-          <input
+          <Input
+            className="browser-panel__address-field"
             type="text"
             value={inputValue}
-            onChange={(e) => setInputValue(e.target.value)}
+            onValueChange={setInputValue}
+            leading={<Icon name="browser" size="md" />}
             placeholder={t('browserView.addressPlaceholder', { exampleUrl: 'https://example.com' })}
             spellCheck={false}
             data-testid="browser-url-input"
diff --git a/src/web-ui/src/app/scenes/browser/BrowserScene.scss b/src/web-ui/src/app/scenes/browser/BrowserScene.scss
index 5f84d28b81..ebd1d97e9c 100644
--- a/src/web-ui/src/app/scenes/browser/BrowserScene.scss
+++ b/src/web-ui/src/app/scenes/browser/BrowserScene.scss
@@ -59,6 +59,12 @@
     }
   }
 
+  &__address-field {
+    flex: 1;
+    width: 0;
+    min-width: 0;
+  }
+
   &__error {
     display: flex;
     align-items: center;
diff --git a/src/web-ui/src/app/scenes/browser/BrowserScene.tsx b/src/web-ui/src/app/scenes/browser/BrowserScene.tsx
index 167360c5a7..28f6d0bc06 100644
--- a/src/web-ui/src/app/scenes/browser/BrowserScene.tsx
+++ b/src/web-ui/src/app/scenes/browser/BrowserScene.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback } from 'react';
-import { Icon, IconButton } from '@bitfun/ui';
+import { Icon, IconButton, Input } from '@bitfun/ui';
 import { AlertTriangle, ChevronLeft, RefreshCw } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { createLogger } from '@/shared/utils/logger';
@@ -72,11 +72,12 @@ const BrowserScene: React.FC = () => {
           data-testid="browser-refresh-button"
         />
         <div className="browser-scene__address">
-          <Icon name="browser" size="md" />
-          <input
+          <Input
+            className="browser-scene__address-field"
             type="text"
             value={browser.inputValue}
-            onChange={(event) => browser.setInputValue(event.target.value)}
+            onValueChange={browser.setInputValue}
+            leading={<Icon name="browser" size="md" />}
             placeholder={t('browserView.addressPlaceholder', { exampleUrl: 'https://example.com' })}
             spellCheck={false}
             data-testid="browser-url-input"
diff --git a/src/web-ui/src/app/scenes/ecosystem-compatibility/EcosystemCompatibilityScene.tsx b/src/web-ui/src/app/scenes/ecosystem-compatibility/EcosystemCompatibilityScene.tsx
index d0df4353c4..97d266f43e 100644
--- a/src/web-ui/src/app/scenes/ecosystem-compatibility/EcosystemCompatibilityScene.tsx
+++ b/src/web-ui/src/app/scenes/ecosystem-compatibility/EcosystemCompatibilityScene.tsx
@@ -1,4 +1,4 @@
-import { Button, Icon, ScrollArea, SearchField, Switch, type IconName, type IconSize } from '@bitfun/ui';
+import { Button, Icon, ScrollArea, SearchField, Switch, Textarea, type IconName, type IconSize } from '@bitfun/ui';
 import React, { Suspense, lazy, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import type { LucideIcon } from 'lucide-react';
 import {
@@ -14,7 +14,6 @@ import {
   Webhook,
   Wrench,
 } from 'lucide-react';
-import { Textarea } from '@/component-library';
 import { useI18n } from '@/infrastructure/i18n';
 import { useCurrentWorkspace } from '@/infrastructure/contexts/WorkspaceContext';
 import {
diff --git a/src/web-ui/src/app/scenes/git/views/WorkingCopyView.tsx b/src/web-ui/src/app/scenes/git/views/WorkingCopyView.tsx
index 125116c036..61ff340c44 100644
--- a/src/web-ui/src/app/scenes/git/views/WorkingCopyView.tsx
+++ b/src/web-ui/src/app/scenes/git/views/WorkingCopyView.tsx
@@ -2,7 +2,7 @@
  * WorkingCopyView — Git working copy: commit bar + file list + diff area (ContentCanvas mode=git).
  */
 
-import { Button, Icon, IconButton, SearchField, Tooltip } from '@bitfun/ui';
+import { Button, Icon, IconButton, SearchField, Textarea, Tooltip } from '@bitfun/ui';
 import React, { useCallback, useState, useMemo, useEffect, useRef } from 'react';
 import { useShortcut } from '@/infrastructure/hooks/useShortcut';
 import { useTranslation } from 'react-i18next';
@@ -13,7 +13,6 @@ import {
   Square,
   FileCode2,
 } from 'lucide-react';
-import { Textarea } from '@/component-library';
 import { useI18n } from '@/infrastructure/i18n/hooks/useI18n';
 import { ContentCanvas } from '@/app/components/panels/content-canvas';
 import { CanvasStoreModeContext } from '@/app/components/panels/content-canvas/stores';
diff --git a/src/web-ui/src/app/scenes/miniapps/customization/MiniAppCustomizePanel.tsx b/src/web-ui/src/app/scenes/miniapps/customization/MiniAppCustomizePanel.tsx
index 6293769d9c..11b7cdfadd 100644
--- a/src/web-ui/src/app/scenes/miniapps/customization/MiniAppCustomizePanel.tsx
+++ b/src/web-ui/src/app/scenes/miniapps/customization/MiniAppCustomizePanel.tsx
@@ -1,4 +1,4 @@
-import { Button, Icon, IconButton, Tooltip } from '@bitfun/ui';
+import { Button, Icon, IconButton, Textarea, Tooltip } from '@bitfun/ui';
 import React, { useCallback, useEffect, useMemo, useState, useSyncExternalStore } from 'react';
 import { AlertTriangle, EyeOff, Loader2, RefreshCw, Send, Trash2 } from 'lucide-react';
 
@@ -455,9 +455,9 @@ export const MiniAppCustomizePanel: React.FC<MiniAppCustomizePanelProps> = ({
 
       <label className="miniapp-customize-panel__request" data-bf-component="miniapp-customize-panel" data-bf-part="request">
         <span>{t('customize.requestLabel')}</span>
-        <textarea
+        <Textarea
           value={userRequest}
-          onChange={(event) => setUserRequest(event.target.value)}
+          onValueChange={setUserRequest}
           onKeyDown={(event) => {
             if (!shouldSubmitMiniAppCustomizationRequest(event)) {
               return;
diff --git a/src/web-ui/src/app/scenes/miniapps/views/MiniAppSubmissionsView.tsx b/src/web-ui/src/app/scenes/miniapps/views/MiniAppSubmissionsView.tsx
index d57c34e9e8..4171dd99fc 100644
--- a/src/web-ui/src/app/scenes/miniapps/views/MiniAppSubmissionsView.tsx
+++ b/src/web-ui/src/app/scenes/miniapps/views/MiniAppSubmissionsView.tsx
@@ -1,4 +1,4 @@
-import { Button, Field, Icon, Input, Select, StatusPill } from '@bitfun/ui';
+import { Button, Field, Icon, Input, Select, StatusPill, Textarea } from '@bitfun/ui';
 import React, { useEffect, useMemo, useState } from 'react';
 import { open } from '@tauri-apps/plugin-dialog';
 import {
@@ -327,12 +327,12 @@ const MiniAppSubmissionsView: React.FC = () => {
 
           <label className="miniapp-submissions__field">
             <span>{t('market.submissions.description')}</span>
-            <textarea
+            <Textarea
               value={draft.description}
               maxLength={500}
               required
               disabled={busy}
-              onChange={(event) => setDraft({ ...draft, description: event.target.value })}
+              onValueChange={(description) => setDraft({ ...draft, description })}
             />
           </label>
 
@@ -477,12 +477,12 @@ const MiniAppSubmissionsView: React.FC = () => {
 
               <label className="miniapp-submissions__field">
                 <span>{t('market.submissions.changelog')}</span>
-                <textarea
+                <Textarea
                   value={draft.changelog}
                   maxLength={4000}
                   placeholder={t('market.submissions.changelogPlaceholder')}
                   disabled={busy}
-                  onChange={(event) => setDraft({ ...draft, changelog: event.target.value })}
+                  onValueChange={(changelog) => setDraft({ ...draft, changelog })}
                 />
               </label>
 
diff --git a/src/web-ui/src/app/scenes/profile/views/AssistantConfigPage.tsx b/src/web-ui/src/app/scenes/profile/views/AssistantConfigPage.tsx
index f9fe219968..381f20effd 100644
--- a/src/web-ui/src/app/scenes/profile/views/AssistantConfigPage.tsx
+++ b/src/web-ui/src/app/scenes/profile/views/AssistantConfigPage.tsx
@@ -1,5 +1,5 @@
 import React, {
-  useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState,
+  useCallback, useEffect, useMemo, useRef, useState,
   lazy,
   Suspense,
 } from 'react';
@@ -27,7 +27,7 @@ import AssistantAvatarPicker from './AssistantAvatarPicker';
 import AssistantQuickInput from './AssistantQuickInput';
 import { useNurseryStore } from '../nurseryStore';
 import './NurseryView.scss';
-import { Icon, IconButton, Input, Tooltip, ScrollArea } from '@bitfun/ui';
+import { Icon, IconButton, Input, ScrollArea, Textarea, Tooltip } from '@bitfun/ui';
 
 const log = createLogger('AssistantConfigPage');
 
@@ -69,21 +69,13 @@ const AutoResizeTextarea: React.FC<AutoResizeTextareaProps> = ({
   onChange,
   className = '',
 }) => {
-  const textareaRef = useRef<HTMLTextAreaElement>(null);
-
-  useLayoutEffect(() => {
-    const textarea = textareaRef.current;
-    if (!textarea) return;
-    textarea.style.height = 'auto';
-    textarea.style.height = `${textarea.scrollHeight}px`;
-  }, [value]);
-
   return (
-    <textarea
-      ref={textareaRef}
-      className={`m-editor-textarea ${className}`.trim()}
+    <Textarea
+      autoResize
+      className="acp-persona-editor__frontmatter-control"
+      textareaClassName={`m-editor-textarea ${className}`.trim()}
       value={value}
-      onChange={(event) => onChange(event.target.value)}
+      onValueChange={onChange}
       spellCheck={false}
       rows={1}
     />
diff --git a/src/web-ui/src/app/scenes/profile/views/AssistantDefaultsPage.scss b/src/web-ui/src/app/scenes/profile/views/AssistantDefaultsPage.scss
index 6c9c27476a..981b0b3ceb 100644
--- a/src/web-ui/src/app/scenes/profile/views/AssistantDefaultsPage.scss
+++ b/src/web-ui/src/app/scenes/profile/views/AssistantDefaultsPage.scss
@@ -255,68 +255,8 @@ $assistant-defaults-row-columns:
 }
 
 .assistant-defaults-search {
-  display: flex;
   width: min(280px, 34%);
   min-width: 210px;
-  min-height: 34px;
-  align-items: center;
-  gap: $size-gap-2;
-  padding: 0 $size-gap-2;
-  border: 1px solid var(--bf-appearance-token-border-subtle);
-  border-radius: $size-radius-base;
-  background: var(--bf-appearance-token-color-bg-scene);
-  color: var(--bf-appearance-token-color-text-muted);
-  transition:
-    border-color $motion-fast $easing-standard,
-    box-shadow $motion-fast $easing-standard;
-
-  &:focus-within {
-    border-color: color-mix(in srgb, var(--bf-appearance-token-color-accent-500) 55%, var(--bf-appearance-token-border-subtle));
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--bf-appearance-token-color-accent-500) 12%, transparent);
-  }
-
-  > svg {
-    flex: 0 0 auto;
-  }
-
-  input {
-    min-width: 0;
-    flex: 1;
-    padding: 0;
-    border: 0;
-    outline: 0;
-    background: transparent;
-    color: var(--bf-appearance-token-color-text-primary);
-    font: inherit;
-    font-size: var(--bf-appearance-token-font-size-xs);
-
-    &::placeholder {
-      color: var(--bf-appearance-token-color-text-muted);
-    }
-
-    &::-webkit-search-cancel-button {
-      display: none;
-    }
-  }
-
-  button {
-    display: inline-flex;
-    width: 24px;
-    height: 24px;
-    align-items: center;
-    justify-content: center;
-    padding: 0;
-    border: 0;
-    border-radius: $size-radius-sm;
-    background: transparent;
-    color: var(--bf-appearance-token-color-text-muted);
-    cursor: pointer;
-
-    &:hover {
-      background: var(--bf-appearance-token-element-bg-soft);
-      color: var(--bf-appearance-token-color-text-primary);
-    }
-  }
 }
 
 .assistant-defaults-filters {
diff --git a/src/web-ui/src/app/scenes/profile/views/AssistantDefaultsPage.tsx b/src/web-ui/src/app/scenes/profile/views/AssistantDefaultsPage.tsx
index 7928609eb6..a4ad09bede 100644
--- a/src/web-ui/src/app/scenes/profile/views/AssistantDefaultsPage.tsx
+++ b/src/web-ui/src/app/scenes/profile/views/AssistantDefaultsPage.tsx
@@ -1,4 +1,4 @@
-import { Button, Icon, IconButton, Switch, Tooltip, ScrollArea } from '@bitfun/ui';
+import { Button, Icon, IconButton, SearchField, Switch, Tooltip, ScrollArea } from '@bitfun/ui';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import {
   CircleAlert,
@@ -1074,18 +1074,16 @@ const AssistantDefaultsPage: React.FC = () => {
               </div>
 
               <section className="assistant-defaults-controls" aria-label={t('nursery.template.filterLabel')} data-bf-component="assistant-defaults-page" data-bf-part="filters">
-                <label className="assistant-defaults-search">
-                  <Icon name="search" size="md" />
-                  <input
-                    type="search"
-                    value={searchQuery}
-                    onChange={(event) => setSearchQuery(event.target.value)}
-                    placeholder={t('nursery.template.searchPlaceholder')}
-                  />
-                  {searchQuery ? (
-                    <button type="button" onClick={() => setSearchQuery('')} aria-label={t('nursery.template.clearSearch')}><Icon name="xmark" size="sm" /></button>
-                  ) : null}
-                </label>
+                <SearchField
+                  className="assistant-defaults-search"
+                  value={searchQuery}
+                  onValueChange={setSearchQuery}
+                  onClear={searchQuery ? () => setSearchQuery('') : undefined}
+                  clearLabel={searchQuery ? t('nursery.template.clearSearch') : undefined}
+                  leadingIcon={<Icon name="search" size="md" />}
+                  placeholder={t('nursery.template.searchPlaceholder')}
+                  aria-label={t('nursery.template.filterLabel')}
+                />
                 <div className="assistant-defaults-filters" role="group" aria-label={t('nursery.template.filterLabel')}>
                   {statusFilters.map((filter) => (
                     <button
diff --git a/src/web-ui/src/app/scenes/profile/views/AssistantQuickInput.scss b/src/web-ui/src/app/scenes/profile/views/AssistantQuickInput.scss
index a28960b75a..92a77a7446 100644
--- a/src/web-ui/src/app/scenes/profile/views/AssistantQuickInput.scss
+++ b/src/web-ui/src/app/scenes/profile/views/AssistantQuickInput.scss
@@ -17,7 +17,7 @@
       box-shadow $motion-fast $easing-standard,
       transform $motion-fast $easing-standard;
 
-    &:hover:not(:has(.bitfun-textarea__field:disabled)) {
+    &:hover:not(:has([data-bf-component='textarea'] > [data-bf-part='input']:disabled)) {
       transform: translateY(-2px);
       border-color: var(--bf-appearance-token-border-strong);
       background: color-mix(in srgb, var(--bf-appearance-token-element-bg-base) 90%, transparent);
@@ -36,16 +36,12 @@
     }
   }
 
-  // Textarea from component library — borderless inside composite box
-  &__embed.bitfun-textarea {
+  // Design-system Textarea — borderless inside composite box
+  &__embed[data-bf-component='textarea'] {
     gap: 0;
     width: 100%;
 
-    .bitfun-textarea__wrapper {
-      width: 100%;
-    }
-
-    .bitfun-textarea__field {
+    > [data-bf-part='input'] {
       width: 100%;
       min-height: 72px;
       max-height: 220px;
diff --git a/src/web-ui/src/app/scenes/profile/views/AssistantQuickInput.tsx b/src/web-ui/src/app/scenes/profile/views/AssistantQuickInput.tsx
index b9d26bed2f..2e57d6e91e 100644
--- a/src/web-ui/src/app/scenes/profile/views/AssistantQuickInput.tsx
+++ b/src/web-ui/src/app/scenes/profile/views/AssistantQuickInput.tsx
@@ -10,10 +10,9 @@
  */
 
 import React, { useCallback, useState } from 'react';
-import { Icon, IconButton } from '@bitfun/ui';
+import { Icon, IconButton, Textarea } from '@bitfun/ui';
 ;
 import { useTranslation } from 'react-i18next';
-import { Textarea } from '@/component-library';
 import { ModelSelector } from '@/flow_chat/components/ModelSelector';
 import { flowChatManager } from '@/flow_chat/services/FlowChatManager';
 import { openMainSession } from '@/flow_chat/services/sessionActivation';
diff --git a/src/web-ui/src/app/scenes/profile/views/NurseryView.scss b/src/web-ui/src/app/scenes/profile/views/NurseryView.scss
index d88dd5b5ed..bd68c13e58 100644
--- a/src/web-ui/src/app/scenes/profile/views/NurseryView.scss
+++ b/src/web-ui/src/app/scenes/profile/views/NurseryView.scss
@@ -3650,6 +3650,11 @@ $acp-content-top: clamp(40px, 4.5vh, 52px);
     min-height: 0;
   }
 
+  &__frontmatter-control {
+    display: flex;
+    width: 100%;
+  }
+
   &__frontmatter-textarea {
     width: 100%;
     min-height: 0;
diff --git a/src/web-ui/src/app/scenes/todos/TodosScene.scss b/src/web-ui/src/app/scenes/todos/TodosScene.scss
index 0697d2d759..4efcb93381 100644
--- a/src/web-ui/src/app/scenes/todos/TodosScene.scss
+++ b/src/web-ui/src/app/scenes/todos/TodosScene.scss
@@ -886,7 +886,7 @@ $todos-compact-breakpoint: 720px;
   }
 
   &__editor-prompt {
-    .bitfun-textarea__field {
+    [data-bf-component='textarea'] > [data-bf-part='input'] {
       min-height: 112px;
       resize: vertical;
     }
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 a54f3b72f6..f022722082 100644
--- a/src/web-ui/src/app/scenes/todos/components/TodoEditor.tsx
+++ b/src/web-ui/src/app/scenes/todos/components/TodoEditor.tsx
@@ -6,10 +6,10 @@
  * scheduled without knowing which workspace it runs in.
  */
 
-import { Button, Icon, Input, Select, Switch, ScrollArea } from '@bitfun/ui';
+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, Textarea } from '@/component-library';
+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';
diff --git a/src/web-ui/src/component-library/compatibility/IconButton.tsx b/src/web-ui/src/component-library/compatibility/IconButton.tsx
new file mode 100644
index 0000000000..7ae1dd648f
--- /dev/null
+++ b/src/web-ui/src/component-library/compatibility/IconButton.tsx
@@ -0,0 +1,78 @@
+import React from 'react';
+import { IconButton as DesignSystemIconButton } from '@bitfun/ui';
+import { Tooltip } from '../components/Tooltip/Tooltip';
+
+export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: 'default' | 'primary' | 'ghost' | 'danger' | 'success' | 'warning' | 'ai';
+  size?: 'xs' | 'small' | 'medium' | 'large';
+  shape?: 'square' | 'circle';
+  isLoading?: boolean;
+  tooltip?: React.ReactNode;
+  tooltipPlacement?: 'top' | 'bottom' | 'left' | 'right';
+  tooltipFollowCursor?: boolean;
+}
+
+const sizeMap = {
+  xs: 'xs',
+  small: 'sm',
+  medium: 'md',
+  large: 'lg',
+} as const;
+
+/**
+ * Compatibility adapter for the two remaining FlowChat call sites.
+ * New product code must import IconButton directly from `@bitfun/ui`.
+ */
+export const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(({
+  children,
+  variant = 'default',
+  size = 'medium',
+  shape = 'square',
+  isLoading = false,
+  tooltip,
+  tooltipPlacement = 'top',
+  tooltipFollowCursor = true,
+  className = '',
+  disabled,
+  ...props
+}, ref) => {
+  const tone = variant === 'danger' ? 'danger' : 'neutral';
+  const designSystemVariant = variant === 'primary' || variant === 'success'
+    ? 'primary'
+    : variant === 'warning' || variant === 'ai'
+      ? 'fill'
+      : 'quiet';
+  const button = (
+    <DesignSystemIconButton
+      {...props}
+      ref={ref}
+      aria-label={props['aria-label'] ?? ''}
+      className={[
+        'icon-btn',
+        `icon-btn--${size}`,
+        `icon-btn--${variant}`,
+        shape === 'circle' && 'icon-btn--circle',
+        className,
+      ].filter(Boolean).join(' ')}
+      disabled={disabled}
+      icon={children}
+      loading={isLoading}
+      shape={shape}
+      size={sizeMap[size]}
+      tone={tone}
+      variant={designSystemVariant}
+    />
+  );
+
+  if (tooltip && !disabled && !isLoading) {
+    return (
+      <Tooltip content={tooltip} placement={tooltipPlacement} followCursor={tooltipFollowCursor}>
+        {button}
+      </Tooltip>
+    );
+  }
+
+  return button;
+});
+
+IconButton.displayName = 'IconButton';
diff --git a/src/web-ui/src/component-library/components/Alert/Alert.scss b/src/web-ui/src/component-library/components/Alert/Alert.scss
deleted file mode 100644
index a3e8a2df6a..0000000000
--- a/src/web-ui/src/component-library/components/Alert/Alert.scss
+++ /dev/null
@@ -1,149 +0,0 @@
-@use '../../styles/tokens.scss' as tokens;
-
-.alert {
-  display: flex;
-  align-items: flex-start;
-  gap: tokens.$size-gap-3;
-  padding: tokens.$size-gap-3 tokens.$size-gap-4;
-  border-radius: tokens.$size-radius-base;
-  border: 1px solid;
-  background: var(--bf-appearance-token-element-bg-soft);
-  backdrop-filter: tokens.$blur-base;
-  -webkit-backdrop-filter: tokens.$blur-base;
-  position: relative;
-  box-shadow: tokens.$shadow-xs;
-
-  &--success {
-    border-color: var(--bf-appearance-token-color-success-border);
-    background: linear-gradient(135deg,
-      color-mix(in srgb, var(--bf-appearance-token-color-success) 6%, transparent) 0%,
-      color-mix(in srgb, var(--bf-appearance-token-color-success) 4%, transparent) 100%);
-
-    .alert__icon {
-      color: var(--bf-appearance-token-color-success);
-    }
-
-    .alert__title {
-      color: var(--bf-appearance-token-color-text-primary);
-    }
-  }
-
-  &--error {
-    border-color: var(--bf-appearance-token-color-error-border);
-    background: linear-gradient(135deg,
-      color-mix(in srgb, var(--bf-appearance-token-color-error) 6%, transparent) 0%,
-      color-mix(in srgb, var(--bf-appearance-token-color-error) 4%, transparent) 100%);
-
-    .alert__icon {
-      color: var(--bf-appearance-token-color-error);
-    }
-
-    .alert__title {
-      color: var(--bf-appearance-token-color-text-primary);
-    }
-  }
-
-  &--warning {
-    border-color: var(--bf-appearance-token-color-warning-border);
-    background: linear-gradient(135deg,
-      color-mix(in srgb, var(--bf-appearance-token-color-warning) 6%, transparent) 0%,
-      color-mix(in srgb, var(--bf-appearance-token-color-warning) 4%, transparent) 100%);
-
-    .alert__icon {
-      color: var(--bf-appearance-token-color-warning);
-    }
-
-    .alert__title {
-      color: var(--bf-appearance-token-color-text-primary);
-    }
-  }
-
-  &--info {
-    border-color: var(--bf-appearance-token-color-info-border);
-    background: linear-gradient(135deg,
-      color-mix(in srgb, var(--bf-appearance-token-color-accent-500) 6%, transparent) 0%,
-      var(--bf-appearance-token-color-accent-50) 100%);
-
-    .alert__icon {
-      color: var(--bf-appearance-token-color-info);
-    }
-
-    .alert__title {
-      color: var(--bf-appearance-token-color-text-primary);
-    }
-  }
-
-  &__icon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-    margin-top: 1px;
-
-    svg {
-      display: block;
-    }
-  }
-
-  &__content {
-    flex: 1;
-    min-width: 0;
-  }
-
-  &__title {
-    font-size: var(--bf-appearance-token-font-size-sm);
-    font-weight: tokens.$font-weight-medium;
-    line-height: tokens.$line-height-base;
-    margin-bottom: 2px;
-  }
-
-  &__message {
-    font-size: var(--bf-appearance-token-font-size-xs);
-    color: var(--bf-appearance-token-color-text-secondary);
-    line-height: tokens.$line-height-base;
-  }
-
-  &__description {
-    font-size: var(--bf-appearance-token-font-size-xs);
-    color: var(--bf-appearance-token-color-text-muted);
-    line-height: tokens.$line-height-base;
-    margin-top: tokens.$size-gap-1;
-  }
-
-  &__close {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-    width: 20px;
-    height: 20px;
-    border: none;
-    background: transparent;
-    color: var(--bf-appearance-token-color-text-muted);
-    cursor: pointer;
-    border-radius: tokens.$size-radius-sm;
-    transform: scale(1);
-    transition:
-      background-color var(--bf-appearance-token-motion-fast) ease,
-      color var(--bf-appearance-token-motion-fast) ease,
-      transform var(--bf-appearance-token-motion-fast) var(--bf-appearance-token-easing-standard);
-
-    &:hover {
-      background: var(--bf-appearance-token-element-bg-medium);
-      color: var(--bf-appearance-token-color-text-primary);
-    }
-  }
-}
-
-@media (hover: hover) and (pointer: fine) {
-  .alert__close:hover {
-    background: var(--bf-appearance-token-element-bg-medium);
-    color: var(--bf-appearance-token-color-text-primary);
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .alert__close:active {
-    transform: none;
-  }
-}
diff --git a/src/web-ui/src/component-library/components/Alert/Alert.tsx b/src/web-ui/src/component-library/components/Alert/Alert.tsx
deleted file mode 100644
index b70358207a..0000000000
--- a/src/web-ui/src/component-library/components/Alert/Alert.tsx
+++ /dev/null
@@ -1,126 +0,0 @@
-/**
- * Alert component
- */
-
-import React, { useState, forwardRef, ReactNode } from 'react';
-import { useI18n } from '@/infrastructure/i18n';
-import './Alert.scss';
-
-export interface AlertProps {
-  /** Alert type */
-  type?: 'success' | 'error' | 'warning' | 'info';
-  /** Title */
-  title?: ReactNode;
-  /** Message */
-  message: ReactNode;
-  /** Description text */
-  description?: string;
-  /** Closable */
-  closable?: boolean;
-  /** Close callback */
-  onClose?: () => void;
-  /** Show icon */
-  showIcon?: boolean;
-  /** Custom class name */
-  className?: string;
-  /** Custom styles */
-  style?: React.CSSProperties;
-}
-
-export const Alert = forwardRef<HTMLDivElement, AlertProps>(({
-  type = 'info',
-  title,
-  message,
-  description,
-  closable = false,
-  onClose,
-  showIcon = true,
-  className = '',
-  style,
-}, ref) => {
-  const { t } = useI18n('components');
-  const [visible, setVisible] = useState(true);
-
-  const handleClose = () => {
-    setVisible(false);
-    onClose?.();
-  };
-
-  if (!visible) return null;
-
-  // Minimal icons
-  const icons = {
-    success: (
-      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2">
-        <path d="M13.5 4L6 11.5L2.5 8" strokeLinecap="round" strokeLinejoin="round"/>
-      </svg>
-    ),
-    error: (
-      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2">
-        <circle cx="8" cy="8" r="6" />
-        <path d="M8 4.5V8.5M8 11H8.01" strokeLinecap="round"/>
-      </svg>
-    ),
-    warning: (
-      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2">
-        <path d="M8 1.5L14.5 13H1.5L8 1.5Z" strokeLinejoin="round"/>
-        <path d="M8 6V9M8 11H8.01" strokeLinecap="round"/>
-      </svg>
-    ),
-    info: (
-      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2">
-        <circle cx="8" cy="8" r="6" />
-        <path d="M8 11V8M8 5H8.01" strokeLinecap="round"/>
-      </svg>
-    ),
-  };
-
-  const classNames = [
-    'alert',
-    `alert--${type}`,
-    className
-  ]
-    .filter(Boolean)
-    .join(' ');
-
-  return (
-    <div 
-      ref={ref}
-      className={classNames}
-      style={style}
-      role="alert"
-      aria-live={type === 'error' ? 'assertive' : 'polite'}
-      data-bf-component="alert"
-      data-bf-part="root"
-      data-bf-variant={type}
-    >
-      {showIcon && (
-        <div className="alert__icon" data-bf-component="alert" data-bf-part="icon">
-          {icons[type]}
-        </div>
-      )}
-      
-      <div className="alert__content" data-bf-component="alert" data-bf-part="content">
-        {title && <div className="alert__title" data-bf-component="alert" data-bf-part="title">{title}</div>}
-        <div className="alert__message" data-bf-component="alert" data-bf-part="message">{message}</div>
-        {description && <div className="alert__description" data-bf-component="alert" data-bf-part="description">{description}</div>}
-      </div>
-
-      {closable && (
-        <button 
-          className="alert__close"
-          onClick={handleClose}
-          aria-label={t('tooltip.close')}
-          data-bf-component="alert"
-          data-bf-part="close"
-        >
-          <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.5">
-            <path d="M1 1L11 11M11 1L1 11" strokeLinecap="round"/>
-          </svg>
-        </button>
-      )}
-    </div>
-  );
-});
-
-Alert.displayName = 'Alert';
diff --git a/src/web-ui/src/component-library/components/Alert/AlertDemo.tsx b/src/web-ui/src/component-library/components/Alert/AlertDemo.tsx
deleted file mode 100644
index 66b19f5c26..0000000000
--- a/src/web-ui/src/component-library/components/Alert/AlertDemo.tsx
+++ /dev/null
@@ -1,124 +0,0 @@
-/**
- * Alert component demo
- */
-
-import React from 'react';
-import { Alert } from './Alert';
-import { createLogger } from '@/shared/utils/logger';
-import { useI18n } from '@/infrastructure/i18n';
-
-const log = createLogger('AlertDemo');
-
-export const AlertDemo: React.FC = () => {
-  const { t } = useI18n('components');
-
-  return (
-    <div style={{ padding: '32px', maxWidth: '800px', display: 'flex', flexDirection: 'column', gap: '24px' }}>
-      <div>
-        <h2 style={{ color: 'var(--bf-appearance-token-color-text-primary)', fontSize: '16px', fontWeight: '500', marginBottom: '4px' }}>
-          {t('componentLibrary.alertDemo.title')}
-        </h2>
-        <p style={{ color: 'rgba(var(--bf-appearance-token-color-static-white-rgb), 0.5)', fontSize: '13px' }}>
-          {t('componentLibrary.alertDemo.subtitle')}
-        </p>
-      </div>
-
-      <section>
-        <h3 style={{ color: 'var(--bf-appearance-token-color-overlay-white-60)', fontSize: '13px', fontWeight: '500', marginBottom: '12px' }}>
-          {t('componentLibrary.alertDemo.sections.basic')}
-        </h3>
-        <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
-          <Alert
-            type="success"
-            message={t('componentLibrary.alertDemo.messages.operationSuccess')}
-          />
-          <Alert
-            type="error"
-            message={t('componentLibrary.alertDemo.messages.operationFailed')}
-          />
-          <Alert
-            type="warning"
-            message={t('componentLibrary.alertDemo.messages.operationRisk')}
-          />
-          <Alert
-            type="info"
-            message={t('componentLibrary.alertDemo.messages.infoMessage')}
-          />
-        </div>
-      </section>
-
-      <section>
-        <h3 style={{ color: 'var(--bf-appearance-token-color-overlay-white-60)', fontSize: '13px', fontWeight: '500', marginBottom: '12px' }}>
-          {t('componentLibrary.alertDemo.sections.withTitle')}
-        </h3>
-        <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
-          <Alert
-            type="success"
-            title={t('componentLibrary.alertDemo.messages.deploySuccessTitle')}
-            message={t('componentLibrary.alertDemo.messages.deploySuccessMessage')}
-          />
-          <Alert
-            type="error"
-            title={t('componentLibrary.alertDemo.messages.deployFailedTitle')}
-            message={t('componentLibrary.alertDemo.messages.deployFailedMessage')}
-          />
-        </div>
-      </section>
-
-      <section>
-        <h3 style={{ color: 'var(--bf-appearance-token-color-overlay-white-60)', fontSize: '13px', fontWeight: '500', marginBottom: '12px' }}>
-          {t('componentLibrary.alertDemo.sections.withDescription')}
-        </h3>
-        <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
-          <Alert
-            type="warning"
-            title={t('componentLibrary.alertDemo.messages.expiringTitle')}
-            message={t('componentLibrary.alertDemo.messages.expiringMessage')}
-            description={t('componentLibrary.alertDemo.messages.expiringDescription')}
-          />
-          <Alert
-            type="info"
-            title={t('componentLibrary.alertDemo.messages.updateTitle')}
-            message={t('componentLibrary.alertDemo.messages.updateMessage')}
-            description={t('componentLibrary.alertDemo.messages.updateDescription')}
-          />
-        </div>
-      </section>
-
-      <section>
-        <h3 style={{ color: 'var(--bf-appearance-token-color-overlay-white-60)', fontSize: '13px', fontWeight: '500', marginBottom: '12px' }}>
-          {t('componentLibrary.alertDemo.sections.closable')}
-        </h3>
-        <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
-          <Alert
-            type="success"
-            message={t('componentLibrary.alertDemo.messages.closableMessage')}
-            closable
-            onClose={() => log.debug('Alert closed')}
-          />
-          <Alert
-            type="info"
-            title={t('componentLibrary.alertDemo.messages.closableInfoTitle')}
-            message={t('componentLibrary.alertDemo.messages.closableInfoMessage')}
-            closable
-          />
-        </div>
-      </section>
-
-      <section>
-        <h3 style={{ color: 'var(--bf-appearance-token-color-overlay-white-60)', fontSize: '13px', fontWeight: '500', marginBottom: '12px' }}>
-          {t('componentLibrary.alertDemo.sections.noIcon')}
-        </h3>
-        <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
-          <Alert
-            type="info"
-            message={t('componentLibrary.alertDemo.messages.noIconMessage')}
-            showIcon={false}
-          />
-        </div>
-      </section>
-    </div>
-  );
-};
-
-export default AlertDemo;
diff --git a/src/web-ui/src/component-library/components/Alert/appearance.ts b/src/web-ui/src/component-library/components/Alert/appearance.ts
deleted file mode 100644
index 8dd259f7c4..0000000000
--- a/src/web-ui/src/component-library/components/Alert/appearance.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import type { AppearanceSurfaceDescriptor } from '@/infrastructure/appearance/types';
-export const alertAppearanceDescriptor: AppearanceSurfaceDescriptor = {
-  id: 'alert', parts: [{ id: 'root' }, { id: 'icon' }, { id: 'content' }, { id: 'title' }, { id: 'message' }, { id: 'description' }, { id: 'close' }],
-  facets: [{ id: 'variant', attribute: 'data-bf-variant', values: ['success', 'error', 'warning', 'info'] }],
-  states: [{ id: 'hover', selector: { kind: 'self', suffix: ':hover' } }, { id: 'focusVisible', selector: { kind: 'self', suffix: ':focus-visible' } }],
-};
diff --git a/src/web-ui/src/component-library/components/Alert/index.ts b/src/web-ui/src/component-library/components/Alert/index.ts
deleted file mode 100644
index 4524c9f024..0000000000
--- a/src/web-ui/src/component-library/components/Alert/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { Alert } from './Alert';
-export type { AlertProps } from './Alert';
\ No newline at end of file
diff --git a/src/web-ui/src/component-library/components/Avatar/Avatar.scss b/src/web-ui/src/component-library/components/Avatar/Avatar.scss
deleted file mode 100644
index 41f5c4fb85..0000000000
--- a/src/web-ui/src/component-library/components/Avatar/Avatar.scss
+++ /dev/null
@@ -1,107 +0,0 @@
-/**
- * Avatar component styles
- * Based on the BitFun glassmorphism design system
- */
-.bitfun-avatar {
-  --bitfun-avatar-rest-start-rgb: 30, 41, 59;
-  --bitfun-avatar-rest-end-rgb: 51, 65, 85;
-
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-  background: linear-gradient(135deg,
-    color-mix(in srgb, var(--bf-appearance-token-color-accent-500) 20%, transparent) 0%,
-    color-mix(in srgb, var(--bf-appearance-token-color-accent-600) 20%, transparent) 100%);
-  border: 2px solid color-mix(in srgb, var(--bf-appearance-token-color-accent-500) 30%, transparent);
-  color: var(--bf-appearance-token-color-overlay-white-90);
-  font-weight: 500;
-  vertical-align: middle;
-  backdrop-filter: blur(8px);
-  -webkit-backdrop-filter: blur(8px);
-
-  img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-  }
-
-  &__icon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 60%;
-    height: 60%;
-
-    svg {
-      width: 100%;
-      height: 100%;
-    }
-  }
-
-  &__text {
-    font-size: 14px;
-    line-height: 1;
-    transform: scale(0.8);
-  }
-
-  &--circle {
-    border-radius: 50%;
-  }
-
-  &--square {
-    border-radius: 8px;
-  }
-
-  &--small {
-    font-size: 12px;
-  }
-
-  &--medium {
-    font-size: 14px;
-  }
-
-  &--large {
-    font-size: 16px;
-  }
-}
-
-.bitfun-avatar-group {
-  display: inline-flex;
-  align-items: center;
-
-  .bitfun-avatar {
-    margin-left: -8px;
-    border: 2px solid rgba(var(--bf-appearance-token-color-overlay-slate-rgb), 0.8);
-    transition:
-      transform 160ms cubic-bezier(0.23, 1, 0.32, 1),
-      box-shadow 0.2s ease;
-
-    &:first-child {
-      margin-left: 0;
-    }
-
-    &:hover {
-      transform: translateY(-2px);
-      z-index: 1;
-      box-shadow: 0 4px 12px color-mix(in srgb, var(--bf-appearance-token-color-accent-500) 30%, transparent);
-    }
-  }
-
-  &__rest {
-    background: linear-gradient(135deg,
-      rgba(var(--bitfun-avatar-rest-start-rgb), 0.9) 0%,
-      rgba(var(--bitfun-avatar-rest-end-rgb), 0.9) 100%);
-    font-size: 12px;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .bitfun-avatar-group .bitfun-avatar {
-    transition: none;
-
-    &:hover {
-      transform: none;
-    }
-  }
-}
diff --git a/src/web-ui/src/component-library/components/Avatar/Avatar.tsx b/src/web-ui/src/component-library/components/Avatar/Avatar.tsx
deleted file mode 100644
index 104b921450..0000000000
--- a/src/web-ui/src/component-library/components/Avatar/Avatar.tsx
+++ /dev/null
@@ -1,117 +0,0 @@
-import React, { useState } from 'react';
-import './Avatar.scss';
-
-export interface AvatarProps {
-  /** Avatar size */
-  size?: 'small' | 'medium' | 'large' | number;
-  /** Avatar shape */
-  shape?: 'circle' | 'square';
-  /** Image URL */
-  src?: string;
-  /** Alt text when image fails to load */
-  alt?: string;
-  /** Icon */
-  icon?: React.ReactNode;
-  /** Text content */
-  children?: React.ReactNode;
-  /** Custom class name */
-  className?: string;
-  /** Custom styles */
-  style?: React.CSSProperties;
-  /** Image load error callback */
-  onError?: () => void;
-}
-
-export interface AvatarGroupProps {
-  /** Max display count */
-  maxCount?: number;
-  /** Children */
-  children: React.ReactNode;
-  /** Custom class name */
-  className?: string;
-  /** Custom styles */
-  style?: React.CSSProperties;
-}
-
-export const Avatar: React.FC<AvatarProps> = ({
-  size = 'medium',
-  shape = 'circle',
-  src,
-  alt,
-  icon,
-  children,
-  className = '',
-  style,
-  onError,
-}) => {
-  const [imgError, setImgError] = useState(false);
-
-  const handleImgError = () => {
-    setImgError(true);
-    onError?.();
-  };
-
-  const getSize = () => {
-    if (typeof size === 'number') return `${size}px`;
-    const sizes = { small: '32px', medium: '40px', large: '48px' };
-    return sizes[size];
-  };
-
-  const sizeValue = getSize();
-
-  const avatarClass = [
-    'bitfun-avatar',
-    `bitfun-avatar--${shape}`,
-    typeof size === 'string' && `bitfun-avatar--${size}`,
-    className
-  ].filter(Boolean).join(' ');
-
-  const avatarStyle: React.CSSProperties = {
-    width: sizeValue,
-    height: sizeValue,
-    ...style,
-  };
-
-  const renderContent = () => {
-    if (src && !imgError) {
-      return <img src={src} alt={alt} onError={handleImgError} data-bf-component="avatar" data-bf-part="image" />;
-    }
-    if (icon) {
-      return <span className="bitfun-avatar__icon" data-bf-component="avatar" data-bf-part="icon">{icon}</span>;
-    }
-    if (children) {
-      return <span className="bitfun-avatar__text" data-bf-component="avatar" data-bf-part="text">{children}</span>;
-    }
-    return null;
-  };
-
-  return (
-    <span className={avatarClass} style={avatarStyle} data-bf-component="avatar" data-bf-part="root" data-bf-size={typeof size === 'string' ? size : 'custom'} data-bf-shape={shape}>
-      {renderContent()}
-    </span>
-  );
-};
-
-Avatar.displayName = 'Avatar';
-
-export const AvatarGroup: React.FC<AvatarGroupProps> = ({
-  maxCount = 5,
-  children,
-  className = '',
-  style,
-}) => {
-  const childrenArray = React.Children.toArray(children);
-  const displayChildren = maxCount ? childrenArray.slice(0, maxCount) : childrenArray;
-  const restCount = childrenArray.length - maxCount;
-
-  return (
-    <div className={`bitfun-avatar-group ${className}`} style={style} data-bf-component="avatar" data-bf-part="group">
-      {displayChildren}
-      {restCount > 0 && (
-        <Avatar className="bitfun-avatar-group__rest"><span data-bf-component="avatar" data-bf-part="overflow">+{restCount}</span></Avatar>
-      )}
-    </div>
-  );
-};
-
-AvatarGroup.displayName = 'AvatarGroup';
diff --git a/src/web-ui/src/component-library/components/Avatar/appearance.ts b/src/web-ui/src/component-library/components/Avatar/appearance.ts
deleted file mode 100644
index cbb9c24ca0..0000000000
--- a/src/web-ui/src/component-library/components/Avatar/appearance.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import type { AppearanceSurfaceDescriptor } from '@/infrastructure/appearance/types';
-
-export const avatarAppearanceDescriptor: AppearanceSurfaceDescriptor = {
-  id: 'avatar',
-  parts: [
-    { id: 'root' }, { id: 'image' }, { id: 'icon' }, { id: 'text' },
-    { id: 'group' }, { id: 'overflow' },
-  ],
-  facets: [
-    { id: 'size', attribute: 'data-bf-size', values: ['small', 'medium', 'large', 'custom'] },
-    { id: 'shape', attribute: 'data-bf-shape', values: ['circle', 'square'] },
-  ],
-};
diff --git a/src/web-ui/src/component-library/components/Avatar/index.ts b/src/web-ui/src/component-library/components/Avatar/index.ts
deleted file mode 100644
index ecd5d95780..0000000000
--- a/src/web-ui/src/component-library/components/Avatar/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { Avatar, AvatarGroup } from './Avatar';
-export type { AvatarProps, AvatarGroupProps } from './Avatar';
\ No newline at end of file
diff --git a/src/web-ui/src/component-library/components/Checkbox/Checkbox.scss b/src/web-ui/src/component-library/components/Checkbox/Checkbox.scss
deleted file mode 100644
index 35119b719d..0000000000
--- a/src/web-ui/src/component-library/components/Checkbox/Checkbox.scss
+++ /dev/null
@@ -1,239 +0,0 @@
-/**
- * Checkbox styles - line-based flat design
- * Keep the style consistent with the Switch component
- */
-@use '../../styles/tokens.scss' as tokens;
-
-.bitfun-checkbox {
-  display: inline-flex;
-  align-items: flex-start;
-  gap: tokens.$size-gap-3;
-  cursor: pointer;
-  user-select: none;
-  position: relative;
-
-  &--disabled {
-    opacity: tokens.$opacity-disabled;
-    cursor: default;
-  }
-
-  &__wrapper {
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-    margin-top: 2px;
-  }
-
-  &__input {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    margin: 0;
-    padding: 0;
-    opacity: 0;
-    cursor: pointer;
-    z-index: 1;
-
-    &:disabled {
-      cursor: default;
-    }
-  }
-
-  &__box {
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 18px;
-    height: 18px;
-    background: transparent;
-    border: 1px solid var(--bf-appearance-token-border-subtle);
-    border-radius: tokens.$size-radius-sm;
-    transform: scale(1);
-    transition:
-      background-color var(--bf-appearance-token-motion-fast) ease,
-      border-color var(--bf-appearance-token-motion-fast) ease,
-      transform var(--bf-appearance-token-motion-fast) var(--bf-appearance-token-easing-standard);
-    pointer-events: none;
-  }
-
-  &__icon {
-    width: 11px;
-    height: 11px;
-    color: var(--bf-appearance-token-color-static-white);
-    opacity: 0;
-    transform: scale(0.92);
-    transition:
-      opacity var(--bf-appearance-token-motion-fast) ease,
-      transform var(--bf-appearance-token-motion-fast) var(--bf-appearance-token-easing-standard),
-      color var(--bf-appearance-token-motion-fast) ease;
-  }
-
-  &__content {
-    display: flex;
-    flex-direction: column;
-    gap: 3px;
-    flex: 1;
-  }
-
-  &__label {
-    font-size: var(--bf-appearance-token-font-size-sm);
-    font-weight: tokens.$font-weight-medium;
-    color: var(--bf-appearance-token-color-text-primary);
-    line-height: tokens.$line-height-base;
-  }
-
-  &__description {
-    font-size: var(--bf-appearance-token-font-size-xs);
-    color: var(--bf-appearance-token-color-text-muted);
-    line-height: tokens.$line-height-base;
-  }
-
-  &__input:checked + &__box {
-    background: color-mix(in srgb, var(--bf-appearance-token-color-accent-500) 10%, transparent);
-    border-color: var(--bf-appearance-token-color-accent-500);
-  }
-
-  &__input:checked + &__box &__icon {
-    opacity: 1;
-    transform: scale(1);
-    color: var(--bf-appearance-token-color-accent-500);
-  }
-
-  &__input:indeterminate + &__box {
-    background: color-mix(in srgb, var(--bf-appearance-token-color-accent-500) 10%, transparent);
-    border-color: var(--bf-appearance-token-color-accent-500);
-  }
-
-  &__input:indeterminate + &__box &__icon {
-    opacity: 1;
-    transform: scale(1);
-    color: var(--bf-appearance-token-color-accent-500);
-  }
-
-  &__input:focus-visible + &__box {
-    outline: 2px solid var(--bf-appearance-token-color-accent-400);
-    outline-offset: 2px;
-  }
-
-  &:hover:not(&--disabled) &__box {
-    border-color: var(--bf-appearance-token-border-base);
-    background: var(--bf-appearance-token-element-bg-subtle);
-  }
-
-  &:hover:not(&--disabled) &__input:checked + &__box,
-  &:hover:not(&--disabled) &__input:indeterminate + &__box {
-    background: color-mix(in srgb, var(--bf-appearance-token-color-accent-500) 15%, transparent);
-    border-color: var(--bf-appearance-token-color-accent-400);
-  }
-
-  &:hover:not(&--disabled) &__input:checked + &__box &__icon,
-  &:hover:not(&--disabled) &__input:indeterminate + &__box &__icon {
-    color: var(--bf-appearance-token-color-accent-400);
-  }
-
-  &__input:active:not(:disabled) + &__box {
-    transform: scale(0.97);
-  }
-
-  &--error &__box {
-    border-color: color-mix(in srgb, var(--bf-appearance-token-color-error) 60%, transparent);
-  }
-
-  &--error &__input:checked + &__box {
-    background: var(--bf-appearance-token-color-error-bg);
-    border-color: color-mix(in srgb, var(--bf-appearance-token-color-error) 80%, transparent);
-  }
-
-  &--error &__input:checked + &__box &__icon {
-    color: var(--bf-appearance-token-color-error);
-  }
-
-  &--small {
-    gap: tokens.$size-gap-2;
-
-    .bitfun-checkbox__wrapper {
-      margin-top: 1px;
-    }
-
-    .bitfun-checkbox__box {
-      width: 16px;
-      height: 16px;
-      border-radius: 4px;
-    }
-
-    .bitfun-checkbox__icon {
-      width: 9px;
-      height: 9px;
-    }
-
-    .bitfun-checkbox__label {
-      font-size: var(--bf-appearance-token-font-size-xs);
-    }
-
-    .bitfun-checkbox__description {
-      font-size: 11px;
-    }
-  }
-
-  &--large {
-    gap: tokens.$size-gap-4;
-
-    .bitfun-checkbox__wrapper {
-      margin-top: 3px;
-    }
-
-    .bitfun-checkbox__box {
-      width: 20px;
-      height: 20px;
-      border-radius: 6px;
-    }
-
-    .bitfun-checkbox__icon {
-      width: 13px;
-      height: 13px;
-    }
-
-    .bitfun-checkbox__label {
-      font-size: var(--bf-appearance-token-font-size-base);
-    }
-
-    .bitfun-checkbox__description {
-      font-size: var(--bf-appearance-token-font-size-xs);
-    }
-  }
-}
-
-@media (hover: hover) and (pointer: fine) {
-  .bitfun-checkbox:not(.bitfun-checkbox--disabled):hover {
-    .bitfun-checkbox__box {
-      border-color: var(--bf-appearance-token-border-base);
-      background: var(--bf-appearance-token-element-bg-subtle);
-    }
-
-    .bitfun-checkbox__input:checked + .bitfun-checkbox__box,
-    .bitfun-checkbox__input:indeterminate + .bitfun-checkbox__box {
-      background: color-mix(in srgb, var(--bf-appearance-token-color-accent-500) 15%, transparent);
-      border-color: var(--bf-appearance-token-color-accent-400);
-    }
-
-    .bitfun-checkbox__input:checked + .bitfun-checkbox__box .bitfun-checkbox__icon,
-    .bitfun-checkbox__input:indeterminate + .bitfun-checkbox__box .bitfun-checkbox__icon {
-      color: var(--bf-appearance-token-color-accent-400);
-    }
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .bitfun-checkbox__box {
-    transition:
-      background-color var(--bf-appearance-token-motion-fast) ease,
-      border-color var(--bf-appearance-token-motion-fast) ease;
-  }
-
-  .bitfun-checkbox__input:active:not(:disabled) + .bitfun-checkbox__box {
-    transform: none;
-  }
-}
diff --git a/src/web-ui/src/component-library/components/Checkbox/Checkbox.tsx b/src/web-ui/src/component-library/components/Checkbox/Checkbox.tsx
deleted file mode 100644
index f8f33a80bd..0000000000
--- a/src/web-ui/src/component-library/components/Checkbox/Checkbox.tsx
+++ /dev/null
@@ -1,101 +0,0 @@
-import React, { forwardRef } from 'react';
-import './Checkbox.scss';
-
-export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
-  /** Checkbox label */
-  label?: React.ReactNode;
-  /** Description text */
-  description?: string;
-  /** Size */
-  size?: 'small' | 'medium' | 'large';
-  /** Indeterminate state */
-  indeterminate?: boolean;
-  /** Error state */
-  error?: boolean;
-  /** Custom class name */
-  className?: string;
-}
-
-export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
-  (
-    {
-      label,
-      description,
-      size = 'medium',
-      indeterminate = false,
-      error = false,
-      disabled = false,
-      className = '',
-      children,
-      ...props
-    },
-    ref
-  ) => {
-    const checkboxRef = React.useRef<HTMLInputElement>(null);
-    
-    React.useImperativeHandle(ref, () => checkboxRef.current!);
-
-    React.useEffect(() => {
-      if (checkboxRef.current) {
-        checkboxRef.current.indeterminate = indeterminate;
-      }
-    }, [indeterminate]);
-
-    const containerClass = [
-      'bitfun-checkbox',
-      `bitfun-checkbox--${size}`,
-      error && 'bitfun-checkbox--error',
-      disabled && 'bitfun-checkbox--disabled',
-      className
-    ].filter(Boolean).join(' ');
-
-    return (
-      <label className={containerClass} data-bf-component="checkbox" data-bf-part="root" data-bf-size={size} data-bf-state={[indeterminate && 'indeterminate', disabled && 'disabled', error && 'error'].filter(Boolean).join(' ') || undefined}>
-        <div className="bitfun-checkbox__wrapper" data-bf-component="checkbox" data-bf-part="wrapper">
-          <input
-            {...props}
-            ref={checkboxRef}
-            type="checkbox"
-            className="bitfun-checkbox__input"
-            disabled={disabled}
-            {...props}
-            data-bf-component="checkbox"
-            data-bf-part="input"
-          />
-          <span className="bitfun-checkbox__box" data-bf-component="checkbox" data-bf-part="box">
-            <svg
-              className="bitfun-checkbox__icon"
-              data-bf-component="checkbox"
-              data-bf-part="icon"
-              viewBox="0 0 16 16"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-              aria-hidden="true"
-            >
-              {indeterminate ? (
-                <line x1="4" y1="8" x2="12" y2="8" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
-              ) : (
-                <path
-                  d="M3 8L6.5 11.5L13 4.5"
-                  stroke="currentColor"
-                  strokeWidth="2"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                />
-              )}
-            </svg>
-          </span>
-        </div>
-        {(label || description || children) && (
-          <div className="bitfun-checkbox__content" data-bf-component="checkbox" data-bf-part="content">
-            {label && <span className="bitfun-checkbox__label" data-bf-component="checkbox" data-bf-part="label">{label}</span>}
-            {description && <span className="bitfun-checkbox__description" data-bf-component="checkbox" data-bf-part="description">{description}</span>}
-            {children}
-          </div>
-        )}
-      </label>
-    );
-  }
-);
-
-Checkbox.displayName = 'Checkbox';
diff --git a/src/web-ui/src/component-library/components/Checkbox/appearance.ts b/src/web-ui/src/component-library/components/Checkbox/appearance.ts
deleted file mode 100644
index 13cfd24275..0000000000
--- a/src/web-ui/src/component-library/components/Checkbox/appearance.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import type { AppearanceSurfaceDescriptor } from '@/infrastructure/appearance/types';
-export const checkboxAppearanceDescriptor: AppearanceSurfaceDescriptor = {
-  id: 'checkbox', parts: [{ id: 'root' }, { id: 'wrapper' }, { id: 'input' }, { id: 'box' }, { id: 'icon' }, { id: 'content' }, { id: 'label' }, { id: 'description' }],
-  facets: [{ id: 'size', attribute: 'data-bf-size', values: ['small', 'medium', 'large'] }],
-  states: [
-    { id: 'hover', selector: { kind: 'ancestorPart', part: 'root', suffix: ':hover' } },
-    { id: 'focusWithin', selector: { kind: 'ancestorPart', part: 'root', suffix: ':focus-within' } },
-    { id: 'checked', selector: { kind: 'ancestorPart', part: 'root', suffix: ':has(input:checked)' } },
-    { id: 'indeterminate', selector: { kind: 'ancestorPart', part: 'root', suffix: '[data-bf-state~="indeterminate"]' } },
-    { id: 'disabled', selector: { kind: 'ancestorPart', part: 'root', suffix: '[data-bf-state~="disabled"]' } },
-    { id: 'error', selector: { kind: 'ancestorPart', part: 'root', suffix: '[data-bf-state~="error"]' } },
-  ],
-};
diff --git a/src/web-ui/src/component-library/components/Checkbox/index.ts b/src/web-ui/src/component-library/components/Checkbox/index.ts
deleted file mode 100644
index e7dac42416..0000000000
--- a/src/web-ui/src/component-library/components/Checkbox/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { Checkbox } from './Checkbox';
-export type { CheckboxProps } from './Checkbox';
\ No newline at end of file
diff --git a/src/web-ui/src/component-library/components/ConfigPage/ConfigPageMessage.tsx b/src/web-ui/src/component-library/components/ConfigPage/ConfigPageMessage.tsx
index 8dbef3a985..4f8e3a5e8d 100644
--- a/src/web-ui/src/component-library/components/ConfigPage/ConfigPageMessage.tsx
+++ b/src/web-ui/src/component-library/components/ConfigPage/ConfigPageMessage.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Alert } from '../Alert';
+import { Alert } from '@bitfun/ui';
 import './ConfigPage.scss';
 
 export interface ConfigPageMessageData {
diff --git a/src/web-ui/src/component-library/components/ConfigPage/ConfigPageRefreshButton.tsx b/src/web-ui/src/component-library/components/ConfigPage/ConfigPageRefreshButton.tsx
index 912182ed16..b1831ecfd2 100644
--- a/src/web-ui/src/component-library/components/ConfigPage/ConfigPageRefreshButton.tsx
+++ b/src/web-ui/src/component-library/components/ConfigPage/ConfigPageRefreshButton.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 import { RefreshCw } from 'lucide-react';
-import { IconButton } from '../IconButton';
+import { IconButton, Tooltip } from '@bitfun/ui';
 
 export interface ConfigPageRefreshButtonProps {
-  tooltip: React.ReactNode;
+  tooltip: string;
   onClick: () => void;
   loading?: boolean;
   disabled?: boolean;
@@ -18,17 +18,18 @@ export const ConfigPageRefreshButton: React.FC<ConfigPageRefreshButtonProps> = (
   className = '',
 }) => {
   return (
-    <IconButton
-      variant="ghost"
-      size="small"
-      tooltip={tooltip}
-      onClick={onClick}
-      disabled={disabled}
-      isLoading={loading}
-      className={className}
-    >
-      <RefreshCw size={14} />
-    </IconButton>
+    <Tooltip content={tooltip} disabled={disabled}>
+      <IconButton
+        aria-label={tooltip}
+        variant="quiet"
+        size="sm"
+        onClick={onClick}
+        disabled={disabled}
+        loading={loading}
+        className={className}
+        icon={<RefreshCw size={14} />}
+      />
+    </Tooltip>
   );
 };
 
diff --git a/src/web-ui/src/component-library/components/Empty/Empty.scss b/src/web-ui/src/component-library/components/Empty/Empty.scss
deleted file mode 100644
index 5316a67b55..0000000000
--- a/src/web-ui/src/component-library/components/Empty/Empty.scss
+++ /dev/null
@@ -1,55 +0,0 @@
-/**
- * Empty component styles
- * Based on the BitFun glassmorphism design system
- */
-.bitfun-empty {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: var(--bf-appearance-token-size-gap-4);
-  padding: var(--bf-appearance-token-size-gap-10) var(--bf-appearance-token-size-gap-5);
-  text-align: center;
-  animation: bitfun-empty-fade-in calc(var(--bf-appearance-token-motion-fast) + 70ms) var(--bf-appearance-token-easing-standard);
-
-  &__image {
-    opacity: 0.8;
-
-    svg {
-      display: block;
-    }
-  }
-
-  &__description {
-    font-size: 14px;
-    color: var(--bf-appearance-token-color-overlay-white-60);
-    margin-bottom: 16px;
-    animation: bitfun-empty-fade-in 0.5s ease-out 0.1s both;
-  }
-
-  &__footer {
-    animation: bitfun-empty-fade-in 0.5s ease-out 0.2s both;
-  }
-}
-
-@keyframes bitfun-empty-fade-in {
-  from {
-    opacity: 0;
-    transform: translateY(4px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .bitfun-empty {
-    animation: bitfun-empty-fade-only var(--bf-appearance-token-motion-fast) ease;
-  }
-}
-
-@keyframes bitfun-empty-fade-only {
-  from { opacity: 0; }
-  to { opacity: 1; }
-}
diff --git a/src/web-ui/src/component-library/components/Empty/Empty.tsx b/src/web-ui/src/component-library/components/Empty/Empty.tsx
deleted file mode 100644
index 123efe427b..0000000000
--- a/src/web-ui/src/component-library/components/Empty/Empty.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import React from 'react';
-import './Empty.scss';
-
-export interface EmptyProps {
-  /** Description text */
-  description?: React.ReactNode;
-  /** Custom icon */
-  image?: React.ReactNode;
-  /** Image size */
-  imageSize?: 'small' | 'medium' | 'large' | number;
-  /** Footer actions */
-  children?: React.ReactNode;
-  /** Custom class name */
-  className?: string;
-  /** Custom style */
-  style?: React.CSSProperties;
-}
-
-const DefaultImage: React.FC<{ size: number }> = ({ size }) => (
-  <svg
-    width={size}
-    height={size}
-    viewBox="0 0 120 120"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    aria-hidden="true"
-  >
-    <circle cx="60" cy="60" r="50" fill="var(--bf-appearance-token-color-accent-100)" />
-    <path
-      d="M40 50C40 44.4772 44.4772 40 50 40H70C75.5228 40 80 44.4772 80 50V70C80 75.5228 75.5228 80 70 80H50C44.4772 80 40 75.5228 40 70V50Z"
-      fill="color-mix(in srgb, var(--bf-appearance-token-color-accent-500) 20%, transparent)"
-    />
-    <circle cx="52" cy="55" r="4" fill="var(--bf-appearance-token-color-accent-400)" />
-    <circle cx="68" cy="55" r="4" fill="var(--bf-appearance-token-color-accent-400)" />
-    <path
-      d="M52 68C52 65.7909 53.7909 64 56 64H64C66.2091 64 68 65.7909 68 68"
-      stroke="var(--bf-appearance-token-color-accent-400)"
-      strokeWidth="3"
-      strokeLinecap="round"
-    />
-  </svg>
-);
-
-export const Empty: React.FC<EmptyProps> = ({
-  description = 'No data',
-  image,
-  imageSize = 'medium',
-  children,
-  className = '',
-  style,
-}) => {
-  const getImageSize = () => {
-    if (typeof imageSize === 'number') return imageSize;
-    const sizes = { small: 80, medium: 120, large: 160 };
-    return sizes[imageSize];
-  };
-
-  const size = getImageSize();
-
-  return (
-    <div className={`bitfun-empty ${className}`} style={style} data-bf-component="empty" data-bf-part="root">
-      <div className="bitfun-empty__image" data-bf-component="empty" data-bf-part="image">
-        {image || <DefaultImage size={size} />}
-      </div>
-      {description && (
-        <div className="bitfun-empty__description" data-bf-component="empty" data-bf-part="description">{description}</div>
-      )}
-      {children && <div className="bitfun-empty__footer" data-bf-component="empty" data-bf-part="footer">{children}</div>}
-    </div>
-  );
-};
-
-Empty.displayName = 'Empty';
diff --git a/src/web-ui/src/component-library/components/Empty/appearance.ts b/src/web-ui/src/component-library/components/Empty/appearance.ts
deleted file mode 100644
index 3eabcf4f44..0000000000
--- a/src/web-ui/src/component-library/components/Empty/appearance.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import type { AppearanceSurfaceDescriptor } from '@/infrastructure/appearance/types';
-
-export const emptyAppearanceDescriptor: AppearanceSurfaceDescriptor = {
-  id: 'empty',
-  parts: [{ id: 'root' }, { id: 'image' }, { id: 'description' }, { id: 'footer' }],
-};
diff --git a/src/web-ui/src/component-library/components/Empty/index.ts b/src/web-ui/src/component-library/components/Empty/index.ts
deleted file mode 100644
index 0c7f2b2b3f..0000000000
--- a/src/web-ui/src/component-library/components/Empty/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { Empty } from './Empty';
-export type { EmptyProps } from './Empty';
\ No newline at end of file
diff --git a/src/web-ui/src/component-library/components/IconButton/IconButton.example.tsx b/src/web-ui/src/component-library/components/IconButton/IconButton.example.tsx
deleted file mode 100644
index aa203538ed..0000000000
--- a/src/web-ui/src/component-library/components/IconButton/IconButton.example.tsx
+++ /dev/null
@@ -1,153 +0,0 @@
-/**
- * IconButton component usage examples
- * Show various variants and states
- */
-
-import React from 'react';
-import { IconButton } from './IconButton';
-import { useI18n } from '@/infrastructure/i18n';
-
-const PlusIcon = () => (
-  <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
-    <path d="M8 3v10M3 8h10" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
-  </svg>
-);
-
-const HeartIcon = () => (
-  <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
-    <path d="M8 14s-6-4-6-8c0-2.5 2-4 4-4 1.5 0 2.5 1 2 2 0 0-.5-1 0-2 1.5 0 4 1.5 4 4 0 4-4 8-4 8z" />
-  </svg>
-);
-
-const previewBackground = 'color-mix(in srgb, var(--bf-appearance-token-color-static-black) 90%, var(--bf-appearance-token-color-static-white))';
-const previewTextMuted = 'color-mix(in srgb, var(--bf-appearance-token-color-static-white) 63%, var(--bf-appearance-token-color-static-black))';
-
-export const IconButtonExample: React.FC = () => {
-  const { t } = useI18n('components');
-
-  return (
-    <div style={{ padding: '24px', background: previewBackground, minHeight: '100vh' }}>
-      <h2 style={{ color: 'var(--bf-appearance-token-color-static-white)', marginBottom: '24px' }}>
-        {t('componentLibrary.iconButtonExample.title')}
-      </h2>
-      
-      <div style={{ marginBottom: '32px' }}>
-        <h3 style={{ color: previewTextMuted, marginBottom: '16px' }}>
-          {t('componentLibrary.iconButtonExample.sections.basic')}
-        </h3>
-        <div style={{ display: 'flex', gap: '12px', alignItems: 'center' }}>
-          <IconButton variant="default" size="small" aria-label="Add small">
-            <PlusIcon />
-          </IconButton>
-          <IconButton variant="default" size="medium" aria-label="Add medium">
-            <PlusIcon />
-          </IconButton>
-          <IconButton variant="default" size="large" aria-label="Add large">
-            <PlusIcon />
-          </IconButton>
-          <IconButton variant="default" size="medium" disabled aria-label="Add disabled">
-            <PlusIcon />
-          </IconButton>
-        </div>
-      </div>
-
-      <div style={{ marginBottom: '32px' }}>
-        <h3 style={{ color: previewTextMuted, marginBottom: '16px' }}>
-          {t('componentLibrary.iconButtonExample.sections.ghost')}
-        </h3>
-        <div style={{ display: 'flex', gap: '12px', alignItems: 'center' }}>
-          <IconButton variant="ghost" size="small" aria-label="Favorite small">
-            <HeartIcon />
-          </IconButton>
-          <IconButton variant="ghost" size="medium" aria-label="Favorite medium">
-            <HeartIcon />
-          </IconButton>
-          <IconButton variant="ghost" size="large" aria-label="Favorite large">
-            <HeartIcon />
-          </IconButton>
-        </div>
-      </div>
-
-      <div style={{ marginBottom: '32px' }}>
-        <h3 style={{ color: previewTextMuted, marginBottom: '16px' }}>
-          {t('componentLibrary.iconButtonExample.sections.primary')}
-        </h3>
-        <div style={{ display: 'flex', gap: '12px', alignItems: 'center' }}>
-          <IconButton variant="primary" size="small" aria-label="Create small">
-            <PlusIcon />
-          </IconButton>
-          <IconButton variant="primary" size="medium" aria-label="Create medium">
-            <PlusIcon />
-          </IconButton>
-          <IconButton variant="primary" size="large" aria-label="Create large">
-            <PlusIcon />
-          </IconButton>
-          <IconButton variant="primary" size="medium" disabled aria-label="Create disabled">
-            <PlusIcon />
-          </IconButton>
-        </div>
-      </div>
-
-      <div style={{ marginBottom: '32px' }}>
-        <h3 style={{ color: previewTextMuted, marginBottom: '16px' }}>
-          {t('componentLibrary.iconButtonExample.sections.shape')}
-        </h3>
-        <div style={{ display: 'flex', gap: '12px', alignItems: 'center' }}>
-          <IconButton variant="default" shape="circle" size="medium" aria-label="Add circle">
-            <PlusIcon />
-          </IconButton>
-          <IconButton variant="primary" shape="circle" size="medium" aria-label="Favorite circle">
-            <HeartIcon />
-          </IconButton>
-        </div>
-      </div>
-
-      <div style={{ marginBottom: '32px' }}>
-        <h3 style={{ color: previewTextMuted, marginBottom: '16px' }}>
-          {t('componentLibrary.iconButtonExample.sections.other')}
-        </h3>
-        <div style={{ display: 'flex', gap: '12px', alignItems: 'center' }}>
-          <IconButton variant="danger" size="medium" aria-label="Danger action">
-            <PlusIcon />
-          </IconButton>
-          <IconButton variant="success" size="medium" aria-label="Success action">
-            <PlusIcon />
-          </IconButton>
-          <IconButton variant="warning" size="medium" aria-label="Warning action">
-            <PlusIcon />
-          </IconButton>
-          <IconButton variant="ai" size="medium" aria-label="AI action">
-            <PlusIcon />
-          </IconButton>
-        </div>
-      </div>
-
-      <div style={{ marginTop: '48px', padding: '16px', background: 'var(--bf-appearance-token-color-overlay-white-08)', borderRadius: '8px' }}>
-        <h3 style={{ color: 'var(--bf-appearance-token-color-static-white)', marginBottom: '12px' }}>
-          {t('componentLibrary.iconButtonExample.sections.usage')}
-        </h3>
-        <ul style={{ color: previewTextMuted, lineHeight: '1.8' }}>
-          <li>
-            <strong>{t('componentLibrary.iconButtonExample.usage.defaultGhost.label')}</strong>
-            {t('componentLibrary.iconButtonExample.usage.defaultGhost.text')}
-          </li>
-          <li>
-            <strong>{t('componentLibrary.iconButtonExample.usage.primary.label')}</strong>
-            {t('componentLibrary.iconButtonExample.usage.primary.text')}
-          </li>
-          <li>
-            <strong>{t('componentLibrary.iconButtonExample.usage.disabled.label')}</strong>
-            {t('componentLibrary.iconButtonExample.usage.disabled.text')}
-          </li>
-          <li>
-            <strong>{t('componentLibrary.iconButtonExample.usage.appearance.label')}</strong>
-            {t('componentLibrary.iconButtonExample.usage.appearance.text')}
-          </li>
-        </ul>
-      </div>
-    </div>
-  );
-};
-
-export default IconButtonExample;
-
diff --git a/src/web-ui/src/component-library/components/IconButton/IconButton.scss b/src/web-ui/src/component-library/components/IconButton/IconButton.scss
deleted file mode 100644
index 03727a2fff..0000000000
--- a/src/web-ui/src/component-library/components/IconButton/IconButton.scss
+++ /dev/null
@@ -1,200 +0,0 @@
-@use '../../styles/tokens.scss' as tokens;
-
-.icon-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0;
-  border: none;
-  border-radius: var(--bf-appearance-token-size-radius-sm);
-  cursor: pointer;
-  position: relative;
-  outline: none;
-  user-select: none;
-  flex-shrink: 0;
-  scale: 1;
-  transform-origin: center;
-  transition:
-    scale var(--bf-appearance-token-motion-fast) var(--bf-appearance-token-easing-standard),
-    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);
-
-  background: transparent;
-  color: var(--bf-appearance-token-color-text-secondary);
-
-  &:active:not(:disabled) {
-    scale: 0.97;
-    background: var(--bf-appearance-token-color-overlay-white-08);
-  }
-
-  svg {
-    display: block;
-    flex-shrink: 0;
-    transition: color var(--bf-appearance-token-motion-fast) var(--bf-appearance-token-easing-standard);
-  }
-
-  &--xs {
-    width: 24px;
-    height: 24px;
-
-    svg {
-      width: 14px;
-      height: 14px;
-    }
-  }
-
-  &--small {
-    width: 28px;
-    height: 28px;
-
-    svg {
-      width: 16px;
-      height: 16px;
-    }
-  }
-
-  &--medium {
-    width: 32px;
-    height: 32px;
-
-    svg {
-      width: 16px;
-      height: 16px;
-    }
-  }
-
-  &--large {
-    width: 40px;
-    height: 40px;
-
-    svg {
-      width: 20px;
-      height: 20px;
-    }
-  }
-
-  &--circle {
-    border-radius: 50%;
-  }
-
-
-  &--primary {
-    background: color-mix(in srgb, var(--bf-appearance-token-color-accent-500) 20%, transparent);
-    color: var(--bf-appearance-token-color-static-white);
-
-    &:active:not(:disabled) {
-      background: color-mix(in srgb, var(--bf-appearance-token-color-accent-500) 24%, transparent);
-    }
-  }
-
-  &--danger {
-    background: transparent;
-    color: var(--bf-appearance-token-color-text-secondary);
-
-    &:active:not(:disabled) {
-      background: color-mix(in srgb, var(--bf-appearance-token-color-error) 22%, transparent);
-      color: var(--bf-appearance-token-color-error);
-    }
-  }
-
-  &--success {
-    background: color-mix(in srgb, var(--bf-appearance-token-color-success) 18%, transparent);
-    color: var(--bf-appearance-token-color-success);
-
-    &:active:not(:disabled) {
-      background: color-mix(in srgb, var(--bf-appearance-token-color-success) 22%, transparent);
-    }
-  }
-
-  &--warning {
-    background: color-mix(in srgb, var(--bf-appearance-token-color-warning) 18%, transparent);
-    color: var(--bf-appearance-token-color-warning);
-
-    &:active:not(:disabled) {
-      background: color-mix(in srgb, var(--bf-appearance-token-color-warning) 22%, transparent);
-    }
-  }
-
-  &--ai {
-    background: color-mix(in srgb, var(--bf-appearance-token-color-purple-500) 18%, transparent);
-    color: var(--bf-appearance-token-color-purple-500);
-
-    &:active:not(:disabled) {
-      background: color-mix(in srgb, var(--bf-appearance-token-color-purple-500) 22%, transparent);
-    }
-  }
-
-  &:focus-visible {
-    outline: 2px solid color-mix(in srgb, var(--bf-appearance-token-color-accent-500) 50%, transparent);
-    outline-offset: 1px;
-  }
-
-  &:disabled {
-    opacity: 0.45;
-    cursor: default;
-    pointer-events: none;
-  }
-
-  &--loading {
-    cursor: wait;
-    pointer-events: none;
-
-    svg {
-      animation: icon-btn-spin 1s linear infinite;
-    }
-  }
-}
-
-@media (hover: hover) and (pointer: fine) {
-  .icon-btn:hover:not(:disabled) {
-    background: var(--bf-appearance-token-color-overlay-white-08);
-    color: var(--bf-appearance-token-color-accent-500);
-  }
-
-  .icon-btn--primary:hover:not(:disabled) {
-    background: color-mix(in srgb, var(--bf-appearance-token-color-accent-500) 30%, transparent);
-    color: var(--bf-appearance-token-color-static-white);
-  }
-
-  .icon-btn--danger:hover:not(:disabled) {
-    background: color-mix(in srgb, var(--bf-appearance-token-color-error) 28%, transparent);
-    color: var(--bf-appearance-token-color-error);
-  }
-
-  .icon-btn--success:hover:not(:disabled) {
-    background: color-mix(in srgb, var(--bf-appearance-token-color-success) 28%, transparent);
-    color: var(--bf-appearance-token-color-static-white);
-  }
-
-  .icon-btn--warning:hover:not(:disabled) {
-    background: color-mix(in srgb, var(--bf-appearance-token-color-warning) 28%, transparent);
-    color: var(--bf-appearance-token-color-static-white);
-  }
-
-  .icon-btn--ai:hover:not(:disabled) {
-    background: color-mix(in srgb, var(--bf-appearance-token-color-purple-500) 28%, transparent);
-    color: var(--bf-appearance-token-color-static-white);
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .icon-btn {
-    transition:
-      background-color var(--bf-appearance-token-motion-instant) ease,
-      color var(--bf-appearance-token-motion-instant) ease;
-
-    &:active:not(:disabled) {
-      scale: none;
-    }
-  }
-
-  .icon-btn--loading svg {
-    animation: none;
-  }
-}
-
-@keyframes icon-btn-spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
diff --git a/src/web-ui/src/component-library/components/IconButton/IconButton.tsx b/src/web-ui/src/component-library/components/IconButton/IconButton.tsx
deleted file mode 100644
index 9dbf92a56f..0000000000
--- a/src/web-ui/src/component-library/components/IconButton/IconButton.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-/**
- * IconButton component
- * Optimized component for icon buttons
- */
-
-import React from 'react';
-import { Tooltip } from '../Tooltip/Tooltip';
-import './IconButton.scss';
-
-export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?: 'default' | 'primary' | 'ghost' | 'danger' | 'success' | 'warning' | 'ai';
-  size?: 'xs' | 'small' | 'medium' | 'large';
-  shape?: 'square' | 'circle';
-  isLoading?: boolean;
-  tooltip?: React.ReactNode;
-  tooltipPlacement?: 'top' | 'bottom' | 'left' | 'right';
-  /** When true, tooltip follows the mouse cursor (default: true for better UX on small targets). */
-  tooltipFollowCursor?: boolean;
-}
-
-export const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(({
-  children,
-  variant = 'default',
-  size = 'medium',
-  shape = 'square',
-  isLoading = false,
-  tooltip,
-  tooltipPlacement = 'top',
-  tooltipFollowCursor = true,
-  className = '',
-  disabled,
-  ...props
-}, ref) => {
-  const classNames = [
-    'icon-btn',
-    `icon-btn--${size}`,
-    `icon-btn--${variant}`,
-    shape === 'circle' && 'icon-btn--circle',
-    isLoading && 'icon-btn--loading',
-    className
-  ].filter(Boolean).join(' ');
-
-  const button = (
-    <button
-      ref={ref}
-      className={classNames}
-      disabled={disabled || isLoading}
-      data-bf-component="icon-button"
-      data-bf-part="root"
-      data-bf-variant={variant}
-      data-bf-size={size}
-      data-bf-shape={shape}
-      data-bf-state={isLoading ? 'loading' : undefined}
-      {...props}
-    >
-      {children}
-    </button>
-  );
-
-  if (tooltip && !disabled) {
-    return (
-      <Tooltip content={tooltip} placement={tooltipPlacement} followCursor={tooltipFollowCursor}>
-        {button}
-      </Tooltip>
-    );
-  }
-
-  return button;
-});
-
-IconButton.displayName = 'IconButton';
diff --git a/src/web-ui/src/component-library/components/IconButton/appearance.ts b/src/web-ui/src/component-library/components/IconButton/appearance.ts
deleted file mode 100644
index feb386edff..0000000000
--- a/src/web-ui/src/component-library/components/IconButton/appearance.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import type { AppearanceSurfaceDescriptor } from '@/infrastructure/appearance/types';
-export const iconButtonAppearanceDescriptor: AppearanceSurfaceDescriptor = {
-  id: 'icon-button', parts: [{ id: 'root' }],
-  facets: [
-    { id: 'variant', attribute: 'data-bf-variant', values: ['default', 'primary', 'ghost', 'danger', 'success', 'warning', 'ai'] },
-    { id: 'size', attribute: 'data-bf-size', values: ['xs', 'small', 'medium', 'large'] },
-    { id: 'shape', attribute: 'data-bf-shape', values: ['square', 'circle'] },
-  ],
-  states: [{ id: 'hover', selector: { kind: 'self', suffix: ':hover:not(:disabled)' } }, { id: 'active', selector: { kind: 'self', suffix: ':active:not(:disabled)' } }, { id: 'focusVisible', selector: { kind: 'self', suffix: ':focus-visible' } }, { id: 'disabled', selector: { kind: 'self', suffix: ':disabled' } }, { id: 'loading', selector: { kind: 'self', suffix: '[data-bf-state~="loading"]' } }],
-};
diff --git a/src/web-ui/src/component-library/components/IconButton/index.ts b/src/web-ui/src/component-library/components/IconButton/index.ts
deleted file mode 100644
index 5f509c997b..0000000000
--- a/src/web-ui/src/component-library/components/IconButton/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { IconButton } from './IconButton';
-export type { IconButtonProps } from './IconButton';
diff --git a/src/web-ui/src/component-library/components/ImeSafeTextControls.test.tsx b/src/web-ui/src/component-library/components/ImeSafeTextControls.test.tsx
index 40119a038c..799bfe53e3 100644
--- a/src/web-ui/src/component-library/components/ImeSafeTextControls.test.tsx
+++ b/src/web-ui/src/component-library/components/ImeSafeTextControls.test.tsx
@@ -4,10 +4,9 @@ import React, { act } from 'react';
 import { createRoot, type Root } from 'react-dom/client';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
-import { Input } from '@bitfun/ui';
+import { Input, Textarea } from '@bitfun/ui';
 
 import { isImeOwnedKeyboardEvent } from '@/shared/utils/ime';
-import { Textarea } from './Textarea';
 
 globalThis.IS_REACT_ACT_ENVIRONMENT = true;
 
diff --git a/src/web-ui/src/component-library/components/NumberInput/NumberInput.scss b/src/web-ui/src/component-library/components/NumberInput/NumberInput.scss
deleted file mode 100644
index 91a0644ad6..0000000000
--- a/src/web-ui/src/component-library/components/NumberInput/NumberInput.scss
+++ /dev/null
@@ -1,325 +0,0 @@
-/**
- * NumberInput component styles
- */
-@use '../../styles/tokens.scss' as tokens;
-
-.bitfun-number-input {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-
-  &__label {
-    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;
-  }
-
-  &__container {
-    position: relative;
-    display: flex;
-    align-items: center;
-    background: transparent;
-    border: 1px solid var(--bf-appearance-token-border-base);
-    border-radius: var(--bf-appearance-token-size-radius-sm);
-    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);
-    overflow: hidden;
-
-    &:hover:not(.bitfun-number-input--disabled &) {
-      background: var(--bf-appearance-token-element-bg-subtle);
-      border-color: var(--bf-appearance-token-border-strong);
-    }
-
-    &:focus-within {
-      background: transparent;
-      border-color: var(--bf-appearance-token-color-accent-500);
-    }
-  }
-
-  &__value-area {
-    flex: 1;
-    display: flex;
-    align-items: center;
-    gap: 4px;
-    padding: 0 12px;
-    position: relative;
-    z-index: 1;
-  }
-
-  &__input {
-    flex: 1;
-    width: 100%;
-    min-width: 0;
-    background: transparent;
-    border: none !important;
-    outline: none !important;
-    box-shadow: none !important;
-    color: var(--bf-appearance-token-color-text-primary);
-    font-size: inherit;
-    font-weight: var(--bf-appearance-token-font-weight-medium);
-    font-variant-numeric: tabular-nums;
-    text-align: center;
-    padding: 0;
-
-    &::placeholder {
-      color: var(--bf-appearance-token-color-text-muted);
-    }
-
-    &:focus {
-      border: none !important;
-      outline: none !important;
-      box-shadow: none !important;
-    }
-
-    &:disabled {
-      cursor: default;
-    }
-
-    &::-webkit-outer-spin-button,
-    &::-webkit-inner-spin-button {
-      -webkit-appearance: none;
-      margin: 0;
-    }
-
-    &[type=number] {
-      -moz-appearance: textfield;
-    }
-  }
-
-  &__unit {
-    font-size: 0.85em;
-    font-weight: var(--bf-appearance-token-font-weight-normal);
-    color: var(--bf-appearance-token-color-text-muted);
-    flex-shrink: 0;
-    opacity: 0.8;
-  }
-
-  &__buttons {
-    display: flex;
-    flex-direction: column;
-    border-left: 1px solid var(--bf-appearance-token-border-subtle);
-    position: relative;
-    z-index: 1;
-  }
-
-  &__btn {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: transparent;
-    border: none;
-    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),
-      scale var(--bf-appearance-token-motion-fast) var(--bf-appearance-token-easing-standard);
-    position: relative;
-    overflow: hidden;
-
-    &:hover:not(:disabled) {
-      color: var(--bf-appearance-token-color-accent-500);
-      background: var(--bf-appearance-token-element-bg-subtle);
-    }
-
-    &:active:not(:disabled) {
-      scale: 0.97;
-    }
-
-    &:disabled {
-      opacity: 0.3;
-      cursor: default;
-    }
-
-    svg {
-      position: relative;
-      z-index: 1;
-    }
-
-    &--up {
-      border-bottom: 1px solid var(--bf-appearance-token-border-subtle);
-      border-radius: 0 var(--bf-appearance-token-size-radius-sm) 0 0;
-    }
-
-    &--down {
-      border-radius: 0 0 var(--bf-appearance-token-size-radius-sm) 0;
-    }
-
-    &--minus,
-    &--plus {
-      border-radius: var(--bf-appearance-token-size-radius-sm);
-    }
-  }
-
-  &__progress {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    height: 2px;
-    background: transparent;
-    overflow: hidden;
-    opacity: 0;
-    transition: opacity var(--bf-appearance-token-motion-base) var(--bf-appearance-token-easing-standard);
-  }
-
-  &__container:hover &__progress,
-  &__container:focus-within &__progress {
-    opacity: 1;
-  }
-
-  &__progress-bar {
-    height: 100%;
-    background: var(--bf-appearance-token-color-accent-500);
-    border-radius: 0 2px 2px 0;
-    transition: width var(--bf-appearance-token-motion-base) var(--bf-appearance-token-easing-standard);
-  }
-
-  &--small {
-    .bitfun-number-input__container {
-      height: 28px;
-      font-size: 12px;
-    }
-
-    .bitfun-number-input__value-area {
-      padding: 0 8px;
-    }
-
-    .bitfun-number-input__btn {
-      width: 22px;
-      height: 14px;
-
-      svg {
-        width: 12px;
-        height: 12px;
-      }
-    }
-  }
-
-  &--medium {
-    .bitfun-number-input__container {
-      height: 36px;
-      font-size: 14px;
-    }
-
-    .bitfun-number-input__btn {
-      width: 28px;
-      height: 18px;
-    }
-  }
-
-  &--large {
-    .bitfun-number-input__container {
-      height: 44px;
-      font-size: 16px;
-    }
-
-    .bitfun-number-input__value-area {
-      padding: 0 16px;
-    }
-
-    .bitfun-number-input__btn {
-      width: 36px;
-      height: 22px;
-
-      svg {
-        width: 16px;
-        height: 16px;
-      }
-    }
-  }
-
-
-  &--compact {
-    .bitfun-number-input__container {
-      border-radius: var(--bf-appearance-token-size-radius-sm);
-    }
-
-    .bitfun-number-input__value-area {
-      padding: 0 8px;
-    }
-
-    .bitfun-number-input__progress {
-      display: none;
-    }
-  }
-
-  &--stepper {
-    .bitfun-number-input__buttons {
-      flex-direction: row;
-      border-left: none;
-      position: absolute;
-      left: 0;
-      right: 0;
-      top: 0;
-      bottom: 0;
-      justify-content: space-between;
-      pointer-events: none;
-    }
-
-    .bitfun-number-input__btn {
-      pointer-events: auto;
-      width: 32px;
-      height: 100%;
-      border: none;
-
-      &--minus {
-        border-right: 1px solid var(--bf-appearance-token-border-subtle);
-        border-radius: var(--bf-appearance-token-size-radius-sm) 0 0 var(--bf-appearance-token-size-radius-sm);
-      }
-
-      &--plus {
-        border-left: 1px solid var(--bf-appearance-token-border-subtle);
-        border-radius: 0 var(--bf-appearance-token-size-radius-sm) var(--bf-appearance-token-size-radius-sm) 0;
-      }
-    }
-
-    .bitfun-number-input__value-area {
-      padding: 0 40px;
-    }
-  }
-
-
-  &--disabled {
-    opacity: var(--bf-appearance-token-opacity-disabled);
-    pointer-events: none;
-
-    .bitfun-number-input__container {
-      background: transparent;
-    }
-  }
-
-  &--dragging {
-    .bitfun-number-input__container {
-      border-color: var(--bf-appearance-token-color-purple-500);
-      background: var(--bf-appearance-token-color-purple-100);
-    }
-
-    .bitfun-number-input__progress-bar {
-      background: var(--bf-appearance-token-color-purple-500);
-    }
-  }
-
-  &--editing {
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .bitfun-number-input__container,
-  .bitfun-number-input__progress,
-  .bitfun-number-input__progress-bar {
-    transition-duration: var(--bf-appearance-token-motion-instant);
-  }
-
-  .bitfun-number-input__btn {
-    transition:
-      background-color var(--bf-appearance-token-motion-instant) ease,
-      color var(--bf-appearance-token-motion-instant) ease;
-
-    &:active:not(:disabled) {
-      scale: none;
-    }
-  }
-}
diff --git a/src/web-ui/src/component-library/components/NumberInput/NumberInput.tsx b/src/web-ui/src/component-library/components/NumberInput/NumberInput.tsx
deleted file mode 100644
index b3e1009355..0000000000
--- a/src/web-ui/src/component-library/components/NumberInput/NumberInput.tsx
+++ /dev/null
@@ -1,326 +0,0 @@
-/**
- * NumberInput component
- * Supports step buttons and direct input
- */
-
-import React, { forwardRef, useState, useCallback, useRef, useEffect } from 'react';
-import { ChevronUp, ChevronDown, Minus, Plus } from 'lucide-react';
-import { useI18n } from '@/infrastructure/i18n';
-import { isImeOwnedKeyboardEvent } from '@/shared/utils/ime';
-import './NumberInput.scss';
-
-export interface NumberInputProps {
-  value: number;
-  onChange: (value: number) => void;
-  min?: number;
-  max?: number;
-  step?: number;
-  unit?: string;
-  disabled?: boolean;
-  size?: 'small' | 'medium' | 'large';
-  variant?: 'default' | 'compact' | 'stepper';
-  showButtons?: boolean;
-  precision?: number;
-  className?: string;
-  label?: string;
-  draggable?: boolean;
-  disableWheel?: boolean;
-}
-
-export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
-  (
-    {
-      value,
-      onChange,
-      min = -Infinity,
-      max = Infinity,
-      step = 1,
-      unit,
-      disabled = false,
-      size = 'medium',
-      variant = 'default',
-      showButtons = true,
-      precision = 0,
-      className = '',
-      label,
-      draggable = false,
-      disableWheel = false,
-    },
-    ref
-  ) => {
-    const { t } = useI18n('components');
-    const [isEditing, setIsEditing] = useState(false);
-    const [inputValue, setInputValue] = useState(String(value));
-    const [isDragging, setIsDragging] = useState(false);
-    const [isHovered, setIsHovered] = useState(false);
-    const dragStartRef = useRef<{ y: number; value: number } | null>(null);
-    const inputRef = useRef<HTMLInputElement>(null);
-    const compositionActiveRef = useRef(false);
-    const containerRef = useRef<HTMLDivElement>(null);
-
-    const formatValue = useCallback(
-      (val: number) => {
-        return precision > 0 ? val.toFixed(precision) : String(Math.round(val));
-      },
-      [precision]
-    );
-
-    useEffect(() => {
-      if (!isEditing) {
-        setInputValue(formatValue(value));
-      }
-    }, [value, isEditing, formatValue]);
-
-    const clampValue = useCallback(
-      (val: number) => Math.min(max, Math.max(min, val)),
-      [min, max]
-    );
-
-    const increment = useCallback(() => {
-      if (disabled) return;
-      const newValue = clampValue(value + step);
-      onChange(newValue);
-    }, [value, step, clampValue, onChange, disabled]);
-
-    const decrement = useCallback(() => {
-      if (disabled) return;
-      const newValue = clampValue(value - step);
-      onChange(newValue);
-    }, [value, step, clampValue, onChange, disabled]);
-
-    const handleInputChange = useCallback(
-      (e: React.ChangeEvent<HTMLInputElement>) => {
-        setInputValue(e.target.value);
-      },
-      []
-    );
-
-    const handleInputBlur = useCallback(() => {
-      setIsEditing(false);
-      const parsed = parseFloat(inputValue);
-      if (!isNaN(parsed)) {
-        const clamped = clampValue(parsed);
-        onChange(clamped);
-        setInputValue(formatValue(clamped));
-      } else {
-        setInputValue(formatValue(value));
-      }
-    }, [inputValue, value, clampValue, onChange, formatValue]);
-
-    const handleKeyDown = useCallback(
-      (e: React.KeyboardEvent<HTMLInputElement>) => {
-        if (
-          (e.key === 'Enter' || e.key === 'Escape')
-          && isImeOwnedKeyboardEvent(e, compositionActiveRef.current)
-        ) {
-          e.stopPropagation();
-          return;
-        }
-        if (e.key === 'Enter') {
-          handleInputBlur();
-          inputRef.current?.blur();
-        } else if (e.key === 'Escape') {
-          setIsEditing(false);
-          setInputValue(formatValue(value));
-          inputRef.current?.blur();
-        } else if (e.key === 'ArrowUp') {
-          e.preventDefault();
-          increment();
-        } else if (e.key === 'ArrowDown') {
-          e.preventDefault();
-          decrement();
-        }
-      },
-      [handleInputBlur, formatValue, value, increment, decrement]
-    );
-
-    const handleDragStart = useCallback(
-      (e: React.MouseEvent) => {
-        if (!draggable || disabled) return;
-        e.preventDefault();
-        setIsDragging(true);
-        dragStartRef.current = { y: e.clientY, value };
-        document.body.style.cursor = 'ns-resize';
-      },
-      [draggable, disabled, value]
-    );
-
-    useEffect(() => {
-      if (!isDragging) return;
-
-      const handleMouseMove = (e: MouseEvent) => {
-        if (!dragStartRef.current) return;
-        const delta = dragStartRef.current.y - e.clientY;
-        const steps = Math.round(delta / 5);
-        const newValue = clampValue(dragStartRef.current.value + steps * step);
-        onChange(newValue);
-      };
-
-      const handleMouseUp = () => {
-        setIsDragging(false);
-        dragStartRef.current = null;
-        document.body.style.cursor = '';
-      };
-
-      document.addEventListener('mousemove', handleMouseMove);
-      document.addEventListener('mouseup', handleMouseUp);
-
-      return () => {
-        document.removeEventListener('mousemove', handleMouseMove);
-        document.removeEventListener('mouseup', handleMouseUp);
-      };
-    }, [isDragging, step, clampValue, onChange]);
-
-    const handleWheel = useCallback(
-      (e: React.WheelEvent) => {
-        if (disabled || disableWheel || !isHovered) return;
-        e.preventDefault();
-        if (e.deltaY < 0) {
-          increment();
-        } else {
-          decrement();
-        }
-      },
-      [disabled, disableWheel, isHovered, increment, decrement]
-    );
-
-    const containerClassName = [
-      'bitfun-number-input',
-      `bitfun-number-input--${size}`,
-      `bitfun-number-input--${variant}`,
-      disabled && 'bitfun-number-input--disabled',
-      isDragging && 'bitfun-number-input--dragging',
-      isEditing && 'bitfun-number-input--editing',
-      className,
-    ]
-      .filter(Boolean)
-      .join(' ');
-
-    return (
-      <div className={containerClassName} data-bf-component="number-input" data-bf-part="root" data-bf-variant={variant} data-bf-size={size} data-bf-state={[disabled && 'disabled', isEditing && 'editing', isDragging && 'dragging'].filter(Boolean).join(' ') || undefined}>
-        {label && <label className="bitfun-number-input__label" data-bf-component="number-input" data-bf-part="label">{label}</label>}
-        <div
-          ref={containerRef}
-          className="bitfun-number-input__container"
-          data-bf-component="number-input"
-          data-bf-part="container"
-          onMouseEnter={() => setIsHovered(true)}
-          onMouseLeave={() => setIsHovered(false)}
-          onWheel={handleWheel}
-        >
-          <div className="bitfun-number-input__glow" data-bf-component="number-input" data-bf-part="glow" />
-
-          <div
-            className="bitfun-number-input__value-area"
-            data-bf-component="number-input"
-            data-bf-part="valueArea"
-            onMouseDown={draggable ? handleDragStart : undefined}
-            style={{ cursor: draggable && !disabled ? 'ns-resize' : 'text' }}
-          >
-            <input
-              ref={(node) => {
-                if (typeof ref === 'function') {
-                  ref(node);
-                } else if (ref) {
-                  ref.current = node;
-                }
-                (inputRef as React.MutableRefObject<HTMLInputElement | null>).current = node;
-              }}
-              type="text"
-              inputMode="decimal"
-              className="bitfun-number-input__input"
-              value={inputValue}
-              onChange={handleInputChange}
-              onFocus={() => setIsEditing(true)}
-              onBlur={handleInputBlur}
-              onKeyDown={handleKeyDown}
-              onCompositionStart={() => {
-                compositionActiveRef.current = true;
-              }}
-              onCompositionEnd={() => {
-                compositionActiveRef.current = false;
-              }}
-              disabled={disabled}
-              data-bf-component="number-input"
-              data-bf-part="input"
-            />
-            {unit && <span className="bitfun-number-input__unit" data-bf-component="number-input" data-bf-part="unit">{unit}</span>}
-          </div>
-
-          {showButtons && variant !== 'compact' && (
-            <div className="bitfun-number-input__buttons" data-bf-component="number-input" data-bf-part="buttons">
-              {variant === 'stepper' ? (
-                <>
-                  <button
-                    type="button"
-                    className="bitfun-number-input__btn bitfun-number-input__btn--minus"
-                    onClick={decrement}
-                    disabled={disabled || value <= min}
-                    tabIndex={-1}
-                    aria-label={t('numberInput.decrease')}
-                    data-bf-component="number-input"
-                    data-bf-part="decrement"
-                  >
-                    <Minus size={12} strokeWidth={2.5} />
-                  </button>
-                  <button
-                    type="button"
-                    className="bitfun-number-input__btn bitfun-number-input__btn--plus"
-                    onClick={increment}
-                    disabled={disabled || value >= max}
-                    tabIndex={-1}
-                    aria-label={t('numberInput.increase')}
-                    data-bf-component="number-input"
-                    data-bf-part="increment"
-                  >
-                    <Plus size={12} strokeWidth={2.5} />
-                  </button>
-                </>
-              ) : (
-                <>
-                  <button
-                    type="button"
-                    className="bitfun-number-input__btn bitfun-number-input__btn--up"
-                    onClick={increment}
-                    disabled={disabled || value >= max}
-                    tabIndex={-1}
-                    aria-label={t('numberInput.increase')}
-                    data-bf-component="number-input"
-                    data-bf-part="increment"
-                  >
-                    <ChevronUp size={14} strokeWidth={2.5} />
-                  </button>
-                  <button
-                    type="button"
-                    className="bitfun-number-input__btn bitfun-number-input__btn--down"
-                    onClick={decrement}
-                    disabled={disabled || value <= min}
-                    tabIndex={-1}
-                    aria-label={t('numberInput.decrease')}
-                    data-bf-component="number-input"
-                    data-bf-part="decrement"
-                  >
-                    <ChevronDown size={14} strokeWidth={2.5} />
-                  </button>
-                </>
-              )}
-            </div>
-          )}
-
-          {min !== -Infinity && max !== Infinity && (
-            <div className="bitfun-number-input__progress" data-bf-component="number-input" data-bf-part="progress">
-              <div
-                className="bitfun-number-input__progress-bar"
-                data-bf-component="number-input"
-                data-bf-part="progressBar"
-                style={{ width: `${((value - min) / (max - min)) * 100}%` }}
-              />
-            </div>
-          )}
-        </div>
-      </div>
-    );
-  }
-);
-
-NumberInput.displayName = 'NumberInput';
diff --git a/src/web-ui/src/component-library/components/NumberInput/appearance.ts b/src/web-ui/src/component-library/components/NumberInput/appearance.ts
deleted file mode 100644
index 06b9b2e678..0000000000
--- a/src/web-ui/src/component-library/components/NumberInput/appearance.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import type { AppearanceSurfaceDescriptor } from '@/infrastructure/appearance/types';
-export const numberInputAppearanceDescriptor: AppearanceSurfaceDescriptor = {
-  id: 'number-input', parts: [{ id: 'root' }, { id: 'label' }, { id: 'container' }, { id: 'glow' }, { id: 'valueArea' }, { id: 'input' }, { id: 'unit' }, { id: 'buttons' }, { id: 'decrement' }, { id: 'increment' }, { id: 'progress' }, { id: 'progressBar' }],
-  facets: [{ id: 'variant', attribute: 'data-bf-variant', values: ['default', 'compact', 'stepper'] }, { id: 'size', attribute: 'data-bf-size', values: ['small', 'medium', 'large'] }],
-  states: [{ id: 'hover', selector: { kind: 'self', suffix: ':hover' } }, { id: 'focusWithin', selector: { kind: 'self', suffix: ':focus-within' } }, { id: 'disabled', selector: { kind: 'self', suffix: '[data-bf-state~="disabled"]' } }, { id: 'editing', selector: { kind: 'self', suffix: '[data-bf-state~="editing"]' } }, { id: 'dragging', selector: { kind: 'self', suffix: '[data-bf-state~="dragging"]' } }],
-};
diff --git a/src/web-ui/src/component-library/components/NumberInput/index.ts b/src/web-ui/src/component-library/components/NumberInput/index.ts
deleted file mode 100644
index a5669a75ef..0000000000
--- a/src/web-ui/src/component-library/components/NumberInput/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './NumberInput';
-
diff --git a/src/web-ui/src/component-library/components/PopupCloseButton/PopupCloseButton.scss b/src/web-ui/src/component-library/components/PopupCloseButton/PopupCloseButton.scss
index 93a2835648..4a3cae004d 100644
--- a/src/web-ui/src/component-library/components/PopupCloseButton/PopupCloseButton.scss
+++ b/src/web-ui/src/component-library/components/PopupCloseButton/PopupCloseButton.scss
@@ -1,5 +1,9 @@
-.popup-close-button.icon-btn {
+.popup-close-button {
   box-sizing: border-box;
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   flex: 0 0 32px;
   width: 32px;
   min-width: 32px;
@@ -9,6 +13,14 @@
   border-radius: 8px;
   background: transparent;
   color: var(--bf-appearance-token-color-text-muted);
+  padding: 0;
+  cursor: pointer;
+  outline: none;
+  user-select: none;
+  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);
 
   svg {
     width: 16px;
@@ -27,12 +39,24 @@
       transparent
     );
   }
+
+  &:disabled {
+    cursor: default;
+    opacity: 0.45;
+    pointer-events: none;
+  }
 }
 
 @media (hover: hover) and (pointer: fine) {
-  .popup-close-button.icon-btn:hover:not(:disabled) {
+  .popup-close-button:hover:not(:disabled) {
     border-color: var(--bf-appearance-token-border-subtle);
     background: var(--bf-appearance-token-element-bg-subtle);
     color: var(--bf-appearance-token-color-text-primary);
   }
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .popup-close-button {
+    transition: none;
+  }
+}
diff --git a/src/web-ui/src/component-library/components/PopupCloseButton/PopupCloseButton.tsx b/src/web-ui/src/component-library/components/PopupCloseButton/PopupCloseButton.tsx
index 21dce45177..29fb1dd15b 100644
--- a/src/web-ui/src/component-library/components/PopupCloseButton/PopupCloseButton.tsx
+++ b/src/web-ui/src/component-library/components/PopupCloseButton/PopupCloseButton.tsx
@@ -1,15 +1,16 @@
 import React from 'react';
 import { X } from 'lucide-react';
-import type { IconButtonProps } from '../IconButton';
 import { Tooltip } from '../Tooltip';
-import '../IconButton/IconButton.scss';
 import './PopupCloseButton.scss';
 
 export interface PopupCloseButtonProps extends Omit<
-  IconButtonProps,
-  'children' | 'isLoading' | 'shape' | 'size' | 'type' | 'variant'
+  React.ButtonHTMLAttributes<HTMLButtonElement>,
+  'children' | 'size' | 'type'
 > {
   'aria-label': string;
+  tooltip?: React.ReactNode;
+  tooltipPlacement?: 'top' | 'bottom' | 'left' | 'right';
+  tooltipFollowCursor?: boolean;
 }
 
 /**
@@ -37,9 +38,6 @@ export const PopupCloseButton = React.forwardRef<
       type="button"
       disabled={disabled}
       className={[
-        'icon-btn',
-        'icon-btn--medium',
-        'icon-btn--ghost',
         'popup-close-button',
         className,
       ].filter(Boolean).join(' ')}
diff --git a/src/web-ui/src/component-library/components/Tabs/Tabs.scss b/src/web-ui/src/component-library/components/Tabs/Tabs.scss
deleted file mode 100644
index 7507b4d05a..0000000000
--- a/src/web-ui/src/component-library/components/Tabs/Tabs.scss
+++ /dev/null
@@ -1,336 +0,0 @@
-/**
- * Tabs component styles
- */
-@use '../../styles/tokens.scss' as tokens;
-
-.bitfun-tabs {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-
-  &__nav {
-    position: relative;
-    display: flex;
-    align-items: center;
-    flex-shrink: 0;
-  }
-
-  &__nav-list {
-    display: flex;
-    gap: 4px;
-    flex: 1;
-  }
-
-  &__tab {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: 6px;
-    padding: tokens.$size-gap-2 tokens.$size-gap-3;
-    font-size: var(--bf-appearance-token-font-size-sm);
-    font-weight: tokens.$font-weight-medium;
-    color: var(--bf-appearance-token-color-text-secondary);
-    cursor: pointer;
-    transition:
-      background-color var(--bf-appearance-token-motion-fast) ease,
-      border-color var(--bf-appearance-token-motion-fast) ease,
-      color var(--bf-appearance-token-motion-fast) ease;
-    user-select: none;
-    position: relative;
-    background: transparent;
-    border: none;
-    white-space: nowrap;
-
-    &--active {
-      color: var(--bf-appearance-token-color-accent-500);
-    }
-
-    &--disabled {
-      opacity: tokens.$opacity-disabled;
-      cursor: default;
-    }
-
-    &-button {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      gap: 6px;
-      min-width: 0;
-      padding: tokens.$size-gap-2 tokens.$size-gap-3;
-      border: 0;
-      border-radius: inherit;
-      background: transparent;
-      color: inherit;
-      font: inherit;
-      cursor: inherit;
-      outline: none;
-
-      &:focus-visible {
-        outline: 2px solid color-mix(in srgb, var(--bf-appearance-token-color-accent-500) 50%, transparent);
-        outline-offset: -2px;
-      }
-    }
-
-    &-icon {
-      display: flex;
-      align-items: center;
-      flex-shrink: 0;
-
-      svg {
-        width: 16px;
-        height: 16px;
-      }
-    }
-
-    &-label {
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-
-    &-close {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 16px;
-      height: 16px;
-      margin-left: 4px;
-      padding: 0;
-      border: 0;
-      border-radius: var(--bf-appearance-token-size-radius-sm);
-      background: transparent;
-      color: inherit;
-      font-size: 18px;
-      line-height: 1;
-      cursor: pointer;
-      transform: scale(1);
-      transition:
-        background-color var(--bf-appearance-token-motion-fast) ease,
-        color var(--bf-appearance-token-motion-fast) ease,
-        transform var(--bf-appearance-token-motion-fast) var(--bf-appearance-token-easing-standard);
-      opacity: 1;
-
-    }
-  }
-
-  &__content {
-    width: 100%;
-  }
-
-  &__content-view {
-    width: 100%;
-  }
-
-  &--stretch {
-    .bitfun-tabs__tab {
-      flex: 1;
-
-      &-button {
-        flex: 1;
-      }
-    }
-  }
-
-  &--line {
-    .bitfun-tabs__nav {
-      border-bottom: 1px solid var(--bf-appearance-token-border-base);
-    }
-
-    .bitfun-tabs__tab {
-      border-bottom: 2px solid transparent;
-      margin-bottom: -1px;
-      border-radius: 0;
-
-      &--active {
-        color: var(--bf-appearance-token-color-accent-500);
-        border-bottom-color: var(--bf-appearance-token-color-accent-500);
-      }
-
-      .bitfun-tabs__tab-close {
-        opacity: 0;
-        width: 0;
-        margin-left: 0;
-        overflow: hidden;
-      }
-
-    }
-  }
-
-  &--card {
-    .bitfun-tabs__nav {
-      background: linear-gradient(135deg,
-        var(--bf-appearance-token-element-bg-base) 0%,
-        var(--bf-appearance-token-element-bg-soft) 100%);
-      border: 1px solid var(--bf-appearance-token-border-base);
-      border-radius: tokens.$size-radius-base;
-      padding: tokens.$size-gap-1;
-      backdrop-filter: tokens.$blur-base;
-      -webkit-backdrop-filter: tokens.$blur-base;
-    }
-
-    .bitfun-tabs__tab {
-      border-radius: tokens.$size-radius-sm;
-
-      &--active {
-        background: linear-gradient(135deg,
-          var(--bf-appearance-token-element-bg-soft) 0%,
-          var(--bf-appearance-token-element-bg-soft) 50%,
-          var(--bf-appearance-token-element-bg-base) 100%);
-        border: 1px solid var(--bf-appearance-token-color-overlay-white-08);
-        backdrop-filter: tokens.$blur-base;
-        -webkit-backdrop-filter: tokens.$blur-base;
-        box-shadow:
-          0 2px 4px var(--bf-appearance-token-color-overlay-black-12),
-          inset 0 1px 0 var(--bf-appearance-token-color-overlay-white-08);
-        color: var(--bf-appearance-token-color-text-primary);
-        overflow: hidden;
-      }
-
-    }
-  }
-
-  &--pill {
-    .bitfun-tabs__tab {
-      border-radius: tokens.$size-radius-full;
-
-      &-button {
-        padding: 6px 16px;
-      }
-
-      &--active {
-        background: linear-gradient(135deg,
-          color-mix(in srgb, var(--bf-appearance-token-color-accent-500) 90%, transparent) 0%,
-          color-mix(in srgb, var(--bf-appearance-token-color-accent-600) 92%, var(--bf-appearance-token-color-static-black)) 100%);
-        color: var(--bf-appearance-token-color-static-white);
-        box-shadow: 0 4px 12px color-mix(in srgb, var(--bf-appearance-token-color-accent-500) 30%, transparent);
-      }
-    }
-  }
-
-  &--small {
-    .bitfun-tabs__tab {
-      font-size: 12px;
-
-      &-button {
-        padding: 6px 12px;
-      }
-    }
-  }
-
-  &--large {
-    .bitfun-tabs__tab {
-      font-size: 16px;
-
-      &-button {
-        padding: 10px 20px;
-      }
-    }
-  }
-
-  &--variant-purple {
-    &.bitfun-tabs--line {
-      .bitfun-tabs__nav {
-        border-bottom-color: var(--bf-appearance-token-color-purple-200);
-      }
-
-      .bitfun-tabs__tab--active {
-        color: var(--bf-appearance-token-color-purple-500);
-        border-bottom-color: var(--bf-appearance-token-color-purple-500);
-      }
-    }
-
-    &.bitfun-tabs--card {
-      .bitfun-tabs__tab--active {
-        background: linear-gradient(135deg,
-          var(--bf-appearance-token-color-purple-200) 0%,
-          color-mix(in srgb, var(--bf-appearance-token-color-purple-500) 40%, transparent) 100%);
-        box-shadow: 0 2px 8px color-mix(in srgb, var(--bf-appearance-token-color-purple-500) 20%, transparent);
-      }
-    }
-
-    &.bitfun-tabs--pill {
-      .bitfun-tabs__tab--active {
-        background: linear-gradient(135deg,
-          color-mix(in srgb, var(--bf-appearance-token-color-purple-500) 90%, transparent) 0%,
-          color-mix(in srgb, var(--bf-appearance-token-color-purple-600) 90%, transparent) 100%);
-        box-shadow: 0 4px 12px color-mix(in srgb, var(--bf-appearance-token-color-purple-500) 30%, transparent);
-      }
-    }
-  }
-
-  &--variant-mixed {
-    &.bitfun-tabs--line {
-      .bitfun-tabs__nav {
-        border-bottom: 1px solid transparent;
-        background: linear-gradient(90deg,
-          var(--bf-appearance-token-color-accent-200) 0%,
-          var(--bf-appearance-token-color-purple-200) 100%);
-      }
-
-      .bitfun-tabs__tab--active {
-        background: linear-gradient(135deg,
-          var(--bf-appearance-token-color-accent-200) 0%,
-          var(--bf-appearance-token-color-purple-200) 100%);
-        -webkit-background-clip: text;
-        -webkit-text-fill-color: transparent;
-        background-clip: text;
-        border-bottom-color: color-mix(in srgb, var(--bf-appearance-token-color-purple-500) 40%, transparent);
-      }
-    }
-
-    &.bitfun-tabs--card {
-      .bitfun-tabs__tab--active {
-        background: linear-gradient(135deg,
-          var(--bf-appearance-token-color-accent-200) 0%,
-          var(--bf-appearance-token-color-purple-200) 100%);
-        box-shadow:
-          0 2px 8px var(--bf-appearance-token-color-accent-200),
-          0 2px 8px var(--bf-appearance-token-color-purple-200);
-      }
-    }
-
-    &.bitfun-tabs--pill {
-      .bitfun-tabs__tab--active {
-        background: linear-gradient(135deg,
-          var(--bf-appearance-token-color-accent-600) 0%,
-          var(--bf-appearance-token-color-purple-600) 100%);
-        box-shadow:
-          0 4px 12px color-mix(in srgb, var(--bf-appearance-token-color-accent-500) 20%, transparent),
-          0 4px 12px color-mix(in srgb, var(--bf-appearance-token-color-purple-500) 20%, transparent);
-      }
-    }
-  }
-}
-
-.bitfun-tab-pane {
-  width: 100%;
-}
-
-@media (hover: hover) and (pointer: fine) {
-  .bitfun-tabs__tab:not(.bitfun-tabs__tab--disabled):not(.bitfun-tabs__tab--active):hover {
-    color: var(--bf-appearance-token-color-text-primary);
-    background: var(--bf-appearance-token-element-bg-subtle);
-  }
-
-  .bitfun-tabs--card
-    .bitfun-tabs__tab:not(.bitfun-tabs__tab--disabled):not(.bitfun-tabs__tab--active):hover {
-    background: var(--bf-appearance-token-element-bg-medium);
-  }
-
-  .bitfun-tabs--line .bitfun-tabs__tab:hover .bitfun-tabs__tab-close {
-    opacity: 1;
-    width: 16px;
-    margin-left: 4px;
-  }
-
-  .bitfun-tabs__tab-close:hover {
-    background: color-mix(in srgb, var(--bf-appearance-token-color-error) 20%, transparent);
-    color: var(--bf-appearance-token-color-error);
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .bitfun-tabs__tab-close:active {
-    transform: none;
-  }
-}
diff --git a/src/web-ui/src/component-library/components/Tabs/Tabs.test.tsx b/src/web-ui/src/component-library/components/Tabs/Tabs.test.tsx
deleted file mode 100644
index 4b5bdd1835..0000000000
--- a/src/web-ui/src/component-library/components/Tabs/Tabs.test.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-// @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 { recordInteractionModality } from '@/shared/utils/motionPreference';
-import { Tabs, TabPane } from './Tabs';
-
-globalThis.IS_REACT_ACT_ENVIRONMENT = true;
-
-describe('Tabs view transitions', () => {
-  let container: HTMLDivElement;
-  let root: Root;
-
-  beforeEach(() => {
-    vi.useFakeTimers();
-    vi.stubGlobal('requestAnimationFrame', (callback: FrameRequestCallback) => (
-      window.setTimeout(() => callback(performance.now()), 16)
-    ));
-    vi.stubGlobal('cancelAnimationFrame', (handle: number) => window.clearTimeout(handle));
-    recordInteractionModality('programmatic');
-    container = document.createElement('div');
-    document.body.appendChild(container);
-    root = createRoot(container);
-  });
-
-  afterEach(() => {
-    act(() => root.unmount());
-    container.remove();
-    recordInteractionModality('programmatic');
-    vi.unstubAllGlobals();
-    vi.useRealTimers();
-  });
-
-  const renderTabs = () => {
-    root.render(
-      <Tabs defaultActiveKey="first">
-        <TabPane tabKey="first" label="First"><div data-testid="first-pane" /></TabPane>
-        <TabPane tabKey="second" label="Second"><div data-testid="second-pane" /></TabPane>
-      </Tabs>,
-    );
-  };
-
-  it('retains the outgoing panel for a pointer-selected tab', () => {
-    act(renderTabs);
-    const secondTab = container.querySelectorAll<HTMLButtonElement>('[role="tab"]')[1];
-    recordInteractionModality('pointer');
-    act(() => secondTab.click());
-
-    expect(container.querySelector('[data-testid="first-pane"]')).not.toBeNull();
-    expect(container.querySelector('[data-testid="second-pane"]')).not.toBeNull();
-    expect(
-      container.querySelector('.bitfun-view-transition-boundary__view--outgoing')?.hasAttribute('inert'),
-    ).toBe(true);
-  });
-
-  it('switches a keyboard-selected tab without retaining the outgoing panel', () => {
-    act(renderTabs);
-    const firstTab = container.querySelectorAll<HTMLButtonElement>('[role="tab"]')[0];
-    recordInteractionModality('keyboard');
-    act(() => {
-      firstTab.dispatchEvent(new KeyboardEvent('keydown', {
-        bubbles: true,
-        key: 'ArrowRight',
-      }));
-    });
-
-    expect(container.querySelector('[data-testid="first-pane"]')).toBeNull();
-    expect(container.querySelector('[data-testid="second-pane"]')).not.toBeNull();
-    expect(container.querySelectorAll('.bitfun-view-transition-boundary__view')).toHaveLength(1);
-  });
-});
diff --git a/src/web-ui/src/component-library/components/Tabs/Tabs.tsx b/src/web-ui/src/component-library/components/Tabs/Tabs.tsx
deleted file mode 100644
index f00aeede6a..0000000000
--- a/src/web-ui/src/component-library/components/Tabs/Tabs.tsx
+++ /dev/null
@@ -1,255 +0,0 @@
-import React, {
-  useState,
-  createContext,
-  useContext,
-  useMemo,
-  useId,
-  useRef,
-  useLayoutEffect,
-} from 'react';
-import { getInteractionMotion, type InteractionMotion } from '@/shared/utils/motionPreference';
-import { ViewTransitionBoundary } from '../ViewTransitionBoundary';
-import './Tabs.scss';
-
-export interface TabItem {
-  key: string;
-  label: React.ReactNode;
-  icon?: React.ReactNode;
-  disabled?: boolean;
-  closable?: boolean;
-  closeAriaLabel?: string;
-}
-
-export interface TabsProps {
-  activeKey?: string;
-  defaultActiveKey?: string;
-  onChange?: (key: string) => void;
-  onTabClose?: (key: string) => void;
-  type?: 'line' | 'card' | 'pill';
-  size?: 'small' | 'medium' | 'large';
-  stretch?: boolean;
-  children?: React.ReactNode;
-  className?: string;
-  style?: React.CSSProperties;
-}
-
-export interface TabPaneProps {
-  tabKey: string;
-  label: React.ReactNode;
-  icon?: React.ReactNode;
-  disabled?: boolean;
-  closable?: boolean;
-  closeAriaLabel?: string;
-  children?: React.ReactNode;
-  className?: string;
-}
-
-interface TabsContextValue {
-  activeKey: string;
-  onChange: (key: string) => void;
-}
-
-const TabsContext = createContext<TabsContextValue | undefined>(undefined);
-
-export const TabPane: React.FC<TabPaneProps> = ({ children, className = '' }) => {
-  const context = useContext(TabsContext);
-  if (!context) return null;
-
-  return <div className={`bitfun-tab-pane ${className}`} data-bf-component="tabs" data-bf-part="pane">{children}</div>;
-};
-
-TabPane.displayName = 'TabPane';
-
-export const Tabs: React.FC<TabsProps> = ({
-  activeKey: controlledActiveKey,
-  defaultActiveKey,
-  onChange,
-  onTabClose,
-  type = 'line',
-  size = 'medium',
-  stretch = false,
-  children,
-  className = '',
-  style,
-}) => {
-  const generatedId = useId();
-  const transitionIntentRef = useRef<{
-    key: string;
-    motion: InteractionMotion;
-    sourceKey: string;
-  } | null>(null);
-  const [internalActiveKey, setInternalActiveKey] = useState<string>(
-    defaultActiveKey || ''
-  );
-
-  const activeKey = controlledActiveKey !== undefined ? controlledActiveKey : internalActiveKey;
-
-  const { tabs, panes } = useMemo(() => {
-    const nextTabs: TabItem[] = [];
-    const nextPanes: { [key: string]: React.ReactNode } = {};
-
-    React.Children.forEach(children, (child) => {
-      if (React.isValidElement<TabPaneProps>(child) && child.type === TabPane) {
-        const { tabKey, label, icon, disabled, closable, closeAriaLabel } = child.props;
-        nextTabs.push({ key: tabKey, label, icon, disabled, closable, closeAriaLabel });
-        nextPanes[tabKey] = child;
-      }
-    });
-
-    return { tabs: nextTabs, panes: nextPanes };
-  }, [children]);
-
-  React.useEffect(() => {
-    if (!activeKey && tabs.length > 0) {
-      const firstKey = tabs[0].key;
-      if (controlledActiveKey === undefined) {
-        setInternalActiveKey(firstKey);
-      }
-    }
-  }, [activeKey, controlledActiveKey, tabs]);
-
-  const handleTabClick = (
-    key: string,
-    disabled?: boolean,
-    motion: InteractionMotion = getInteractionMotion(),
-  ) => {
-    if (disabled) return;
-    transitionIntentRef.current = key === activeKey
-      ? null
-      : { key, motion, sourceKey: activeKey };
-    
-    if (controlledActiveKey === undefined) {
-      setInternalActiveKey(key);
-    }
-    onChange?.(key);
-  };
-
-  const handleTabClose = (e: React.MouseEvent, key: string) => {
-    e.stopPropagation();
-    onTabClose?.(key);
-  };
-
-  const getTabId = (key: string) => `${generatedId}-tab-${key}`;
-  const getPanelId = (key: string) => `${generatedId}-panel-${key}`;
-
-  const handleTabKeyDown = (event: React.KeyboardEvent, currentIndex: number) => {
-    const enabledTabs = tabs
-      .map((tab, index) => ({ tab, index }))
-      .filter(({ tab }) => !tab.disabled);
-    const enabledIndex = enabledTabs.findIndex(({ index }) => index === currentIndex);
-    let target: (typeof enabledTabs)[number] | undefined;
-
-    if (event.key === 'ArrowRight') {
-      target = enabledTabs[(enabledIndex + 1) % enabledTabs.length];
-    } else if (event.key === 'ArrowLeft') {
-      target = enabledTabs[(enabledIndex - 1 + enabledTabs.length) % enabledTabs.length];
-    } else if (event.key === 'Home') {
-      target = enabledTabs[0];
-    } else if (event.key === 'End') {
-      target = enabledTabs[enabledTabs.length - 1];
-    } else if (event.key === 'Enter' || event.key === ' ') {
-      event.preventDefault();
-      handleTabClick(tabs[currentIndex].key, tabs[currentIndex].disabled, 'instant');
-      return;
-    } else {
-      return;
-    }
-
-    if (!target) return;
-    event.preventDefault();
-    handleTabClick(target.tab.key, target.tab.disabled, 'instant');
-    document.getElementById(getTabId(target.tab.key))?.focus();
-  };
-
-  const containerClass = [
-    'bitfun-tabs',
-    `bitfun-tabs--${type}`,
-    `bitfun-tabs--${size}`,
-    stretch && 'bitfun-tabs--stretch',
-    className
-  ].filter(Boolean).join(' ');
-
-  const contextValue: TabsContextValue = {
-    activeKey,
-    onChange: handleTabClick,
-  };
-
-  const transitionIntent = transitionIntentRef.current;
-  const shouldAnimatePanel = transitionIntent?.key === activeKey
-    && transitionIntent.sourceKey !== activeKey
-    && transitionIntent.motion === 'pointer';
-
-  useLayoutEffect(() => {
-    const pendingIntent = transitionIntentRef.current;
-    if (pendingIntent && pendingIntent.sourceKey !== activeKey) {
-      transitionIntentRef.current = null;
-    }
-  }, [activeKey]);
-
-  return (
-    <TabsContext.Provider value={contextValue}>
-      <div className={containerClass} style={style} data-bf-component="tabs" data-bf-part="root" data-bf-variant={type} data-bf-size={size} data-bf-state={stretch ? 'stretch' : undefined}>
-        <div className="bitfun-tabs__nav" data-bf-component="tabs" data-bf-part="nav">
-          <div className="bitfun-tabs__nav-list" role="tablist" data-bf-component="tabs" data-bf-part="navList">
-            {tabs.map((tab, index) => (
-              <div
-                key={tab.key}
-                className={[
-                  'bitfun-tabs__tab',
-                  activeKey === tab.key && 'bitfun-tabs__tab--active',
-                  tab.disabled && 'bitfun-tabs__tab--disabled',
-                ].filter(Boolean).join(' ')}
-               data-bf-component="tabs" data-bf-part="tab" data-bf-state={[activeKey === tab.key && 'active', tab.disabled && 'disabled'].filter(Boolean).join(' ') || undefined}>
-                <button
-                  id={getTabId(tab.key)}
-                  className="bitfun-tabs__tab-button"
-                  type="button"
-                  onClick={() => handleTabClick(tab.key, tab.disabled)}
-                  onKeyDown={(event) => handleTabKeyDown(event, index)}
-                  role="tab"
-                  tabIndex={activeKey === tab.key && !tab.disabled ? 0 : -1}
-                  aria-selected={activeKey === tab.key}
-                  aria-disabled={tab.disabled || undefined}
-                  aria-controls={getPanelId(tab.key)}
-                  disabled={tab.disabled}
-                >
-                  {tab.icon && <span className="bitfun-tabs__tab-icon" data-bf-component="tabs" data-bf-part="icon">{tab.icon}</span>}
-                  <span className="bitfun-tabs__tab-label" data-bf-component="tabs" data-bf-part="label">{tab.label}</span>
-                </button>
-                {tab.closable && (
-                  <button
-                    className="bitfun-tabs__tab-close"
-                    type="button"
-                    onClick={(e) => handleTabClose(e, tab.key)}
-                    aria-label={tab.closeAriaLabel}
-                    data-bf-component="tabs"
-                    data-bf-part="close"
-                  >
-                    ×
-                  </button>
-                )}
-              </div>
-            ))}
-          </div>
-          {type === 'line' && <div className="bitfun-tabs__ink-bar" data-bf-component="tabs" data-bf-part="inkBar" />}
-        </div>
-        <ViewTransitionBoundary
-          viewKey={activeKey || '__empty-tab__'}
-          animate={shouldAnimatePanel}
-          id={getPanelId(activeKey)}
-          className="bitfun-tabs__content"
-          viewClassName="bitfun-tabs__content-view"
-          role="tabpanel"
-          aria-labelledby={getTabId(activeKey)}
-          tabIndex={0}
-          data-bf-component="tabs"
-          data-bf-part="content"
-        >
-          {panes[activeKey]}
-        </ViewTransitionBoundary>
-      </div>
-    </TabsContext.Provider>
-  );
-};
-
-Tabs.displayName = 'Tabs';
diff --git a/src/web-ui/src/component-library/components/Tabs/appearance.ts b/src/web-ui/src/component-library/components/Tabs/appearance.ts
deleted file mode 100644
index 57fcd47728..0000000000
--- a/src/web-ui/src/component-library/components/Tabs/appearance.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import type { AppearanceSurfaceDescriptor } from '@/infrastructure/appearance/types';
-export const tabsAppearanceDescriptor: AppearanceSurfaceDescriptor = {
-  id: 'tabs', parts: [{ id: 'root' }, { id: 'nav' }, { id: 'navList' }, { id: 'tab' }, { id: 'icon' }, { id: 'label' }, { id: 'close' }, { id: 'inkBar' }, { id: 'content' }, { id: 'pane' }],
-  facets: [{ id: 'variant', attribute: 'data-bf-variant', values: ['line', 'card', 'pill'] }, { id: 'size', attribute: 'data-bf-size', values: ['small', 'medium', 'large'] }],
-  states: [{ id: 'hover', selector: { kind: 'self', suffix: ':hover' } }, { id: 'active', selector: { kind: 'self', suffix: '[data-bf-state~="active"]' } }, { id: 'disabled', selector: { kind: 'self', suffix: '[data-bf-state~="disabled"]' } }, { id: 'stretch', selector: { kind: 'self', suffix: '[data-bf-state~="stretch"]' } }],
-};
diff --git a/src/web-ui/src/component-library/components/Tabs/index.ts b/src/web-ui/src/component-library/components/Tabs/index.ts
deleted file mode 100644
index 6d4405a814..0000000000
--- a/src/web-ui/src/component-library/components/Tabs/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { Tabs, TabPane } from './Tabs';
-export type { TabsProps, TabPaneProps, TabItem } from './Tabs';
\ No newline at end of file
diff --git a/src/web-ui/src/component-library/components/Tag/Tag.scss b/src/web-ui/src/component-library/components/Tag/Tag.scss
deleted file mode 100644
index e5b8cd33b4..0000000000
--- a/src/web-ui/src/component-library/components/Tag/Tag.scss
+++ /dev/null
@@ -1,160 +0,0 @@
-@use '../../styles/tokens.scss' as tokens;
-
-.tag {
-  display: inline-flex;
-  align-items: center;
-  gap: tokens.$size-gap-2;
-  padding: tokens.$size-gap-1 tokens.$size-gap-3;
-  border-radius: tokens.$size-radius-sm;
-  font-weight: tokens.$font-weight-medium;
-  border: 1px solid transparent;
-  transition:
-    background-color var(--bf-appearance-token-motion-fast) ease,
-    border-color var(--bf-appearance-token-motion-fast) ease,
-    color var(--bf-appearance-token-motion-fast) ease;
-  position: relative;
-
-  &--small {
-    font-size: var(--bf-appearance-token-font-size-xs);
-    padding: 2px tokens.$size-gap-2;
-    gap: tokens.$size-gap-1;
-  }
-
-  &--medium {
-    font-size: var(--bf-appearance-token-font-size-xs);
-    padding: tokens.$size-gap-1 tokens.$size-gap-3;
-  }
-
-  &--large {
-    font-size: var(--bf-appearance-token-font-size-sm);
-    padding: tokens.$size-gap-2 tokens.$size-gap-4;
-  }
-
-  &--blue {
-    background: var(--bf-appearance-token-color-accent-200);
-    color: var(--bf-appearance-token-color-text-secondary);
-
-    &:hover {
-      background: var(--bf-appearance-token-color-accent-300);
-    }
-  }
-
-  &--green {
-    background: color-mix(in srgb, var(--bf-appearance-token-color-success) 14%, transparent);
-    color: var(--bf-appearance-token-color-success);
-
-    &:hover {
-      background: color-mix(in srgb, var(--bf-appearance-token-color-success) 20%, transparent);
-    }
-  }
-
-  &--red {
-    background: color-mix(in srgb, var(--bf-appearance-token-color-error) 14%, transparent);
-    color: var(--bf-appearance-token-color-error);
-
-    &:hover {
-      background: color-mix(in srgb, var(--bf-appearance-token-color-error) 20%, transparent);
-    }
-  }
-
-  &--yellow {
-    background: color-mix(in srgb, var(--bf-appearance-token-color-warning) 14%, transparent);
-    color: var(--bf-appearance-token-color-warning);
-
-    &:hover {
-      background: color-mix(in srgb, var(--bf-appearance-token-color-warning) 20%, transparent);
-    }
-  }
-
-  &--purple {
-    background: var(--bf-appearance-token-color-purple-200);
-    color: var(--bf-appearance-token-color-purple-500);
-
-    &:hover {
-      background: color-mix(in srgb, var(--bf-appearance-token-color-purple-500) 20%, transparent);
-    }
-  }
-
-  &--gray {
-    background: var(--bf-appearance-token-element-bg-medium);
-    color: var(--bf-appearance-token-color-text-secondary);
-
-    &:hover {
-      background: var(--bf-appearance-token-element-bg-strong);
-      color: var(--bf-appearance-token-color-text-primary);
-    }
-  }
-
-  &--rounded {
-    border-radius: tokens.$size-radius-full;
-  }
-
-  &__content {
-    line-height: 1;
-  }
-
-  &__close {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 14px;
-    height: 14px;
-    padding: 0;
-    background: transparent;
-    border: none;
-    border-radius: 50%;
-    cursor: pointer;
-    transform: scale(1);
-    color: currentColor;
-    transition:
-      background-color var(--bf-appearance-token-motion-fast) ease,
-      color var(--bf-appearance-token-motion-fast) ease,
-      transform var(--bf-appearance-token-motion-fast) var(--bf-appearance-token-easing-standard);
-
-    &:hover {
-      background: var(--bf-appearance-token-color-overlay-black-15);
-    }
-
-    svg {
-      width: 10px;
-      height: 10px;
-    }
-  }
-}
-
-@media (hover: hover) and (pointer: fine) {
-  .tag--blue:hover {
-    background: var(--bf-appearance-token-color-accent-300);
-  }
-
-  .tag--green:hover {
-    background: color-mix(in srgb, var(--bf-appearance-token-color-success) 20%, transparent);
-  }
-
-  .tag--red:hover {
-    background: color-mix(in srgb, var(--bf-appearance-token-color-error) 20%, transparent);
-  }
-
-  .tag--yellow:hover {
-    background: color-mix(in srgb, var(--bf-appearance-token-color-warning) 20%, transparent);
-  }
-
-  .tag--purple:hover {
-    background: color-mix(in srgb, var(--bf-appearance-token-color-purple-500) 20%, transparent);
-  }
-
-  .tag--gray:hover {
-    background: var(--bf-appearance-token-element-bg-strong);
-    color: var(--bf-appearance-token-color-text-primary);
-  }
-
-  .tag__close:hover {
-    background: var(--bf-appearance-token-color-overlay-black-15);
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .tag__close:active {
-    transform: none;
-  }
-}
diff --git a/src/web-ui/src/component-library/components/Tag/Tag.tsx b/src/web-ui/src/component-library/components/Tag/Tag.tsx
deleted file mode 100644
index 774c3d90d1..0000000000
--- a/src/web-ui/src/component-library/components/Tag/Tag.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-/**
- * Tag component
- */
-
-import React from 'react';
-import './Tag.scss';
-
-export interface TagProps {
-  children: React.ReactNode;
-  color?: 'blue' | 'green' | 'red' | 'yellow' | 'purple' | 'gray';
-  size?: 'small' | 'medium' | 'large';
-  title?: string;
-  closable?: boolean;
-  onClose?: () => void;
-  closeAriaLabel?: string;
-  className?: string;
-  style?: React.CSSProperties;
-  rounded?: boolean;
-}
-
-export const Tag: React.FC<TagProps> = ({
-  children,
-  color = 'blue',
-  size = 'medium',
-  title,
-  closable = false,
-  onClose,
-  closeAriaLabel,
-  className = '',
-  style,
-  rounded = false,
-}) => {
-  const classNames = [
-    'tag',
-    `tag--${color}`,
-    `tag--${size}`,
-    rounded && 'tag--rounded',
-    className
-  ]
-    .filter(Boolean)
-    .join(' ');
-
-  return (
-    <span className={classNames} title={title} style={style} data-bf-component="tag" data-bf-part="root" data-bf-variant={color} data-bf-size={size} data-bf-state={rounded ? 'rounded' : undefined}>
-      <span className="tag__content" data-bf-component="tag" data-bf-part="content">{children}</span>
-      {closable && (
-        <button
-          type="button"
-          className="tag__close"
-          onClick={onClose}
-          aria-label={closeAriaLabel}
-         data-bf-component="tag" data-bf-part="close">
-          ×
-        </button>
-      )}
-    </span>
-  );
-};
diff --git a/src/web-ui/src/component-library/components/Tag/appearance.ts b/src/web-ui/src/component-library/components/Tag/appearance.ts
deleted file mode 100644
index 7f221fc5f7..0000000000
--- a/src/web-ui/src/component-library/components/Tag/appearance.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import type { AppearanceSurfaceDescriptor } from '@/infrastructure/appearance/types';
-export const tagAppearanceDescriptor: AppearanceSurfaceDescriptor = {
-  id: 'tag', parts: [{ id: 'root' }, { id: 'content' }, { id: 'close' }],
-  facets: [{ id: 'variant', attribute: 'data-bf-variant', values: ['blue', 'green', 'red', 'yellow', 'purple', 'gray'] }, { id: 'size', attribute: 'data-bf-size', values: ['small', 'medium', 'large'] }],
-  states: [{ id: 'rounded', selector: { kind: 'self', suffix: '[data-bf-state~="rounded"]' } }, { id: 'hover', selector: { kind: 'self', suffix: ':hover' } }, { id: 'focusVisible', selector: { kind: 'self', suffix: ':focus-visible' } }],
-};
diff --git a/src/web-ui/src/component-library/components/Tag/index.ts b/src/web-ui/src/component-library/components/Tag/index.ts
deleted file mode 100644
index 569ac7a61e..0000000000
--- a/src/web-ui/src/component-library/components/Tag/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { Tag } from './Tag';
-export type { TagProps } from './Tag';
\ No newline at end of file
diff --git a/src/web-ui/src/component-library/components/Textarea/Textarea.scss b/src/web-ui/src/component-library/components/Textarea/Textarea.scss
deleted file mode 100644
index 9dee550048..0000000000
--- a/src/web-ui/src/component-library/components/Textarea/Textarea.scss
+++ /dev/null
@@ -1,174 +0,0 @@
-/**
- * Textarea component styles
- */
-.bitfun-textarea {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  width: 100%;
-
-  &__label {
-    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-primary);
-    line-height: 1.4;
-  }
-
-  &__required {
-    color: var(--bf-appearance-token-color-error);
-    margin-left: 4px;
-  }
-
-  &__wrapper {
-    position: relative;
-    width: 100%;
-    outline: none;
-  }
-
-  &:focus-within {
-    outline: none;
-  }
-
-  &__field {
-    width: 100%;
-    min-height: 100px;
-    padding: 12px 14px;
-    font-size: 14px;
-    line-height: 1.5;
-    color: var(--bf-appearance-token-color-text-primary);
-    background: var(--bf-appearance-token-element-bg-subtle);
-    border: 1.5px solid var(--bf-appearance-token-border-base);
-    border-radius: 4px;
-    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);
-    resize: vertical;
-    font-family: inherit;
-
-    &::placeholder {
-      color: var(--bf-appearance-token-color-text-muted);
-    }
-
-    &::selection {
-      border-radius: 2px;
-      background: var(--bf-appearance-token-color-accent-300);
-    }
-
-    &:hover:not(:disabled) {
-      border-color: var(--bf-appearance-token-border-medium);
-      background: var(--bf-appearance-token-element-bg-soft);
-    }
-
-    &:focus {
-      outline: none !important;
-      border-color: var(--bf-appearance-token-border-medium);
-      background: var(--bf-appearance-token-element-bg-subtle);
-    }
-
-    &:focus-visible {
-      outline: none !important;
-      outline-offset: 0 !important;
-    }
-
-    &:disabled {
-      opacity: var(--bf-appearance-token-opacity-disabled);
-      cursor: default;
-    }
-  }
-
-  &__footer {
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-start;
-    gap: 12px;
-    min-height: 18px;
-  }
-
-  &__hint-wrapper {
-    flex: 1;
-  }
-
-  &__hint {
-    font-size: 12px;
-    color: var(--bf-appearance-token-color-text-muted);
-    line-height: 1.4;
-  }
-
-  &__error-message {
-    font-size: 12px;
-    color: var(--bf-appearance-token-color-error);
-    line-height: 1.4;
-  }
-
-  &__count {
-    font-size: 12px;
-    color: var(--bf-appearance-token-color-text-muted);
-    line-height: 1.4;
-    white-space: nowrap;
-  }
-
-  &--error &__field {
-    border-color: var(--bf-appearance-token-color-error-border);
-
-    &:focus {
-      border-color: var(--bf-appearance-token-color-error-border);
-      background: var(--bf-appearance-token-element-bg-subtle);
-    }
-
-    &:focus-visible {
-      outline: none;
-    }
-  }
-
-  &--disabled {
-    opacity: 0.5;
-    cursor: default;
-  }
-
-  &--filled &__field {
-    background: var(--bf-appearance-token-element-bg-soft);
-    border-color: transparent;
-
-    &:hover:not(:disabled) {
-      background: var(--bf-appearance-token-element-bg-base);
-    }
-
-    &:focus {
-      background: var(--bf-appearance-token-element-bg-soft);
-      border-color: transparent;
-    }
-  }
-
-  &--outlined &__field {
-    background: transparent;
-    border-width: 1.5px;
-    border-color: var(--bf-appearance-token-border-subtle);
-
-    &:hover:not(:disabled) {
-      border-color: var(--bf-appearance-token-border-medium);
-      background: var(--bf-appearance-token-element-bg-subtle);
-    }
-
-    &:focus {
-      border-color: var(--bf-appearance-token-border-medium);
-      background: var(--bf-appearance-token-element-bg-subtle);
-    }
-  }
-}
-
-@media (hover: hover) and (pointer: fine) {
-  .bitfun-textarea__field:hover:not(:disabled) {
-    border-color: var(--bf-appearance-token-border-medium);
-    background: var(--bf-appearance-token-element-bg-soft);
-  }
-
-  .bitfun-textarea--filled .bitfun-textarea__field:hover:not(:disabled) {
-    background: var(--bf-appearance-token-element-bg-base);
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .bitfun-textarea__field {
-    transition-duration: var(--bf-appearance-token-motion-instant);
-  }
-}
diff --git a/src/web-ui/src/component-library/components/Textarea/Textarea.tsx b/src/web-ui/src/component-library/components/Textarea/Textarea.tsx
deleted file mode 100644
index 9ccb3a5d58..0000000000
--- a/src/web-ui/src/component-library/components/Textarea/Textarea.tsx
+++ /dev/null
@@ -1,153 +0,0 @@
-import React, { forwardRef, useRef, useImperativeHandle, useCallback, useId } from 'react';
-import { isImeOwnedKeyboardEvent } from '@/shared/utils/ime';
-import './Textarea.scss';
-
-export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
-  label?: string;
-  error?: boolean;
-  errorMessage?: string;
-  hint?: string;
-  autoResize?: boolean;
-  showCount?: boolean;
-  maxLength?: number;
-  variant?: 'default' | 'filled' | 'outlined';
-  className?: string;
-  'data-bf-component'?: string;
-  'data-bf-part'?: string;
-}
-
-export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
-  (
-    {
-      label,
-      error = false,
-      errorMessage,
-      hint,
-      autoResize = false,
-      showCount = false,
-      maxLength,
-      variant = 'default',
-      className = '',
-      value,
-      onChange,
-      onKeyDown,
-      onCompositionStart,
-      onCompositionEnd,
-      style,
-      'data-bf-component': rootAppearanceComponent = 'textarea',
-      'data-bf-part': rootAppearancePart = 'root',
-      ...props
-    },
-    ref
-  ) => {
-    const generatedId = useId();
-    const textareaId = props.id ?? `${generatedId}-textarea`;
-    const supportId = `${generatedId}-support`;
-    const textareaRef = useRef<HTMLTextAreaElement>(null);
-    const compositionActiveRef = useRef(false);
-    const [charCount, setCharCount] = React.useState(0);
-
-    useImperativeHandle(ref, () => textareaRef.current!);
-
-    const adjustHeight = useCallback(() => {
-      if (autoResize && textareaRef.current) {
-        textareaRef.current.style.height = 'auto';
-        textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;
-      }
-    }, [autoResize]);
-
-    React.useEffect(() => {
-      adjustHeight();
-    }, [value, adjustHeight]);
-
-    React.useEffect(() => {
-      const count = typeof value === 'string' ? value.length : 0;
-      setCharCount(count);
-    }, [value]);
-
-    const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-      const newValue = e.target.value;
-      setCharCount(newValue.length);
-      adjustHeight();
-      onChange?.(e);
-    };
-
-    const containerClass = [
-      'bitfun-textarea',
-      `bitfun-textarea--${variant}`,
-      error && 'bitfun-textarea--error',
-      props.disabled && 'bitfun-textarea--disabled',
-      className
-    ].filter(Boolean).join(' ');
-    const rootAppearanceProps: Record<string, string> = {};
-    rootAppearanceProps['data-bf-component'] = rootAppearanceComponent;
-    rootAppearanceProps['data-bf-part'] = rootAppearancePart;
-
-    return (
-      <div className={containerClass} data-bf-component="textarea" data-bf-part="root" data-bf-variant={variant} data-bf-state={[error && 'error', props.disabled && 'disabled', autoResize && 'autoResize'].filter(Boolean).join(' ') || undefined} {...rootAppearanceProps}>
-        {label && (
-          <label className="bitfun-textarea__label" data-bf-component="textarea" data-bf-part="label">
-            {label}
-            {props.required && <span className="bitfun-textarea__required" data-bf-component="textarea" data-bf-part="required">*</span>}
-          </label>
-        )}
-        <div className="bitfun-textarea__wrapper" data-bf-component="textarea" data-bf-part="wrapper">
-          <textarea
-            {...props}
-            ref={textareaRef}
-            id={textareaId}
-            className="bitfun-textarea__field"
-            value={value}
-            onChange={handleChange}
-            onKeyDown={(event) => {
-              if (
-                (event.key === 'Enter' || event.key === 'Escape')
-                && isImeOwnedKeyboardEvent(event, compositionActiveRef.current)
-              ) {
-                event.stopPropagation();
-                return;
-              }
-              onKeyDown?.(event);
-            }}
-            onCompositionStart={(event) => {
-              compositionActiveRef.current = true;
-              onCompositionStart?.(event);
-            }}
-            onCompositionEnd={(event) => {
-              compositionActiveRef.current = false;
-              onCompositionEnd?.(event);
-            }}
-            maxLength={maxLength}
-            aria-invalid={error || undefined}
-            aria-describedby={(error && errorMessage) || (!error && hint) || showCount
-              ? supportId
-              : props['aria-describedby']}
-            style={style}
-            {...props}
-            data-bf-component="textarea"
-            data-bf-part="field"
-          />
-        </div>
-        {(hint || errorMessage || showCount) && (
-          <div className="bitfun-textarea__footer" data-bf-component="textarea" data-bf-part="footer">
-            <div className="bitfun-textarea__hint-wrapper">
-              {error && errorMessage && (
-                <span className="bitfun-textarea__error-message" data-bf-component="textarea" data-bf-part="message">{errorMessage}</span>
-              )}
-              {!error && hint && (
-                <span className="bitfun-textarea__hint" data-bf-component="textarea" data-bf-part="message">{hint}</span>
-              )}
-            </div>
-            {showCount && (
-              <span className="bitfun-textarea__count" data-bf-component="textarea" data-bf-part="count">
-                {charCount}{maxLength && ` / ${maxLength}`}
-              </span>
-            )}
-          </div>
-        )}
-      </div>
-    );
-  }
-);
-
-Textarea.displayName = 'Textarea';
diff --git a/src/web-ui/src/component-library/components/Textarea/appearance.ts b/src/web-ui/src/component-library/components/Textarea/appearance.ts
deleted file mode 100644
index e1be5cc3c9..0000000000
--- a/src/web-ui/src/component-library/components/Textarea/appearance.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import type { AppearanceSurfaceDescriptor } from '@/infrastructure/appearance/types';
-export const textareaAppearanceDescriptor: AppearanceSurfaceDescriptor = {
-  id: 'textarea', parts: [{ id: 'root' }, { id: 'label' }, { id: 'required' }, { id: 'wrapper' }, { id: 'field' }, { id: 'footer' }, { id: 'message' }, { id: 'count' }],
-  facets: [{ id: 'variant', attribute: 'data-bf-variant', values: ['default', 'filled', 'outlined'] }],
-  states: [{ id: 'hover', selector: { kind: 'self', suffix: ':hover' } }, { id: 'focusWithin', selector: { kind: 'self', suffix: ':focus-within' } }, { id: 'disabled', selector: { kind: 'self', suffix: '[data-bf-state~="disabled"]' } }, { id: 'error', selector: { kind: 'self', suffix: '[data-bf-state~="error"]' } }, { id: 'autoResize', selector: { kind: 'self', suffix: '[data-bf-state~="autoResize"]' } }],
-};
diff --git a/src/web-ui/src/component-library/components/Textarea/index.ts b/src/web-ui/src/component-library/components/Textarea/index.ts
deleted file mode 100644
index 2590f4027e..0000000000
--- a/src/web-ui/src/component-library/components/Textarea/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { Textarea } from './Textarea';
-export type { TextareaProps } from './Textarea';
\ 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 72da731b17..9d8142a977 100644
--- a/src/web-ui/src/component-library/components/index.ts
+++ b/src/web-ui/src/component-library/components/index.ts
@@ -3,7 +3,7 @@
  * Export all previewable components here
  */
 
-export * from './IconButton';
+export { IconButton, type IconButtonProps } from '../compatibility/IconButton';
 export * from './PopupCloseButton';
 export * from './WindowControls';
 
@@ -11,20 +11,17 @@ export * from './PresenceBoundary';
 export * from './ViewTransitionBoundary';
 export * from './InputDialog';
 
-export * from './Alert';
+export { Alert, type AlertProps, type AlertTone } from '@bitfun/ui';
 
-export * from './NumberInput';
+export { NumberInput, type NumberInputProps } from '@bitfun/ui';
 export * from './Select';
-export * from './Checkbox';
-export * from './Textarea';
+export { Checkbox, type CheckboxProps, type CheckboxSize } from '@bitfun/ui';
+export { Textarea, type TextareaProps } from '@bitfun/ui';
 
 export * from './Tooltip';
 
-export * from './Tabs';
-
-export * from './Tag';
-export * from './Avatar';
-export * from './Empty';
+export { Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarSize } from '@bitfun/ui';
+export { Empty, type EmptyMediaSize, type EmptyProps } from '@bitfun/ui';
 export * from './Markdown';
 export * from './Card';
 export * from './ConfigPage';
diff --git a/src/web-ui/src/component-library/components/registry.tsx b/src/web-ui/src/component-library/components/registry.tsx
index 5759a09434..9a2fb1af70 100644
--- a/src/web-ui/src/component-library/components/registry.tsx
+++ b/src/web-ui/src/component-library/components/registry.tsx
@@ -1,19 +1,11 @@
 /* Component registry */
 import React from 'react';
 import type { ComponentCategory } from '../types';
-import { Button } from '@bitfun/ui';
-import { IconButton } from '@components/IconButton';
+import { Alert, Avatar, AvatarGroup, Button, Checkbox, IconButton, StatusPill, TabGroup, Textarea } from '@bitfun/ui';
 import { WindowControls } from '@components/WindowControls';
 import { Select } from '@components/Select';
-import { Checkbox } from '@components/Checkbox';
-import { Textarea } from '@components/Textarea';
 import { CubeLoading } from '@components/CubeLoading';
-import { Alert } from '@components/Alert';
 import { Tooltip } from '@components/Tooltip';
-import { Tabs, TabPane } from '@components/Tabs';
-import { Tag } from '@components/Tag';
-import { Avatar, AvatarGroup } from '@components/Avatar';
-import { Empty } from '@components/Empty';
 import { Markdown } from '@components/Markdown';
 import { CodeEditor } from '@components/CodeEditor';
 import { TodoWriteDisplay } from '@/flow_chat/tool-cards/TodoWriteDisplay';
@@ -88,21 +80,12 @@ export const componentRegistry: ComponentCategory[] = [
         component: () => (
           <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
             <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
-              <Tag color="blue">Blue</Tag>
-              <Tag color="green">Green</Tag>
-              <Tag color="red">Red</Tag>
-              <Tag color="yellow">Yellow</Tag>
-              <Tag color="purple">Purple</Tag>
-              <Tag color="gray">Gray</Tag>
-            </div>
-            <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
-              <Tag size="small">Small</Tag>
-              <Tag size="medium">Medium</Tag>
-              <Tag size="large">Large</Tag>
-            </div>
-            <div style={{ display: 'flex', gap: '8px' }}>
-              <Tag color="blue" rounded>Rounded</Tag>
-              <Tag color="green" closable onClose={() => alert('Closed!')}>Closable</Tag>
+              <StatusPill tone="info">Info</StatusPill>
+              <StatusPill tone="success">Success</StatusPill>
+              <StatusPill tone="danger">Danger</StatusPill>
+              <StatusPill tone="warning">Warning</StatusPill>
+              <StatusPill tone="accent">Accent</StatusPill>
+              <StatusPill tone="neutral">Neutral</StatusPill>
             </div>
           </div>
         ),
@@ -114,39 +97,28 @@ export const componentRegistry: ComponentCategory[] = [
         category: 'basic',
         component: () => (
           <div style={{ display: 'flex', gap: '12px', alignItems: 'center', flexWrap: 'wrap' }}>
-            <IconButton variant="default" aria-label="Search">
+            <IconButton variant="quiet" aria-label="Search" icon={
               <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
                 <circle cx="7" cy="7" r="5" stroke="currentColor" strokeWidth="2"/>
                 <path d="M11 11L15 15" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
               </svg>
-            </IconButton>
-            <IconButton variant="primary" aria-label="Star">
+            } />
+            <IconButton variant="primary" aria-label="Star" icon={
               <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
                 <path d="M8 2L10 6L14 6.5L11 9.5L12 14L8 11.5L4 14L5 9.5L2 6.5L6 6L8 2Z" stroke="currentColor" strokeWidth="2" strokeLinejoin="round"/>
               </svg>
-            </IconButton>
-            <IconButton variant="ghost" aria-label="Settings">
+            } />
+            <IconButton variant="fill" aria-label="Settings" icon={
               <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
                 <circle cx="8" cy="8" r="3" stroke="currentColor" strokeWidth="2"/>
                 <path d="M8 1V3M8 13V15M15 8H13M3 8H1M13.5 2.5L12 4M4 12L2.5 13.5M13.5 13.5L12 12M4 4L2.5 2.5" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
               </svg>
-            </IconButton>
-            <IconButton variant="danger" aria-label="Delete">
+            } />
+            <IconButton tone="danger" aria-label="Delete" icon={
               <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
                 <path d="M3 4H13M5 4V3C5 2.5 5.5 2 6 2H10C10.5 2 11 2.5 11 3V4M6 7V12M10 7V12M4 4L5 14H11L12 4" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
               </svg>
-            </IconButton>
-            <IconButton variant="success" aria-label="Check">
-              <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
-                <path d="M3 8L6 11L13 4" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-              </svg>
-            </IconButton>
-            <IconButton variant="warning" aria-label="Warning">
-              <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
-                <path d="M8 2L14 14H2L8 2Z" stroke="currentColor" strokeWidth="2" strokeLinejoin="round"/>
-                <path d="M8 6V9M8 11V11.5" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
-              </svg>
-            </IconButton>
+            } />
           </div>
         ),
       },
@@ -157,21 +129,21 @@ export const componentRegistry: ComponentCategory[] = [
         category: 'basic',
         component: () => (
           <div style={{ display: 'flex', gap: '12px', alignItems: 'center' }}>
-            <IconButton size="small" variant="primary" aria-label="Small">
+            <IconButton size="xs" variant="primary" aria-label="Small" icon={
               <svg width="14" height="14" viewBox="0 0 16 16" fill="none">
                 <path d="M8 2L10 6L14 6.5L11 9.5L12 14L8 11.5L4 14L5 9.5L2 6.5L6 6L8 2Z" stroke="currentColor" strokeWidth="2" strokeLinejoin="round"/>
               </svg>
-            </IconButton>
-            <IconButton size="medium" variant="primary" aria-label="Medium">
+            } />
+            <IconButton size="sm" variant="primary" aria-label="Medium" icon={
               <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
                 <path d="M8 2L10 6L14 6.5L11 9.5L12 14L8 11.5L4 14L5 9.5L2 6.5L6 6L8 2Z" stroke="currentColor" strokeWidth="2" strokeLinejoin="round"/>
               </svg>
-            </IconButton>
-            <IconButton size="large" variant="primary" aria-label="Large">
+            } />
+            <IconButton size="lg" variant="primary" aria-label="Large" icon={
               <svg width="20" height="20" viewBox="0 0 16 16" fill="none">
                 <path d="M8 2L10 6L14 6.5L11 9.5L12 14L8 11.5L4 14L5 9.5L2 6.5L6 6L8 2Z" stroke="currentColor" strokeWidth="2" strokeLinejoin="round"/>
               </svg>
-            </IconButton>
+            } />
           </div>
         ),
       },
@@ -182,16 +154,16 @@ export const componentRegistry: ComponentCategory[] = [
         category: 'basic',
         component: () => (
           <div style={{ display: 'flex', gap: '12px', alignItems: 'center' }}>
-            <IconButton shape="square" variant="primary" aria-label="Square">
+            <IconButton shape="square" variant="primary" aria-label="Square" icon={
               <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
                 <rect x="3" y="3" width="10" height="10" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
               </svg>
-            </IconButton>
-            <IconButton shape="circle" variant="primary" aria-label="Circle">
+            } />
+            <IconButton shape="circle" variant="primary" aria-label="Circle" icon={
               <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
                 <circle cx="8" cy="8" r="5" stroke="currentColor" strokeWidth="2"/>
               </svg>
-            </IconButton>
+            } />
           </div>
         ),
       },
@@ -715,35 +687,21 @@ console.log(user.greet());`);
         category: 'navigation',
         component: () => (
           <div style={{ display: 'flex', flexDirection: 'column', gap: '24px' }}>
-            <Tabs type="line" defaultActiveKey="1">
-              <TabPane tabKey="1" label="Tab 1">
-                <div style={{ padding: '16px' }}>Line 类型 - 内容1</div>
-              </TabPane>
-              <TabPane tabKey="2" label="Tab 2">
-                <div style={{ padding: '16px' }}>Line 类型 - 内容2</div>
-              </TabPane>
-              <TabPane tabKey="3" label="Tab 3">
-                <div style={{ padding: '16px' }}>Line 类型 - 内容3</div>
-              </TabPane>
-            </Tabs>
-
-            <Tabs type="card" defaultActiveKey="1">
-              <TabPane tabKey="1" label="Card 1">
-                <div style={{ padding: '16px' }}>Card 类型 - 内容1</div>
-              </TabPane>
-              <TabPane tabKey="2" label="Card 2">
-                <div style={{ padding: '16px' }}>Card 类型 - 内容2</div>
-              </TabPane>
-            </Tabs>
-
-            <Tabs type="pill" defaultActiveKey="1">
-              <TabPane tabKey="1" label="Pill 1">
-                <div style={{ padding: '16px' }}>Pill 类型 - 内容1</div>
-              </TabPane>
-              <TabPane tabKey="2" label="Pill 2">
-                <div style={{ padding: '16px' }}>Pill 类型 - 内容2</div>
-              </TabPane>
-            </Tabs>
+            <TabGroup
+              defaultValue="1"
+              items={[
+                { value: '1', label: 'Tab 1' },
+                { value: '2', label: 'Tab 2' },
+                { value: '3', label: 'Tab 3' },
+              ]}
+            />
+            <TabGroup
+              defaultValue="1"
+              items={[
+                { value: '1', label: 'Card 1' },
+                { value: '2', label: 'Card 2' },
+              ]}
+            />
           </div>
         ),
       },
diff --git a/src/web-ui/src/features/dispatch/DispatchInstallDialog.scss b/src/web-ui/src/features/dispatch/DispatchInstallDialog.scss
index 0bbc298b0e..f69a12b9b7 100644
--- a/src/web-ui/src/features/dispatch/DispatchInstallDialog.scss
+++ b/src/web-ui/src/features/dispatch/DispatchInstallDialog.scss
@@ -140,32 +140,8 @@
     }
   }
 
-  // Checkbox with its explanation attached, rather than a label and a loose
-  // hint that could belong to anything below it.
   &__toggle {
-    display: grid;
-    grid-template-columns: auto minmax(0, 1fr);
-    align-items: start;
-    gap: $size-gap-2;
-    font-size: var(--bf-appearance-token-font-size-xs);
-    line-height: 1.4;
-    cursor: pointer;
-
-    input {
-      margin: 1px 0 0;
-    }
-
-    > span {
-      display: flex;
-      min-width: 0;
-      flex-direction: column;
-      gap: 2px;
-      font-weight: 500;
-    }
-
-    small {
-      font-weight: 400;
-    }
+    width: 100%;
   }
 
   &__checks {
diff --git a/src/web-ui/src/features/dispatch/DispatchInstallDialog.test.tsx b/src/web-ui/src/features/dispatch/DispatchInstallDialog.test.tsx
index ea79309124..6222af967b 100644
--- a/src/web-ui/src/features/dispatch/DispatchInstallDialog.test.tsx
+++ b/src/web-ui/src/features/dispatch/DispatchInstallDialog.test.tsx
@@ -64,8 +64,38 @@ vi.mock('@/infrastructure/api/service-api/GitAPI', () => ({
 }));
 
 vi.mock('@bitfun/ui', () => ({
+  Alert: ({ message }: { message: string }) => <div role="alert">{message}</div>,
   Icon: ({ name, ...props }: { name: string } & React.HTMLAttributes<HTMLSpanElement>) => <span data-icon={name} {...props} />,
   ScrollArea: ({ children, ...props }: React.HTMLAttributes<HTMLDivElement>) => <div {...props}>{children}</div>,
+  Input: ({ onChange, onValueChange, ...props }: React.InputHTMLAttributes<HTMLInputElement> & {
+    onValueChange?: (value: string) => void;
+  }) => (
+    <input
+      {...props}
+      onChange={(event) => {
+        onChange?.(event);
+        onValueChange?.(event.currentTarget.value);
+      }}
+    />
+  ),
+  Checkbox: ({ description, label, onChange, onCheckedChange, ...props }: React.InputHTMLAttributes<HTMLInputElement> & {
+    description?: React.ReactNode;
+    label?: React.ReactNode;
+    onCheckedChange?: (checked: boolean) => void;
+  }) => (
+    <label>
+      <input
+        {...props}
+        type="checkbox"
+        onChange={(event) => {
+          onChange?.(event);
+          onCheckedChange?.(event.currentTarget.checked);
+        }}
+      />
+      <span>{label}</span>
+      <small>{description}</small>
+    </label>
+  ),
   Button: ({
     children,
     disabled,
@@ -99,10 +129,6 @@ vi.mock('@bitfun/ui', () => ({
   },
 }));
 
-vi.mock('@/component-library', () => ({
-  Alert: ({ message }: { message: string }) => <div role="alert">{message}</div>,
-}));
-
 function createDeferred<T>() {
   let resolve!: (value: T) => void;
   let reject!: (reason?: unknown) => void;
diff --git a/src/web-ui/src/features/dispatch/DispatchInstallDialog.tsx b/src/web-ui/src/features/dispatch/DispatchInstallDialog.tsx
index 448b75d936..d24cff82df 100644
--- a/src/web-ui/src/features/dispatch/DispatchInstallDialog.tsx
+++ b/src/web-ui/src/features/dispatch/DispatchInstallDialog.tsx
@@ -1,8 +1,5 @@
-import { Button, Icon, Modal, ScrollArea } from '@bitfun/ui';
+import { Alert, Button, Checkbox, Icon, Input, Modal, ScrollArea } from '@bitfun/ui';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import {
-  Alert,
-} from '@/component-library';
 import { useI18n } from '@/infrastructure/i18n';
 import { createLogger } from '@/shared/utils/logger';
 import { Loader2, RefreshCw } from 'lucide-react';
@@ -595,13 +592,13 @@ export const DispatchInstallDialog: React.FC<DispatchInstallDialogProps> = ({
               <span className="dispatch-install-dialog__field-label">
                 {t('dispatch.baseRef')}
               </span>
-              <input
+              <Input
                 type="text"
                 value={baseRef}
                 disabled={targetMutationInProgress || validatingBaseRef}
                 spellCheck={false}
-                onChange={event => {
-                  setBaseRef(event.target.value);
+                onValueChange={value => {
+                  setBaseRef(value);
                   setBaseRefError(null);
                 }}
                 placeholder="HEAD"
@@ -610,23 +607,17 @@ export const DispatchInstallDialog: React.FC<DispatchInstallDialogProps> = ({
                 {t('dispatch.baseRefHint')}
               </span>
             </label>
-            <label className="dispatch-install-dialog__toggle">
-              <input
-                type="checkbox"
-                checked={includeUncommitted}
-                disabled={targetMutationInProgress || validatingBaseRef}
-                onChange={event => {
-                  includeUncommittedTouchedRef.current = true;
-                  setIncludeUncommitted(event.target.checked);
-                }}
-              />
-              <span>
-                {t('dispatch.includeUncommitted')}
-                <small className="dispatch-install-dialog__hint">
-                  {t('dispatch.includeUncommittedHint')}
-                </small>
-              </span>
-            </label>
+            <Checkbox
+              className="dispatch-install-dialog__toggle"
+              checked={includeUncommitted}
+              disabled={targetMutationInProgress || validatingBaseRef}
+              onCheckedChange={checked => {
+                includeUncommittedTouchedRef.current = true;
+                setIncludeUncommitted(checked);
+              }}
+              label={t('dispatch.includeUncommitted')}
+              description={t('dispatch.includeUncommittedHint')}
+            />
           </section>
         </ScrollArea>
 
diff --git a/src/web-ui/src/features/dispatch/DispatchResultDialog.test.tsx b/src/web-ui/src/features/dispatch/DispatchResultDialog.test.tsx
index 046188593a..48f0caddf9 100644
--- a/src/web-ui/src/features/dispatch/DispatchResultDialog.test.tsx
+++ b/src/web-ui/src/features/dispatch/DispatchResultDialog.test.tsx
@@ -22,6 +22,7 @@ vi.mock('@/infrastructure/i18n', () => ({
 }));
 
 vi.mock('@bitfun/ui', () => ({
+  Alert: ({ message }: { message: string }) => <div role="alert">{message}</div>,
   ScrollArea: ({ children, ...props }: React.HTMLAttributes<HTMLDivElement>) => <div {...props}>{children}</div>,
   Button: ({
     children,
@@ -37,10 +38,6 @@ vi.mock('@bitfun/ui', () => ({
   ),
 }));
 
-vi.mock('@/component-library', () => ({
-  Alert: ({ message }: { message: string }) => <div role="alert">{message}</div>,
-}));
-
 const SYNCED = {
   changed: true,
   branch: 'bitfun/dispatch/job-1',
diff --git a/src/web-ui/src/features/dispatch/DispatchResultDialog.tsx b/src/web-ui/src/features/dispatch/DispatchResultDialog.tsx
index 72c05f4eb2..dd9959fc6a 100644
--- a/src/web-ui/src/features/dispatch/DispatchResultDialog.tsx
+++ b/src/web-ui/src/features/dispatch/DispatchResultDialog.tsx
@@ -1,6 +1,5 @@
-import { Button, Modal, ScrollArea } from '@bitfun/ui';
+import { Alert, Button, Modal, ScrollArea } from '@bitfun/ui';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { Alert} from '@/component-library';
 import { useI18n } from '@/infrastructure/i18n';
 import { createLogger } from '@/shared/utils/logger';
 import { GitCommitHorizontal, Loader2 } from 'lucide-react';
diff --git a/src/web-ui/src/features/market-account/MarketAccountControls.scss b/src/web-ui/src/features/market-account/MarketAccountControls.scss
index 320d13cbd9..dab86c4543 100644
--- a/src/web-ui/src/features/market-account/MarketAccountControls.scss
+++ b/src/web-ui/src/features/market-account/MarketAccountControls.scss
@@ -25,7 +25,7 @@
     font-size: var(--bf-appearance-token-font-size-sm);
     cursor: pointer;
 
-    > span:not(.bitfun-avatar) {
+    > span:not([data-bf-component='avatar']) {
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
diff --git a/src/web-ui/src/features/market-account/MarketAccountControls.test.tsx b/src/web-ui/src/features/market-account/MarketAccountControls.test.tsx
index 544b0fd762..af060fb31f 100644
--- a/src/web-ui/src/features/market-account/MarketAccountControls.test.tsx
+++ b/src/web-ui/src/features/market-account/MarketAccountControls.test.tsx
@@ -46,6 +46,7 @@ vi.mock('@/shared/notification-system', () => ({
 }));
 
 vi.mock('@bitfun/ui', () => ({
+  Avatar: ({ src, alt }: any) => <img src={src} alt={alt} />,
   Icon: ({ name, ...props }: { name: string } & React.HTMLAttributes<HTMLSpanElement>) => <span data-icon={name} {...props} />,
   Button: ({ children, ...props }: any) => <button {...props}>{children}</button>,
   Menu: ({ children, ...props }: any) => <div role="menu" {...props}>{children}</div>,
@@ -57,10 +58,6 @@ vi.mock('@bitfun/ui', () => ({
   ) : null,
 }));
 
-vi.mock('@/component-library', () => ({
-  Avatar: ({ src, alt }: any) => <img src={src} alt={alt} />,
-}));
-
 describe('MarketAccountControls', () => {
   let container: HTMLDivElement;
   let root: ReturnType<typeof createRoot>;
diff --git a/src/web-ui/src/features/market-account/MarketAccountControls.tsx b/src/web-ui/src/features/market-account/MarketAccountControls.tsx
index 21e7eac661..19c006b344 100644
--- a/src/web-ui/src/features/market-account/MarketAccountControls.tsx
+++ b/src/web-ui/src/features/market-account/MarketAccountControls.tsx
@@ -1,8 +1,7 @@
-import { Button, Icon, Menu, MenuItem, Modal } from '@bitfun/ui';
+import { Avatar, Button, Icon, Menu, MenuItem, Modal } from '@bitfun/ui';
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { Github, Loader2, LogOut } from 'lucide-react';
-import { Avatar} from '@/component-library';
 import { getAppearanceOverlayHost } from '@/infrastructure/appearance/runtime/AppearanceOverlayHost';
 import { useI18n } from '@/infrastructure/i18n';
 import {
diff --git a/src/web-ui/src/features/relay-deploy/RelayDeployWizard.scss b/src/web-ui/src/features/relay-deploy/RelayDeployWizard.scss
index 26820675d9..1c9881f5f8 100644
--- a/src/web-ui/src/features/relay-deploy/RelayDeployWizard.scss
+++ b/src/web-ui/src/features/relay-deploy/RelayDeployWizard.scss
@@ -80,7 +80,7 @@
     background: var(--bf-appearance-token-color-bg-primary);
   }
 
-  &__error-alert.alert {
+  &__error-alert[data-bf-component='alert'] {
     padding: 8px 10px;
     align-items: center;
   }
diff --git a/src/web-ui/src/features/relay-deploy/RelayDeployWizard.tsx b/src/web-ui/src/features/relay-deploy/RelayDeployWizard.tsx
index a8011961be..e9fde74869 100644
--- a/src/web-ui/src/features/relay-deploy/RelayDeployWizard.tsx
+++ b/src/web-ui/src/features/relay-deploy/RelayDeployWizard.tsx
@@ -10,10 +10,9 @@
  * Closing the wizard cancels any in-progress remote task.
  */
 
-import { Button, Field, Icon, IconButton, Input as DesignInput, Modal, Select, Tooltip, ScrollArea } from '@bitfun/ui';
+import { Alert, Button, Field, Icon, IconButton, Input as DesignInput, Modal, Select, Tooltip, ScrollArea } from '@bitfun/ui';
 import React, { useState, useEffect, useCallback, useRef } from 'react';
 import { useI18n } from '@/infrastructure/i18n';
-import { Alert } from '@/component-library';
 import {
   Server,
   Lock,
diff --git a/src/web-ui/src/features/ssh-remote/PortForwardDialog.test.tsx b/src/web-ui/src/features/ssh-remote/PortForwardDialog.test.tsx
index 83b390f11b..af4c79dd33 100644
--- a/src/web-ui/src/features/ssh-remote/PortForwardDialog.test.tsx
+++ b/src/web-ui/src/features/ssh-remote/PortForwardDialog.test.tsx
@@ -57,6 +57,16 @@ vi.mock('@bitfun/ui', () => ({
       {children}
     </button>
   ),
+  Checkbox: ({ checked, onChange, label }: {
+    checked?: boolean;
+    onChange?: React.ChangeEventHandler<HTMLInputElement>;
+    label?: React.ReactNode;
+  }) => (
+    <label>
+      <input type="checkbox" checked={checked} onChange={onChange} />
+      {label}
+    </label>
+  ),
   IconButton: ({
     children,
     onClick,
@@ -108,23 +118,6 @@ vi.mock('@bitfun/ui', () => ({
   FieldGroup: ({ children, ...props }: React.HTMLAttributes<HTMLDivElement>) => <div {...props}>{children}</div>,
 }));
 
-vi.mock('@/component-library', () => ({
-  Checkbox: ({
-    checked,
-    onChange,
-    label,
-  }: {
-    checked?: boolean;
-    onChange?: React.ChangeEventHandler<HTMLInputElement>;
-    label?: React.ReactNode;
-  }) => (
-    <label>
-      <input type="checkbox" checked={checked} onChange={onChange} />
-      {label}
-    </label>
-  ),
-}));
-
 function makeForward(overrides: Partial<PortForward> = {}): PortForward {
   return {
     id: 'forward-1',
diff --git a/src/web-ui/src/features/ssh-remote/PortForwardDialog.tsx b/src/web-ui/src/features/ssh-remote/PortForwardDialog.tsx
index 91dd5abfb1..a1c9ca0aa9 100644
--- a/src/web-ui/src/features/ssh-remote/PortForwardDialog.tsx
+++ b/src/web-ui/src/features/ssh-remote/PortForwardDialog.tsx
@@ -15,9 +15,8 @@
  * the local port is an allocation that moves when the number is taken.
  */
 
-import { Button, FieldGroup, FormSection, Icon, IconButton, Input, Modal, Tooltip } from '@bitfun/ui';
+import { Button, Checkbox, FieldGroup, FormSection, Icon, IconButton, Input, Modal, Tooltip } from '@bitfun/ui';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { Checkbox } from '@/component-library';
 import { useI18n } from '@/infrastructure/i18n';
 import { systemAPI } from '@/infrastructure/api/service-api/SystemAPI';
 import { createLogger } from '@/shared/utils/logger';
diff --git a/src/web-ui/src/features/ssh-remote/RemoteFileBrowser.scss b/src/web-ui/src/features/ssh-remote/RemoteFileBrowser.scss
index 588168fb5b..e2f7b6ccd5 100644
--- a/src/web-ui/src/features/ssh-remote/RemoteFileBrowser.scss
+++ b/src/web-ui/src/features/ssh-remote/RemoteFileBrowser.scss
@@ -118,6 +118,11 @@
     }
   }
 
+  &__path-input-field {
+    flex: 1;
+    min-width: 0;
+  }
+
   &__breadcrumb-btn {
     display: inline-flex;
     align-items: center;
@@ -507,6 +512,10 @@
     }
   }
 
+  &__dialog-input-field {
+    width: 100%;
+  }
+
   &__dialog-actions {
     display: flex;
     justify-content: flex-end;
diff --git a/src/web-ui/src/features/ssh-remote/RemoteFileBrowser.tsx b/src/web-ui/src/features/ssh-remote/RemoteFileBrowser.tsx
index c7169a6140..e86ceef6d2 100644
--- a/src/web-ui/src/features/ssh-remote/RemoteFileBrowser.tsx
+++ b/src/web-ui/src/features/ssh-remote/RemoteFileBrowser.tsx
@@ -3,7 +3,7 @@
  * Used to browse and select remote directory as workspace
  */
 
-import { Button, ConfirmDialog, Icon, IconButton, ScrollArea } from '@bitfun/ui';
+import { Button, ConfirmDialog, Icon, IconButton, Input, ScrollArea } from '@bitfun/ui';
 import React, { useState, useEffect, useRef, useCallback } from 'react';
 import { createPortal } from 'react-dom';
 import { getAppearanceOverlayHost } from '@/infrastructure/appearance/runtime/AppearanceOverlayHost';
@@ -407,11 +407,12 @@ export const RemoteFileBrowser: React.FC<RemoteFileBrowserProps> = ({
         {/* Path Breadcrumb / Input */}
         <div className="remote-file-browser__breadcrumb" data-bf-component="ssh-remote" data-bf-part="breadcrumb">
           {isEditingPath ? (
-            <input
+            <Input
               ref={pathInputRef}
-              className="remote-file-browser__path-input"
+              className="remote-file-browser__path-input-field"
+              inputClassName="remote-file-browser__path-input"
               value={pathInputValue}
-              onChange={(e) => setPathInputValue(e.target.value)}
+              onValueChange={setPathInputValue}
               onKeyDown={handlePathInputKeyDown}
               onCompositionStart={() => {
                 textInputCompositionActiveRef.current = true;
@@ -636,11 +637,12 @@ export const RemoteFileBrowser: React.FC<RemoteFileBrowserProps> = ({
           <div className="remote-file-browser__dialog-overlay">
             <div className="remote-file-browser__dialog">
               <h3 className="remote-file-browser__dialog-title">{t('ssh.remote.rename')}</h3>
-              <input
+              <Input
                 type="text"
                 value={renameValue}
-                onChange={(e) => setRenameValue(e.target.value)}
-                className="remote-file-browser__dialog-input"
+                onValueChange={setRenameValue}
+                className="remote-file-browser__dialog-input-field"
+                inputClassName="remote-file-browser__dialog-input"
                 autoFocus
                 onKeyDown={(e) => {
                   if (
diff --git a/src/web-ui/src/features/ssh-remote/SSHConnectionDialog.scss b/src/web-ui/src/features/ssh-remote/SSHConnectionDialog.scss
index 177bc82022..c31534707b 100644
--- a/src/web-ui/src/features/ssh-remote/SSHConnectionDialog.scss
+++ b/src/web-ui/src/features/ssh-remote/SSHConnectionDialog.scss
@@ -19,7 +19,7 @@
     background: var(--bf-appearance-token-color-bg-primary);
   }
 
-  &__error-alert.alert {
+  &__error-alert[data-bf-component='alert'] {
     padding: 8px 10px;
     align-items: center;
   }
diff --git a/src/web-ui/src/features/ssh-remote/SSHConnectionDialog.test.tsx b/src/web-ui/src/features/ssh-remote/SSHConnectionDialog.test.tsx
index 1f0493a44d..9a6e6dc472 100644
--- a/src/web-ui/src/features/ssh-remote/SSHConnectionDialog.test.tsx
+++ b/src/web-ui/src/features/ssh-remote/SSHConnectionDialog.test.tsx
@@ -52,6 +52,7 @@ vi.mock('./SSHAuthPromptDialog', () => ({
 }));
 
 vi.mock('@bitfun/ui', () => ({
+  Alert: () => null,
   Icon: ({ name, ...props }: { name: string } & React.HTMLAttributes<HTMLSpanElement>) => <span data-icon={name} {...props} />,
   Modal: ({
     isOpen,
@@ -185,7 +186,6 @@ vi.mock('@/component-library', () => ({
       ))}
     </select>
   ),
-  Alert: () => null,
 }));
 
 describe('SSHConnectionDialog', () => {
diff --git a/src/web-ui/src/features/ssh-remote/SSHConnectionDialog.tsx b/src/web-ui/src/features/ssh-remote/SSHConnectionDialog.tsx
index a55b1acce9..30eb7eb9e7 100644
--- a/src/web-ui/src/features/ssh-remote/SSHConnectionDialog.tsx
+++ b/src/web-ui/src/features/ssh-remote/SSHConnectionDialog.tsx
@@ -3,12 +3,11 @@
  * Professional SSH connection dialog following BitFun design patterns
  */
 
-import { Button, Field, FieldGroup, FieldRow, FormSection, Icon, IconButton, Input as DesignInput, Modal, ScrollArea, Select, Tooltip } from '@bitfun/ui';
+import { Alert, Button, Field, FieldGroup, FieldRow, FormSection, Icon, IconButton, Input as DesignInput, Modal, ScrollArea, Select, Tooltip } from '@bitfun/ui';
 import React, { useState, useEffect, useCallback, useRef } from 'react';
 import { useI18n } from '@/infrastructure/i18n';
 import { useSSHRemoteContext } from './SSHRemoteContext';
 import { SSHAuthPromptDialog, type SSHAuthPromptSubmitPayload } from './SSHAuthPromptDialog';
-import { Alert } from '@/component-library';
 import {
   ArrowDownToLine,
   EyeOff,
diff --git a/src/web-ui/src/infrastructure/appearance/registry/defaultAppearanceRegistry.ts b/src/web-ui/src/infrastructure/appearance/registry/defaultAppearanceRegistry.ts
index 8a1e9bff4a..c1aa2551e2 100644
--- a/src/web-ui/src/infrastructure/appearance/registry/defaultAppearanceRegistry.ts
+++ b/src/web-ui/src/infrastructure/appearance/registry/defaultAppearanceRegistry.ts
@@ -1,21 +1,12 @@
 import { cardAppearanceDescriptor } from '@/component-library/components/Card/appearance';
 import { tooltipAppearanceDescriptor } from '@/component-library/components/Tooltip/appearance';
-import { iconButtonAppearanceDescriptor } from '@/component-library/components/IconButton/appearance';
 import { popupCloseButtonAppearanceDescriptor } from '@/component-library/components/PopupCloseButton/appearance';
-import { checkboxAppearanceDescriptor } from '@/component-library/components/Checkbox/appearance';
-import { textareaAppearanceDescriptor } from '@/component-library/components/Textarea/appearance';
-import { numberInputAppearanceDescriptor } from '@/component-library/components/NumberInput/appearance';
-import { tabsAppearanceDescriptor } from '@/component-library/components/Tabs/appearance';
 import { selectAppearanceDescriptor } from '@/component-library/components/Select/appearance';
-import { alertAppearanceDescriptor } from '@/component-library/components/Alert/appearance';
-import { tagAppearanceDescriptor } from '@/component-library/components/Tag/appearance';
-import { avatarAppearanceDescriptor } from '@/component-library/components/Avatar/appearance';
 import { codeEditorAppearanceDescriptor } from '@/component-library/components/CodeEditor/appearance';
 import { configPageAppearanceDescriptor } from '@/component-library/components/ConfigPage/appearance';
 import { confirmDialogAppearanceDescriptor } from '@/infrastructure/confirm-dialog';
 import { cubeLoadingAppearanceDescriptor } from '@/component-library/components/CubeLoading/appearance';
 import { dotMatrixLoaderAppearanceDescriptor } from '@/component-library/components/DotMatrixLoader/appearance';
-import { emptyAppearanceDescriptor } from '@/component-library/components/Empty/appearance';
 import { inputDialogAppearanceDescriptor } from '@/component-library/components/InputDialog/appearance';
 import { taskRunningIndicatorAppearanceDescriptor } from '@/component-library/components/TaskRunningIndicator/appearance';
 import { windowControlsAppearanceDescriptor } from '@/component-library/components/WindowControls/appearance';
@@ -268,22 +259,13 @@ export function createDefaultAppearanceRegistry(): AppearanceRegistry {
   return new AppearanceRegistry()
     .registerComponent(cardAppearanceDescriptor)
     .registerComponent(tooltipAppearanceDescriptor)
-    .registerComponent(iconButtonAppearanceDescriptor)
     .registerComponent(popupCloseButtonAppearanceDescriptor)
-    .registerComponent(checkboxAppearanceDescriptor)
-    .registerComponent(textareaAppearanceDescriptor)
-    .registerComponent(numberInputAppearanceDescriptor)
-    .registerComponent(tabsAppearanceDescriptor)
     .registerComponent(selectAppearanceDescriptor)
-    .registerComponent(alertAppearanceDescriptor)
-    .registerComponent(tagAppearanceDescriptor)
-    .registerComponent(avatarAppearanceDescriptor)
     .registerComponent(codeEditorAppearanceDescriptor)
     .registerComponent(configPageAppearanceDescriptor)
     .registerComponent(confirmDialogAppearanceDescriptor)
     .registerComponent(cubeLoadingAppearanceDescriptor)
     .registerComponent(dotMatrixLoaderAppearanceDescriptor)
-    .registerComponent(emptyAppearanceDescriptor)
     .registerComponent(inputDialogAppearanceDescriptor)
     .registerComponent(taskRunningIndicatorAppearanceDescriptor)
     .registerComponent(windowControlsAppearanceDescriptor)
diff --git a/src/web-ui/src/infrastructure/config/appearance.ts b/src/web-ui/src/infrastructure/config/appearance.ts
index cd1f9f08a5..3e68f2c1e9 100644
--- a/src/web-ui/src/infrastructure/config/appearance.ts
+++ b/src/web-ui/src/infrastructure/config/appearance.ts
@@ -31,7 +31,6 @@ export const configAppearanceDescriptor: AppearanceSurfaceDescriptor = {
     { id: 'modelOption' },
     { id: 'modelSelection' },
     { id: 'modelSelectionOption' },
-    { id: 'modelSelectionInput' },
     { id: 'modelSelectionLabel' },
     { id: 'modelSelectionDropdown' },
     { id: 'pageHeaderInner' },
diff --git a/src/web-ui/src/infrastructure/config/components/AcpAgentsConfig.tsx b/src/web-ui/src/infrastructure/config/components/AcpAgentsConfig.tsx
index 7b0353bfc2..ae3aa40c9b 100644
--- a/src/web-ui/src/infrastructure/config/components/AcpAgentsConfig.tsx
+++ b/src/web-ui/src/infrastructure/config/components/AcpAgentsConfig.tsx
@@ -1,4 +1,4 @@
-import { Button, Icon, IconButton, Input, Select, Tooltip } from '@bitfun/ui';
+import { Button, Icon, IconButton, Input, Select, Textarea, Tooltip } from '@bitfun/ui';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
@@ -11,7 +11,6 @@ import {
   Save,
   Server,
 } from 'lucide-react';
-import { Textarea } from '@/component-library';
 import {
   ConfigPageContent,
   ConfigPageHeader,
diff --git a/src/web-ui/src/infrastructure/config/components/AppearanceMarketWorkflows.tsx b/src/web-ui/src/infrastructure/config/components/AppearanceMarketWorkflows.tsx
index 89784a98e3..d7d5713108 100644
--- a/src/web-ui/src/infrastructure/config/components/AppearanceMarketWorkflows.tsx
+++ b/src/web-ui/src/infrastructure/config/components/AppearanceMarketWorkflows.tsx
@@ -1,7 +1,6 @@
-import { Button, Field, Icon, Input, Select, ScrollArea } from '@bitfun/ui';
+import { Button, Field, Icon, Input, Select, ScrollArea, Textarea } from '@bitfun/ui';
 import { type FormEvent, useCallback, useEffect, useState } from 'react';
 import { AlertTriangle, Inbox, RefreshCw, ShieldCheck } from 'lucide-react';
-import { Textarea } from '@/component-library';
 import { confirmDialog } from '@/infrastructure/confirm-dialog';
 import {
   appearanceMarketAPI,
diff --git a/src/web-ui/src/infrastructure/config/components/AppearanceSettingsPage.tsx b/src/web-ui/src/infrastructure/config/components/AppearanceSettingsPage.tsx
index f9dc9337f6..de44936b56 100644
--- a/src/web-ui/src/infrastructure/config/components/AppearanceSettingsPage.tsx
+++ b/src/web-ui/src/infrastructure/config/components/AppearanceSettingsPage.tsx
@@ -239,14 +239,13 @@ function AppearanceSelectionSection() {
               data-bf-component="appearance-settings"
               data-bf-part="packageSelect"
             >
-              <LegacySelect
-                size="small"
+              <Select
+                size="sm"
                 value={selectedPackageId}
                 options={packageOptions}
-                onChange={handlePackageChange}
+                onValueChange={handlePackageChange}
                 disabled={!initialized || status === 'applying'}
-                placement="bottom"
-                triggerTestId="appearance-package-select"
+                data-testid="appearance-package-select"
               />
             </div>
           </ConfigPageRow>
diff --git a/src/web-ui/src/infrastructure/config/components/ApplicationSettingsPages.tsx b/src/web-ui/src/infrastructure/config/components/ApplicationSettingsPages.tsx
index bbbb4b2218..beb99f3556 100644
--- a/src/web-ui/src/infrastructure/config/components/ApplicationSettingsPages.tsx
+++ b/src/web-ui/src/infrastructure/config/components/ApplicationSettingsPages.tsx
@@ -1,9 +1,8 @@
-import { Button, Select, Switch, Tooltip } 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 {
-  Alert,
   Select as LegacySelect,
   type SelectOption,
   ConfigPageLoading,
diff --git a/src/web-ui/src/infrastructure/config/components/EditorConfig.tsx b/src/web-ui/src/infrastructure/config/components/EditorConfig.tsx
index fe0d790469..9d5054f0c4 100644
--- a/src/web-ui/src/infrastructure/config/components/EditorConfig.tsx
+++ b/src/web-ui/src/infrastructure/config/components/EditorConfig.tsx
@@ -1,9 +1,9 @@
  
 
-import { Button, Select, Switch } from '@bitfun/ui';
+import { Button, NumberInput, Select, Switch } from '@bitfun/ui';
 import React, { useState, useEffect, useCallback, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
-import { NumberInput, ConfigPageLoading, ConfigPageMessage } from '@/component-library';
+import { ConfigPageLoading, ConfigPageMessage } from '@/component-library';
 import { configManager } from '../services/ConfigManager';
 import { globalEventBus } from '@/infrastructure/event-bus';
 import { DEFAULT_EDITOR_CONFIG, type EditorConfig as EditorConfigType, type EditorConfigPartial } from '@/tools/editor/config';
diff --git a/src/web-ui/src/infrastructure/config/components/ExternalMcpOverview.tsx b/src/web-ui/src/infrastructure/config/components/ExternalMcpOverview.tsx
index b8b819e0fa..994736ddee 100644
--- a/src/web-ui/src/infrastructure/config/components/ExternalMcpOverview.tsx
+++ b/src/web-ui/src/infrastructure/config/components/ExternalMcpOverview.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { Icon, Button, IconButton, ScrollArea, Tooltip } from '@bitfun/ui';
+import { Icon, Button, Checkbox, IconButton, ScrollArea, Tooltip } from '@bitfun/ui';
 import { RefreshCw } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 
@@ -495,28 +495,30 @@ const ExternalMcpOverview: React.FC = () => {
                   const candidateScopeLabel = scopeLabel(source?.record.scope);
                   return (
                     <li key={item.candidateId}>
-                      <label className="bitfun-mcp-tools__import-option" data-bf-component="external-mcp-overview" data-bf-part="importOption">
-                        <input
-                          type="checkbox"
+                      <div className="bitfun-mcp-tools__import-option" data-bf-component="external-mcp-overview" data-bf-part="importOption">
+                        <Checkbox
+                          className="bitfun-mcp-tools__import-control"
                           checked={selectedImportCandidateIds.has(item.candidateId)}
                           disabled={importBusy}
-                          onChange={() => toggleImportCandidate(item.candidateId)}
+                          onCheckedChange={() => toggleImportCandidate(item.candidateId)}
                           aria-label={`${item.displayName}, ${ecosystemLabel}, ${candidateScopeLabel}`}
-                        />
-                        <span className="bitfun-mcp-tools__import-option-content" data-bf-component="external-mcp-overview" data-bf-part="importOptionContent">
-                          <span>
-                            {item.displayName} → {item.proposedNativeId}
-                          </span>
-                          <span className="bitfun-mcp-tools__import-option-meta" data-bf-component="external-mcp-overview" data-bf-part="importOptionMeta">
-                            <span className="bitfun-collection-item__badge bitfun-mcp-tools__external-source-badge">
-                              {ecosystemLabel}
-                            </span>
-                            <span className="bitfun-collection-item__badge">
-                              {candidateScopeLabel}
+                          label={(
+                            <span className="bitfun-mcp-tools__import-option-content" data-bf-component="external-mcp-overview" data-bf-part="importOptionContent">
+                              <span>
+                                {item.displayName} → {item.proposedNativeId}
+                              </span>
+                              <span className="bitfun-mcp-tools__import-option-meta" data-bf-component="external-mcp-overview" data-bf-part="importOptionMeta">
+                                <span className="bitfun-collection-item__badge bitfun-mcp-tools__external-source-badge">
+                                  {ecosystemLabel}
+                                </span>
+                                <span className="bitfun-collection-item__badge">
+                                  {candidateScopeLabel}
+                                </span>
+                              </span>
                             </span>
-                          </span>
-                        </span>
-                      </label>
+                          )}
+                        />
+                      </div>
                     </li>
                   );
                 })}
diff --git a/src/web-ui/src/infrastructure/config/components/MCPResourceBrowser.scss b/src/web-ui/src/infrastructure/config/components/MCPResourceBrowser.scss
index f82e5926d8..5db43f2add 100644
--- a/src/web-ui/src/infrastructure/config/components/MCPResourceBrowser.scss
+++ b/src/web-ui/src/infrastructure/config/components/MCPResourceBrowser.scss
@@ -30,6 +30,10 @@
     padding: 1rem 1.5rem;
     border-bottom: 1px solid var(--bf-appearance-token-border-base);
 
+    .browser-search-field {
+      width: 100%;
+    }
+
     .search-input {
       width: 100%;
       padding: 0.5rem 0.75rem;
diff --git a/src/web-ui/src/infrastructure/config/components/MCPResourceBrowser.tsx b/src/web-ui/src/infrastructure/config/components/MCPResourceBrowser.tsx
index b8201205f1..bc557e77cc 100644
--- a/src/web-ui/src/infrastructure/config/components/MCPResourceBrowser.tsx
+++ b/src/web-ui/src/infrastructure/config/components/MCPResourceBrowser.tsx
@@ -1,7 +1,7 @@
  
 
 import React, { useState, useEffect, useCallback } from 'react';
-import { Button, Icon, ScrollArea } from '@bitfun/ui';
+import { Button, Icon, ScrollArea, SearchField } from '@bitfun/ui';
 import { useTranslation } from 'react-i18next';
 import { FileText, FileImage, FileJson, FileCode } from 'lucide-react';
 import MCPAPI, { MCPResource } from '../../api/service-api/MCPAPI';
@@ -149,12 +149,13 @@ export const MCPResourceBrowser: React.FC<MCPResourceBrowserProps> = ({ serverId
       </div>
 
       <div data-bf-component="mcp-resource-browser" data-bf-part="search" className="browser-search">
-        <input
-          type="text"
+        <SearchField
+          className="browser-search-field"
+          inputClassName="search-input"
+          leadingIcon={<Icon name="search" size="sm" />}
           placeholder={t('resourceBrowser.search.placeholder')}
           value={searchQuery}
-          onChange={(e) => setSearchQuery(e.target.value)}
-          className="search-input"
+          onValueChange={setSearchQuery}
         />
       </div>
 
diff --git a/src/web-ui/src/infrastructure/config/components/McpToolsConfig.scss b/src/web-ui/src/infrastructure/config/components/McpToolsConfig.scss
index 8dd7915b79..05fbb0066b 100644
--- a/src/web-ui/src/infrastructure/config/components/McpToolsConfig.scss
+++ b/src/web-ui/src/infrastructure/config/components/McpToolsConfig.scss
@@ -241,6 +241,10 @@
   cursor: pointer;
 }
 
+.bitfun-mcp-tools__import-control {
+  width: 100%;
+}
+
 .bitfun-mcp-tools__import-option-content {
   display: flex;
   flex: 1;
diff --git a/src/web-ui/src/infrastructure/config/components/McpToolsConfig.tsx b/src/web-ui/src/infrastructure/config/components/McpToolsConfig.tsx
index 477f24b8e2..b72d577248 100644
--- a/src/web-ui/src/infrastructure/config/components/McpToolsConfig.tsx
+++ b/src/web-ui/src/infrastructure/config/components/McpToolsConfig.tsx
@@ -4,7 +4,7 @@
  * Uses settings/mcp-tools for page title/subtitle, settings/mcp for the MCP section.
  */
 
-import { Button, Icon, IconButton, Modal, Tooltip } from '@bitfun/ui';
+import { Button, Icon, IconButton, Modal, Textarea, Tooltip } from '@bitfun/ui';
 import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
@@ -17,7 +17,6 @@ import {
   KeyRound,
   Trash2,
 } from 'lucide-react';
-import { Textarea } from '@/component-library';
 import { confirmDanger } from '@/infrastructure/confirm-dialog';
 import { ToolProcessingDots } from '@bitfun/ui/flow-chat';
 import {
diff --git a/src/web-ui/src/infrastructure/config/components/MemorySettingsPage.tsx b/src/web-ui/src/infrastructure/config/components/MemorySettingsPage.tsx
index df8f932b87..b4fea2be4c 100644
--- a/src/web-ui/src/infrastructure/config/components/MemorySettingsPage.tsx
+++ b/src/web-ui/src/infrastructure/config/components/MemorySettingsPage.tsx
@@ -1,8 +1,8 @@
-import { ConfirmDialog, Icon, IconButton, Select, type SelectOption, Switch, Tooltip } from '@bitfun/ui';
+import { ConfirmDialog, Icon, IconButton, NumberInput, Select, type SelectOption, Switch, Tooltip } from '@bitfun/ui';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ChevronUp, FolderOpen, RotateCcw, Trash2 } from 'lucide-react';
-import { ConfigPageLoading, NumberInput } from '@/component-library';
+import { ConfigPageLoading } from '@/component-library';
 
 import { useNotification } from '@/shared/notification-system';
 import { createLogger } from '@/shared/utils/logger';
diff --git a/src/web-ui/src/infrastructure/config/components/ModelSelectionRadio.scss b/src/web-ui/src/infrastructure/config/components/ModelSelectionRadio.scss
index 5ea465beb0..c8d5602752 100644
--- a/src/web-ui/src/infrastructure/config/components/ModelSelectionRadio.scss
+++ b/src/web-ui/src/infrastructure/config/components/ModelSelectionRadio.scss
@@ -86,32 +86,9 @@
       pointer-events: none;
     }
   }
-  
-  
-  &__input {
-    appearance: none;
-    width: 16px;
-    height: 16px;
-    margin: 0;
-    flex-shrink: 0;
-    cursor: pointer;
-    border: 2px solid var(--bf-appearance-token-color-text-muted);
-    border-radius: 50%;
-    background: transparent;
-    transition:
-      background-color $motion-fast $easing-standard,
-      border-color $motion-fast $easing-standard,
-      box-shadow $motion-fast $easing-standard;
-
-    &:checked {
-      border-color: var(--bf-appearance-token-color-accent-500);
-      background: var(--bf-appearance-token-color-accent-500);
-      box-shadow: inset 0 0 0 3px var(--bf-appearance-token-color-bg-primary);
-    }
 
-    &:hover:not(:checked) {
-      border-color: var(--bf-appearance-token-color-accent-400);
-    }
+  &__choice {
+    min-width: 0;
   }
   
   
diff --git a/src/web-ui/src/infrastructure/config/components/ModelSelectionRadio.tsx b/src/web-ui/src/infrastructure/config/components/ModelSelectionRadio.tsx
index ae898622b2..203b8d47bd 100644
--- a/src/web-ui/src/infrastructure/config/components/ModelSelectionRadio.tsx
+++ b/src/web-ui/src/infrastructure/config/components/ModelSelectionRadio.tsx
@@ -1,6 +1,6 @@
 import React, { useId, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Select } from '@bitfun/ui';
+import { Radio, Select } from '@bitfun/ui';
 import type { AIModelConfig } from '../types';
 import { getModelDisplayName } from '../services/modelConfigs';
 import './ModelSelectionRadio.scss';
@@ -65,67 +65,55 @@ export const ModelSelectionRadio: React.FC<ModelSelectionRadioProps> = ({
       data-bf-component="config"
       data-bf-part="modelSelection"
     >
-      <label
+      <div
         className={`model-selection-radio__option ${selectionType === 'primary' ? 'model-selection-radio__option--selected' : ''}`}
         data-bf-component="config"
         data-bf-part="modelSelectionOption"
       >
-        <input
-          type="radio"
+        <Radio
+          className="model-selection-radio__choice"
           name={radioName}
           value="primary"
           checked={selectionType === 'primary'}
-          onChange={() => handleSelectionChange('primary')}
+          onCheckedChange={(checked) => checked && handleSelectionChange('primary')}
           disabled={disabled}
-          className="model-selection-radio__input"
-          data-bf-component="config"
-          data-bf-part="modelSelectionInput"
+          size={size}
+          label={<span className="model-selection-radio__label" data-bf-component="config" data-bf-part="modelSelectionLabel">{t('selection.primary')}</span>}
         />
-        <span className="model-selection-radio__label" data-bf-component="config" data-bf-part="modelSelectionLabel">
-          {t('selection.primary')}
-        </span>
-      </label>
+      </div>
 
-      <label
+      <div
         className={`model-selection-radio__option ${selectionType === 'fast' ? 'model-selection-radio__option--selected' : ''}`}
         data-bf-component="config"
         data-bf-part="modelSelectionOption"
       >
-        <input
-          type="radio"
+        <Radio
+          className="model-selection-radio__choice"
           name={radioName}
           value="fast"
           checked={selectionType === 'fast'}
-          onChange={() => handleSelectionChange('fast')}
+          onCheckedChange={(checked) => checked && handleSelectionChange('fast')}
           disabled={disabled}
-          className="model-selection-radio__input"
-          data-bf-component="config"
-          data-bf-part="modelSelectionInput"
+          size={size}
+          label={<span className="model-selection-radio__label" data-bf-component="config" data-bf-part="modelSelectionLabel">{t('selection.fast')}</span>}
         />
-        <span className="model-selection-radio__label" data-bf-component="config" data-bf-part="modelSelectionLabel">
-          {t('selection.fast')}
-        </span>
-      </label>
+      </div>
 
-      <label
+      <div
         className={`model-selection-radio__option model-selection-radio__option--custom ${selectionType === 'custom' ? 'model-selection-radio__option--selected' : ''}`}
         data-bf-component="config"
         data-bf-part="modelSelectionOption"
       >
-        <input
-          type="radio"
+        <Radio
+          className="model-selection-radio__choice"
           name={radioName}
           value="custom"
           checked={selectionType === 'custom'}
-          onChange={() => handleSelectionChange('custom')}
+          onCheckedChange={(checked) => checked && handleSelectionChange('custom')}
           disabled={disabled}
-          className="model-selection-radio__input"
-          data-bf-component="config"
-          data-bf-part="modelSelectionInput"
+          size={size}
+          label={<span className="model-selection-radio__label" data-bf-component="config" data-bf-part="modelSelectionLabel">{t('selection.custom')}</span>}
         />
-        <span className="model-selection-radio__label" data-bf-component="config" data-bf-part="modelSelectionLabel">
-          {t('selection.custom')}
-        </span>
 
         {selectionType === 'custom' && (
           <div className="model-selection-radio__dropdown" data-bf-component="config" data-bf-part="modelSelectionDropdown">
@@ -142,7 +130,7 @@ export const ModelSelectionRadio: React.FC<ModelSelectionRadioProps> = ({
             />
           </div>
         )}
-      </label>
+      </div>
     </div>
   );
 };
diff --git a/src/web-ui/src/infrastructure/config/components/ModelSettingsPage.scss b/src/web-ui/src/infrastructure/config/components/ModelSettingsPage.scss
index e0bbbcc2a5..c331db218a 100644
--- a/src/web-ui/src/infrastructure/config/components/ModelSettingsPage.scss
+++ b/src/web-ui/src/infrastructure/config/components/ModelSettingsPage.scss
@@ -1003,7 +1003,7 @@
       }
 
       > [data-bf-component='switch'],
-      > .bitfun-checkbox {
+      > [data-bf-component='checkbox'] {
         width: auto;
         max-width: none;
         flex: 0 0 auto;
@@ -1028,7 +1028,7 @@
     margin-bottom: $size-gap-4;
 
     
-    > label:not(.bitfun-checkbox):not(.bitfun-radio-label) {
+    > label:not([data-bf-component='checkbox']):not(.bitfun-radio-label) {
       display: block;
       margin-bottom: $size-gap-2;
       font-size: var(--bf-appearance-token-font-size-sm);
@@ -1037,7 +1037,7 @@
     }
 
     
-    > .bitfun-checkbox {
+    > [data-bf-component='checkbox'] {
       margin-bottom: 0;
     }
 
@@ -1091,7 +1091,7 @@
     }
 
     
-    .bitfun-number-input {
+    [data-bf-component='number-input'] {
       width: 100%;
     }
   }
@@ -1146,7 +1146,7 @@
   &__form--modal {
     [data-bf-component='input'],
     .select__trigger,
-    .bitfun-number-input__container,
+    [data-bf-component='number-input'] > [data-bf-part='control'],
     .resolved-url__value {
       min-height: 35px;
       border-radius: var(--bf-appearance-token-size-radius-sm);
@@ -1161,7 +1161,7 @@
 
     [data-bf-component='input'],
     .select,
-    .bitfun-number-input,
+    [data-bf-component='number-input'],
     .bitfun-model-settings__resolved-url {
       width: 100%;
       min-width: 0;
@@ -1452,7 +1452,7 @@
     border-top: 1px dashed var(--bf-appearance-token-border-subtle);
 
     .select__trigger,
-    .bitfun-number-input__container {
+    [data-bf-component='number-input'] > [data-bf-part='control'] {
       min-height: 32px;
       border-color: color-mix(
         in srgb,
@@ -1464,7 +1464,7 @@
     .select__value,
     .select__placeholder,
     .select__value-label,
-    .bitfun-number-input__input {
+    [data-bf-component='number-input'] [data-bf-part='input'] {
       font-size: 12px;
       line-height: 1.4;
     }
@@ -1487,16 +1487,16 @@
     }
 
     > .select,
-    .bitfun-number-input {
+    [data-bf-component='number-input'] {
       width: 100%;
       min-width: 0;
     }
 
-    .bitfun-number-input__value-area {
+    [data-bf-component='number-input'] > [data-bf-part='control'] {
       justify-content: flex-start;
     }
 
-    .bitfun-number-input__input {
+    [data-bf-component='number-input'] [data-bf-part='input'] {
       text-align: left;
       font-size: 12px;
     }
@@ -2224,7 +2224,7 @@
     &__form-field {
       margin-bottom: $size-gap-3;
       
-      > label:not(.bitfun-checkbox):not(.bitfun-radio-label) {
+      > label:not([data-bf-component='checkbox']):not(.bitfun-radio-label) {
         font-size: var(--bf-appearance-token-font-size-xs);
         margin-bottom: $size-gap-1;
       }
diff --git a/src/web-ui/src/infrastructure/config/components/QuickActionsConfig.tsx b/src/web-ui/src/infrastructure/config/components/QuickActionsConfig.tsx
index b69f89e5fc..bef964a284 100644
--- a/src/web-ui/src/infrastructure/config/components/QuickActionsConfig.tsx
+++ b/src/web-ui/src/infrastructure/config/components/QuickActionsConfig.tsx
@@ -1,8 +1,8 @@
-import { Button, Icon, IconButton, Input, Modal, Switch, Tooltip } from '@bitfun/ui';
+import { Button, Icon, IconButton, Input, Modal, Switch, Textarea, Tooltip } from '@bitfun/ui';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Zap, GitCommitHorizontal, GitPullRequest, Trash2 } from 'lucide-react';
-import { ConfigPageLoading, Textarea } from '@/component-library';
+import { ConfigPageLoading } from '@/component-library';
 import {
   ConfigPageHeader,
   ConfigPageLayout,
diff --git a/src/web-ui/src/infrastructure/config/components/ReasoningPresetEditor.scss b/src/web-ui/src/infrastructure/config/components/ReasoningPresetEditor.scss
index 863e80b6d0..879367844b 100644
--- a/src/web-ui/src/infrastructure/config/components/ReasoningPresetEditor.scss
+++ b/src/web-ui/src/infrastructure/config/components/ReasoningPresetEditor.scss
@@ -429,7 +429,7 @@
 
   &__action > .select,
   &__action > [data-bf-component='input'],
-  &__action > .bitfun-number-input {
+  &__action > [data-bf-component='number-input'] {
     min-width: 0;
   }
 
@@ -439,7 +439,7 @@
   }
 
   &__action > [data-bf-component='input'],
-  &__action > .bitfun-number-input {
+  &__action > [data-bf-component='number-input'] {
     flex: 1 1 160px;
   }
 
@@ -493,7 +493,7 @@
     flex: 1 1 100%;
   }
 
-  .bitfun-textarea__field {
+  [data-bf-component='textarea'] > [data-bf-part='input'] {
     min-height: 92px;
     font-family: $font-family-mono;
     font-size: var(--bf-appearance-token-font-size-2xs);
@@ -531,7 +531,7 @@
 
     &__action > .select:first-child,
     &__action > [data-bf-component='input'],
-    &__action > .bitfun-number-input,
+    &__action > [data-bf-component='number-input'],
     &__effort-control,
     &__action > .bitfun-reasoning-preset-editor__json {
       flex: 1 1 100%;
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 3aa8df5831..f3b7179703 100644
--- a/src/web-ui/src/infrastructure/config/components/ReasoningPresetEditor.test.tsx
+++ b/src/web-ui/src/infrastructure/config/components/ReasoningPresetEditor.test.tsx
@@ -51,6 +51,7 @@ vi.mock('@bitfun/ui', () => ({
     <button type="button" {...props}>{children}</button>
   ),
   Input: (props: React.InputHTMLAttributes<HTMLInputElement>) => <input {...props} />,
+  NumberInput: () => <input type="number" />,
   Switch: () => <input type="checkbox" />,
   Select: (props: SelectSpyProps) => {
     const label = props['aria-label'] ?? '';
@@ -68,6 +69,7 @@ vi.mock('@bitfun/ui', () => ({
       </select>
     );
   },
+  Textarea: () => <textarea />,
 }));
 
 vi.mock('@/component-library', () => ({
@@ -101,8 +103,6 @@ vi.mock('@/component-library', () => ({
   },
   Switch: () => <input type="checkbox" />,
   Input: (props: React.InputHTMLAttributes<HTMLInputElement>) => <input {...props} />,
-  NumberInput: () => <input type="number" />,
-  Textarea: () => <textarea />,
 }));
 
 const modelsDevReasoningCatalog: ModelsDevReasoningCatalog = {
diff --git a/src/web-ui/src/infrastructure/config/components/ReasoningPresetEditor.tsx b/src/web-ui/src/infrastructure/config/components/ReasoningPresetEditor.tsx
index f94928490f..f1040fae04 100644
--- a/src/web-ui/src/infrastructure/config/components/ReasoningPresetEditor.tsx
+++ b/src/web-ui/src/infrastructure/config/components/ReasoningPresetEditor.tsx
@@ -1,4 +1,4 @@
-import { Button, Icon, IconButton, Input, Select, Switch, Tooltip } 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';
 import {
@@ -7,7 +7,7 @@ import {
   Trash2,
 } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
-import { NumberInput, Select as LegacySelect, Textarea, type SelectOption } from '@/component-library';
+import { Select as LegacySelect } from '@/component-library';
 import type {
   ReasoningCatalogProjection,
   ReasoningConfig,
diff --git a/src/web-ui/src/infrastructure/config/components/ReviewCapacitySection.test.tsx b/src/web-ui/src/infrastructure/config/components/ReviewCapacitySection.test.tsx
index abcaafd204..7d3f25c45a 100644
--- a/src/web-ui/src/infrastructure/config/components/ReviewCapacitySection.test.tsx
+++ b/src/web-ui/src/infrastructure/config/components/ReviewCapacitySection.test.tsx
@@ -59,6 +59,12 @@ vi.mock('@/component-library', () => ({
     </button>
   ),
   ConfigPageLoading: ({ text }: { text: string }) => <div>{text}</div>,
+}));
+
+vi.mock('@bitfun/ui', () => ({
+  Button: ({ children, disabled, onClick }: React.ButtonHTMLAttributes<HTMLButtonElement>) => (
+    <button type="button" disabled={disabled} onClick={onClick}>{children}</button>
+  ),
   NumberInput: ({
     disabled,
     value,
diff --git a/src/web-ui/src/infrastructure/config/components/ReviewCapacitySection.tsx b/src/web-ui/src/infrastructure/config/components/ReviewCapacitySection.tsx
index 75963756ae..569783559d 100644
--- a/src/web-ui/src/infrastructure/config/components/ReviewCapacitySection.tsx
+++ b/src/web-ui/src/infrastructure/config/components/ReviewCapacitySection.tsx
@@ -1,8 +1,8 @@
-import { Button } from '@bitfun/ui';
+import { Button, NumberInput } from '@bitfun/ui';
 import React, { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { RotateCcw } from 'lucide-react';
-import { ConfigPageLoading, NumberInput } from '@/component-library';
+import { ConfigPageLoading } from '@/component-library';
 import { ConfigPageRow, ConfigPageSection } from './common';
 import { useCurrentWorkspace } from '@/infrastructure/contexts/WorkspaceContext';
 import { isTauriRuntime } from '@/infrastructure/runtime';
diff --git a/src/web-ui/src/infrastructure/config/components/RuntimeSettingsPages.scss b/src/web-ui/src/infrastructure/config/components/RuntimeSettingsPages.scss
index 41abe86f4d..af7b91dfb0 100644
--- a/src/web-ui/src/infrastructure/config/components/RuntimeSettingsPages.scss
+++ b/src/web-ui/src/infrastructure/config/components/RuntimeSettingsPages.scss
@@ -79,10 +79,6 @@
     min-width: 0;
   }
 
-  &__pet-select .select__trigger {
-    min-height: 38px;
-  }
-
   &__pet-actions {
     display: flex;
     align-items: center;
@@ -286,10 +282,6 @@
 
 }
 
-.bitfun-runtime-settings__pet-select-dropdown {
-  max-height: min(320px, calc(100vh - 16px));
-}
-
 @media (prefers-reduced-motion: reduce) {
   .bitfun-runtime-settings {
     &__pet-expand-button,
diff --git a/src/web-ui/src/infrastructure/config/components/RuntimeSettingsPages.tsx b/src/web-ui/src/infrastructure/config/components/RuntimeSettingsPages.tsx
index 2cfefb7fc6..a00275b7d0 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, Select, Switch, Tooltip, ScrollArea } from '@bitfun/ui';
+import { Button, Icon, IconButton, Modal, NumberInput, Select, Switch, Tooltip, ScrollArea } from '@bitfun/ui';
 import React, { useState, useEffect, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { RefreshCw, Trash2 } from 'lucide-react';
-import { NumberInput, ConfigPageLoading, Select as LegacySelect, type SelectOption } from '@/component-library';
+import { ConfigPageLoading, type SelectOption } from '@/component-library';
 import { confirmDanger } from '@/infrastructure/confirm-dialog';
 import { ConfigPageHeader, ConfigPageLayout, ConfigPageContent, ConfigPageSection, ConfigPageRow } from './common';
 import { aiExperienceConfigService, type AIExperienceSettings } from '../services/AIExperienceConfigService';
@@ -898,14 +898,17 @@ const RuntimeSettingsPage: React.FC<RuntimeSettingsPageProps> = ({ page }) => {
             description={t('features.pet.displayModeDescription')}
             align="center"
           >
-            <LegacySelect
+            <Select
               className="bitfun-runtime-settings__pet-select"
-              dropdownClassName="bitfun-runtime-settings__pet-select-dropdown"
-              size="small"
-              options={companionDisplayModeOptions}
+              size="sm"
+              options={companionDisplayModeOptions.map(option => ({
+                disabled: option.disabled,
+                label: option.description ? `${option.label} — ${option.description}` : option.label,
+                value: option.value,
+              }))}
               value={settings.agent_companion_display_mode}
-              onChange={(value) => {
-                const selectedValue = String(Array.isArray(value) ? value[0] : value);
+              onValueChange={(value) => {
+                const selectedValue = String(value);
                 void updateSetting(
                   'agent_companion_display_mode',
                   selectedValue === 'desktop' ? 'desktop' : 'input',
diff --git a/src/web-ui/src/infrastructure/config/components/WorktreeSettingsPage.test.tsx b/src/web-ui/src/infrastructure/config/components/WorktreeSettingsPage.test.tsx
index aba4bd93fa..8028f95b77 100644
--- a/src/web-ui/src/infrastructure/config/components/WorktreeSettingsPage.test.tsx
+++ b/src/web-ui/src/infrastructure/config/components/WorktreeSettingsPage.test.tsx
@@ -81,25 +81,6 @@ vi.mock('@/component-library', () => ({
   }: {
     onClick: () => void;
   }) => <button type="button" onClick={onClick}>refresh</button>,
-  NumberInput: ({
-    disabled,
-    label,
-    onChange,
-    value,
-  }: {
-    disabled?: boolean;
-    label?: string;
-    onChange: (value: number) => void;
-    value: number;
-  }) => (
-    <input
-      aria-label={label}
-      disabled={disabled}
-      type="number"
-      value={value}
-      onChange={event => onChange(Number(event.currentTarget.value))}
-    />
-  ),
 }));
 
 vi.mock('@bitfun/ui', () => ({
@@ -149,6 +130,20 @@ vi.mock('@bitfun/ui', () => ({
     </button>
   ),
   Input: (props: React.InputHTMLAttributes<HTMLInputElement>) => <input {...props} />,
+  NumberInput: ({ disabled, label, onChange, value }: {
+    disabled?: boolean;
+    label?: string;
+    onChange: (value: number) => void;
+    value: number;
+  }) => (
+    <input
+      aria-label={label}
+      disabled={disabled}
+      type="number"
+      value={value}
+      onChange={event => onChange(Number(event.currentTarget.value))}
+    />
+  ),
   Switch: ({ checked, disabled, onChange }: {
     checked: boolean;
     disabled?: boolean;
diff --git a/src/web-ui/src/infrastructure/config/components/WorktreeSettingsPage.tsx b/src/web-ui/src/infrastructure/config/components/WorktreeSettingsPage.tsx
index b4c6e29c1f..771dea2872 100644
--- a/src/web-ui/src/infrastructure/config/components/WorktreeSettingsPage.tsx
+++ b/src/web-ui/src/infrastructure/config/components/WorktreeSettingsPage.tsx
@@ -1,4 +1,4 @@
-import { Button, ConfirmDialog, Icon, IconButton, Input, Switch, Tooltip } from '@bitfun/ui';
+import { Button, ConfirmDialog, Icon, IconButton, Input, NumberInput, Switch, Tooltip } from '@bitfun/ui';
 import React, {
   useCallback,
   useEffect,
@@ -15,7 +15,7 @@ import {
   Trash2,
 } from 'lucide-react';
 import { openAgentCompanionSession } from '@/app/services/openAgentCompanionSession';
-import { ConfigPageLoading, ConfigPageMessage, ConfigPageRefreshButton, NumberInput } from '@/component-library';
+import { ConfigPageLoading, ConfigPageMessage, ConfigPageRefreshButton } from '@/component-library';
 
 import { confirmWarning } from '@/infrastructure/confirm-dialog';
 import { flowChatManager } from '@/flow_chat/services/FlowChatManager';
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 94cd53155f..4b98c796b8 100644
--- a/src/web-ui/src/infrastructure/config/components/common/ConfigPageLayout.scss
+++ b/src/web-ui/src/infrastructure/config/components/common/ConfigPageLayout.scss
@@ -212,7 +212,7 @@
 
   > [data-bf-component='input'],
   > .select,
-  > .bitfun-number-input {
+  > [data-bf-component='number-input'] {
     width: 100%;
     min-width: 0;
   }
@@ -224,20 +224,20 @@
    */
   > div:has(> .select),
   > div:has(> [data-bf-component='input']),
-  > div:has(> .bitfun-number-input) {
+  > div:has(> [data-bf-component='number-input']) {
     width: 100%;
     min-width: 0;
 
     > .select,
     > [data-bf-component='input'],
-    > .bitfun-number-input {
+    > [data-bf-component='number-input'] {
       width: 100%;
       min-width: 0;
     }
   }
 
-  > .bitfun-number-input .bitfun-number-input__input,
-  > div:has(> .bitfun-number-input) > .bitfun-number-input .bitfun-number-input__input {
+  > [data-bf-component='number-input'] [data-bf-part='input'],
+  > div:has(> [data-bf-component='number-input']) > [data-bf-component='number-input'] [data-bf-part='input'] {
     text-align: left;
   }
 }
diff --git a/src/web-ui/src/infrastructure/config/components/form-controls/ConfigCheckbox.tsx b/src/web-ui/src/infrastructure/config/components/form-controls/ConfigCheckbox.tsx
index e429f075b7..9d52275a09 100644
--- a/src/web-ui/src/infrastructure/config/components/form-controls/ConfigCheckbox.tsx
+++ b/src/web-ui/src/infrastructure/config/components/form-controls/ConfigCheckbox.tsx
@@ -1,6 +1,6 @@
 import React, { forwardRef } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Checkbox } from '@/component-library';
+import { Checkbox } from '@bitfun/ui';
 
 export interface ConfigCheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
    
diff --git a/src/web-ui/src/infrastructure/config/components/form-controls/ConfigTextarea.tsx b/src/web-ui/src/infrastructure/config/components/form-controls/ConfigTextarea.tsx
index 07d74d32fe..fa0edd2c1b 100644
--- a/src/web-ui/src/infrastructure/config/components/form-controls/ConfigTextarea.tsx
+++ b/src/web-ui/src/infrastructure/config/components/form-controls/ConfigTextarea.tsx
@@ -1,6 +1,6 @@
 import React, { forwardRef } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Textarea } from '@/component-library';
+import { Textarea } from '@bitfun/ui';
 
 export interface ConfigTextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
    
diff --git a/src/web-ui/src/infrastructure/font-preference/appearance.ts b/src/web-ui/src/infrastructure/font-preference/appearance.ts
index ba07d1b79e..ef2281ded2 100644
--- a/src/web-ui/src/infrastructure/font-preference/appearance.ts
+++ b/src/web-ui/src/infrastructure/font-preference/appearance.ts
@@ -5,12 +5,7 @@ export const fontPreferenceAppearanceDescriptor: AppearanceSurfaceDescriptor = {
   parts: [
     { id: 'root' },
     { id: 'customControls' },
-    { id: 'numberInput' },
-    { id: 'error' },
     { id: 'preview' },
     { id: 'flowChatControls' },
   ],
-  states: [
-    { id: 'error', selector: { kind: 'self', suffix: '[data-bf-state~="error"]' } },
-  ],
 };
diff --git a/src/web-ui/src/infrastructure/font-preference/components/FontPreferencePanel.scss b/src/web-ui/src/infrastructure/font-preference/components/FontPreferencePanel.scss
index e9295f5b41..98062248e3 100644
--- a/src/web-ui/src/infrastructure/font-preference/components/FontPreferencePanel.scss
+++ b/src/web-ui/src/infrastructure/font-preference/components/FontPreferencePanel.scss
@@ -95,97 +95,8 @@
     color: inherit;
   }
 
-  &__stepper {
-    display: flex;
-    align-items: center;
-    gap: 0;
-    border: 1px solid var(--bf-appearance-token-border-base);
-    border-radius: $size-radius-sm;
-    overflow: hidden;
-    width: fit-content;
-
-    &:focus-within {
-      outline: none !important;
-      outline-offset: 0 !important;
-      box-shadow: none !important;
-    }
-  }
-
-  &__custom-unit {
-    font-size: var(--bf-appearance-token-font-size-sm);
-    color: var(--bf-appearance-token-color-text-secondary);
-    flex-shrink: 0;
-  }
-
-  &__step-btn {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 28px;
-    height: 28px;
-    background: transparent;
-    border: none;
-    color: var(--bf-appearance-token-color-text-secondary);
-    cursor: pointer;
-    font-size: var(--bf-appearance-token-font-size-base);
-    transition: background $motion-fast $easing-standard;
-    flex-shrink: 0;
-
-    &:hover:not(:disabled) {
-      background: var(--bf-appearance-token-element-bg-subtle);
-      color: var(--bf-appearance-token-color-text-primary);
-    }
-
-    &:disabled {
-      opacity: 0.4;
-      cursor: not-allowed;
-    }
-  }
-
-  &__number-input {
-    width: 56px;
-    height: 28px;
-    padding: 0 $size-gap-2;
-    border: none;
-    border-left: 1px solid var(--bf-appearance-token-border-base);
-    border-right: 1px solid var(--bf-appearance-token-border-base);
-    background: var(--bf-appearance-token-color-bg-primary);
-    color: var(--bf-appearance-token-color-text-primary);
-    font-size: var(--bf-appearance-token-font-size-sm);
-    text-align: center;
-    outline: none !important;
-    outline-offset: 0 !important;
-    appearance: textfield;
-
-    &:focus,
-    &:focus-visible {
-      outline: none !important;
-      outline-offset: 0 !important;
-      box-shadow: none !important;
-    }
-
-    &::-webkit-outer-spin-button,
-    &::-webkit-inner-spin-button {
-      appearance: none;
-      margin: 0;
-    }
-
-    &:disabled {
-      opacity: 0.4;
-      cursor: not-allowed;
-    }
-
-    &--error {
-      border-left-color: var(--bf-appearance-token-color-error);
-      border-right-color: var(--bf-appearance-token-color-error);
-      color: var(--bf-appearance-token-color-error);
-    }
-  }
-
-  &__error {
-    font-size: var(--bf-appearance-token-font-size-xs);
-    color: var(--bf-appearance-token-color-error);
-    width: 100%;
+  &__custom-number-input {
+    width: 116px;
   }
 
   &__custom-hint {
diff --git a/src/web-ui/src/infrastructure/font-preference/components/FontPreferencePanel.tsx b/src/web-ui/src/infrastructure/font-preference/components/FontPreferencePanel.tsx
index 193a4fc750..b1395564a4 100644
--- a/src/web-ui/src/infrastructure/font-preference/components/FontPreferencePanel.tsx
+++ b/src/web-ui/src/infrastructure/font-preference/components/FontPreferencePanel.tsx
@@ -1,12 +1,13 @@
 import {
   Button,
+  NumberInput,
   SegmentedControl,
   Select,
   Switch,
   type SegmentedControlOption,
   type SelectOption,
 } from '@bitfun/ui';
-import React, { useMemo, useState, useCallback, useEffect } from 'react';
+import { useMemo, useState, useCallback, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ConfigPageRow, ConfigPageSection } from '@/infrastructure/config/components/common';
 import { useFontPreference } from '../hooks/useFontPreference';
@@ -23,7 +24,6 @@ export function FontPreferencePanel() {
   const { level, customPx } = preference.uiSize;
   const [customInput, setCustomInput] = useState<string>(String(customPx ?? 14));
   const [fcBaseInput, setFcBaseInput] = useState<string>(String(preference.flowChat.basePx ?? 14));
-  const [customError, setCustomError] = useState<string | null>(null);
 
   useEffect(() => {
     if (preference.flowChat.mode === 'independent') {
@@ -56,34 +56,17 @@ export function FontPreferencePanel() {
     } else {
       await setUiSize(l);
     }
-    setCustomError(null);
   }, [getEffectiveUiBasePx, setUiSize]);
 
-  const handleCustomInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const raw = e.target.value;
-    setCustomInput(raw);
-    const px = parseInt(raw, 10);
-    if (isNaN(px) || px < 12 || px > 20) {
-      setCustomError(t('appearance.fontSize.customPxOutOfRange'));
-    } else {
-      setCustomError(null);
-      void setUiSize('custom', px);
-    }
-  };
-
-  const handleCustomStep = (delta: number) => {
-    const current = parseInt(customInput, 10);
-    const next = Math.max(12, Math.min(20, (isNaN(current) ? 14 : current) + delta));
-    setCustomInput(String(next));
-    setCustomError(null);
-    void setUiSize('custom', next);
+  const handleCustomValueChange = (px: number) => {
+    setCustomInput(String(px));
+    void setUiSize('custom', px);
   };
 
   const handleReset = async () => {
     await reset();
     setCustomInput('14');
     setFcBaseInput('14');
-    setCustomError(null);
   };
 
   const previewBasePx = level === 'custom'
@@ -204,57 +187,29 @@ export function FontPreferencePanel() {
                   data-bf-component="font-preference"
                   data-bf-part="customControls"
                 >
-                  <div className="font-pref-panel__stepper">
-                    <button
-                      type="button"
-                      className="font-pref-panel__step-btn"
-                      onClick={() => handleCustomStep(-1)}
-                      aria-label="-1"
-                      data-testid="appearance-ui-font-custom-step-minus"
-                    >−</button>
-                    <input
-                      type="number"
-                      className={[
-                        'font-pref-panel__number-input',
-                        customError ? 'font-pref-panel__number-input--error' : '',
-                      ].join(' ').trim()}
-                      value={customInput}
-                      min={12}
-                      max={20}
-                      step={1}
-                      placeholder={t('appearance.fontSize.customPxPlaceholder')}
-                      onChange={handleCustomInputChange}
-                      onFocus={() => void handleLevelClick('custom')}
-                      aria-invalid={!!customError}
-                      data-testid="appearance-ui-font-custom-input"
-                      data-font-level="custom"
-                      data-bf-component="font-preference"
-                      data-bf-part="numberInput"
-                      data-bf-state={customError ? 'error' : undefined}
-                    />
-                    <button
-                      type="button"
-                      className="font-pref-panel__step-btn"
-                      onClick={() => handleCustomStep(1)}
-                      aria-label="+1"
-                      data-testid="appearance-ui-font-custom-step-plus"
-                    >+</button>
-                  </div>
-                  <span className="font-pref-panel__custom-unit">px</span>
+                  <NumberInput
+                    className="font-pref-panel__custom-number-input"
+                    value={parseInt(customInput, 10) || 14}
+                    min={12}
+                    max={20}
+                    step={1}
+                    unit="px"
+                    variant="stepper"
+                    size="sm"
+                    decrementLabel={`${t('appearance.fontSize.customPxLabel')} −1`}
+                    incrementLabel={`${t('appearance.fontSize.customPxLabel')} +1`}
+                    onChange={handleCustomValueChange}
+                    inputProps={{
+                      'aria-label': t('appearance.fontSize.customPxLabel'),
+                      'data-testid': 'appearance-ui-font-custom-input',
+                      'data-font-level': 'custom',
+                      onFocus: () => void handleLevelClick('custom'),
+                    }}
+                  />
                 </div>
               )}
             </div>
           </div>
-          {customError && (
-            <span
-              className="font-pref-panel__error"
-              data-bf-component="font-preference"
-              data-bf-part="error"
-              data-bf-state="error"
-            >
-              {customError}
-            </span>
-          )}
 
           {/* Live preview */}
           <div
diff --git a/src/web-ui/src/infrastructure/i18n/components/LanguageSelector.scss b/src/web-ui/src/infrastructure/i18n/components/LanguageSelector.scss
index 1fc5231dc5..7af73637ff 100644
--- a/src/web-ui/src/infrastructure/i18n/components/LanguageSelector.scss
+++ b/src/web-ui/src/infrastructure/i18n/components/LanguageSelector.scss
@@ -8,40 +8,7 @@
   
   &--dropdown {
     .language-selector__select {
-      appearance: none;
-      background: var(--bf-appearance-token-element-bg-base);
-      border: 1px solid var(--bf-appearance-token-border-base);
-      border-radius: var(--bf-appearance-token-size-radius-sm);
-      padding: 6px 28px 6px 10px;
-      font-size: 13px;
-      color: var(--bf-appearance-token-color-text-primary);
-      cursor: pointer;
-      transition:
-        background-color 0.2s ease,
-        border-color 0.2s ease,
-        box-shadow 0.2s ease,
-        color 0.2s ease;
-      
-      
-      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
-      background-repeat: no-repeat;
-      background-position: right 8px center;
-      
-      &:hover:not(:disabled) {
-        border-color: var(--bf-appearance-token-border-medium);
-        background-color: var(--bf-appearance-token-element-bg-medium);
-      }
-      
-      &:focus {
-        outline: none;
-        border-color: var(--bf-appearance-token-color-accent-400);
-        box-shadow: 0 0 0 2px color-mix(in srgb, var(--bf-appearance-token-color-accent-400) 20%, transparent);
-      }
-      
-      &:disabled {
-        opacity: 0.6;
-        cursor: not-allowed;
-      }
+      min-inline-size: 140px;
     }
     
     .language-selector__loading {
@@ -56,77 +23,14 @@
     gap: 4px;
     
     .language-selector__inline-button {
-      padding: 4px 10px;
-      border: 1px solid transparent;
-      border-radius: var(--bf-appearance-token-size-radius-sm);
-      background: transparent;
-      color: var(--bf-appearance-token-color-text-secondary);
-      font-size: 13px;
-      cursor: pointer;
-      transition:
-        background-color 0.2s ease,
-        border-color 0.2s ease,
-        color 0.2s ease,
-        opacity 0.2s ease,
-        transform 0.2s ease;
-      
-      &:hover:not(:disabled) {
-        background: var(--bf-appearance-token-element-bg-base);
-        color: var(--bf-appearance-token-color-text-primary);
-      }
-      
       &--active {
-        background: var(--bf-appearance-token-element-bg-medium);
-        color: var(--bf-appearance-token-color-accent-500);
-        border-color: var(--bf-appearance-token-color-accent-200);
-        
-        &:hover:not(:disabled) {
-          background: var(--bf-appearance-token-element-bg-medium);
-        }
-      }
-      
-      &:disabled {
-        opacity: 0.6;
-        cursor: not-allowed;
+        font-weight: var(--bf-font-weight-semibold);
       }
     }
   }
   
   
   &--icon-only {
-    .language-selector__button {
-      display: flex;
-      align-items: center;
-      gap: 4px;
-      padding: 6px 10px;
-      border: 1px solid transparent;
-      border-radius: var(--bf-appearance-token-size-radius-sm);
-      background: transparent;
-      color: var(--bf-appearance-token-color-text-secondary);
-      font-size: 13px;
-      cursor: pointer;
-      transition:
-        background-color 0.2s ease,
-        border-color 0.2s ease,
-        color 0.2s ease,
-        opacity 0.2s ease,
-        transform 0.2s ease;
-      
-      &:hover:not(:disabled) {
-        background: var(--bf-appearance-token-element-bg-base);
-        color: var(--bf-appearance-token-color-text-primary);
-      }
-      
-      &:disabled {
-        opacity: 0.6;
-        cursor: not-allowed;
-      }
-    }
-    
-    .language-selector__icon {
-      font-size: 16px;
-    }
-    
     .language-selector__code {
       font-size: 11px;
       font-weight: 500;
@@ -159,38 +63,12 @@
     }
     
     .language-selector__option {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
       width: 100%;
-      padding: 8px 12px;
-      border: none;
-      border-radius: var(--bf-appearance-token-size-radius-sm);
-      background: transparent;
-      color: var(--bf-appearance-token-color-text-secondary);
-      font-size: 13px;
-      text-align: left;
-      cursor: pointer;
-      transition:
-        background-color 0.15s ease,
-        color 0.15s ease,
-        opacity 0.15s ease,
-        transform 0.15s ease;
-      
-      &:hover:not(:disabled) {
-        background: var(--bf-appearance-token-element-bg-base);
-        color: var(--bf-appearance-token-color-text-primary);
-      }
-      
+
       &--active {
         color: var(--bf-appearance-token-color-accent-500);
         font-weight: 500;
       }
-      
-      &:disabled {
-        opacity: 0.6;
-        cursor: not-allowed;
-      }
     }
     
     .language-selector__check {
diff --git a/src/web-ui/src/infrastructure/i18n/components/LanguageSelector.tsx b/src/web-ui/src/infrastructure/i18n/components/LanguageSelector.tsx
index 60a7812a4d..a633f196aa 100644
--- a/src/web-ui/src/infrastructure/i18n/components/LanguageSelector.tsx
+++ b/src/web-ui/src/infrastructure/i18n/components/LanguageSelector.tsx
@@ -2,10 +2,9 @@
 
 import React, { useCallback } from 'react';
 import { Globe } from 'lucide-react';
+import { ActionItem, Button, Select, Tooltip } from '@bitfun/ui';
 import { useLanguageSelector } from '../hooks/useI18n';
 import type { LocaleId } from '../types';
-import { IconButton } from '@components/IconButton/IconButton';
-import { Select } from '@components/Select/Select';
 import './LanguageSelector.scss';
 
 export interface LanguageSelectorProps {
@@ -44,46 +43,51 @@ export const LanguageSelector: React.FC<LanguageSelectorProps> = ({
         data-bf-mode="icon-only"
         data-bf-state={isChanging ? 'changing' : undefined}
       >
-        <IconButton
-          className="language-selector__button"
-          variant="ghost"
-          size="small"
-          disabled={isChanging}
-          tooltip={currentLocale?.nativeName || currentLanguage}
-          data-bf-component="language-selector"
-          data-bf-part="trigger"
-        >
-          <span
-            className="language-selector__icon"
-            data-bf-component="language-selector"
-            data-bf-part="icon"
-          >
-            <Globe size={16} />
-          </span>
-          <span
-            className="language-selector__code"
-            data-bf-component="language-selector"
-            data-bf-part="code"
-          >
-            {currentLanguage.split('-')[0].toUpperCase()}
-          </span>
-        </IconButton>
+        <span data-bf-component="language-selector" data-bf-part="trigger">
+          <Tooltip content={currentLocale?.nativeName || currentLanguage}>
+            <Button
+              aria-label={currentLocale?.nativeName || currentLanguage}
+              className="language-selector__button"
+              variant="outline"
+              size="sm"
+              disabled={isChanging}
+              leadingIcon={(
+                <span data-bf-component="language-selector" data-bf-part="icon">
+                  <Globe size={16} />
+                </span>
+              )}
+            >
+              <span
+                className="language-selector__code"
+                data-bf-component="language-selector"
+                data-bf-part="code"
+              >
+                {currentLanguage.split('-')[0].toUpperCase()}
+              </span>
+            </Button>
+          </Tooltip>
+        </span>
         <div
           className="language-selector__dropdown"
           data-bf-component="language-selector"
           data-bf-part="menu"
         >
           {supportedLocales.map(locale => (
-            <IconButton
+            <ActionItem
               key={locale.id}
               className={`language-selector__option ${locale.id === currentLanguage ? 'language-selector__option--active' : ''}`}
-              variant="ghost"
-              size="small"
               onClick={() => handleChange(locale.id)}
               disabled={isChanging}
               data-bf-component="language-selector"
               data-bf-part="option"
               data-bf-state={locale.id === currentLanguage ? 'active' : undefined}
+              metadata={locale.id === currentLanguage ? (
+                <span
+                  className="language-selector__check"
+                  data-bf-component="language-selector"
+                  data-bf-part="check"
+                >✓</span>
+              ) : undefined}
             >
               <span
                 className="language-selector__option-name"
@@ -92,14 +96,7 @@ export const LanguageSelector: React.FC<LanguageSelectorProps> = ({
               >
                 {showNativeName ? locale.nativeName : locale.englishName}
               </span>
-              {locale.id === currentLanguage && (
-                <span
-                  className="language-selector__check"
-                  data-bf-component="language-selector"
-                  data-bf-part="check"
-                >✓</span>
-              )}
-            </IconButton>
+            </ActionItem>
           ))}
         </div>
       </div>
@@ -116,11 +113,11 @@ export const LanguageSelector: React.FC<LanguageSelectorProps> = ({
         data-bf-state={isChanging ? 'changing' : undefined}
       >
         {supportedLocales.map(locale => (
-          <IconButton
+          <Button
             key={locale.id}
             className={`language-selector__inline-button ${locale.id === currentLanguage ? 'language-selector__inline-button--active' : ''}`}
-            variant="ghost"
-            size="small"
+            variant="text"
+            size="sm"
             onClick={() => handleChange(locale.id)}
             disabled={isChanging}
             data-bf-component="language-selector"
@@ -128,7 +125,7 @@ export const LanguageSelector: React.FC<LanguageSelectorProps> = ({
             data-bf-state={locale.id === currentLanguage ? 'active' : undefined}
           >
             {showNativeName ? locale.nativeName : locale.englishName}
-          </IconButton>
+          </Button>
         ))}
       </div>
     );
@@ -146,7 +143,7 @@ export const LanguageSelector: React.FC<LanguageSelectorProps> = ({
       <Select
         className="language-selector__select"
         value={currentLanguage}
-        onChange={(value) => handleChange(value as LocaleId)}
+        onValueChange={(value) => handleChange(value as LocaleId)}
         disabled={isChanging}
         options={supportedLocales.map(locale => ({
           value: locale.id,
diff --git a/src/web-ui/src/infrastructure/peer-device/DeviceSurfaceSwitcher.scss b/src/web-ui/src/infrastructure/peer-device/DeviceSurfaceSwitcher.scss
index d53951eeb0..bbf212f6a4 100644
--- a/src/web-ui/src/infrastructure/peer-device/DeviceSurfaceSwitcher.scss
+++ b/src/web-ui/src/infrastructure/peer-device/DeviceSurfaceSwitcher.scss
@@ -28,12 +28,16 @@
   transition: background $motion-fast $easing-standard,
               color $motion-fast $easing-standard;
 
+  &__trigger {
+    inline-size: 100%;
+  }
+
   &:hover {
     color: var(--bf-appearance-token-color-text-primary);
     background: var(--bf-appearance-token-element-bg-soft);
   }
 
-  &[data-bf-state='remote'] {
+  &.is-remote {
     background: color-mix(in srgb, var(--bf-appearance-token-color-warning) 14%, transparent);
     color: var(--bf-appearance-token-color-text-primary);
 
@@ -114,51 +118,25 @@
     gap: $size-gap-1;
     border-radius: $size-radius-sm;
 
-    &:hover {
-      background: var(--bf-appearance-token-element-bg-soft);
-    }
-
     &.is-offline {
       opacity: 0.45;
     }
   }
 
   &__item-main {
-    display: flex;
-    align-items: center;
-    gap: $size-gap-2;
     flex: 1 1 auto;
+    inline-size: 0;
     min-width: 0;
-    height: 30px;
-    padding: 0 $size-gap-2;
-    border: none;
-    border-radius: $size-radius-sm;
-    background: transparent;
-    color: var(--bf-appearance-token-color-text-secondary);
-    cursor: pointer;
-    font-size: var(--bf-appearance-token-font-size-sm);
-    text-align: left;
-
-    &:disabled {
-      cursor: default;
-    }
-
-    &:focus-visible {
-      outline: 2px solid var(--bf-appearance-token-color-accent-500);
-      outline-offset: -1px;
-    }
   }
 
   &__item.is-current &__item-main {
     color: var(--bf-appearance-token-color-text-primary);
   }
 
-  &__item-label {
-    flex: 1 1 auto;
-    min-width: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+  &__item-metadata {
+    display: inline-flex;
+    align-items: center;
+    gap: $size-gap-1;
   }
 
   &__dot {
diff --git a/src/web-ui/src/infrastructure/peer-device/DeviceSurfaceSwitcher.tsx b/src/web-ui/src/infrastructure/peer-device/DeviceSurfaceSwitcher.tsx
index 31d44e5429..c78035f91f 100644
--- a/src/web-ui/src/infrastructure/peer-device/DeviceSurfaceSwitcher.tsx
+++ b/src/web-ui/src/infrastructure/peer-device/DeviceSurfaceSwitcher.tsx
@@ -8,7 +8,7 @@
  */
 
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { Button, Icon, ScrollArea } from '@bitfun/ui';
+import { ActionItem, Button, Icon, ScrollArea } from '@bitfun/ui';
 import { createPortal } from 'react-dom';
 import { ChevronUp, Monitor, MonitorSmartphone, Loader2 } from 'lucide-react';
 import { useI18n } from '@/infrastructure/i18n/hooks/useI18n';
@@ -155,10 +155,13 @@ export const DeviceSurfaceSwitcher: React.FC = () => {
 
   return (
     <>
-      <button
+      <ActionItem
         ref={triggerRef}
-        type="button"
-        className="bitfun-device-switcher"
+        className={[
+          'bitfun-device-switcher',
+          isRemote && 'is-remote',
+        ].filter(Boolean).join(' ')}
+        triggerClassName="bitfun-device-switcher__trigger"
         data-testid="device-surface-switcher"
         data-bf-component="peer-device"
         data-bf-part="switcher"
@@ -166,13 +169,29 @@ export const DeviceSurfaceSwitcher: React.FC = () => {
         aria-expanded={open}
         aria-label={t('accountLogin.deviceSwitcher.open')}
         title={t('accountLogin.deviceSwitcher.open')}
-        onClick={() => setOpen(value => !value)}
-      >
-        {switching ? (
-          <Loader2 size={13} className="bitfun-device-switcher__icon is-spinning" aria-hidden="true" />
+        leading={switching ? (
+          <Loader2 className="bitfun-device-switcher__icon is-spinning" aria-hidden="true" />
         ) : (
-          <Monitor size={13} className="bitfun-device-switcher__icon" aria-hidden="true" />
+          <Monitor className="bitfun-device-switcher__icon" aria-hidden="true" />
+        )}
+        metadata={(
+          <>
+            {busyElsewhereCount > 0 && (
+              <span
+                className="bitfun-device-switcher__elsewhere"
+                data-bf-component="peer-device"
+                data-bf-part="switcherElsewhere"
+                title={t('accountLogin.deviceSwitcher.othersRunning', { count: busyElsewhereCount })}
+              >
+                <MonitorSmartphone size={11} aria-hidden="true" />
+                {busyElsewhereCount}
+              </span>
+            )}
+            <ChevronUp size={13} className="bitfun-device-switcher__chevron" aria-hidden="true" />
+          </>
         )}
+        onClick={() => setOpen(value => !value)}
+      >
         <span
           className="bitfun-device-switcher__label"
           data-bf-component="peer-device"
@@ -180,19 +199,7 @@ export const DeviceSurfaceSwitcher: React.FC = () => {
         >
           {currentLabel}
         </span>
-        {busyElsewhereCount > 0 && (
-          <span
-            className="bitfun-device-switcher__elsewhere"
-            data-bf-component="peer-device"
-            data-bf-part="switcherElsewhere"
-            title={t('accountLogin.deviceSwitcher.othersRunning', { count: busyElsewhereCount })}
-          >
-            <MonitorSmartphone size={11} aria-hidden="true" />
-            {busyElsewhereCount}
-          </span>
-        )}
-        <ChevronUp size={13} className="bitfun-device-switcher__chevron" aria-hidden="true" />
-      </button>
+      </ActionItem>
 
       {open && createPortal(
         <>
@@ -233,45 +240,51 @@ export const DeviceSurfaceSwitcher: React.FC = () => {
                   data-bf-component="peer-device"
                   data-bf-part="switcherItem"
                 >
-                  <button
-                    type="button"
+                  <ActionItem
                     role="menuitem"
                     className="bitfun-device-switcher__item-main"
+                    triggerClassName="bitfun-device-switcher__item-trigger"
                     disabled={!selectable}
-                    onClick={() => { void handleSelect(device); }}
-                  >
-                    <span
-                      className={[
-                        'bitfun-device-switcher__dot',
-                        busy && 'is-busy',
-                        !device.online && 'is-offline',
-                      ].filter(Boolean).join(' ')}
-                      data-bf-component="peer-device"
-                      data-bf-part="switcherStatusDot"
-                      data-bf-state={[
-                        busy && 'busy',
-                        !device.online && 'offline',
-                      ].filter(Boolean).join(' ') || undefined}
-                      aria-hidden="true"
-                    />
-                    <span className="bitfun-device-switcher__item-label">{device.deviceName}</span>
-                    {device.isLocal && (
-                      <span className="bitfun-device-switcher__tag">
-                        {t('accountLogin.thisDevice')}
-                      </span>
+                    leading={(
+                      <span
+                        className={[
+                          'bitfun-device-switcher__dot',
+                          busy && 'is-busy',
+                          !device.online && 'is-offline',
+                        ].filter(Boolean).join(' ')}
+                        data-bf-component="peer-device"
+                        data-bf-part="switcherStatusDot"
+                        data-bf-state={[
+                          busy && 'busy',
+                          !device.online && 'offline',
+                        ].filter(Boolean).join(' ') || undefined}
+                        aria-hidden="true"
+                      />
                     )}
-                    {busy && (
-                      <span className="bitfun-device-switcher__tag is-busy">
-                        {t('accountLogin.deviceSwitcher.running')}
+                    metadata={(
+                      <span className="bitfun-device-switcher__item-metadata">
+                        {device.isLocal && (
+                          <span className="bitfun-device-switcher__tag">
+                            {t('accountLogin.thisDevice')}
+                          </span>
+                        )}
+                        {busy && (
+                          <span className="bitfun-device-switcher__tag is-busy">
+                            {t('accountLogin.deviceSwitcher.running')}
+                          </span>
+                        )}
+                        {!device.online && (
+                          <span className="bitfun-device-switcher__tag">
+                            {t('accountLogin.offline')}
+                          </span>
+                        )}
+                        {isCurrent && <Icon name="check-line" size="xs" aria-hidden="true" />}
                       </span>
                     )}
-                    {!device.online && (
-                      <span className="bitfun-device-switcher__tag">
-                        {t('accountLogin.offline')}
-                      </span>
-                    )}
-                    {isCurrent && <Icon name="check-line" size="xs" aria-hidden="true" />}
-                  </button>
+                    onClick={() => { void handleSelect(device); }}
+                  >
+                    {device.deviceName}
+                  </ActionItem>
                   {attached && (
                     <Button
                       type="button"
diff --git a/src/web-ui/src/infrastructure/peer-device/PeerDirectoryBrowser.scss b/src/web-ui/src/infrastructure/peer-device/PeerDirectoryBrowser.scss
index e482adf0dc..37267ba024 100644
--- a/src/web-ui/src/infrastructure/peer-device/PeerDirectoryBrowser.scss
+++ b/src/web-ui/src/infrastructure/peer-device/PeerDirectoryBrowser.scss
@@ -90,6 +90,11 @@
     min-width: 0;
   }
 
+  &__path-input-field {
+    display: block;
+    width: 100%;
+  }
+
   &__path-display,
   &__path-input {
     width: 100%;
diff --git a/src/web-ui/src/infrastructure/peer-device/PeerDirectoryBrowser.tsx b/src/web-ui/src/infrastructure/peer-device/PeerDirectoryBrowser.tsx
index a9c2e41532..4680657422 100644
--- a/src/web-ui/src/infrastructure/peer-device/PeerDirectoryBrowser.tsx
+++ b/src/web-ui/src/infrastructure/peer-device/PeerDirectoryBrowser.tsx
@@ -3,7 +3,7 @@
  * Lists directories on the peer via HostInvoke FS APIs.
  */
 
-import { Button, Icon, IconButton, ScrollArea } from '@bitfun/ui';
+import { Button, Icon, IconButton, Input, ScrollArea } from '@bitfun/ui';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { getAppearanceOverlayHost } from '@/infrastructure/appearance/runtime/AppearanceOverlayHost';
@@ -264,38 +264,42 @@ export const PeerDirectoryBrowser: React.FC<PeerDirectoryBrowserProps> = ({
             data-bf-part="path"
           >
             {isEditingPath ? (
-              <input
-                ref={pathInputRef}
-                className="peer-directory-browser__path-input"
-                value={pathInputValue}
-                onChange={(event) => setPathInputValue(event.target.value)}
-                onBlur={handleCommitPathInput}
+              <span
+                className="peer-directory-browser__path-input-field"
                 data-bf-component="peer-device"
                 data-bf-part="pathInput"
-                onKeyDown={(event) => {
-                  if (
-                    (event.key === 'Enter' || event.key === 'Escape')
-                    && isImeOwnedKeyboardEvent(event, pathInputCompositionActiveRef.current)
-                  ) {
-                    event.stopPropagation();
-                    return;
-                  }
-                  if (event.key === 'Enter') {
-                    event.preventDefault();
-                    handleCommitPathInput();
-                  } else if (event.key === 'Escape') {
-                    event.preventDefault();
-                    setPathInputValue(currentPath);
-                    setIsEditingPath(false);
-                  }
-                }}
-                onCompositionStart={() => {
-                  pathInputCompositionActiveRef.current = true;
-                }}
-                onCompositionEnd={() => {
-                  pathInputCompositionActiveRef.current = false;
-                }}
-              />
+              >
+                <Input
+                  ref={pathInputRef}
+                  inputClassName="peer-directory-browser__path-input"
+                  value={pathInputValue}
+                  onValueChange={setPathInputValue}
+                  onBlur={handleCommitPathInput}
+                  onKeyDown={(event) => {
+                    if (
+                      (event.key === 'Enter' || event.key === 'Escape')
+                      && isImeOwnedKeyboardEvent(event, pathInputCompositionActiveRef.current)
+                    ) {
+                      event.stopPropagation();
+                      return;
+                    }
+                    if (event.key === 'Enter') {
+                      event.preventDefault();
+                      handleCommitPathInput();
+                    } else if (event.key === 'Escape') {
+                      event.preventDefault();
+                      setPathInputValue(currentPath);
+                      setIsEditingPath(false);
+                    }
+                  }}
+                  onCompositionStart={() => {
+                    pathInputCompositionActiveRef.current = true;
+                  }}
+                  onCompositionEnd={() => {
+                    pathInputCompositionActiveRef.current = false;
+                  }}
+                />
+              </span>
             ) : (
               <button
                 type="button"
diff --git a/src/web-ui/src/infrastructure/update/UpdateInstallProgressModal.tsx b/src/web-ui/src/infrastructure/update/UpdateInstallProgressModal.tsx
index e05f685693..788b7a872c 100644
--- a/src/web-ui/src/infrastructure/update/UpdateInstallProgressModal.tsx
+++ b/src/web-ui/src/infrastructure/update/UpdateInstallProgressModal.tsx
@@ -2,9 +2,8 @@
  * Full-screen style modal showing download progress for in-app updates.
  */
 
-import { Button, Modal } from '@bitfun/ui';
+import { Alert, Button, Modal } from '@bitfun/ui';
 import React, { useMemo } from 'react';
-import { Alert } from '@/component-library';
 import { useI18n } from '@/infrastructure/i18n';
 import type { UpdateDownloadProgressPayload } from './installUpdateWithProgress';
 import { formatUpdateInstallError } from './updateErrorMessage';
diff --git a/src/web-ui/src/tools/bitfun-canvas/runtime/sdk/adapters.test.tsx b/src/web-ui/src/tools/bitfun-canvas/runtime/sdk/adapters.test.tsx
new file mode 100644
index 0000000000..80a587c53e
--- /dev/null
+++ b/src/web-ui/src/tools/bitfun-canvas/runtime/sdk/adapters.test.tsx
@@ -0,0 +1,52 @@
+import { renderToStaticMarkup } from 'react-dom/server';
+import { describe, expect, it } from 'vitest';
+
+import { Card, CardBody, CardHeader, Empty, Pill, Tabs } from './adapters';
+
+describe('BitFun Canvas structural adapters', () => {
+  it('composes cards through the design-system anatomy', () => {
+    const markup = renderToStaticMarkup(
+      <Card variant="elevated" padding="medium">
+        <CardHeader title="Build" subtitle="Ready to run" />
+        <CardBody>Details</CardBody>
+      </Card>,
+    );
+
+    expect(markup).toContain('data-bf-component="card"');
+    expect(markup).toContain('data-appearance="raised"');
+    expect(markup).toContain('data-bf-part="header"');
+    expect(markup).toContain('data-bf-part="body"');
+  });
+
+  it('maps pills and empty states to stable feedback primitives', () => {
+    const markup = renderToStaticMarkup(
+      <>
+        <Pill tone="warning">Needs attention</Pill>
+        <Empty description="Nothing here" />
+      </>,
+    );
+
+    expect(markup).toContain('data-bf-component="status-pill"');
+    expect(markup).toContain('data-tone="warning"');
+    expect(markup).toContain('data-bf-component="empty"');
+    expect(markup).toContain('Nothing here');
+  });
+
+  it('connects tab selection with the matching panel', () => {
+    const markup = renderToStaticMarkup(
+      <Tabs
+        defaultActiveKey="second"
+        items={[
+          { key: 'first', label: 'First', children: 'First panel' },
+          { key: 'second', label: 'Second', children: 'Second panel' },
+        ]}
+      />,
+    );
+
+    expect(markup).toContain('data-bf-component="tab-group"');
+    expect(markup).toContain('aria-selected="true"');
+    expect(markup).toContain('role="tabpanel"');
+    expect(markup).toContain('Second panel');
+    expect(markup).not.toContain('First panel');
+  });
+});
diff --git a/src/web-ui/src/tools/bitfun-canvas/runtime/sdk/adapters.tsx b/src/web-ui/src/tools/bitfun-canvas/runtime/sdk/adapters.tsx
index a78bbe8b81..02c991fce9 100644
--- a/src/web-ui/src/tools/bitfun-canvas/runtime/sdk/adapters.tsx
+++ b/src/web-ui/src/tools/bitfun-canvas/runtime/sdk/adapters.tsx
@@ -1,14 +1,15 @@
 import React from 'react';
-import { Button as BitFunButton, StatusPill as DesignStatusPill } from '@bitfun/ui';
 import {
+  Button as BitFunButton,
   Card as BitFunCard,
   CardBody as BitFunCardBody,
   CardHeader as BitFunCardHeader,
-} from '@/component-library/components/Card';
-import { Empty as BitFunEmpty } from '@/component-library/components/Empty';
-import { Field as DesignField, Input as DesignInput } from '@bitfun/ui';
-import { TabPane as BitFunTabPane, Tabs as BitFunTabs } from '@/component-library/components/Tabs';
-import { Tag as BitFunTag } from '@/component-library/components/Tag';
+  Empty as BitFunEmpty,
+  Field as DesignField,
+  Input as DesignInput,
+  StatusPill as DesignStatusPill,
+  TabGroup as DesignTabGroup,
+} from '@bitfun/ui';
 import type {
   CanvasButtonProps,
   CanvasCardBodyProps,
@@ -17,23 +18,36 @@ import type {
   CanvasEmptyProps,
   CanvasInputProps,
   CanvasPillProps,
-  CanvasTabsItem,
   CanvasTabsProps,
   CanvasTone,
 } from './types';
 
-function cardVariant(variant: CanvasCardProps['variant']): React.ComponentProps<typeof BitFunCard>['variant'] {
+function cardAppearance(variant: CanvasCardProps['variant']): React.ComponentProps<typeof BitFunCard>['appearance'] {
   if (variant === 'borderless') return 'subtle';
-  return variant ?? 'default';
+  if (variant === 'elevated' || variant === 'accent') return 'raised';
+  if (variant === 'default') return 'neutral';
+  return 'subtle';
+}
+
+function cardPadding(padding: CanvasCardProps['padding']): React.ComponentProps<typeof BitFunCard>['padding'] {
+  if (padding === 'small') return 'sm';
+  if (padding === 'medium' || padding === 'large') return 'md';
+  return 'none';
+}
+
+function cardRadius(radius: CanvasCardProps['radius']): React.ComponentProps<typeof BitFunCard>['radius'] {
+  if (radius === 'small') return 'sm';
+  if (radius === 'large') return 'lg';
+  return 'md';
 }
 
 export function Card({ variant, padding = 'medium', radius = 'small', style, ...props }: CanvasCardProps) {
   return (
     <BitFunCard
       {...props}
-      variant={cardVariant(variant)}
-      padding={variant === 'borderless' ? 'none' : padding}
-      radius={radius}
+      appearance={cardAppearance(variant)}
+      padding={variant === 'borderless' ? 'none' : cardPadding(padding)}
+      radius={cardRadius(radius)}
       style={{
         ...(variant === 'borderless' ? { background: 'transparent' } : null),
         ...style,
@@ -47,8 +61,8 @@ export function CardHeader({ children, title, subtitle, trailing, ...props }: Ca
     <BitFunCardHeader
       {...props}
       title={title ?? children}
-      subtitle={subtitle}
-      extra={trailing}
+      description={subtitle}
+      actions={trailing}
     />
   );
 }
@@ -83,80 +97,94 @@ export function Button({ children, variant = 'secondary', size, ...props }: Canv
 }
 
 function pillTone(tone: CanvasTone | 'accent' | 'purple' | undefined, active: boolean) {
-  if (tone === 'danger' || tone === 'error') return { badge: 'danger' as const, tag: 'red' as const };
-  if (tone === 'success') return { badge: 'success' as const, tag: 'green' as const };
-  if (tone === 'warning') return { badge: 'warning' as const, tag: 'yellow' as const };
-  if (tone === 'info') return { badge: 'info' as const, tag: 'blue' as const };
-  if (tone === 'purple') return { badge: 'accent' as const, tag: 'purple' as const };
-  if (tone === 'accent' || active) return { badge: 'accent' as const, tag: 'blue' as const };
-  return { badge: 'neutral' as const, tag: 'gray' as const };
-}
-
-function tagSize(size: CanvasPillProps['size']): React.ComponentProps<typeof BitFunTag>['size'] {
-  if (size === 'sm') return 'small';
-  if (size === 'md') return 'medium';
-  if (size === 'lg') return 'large';
-  return size ?? 'medium';
+  if (tone === 'danger' || tone === 'error') return 'danger' as const;
+  if (tone === 'success') return 'success' as const;
+  if (tone === 'warning') return 'warning' as const;
+  if (tone === 'info') return 'info' as const;
+  if (tone === 'purple' || tone === 'accent' || active) return 'accent' as const;
+  return 'neutral' as const;
 }
 
 export function Pill({
   children,
   active = false,
   tone,
-  size,
+  size: _size,
   leadingContent,
   keyboardHint,
   className,
   ...props
 }: CanvasPillProps) {
-  const resolvedTone = pillTone(tone, active);
-  const content = (
-    <>
-      {leadingContent}
-      {children}
-      {keyboardHint ? <span className="bitfun-canvas-adapter-pill__hint">{keyboardHint}</span> : null}
-    </>
-  );
-
-  if (active) {
-    return (
-      <DesignStatusPill tone={resolvedTone.badge} className={className}>
-        {content}
-      </DesignStatusPill>
-    );
-  }
-
   return (
-    <BitFunTag
+    <DesignStatusPill
       {...props}
-      color={resolvedTone.tag}
-      size={tagSize(size)}
-      rounded
+      tone={pillTone(tone, active)}
+      leading={leadingContent}
       className={className}
     >
-      {content}
-    </BitFunTag>
+      {children}
+      {keyboardHint ? <span className="bitfun-canvas-adapter-pill__hint">{keyboardHint}</span> : null}
+    </DesignStatusPill>
   );
 }
 
-function renderTabItems(items: CanvasTabsItem[]) {
-  return items.map(item => (
-    <BitFunTabPane
-      key={item.key}
-      tabKey={item.key}
-      label={item.label}
-      disabled={item.disabled}
-    >
-      {item.children}
-    </BitFunTabPane>
-  ));
-}
+export function Tabs({
+  items = [],
+  children,
+  activeKey,
+  defaultActiveKey,
+  onChange,
+  type = 'line',
+  size = 'medium',
+  stretch = false,
+  className,
+  style,
+}: CanvasTabsProps) {
+  const tabsId = React.useId();
+  const [internalActiveKey, setInternalActiveKey] = React.useState(
+    defaultActiveKey ?? items.find(item => !item.disabled)?.key ?? '',
+  );
+  const candidateKey = activeKey ?? internalActiveKey;
+  const selectedItem = items.find(item => item.key === candidateKey && !item.disabled)
+    ?? items.find(item => !item.disabled);
+  const selectedKey = selectedItem?.key ?? '';
+
+  if (items.length === 0) {
+    return <div className={className} style={style}>{children}</div>;
+  }
+
+  const handleValueChange = (key: string) => {
+    if (activeKey === undefined) setInternalActiveKey(key);
+    onChange?.(key);
+  };
 
-export function Tabs({ items, children, ...props }: CanvasTabsProps) {
   return (
-    <BitFunTabs {...props}>
-      {items ? renderTabItems(items) : children}
-    </BitFunTabs>
+    <div
+      className={['bitfun-canvas-adapter-tabs', className].filter(Boolean).join(' ')}
+      data-size={size}
+      data-stretch={stretch ? 'true' : 'false'}
+      data-type={type}
+      style={style}
+    >
+      <DesignTabGroup
+        items={items.map(item => ({
+          disabled: item.disabled,
+          id: `${tabsId}-tab-${item.key}`,
+          label: item.label,
+          panelId: `${tabsId}-panel`,
+          value: item.key,
+        }))}
+        value={selectedKey}
+        onValueChange={handleValueChange}
+      />
+      <div
+        aria-labelledby={`${tabsId}-tab-${selectedKey}`}
+        id={`${tabsId}-panel`}
+        role="tabpanel"
+      >
+        {selectedItem?.children}
+      </div>
+    </div>
   );
 }
 
@@ -197,5 +225,5 @@ export function Input({
 }
 
 export function Empty(props: CanvasEmptyProps) {
-  return <BitFunEmpty {...props} />;
+  return <BitFunEmpty {...props} description={props.description ?? 'No data'} />;
 }
diff --git a/src/web-ui/src/tools/bitfun-canvas/runtime/sdk/controls.test.tsx b/src/web-ui/src/tools/bitfun-canvas/runtime/sdk/controls.test.tsx
index 666e3ed5de..a9589f416e 100644
--- a/src/web-ui/src/tools/bitfun-canvas/runtime/sdk/controls.test.tsx
+++ b/src/web-ui/src/tools/bitfun-canvas/runtime/sdk/controls.test.tsx
@@ -11,7 +11,7 @@ import {
 } from './controls';
 
 describe('BitFun Canvas control adapters', () => {
-  it('renders toggle through the design system and checkbox through the legacy controls', () => {
+  it('renders toggle and checkbox through the design system', () => {
     const markup = renderToStaticMarkup(
       <>
         <Toggle checked label="Enabled" />
@@ -20,7 +20,7 @@ describe('BitFun Canvas control adapters', () => {
     );
 
     expect(markup).toContain('data-bf-component="switch"');
-    expect(markup).toContain('bitfun-checkbox');
+    expect(markup).toContain('data-bf-component="checkbox"');
     expect(markup).toContain('Enabled');
     expect(markup).toContain('Reviewed');
   });
@@ -38,8 +38,9 @@ describe('BitFun Canvas control adapters', () => {
       />,
     );
 
-    expect(markup).toContain('class="bf-select bf-select--medium"');
-    expect(markup).toContain('<option value="">Choose</option>');
+    expect(markup).toContain('data-bf-component="select"');
+    expect(markup).toContain('data-size="md"');
+    expect(markup).toContain('<option disabled="" value="">Choose</option>');
     expect(markup).toContain('<option value="beta" selected="">Beta</option>');
     expect(markup).toContain('disabled=""');
   });
@@ -54,7 +55,7 @@ describe('BitFun Canvas control adapters', () => {
     );
 
     expect(markup).toContain('data-bf-component="input"');
-    expect(markup).toContain('bitfun-textarea');
+    expect(markup).toContain('data-bf-component="textarea"');
     expect(markup).toContain('data-bf-component="icon-button"');
     expect(markup).toContain('Refresh');
   });
diff --git a/src/web-ui/src/tools/bitfun-canvas/runtime/sdk/controls.tsx b/src/web-ui/src/tools/bitfun-canvas/runtime/sdk/controls.tsx
index 7c0f467231..20d4d669be 100644
--- a/src/web-ui/src/tools/bitfun-canvas/runtime/sdk/controls.tsx
+++ b/src/web-ui/src/tools/bitfun-canvas/runtime/sdk/controls.tsx
@@ -1,12 +1,13 @@
-import { Checkbox as BitFunCheckbox } from '@/component-library/components/Checkbox/Checkbox';
 import {
+  Checkbox as BitFunCheckbox,
   Field as DesignField,
   IconButton as BitFunIconButton,
   Input as DesignInput,
+  Select as BitFunSelect,
   Switch as BitFunSwitch,
+  Textarea as BitFunTextarea,
   Tooltip as BitFunTooltip,
 } from '@bitfun/ui';
-import { Textarea as BitFunTextarea } from '@/component-library/components/Textarea/Textarea';
 import type {
   CanvasCheckboxProps,
   CanvasIconButtonProps,
@@ -41,10 +42,6 @@ function designSystemIconButtonStyle(
   return { variant: 'quiet' };
 }
 
-function selectSizeClass(size: CanvasSelectProps['size']) {
-  return `bf-select--${controlSize(size)}`;
-}
-
 function normalizeOption(option: string | number | CanvasSelectOption): CanvasSelectOption {
   if (typeof option === 'string' || typeof option === 'number') {
     return { label: option, value: option };
@@ -109,29 +106,29 @@ export function Select({
   placeholder,
   onChange,
   className,
+  children: _children,
+  defaultValue,
   size,
   ...props
 }: CanvasSelectProps) {
   const normalizedOptions = options.map(normalizeOption);
-  const selectClassName = ['bf-select', selectSizeClass(size), className].filter(Boolean).join(' ');
+  const selectClassName = ['bf-select', className].filter(Boolean).join(' ');
+  const normalizedDefaultValue = Array.isArray(defaultValue) ? defaultValue[0] : defaultValue;
 
   return (
-    <select
+    <BitFunSelect
       {...props}
       className={selectClassName}
-      onChange={event => onChange?.(event.target.value)}
-    >
-      {placeholder ? <option value="">{placeholder}</option> : null}
-      {normalizedOptions.map(option => (
-        <option
-          key={option.value}
-          value={option.value}
-          disabled={option.disabled}
-        >
-          {option.label ?? option.value}
-        </option>
-      ))}
-    </select>
+      defaultValue={normalizedDefaultValue}
+      onValueChange={value => onChange?.(String(value))}
+      options={normalizedOptions.map(option => ({
+        disabled: option.disabled,
+        label: typeof option.label === 'string' ? option.label : String(option.value),
+        value: option.value,
+      }))}
+      placeholder={placeholder === undefined ? undefined : String(placeholder)}
+      size={designSystemControlSize(size)}
+    />
   );
 }
 
diff --git a/src/web-ui/src/tools/bitfun-canvas/runtime/sdk/data-display.tsx b/src/web-ui/src/tools/bitfun-canvas/runtime/sdk/data-display.tsx
index dc43b8f0be..46bfdce12e 100644
--- a/src/web-ui/src/tools/bitfun-canvas/runtime/sdk/data-display.tsx
+++ b/src/web-ui/src/tools/bitfun-canvas/runtime/sdk/data-display.tsx
@@ -1,4 +1,5 @@
 import { categoryColor, usageColorSequence, toneColor } from './style';
+import { Alert as DesignAlert, Disclosure as DesignDisclosure } from '@bitfun/ui';
 import { useCanvasState } from './hooks';
 import { normalizeDiffLines } from './diffLines';
 import type {
@@ -41,18 +42,11 @@ export function Callout({ children, tone = 'info', title, style, ...props }: Can
 }
 
 function alertTone(type: CanvasAlertProps['type'], tone: CanvasAlertProps['tone']) {
-  if (tone) return tone;
-  if (type === 'error') return 'danger';
+  if (tone === 'danger' || tone === 'error') return 'error';
+  if (tone === 'success' || tone === 'warning' || tone === 'info') return tone;
   return type || 'info';
 }
 
-function alertIcon(type: CanvasAlertProps['type']) {
-  if (type === 'success') return '✓';
-  if (type === 'warning') return '!';
-  if (type === 'error') return '!';
-  return 'i';
-}
-
 export function Alert({
   children,
   type = 'info',
@@ -64,62 +58,17 @@ export function Alert({
   style,
   ...props
 }: CanvasAlertProps) {
-  const resolvedTone = alertTone(type, tone);
-  const color = toneColor(resolvedTone);
-
   return (
-    <div
+    <DesignAlert
       {...props}
-      role="alert"
-      aria-live={type === 'error' ? 'assertive' : 'polite'}
       className={['bf-alert', props.className].filter(Boolean).join(' ')}
-      style={{
-        display: 'grid',
-        gridTemplateColumns: showIcon ? '18px minmax(0, 1fr)' : 'minmax(0, 1fr)',
-        gap: 9,
-        border: '1px solid var(--bf-appearance-token-border-subtle)',
-        borderLeft: `3px solid ${color}`,
-        borderRadius: 8,
-        padding: '10px 12px',
-        background: 'color-mix(in srgb, var(--bf-appearance-token-element-bg-subtle) 78%, transparent)',
-        ...style,
-      }}
-    >
-      {showIcon ? (
-        <span
-          aria-hidden="true"
-          style={{
-            display: 'grid',
-            placeItems: 'center',
-            width: 18,
-            height: 18,
-            borderRadius: 999,
-            color,
-            fontSize: 11,
-            fontWeight: 700,
-          }}
-        >
-          {alertIcon(type)}
-        </span>
-      ) : null}
-      <span style={{ minWidth: 0, display: 'grid', gap: 3 }}>
-        {title ? (
-          <strong style={{ color: 'var(--bf-appearance-token-color-text-primary)', fontSize: 13, lineHeight: 1.35 }}>
-            {title}
-          </strong>
-        ) : null}
-        {message || children ? (
-          <span style={{ color: 'var(--bf-appearance-token-color-text-secondary)', fontSize: 12, overflowWrap: 'anywhere' }}>
-            {message ?? children}
-          </span>
-        ) : null}
-        {description ? (
-          <span style={{ color: 'var(--bf-appearance-token-color-text-muted)', fontSize: 12, overflowWrap: 'anywhere' }}>
-            {description}
-          </span>
-        ) : null}
-      </span>
-    </div>
+      description={description}
+      message={message ?? children ?? ''}
+      showIcon={showIcon}
+      style={style}
+      title={title}
+      tone={alertTone(type, tone)}
+    />
   );
 }
 
@@ -236,78 +185,29 @@ export function CollapsibleSection({
 }: CanvasCollapsibleSectionProps) {
   const [storedOpen, setStoredOpen] = useCanvasState(`collapsible:${String(title ?? '')}`, Boolean(defaultOpen));
   const isOpen = open ?? storedOpen;
-  const toggleOpen = () => {
-    const nextOpen = !isOpen;
+  const handleOpenChange = (nextOpen: boolean) => {
     setStoredOpen(nextOpen);
     onOpenChange?.(nextOpen);
   };
 
   return (
-    <section {...props} className={['bf-collapsible-section', props.className].filter(Boolean).join(' ')} style={style}>
-      <button
-        type="button"
-        aria-expanded={isOpen}
-        onClick={toggleOpen}
-        style={{
-          width: '100%',
-          minHeight: 28,
-          display: 'flex',
-          alignItems: 'center',
-          gap: 7,
-          border: 0,
-          padding: '4px 0',
-          background: 'transparent',
-          color: 'var(--bf-appearance-token-color-text-primary)',
-          font: 'inherit',
-          cursor: 'pointer',
-          textAlign: 'left',
-        }}
-      >
-        <span
-          aria-hidden="true"
-          style={{
-            flex: '0 0 auto',
-            width: 12,
-            height: 12,
-            display: 'inline-grid',
-            placeItems: 'center',
-            color: 'var(--bf-appearance-token-color-text-muted)',
-            transform: isOpen ? 'rotate(90deg)' : 'rotate(0deg)',
-            transition: 'transform 120ms ease',
-          }}
-        >
-          ›
-        </span>
-        {leading ? <span style={{ flex: '0 0 auto', display: 'inline-flex' }}>{leading}</span> : null}
-        <span
-          style={{
-            minWidth: 0,
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-            whiteSpace: 'nowrap',
-            color: 'var(--bf-appearance-token-color-text-primary)',
-            fontSize: 13,
-            fontWeight: 650,
-          }}
-        >
+    <DesignDisclosure
+      {...props}
+      actions={trailing}
+      className={['bf-collapsible-section', props.className].filter(Boolean).join(' ')}
+      leading={leading}
+      onOpenChange={handleOpenChange}
+      open={isOpen}
+      style={style}
+      summary={(
+        <>
           {title}
-        </span>
-        {count !== undefined ? (
-          <span style={{ color: 'var(--bf-appearance-token-color-text-muted)', fontSize: 12 }}>{count}</span>
-        ) : null}
-        <span style={{ flex: '1 1 auto', minWidth: 0 }} />
-        {trailing ? (
-          <span style={{ flex: '0 0 auto', color: 'var(--bf-appearance-token-color-text-muted)', fontSize: 12 }}>
-            {trailing}
-          </span>
-        ) : null}
-      </button>
-      {isOpen ? (
-        <div style={{ marginLeft: 18, paddingTop: 6, paddingBottom: 4 }}>
-          {children}
-        </div>
-      ) : null}
-    </section>
+          {count !== undefined ? <span className="bf-collapsible-section__count">{count}</span> : null}
+        </>
+      )}
+    >
+      {children}
+    </DesignDisclosure>
   );
 }
 
diff --git a/src/web-ui/src/tools/bitfun-canvas/runtime/styles/canvas-runtime.scss b/src/web-ui/src/tools/bitfun-canvas/runtime/styles/canvas-runtime.scss
index b9cdbf38bc..5e9cfaa1d5 100644
--- a/src/web-ui/src/tools/bitfun-canvas/runtime/styles/canvas-runtime.scss
+++ b/src/web-ui/src/tools/bitfun-canvas/runtime/styles/canvas-runtime.scss
@@ -369,8 +369,7 @@ html[data-bitfun-canvas-design-mode] body {
 }
 
 .bf-input,
-.bf-textarea,
-.bf-select {
+.bf-textarea {
   width: 100%;
   border: 1px solid var(--bf-appearance-token-border-subtle);
   border-radius: 6px;
@@ -381,7 +380,10 @@ html[data-bitfun-canvas-design-mode] body {
 }
 
 .bf-input:focus,
-.bf-textarea:focus,
-.bf-select:focus {
+.bf-textarea:focus {
   border-color: color-mix(in srgb, var(--bf-appearance-token-color-accent-500) 55%, var(--bf-appearance-token-border-base));
 }
+
+.bf-select {
+  width: 100%;
+}
diff --git a/src/web-ui/src/tools/editor/components/PlanViewer.scss b/src/web-ui/src/tools/editor/components/PlanViewer.scss
index 063a2b7819..bded5b0657 100644
--- a/src/web-ui/src/tools/editor/components/PlanViewer.scss
+++ b/src/web-ui/src/tools/editor/components/PlanViewer.scss
@@ -266,6 +266,11 @@
         }
       }
 
+      .todo-content-input-field {
+        flex: 1;
+        min-width: 0;
+      }
+
       // Status styles
       &.status-pending {
         .todo-content {
diff --git a/src/web-ui/src/tools/editor/components/PlanViewer.tsx b/src/web-ui/src/tools/editor/components/PlanViewer.tsx
index 9b3eb88e1c..1b3fd91927 100644
--- a/src/web-ui/src/tools/editor/components/PlanViewer.tsx
+++ b/src/web-ui/src/tools/editor/components/PlanViewer.tsx
@@ -1,6 +1,6 @@
 /** Optimized viewer/editor for `.plan.md` files (frontmatter + markdown body). */
 
-import { Button, Icon, IconButton, Tooltip } from '@bitfun/ui';
+import { Button, Icon, IconButton, Input, Tooltip } from '@bitfun/ui';
 import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react';
 import { Loader2, AlertCircle, FileText, Trash2 } from 'lucide-react';
 import yaml from 'yaml';
@@ -655,15 +655,16 @@ const PlanViewer: React.FC<PlanViewerProps> = ({
                 {getTodoIcon(todo.status)}
                 {isPanelEditing ? (
                   <>
-                    <input
-                      className="todo-content-input"
+                    <Input
+                      className="todo-content-input-field"
+                      inputClassName="todo-content-input"
                       value={panelDrafts[todo.id || String(index)] ?? todo.content}
-                      onChange={(e) => {
+                      onValueChange={(value) => {
                         const key = todo.id || String(index);
                         if (isInline) {
-                          setInlineTodoDrafts(prev => ({ ...prev, [key]: e.target.value }));
+                          setInlineTodoDrafts(prev => ({ ...prev, [key]: value }));
                         } else {
-                          setTrailingTodoDrafts(prev => ({ ...prev, [key]: e.target.value }));
+                          setTrailingTodoDrafts(prev => ({ ...prev, [key]: value }));
                         }
                       }}
                     />
diff --git a/src/web-ui/src/tools/generative-widget/GenerativeWidgetPanel.scss b/src/web-ui/src/tools/generative-widget/GenerativeWidgetPanel.scss
index df2ff07687..8a04843114 100644
--- a/src/web-ui/src/tools/generative-widget/GenerativeWidgetPanel.scss
+++ b/src/web-ui/src/tools/generative-widget/GenerativeWidgetPanel.scss
@@ -91,10 +91,14 @@
   color: var(--bf-appearance-token-color-text-primary);
 }
 
-.bitfun-generative-widget-panel__editor {
+.bitfun-generative-widget-panel__editor-field {
   flex: 1;
   width: 100%;
   min-height: 0;
+}
+
+.bitfun-generative-widget-panel__editor {
+  height: 100%;
   resize: none;
   border: 0;
   outline: none;
diff --git a/src/web-ui/src/tools/generative-widget/GenerativeWidgetPanel.tsx b/src/web-ui/src/tools/generative-widget/GenerativeWidgetPanel.tsx
index 5d2220e3d0..bb498d534b 100644
--- a/src/web-ui/src/tools/generative-widget/GenerativeWidgetPanel.tsx
+++ b/src/web-ui/src/tools/generative-widget/GenerativeWidgetPanel.tsx
@@ -1,4 +1,4 @@
-import { Button } from '@bitfun/ui';
+import { Button, Textarea } from '@bitfun/ui';
 import React from 'react';
 import { Code2, RotateCcw, Save } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
@@ -144,13 +144,14 @@ export const GenerativeWidgetPanel: React.FC<GenerativeWidgetPanelProps> = ({
               <span>{t('toolCards.generativeUI.source')}</span>
             </span>
           </div>
-          <textarea
-            className="bitfun-generative-widget-panel__editor"
+          <Textarea
+            className="bitfun-generative-widget-panel__editor-field"
+            textareaClassName="bitfun-generative-widget-panel__editor"
             data-bf-component="generative-widget"
             data-bf-part="editor"
             value={draftCode}
-            onChange={(event) => {
-              setDraftCode(event.target.value);
+            onValueChange={(value) => {
+              setDraftCode(value);
               if (saveState === 'error') {
                 setSaveState('unsaved');
                 setSaveError(null);
diff --git a/src/web-ui/src/tools/git/components/GitSettingsView/GitSettingsView.tsx b/src/web-ui/src/tools/git/components/GitSettingsView/GitSettingsView.tsx
index ecf7fb7cd1..b837b353a2 100644
--- a/src/web-ui/src/tools/git/components/GitSettingsView/GitSettingsView.tsx
+++ b/src/web-ui/src/tools/git/components/GitSettingsView/GitSettingsView.tsx
@@ -1,9 +1,8 @@
 /** Git settings view. */
 
-import { Button, Field, Icon, IconButton, Input, Select, TabGroup, ScrollArea } from '@bitfun/ui';
+import { Button, Checkbox, Field, Icon, IconButton, Input, Select, TabGroup, ScrollArea } from '@bitfun/ui';
 import React, { useState, useCallback, useEffect } from 'react';
 import { Mail, Key, Save, RefreshCw } from 'lucide-react';
-import { Checkbox } from '@/component-library';
 import { useI18n } from '@/infrastructure/i18n';
 import './GitSettingsView.scss';