@pithy-sh/ui-react-native 0.0.0-stage → 0.2.0

package/templates/src/routes/pithy/agent-consent.tsx

@@ -0,0 +1,260 @@
+import { type ConsentView, decideConsent, readConsent } from "@pithy-sh/auth/src/client/mcp";
+import type { MessageCatalog } from "@pithy-sh/core/src/i18n/catalog";
+import { useTranslator } from "@pithy-sh/i18n/src/react/translator";
+import { useRead } from "@pithy-sh/ui-core/src/read";
+import { screenPath } from "@pithy-sh/ui-core/src/routes";
+import * as Linking from "expo-linking";
+import { type ReactNode, useState } from "react";
+import { Linking as PageLinking, Pressable, Text, View } from "react-native";
+import { authConfig } from "../../pithy-config";
+import { onDevice, parseQuery, queryString } from "../../platform";
+import { Redirect, routeTable, useSearch } from "../../router";
+import { getSession, RESUME_PARAM } from "../../session";
+import { type Theme, useTheme } from "../../theme";
+import { transport } from "../../transport";
+
+export const path = "/agent-consent";
+
+// Pithy's screen. Yours to override: put your own file at this path under src/routes/app/ and it wins.
+//
+// **An application is asking to act as you, and this is the one place a mistake here is irreversible.** Read this
+// before restyling it.
+//
+// **The application's name is whatever it said it was.** Anybody can register a client and call it "POWERPLAY
+// Official Sync"; nothing has checked it. So the name is shown as reported, in ordinary weight, and the emphasis goes
+// to the one thing that cannot be spoofed: where the access goes — the redirect address, which the authorization
+// server enforces. Making the name the headline is how this screen becomes a phishing page you shipped.
+//
+// **One decision, and nothing to tick.** Approving lets the application act as you in this app. The list is the
+// consequence — what it will then be able to do, per capability, in each capability's own words — and it only ever
+// lists what your role allows. Your role stays the ceiling: approving everything still never grants more than it.
+//
+// **Not signed in?** The authorization server sends people here to sign in too. The screen sends you to sign in
+// with the request in the query, and the sign-in resumes it: in this page on the web, and in the system browser on
+// a phone, because the authorization request belongs to the Worker's web pages rather than to the app.
+
+/** Where the MCP capability mounts. Change this if `mcp({ path })` does. */
+const MCP_PATH = "/mcp";
+
+/** This screen's English, baked in — the only catalog that survives being copied into your repository. */
+const EN = {
+  "auth/consent.title": "An application wants to act as you.",
+  "auth/consent.reported": "It calls itself {name}. That name is its own, and nobody has checked it.",
+  "auth/consent.unnamed": "It gave no name.",
+  "auth/consent.redirect": "Access will be sent to",
+  "auth/consent.redirect_note": "Approve only if you started this from that application.",
+  "auth/consent.can_do": "If you approve, it can:",
+  "auth/consent.count.one": "{reachable} of {count} operation in {capability}.",
+  "auth/consent.count.other": "{reachable} of {count} operations in {capability}.",
+  "auth/consent.withheld.one": "{count} more needs a role you do not hold.",
+  "auth/consent.withheld.other": "{count} more need a role you do not hold.",
+  "auth/consent.nothing": "Your role allows it nothing here yet. It gains what your role gains.",
+  "auth/consent.refused_scope": "{scope}: {reason}",
+  "auth/consent.not_granted.role": "Requested, and not granted, because your role does not include it.",
+  "auth/consent.not_granted.unknown": "Requested, and not granted, because this application has no such permission.",
+  "auth/consent.bound":
+    "Approving lets this application act as you. It can never do more than your role allows, and it loses anything your role loses.",
+  "auth/consent.approve": "Let it act as me",
+  "auth/consent.deny": "Don't allow",
+  "auth/consent.expired": "This request has expired. Start again from the application.",
+  "auth/consent.effect.writes": "changes data",
+  "auth/consent.effect.sends": "sends a message",
+  "auth/consent.effect.charges": "charges money",
+  "auth/consent.effect.deletes": "deletes data",
+} satisfies MessageCatalog;
+
+/** The parameters the authorization server signed the request with, which a fresh authorize request signs anew. */
+const SIGNATURE_PARAMS = ["sig", "exp", "ba_iat", "ba_param", "ba_pl"];
+
+/** The authorization request again, unsigned, so a sign-in can resume it and the server sign it afresh. */
+function authorizeAgain(query: string): string {
+  const params = parseQuery(query);
+  for (const key of SIGNATURE_PARAMS) delete params[key];
+  return `${authConfig.basePath}/oauth2/authorize${queryString(params)}`;
+}
+
+/** The MCP routes, over this app's transport. */
+function mcpOptions() {
+  return { ...transport.auth, basePath: MCP_PATH };
+}
+
+/** What arriving here comes to: the request to decide, a request that cannot be read, or a sign-in first. */
+type Arrival = { kind: "view"; view: ConsentView } | { kind: "failed" } | { kind: "sign-in"; to: string };
+
+async function arrive(query: string): Promise<Arrival> {
+  if ((await getSession()) === null) {
+    const resume = queryString({ [RESUME_PARAM]: authorizeAgain(query) });
+    return { kind: "sign-in", to: `${screenPath(await routeTable(), "sign-in")}${resume}` };
+  }
+  const result = await readConsent(query, mcpOptions());
+  return result.ok ? { kind: "view", view: result.value } : { kind: "failed" };
+}
+
+/**
+ * Leave for a page in this tab, on the web. React Native Web's own `Linking.openURL` takes the target as a second
+ * argument that React Native's types leave out; `expo-linking` passes only the address, which React Native Web
+ * opens in a new tab. Called on the object, because the method reads its own state.
+ */
+const pageLinking: { openURL(url: string, target?: string): Promise<unknown> } = PageLinking;
+
+/**
+ * Leave for the application's own address, with a code or a refusal. It is not this app: on the web the page loads
+ * it in place, and on a phone the system opens whatever answers it.
+ */
+async function leaveFor(redirect: string): Promise<void> {
+  if (onDevice()) await Linking.openURL(redirect);
+  else await pageLinking.openURL(redirect, "_self");
+}
+
+function Screen(props: { theme: Theme; children?: ReactNode }): ReactNode {
+  const { theme } = props;
+  return (
+    <View
+      role="main"
+      style={{ flex: 1, padding: theme.spacing.lg, gap: theme.spacing.md, backgroundColor: theme.colors.background }}
+    >
+      {props.children}
+    </View>
+  );
+}
+
+function Button(props: {
+  theme: Theme;
+  label: string;
+  primary?: boolean;
+  disabled: boolean;
+  onPress: () => void;
+}): ReactNode {
+  const { theme } = props;
+  return (
+    <Pressable
+      role="button"
+      disabled={props.disabled}
+      aria-disabled={props.disabled}
+      onPress={props.onPress}
+      style={{
+        borderWidth: 1,
+        borderColor: props.primary ? theme.colors.accent : theme.colors.border,
+        backgroundColor: props.primary ? theme.colors.accent : "transparent",
+        borderRadius: theme.radius,
+        paddingVertical: theme.spacing.sm,
+        paddingHorizontal: theme.spacing.md,
+        alignItems: "center",
+        opacity: props.disabled ? 0.5 : 1,
+      }}
+    >
+      <Text style={[theme.type.button, { color: props.primary ? theme.colors.onAccent : theme.colors.text }]}>
+        {props.label}
+      </Text>
+    </Pressable>
+  );
+}
+
+export default function Consent(): ReactNode {
+  const t = useTranslator(EN);
+  const theme = useTheme();
+  const query = useSearch().replace(/^\?/, "");
+  const arrival = useRead(`consent:${query}`, () => arrive(query)).value;
+  const [refused, setRefused] = useState(false);
+  const [busy, setBusy] = useState(false);
+
+  async function decide(accept: boolean): Promise<void> {
+    setBusy(true);
+    const result = await decideConsent(query, accept, mcpOptions());
+    if (!result.ok) {
+      setBusy(false);
+      setRefused(true);
+      return;
+    }
+    await leaveFor(result.value.redirect);
+  }
+
+  const body = [theme.type.body, { color: theme.colors.text }];
+  const muted = [theme.type.body, { color: theme.colors.muted }];
+
+  if (arrival?.kind === "sign-in") return <Redirect to={arrival.to} />;
+  if (refused || arrival?.kind === "failed") {
+    return (
+      <Screen theme={theme}>
+        <Text style={body}>{t.t("auth/consent.expired")}</Text>
+      </Screen>
+    );
+  }
+  if (arrival === undefined) return <Screen theme={theme} />;
+  const view = arrival.view;
+
+  return (
+    <Screen theme={theme}>
+      <Text role="heading" style={[theme.type.title, { color: theme.colors.text }]}>
+        {t.t("auth/consent.title")}
+      </Text>
+      <Text style={muted}>
+        {view.client.reportedName === null
+          ? t.t("auth/consent.unnamed")
+          : t.t("auth/consent.reported", { name: view.client.reportedName })}
+      </Text>
+      <Text style={body}>
+        {t.t("auth/consent.redirect")} <Text style={{ fontWeight: "700" }}>{view.client.redirectUri}</Text>
+      </Text>
+      <Text style={muted}>{t.t("auth/consent.redirect_note")}</Text>
+
+      {view.capabilities.length === 0 ? (
+        <Text style={body}>{t.t("auth/consent.nothing")}</Text>
+      ) : (
+        <>
+          <Text style={body}>{t.t("auth/consent.can_do")}</Text>
+          {view.capabilities.map((row) => (
+            <View key={row.capability} style={{ gap: theme.spacing.xs }}>
+              <Text role="heading" style={[theme.type.button, { color: theme.colors.text }]}>
+                {row.capability}
+              </Text>
+              <View role="list" style={{ gap: theme.spacing.xs }}>
+                {row.operations.map((operation) => (
+                  <View role="listitem" key={operation.tool}>
+                    <Text style={body}>
+                      {operation.summary}
+                      {operation.effect === null ? null : (
+                        <Text style={{ color: theme.colors.muted }}>
+                          {" — "}
+                          {t.t(`auth/consent.effect.${operation.effect}`)}
+                        </Text>
+                      )}
+                    </Text>
+                  </View>
+                ))}
+              </View>
+              <Text style={muted}>
+                {t.plural("auth/consent.count", row.total, {
+                  reachable: String(row.reachable),
+                  capability: row.capability,
+                })}
+                {row.total > row.reachable ? ` ${t.plural("auth/consent.withheld", row.total - row.reachable)}` : null}
+              </Text>
+            </View>
+          ))}
+        </>
+      )}
+
+      {view.requested
+        .filter((scope) => !scope.granted)
+        .map((scope) => (
+          <Text key={scope.scope} style={muted}>
+            {t.t("auth/consent.refused_scope", {
+              scope: scope.scope,
+              reason: t.t(`auth/consent.not_granted.${scope.reason ?? "unknown"}`),
+            })}
+          </Text>
+        ))}
+
+      <Text style={muted}>{t.t("auth/consent.bound")}</Text>
+      <Button
+        theme={theme}
+        primary
+        label={t.t("auth/consent.approve")}
+        disabled={busy}
+        onPress={() => void decide(true)}
+      />
+      <Button theme={theme} label={t.t("auth/consent.deny")} disabled={busy} onPress={() => void decide(false)} />
+    </Screen>
+  );
+}

