@dbx-tools/ui-email 0.6.46 → 0.6.48

package/README.md

@@ -13,9 +13,12 @@ Key features:
 - Approval card for suspended `send_email` tool calls.
 - Read-only draft preview for review queues, chat transcripts, and test pages.
 - Standalone compose form that emits shared `EmailMessage` payloads.
-- Compact Markdown body renderer shared across preview and compose surfaces.
+- Shared React Email body renderer matching the delivered message.
+- dbx-tools branding by default, with consumer brand overrides available.
 - Recipient parsing, address display, and attachment-label helpers that mirror
   server expectations.
+- `AuthGate` sign-in screen for the email one-time-code auth plugin, branded from
+  the shared brand context and shaped for platform autofill.
 - Styles wired to the AppKit UI/Tailwind foundation so host apps do not need a
   separate email component theme.
 
@@ -46,8 +49,9 @@ const draft = email.emailMessageSchema.parse(toolCall.args);
 ```
 
 `EmailApprovalCard` is the chat-facing component for the `send_email` tool. It
-renders the draft fields, Markdown body, attachment names, and Approve/Deny
-actions while leaving tool-call state and transport decisions to the host app.
+renders the complete branded React Email card, including envelope metadata and
+attachments, plus Approve/Deny actions while leaving tool-call state and
+transport decisions to the host app.
 
 Wire `onApprove` and `onDeny` to the chat framework's tool-result mechanism.
 The component deliberately does not call the email API itself; the server-side
@@ -61,7 +65,7 @@ import { EmailPreview } from "@dbx-tools/ui-email/react";
 <EmailPreview email={draft} />;
 ```
 
-Use `EmailPreview` when a page needs a compact read-only summary without action
+Use `EmailPreview` when a page needs the same full branded card without action
 buttons, such as a review queue, audit log, or test harness.
 
 ## Provide A Compose View
@@ -81,7 +85,7 @@ attached files to base64 email attachments, and emits the assembled
 `EmailMessage`. Fetch sender options and dispatch the final send through the
 server package.
 
-## Render A Markdown Body
+## Render An Email Body
 
 ```tsx
 import { EmailBody } from "@dbx-tools/ui-email/react";
@@ -89,9 +93,10 @@ import { EmailBody } from "@dbx-tools/ui-email/react";
 <EmailBody className="text-sm">{message.body}</EmailBody>;
 ```
 
-`EmailBody` uses Streamdown to render compact Markdown for email text. It is
-shared by the compose preview and approval card so drafts look the same before
-and after submission.
+`EmailBody` reuses `@dbx-tools/shared-email-template`, the same React Email body
+component used by the server renderer. Drafts therefore keep the delivered
+message's typography, rich-content styling, and default brand while they are
+edited and approved.
 
 ## Reuse Field Helpers
 
@@ -106,13 +111,42 @@ const files = attachmentNames(message.attachments);
 The helpers keep free-text recipient parsing and attachment labels consistent
 across approval, compose, and custom UI surfaces.
 
+## Gate An App Behind An Email Code
+
+```tsx
+import { AuthGate } from "@dbx-tools/ui-email/react";
+
+<AuthGate>
+  <App />
+</AuthGate>;
+```
+
+`AuthGate` is the sign-in screen for an app fronted by the `@dbx-tools/email`
+auth plugin - typically one published through
+[`@dbx-tools/cli-tunnel`](../../cli/tunnel), where the hosting platform's own
+identity-aware proxy is not in the request path. It calls the plugin's
+`/api/email/auth/*` routes: on mount it checks `status`, renders `children`
+straight through when the gate is off or a session already exists, and otherwise
+runs the email -> code flow, revealing `children` once a verified code sets the
+session cookie.
+
+It holds no token: the session lives in an HttpOnly cookie the browser sends
+automatically. `title` and `description` override the default copy, which
+otherwise names the app from the brand context.
+
+The code field carries `autocomplete="one-time-code"`, which is what lets iOS,
+Android, and Safari offer the code straight from the notification. That only pays
+off while the email keeps the conventional `Your verification code is: / <code>`
+shape the gate sends, so change one and check the other.
+
 ## Modules
 
 - `./react` - `EmailPreview`, `EmailApprovalCard`, `EmailComposeView`,
