mppx 0.5.4 → 0.5.6

package/dist/tempo/server/internal/html.gen.js.map

@@ -1 +1 @@
-{"version":3,"file":"html.gen.js","sourceRoot":"","sources":["../../../../src/tempo/server/internal/html.gen.ts"],"names":[],"mappings":"AAAA,2BAA2B;AAC3B,MAAM,CAAC,MAAM,IAAI,GAAG,2r9aAA2r9a,CAAA"}
+{"version":3,"file":"html.gen.js","sourceRoot":"","sources":["../../../../src/tempo/server/internal/html.gen.ts"],"names":[],"mappings":"AAAA,2BAA2B;AAC3B,MAAM,CAAC,MAAM,IAAI,GAAG,q7+aAAq7+a,CAAA"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mppx",
   "type": "module",
-  "version": "0.5.4",
+  "version": "0.5.6",
   "main": "./dist/index.js",
   "license": "MIT",
   "files": [
@@ -75,6 +75,11 @@
       "src": "./src/tempo/index.ts",
       "default": "./dist/tempo/index.js"
     },
+    "./html": {
+      "types": "./dist/Html.d.ts",
+      "src": "./src/Html.ts",
+      "default": "./dist/Html.js"
+    },
     "./hono": {
       "types": "./dist/middlewares/hono.d.ts",
       "src": "./src/middlewares/hono.ts",

package/src/Html.ts

@@ -0,0 +1,57 @@
+import { Json } from 'ox'
+
+import type * as Method from './Method.js'
+import { attrs, type Data, ids, vars } from './server/internal/html/config.js'
+import { submitCredential } from './server/internal/html/serviceWorker.client.js'
+
+export function init<
+  method extends Method.Method = Method.Method,
+  config extends Record<string, unknown> = {},
+>(methodName: method['name']): Context<method, config> {
+  const element = document.getElementById(ids.data)!
+  const dataMap = Json.parse(element.textContent) as Record<string, Data<method, config>>
+
+  const remaining = element.getAttribute(attrs.remaining)
+  if (!remaining || Number(remaining) <= 1) element.remove()
+  else element.setAttribute(attrs.remaining, String(Number(remaining) - 1))
+
+  const script = document.currentScript
+  const challengeId = script?.getAttribute(attrs.challengeId)
+  const data = challengeId
+    ? (script!.removeAttribute(attrs.challengeId), dataMap[challengeId]!)
+    : Object.values(dataMap).find((d) => d.challenge.method === methodName)!
+
+  return {
+    ...data,
+    error(message?: string | null | undefined) {
+      if (!message) {
+        document.getElementById(ids.error)?.remove()
+        return
+      }
+      const existing = document.getElementById(ids.error)
+      if (existing) {
+        existing.textContent = message
+        return
+      }
+      const el = document.createElement('p')
+      el.id = ids.error
+      el.className = 'mppx-error'
+      el.role = 'alert'
+      el.textContent = message
+      document.getElementById(data.rootId)?.after(el)
+    },
+    root: document.getElementById(data.rootId)!,
+    submit: submitCredential,
+    vars,
+  }
+}
+
+export type Context<
+  method extends Method.Method = Method.Method,
+  config extends Record<string, unknown> = {},
+> = Data<method, config> & {
+  error: (message?: string | null | undefined) => void
+  root: HTMLElement
+  submit: (credential: string) => Promise<void>
+  vars: typeof vars
+}

package/src/server/Mppx.test.ts

@@ -1184,6 +1184,209 @@ describe('compose', () => {
 
     expect(result.status).toBe(200)
   })
+
+  describe('html', () => {
+    const htmlOptionsA = {
+      config: { providerA: true },
+      content: '<script src="/alpha-bundle.js"></script>',
+      formatAmount: (request: Record<string, unknown>) => `$${request.amount}`,
+      text: undefined,
+      theme: undefined,
+    }
+
+    const htmlOptionsB = {
+      config: { providerB: true },
+      content: '<script src="/beta-bundle.js"></script>',
+      formatAmount: (request: Record<string, unknown>) => `$${request.amount}`,
+      text: undefined,
+      theme: undefined,
+    }
+
+    const alphaWithHtml = Method.toServer(mockChargeA, {
+      html: htmlOptionsA,
+      async verify() {
+        return mockReceipt('alpha')
+      },
+    })
+
+    const betaWithHtml = Method.toServer(mockChargeB, {
+      html: htmlOptionsB,
+      async verify() {
+        return mockReceipt('beta')
+      },
+    })
+
+    test('returns html with tabs when multiple methods have html', async () => {
+      const mppx = Mppx.create({
+        methods: [alphaWithHtml, betaWithHtml],
+        realm,
+        secretKey,
+      })
+
+      const handle = mppx.compose([alphaWithHtml, challengeOpts], [betaWithHtml, challengeOpts])
+
+      const result = await handle(
+        new Request('https://example.com/resource', {
+          headers: { Accept: 'text/html' },
+        }),
+      )
+
+      expect(result.status).toBe(402)
+      if (result.status !== 402) throw new Error()
+
+      const body = await result.challenge.text()
+      expect(result.challenge.headers.get('Content-Type')).toBe('text/html; charset=utf-8')
+
+      // Tab a11y markup
+      expect(body).toContain('role="tablist"')
+      expect(body).toContain('role="tab"')
+      expect(body).toContain('role="tabpanel"')
+      expect(body).toContain('aria-selected="true"')
+      expect(body).toContain('aria-controls="mppx-panel-0"')
+      expect(body).toContain('aria-controls="mppx-panel-1"')
+
+      // Tab labels from method names (capitalized via CSS)
+      expect(body).toContain('alpha')
+      expect(body).toContain('beta')
+
+      // Both method bundles included
+      expect(body).toContain('/alpha-bundle.js')
+      expect(body).toContain('/beta-bundle.js')
+
+      // Data map with both entries
+      const dataMatch = body.match(
+        /<script[^>]*id="__MPPX_DATA__"[^>]*type="application\/json"[^>]*>\s*([\s\S]*?)\s*<\/script>/s,
+      )
+      expect(dataMatch).not.toBeNull()
+      const dataMap = JSON.parse(dataMatch![1]!.replace(/\\u003c/g, '<'))
+      const dataValues = Object.values(dataMap) as { label: string; config: unknown }[]
+      expect(dataValues).toHaveLength(2)
+      expect(dataValues[0]!.label).toBe('alpha')
+      expect(dataValues[0]!.config).toEqual({ providerA: true })
+      expect(dataValues[1]!.label).toBe('beta')
+      expect(dataValues[1]!.config).toEqual({ providerB: true })
+    })
+
+    test('returns html without tabs when single method has html', async () => {
+      const mppx = Mppx.create({
+        methods: [alphaWithHtml, betaMethod],
+        realm,
+        secretKey,
+      })
+
+      const handle = mppx.compose([alphaWithHtml, challengeOpts], [betaMethod, challengeOpts])
+
+      const result = await handle(
+        new Request('https://example.com/resource', {
+          headers: { Accept: 'text/html' },
+        }),
+      )
+
+      expect(result.status).toBe(402)
+      if (result.status !== 402) throw new Error()
+
+      const body = await result.challenge.text()
+      expect(result.challenge.headers.get('Content-Type')).toBe('text/html; charset=utf-8')
+
+      // No tabs when only one method has html
+      expect(body).not.toContain('role="tablist"')
+      expect(body).not.toContain('role="tab"')
+
+      // Single panel present
+      expect(body).toContain('mppx-panel-0')
+      expect(body).toContain('/alpha-bundle.js')
+
+      // Data map with single entry
+      const dataMatch = body.match(
+        /<script[^>]*id="__MPPX_DATA__"[^>]*type="application\/json"[^>]*>\s*([\s\S]*?)\s*<\/script>/s,
+      )
+      const dataMap = JSON.parse(dataMatch![1]!.replace(/\\u003c/g, '<'))
+      const dataValues = Object.values(dataMap) as { label: string }[]
+      expect(dataValues).toHaveLength(1)
+      expect(dataValues[0]!.label).toBe('alpha')
+    })
+
+    test('falls back to json when Accept does not include text/html', async () => {
+      const mppx = Mppx.create({
+        methods: [alphaWithHtml, betaWithHtml],
+        realm,
+        secretKey,
+      })
+
+      const handle = mppx.compose([alphaWithHtml, challengeOpts], [betaWithHtml, challengeOpts])
+
+      const result = await handle(new Request('https://example.com/resource'))
+
+      expect(result.status).toBe(402)
+      if (result.status !== 402) throw new Error()
+
+      const contentType = result.challenge.headers.get('Content-Type')
+      expect(contentType).not.toContain('text/html')
+    })
+
+    test('serves service worker when __mppx_worker param is set', async () => {
+      const mppx = Mppx.create({
+        methods: [alphaWithHtml, betaWithHtml],
+        realm,
+        secretKey,
+      })
+
+      const handle = mppx.compose([alphaWithHtml, challengeOpts], [betaWithHtml, challengeOpts])
+
+      const result = await handle(new Request('https://example.com/resource?__mppx_worker'))
+
+      expect(result.status).toBe(402)
+      if (result.status !== 402) throw new Error()
+
+      expect(result.challenge.status).toBe(200)
+      expect(result.challenge.headers.get('Content-Type')).toBe('application/javascript')
+    })
+
+    test('returns json when no methods have html configured', async () => {
+      const mppx = Mppx.create({
+        methods: [alphaMethod, betaMethod],
+        realm,
+        secretKey,
+      })
+
+      const handle = mppx.compose([alphaMethod, challengeOpts], [betaMethod, challengeOpts])
+
+      const result = await handle(
+        new Request('https://example.com/resource', {
+          headers: { Accept: 'text/html' },
+        }),
+      )
+
+      expect(result.status).toBe(402)
+      if (result.status !== 402) throw new Error()
+
+      const contentType = result.challenge.headers.get('Content-Type')
+      expect(contentType).not.toContain('text/html')
+    })
+
+    test('both WWW-Authenticate headers present even with html', async () => {
+      const mppx = Mppx.create({
+        methods: [alphaWithHtml, betaWithHtml],
+        realm,
+        secretKey,
+      })
+
+      const handle = mppx.compose([alphaWithHtml, challengeOpts], [betaWithHtml, challengeOpts])
+
+      const result = await handle(
+        new Request('https://example.com/resource', {
+          headers: { Accept: 'text/html' },
+        }),
+      )
+
+      expect(result.status).toBe(402)
+      if (result.status !== 402) throw new Error()
+
+      const wwwAuth = result.challenge.headers.get('WWW-Authenticate')!
+      expect(wwwAuth).toContain('method="alpha"')
+      expect(wwwAuth).toContain('method="beta"')
+    })
+  })
 })
 
 describe('compose: pre-dispatch narrowing edge cases', () => {

package/src/server/Mppx.ts

@@ -10,6 +10,8 @@ import type * as Method from '../Method.js'
 import * as PaymentRequest from '../PaymentRequest.js'
 import type * as Receipt from '../Receipt.js'
 import type * as z from '../zod.js'
+import * as Html from './internal/html/config.js'
+import { serviceWorker } from './internal/html/serviceWorker.gen.js'
 import * as NodeListener from './NodeListener.js'
 import * as Request from './Request.js'
 import * as Transport from './Transport.js'
@@ -645,6 +647,7 @@ type ConfiguredHandler = ((input: Request) => Promise<MethodFn.Response<Transpor
   _internal: {
     name: string
     intent: string
+    html: Html.Options | undefined
     _canonicalRequest: Record<string, unknown>
   }
 }
@@ -697,12 +700,52 @@ type ComposeEntry<methods extends readonly Method.AnyServer[]> =
  * })
  * ```
  */
+type ComposeHtmlOptions = { theme?: Html.Theme; text?: Html.Text }
+
 export function compose(
-  ...handlers: readonly ((input: Request) => Promise<MethodFn.Response<Transport.Http>>)[]
+  ...args: readonly unknown[]
 ): (input: Request) => Promise<MethodFn.Response<Transport.Http>> {
+  // Extract optional html options from last argument
+  const last = args[args.length - 1]
+  const composeOptions: Html.Options | undefined =
+    typeof last === 'object' &&
+    last !== null &&
+    typeof last !== 'function' &&
+    !('_internal' in last)
+      ? (() => {
+          const opts = last as ComposeHtmlOptions
+          return {
+            config: {},
+            content: '',
+            formatAmount: () => '',
+            text: opts.text,
+            theme: opts.theme,
+          }
+        })()
+      : undefined
+  const handlers = (composeOptions ? args.slice(0, -1) : args) as readonly ((
+    input: Request,
+  ) => Promise<MethodFn.Response<Transport.Http>>)[]
+
   if (handlers.length === 0) throw new Error('compose() requires at least one handler')
 
   return async (input: Request) => {
+    // Serve service worker for html-enabled compose
+    if (new URL(input.url).searchParams.has(Html.params.serviceWorker)) {
+      const hasHtml = handlers.some((h) => (h as ConfiguredHandler)._internal?.html)
+      if (hasHtml)
+        return {
+          status: 402,
+          challenge: new Response(serviceWorker, {
+            status: 200,
+            headers: {
+              'Content-Type': 'application/javascript',
+              'Cache-Control': 'no-store',
+            },
+          }),
+        } as MethodFn.Response<Transport.Http>
+    }
+
     // Try to extract a Payment credential to decide whether to dispatch or challenge.
     // Only gate on the Payment scheme — other auth schemes (Bearer, Basic, etc.)
     // should fall through to the merged-402 path so all offers are presented.
@@ -754,17 +797,89 @@ export function compose(
     const mergedHeaders = new Headers()
     mergedHeaders.set('Cache-Control', 'no-store')
 
-    let body: string | null = null
     for (const result of results) {
       if (result.status !== 402) continue
       const response = result.challenge as Response
       const wwwAuth = response.headers.get('WWW-Authenticate')
       if (wwwAuth) mergedHeaders.append('WWW-Authenticate', wwwAuth)
-      // Use the first handler's body for the problem details response.
+    }
+
+    // Collect html-enabled handlers and their challenges
+    const htmlEntries = (() => {
+      const entries: {
+        handler: ConfiguredHandler
+        challenge: Challenge.Challenge
+      }[] = []
+      for (let i = 0; i < handlers.length; i++) {
+        const meta = (handlers[i] as ConfiguredHandler)._internal
+        if (!meta?.html) continue
+        const result = results[i]
+        if (result?.status !== 402) continue
+        const wwwAuth = result.challenge.headers.get('WWW-Authenticate')
+        if (!wwwAuth) continue
+        entries.push({
+          handler: handlers[i] as ConfiguredHandler,
+          challenge: Challenge.deserialize(wwwAuth),
+        })
+      }
+      return entries
+    })()
+
+    const wantsHtml = input.headers.get('Accept')?.includes('text/html')
+    if (wantsHtml && htmlEntries.length > 0) {
+      const { theme, text } = Html.resolveOptions(
+        // Use compose-level options or first html-enabled method's config for the page shell
+        composeOptions ?? htmlEntries[0]?.handler._internal.html ?? ({} as Html.Options),
+      )
+
+      // Build data map keyed by challenge.id
+      const dataMap: Record<string, Html.Data> = {}
+      for (let i = 0; i < htmlEntries.length; i++) {
+        const entry = htmlEntries[i]!
+        dataMap[entry.challenge.id] = {
+          label: entry.handler._internal.name,
+          rootId: `${Html.ids.root}-${i}`,
+          formattedAmount: await entry.handler._internal.html!.formatAmount(
+            entry.challenge.request,
+          ),
+          config: entry.handler._internal.html!.config,
+          challenge: entry.challenge as never,
+          text,
+          theme,
+        }
+      }
+
+      mergedHeaders.set('Content-Type', 'text/html; charset=utf-8')
+
+      const firstData = Object.values(dataMap)[0]!
+      const body = Html.render({
+        entries: htmlEntries.map((entry) => ({
+          challenge: entry.challenge,
+          content: entry.handler._internal.html!.content,
+        })),
+        dataMap,
+        formattedAmount: firstData.formattedAmount,
+        panels: true,
+        text,
+        theme,
+      })
+
+      return {
+        status: 402,
+        challenge: new Response(body, { status: 402, headers: mergedHeaders }),
+      }
+    }
+
+    // Non-HTML fallback: use first handler's body
+    let body: string | null = null
+    for (const result of results) {
+      if (result.status !== 402) continue
       if (!body) {
+        const response = result.challenge as Response
         const contentType = response.headers.get('Content-Type')
         if (contentType) mergedHeaders.set('Content-Type', contentType)
         body = await response.text()
+        break
       }
     }
 

package/src/server/Transport.test.ts

@@ -285,11 +285,14 @@ describe('http', () => {
       const body = await response.text()
       // Extract the JSON data from the script tag
       const dataMatch = body.match(
-        /<script id="__MPPX_DATA__" type="application\/json">\s*([\s\S]*?)\s*<\/script>/,
+        /<script[^>]*id="__MPPX_DATA__"[^>]*type="application\/json"[^>]*>\s*([\s\S]*?)\s*<\/script>/s,
       )
       expect(dataMatch).not.toBeNull()
 
-      const data = JSON.parse(dataMatch?.[1]?.replace(/\\u003c/g, '<') ?? '')
+      const dataMap = JSON.parse(dataMatch?.[1]?.replace(/\\u003c/g, '<') ?? '')
+      expect(typeof dataMap).toBe('object')
+      expect(Object.keys(dataMap)).toHaveLength(1)
+      const data = dataMap[challenge.id]
       expect(data.config).toEqual({ foo: 'bar' })
       expect(data.challenge.id).toBe(challenge.id)
       expect(data.challenge.method).toBe('tempo')

package/src/server/Transport.ts

@@ -1,5 +1,3 @@
-import { Json } from 'ox'
-
 import * as Challenge from '../Challenge.js'
 import * as Credential from '../Credential.js'
 import * as Errors from '../Errors.js'
@@ -7,7 +5,6 @@ import type { Distribute, UnionToIntersection } from '../internal/types.js'
 import * as core_Mcp from '../Mcp.js'
 import * as Receipt from '../Receipt.js'
 import * as Html from './internal/html/config.js'
-import { html } from './internal/html/config.js'
 import { serviceWorker } from './internal/html/serviceWorker.gen.js'
 
 export { type McpSdk, mcpSdk } from '../mcp-sdk/server/Transport.js'
@@ -132,7 +129,7 @@ export function http(): Http {
     async respondChallenge(options) {
       const { challenge, error, input } = options
 
-      if (options.html && new URL(input.url).searchParams.has(Html.serviceWorkerParam))
+      if (options.html && new URL(input.url).searchParams.has(Html.params.serviceWorker))
         return new Response(serviceWorker, {
           status: 200,
           headers: {
@@ -150,58 +147,28 @@ export function http(): Http {
         if (options.html && input.headers.get('Accept')?.includes('text/html')) {
           headers['Content-Type'] = 'text/html; charset=utf-8'
 
-          const theme = Html.mergeDefined(
-            {
-              favicon: undefined as Html.Theme['favicon'],
-              fontUrl: undefined as Html.Theme['fontUrl'],
-              logo: undefined as Html.Theme['logo'],
-              ...Html.defaultTheme,
-            },
-            (options.html.theme as never) ?? {},
-          )
-          const text = Html.sanitizeRecord(
-            Html.mergeDefined(Html.defaultText, (options.html.text as never) ?? {}),
-          )
+          const { theme, text } = Html.resolveOptions(options.html)
           const amount = await options.html.formatAmount(challenge.request)
 
-          return html`<!doctype html>
-            <html lang="en">
-              <head>
-                <meta charset="UTF-8" />
-                <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-                <meta name="robots" content="noindex" />
-                <meta name="color-scheme" content="${theme.colorScheme}" />
-                <title>${text.title}</title>
-                ${Html.favicon(theme, challenge.realm)} ${Html.font(theme)} ${Html.style(theme)}
-              </head>
-              <body>
-                <main>
-                  <header class="${Html.classNames.header}">
-                    ${Html.logo(theme)}
-                    <span>${text.paymentRequired}</span>
-                  </header>
-                  <section class="${Html.classNames.summary}" aria-label="Payment summary">
-                    <h1 class="${Html.classNames.summaryAmount}">${Html.sanitize(amount)}</h1>
-                    ${challenge.description
-                      ? `<p class="${Html.classNames.summaryDescription}">${Html.sanitize(challenge.description)}</p>`
-                      : ''}
-                    ${challenge.expires
-                      ? `<p class="${Html.classNames.summaryExpires}">${text.expires} <time datetime="${new Date(challenge.expires).toISOString()}">${new Date(challenge.expires).toLocaleString()}</time></p>`
-                      : ''}
-                  </section>
-                  <div id="${Html.rootId}" aria-label="Payment form"></div>
-                  <script id="${Html.dataId}" type="application/json">
-                    ${Json.stringify({
-                      config: options.html.config,
-                      challenge,
-                      text,
-                      theme,
-                    } satisfies Html.Data).replace(/</g, '\\u003c')}
-                  </script>
-                  ${options.html.content}
-                </main>
-              </body>
-            </html> `
+          const dataMap = {
+            [challenge.id]: {
+              label: challenge.method,
+              rootId: Html.ids.root,
+              formattedAmount: amount,
+              config: options.html.config,
+              challenge,
+              text,
+              theme,
+            },
+          } satisfies Record<string, Html.Data>
+
+          return Html.render({
+            entries: [{ challenge, content: options.html.content }],
+            dataMap,
+            formattedAmount: amount,
+            text,
+            theme,
+          })
         }
         if (error) {
           headers['Content-Type'] = 'application/problem+json'

package/src/server/internal/html/compose.main.gen.ts

@@ -0,0 +1,2 @@
+// Generated — do not edit.
+export const tabScript = "<script>(function(){let e={serviceWorker:`__mppx_worker`,tab:`__mppx_tab`},t={error:`mppx-error`,header:`mppx-header`,logo:`mppx-logo`,summary:`mppx-summary`,summaryAmount:`mppx-summary-amount`,summaryDescription:`mppx-summary-description`,summaryExpires:`mppx-summary-expires`,tab:`mppx-tab`,tabList:`mppx-tablist`,tabPanel:`mppx-tabpanel`},n=document.querySelector(`.${t.tabList}`),r=document.querySelector(`.${t.summary}`),i=r.querySelector(`.${t.summaryAmount}`),a=Array.from(n.querySelectorAll(`[role=\"tab\"]`)),o=[],s={};for(let e of a){let t=e.textContent.trim().toLowerCase();s[t]=(s[t]||0)+1,o.push(s[t]===1?t:`${t}-${s[t]}`)}function c(e){if(i.textContent=e.dataset.amount,r.querySelector(`.${t.summaryDescription}`)?.remove(),e.dataset.description){let n=document.createElement(`p`);n.className=t.summaryDescription,n.textContent=e.dataset.description,i.after(n)}if(r.querySelector(`.${t.summaryExpires}`)?.remove(),e.dataset.expires){let n=document.createElement(`p`);n.className=t.summaryExpires;let i=new Date(e.dataset.expires),a=document.createElement(`time`);a.dateTime=i.toISOString(),a.textContent=i.toLocaleString(),n.textContent=`${e.dataset.expiresLabel} `,n.appendChild(a),r.appendChild(n)}}function l(t,n=!0){if(a.forEach(e=>{e.setAttribute(`aria-selected`,`false`),e.setAttribute(`tabindex`,`-1`)}),t.setAttribute(`aria-selected`,`true`),t.removeAttribute(`tabindex`),t.focus(),document.querySelectorAll(`[role=\"tabpanel\"]`).forEach(e=>{e.hidden=!0}),document.getElementById(t.getAttribute(`aria-controls`)).hidden=!1,c(t),n){let n=new URL(location.href);n.searchParams.set(e.tab,o[a.indexOf(t)]),history.replaceState(null,``,n)}}let u=new URL(location.href).searchParams.get(e.tab);if(u!==null){let e=o.indexOf(u);e>=0&&l(a[e],!1)}n.addEventListener(`click`,e=>{let t=e.target.closest(`[role=\"tab\"]`);t&&l(t)}),n.addEventListener(`keydown`,e=>{let t=a.indexOf(e.target);if(t<0)return;let n;e.key===`ArrowRight`?n=a[(t+1)%a.length]:e.key===`ArrowLeft`?n=a[(t-1+a.length)%a.length]:e.key===`Home`?n=a[0]:e.key===`End`&&(n=a[a.length-1]),n&&(e.preventDefault(),l(n))})})();</script>"

package/src/server/internal/html/compose.main.ts

@@ -0,0 +1,88 @@
+import { classNames, params } from './constants.js'
+
+const tablist = document.querySelector<HTMLElement>(`.${classNames.tabList}`)!
+const summary = document.querySelector<HTMLElement>(`.${classNames.summary}`)!
+const amount = summary.querySelector<HTMLElement>(`.${classNames.summaryAmount}`)!
+const tabs = Array.from(tablist.querySelectorAll<HTMLElement>('[role="tab"]'))
+
+// Generate unique slugs: tempo, stripe, stripe-2
+const slugs: string[] = []
+const counts: Record<string, number> = {}
+for (const tab of tabs) {
+  const name = tab.textContent!.trim().toLowerCase()
+  counts[name] = (counts[name] || 0) + 1
+  slugs.push(counts[name] === 1 ? name : `${name}-${counts[name]}`)
+}
+
+function updateSummary(tab: HTMLElement) {
+  amount.textContent = tab.dataset.amount!
+
+  summary.querySelector(`.${classNames.summaryDescription}`)?.remove()
+  if (tab.dataset.description) {
+    const p = document.createElement('p')
+    p.className = classNames.summaryDescription
+    p.textContent = tab.dataset.description
+    amount.after(p)
+  }
+
+  summary.querySelector(`.${classNames.summaryExpires}`)?.remove()
+  if (tab.dataset.expires) {
+    const p = document.createElement('p')
+    p.className = classNames.summaryExpires
+    const date = new Date(tab.dataset.expires)
+    const time = document.createElement('time')
+    time.dateTime = date.toISOString()
+    time.textContent = date.toLocaleString()
+    p.textContent = `${tab.dataset.expiresLabel} `
+    p.appendChild(time)
+    summary.appendChild(p)
+  }
+}
+
+function activate(tab: HTMLElement, updateUrl = true) {
+  tabs.forEach((t) => {
+    t.setAttribute('aria-selected', 'false')
+    t.setAttribute('tabindex', '-1')
+  })
+  tab.setAttribute('aria-selected', 'true')
+  tab.removeAttribute('tabindex')
+  tab.focus()
+  document.querySelectorAll<HTMLElement>('[role="tabpanel"]').forEach((p) => {
+    p.hidden = true
+  })
+  document.getElementById(tab.getAttribute('aria-controls')!)!.hidden = false
+
+  updateSummary(tab)
+
+  if (updateUrl) {
+    const url = new URL(location.href)
+    url.searchParams.set(params.tab, slugs[tabs.indexOf(tab)]!)
+    history.replaceState(null, '', url)
+  }
+}
+
+// Restore tab from URL on load
+const initial = new URL(location.href).searchParams.get(params.tab)
+if (initial !== null) {
+  const index = slugs.indexOf(initial)
+  if (index >= 0) activate(tabs[index]!, false)
+}
+
+tablist.addEventListener('click', (event) => {
+  const tab = (event.target as HTMLElement).closest<HTMLElement>('[role="tab"]')
+  if (tab) activate(tab)
+})
+
+tablist.addEventListener('keydown', (event) => {
+  const index = tabs.indexOf(event.target as HTMLElement)
+  if (index < 0) return
+  let next: HTMLElement | undefined
+  if (event.key === 'ArrowRight') next = tabs[(index + 1) % tabs.length]
+  else if (event.key === 'ArrowLeft') next = tabs[(index - 1 + tabs.length) % tabs.length]
+  else if (event.key === 'Home') next = tabs[0]
+  else if (event.key === 'End') next = tabs[tabs.length - 1]
+  if (next) {
+    event.preventDefault()
+    activate(next)
+  }
+})