@elvix.is/sdk 0.5.1 → 0.5.3

package/dist/react.d.ts

@@ -20,11 +20,59 @@ declare function ElvixCard({ title, footer, className, children, }: {
     children: ReactNode;
 }): react.JSX.Element;
 
+/**
+ * Editable sign-in copy.
+ *
+ * Every user-facing string in the sign-in surface is overridable. Precedence,
+ * lowest to highest:
+ *
+ *   built-in English defaults  <  Console-configured (bootstrap `strings`)  <  `copy` prop
+ *
+ * So an integrating developer edits copy in the elvix Console (no redeploy) and
+ * can still override per-embed in code. `title` and `submitButton` are left out
+ * of the defaults because their built-in value depends on the Application's
+ * sign-in verb ("Sign in" vs "Log in"); the component fills them from the verb
+ * when neither Console nor prop sets them.
+ *
+ * Strings may contain `{app}` / `{email}` tokens; `fillCopy` interpolates them.
+ */
+type ElvixCopy = {
+    /** Heading. Token: {app}. Built-in: "Sign in to {app}" / "Log in to {app}". */
+    title?: string;
+    /** Subtitle under the heading. */
+    subtitle?: string;
+    /** Google factor button. */
+    googleButton?: string;
+    /** Email field placeholder. */
+    emailPlaceholder?: string;
+    /** Email submit button (identify step). */
+    sendCodeButton?: string;
+    /** Email submit button while the request is in flight. */
+    sendingLabel?: string;
+    /** Code step subtitle. Token: {email}. */
+    codeSentSubtitle?: string;
+    /** OTP field placeholder. */
+    codePlaceholder?: string;
+    /** OTP submit button. Built-in: the sign-in verb. */
+    submitButton?: string;
+    /** OTP submit button while verifying. */
+    verifyingLabel?: string;
+    /** Terminal "done" pane text. */
+    signedInText?: string;
+    /** Validation: empty email. */
+    errorEnterEmail?: string;
+    /** Validation: code not 6 digits. */
+    errorEnterCode?: string;
+};
+/** Built-in English defaults for the verb-independent strings. */
+declare const DEFAULT_COPY: ElvixCopy;
+
 /**
  * Public types for the React surface. Mirrors the elvix.is bootstrap
  * envelope so customers can type their host code without importing
  * private elvix internals.
  */
