@volter/twin-stripe 3.0.1 → 3.0.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@volter/twin-stripe",
-  "version": "3.0.1",
-  "description": "Local Stripe twin — a faithful, stateful local Stripe API your real `stripe` SDK talks to unmodified, its hosted pages and Stripe.js. Built on @volter/world-core.",
+  "version": "3.0.3",
+  "description": "Local Stripe customer, checkout and billing workflows with synthetic state and the real Stripe SDK. Supported operations and hosted-page limits are documented in the README.",
   "keywords": [
     "twin",
     "local",
@@ -34,27 +34,24 @@
   ],
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/volter-ai/twin-packs-p3.git",
+    "url": "git+https://github.com/volter-ai/twin-packs-open.git",
     "directory": "stripe"
   },
-  "homepage": "https://github.com/volter-ai/twin-packs-p3/tree/main/stripe#readme",
+  "homepage": "https://github.com/volter-ai/twin-packs-open/tree/main/stripe#readme",
   "type": "module",
   "exports": {
-    ".": {
-      "types": "./dist/src/index.d.ts",
-      "default": "./dist/src/index.js"
-    }
+    ".": "./dist/src/index.js"
   },
   "bin": {
     "world-stripe": "dist/src/cli.js"
   },
   "dependencies": {
-    "@volter/world-ui": "^1.0.38",
+    "@volter/world-ui": "^1.0.65",
     "react": "^19.2.7",
     "react-dom": "^19.2.7"
   },
   "peerDependencies": {
-    "@volter/world-core": "^3.0.38"
+    "@volter/world-core": "^3.0.68"
   },
   "devDependencies": {
     "@types/bun": "^1.2.20",
@@ -66,5 +63,8 @@
   },
   "engines": {
     "node": ">=22.3"
+  },
+  "bugs": {
+    "url": "https://github.com/volter-ai/twin-packs-open/issues"
   }
 }

package/spec/SOURCE.md

