@elvix.is/sdk 0.5.4 → 0.5.6

package/dist/react.js

@@ -1,12 +1,32 @@
 "use client";
+// src/react/size.ts
+function sizeStyle(p) {
+  const s = {};
+  if (p.width !== void 0) s.width = p.width;
+  if (p.height !== void 0) s.height = p.height;
+  if (p.minWidth !== void 0) s.minWidth = p.minWidth;
+  if (p.maxWidth !== void 0) s.maxWidth = p.maxWidth;
+  if (p.minHeight !== void 0) s.minHeight = p.minHeight;
+  if (p.maxHeight !== void 0) s.maxHeight = p.maxHeight;
+  return s;
+}
+
 // src/react/elvix-card.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 function ElvixCard({
   title,
   footer,
   className = "",
-  children
+  style,
+  children,
+  width,
+  height,
+  minWidth,
+  maxWidth,
+  minHeight,
+  maxHeight
 }) {
+  const sized = sizeStyle({ width, height, minWidth, maxWidth, minHeight, maxHeight });
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -19,7 +39,9 @@ function ElvixCard({
         display: "flex",
         flexDirection: "column",
         maxWidth: "440px",
-        width: "100%"
+        width: "100%",
+        ...style,
+        ...sized
       },
       children: [
         title && /* @__PURE__ */ jsx(
@@ -182,6 +204,7 @@ import { useState as useState2 } from "react";
 var DEFAULT_COPY = {
   subtitle: "Pick how you want to continue.",
   googleButton: "Continue with Google",
+  passkeyButton: "Continue with passkey",
   emailPlaceholder: "you@example.com",
   sendCodeButton: "Send code",
   sendingLabel: "Sending\u2026",
@@ -250,14 +273,112 @@ function isSameOrigin(baseUrl) {
   }
 }
 
+// src/react/passkey.ts
+function b64urlToBuf(b64url) {
+  const b64 = b64url.replace(/-/g, "+").replace(/_/g, "/");
+  const pad = b64.length % 4 === 0 ? "" : "=".repeat(4 - b64.length % 4);
+  const bin = atob(b64 + pad);
+  const bytes = new Uint8Array(bin.length);
+  for (let i = 0; i < bin.length; i++) bytes[i] = bin.charCodeAt(i);
+  return bytes.buffer;
+}
+function bufToB64url(buf) {
+  const bytes = new Uint8Array(buf);
+  let bin = "";
+  for (let i = 0; i < bytes.length; i++) bin += String.fromCharCode(bytes[i]);
+  return btoa(bin).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
+}
+async function runPasskeySignIn(baseUrl, clientId) {
+  if (!clientId) return { ok: false, error: "missing_client_id", message: "ElvixProvider needs a clientId." };
+  if (typeof window === "undefined" || !window.PublicKeyCredential || !navigator.credentials?.get) {
+    return { ok: false, error: "passkey_unsupported", message: "This browser can't use passkeys." };
+  }
+  const credentials = isSameOrigin(baseUrl) ? "include" : "omit";
+  let options;
+  try {
+    const res = await fetch(`${baseUrl}/api/auth/passkey/sign-in/start`, {
+      method: "POST",
+      headers: { "content-type": "application/json" },
+      credentials,
+      body: JSON.stringify({ intent: "app", clientId })
+    });
+    const body = await res.json();
+    if (!res.ok || !body.success || !body.data?.options) {
+      return { ok: false, error: body.errorMessage ?? "passkey_start_failed" };
+    }
+    options = body.data.options;
+  } catch (e) {
+    return { ok: false, error: "network", message: e instanceof Error ? e.message : void 0 };
+  }
+  let assertion;
+  try {
+    const publicKey = {
+      challenge: b64urlToBuf(options.challenge),
+      timeout: options.timeout,
+      rpId: options.rpId,
+      userVerification: options.userVerification,
+      allowCredentials: options.allowCredentials?.map((c) => ({
+        id: b64urlToBuf(c.id),
+        type: c.type,
+        transports: c.transports
+      }))
+    };
+    const cred = await navigator.credentials.get({ publicKey });
+    if (!cred) return { ok: false, error: "passkey_cancelled" };
+    const resp = cred.response;
+    assertion = {
+      id: cred.id,
+      rawId: bufToB64url(cred.rawId),
+      type: "public-key",
+      clientExtensionResults: cred.getClientExtensionResults(),
+      authenticatorAttachment: cred.authenticatorAttachment ?? void 0,
+      response: {
+        clientDataJSON: bufToB64url(resp.clientDataJSON),
+        authenticatorData: bufToB64url(resp.authenticatorData),
+        signature: bufToB64url(resp.signature),
+        userHandle: resp.userHandle ? bufToB64url(resp.userHandle) : void 0
+      }
+    };
+  } catch (e) {
+    const name = e?.name;
+    if (name === "NotAllowedError" || name === "AbortError") {
+      return { ok: false, error: "passkey_cancelled" };
+    }
+    return { ok: false, error: "passkey_failed", message: e instanceof Error ? e.message : void 0 };
+  }
+  try {
+    const res = await fetch(`${baseUrl}/api/auth/passkey/sign-in/finish`, {
+      method: "POST",
+      headers: { "content-type": "application/json" },
+      credentials,
+      body: JSON.stringify({ intent: "app", clientId, ...assertion })
+    });
+    const body = await res.json();
+    if (!res.ok || !body.success) {
+      return { ok: false, error: body.errorMessage ?? "passkey_verify_failed" };
+    }
+    if (body.data?.token) setElvixToken(body.data.token);
+    return { ok: true, redirect: body.data?.redirect, token: body.data?.token };
+  } catch (e) {
+    return { ok: false, error: "network", message: e instanceof Error ? e.message : void 0 };
+  }
+}
+
 // src/react/elvix-sign-in.tsx
 import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 function ElvixSignIn({
   onResult,
   redirectAfterSignIn,
   copy: copyProp,
-  className = ""
+  className = "",
+  width,
+  height,
+  minWidth,
+  maxWidth,
+  minHeight,
+  maxHeight
 }) {
+  const sized = sizeStyle({ width, height, minWidth, maxWidth, minHeight, maxHeight });
   const ctx = useElvixContext();
   const app = useElvixApp();
   const copy = resolveCopy(app?.strings, copyProp);
@@ -281,6 +402,29 @@ function ElvixSignIn({
       `${ctx.baseUrl}/api/auth/google/start?intent=app&clientId=${encodeURIComponent(ctx.clientId)}`
     );
   }
+  async function startPasskey() {
+    setBusy(true);
+    setError(null);
+    try {
+      const result = await runPasskeySignIn(ctx.baseUrl, ctx.clientId);
+      if (!result.ok) {
+        if (result.error === "passkey_cancelled") {
+          onResult?.({ ok: false, error: result.error });
+          return;
+        }
+        return fail(result.error, result.message);
+      }
+      setStep("done");
+      onResult?.({
+        ok: true,
+        method: "passkey",
+        redirect: result.redirect ?? redirectAfterSignIn,
+        token: result.token
+      });
+    } finally {
+      setBusy(false);
+    }
+  }
   async function startOtp(e) {
     e.preventDefault();
     if (!email.trim()) return fail("invalid_input", copy.errorEnterEmail);
@@ -342,9 +486,9 @@ function ElvixSignIn({
   }
   const card = `elvix-card ${className}`.trim();
   if (step === "done") {
-    return /* @__PURE__ */ jsx3("div", { className: card, "data-elvix-pane": "done", children: /* @__PURE__ */ jsx3("p", { children: copy.signedInText }) });
+    return /* @__PURE__ */ jsx3("div", { className: card, style: sized, "data-elvix-pane": "done", children: /* @__PURE__ */ jsx3("p", { children: copy.signedInText }) });
   }
-  return /* @__PURE__ */ jsxs2("div", { className: card, "data-elvix-pane": step, children: [
+  return /* @__PURE__ */ jsxs2("div", { className: card, style: sized, "data-elvix-pane": step, children: [
     /* @__PURE__ */ jsx3("h2", { className: "elvix-h", children: title }),
     copy.subtitle && /* @__PURE__ */ jsx3("p", { className: "elvix-muted elvix-subtitle", children: copy.subtitle }),
     step === "identify" && /* @__PURE__ */ jsxs2(Fragment, { children: [
@@ -359,6 +503,17 @@ function ElvixSignIn({
           children: copy.googleButton
         }
       ),
+      app?.methodPasskey && /* @__PURE__ */ jsx3(
+        "button",
+        {
+          type: "button",
+          onClick: startPasskey,
+          disabled: busy,
+          className: "elvix-btn elvix-btn-passkey",
+          "data-elvix-method": "passkey",
+          children: copy.passkeyButton
+        }
+      ),
       app?.methodEmailOtp && /* @__PURE__ */ jsxs2("form", { onSubmit: startOtp, "data-elvix-method": "email_otp", className: "elvix-otp-form", children: [
         /* @__PURE__ */ jsx3(
           "input",
@@ -394,36 +549,557 @@ function ElvixSignIn({
       ),
       /* @__PURE__ */ jsx3("button", { type: "submit", disabled: busy, className: "elvix-btn elvix-btn-primary", children: busy ? copy.verifyingLabel : submitLabel })
     ] }),
-    error && /* @__PURE__ */ jsx3("p", { role: "alert", className: "elvix-error", children: error })
+    error && /* @__PURE__ */ jsx3("p", { role: "alert", className: "elvix-error", children: error })
+  ] });
+}
+
+// src/react/elvix-sign-in-form.tsx
+import { useMemo as useMemo2, useState as useState3 } from "react";
+
+// src/react/elvix-shield.tsx
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function ElvixShield({
+  size,
+  fill,
+  accent
+}) {
+  return /* @__PURE__ */ jsxs3("svg", { width: size, height: size, viewBox: "2 2 20 20", "aria-hidden": true, style: { display: "block" }, children: [
+    /* @__PURE__ */ jsx4(
+      "path",
+      {
+        fill,
+        fillRule: "evenodd",
+        d: "M 6 2.5 C 4.34 2.5 3 3.84 3 5.5 L 3 12.5 C 3 17.5 7 20.7 12 22 C 17 20.7 21 17.5 21 12.5 L 21 5.5 C 21 3.84 19.66 2.5 18 2.5 L 6 2.5 Z M 12 8.4 C 9.79 8.4 8 10.19 8 12.4 C 8 14.61 9.79 16.4 12 16.4 C 13.21 16.4 14.3 15.86 15.04 15 L 13.6 13.77 C 13.21 14.23 12.64 14.5 12 14.5 C 11.04 14.5 10.21 13.86 9.91 13 L 15.95 13 C 15.98 12.8 16 12.6 16 12.4 C 16 10.19 14.21 8.4 12 8.4 Z M 9.91 11.8 L 14.09 11.8 C 13.79 10.94 12.96 10.3 12 10.3 C 11.04 10.3 10.21 10.94 9.91 11.8 Z"
+      }
+    ),
+    /* @__PURE__ */ jsx4("circle", { cx: "19.5", cy: "4.5", r: "2.4", fill: accent })
+  ] });
+}
+
+// src/react/elvix-secured-badge.tsx
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var ELVIX_URL = "https://elvix.is";
+var SIZE = {
+  sm: { height: 28, padX: 10, font: 11.5, icon: 14, gap: 6 },
+  md: { height: 32, padX: 12, font: 12.5, icon: 16, gap: 7 },
+  lg: { height: 36, padX: 14, font: 13, icon: 18, gap: 8 }
+};
+var TONE = {
+  white: {
+    light: { bg: "#ffffff", border: "#e4e4e7", lead: "#71717a", brand: "#0a0a0b", shield: "#0a0a0b" },
+    dark: { bg: "#ffffff", border: "transparent", lead: "#71717a", brand: "#0a0a0b", shield: "#0a0a0b" }
+  },
+  dark: {
+    light: { bg: "#0a0a0b", border: "rgba(0,0,0,0.1)", lead: "#d4d4d8", brand: "#ffffff", shield: "#ffffff" },
+    dark: { bg: "#0a0a0b", border: "rgba(255,255,255,0.1)", lead: "#d4d4d8", brand: "#ffffff", shield: "#ffffff" }
+  },
+  outline: {
+    light: { bg: "transparent", border: "rgba(0,0,0,0.15)", lead: "#71717a", brand: "#0a0a0b", shield: "#0a0a0b" },
+    dark: { bg: "transparent", border: "rgba(142,125,255,0.4)", lead: "#d4d4d8", brand: "#ffffff", shield: "#ffffff" }
+  }
+};
+function ElvixSecuredBadge({
+  variant = "white",
+  size = "md",
+  theme = "dark",
+  accentColor = "#8e7dff",
+  href = ELVIX_URL,
+  className = "",
+  width,
+  height,
+  minWidth,
+  maxWidth,
+  minHeight,
+  maxHeight
+}) {
+  const s = SIZE[size];
+  const t = TONE[variant][theme];
+  const style = {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: s.gap,
+    height: s.height,
+    paddingLeft: s.padX,
+    paddingRight: s.padX,
+    fontSize: s.font,
+    fontWeight: 500,
+    borderRadius: 9999,
+    background: t.bg,
+    border: `1px solid ${t.border}`,
+    color: t.brand,
+    textDecoration: "none",
+    userSelect: "none",
+    lineHeight: 1,
+    // Dimensional overrides win over the size preset above.
+    ...sizeStyle({ width, height, minWidth, maxWidth, minHeight, maxHeight })
+  };
+  return /* @__PURE__ */ jsxs4(
+    "a",
+    {
+      href,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      className,
+      style,
+      "data-elvix-secured-badge": "",
+      children: [
+        /* @__PURE__ */ jsx5(ElvixShield, { size: s.icon, fill: t.shield, accent: accentColor }),
+        /* @__PURE__ */ jsxs4("span", { style: { display: "inline-flex", alignItems: "baseline", gap: 4 }, children: [
+          /* @__PURE__ */ jsx5("span", { style: { color: t.lead }, children: "Secured by" }),
+          /* @__PURE__ */ jsx5("span", { style: { color: t.brand, fontWeight: 600 }, children: "elvix" })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/react/elvix-sign-in-form.tsx
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+function PasskeyIcon({ size = 18 }) {
+  return /* @__PURE__ */ jsxs5(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 1.8,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": true,
+      style: { display: "block" },
+      children: [
+        /* @__PURE__ */ jsx6("circle", { cx: "9", cy: "8", r: "4" }),
+        /* @__PURE__ */ jsx6("path", { d: "M4 20c0-3 2.5-5 5-5 1 0 1.9.3 2.7.8" }),
+        /* @__PURE__ */ jsx6("path", { d: "M17 12.5a2.5 2.5 0 1 0-2.5 2.5v5l1.2-1.2 1.3 1.2v-5a2.5 2.5 0 0 0 0-2.5Z" })
+      ]
+    }
+  );
+}
+function GoogleG({ size = 18 }) {
+  return /* @__PURE__ */ jsxs5("svg", { width: size, height: size, viewBox: "0 0 18 18", "aria-hidden": true, style: { display: "block" }, children: [
+    /* @__PURE__ */ jsx6(
+      "path",
+      {
+        fill: "#4285F4",
+        d: "M17.64 9.2c0-.64-.06-1.25-.16-1.84H9v3.48h4.84a4.14 4.14 0 0 1-1.8 2.72v2.26h2.92c1.7-1.57 2.68-3.88 2.68-6.62Z"
+      }
+    ),
+    /* @__PURE__ */ jsx6(
+      "path",
+      {
+        fill: "#34A853",
+        d: "M9 18c2.43 0 4.47-.8 5.96-2.18l-2.92-2.26c-.8.54-1.84.86-3.04.86-2.34 0-4.32-1.58-5.03-3.7H.96v2.33A9 9 0 0 0 9 18Z"
+      }
+    ),
+    /* @__PURE__ */ jsx6(
+      "path",
+      {
+        fill: "#FBBC05",
+        d: "M3.97 10.72A5.4 5.4 0 0 1 3.68 9c0-.6.1-1.18.29-1.72V4.95H.96A9 9 0 0 0 0 9c0 1.45.35 2.83.96 4.05l3.01-2.33Z"
+      }
+    ),
+    /* @__PURE__ */ jsx6(
+      "path",
+      {
+        fill: "#EA4335",
+        d: "M9 3.58c1.32 0 2.5.45 3.44 1.35l2.58-2.59C13.46.89 11.43 0 9 0A9 9 0 0 0 .96 4.95l3.01 2.33C4.68 5.16 6.66 3.58 9 3.58Z"
+      }
+    )
+  ] });
+}
+function ElvixSignInForm({
+  onResult,
+  redirectAfterSignIn,
+  copy: copyProp,
+  className = "",
+  minWidth,
+  maxWidth,
+  minHeight,
+  maxHeight,
+  width,
+  height
+}) {
+  const ctx = useElvixContext();
+  const app = useElvixApp();
+  const copy = resolveCopy(app?.strings, copyProp);
+  const [step, setStep] = useState3("identify");
+  const [email, setEmail] = useState3("");
+  const [code, setCode] = useState3("");
+  const [challengeId, setChallengeId] = useState3(null);
+  const [busy, setBusy] = useState3(false);
+  const [error, setError] = useState3(null);
+  const brand = app?.brandColor || "#6c5ce7";
+  const onBrand = app?.onBrandColor || "#fff";
+  const appName = app?.appName ?? "your app";
+  const verb = app?.signInVerb === "login" ? "Log in" : "Sign in";
+  const defaultTitle = app?.appName ? `${verb} to ${app.appName}` : verb;
+  const title = copy.title ? fillCopy(copy.title, { app: app?.appName ?? "" }) : defaultTitle;
+  const submitLabel = copy.submitButton ?? verb;
+  const showGoogle = Boolean(app?.methodGoogle);
+  const showPasskey = Boolean(app?.methodPasskey);
+  const showEmail = Boolean(app?.methodEmailOtp);
+  const showDivider = (showGoogle || showPasskey) && showEmail;
+  const logoSrc = app?.iconUrl || app?.logoUrl || null;
+  const privacyUrl = app?.privacyPolicyUrl || null;
+  const termsUrl = app?.termsOfServiceUrl || null;
+  const hasLegal = Boolean(privacyUrl || termsUrl);
+  const cardStyle = useMemo2(
+    () => ({
+      boxSizing: "border-box",
+      // Defaults first; the shared sizeStyle() overrides only the keys the host set,
+      // so the form keeps its width "100%" / maxWidth 400 defaults when unsized.
+      width: "100%",
+      maxWidth: 400,
+      ...sizeStyle({ width, height, minWidth, maxWidth, minHeight, maxHeight }),
+      margin: "0 auto",
+      display: "flex",
+      flexDirection: "column",
+      gap: 18,
+      background: "#fff",
+      color: "#18181b",
+      border: "1px solid rgba(0,0,0,0.08)",
+      borderRadius: 16,
+      boxShadow: "0 1px 2px rgba(0,0,0,0.04), 0 12px 32px -12px rgba(0,0,0,0.18)",
+      padding: 28,
+      fontFamily: "ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif",
+      textAlign: "center"
+    }),
+    [width, maxWidth, minWidth, height, minHeight, maxHeight]
+  );
+  function fail(error2, message) {
+    setError(message ?? error2);
+    onResult?.({ ok: false, error: error2, message });
+  }
+  async function startGoogle() {
+    if (!ctx.clientId) return fail("missing_client_id", "ElvixProvider needs a clientId.");
+    window.location.assign(
+      `${ctx.baseUrl}/api/auth/google/start?intent=app&clientId=${encodeURIComponent(ctx.clientId)}`
+    );
+  }
+  async function startPasskey() {
+    setBusy(true);
+    setError(null);
+    try {
+      const result = await runPasskeySignIn(ctx.baseUrl, ctx.clientId);
+      if (!result.ok) {
+        if (result.error === "passkey_cancelled") {
+          onResult?.({ ok: false, error: result.error });
+          return;
+        }
+        return fail(result.error, result.message);
+      }
+      setStep("done");
+      onResult?.({
+        ok: true,
+        method: "passkey",
+        redirect: result.redirect ?? redirectAfterSignIn,
+        token: result.token
+      });
+    } finally {
+      setBusy(false);
+    }
+  }
+  async function startOtp(e) {
+    e.preventDefault();
+    if (!email.trim()) return fail("invalid_input", copy.errorEnterEmail);
+    setBusy(true);
+    setError(null);
+    try {
+      const res = await fetch(`${ctx.baseUrl}/api/auth/otp/start`, {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        credentials: isSameOrigin(ctx.baseUrl) ? "include" : "omit",
+        body: JSON.stringify({
+          email: email.trim(),
+          intent: "app",
+          clientId: ctx.clientId
+        })
+      });
+      const body = await res.json();
+      if (!res.ok || !body.success || !body.data?.challengeId) {
+        return fail(body.errorMessage ?? "otp_start_failed");
+      }
+      setChallengeId(body.data.challengeId);
+      setStep("code");
+    } catch (e2) {
+      fail("network", e2 instanceof Error ? e2.message : void 0);
+    } finally {
+      setBusy(false);
+    }
+  }
+  async function verifyOtp(e) {
+    e.preventDefault();
+    if (!challengeId) return;
+    if (code.trim().length !== 6) return fail("invalid_input", copy.errorEnterCode);
+    setBusy(true);
+    setError(null);
+    try {
+      const res = await fetch(`${ctx.baseUrl}/api/auth/otp/verify`, {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        credentials: isSameOrigin(ctx.baseUrl) ? "include" : "omit",
+        body: JSON.stringify({ challengeId, code: code.trim() })
+      });
+      const body = await res.json();
+      if (!res.ok || !body.success) {
+        return fail(body.errorMessage ?? "otp_verify_failed");
+      }
+      if (body.data?.token) setElvixToken(body.data.token);
+      setStep("done");
+      onResult?.({
+        ok: true,
+        method: "email_otp",
+        redirect: body.data?.redirect ?? redirectAfterSignIn,
+        token: body.data?.token
+      });
+    } catch (e2) {
+      fail("network", e2 instanceof Error ? e2.message : void 0);
+    } finally {
+      setBusy(false);
+    }
+  }
+  const labelStyle = {
+    display: "block",
+    textAlign: "left",
+    fontSize: 12.5,
+    fontWeight: 500,
+    color: "#52525b",
+    marginBottom: 6
+  };
+  const inputStyle = {
+    boxSizing: "border-box",
+    width: "100%",
+    height: 44,
+    padding: "0 14px",
+    borderRadius: 10,
+    border: "1px solid rgba(0,0,0,0.14)",
+    background: "#fff",
+    color: "#18181b",
+    fontSize: 14,
+    outline: "none"
+  };
+  const primaryBtnStyle = {
+    boxSizing: "border-box",
+    width: "100%",
+    height: 44,
+    marginTop: 10,
+    border: "1px solid rgba(0,0,0,0.08)",
+    borderRadius: 10,
+    background: brand,
+    color: onBrand,
+    fontSize: 14,
+    fontWeight: 600,
+    cursor: busy ? "not-allowed" : "pointer",
+    opacity: busy ? 0.65 : 1,
+    backgroundImage: "linear-gradient(to bottom, rgba(255,255,255,0.12), rgba(255,255,255,0) 40%)",
+    boxShadow: "0 1px 0 rgba(255,255,255,0.06) inset, 0 2px 3px -1px rgba(0,0,0,0.18), 0 0 0 1px rgba(25,28,33,0.06)"
+  };
+  const googleBtnStyle = {
+    boxSizing: "border-box",
+    width: "100%",
+    height: 44,
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 10,
+    border: "1px solid rgba(0,0,0,0.14)",
+    borderRadius: 10,
+    background: "#fff",
+    color: "#18181b",
+    fontSize: 14,
+    fontWeight: 500,
+    cursor: busy ? "not-allowed" : "pointer",
+    opacity: busy ? 0.65 : 1
+  };
+  const tileTint = hexToRgba(brand, 0.12);
+  const root = `${className}`.trim() || void 0;
+  return /* @__PURE__ */ jsxs5("div", { className: root, style: cardStyle, "data-elvix-pane": step, children: [
+    /* @__PURE__ */ jsxs5("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 12 }, children: [
+      /* @__PURE__ */ jsx6(
+        "div",
+        {
+          style: {
+            width: 52,
+            height: 52,
+            borderRadius: 14,
+            display: "grid",
+            placeItems: "center",
+            overflow: "hidden",
+            background: logoSrc ? "#fff" : tileTint,
+            border: "1px solid rgba(0,0,0,0.08)"
+          },
+          children: logoSrc ? (
+            // biome-ignore lint/a11y/useAltText: alt is set
+            /* @__PURE__ */ jsx6(
+              "img",
+              {
+                src: logoSrc,
+                alt: appName,
+                style: { width: "100%", height: "100%", objectFit: "cover" }
+              }
+            )
+          ) : /* @__PURE__ */ jsx6("span", { style: { fontSize: 22, fontWeight: 700, color: brand }, children: appName.charAt(0).toUpperCase() || "?" })
+        }
+      ),
+      /* @__PURE__ */ jsxs5("div", { children: [
+        /* @__PURE__ */ jsx6("h2", { style: { margin: 0, fontSize: 19, fontWeight: 600, letterSpacing: "-0.01em" }, children: step === "code" ? "Check your inbox" : title }),
+        step !== "done" && /* @__PURE__ */ jsx6("p", { style: { margin: "4px 0 0", fontSize: 13, color: "#71717a" }, children: step === "code" ? fillCopy(copy.codeSentSubtitle ?? "", { email }) : copy.subtitle })
+      ] })
+    ] }),
+    step === "done" && /* @__PURE__ */ jsx6("p", { style: { margin: 0, fontSize: 14, color: "#18181b" }, children: copy.signedInText }),
+    step === "identify" && /* @__PURE__ */ jsxs5("div", { style: { display: "flex", flexDirection: "column", gap: 14 }, children: [
+      showGoogle && /* @__PURE__ */ jsxs5(
+        "button",
+        {
+          type: "button",
+          onClick: startGoogle,
+          disabled: busy,
+          style: googleBtnStyle,
+          "data-elvix-method": "google",
+          children: [
+            /* @__PURE__ */ jsx6(GoogleG, {}),
+            /* @__PURE__ */ jsx6("span", { children: copy.googleButton })
+          ]
+        }
+      ),
+      showPasskey && /* @__PURE__ */ jsxs5(
+        "button",
+        {
+          type: "button",
+          onClick: startPasskey,
+          disabled: busy,
+          style: googleBtnStyle,
+          "data-elvix-method": "passkey",
+          children: [
+            /* @__PURE__ */ jsx6(PasskeyIcon, {}),
+            /* @__PURE__ */ jsx6("span", { children: copy.passkeyButton })
+          ]
+        }
+      ),
+      showDivider && /* @__PURE__ */ jsxs5(
+        "div",
+        {
+          "aria-hidden": true,
+          style: { display: "flex", alignItems: "center", gap: 12, color: "#a1a1aa" },
+          children: [
+            /* @__PURE__ */ jsx6("span", { style: { flex: 1, height: 1, background: "rgba(0,0,0,0.08)" } }),
+            /* @__PURE__ */ jsx6("span", { style: { fontSize: 11, fontWeight: 600, letterSpacing: "0.08em" }, children: "OR" }),
+            /* @__PURE__ */ jsx6("span", { style: { flex: 1, height: 1, background: "rgba(0,0,0,0.08)" } })
+          ]
+        }
+      ),
+      showEmail && /* @__PURE__ */ jsxs5("form", { onSubmit: startOtp, "data-elvix-method": "email_otp", children: [
+        /* @__PURE__ */ jsx6("label", { htmlFor: "elvix-email", style: labelStyle, children: "Email" }),
+        /* @__PURE__ */ jsx6(
+          "input",
+          {
+            id: "elvix-email",
+            type: "email",
+            value: email,
+            onChange: (ev) => setEmail(ev.target.value),
+            placeholder: copy.emailPlaceholder,
+            required: true,
+            disabled: busy,
+            autoComplete: "email",
+            style: inputStyle
+          }
+        ),
+        /* @__PURE__ */ jsx6("button", { type: "submit", disabled: busy, style: primaryBtnStyle, children: busy ? copy.sendingLabel : copy.sendCodeButton })
+      ] })
+    ] }),
+    step === "code" && /* @__PURE__ */ jsxs5("form", { onSubmit: verifyOtp, children: [
+      /* @__PURE__ */ jsx6("label", { htmlFor: "elvix-code", style: labelStyle, children: "Verification code" }),
+      /* @__PURE__ */ jsx6(
+        "input",
+        {
+          id: "elvix-code",
+          type: "text",
+          inputMode: "numeric",
+          pattern: "[0-9]*",
+          maxLength: 6,
+          value: code,
+          onChange: (ev) => setCode(ev.target.value.replace(/\D/g, "")),
+          placeholder: copy.codePlaceholder,
+          required: true,
+          disabled: busy,
+          autoComplete: "one-time-code",
+          autoFocus: true,
+          style: { ...inputStyle, letterSpacing: "0.3em", textAlign: "center", fontSize: 18 }
+        }
+      ),
+      /* @__PURE__ */ jsx6("button", { type: "submit", disabled: busy, style: primaryBtnStyle, children: busy ? copy.verifyingLabel : submitLabel }),
+      /* @__PURE__ */ jsx6(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            setStep("identify");
+            setCode("");
+            setError(null);
+          },
+          disabled: busy,
+          style: {
+            marginTop: 12,
+            background: "none",
+            border: "none",
+            color: "#71717a",
+            fontSize: 12.5,
+            cursor: busy ? "not-allowed" : "pointer"
+          },
+          children: "Use a different email"
+        }
+      )
+    ] }),
+    error && /* @__PURE__ */ jsx6("p", { role: "alert", style: { margin: 0, fontSize: 12.5, color: "#dc2626" }, children: error }),
+    hasLegal && step !== "done" && /* @__PURE__ */ jsxs5("p", { style: { margin: 0, fontSize: 11.5, lineHeight: 1.5, color: "#a1a1aa" }, children: [
+      "By continuing, you agree to ",
+      appName,
+      "'s",
+      " ",
+      termsUrl && /* @__PURE__ */ jsx6(
+        "a",
+        {
+          href: termsUrl,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          style: { color: "#71717a", textDecoration: "underline" },
+          children: "Terms of Service"
+        }
+      ),
+      termsUrl && privacyUrl && " \xB7 ",
+      privacyUrl && /* @__PURE__ */ jsx6(
+        "a",
+        {
+          href: privacyUrl,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          style: { color: "#71717a", textDecoration: "underline" },
+          children: "Privacy Policy"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx6("div", { style: { display: "flex", justifyContent: "center", paddingTop: 2 }, children: /* @__PURE__ */ jsx6(ElvixSecuredBadge, { variant: "outline", theme: "light", size: "sm", accentColor: brand }) })
   ] });
 }
-
-// src/react/elvix-sign-in-button.tsx
-import { useState as useState3 } from "react";
-
-// src/react/elvix-shield.tsx
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
-function ElvixShield({
-  size,
-  fill,
-  accent
-}) {
-  return /* @__PURE__ */ jsxs3("svg", { width: size, height: size, viewBox: "2 2 20 20", "aria-hidden": true, style: { display: "block" }, children: [
-    /* @__PURE__ */ jsx4(
-      "path",
-      {
-        fill,
-        fillRule: "evenodd",
-        d: "M 6 2.5 C 4.34 2.5 3 3.84 3 5.5 L 3 12.5 C 3 17.5 7 20.7 12 22 C 17 20.7 21 17.5 21 12.5 L 21 5.5 C 21 3.84 19.66 2.5 18 2.5 L 6 2.5 Z M 12 8.4 C 9.79 8.4 8 10.19 8 12.4 C 8 14.61 9.79 16.4 12 16.4 C 13.21 16.4 14.3 15.86 15.04 15 L 13.6 13.77 C 13.21 14.23 12.64 14.5 12 14.5 C 11.04 14.5 10.21 13.86 9.91 13 L 15.95 13 C 15.98 12.8 16 12.6 16 12.4 C 16 10.19 14.21 8.4 12 8.4 Z M 9.91 11.8 L 14.09 11.8 C 13.79 10.94 12.96 10.3 12 10.3 C 11.04 10.3 10.21 10.94 9.91 11.8 Z"
-      }
-    ),
-    /* @__PURE__ */ jsx4("circle", { cx: "19.5", cy: "4.5", r: "2.4", fill: accent })
-  ] });
+function hexToRgba(hex, alpha) {
+  const m = /^#?([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(hex.trim());
+  if (!m) return hex;
+  let h = m[1];
+  if (h.length === 3)
+    h = h.split("").map((c) => c + c).join("");
+  const n = Number.parseInt(h, 16);
+  const r = n >> 16 & 255;
+  const g = n >> 8 & 255;
+  const b = n & 255;
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
 }
 
 // src/react/elvix-sign-in-button.tsx
-import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
-var ELVIX_URL = "https://elvix.is";
+import { useState as useState4 } from "react";
+import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+var ELVIX_URL2 = "https://elvix.is";
 var PRESET_LABEL = {
   "sign-in-with-elvix": "Sign in with elvix",
   "continue-with-elvix": "Continue with elvix",
@@ -462,7 +1138,7 @@ function shieldColor(variant, theme) {
 }
 function ElvixSignInButton({
   clientId,
-  baseUrl = ELVIX_URL,
+  baseUrl = ELVIX_URL2,
   returnUrl,
   type = "standard",
   variant = "filled",
@@ -475,9 +1151,16 @@ function ElvixSignInButton({
   href,
   mode = "redirect",
   onClick,
-  onResult
+  onResult,
+  width,
+  height,
+  minWidth,
+  maxWidth,
+  minHeight,
+  maxHeight
 }) {
-  const [embedOpen, setEmbedOpen] = useState3(false);
+  const sized = sizeStyle({ width, height, minWidth, maxWidth, minHeight, maxHeight });
+  const [embedOpen, setEmbedOpen] = useState4(false);
   const isIcon = type === "icon";
   const resolvedLabel = label ?? PRESET_LABEL[preset];
   const tone = variantTone(variant, theme);
@@ -498,18 +1181,20 @@ function ElvixSignInButton({
     border: tone.border,
     boxShadow: tone.shadow,
     transition: "background 0.15s, border-color 0.15s",
-    ...isIcon ? { height: SIZE_ICON[size], width: SIZE_ICON[size] } : { height: std.height, paddingLeft: std.padX, paddingRight: std.padX, gap: std.gap }
+    ...isIcon ? { height: SIZE_ICON[size], width: SIZE_ICON[size] } : { height: std.height, paddingLeft: std.padX, paddingRight: std.padX, gap: std.gap },
+    // Dimensional overrides win over the size preset above.
+    ...sized
   };
-  const content = /* @__PURE__ */ jsxs4(Fragment2, { children: [
-    /* @__PURE__ */ jsx5(ElvixShield, { size: ICON_SIZE[size], fill: shieldColor(variant, theme), accent: "#8e7dff" }),
-    isIcon ? null : /* @__PURE__ */ jsx5("span", { children: resolvedLabel })
+  const content = /* @__PURE__ */ jsxs6(Fragment2, { children: [
+    /* @__PURE__ */ jsx7(ElvixShield, { size: ICON_SIZE[size], fill: shieldColor(variant, theme), accent: "#8e7dff" }),
+    isIcon ? null : /* @__PURE__ */ jsx7("span", { children: resolvedLabel })
   ] });
   if (mode === "callback") {
-    return /* @__PURE__ */ jsx5("button", { type: "button", onClick, className, style, "aria-label": isIcon ? resolvedLabel : void 0, children: content });
+    return /* @__PURE__ */ jsx7("button", { type: "button", onClick, className, style, "aria-label": isIcon ? resolvedLabel : void 0, children: content });
   }
   if (mode === "embed") {
-    return /* @__PURE__ */ jsxs4("div", { "data-elvix-signin-button-embed": "", children: [
-      !embedOpen && /* @__PURE__ */ jsx5(
+    return /* @__PURE__ */ jsxs6("div", { "data-elvix-signin-button-embed": "", style: sized, children: [
+      !embedOpen && /* @__PURE__ */ jsx7(
         "button",
         {
           type: "button",
@@ -520,7 +1205,7 @@ function ElvixSignInButton({
           children: content
         }
       ),
-      embedOpen && /* @__PURE__ */ jsx5(
+      embedOpen && /* @__PURE__ */ jsx7(
         ElvixSignIn,
         {
           onResult: (r) => {
@@ -537,86 +1222,17 @@ function ElvixSignInButton({
     const sep = base.includes("?") ? "&" : "?";
     return `${base}${sep}return=${encodeURIComponent(returnUrl)}`;
   })();
-  return /* @__PURE__ */ jsx5("a", { href: destination, className, style, "aria-label": isIcon ? resolvedLabel : void 0, children: content });
-}
-
-// src/react/elvix-secured-badge.tsx
-import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
-var ELVIX_URL2 = "https://elvix.is";
-var SIZE = {
-  sm: { height: 28, padX: 10, font: 11.5, icon: 14, gap: 6 },
-  md: { height: 32, padX: 12, font: 12.5, icon: 16, gap: 7 },
-  lg: { height: 36, padX: 14, font: 13, icon: 18, gap: 8 }
-};
-var TONE = {
-  white: {
-    light: { bg: "#ffffff", border: "#e4e4e7", lead: "#71717a", brand: "#0a0a0b", shield: "#0a0a0b" },
-    dark: { bg: "#ffffff", border: "transparent", lead: "#71717a", brand: "#0a0a0b", shield: "#0a0a0b" }
-  },
-  dark: {
-    light: { bg: "#0a0a0b", border: "rgba(0,0,0,0.1)", lead: "#d4d4d8", brand: "#ffffff", shield: "#ffffff" },
-    dark: { bg: "#0a0a0b", border: "rgba(255,255,255,0.1)", lead: "#d4d4d8", brand: "#ffffff", shield: "#ffffff" }
-  },
-  outline: {
-    light: { bg: "transparent", border: "rgba(0,0,0,0.15)", lead: "#71717a", brand: "#0a0a0b", shield: "#0a0a0b" },
-    dark: { bg: "transparent", border: "rgba(142,125,255,0.4)", lead: "#d4d4d8", brand: "#ffffff", shield: "#ffffff" }
-  }
-};
-function ElvixSecuredBadge({
-  variant = "white",
-  size = "md",
-  theme = "dark",
-  accentColor = "#8e7dff",
-  href = ELVIX_URL2,
-  className = ""
-}) {
-  const s = SIZE[size];
-  const t = TONE[variant][theme];
-  const style = {
-    display: "inline-flex",
-    alignItems: "center",
-    gap: s.gap,
-    height: s.height,
-    paddingLeft: s.padX,
-    paddingRight: s.padX,
-    fontSize: s.font,
-    fontWeight: 500,
-    borderRadius: 9999,
-    background: t.bg,
-    border: `1px solid ${t.border}`,
-    color: t.brand,
-    textDecoration: "none",
-    userSelect: "none",
-    lineHeight: 1
-  };
-  return /* @__PURE__ */ jsxs5(
-    "a",
-    {
-      href,
-      target: "_blank",
-      rel: "noopener noreferrer",
-      className,
-      style,
-      "data-elvix-secured-badge": "",
-      children: [
-        /* @__PURE__ */ jsx6(ElvixShield, { size: s.icon, fill: t.shield, accent: accentColor }),
-        /* @__PURE__ */ jsxs5("span", { style: { display: "inline-flex", alignItems: "baseline", gap: 4 }, children: [
-          /* @__PURE__ */ jsx6("span", { style: { color: t.lead }, children: "Secured by" }),
-          /* @__PURE__ */ jsx6("span", { style: { color: t.brand, fontWeight: 600 }, children: "elvix" })
-        ] })
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsx7("a", { href: destination, className, style, "aria-label": isIcon ? resolvedLabel : void 0, children: content });
 }
 
 // src/react/hooks.ts
-import { useCallback, useEffect as useEffect2, useState as useState4 } from "react";
+import { useCallback, useEffect as useEffect2, useState as useState5 } from "react";
 var POLL_MS = 7e3;
 function useUserList(kind, opts) {
   const { applicationId, baseUrl = "", pollMs = POLL_MS } = opts;
-  const [slugs, setSlugs] = useState4([]);
-  const [loading, setLoading] = useState4(true);
-  const [error, setError] = useState4(null);
+  const [slugs, setSlugs] = useState5([]);
+  const [loading, setLoading] = useState5(true);
+  const [error, setError] = useState5(null);
   const refresh = useCallback(async () => {
     setError(null);
     try {
@@ -683,7 +1299,7 @@ function ElvixLifecycleWatcher({
 }
 
 // src/react/elvix-username.tsx
-import { useState as useState5 } from "react";
+import { useState as useState6 } from "react";
 
 // src/react/lib.ts
 async function appPost(opts, path, body) {
@@ -741,15 +1357,22 @@ async function appDelete(opts, path) {
 }
 
 // src/react/elvix-username.tsx
-import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
 function ElvixUsername({
-  onResult
+  onResult,
+  width,
+  height,
+  minWidth,
+  maxWidth,
+  minHeight,
+  maxHeight
 }) {
+  const sizeProps = { width, height, minWidth, maxWidth, minHeight, maxHeight };
   const ctx = useElvixContext();
-  const [value, setValue] = useState5("");
-  const [busy, setBusy] = useState5(false);
-  const [error, setError] = useState5(null);
-  const [done, setDone] = useState5(null);
+  const [value, setValue] = useState6("");
+  const [busy, setBusy] = useState6(false);
+  const [error, setError] = useState6(null);
+  const [done, setDone] = useState6(null);
   async function submit(e) {
     e.preventDefault();
     if (!ctx.app) return;
@@ -769,17 +1392,17 @@ function ElvixUsername({
     onResult?.(result);
   }
   if (done) {
-    return /* @__PURE__ */ jsx7(ElvixCard, { title: "Username saved", children: /* @__PURE__ */ jsxs6("p", { children: [
+    return /* @__PURE__ */ jsx8(ElvixCard, { title: "Username saved", ...sizeProps, children: /* @__PURE__ */ jsxs7("p", { children: [
       "You are now ",
-      /* @__PURE__ */ jsxs6("strong", { children: [
+      /* @__PURE__ */ jsxs7("strong", { children: [
         "@",
         done
       ] }),
       "."
     ] }) });
   }
-  return /* @__PURE__ */ jsx7(ElvixCard, { title: "Choose a username", children: /* @__PURE__ */ jsxs6("form", { onSubmit: submit, className: "elvix-form", children: [
-    /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx8(ElvixCard, { title: "Choose a username", ...sizeProps, children: /* @__PURE__ */ jsxs7("form", { onSubmit: submit, className: "elvix-form", children: [
+    /* @__PURE__ */ jsx8(
       "input",
       {
         type: "text",
@@ -792,21 +1415,28 @@ function ElvixUsername({
         className: "elvix-input"
       }
     ),
-    /* @__PURE__ */ jsx7("button", { type: "submit", disabled: busy || value.length < 4, className: "elvix-btn elvix-btn-primary", children: busy ? "Saving\u2026" : "Claim" }),
-    error && /* @__PURE__ */ jsx7("p", { role: "alert", className: "elvix-error", children: error })
+    /* @__PURE__ */ jsx8("button", { type: "submit", disabled: busy || value.length < 4, className: "elvix-btn elvix-btn-primary", children: busy ? "Saving\u2026" : "Claim" }),
+    error && /* @__PURE__ */ jsx8("p", { role: "alert", className: "elvix-error", children: error })
   ] }) });
 }
 
 // src/react/elvix-avatar.tsx
-import { useState as useState6 } from "react";
-import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+import { useState as useState7 } from "react";
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
 function ElvixAvatar({
-  onResult
+  onResult,
+  width,
+  height,
+  minWidth,
+  maxWidth,
+  minHeight,
+  maxHeight
 }) {
+  const sizeProps = { width, height, minWidth, maxWidth, minHeight, maxHeight };
   const ctx = useElvixContext();
-  const [busy, setBusy] = useState6(false);
-  const [error, setError] = useState6(null);
-  const [preview, setPreview] = useState6(null);
+  const [busy, setBusy] = useState7(false);
+  const [error, setError] = useState7(null);
+  const [preview, setPreview] = useState7(null);
   async function onFile(e) {
     const file = e.target.files?.[0];
     if (!file || !ctx.app) return;
@@ -829,8 +1459,8 @@ function ElvixAvatar({
     if (!result.ok) setError(result.error);
     onResult?.(result);
   }
-  return /* @__PURE__ */ jsxs7(ElvixCard, { title: "Avatar", children: [
-    preview && /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsxs8(ElvixCard, { title: "Avatar", ...sizeProps, children: [
+    preview && /* @__PURE__ */ jsx9(
       "img",
       {
         src: preview,
@@ -838,22 +1468,29 @@ function ElvixAvatar({
         style: { width: 96, height: 96, borderRadius: "50%", objectFit: "cover", marginBottom: 12 }
       }
     ),
-    /* @__PURE__ */ jsx8("input", { type: "file", accept: "image/png,image/jpeg,image/webp", onChange: onFile, disabled: busy }),
-    busy && /* @__PURE__ */ jsx8("p", { children: "Uploading\u2026" }),
-    error && /* @__PURE__ */ jsx8("p", { role: "alert", className: "elvix-error", children: error })
+    /* @__PURE__ */ jsx9("input", { type: "file", accept: "image/png,image/jpeg,image/webp", onChange: onFile, disabled: busy }),
+    busy && /* @__PURE__ */ jsx9("p", { children: "Uploading\u2026" }),
+    error && /* @__PURE__ */ jsx9("p", { role: "alert", className: "elvix-error", children: error })
   ] });
 }
 
 // src/react/elvix-banner.tsx
-import { useState as useState7 } from "react";
-import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+import { useState as useState8 } from "react";
+import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
 function ElvixBanner({
-  onResult
+  onResult,
+  width,
+  height,
+  minWidth,
+  maxWidth,
+  minHeight,
+  maxHeight
 }) {
+  const sizeProps = { width, height, minWidth, maxWidth, minHeight, maxHeight };
   const ctx = useElvixContext();
-  const [busy, setBusy] = useState7(false);
-  const [error, setError] = useState7(null);
-  const [preview, setPreview] = useState7(null);
+  const [busy, setBusy] = useState8(false);
+  const [error, setError] = useState8(null);
+  const [preview, setPreview] = useState8(null);
   async function onFile(e) {
     const file = e.target.files?.[0];
     if (!file || !ctx.app) return;
@@ -876,8 +1513,8 @@ function ElvixBanner({
     if (!result.ok) setError(result.error);
     onResult?.(result);
   }
-  return /* @__PURE__ */ jsxs8(ElvixCard, { title: "Banner", children: [
-    preview && /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsxs9(ElvixCard, { title: "Banner", ...sizeProps, children: [
+    preview && /* @__PURE__ */ jsx10(
       "img",
       {
         src: preview,
@@ -885,26 +1522,33 @@ function ElvixBanner({
         style: { width: "100%", aspectRatio: "16/9", objectFit: "cover", borderRadius: 10, marginBottom: 12 }
       }
     ),
-    /* @__PURE__ */ jsx9("input", { type: "file", accept: "image/png,image/jpeg,image/webp", onChange: onFile, disabled: busy }),
-    busy && /* @__PURE__ */ jsx9("p", { children: "Uploading\u2026" }),
-    error && /* @__PURE__ */ jsx9("p", { role: "alert", className: "elvix-error", children: error })
+    /* @__PURE__ */ jsx10("input", { type: "file", accept: "image/png,image/jpeg,image/webp", onChange: onFile, disabled: busy }),
+    busy && /* @__PURE__ */ jsx10("p", { children: "Uploading\u2026" }),
+    error && /* @__PURE__ */ jsx10("p", { role: "alert", className: "elvix-error", children: error })
   ] });
 }
 
 // src/react/elvix-identity-form.tsx
-import { useState as useState8 } from "react";
-import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+import { useState as useState9 } from "react";
+import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
 function ElvixIdentityForm({
   initialName = "",
   initialBio = "",
-  onResult
+  onResult,
+  width,
+  height,
+  minWidth,
+  maxWidth,
+  minHeight,
+  maxHeight
 }) {
+  const sizeProps = { width, height, minWidth, maxWidth, minHeight, maxHeight };
   const ctx = useElvixContext();
-  const [name, setName] = useState8(initialName);
-  const [bio, setBio] = useState8(initialBio);
-  const [busy, setBusy] = useState8(false);
-  const [error, setError] = useState8(null);
-  const [saved, setSaved] = useState8(false);
+  const [name, setName] = useState9(initialName);
+  const [bio, setBio] = useState9(initialBio);
+  const [busy, setBusy] = useState9(false);
+  const [error, setError] = useState9(null);
+  const [saved, setSaved] = useState9(false);
   async function submit(e) {
     e.preventDefault();
     if (!ctx.app) return;
@@ -920,35 +1564,42 @@ function ElvixIdentityForm({
     else setSaved(true);
     onResult?.(result);
   }
-  return /* @__PURE__ */ jsx10(ElvixCard, { title: "Identity", children: /* @__PURE__ */ jsxs9("form", { onSubmit: submit, className: "elvix-form", children: [
-    /* @__PURE__ */ jsxs9("label", { children: [
+  return /* @__PURE__ */ jsx11(ElvixCard, { title: "Identity", ...sizeProps, children: /* @__PURE__ */ jsxs10("form", { onSubmit: submit, className: "elvix-form", children: [
+    /* @__PURE__ */ jsxs10("label", { children: [
       "Name",
-      /* @__PURE__ */ jsx10("input", { value: name, onChange: (e) => setName(e.target.value), maxLength: 80, disabled: busy, className: "elvix-input" })
+      /* @__PURE__ */ jsx11("input", { value: name, onChange: (e) => setName(e.target.value), maxLength: 80, disabled: busy, className: "elvix-input" })
     ] }),
-    /* @__PURE__ */ jsxs9("label", { children: [
+    /* @__PURE__ */ jsxs10("label", { children: [
       "Bio",
-      /* @__PURE__ */ jsx10("textarea", { value: bio, onChange: (e) => setBio(e.target.value), maxLength: 500, rows: 3, disabled: busy, className: "elvix-input" })
+      /* @__PURE__ */ jsx11("textarea", { value: bio, onChange: (e) => setBio(e.target.value), maxLength: 500, rows: 3, disabled: busy, className: "elvix-input" })
     ] }),
-    /* @__PURE__ */ jsx10("button", { type: "submit", disabled: busy, className: "elvix-btn elvix-btn-primary", children: busy ? "Saving\u2026" : "Save" }),
-    saved && /* @__PURE__ */ jsx10("p", { className: "elvix-muted", children: "Saved." }),
-    error && /* @__PURE__ */ jsx10("p", { role: "alert", className: "elvix-error", children: error })
+    /* @__PURE__ */ jsx11("button", { type: "submit", disabled: busy, className: "elvix-btn elvix-btn-primary", children: busy ? "Saving\u2026" : "Save" }),
+    saved && /* @__PURE__ */ jsx11("p", { className: "elvix-muted", children: "Saved." }),
+    error && /* @__PURE__ */ jsx11("p", { role: "alert", className: "elvix-error", children: error })
   ] }) });
 }
 
 // src/react/elvix-region.tsx
-import { useState as useState9 } from "react";
-import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
+import { useState as useState10 } from "react";
+import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
 function ElvixRegion({
   initialCountry = "",
   initialTimezone = "",
-  onResult
+  onResult,
+  width,
+  height,
+  minWidth,
+  maxWidth,
+  minHeight,
+  maxHeight
 }) {
+  const sizeProps = { width, height, minWidth, maxWidth, minHeight, maxHeight };
   const ctx = useElvixContext();
-  const [country, setCountry] = useState9(initialCountry);
-  const [timezone, setTimezone] = useState9(initialTimezone);
-  const [busy, setBusy] = useState9(false);
-  const [error, setError] = useState9(null);
-  const [saved, setSaved] = useState9(false);
+  const [country, setCountry] = useState10(initialCountry);
+  const [timezone, setTimezone] = useState10(initialTimezone);
+  const [busy, setBusy] = useState10(false);
+  const [error, setError] = useState10(null);
+  const [saved, setSaved] = useState10(false);
   async function submit(e) {
     e.preventDefault();
     if (!ctx.app) return;
@@ -964,33 +1615,40 @@ function ElvixRegion({
     else setSaved(true);
     onResult?.(result);
   }
-  return /* @__PURE__ */ jsx11(ElvixCard, { title: "Region", children: /* @__PURE__ */ jsxs10("form", { onSubmit: submit, className: "elvix-form", children: [
-    /* @__PURE__ */ jsxs10("label", { children: [
+  return /* @__PURE__ */ jsx12(ElvixCard, { title: "Region", ...sizeProps, children: /* @__PURE__ */ jsxs11("form", { onSubmit: submit, className: "elvix-form", children: [
+    /* @__PURE__ */ jsxs11("label", { children: [
       "Country (ISO-2)",
-      /* @__PURE__ */ jsx11("input", { value: country, onChange: (e) => setCountry(e.target.value.toUpperCase()), maxLength: 2, pattern: "[A-Z]{2}", disabled: busy, className: "elvix-input" })
+      /* @__PURE__ */ jsx12("input", { value: country, onChange: (e) => setCountry(e.target.value.toUpperCase()), maxLength: 2, pattern: "[A-Z]{2}", disabled: busy, className: "elvix-input" })
     ] }),
-    /* @__PURE__ */ jsxs10("label", { children: [
+    /* @__PURE__ */ jsxs11("label", { children: [
       "Timezone",
-      /* @__PURE__ */ jsx11("input", { value: timezone, onChange: (e) => setTimezone(e.target.value), placeholder: "Europe/Berlin", disabled: busy, className: "elvix-input" })
+      /* @__PURE__ */ jsx12("input", { value: timezone, onChange: (e) => setTimezone(e.target.value), placeholder: "Europe/Berlin", disabled: busy, className: "elvix-input" })
     ] }),
-    /* @__PURE__ */ jsx11("button", { type: "submit", disabled: busy, className: "elvix-btn elvix-btn-primary", children: busy ? "Saving\u2026" : "Save" }),
-    saved && /* @__PURE__ */ jsx11("p", { className: "elvix-muted", children: "Saved." }),
-    error && /* @__PURE__ */ jsx11("p", { role: "alert", className: "elvix-error", children: error })
+    /* @__PURE__ */ jsx12("button", { type: "submit", disabled: busy, className: "elvix-btn elvix-btn-primary", children: busy ? "Saving\u2026" : "Save" }),
+    saved && /* @__PURE__ */ jsx12("p", { className: "elvix-muted", children: "Saved." }),
+    error && /* @__PURE__ */ jsx12("p", { role: "alert", className: "elvix-error", children: error })
   ] }) });
 }
 
 // src/react/elvix-languages.tsx
-import { useState as useState10 } from "react";
-import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
+import { useState as useState11 } from "react";
+import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
 function ElvixLanguages({
   initial = [],
-  onResult
+  onResult,
+  width,
+  height,
+  minWidth,
+  maxWidth,
+  minHeight,
+  maxHeight
 }) {
+  const sizeProps = { width, height, minWidth, maxWidth, minHeight, maxHeight };
   const ctx = useElvixContext();
-  const [raw, setRaw] = useState10(initial.join(", "));
-  const [busy, setBusy] = useState10(false);
-  const [error, setError] = useState10(null);
-  const [saved, setSaved] = useState10(false);
+  const [raw, setRaw] = useState11(initial.join(", "));
+  const [busy, setBusy] = useState11(false);
+  const [error, setError] = useState11(null);
+  const [saved, setSaved] = useState11(false);
   async function submit(e) {
     e.preventDefault();
     if (!ctx.app) return;
@@ -1007,27 +1665,34 @@ function ElvixLanguages({
     else setSaved(true);
     onResult?.(result);
   }
-  return /* @__PURE__ */ jsx12(ElvixCard, { title: "Languages", children: /* @__PURE__ */ jsxs11("form", { onSubmit: submit, className: "elvix-form", children: [
-    /* @__PURE__ */ jsxs11("label", { children: [
+  return /* @__PURE__ */ jsx13(ElvixCard, { title: "Languages", ...sizeProps, children: /* @__PURE__ */ jsxs12("form", { onSubmit: submit, className: "elvix-form", children: [
+    /* @__PURE__ */ jsxs12("label", { children: [
       "Preferred languages (comma-separated BCP-47 tags)",
-      /* @__PURE__ */ jsx12("input", { value: raw, onChange: (e) => setRaw(e.target.value), placeholder: "en-GB, de-DE", disabled: busy, className: "elvix-input" })
+      /* @__PURE__ */ jsx13("input", { value: raw, onChange: (e) => setRaw(e.target.value), placeholder: "en-GB, de-DE", disabled: busy, className: "elvix-input" })
     ] }),
-    /* @__PURE__ */ jsx12("button", { type: "submit", disabled: busy, className: "elvix-btn elvix-btn-primary", children: busy ? "Saving\u2026" : "Save" }),
-    saved && /* @__PURE__ */ jsx12("p", { className: "elvix-muted", children: "Saved." }),
-    error && /* @__PURE__ */ jsx12("p", { role: "alert", className: "elvix-error", children: error })
+    /* @__PURE__ */ jsx13("button", { type: "submit", disabled: busy, className: "elvix-btn elvix-btn-primary", children: busy ? "Saving\u2026" : "Save" }),
+    saved && /* @__PURE__ */ jsx13("p", { className: "elvix-muted", children: "Saved." }),
+    error && /* @__PURE__ */ jsx13("p", { role: "alert", className: "elvix-error", children: error })
   ] }) });
 }
 
 // src/react/elvix-sessions.tsx
-import { useEffect as useEffect4, useState as useState11 } from "react";
-import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
+import { useEffect as useEffect4, useState as useState12 } from "react";
+import { jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
 function ElvixSessions({
-  onResult
+  onResult,
+  width,
+  height,
+  minWidth,
+  maxWidth,
+  minHeight,
+  maxHeight
 }) {
+  const sizeProps = { width, height, minWidth, maxWidth, minHeight, maxHeight };
   const ctx = useElvixContext();
-  const [rows, setRows] = useState11(null);
-  const [error, setError] = useState11(null);
-  const [busy, setBusy] = useState11(false);
+  const [rows, setRows] = useState12(null);
+  const [error, setError] = useState12(null);
+  const [busy, setBusy] = useState12(false);
   useEffect4(() => {
     if (!ctx.app) return;
     fetch(`${ctx.baseUrl}/api/account/apps/${ctx.app.applicationId}/sessions`, {
@@ -1048,36 +1713,43 @@ function ElvixSessions({
     if (result.ok) setRows((prev) => prev?.filter((s) => s.id !== id) ?? null);
     onResult?.(result);
   }
-  return /* @__PURE__ */ jsxs12(ElvixCard, { title: "Active sessions", children: [
-    error && /* @__PURE__ */ jsx13("p", { role: "alert", className: "elvix-error", children: error }),
-    !rows && !error && /* @__PURE__ */ jsx13("p", { children: "Loading\u2026" }),
-    rows && /* @__PURE__ */ jsx13("ul", { style: { listStyle: "none", padding: 0, margin: 0 }, children: rows.map((s) => /* @__PURE__ */ jsx13("li", { style: { padding: "10px 0", borderBottom: "1px solid rgba(0,0,0,0.06)" }, children: /* @__PURE__ */ jsxs12("div", { style: { display: "flex", justifyContent: "space-between", gap: 12 }, children: [
-      /* @__PURE__ */ jsxs12("div", { children: [
-        /* @__PURE__ */ jsxs12("div", { style: { fontSize: 13, fontWeight: 500 }, children: [
+  return /* @__PURE__ */ jsxs13(ElvixCard, { title: "Active sessions", ...sizeProps, children: [
+    error && /* @__PURE__ */ jsx14("p", { role: "alert", className: "elvix-error", children: error }),
+    !rows && !error && /* @__PURE__ */ jsx14("p", { children: "Loading\u2026" }),
+    rows && /* @__PURE__ */ jsx14("ul", { style: { listStyle: "none", padding: 0, margin: 0 }, children: rows.map((s) => /* @__PURE__ */ jsx14("li", { style: { padding: "10px 0", borderBottom: "1px solid rgba(0,0,0,0.06)" }, children: /* @__PURE__ */ jsxs13("div", { style: { display: "flex", justifyContent: "space-between", gap: 12 }, children: [
+      /* @__PURE__ */ jsxs13("div", { children: [
+        /* @__PURE__ */ jsxs13("div", { style: { fontSize: 13, fontWeight: 500 }, children: [
           s.device,
-          s.current && /* @__PURE__ */ jsx13("span", { style: { marginLeft: 8, color: "var(--elvix-primary-strong)", fontSize: 11 }, children: "\xB7 this device" })
+          s.current && /* @__PURE__ */ jsx14("span", { style: { marginLeft: 8, color: "var(--elvix-primary-strong)", fontSize: 11 }, children: "\xB7 this device" })
         ] }),
-        /* @__PURE__ */ jsxs12("div", { style: { fontSize: 11, color: "rgba(0,0,0,0.55)" }, children: [
+        /* @__PURE__ */ jsxs13("div", { style: { fontSize: 11, color: "rgba(0,0,0,0.55)" }, children: [
           s.country ?? "\u2014",
           " \xB7 since ",
           new Date(s.createdAt).toLocaleDateString()
         ] })
       ] }),
-      !s.current && /* @__PURE__ */ jsx13("button", { type: "button", disabled: busy, onClick: () => revoke(s.id), className: "elvix-btn elvix-btn-ghost", children: "Revoke" })
+      !s.current && /* @__PURE__ */ jsx14("button", { type: "button", disabled: busy, onClick: () => revoke(s.id), className: "elvix-btn elvix-btn-ghost", children: "Revoke" })
     ] }) }, s.id)) })
   ] });
 }
 
 // src/react/elvix-export.tsx
-import { useState as useState12 } from "react";
-import { jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
+import { useState as useState13 } from "react";
+import { jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
 function ElvixExport({
-  onResult
+  onResult,
+  width,
+  height,
+  minWidth,
+  maxWidth,
+  minHeight,
+  maxHeight
 }) {
+  const sizeProps = { width, height, minWidth, maxWidth, minHeight, maxHeight };
   const ctx = useElvixContext();
-  const [busy, setBusy] = useState12(false);
-  const [done, setDone] = useState12(false);
-  const [error, setError] = useState12(null);
+  const [busy, setBusy] = useState13(false);
+  const [done, setDone] = useState13(false);
+  const [error, setError] = useState13(null);
   async function start() {
     if (!ctx.app) return;
     setBusy(true);
@@ -1092,25 +1764,32 @@ function ElvixExport({
     else setDone(true);
     onResult?.(result);
   }
-  return /* @__PURE__ */ jsxs13(ElvixCard, { title: "Export my data", children: [
-    /* @__PURE__ */ jsx14("p", { style: { fontSize: 13, color: "rgba(0,0,0,0.6)" }, children: "Request a zip of every record we hold for you in this app. Delivery by email; single-use download link valid for 24h." }),
-    done ? /* @__PURE__ */ jsx14("p", { className: "elvix-muted", children: "Request queued. Check your email." }) : /* @__PURE__ */ jsx14("button", { type: "button", onClick: start, disabled: busy, className: "elvix-btn elvix-btn-primary", children: busy ? "Queuing\u2026" : "Request export" }),
-    error && /* @__PURE__ */ jsx14("p", { role: "alert", className: "elvix-error", children: error })
+  return /* @__PURE__ */ jsxs14(ElvixCard, { title: "Export my data", ...sizeProps, children: [
+    /* @__PURE__ */ jsx15("p", { style: { fontSize: 13, color: "rgba(0,0,0,0.6)" }, children: "Request a zip of every record we hold for you in this app. Delivery by email; single-use download link valid for 24h." }),
+    done ? /* @__PURE__ */ jsx15("p", { className: "elvix-muted", children: "Request queued. Check your email." }) : /* @__PURE__ */ jsx15("button", { type: "button", onClick: start, disabled: busy, className: "elvix-btn elvix-btn-primary", children: busy ? "Queuing\u2026" : "Request export" }),
+    error && /* @__PURE__ */ jsx15("p", { role: "alert", className: "elvix-error", children: error })
   ] });
 }
 
 // src/react/elvix-deactivate.tsx
-import { useState as useState13 } from "react";
-import { Fragment as Fragment3, jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
+import { useState as useState14 } from "react";
+import { Fragment as Fragment3, jsx as jsx16, jsxs as jsxs15 } from "react/jsx-runtime";
 function ElvixDeactivate({
-  onResult
+  onResult,
+  width,
+  height,
+  minWidth,
+  maxWidth,
+  minHeight,
+  maxHeight
 }) {
+  const sizeProps = { width, height, minWidth, maxWidth, minHeight, maxHeight };
   const ctx = useElvixContext();
-  const [pane, setPane] = useState13("warn");
-  const [challengeId, setChallengeId] = useState13(null);
-  const [code, setCode] = useState13("");
-  const [busy, setBusy] = useState13(false);
-  const [error, setError] = useState13(null);
+  const [pane, setPane] = useState14("warn");
+  const [challengeId, setChallengeId] = useState14(null);
+  const [code, setCode] = useState14("");
+  const [busy, setBusy] = useState14(false);
+  const [error, setError] = useState14(null);
   async function startChallenge() {
     if (!ctx.app) return;
     setBusy(true);
@@ -1148,16 +1827,16 @@ function ElvixDeactivate({
     onResult?.(result);
   }
   if (pane === "done") {
-    return /* @__PURE__ */ jsx15(ElvixCard, { title: "Deactivated", children: /* @__PURE__ */ jsx15("p", { children: "Your access has been paused. Sign in again to restore it." }) });
+    return /* @__PURE__ */ jsx16(ElvixCard, { title: "Deactivated", ...sizeProps, children: /* @__PURE__ */ jsx16("p", { children: "Your access has been paused. Sign in again to restore it." }) });
   }
-  return /* @__PURE__ */ jsxs14(ElvixCard, { title: "Deactivate account", children: [
-    pane === "warn" && /* @__PURE__ */ jsxs14(Fragment3, { children: [
-      /* @__PURE__ */ jsx15("p", { style: { fontSize: 13, color: "rgba(0,0,0,0.6)" }, children: "Pause your membership. You can restore it any time by signing in again. No data is deleted." }),
-      /* @__PURE__ */ jsx15("button", { type: "button", onClick: startChallenge, disabled: busy, className: "elvix-btn elvix-btn-danger", children: busy ? "Sending\u2026" : "Send code" })
+  return /* @__PURE__ */ jsxs15(ElvixCard, { title: "Deactivate account", ...sizeProps, children: [
+    pane === "warn" && /* @__PURE__ */ jsxs15(Fragment3, { children: [
+      /* @__PURE__ */ jsx16("p", { style: { fontSize: 13, color: "rgba(0,0,0,0.6)" }, children: "Pause your membership. You can restore it any time by signing in again. No data is deleted." }),
+      /* @__PURE__ */ jsx16("button", { type: "button", onClick: startChallenge, disabled: busy, className: "elvix-btn elvix-btn-danger", children: busy ? "Sending\u2026" : "Send code" })
     ] }),
-    pane === "otp" && /* @__PURE__ */ jsxs14("form", { onSubmit: confirm, className: "elvix-form", children: [
-      /* @__PURE__ */ jsx15("p", { className: "elvix-muted", children: "We sent a 6-digit code to your email." }),
-      /* @__PURE__ */ jsx15(
+    pane === "otp" && /* @__PURE__ */ jsxs15("form", { onSubmit: confirm, className: "elvix-form", children: [
+      /* @__PURE__ */ jsx16("p", { className: "elvix-muted", children: "We sent a 6-digit code to your email." }),
+      /* @__PURE__ */ jsx16(
         "input",
         {
           type: "text",
@@ -1171,24 +1850,31 @@ function ElvixDeactivate({
           className: "elvix-input"
         }
       ),
-      /* @__PURE__ */ jsx15("button", { type: "submit", disabled: busy || code.length !== 6, className: "elvix-btn elvix-btn-danger", children: busy ? "Deactivating\u2026" : "Confirm" })
+      /* @__PURE__ */ jsx16("button", { type: "submit", disabled: busy || code.length !== 6, className: "elvix-btn elvix-btn-danger", children: busy ? "Deactivating\u2026" : "Confirm" })
     ] }),
-    error && /* @__PURE__ */ jsx15("p", { role: "alert", className: "elvix-error", children: error })
+    error && /* @__PURE__ */ jsx16("p", { role: "alert", className: "elvix-error", children: error })
   ] });
 }
 
 // src/react/elvix-leave.tsx
-import { useState as useState14 } from "react";
-import { Fragment as Fragment4, jsx as jsx16, jsxs as jsxs15 } from "react/jsx-runtime";
+import { useState as useState15 } from "react";
+import { Fragment as Fragment4, jsx as jsx17, jsxs as jsxs16 } from "react/jsx-runtime";
 function ElvixLeave({
-  onResult
+  onResult,
+  width,
+  height,
+  minWidth,
+  maxWidth,
+  minHeight,
+  maxHeight
 }) {
+  const sizeProps = { width, height, minWidth, maxWidth, minHeight, maxHeight };
   const ctx = useElvixContext();
-  const [pane, setPane] = useState14("warn");
-  const [challengeId, setChallengeId] = useState14(null);
-  const [code, setCode] = useState14("");
-  const [busy, setBusy] = useState14(false);
-  const [error, setError] = useState14(null);
+  const [pane, setPane] = useState15("warn");
+  const [challengeId, setChallengeId] = useState15(null);
+  const [code, setCode] = useState15("");
+  const [busy, setBusy] = useState15(false);
+  const [error, setError] = useState15(null);
   async function startChallenge() {
     if (!ctx.app) return;
     setBusy(true);
@@ -1226,16 +1912,16 @@ function ElvixLeave({
     onResult?.(result);
   }
   if (pane === "done") {
-    return /* @__PURE__ */ jsx16(ElvixCard, { title: "You've left", children: /* @__PURE__ */ jsx16("p", { children: "You've left this app. Your data is archived; sign in again to rejoin." }) });
+    return /* @__PURE__ */ jsx17(ElvixCard, { title: "You've left", ...sizeProps, children: /* @__PURE__ */ jsx17("p", { children: "You've left this app. Your data is archived; sign in again to rejoin." }) });
   }
-  return /* @__PURE__ */ jsxs15(ElvixCard, { title: "Leave this app", children: [
-    pane === "warn" && /* @__PURE__ */ jsxs15(Fragment4, { children: [
-      /* @__PURE__ */ jsx16("p", { style: { fontSize: 13, color: "rgba(0,0,0,0.6)" }, children: "Remove yourself from this app. Audit trail is preserved; you can sign back in any time to rejoin." }),
-      /* @__PURE__ */ jsx16("button", { type: "button", onClick: startChallenge, disabled: busy, className: "elvix-btn elvix-btn-danger", children: busy ? "Sending\u2026" : "Send code" })
+  return /* @__PURE__ */ jsxs16(ElvixCard, { title: "Leave this app", ...sizeProps, children: [
+    pane === "warn" && /* @__PURE__ */ jsxs16(Fragment4, { children: [
+      /* @__PURE__ */ jsx17("p", { style: { fontSize: 13, color: "rgba(0,0,0,0.6)" }, children: "Remove yourself from this app. Audit trail is preserved; you can sign back in any time to rejoin." }),
+      /* @__PURE__ */ jsx17("button", { type: "button", onClick: startChallenge, disabled: busy, className: "elvix-btn elvix-btn-danger", children: busy ? "Sending\u2026" : "Send code" })
     ] }),
-    pane === "otp" && /* @__PURE__ */ jsxs15("form", { onSubmit: confirm, className: "elvix-form", children: [
-      /* @__PURE__ */ jsx16("p", { className: "elvix-muted", children: "We sent a 6-digit code to your email." }),
-      /* @__PURE__ */ jsx16(
+    pane === "otp" && /* @__PURE__ */ jsxs16("form", { onSubmit: confirm, className: "elvix-form", children: [
+      /* @__PURE__ */ jsx17("p", { className: "elvix-muted", children: "We sent a 6-digit code to your email." }),
+      /* @__PURE__ */ jsx17(
         "input",
         {
           type: "text",
@@ -1249,24 +1935,31 @@ function ElvixLeave({
           className: "elvix-input"
         }
       ),
-      /* @__PURE__ */ jsx16("button", { type: "submit", disabled: busy || code.length !== 6, className: "elvix-btn elvix-btn-danger", children: busy ? "Leaving\u2026" : "Confirm leave" })
+      /* @__PURE__ */ jsx17("button", { type: "submit", disabled: busy || code.length !== 6, className: "elvix-btn elvix-btn-danger", children: busy ? "Leaving\u2026" : "Confirm leave" })
     ] }),
-    error && /* @__PURE__ */ jsx16("p", { role: "alert", className: "elvix-error", children: error })
+    error && /* @__PURE__ */ jsx17("p", { role: "alert", className: "elvix-error", children: error })
   ] });
 }
 
 // src/react/elvix-address-book.tsx
-import { useEffect as useEffect5, useState as useState15 } from "react";
-import { jsx as jsx17, jsxs as jsxs16 } from "react/jsx-runtime";
+import { useEffect as useEffect5, useState as useState16 } from "react";
+import { jsx as jsx18, jsxs as jsxs17 } from "react/jsx-runtime";
 function ElvixAddressBook({
-  onResult
+  onResult,
+  width,
+  height,
+  minWidth,
+  maxWidth,
+  minHeight,
+  maxHeight
 }) {
+  const sizeProps = { width, height, minWidth, maxWidth, minHeight, maxHeight };
   const ctx = useElvixContext();
-  const [rows, setRows] = useState15(null);
-  const [error, setError] = useState15(null);
-  const [busy, setBusy] = useState15(false);
-  const [adding, setAdding] = useState15(false);
-  const [form, setForm] = useState15({
+  const [rows, setRows] = useState16(null);
+  const [error, setError] = useState16(null);
+  const [busy, setBusy] = useState16(false);
+  const [adding, setAdding] = useState16(false);
+  const [form, setForm] = useState16({
     label: "Home",
     line1: "",
     postalCode: "",
@@ -1315,14 +2008,14 @@ function ElvixAddressBook({
     if (result.ok) setRows((prev) => prev?.filter((a) => a.id !== id) ?? null);
     onResult?.(result);
   }
-  return /* @__PURE__ */ jsxs16(ElvixCard, { title: "Addresses", children: [
-    error && /* @__PURE__ */ jsx17("p", { role: "alert", className: "elvix-error", children: error }),
-    !rows && !error && /* @__PURE__ */ jsx17("p", { children: "Loading\u2026" }),
-    rows && rows.length === 0 && /* @__PURE__ */ jsx17("p", { className: "elvix-muted", children: "No addresses yet." }),
-    rows?.map((a) => /* @__PURE__ */ jsxs16("div", { style: { padding: "8px 0", borderBottom: "1px solid rgba(0,0,0,0.06)", display: "flex", justifyContent: "space-between", gap: 12 }, children: [
-      /* @__PURE__ */ jsxs16("div", { style: { fontSize: 13 }, children: [
-        /* @__PURE__ */ jsx17("div", { style: { fontWeight: 500 }, children: a.label }),
-        /* @__PURE__ */ jsxs16("div", { style: { color: "rgba(0,0,0,0.55)" }, children: [
+  return /* @__PURE__ */ jsxs17(ElvixCard, { title: "Addresses", ...sizeProps, children: [
+    error && /* @__PURE__ */ jsx18("p", { role: "alert", className: "elvix-error", children: error }),
+    !rows && !error && /* @__PURE__ */ jsx18("p", { children: "Loading\u2026" }),
+    rows && rows.length === 0 && /* @__PURE__ */ jsx18("p", { className: "elvix-muted", children: "No addresses yet." }),
+    rows?.map((a) => /* @__PURE__ */ jsxs17("div", { style: { padding: "8px 0", borderBottom: "1px solid rgba(0,0,0,0.06)", display: "flex", justifyContent: "space-between", gap: 12 }, children: [
+      /* @__PURE__ */ jsxs17("div", { style: { fontSize: 13 }, children: [
+        /* @__PURE__ */ jsx18("div", { style: { fontWeight: 500 }, children: a.label }),
+        /* @__PURE__ */ jsxs17("div", { style: { color: "rgba(0,0,0,0.55)" }, children: [
           a.line1,
           a.line2 ? `, ${a.line2}` : "",
           ", ",
@@ -1333,32 +2026,39 @@ function ElvixAddressBook({
           a.country
         ] })
       ] }),
-      /* @__PURE__ */ jsx17("button", { type: "button", disabled: busy, onClick: () => remove(a.id), className: "elvix-btn elvix-btn-ghost", children: "Remove" })
+      /* @__PURE__ */ jsx18("button", { type: "button", disabled: busy, onClick: () => remove(a.id), className: "elvix-btn elvix-btn-ghost", children: "Remove" })
     ] }, a.id)),
-    !adding && /* @__PURE__ */ jsx17("button", { type: "button", onClick: () => setAdding(true), className: "elvix-btn elvix-btn-primary", style: { marginTop: 12 }, children: "Add address" }),
-    adding && /* @__PURE__ */ jsxs16("form", { onSubmit: add, className: "elvix-form", style: { marginTop: 12 }, children: [
-      /* @__PURE__ */ jsx17("input", { value: form.label, onChange: (e) => setForm({ ...form, label: e.target.value }), placeholder: "Label", className: "elvix-input" }),
-      /* @__PURE__ */ jsx17("input", { value: form.line1, onChange: (e) => setForm({ ...form, line1: e.target.value }), placeholder: "Street", required: true, className: "elvix-input" }),
-      /* @__PURE__ */ jsx17("input", { value: form.postalCode, onChange: (e) => setForm({ ...form, postalCode: e.target.value }), placeholder: "Postal code", required: true, className: "elvix-input" }),
-      /* @__PURE__ */ jsx17("input", { value: form.city, onChange: (e) => setForm({ ...form, city: e.target.value }), placeholder: "City", required: true, className: "elvix-input" }),
-      /* @__PURE__ */ jsx17("input", { value: form.country, onChange: (e) => setForm({ ...form, country: e.target.value.toUpperCase() }), placeholder: "Country (ISO-2)", maxLength: 2, required: true, className: "elvix-input" }),
-      /* @__PURE__ */ jsx17("button", { type: "submit", disabled: busy, className: "elvix-btn elvix-btn-primary", children: busy ? "Saving\u2026" : "Save" })
+    !adding && /* @__PURE__ */ jsx18("button", { type: "button", onClick: () => setAdding(true), className: "elvix-btn elvix-btn-primary", style: { marginTop: 12 }, children: "Add address" }),
+    adding && /* @__PURE__ */ jsxs17("form", { onSubmit: add, className: "elvix-form", style: { marginTop: 12 }, children: [
+      /* @__PURE__ */ jsx18("input", { value: form.label, onChange: (e) => setForm({ ...form, label: e.target.value }), placeholder: "Label", className: "elvix-input" }),
+      /* @__PURE__ */ jsx18("input", { value: form.line1, onChange: (e) => setForm({ ...form, line1: e.target.value }), placeholder: "Street", required: true, className: "elvix-input" }),
+      /* @__PURE__ */ jsx18("input", { value: form.postalCode, onChange: (e) => setForm({ ...form, postalCode: e.target.value }), placeholder: "Postal code", required: true, className: "elvix-input" }),
+      /* @__PURE__ */ jsx18("input", { value: form.city, onChange: (e) => setForm({ ...form, city: e.target.value }), placeholder: "City", required: true, className: "elvix-input" }),
+      /* @__PURE__ */ jsx18("input", { value: form.country, onChange: (e) => setForm({ ...form, country: e.target.value.toUpperCase() }), placeholder: "Country (ISO-2)", maxLength: 2, required: true, className: "elvix-input" }),
+      /* @__PURE__ */ jsx18("button", { type: "submit", disabled: busy, className: "elvix-btn elvix-btn-primary", children: busy ? "Saving\u2026" : "Save" })
     ] })
   ] });
 }
 
 // src/react/elvix-legal-entities.tsx
-import { useEffect as useEffect6, useState as useState16 } from "react";
-import { jsx as jsx18, jsxs as jsxs17 } from "react/jsx-runtime";
+import { useEffect as useEffect6, useState as useState17 } from "react";
+import { jsx as jsx19, jsxs as jsxs18 } from "react/jsx-runtime";
 function ElvixLegalEntities({
-  onResult
+  onResult,
+  width,
+  height,
+  minWidth,
+  maxWidth,
+  minHeight,
+  maxHeight
 }) {
+  const sizeProps = { width, height, minWidth, maxWidth, minHeight, maxHeight };
   const ctx = useElvixContext();
-  const [rows, setRows] = useState16(null);
-  const [error, setError] = useState16(null);
-  const [busy, setBusy] = useState16(false);
-  const [adding, setAdding] = useState16(false);
-  const [form, setForm] = useState16({
+  const [rows, setRows] = useState17(null);
+  const [error, setError] = useState17(null);
+  const [busy, setBusy] = useState17(false);
+  const [adding, setAdding] = useState17(false);
+  const [form, setForm] = useState17({
     legalName: "",
     taxId: "",
     country: ""
@@ -1405,27 +2105,27 @@ function ElvixLegalEntities({
     if (result.ok) setRows((prev) => prev?.filter((a) => a.id !== id) ?? null);
     onResult?.(result);
   }
-  return /* @__PURE__ */ jsxs17(ElvixCard, { title: "Legal entities", children: [
-    error && /* @__PURE__ */ jsx18("p", { role: "alert", className: "elvix-error", children: error }),
-    !rows && !error && /* @__PURE__ */ jsx18("p", { children: "Loading\u2026" }),
-    rows && rows.length === 0 && /* @__PURE__ */ jsx18("p", { className: "elvix-muted", children: "No legal entities yet." }),
-    rows?.map((e) => /* @__PURE__ */ jsxs17("div", { style: { padding: "8px 0", borderBottom: "1px solid rgba(0,0,0,0.06)", display: "flex", justifyContent: "space-between", gap: 12 }, children: [
-      /* @__PURE__ */ jsxs17("div", { style: { fontSize: 13 }, children: [
-        /* @__PURE__ */ jsx18("div", { style: { fontWeight: 500 }, children: e.legalName }),
-        /* @__PURE__ */ jsxs17("div", { style: { color: "rgba(0,0,0,0.55)" }, children: [
+  return /* @__PURE__ */ jsxs18(ElvixCard, { title: "Legal entities", ...sizeProps, children: [
+    error && /* @__PURE__ */ jsx19("p", { role: "alert", className: "elvix-error", children: error }),
+    !rows && !error && /* @__PURE__ */ jsx19("p", { children: "Loading\u2026" }),
+    rows && rows.length === 0 && /* @__PURE__ */ jsx19("p", { className: "elvix-muted", children: "No legal entities yet." }),
+    rows?.map((e) => /* @__PURE__ */ jsxs18("div", { style: { padding: "8px 0", borderBottom: "1px solid rgba(0,0,0,0.06)", display: "flex", justifyContent: "space-between", gap: 12 }, children: [
+      /* @__PURE__ */ jsxs18("div", { style: { fontSize: 13 }, children: [
+        /* @__PURE__ */ jsx19("div", { style: { fontWeight: 500 }, children: e.legalName }),
+        /* @__PURE__ */ jsxs18("div", { style: { color: "rgba(0,0,0,0.55)" }, children: [
           e.taxId,
           " \xB7 ",
           e.country
         ] })
       ] }),
-      /* @__PURE__ */ jsx18("button", { type: "button", disabled: busy, onClick: () => remove(e.id), className: "elvix-btn elvix-btn-ghost", children: "Remove" })
+      /* @__PURE__ */ jsx19("button", { type: "button", disabled: busy, onClick: () => remove(e.id), className: "elvix-btn elvix-btn-ghost", children: "Remove" })
     ] }, e.id)),
-    !adding && /* @__PURE__ */ jsx18("button", { type: "button", onClick: () => setAdding(true), className: "elvix-btn elvix-btn-primary", style: { marginTop: 12 }, children: "Add entity" }),
-    adding && /* @__PURE__ */ jsxs17("form", { onSubmit: add, className: "elvix-form", style: { marginTop: 12 }, children: [
-      /* @__PURE__ */ jsx18("input", { value: form.legalName, onChange: (e) => setForm({ ...form, legalName: e.target.value }), placeholder: "Legal name", required: true, className: "elvix-input" }),
-      /* @__PURE__ */ jsx18("input", { value: form.taxId, onChange: (e) => setForm({ ...form, taxId: e.target.value }), placeholder: "Tax / VAT ID", required: true, className: "elvix-input" }),
-      /* @__PURE__ */ jsx18("input", { value: form.country, onChange: (e) => setForm({ ...form, country: e.target.value.toUpperCase() }), placeholder: "Country (ISO-2)", maxLength: 2, required: true, className: "elvix-input" }),
-      /* @__PURE__ */ jsx18("button", { type: "submit", disabled: busy, className: "elvix-btn elvix-btn-primary", children: busy ? "Saving\u2026" : "Save" })
+    !adding && /* @__PURE__ */ jsx19("button", { type: "button", onClick: () => setAdding(true), className: "elvix-btn elvix-btn-primary", style: { marginTop: 12 }, children: "Add entity" }),
+    adding && /* @__PURE__ */ jsxs18("form", { onSubmit: add, className: "elvix-form", style: { marginTop: 12 }, children: [
+      /* @__PURE__ */ jsx19("input", { value: form.legalName, onChange: (e) => setForm({ ...form, legalName: e.target.value }), placeholder: "Legal name", required: true, className: "elvix-input" }),
+      /* @__PURE__ */ jsx19("input", { value: form.taxId, onChange: (e) => setForm({ ...form, taxId: e.target.value }), placeholder: "Tax / VAT ID", required: true, className: "elvix-input" }),
+      /* @__PURE__ */ jsx19("input", { value: form.country, onChange: (e) => setForm({ ...form, country: e.target.value.toUpperCase() }), placeholder: "Country (ISO-2)", maxLength: 2, required: true, className: "elvix-input" }),
+      /* @__PURE__ */ jsx19("button", { type: "submit", disabled: busy, className: "elvix-btn elvix-btn-primary", children: busy ? "Saving\u2026" : "Save" })
     ] })
   ] });
 }
@@ -1448,6 +2148,7 @@ export {
   ElvixSessions,
   ElvixSignIn,
   ElvixSignInButton,
+  ElvixSignInForm,
   ElvixUsername,
   getElvixToken,
   setElvixToken,