basalt-ui 1.27.0 → 1.28.0

package/src/forms/form-layout.module.css

@@ -0,0 +1,145 @@
+/*
+ * The form layout law (law C1's THIRD home — the form row), in CSS.
+ *
+ * Every gap here is a density-tracking `--vx-space-*` token, so `createBasaltTheme({ density })`
+ * moves a form the same way it moves a settings page. The two settings tokens are reused
+ * deliberately rather than forked: a form row and a `SettingsRow` are the same shape at the same
+ * rhythm, and a second pair of numbers is how the two drift apart.
+ *
+ * The `47.99375em` literal is the `sm` breakpoint (law C9 — the responsive swap is CSS, never a JS
+ * media query). A `@media` condition cannot read a custom property, so the number is written.
+ */
+
+/* ── FormSection ─────────────────────────────────────────────────────────────────────────────── */
+
+.section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--vx-space-stack-sm);
+}
+
+.sectionBody {
+  display: flex;
+  flex-direction: column;
+  gap: var(--vx-space-stack-md);
+}
+
+/* ── FormRow ─────────────────────────────────────────────────────────────────────────────────── */
+
+/*
+ * Label left, control right. The control column is the wider one: a label is a phrase, a control is
+ * an input that has to hold real content. `align-items: start` so a two-line label does not centre
+ * itself against a one-line input.
+ */
+.row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
+  align-items: start;
+  gap: var(--vx-space-settings-row-gap);
+}
+
+.rowLabel {
+  display: flex;
+  flex-direction: column;
+  gap: var(--vx-space-stack-xs);
+  min-inline-size: 0;
+}
+
+.label {
+  font-size: var(--vx-text-md);
+  color: var(--vx-ink);
+}
+
+.hint {
+  font-size: var(--vx-text-sm);
+  color: var(--vx-muted);
+}
+
+.required {
+  color: var(--vx-status-bad);
+  margin-inline-start: var(--vx-space-stack-xs);
+}
+
+/*
+ * The control cell is a `fieldset` — see `form-state.tsx` for why. Every one of these five
+ * declarations is undoing a UA default (border, padding, margin, min-inline-size: min-content),
+ * not styling: a fieldset that keeps them draws a box around every row and refuses to shrink.
+ */
+.control {
+  display: flex;
+  flex-direction: column;
+  gap: var(--vx-space-stack-xs);
+  min-inline-size: 0;
+  border: 0;
+  margin: 0;
+  padding: 0;
+}
+
+.error {
+  font-size: var(--vx-text-sm);
+  color: var(--vx-status-bad);
+}
+
+/* The phone twin: the control needs the full width, so the label goes above it. */
+@media (max-width: 47.99375em) {
+  .row {
+    grid-template-columns: minmax(0, 1fr);
+    gap: var(--vx-space-stack-xs);
+  }
+}
+
+/* ── FormGroup ───────────────────────────────────────────────────────────────────────────────── */
+
+/* Same UA reset as `.control`, same reason. */
+.group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--vx-space-stack-xs);
+  min-inline-size: 0;
+  border: 0;
+  margin: 0;
+  padding: 0;
+}
+
+/*
+ * A `<legend>` is absolutely positioned into the fieldset's border by the UA. With no border to sit
+ * in, `float: left` + `width: 100%` is the one portable way to put it back in normal flow.
+ */
+.legend {
+  float: left;
+  width: 100%;
+  padding: 0;
+  font-size: var(--vx-text-md);
+  color: var(--vx-ink);
+}
+
+.groupControls {
+  display: flex;
+  clear: both;
+}
+
+.groupControls[data-direction='column'] {
+  flex-direction: column;
+  gap: var(--vx-space-stack-xs);
+}
+
+.groupControls[data-direction='row'] {
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: var(--vx-space-control-gap);
+}
+
+/* ── FormActions ─────────────────────────────────────────────────────────────────────────────── */
+
+/* Same UA reset again. Trailing-aligned: the confirming action is where the eye leaves the form. */
+.actions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  align-items: center;
+  gap: var(--vx-space-control-gap);
+  min-inline-size: 0;
+  border: 0;
+  margin: 0;
+  padding: 0;
+}

