@tempoxyz/ds 0.2.5 → 0.3.0

package/src/mobile/components/Toggle.tsx

@@ -1,7 +1,7 @@
-import * as Haptics from 'expo-haptics'
 import type { ComponentPropsWithRef } from 'react'
 import { Pressable, View } from 'react-native'
 import type * as zyzz from 'zyzz'
+import * as Haptics from '../Haptics.js'
 import { variables as core } from '../primitives.js'
 import { style, variants } from '../zyzz.config.js'
 
@@ -33,7 +33,7 @@ export function Toggle(props: Toggle.Props) {
       {...pressableProps}
       disabled={disabled}
       onPress={(event) => {
-        void Haptics.selectionAsync()
+        Haptics.select()
         props.onPress?.(event)
         onValueChange?.(value !== true)
       }}

package/src/mobile/index.ts

@@ -2,6 +2,7 @@ export { Avatar } from './components/Avatar.js'
 export { Badge } from './components/Badge.js'
 export { Button } from './components/Button.js'
 export { CodeInput } from './components/CodeInput.js'
+export * as Haptics from './Haptics.js'
 export { IconButton } from './components/IconButton.js'
 export { Skeleton } from './components/Skeleton.js'
 export { Spinner } from './components/Spinner.js'
@@ -9,5 +10,6 @@ export { TextButton } from './components/TextButton.js'
 export { TextInput } from './components/TextInput.js'
 export { Toast } from './components/Toast.js'
 export { Toggle } from './components/Toggle.js'
+export { useColor } from './useColor.js'
 export { inverse, variables } from './vars.js'
 export { Provider, style, variants, vars } from './zyzz.config.js'

package/src/mobile/useColor.ts

@@ -0,0 +1,31 @@
+/** Resolves a compiled style's color for native props that take a color instead of a style. @module */
+import type { ColorValue } from 'react-native'
+import { useStyles } from 'zyzz/react-native'
+
+/**
+ * Returns the `color` of a compiled style, resolved against the nearest `Provider`. Use it for
+ * props that take a color value instead of a style, such as SVG and icon fills, `ActivityIndicator`
+ * and `RefreshControl` tints, and `TextInput` placeholder colors.
+ *
+ * On iOS, a `system` color scheme resolves to a dynamic color object that switches with the device
+ * appearance, so pass the value through rather than reading it as a string.
+ *
+ * @throws {Error} If the style sets no `color`.
+ *
+ * @example
+ * namespace styles {
+ *   export const icon = style({ color: 'content.secondary' })
+ * }
+ *
+ * function CopyIcon() {
+ *   return <Copy color={useColor(styles.icon().style)} />
+ * }
+ */
+export function useColor(
+  style: Readonly<Record<string, string | number | undefined>> | undefined,
+): ColorValue {
+  const color: unknown = useStyles().style(style).color
+  if (typeof color === 'string') return color
+  if (color && typeof color === 'object') return color as ColorValue
+  throw new Error('Expected a compiled style with a color')
+}

package/src/oxlint/rules/PreferComponent.ts

@@ -21,17 +21,17 @@ const inputs: Record<string, string> = {
   button: 'Button',
   checkbox: 'Checkbox',
   date: 'DatePicker',
-  email: 'Input',
+  email: 'TextInput',
   number: 'NumberField',
-  password: 'Input',
+  password: 'TextInput',
   radio: 'RadioGroup',
   range: 'Slider',
   reset: 'Button',
-  search: 'Input',
+  search: 'TextInput',
   submit: 'Button',
-  tel: 'Input',
-  text: 'Input',
-  url: 'Input',
+  tel: 'TextInput',
+  text: 'TextInput',
+  url: 'TextInput',
 }
 
 /**

package/src/web/README.md

@@ -1,17 +1,17 @@
 # Web
 
-Use `@tempoxyz/ds` with a Zyzz plugin for product interfaces. Web variables start from a copy of [Zyzz's default variables](https://zyzz.style/vars), and typography sets, with Inter as the sans face.
+Use `@tempoxyz/ds` with a Zyzz plugin for product interfaces. Web variables pair a scale of raw colors and sizes with tokens named for their role.
 
 ```tsx
 import { style } from '@tempoxyz/ds'
 
 namespace styles {
   export const panel = style({
-    backgroundColor: 'background.surface',
-    borderRadius: '8',
-    color: 'foreground',
+    backgroundColor: 'background.elevated',
+    borderRadius: 'xs',
+    color: 'content.primary',
     padding: '24',
-    typography: 'copy.14',
+    typography: 'body.b2',
   })
 }
 
@@ -35,9 +35,9 @@ export default defineConfig({
 
 ## Variables
 
-Tokens use Zyzz's default names, such as `foreground`, `background.primary`, `gray.400`, and typography sets such as `heading.32` and `copy.14`. Size scales name each step by its size in pixels, so spacing `'24'` is `1.5rem` and radius `'8'` is `0.5rem`. Shadow keys name the largest blur radius, such as `'6'`. Weight, tracking, and leading come from the typography sets. Light and dark values follow the inherited `color-scheme`. [`vars.ts`](./vars.ts) lists every value.
+The scales hold the `neutral` and `accent` colors, such as `neutral.shade.040` and `accent.blue.background`, and the `spacing` steps, so spacing `'24'` is `1.5rem`. Tokens named for their role derive from them, such as `content.primary`, `container.regular`, `line.primary`, `radius.xs`, and `borderWidth.thin`. Light and dark values follow the inherited `color-scheme`. [`vars.ts`](./vars.ts) lists every value.
 
-Typography sets keep Zyzz's sizes, weights, and line heights, set in Inter with tracking from Inter's dynamic metrics. Mono sets keep Geist Mono. The plugin emits the bundled Inter and Geist Mono faces.
+Typography sets bundle a family, size, weight, tracking, and leading, such as `body.b2`, `heading.h1`, and `mono.m1`. The plugin emits the bundled Inter, Pilat, and JetBrains Mono faces, so only the HB Set display face falls back, to Pilat.
 
 An app that needs tokens of its own extends `variables` in its own Zyzz config, and applies that config's `vars()` class beside the library's.
 

package/src/web/components/Accordion.tsx

@@ -133,7 +133,7 @@ export namespace Accordion {
 
 namespace styles {
   export const content = style(
-    { color: 'gray.900', paddingBottom: '16', typography: 'copy.14' },
+    { color: 'content.secondary', paddingBottom: '16', typography: 'body.b2' },
     { id: 'tds/web/accordion/content' },
   )
 
@@ -157,7 +157,7 @@ namespace styles {
     {
       base: {
         borderBottom: '1px solid !custom',
-        borderColor: 'grayAlpha.200',
+        borderColor: 'line.secondary',
       },
     },
     { id: 'tds/web/accordion/item' },
@@ -197,7 +197,7 @@ namespace styles {
               '& [data-accordion-trigger]': {
                 minHeight: '56',
                 paddingBlock: '12',
-                typography: 'button.16',
+                typography: 'body.b1Strong',
               },
             },
           },
@@ -207,7 +207,7 @@ namespace styles {
               '& [data-accordion-trigger]': {
                 minHeight: '32',
                 paddingBlock: '4',
-                typography: 'button.12',
+                typography: 'body.b3Strong',
               },
             },
           },
@@ -223,9 +223,9 @@ namespace styles {
         alignItems: 'center',
         backgroundColor: 'transparent !custom',
         border: 'none !custom',
-        borderRadius: '8',
+        borderRadius: '2xs',
         boxSizing: 'border-box',
-        color: 'foreground',
+        color: 'content.primary',
         columnGap: '16',
         cursor: 'pointer',
         display: 'flex',
@@ -242,10 +242,10 @@ namespace styles {
         transitionProperty: 'opacity, outline-color, outline-offset',
         transitionTimingFunction: 'snappy',
         // Weight overrides the typography token, so it stays after it.
-        typography: 'button.14',
+        typography: 'body.b2Strong',
         width: '100% !custom',
         selectors: {
-          '&:focus-visible': { outlineColor: 'blue.700', outlineOffset: '2' },
+          '&:focus-visible': { outlineColor: 'border.focus', outlineOffset: '2' },
           '&[data-disabled]': { cursor: 'default', opacity: 'disabled' },
         },
         '@media (prefers-reduced-motion: reduce)': { transitionProperty: 'opacity, outline-color' },

package/src/web/components/AgentLogo.tsx

@@ -0,0 +1,330 @@
+import { type ComponentPropsWithRef, type ReactNode, useId } from 'react'
+import type * as zyzz from 'zyzz'
+import { variants } from '../zyzz.config.js'
+
+// The Agent Logo marks from the TDPS page of Web-Wallet, with each clip and gradient ID suffixed
+// per instance. A brand tile fills with the agent's color and draws its white mark in
+// `currentColor`. An outlined tile draws the mark in its own colors, or in `currentColor` for a
+// black mark.
+const agents = {
+  amp: {
+    frame: 'outlined',
+    mark: (id) => (
+      <>
+        <g clipPath={`url(#clip0_670_2873-${id})`}>
+          <path
+            d="M9.42887 14.4874L7.51824 14.9999L6.20762 10.1105L2.62137 13.6968L1.21449 12.2899L4.78824 8.71554L-0.0673828 7.41429L0.445117 5.50366L7.50387 7.42866L9.42887 14.4874Z"
+            fill="#F34E3F"
+          />
+          <path
+            d="M12.1909 11.7262L10.2803 12.2387L8.67781 6.25556L2.69531 4.65306L3.20719 2.74243L10.2666 4.66681L12.1916 11.7262H12.1909Z"
+            fill="#F34E3F"
+          />
+          <path
+            d="M14.9331 8.98375L13.0225 9.49625L11.4194 3.51375L5.4375 1.91062L5.95 0L13.0094 1.925L14.9331 8.98375Z"
+            fill="#F34E3F"
+          />
+        </g>
+        <defs>
+          <clipPath id={`clip0_670_2873-${id}`}>
+            <rect fill="white" height="15" width="15" />
+          </clipPath>
+        </defs>
+      </>
+    ),
+    viewBox: '0 0 15 15',
+  },
+  claude: {
+    frame: 'brand',
+    mark: () => (
+      <path
+        d="M3.45602 8.92288L5.75096 7.6361L5.78936 7.52395L5.75096 7.46197H5.63872L5.25476 7.43836L3.94336 7.40294L2.80623 7.35572L1.70455 7.29669L1.42691 7.23767L1.16699 6.89531L1.19357 6.72413L1.42691 6.56771L1.76066 6.59722L2.49906 6.6474L3.60665 6.72413L4.41003 6.77135L5.60033 6.89531H5.78936L5.81594 6.81857L5.75096 6.77135L5.70075 6.72413L4.55476 5.94793L3.31425 5.12745L2.66446 4.65524L2.31298 4.41618L2.13577 4.19188L2.05898 3.70195L2.37796 3.35074L2.80623 3.38026L2.91552 3.40977L3.34969 3.74327L4.27712 4.46045L5.48809 5.35176L5.6653 5.49932L5.73619 5.44915L5.74505 5.41373L5.6653 5.28092L5.00665 4.09153L4.3037 2.88148L3.99062 2.37975L3.90792 2.07871C3.87838 1.95476 3.85771 1.85146 3.85771 1.72455L4.221 1.23168L4.42184 1.16675L4.90623 1.23168L5.11003 1.40876L5.4113 2.09642L5.89864 3.17957L6.65476 4.65229L6.87628 5.08909L6.99442 5.49342L7.03872 5.61738H7.11552V5.54654L7.17754 4.71722L7.29273 3.699L7.40497 2.3886L7.44336 2.01969L7.62649 1.57699L7.98978 1.33793L8.27332 1.47369L8.50666 1.80719L8.47417 2.02264L8.33535 2.9228L8.06362 4.33354L7.8864 5.27797H7.98978L8.10792 5.15992L8.5864 4.52538L9.38978 3.52192L9.74421 3.12349L10.1577 2.68374L10.4235 2.47419H10.9256L11.2948 3.02314L11.1294 3.5898L10.6126 4.245L10.1843 4.79985L9.56995 5.62623L9.18598 6.28733L9.22142 6.34046L9.31298 6.3316L10.7012 6.03647L11.4514 5.90071L12.3463 5.74724L12.751 5.93612L12.7953 6.12796L12.6358 6.52049L11.6788 6.7566L10.5564 6.9809L8.88471 7.37638L8.86404 7.39113L8.88767 7.42065L9.64083 7.49148L9.96277 7.50919H10.7514L12.2193 7.61839L12.6033 7.8722L12.8337 8.1821L12.7953 8.4182L12.2045 8.71924L11.4071 8.53035L9.54632 8.08765L8.90834 7.92828H8.81974V7.9814L9.35138 8.50084L10.3261 9.38034L11.5459 10.5137L11.6079 10.794L11.4514 11.0154L11.286 10.9918L10.2138 10.1861L9.80033 9.82304L8.86404 9.03503H8.80201V9.11767L9.01763 9.43347L10.1577 11.1452L10.2168 11.6706L10.1341 11.8418L9.83872 11.9451L9.51383 11.886L8.84632 10.9505L8.15813 9.89683L7.60286 8.9524L7.53493 8.99076L7.20708 12.5176L7.05349 12.6977L6.69906 12.8334L6.4037 12.6091L6.24716 12.2461L6.4037 11.5289L6.59273 10.5933L6.74632 9.84961L6.88514 8.92584L6.96784 8.6189L6.96193 8.59824L6.894 8.60709L6.19695 9.56333L5.13661 10.9947L4.29779 11.8919L4.09695 11.9716L3.74843 11.7916L3.78092 11.4699L3.97585 11.1836L5.13661 9.70794L5.83661 8.79302L6.28851 8.26473L6.28556 8.188H6.25898L3.17543 10.189L2.62606 10.2598L2.38978 10.0385L2.41931 9.67548L2.53155 9.55742L3.45898 8.91993L3.45602 8.92288Z"
+        fill="currentColor"
+      />
+    ),
+    viewBox: '0 0 14 14',
+  },
+  cli: {
+    frame: 'brand',
+    mark: () => (
+      <>
+        <path
+          d="M2.1875 2.77083C2.1875 2.44867 2.44867 2.1875 2.77083 2.1875H11.2292C11.5513 2.1875 11.8125 2.44867 11.8125 2.77083V11.2292C11.8125 11.5513 11.5513 11.8125 11.2292 11.8125H2.77083C2.44867 11.8125 2.1875 11.5513 2.1875 11.2292V2.77083Z"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="0.875"
+        />
+        <path
+          d="M4.22949 4.52075L5.25033 5.54159L4.22949 6.56242"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="0.875"
+        />
+      </>
+    ),
+    viewBox: '0 0 14 14',
+  },
+  codex: {
+    frame: 'codex',
+    mark: (id) => (
+      <>
+        <path
+          d="M7.17552 2.64735C7.74755 2.412 8.3703 2.32697 8.98448 2.40035C9.77615 2.49139 10.4815 2.82785 11.1006 3.40973C11.1085 3.41764 11.1196 3.42319 11.1299 3.42635C11.1411 3.4291 11.1528 3.4291 11.1639 3.42635C11.9688 3.21851 12.8207 3.29542 13.5754 3.64406L13.6126 3.66148L13.7044 3.7066C14.4943 4.10696 15.1104 4.78249 15.4366 5.60581C15.602 6.00956 15.6844 6.42994 15.6859 6.86852C15.6978 7.1947 15.6621 7.52087 15.5799 7.83673C15.5758 7.85267 15.5759 7.86939 15.58 7.88531C15.5842 7.90123 15.5923 7.91584 15.6036 7.92777C16.0739 8.40831 16.3858 8.98069 16.5401 9.64569C16.7689 10.7738 16.5346 11.7911 15.8379 12.6968L15.7303 12.8282C15.2689 13.3563 14.6633 13.7383 13.9878 13.927C13.9732 13.9313 13.9597 13.939 13.9486 13.9495C13.9374 13.9599 13.9289 13.9728 13.9237 13.9872C13.7725 14.4234 13.6205 14.7971 13.3379 15.1699C12.6254 16.1096 11.5788 16.6314 10.4 16.625C9.46027 16.6203 8.62744 16.2767 7.90069 15.5943C7.88975 15.584 7.87629 15.5769 7.86169 15.5735C7.84709 15.5702 7.83186 15.5708 7.81756 15.5753C7.5104 15.6742 7.20006 15.6885 6.8644 15.6845C6.32976 15.6802 5.80314 15.5541 5.3246 15.3156C4.82334 15.0672 4.38692 14.7053 4.05002 14.2587C3.92969 14.0988 3.81015 13.9484 3.72227 13.7703C3.60231 13.5258 3.50428 13.2712 3.42935 13.0095C3.27118 12.4138 3.26737 11.7877 3.41827 11.1902C3.42323 11.176 3.42486 11.1608 3.42302 11.1459C3.42031 11.1312 3.41279 11.1178 3.40165 11.1079C3.03595 10.7377 2.75644 10.2914 2.58306 9.80085C2.46776 9.49866 2.4007 9.18021 2.38435 8.85719C2.35559 8.43173 2.39325 8.00439 2.49598 7.59052C2.76277 6.71019 3.2734 6.01906 4.02627 5.51794C4.1941 5.40631 4.35323 5.31923 4.50206 5.25669C4.67227 5.18623 4.84248 5.12685 5.01348 5.07698C5.0257 5.07319 5.03679 5.06643 5.04577 5.05732C5.05475 5.0482 5.06133 5.037 5.06494 5.02473C5.19478 4.55847 5.41807 4.12348 5.72123 3.74619C6.10339 3.2609 6.6043 2.88243 7.17552 2.64735ZM9.9321 11.0113C9.80345 11.0185 9.68244 11.0747 9.59391 11.1684C9.50539 11.262 9.45606 11.386 9.45606 11.5148C9.45606 11.6437 9.50539 11.7676 9.59391 11.8613C9.68244 11.9549 9.80345 12.0111 9.9321 12.0183H12.8106C12.8791 12.0222 12.9477 12.012 13.0121 11.9884C13.0765 11.9648 13.1355 11.9284 13.1853 11.8812C13.2352 11.8341 13.2749 11.7773 13.302 11.7143C13.3291 11.6513 13.3431 11.5834 13.3431 11.5148C13.3431 11.4462 13.3291 11.3783 13.302 11.3153C13.2749 11.2523 13.2352 11.1955 13.1853 11.1484C13.1355 11.1012 13.0765 11.0648 13.0121 11.0412C12.9477 11.0176 12.8791 11.0075 12.8106 11.0113H9.9321ZM6.69894 7.3071C6.63043 7.19552 6.5212 7.11495 6.39436 7.08245C6.26752 7.04995 6.13301 7.06806 6.01928 7.13294C5.90555 7.19783 5.82152 7.30441 5.78495 7.43014C5.74839 7.55586 5.76216 7.69089 5.82335 7.80664L6.83035 9.56731L5.8281 11.2583C5.79437 11.3152 5.77217 11.3782 5.76279 11.4437C5.7534 11.5092 5.75701 11.5759 5.7734 11.64C5.7898 11.7041 5.81865 11.7644 5.85833 11.8173C5.89801 11.8703 5.94773 11.9149 6.00465 11.9486C6.06157 11.9824 6.12457 12.0046 6.19007 12.014C6.25557 12.0233 6.32227 12.0197 6.38637 12.0033C6.45048 11.987 6.51073 11.9581 6.56368 11.9184C6.61663 11.8787 6.66124 11.829 6.69498 11.7721L7.84606 9.82856C7.89145 9.75199 7.91572 9.66476 7.91642 9.57576C7.91711 9.48676 7.8942 9.39916 7.85002 9.32189L6.69894 7.3071Z"
+          fill={`url(#paint0_linear_670_2842-${id})`}
+        />
+        <defs>
+          <linearGradient
+            gradientUnits="userSpaceOnUse"
+            id={`paint0_linear_670_2842-${id}`}
+            x1="9.49985"
+            x2="9.49985"
+            y1="2.37502"
+            y2="16.625"
+          >
+            <stop stopColor="#B1A7FF" />
+            <stop offset="0.5" stopColor="#7A9DFF" />
+            <stop offset="1" stopColor="#3941FF" />
+          </linearGradient>
+        </defs>
+      </>
+    ),
+    viewBox: '0 0 19 19',
+  },
+  cursor: {
+    frame: 'brand',
+    mark: () => (
+      <path
+        d="M12.16 3.77448L7.25599 0.943203C7.09852 0.852266 6.90421 0.852266 6.74674 0.943203L1.84301 3.77448C1.71064 3.85091 1.62891 3.99225 1.62891 4.14536V9.85465C1.62891 10.0075 1.71064 10.1491 1.84301 10.2255L6.74697 13.0568C6.90445 13.1477 7.09876 13.1477 7.25623 13.0568L12.1602 10.2255C12.2926 10.1491 12.3743 10.0077 12.3743 9.85465V4.14536C12.3743 3.99249 12.2926 3.85091 12.1602 3.77448H12.16ZM11.8519 4.3742L7.11786 12.5738C7.08586 12.6291 7.00138 12.6065 7.00138 12.5425V7.17347C7.00138 7.06619 6.94404 6.96695 6.85103 6.91308L2.20147 4.2287C2.14622 4.19671 2.16878 4.1122 2.23278 4.1122H11.7009C11.8354 4.1122 11.9194 4.25794 11.8521 4.37444H11.8519V4.3742Z"
+        fill="currentColor"
+      />
+    ),
+    viewBox: '0 0 14 14',
+  },
+  gemini: {
+    frame: 'outlined',
+    mark: (id) => {
+      const d =
+        'M12.8851 6.77177C11.8469 6.32977 10.9028 5.6931 10.1039 4.89614C8.99131 3.78135 8.19757 2.38895 7.80514 0.863643C7.78792 0.795897 7.74861 0.735822 7.69343 0.692913C7.63825 0.650005 7.57035 0.626709 7.50045 0.626709C7.43055 0.626709 7.36264 0.650005 7.30746 0.692913C7.25228 0.735822 7.21298 0.795897 7.19576 0.863643C6.80249 2.38876 6.00862 3.78099 4.89639 4.89614C4.09741 5.69301 3.15335 6.32966 2.11514 6.77177C1.70889 6.94677 1.29139 7.08739 0.863886 7.19552C0.795725 7.21227 0.735148 7.25138 0.691842 7.30662C0.648535 7.36186 0.625 7.43002 0.625 7.50021C0.625 7.57039 0.648535 7.63856 0.691842 7.69379C0.735148 7.74903 0.795725 7.78815 0.863886 7.80489C1.29139 7.91239 1.70764 8.05302 2.11514 8.22802C3.15341 8.67002 4.09749 9.30668 4.89639 10.1036C6.00926 11.2186 6.80322 12.6112 7.19576 14.1368C7.21251 14.2049 7.25163 14.2655 7.30686 14.3088C7.3621 14.3521 7.43026 14.3757 7.50045 14.3757C7.57064 14.3757 7.6388 14.3521 7.69403 14.3088C7.74927 14.2655 7.78839 14.2049 7.80514 14.1368C7.91264 13.7086 8.05326 13.2924 8.22826 12.8849C8.67024 11.8466 9.3069 10.9025 10.1039 10.1036C11.2189 8.99102 12.6115 8.19728 14.137 7.80489C14.2048 7.78767 14.2648 7.74837 14.3077 7.69319C14.3506 7.63801 14.3739 7.5701 14.3739 7.50021C14.3739 7.43031 14.3506 7.3624 14.3077 7.30722C14.2648 7.25204 14.2048 7.21274 14.137 7.19552C13.7091 7.08786 13.2905 6.94616 12.8851 6.77177Z'
+
+      return (
+        <>
+          <path d={d} fill="#3186FF" />
+          <path d={d} fill={`url(#paint0_linear_670_2851-${id})`} />
+          <path d={d} fill={`url(#paint1_linear_670_2851-${id})`} />
+          <path d={d} fill={`url(#paint2_linear_670_2851-${id})`} />
+          <defs>
+            <linearGradient
+              gradientUnits="userSpaceOnUse"
+              id={`paint0_linear_670_2851-${id}`}
+              x1="4.37514"
+              x2="6.87514"
+              y1="9.68739"
+              y2="7.49989"
+            >
+              <stop stopColor="#08B962" />
+              <stop offset="1" stopColor="#08B962" stopOpacity="0" />
+            </linearGradient>
+            <linearGradient
+              gradientUnits="userSpaceOnUse"
+              id={`paint1_linear_670_2851-${id}`}
+              x1="5.00014"
+              x2="7.18764"
+              y1="3.43739"
+              y2="6.87489"
+            >
+              <stop stopColor="#F94543" />
+              <stop offset="1" stopColor="#F94543" stopOpacity="0" />
+            </linearGradient>
+            <linearGradient
+              gradientUnits="userSpaceOnUse"
+              id={`paint2_linear_670_2851-${id}`}
+              x1="2.18764"
+              x2="10.9376"
+              y1="8.43739"
+              y2="7.49989"
+            >
+              <stop stopColor="#FABC12" />
+              <stop offset="0.46" stopColor="#FABC12" stopOpacity="0" />
+            </linearGradient>
+          </defs>
+        </>
+      )
+    },
+    viewBox: '0 0 15 15',
+  },
+  muse: {
+    frame: 'brand',
+    mark: () => (
+      <path
+        clipRule="evenodd"
+        d="M12.3962 7.00008C8.64905 7.00008 7.00033 8.64881 7.00033 12.3959C7.00033 8.64881 5.3516 7.00008 1.60449 7.00008C5.3516 7.00008 7.00033 5.35135 7.00033 1.60425C7.00033 5.35135 8.64905 7.00008 12.3962 7.00008Z"
+        fillRule="evenodd"
+        stroke="currentColor"
+        strokeLinejoin="round"
+        strokeWidth="0.875"
+      />
+    ),
+    viewBox: '0 0 14 14',
+  },
+  opencode: {
+    frame: 'outlined',
+    // Figma draws the mark black, which would vanish on the dark elevated tile.
+    mark: () => (
+      <path
+        clipRule="evenodd"
+        d="M10 3.75H5V11.25H10V3.75ZM12.5 13.75H2.5V1.25H12.5V13.75Z"
+        fill="currentColor"
+        fillRule="evenodd"
+      />
+    ),
+    viewBox: '0 0 15 15',
+  },
+} satisfies Record<
+  string,
+  { frame: 'brand' | 'codex' | 'outlined'; mark: (id: string) => ReactNode; viewBox: string }
+>
+
+/**
+ * The logo of an AI agent that works with a wallet, such as Claude or Codex: its mark on a 24 or
+ * 28px rounded tile, rendered as a `span`. It is hidden from assistive technology unless it has an
+ * `aria-label` or `aria-labelledby`.
+ *
+ * - Show the agent's name beside the logo, since many people know agents by name alone.
+ * - Use the 24px size in rows and the 28px size where the agent leads a section.
+ * - Use `Avatar` for a person and `TokenLogo` for a token.
+ *
+ * @example
+ * <AgentLogo agent="claude" />
+ * <AgentLogo agent="codex" aria-label="Codex" size="28" />
+ *
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/img_role | MDN img role}
+ * @see {@link https://www.w3.org/WAI/WCAG22/Understanding/non-text-content.html | WCAG 2.2 Non-text Content}
+ */
+export function AgentLogo(props: AgentLogo.Props) {
+  const { agent, className, size, vars, ...attributes } = props
+  const id = useId()
+  const labelled = props['aria-label'] || props['aria-labelledby']
+  const entry = agents[agent]
+
+  return (
+    <span
+      aria-hidden={labelled ? undefined : true}
+      role={labelled ? 'img' : undefined}
+      {...attributes}
+      data-agent={agent}
+      {...styles.tile({ className, frame: entry.frame, size, style: props.style, vars })}
+    >
+      <svg
+        aria-hidden="true"
+        fill="none"
+        viewBox={entry.viewBox}
+        xmlns="http://www.w3.org/2000/svg"
+        {...styles.mark({ frame: entry.frame, size })}
+      >
+        {entry.mark(id)}
+      </svg>
+    </span>
+  )
+}
+
+export namespace AgentLogo {
+  export type Props = Omit<ComponentPropsWithRef<'span'>, 'children'> &
+    Omit<zyzz.Props.Variants<typeof styles.tile>, 'frame'> & {
+      /** Agent whose logo renders. */
+      agent: keyof typeof agents
+    }
+}
+
+namespace styles {
+  // The tiles stay concentric with their marks: a 6px corner at 24px and a 7px corner at 28px, which
+  // no radius token sets.
+  export const tile = variants(
+    {
+      base: {
+        alignItems: 'center',
+        boxSizing: 'border-box',
+        display: 'inline-flex',
+        flexShrink: '0 !custom',
+        justifyContent: 'center',
+        verticalAlign: 'middle',
+      },
+      defaultVariants: { frame: 'brand', size: '24' },
+      variants: {
+        frame: {
+          brand: {
+            color: 'neutral.000',
+            selectors: {
+              '&[data-agent="claude"]': { backgroundColor: '#d97757 !custom' },
+              '&[data-agent="cli"]': { backgroundColor: '#0a0a0a !custom' },
+              '&[data-agent="cursor"]': { backgroundColor: '#1f1f1f !custom' },
+              '&[data-agent="muse"]': { backgroundColor: '#7c5cff !custom' },
+            },
+          },
+          codex: {
+            backgroundColor: 'background.elevated',
+            border: '1px solid !custom',
+            borderColor: 'line.secondary',
+            color: 'content.primary',
+          },
+          outlined: {
+            backgroundColor: 'background.elevated',
+            border: '1px solid !custom',
+            borderColor: 'line.secondary',
+            color: 'content.primary',
+          },
+        },
+        size: {
+          '24': {
+            borderRadius: 'calc(0.375rem * var(--tds-corner-scale, 1)) !custom',
+            height: '24',
+            width: '24',
+          },
+          '28': {
+            borderRadius: 'calc(0.4375rem * var(--tds-corner-scale, 1)) !custom',
+            height: '28',
+            width: '28',
+          },
+        },
+      },
+    },
+    { id: 'tds/web/agent-logo' },
+  )
+
+  // Brand marks fill 14 or 16px, the Codex mark 19 or 22px, and the other outlined marks 15 or 17px.
+  export const mark = variants(
+    {
+      base: { display: 'block', flexShrink: '0 !custom' },
+      compoundVariants: [
+        {
+          when: { frame: 'brand', size: '24' },
+          style: { height: '14px !custom', width: '14px !custom' },
+        },
+        { when: { frame: 'brand', size: '28' }, style: { height: '16', width: '16' } },
+        {
+          when: { frame: 'codex', size: '24' },
+          style: { height: '19px !custom', width: '19px !custom' },
+        },
+        {
+          when: { frame: 'codex', size: '28' },
+          style: { height: '22px !custom', width: '22px !custom' },
+        },
+        {
+          when: { frame: 'outlined', size: '24' },
+          style: { height: '15px !custom', width: '15px !custom' },
+        },
+        {
+          when: { frame: 'outlined', size: '28' },
+          style: { height: '17px !custom', width: '17px !custom' },
+        },
+      ],
+      defaultVariants: { frame: 'brand', size: '24' },
+      variants: {
+        frame: { brand: {}, codex: {}, outlined: {} },
+        size: { '24': {}, '28': {} },
+      },
+    },
+    { id: 'tds/web/agent-logo/mark' },
+  )
+}