@businessdash/sdk 0.9.81 → 0.9.90

package/src/svelte/{BiabForm.svelte → BdForm.svelte}

@@ -1,30 +1,30 @@
 <!--
-  @businessdash/sdk/svelte — <BiabForm> drop-in (Svelte 5, runes).
+  @businessdash/sdk/svelte — <BdForm> drop-in (Svelte 5, runes).
 
-  Renders a BIAB form end-to-end from the headless core
+  Renders a BD 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
+  (animation, org icon). All markup uses the `bd-*` 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).
+    • client mode  — pass a `BdClient` (prop or `setBdClient` 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]`).
+      via your server `BdClient`) plus a `submitAction(payload, opts)` that
+      POSTs to your own endpoint (e.g. SvelteKit `/api/bd/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 { BdClient } from "../sdk.js";
 	import type {
 		FormCoreField,
 		FormSnapshot,
@@ -34,34 +34,34 @@
 	} from "../forms-core/index.js";
 
 	/** A successful submit result (`ok === true`). */
-	export type BiabFormSuccess = Extract<FormSubmitResult, { ok: true }>;
+	export type BdFormSuccess = Extract<FormSubmitResult, { ok: true }>;
 	/** A failed submit result (`ok === false`). */
-	export type BiabFormFailure = Extract<FormSubmitResult, { ok: false }>;
+	export type BdFormFailure = 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
+	 * lets `<BdForm>` surface inline server-side field errors; returning
 	 * void/anything else is treated as a generic success.
 	 */
-	export type BiabFormSubmitAction = (
+	export type BdFormSubmitAction = (
 		payload: Record<string, unknown>,
 		options: FormSubmitOptions,
 	) => Promise<FormSubmitResult | void> | FormSubmitResult | void;
 
-	export interface BiabFormProps {
+	export interface BdFormProps {
 		/** 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;
+		/** SDK client. Falls back to `setBdClient` context. Omit in schema+action mode. */
+		client?: BdClient;
 		/**
-		 * Submit override. When provided, `<BiabForm>` validates locally, re-keys
+		 * Submit override. When provided, `<BdForm>` 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;
+		submitAction?: BdFormSubmitAction;
 		/** Submit button label (final step). Default "Submit". */
 		submitLabel?: string;
 		/** Merged into every submit (e.g. `source`, `metadata`). */
@@ -69,12 +69,12 @@
 		/** Server-validates but stores nothing. */
 		dryRun?: boolean;
 		/** Fired after a successful submit. */
-		onSuccess?: (result: BiabFormSuccess) => void;
+		onSuccess?: (result: BdFormSuccess) => void;
 		/** Fired after a failed submit. */
-		onError?: (result: BiabFormFailure) => void;
+		onError?: (result: BdFormFailure) => 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.) */
+		/** Extra class on the root `.bd-form`. (`className` alias also accepted.) */
 		class?: string;
 		/** React-style alias for `class`. */
 		className?: string;
@@ -112,7 +112,7 @@
 		resolveFieldAutocomplete,
 	} from "../forms-core/autocomplete.js";
 
-	import { formStore, getBiabClient } from "./context.js";
+	import { formStore, getBdClient } from "./context.js";
 
 	let {
 		slug,
@@ -130,7 +130,7 @@
 		successMessage = "Thanks — your response was received.",
 		autoComplete,
 		fieldAutoComplete,
-	}: BiabFormProps = $props();
+	}: BdFormProps = $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
@@ -146,7 +146,7 @@
 	// 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(),
+		client: client ?? getBdClient(),
 		slug,
 		schema,
 		submitOptions: { ...submitOptions, ...(dryRun ? { dryRun: true } : {}) },
@@ -176,7 +176,7 @@
 	const snap = formStore(controller);
 
 	const rootClass = $derived(
-		["biab-form", klass, className].filter(Boolean).join(" "),
+		["bd-form", klass, className].filter(Boolean).join(" "),
 	);
 
 	// ── Submit: route through `submitAction` (server-safe) or the SDK. ─────────
@@ -207,23 +207,23 @@
 					return;
 				}
 				// No structured result → treat as success.
-				const synthetic: BiabFormSuccess = {
+				const synthetic: BdFormSuccess = {
 					ok: true,
 					status: 200,
 					submissionId: "",
-				} as BiabFormSuccess;
+				} as BdFormSuccess;
 				actionResult = synthetic;
 				onSubmit?.(payload);
 				onSuccess?.(synthetic);
 			} catch (err) {
 				submittingViaAction = false;
-				const failure: BiabFormFailure = {
+				const failure: BdFormFailure = {
 					ok: false,
 					status: 0,
 					reason: "network_error",
 					message:
 						err instanceof Error ? err.message : "The submission failed.",
-				} as BiabFormFailure;
+				} as BdFormFailure;
 				actionResult = failure;
 				onError?.(failure);
 			}