@@ -16,3 +16,7 @@ The pack serves this document's version (`SERVED_VERSION` in `src/engine/version
   publish (its testing page's cards, the payment lifecycle's states, each reference page's stated rule), each with its
   page's URL and the page's words for what it does, read with twin-standard's `read-page`. **Read by:**
   `bun scripts/vendor-examples.ts stripe`.
+
+Screen references, read 2026-10-08: [Stripe's hosted-onboarding guide](https://docs.stripe.com/connect/hosted-onboarding), its hosted_onboarding_form.e59ba8300f563e43489953f06127f52c.png image, supplies the two-column layout, progress and sequential form. The image's example platform branding is configurable; this screen retains the Stripe skin. Back/Continue keep local form answers; only the existing final submit changes the connected account. The existing US requirements and refusal behavior remain the contract. No upstream page, image or script is shipped.
+
+Dashboard references, read 2026-10-08: [the Web Dashboard guide](https://docs.stripe.com/dashboard/basics) supplies the primary sidebar categories, Shortcuts and Settings. The public [Stripe Apps testing guide](https://docs.stripe.com/stripe-apps/test-app), image `test-app-uninstall.710b89177767cff3a7f53de749558d88.png`, illustrates the earlier horizontal navigation, settings breadcrumbs, form density and type; its publication date is unspecified, and it is not a current Public details screenshot. The authored shell follows the current documented sidebar, while the controls remain the existing public business name, Radar list creation and test Issuing funding. The declared root opens Public details; other Dashboard products are unavailable, and there are no invented analytics. [Radar Lists](https://docs.stripe.com/radar/lists) supplies New, name, alias, type and Add. No upstream image, DOM, script or account sign-in is shipped.

package/src/engine/stripe.ts

@@ -712,6 +712,28 @@ export function disputeEvidence(): Record<string, unknown> {
 type Params = Record<string, unknown>;
 const subParams = (params: Params, k: string): Params => (params[k] && typeof params[k] === 'object' ? (params[k] as Params) : {});
 
+// source: https://docs.stripe.com/testing
+// The documented brand cards keep their brand and funding type when Checkout or the portal saves them.
+// Where the documentation stops and the twin decides: other numbers retain the existing synthetic Visa default.
+const TEST_CARD_PROFILES: Record<string, { brand: string; funding: string }> = {
+  '4000056655665556': { brand: 'visa', funding: 'debit' },
+  '5555555555554444': { brand: 'mastercard', funding: 'credit' },
+  '2223003122003222': { brand: 'mastercard', funding: 'credit' },
+  '5200828282828210': { brand: 'mastercard', funding: 'debit' },
+  '5105105105105100': { brand: 'mastercard', funding: 'prepaid' },
+  '378282246310005': { brand: 'amex', funding: 'credit' },
+  '371449635398431': { brand: 'amex', funding: 'credit' },
+  '6011111111111117': { brand: 'discover', funding: 'credit' },
+  '6011000990139424': { brand: 'discover', funding: 'credit' },
+  '6011981111111113': { brand: 'discover', funding: 'debit' },
+  '3056930009020004': { brand: 'diners', funding: 'credit' },
+  '36227206271667': { brand: 'diners', funding: 'credit' },
+  '3566002020360505': { brand: 'jcb', funding: 'credit' },
+  '6200000000000005': { brand: 'unionpay', funding: 'credit' },
+  '6200000000000047': { brand: 'unionpay', funding: 'debit' },
+  '6205500000000000004': { brand: 'unionpay', funding: 'credit' },
+};
+
 /** A card's own sub-object, from the number and expiry given. */
 function cardSubObject(params: Params): Params {
   const c = subParams(params, 'card');
@@ -720,15 +742,16 @@ function cardSubObject(params: Params): Params {
   // produces its real last4 instead of silently falling back to the '4242' default.
   const number = typeof c.number === 'string' ? c.number.replace(/\D/g, '')
     : typeof c.number === 'number' ? String(c.number).replace(/\D/g, '') : '';
+  const profile = TEST_CARD_PROFILES[number] ?? { brand: 'visa', funding: 'credit' };
   return { card: {
-    brand: 'visa', last4: number ? number.slice(-4) : '4242',
+    brand: profile.brand, last4: number ? number.slice(-4) : '4242',
     exp_month: Number(c.exp_month) || 12, exp_year: Number(c.exp_year) || 2034,
-    funding: 'credit', country: 'US',
+    funding: profile.funding, country: 'US',
     // source: spec:/components/schemas/payment_method_card/properties/fingerprint/description "Uniquely identifies this particular card number."
     // The synthetic fingerprint is stable for a number; Stripe's opaque fingerprint algorithm is not published.
     fingerprint: digest('sha256', number || '4242424242424242').slice(0, 16),
     checks: { address_line1_check: null, address_postal_code_check: null, cvc_check: 'pass' },
-    networks: { available: ['visa'], preferred: null },
+    networks: { available: [profile.brand], preferred: null },
     three_d_secure_usage: { supported: true }, wallet: null,
   } };
 }

package/src/screens/billing-portal.tsx

@@ -81,8 +81,8 @@ function page(ctx: HandlerContext, id: string, session: Row, problem?: { error:
       badge: s.status === 'trialing' ? 'Trial' : s.status === 'past_due' ? 'Past due' : ending ? 'Cancels' : undefined,
       note: ending ? `Your plan will be canceled on ${day(s.current_period_end)}.` : s.status === 'trialing' ? `Trial ends ${day(s.trial_end)}.` : `Renews on ${day(s.current_period_end)}.`,
       actions: ending
-        ? [{ label: 'Renew plan', action: `/p/session/${id}/renew`, fields: { subscription: String(s.id) }, tone: 'primary' as const }]
-        : features.cancel.enabled ? [{ label: 'Cancel plan', action: `/p/session/${id}/cancel`, fields: { subscription: String(s.id) }, tone: 'danger' as const }] : [],
+        ? [{ label: 'Renew plan', action: `${ctx.publicBase}/p/session/${id}/renew`, fields: { subscription: String(s.id) }, tone: 'primary' as const }]
+        : features.cancel.enabled ? [{ label: 'Cancel plan', action: `${ctx.publicBase}/p/session/${id}/cancel`, fields: { subscription: String(s.id) }, tone: 'danger' as const }] : [],
     };
   });
   const defaultPm = ((customer.invoice_settings as Row | undefined)?.default_payment_method as string | undefined) ?? undefined;
@@ -97,7 +97,7 @@ function page(ctx: HandlerContext, id: string, session: Row, problem?: { error:
     ? ctx.rows('invoice').filter((i) => i.customer === session.customer && i.status !== 'draft').sort((a, b) => Number(b.created) - Number(a.created))
       .map((i) => ({
         title: day(i.created), detail: money(i.amount_due ?? i.total, i.currency), badge: String(i.status ?? '').replace(/^./, (c) => c.toUpperCase()),
-        ...(i.status === 'open' && i.collection_method !== 'send_invoice' ? { actions: [{ label: 'Pay', action: `/p/session/${id}/pay`, fields: { invoice: String(i.id) }, tone: 'primary' as const }] } : {}),
+        ...(i.status === 'open' && i.collection_method !== 'send_invoice' ? { actions: [{ label: 'Pay', action: `${ctx.publicBase}/p/session/${id}/pay`, fields: { invoice: String(i.id) }, tone: 'primary' as const }] } : {}),
       }))
     : [];
   const back = typeof session.return_url === 'string' ? session.return_url : undefined;
@@ -124,7 +124,7 @@ function page(ctx: HandlerContext, id: string, session: Row, problem?: { error:
       <Portal
         merchant={merchant}
         {...(problem ? { notice: problem.error } : {})}
-        {...(features.paymentMethod ? { forms: [{ heading: pm ? 'Update payment method' : 'Add payment method', action: `/p/session/${id}/payment_method`, fields: cardFields, submit: { label: pm ? 'Update' : 'Add' } }] } : {})}
+        {...(features.paymentMethod ? { forms: [{ heading: pm ? 'Update payment method' : 'Add payment method', action: `${ctx.publicBase}/p/session/${id}/payment_method`, fields: cardFields, submit: { label: pm ? 'Update' : 'Add' } }] } : {})}
         {...(back ? { back: { href: back, label: `← Return to ${merchant}` } } : {})}
         sections={[
           { heading: 'Current plan', items: plans, empty: 'You have no active plans.' },
@@ -141,7 +141,7 @@ function page(ctx: HandlerContext, id: string, session: Row, problem?: { error:
 async function move(ctx: HandlerContext, id: string, session: Row, subscription: string, kind: 'cancel' | 'renew'): Promise<Response> {
   const sub = resourceView(ctx, SUB, subscription);
   if (!sub || sub.customer !== session.customer || sub.status === 'canceled') return gone();
-  const back = new Response(null, { status: 303, headers: { location: `/p/session/${id}` } });
+  const back = new Response(null, { status: 303, headers: { location: `${ctx.publicBase}/p/session/${id}` } });
   if (kind === 'renew') {
     await ctx.write(SUB, subscription, { cancel_at_period_end: false, cancel_at: null, canceled_at: null, cancellation_details: { comment: null, feedback: null, reason: null } }, 'subscription.update');
     return back;
@@ -179,7 +179,7 @@ async function updatePaymentMethod(ctx: HandlerContext, id: string, session: Row
   for (const sub of ctx.rows(SUB).map((s) => ctx.expand(SUB, s)).filter((s) => s.customer === customer && s.status !== 'canceled' && s.status !== 'incomplete_expired')) {
     await ctx.write(SUB, String(sub.id), { default_payment_method: pm.id }, 'subscription.update');
   }
-  return new Response(null, { status: 303, headers: { location: `/p/session/${id}` } });
+  return new Response(null, { status: 303, headers: { location: `${ctx.publicBase}/p/session/${id}` } });
 }
 
 /** The customer pays one of their open invoices with the card on file. */
@@ -192,7 +192,7 @@ async function payInvoice(ctx: HandlerContext, id: string, session: Row, invoice
   if (!pm) return page(ctx, id, session, { error: 'Add a payment method to pay this invoice.', values: {} });
   const declined = await payOpenInvoice(ctx, invoiceId, pm);
   if (declined) return page(ctx, id, session, { error: declined.message, values: {} });
-  return new Response(null, { status: 303, headers: { location: `/p/session/${id}` } });
+  return new Response(null, { status: 303, headers: { location: `${ctx.publicBase}/p/session/${id}` } });
 }
 
 /** billing.stripe.com's portal pages, or undefined for any other request. */

package/src/screens/checkout.tsx

@@ -94,7 +94,7 @@ function customerEmailOf(session: Row): string | undefined {
   return typeof email === 'string' && EMAIL.test(email) ? email : undefined;
 }
 
-function page(session: Row, id: string, now: number, values: Record<string, string> = {}, error?: string): Response {
+function page(publicBase: string, session: Row, id: string, now: number, values: Record<string, string> = {}, error?: string): Response {
   const lines = (((session.line_items as { data?: Row[] } | undefined)?.data) ?? []).map((item) => ({
     name: String(item.description ?? 'Item'),
     amount: money(item.amount_total, item.currency ?? session.currency),
@@ -128,7 +128,7 @@ function page(session: Row, id: string, now: number, values: Record<string, stri
         merchant={merchant}
         lines={lines}
         {...(trialText ? { total: trialText.lead, note: trialText.note } : session.amount_total !== null && session.amount_total !== undefined ? { total: { label: mode === 'subscription' ? 'Subscribe' : `Pay ${merchant}`, amount: money(session.amount_total, session.currency) } } : {})}
-        action={`/c/pay/${id}`}
+        action={`${publicBase}/c/pay/${id}`}
         sections={[{ heading: 'Contact information', fields: contact }, { heading: 'Payment method', fields: card }]}
         submit={{ label: submit, testId: 'hosted-payment-submit-button' }}
         {...(typeof session.cancel_url === 'string' ? { back: { href: session.cancel_url, label: '← Back' } } : {})}
@@ -145,13 +145,13 @@ async function pay(ctx: HandlerContext, id: string, session: Row, v: Record<stri
   const onFile = customerEmailOf(session);
   const email = onFile ?? (typeof session.customer_email === 'string' ? session.customer_email : (v.email ?? '').trim());
   if (session.mode !== 'setup' || !session.customer) {
-    if (!EMAIL.test(email)) return page(session, id, nowUnix(ctx.occurredAt), v, 'Your email address is incomplete.');
+    if (!EMAIL.test(email)) return page(ctx.publicBase, session, id, nowUnix(ctx.occurredAt), v, 'Your email address is incomplete.');
   }
   // a trial charges nothing now unless a one-time price is on the first invoice
   const oneTimeDue = (((session.line_items as { data?: Row[] } | undefined)?.data) ?? []).some((it, i) => isOneTime(it, inlineOf(session, i)));
   const chargesNow = session.mode === 'payment' || (session.mode === 'subscription' && (!trialOf(session, nowUnix(ctx.occurredAt)) || oneTimeDue));
   const refused = cardAnswer(v, nowUnix(ctx.occurredAt), chargesNow);
-  if (refused) return page(session, id, nowUnix(ctx.occurredAt), v, refused);
+  if (refused) return page(ctx.publicBase, session, id, nowUnix(ctx.occurredAt), v, refused);
   let existing = session;
   // Checkout always makes a customer for a subscription; a payment makes one only when the session asks
   if (!session.customer && (session.mode === 'subscription' || session.customer_creation === 'always')) {
@@ -199,5 +199,5 @@ export async function screen(ctx: HandlerContext): Promise<Response> {
   const stored = ctx.row(CS, id) ?? {};
   const coupon = (stored._discount as Row | undefined)?.coupon;
   const full = { ...session, _subscription_data: stored._subscription_data, _price_data: stored._price_data, _merchant: merchantOf(ctx, stored), _coupon: typeof coupon === 'string' ? ctx.get('coupon', coupon) : undefined, _customer: typeof session.customer === 'string' ? ctx.get('customer', session.customer) : undefined };
-  return request.method === 'GET' ? page(full, id, nowUnix(ctx.occurredAt)) : pay(ctx, id, full, values);
+  return request.method === 'GET' ? page(ctx.publicBase, full, id, nowUnix(ctx.occurredAt)) : pay(ctx, id, full, values);
 }

package/src/screens/connect-onboarding.tsx

@@ -3,7 +3,8 @@
 // single-use entry point: visiting it takes the owner to their onboarding session, and visiting it again, or after it
 // expires, sends them to refresh_url, where the platform makes a new one (docs.stripe.com/connect/hosted-onboarding).
 // At the session's own address they give Stripe what it requires, and Stripe sends them to return_url. Submitting is
-// the owner's move, not an API call. Authored from @volter/world-ui's payment piece; nothing of Stripe's page is copied.
+// the owner's move, not an API call. Authored from @volter/world-ui's payment piece and Stripe's published visual
+// example; the form moves through one section at a time, retaining answers until the final submit.
 //
 // The page asks for exactly what Stripe requires before a US Express account with card_payments and transfers can
 // take card payments (docs.stripe.com/connect/required-verification-information; the set is the one Stripe's
@@ -23,8 +24,8 @@
 // merchant category codes as its list gives them (./industries.ts), and an industry the page does not offer leaves
 // business_profile.mcc due; the states are the fifty and the District of Columbia; a request with no forwarded address
 // records 127.0.0.1. An update link (account_update) shows the same page.
-import type { HandlerContext } from '@volter/world-core';
-import { CONSENT_CSS, flowPage, Payment, PAYMENT_CSS, type PaymentField } from '@volter/world-ui';
+import { twinVendorUrl, type HandlerContext } from '@volter/world-core';
+import { CONSENT_CSS, flowPage, Payment, PAYMENT_CSS, type PaymentProps, type PaymentField } from '@volter/world-ui';
 import type { Row } from '../engine/common.ts';
 import { nowUnix } from '../engine/stripe.ts';
 import { formOf, notFound, seeOther, STRIPE_CONSENT_SKIN } from './shared.tsx';
@@ -90,12 +91,14 @@ function page(ctx: HandlerContext, sessionUrl: string, link: Row, kind: Kind, va
     : [{ heading: 'Business details', fields: business }, { heading: 'About you', fields: person }, { heading: 'Payout account', fields: payout }, { heading: 'Agreement', fields: agreement }];
   return flowPage({
     title: 'Stripe · Account onboarding',
-    css: [PAYMENT_CSS],
+    css: [ONBOARDING_CSS],
     ...(error ? { status: 400 } : {}),
     body: (
-      <Payment
-        merchant={`Verify your ${kind === 'company' ? 'company' : 'business'} with Stripe · ${String(link.account)} · test mode`}
-        lines={[]}
+      <ConnectOnboarding
+        merchant="Stripe"
+        account={String(link.account)}
+        checked={['owners_provided', 'tos'].filter(name => v[name] === (name === 'tos' ? 'accepted' : 'provided'))}
+        lines={sections.map(section => ({ name: section.heading, amount: '' }))}
         action={sessionUrl}
         sections={sections}
         submit={{ label: 'Submit' }}
@@ -167,7 +170,7 @@ async function visit(ctx: HandlerContext, id: string): Promise<Response> {
   if (!usable(ctx, link)) return seeOther(String(link.refresh_url));
   const session = `onbs_${id.replace(/^acctlink_/, '')}`;
   await ctx.write(LINK, id, { used: true, _session: session }, 'account_link.used');
-  return seeOther(`${SESSIONS}${session}`);
+  return seeOther(twinVendorUrl(ctx.call.request, `${SESSIONS}${session}`));
 }
 
 /** connect.stripe.com's onboarding pages, or undefined for any other request. */
@@ -184,7 +187,7 @@ export async function screen(ctx: HandlerContext): Promise<Response> {
   const stored = ctx.rowsRaw(LINK).find((l) => l._session === sid && l._submitted !== true);
   const link = stored ? ctx.get(LINK, String(stored.id)) : undefined;
   if (!stored || !link) return gone();
-  const sessionUrl = `${SESSIONS}${sid}`;
+  const sessionUrl = twinVendorUrl(request, `${SESSIONS}${sid}`);
   const account = ctx.get('account', String(link.account)) ?? {};
   const kind = kindOf(account);
   if (!kind) return unmodelled(account);
@@ -195,3 +198,58 @@ export async function screen(ctx: HandlerContext): Promise<Response> {
   await submit(ctx, link, kind, form, request.headers.get('x-forwarded-for')?.split(',')[0]?.trim() || '127.0.0.1');
   return seeOther(String(link.return_url));
 }
+
+// Visual reference: Stripe's own hosted onboarding example, read 2026-10-08:
+// https://docs.stripe.com/connect/hosted-onboarding
+// hosted_onboarding_form.e59ba8300f563e43489953f06127f52c.png. Platform branding
+// in that example is configurable; this twin uses its existing Stripe skin.
+
+const ONBOARDING_CSS = PAYMENT_CSS + `
+*{box-sizing:border-box}body{color:#30313d;background:#fff;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
+.pay{grid-template-columns:minmax(280px,40%) minmax(0,60%)}.pay-summary{background:#f7f7f9;padding:48px max(32px,calc((100vw - 1000px)/2));padding-right:40px;position:relative}
+.pay-back{color:#596171;font-size:13px;margin-bottom:40px}.pay-merchant{color:#635bff;font-size:30px;font-weight:700;letter-spacing:-1px;margin-bottom:32px}
+.pay-lines{counter-reset:step;max-width:280px}.pay-line{counter-increment:step;display:block;position:relative;padding:12px 0 12px 38px;color:#687385;font-size:14px}
+.pay-line::before{content:counter(step);position:absolute;left:0;top:11px;width:24px;height:24px;line-height:22px;text-align:center;border:1px solid #d8dee4;border-radius:50%;background:#fff;font-size:12px}
+.pay-line[aria-current=step]{color:#30313d;font-weight:600}.pay-line[aria-current=step]::before{border-color:#635bff;color:#635bff}.pay-line.is-complete::before{background:#635bff;border-color:#635bff;color:#fff}
+.pay-form{padding:56px 48px;max-width:620px;width:100%}.pay-section legend{font-size:26px;letter-spacing:-.6px;font-weight:600;margin-bottom:24px}.pay-field{margin-bottom:22px}
+.pay-field span{font-size:14px;margin-bottom:8px;font-weight:500}.pay-field input,.pay-field select{background:#fff;border-color:#d8dee4;border-radius:6px;padding:10px 12px;box-shadow:0 1px 2px #00000005;color:#30313d}
+.pay-field input:focus,.pay-field select:focus{outline:2px solid #a5a0ff;outline-offset:1px}
+.pay-field:has(input[type=checkbox]){display:flex;align-items:flex-start;gap:10px}.pay-field:has(input[type=checkbox]) span{order:2;font-weight:400}.pay-field input[type=checkbox]{width:16px;height:16px;flex:none;margin-top:3px;accent-color:#635bff}
+.pay-submit,.connect-next{background:#635bff;color:#fff;border:0;border-radius:6px;font-size:14px;font-weight:600;cursor:pointer;padding:12px 16px}
+.connect-actions{display:flex;justify-content:space-between;gap:16px;margin-top:32px}.connect-back{color:#596171;background:transparent;border:0;cursor:pointer;padding:12px 0;font:inherit}.connect-next{min-width:140px;flex:1}
+.pay-error{border:1px solid #f1c2c2;padding:12px;border-radius:6px;color:#b52e2e;background:#fff7f7;font-size:13px;white-space:normal;overflow-wrap:anywhere}
+.connect-progress{height:3px;background:#ececf1;margin:0 0 36px;border-radius:2px;overflow:hidden}.connect-progress div{height:100%;background:#635bff;transition:width .15s}
+.connect-context{position:absolute;bottom:40px;left:32px;color:#687385;font-size:12px}.connect-context strong{display:block;font-weight:500;color:#30313d}
+.connect-ready .pay-section[hidden],.connect-ready .pay-submit[hidden],.connect-actions [hidden]{display:none}
+@media(max-width:800px){.pay{grid-template-columns:1fr}.pay-summary{padding:24px}.pay-back{margin-bottom:20px}.pay-merchant{font-size:24px;margin-bottom:0}.pay-lines{display:none}.connect-context{position:static;padding:0 24px;background:#f7f7f9}.pay-form{padding:32px 24px;max-width:100%}.pay-section legend{font-size:24px}}
+`;
+
+// Progressive enhancement only: Back/Continue move through the existing form.
+// No account state is written until its existing Submit operation succeeds.
+const STEPS = `(function(){
+var root=document.querySelector('.connect-onboarding'),form=root.querySelector('form'),groups=Array.from(form.querySelectorAll('.pay-section')),items=Array.from(root.querySelectorAll('.pay-line')),submit=form.querySelector('.pay-submit');
+var progress=document.createElement('div');progress.className='connect-progress';progress.setAttribute('role','progressbar');progress.setAttribute('aria-label','Onboarding progress');progress.setAttribute('aria-valuemin','0');progress.setAttribute('aria-valuemax',String(groups.length));
+var bar=document.createElement('div');progress.append(bar);form.before(progress);
+var controls=document.createElement('div');controls.className='connect-actions';
+var back=document.createElement('button');back.type='button';back.className='connect-back';back.textContent='Back';
+var next=document.createElement('button');next.type='button';next.className='connect-next';next.textContent='Continue';
+controls.append(back,next);form.append(controls);
+var checked=JSON.parse(root.getAttribute('data-checked-fields')||'[]');
+groups.forEach(function(group){group.querySelectorAll('input,select').forEach(function(input){input.required=true;if(input.type==='checkbox')input.checked=checked.includes(input.name);if(input.name==='ssn_last_4'){input.pattern='[0-9]{4}';input.inputMode='numeric';input.maxLength=4;}});});
+var index=0;
+function show(i){index=i;groups.forEach(function(group,n){group.hidden=n!==i;});items.forEach(function(item,n){if(n===i)item.setAttribute('aria-current','step');else item.removeAttribute('aria-current');item.classList.toggle('is-complete',n<i);});back.hidden=i===0;next.hidden=i===groups.length-1;submit.hidden=i!==groups.length-1;bar.style.width=((i+1)/groups.length*100)+'%';progress.setAttribute('aria-valuenow',String(i+1));progress.setAttribute('aria-valuetext',groups[i].querySelector('legend').textContent);root.classList.add('connect-ready');}
+function invalid(group){return Array.from(group.querySelectorAll('input,select')).find(function(input){return !input.checkValidity();});}
+back.addEventListener('click',function(){show(index-1);});
+next.addEventListener('click',function(){var field=invalid(groups[index]);if(field){field.reportValidity();return;}show(index+1);groups[index].querySelector('input,select')?.focus();});
+form.noValidate=true;
+form.addEventListener('submit',function(event){for(var i=0;i<groups.length;i++){var field=invalid(groups[i]);if(field){event.preventDefault();show(i);field.reportValidity();return;}}});
+if(form.querySelector('.pay-error')){var first=groups.findIndex(function(group){return invalid(group);});show(first<0?groups.length-1:first);}else show(0);
+})();`;
+
+function ConnectOnboarding(props: PaymentProps & { account: string; checked: string[] }) {
+  return <div className="connect-onboarding" data-checked-fields={JSON.stringify(props.checked)}>
+    <Payment {...props} />
+    <div className="connect-context"><strong>Test mode</strong>{props.account}</div>
+    <script dangerouslySetInnerHTML={{ __html: STEPS }} />
+  </div>;
+}

package/src/screens/dashboard.tsx

@@ -1,6 +1,5 @@
 // THE DASHBOARD — dashboard.stripe.com's pages an operator sets what Stripe's API cannot (docs/contributing/architecture.md,
-// "Screens": a workspace): Public details (/settings/public) and the Connect OAuth settings
-// (/settings/connect/onboarding-options/oauth), Radar lists and test Issuing funding.
+// "Screens": a workspace): Public details (/settings/public), Radar lists and test Issuing funding.
 // The operator controls prepare the cited real application calls; other Dashboard pages answer Stripe's 404.
 //
 // THE DASHBOARD'S PUBLIC DETAILS — a workspace page (docs/contributing/architecture.md, "Screens") of the Dashboard
@@ -23,26 +22,6 @@
 // and the save redirects to its own path. Saving is an update of an account that exists (the first save included, though
 // the twin stores the platform's record only then), so every save is sent as account.updated.
 //
-// THE DASHBOARD'S CONNECT OAUTH SETTINGS — a workspace page (docs/contributing/architecture.md, "Screens") of the
-// Dashboard (manifest screen `dashboard`), at dashboard.stripe.com/settings/connect/onboarding-options/oauth, where a
-// platform starts an OAuth integration: "Enable onboarding accounts with OAuth", "Copy your client_id, a unique
-// identifier for your platform that's generated by Stripe", and "Set your redirect_uri ... You must specify all redirect
-// URLs in your platform settings. If you don't include the redirect_uri parameter in your request, Stripe defaults to
-// using the first address you've configured" (docs.stripe.com/connect/oauth-standard-accounts). The test client_id
-// "allows you to: Set your redirect_uri to a non-HTTPS URL; Set your redirect_uri to localhost"
-// (docs.stripe.com/connect/testing#using-oauth). Stripe's API has no call that reads or changes these settings (GET
-// /v1/account does not carry the client_id), so this page is the only way to them, and connect.stripe.com/oauth/authorize
-// (./connect-oauth.tsx) reads what it saves. Authored from plain markup under Stripe's type; nothing of Stripe's page is
-// copied.
-//
-// Where the documentation stops and the twin decides: the World has one platform, and its test client_id is
-// `ca_twin_self` (PLATFORM_CLIENT_ID; the platform account is acct_twin_self), the same in every World, shown on the
-// page in an element a runner reads (data-testid="connect-client-id"). OAuth starts disabled. The page is served at
-// the docs' address, at /test/… (the docs' test-mode link) and at /settings/connect (the address Cal.com's setup
-// guide gives). The redirect URIs are one form field, one per line (or comma-separated, as the reference describes
-// them), saved whole: each an absolute http or https URL without a fragment; http and localhost are allowed, as the
-// test client_id allows them. No sign-in guards the page. The form posts to the
-// page's own address and the save redirects to it.
 import type { HandlerContext } from '@volter/world-core';
 import { flowPage } from '@volter/world-ui';
 import { VL } from '../engine/radar.ts';
@@ -61,8 +40,32 @@ const MAX_NAME = 5000;
 
 const DETAILS_CSS = `
 * { box-sizing: border-box; }
-body { margin: 0; background: #f6f8fa; color: #1a1f36; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Ubuntu, sans-serif; font-size: 14px; }
-.pd { max-width: 640px; margin: 48px auto; padding: 0 16px; }
+body { margin: 0; background: #ffffff; color: #1a1f36; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Ubuntu, sans-serif; font-size: 14px; line-height: 1.5; }
+button,input,select { font: inherit; }
+button,a,input,select { outline-offset: 3px; }
+button { cursor: pointer; }
+button:disabled { cursor: default; color: #697386; }
+a { color: #635bff; text-decoration: none; }
+.sd { min-height: 100vh; display: grid; grid-template-columns: 224px minmax(0,1fr); }
+.sd-side { background: #f6f8fa; border-right: 1px solid #e3e8ee; padding: 20px 14px; }
+.sd-account { font-weight: 600; padding: 6px 10px 20px; overflow-wrap: anywhere; }
+.sd-mode { display: block; width: fit-content; font-size: 11px; font-weight: 500; background: #e3e8ee; border-radius: 4px; margin-top: 8px; padding: 2px 7px; }
+.sd-nav { display: grid; gap: 3px; }
+.sd-nav a,.sd-nav button { display: block; text-align: left; padding: 7px 10px; font: inherit; border: 0; border-radius: 6px; background: none; color: #697386; }
+.sd-nav a { color: #1a1f36; }
+.sd-nav a:hover { background: #e3e8ee; }
+.sd-nav [aria-current=page] { color: #635bff; background: #ffffff; font-weight: 600; }
+.sd-nav-title { margin: 23px 10px 7px; font-size: 12px; font-weight: 600; color: #697386; }
+.sd-body { min-width: 0; }
+.sd-top { min-height: 64px; border-bottom: 1px solid #e3e8ee; padding: 14px 32px; display: flex; align-items: center; gap: 16px; }
+.sd-search { width: min(520px,100%); border: 1px solid #e3e8ee; border-radius: 7px; padding: 7px 12px; background: #f6f8fa; }
+.sd-top a { margin-left: auto; }
+.sd-top button { border: 0; background: none; }
+.sd-content { padding: 28px 40px 60px; max-width: 1280px; }
+.sd-crumbs { color: #697386; font-size: 13px; display: flex; gap: 10px; margin-bottom: 18px; }
+.sd-title { display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid #e3e8ee; padding-bottom: 20px; margin-bottom: 28px; }
+.sd-title h1 { font-size: 28px; margin: 0; letter-spacing: -.5px; }
+.pd { max-width: 860px; }
 .pd h1 { font-size: 28px; margin: 16px 0 4px; }
 .pd-lead { color: #697386; margin: 0 0 24px; }
 .pd-card { background: #ffffff; border: 1px solid #e3e8ee; border-radius: 8px; padding: 24px; }
@@ -70,22 +73,50 @@ body { margin: 0; background: #f6f8fa; color: #1a1f36; font-family: -apple-syste
 .pd-card small { display: block; color: #697386; margin-bottom: 8px; }
 .pd-card input { width: 100%; padding: 8px 10px; border: 1px solid #c1c9d2; border-radius: 6px; font: inherit; }
 .pd-actions { margin-top: 20px; display: flex; justify-content: flex-end; }
-.pd-actions button { background: #635bff; color: #ffffff; border: 0; border-radius: 6px; padding: 8px 16px; font: inherit; font-weight: 600; cursor: pointer; }
+.sd-primary,.pd-actions button { background: #635bff; color: #ffffff; border: 0; border-radius: 6px; padding: 8px 16px; font: inherit; font-weight: 600; cursor: pointer; }
 .pd-notice { padding: 10px 12px; border-radius: 6px; margin-bottom: 16px; }
 .pd-error { background: #fff0f3; color: #df1b41; }
 .pd-saved { background: #e7f8ef; color: #0e6245; }
+.sd-table { border-collapse: collapse; width: 100%; }
+.sd-table th,.sd-table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid #e3e8ee; }
+.sd-table th { font-size: 12px; font-weight: 600; color: #697386; background: #f6f8fa; }
+.sd-empty { color: #697386; padding: 40px; text-align: center; }
+.sd-code { font-family: ui-monospace,SFMono-Regular,monospace; font-size: 12px; }
+.sd-dialog { width: min(480px,calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow: auto; border: 1px solid #e3e8ee; border-radius: 8px; padding: 24px; color: #1a1f36; }
+.sd-dialog::backdrop { background: rgba(26,31,54,.4); }
+.sd-dialog h2 { font-size: 20px; margin: 0 0 20px; }
+.sd-dialog label { display: block; font-weight: 600; margin: 14px 0; }
+.sd-dialog input,.sd-dialog select { display: block; width: 100%; margin-top: 6px; border: 1px solid #c1c9d2; border-radius: 6px; padding: 8px 10px; background: #ffffff; }
+.sd-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 24px; }
+.sd-cancel { border: 1px solid #c1c9d2; border-radius: 6px; padding: 8px 16px; background: #ffffff; color: #1a1f36; }
+@media(max-width:760px) { .sd { grid-template-columns: 160px minmax(0,1fr); } .sd-content { padding: 24px 20px; } .sd-top { padding: 14px 20px; } .sd-top button { display: none; } .sd-table { font-size: 12px; } }
+@media(max-width:520px) { .sd { display: block; } .sd-side { border-right: 0; border-bottom: 1px solid #e3e8ee; padding: 10px 16px; } .sd-account { padding: 0 0 8px; } .sd-mode { display: inline; margin-left: 8px; } .sd-nav { display: flex; flex-wrap: wrap; } .sd-nav button,.sd-nav-title { display: none; } .sd-content { padding: 20px 16px; } .sd-title h1 { font-size: 24px; } .sd-top { padding: 12px 16px; } }
 `;
 
-function detailsPage(account: Row | undefined, opts: { value?: string; error?: string; saved?: boolean } = {}): Response {
+type DashboardPage = { title: string; section: string; path: string; body: Parameters<typeof flowPage>[0]['body']; action?: Parameters<typeof flowPage>[0]['body']; status?: number };
+/** The documented dashboard navigation around only the operator pages this pack already serves. */
+function dashboardPage(ctx: HandlerContext, opts: DashboardPage): Response {
+  const account = ctx.get('account', PLATFORM_ACCOUNT_ID);
+  const links = [['Public details', PUBLIC_DETAILS_PATH], ['Radar lists', '/radar/lists'], ['Issuing balance', '/test/issuing/balance']];
+  return flowPage({ title: `${opts.title} – Stripe`, css: [DETAILS_CSS], status: opts.status ?? 200, body: <div className="sd">
+    <aside className="sd-side"><div className="sd-account">{publicBusinessName(account)}<span className="sd-mode">Test mode</span></div><nav className="sd-nav" aria-label="Dashboard">
+      {['Home', 'Balances', 'Transactions', 'Customers', 'Product catalog'].map(label => <button key={label} type="button" disabled title="Not available in this twin's Dashboard">{label}</button>)}
+      <p className="sd-nav-title">Shortcuts</p>{links.map(([label,path]) => <a key={path} href={`${ctx.publicBase}${path}`} aria-current={opts.path === path ? 'page' : undefined}>{label}</a>)}
+      <p className="sd-nav-title">Products</p>{['Payments', 'Billing', 'Reporting', 'Connect', 'More'].map(label => <button key={label} type="button" disabled title="Not available in this twin's Dashboard">{label}</button>)}
+    </nav></aside><div className="sd-body"><header className="sd-top"><input className="sd-search" aria-label="Search Dashboard" placeholder="Search" disabled title="Dashboard search is not available in this twin"/><button type="button" disabled title="Not available in this twin's Dashboard">Create</button><button type="button" disabled>Help</button><a href={`${ctx.publicBase}${PUBLIC_DETAILS_PATH}`}>Settings</a></header>
+    <main className="sd-content"><nav className="sd-crumbs" aria-label="Breadcrumb"><span>{opts.section}</span><span aria-hidden="true">/</span><span>{opts.title}</span></nav><div className="sd-title"><h1>{opts.title}</h1>{opts.action}</div>{opts.body}</main></div>
+    <script dangerouslySetInnerHTML={{ __html: "document.querySelectorAll('[data-open-dialog]').forEach(b=>b.addEventListener('click',()=>document.getElementById(b.dataset.openDialog).showModal()));document.querySelectorAll('[data-close-dialog]').forEach(b=>b.addEventListener('click',()=>b.closest('dialog').close()));" }}/>
+  </div> });
+}
+
+function detailsPage(ctx: HandlerContext, account: Row | undefined, opts: { value?: string; error?: string; saved?: boolean } = {}): Response {
   const named = (account?.business_profile as Row | undefined)?.name;
   const value = opts.value ?? (typeof named === 'string' ? named : '');
-  return flowPage({
-    title: 'Public details – Stripe',
-    css: [DETAILS_CSS],
+  return dashboardPage(ctx, {
+    title: 'Public details', section: 'Settings / Business', path: PUBLIC_DETAILS_PATH,
     ...(opts.error ? { status: 400 } : {}),
     body: (
-      <main className="pd">
-        <h1>Public details</h1>
+      <div className="pd">
         <p className="pd-lead">What your customers see on Checkout, the customer portal, receipts and invoices. Currently shown: <strong data-testid="public-business-name">{publicBusinessName(account)}</strong></p>
         {opts.error ? <p className="pd-notice pd-error" role="alert">{opts.error}</p> : null}
         {opts.saved ? <p className="pd-notice pd-saved" role="status">Your public details were saved.</p> : null}
@@ -95,7 +126,7 @@ function detailsPage(account: Row | undefined, opts: { value?: string; error?: s
           <input id="business_name" name="business_name" autoComplete="organization" defaultValue={value} required maxLength={MAX_NAME} />
           <div className="pd-actions"><button type="submit">Save</button></div>
         </form>
-      </main>
+      </div>
     ),
   });
 }
@@ -118,10 +149,10 @@ async function publicDetails(ctx: HandlerContext): Promise<Response> {
   const url = new URL(request.url);
   if (request.method !== 'GET' && request.method !== 'POST') return notFound();
   const form = request.method === 'POST' ? await formOf(request.clone()) : {};
-  if (request.method === 'GET') return detailsPage(ctx.get('account', PLATFORM_ACCOUNT_ID), { saved: url.searchParams.has('saved') });
+  if (request.method === 'GET') return detailsPage(ctx, ctx.get('account', PLATFORM_ACCOUNT_ID), { saved: url.searchParams.has('saved') });
   const name = (form.business_name ?? '').trim();
   const refused = nameRefused(name);
-  if (refused) return detailsPage(ctx.get('account', PLATFORM_ACCOUNT_ID), { value: form.business_name ?? '', error: refused });
+  if (refused) return detailsPage(ctx, ctx.get('account', PLATFORM_ACCOUNT_ID), { value: form.business_name ?? '', error: refused });
   await save(ctx, name);
   // a query-only reference: the page's own path, wherever it is mounted and with or without its trailing slash
   return new Response(null, { status: 303, headers: { location: '?saved=1' } });
@@ -130,6 +161,8 @@ async function publicDetails(ctx: HandlerContext): Promise<Response> {
 /** Dashboard settings, Radar list creation and test Issuing funding; other pages answer Stripe's 404. */
 export async function screen(ctx: HandlerContext): Promise<Response> {
   const path = new URL(ctx.call.request.url).pathname.replace(/\/+$/, '');
+  // The declared workspace opens a served setting, not a fabricated analytics home.
+  if (!path && ctx.call.request.method === 'GET') return redirect(`${ctx.publicBase}${PUBLIC_DETAILS_PATH}`);
   // source: https://docs.stripe.com/radar/lists "Use the Dashboard or the API to create lists."
   // source: https://docs.stripe.com/radar/lists "Enter a name for the list"
   // source: https://docs.stripe.com/radar/lists "Select the type of list to create."
@@ -151,9 +184,22 @@ export async function screen(ctx: HandlerContext): Promise<Response> {
         list_items: { object: 'list', data: [], has_more: false, url: '/v1/radar/value_list_items' },
       });
       await ctx.write(VL, String(list.id), { list_items: { object: 'list', data: [], has_more: false, url: `/v1/radar/value_list_items?value_list=${list.id}` } }, 'radar.value_list.updated');
-      return redirect(`/radar/lists/${list.id}`);
+      return redirect(`${ctx.publicBase}/radar/lists/${list.id}`);
     }
-    return flowPage({ css: [], title: 'Lists – Radar – Stripe', body: <main><h1>Radar Lists</h1><form method="post" action="/radar/lists"><h2>New list</h2><label>Name<input name="name" required /></label><label>Alias<input name="alias" /></label><label>List type<select name="item_type"><option value="customer_id">Customer ID</option><option value="email">Email</option><option value="card_fingerprint">Card fingerprint</option><option value="ip_address">IP address</option><option value="string">String</option></select></label><button>Add</button></form><ul>{ctx.rows(VL).map(row => <li key={String(row.id)}>{String(row.name)} ({String(row.alias)})</li>)}</ul></main> });
+    const lists = ctx.rows(VL);
+    const types = [['customer_id', 'Customer ID'], ['email', 'Email'], ['card_fingerprint', 'Card fingerprint'], ['card_bin', 'Card BIN'], ['ip_address', 'IP address'], ['string', 'String'], ['case_sensitive_string', 'Case-sensitive string'], ['country', 'Country'], ['sepa_debit_fingerprint', 'SEPA Direct Debit fingerprint'], ['us_bank_account_fingerprint', 'ACH Direct Debit fingerprint']];
+    const selected = lists.find(row => path === `/radar/lists/${row.id}`);
+    return dashboardPage(ctx, { title: selected ? String(selected.name) : 'Lists', section: 'Payments / Radar', path: '/radar/lists',
+      action: <button className="sd-primary" type="button" data-open-dialog="radar-new-list">New list</button>,
+      body: <>{selected ? <div className="pd-card"><a href={`${ctx.publicBase}/radar/lists`}>All lists</a><h2>{String(selected.name)}</h2><p>Alias: <code>{String(selected.alias)}</code></p><p>List type: {types.find(([key]) => key === selected.item_type)?.[1] ?? String(selected.item_type)}</p></div> : null}<p className="pd-lead">Lists of information to block, allow or review matching payments.</p>
+        <table className="sd-table"><thead><tr><th scope="col">Name</th><th scope="col">Alias</th><th scope="col">List type</th></tr></thead><tbody>{lists.map(row => <tr key={String(row.id)}><td><a href={`${ctx.publicBase}/radar/lists/${encodeURIComponent(String(row.id))}`}>{String(row.name)}</a></td><td className="sd-code">{String(row.alias)}</td><td>{types.find(([key]) => key === row.item_type)?.[1] ?? String(row.item_type)}</td></tr>)}</tbody></table>
+        {!lists.length ? <p className="sd-empty">No lists yet. Create a list to group related values.</p> : null}
+        <dialog className="sd-dialog" id="radar-new-list" aria-labelledby="radar-new-list-title"><h2 id="radar-new-list-title">New list</h2><form method="post" action={`${ctx.publicBase}/radar/lists`}>
+          <label htmlFor="radar-list-name">Name</label><input id="radar-list-name" name="name" required/>
+          <label htmlFor="radar-list-alias">Alias</label><input id="radar-list-alias" name="alias"/><p className="pd-lead">Leave blank to generate an alias from the name.</p>
+          <label htmlFor="radar-list-type">List type</label><select id="radar-list-type" name="item_type">{types.map(([value,label]) => <option key={value} value={value}>{label}</option>)}</select>
+          <div className="sd-dialog-actions"><button className="sd-cancel" type="button" data-close-dialog>Cancel</button><button className="sd-primary" type="submit">Add</button></div>
+        </form></dialog></> });
   }
   // source: https://docs.stripe.com/issuing/testing "Before you create test transactions, you must add test funds to the Issuing balance on your account."
   // source: https://docs.stripe.com/issuing/testing "You can create test top-ups in the Dashboard, or with the Top-ups API"
@@ -169,10 +215,9 @@ export async function screen(ctx: HandlerContext): Promise<Response> {
       const amount = Number(form.amount);
       if (!Number.isInteger(amount) || amount <= 0) return invalid('Enter a positive amount in cents.');
       await created(ctx, 'balance_transaction', {}, { amount, currency: 'usd', fee: 0, net: amount, type: 'topup', reporting_category: 'topup', source: null, status: 'available', balance_type: 'issuing', available_on: Number(nowUnix(ctx.occurredAt)), fee_details: [] });
-      return redirect('/test/issuing/balance');
+      return redirect(`${ctx.publicBase}/test/issuing/balance?funded=1`);
     }
-    return flowPage({ css: [], title: 'Test Issuing balance – Stripe', body: <main><h1>Test Issuing balance</h1><form method="post"><label>Amount<input name="amount" type="number" min="1" required /></label><button>Add test funds</button></form></main> });
+    return dashboardPage(ctx, { title: 'Issuing balance', section: 'Issuing', path: '/test/issuing/balance', body: <div className="pd"><p className="pd-lead">Add test funds before creating test Issuing transactions.</p>{new URL(ctx.call.request.url).searchParams.has('funded') ? <p className="pd-notice pd-saved" role="status">Test funds were added to your Issuing balance.</p> : null}<form className="pd-card" method="post" action={`${ctx.publicBase}/test/issuing/balance`}><label htmlFor="issuing-amount">Amount</label><small>USD cents. These funds belong to this test account.</small><input id="issuing-amount" name="amount" type="number" min="1" step="1" required/><div className="pd-actions"><button type="submit">Add test funds</button></div></form></div> });
   }
   return path === PUBLIC_DETAILS_PATH ? publicDetails(ctx) : notFound();
 }
-