@businessdash/sdk 0.9.81 → 0.9.90

package/src/qwik.tsx

@@ -1,6 +1,6 @@
 /** @jsxImportSource @builder.io/qwik */
 /**
- * `@businessdash/sdk/qwik` — the `<BiabForm>` drop-in for Qwik / Qwik City.
+ * `@businessdash/sdk/qwik` — the `<BdForm>` drop-in for Qwik / Qwik City.
  *
  * Ship mode: SOURCE (.tsx). The consumer's Qwik optimizer compiles this file —
  * it is never tsc-built into `dist`. Keep it syntactically valid Qwik JSX and
@@ -10,16 +10,16 @@
  * ─── Architecture ────────────────────────────────────────────────────────────
  * The headless `createFormController` (`@businessdash/sdk/forms`) owns ALL of the
  * form's runtime state and behaviour — values, condition-aware visibility,
- * validation mirrored 1:1 from the BIAB server, multi-step nav + progress,
+ * validation mirrored 1:1 from the BD server, multi-step nav + progress,
  * concurrent-reveal gating, the submit lifecycle, and file uploads. This binding
  * stays dumb: it
  *   1. builds the controller (client-side, inside `useVisibleTask$`),
  *   2. mirrors its `snapshot()` into a Qwik `useStore` on every `subscribe`
  *      notify (the idiomatic bridge from an external observable into Qwik
  *      reactivity), and
- *   3. renders the nested field tree by `type` using the `biab-*` light-DOM
+ *   3. renders the nested field tree by `type` using the `bd-*` light-DOM
  *      class convention — the SAME classes the dashboard `FormPreview` renderer
- *      uses, so a consumer's `biab-*` CSS overrides cascade identically and the
+ *      uses, so a consumer's `bd-*` CSS overrides cascade identically and the
  *      drop-in reproduces the dashboard preview (animation, multi-step progress
  *      bar/labels, concurrent reveal, org icon).
  *
@@ -46,7 +46,7 @@ import {
 	$,
 } from "@builder.io/qwik";
 
-import type { BiabClient } from "@businessdash/sdk";
+import type { BdClient } from "@businessdash/sdk";
 import {
 	type FormCoreField,
 	type FormController,
@@ -87,7 +87,7 @@ type ServerCompatQRL<Args extends unknown[], R> = QRL<
 // Public props — consistent with the other framework bindings.
 // ─────────────────────────────────────────────────────────────────────────────
 
-export interface BiabFormProps {
+export interface BdFormProps {
 	/**
 	 * Pre-fetched form schema (SSR / `routeLoader$`). PREFERRED on Qwik — it is
 	 * serializable, keeps the bearer key server-side, and renders without a
@@ -99,7 +99,7 @@ export interface BiabFormProps {
 	 * it pulls the schema and (unless `submit$` is given) submits from the
 	 * browser. For SSR apps, prefer `schema` + `submit$`.
 	 */
-	client?: BiabClient;
+	client?: BdClient;
 	/** Form slug. Required with `client` (the pre-fetched `schema` carries its own). */
 	slug?: string;
 
@@ -159,7 +159,7 @@ export interface BiabFormProps {
 	/** Fires after a failed submit (`result.ok === false`). */
 	onError$?: QRL<(result: Extract<FormSubmitResult, { ok: false }>) => void>;
 
-	/** Extra class on the root `.biab-form`. Both `class` and `className` work. */
+	/** Extra class on the root `.bd-form`. Both `class` and `className` work. */
 	class?: string;
 	className?: string;
 }
@@ -176,7 +176,7 @@ type SnapshotState = { snap: FormSnapshot | null };
 type ControllerRef = { value: FormController | undefined };
 
 /** The resolved server-side upload delegate threaded to `file_upload` fields. */
