@robert-stackflow/oneui 0.1.0 → 0.2.0

package/CHANGELOG.md

@@ -0,0 +1,18 @@
+# Changelog
+
+## 0.2.0 — 2026-10-28
+
+- 新增 MessageDialog、ConfirmDialog、FormDialog 与统一 LoadingState，复用表单校验、异步提交、错误反馈和焦点管理。
+- TreeSelect 新增 category 图标、数量、层级连线样式；保留 tree 风格，支持父子联动多选。
+- 新增 TreeTable，复用 Table 列定义，支持受控展开、多级连线和键盘导航；列支持 align、width。
+- Combobox 新增 mode="input" 触发框补全；保留弹层搜索，支持异步加载、取消、创建与失败重试。
+- MultiSelect 新增 display="tags"，与 TagInput 共用标签实现；保留摘要模式及选择限制。
+- 蓝白主题采用 Moment 对应色板、输入 hover 混色和深色参数；修复默认色板迁移与选择器分类栏底色。
+- 统一菜单项 1px 间距，修复快捷键右对齐、宿主 kbd 边框干扰、关闭的 Popover 被布局样式显示等问题。
+- 树选择器底部清空/完成操作使用独立的 8px 按钮间距。
+- 共享应用外壳与示例布局统一，修复图标尺寸、链接文字、动效示例、表单间距、弹层和移动布局。
+- 发布构建使用干净输出并检查包内引用；增加独立 tarball 消费项目的类型、生产与交互验证。
+
+## 0.1.0 — 2026-10-28
+
+- 首次发布 React 组件、应用外壳、极简/蓝白主题与图标字符资源。

package/README.md

