npm - mppx - Versions diffs - 0.5.1 → 0.5.4 - Mend

mppx 0.5.1 → 0.5.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (111) hide show

package/CHANGELOG.md +20 -0
package/dist/Credential.d.ts +12 -0
package/dist/Credential.d.ts.map +1 -1
package/dist/Credential.js +22 -4
package/dist/Credential.js.map +1 -1
package/dist/Method.d.ts +4 -0
package/dist/Method.d.ts.map +1 -1
package/dist/Method.js +2 -1
package/dist/Method.js.map +1 -1
package/dist/cli/cli.d.ts.map +1 -1
package/dist/cli/cli.js +11 -9
package/dist/cli/cli.js.map +1 -1
package/dist/cli/plugins/tempo.d.ts.map +1 -1
package/dist/cli/plugins/tempo.js +3 -3
package/dist/cli/plugins/tempo.js.map +1 -1
package/dist/cli/utils.d.ts +2 -0
package/dist/cli/utils.d.ts.map +1 -1
package/dist/cli/utils.js +10 -5
package/dist/cli/utils.js.map +1 -1
package/dist/proxy/Proxy.d.ts.map +1 -1
package/dist/proxy/Proxy.js +52 -8
package/dist/proxy/Proxy.js.map +1 -1
package/dist/proxy/internal/Route.d.ts.map +1 -1
package/dist/proxy/internal/Route.js +7 -3
package/dist/proxy/internal/Route.js.map +1 -1
package/dist/server/Mppx.d.ts.map +1 -1
package/dist/server/Mppx.js +90 -71
package/dist/server/Mppx.js.map +1 -1
package/dist/server/Transport.d.ts +5 -1
package/dist/server/Transport.d.ts.map +1 -1
package/dist/server/Transport.js +71 -7
package/dist/server/Transport.js.map +1 -1
package/dist/server/internal/html/config.d.ts +144 -0
package/dist/server/internal/html/config.d.ts.map +1 -0
package/dist/server/internal/html/config.js +303 -0
package/dist/server/internal/html/config.js.map +1 -0
package/dist/server/internal/html/serviceWorker.gen.d.ts +2 -0
package/dist/server/internal/html/serviceWorker.gen.d.ts.map +1 -0
package/dist/server/internal/html/serviceWorker.gen.js +3 -0
package/dist/server/internal/html/serviceWorker.gen.js.map +1 -0
package/dist/stripe/internal/types.d.ts +6 -0
package/dist/stripe/internal/types.d.ts.map +1 -1
package/dist/stripe/server/Charge.d.ts +30 -16
package/dist/stripe/server/Charge.d.ts.map +1 -1
package/dist/stripe/server/Charge.js +35 -6
package/dist/stripe/server/Charge.js.map +1 -1
package/dist/stripe/server/internal/html/types.d.ts +2 -0
package/dist/stripe/server/internal/html/types.d.ts.map +1 -0
package/dist/stripe/server/internal/html/types.js +2 -0
package/dist/stripe/server/internal/html/types.js.map +1 -0
package/dist/stripe/server/internal/html.gen.d.ts +2 -0
package/dist/stripe/server/internal/html.gen.d.ts.map +1 -0
package/dist/stripe/server/internal/html.gen.js +3 -0
package/dist/stripe/server/internal/html.gen.js.map +1 -0
package/dist/tempo/server/Charge.d.ts +33 -26
package/dist/tempo/server/Charge.d.ts.map +1 -1
package/dist/tempo/server/Charge.js +46 -11
package/dist/tempo/server/Charge.js.map +1 -1
package/dist/tempo/server/Session.d.ts.map +1 -1
package/dist/tempo/server/Session.js +3 -2
package/dist/tempo/server/Session.js.map +1 -1
package/dist/tempo/server/internal/html.gen.d.ts +2 -0
package/dist/tempo/server/internal/html.gen.d.ts.map +1 -0
package/dist/tempo/server/internal/html.gen.js +3 -0
package/dist/tempo/server/internal/html.gen.js.map +1 -0
package/dist/tempo/server/internal/transport.d.ts +1 -1
package/dist/tempo/server/internal/transport.d.ts.map +1 -1
package/dist/tempo/server/internal/transport.js +45 -58
package/dist/tempo/server/internal/transport.js.map +1 -1
package/package.json +2 -2
package/src/Credential.ts +28 -4
package/src/Method.ts +6 -1
package/src/cli/cli.ts +11 -8
package/src/cli/plugins/tempo.ts +3 -2
package/src/cli/utils.test.ts +64 -0
package/src/cli/utils.ts +10 -4
package/src/env.d.ts +1 -0
package/src/mcp-sdk/server/Transport.test.ts +6 -0
package/src/proxy/Proxy.test.ts +188 -1
package/src/proxy/Proxy.ts +58 -9
package/src/proxy/internal/Route.test.ts +9 -0
package/src/proxy/internal/Route.ts +5 -2
package/src/server/Mppx.test.ts +171 -18
package/src/server/Mppx.ts +120 -79
package/src/server/Transport.test.ts +232 -2
package/src/server/Transport.ts +84 -7
package/src/server/internal/html/config.ts +414 -0
package/src/server/internal/html/serviceWorker.client.ts +28 -0
package/src/server/internal/html/serviceWorker.gen.ts +2 -0
package/src/server/internal/html/serviceWorker.ts +27 -0
package/src/server/internal/html/tsconfig.worker.client.json +8 -0
package/src/server/internal/html/tsconfig.worker.json +8 -0
package/src/stripe/internal/types.ts +20 -0
package/src/stripe/server/Charge.ts +62 -6
package/src/stripe/server/internal/html/main.ts +174 -0
package/src/stripe/server/internal/html/node_modules/.bin/mppx.src +21 -0
package/src/stripe/server/internal/html/package.json +9 -0
package/src/stripe/server/internal/html/stripe-js-pure.d.ts +7 -0
package/src/stripe/server/internal/html/tsconfig.json +8 -0
package/src/stripe/server/internal/html/types.ts +5 -0
package/src/stripe/server/internal/html.gen.ts +2 -0
package/src/tempo/server/Charge.ts +64 -10
package/src/tempo/server/Session.ts +3 -2
package/src/tempo/server/internal/html/main.ts +111 -0
package/src/tempo/server/internal/html/node_modules/.bin/mppx.src +21 -0
package/src/tempo/server/internal/html/package.json +10 -0
package/src/tempo/server/internal/html/tsconfig.json +8 -0
package/src/tempo/server/internal/html.gen.ts +2 -0
package/src/tempo/server/internal/transport.test.ts +37 -31
package/src/tempo/server/internal/transport.ts +44 -58
package/src/tsconfig.json +1 -1

