@businessdash/sdk 0.9.80 → 0.9.90

package/src/react.tsx

@@ -10,7 +10,7 @@
  * WHY THE DIRECTIVE IS HERE
  *
  * Without it, a React Server Components framework treats this module as server
- * code by default, and importing `<BiabForm>` into a page throws "you're
+ * code by default, and importing `<BdForm>` into a page throws "you're
  * importing a component that needs useState". The only way out is for every
  * consumer to hand-write a `"use client"` wrapper per component — which is
  * exactly what the Next App Router starter had to do, sixteen times, for
@@ -40,45 +40,27 @@ import {
 	createFollowersController,
 	createUserController,
 } from "./account-core/index.js";
-import {
-	buildAuthHref,
-	clearLocalFollow,
-	DEFAULT_AUTH_BASE_PATH,
-	followerStoreKey,
-	type LocalFollow,
-	readLocalFollow,
-	writeLocalFollow,
-} from "./auth-links.js";
+import { buildAuthHref, DEFAULT_AUTH_BASE_PATH } from "./auth-links.js";
 import { createBlogController } from "./blog-core/index.js";
 import { createChatController } from "./chat-core/index.js";
 import { createCheckoutController } from "./checkout-core/index.js";
-import { BiabDevClient } from "./client.js";
+import { BdApiClient } from "./client.js";
 import type {
 	BlogSessionInput,
 	BlogSessionResponse,
 	CartSessionResponse,
 	ChatbotAvailability,
-	ChatbotChatInput,
-	ChatbotChatResponse,
-	ChatbotConfig,
 	ChatbotFormDefinition,
-	ChatbotFormSubmitInput,
-	ChatbotFormSubmitResponse,
-	ChatbotMessage,
 	ChatbotSessionResponse,
-	ChatbotUiAction,
 	CheckoutSessionInput,
 	CheckoutSessionResponse,
 	DashboardSessionResponse,
 	GetSiteMarketingPageResponse,
-	ListSiteMarketingPagesResponse,
-	SiteMarketingPage,
-	SiteMarketingPageSummary,
 	StorefrontSessionInput,
 	StorefrontSessionResponse,
 } from "./contracts.js";
 import {
-	type BiabEmbedEvent,
+	type BdEmbedEvent,
 	DEFAULT_EMBED_SANDBOX,
 	DEFAULT_REFRESH_LEAD_MS,
 	type EmbedSessionState,
@@ -87,7 +69,7 @@ import {
 } from "./embed-protocol.js";
 import {
 	type AutocompleteConfig,
-	type BiabFormsClient,
+	type BdFormsClient,
 	buildAcceptAttr,
 	type CalculationConfig,
 	type CreateFormControllerOptions,
@@ -117,10 +99,16 @@ import {
 	unitsForCategory,
 } from "./forms-core/units.js";
 import { US_STATES } from "./forms-core/us-states.js";
-import { createMarketingController } from "./marketing-core/index.js";
+import {
+	createMarketingController,
+	type MarketingListView,
+	type MarketingPageView,
+	marketingListView,
+	marketingPageView,
+} from "./marketing-core/index.js";
 import { createPortalController } from "./portal-core/index.js";
 import type { FormFileValue, FormSchema, FormSubmitResult } from "./sdk.js";
-import { createBiabClient } from "./sdk.js";
+import { createBdClient } from "./sdk.js";
 import {
 	resolveSocialLinks,
 	SOCIAL_FALLBACK_GLYPH,
@@ -138,7 +126,7 @@ import {
 type SessionState<T> = EmbedSessionState<T>;
 
 function useEmbedSession<T extends { url: string; expiresAt: string }>(
-	loader: (client: BiabDevClient) => Promise<T>,
+	loader: (client: BdApiClient) => Promise<T>,
 	options: {
 		apiKey: string;
 		baseUrl: string;
@@ -147,7 +135,7 @@ function useEmbedSession<T extends { url: string; expiresAt: string }>(
 ) {
 	const { apiKey, baseUrl, refreshLeadMs = DEFAULT_REFRESH_LEAD_MS } = options;
 	const client = useMemo(
-		() => new BiabDevClient({ apiKey, baseUrl }),
+		() => new BdApiClient({ apiKey, baseUrl }),
 		[apiKey, baseUrl],
 	);
 	const [state, setState] = useState<SessionState<T>>({ status: "idle" });
@@ -200,11 +188,11 @@ function useEmbedSession<T extends { url: string; expiresAt: string }>(
  * that guards it live together. Kept exported here so existing
  * `@businessdash/sdk/react` imports keep working.
  */
-export type { BiabEmbedEvent } from "./embed-protocol.js";
+export type { BdEmbedEvent } from "./embed-protocol.js";
 
 function useEmbedMessages(
 	iframeRef: React.RefObject<HTMLIFrameElement | null>,
-	handler: (event: BiabEmbedEvent) => void,
+	handler: (event: BdEmbedEvent) => void,
 ) {
 	// The listener, and the origin check inside it, live in
 	// `embed-protocol.ts` so the Solid binding enforces exactly the same rule.
@@ -341,7 +329,7 @@ type EmbedIframeProps<T extends { url: string }> = {
 	errorFallback?:
 		| ((error: Error, refresh: () => void) => ReactNode)
 		| undefined;
-	onEvent?: ((event: BiabEmbedEvent) => void) | undefined;
+	onEvent?: ((event: BdEmbedEvent) => void) | undefined;
 	/** Extra `sandbox` tokens beyond the safe defaults. */
 	extraSandbox?: string | undefined;
 };
@@ -416,7 +404,7 @@ export type StorefrontProps = {
 	loadingFallback?: ReactNode;
 	errorFallback?: (error: Error, refresh: () => void) => ReactNode;
 	/** Fires for every event the embed posts. */
-	onEvent?: (event: BiabEmbedEvent) => void;
+	onEvent?: (event: BdEmbedEvent) => void;
 	/** Convenience: fires only on cart updates. */
 	onCartChange?: (count: number, subtotalCents: number) => void;
 	refreshLeadMs?: number;
@@ -444,9 +432,9 @@ export function Storefront({
 		{ apiKey, baseUrl, refreshLeadMs },
 	);
 	const handleEvent = useCallback(
-		(event: BiabEmbedEvent) => {
+		(event: BdEmbedEvent) => {
 			onEvent?.(event);
-			if (event.type === "biab:cart:update") {
+			if (event.type === "bd:cart:update") {
 				onCartChange?.(event.count, event.subtotalCents);
 			}
 		},
@@ -476,7 +464,7 @@ export type CartProps = {
 	title?: string;
 	loadingFallback?: ReactNode;
 	errorFallback?: (error: Error, refresh: () => void) => ReactNode;
-	onEvent?: (event: BiabEmbedEvent) => void;
+	onEvent?: (event: BdEmbedEvent) => void;
 	onCartChange?: (count: number, subtotalCents: number) => void;
 	refreshLeadMs?: number;
 };
@@ -498,9 +486,9 @@ export function Cart({
 		{ apiKey, baseUrl, refreshLeadMs },
 	);
 	const handleEvent = useCallback(
-		(event: BiabEmbedEvent) => {
+		(event: BdEmbedEvent) => {
 			onEvent?.(event);
-			if (event.type === "biab:cart:update") {
+			if (event.type === "bd:cart:update") {
 				onCartChange?.(event.count, event.subtotalCents);
 			}
 		},
@@ -536,7 +524,7 @@ export type CheckoutProps = {
 	children?: ReactNode;
 	loadingFallback?: ReactNode;
 	errorFallback?: (error: Error, refresh: () => void) => ReactNode;
-	onEvent?: (event: BiabEmbedEvent) => void;
+	onEvent?: (event: BdEmbedEvent) => void;
 	onSuccess?: (sessionId: string) => void;
 	onCancel?: (sessionId: string) => void;
 	onError?: (error: Error) => void;
@@ -561,7 +549,7 @@ export function Checkout(props: CheckoutProps) {
 	} = props;
 
 	const client = useMemo(
-		() => new BiabDevClient({ apiKey, baseUrl }),
+		() => new BdApiClient({ apiKey, baseUrl }),
 		[apiKey, baseUrl],
 	);
 
@@ -585,12 +573,11 @@ export function Checkout(props: CheckoutProps) {
 	}, [client, cart, mode, onError]);
 
 	const handleEvent = useCallback(
-		(event: BiabEmbedEvent) => {
+		(event: BdEmbedEvent) => {
 			onEvent?.(event);
-			if (event.type === "biab:checkout:success") onSuccess?.(event.sessionId);
-			else if (event.type === "biab:checkout:cancel")
-				onCancel?.(event.sessionId);
-			else if (event.type === "biab:checkout:error")
+			if (event.type === "bd:checkout:success") onSuccess?.(event.sessionId);
+			else if (event.type === "bd:checkout:cancel") onCancel?.(event.sessionId);
+			else if (event.type === "bd:checkout:error")
 				onError?.(new Error(event.message));
 		},
 		[onEvent, onSuccess, onCancel, onError],
@@ -674,7 +661,7 @@ export function CheckoutResult(props: CheckoutResultProps) {
 			setState({ status: "error", error: new Error("Missing session id.") });
 			return;
 		}
-		const client = new BiabDevClient({ apiKey, baseUrl });
+		const client = new BdApiClient({ apiKey, baseUrl });
 		// We hit the *public* tRPC endpoint via fetch — no API key required.
 		const trpcUrl = baseUrl.replace(/\/api\/package\/v1\/?$/, "");
 		const requestUrl = `${trpcUrl}/api/trpc/store.checkoutSessionStatus?input=${encodeURIComponent(
@@ -743,7 +730,7 @@ export type BlogProps = {
 	title?: string;
 	loadingFallback?: ReactNode;
 	errorFallback?: (error: Error, refresh: () => void) => ReactNode;
-	onEvent?: (event: BiabEmbedEvent) => void;
+	onEvent?: (event: BdEmbedEvent) => void;
 	refreshLeadMs?: number;
 };
 
@@ -757,7 +744,7 @@ export type ChatbotProps = {
 	title?: string;
 	loadingFallback?: ReactNode;
 	errorFallback?: (error: Error, refresh: () => void) => ReactNode;
-	onEvent?: (event: BiabEmbedEvent) => void;
+	onEvent?: (event: BdEmbedEvent) => void;
 	/** Convenience: fires when the assistant replies. */
 	onAssistantMessage?: (content: string, model?: string) => void;
 	refreshLeadMs?: number;
@@ -780,9 +767,9 @@ export function Chatbot({
 		{ apiKey, baseUrl, refreshLeadMs },
 	);
 	const handleEvent = useCallback(
-		(event: BiabEmbedEvent) => {
+		(event: BdEmbedEvent) => {
 			onEvent?.(event);
-			if (event.type === "biab:chatbot:assistant-message") {
+			if (event.type === "bd:chatbot:assistant-message") {
 				onAssistantMessage?.(event.content, event.model);
 			}
 		},
@@ -817,7 +804,7 @@ export function useChatbot(options: { apiKey: string; baseUrl: string }) {
 	const controller = useMemo(
 		() =>
 			createChatController({
-				client: new BiabDevClient({ apiKey, baseUrl }),
+				client: new BdApiClient({ apiKey, baseUrl }),
 			}),
 		[apiKey, baseUrl],
 	);
@@ -832,7 +819,7 @@ export function useChatbot(options: { apiKey: string; baseUrl: string }) {
 
 	const uploadFile = useCallback(
 		(args: { sessionId: string; file: File; uploaderEmail?: string | null }) =>
-			new BiabDevClient({ apiKey, baseUrl }).chatbot.uploadFile(args),
+			new BdApiClient({ apiKey, baseUrl }).chatbot.uploadFile(args),
 		[apiKey, baseUrl],
 	);
 
@@ -876,7 +863,7 @@ export function useStorefront(options: {
 	const controller = useMemo(
 		() =>
 			createStoreController({
-				client: new BiabDevClient({ apiKey, baseUrl }),
+				client: new BdApiClient({ apiKey, baseUrl }),
 				...(pageSize ? { pageSize } : {}),
 				...(categoryId ? { categoryId } : {}),
 			}),
@@ -1009,52 +996,52 @@ const inlineLayoutStyles = {
  * Opt-in default visual theme for {@link ChatbotInline}. Every rule is wrapped
  * in `:where(…)` so it has **zero specificity** — any class a consumer passes
  * via `classNames` (or their global CSS) overrides it without `!important`.
- * Scoped to the `[data-biab-chatbot]` root (set only when `unstyled` is false),
+ * Scoped to the `[data-bd-chatbot]` root (set only when `unstyled` is false),
  * and targets the per-slot `data-slot` attributes the component stamps on each
  * element. Injected once into `<head>` (id-guarded). This is what makes the
  * inline component a polished drop-in instead of bare divs, while preserving
  * the headless contract for anyone who wants to style it themselves.
  */
-const CHATBOT_INLINE_STYLE_ID = "biab-chatbot-inline-styles";
+const CHATBOT_INLINE_STYLE_ID = "bd-chatbot-inline-styles";
 const CHATBOT_INLINE_CSS = `
-:where([data-biab-chatbot]){font-size:14px;color:inherit;background:var(--biab-chatbot-bg,Canvas);border:1px solid color-mix(in srgb,currentColor 12%,transparent);border-radius:16px;}
-:where([data-biab-chatbot] [data-slot="header"]){padding:12px 16px;border-bottom:1px solid color-mix(in srgb,currentColor 10%,transparent);}
-:where([data-biab-chatbot] [data-slot="header-title"]){font-weight:600;}
-:where([data-biab-chatbot] [data-slot="header-subtitle"]){font-size:12px;opacity:.6;margin-top:2px;}
-:where([data-biab-chatbot] [data-slot="presence-strip"]){display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 16px;font-size:12px;border-bottom:1px solid color-mix(in srgb,currentColor 8%,transparent);opacity:.85;}
-:where([data-biab-chatbot] [data-slot="message-list"]){padding:16px;gap:12px;}
-:where([data-biab-chatbot] [data-slot="message-row"]){max-width:85%;width:fit-content;padding:8px 12px;border-radius:16px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere;box-shadow:0 1px 2px color-mix(in srgb,currentColor 8%,transparent);}
-:where([data-biab-chatbot] [data-slot="message-row"][data-role="user"]){align-self:flex-end;background:var(--biab-chatbot-accent,#0d9488);color:#fff;border-bottom-right-radius:4px;}
-:where([data-biab-chatbot] [data-slot="message-row"][data-role="assistant"]){align-self:flex-start;background:color-mix(in srgb,currentColor 8%,transparent);border-bottom-left-radius:4px;}
-:where([data-biab-chatbot] [data-slot="message-pending"]){align-self:flex-start;width:fit-content;padding:8px 12px;background-image:linear-gradient(90deg,currentColor 35%,color-mix(in srgb,currentColor 25%,transparent) 50%,currentColor 65%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:biab-chatbot-shimmer 2s linear infinite;}
-:where([data-biab-chatbot] [data-slot="error-text"]){align-self:center;font-size:12px;color:#dc2626;}
-:where([data-biab-chatbot] [data-slot="input-bar"]){gap:8px;padding:12px;border-top:1px solid color-mix(in srgb,currentColor 10%,transparent);}
-:where([data-biab-chatbot] [data-slot="input-field"]){padding:8px 12px;border-radius:10px;border:1px solid color-mix(in srgb,currentColor 15%,transparent);background:transparent;color:inherit;font:inherit;outline:none;}
-:where([data-biab-chatbot] [data-slot="input-field"]:focus-visible){border-color:var(--biab-chatbot-accent,#0d9488);}
-:where([data-biab-chatbot] [data-slot="send-button"]){padding:8px 14px;border-radius:10px;border:none;background:var(--biab-chatbot-accent,#0d9488);color:#fff;font-weight:500;cursor:pointer;}
-:where([data-biab-chatbot] [data-slot="send-button"]:disabled){opacity:.5;cursor:default;}
-:where([data-biab-chatbot] [data-slot="upload-button"]){display:inline-flex;align-items:center;justify-content:center;padding:0 6px;border:none;background:transparent;color:inherit;font-size:18px;line-height:1;cursor:pointer;opacity:.7;}
-:where([data-biab-chatbot] [data-slot="upload-button"]:hover){opacity:1;}
-:where([data-biab-chatbot] [data-slot="upload-button"]:disabled){opacity:.4;cursor:default;}
-:where([data-biab-chatbot] [data-slot="message-file"]){align-self:flex-end;max-width:85%;padding:8px 12px;border-radius:16px;border-bottom-right-radius:4px;background:var(--biab-chatbot-accent,#0d9488);color:#fff;text-decoration:none;font-size:13px;word-break:break-all;}
-:where([data-biab-chatbot] [data-slot="message-image"]){align-self:flex-end;max-width:85%;border-radius:12px;overflow:hidden;}
-:where([data-biab-chatbot] [data-slot="jump-latest"]){position:absolute;left:50%;bottom:72px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:4px;padding:6px 12px;border-radius:999px;border:1px solid color-mix(in srgb,currentColor 15%,transparent);background:var(--biab-chatbot-bg,Canvas);font-size:12px;font-weight:500;cursor:pointer;box-shadow:0 2px 10px color-mix(in srgb,currentColor 20%,transparent);}
-:where([data-biab-chatbot] [data-slot="form-card"]){display:flex;flex-direction:column;gap:10px;align-self:stretch;padding:14px;border-radius:14px;border:1px solid color-mix(in srgb,currentColor 14%,transparent);background:color-mix(in srgb,currentColor 4%,transparent);}
-:where([data-biab-chatbot] [data-slot="form-title"]){font-weight:600;}
-:where([data-biab-chatbot] [data-slot="form-description"]){font-size:12px;opacity:.7;}
-:where([data-biab-chatbot] [data-slot="form-field"]){gap:4px;}
-:where([data-biab-chatbot] [data-slot="form-label"]){font-size:12px;font-weight:500;opacity:.85;}
-:where([data-biab-chatbot] [data-slot="form-input"],[data-biab-chatbot] [data-slot="form-textarea"],[data-biab-chatbot] [data-slot="form-select"]){padding:8px 10px;border-radius:8px;border:1px solid color-mix(in srgb,currentColor 15%,transparent);background:transparent;color:inherit;font:inherit;outline:none;}
-:where([data-biab-chatbot] [data-slot="form-input"]:focus-visible,[data-biab-chatbot] [data-slot="form-textarea"]:focus-visible,[data-biab-chatbot] [data-slot="form-select"]:focus-visible){border-color:var(--biab-chatbot-accent,#0d9488);}
-:where([data-biab-chatbot] [data-slot="form-submit"]){padding:8px 14px;border-radius:8px;border:none;background:var(--biab-chatbot-accent,#0d9488);color:#fff;font-weight:500;cursor:pointer;}
-:where([data-biab-chatbot] [data-slot="form-submit"]:disabled){opacity:.5;cursor:default;}
-:where([data-biab-chatbot] [data-slot="form-error"]){font-size:12px;color:#dc2626;}
-:where([data-biab-chatbot] [data-slot="form-receipt"]){font-size:13px;opacity:.8;}
-@keyframes biab-chatbot-shimmer{from{background-position:100% 0;}to{background-position:0 0;}}
-@media (prefers-reduced-motion:reduce){:where([data-biab-chatbot] [data-slot="message-pending"]){animation:none;-webkit-text-fill-color:currentColor;}}
-@property --biab-chatbot-fade{syntax:"<length>";inherits:false;initial-value:0px;}
-@keyframes biab-chatbot-fade-b{from{--biab-chatbot-fade:24px;}to{--biab-chatbot-fade:0px;}}
-@supports (animation-timeline:scroll()){:where([data-biab-chatbot] [data-slot="message-list"]){-webkit-mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - var(--biab-chatbot-fade,0px)),transparent 100%);mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - var(--biab-chatbot-fade,0px)),transparent 100%);animation:biab-chatbot-fade-b 1ms linear both;animation-timeline:scroll(self y);animation-range:calc(100% - 96px) 100%;}}
+:where([data-bd-chatbot]){font-size:14px;color:inherit;background:var(--bd-chatbot-bg,Canvas);border:1px solid color-mix(in srgb,currentColor 12%,transparent);border-radius:16px;}
+:where([data-bd-chatbot] [data-slot="header"]){padding:12px 16px;border-bottom:1px solid color-mix(in srgb,currentColor 10%,transparent);}
+:where([data-bd-chatbot] [data-slot="header-title"]){font-weight:600;}
+:where([data-bd-chatbot] [data-slot="header-subtitle"]){font-size:12px;opacity:.6;margin-top:2px;}
+:where([data-bd-chatbot] [data-slot="presence-strip"]){display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 16px;font-size:12px;border-bottom:1px solid color-mix(in srgb,currentColor 8%,transparent);opacity:.85;}
+:where([data-bd-chatbot] [data-slot="message-list"]){padding:16px;gap:12px;}
+:where([data-bd-chatbot] [data-slot="message-row"]){max-width:85%;width:fit-content;padding:8px 12px;border-radius:16px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere;box-shadow:0 1px 2px color-mix(in srgb,currentColor 8%,transparent);}
+:where([data-bd-chatbot] [data-slot="message-row"][data-role="user"]){align-self:flex-end;background:var(--bd-chatbot-accent,#0d9488);color:#fff;border-bottom-right-radius:4px;}
+:where([data-bd-chatbot] [data-slot="message-row"][data-role="assistant"]){align-self:flex-start;background:color-mix(in srgb,currentColor 8%,transparent);border-bottom-left-radius:4px;}
+:where([data-bd-chatbot] [data-slot="message-pending"]){align-self:flex-start;width:fit-content;padding:8px 12px;background-image:linear-gradient(90deg,currentColor 35%,color-mix(in srgb,currentColor 25%,transparent) 50%,currentColor 65%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:bd-chatbot-shimmer 2s linear infinite;}
+:where([data-bd-chatbot] [data-slot="error-text"]){align-self:center;font-size:12px;color:#dc2626;}
+:where([data-bd-chatbot] [data-slot="input-bar"]){gap:8px;padding:12px;border-top:1px solid color-mix(in srgb,currentColor 10%,transparent);}
+:where([data-bd-chatbot] [data-slot="input-field"]){padding:8px 12px;border-radius:10px;border:1px solid color-mix(in srgb,currentColor 15%,transparent);background:transparent;color:inherit;font:inherit;outline:none;}
+:where([data-bd-chatbot] [data-slot="input-field"]:focus-visible){border-color:var(--bd-chatbot-accent,#0d9488);}
+:where([data-bd-chatbot] [data-slot="send-button"]){padding:8px 14px;border-radius:10px;border:none;background:var(--bd-chatbot-accent,#0d9488);color:#fff;font-weight:500;cursor:pointer;}
+:where([data-bd-chatbot] [data-slot="send-button"]:disabled){opacity:.5;cursor:default;}
+:where([data-bd-chatbot] [data-slot="upload-button"]){display:inline-flex;align-items:center;justify-content:center;padding:0 6px;border:none;background:transparent;color:inherit;font-size:18px;line-height:1;cursor:pointer;opacity:.7;}
+:where([data-bd-chatbot] [data-slot="upload-button"]:hover){opacity:1;}
+:where([data-bd-chatbot] [data-slot="upload-button"]:disabled){opacity:.4;cursor:default;}
+:where([data-bd-chatbot] [data-slot="message-file"]){align-self:flex-end;max-width:85%;padding:8px 12px;border-radius:16px;border-bottom-right-radius:4px;background:var(--bd-chatbot-accent,#0d9488);color:#fff;text-decoration:none;font-size:13px;word-break:break-all;}
+:where([data-bd-chatbot] [data-slot="message-image"]){align-self:flex-end;max-width:85%;border-radius:12px;overflow:hidden;}
+:where([data-bd-chatbot] [data-slot="jump-latest"]){position:absolute;left:50%;bottom:72px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:4px;padding:6px 12px;border-radius:999px;border:1px solid color-mix(in srgb,currentColor 15%,transparent);background:var(--bd-chatbot-bg,Canvas);font-size:12px;font-weight:500;cursor:pointer;box-shadow:0 2px 10px color-mix(in srgb,currentColor 20%,transparent);}
+:where([data-bd-chatbot] [data-slot="form-card"]){display:flex;flex-direction:column;gap:10px;align-self:stretch;padding:14px;border-radius:14px;border:1px solid color-mix(in srgb,currentColor 14%,transparent);background:color-mix(in srgb,currentColor 4%,transparent);}
+:where([data-bd-chatbot] [data-slot="form-title"]){font-weight:600;}
+:where([data-bd-chatbot] [data-slot="form-description"]){font-size:12px;opacity:.7;}
+:where([data-bd-chatbot] [data-slot="form-field"]){gap:4px;}
+:where([data-bd-chatbot] [data-slot="form-label"]){font-size:12px;font-weight:500;opacity:.85;}
+:where([data-bd-chatbot] [data-slot="form-input"],[data-bd-chatbot] [data-slot="form-textarea"],[data-bd-chatbot] [data-slot="form-select"]){padding:8px 10px;border-radius:8px;border:1px solid color-mix(in srgb,currentColor 15%,transparent);background:transparent;color:inherit;font:inherit;outline:none;}
+:where([data-bd-chatbot] [data-slot="form-input"]:focus-visible,[data-bd-chatbot] [data-slot="form-textarea"]:focus-visible,[data-bd-chatbot] [data-slot="form-select"]:focus-visible){border-color:var(--bd-chatbot-accent,#0d9488);}
+:where([data-bd-chatbot] [data-slot="form-submit"]){padding:8px 14px;border-radius:8px;border:none;background:var(--bd-chatbot-accent,#0d9488);color:#fff;font-weight:500;cursor:pointer;}
+:where([data-bd-chatbot] [data-slot="form-submit"]:disabled){opacity:.5;cursor:default;}
+:where([data-bd-chatbot] [data-slot="form-error"]){font-size:12px;color:#dc2626;}
+:where([data-bd-chatbot] [data-slot="form-receipt"]){font-size:13px;opacity:.8;}
+@keyframes bd-chatbot-shimmer{from{background-position:100% 0;}to{background-position:0 0;}}
+@media (prefers-reduced-motion:reduce){:where([data-bd-chatbot] [data-slot="message-pending"]){animation:none;-webkit-text-fill-color:currentColor;}}
+@property --bd-chatbot-fade{syntax:"<length>";inherits:false;initial-value:0px;}
+@keyframes bd-chatbot-fade-b{from{--bd-chatbot-fade:24px;}to{--bd-chatbot-fade:0px;}}
+@supports (animation-timeline:scroll()){:where([data-bd-chatbot] [data-slot="message-list"]){-webkit-mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - var(--bd-chatbot-fade,0px)),transparent 100%);mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - var(--bd-chatbot-fade,0px)),transparent 100%);animation:bd-chatbot-fade-b 1ms linear both;animation-timeline:scroll(self y);animation-range:calc(100% - 96px) 100%;}}
 `;
 
 export type ChatbotInlineProps = {
@@ -1460,7 +1447,7 @@ export function ChatbotInline({
 			className={
 				[classNames.root, className].filter(Boolean).join(" ") || undefined
 			}
-			data-biab-chatbot={unstyled ? undefined : ""}
+			data-bd-chatbot={unstyled ? undefined : ""}
 			style={{ ...inlineLayoutStyles.root, ...style }}
 		>
 			{title !== null ? (
@@ -2118,7 +2105,7 @@ export type ProgrammaticAuthOptions = {
 	returnTo?: string;
 	/** Pre-fill the email on the platform-hosted page (sign-in / sign-up only). */
 	loginHint?: string;
-	/** Override the auth-handler basePath. Defaults to "/api/biab-auth". */
+	/** Override the auth-handler basePath. Defaults to "/api/bd-auth". */
 	basePath?: string;
 };
 
@@ -2141,7 +2128,7 @@ export function signUp(options: ProgrammaticAuthOptions = {}): void {
 }
 
 export type ProgrammaticSignOutOptions = {
-	/** Override the auth-handler basePath. Defaults to "/api/biab-auth". */
+	/** Override the auth-handler basePath. Defaults to "/api/bd-auth". */
 	basePath?: string;
 	/**
 	 * Default `"redirect"` — navigates through `/sign-out` (matches the
@@ -2181,7 +2168,7 @@ export async function signOut(
 
 export type ProgrammaticPasswordResetInput = {
 	email: string;
-	/** Override the auth-handler basePath. Defaults to "/api/biab-auth". */
+	/** Override the auth-handler basePath. Defaults to "/api/bd-auth". */
 	basePath?: string;
 	/**
 	 * Optional return path the platform-hosted reset page sends the user to
@@ -2193,7 +2180,7 @@ export type ProgrammaticPasswordResetInput = {
 
 /**
  * Programmatic "forgot password" — POSTs to the auth handler's
- * `/password-reset` route, which the SDK forwards to BIAB. The server
+ * `/password-reset` route, which the SDK forwards to BD. The server
  * returns `{ ok: true }` regardless of whether an account matched
  * (intentional anti-leak), and emails the platform-hosted reset link
  * out-of-band when a match exists.
@@ -2297,7 +2284,7 @@ export function useFollowers(options: UseFollowersOptions) {
 	const controller = useMemo(
 		() =>
 			createFollowersController({
-				client: createBiabClient({
+				client: createBdClient({
 					apiKey: token,
 					siteId,
 					baseUrl: baseUrl ?? DEFAULT_PACKAGE_BASE_URL,
@@ -2338,7 +2325,7 @@ export function useCheckout(options: { apiKey: string; baseUrl: string }) {
 	const controller = useMemo(
 		() =>
 			createCheckoutController({
-				client: new BiabDevClient({ apiKey, baseUrl }),
+				client: new BdApiClient({ apiKey, baseUrl }),
 			}),
 		[apiKey, baseUrl],
 	);
@@ -2362,12 +2349,46 @@ export function useCheckout(options: { apiKey: string; baseUrl: string }) {
 }
 
 // ─── Marketing pages — list, lazy-load per page, preload ─────────────────────
+//
+// All three hooks are thin React shells over `createMarketingController`.
+// They used to reimplement the fetch, the status flag and the in-flight
+// guard here, which meant a fix in the core never reached React — and the
+// parity gate was satisfied by an unused import rather than by the code.
+//
+// What stays React's own business is the SYNCHRONOUS cache read. The core
+// deliberately does not duplicate the client's cache, and React needs the
+// first render to be able to paint a cached page without a loading flash.
+
+/** Unchanged public shape — now an alias of the core's, so the two cannot
+ *  drift apart the way they did before. */
+type MarketingPageState = MarketingPageView;
+
+/** One controller per hook instance. The cache they share lives a layer down
+ *  in the client, so this costs a subscriber set and nothing else. */
+function useMarketingController(
+	apiKey: string,
+	baseUrl: string,
+	siteId: string,
+) {
+	const client = useMemo(
+		() => new BdApiClient({ apiKey, baseUrl }),
+		[apiKey, baseUrl],
+	);
+	const controller = useMemo(
+		() => createMarketingController({ client: client.site(siteId) }),
+		[client, siteId],
+	);
+	useEffect(() => () => controller.destroy(), [controller]);
 
-type MarketingPageState =
-	| { status: "idle"; page: null }
-	| { status: "loading"; page: null }
-	| { status: "ready"; page: SiteMarketingPage | null }
-	| { status: "error"; page: null; error: Error };
+	const subscribe = useCallback(
+		(onStoreChange: () => void) => controller.subscribe(() => onStoreChange()),
+		[controller],
+	);
+	const getSnapshot = useCallback(() => controller.snapshot(), [controller]);
+	const snap = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+
+	return { client, controller, snap };
+}
 
 /**
  * Lazy-fetch a single marketing page by `pageKey`. The hook reads from the
@@ -2389,61 +2410,30 @@ export function useMarketingPage(options: {
 	refresh: () => Promise<void>;
 } {
 	const { apiKey, baseUrl, siteId, pageKey, enabled = true } = options;
-	const client = useMemo(
-		() => new BiabDevClient({ apiKey, baseUrl }),
-		[apiKey, baseUrl],
-	);
-	const initial = client.site(siteId).marketingPages.getCached(pageKey);
-	const [state, setState] = useState<MarketingPageState>(
-		initial
-			? { status: "ready", page: initial.page }
-			: { status: "idle", page: null },
-	);
-
-	const fetchOnce = useCallback(
-		async (skipCache = false) => {
-			if (!enabled) return;
-			setState({ status: "loading", page: null });
-			try {
-				const response = await client
-					.site(siteId)
-					.marketingPages.get(pageKey, { skipCache });
-				setState({ status: "ready", page: response.page });
-			} catch (err) {
-				setState({
-					status: "error",
-					page: null,
-					error:
-						err instanceof Error
-							? err
-							: new Error("Marketing page load failed"),
-				});
-			}
-		},
-		[client, siteId, pageKey, enabled],
+	const { client, controller, snap } = useMarketingController(
+		apiKey,
+		baseUrl,
+		siteId,
 	);
 
 	useEffect(() => {
 		if (!enabled) return;
-		// Cache hit: render synchronously, no fetch.
-		const hit = client.site(siteId).marketingPages.getCached(pageKey);
-		if (hit) {
-			setState({ status: "ready", page: hit.page });
-			return;
-		}
-		void fetchOnce(false);
-	}, [client, siteId, pageKey, enabled, fetchOnce]);
+		void controller.open(pageKey);
+	}, [controller, pageKey, enabled]);
 
-	const refresh = useCallback(() => fetchOnce(true), [fetchOnce]);
+	const refresh = useCallback(
+		() => controller.open(pageKey, { skipCache: true }),
+		[controller, pageKey],
+	);
 
-	return { ...state, refresh };
+	// The synchronous cache read is React's to do — the controller cannot,
+	// because the cache lives in the client. Everything after it is the core's.
+	const cached =
+		client.site(siteId).marketingPages.getCached(pageKey)?.page ?? null;
+	return { ...marketingPageView(snap, pageKey, cached), refresh };
 }
 
-type MarketingPageListState =
-	| { status: "idle"; pages: null }
-	| { status: "loading"; pages: null }
-	| { status: "ready"; pages: SiteMarketingPageSummary[] }
-	| { status: "error"; pages: null; error: Error };
+type MarketingPageListState = MarketingListView;
 
 /**
  * Loads the payload-free directory of marketing pages for a site. Pair with
@@ -2458,38 +2448,18 @@ export function useMarketingPagesList(options: {
 	refresh: () => Promise<void>;
 } {
 	const { apiKey, baseUrl, siteId, enabled = true } = options;
-	const client = useMemo(
-		() => new BiabDevClient({ apiKey, baseUrl }),
-		[apiKey, baseUrl],
-	);
-	const [state, setState] = useState<MarketingPageListState>({
-		status: "idle",
-		pages: null,
-	});
+	const { controller, snap } = useMarketingController(apiKey, baseUrl, siteId);
 
-	const fetchOnce = useCallback(async () => {
-		if (!enabled) return;
-		setState({ status: "loading", pages: null });
-		try {
-			const response: ListSiteMarketingPagesResponse = await client
-				.site(siteId)
-				.marketingPages.list();
-			setState({ status: "ready", pages: response.pages });
-		} catch (err) {
-			setState({
-				status: "error",
-				pages: null,
-				error:
-					err instanceof Error ? err : new Error("Marketing pages list failed"),
-			});
-		}
-	}, [client, siteId, enabled]);
+	// This hook only ever calls `load()`, so the controller's single `status`
+	// is describing the index and nothing else.
+	const refresh = useCallback(() => controller.load(), [controller]);
 
 	useEffect(() => {
-		void fetchOnce();
-	}, [fetchOnce]);
+		if (!enabled) return;
+		void controller.load();
+	}, [controller, enabled]);
 
-	return { ...state, refresh: fetchOnce };
+	return { ...marketingListView(snap), refresh };
 }
 
 /**
@@ -2504,19 +2474,21 @@ export function useMarketingPagePreloader(options: {
 	siteId: string;
 }): (pageKey: string) => Promise<GetSiteMarketingPageResponse | null> {
 	const { apiKey, baseUrl, siteId } = options;
-	const client = useMemo(
-		() => new BiabDevClient({ apiKey, baseUrl }),
-		[apiKey, baseUrl],
+	const { client, controller } = useMarketingController(
+		apiKey,
+		baseUrl,
+		siteId,
 	);
 	return useCallback(
 		async (pageKey: string) => {
-			try {
-				return await client.site(siteId).marketingPages.prefetch(pageKey);
-			} catch {
-				return null;
-			}
+			// The core swallows prefetch failures on purpose — a guess about
+			// where the visitor is going must never surface as an error on the
+			// page they are actually reading. Reading the cache afterwards is
+			// how this keeps returning the response its signature promises.
+			await controller.prefetch(pageKey);
+			return client.site(siteId).marketingPages.getCached(pageKey) ?? null;
 		},
-		[client, siteId],
+		[client, controller, siteId],
 	);
 }
 
@@ -2549,7 +2521,7 @@ export function VerifyEmailFlow(props: {
 }) {
 	const { apiKey, baseUrl, sessionToken, currentEmail } = props;
 	const client = useMemo(
-		() => new BiabDevClient({ apiKey, baseUrl }),
+		() => new BdApiClient({ apiKey, baseUrl }),
 		[apiKey, baseUrl],
 	);
 	const [email, setEmail] = useState(currentEmail ?? "");
@@ -2627,7 +2599,7 @@ export function VerifyEmailConfirm(props: {
 }) {
 	const { apiKey, baseUrl, sessionToken, token, onVerified } = props;
 	const client = useMemo(
-		() => new BiabDevClient({ apiKey, baseUrl }),
+		() => new BdApiClient({ apiKey, baseUrl }),
 		[apiKey, baseUrl],
 	);
 	const [state, setState] = useState<
@@ -2698,7 +2670,7 @@ export function VerifyPhoneFlow(props: {
 }) {
 	const { apiKey, baseUrl, sessionToken, currentPhone, onVerified } = props;
 	const client = useMemo(
-		() => new BiabDevClient({ apiKey, baseUrl }),
+		() => new BdApiClient({ apiKey, baseUrl }),
 		[apiKey, baseUrl],
 	);
 	const [phone, setPhone] = useState(currentPhone ?? "");
@@ -2818,7 +2790,7 @@ export function VerifyPhoneFlow(props: {
  * bundled: it's ~1,600 entries that change only when Lucide does. An author who
  * curated `allowedIcons` skips the fetch entirely.
  */
-function BiabIconSelect({
+function BdIconSelect({
 	field,
 	value,
 	set,
@@ -2851,19 +2823,19 @@ function BiabIconSelect({
 	const results = useMemo(() => filterIconNames(all, query), [all, query]);
 
 	return (
-		<div className="biab-iconselect">
+		<div className="bd-iconselect">
 			<input
-				className="biab-input biab-iconselect__search"
+				className="bd-input bd-iconselect__search"
 				onChange={(e) => setQuery(e.target.value)}
 				placeholder={field.placeholder || "Search icons…"}
 				type="text"
 				value={query}
 			/>
 			{selected && (
-				<span className="biab-iconselect__current">
+				<span className="bd-iconselect__current">
 					<img alt={selected} height={16} src={iconUrl(selected)} width={16} />
 					<button
-						className="biab-iconselect__clear"
+						className="bd-iconselect__clear"
 						onClick={() => set("")}
 						type="button"
 					>
@@ -2871,12 +2843,12 @@ function BiabIconSelect({
 					</button>
 				</span>
 			)}
-			<div className="biab-iconselect__grid">
+			<div className="bd-iconselect__grid">
 				{results.map((name) => (
 					<button
 						aria-label={name}
 						aria-pressed={selected === name}
-						className={`biab-iconselect__item${
+						className={`bd-iconselect__item${
 							selected === name ? "is-selected" : ""
 						}`}
 						key={name}
@@ -2899,7 +2871,7 @@ function BiabIconSelect({
  * pending file and flushed by the controller at submit, exactly like
  * `file_upload`, then replaced by its stored URL.
  */
-function BiabImageInput({
+function BdImageInput({
 	field,
 	value,
 	set,
@@ -2928,15 +2900,13 @@ function BiabImageInput({
 	const url = typeof value === "string" ? value : "";
 
 	return (
-		<div className="biab-imageinput">
+		<div className="bd-imageinput">
 			{sources === "both" && (
-				<div className="biab-imageinput__modes">
+				<div className="bd-imageinput__modes">
 					{(["upload", "url"] as const).map((m) => (
 						<button
 							aria-pressed={mode === m}
-							className={`biab-imageinput__mode${
-								mode === m ? "is-active" : ""
-							}`}
+							className={`bd-imageinput__mode${mode === m ? "is-active" : ""}`}
 							key={m}
 							onClick={() => setMode(m)}
 							type="button"
@@ -2949,7 +2919,7 @@ function BiabImageInput({
 			{mode === "upload" && sources !== "url" ? (
 				<input
 					accept={(cfg.allowedTypes ?? ["image/*"]).join(",")}
-					className="biab-input biab-imageinput__file"
+					className="bd-input bd-imageinput__file"
 					onChange={(e) => {
 						const file = e.target.files?.[0];
 						if (!file) return;
@@ -2966,7 +2936,7 @@ function BiabImageInput({
 				/>
 			) : (
 				<input
-					className="biab-input biab-imageinput__url"
+					className="bd-input bd-imageinput__url"
 					onChange={(e) => set(e.target.value)}
 					placeholder={field.placeholder || "https://example.com/image.png"}
 					type="url"
@@ -2976,12 +2946,12 @@ function BiabImageInput({
 			{cfg.showPreview !== false && (pending || url) ? (
 				<img
 					alt=""
-					className="biab-imageinput__preview"
+					className="bd-imageinput__preview"
 					src={pending ? "" : url}
 				/>
 			) : null}
 			{pending && (
-				<span className="biab-imageinput__pending">
+				<span className="bd-imageinput__pending">
 					{pending.name} — uploads on submit.
 				</span>
 			)}
@@ -2989,13 +2959,13 @@ function BiabImageInput({
 	);
 }
 
-// ─── BiabForm (schema-driven drop-in) ──────────────────────────────────────
+// ─── BdForm (schema-driven drop-in) ──────────────────────────────────────
 //
-// `<BiabForm slug="contact" client={biab} />` renders a complete, validated,
-// multi-step-aware form from a BIAB form schema. All runtime behaviour lives in
+// `<BdForm slug="contact" client={bd} />` renders a complete, validated,
+// multi-step-aware form from a BD form schema. All runtime behaviour lives in
 // the framework-agnostic `createFormController` (from `@businessdash/sdk/forms`);
 // this binding is the React view layer: it subscribes via `useSyncExternalStore`
-// and renders the controller's `snapshot()` with the `biab-*` light-DOM class
+// and renders the controller's `snapshot()` with the `bd-*` light-DOM class
 // convention (no shadow root) so consumer CSS cascades and overrides freely.
 //
 // It reproduces the dashboard FormPreview: per-type field rendering,
@@ -3003,14 +2973,14 @@ function BiabImageInput({
 // gating, flex_row layout, multi-step ("consecutive") navigation with a bar or
 // step progress indicator, entrance animations, and the org icon.
 
-// `BiabFormsClient` is defined in `forms-core/controller.ts` — the layer that
+// `BdFormsClient` is defined in `forms-core/controller.ts` — the layer that
 // actually consumes it — and re-exported here so it stays importable from
 // `@businessdash/sdk/react`, where consumers have always found it.
-export type { BiabFormsClient };
+export type { BdFormsClient };
 
-// A `BiabFormProvider` lets a consumer supply the client once at the root and
-// drop `<BiabForm slug="…" />` anywhere below without threading the client prop.
-const BiabFormClientContext = createContext<BiabFormsClient | null>(null);
+// A `BdFormProvider` lets a consumer supply the client once at the root and
+// drop `<BdForm slug="…" />` anywhere below without threading the client prop.
+const BdFormClientContext = createContext<BdFormsClient | null>(null);
 
 /** Production package-API base URL — the default target for a publishable token
  *  when no `baseUrl` is supplied. Override via the `baseUrl` prop for staging or
@@ -3019,11 +2989,11 @@ const BiabFormClientContext = createContext<BiabFormsClient | null>(null);
  *  request), so a browser publishable-token client must target the apex. */
 export const DEFAULT_PACKAGE_BASE_URL = "https://biab.app/api/package/v1";
 
-export type BiabFormProviderProps = {
+export type BdFormProviderProps = {
 	/** A forms client (or same-origin proxy). Provide this OR a publishable `token`. */
-	client?: BiabFormsClient;
+	client?: BdFormsClient;
 	/**
-	 * A publishable token (`pk_…`) — builds a browser client that calls BIAB
+	 * A publishable token (`pk_…`) — builds a browser client that calls BD
 	 * directly. Safe in browser JS: it's origin-locked (the browser sends Origin
 	 * automatically), rate-limited, and scoped to public read/submit actions
 	 * only. Requires `siteId`. Use instead of `client` for the zero-backend path.
@@ -3036,21 +3006,21 @@ export type BiabFormProviderProps = {
 	children: ReactNode;
 };
 
-/** Provide a BIAB forms client to every nested `<BiabForm>`. Pass a `client`, or
+/** Provide a BD forms client to every nested `<BdForm>`. Pass a `client`, or
  *  a publishable `token` + `siteId` (+ optional `baseUrl`) to build a browser
  *  client. */
-export function BiabFormProvider({
+export function BdFormProvider({
 	client,
 	token,
 	siteId,
 	baseUrl,
 	children,
-}: BiabFormProviderProps) {
-	const resolved = useMemo<BiabFormsClient | null>(
+}: BdFormProviderProps) {
+	const resolved = useMemo<BdFormsClient | null>(
 		() =>
 			client ??
 			(token && siteId
-				? createBiabClient({
+				? createBdClient({
 						apiKey: token,
 						siteId,
 						baseUrl: baseUrl ?? DEFAULT_PACKAGE_BASE_URL,
@@ -3059,18 +3029,18 @@ export function BiabFormProvider({
 		[client, token, siteId, baseUrl],
 	);
 	return (
-		<BiabFormClientContext.Provider value={resolved}>
+		<BdFormClientContext.Provider value={resolved}>
 			{children}
-		</BiabFormClientContext.Provider>
+		</BdFormClientContext.Provider>
 	);
 }
 
-/** Read the client from a surrounding `<BiabFormProvider>`, if any. */
-export function useBiabFormsClient(): BiabFormsClient | null {
-	return useContext(BiabFormClientContext);
+/** Read the client from a surrounding `<BdFormProvider>`, if any. */
+export function useBdFormsClient(): BdFormsClient | null {
+	return useContext(BdFormClientContext);
 }
 
-/** Fetch open booking slots for an auto-`schedule` field. BiabForm derives this
+/** Fetch open booking slots for an auto-`schedule` field. BdForm derives this
  *  from its client + slug and provides it via context so the deep field renderer
  *  needn't thread it. Undefined when the client can't fetch slots. */
 type FetchScheduleSlots = (input: {
@@ -3082,28 +3052,28 @@ const FetchScheduleSlotsContext = createContext<FetchScheduleSlots | undefined>(
 	undefined,
 );
 
-/** Autofill (`autocomplete`) config for the field tree, provided by `<BiabForm>`.
+/** Autofill (`autocomplete`) config for the field tree, provided by `<BdForm>`.
  *  Default `{}` → inference on, no overrides. */
 const AutocompleteContext = createContext<AutocompleteConfig>({});
 
-type BiabScheduleAutoValue = { slotStartAt?: string; timezone?: string };
+type BdScheduleAutoValue = { slotStartAt?: string; timezone?: string };
 
-/** Auto-schedule (instant booking) picker for `<BiabForm>`: fetches the assigned
+/** Auto-schedule (instant booking) picker for `<BdForm>`: fetches the assigned
  *  staff's open slots and lets the visitor pick one. Value `{ slotStartAt,
  *  timezone }`; the server books the meeting on submit. Dependency-light (plain
- *  elements + `biab-field__schedule-*` classes). */
-function BiabScheduleAuto({
+ *  elements + `bd-field__schedule-*` classes). */
+function BdScheduleAuto({
 	field,
 	value,
 	onChange,
 }: {
 	field: { id: string };
 	value: unknown;
-	onChange: (v: BiabScheduleAutoValue) => void;
+	onChange: (v: BdScheduleAutoValue) => void;
 }) {
 	const fetchSlots = useContext(FetchScheduleSlotsContext);
-	const v: BiabScheduleAutoValue =
-		value && typeof value === "object" ? (value as BiabScheduleAutoValue) : {};
+	const v: BdScheduleAutoValue =
+		value && typeof value === "object" ? (value as BdScheduleAutoValue) : {};
 	const tz =
 		typeof Intl !== "undefined"
 			? (Intl.DateTimeFormat().resolvedOptions().timeZone ?? "UTC")
@@ -3135,24 +3105,20 @@ function BiabScheduleAuto({
 
 	if (!fetchSlots) {
 		return (
-			<p className="biab-field__schedule-hint">Booking isn't available here.</p>
+			<p className="bd-field__schedule-hint">Booking isn't available here.</p>
 		);
 	}
 	if (phase === "loading" || phase === "idle") {
-		return (
-			<p className="biab-field__schedule-hint">Loading available times…</p>
-		);
+		return <p className="bd-field__schedule-hint">Loading available times…</p>;
 	}
 	if (phase === "error") {
 		return (
-			<p className="biab-field__schedule-hint">
-				Couldn't load times right now.
-			</p>
+			<p className="bd-field__schedule-hint">Couldn't load times right now.</p>
 		);
 	}
 	if (slots.length === 0) {
 		return (
-			<p className="biab-field__schedule-hint">
+			<p className="bd-field__schedule-hint">
 				No open times in the next few weeks.
 			</p>
 		);
@@ -3176,14 +3142,14 @@ function BiabScheduleAuto({
 	}
 
 	return (
-		<div className="biab-field__schedule-auto">
+		<div className="bd-field__schedule-auto">
 			{[...byDay.entries()].map(([day, times]) => (
-				<div className="biab-field__schedule-day" key={day}>
-					<p className="biab-field__schedule-day-label">{day}</p>
-					<div className="biab-field__schedule-times">
+				<div className="bd-field__schedule-day" key={day}>
+					<p className="bd-field__schedule-day-label">{day}</p>
+					<div className="bd-field__schedule-times">
 						{times.map((t) => (
 							<button
-								className="biab-field__schedule-slot"
+								className="bd-field__schedule-slot"
 								data-selected={v.slotStartAt === t.startAt ? "true" : undefined}
 								key={t.startAt}
 								onClick={() =>
@@ -3216,18 +3182,18 @@ function useFormSnapshot(controller: FormController) {
 	return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
 }
 
-export type BiabFormProps = {
+export type BdFormProps = {
 	/** Form slug to load via the client. Omit when passing a pre-fetched `schema`. */
 	slug?: string;
 	/**
 	 * SDK client (or same-origin proxy). Falls back to `token`, then to a
-	 * surrounding `<BiabFormProvider>`. Required unless a pre-fetched `schema` is
+	 * surrounding `<BdFormProvider>`. Required unless a pre-fetched `schema` is
 	 * supplied AND no submit is needed (submit needs a client).
 	 */
-	client?: BiabFormsClient;
+	client?: BdFormsClient;
 	/**
-	 * A publishable token (`pk_…`) — builds a browser client that calls BIAB
-	 * directly, so `<BiabForm slug token siteId />` works with zero backend
+	 * A publishable token (`pk_…`) — builds a browser client that calls BD
+	 * directly, so `<BdForm slug token siteId />` works with zero backend
 	 * wiring. Safe in browser JS (origin-locked, rate-limited, public
 	 * read/submit only). Requires `siteId`.
 	 */
@@ -3270,14 +3236,14 @@ export type BiabFormProps = {
 	 * (off). Wins over `autoComplete` and any schema-level token.
 	 */
 	fieldAutoComplete?: Record<string, string | boolean>;
-	/** Extra class on the root `.biab-form` element. `class` is accepted as an
+	/** Extra class on the root `.bd-form` element. `class` is accepted as an
 	 *  alias for non-JSX callers / parity with other framework bindings. */
 	className?: string;
 	class?: string;
 	style?: CSSProperties;
 };
 
-// ── biab-* class helpers (mirrors FormPreview's `fieldCssKey`) ───────────────
+// ── bd-* class helpers (mirrors FormPreview's `fieldCssKey`) ───────────────
 
 function cx(...parts: Array<string | false | null | undefined>): string {
 	return parts.filter(Boolean).join(" ");
@@ -3360,7 +3326,7 @@ function safeHttpHref(raw: string | undefined): string | undefined {
 // ── Self-contained date-range picker (no external calendar dep) ─────────────
 // A popover trigger + a month grid with click-to-select range. Stored value is
 // `{ start, end }` as `yyyy-MM-dd` strings (identical to the app's contract).
-// Styled via biab-* classes so consumers can theme it.
+// Styled via bd-* classes so consumers can theme it.
 
 function parseIsoDate(s: string | undefined): Date | null {
 	if (!s) return null;
@@ -3375,7 +3341,7 @@ function toIsoDate(d: Date): string {
 	return `${y}-${m}-${day}`;
 }
 
-const BIAB_MONTHS = [
+const BD_MONTHS = [
 	"January",
 	"February",
 	"March",
@@ -3389,9 +3355,9 @@ const BIAB_MONTHS = [
 	"November",
 	"December",
 ];
-const BIAB_WEEKDAYS = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
+const BD_WEEKDAYS = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
 
-function BiabDateRange({
+function BdDateRange({
 	value,
 	setValue,
 }: {
@@ -3458,12 +3424,12 @@ function BiabDateRange({
 		: "Pick a date range";
 
 	// Positioning is the only inline style (so the popover never overlaps content
-	// even before the CSS loads); everything visual lives in `biab-forms.css`,
+	// even before the CSS loads); everything visual lives in `bd-forms.css`,
 	// which mirrors the COSS/shadcn calendar (import it from the SDK).
 	return (
-		<div className="biab-daterange" ref={ref} style={{ position: "relative" }}>
+		<div className="bd-daterange" ref={ref} style={{ position: "relative" }}>
 			<button
-				className="biab-input biab-field__input biab-daterange__trigger"
+				className="bd-input bd-field__input bd-daterange__trigger"
 				onClick={() => setOpen((o) => !o)}
 				type="button"
 			>
@@ -3471,13 +3437,13 @@ function BiabDateRange({
 			</button>
 			{open && (
 				<div
-					className="biab-daterange__popover"
+					className="bd-daterange__popover"
 					style={{ position: "absolute", zIndex: 50 }}
 				>
-					<div className="biab-daterange__nav">
+					<div className="bd-daterange__nav">
 						<button
 							aria-label="Previous month"
-							className="biab-daterange__navbtn"
+							className="bd-daterange__navbtn"
 							onClick={() =>
 								setView((s) =>
 									s.m === 0 ? { y: s.y - 1, m: 11 } : { y: s.y, m: s.m - 1 },
@@ -3487,12 +3453,12 @@ function BiabDateRange({
 						>
 							‹
 						</button>
-						<span className="biab-daterange__title">
-							{BIAB_MONTHS[view.m]} {view.y}
+						<span className="bd-daterange__title">
+							{BD_MONTHS[view.m]} {view.y}
 						</span>
 						<button
 							aria-label="Next month"
-							className="biab-daterange__navbtn"
+							className="bd-daterange__navbtn"
 							onClick={() =>
 								setView((s) =>
 									s.m === 11 ? { y: s.y + 1, m: 0 } : { y: s.y, m: s.m + 1 },
@@ -3503,22 +3469,20 @@ function BiabDateRange({
 							›
 						</button>
 					</div>
-					<div className="biab-daterange__grid">
-						{BIAB_WEEKDAYS.map((w) => (
-							<span className="biab-daterange__dow" key={w}>
+					<div className="bd-daterange__grid">
+						{BD_WEEKDAYS.map((w) => (
+							<span className="bd-daterange__dow" key={w}>
 								{w}
 							</span>
 						))}
 						{cells.map((d, i) => {
 							if (!d) {
-								return (
-									<span className="biab-daterange__blank" key={`b-${i}`} />
-								);
+								return <span className="bd-daterange__blank" key={`b-${i}`} />;
 							}
 							const st = dayState(d);
 							return (
 								<button
-									className="biab-daterange__day"
+									className="bd-daterange__day"
 									data-range-end={st.end || undefined}
 									data-range-middle={st.middle || undefined}
 									data-range-start={st.start || undefined}
@@ -3539,9 +3503,9 @@ function BiabDateRange({
 	);
 }
 
-// ── Per-type input renderer (light DOM, biab-* classes, no shadcn) ──────────
+// ── Per-type input renderer (light DOM, bd-* classes, no shadcn) ──────────
 
-function BiabFieldInput({
+function BdFieldInput({
 	field,
 	value,
 	setValue,
@@ -3556,23 +3520,23 @@ function BiabFieldInput({
 	const set = (v: unknown) => setValue(field.id, v);
 	const ph = field.placeholder || "";
 	// Resolved HTML autofill token for this field (or undefined to omit the
-	// attribute). Honors the global `<BiabForm autoComplete>` switch and per-field
+	// attribute). Honors the global `<BdForm autoComplete>` switch and per-field
 	// overrides; see forms-core/autocomplete.ts.
 	const acConfig = useContext(AutocompleteContext);
 	const autoComplete = resolveFieldAutocomplete(field, acConfig);
 
 	switch (field.type) {
 		case "title":
-			return <h2 className="biab-field__title">{field.label || "Untitled"}</h2>;
+			return <h2 className="bd-field__title">{field.label || "Untitled"}</h2>;
 		case "subtitle":
-			return <h3 className="biab-field__subtitle">{field.label || ""}</h3>;
+			return <h3 className="bd-field__subtitle">{field.label || ""}</h3>;
 		case "separator":
-			return <hr className="biab-field__separator" />;
+			return <hr className="bd-field__separator" />;
 		case "richtext":
 			// `content` is server-sanitized HTML.
 			return field.content ? (
 				<div
-					className="biab-field__richtext"
+					className="bd-field__richtext"
 					// biome-ignore lint/security/noDangerouslySetInnerHtml: server-sanitized
 					dangerouslySetInnerHTML={{ __html: field.content }}
 				/>
@@ -3580,7 +3544,7 @@ function BiabFieldInput({
 		case "body_text":
 			// Plain body paragraph (no HTML). Display only.
 			return field.content ? (
-				<p className="biab-field__body">{field.content}</p>
+				<p className="bd-field__body">{field.content}</p>
 			) : null;
 		case "bullet_list": {
 			const lc = field.listConfig ?? {};
@@ -3588,20 +3552,20 @@ function BiabFieldInput({
 			const items = lc.items ?? [];
 			if (variant === "details") {
 				return (
-					<div className="biab-field__points">
+					<div className="bd-field__points">
 						{items.map((it, i) => (
-							<div className="biab-field__point" key={`${field.id}-li-${i}`}>
+							<div className="bd-field__point" key={`${field.id}-li-${i}`}>
 								{it.icon && (
 									<span
 										aria-hidden="true"
-										className="biab-field__point-icon"
+										className="bd-field__point-icon"
 										data-icon={it.icon}
 									/>
 								)}
-								<span className="biab-field__point-body">
-									<span className="biab-field__point-title">{it.text}</span>
+								<span className="bd-field__point-body">
+									<span className="bd-field__point-title">{it.text}</span>
 									{it.description && (
-										<span className="biab-field__point-desc">
+										<span className="bd-field__point-desc">
 											{it.description}
 										</span>
 									)}
@@ -3612,9 +3576,9 @@ function BiabFieldInput({
 				);
 			}
 			return (
-				<div className="biab-field__bullets">
+				<div className="bd-field__bullets">
 					{lc.title && (
-						<div className="biab-field__bullets-title">{lc.title}</div>
+						<div className="bd-field__bullets-title">{lc.title}</div>
 					)}
 					<ul>
 						{items.map((it, i) => (
@@ -3630,7 +3594,7 @@ function BiabFieldInput({
 			const rows = cfg.rows ?? [];
 			if (columns.length === 0) return null;
 			return (
-				<div className="biab-field__table">
+				<div className="bd-field__table">
 					<table>
 						<thead>
 							<tr>
@@ -3680,13 +3644,13 @@ function BiabFieldInput({
 			const hasVal = value !== null && value !== undefined && value !== "";
 			if (cfg?.sensitive && !hasVal) {
 				return (
-					<output className="biab-field__calc biab-field__calc--pending">
+					<output className="bd-field__calc bd-field__calc--pending">
 						Calculated on submit.
 					</output>
 				);
 			}
 			return (
-				<output className="biab-field__calc">
+				<output className="bd-field__calc">
 					{hasVal ? formatCalcValue(value as FormulaValue, cfg?.display) : "—"}
 				</output>
 			);
@@ -3701,7 +3665,7 @@ function BiabFieldInput({
 			return cfg.src ? (
 				<img
 					alt={cfg.alt || ""}
-					className="biab-field__image"
+					className="bd-field__image"
 					src={cfg.src}
 					style={{
 						width: cfg.width ? `${cfg.width}px` : "auto",
@@ -3719,7 +3683,7 @@ function BiabFieldInput({
 			return (
 				<textarea
 					autoComplete={autoComplete}
-					className="biab-textarea biab-field__input"
+					className="bd-textarea bd-field__input"
 					onChange={(e) => set(e.target.value)}
 					placeholder={ph}
 					rows={cfg.rows ?? 4}
@@ -3744,11 +3708,11 @@ function BiabFieldInput({
 					(field as { display?: string }).display,
 				)
 			) {
-				const listId = `biab-list-${field.id}`;
+				const listId = `bd-list-${field.id}`;
 				return (
 					<>
 						<input
-							className="biab-input biab-combobox biab-field__input"
+							className="bd-input bd-combobox bd-field__input"
 							list={listId}
 							onChange={(e) => set(e.target.value)}
 							placeholder={ph || "Search…"}
@@ -3765,7 +3729,7 @@ function BiabFieldInput({
 			}
 			return (
 				<select
-					className="biab-select biab-field__input"
+					className="bd-select bd-field__input"
 					onChange={(e) => set(e.target.value)}
 					value={typeof value === "string" ? value : ""}
 				>
@@ -3779,14 +3743,14 @@ function BiabFieldInput({
 			);
 		}
 		case "icon_select":
-			return <BiabIconSelect field={field} set={set} value={value} />;
+			return <BdIconSelect field={field} set={set} value={value} />;
 		case "image_input":
-			return <BiabImageInput field={field} set={set} value={value} />;
+			return <BdImageInput field={field} set={set} value={value} />;
 		case "radio":
 			return (
-				<div className="biab-field__radios">
+				<div className="bd-field__radios">
 					{(field.options ?? []).map((opt) => (
-						<label className="biab-field__radio" key={opt}>
+						<label className="bd-field__radio" key={opt}>
 							<input
 								checked={value === opt}
 								name={field.id}
@@ -3806,7 +3770,7 @@ function BiabFieldInput({
 			if ((field as { display?: string }).display === "dropdown") {
 				return (
 					<select
-						className="biab-select biab-field__input"
+						className="bd-select bd-field__input"
 						multiple
 						onChange={(e) =>
 							set(Array.from(e.target.selectedOptions).map((o) => o.value))
@@ -3822,11 +3786,11 @@ function BiabFieldInput({
 				);
 			}
 			return (
-				<div className="biab-field__checkboxes">
+				<div className="bd-field__checkboxes">
 					{(field.options ?? []).map((opt) => {
 						const checked = arr.includes(opt);
 						return (
-							<label className="biab-field__checkbox" key={opt}>
+							<label className="bd-field__checkbox" key={opt}>
 								<input
 									checked={checked}
 									onChange={(e) =>
@@ -3865,7 +3829,7 @@ function BiabFieldInput({
 			};
 			return (
 				<div
-					className="biab-field__choice-cards"
+					className="bd-field__choice-cards"
 					role={ccMulti ? "group" : "radiogroup"}
 				>
 					{ccOptions.map((opt) => {
@@ -3875,7 +3839,7 @@ function BiabFieldInput({
 						return (
 							<button
 								aria-pressed={active}
-								className="biab-field__choice-card"
+								className="bd-field__choice-card"
 								data-active={active ? "" : undefined}
 								data-product-id={opt.productId || undefined}
 								key={opt.label}
@@ -3886,35 +3850,35 @@ function BiabFieldInput({
 								{opt.imageUrl ? (
 									<img
 										alt={opt.label}
-										className="biab-field__choice-card-image"
+										className="bd-field__choice-card-image"
 										src={opt.imageUrl}
 									/>
 								) : opt.icon ? (
 									<span
 										aria-hidden="true"
-										className="biab-field__choice-card-icon"
+										className="bd-field__choice-card-icon"
 										data-icon={opt.icon}
 									/>
 								) : null}
-								<span className="biab-field__choice-card-body">
-									<span className="biab-field__choice-card-header">
-										<span className="biab-field__choice-card-label">
+								<span className="bd-field__choice-card-body">
+									<span className="bd-field__choice-card-header">
+										<span className="bd-field__choice-card-label">
 											{opt.label}
 										</span>
 										{opt.price ? (
-											<span className="biab-field__choice-card-price">
+											<span className="bd-field__choice-card-price">
 												{opt.price}
 											</span>
 										) : null}
 									</span>
 									{opt.description ? (
-										<span className="biab-field__choice-card-description">
+										<span className="bd-field__choice-card-description">
 											{opt.description}
 										</span>
 									) : null}
 									{safeHttpHref(opt.href) ? (
 										<a
-											className="biab-field__choice-card-link"
+											className="bd-field__choice-card-link"
 											href={safeHttpHref(opt.href)}
 											onClick={(e) => e.stopPropagation()}
 											rel="noopener noreferrer nofollow"
@@ -3932,7 +3896,7 @@ function BiabFieldInput({
 		}
 		case "boolean":
 			return (
-				<label className="biab-field__switch">
+				<label className="bd-field__switch">
 					<input
 						checked={value === true}
 						onChange={(e) => set(e.target.checked)}
@@ -3944,7 +3908,7 @@ function BiabFieldInput({
 		case "date":
 			return (
 				<input
-					className="biab-input biab-field__input"
+					className="bd-input bd-field__input"
 					onChange={(e) => set(e.target.value)}
 					type="date"
 					value={typeof value === "string" ? value : ""}
@@ -3973,7 +3937,7 @@ function BiabFieldInput({
 				};
 				return (
 					<select
-						className="biab-select biab-field__input"
+						className="bd-select bd-field__input"
 						onChange={(e) => set(e.target.value)}
 						value={typeof value === "string" ? value : ""}
 					>
@@ -3996,15 +3960,15 @@ function BiabFieldInput({
 					: {};
 			const inputType = (k: string) => (k === "date" ? "date" : "time");
 			return (
-				<div className="biab-field__grid2">
+				<div className="bd-field__grid2">
 					{pair.map((k) => (
-						<label className="biab-field__sub" key={k}>
-							<span className="biab-field__sublabel">
+						<label className="bd-field__sub" key={k}>
+							<span className="bd-field__sublabel">
 								{k[0]?.toUpperCase()}
 								{k.slice(1)}
 							</span>
 							<input
-								className="biab-input"
+								className="bd-input"
 								onChange={(e) => set({ ...v, [k]: e.target.value })}
 								type={inputType(k)}
 								value={v[k] ?? ""}
@@ -4015,7 +3979,7 @@ function BiabFieldInput({
 			);
 		}
 		case "date_range":
-			return <BiabDateRange setValue={(next) => set(next)} value={value} />;
+			return <BdDateRange setValue={(next) => set(next)} value={value} />;
 		case "slider": {
 			const min = field.sliderConfig?.min ?? 0;
 			const max = field.sliderConfig?.max ?? 100;
@@ -4025,10 +3989,10 @@ function BiabFieldInput({
 				unit === "currency" ? `$${n}` : unit === "percent" ? `${n}%` : `${n}`;
 			const v = typeof value === "number" ? value : min;
 			return (
-				<div className="biab-field__slider">
-					<div className="biab-field__sliderscale">
+				<div className="bd-field__slider">
+					<div className="bd-field__sliderscale">
 						<span>{fmt(min)}</span>
-						<span className="biab-field__slidervalue">{fmt(v)}</span>
+						<span className="bd-field__slidervalue">{fmt(v)}</span>
 						<span>{fmt(max)}</span>
 					</div>
 					<input
@@ -4046,14 +4010,11 @@ function BiabFieldInput({
 			const max = field.starRatingConfig?.maxStars ?? 5;
 			const v = typeof value === "number" ? value : 0;
 			return (
-				<div className="biab-field__stars">
+				<div className="bd-field__stars">
 					{Array.from({ length: max }).map((_, i) => (
 						<button
 							aria-label={`${i + 1} star${i ? "s" : ""}`}
-							className={cx(
-								"biab-field__star",
-								i < v && "biab-field__star--on",
-							)}
+							className={cx("bd-field__star", i < v && "bd-field__star--on")}
 							key={`${field.id}-star-${i}`}
 							onClick={() => set(i + 1)}
 							type="button"
@@ -4067,12 +4028,12 @@ function BiabFieldInput({
 		case "happiness_rating": {
 			const v = typeof value === "number" ? value : -1;
 			return (
-				<div className="biab-field__happiness">
+				<div className="bd-field__happiness">
 					{["😞", "😕", "😐", "🙂", "😄"].map((emoji, i) => (
 						<button
 							className={cx(
-								"biab-field__emoji",
-								i === v && "biab-field__emoji--on",
+								"bd-field__emoji",
+								i === v && "bd-field__emoji--on",
 							)}
 							key={emoji}
 							onClick={() => set(i)}
@@ -4087,16 +4048,16 @@ function BiabFieldInput({
 		case "stepper": {
 			const v = typeof value === "number" ? value : 0;
 			return (
-				<div className="biab-field__stepper">
+				<div className="bd-field__stepper">
 					<button
-						className="biab-btn biab-btn--ghost"
+						className="bd-btn bd-btn--ghost"
 						onClick={() => set(v - 1)}
 						type="button"
 					>
 						−
 					</button>
 					<input
-						className="biab-field__steppervalue"
+						className="bd-field__steppervalue"
 						inputMode="numeric"
 						onChange={(e) => {
 							const n = Number(e.target.value.replace(/[^\d-]/g, ""));
@@ -4105,7 +4066,7 @@ function BiabFieldInput({
 						value={String(v)}
 					/>
 					<button
-						className="biab-btn biab-btn--ghost"
+						className="bd-btn bd-btn--ghost"
 						onClick={() => set(v + 1)}
 						type="button"
 					>
@@ -4114,6 +4075,87 @@ function BiabFieldInput({
 				</div>
 			);
 		}
+		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 ?? {};
+			// Per-subfield autofill tokens (given/family/honorifics), suppressed when
+			// autofill is off for this field (global switch or per-field override).
+			const acOff = autoComplete === "off";
+			const part = (
+				k: "prefix" | "first" | "middle" | "last" | "suffix",
+				label: string,
+				ac: string,
+				placeholder: string,
+			) => (
+				<label className="bd-field__sub" key={k}>
+					<span className="bd-field__sublabel">{label}</span>
+					<input
+						autoComplete={acOff ? "off" : ac}
+						className="bd-input"
+						onChange={(e) => set({ ...v, [k]: e.target.value })}
+						placeholder={placeholder}
+						value={v[k] ?? ""}
+					/>
+				</label>
+			);
+			// The nicknames input keeps the raw comma-separated string while the
+			// visitor types; submit normalizes it into a string[] (and the server
+			// re-normalizes authoritatively).
+			const nicknamesText = Array.isArray(v.nicknames)
+				? v.nicknames.join(", ")
+				: typeof v.nicknames === "string"
+					? v.nicknames
+					: "";
+			return (
+				<div className="bd-field__name">
+					{cfg.prefix && part("prefix", "Title", "honorific-prefix", "Dr.")}
+					{cfg.middle ? (
+						<>
+							<div className="bd-field__grid2">
+								{part("first", "First name", "given-name", "Jane")}
+								{part("middle", "Middle name", "additional-name", "Quinn")}
+							</div>
+							{cfg.suffix ? (
+								<div className="bd-field__grid2">
+									{part("last", "Last name", "family-name", "Doe")}
+									{part("suffix", "Suffix", "honorific-suffix", "Jr.")}
+								</div>
+							) : (
+								part("last", "Last name", "family-name", "Doe")
+							)}
+						</>
+					) : (
+						<>
+							<div className="bd-field__grid2">
+								{part("first", "First name", "given-name", "Jane")}
+								{part("last", "Last name", "family-name", "Doe")}
+							</div>
+							{cfg.suffix &&
+								part("suffix", "Suffix", "honorific-suffix", "Jr.")}
+						</>
+					)}
+					{cfg.nicknames && (
+						<label className="bd-field__sub" key="nicknames">
+							<span className="bd-field__sublabel">Nicknames</span>
+							<input
+								autoComplete={acOff ? "off" : undefined}
+								className="bd-input"
+								onChange={(e) => set({ ...v, nicknames: e.target.value })}
+								placeholder="Johnny, JM — separate with commas"
+								value={nicknamesText}
+							/>
+						</label>
+					)}
+				</div>
+			);
+		}
 		case "address": {
 			const v =
 				value && typeof value === "object"
@@ -4128,23 +4170,23 @@ function BiabFieldInput({
 				{ k: "city", label: "City", ac: "address-level2" },
 			];
 			return (
-				<div className="biab-field__address">
+				<div className="bd-field__address">
 					{rows.map(({ k, label, ac }) => (
-						<label className="biab-field__sub" key={k}>
-							<span className="biab-field__sublabel">{label}</span>
+						<label className="bd-field__sub" key={k}>
+							<span className="bd-field__sublabel">{label}</span>
 							<input
 								autoComplete={acOff ? "off" : ac}
-								className="biab-input"
+								className="bd-input"
 								onChange={(e) => set({ ...v, [k]: e.target.value })}
 								value={v[k] ?? ""}
 							/>
 						</label>
 					))}
-					<label className="biab-field__sub" key="state">
-						<span className="biab-field__sublabel">State</span>
+					<label className="bd-field__sub" key="state">
+						<span className="bd-field__sublabel">State</span>
 						<select
 							autoComplete={acOff ? "off" : "address-level1"}
-							className="biab-select"
+							className="bd-select"
 							onChange={(e) => set({ ...v, state: e.target.value })}
 							value={v["state"] ?? ""}
 						>
@@ -4156,11 +4198,11 @@ function BiabFieldInput({
 							))}
 						</select>
 					</label>
-					<label className="biab-field__sub" key="zip">
-						<span className="biab-field__sublabel">Zip</span>
+					<label className="bd-field__sub" key="zip">
+						<span className="bd-field__sublabel">Zip</span>
 						<input
 							autoComplete={acOff ? "off" : "postal-code"}
-							className="biab-input"
+							className="bd-input"
 							inputMode="numeric"
 							onChange={(e) =>
 								// Numbers only (allow a single hyphen for ZIP+4).
@@ -4178,12 +4220,12 @@ function BiabFieldInput({
 			const presets = field.options ?? [];
 			const isCustom = v !== "" && !presets.includes(v);
 			return (
-				<div className="biab-field__colors">
+				<div className="bd-field__colors">
 					{presets.map((color) => (
 						<button
 							className={cx(
-								"biab-field__color",
-								v === color && "biab-field__color--on",
+								"bd-field__color",
+								v === color && "bd-field__color--on",
 							)}
 							key={color}
 							onClick={() => set(color)}
@@ -4195,8 +4237,8 @@ function BiabFieldInput({
 					{/* "Other" — native color input returning a single hex. */}
 					<label
 						className={cx(
-							"biab-field__color biab-field__color--custom",
-							isCustom && "biab-field__color--on",
+							"bd-field__color bd-field__color--custom",
+							isCustom && "bd-field__color--on",
 						)}
 						style={
 							isCustom
@@ -4230,14 +4272,14 @@ function BiabFieldInput({
 			const maxFiles = cfg.maxFiles ?? 1;
 			const remaining = Math.max(maxFiles - files.length, 0);
 			return (
-				<div className="biab-field__files">
-					{/* NOTE: no `biab-input` class — a consumer's base input styling
+				<div className="bd-field__files">
+					{/* NOTE: no `bd-input` class — a consumer's base input styling
 					    (e.g. `appearance: none`) breaks the native file control's
 					    rendering in Safari (glitched text + layout overlap). The file
-					    field is styled solely via `biab-field__fileinput`. */}
+					    field is styled solely via `bd-field__fileinput`. */}
 					<input
 						accept={buildAcceptAttr(cfg.allowedTypes)}
-						className="biab-field__fileinput"
+						className="bd-field__fileinput"
 						disabled={remaining === 0}
 						multiple={maxFiles > 1}
 						onChange={(e) => {
@@ -4266,19 +4308,19 @@ function BiabFieldInput({
 						type="file"
 					/>
 					{files.length > 0 && (
-						<ul className="biab-field__filelist">
+						<ul className="bd-field__filelist">
 							{files.map((f, i) => (
-								<li className="biab-field__fileitem" key={`${f.name}-${i}`}>
-									<span className="biab-field__filename">{f.name}</span>
+								<li className="bd-field__fileitem" key={`${f.name}-${i}`}>
+									<span className="bd-field__filename">{f.name}</span>
 									{isPendingFileValue(f) ? (
-										<span className="biab-field__filepending">
+										<span className="bd-field__filepending">
 											{" "}
 											· uploads on submit
 										</span>
 									) : null}
 									<button
 										aria-label="Remove file"
-										className="biab-field__fileremove"
+										className="bd-field__fileremove"
 										onClick={() => set(files.filter((_, idx) => idx !== i))}
 										type="button"
 									>
@@ -4308,24 +4350,24 @@ function BiabFieldInput({
 					? `${(pc.amountCents / 100).toFixed(2)} ${(pc.currency ?? "usd").toUpperCase()}`
 					: null;
 			return (
-				<div className="biab-field__card">
-					<div className="biab-field__card-row">
-						<span className="biab-field__card-brand">CARD</span>
-						<span className="biab-field__card-dots">•••• •••• •••• ••••</span>
-						<span className="biab-field__card-mode">
+				<div className="bd-field__card">
+					<div className="bd-field__card-row">
+						<span className="bd-field__card-brand">CARD</span>
+						<span className="bd-field__card-dots">•••• •••• •••• ••••</span>
+						<span className="bd-field__card-mode">
 							{deposit
 								? `Deposit${amount ? ` · ${amount}` : ""}`
 								: "Card on file"}
 						</span>
 					</div>
 					{pc?.description ? (
-						<p className="biab-field__card-desc">{pc.description}</p>
+						<p className="bd-field__card-desc">{pc.description}</p>
 					) : null}
-					<p className="biab-field__card-note">
+					<p className="bd-field__card-note">
 						Secure card entry via Stripe. Initialize Elements with{" "}
-						<code>biab.forms.paymentIntent(slug, "{field.id}")</code> (returns
-						the clientSecret + the org's connected account), confirm, then store
-						the intent id on this field before submit.
+						<code>bd.forms.paymentIntent(slug, "{field.id}")</code> (returns the
+						clientSecret + the org's connected account), confirm, then store the
+						intent id on this field before submit.
 					</p>
 				</div>
 			);
@@ -4335,7 +4377,7 @@ function BiabFieldInput({
 				(field as { scheduleConfig?: { mode?: string } }).scheduleConfig
 					?.mode === "auto"
 			) {
-				return <BiabScheduleAuto field={field} onChange={set} value={value} />;
+				return <BdScheduleAuto field={field} onChange={set} value={value} />;
 			}
 			const sc = (
 				field as {
@@ -4399,9 +4441,9 @@ function BiabFieldInput({
 				});
 			};
 			return (
-				<div className="biab-field__schedule">
+				<div className="bd-field__schedule">
 					{sc?.allowAsap !== false && (
-						<label className="biab-field__schedule-asap">
+						<label className="bd-field__schedule-asap">
 							<input
 								checked={sv.asap === true}
 								onChange={(e) => set({ ...sv, asap: e.target.checked })}
@@ -4411,14 +4453,14 @@ function BiabFieldInput({
 						</label>
 					)}
 					{/* Availability is additive: day/time choices show alongside ASAP. */}
-					<div className="biab-field__schedule-group">
-						<span className="biab-field__schedule-label">Preferred days</span>
-						<div className="biab-field__schedule-chips">
+					<div className="bd-field__schedule-group">
+						<span className="bd-field__schedule-label">Preferred days</span>
+						<div className="bd-field__schedule-chips">
 							{days.map((d) => (
 								<button
 									className={cx(
-										"biab-field__chip",
-										sv.days?.includes(d) && "biab-field__chip--on",
+										"bd-field__chip",
+										sv.days?.includes(d) && "bd-field__chip--on",
 									)}
 									key={d}
 									onClick={() => toggle("days", d)}
@@ -4429,14 +4471,14 @@ function BiabFieldInput({
 							))}
 						</div>
 					</div>
-					<div className="biab-field__schedule-group">
-						<span className="biab-field__schedule-label">Preferred times</span>
-						<div className="biab-field__schedule-chips">
+					<div className="bd-field__schedule-group">
+						<span className="bd-field__schedule-label">Preferred times</span>
+						<div className="bd-field__schedule-chips">
 							{windows.map((w) => (
 								<button
 									className={cx(
-										"biab-field__chip",
-										sv.times?.includes(w) && "biab-field__chip--on",
+										"bd-field__chip",
+										sv.times?.includes(w) && "bd-field__chip--on",
 									)}
 									key={w}
 									onClick={() => toggle("times", w)}
@@ -4449,7 +4491,7 @@ function BiabFieldInput({
 					</div>
 					{sc?.allowNotes !== false && (
 						<textarea
-							className="biab-input biab-field__schedule-notes"
+							className="bd-input bd-field__schedule-notes"
 							onChange={(e) => set({ ...sv, notes: e.target.value })}
 							placeholder="Anything we should know about timing?"
 							value={sv.notes ?? ""}
@@ -4465,15 +4507,15 @@ function BiabFieldInput({
 				phoneIntl,
 			);
 			return (
-				<div className="biab-field__phone">
+				<div className="bd-field__phone">
 					{field.phoneConfig?.showFlags && (
-						<span aria-hidden className="biab-field__flag">
+						<span aria-hidden className="bd-field__flag">
 							🇺🇸
 						</span>
 					)}
 					<input
 						autoComplete={autoComplete}
-						className="biab-input biab-field__input"
+						className="bd-input bd-field__input"
 						inputMode="tel"
 						maxLength={phoneIntl ? 20 : 14}
 						onChange={(e) => set(formatPhoneLocal(e.target.value, phoneIntl))}
@@ -4490,7 +4532,7 @@ function BiabFieldInput({
 			return (
 				<input
 					autoComplete={autoComplete}
-					className="biab-input biab-field__input"
+					className="bd-input bd-field__input"
 					onChange={(e) => set(e.target.value)}
 					placeholder={ph || "you@example.com"}
 					type="email"
@@ -4506,7 +4548,7 @@ function BiabFieldInput({
 			return (
 				<input
 					autoComplete={autoComplete}
-					className="biab-input biab-field__input"
+					className="bd-input bd-field__input"
 					inputMode="url"
 					onChange={(e) => set({ ...uv, url: e.target.value })}
 					placeholder={ph || "https://example.com"}
@@ -4521,7 +4563,7 @@ function BiabFieldInput({
 				(field as { allowNegative?: boolean }).allowNegative === false;
 			return (
 				<input
-					className="biab-input biab-field__input"
+					className="bd-input bd-field__input"
 					inputMode={allowDecimal ? "decimal" : "numeric"}
 					min={noNegative ? 0 : undefined}
 					onChange={(e) => {
@@ -4548,12 +4590,12 @@ function BiabFieldInput({
 			const allowNeg = field.currencyConfig?.allowNegative === true;
 			const allowDec = field.currencyConfig?.allowDecimal !== false;
 			return (
-				<div className="biab-field__currency">
-					<span aria-hidden="true" className="biab-field__currency-symbol">
+				<div className="bd-field__currency">
+					<span aria-hidden="true" className="bd-field__currency-symbol">
 						{symbol}
 					</span>
 					<input
-						className="biab-input biab-field__input"
+						className="bd-input bd-field__input"
 						inputMode="decimal"
 						min={allowNeg ? undefined : 0}
 						onChange={(e) => {
@@ -4605,9 +4647,9 @@ function BiabFieldInput({
 			const hint =
 				typeof num === "number" ? formatMeasurement(num, unit, category) : "";
 			return (
-				<div className="biab-field__measurement">
+				<div className="bd-field__measurement">
 					<input
-						className="biab-input biab-field__input"
+						className="bd-input bd-field__input"
 						inputMode="decimal"
 						onChange={(e) => {
 							const raw = e.target.value;
@@ -4621,12 +4663,12 @@ function BiabFieldInput({
 						value={num}
 					/>
 					{mode === "fixed" ? (
-						<span aria-hidden="true" className="biab-field__unit">
+						<span aria-hidden="true" className="bd-field__unit">
 							{unit}
 						</span>
 					) : (
 						<select
-							className="biab-select biab-field__unit-select"
+							className="bd-select bd-field__unit-select"
 							onChange={(e) => emit(num, e.target.value)}
 							value={unit}
 						>
@@ -4638,7 +4680,7 @@ function BiabFieldInput({
 						</select>
 					)}
 					{hint ? (
-						<span className="biab-field__measurement-hint">≈ {hint}</span>
+						<span className="bd-field__measurement-hint">≈ {hint}</span>
 					) : null}
 				</div>
 			);
@@ -4647,7 +4689,7 @@ function BiabFieldInput({
 			return (
 				<input
 					autoComplete={autoComplete}
-					className="biab-input biab-field__input"
+					className="bd-input bd-field__input"
 					onChange={(e) => set(e.target.value)}
 					placeholder={ph}
 					value={typeof value === "string" ? value : ""}
@@ -4666,7 +4708,7 @@ const NO_LABEL_TYPES = new Set([
 	"table",
 ]);
 
-function BiabFieldRow({
+function BdFieldRow({
 	field,
 	value,
 	error,
@@ -4683,39 +4725,39 @@ function BiabFieldRow({
 	return (
 		<div
 			className={cx(
-				"biab-field",
-				`biab-field--${field.type}`,
-				field.required && "biab-field--required",
-				error && "biab-field--error",
+				"bd-field",
+				`bd-field--${field.type}`,
+				field.required && "bd-field--required",
+				error && "bd-field--error",
 			)}
-			data-biab-field={fieldCssKey(field)}
-			data-biab-type={field.type}
+			data-bd-field={fieldCssKey(field)}
+			data-bd-type={field.type}
 			data-field-id={field.id}
 		>
 			{showLabel && (
 				// A visual field heading, not a control-associated <label> — the field's
-				// inputs render in BiabFieldInput below and carry no shared id to point a
+				// inputs render in BdFieldInput below and carry no shared id to point a
 				// `htmlFor` at, so a <label> here would be an orphan.
-				<span className="biab-field__label biab-label">
+				<span className="bd-field__label bd-label">
 					{field.label || ""}
-					{field.required && <span className="biab-field__required">*</span>}
+					{field.required && <span className="bd-field__required">*</span>}
 				</span>
 			)}
-			<BiabFieldInput
+			<BdFieldInput
 				field={field}
 				setValue={setValue}
 				upload={upload}
 				value={value}
 			/>
-			{error && <p className="biab-field__error">{error.message}</p>}
-			{field.helpText && <p className="biab-field__help">{field.helpText}</p>}
+			{error && <p className="bd-field__error">{error.message}</p>}
+			{field.helpText && <p className="bd-field__help">{field.helpText}</p>}
 		</div>
 	);
 }
 
 /** Recursively render a field subtree, mirroring FormPreview's `RenderTree`:
  *  input_group (+ concurrent reveal), condition_block, or_condition, flex_row. */
-function BiabRenderTree({
+function BdRenderTree({
 	fields,
 	values,
 	errors,
@@ -4731,7 +4773,7 @@ function BiabRenderTree({
 	flat?: boolean | undefined;
 }) {
 	return (
-		<div className="biab-tree">
+		<div className="bd-tree">
 			{fields.map((f) => {
 				if (f.type === "multi_populator") {
 					const cfg = f.populatorConfig ?? {};
@@ -4746,8 +4788,8 @@ function BiabRenderTree({
 						setValue(f.id, next);
 					return (
 						<div
-							className="biab-populator"
-							data-biab-field={fieldCssKey(f)}
+							className="bd-populator"
+							data-bd-field={fieldCssKey(f)}
 							data-field-id={f.id}
 							key={f.id}
 						>
@@ -4759,17 +4801,17 @@ function BiabRenderTree({
 								};
 								return (
 									<div
-										className="biab-populator__item"
+										className="bd-populator__item"
 										key={`${f.id}-inst-${idx}`}
 									>
-										<div className="biab-populator__item-head">
-											<span className="biab-populator__item-label">
+										<div className="bd-populator__item-head">
+											<span className="bd-populator__item-label">
 												{cfg.itemLabel || f.label || "Entry"} {idx + 1}
 											</span>
 											{instances.length > 1 && (
 												<button
 													aria-label="Remove entry"
-													className="biab-populator__remove"
+													className="bd-populator__remove"
 													onClick={() =>
 														writeInstances(
 															instances.filter((_, i) => i !== idx),
@@ -4781,7 +4823,7 @@ function BiabRenderTree({
 												</button>
 											)}
 										</div>
-										<BiabRenderTree
+										<BdRenderTree
 											errors={errors}
 											fields={children}
 											setValue={scopedSetValue}
@@ -4793,7 +4835,7 @@ function BiabRenderTree({
 							})}
 							{instances.length < max && (
 								<button
-									className="biab-populator__add"
+									className="bd-populator__add"
 									onClick={() => writeInstances([...instances, {}])}
 									type="button"
 								>
@@ -4813,14 +4855,14 @@ function BiabRenderTree({
 					const shown = concurrent ? children.slice(0, revealCount) : children;
 					return (
 						<div
-							className={cx("biab-group", flat && "biab-group--flat")}
-							data-biab-group={fieldCssKey(f)}
+							className={cx("bd-group", flat && "bd-group--flat")}
+							data-bd-group={fieldCssKey(f)}
 							key={f.id}
 						>
 							{f.label && showGroupLabel && (
-								<div className="biab-group__label">{f.label}</div>
+								<div className="bd-group__label">{f.label}</div>
 							)}
-							<BiabRenderTree
+							<BdRenderTree
 								errors={errors}
 								fields={shown}
 								setValue={setValue}
@@ -4833,7 +4875,7 @@ function BiabRenderTree({
 				if (f.type === "condition_block") {
 					if (!evalCondition(f.conditionRule, values)) return null;
 					return (
-						<BiabRenderTree
+						<BdRenderTree
 							errors={errors}
 							fields={(f.children ?? []) as FormCoreField[]}
 							key={f.id}
@@ -4853,22 +4895,19 @@ function BiabRenderTree({
 						["Option A", "Option B", "Option C"][i] ||
 						`Option ${i + 1}`;
 					return (
-						<div
-							className={cx("biab-or", errored && "biab-or--error")}
-							key={f.id}
-						>
+						<div className={cx("bd-or", errored && "bd-or--error")} key={f.id}>
 							{f.label && (
-								<div className="biab-or__label">
+								<div className="bd-or__label">
 									{f.label}
-									<span className="biab-or__hint">Fill at least one side</span>
+									<span className="bd-or__hint">Fill at least one side</span>
 								</div>
 							)}
-							<div className="biab-or__sides">
+							<div className="bd-or__sides">
 								{branches.flatMap((child, i) => {
 									const side = (
-										<div className="biab-or__side" key={child.id}>
-											<div className="biab-or__sidelabel">{branchLabel(i)}</div>
-											<BiabRenderTree
+										<div className="bd-or__side" key={child.id}>
+											<div className="bd-or__sidelabel">{branchLabel(i)}</div>
+											<BdRenderTree
 												errors={errors}
 												fields={[child]}
 												setValue={setValue}
@@ -4879,7 +4918,7 @@ function BiabRenderTree({
 									);
 									if (i === 0) return [side];
 									return [
-										<div className="biab-or__divider" key={`or-${child.id}`}>
+										<div className="bd-or__divider" key={`or-${child.id}`}>
 											OR
 										</div>,
 										side,
@@ -4887,7 +4926,7 @@ function BiabRenderTree({
 								})}
 							</div>
 							{errored && (
-								<p className="biab-field__error">
+								<p className="bd-field__error">
 									Fill in at least one side to continue.
 								</p>
 							)}
@@ -4902,7 +4941,7 @@ function BiabRenderTree({
 					};
 					return (
 						<div
-							className="biab-flexrow"
+							className="bd-flexrow"
 							key={f.id}
 							style={{
 								display: "flex",
@@ -4927,8 +4966,8 @@ function BiabRenderTree({
 							}}
 						>
 							{((f.children ?? []) as FormCoreField[]).map((child) => (
-								<div className="biab-flexrow__cell" key={child.id}>
-									<BiabRenderTree
+								<div className="bd-flexrow__cell" key={child.id}>
+									<BdRenderTree
 										errors={errors}
 										fields={[child]}
 										setValue={setValue}
@@ -4941,7 +4980,7 @@ function BiabRenderTree({
 					);
 				}
 				return (
-					<BiabFieldRow
+					<BdFieldRow
 						error={errors[f.id]}
 						field={f}
 						key={f.id}
@@ -4955,15 +4994,15 @@ function BiabRenderTree({
 	);
 }
 
-export function BiabForm(props: BiabFormProps) {
-	const providerClient = useBiabFormsClient();
-	// A publishable token (`pk_…`) builds a browser client that calls BIAB
+export function BdForm(props: BdFormProps) {
+	const providerClient = useBdFormsClient();
+	// A publishable token (`pk_…`) builds a browser client that calls BD
 	// directly — the zero-backend path. Explicit `client` still wins, then the
 	// token client, then a surrounding provider.
-	const tokenClient = useMemo<BiabFormsClient | null>(
+	const tokenClient = useMemo<BdFormsClient | null>(
 		() =>
 			props.token && props.siteId
-				? createBiabClient({
+				? createBdClient({
 						apiKey: props.token,
 						siteId: props.siteId,
 						baseUrl: props.baseUrl ?? DEFAULT_PACKAGE_BASE_URL,
@@ -5035,8 +5074,10 @@ export function BiabForm(props: BiabFormProps) {
 	// Autofill config provided to the field tree. Keyed by the serialized
 	// overrides so a fresh-but-equal `fieldAutoComplete` literal doesn't churn.
 	const fieldAutoCompleteKey = JSON.stringify(props.fieldAutoComplete ?? null);
+	// The directive has to sit immediately above the flagged `useMemo`; inside
+	// the call it attaches to the callback and does nothing.
+	// biome-ignore lint/correctness/useExhaustiveDependencies: keyed by fieldAutoCompleteKey, so a fresh-but-equal literal does not churn
 	const autocompleteConfig = useMemo<AutocompleteConfig>(
-		// biome-ignore lint/correctness/useExhaustiveDependencies: keyed by fieldAutoCompleteKey
 		() => ({
 			...(props.autoComplete !== undefined
 				? { enabled: props.autoComplete }
@@ -5072,13 +5113,13 @@ export function BiabForm(props: BiabFormProps) {
 		return () => window.removeEventListener("beforeunload", onBeforeUnload);
 	}, [exitConfirm?.enabled, exitConfirm?.message, snap.submitted, exitDirty]);
 
-	const rootClass = cx("biab-form", props.className, props.class);
+	const rootClass = cx("bd-form", props.className, props.class);
 
 	if (snap.status === "loading" || snap.status === "idle") {
 		return (
 			<div className={rootClass} style={props.style}>
 				{props.loadingFallback ?? (
-					<div className="biab-form__loading">Loading…</div>
+					<div className="bd-form__loading">Loading…</div>
 				)}
 			</div>
 		);
@@ -5090,7 +5131,7 @@ export function BiabForm(props: BiabFormProps) {
 				{props.errorFallback ? (
 					props.errorFallback(message)
 				) : (
-					<div className="biab-form__error">{message}</div>
+					<div className="bd-form__error">{message}</div>
 				)}
 			</div>
 		);
@@ -5102,7 +5143,7 @@ export function BiabForm(props: BiabFormProps) {
 				{props.successFallback ? (
 					props.successFallback(ok)
 				) : (
-					<div className="biab-form__success">
+					<div className="bd-form__success">
 						Thanks — your response was received.
 					</div>
 				)}
@@ -5114,15 +5155,15 @@ export function BiabForm(props: BiabFormProps) {
 	const consecutive = settings.isConsecutive && snap.stepCount > 1;
 	const animClass =
 		settings.animation === "fade"
-			? "biab-anim--fade"
+			? "bd-anim--fade"
 			: settings.animation === "scale"
-				? "biab-anim--scale"
+				? "bd-anim--scale"
 				: settings.animation === "slide"
 					? snap.forward
-						? "biab-anim--slide-fwd"
-						: "biab-anim--slide-back"
+						? "bd-anim--slide-fwd"
+						: "bd-anim--slide-back"
 					: settings.animation === "scroll"
-						? "biab-anim--scroll"
+						? "bd-anim--scroll"
 						: "";
 
 	const handleSubmit = async () => {
@@ -5160,14 +5201,14 @@ export function BiabForm(props: BiabFormProps) {
 			<AutocompleteContext.Provider value={autocompleteConfig}>
 				<div className={rootClass} style={props.style}>
 					{snap.orgIcon && (
-						<img alt="" className="biab-form__orgicon" src={snap.orgIcon} />
+						<img alt="" className="bd-form__orgicon" src={snap.orgIcon} />
 					)}
 
 					{(snap.title || snap.description) && (
-						<div className="biab-form__head">
-							{snap.title && <h2 className="biab-form__title">{snap.title}</h2>}
+						<div className="bd-form__head">
+							{snap.title && <h2 className="bd-form__title">{snap.title}</h2>}
 							{snap.description && (
-								<p className="biab-form__desc">{snap.description}</p>
+								<p className="bd-form__desc">{snap.description}</p>
 							)}
 						</div>
 					)}
@@ -5176,7 +5217,7 @@ export function BiabForm(props: BiabFormProps) {
 					{consecutive &&
 						settings.showProgress &&
 						settings.progressStyle !== "bar" && (
-							<div className="biab-progress biab-progress--steps">
+							<div className="bd-progress bd-progress--steps">
 								{snap.steps.map((s, i) => {
 									const f = s[0];
 									const title = f?.stepTitle || f?.label || `Step ${i + 1}`;
@@ -5187,24 +5228,24 @@ export function BiabForm(props: BiabFormProps) {
 											{i > 0 && (
 												<span
 													className={cx(
-														"biab-progress__line",
-														i <= snap.step && "biab-progress__line--done",
+														"bd-progress__line",
+														i <= snap.step && "bd-progress__line--done",
 													)}
 												/>
 											)}
 											<button
 												className={cx(
-													"biab-progress__step",
-													current && "biab-progress__step--current",
-													done && "biab-progress__step--done",
+													"bd-progress__step",
+													current && "bd-progress__step--current",
+													done && "bd-progress__step--done",
 												)}
 												onClick={() => controller.goToStep(i)}
 												type="button"
 											>
-												<span className="biab-progress__num">
+												<span className="bd-progress__num">
 													{done ? "✓" : i + 1}
 												</span>
-												<span className="biab-progress__title">{title}</span>
+												<span className="bd-progress__title">{title}</span>
 											</button>
 										</Fragment>
 									);
@@ -5216,13 +5257,13 @@ export function BiabForm(props: BiabFormProps) {
 					{consecutive &&
 						settings.showProgress &&
 						settings.progressStyle === "bar" && (
-							<div className="biab-progress biab-progress--bar">
-								<span className="biab-progress__count">
+							<div className="bd-progress bd-progress--bar">
+								<span className="bd-progress__count">
 									{snap.step + 1} / {snap.stepCount}
 								</span>
-								<div className="biab-progress__track">
+								<div className="bd-progress__track">
 									<div
-										className="biab-progress__fill"
+										className="bd-progress__fill"
 										style={{ width: `${snap.progressPercent}%` }}
 									/>
 								</div>
@@ -5231,12 +5272,12 @@ export function BiabForm(props: BiabFormProps) {
 
 					{/* Aggregate required-field notice */}
 					{snap.errorList.length > 0 && (
-						<div className="biab-form__notice" role="alert">
-							<div className="biab-form__notice-title">
+						<div className="bd-form__notice" role="alert">
+							<div className="bd-form__notice-title">
 								Please complete the highlighted field
 								{snap.errorList.length === 1 ? "" : "s"}.
 							</div>
-							<div className="biab-form__notice-list">
+							<div className="bd-form__notice-list">
 								{snap.errorList.map((e) => e.label).join(", ")}
 							</div>
 						</div>
@@ -5244,10 +5285,10 @@ export function BiabForm(props: BiabFormProps) {
 
 					{/* Field tree for the active step (single-page = all fields) */}
 					<div
-						className={cx("biab-form__body", animClass)}
-						key={`biab-step-${snap.step}`}
+						className={cx("bd-form__body", animClass)}
+						key={`bd-step-${snap.step}`}
 					>
-						<BiabRenderTree
+						<BdRenderTree
 							errors={snap.errors}
 							fields={snap.visibleFields}
 							flat={consecutive}
@@ -5271,10 +5312,10 @@ export function BiabForm(props: BiabFormProps) {
 									? a.coupon.notice.replace(/\{code\}/g, code)
 									: `Coupon ${code} will be applied to this submission.`;
 								return (
-									<div className="biab-coupon-notice" key={`coupon-${i}`}>
-										<p className="biab-coupon-notice__text">{text}</p>
+									<div className="bd-coupon-notice" key={`coupon-${i}`}>
+										<p className="bd-coupon-notice__text">{text}</p>
 										{a.coupon?.finePrint && (
-											<p className="biab-coupon-notice__fine">
+											<p className="bd-coupon-notice__fine">
 												{a.coupon.finePrint}
 											</p>
 										)}
@@ -5284,9 +5325,9 @@ export function BiabForm(props: BiabFormProps) {
 
 					{/* Navigation */}
 					{consecutive ? (
-						<div className="biab-nav">
+						<div className="bd-nav">
 							<button
-								className="biab-btn biab-btn--back biab-btn--ghost"
+								className="bd-btn bd-btn--back bd-btn--ghost"
 								disabled={snap.isFirstStep}
 								onClick={() => controller.back()}
 								type="button"
@@ -5295,7 +5336,7 @@ export function BiabForm(props: BiabFormProps) {
 							</button>
 							{!snap.isLastStep ? (
 								<button
-									className="biab-btn biab-btn--next"
+									className="bd-btn bd-btn--next"
 									disabled={!snap.canAdvance}
 									onClick={() => controller.next()}
 									type="button"
@@ -5304,7 +5345,7 @@ export function BiabForm(props: BiabFormProps) {
 								</button>
 							) : (
 								<button
-									className="biab-btn biab-btn--submit"
+									className="bd-btn bd-btn--submit"
 									disabled={snap.submitting || snap.uploading}
 									onClick={() => void handleSubmit()}
 									type="button"
@@ -5314,9 +5355,9 @@ export function BiabForm(props: BiabFormProps) {
 							)}
 						</div>
 					) : (
-						<div className="biab-nav">
+						<div className="bd-nav">
 							<button
-								className="biab-btn biab-btn--submit"
+								className="bd-btn bd-btn--submit"
 								disabled={snap.submitting || snap.uploading}
 								onClick={() => void handleSubmit()}
 								type="button"
@@ -5328,7 +5369,7 @@ export function BiabForm(props: BiabFormProps) {
 
 					{/* Inline failure message (non-validation, e.g. plan gate / network) */}
 					{snap.result && !snap.result.ok && snap.errorList.length === 0 && (
-						<div className="biab-form__error" role="alert">
+						<div className="bd-form__error" role="alert">
 							{snap.result.message}
 						</div>
 					)}
@@ -5397,7 +5438,7 @@ export type SocialLinksProps = {
 
 /**
  * Render every social profile on the company as an icon + link, in canonical
- * order, resolving BIAB's exact keys (`meta`, `twitterX`, …) for you. Branded
+ * order, resolving BD's exact keys (`meta`, `twitterX`, …) for you. Branded
  * glyphs come from the simple-icons CDN; platforms without one fall back to a
  * globe. Returns `null` when no socials are set.
  */
@@ -5458,7 +5499,7 @@ export function useBlog(options: {
 	const controller = useMemo(
 		() =>
 			createBlogController({
-				client: new BiabDevClient({ apiKey, baseUrl }),
+				client: new BdApiClient({ apiKey, baseUrl }),
 				...(pageSize ? { pageSize } : {}),
 				...(categoryId ? { categoryId } : {}),
 			}),
@@ -5506,7 +5547,7 @@ export function useVerify(
 	const controller = useMemo(
 		() =>
 			createVerifyController({
-				client: new BiabDevClient({ apiKey, baseUrl }),
+				client: new BdApiClient({ apiKey, baseUrl }),
 				kind,
 				...(resendCooldownSeconds ? { resendCooldownSeconds } : {}),
 			}),
@@ -5556,7 +5597,7 @@ export function usePortal(options: {
 	const controller = useMemo(
 		() =>
 			createPortalController({
-				client: new BiabDevClient({ apiKey, baseUrl }),
+				client: new BdApiClient({ apiKey, baseUrl }),
 				sessionToken,
 			}),
 		[apiKey, baseUrl, sessionToken],