@businessdash/sdk 0.9.80 → 0.9.90

package/src/solid.tsx

@@ -1,9 +1,9 @@
 /**
- * `@businessdash/sdk/solid` — the `<BiabForm>` drop-in for SolidJS.
+ * `@businessdash/sdk/solid` — the `<BdForm>` drop-in for SolidJS.
  *
  * Ship mode: SOURCE (.tsx). This file is published as-is and compiled by the
  * consumer's Solid/JSX toolchain (vite-plugin-solid / babel-preset-solid). It is
- * NOT tsc-compiled inside biab-dev, so it has zero build artifact here.
+ * NOT tsc-compiled inside bd, so it has zero build artifact here.
  *
  * It is a thin, idiomatic Solid view over the framework-agnostic headless core
  * (`createFormController`, exported from `@businessdash/sdk/forms`). All runtime
@@ -13,7 +13,7 @@
  *
  *   1. Bridges the controller's subscribe/snapshot observable into Solid
  *      reactivity with `from()` (the canonical "external store → Signal" adapter).
- *   2. Renders the snapshot's nested field tree by `type` using the `biab-*`
+ *   2. Renders the snapshot's nested field tree by `type` using the `bd-*`
  *      light-DOM class convention (no shadow root) so the consumer's own CSS
  *      cascades onto every field.
  *   3. Applies the published `schema.settings` (animation, multi-step + progress
@@ -55,7 +55,7 @@ import {
 } from "./solid-compat.js";
 
 import type {
-	BiabClient,
+	BdClient,
 	FormFileValue,
 	FormSchema,
 	FormSubmitResult,
@@ -77,39 +77,39 @@ import {
 } from "./forms-core/autocomplete.js";
 
 // ─────────────────────────────────────────────────────────────────────────────
-// Client context — optional Provider-based DI so a tree of `<BiabForm>`s can
+// Client context — optional Provider-based DI so a tree of `<BdForm>`s can
 // share one client instead of threading `client` through every prop.
 // ─────────────────────────────────────────────────────────────────────────────
 
-const BiabClientContext = createContext<Accessor<BiabClient | undefined>>();
+const BdClientContext = createContext<Accessor<BdClient | undefined>>();
 /** Solid 1 exposes `.Provider`; Solid 2 makes the context its own provider. */
