From 336908ad513b225335c63401dde25690bde36801 Mon Sep 17 00:00:00 2001
From: Max Barvian <max@barvian.me>
Date: Wed, 2 Sep 2026 15:58:35 -0700
Subject: [PATCH 1/6] init form components

---
 app/components/ui/Field.parts.tsx             |  52 +++++++
 app/components/ui/Field.tsx                   |   1 +
 app/components/ui/Input.tsx                   |  27 ++++
 app/components/ui/InputGroup.parts.tsx        |  59 +++++++
 app/components/ui/InputGroup.tsx              |   1 +
 app/components/ui/Radio.parts.tsx             |  32 ++++
 app/components/ui/Radio.tsx                   |   1 +
 app/components/ui/RadioGroup.tsx              |  12 ++
 .../account/components/CreateAccountModal.tsx | 144 +++++++++---------
 9 files changed, 254 insertions(+), 75 deletions(-)
 create mode 100644 app/components/ui/Field.parts.tsx
 create mode 100644 app/components/ui/Field.tsx
 create mode 100644 app/components/ui/Input.tsx
 create mode 100644 app/components/ui/InputGroup.parts.tsx
 create mode 100644 app/components/ui/InputGroup.tsx
 create mode 100644 app/components/ui/Radio.parts.tsx
 create mode 100644 app/components/ui/Radio.tsx
 create mode 100644 app/components/ui/RadioGroup.tsx

diff --git a/app/components/ui/Field.parts.tsx b/app/components/ui/Field.parts.tsx
new file mode 100644
index 00000000..e98f047a
--- /dev/null
+++ b/app/components/ui/Field.parts.tsx
@@ -0,0 +1,52 @@
+'use client';
+
+import type { ComponentProps } from 'react';
+import { Field as BaseField } from '@base-ui/react/field';
+import { mergeProps } from '@base-ui/react/merge-props';
+
+import { textVariantClasses } from './Text';
+
+export function Root(props: ComponentProps<typeof BaseField.Root>) {
+  return (
+    <BaseField.Root
+      {...mergeProps({ className: 'flex w-full flex-col gap-1.5' }, props)}
+    />
+  );
+}
+
+export function Label(props: ComponentProps<typeof BaseField.Label>) {
+  return (
+    <BaseField.Label
+      {...mergeProps(
+        { className: `${textVariantClasses['label.medium']} select-none text-bds-gray-60` },
+        props,
+      )}
+    />
+  );
+}
+
+export function Description(props: ComponentProps<typeof BaseField.Description>) {
+  return (
+    <BaseField.Description
+      {...mergeProps(
+        { className: `${textVariantClasses['label.regular']} text-bds-gray-40` },
+        props,
+      )}
+    />
+  );
+}
+
+export function Error(props: ComponentProps<typeof BaseField.Error>) {
+  return (
+    <BaseField.Error
+      {...mergeProps(
+        { className: `${textVariantClasses['label.regular']} text-bds-red-40` },
+        props,
+      )}
+    />
+  );
+}
+
+export const Control = BaseField.Control;
+export const Validity = BaseField.Validity;
+export const Item = BaseField.Item;
diff --git a/app/components/ui/Field.tsx b/app/components/ui/Field.tsx
new file mode 100644
index 00000000..28e744fe
--- /dev/null
+++ b/app/components/ui/Field.tsx
@@ -0,0 +1 @@
+export * as Field from './Field.parts';
diff --git a/app/components/ui/Input.tsx b/app/components/ui/Input.tsx
new file mode 100644
index 00000000..a073cc99
--- /dev/null
+++ b/app/components/ui/Input.tsx
@@ -0,0 +1,27 @@
+'use client';
+
+import { Input as BaseInput, type InputProps } from '@base-ui/react/input';
+import { mergeProps } from '@base-ui/react/merge-props';
+
+import { cn } from './cn';
+import { textVariantClasses } from './Text';
+
+export type { InputProps };
+
+export const inputClassName = cn(
+  'w-full rounded-xl bg-transparent py-2.5 ps-2.5 pe-2.5 outline-none',
+  textVariantClasses['label.regular'],
+  'text-bds-gray-100 placeholder:text-bds-gray-40',
+  'ring-1 ring-inset ring-bds-gray-10',
+  'transition-[box-shadow] duration-150 ease motion-reduce:transition-none',
+  'data-[focused]:ring-2 data-[focused]:ring-bds-gray-100',
+  'data-[invalid]:ring-bds-red-40 data-[invalid]:data-[focused]:ring-bds-red-40',
+  'data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50',
+);
+
+// Styled Base UI Input. Compose inside Field.Root so `data-focused` /
+// `data-invalid` come from that Field context. Use InputGroup when the
+// field has addons (e.g. a trailing button).
+export function Input(props: InputProps) {
+  return <BaseInput {...mergeProps({ className: inputClassName }, props)} />;
+}
diff --git a/app/components/ui/InputGroup.parts.tsx b/app/components/ui/InputGroup.parts.tsx
new file mode 100644
index 00000000..ad71cc10
--- /dev/null
+++ b/app/components/ui/InputGroup.parts.tsx
@@ -0,0 +1,59 @@
+'use client';
+
+import type { ComponentProps } from 'react';
+import { Input as BaseInput, type InputProps } from '@base-ui/react/input';
+import { mergeProps } from '@base-ui/react/merge-props';
+
+import { cn } from './cn';
+import { textVariantClasses } from './Text';
+
+type RootProps = ComponentProps<'div'> & {
+  // Same role set as react-aria-components Group: semantic group by default,
+  // `region` if it belongs in the page outline, `presentation` if visual only.
+  role?: 'group' | 'region' | 'presentation';
+  disabled?: boolean;
+  invalid?: boolean;
+};
+
+export function Root({ role = 'group', disabled, invalid, ...props }: RootProps) {
+  return (
+    <div
+      {...mergeProps(
+        {
+          className: cn(
+            'flex items-center rounded-xl ring-1 ring-inset ring-bds-gray-10',
+            'transition-[box-shadow] duration-150 ease motion-reduce:transition-none',
+            'has-[input[data-focused]]:ring-2 has-[input[data-focused]]:ring-bds-gray-100',
+            'aria-invalid:ring-bds-red-40 has-[input[data-invalid]]:ring-bds-red-40',
+            'aria-disabled:opacity-50',
+          ),
+        },
+        props,
+        {
+          role,
+          ...(disabled && { 'aria-disabled': true as const }),
+          ...(invalid && { 'aria-invalid': true as const }),
+        },
+      )}
+    />
+  );
+}
+
+export function Control(props: InputProps) {
+  return (
+    <BaseInput
+      {...mergeProps(
+        {
+          className: cn(
+            'min-w-0 flex-1 bg-transparent py-2.5 outline-none',
+            textVariantClasses['label.regular'],
+            'text-bds-gray-100 placeholder:text-bds-gray-40',
+            'px-1 first:ps-2.5 last:pe-2.5',
+            'disabled:cursor-not-allowed',
+          ),
+        },
+        props,
+      )}
+    />
+  );
+}
diff --git a/app/components/ui/InputGroup.tsx b/app/components/ui/InputGroup.tsx
new file mode 100644
index 00000000..3525034b
--- /dev/null
+++ b/app/components/ui/InputGroup.tsx
@@ -0,0 +1 @@
+export * as InputGroup from './InputGroup.parts';
diff --git a/app/components/ui/Radio.parts.tsx b/app/components/ui/Radio.parts.tsx
new file mode 100644
index 00000000..d037adf5
--- /dev/null
+++ b/app/components/ui/Radio.parts.tsx
@@ -0,0 +1,32 @@
+'use client';
+
+import type { ComponentProps } from 'react';
+import { Radio as BaseRadio } from '@base-ui/react/radio';
+import { mergeProps } from '@base-ui/react/merge-props';
+
+import { cn } from './cn';
+
+export function Root(props: ComponentProps<typeof BaseRadio.Root>) {
+  return (
+    <BaseRadio.Root
+      value={props.value}
+      {...mergeProps(
+        {
+          className: cn(
+            'flex min-w-0 w-full cursor-pointer flex-col gap-1 rounded-xl p-3 text-left select-none outline-none',
+            'ring-1 ring-inset ring-bds-gray-10',
+            'transition-[box-shadow] duration-150 ease motion-reduce:transition-none',
+            'data-[checked]:ring-2 data-[checked]:ring-bds-gray-100',
+            'data-[hovered]:ring-bds-gray-20',
+            'focus-visible:ring-2 focus-visible:ring-brand-blue',
+            'data-[checked]:focus-visible:ring-brand-blue',
+            'data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50',
+          ),
+        },
+        props,
+      )}
+    />
+  );
+}
+
+export const Indicator = BaseRadio.Indicator;
diff --git a/app/components/ui/Radio.tsx b/app/components/ui/Radio.tsx
new file mode 100644
index 00000000..78f248b6
--- /dev/null
+++ b/app/components/ui/Radio.tsx
@@ -0,0 +1 @@
+export * as Radio from './Radio.parts';
diff --git a/app/components/ui/RadioGroup.tsx b/app/components/ui/RadioGroup.tsx
new file mode 100644
index 00000000..b781523c
--- /dev/null
+++ b/app/components/ui/RadioGroup.tsx
@@ -0,0 +1,12 @@
+'use client';
+
+import { RadioGroup as BaseRadioGroup, type RadioGroupProps } from '@base-ui/react/radio-group';
+import { mergeProps } from '@base-ui/react/merge-props';
+
+import { cn } from './cn';
+
+export type { RadioGroupProps };
+
+export function RadioGroup(props: RadioGroupProps) {
+  return <BaseRadioGroup {...mergeProps({ className: cn('grid w-full gap-2') }, props)} />;
+}
diff --git a/app/vibenet/demos/account/components/CreateAccountModal.tsx b/app/vibenet/demos/account/components/CreateAccountModal.tsx
index 4de10acd..db34bac1 100644
--- a/app/vibenet/demos/account/components/CreateAccountModal.tsx
+++ b/app/vibenet/demos/account/components/CreateAccountModal.tsx
@@ -14,8 +14,13 @@ import { useEffect, useMemo, useState } from 'react';
 
 import { Button } from '../../../../components/ui/Button';
 import { cn } from '../../../../components/ui/cn';
-import { Text } from '../../../../components/ui/Text';
 import { Drawer } from '../../../../components/ui/Drawer';
+import { Field } from '../../../../components/ui/Field';
+import { Input } from '../../../../components/ui/Input';
+import { InputGroup } from '../../../../components/ui/InputGroup';
+import { Radio } from '../../../../components/ui/Radio';
+import { RadioGroup } from '../../../../components/ui/RadioGroup';
+import { Text } from '../../../../components/ui/Text';
 import { KIND_LABEL, short, signerIdentity, type CreateMode, type WalletSigner } from '../shared';
 import { CheckIcon, KindBadge, TrashIcon } from '../../_shared/primitives';
 import { actorPairs, normalizeSalt, randomHex32, sortActors, toStoredActor } from '../library/derive';
@@ -27,10 +32,15 @@ type CreateAccountModalProps = {
   onClose: () => void;
 };
 