package/templates/src/routes/pithy/callback.tsx

@@ -0,0 +1,74 @@
+import { HANDOFF_CODE_PARAM } from "@pithy-sh/auth/src/client/handoff";
+import type { MessageCatalog } from "@pithy-sh/core/src/i18n/catalog";
+import { useTranslator } from "@pithy-sh/i18n/src/react/translator";
+import { useRead } from "@pithy-sh/ui-core/src/read";
+import { screenPath } from "@pithy-sh/ui-core/src/routes";
+import type { ReactNode } from "react";
+import { Text, View } from "react-native";
+import { onDevice, queryString, searchParam } from "../../platform";
+import { Redirect, routeTable, useSearch } from "../../router";
+import { afterSignIn, completeHandoff, getSession, refusedAccountScreen } from "../../session";
+import { useTheme } from "../../theme";
+
+export const path = "/callback";
+
+// Pithy's screen. Yours to override: put your own file at this path under src/routes/app/ and it wins.
+//
+// `sign-in.tsx` builds every link that returns here from the `path` above, so renaming it moves both ends at
+// once. The round trip is the one flow nobody already signed in can test, so it must not be two strings that only
+// happen to agree.
+
+/** This screen's English, baked in: the only catalog that survives being copied into your repository. */
+const EN = {
+  "auth/callback.title": "Signing you in.",
+  "auth/callback.body": "One moment.",
+} satisfies MessageCatalog;
+
+/**
+ * Where this landing goes next, or `null` when the app is leaving for the Worker's own page.
+ *
+ * On the web the Worker set the session cookie before anybody lands here, so this asks who you are and moves on.
+ * On a phone the deep link carries a one-time code instead, which is traded for the session with the verifier
+ * the sign-in left in the secure store; a code this device never asked for trades for nothing. Either way a
+ * refusal for the account's standing arrives as `?error=` and goes on to the screen for that state, a provider's
+ * refusal goes on to the sign-in screen that says who refused, and a sign-in a screen or an application's
+ * authorization sent somebody to resumes it.
+ */
+async function landing(search: string): Promise<{ to: string } | null> {
+  const table = await routeTable();
+  const error = searchParam(search, "error");
+  const refused = refusedAccountScreen(error);
+  if (refused) return { to: screenPath(table, refused) };
+  const provider = searchParam(search, "provider");
+  if (error !== null && provider !== null) {
+    return { to: `${screenPath(table, "sign-in")}${queryString({ provider, error })}` };
+  }
+  const code = onDevice() ? searchParam(search, HANDOFF_CODE_PARAM) : null;
+  if (code !== null) {
+    const traded = await completeHandoff(code);
+    const refusedTrade = traded.ok ? null : refusedAccountScreen(traded.code);
+    if (refusedTrade) return { to: screenPath(table, refusedTrade) };
+  }
+  if ((await getSession()) === null) return { to: screenPath(table, "sign-in") };
+  const next = await afterSignIn(search);
+  return next === null ? null : { to: next };
+}
+
+export default function Callback(): ReactNode {
+  const t = useTranslator(EN);
+  const theme = useTheme();
+  const search = useSearch();
+  const next = useRead("callback", () => landing(search), { once: true }).value;
+
+  return (
+    <View
+      style={{ flex: 1, padding: theme.spacing.lg, gap: theme.spacing.md, backgroundColor: theme.colors.background }}
+    >
+      <Text role="heading" style={[theme.type.title, { color: theme.colors.text }]}>
+        {t.t("auth/callback.title")}
+      </Text>
+      <Text style={[theme.type.body, { color: theme.colors.muted }]}>{t.t("auth/callback.body")}</Text>
+      {next ? <Redirect to={next.to} replace /> : null}
+    </View>
+  );
+}

