@businessdash/sdk 0.9.60

package/dist/react.js

@@ -0,0 +1,2418 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, Fragment, useCallback, useContext, useEffect, useMemo, useRef, useState, useSyncExternalStore, } from "react";
+import { BiabDevClient } from "./client.js";
+import { buildAcceptAttr, concurrentRevealCount, createFormController, evalCondition, fetchIconNames, filterIconNames, flattenValueFields, formatCalcValue, iconUrl, isPendingFileValue, resolveFieldAutocomplete, shouldSearchOptions, validateFile, } from "./forms-core/index.js";
+import { baseUnitFor, convertToBase, formatMeasurement, isMeasurementCategory, unitsForCategory, } from "./forms-core/units.js";
+import { US_STATES } from "./forms-core/us-states.js";
+import { createBiabClient } from "./sdk.js";
+import { resolveSocialProfiles } from "./socials.js";
+function useEmbedSession(loader, options) {
+    const { apiKey, baseUrl, refreshLeadMs = 30_000 } = options;
+    const client = useMemo(() => new BiabDevClient({ apiKey, baseUrl }), [apiKey, baseUrl]);
+    const [state, setState] = useState({ status: "idle" });
+    // `loader` is recreated per surface; depending on it would refetch on every
+    // render, so it's intentionally omitted from the deps below.
+    // biome-ignore lint/correctness/useExhaustiveDependencies: loader omitted by design
+    const refresh = useCallback(async () => {
+        setState({ status: "loading" });
+        try {
+            const session = await loader(client);
+            setState({ status: "ready", session });
+        }
+        catch (error) {
+            setState({
+                status: "error",
+                error: error instanceof Error ? error : new Error("Unknown session error"),
+            });
+        }
+    }, [client]);
+    useEffect(() => {
+        void refresh();
+    }, [refresh]);
+    useEffect(() => {
+        if (state.status !== "ready")
+            return;
+        const expiresAt = Date.parse(state.session.expiresAt);
+        if (Number.isNaN(expiresAt))
+            return;
+        const delay = Math.max(1_000, expiresAt - Date.now() - refreshLeadMs);
+        const timer = setTimeout(() => {
+            void refresh();
+        }, delay);
+        return () => clearTimeout(timer);
+    }, [state, refresh, refreshLeadMs]);
+    return { client, state, refresh };
+}
+function useEmbedMessages(iframeRef, handler) {
+    useEffect(() => {
+        const onMessage = (e) => {
+            if (!e.data || typeof e.data !== "object")
+                return;
+            if (e.data.kind !== "biab")
+                return;
+            if (iframeRef.current &&
+                e.source !== null &&
+                e.source !== iframeRef.current.contentWindow)
+                return;
+            const { kind, ...rest } = e.data;
+            void kind;
+            handler(rest);
+        };
+        window.addEventListener("message", onMessage);
+        return () => window.removeEventListener("message", onMessage);
+    }, [handler, iframeRef]);
+}
+// Asserted-compat with the underlying DashboardSessionResponse so the public
+// `useDashboardSession` shape doesn't churn for existing callers.
+const _dashboardCompat = true;
+void _dashboardCompat;
+const DashboardContext = createContext(null);
+export function DashboardProvider({ apiKey, baseUrl, children, refreshLeadMs, }) {
+    if (!apiKey) {
+        throw new Error("<DashboardProvider> requires an `apiKey`.");
+    }
+    if (!baseUrl) {
+        throw new Error("<DashboardProvider> requires a `baseUrl`.");
+    }
+    const { state, refresh } = useEmbedSession((client) => client.dashboard.createSession(), { apiKey, baseUrl, refreshLeadMs });
+    const value = useMemo(() => ({ state, refresh }), [state, refresh]);
+    return (_jsx(DashboardContext.Provider, { value: value, children: children }));
+}
+export function useDashboardSession() {
+    const ctx = useContext(DashboardContext);
+    if (!ctx) {
+        throw new Error("useDashboardSession must be used inside <DashboardProvider>.");
+    }
+    return ctx;
+}
+const defaultIframeStyle = {
+    width: "100%",
+    height: "100%",
+    minHeight: "600px",
+    border: "0",
+    display: "block",
+};
+export function Dashboard({ className, style, title = "Business In A Box Dashboard", loadingFallback, errorFallback, } = {}) {
+    const { state, refresh } = useDashboardSession();
+    if (state.status === "error") {
+        if (errorFallback)
+            return _jsx(_Fragment, { children: errorFallback(state.error, () => void refresh()) });
+        return (_jsxs("div", { className: className, style: { padding: 16, ...style }, children: ["Dashboard unavailable: ", state.error.message] }));
+    }
+    if (state.status !== "ready") {
+        return (_jsx(_Fragment, { children: loadingFallback ?? (_jsx("div", { className: className, style: { padding: 16, ...style }, children: "Loading dashboard\u2026" })) }));
+    }
+    return (_jsx("iframe", { className: className, sandbox: "allow-scripts allow-forms allow-same-origin allow-popups", src: state.session.url, style: { ...defaultIframeStyle, ...style }, title: title }));
+}
+function EmbedIframe({ state, refresh, title, className, style, loadingFallback, errorFallback, onEvent, extraSandbox, }) {
+    const iframeRef = useRef(null);
+    const onEventRef = useRef(onEvent);
+    useEffect(() => {
+        onEventRef.current = onEvent;
+    }, [onEvent]);
+    useEmbedMessages(iframeRef, (event) => {
+        onEventRef.current?.(event);
+    });
+    if (state.status === "error") {
+        if (errorFallback)
+            return _jsx(_Fragment, { children: errorFallback(state.error, () => void refresh()) });
+        return (_jsxs("div", { className: className, style: { padding: 16, ...style }, children: ["Embed unavailable: ", state.error.message] }));
+    }
+    if (state.status !== "ready") {
+        return (_jsx(_Fragment, { children: loadingFallback ?? (_jsx("div", { className: className, style: { padding: 16, ...style }, children: "Loading\u2026" })) }));
+    }
+    const sandbox = `allow-scripts allow-forms allow-same-origin allow-popups${extraSandbox ? ` ${extraSandbox}` : ""}`;
+    return (_jsx("iframe", { className: className, ref: iframeRef, sandbox: sandbox, src: state.session.url, style: { ...defaultIframeStyle, ...style }, title: title }));
+}
+export function Storefront({ apiKey, baseUrl, productId, className, style, title = "Storefront", loadingFallback, errorFallback, onEvent, onCartChange, refreshLeadMs, }) {
+    const input = useMemo(() => (productId ? { productId } : undefined), [productId]);
+    const { state, refresh } = useEmbedSession((client) => client.storefront.createSession(input), { apiKey, baseUrl, refreshLeadMs });
+    const handleEvent = useCallback((event) => {
+        onEvent?.(event);
+        if (event.type === "biab:cart:update") {
+            onCartChange?.(event.count, event.subtotalCents);
+        }
+    }, [onEvent, onCartChange]);
+    return (_jsx(EmbedIframe, { className: className, errorFallback: errorFallback, loadingFallback: loadingFallback, onEvent: handleEvent, refresh: refresh, state: state, style: style, title: title }));
+}
+export function Cart({ apiKey, baseUrl, className, style, title = "Cart", loadingFallback, errorFallback, onEvent, onCartChange, refreshLeadMs, }) {
+    const { state, refresh } = useEmbedSession((client) => client.cart.createSession(), { apiKey, baseUrl, refreshLeadMs });
+    const handleEvent = useCallback((event) => {
+        onEvent?.(event);
+        if (event.type === "biab:cart:update") {
+            onCartChange?.(event.count, event.subtotalCents);
+        }
+    }, [onEvent, onCartChange]);
+    return (_jsx(EmbedIframe, { className: className, errorFallback: errorFallback, loadingFallback: loadingFallback, onEvent: handleEvent, refresh: refresh, state: state, style: style, title: title }));
+}
+export function Checkout(props) {
+    const { apiKey, baseUrl, cart, mode = "redirect", className, style, title = "Checkout", children, loadingFallback, errorFallback, onEvent, onSuccess, onCancel, onError, } = props;
+    const client = useMemo(() => new BiabDevClient({ apiKey, baseUrl }), [apiKey, baseUrl]);
+    const [state, setState] = useState({
+        status: "idle",
+    });
+    const start = useCallback(async () => {
+        setState({ status: "loading" });
+        try {
+            const session = await client.checkout.createSession(cart);
+            setState({ status: "ready", session });
+            if (mode === "redirect") {
+                window.location.href = session.stripeUrl;
+            }
+        }
+        catch (error) {
+            const err = error instanceof Error ? error : new Error("Checkout failed");
+            setState({ status: "error", error: err });
+            onError?.(err);
+        }
+    }, [client, cart, mode, onError]);
+    const handleEvent = useCallback((event) => {
+        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")
+            onError?.(new Error(event.message));
+    }, [onEvent, onSuccess, onCancel, onError]);
+    // Lazily create the session once it's idle (iframe mode). Declared BEFORE the
+    // redirect-mode early return so the hook order stays stable across renders
+    // (rules of hooks); the mode guard keeps redirect mode from auto-starting.
+    useEffect(() => {
+        if (mode !== "redirect" && state.status === "idle")
+            void start();
+    }, [mode, state.status, start]);
+    if (mode === "redirect") {
+        return (_jsx("button", { className: className, disabled: state.status === "loading", onClick: () => void start(), style: style, type: "button", children: children ?? (state.status === "loading" ? "Loading…" : "Checkout") }));
+    }
+    return (_jsx(EmbedIframe, { className: className, errorFallback: errorFallback, extraSandbox: "allow-top-navigation", loadingFallback: loadingFallback, onEvent: handleEvent, refresh: start, state: state, style: style, title: title }));
+}
+export function CheckoutResult(props) {
+    const { apiKey, baseUrl, orgSlug, sessionIdParam = "session_id", render, } = props;
+    const [state, setState] = useState({ status: "loading" });
+    useEffect(() => {
+        const url = new URL(window.location.href);
+        const sessionId = url.searchParams.get(sessionIdParam);
+        if (!sessionId) {
+            setState({ status: "error", error: new Error("Missing session id.") });
+            return;
+        }
+        const client = new BiabDevClient({ 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(JSON.stringify({ json: { orgSlug, sessionId } }))}`;
+        // Defensive: reject misconfigured baseUrl that resolves to a non-http(s)
+        // scheme (e.g. `javascript:` slipping in through SDK config).
+        const parsed = (() => {
+            try {
+                return new URL(requestUrl);
+            }
+            catch {
+                return null;
+            }
+        })();
+        if (!parsed ||
+            (parsed.protocol !== "https:" && parsed.protocol !== "http:")) {
+            setState({
+                status: "error",
+                error: new Error(`Invalid baseUrl: ${baseUrl}`),
+            });
+            return;
+        }
+        fetch(parsed.toString())
+            .then((r) => r.json())
+            .then((data) => {
+            const result = data?.result?.data?.json ?? data?.result?.data;
+            if (!result)
+                throw new Error("Empty checkout-status response.");
+            setState({
+                status: result.paymentStatus === "paid" ? "paid" : "unpaid",
+                amountTotalCents: result.amountTotalCents,
+                currency: result.currency,
+                customerEmail: result.customerEmail,
+            });
+        })
+            .catch((err) => {
+            setState({
+                status: "error",
+                error: err instanceof Error ? err : new Error(String(err)),
+            });
+        });
+        void client; // silence unused-warning if fetch path changes later
+    }, [apiKey, baseUrl, orgSlug, sessionIdParam]);
+    if (render)
+        return _jsx(_Fragment, { children: render(state) });
+    if (state.status === "loading")
+        return _jsx("p", { children: "Loading order\u2026" });
+    if (state.status === "error")
+        return _jsxs("p", { children: ["Couldn't load order: ", state.error?.message] });
+    if (state.status === "paid")
+        return (_jsxs("p", { children: ["Thank you! Receipt sent to ", state.customerEmail ?? "your email", "."] }));
+    return _jsx("p", { children: "Payment status: pending. We'll email you when it finalizes." });
+}
+export function Chatbot({ apiKey, baseUrl, className, style, title = "Assistant", loadingFallback, errorFallback, onEvent, onAssistantMessage, refreshLeadMs, }) {
+    const { state, refresh } = useEmbedSession((client) => client.chatbot.createSession(), { apiKey, baseUrl, refreshLeadMs });
+    const handleEvent = useCallback((event) => {
+        onEvent?.(event);
+        if (event.type === "biab:chatbot:assistant-message") {
+            onAssistantMessage?.(event.content, event.model);
+        }
+    }, [onEvent, onAssistantMessage]);
+    return (_jsx(EmbedIframe, { className: className, errorFallback: errorFallback, loadingFallback: loadingFallback, onEvent: handleEvent, refresh: refresh, state: state, style: style, title: title }));
+}
+/**
+ * Headless chat hook — for hosts that want to render their own chat UI but
+ * still drive every turn through the org's persisted chatbot config.
+ *
+ * Beyond `messages` and `send`, the hook tracks the latest `uiActions` (e.g.
+ * `show_form` — call {@link useChatbot}.getForm to fetch the definition and
+ * {@link useChatbot}.submitForm to POST a filled form back), and the latest
+ * `availability` snapshot (front-desk presence + wait-time hint) so the
+ * consumer can show or hide its "Talk to a person" CTA.
+ */
+export function useChatbot(options) {
+    const { apiKey, baseUrl } = options;
+    const client = useMemo(() => new BiabDevClient({ apiKey, baseUrl }), [apiKey, baseUrl]);
+    const [messages, setMessages] = useState([]);
+    const [isPending, setIsPending] = useState(false);
+    const [error, setError] = useState(null);
+    const [latestUiActions, setLatestUiActions] = useState([]);
+    const [availability, setAvailability] = useState(null);
+    const send = useCallback(async (content) => {
+        const trimmed = content.trim();
+        if (!trimmed)
+            return null;
+        setError(null);
+        setIsPending(true);
+        const next = [
+            ...messages,
+            { role: "user", content: trimmed },
+        ];
+        setMessages(next);
+        try {
+            const input = { messages: next };
+            const reply = await client.chatbot.chat(input);
+            setMessages((prev) => [
+                ...prev,
+                { role: "assistant", content: reply.text },
+            ]);
+            setLatestUiActions(reply.uiActions ?? []);
+            if (reply.availability)
+                setAvailability(reply.availability);
+            return reply;
+        }
+        catch (err) {
+            const e = err instanceof Error ? err : new Error("Chat failed");
+            setError(e);
+            return null;
+        }
+        finally {
+            setIsPending(false);
+        }
+    }, [client, messages]);
+    const reset = useCallback(() => {
+        setMessages([]);
+        setError(null);
+        setLatestUiActions([]);
+    }, []);
+    const getConfig = useCallback(async () => client.chatbot.getConfig(), [client]);
+    const refreshAvailability = useCallback(async () => {
+        try {
+            const next = await client.chatbot.getAvailability();
+            setAvailability(next);
+            return next;
+        }
+        catch {
+            return null;
+        }
+    }, [client]);
+    const getForm = useCallback(async (slug) => {
+        try {
+            // Chat `show_form` flow → the chatbot path (Live + chatbotAccess).
+            return await client.chatbot.getChatForm(slug);
+        }
+        catch {
+            return null;
+        }
+    }, [client]);
+    const submitForm = useCallback(async (slug, input) => {
+        try {
+            const priorChat = messages.map((m, i) => ({
+                role: m.role,
+                content: m.content,
+                createdAt: i,
+            }));
+            // Chatbot submit carries the transcript → chatbot path.
+            return await client.chatbot.submitChatForm(slug, {
+                ...input,
+                priorChat: input.priorChat ?? priorChat,
+            });
+        }
+        catch (err) {
+            setError(err instanceof Error ? err : new Error("Submit failed"));
+            return null;
+        }
+    }, [client, messages]);
+    const uploadFile = useCallback((args) => client.chatbot.uploadFile(args), [client]);
+    return {
+        messages,
+        send,
+        reset,
+        isPending,
+        error,
+        getConfig,
+        latestUiActions,
+        availability,
+        refreshAvailability,
+        getForm,
+        submitForm,
+        uploadFile,
+    };
+}
+const STATIC_FIELD_TYPES = new Set([
+    "title",
+    "subtitle",
+    "separator",
+    "flex_row",
+    "input_group",
+]);
+/**
+ * Structural-only inline styles. Anything visual (gap, padding, color,
+ * border, radius) is left for the consumer's `classNames` slots to set
+ * via their own Tailwind / CSS — these inline styles only enforce that
+ * the layout actually works (column flex, scrolling message list, etc.)
+ * and would otherwise be tedious to require from every consumer.
+ */
+const inlineLayoutStyles = {
+    root: {
+        display: "flex",
+        flexDirection: "column",
+        minHeight: 0,
+        // `relative` so the jump-to-latest control can absolutely-position itself
+        // over the transcript.
+        position: "relative",
+        overflow: "hidden",
+    },
+    messageList: {
+        flex: 1,
+        overflowY: "auto",
+        display: "flex",
+        flexDirection: "column",
+    },
+    inputBar: { display: "flex" },
+    inputField: { flex: 1 },
+    formField: { display: "flex", flexDirection: "column" },
+};
+/**
+ * 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),
+ * 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_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%;}}
+`;
+/**
+ * In-tree React chatbot component. Same backend wiring as the iframe
+ * `<Chatbot />` (chat → uiActions → form fetch → submit + CRM mirrors,
+ * plus availability polling) but rendered directly in the consumer's
+ * DOM tree so they can style every piece with their own CSS / Tailwind.
+ *
+ * For zero-customization drop-in use, prefer `<Chatbot />` (iframe).
+ * For fully custom UI, use the `useChatbot()` hook directly.
+ */
+export function ChatbotInline({ apiKey, baseUrl, welcomeMessage, title = "Assistant", subtitle = null, classNames = {}, className, style, unstyled = false, availabilityPollMs = 30_000, renderMessage, renderPresenceStrip, onAssistantMessage, }) {
+    const { messages, send, isPending, error, latestUiActions, availability, refreshAvailability, getForm, submitForm, getConfig, uploadFile, } = useChatbot({ apiKey, baseUrl });
+    const [thread, setThread] = useState(() => welcomeMessage
+        ? [{ kind: "text", role: "assistant", content: welcomeMessage }]
+        : []);
+    const [draft, setDraft] = useState("");
+    const lastUserCount = useRef(0);
+    const lastAssistantCount = useRef(0);
+    const handledActionFingerprint = useRef("");
+    const scrollRef = useRef(null);
+    // Follow the live edge only while the reader is already at the bottom; the
+    // jump-to-latest control surfaces when they've scrolled up.
+    const followRef = useRef(true);
+    const lastThreadLen = useRef(0);
+    const [showJump, setShowJump] = useState(false);
+    // Visitor file uploads (entitlement-gated) + email capture.
+    const uploadSessionIdRef = useRef(null);
+    const fileUploadInputRef = useRef(null);
+    const [stagedFile, setStagedFile] = useState(null);
+    const [stagedPreview, setStagedPreview] = useState(null);
+    const [fileUploadsEnabled, setFileUploadsEnabled] = useState(false);
+    const [emailCaptureMode, setEmailCaptureMode] = useState("off");
+    const [capturedEmail, setCapturedEmail] = useState(null);
+    const [emailDraft, setEmailDraft] = useState("");
+    const [emailRequestDismissed, setEmailRequestDismissed] = useState(false);
+    const [isUploading, setIsUploading] = useState(false);
+    const [uploadError, setUploadError] = useState(null);
+    // Inject the default visual theme once (id-guarded). Skipped when `unstyled`.
+    // The rules are zero-specificity `:where(…)`, so any `classNames` a consumer
+    // passes still win — this only styles the otherwise-bare default drop-in.
+    useEffect(() => {
+        if (unstyled || typeof document === "undefined")
+            return;
+        if (document.getElementById(CHATBOT_INLINE_STYLE_ID))
+            return;
+        const styleEl = document.createElement("style");
+        styleEl.id = CHATBOT_INLINE_STYLE_ID;
+        styleEl.textContent = CHATBOT_INLINE_CSS;
+        document.head.appendChild(styleEl);
+    }, [unstyled]);
+    const scrollToEnd = useCallback((behavior = "auto") => {
+        const el = scrollRef.current;
+        if (!el)
+            return;
+        // Defer one frame so React has flushed the new node before we measure.
+        requestAnimationFrame(() => {
+            el.scrollTo({ top: el.scrollHeight, behavior });
+        });
+    }, []);
+    // Track whether the reader is at the live edge (24px slack); toggle the jump
+    // control accordingly.
+    const handleScroll = useCallback(() => {
+        const el = scrollRef.current;
+        if (!el)
+            return;
+        const bottom = el.scrollHeight - el.scrollTop - el.clientHeight <= 24;
+        followRef.current = bottom;
+        setShowJump(!bottom && el.scrollHeight - el.clientHeight > 24);
+    }, []);
+    const jumpToLatest = useCallback(() => {
+        followRef.current = true;
+        setShowJump(false);
+        scrollToEnd("smooth");
+    }, [scrollToEnd]);
+    // Mirror useChatbot's `messages` into the thread so user input + assistant
+    // replies show up alongside any form cards we've stitched in.
+    useEffect(() => {
+        const prevUser = lastUserCount.current;
+        const prevAssistant = lastAssistantCount.current;
+        const userMsgs = messages.filter((m) => m.role === "user");
+        const assistantMsgs = messages.filter((m) => m.role === "assistant");
+        if (userMsgs.length > prevUser) {
+            const newOnes = userMsgs.slice(prevUser);
+            setThread((prev) => [
+                ...prev,
+                ...newOnes.map((m) => ({
+                    kind: "text",
+                    role: "user",
+                    content: m.content,
+                })),
+            ]);
+            lastUserCount.current = userMsgs.length;
+        }
+        if (assistantMsgs.length > prevAssistant) {
+            const newOnes = assistantMsgs.slice(prevAssistant);
+            setThread((prev) => [
+                ...prev,
+                ...newOnes.map((m) => ({
+                    kind: "text",
+                    role: "assistant",
+                    content: m.content,
+                })),
+            ]);
+            const lastReply = newOnes[newOnes.length - 1]?.content;
+            if (lastReply)
+                onAssistantMessage?.(lastReply);
+            lastAssistantCount.current = assistantMsgs.length;
+        }
+    }, [messages, onAssistantMessage]);
+    // Resolve `show_form` UI actions into inline form cards. Fingerprint by
+    // turn so we don't double-fetch the same recommendation.
+    useEffect(() => {
+        if (!latestUiActions.length)
+            return;
+        const fingerprint = latestUiActions
+            .map((a) => (a.kind === "show_form" ? a.formSlug : a.kind))
+            .join("|");
+        if (fingerprint === handledActionFingerprint.current)
+            return;
+        handledActionFingerprint.current = fingerprint;
+        let cancelled = false;
+        void (async () => {
+            for (const action of latestUiActions) {
+                if (action.kind !== "show_form")
+                    continue;
+                const form = await getForm(action.formSlug);
+                if (cancelled || !form)
+                    continue;
+                setThread((prev) => {
+                    if (prev.some((item) => item.kind === "form" && item.form.slug === form.slug)) {
+                        return prev;
+                    }
+                    return [...prev, { kind: "form", form, submitted: false }];
+                });
+            }
+        })();
+        return () => {
+            cancelled = true;
+        };
+    }, [latestUiActions, getForm]);
+    // New content: anchor a new USER turn near the top (with a 64px peek of the
+    // prior item) so the reply grows into view below it; otherwise follow the
+    // live edge only while the reader is already at the bottom. Replaces the old
+    // unconditional scroll-to-bottom that yanked readers who had scrolled up.
+    // biome-ignore lint/correctness/useExhaustiveDependencies: reads live DOM; thread/isPending are the triggers
+    useEffect(() => {
+        const el = scrollRef.current;
+        if (!el)
+            return;
+        const grew = thread.length > lastThreadLen.current;
+        const newest = thread[thread.length - 1];
+        const newestIsUser = grew && newest?.kind === "text" && newest.role === "user";
+        lastThreadLen.current = thread.length;
+        requestAnimationFrame(() => {
+            if (newestIsUser) {
+                const rows = el.querySelectorAll("[data-thread-row]");
+                const row = rows[rows.length - 1];
+                if (row) {
+                    const target = row.getBoundingClientRect().top -
+                        el.getBoundingClientRect().top +
+                        el.scrollTop -
+                        64;
+                    // Anchor only if the turn would otherwise overflow; else rest at end.
+                    if (el.scrollHeight - target > el.clientHeight) {
+                        el.scrollTo({ top: Math.max(0, target), behavior: "smooth" });
+                        followRef.current = false;
+                    }
+                    else {
+                        el.scrollTop = el.scrollHeight;
+                        followRef.current = true;
+                    }
+                }
+            }
+            else if (followRef.current) {
+                el.scrollTop = el.scrollHeight;
+            }
+            handleScroll();
+        });
+    }, [thread, isPending, handleScroll]);
+    useEffect(() => {
+        void refreshAvailability();
+        if (availabilityPollMs <= 0)
+            return;
+        const id = setInterval(() => {
+            void refreshAvailability();
+        }, availabilityPollMs);
+        return () => clearInterval(id);
+    }, [refreshAvailability, availabilityPollMs]);
+    // Read the org's upload + email-capture config once on mount.
+    useEffect(() => {
+        let cancelled = false;
+        void getConfig()
+            .then((cfg) => {
+            if (cancelled)
+                return;
+            setFileUploadsEnabled(cfg.fileUploadsEnabled);
+            setEmailCaptureMode(cfg.emailCaptureMode);
+        })
+            .catch(() => { });
+        return () => {
+            cancelled = true;
+        };
+    }, [getConfig]);
+    const handleSend = useCallback(async () => {
+        const trimmed = draft.trim();
+        if ((!trimmed && !stagedFile) || isPending || isUploading)
+            return;
+        // Upload a staged file first so it posts together with the text.
+        if (stagedFile) {
+            if (!uploadSessionIdRef.current) {
+                uploadSessionIdRef.current = crypto.randomUUID();
+            }
+            setUploadError(null);
+            setIsUploading(true);
+            try {
+                const fileRef = await uploadFile({
+                    sessionId: uploadSessionIdRef.current,
+                    file: stagedFile,
+                    uploaderEmail: capturedEmail,
+                });
+                setThread((prev) => [...prev, { kind: "file", file: fileRef }]);
+                setStagedFile(null);
+                setStagedPreview(null);
+            }
+            catch (e) {
+                setUploadError(e instanceof Error ? e.message : "Upload failed.");
+                setIsUploading(false);
+                return;
+            }
+            setIsUploading(false);
+        }
+        if (trimmed) {
+            setDraft("");
+            await send(trimmed);
+        }
+    }, [
+        draft,
+        isPending,
+        isUploading,
+        stagedFile,
+        uploadFile,
+        capturedEmail,
+        send,
+    ]);
+    const handleFormSubmit = useCallback(async (slug, data) => {
+        const submitterEmail = (typeof data["email"] === "string" ? data["email"] : undefined) ??
+            (typeof data["contact_email"] === "string"
+                ? data["contact_email"]
+                : undefined);
+        const submitterName = (typeof data["name"] === "string" ? data["name"] : undefined) ??
+            (typeof data["full_name"] === "string" ? data["full_name"] : undefined);
+        const result = await submitForm(slug, {
+            data,
+            submitterEmail,
+            submitterName,
+        });
+        if (!result)
+            return false;
+        setThread((prev) => prev.map((item) => item.kind === "form" && item.form.slug === slug
+            ? { ...item, submitted: true }
+            : item));
+        return true;
+    }, [submitForm]);
+    const userMessageCount = thread.filter((t) => t.kind === "text" && t.role === "user").length;
+    const needsEmailGate = emailCaptureMode === "require" && !capturedEmail && userMessageCount === 0;
+    const showEmailRequest = emailCaptureMode === "request" &&
+        !capturedEmail &&
+        !emailRequestDismissed &&
+        userMessageCount === 0;
+    const submitEmailGate = useCallback(() => {
+        const email = emailDraft.trim();
+        if (/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(email)) {
+            setCapturedEmail(email);
+            setEmailDraft("");
+        }
+    }, [emailDraft]);
+    const stageFile = useCallback((file) => {
+        // 7 MB cap (also enforced server-side on upload).
+        if (file.size > 7 * 1024 * 1024) {
+            setUploadError("That file is too large (max 7 MB).");
+            return;
+        }
+        setUploadError(null);
+        setStagedFile(file);
+        setStagedPreview(file.type.startsWith("image/") ? URL.createObjectURL(file) : null);
+    }, []);
+    const clearStaged = useCallback(() => {
+        setStagedFile(null);
+        setStagedPreview(null);
+    }, []);
+    useEffect(() => {
+        return () => {
+            if (stagedPreview)
+                URL.revokeObjectURL(stagedPreview);
+        };
+    }, [stagedPreview]);
+    return (_jsxs("div", { className: [classNames.root, className].filter(Boolean).join(" ") || undefined, "data-biab-chatbot": unstyled ? undefined : "", style: { ...inlineLayoutStyles.root, ...style }, children: [title !== null ? (_jsxs("div", { className: classNames.header, "data-slot": "header", children: [_jsx("div", { className: classNames.headerTitle, "data-slot": "header-title", children: title }), subtitle !== null && subtitle !== undefined ? (_jsx("div", { className: classNames.headerSubtitle, "data-slot": "header-subtitle", children: subtitle })) : null] })) : null, availability?.frontDeskEnabled
+                ? renderPresenceStrip
+                    ? renderPresenceStrip(availability)
+                    : defaultPresenceStrip({ availability, classNames })
+                : null, _jsxs("div", { className: classNames.messageList, "data-slot": "message-list", onScroll: handleScroll, ref: scrollRef, style: inlineLayoutStyles.messageList, children: [thread.map((item, idx) => {
+                        if (renderMessage)
+                            return renderMessage(item, idx);
+                        if (item.kind === "form") {
+                            return (_jsx(InlineFormCard, { classNames: classNames, form: item.form, onSubmit: (data) => handleFormSubmit(item.form.slug, data), submitted: item.submitted }, idx));
+                        }
+                        if (item.kind === "file") {
+                            const isImage = item.file.type.startsWith("image/");
+                            return (_jsx("a", { className: isImage ? undefined : classNames.messageUser, "data-role": "user", "data-slot": isImage ? "message-image" : "message-file", "data-thread-row": "", href: item.file.url, rel: "noreferrer", target: "_blank", children: isImage ? (_jsx("img", { alt: item.file.name, src: item.file.url, style: {
+                                        display: "block",
+                                        maxWidth: "100%",
+                                        maxHeight: 220,
+                                        borderRadius: 12,
+                                    } })) : (`📎 ${item.file.name}`) }, idx));
+                        }
+                        const bubbleClass = item.role === "user"
+                            ? classNames.messageUser
+                            : classNames.messageAssistant;
+                        return (_jsx("div", { className: [classNames.messageRow, bubbleClass]
+                                .filter(Boolean)
+                                .join(" ") || undefined, "data-role": item.role, "data-slot": "message-row", "data-thread-row": "", children: item.content }, idx));
+                    }), isPending ? (_jsx("div", { className: classNames.messagePending, "data-slot": "message-pending", children: "\u2026" })) : null, error ? (_jsx("div", { className: classNames.errorText, "data-slot": "error-text", children: error.message })) : null] }), showJump ? (_jsx("button", { "aria-label": "Jump to latest", className: classNames.jumpButton, "data-slot": "jump-latest", onClick: jumpToLatest, type: "button", children: "\u2193 Latest" })) : null, showEmailRequest ? (_jsxs("form", { "data-slot": "email-request", onSubmit: (e) => {
+                    e.preventDefault();
+                    submitEmailGate();
+                }, style: {
+                    display: "flex",
+                    gap: 8,
+                    alignItems: "center",
+                    padding: "8px 12px",
+                    fontSize: 12,
+                }, children: [_jsx("input", { onChange: (e) => setEmailDraft(e.target.value), placeholder: "Your email (optional)", style: {
+                            flex: 1,
+                            background: "transparent",
+                            border: "none",
+                            outline: "none",
+                            color: "inherit",
+                        }, type: "email", value: emailDraft }), _jsx("button", { style: {
+                            background: "none",
+                            border: "none",
+                            cursor: "pointer",
+                            color: "inherit",
+                            fontWeight: 500,
+                        }, type: "submit", children: "Share" }), _jsx("button", { onClick: () => setEmailRequestDismissed(true), style: {
+                            background: "none",
+                            border: "none",
+                            cursor: "pointer",
+                            color: "inherit",
+                            opacity: 0.7,
+                        }, type: "button", children: "Skip" })] })) : null, needsEmailGate ? (_jsxs("form", { className: classNames.inputBar, "data-slot": "input-bar", onSubmit: (e) => {
+                    e.preventDefault();
+                    submitEmailGate();
+                }, style: inlineLayoutStyles.inputBar, children: [_jsx("input", { className: classNames.inputField, "data-slot": "input-field", onChange: (e) => setEmailDraft(e.target.value), placeholder: "Enter your email to start chatting", required: true, style: inlineLayoutStyles.inputField, type: "email", value: emailDraft }), _jsx("button", { className: classNames.sendButton, "data-slot": "send-button", type: "submit", children: "Start" })] })) : (_jsxs("form", { className: classNames.inputBar, "data-slot": "input-bar", onSubmit: (e) => {
+                    e.preventDefault();
+                    void handleSend();
+                }, style: inlineLayoutStyles.inputBar, children: [fileUploadsEnabled ? (_jsxs(_Fragment, { children: [_jsx("input", { onChange: (e) => {
+                                    const f = e.target.files?.[0];
+                                    e.target.value = "";
+                                    if (f)
+                                        stageFile(f);
+                                }, ref: fileUploadInputRef, style: { display: "none" }, type: "file" }), _jsx("button", { "aria-label": "Attach a file", "data-slot": "upload-button", disabled: isPending, onClick: () => fileUploadInputRef.current?.click(), type: "button", children: "\uD83D\uDCCE" })] })) : null, _jsx("input", { className: classNames.inputField, "data-slot": "input-field", disabled: isPending, onChange: (e) => setDraft(e.target.value), placeholder: "Type a message\u2026", style: inlineLayoutStyles.inputField, value: draft }), _jsx("button", { className: classNames.sendButton, "data-slot": "send-button", disabled: isPending || isUploading || (!draft.trim() && !stagedFile), type: "submit", children: "Send" })] })), stagedFile ? (_jsxs("div", { "data-slot": "staged-attachment", style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 8,
+                    padding: "8px 12px",
+                    borderTop: "1px solid color-mix(in srgb,currentColor 10%,transparent)",
+                }, children: [stagedPreview ? (_jsx("img", { alt: stagedFile.name, src: stagedPreview, style: {
+                            width: 36,
+                            height: 36,
+                            borderRadius: 6,
+                            objectFit: "cover",
+                            flexShrink: 0,
+                        } })) : (_jsx("span", { style: { fontSize: 18, flexShrink: 0 }, children: "\uD83D\uDCCE" })), _jsx("span", { style: {
+                            flex: 1,
+                            minWidth: 0,
+                            overflow: "hidden",
+                            textOverflow: "ellipsis",
+                            whiteSpace: "nowrap",
+                            fontSize: 13,
+                        }, children: stagedFile.name }), _jsx("button", { "aria-label": "Remove file", onClick: clearStaged, style: {
+                            border: "none",
+                            background: "transparent",
+                            color: "inherit",
+                            cursor: "pointer",
+                            opacity: 0.7,
+                            fontSize: 16,
+                        }, type: "button", children: "\u2715" })] })) : null, uploadError ? (_jsx("div", { className: classNames.errorText, "data-slot": "error-text", style: { padding: "0 12px 8px" }, children: uploadError })) : null] }));
+}
+function defaultPresenceStrip({ availability, classNames, }) {
+    const { staffAvailable, offline, estimateLabel, onlineHandlers } = availability;
+    const stateClass = offline
+        ? classNames.presenceStripOffline
+        : staffAvailable
+            ? classNames.presenceStripOnline
+            : classNames.presenceStripAway;
+    const label = offline
+        ? "Team is offline — leave a message and we'll follow up."
+        : staffAvailable
+            ? onlineHandlers.length === 0
+                ? "Team is online — we're here."
+                : onlineHandlers.length === 1
+                    ? `${onlineHandlers[0]?.name} is here now.`
+                    : `${onlineHandlers.length} teammates are here now.`
+            : "Team's away — we'll get back as soon as we can.";
+    return (_jsxs("div", { className: [classNames.presenceStrip, stateClass].filter(Boolean).join(" ") ||
+            undefined, "data-slot": "presence-strip", children: [_jsx("span", { className: classNames.presenceLabel, children: label }), estimateLabel ? (_jsx("span", { className: classNames.presenceEstimate, children: estimateLabel })) : null] }));
+}
+function InlineFormCard({ form, submitted, onSubmit, classNames, }) {
+    const [values, setValues] = useState({});
+    const [submitting, setSubmitting] = useState(false);
+    const [submitError, setSubmitError] = useState(null);
+    const inputFields = useMemo(() => {
+        const CONTAINER_FIELD_TYPES = new Set([
+            "input_group",
+            "condition_block",
+            "or_condition",
+            "flex_row",
+            "multi_populator",
+        ]);
+        const DISPLAY_ONLY_TYPES = new Set([
+            ...STATIC_FIELD_TYPES,
+            "body_text",
+        ]);
+        const out = [];
+        const walk = (list) => {
+            for (const f of list ?? []) {
+                const children = f.children;
+                if (CONTAINER_FIELD_TYPES.has(f.type) || Array.isArray(children)) {
+                    walk(children);
+                }
+                else if (!DISPLAY_ONLY_TYPES.has(f.type)) {
+                    out.push(f);
+                }
+            }
+        };
+        walk(form.fields);
+        return out;
+    }, [form.fields]);
+    if (submitted) {
+        return (_jsxs("div", { className: classNames.formReceipt, "data-slot": "form-receipt", children: ["Thanks \u2014 we got your ", form.name.toLowerCase(), "."] }));
+    }
+    return (_jsxs("form", { className: classNames.formCard, "data-slot": "form-card", onSubmit: async (e) => {
+            e.preventDefault();
+            setSubmitting(true);
+            setSubmitError(null);
+            const ok = await onSubmit(values);
+            if (!ok)
+                setSubmitError("Could not submit — please try again.");
+            setSubmitting(false);
+        }, children: [_jsxs("div", { children: [_jsx("div", { className: classNames.formTitle, "data-slot": "form-title", children: form.name }), form.description ? (_jsx("div", { className: classNames.formDescription, "data-slot": "form-description", children: form.description })) : null] }), inputFields.map((field) => {
+                const value = values[field.id] ?? "";
+                const setValue = (next) => setValues((prev) => ({ ...prev, [field.id]: next }));
+                if (field.type === "textarea") {
+                    return (_jsxs("label", { className: classNames.formField, "data-slot": "form-field", style: inlineLayoutStyles.formField, children: [_jsxs("span", { className: classNames.formLabel, "data-slot": "form-label", children: [field.label, field.required ? " *" : ""] }), _jsx("textarea", { className: classNames.formTextarea, "data-slot": "form-textarea", onChange: (e) => setValue(e.target.value), placeholder: field.placeholder, required: field.required, rows: 3, value: typeof value === "string" ? value : "" })] }, field.id));
+                }
+                if (field.type === "select" && field.options?.length) {
+                    return (_jsxs("label", { className: classNames.formField, "data-slot": "form-field", style: inlineLayoutStyles.formField, children: [_jsxs("span", { className: classNames.formLabel, "data-slot": "form-label", children: [field.label, field.required ? " *" : ""] }), _jsxs("select", { className: classNames.formSelect, "data-slot": "form-select", onChange: (e) => setValue(e.target.value), required: field.required, value: typeof value === "string" ? value : "", children: [_jsx("option", { value: "", children: "Choose\u2026" }), field.options.map((opt) => (_jsx("option", { value: opt, children: opt }, opt)))] })] }, field.id));
+                }
+                const inputType = field.type === "email"
+                    ? "email"
+                    : field.type === "phone"
+                        ? "tel"
+                        : field.type === "number"
+                            ? "number"
+                            : "text";
+                return (_jsxs("label", { className: classNames.formField, style: inlineLayoutStyles.formField, children: [_jsxs("span", { className: classNames.formLabel, "data-slot": "form-label", children: [field.label, field.required ? " *" : ""] }), _jsx("input", { className: classNames.formInput, "data-slot": "form-input", onChange: (e) => setValue(e.target.value), placeholder: field.placeholder, required: field.required, type: inputType, value: typeof value === "string" ? value : "" })] }, field.id));
+            }), submitError ? (_jsx("div", { className: classNames.formError, "data-slot": "form-error", children: submitError })) : null, _jsx("button", { className: classNames.formSubmit, "data-slot": "form-submit", disabled: submitting, type: "submit", children: submitting ? "Sending…" : "Send" })] }));
+}
+export function Blog({ apiKey, baseUrl, postSlug, className, style, title = "Blog", loadingFallback, errorFallback, onEvent, refreshLeadMs, }) {
+    const input = useMemo(() => (postSlug ? { postSlug } : undefined), [postSlug]);
+    const { state, refresh } = useEmbedSession((client) => client.blog.createSession(input), { apiKey, baseUrl, refreshLeadMs });
+    return (_jsx(EmbedIframe, { className: className, errorFallback: errorFallback, loadingFallback: loadingFallback, onEvent: onEvent, refresh: refresh, state: state, style: style, title: title }));
+}
+const DEFAULT_AUTH_BASE_PATH = "/api/biab-auth";
+function buildAuthHref(subroute, props) {
+    const base = (props.basePath ?? DEFAULT_AUTH_BASE_PATH).replace(/\/$/, "");
+    const params = new URLSearchParams();
+    if (props.returnTo)
+        params.set("returnTo", props.returnTo);
+    if (props.loginHint)
+        params.set("loginHint", props.loginHint);
+    const qs = params.toString();
+    return `${base}/${subroute}${qs ? `?${qs}` : ""}`;
+}
+export function SignIn({ children, ...rest }) {
+    return (_jsx("a", { className: rest.className, href: buildAuthHref("sign-in", rest), style: rest.style, children: children ?? "Sign in" }));
+}
+export function SignUp({ children, ...rest }) {
+    return (_jsx("a", { className: rest.className, href: buildAuthHref("sign-up", rest), style: rest.style, children: children ?? "Create account" }));
+}
+export function SignOut({ children, basePath, className, style, }) {
+    return (_jsx("a", { className: className, href: buildAuthHref("sign-out", { basePath }), style: style, children: children ?? "Sign out" }));
+}
+/**
+ * Programmatic sign-in — navigates the browser through the auth handler's
+ * `/sign-in` route. Equivalent to clicking `<SignIn />`. Browser-only.
+ */
+export function signIn(options = {}) {
+    if (typeof window === "undefined")
+        return;
+    window.location.assign(buildAuthHref("sign-in", options));
+}
+/**
+ * Programmatic sign-up — navigates through `/sign-up`. Equivalent to
+ * clicking `<SignUp />`. Browser-only.
+ */
+export function signUp(options = {}) {
+    if (typeof window === "undefined")
+        return;
+    window.location.assign(buildAuthHref("sign-up", options));
+}
+/**
+ * Programmatic sign-out. Defaults to a redirect through the auth
+ * handler's `/sign-out` route (same as `<SignOut />`). Pass
+ * `{ mode: "fetch" }` for a fetch-based clear that resolves with
+ * `{ ok: true }` and does not navigate.
+ */
+export async function signOut(options = {}) {
+    if (typeof window === "undefined")
+        return { ok: false };
+    const base = (options.basePath ?? DEFAULT_AUTH_BASE_PATH).replace(/\/$/, "");
+    if (options.mode === "fetch") {
+        try {
+            const res = await fetch(`${base}/sign-out`, {
+                method: "POST",
+                credentials: "include",
+            });
+            return { ok: res.ok };
+        }
+        catch {
+            return { ok: false };
+        }
+    }
+    window.location.assign(`${base}/sign-out`);
+    return { ok: true };
+}
+/**
+ * Programmatic "forgot password" — POSTs to the auth handler's
+ * `/password-reset` route, which the SDK forwards to BIAB. 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.
+ */
+export async function requestPasswordReset(input) {
+    if (typeof window === "undefined")
+        return { ok: false };
+    const base = (input.basePath ?? DEFAULT_AUTH_BASE_PATH).replace(/\/$/, "");
+    const body = { email: input.email };
+    if (input.returnTo)
+        body.returnTo = input.returnTo;
+    try {
+        const res = await fetch(`${base}/password-reset`, {
+            method: "POST",
+            credentials: "include",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify(body),
+        });
+        return { ok: res.ok };
+    }
+    catch {
+        return { ok: false };
+    }
+}
+/**
+ * Reads the current tenant session by hitting the `/me` route the SDK's
+ * auth-handler exposes on the tenant's own domain. No props needed because
+ * the cookie + handler path are the source of truth.
+ */
+export function useUser(options) {
+    const basePath = (options?.basePath ?? DEFAULT_AUTH_BASE_PATH).replace(/\/$/, "");
+    const [state, setState] = useState({
+        status: "loading",
+        user: null,
+    });
+    useEffect(() => {
+        let cancelled = false;
+        fetch(`${basePath}/me`, { credentials: "include" })
+            .then((r) => (r.ok ? r.json() : null))
+            .then((body) => {
+            if (cancelled)
+                return;
+            if (body) {
+                setState({ status: "signed-in", user: body });
+            }
+            else {
+                setState({ status: "signed-out", user: null });
+            }
+        })
+            .catch(() => {
+            if (cancelled)
+                return;
+            setState({ status: "signed-out", user: null });
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [basePath]);
+    return state;
+}
+const FOLLOWER_STORE_PREFIX = "biab.followers.";
+function readLocalFollow(key) {
+    if (typeof window === "undefined")
+        return null;
+    try {
+        const raw = window.localStorage.getItem(key);
+        if (!raw)
+            return null;
+        const parsed = JSON.parse(raw);
+        return typeof parsed?.email === "string"
+            ? { email: parsed.email, at: Number(parsed.at) || 0 }
+            : null;
+    }
+    catch {
+        return null;
+    }
+}
+function writeLocalFollow(key, value) {
+    if (typeof window === "undefined")
+        return;
+    try {
+        window.localStorage.setItem(key, JSON.stringify(value));
+    }
+    catch {
+        // storage disabled / quota — the local hint is best-effort.
+    }
+}
+function clearLocalFollow(key) {
+    if (typeof window === "undefined")
+        return;
+    try {
+        window.localStorage.removeItem(key);
+    }
+    catch {
+        // ignore
+    }
+}
+/**
+ * Visitor-facing followers/subscribe client, bound to a publishable token so it
+ * works browser-side with no backend.
+ *
+ *   const f = useFollowers({ token: pk, siteId });
+ *   if (!f.subscribedLocally) showForm();          // anonymous "already subscribed?" hint
+ *   await f.join({ email, name, source: "footer" }); // subscribe (+ remembers this browser)
+ *   const { follower } = await f.me(user.email);     // authoritative status (logged-in)
+ *   await f.leave(email);                            // unsubscribe (+ forgets)
+ *
+ * Source of truth for "is this visitor subscribed":
+ *   - Logged-in → pass `user.email` to `me()` (authoritative, cross-device).
+ *   - Anonymous → `subscribedLocally` — a per-browser flag set on `join()`.
+ *     Email is the real key; this is just a privacy-friendly UX hint so an
+ *     anonymous visitor isn't shown the form forever. Clearing storage / a new
+ *     device re-shows it, and re-subscribing is idempotent (no dupes). IP is
+ *     deliberately NOT used (shared NAT hides the form from non-subscribers).
+ *
+ * `useUser()` covers the auth session; this covers follower status + subscribe,
+ * which the session doesn't include. All actions are `followers:self`, so a
+ * publishable token can run them.
+ */
+export function useFollowers(options) {
+    const { token, siteId, baseUrl } = options;
+    const client = useMemo(() => createBiabClient({
+        apiKey: token,
+        siteId,
+        baseUrl: baseUrl ?? DEFAULT_PACKAGE_BASE_URL,
+    }), [token, siteId, baseUrl]);
+    const storeKey = `${FOLLOWER_STORE_PREFIX}${siteId}`;
+    const [local, setLocal] = useState(() => readLocalFollow(storeKey));
+    useEffect(() => {
+        setLocal(readLocalFollow(storeKey));
+    }, [storeKey]);
+    const join = useCallback(async (input) => {
+        const res = await client.followers.join(input);
+        const entry = { email: input.email, at: Date.now() };
+        writeLocalFollow(storeKey, entry);
+        setLocal(entry);
+        return res;
+    }, [client, storeKey]);
+    const leave = useCallback(async (email) => {
+        const res = await client.followers.leave({ email });
+        clearLocalFollow(storeKey);
+        setLocal(null);
+        return res;
+    }, [client, storeKey]);
+    const me = useCallback((email) => client.followers.me({ email }), [client]);
+    const edit = useCallback((email, patch) => client.followers.edit({ email, patch }), [client]);
+    return useMemo(() => ({
+        join,
+        leave,
+        me,
+        edit,
+        /** This browser already subscribed (instant, no network). Use to hide a
+         *  newsletter form for anonymous visitors. */
+        subscribedLocally: local !== null,
+        /** Email this browser subscribed with — pass to `me()` for an
+         *  authoritative re-check, or `null` if this browser hasn't subscribed. */
+        localEmail: local?.email ?? null,
+    }), [join, leave, me, edit, local]);
+}
+/**
+ * Lazy-fetch a single marketing page by `pageKey`. The hook reads from the
+ * SDK's shared cache when present (warmed by `useMarketingPagePreloader` or
+ * a previous `useMarketingPage` render) and only hits the network when the
+ * cache is empty — so navigating between pages on a many-page site only
+ * fetches the page the visitor actually views.
+ *
+ * Pass `enabled: false` to gate the request on something async (e.g., wait
+ * for the visitor to consent before loading the privacy page).
+ */
+export function useMarketingPage(options) {
+    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(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]);
+    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]);
+    const refresh = useCallback(() => fetchOnce(true), [fetchOnce]);
+    return { ...state, refresh };
+}
+/**
+ * Loads the payload-free directory of marketing pages for a site. Pair with
+ * `useMarketingPage(siteId, pageKey)` to render the selected page lazily.
+ */
+export function useMarketingPagesList(options) {
+    const { apiKey, baseUrl, siteId, enabled = true } = options;
+    const client = useMemo(() => new BiabDevClient({ apiKey, baseUrl }), [apiKey, baseUrl]);
+    const [state, setState] = useState({
+        status: "idle",
+        pages: null,
+    });
+    const fetchOnce = useCallback(async () => {
+        if (!enabled)
+            return;
+        setState({ status: "loading", pages: null });
+        try {
+            const response = 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]);
+    useEffect(() => {
+        void fetchOnce();
+    }, [fetchOnce]);
+    return { ...state, refresh: fetchOnce };
+}
+/**
+ * Returns a stable `preload(pageKey)` function that warms the SDK cache for
+ * the next page without rendering anything yet. Common pattern: wire it to
+ * `<Link onPointerEnter>` / `onFocus` so the next page is ready by the time
+ * the visitor clicks. Idempotent — repeat calls are free.
+ */
+export function useMarketingPagePreloader(options) {
+    const { apiKey, baseUrl, siteId } = options;
+    const client = useMemo(() => new BiabDevClient({ apiKey, baseUrl }), [apiKey, baseUrl]);
+    return useCallback(async (pageKey) => {
+        try {
+            return await client.site(siteId).marketingPages.prefetch(pageKey);
+        }
+        catch {
+            return null;
+        }
+    }, [client, siteId]);
+}
+// ── Marketing-flow hooks (schema-driven, see ./react-marketing.tsx) ────────
+export { useMarketingBundlePreloader, useMarketingLocales, useMarketingPageBundle, useMarketingPageSeo, useMarketingSection, usePublishedMarketingSchema, } from "./react-marketing.js";
+// ── Customer notification destination verification (0.9.0) ─────────────────
+/**
+ * Drop-in email-verification widget for the customer's notification
+ * preferences page. Customer enters an email, we mint + send a
+ * verification link, they click the link, the deep-link target
+ * page consumes the token via {@link VerifyEmailConfirm}.
+ */
+export function VerifyEmailFlow(props) {
+    const { apiKey, baseUrl, sessionToken, currentEmail } = props;
+    const client = useMemo(() => new BiabDevClient({ apiKey, baseUrl }), [apiKey, baseUrl]);
+    const [email, setEmail] = useState(currentEmail ?? "");
+    const [sent, setSent] = useState(false);
+    const [busy, setBusy] = useState(false);
+    const [error, setError] = useState(null);
+    const handleSend = useCallback(async () => {
+        setError(null);
+        setBusy(true);
+        try {
+            await client.notifications
+                .withSession(sessionToken)
+                .startVerification({ kind: "email", destination: email });
+            setSent(true);
+            props.onSent?.(email);
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : "Couldn't send verification.");
+        }
+        finally {
+            setBusy(false);
+        }
+    }, [client, email, props, sessionToken]);
+    if (sent) {
+        return (_jsx("div", { className: props.className, children: _jsxs("p", { children: [_jsx("strong", { children: "Check your inbox." }), " A verification link is on the way to ", email, ". It expires in 15 minutes."] }) }));
+    }
+    return (_jsxs("div", { className: props.className, children: [_jsxs("label", { style: { display: "block", marginBottom: 8 }, children: ["Email for shipping notifications", _jsx("input", { autoComplete: "email", onChange: (e) => setEmail(e.target.value), placeholder: "you@example.com", style: { display: "block", width: "100%", padding: 8 }, type: "email", value: email })] }), error ? (_jsx("p", { style: { color: "#dc2626", margin: "4px 0" }, children: error })) : null, _jsx("button", { disabled: busy || !email.includes("@"), onClick: handleSend, type: "button", children: busy ? "Sending…" : "Send verification link" })] }));
+}
+/**
+ * Deep-link target for an email verification flow. Reads the `token`
+ * prop (typically pulled from the URL query string), confirms it
+ * server-side, and renders success / failure.
+ */
+export function VerifyEmailConfirm(props) {
+    const { apiKey, baseUrl, sessionToken, token, onVerified } = props;
+    const client = useMemo(() => new BiabDevClient({ apiKey, baseUrl }), [apiKey, baseUrl]);
+    const [state, setState] = useState({ kind: "idle" });
+    useEffect(() => {
+        let cancelled = false;
+        (async () => {
+            try {
+                const r = await client.notifications
+                    .withSession(sessionToken)
+                    .confirmVerification({ token });
+                if (cancelled)
+                    return;
+                setState({ kind: "ok", destination: r.destination });
+                onVerified?.(r.destination);
+            }
+            catch (err) {
+                if (cancelled)
+                    return;
+                setState({
+                    kind: "err",
+                    message: err instanceof Error ? err.message : "Verification failed.",
+                });
+            }
+        })();
+        return () => {
+            cancelled = true;
+        };
+    }, [client, onVerified, sessionToken, token]);
+    if (state.kind === "idle")
+        return _jsx("div", { className: props.className, children: "Verifying\u2026" });
+    if (state.kind === "err") {
+        return (_jsxs("div", { className: props.className, children: [_jsxs("p", { style: { color: "#dc2626" }, children: [_jsx("strong", { children: "Couldn't verify." }), " ", state.message] }), _jsx("p", { children: "The link may have expired. Request a new one from your notification preferences page." })] }));
+    }
+    return (_jsx("div", { className: props.className, children: _jsxs("p", { children: [_jsx("strong", { children: "Verified \u2713" }), " Notifications will now send to", " ", state.destination, "."] }) }));
+}
+/**
+ * Inline SMS-OTP verification flow. Two phases, no round-trip
+ * deep link. 6-digit OTP, 5-minute TTL.
+ */
+export function VerifyPhoneFlow(props) {
+    const { apiKey, baseUrl, sessionToken, currentPhone, onVerified } = props;
+    const client = useMemo(() => new BiabDevClient({ apiKey, baseUrl }), [apiKey, baseUrl]);
+    const [phone, setPhone] = useState(currentPhone ?? "");
+    const [phase, setPhase] = useState("enter");
+    const [otp, setOtp] = useState("");
+    const [busy, setBusy] = useState(false);
+    const [error, setError] = useState(null);
+    const handleSend = useCallback(async () => {
+        setError(null);
+        setBusy(true);
+        try {
+            await client.notifications
+                .withSession(sessionToken)
+                .startVerification({ kind: "phone", destination: phone });
+            setPhase("otp");
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : "Couldn't send code.");
+        }
+        finally {
+            setBusy(false);
+        }
+    }, [client, phone, sessionToken]);
+    const handleConfirm = useCallback(async () => {
+        setError(null);
+        setBusy(true);
+        try {
+            const r = await client.notifications
+                .withSession(sessionToken)
+                .confirmVerification({ token: otp });
+            setPhase("done");
+            onVerified?.(r.destination);
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : "Code didn't match.");
+        }
+        finally {
+            setBusy(false);
+        }
+    }, [client, onVerified, otp, sessionToken]);
+    if (phase === "done") {
+        return (_jsx("div", { className: props.className, children: _jsxs("p", { children: [_jsx("strong", { children: "Verified \u2713" }), " SMS notifications will now go to ", phone, "."] }) }));
+    }
+    if (phase === "otp") {
+        return (_jsxs("div", { className: props.className, children: [_jsxs("p", { children: ["We sent a 6-digit code to ", phone, ". Enter it below."] }), _jsx("input", { autoComplete: "one-time-code", inputMode: "numeric", maxLength: 6, onChange: (e) => setOtp(e.target.value.replace(/\D/g, "")), placeholder: "123456", style: {
+                        display: "block",
+                        width: "100%",
+                        padding: 8,
+                        letterSpacing: 4,
+                        fontSize: 18,
+                    }, type: "text", value: otp }), error ? (_jsx("p", { style: { color: "#dc2626", margin: "4px 0" }, children: error })) : null, _jsx("button", { disabled: busy || otp.length !== 6, onClick: handleConfirm, type: "button", children: busy ? "Verifying…" : "Confirm" })] }));
+    }
+    return (_jsxs("div", { className: props.className, children: [_jsxs("label", { style: { display: "block", marginBottom: 8 }, children: ["Phone number for SMS notifications", _jsx("input", { autoComplete: "tel", onChange: (e) => setPhone(e.target.value), placeholder: "+1 415 555 0123", style: { display: "block", width: "100%", padding: 8 }, type: "tel", value: phone })] }), error ? (_jsx("p", { style: { color: "#dc2626", margin: "4px 0" }, children: error })) : null, _jsx("button", { disabled: busy || phone.length < 7, onClick: handleSend, type: "button", children: busy ? "Sending…" : "Send code" })] }));
+}
+// ─── Element rendering ─────────────────────────────────────────────────────
+// Search thresholds and icon-URL resolution live in `forms-core/elements` so
+// every binding agrees; only the view layer is per-framework.
+/**
+ * `icon_select` — pick an icon by name from a searchable grid.
+ *
+ * The name list is fetched lazily from the platform on first render rather than
+ * bundled: it's ~1,600 entries that change only when Lucide does. An author who
+ * curated `allowedIcons` skips the fetch entirely.
+ */
+function BiabIconSelect({ field, value, set, }) {
+    const cfg = field
+        .iconConfig ?? {};
+    const curated = cfg.allowedIcons ?? [];
+    const [all, setAll] = useState(curated);
+    const [query, setQuery] = useState("");
+    const selected = typeof value === "string" ? value : "";
+    useEffect(() => {
+        if (curated.length > 0)
+            return; // nothing to fetch
+        let cancelled = false;
+        // Resolves to [] on failure rather than throwing — an empty grid is
+        // recoverable, a crashed form isn't.
+        void fetchIconNames().then((names) => {
+            if (!cancelled)
+                setAll(names);
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [curated.length]);
+    const results = useMemo(() => filterIconNames(all, query), [all, query]);
+    return (_jsxs("div", { className: "biab-iconselect", children: [_jsx("input", { className: "biab-input biab-iconselect__search", onChange: (e) => setQuery(e.target.value), placeholder: field.placeholder || "Search icons…", type: "text", value: query }), selected && (_jsxs("span", { className: "biab-iconselect__current", children: [_jsx("img", { alt: selected, height: 16, src: iconUrl(selected), width: 16 }), _jsx("button", { className: "biab-iconselect__clear", onClick: () => set(""), type: "button", children: "\u00D7" })] })), _jsx("div", { className: "biab-iconselect__grid", children: results.map((name) => (_jsx("button", { "aria-label": name, "aria-pressed": selected === name, className: `biab-iconselect__item${selected === name ? "is-selected" : ""}`, onClick: () => set(name), title: name, type: "button", children: _jsx("img", { alt: "", height: 16, src: iconUrl(name), width: 16 }) }, name))) })] }));
+}
+/**
+ * `image_input` — one image, from an upload OR a pasted URL.
+ *
+ * The submitted value is a plain URL string either way. An upload is held as a
+ * pending file and flushed by the controller at submit, exactly like
+ * `file_upload`, then replaced by its stored URL.
+ */
+function BiabImageInput({ field, value, set, }) {
+    const cfg = field.imageInputConfig ?? {};
+    const sources = cfg.sources ?? "both";
+    const [mode, setMode] = useState(sources === "url" ? "url" : "upload");
+    const pending = isPendingFileValue(value) ? value : null;
+    const url = typeof value === "string" ? value : "";
+    return (_jsxs("div", { className: "biab-imageinput", children: [sources === "both" && (_jsx("div", { className: "biab-imageinput__modes", children: ["upload", "url"].map((m) => (_jsx("button", { "aria-pressed": mode === m, className: `biab-imageinput__mode${mode === m ? "is-active" : ""}`, onClick: () => setMode(m), type: "button", children: m === "upload" ? "Upload" : "Paste URL" }, m))) })), mode === "upload" && sources !== "url" ? (_jsx("input", { accept: (cfg.allowedTypes ?? ["image/*"]).join(","), className: "biab-input biab-imageinput__file", onChange: (e) => {
+                    const file = e.target.files?.[0];
+                    if (!file)
+                        return;
+                    const maxBytes = (cfg.maxSize ?? 5) * 1024 * 1024;
+                    if (file.size > maxBytes)
+                        return;
+                    set({
+                        pending: true,
+                        file,
+                        name: file.name,
+                        size: file.size,
+                    });
+                }, type: "file" })) : (_jsx("input", { className: "biab-input biab-imageinput__url", onChange: (e) => set(e.target.value), placeholder: field.placeholder || "https://example.com/image.png", type: "url", value: url })), cfg.showPreview !== false && (pending || url) ? (_jsx("img", { alt: "", className: "biab-imageinput__preview", src: pending ? "" : url })) : null, pending && (_jsxs("span", { className: "biab-imageinput__pending", children: [pending.name, " \u2014 uploads on submit."] }))] }));
+}
+// 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(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
+ *  a custom host. Use the **apex** host: `www.biab.app` 307-redirects to the
+ *  apex, and a CORS preflight does not follow redirects (the browser fails the
+ *  request), so a browser publishable-token client must target the apex. */
+export const DEFAULT_PACKAGE_BASE_URL = "https://biab.app/api/package/v1";
+/** Provide a BIAB forms client to every nested `<BiabForm>`. Pass a `client`, or
+ *  a publishable `token` + `siteId` (+ optional `baseUrl`) to build a browser
+ *  client. */
+export function BiabFormProvider({ client, token, siteId, baseUrl, children, }) {
+    const resolved = useMemo(() => client ??
+        (token && siteId
+            ? createBiabClient({
+                apiKey: token,
+                siteId,
+                baseUrl: baseUrl ?? DEFAULT_PACKAGE_BASE_URL,
+            })
+            : null), [client, token, siteId, baseUrl]);
+    return (_jsx(BiabFormClientContext.Provider, { value: resolved, children: children }));
+}
+/** Read the client from a surrounding `<BiabFormProvider>`, if any. */
+export function useBiabFormsClient() {
+    return useContext(BiabFormClientContext);
+}
+const FetchScheduleSlotsContext = createContext(undefined);
+/** Autofill (`autocomplete`) config for the field tree, provided by `<BiabForm>`.
+ *  Default `{}` → inference on, no overrides. */
+const AutocompleteContext = createContext({});
+/** Auto-schedule (instant booking) picker for `<BiabForm>`: 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({ field, value, onChange, }) {
+    const fetchSlots = useContext(FetchScheduleSlotsContext);
+    const v = value && typeof value === "object" ? value : {};
+    const tz = typeof Intl !== "undefined"
+        ? (Intl.DateTimeFormat().resolvedOptions().timeZone ?? "UTC")
+        : "UTC";
+    const [slots, setSlots] = useState([]);
+    const [phase, setPhase] = useState("idle");
+    useEffect(() => {
+        if (!fetchSlots)
+            return;
+        let cancelled = false;
+        setPhase("loading");
+        const from = new Date();
+        const to = new Date(from.getTime() + 21 * 24 * 60 * 60 * 1000);
+        fetchSlots({ fieldId: field.id, from, to })
+            .then((res) => {
+            if (cancelled)
+                return;
+            setSlots(res);
+            setPhase("loaded");
+        })
+            .catch(() => {
+            if (!cancelled)
+                setPhase("error");
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [fetchSlots, field.id]);
+    if (!fetchSlots) {
+        return (_jsx("p", { className: "biab-field__schedule-hint", children: "Booking isn't available here." }));
+    }
+    if (phase === "loading" || phase === "idle") {
+        return (_jsx("p", { className: "biab-field__schedule-hint", children: "Loading available times\u2026" }));
+    }
+    if (phase === "error") {
+        return (_jsx("p", { className: "biab-field__schedule-hint", children: "Couldn't load times right now." }));
+    }
+    if (slots.length === 0) {
+        return (_jsx("p", { className: "biab-field__schedule-hint", children: "No open times in the next few weeks." }));
+    }
+    const byDay = new Map();
+    for (const s of slots) {
+        const d = new Date(s.startAt);
+        const dayKey = d.toLocaleDateString(undefined, {
+            weekday: "short",
+            month: "short",
+            day: "numeric",
+        });
+        const label = d.toLocaleTimeString(undefined, {
+            hour: "numeric",
+            minute: "2-digit",
+        });
+        const arr = byDay.get(dayKey) ?? [];
+        arr.push({ startAt: s.startAt, label });
+        byDay.set(dayKey, arr);
+    }
+    return (_jsx("div", { className: "biab-field__schedule-auto", children: [...byDay.entries()].map(([day, times]) => (_jsxs("div", { className: "biab-field__schedule-day", children: [_jsx("p", { className: "biab-field__schedule-day-label", children: day }), _jsx("div", { className: "biab-field__schedule-times", children: times.map((t) => (_jsx("button", { className: "biab-field__schedule-slot", "data-selected": v.slotStartAt === t.startAt ? "true" : undefined, onClick: () => onChange({ slotStartAt: t.startAt, timezone: tz }), type: "button", children: t.label }, t.startAt))) })] }, day))) }));
+}
+/**
+ * Subscribe a component to a `FormController` via React's official external-store
+ * primitive. `getSnapshot` returns the controller's cached snapshot object, which
+ * the store only re-creates on mutation, so referential equality gives React a
+ * correct bail-out without extra memoization. SSR uses the same snapshot.
+ */
+function useFormSnapshot(controller) {
+    const subscribe = useCallback((onStoreChange) => controller.subscribe(() => onStoreChange()), [controller]);
+    const getSnapshot = useCallback(() => controller.snapshot(), [controller]);
+    return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+}
+// ── biab-* class helpers (mirrors FormPreview's `fieldCssKey`) ───────────────
+function cx(...parts) {
+    return parts.filter(Boolean).join(" ");
+}
+/** camelCase a label into a stable, override-friendly CSS key. */
+function toOutputKeyLite(label) {
+    return label
+        .trim()
+        .toLowerCase()
+        .replace(/[^a-z0-9]+(.)?/g, (_m, c) => c ? c.toUpperCase() : "");
+}
+function fieldCssKey(field) {
+    const explicit = typeof field.outputKey === "string" ? field.outputKey.trim() : "";
+    if (explicit)
+        return explicit;
+    const lbl = typeof field.label === "string" ? field.label.trim() : "";
+    return (lbl && toOutputKeyLite(lbl)) || field.id;
+}
+/** Format a phone's local part as the user types and cap the digit count.
+ *  National (US/CA) → `(555) 123-4567` (10-digit cap). International → loose
+ *  3-digit grouping preserving a leading `+` (15-digit E.164 cap). Idempotent,
+ *  so it's safe as a controlled value. The submitted value carries the
+ *  formatting; server + SDK validation strip non-digits, so it stays valid. */
+function formatPhoneLocal(input, intl) {
+    if (intl) {
+        const plus = input.trimStart().startsWith("+") ? "+" : "";
+        const digits = input.replace(/\D/g, "").slice(0, 15);
+        return `${plus}${digits.replace(/(\d{3})(?=\d)/g, "$1 ")}`.trim();
+    }
+    // National (US/CA) — mirrors the canonical formatPhoneNumber: bare digits up to
+    // 3, `(555) 123` up to 6, then `(555) 123-4567` (display caps at 10 digits).
+    const cleaned = input.replace(/\D/g, "");
+    if (cleaned.length <= 3)
+        return cleaned;
+    if (cleaned.length <= 6)
+        return `(${cleaned.slice(0, 3)}) ${cleaned.slice(3)}`;
+    return `(${cleaned.slice(0, 3)}) ${cleaned.slice(3, 6)}-${cleaned.slice(6, 10)}`;
+}
+/** Table "check" column cell → ✓ / – / plain text. Mirrors the app's copy in
+ *  `src/shared/forms/table-cell.ts`. */
+function tableCheckState(cell) {
+    const v = cell.trim().toLowerCase();
+    if (["yes", "y", "true", "1", "x", "✓", "✔", "check"].includes(v))
+        return "yes";
+    if (["no", "n", "false", "0", "-", "–", "—", ""].includes(v))
+        return "no";
+    return "text";
+}
+/**
+ * Guard a user-supplied href before rendering it as a link: block dangerous
+ * schemes (javascript:/data:/vbscript:/file:) that would be an XSS vector, while
+ * allowing http(s) and relative paths. Returns undefined when unsafe so the
+ * caller renders no link. (The SDK renders plain `<a>` — framework-agnostic, no
+ * next/link — so this is the only hardening needed.)
+ */
+function safeHttpHref(raw) {
+    if (!raw)
+        return undefined;
+    const s = raw.trim();
+    if (!s)
+        return undefined;
+    const collapsed = s.toLowerCase().replace(/\s/g, "");
+    if (collapsed.startsWith("javascript:") ||
+        collapsed.startsWith("data:") ||
+        collapsed.startsWith("vbscript:") ||
+        collapsed.startsWith("file:")) {
+        return undefined;
+    }
+    return s;
+}
+// ── 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.
+function parseIsoDate(s) {
+    if (!s)
+        return null;
+    const d = new Date(`${s}T00:00:00`);
+    return Number.isNaN(d.getTime()) ? null : d;
+}
+function toIsoDate(d) {
+    const y = d.getFullYear();
+    const m = String(d.getMonth() + 1).padStart(2, "0");
+    const day = String(d.getDate()).padStart(2, "0");
+    return `${y}-${m}-${day}`;
+}
+const BIAB_MONTHS = [
+    "January",
+    "February",
+    "March",
+    "April",
+    "May",
+    "June",
+    "July",
+    "August",
+    "September",
+    "October",
+    "November",
+    "December",
+];
+const BIAB_WEEKDAYS = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
+function BiabDateRange({ value, setValue, }) {
+    const v = (value && typeof value === "object" ? value : {});
+    const start = parseIsoDate(v.start);
+    const end = parseIsoDate(v.end);
+    const [open, setOpen] = useState(false);
+    const [view, setView] = useState(() => {
+        const base = start ?? new Date();
+        return { y: base.getFullYear(), m: base.getMonth() };
+    });
+    const ref = useRef(null);
+    useEffect(() => {
+        if (!open)
+            return;
+        const onDoc = (e) => {
+            if (ref.current && !ref.current.contains(e.target)) {
+                setOpen(false);
+            }
+        };
+        document.addEventListener("mousedown", onDoc);
+        return () => document.removeEventListener("mousedown", onDoc);
+    }, [open]);
+    const pick = (day) => {
+        const iso = toIsoDate(day);
+        // First click (or restart after a complete range) sets the start.
+        if (!start || (start && end)) {
+            setValue({ start: iso, end: "" });
+            return;
+        }
+        // Second click: order the two so start <= end (`start` is non-null here).
+        if (day < start)
+            setValue({ start: iso, end: toIsoDate(start) });
+        else
+            setValue({ start: toIsoDate(start), end: iso });
+    };
+    const firstDow = new Date(view.y, view.m, 1).getDay();
+    const daysInMonth = new Date(view.y, view.m + 1, 0).getDate();
+    const cells = [];
+    for (let i = 0; i < firstDow; i++)
+        cells.push(null);
+    for (let d = 1; d <= daysInMonth; d++)
+        cells.push(new Date(view.y, view.m, d));
+    const sameDay = (a, b) => toIsoDate(a) === toIsoDate(b);
+    const today = new Date();
+    // COSS/shadcn range-state flags (drive the data-* attrs the CSS targets).
+    const dayState = (d) => ({
+        start: !!start && sameDay(d, start),
+        end: !!end && sameDay(d, end),
+        middle: !!start && !!end && d > start && d < end,
+        single: !!start && !end && sameDay(d, start),
+        today: sameDay(d, today),
+    });
+    const label = start
+        ? end
+            ? `${v.start} → ${v.end}`
+            : `${v.start} → …`
+        : "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`,
+    // which mirrors the COSS/shadcn calendar (import it from the SDK).
+    return (_jsxs("div", { className: "biab-daterange", ref: ref, style: { position: "relative" }, children: [_jsx("button", { className: "biab-input biab-field__input biab-daterange__trigger", onClick: () => setOpen((o) => !o), type: "button", children: label }), open && (_jsxs("div", { className: "biab-daterange__popover", style: { position: "absolute", zIndex: 50 }, children: [_jsxs("div", { className: "biab-daterange__nav", children: [_jsx("button", { "aria-label": "Previous month", className: "biab-daterange__navbtn", onClick: () => setView((s) => s.m === 0 ? { y: s.y - 1, m: 11 } : { y: s.y, m: s.m - 1 }), type: "button", children: "\u2039" }), _jsxs("span", { className: "biab-daterange__title", children: [BIAB_MONTHS[view.m], " ", view.y] }), _jsx("button", { "aria-label": "Next month", className: "biab-daterange__navbtn", onClick: () => setView((s) => s.m === 11 ? { y: s.y + 1, m: 0 } : { y: s.y, m: s.m + 1 }), type: "button", children: "\u203A" })] }), _jsxs("div", { className: "biab-daterange__grid", children: [BIAB_WEEKDAYS.map((w) => (_jsx("span", { className: "biab-daterange__dow", children: w }, w))), cells.map((d, i) => {
+                                if (!d) {
+                                    return (_jsx("span", { className: "biab-daterange__blank" }, `b-${i}`));
+                                }
+                                const st = dayState(d);
+                                return (_jsx("button", { className: "biab-daterange__day", "data-range-end": st.end || undefined, "data-range-middle": st.middle || undefined, "data-range-start": st.start || undefined, "data-selected-single": st.single || undefined, "data-today": st.today || undefined, onClick: () => pick(d), type: "button", children: d.getDate() }, toIsoDate(d)));
+                            })] })] }))] }));
+}
+// ── Per-type input renderer (light DOM, biab-* classes, no shadcn) ──────────
+function BiabFieldInput({ field, value, setValue, }) {
+    const set = (v) => 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
+    // overrides; see forms-core/autocomplete.ts.
+    const acConfig = useContext(AutocompleteContext);
+    const autoComplete = resolveFieldAutocomplete(field, acConfig);
+    switch (field.type) {
+        case "title":
+            return _jsx("h2", { className: "biab-field__title", children: field.label || "Untitled" });
+        case "subtitle":
+            return _jsx("h3", { className: "biab-field__subtitle", children: field.label || "" });
+        case "separator":
+            return _jsx("hr", { className: "biab-field__separator" });
+        case "richtext":
+            // `content` is server-sanitized HTML.
+            return field.content ? (_jsx("div", { className: "biab-field__richtext", 
+                // biome-ignore lint/security/noDangerouslySetInnerHtml: server-sanitized
+                dangerouslySetInnerHTML: { __html: field.content } })) : null;
+        case "body_text":
+            // Plain body paragraph (no HTML). Display only.
+            return field.content ? (_jsx("p", { className: "biab-field__body", children: field.content })) : null;
+        case "bullet_list": {
+            const lc = field.listConfig ?? {};
+            const variant = lc.variant ?? "bullets";
+            const items = lc.items ?? [];
+            if (variant === "details") {
+                return (_jsx("div", { className: "biab-field__points", children: items.map((it, i) => (_jsxs("div", { className: "biab-field__point", children: [it.icon && (_jsx("span", { "aria-hidden": "true", className: "biab-field__point-icon", "data-icon": it.icon })), _jsxs("span", { className: "biab-field__point-body", children: [_jsx("span", { className: "biab-field__point-title", children: it.text }), it.description && (_jsx("span", { className: "biab-field__point-desc", children: it.description }))] })] }, `${field.id}-li-${i}`))) }));
+            }
+            return (_jsxs("div", { className: "biab-field__bullets", children: [lc.title && (_jsx("div", { className: "biab-field__bullets-title", children: lc.title })), _jsx("ul", { children: items.map((it, i) => (_jsx("li", { children: it.text }, `${field.id}-li-${i}`))) })] }));
+        }
+        case "table": {
+            const cfg = field.tableConfig ?? {};
+            const columns = cfg.columns ?? [];
+            const rows = cfg.rows ?? [];
+            if (columns.length === 0)
+                return null;
+            return (_jsx("div", { className: "biab-field__table", children: _jsxs("table", { children: [_jsx("thead", { children: _jsx("tr", { children: columns.map((col, ci) => (_jsx("th", { "data-align": col.align ?? "left", "data-highlight": cfg.highlightColumn === ci ? "" : undefined, children: col.header }, `${field.id}-col-${ci}`))) }) }), _jsx("tbody", { children: rows.map((row, ri) => (_jsx("tr", { children: columns.map((col, ci) => {
+                                    const cell = row.cells?.[ci] ?? "";
+                                    const check = col.type === "check" ? tableCheckState(cell) : "text";
+                                    return (_jsx("td", { "data-align": col.align ?? "left", "data-check": check === "text" ? undefined : check, "data-highlight": cfg.highlightColumn === ci ? "" : undefined, children: check === "yes" ? "✓" : check === "no" ? "–" : cell }, `${field.id}-cell-${ri}-${ci}`));
+                                }) }, `${field.id}-row-${ri}`))) })] }) }));
+        }
+        case "calculation": {
+            // Value is computed by the controller (non-sensitive) or returned by
+            // the server after submit (sensitive). Read-only display.
+            const cfg = field
+                .calculationConfig;
+            const hasVal = value !== null && value !== undefined && value !== "";
+            if (cfg?.sensitive && !hasVal) {
+                return (_jsx("output", { className: "biab-field__calc biab-field__calc--pending", children: "Calculated on submit." }));
+            }
+            return (_jsx("output", { className: "biab-field__calc", children: hasVal ? formatCalcValue(value, cfg?.display) : "—" }));
+        }
+        case "image": {
+            const cfg = (field["imageConfig"] ?? {});
+            return cfg.src ? (_jsx("img", { alt: cfg.alt || "", className: "biab-field__image", src: cfg.src, style: {
+                    width: cfg.width ? `${cfg.width}px` : "auto",
+                    height: cfg.height ? `${cfg.height}px` : "auto",
+                    maxWidth: "100%",
+                } })) : null;
+        }
+        case "textarea": {
+            const cfg = (field["textareaConfig"] ?? {});
+            return (_jsx("textarea", { autoComplete: autoComplete, className: "biab-textarea biab-field__input", onChange: (e) => set(e.target.value), placeholder: ph, rows: cfg.rows ?? 4, style: cfg.resizable
+                    ? { resize: "vertical", minHeight: "6rem", maxHeight: "30rem" }
+                    : { resize: "none" }, value: typeof value === "string" ? value : "" }));
+        }
+        case "select": {
+            const opts = field.options ?? [];
+            // ComboBox card (`display: "combobox"`), or any list long enough that
+            // scrolling it is the worse experience. `<input list>` + `<datalist>`
+            // gives native typeahead with no JS and no styling opinion — which is
+            // exactly the SDK's contract.
+            if (shouldSearchOptions(opts.length, field.display)) {
+                const listId = `biab-list-${field.id}`;
+                return (_jsxs(_Fragment, { children: [_jsx("input", { className: "biab-input biab-combobox biab-field__input", list: listId, onChange: (e) => set(e.target.value), placeholder: ph || "Search…", type: "text", value: typeof value === "string" ? value : "" }), _jsx("datalist", { id: listId, children: opts.map((opt) => (_jsx("option", { value: opt }, opt))) })] }));
+            }
+            return (_jsxs("select", { className: "biab-select biab-field__input", onChange: (e) => set(e.target.value), value: typeof value === "string" ? value : "", children: [_jsx("option", { value: "", children: ph || "Select…" }), opts.map((opt) => (_jsx("option", { value: opt, children: opt }, opt)))] }));
+        }
+        case "icon_select":
+            return _jsx(BiabIconSelect, { field: field, set: set, value: value });
+        case "image_input":
+            return _jsx(BiabImageInput, { field: field, set: set, value: value });
+        case "radio":
+            return (_jsx("div", { className: "biab-field__radios", children: (field.options ?? []).map((opt) => (_jsxs("label", { className: "biab-field__radio", children: [_jsx("input", { checked: value === opt, name: field.id, onChange: () => set(opt), type: "radio", value: opt }), _jsx("span", { children: opt })] }, opt))) }));
+        case "checkbox": {
+            const arr = Array.isArray(value) ? value : [];
+            // Multi-Select element: a checkbox (value = string[]) rendered as a native
+            // multiple-select. The SDK ships unstyled HTML; consumers style it.
+            if (field.display === "dropdown") {
+                return (_jsx("select", { className: "biab-select biab-field__input", multiple: true, onChange: (e) => set(Array.from(e.target.selectedOptions).map((o) => o.value)), value: arr, children: (field.options ?? []).map((opt) => (_jsx("option", { value: opt, children: opt }, opt))) }));
+            }
+            return (_jsx("div", { className: "biab-field__checkboxes", children: (field.options ?? []).map((opt) => {
+                    const checked = arr.includes(opt);
+                    return (_jsxs("label", { className: "biab-field__checkbox", children: [_jsx("input", { checked: checked, onChange: (e) => set(e.target.checked
+                                    ? [...arr, opt]
+                                    : arr.filter((x) => x !== opt)), type: "checkbox" }), _jsx("span", { children: opt })] }, opt));
+                }) }));
+        }
+        case "choice_cards": {
+            const cc = field.choiceConfig ?? {};
+            const ccMulti = cc.mode === "multi";
+            const ccOptions = cc.options ?? [];
+            const arr = ccMulti && Array.isArray(value) ? value : [];
+            const single = !ccMulti && typeof value === "string" ? value : "";
+            const toggle = (label) => {
+                if (ccMulti) {
+                    set(arr.includes(label)
+                        ? arr.filter((x) => x !== label)
+                        : [...arr, label]);
+                }
+                else {
+                    set(single === label ? "" : label);
+                }
+            };
+            return (_jsx("div", { className: "biab-field__choice-cards", role: ccMulti ? "group" : "radiogroup", children: ccOptions.map((opt) => {
+                    const active = ccMulti
+                        ? arr.includes(opt.label)
+                        : single === opt.label;
+                    return (_jsxs("button", { "aria-pressed": active, className: "biab-field__choice-card", "data-active": active ? "" : undefined, "data-product-id": opt.productId || undefined, onClick: () => toggle(opt.label), role: ccMulti ? "checkbox" : "radio", type: "button", children: [opt.imageUrl ? (_jsx("img", { alt: opt.label, className: "biab-field__choice-card-image", src: opt.imageUrl })) : opt.icon ? (_jsx("span", { "aria-hidden": "true", className: "biab-field__choice-card-icon", "data-icon": opt.icon })) : null, _jsxs("span", { className: "biab-field__choice-card-body", children: [_jsxs("span", { className: "biab-field__choice-card-header", children: [_jsx("span", { className: "biab-field__choice-card-label", children: opt.label }), opt.price ? (_jsx("span", { className: "biab-field__choice-card-price", children: opt.price })) : null] }), opt.description ? (_jsx("span", { className: "biab-field__choice-card-description", children: opt.description })) : null, safeHttpHref(opt.href) ? (_jsx("a", { className: "biab-field__choice-card-link", href: safeHttpHref(opt.href), onClick: (e) => e.stopPropagation(), rel: "noopener noreferrer nofollow", target: "_blank", children: "View" })) : null] })] }, opt.label));
+                }) }));
+        }
+        case "boolean":
+            return (_jsxs("label", { className: "biab-field__switch", children: [_jsx("input", { checked: value === true, onChange: (e) => set(e.target.checked), type: "checkbox" }), _jsx("span", { children: field.placeholder || "Yes / No" })] }));
+        case "date":
+            return (_jsx("input", { className: "biab-input biab-field__input", onChange: (e) => set(e.target.value), type: "date", value: typeof value === "string" ? value : "" }));
+        case "time_picker": {
+            const mode = field.timeConfig?.mode ?? "simple";
+            if (mode === "simple") {
+                const format = field.timeConfig?.format ?? "12h";
+                const step = Math.max(field.timeConfig?.stepMinutes ?? 30, 1);
+                const opts = [];
+                for (let h = 0; h < 24; h++) {
+                    for (let m = 0; m < 60; m += step) {
+                        opts.push(`${String(h).padStart(2, "0")}:${String(m).padStart(2, "0")}`);
+                    }
+                }
+                const fmt = (t) => {
+                    if (format === "24h")
+                        return t;
+                    const [hStr, mStr = "00"] = t.split(":");
+                    const h = Number(hStr);
+                    const ampm = h < 12 ? "AM" : "PM";
+                    const h12 = h % 12 === 0 ? 12 : h % 12;
+                    return `${h12}:${mStr} ${ampm}`;
+                };
+                return (_jsxs("select", { className: "biab-select biab-field__input", onChange: (e) => set(e.target.value), value: typeof value === "string" ? value : "", children: [_jsx("option", { value: "", children: ph || "Select time" }), opts.map((o) => (_jsx("option", { value: o, children: fmt(o) }, o)))] }));
+            }
+            const pair = mode === "time_block"
+                ? ["start", "end"]
+                : ["date", "time"];
+            const v = value && typeof value === "object"
+                ? value
+                : {};
+            const inputType = (k) => (k === "date" ? "date" : "time");
+            return (_jsx("div", { className: "biab-field__grid2", children: pair.map((k) => (_jsxs("label", { className: "biab-field__sub", children: [_jsxs("span", { className: "biab-field__sublabel", children: [k[0]?.toUpperCase(), k.slice(1)] }), _jsx("input", { className: "biab-input", onChange: (e) => set({ ...v, [k]: e.target.value }), type: inputType(k), value: v[k] ?? "" })] }, k))) }));
+        }
+        case "date_range":
+            return _jsx(BiabDateRange, { setValue: (next) => set(next), value: value });
+        case "slider": {
+            const min = field.sliderConfig?.min ?? 0;
+            const max = field.sliderConfig?.max ?? 100;
+            const step = field.sliderConfig?.step ?? 1;
+            const unit = field.sliderConfig?.unit;
+            const fmt = (n) => unit === "currency" ? `$${n}` : unit === "percent" ? `${n}%` : `${n}`;
+            const v = typeof value === "number" ? value : min;
+            return (_jsxs("div", { className: "biab-field__slider", children: [_jsxs("div", { className: "biab-field__sliderscale", children: [_jsx("span", { children: fmt(min) }), _jsx("span", { className: "biab-field__slidervalue", children: fmt(v) }), _jsx("span", { children: fmt(max) })] }), _jsx("input", { max: max, min: min, onChange: (e) => set(Number(e.target.value)), step: step, type: "range", value: v })] }));
+        }
+        case "star_rating": {
+            const max = field.starRatingConfig?.maxStars ?? 5;
+            const v = typeof value === "number" ? value : 0;
+            return (_jsx("div", { className: "biab-field__stars", children: Array.from({ length: max }).map((_, i) => (_jsx("button", { "aria-label": `${i + 1} star${i ? "s" : ""}`, className: cx("biab-field__star", i < v && "biab-field__star--on"), onClick: () => set(i + 1), type: "button", children: "\u2605" }, `${field.id}-star-${i}`))) }));
+        }
+        case "happiness_rating": {
+            const v = typeof value === "number" ? value : -1;
+            return (_jsx("div", { className: "biab-field__happiness", children: ["😞", "😕", "😐", "🙂", "😄"].map((emoji, i) => (_jsx("button", { className: cx("biab-field__emoji", i === v && "biab-field__emoji--on"), onClick: () => set(i), type: "button", children: emoji }, emoji))) }));
+        }
+        case "stepper": {
+            const v = typeof value === "number" ? value : 0;
+            return (_jsxs("div", { className: "biab-field__stepper", children: [_jsx("button", { className: "biab-btn biab-btn--ghost", onClick: () => set(v - 1), type: "button", children: "\u2212" }), _jsx("input", { className: "biab-field__steppervalue", inputMode: "numeric", onChange: (e) => {
+                            const n = Number(e.target.value.replace(/[^\d-]/g, ""));
+                            set(Number.isFinite(n) ? n : 0);
+                        }, value: String(v) }), _jsx("button", { className: "biab-btn biab-btn--ghost", onClick: () => set(v + 1), type: "button", children: "+" })] }));
+        }
+        case "address": {
+            const v = value && typeof value === "object"
+                ? value
+                : {};
+            // Per-subfield autofill tokens (street/city/state/zip), suppressed when
+            // autofill is off for this field (global switch or per-field override).
+            const acOff = autoComplete === "off";
+            const rows = [
+                { k: "line1", label: "Address Line 1", ac: "street-address" },
+                { k: "line2", label: "Address Line 2", ac: "address-line2" },
+                { k: "city", label: "City", ac: "address-level2" },
+            ];
+            return (_jsxs("div", { className: "biab-field__address", children: [rows.map(({ k, label, ac }) => (_jsxs("label", { className: "biab-field__sub", children: [_jsx("span", { className: "biab-field__sublabel", children: label }), _jsx("input", { autoComplete: acOff ? "off" : ac, className: "biab-input", onChange: (e) => set({ ...v, [k]: e.target.value }), value: v[k] ?? "" })] }, k))), _jsxs("label", { className: "biab-field__sub", children: [_jsx("span", { className: "biab-field__sublabel", children: "State" }), _jsxs("select", { autoComplete: acOff ? "off" : "address-level1", className: "biab-select", onChange: (e) => set({ ...v, state: e.target.value }), value: v["state"] ?? "", children: [_jsx("option", { value: "", children: "Select state" }), US_STATES.map((s) => (_jsx("option", { value: s.abbr, children: s.name }, s.abbr)))] })] }, "state"), _jsxs("label", { className: "biab-field__sub", children: [_jsx("span", { className: "biab-field__sublabel", children: "Zip" }), _jsx("input", { autoComplete: acOff ? "off" : "postal-code", className: "biab-input", inputMode: "numeric", onChange: (e) => 
+                                // Numbers only (allow a single hyphen for ZIP+4).
+                                set({ ...v, zip: e.target.value.replace(/[^\d-]/g, "") }), placeholder: "90210", value: v["zip"] ?? "" })] }, "zip")] }));
+        }
+        case "color_picker": {
+            const v = typeof value === "string" ? value : "";
+            const presets = field.options ?? [];
+            const isCustom = v !== "" && !presets.includes(v);
+            return (_jsxs("div", { className: "biab-field__colors", children: [presets.map((color) => (_jsx("button", { className: cx("biab-field__color", v === color && "biab-field__color--on"), onClick: () => set(color), style: { backgroundColor: color }, title: color, type: "button" }, color))), _jsx("label", { className: cx("biab-field__color biab-field__color--custom", isCustom && "biab-field__color--on"), style: isCustom
+                            ? { backgroundColor: v }
+                            : {
+                                background: "conic-gradient(red, yellow, lime, cyan, blue, magenta, red)",
+                            }, title: isCustom ? v : "Custom color", children: _jsx("input", { "aria-label": "Custom color", onChange: (e) => set(e.target.value), style: { position: "absolute", inset: 0, opacity: 0 }, type: "color", value: isCustom ? v : "#3b82f6" }) })] }));
+        }
+        case "file_upload": {
+            // DEFERRED: selecting buffers a PendingFileValue; the controller uploads
+            // it during submit(). Validation runs up front; the server re-checks on
+            // presign.
+            const files = Array.isArray(value)
+                ? value
+                : [];
+            const cfg = field.fileConfig ?? {};
+            const maxFiles = cfg.maxFiles ?? 1;
+            const remaining = Math.max(maxFiles - files.length, 0);
+            return (_jsxs("div", { className: "biab-field__files", children: [_jsx("input", { accept: buildAcceptAttr(cfg.allowedTypes), className: "biab-field__fileinput", disabled: remaining === 0, multiple: maxFiles > 1, onChange: (e) => {
+                            const list = e.target.files;
+                            if (!list)
+                                return;
+                            const additions = [];
+                            for (const file of Array.from(list).slice(0, remaining)) {
+                                if (validateFile(file, {
+                                    allowedTypes: cfg.allowedTypes,
+                                    maxSize: cfg.maxSize,
+                                })) {
+                                    continue;
+                                }
+                                additions.push({
+                                    pending: true,
+                                    file,
+                                    name: file.name,
+                                    size: file.size,
+                                });
+                            }
+                            if (additions.length > 0)
+                                set([...files, ...additions]);
+                            e.target.value = "";
+                        }, type: "file" }), files.length > 0 && (_jsx("ul", { className: "biab-field__filelist", children: files.map((f, i) => (_jsxs("li", { className: "biab-field__fileitem", children: [_jsx("span", { className: "biab-field__filename", children: f.name }), isPendingFileValue(f) ? (_jsxs("span", { className: "biab-field__filepending", children: [" ", "\u00B7 uploads on submit"] })) : null, _jsx("button", { "aria-label": "Remove file", className: "biab-field__fileremove", onClick: () => set(files.filter((_, idx) => idx !== i)), type: "button", children: "\u00D7" })] }, `${f.name}-${i}`))) }))] }));
+        }
+        case "credit_card": {
+            const pc = field.paymentConfig;
+            const deposit = pc?.mode === "deposit";
+            const amount = deposit && pc?.amountCents
+                ? `${(pc.amountCents / 100).toFixed(2)} ${(pc.currency ?? "usd").toUpperCase()}`
+                : null;
+            return (_jsxs("div", { className: "biab-field__card", children: [_jsxs("div", { className: "biab-field__card-row", children: [_jsx("span", { className: "biab-field__card-brand", children: "CARD" }), _jsx("span", { className: "biab-field__card-dots", children: "\u2022\u2022\u2022\u2022 \u2022\u2022\u2022\u2022 \u2022\u2022\u2022\u2022 \u2022\u2022\u2022\u2022" }), _jsx("span", { className: "biab-field__card-mode", children: deposit
+                                    ? `Deposit${amount ? ` · ${amount}` : ""}`
+                                    : "Card on file" })] }), pc?.description ? (_jsx("p", { className: "biab-field__card-desc", children: pc.description })) : null, _jsxs("p", { className: "biab-field__card-note", children: ["Secure card entry via Stripe. Initialize Elements with", " ", _jsxs("code", { children: ["biab.forms.paymentIntent(slug, \"", field.id, "\")"] }), " (returns the clientSecret + the org's connected account), confirm, then store the intent id on this field before submit."] })] }));
+        }
+        case "schedule": {
+            if (field.scheduleConfig
+                ?.mode === "auto") {
+                return _jsx(BiabScheduleAuto, { field: field, onChange: set, value: value });
+            }
+            const sc = field.scheduleConfig;
+            const sv = (value && typeof value === "object" ? value : {});
+            const days = sc?.days?.length
+                ? sc.days
+                : ["mon", "tue", "wed", "thu", "fri", "sat", "sun"];
+            const windows = sc?.timeWindows?.length
+                ? sc.timeWindows
+                : sc?.granularTimes
+                    ? [
+                        "morning_8_10",
+                        "morning_10_12",
+                        "afternoon_12_2",
+                        "afternoon_2_4",
+                        "evening_4_6",
+                        "evening_6_8",
+                    ]
+                    : ["morning", "afternoon", "evening"];
+            const DAY = {
+                mon: "Mon",
+                tue: "Tue",
+                wed: "Wed",
+                thu: "Thu",
+                fri: "Fri",
+                sat: "Sat",
+                sun: "Sun",
+            };
+            const TIME = {
+                morning: "Morning",
+                afternoon: "Afternoon",
+                evening: "Evening",
+                morning_8_10: "8–10 AM",
+                morning_10_12: "10 AM–12 PM",
+                afternoon_12_2: "12–2 PM",
+                afternoon_2_4: "2–4 PM",
+                evening_4_6: "4–6 PM",
+                evening_6_8: "6–8 PM",
+            };
+            const toggle = (key, item) => {
+                const arr = sv[key] ?? [];
+                set({
+                    ...sv,
+                    [key]: arr.includes(item)
+                        ? arr.filter((x) => x !== item)
+                        : [...arr, item],
+                });
+            };
+            return (_jsxs("div", { className: "biab-field__schedule", children: [sc?.allowAsap !== false && (_jsxs("label", { className: "biab-field__schedule-asap", children: [_jsx("input", { checked: sv.asap === true, onChange: (e) => set({ ...sv, asap: e.target.checked }), type: "checkbox" }), " ", "As soon as possible"] })), _jsxs("div", { className: "biab-field__schedule-group", children: [_jsx("span", { className: "biab-field__schedule-label", children: "Preferred days" }), _jsx("div", { className: "biab-field__schedule-chips", children: days.map((d) => (_jsx("button", { className: cx("biab-field__chip", sv.days?.includes(d) && "biab-field__chip--on"), onClick: () => toggle("days", d), type: "button", children: DAY[d] ?? d }, d))) })] }), _jsxs("div", { className: "biab-field__schedule-group", children: [_jsx("span", { className: "biab-field__schedule-label", children: "Preferred times" }), _jsx("div", { className: "biab-field__schedule-chips", children: windows.map((w) => (_jsx("button", { className: cx("biab-field__chip", sv.times?.includes(w) && "biab-field__chip--on"), onClick: () => toggle("times", w), type: "button", children: TIME[w] ?? w }, w))) })] }), sc?.allowNotes !== false && (_jsx("textarea", { className: "biab-input biab-field__schedule-notes", onChange: (e) => set({ ...sv, notes: e.target.value }), placeholder: "Anything we should know about timing?", value: sv.notes ?? "" }))] }));
+        }
+        case "phone": {
+            const phoneIntl = field.phoneConfig?.international === true;
+            const phoneShown = formatPhoneLocal(typeof value === "string" ? value : "", phoneIntl);
+            return (_jsxs("div", { className: "biab-field__phone", children: [field.phoneConfig?.showFlags && (_jsx("span", { "aria-hidden": true, className: "biab-field__flag", children: "\uD83C\uDDFA\uD83C\uDDF8" })), _jsx("input", { autoComplete: autoComplete, className: "biab-input biab-field__input", inputMode: "tel", maxLength: phoneIntl ? 20 : 14, onChange: (e) => set(formatPhoneLocal(e.target.value, phoneIntl)), placeholder: ph || (phoneIntl ? "+1 (555) 000-0000" : "(555) 000-0000"), type: "tel", value: phoneShown })] }));
+        }
+        case "email":
+            return (_jsx("input", { autoComplete: autoComplete, className: "biab-input biab-field__input", onChange: (e) => set(e.target.value), placeholder: ph || "you@example.com", type: "email", value: typeof value === "string" ? value : "" }));
+        case "url": {
+            // Value object: { url, verified }. Visitor edits `url`; server stamps
+            // `verified` on submit.
+            const uv = (value && typeof value === "object" ? value : {});
+            return (_jsx("input", { autoComplete: autoComplete, className: "biab-input biab-field__input", inputMode: "url", onChange: (e) => set({ ...uv, url: e.target.value }), placeholder: ph || "https://example.com", type: "url", value: typeof uv.url === "string" ? uv.url : "" }));
+        }
+        case "number": {
+            const allowDecimal = field.allowDecimal !== false;
+            const noNegative = field.allowNegative === false;
+            return (_jsx("input", { className: "biab-input biab-field__input", inputMode: allowDecimal ? "decimal" : "numeric", min: noNegative ? 0 : undefined, onChange: (e) => {
+                    const raw = e.target.value;
+                    if (raw === "")
+                        return set("");
+                    const n = allowDecimal ? Number(raw) : Math.trunc(Number(raw));
+                    set(Number.isNaN(n) ? "" : n);
+                }, placeholder: ph, step: allowDecimal ? "any" : 1, type: "number", value: typeof value === "number"
+                    ? value
+                    : typeof value === "string"
+                        ? value
+                        : "" }));
+        }
+        case "currency": {
+            const symbol = field.currencyConfig?.symbol || "$";
+            const allowNeg = field.currencyConfig?.allowNegative === true;
+            const allowDec = field.currencyConfig?.allowDecimal !== false;
+            return (_jsxs("div", { className: "biab-field__currency", children: [_jsx("span", { "aria-hidden": "true", className: "biab-field__currency-symbol", children: symbol }), _jsx("input", { className: "biab-input biab-field__input", inputMode: "decimal", min: allowNeg ? undefined : 0, onChange: (e) => {
+                            const raw = e.target.value;
+                            if (raw === "")
+                                return set("");
+                            let n = allowDec ? Number(raw) : Math.trunc(Number(raw));
+                            if (Number.isNaN(n))
+                                return set("");
+                            if (!allowNeg && n < 0)
+                                n = Math.abs(n);
+                            set(n);
+                        }, placeholder: ph || "0.00", step: allowDec ? "0.01" : 1, type: "number", value: typeof value === "number" ? value : "" })] }));
+        }
+        case "measurement": {
+            const cfg = field.unitConfig ?? {};
+            const category = isMeasurementCategory(cfg.category)
+                ? cfg.category
+                : "length";
+            const units = cfg.units && cfg.units.length > 0
+                ? cfg.units
+                : unitsForCategory(category);
+            const mode = cfg.mode ?? "select";
+            const defaultUnit = cfg.defaultUnit ?? units[0] ?? "";
+            const allowDec = cfg.allowDecimal !== false;
+            const mv = (value && typeof value === "object" ? value : {});
+            const num = typeof mv.value === "number" ? mv.value : "";
+            const unit = mv.unit ?? defaultUnit;
+            const emit = (nextNum, nextUnit) => {
+                const base = typeof nextNum === "number"
+                    ? convertToBase(nextNum, nextUnit, category)
+                    : null;
+                set({
+                    value: nextNum,
+                    unit: nextUnit,
+                    base: base ?? undefined,
+                    baseUnit: baseUnitFor(category),
+                });
+            };
+            const hint = typeof num === "number" ? formatMeasurement(num, unit, category) : "";
+            return (_jsxs("div", { className: "biab-field__measurement", children: [_jsx("input", { className: "biab-input biab-field__input", inputMode: "decimal", onChange: (e) => {
+                            const raw = e.target.value;
+                            if (raw === "")
+                                return emit("", unit);
+                            const n = allowDec ? Number(raw) : Math.trunc(Number(raw));
+                            emit(Number.isNaN(n) ? "" : n, unit);
+                        }, placeholder: ph || "0", step: allowDec ? "any" : 1, type: "number", value: num }), mode === "fixed" ? (_jsx("span", { "aria-hidden": "true", className: "biab-field__unit", children: unit })) : (_jsx("select", { className: "biab-select biab-field__unit-select", onChange: (e) => emit(num, e.target.value), value: unit, children: units.map((u) => (_jsx("option", { value: u, children: u }, u))) })), hint ? (_jsxs("span", { className: "biab-field__measurement-hint", children: ["\u2248 ", hint] })) : null] }));
+        }
+        default:
+            return (_jsx("input", { autoComplete: autoComplete, className: "biab-input biab-field__input", onChange: (e) => set(e.target.value), placeholder: ph, value: typeof value === "string" ? value : "" }));
+    }
+}
+const NO_LABEL_TYPES = new Set([
+    "title",
+    "subtitle",
+    "separator",
+    "richtext",
+    "body_text",
+    "bullet_list",
+    "table",
+]);
+function BiabFieldRow({ field, value, error, setValue, upload, }) {
+    const showLabel = !NO_LABEL_TYPES.has(field.type);
+    return (_jsxs("div", { className: cx("biab-field", `biab-field--${field.type}`, field.required && "biab-field--required", error && "biab-field--error"), "data-biab-field": fieldCssKey(field), "data-biab-type": field.type, "data-field-id": field.id, children: [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
+            // `htmlFor` at, so a <label> here would be an orphan.
+            _jsxs("span", { className: "biab-field__label biab-label", children: [field.label || "", field.required && _jsx("span", { className: "biab-field__required", children: "*" })] })), _jsx(BiabFieldInput, { field: field, setValue: setValue, upload: upload, value: value }), error && _jsx("p", { className: "biab-field__error", children: error.message }), field.helpText && _jsx("p", { className: "biab-field__help", children: field.helpText })] }));
+}
+/** Recursively render a field subtree, mirroring FormPreview's `RenderTree`:
+ *  input_group (+ concurrent reveal), condition_block, or_condition, flex_row. */
+function BiabRenderTree({ fields, values, errors, setValue, upload, flat, }) {
+    return (_jsx("div", { className: "biab-tree", children: fields.map((f) => {
+            if (f.type === "multi_populator") {
+                const cfg = f.populatorConfig ?? {};
+                const max = cfg.maxInstances ?? 10;
+                const children = (f.children ?? []);
+                const raw = values[f.id];
+                const instances = Array.isArray(raw) && raw.length > 0
+                    ? raw
+                    : [{}];
+                const writeInstances = (next) => setValue(f.id, next);
+                return (_jsxs("div", { className: "biab-populator", "data-biab-field": fieldCssKey(f), "data-field-id": f.id, children: [instances.map((inst, idx) => {
+                            const scopedSetValue = (childId, v) => {
+                                const nextArr = instances.map((x) => ({ ...x }));
+                                nextArr[idx] = { ...nextArr[idx], [childId]: v };
+                                writeInstances(nextArr);
+                            };
+                            return (_jsxs("div", { className: "biab-populator__item", children: [_jsxs("div", { className: "biab-populator__item-head", children: [_jsxs("span", { className: "biab-populator__item-label", children: [cfg.itemLabel || f.label || "Entry", " ", idx + 1] }), instances.length > 1 && (_jsx("button", { "aria-label": "Remove entry", className: "biab-populator__remove", onClick: () => writeInstances(instances.filter((_, i) => i !== idx)), type: "button", children: "\u00D7" }))] }), _jsx(BiabRenderTree, { errors: errors, fields: children, setValue: scopedSetValue, upload: upload, values: inst })] }, `${f.id}-inst-${idx}`));
+                        }), instances.length < max && (_jsxs("button", { className: "biab-populator__add", onClick: () => writeInstances([...instances, {}]), type: "button", children: ["+ ", cfg.addButtonLabel || "Add another"] }))] }, f.id));
+            }
+            if (f.type === "input_group") {
+                const children = (f.children ?? []);
+                const concurrent = f.concurrentReveal === true;
+                const showGroupLabel = f.showGroupLabel === true;
+                const revealCount = concurrent
+                    ? concurrentRevealCount(children, values)
+                    : children.length;
+                const shown = concurrent ? children.slice(0, revealCount) : children;
+                return (_jsxs("div", { className: cx("biab-group", flat && "biab-group--flat"), "data-biab-group": fieldCssKey(f), children: [f.label && showGroupLabel && (_jsx("div", { className: "biab-group__label", children: f.label })), _jsx(BiabRenderTree, { errors: errors, fields: shown, setValue: setValue, upload: upload, values: values })] }, f.id));
+            }
+            if (f.type === "condition_block") {
+                if (!evalCondition(f.conditionRule, values))
+                    return null;
+                return (_jsx(BiabRenderTree, { errors: errors, fields: (f.children ?? []), setValue: setValue, upload: upload, values: values }, f.id));
+            }
+            if (f.type === "or_condition") {
+                const branches = f.children ?? [];
+                const errored = Boolean(errors[f.id]);
+                const branchLabel = (i) => (i === 0 && f.orConditionConfig?.leftLabel) ||
+                    (i === 1 && f.orConditionConfig?.rightLabel) ||
+                    branches[i]?.label ||
+                    ["Option A", "Option B", "Option C"][i] ||
+                    `Option ${i + 1}`;
+                return (_jsxs("div", { className: cx("biab-or", errored && "biab-or--error"), children: [f.label && (_jsxs("div", { className: "biab-or__label", children: [f.label, _jsx("span", { className: "biab-or__hint", children: "Fill at least one side" })] })), _jsx("div", { className: "biab-or__sides", children: branches.flatMap((child, i) => {
+                                const side = (_jsxs("div", { className: "biab-or__side", children: [_jsx("div", { className: "biab-or__sidelabel", children: branchLabel(i) }), _jsx(BiabRenderTree, { errors: errors, fields: [child], setValue: setValue, upload: upload, values: values })] }, child.id));
+                                if (i === 0)
+                                    return [side];
+                                return [
+                                    _jsx("div", { className: "biab-or__divider", children: "OR" }, `or-${child.id}`),
+                                    side,
+                                ];
+                            }) }), errored && (_jsx("p", { className: "biab-field__error", children: "Fill in at least one side to continue." }))] }, f.id));
+            }
+            if (f.type === "flex_row") {
+                const cfg = (f["flexConfig"] ?? {});
+                return (_jsx("div", { className: "biab-flexrow", style: {
+                        display: "flex",
+                        justifyContent: cfg.justify === "center"
+                            ? "center"
+                            : cfg.justify === "end"
+                                ? "flex-end"
+                                : cfg.justify === "between"
+                                    ? "space-between"
+                                    : cfg.justify === "around"
+                                        ? "space-around"
+                                        : "flex-start",
+                        alignItems: cfg.align === "start"
+                            ? "flex-start"
+                            : cfg.align === "end"
+                                ? "flex-end"
+                                : "center",
+                        gap: `${cfg.gap ?? 12}px`,
+                        flexWrap: "wrap",
+                    }, children: (f.children ?? []).map((child) => (_jsx("div", { className: "biab-flexrow__cell", children: _jsx(BiabRenderTree, { errors: errors, fields: [child], setValue: setValue, upload: upload, values: values }) }, child.id))) }, f.id));
+            }
+            return (_jsx(BiabFieldRow, { error: errors[f.id], field: f, setValue: setValue, upload: upload, value: values[f.id] }, f.id));
+        }) }));
+}
+export function BiabForm(props) {
+    const providerClient = useBiabFormsClient();
+    // A publishable token (`pk_…`) builds a browser client that calls BIAB
+    // directly — the zero-backend path. Explicit `client` still wins, then the
+    // token client, then a surrounding provider.
+    const tokenClient = useMemo(() => props.token && props.siteId
+        ? createBiabClient({
+            apiKey: props.token,
+            siteId: props.siteId,
+            baseUrl: props.baseUrl ?? DEFAULT_PACKAGE_BASE_URL,
+        })
+        : null, [props.token, props.siteId, props.baseUrl]);
+    const client = props.client ?? tokenClient ?? providerClient ?? undefined;
+    const submitLabel = props.submitLabel ?? "Submit";
+    // Latest callbacks without re-creating the controller on every render.
+    const cbRef = useRef({
+        onSuccess: props.onSuccess,
+        onError: props.onError,
+        onSubmit: props.onSubmit,
+    });
+    cbRef.current = {
+        onSuccess: props.onSuccess,
+        onError: props.onError,
+        onSubmit: props.onSubmit,
+    };
+    // Serialize submitOptions so a fresh-but-equal object literal (the common
+    // consumer case) doesn't recreate the controller and re-fetch every render.
+    const submitOptionsKey = JSON.stringify(props.submitOptions ?? {});
+    // One controller per (client, slug, schema, submit config). The controller is
+    // the single source of truth; React only renders its snapshots. `submitOptions`
+    // is keyed by its serialized value (`submitOptionsKey`); the spread reads the
+    // live object, so the object identity itself is intentionally not a dep.
+    // biome-ignore lint/correctness/useExhaustiveDependencies: keyed by submitOptionsKey
+    const controller = useMemo(() => createFormController({
+        ...(client ? { client } : {}),
+        ...(props.slug ? { slug: props.slug } : {}),
+        ...(props.schema ? { schema: props.schema } : {}),
+        submitOptions: {
+            ...props.submitOptions,
+            ...(props.dryRun ? { dryRun: true } : {}),
+        },
+        onSuccess: (r) => cbRef.current.onSuccess?.(r),
+        onError: (r) => cbRef.current.onError?.(r),
+    }), [client, props.slug, props.schema, props.dryRun, submitOptionsKey]);
+    useEffect(() => {
+        void controller.load();
+        return () => controller.destroy();
+    }, [controller]);
+    const snap = useFormSnapshot(controller);
+    const upload = useMemo(() => {
+        if (!client?.forms.uploadFile)
+            return undefined;
+        return (fieldId, file) => controller.uploadFile(fieldId, file);
+    }, [client, controller]);
+    // Auto-`schedule` slot fetcher, derived from the client + slug and provided
+    // via context so the deep field renderer needn't thread it.
+    const fetchScheduleSlots = useMemo(() => {
+        const slug = props.slug;
+        const fn = client?.forms.scheduleSlots;
+        if (!fn || !slug)
+            return undefined;
+        return (input) => fn(slug, input).then((r) => r.slots);
+    }, [client, props.slug]);
+    // 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);
+    const autocompleteConfig = useMemo(
+    // biome-ignore lint/correctness/useExhaustiveDependencies: keyed by fieldAutoCompleteKey
+    () => ({
+        ...(props.autoComplete !== undefined
+            ? { enabled: props.autoComplete }
+            : {}),
+        ...(props.fieldAutoComplete
+            ? { overrides: props.fieldAutoComplete }
+            : {}),
+    }), [props.autoComplete, fieldAutoCompleteKey]);
+    // Exit-confirm guard: warn before leaving a dirty, unsubmitted form when the
+    // org enabled it. Browsers show a generic native prompt; the configured
+    // message is also on `snap.settings.exitConfirm.message` for a custom modal.
+    const exitConfirm = snap.settings?.exitConfirm;
+    const exitDirty = Object.values(snap.values).some((v) => Array.isArray(v) ? v.length > 0 : v != null && v !== "" && v !== false);
+    useEffect(() => {
+        if (!exitConfirm?.enabled ||
+            snap.submitted ||
+            !exitDirty ||
+            typeof window === "undefined") {
+            return;
+        }
+        const onBeforeUnload = (e) => {
+            e.preventDefault();
+            e.returnValue = exitConfirm.message || "";
+        };
+        window.addEventListener("beforeunload", onBeforeUnload);
+        return () => window.removeEventListener("beforeunload", onBeforeUnload);
+    }, [exitConfirm?.enabled, exitConfirm?.message, snap.submitted, exitDirty]);
+    const rootClass = cx("biab-form", props.className, props.class);
+    if (snap.status === "loading" || snap.status === "idle") {
+        return (_jsx("div", { className: rootClass, style: props.style, children: props.loadingFallback ?? (_jsx("div", { className: "biab-form__loading", children: "Loading\u2026" })) }));
+    }
+    if (snap.status === "error") {
+        const message = snap.loadError ?? "Failed to load the form.";
+        return (_jsx("div", { className: rootClass, style: props.style, children: props.errorFallback ? (props.errorFallback(message)) : (_jsx("div", { className: "biab-form__error", children: message })) }));
+    }
+    if (snap.submitted && snap.result?.ok) {
+        const ok = snap.result;
+        return (_jsx("div", { className: rootClass, style: props.style, children: props.successFallback ? (props.successFallback(ok)) : (_jsx("div", { className: "biab-form__success", children: "Thanks \u2014 your response was received." })) }));
+    }
+    const { settings } = snap;
+    const consecutive = settings.isConsecutive && snap.stepCount > 1;
+    const animClass = settings.animation === "fade"
+        ? "biab-anim--fade"
+        : settings.animation === "scale"
+            ? "biab-anim--scale"
+            : settings.animation === "slide"
+                ? snap.forward
+                    ? "biab-anim--slide-fwd"
+                    : "biab-anim--slide-back"
+                : settings.animation === "scroll"
+                    ? "biab-anim--scroll"
+                    : "";
+    const handleSubmit = async () => {
+        const res = await controller.submit();
+        if (res.ok) {
+            cbRef.current.onSubmit?.(snap.values);
+            return;
+        }
+        // Fix-it wizard: route to the first errored field's step (consecutive) and
+        // scroll it into view, so cross-step / file-upload errors are never hidden.
+        const firstId = res.issues?.[0]?.fieldId ?? snap.errorList[0]?.id;
+        if (!firstId)
+            return;
+        let delay = 60;
+        if (consecutive) {
+            const si = snap.steps.findIndex((s) => flattenValueFields(s).some((f) => f.id === firstId));
+            if (si >= 0 && si !== snap.step) {
+                controller.goToStep(si);
+                delay = 200; // let the destination step mount before scrolling
+            }
+        }
+        if (typeof document !== "undefined") {
+            setTimeout(() => {
+                const el = document.querySelector(`[data-field-id="${firstId}"]`);
+                el?.scrollIntoView({ behavior: "smooth", block: "center" });
+            }, delay);
+        }
+    };
+    return (_jsx(FetchScheduleSlotsContext.Provider, { value: fetchScheduleSlots, children: _jsx(AutocompleteContext.Provider, { value: autocompleteConfig, children: _jsxs("div", { className: rootClass, style: props.style, children: [snap.orgIcon && (_jsx("img", { alt: "", className: "biab-form__orgicon", src: snap.orgIcon })), (snap.title || snap.description) && (_jsxs("div", { className: "biab-form__head", children: [snap.title && _jsx("h2", { className: "biab-form__title", children: snap.title }), snap.description && (_jsx("p", { className: "biab-form__desc", children: snap.description }))] })), consecutive &&
+                        settings.showProgress &&
+                        settings.progressStyle !== "bar" && (_jsx("div", { className: "biab-progress biab-progress--steps", children: snap.steps.map((s, i) => {
+                            const f = s[0];
+                            const title = f?.stepTitle || f?.label || `Step ${i + 1}`;
+                            const done = i < snap.step;
+                            const current = i === snap.step;
+                            return (_jsxs(Fragment, { children: [i > 0 && (_jsx("span", { className: cx("biab-progress__line", i <= snap.step && "biab-progress__line--done") })), _jsxs("button", { className: cx("biab-progress__step", current && "biab-progress__step--current", done && "biab-progress__step--done"), onClick: () => controller.goToStep(i), type: "button", children: [_jsx("span", { className: "biab-progress__num", children: done ? "✓" : i + 1 }), _jsx("span", { className: "biab-progress__title", children: title })] })] }, `step-${i}`));
+                        }) })), consecutive &&
+                        settings.showProgress &&
+                        settings.progressStyle === "bar" && (_jsxs("div", { className: "biab-progress biab-progress--bar", children: [_jsxs("span", { className: "biab-progress__count", children: [snap.step + 1, " / ", snap.stepCount] }), _jsx("div", { className: "biab-progress__track", children: _jsx("div", { className: "biab-progress__fill", style: { width: `${snap.progressPercent}%` } }) })] })), snap.errorList.length > 0 && (_jsxs("div", { className: "biab-form__notice", role: "alert", children: [_jsxs("div", { className: "biab-form__notice-title", children: ["Please complete the highlighted field", snap.errorList.length === 1 ? "" : "s", "."] }), _jsx("div", { className: "biab-form__notice-list", children: snap.errorList.map((e) => e.label).join(", ") })] })), _jsx("div", { className: cx("biab-form__body", animClass), children: _jsx(BiabRenderTree, { errors: snap.errors, fields: snap.visibleFields, flat: consecutive, setValue: (id, v) => controller.setValue(id, v), upload: upload, values: snap.values }) }, `biab-step-${snap.step}`), (!consecutive || snap.isLastStep) &&
+                        (snap.schema?.actions ?? [])
+                            .filter((a) => a.type === "grant_coupon" &&
+                            (a.coupon?.notice || a.coupon?.code))
+                            .map((a, i) => {
+                            const code = a.coupon?.code ?? "";
+                            const text = a.coupon?.notice
+                                ? a.coupon.notice.replace(/\{code\}/g, code)
+                                : `Coupon ${code} will be applied to this submission.`;
+                            return (_jsxs("div", { className: "biab-coupon-notice", children: [_jsx("p", { className: "biab-coupon-notice__text", children: text }), a.coupon?.finePrint && (_jsx("p", { className: "biab-coupon-notice__fine", children: a.coupon.finePrint }))] }, `coupon-${i}`));
+                        }), consecutive ? (_jsxs("div", { className: "biab-nav", children: [_jsx("button", { className: "biab-btn biab-btn--back biab-btn--ghost", disabled: snap.isFirstStep, onClick: () => controller.back(), type: "button", children: "Back" }), !snap.isLastStep ? (_jsx("button", { className: "biab-btn biab-btn--next", disabled: !snap.canAdvance, onClick: () => controller.next(), type: "button", children: "Next" })) : (_jsx("button", { className: "biab-btn biab-btn--submit", disabled: snap.submitting || snap.uploading, onClick: () => void handleSubmit(), type: "button", children: snap.submitting ? "Sending…" : submitLabel }))] })) : (_jsx("div", { className: "biab-nav", children: _jsx("button", { className: "biab-btn biab-btn--submit", disabled: snap.submitting || snap.uploading, onClick: () => void handleSubmit(), type: "button", children: snap.submitting ? "Sending…" : submitLabel }) })), snap.result && !snap.result.ok && snap.errorList.length === 0 && (_jsx("div", { className: "biab-form__error", role: "alert", children: snap.result.message }))] }) }) }));
+}
+function SocialGlyph({ iconSlug, color, size, className, label, }) {
+    if (iconSlug) {
+        const src = color
+            ? `https://cdn.simpleicons.org/${iconSlug}/${encodeURIComponent(color)}`
+            : `https://cdn.simpleicons.org/${iconSlug}`;
+        return (
+        // biome-ignore lint: remote brand icon from the simple-icons CDN
+        _jsx("img", { alt: label, className: className, height: size, loading: "lazy", src: src, width: size }));
+    }
+    return (_jsxs("svg", { "aria-hidden": true, className: className, fill: "none", height: size, stroke: "currentColor", strokeWidth: 1.8, viewBox: "0 0 24 24", width: size, children: [_jsx("title", { children: label }), _jsx("circle", { cx: "12", cy: "12", r: "9" }), _jsx("path", { d: "M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18" })] }));
+}
+/**
+ * Render every social profile on the company as an icon + link, in canonical
+ * order, resolving BIAB'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.
+ */
+export function SocialLinks({ socials, color, size = 20, className, linkClassName, iconClassName, }) {
+    const rows = resolveSocialProfiles(socials);
+    if (rows.length === 0)
+        return null;
+    return (_jsx("ul", { className: className, style: {
+            display: "flex",
+            flexWrap: "wrap",
+            alignItems: "center",
+            gap: "0.75rem",
+            listStyle: "none",
+            margin: 0,
+            padding: 0,
+        }, children: rows.map((row) => (_jsx("li", { children: _jsx("a", { "aria-label": row.label, className: linkClassName, href: row.url, rel: "noopener noreferrer", target: "_blank", title: row.label, children: _jsx(SocialGlyph, { className: iconClassName, color: color, iconSlug: row.iconSlug, label: row.label, size: size }) }) }, row.key))) }));
+}
+//# sourceMappingURL=react.js.map