@tempoxyz/id 0.0.0-stage → 0.0.0

package/src/app/screens/SignIn.tsx

@@ -0,0 +1,362 @@
+/** The sign-in screen: an email address and the code sent to it, Google, or a passkey. @module */
+import { type FormEvent, type ReactNode, useId } from 'react'
+import Google from '~icons/logos/google-icon'
+import BadgeCheck from '~icons/lucide/badge-check'
+import Fingerprint from '~icons/lucide/fingerprint'
+import { Button } from '../components/Button.js'
+import { CodeInput } from '../components/CodeInput.js'
+import { ErrorMessage } from '../components/ErrorMessage.js'
+import { Grant } from '../components/Grant.js'
+import { Input } from '../components/Input.js'
+import { Tooltip } from '../components/Tooltip.js'
+import { style } from '../zyzz.config.js'
+import type { Approval } from './Approval.js'
+
+/**
+ * The sign-in screen. Without `email` it asks for one, for Google, or for a passkey. With `email` it
+ * asks for the code sent there.
+ */
+export function SignIn(props: SignIn.Props): ReactNode {
+  const Title = props.heading ?? 'h1'
+  const { email } = props
+  // Several screens can share a document, such as on the flows canvas, so each derives its own IDs.
+  const id = useId()
+
+  return (
+    <div {...styles.column()}>
+      <header {...styles.header()}>
+        <Title {...styles.title()}>
+          {(() => {
+            if (email) return 'Check your email'
+            if (props.linking) return 'Verify your email'
+            return 'Sign in to Tempo'
+          })()}
+        </Title>
+        {(() => {
+          if (email)
+            return (
+              <p {...styles.description()}>
+                Enter the 6-digit code sent to <strong>{email}</strong>.
+                {props.linking
+                  ? ' Your passkey then confirms the sign-in.'
+                  : null}
+              </p>
+            )
+          if (props.linking)
+            return (
+              <p {...styles.description()}>
+                Enter your email to finish signing in with your passkey.
+              </p>
+            )
+          if (props.request)
+            return (
+              <p {...styles.description()}>
+                Continue to let{' '}
+                <span {...styles.app()}>
+                  <strong>{props.request.app}</strong>{' '}
+                  <Tooltip label="Verified app">
+                    <BadgeCheck
+                      {...styles.badge()}
+                      aria-label="Verified"
+                      role="img"
+                      tabIndex={0}
+                    />
+                  </Tooltip>
+                </span>{' '}
+                use your Tempo Account.
+              </p>
+            )
+          return null
+        })()}
+      </header>
+      {/* The code step only proves the email, so the key shows once, before it. Signing in grants it. */}
+      {props.request && !email && !props.linking ? (
+        <Grant
+          heading={props.heading === 'h4' ? 'h5' : 'h2'}
+          keyAuthorization={props.request.key}
+        />
+      ) : null}
+
+      {email ? (
+        // A form submitted before the page hydrates posts, so the address and code stay out of the URL.
+        <form {...styles.code()} method="post" onSubmit={props.onSubmitCode}>
+          <CodeInput
+            aria-describedby={`${id}-error`}
+            aria-invalid={props.invalid}
+            aria-label="Code"
+            // The step replaces the email form, so focus moves to the field it asks for.
+            autoFocus={props.autoFocus}
+            inputMode="numeric"
+            // `CodeInput` cuts the cleaned value to `length`. A native `maxLength` would cut a pasted
+            // code before the space or dash around it is removed.
+            length={6}
+            name="code"
+            // A complete code submits itself.
+            onChange={(event) => {
+              if (event.currentTarget.value.length === 6)
+                event.currentTarget.form?.requestSubmit()
+            }}
+            pattern="\d{6}"
+            readOnly={props.verifying || props.verified}
+            required
+            verified={props.verified}
+          />
+          <ErrorMessage align="center" id={`${id}-error`}>
+            {props.error}
+          </ErrorMessage>
+          <div {...styles.links()}>
+            <button
+              {...styles.link()}
+              disabled={
+                props.resend === 'pending' || props.verifying || props.verified
+              }
+              onClick={props.onResend}
+              type="button"
+            >
+              {(() => {
+                if (props.resend === 'pending') return 'Sending…'
+                if (props.resend === 'sent') return 'Code sent'
+                return 'Resend code'
+              })()}
+            </button>
+            <button
+              {...styles.link()}
+              // The address stays until the code's result returns, so the result applies to it.
+              disabled={props.verifying || props.verified}
+              onClick={props.onChangeEmail}
+              type="button"
+            >
+              Use a different email
+            </button>
+            <p {...styles.status()} aria-live="polite" role="status">
+              {(() => {
+                if (props.resend === 'pending') return 'Sending a new code.'
+                if (props.resend === 'sent')
+                  return `A new code was sent to ${email}.`
+                return undefined
+              })()}
+            </p>
+          </div>
+        </form>
+      ) : (
+        <div {...styles.stack()}>
+          <form
+            {...styles.stack()}
+            method="post"
+            onSubmit={props.onSubmitEmail}
+          >
+            <Input
+              aria-describedby={`${id}-error`}
+              aria-invalid={props.invalid}
+              aria-label="Email"
+              // `webauthn` lets the browser offer passkeys in the field's autofill.
+              autoComplete={props.onPasskey ? 'email webauthn' : 'email'}
+              // 1Password's inline menu takes focus from the field when it is clicked.
+              data-1p-ignore
+              id={`${id}-email`}
+              name="email"
+              placeholder="Email address"
+              required
+              type="email"
+            />
+            <ErrorMessage id={`${id}-error`}>{props.error}</ErrorMessage>
+            <Button
+              // One sign-in runs at a time, since each one sets the session.
+              disabled={props.passkeyPending}
+              loading={props.sending}
+              type="submit"
+            >
+              Continue with email
+            </Button>
+          </form>
+          {/* A passkey that waits for its email links only through the code, so the other methods hide. */}
+          {!props.linking && (props.onGoogle || props.onPasskey) ? (
+            <hr {...styles.rule()} />
+          ) : null}
+          {props.onGoogle && !props.linking ? (
+            <Button
+              disabled={props.sending || props.passkeyPending}
+              onClick={props.onGoogle}
+              prefix={<Google aria-hidden />}
+              variant="secondary"
+            >
+              Continue with Google
+            </Button>
+          ) : null}
+          {props.onPasskey && !props.linking ? (
+            <Button
+              disabled={props.sending}
+              loading={props.passkeyPending}
+              onClick={props.onPasskey}
+              prefix={<Fingerprint aria-hidden />}
+              variant="secondary"
+            >
+              Continue with passkey
+            </Button>
+          ) : null}
+          {props.linking && props.onStartOver ? (
+            <button
+              {...styles.link()}
+              onClick={props.onStartOver}
+              type="button"
+            >
+              Start over
+            </button>
+          ) : null}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export declare namespace SignIn {
+  type Props = {
+    /** Whether the code field takes focus when it appears. */
+    autoFocus?: boolean | undefined
+    /** The address a code was sent to, which shows the code step. */
+    email?: string | undefined
+    /** Why the current step failed. */
+    error?: string | undefined
+    /** The level of the screen's title: `h1` by default, or `h4` on the flows canvas, below the canvas's own headings. */
+    heading?: 'h1' | 'h4' | undefined
+    /** Whether the current step's own request failed, which marks its field invalid. */
+    invalid: boolean
+    /** Whether a passkey waits for the emailed code that links it, which the email and code steps explain. */
+    linking?: boolean | undefined
+    /** Returns to the email step. */
+    onChangeEmail: () => void
+    /** Signs in with Google. Absent, the screen offers no Google sign-in. */
+    onGoogle?: (() => void) | undefined
+    /** Signs in with a passkey. Absent, the screen offers no passkey sign-in. */
+    onPasskey?: (() => void) | undefined
+    /** Sends a new code to `email`. */
+    onResend: () => void
+    /**
+     * Drops the passkey that waits for a code, and returns to the first sign-in step. Absent, the
+     * linking step offers no way back.
+     */
+    onStartOver?: (() => void) | undefined
+    /** Submits the code form. */
+    onSubmitCode: (event: FormEvent<HTMLFormElement>) => void
+    /** Submits the email form, which sends a code. */
+    onSubmitEmail: (event: FormEvent<HTMLFormElement>) => void
+    /** Whether a passkey sign-in runs, which holds its button and the email form. */
+    passkeyPending?: boolean | undefined
+    /**
+     * The app's authorization request that the sign-in continues, with the key that the sign-in
+     * grants. Absent for a sign-in without one, or for a request whose key the approval page shows.
+     */
+    request?:
+      | {
+          /** The app's display name. */
+          app: string
+          /** What the key that the app requests may do. */
+          key: Approval.Key
+        }
+      | undefined
+    /** The progress of a resent code. */
+    resend: 'idle' | 'pending' | 'sent'
+    /** Whether the first code is being sent. */
+    sending: boolean
+    /** Whether the code was accepted, which tints the code field green before the sign-in continues. */
+    verified?: boolean | undefined
+    /** Whether the code is being verified, which holds the code field. */
+    verifying: boolean
+  }
+}
+
+namespace styles {
+  // The app's name and badge wrap as one word, so a hyphenated name never splits.
+  export const app = style({ whiteSpace: 'nowrap' })
+
+  export const badge = style({
+    display: 'inline',
+    height: 4,
+    outline: 'none',
+    verticalAlign: 'middle',
+    width: 4,
+    ':focus-visible': {
+      outline: '2px solid',
+      outlineColor: 'blue.700',
+      outlineOffset: '2px',
+    },
+  })
+
+  export const code = style({ display: 'grid', gap: 6 })
+
+  export const column = style({
+    display: 'grid',
+    gap: 8,
+    maxWidth: 'sm',
+    width: 'full',
+  })
+
+  export const description = style({
+    color: 'gray.900',
+    textWrap: 'balance',
+    typography: 'copy.16',
+    '& strong': { color: 'foreground', fontWeight: 'medium' },
+  })
+
+  export const header = style({
+    display: 'grid',
+    gap: 2,
+    textAlign: 'center',
+  })
+
+  // A quiet pill, filled while hovered.
+  export const link = style({
+    backgroundColor: 'transparent',
+    border: 'none',
+    borderRadius: 'full',
+    color: 'foreground',
+    cursor: 'pointer',
+    height: 9,
+    justifySelf: 'center',
+    outline: 'none',
+    paddingInline: 4,
+    transitionDuration: '150ms',
+    transitionProperty: 'background-color, color',
+    transitionTimingFunction: 'in-out',
+    typography: 'button.14',
+    ':disabled': { color: 'gray.700', cursor: 'not-allowed' },
+    ':hover:not(:disabled)': { backgroundColor: 'gray.100' },
+    ':focus-visible': {
+      outline: '2px solid',
+      outlineColor: 'blue.700',
+      outlineOffset: '2px',
+    },
+  })
+
+  export const links = style({
+    display: 'grid',
+    gap: 1,
+    justifyItems: 'center',
+  })
+
+  // The rule between the emailed code and the other sign-in methods.
+  export const rule = style({
+    border: 'none',
+    borderTop: '1px solid',
+    borderTopColor: 'gray.400',
+    marginBlock: 1,
+    width: 'full',
+  })
+
+  export const stack = style({ display: 'grid', gap: 3 })
+
+  // Screen readers announce the resend's progress, which the button label shows visually.
+  export const status = style({
+    clipPath: 'inset(50%)',
+    height: 'px',
+    overflow: 'hidden',
+    position: 'absolute',
+    whiteSpace: 'nowrap',
+    width: 'px',
+  })
+
+  export const title = style({
+    textWrap: 'balance',
+    typography: 'heading.24',
+  })
+}

package/src/app/screens/chains/base.svg

@@ -0,0 +1,3 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M8 12.5493C8 10.9893 8 10.2107 8.29333 9.61333C8.576 9.04 9.04 8.57333 9.616 8.29333C10.2133 8 10.992 8 12.5493 8H51.4507C53.0107 8 53.7867 8 54.3867 8.29333C54.96 8.57333 55.424 9.04 55.704 9.61333C56 10.2133 56 10.992 56 12.5493V51.4507C56 53.0107 56 53.7867 55.7067 54.3867C55.424 54.96 54.96 55.424 54.3867 55.704C53.7867 56 53.008 56 51.4507 56H12.5493C10.9893 56 10.2133 56 9.61333 55.7067C9.03998 55.4249 8.57656 54.9606 8.296 54.3867C8 53.7867 8 53.008 8 51.4507V12.5493Z" fill="#0000FF" />
+</svg>

package/src/app/screens/chains/ethereum.svg

@@ -0,0 +1,11 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect width="64" height="64" fill="#627EEA" />
+  <g transform="translate(18 8)">
+    <path d="M14.996 0V17.74L29.99 24.44L14.996 0Z" fill="white" fill-opacity="0.602" />
+    <path d="M14.996 0L0 24.44L14.996 17.74V0Z" fill="white" />
+    <path d="M14.996 35.936V47.99L30 27.232L14.996 35.936Z" fill="white" fill-opacity="0.602" />
+    <path d="M14.996 47.99V35.934L0 27.232L14.996 47.99Z" fill="white" />
+    <path d="M14.996 33.146L29.99 24.44L14.996 17.744V33.146Z" fill="white" fill-opacity="0.2" />
+    <path d="M0 24.44L14.996 33.146V17.744L0 24.44Z" fill="white" fill-opacity="0.602" />
+  </g>
+</svg>

package/src/app/screens/chains/solana.svg

@@ -0,0 +1,4 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect width="64" height="64" fill="black" />
+  <path d="M46.964 22.4753C46.7023 22.7154 46.3609 22.8511 46.005 22.8563H12.3524C11.1577 22.8563 10.5556 21.497 11.3817 20.7L16.9072 15.3927C17.1641 15.1449 17.5064 15.0044 17.8639 15H51.6496C52.8559 15 53.4463 16.371 52.6063 17.1703L46.964 22.4753ZM46.964 48.6328C46.7026 48.8718 46.3599 49.003 46.005 48.9999H12.3524C11.1577 48.9999 10.5556 47.6522 11.3817 46.8552L16.9072 41.5363C17.1662 41.2936 17.5083 41.1582 17.8639 41.1576H51.6496C52.8559 41.1576 53.4463 42.5169 52.6063 43.3139L46.964 48.6328ZM46.964 28.4517C46.7023 28.2136 46.3595 28.0832 46.005 28.0869H12.3524C11.1577 28.0869 10.5556 29.4346 11.3817 30.2293L16.9072 35.5505C17.1687 35.7893 17.5092 35.9241 17.8639 35.9293H51.6496C52.8559 35.9293 53.4463 34.57 52.6063 33.7729L46.964 28.4517Z" fill="white" />
+</svg>

package/src/app/screens/chains/tempo.svg

@@ -0,0 +1,4 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect width="64" height="64" fill="black" />
+  <path d="M29.689 47H22.3877L29.1548 26.12H20.5L22.3877 20H46.5L44.6123 26.12H36.4205L29.689 47Z" fill="white" />
+</svg>

package/src/app/server.ts

@@ -0,0 +1,204 @@
+/**
+ * The app's server entry. The root Hono app in `src/Api.ts` serves every request, and renders each
+ * path that no route serves through TanStack Start. Server rendering reaches the API in process
+ * through the request context, so loaders call the same routes as the browser. The cron trigger
+ * runs `crons/cleanup.ts`. Void's Worker entry imports this module in place of TanStack Start's
+ * default entry, as `vite.config.ts` aliases it.
+ * @module
+ */
+import {
+  createStartHandler,
+  defaultStreamHandler,
+} from '@tanstack/react-start/server'
+import type { Context, ExecutionContext } from 'hono'
+import { withRuntimeEnv } from 'void/_env'
+import { api } from '../Api.js'
+import type { Env } from '../internal/Env.js'
+import * as Log from '../internal/Log.js'
+import * as Timing from '../internal/Timing.js'
+import cleanup from './crons/cleanup.js'
+
+/** What server rendering receives for each page request. */
+export type RequestContext = {
+  /** Calls the API in process with the page request's cookies and client headers. */
+  fetch: (input: RequestInfo | URL, init?: RequestInit) => Promise<Response>
+  /** The page's origin, which the API client's requests name. */
+  origin: string
+}
+
+declare module '@tanstack/react-start' {
+  interface Register {
+    server: { requestContext: RequestContext }
+  }
+}
+
+/** The headers of a rate limit's refusal, which a page whose loader met the limit carries. */
+const limit = ['ratelimit', 'ratelimit-policy', 'retry-after'] as const
+
+/**
+ * The page request's headers that each in-process call carries, as the browser's own call would: the
+ * client's address and Ray ID, which rate limits and the request ID read, and its user agent, which
+ * Better Auth records.
+ */
+const forwarded = [
+  'cf-connecting-ip',
+  'cf-ray',
+  'cf-worker',
+  'user-agent',
+] as const
+
+const start = createStartHandler(defaultStreamHandler)
+
+export default {
+  fetch: (
+    request: Request,
+    env: Record<string, unknown>,
+    ctx: ExecutionContext,
+  ) =>
+    api.fetch(
+      request,
+      { ...env, pages: (c: Context<Env>) => render(c, { env, ctx }) },
+      ctx,
+    ),
+  // Void's Worker entry runs only `fetch` in its runtime scope, so the cron trigger enters it here.
+  scheduled: (...args: Parameters<typeof cleanup>) =>
+    withRuntimeEnv(args[1], () => cleanup(...args)),
+}
+
+/**
+ * Renders the page of the request `c` through TanStack Start. A session refresh rotates its refresh
+ * token, and a call while rendering may refresh it. Later calls and the page carry the newest cookie,
+ * so no refresh reuses a spent token. A page whose loader met a rate limit responds with status 429
+ * and the limit's headers, and shows the refusal's message.
+ */
+async function render(c: Context<Env>, options: render.Options) {
+  const { ctx, env } = options
+  const cookies = parse(c.req.header('cookie'))
+  const origin = new URL(c.req.url).origin
+  let first: Promise<Response> | undefined
+  let limited: Response | undefined
+  let sent = false
+
+  const call = async (input: RequestInfo | URL, init?: RequestInit) => {
+    const request = new Request(input, init)
+    // Loaders read only the JSON API on the page's origin, so a value from a page's query that
+    // resolves to another path never reaches another route with the session.
+    const url = new URL(request.url)
+    if (url.origin !== origin || !url.pathname.startsWith('/v1/'))
+      throw new Error('A page called a path outside the JSON API.')
+    if (cookies.size > 0) request.headers.set('cookie', serialize(cookies))
+    for (const name of forwarded) {
+      const value = c.req.header(name)
+      if (value) request.headers.set(name, value)
+    }
+
+    // Each call logs its own spans, and the page's header shows the call's total.
+    const response = await Timing.measure(
+      c,
+      Promise.resolve(
+        api.fetch(request, { ...env, pages: () => notFound() }, ctx),
+      ),
+      'api',
+      `${request.method} ${new URL(request.url).pathname}`,
+    )
+    for (const setCookie of response.headers.getSetCookie()) {
+      apply(cookies, { setCookie })
+      // The page's headers go out when the page starts to stream, before its body ends.
+      if (sent)
+        Log.warn(c, {
+          message: 'A page set a cookie after its headers were sent.',
+        })
+      else c.header('set-cookie', setCookie, { append: true })
+    }
+    if (response.status === 429) limited ??= response
+    return response
+  }
+
+  const response = await start(c.req.raw, {
+    context: {
+      fetch: async (input, init) => {
+        // Later calls wait for the first one's cookies, so concurrent reads refresh a session once.
+        if (first)
+          await Timing.measure(
+            c,
+            first.catch(() => undefined),
+            'api.wait',
+          )
+        const response = call(input, init)
+        first ??= response
+        return response
+      },
+      origin,
+    },
+  })
+  sent = true
+  // Pages show the signed-in user's data and an app's signed request, so no cache keeps them.
+  c.header('cache-control', 'private, no-store')
+
+  if (limited && response.status === 200) {
+    for (const name of limit) {
+      const value = limited.headers.get(name)
+      if (value) c.header(name, value)
+    }
+    return c.newResponse(response.body, {
+      headers: response.headers,
+      status: 429,
+    })
+  }
+  return c.newResponse(response.body, response)
+}
+
+declare namespace render {
+  type Options = {
+    /** The Worker's execution context. */
+    ctx: ExecutionContext
+    /** The Worker's bindings. */
+    env: Record<string, unknown>
+  }
+}
+
+/** Applies a `Set-Cookie` header to `cookies`, and removes a cookie that it expires. */
+function apply(cookies: Map<string, string>, options: apply.Options) {
+  // `split` returns at least one element.
+  const [pair, ...attributes] = options.setCookie.split(';') as [
+    string,
+    ...string[],
+  ]
+  const index = pair.indexOf('=')
+  const name = pair.slice(0, index).trim()
+  const value = pair.slice(index + 1).trim()
+  // `deleteCookie` sets an empty value with `Max-Age=0`.
+  const expired = attributes.some((attribute) =>
+    /^max-age=0$/i.test(attribute.trim()),
+  )
+  if (expired || !value) cookies.delete(name)
+  else cookies.set(name, value)
+}
+
+declare namespace apply {
+  type Options = {
+    /** One `Set-Cookie` header value. */
+    setCookie: string
+  }
+}
+
+/** Responds to an in-process call to a path that no route serves, which renders no page. */
+function notFound() {
+  return Promise.resolve(new Response(null, { status: 404 }))
+}
+
+/** Parses a `Cookie` header into raw values by name, still encoded as the browser sent them. */
+function parse(header: string | undefined) {
+  const cookies = new Map<string, string>()
+  for (const pair of header?.split(';') ?? []) {
+    const index = pair.indexOf('=')
+    if (index > 0)
+      cookies.set(pair.slice(0, index).trim(), pair.slice(index + 1).trim())
+  }
+  return cookies
+}
+
+/** Serializes `cookies` as a `Cookie` header. */
+function serialize(cookies: Map<string, string>) {
+  return [...cookies].map(([name, value]) => `${name}=${value}`).join('; ')
+}

package/src/app/vite.config.ts

@@ -0,0 +1,95 @@
+/**
+ * Builds and serves the Tempo ID app with Void and TanStack Start, zyzz styles, and icon components.
+ * @module
+ */
+import { type ConfigPlugin, transform } from '@svgr/core'
+import jsx from '@svgr/plugin-jsx'
+import { tanstackStart } from '@tanstack/react-start/plugin/vite'
+import react from '@vitejs/plugin-react'
+import * as Url from 'node:url'
+import icons from 'unplugin-icons/vite'
+import { defineConfig } from 'vite'
+import { voidPlugin } from 'void'
+import { zyzz } from 'zyzz/vite'
+
+/**
+ * svgr's JSX plugin. The package is CommonJS without an ES module flag, so Node's loader returns its
+ * exports object, whose `default` is the plugin, and the build's bundler returns the plugin itself.
+ */
+const svgJsx: ConfigPlugin =
+  typeof jsx === 'function' ? jsx : (jsx as { default: ConfigPlugin }).default
+
+export default defineConfig({
+  environments: {
+    // The Worker bundles every dependency. TanStack Start lists its own packages, which would leave
+    // the rest external, and zyzz then cannot read the default tokens that `zyzz.config.ts` extends.
+    ssr: { resolve: { noExternal: true } },
+  },
+  // Plugins run in order: Void comes before TanStack Start, zyzz compiles styles before the route and
+  // React transforms, and TanStack Start comes before React's plugin.
+  plugins: [
+    voidPlugin(),
+    // Void targets browsers with native `light-dark()`, which zyzz needs, and Cloudflare's plugin adds
+    // `es2024` to its Worker environment, which zyzz cannot check. Vite concatenates the two lists, so
+    // the resolved list drops the addition before zyzz reads it.
+    {
+      configResolved: (config) => {
+        const builds = [
+          config.build,
+          ...Object.values(config.environments).map((entry) => entry.build),
+        ]
+        for (const build of builds)
+          if (Array.isArray(build.cssTarget))
+            build.cssTarget = build.cssTarget.filter(
+              (target) => target !== 'es2024',
+            )
+      },
+      enforce: 'pre',
+      name: 'tempo-id:css-target',
+    },
+    // Styles live in routes, screens, and components. The extractor cannot load server-only modules.
+    zyzz({
+      exclude: [
+        'crons/**',
+        'db/**',
+        'env.ts',
+        'routeTree.gen.ts',
+        'server.ts',
+        'void.config.ts',
+      ],
+    }),
+    // The app's root is `src/app`, which holds the router, the routes, and the server entry.
+    tanstackStart({ srcDirectory: '.' }),
+    react(),
+    // Icons compile to React components, imported from `~icons/<collection>/<name>`. The compiler
+    // imports svgr here, since the icons plugin's own lookup of it fails under `vp dev`.
+    icons({
+      compiler: {
+        compiler: (svg, collection, icon) =>
+          transform(
+            svg,
+            { plugins: [svgJsx], ref: true, titleProp: true },
+            {
+              componentName: `${collection}-${icon}`.replace(
+                /-(\w)/g,
+                (_, letter: string) => letter.toUpperCase(),
+              ),
+            },
+          ),
+        extension: 'jsx',
+      },
+      jsx: 'react',
+      scale: 1,
+    }),
+  ],
+  // Void's Worker entry imports TanStack Start's default server entry, so the alias points it at
+  // `server.ts`, which serves every request through the root Hono app and runs the cron trigger.
+  resolve: {
+    alias: [
+      {
+        find: /^@tanstack\/react-start\/server-entry$/,
+        replacement: Url.fileURLToPath(new URL('server.ts', import.meta.url)),
+      },
+    ],
+  },
+})