package/src/server/Transport.ts CHANGED Viewed

@@ -1,9 +1,14 @@
+import { Json } from 'ox'
 import * as Challenge from '../Challenge.js'
 import * as Credential from '../Credential.js'
 import * as Errors from '../Errors.js'
 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'
@@ -30,11 +35,14 @@ export type Transport<
   respondChallenge: (options: {
     challenge: Challenge.Challenge
     error?: Errors.PaymentError | undefined
+    html?: Html.Options | undefined
     input: input
   }) => challengeOutput | Promise<challengeOutput>
   /** Attaches a receipt to a successful response. */
   respondReceipt: (options: {
     challengeId: string
+    credential: Credential.Credential
+    input: input
     receipt: Receipt.Receipt
     response: receiptResponse
   }) => receiptOutput
@@ -87,7 +95,7 @@ export type WithReceipt<transport extends AnyTransport = Http> = WithReceiptOver
  *   name: 'custom',
  *   getCredential(input) { ... },
  *   respondChallenge({ challenge, input }) { ... },
- *   respondReceipt({ receipt, response, challengeId }) { ... },
+ *   respondReceipt({ receipt, response, challengeId, credential, input }) { ... },
  * })
  * ```
  */
@@ -121,17 +129,86 @@ export function http(): Http {
       return Credential.deserialize(payment)
     },
-    respondChallenge({ challenge, error }) {
+    async respondChallenge(options) {
+      const { challenge, error, input } = options
+      if (options.html && new URL(input.url).searchParams.has(Html.serviceWorkerParam))
+        return new Response(serviceWorker, {
+          status: 200,
+          headers: {
+            'Content-Type': 'application/javascript',
+            'Cache-Control': 'no-store',
+          },
+        })
       const headers: Record<string, string> = {
         'WWW-Authenticate': Challenge.serialize(challenge),
         'Cache-Control': 'no-store',
       }
-      let body: string | null = null
-      if (error) {
-        headers['Content-Type'] = 'application/problem+json'
-        body = JSON.stringify(error.toProblemDetails(challenge.id))
-      }
+      const body = await (async () => {
+        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 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> `
+        }
+        if (error) {
+          headers['Content-Type'] = 'application/problem+json'
+          return JSON.stringify(error.toProblemDetails(challenge.id))
+        }
+        return null
+      })()
       return new Response(body, { status: error?.status ?? 402, headers })
     },