-  `EmailBody`, address/attachment helpers, shared email message types, and prop
-  types.
+  `EmailBody`, `AuthGate`, address/attachment helpers, shared email message
+  types, and prop types.
 - `./styles.css` - Tailwind/AppKit style entrypoint for the email components.
 
 Pair this package with [`@dbx-tools/email`](../../node/email) for SMTP or
-outbox delivery, and with [`@dbx-tools/shared-email`](../../shared/email) for
-schema validation in client/server boundaries.
+outbox delivery, [`@dbx-tools/shared-email-template`](../../shared/email-template)
+for the universal presentation, and [`@dbx-tools/shared-email`](../../shared/email)
+for schema validation in client/server boundaries.

package/package.json

@@ -24,19 +24,20 @@
     "typescript": "^5.9.3"
   },
   "dependencies": {
-    "@dbx-tools/shared-core": "0.6.46",
-    "@dbx-tools/shared-email": "0.6.46",
-    "@dbx-tools/ui-appkit": "0.6.46",
+    "@dbx-tools/shared-core": "0.6.48",
+    "@dbx-tools/shared-email": "0.6.48",
+    "@dbx-tools/shared-email-template": "0.6.48",
+    "@dbx-tools/ui-appkit": "0.6.48",
+    "@dbx-tools/ui-branding": "0.6.48",
     "lucide-react": "^0.554.0",
     "react": "^19.2.4",
-    "react-dom": "^19.2.4",
-    "streamdown": "^2.5.0"
+    "react-dom": "^19.2.4"
   },
   "license": "UNLICENSED",
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.6.46",
+  "version": "0.6.48",
   "type": "module",
   "exports": {
     "./react": "./src/react/index.ts",

package/src/react/auth-gate.tsx

@@ -1,12 +1,13 @@
+import { string } from "@dbx-tools/shared-core";
 import type { AuthStatus } from "@dbx-tools/shared-email";
 import { Button, Input } from "@dbx-tools/ui-appkit/react";
-import { MailIcon } from "lucide-react";
+import { BrandIcon, useBrand } from "@dbx-tools/ui-branding/react";
 import { type FormEvent, type ReactNode, useCallback, useEffect, useState } from "react";
 
 /**
- * Email-OTP login gate for an AppKit app fronted by the `@dbx-tools/email` auth
- * plugin (an app exposed publicly, e.g. through a portr tunnel that bypasses the
- * Databricks OAuth proxy).
+ * Email one-time-code sign-in gate for an app fronted by the `@dbx-tools/email`
+ * auth plugin - an app reachable on the public internet, where the hosting
+ * platform's own identity-aware proxy is not in the request path.
  *
  * Wrap the app in `<AuthGate>...</AuthGate>`. It calls the plugin's
  * `/api/email/auth/*` routes: on mount it checks `status`; if the gate is
@@ -17,7 +18,12 @@ import { type FormEvent, type ReactNode, useCallback, useEffect, useState } from
  * Presentational + fetch only: the session lives in an HttpOnly cookie the
  * browser sends automatically, so this component holds no token. Anti-enumeration
  * is server-side (every request-code call reports success), so the UI always
- * advances to the code step after "send code".
+ * advances to the code step after the code is requested.
+ *
+ * Branding comes from the repo-wide `@dbx-tools/ui-branding` context, so the
+ * sign-in screen carries the host app's mark and name - the same brand the gate's
+ * code email is themed with - instead of a generic icon and a hardcoded product
+ * name. With no `BrandProvider` above it, the dbx-tools default context applies.
  */
 
 /** Base path the email auth routes are mounted under. */
@@ -51,6 +57,7 @@ export interface AuthGateProps {
  * off) or the two-step login.
  */
 export function AuthGate({ children, title, description }: AuthGateProps): ReactNode {
+  const { context: brand } = useBrand();
   const [phase, setPhase] = useState<Phase>("loading");
   const [email, setEmail] = useState("");
   const [code, setCode] = useState("");
@@ -90,8 +97,8 @@ export function AuthGate({ children, title, description }: AuthGateProps): React
         // rate-limit cooldown, which leaks no allow-list state.
         setNotice(
           result.retryAfter
-            ? `Please wait ${result.retryAfter}s before requesting another code.`
-            : "If that address is allowed, a code is on its way.",
+            ? `Too many requests. Try again in ${string.pluralize(result.retryAfter, "second")}.`
+            : "If an account exists for that email address, a verification code is on its way.",
         );
         setPhase("code");
       } finally {
@@ -117,8 +124,8 @@ export function AuthGate({ children, title, description }: AuthGateProps): React
         } else {
           setNotice(
             result.retryAfter
-              ? `Too many attempts. Wait ${result.retryAfter}s and request a new code.`
-              : "That code didn't match. Check it or request a new one.",
+              ? `Too many attempts. Try again in ${string.pluralize(result.retryAfter, "second")}.`
+              : "That verification code is incorrect or has expired.",
           );
         }
       } finally {
@@ -135,11 +142,19 @@ export function AuthGate({ children, title, description }: AuthGateProps): React
     <div className="flex min-h-screen items-center justify-center bg-background p-6">
       <div className="w-full max-w-sm rounded-lg border border-border bg-card p-6 shadow-sm">
         <div className="mb-4 flex items-center gap-2 text-foreground">
-          <MailIcon className="size-5" aria-hidden />
-          <h1 className="text-lg font-semibold">{title ?? "Sign in"}</h1>
+          <BrandIcon className="size-5" alt="" aria-hidden />
+          {/*
+            Names the app, which is the convention for a sign-in screen and the
+            reassurance a recipient checks the code against. `brand.name` is the
+            same value that names the app in the code email.
+          */}
+          <h1 className="text-lg font-semibold">{title ?? `Sign in to ${brand.name}`}</h1>
         </div>
         <p className="mb-4 text-sm text-muted-foreground">
-          {description ?? "Enter your email to receive a one-time sign-in code."}
+          {description ??
+            (phase === "code"
+              ? "Enter the 6-digit verification code sent to your email address."
+              : "Enter your email address and we will send you a verification code.")}
         </p>
 
         {phase === "email" ? (
@@ -147,27 +162,37 @@ export function AuthGate({ children, title, description }: AuthGateProps): React
             <Input
               type="email"
               autoComplete="email"
+              aria-label="Email address"
               placeholder="you@company.com"
               value={email}
               onChange={(e) => setEmail(e.target.value)}
               required
             />
             <Button type="submit" disabled={busy} className="w-full">
-              {busy ? "Sending…" : "Send code"}
+              {busy ? "Sending…" : "Send verification code"}
             </Button>
           </form>
         ) : (
           <form onSubmit={verifyCode} className="space-y-3">
+            {/*
+              `autoComplete="one-time-code"` is what lets iOS/Android/Safari offer
+              the code straight from the notification, and it only pays off when
+              the email keeps the conventional "Your verification code is: /
+              <code>" shape the gate sends. `inputMode="numeric"` raises the
+              number pad without rejecting a paste.
+            */}
             <Input
               inputMode="numeric"
               autoComplete="one-time-code"
-              placeholder="6-digit code"
+              aria-label="Verification code"
+              placeholder="6-digit verification code"
+              maxLength={6}
               value={code}
               onChange={(e) => setCode(e.target.value)}
               required
             />
             <Button type="submit" disabled={busy} className="w-full">
-              {busy ? "Verifying…" : "Verify"}
+              {busy ? "Verifying…" : "Continue"}
             </Button>
             <button
               type="button"
@@ -178,12 +203,16 @@ export function AuthGate({ children, title, description }: AuthGateProps): React
                 setNotice(null);
               }}
             >
-              Use a different email
+              Use a different email address
             </button>
           </form>
         )}
 
