@h-ai/ui 0.1.0-alpha.27 → 0.1.0-alpha.28

package/auto-import.d.ts

@@ -57,6 +57,9 @@ declare global {
   const Form: typeof import('@h-ai/ui')['Form']
   const FormField: typeof import('@h-ai/ui')['FormField']
   const InfiniteScroll: typeof import('@h-ai/ui')['InfiniteScroll']
+  const MessageContainer: typeof import('@h-ai/ui')['MessageContainer']
+  const MessageBoxContainer: typeof import('@h-ai/ui')['MessageBoxContainer']
+  const MessageBoxDialog: typeof import('@h-ai/ui')['MessageBoxDialog']
   const Modal: typeof import('@h-ai/ui')['Modal']
   const PageHeader: typeof import('@h-ai/ui')['PageHeader']
   const Pagination: typeof import('@h-ai/ui')['Pagination']

package/auto-import.js

@@ -48,6 +48,9 @@ const UI_COMPONENTS = new Set([
   'Form',
   'FormField',
   'InfiniteScroll',
+  'MessageContainer',
+  'MessageBoxContainer',
+  'MessageBoxDialog',
   'Modal',
   'PageHeader',
   'Pagination',

package/dist/components/compounds/MessageBoxContainer.svelte

@@ -0,0 +1,18 @@
+<!--
+  =============================================================================
+  @h-ai/ui - MessageBoxContainer 组件
+  =============================================================================
+  命令式弹框容器，渲染 messageBox store 中的所有弹框。
+  每个弹框由 MessageBoxDialog 独立管理 showModal()/close()。
+
+  使用 DaisyUI 样式 + tabler icon，不依赖 ElementUI。
+  =============================================================================
+-->
+<script lang='ts'>
+  import { messageBox } from '../../messagebox.svelte.js'
+  import MessageBoxDialog from './MessageBoxDialog.svelte'
+</script>
+
+{#each messageBox.items as item (item.id)}
+  <MessageBoxDialog {item} />
+{/each}

package/dist/components/compounds/MessageBoxContainer.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const MessageBoxContainer: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type MessageBoxContainer = InstanceType<typeof MessageBoxContainer>;
+export default MessageBoxContainer;

package/dist/components/compounds/MessageBoxDialog.svelte

@@ -0,0 +1,193 @@
+<!--
+  单个 MessageBox 弹框，由 MessageBoxContainer 渲染。
+  内部使用原生 <dialog>.showModal() 进入浏览器 top layer。
+  行为对标 ElementUI MessageBox：
+    - 始终显示标题（默认"提示"）和右上角关闭按钮；
+    - 遮罩层点击可通过 closeOnClickModal 配置。
+-->
+<script lang='ts'>
+  import type { MessageBoxItem } from '../../messagebox.svelte.js'
+  import { messageBox } from '../../messagebox.svelte.js'
+  import { uiM } from '../../messages.js'
+  import { cn } from '../../utils.js'
+  import Button from '../primitives/Button.svelte'
+
+  const { item }: { item: MessageBoxItem } = $props()
+
+  /** 图标类型到 tabler icon 的映射 */
+  const iconMap: Record<string, string> = {
+    info: 'icon-[tabler--info-circle]',
+    success: 'icon-[tabler--circle-check]',
+    warning: 'icon-[tabler--alert-triangle]',
+    error: 'icon-[tabler--circle-x]',
+  }
+
+  /** 图标背景色映射 */
+  const iconBgMap: Record<string, string> = {
+    info: 'bg-info/15 text-info',
+    success: 'bg-success/15 text-success',
+    warning: 'bg-warning/15 text-warning',
+    error: 'bg-error/15 text-error',
+  }
+
+  let dialogEl: HTMLDialogElement | undefined = $state()
+
+  $effect(() => {
+    if (dialogEl && !dialogEl.open) {
+      dialogEl.showModal()
+    }
+  })
+
+  function handleBackdropClick(e: MouseEvent) {
+    if (e.target === e.currentTarget && item.closeOnClickModal) {
+      messageBox.handleClose(item)
+    }
+  }
+</script>
+
+<!-- 使用 hai-messagebox 而非 DaisyUI .modal，避免 ::backdrop 被隐藏 -->
+<dialog
+  bind:this={dialogEl}
+  class='hai-messagebox'
+  oncancel={e => e.preventDefault()}
+  onclick={handleBackdropClick}
+>
+  <div class='hai-messagebox__panel'>
+    <!-- 标题栏：始终显示，右侧关闭按钮 -->
+    <div class='hai-messagebox__header'>
+      <h3 class='font-bold text-lg'>{item.title}</h3>
+      <button
+        type='button'
+        class='hai-messagebox__close'
+        aria-label={uiM('common_close')}
+        onclick={() => messageBox.handleClose(item)}
+      >
+        <span class='icon-[tabler--x] size-5'></span>
+      </button>
+    </div>
+
+    <!-- 图标 + 消息内容同行 -->
+    <div class='hai-messagebox__body flex items-center gap-3'>
+      {#if item.iconType}
+        <span class={cn(
+          'inline-flex items-center justify-center rounded-full w-10 h-10 shrink-0',
+          iconBgMap[item.iconType] ?? iconBgMap.info,
+        )}>
+          <span class={cn(iconMap[item.iconType] ?? iconMap.info, 'size-5')}></span>
+        </span>
+      {/if}
+      <p class='flex-1 min-w-0 text-base-content/80 text-sm leading-relaxed'>{item.message}</p>
+    </div>
+
+    <!-- 操作按钮 -->
+    <div class='hai-messagebox__footer'>
+      {#if item.showCancel}
+        <Button
+          variant='ghost'
+          disabled={item.loading}
+          onclick={() => messageBox.handleCancel(item)}
+        >
+          {item.cancelText || uiM('confirm_cancel')}
+        </Button>
+      {/if}
+      <Button
+        variant={item.confirmVariant || 'primary'}
+        loading={item.loading}
+        disabled={item.loading}
+        onclick={() => messageBox.handleConfirm(item)}
+      >
+        {item.confirmText || uiM('confirm_ok')}
+      </Button>
+    </div>
+  </div>
+</dialog>
+
+<style>
+  dialog.hai-messagebox {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    outline: none;
+    overflow: visible;
+    position: fixed;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    display: grid;
+    place-items: center;
+    z-index: 999;
+  }
+
+  dialog.hai-messagebox::backdrop {
+    background: color-mix(in srgb, var(--color-base-content) 25%, transparent);
+    backdrop-filter: blur(2px);
+  }
+
+  .hai-messagebox__panel {
+    position: relative;
+    width: min(100%, 28rem);
+    max-width: calc(100vw - 2rem);
+    max-height: calc(100vh - 4rem);
+    background: var(--color-base-100);
+    border-radius: 1rem;
+    padding: 1.5rem;
+    box-shadow: 0 25px 50px -12px oklch(0% 0 0 / 0.25);
+    animation: hai-msgbox-enter 0.22s cubic-bezier(0.16, 1, 0.3, 1);
+    overflow-y: auto;
+  }
+
+  .hai-messagebox__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 0.75rem;
+  }
+
+  .hai-messagebox__close {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.5rem;
+    height: 1.5rem;
+    color: color-mix(in srgb, var(--color-base-content) 45%, transparent);
+    cursor: pointer;
+    border: none;
+    background: none;
+    padding: 0;
+    outline: none;
+    transition: color 160ms ease;
+  }
+
+  .hai-messagebox__close:hover {
+    color: var(--color-base-content);
+  }
+
+  .hai-messagebox__close:focus-visible {
+    outline: 2px solid color-mix(in srgb, var(--color-primary) 40%, transparent);
+    outline-offset: 2px;
+    border-radius: 2px;
+  }
+
+  .hai-messagebox__body {
+    margin-bottom: 1rem;
+  }
+
+  .hai-messagebox__footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.5rem;
+    margin-top: 0.5rem;
+  }
+
+  @keyframes hai-msgbox-enter {
+    from {
+      opacity: 0;
+      transform: translateY(10px) scale(0.985);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0) scale(1);
+    }
+  }
+</style>

package/dist/components/compounds/MessageBoxDialog.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { MessageBoxItem } from '../../messagebox.svelte.js';
+type $$ComponentProps = {
+    item: MessageBoxItem;
+};
+declare const MessageBoxDialog: import("svelte").Component<$$ComponentProps, {}, "">;
+type MessageBoxDialog = ReturnType<typeof MessageBoxDialog>;
+export default MessageBoxDialog;

package/dist/components/compounds/MessageContainer.svelte

@@ -0,0 +1,200 @@
+<!--
+  =============================================================================
+  @h-ai/ui - MessageContainer 组件
+  =============================================================================
+  轻量消息提示容器，渲染 message store 中的消息条目。
+  视觉风格：顶部居中、带类型图标、自动滑入滑出。
+
+  叠加策略与 ToastContainer 一致：
+    - 有打开的 modal dialog 时，寄宿到 dialog 内部（top layer）；
+    - 否则寄宿到 <body> 以 popover 进入 top layer。
+  =============================================================================
+-->
+<script lang='ts'>
+  import { onMount } from 'svelte'
+  import { message } from '../../message.svelte.js'
+  import { cn } from '../../utils.js'
+  import IconButton from '../primitives/IconButton.svelte'
+
+  /** 图标类型到 tabler icon 的映射 */
+  const iconMap: Record<string, string> = {
+    info: 'icon-[tabler--info-circle]',
+    success: 'icon-[tabler--circle-check]',
+    warning: 'icon-[tabler--alert-triangle]',
+    error: 'icon-[tabler--circle-x]',
+  }
+
+  /** 图标颜色映射 */
+  const iconColorMap: Record<string, string> = {
+    info: 'text-info',
+    success: 'text-success',
+    warning: 'text-warning',
+    error: 'text-error',
+  }
+
+  /** 背景/边框映射 */
+  const bgMap: Record<string, string> = {
+    info: 'border-info/20 bg-info/5',
+    success: 'border-success/20 bg-success/5',
+    warning: 'border-warning/20 bg-warning/5',
+    error: 'border-error/20 bg-error/5',
+  }
+
+  let layerElement: HTMLDivElement | undefined = $state()
+
+  const hasItems = $derived(message.items.length > 0)
+
+  /** 找到最顶层处于打开状态的原生 modal dialog。 */
+  function findTopModalDialog(): HTMLDialogElement | null {
+    if (typeof document === 'undefined')
+      return null
+    const dialogs = document.querySelectorAll<HTMLDialogElement>('dialog')
+    let top: HTMLDialogElement | null = null
+    for (const dialog of dialogs) {
+      if (dialog.open && typeof dialog.matches === 'function' && dialog.matches(':modal')) {
+        top = dialog
+      }
+    }
+    return top
+  }
+
+  function safeShowPopover(el: HTMLElement) {
+    try {
+      if (typeof el.showPopover === 'function' && el.isConnected && !el.matches(':popover-open')) {
+        el.showPopover()
+      }
+    }
+    catch { /* 忽略异常 */ }
+  }
+
+  function safeHidePopover(el: HTMLElement) {
+    try {
+      if (typeof el.hidePopover === 'function' && el.matches(':popover-open')) {
+        el.hidePopover()
+      }
+    }
+    catch { /* 忽略异常 */ }
+  }
+
+  function relocate() {
+    const el = layerElement
+    if (!el)
+      return
+
+    const modal = hasItems ? findTopModalDialog() : null
+
+    if (modal) {
+      safeHidePopover(el)
+      if (el.hasAttribute('popover'))
+        el.removeAttribute('popover')
+      if (el.parentElement !== modal)
+        modal.appendChild(el)
+      return
+    }
+
+    if (el.parentElement !== document.body)
+      document.body.appendChild(el)
+    if (!el.hasAttribute('popover'))
+      el.setAttribute('popover', 'manual')
+    if (hasItems) {
+      safeShowPopover(el)
+    }
+    else {
+      safeHidePopover(el)
+    }
+  }
+
+  onMount(() => {
+    relocate()
+    const observer = new MutationObserver(() => relocate())
+    observer.observe(document.body, { subtree: true, attributes: true, attributeFilter: ['open'] })
+    return () => {
+      observer.disconnect()
+      const el = layerElement
+      if (el) {
+        safeHidePopover(el)
+        el.remove()
+      }
+    }
+  })
+
+  $effect(() => {
+    void hasItems
+    relocate()
+  })
+</script>
+
+<div bind:this={layerElement} popover='manual' class='hai-message-layer'>
+  <div class='hai-message-stack'>
+    {#each message.items as item (item.id)}
+      <div
+        class={cn(
+          'hai-message-item alert shadow-lg border',
+          bgMap[item.type] ?? bgMap.info,
+        )}
+        role='alert'
+      >
+        <span class={cn(iconMap[item.type] ?? iconMap.info, 'size-5 shrink-0', iconColorMap[item.type] ?? iconColorMap.info)}></span>
+        <span class='text-sm'>{item.message}</span>
+        {#if item.closable}
+          <IconButton
+            variant='ghost'
+            size='sm'
+            onclick={() => message.remove(item.id)}
+            ariaLabel='close'
+          >
+            ✕
+          </IconButton>
+        {/if}
+      </div>
+    {/each}
+  </div>
+</div>
+
+<style>
+  .hai-message-layer {
+    position: fixed;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    max-width: none;
+    max-height: none;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    overflow: visible;
+    pointer-events: none;
+    z-index: 9999;
+  }
+
+  .hai-message-stack {
+    position: absolute;
+    top: 1rem;
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.5rem;
+    pointer-events: auto;
+  }
+
+  .hai-message-item {
+    animation: hai-message-enter 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+    min-width: 16rem;
+    max-width: 32rem;
+    white-space: nowrap;
+  }
+
+  @keyframes hai-message-enter {
+    from {
+      opacity: 0;
+      transform: translateY(-1rem);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+</style>

package/dist/components/compounds/MessageContainer.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const MessageContainer: import("svelte").Component<Record<string, never>, {}, "">;
+type MessageContainer = ReturnType<typeof MessageContainer>;
+export default MessageContainer;

package/dist/components/compounds/Modal.svelte

@@ -143,7 +143,6 @@
 >
   <div
     class='hai-modal__viewport'
-    role='button'
     tabindex='-1'
     aria-label={uiM('common_close')}
     onclick={handleDialogClick}

package/dist/components/compounds/index.d.ts

@@ -25,6 +25,9 @@ export { default as Empty } from './Empty.svelte';
 export { default as Form } from './Form.svelte';
 export { default as FormField } from './FormField.svelte';
 export { default as InfiniteScroll } from './InfiniteScroll.svelte';
+export { default as MessageBoxContainer } from './MessageBoxContainer.svelte';
+export { default as MessageBoxDialog } from './MessageBoxDialog.svelte';
+export { default as MessageContainer } from './MessageContainer.svelte';
 export { default as Modal } from './Modal.svelte';
 export { default as PageHeader } from './PageHeader.svelte';
 export { default as Pagination } from './Pagination.svelte';

package/dist/components/compounds/index.js

@@ -33,6 +33,11 @@ export { default as Form } from './Form.svelte';
 export { default as FormField } from './FormField.svelte';
 // 无限滚动 / 上拉加载
 export { default as InfiniteScroll } from './InfiniteScroll.svelte';
+// MessageBox 命令式弹框（类似 ElementUI MessageBox）
+export { default as MessageBoxContainer } from './MessageBoxContainer.svelte';
+export { default as MessageBoxDialog } from './MessageBoxDialog.svelte';
+// Message 轻量消息提示（类似 ElementUI Message）
+export { default as MessageContainer } from './MessageContainer.svelte';
 export { default as Modal } from './Modal.svelte';
 // 页面头部
 export { default as PageHeader } from './PageHeader.svelte';

package/dist/components/scenes/app/ThemeColorPicker.svelte

@@ -97,7 +97,7 @@
   }
 </script>
 
-<div class={cn('', className)}>
+<div class={cn('theme-color-picker', className)}>
   <div class='flex flex-wrap items-center gap-2'>
     {#each normalizedPresets as preset (preset.value)}
       <button
@@ -165,7 +165,7 @@
 </div>
 
 <style>
-  button {
+  .theme-color-picker button {
     border-color: var(--soft-border, color-mix(in oklab, var(--color-base-content) 12%, transparent));
     background: var(--soft-surface, var(--color-base-100));
     color: var(--soft-text-body, var(--color-base-content));
@@ -173,7 +173,7 @@
     font-weight: 500;
   }
 
-  button:hover:not(:disabled) {
+  .theme-color-picker button:hover:not(:disabled) {
     border-color: color-mix(in oklab, var(--color-primary) 28%, var(--soft-border, transparent) 72%);
     background: color-mix(
       in oklab,
@@ -182,7 +182,7 @@
     );
   }
 
-  button[aria-pressed='true'] {
+  .theme-color-picker button[aria-pressed='true'] {
     border-color: color-mix(in oklab, var(--color-primary) 42%, var(--soft-border, transparent) 58%);
     background: color-mix(
       in oklab,
@@ -192,14 +192,14 @@
     color: var(--color-primary);
   }
 
-  button:focus,
-  button:focus-visible {
+  .theme-color-picker button:focus,
+  .theme-color-picker button:focus-visible {
     outline: none;
     border-color: color-mix(in oklab, var(--color-primary) 48%, var(--soft-border, transparent) 52%);
     box-shadow: 0 0 0 4px color-mix(in oklab, var(--color-primary) 12%, transparent 88%);
   }
 
-  button > span:first-child {
+  .theme-color-picker button > span:first-child {
     border-color: color-mix(in oklab, var(--color-base-content) 10%, transparent 90%);
     box-shadow: none;
   }

package/dist/index.d.ts

@@ -6,6 +6,8 @@
  */
 export * from './components/index.js';
 export * from './i18n.svelte.js';
+export * from './message.svelte.js';
+export * from './messagebox.svelte.js';
 export * from './theme-config.js';
 export * from './toast.svelte.js';
 export * from './types.js';

package/dist/index.js

@@ -8,6 +8,10 @@
 export * from './components/index.js';
 // ─── i18n 国际化（Paraglide 辅助工具） ───
 export * from './i18n.svelte.js';
+// ─── Message 轻量消息提示（类似 ElementUI Message） ───
+export * from './message.svelte.js';
+// ─── MessageBox 命令式弹框（类似 ElementUI MessageBox） ───
+export * from './messagebox.svelte.js';
 // ─── 主题配置 ───
 export * from './theme-config.js';
 // ─── Toast 状态管理 ───

package/dist/message.svelte.d.ts

@@ -0,0 +1,49 @@
+/**
+ * @h-ai/ui — Message 状态管理
+ *
+ * 命令式轻量消息提示 API，类似 ElementUI Message。
+ * 与 Toast 类似但视觉风格不同：顶部居中滑入、带类型图标、可自动关闭。
+ * @module message.svelte
+ */
+import type { MessageOptions } from './types.js';
+/**
+ * 内部消息条目
+ */
+export interface MessageItem {
+    id: string;
+    message: string;
+    type: 'info' | 'success' | 'warning' | 'error';
+    duration: number;
+    closable: boolean;
+}
+/**
+ * Message 状态
+ */
+declare class MessageState {
+    items: MessageItem[];
+    private timers;
+    /**
+     * 添加消息
+     */
+    add(options: MessageOptions | string): string;
+    /**
+     * 移除消息
+     */
+    remove(id: string): void;
+    /**
+     * 清空所有消息
+     */
+    clear(): void;
+    /**
+     * 快捷方法
+     */
+    info(message: string, duration?: number): string;
+    success(message: string, duration?: number): string;
+    warning(message: string, duration?: number): string;
+    error(message: string, duration?: number): string;
+}
+/**
+ * Message 单例
+ */
+export declare const message: MessageState;
+export {};

package/dist/message.svelte.js

@@ -0,0 +1,77 @@
+/**
+ * @h-ai/ui — Message 状态管理
+ *
+ * 命令式轻量消息提示 API，类似 ElementUI Message。
+ * 与 Toast 类似但视觉风格不同：顶部居中滑入、带类型图标、可自动关闭。
+ * @module message.svelte
+ */
+/**
+ * Message 状态
+ */
+class MessageState {
+    items = $state([]);
+    timers = new Map();
+    /**
+     * 添加消息
+     */
+    add(options) {
+        const opts = typeof options === 'string' ? { message: options } : options;
+        const id = Math.random().toString(36).slice(2, 9);
+        const item = {
+            id,
+            message: opts.message,
+            type: opts.type ?? 'info',
+            duration: opts.duration ?? 3000,
+            closable: opts.closable ?? false,
+        };
+        this.items = [...this.items, item];
+        if (item.duration > 0) {
+            const timer = setTimeout(() => {
+                this.timers.delete(id);
+                this.remove(id);
+            }, item.duration);
+            this.timers.set(id, timer);
+        }
+        return id;
+    }
+    /**
+     * 移除消息
+     */
+    remove(id) {
+        const timer = this.timers.get(id);
+        if (timer) {
+            clearTimeout(timer);
+            this.timers.delete(id);
+        }
+        this.items = this.items.filter(i => i.id !== id);
+    }
+    /**
+     * 清空所有消息
+     */
+    clear() {
+        for (const timer of this.timers.values()) {
+            clearTimeout(timer);
+        }
+        this.timers.clear();
+        this.items = [];
+    }
+    /**
+     * 快捷方法
+     */
+    info(message, duration) {
+        return this.add({ message, type: 'info', duration });
+    }
+    success(message, duration) {
+        return this.add({ message, type: 'success', duration });
+    }
+    warning(message, duration) {
+        return this.add({ message, type: 'warning', duration });
+    }
+    error(message, duration) {
+        return this.add({ message, type: 'error', duration });
+    }
+}
+/**
+ * Message 单例
+ */
+export const message = new MessageState();

package/dist/messagebox.svelte.d.ts

@@ -0,0 +1,82 @@
+/**
+ * @h-ai/ui — MessageBox 状态管理
+ *
+ * 命令式弹框 API，类似 ElementUI MessageBox。
+ * 调用 `messageBox.confirm(...)` 或 `messageBox.alert(...)` 返回 Promise<boolean>，
+ * 组件内部通过渲染 MessageBoxContainer 消费状态。
+ * @module messagebox.svelte
+ */
+import type { MessageBoxIconType, MessageBoxOptions } from './types.js';
+/**
+ * 内部弹框条目
+ */
+export interface MessageBoxItem {
+    id: string;
+    title: string;
+    message: string;
+    type: 'confirm' | 'alert';
+    iconType: MessageBoxIconType;
+    confirmText: string;
+    cancelText: string;
+    confirmVariant: 'default' | 'primary' | 'warning' | 'error';
+    showCancel: boolean;
+    closeOnClickModal: boolean;
+    showClose: boolean;
+    loading: boolean;
+    /** 外部 resolve 回调 */
+    resolve: (value: boolean) => void;
+    /** 可选的 beforeClose 钩子 */
+    beforeClose?: MessageBoxOptions['beforeClose'];
+}
+/**
+ * MessageBox 状态
+ */
+declare class MessageBoxState {
+    items: MessageBoxItem[];
+    private createItem;
+    /**
+     * 确认弹框（双按钮，返回 Promise<boolean>）
+     *
+     * @example
+     * ```ts
+     * const ok = await messageBox.confirm({
+     *   title: '提示',
+     *   message: '确定要删除吗？',
+     *   confirmText: '确定',
+     *   cancelText: '取消',
+     * })
+     * if (ok) { ... }
+     * ```
+     */
+    confirm(options: MessageBoxOptions | string): Promise<boolean>;
+    /**
+     * 提示弹框（单按钮，返回 Promise<boolean>）
+     *
+     * @example
+     * ```ts
+     * await messageBox.alert({
+     *   title: '提示',
+     *   message: '操作成功',
+     * })
+     * ```
+     */
+    alert(options: MessageBoxOptions | string): Promise<boolean>;
+    /**
+     * 内部方法：处理确认
+     */
+    handleConfirm(item: MessageBoxItem): Promise<void>;
+    /**
+     * 内部方法：处理取消
+     */
+    handleCancel(item: MessageBoxItem): Promise<void>;
+    /**
+     * 内部方法：处理关闭（点击关闭按钮或遮罩）
+     */
+    handleClose(item: MessageBoxItem): Promise<void>;
+    private remove;
+}
+/**
+ * MessageBox 单例
+ */
+export declare const messageBox: MessageBoxState;
+export {};

package/dist/messagebox.svelte.js

@@ -0,0 +1,129 @@
+/**
+ * @h-ai/ui — MessageBox 状态管理
+ *
+ * 命令式弹框 API，类似 ElementUI MessageBox。
+ * 调用 `messageBox.confirm(...)` 或 `messageBox.alert(...)` 返回 Promise<boolean>，
+ * 组件内部通过渲染 MessageBoxContainer 消费状态。
+ * @module messagebox.svelte
+ */
+import { uiM } from './messages.js';
+/**
+ * MessageBox 状态
+ */
+class MessageBoxState {
+    items = $state([]);
+    createItem(options) {
+        return new Promise((resolve) => {
+            const id = Math.random().toString(36).slice(2, 9);
+            const isAlert = options.type === 'alert';
+            const item = {
+                id,
+                title: options.title ?? uiM('messagebox_title'),
+                message: options.message,
+                type: options.type ?? 'confirm',
+                iconType: options.iconType ?? (isAlert ? 'info' : 'warning'),
+                confirmText: options.confirmText ?? '',
+                cancelText: options.cancelText ?? '',
+                confirmVariant: options.confirmVariant ?? 'primary',
+                showCancel: options.showCancel ?? !isAlert,
+                closeOnClickModal: options.closeOnClickModal ?? true,
+                showClose: options.showClose ?? true,
+                loading: false,
+                resolve,
+                beforeClose: options.beforeClose,
+            };
+            this.items = [...this.items, item];
+        });
+    }
+    /**
+     * 确认弹框（双按钮，返回 Promise<boolean>）
+     *
+     * @example
+     * ```ts
+     * const ok = await messageBox.confirm({
+     *   title: '提示',
+     *   message: '确定要删除吗？',
+     *   confirmText: '确定',
+     *   cancelText: '取消',
+     * })
+     * if (ok) { ... }
+     * ```
+     */
+    confirm(options) {
+        const opts = typeof options === 'string' ? { message: options } : options;
+        return this.createItem({ type: 'confirm', ...opts });
+    }
+    /**
+     * 提示弹框（单按钮，返回 Promise<boolean>）
+     *
+     * @example
+     * ```ts
+     * await messageBox.alert({
+     *   title: '提示',
+     *   message: '操作成功',
+     * })
+     * ```
+     */
+    alert(options) {
+        const opts = typeof options === 'string' ? { message: options } : options;
+        return this.createItem({ type: 'alert', showCancel: false, ...opts });
+    }
+    /**
+     * 内部方法：处理确认
+     */
+    async handleConfirm(item) {
+        if (item.beforeClose) {
+            const canClose = await item.beforeClose('confirm', {
+                setLoading: (loading) => {
+                    item.loading = loading;
+                },
+            });
+            if (canClose === false) {
+                return;
+            }
+        }
+        this.remove(item.id);
+        item.resolve(true);
+    }
+    /**
+     * 内部方法：处理取消
+     */
+    async handleCancel(item) {
+        if (item.beforeClose) {
+            const canClose = await item.beforeClose('cancel', {
+                setLoading: (loading) => {
+                    item.loading = loading;
+                },
+            });
+            if (canClose === false) {
+                return;
+            }
+        }
+        this.remove(item.id);
+        item.resolve(false);
+    }
+    /**
+     * 内部方法：处理关闭（点击关闭按钮或遮罩）
+     */
+    async handleClose(item) {
+        if (item.beforeClose) {
+            const canClose = await item.beforeClose('close', {
+                setLoading: (loading) => {
+                    item.loading = loading;
+                },
+            });
+            if (canClose === false) {
+                return;
+            }
+        }
+        this.remove(item.id);
+        item.resolve(false);
+    }
+    remove(id) {
+        this.items = this.items.filter(i => i.id !== id);
+    }
+}
+/**
+ * MessageBox 单例
+ */
+export const messageBox = new MessageBoxState();

package/dist/messages/en-US.json

@@ -29,6 +29,7 @@
   "confirm_message": "Are you sure you want to proceed?",
   "confirm_ok": "Confirm",
   "confirm_cancel": "Cancel",
+  "messagebox_title": "Tip",
   "empty_title": "No data",
   "tag_input_placeholder": "Press Enter to add",
   "common_close": "Close",

package/dist/messages/zh-CN.json

@@ -29,6 +29,7 @@
   "confirm_message": "确定要继续吗？",
   "confirm_ok": "确认",
   "confirm_cancel": "取消",
+  "messagebox_title": "提示",
   "empty_title": "暂无数据",
   "tag_input_placeholder": "按 Enter 添加",
   "common_close": "关闭",

package/dist/types.d.ts

@@ -970,3 +970,61 @@ export interface PopoverProps {
     /** 内容插槽 */
     children?: Snippet;
 }
+/**
+ * MessageBox 类型
+ * - confirm: 双按钮（确认 / 取消）
+ * - alert: 单按钮（仅确认）
+ * - prompt: 带输入框的确认（预留）
+ */
+export type MessageBoxAction = 'confirm' | 'cancel' | 'close';
+/**
+ * MessageBox 图标类型
+ */
+export type MessageBoxIconType = 'info' | 'success' | 'warning' | 'error';
+/**
+ * MessageBox 配置项
+ */
+export interface MessageBoxOptions {
+    /** 标题 */
+    title?: string;
+    /** 消息内容（纯文本或 HTML 字符串） */
+    message: string;
+    /** 类型：confirm 双按钮 / alert 单按钮 */
+    type?: 'confirm' | 'alert';
+    /** 图标类型 */
+    iconType?: MessageBoxIconType;
+    /** 确认按钮文本 */
+    confirmText?: string;
+    /** 取消按钮文本 */
+    cancelText?: string;
+    /** 确认按钮变体 */
+    confirmVariant?: 'default' | 'primary' | 'warning' | 'error';
+    /** 是否显示取消按钮（alert 模式下默认 false） */
+    showCancel?: boolean;
+    /** 点击遮罩是否关闭（默认 false，需要显式操作） */
+    closeOnClickModal?: boolean;
+    /** 是否显示右上角关闭按钮（默认 false） */
+    showClose?: boolean;
+    /** 确认前回调（返回 false 可阻止关闭） */
+    beforeClose?: (action: MessageBoxAction, instance: MessageBoxInstance) => boolean | Promise<boolean>;
+}
+/**
+ * MessageBox 实例（供 beforeClose 回调使用）
+ */
+export interface MessageBoxInstance {
+    /** 设置加载态 */
+    setLoading: (loading: boolean) => void;
+}
+/**
+ * Message 消息提示配置项
+ */
+export interface MessageOptions {
+    /** 消息文本 */
+    message: string;
+    /** 类型 */
+    type?: 'info' | 'success' | 'warning' | 'error';
+    /** 显示时长（毫秒），0 表示不自动关闭 */
+    duration?: number;
+    /** 是否可手动关闭 */
+    closable?: boolean;
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@h-ai/ui",
   "type": "module",
-  "version": "0.1.0-alpha.27",
+  "version": "0.1.0-alpha.28",
   "description": "Hai Framework UI component library for Svelte 5 Runes.",
   "license": "Apache-2.0",
   "svelte": "./dist/index.js",
@@ -51,7 +51,7 @@
     "mermaid": "^11.12.0",
     "shiki": "^4.0.2",
     "tailwind-merge": "^3.5.0",
-    "@h-ai/core": "0.1.0-alpha.27"
+    "@h-ai/core": "0.1.0-alpha.28"
   },
   "devDependencies": {
     "@sveltejs/package": "^2.5.7",