package/src/server/internal/html/config.ts ADDED Viewed

@@ -0,0 +1,414 @@
+import type * as Challenge from '../../../Challenge.js'
+import type * as Method from '../../../Method.js'
+export type Options = {
+  config: Record<string, unknown>
+  content: string
+  formatAmount: (request: any) => string | Promise<string>
+  text: Text | undefined
+  theme: Theme | undefined
+}
+export type Data<
+  method extends Method.Method = Method.Method,
+  config extends Record<string, unknown> = {},
+> = {
+  config: config
+  challenge: Challenge.FromMethods<[method]>
+  text: { [k in keyof Text]-?: NonNullable<Text[k]> }
+  theme: {
+    [k in keyof Omit<Theme, 'favicon' | 'fontUrl' | 'logo'>]-?: NonNullable<Theme[k]>
+  }
+}
+export const dataId = '__MPPX_DATA__'
+export const errorId = 'root_error'
+export const rootId = 'root'
+export const serviceWorkerParam = '__mppx_worker'
+export const classNames = {
+  error: 'mppx-error',
+  header: 'mppx-header',
+  logo: 'mppx-logo',
+  logoColorScheme: (colorScheme: string) =>
+    colorScheme === 'dark' || colorScheme === 'light'
+      ? `${classNames.logo}--${colorScheme}`
+      : undefined,
+  summary: 'mppx-summary',
+  summaryAmount: 'mppx-summary-amount',
+  summaryDescription: 'mppx-summary-description',
+  summaryExpires: 'mppx-summary-expires',
+}
+export function sanitize(str: string): string {
+  return str
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;')
+}
+export function sanitizeRecord<type extends Record<string, string>>(record: type): type {
+  return Object.fromEntries(
+    Object.entries(record).map(([key, value]) => [key, sanitize(value)]),
+  ) as type
+}
+export const html = String.raw
+class CssVar {
+  readonly name: string
+  constructor(token: string) {
+    this.name = `--mppx-${token}`
+  }
+  toString() {
+    return `var(${this.name})`
+  }
+}
+export const vars = {
+  accent: new CssVar('accent'),
+  background: new CssVar('background'),
+  border: new CssVar('border'),
+  foreground: new CssVar('foreground'),
+  muted: new CssVar('muted'),
+  negative: new CssVar('negative'),
+  positive: new CssVar('positive'),
+  surface: new CssVar('surface'),
+  fontFamily: new CssVar('font-family'),
+  fontSizeBase: new CssVar('font-size-base'),
+  radius: new CssVar('radius'),
+  spacingUnit: new CssVar('spacing-unit'),
+} as const
+export function font(theme: Theme) {
+  if (!theme.fontUrl) return ''
+  return html`<link
+      rel="preconnect"
+      href="${sanitize(new URL(theme.fontUrl).origin)}"
+      crossorigin
+    />
+    <link rel="stylesheet" href="${sanitize(theme.fontUrl)}" />`
+}
+export function style(theme: {
+  [k in keyof Omit<Theme, 'favicon' | 'fontUrl' | 'logo'>]-?: NonNullable<Theme[k]>
+}) {
+  const colors = Object.fromEntries(
+    colorTokens.map((name) => [name, resolveColor(theme[name], defaultTheme[name])]),
+  ) as Record<(typeof colorTokens)[number], readonly [light: string, dark: string]>
+  const lightVars = colorTokens
+    .map((token) => `${vars[token].name}: ${colors[token][0]};`)
+    .join('\n      ')
+  const darkVars = colorTokens
+    .map((token) => `${vars[token].name}: ${colors[token][1]};`)
+    .join('\n      ')
+  const isLightOnly = theme.colorScheme === 'light'
+  const isDarkOnly = theme.colorScheme === 'dark'
+  const rootVars = isDarkOnly ? darkVars : lightVars
+  const darkMedia =
+    !isLightOnly && !isDarkOnly
+      ? `\n    @media (prefers-color-scheme: dark) {\n      :root {\n        ${darkVars}\n      }\n    }`
+      : ''
+  return html`
+    <style>
+      ${reset}
+      :root {
+        color-scheme: ${theme.colorScheme};
+        ${vars.fontFamily.name}: ${theme.fontFamily};
+        ${vars.fontSizeBase.name}: ${theme.fontSizeBase};
+        ${vars.radius.name}: ${theme.radius};
+        ${vars.spacingUnit.name}: ${theme.spacingUnit};
+        ${rootVars}
+      }${darkMedia}
+      *:focus-visible {
+        outline-color: ${vars.accent};
+        outline-offset: 0.15rem;
+        outline-style: solid;
+        outline-width: 2px;
+      }
+      body {
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+        background: ${vars.background};
+        color: ${vars.foreground};
+        font-family: ${vars.fontFamily};
+        font-size: ${vars.fontSizeBase};
+      }
+      main {
+        display: flex;
+        flex-direction: column;
+        gap: calc(${vars.spacingUnit} * 8);
+        margin-left: auto;
+        margin-right: auto;
+        max-width: clamp(300px, calc(${vars.spacingUnit} * 224), 896px);
+        padding: calc(${vars.spacingUnit} * 12) calc(${vars.spacingUnit} * 8) calc(${vars.spacingUnit} * 16);
+      }
+      .${classNames.header} {
+        align-items: center;
+        display: flex;
+        flex-wrap: wrap;
+        gap: calc(${vars.spacingUnit} * 4);
+        justify-content: space-between;
+        span {
+          background: ${vars.surface};
+          border: 1px solid ${vars.border};
+          border-radius: calc(${vars.spacingUnit} * 50);
+          font-size: 0.75rem;
+          font-weight: 500;
+          letter-spacing: 0.025em;
+          padding: calc(${vars.spacingUnit} * 1) calc(${vars.spacingUnit} * 4);
+        }
+      }
+      .${classNames.logo} {
+        max-height: 1.75rem;
+      }
+      .${classNames.logoColorScheme('dark')} {
+        @media (prefers-color-scheme: light) {
+          display: none;
+        }
+      }
+      .${classNames.logoColorScheme('light')} {
+        @media (prefers-color-scheme: dark) {
+          display: none;
+        }
+      }
+      .${classNames.summary} {
+        background: ${vars.surface};
+        border: 1px solid ${vars.border};
+        border-radius: ${vars.radius};
+        display: flex;
+        flex-direction: column;
+        gap: calc(${vars.spacingUnit} * 3);
+        padding: calc(${vars.spacingUnit} * 6) calc(${vars.spacingUnit} * 6);
+      }
+      .${classNames.summaryAmount} {
+        font-size: 2.5rem;
+        font-variant-numeric: tabular-nums;
+        font-weight: 700;
+        line-height: 1.2;
+      }
+      .${classNames.summaryDescription} {
+        font-size: 1.25rem;
+      }
+      .${classNames.summaryExpires} {
+        color: ${vars.muted};
+      }
+      .${classNames.error} {
+        color: ${vars.negative};
+        font-size: 0.95rem;
+        margin-top: calc(${vars.spacingUnit} * -1.5);
+        text-align: center;
+      }
+    </style>
+  `
+}
+export function showError(message: string) {
+  const existing = document.getElementById(errorId)
+  if (existing) {
+    existing.textContent = message
+    return
+  }
+  const el = document.createElement('p')
+  el.id = errorId
+  el.className = classNames.error
+  el.role = 'alert'
+  el.textContent = message
+  document.getElementById(rootId)?.after(el)
+}
+export function favicon(theme: Theme, realm: string) {
+  if (typeof theme.favicon === 'string')
+    return html`<link rel="icon" href="${sanitize(theme.favicon)}" />`
+  if (typeof theme.favicon === 'object') {
+    return html`<link
+        rel="icon"
+        href="${sanitize(theme.favicon.light)}"
+        media="(prefers-color-scheme: light)"
+      />
+      <link
+        rel="icon"
+        href="${sanitize(theme.favicon.dark)}"
+        media="(prefers-color-scheme: dark)"
+      />`
+  }
+  // Fallback: use host's favicon via Google S2 service
+  try {
+    const domain = new URL(realm).hostname
+    return html`<link
+      rel="icon"
+      href="https://www.google.com/s2/favicons?domain=${domain}&sz=64"
+    />`
+  } catch {
+    return ''
+  }
+}
+export function logo(value: Theme) {
+  if (typeof value.logo === 'undefined') return ''
+  if (typeof value.logo === 'string')
+    return html`<img alt="" class="${classNames.logo}" src="${sanitize(value.logo)}" />`
+  return Object.entries(value.logo)
+    .map(
+      (entry) =>
+        html`<img
+          alt=""
+          class="${classNames.logo} ${classNames.logoColorScheme(entry[0])}"
+          src="${sanitize(entry[1])}"
+        />`,
+    )
+    .join('\n')
+}
+export type Text = {
+  /** Prefix for the expiry line. @default 'Expires at' */
+  expires?: string | undefined
+  /** Pay button label. @default 'Pay' */
+  pay?: string | undefined
+  /** Badge label. @default 'Payment Required' */
+  paymentRequired?: string | undefined
+  /** Page title. @default text.paymentRequired */
+  title?: string | undefined
+}
+export const defaultText = {
+  expires: 'Expires at',
+  pay: 'Pay',
+  paymentRequired: 'Payment Required',
+  title: 'Payment Required',
+} as const satisfies Required<Text>
+export type Theme = {
+  /** Color scheme. @default 'light dark' */
+  colorScheme?: 'light' | 'dark' | 'light dark' | undefined
+  /** Font family. @default 'system-ui, -apple-system, sans-serif' */
+  fontFamily?: string | undefined
+  /** Base font size. @default '16px' */
+  fontSizeBase?: string | undefined
+  /** Font URL to inject (e.g. Google Fonts `<link>`). */
+  fontUrl?: string | undefined
+  /** Favicon URL. Light/dark variants supported. Falls back to host's favicon via Google S2 service. */
+  favicon?: string | { light: string; dark: string } | undefined
+  /** Logo URL shown in header. Light/dark variants supported. */
+  logo?: string | { light: string; dark: string } | undefined
+  /** Border radius. @default '6px' */
+  radius?: string | undefined
+  /** The base spacing unit that all other spacing is derived from. Increase or decrease this value to make your layout more or less spacious. @default '2px' */
+  spacingUnit?: string | undefined
+  /** Accent color (buttons, links). @default ['#171717', '#ededed'] */
+  accent?: LightDark | undefined
+  /** Page background. @default ['#ffffff', '#0a0a0a'] */
+  background?: LightDark | undefined
+  /** Border color. @default ['#e5e5e5', '#2e2e2e'] */
+  border?: LightDark | undefined
+  /** Primary text/content color. @default ['#0a0a0a', '#ededed'] */
+  foreground?: LightDark | undefined
+  /** Secondary/muted text. @default ['#666666', '#a1a1a1'] */
+  muted?: LightDark | undefined
+  /** Error/danger color. @default ['#e5484d', '#e5484d'] */
+  negative?: LightDark | undefined
+  /** Success color. @default ['#30a46c', '#30a46c'] */
+  positive?: LightDark | undefined
+  /** Input/card surface. @default ['#f5f5f5', '#1a1a1a'] */
+  surface?: LightDark | undefined
+}
+export type LightDark = string | readonly [light: string, dark: string]
+export const defaultTheme = {
+  colorScheme: 'light dark',
+  fontFamily: 'system-ui, -apple-system, sans-serif',
+  fontSizeBase: '16px',
+  radius: '6px',
+  spacingUnit: '2px',
+  accent: ['#171717', '#ededed'],
+  background: ['#ffffff', '#0a0a0a'],
+  border: ['#e5e5e5', '#2e2e2e'],
+  foreground: ['#0a0a0a', '#ededed'],
+  muted: ['#666666', '#a1a1a1'],
+  negative: ['#e5484d', '#e5484d'],
+  positive: ['#30a46c', '#30a46c'],
+  surface: ['#f5f5f5', '#1a1a1a'],
+} as const satisfies Required<Omit<Theme, 'favicon' | 'fontUrl' | 'logo'>>
+export const colorTokens = [
+  'accent',
+  'negative',
+  'positive',
+  'background',
+  'foreground',
+  'muted',
+  'surface',
+  'border',
+] as const satisfies readonly (keyof typeof defaultTheme)[]
+export function resolveColor(
+  value: Theme[(typeof colorTokens)[number]] | undefined,
+  fallback: readonly [string, string],
+): readonly [light: string, dark: string] {
+  if (!value) return fallback
+  if (typeof value === 'string') return [value, value]
+  return value
+}
+export function mergeDefined<type>(defaults: type, value: DeepPartial<type> | undefined): type {
+  if (value === undefined) return defaults
+  if (!isPlainObject(defaults) || !isPlainObject(value)) return (value ?? defaults) as type
+  const result: Record<string, unknown> = { ...defaults }
+  for (const [key, nextValue] of Object.entries(value)) {
+    if (nextValue === undefined) continue
+    const currentValue = result[key]
+    result[key] =
+      isPlainObject(currentValue) && isPlainObject(nextValue)
+        ? mergeDefined(currentValue, nextValue)
+        : nextValue
+  }
+  return result as type
+}
+type DeepPartial<type> = {
+  [key in keyof type]?: type[key] extends readonly unknown[]
+    ? type[key] | undefined
+    : type[key] extends object
+      ? DeepPartial<type[key]> | undefined
+      : type[key] | undefined
+}
+function isPlainObject(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null && !Array.isArray(value)
+}
+// Slimmed down Tailwind preflight
+// https://github.com/tailwindlabs/tailwindcss/blob/main/packages/tailwindcss/preflight.css
+const reset = html`
+  *, ::after, ::before, ::backdrop, ::file-selector-button { box-sizing: border-box; margin: 0;
+  padding: 0; border: 0 solid; border-color: ${vars.border}; } html, :host { line-height: 1.5;
+  -webkit-text-size-adjust: 100%; tab-size: 4; -webkit-tap-highlight-color: transparent; } h1, h2,
+  h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; } a { color: inherit;
+  -webkit-text-decoration: inherit; text-decoration: inherit; } b, strong { font-weight: bolder; }
+  code, kbd, samp, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+  'Liberation Mono', 'Courier New', monospace; font-size: 1em; } small { font-size: 80%; } ol, ul,
+  menu { list-style: none; } img, svg, video, canvas, audio, iframe, embed, object { display: block;
+  vertical-align: middle; } img, video { max-width: 100%; height: auto; } button, input, select,
+  optgroup, textarea, ::file-selector-button { font: inherit; font-feature-settings: inherit;
+  font-variation-settings: inherit; letter-spacing: inherit; color: inherit; border-radius: 0;
+  background-color: transparent; opacity: 1; } ::file-selector-button { margin-inline-end: 4px; }
+  ::placeholder { opacity: 1; } @supports (not (-webkit-appearance: -apple-pay-button)) or
+  (contain-intrinsic-size: 1px) { ::placeholder { color: color-mix(in oklab, currentcolor 50%,
+  transparent); } } textarea { resize: vertical; } ::-webkit-search-decoration { -webkit-appearance:
+  none; } :-moz-ui-invalid { box-shadow: none; } button, input:where([type='button'],
+  [type='reset'], [type='submit']), ::file-selector-button { appearance: button; }
+  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; }
+  [hidden]:where(:not([hidden='until-found'])) { display: none !important; }
+`