-const BiabClientProvider = providerFor<Accessor<BiabClient | undefined>>(
-	BiabClientContext,
+const BdClientProvider = providerFor<Accessor<BdClient | undefined>>(
+	BdClientContext,
 );
 
-export interface BiabProviderProps {
-	/** The SDK client shared with descendant `<BiabForm>`s. */
-	client: BiabClient;
+export interface BdProviderProps {
+	/** The SDK client shared with descendant `<BdForm>`s. */
+	client: BdClient;
 	children?: SolidNode;
 }
 
 /**
- * Provide a single `BiabClient` to a subtree. Any descendant `<BiabForm>` that
+ * Provide a single `BdClient` to a subtree. Any descendant `<BdForm>` that
  * doesn't get its own `client` prop falls back to this one. Optional — passing
- * `client` directly to `<BiabForm>` works without a provider.
+ * `client` directly to `<BdForm>` works without a provider.
  */
-export function BiabProvider(props: BiabProviderProps) {
+export function BdProvider(props: BdProviderProps) {
 	const value = createMemo(() => props.client);
 	return (
-		<BiabClientProvider value={value}>
+		<BdClientProvider value={value}>
 			{renderNode(props.children)}
-		</BiabClientProvider>
+		</BdClientProvider>
 	);
 }
 
-/** Read the client supplied by the nearest `<BiabProvider>` (or `undefined`). */
-export function useBiabClient(): BiabClient | undefined {
-	const ctx = useContext(BiabClientContext);
+/** Read the client supplied by the nearest `<BdProvider>` (or `undefined`). */
+export function useBdClient(): BdClient | undefined {
+	const ctx = useContext(BdClientContext);
 	return ctx?.();
 }
 
@@ -122,7 +122,7 @@ export function useBiabClient(): BiabClient | undefined {
 // every notify. Disposes the controller on cleanup.
 // ─────────────────────────────────────────────────────────────────────────────
 
-export interface BiabFormStore {
+export interface BdFormStore {
 	/** Reactive snapshot accessor — read it inside JSX / memos to track changes. */
 	snapshot: Accessor<FormSnapshot>;
 	/** The underlying controller (imperative escape hatch). */
@@ -133,11 +133,11 @@ export interface BiabFormStore {
  * Create a controller-backed reactive store. Kicks off `load()` on mount (so
  * SSR-adopted schemas stay synchronous and client loads fire once), and tears
  * the controller down on cleanup. Use this when you want the headless behaviour
- * but your own markup; `<BiabForm>` uses it internally.
+ * but your own markup; `<BdForm>` uses it internally.
  */
 export function createFormStore(
 	options: CreateFormControllerOptions,
-): BiabFormStore {
+): BdFormStore {
 	const controller = createFormController(options);
 
 	// `fromStore` bridges the controller's snapshot/subscribe contract into a
@@ -156,7 +156,7 @@ export function createFormStore(
 }
 
 // ─────────────────────────────────────────────────────────────────────────────
-// CSS-hook helpers — mirror the dashboard renderer's `data-biab-*` attributes so
+// CSS-hook helpers — mirror the dashboard renderer's `data-bd-*` attributes so
 // org overrides written against the dashboard preview also target this drop-in.
 // ─────────────────────────────────────────────────────────────────────────────
 
@@ -179,7 +179,7 @@ function slugifyLabel(raw: string): string {
 }
 
 /**
- * The `data-biab-field` value: a published `key`, else an explicit `outputKey`,
+ * The `data-bd-field` value: a published `key`, else an explicit `outputKey`,
  * else a camelCase slug of the label, else the id. Lets orgs target one field.
  */
 function fieldCssKey(field: FormCoreField): string {
@@ -218,7 +218,7 @@ function FieldInput(props: FieldInputProps) {
 	const t = () => props.field.type;
 	const field = () => props.field;
 	// 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 ac = () => props.autocomplete?.(props.field);
 
@@ -226,7 +226,7 @@ function FieldInput(props: FieldInputProps) {
 		<Switch
 			fallback={
 				<input
-					class="biab-input"
+					class="bd-input"
 					type="text"
 					placeholder={field().placeholder ?? ""}
 					value={asString(props.value())}
@@ -236,25 +236,25 @@ function FieldInput(props: FieldInputProps) {
 			}
 		>
 			<Match when={t() === "title"}>
-				<h2 class="biab-field__title">{field().label || "Untitled"}</h2>
+				<h2 class="bd-field__title">{field().label || "Untitled"}</h2>
 			</Match>
 			<Match when={t() === "subtitle"}>
-				<h3 class="biab-field__subtitle">{field().label || ""}</h3>
+				<h3 class="bd-field__subtitle">{field().label || ""}</h3>
 			</Match>
 			<Match when={t() === "separator"}>
-				<hr class="biab-field__separator" />
+				<hr class="bd-field__separator" />
 			</Match>
 			<Match when={t() === "richtext"}>
 				{/* The published content is org-authored; render it as plain text to
 				    keep the binding free of an HTML-sanitizer dependency. Consumers
 				    needing rich HTML can override this field via the `field` slot. */}
-				<div class="biab-field__richtext">{field().content ?? ""}</div>
+				<div class="bd-field__richtext">{field().content ?? ""}</div>
 			</Match>
 			<Match when={t() === "image"}>
 				<Show when={(field().imageConfig as { src?: string })?.src}>
 					{(src) => (
 						<img
-							class="biab-field__image"
+							class="bd-field__image"
 							src={src()}
 							alt={(field().imageConfig as { alt?: string })?.alt ?? ""}
 						/>
@@ -264,7 +264,7 @@ function FieldInput(props: FieldInputProps) {
 
 			<Match when={t() === "textarea"}>
 				<textarea
-					class="biab-textarea"
+					class="bd-textarea"
 					placeholder={field().placeholder ?? ""}
 					rows={(field().textareaConfig as { rows?: number })?.rows ?? 4}
 					value={asString(props.value())}
@@ -275,7 +275,7 @@ function FieldInput(props: FieldInputProps) {
 
 			<Match when={t() === "select"}>
 				<select
-					class="biab-input biab-select"
+					class="bd-input bd-select"
 					value={asString(props.value())}
 					onChange={(e) => props.set(e.currentTarget.value)}
 				>
@@ -289,12 +289,12 @@ function FieldInput(props: FieldInputProps) {
 			</Match>
 
 			<Match when={t() === "radio"}>
-				<div class="biab-radio-group">
+				<div class="bd-radio-group">
 					<For each={field().options ?? []}>
 						{(opt) => {
 							const id = `${field().id}-${opt}`;
 							return (
-								<label class="biab-radio" for={id}>
+								<label class="bd-radio" for={id}>
 									<input
 										type="radio"
 										id={id}
@@ -303,7 +303,7 @@ function FieldInput(props: FieldInputProps) {
 										checked={asString(props.value()) === opt}
 										onChange={() => props.set(opt)}
 									/>
-									<span class="biab-radio__label">{opt}</span>
+									<span class="bd-radio__label">{opt}</span>
 								</label>
 							);
 						}}
@@ -312,7 +312,7 @@ function FieldInput(props: FieldInputProps) {
 			</Match>
 
 			<Match when={t() === "checkbox"}>
-				<div class="biab-checkbox-group">
+				<div class="bd-checkbox-group">
 					<For each={field().options ?? []}>
 						{(opt) => {
 							const arr = () =>
@@ -320,7 +320,7 @@ function FieldInput(props: FieldInputProps) {
 									? (props.value() as string[])
 									: [];
 							return (
-								<label class="biab-checkbox">
+								<label class="bd-checkbox">
 									<input
 										type="checkbox"
 										value={opt}
@@ -334,7 +334,7 @@ function FieldInput(props: FieldInputProps) {
 											);
 										}}
 									/>
-									<span class="biab-checkbox__label">{opt}</span>
+									<span class="bd-checkbox__label">{opt}</span>
 								</label>
 							);
 						}}
@@ -343,13 +343,13 @@ function FieldInput(props: FieldInputProps) {
 			</Match>
 
 			<Match when={t() === "boolean"}>
-				<label class="biab-switch">
+				<label class="bd-switch">
 					<input
 						type="checkbox"
 						checked={props.value() === true}
 						onChange={(e) => props.set(e.currentTarget.checked)}
 					/>
-					<span class="biab-switch__label">
+					<span class="bd-switch__label">
 						{field().placeholder || "Yes / No"}
 					</span>
 				</label>
@@ -357,7 +357,7 @@ function FieldInput(props: FieldInputProps) {
 
 			<Match when={t() === "date"}>
 				<input
-					class="biab-input"
+					class="bd-input"
 					type="date"
 					value={asString(props.value())}
 					onInput={(e) => props.set(e.currentTarget.value)}
@@ -366,7 +366,7 @@ function FieldInput(props: FieldInputProps) {
 
 			<Match when={t() === "email"}>
 				<input
-					class="biab-input"
+					class="bd-input"
 					type="email"
 					placeholder={field().placeholder || "you@example.com"}
 					value={asString(props.value())}
@@ -376,14 +376,14 @@ function FieldInput(props: FieldInputProps) {
 			</Match>
 
 			<Match when={t() === "phone"}>
-				<div class="biab-phone">
+				<div class="bd-phone">
 					<Show when={(field().phoneConfig as { showFlags?: boolean })?.showFlags}>
-						<span class="biab-phone__flag" aria-hidden="true">
+						<span class="bd-phone__flag" aria-hidden="true">
 							🇺🇸
 						</span>
 					</Show>
 					<input
-						class="biab-input"
+						class="bd-input"
 						type="tel"
 						placeholder={
 							field().placeholder ||
@@ -400,7 +400,7 @@ function FieldInput(props: FieldInputProps) {
 
 			<Match when={t() === "number"}>
 				<input
-					class="biab-input"
+					class="bd-input"
 					type="number"
 					placeholder={field().placeholder ?? ""}
 					value={
@@ -419,13 +419,13 @@ function FieldInput(props: FieldInputProps) {
 			</Match>
 
 			<Match when={t() === "color_picker"}>
-				<div class="biab-color-group">
+				<div class="bd-color-group">
 					<For each={field().options ?? []}>
 						{(color) => (
 							<button
 								type="button"
-								class={cx("biab-color-swatch", {
-									"biab-color-swatch--selected":
+								class={cx("bd-color-swatch", {
+									"bd-color-swatch--selected":
 										asString(props.value()) === color,
 								})}
 								style={{ "background-color": color }}
@@ -459,10 +459,10 @@ function FieldInput(props: FieldInputProps) {
 								? `${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(cur())}</span>
+								<span class="bd-slider__value">{fmt(cur())}</span>
 								<span>{fmt(max())}</span>
 							</div>
 							<input
@@ -483,18 +483,18 @@ function FieldInput(props: FieldInputProps) {
 					const cur = () =>
 						typeof props.value() === "number" ? (props.value() as number) : 0;
 					return (
-						<div class="biab-stepper">
+						<div class="bd-stepper">
 							<button
 								type="button"
-								class="biab-stepper__btn"
+								class="bd-stepper__btn"
 								onClick={() => props.set(cur() - 1)}
 							>
 								−
 							</button>
-							<span class="biab-stepper__value">{cur()}</span>
+							<span class="bd-stepper__value">{cur()}</span>
 							<button
 								type="button"
-								class="biab-stepper__btn"
+								class="bd-stepper__btn"
 								onClick={() => props.set(cur() + 1)}
 							>
 								+
@@ -511,12 +511,12 @@ function FieldInput(props: FieldInputProps) {
 					const cur = () =>
 						typeof props.value() === "number" ? (props.value() as number) : 0;
 					return (
-						<div class="biab-stars">
+						<div class="bd-stars">
 							<For each={Array.from({ length: maxStars() })}>
 								{(_, i) => (
 									<button
 										type="button"
-										class={cx("biab-stars__star", { "biab-stars__star--on": i() < cur() })}
+										class={cx("bd-stars__star", { "bd-stars__star--on": i() < cur() })}
 										aria-label={`${i() + 1} star`}
 										onClick={() => props.set(i() + 1)}
 									>
@@ -535,12 +535,12 @@ function FieldInput(props: FieldInputProps) {
 						typeof props.value() === "number" ? (props.value() as number) : -1;
 					const emojis = ["😞", "😕", "😐", "🙂", "😄"];
 					return (
-						<div class="biab-happiness">
+						<div class="bd-happiness">
 							<For each={emojis}>
 								{(emoji, i) => (
 									<button
 										type="button"
-										class={cx("biab-happiness__face", { "biab-happiness__face--on": i() === cur() })}
+										class={cx("bd-happiness__face", { "bd-happiness__face--on": i() === cur() })}
 										onClick={() => props.set(i())}
 									>
 										{emoji}
@@ -587,7 +587,7 @@ function FieldInput(props: FieldInputProps) {
 									};
 									return (
 										<select
-											class="biab-input biab-select"
+											class="bd-input bd-select"
 											value={asString(props.value())}
 											onChange={(e) => props.set(e.currentTarget.value)}
 										>
@@ -609,11 +609,11 @@ function FieldInput(props: FieldInputProps) {
 											? (props.value() as { start?: string; end?: string })
 											: { start: "", end: "" });
 									return (
-										<div class="biab-time-block">
-											<label class="biab-subfield">
-												<span class="biab-subfield__label">Start</span>
+										<div class="bd-time-block">
+											<label class="bd-subfield">
+												<span class="bd-subfield__label">Start</span>
 												<input
-													class="biab-input"
+													class="bd-input"
 													type="time"
 													value={v().start ?? ""}
 													onInput={(e) =>
@@ -621,10 +621,10 @@ function FieldInput(props: FieldInputProps) {
 													}
 												/>
 											</label>
-											<label class="biab-subfield">
-												<span class="biab-subfield__label">End</span>
+											<label class="bd-subfield">
+												<span class="bd-subfield__label">End</span>
 												<input
-													class="biab-input"
+													class="bd-input"
 													type="time"
 													value={v().end ?? ""}
 													onInput={(e) =>
@@ -644,11 +644,11 @@ function FieldInput(props: FieldInputProps) {
 											? (props.value() as { date?: string; time?: string })
 											: { date: "", time: "" });
 									return (
-										<div class="biab-appointment">
-											<label class="biab-subfield">
-												<span class="biab-subfield__label">Date</span>
+										<div class="bd-appointment">
+											<label class="bd-subfield">
+												<span class="bd-subfield__label">Date</span>
 												<input
-													class="biab-input"
+													class="bd-input"
 													type="date"
 													value={v().date ?? ""}
 													onInput={(e) =>
@@ -656,10 +656,10 @@ function FieldInput(props: FieldInputProps) {
 													}
 												/>
 											</label>
-											<label class="biab-subfield">
-												<span class="biab-subfield__label">Time</span>
+											<label class="bd-subfield">
+												<span class="bd-subfield__label">Time</span>
 												<input
-													class="biab-input"
+													class="bd-input"
 													type="time"
 													value={v().time ?? ""}
 													onInput={(e) =>
@@ -683,11 +683,11 @@ function FieldInput(props: FieldInputProps) {
 							? (props.value() as { start?: string; end?: string })
 							: { start: "", end: "" });
 					return (
-						<div class="biab-date-range">
-							<label class="biab-subfield">
-								<span class="biab-subfield__label">Start</span>
+						<div class="bd-date-range">
+							<label class="bd-subfield">
+								<span class="bd-subfield__label">Start</span>
 								<input
-									class="biab-input"
+									class="bd-input"
 									type="date"
 									value={v().start ?? ""}
 									onInput={(e) =>
@@ -695,10 +695,10 @@ function FieldInput(props: FieldInputProps) {
 									}
 								/>
 							</label>
-							<label class="biab-subfield">
-								<span class="biab-subfield__label">End</span>
+							<label class="bd-subfield">
+								<span class="bd-subfield__label">End</span>
 								<input
-									class="biab-input"
+									class="bd-input"
 									type="date"
 									value={v().end ?? ""}
 									onInput={(e) =>
@@ -711,6 +711,95 @@ function FieldInput(props: FieldInputProps) {
 				})()}
 			</Match>
 
+			<Match when={t() === "name"}>
+				{(() => {
+					const v = () =>
+						(props.value() && typeof props.value() === "object"
+							? props.value()
+							: {}) as {
+							prefix?: string;
+							first?: string;
+							middle?: string;
+							last?: string;
+							suffix?: string;
+							nicknames?: string[] | string;
+						};
+					const cfg = () => field().nameConfig ?? {};
+					// Fixed per-subfield autofill tokens, suppressed to "off" when the
+					// field's resolved token is "off" (global switch or per-field override).
+					const acOff = () => ac() === "off";
+					const subAc = (token: string) => (acOff() ? "off" : token);
+					const part = (
+						k: "prefix" | "first" | "middle" | "last" | "suffix",
+						label: string,
+						token: string,
+						placeholder: string,
+						full = false,
+					) => (
+						<label class={cx("bd-subfield", { "bd-subfield--full": full })}>
+							<span class="bd-subfield__label">{label}</span>
+							<input
+								class="bd-input"
+								value={v()[k] ?? ""}
+								placeholder={placeholder}
+								onInput={(e) =>
+									props.set({ ...v(), [k]: e.currentTarget.value })
+								}
+								autocomplete={subAc(token)}
+							/>
+						</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 = () => {
+						const nn = v().nicknames;
+						if (Array.isArray(nn)) return nn.join(", ");
+						return typeof nn === "string" ? nn : "";
+					};
+					return (
+						<div class="bd-name">
+							<Show when={cfg().prefix}>
+								{part("prefix", "Title", "honorific-prefix", "Dr.", true)}
+							</Show>
+							{part("first", "First name", "given-name", "Jane")}
+							<Show when={cfg().middle}>
+								{part("middle", "Middle name", "additional-name", "Quinn")}
+							</Show>
+							{part(
+								"last",
+								"Last name",
+								"family-name",
+								"Doe",
+								cfg().middle === true && cfg().suffix !== true,
+							)}
+							<Show when={cfg().suffix}>
+								{part(
+									"suffix",
+									"Suffix",
+									"honorific-suffix",
+									"Jr.",
+									cfg().middle !== true,
+								)}
+							</Show>
+							<Show when={cfg().nicknames}>
+								<label class="bd-subfield bd-subfield--full">
+									<span class="bd-subfield__label">Nicknames</span>
+									<input
+										class="bd-input"
+										value={nicknamesText()}
+										placeholder="Johnny, JM — separate with commas"
+										onInput={(e) =>
+											props.set({ ...v(), nicknames: e.currentTarget.value })
+										}
+									/>
+								</label>
+							</Show>
+						</div>
+					);
+				})()}
+			</Match>
+
 			<Match when={t() === "address"}>
 				{(() => {
 					const v = () =>
@@ -722,10 +811,10 @@ function FieldInput(props: FieldInputProps) {
 					const acOff = () => ac() === "off";
 					const subAc = (token: string) => (acOff() ? "off" : token);
 					const part = (k: string, label: string, token: string) => (
-						<label class="biab-subfield">
-							<span class="biab-subfield__label">{label}</span>
+						<label class="bd-subfield">
+							<span class="bd-subfield__label">{label}</span>
 							<input
-								class="biab-input"
+								class="bd-input"
 								value={v()[k] ?? ""}
 								onInput={(e) =>
 									props.set({ ...v(), [k]: e.currentTarget.value })
@@ -735,7 +824,7 @@ function FieldInput(props: FieldInputProps) {
 						</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")}
@@ -813,11 +902,11 @@ function FieldInput(props: FieldInputProps) {
 					};
 
 					return (
-						<div class="biab-file">
+						<div class="bd-file">
 							<input
 								ref={inputRef}
 								type="file"
-								class="biab-file__input"
+								class="bd-file__input"
 								multiple={maxFiles() > 1}
 								accept={accept()}
 								style={{ display: "none" }}
@@ -825,7 +914,7 @@ function FieldInput(props: FieldInputProps) {
 							/>
 							<button
 								type="button"
-								class="biab-file__trigger"
+								class="bd-file__trigger"
 								disabled={props.uploading() || remaining() === 0 || !props.uploadFile}
 								onClick={() => inputRef?.click()}
 							>
@@ -847,20 +936,20 @@ function FieldInput(props: FieldInputProps) {
 								</Show>
 							</button>
 							<Show when={localError()}>
-								<p class="biab-file__error">{localError()}</p>
+								<p class="bd-file__error">{localError()}</p>
 							</Show>
 							<Show when={files().length > 0}>
-								<ul class="biab-file__list">
+								<ul class="bd-file__list">
 									<For each={files()}>
 										{(f, i) => (
-											<li class="biab-file__item">
-												<span class="biab-file__name">{f.name}</span>
-												<span class="biab-file__size">
+											<li class="bd-file__item">
+												<span class="bd-file__name">{f.name}</span>
+												<span class="bd-file__size">
 													{Math.round(f.size / 1024)} KB
 												</span>
 												<button
 													type="button"
-													class="biab-file__remove"
+													class="bd-file__remove"
 													aria-label="Remove file"
 													onClick={() =>
 														props.set(
@@ -885,7 +974,7 @@ function FieldInput(props: FieldInputProps) {
 
 // ─────────────────────────────────────────────────────────────────────────────
 // FieldRow — a value-bearing field plus its label / required marker / error /
-// help text. Mirrors FormPreview's `FieldRow` + its `data-biab-*` hooks.
+// help text. Mirrors FormPreview's `FieldRow` + its `data-bd-*` hooks.
 // ─────────────────────────────────────────────────────────────────────────────
 
 interface RenderCtx {
@@ -923,19 +1012,19 @@ function FieldRow(props: { field: FormCoreField; ctx: RenderCtx }) {
 		>
 			<div
 				data-field-id={field().id}
-				data-biab-field={fieldCssKey(field())}
-				data-biab-type={field().type}
-				class={cx("biab-field", {
-					[`biab-field--${field().type}`]: true,
-					"biab-field--required": field().required === true,
-					"biab-field--error": Boolean(error()),
+				data-bd-field={fieldCssKey(field())}
+				data-bd-type={field().type}
+				class={cx("bd-field", {
+					[`bd-field--${field().type}`]: true,
+					"bd-field--required": field().required === true,
+					"bd-field--error": Boolean(error()),
 				})}
 			>
 				<Show when={showLabel() && (field().label || field().required)}>
-					<label class="biab-field__label">
+					<label class="bd-field__label">
 						{field().label || ""}
 						<Show when={field().required}>
-							<span class="biab-field__required"> *</span>
+							<span class="bd-field__required"> *</span>
 						</Show>
 					</label>
 				</Show>
@@ -950,10 +1039,10 @@ function FieldRow(props: { field: FormCoreField; ctx: RenderCtx }) {
 					autocomplete={props.ctx.autocomplete}
 				/>
 				<Show when={error()}>
-					{(e) => <p class="biab-field__error">{e().message}</p>}
+					{(e) => <p class="bd-field__error">{e().message}</p>}
 				</Show>
 				<Show when={field().helpText}>
-					<p class="biab-field__help">{field().helpText}</p>
+					<p class="bd-field__help">{field().helpText}</p>
 				</Show>
 			</div>
 		</Show>
@@ -963,7 +1052,7 @@ function FieldRow(props: { field: FormCoreField; ctx: RenderCtx }) {
 // ─────────────────────────────────────────────────────────────────────────────
 // RenderTree — the recursive layout walk: input_group (+ concurrent reveal),
 // condition_block, or_condition, flex_row, leaf fields. Mirrors FormPreview's
-// `RenderTree` and uses the SAME `biab-*` hooks. `flat` drops the group border
+// `RenderTree` and uses the SAME `bd-*` hooks. `flat` drops the group border
 // in consecutive mode (each step IS already a group).
 // ─────────────────────────────────────────────────────────────────────────────
 
@@ -973,7 +1062,7 @@ function RenderTree(props: {
 	flat?: boolean;
 }) {
 	return (
-		<div class="biab-tree">
+		<div class="bd-tree">
 			<For each={props.fields}>
 				{(node) => (
 					<Switch fallback={<FieldRow field={node} ctx={props.ctx} />}>
@@ -990,13 +1079,13 @@ function RenderTree(props: {
 										: children().length;
 								return (
 									<div
-										data-biab-group={fieldCssKey(node)}
-										class={cx("biab-group", { "biab-group--bordered": !props.flat })}
+										data-bd-group={fieldCssKey(node)}
+										class={cx("bd-group", { "bd-group--bordered": !props.flat })}
 									>
 										<Show
 											when={node.label && node.showGroupLabel === true}
 										>
-											<div class="biab-group__label">{node.label}</div>
+											<div class="bd-group__label">{node.label}</div>
 										</Show>
 										<Show
 											when={concurrent()}
@@ -1006,7 +1095,7 @@ function RenderTree(props: {
 										>
 											<For each={children().slice(0, revealCount())}>
 												{(child) => (
-													<div class="biab-group__reveal">
+													<div class="bd-group__reveal">
 														<RenderTree
 															fields={[child]}
 															ctx={props.ctx}
@@ -1044,17 +1133,17 @@ function RenderTree(props: {
 									};
 								return (
 									<div
-										class={cx("biab-or", { "biab-or--error": errored() })}
+										class={cx("bd-or", { "bd-or--error": errored() })}
 									>
 										<Show when={node.label}>
-											<div class="biab-or__label">
+											<div class="bd-or__label">
 												{node.label}
-												<span class="biab-or__hint">Fill at least one side</span>
+												<span class="bd-or__hint">Fill at least one side</span>
 											</div>
 										</Show>
-										<div class="biab-or__grid">
-											<div class="biab-or__side">
-												<div class="biab-or__side-label">
+										<div class="bd-or__grid">
+											<div class="bd-or__side">
+												<div class="bd-or__side-label">
 													{cfg().leftLabel || "Option A"}
 												</div>
 												<Show when={left()}>
@@ -1063,11 +1152,11 @@ function RenderTree(props: {
 													)}
 												</Show>
 											</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">
-												<div class="biab-or__side-label">
+											<div class="bd-or__side">
+												<div class="bd-or__side-label">
 													{cfg().rightLabel || "Option B"}
 												</div>
 												<Show when={right()}>
@@ -1078,7 +1167,7 @@ function RenderTree(props: {
 											</div>
 										</div>
 										<Show when={errored()}>
-											<p class="biab-or__error">
+											<p class="bd-or__error">
 												Fill in at least one side to continue.
 											</p>
 										</Show>
@@ -1088,10 +1177,10 @@ function RenderTree(props: {
 						</Match>
 
 						<Match when={node.type === "flex_row"}>
-							<div class="biab-flex-row">
+							<div class="bd-flex-row">
 								<For each={node.children ?? []}>
 									{(child) => (
-										<div class="biab-flex-row__cell">
+										<div class="bd-flex-row__cell">
 											<FieldRow field={child} ctx={props.ctx} />
 										</div>
 									)}
@@ -1113,9 +1202,9 @@ function StepProgress(props: { snapshot: Accessor<FormSnapshot> }) {
 	const steps = () => props.snapshot().steps;
 	const current = () => props.snapshot().step;
 	return (
-		<div class="biab-progress biab-progress--steps">
-			<div class="biab-progress__title">Form Progress</div>
-			<div class="biab-progress__track">
+		<div class="bd-progress bd-progress--steps">
+			<div class="bd-progress__title">Form Progress</div>
+			<div class="bd-progress__track">
 				<For each={steps()}>
 					{(s, i) => {
 						const head = () => s[0];
@@ -1127,23 +1216,23 @@ function StepProgress(props: { snapshot: Accessor<FormSnapshot> }) {
 							<>
 								<Show when={i() > 0}>
 									<div
-										class={cx("biab-progress__line", {
-											"biab-progress__line--filled": i() <= current(),
+										class={cx("bd-progress__line", {
+											"bd-progress__line--filled": i() <= current(),
 										})}
 									/>
 								</Show>
-								<div class="biab-progress__node">
+								<div class="bd-progress__node">
 									<span
-										class={cx("biab-progress__dot", {
-											"biab-progress__dot--current": isCurrent(),
-											"biab-progress__dot--done": done(),
+										class={cx("bd-progress__dot", {
+											"bd-progress__dot--current": isCurrent(),
+											"bd-progress__dot--done": done(),
 										})}
 									>
 										{done() ? "✓" : i() + 1}
 									</span>
 									<span
-										class={cx("biab-progress__step-label", {
-											"biab-progress__step-label--current": isCurrent(),
+										class={cx("bd-progress__step-label", {
+											"bd-progress__step-label--current": isCurrent(),
 										})}
 									>
 										{title()}
@@ -1160,13 +1249,13 @@ function StepProgress(props: { snapshot: Accessor<FormSnapshot> }) {
 
 function BarProgress(props: { snapshot: Accessor<FormSnapshot> }) {
 	return (
-		<div class="biab-progress biab-progress--bar">
-			<span class="biab-progress__count">
+		<div class="bd-progress bd-progress--bar">
+			<span class="bd-progress__count">
 				{props.snapshot().step + 1} / {props.snapshot().stepCount}
 			</span>
-			<div class="biab-progress__bar-track">
+			<div class="bd-progress__bar-track">
 				<div
-					class="biab-progress__bar-fill"
+					class="bd-progress__bar-fill"
 					style={{ width: `${props.snapshot().progressPercent}%` }}
 				/>
 			</div>
@@ -1175,17 +1264,17 @@ function BarProgress(props: { snapshot: Accessor<FormSnapshot> }) {
 }
 
 // ─────────────────────────────────────────────────────────────────────────────
-// <BiabForm> — the drop-in component.
+// <BdForm> — the drop-in component.
 // ─────────────────────────────────────────────────────────────────────────────
 
-export interface BiabFormProps {
+export interface BdFormProps {
 	/** Form slug — required unless a pre-fetched `schema` is supplied. */
 	slug?: string;
 	/** Pre-fetched schema (SSR / RSC). Adopted synchronously by the controller. */
 	schema?: FormSchema;
-	/** SDK client. Optional when a `<BiabProvider>` supplies one, or when only
+	/** SDK client. Optional when a `<BdProvider>` supplies one, or when only
 	 *  rendering a pre-fetched `schema` without submitting. */
-	client?: BiabClient;
+	client?: BdClient;
 	/** Submit-button text on the final step. */
 	submitLabel?: string;
 	/** Validate on the server but store nothing (no side effects). */
@@ -1217,16 +1306,16 @@ export interface BiabFormProps {
 }
 
 /**
- * `<BiabForm slug="contact" client={client} />` — a complete, themeable form for
- * a published BIAB form. Loads the schema, renders the field tree, validates
+ * `<BdForm slug="contact" client={client} />` — a complete, themeable form for
+ * a published BD form. Loads the schema, renders the field tree, validates
  * locally (mirroring the server), handles multi-step nav + progress + concurrent
  * reveal + file uploads, and submits through the SDK.
  *
- * All visual classes are `biab-*` on light DOM, so consumer CSS cascades. The
+ * All visual classes are `bd-*` on light DOM, so consumer CSS cascades. The
  * component ships no styles of its own.
  */
-export function BiabForm(props: BiabFormProps) {
-	const providerClient = useBiabClient();
+export function BdForm(props: BdFormProps) {
+	const providerClient = useBdClient();
 	const resolvedClient = () => props.client ?? providerClient;
 	const formId = createUniqueId();
 
@@ -1282,7 +1371,7 @@ export function BiabForm(props: BiabFormProps) {
 	};
 
 	const rootClass = () =>
-		["biab-form", props.class, props.className].filter(Boolean).join(" ");
+		["bd-form", props.class, props.className].filter(Boolean).join(" ");
 
 	// Entrance-animation class for the active step (slide is directional).
 	const animClass = () => {
@@ -1290,15 +1379,15 @@ export function BiabForm(props: BiabFormProps) {
 		const forward = snap().forward;
 		switch (a) {
 			case "fade":
-				return "biab-anim biab-anim--fade";
+				return "bd-anim bd-anim--fade";
 			case "scale":
-				return "biab-anim biab-anim--scale";
+				return "bd-anim bd-anim--scale";
 			case "slide":
 				return forward
-					? "biab-anim biab-anim--slide-forward"
-					: "biab-anim biab-anim--slide-back";
+					? "bd-anim bd-anim--slide-forward"
+					: "bd-anim bd-anim--slide-back";
 			case "scroll":
-				return "biab-anim biab-anim--scroll";
+				return "bd-anim bd-anim--scroll";
 			default:
 				return "";
 		}
@@ -1308,12 +1397,12 @@ export function BiabForm(props: BiabFormProps) {
 		<Switch>
 			{/* Loading / error / empty guards mirror the controller's status. */}
 			<Match when={snap().status === "loading"}>
-				<div class="biab-form biab-form--loading" aria-busy="true">
+				<div class="bd-form bd-form--loading" aria-busy="true">
 					Loading…
 				</div>
 			</Match>
 			<Match when={snap().status === "error"}>
-				<div class="biab-form biab-form--error" role="alert">
+				<div class="bd-form bd-form--error" role="alert">
 					{snap().loadError ?? "Failed to load the form."}
 				</div>
 			</Match>
@@ -1328,18 +1417,18 @@ export function BiabForm(props: BiabFormProps) {
 					{/* Org icon (showOrgIcon) — top-right corner mark. */}
 					<Show when={snap().orgIcon}>
 						{(icon) => (
-							<img class="biab-form__org-icon" src={icon()} alt="" />
+							<img class="bd-form__org-icon" src={icon()} alt="" />
 						)}
 					</Show>
 
 					{/* Title / description from the schema. */}
 					<Show when={snap().title || snap().description}>
-						<div class="biab-form__header">
+						<div class="bd-form__header">
 							<Show when={snap().title}>
-								<h2 class="biab-form__title">{snap().title}</h2>
+								<h2 class="bd-form__title">{snap().title}</h2>
 							</Show>
 							<Show when={snap().description}>
-								<p class="biab-form__description">{snap().description}</p>
+								<p class="bd-form__description">{snap().description}</p>
 							</Show>
 						</div>
 					</Show>
@@ -1356,12 +1445,12 @@ export function BiabForm(props: BiabFormProps) {
 
 					{/* Form-level error summary. */}
 					<Show when={snap().errorList.length > 0}>
-						<div class="biab-form__errors" role="alert">
-							<div class="biab-form__errors-title">
+						<div class="bd-form__errors" role="alert">
+							<div class="bd-form__errors-title">
 								Please complete the highlighted required field
 								{snap().errorList.length === 1 ? "" : "s"}.
 							</div>
-							<div class="biab-form__errors-list">
+							<div class="bd-form__errors-list">
 								{snap()
 									.errorList.map((er) => er.label)
 									.join(", ")}
@@ -1383,10 +1472,10 @@ export function BiabForm(props: BiabFormProps) {
 							</div>
 						}
 					>
-						<div class="biab-form__scroll">
+						<div class="bd-form__scroll">
 							<For each={snap().visibleFields}>
 								{(vf) => (
-									<div class="biab-anim biab-anim--scroll">
+									<div class="bd-anim bd-anim--scroll">
 										<RenderTree
 											fields={[vf]}
 											ctx={ctx}
@@ -1402,10 +1491,10 @@ export function BiabForm(props: BiabFormProps) {
 					<Show
 						when={multiStep()}
 						fallback={
-							<div class="biab-nav">
+							<div class="bd-nav">
 								<button
 									type="submit"
-									class="biab-btn biab-btn--submit"
+									class="bd-btn bd-btn--submit"
 									disabled={snap().submitting}
 								>
 									{snap().submitting
@@ -1415,10 +1504,10 @@ export function BiabForm(props: BiabFormProps) {
 							</div>
 						}
 					>
-						<div class="biab-nav biab-nav--steps">
+						<div class="bd-nav bd-nav--steps">
 							<button
 								type="button"
-								class="biab-btn biab-btn--back"
+								class="bd-btn bd-btn--back"
 								disabled={snap().isFirstStep}
 								onClick={() => store.controller.back()}
 							>
@@ -1429,7 +1518,7 @@ export function BiabForm(props: BiabFormProps) {
 								fallback={
 									<button
 										type="button"
-										class="biab-btn biab-btn--next"
+										class="bd-btn bd-btn--next"
 										disabled={!snap().canAdvance}
 										onClick={() => store.controller.next()}
 									>
@@ -1439,7 +1528,7 @@ export function BiabForm(props: BiabFormProps) {
 							>
 								<button
 									type="submit"
-									class="biab-btn biab-btn--submit"
+									class="bd-btn bd-btn--submit"
 									disabled={snap().submitting}
 								>
 									{snap().submitting
@@ -1452,7 +1541,7 @@ export function BiabForm(props: BiabFormProps) {
 
 					{/* Success state. */}
 					<Show when={snap().submitted}>
-						<div class="biab-form__success" role="status">
+						<div class="bd-form__success" role="status">
 							Thanks — your response was received.
 						</div>
 					</Show>
@@ -1465,7 +1554,7 @@ export function BiabForm(props: BiabFormProps) {
 // Re-export the core types a consumer commonly annotates against, so they can
 // import everything they need from `@businessdash/sdk/solid` alone.
 export type {
-	BiabClient,
+	BdClient,
 	FormSchema,
 	FormSubmitResult,
 	FormFileValue,