package/src/forms/form-layout.module.css.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Typed CSS-module declaration (the S4 CSS-modules path). Named string props — not an index
+ * signature — so dot access stays verbatim under the package's strict flags.
+ */
+declare const classes: {
+  readonly section: string
+  readonly sectionBody: string
+  readonly row: string
+  readonly rowLabel: string
+  readonly label: string
+  readonly hint: string
+  readonly required: string
+  readonly control: string
+  readonly error: string
+  readonly group: string
+  readonly legend: string
+  readonly groupControls: string
+  readonly actions: string
+}
+export default classes

package/src/forms/form-layout.tsx

@@ -0,0 +1,305 @@
+/**
+ * ./forms — the form layout primitives: `FormSection`, `FormRow`, `FormGroup`, `FormActions`.
+ * Mantine-coupled. Optional peer: @mantine/form (these four need none of it — they are layout).
+ *
+ * The gap they close (audit B #5 / §4): `./forms` shipped no layout at all, so the only row
+ * primitive in the package was `SettingsRow` over in `./dashboard` — which is the SETTINGS-page
+ * variant of the same shape, not the form one. Every consumer form therefore hand-rolled its own
+ * label/control geometry, and each one picked its own breakpoint behaviour.
+ *
+ * **`FormRow` IS law C1's third home, the form row** (`docs/CONTROLS-SPEC.md` §1). Like
+ * `SettingsRow` it keeps Mantine's `md` size tier and mounts no `CtlSlot`: a control bound to a
+ * field is read and typed into, not a 30px chrome affordance, and its own `size` prop stays
+ * load-bearing. `SettingsRow` is not deprecated and is not duplicated here — reach for it on a
+ * settings page (a stack of divider-separated rows inside a `SettingsSection` card), and for
+ * `FormRow` inside a `<form>` with validation, hints and errors.
+ *
+ * Disabled propagation is native `<fieldset disabled>` driven by `FormStateProvider` — see
+ * `form-state.tsx` for why that rather than `cloneElement`.
+ */
+import { VisuallyHidden } from '@mantine/core'
+import type { ReactNode } from 'react'
+import { cx } from '../common/props'
+import type { BasaltProps, SlotStylesProps } from '../common/props'
+import { assertRequiredProps } from '../common/validate'
+import { BarActionSlot } from '../controls/actions'
+import type { SlotActions } from '../controls/actions'
+import { WidgetHeader } from '../widget-header'
+import type { WidgetHeaderTitleProps } from '../widget-header'
+import { useFormState } from './form-state'
+import classes from './form-layout.module.css'
+
+// ── the two fragments FormRow and FormGroup both paint ────────────────────────
+
+/**
+ * The required marker: an accent `*` for sighted readers, `(required)` in text for assistive tech.
+ *
+ * Extracted because `FormRow` (inside its `<label>`) and `FormGroup` (inside its `<legend>`) wrote
+ * it twice, and the WCAG 1.3.1 half is exactly the half a copy quietly loses — colour and a glyph
+ * are not a label, so a second site that keeps the `*` and drops the `VisuallyHidden` reads as
+ * correct and is not. Renders nothing when the field is not required, so a caller passes the flag
+ * straight through rather than branching around it.
+ */
+function RequiredMark({ required }: { required: boolean | undefined }) {
+  if (required !== true) return null
+  return (
+    <>
+      <span aria-hidden="true" className={classes.required}>
+        *
+      </span>
+      <VisuallyHidden>(required)</VisuallyHidden>
+    </>
+  )
+}
+
+/**
+ * The error line under a control region.
+ *
+ * The falsy test is the reason this is shared: `error` takes `form.errors[path]` verbatim, which is
+ * `undefined` on a clean field, `null` after a cleared error and `false` from a `cond && message`
+ * — three shapes, and a call site testing only one paints an empty red box on the other two.
+ */
+function FieldError({ error }: { error: ReactNode }) {
+  if (error === undefined || error === null || error === false) return null
+  return <span className={classes.error}>{error}</span>
+}
+
+// ── FormSection ───────────────────────────────────────────────────────────────
+
+/** The three boxes `FormSection` paints (`common/props.ts`). */
+export type FormSectionSlot = 'root' | 'header' | 'body'
+
+/**
+ * Composed from the named `WidgetHeaderTitleProps` slice, the same way `SettingsSection` is — so
+ * `icon` and `info` reach the header for free and the four composers cannot drift into four
+ * different title subsets (audit B #2). `value`/`delta` are deliberately not taken: a form section
+ * groups fields, it states no metric.
+ */
+export type FormSectionProps = BasaltProps &
+  SlotStylesProps<FormSectionSlot> &
+  WidgetHeaderTitleProps & {
+    /** The section body — typically a stack of `FormRow`s. */
+    children: ReactNode
+  }
+
+/**
+ * A titled grouping of form rows: a `WidgetHeader tier="section"` above a stack.
+ *
+ * **Not `Section`, and deliberately not a card.** `Section` is a collapsible, persistable page
+ * widget with its own surface; a form is usually already inside one, and nesting a second card per
+ * fieldset is the "two cards deep" a settings page reads as. This paints no background, no border
+ * and no shadow — only the heading and the rhythm.
+ *
+ * @example
+ * <FormSection title="Billing" subtitle="Where the invoice goes.">
+ *   <FormRow label="Company">
+ *     <TextInput key={fieldKey(form, 'company')} {...inputProps(form, 'company')} />
+ *   </FormRow>
+ *   <FormRow label="VAT ID">
+ *     <TextInput key={fieldKey(form, 'vat')} {...inputProps(form, 'vat')} />
+ *   </FormRow>
+ * </FormSection>
+ */
+export function FormSection(props: FormSectionProps) {
+  assertRequiredProps('FormSection', props, ['title'])
+  const { title, icon, subtitle, info, children, className, style, classNames } = props
+
+  return (
+    <section
+      className={cx(classes.section, classNames?.root, className)}
+      {...(style !== undefined && { style })}
+    >
+      <WidgetHeader
+        tier="section"
+        title={title}
+        {...(icon !== undefined && { icon })}
+        {...(subtitle !== undefined && { subtitle })}
+        {...(info !== undefined && { info })}
+        {...(classNames?.header !== undefined && { className: classNames.header })}
+      />
+      <div className={cx(classes.sectionBody, classNames?.body)}>{children}</div>
+    </section>
+  )
+}
+
+// ── FormRow ───────────────────────────────────────────────────────────────────
+
+/** The three boxes `FormRow` paints (`common/props.ts`). */
+export type FormRowSlot = 'root' | 'label' | 'control'
+
+export type FormRowProps = BasaltProps &
+  SlotStylesProps<FormRowSlot> & {
+    /** The field's label. Ink, `--vx-text-md` — the same weight `SettingsRow` gives its own. */
+    label: string
+    /** Muted line under the label: the rule, the unit, the example. Never the error. */
+    hint?: string
+    /**
+     * The field's error, rendered under the control. Falsy renders nothing. For a Mantine input
+     * wired through `inputProps(form, path)`, Mantine's own `Input.Wrapper` already renders
+     * `form.errors[path]` — passing it here too would render it twice. Reserve this prop for
+     * children that render no error of their own: a raw input, a custom control.
+     */
+    error?: ReactNode
+    /** Marks the field required: an accent `*` for sighted readers, `(required)` for assistive tech. */
+    required?: boolean
+    /**
+     * Associates the `<label>` with the control's id. Mantine generates one per input, so pass the
+     * SAME `id` to both. Without it the row's label is a caption, not a label — which is why a
+     * control carrying its OWN `label` prop should not also sit under a `FormRow` label.
+     */
+    htmlFor?: string
+    /** The control. Anything: a Mantine input, a segmented control, a consumer's own widget. */
+    children: ReactNode
+  }
+
+/**
+ * One labelled field: label left / control right on desktop, label above the control below `sm`.
+ * The swap is CSS (law C9) — no `useMediaQuery`, so it is correct in SSR markup and it costs no
+ * render.
+ *
+ * The control region is a `<fieldset>` that goes `disabled` whenever the enclosing
+ * `FormStateProvider` says the form is busy, which is the whole disabled-propagation story: no
+ * `disabled` prop to thread, no `cloneElement`, real `:disabled` styling from Mantine.
+ *
+ * @example
+ * // A Mantine input wired through inputProps already renders its own error via Input.Wrapper —
+ * // omit `error` here, or it renders twice.
+ * <FormRow label="Email" hint="We only use it for receipts." required>
+ *   <TextInput key={fieldKey(form, 'email')} {...inputProps(form, 'email')} />
+ * </FormRow>
+ *
+ * @example
+ * // A raw control renders no error of its own — pass it explicitly.
+ * <FormRow label="Email" required error={form.errors['email']}>
+ *   <input value={form.values.email} onChange={(e) => form.setFieldValue('email', e.target.value)} />
+ * </FormRow>
+ */
+export function FormRow(props: FormRowProps) {
+  // F-ERR-1: a missing `label` would otherwise render a nameless row and read as a CSS bug.
+  assertRequiredProps('FormRow', props, ['label'])
+  const { label, hint, error, required, htmlFor, children, className, style, classNames } = props
+  const { disabled } = useFormState()
+
+  return (
+    <div
+      className={cx(classes.row, classNames?.root, className)}
+      {...(style !== undefined && { style })}
+    >
+      <div className={cx(classes.rowLabel, classNames?.label)}>
+        <label className={classes.label} {...(htmlFor !== undefined && { htmlFor })}>
+          {label}
+          <RequiredMark required={required} />
+        </label>
+        {hint !== undefined && <span className={classes.hint}>{hint}</span>}
+      </div>
+      <fieldset className={cx(classes.control, classNames?.control)} disabled={disabled}>
+        {children}
+        <FieldError error={error} />
+      </fieldset>
+    </div>
+  )
+}
+
+// ── FormGroup ─────────────────────────────────────────────────────────────────
+
+export type FormGroupProps = BasaltProps & {
+  /** The group's label, rendered as the fieldset's `<legend>` — the accessible name of the cluster. */
+  label: string
+  /** Muted line under the legend. */
+  hint?: string
+  /** The group-level error, rendered under the controls. */
+  error?: ReactNode
+  /** Marks the group required — same two-channel treatment as `FormRow`. */
+  required?: boolean
+  /** `column` stacks the options; `row` lays them out inline and wraps. @default 'column' */
+  direction?: 'row' | 'column'
+  /** The cluster — checkboxes, radios, chips. */
+  children: ReactNode
+}
+
+/**
+ * A labelled cluster of related controls: a checkbox group, a radio group, a set of chips.
+ *
+ * **The label is ALWAYS above**, never beside — a `FormRow`'s side-by-side geometry breaks the
+ * moment the right column holds four stacked checkboxes rather than one input. That is the whole
+ * reason this is a second primitive and not a `FormRow` variant.
+ *
+ * It renders a real `<fieldset>` + `<legend>`, which is the correct grouping semantic for a set of
+ * inputs sharing one question — and, as with `FormRow`, is what makes the `FormStateProvider`
+ * disable propagate natively.
+ *
+ * @example
+ * <FormGroup label="Notify me about" direction="row">
+ *   <Checkbox key={fieldKey(form, 'onDeploy')} {...inputProps(form, 'onDeploy')} label="Deploys" />
+ *   <Checkbox key={fieldKey(form, 'onError')} {...inputProps(form, 'onError')} label="Errors" />
+ * </FormGroup>
+ */
+export function FormGroup(props: FormGroupProps) {
+  assertRequiredProps('FormGroup', props, ['label'])
+  const { label, hint, error, required, direction = 'column', children, className, style } = props
+  const { disabled } = useFormState()
+
+  return (
+    <fieldset
+      className={cx(classes.group, className)}
+      disabled={disabled}
+      {...(style !== undefined && { style })}
+    >
+      <legend className={classes.legend}>
+        {label}
+        <RequiredMark required={required} />
+      </legend>
+      {hint !== undefined && <span className={classes.hint}>{hint}</span>}
+      <div className={classes.groupControls} data-direction={direction}>
+        {children}
+      </div>
+      <FieldError error={error} />
+    </fieldset>
+  )
+}
+
+// ── FormActions ───────────────────────────────────────────────────────────────
+
+export type FormActionsProps = BasaltProps & {
+  /**
+   * The submit/cancel row, in either form law C15 accepts: typed `BarAction[]` DATA — which basalt
+   * projects, budgets and folds into a `More` menu past three — or an opaque `ReactNode` the caller
+   * drew itself. Rendered through the SAME `BarActionSlot` every other home uses, so a form's
+   * actions and a page bar's cannot look like two different vocabularies.
+   *
+   * A `BarAction` renders a `type="button"`, so a typed submit is `onClick: submit`; a native
+   * `<Button type="submit">` goes through the node arm.
+   */
+  actions: SlotActions
+}
+
+/**
+ * The row a form ends on. Trailing-aligned, wrapping, and `disabled` as a unit while the enclosing
+ * `FormStateProvider` reports a submit in flight — which is what stops the double-submit that
+ * a per-button `loading` prop only hides.
+ *
+ * @example
+ * <FormActions
+ *   actions={[
+ *     { key: 'cancel', label: 'Cancel', onClick: close },
+ *     { key: 'save', label: 'Save', onClick: submit },
+ *   ]}
+ * />
+ */
+export function FormActions(props: FormActionsProps) {
+  // No `assertRequiredProps` here, unlike its siblings: `actions` is a `ReactNode` on one arm and
+  // `null` is a legitimate one (`{canSave ? row : null}`). Throwing on it would fail the honest
+  // empty case, which `BarActionSlot` already renders as nothing.
+  const { actions, className, style } = props
+  const { disabled } = useFormState()
+
+  return (
+    <fieldset
+      className={cx(classes.actions, className)}
+      disabled={disabled}
+      {...(style !== undefined && { style })}
+    >
+      <BarActionSlot actions={actions} />
+    </fieldset>
+  )
+}

