@h-ai/ui 0.1.0-alpha.60 → 0.1.0-alpha.61

package/README.en.md

@@ -752,6 +752,8 @@ agreements:
 
 AuthPanel accepts public IAM config and actions for password/LDAP/email/SMS login, registration and recovery. config.ui supplies layout, branding and images. LoginForm supports methods, onsendotp, otpLength and resendInterval; password forms accept passwordPolicy. Network and token storage remain in actions. Known IAM authentication errors use the current UI language; custom application messages are preserved.
 
+AuthPanel disables native form controls during SSR and enables input after client mount binds events, preventing early input from being lost during hydration. Applications need no extra readiness code. E2E tests wait for editable controls and cover delayed client scripts.
+
 [完整 IAM 配置 / IAM configuration](../iam/README.en.md)
 
 ## Other exports

package/README.ja.md

@@ -752,6 +752,8 @@ agreements:
 
 AuthPanel に IAM 公開設定と actions を渡すと、複数方式のログイン、登録、復旧、規約を利用できます。config.ui でレイアウトとブランド画像を指定し、パスワードフォームは passwordPolicy を受け取ります。通信と Token 保存は actions の責務です。既知の IAM 認証エラーは現在の UI 言語で表示し、アプリ独自のメッセージはそのまま保持します。
 
+AuthPanel は SSR 中のフォーム操作を無効にし、クライアントのマウントとイベント登録が完了してから入力を有効にします。ハイドレーションによる入力の消失を防ぎ、アプリ側の追加の準備処理は不要です。E2E では入力可能な状態を待ち、クライアントスクリプトの読み込みが遅れる場合も検証します。
+
 [完整 IAM 配置 / IAM configuration](../iam/README.ja.md)
 
 ## その他のエクスポート

package/README.md

@@ -711,6 +711,8 @@ agreements:
 
 AuthPanel 直接接收 IAM 白名单配置和 actions，内置登录（密码/LDAP/邮件/短信）、注册、找回、重置及协议展示。使用 `config.ui` 配置卡片/分栏、标题、品牌、Logo 和配图。`LoginForm` 提供 methods、onsendotp、otpLength、resendInterval；密码表单接受 passwordPolicy。组件只渲染与交互，网络和 Token 存储通过 actions 注入。认证场景按公开 IAM 错误码显示当前 UI 语言的提示，应用自定义错误保留原文。
 
+AuthPanel 在 SSR 阶段禁用原生表单控件，客户端挂载并绑定事件后自动开放输入，避免接管时丢失早到的输入。应用无需额外的就绪适配；E2E 等待控件可编辑，并覆盖客户端脚本延迟加载的场景。
+
 [完整 IAM 配置 / IAM configuration](../iam/README.md)
 
 ### createLocaleStore

package/dist/components/scenes/iam/AuthPanel.svelte

@@ -2,7 +2,7 @@
 <script lang='ts'>
   import type { HaiResult } from '@h-ai/core'
   import type { AuthLoginMethod, AuthPanelMode, AuthPanelProps } from '../types.js'
-  import { untrack } from 'svelte'
+  import { onMount, untrack } from 'svelte'
   import { uiM } from '../../../messages.js'
   import { getDataAttributes } from '../../../utils.js'
   import Alert from '../../compounds/Alert.svelte'
@@ -22,6 +22,11 @@
   let loading = $state(false)
   let errors = $state<Record<string, string>>({})
   let notice = $state('')
+  // SSR 表单先显示但不可编辑；客户端绑定事件后开放输入，避免接管时丢失早到的输入。
+  let interactive = $state(false)
+  onMount(() => {
+    interactive = true
+  })
   const methods = $derived(config ? (['password', 'ldap', 'email', 'sms'] as AuthLoginMethod[]).filter(method => config.login[method]) : [])
   const title = $derived(mode === 'register' ? uiM('register_title') : mode === 'forgot' ? uiM('forgot_password_title') : mode === 'reset' ? uiM('reset_password_title') : uiM('login_title'))
   const available = $derived(config && (mode === 'login' || (mode === 'register' ? config.register.enabled : config.passwordReset.enabled)))
