From f2c6d525bc7e2358aa56ca5a38b1befa4e6334ce Mon Sep 17 00:00:00 2001
From: kev1n77 <fmy077@outlook.com>
Date: Tue, 15 Sep 2026 00:09:43 +0800
Subject: [PATCH 1/6] refactor(ui): adopt Input in installer and standalone
 markets

---
 pnpm-lock.yaml                                |  6 ++
 src/apps/miniapp-market-server/Dockerfile     |  4 ++
 .../Dockerfile.dockerignore                   |  3 +
 src/apps/skin-market-server/Dockerfile        |  4 ++
 .../Dockerfile.dockerignore                   |  3 +
 src/miniapp-market-web/package.json           |  3 +-
 src/miniapp-market-web/src/App.test.tsx       | 58 +++++++++++++++++++
 src/miniapp-market-web/src/App.tsx            | 23 ++++----
 src/miniapp-market-web/src/main.tsx           |  6 +-
 src/miniapp-market-web/src/styles.css         | 31 +++++++---
 src/skin-market-web/package.json              |  3 +-
 src/skin-market-web/src/CatalogPage.tsx       |  3 +-
 src/skin-market-web/src/main.tsx              |  6 +-
 src/skin-market-web/src/styles.css            | 15 +++++
 14 files changed, 145 insertions(+), 23 deletions(-)
 create mode 100644 src/miniapp-market-web/src/App.test.tsx

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8c4ca0fff2..bedb83e385 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -222,6 +222,9 @@ importers:
       '@openbitfun/theme-openbitfun':
         specifier: workspace:^
         version: link:../../design-system/packages/theme-openbitfun