package/src/forms/form-state.tsx

@@ -0,0 +1,94 @@
+/**
+ * ./forms — FormStateProvider / useFormState: the one place a form says "busy", read by every
+ * layout primitive in this module.
+ *
+ * The gap this closes (audit B §4): `@mantine/form` has no disabled/readonly propagation, so
+ * "disable everything while the submit is in flight" had to be threaded to every single input by
+ * hand — and the one field that got forgotten is the one a user double-submits through.
+ *
+ * **The propagation mechanism is native `<fieldset disabled>`, not `cloneElement`.** `FormRow`,
+ * `FormGroup` and `FormActions` each render their control region as a `fieldset`, so the browser
+ * disables every descendant control — a Mantine `TextInput`, a raw `<button>`, a third-party
+ * date picker — with real `:disabled` styling and real assistive-tech semantics, and basalt never
+ * has to know what its children are. A custom control that is NOT a native form element reads
+ * `useFormState()` itself.
+ *
+ * Mantine-coupled only by neighbourhood: this file imports nothing but React.
+ *
+ * @example
+ * const { submit, isSubmitting } = useFormSubmit(form, save)
+ * <form onSubmit={submit}>
+ *   <FormStateProvider submitting={isSubmitting}>
+ *     <FormRow label="Name">
+ *       <TextInput key={fieldKey(form, 'name')} {...inputProps(form, 'name')} />
+ *     </FormRow>
+ *     <FormActions actions={[{ key: 'save', label: 'Save', onClick: submit }]} />
+ *   </FormStateProvider>
+ * </form>
+ */
+import { createContext, useContext, useMemo } from 'react'
+import type { ReactNode } from 'react'
+
+/**
+ * What a control in this subtree needs to know. Two fields on purpose:
+ *
+ * - `disabled` is the RESOLVED verdict — bind a control's `disabled` to it and nothing else. It is
+ *   already true while `submitting` is, so a call site never writes `disabled || submitting` and
+ *   never gets that `||` backwards.
+ * - `submitting` is the REASON, for a control that renders differently for it (a button showing a
+ *   loader) rather than merely inertly.
+ */
+export type FormState = {
+  readonly disabled: boolean
+  readonly submitting: boolean
+}
+
+const DEFAULT_FORM_STATE: FormState = { disabled: false, submitting: false }
+
+const FormStateContext = createContext<FormState>(DEFAULT_FORM_STATE)
+
+export type FormStateProviderProps = {
+  /** Disable every control below, for a reason of the caller's own (no permission, read-only view). */
+  disabled?: boolean
+  /** A submit is in flight — pair with `useFormSubmit`'s `isSubmitting`. Implies `disabled`. */
+  submitting?: boolean
+  children: ReactNode
+}
+
+/**
+ * Publishes the form's busy/disabled state to every layout primitive below it.
+ *
+ * **Nesting ORs, it never resets**: an inner `<FormStateProvider>` can disable a subsection of an
+ * enabled form, but cannot re-enable a subsection of a disabled one. A form that is submitting is
+ * submitting everywhere, and a provider that could unset that is a double-submit waiting for the
+ * one call site that used it.
+ */
+export function FormStateProvider({
+  disabled = false,
+  submitting = false,
+  children,
+}: FormStateProviderProps) {
+  const parent = useContext(FormStateContext)
+  const value = useMemo<FormState>(
+    () => ({
+      disabled: parent.disabled || disabled || submitting,
+      submitting: parent.submitting || submitting,
+    }),
+    [parent.disabled, parent.submitting, disabled, submitting],
+  )
+  return <FormStateContext.Provider value={value}>{children}</FormStateContext.Provider>
+}
+
+/**
+ * The form state a custom (non-native) control has to honour itself. Outside any provider it reads
+ * `{ disabled: false, submitting: false }` — a control is never disabled by accident of placement.
+ *
+ * @example
+ * function ColorSwatches() {
+ *   const { disabled } = useFormState()
+ *   return <div aria-disabled={disabled}>…</div>
+ * }
+ */
+export function useFormState(): FormState {
+  return useContext(FormStateContext)
+}