package/src/server/internal/html/serviceWorker.client.ts ADDED Viewed

@@ -0,0 +1,28 @@
+import { serviceWorkerParam } from './config.js'
+export async function submitCredential(credential: string): Promise<void> {
+  const url = new URL(location.href)
+  url.searchParams.set(serviceWorkerParam, '')
+  const registration = await navigator.serviceWorker.register(url.pathname + url.search)
+  const serviceWorker = await new Promise<ServiceWorker>((resolve) => {
+    const mppxWorker = registration.installing ?? registration.waiting ?? registration.active
+    if (mppxWorker?.state === 'activated') return resolve(mppxWorker)
+    const target = mppxWorker ?? registration
+    target.addEventListener('statechange', function handler() {
+      const active = registration.active
+      if (active?.state === 'activated') {
+        target.removeEventListener('statechange', handler)
+        resolve(active)
+      }
+    })
+  })
+  await new Promise<void>((resolve) => {
+    const channel = new MessageChannel()
+    channel.port1.onmessage = () => resolve()
+    serviceWorker.postMessage({ credential }, [channel.port2])
+  })
+  location.reload()
+}

package/src/server/internal/html/serviceWorker.gen.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ // Generated — do not edit.
2	+ export const serviceWorker = "(function(){let e=self,t;e.addEventListener(`activate`,t=>{t.waitUntil(e.clients.claim())}),e.addEventListener(`message`,e=>{if(!e.source)return;let n=e.data?.credential;typeof n!=`string`\|\|!n.startsWith(`Payment `)\|\|(t=n,e.ports[0]?.postMessage(`ack`))}),e.addEventListener(`fetch`,n=>{if(!t\|\|n.request.mode!==`navigate`\|\|new URL(n.request.url).origin!==e.location.origin)return;let r=new Headers(n.request.headers);r.set(`Authorization`,t),t=void 0,n.respondWith(fetch(n.request,{headers:r})),e.registration.unregister()})})();"