@@ -424,22 +424,22 @@
 	{@const ac = resolveFieldAutocomplete(field, autocompleteConfig)}
 	{@const acOff = ac === "off"}
 	{#if field.type === "title"}
-		<h2 class="biab-field__title">{field.label || "Untitled"}</h2>
+		<h2 class="bd-field__title">{field.label || "Untitled"}</h2>
 	{:else if field.type === "subtitle"}
-		<h3 class="biab-field__subtitle">{field.label || ""}</h3>
+		<h3 class="bd-field__subtitle">{field.label || ""}</h3>
 	{:else if field.type === "separator"}
-		<hr class="biab-field__separator" />
+		<hr class="bd-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>
+		<div class="bd-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 ?? ""} />
+			<img class="bd-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"
+			class="bd-textarea bd-field__control"
 			rows={taRows}
 			placeholder={field.placeholder ?? ""}
 			autocomplete={ac ?? undefined}
@@ -451,21 +451,21 @@
 		     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"
+			class="bd-input bd-combobox bd-field__control"
 			type="text"
-			list={`biab-list-${field.id}`}
+			list={`bd-list-${field.id}`}
 			placeholder={field.placeholder || "Search…"}
 			value={asStr(value)}
 			oninput={(e) => onFieldInput(field.id, e.currentTarget.value)}
 		/>
-		<datalist id={`biab-list-${field.id}`}>
+		<datalist id={`bd-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"
+			class="bd-select bd-field__control"
 			value={asStr(value)}
 			onchange={(e) => onFieldInput(field.id, e.currentTarget.value)}
 		>
@@ -478,25 +478,25 @@
 		<!-- 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">
+		<div class="bd-iconselect">
 			<input
-				class="biab-input biab-iconselect__search"
+				class="bd-input bd-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">
+				<span class="bd-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>
+					<button type="button" class="bd-iconselect__clear" onclick={() => onFieldInput(field.id, "")}>×</button>
 				</span>
 			{/if}
-			<div class="biab-iconselect__grid">
+			<div class="bd-iconselect__grid">
 				{#each filterIconNames(names, iconQuery) as name (name)}
 					<button
 						type="button"
-						class="biab-iconselect__item"
+						class="bd-iconselect__item"
 						class:is-selected={asStr(value) === name}
 						title={name}
 						aria-label={name}
@@ -512,19 +512,19 @@
 		<!-- 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">
+		<div class="bd-imageinput">
 			{#if sources === "both"}
-				<div class="biab-imageinput__modes">
+				<div class="bd-imageinput__modes">
 					<button
 						type="button"
-						class="biab-imageinput__mode"
+						class="bd-imageinput__mode"
 						class:is-active={imageMode === "upload"}
 						aria-pressed={imageMode === "upload"}
 						onclick={() => (imageMode = "upload")}>Upload</button
 					>
 					<button
 						type="button"
-						class="biab-imageinput__mode"
+						class="bd-imageinput__mode"
 						class:is-active={imageMode === "url"}
 						aria-pressed={imageMode === "url"}
 						onclick={() => (imageMode = "url")}>Paste URL</button
@@ -533,14 +533,14 @@
 			{/if}
 			{#if imageMode === "upload" && sources !== "url" && hasClient}
 				<input
-					class="biab-input biab-imageinput__file"
+					class="bd-input bd-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"
+					class="bd-input bd-imageinput__url"
 					type="url"
 					placeholder={field.placeholder || "https://example.com/image.png"}
 					value={asStr(value)}
@@ -548,13 +548,13 @@
 				/>
 			{/if}
 			{#if cfg.showPreview !== false && asStr(value)}
-				<img class="biab-imageinput__preview" src={asStr(value)} alt="" />
+				<img class="bd-imageinput__preview" src={asStr(value)} alt="" />
 			{/if}
 		</div>
 	{:else if field.type === "radio"}
-		<div class="biab-field__radios">
+		<div class="bd-field__radios">
 			{#each field.options ?? [] as opt (opt)}
-				<label class="biab-field__radio">
+				<label class="bd-field__radio">
 					<input
 						type="radio"
 						name={field.id}
@@ -568,9 +568,9 @@
 		</div>
 	{:else if field.type === "checkbox"}
 		{@const arr = Array.isArray(value) ? (value as string[]) : []}
-		<div class="biab-field__checks">
+		<div class="bd-field__checks">
 			{#each field.options ?? [] as opt (opt)}
-				<label class="biab-field__check">
+				<label class="bd-field__check">
 					<input
 						type="checkbox"
 						checked={arr.includes(opt)}
@@ -587,7 +587,7 @@
 			{/each}
 		</div>
 	{:else if field.type === "boolean"}
-		<label class="biab-field__toggle">
+		<label class="bd-field__toggle">
 			<input
 				type="checkbox"
 				checked={value === true}
@@ -597,7 +597,7 @@
 		</label>
 	{:else if field.type === "date"}
 		<input
-			class="biab-input biab-field__control"
+			class="bd-input bd-field__control"
 			type="date"
 			value={asStr(value)}
 			onchange={(e) => onFieldInput(field.id, e.currentTarget.value)}
@@ -606,7 +606,7 @@
 		{@const mode = field.timeConfig?.mode ?? "simple"}
 		{#if mode === "simple"}
 			<select
-				class="biab-select biab-field__control"
+				class="bd-select bd-field__control"
 				value={asStr(value)}
 				onchange={(e) => onFieldInput(field.id, e.currentTarget.value)}
 			>
@@ -617,21 +617,21 @@
 			</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>
+			<div class="bd-field__grid2">
+				<label class="bd-field__sub">
+					<span class="bd-field__sublabel">Start</span>
 					<input
-						class="biab-input"
+						class="bd-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>
+				<label class="bd-field__sub">
+					<span class="bd-field__sublabel">End</span>
 					<input
-						class="biab-input"
+						class="bd-input"
 						type="time"
 						value={asStr(v.end)}
 						onchange={(e) =>
@@ -641,21 +641,21 @@
 			</div>
 		{:else}
 			{@const v = asObj(value)}
-			<div class="biab-field__grid2">
-				<label class="biab-field__sub">
-					<span class="biab-field__sublabel">Date</span>
+			<div class="bd-field__grid2">
+				<label class="bd-field__sub">
+					<span class="bd-field__sublabel">Date</span>
 					<input
-						class="biab-input"
+						class="bd-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>
+				<label class="bd-field__sub">
+					<span class="bd-field__sublabel">Time</span>
 					<input
-						class="biab-input"
+						class="bd-input"
 						type="time"
 						value={asStr(v.time)}
 						onchange={(e) =>
@@ -666,21 +666,21 @@
 		{/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>
+		<div class="bd-field__grid2">
+			<label class="bd-field__sub">
+				<span class="bd-field__sublabel">Start</span>
 				<input
-					class="biab-input"
+					class="bd-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>
+			<label class="bd-field__sub">
+				<span class="bd-field__sublabel">End</span>
 				<input
-					class="biab-input"
+					class="bd-input"
 					type="date"
 					value={asStr(v.end)}
 					onchange={(e) =>
@@ -693,8 +693,8 @@
 		{@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">
+		<div class="bd-field__slider">
+			<div class="bd-field__slider-meta">
 				<span>{min}</span><span>{v}</span><span>{max}</span>
 			</div>
 			<input
@@ -710,12 +710,12 @@
 		{@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">
+		<div class="bd-field__stars">
 			{#each stars as i (i)}
 				<button
 					type="button"
-					class="biab-field__star"
-					class:biab-field__star--on={i < v}
+					class="bd-field__star"
+					class:bd-field__star--on={i < v}
 					aria-label={`Rate ${i + 1}`}
 					onclick={() => onFieldInput(field.id, i + 1)}
 				>
@@ -725,12 +725,12 @@
 		</div>
 	{:else if field.type === "happiness_rating"}
 		{@const v = asNum(value, -1)}
-		<div class="biab-field__happiness">
+		<div class="bd-field__happiness">
 			{#each ["😞", "😕", "😐", "🙂", "😄"] as emoji, i (emoji)}
 				<button
 					type="button"
-					class="biab-field__emoji"
-					class:biab-field__emoji--on={i === v}
+					class="bd-field__emoji"
+					class:bd-field__emoji--on={i === v}
 					onclick={() => onFieldInput(field.id, i)}
 				>
 					{emoji}
@@ -739,48 +739,115 @@
 		</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 class="bd-field__stepper">
+			<button type="button" class="bd-btn bd-btn--ghost" onclick={() => onFieldInput(field.id, v - 1)}>−</button>
+			<span class="bd-field__stepper-value">{v}</span>
+			<button type="button" class="bd-btn bd-btn--ghost" onclick={() => onFieldInput(field.id, v + 1)}>+</button>
+		</div>
+	{:else if field.type === "name"}
+		{@const v = asObj(value)}
+		{@const cfg = field.nameConfig ?? {}}
+		{@const nicknamesText = Array.isArray(v.nicknames) ? v.nicknames.join(", ") : asStr(v.nicknames)}
+		<div class="bd-field__name">
+			{#if cfg.prefix}
+				<label class="bd-field__sub">
+					<span class="bd-field__sublabel">Title</span>
+					<input class="bd-input" autocomplete={acOff ? "off" : "honorific-prefix"} placeholder="Dr." value={asStr(v.prefix)}
+						oninput={(e) => onFieldInput(field.id, { ...v, prefix: e.currentTarget.value })} />
+				</label>
+			{/if}
+			<div class="bd-field__grid2">
+				<label class="bd-field__sub">
+					<span class="bd-field__sublabel">First name</span>
+					<input class="bd-input" autocomplete={acOff ? "off" : "given-name"} placeholder="Jane" value={asStr(v.first)}
+						oninput={(e) => onFieldInput(field.id, { ...v, first: e.currentTarget.value })} />
+				</label>
+				{#if cfg.middle}
+					<label class="bd-field__sub">
+						<span class="bd-field__sublabel">Middle name</span>
+						<input class="bd-input" autocomplete={acOff ? "off" : "additional-name"} placeholder="Quinn" value={asStr(v.middle)}
+							oninput={(e) => onFieldInput(field.id, { ...v, middle: e.currentTarget.value })} />
+					</label>
+				{:else}
+					<label class="bd-field__sub">
+						<span class="bd-field__sublabel">Last name</span>
+						<input class="bd-input" autocomplete={acOff ? "off" : "family-name"} placeholder="Doe" value={asStr(v.last)}
+							oninput={(e) => onFieldInput(field.id, { ...v, last: e.currentTarget.value })} />
+					</label>
+				{/if}
+			</div>
+			{#if cfg.middle && cfg.suffix}
+				<div class="bd-field__grid2">
+					<label class="bd-field__sub">
+						<span class="bd-field__sublabel">Last name</span>
+						<input class="bd-input" autocomplete={acOff ? "off" : "family-name"} placeholder="Doe" value={asStr(v.last)}
+							oninput={(e) => onFieldInput(field.id, { ...v, last: e.currentTarget.value })} />
+					</label>
+					<label class="bd-field__sub">
+						<span class="bd-field__sublabel">Suffix</span>
+						<input class="bd-input" autocomplete={acOff ? "off" : "honorific-suffix"} placeholder="Jr." value={asStr(v.suffix)}
+							oninput={(e) => onFieldInput(field.id, { ...v, suffix: e.currentTarget.value })} />
+					</label>
+				</div>
+			{:else if cfg.middle}
+				<label class="bd-field__sub">
+					<span class="bd-field__sublabel">Last name</span>
+					<input class="bd-input" autocomplete={acOff ? "off" : "family-name"} placeholder="Doe" value={asStr(v.last)}
+						oninput={(e) => onFieldInput(field.id, { ...v, last: e.currentTarget.value })} />
+				</label>
+			{:else if cfg.suffix}
+				<label class="bd-field__sub">
+					<span class="bd-field__sublabel">Suffix</span>
+					<input class="bd-input" autocomplete={acOff ? "off" : "honorific-suffix"} placeholder="Jr." value={asStr(v.suffix)}
+						oninput={(e) => onFieldInput(field.id, { ...v, suffix: e.currentTarget.value })} />
+				</label>
+			{/if}
+			{#if cfg.nicknames}
+				<!-- Raw comma-separated string while typing; submit normalizes it into a string[]. -->
+				<label class="bd-field__sub">
+					<span class="bd-field__sublabel">Nicknames</span>
+					<input class="bd-input" placeholder="Johnny, JM — separate with commas" value={nicknamesText}
+						oninput={(e) => onFieldInput(field.id, { ...v, nicknames: e.currentTarget.value })} />
+				</label>
+			{/if}
 		</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)}
+		<div class="bd-field__address">
+			<label class="bd-field__sub">
+				<span class="bd-field__sublabel">Address Line 1</span>
+				<input class="bd-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)}
+			<label class="bd-field__sub">
+				<span class="bd-field__sublabel">Address Line 2</span>
+				<input class="bd-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)}
+			<label class="bd-field__sub">
+				<span class="bd-field__sublabel">City</span>
+				<input class="bd-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)}
+			<label class="bd-field__sub">
+				<span class="bd-field__sublabel">State</span>
+				<input class="bd-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)}
+			<label class="bd-field__sub">
+				<span class="bd-field__sublabel">Zip</span>
+				<input class="bd-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">
+		<div class="bd-field__colors">
 			{#each field.options ?? [] as color (color)}
 				<button
 					type="button"
-					class="biab-field__color"
-					class:biab-field__color--on={v === color}
+					class="bd-field__color"
+					class:bd-field__color--on={v === color}
 					style={`background-color:${color}`}
 					title={color}
 					aria-label={color}
@@ -791,7 +858,7 @@
 	{: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">
+			<div class="bd-field__file">
 				<input
 					type="file"
 					multiple={(field.fileConfig?.maxFiles ?? 1) > 1}
@@ -799,24 +866,24 @@
 					disabled={snapshot.uploading}
 					onchange={(e) => onFilePick(field, e.currentTarget.files)}
 				/>
-				{#if snapshot.uploading}<span class="biab-field__file-status">Uploading…</span>{/if}
+				{#if snapshot.uploading}<span class="bd-field__file-status">Uploading…</span>{/if}
 				{#if list.length > 0}
-					<ul class="biab-field__file-list">
+					<ul class="bd-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}
+				{#if uploadError}<p class="bd-field__error">{uploadError}</p>{/if}
 			</div>
 		{:else}
-			<div class="biab-field__file biab-field__file--disabled">
+			<div class="bd-field__file bd-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"
+			class="bd-input bd-field__control"
 			type="tel"
 			placeholder={field.placeholder ||
 				(field.phoneConfig?.international ? "+1 (555) 000-0000" : "(555) 000-0000")}
@@ -826,7 +893,7 @@
 		/>
 	{:else if field.type === "email"}
 		<input
-			class="biab-input biab-field__control"
+			class="bd-input bd-field__control"
 			type="email"
 			placeholder={field.placeholder || "you@example.com"}
 			autocomplete={ac ?? undefined}
@@ -835,7 +902,7 @@
 		/>
 	{:else if field.type === "number"}
 		<input
-			class="biab-input biab-field__control"
+			class="bd-input bd-field__control"
 			type="number"
 			placeholder={field.placeholder ?? ""}
 			value={typeof value === "number" ? value : asStr(value)}
@@ -844,7 +911,7 @@
 		/>
 	{:else}
 		<input
-			class="biab-input biab-field__control"
+			class="bd-input bd-field__control"
 			placeholder={field.placeholder ?? ""}
 			autocomplete={ac ?? undefined}
 			value={asStr(value)}
@@ -856,38 +923,38 @@
 {#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}
+		class="bd-field bd-field--{field.type}"
+		class:bd-field--required={field.required}
+		class:bd-field--error={errored}
 		data-field-id={field.id}
-		data-biab-field={fieldCssKey(field)}
-		data-biab-type={field.type}
+		data-bd-field={fieldCssKey(field)}
+		data-bd-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 class="bd-label bd-field__label">
+				{field.label || ""}{#if field.required}<span class="bd-field__required"> *</span>{/if}
 			</span>
 		{/if}
 		{@render fieldInput(field, snapshot)}
 		{#if errored}
-			<p class="biab-field__error">{snapshot.errors[field.id]?.message}</p>
+			<p class="bd-field__error">{snapshot.errors[field.id]?.message}</p>
 		{/if}
 		{#if field.helpText}
-			<p class="biab-field__help">{field.helpText}</p>
+			<p class="bd-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">
+	<div class="bd-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)}>
+				<div class="bd-group" class:bd-group--card={!flat} data-bd-group={fieldCssKey(f)}>
 					{#if f.label && f.showGroupLabel}
-						<div class="biab-group__label">{f.label}</div>
+						<div class="bd-group__label">{f.label}</div>
 					{/if}
 					{@render renderTree(kids.slice(0, reveal), snapshot, false)}
 				</div>
@@ -900,32 +967,32 @@
 				{@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}>
+				<div class="bd-or" class:bd-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 class="bd-or__label">
+							{f.label}<span class="bd-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>
+					<div class="bd-or__cols">
+						<div class="bd-or__col">
+							<div class="bd-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>
+						<div class="bd-or__sep">OR</div>
+						<div class="bd-or__col">
+							<div class="bd-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>
+						<p class="bd-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">
+				<div class="bd-flex-row">
 					{#each rowKids as child (child.id)}
-						<div class="biab-flex-row__cell">
+						<div class="bd-flex-row__cell">
 							{@render fieldRow(child, snapshot)}
 						</div>
 					{/each}
@@ -939,43 +1006,43 @@
 
 <section class={rootClass}>
 	{#if $snap.orgIcon}
-		<img class="biab-form__org-icon" src={$snap.orgIcon} alt="" />
+		<img class="bd-form__org-icon" src={$snap.orgIcon} alt="" />
 	{/if}
 
 	{#if $snap.status === "loading"}
-		<div class="biab-loading">Loading form…</div>
+		<div class="bd-loading">Loading form…</div>
 	{:else if $snap.status === "error"}
-		<div class="biab-empty biab-form__error">{$snap.loadError ?? "Couldn't load the form."}</div>
+		<div class="bd-empty bd-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>
+		<div class="bd-card bd-form__success" role="status">
+			<span class="bd-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 class="bd-form__lead">
+				{#if $snap.title}<h2 class="bd-section__title">{$snap.title}</h2>{/if}
+				{#if $snap.description}<p class="bd-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">
+			<div class="bd-progress bd-progress--steps">
+				<div class="bd-progress__heading">Form Progress</div>
+				<ol class="bd-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}
+							class="bd-progress__step"
+							class:bd-progress__step--current={i === $snap.step}
+							class:bd-progress__step--done={i < $snap.step}
 						>
-							<button type="button" class="biab-progress__dot" onclick={() => controller.goToStep(i)}>
+							<button type="button" class="bd-progress__dot" onclick={() => controller.goToStep(i)}>
 								{i < $snap.step ? "✓" : i + 1}
 							</button>
-							<span class="biab-progress__label">{stepLabel}</span>
+							<span class="bd-progress__label">{stepLabel}</span>
 						</li>
 					{/each}
 				</ol>
@@ -984,20 +1051,20 @@
 
 		<!-- 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 class="bd-progress bd-progress--bar">
+				<span class="bd-progress__count">{$snap.step + 1} / {$snap.stepCount}</span>
+				<div class="bd-progress__track">
+					<div class="bd-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">
+			<div class="bd-form__errors" role="alert">
+				<div class="bd-form__errors-title">
 					Please complete the highlighted required field{$snap.errorList.length === 1 ? "" : "s"}.
 				</div>
-				<div class="biab-form__errors-list">
+				<div class="bd-form__errors-list">
 					{$snap.errorList.map((e) => e.label).join(", ")}
 				</div>
 			</div>
@@ -1005,7 +1072,7 @@
 
 		<!-- The active step's subtree (single-page = all fields). -->
 		{#if $snap.settings.animation === "scroll"}
-			<div class="biab-tree">
+			<div class="bd-tree">
 				{#each $snap.visibleFields as vf (vf.id)}
 					{@render renderTree([vf], $snap, $snap.settings.isConsecutive)}
 				{/each}
@@ -1019,15 +1086,15 @@
 		{/if}
 
 		{#if submitError}
-			<div class="biab-form__submit-error" role="alert">{submitError}</div>
+			<div class="bd-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">
+			<div class="bd-nav">
 				<button
 					type="button"
-					class="biab-btn biab-btn--ghost biab-btn--back"
+					class="bd-btn bd-btn--ghost bd-btn--back"
 					disabled={$snap.isFirstStep}
 					onclick={() => controller.back()}
 				>
@@ -1036,7 +1103,7 @@
 				{#if !$snap.isLastStep}
 					<button
 						type="button"
-						class="biab-btn biab-btn--next"
+						class="bd-btn bd-btn--next"
 						disabled={!$snap.canAdvance}
 						onclick={() => controller.next()}
 					>
@@ -1045,7 +1112,7 @@
 				{:else}
 					<button
 						type="button"
-						class="biab-btn biab-btn--submit"
+						class="bd-btn bd-btn--submit"
 						disabled={submitting}
 						onclick={() => void handleSubmit()}
 					>
@@ -1054,10 +1121,10 @@
 				{/if}
 			</div>
 		{:else}
-			<div class="biab-nav">
+			<div class="bd-nav">
 				<button
 					type="button"
-					class="biab-btn biab-btn--submit"
+					class="bd-btn bd-btn--submit"
 					disabled={submitting}
 					onclick={() => void handleSubmit()}
 				>