package/src/forms/index.ts

@@ -1,24 +1,55 @@
 /**
- * ./forms — Mantine form adapter battery.
- * Provides useBasaltForm, field, FormErrorSummary, and useFormDraft on top of @mantine/form.
- * Optional peer: @mantine/form ^9.3.0.
+ * ./forms — the Mantine form layer.
  *
- * Install with: bun add @mantine/form
+ * Subpath-ONLY, deliberately: the root barrel re-exports nothing from here (`src/index.ts`), so a
+ * consumer without `@mantine/form` installed never pulls an unresolvable import in by importing
+ * `basalt-ui`. Same reason `./charts` and `./tokens` stay off the root barrel, one optional peer
+ * over. Import everything below from `basalt-ui/forms`.
+ *
+ * Five pieces: the form (`useBasaltForm` + `inputProps`/`fieldKey`), the layout
+ * (`FormSection` / `FormRow` / `FormGroup` / `FormActions`), the submit lifecycle
+ * (`useFormSubmit` + `FormStateProvider`), the list field (`useFieldArray`) and the draft
+ * (`useFormDraft`).
+ *
+ * Optional peer: @mantine/form ^9.3.0 — install with: bun add @mantine/form
  */
 
 // ── useBasaltForm ─────────────────────────────────────────────────────────────
 export { useBasaltForm } from './create-form'
 export type { UseBasaltFormOptions } from './create-form'
 