+      '@openbitfun/ui':
+        specifier: workspace:^
+        version: link:../../design-system/packages/ui
       '@phosphor-icons/react':
         specifier: ^2.1.10
         version: 2.1.10(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -335,6 +338,9 @@ importers:
       '@openbitfun/theme-openbitfun':
         specifier: workspace:^
         version: link:../../design-system/packages/theme-openbitfun
+      '@openbitfun/ui':
+        specifier: workspace:^
+        version: link:../../design-system/packages/ui
       '@phosphor-icons/react':
         specifier: ^2.1.10
         version: 2.1.10(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
diff --git a/src/apps/miniapp-market-server/Dockerfile b/src/apps/miniapp-market-server/Dockerfile
index a3f7d936bb..22e6625132 100644
--- a/src/apps/miniapp-market-server/Dockerfile
+++ b/src/apps/miniapp-market-server/Dockerfile
@@ -8,6 +8,8 @@ RUN corepack enable && corepack prepare pnpm@10.15.0 --activate
 COPY package.json pnpm-lock.yaml pnpm-workspace.yaml .npmrc ./
 COPY patches/ patches/
 COPY design-system/LICENSE design-system/LICENSE
+COPY design-system/tsconfig.base.json design-system/tsconfig.base.json
+COPY design-system/packages/ui/package.json design-system/packages/ui/package.json
 COPY design-system/tooling/token-engine/package.json design-system/tooling/token-engine/package.json
 COPY design-system/packages/design-tokens/package.json design-system/packages/design-tokens/package.json
 COPY design-system/packages/theme-openbitfun/package.json design-system/packages/theme-openbitfun/package.json
@@ -15,12 +17,14 @@ COPY src/miniapp-market-web/package.json src/miniapp-market-web/package.json
 RUN --mount=type=cache,id=openbitfun-market-pnpm,target=/root/.local/share/pnpm/store,sharing=locked \
     pnpm install --frozen-lockfile --ignore-scripts --filter openbitfun-miniapp-market-web...
 
+COPY design-system/packages/ui/ design-system/packages/ui/
 COPY design-system/tooling/token-engine/ design-system/tooling/token-engine/
 COPY design-system/packages/design-tokens/ design-system/packages/design-tokens/
 COPY design-system/packages/theme-openbitfun/ design-system/packages/theme-openbitfun/
 COPY src/miniapp-market-web/ src/miniapp-market-web/
 RUN pnpm --dir design-system/packages/design-tokens build \
     && pnpm --dir design-system/packages/theme-openbitfun build \
+    && pnpm --dir design-system/packages/ui build \
     && pnpm --dir src/miniapp-market-web build
 
 FROM rust:1.96-bookworm AS rust-builder
diff --git a/src/apps/miniapp-market-server/Dockerfile.dockerignore b/src/apps/miniapp-market-server/Dockerfile.dockerignore
index 9d77f42167..bfe9f881de 100644
--- a/src/apps/miniapp-market-server/Dockerfile.dockerignore
+++ b/src/apps/miniapp-market-server/Dockerfile.dockerignore
@@ -11,6 +11,9 @@
 
 !design-system/
 !design-system/LICENSE
+!design-system/tsconfig.base.json
+!design-system/packages/ui/
+!design-system/packages/ui/**
 !design-system/packages/
 !design-system/packages/design-tokens/
 !design-system/packages/design-tokens/package.json
diff --git a/src/apps/skin-market-server/Dockerfile b/src/apps/skin-market-server/Dockerfile
index 108a00b790..50f91b23e3 100644
--- a/src/apps/skin-market-server/Dockerfile
+++ b/src/apps/skin-market-server/Dockerfile
@@ -8,6 +8,8 @@ RUN corepack enable && corepack prepare pnpm@10.15.0 --activate
 COPY package.json pnpm-lock.yaml pnpm-workspace.yaml .npmrc ./
 COPY patches/ patches/
 COPY design-system/LICENSE design-system/LICENSE
+COPY design-system/tsconfig.base.json design-system/tsconfig.base.json
+COPY design-system/packages/ui/package.json design-system/packages/ui/package.json
 COPY design-system/tooling/token-engine/package.json design-system/tooling/token-engine/package.json
 COPY design-system/packages/design-tokens/package.json design-system/packages/design-tokens/package.json
 COPY design-system/packages/theme-openbitfun/package.json design-system/packages/theme-openbitfun/package.json
@@ -15,6 +17,7 @@ COPY src/skin-market-web/package.json src/skin-market-web/package.json
 RUN --mount=type=cache,id=openbitfun-skin-market-pnpm,target=/root/.local/share/pnpm/store,sharing=locked \
     pnpm install --frozen-lockfile --ignore-scripts --filter openbitfun-skin-market-web...
 
+COPY design-system/packages/ui/ design-system/packages/ui/
 COPY design-system/tooling/token-engine/ design-system/tooling/token-engine/
 COPY design-system/packages/design-tokens/ design-system/packages/design-tokens/
 COPY design-system/packages/theme-openbitfun/ design-system/packages/theme-openbitfun/
@@ -22,6 +25,7 @@ COPY src/skin-market-web/ src/skin-market-web/
 COPY src/shared/appearance-market-contract-fixtures/ src/shared/appearance-market-contract-fixtures/
 RUN pnpm --dir design-system/packages/design-tokens build \
     && pnpm --dir design-system/packages/theme-openbitfun build \
+    && pnpm --dir design-system/packages/ui build \
     && pnpm --dir src/skin-market-web build
 
 FROM rust:1.96-bookworm AS rust-builder
diff --git a/src/apps/skin-market-server/Dockerfile.dockerignore b/src/apps/skin-market-server/Dockerfile.dockerignore
index 3e642b697d..97b27b0b3b 100644
--- a/src/apps/skin-market-server/Dockerfile.dockerignore
+++ b/src/apps/skin-market-server/Dockerfile.dockerignore
@@ -11,6 +11,9 @@
 
 !design-system/
 !design-system/LICENSE
+!design-system/tsconfig.base.json
+!design-system/packages/ui/
+!design-system/packages/ui/**
 !design-system/packages/
 !design-system/packages/design-tokens/
 !design-system/packages/design-tokens/package.json
diff --git a/src/miniapp-market-web/package.json b/src/miniapp-market-web/package.json
index 9175dfda20..0a6f2f5972 100644
--- a/src/miniapp-market-web/package.json
+++ b/src/miniapp-market-web/package.json
@@ -15,7 +15,8 @@
     "@phosphor-icons/react": "^2.1.10",
     "lucide-react": "^0.541.0",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "@openbitfun/ui": "workspace:^"
   },
   "devDependencies": {
     "@types/react": "^18.3.0",
diff --git a/src/miniapp-market-web/src/App.test.tsx b/src/miniapp-market-web/src/App.test.tsx
new file mode 100644
index 0000000000..43c1bf2569
--- /dev/null
+++ b/src/miniapp-market-web/src/App.test.tsx
@@ -0,0 +1,58 @@
+// @vitest-environment jsdom
+import React, { act } from 'react';
+import { createRoot } from 'react-dom/client';
+import { afterEach, beforeEach, expect, it, vi } from 'vitest';
+import App from './App';
+
+const mocks = vi.hoisted(() => ({ config: vi.fn(), me: vi.fn() }));
+vi.mock('./api', async (original) => ({
+  ...await original<typeof import('./api')>(),
+  marketApi: mocks,
+}));
+
+let container: HTMLDivElement;
+let root: ReturnType<typeof createRoot>;
+beforeEach(() => {
+  (globalThis as typeof globalThis & { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+  vi.stubGlobal('matchMedia', vi.fn(() => ({ matches: false, addEventListener: vi.fn(), removeEventListener: vi.fn() })));
+  window.history.replaceState({}, '', '/miniapp/submit?listingId=listing-1&slug=my-app&release=2');
+  mocks.config.mockResolvedValue({ webSubmissionsEnabled: true, githubAuthConfigured: true });
+  mocks.me.mockResolvedValue({ user: { login: 'publisher', avatarUrl: '' }, isAdmin: false });
+  container = document.createElement('div');
+  document.body.append(container);
+  root = createRoot(container);
+});
+afterEach(() => {
+  act(() => root.unmount());
+  container.remove();
+  vi.unstubAllGlobals();
+});
+
+it('preserves native submission fields and update constraints on the actual submit route', async () => {
+  await act(async () => root.render(<App />));
+  const form = container.querySelector('form');
+  expect(form).not.toBeNull();
+  const data = new FormData(form!);
+  expect(data.get('slug')).toBe('my-app');
+  expect(data.get('releaseNumber')).toBe('2');
+  expect(data.get('icon')).toBe('✦');
+  expect(data.get('licenseValue')).toBe('MIT');
+  const slug = form!.elements.namedItem('slug') as HTMLInputElement;
+  const release = form!.elements.namedItem('releaseNumber') as HTMLInputElement;
+  expect(slug.readOnly).toBe(true);
+  expect(slug.pattern).toBe('[a-z0-9][a-z0-9-]{2,62}');
+  expect(release.readOnly).toBe(true);
+  expect(release.min).toBe('1');
+  expect(slug.closest('[data-openbitfun-component="input"]')).not.toBeNull();
+  expect(form!.querySelectorAll('input[type="file"]')).toHaveLength(2);
+  expect((form!.elements.namedItem('screenshots') as HTMLInputElement).multiple).toBe(true);
+  expect(form!.querySelector<HTMLButtonElement>('.submit-button')!.type).toBe('submit');
+  expect(form!.checkValidity()).toBe(false);
+});
+
+it('keeps web submissions unavailable when the server disables them', async () => {
+  mocks.config.mockResolvedValue({ webSubmissionsEnabled: false });
+  await act(async () => root.render(<App />));
+  expect(container.querySelector('form')).toBeNull();
+  expect(container.querySelector('input[type="file"]')).toBeNull();
+});
diff --git a/src/miniapp-market-web/src/App.tsx b/src/miniapp-market-web/src/App.tsx
index 84ebd40400..b135e204a1 100644
--- a/src/miniapp-market-web/src/App.tsx
+++ b/src/miniapp-market-web/src/App.tsx
@@ -1,3 +1,4 @@
+import { Input } from '@openbitfun/ui';
 import { FormEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { CubeFocus as MarketLogo, GithubLogo, IconContext } from '@phosphor-icons/react';
 import {
@@ -516,7 +517,7 @@ function CatalogPage({
           <label className="search-field">
             <MagnifyingGlass size={18} aria-hidden="true" />
             <span className="sr-only">{t('search')}</span>
-            <input
+            <Input className="market-input"
               value={query}
               onChange={(event) => setQuery(event.target.value)}
               placeholder={t('search')}
@@ -918,7 +919,7 @@ function DetailPage({
           <div className="moderation-panel">
             <label>
               <span>{t('moderationReason')}</span>
-              <input
+              <Input className="market-input"
                 value={moderationReason}
                 onChange={(event) => setModerationReason(event.target.value)}
               />
@@ -1053,16 +1054,16 @@ function SubmitPage({
           <legend>{t('listingSection')}</legend>
           <div className="form-grid">
             <Field label={t('slugLabel')}>
-              <input name="slug" required pattern="[a-z0-9][a-z0-9-]{2,62}" defaultValue={initialSlug} readOnly={Boolean(listingId)} />
+              <Input className="market-input" name="slug" required pattern="[a-z0-9][a-z0-9-]{2,62}" defaultValue={initialSlug} readOnly={Boolean(listingId)} />
             </Field>
             <Field label={t('releaseNumberLabel')}>
-              <input name="releaseNumber" type="number" min="1" required defaultValue={initialRelease} readOnly={Boolean(listingId)} />
+              <Input className="market-input" name="releaseNumber" type="number" min="1" required defaultValue={initialRelease} readOnly={Boolean(listingId)} />
             </Field>
             <Field label={t('nameLabel')}>
-              <input name="name" required maxLength={80} />
+              <Input className="market-input" name="name" required maxLength={80} />
             </Field>
             <Field label={t('iconLabel')}>
-              <input name="icon" defaultValue="✦" maxLength={8} />
+              <Input className="market-input" name="icon" defaultValue="✦" maxLength={8} />
             </Field>
             <Field label={t('categoryLabel')}>
               <select name="category" defaultValue="utilities">
@@ -1072,7 +1073,7 @@ function SubmitPage({
               </select>
             </Field>
             <Field label={t('tagsLabel')}>
-              <input name="tags" placeholder={t('tagsPlaceholder')} />
+              <Input className="market-input" name="tags" placeholder={t('tagsPlaceholder')} />
             </Field>
           </div>
           <Field label={t('descriptionLabel')}>
@@ -1084,10 +1085,10 @@ function SubmitPage({
           <legend>{t('releaseSection')}</legend>
           <div className="form-grid">
             <Field label={t('minOpenBitFunVersionLabel')}>
-              <input name="minOpenBitFunVersion" required defaultValue="1.0.0" />
+              <Input className="market-input" name="minOpenBitFunVersion" required defaultValue="1.0.0" />
             </Field>
             <Field label={t('publicRepositoryOptional')}>
-              <input name="repositoryUrl" type="url" placeholder="https://github.com/…" />
+              <Input className="market-input" name="repositoryUrl" type="url" placeholder="https://github.com/…" />
             </Field>
             <Field label={t('licenseTypeLabel')}>
               <select name="licenseKind">
@@ -1096,7 +1097,7 @@ function SubmitPage({
               </select>
             </Field>
             <Field label={t('licenseLabel')}>
-              <input name="licenseValue" required defaultValue="MIT" />
+              <Input className="market-input" name="licenseValue" required defaultValue="MIT" />
             </Field>
           </div>
           <Field label={t('changelog')}>
@@ -1454,7 +1455,7 @@ function AdminPage({
                 >
                   {t('approve')}
                 </button>
-                <input value={reason} onChange={(event) => setReason(event.target.value)} placeholder={t('rejectionReason')} />
+                <Input className="market-input" value={reason} onChange={(event) => setReason(event.target.value)} placeholder={t('rejectionReason')} />
                 <button
                   className="button button-danger"
                   disabled={!reason.trim()}
diff --git a/src/miniapp-market-web/src/main.tsx b/src/miniapp-market-web/src/main.tsx
index 03df341b14..024377e567 100644
--- a/src/miniapp-market-web/src/main.tsx
+++ b/src/miniapp-market-web/src/main.tsx
@@ -1,3 +1,5 @@
+import { DesignSystemProvider } from '@openbitfun/ui';
+import '@openbitfun/ui/styles.css';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import '@openbitfun/theme-openbitfun/default.css';
@@ -6,6 +8,8 @@ import './styles.css';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <App />
+    <DesignSystemProvider>
+      <App />
+    </DesignSystemProvider>
   </React.StrictMode>,
 );
diff --git a/src/miniapp-market-web/src/styles.css b/src/miniapp-market-web/src/styles.css
index 179423bf81..3aba6e28b9 100644
--- a/src/miniapp-market-web/src/styles.css
+++ b/src/miniapp-market-web/src/styles.css
@@ -1603,11 +1603,11 @@ main {
   line-height: 1.45;
 }
 
-.field input,
+.field :is([data-openbitfun-component="input"], input[type="file"]),
 .field select,
 .field textarea,
-.review-actions input,
-.moderation-panel input {
+.review-actions [data-openbitfun-component="input"],
+.moderation-panel [data-openbitfun-component="input"] {
   width: 100%;
   min-height: 34px;
   padding: 7px 9px;
@@ -1640,16 +1640,16 @@ main {
   cursor: pointer;
 }
 
-.field input:focus,
+.field [data-openbitfun-component="input"]:focus-within,
 .field select:focus,
 .field textarea:focus,
-.review-actions input:focus,
-.moderation-panel input:focus {
+.review-actions [data-openbitfun-component="input"]:focus-within,
+.moderation-panel [data-openbitfun-component="input"]:focus-within {
   border-color: var(--openbitfun-color-accent-default);
   box-shadow: 0 0 0 3px color-mix(in srgb, var(--openbitfun-color-accent-default) 10%, transparent);
 }
 
-.field input[readonly] {
+.field [data-openbitfun-component="input"]:has(input[readonly]) {
   background: var(--openbitfun-color-surface-tertiary);
   color: var(--openbitfun-color-content-muted);
 }
@@ -2552,3 +2552,20 @@ footer a:hover {
     animation-iteration-count: 1 !important;
   }
 }
+
+.market-input[data-openbitfun-component='input'] {
+  block-size: auto;
+  min-width: 0;
+}
+.market-input[data-openbitfun-component='input'] > input {
+  font: inherit;
+  letter-spacing: inherit;
+  height: auto;
+}
+.search-field > .market-input {
+  flex: 1;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  box-shadow: none;
+}
diff --git a/src/skin-market-web/package.json b/src/skin-market-web/package.json
index 3a2fd56f11..74548f160d 100644
--- a/src/skin-market-web/package.json
+++ b/src/skin-market-web/package.json
@@ -15,7 +15,8 @@
     "@phosphor-icons/react": "^2.1.10",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "lucide-react": "^0.541.0"
+    "lucide-react": "^0.541.0",
+    "@openbitfun/ui": "workspace:^"
   },
   "devDependencies": {
     "@types/react": "^18.3.0",
diff --git a/src/skin-market-web/src/CatalogPage.tsx b/src/skin-market-web/src/CatalogPage.tsx
index cb2fa922bc..0dbe6cef79 100644
--- a/src/skin-market-web/src/CatalogPage.tsx
+++ b/src/skin-market-web/src/CatalogPage.tsx
@@ -1,3 +1,4 @@
+import { Input } from '@openbitfun/ui';
 import { ArrowRight, Search as MagnifyingGlass } from 'lucide-react';
 import {
   useCallback,
@@ -168,7 +169,7 @@ export function CatalogPage({
           <label className="search-field">
             <span className="sr-only">{t('searchLabel')}</span>
             <MagnifyingGlass size={20} aria-hidden="true" />
-            <input
+            <Input className="market-input"
               type="search"
               value={queryInput}
               onChange={(event) => setQueryInput(event.currentTarget.value)}
diff --git a/src/skin-market-web/src/main.tsx b/src/skin-market-web/src/main.tsx
index 03df341b14..024377e567 100644
--- a/src/skin-market-web/src/main.tsx
+++ b/src/skin-market-web/src/main.tsx
@@ -1,3 +1,5 @@
+import { DesignSystemProvider } from '@openbitfun/ui';
+import '@openbitfun/ui/styles.css';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import '@openbitfun/theme-openbitfun/default.css';
@@ -6,6 +8,8 @@ import './styles.css';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <App />
+    <DesignSystemProvider>
+      <App />
+    </DesignSystemProvider>
   </React.StrictMode>,
 );
diff --git a/src/skin-market-web/src/styles.css b/src/skin-market-web/src/styles.css
index c8616d7db4..af457ef546 100644
--- a/src/skin-market-web/src/styles.css
+++ b/src/skin-market-web/src/styles.css
@@ -2278,3 +2278,18 @@ img {
     justify-content: center;
   }
 }
+
+.search-field > .market-input[data-openbitfun-component='input'] {
+  flex: 1;
+  min-width: 0;
+  block-size: auto;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  box-shadow: none;
+}
+.market-input[data-openbitfun-component='input'] > input {
+  font: inherit;
+  letter-spacing: inherit;
+  height: auto;
+}

From b014e9ea1a9b9c527dc4d3a1b876e3acae0bb60b Mon Sep 17 00:00:00 2001
From: kev1n77 <fmy077@outlook.com>
Date: Tue, 15 Sep 2026 00:10:48 +0800
Subject: [PATCH 2/6] refactor(ui): adopt Textarea in standalone market forms

---
 src/miniapp-market-web/src/App.test.tsx     |  5 +++++
 src/miniapp-market-web/src/App.tsx          |  6 +++---
 src/miniapp-market-web/src/styles.css       | 11 +++++++++++
 src/skin-market-web/src/AdminPage.tsx       |  3 ++-
 src/skin-market-web/src/DetailPage.test.tsx |  1 +
 src/skin-market-web/src/DetailPage.tsx      |  3 ++-
 src/skin-market-web/src/styles.css          | 11 +++++++++++
 7 files changed, 35 insertions(+), 5 deletions(-)

diff --git a/src/miniapp-market-web/src/App.test.tsx b/src/miniapp-market-web/src/App.test.tsx
index 43c1bf2569..5fec7edf0f 100644
--- a/src/miniapp-market-web/src/App.test.tsx
+++ b/src/miniapp-market-web/src/App.test.tsx
@@ -47,6 +47,11 @@ it('preserves native submission fields and update constraints on the actual subm
   expect(form!.querySelectorAll('input[type="file"]')).toHaveLength(2);
   expect((form!.elements.namedItem('screenshots') as HTMLInputElement).multiple).toBe(true);
   expect(form!.querySelector<HTMLButtonElement>('.submit-button')!.type).toBe('submit');
+  const description = form!.elements.namedItem('description') as HTMLTextAreaElement;
+  expect(description.rows).toBe(3);
+  expect(description.maxLength).toBe(500);
+  expect(description.required).toBe(true);
+  expect(description.closest('[data-openbitfun-component="textarea"]')).not.toBeNull();
   expect(form!.checkValidity()).toBe(false);
 });
 
diff --git a/src/miniapp-market-web/src/App.tsx b/src/miniapp-market-web/src/App.tsx
index b135e204a1..6c958c7939 100644
--- a/src/miniapp-market-web/src/App.tsx
+++ b/src/miniapp-market-web/src/App.tsx
@@ -1,4 +1,4 @@
-import { Input } from '@openbitfun/ui';
+import { Input, Textarea } from '@openbitfun/ui';
 import { FormEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { CubeFocus as MarketLogo, GithubLogo, IconContext } from '@phosphor-icons/react';
 import {
@@ -1077,7 +1077,7 @@ function SubmitPage({
             </Field>
           </div>
           <Field label={t('descriptionLabel')}>
-            <textarea name="description" required maxLength={500} rows={3} />
+            <Textarea className="market-textarea" name="description" required maxLength={500} rows={3} />
           </Field>
         </fieldset>
 
@@ -1101,7 +1101,7 @@ function SubmitPage({
             </Field>
           </div>
           <Field label={t('changelog')}>
-            <textarea name="changelog" required rows={4} />
+            <Textarea className="market-textarea" name="changelog" required rows={4} />
           </Field>
         </fieldset>
 
diff --git a/src/miniapp-market-web/src/styles.css b/src/miniapp-market-web/src/styles.css
index 3aba6e28b9..f9a000f393 100644
--- a/src/miniapp-market-web/src/styles.css
+++ b/src/miniapp-market-web/src/styles.css
@@ -2569,3 +2569,14 @@ footer a:hover {
   background: transparent;
   box-shadow: none;
 }
+
+/* Textarea owns a wrapper; keep the native editor filling its form column. */
+.market-textarea[data-openbitfun-component="textarea"] {
+  display: flex;
+  width: 100%;
+  min-width: 0;
+}
+.market-textarea > textarea {
+  min-block-size: 0;
+  letter-spacing: inherit;
+}
diff --git a/src/skin-market-web/src/AdminPage.tsx b/src/skin-market-web/src/AdminPage.tsx
index 27cf9a0618..20ede897ab 100644
--- a/src/skin-market-web/src/AdminPage.tsx
+++ b/src/skin-market-web/src/AdminPage.tsx
@@ -1,3 +1,4 @@
+import { Textarea } from '@openbitfun/ui';
 import { GithubLogo } from '@phosphor-icons/react';
 import { RefreshCw as ArrowClockwise, ShieldCheck, CircleAlert as WarningCircle } from 'lucide-react';
 import { useCallback, useEffect, useState } from 'react';
@@ -205,7 +206,7 @@ export function AdminPage({ account, accountResolved, locale, t }: AdminPageProp
                   {detail.manifest !== undefined && <details className="manifest-panel"><summary>{t('reviewManifest')}</summary><pre>{JSON.stringify(detail.manifest, null, 2)}</pre></details>}
                   <div className="review-actions">
                     <label htmlFor="review-reason">{t('reviewReason')}</label>
-                    <textarea id="review-reason" rows={4} maxLength={1000} value={reason} onChange={event => setReason(event.target.value)} placeholder={t('reviewReasonPlaceholder')} />
+                    <Textarea className="market-textarea" id="review-reason" rows={4} maxLength={1000} value={reason} onChange={event => setReason(event.target.value)} placeholder={t('reviewReasonPlaceholder')} />
                     <div>
                       <button type="button" className="secondary-button danger-button" disabled={acting || !reason.trim()} onClick={() => void decide('reject')}>{t('reviewReject')}</button>
                       <button type="button" className="primary-button" disabled={acting} onClick={() => void decide('approve')}>{acting ? t('reviewActing') : t('reviewApprove')}</button>
diff --git a/src/skin-market-web/src/DetailPage.test.tsx b/src/skin-market-web/src/DetailPage.test.tsx
index bfef1300ec..95e032dd24 100644
--- a/src/skin-market-web/src/DetailPage.test.tsx
+++ b/src/skin-market-web/src/DetailPage.test.tsx
@@ -80,6 +80,7 @@ describe('DetailPage moderation', () => {
     expect(unpublishButton).toBeDefined();
 
     const reason = container.querySelector<HTMLTextAreaElement>('#moderation-reason');
+    expect(reason?.closest('[data-openbitfun-component="textarea"]')).not.toBeNull();
     await act(async () => {
       if (!reason) throw new Error('moderation reason missing');
       const valueSetter = Object.getOwnPropertyDescriptor(
diff --git a/src/skin-market-web/src/DetailPage.tsx b/src/skin-market-web/src/DetailPage.tsx
index eee3124065..6dfb8c4ba6 100644
--- a/src/skin-market-web/src/DetailPage.tsx
+++ b/src/skin-market-web/src/DetailPage.tsx
@@ -1,3 +1,4 @@
+import { Textarea } from '@openbitfun/ui';
 import {
   ArrowLeft,
   ExternalLink as ArrowSquareOut,
@@ -226,7 +227,7 @@ export function DetailPage({ catalogSearch, isAdmin, locale, onNavigate, slug, t
                 </div>
                 <label className="moderation-panel__reason" htmlFor="moderation-reason">
                   <span>{t('moderationReason')}</span>
-                  <textarea
+                  <Textarea className="market-textarea"
                     id="moderation-reason"
                     value={moderationReason}
                     maxLength={1000}
diff --git a/src/skin-market-web/src/styles.css b/src/skin-market-web/src/styles.css
index af457ef546..79e38acec5 100644
--- a/src/skin-market-web/src/styles.css
+++ b/src/skin-market-web/src/styles.css
@@ -2293,3 +2293,14 @@ img {
   letter-spacing: inherit;
   height: auto;
 }
+
+/* Textarea owns a wrapper; keep the native editor filling its form column. */
+.market-textarea[data-openbitfun-component="textarea"] {
+  display: flex;
+  width: 100%;
+  min-width: 0;
+}
+.market-textarea > textarea {
+  min-block-size: 0;
+  letter-spacing: inherit;
+}

From c22bd549bf290734a2600f7113e17f67422f0151 Mon Sep 17 00:00:00 2001
From: kev1n77 <fmy077@outlook.com>
Date: Tue, 15 Sep 2026 00:15:07 +0800
Subject: [PATCH 3/6] refactor(ui): adopt Button and IconButton in standalone
 surfaces

---
 .../src/components/WindowControls.tsx         |  15 +--
 src/miniapp-market-web/src/App.tsx            | 127 +++++++++---------
 src/miniapp-market-web/src/styles.css         |  36 +++++
 src/skin-market-web/src/AdminPage.tsx         |  14 +-
 src/skin-market-web/src/App.tsx               |  23 ++--
 src/skin-market-web/src/CatalogPage.tsx       |  14 +-
 src/skin-market-web/src/DetailPage.tsx        |  12 +-
 src/skin-market-web/src/SubmissionsPage.tsx   |   9 +-
 src/skin-market-web/src/styles.css            |  40 ++++++
 9 files changed, 182 insertions(+), 108 deletions(-)

diff --git a/OpenBitFun-Installer/src/components/WindowControls.tsx b/OpenBitFun-Installer/src/components/WindowControls.tsx
index 2901346276..334eaf49b4 100644
--- a/OpenBitFun-Installer/src/components/WindowControls.tsx
+++ b/OpenBitFun-Installer/src/components/WindowControls.tsx
@@ -1,3 +1,4 @@
+import { IconButton } from '@openbitfun/ui';
 import { Minus as LucideMinus, X as LucideX } from 'lucide-react';
 import { getCurrentWindow } from '@tauri-apps/api/window';
 import { useTranslation } from 'react-i18next';
@@ -18,22 +19,20 @@ export function WindowControls() {
 
   return (
     <div className="window-controls">
-      <button
+      <IconButton
         className="window-controls__btn"
         onClick={handleMinimize}
         aria-label={t('window.minimize')}
         title={t('window.minimize')}
-      >
-        <LucideMinus width="14" height="14" aria-hidden="true" />
-      </button>
-      <button
+        icon={<LucideMinus width="14" height="14" aria-hidden="true" />}
+      />
+      <IconButton
         className="window-controls__btn window-controls__btn--close"
         onClick={handleClose}
         aria-label={t('window.close')}
         title={t('window.close')}
-      >
-        <LucideX width="14" height="14" aria-hidden="true" />
-      </button>
+        icon={<LucideX width="14" height="14" aria-hidden="true" />}
+      />
     </div>
   );
 }
diff --git a/src/miniapp-market-web/src/App.tsx b/src/miniapp-market-web/src/App.tsx
index 6c958c7939..a2189c630e 100644
--- a/src/miniapp-market-web/src/App.tsx
+++ b/src/miniapp-market-web/src/App.tsx
@@ -1,4 +1,4 @@
-import { Input, Textarea } from '@openbitfun/ui';
+import { Input, Textarea, Button, IconButton } from '@openbitfun/ui';
 import { FormEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { CubeFocus as MarketLogo, GithubLogo, IconContext } from '@phosphor-icons/react';
 import {
@@ -284,7 +284,7 @@ function Header({
   return (
     <header className="topbar">
       <div className="topbar-inner">
-        <button className="brand" onClick={() => navigate('/')} aria-label={t('market')}>
+        <Button labelBehavior="static" type="button" className="brand" onClick={() => navigate('/')} aria-label={t('market')}>
           <span className="brand-mark">
             <MarketLogo size={25} weight="duotone" aria-hidden="true" />
           </span>
@@ -292,46 +292,46 @@ function Header({
             <strong>OpenBitFun</strong>
             <span>{t('market')}</span>
           </span>
-        </button>
+        </Button>
         <nav aria-label={t('navigationLabel')}>
-          <button
+          <Button labelBehavior="static" type="button"
             className={routeIsActive('/') ? 'active' : undefined}
             aria-current={routeIsActive('/') ? 'page' : undefined}
             onClick={() => navigate('/')}
           >
             {t('discover')}
-          </button>
+          </Button>
           {config?.webSubmissionsEnabled && (
-            <button
+            <Button labelBehavior="static" type="button"
               className={routeIsActive('/submit') ? 'active' : undefined}
               aria-current={routeIsActive('/submit') ? 'page' : undefined}
               onClick={() => navigate('/submit')}
             >
               {t('submit')}
-            </button>
+            </Button>
           )}
           {me && (
-            <button
+            <Button labelBehavior="static" type="button"
               className={routeIsActive('/submissions') ? 'active' : undefined}
               aria-current={routeIsActive('/submissions') ? 'page' : undefined}
               onClick={() => navigate('/submissions')}
             >
               {t('submissions')}
-            </button>
+            </Button>
           )}
           {me?.isAdmin && (
-            <button
+            <Button labelBehavior="static" type="button"
               className={routeIsActive('/admin') ? 'active' : undefined}
               aria-current={routeIsActive('/admin') ? 'page' : undefined}
               onClick={() => navigate('/admin')}
             >
               {t('admin')}
-            </button>
+            </Button>
           )}
         </nav>
         <div className="topbar-actions">
           <div className="language-control" ref={languageControlRef}>
-            <button
+            <Button labelBehavior="static"
               ref={languageTriggerRef}
               className="header-control language-trigger"
               type="button"
@@ -348,7 +348,7 @@ function Header({
                 size={14}
                 aria-hidden="true"
               />
-            </button>
+            </Button>
             {languageMenuOpen && (
               <div
                 className="language-menu"
@@ -358,7 +358,7 @@ function Header({
               >
                 <span className="language-menu-label">{t('language')}</span>
                 {LOCALE_OPTIONS.map((localeOption) => (
-                  <button
+                  <Button labelBehavior="static"
                     key={localeOption.value}
                     className={localeOption.value === locale ? 'selected' : undefined}
                     type="button"
@@ -373,36 +373,35 @@ function Header({
                     {localeOption.value === locale && (
                       <Check size={16} aria-hidden="true" />
                     )}
-                  </button>
+                  </Button>
                 ))}
               </div>
             )}
           </div>
-          <button
+          <IconButton
             className="header-control theme-toggle"
             type="button"
             aria-label={t(theme === 'dark' ? 'switchToLight' : 'switchToDark')}
             title={t(theme === 'dark' ? 'switchToLight' : 'switchToDark')}
             onClick={toggleTheme}
-          >
-            {theme === 'dark' ? (
+            icon={theme === 'dark' ? (
               <Sun size={18} aria-hidden="true" />
             ) : (
               <Moon size={18} aria-hidden="true" />
             )}
-          </button>
+          />
           {me ? (
             <div className="profile">
               <img src={me.user.avatarUrl} alt="" />
               <span>@{me.user.login}</span>
-              <button
+              <IconButton
                 className="icon-button"
                 onClick={() => void onLogout()}
                 aria-label={t('signOut')}
                 title={t('signOut')}
-              >
-                <SignOut size={18} aria-hidden="true" />
-              </button>
+                type="button"
+                icon={<SignOut size={18} aria-hidden="true" />}
+              />
             </div>
           ) : (
             <a
@@ -536,7 +535,7 @@ function CatalogPage({
         </div>
 
         <div className="category-tabs" aria-label={t('categoryLabel')}>
-          <button
+          <Button labelBehavior="static"
             type="button"
             className={category === '' ? 'active' : undefined}
             aria-pressed={category === ''}
@@ -544,9 +543,9 @@ function CatalogPage({
           >
             <Cube size={18} aria-hidden="true" />
             {t('allCategories')}
-          </button>
+          </Button>
           {(config?.categories || MARKET_CATEGORIES).map((item) => (
-            <button
+            <Button labelBehavior="static"
               type="button"
               key={item}
               className={category === item ? 'active' : undefined}
@@ -554,7 +553,7 @@ function CatalogPage({
               onClick={() => setCategory(item)}
             >
               {categoryLabel(item, t)}
-            </button>
+            </Button>
           ))}
         </div>
 
@@ -570,10 +569,10 @@ function CatalogPage({
               </span>
               <p>{t('empty')}</p>
               {config?.webSubmissionsEnabled ? (
-                <button className="button button-secondary" onClick={() => navigate('/submit')}>
+                <Button labelBehavior="static" type="button" className="button button-secondary" onClick={() => navigate('/submit')}>
                   <UploadSimple size={18} aria-hidden="true" />
                   {t('submit')}
-                </button>
+                </Button>
               ) : (
                 <span className="empty-state-hint">{t('desktopSubmissionHint')}</span>
               )}
@@ -585,10 +584,10 @@ function CatalogPage({
             ))}
         </div>
         {cursor && (
-          <button className="button button-secondary load-more" onClick={() => void load(cursor, true)}>
+          <Button labelBehavior="static" type="button" className="button button-secondary load-more" onClick={() => void load(cursor, true)}>
             {t('loadMore')}
             <ArrowRight size={18} aria-hidden="true" />
-          </button>
+          </Button>
         )}
       </section>
     </main>
@@ -734,10 +733,10 @@ function DetailPage({
   if (error) {
     return (
       <main className="narrow-page">
-        <button className="back-link" onClick={() => navigate('/')}>
+        <Button labelBehavior="static" type="button" className="back-link" onClick={() => navigate('/')}>
           <ArrowLeft size={18} aria-hidden="true" />
           {t('back')}
-        </button>
+        </Button>
         <Notice tone="error">{errorMessage(error, t)}</Notice>
       </main>
     );
@@ -748,10 +747,10 @@ function DetailPage({
   const localized = localizedListing(app, locale);
   return (
     <main className="detail-page">
-      <button className="back-link" onClick={() => navigate('/')}>
+      <Button labelBehavior="static" type="button" className="back-link" onClick={() => navigate('/')}>
         <ArrowLeft size={18} aria-hidden="true" />
         {t('back')}
-      </button>
+      </Button>
       <section className="detail-hero">
         <div className="detail-copy">
           <span className="category-chip">{categoryLabel(app.category, t)}</span>
@@ -773,7 +772,7 @@ function DetailPage({
               <DownloadSimple size={18} aria-hidden="true" />
               {t('install')}
             </a>
-            <button
+            <Button labelBehavior="static" type="button"
               className={`button button-secondary ${app.isFavorited ? 'active' : ''}`}
               onClick={async () => {
                 if (!me) {
@@ -787,9 +786,9 @@ function DetailPage({
               <Heart size={18} fill={app.isFavorited ? 'currentColor' : 'none'} aria-hidden="true" />
               {app.isFavorited ? t('favorited') : t('favorite')}
               <small>{formatCompactNumber(app.favoriteCount, locale)}</small>
-            </button>
+            </Button>
             {owner && webSubmissionsEnabled && (
-              <button
+              <Button labelBehavior="static" type="button"
                 className="button button-secondary"
                 onClick={() =>
                   navigate(
@@ -799,13 +798,13 @@ function DetailPage({
               >
                 <UploadSimple size={18} aria-hidden="true" />
                 {t('submitUpdate')}
-              </button>
+              </Button>
             )}
           </div>
           <GetOpenBitFunCta placement="listing" t={t} />
           <div className="rating-control" aria-label={t('ratingLabel')}>
             {[1, 2, 3, 4, 5].map((value) => (
-              <button
+              <IconButton
                 key={value}
                 disabled={ratingBusy}
                 className={value <= (app.myRating || 0) ? 'selected' : ''}
@@ -831,9 +830,9 @@ function DetailPage({
                   }
                 }}
                 aria-label={`${value} ${t('stars')}`}
-              >
-                <Star size={18} fill={value <= (app.myRating || 0) ? 'currentColor' : 'none'} />
-              </button>
+                type="button"
+                icon={<Star size={18} fill={value <= (app.myRating || 0) ? 'currentColor' : 'none'} />}
+              />
             ))}
             <span>{app.ratingAverage.toFixed(1)} ({app.ratingCount})</span>
           </div>
@@ -901,7 +900,7 @@ function DetailPage({
             </span>
             <span>{release.yanked ? t('yankedLabel') : release.changelog}</span>
             {me?.isAdmin && !release.yanked && (
-              <button
+              <Button labelBehavior="static" type="button"
                 className="text-action danger-action"
                 disabled={!moderationReason.trim()}
                 onClick={async () => {
@@ -911,7 +910,7 @@ function DetailPage({
                 }}
               >
                 {t('yank')}
-              </button>
+              </Button>
             )}
           </div>
         ))}
@@ -924,7 +923,7 @@ function DetailPage({
                 onChange={(event) => setModerationReason(event.target.value)}
               />
             </label>
-            <button
+            <Button labelBehavior="static" type="button"
               className="button button-danger"
               disabled={!moderationReason.trim()}
               onClick={async () => {
@@ -933,7 +932,7 @@ function DetailPage({
               }}
             >
               {t('unpublish')}
-            </button>
+            </Button>
           </div>
         )}
       </section>
@@ -1125,10 +1124,10 @@ function SubmitPage({
           </div>
         </fieldset>
 
-        <button className="button submit-button" disabled={busy}>
+        <Button labelBehavior="static" type="submit" className="button submit-button" disabled={busy}>
           <Package size={18} aria-hidden="true" />
           {busy ? t('uploading') : t('publishForReview')}
-        </button>
+        </Button>
       </form>
     </main>
   );
@@ -1176,7 +1175,7 @@ function SubmissionsPage({
             action={
               webSubmissionsEnabled
               && (item.status === 'draft' || item.status === 'submitted') ? (
-                <button
+                <Button labelBehavior="static" type="button"
                   className="text-action danger-action"
                   onClick={async () => {
                     try {
@@ -1194,7 +1193,7 @@ function SubmissionsPage({
                   }}
                 >
                   {t('withdraw')}
-                </button>
+                </Button>
               ) : undefined
             }
           />
@@ -1206,10 +1205,10 @@ function SubmissionsPage({
             </span>
             <p>{t('noSubmissions')}</p>
             {webSubmissionsEnabled && (
-              <button className="button button-secondary" onClick={() => navigate('/submit')}>
+              <Button labelBehavior="static" type="button" className="button button-secondary" onClick={() => navigate('/submit')}>
                 <UploadSimple size={18} aria-hidden="true" />
                 {t('submit')}
-              </button>
+              </Button>
             )}
           </div>
         )}
@@ -1297,7 +1296,7 @@ function AdminPage({
       <div className="review-layout">
         <div className="review-list">
           {items.map((item) => (
-            <button
+            <Button labelBehavior="static" type="button"
               key={item.submissionId}
               className={selected?.submission.submissionId === item.submissionId ? 'selected' : ''}
               onClick={async () => {
@@ -1330,7 +1329,7 @@ function AdminPage({
                 </small>
               </span>
               <StatusBadge status={item.status} t={t} />
-            </button>
+            </Button>
           ))}
           {items.length === 0 && <p className="muted">{t('queueClear')}</p>}
         </div>
@@ -1414,22 +1413,22 @@ function AdminPage({
               </div>
               <div className="source-browser">
                 <div className="source-mode">
-                  <button
+                  <Button labelBehavior="static" type="button"
                     className={sourceMode === 'current' ? 'active' : ''}
                     onClick={() => setSourceMode('current')}
                   >
                     {t('currentSource')}
-                  </button>
-                  <button
+                  </Button>
+                  <Button labelBehavior="static" type="button"
                     className={sourceMode === 'diff' ? 'active' : ''}
                     onClick={() => setSourceMode('diff')}
                   >
                     {t('sourceDiff')}
-                  </button>
+                  </Button>
                 </div>
                 <div className="source-tabs">
                   {Object.keys(selected.sourceDiffs).map((name) => (
-                    <button className={sourceName === name ? 'active' : ''} onClick={() => setSourceName(name)} key={name}>{name}</button>
+                    <Button labelBehavior="static" type="button" className={sourceName === name ? 'active' : ''} onClick={() => setSourceName(name)} key={name}>{name}</Button>
                   ))}
                 </div>
                 <pre className={sourceMode === 'diff' ? 'diff-view' : ''}>
@@ -1441,7 +1440,7 @@ function AdminPage({
                 </pre>
               </div>
               <div className="review-actions">
-                <button
+                <Button labelBehavior="static" type="button"
                   className="button"
                   onClick={async () => {
                     try {
@@ -1454,9 +1453,9 @@ function AdminPage({
                   }}
                 >
                   {t('approve')}
-                </button>
+                </Button>
                 <Input className="market-input" value={reason} onChange={(event) => setReason(event.target.value)} placeholder={t('rejectionReason')} />
-                <button
+                <Button labelBehavior="static" type="button"
                   className="button button-danger"
                   disabled={!reason.trim()}
                   onClick={async () => {
@@ -1471,7 +1470,7 @@ function AdminPage({
                   }}
                 >
                   {t('reject')}
-                </button>
+                </Button>
               </div>
             </>
           )}
diff --git a/src/miniapp-market-web/src/styles.css b/src/miniapp-market-web/src/styles.css
index f9a000f393..2c60f2f7c8 100644
--- a/src/miniapp-market-web/src/styles.css
+++ b/src/miniapp-market-web/src/styles.css
@@ -2558,6 +2558,7 @@ footer a:hover {
   min-width: 0;
 }
 .market-input[data-openbitfun-component='input'] > input {
+  outline: 0;
   font: inherit;
   letter-spacing: inherit;
   height: auto;
@@ -2580,3 +2581,38 @@ footer a:hover {
   min-block-size: 0;
   letter-spacing: inherit;
 }
+
+/* Keep each surface's control geometry while using shared button semantics. */
+:where([data-openbitfun-component="button"]) {
+  display: inline-block;
+  block-size: auto;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  font: inherit;
+  letter-spacing: inherit;
+  white-space: normal;
+}
+:where([data-openbitfun-component="icon-button"]) {
+  inline-size: auto;
+  block-size: auto;
+}
+[data-openbitfun-component="button"]::before,
+[data-openbitfun-component="icon-button"]::before {
+  content: none;
+}
+/* Rich labels (previews, review cards, icon + text) retain the root layout. */
+[data-openbitfun-component="button"] > [data-openbitfun-part="content"],
+[data-openbitfun-component="button"] > [data-openbitfun-part="content"] > [data-openbitfun-part="label"] {
+  display: contents;
+  white-space: inherit;
+}
+[data-openbitfun-component="icon-button"] > [data-openbitfun-part="icon"] {
+  position: static;
+  inline-size: auto;
+  block-size: auto;
+}
+[data-openbitfun-component="icon-button"] > [data-openbitfun-part="icon"] > svg {
+  inline-size: 18px;
+  block-size: 18px;
+}
diff --git a/src/skin-market-web/src/AdminPage.tsx b/src/skin-market-web/src/AdminPage.tsx
index 20ede897ab..1a0e3bf64b 100644
--- a/src/skin-market-web/src/AdminPage.tsx
+++ b/src/skin-market-web/src/AdminPage.tsx
@@ -1,4 +1,4 @@
-import { Textarea } from '@openbitfun/ui';
+import { Textarea, Button } from '@openbitfun/ui';
 import { GithubLogo } from '@phosphor-icons/react';
 import { RefreshCw as ArrowClockwise, ShieldCheck, CircleAlert as WarningCircle } from 'lucide-react';
 import { useCallback, useEffect, useState } from 'react';
@@ -130,10 +130,10 @@ export function AdminPage({ account, accountResolved, locale, t }: AdminPageProp
           <h1>{t('reviewTitle')}</h1>
           <p>{t('reviewIntro')}</p>
         </div>
-        <button type="button" className="secondary-button" onClick={() => void load()} disabled={loading}>
+        <Button labelBehavior="static" type="button" className="secondary-button" onClick={() => void load()} disabled={loading}>
           <ArrowClockwise size={18} aria-hidden="true" />
           {t('refreshQueue')}
-        </button>
+        </Button>
       </header>
       {error && <div className="workflow-error" role="alert"><WarningCircle size={20} fill="currentColor" /><span>{t('reviewError')}</span><small>{error.message}</small></div>}
       {loading && queue.length === 0 ? <div className="workflow-loading">{t('reviewLoading')}</div>
@@ -147,7 +147,7 @@ export function AdminPage({ account, accountResolved, locale, t }: AdminPageProp
           <div className="review-workspace">
             <aside className="review-queue" aria-label={t('reviewQueueLabel')}>
               {queue.map(submission => (
-                <button
+                <Button labelBehavior="static"
                   type="button"
                   key={submission.submissionId}
                   aria-current={detail?.submission.submissionId === submission.submissionId || undefined}
@@ -156,7 +156,7 @@ export function AdminPage({ account, accountResolved, locale, t }: AdminPageProp
                   <strong>{submission.name || submission.slug}</strong>
                   <span>{submission.packageVersion ? `v${submission.packageVersion}` : submission.slug}</span>
                   <small>{formatMarketDate(submission.updatedAt, locale)}</small>
-                </button>
+                </Button>
               ))}
             </aside>
             <section className="review-detail">
@@ -208,8 +208,8 @@ export function AdminPage({ account, accountResolved, locale, t }: AdminPageProp
                     <label htmlFor="review-reason">{t('reviewReason')}</label>
                     <Textarea className="market-textarea" id="review-reason" rows={4} maxLength={1000} value={reason} onChange={event => setReason(event.target.value)} placeholder={t('reviewReasonPlaceholder')} />
                     <div>
-                      <button type="button" className="secondary-button danger-button" disabled={acting || !reason.trim()} onClick={() => void decide('reject')}>{t('reviewReject')}</button>
-                      <button type="button" className="primary-button" disabled={acting} onClick={() => void decide('approve')}>{acting ? t('reviewActing') : t('reviewApprove')}</button>
+                      <Button labelBehavior="static" type="button" className="secondary-button danger-button" disabled={acting || !reason.trim()} onClick={() => void decide('reject')}>{t('reviewReject')}</Button>
+                      <Button labelBehavior="static" type="button" className="primary-button" disabled={acting} onClick={() => void decide('approve')}>{acting ? t('reviewActing') : t('reviewApprove')}</Button>
                     </div>
                   </div>
                 </>
diff --git a/src/skin-market-web/src/App.tsx b/src/skin-market-web/src/App.tsx
index b63a13c3f2..24c4eb354f 100644
--- a/src/skin-market-web/src/App.tsx
+++ b/src/skin-market-web/src/App.tsx
@@ -1,3 +1,4 @@
+import { Button, IconButton } from '@openbitfun/ui';
 import { GithubLogo } from '@phosphor-icons/react';
 import {
   RefreshCw as ArrowClockwise,
@@ -139,7 +140,7 @@ export default function App() {
             )}
           </nav>
           <div className="header-actions">
-            <button
+            <Button labelBehavior="static"
               type="button"
               className="icon-button language-button"
               onClick={() => setLocale(locale === 'zh-CN' ? 'en-US' : 'zh-CN')}
@@ -148,18 +149,17 @@ export default function App() {
             >
               <GlobeSimple size={19} aria-hidden="true" />
               <span>{locale === 'zh-CN' ? 'EN' : '中'}</span>
-            </button>
-            <button
+            </Button>
+            <IconButton
               type="button"
               className="icon-button"
               onClick={toggleTheme}
               aria-label={theme === 'dark' ? t('switchToLight') : t('switchToDark')}
               title={theme === 'dark' ? t('switchToLight') : t('switchToDark')}
-            >
-              {theme === 'dark'
+              icon={theme === 'dark'
                 ? <Sun size={20} aria-hidden="true" />
                 : <Moon size={20} aria-hidden="true" />}
-            </button>
+            />
             {!accountResolved ? (
               <div className="account-loading" role="status" aria-label={t('accountLoading')}>
                 <span className="account-loading__avatar" aria-hidden="true" />
@@ -170,16 +170,15 @@ export default function App() {
               <div className="account-profile">
                 <img src={account.user.avatarUrl} alt="" width="28" height="28" />
                 <span title={`@${account.user.login}`}>@{account.user.login}</span>
-                <button
+                <IconButton
                   type="button"
                   className="account-signout"
                   onClick={() => void signOut()}
                   disabled={accountBusy}
                   aria-label={t('signOut')}
                   title={t('signOut')}
-                >
-                  <SignOut size={18} aria-hidden="true" />
-                </button>
+                  icon={<SignOut size={18} aria-hidden="true" />}
+                />
               </div>
             ) : (
               <a
@@ -202,10 +201,10 @@ export default function App() {
       {accountError && (
         <div className="account-alert" role="alert" title={accountError.message}>
           <span>{t('accountError')}</span>
-          <button type="button" onClick={() => void refreshAccount()}>
+          <Button labelBehavior="static" type="button" onClick={() => void refreshAccount()}>
             <ArrowClockwise size={17} aria-hidden="true" />
             {t('retryAccount')}
-          </button>
+          </Button>
         </div>
       )}
 
diff --git a/src/skin-market-web/src/CatalogPage.tsx b/src/skin-market-web/src/CatalogPage.tsx
index 0dbe6cef79..c8c6499f11 100644
--- a/src/skin-market-web/src/CatalogPage.tsx
+++ b/src/skin-market-web/src/CatalogPage.tsx
@@ -1,4 +1,4 @@
-import { Input } from '@openbitfun/ui';
+import { Input, Button } from '@openbitfun/ui';
 import { ArrowRight, Search as MagnifyingGlass } from 'lucide-react';
 import {
   useCallback,
@@ -180,14 +180,14 @@ export function CatalogPage({
 
           <div className="mode-filter" role="group" aria-label={t('modeFilterLabel')}>
             {(['all', 'light', 'dark'] as const).map((value) => (
-              <button
+              <Button labelBehavior="static"
                 key={value}
                 type="button"
                 aria-pressed={mode === value}
                 onClick={() => setMode(value)}
               >
                 {t(value === 'all' ? 'allModes' : value === 'light' ? 'lightMode' : 'darkMode')}
-              </button>
+              </Button>
             ))}
           </div>
 
@@ -229,15 +229,15 @@ export function CatalogPage({
         {error && items.length > 0 ? (
           <div className="inline-error" role="status">
             <span>{t('errorBody')}</span>
-            <button type="button" onClick={() => void loadMore()}>{t('retry')}</button>
+            <Button labelBehavior="static" type="button" onClick={() => void loadMore()}>{t('retry')}</Button>
           </div>
         ) : null}
 
         {nextCursor ? (
           <div className="load-more">
-            <button type="button" className="secondary-button" onClick={() => void loadMore()} disabled={loadingMore}>
+            <Button labelBehavior="static" type="button" className="secondary-button" onClick={() => void loadMore()} disabled={loadingMore}>
               {loadingMore ? t('loading') : t('loadMore')}
-            </button>
+            </Button>
           </div>
         ) : null}
       </section>
@@ -325,7 +325,7 @@ function ErrorState({ error, onRetry, t }: { error: unknown; onRetry: () => void
       <h3>{t('errorTitle')}</h3>
       <p>{t('errorBody')}</p>
       {requestId ? <code>{t('requestId', { id: requestId })}</code> : null}
-      <button type="button" className="secondary-button" onClick={onRetry}>{t('retry')}</button>
+      <Button labelBehavior="static" type="button" className="secondary-button" onClick={onRetry}>{t('retry')}</Button>
     </div>
   );
 }
diff --git a/src/skin-market-web/src/DetailPage.tsx b/src/skin-market-web/src/DetailPage.tsx
index 6dfb8c4ba6..36e49dbc46 100644
--- a/src/skin-market-web/src/DetailPage.tsx
+++ b/src/skin-market-web/src/DetailPage.tsx
@@ -1,4 +1,4 @@
-import { Textarea } from '@openbitfun/ui';
+import { Textarea, Button } from '@openbitfun/ui';
 import {
   ArrowLeft,
   ExternalLink as ArrowSquareOut,
@@ -100,7 +100,7 @@ export function DetailPage({ catalogSearch, isAdmin, locale, onNavigate, slug, t
           {notFound ? (
             <a className="primary-button" href={catalogPath} onClick={navigate(catalogPath)}>{t('backToCatalog')}</a>
           ) : (
-            <button type="button" className="secondary-button" onClick={() => setRetryKey((value) => value + 1)}>{t('retry')}</button>
+            <Button labelBehavior="static" type="button" className="secondary-button" onClick={() => setRetryKey((value) => value + 1)}>{t('retry')}</Button>
           )}
         </div>
       </main>
@@ -244,7 +244,7 @@ export function DetailPage({ catalogSearch, isAdmin, locale, onNavigate, slug, t
                   </p>
                 ) : null}
                 <div className="moderation-panel__actions">
-                  <button
+                  <Button labelBehavior="static"
                     type="button"
                     className="secondary-button danger-button"
                     disabled={!trimmedModerationReason || Boolean(moderationBusy)}
@@ -252,7 +252,7 @@ export function DetailPage({ catalogSearch, isAdmin, locale, onNavigate, slug, t
                   >
                     <Prohibit size={18} aria-hidden="true" />
                     {moderationBusy === detail.listingId ? t('unpublishingListing') : t('unpublishListing')}
-                  </button>
+                  </Button>
                 </div>
               </section>
             ) : null}
@@ -424,7 +424,7 @@ function ReleaseItem({
             {t('downloadVersion', { version: release.packageVersion })}
           </a>
           {isAdmin ? (
-            <button
+            <Button labelBehavior="static"
               type="button"
               className="release-yank-button"
               disabled={!moderationReasonReady || Boolean(moderationBusy)}
@@ -432,7 +432,7 @@ function ReleaseItem({
             >
               <Prohibit size={16} aria-hidden="true" />
               {moderationBusy === release.releaseId ? t('yankingRelease') : t('yankRelease')}
-            </button>
+            </Button>
           ) : null}
         </div>
       ) : null}
diff --git a/src/skin-market-web/src/SubmissionsPage.tsx b/src/skin-market-web/src/SubmissionsPage.tsx
index d7c30a434d..c5f22d22cd 100644
--- a/src/skin-market-web/src/SubmissionsPage.tsx
+++ b/src/skin-market-web/src/SubmissionsPage.tsx
@@ -1,3 +1,4 @@
+import { Button } from '@openbitfun/ui';
 import { GithubLogo } from '@phosphor-icons/react';
 import { RefreshCw as ArrowClockwise, Image, Package, CircleX as XCircle } from 'lucide-react';
 import { useCallback, useEffect, useState } from 'react';
@@ -114,10 +115,10 @@ export function SubmissionsPage({ account, accountResolved, locale, t }: Submiss
           <h1>{t('submissionsTitle')}</h1>
           <p>{t('submissionsIntro')}</p>
         </div>
-        <button type="button" className="secondary-button" onClick={() => void load()} disabled={loading}>
+        <Button labelBehavior="static" type="button" className="secondary-button" onClick={() => void load()} disabled={loading}>
           <ArrowClockwise size={18} aria-hidden="true" />
           {t('refresh')}
-        </button>
+        </Button>
       </header>
       {error && (
         <div className="workflow-error" role="alert">
@@ -167,14 +168,14 @@ export function SubmissionsPage({ account, accountResolved, locale, t }: Submiss
                   )}
                 </div>
                 {(submission.status === 'draft' || submission.status === 'submitted') && (
-                  <button
+                  <Button labelBehavior="static"
                     type="button"
                     className="text-button text-button--danger"
                     disabled={actingId === submission.submissionId}
                     onClick={() => void withdraw(submission)}
                   >
                     {actingId === submission.submissionId ? t('withdrawing') : t('withdraw')}
-                  </button>
+                  </Button>
                 )}
               </article>
             ))}
diff --git a/src/skin-market-web/src/styles.css b/src/skin-market-web/src/styles.css
index 79e38acec5..84d02dbaf1 100644
--- a/src/skin-market-web/src/styles.css
+++ b/src/skin-market-web/src/styles.css
@@ -2304,3 +2304,43 @@ img {
   min-block-size: 0;
   letter-spacing: inherit;
 }
+
+/* Keep each surface's control geometry while using shared button semantics. */
+:where([data-openbitfun-component="button"]) {
+  display: inline-block;
+  block-size: auto;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  font: inherit;
+  letter-spacing: inherit;
+  white-space: normal;
+}
+:where([data-openbitfun-component="icon-button"]) {
+  inline-size: auto;
+  block-size: auto;
+}
+[data-openbitfun-component="button"]::before,
+[data-openbitfun-component="icon-button"]::before {
+  content: none;
+}
+/* Rich labels (previews, review cards, icon + text) retain the root layout. */
+[data-openbitfun-component="button"] > [data-openbitfun-part="content"],
+[data-openbitfun-component="button"] > [data-openbitfun-part="content"] > [data-openbitfun-part="label"] {
+  display: contents;
+  white-space: inherit;
+}
+[data-openbitfun-component="icon-button"] > [data-openbitfun-part="icon"] {
+  position: static;
+  inline-size: auto;
+  block-size: auto;
+}
+[data-openbitfun-component="icon-button"] > [data-openbitfun-part="icon"] > svg {
+  inline-size: 18px;
+  block-size: 18px;
+}
+
+.header-actions > [data-openbitfun-component="icon-button"] > [data-openbitfun-part="icon"] > svg {
+  inline-size: 20px;
+  block-size: 20px;
+}

From f6401d679e8a98b201878805128758cabe88ab16 Mon Sep 17 00:00:00 2001
From: kev1n77 <fmy077@outlook.com>
Date: Tue, 15 Sep 2026 00:19:23 +0800
Subject: [PATCH 4/6] refactor(ui): connect installer options to shared
 Checkbox

---
 OpenBitFun-Installer/AGENTS.md                |  1 +
 OpenBitFun-Installer/package.json             |  7 +-
 .../src/pages/Options.test.tsx                | 99 +++++++++++++++++++
 pnpm-lock.yaml                                |  6 ++
 4 files changed, 111 insertions(+), 2 deletions(-)
 create mode 100644 OpenBitFun-Installer/src/pages/Options.test.tsx

diff --git a/OpenBitFun-Installer/AGENTS.md b/OpenBitFun-Installer/AGENTS.md
index b3c58298fc..efd0908199 100644
--- a/OpenBitFun-Installer/AGENTS.md
+++ b/OpenBitFun-Installer/AGENTS.md
@@ -48,6 +48,7 @@ Use the smallest matching check:
 pnpm run i18n:audit                                                   # resource-only i18n
 pnpm run i18n:generate && pnpm run i18n:contract:test && pnpm run i18n:audit
 pnpm --dir OpenBitFun-Installer run type-check                            # frontend i18n/runtime
+pnpm --dir OpenBitFun-Installer run test                                  # frontend control interactions
 cargo check --manifest-path OpenBitFun-Installer/src-tauri/Cargo.toml      # Tauri/Rust changes
 ```
 
diff --git a/OpenBitFun-Installer/package.json b/OpenBitFun-Installer/package.json
index c11f11c7d8..667dfc0322 100644
--- a/OpenBitFun-Installer/package.json
+++ b/OpenBitFun-Installer/package.json
@@ -26,7 +26,8 @@
     "installer:build:only": "node scripts/build-installer.cjs --skip-app-build",
     "installer:build:only:fast": "node scripts/build-installer.cjs --skip-app-build --mode fast",
     "installer:dev": "node scripts/build-installer.cjs --dev",
-    "type-check": "tsc --noEmit"
+    "type-check": "tsc --noEmit",
+    "test": "vitest run src"
   },
   "dependencies": {
     "@openbitfun/theme-openbitfun": "workspace:^",
@@ -46,6 +47,8 @@
     "@vitejs/plugin-react": "^4.6.0",
     "terser": "^5.46.0",
     "typescript": "~5.8.3",
-    "vite": "^7.0.4"
+    "vite": "^7.0.4",
+    "vitest": "^4.1.0",
+    "jsdom": "^29.0.1"
   }
 }
diff --git a/OpenBitFun-Installer/src/pages/Options.test.tsx b/OpenBitFun-Installer/src/pages/Options.test.tsx
new file mode 100644
index 0000000000..fa46f01abf
--- /dev/null
+++ b/OpenBitFun-Installer/src/pages/Options.test.tsx
@@ -0,0 +1,99 @@
+// @vitest-environment jsdom
+import { act, useState } from 'react';
+import { createRoot } from 'react-dom/client';
+import { afterEach, beforeEach, expect, it, vi } from 'vitest';
+import { Options } from './Options';
+import { ThemeSetup } from './ThemeSetup';
+import { WindowControls } from '../components/WindowControls';
+import type { InstallOptions } from '../types/installer';
+
+const mocks = vi.hoisted(() => ({ minimize: vi.fn(), close: vi.fn() }));
+vi.mock('react-i18next', () => ({ useTranslation: () => ({ t: (key: string) => key }) }));
+vi.mock('@tauri-apps/api/core', () => ({ invoke: vi.fn() }));
+vi.mock('@tauri-apps/plugin-dialog', () => ({ open: vi.fn() }));
+vi.mock('@tauri-apps/api/window', () => ({ getCurrentWindow: () => mocks }));
+
+const initial: InstallOptions = {
+  installPath: 'D:\\OpenBitFun', desktopShortcut: false, startMenu: true,
+  launchAfterInstall: false, appLanguage: 'en-US', themePreference: 'system', modelConfig: null,
+};
+let container: HTMLDivElement;
+let root: ReturnType<typeof createRoot>;
+beforeEach(() => {
+  (globalThis as typeof globalThis & { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+  container = document.createElement('div');
+  document.body.append(container);
+  root = createRoot(container);
+});
+afterEach(() => {
+  act(() => root.unmount());
+  container.remove();
+  vi.clearAllMocks();
+});
+
+it('updates an install option once per label or native input click and keeps the path editable', async () => {
+  const changed = vi.fn();
+  const clearError = vi.fn();
+  const refreshDiskSpace = vi.fn().mockResolvedValue(undefined);
+  function Page() {
+    const [options, setOptions] = useState(initial);
+    return <Options options={options} setOptions={value => { changed(value); setOptions(value); }}
+      diskSpace={null} error={null} refreshDiskSpace={refreshDiskSpace}
+      existingInstall={null} onLaunchRegisteredUninstaller={vi.fn()} onBack={vi.fn()}
+      onInstall={vi.fn()} isInstalling={false} clearInstallError={clearError} />;
+  }
+  await act(async () => root.render(<Page />));
+  const label = container.querySelector<HTMLLabelElement>('[data-openbitfun-component="checkbox"]')!;
+  const checkbox = label.querySelector('input')!;
+  expect(checkbox.checked).toBe(false);
+  act(() => label.click());
+  expect(checkbox.checked).toBe(true);
+  expect(changed).toHaveBeenCalledTimes(1);
+  act(() => checkbox.click());
+  expect(checkbox.checked).toBe(false);
+  expect(changed).toHaveBeenCalledTimes(2);
+  act(() => checkbox.focus());
+  expect(document.activeElement).toBe(checkbox);
+  expect(checkbox.tabIndex).toBe(0);
+
+  const path = container.querySelector<HTMLInputElement>('[data-openbitfun-component="input"] input')!;
+  await act(async () => {
+    Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')!.set!.call(path, 'D:\\Apps\\OpenBitFun');
+    path.dispatchEvent(new Event('input', { bubbles: true }));
+  });
+  expect(path.value).toBe('D:\\Apps\\OpenBitFun');
+  expect(clearError).toHaveBeenCalledTimes(1);
+  expect(refreshDiskSpace).toHaveBeenLastCalledWith('D:\\Apps\\OpenBitFun');
+});
+
+it('keeps path and install/navigation actions disabled during installation', async () => {
+  const install = vi.fn();
+  await act(async () => root.render(<Options options={initial} setOptions={vi.fn()}
+    diskSpace={null} error={null} refreshDiskSpace={vi.fn()} existingInstall={null}
+    onLaunchRegisteredUninstaller={vi.fn()} onBack={vi.fn()} onInstall={install}
+    isInstalling clearInstallError={vi.fn()} />));
+  expect(container.querySelector<HTMLInputElement>('input[type="text"]')!.disabled).toBe(true);
+  const buttons = [...container.querySelectorAll('button')];
+  expect(buttons).toHaveLength(3);
+  for (const button of buttons) {
+    expect(button.disabled).toBe(true);
+    expect(button.dataset.openbitfunComponent).toBe('button');
+    act(() => button.click());
+  }
+  expect(install).not.toHaveBeenCalled();
+});
+
+it('connects launch-after-install on the theme page and preserves window control handlers', async () => {
+  const changed = vi.fn();
+  await act(async () => root.render(<><ThemeSetup options={initial} setOptions={changed}
+    onLaunch={vi.fn()} onClose={vi.fn()} /><WindowControls /></>));
+  const label = container.querySelector<HTMLLabelElement>('[data-openbitfun-component="checkbox"]')!;
+  act(() => label.click());
+  expect(changed).toHaveBeenCalledTimes(1);
+  expect(changed.mock.calls[0][0](initial).launchAfterInstall).toBe(true);
+  const buttons = [...container.querySelectorAll<HTMLButtonElement>('[data-openbitfun-component="icon-button"]')];
+  act(() => buttons[0].click());
+  act(() => buttons[1].click());
+  expect(mocks.minimize).toHaveBeenCalledTimes(1);
+  expect(mocks.close).toHaveBeenCalledTimes(1);
+});
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index bedb83e385..5e405d8230 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -99,6 +99,9 @@ importers:
       '@vitejs/plugin-react':
         specifier: ^4.6.0
         version: 4.7.0(vite@7.3.1(@types/node@22.19.7)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))
+      jsdom:
+        specifier: ^29.0.1
+        version: 29.0.1(@noble/hashes@2.0.1)
       terser:
         specifier: ^5.46.0
         version: 5.46.0
@@ -108,6 +111,9 @@ importers:
       vite:
         specifier: ^7.0.4
         version: 7.3.1(@types/node@22.19.7)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2)
+      vitest:
+        specifier: ^4.1.0
+        version: 4.1.0(@types/node@22.19.7)(jsdom@29.0.1(@noble/hashes@2.0.1))(vite@7.3.1(@types/node@22.19.7)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))
 
   design-system: {}
 

From 01b5e5147a5ca6fd1ad90c77d9c794fd78709ef5 Mon Sep 17 00:00:00 2001
From: kev1n77 <fmy077@outlook.com>
Date: Tue, 15 Sep 2026 00:19:23 +0800
Subject: [PATCH 5/6] refactor(ui): adopt native Disclosure in Skin market

---
 src/miniapp-market-web/README.md            |  1 +
 src/skin-market-web/README.md               |  1 +
 src/skin-market-web/src/AdminPage.tsx       |  4 ++--
 src/skin-market-web/src/DetailPage.test.tsx | 17 +++++++++++++++++
 src/skin-market-web/src/DetailPage.tsx      |  7 +++----
 5 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/src/miniapp-market-web/README.md b/src/miniapp-market-web/README.md
index d744df87d5..a5dc03f17f 100644
--- a/src/miniapp-market-web/README.md
+++ b/src/miniapp-market-web/README.md
@@ -115,6 +115,7 @@ cargo run -p openbitfun-miniapp-market-server
 终端二启动 Vite：
 
 ```bash
+pnpm --dir design-system run build:packages # 首次运行或共享主题/UI 包变更后执行
 pnpm run dev:miniapp-market
 ```
 
diff --git a/src/skin-market-web/README.md b/src/skin-market-web/README.md
index 98218762f0..fcba761d93 100644
--- a/src/skin-market-web/README.md
+++ b/src/skin-market-web/README.md
@@ -26,6 +26,7 @@ The server generates variants lazily, stores them beside the content-addressed
 original, and serves public variants with immutable cache headers.
 
 ```bash
+pnpm --dir design-system run build:packages # First run or after shared theme/UI changes
 pnpm --dir src/skin-market-web dev
 pnpm --dir src/skin-market-web type-check
 pnpm --dir src/skin-market-web test
diff --git a/src/skin-market-web/src/AdminPage.tsx b/src/skin-market-web/src/AdminPage.tsx
index 1a0e3bf64b..70ff2befbb 100644
--- a/src/skin-market-web/src/AdminPage.tsx
+++ b/src/skin-market-web/src/AdminPage.tsx
@@ -1,4 +1,4 @@
-import { Textarea, Button } from '@openbitfun/ui';
+import { Textarea, Button, Disclosure } from '@openbitfun/ui';
 import { GithubLogo } from '@phosphor-icons/react';
 import { RefreshCw as ArrowClockwise, ShieldCheck, CircleAlert as WarningCircle } from 'lucide-react';
 import { useCallback, useEffect, useState } from 'react';
@@ -203,7 +203,7 @@ export function AdminPage({ account, accountResolved, locale, t }: AdminPageProp
                     <div><dt>{t('reviewPreviewHash')}</dt><dd>{detail.previewSha256 || t('notDeclared')}</dd></div>
                     <div><dt>{t('reviewBundleHash')}</dt><dd>{detail.reviewBundleHash || t('notDeclared')}</dd></div>
                   </dl>
-                  {detail.manifest !== undefined && <details className="manifest-panel"><summary>{t('reviewManifest')}</summary><pre>{JSON.stringify(detail.manifest, null, 2)}</pre></details>}
+                  {detail.manifest !== undefined && <Disclosure presentation="native" className="manifest-panel" summary={t('reviewManifest')}><pre>{JSON.stringify(detail.manifest, null, 2)}</pre></Disclosure>}
                   <div className="review-actions">
                     <label htmlFor="review-reason">{t('reviewReason')}</label>
                     <Textarea className="market-textarea" id="review-reason" rows={4} maxLength={1000} value={reason} onChange={event => setReason(event.target.value)} placeholder={t('reviewReasonPlaceholder')} />
diff --git a/src/skin-market-web/src/DetailPage.test.tsx b/src/skin-market-web/src/DetailPage.test.tsx
index 95e032dd24..499cc13b0b 100644
--- a/src/skin-market-web/src/DetailPage.test.tsx
+++ b/src/skin-market-web/src/DetailPage.test.tsx
@@ -161,4 +161,21 @@ describe('DetailPage moderation', () => {
     expect(container.textContent).not.toContain('yankRelease');
     expect(container.textContent).not.toContain('unpublishListing');
   });
+
+  it('keeps older releases in a native disclosure that opens from its summary', async () => {
+    mocks.detail.mockResolvedValue({
+      ...detail,
+      releases: Array.from({ length: 5 }, (_, index) => ({
+        ...detail.releases[0], releaseId: `release-${index}`, releaseNumber: index + 1,
+      })),
+    });
+    await act(async () => root.render(<DetailPage catalogSearch="" isAdmin={false}
+      locale="en-US" onNavigate={vi.fn()} slug="ocean-night" t={t} />));
+    const disclosure = container.querySelector<HTMLDetailsElement>('details.older-releases')!;
+    expect(disclosure.dataset.openbitfunComponent).toBe('disclosure');
+    expect(disclosure.open).toBe(false);
+    act(() => disclosure.querySelector('summary')!.click());
+    expect(disclosure.open).toBe(true);
+    expect(disclosure.querySelector('.release-list')).not.toBeNull();
+  });
 });
diff --git a/src/skin-market-web/src/DetailPage.tsx b/src/skin-market-web/src/DetailPage.tsx
index 36e49dbc46..1819740640 100644
--- a/src/skin-market-web/src/DetailPage.tsx
+++ b/src/skin-market-web/src/DetailPage.tsx
@@ -1,4 +1,4 @@
-import { Textarea, Button } from '@openbitfun/ui';
+import { Textarea, Button, Disclosure } from '@openbitfun/ui';
 import {
   ArrowLeft,
   ExternalLink as ArrowSquareOut,
@@ -358,8 +358,7 @@ function ReleaseHistory({
         ))}
       </div>
       {older.length ? (
-        <details className="older-releases">
-          <summary>{t('olderReleases', { count: older.length })}</summary>
+        <Disclosure presentation="native" className="older-releases" summary={t('olderReleases', { count: older.length })}>
           <div className="release-list">
             {older.map((release) => (
               <ReleaseItem
@@ -375,7 +374,7 @@ function ReleaseHistory({
               />
             ))}
           </div>
-        </details>
+        </Disclosure>
       ) : null}
     </section>
   );

From 0dfc62ff57af313105a7cb0150eb09a8eb7d4b4c Mon Sep 17 00:00:00 2001
From: kev1n77 <fmy077@outlook.com>
Date: Tue, 15 Sep 2026 09:46:33 +0800
Subject: [PATCH 6/6] fix(installer): use shared Select and initialize
 typography before render

---
 OpenBitFun-Installer/index.html               |  1 -
 OpenBitFun-Installer/src/main.tsx             |  1 +
 .../src/pages/ModelSetup.test.tsx             | 96 +++++++++++++++++++
 OpenBitFun-Installer/src/pages/ModelSetup.tsx |  8 +-
 4 files changed, 103 insertions(+), 3 deletions(-)
 create mode 100644 OpenBitFun-Installer/src/pages/ModelSetup.test.tsx

diff --git a/OpenBitFun-Installer/index.html b/OpenBitFun-Installer/index.html
index 600ee6d262..eb57e70ac9 100644
--- a/OpenBitFun-Installer/index.html
+++ b/OpenBitFun-Installer/index.html
@@ -8,7 +8,6 @@
   <link rel="icon" type="image/png" sizes="16x16" href="/src/assets/openbitfun-app-icon-16.png" />
   <link rel="icon" type="image/png" sizes="32x32" href="/src/assets/openbitfun-app-icon-32.png" />
     <title>Install OpenBitFun</title>
-  <script type="module" src="/src/theme/installerThemeBootstrap.ts"></script>
   <style>
     html, body { margin: 0; padding: 0; }
   </style>
diff --git a/OpenBitFun-Installer/src/main.tsx b/OpenBitFun-Installer/src/main.tsx
index 22618acbea..3cbb53b265 100644
--- a/OpenBitFun-Installer/src/main.tsx
+++ b/OpenBitFun-Installer/src/main.tsx
@@ -1,3 +1,4 @@
+import './theme/installerThemeBootstrap';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './i18n';
diff --git a/OpenBitFun-Installer/src/pages/ModelSetup.test.tsx b/OpenBitFun-Installer/src/pages/ModelSetup.test.tsx
new file mode 100644
index 0000000000..61c50fab8e
--- /dev/null
+++ b/OpenBitFun-Installer/src/pages/ModelSetup.test.tsx
@@ -0,0 +1,96 @@
+// @vitest-environment jsdom
+import { act } from 'react';
+import { createRoot } from 'react-dom/client';
+import { afterEach, beforeEach, expect, it, vi } from 'vitest';
+import { ModelSetup } from './ModelSetup';
+import { PROVIDER_TEMPLATES, createModelConfigFromTemplate } from '../data/modelProviders';
+import type { InstallOptions, RemoteModelInfo } from '../types/installer';
+
+const mocks = vi.hoisted(() => ({ invoke: vi.fn() }));
+vi.mock('@tauri-apps/api/core', () => ({ invoke: mocks.invoke }));
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({ t: (key: string, options?: { defaultValue?: string }) => options?.defaultValue || key }),
+}));
+const initial: InstallOptions = {
+  installPath: 'D:\\OpenBitFun', desktopShortcut: false, startMenu: true,
+  launchAfterInstall: false, appLanguage: 'en-US', themePreference: 'system', modelConfig: null,
+};
+let container: HTMLDivElement;
+let root: ReturnType<typeof createRoot>;
+let changed = vi.fn();
+beforeEach(() => {
+  (globalThis as typeof globalThis & { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+  container = document.createElement('div');
+  document.body.append(container);
+  root = createRoot(container);
+  changed = vi.fn();
+});
+afterEach(() => {
+  act(() => root.unmount());
+  container.remove();
+  vi.clearAllMocks();
+});
+async function render(options = initial, previewOnly = false) {
+  await act(async () => root.render(<ModelSetup previewOnly={previewOnly} options={options} setOptions={changed}
+    onSkip={vi.fn()} onNext={vi.fn()} onTestConnection={vi.fn()} />));
+}
+function trigger(label: string) {
+  return container.querySelector<HTMLButtonElement>(`button[role="combobox"][aria-label="${label}"]`)!;
+}
+function option(label: string) {
+  return [...document.querySelectorAll<HTMLButtonElement>('[role="option"]')]
+    .find(item => item.getAttribute('aria-label') === label)!;
+}
+
+it('uses the shared popup for provider selection and restores focus after Escape', async () => {
+  await render();
+  const provider = trigger('model.providerLabel');
+  expect(provider.closest('[data-openbitfun-component="select"]')).not.toBeNull();
+  await act(async () => provider.click());
+  expect(document.querySelector('[data-openbitfun-component="select-popup"]')).not.toBeNull();
+  await act(async () => option('model.customProvider').click());
+  expect(trigger('model.form.provider')).not.toBeNull();
+  expect(changed.mock.lastCall![0](initial).modelConfig.provider).toBe('custom');
+  await act(async () => trigger('model.form.provider').click());
+  await act(async () => option('model.formats.responsesApi').click());
+  expect(changed.mock.lastCall![0](initial).modelConfig.format).toBe('responses');
+  await act(async () => provider.click());
+  await act(async () => document.activeElement!.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true })));
+  expect(document.querySelector('[data-openbitfun-component="select-popup"]')).toBeNull();
+  expect(document.activeElement).toBe(provider);
+});
+
+it('retains endpoint notes and applies the selected endpoint format', async () => {
+  const template = Object.values(PROVIDER_TEMPLATES).find(item => (item.baseUrlOptions?.length ?? 0) > 1)!;
+  await render({ ...initial, modelConfig: createModelConfigFromTemplate(template, null) });
+  await act(async () => trigger('model.endpointPreset').click());
+  const endpoint = template.baseUrlOptions![1];
+  const label = endpoint.noteKey?.split('.').pop() || endpoint.format.toUpperCase();
+  const item = option(label);
+  expect(item.textContent).toContain(label);
+  await act(async () => item.click());
+  const config = changed.mock.lastCall![0](initial).modelConfig;
+  expect(config.baseUrl).toBe(endpoint.url);
+  expect(config.format).toBe(endpoint.format);
+});
+
+it('keeps the model popup open while loading and lets the returned model be selected', async () => {
+  let resolve!: (models: RemoteModelInfo[]) => void;
+  mocks.invoke.mockReturnValue(new Promise<RemoteModelInfo[]>(done => { resolve = done; }));
+  const modelConfig = { ...createModelConfigFromTemplate(PROVIDER_TEMPLATES.deepseek, null), apiKey: 'test-key' };
+  await render({ ...initial, modelConfig });
+  await act(async () => trigger('model.form.modelSelection').click());
+  expect(mocks.invoke).toHaveBeenCalledTimes(1);
+  expect(document.querySelector('[data-openbitfun-component="select-popup"]')).not.toBeNull();
+  await act(async () => resolve([{ id: 'new-remote-model' }]));
+  await act(async () => option('new-remote-model').click());
+  expect(changed.mock.lastCall![0](initial).modelConfig.modelName).toBe('new-remote-model');
+});
+
+it('keeps native preview from fetching remote models', async () => {
+  const modelConfig = { ...createModelConfigFromTemplate(PROVIDER_TEMPLATES.deepseek, null), apiKey: 'test-key' };
+  await render({ ...initial, modelConfig }, true);
+  await act(async () => trigger('model.form.modelSelection').click());
+  expect(document.querySelector('[data-openbitfun-component="select-popup"]')).not.toBeNull();
+  expect(mocks.invoke).not.toHaveBeenCalled();
+});
diff --git a/OpenBitFun-Installer/src/pages/ModelSetup.tsx b/OpenBitFun-Installer/src/pages/ModelSetup.tsx
index b8f3406e6f..f37cb7215a 100644
--- a/OpenBitFun-Installer/src/pages/ModelSetup.tsx
+++ b/OpenBitFun-Installer/src/pages/ModelSetup.tsx
@@ -297,6 +297,7 @@ export function ModelSetup({ options, setOptions, onSkip, onNext, onTestConnecti
                 value={selectedProviderId}
                 options={providerOptions}
                 placeholder={t('model.selectProvider')}
+                aria-label={t('model.providerLabel')}
                 onValueChange={(value) => handleProviderSelect(String(value))}
               />
             </Field>
@@ -340,6 +341,7 @@ export function ModelSetup({ options, setOptions, onSkip, onNext, onTestConnecti
                       value={template?.baseUrlOptions?.some((option) => option.url === effectiveBaseUrl) ? effectiveBaseUrl : ''}
                       options={baseUrlOptions}
                       placeholder={t('model.baseUrlPlaceholder')}
+                      aria-label={t('model.endpointPreset')}
                       onValueChange={(value) => handleBaseUrlOptionSelect(String(value))}
                     />
                   </Field>
@@ -351,8 +353,9 @@ export function ModelSetup({ options, setOptions, onSkip, onNext, onTestConnecti
                       value={modelSelectionValue}
                       options={modelOptions}
                       placeholder={t('model.modelNameSelectPlaceholder')}
-                      disabled={isFetchingRemoteModels}
-                      onOpenChange={(open) => { if (open && !previewOnly) void fetchRemoteModels(); }}
+                      aria-label={t('model.form.modelSelection')}
+                      aria-busy={isFetchingRemoteModels}
+                      onOpenChange={(open) => { if (open && !previewOnly && !isFetchingRemoteModels) void fetchRemoteModels(); }}
                       onValueChange={(value) => {
                         const next = String(value);
                         if (next === CUSTOM_MODEL_OPTION) {
@@ -413,6 +416,7 @@ export function ModelSetup({ options, setOptions, onSkip, onNext, onTestConnecti
                         value={isCustomProvider ? customFormat : apiFormat}
                         options={formatSelectOptions}
                         placeholder={t('model.form.providerPlaceholder')}
+                        aria-label={t('model.form.provider')}
                         onValueChange={(value) => {
                           const format = value as RequestFormatValue;
                           if (isCustomProvider) setCustomFormat(format);