-type UploadDelegate = BiabFormProps["uploadFile$"];
+type UploadDelegate = BdFormProps["uploadFile$"];
 
 /**
  * Build the initial snapshot for SSR from a pre-fetched schema so the fields
@@ -198,7 +198,7 @@ function seedSnapshot(schema: FormSchema | undefined): FormSnapshot | null {
 
 // ─────────────────────────────────────────────────────────────────────────────
 // Field rendering — a faithful port of the dashboard `FormPreview` per-type
-// switch, using `biab-*` classes (light DOM). Qwik JSX uses `class`, not
+// switch, using `bd-*` classes (light DOM). Qwik JSX uses `class`, not
 // `className`, and `onInput$` / `onClick$` event QRLs.
 // ─────────────────────────────────────────────────────────────────────────────
 
@@ -211,7 +211,7 @@ const NO_LABEL_TYPES = new Set([
 	"image",
 ]);
 
-/** Stable, override-friendly CSS hook for a field (the `data-biab-field` value). */
+/** Stable, override-friendly CSS hook for a field (the `data-bd-field` value). */
 function fieldCssKey(field: FormCoreField): string {
 	const explicit =
 		typeof field.outputKey === "string" ? field.outputKey.trim() : "";
@@ -233,7 +233,7 @@ function asString(value: unknown): string {
  * via the controller's `setValue` / `uploadFile`. Renders by `type` exactly as
  * the dashboard preview does.
  */
-const BiabFieldInput = component$<{
+const BdFieldInput = component$<{
 	field: FormCoreField;
 	controllerSig: ControllerRef;
 	state: SnapshotState;
@@ -253,19 +253,19 @@ const BiabFieldInput = component$<{
 
 	switch (field.type) {
 		case "title":
-			return <h2 class="biab-field__title">{field.label || "Untitled"}</h2>;
+			return <h2 class="bd-field__title">{field.label || "Untitled"}</h2>;
 		case "subtitle":
-			return <h3 class="biab-field__subtitle">{field.label || ""}</h3>;
+			return <h3 class="bd-field__subtitle">{field.label || ""}</h3>;
 		case "separator":
-			return <hr class="biab-field__separator" />;
+			return <hr class="bd-field__separator" />;
 		case "richtext":
 			// `content` is server-sanitized HTML on publish.
 			return field.content ? (
-				<div class="biab-field__richtext" dangerouslySetInnerHTML={field.content} />
+				<div class="bd-field__richtext" dangerouslySetInnerHTML={field.content} />
 			) : null;
 		case "image":
 			return field.content ? (
-				<img class="biab-field__image" src={field.content} alt={field.label || ""} />
+				<img class="bd-field__image" src={field.content} alt={field.label || ""} />
 			) : null;
 
 		case "textarea":
@@ -274,7 +274,7 @@ const BiabFieldInput = component$<{
 			// optional attribute must be absent, not present-and-undefined.
 			return (
 				<textarea
-					class="biab-input biab-textarea"
+					class="bd-input bd-textarea"
 					value={asString(value)}
 					placeholder={field.placeholder || ""}
 					rows={4}
@@ -286,7 +286,7 @@ const BiabFieldInput = component$<{
 		case "select":
 			return (
 				<select
-					class="biab-input biab-select"
+					class="bd-input bd-select"
 					value={asString(value)}
 					onChange$={(_, el) => void set((el as HTMLSelectElement).value)}
 				>
@@ -301,9 +301,9 @@ const BiabFieldInput = component$<{
 
 		case "radio":
 			return (
-				<div class="biab-radio-group">
+				<div class="bd-radio-group">
 					{(field.options ?? []).map((opt) => (
-						<label class="biab-radio" key={opt}>
+						<label class="bd-radio" key={opt}>
 							<input
 								type="radio"
 								name={field.id}
@@ -320,11 +320,11 @@ const BiabFieldInput = component$<{
 		case "checkbox": {
 			const arr = Array.isArray(value) ? (value as string[]) : [];
 			return (
-				<div class="biab-checkbox-group">
+				<div class="bd-checkbox-group">
 					{(field.options ?? []).map((opt) => {
 						const checked = arr.includes(opt);
 						return (
-							<label class="biab-checkbox" key={opt}>
+							<label class="bd-checkbox" key={opt}>
 								<input
 									type="checkbox"
 									checked={checked}
@@ -345,20 +345,20 @@ const BiabFieldInput = component$<{
 
 		case "boolean":
 			return (
-				<label class="biab-switch">
+				<label class="bd-switch">
 					<input
 						type="checkbox"
 						checked={value === true}
 						onChange$={(_, el) => void set((el as HTMLInputElement).checked)}
 					/>
-					<span class="biab-switch__label">{field.placeholder || "Yes / No"}</span>
+					<span class="bd-switch__label">{field.placeholder || "Yes / No"}</span>
 				</label>
 			);
 
 		case "date":
 			return (
 				<input
-					class="biab-input biab-date"
+					class="bd-input bd-date"
 					type="date"
 					value={asString(value)}
 					onInput$={(_, el) => void set((el as HTMLInputElement).value)}
@@ -371,11 +371,11 @@ const BiabFieldInput = component$<{
 					? (value as { start?: string; end?: string })
 					: { start: "", end: "" };
 			return (
-				<div class="biab-date-range">
-					<label class="biab-date-range__field">
-						<span class="biab-date-range__label">Start</span>
+				<div class="bd-date-range">
+					<label class="bd-date-range__field">
+						<span class="bd-date-range__label">Start</span>
 						<input
-							class="biab-input"
+							class="bd-input"
 							type="date"
 							value={v.start ?? ""}
 							onInput$={(_, el) =>
@@ -383,10 +383,10 @@ const BiabFieldInput = component$<{
 							}
 						/>
 					</label>
-					<label class="biab-date-range__field">
-						<span class="biab-date-range__label">End</span>
+					<label class="bd-date-range__field">
+						<span class="bd-date-range__label">End</span>
 						<input
-							class="biab-input"
+							class="bd-input"
 							type="date"
 							value={v.end ?? ""}
 							onInput$={(_, el) =>
@@ -421,7 +421,7 @@ const BiabFieldInput = component$<{
 				};
 				return (
 					<select
-						class="biab-input biab-select biab-time"
+						class="bd-input bd-select bd-time"
 						value={asString(value)}
 						onChange$={(_, el) => void set((el as HTMLSelectElement).value)}
 					>
@@ -440,11 +440,11 @@ const BiabFieldInput = component$<{
 						? (value as { start?: string; end?: string })
 						: { start: "", end: "" };
 				return (
-					<div class="biab-time-block">
-						<label class="biab-time-block__field">
-							<span class="biab-time-block__label">Start</span>
+					<div class="bd-time-block">
+						<label class="bd-time-block__field">
+							<span class="bd-time-block__label">Start</span>
 							<input
-								class="biab-input"
+								class="bd-input"
 								type="time"
 								value={v.start ?? ""}
 								onInput$={(_, el) =>
@@ -452,10 +452,10 @@ const BiabFieldInput = component$<{
 								}
 							/>
 						</label>
-						<label class="biab-time-block__field">
-							<span class="biab-time-block__label">End</span>
+						<label class="bd-time-block__field">
+							<span class="bd-time-block__label">End</span>
 							<input
-								class="biab-input"
+								class="bd-input"
 								type="time"
 								value={v.end ?? ""}
 								onInput$={(_, el) =>
@@ -472,11 +472,11 @@ const BiabFieldInput = component$<{
 					? (value as { date?: string; time?: string })
 					: { date: "", time: "" };
 			return (
-				<div class="biab-appointment">
-					<label class="biab-appointment__field">
-						<span class="biab-appointment__label">Date</span>
+				<div class="bd-appointment">
+					<label class="bd-appointment__field">
+						<span class="bd-appointment__label">Date</span>
 						<input
-							class="biab-input"
+							class="bd-input"
 							type="date"
 							value={v.date ?? ""}
 							onInput$={(_, el) =>
@@ -484,10 +484,10 @@ const BiabFieldInput = component$<{
 							}
 						/>
 					</label>
-					<label class="biab-appointment__field">
-						<span class="biab-appointment__label">Time</span>
+					<label class="bd-appointment__field">
+						<span class="bd-appointment__label">Time</span>
 						<input
-							class="biab-input"
+							class="bd-input"
 							type="time"
 							value={v.time ?? ""}
 							onInput$={(_, el) =>
@@ -508,14 +508,14 @@ const BiabFieldInput = component$<{
 			const fmt = (n: number) =>
 				unit === "currency" ? `$${n}` : unit === "percent" ? `${n}%` : `${n}`;
 			return (
-				<div class="biab-slider">
-					<div class="biab-slider__scale">
+				<div class="bd-slider">
+					<div class="bd-slider__scale">
 						<span>{fmt(min)}</span>
-						<span class="biab-slider__value">{fmt(v)}</span>
+						<span class="bd-slider__value">{fmt(v)}</span>
 						<span>{fmt(max)}</span>
 					</div>
 					<input
-						class="biab-slider__input"
+						class="bd-slider__input"
 						type="range"
 						min={min}
 						max={max}
@@ -531,12 +531,12 @@ const BiabFieldInput = component$<{
 			const max = field.starRatingConfig?.maxStars ?? 5;
 			const v = typeof value === "number" ? value : 0;
 			return (
-				<div class="biab-stars">
+				<div class="bd-stars">
 					{Array.from({ length: max }).map((_, i) => (
 						<button
 							key={`${field.id}-star-${i}`}
 							type="button"
-							class={classOf("biab-star", i < v && "biab-star--on")}
+							class={classOf("bd-star", i < v && "bd-star--on")}
 							aria-label={`${i + 1} star${i === 0 ? "" : "s"}`}
 							onClick$={() => void set(i + 1)}
 						>
@@ -551,12 +551,12 @@ const BiabFieldInput = component$<{
 			const v = typeof value === "number" ? value : -1;
 			const faces = ["😞", "😕", "😐", "🙂", "😄"];
 			return (
-				<div class="biab-happiness">
+				<div class="bd-happiness">
 					{faces.map((emoji, i) => (
 						<button
 							key={emoji}
 							type="button"
-							class={classOf("biab-happiness__face", i === v && "biab-happiness__face--on")}
+							class={classOf("bd-happiness__face", i === v && "bd-happiness__face--on")}
 							onClick$={() => void set(i)}
 						>
 							{emoji}
@@ -569,18 +569,18 @@ const BiabFieldInput = component$<{
 		case "stepper": {
 			const v = typeof value === "number" ? value : 0;
 			return (
-				<div class="biab-stepper">
+				<div class="bd-stepper">
 					<button
 						type="button"
-						class="biab-stepper__btn biab-stepper__btn--dec"
+						class="bd-stepper__btn bd-stepper__btn--dec"
 						onClick$={() => void set(v - 1)}
 					>
 						−
 					</button>
-					<span class="biab-stepper__value">{v}</span>
+					<span class="bd-stepper__value">{v}</span>
 					<button
 						type="button"
-						class="biab-stepper__btn biab-stepper__btn--inc"
+						class="bd-stepper__btn bd-stepper__btn--inc"
 						onClick$={() => void set(v + 1)}
 					>
 						+
@@ -592,12 +592,12 @@ const BiabFieldInput = component$<{
 		case "color_picker": {
 			const v = asString(value);
 			return (
-				<div class="biab-colors">
+				<div class="bd-colors">
 					{(field.options ?? []).map((color) => (
 						<button
 							key={color}
 							type="button"
-							class={classOf("biab-color", v === color && "biab-color--on")}
+							class={classOf("bd-color", v === color && "bd-color--on")}
 							style={{ backgroundColor: color }}
 							title={color}
 							aria-label={color}
@@ -608,6 +608,102 @@ const BiabFieldInput = component$<{
 			);
 		}
 
+		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: NonNullable<FormCoreField["nameConfig"]> =
+				field.nameConfig ?? {};
+			// Per-subfield autofill tokens (given/family/honorifics), suppressed
+			// to "off" when autofill is off for this field (global switch or override).
+			const acOff = autoComplete === "off";
+			const part = (
+				key: "prefix" | "first" | "middle" | "last" | "suffix",
+				label: string,
+				ac: string,
+				placeholder: string,
+				full = false,
+			) => (
+				<label
+					class={classOf(
+						"bd-name__field",
+						`bd-name__field--${key}`,
+						full && "bd-name__field--full",
+					)}
+				>
+					<span class="bd-name__label">{label}</span>
+					<input
+						class="bd-input"
+						value={v[key] ?? ""}
+						placeholder={placeholder}
+						autoComplete={acOff ? "off" : ac}
+						onInput$={(_, el) =>
+							void set({ ...v, [key]: (el as HTMLInputElement).value })
+						}
+					/>
+				</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 class="bd-name">
+					{cfg.prefix &&
+						part("prefix", "Title", "honorific-prefix", "Dr.", true)}
+					{part("first", "First name", "given-name", "Jane")}
+					{cfg.middle &&
+						part("middle", "Middle name", "additional-name", "Quinn")}
+					{part(
+						"last",
+						"Last name",
+						"family-name",
+						"Doe",
+						cfg.middle === true && cfg.suffix !== true,
+					)}
+					{cfg.suffix &&
+						part(
+							"suffix",
+							"Suffix",
+							"honorific-suffix",
+							"Jr.",
+							cfg.middle !== true,
+						)}
+					{cfg.nicknames && (
+						<label
+							class={classOf(
+								"bd-name__field",
+								"bd-name__field--nicknames",
+								"bd-name__field--full",
+							)}
+						>
+							<span class="bd-name__label">Nicknames</span>
+							<input
+								class="bd-input"
+								value={nicknamesText}
+								placeholder="Johnny, JM — separate with commas"
+								onInput$={(_, el) =>
+									void set({
+										...v,
+										nicknames: (el as HTMLInputElement).value,
+									})
+								}
+							/>
+						</label>
+					)}
+				</div>
+			);
+		}
+
 		case "address": {
 			const v = (value && typeof value === "object" ? value : {}) as Record<
 				string,
@@ -621,10 +717,10 @@ const BiabFieldInput = component$<{
 				label: string,
 				ac: string,
 			) => (
-				<label class={classOf("biab-address__field", `biab-address__field--${key}`)}>
-					<span class="biab-address__label">{label}</span>
+				<label class={classOf("bd-address__field", `bd-address__field--${key}`)}>
+					<span class="bd-address__label">{label}</span>
 					<input
-						class="biab-input"
+						class="bd-input"
 						value={v[key] ?? ""}
 						autoComplete={acOff ? "off" : ac}
 						onInput$={(_, el) =>
@@ -634,7 +730,7 @@ const BiabFieldInput = component$<{
 				</label>
 			);
 			return (
-				<div class="biab-address">
+				<div class="bd-address">
 					{part("line1", "Address Line 1", "street-address")}
 					{part("line2", "Address Line 2", "address-line2")}
 					{part("city", "City", "address-level2")}
@@ -654,9 +750,9 @@ const BiabFieldInput = component$<{
 			const remaining = Math.max(maxFiles - files.length, 0);
 			const uploading = state.snap?.uploading === true;
 			return (
-				<div class="biab-file">
+				<div class="bd-file">
 					<input
-						class="biab-file__input"
+						class="bd-file__input"
 						type="file"
 						multiple={maxFiles > 1}
 						{...(accept ? { accept } : {})}
@@ -692,13 +788,13 @@ const BiabFieldInput = component$<{
 							(el as HTMLInputElement).value = "";
 						}}
 					/>
-					{uploading ? <span class="biab-file__status">Uploading…</span> : null}
+					{uploading ? <span class="bd-file__status">Uploading…</span> : null}
 					{files.length > 0 ? (
-						<ul class="biab-file__list">
+						<ul class="bd-file__list">
 							{files.map((f, idx) => (
-								<li class="biab-file__item" key={`${f.url}-${idx}`}>
-									<span class="biab-file__name">{f.name}</span>
-									<span class="biab-file__size">
+								<li class="bd-file__item" key={`${f.url}-${idx}`}>
+									<span class="bd-file__name">{f.name}</span>
+									<span class="bd-file__size">
 										{Math.round(f.size / 1024)} KB
 									</span>
 								</li>
@@ -712,7 +808,7 @@ const BiabFieldInput = component$<{
 		case "phone":
 			return (
 				<input
-					class="biab-input biab-phone"
+					class="bd-input bd-phone"
 					type="tel"
 					value={asString(value)}
 					placeholder={
@@ -729,7 +825,7 @@ const BiabFieldInput = component$<{
 		case "email":
 			return (
 				<input
-					class="biab-input biab-email"
+					class="bd-input bd-email"
 					type="email"
 					value={asString(value)}
 					placeholder={field.placeholder || "you@example.com"}
@@ -741,7 +837,7 @@ const BiabFieldInput = component$<{
 		case "number":
 			return (
 				<input
-					class="biab-input biab-number"
+					class="bd-input bd-number"
 					type="number"
 					value={typeof value === "number" ? value : asString(value)}
 					placeholder={field.placeholder || ""}
@@ -755,7 +851,7 @@ const BiabFieldInput = component$<{
 		default:
 			return (
 				<input
-					class="biab-input biab-text"
+					class="bd-input bd-text"
 					type="text"
 					value={asString(value)}
 					placeholder={field.placeholder || ""}
@@ -767,10 +863,10 @@ const BiabFieldInput = component$<{
 });
 
 /**
- * One field "row": the `biab-field` wrapper with stable data-attrs + error /
+ * One field "row": the `bd-field` wrapper with stable data-attrs + error /
  * help text, mirroring the dashboard `FieldRow`.
  */
-const BiabFieldRow = component$<{
+const BdFieldRow = component$<{
 	field: FormCoreField;
 	controllerSig: ControllerRef;
 	state: SnapshotState;
@@ -782,30 +878,30 @@ const BiabFieldRow = component$<{
 	return (
 		<div
 			class={classOf(
-				"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}
 		>
 			{showLabel ? (
-				<label class="biab-field__label">
+				<label class="bd-field__label">
 					{field.label || ""}
-					{field.required ? <span class="biab-field__required">*</span> : null}
+					{field.required ? <span class="bd-field__required">*</span> : null}
 				</label>
 			) : null}
-			<BiabFieldInput
+			<BdFieldInput
 				field={field}
 				controllerSig={controllerSig}
 				state={state}
 				uploadFn={uploadFn}
 				acConfig={acConfig}
 			/>
-			{error ? <p class="biab-field__error">{error.message}</p> : null}
+			{error ? <p class="bd-field__error">{error.message}</p> : null}
 			{field.helpText ? (
-				<p class="biab-field__help">{field.helpText}</p>
+				<p class="bd-field__help">{field.helpText}</p>
 			) : null}
 		</div>
 	);
@@ -815,9 +911,9 @@ const BiabFieldRow = component$<{
  * Recursive render of the nested field tree — mirrors `FormPreview.RenderTree`:
  * `input_group` (with concurrent-reveal gating + optional group label),
  * `condition_block` (skipped when its rule is false), `or_condition` (two sides
- * with an OR divider), `flex_row` (inline row), else a `BiabFieldRow`.
+ * with an OR divider), `flex_row` (inline row), else a `BdFieldRow`.
  */
-const BiabRenderTree = component$<{
+const BdRenderTree = component$<{
 	fields: FormCoreField[];
 	controllerSig: ControllerRef;
 	state: SnapshotState;
@@ -827,7 +923,7 @@ const BiabRenderTree = component$<{
 }>(({ fields, controllerSig, state, uploadFn, acConfig, flat }) => {
 	const data = state.snap?.values ?? {};
 	return (
-		<div class="biab-tree">
+		<div class="bd-tree">
 			{fields.map((f) => {
 				if (f.type === "input_group") {
 					const children = (f.children ?? []) as FormCoreField[];
@@ -840,13 +936,13 @@ const BiabRenderTree = component$<{
 					return (
 						<div
 							key={f.id}
-							class={classOf("biab-group", flat && "biab-group--flat")}
-							data-biab-group={fieldCssKey(f)}
+							class={classOf("bd-group", flat && "bd-group--flat")}
+							data-bd-group={fieldCssKey(f)}
 						>
 							{f.label && showGroupLabel ? (
-								<div class="biab-group__label">{f.label}</div>
+								<div class="bd-group__label">{f.label}</div>
 							) : null}
-							<BiabRenderTree
+							<BdRenderTree
 								fields={shown}
 								controllerSig={controllerSig}
 								state={state}
@@ -860,7 +956,7 @@ const BiabRenderTree = component$<{
 				if (f.type === "condition_block") {
 					if (!evalCondition(f.conditionRule, data)) return null;
 					return (
-						<BiabRenderTree
+						<BdRenderTree
 							key={f.id}
 							fields={(f.children ?? []) as FormCoreField[]}
 							controllerSig={controllerSig}
@@ -878,22 +974,22 @@ const BiabRenderTree = component$<{
 					return (
 						<div
 							key={f.id}
-							class={classOf("biab-or", error && "biab-or--error")}
-							data-biab-or={fieldCssKey(f)}
+							class={classOf("bd-or", error && "bd-or--error")}
+							data-bd-or={fieldCssKey(f)}
 						>
 							{f.label ? (
-								<div class="biab-or__label">
+								<div class="bd-or__label">
 									{f.label}
-									<span class="biab-or__hint">Fill at least one side</span>
+									<span class="bd-or__hint">Fill at least one side</span>
 								</div>
 							) : null}
-							<div class="biab-or__grid">
-								<div class="biab-or__side biab-or__side--left">
-									<div class="biab-or__side-label">
+							<div class="bd-or__grid">
+								<div class="bd-or__side bd-or__side--left">
+									<div class="bd-or__side-label">
 										{f.orConditionConfig?.leftLabel || "Option A"}
 									</div>
 									{left ? (
-										<BiabRenderTree
+										<BdRenderTree
 											fields={[left]}
 											controllerSig={controllerSig}
 											state={state}
@@ -902,15 +998,15 @@ const BiabRenderTree = component$<{
 										/>
 									) : null}
 								</div>
-								<div class="biab-or__divider">
-									<span class="biab-or__badge">OR</span>
+								<div class="bd-or__divider">
+									<span class="bd-or__badge">OR</span>
 								</div>
-								<div class="biab-or__side biab-or__side--right">
-									<div class="biab-or__side-label">
+								<div class="bd-or__side bd-or__side--right">
+									<div class="bd-or__side-label">
 										{f.orConditionConfig?.rightLabel || "Option B"}
 									</div>
 									{right ? (
-										<BiabRenderTree
+										<BdRenderTree
 											fields={[right]}
 											controllerSig={controllerSig}
 											state={state}
@@ -921,7 +1017,7 @@ const BiabRenderTree = component$<{
 								</div>
 							</div>
 							{error ? (
-								<p class="biab-or__error">Fill in at least one side to continue.</p>
+								<p class="bd-or__error">Fill in at least one side to continue.</p>
 							) : null}
 						</div>
 					);
@@ -930,10 +1026,10 @@ const BiabRenderTree = component$<{
 				if (f.type === "flex_row") {
 					const children = (f.children ?? []) as FormCoreField[];
 					return (
-						<div key={f.id} class="biab-flex-row">
+						<div key={f.id} class="bd-flex-row">
 							{children.map((child) => (
-								<div class="biab-flex-row__cell" key={child.id}>
-									<BiabFieldRow
+								<div class="bd-flex-row__cell" key={child.id}>
+									<BdFieldRow
 										field={child}
 										controllerSig={controllerSig}
 										state={state}
@@ -947,7 +1043,7 @@ const BiabRenderTree = component$<{
 				}
 
 				return (
-					<BiabFieldRow
+					<BdFieldRow
 						key={f.id}
 						field={f}
 						controllerSig={controllerSig}
@@ -962,10 +1058,10 @@ const BiabRenderTree = component$<{
 });
 
 // ─────────────────────────────────────────────────────────────────────────────
-// <BiabForm> — the drop-in.
+// <BdForm> — the drop-in.
 // ─────────────────────────────────────────────────────────────────────────────
 
-export const BiabForm = component$<BiabFormProps>((props) => {
+export const BdForm = component$<BdFormProps>((props) => {
 	// The controller lives only on the client (it's a non-serializable closure).
 	// `noSerialize()` tells Qwik to drop it from the resumable state instead of
 	// trying (and failing) to serialize the closure; it is re-created in the
@@ -1023,7 +1119,7 @@ export const BiabForm = component$<BiabFormProps>((props) => {
 		});
 	});
 
-	const rootClass = classOf("biab-form", props.class, props.className);
+	const rootClass = classOf("bd-form", props.class, props.className);
 
 	// HTML autofill config threaded to every field input. A plain serializable
 	// object (Qwik-friendly): the global switch + per-field overrides. Mirrors the
@@ -1070,16 +1166,16 @@ export const BiabForm = component$<BiabFormProps>((props) => {
 	const snap = state.snap;
 	if (!snap || snap.status === "loading" || snap.status === "idle") {
 		return (
-			<div class={rootClass} data-biab-status="loading">
+			<div class={rootClass} data-bd-status="loading">
 				<Slot name="loading" />
 			</div>
 		);
 	}
 	if (snap.status === "error") {
 		return (
-			<div class={rootClass} data-biab-status="error">
+			<div class={rootClass} data-bd-status="error">
 				<Slot name="error" />
-				<p class="biab-form__load-error">
+				<p class="bd-form__load-error">
 					{snap.loadError ?? "Could not load the form."}
 				</p>
 			</div>
@@ -1100,34 +1196,34 @@ export const BiabForm = component$<BiabFormProps>((props) => {
 		snap.stepCount > 1;
 
 	// Animation entrance class (per dashboard `entranceClass`). "scroll" is left
-	// to the consumer's CSS via the `biab-form--anim-scroll` hook.
+	// to the consumer's CSS via the `bd-form--anim-scroll` hook.
 	const animClass =
-		settings.animation === "none" ? "" : `biab-form--anim-${settings.animation}`;
-	const dirClass = snap.forward ? "biab-form--forward" : "biab-form--back";
+		settings.animation === "none" ? "" : `bd-form--anim-${settings.animation}`;
+	const dirClass = snap.forward ? "bd-form--forward" : "bd-form--back";
 
 	if (snap.submitted) {
 		return (
-			<div class={classOf(rootClass, "biab-form--submitted")} data-biab-status="submitted">
+			<div class={classOf(rootClass, "bd-form--submitted")} data-bd-status="submitted">
 				<Slot name="success" />
 			</div>
 		);
 	}
 
 	return (
-		<div class={rootClass} data-biab-status="ready" data-biab-animation={settings.animation}>
+		<div class={rootClass} data-bd-status="ready" data-bd-animation={settings.animation}>
 			{snap.orgIcon ? (
-				<img class="biab-form__org-icon" src={snap.orgIcon} alt="" />
+				<img class="bd-form__org-icon" src={snap.orgIcon} alt="" />
 			) : null}
 
-			{snap.title ? <h2 class="biab-form__title">{snap.title}</h2> : null}
+			{snap.title ? <h2 class="bd-form__title">{snap.title}</h2> : null}
 			{snap.description ? (
-				<p class="biab-form__description">{snap.description}</p>
+				<p class="bd-form__description">{snap.description}</p>
 			) : null}
 
 			{showSteps ? (
-				<div class="biab-progress biab-progress--steps">
-					<div class="biab-progress__heading">Form Progress</div>
-					<ol class="biab-progress__steps">
+				<div class="bd-progress bd-progress--steps">
+					<div class="bd-progress__heading">Form Progress</div>
+					<ol class="bd-progress__steps">
 						{snap.steps.map((s, i) => {
 							const head = s[0];
 							const title = head?.stepTitle || head?.label || `Step ${i + 1}`;
@@ -1135,15 +1231,15 @@ export const BiabForm = component$<BiabFormProps>((props) => {
 							const current = i === snap.step;
 							return (
 								<li
-									key={`biab-step-${i}`}
+									key={`bd-step-${i}`}
 									class={classOf(
-										"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",
 									)}
 								>
-									<span class="biab-progress__marker">{done ? "✓" : i + 1}</span>
-									<span class="biab-progress__title">{title}</span>
+									<span class="bd-progress__marker">{done ? "✓" : i + 1}</span>
+									<span class="bd-progress__title">{title}</span>
 								</li>
 							);
 						})}
@@ -1152,13 +1248,13 @@ export const BiabForm = component$<BiabFormProps>((props) => {
 			) : null}
 
 			{showBar ? (
-				<div class="biab-progress biab-progress--bar">
-					<span class="biab-progress__count">
+				<div class="bd-progress bd-progress--bar">
+					<span class="bd-progress__count">
 						{snap.step + 1} / {snap.stepCount}
 					</span>
-					<div class="biab-progress__track">
+					<div class="bd-progress__track">
 						<div
-							class="biab-progress__fill"
+							class="bd-progress__fill"
 							style={{ width: `${snap.progressPercent}%` }}
 						/>
 					</div>
@@ -1166,19 +1262,19 @@ export const BiabForm = component$<BiabFormProps>((props) => {
 			) : null}
 
 			{snap.errorList.length > 0 ? (
-				<div class="biab-form__errors" role="alert">
-					<div class="biab-form__errors-heading">
+				<div class="bd-form__errors" role="alert">
+					<div class="bd-form__errors-heading">
 						Please complete the highlighted required field
 						{snap.errorList.length === 1 ? "" : "s"}.
 					</div>
-					<div class="biab-form__errors-list">
+					<div class="bd-form__errors-list">
 						{snap.errorList.map((e) => e.label).join(", ")}
 					</div>
 				</div>
 			) : null}
 
-			<div class={classOf("biab-form__body", animClass, dirClass)} key={`biab-body-${snap.step}`}>
-				<BiabRenderTree
+			<div class={classOf("bd-form__body", animClass, dirClass)} key={`bd-body-${snap.step}`}>
+				<BdRenderTree
 					fields={snap.visibleFields}
 					controllerSig={controllerSig}
 					state={state}
@@ -1189,10 +1285,10 @@ export const BiabForm = component$<BiabFormProps>((props) => {
 			</div>
 
 			{consecutive && snap.stepCount > 1 ? (
-				<div class="biab-nav">
+				<div class="bd-nav">
 					<button
 						type="button"
-						class="biab-btn biab-btn--back"
+						class="bd-btn bd-btn--back"
 						disabled={snap.isFirstStep}
 						onClick$={() => controllerSig.value?.back()}
 					>
@@ -1201,7 +1297,7 @@ export const BiabForm = component$<BiabFormProps>((props) => {
 					{snap.isLastStep ? (
 						<button
 							type="button"
-							class="biab-btn biab-btn--submit"
+							class="bd-btn bd-btn--submit"
 							disabled={snap.submitting || snap.uploading}
 							onClick$={handleSubmit}
 						>
@@ -1210,7 +1306,7 @@ export const BiabForm = component$<BiabFormProps>((props) => {
 					) : (
 						<button
 							type="button"
-							class="biab-btn biab-btn--next"
+							class="bd-btn bd-btn--next"
 							disabled={!snap.canAdvance}
 							onClick$={() => controllerSig.value?.next()}
 						>
@@ -1219,10 +1315,10 @@ export const BiabForm = component$<BiabFormProps>((props) => {
 					)}
 				</div>
 			) : (
-				<div class="biab-nav">
+				<div class="bd-nav">
 					<button
 						type="button"
-						class="biab-btn biab-btn--submit"
+						class="bd-btn bd-btn--submit"
 						disabled={snap.submitting || snap.uploading}
 						onClick$={handleSubmit}
 					>
@@ -1234,7 +1330,7 @@ export const BiabForm = component$<BiabFormProps>((props) => {
 	);
 });
 
-export default BiabForm;
+export default BdForm;
 
 // ─────────────────────────────────────────────────────────────────────────────
 // Native storefront + chat
@@ -1243,7 +1339,7 @@ export default BiabForm;
 // or cross Qwik's resumability boundary. They are created inside
 // `useVisibleTask$` — client-side, after hydration — and their snapshots are
 // copied into a serializable signal that the template reads. That is the same
-// shape `<BiabForm>` already uses for its controller.
+// shape `<BdForm>` already uses for its controller.
 // ─────────────────────────────────────────────────────────────────────────────
 
 import {
@@ -1275,7 +1371,7 @@ import {
 	type VerifyController,
 	type VerifySnapshot,
 } from "./verify-core/index.js";
-import { createBiabClient as createBiabClientForFollowers } from "./sdk.js";
+import { createBdClient as createBdClientForFollowers } from "./sdk.js";
 import {
 	type BlogController,
 	type BlogSnapshot,
@@ -1286,7 +1382,7 @@ import {
 	type ChatSnapshot,
 	createChatController,
 } from "./chat-core/index.js";
-import { BiabDevClient as BiabDevClientForSurfaces } from "./client.js";
+import { BdApiClient as BdClientForSurfaces } from "./client.js";
 import {
 	createStoreController,
 	type StoreController,
@@ -1325,7 +1421,7 @@ export function useStorefront(options: UseStorefrontOptions) {
 
 	useVisibleTask$(({ cleanup }) => {
 		const controller = createStoreController({
-			client: new BiabDevClientForSurfaces({
+			client: new BdClientForSurfaces({
 				apiKey: options.apiKey,
 				baseUrl: options.baseUrl,
 			}),
@@ -1376,7 +1472,7 @@ export function useChat(options: UseChatOptions) {
 
 	useVisibleTask$(({ cleanup }) => {
 		const controller = createChatController({
-			client: new BiabDevClientForSurfaces({
+			client: new BdClientForSurfaces({
 				apiKey: options.apiKey,
 				baseUrl: options.baseUrl,
 			}),
@@ -1425,7 +1521,7 @@ export function useBlog(options: UseBlogOptions) {
 
 	useVisibleTask$(({ cleanup }) => {
 		const controller = createBlogController({
-			client: new BiabDevClientForSurfaces({
+			client: new BdClientForSurfaces({
 				apiKey: options.apiKey,
 				baseUrl: options.baseUrl,
 			}),
@@ -1469,7 +1565,7 @@ export function useCheckout(options: { apiKey: string; baseUrl: string }) {
 
 	useVisibleTask$(({ cleanup }) => {
 		const controller = createCheckoutController({
-			client: new BiabDevClientForSurfaces({
+			client: new BdClientForSurfaces({
 				apiKey: options.apiKey,
 				baseUrl: options.baseUrl,
 			}),
@@ -1535,7 +1631,7 @@ export function useFollowers(options: {
 
 	useVisibleTask$(({ cleanup }) => {
 		const controller = createFollowersController({
-			client: createBiabClientForFollowers({
+			client: createBdClientForFollowers({
 				apiKey: options.token,
 				siteId: options.siteId,
 				...(options.baseUrl ? { baseUrl: options.baseUrl } : {}),
@@ -1587,7 +1683,7 @@ export function useMarketing(options: {
 
 	useVisibleTask$(({ cleanup }) => {
 		const controller = createMarketingController({
-			client: createBiabClientForFollowers({
+			client: createBdClientForFollowers({
 				apiKey: options.token,
 				siteId: options.siteId,
 				...(options.baseUrl ? { baseUrl: options.baseUrl } : {}),
@@ -1630,7 +1726,7 @@ export function useVerify(
 	useVisibleTask$(({ cleanup }) => {
 		const { apiKey, baseUrl, ...rest } = options;
 		const controller = createVerifyController({
-			client: new BiabDevClientForSurfaces({ apiKey, baseUrl }),
+			client: new BdClientForSurfaces({ apiKey, baseUrl }),
 			...rest,
 		});
 		actions.current = noSerialize(controller);
@@ -1675,7 +1771,7 @@ export function usePortal(options: {
 
 	useVisibleTask$(({ cleanup }) => {
 		const controller = createPortalController({
-			client: new BiabDevClientForSurfaces({
+			client: new BdClientForSurfaces({
 				apiKey: options.apiKey,
 				baseUrl: options.baseUrl,
 			}),