@@ -30,17 +30,44 @@ export function App() {
 
 `ThemeProvider` 管理当前文档的主题，应用根部放置一个即可。颜色模式、动效、字体、密度、圆角和自定义配色均由共享层应用。
 
+蓝白默认色板取自 Moment 的 `admin/src/styles.css` 最终变量及 `admin/src/main.tsx` 的 victoria 色阶：浅色背景 `#F5F7FB`、面板 `#FFFFFF`、正文 `#25324A`、次级文字 `#8592A8`、边框 `#E3E8F1`。导航/焦点蓝为 `#5067B8`，主按钮为 `#4059AA`，开关为 `#526EDB`；深色同样使用 Moment 的对应值。各颜色用途分开配置，不再共用一种近似蓝。
+
+`normalizeAppearance` 使用 `paletteVersion: 2` 兼容旧蓝白默认值；非默认自定义配色保留，已带版本的显式颜色也不会被迁移。Desktop 与 Web 共用该规范化函数。参考值和源码摘要保存在 `tests/fixtures/moment-palette.json`，验证不依赖 Moment 或 Mantine 安装。
+
+蓝白输入与选择控件的 hover 边框复用 Moment 的混色规则：强调色 35% 与基础边框色混合。聚焦或展开时使用完整强调色，错误状态保持错误色；禁用、只读控件不响应 hover。图标、Emoji 和符号选择器的分类栏使用透明背景与主题选中块，不继承普通块状标签页的底板和投影。
+
 ## 边界
 
 - `AppShell` 通过导航数据和 `onNavigate` 接入任何路由或状态机制。
 - `headerActions`、`sidebarFooter`、`windowControls` 为应用能力插槽；`draggable` 仅标记 header 的拖动区域。
 - `UIProvider` 配置 Toast 位置、Tooltip 位置和必填标记；组件不读取宿主设置。
 - 普通组件也支持子路径导入，例如 `@robert-stackflow/oneui/Input`。
+- 页面直接复用 Form / FormField / useFormState 的校验与提交状态、Alert 的错误反馈和 ConfirmDialog 的确认流程；避免另写原生表单、按钮样式或错误提示。
+- Button 支持 `href`，渲染标准链接并沿用按钮样式；禁用或加载时阻止导航。Card 传入 `onClick` 后渲染可通过键盘激活的按钮卡片。导航与业务回调由消费应用提供。
 - CSS Modules 随组件分发，由消费项目的构建工具处理。图标/字符目录通过标准 `new URL(..., import.meta.url)` 加载随包资源。
 - React 和 React DOM 为 peer dependencies，不打入组件包。当前验证版本为 React 19.3.1，浏览器验证使用 Chromium。
 
+## 弹窗与加载状态
+
+`Dialog` 用于自定义内容，支持 small / medium / large。`MessageDialog` 提供纯文字消息与确认按钮，`ConfirmDialog` 提供普通、危险操作确认，`FormDialog` 提供有统一字段间距的表单及保存操作。三者均可从根入口或对应组件子路径导入。
+
+确认与表单支持异步回调，等待期间禁止重复提交及关闭，失败时保留内容并显示错误；回调返回 `false` 可保留弹窗。`FormDialog` 接收共享 `useFormState` 的 controller，字段使用 `FormField`，`onSubmit` 接收校验后的 values，错误样式与普通 Form 一致。
+
+`LoadingState` 复用 Spinner；`showLabel={false}` 仅显示动画，`fullPage` 用于页面内容区域。应用自行放置等待边界，保留路由外壳。
+
+以上 API 从 0.2.0 起提供。
+
+## 层级选择、补全与标签
+
+- `TreeSelect variant="category"` 在原有树选择交互上增加图标底块、子项数量与层级连线；默认 `variant="tree"` 保留简洁样式。两种样式均支持搜索、父子联动、多选、禁用、异步加载及键盘操作。`HierarchyOption.count` 可单独提供数量。
+- `TreeTable` 复用 `Table` 的列定义，接收 `rows`、`rowKey`、`getChildren`、`rowLabel`；通过 `expanded` / `onExpandedChange` 控制展开，或使用 `defaultExpanded` / `defaultExpandAll`。`treeColumn` 默认为第一列，支持多级连线、方向键导航及独立行操作。`Column.align`、`Column.width` 可用于对齐和列宽。
+- `Combobox mode="input"` 直接在触发框输入并在下方显示候选，保留 `loadOptions`、`onCreate` 和键盘选择。输入中的文本只用于搜索；选择候选或创建成功才提交选项值，关闭时恢复已选标签。默认 `mode="panel"` 继续使用弹层内搜索。
+- `MultiSelect display="tags"` 在触发框内展示可移除标签，复用 `TagInput` 的标签样式；默认 `display="summary"` 保留文字摘要。两种模式共享连续选择、搜索、数量限制和表单值。只读标签不可移除，禁用选项保持不可操作。
+
+菜单项间距统一为 `--menu-item-spacing: 1px`，菜单快捷键为靠右的纯文字提示，不预留空的指示器位置。Desktop 与 Web 共用示例：`/pickers?view=hierarchy`、`/forms?view=advanced`、`/data?view=hierarchy`；层级表格中的增删改仅更新示例内存数据。以上扩展从 0.2.0 起提供。
+
 ## 构建与打包
 
-在 General 根目录运行 `npm run pack:ui`。源码工作区供两端即时开发使用；发布内容单独生成到本目录 `dist`，含 ESM、TypeScript 声明、CSS 和资源。`dist/package.json` 只导出生成内容。
+在仓库根目录运行 `npm run pack:ui`。源码工作区供两端即时开发使用；发布内容单独生成到本目录 `dist`，含 ESM、TypeScript 声明、CSS 和资源。构建使用干净的临时目录并检查所有包内引用，成功后替换 dist，避免旧文件混入。`dist/package.json` 只导出生成内容。
 
 发布内容已通过独立 Vite 消费项目验证。包的许可为 UNLICENSED；资源目录内保留图标许可文件。

package/components/AppShell.module.css

@@ -83,7 +83,7 @@
 .bottom {
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  gap: 8px;
   margin-top: auto;
   flex-shrink: 0;
 }
@@ -100,7 +100,7 @@
   align-items: center;
   justify-content: space-between;
   gap: 16px;
-  padding: 0 12px;
+  padding: 0 8px;
   border-bottom: 1px solid var(--line);
   background: var(--surface);
   color: var(--fg);
@@ -235,5 +235,5 @@
 }
 
 .header[data-window-controls="true"] {
-  padding-right: 4px;
+  padding-right: 8px;
 }

package/components/AppearanceSettings.js