package/src/server/internal/html/serviceWorker.ts ADDED Viewed

@@ -0,0 +1,27 @@
+const serviceWorker = self as unknown as ServiceWorkerGlobalScope
+let credential: string | undefined
+serviceWorker.addEventListener('activate', (event) => {
+  event.waitUntil(serviceWorker.clients.claim())
+})
+serviceWorker.addEventListener('message', (event) => {
+  if (!event.source) return
+  const value = event.data?.credential
+  if (typeof value !== 'string' || !value.startsWith('Payment ')) return
+  credential = value
+  event.ports[0]?.postMessage('ack')
+})
+serviceWorker.addEventListener('fetch', (event) => {
+  if (!credential || event.request.mode !== 'navigate') return
+  if (new URL(event.request.url).origin !== serviceWorker.location.origin) return
+  const headers = new Headers(event.request.headers)
+  headers.set('Authorization', credential)
+  credential = undefined
+  event.respondWith(fetch(event.request, { headers }))
+  serviceWorker.registration.unregister()
+})

package/src/server/internal/html/tsconfig.worker.client.json ADDED Viewed

@@ -0,0 +1,8 @@
+{
+  "extends": "../../../../tsconfig.base.json",
+  "compilerOptions": {
+    "lib": ["es2022", "dom"],
+    "types": []
+  },
+  "include": ["serviceWorker.client.ts"]
+}