-        {notice ? <p className="mt-3 text-xs text-muted-foreground">{notice}</p> : null}
+        {notice ? (
+          <p role="status" aria-live="polite" className="mt-3 text-xs text-muted-foreground">
+            {notice}
+          </p>
+        ) : null}
       </div>
     </div>
   );

package/src/react/email-approval-card.tsx

@@ -1,11 +1,11 @@
+import { EmailCard } from "@dbx-tools/shared-email-template";
 import { Button } from "@dbx-tools/ui-appkit/react";
 import { CheckIcon, MailIcon, XIcon } from "lucide-react";
-import { EmailBody } from "./email-body.tsx";
 import { attachmentNames, joinAddresses, type EmailDraft } from "./fields.ts";
 
 // Presentational pieces for an outbound email awaiting a human Approve /
-// Deny: the field preview (To / Cc / Subject / Body / Files, body
-// rendered as markdown) and a self-contained approval card wrapping it.
+// Deny: the field preview (To / Cc / Subject / Body / Files, body rendered
+// through the shared React Email presentation) and an approval card wrapping it.
 // State and the resolve transport belong to the caller; these components
 // only render and report intent. The editable counterpart is
 // `EmailComposeView` in `./email-compose`; both share `./fields` and
@@ -21,48 +21,23 @@ export interface EmailPreviewProps {
 /**
  * Render an email draft as a labelled `To` / `Cc` / `Subject` / `Body` /
  * `Files` list. `to` / `cc` may carry one or more addresses; the body is
- * markdown so links, lists, and emphasis render rather than showing raw
- * syntax. Fields that are empty are omitted.
+ * rendered through the same React Email body used for delivery. Fields that
+ * are empty are omitted.
  */
 export const EmailPreview = ({ email }: EmailPreviewProps) => {
   const to = joinAddresses(email.to);
   const cc = joinAddresses(email.cc);
+  const bcc = joinAddresses(email.bcc);
   const attachments = attachmentNames(email.attachments);
+  const headers: Array<readonly [string, string]> = [];
+  if (to) headers.push(["To", to]);
+  if (cc) headers.push(["Cc", cc]);
+  if (bcc) headers.push(["Bcc", bcc]);
+  if (attachments) headers.push(["Files", attachments]);
   return (
-    <dl className="space-y-1 text-xs">
-      {to && (
-        <div className="flex gap-2">
-          <dt className="w-16 shrink-0 text-muted-foreground">To</dt>
-          <dd className="truncate">{to}</dd>
-        </div>
-      )}
-      {cc && (
-        <div className="flex gap-2">
-          <dt className="w-16 shrink-0 text-muted-foreground">Cc</dt>
-          <dd className="truncate">{cc}</dd>
-        </div>
-      )}
-      {email.subject && (
-        <div className="flex gap-2">
-          <dt className="w-16 shrink-0 text-muted-foreground">Subject</dt>
-          <dd className="truncate font-medium">{email.subject}</dd>
-        </div>
-      )}
-      {email.body && (
-        <div className="flex gap-2">
-          <dt className="w-16 shrink-0 text-muted-foreground">Body</dt>
-          <dd className="min-w-0 flex-1 break-words text-foreground">
-            <EmailBody>{email.body}</EmailBody>
-          </dd>
-        </div>
-      )}
-      {attachments && (
-        <div className="flex gap-2">
-          <dt className="w-16 shrink-0 text-muted-foreground">Files</dt>
-          <dd className="min-w-0 flex-1 truncate">{attachments}</dd>
-        </div>
-      )}
-    </dl>
+    <div className="overflow-x-auto rounded-2xl bg-muted/20 p-2">
+      <EmailCard subject={email.subject || "Message"} body={email.body || ""} headers={headers} />
+    </div>
   );
 };
 

package/src/react/email-body.tsx

@@ -3,27 +3,21 @@
 // render the drafted Markdown identically (links, lists, emphasis, and
 // tables rather than raw syntax).
 
+import { EmailBody as ReactEmailBody, type EmailBrand } from "@dbx-tools/shared-email-template";
 import { cn } from "@dbx-tools/ui-appkit/react";
-import { Streamdown } from "streamdown";
 
 /** Props for {@link EmailBody}. */
 export interface EmailBodyProps {
   children: string;
   /** Extra classes merged onto the prose container. */
   className?: string;
+  /** Optional brand override; dbx-tools branding is the default. */
+  brand?: EmailBrand;
 }
 
-/** Render an email body (Markdown) as compact, muted prose. */
-export const EmailBody = ({ children, className }: EmailBodyProps) => (
-  <Streamdown
-    controls={false}
-    className={cn(
-      "prose prose-sm dark:prose-invert max-w-none break-words",
-      "text-[11px] leading-snug text-muted-foreground",
-      "[&_strong]:text-foreground [&_p]:my-1 [&_ul]:my-1 [&_ol]:my-1 [&_ul]:pl-4 [&_ol]:pl-4",
-      className,
-    )}
-  >
-    {children}
-  </Streamdown>
+/** Render an email body with the same React Email component used for delivery. */
+export const EmailBody = ({ children, className, brand }: EmailBodyProps) => (
+  <div className={cn("max-w-none break-words", className)}>
+    <ReactEmailBody body={children} brand={brand} />
+  </div>
 );

package/src/react/email-compose.tsx

@@ -13,12 +13,12 @@ import {
 } from "@dbx-tools/ui-appkit/react";
 import { EyeIcon, PaperclipIcon, PencilIcon, SendIcon, XIcon } from "lucide-react";
 import { useCallback, useEffect, useId, useRef, useState, type ReactNode } from "react";
-import { EmailBody } from "./email-body.tsx";
+import { EmailPreview } from "./email-approval-card.tsx";
 import { joinAddresses, parseAddresses, type EmailDraft } from "./fields.ts";
 
 // A standard, editable email compose form usable outside a chat bubble
 // (a settings page, a standalone "send" view, etc.). It shares the
-// address / attachment helpers (`./fields`) and the Markdown body
+// address / attachment helpers (`./fields`) and the React Email body
 // renderer (`./email-body`) with the read-only `EmailPreview`, so the
 // two surfaces stay visually and semantically in sync.
 //
@@ -236,7 +236,7 @@ export const EmailComposeView = ({
       <div className="grid gap-1.5">
         <div className="flex items-center justify-between">
           <Label htmlFor={fieldId("body")} className="text-xs text-muted-foreground">
-            Body (Markdown)
+            Body
           </Label>
           <Button
             type="button"
@@ -258,15 +258,13 @@ export const EmailComposeView = ({
           </Button>
         </div>
         {showPreview ? (
-          <div className="min-h-32 rounded-md border border-border bg-background p-3">
-            <EmailBody>{body || "_Nothing to preview yet._"}</EmailBody>
-          </div>
+          <EmailPreview email={{ ...buildMessage(), body: body || "_Nothing to preview yet._" }} />
         ) : (
           <Textarea
             id={fieldId("body")}
             value={body}
             onChange={(e) => setBody(e.target.value)}
-            placeholder="Write your message in Markdown..."
+            placeholder="Write your message..."
             disabled={blocked}
             className="min-h-32 font-mono text-xs"
           />