@businessdash/sdk 0.9.60

package/src/svelte/BiabForm.svelte

@@ -0,0 +1,1069 @@
+<!--
+  @businessdash/sdk/svelte — <BiabForm> drop-in (Svelte 5, runes).
+
+  Renders a BIAB form end-to-end from the headless core
+  (`createFormController` in `@businessdash/sdk/forms`). It is a faithful port of
+  the dashboard `FormPreview` renderer: per-type field rendering, the
+  condition_block / or_condition / input_group / flex_row tree walk,
+  multi-step ("consecutive") navigation + progress (bar | steps),
+  concurrent-reveal gating, and the schema's render settings
+  (animation, org icon). All markup uses the `biab-*` light-DOM class
+  convention so the consumer's CSS cascades — no shadow root.
+
+  Two data paths (consistent with the other framework bindings):
+
+    • client mode  — pass a `BiabClient` (prop or `setBiabClient` context).
+      The controller fetches the schema (when only `slug` is given) and
+      submits / uploads through the SDK directly. Only safe where the bearer
+      key never reaches the browser.
+
+    • schema + submitAction mode — pass a pre-fetched `schema` (SSR-loaded
+      via your server `BiabClient`) plus a `submitAction(payload, opts)` that
+      POSTs to your own endpoint (e.g. SvelteKit `/api/biab/forms/[slug]`).
+      The bearer key stays in `$lib/server`. This is the recommended
+      SvelteKit pattern and the one the starter wires up.
+-->
+<script lang="ts" module>
+	import type { BiabClient } from "../sdk.js";
+	import type {
+		FormCoreField,
+		FormSnapshot,
+		FormSubmitOptions,
+		FormSubmitResult,
+		FormSchema,
+	} from "../forms-core/index.js";
+
+	/** A successful submit result (`ok === true`). */
+	export type BiabFormSuccess = Extract<FormSubmitResult, { ok: true }>;
+	/** A failed submit result (`ok === false`). */
+	export type BiabFormFailure = Extract<FormSubmitResult, { ok: false }>;
+
+	/**
+	 * Re-key the working data (by field `id`) to the published output `key`,
+	 * then POST it to your own endpoint. Returning a {@link FormSubmitResult}
+	 * lets `<BiabForm>` surface inline server-side field errors; returning
+	 * void/anything else is treated as a generic success.
+	 */
+	export type BiabFormSubmitAction = (
+		payload: Record<string, unknown>,
+		options: FormSubmitOptions,
+	) => Promise<FormSubmitResult | void> | FormSubmitResult | void;
+
+	export interface BiabFormProps {
+		/** Form slug — required in client mode (or when `schema` lacks a slug). */
+		slug?: string;
+		/** Pre-fetched schema (SSR). When present, no client is needed to render. */
+		schema?: FormSchema;
+		/** SDK client. Falls back to `setBiabClient` context. Omit in schema+action mode. */
+		client?: BiabClient;
+		/**
+		 * Submit override. When provided, `<BiabForm>` validates locally, re-keys
+		 * the payload to output keys, then calls this instead of the SDK — the
+		 * server-safe SvelteKit path. Takes precedence over `client.forms.submit`.
+		 */
+		submitAction?: BiabFormSubmitAction;
+		/** Submit button label (final step). Default "Submit". */
+		submitLabel?: string;
+		/** Merged into every submit (e.g. `source`, `metadata`). */
+		submitOptions?: FormSubmitOptions;
+		/** Server-validates but stores nothing. */
+		dryRun?: boolean;
+		/** Fired after a successful submit. */
+		onSuccess?: (result: BiabFormSuccess) => void;
+		/** Fired after a failed submit. */
+		onError?: (result: BiabFormFailure) => void;
+		/** Convenience: fired with the re-keyed payload on a successful submit. */
+		onSubmit?: (payload: Record<string, unknown>) => void;
+		/** Extra class on the root `.biab-form`. (`className` alias also accepted.) */
+		class?: string;
+		/** React-style alias for `class`. */
+		className?: string;
+		/** Message shown after a successful submit (when the server gives none). */
+		successMessage?: string;
+		/**
+		 * Global HTML autofill switch. `false` emits `autocomplete="off"` on every
+		 * value-bearing input; omit (default) to infer a sensible token per field.
+		 */
+		autoComplete?: boolean;
+		/**
+		 * Per-field autofill overrides keyed by field id: a literal token,
+		 * `true` (infer), or `false` (off). Wins over `autoComplete` and any
+		 * schema-level token.
+		 */
+		fieldAutoComplete?: Record<string, string | boolean>;
+	}
+</script>
+
+<script lang="ts">
+	import { onDestroy, untrack } from "svelte";
+
+	import {
+		concurrentRevealCount,
+		createFormController,
+		evalCondition,
+		fetchIconNames,
+		filterIconNames,
+		iconUrl,
+		shouldSearchOptions,
+		toSubmissionPayload,
+	} from "../forms-core/index.js";
+	import {
+		type AutocompleteConfig,
+		resolveFieldAutocomplete,
+	} from "../forms-core/autocomplete.js";
+
+	import { formStore, getBiabClient } from "./context.js";
+
+	let {
+		slug,
+		schema,
+		client,
+		submitAction,
+		submitLabel = "Submit",
+		submitOptions,
+		dryRun = false,
+		onSuccess,
+		onError,
+		onSubmit,
+		class: klass,
+		className,
+		successMessage = "Thanks — your response was received.",
+		autoComplete,
+		fieldAutoComplete,
+	}: BiabFormProps = $props();
+
+	// HTML autofill config threaded to every value-bearing input. `enabled` only
+	// when the global switch is set; `overrides` only when per-field tokens exist
+	// — mirrors the React adapter so unset props fall through to inference.
+	const autocompleteConfig = $derived<AutocompleteConfig>({
+		...(autoComplete !== undefined ? { enabled: autoComplete } : {}),
+		...(fieldAutoComplete ? { overrides: fieldAutoComplete } : {}),
+	});
+
+	// The controller is built ONCE from the initial props (a form's identity —
+	// slug / schema / client — doesn't change mid-mount, and re-creating it would
+	// discard the visitor's in-progress input). `untrack` reads the init-time prop
+	// values without registering a reactive dependency, which also silences
+	// Svelte's `state_referenced_locally` hint for this deliberate one-time read.
+	const init = untrack(() => ({
+		client: client ?? getBiabClient(),
+		slug,
+		schema,
+		submitOptions: { ...submitOptions, ...(dryRun ? { dryRun: true } : {}) },
+	}));
+
+	/** True when an SDK client is available (gates SDK-driven file uploads). */
+	const hasClient = Boolean(init.client);
+
+	// ── Build the controller once. It owns ALL runtime state; we just render. ──
+	const controller = createFormController({
+		client: init.client,
+		slug: init.slug,
+		schema: init.schema,
+		submitOptions: init.submitOptions,
+		onSuccess: (result) => {
+			onSubmit?.(toSubmissionPayload(controller.snapshot().fields, controller.snapshot().values));
+			onSuccess?.(result);
+		},
+		onError: (result) => onError?.(result),
+	});
+
+	// Kick the load (fetches the schema in client mode, or adopts the SSR one).
+	void controller.load();
+	onDestroy(() => controller.destroy());
+
+	// The single reactive source of truth for the markup.
+	const snap = formStore(controller);
+
+	const rootClass = $derived(
+		["biab-form", klass, className].filter(Boolean).join(" "),
+	);
+
+	// ── Submit: route through `submitAction` (server-safe) or the SDK. ─────────
+	async function handleSubmit(): Promise<void> {
+		if (submitAction) {
+			// Local-validate first; the controller publishes errors + a failure result.
+			const missing = controller.validate();
+			if (missing.length > 0) return;
+			const s = controller.snapshot();
+			const payload = toSubmissionPayload(s.fields, s.values);
+			const opts: FormSubmitOptions = {
+				...submitOptions,
+				...(dryRun ? { dryRun: true } : {}),
+			};
+			try {
+				submittingViaAction = true;
+				const res = await submitAction(payload, opts);
+				submittingViaAction = false;
+				// A returned FormSubmitResult lets us mirror server-side field errors.
+				if (res && typeof res === "object" && "ok" in res) {
+					actionResult = res;
+					if (res.ok) {
+						onSubmit?.(payload);
+						onSuccess?.(res);
+					} else {
+						onError?.(res);
+					}
+					return;
+				}
+				// No structured result → treat as success.
+				const synthetic: BiabFormSuccess = {
+					ok: true,
+					status: 200,
+					submissionId: "",
+				} as BiabFormSuccess;
+				actionResult = synthetic;
+				onSubmit?.(payload);
+				onSuccess?.(synthetic);
+			} catch (err) {
+				submittingViaAction = false;
+				const failure: BiabFormFailure = {
+					ok: false,
+					status: 0,
+					reason: "network_error",
+					message:
+						err instanceof Error ? err.message : "The submission failed.",
+				} as BiabFormFailure;
+				actionResult = failure;
+				onError?.(failure);
+			}
+			return;
+		}
+		// SDK path: the controller validates + submits and notifies the store.
+		await controller.submit(dryRun ? { dryRun: true } : undefined);
+	}
+
+	// `submitAction` mode tracks its own submitting/result locally (the controller
+	// never makes the network call in that mode).
+	let submittingViaAction = $state(false);
+	let actionResult = $state<FormSubmitResult | null>(null);
+
+	const submitting = $derived($snap.submitting || submittingViaAction);
+	const submitted = $derived(
+		$snap.submitted || actionResult?.ok === true,
+	);
+	const submitError = $derived(
+		actionResult && !actionResult.ok
+			? actionResult.message
+			: $snap.result && !$snap.result.ok
+				? $snap.result.message
+				: null,
+	);
+
+	function onFieldInput(id: string, value: unknown): void {
+		controller.setValue(id, value);
+	}
+
+	// ── File uploads (SDK client mode only) ────────────────────────────────────
+	async function onFilePick(field: FormCoreField, files: FileList | null): Promise<void> {
+		if (!files || files.length === 0) return;
+		const max = Math.min(
+			field.fileConfig?.maxFiles ?? files.length,
+			files.length,
+		);
+		for (let i = 0; i < max; i++) {
+			const file = files[i];
+			if (!file) continue;
+			try {
+				await controller.uploadFile(field.id, file, { filename: file.name });
+			} catch (err) {
+				uploadError = err instanceof Error ? err.message : "Upload failed.";
+			}
+		}
+	}
+	let uploadError = $state<string | null>(null);
+
+	/** `image_input`: upload one image, then store its URL as the field's value —
+	 *  the submitted value is a plain URL string whichever source was used. */
+	async function onImagePick(
+		field: FormCoreField,
+		files: FileList | null,
+		maxSizeMb: number,
+	): Promise<void> {
+		const file = files?.[0];
+		if (!file) return;
+		if (file.size > maxSizeMb * 1024 * 1024) {
+			uploadError = `That image is over the ${maxSizeMb}MB limit.`;
+			return;
+		}
+		try {
+			const uploaded = await controller.uploadFile(field.id, file, {
+				filename: file.name,
+			});
+			const url = (uploaded as { url?: string } | undefined)?.url;
+			if (url) controller.setValue(field.id, url);
+		} catch (err) {
+			uploadError = err instanceof Error ? err.message : "Upload failed.";
+		}
+	}
+
+	// ── icon_select ───────────────────────────────────────────────────────────
+	// The value is an icon NAME. Art resolves against the platform's icon route
+	// rather than bundling an icon set, and the name list is fetched lazily (it's
+	// ~1,600 entries that change only when Lucide does). A curated
+	// `iconConfig.allowedIcons` skips the fetch entirely.
+	let iconQuery = $state("");
+	let iconIndex = $state<string[]>([]);
+	let iconIndexRequested = false;
+
+	function iconPool(field: FormCoreField): string[] {
+		const curated = field.iconConfig?.allowedIcons ?? [];
+		if (curated.length > 0) return curated;
+		if (!iconIndexRequested) {
+			iconIndexRequested = true;
+			// Resolves to [] on failure rather than throwing.
+			void fetchIconNames().then((names) => {
+				iconIndex = names;
+			});
+		}
+		return iconIndex;
+	}
+
+	let imageMode = $state<"upload" | "url">("upload");
+
+	// ── Render helpers (ported from FormPreview, framework-free) ───────────────
+
+	/** Stable CSS hook for a field (prefers output key, then label slug, then id). */
+	function fieldCssKey(f: FormCoreField): string {
+		const explicit =
+			(typeof f.outputKey === "string" && f.outputKey.trim()) ||
+			(typeof f.key === "string" && f.key.trim());
+		if (explicit) return explicit;
+		const lbl = typeof f.label === "string" ? f.label.trim() : "";
+		return lbl ? slugifyKey(lbl) : f.id;
+	}
+
+	function slugifyKey(raw: string): string {
+		const words = raw
+			.replace(/[^a-zA-Z0-9]+/g, " ")
+			.trim()
+			.split(/\s+/)
+			.filter(Boolean);
+		if (words.length === 0) return "";
+		const key = words
+			.map((w, i) =>
+				i === 0
+					? w.toLowerCase()
+					: w.charAt(0).toUpperCase() + w.slice(1).toLowerCase(),
+			)
+			.join("");
+		return /^[0-9]/.test(key) ? `_${key}` : key;
+	}
+
+	const LABELLESS = new Set(["title", "subtitle", "separator", "richtext"]);
+
+	/** tw-animate entrance classes for a step (directional for "slide"). */
+	function entranceClass(animation: string, forward: boolean): string {
+		switch (animation) {
+			case "fade":
+				return "animate-in fade-in duration-500";
+			case "scale":
+				return "animate-in fade-in zoom-in-95 duration-500";
+			case "slide":
+				return forward
+					? "animate-in fade-in slide-in-from-right-8 duration-500"
+					: "animate-in fade-in slide-in-from-left-8 duration-500";
+			default:
+				return "";
+		}
+	}
+
+	function timeOptions(stepMinutes: number): string[] {
+		const step = Math.max(stepMinutes, 1);
+		const opts: string[] = [];
+		for (let h = 0; h < 24; h++) {
+			for (let m = 0; m < 60; m += step) {
+				opts.push(`${String(h).padStart(2, "0")}:${String(m).padStart(2, "0")}`);
+			}
+		}
+		return opts;
+	}
+
+	function fmtTime(t: string, format: "12h" | "24h"): string {
+		if (format === "24h") return t;
+		const [hStr, mStr = "00"] = t.split(":");
+		const h = Number(hStr);
+		const ampm = h < 12 ? "AM" : "PM";
+		const h12 = h % 12 === 0 ? 12 : h % 12;
+		return `${h12}:${mStr} ${ampm}`;
+	}
+
+	function asObj(v: unknown): Record<string, unknown> {
+		return v && typeof v === "object" ? (v as Record<string, unknown>) : {};
+	}
+	function asStr(v: unknown): string {
+		return typeof v === "string" ? v : "";
+	}
+	function asNum(v: unknown, fallback: number): number {
+		return typeof v === "number" ? v : fallback;
+	}
+
+	/** Children of a `condition_block` whose rule passes; else `null`. */
+	function conditionChildren(
+		f: FormCoreField,
+		values: Record<string, unknown>,
+	): FormCoreField[] | null {
+		if (!evalCondition(f.conditionRule, values)) return null;
+		return (f.children ?? []) as FormCoreField[];
+	}
+
+	/** How many leading children of a concurrent group to reveal. */
+	function revealCountFor(
+		f: FormCoreField,
+		values: Record<string, unknown>,
+	): number {
+		const kids = (f.children ?? []) as FormCoreField[];
+		return f.concurrentReveal === true
+			? concurrentRevealCount(kids, values)
+			: kids.length;
+	}
+</script>
+
+{#snippet fieldInput(field: FormCoreField, snapshot: FormSnapshot)}
+	{@const value = snapshot.values[field.id]}
+	{@const ac = resolveFieldAutocomplete(field, autocompleteConfig)}
+	{@const acOff = ac === "off"}
+	{#if field.type === "title"}
+		<h2 class="biab-field__title">{field.label || "Untitled"}</h2>
+	{:else if field.type === "subtitle"}
+		<h3 class="biab-field__subtitle">{field.label || ""}</h3>
+	{:else if field.type === "separator"}
+		<hr class="biab-field__separator" />
+	{:else if field.type === "richtext"}
+		<!-- richtext is pre-sanitized server-side; rendered as-is. -->
+		<div class="biab-field__richtext">{@html field.content ?? ""}</div>
+	{:else if field.type === "image"}
+		{#if asStr(field.content)}
+			<img class="biab-field__image" src={asStr(field.content)} alt={field.label ?? ""} />
+		{/if}
+	{:else if field.type === "textarea"}
+		{@const taRows = (field.textareaConfig as { rows?: number } | undefined)?.rows ?? 4}
+		<textarea
+			class="biab-textarea biab-field__control"
+			rows={taRows}
+			placeholder={field.placeholder ?? ""}
+			autocomplete={ac ?? undefined}
+			value={asStr(value)}
+			oninput={(e) => onFieldInput(field.id, e.currentTarget.value)}
+		></textarea>
+	{:else if field.type === "select" && shouldSearchOptions((field.options ?? []).length, field.display)}
+		<!-- ComboBox card, or a list long enough that scrolling it is the worse
+		     default. `input list` + `datalist` is native typeahead: no JS, no
+		     styling opinion, which is the SDK's contract. -->
+		<input
+			class="biab-input biab-combobox biab-field__control"
+			type="text"
+			list={`biab-list-${field.id}`}
+			placeholder={field.placeholder || "Search…"}
+			value={asStr(value)}
+			oninput={(e) => onFieldInput(field.id, e.currentTarget.value)}
+		/>
+		<datalist id={`biab-list-${field.id}`}>
+			{#each field.options ?? [] as opt (opt)}
+				<option value={opt}></option>
+			{/each}
+		</datalist>
+	{:else if field.type === "select"}
+		<select
+			class="biab-select biab-field__control"
+			value={asStr(value)}
+			onchange={(e) => onFieldInput(field.id, e.currentTarget.value)}
+		>
+			<option value="">{field.placeholder || "Select…"}</option>
+			{#each field.options ?? [] as opt (opt)}
+				<option value={opt}>{opt}</option>
+			{/each}
+		</select>
+	{:else if field.type === "icon_select"}
+		<!-- The value is an icon NAME; art resolves against the platform's icon
+		     route, so no icon library ships in the SDK bundle. -->
+		{@const names = iconPool(field)}
+		<div class="biab-iconselect">
+			<input
+				class="biab-input biab-iconselect__search"
+				type="text"
+				placeholder={field.placeholder || "Search icons…"}
+				value={iconQuery}
+				oninput={(e) => (iconQuery = e.currentTarget.value)}
+			/>
+			{#if asStr(value)}
+				<span class="biab-iconselect__current">
+					<img src={iconUrl(asStr(value))} alt={asStr(value)} width="16" height="16" />
+					<button type="button" class="biab-iconselect__clear" onclick={() => onFieldInput(field.id, "")}>×</button>
+				</span>
+			{/if}
+			<div class="biab-iconselect__grid">
+				{#each filterIconNames(names, iconQuery) as name (name)}
+					<button
+						type="button"
+						class="biab-iconselect__item"
+						class:is-selected={asStr(value) === name}
+						title={name}
+						aria-label={name}
+						aria-pressed={asStr(value) === name}
+						onclick={() => onFieldInput(field.id, name)}
+					>
+						<img src={iconUrl(name)} alt="" width="16" height="16" />
+					</button>
+				{/each}
+			</div>
+		</div>
+	{:else if field.type === "image_input"}
+		<!-- One image, either source; the submitted value is a plain URL string. -->
+		{@const cfg = field.imageInputConfig ?? {}}
+		{@const sources = cfg.sources ?? "both"}
+		<div class="biab-imageinput">
+			{#if sources === "both"}
+				<div class="biab-imageinput__modes">
+					<button
+						type="button"
+						class="biab-imageinput__mode"
+						class:is-active={imageMode === "upload"}
+						aria-pressed={imageMode === "upload"}
+						onclick={() => (imageMode = "upload")}>Upload</button
+					>
+					<button
+						type="button"
+						class="biab-imageinput__mode"
+						class:is-active={imageMode === "url"}
+						aria-pressed={imageMode === "url"}
+						onclick={() => (imageMode = "url")}>Paste URL</button
+					>
+				</div>
+			{/if}
+			{#if imageMode === "upload" && sources !== "url" && hasClient}
+				<input
+					class="biab-input biab-imageinput__file"
+					type="file"
+					accept={(cfg.allowedTypes ?? ["image/*"]).join(",")}
+					onchange={(e) => onImagePick(field, e.currentTarget.files, cfg.maxSize ?? 5)}
+				/>
+			{:else}
+				<input
+					class="biab-input biab-imageinput__url"
+					type="url"
+					placeholder={field.placeholder || "https://example.com/image.png"}
+					value={asStr(value)}
+					oninput={(e) => onFieldInput(field.id, e.currentTarget.value)}
+				/>
+			{/if}
+			{#if cfg.showPreview !== false && asStr(value)}
+				<img class="biab-imageinput__preview" src={asStr(value)} alt="" />
+			{/if}
+		</div>
+	{:else if field.type === "radio"}
+		<div class="biab-field__radios">
+			{#each field.options ?? [] as opt (opt)}
+				<label class="biab-field__radio">
+					<input
+						type="radio"
+						name={field.id}
+						value={opt}
+						checked={asStr(value) === opt}
+						onchange={() => onFieldInput(field.id, opt)}
+					/>
+					<span>{opt}</span>
+				</label>
+			{/each}
+		</div>
+	{:else if field.type === "checkbox"}
+		{@const arr = Array.isArray(value) ? (value as string[]) : []}
+		<div class="biab-field__checks">
+			{#each field.options ?? [] as opt (opt)}
+				<label class="biab-field__check">
+					<input
+						type="checkbox"
+						checked={arr.includes(opt)}
+						onchange={(e) =>
+							onFieldInput(
+								field.id,
+								e.currentTarget.checked
+									? [...arr, opt]
+									: arr.filter((x) => x !== opt),
+							)}
+					/>
+					<span>{opt}</span>
+				</label>
+			{/each}
+		</div>
+	{:else if field.type === "boolean"}
+		<label class="biab-field__toggle">
+			<input
+				type="checkbox"
+				checked={value === true}
+				onchange={(e) => onFieldInput(field.id, e.currentTarget.checked)}
+			/>
+			<span>{field.placeholder || "Yes / No"}</span>
+		</label>
+	{:else if field.type === "date"}
+		<input
+			class="biab-input biab-field__control"
+			type="date"
+			value={asStr(value)}
+			onchange={(e) => onFieldInput(field.id, e.currentTarget.value)}
+		/>
+	{:else if field.type === "time_picker"}
+		{@const mode = field.timeConfig?.mode ?? "simple"}
+		{#if mode === "simple"}
+			<select
+				class="biab-select biab-field__control"
+				value={asStr(value)}
+				onchange={(e) => onFieldInput(field.id, e.currentTarget.value)}
+			>
+				<option value="">{field.placeholder || "Select time"}</option>
+				{#each timeOptions(field.timeConfig?.stepMinutes ?? 30) as o (o)}
+					<option value={o}>{fmtTime(o, field.timeConfig?.format ?? "12h")}</option>
+				{/each}
+			</select>
+		{:else if mode === "time_block"}
+			{@const v = asObj(value)}
+			<div class="biab-field__grid2">
+				<label class="biab-field__sub">
+					<span class="biab-field__sublabel">Start</span>
+					<input
+						class="biab-input"
+						type="time"
+						value={asStr(v.start)}
+						onchange={(e) =>
+							onFieldInput(field.id, { ...v, start: e.currentTarget.value })}
+					/>
+				</label>
+				<label class="biab-field__sub">
+					<span class="biab-field__sublabel">End</span>
+					<input
+						class="biab-input"
+						type="time"
+						value={asStr(v.end)}
+						onchange={(e) =>
+							onFieldInput(field.id, { ...v, end: e.currentTarget.value })}
+					/>
+				</label>
+			</div>
+		{:else}
+			{@const v = asObj(value)}
+			<div class="biab-field__grid2">
+				<label class="biab-field__sub">
+					<span class="biab-field__sublabel">Date</span>
+					<input
+						class="biab-input"
+						type="date"
+						value={asStr(v.date)}
+						onchange={(e) =>
+							onFieldInput(field.id, { ...v, date: e.currentTarget.value })}
+					/>
+				</label>
+				<label class="biab-field__sub">
+					<span class="biab-field__sublabel">Time</span>
+					<input
+						class="biab-input"
+						type="time"
+						value={asStr(v.time)}
+						onchange={(e) =>
+							onFieldInput(field.id, { ...v, time: e.currentTarget.value })}
+					/>
+				</label>
+			</div>
+		{/if}
+	{:else if field.type === "date_range"}
+		{@const v = asObj(value)}
+		<div class="biab-field__grid2">
+			<label class="biab-field__sub">
+				<span class="biab-field__sublabel">Start</span>
+				<input
+					class="biab-input"
+					type="date"
+					value={asStr(v.start)}
+					onchange={(e) =>
+						onFieldInput(field.id, { ...v, start: e.currentTarget.value })}
+				/>
+			</label>
+			<label class="biab-field__sub">
+				<span class="biab-field__sublabel">End</span>
+				<input
+					class="biab-input"
+					type="date"
+					value={asStr(v.end)}
+					onchange={(e) =>
+						onFieldInput(field.id, { ...v, end: e.currentTarget.value })}
+				/>
+			</label>
+		</div>
+	{:else if field.type === "slider"}
+		{@const min = field.sliderConfig?.min ?? 0}
+		{@const max = field.sliderConfig?.max ?? 100}
+		{@const step = field.sliderConfig?.step ?? 1}
+		{@const v = asNum(value, min)}
+		<div class="biab-field__slider">
+			<div class="biab-field__slider-meta">
+				<span>{min}</span><span>{v}</span><span>{max}</span>
+			</div>
+			<input
+				type="range"
+				{min}
+				{max}
+				{step}
+				value={v}
+				oninput={(e) => onFieldInput(field.id, Number(e.currentTarget.value))}
+			/>
+		</div>
+	{:else if field.type === "star_rating"}
+		{@const max = field.starRatingConfig?.maxStars ?? 5}
+		{@const v = asNum(value, 0)}
+		{@const stars = Array.from({ length: max }, (_unused, i) => i)}
+		<div class="biab-field__stars">
+			{#each stars as i (i)}
+				<button
+					type="button"
+					class="biab-field__star"
+					class:biab-field__star--on={i < v}
+					aria-label={`Rate ${i + 1}`}
+					onclick={() => onFieldInput(field.id, i + 1)}
+				>
+					★
+				</button>
+			{/each}
+		</div>
+	{:else if field.type === "happiness_rating"}
+		{@const v = asNum(value, -1)}
+		<div class="biab-field__happiness">
+			{#each ["😞", "😕", "😐", "🙂", "😄"] as emoji, i (emoji)}
+				<button
+					type="button"
+					class="biab-field__emoji"
+					class:biab-field__emoji--on={i === v}
+					onclick={() => onFieldInput(field.id, i)}
+				>
+					{emoji}
+				</button>
+			{/each}
+		</div>
+	{:else if field.type === "stepper"}
+		{@const v = asNum(value, 0)}
+		<div class="biab-field__stepper">
+			<button type="button" class="biab-btn biab-btn--ghost" onclick={() => onFieldInput(field.id, v - 1)}>−</button>
+			<span class="biab-field__stepper-value">{v}</span>
+			<button type="button" class="biab-btn biab-btn--ghost" onclick={() => onFieldInput(field.id, v + 1)}>+</button>
+		</div>
+	{:else if field.type === "address"}
+		{@const v = asObj(value)}
+		<div class="biab-field__address">
+			<label class="biab-field__sub">
+				<span class="biab-field__sublabel">Address Line 1</span>
+				<input class="biab-input" autocomplete={acOff ? "off" : "street-address"} value={asStr(v.line1)}
+					oninput={(e) => onFieldInput(field.id, { ...v, line1: e.currentTarget.value })} />
+			</label>
+			<label class="biab-field__sub">
+				<span class="biab-field__sublabel">Address Line 2</span>
+				<input class="biab-input" autocomplete={acOff ? "off" : "address-line2"} value={asStr(v.line2)}
+					oninput={(e) => onFieldInput(field.id, { ...v, line2: e.currentTarget.value })} />
+			</label>
+			<label class="biab-field__sub">
+				<span class="biab-field__sublabel">City</span>
+				<input class="biab-input" autocomplete={acOff ? "off" : "address-level2"} value={asStr(v.city)}
+					oninput={(e) => onFieldInput(field.id, { ...v, city: e.currentTarget.value })} />
+			</label>
+			<label class="biab-field__sub">
+				<span class="biab-field__sublabel">State</span>
+				<input class="biab-input" autocomplete={acOff ? "off" : "address-level1"} value={asStr(v.state)}
+					oninput={(e) => onFieldInput(field.id, { ...v, state: e.currentTarget.value })} />
+			</label>
+			<label class="biab-field__sub">
+				<span class="biab-field__sublabel">Zip</span>
+				<input class="biab-input" autocomplete={acOff ? "off" : "postal-code"} value={asStr(v.zip)}
+					oninput={(e) => onFieldInput(field.id, { ...v, zip: e.currentTarget.value })} />
+			</label>
+		</div>
+	{:else if field.type === "color_picker"}
+		{@const v = asStr(value)}
+		<div class="biab-field__colors">
+			{#each field.options ?? [] as color (color)}
+				<button
+					type="button"
+					class="biab-field__color"
+					class:biab-field__color--on={v === color}
+					style={`background-color:${color}`}
+					title={color}
+					aria-label={color}
+					onclick={() => onFieldInput(field.id, color)}
+				></button>
+			{/each}
+		</div>
+	{:else if field.type === "file_upload"}
+		{@const list = Array.isArray(value) ? (value as Array<{ name?: string; size?: number }>) : []}
+		{#if hasClient}
+			<div class="biab-field__file">
+				<input
+					type="file"
+					multiple={(field.fileConfig?.maxFiles ?? 1) > 1}
+					accept={field.fileConfig?.allowedTypes?.join(",") || undefined}
+					disabled={snapshot.uploading}
+					onchange={(e) => onFilePick(field, e.currentTarget.files)}
+				/>
+				{#if snapshot.uploading}<span class="biab-field__file-status">Uploading…</span>{/if}
+				{#if list.length > 0}
+					<ul class="biab-field__file-list">
+						{#each list as f, i (i)}
+							<li>{f.name ?? "file"}{f.size ? ` · ${Math.round((f.size ?? 0) / 1024)} KB` : ""}</li>
+						{/each}
+					</ul>
+				{/if}
+				{#if uploadError}<p class="biab-field__error">{uploadError}</p>{/if}
+			</div>
+		{:else}
+			<div class="biab-field__file biab-field__file--disabled">
+				File upload requires an SDK client (uploads are disabled in schema-only mode).
+			</div>
+		{/if}
+	{:else if field.type === "phone"}
+		<input
+			class="biab-input biab-field__control"
+			type="tel"
+			placeholder={field.placeholder ||
+				(field.phoneConfig?.international ? "+1 (555) 000-0000" : "(555) 000-0000")}
+			autocomplete={ac ?? undefined}
+			value={asStr(value)}
+			oninput={(e) => onFieldInput(field.id, e.currentTarget.value)}
+		/>
+	{:else if field.type === "email"}
+		<input
+			class="biab-input biab-field__control"
+			type="email"
+			placeholder={field.placeholder || "you@example.com"}
+			autocomplete={ac ?? undefined}
+			value={asStr(value)}
+			oninput={(e) => onFieldInput(field.id, e.currentTarget.value)}
+		/>
+	{:else if field.type === "number"}
+		<input
+			class="biab-input biab-field__control"
+			type="number"
+			placeholder={field.placeholder ?? ""}
+			value={typeof value === "number" ? value : asStr(value)}
+			oninput={(e) =>
+				onFieldInput(field.id, e.currentTarget.value === "" ? "" : Number(e.currentTarget.value))}
+		/>
+	{:else}
+		<input
+			class="biab-input biab-field__control"
+			placeholder={field.placeholder ?? ""}
+			autocomplete={ac ?? undefined}
+			value={asStr(value)}
+			oninput={(e) => onFieldInput(field.id, e.currentTarget.value)}
+		/>
+	{/if}
+{/snippet}
+
+{#snippet fieldRow(field: FormCoreField, snapshot: FormSnapshot)}
+	{@const errored = Boolean(snapshot.errors[field.id])}
+	<div
+		class="biab-field biab-field--{field.type}"
+		class:biab-field--required={field.required}
+		class:biab-field--error={errored}
+		data-field-id={field.id}
+		data-biab-field={fieldCssKey(field)}
+		data-biab-type={field.type}
+	>
+		{#if !LABELLESS.has(field.type)}
+			<span class="biab-label biab-field__label">
+				{field.label || ""}{#if field.required}<span class="biab-field__required"> *</span>{/if}
+			</span>
+		{/if}
+		{@render fieldInput(field, snapshot)}
+		{#if errored}
+			<p class="biab-field__error">{snapshot.errors[field.id]?.message}</p>
+		{/if}
+		{#if field.helpText}
+			<p class="biab-field__help">{field.helpText}</p>
+		{/if}
+	</div>
+{/snippet}
+
+<!-- The recursive tree walk — mirrors FormPreview's RenderTree. -->
+{#snippet renderTree(nodes: FormCoreField[], snapshot: FormSnapshot, flat: boolean)}
+	<div class="biab-tree">
+		{#each nodes as f (f.id)}
+			{#if f.type === "input_group"}
+				{@const kids = (f.children ?? []) as FormCoreField[]}
+				{@const reveal = revealCountFor(f, snapshot.values)}
+				<div class="biab-group" class:biab-group--card={!flat} data-biab-group={fieldCssKey(f)}>
+					{#if f.label && f.showGroupLabel}
+						<div class="biab-group__label">{f.label}</div>
+					{/if}
+					{@render renderTree(kids.slice(0, reveal), snapshot, false)}
+				</div>
+			{:else if f.type === "condition_block"}
+				{@const passed = conditionChildren(f, snapshot.values)}
+				{#if passed}
+					{@render renderTree(passed, snapshot, flat)}
+				{/if}
+			{:else if f.type === "or_condition"}
+				{@const errored = Boolean(snapshot.errors[f.id])}
+				{@const left = f.children?.[0]}
+				{@const right = f.children?.[1]}
+				<div class="biab-or" class:biab-or--error={errored}>
+					{#if f.label}
+						<div class="biab-or__label">
+							{f.label}<span class="biab-or__hint"> Fill at least one side</span>
+						</div>
+					{/if}
+					<div class="biab-or__cols">
+						<div class="biab-or__col">
+							<div class="biab-or__col-label">{f.orConditionConfig?.leftLabel || "Option A"}</div>
+							{#if left}{@render renderTree([left], snapshot, false)}{/if}
+						</div>
+						<div class="biab-or__sep">OR</div>
+						<div class="biab-or__col">
+							<div class="biab-or__col-label">{f.orConditionConfig?.rightLabel || "Option B"}</div>
+							{#if right}{@render renderTree([right], snapshot, false)}{/if}
+						</div>
+					</div>
+					{#if errored}
+						<p class="biab-field__error">Fill in at least one side to continue.</p>
+					{/if}
+				</div>
+			{:else if f.type === "flex_row"}
+				{@const rowKids = (f.children ?? []) as FormCoreField[]}
+				<div class="biab-flex-row">
+					{#each rowKids as child (child.id)}
+						<div class="biab-flex-row__cell">
+							{@render fieldRow(child, snapshot)}
+						</div>
+					{/each}
+				</div>
+			{:else}
+				{@render fieldRow(f, snapshot)}
+			{/if}
+		{/each}
+	</div>
+{/snippet}
+
+<section class={rootClass}>
+	{#if $snap.orgIcon}
+		<img class="biab-form__org-icon" src={$snap.orgIcon} alt="" />
+	{/if}
+
+	{#if $snap.status === "loading"}
+		<div class="biab-loading">Loading form…</div>
+	{:else if $snap.status === "error"}
+		<div class="biab-empty biab-form__error">{$snap.loadError ?? "Couldn't load the form."}</div>
+	{:else if submitted}
+		<div class="biab-card biab-form__success" role="status">
+			<span class="biab-badge">Received</span>
+			<p>{successMessage}</p>
+		</div>
+	{:else}
+		{#if $snap.title || $snap.description}
+			<div class="biab-form__lead">
+				{#if $snap.title}<h2 class="biab-section__title">{$snap.title}</h2>{/if}
+				{#if $snap.description}<p class="biab-section__sub">{$snap.description}</p>{/if}
+			</div>
+		{/if}
+
+		<!-- Multi-step progress: "steps" indicator. -->
+		{#if $snap.settings.isConsecutive && $snap.settings.showProgress && $snap.settings.progressStyle !== "bar" && $snap.stepCount > 1}
+			<div class="biab-progress biab-progress--steps">
+				<div class="biab-progress__heading">Form Progress</div>
+				<ol class="biab-progress__steps">
+					{#each $snap.steps as s, i (i)}
+						{@const head = s[0]}
+						{@const stepLabel = head?.stepTitle || head?.label || `Step ${i + 1}`}
+						<li
+							class="biab-progress__step"
+							class:biab-progress__step--current={i === $snap.step}
+							class:biab-progress__step--done={i < $snap.step}
+						>
+							<button type="button" class="biab-progress__dot" onclick={() => controller.goToStep(i)}>
+								{i < $snap.step ? "✓" : i + 1}
+							</button>
+							<span class="biab-progress__label">{stepLabel}</span>
+						</li>
+					{/each}
+				</ol>
+			</div>
+		{/if}
+
+		<!-- Multi-step progress: thin "bar". -->
+		{#if $snap.settings.isConsecutive && $snap.settings.showProgress && $snap.settings.progressStyle === "bar" && $snap.stepCount > 1}
+			<div class="biab-progress biab-progress--bar">
+				<span class="biab-progress__count">{$snap.step + 1} / {$snap.stepCount}</span>
+				<div class="biab-progress__track">
+					<div class="biab-progress__fill" style={`width:${$snap.progressPercent}%`}></div>
+				</div>
+			</div>
+		{/if}
+
+		{#if $snap.errorList.length > 0}
+			<div class="biab-form__errors" role="alert">
+				<div class="biab-form__errors-title">
+					Please complete the highlighted required field{$snap.errorList.length === 1 ? "" : "s"}.
+				</div>
+				<div class="biab-form__errors-list">
+					{$snap.errorList.map((e) => e.label).join(", ")}
+				</div>
+			</div>
+		{/if}
+
+		<!-- The active step's subtree (single-page = all fields). -->
+		{#if $snap.settings.animation === "scroll"}
+			<div class="biab-tree">
+				{#each $snap.visibleFields as vf (vf.id)}
+					{@render renderTree([vf], $snap, $snap.settings.isConsecutive)}
+				{/each}
+			</div>
+		{:else}
+			{#key $snap.step}
+				<div class={entranceClass($snap.settings.animation, $snap.forward)}>
+					{@render renderTree($snap.visibleFields, $snap, $snap.settings.isConsecutive)}
+				</div>
+			{/key}
+		{/if}
+
+		{#if submitError}
+			<div class="biab-form__submit-error" role="alert">{submitError}</div>
+		{/if}
+
+		<!-- Nav: multi-step (Back / Next / Submit) or single-page (Submit). -->
+		{#if $snap.settings.isConsecutive && $snap.stepCount > 1}
+			<div class="biab-nav">
+				<button
+					type="button"
+					class="biab-btn biab-btn--ghost biab-btn--back"
+					disabled={$snap.isFirstStep}
+					onclick={() => controller.back()}
+				>
+					Back
+				</button>
+				{#if !$snap.isLastStep}
+					<button
+						type="button"
+						class="biab-btn biab-btn--next"
+						disabled={!$snap.canAdvance}
+						onclick={() => controller.next()}
+					>
+						Next
+					</button>
+				{:else}
+					<button
+						type="button"
+						class="biab-btn biab-btn--submit"
+						disabled={submitting}
+						onclick={() => void handleSubmit()}
+					>
+						{submitting ? "Sending…" : submitLabel}
+					</button>
+				{/if}
+			</div>
+		{:else}
+			<div class="biab-nav">
+				<button
+					type="button"
+					class="biab-btn biab-btn--submit"
+					disabled={submitting}
+					onclick={() => void handleSubmit()}
+				>
+					{submitting ? "Sending…" : submitLabel}
+				</button>
+			</div>
+		{/if}
+	{/if}
+</section>