@svgrid/grid 2.1.22 → 2.2.0

package/src/SvDropDownList.svelte

@@ -7,8 +7,8 @@
    * One styled renderer over the headless `createDropdownList` core (state +
    * keyboard + ARIA); only portal/measure/scroll render concerns live here.
    */
-  import { flushSync } from 'svelte'
   import { anchoredRect, portalToBody, popIn, type AnchoredRect } from './popover'
+  import { startPanelResize } from './panel-resize'
   import { createDismissableLayer } from './a11y/dismissable'
   import { groupOptions, hasGroups, type ListOption } from './list-option'
   import { virtualRange, scrollToIndex } from './virtual'
@@ -26,6 +26,9 @@
     virtual?: boolean
     /** Fixed option height in px (must match the CSS). Default 34. */
     rowHeight?: number
+    /** Show a bottom drag grip so the user can resize the open panel's height
+     *  (only while it opens downward). Off by default. */
+    resizable?: boolean
   }
 
   let {
@@ -47,6 +50,7 @@
     autoOpen = false,
     virtual = false,
     rowHeight = 34,
+    resizable = false,
   }: Props = $props()
 
   const autoId = nextEditorId('sv-ddl')
@@ -61,7 +65,15 @@
 
   let triggerEl = $state<HTMLButtonElement | null>(null)
   let panelEl = $state<HTMLDivElement | null>(null)