@@ -74,43 +79,45 @@
 {/snippet}
 
 <AuthShell {...dataAttributes} {...config?.ui} title={config?.ui.title || title} brandTitle={config?.ui.brandTitle || uiM('auth_brand')}>
-  {#if error}
-    <Alert variant='error'>{error}</Alert>
-    {#if onretry}<Button class='mt-4 w-full' onclick={onretry}>{uiM('crud_retry')}</Button>{/if}
-  {:else if !config}
-    <div class='flex justify-center' role='status'><Spinner /></div>
-  {:else if !available}
-    <Alert variant='warning'>{uiM('auth_unavailable')}</Alert>
-    <div class='mt-4 text-center'>{@render link('login', uiM('login_submit'), loginUrl)}</div>
-  {:else}
-    {#if notice}<Alert variant='success' class='mb-4'>{notice}</Alert>{/if}
-    {#if mode === 'login'}
-      <LoginForm {methods} {loading} {errors} header={loginHeader} extraFields={loginFields} showRememberMe={false} showForgotPassword={config.passwordReset.enabled} {forgotPasswordUrl}
-                 onforgotpassword={forgotPasswordUrl ? undefined : () => switchMode('forgot')}
-                 otpLength={config.otp.length} resendInterval={config.otp.resendInterval} onsendotp={actions.sendOtp}
-                 agreements={config.agreements.showOnLogin ? config.agreements : undefined}
-                 onsubmit={data => run(() => actions.login({ identifier: data.username, password: data.password, method: data.method, code: data.code }), true)}>
-        {#snippet footer()}
-          {#if loginFooter}{@render loginFooter()}{/if}
-          {#if config?.register.enabled}<div class='text-center text-sm'>{uiM('login_no_account')} {@render link('register', uiM('login_register_now'), registerUrl)}</div>{/if}
-        {/snippet}
-      </LoginForm>
-    {:else if mode === 'register'}
-      <RegisterForm {loading} {errors} header={registerHeader} extraFields={registerFields} fields={config.passwordReset.mode === 'phone' ? ['username', 'phone', 'password'] : ['username', 'email', 'password']} passwordPolicy={config.password} minPasswordLength={config.password.minLength}
-                    agreements={config.agreements.showOnRegister ? config.agreements : undefined} onsubmit={data => run(() => actions.register({ username: data.username || '', password: data.password, email: data.email, phone: data.phone, displayName: data.nickname }), true)}>
-        {#snippet footer()}
-          {#if registerFooter}{@render registerFooter()}{/if}
-          <div class='text-center'>{@render link('login', uiM('register_login_now'), loginUrl)}</div>
-        {/snippet}
-      </RegisterForm>
-    {:else if mode === 'forgot'}
-      <ForgotPasswordForm {loading} {errors} mode={config.passwordReset.mode ?? 'email'} onsubmit={data => run(() => actions.requestPasswordReset(data.email || data.phone || ''), false, uiM('auth_reset_sent'))}>
-        {#snippet footer()}<div class='flex justify-between gap-3'>{@render link('login', uiM('login_submit'), loginUrl)}{@render link('reset', uiM('auth_have_token'))}</div>{/snippet}
-      </ForgotPasswordForm>
-    {:else}
-      <ResetPasswordForm {loading} {errors} showCode={!resetToken} passwordPolicy={config.password} minPasswordLength={config.password.minLength}
-                         onsubmit={data => run(() => actions.confirmPasswordReset(resetToken || data.code || '', data.newPassword), false, uiM('auth_reset_done'))} />
+  <fieldset class='m-0 min-w-0 border-0 p-0' disabled={!interactive}>
+    {#if error}
+      <Alert variant='error'>{error}</Alert>
+      {#if onretry}<Button class='mt-4 w-full' onclick={onretry}>{uiM('crud_retry')}</Button>{/if}
+    {:else if !config}
+      <div class='flex justify-center' role='status'><Spinner /></div>
+    {:else if !available}
+      <Alert variant='warning'>{uiM('auth_unavailable')}</Alert>
       <div class='mt-4 text-center'>{@render link('login', uiM('login_submit'), loginUrl)}</div>
+    {:else}
+      {#if notice}<Alert variant='success' class='mb-4'>{notice}</Alert>{/if}
+      {#if mode === 'login'}
+        <LoginForm {methods} {loading} {errors} header={loginHeader} extraFields={loginFields} showRememberMe={false} showForgotPassword={config.passwordReset.enabled} {forgotPasswordUrl}
+                   onforgotpassword={forgotPasswordUrl ? undefined : () => switchMode('forgot')}
+                   otpLength={config.otp.length} resendInterval={config.otp.resendInterval} onsendotp={actions.sendOtp}
+                   agreements={config.agreements.showOnLogin ? config.agreements : undefined}
+                   onsubmit={data => run(() => actions.login({ identifier: data.username, password: data.password, method: data.method, code: data.code }), true)}>
+          {#snippet footer()}
+            {#if loginFooter}{@render loginFooter()}{/if}
+            {#if config?.register.enabled}<div class='text-center text-sm'>{uiM('login_no_account')} {@render link('register', uiM('login_register_now'), registerUrl)}</div>{/if}
+          {/snippet}
+        </LoginForm>
+      {:else if mode === 'register'}
+        <RegisterForm {loading} {errors} header={registerHeader} extraFields={registerFields} fields={config.passwordReset.mode === 'phone' ? ['username', 'phone', 'password'] : ['username', 'email', 'password']} passwordPolicy={config.password} minPasswordLength={config.password.minLength}
+                      agreements={config.agreements.showOnRegister ? config.agreements : undefined} onsubmit={data => run(() => actions.register({ username: data.username || '', password: data.password, email: data.email, phone: data.phone, displayName: data.nickname }), true)}>
+          {#snippet footer()}
+            {#if registerFooter}{@render registerFooter()}{/if}
+            <div class='text-center'>{@render link('login', uiM('register_login_now'), loginUrl)}</div>
+          {/snippet}
+        </RegisterForm>
+      {:else if mode === 'forgot'}
+        <ForgotPasswordForm {loading} {errors} mode={config.passwordReset.mode ?? 'email'} onsubmit={data => run(() => actions.requestPasswordReset(data.email || data.phone || ''), false, uiM('auth_reset_sent'))}>
+          {#snippet footer()}<div class='flex justify-between gap-3'>{@render link('login', uiM('login_submit'), loginUrl)}{@render link('reset', uiM('auth_have_token'))}</div>{/snippet}
+        </ForgotPasswordForm>
+      {:else}
+        <ResetPasswordForm {loading} {errors} showCode={!resetToken} passwordPolicy={config.password} minPasswordLength={config.password.minLength}
+                           onsubmit={data => run(() => actions.confirmPasswordReset(resetToken || data.code || '', data.newPassword), false, uiM('auth_reset_done'))} />
+        <div class='mt-4 text-center'>{@render link('login', uiM('login_submit'), loginUrl)}</div>
+      {/if}
     {/if}
-  {/if}
+  </fieldset>
 </AuthShell>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@h-ai/ui",
   "type": "module",
-  "version": "0.1.0-alpha.60",
+  "version": "0.1.0-alpha.61",
   "description": "Hai Framework UI component library for Svelte 5 Runes.",
   "license": "Apache-2.0",
   "svelte": "./dist/index.js",
@@ -49,7 +49,7 @@
     "svelte": "^5.57.2"
   },
   "dependencies": {
-    "@h-ai/core": "0.1.0-alpha.60",
+    "@h-ai/core": "0.1.0-alpha.61",
     "@internationalized/date": "^3.12.4",
     "@shikijs/langs": "^4.5.0",
     "bits-ui": "^2.19.5",