package/src/server/internal/html/tsconfig.worker.json ADDED Viewed

@@ -0,0 +1,8 @@
+{
+  "extends": "../../../../tsconfig.base.json",
+  "compilerOptions": {
+    "lib": ["es2022", "webworker"],
+    "types": []
+  },
+  "include": ["serviceWorker.ts"]
+}

package/src/stripe/internal/types.ts CHANGED Viewed

@@ -1,3 +1,5 @@
+import * as StripeJsTypes from '../../stripe/server/internal/html/types.js'
 /**
  * Duck-typed interface for the Stripe Node SDK (`stripe` npm package).
  * Matches the subset of the API used by mppx for server-side payment verification.
@@ -24,3 +26,21 @@ export type StripeJs = {
   createPaymentMethod(...args: any[]): Promise<Record<string, unknown>>
   elements(...args: any[]): unknown
 }
+export type CreatePaymentMethodFromElements = Omit<
+  StripeJsTypes.CreatePaymentMethodFromElements,
+  'elements'
+> & {}
+export type StripeElementsOptionsMode = Omit<
+  Extract<StripeJsTypes.StripeElementsOptionsMode, { mode: 'payment' }>,
+  | 'amount'
+  | 'currency'
+  | 'mode'
+  | 'excludedPaymentMethodTypes'
+  | 'paymentMethodCreation'
+  | 'paymentMethodTypes'
+  | 'payment_method_types'
+> & {}
+export type StripePaymentElementOptions = StripeJsTypes.StripePaymentElementOptions