-// ── field ─────────────────────────────────────────────────────────────────────
-export { field } from './field'
+// ── inputProps ────────────────────────────────────────────────────────────────
+// Two calls, never one object: `key` inside a spread is a React 19 warning. See field.ts.
+// `field` ships alongside as a @deprecated alias — see field.ts.
+export { inputProps, fieldKey, field } from './field'
+
+// ── layout — law C1's third home, the form row ────────────────────────────────
+export { FormSection, FormRow, FormGroup, FormActions } from './form-layout'
+export type {
+  FormSectionProps,
+  FormSectionSlot,
+  FormRowProps,
+  FormRowSlot,
+  FormGroupProps,
+  FormActionsProps,
+} from './form-layout'
+
+// ── submit lifecycle ──────────────────────────────────────────────────────────
+export { useFormSubmit, isFieldErrorEnvelope } from './use-form-submit'
+export type { FormFieldErrors, UseFormSubmitOptions, UseFormSubmitReturn } from './use-form-submit'
+export { FormStateProvider, useFormState } from './form-state'
+export type { FormState, FormStateProviderProps } from './form-state'
+
+// ── array fields ──────────────────────────────────────────────────────────────
+export { useFieldArray } from './use-field-array'
+export type { UseFieldArrayReturn } from './use-field-array'
 
 // ── FormErrorSummary ──────────────────────────────────────────────────────────
 export { FormErrorSummary } from './FormErrorSummary'
 export type { FormErrorSummaryProps } from './FormErrorSummary'
 
 // ── useFormDraft ──────────────────────────────────────────────────────────────
-export { useFormDraft } from './use-form-draft'
+export { useFormDraft, DEFAULT_AUTOSAVE_DEBOUNCE_MS } from './use-form-draft'
 export type { UseFormDraftOptions, UseFormDraftReturn } from './use-form-draft'
 
 // ── @mantine/form re-exports (convenience) ────────────────────────────────────