-const MODES: ReadonlyArray<readonly [CreateMode, string, string]> = [
-  ['default', 'Default', 'Simplest account setup'],
-  ['passkey', 'Passkey', 'Smart account · passkey'],
-  ['advanced', 'Advanced', 'Pick type, keys & salt'],
+const MODES: ReadonlyArray<{ value: CreateMode; title: string; description: string }> = [
+  { value: 'default', title: 'Default', description: 'Simplest account setup' },
+  { value: 'passkey', title: 'Passkey', description: 'Smart account · passkey' },
+  { value: 'advanced', title: 'Advanced', description: 'Pick type, keys & salt' },
+];
+
+const ACCOUNT_MODELS = [
+  { value: 'smart' as const, title: 'Smart Account', description: 'Counterfactual · keys + salt → address' },
+  { value: 'eoa' as const, title: 'EOA', description: 'Your EOA · delegates to DefaultAccount' },
 ];
 
 export function CreateAccountModal({ open, onClose }: CreateAccountModalProps) {
@@ -239,76 +249,54 @@ export function CreateAccountModal({ open, onClose }: CreateAccountModalProps) {
         </>
       }
     >
-      <label className="flex flex-col gap-2 text-[14px] font-normal">
-        Name
-        <input
+      <Field.Root>
+        <Field.Label>Name</Field.Label>
+        <Input
           value={modalLabel}
           placeholder={suggestedName}
-          onChange={(e) => setModalLabel(e.target.value)}
+          onValueChange={setModalLabel}
           onKeyDown={(e) => {
             if (e.key === 'Enter') {
               e.preventDefault();
               submit();
             }
           }}
-          className="w-full rounded-lg border border-bds-gray-10 bg-bds-gray-0 px-3.5 py-2.5 text-[14px] font-normal outline-none transition-colors placeholder:text-bds-gray-40 focus:border-foreground dark:border-white/10 dark:bg-white/5 dark:focus:border-white/40"
         />
-      </label>
+      </Field.Root>
 
-      <div className="flex flex-col gap-2 text-[14px] font-normal">
-        Account type
-        <div role="radiogroup" aria-label="Account type" className="grid grid-cols-3 gap-2">
-          {MODES.map(([mode, title, hint]) => (
-            <button
-              key={mode}
-              type="button"
-              role="radio"
-              aria-checked={createMode === mode}
-              onClick={() => setCreateMode(mode)}
-              className={cn(
-                'flex flex-col gap-1 rounded-lg border p-3 text-left transition-colors',
-                createMode === mode
-                  ? 'border-foreground'
-                  : 'border-bds-gray-10 hover:border-foreground dark:border-white/10 dark:hover:border-white',
-              )}
-            >
-              <span className="text-[14px] font-normal">{title}</span>
-              <span className="text-[12px] font-normal text-bds-gray-60 dark:text-bds-gray-40">{hint}</span>
-            </button>
+      <Field.Root>
+        <Field.Label>Account type</Field.Label>
+        <RadioGroup value={createMode} onValueChange={setCreateMode} className="grid-cols-3">
+          {MODES.map((option) => (
+            <Radio.Root key={option.value} value={option.value}>
+              <Text as="span" variant="label.regular">
+                {option.title}
+              </Text>
+              <Text as="span" variant="footnote" tone="muted">
+                {option.description}
+              </Text>
+            </Radio.Root>
           ))}
-        </div>
-      </div>
+        </RadioGroup>
+      </Field.Root>
 
       {createMode === 'advanced' ? (
         <>
-          <div className="flex flex-col gap-2 text-[14px] font-normal">
-            Account model
-            <div role="radiogroup" aria-label="Account model" className="grid grid-cols-2 gap-2">
-              {(
-                [
-                  ['smart', 'Smart Account', 'Counterfactual · keys + salt → address'],
-                  ['eoa', 'EOA', 'Your EOA · delegates to DefaultAccount'],
-                ] as const
-              ).map(([type, title, hint]) => (
-                <button
-                  key={type}
-                  type="button"
-                  role="radio"
-                  aria-checked={modalType === type}
-                  onClick={() => setModalType(type)}
-                  className={cn(
-                    'flex flex-col gap-1 rounded-lg border p-3 text-left transition-colors',
-                    modalType === type
-                      ? 'border-foreground'
-                      : 'border-bds-gray-10 hover:border-foreground dark:border-white/10 dark:hover:border-white',
-                  )}
-                >
-                  <span className="text-[14px] font-normal">{title}</span>
-                  <span className="text-[12px] font-normal text-bds-gray-60 dark:text-bds-gray-40">{hint}</span>
-                </button>
+          <Field.Root>
+            <Field.Label>Account model</Field.Label>
+            <RadioGroup value={modalType} onValueChange={setModalType} className="grid-cols-2">
+              {ACCOUNT_MODELS.map((option) => (
+                <Radio.Root key={option.value} value={option.value}>
+                  <Text as="span" variant="label.regular">
+                    {option.title}
+                  </Text>
+                  <Text as="span" variant="footnote" tone="muted">
+                    {option.description}
+                  </Text>
+                </Radio.Root>
               ))}
-            </div>
-          </div>
+            </RadioGroup>
+          </Field.Root>
 
           {modalType === 'smart' ? (
             <>
@@ -329,26 +317,25 @@ export function CreateAccountModal({ open, onClose }: CreateAccountModalProps) {
                   if (s) setModalIds((prev) => [...prev, s.id]);
                 }}
               />
-              <label className="flex flex-col gap-2 text-[14px] font-normal">
-                Salt
-                <div className="flex items-center gap-2 rounded-lg border border-bds-gray-10 bg-bds-gray-0 transition-colors focus-within:border-foreground dark:border-white/10 dark:bg-white/5 dark:focus-within:border-bds-blue-40">
-                  <input
+              <Field.Root>
+                <Field.Label>Salt</Field.Label>
+                <InputGroup.Root>
+                  <InputGroup.Control
                     value={modalSalt}
                     spellCheck={false}
-                    onChange={(e) => setModalSalt(e.target.value)}
+                    onValueChange={setModalSalt}
                     placeholder="0x… (32 bytes) or any phrase"
-                    className="min-w-0 flex-1 bg-transparent px-3.5 py-2.5 text-[13px] font-normal outline-none placeholder:text-bds-gray-40"
                   />
                   <Button
                     size="sm"
                     variant="secondary"
                     onClick={() => setModalSalt(randomHex32())}
-                    className="mr-1.5 shrink-0"
+                    className="me-1.5 shrink-0"
                   >
                     Randomize
                   </Button>
-                </div>
-              </label>
+                </InputGroup.Root>
+              </Field.Root>
             </>
           ) : (
             <KeyPicker
@@ -437,10 +424,11 @@ function KeyPicker({
                   type="button"
                   onClick={() => onToggle(s)}
                   className={cn(
-                    'flex flex-1 items-center gap-2 rounded-lg border px-2 py-2.5 text-left transition-colors',
-                    on
-                      ? 'border-foreground'
-                      : 'border-bds-gray-10 hover:border-foreground dark:border-white/10 dark:hover:border-white',
+                    'flex flex-1 items-center gap-2 rounded-xl px-2 py-2.5 text-left outline-none',
+                    'ring-1 ring-inset ring-bds-gray-10',
+                    'transition-[box-shadow] duration-150 ease motion-reduce:transition-none',
+                    on ? 'ring-2 ring-bds-gray-100' : 'hover:ring-bds-gray-20',
+                    'focus-visible:ring-2 focus-visible:ring-brand-blue',
                   )}
                 >
                   <Text as="span" variant="label" className="truncate">
@@ -458,14 +446,20 @@ function KeyPicker({
                     onClick={() => onDelete?.(s.id)}
                     aria-label={`Delete key ${s.label}`}
                     title="Delete unused key"
-                    className="flex w-8 shrink-0 items-center justify-center rounded-lg border border-bds-gray-10 text-bds-gray-50 transition-colors hover:border-bds-red-40 hover:text-bds-red-60 dark:border-white/10"
+                    className={cn(
+                      'flex w-8 shrink-0 items-center justify-center rounded-xl text-bds-gray-50 outline-none',
+                      'ring-1 ring-inset ring-bds-gray-10',
+                      'transition-[box-shadow,color] duration-150 ease motion-reduce:transition-none',
+                      'hover:text-bds-red-60 hover:ring-bds-red-40',
+                      'focus-visible:ring-2 focus-visible:ring-bds-gray-100',
+                    )}
                   >
                     <TrashIcon size={15} />
                   </button>
                 ) : inUse ? (
                   <span
                     title="Bound to an account — can't be deleted"
-                    className="flex shrink-0 items-center rounded-lg border border-bds-gray-10 px-2 text-[11px] text-bds-gray-50 dark:border-white/10 dark:text-bds-gray-40"
+                    className="flex shrink-0 items-center rounded-xl px-2 text-[11px] text-bds-gray-50 ring-1 ring-inset ring-bds-gray-10"
                   >
                     in use
                   </span>

From 845d34497b79afd9faf0ceb33c512037b9b6cbdb Mon Sep 17 00:00:00 2001
From: Max Barvian <max@barvian.me>
Date: Wed, 2 Sep 2026 16:30:29 -0700
Subject: [PATCH 2/6] Update faucet

---
 app/vibenet/faucet/page.tsx | 29 +++++++++++++----------------
 1 file changed, 13 insertions(+), 16 deletions(-)

diff --git a/app/vibenet/faucet/page.tsx b/app/vibenet/faucet/page.tsx
index 1dce1f81..f3f84d3b 100644
--- a/app/vibenet/faucet/page.tsx
+++ b/app/vibenet/faucet/page.tsx
@@ -1,13 +1,14 @@
 'use client';
 
 import { useCallback, useEffect, useState } from 'react';
-import type { ChangeEvent, FormEvent, MouseEvent, ReactNode } from 'react';
+import type { FormEvent, MouseEvent, ReactNode } from 'react';
 
 import Link from 'next/link';
 
 import { trackFaucetRequest } from '../../analytics/events';
 import { Button } from '../../components/ui/Button';
 import { Card } from '../../components/ui/Card';
+import { Input } from '../../components/ui/Input';
 import { Skeleton } from '../../components/ui/Skeleton';
 import { Spinner } from '../../components/ui/Spinner';
 import { cn } from '../../components/ui/cn';
@@ -117,8 +118,8 @@ export default function FaucetPage() {
     [runDrip],
   );
 
-  const handleAddressChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {
-    setAddress(event.target.value);
+  const handleAddressChange = useCallback((value: string) => {
+    setAddress(value);
   }, []);
 
   const validAddress = isAddress(address);
@@ -225,19 +226,15 @@ export default function FaucetPage() {
           </Text>
         </div>
         <form className="flex flex-col gap-3" onSubmit={handleSubmit}>
-          <label htmlFor="faucet-address" className="flex flex-col gap-2 text-[14px]">
-            <input
-              id="faucet-address"
-              type="text"
-              aria-label="Recipient address"
-              value={address}
-              onChange={handleAddressChange}
-              placeholder="0x…"
-              spellCheck={false}
-              autoComplete="off"
-              className="w-full rounded-lg border border-bds-gray-10 bg-bds-gray-0 px-3.5 py-2.5 text-[14px] font-normal text-foreground outline-none transition-colors placeholder:text-bds-gray-40 focus:border-foreground dark:border-white/10 dark:bg-white/5 dark:text-white dark:focus:border-white/40"
-            />
-          </label>
+          <Input
+            id="faucet-address"
+            aria-label="Recipient address"
+            value={address}
+            onValueChange={handleAddressChange}
+            placeholder="0x…"
+            spellCheck={false}
+            autoComplete="off"
+          />
           <div className="flex flex-wrap gap-3">
             {FAUCET_TOKENS.map((token) => {
               const enabled = status ? token.isEnabled(status) : token.id === 'eth';

From 645ef8a729933d64cd71cc032484b31774d320b7 Mon Sep 17 00:00:00 2001
From: Max Barvian <max@barvian.me>
Date: Thu, 3 Sep 2026 10:12:48 -0700
Subject: [PATCH 3/6] more cleanup

---
 app/components/ui/Input.tsx                   |  12 +-
 app/components/ui/InputGroup.parts.tsx        |   4 +-
 app/components/ui/Radio.parts.tsx             |   6 +-
 app/components/ui/RadioGroup.tsx              |   2 +-
 app/components/ui/Select.tsx                  |   6 +-
 app/vibenet/demos/_shared/AccountSwitcher.tsx |   5 +-
 .../demos/_shared/AddressAutocomplete.tsx     |  15 +--
 app/vibenet/demos/_shared/form.tsx            |  78 +++---------
 .../account/components/CreateAccountModal.tsx |  12 +-
 .../account/components/SessionKeyEditor.tsx   |  40 +++---
 .../account/components/TransactionModal.tsx   | 116 ++++++++----------
 .../demos/b20/components/CreatePolicy.tsx     |  57 ++++++---
 .../demos/b20/components/DeployModule.tsx     | 111 ++++++++---------
 .../address/[addr]/OwnedAccountView.tsx       |  22 ++--
 14 files changed, 229 insertions(+), 257 deletions(-)

diff --git a/app/components/ui/Input.tsx b/app/components/ui/Input.tsx
index a073cc99..948fe79a 100644
--- a/app/components/ui/Input.tsx
+++ b/app/components/ui/Input.tsx
@@ -9,19 +9,19 @@ import { textVariantClasses } from './Text';
 export type { InputProps };
 
 export const inputClassName = cn(
-  'w-full rounded-xl bg-transparent py-2.5 ps-2.5 pe-2.5 outline-none',
+  'w-full rounded-lg bg-transparent py-2.5 ps-2.5 pe-2.5 outline-none',
   textVariantClasses['label.regular'],
   'text-bds-gray-100 placeholder:text-bds-gray-40',
   'ring-1 ring-inset ring-bds-gray-10',
   'transition-[box-shadow] duration-150 ease motion-reduce:transition-none',
-  'data-[focused]:ring-2 data-[focused]:ring-bds-gray-100',
-  'data-[invalid]:ring-bds-red-40 data-[invalid]:data-[focused]:ring-bds-red-40',
+  'focus:ring-2 focus:ring-bds-gray-100',
+  'aria-invalid:ring-bds-red-40 data-[invalid]:ring-bds-red-40',
+  'focus:aria-invalid:ring-bds-red-40',
   'data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50',
 );
 
-// Styled Base UI Input. Compose inside Field.Root so `data-focused` /
-// `data-invalid` come from that Field context. Use InputGroup when the
-// field has addons (e.g. a trailing button).
+// Styled Base UI Input. Use InputGroup when the field has addons
+// (e.g. a trailing button).
 export function Input(props: InputProps) {
   return <BaseInput {...mergeProps({ className: inputClassName }, props)} />;
 }
diff --git a/app/components/ui/InputGroup.parts.tsx b/app/components/ui/InputGroup.parts.tsx
index ad71cc10..f912b997 100644
--- a/app/components/ui/InputGroup.parts.tsx
+++ b/app/components/ui/InputGroup.parts.tsx
@@ -21,9 +21,9 @@ export function Root({ role = 'group', disabled, invalid, ...props }: RootProps)
       {...mergeProps(
         {
           className: cn(
-            'flex items-center rounded-xl ring-1 ring-inset ring-bds-gray-10',
+            'flex items-center rounded-lg ring-1 ring-inset ring-bds-gray-10',
             'transition-[box-shadow] duration-150 ease motion-reduce:transition-none',
-            'has-[input[data-focused]]:ring-2 has-[input[data-focused]]:ring-bds-gray-100',
+            'has-[input:focus]:ring-2 has-[input:focus]:ring-bds-gray-100',
             'aria-invalid:ring-bds-red-40 has-[input[data-invalid]]:ring-bds-red-40',
             'aria-disabled:opacity-50',
           ),
diff --git a/app/components/ui/Radio.parts.tsx b/app/components/ui/Radio.parts.tsx
index d037adf5..a451482e 100644
--- a/app/components/ui/Radio.parts.tsx
+++ b/app/components/ui/Radio.parts.tsx
@@ -13,13 +13,11 @@ export function Root(props: ComponentProps<typeof BaseRadio.Root>) {
       {...mergeProps(
         {
           className: cn(
-            'flex min-w-0 w-full cursor-pointer flex-col gap-1 rounded-xl p-3 text-left select-none outline-none',
+            'flex min-w-0 w-full cursor-pointer flex-col gap-1 rounded-lg p-3 text-left select-none outline-none',
             'ring-1 ring-inset ring-bds-gray-10',
-            'transition-[box-shadow] duration-150 ease motion-reduce:transition-none',
             'data-[checked]:ring-2 data-[checked]:ring-bds-gray-100',
             'data-[hovered]:ring-bds-gray-20',
-            'focus-visible:ring-2 focus-visible:ring-brand-blue',
-            'data-[checked]:focus-visible:ring-brand-blue',
+            'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-brand-blue',
             'data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50',
           ),
         },
diff --git a/app/components/ui/RadioGroup.tsx b/app/components/ui/RadioGroup.tsx
index b781523c..023cfa33 100644
--- a/app/components/ui/RadioGroup.tsx
+++ b/app/components/ui/RadioGroup.tsx
@@ -8,5 +8,5 @@ import { cn } from './cn';
 export type { RadioGroupProps };
 
 export function RadioGroup(props: RadioGroupProps) {
-  return <BaseRadioGroup {...mergeProps({ className: cn('grid w-full gap-2') }, props)} />;
+  return <BaseRadioGroup {...mergeProps({ className: cn('grid w-full gap-3') }, props)} />;
 }
diff --git a/app/components/ui/Select.tsx b/app/components/ui/Select.tsx
index 2b6ace7e..3ab8bf31 100644
--- a/app/components/ui/Select.tsx
+++ b/app/components/ui/Select.tsx
@@ -57,7 +57,11 @@ export function Select({
       <BaseSelect.Trigger
         aria-label={ariaLabel}
         className={cn(
-          'inline-flex h-11 w-full items-center justify-between gap-2 rounded-lg border border-bds-gray-10 bg-background px-3.5 text-[14px] text-foreground outline-none transition-colors focus:border-foreground data-[placeholder]:text-bds-gray-40 disabled:cursor-not-allowed disabled:opacity-50 dark:border-white/10 dark:bg-white/5 dark:text-white dark:focus:border-white',
+          'inline-flex h-10 w-full items-center justify-between gap-2 rounded-lg bg-transparent px-3.5 text-[14px] text-foreground outline-none',
+          'ring-1 ring-inset ring-bds-gray-10',
+          'transition-[box-shadow] duration-150 ease motion-reduce:transition-none',
+          'focus:ring-black/40 data-[popup-open]:ring-black/40 dark:focus:ring-white/40 dark:data-[popup-open]:ring-white/40',
+          'data-[placeholder]:text-bds-gray-40 disabled:cursor-not-allowed disabled:opacity-50',
           className,
         )}
       >
diff --git a/app/vibenet/demos/_shared/AccountSwitcher.tsx b/app/vibenet/demos/_shared/AccountSwitcher.tsx
index 71da24e4..2b6cc941 100644
--- a/app/vibenet/demos/_shared/AccountSwitcher.tsx
+++ b/app/vibenet/demos/_shared/AccountSwitcher.tsx
@@ -124,7 +124,10 @@ export function AccountSwitcher({
     >
       <Popover.Trigger
         className={cn(
-          'group flex items-center justify-between gap-2 rounded-lg border border-bds-gray-10 bg-background px-2.5 py-1.5 transition-colors hover:border-foreground dark:border-white/10 dark:bg-white/5 dark:hover:border-white',
+          'group flex h-10 items-center justify-between gap-2 rounded-lg bg-transparent px-2.5 outline-none',
+          'ring-1 ring-inset ring-bds-gray-10',
+          'transition-[box-shadow] duration-150 ease motion-reduce:transition-none',
+          'focus:ring-black/40 data-[popup-open]:ring-black/40 dark:focus:ring-white/40 dark:data-[popup-open]:ring-white/40',
           triggerClassName,
         )}
       >
diff --git a/app/vibenet/demos/_shared/AddressAutocomplete.tsx b/app/vibenet/demos/_shared/AddressAutocomplete.tsx
index 5ab143b7..fe421607 100644
--- a/app/vibenet/demos/_shared/AddressAutocomplete.tsx
+++ b/app/vibenet/demos/_shared/AddressAutocomplete.tsx
@@ -9,6 +9,7 @@ import { useEffect, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 
 import { cn } from '../../../components/ui/cn';
+import { InputGroup } from '../../../components/ui/InputGroup';
 import { short } from '../account/shared';
 
 export type AddressBookEntry = { label: string; address: string };
@@ -74,15 +75,15 @@ export function AddressAutocomplete({
 
   return (
     <div ref={ref} className={cn('relative flex-1')}>
-      <div className="flex items-center overflow-hidden rounded-lg border border-bds-gray-10 bg-background transition-colors focus-within:border-base-blue dark:border-white/10 dark:bg-white/5">
-        {tag ? <span className="shrink-0 pl-3 text-[11px] text-bds-gray-40">{tag}</span> : null}
-        <input
-          className={cn('w-full bg-transparent px-2 py-2 text-[13px] outline-none placeholder:text-bds-gray-40', className)}
+      <InputGroup.Root>
+        {tag ? <span className="shrink-0 ps-2.5 text-[11px] text-bds-gray-40">{tag}</span> : null}
+        <InputGroup.Control
+          className={className}
           value={value}
           spellCheck={false}
           placeholder={placeholder}
-          onChange={(e) => {
-            onChange(e.target.value);
+          onValueChange={(next) => {
+            onChange(next);
             setOpen(true);
           }}
           onFocus={() => setOpen(true)}
@@ -90,7 +91,7 @@ export function AddressAutocomplete({
             if (e.key === 'Escape') setOpen(false);
           }}
         />
-      </div>
+      </InputGroup.Root>
       {open && matches.length > 0 && rect && typeof document !== 'undefined'
         ? createPortal(
             <div
diff --git a/app/vibenet/demos/_shared/form.tsx b/app/vibenet/demos/_shared/form.tsx
index 683ce1fe..09c8d210 100644
--- a/app/vibenet/demos/_shared/form.tsx
+++ b/app/vibenet/demos/_shared/form.tsx
@@ -1,37 +1,15 @@
 'use client';
 
-import {
-  cloneElement,
-  isValidElement,
-  useId,
-  type InputHTMLAttributes,
-  type ReactElement,
-  type ReactNode,
-} from 'react';
+import { type ReactNode } from 'react';
 
-import { cn } from '../../../components/ui/cn';
+import { Field as UiField } from '../../../components/ui/Field';
 import { InfoTooltip } from '../../../components/ui/InfoTooltip';
-import { Text, textVariantClasses } from '../../../components/ui/Text';
 
-// Form building blocks shared across the demos (labelled fields, text inputs,
-// inline validation notes).
-
-export function Input({ value, onChange, placeholder, className, ...props }: InputHTMLAttributes<HTMLInputElement>) {
-  return (
-    <input
-      value={value}
-      onChange={onChange}
-      placeholder={placeholder}
-      className={cn(
-        'h-10 w-full rounded-lg border border-bds-gray-10 bg-background px-3 outline-none transition-colors placeholder:text-bds-gray-40 focus:border-base-blue dark:border-white/10 dark:bg-white/5 dark:text-white',
-        textVariantClasses['label.regular'],
-        className,
-      )}
-      {...props}
-    />
-  );
-}
+export { Input } from '../../../components/ui/Input';
 
+// Demo Field keeps the `label` / `hint` / `help` shorthand used across B20.
+// The chrome is the shared Field parts; help stays a tooltip beside the label
+// because that trigger is a button and must not nest inside <label>.
 export function Field({
   label,
   children,
@@ -43,39 +21,19 @@ export function Field({
   hint?: string;
   help?: string;
 }) {
-  const id = useId();
-  const hintNode = hint ? (
-    <Text as="span" variant="footnote" tone="muted">
-      {hint}
-    </Text>
-  ) : null;
-  // Without help: implicit label association (the control is nested in <label>).
-  if (!help) {
-    return (
-      <label className="flex min-w-0 flex-col gap-1.5">
-        <Text as="span" variant="label" tone="muted">
-          {label}
-        </Text>
-        {children}
-        {hintNode}
-      </label>
-    );
-  }
-  // With help: the tooltip trigger is a <button>, which must not nest inside a
-  // <label>. Switch to explicit htmlFor/id association and keep the label text
-  // and tooltip in a plain header row above the control.
-  const control = isValidElement(children) ? cloneElement(children as ReactElement<{ id?: string }>, { id }) : children;
   return (
-    <div className="flex min-w-0 flex-col gap-1.5">
-      <div className="flex items-center gap-1.5">
-        <label htmlFor={id} className={cn(textVariantClasses.label, 'text-bds-gray-60')}>
-          {label}
-        </label>
-        <InfoTooltip label={`About ${label}`}>{help}</InfoTooltip>
-      </div>
-      {control}
-      {hintNode}
-    </div>
+    <UiField.Root>
+      {help ? (
+        <div className="flex items-center gap-1.5">
+          <UiField.Label>{label}</UiField.Label>
+          <InfoTooltip label={`About ${label}`}>{help}</InfoTooltip>
+        </div>
+      ) : (
+        <UiField.Label>{label}</UiField.Label>
+      )}
+      {children}
+      {hint ? <UiField.Description>{hint}</UiField.Description> : null}
+    </UiField.Root>
   );
 }
 
diff --git a/app/vibenet/demos/account/components/CreateAccountModal.tsx b/app/vibenet/demos/account/components/CreateAccountModal.tsx
index db34bac1..f79a58d7 100644
--- a/app/vibenet/demos/account/components/CreateAccountModal.tsx
+++ b/app/vibenet/demos/account/components/CreateAccountModal.tsx
@@ -424,11 +424,12 @@ function KeyPicker({
                   type="button"
                   onClick={() => onToggle(s)}
                   className={cn(
-                    'flex flex-1 items-center gap-2 rounded-xl px-2 py-2.5 text-left outline-none',
+                    'flex flex-1 items-center gap-2 rounded-lg px-2 py-2.5 text-left outline-none',
                     'ring-1 ring-inset ring-bds-gray-10',
                     'transition-[box-shadow] duration-150 ease motion-reduce:transition-none',
                     on ? 'ring-2 ring-bds-gray-100' : 'hover:ring-bds-gray-20',
-                    'focus-visible:ring-2 focus-visible:ring-brand-blue',
+                    'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-brand-blue',
+                    'focus-visible:transition-none',
                   )}
                 >
                   <Text as="span" variant="label" className="truncate">
@@ -447,11 +448,12 @@ function KeyPicker({
                     aria-label={`Delete key ${s.label}`}
                     title="Delete unused key"
                     className={cn(
-                      'flex w-8 shrink-0 items-center justify-center rounded-xl text-bds-gray-50 outline-none',
+                      'flex w-8 shrink-0 items-center justify-center rounded-lg text-bds-gray-50 outline-none',
                       'ring-1 ring-inset ring-bds-gray-10',
                       'transition-[box-shadow,color] duration-150 ease motion-reduce:transition-none',
                       'hover:text-bds-red-60 hover:ring-bds-red-40',
-                      'focus-visible:ring-2 focus-visible:ring-bds-gray-100',
+                      'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-bds-gray-100',
+                      'focus-visible:transition-none',
                     )}
                   >
                     <TrashIcon size={15} />
@@ -459,7 +461,7 @@ function KeyPicker({
                 ) : inUse ? (
                   <span
                     title="Bound to an account — can't be deleted"
-                    className="flex shrink-0 items-center rounded-xl px-2 text-[11px] text-bds-gray-50 ring-1 ring-inset ring-bds-gray-10"
+                    className="flex shrink-0 items-center rounded-lg px-2 text-[11px] text-bds-gray-50 ring-1 ring-inset ring-bds-gray-10"
                   >
                     in use
                   </span>
diff --git a/app/vibenet/demos/account/components/SessionKeyEditor.tsx b/app/vibenet/demos/account/components/SessionKeyEditor.tsx
index 7180ce1e..687d6f03 100644
--- a/app/vibenet/demos/account/components/SessionKeyEditor.tsx
+++ b/app/vibenet/demos/account/components/SessionKeyEditor.tsx
@@ -10,7 +10,9 @@ import { useState } from 'react';
 
 import { Button } from '../../../../components/ui/Button';
 import { cn } from '../../../../components/ui/cn';
+import { Field } from '../../../../components/ui/Field';
 import { CloseIcon } from '../../../../components/ui/icons';
+import { Input } from '../../../../components/ui/Input';
 import { Select } from '../../../../components/ui/Select';
 import { Text } from '../../../../components/ui/Text';
 import { getDemoChain, DEMO_CHAINS } from '../library/chains';
@@ -29,8 +31,6 @@ import { short } from '../shared';
 import { useAccountEngine } from '../useAccountEngine';
 
 const ADDR_RE = /^0x[0-9a-fA-F]{40}$/;
-const INPUT_CLS =
-  'w-full rounded-lg border border-bds-gray-10 bg-bds-gray-0 px-3 py-2 text-[13px] outline-none transition-colors placeholder:text-bds-gray-40 focus:border-foreground dark:border-white/10 dark:bg-white/5 dark:focus:border-white/40';
 const CHIP_CLS =
   'rounded-full border border-bds-gray-10 px-2.5 py-1 text-[12px] text-bds-gray-60 transition-colors hover:border-bds-gray-15 dark:border-white/10 dark:text-bds-gray-40';
 const CHIP_ON = 'border-base-blue bg-bds-blue-0 text-base-blue';
@@ -154,8 +154,8 @@ export function SessionKeyEditor({
         Register a Session Key
       </Text>
       <div className="grid grid-cols-1 gap-3 sm:grid-cols-3">
-        <label className="flex flex-col gap-1 text-[12px] text-bds-gray-60 dark:text-bds-gray-40">
-          Signer
+        <Field.Root>
+          <Field.Label>Signer</Field.Label>
           <Select
             value={skSignerId}
             onValueChange={setSkSignerId}
@@ -170,23 +170,23 @@ export function SessionKeyEditor({
               };
             })}
           />
-        </label>
-        <label className="flex flex-col gap-1 text-[12px] text-bds-gray-60 dark:text-bds-gray-40">
-          Chain
+        </Field.Root>
+        <Field.Root>
+          <Field.Label>Chain</Field.Label>
           <Select
             value={skChainShort}
             onValueChange={setSkChainShort}
             options={DEMO_CHAINS.map((c) => ({ value: c.shortName, label: c.name }))}
           />
-        </label>
-        <label className="flex flex-col gap-1 text-[12px] text-bds-gray-60 dark:text-bds-gray-40">
-          Expiry
+        </Field.Root>
+        <Field.Root>
+          <Field.Label>Expiry</Field.Label>
           <Select
             value={skExpiryId}
             onValueChange={setSkExpiryId}
             options={EXPIRY_PRESETS.map((e) => ({ value: e.id, label: e.label }))}
           />
-        </label>
+        </Field.Root>
       </div>
 
       {/* Spend Limits */}
@@ -211,20 +211,20 @@ export function SessionKeyEditor({
                 />
               </div>
               {l.token === 'custom' ? (
-                <input
-                  className={cn(INPUT_CLS, 'flex-1', !customOk && 'border-bds-red-40')}
+                <Input
+                  className={cn('flex-1', !customOk && 'ring-bds-red-40')}
                   value={l.custom}
                   spellCheck={false}
                   placeholder="0x token address (18 dec)"
-                  onChange={(e) => patchLimit(l.id, { custom: e.target.value })}
+                  onValueChange={(custom) => patchLimit(l.id, { custom })}
                 />
               ) : null}
-              <input
-                className={cn(INPUT_CLS, 'flex-1')}
+              <Input
+                className="flex-1"
                 value={l.amount}
                 inputMode="decimal"
                 placeholder={l.token === 'eth' ? '0.1' : '100'}
-                onChange={(e) => patchLimit(l.id, { amount: e.target.value })}
+                onValueChange={(amount) => patchLimit(l.id, { amount })}
               />
               <div className="flex-1">
                 <Select
@@ -273,12 +273,12 @@ export function SessionKeyEditor({
           return (
             <div key={s.id} className="flex flex-col gap-2">
               <div className="flex items-center gap-2">
-                <input
-                  className={cn(INPUT_CLS, 'flex-1', !addrOk && 'border-bds-red-40')}
+                <Input
+                  className={cn('flex-1', !addrOk && 'ring-bds-red-40')}
                   value={s.target}
                   spellCheck={false}
                   placeholder="0x target contract"
-                  onChange={(e) => patchScope(s.id, { target: e.target.value })}
+                  onValueChange={(target) => patchScope(s.id, { target })}
                 />
                 <button
                   type="button"
diff --git a/app/vibenet/demos/account/components/TransactionModal.tsx b/app/vibenet/demos/account/components/TransactionModal.tsx
index 829732f4..1f215512 100644
--- a/app/vibenet/demos/account/components/TransactionModal.tsx
+++ b/app/vibenet/demos/account/components/TransactionModal.tsx
@@ -28,7 +28,10 @@ import { toast } from 'sonner';
 
 import { Button } from '../../../../components/ui/Button';
 import { cn } from '../../../../components/ui/cn';
+import { Field } from '../../../../components/ui/Field';
 import { CloseIcon } from '../../../../components/ui/icons';
+import { Input } from '../../../../components/ui/Input';
+import { InputGroup } from '../../../../components/ui/InputGroup';
 import { Modal } from '../../../../components/ui/Modal';
 import { Select } from '../../../../components/ui/Select';
 import { Spinner } from '../../../../components/ui/Spinner';
@@ -57,9 +60,6 @@ import { scopeLabel } from '../library/policy';
 import { formatTokenAmount, KIND_LABEL, short, type WalletSigner } from '../shared';
 import { conciseError, EstimateRevertedError, isSeqMismatch, TxPendingError, useAccountEngine } from '../useAccountEngine';
 
-const INPUT_CLS =
-  'w-full rounded-lg border border-bds-gray-10 bg-bds-gray-0 px-3 py-2 text-[13px] outline-none transition-colors placeholder:text-bds-gray-40 focus:border-foreground dark:border-white/10 dark:bg-white/5 dark:focus:border-white/40';
-
 export type TransactPreset = { calls: CallRow[]; gasMode?: 'eth' | 'free' | 'usdv'; metadata?: string };
 /** Apply the staged owner change, or a specific session key's change. */
 export type ApplyTarget = 'owner' | { session: string };
@@ -802,24 +802,23 @@ export function TransactionModal({ onClose, preset, applyTarget }: TransactionMo
           </div>
 
           {/* Metadata */}
-          <div className="flex flex-col gap-1.5">
+          <Field.Root>
             <div className="flex items-baseline justify-between gap-2">
-              <span className="text-[13px] text-bds-gray-60 dark:text-bds-gray-40">Metadata</span>
+              <Field.Label>Metadata</Field.Label>
               <span className="text-[12px] text-bds-gray-60 dark:text-bds-gray-40">Top-Level · Signed</span>
             </div>
-            <input
+            <Input
               value={metaField}
               spellCheck={false}
               placeholder="Optional note / app data — e.g. invoice #4242"
-              onChange={(e) => setMetaField(e.target.value)}
-              className="w-full rounded-lg border border-bds-gray-10 bg-bds-gray-0 px-3.5 py-2.5 text-[14px] outline-none transition-colors placeholder:text-bds-gray-40 focus:border-foreground dark:border-white/10 dark:bg-white/5 dark:focus:border-white/40"
+              onValueChange={setMetaField}
             />
             {metadataHex ? (
-              <p className="text-[12px] text-bds-gray-60 dark:text-bds-gray-40">
+              <Field.Description>
                 → <span>{short(metadataHex, 14, 8)}</span>
-              </p>
+              </Field.Description>
             ) : null}
-          </div>
+          </Field.Root>
 
           {/* Gas */}
           <div className="flex flex-col gap-1.5">
@@ -941,36 +940,32 @@ function CallsEditor(props: CallsEditorProps) {
                         }
                       }}
                     />
-                    <label className="flex w-28 flex-col">
-                      <div className="flex items-center overflow-hidden rounded-lg border border-bds-gray-10 bg-bds-gray-0 transition-colors focus-within:border-foreground dark:border-white/10 dark:bg-white/5 dark:focus-within:border-white">
-                        <span className="shrink-0 pl-3 text-[11px] text-bds-gray-40">USDV</span>
-                        <input
-                          className="w-full bg-transparent px-2 py-2 text-[13px] outline-none placeholder:text-bds-gray-40"
-                          value={amtDisplay}
-                          spellCheck={false}
-                          inputMode="decimal"
-                          placeholder="0"
-                          onChange={(e) => {
-                            const val = e.target.value;
-                            setUsdvAmountDrafts((d) => ({ ...d, [r.id]: val }));
-                            try {
-                              const amt = parseUnits(val || '0', USDV_DECIMALS);
-                              const rec = isAddressStr(recipientDisplay) ? recipientDisplay : usdv.recipient;
-                              setRow(r.id, { data: encodeUsdvTransfer(rec, amt) });
-                            } catch {
-                              /* ignore */
-                            }
-                          }}
-                          onBlur={() =>
-                            setUsdvAmountDrafts((d) => {
-                              const n = { ...d };
-                              delete n[r.id];
-                              return n;
-                            })
+                    <InputGroup.Root className="w-28">
+                      <span className="shrink-0 ps-2.5 text-[11px] text-bds-gray-40">USDV</span>
+                      <InputGroup.Control
+                        value={amtDisplay}
+                        spellCheck={false}
+                        inputMode="decimal"
+                        placeholder="0"
+                        onValueChange={(val) => {
+                          setUsdvAmountDrafts((d) => ({ ...d, [r.id]: val }));
+                          try {
+                            const amt = parseUnits(val || '0', USDV_DECIMALS);
+                            const rec = isAddressStr(recipientDisplay) ? recipientDisplay : usdv.recipient;
+                            setRow(r.id, { data: encodeUsdvTransfer(rec, amt) });
+                          } catch {
+                            /* ignore */
                           }
-                        />
-                      </div>
-                    </label>
+                        }}
+                        onBlur={() =>
+                          setUsdvAmountDrafts((d) => {
+                            const n = { ...d };
+                            delete n[r.id];
+                            return n;
+                          })
+                        }
+                      />
+                    </InputGroup.Root>
                     {calls.length > 1 && <RemoveRowButton onClick={() => removeRow(r.id)} disabled={false} />}
                   </li>
                 );
@@ -984,19 +979,16 @@ function CallsEditor(props: CallsEditorProps) {
                     onChange={(to) => setRow(r.id, { to })}
                     accounts={addressBook}
                   />
-                  <label className="flex w-28 flex-col">
-                    <div className="flex items-center overflow-hidden rounded-lg border border-bds-gray-10 bg-bds-gray-0 transition-colors focus-within:border-foreground dark:border-white/10 dark:bg-white/5 dark:focus-within:border-white">
-                      <span className="shrink-0 pl-3 text-[11px] text-bds-gray-40">ETH</span>
-                      <input
-                        className="w-full bg-transparent px-2 py-2 text-[13px] outline-none placeholder:text-bds-gray-40"
-                        value={r.value}
-                        spellCheck={false}
-                        inputMode="decimal"
-                        placeholder="0.0"
-                        onChange={(e) => setRow(r.id, { value: e.target.value })}
-                      />
-                    </div>
-                  </label>
+                  <InputGroup.Root className="w-28">
+                    <span className="shrink-0 ps-2.5 text-[11px] text-bds-gray-40">ETH</span>
+                    <InputGroup.Control
+                      value={r.value}
+                      spellCheck={false}
+                      inputMode="decimal"
+                      placeholder="0.0"
+                      onValueChange={(value) => setRow(r.id, { value })}
+                    />
+                  </InputGroup.Root>
                   {calls.length > 1 && <RemoveRowButton onClick={() => removeRow(r.id)} disabled={false} />}
                 </li>
               );
@@ -1052,27 +1044,27 @@ function CallsEditor(props: CallsEditorProps) {
                 >
                   {r.phase === 0 ? 'pre' : '1'}
                 </button>
-                <input
-                  className={cn(INPUT_CLS, 'flex-1')}
+                <Input
+                  className="flex-1"
                   value={r.to}
                   spellCheck={false}
                   placeholder="Contract / address"
-                  onChange={(e) => setRow(r.id, { to: e.target.value })}
+                  onValueChange={(to) => setRow(r.id, { to })}
                 />
-                <input
-                  className={cn(INPUT_CLS, 'w-24')}
+                <Input
+                  className="w-24"
                   value={r.value}
                   spellCheck={false}
                   inputMode="decimal"
                   placeholder="0.0"
-                  onChange={(e) => setRow(r.id, { value: e.target.value })}
+                  onValueChange={(value) => setRow(r.id, { value })}
                 />
-                <input
-                  className={cn(INPUT_CLS, 'flex-1')}
+                <Input
+                  className="flex-1"
                   value={r.data}
                   spellCheck={false}
                   placeholder="0x"
-                  onChange={(e) => setRow(r.id, { data: e.target.value })}
+                  onValueChange={(data) => setRow(r.id, { data })}
                 />
                 {calls.length > 1 && <RemoveRowButton onClick={() => removeRow(r.id)} disabled={false} />}
               </li>
diff --git a/app/vibenet/demos/b20/components/CreatePolicy.tsx b/app/vibenet/demos/b20/components/CreatePolicy.tsx
index 2416a262..2a5c7b17 100644
--- a/app/vibenet/demos/b20/components/CreatePolicy.tsx
+++ b/app/vibenet/demos/b20/components/CreatePolicy.tsx
@@ -4,8 +4,9 @@ import { useEffect, useRef, useState } from 'react';
 import { encodeFunctionData, type Address, type Hex } from 'viem';
 
 import { Button } from '../../../../components/ui/Button';
-import { cn } from '../../../../components/ui/cn';
 import { Drawer } from '../../../../components/ui/Drawer';
+import { Radio } from '../../../../components/ui/Radio';
+import { RadioGroup } from '../../../../components/ui/RadioGroup';
 import { Select } from '../../../../components/ui/Select';
 import { Text } from '../../../../components/ui/Text';
 import { walletErrorMessage } from '../../../library/wallet';
@@ -171,19 +172,30 @@ export function CreatePolicy({
         </Field>
       </div>
       <div className="mt-5">
-        <Text as="span" variant="label" tone="muted" className="mb-2 block">Policy type</Text>
-        <div className="grid gap-3 sm:grid-cols-3">
-          {([
-            ['allowlist', 'Allowlist', 'Only member wallets pass.'],
-            ['blocklist', 'Blocklist', 'Every wallet except listed members passes.'],
-            ['advanced', 'Advanced', 'Combine existing policies.'],
-          ] as const).map(([value, title, body]) => {
-            const selected = value === 'advanced' ? mode === 'composite' : mode === 'simple' && simpleKind === value;
-            return (
-              <button key={value} type="button" aria-pressed={selected} onClick={() => selectType(value)} className={cn('flex flex-col gap-1 rounded-xl border p-4 text-left', selected ? 'border-base-blue bg-bds-blue-0' : 'border-bds-gray-10 dark:border-white/10')}><strong className="text-[13px]">{title}</strong><span className="text-[12px] text-bds-gray-60">{body}</span></button>
-            );
-          })}
-        </div>
+        <Field label="Policy type">
+          <RadioGroup
+            value={mode === 'composite' ? 'advanced' : simpleKind}
+            onValueChange={(next) => selectType(next as SimplePolicyKind | 'advanced')}
+            className="grid-cols-1 sm:grid-cols-3"
+          >
+            {(
+              [
+                ['allowlist', 'Allowlist', 'Only member wallets pass.'],
+                ['blocklist', 'Blocklist', 'Every wallet except listed members passes.'],
+                ['advanced', 'Advanced', 'Combine existing policies.'],
+              ] as const
+            ).map(([value, title, body]) => (
+              <Radio.Root key={value} value={value}>
+                <Text as="span" variant="label.regular">
+                  {title}
+                </Text>
+                <Text as="span" variant="footnote" tone="muted">
+                  {body}
+                </Text>
+              </Radio.Root>
+            ))}
+          </RadioGroup>
+        </Field>
       </div>
       {mode === 'simple' ? (
         <div className="mt-5">
@@ -227,7 +239,22 @@ export function CreatePolicy({
               />
             </Field>
           </div>
-          <div className="mt-5 grid gap-3 sm:grid-cols-2">{compositeKinds.map((item) => <button key={item} type="button" aria-pressed={compositeKind === item} onClick={() => setCompositeKind(item)} className={cn('rounded-xl border p-4 text-left', compositeKind === item ? 'border-base-blue bg-bds-blue-0' : 'border-bds-gray-10 dark:border-white/10')}><strong className="text-[13px]">{policyKindLabel(item)}</strong><span className="mt-1 block text-[12px] text-bds-gray-60">{item === 'union' ? 'UNION · A wallet passes when any child allows it.' : 'INTERSECT · A wallet passes only when every child allows it.'}</span></button>)}</div>
+          <div className="mt-5">
+            <RadioGroup value={compositeKind} onValueChange={setCompositeKind} className="grid-cols-1 sm:grid-cols-2">
+              {compositeKinds.map((item) => (
+                <Radio.Root key={item} value={item}>
+                  <Text as="span" variant="label.regular">
+                    {policyKindLabel(item)}
+                  </Text>
+                  <Text as="span" variant="footnote" tone="muted">
+                    {item === 'union'
+                      ? 'UNION · A wallet passes when any child allows it.'
+                      : 'INTERSECT · A wallet passes only when every child allows it.'}
+                  </Text>
+                </Radio.Root>
+              ))}
+            </RadioGroup>
+          </div>
           <div className="mt-5 divide-y divide-bds-gray-10 overflow-hidden rounded-lg border border-bds-gray-10 dark:divide-white/10 dark:border-white/10">
             {children.map((child, index) => {
               // Keep this row's current selection in the option list so the Select
diff --git a/app/vibenet/demos/b20/components/DeployModule.tsx b/app/vibenet/demos/b20/components/DeployModule.tsx
index e8e1ed13..15b2f21b 100644
--- a/app/vibenet/demos/b20/components/DeployModule.tsx
+++ b/app/vibenet/demos/b20/components/DeployModule.tsx
@@ -5,7 +5,8 @@ import { useState } from 'react';
 import { encodeFunctionData, type Address, type Hex } from 'viem';
 
 import { Button } from '../../../../components/ui/Button';
-import { cn } from '../../../../components/ui/cn';
+import { Radio } from '../../../../components/ui/Radio';
+import { RadioGroup } from '../../../../components/ui/RadioGroup';
 import { Text } from '../../../../components/ui/Text';
 import { CopyableValue } from '../../../components/CopyableValue';
 import { formatTokenAmount, short } from '../../account/shared';
@@ -239,71 +240,59 @@ export function DeployModule({
             </Field>
           </div>
           <div className="mt-5">
-            <Text as="span" variant="label" tone="muted" className="mb-2 block">
-              Token type
-            </Text>
-            <div className="grid gap-3 sm:grid-cols-3">
-              {(
-                [
-                  ['asset', 'Asset', 'Flexible decimals, announcements, and displayed-balance changes.'],
-                  ['stablecoin', 'Stablecoin', 'A currency-linked token: always six decimals and a currency code.'],
-                  ['advanced', 'Advanced', 'Set a supply cap, salt, and a token info link.'],
-                ] as const
-              ).map(([value, title, body]) => {
-                const selected = value === 'advanced' ? advanced : !advanced && variant === value;
-                return (
-                  <button
-                    key={value}
-                    type="button"
-                    aria-pressed={selected}
-                    onClick={() => {
-                      if (value === 'advanced') {
-                        setAdvanced(true);
-                      } else {
-                        setAdvanced(false);
-                        setVariant(value);
-                      }
-                    }}
-                    className={cn(
-                      'flex flex-col gap-1 rounded-xl border p-4 text-left',
-                      selected ? 'border-base-blue bg-bds-blue-0' : 'border-bds-gray-10 dark:border-white/10',
-                    )}
-                  >
-                    <strong className="text-[13px]">{title}</strong>
-                    <span className="text-[12px] text-bds-gray-60">{body}</span>
-                  </button>
-                );
-              })}
-            </div>
-          </div>
-          {advanced ? (
-            <div className="mt-5">
-              <Text as="span" variant="label" tone="muted" className="mb-2 block">
-                Token variant
-              </Text>
-              <div role="radiogroup" aria-label="Token variant" className="grid gap-3 sm:grid-cols-2">
+            <Field label="Token type">
+              <RadioGroup
+                value={advanced ? 'advanced' : variant}
+                onValueChange={(next) => {
+                  if (next === 'advanced') {
+                    setAdvanced(true);
+                  } else {
+                    setAdvanced(false);
+                    setVariant(next as 'asset' | 'stablecoin');
+                  }
+                }}
+                className="grid-cols-1 sm:grid-cols-3"
+              >
                 {(
                   [
-                    ['asset', 'Asset', 'Configurable decimals and announcements.'],
-                    ['stablecoin', 'Stablecoin', 'Fixed six decimals and a currency code.'],
+                    ['asset', 'Asset', 'Flexible decimals, announcements, and displayed-balance changes.'],
+                    ['stablecoin', 'Stablecoin', 'A currency-linked token: always six decimals and a currency code.'],
+                    ['advanced', 'Advanced', 'Set a supply cap, salt, and a token info link.'],
                   ] as const
                 ).map(([value, title, body]) => (
-                  <button
-                    key={value}
-                    type="button"
-                    role="radio"
-                    aria-checked={variant === value}
-                    onClick={() => setVariant(value)}
-                    className={cn(
-                      'flex flex-col gap-1 rounded-xl border p-4 text-left transition-colors',
-                      variant === value ? 'border-base-blue bg-bds-blue-0' : 'border-bds-gray-10 dark:border-white/10',
-                    )}
-                  >
-                    <strong className="text-[13px]">{title}</strong>
-                    <span className="text-[12px] text-bds-gray-60">{body}</span>
-                  </button>
+                  <Radio.Root key={value} value={value}>
+                    <Text as="span" variant="label.regular">
+                      {title}
+                    </Text>
+                    <Text as="span" variant="footnote" tone="muted">
+                      {body}
+                    </Text>
+                  </Radio.Root>
                 ))}
-              </div>
+              </RadioGroup>
+            </Field>
+          </div>
+          {advanced ? (
+            <div className="mt-5">
+              <Field label="Token variant">
+                <RadioGroup value={variant} onValueChange={setVariant} className="grid-cols-1 sm:grid-cols-2">
+                  {(
+                    [
+                      ['asset', 'Asset', 'Configurable decimals and announcements.'],
+                      ['stablecoin', 'Stablecoin', 'Fixed six decimals and a currency code.'],
+                    ] as const
+                  ).map(([value, title, body]) => (
+                    <Radio.Root key={value} value={value}>
+                      <Text as="span" variant="label.regular">
+                        {title}
+                      </Text>
+                      <Text as="span" variant="footnote" tone="muted">
+                        {body}
+                      </Text>
+                    </Radio.Root>
+                  ))}
+                </RadioGroup>
+              </Field>
             </div>
           ) : null}
           <div className="mt-5 grid gap-4 md:grid-cols-2">
diff --git a/app/vibenet/explorer/address/[addr]/OwnedAccountView.tsx b/app/vibenet/explorer/address/[addr]/OwnedAccountView.tsx
index dbf15432..63813d23 100644
--- a/app/vibenet/explorer/address/[addr]/OwnedAccountView.tsx
+++ b/app/vibenet/explorer/address/[addr]/OwnedAccountView.tsx
@@ -15,6 +15,8 @@ import { useRouter } from 'next/navigation';
 import { Button } from '../../../../components/ui/Button';
 import { Card } from '../../../../components/ui/Card';
 import { cn } from '../../../../components/ui/cn';
+import { Field } from '../../../../components/ui/Field';
+import { Input } from '../../../../components/ui/Input';
 import { Modal } from '../../../../components/ui/Modal';
 import { Select } from '../../../../components/ui/Select';
 import { Spinner } from '../../../../components/ui/Spinner';
@@ -40,9 +42,6 @@ import { AccountShell, useSectionParam, type ShellSection } from './AccountShell
 import { ActivityTable } from './ActivityTable';
 import { AssetsCard } from './AssetsCard';
 
-const INPUT_CLS =
-  'w-full rounded-lg border border-bds-gray-10 bg-background px-3.5 py-2.5 text-[14px] outline-none transition-colors placeholder:text-bds-gray-40 focus:border-foreground dark:border-white/10 dark:bg-white/5 dark:focus:border-white/40';
-
 const SECTIONS: ShellSection[] = [
   { id: 'overview', label: 'Overview' },
   { id: 'owners', label: 'Owners' },
@@ -526,14 +525,13 @@ function SubAccountsSection() {
           </>
         }
       >
-        <label className="flex flex-col gap-2 text-[14px] font-normal">
-          Account name
-          <input
+        <Field.Root>
+          <Field.Label>Account name</Field.Label>
+          <Input
             autoFocus
-            className={INPUT_CLS}
             value={label}
             placeholder="Trading bot, Team vault…"
-            onChange={(event) => setLabel(event.target.value)}
+            onValueChange={setLabel}
             onKeyDown={(event) => {
               if (event.key === 'Enter') {
                 event.preventDefault();
@@ -541,10 +539,10 @@ function SubAccountsSection() {
               }
             }}
           />
-        </label>
-        <Text variant="label.regular" tone="muted">
-          A delegated account with its own address, controlled by this account. It deploys on first use.
-        </Text>
+          <Field.Description>
+            A delegated account with its own address, controlled by this account. It deploys on first use.
+          </Field.Description>
+        </Field.Root>
       </Modal>
     </div>
   );

From 7dfce2532b88da02d42d4446a90442629d122bf4 Mon Sep 17 00:00:00 2001
From: Max Barvian <max@barvian.me>
Date: Thu, 3 Sep 2026 13:14:34 -0700
Subject: [PATCH 4/6] outline instead of ring or border

---
 app/components/ui/Input.tsx                   |  13 +-
 app/components/ui/InputGroup.parts.tsx        |   9 +-
 app/components/ui/Radio.parts.tsx             |  13 +-
 app/components/ui/Select.tsx                  |   9 +-
 app/snapshots/SnapshotsClient.tsx             | 154 ++++++++----------
 app/vibenet/demos/_shared/AccountSwitcher.tsx |   9 +-
 .../account/components/CreateAccountModal.tsx |  25 ++-
 7 files changed, 112 insertions(+), 120 deletions(-)

diff --git a/app/components/ui/Input.tsx b/app/components/ui/Input.tsx
index 948fe79a..f9f368e1 100644
--- a/app/components/ui/Input.tsx
+++ b/app/components/ui/Input.tsx
@@ -9,14 +9,15 @@ import { textVariantClasses } from './Text';
 export type { InputProps };
 
 export const inputClassName = cn(
-  'w-full rounded-lg bg-transparent py-2.5 ps-2.5 pe-2.5 outline-none',
+  'w-full rounded-lg bg-transparent py-2.5 ps-2.5 pe-2.5',
   textVariantClasses['label.regular'],
   'text-bds-gray-100 placeholder:text-bds-gray-40',
-  'ring-1 ring-inset ring-bds-gray-10',
-  'transition-[box-shadow] duration-150 ease motion-reduce:transition-none',
-  'focus:ring-2 focus:ring-bds-gray-100',
-  'aria-invalid:ring-bds-red-40 data-[invalid]:ring-bds-red-40',
-  'focus:aria-invalid:ring-bds-red-40',
+  'outline outline-1 outline-offset-[-1px] outline-bds-gray-10',
+  'transition-[outline-color] duration-150 ease-out motion-reduce:transition-none',
+  'hover:outline-bds-gray-15',
+  'focus:outline-2 focus:outline-foreground',
+  'aria-invalid:outline-bds-red-40 data-[invalid]:outline-bds-red-40',
+  'focus:aria-invalid:outline-bds-red-40',
   'data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50',
 );
 
diff --git a/app/components/ui/InputGroup.parts.tsx b/app/components/ui/InputGroup.parts.tsx
index f912b997..ce44273c 100644
--- a/app/components/ui/InputGroup.parts.tsx
+++ b/app/components/ui/InputGroup.parts.tsx
@@ -21,10 +21,11 @@ export function Root({ role = 'group', disabled, invalid, ...props }: RootProps)
       {...mergeProps(
         {
           className: cn(
-            'flex items-center rounded-lg ring-1 ring-inset ring-bds-gray-10',
-            'transition-[box-shadow] duration-150 ease motion-reduce:transition-none',
-            'has-[input:focus]:ring-2 has-[input:focus]:ring-bds-gray-100',
-            'aria-invalid:ring-bds-red-40 has-[input[data-invalid]]:ring-bds-red-40',
+            'flex items-center rounded-lg outline outline-1 outline-offset-[-1px] outline-bds-gray-10',
+            'transition-[outline-color] duration-150 ease-out motion-reduce:transition-none',
+            'hover:outline-bds-gray-15',
+            'has-[input:focus]:outline-2 has-[input:focus]:outline-foreground',
+            'aria-invalid:outline-bds-red-40 has-[input[data-invalid]]:outline-bds-red-40',
             'aria-disabled:opacity-50',
           ),
         },
diff --git a/app/components/ui/Radio.parts.tsx b/app/components/ui/Radio.parts.tsx
index a451482e..5f4e2b2f 100644
--- a/app/components/ui/Radio.parts.tsx
+++ b/app/components/ui/Radio.parts.tsx
@@ -13,11 +13,14 @@ export function Root(props: ComponentProps<typeof BaseRadio.Root>) {
       {...mergeProps(
         {
           className: cn(
-            'flex min-w-0 w-full cursor-pointer flex-col gap-1 rounded-lg p-3 text-left select-none outline-none',
-            'ring-1 ring-inset ring-bds-gray-10',
-            'data-[checked]:ring-2 data-[checked]:ring-bds-gray-100',
-            'data-[hovered]:ring-bds-gray-20',
-            'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-brand-blue',
+            'flex min-w-0 w-full cursor-pointer flex-col gap-1 rounded-xl px-4 py-3 text-left select-none',
+            'outline outline-1 outline-offset-[-1px] outline-bds-gray-10',
+            'transition-[outline-color] duration-150 ease-out',
+            'data-[checked]:outline-2 data-[checked]:outline-foreground',
+            'data-[unchecked]:data-[hovered]:outline-bds-gray-15',
+            'focus:outline-2 focus:outline-foreground',
+            'focus-visible:outline-2 focus-visible:outline-brand-blue',
+            'data-[checked]:focus-visible:outline-brand-blue',
             'data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50',
           ),
         },
diff --git a/app/components/ui/Select.tsx b/app/components/ui/Select.tsx
index 3ab8bf31..f912c98e 100644
--- a/app/components/ui/Select.tsx
+++ b/app/components/ui/Select.tsx
@@ -57,10 +57,11 @@ export function Select({
       <BaseSelect.Trigger
         aria-label={ariaLabel}
         className={cn(
-          'inline-flex h-10 w-full items-center justify-between gap-2 rounded-lg bg-transparent px-3.5 text-[14px] text-foreground outline-none',
-          'ring-1 ring-inset ring-bds-gray-10',
-          'transition-[box-shadow] duration-150 ease motion-reduce:transition-none',
-          'focus:ring-black/40 data-[popup-open]:ring-black/40 dark:focus:ring-white/40 dark:data-[popup-open]:ring-white/40',
+          'inline-flex h-10 w-full items-center justify-between gap-2 rounded-lg bg-transparent px-3.5 text-[14px] text-foreground',
+          'outline outline-1 outline-offset-[-1px] outline-bds-gray-10',
+          'transition-[outline-color] duration-150 ease-out motion-reduce:transition-none',
+          'hover:outline-bds-gray-15',
+          'focus:outline-black/40 data-[popup-open]:outline-black/40 dark:focus:outline-white/40 dark:data-[popup-open]:outline-white/40',
           'data-[placeholder]:text-bds-gray-40 disabled:cursor-not-allowed disabled:opacity-50',
           className,
         )}
diff --git a/app/snapshots/SnapshotsClient.tsx b/app/snapshots/SnapshotsClient.tsx
index 99de84a4..ae5ac697 100644
--- a/app/snapshots/SnapshotsClient.tsx
+++ b/app/snapshots/SnapshotsClient.tsx
@@ -7,6 +7,8 @@ import { Card } from '../components/ui/Card';
 import { Checkbox } from '../components/ui/Checkbox';
 import { cn } from '../components/ui/cn';
 import { COPY_SQUARES_PATH_40 } from '../components/ui/icons';
+import { Radio } from '../components/ui/Radio';
+import { RadioGroup } from '../components/ui/RadioGroup';
 import { Tabs } from '../components/ui/Tabs';
 import { Text } from '../components/ui/Text';
 
@@ -271,11 +273,6 @@ export function SnapshotsClient({ snapshots }: SnapshotsClientProps) {
     setPreset(match ? match.name : null);
   }
 
-  function handlePresetClick(event: MouseEvent<HTMLButtonElement>) {
-    const value = event.currentTarget.dataset.preset as PresetName | undefined;
-    if (value) selectPreset(value);
-  }
-
   function handleComponentClick(event: MouseEvent<HTMLButtonElement>) {
     const value = event.currentTarget.dataset.name;
     if (value) toggleComponent(value);
@@ -332,36 +329,29 @@ export function SnapshotsClient({ snapshots }: SnapshotsClientProps) {
                 Choose the Base network for your node.
               </Text>
             </div>
-            <div className="grid grid-cols-1 gap-3 lg:grid-cols-3">
-              {snapshots.map((snap) => {
-                const selected = snap.network === activeNetwork;
-                return (
-                  <button
-                    key={snap.network}
-                    type="button"
-                    onClick={() => {
-                      trackSnapshotNetworkSelect(snap.network);
-                      setNetwork(snap.network);
-                    }}
-                    className={cn(
-                      'rounded-xl border border-bds-gray-10 px-4 py-3 text-left transition-[color,box-shadow] duration-150 ease-out',
-                      selected
-                        ? 'border-transparent ring-2 ring-foreground'
-                        : 'hover:border-bds-gray-15',
-                    )}
-                  >
-                    <Text as="span" variant="label.medium" className="block">
-                      {NETWORK_LABELS[snap.network] ?? snap.chainName}
-                    </Text>
-                    <Text as="span" variant="label.regular" tone="muted" className="mt-1 flex flex-wrap items-center gap-1.5">
-                      <span>block {formatNumber(snap.block)}</span>
-                      <span className="text-bds-gray-40">·</span>
-                      <span>{formatDate(snap.date)}</span>
-                    </Text>
-                  </button>
-                );
-              })}
-            </div>
+            <RadioGroup
+              value={activeNetwork}
+              onValueChange={(next) => {
+                if (next == null) return;
+                trackSnapshotNetworkSelect(next);
+                setNetwork(next);
+              }}
+              aria-label="Select Network"
+              className="grid-cols-1 lg:grid-cols-3"
+            >
+              {snapshots.map((snap) => (
+                <Radio.Root key={snap.network} value={snap.network}>
+                  <Text as="span" variant="label.medium" className="block">
+                    {NETWORK_LABELS[snap.network] ?? snap.chainName}
+                  </Text>
+                  <Text as="span" variant="label.regular" tone="muted" className="flex flex-wrap items-center gap-1.5">
+                    <span>block {formatNumber(snap.block)}</span>
+                    <span className="text-bds-gray-40">·</span>
+                    <span>{formatDate(snap.date)}</span>
+                  </Text>
+                </Radio.Root>
+              ))}
+            </RadioGroup>
           </section>
 
           <section className="mt-10">
@@ -390,57 +380,53 @@ export function SnapshotsClient({ snapshots }: SnapshotsClientProps) {
                   animate={{ opacity: 1 }}
                   exit={{ opacity: 0 }}
                   transition={{ duration: 0.15, ease: 'easeOut' }}
-                  className="grid grid-cols-1 gap-3 lg:grid-cols-3"
                 >
-                  {PRESETS.map((p) => {
-                    const size = activeSnapshot.components
-                      .filter((c) => p.components.includes(c.name))
-                      .reduce((sum, c) => sum + c.size, 0);
-                    const selected = preset === p.name;
-                    const includedComponents = displayComponents.filter((c) => {
-                      if (c.name === 'state_history') return p.components.includes('account_changesets');
-                      return p.components.includes(c.name);
-                    });
-                    return (
-                      <button
-                        key={p.name}
-                        type="button"
-                        data-preset={p.name}
-                        onClick={handlePresetClick}
-                        aria-label={p.displayName}
-                        className={cn(
-                          'flex flex-col items-start rounded-xl border px-4 py-3.5 text-left transition-[color,box-shadow] duration-150 ease-out',
-                          selected
-                            ? 'border-transparent ring-2 ring-foreground'
-                            : 'border-bds-gray-10 hover:border-bds-gray-15',
-                        )}
-                      >
-                        <div className="flex w-full items-baseline gap-2">
-                          <Text as="span" variant="label.medium">
-                            {p.displayName}
-                          </Text>
-                          <Text as="span" variant="footnote" tone="muted" className="font-mono">
-                            {formatBytes(size)}
+                  <RadioGroup
+                    value={preset}
+                    onValueChange={(next) => {
+                      if (next == null) return;
+                      selectPreset(next as PresetName);
+                    }}
+                    aria-label="Configure Snapshot"
+                    className="grid-cols-1 lg:grid-cols-3"
+                  >
+                    {PRESETS.map((p) => {
+                      const size = activeSnapshot.components
+                        .filter((c) => p.components.includes(c.name))
+                        .reduce((sum, c) => sum + c.size, 0);
+                      const includedComponents = displayComponents.filter((c) => {
+                        if (c.name === 'state_history') return p.components.includes('account_changesets');
+                        return p.components.includes(c.name);
+                      });
+                      return (
+                        <Radio.Root key={p.name} value={p.name} aria-label={p.displayName} className="items-start py-3.5">
+                          <div className="flex w-full items-baseline gap-2">
+                            <Text as="span" variant="label.medium">
+                              {p.displayName}
+                            </Text>
+                            <Text as="span" variant="footnote" tone="muted" className="font-mono">
+                              {formatBytes(size)}
+                            </Text>
+                          </div>
+                          <Text as="span" variant="label.regular" tone="muted" className="leading-[22px]">
+                            {p.description}
                           </Text>
-                        </div>
-                        <Text as="span" variant="label.regular" tone="muted" className="mt-1 leading-[22px]">
-                          {p.description}
-                        </Text>
-                        <div className="mt-3 flex w-full flex-col gap-1.5 border-t border-bds-gray-10 pt-3">
-                          {includedComponents.map((c) => (
-                            <div key={c.name} className="flex items-center gap-1.5">
-                              <svg width={14} height={14} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" className="shrink-0 text-brand-blue">
-                                <path d="M20 6 9 17l-5-5" />
-                              </svg>
-                              <Text as="span" variant="label.regular">
-                                {c.displayName}
-                              </Text>
-                            </div>
-                          ))}
-                        </div>
-                      </button>
-                    );
-                  })}
+                          <div className="mt-2 flex w-full flex-col gap-1.5 border-t border-bds-gray-10 pt-3">
+                            {includedComponents.map((c) => (
+                              <div key={c.name} className="flex items-center gap-1.5">
+                                <svg width={14} height={14} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" className="shrink-0 text-brand-blue">
+                                  <path d="M20 6 9 17l-5-5" />
+                                </svg>
+                                <Text as="span" variant="label.regular">
+                                  {c.displayName}
+                                </Text>
+                              </div>
+                            ))}
+                          </div>
+                        </Radio.Root>
+                      );
+                    })}
+                  </RadioGroup>
                 </motion.div>
               ) : (
                 <motion.div
diff --git a/app/vibenet/demos/_shared/AccountSwitcher.tsx b/app/vibenet/demos/_shared/AccountSwitcher.tsx
index 2b6cc941..23451994 100644
--- a/app/vibenet/demos/_shared/AccountSwitcher.tsx
+++ b/app/vibenet/demos/_shared/AccountSwitcher.tsx
@@ -124,10 +124,11 @@ export function AccountSwitcher({
     >
       <Popover.Trigger
         className={cn(
-          'group flex h-10 items-center justify-between gap-2 rounded-lg bg-transparent px-2.5 outline-none',
-          'ring-1 ring-inset ring-bds-gray-10',
-          'transition-[box-shadow] duration-150 ease motion-reduce:transition-none',
-          'focus:ring-black/40 data-[popup-open]:ring-black/40 dark:focus:ring-white/40 dark:data-[popup-open]:ring-white/40',
+          'group flex h-10 items-center justify-between gap-2 rounded-lg bg-transparent px-2.5',
+          'outline outline-1 outline-offset-[-1px] outline-bds-gray-10',
+          'transition-[outline-color] duration-150 ease-out motion-reduce:transition-none',
+          'hover:outline-bds-gray-15',
+          'focus:outline-black/40 data-[popup-open]:outline-black/40 dark:focus:outline-white/40 dark:data-[popup-open]:outline-white/40',
           triggerClassName,
         )}
       >
diff --git a/app/vibenet/demos/account/components/CreateAccountModal.tsx b/app/vibenet/demos/account/components/CreateAccountModal.tsx
index f79a58d7..9778fe3a 100644
--- a/app/vibenet/demos/account/components/CreateAccountModal.tsx
+++ b/app/vibenet/demos/account/components/CreateAccountModal.tsx
@@ -424,12 +424,12 @@ function KeyPicker({
                   type="button"
                   onClick={() => onToggle(s)}
                   className={cn(
-                    'flex flex-1 items-center gap-2 rounded-lg px-2 py-2.5 text-left outline-none',
-                    'ring-1 ring-inset ring-bds-gray-10',
-                    'transition-[box-shadow] duration-150 ease motion-reduce:transition-none',
-                    on ? 'ring-2 ring-bds-gray-100' : 'hover:ring-bds-gray-20',
-                    'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-brand-blue',
-                    'focus-visible:transition-none',
+                    'flex flex-1 items-center gap-2 rounded-lg px-2 py-2.5 text-left',
+                    'outline outline-1 outline-offset-[-1px] outline-bds-gray-10',
+                    'transition-[outline-color] duration-150 ease-out motion-reduce:transition-none',
+                    on ? 'outline-2 outline-foreground' : 'hover:outline-bds-gray-15',
+                    'focus:outline-2 focus:outline-foreground',
+                    'focus-visible:outline-2 focus-visible:outline-brand-blue',
                   )}
                 >
                   <Text as="span" variant="label" className="truncate">
@@ -448,12 +448,11 @@ function KeyPicker({
                     aria-label={`Delete key ${s.label}`}
                     title="Delete unused key"
                     className={cn(
-                      'flex w-8 shrink-0 items-center justify-center rounded-lg text-bds-gray-50 outline-none',
-                      'ring-1 ring-inset ring-bds-gray-10',
-                      'transition-[box-shadow,color] duration-150 ease motion-reduce:transition-none',
-                      'hover:text-bds-red-60 hover:ring-bds-red-40',
-                      'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-bds-gray-100',
-                      'focus-visible:transition-none',
+                      'flex w-8 shrink-0 items-center justify-center rounded-lg text-bds-gray-50',
+                      'outline outline-1 outline-offset-[-1px] outline-bds-gray-10',
+                      'transition-[color,outline-color] duration-150 ease-out motion-reduce:transition-none',
+                      'hover:text-bds-red-60 hover:outline-bds-red-40',
+                      'focus-visible:outline-2 focus-visible:outline-bds-gray-100',
                     )}
                   >
                     <TrashIcon size={15} />
@@ -461,7 +460,7 @@ function KeyPicker({
                 ) : inUse ? (
                   <span
                     title="Bound to an account — can't be deleted"
-                    className="flex shrink-0 items-center rounded-lg px-2 text-[11px] text-bds-gray-50 ring-1 ring-inset ring-bds-gray-10"
+                    className="flex shrink-0 items-center rounded-lg px-2 text-[11px] text-bds-gray-50 outline outline-1 outline-offset-[-1px] outline-bds-gray-10"
                   >
                     in use
                   </span>

From 5723284ad8ae88e78e7322e6d63491e19e89ed7a Mon Sep 17 00:00:00 2001
From: Max Barvian <max@barvian.me>
Date: Thu, 3 Sep 2026 13:52:39 -0700
Subject: [PATCH 5/6] inset ring again

---
 app/components/ui/Input.tsx                   | 14 +++++------
 app/components/ui/InputGroup.parts.tsx        | 10 ++++----
 app/components/ui/Radio.parts.tsx             | 14 +++++------
 app/components/ui/Select.tsx                  | 10 ++++----
 app/vibenet/demos/_shared/AccountSwitcher.tsx | 10 ++++----
 .../account/components/CreateAccountModal.tsx | 23 +++++++++----------
 6 files changed, 39 insertions(+), 42 deletions(-)

diff --git a/app/components/ui/Input.tsx b/app/components/ui/Input.tsx
index f9f368e1..a9beb583 100644
--- a/app/components/ui/Input.tsx
+++ b/app/components/ui/Input.tsx
@@ -9,15 +9,15 @@ import { textVariantClasses } from './Text';
 export type { InputProps };
 
 export const inputClassName = cn(
-  'w-full rounded-lg bg-transparent py-2.5 ps-2.5 pe-2.5',
+  'w-full rounded-lg bg-transparent py-2.5 ps-2.5 pe-2.5 outline-none',
   textVariantClasses['label.regular'],
   'text-bds-gray-100 placeholder:text-bds-gray-40',
-  'outline outline-1 outline-offset-[-1px] outline-bds-gray-10',
-  'transition-[outline-color] duration-150 ease-out motion-reduce:transition-none',
-  'hover:outline-bds-gray-15',
-  'focus:outline-2 focus:outline-foreground',
-  'aria-invalid:outline-bds-red-40 data-[invalid]:outline-bds-red-40',
-  'focus:aria-invalid:outline-bds-red-40',
+  'ring-1 ring-inset ring-bds-gray-10',
+  'transition-[box-shadow] duration-150 ease-out motion-reduce:transition-none',
+  'hover:ring-bds-gray-15',
+  'focus:ring-2 focus:ring-foreground',
+  'aria-invalid:ring-bds-red-40 data-[invalid]:ring-bds-red-40',
+  'focus:aria-invalid:ring-bds-red-40',
   'data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50',
 );
 
diff --git a/app/components/ui/InputGroup.parts.tsx b/app/components/ui/InputGroup.parts.tsx
index ce44273c..878138cf 100644
--- a/app/components/ui/InputGroup.parts.tsx
+++ b/app/components/ui/InputGroup.parts.tsx
@@ -21,11 +21,11 @@ export function Root({ role = 'group', disabled, invalid, ...props }: RootProps)
       {...mergeProps(
         {
           className: cn(
-            'flex items-center rounded-lg outline outline-1 outline-offset-[-1px] outline-bds-gray-10',
-            'transition-[outline-color] duration-150 ease-out motion-reduce:transition-none',
-            'hover:outline-bds-gray-15',
-            'has-[input:focus]:outline-2 has-[input:focus]:outline-foreground',
-            'aria-invalid:outline-bds-red-40 has-[input[data-invalid]]:outline-bds-red-40',
+            'flex items-center rounded-lg ring-1 ring-inset ring-bds-gray-10',
+            'transition-[box-shadow] duration-150 ease-out motion-reduce:transition-none',
+            'hover:ring-bds-gray-15',
+            'has-[input:focus]:ring-2 has-[input:focus]:ring-foreground',
+            'aria-invalid:ring-bds-red-40 has-[input[data-invalid]]:ring-bds-red-40',
             'aria-disabled:opacity-50',
           ),
         },
diff --git a/app/components/ui/Radio.parts.tsx b/app/components/ui/Radio.parts.tsx
index 5f4e2b2f..244ad737 100644
--- a/app/components/ui/Radio.parts.tsx
+++ b/app/components/ui/Radio.parts.tsx
@@ -13,14 +13,12 @@ export function Root(props: ComponentProps<typeof BaseRadio.Root>) {
       {...mergeProps(
         {
           className: cn(
-            'flex min-w-0 w-full cursor-pointer flex-col gap-1 rounded-xl px-4 py-3 text-left select-none',
-            'outline outline-1 outline-offset-[-1px] outline-bds-gray-10',
-            'transition-[outline-color] duration-150 ease-out',
-            'data-[checked]:outline-2 data-[checked]:outline-foreground',
-            'data-[unchecked]:data-[hovered]:outline-bds-gray-15',
-            'focus:outline-2 focus:outline-foreground',
-            'focus-visible:outline-2 focus-visible:outline-brand-blue',
-            'data-[checked]:focus-visible:outline-brand-blue',
+            'flex min-w-0 w-full cursor-pointer flex-col gap-1 rounded-xl px-4 py-3 text-left select-none outline-none',
+            'ring-1 ring-inset ring-bds-gray-10',
+            'transition-[box-shadow] duration-150 ease-out motion-reduce:transition-none',
+            'data-[checked]:ring-2 data-[checked]:ring-foreground',
+            'data-[unchecked]:data-[hovered]:ring-bds-gray-15',
+            'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-brand-blue',
             'data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50',
           ),
         },
diff --git a/app/components/ui/Select.tsx b/app/components/ui/Select.tsx
index f912c98e..1eab96c3 100644
--- a/app/components/ui/Select.tsx
+++ b/app/components/ui/Select.tsx
@@ -57,11 +57,11 @@ export function Select({
       <BaseSelect.Trigger
         aria-label={ariaLabel}
         className={cn(
-          'inline-flex h-10 w-full items-center justify-between gap-2 rounded-lg bg-transparent px-3.5 text-[14px] text-foreground',
-          'outline outline-1 outline-offset-[-1px] outline-bds-gray-10',
-          'transition-[outline-color] duration-150 ease-out motion-reduce:transition-none',
-          'hover:outline-bds-gray-15',
-          'focus:outline-black/40 data-[popup-open]:outline-black/40 dark:focus:outline-white/40 dark:data-[popup-open]:outline-white/40',
+          'inline-flex h-10 w-full items-center justify-between gap-2 rounded-lg bg-transparent px-3.5 text-[14px] text-foreground outline-none',
+          'ring-1 ring-inset ring-bds-gray-10',
+          'transition-[box-shadow] duration-150 ease-out motion-reduce:transition-none',
+          'hover:ring-bds-gray-15',
+          'focus:ring-black/40 data-[popup-open]:ring-black/40 dark:focus:ring-white/40 dark:data-[popup-open]:ring-white/40',
           'data-[placeholder]:text-bds-gray-40 disabled:cursor-not-allowed disabled:opacity-50',
           className,
         )}
diff --git a/app/vibenet/demos/_shared/AccountSwitcher.tsx b/app/vibenet/demos/_shared/AccountSwitcher.tsx
index 23451994..498f37b4 100644
--- a/app/vibenet/demos/_shared/AccountSwitcher.tsx
+++ b/app/vibenet/demos/_shared/AccountSwitcher.tsx
@@ -124,11 +124,11 @@ export function AccountSwitcher({
     >
       <Popover.Trigger
         className={cn(
-          'group flex h-10 items-center justify-between gap-2 rounded-lg bg-transparent px-2.5',
-          'outline outline-1 outline-offset-[-1px] outline-bds-gray-10',
-          'transition-[outline-color] duration-150 ease-out motion-reduce:transition-none',
-          'hover:outline-bds-gray-15',
-          'focus:outline-black/40 data-[popup-open]:outline-black/40 dark:focus:outline-white/40 dark:data-[popup-open]:outline-white/40',
+          'group flex h-10 items-center justify-between gap-2 rounded-lg bg-transparent px-2.5 outline-none',
+          'ring-1 ring-inset ring-bds-gray-10',
+          'transition-[box-shadow] duration-150 ease-out motion-reduce:transition-none',
+          'hover:ring-bds-gray-15',
+          'focus:ring-black/40 data-[popup-open]:ring-black/40 dark:focus:ring-white/40 dark:data-[popup-open]:ring-white/40',
           triggerClassName,
         )}
       >
diff --git a/app/vibenet/demos/account/components/CreateAccountModal.tsx b/app/vibenet/demos/account/components/CreateAccountModal.tsx
index 9778fe3a..37979974 100644
--- a/app/vibenet/demos/account/components/CreateAccountModal.tsx
+++ b/app/vibenet/demos/account/components/CreateAccountModal.tsx
@@ -424,12 +424,11 @@ function KeyPicker({
                   type="button"
                   onClick={() => onToggle(s)}
                   className={cn(
-                    'flex flex-1 items-center gap-2 rounded-lg px-2 py-2.5 text-left',
-                    'outline outline-1 outline-offset-[-1px] outline-bds-gray-10',
-                    'transition-[outline-color] duration-150 ease-out motion-reduce:transition-none',
-                    on ? 'outline-2 outline-foreground' : 'hover:outline-bds-gray-15',
-                    'focus:outline-2 focus:outline-foreground',
-                    'focus-visible:outline-2 focus-visible:outline-brand-blue',
+                    'flex flex-1 items-center gap-2 rounded-lg px-2 py-2.5 text-left outline-none',
+                    'ring-1 ring-inset ring-bds-gray-10',
+                    'transition-[box-shadow] duration-150 ease-out motion-reduce:transition-none',
+                    on ? 'ring-2 ring-foreground' : 'hover:ring-bds-gray-15',
+                    'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-brand-blue',
                   )}
                 >
                   <Text as="span" variant="label" className="truncate">
@@ -448,11 +447,11 @@ function KeyPicker({
                     aria-label={`Delete key ${s.label}`}
                     title="Delete unused key"
                     className={cn(
-                      'flex w-8 shrink-0 items-center justify-center rounded-lg text-bds-gray-50',
-                      'outline outline-1 outline-offset-[-1px] outline-bds-gray-10',
-                      'transition-[color,outline-color] duration-150 ease-out motion-reduce:transition-none',
-                      'hover:text-bds-red-60 hover:outline-bds-red-40',
-                      'focus-visible:outline-2 focus-visible:outline-bds-gray-100',
+                      'flex w-8 shrink-0 items-center justify-center rounded-lg text-bds-gray-50 outline-none',
+                      'ring-1 ring-inset ring-bds-gray-10',
+                      'transition-[color,box-shadow] duration-150 ease-out motion-reduce:transition-none',
+                      'hover:text-bds-red-60 hover:ring-bds-red-40',
+                      'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-bds-gray-100',
                     )}
                   >
                     <TrashIcon size={15} />
@@ -460,7 +459,7 @@ function KeyPicker({
                 ) : inUse ? (
                   <span
                     title="Bound to an account — can't be deleted"
-                    className="flex shrink-0 items-center rounded-lg px-2 text-[11px] text-bds-gray-50 outline outline-1 outline-offset-[-1px] outline-bds-gray-10"
+                    className="flex shrink-0 items-center rounded-lg px-2 text-[11px] text-bds-gray-50 ring-1 ring-inset ring-bds-gray-10"
                   >
                     in use
                   </span>

From b1dc9f70fa499503c85511a1b79303441190630c Mon Sep 17 00:00:00 2001
From: Max Barvian <max@barvian.me>
Date: Thu, 3 Sep 2026 14:01:19 -0700
Subject: [PATCH 6/6] focus-visible outline on select

---
 app/components/ui/Select.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/components/ui/Select.tsx b/app/components/ui/Select.tsx
index 1eab96c3..6a7c20dc 100644
--- a/app/components/ui/Select.tsx
+++ b/app/components/ui/Select.tsx
@@ -62,6 +62,7 @@ export function Select({
           'transition-[box-shadow] duration-150 ease-out motion-reduce:transition-none',
           'hover:ring-bds-gray-15',
           'focus:ring-black/40 data-[popup-open]:ring-black/40 dark:focus:ring-white/40 dark:data-[popup-open]:ring-white/40',
+          'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-brand-blue',
           'data-[placeholder]:text-bds-gray-40 disabled:cursor-not-allowed disabled:opacity-50',
           className,
         )}