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

package/dist/components/scenes/crud/crud-types.d.ts

@@ -5,7 +5,8 @@
  * @module crud-types
  */
 import type { Snippet } from 'svelte';
-import type { DataAttributes, Size } from '../../../types.js';
+import type { DataAttributes, FormLayoutOptions, Size } from '../../../types.js';
+import type { CrudFieldDef } from './crud-controller.svelte.js';
 /** CrudPage 权限控制 */
 export interface CrudPermissions {
     /** 允许新建 */
@@ -20,7 +21,7 @@ export type CrudFormVariant = 'drawer' | 'modal';
 /** 列表显示密度 */
 export type CrudDensity = 'normal' | 'compact';
 /** 新建/编辑表单展示配置 */
-export interface CrudFormConfig {
+export interface CrudFormConfig extends FormLayoutOptions {
     /** 展示形式：'drawer'（抽屉，默认）或 'modal'（弹出窗口） */
     variant?: CrudFormVariant;
     /** 抽屉尺寸预设（variant='drawer'，默认 '2xl'） */
@@ -69,41 +70,7 @@ export interface CrudPageProps<T = Record<string, unknown>> extends DataAttribut
             name: string;
             label: string | (() => string);
             keyField?: string;
-            fields: Array<{
-                id: string;
-                label: string | (() => string);
-                type: string;
-                inList?: boolean;
-                filterable?: boolean;
-                readonly?: boolean;
-                inCreate?: boolean;
-                inEdit?: boolean;
-                inDetail?: boolean;
-                options?: Array<{
-                    label: string;
-                    value: string | number | boolean;
-                }> | (() => Array<{
-                    label: string;
-                    value: string | number | boolean;
-                }>);
-                validation?: {
-                    required?: boolean;
-                    min?: number;
-                    max?: number;
-                    pattern?: string;
-                    message?: string;
-                };
-                width?: string;
-                align?: 'left' | 'center' | 'right';
-                render?: (value: unknown, item: Record<string, unknown>) => string;
-                placeholder?: string | (() => string);
-                /** 日期范围起始值 key；默认 `${id}Start`。 */
-                startKey?: string;
-                /** 日期范围结束值 key；默认 `${id}End`。 */
-                endKey?: string;
-                defaultValue?: unknown;
-                order?: number;
-            }>;
+            fields: CrudFieldDef[];
             defaultPageSize?: number;
             searchable?: boolean;
             searchPlaceholder?: string | (() => string);
@@ -120,11 +87,11 @@ export interface CrudPageProps<T = Record<string, unknown>> extends DataAttribut
                 remove?: (id: string) => Promise<void>;
             };
         };
-        getListFields: () => Array<Record<string, unknown>>;
-        getFilterFields: () => Array<Record<string, unknown>>;
-        getCreateFields: () => Array<Record<string, unknown>>;
-        getEditFields: () => Array<Record<string, unknown>>;
-        getDetailFields: () => Array<Record<string, unknown>>;
+        getListFields: () => CrudFieldDef[];
+        getFilterFields: () => CrudFieldDef[];
+        getCreateFields: () => CrudFieldDef[];
+        getEditFields: () => CrudFieldDef[];
+        getDetailFields: () => CrudFieldDef[];
         toTableColumns: () => Array<{
             key: string;
             label: string;

package/dist/components/scenes/guide/GuideHost.svelte

@@ -0,0 +1,111 @@
+<script lang='ts'>
+  import type { GuideController } from '../../../guide-types.js'
+  import type { DataAttributes } from '../../../types.js'
+  import { onMount, untrack } from 'svelte'
+  import { resolveGuideText } from '../../../guide.svelte.js'
+  import { getUILocale, uiM } from '../../../messages.js'
+  import { getDataAttributes } from '../../../utils.js'
+  import Alert from '../../compounds/Alert.svelte'
+  import Modal from '../../compounds/Modal.svelte'
+  import Button from '../../primitives/Button.svelte'
+  import HelpCenter from './HelpCenter.svelte'
+  import 'driver.js/dist/driver.css'
+  import '../../../styles/guide.css'
+
+  interface Props {
+    guide: GuideController
+    locale?: string
+    /** 非敏感的用户标识，账号切换后独立记录引导偏好。 */
+    scope?: string
+    /** 挂载后提示首次使用者，不会直接打断操作或自动跳转。 */
+    autoStart?: string
+  }
+
+  const { guide, locale = getUILocale(), scope = 'anonymous', autoStart, ...restProps }: Props & DataAttributes = $props()
+  const dataAttributes = $derived(getDataAttributes(restProps))
+  let ready = $state(false)
+  const offered = $derived.by(() => {
+    void locale
+    const tour = guide.offeredTour
+    return tour ? { id: tour.id, title: resolveGuideText(tour.title), description: resolveGuideText(tour.description) } : null
+  })
+  const text = $derived.by(() => ({
+    welcome: uiM('guide_welcome', undefined, locale),
+    start: uiM('guide_start', undefined, locale),
+    later: uiM('guide_later', undefined, locale),
+    dismiss: uiM('guide_dismiss', undefined, locale),
+    help: uiM('guide_help', undefined, locale),
+    close: uiM('guide_close', undefined, locale),
+    loading: uiM('guide_loading', undefined, locale),
+  }))
+
+  $effect(() => {
+    const currentLocale = locale
+    untrack(() => guide.setLocale(currentLocale))
+  })
+  $effect(() => {
+    const currentScope = scope
+    const tourId = autoStart
+    if (ready) {
+      untrack(() => {
+        guide.setScope(currentScope)
+        if (tourId)
+          guide.startIfNeeded(tourId)
+      })
+    }
+  })
+  $effect(() => {
+    const pathname = guide.pathname
+    untrack(() => guide.handleNavigation(pathname))
+  })
+  onMount(() => {
+    let alive = true
+    guide.setScope(scope)
+    guide.setLocale(locale)
+    void guide.resume().then(() => {
+      if (alive)
+        ready = true
+    })
+    return () => {
+      alive = false
+      guide.stop()
+    }
+  })
+</script>
+
+<div {...dataAttributes} class='contents'>
+
+  {#if offered}
+    <aside class='hai-guide-offer fixed bottom-4 right-4 z-[1150] w-96 max-w-[calc(100vw-2rem)] rounded-2xl border border-base-content/10 bg-base-100 p-5 text-base-content shadow-(--shadow-overlay)' aria-label={text.welcome} data-testid='guide-offer'>
+      <p class='text-xs font-medium text-primary'>{text.welcome}</p>
+      <h2 class='mt-2 text-base font-semibold'>{offered.title}</h2>
+      <p class='mt-2 text-sm leading-6 text-base-content/65'>{offered.description}</p>
+      <div class='mt-4 flex flex-wrap gap-2'>
+        <Button variant='primary' size='sm' onclick={() => offered && void guide.start(offered.id)} data-testid='guide-start'>{text.start}</Button>
+        <Button variant='ghost' size='sm' onclick={() => guide.defer()} data-testid='guide-later'>{text.later}</Button>
+        <Button variant='ghost' size='sm' onclick={() => guide.dismiss()} data-testid='guide-dismiss'>{text.dismiss}</Button>
+      </div>
+    </aside>
+  {/if}
+
+  {#if guide.busy}
+    <div class='hai-guide-loading fixed bottom-4 left-1/2 z-[1000000001] flex max-w-[calc(100vw-2rem)] -translate-x-1/2 items-center gap-3 rounded-xl border border-base-content/10 bg-base-100 px-4 py-2 text-sm text-base-content shadow-lg' role='status' data-testid='guide-loading'>
+      <span class='loading loading-spinner loading-xs'></span>{text.loading}
+      <Button size='sm' variant='ghost' onclick={() => guide.stop()} data-testid='guide-cancel'>{text.close}</Button>
+    </div>
+  {/if}
+
+  {#if guide.error}
+    <div class='fixed bottom-4 right-4 z-[1500] max-w-[calc(100vw-2rem)]' data-testid='guide-error'>
+      <Alert variant='warning'>
+        <div class='flex items-center gap-3'><span>{guide.error}</span><Button size='sm' variant='ghost' onclick={() => guide.clearError()}>{text.close}</Button></div>
+      </Alert>
+    </div>
+  {/if}
+
+  {#if guide.helpOpen}
+    <Modal open title={text.help} size='4xl' height='min(80dvh, 48rem)' bodyClass='p-0' onclose={() => guide.closeHelp()} data-testid='guide-help'>
+      <HelpCenter articles={guide.articles} tours={guide.tours} selectedId={guide.articleId} {locale} onstart={id => void guide.start(id)} />
+    </Modal>
+  {/if}
+</div>

package/dist/components/scenes/guide/GuideHost.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { GuideController } from '../../../guide-types.js';
+import type { DataAttributes } from '../../../types.js';
+import 'driver.js/dist/driver.css';
+import '../../../styles/guide.css';
+interface Props {
+    guide: GuideController;
+    locale?: string;
+    /** 非敏感的用户标识，账号切换后独立记录引导偏好。 */
+    scope?: string;
+    /** 挂载后提示首次使用者，不会直接打断操作或自动跳转。 */
+    autoStart?: string;
+}
+type $$ComponentProps = Props & DataAttributes;
+declare const GuideHost: import("svelte").Component<$$ComponentProps, {}, "">;
+type GuideHost = ReturnType<typeof GuideHost>;
+export default GuideHost;

package/dist/components/scenes/guide/HelpCenter.svelte

@@ -0,0 +1,94 @@
+<script lang='ts'>
+  import type { GuideArticle, GuideTour } from '../../../guide-types.js'
+  import type { DataAttributes } from '../../../types.js'
+  import { resolveGuideText } from '../../../guide.svelte.js'
+  import { getUILocale, uiM } from '../../../messages.js'
+  import { getDataAttributes } from '../../../utils.js'
+  import BareButton from '../../primitives/BareButton.svelte'
+  import Button from '../../primitives/Button.svelte'
+  import Input from '../../primitives/Input.svelte'
+
+  interface Props {
+    articles: readonly GuideArticle[]
+    tours?: readonly GuideTour[]
+    locale?: string
+    selectedId?: string | null
+    onstart?: (tourId: string) => void
+  }
+  const { articles, tours = [], locale = getUILocale(), selectedId = null, onstart, ...restProps }: Props & DataAttributes = $props()
+  const dataAttributes = $derived(getDataAttributes(restProps))
+  let search = $state('')
+  const searchId = $props.id()
+  let currentId = $derived(selectedId)
+  // 显式依赖宿主语言，确保回调返回的业务翻译也重新求值。
+  const localized = $derived.by(() => {
+    void locale
+    return articles.filter(article => !article.enabled || article.enabled()).map(article => ({
+      ...article,
+      title: resolveGuideText(article.title),
+      description: resolveGuideText(article.description),
+      category: resolveGuideText(article.category),
+      content: resolveGuideText(article.content),
+    }))
+  })
+  const availableTours = $derived.by(() => {
+    void locale
+    return tours.filter(tour => !tour.enabled || tour.enabled()).map(tour => ({ id: tour.id, title: resolveGuideText(tour.title) }))
+  })
+  const visible = $derived(localized.filter(article => (`${article.title} ${article.description} ${article.category} ${article.content}`).toLowerCase().includes(search.trim().toLowerCase())))
+  const selected = $derived(visible.find(article => article.id === currentId) ?? visible[0])
+  const markdown = $derived(selected ? import('../ai/MarkdownRenderer.svelte') : null)
+  const text = $derived.by(() => ({
+    search: uiM('guide_search', undefined, locale),
+    empty: uiM('guide_empty', undefined, locale),
+    tours: uiM('guide_tours', undefined, locale),
+    start: uiM('guide_start', undefined, locale),
+    loading: uiM('guide_loading', undefined, locale),
+    failed: uiM('guide_startFailed', undefined, locale),
+  }))
+</script>
+
+<div data-testid='help-center' {...dataAttributes} class='flex min-h-0 flex-col text-base-content md:flex-row'>
+  <nav class='shrink-0 border-b border-base-content/8 p-4 md:w-64 md:border-b-0 md:border-r' aria-label={text.search}>
+    <label class='sr-only' for={searchId}>{text.search}</label>
+    <Input id={searchId} bind:value={search} placeholder={text.search} data-testid='guide-search' />
+    <div class='mt-3 max-h-40 space-y-1 overflow-y-auto md:max-h-[50dvh]'>
+      {#each visible as article (article.id)}
+        <BareButton class={`w-full rounded-lg px-3 py-2 text-left text-sm hover:bg-base-content/5 ${selected?.id === article.id ? 'bg-primary/10 font-semibold text-primary' : ''}`} onclick={() => currentId = article.id} data-testid={`guide-article-${article.id}`}>
+          {#if article.category}<span class='mb-1 block text-xs text-base-content/50'>{article.category}</span>{/if}
+          <span class='block'>{article.title}</span>
+        </BareButton>
+      {/each}
+    </div>
+    {#if onstart && availableTours.length}
+      <p class='mt-5 text-xs font-medium text-base-content/50'>{text.tours}</p>
+      <div class='mt-2 flex flex-wrap gap-2 md:flex-col'>
+        {#each availableTours as tour (tour.id)}
+          <Button variant='ghost' size='sm' onclick={() => onstart?.(tour.id)} data-testid={`guide-tour-${tour.id}`}>{tour.title}</Button>
+        {/each}
+      </div>
+    {/if}
+  </nav>
+  <article class='min-w-0 flex-1 p-5 md:p-7' data-testid='guide-article-content'>
+    {#if selected}
+      <h2 class='text-xl font-semibold'>{selected.title}</h2>
+      {#if selected.description}<p class='mt-2 text-sm text-base-content/60'>{selected.description}</p>{/if}
+      {#if selected.tourId && availableTours.some(tour => tour.id === selected.tourId) && onstart}
+        <Button variant='primary' size='sm' class='mt-4' onclick={() => onstart?.(selected!.tourId!)} data-testid='guide-article-start'>{text.start}</Button>
+      {/if}
+      <div class='mt-5'>
+        {#await markdown}
+          <p class='text-sm text-base-content/50' role='status'>{text.loading}</p>
+        {:then component}
+          {#if component}
+            <component.default content={selected.content} allowHtmlTags={false} showCopyButton={false} />
+          {/if}
+        {:catch}
+          <p class='text-sm text-error' role='alert'>{text.failed}</p>
+        {/await}
+      </div>
+    {:else}
+      <p class='py-8 text-center text-sm text-base-content/50'>{text.empty}</p>
+    {/if}
+  </article>
+</div>

package/dist/components/scenes/guide/HelpCenter.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { GuideArticle, GuideTour } from '../../../guide-types.js';
+import type { DataAttributes } from '../../../types.js';
+interface Props {
+    articles: readonly GuideArticle[];
+    tours?: readonly GuideTour[];
+    locale?: string;
+    selectedId?: string | null;
+    onstart?: (tourId: string) => void;
+}
+type $$ComponentProps = Props & DataAttributes;
+declare const HelpCenter: import("svelte").Component<$$ComponentProps, {}, "">;
+type HelpCenter = ReturnType<typeof HelpCenter>;
+export default HelpCenter;

package/dist/components/scenes/guide/index.d.ts

@@ -0,0 +1,2 @@
+export { default as GuideHost } from './GuideHost.svelte';
+export { default as HelpCenter } from './HelpCenter.svelte';

package/dist/components/scenes/guide/index.js

@@ -0,0 +1,2 @@
+export { default as GuideHost } from './GuideHost.svelte';
+export { default as HelpCenter } from './HelpCenter.svelte';

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

@@ -1,6 +1,7 @@
 <!-- 配置驱动认证场景；网络、通知及 Token 存储由 actions 注入。 -->
 <script lang='ts'>
-  import type { HaiResult } from '@h-ai/core'
+  import type { HaiError, HaiResult } from '@h-ai/core'
+  import type { UIMessageKey } from '../../../messages.js'
   import type { AuthLoginMethod, AuthPanelMode, AuthPanelProps } from '../types.js'
   import { onMount, untrack } from 'svelte'
   import { uiM } from '../../../messages.js'
@@ -16,12 +17,14 @@
   import RegisterForm from './RegisterForm.svelte'
   import ResetPasswordForm from './ResetPasswordForm.svelte'
 
-  const { config, actions, initialMode = 'login', resetToken = '', loginUrl, registerUrl, forgotPasswordUrl, onauthenticated, error = '', onretry, loginHeader, loginFields, loginFooter, registerHeader, registerFields, registerFooter, ...restProps }: AuthPanelProps = $props()
+  const { config, actions, columns = 1, labelPosition = 'top', labelWidth = '8rem', initialMode = 'login', resetToken = '', loginUrl, registerUrl, forgotPasswordUrl, onauthenticated, error = '', onretry, loginHeader, loginFields, loginFooter, registerHeader, registerFields, registerFooter, ...restProps }: AuthPanelProps = $props()
   const dataAttributes = $derived(getDataAttributes(restProps))
   let mode = $state<AuthPanelMode>(untrack(() => initialMode))
   let loading = $state(false)
-  let errors = $state<Record<string, string>>({})
-  let notice = $state('')
+  let actionError = $state<Pick<HaiError, 'code' | 'message'>>()
+  let networkFailed = $state(false)
+  const errors = $derived<Record<string, string>>(actionError ? { general: authErrorMessage(actionError) } : networkFailed ? { general: uiM('auth_network_error') } : {})
+  let notice = $state<UIMessageKey | ''>('')
   // SSR 表单先显示但不可编辑；客户端绑定事件后开放输入，避免接管时丢失早到的输入。
   let interactive = $state(false)
   onMount(() => {
@@ -33,13 +36,15 @@
 
   function switchMode(next: AuthPanelMode) {
     mode = next
-    errors = {}
+    actionError = undefined
+    networkFailed = false
     notice = ''
   }
-  async function run(operation: () => Promise<HaiResult<unknown>>, authenticate = false, successNotice = '') {
+  async function run(operation: () => Promise<HaiResult<unknown>>, authenticate = false, successNotice: UIMessageKey | '' = '') {
     if (loading)
       return
-    errors = {}
+    actionError = undefined
+    networkFailed = false
     notice = ''
     loading = true
     try {
@@ -48,10 +53,10 @@
         if (mode === 'register' && result.error.code === 'hai:iam:004') {
           // 默认禁用的新账户已完成注册，提示等待启用，避免用户重复注册。
           switchMode('login')
-          notice = uiM('auth_registration_pending')
+          notice = 'auth_registration_pending'
         }
         else {
-          errors = { general: authErrorMessage(result.error) }
+          actionError = result.error
         }
       }
       else if (authenticate) {
@@ -61,7 +66,7 @@
         notice = successNotice
       }
     }
-    catch { errors = { general: uiM('auth_network_error') } }
+    catch { networkFailed = true }
     finally { loading = false }
   }
 </script>
@@ -80,44 +85,47 @@
 
 <AuthShell {...dataAttributes} {...config?.ui} title={config?.ui.title || title} brandTitle={config?.ui.brandTitle || uiM('auth_brand')}>
   <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'))} />
+    <!-- 固定内容包装节点，避免 fieldset 插入通知时丢失容器查询子树的布局。 -->
+    <div class='min-w-0'>
+      {#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'>{uiM(notice)}</Alert>{/if}
+        {#if mode === 'login'}
+          <LoginForm {columns} {labelPosition} {labelWidth} {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 {columns} {labelPosition} {labelWidth} {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 {columns} {labelPosition} {labelWidth} {loading} {errors} mode={config.passwordReset.mode ?? 'email'} onsubmit={data => run(() => actions.requestPasswordReset(data.email || data.phone || ''), false, '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 {columns} {labelPosition} {labelWidth} {loading} {errors} showCode={!resetToken} passwordPolicy={config.password} minPasswordLength={config.password.minLength}
+                             onsubmit={data => run(() => actions.confirmPasswordReset(resetToken || data.code || '', data.newPassword), false, 'auth_reset_done')} />
+          <div class='mt-4 text-center'>{@render link('login', uiM('login_submit'), loginUrl)}</div>
+        {/if}
       {/if}
-    {/if}
+    </div>
   </fieldset>
 </AuthShell>

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

@@ -8,12 +8,17 @@
   import { uiM } from '../../../messages.js'
   import { cn, getDataAttributes } from '../../../utils.js'
   import Alert from '../../compounds/Alert.svelte'
+  import FormField from '../../compounds/FormField.svelte'
+  import FormLayout from '../../compounds/FormLayout.svelte'
   import Button from '../../primitives/Button.svelte'
   import { arePasswordsEqual, passwordPolicyError, passwordPolicyHint } from './password-utils.js'
   import PasswordInput from './PasswordInput.svelte'
 
   const {
     loading = false,
+    columns = 1,
+    labelPosition = 'top',
+    labelWidth = '8rem',
     disabled = false,
     requireOldPassword = true,
     showPasswordStrength = true,
@@ -73,71 +78,64 @@
 </script>
 
 <form {...dataAttributes} class={formClass} onsubmit={handleSubmit}>
-  {#if requireOldPassword}
-    <div class='space-y-1.5'>
-      <label class='text-sm font-medium text-base-content/70' for='old-password'>
-        {uiM('change_password_old')}
-      </label>
+  <FormLayout {columns} {labelPosition} {labelWidth}>
+    {#if requireOldPassword}
+      <FormField for='old-password' label={uiM('change_password_old')}>
+        <PasswordInput
+          value={oldPassword}
+          oninput={(e) => { oldPassword = e.currentTarget.value }}
+          placeholder={uiM('change_password_old_placeholder')}
+          {disabled}
+          error={errors.oldPassword}
+          showStrength={false}
+        />
+      </FormField>
+    {/if}
+
+    <FormField for='new-password' label={uiM('change_password_new')}>
       <PasswordInput
-        value={oldPassword}
-        oninput={(e) => { oldPassword = e.currentTarget.value }}
-        placeholder={uiM('change_password_old_placeholder')}
+        value={newPassword}
+        oninput={(e) => { newPassword = e.currentTarget.value }}
+        placeholder={uiM('change_password_new_placeholder')}
         {disabled}
-        error={errors.oldPassword}
-        showStrength={false}
+        error={errors.newPassword}
+        showStrength={showPasswordStrength}
+        minLength={minPasswordLength}
       />
-    </div>
-  {/if}
+    </FormField>
 
-  <div class='space-y-1.5'>
-    <label class='text-sm font-medium text-base-content/70' for='new-password'>
-      {uiM('change_password_new')}
-    </label>
-    <PasswordInput
-      value={newPassword}
-      oninput={(e) => { newPassword = e.currentTarget.value }}
-      placeholder={uiM('change_password_new_placeholder')}
-      {disabled}
-      error={errors.newPassword}
-      showStrength={showPasswordStrength}
-      minLength={minPasswordLength}
-    />
-  </div>
-
-  <div class='space-y-1.5'>
-    <label class='text-sm font-medium text-base-content/70' for='confirm-password'>
-      {uiM('change_password_confirm')}
-    </label>
-    <PasswordInput
-      value={confirmPassword}
-      oninput={(e) => { confirmPassword = e.currentTarget.value }}
-      placeholder={uiM('change_password_confirm_placeholder')}
-      {disabled}
-      error={errors.confirmPassword || (!passwordsMatch && confirmPassword ? uiM('change_password_mismatch') : '')}
-      showStrength={false}
-    />
-  </div>
+    <FormField for='confirm-password' label={uiM('change_password_confirm')}>
+      <PasswordInput
+        value={confirmPassword}
+        oninput={(e) => { confirmPassword = e.currentTarget.value }}
+        placeholder={uiM('change_password_confirm_placeholder')}
+        {disabled}
+        error={errors.confirmPassword || (!passwordsMatch && confirmPassword ? uiM('change_password_mismatch') : '')}
+        showStrength={false}
+      />
+    </FormField>
 
-  <div class='rounded-lg bg-base-content/3 px-3.5 py-2.5 text-xs text-base-content/50'>
-    {uiM('change_password_relogin_hint')}
-  </div>
+    <div class='rounded-lg bg-base-content/3 px-3.5 py-2.5 text-xs text-base-content/50'>
+      {uiM('change_password_relogin_hint')}
+    </div>
 
-  {#if errors.general}
-    <Alert variant='error'>
-      {errors.general}
-    </Alert>
-  {/if}
+    {#if errors.general}
+      <Alert variant='error'>
+        {errors.general}
+      </Alert>
+    {/if}
 
-  {#if passwordPolicy}<p class='text-xs text-base-content/60'>{passwordPolicyHint(passwordPolicy)}</p>{/if}
-  {#if policyError}<p role='alert' class='text-sm text-error'>{policyError}</p>{/if}
+    {#if passwordPolicy}<p class='text-xs text-base-content/60'>{passwordPolicyHint(passwordPolicy)}</p>{/if}
+    {#if policyError}<p role='alert' class='text-sm text-error'>{policyError}</p>{/if}
 
-  <Button
-    type='submit'
-    variant='primary'
-    class='w-full sm:w-auto sm:min-w-40'
-    disabled={loading || disabled || !canSubmit || Boolean(policyError)}
-    {loading}
-  >
-    {submitText || uiM('change_password_submit')}
-  </Button>
+    <Button
+      type='submit'
+      variant='primary'
+      class='w-full sm:w-auto sm:min-w-40'
+      disabled={loading || disabled || !canSubmit || Boolean(policyError)}
+      {loading}
+    >
+      {submitText || uiM('change_password_submit')}
+    </Button>
+  </FormLayout>
 </form>