-  let rect = $state<AnchoredRect>({ top: 0, left: 0, width: 0, openUpward: false })
+  let rect = $state<AnchoredRect>({ top: 0, left: 0, width: 0, openUpward: false, maxHeight: 0, availHeight: 0 })
+  // User-chosen panel height (px) once they drag the resize grip; null = auto.
+  let userHeight = $state<number | null>(null)
+  // Effective height cap: the user's drag if any (clamped to the viewport
+  // ceiling), otherwise the comfortable bounds-aware height.
+  const panelMaxH = $derived(
+    resizable && userHeight != null ? Math.min(userHeight, rect.availHeight) : rect.maxHeight,
+  )
+  const showGrip = $derived(resizable && !rect.openUpward)
 
   const ddl = createDropdownList({
     options: () => options,
@@ -81,7 +93,24 @@
 
   function updatePos() {
     if (!triggerEl) return
-    rect = anchoredRect(triggerEl.getBoundingClientRect(), { estimatedHeight: Math.min(options.length, 8) * 34 + 8 })
+    // When the user has resized, anchor to THAT height so the flip decision and
+    // upward top stay correct; otherwise estimate from the option count.
+    const estimatedHeight =
+      resizable && userHeight != null ? userHeight : Math.min(options.length, 8) * 34 + 8
+    rect = anchoredRect(triggerEl.getBoundingClientRect(), { estimatedHeight })
+  }
+
+  function startResize(e: PointerEvent) {
+    if (!panelEl) return
+    startPanelResize(e, {
+      startHeight: panelEl.clientHeight,
+      min: 96,
+      max: () => rect.availHeight,
+      onHeight: (h) => {
+        userHeight = h
+        updatePos()
+      },
+    })
   }
 
   $effect(() => {
@@ -126,19 +155,20 @@
     {...ddl.triggerProps()}
     use:focusOpen
   >
-    <span class="sv-ddl__value" class:is-placeholder={!selected}>{selected?.label ?? placeholder}</span>
+    <span class="sv-ddl__value" class:is-placeholder={!selected}>{#if selected?.color}<span class="sv-ddl__swatch" style:background={selected.color}></span>{/if}{selected?.label ?? placeholder}</span>
     <svg class="sv-ddl__chev" viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6" /></svg>
   </button>
 </SvField>
 
 {#if ddl.open}
-  <div bind:this={panelEl} class="sv-ddl__panel" class:is-virtual={useVirtual} use:portalToBody use:popIn={{ up: rect.openUpward }} style:position="fixed" style:top={`${rect.top}px`} style:left={`${rect.left}px`} style:min-width={`${rect.width}px`} onscroll={(e) => { scrollTop = e.currentTarget.scrollTop; if (useVirtual) flushSync() }} bind:clientHeight={viewportH} {...ddl.listboxProps()}>
+  <div bind:this={panelEl} class="sv-ddl__panel" class:is-virtual={useVirtual} class:is-resizable={showGrip} use:portalToBody use:popIn={{ up: rect.openUpward }} style:--sv-row-h={`${rowHeight}px`} style:position="fixed" style:top={`${rect.top}px`} style:left={`${rect.left}px`} style:min-width={`${rect.width}px`} style:max-height={`${panelMaxH}px`} style:height={resizable && userHeight != null ? `${panelMaxH}px` : undefined} onscroll={(e) => (scrollTop = e.currentTarget.scrollTop)} bind:clientHeight={viewportH} {...ddl.listboxProps()}>
     {#if useVirtual}
-      <div class="sv-ddl__sizer" aria-hidden="true" style:height={`${vr.totalHeight}px`}></div>
+      <div class="sv-ddl__spacer" aria-hidden="true" style:height={`${vr.padTop}px`}></div>
       {#each windowed as opt (opt.value)}
         <!-- svelte-ignore a11y_click_events_have_key_events a11y_interactive_supports_focus -->
-        <div class="sv-ddl__opt sv-ddl__opt--abs" style:height={`${rowHeight}px`} style:transform={`translateY(${opt.index * rowHeight}px)`} class:is-active={ddl.isActive(opt.index)} class:is-selected={ddl.isSelected(opt)} class:is-disabled={opt.disabled} {...ddl.optionProps(opt.index)}>{opt.label}</div>
+        <div class="sv-ddl__opt" style:height={`${rowHeight}px`} class:is-active={ddl.isActive(opt.index)} class:is-selected={ddl.isSelected(opt)} class:is-disabled={opt.disabled} {...ddl.optionProps(opt.index)}>{#if opt.color}<span class="sv-ddl__swatch" style:background={opt.color}></span>{/if}{opt.label}</div>
       {/each}
+      <div class="sv-ddl__spacer" aria-hidden="true" style:height={`${vr.padBottom}px`}></div>
     {:else}
     {#each groupOptions(options) as g (g.group ?? '')}
       {#if g.group != null}
@@ -146,17 +176,23 @@
           <div class="sv-ddl__group-label" aria-hidden="true">{g.group}</div>
           {#each g.options as opt (opt.value)}
             <!-- svelte-ignore a11y_click_events_have_key_events a11y_interactive_supports_focus -->
-            <div class="sv-ddl__opt" class:is-active={ddl.isActive(opt.index)} class:is-selected={ddl.isSelected(opt)} class:is-disabled={opt.disabled} {...ddl.optionProps(opt.index)}>{opt.label}</div>
+            <div class="sv-ddl__opt" class:is-active={ddl.isActive(opt.index)} class:is-selected={ddl.isSelected(opt)} class:is-disabled={opt.disabled} {...ddl.optionProps(opt.index)}>{#if opt.color}<span class="sv-ddl__swatch" style:background={opt.color}></span>{/if}{opt.label}</div>
           {/each}
         </div>
       {:else}
         {#each g.options as opt (opt.value)}
           <!-- svelte-ignore a11y_click_events_have_key_events a11y_interactive_supports_focus -->
-          <div class="sv-ddl__opt" class:is-active={ddl.isActive(opt.index)} class:is-selected={ddl.isSelected(opt)} class:is-disabled={opt.disabled} {...ddl.optionProps(opt.index)}>{opt.label}</div>
+          <div class="sv-ddl__opt" class:is-active={ddl.isActive(opt.index)} class:is-selected={ddl.isSelected(opt)} class:is-disabled={opt.disabled} {...ddl.optionProps(opt.index)}>{#if opt.color}<span class="sv-ddl__swatch" style:background={opt.color}></span>{/if}{opt.label}</div>
         {/each}
       {/if}
     {/each}
     {/if}
+    {#if showGrip}
+      <!-- svelte-ignore a11y_no_static_element_interactions -->
+      <div class="sv-ddl__grip" onpointerdown={startResize} title="Drag to resize" aria-hidden="true">
+        <span class="sv-ddl__grip-dots"></span>
+      </div>
+    {/if}
   </div>
 {/if}
 {#if name}<input type="hidden" {name} value={value ?? ''} />{/if}
@@ -181,14 +217,50 @@
   .sv-ddl__chev { color: var(--sg-muted, #64748b); flex: none; }
 
   :global(.sv-ddl__panel) {
-    z-index: 2147483647; max-height: 288px; overflow-y: auto; padding: 4px;
+    box-sizing: border-box; z-index: 2147483647; max-height: 288px; overflow-y: auto; padding: 4px;
     background: var(--sg-bg, #fff); color: var(--sg-fg, #0f172a);
     border: 1px solid var(--sg-border, #e2e8f0); border-radius: 10px; box-shadow: 0 16px 48px -12px rgba(15,23,42,0.35);
   }
   :global(.sv-ddl__opt) { box-sizing: border-box; display: flex; align-items: center; padding: 7px 10px; border-radius: 6px; cursor: pointer; font-size: 13px; }
-  :global(.sv-ddl__panel.is-virtual) { position: fixed; will-change: scroll-position; }
-  :global(.sv-ddl__sizer) { padding: 0; margin: 0; pointer-events: none; }
-  :global(.sv-ddl__opt--abs) { position: absolute; inset-inline: 4px; top: 4px; }
+  /* Color swatch shown before an option's label (option.color) - in both the
+     trigger value and the portalled panel options. */
+  :global(.sv-ddl__swatch) {
+    display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 3px;
+    margin-inline-end: 8px; vertical-align: middle;
+    box-shadow: inset 0 0 0 1px color-mix(in srgb, #000 18%, transparent);
+  }
+  /* Bottom resize grip: a row of dots ("····") the user drags to resize the
+     panel. Sticky so it stays pinned at the panel's bottom while options scroll. */
+  :global(.sv-ddl__panel.is-resizable) { padding-bottom: 0; }
+  :global(.sv-ddl__grip) {
+    position: sticky; bottom: 0; z-index: 1; margin: 2px -4px -4px; height: 15px;
+    display: flex; align-items: center; justify-content: center; cursor: ns-resize;
+    background: var(--sg-bg, #fff); border-top: 1px solid var(--sg-border, #e2e8f0);
+    border-radius: 0 0 10px 10px; touch-action: none;
+  }
+  :global(.sv-ddl__grip-dots) {
+    width: 26px; height: 4px; color: var(--sg-muted, #94a3b8); opacity: 0.6;
+    background-image: radial-gradient(currentColor 1px, transparent 1.6px);
+    background-size: 6px 4px; background-position: center; background-repeat: repeat-x;
+  }
+  :global(.sv-ddl__grip:hover .sv-ddl__grip-dots) { opacity: 1; }
+  /* Faint per-row skeleton so a fast scrollbar-thumb drag reveals placeholder
+     rows in this off-screen padding instead of blank, until JS re-windows. */
+  :global(.sv-ddl__spacer) {
+    padding: 0; margin: 0; flex: none; pointer-events: none;
+    background-image: linear-gradient(
+      to bottom,
+      transparent 0,
+      transparent calc((var(--sv-row-h, 34px) - 10px) / 2),
+      var(--sg-skeleton, color-mix(in srgb, currentColor 9%, transparent)) calc((var(--sv-row-h, 34px) - 10px) / 2),
+      var(--sg-skeleton, color-mix(in srgb, currentColor 9%, transparent)) calc((var(--sv-row-h, 34px) + 10px) / 2),
+      transparent calc((var(--sv-row-h, 34px) + 10px) / 2),
+      transparent var(--sv-row-h, 34px)
+    );
+    background-size: 62% var(--sv-row-h, 34px);
+    background-repeat: repeat-y;
+    background-position: 12px 0;
+  }
   :global(.sv-ddl__opt.is-active) { background: var(--sg-row-hover-bg, #f1f5f9); }
   :global(.sv-ddl__opt.is-selected) { color: var(--sg-accent, #2563eb); font-weight: 600; }
   :global(.sv-ddl__opt.is-disabled) { opacity: 0.4; cursor: not-allowed; }

package/src/SvField.svelte

@@ -26,6 +26,8 @@
     dir,
     /** Stretch the field (and its control) to the container width. */
     block = false,
+    /** Busy state - shows a small spinner beside the label. */
+    loading = false,
     children,
   }: {
     id?: string
@@ -35,6 +37,7 @@
     required?: boolean
     dir?: EditorDir
     block?: boolean
+    loading?: boolean
     children: Snippet
   } = $props()
 
@@ -43,10 +46,15 @@
 </script>
 
 <div class="sv-field" class:sv-field--block={block} dir={resolvedDir}>
-  {#if label}
-    <label class="sv-field__label" for={id}>
-      {label}{#if required}<span class="sv-field__req" aria-hidden="true">*</span>{/if}
-    </label>
+  {#if label || loading}
+    <span class="sv-field__labelrow">
+      {#if label}
+        <label class="sv-field__label" for={id}>
+          {label}{#if required}<span class="sv-field__req" aria-hidden="true">*</span>{/if}
+        </label>
+      {/if}
+      {#if loading}<span class="sv-field__spinner" role="status" aria-label="Loading"></span>{/if}
+    </span>
   {/if}
   {@render children()}
   {#if error}
@@ -64,12 +72,21 @@
     text-align: start;
   }
   .sv-field--block { display: flex; width: 100%; }
+  .sv-field__labelrow { display: inline-flex; align-items: center; gap: 6px; }
   .sv-field__label {
     font-size: 12.5px;
     font-weight: 550;
     color: var(--sg-fg, #0f172a);
     line-height: 1.3;
   }
+  .sv-field__spinner {
+    width: 12px; height: 12px; flex: none; border-radius: 50%;
+    border: 2px solid color-mix(in srgb, var(--sg-accent, #2563eb) 30%, transparent);
+    border-top-color: var(--sg-accent, #2563eb);
+    animation: sv-field-spin 0.6s linear infinite;
+  }
+  @keyframes sv-field-spin { to { transform: rotate(360deg); } }
+  @media (prefers-reduced-motion: reduce) { .sv-field__spinner { animation: none; } }
   .sv-field__req { color: var(--sg-danger, #dc2626); margin-inline-start: 2px; }
   .sv-field__hint {
     font-size: 11.5px;

package/src/SvForm.svelte

@@ -1,31 +1,16 @@
 <script lang="ts" module>
-  import type { Validator } from './validators'
-
-  export type FormFieldType =
-    | 'text' | 'email' | 'tel' | 'textarea' | 'number' | 'password'
-    | 'select' | 'checkbox' | 'switch' | 'date' | 'color' | 'rating'
-
-  export type FormField = {
-    name: string
-    label: string
-    type?: FormFieldType
-    required?: boolean
-    placeholder?: string
-    options?: Array<{ value: string | number; label: string }>
-    /** Declarative validation rules (see `rules` - email/pattern/min/compare...). */
-    rules?: ReadonlyArray<Validator>
-    /** Return an error message, or null/undefined when valid. */
-    validate?: (value: any, values: Record<string, any>) => string | null | undefined
-    /** Span full width in the grid. */
-    full?: boolean
-  }
+  // FormField/FormFieldType live in a plain `.ts` (breaks a Vite dev import
+  // cycle); re-exported so `import { type FormField } from './SvForm.svelte'`
+  // sites keep working.
+  export type { FormField, FormFieldType, FormSection, FormEntry } from './form-field'
 </script>
 
 <script lang="ts">
   /**
    * SvForm - a schema-driven form that renders the SvGrid UI-kit controls with
-   * labels, required + custom validation, and a submit handler. Parity: Smart
-   * `smart-form`. Emits `onSubmit(values)` only when valid; `onChange` on edits.
+   * labels, required + custom validation, and a submit handler. The schema may be
+   * a flat `FormField[]` or mix in titled `FormSection`s; with `stepper` the
+   * sections become a validated wizard. Emits `onSubmit(values)` only when valid.
    */
   import SvNumberInput from './SvNumberInput.svelte'
   import SvPasswordInput from './SvPasswordInput.svelte'
@@ -36,105 +21,211 @@
   import SvColorInput from './SvColorInput.svelte'
   import SvRating from './SvRating.svelte'
   import SvButton from './SvButton.svelte'
-  import { runRules } from './validators'
+  import SvStepper from './SvStepper.svelte'
+  import { isFormSection, type FormField, type FormEntry, type FormSection } from './form-field'
+  import { createForm } from './createForm.svelte'
 
   type Props = {
-    fields: ReadonlyArray<FormField>
+    fields: ReadonlyArray<FormEntry>
     initial?: Record<string, any>
-    onSubmit?: (values: Record<string, any>) => void
+    /** Called with the visible-field values on a valid submit. May be async -
+     *  the Submit button shows a loading state until it settles. */
+    onSubmit?: (values: Record<string, any>) => void | Promise<void>
     onChange?: (values: Record<string, any>) => void
+    /** When set, a secondary Cancel button renders next to Submit. */
+    onCancel?: () => void
     submitLabel?: string
-    /** Columns in the responsive field grid. */
+    cancelLabel?: string
+    /** Show a Reset button that restores the initial values. */
+    showReset?: boolean
+    resetLabel?: string
+    /** Render titled sections as a validated multi-step wizard (requires sections). */
+    stepper?: boolean
+    /** Columns in the responsive field grid (a section can override its own). */
     columns?: number
     disabled?: boolean
   }
 
-  let { fields, initial = {}, onSubmit, onChange, submitLabel = 'Submit', columns = 1, disabled = false }: Props = $props()
+  let {
+    fields, initial = {}, onSubmit, onChange, onCancel,
+    submitLabel = 'Submit', cancelLabel = 'Cancel', showReset = false, resetLabel = 'Reset',
+    stepper = false, columns = 1, disabled = false,
+  }: Props = $props()
 
-  let values = $state<Record<string, any>>({})
-  let errors = $state<Record<string, string>>({})
-  let touched = $state<Record<string, boolean>>({})
-  let seededForm = false
-  $effect(() => { if (!seededForm) { seededForm = true; values = { ...initial } } })
+  const form = createForm({ fields: () => fields, initial, onSubmit, onChange })
+  const submit = (e: Event) => { e.preventDefault(); form.submit() }
+  const dateVal = (v: any): Date | null => (v instanceof Date ? v : v ? new Date(v) : null)
 
-  function setValue(name: string, v: any) {
-    values = { ...values, [name]: v }
-    onChange?.(values)
-    if (touched[name]) validateField(name)
-  }
+  const sections = $derived(fields.filter(isFormSection) as FormSection[])
+  const wizard = $derived(stepper && sections.length > 0)
+  const stepItems = $derived(sections.map((s) => ({ label: s.section, description: s.description })))
 
-  function validateField(name: string): boolean {
-    const field = fields.find((f) => f.name === name)
-    if (!field) return true
-    const v = values[name]
-    let err: string | null | undefined = null
-    if (field.required && (v == null || v === '' || (Array.isArray(v) && !v.length))) err = `${field.label} is required`
-    if (!err && field.rules) err = runRules(v, field.rules, values)
-    if (!err && field.validate) err = field.validate(v, values)
-    const next = { ...errors }
-    if (err) next[name] = err
-    else delete next[name]
-    errors = next
-    return !err
+  let step = $state(0)
+  async function next() {
+    const s = sections[step]
+    if (!s) return
+    const ok = await form.validateFields(s.fields.map((f) => f.name))
+    if (ok && step < sections.length - 1) step += 1
   }
+  const back = () => { if (step > 0) step -= 1 }
 
-  function submit(e: Event) {
-    e.preventDefault()
-    let ok = true
-    const t: Record<string, boolean> = {}
-    for (const f of fields) { t[f.name] = true; if (!validateField(f.name)) ok = false }
-    touched = t
-    if (ok) onSubmit?.({ ...values })
+  // Shared shape passed to the `control` snippet so top-level fields and array
+  // item fields render the same set of controls without duplication.
+  type ControlOpts = {
+    id: string
+    type: string
+    label: string
+    value: any
+    onChange: (v: any) => void
+    onBlur?: () => void
+    disabled: boolean
+    placeholder?: string
+    options?: ReadonlyArray<{ value: string | number; label: string; color?: string }>
   }
-
-  const dateVal = (v: any): Date | null => (v instanceof Date ? v : v ? new Date(v) : null)
 </script>
 
-<form class="sv-form" style:--cols={columns} onsubmit={submit} novalidate>
-  <div class="sv-form__grid">
-    {#each fields as field (field.name)}
-      {@const type = field.type ?? 'text'}
-      <div class="sv-form__field" class:is-full={field.full || columns === 1} class:has-error={errors[field.name]}>
+{#snippet control(o: ControlOpts)}
+  {#if o.type === 'textarea'}
+    <textarea id={o.id} class="sv-form__control sv-form__textarea" rows="3" disabled={o.disabled} placeholder={o.placeholder} value={o.value ?? ''} oninput={(e) => o.onChange(e.currentTarget.value)} onblur={o.onBlur}></textarea>
+  {:else if o.type === 'number'}
+    <SvNumberInput value={o.value ?? null} disabled={o.disabled} onChange={o.onChange} />
+  {:else if o.type === 'password'}
+    <SvPasswordInput value={o.value ?? ''} disabled={o.disabled} onChange={o.onChange} />
+  {:else if o.type === 'select'}
+    <SvDropDownList options={o.options ?? []} value={o.value ?? null} disabled={o.disabled} placeholder={o.placeholder} onChange={o.onChange} />
+  {:else if o.type === 'checkbox'}
+    <SvCheckBox checked={!!o.value} disabled={o.disabled} onChange={o.onChange}>{o.label}</SvCheckBox>
+  {:else if o.type === 'switch'}
+    <div class="sv-form__inline"><SvSwitchButton checked={!!o.value} disabled={o.disabled} onChange={o.onChange} ariaLabel={o.label} /><span>{o.label}</span></div>
+  {:else if o.type === 'date'}
+    <SvDateTimePicker value={dateVal(o.value)} dropDownDisplayMode="calendar" formatString="yyyy-MM-dd" disabled={o.disabled} onChange={o.onChange} />
+  {:else if o.type === 'color'}
+    <SvColorInput value={o.value ?? '#3b82f6'} disabled={o.disabled} onChange={o.onChange} />
+  {:else if o.type === 'rating'}
+    <SvRating value={o.value ?? 0} disabled={o.disabled} onChange={o.onChange} />
+  {:else}
+    <input id={o.id} class="sv-form__control" type={o.type} disabled={o.disabled} placeholder={o.placeholder} value={o.value ?? ''} oninput={(e) => o.onChange(e.currentTarget.value)} onblur={o.onBlur} />
+  {/if}
+{/snippet}
+
+{#snippet renderItemField(arrayName: string, i: number, itf: FormField)}
+  {@const type = itf.type ?? 'text'}
+  {@const id = `f-${arrayName}-${i}-${itf.name}`}
+  {@const err = form.itemError(arrayName, i, itf.name)}
+  <div class="sv-form__field" class:has-error={err}>
+    {#if type !== 'checkbox' && type !== 'switch'}
+      <label class="sv-form__label" for={id}>{itf.label}{#if itf.required}<span class="sv-form__req" aria-hidden="true"> *</span>{/if}</label>
+    {/if}
+    {@render control({ id, type, label: itf.label, value: form.itemValue(arrayName, i, itf.name), onChange: (v) => form.setItemValue(arrayName, i, itf.name, v), onBlur: () => form.handleItemBlur(arrayName, i, itf.name), disabled, placeholder: itf.placeholder, options: itf.options })}
+    {#if err}<span class="sv-form__error" role="alert">{err}</span>{/if}
+  </div>
+{/snippet}
+
+{#snippet renderArray(field: FormField)}
+  <div class="sv-form__field is-full sv-form__array" class:has-error={form.error(field.name)}>
+    <label class="sv-form__label">{field.label}{#if field.required}<span class="sv-form__req" aria-hidden="true"> *</span>{/if}</label>
+    {#each form.arrayItems(field.name) as _item, i (i)}
+      <div class="sv-form__arow">
+        <div class="sv-form__grid" style:--cols={field.itemFields?.length ?? 1}>
+          {#each field.itemFields ?? [] as itf (itf.name)}{@render renderItemField(field.name, i, itf)}{/each}
+        </div>
+        <button type="button" class="sv-form__aremove" disabled={disabled} onclick={() => form.removeItem(field.name, i)} aria-label="Remove item">&times;</button>
+      </div>
+    {/each}
+    <div><SvButton type="button" variant="outline" size="sm" disabled={disabled} onclick={() => form.addItem(field.name)}>{field.addLabel ?? '+ Add'}</SvButton></div>
+    {#if form.error(field.name)}<span class="sv-form__error" role="alert">{form.error(field.name)}</span>{/if}
+  </div>
+{/snippet}
+
+{#snippet renderField(field: FormField, cols: number)}
+  {#if form.isVisible(field.name)}
+    {@const type = field.type ?? 'text'}
+    {#if type === 'array'}
+      {@render renderArray(field)}
+    {:else}
+      {@const fieldDisabled = disabled || form.isDisabled(field.name)}
+      <div class="sv-form__field" class:is-full={field.full || cols === 1} class:has-error={form.error(field.name)}>
         {#if type !== 'checkbox' && type !== 'switch'}
           <label class="sv-form__label" for={`f-${field.name}`}>
             {field.label}{#if field.required}<span class="sv-form__req" aria-hidden="true"> *</span>{/if}
           </label>
         {/if}
-
-        {#if type === 'textarea'}
-          <textarea id={`f-${field.name}`} class="sv-form__control sv-form__textarea" rows="3" {disabled} placeholder={field.placeholder} value={values[field.name] ?? ''} oninput={(e) => setValue(field.name, e.currentTarget.value)} onblur={() => { touched[field.name] = true; validateField(field.name) }}></textarea>
-        {:else if type === 'number'}
-          <SvNumberInput value={values[field.name] ?? null} {disabled} onChange={(v) => setValue(field.name, v)} />
-        {:else if type === 'password'}
-          <SvPasswordInput value={values[field.name] ?? ''} {disabled} onChange={(v) => setValue(field.name, v)} />
-        {:else if type === 'select'}
-          <SvDropDownList options={field.options ?? []} value={values[field.name] ?? null} {disabled} placeholder={field.placeholder} onChange={(v) => setValue(field.name, v)} />
-        {:else if type === 'checkbox'}
-          <SvCheckBox checked={!!values[field.name]} {disabled} onChange={(v) => setValue(field.name, v)}>{field.label}</SvCheckBox>
-        {:else if type === 'switch'}
-          <div class="sv-form__inline"><SvSwitchButton checked={!!values[field.name]} {disabled} onChange={(v) => setValue(field.name, v)} ariaLabel={field.label} /><span>{field.label}</span></div>
-        {:else if type === 'date'}
-          <SvDateTimePicker value={dateVal(values[field.name])} dropDownDisplayMode="calendar" formatString="yyyy-MM-dd" {disabled} onChange={(v) => setValue(field.name, v)} />
-        {:else if type === 'color'}
-          <SvColorInput value={values[field.name] ?? '#3b82f6'} {disabled} onChange={(v) => setValue(field.name, v)} />
-        {:else if type === 'rating'}
-          <SvRating value={values[field.name] ?? 0} {disabled} onChange={(v) => setValue(field.name, v)} />
-        {:else}
-          <input id={`f-${field.name}`} class="sv-form__control" type={type} {disabled} placeholder={field.placeholder} value={values[field.name] ?? ''} oninput={(e) => setValue(field.name, e.currentTarget.value)} onblur={() => { touched[field.name] = true; validateField(field.name) }} />
+        {@render control({ id: `f-${field.name}`, type, label: field.label, value: form.value(field.name), onChange: (v) => form.setValue(field.name, v), onBlur: () => form.handleBlur(field.name), disabled: fieldDisabled, placeholder: field.placeholder, options: field.options })}
+        {#if form.error(field.name)}
+          <span class="sv-form__error" role="alert">{form.error(field.name)}</span>
+        {:else if form.isValidating(field.name)}
+          <span class="sv-form__checking" role="status"><span class="sv-form__spinner" aria-hidden="true"></span>Checking…</span>
         {/if}
-
-        {#if errors[field.name]}<span class="sv-form__error" role="alert">{errors[field.name]}</span>{/if}
       </div>
-    {/each}
+    {/if}
+  {/if}
+{/snippet}
+
+{#snippet grid(flds: ReadonlyArray<FormField>, cols: number)}
+  <div class="sv-form__grid" style:--cols={cols}>
+    {#each flds as field (field.name)}{@render renderField(field, cols)}{/each}
   </div>
+{/snippet}
+
+{#snippet actions()}
   <div class="sv-form__actions">
-    <SvButton type="submit" {disabled}>{submitLabel}</SvButton>
+    {#if showReset}
+      <SvButton type="button" variant="ghost" disabled={disabled || form.submitting} onclick={() => form.reset()}>{resetLabel}</SvButton>
+    {/if}
+    {#if onCancel}
+      <SvButton type="button" variant="secondary" disabled={disabled || form.submitting} onclick={onCancel}>{cancelLabel}</SvButton>
+    {/if}
+    <SvButton type="submit" loading={form.submitting} disabled={disabled || form.submitting}>{submitLabel}</SvButton>
   </div>
+{/snippet}
+
+<form class="sv-form" onsubmit={submit} novalidate>
+  {#if wizard}
+    {@const s = sections[Math.min(step, sections.length - 1)]!}
+    <SvStepper steps={stepItems} current={step} onChange={(n) => (step = n)} linear />
+    <fieldset class="sv-form__section">
+      {#if s.description}<p class="sv-form__section-desc">{s.description}</p>{/if}
+      {@render grid(s.fields, s.columns ?? columns)}
+    </fieldset>
+    <div class="sv-form__actions">
+      {#if step > 0}
+        <SvButton type="button" variant="secondary" disabled={form.submitting} onclick={back}>Back</SvButton>
+      {/if}
+      <span class="sv-form__spacer"></span>
+      {#if step < sections.length - 1}
+        <SvButton type="button" disabled={form.submitting} onclick={next}>Next</SvButton>
+      {:else}
+        {#if showReset}
+          <SvButton type="button" variant="ghost" disabled={disabled || form.submitting} onclick={() => { form.reset(); step = 0 }}>{resetLabel}</SvButton>
+        {/if}
+        <SvButton type="submit" loading={form.submitting} disabled={disabled || form.submitting}>{submitLabel}</SvButton>
+      {/if}
+    </div>
+  {:else if sections.length > 0}
+    {#each fields as entry (isFormSection(entry) ? entry.section : entry.name)}
+      {#if isFormSection(entry)}
+        <fieldset class="sv-form__section">
+          <legend class="sv-form__section-title">{entry.section}</legend>
+          {#if entry.description}<p class="sv-form__section-desc">{entry.description}</p>{/if}
+          {@render grid(entry.fields, entry.columns ?? columns)}
+        </fieldset>
+      {:else}
+        {@render grid([entry], columns)}
+      {/if}
+    {/each}
+    {@render actions()}
+  {:else}
+    {@render grid(fields as ReadonlyArray<FormField>, columns)}
+    {@render actions()}
+  {/if}
 </form>
 
 <style>
-  .sv-form { --_accent: var(--sg-accent, #2563eb); width: 100%; }
+  .sv-form { --_accent: var(--sg-accent, #2563eb); width: 100%; display: flex; flex-direction: column; gap: 16px; }
   .sv-form__grid { display: grid; grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr)); gap: 14px 18px; }
+  .sv-form__section { border: 1px solid var(--sg-border, #e2e8f0); border-radius: 10px; padding: 16px; margin: 0; min-inline-size: 0; }
+  .sv-form__section-title { font-size: 13px; font-weight: 700; color: var(--sg-fg, #0f172a); padding: 0 4px; }
+  .sv-form__section-desc { margin: 0 0 12px; font-size: 12px; color: var(--sg-muted, #64748b); }
   .sv-form__field { display: flex; flex-direction: column; gap: 5px; }
   .sv-form__field.is-full { grid-column: 1 / -1; }
   .sv-form__label { font-size: 12.5px; font-weight: 600; color: var(--sg-fg, #0f172a); }
@@ -149,5 +240,24 @@
   .sv-form__field.has-error .sv-form__control { border-color: var(--sg-danger, #dc2626); }
   .sv-form__inline { display: flex; align-items: center; gap: 8px; font-size: 13px; }
   .sv-form__error { font-size: 11.5px; color: var(--sg-danger, #dc2626); }
-  .sv-form__actions { margin-top: 16px; }
+  .sv-form__checking { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--sg-muted, #64748b); }
+  .sv-form__spinner {
+    width: 11px; height: 11px; border-radius: 50%;
+    border: 2px solid color-mix(in srgb, var(--_accent) 30%, transparent);
+    border-top-color: var(--_accent); animation: sv-form-spin 0.6s linear infinite;
+  }
+  @keyframes sv-form-spin { to { transform: rotate(360deg); } }
+  @media (prefers-reduced-motion: reduce) { .sv-form__spinner { animation: none; } }
+  .sv-form__actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
+  .sv-form__spacer { flex: 1; }
+  .sv-form__array { gap: 8px; }
+  .sv-form__arow { display: flex; align-items: flex-start; gap: 8px; }
+  .sv-form__arow > .sv-form__grid { flex: 1; padding: 10px; border: 1px solid var(--sg-border, #e2e8f0); border-radius: 8px; }
+  .sv-form__aremove {
+    flex: none; width: 28px; height: 28px; margin-top: 10px; border-radius: 6px; cursor: pointer;
+    border: 1px solid var(--sg-border, #cbd5e1); background: var(--sg-input-bg, #fff);
+    color: var(--sg-muted, #64748b); font-size: 16px; line-height: 1;
+  }
+  .sv-form__aremove:hover:not(:disabled) { color: var(--sg-danger, #dc2626); border-color: var(--sg-danger, #dc2626); }
+  .sv-form__aremove:disabled { opacity: 0.5; cursor: default; }
 </style>