package/templates/src/routes/pithy/choose-organization.tsx

@@ -0,0 +1,230 @@
+import type { MessageCatalog } from "@pithy-sh/core/src/i18n/catalog";
+import { useTranslator } from "@pithy-sh/i18n/src/react/translator";
+import { type ActableOrganization, chooseOrganization, listOrganizations } from "@pithy-sh/organization/src/client/api";
+import { organizationRefusal } from "@pithy-sh/organization/src/client/lifecycle";
+import { useRead } from "@pithy-sh/ui-core/src/read";
+import { screenPath } from "@pithy-sh/ui-core/src/routes";
+import { type ReactNode, useState } from "react";
+import { Image, Pressable, Text, View } from "react-native";
+import { onDevice } from "../../platform";
+import { Redirect, routeTable } from "../../router";
+import { type Theme, useTheme } from "../../theme";
+import { transport, type WorkerImage } from "../../transport";
+
+export const path = "/choose-organization";
+
+// Pithy's screen. Yours to override: put your own file at this path under src/routes/app/ and it wins.
+//
+// **Three arrivals, one screen, and getting them wrong is the whole reason this ships rather than being
+// left to every adopter.**
+//
+//   Several memberships — draw the picker. This is the case people picture.
+//   Exactly one — go straight through without asking, *and still record the choice*, so what is in force
+//     is a row rather than an inference every later request has to make again.
+//   None — a different answer entirely. Somebody who belongs nowhere is not choosing; they are waiting
+//     for an invitation, and a picker with an empty list tells them nothing. And somebody whose every
+//     account is suspended does not belong nowhere: the list counts those, and they go on to the
+//     suspended screen, by role, rather than being told to ask for an invitation.
+//
+// The middle one is the one that gets written wrong. A screen that renders a one-item list and waits is
+// asking somebody to confirm a decision that was never theirs; a screen that redirects without writing
+// leaves every subsequent request resolving the same membership over again.
+//
+// **Leaving remounts every screen, not only this one.** What is in force decides what every request may
+// reach, and a plain route change keeps whatever the previous account's data had already populated — a
+// roster, a header, a cached list — while the session underneath now answers for somebody else. On the web
+// that is a document load; in the app the router's `load` does the same, and nothing a screen held survives.
+const EN = {
+  "organization/choose.title": "Choose an account",
+  "organization/choose.subtitle": "You belong to more than one.",
+  "organization/choose.role": "You are {role} here.",
+  "organization/choose.empty.title": "No accounts yet",
+  "organization/choose.empty.body": "You are not a member of any account. Ask somebody to invite you.",
+  "organization/choose.failed": "We couldn't load your accounts.",
+  "organization/choose.retry": "Try again",
+} satisfies MessageCatalog;
+
+/**
+ * Where to go once something is in force.
+ *
+ * The app's root, and deliberately not a `ScreenRole`. The roles exist for screens a *guard* sends
+ * somebody to — sign-in, paywall, subscription — and nothing guards its way here: the chooser is
+ * arrived at, not redirected to. An adopter whose home is elsewhere changes this line, which is the one
+ * edit a copied screen is for.
+ */
+const DESTINATION = "/";
+
+/** One account the picker draws, with its mark ready for `<Image>`, or `null` for its initial. */
+interface Choice {
+  readonly organization: ActableOrganization;
+  readonly mark: WorkerImage | null;
+}
+
+/** What an arrival, or a choice, comes to: the picker, a failure, or somewhere to go. */
+type Answer = { kind: "list"; choices: Choice[] } | { kind: "failed" } | { kind: "leave"; to: string; load: boolean };
+
+/**
+ * How to draw an organization's mark, or `null` for its initial.
+ *
+ * A raster is a path on the Worker, which `<Image>` fetches itself, so the transport hands it the origin and, on a
+ * phone, the credential. A vector arrives as its own `data:` value: the web draws it, and React Native's `<Image>`
+ * cannot, so a phone shows the initial.
+ */
+export async function markSource(mark: string | null): Promise<WorkerImage | null> {
+  if (mark === null) return null;
+  if (mark.startsWith("data:")) return onDevice() && mark.startsWith("data:image/svg+xml") ? null : { uri: mark };
+  return transport.image(mark);
+}
+
+/**
+ * Record the choice, then leave, remounting every screen. See the note above for why.
+ *
+ * An account suspended since the list was drawn says so, on its own screen, by role. Nothing is in force then, so
+ * a plain navigation carries nothing over. Any other refusal — including the ordinary 404 a caller naming an
+ * account they do not belong to gets, which is the same answer as one that does not exist — is a failure.
+ */
+async function choose(organizationId: string): Promise<Answer> {
+  const result = await chooseOrganization(organizationId, transport.organization);
+  if (result.ok) return { kind: "leave", to: DESTINATION, load: true };
+  if (organizationRefusal(result.failure.code) === "suspended") {
+    return { kind: "leave", to: screenPath(await routeTable(), "organization-suspended"), load: false };
+  }
+  return { kind: "failed" };
+}
+
+/** Read the memberships, and decide which of the three arrivals this is. */
+async function arrive(): Promise<Answer> {
+  const result = await listOrganizations(transport.organization);
+  if (!result.ok) return { kind: "failed" };
+  const { organizations, acting, suspended } = result.value;
+  // Nothing to act in, and something suspended: that is the suspended screen's answer, not "no accounts yet".
+  if (organizations.length === 0 && (suspended ?? 0) > 0) {
+    return { kind: "leave", to: screenPath(await routeTable(), "organization-suspended"), load: false };
+  }
+  // Somebody with exactly one account is put into it rather than asked. The write still happens, so `acting` is a
+  // row from here on and `chosen` says it was not a decision.
+  const only = organizations.length === 1 && acting === null ? organizations[0] : undefined;
+  if (only) return choose(only.id);
+  const choices = await Promise.all(
+    organizations.map(async (organization) => ({ organization, mark: await markSource(organization.mark) })),
+  );
+  return { kind: "list", choices };
+}
+
+export default function ChooseOrganization(): ReactNode {
+  const t = useTranslator(EN);
+  const theme = useTheme();
+  // Once per arrival, StrictMode included: the one-membership path writes the choice.
+  const arrival = useRead("organizations", arrive, { once: true });
+  const [chosen, setChosen] = useState<Answer | null>(null);
+  const [busy, setBusy] = useState(false);
+
+  async function pick(organizationId: string): Promise<void> {
+    setBusy(true);
+    const answer = await choose(organizationId);
+    setBusy(false);
+    setChosen(answer);
+  }
+
+  function retry(): void {
+    setChosen(null);
+    arrival.refresh();
+  }
+
+  const screen = {
+    flex: 1,
+    padding: theme.spacing.lg,
+    gap: theme.spacing.md,
+    backgroundColor: theme.colors.background,
+  };
+  const answer = chosen ?? (arrival.loading ? null : (arrival.value ?? null));
+  if (answer?.kind === "leave") return <Redirect to={answer.to} load={answer.load} />;
+
+  if (answer?.kind === "failed" || (answer === null && arrival.failure !== null && !arrival.loading)) {
+    return (
+      <View style={screen}>
+        <Text style={[theme.type.body, { color: theme.colors.text }]}>{t.t("organization/choose.failed")}</Text>
+        <Pressable role="button" onPress={retry} style={buttonStyle(theme)}>
+          <Text style={[theme.type.button, { color: theme.colors.text }]}>{t.t("organization/choose.retry")}</Text>
+        </Pressable>
+      </View>
+    );
+  }
+
+  // The read has not answered. Nothing is drawn rather than a spinner: the one-membership path leaves
+  // without ever rendering, and a flash of a picker for an account nobody chose is worse than a pause.
+  if (answer === null) return <View style={screen} />;
+
+  if (answer.choices.length === 0) {
+    return (
+      <View style={screen}>
+        <Text role="heading" style={[theme.type.title, { color: theme.colors.text }]}>
+          {t.t("organization/choose.empty.title")}
+        </Text>
+        <Text style={[theme.type.body, { color: theme.colors.muted }]}>{t.t("organization/choose.empty.body")}</Text>
+      </View>
+    );
+  }
+
+  return (
+    <View style={screen}>
+      <Text role="heading" style={[theme.type.title, { color: theme.colors.text }]}>
+        {t.t("organization/choose.title")}
+      </Text>
+      <Text style={[theme.type.body, { color: theme.colors.muted }]}>{t.t("organization/choose.subtitle")}</Text>
+      <View role="list" style={{ gap: theme.spacing.sm }}>
+        {answer.choices.map(({ organization, mark }) => (
+          <View role="listitem" key={organization.id}>
+            <Pressable
+              role="button"
+              disabled={busy}
+              onPress={() => void pick(organization.id)}
+              style={[
+                buttonStyle(theme),
+                { flexDirection: "row", alignItems: "center", gap: theme.spacing.md, opacity: busy ? 0.6 : 1 },
+              ]}
+            >
+              <Mark name={organization.name} source={mark} theme={theme} />
+              <View style={{ flexShrink: 1, gap: theme.spacing.xs }}>
+                <Text style={[theme.type.button, { color: theme.colors.text }]}>{organization.name}</Text>
+                <Text style={[theme.type.caption, { color: theme.colors.muted }]}>
+                  {t.t("organization/choose.role", { role: organization.role })}
+                </Text>
+              </View>
+            </Pressable>
+          </View>
+        ))}
+      </View>
+    </View>
+  );
+}
+
+const MARK_SIZE = 40;
+
+/** The mark, or the name's initial when there is none to draw. The initial is an answer, not a placeholder. */
+function Mark(props: { name: string; source: WorkerImage | null; theme: Theme }): ReactNode {
+  const { theme } = props;
+  const frame = { width: MARK_SIZE, height: MARK_SIZE, borderRadius: theme.radius };
+  if (props.source !== null) {
+    return <Image source={props.source} accessibilityIgnoresInvertColors alt="" style={frame} />;
+  }
+  return (
+    <View
+      aria-hidden
+      style={[frame, { alignItems: "center", justifyContent: "center", backgroundColor: theme.colors.border }]}
+    >
+      <Text style={[theme.type.button, { color: theme.colors.text }]}>{props.name.slice(0, 1).toUpperCase()}</Text>
+    </View>
+  );
+}
+
+function buttonStyle(theme: Theme) {
+  return {
+    borderWidth: 1,
+    borderColor: theme.colors.border,
+    borderRadius: theme.radius,
+    backgroundColor: theme.colors.surface,
+    paddingVertical: theme.spacing.sm,
+    paddingHorizontal: theme.spacing.md,
+  } as const;
+}