@@ -55,7 +55,7 @@ function AppearanceSettings({
     ),
     /* @__PURE__ */ jsxs(SettingsCard, { children: [
       /* @__PURE__ */ jsx(SettingRow, { title: "\u5F3A\u8C03\u8272", children: /* @__PURE__ */ jsx("div", { className: s.swatches, children: [
-        settings.designTheme === "blue" ? "#5269b6" : "#303030",
+        appearanceDefaults(settings.designTheme).accent,
         "#4479d8",
         "#6d61bd",
         settings.designTheme === "blue" ? "#397c67" : "#41886c",

package/components/Button.d.ts

@@ -1,6 +1,13 @@
 import type { ComponentPropsWithRef } from "react";
-export declare function Button({ variant, size, loading, children, className, ...props }: ComponentPropsWithRef<"button"> & {
+type ButtonProps = {
     variant?: "primary" | "secondary" | "ghost" | "danger";
     size?: "normal" | "small";
     loading?: boolean;
-}): import("react").JSX.Element;
+} & ((ComponentPropsWithRef<"button"> & {
+    href?: never;
+}) | (ComponentPropsWithRef<"a"> & {
+    href: string;
+    disabled?: boolean;
+}));
+export declare function Button({ variant, size, loading, children, className, ...props }: ButtonProps): import("react").JSX.Element;
+export {};

package/components/Button.js

@@ -1,4 +1,4 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Spinner } from "./Spinner.js";
 import s from "./Button.module.css";
 function Button({
@@ -9,18 +9,41 @@ function Button({
   className = "",
   ...props
 }) {
-  return /* @__PURE__ */ jsxs(
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { className: s.content, style: { opacity: loading ? 0 : 1 }, children }),
+    loading && /* @__PURE__ */ jsx("span", { className: s.loader, children: /* @__PURE__ */ jsx(Spinner, { decorative: true }) })
+  ] });
+  const classes = `${s.button} ${s[variant]} ${size === "small" ? s.small : ""} ${className}`;
+  if (typeof props.href === "string") {
+    const { disabled, onClick, ...link } = props;
+    const blocked = disabled || loading;
+    return /* @__PURE__ */ jsx(
+      "a",
+      {
+        ...link,
+        className: classes,
+        "aria-disabled": blocked || void 0,
+        "aria-busy": loading || void 0,
+        tabIndex: blocked ? -1 : link.tabIndex,
+        onClick: (event) => {
+          if (blocked) {
+            event.preventDefault();
+            event.stopPropagation();
+          } else onClick?.(event);
+        },
+        children: content
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
     "button",
     {
       type: "button",
       ...props,
       disabled: props.disabled || loading,
       "aria-busy": loading || void 0,
-      className: `${s.button} ${s[variant]} ${size === "small" ? s.small : ""} ${className}`,
-      children: [
-        /* @__PURE__ */ jsx("span", { className: s.content, style: { opacity: loading ? 0 : 1 }, children }),
-        loading && /* @__PURE__ */ jsx("span", { className: s.loader, children: /* @__PURE__ */ jsx(Spinner, { decorative: true }) })
-      ]
+      className: classes,
+      children: content
     }
   );
 }

package/components/Button.module.css

@@ -14,21 +14,30 @@
     transform var(--motion-hover),
     border-color var(--motion-hover);
   font-size: 12px;
+  text-decoration: none;
+  color: var(--fg);
 }
-.button:hover:not(:disabled) {
+.button[aria-disabled="true"] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.button:hover:not(:disabled):not([aria-disabled="true"]) {
   background: var(--hover);
   border-color: color-mix(in srgb, var(--fg) 18%, var(--surface));
 }
-.button:active:not(:disabled) {
+.button:active:not(:disabled):not([aria-disabled="true"]) {
   transform: translateY(1px);
 }
 .primary {
-  background: var(--accent);
-  border-color: var(--accent);
-  color: var(--on-accent);
+  background: var(--accent-fill, var(--accent));
+  border-color: var(--accent-fill, var(--accent));
+  color: var(--on-accent-fill, var(--on-accent));
 }
-.primary:hover:not(:disabled) {
-  background: color-mix(in srgb, var(--accent) 86%, var(--surface));
+.primary:hover:not(:disabled):not([aria-disabled="true"]) {
+  background: var(
+    --accent-fill-hover,
+    color-mix(in srgb, var(--accent) 86%, var(--surface))
+  );
   border-color: transparent;
 }
 .secondary {

package/components/Card.d.ts

@@ -1,7 +1,8 @@
 import type { ReactNode } from "react";
-export declare function Card({ title, action, children, className, }: {
+export declare function Card({ title, action, children, className, onClick, }: {
     title?: string;
     action?: ReactNode;
     children: ReactNode;
     className?: string;
+    onClick?(): void;
 }): import("react").JSX.Element;

package/components/Card.js

@@ -1,18 +1,28 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import s from "./Card.module.css";
 function Card({
   title,
   action,
   children,
-  className = ""
+  className = "",
+  onClick
 }) {
-  return /* @__PURE__ */ jsxs("section", { className: s.card + " " + className, children: [
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
     (title || action) && /* @__PURE__ */ jsxs("header", { className: s.header, children: [
       /* @__PURE__ */ jsx("h2", { children: title }),
       action
     ] }),
     /* @__PURE__ */ jsx("div", { className: s.body, "data-card-body": true, children })
   ] });
+  return onClick ? /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className: `${s.card} ${s.interactive} ${className}`,
+      onClick,
+      children: content
+    }
+  ) : /* @__PURE__ */ jsx("section", { className: s.card + " " + className, children: content });
 }
 export {
   Card

package/components/Card.module.css

@@ -5,6 +5,25 @@
   min-width: 0;
   box-shadow: var(--card-shadow, none);
 }
+.interactive {
+  display: block;
+  width: 100%;
+  padding: 0;
+  color: var(--fg);
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+  transition:
+    box-shadow var(--motion-hover),
+    transform var(--motion-hover);
+}
+.interactive:hover {
+  box-shadow: var(--shadow);
+  transform: translateY(-2px);
+}
+.interactive:active {
+  transform: none;
+}
 .header {
   display: flex;
   align-items: center;

package/components/Checkbox.module.css

@@ -54,9 +54,9 @@
   transform: scale(0.92);
 }
 .checkbox input:checked + .checkMark {
-  background: var(--accent);
-  color: var(--on-accent);
-  border-color: var(--accent);
+  background: var(--accent-fill, var(--accent));
+  color: var(--on-accent-fill, var(--on-accent));
+  border-color: var(--accent-fill, var(--accent));
 }
 .checkbox input:checked + .checkMark path {
   stroke-dashoffset: 0;

package/components/Combobox.d.ts

@@ -1,6 +1,6 @@
 import { type FieldOptions } from "./field";
 import type { SelectOption } from "./types";
-export declare function Combobox({ value, onChange, options, loadOptions, onCreate, label, placeholder, ...props }: FieldOptions & {
+export type ComboboxProps = FieldOptions & {
     value: string;
     onChange(value: string): void;
     options?: SelectOption[];
@@ -8,4 +8,6 @@ export declare function Combobox({ value, onChange, options, loadOptions, onCrea
     onCreate?(label: string): string | void | Promise<string | void>;
     label?: string;
     placeholder?: string;
-}): import("react").JSX.Element;
+    mode?: "panel" | "input";
+};
+export declare function Combobox({ value, onChange, options, loadOptions, onCreate, label, placeholder, mode, ...props }: ComboboxProps): import("react").JSX.Element;

package/components/Combobox.js

@@ -1,12 +1,26 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useId, useRef, useState } from "react";
+import {
+  useCallback,
+  useEffect,
+  useId,
+  useRef,
+  useState
+} from "react";
 import { Plus } from "lucide-react";
-import { fieldTriggerProps, useFieldControl } from "./field.js";
+import {
+  FieldContext,
+  fieldInputProps,
+  fieldTriggerProps,
+  useFieldControl
+} from "./field.js";
 import { SelectTrigger } from "./SelectTrigger.js";
 import { Popover } from "./Popover.js";
 import { SearchField } from "./SearchField.js";
+import { Input } from "./Input.js";
 import { MenuItem } from "./MenuItem.js";
 import { Spinner } from "./Spinner.js";
+import { Button } from "./Button.js";
+import { DisclosureChevron } from "./DisclosureChevron.js";
 import s from "./Combobox.module.css";
 function Combobox({
   value,
@@ -16,14 +30,24 @@ function Combobox({
   onCreate,
   label = "\u641C\u7D22\u9009\u62E9",
   placeholder = "\u8BF7\u9009\u62E9",
+  mode = "panel",
   ...props
 }) {
-  const field = useFieldControl({ ...props, label }), anchor = useRef(null), list = useRef(null), id = useId(), [open, setOpen] = useState(false), [query, setQuery] = useState(""), [remote, setRemote] = useState([]), [loading, setLoading] = useState(false), [error, setError] = useState(""), [active, setActive] = useState(0), [created, setCreated] = useState(), [chosen, setChosen] = useState(), [creating, setCreating] = useState(false), [retry, setRetry] = useState(0);
-  const generation = useRef(0);
+  const field = useFieldControl({ ...props, label }), anchor = useRef(null), list = useRef(null), id = useId();
+  const [open, setOpen] = useState(false), [query, setQuery] = useState(""), [editing, setEditing] = useState(false), [remote, setRemote] = useState([]), [loading, setLoading] = useState(false), [error, setError] = useState(""), [failure, setFailure] = useState("load"), [active, setActive] = useState(-1), [created, setCreated] = useState(), [chosen, setChosen] = useState(), [creating, setCreating] = useState(false), [retry, setRetry] = useState(0);
+  const generation = useRef(0), restoring = useRef(false), loader = useRef(loadOptions);
+  loader.current = loadOptions;
+  const inline = mode === "input", async = !!loadOptions;
   const close = useCallback(() => {
     generation.current++;
     setOpen(false);
+    setEditing(false);
     setCreating(false);
+    setLoading(false);
+    restoring.current = true;
+    queueMicrotask(() => {
+      restoring.current = false;
+    });
   }, []);
   useEffect(
     () => () => {
@@ -31,28 +55,21 @@ function Combobox({
     },
     []
   );
-  const loader = useRef(loadOptions);
-  loader.current = loadOptions;
-  const async = !!loadOptions;
   useEffect(() => {
     if (!open || !async) return;
-    const controller = new AbortController();
+    const controller = new AbortController(), revision = generation.current;
     setLoading(true);
     setError("");
     const timer = setTimeout(() => {
       Promise.resolve().then(() => loader.current(query, controller.signal)).then((items) => {
-        if (!controller.signal.aborted) {
+        if (!controller.signal.aborted && revision === generation.current) {
           setRemote(items);
           setLoading(false);
-          setActive(
-            Math.max(
-              0,
-              items.findIndex((item) => !item.disabled)
-            )
-          );
+          setActive(inline ? -1 : items.findIndex((item) => !item.disabled));
         }
       }).catch(() => {
-        if (!controller.signal.aborted) {
+        if (!controller.signal.aborted && revision === generation.current) {
+          setFailure("load");
           setError("\u9009\u9879\u52A0\u8F7D\u5931\u8D25");
           setLoading(false);
         }
@@ -62,10 +79,10 @@ function Combobox({
       clearTimeout(timer);
       controller.abort();
     };
-  }, [open, query, async, retry]);
+  }, [open, query, async, retry, inline]);
   useEffect(() => {
     if (field.disabled || field.readOnly) close();
-  }, [field.disabled, field.readOnly]);
+  }, [field.disabled, field.readOnly, close]);
   const terms = query.trim().toLowerCase().split(/\s+/).filter(Boolean), filtered = async ? remote : options.filter(
     (item) => terms.every(
       (term) => (item.label + " " + (item.description || "") + " " + item.value).toLowerCase().includes(term)
@@ -73,7 +90,8 @@ function Combobox({
   );
   const selected = [...options, ...remote, created, chosen].find(
     (item) => item?.value === value
-  );
+  ), first = filtered.findIndex((item) => !item.disabled);
+  const activeIndex = active >= 0 && filtered[active] && !filtered[active].disabled ? active : inline ? -1 : first;
   const choose = (item) => {
     if (item.disabled || field.disabled || field.readOnly) return;
     setChosen(item);
@@ -82,19 +100,116 @@ function Combobox({
     anchor.current?.focus();
   };
   const show = () => {
+    if (field.disabled || field.readOnly || creating) return;
+    generation.current++;
+    setLoading(async);
     setQuery("");
-    setActive(0);
+    setEditing(false);
+    setActive(inline ? -1 : 0);
+    setError("");
+    setOpen(true);
+  };
+  const search = (text) => {
+    if (field.disabled || field.readOnly || creating) return;
+    generation.current++;
+    setLoading(async);
+    setQuery(text);
+    setEditing(true);
+    setActive(inline ? -1 : 0);
     setError("");
     setOpen(true);
   };
   useEffect(() => {
     list.current?.querySelector('[data-active="true"]')?.scrollIntoView({ block: "nearest" });
-  }, [active, query]);
+  }, [activeIndex, query, loading]);
   const canCreate = !!onCreate && !!query.trim() && !filtered.some(
     (item) => item.label.toLowerCase() === query.trim().toLowerCase()
   );
+  const create = async () => {
+    if (!onCreate || creating || loading || !canCreate) return;
+    const revision = generation.current, text = query.trim();
+    setCreating(true);
+    setError("");
+    try {
+      const result = await onCreate(text);
+      if (revision !== generation.current) return;
+      const item = { value: result || text, label: text };
+      setCreated(item);
+      choose(item);
+    } catch {
+      if (revision === generation.current) {
+        setFailure("create");
+        setError("\u521B\u5EFA\u5931\u8D25\uFF0C\u8BF7\u91CD\u8BD5\u3002");
+      }
+    } finally {
+      if (revision === generation.current) setCreating(false);
+    }
+  };
+  const navigate = (event) => {
+    if (event.nativeEvent.isComposing || event.keyCode === 229 || field.readOnly || field.disabled)
+      return;
+    if (event.key === "Escape" && open) {
+      event.preventDefault();
+      event.stopPropagation();
+      close();
+      anchor.current?.focus();
+      return;
+    }
+    if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+      event.preventDefault();
+      if (!open) {
+        show();
+        return;
+      }
+      const direction = event.key === "ArrowDown" ? 1 : -1, start = activeIndex < 0 ? direction === 1 ? -1 : 0 : activeIndex;
+      for (let step = 1; step <= filtered.length; step++) {
+        const next = (start + direction * step + filtered.length * 2) % filtered.length;
+        if (!filtered[next].disabled) {
+          setActive(next);
+          break;
+        }
+      }
+    } else if (event.key === "Enter" && open) {
+      event.preventDefault();
+      if (!loading && !creating && !error) {
+        const item = filtered[activeIndex < 0 ? first : activeIndex];
+        if (item) choose(item);
+        else void create();
+      }
+    }
+  };
+  const activeId = open && !loading && !error && activeIndex >= 0 ? id + "-" + activeIndex : void 0;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
+    inline ? /* @__PURE__ */ jsx(FieldContext, { value: { ...field, name: void 0 }, children: /* @__PURE__ */ jsx(
+      Input,
+      {
+        ...fieldInputProps(field),
+        name: void 0,
+        ref: anchor,
+        role: "combobox",
+        "aria-label": field.label,
+        "aria-expanded": open,
+        "aria-busy": loading || creating,
+        "aria-controls": id + "-list",
+        "aria-autocomplete": "list",
+        "aria-activedescendant": activeId,
+        autoComplete: "off",
+        disabled: field.disabled || creating,
+        className: s.inputTrigger,
+        value: open && editing ? query : selected?.label || value,
+        placeholder,
+        leading: selected?.icon,
+        trailing: loading || creating ? /* @__PURE__ */ jsx(Spinner, { size: 16, decorative: true }) : /* @__PURE__ */ jsx(DisclosureChevron, { expanded: open }),
+        onChange: (event) => search(event.target.value),
+        onFocus: () => {
+          if (!restoring.current && !open) show();
+        },
+        onClick: () => {
+          if (!open) show();
+        },
+        onKeyDown: navigate
+      }
+    ) }) : /* @__PURE__ */ jsx(
       SelectTrigger,
       {
         ...fieldTriggerProps(field),
@@ -107,12 +222,7 @@ function Combobox({
         onClick: () => {
           if (!field.readOnly) open ? close() : show();
         },
-        onKeyDown: (event) => {
-          if (!field.readOnly && (event.key === "ArrowDown" || event.key === "ArrowUp")) {
-            event.preventDefault();
-            show();
-          }
-        },
+        onKeyDown: navigate,
         children: /* @__PURE__ */ jsx("span", { children: selected?.label || value || placeholder })
       }
     ),
@@ -134,36 +244,21 @@ function Combobox({
         anchor,
         label: field.label + "\u9009\u9879",
         width: 300,
+        autoFocus: !inline,
+        matchAnchorWidth: inline,
         children: /* @__PURE__ */ jsxs("div", { className: s.panel, children: [
-          /* @__PURE__ */ jsx(
+          !inline && /* @__PURE__ */ jsx(
             SearchField,
             {
               label: "\u641C\u7D22" + field.label,
               placeholder: "\u641C\u7D22\u9009\u9879\u2026",
               value: query,
-              onChange: (value2) => {
-                setQuery(value2);
-                setActive(0);
-              },
+              onChange: search,
               loading,
+              disabled: creating,
               "aria-controls": id + "-list",
-              "aria-activedescendant": filtered[active] ? id + "-" + active : void 0,
-              onKeyDown: (event) => {
-                if (event.key === "ArrowDown" || event.key === "ArrowUp") {
-                  event.preventDefault();
-                  const direction = event.key === "ArrowDown" ? 1 : -1;
-                  for (let step = 1; step <= filtered.length; step++) {
-                    const next = (active + direction * step + filtered.length * 2) % filtered.length;
-                    if (!filtered[next].disabled) {
-                      setActive(next);
-                      break;
-                    }
-                  }
-                } else if (event.key === "Enter") {
-                  event.preventDefault();
-                  if (!loading && filtered[active]) choose(filtered[active]);
-                }
-              }
+              "aria-activedescendant": activeId,
+              onKeyDown: navigate
             }
           ),
           /* @__PURE__ */ jsx(
@@ -175,13 +270,22 @@ function Combobox({
               "aria-label": field.label,
               className: s.list,
               "aria-busy": loading,
-              children: error ? /* @__PURE__ */ jsxs("div", { className: s.empty, children: [
+              children: error ? /* @__PURE__ */ jsxs("div", { className: s.empty, role: "alert", children: [
                 /* @__PURE__ */ jsx("span", { children: error }),
                 /* @__PURE__ */ jsx(
-                  "button",
+                  Button,
                   {
-                    type: "button",
-                    onClick: () => setRetry((value2) => value2 + 1),
+                    size: "small",
+                    variant: "ghost",
+                    onClick: () => {
+                      setError("");
+                      if (failure === "create") void create();
+                      else {
+                        generation.current++;
+                        setLoading(true);
+                        setRetry((value2) => value2 + 1);
+                      }
+                    },
                     children: "\u91CD\u8BD5"
                   }
                 )
@@ -196,9 +300,9 @@ function Combobox({
                     icon: item.icon,
                     description: item.description,
                     shortcut: item.shortcut,
-                    reserveIcon: filtered.some((item2) => !!item2.icon),
+                    reserveIcon: filtered.some((option) => !!option.icon),
                     selected: value === item.value,
-                    active: active === index,
+                    active: activeIndex === index,
                     disabled: item.disabled,
                     "aria-selected": value === item.value,
                     selection: "check",
@@ -220,26 +324,8 @@ function Combobox({
               label: "\u521B\u5EFA\u201C" + query.trim() + "\u201D",
               icon: /* @__PURE__ */ jsx(Plus, {}),
               disabled: creating,
-              onClick: async () => {
-                const revision = generation.current;
-                setCreating(true);
-                setError("");
-                try {
-                  const result = await onCreate(query.trim());
-                  if (revision !== generation.current) return;
-                  const item = {
-                    value: result || query.trim(),
-                    label: query.trim()
-                  };
-                  setCreated(item);
-                  choose(item);
-                } catch {
-                  if (revision === generation.current)
-                    setError("\u521B\u5EFA\u5931\u8D25\uFF0C\u8BF7\u91CD\u8BD5\u3002");
-                } finally {
-                  if (revision === generation.current) setCreating(false);
-                }
-              }
+              onMouseDown: (event) => event.preventDefault(),
+              onClick: () => void create()
             }
           )
         ] })