@businessdash/sdk 0.9.80 → 0.9.90

package/src/vanilla.ts

@@ -1,17 +1,17 @@
 /**
- * `@businessdash/sdk/vanilla` — framework-free imperative DOM binding for `<BiabForm>`.
+ * `@businessdash/sdk/vanilla` — framework-free imperative DOM binding for `<BdForm>`.
  *
- * `mountBiabForm(elOrSelector, opts)` mounts a fully-rendered, schema-driven form
+ * `mountBdForm(elOrSelector, opts)` mounts a fully-rendered, schema-driven form
  * into any DOM node. It owns nothing of the form's logic — all of that lives in
  * the headless `createFormController` core (`@businessdash/sdk/forms`). This binding
  * is the "render layer": it subscribes to the controller's `snapshot()` and, on
  * every notify, rebuilds the form's DOM by walking `snapshot.visibleFields` and
  * dispatching per field `type`. It is a faithful port of the dashboard renderer
- * (`FormPreview.tsx`) so a drop-in `<biab-form>` reproduces the builder preview.
+ * (`FormPreview.tsx`) so a drop-in `<bd-form>` reproduces the builder preview.
  *
  * Rendering rules (kept identical to the dashboard):
  *   - Light DOM, no shadow root, so the consumer's CSS cascades straight in.
- *   - Stable `biab-*` class hooks + `data-biab-*` attributes on every node.
+ *   - Stable `bd-*` class hooks + `data-bd-*` attributes on every node.
  *   - Applies `schema.settings`: animation (none/fade/slide/scale/scroll),
  *     multi-step ("consecutive") nav, progress bar/steps, concurrent-reveal
  *     gating inside groups, plus the org icon when `showOrgIcon` is set.
@@ -19,7 +19,7 @@
  *     walked exactly as the core's validation helpers expect.
  *
  * Compiled to dist (plain TS, no JSX). The web-component binding
- * (`@businessdash/sdk/element`) wraps this same `mountBiabForm`.
+ * (`@businessdash/sdk/element`) wraps this same `mountBdForm`.
  */
 
 import {
@@ -38,7 +38,7 @@ import {
 	type FormSubmitOptions,
 } from "./forms-core/index.js";
 import type {
-	BiabClient,
+	BdClient,
 	FormFileValue,
 	FormSchema,
 	FormSubmitResult,
@@ -51,10 +51,10 @@ export * from "./forms-core/index.js";
 // Public mount options — the consistent component API across every binding.
 // ─────────────────────────────────────────────────────────────────────────────
 
-export interface MountBiabFormOptions {
+export interface MountBdFormOptions {
 	/** The SDK client. Required unless `schema` is supplied (SSR / pre-fetched).
 	 *  Still used for `submit` / `uploadFile` when both are given. */
-	client?: BiabClient;
+	client?: BdClient;
 	/** Form slug. Required when loading via `client`. */
 	slug?: string;
 	/** Pre-fetched schema (SSR). `load()` adopts it synchronously. */
@@ -63,7 +63,7 @@ export interface MountBiabFormOptions {
 	submitLabel?: string;
 	/** Validate on the server but store nothing (no side effects). */
 	dryRun?: boolean;
-	/** Extra class(es) added to the root `.biab-form` element. */
+	/** Extra class(es) added to the root `.bd-form` element. */
 	class?: string;
 	/** Alias for `class` — accepted for cross-framework parity. */
 	className?: string;
@@ -84,8 +84,8 @@ export interface MountBiabFormOptions {
 	onError?: (result: Extract<FormSubmitResult, { ok: false }>) => void;
 }
 
-/** Handle returned by `mountBiabForm` — drive or tear down the mounted form. */
-export interface BiabFormInstance {
+/** Handle returned by `mountBdForm` — drive or tear down the mounted form. */
+export interface BdFormInstance {
 	/** The underlying headless controller (advanced use). */
 	controller: FormController;
 	/** Re-fetch (or re-adopt) the schema and re-render. */
@@ -154,17 +154,17 @@ function fieldCssKey(field: FormCoreField): string {
 const NO_LABEL_TYPES = new Set(["title", "subtitle", "separator", "richtext"]);
 
 /** tw-style entrance class hook for the active step (consumer CSS animates these).
- *  Matches the `biab-anim--*` convention so orgs can target each animation. */
+ *  Matches the `bd-anim--*` convention so orgs can target each animation. */
 function animClass(animation: string, forward: boolean): string {
 	switch (animation) {
 		case "fade":
-			return "biab-anim biab-anim--fade";
+			return "bd-anim bd-anim--fade";
 		case "scale":
-			return "biab-anim biab-anim--scale";
+			return "bd-anim bd-anim--scale";
 		case "slide":
 			return forward
-				? "biab-anim biab-anim--slide biab-anim--slide-forward"
-				: "biab-anim biab-anim--slide biab-anim--slide-back";
+				? "bd-anim bd-anim--slide bd-anim--slide-forward"
+				: "bd-anim bd-anim--slide bd-anim--slide-back";
 		default:
 			return "";
 	}
@@ -190,22 +190,22 @@ function renderFieldInput(
 ): HTMLElement | null {
 	const value = snapshot.values[field.id];
 	const str = typeof value === "string" ? value : "";
-	// Address composite suppresses its fixed sub-field tokens to "off" when the
-	// field's resolved token is "off" (global switch or per-field override).
+	// Address/name composites suppress their fixed sub-field tokens to "off" when
+	// the field's resolved token is "off" (global switch or per-field override).
 	const acOff = autoComplete === "off";
 
 	switch (field.type) {
 		case "title":
-			return el("h2", { class: "biab-field__title" }, [
+			return el("h2", { class: "bd-field__title" }, [
 				field.label || "Untitled",
 			]);
 		case "subtitle":
-			return el("h3", { class: "biab-field__subtitle" }, [field.label || ""]);
+			return el("h3", { class: "bd-field__subtitle" }, [field.label || ""]);
 		case "separator":
-			return el("hr", { class: "biab-field__separator" });
+			return el("hr", { class: "bd-field__separator" });
 		case "richtext": {
 			if (!field.content) return null;
-			const div = el("div", { class: "biab-field__richtext biab-prose" });
+			const div = el("div", { class: "bd-field__richtext bd-prose" });
 			// The published `content` is server-sanitized HTML.
 			div.innerHTML = field.content;
 			return div;
@@ -219,7 +219,7 @@ function renderFieldInput(
 			};
 			if (!cfg.src) return null;
 			return el("img", {
-				class: "biab-field__image",
+				class: "bd-field__image",
 				src: cfg.src,
 				alt: cfg.alt || "",
 				...(cfg.width ? { width: cfg.width } : {}),
@@ -233,8 +233,8 @@ function renderFieldInput(
 			};
 			const node = el("textarea", {
 				class: classNames(
-					"biab-textarea",
-					cfg.resizable === false && "biab-textarea--fixed",
+					"bd-textarea",
+					cfg.resizable === false && "bd-textarea--fixed",
 				),
 				rows: cfg.rows ?? 4,
 				placeholder: field.placeholder || "",
@@ -245,7 +245,7 @@ function renderFieldInput(
 			return node;
 		}
 		case "select": {
-			const node = el("select", { class: "biab-select" }) as HTMLSelectElement;
+			const node = el("select", { class: "bd-select" }) as HTMLSelectElement;
 			node.append(
 				el("option", { value: "" }, [field.placeholder || "Select..."]),
 			);
@@ -257,11 +257,11 @@ function renderFieldInput(
 			return node;
 		}
 		case "radio": {
-			const wrap = el("div", { class: "biab-radio-group" });
+			const wrap = el("div", { class: "bd-radio-group" });
 			for (const opt of field.options ?? []) {
 				const id = `${field.id}-${opt}`;
 				const input = el("input", {
-					class: "biab-radio",
+					class: "bd-radio",
 					type: "radio",
 					name: field.id,
 					id,
@@ -270,7 +270,7 @@ function renderFieldInput(
 				input.checked = str === opt;
 				input.addEventListener("change", () => set(opt));
 				wrap.append(
-					el("label", { class: "biab-radio-option", for: id }, [
+					el("label", { class: "bd-radio-option", for: id }, [
 						input,
 						el("span", {}, [opt]),
 					]),
@@ -280,10 +280,10 @@ function renderFieldInput(
 		}
 		case "checkbox": {
 			const arr = Array.isArray(value) ? (value as string[]) : [];
-			const wrap = el("div", { class: "biab-checkbox-group" });
+			const wrap = el("div", { class: "bd-checkbox-group" });
 			for (const opt of field.options ?? []) {
 				const input = el("input", {
-					class: "biab-checkbox",
+					class: "bd-checkbox",
 					type: "checkbox",
 					value: opt,
 				}) as HTMLInputElement;
@@ -295,7 +295,7 @@ function renderFieldInput(
 					set(next);
 				});
 				wrap.append(
-					el("label", { class: "biab-checkbox-option" }, [
+					el("label", { class: "bd-checkbox-option" }, [
 						input,
 						el("span", {}, [opt]),
 					]),
@@ -305,21 +305,21 @@ function renderFieldInput(
 		}
 		case "boolean": {
 			const input = el("input", {
-				class: "biab-switch",
+				class: "bd-switch",
 				type: "checkbox",
 			}) as HTMLInputElement;
 			input.checked = value === true;
 			input.addEventListener("change", () => set(input.checked));
-			return el("label", { class: "biab-boolean" }, [
+			return el("label", { class: "bd-boolean" }, [
 				input,
-				el("span", { class: "biab-boolean__label" }, [
+				el("span", { class: "bd-boolean__label" }, [
 					field.placeholder || "Yes / No",
 				]),
 			]);
 		}
 		case "date": {
 			const node = el("input", {
-				class: "biab-input",
+				class: "bd-input",
 				type: "date",
 			}) as HTMLInputElement;
 			node.value = str;
@@ -328,7 +328,7 @@ function renderFieldInput(
 		}
 		case "email": {
 			const node = el("input", {
-				class: "biab-input",
+				class: "bd-input",
 				type: "email",
 				placeholder: field.placeholder || "you@example.com",
 			}) as HTMLInputElement;
@@ -338,16 +338,16 @@ function renderFieldInput(
 			return node;
 		}
 		case "phone": {
-			const wrap = el("div", { class: "biab-phone" });
+			const wrap = el("div", { class: "bd-phone" });
 			if (field.phoneConfig?.showFlags) {
 				wrap.append(
-					el("span", { class: "biab-phone__flag", "aria-hidden": "true" }, [
+					el("span", { class: "bd-phone__flag", "aria-hidden": "true" }, [
 						"\u{1F1FA}\u{1F1F8}",
 					]),
 				);
 			}
 			const node = el("input", {
-				class: "biab-input",
+				class: "bd-input",
 				type: "tel",
 				placeholder:
 					field.placeholder ||
@@ -363,7 +363,7 @@ function renderFieldInput(
 		}
 		case "number": {
 			const node = el("input", {
-				class: "biab-input",
+				class: "bd-input",
 				type: "number",
 				placeholder: field.placeholder || "",
 			}) as HTMLInputElement;
@@ -375,20 +375,20 @@ function renderFieldInput(
 		}
 		case "stepper": {
 			const v = typeof value === "number" ? value : 0;
-			const out = el("span", { class: "biab-stepper__value" }, [String(v)]);
+			const out = el("span", { class: "bd-stepper__value" }, [String(v)]);
 			const minus = el(
 				"button",
-				{ class: "biab-btn biab-btn--ghost biab-stepper__btn", type: "button" },
+				{ class: "bd-btn bd-btn--ghost bd-stepper__btn", type: "button" },
 				["−"],
 			);
 			const plus = el(
 				"button",
-				{ class: "biab-btn biab-btn--ghost biab-stepper__btn", type: "button" },
+				{ class: "bd-btn bd-btn--ghost bd-stepper__btn", type: "button" },
 				["+"],
 			);
 			minus.addEventListener("click", () => set(v - 1));
 			plus.addEventListener("click", () => set(v + 1));
-			return el("div", { class: "biab-stepper" }, [minus, out, plus]);
+			return el("div", { class: "bd-stepper" }, [minus, out, plus]);
 		}
 		case "slider": {
 			const min = field.sliderConfig?.min ?? 0;
@@ -398,9 +398,9 @@ function renderFieldInput(
 			const fmt = (n: number) =>
 				unit === "currency" ? `$${n}` : unit === "percent" ? `${n}%` : `${n}`;
 			const v = typeof value === "number" ? value : min;
-			const readout = el("span", { class: "biab-slider__value" }, [fmt(v)]);
+			const readout = el("span", { class: "bd-slider__value" }, [fmt(v)]);
 			const input = el("input", {
-				class: "biab-slider",
+				class: "bd-slider",
 				type: "range",
 				min,
 				max,
@@ -412,8 +412,8 @@ function renderFieldInput(
 				readout.textContent = fmt(n);
 				set(n);
 			});
-			return el("div", { class: "biab-slider-wrap" }, [
-				el("div", { class: "biab-slider__scale" }, [
+			return el("div", { class: "bd-slider-wrap" }, [
+				el("div", { class: "bd-slider__scale" }, [
 					el("span", {}, [fmt(min)]),
 					readout,
 					el("span", {}, [fmt(max)]),
@@ -424,12 +424,12 @@ function renderFieldInput(
 		case "star_rating": {
 			const max = field.starRatingConfig?.maxStars ?? 5;
 			const v = typeof value === "number" ? value : 0;
-			const wrap = el("div", { class: "biab-stars" });
+			const wrap = el("div", { class: "bd-stars" });
 			for (let i = 0; i < max; i++) {
 				const btn = el(
 					"button",
 					{
-						class: classNames("biab-star", i < v && "biab-star--filled"),
+						class: classNames("bd-star", i < v && "bd-star--filled"),
 						type: "button",
 						"aria-label": `${i + 1} star${i === 0 ? "" : "s"}`,
 					},
@@ -442,15 +442,15 @@ function renderFieldInput(
 		}
 		case "happiness_rating": {
 			const v = typeof value === "number" ? value : -1;
-			const wrap = el("div", { class: "biab-happiness" });
+			const wrap = el("div", { class: "bd-happiness" });
 			["\u{1F61E}", "\u{1F615}", "\u{1F610}", "\u{1F642}", "\u{1F604}"].forEach(
 				(emoji, i) => {
 					const btn = el(
 						"button",
 						{
 							class: classNames(
-								"biab-happiness__face",
-								i === v && "biab-happiness__face--active",
+								"bd-happiness__face",
+								i === v && "bd-happiness__face--active",
 							),
 							type: "button",
 						},
@@ -464,13 +464,10 @@ function renderFieldInput(
 		}
 		case "color_picker": {
 			const v = str;
-			const wrap = el("div", { class: "biab-colors" });
+			const wrap = el("div", { class: "bd-colors" });
 			for (const color of field.options ?? []) {
 				const btn = el("button", {
-					class: classNames(
-						"biab-color",
-						v === color && "biab-color--selected",
-					),
+					class: classNames("bd-color", v === color && "bd-color--selected"),
 					type: "button",
 					title: color,
 					style: `background-color:${color}`,
@@ -500,7 +497,7 @@ function renderFieldInput(
 				const format = field.timeConfig?.format ?? "12h";
 				const step = Math.max(field.timeConfig?.stepMinutes ?? 30, 1);
 				const node = el("select", {
-					class: "biab-select",
+					class: "bd-select",
 				}) as HTMLSelectElement;
 				node.append(
 					el("option", { value: "" }, [field.placeholder || "Select time"]),
@@ -548,12 +545,100 @@ function renderFieldInput(
 				(date, time) => set({ ...v, date, time }),
 			);
 		}
+		case "name": {
+			const v = (value && typeof value === "object" ? value : {}) as {
+				prefix?: string;
+				first?: string;
+				middle?: string;
+				last?: string;
+				suffix?: string;
+				nicknames?: string[] | string;
+			};
+			const cfg = field.nameConfig ?? {};
+			const grid = el("div", { class: "bd-name" });
+			// Fixed per-sub-field autofill tokens, suppressed to "off" when the
+			// composite's resolved token is "off". Mirrors the React renderer.
+			const part = (
+				key: "prefix" | "first" | "middle" | "last" | "suffix",
+				label: string,
+				token: string,
+				placeholder: string,
+				full = false,
+			) => {
+				const input = el("input", {
+					class: "bd-input",
+					placeholder,
+				}) as HTMLInputElement;
+				setAutocomplete(input, acOff ? "off" : token);
+				input.value = v[key] ?? "";
+				input.addEventListener("input", () =>
+					set({ ...v, [key]: input.value }),
+				);
+				return el(
+					"label",
+					{
+						class: classNames("bd-name__field", full && "bd-name__field--full"),
+					},
+					[el("span", { class: "bd-name__label" }, [label]), input],
+				);
+			};
+			if (cfg.prefix) {
+				grid.append(part("prefix", "Title", "honorific-prefix", "Dr.", true));
+			}
+			grid.append(part("first", "First name", "given-name", "Jane"));
+			if (cfg.middle) {
+				grid.append(part("middle", "Middle name", "additional-name", "Quinn"));
+			}
+			grid.append(
+				part(
+					"last",
+					"Last name",
+					"family-name",
+					"Doe",
+					cfg.middle === true && cfg.suffix !== true,
+				),
+			);
+			if (cfg.suffix) {
+				grid.append(
+					part(
+						"suffix",
+						"Suffix",
+						"honorific-suffix",
+						"Jr.",
+						cfg.middle !== true,
+					),
+				);
+			}
+			if (cfg.nicknames) {
+				// The nicknames input keeps the raw comma-separated string while the
+				// visitor types; submit normalizes it into a string[].
+				const input = el("input", {
+					class: "bd-input",
+					placeholder: "Johnny, JM — separate with commas",
+				}) as HTMLInputElement;
+				input.value = Array.isArray(v.nicknames)
+					? v.nicknames.join(", ")
+					: typeof v.nicknames === "string"
+						? v.nicknames
+						: "";
+				input.addEventListener("input", () =>
+					set({ ...v, nicknames: input.value }),
+				);
+				grid.append(
+					el("label", { class: "bd-name__field bd-name__field--full" }, [
+						el("span", { class: "bd-name__label" }, ["Nicknames"]),
+						input,
+					]),
+				);
+			}
+			return grid;
+		}
 		case "address": {
 			const v = (value && typeof value === "object" ? value : {}) as Record<
 				string,
 				string
 			>;
-			const grid = el("div", { class: "biab-address" });
+			const grid = el("div", { class: "bd-address" });
 			// Fixed per-sub-field autofill tokens, suppressed to "off" when the
 			// composite's resolved token is "off". Mirrors the React renderer.
 			const part = (
@@ -562,7 +647,7 @@ function renderFieldInput(
 				token: string,
 				full = false,
 			) => {
-				const input = el("input", { class: "biab-input" }) as HTMLInputElement;
+				const input = el("input", { class: "bd-input" }) as HTMLInputElement;
 				setAutocomplete(input, acOff ? "off" : token);
 				input.value = v[key] ?? "";
 				input.addEventListener("input", () =>
@@ -572,11 +657,11 @@ function renderFieldInput(
 					"label",
 					{
 						class: classNames(
-							"biab-address__field",
-							full && "biab-address__field--full",
+							"bd-address__field",
+							full && "bd-address__field--full",
 						),
 					},
-					[el("span", { class: "biab-address__label" }, [label]), input],
+					[el("span", { class: "bd-address__label" }, [label]), input],
 				);
 			};
 			grid.append(
@@ -593,10 +678,10 @@ function renderFieldInput(
 			const maxFiles = field.fileConfig?.maxFiles ?? 1;
 			const allowed = field.fileConfig?.allowedTypes;
 			const remaining = Math.max(maxFiles - files.length, 0);
-			const wrap = el("div", { class: "biab-file" });
+			const wrap = el("div", { class: "bd-file" });
 
 			const input = el("input", {
-				class: "biab-file__input",
+				class: "bd-file__input",
 				type: "file",
 				...(maxFiles > 1 ? { multiple: true } : {}),
 				...(allowed && allowed.length > 0 ? { accept: allowed.join(",") } : {}),
@@ -613,7 +698,7 @@ function renderFieldInput(
 			const trigger = el(
 				"button",
 				{
-					class: "biab-file__trigger",
+					class: "bd-file__trigger",
 					type: "button",
 					...(snapshot.uploading || remaining === 0 ? { disabled: true } : {}),
 				},
@@ -629,12 +714,12 @@ function renderFieldInput(
 			wrap.append(input, trigger);
 
 			if (files.length > 0) {
-				const list = el("ul", { class: "biab-file__list" });
+				const list = el("ul", { class: "bd-file__list" });
 				files.forEach((f, idx) => {
 					const remove = el(
 						"button",
 						{
-							class: "biab-file__remove",
+							class: "bd-file__remove",
 							type: "button",
 							"aria-label": "Remove file",
 						},
@@ -644,9 +729,9 @@ function renderFieldInput(
 						set(files.filter((_, i) => i !== idx)),
 					);
 					list.append(
-						el("li", { class: "biab-file__item" }, [
-							el("span", { class: "biab-file__name" }, [f.name]),
-							el("span", { class: "biab-file__size" }, [
+						el("li", { class: "bd-file__item" }, [
+							el("span", { class: "bd-file__name" }, [f.name]),
+							el("span", { class: "bd-file__size" }, [
 								`${Math.round(f.size / 1024)} KB`,
 							]),
 							remove,
@@ -659,7 +744,7 @@ function renderFieldInput(
 		}
 		default: {
 			const node = el("input", {
-				class: "biab-input",
+				class: "bd-input",
 				type: "text",
 				placeholder: field.placeholder || "",
 			}) as HTMLInputElement;
@@ -682,24 +767,24 @@ function twoField(
 ): HTMLElement {
 	const [lt, rt] = Array.isArray(type) ? type : [type, type];
 	const left = el("input", {
-		class: "biab-input",
+		class: "bd-input",
 		type: lt,
 	}) as HTMLInputElement;
 	const right = el("input", {
-		class: "biab-input",
+		class: "bd-input",
 		type: rt,
 	}) as HTMLInputElement;
 	left.value = leftValue;
 	right.value = rightValue;
 	left.addEventListener("input", () => onChange(left.value, right.value));
 	right.addEventListener("input", () => onChange(left.value, right.value));
-	return el("div", { class: "biab-grid biab-grid--2" }, [
-		el("label", { class: "biab-grid__cell" }, [
-			el("span", { class: "biab-grid__label" }, [leftLabel]),
+	return el("div", { class: "bd-grid bd-grid--2" }, [
+		el("label", { class: "bd-grid__cell" }, [
+			el("span", { class: "bd-grid__label" }, [leftLabel]),
 			left,
 		]),
-		el("label", { class: "biab-grid__cell" }, [
-			el("span", { class: "biab-grid__label" }, [rightLabel]),
+		el("label", { class: "bd-grid__cell" }, [
+			el("span", { class: "bd-grid__label" }, [rightLabel]),
 			right,
 		]),
 	]);
@@ -728,10 +813,10 @@ function renderFieldRow(
 
 	if (showLabel && field.label) {
 		children.push(
-			el("label", { class: "biab-field__label" }, [
+			el("label", { class: "bd-field__label" }, [
 				field.label,
 				field.required
-					? el("span", { class: "biab-field__required" }, [" *"])
+					? el("span", { class: "bd-field__required" }, [" *"])
 					: null,
 			]),
 		);
@@ -748,13 +833,13 @@ function renderFieldRow(
 
 	if (errored) {
 		children.push(
-			el("p", { class: "biab-field__error" }, [
+			el("p", { class: "bd-field__error" }, [
 				ctx.snapshot.errors[field.id]?.message ?? "This field is required.",
 			]),
 		);
 	}
 	if (field.helpText) {
-		children.push(el("p", { class: "biab-field__help" }, [field.helpText]));
+		children.push(el("p", { class: "bd-field__help" }, [field.helpText]));
 	}
 
 	// `flat` is accepted for signature parity with the group renderer; rows look
@@ -764,14 +849,14 @@ function renderFieldRow(
 		"div",
 		{
 			class: classNames(
-				"biab-field",
-				`biab-field--${field.type}`,
-				field.required && "biab-field--required",
-				errored && "biab-field--error",
+				"bd-field",
+				`bd-field--${field.type}`,
+				field.required && "bd-field--required",
+				errored && "bd-field--error",
 			),
 			"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,
 		},
 		children,
 	);
@@ -783,7 +868,7 @@ function renderTree(
 	ctx: RenderCtx,
 	flat: boolean,
 ): HTMLElement {
-	const container = el("div", { class: "biab-tree" });
+	const container = el("div", { class: "bd-tree" });
 
 	for (const field of fields) {
 		if (field.type === "input_group") {
@@ -799,16 +884,16 @@ function renderTree(
 				"div",
 				{
 					class: classNames(
-						"biab-group",
-						flat ? "biab-group--flat" : "biab-group--card",
+						"bd-group",
+						flat ? "bd-group--flat" : "bd-group--card",
 					),
-					"data-biab-group": fieldCssKey(field),
+					"data-bd-group": fieldCssKey(field),
 				},
 				[],
 			);
 			if (field.label && field.showGroupLabel === true) {
 				groupNode.append(
-					el("div", { class: "biab-group__label" }, [field.label]),
+					el("div", { class: "bd-group__label" }, [field.label]),
 				);
 			}
 			groupNode.append(renderTree(visible, ctx, flat));
@@ -830,29 +915,29 @@ function renderTree(
 			const right = field.children?.[1];
 			const box = el(
 				"div",
-				{ class: classNames("biab-or", errored && "biab-or--error") },
+				{ class: classNames("bd-or", errored && "bd-or--error") },
 				[],
 			);
 			if (field.label) {
 				box.append(
-					el("div", { class: "biab-or__label" }, [
+					el("div", { class: "bd-or__label" }, [
 						field.label,
-						el("span", { class: "biab-or__hint" }, [" Fill at least one side"]),
+						el("span", { class: "bd-or__hint" }, [" Fill at least one side"]),
 					]),
 				);
 			}
-			const grid = el("div", { class: "biab-or__grid" }, [
-				el("div", { class: "biab-or__side" }, [
-					el("div", { class: "biab-or__side-label" }, [
+			const grid = el("div", { class: "bd-or__grid" }, [
+				el("div", { class: "bd-or__side" }, [
+					el("div", { class: "bd-or__side-label" }, [
 						field.orConditionConfig?.leftLabel || "Option A",
 					]),
 					left ? renderTree([left], ctx, flat) : null,
 				]),
-				el("div", { class: "biab-or__divider" }, [
-					el("span", { class: "biab-or__badge" }, ["OR"]),
+				el("div", { class: "bd-or__divider" }, [
+					el("span", { class: "bd-or__badge" }, ["OR"]),
 				]),
-				el("div", { class: "biab-or__side" }, [
-					el("div", { class: "biab-or__side-label" }, [
+				el("div", { class: "bd-or__side" }, [
+					el("div", { class: "bd-or__side-label" }, [
 						field.orConditionConfig?.rightLabel || "Option B",
 					]),
 					right ? renderTree([right], ctx, flat) : null,
@@ -861,7 +946,7 @@ function renderTree(
 			box.append(grid);
 			if (errored) {
 				box.append(
-					el("p", { class: "biab-or__error" }, [
+					el("p", { class: "bd-or__error" }, [
 						"Fill in at least one side to continue.",
 					]),
 				);
@@ -871,10 +956,10 @@ function renderTree(
 		}
 
 		if (field.type === "flex_row") {
-			const row = el("div", { class: "biab-flex-row" }, []);
+			const row = el("div", { class: "bd-flex-row" }, []);
 			for (const child of (field.children ?? []) as FormCoreField[]) {
 				row.append(
-					el("div", { class: "biab-flex-row__cell" }, [
+					el("div", { class: "bd-flex-row__cell" }, [
 						renderFieldRow(child, ctx, flat),
 					]),
 				);
@@ -902,17 +987,17 @@ function renderProgress(
 		return null;
 
 	if (settings.progressStyle === "bar") {
-		const fill = el("div", { class: "biab-progress__fill" });
+		const fill = el("div", { class: "bd-progress__fill" });
 		fill.style.width = `${((step + 1) / stepCount) * 100}%`;
-		return el("div", { class: "biab-progress biab-progress--bar" }, [
-			el("span", { class: "biab-progress__count" }, [
+		return el("div", { class: "bd-progress bd-progress--bar" }, [
+			el("span", { class: "bd-progress__count" }, [
 				`${step + 1} / ${stepCount}`,
 			]),
-			el("div", { class: "biab-progress__track" }, [fill]),
+			el("div", { class: "bd-progress__track" }, [fill]),
 		]);
 	}
 
-	const track = el("div", { class: "biab-progress__steps" });
+	const track = el("div", { class: "bd-progress__steps" });
 	steps.forEach((s, i) => {
 		const f = s[0];
 		const title =
@@ -925,8 +1010,8 @@ function renderProgress(
 			track.append(
 				el("div", {
 					class: classNames(
-						"biab-progress__line",
-						i <= step && "biab-progress__line--done",
+						"bd-progress__line",
+						i <= step && "bd-progress__line--done",
 					),
 				}),
 			);
@@ -935,9 +1020,9 @@ function renderProgress(
 			"span",
 			{
 				class: classNames(
-					"biab-progress__dot",
-					current && "biab-progress__dot--current",
-					done && "biab-progress__dot--done",
+					"bd-progress__dot",
+					current && "bd-progress__dot--current",
+					done && "bd-progress__dot--done",
 				),
 			},
 			[done ? "✓" : String(i + 1)],
@@ -946,25 +1031,25 @@ function renderProgress(
 			"button",
 			{
 				class: classNames(
-					"biab-progress__step",
-					current && "biab-progress__step--current",
+					"bd-progress__step",
+					current && "bd-progress__step--current",
 				),
 				type: "button",
 			},
-			[dot, el("span", { class: "biab-progress__title" }, [title])],
+			[dot, el("span", { class: "bd-progress__title" }, [title])],
 		);
 		stepNode.addEventListener("click", () => onJump(i));
 		track.append(stepNode);
 	});
 
-	return el("div", { class: "biab-progress biab-progress--steps" }, [
-		el("div", { class: "biab-progress__heading" }, ["Form Progress"]),
+	return el("div", { class: "bd-progress bd-progress--steps" }, [
+		el("div", { class: "bd-progress__heading" }, ["Form Progress"]),
 		track,
 	]);
 }
 
 // ─────────────────────────────────────────────────────────────────────────────
-// mountBiabForm — wire a controller to a host element and render reactively.
+// mountBdForm — wire a controller to a host element and render reactively.
 // ─────────────────────────────────────────────────────────────────────────────
 
 function resolveHost(elOrSelector: Element | string): HTMLElement {
@@ -974,16 +1059,16 @@ function resolveHost(elOrSelector: Element | string): HTMLElement {
 			: elOrSelector;
 	if (!host) {
 		throw new Error(
-			`mountBiabForm: no element found for ${typeof elOrSelector === "string" ? `selector "${elOrSelector}"` : "the provided node"}.`,
+			`mountBdForm: no element found for ${typeof elOrSelector === "string" ? `selector "${elOrSelector}"` : "the provided node"}.`,
 		);
 	}
 	return host as HTMLElement;
 }
 
-export function mountBiabForm(
+export function mountBdForm(
 	elOrSelector: Element | string,
-	opts: MountBiabFormOptions,
-): BiabFormInstance {
+	opts: MountBdFormOptions,
+): BdFormInstance {
 	const host = resolveHost(elOrSelector);
 	const extraClass = opts.class ?? opts.className;
 
@@ -1082,15 +1167,15 @@ export function mountBiabForm(
 
 	function render(snapshot: FormSnapshot): void {
 		const root = el("div", {
-			class: classNames("biab-form", extraClass),
-			"data-biab-status": snapshot.status,
+			class: classNames("bd-form", extraClass),
+			"data-bd-status": snapshot.status,
 		});
 
 		// Org icon (when the form opted into showOrgIcon).
 		if (snapshot.orgIcon) {
 			root.append(
 				el("img", {
-					class: "biab-form__org-icon",
+					class: "bd-form__org-icon",
 					src: snapshot.orgIcon,
 					alt: "",
 				}),
@@ -1099,13 +1184,13 @@ export function mountBiabForm(
 
 		// Loading / error states.
 		if (snapshot.status === "loading" || snapshot.status === "idle") {
-			root.append(el("div", { class: "biab-form__loading" }, ["Loading…"]));
+			root.append(el("div", { class: "bd-form__loading" }, ["Loading…"]));
 			swap(root);
 			return;
 		}
 		if (snapshot.status === "error") {
 			root.append(
-				el("div", { class: "biab-form__error" }, [
+				el("div", { class: "bd-form__error" }, [
 					snapshot.loadError || "Could not load this form.",
 				]),
 			);
@@ -1116,10 +1201,8 @@ export function mountBiabForm(
 		// Submitted confirmation.
 		if (snapshot.submitted) {
 			root.append(
-				el("div", { class: "biab-form__success" }, [
-					el("p", { class: "biab-form__success-title" }, [
-						"Thanks — we got it.",
-					]),
+				el("div", { class: "bd-form__success" }, [
+					el("p", { class: "bd-form__success-title" }, ["Thanks — we got it."]),
 				]),
 			);
 			swap(root);
@@ -1128,14 +1211,12 @@ export function mountBiabForm(
 
 		// Header (title / description).
 		if (snapshot.title || snapshot.description) {
-			const header = el("div", { class: "biab-form__header" }, []);
+			const header = el("div", { class: "bd-form__header" }, []);
 			if (snapshot.title)
-				header.append(
-					el("h2", { class: "biab-form__title" }, [snapshot.title]),
-				);
+				header.append(el("h2", { class: "bd-form__title" }, [snapshot.title]));
 			if (snapshot.description) {
 				header.append(
-					el("p", { class: "biab-form__description" }, [snapshot.description]),
+					el("p", { class: "bd-form__description" }, [snapshot.description]),
 				);
 			}
 			root.append(header);
@@ -1148,11 +1229,11 @@ export function mountBiabForm(
 		// Error summary banner.
 		if (snapshot.errorList.length > 0) {
 			root.append(
-				el("div", { class: "biab-form__error-summary" }, [
-					el("div", { class: "biab-form__error-summary-title" }, [
+				el("div", { class: "bd-form__error-summary" }, [
+					el("div", { class: "bd-form__error-summary-title" }, [
 						`Please complete the highlighted required field${snapshot.errorList.length === 1 ? "" : "s"}.`,
 					]),
-					el("div", { class: "biab-form__error-summary-list" }, [
+					el("div", { class: "bd-form__error-summary-list" }, [
 						snapshot.errorList.map((e) => e.label).join(", "),
 					]),
 				]),
@@ -1172,13 +1253,13 @@ export function mountBiabForm(
 		const flat = snapshot.settings.isConsecutive;
 		const stepWrap = el("div", {
 			class: animClass(snapshot.settings.animation, snapshot.forward),
-			"data-biab-step": String(snapshot.step),
+			"data-bd-step": String(snapshot.step),
 		});
 		if (snapshot.settings.animation === "scroll") {
 			// Reveal each top-level field on scroll. Class is the hook; CSS owns the
 			// transition. We add the visible state once it intersects.
 			for (const vf of snapshot.visibleFields) {
-				const reveal = el("div", { class: "biab-reveal" }, [
+				const reveal = el("div", { class: "bd-reveal" }, [
 					renderTree([vf], ctx, flat),
 				]);
 				stepWrap.append(reveal);
@@ -1202,7 +1283,7 @@ export function mountBiabForm(
 			const back = el(
 				"button",
 				{
-					class: "biab-btn biab-btn--ghost biab-btn--back",
+					class: "bd-btn bd-btn--ghost bd-btn--back",
 					type: "button",
 					...(snapshot.isFirstStep ? { disabled: true } : {}),
 				},
@@ -1215,7 +1296,7 @@ export function mountBiabForm(
 				advance = el(
 					"button",
 					{
-						class: "biab-btn biab-btn--next",
+						class: "bd-btn bd-btn--next",
 						type: "button",
 						...(snapshot.canAdvance ? {} : { disabled: true }),
 					},
@@ -1226,7 +1307,7 @@ export function mountBiabForm(
 				advance = el(
 					"button",
 					{
-						class: "biab-btn biab-btn--submit",
+						class: "bd-btn bd-btn--submit",
 						type: "button",
 						...(snapshot.submitting ? { disabled: true } : {}),
 					},
@@ -1234,20 +1315,20 @@ export function mountBiabForm(
 				);
 				advance.addEventListener("click", () => void doSubmit());
 			}
-			return el("div", { class: "biab-nav" }, [back, advance]);
+			return el("div", { class: "bd-nav" }, [back, advance]);
 		}
 
 		const submit = el(
 			"button",
 			{
-				class: "biab-btn biab-btn--submit",
+				class: "bd-btn bd-btn--submit",
 				type: "button",
 				...(snapshot.submitting ? { disabled: true } : {}),
 			},
 			[snapshot.submitting ? "Sending…" : submitLabel],
 		);
 		submit.addEventListener("click", () => void doSubmit());
-		return el("div", { class: "biab-nav" }, [submit]);
+		return el("div", { class: "bd-nav" }, [submit]);
 	}
 
 	const unsubscribe = controller.subscribe(render);
@@ -1268,17 +1349,17 @@ export function mountBiabForm(
 	};
 }
 
-/** Add the `biab-reveal--shown` hook once an element scrolls into view (scroll anim). */
+/** Add the `bd-reveal--shown` hook once an element scrolls into view (scroll anim). */
 function observeReveal(node: HTMLElement): void {
 	if (typeof IntersectionObserver === "undefined") {
-		node.classList.add("biab-reveal--shown");
+		node.classList.add("bd-reveal--shown");
 		return;
 	}
 	const obs = new IntersectionObserver(
 		(entries) => {
 			for (const entry of entries) {
 				if (entry.isIntersecting) {
-					node.classList.add("biab-reveal--shown");
+					node.classList.add("bd-reveal--shown");
 					obs.disconnect();
 					break;
 				}
@@ -1308,7 +1389,7 @@ import {
 	type ChatController,
 	createChatController,
 } from "./chat-core/index.js";
-import { BiabDevClient as BiabDevClientForSurfaces } from "./client.js";
+import { BdApiClient as BdClientForSurfaces } from "./client.js";
 import {
 	createStoreController,
 	type StoreController,
@@ -1327,7 +1408,7 @@ export function createStorefront(
 	options: CreateStorefrontOptions,
 ): StoreController {
 	return createStoreController({
-		client: new BiabDevClientForSurfaces({
+		client: new BdClientForSurfaces({
 			apiKey: options.apiKey,
 			baseUrl: options.baseUrl,
 		}),
@@ -1346,7 +1427,7 @@ export type CreateChatOptions = {
 /** Headless Front Desk chat — the native alternative to the iframe widget. */
 export function createChat(options: CreateChatOptions): ChatController {
 	return createChatController({
-		client: new BiabDevClientForSurfaces({
+		client: new BdClientForSurfaces({
 			apiKey: options.apiKey,
 			baseUrl: options.baseUrl,
 		}),
@@ -1377,7 +1458,7 @@ export type CreateBlogOptions = {
 /** Headless blog — posts, taxonomy, a single post, comments and likes. */
 export function createBlog(options: CreateBlogOptions): BlogController {
 	return createBlogController({
-		client: new BiabDevClientForSurfaces({
+		client: new BdClientForSurfaces({
 			apiKey: options.apiKey,
 			baseUrl: options.baseUrl,
 		}),
@@ -1402,7 +1483,7 @@ import {
 	type CheckoutController,
 	createCheckoutController,
 } from "./checkout-core/index.js";
-import { createBiabClient as createBiabClientForFollowers } from "./sdk.js";
+import { createBdClient as createBdClientForFollowers } from "./sdk.js";
 
 /** Headless checkout — mint a Stripe session, then `redirect()` or render it. */
 export function createCheckout(options: {
@@ -1411,7 +1492,7 @@ export function createCheckout(options: {
 	onError?: (error: Error) => void;
 }): CheckoutController {
 	return createCheckoutController({
-		client: new BiabDevClientForSurfaces({
+		client: new BdClientForSurfaces({
 			apiKey: options.apiKey,
 			baseUrl: options.baseUrl,
 		}),
@@ -1433,11 +1514,11 @@ export function createFollowers(options: {
 	baseUrl?: string;
 	onError?: (error: Error) => void;
 }): FollowersController {
-	// Followers hang off the PUBLISHABLE client (`createBiabClient`), not
-	// `BiabDevClient`: they are the one surface a browser calls directly with an
+	// Followers hang off the PUBLISHABLE client (`createBdClient`), not
+	// `BdApiClient`: they are the one surface a browser calls directly with an
 	// origin-locked `pk_…` token and no backend.
 	return createFollowersController({
-		client: createBiabClientForFollowers({
+		client: createBdClientForFollowers({
 			apiKey: options.token,
 			siteId: options.siteId,
 			baseUrl: options.baseUrl ?? DEFAULT_PACKAGE_BASE_URL_FOR_SURFACES,
@@ -1494,7 +1575,7 @@ export function createMarketing(options: {
 	onError?: (error: Error) => void;
 }): MarketingController {
 	return createMarketingController({
-		client: createBiabClientForFollowers({
+		client: createBdClientForFollowers({
 			apiKey: options.token,
 			siteId: options.siteId,
 			baseUrl: options.baseUrl ?? DEFAULT_PACKAGE_BASE_URL_FOR_SURFACES,
@@ -1512,7 +1593,7 @@ export function createVerify(
 ): VerifyController {
 	const { apiKey, baseUrl, ...rest } = options;
 	return createVerifyController({
-		client: new BiabDevClientForSurfaces({ apiKey, baseUrl }),
+		client: new BdClientForSurfaces({ apiKey, baseUrl }),
 		...rest,
 	});
 }
@@ -1544,7 +1625,7 @@ export function createPortal(options: {
 	onError?: (error: Error) => void;
 }): PortalController {
 	return createPortalController({
-		client: new BiabDevClientForSurfaces({
+		client: new BdClientForSurfaces({
 			apiKey: options.apiKey,
 			baseUrl: options.baseUrl,
 		}),