+
 type ElvixBrand = {
     light: {
         primary: string;
@@ -36,6 +84,12 @@ type ElvixBrand = {
     };
 };
 type ElvixSignInMethod = "google" | "email_otp" | "passkey" | "username";
+/**
+ * The public render envelope `GET /api/v1/bootstrap/<clientId>` returns. Flat
+ * to match the wire shape exactly (the provider builds the {light,dark} brand
+ * chord from the colour fields). Any field here is already public — it's what
+ * the sign-in surface shows.
+ */
 type ElvixBootstrapEnvelope = {
     applicationId: string;
     clientId: string;
@@ -45,21 +99,34 @@ type ElvixBootstrapEnvelope = {
     logoUrlDark: string | null;
     iconUrl: string | null;
     iconUrlDark: string | null;
-    brand: ElvixBrand;
-    methods: {
-        google: boolean;
-        emailOtp: boolean;
-        passkey: boolean;
-        username: boolean;
-    };
-    legal: {
-        privacyPolicyUrl: string;
-        termsOfServiceUrl: string;
-        supportEmail: string;
-        supportUrl: string | null;
-    };
+    websiteUrl: string | null;
+    privacyPolicyUrl: string;
+    termsOfServiceUrl: string;
+    supportUrl: string | null;
+    brandColor: string;
+    brandColorDark: string | null;
+    onBrandColor: string;
+    onBrandColorDark: string | null;
+    brandPreset: string;
+    methodGoogle: boolean;
+    methodEmailOtp: boolean;
+    methodPasskey: boolean;
+    methodUsername: boolean;
+    layout: string;
+    socialLayout: string;
+    presentation: string;
+    theme: "light" | "dark" | "system";
+    showHeader: boolean;
+    transparentBg: boolean;
     signInVerb: "signin" | "login";
     signinGate: "public" | "private_beta" | "closed";
+    archivedAt: string | null;
+    /**
+     * Console-configured sign-in copy overrides. Any subset of the strings the
+     * sign-in surface renders; missing keys fall back to the built-in English
+     * defaults. A `copy` prop on the component overrides these in turn.
+     */
+    strings?: Partial<ElvixCopy>;
 };
 type ElvixSignInResultOk = {
     ok: true;
@@ -119,13 +186,63 @@ declare function ElvixProvider({ clientId, theme, brand, baseUrl, children, clas
  * exposes. Hosts navigate from the callback; this component never
  * calls `router.push` itself.
  */
-declare function ElvixSignIn({ onResult, redirectAfterSignIn, className, }: {
+declare function ElvixSignIn({ onResult, redirectAfterSignIn, copy: copyProp, className, }: {
     onResult?: (r: ElvixSignInResult) => void;
     /** Default redirect target on success when the server doesn't echo one. */
     redirectAfterSignIn?: string;
+    /**
+     * Thin per-embed copy override. The primary way to edit copy is the elvix
+     * Console (served live in the bootstrap `strings`); this prop just lets a
+     * single embed tweak a string or two without a Console change.
+     */
+    copy?: Partial<ElvixCopy>;
     className?: string;
 }): react.JSX.Element;
 
+type ElvixSignInButtonSize = "sm" | "md" | "lg";
+type ElvixSignInButtonTheme = "light" | "dark" | "auto";
+type ElvixSignInButtonVariant = "filled" | "filled-black" | "white" | "outline" | "ghost";
+type ElvixSignInButtonShape = "rectangle" | "pill" | "square" | "circle";
+type ElvixSignInButtonType = "standard" | "icon";
+type ElvixSignInButtonMode = "redirect" | "callback" | "embed";
+type ElvixSignInPreset = "sign-in-with-elvix" | "continue-with-elvix" | "sign-up-with-elvix" | "sign-in" | "log-in" | "continue";
+type ElvixSignInButtonProps = {
+    clientId?: string;
+    /** elvix origin for redirect mode. Defaults to https://elvix.is. */
+    baseUrl?: string;
+    returnUrl?: string;
+    type?: ElvixSignInButtonType;
+    variant?: ElvixSignInButtonVariant;
+    shape?: ElvixSignInButtonShape;
+    size?: ElvixSignInButtonSize;
+    theme?: ElvixSignInButtonTheme;
+    preset?: ElvixSignInPreset;
+    label?: string;
+    className?: string;
+    href?: string;
+    mode?: ElvixSignInButtonMode;
+    onClick?: () => void;
+    /** Terminal outcome of mode="embed": success (with token) or error. */
+    onResult?: (result: ElvixSignInResult) => void;
+};
+declare function ElvixSignInButton({ clientId, baseUrl, returnUrl, type, variant, shape, size, theme, preset, label, className, href, mode, onClick, onResult, }: ElvixSignInButtonProps): react.JSX.Element;
+
+type ElvixSecuredBadgeVariant = "white" | "dark" | "outline";
+type ElvixSecuredBadgeSize = "sm" | "md" | "lg";
+type ElvixSecuredBadgeTheme = "light" | "dark";
+type ElvixSecuredBadgeProps = {
+    variant?: ElvixSecuredBadgeVariant;
+    size?: ElvixSecuredBadgeSize;
+    /** Which side of the colour wheel the host page is on (for the outline variant). */
+    theme?: ElvixSecuredBadgeTheme;
+    /** Active-protection dot colour. Defaults to brand lavender. */
+    accentColor?: string;
+    /** Where the badge links. Defaults to elvix. */
+    href?: string;
+    className?: string;
+};
+declare function ElvixSecuredBadge({ variant, size, theme, accentColor, href, className, }: ElvixSecuredBadgeProps): react.JSX.Element;
+
 /**
  * Session token store for cross-origin SDK use.
  *
@@ -280,4 +397,4 @@ declare function ElvixLegalEntities({ onResult, }: {
     onResult?: (r: ElvixActionResult) => void;
 }): react.JSX.Element;
 
-export { ElvixActionResult, ElvixAddressBook, ElvixAvatar, ElvixBanner, type ElvixBootstrapEnvelope, type ElvixBrand, ElvixCard, ElvixDeactivate, ElvixExport, ElvixIdentityForm, ElvixLanguages, ElvixLeave, ElvixLegalEntities, ElvixLifecycleWatcher, ElvixProvider, ElvixRegion, ElvixSessions, ElvixSignIn, type ElvixSignInMethod, type ElvixSignInResult, type ElvixSignInResultErr, type ElvixSignInResultOk, type ElvixTheme, ElvixUsername, type UseUserListResult, getElvixToken, setElvixToken, useElvixApp, useElvixContext, useUserMemberships, useUserRoles, useUserScopes };
+export { DEFAULT_COPY, ElvixActionResult, ElvixAddressBook, ElvixAvatar, ElvixBanner, type ElvixBootstrapEnvelope, type ElvixBrand, ElvixCard, type ElvixCopy, ElvixDeactivate, ElvixExport, ElvixIdentityForm, ElvixLanguages, ElvixLeave, ElvixLegalEntities, ElvixLifecycleWatcher, ElvixProvider, ElvixRegion, ElvixSecuredBadge, ElvixSessions, ElvixSignIn, ElvixSignInButton, type ElvixSignInMethod, type ElvixSignInResult, type ElvixSignInResultErr, type ElvixSignInResultOk, type ElvixTheme, ElvixUsername, type UseUserListResult, getElvixToken, setElvixToken, useElvixApp, useElvixContext, useUserMemberships, useUserRoles, useUserScopes };

package/dist/react.js

@@ -151,8 +151,14 @@ function ElvixProvider({
   ));
 }
 function appBrand(app) {
-  if (!app?.brand) return null;
-  return app.brand;
+  if (!app?.brandColor) return null;
+  return {
+    light: { primary: app.brandColor, on: app.onBrandColor },
+    dark: {
+      primary: app.brandColorDark ?? app.brandColor,
+      on: app.onBrandColorDark ?? app.onBrandColor
+    }
+  };
 }
 function withAlpha(hex, a) {
   const m = /^#?([0-9a-f]{6})$/i.exec(hex.trim());
@@ -167,6 +173,42 @@ function withAlpha(hex, a) {
 // src/react/elvix-sign-in.tsx
 import { useState as useState2 } from "react";
 
+// src/react/copy.ts
+var DEFAULT_COPY = {
+  subtitle: "Pick how you want to continue.",
+  googleButton: "Continue with Google",
+  emailPlaceholder: "you@example.com",
+  sendCodeButton: "Send code",
+  sendingLabel: "Sending\u2026",
+  codeSentSubtitle: "We sent a 6-digit code to {email}.",
+  codePlaceholder: "123456",
+  verifyingLabel: "Verifying\u2026",
+  signedInText: "Signed in.",
+  errorEnterEmail: "Enter an email.",
+  errorEnterCode: "Enter the 6-digit code."
+};
+function resolveCopy(bootstrap, prop) {
+  return {
+    ...DEFAULT_COPY,
+    ...stripUndefined(bootstrap),
+    ...stripUndefined(prop)
+  };
+}
+function fillCopy(template, tokens) {
+  return template.replace(
+    /\{(\w+)\}/g,
+    (whole, key) => key in tokens ? tokens[key] : whole
+  );
+}
+function stripUndefined(o) {
+  if (!o) return {};
+  const out = {};
+  for (const [k, v] of Object.entries(o)) {
+    if (v !== void 0) out[k] = v;
+  }
+  return out;
+}
+
 // src/react/session.ts
 var STORAGE_KEY = "elvix.session.token";
 var memToken = null;
@@ -207,10 +249,12 @@ function isSameOrigin(baseUrl) {
 function ElvixSignIn({
   onResult,
   redirectAfterSignIn,
+  copy: copyProp,
   className = ""
 }) {
   const ctx = useElvixContext();
   const app = useElvixApp();
+  const copy = resolveCopy(app?.strings, copyProp);
   const [step, setStep] = useState2("identify");
   const [email, setEmail] = useState2("");
   const [code, setCode] = useState2("");
@@ -218,6 +262,9 @@ function ElvixSignIn({
   const [busy, setBusy] = useState2(false);
   const [error, setError] = useState2(null);
   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;
   function fail(error2, message) {
     setError(message ?? error2);
     onResult?.({ ok: false, error: error2, message });
@@ -230,7 +277,7 @@ function ElvixSignIn({
   }
   async function startOtp(e) {
     e.preventDefault();
-    if (!email.trim()) return fail("invalid_input", "Enter an email.");
+    if (!email.trim()) return fail("invalid_input", copy.errorEnterEmail);
     setBusy(true);
     setError(null);
     try {
@@ -259,7 +306,7 @@ function ElvixSignIn({
   async function verifyOtp(e) {
     e.preventDefault();
     if (!challengeId) return;
-    if (code.trim().length !== 6) return fail("invalid_input", "Enter the 6-digit code.");
+    if (code.trim().length !== 6) return fail("invalid_input", copy.errorEnterCode);
     setBusy(true);
     setError(null);
     try {
@@ -289,9 +336,9 @@ function ElvixSignIn({
   }
   const card = `elvix-card ${className}`.trim();
   if (step === "done") {
-    return /* @__PURE__ */ React.createElement("div", { className: card, "data-elvix-pane": "done" }, /* @__PURE__ */ React.createElement("p", null, "Signed in."));
+    return /* @__PURE__ */ React.createElement("div", { className: card, "data-elvix-pane": "done" }, /* @__PURE__ */ React.createElement("p", null, copy.signedInText));
   }
-  return /* @__PURE__ */ React.createElement("div", { className: card, "data-elvix-pane": step }, /* @__PURE__ */ React.createElement("h2", { className: "elvix-h" }, app?.appName ? `${verb} to ${app.appName}` : verb), step === "identify" && /* @__PURE__ */ React.createElement(React.Fragment, null, app?.methods.google && /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement("div", { className: card, "data-elvix-pane": step }, /* @__PURE__ */ React.createElement("h2", { className: "elvix-h" }, title), copy.subtitle && /* @__PURE__ */ React.createElement("p", { className: "elvix-muted elvix-subtitle" }, copy.subtitle), step === "identify" && /* @__PURE__ */ React.createElement(React.Fragment, null, app?.methodGoogle && /* @__PURE__ */ React.createElement(
     "button",
     {
       type: "button",
@@ -300,19 +347,19 @@ function ElvixSignIn({
       className: "elvix-btn elvix-btn-google",
       "data-elvix-method": "google"
     },
-    "Continue with Google"
-  ), app?.methods.emailOtp && /* @__PURE__ */ React.createElement("form", { onSubmit: startOtp, "data-elvix-method": "email_otp", className: "elvix-otp-form" }, /* @__PURE__ */ React.createElement(
+    copy.googleButton
+  ), app?.methodEmailOtp && /* @__PURE__ */ React.createElement("form", { onSubmit: startOtp, "data-elvix-method": "email_otp", className: "elvix-otp-form" }, /* @__PURE__ */ React.createElement(
     "input",
     {
       type: "email",
       value: email,
       onChange: (ev) => setEmail(ev.target.value),
-      placeholder: "you@example.com",
+      placeholder: copy.emailPlaceholder,
       required: true,
       disabled: busy,
       className: "elvix-input"
     }
-  ), /* @__PURE__ */ React.createElement("button", { type: "submit", disabled: busy, className: "elvix-btn elvix-btn-primary" }, busy ? "Sending\u2026" : "Send code"))), step === "code" && /* @__PURE__ */ React.createElement("form", { onSubmit: verifyOtp, className: "elvix-otp-form" }, /* @__PURE__ */ React.createElement("p", { className: "elvix-muted" }, "We sent a 6-digit code to ", /* @__PURE__ */ React.createElement("strong", null, email), "."), /* @__PURE__ */ React.createElement(
+  ), /* @__PURE__ */ React.createElement("button", { type: "submit", disabled: busy, className: "elvix-btn elvix-btn-primary" }, busy ? copy.sendingLabel : copy.sendCodeButton))), step === "code" && /* @__PURE__ */ React.createElement("form", { onSubmit: verifyOtp, className: "elvix-otp-form" }, /* @__PURE__ */ React.createElement("p", { className: "elvix-muted" }, fillCopy(copy.codeSentSubtitle ?? "", { email })), /* @__PURE__ */ React.createElement(
     "input",
     {
       type: "text",
@@ -321,22 +368,216 @@ function ElvixSignIn({
       maxLength: 6,
       value: code,
       onChange: (ev) => setCode(ev.target.value.replace(/\D/g, "")),
-      placeholder: "123456",
+      placeholder: copy.codePlaceholder,
       required: true,
       disabled: busy,
       className: "elvix-input"
     }
-  ), /* @__PURE__ */ React.createElement("button", { type: "submit", disabled: busy, className: "elvix-btn elvix-btn-primary" }, busy ? "Verifying\u2026" : verb)), error && /* @__PURE__ */ React.createElement("p", { role: "alert", className: "elvix-error" }, error));
+  ), /* @__PURE__ */ React.createElement("button", { type: "submit", disabled: busy, className: "elvix-btn elvix-btn-primary" }, busy ? copy.verifyingLabel : submitLabel)), error && /* @__PURE__ */ React.createElement("p", { role: "alert", className: "elvix-error" }, error));
+}
+
+// src/react/elvix-sign-in-button.tsx
+import { useState as useState3 } from "react";
+
+// src/react/elvix-shield.tsx
+function ElvixShield({
+  size,
+  fill,
+  accent
+}) {
+  return /* @__PURE__ */ React.createElement("svg", { width: size, height: size, viewBox: "2 2 20 20", "aria-hidden": true, style: { display: "block" } }, /* @__PURE__ */ React.createElement(
+    "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__ */ React.createElement("circle", { cx: "19.5", cy: "4.5", r: "2.4", fill: accent }));
+}
+
+// src/react/elvix-sign-in-button.tsx
+var ELVIX_URL = "https://elvix.is";
+var PRESET_LABEL = {
+  "sign-in-with-elvix": "Sign in with elvix",
+  "continue-with-elvix": "Continue with elvix",
+  "sign-up-with-elvix": "Sign up with elvix",
+  "sign-in": "Sign in",
+  "log-in": "Log in",
+  continue: "Continue"
+};
+var SIZE_STANDARD = {
+  sm: { height: 36, padX: 12, font: 14, gap: 8 },
+  md: { height: 40, padX: 12, font: 14, gap: 10 },
+  lg: { height: 48, padX: 16, font: 15, gap: 12 }
+};
+var SIZE_ICON = { sm: 36, md: 40, lg: 48 };
+var ICON_SIZE = { sm: 18, md: 20, lg: 22 };
+var RADIUS = { rectangle: 10, pill: 9999, square: 10, circle: 9999 };
+function variantTone(variant, theme) {
+  const dark = theme === "dark" || theme === "auto";
+  switch (variant) {
+    case "filled":
+      return { bg: "#6c5ce7", color: "#fff", border: "1px solid rgba(0,0,0,0.1)", shadow: "0 4px 16px -4px rgba(108,92,231,0.45)" };
+    case "filled-black":
+      return { bg: "#0a0a0b", color: "#fff", border: `1px solid ${dark ? "rgba(255,255,255,0.12)" : "rgba(0,0,0,0.1)"}` };
+    case "white":
+      return { bg: "#fff", color: "#0a0a0b", border: `1px solid ${dark ? "transparent" : "#e4e4e7"}` };
+    case "outline":
+      return dark ? { bg: "transparent", color: "#fff", border: "1px solid rgba(142,125,255,0.4)" } : { bg: "#fff", color: "#0a0a0b", border: "1px solid rgba(0,0,0,0.15)" };
+    case "ghost":
+      return { bg: "transparent", color: dark ? "#fff" : "#0a0a0b", border: "1px solid transparent" };
+  }
+}
+function shieldColor(variant, theme) {
+  if (variant === "filled" || variant === "filled-black") return "#ffffff";
+  if (variant === "white") return "#0a0a0b";
+  return theme === "light" ? "#0a0a0b" : "#ffffff";
+}
+function ElvixSignInButton({
+  clientId,
+  baseUrl = ELVIX_URL,
+  returnUrl,
+  type = "standard",
+  variant = "filled",
+  shape = "rectangle",
+  size = "md",
+  theme = "dark",
+  preset = "sign-in-with-elvix",
+  label,
+  className,
+  href,
+  mode = "redirect",
+  onClick,
+  onResult
+}) {
+  const [embedOpen, setEmbedOpen] = useState3(false);
+  const isIcon = type === "icon";
+  const resolvedLabel = label ?? PRESET_LABEL[preset];
+  const tone = variantTone(variant, theme);
+  const std = SIZE_STANDARD[size];
+  const effectiveShape = isIcon ? shape === "pill" || shape === "circle" ? "circle" : "square" : shape;
+  const style = {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    fontWeight: 500,
+    fontSize: std.font,
+    cursor: "pointer",
+    userSelect: "none",
+    textDecoration: "none",
+    borderRadius: RADIUS[effectiveShape],
+    background: tone.bg,
+    color: tone.color,
+    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 }
+  };
+  const content = /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(ElvixShield, { size: ICON_SIZE[size], fill: shieldColor(variant, theme), accent: "#8e7dff" }), isIcon ? null : /* @__PURE__ */ React.createElement("span", null, resolvedLabel));
+  if (mode === "callback") {
+    return /* @__PURE__ */ React.createElement("button", { type: "button", onClick, className, style, "aria-label": isIcon ? resolvedLabel : void 0 }, content);
+  }
+  if (mode === "embed") {
+    return /* @__PURE__ */ React.createElement("div", { "data-elvix-signin-button-embed": "" }, !embedOpen && /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        type: "button",
+        onClick: () => setEmbedOpen(true),
+        className,
+        style,
+        "aria-label": isIcon ? resolvedLabel : void 0
+      },
+      content
+    ), embedOpen && /* @__PURE__ */ React.createElement(
+      ElvixSignIn,
+      {
+        onResult: (r) => {
+          onResult?.(r);
+        }
+      }
+    ));
+  }
+  const destination = (() => {
+    if (href) return href;
+    const base = clientId ? `${baseUrl}/sign-in/${clientId}` : `${baseUrl}/sign-in`;
+    if (!returnUrl) return base;
+    const sep = base.includes("?") ? "&" : "?";
+    return `${base}${sep}return=${encodeURIComponent(returnUrl)}`;
+  })();
+  return /* @__PURE__ */ React.createElement("a", { href: destination, className, style, "aria-label": isIcon ? resolvedLabel : void 0 }, content);
+}
+
+// src/react/elvix-secured-badge.tsx
+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__ */ React.createElement(
+    "a",
+    {
+      href,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      className,
+      style,
+      "data-elvix-secured-badge": ""
+    },
+    /* @__PURE__ */ React.createElement(ElvixShield, { size: s.icon, fill: t.shield, accent: accentColor }),
+    /* @__PURE__ */ React.createElement("span", { style: { display: "inline-flex", alignItems: "baseline", gap: 4 } }, /* @__PURE__ */ React.createElement("span", { style: { color: t.lead } }, "Secured by"), /* @__PURE__ */ React.createElement("span", { style: { color: t.brand, fontWeight: 600 } }, "elvix"))
+  );
 }
 
 // src/react/hooks.ts
-import { useCallback, useEffect as useEffect2, useState as useState3 } from "react";
+import { useCallback, useEffect as useEffect2, useState as useState4 } from "react";
 var POLL_MS = 7e3;
 function useUserList(kind, opts) {
   const { applicationId, baseUrl = "", pollMs = POLL_MS } = opts;
-  const [slugs, setSlugs] = useState3([]);
-  const [loading, setLoading] = useState3(true);
-  const [error, setError] = useState3(null);
+  const [slugs, setSlugs] = useState4([]);
+  const [loading, setLoading] = useState4(true);
+  const [error, setError] = useState4(null);
   const refresh = useCallback(async () => {
     setError(null);
     try {
@@ -403,7 +644,7 @@ function ElvixLifecycleWatcher({
 }
 
 // src/react/elvix-username.tsx
-import { useState as useState4 } from "react";
+import { useState as useState5 } from "react";
 
 // src/react/lib.ts
 async function appPost(opts, path, body) {
@@ -465,10 +706,10 @@ function ElvixUsername({
   onResult
 }) {
   const ctx = useElvixContext();
-  const [value, setValue] = useState4("");
-  const [busy, setBusy] = useState4(false);
-  const [error, setError] = useState4(null);
-  const [done, setDone] = useState4(null);
+  const [value, setValue] = useState5("");
+  const [busy, setBusy] = useState5(false);
+  const [error, setError] = useState5(null);
+  const [done, setDone] = useState5(null);
   async function submit(e) {
     e.preventDefault();
     if (!ctx.app) return;
@@ -506,14 +747,14 @@ function ElvixUsername({
 }
 
 // src/react/elvix-avatar.tsx
-import { useState as useState5 } from "react";
+import { useState as useState6 } from "react";
 function ElvixAvatar({
   onResult
 }) {
   const ctx = useElvixContext();
-  const [busy, setBusy] = useState5(false);
-  const [error, setError] = useState5(null);
-  const [preview, setPreview] = useState5(null);
+  const [busy, setBusy] = useState6(false);
+  const [error, setError] = useState6(null);
+  const [preview, setPreview] = useState6(null);
   async function onFile(e) {
     const file = e.target.files?.[0];
     if (!file || !ctx.app) return;
@@ -547,14 +788,14 @@ function ElvixAvatar({
 }
 
 // src/react/elvix-banner.tsx
-import { useState as useState6 } from "react";
+import { useState as useState7 } from "react";
 function ElvixBanner({
   onResult
 }) {
   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;
@@ -588,18 +829,18 @@ function ElvixBanner({
 }
 
 // src/react/elvix-identity-form.tsx
-import { useState as useState7 } from "react";
+import { useState as useState8 } from "react";
 function ElvixIdentityForm({
   initialName = "",
   initialBio = "",
   onResult
 }) {
   const ctx = useElvixContext();
-  const [name, setName] = useState7(initialName);
-  const [bio, setBio] = useState7(initialBio);
-  const [busy, setBusy] = useState7(false);
-  const [error, setError] = useState7(null);
-  const [saved, setSaved] = useState7(false);
+  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);
   async function submit(e) {
     e.preventDefault();
     if (!ctx.app) return;
@@ -619,18 +860,18 @@ function ElvixIdentityForm({
 }
 
 // src/react/elvix-region.tsx
-import { useState as useState8 } from "react";
+import { useState as useState9 } from "react";
 function ElvixRegion({
   initialCountry = "",
   initialTimezone = "",
   onResult
 }) {
   const ctx = useElvixContext();
-  const [country, setCountry] = useState8(initialCountry);
-  const [timezone, setTimezone] = useState8(initialTimezone);
-  const [busy, setBusy] = useState8(false);
-  const [error, setError] = useState8(null);
-  const [saved, setSaved] = useState8(false);
+  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);
   async function submit(e) {
     e.preventDefault();
     if (!ctx.app) return;
@@ -650,16 +891,16 @@ function ElvixRegion({
 }
 
 // src/react/elvix-languages.tsx
-import { useState as useState9 } from "react";
+import { useState as useState10 } from "react";
 function ElvixLanguages({
   initial = [],
   onResult
 }) {
   const ctx = useElvixContext();
-  const [raw, setRaw] = useState9(initial.join(", "));
-  const [busy, setBusy] = useState9(false);
-  const [error, setError] = useState9(null);
-  const [saved, setSaved] = useState9(false);
+  const [raw, setRaw] = useState10(initial.join(", "));
+  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;
@@ -680,14 +921,14 @@ function ElvixLanguages({
 }
 
 // src/react/elvix-sessions.tsx
-import { useEffect as useEffect4, useState as useState10 } from "react";
+import { useEffect as useEffect4, useState as useState11 } from "react";
 function ElvixSessions({
   onResult
 }) {
   const ctx = useElvixContext();
-  const [rows, setRows] = useState10(null);
-  const [error, setError] = useState10(null);
-  const [busy, setBusy] = useState10(false);
+  const [rows, setRows] = useState11(null);
+  const [error, setError] = useState11(null);
+  const [busy, setBusy] = useState11(false);
   useEffect4(() => {
     if (!ctx.app) return;
     fetch(`${ctx.baseUrl}/api/account/apps/${ctx.app.applicationId}/sessions`, {
@@ -712,14 +953,14 @@ function ElvixSessions({
 }
 
 // src/react/elvix-export.tsx
-import { useState as useState11 } from "react";
+import { useState as useState12 } from "react";
 function ElvixExport({
   onResult
 }) {
   const ctx = useElvixContext();
-  const [busy, setBusy] = useState11(false);
-  const [done, setDone] = useState11(false);
-  const [error, setError] = useState11(null);
+  const [busy, setBusy] = useState12(false);
+  const [done, setDone] = useState12(false);
+  const [error, setError] = useState12(null);
   async function start() {
     if (!ctx.app) return;
     setBusy(true);
@@ -738,16 +979,16 @@ function ElvixExport({
 }
 
 // src/react/elvix-deactivate.tsx
-import { useState as useState12 } from "react";
+import { useState as useState13 } from "react";
 function ElvixDeactivate({
   onResult
 }) {
   const ctx = useElvixContext();
-  const [pane, setPane] = useState12("warn");
-  const [challengeId, setChallengeId] = useState12(null);
-  const [code, setCode] = useState12("");
-  const [busy, setBusy] = useState12(false);
-  const [error, setError] = useState12(null);
+  const [pane, setPane] = useState13("warn");
+  const [challengeId, setChallengeId] = useState13(null);
+  const [code, setCode] = useState13("");
+  const [busy, setBusy] = useState13(false);
+  const [error, setError] = useState13(null);
   async function startChallenge() {
     if (!ctx.app) return;
     setBusy(true);
@@ -804,16 +1045,16 @@ function ElvixDeactivate({
 }
 
 // src/react/elvix-leave.tsx
-import { useState as useState13 } from "react";
+import { useState as useState14 } from "react";
 function ElvixLeave({
   onResult
 }) {
   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);
@@ -870,16 +1111,16 @@ function ElvixLeave({
 }
 
 // src/react/elvix-address-book.tsx
-import { useEffect as useEffect5, useState as useState14 } from "react";
+import { useEffect as useEffect5, useState as useState15 } from "react";
 function ElvixAddressBook({
   onResult
 }) {
   const ctx = useElvixContext();
-  const [rows, setRows] = useState14(null);
-  const [error, setError] = useState14(null);
-  const [busy, setBusy] = useState14(false);
-  const [adding, setAdding] = useState14(false);
-  const [form, setForm] = useState14({
+  const [rows, setRows] = useState15(null);
+  const [error, setError] = useState15(null);
+  const [busy, setBusy] = useState15(false);
+  const [adding, setAdding] = useState15(false);
+  const [form, setForm] = useState15({
     label: "Home",
     line1: "",
     postalCode: "",
@@ -932,16 +1173,16 @@ function ElvixAddressBook({
 }
 
 // src/react/elvix-legal-entities.tsx
-import { useEffect as useEffect6, useState as useState15 } from "react";
+import { useEffect as useEffect6, useState as useState16 } from "react";
 function ElvixLegalEntities({
   onResult
 }) {
   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({
     legalName: "",
     taxId: "",
     country: ""
@@ -991,6 +1232,7 @@ function ElvixLegalEntities({
   return /* @__PURE__ */ React.createElement(ElvixCard, { title: "Legal entities" }, error && /* @__PURE__ */ React.createElement("p", { role: "alert", className: "elvix-error" }, error), !rows && !error && /* @__PURE__ */ React.createElement("p", null, "Loading\u2026"), rows && rows.length === 0 && /* @__PURE__ */ React.createElement("p", { className: "elvix-muted" }, "No legal entities yet."), rows?.map((e) => /* @__PURE__ */ React.createElement("div", { key: e.id, style: { padding: "8px 0", borderBottom: "1px solid rgba(0,0,0,0.06)", display: "flex", justifyContent: "space-between", gap: 12 } }, /* @__PURE__ */ React.createElement("div", { style: { fontSize: 13 } }, /* @__PURE__ */ React.createElement("div", { style: { fontWeight: 500 } }, e.legalName), /* @__PURE__ */ React.createElement("div", { style: { color: "rgba(0,0,0,0.55)" } }, e.taxId, " \xB7 ", e.country)), /* @__PURE__ */ React.createElement("button", { type: "button", disabled: busy, onClick: () => remove(e.id), className: "elvix-btn elvix-btn-ghost" }, "Remove"))), !adding && /* @__PURE__ */ React.createElement("button", { type: "button", onClick: () => setAdding(true), className: "elvix-btn elvix-btn-primary", style: { marginTop: 12 } }, "Add entity"), adding && /* @__PURE__ */ React.createElement("form", { onSubmit: add, className: "elvix-form", style: { marginTop: 12 } }, /* @__PURE__ */ React.createElement("input", { value: form.legalName, onChange: (e) => setForm({ ...form, legalName: e.target.value }), placeholder: "Legal name", required: true, className: "elvix-input" }), /* @__PURE__ */ React.createElement("input", { value: form.taxId, onChange: (e) => setForm({ ...form, taxId: e.target.value }), placeholder: "Tax / VAT ID", required: true, className: "elvix-input" }), /* @__PURE__ */ React.createElement("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__ */ React.createElement("button", { type: "submit", disabled: busy, className: "elvix-btn elvix-btn-primary" }, busy ? "Saving\u2026" : "Save")));
 }
 export {
+  DEFAULT_COPY,
   ElvixAddressBook,
   ElvixAvatar,
   ElvixBanner,
@@ -1004,8 +1246,10 @@ export {
   ElvixLifecycleWatcher,
   ElvixProvider,
   ElvixRegion,
+  ElvixSecuredBadge,
   ElvixSessions,
   ElvixSignIn,
+  ElvixSignInButton,
   ElvixUsername,
   getElvixToken,
   setElvixToken,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elvix.is/sdk",
-  "version": "0.5.1",
+  "version": "0.5.3",
   "description": "Official elvix SDK. Drop-in React components, server helpers, and an MCP server so AI coding agents integrate elvix on the first try.",
   "license": "MIT",
   "homepage": "https://elvix.is",