@lotics/ui 5.7.0 → 5.9.0

package/src/agent_run.tsx

@@ -1,10 +1,14 @@
-import { type ReactNode } from "react";
-import { View } from "react-native";
+import { useState, type ReactNode } from "react";
+import { StyleSheet, View } from "react-native";
+import { colors } from "./colors";
 import { Text } from "./text";
-import { type IconName } from "./icon";
+import { Icon, type IconName } from "./icon";
 import { Markdown } from "./markdown";
 import { Peek } from "./peek";
-import { Stepper, Step, type StepStatus } from "./stepper";
+import { PressableHighlight } from "./pressable_highlight";
+import { Marker, type StepStatus } from "./stepper";
+import { AnimationFadeIn } from "./animation_fade_in";
+import { CONTROL_HEIGHT, CONTROL_RADIUS } from "./control_surface";
 
 export type AgentStepStatus = "running" | "done" | "error";
 
@@ -14,29 +18,41 @@ export interface AgentRunStep {
    *  it to a human label via the default map / `labelForTool`. A `step` carries
    *  an already-human label. */
   label: string;
-  /** A note under the label (a count, an input summary), muted. */
+  /** A note under the label — should be REAL tool I/O (an arg, a count, a result
+   *  summary), never invented prose. Muted. */
   detail?: string;
   status: AgentStepStatus;
   kind?: "step" | "tool";
-  /** Optional content shown in a `Peek` popover when the step is pressed —
-   *  glance into what the step did (the tool input, a result summary). */
+  /** Optional content shown in a `Peek` popover when the (expanded) step is
+   *  pressed — glance into what the step did (the tool input, a result summary). */
   peek?: ReactNode;
 }
 
+/**
+ * The ordered transcript of a run, in the order it happened: prose the agent
+ * streams (`text`) interleaved with the tools/steps it runs between prose
+ * (`step`). A real run is a timeline — text, a burst of tool calls, more text,
+ * more calls — so the feed is an ordered array, NOT a text block over a flat
+ * step list. Consecutive `step` items collapse into ONE activity group.
+ */
+export type AgentRunItem =
+  | { type: "text"; id: string; text: string }
+  | ({ type: "step" } & AgentRunStep);
+
 export interface AgentRunProps {
-  steps: AgentRunStep[];
-  /** The agent's streamed reasoning / answer text — rendered as markdown in a
-   *  narration block above the feed, with a trailing ▍ while streaming. */
-  text?: string;
-  /** Whole-run state. `streaming` keeps the trailing ▍ + the latest step
-   *  pulsing; `done`/`error` settle it. Defaults to `streaming` while a step runs. */
+  /** The ordered transcript — text + step items in the order they occurred. */
+  items: AgentRunItem[];
+  /** Whole-run state. `streaming` keeps the trailing text's caret blinking and
+   *  the tail activity group pulsing; `done`/`error` settle every group. Defaults
+   *  to `streaming` while any step is `running`. */
   state?: "streaming" | "done" | "error";
   /** Localize / override a TOOL step's display label by its raw tool name
    *  (`update_records` → "Đang cập nhật dữ liệu"). Return `undefined` to fall
    *  back to the built-in label. */
   labelForTool?: (toolName: string) => string | undefined;
-  /** The always-last terminal step's label. Default "Done"; localize per app. */
-  doneLabel?: string;
+  /** Localized "{n} steps" suffix on a collapsed activity group (the kit is
+   *  locale-neutral). Default `"{n} steps"`. */
+  stepsLabel?: (n: number) => string;
   accessibilityLabel?: string;
 }
 
@@ -79,66 +95,237 @@ export function resolveToolMeta(
   };
 }
 
+/** Resolve a step's display label — a `tool` maps its raw name, a `step` is
+ *  already human. */
+function stepLabel(s: AgentRunStep, labelForTool?: (toolName: string) => string | undefined): string {
+  return s.kind === "tool" ? resolveToolMeta(s.label, labelForTool).label : s.label;
+}
+
+// A run is a timeline of segments: prose, then a group of consecutive tool/step
+// calls, then more prose. Folding the flat item list into segments is what lets
+// the feed interleave instead of forcing all text to the top.
+type Segment =
+  | { kind: "text"; id: string; text: string }
+  | { kind: "group"; id: string; steps: AgentRunStep[] };
+
+function toSegments(items: AgentRunItem[]): Segment[] {
+  const segments: Segment[] = [];
+  for (const item of items) {
+    if (item.type === "text") {
+      segments.push({ kind: "text", id: item.id, text: item.text });
+      continue;
+    }
+    const { type: _t, ...step } = item;
+    const tail = segments[segments.length - 1];
+    if (tail && tail.kind === "group") {
+      segments[segments.length - 1] = { ...tail, steps: [...tail.steps, step] };
+    } else {
+      segments.push({ kind: "group", id: item.id, steps: [step] });
+    }
+  }
+  return segments;
+}
+
+const INK = colors.zinc[700];
+
 /**
- * A live feed of an AI agent's work — the prose it streams + the tools it calls,
- * on a vertical `Stepper`: one neutral dot per call (the latest pulsing while the
- * run is live, a check once done) with a plain-text label, no chip/icon, ALWAYS
- * ending on a "Done" terminal step. A step can carry `peek` content to glance
- * into via a popover. Tool names map to labels via the built-in default + a
- * `labelForTool` override. Pair with `Composer` + `ReviewCard`.
+ * A live feed of an AI agent's work as a TIMELINE — the prose it streams and the
+ * tools it calls, in the order they happened. While the agent is mid-tools the
+ * tail group is a SINGLE pulsing row whose label swaps in place as each call
+ * fires (not a growing stack of dots); once prose resumes the group settles into
+ * one row — "{final action} · {n} steps" — that EXPANDS on press to the steps in
+ * between. Text segments render as prose, the last one carrying a live caret. The
+ * run always ends on the agent's text. Pair with `Composer` + `ReviewCard`.
  */
 export function AgentRun(props: AgentRunProps) {
-  const { steps, text, labelForTool, doneLabel = "Done", accessibilityLabel } = props;
-  const anyRunning = steps.some((s) => s.status === "running");
+  const { items, labelForTool, stepsLabel = (n) => `${n} steps`, accessibilityLabel } = props;
+  const anyRunning = items.some((it) => it.type === "step" && it.status === "running");
   const state = props.state ?? (anyRunning ? "streaming" : "done");
   const streaming = state === "streaming";
-  const last = steps.length - 1;
+  const segments = toSegments(items);
+  const lastIndex = segments.length - 1;
+
+  const [expanded, setExpanded] = useState<Record<string, boolean>>({});
+  const toggle = (id: string) => setExpanded((e) => ({ ...e, [id]: !e[id] }));
 
   return (
-    <View accessibilityLabel={accessibilityLabel} style={{ gap: 12 }}>
-      {text ? <Markdown>{streaming ? `${text} ▍` : text}</Markdown> : null}
-
-      <Stepper orientation="vertical" live={streaming}>
-        {steps.map((s, i) => {
-          // Tools the SDK feeds arrive already "done"; show the most recent as
-          // the pulsing current while the run is still live.
-          const status: StepStatus =
-            s.status === "error"
-              ? "warning"
-              : s.status === "running" || (streaming && i === last)
-                ? "current"
-                : "done";
-          const label = s.kind === "tool" ? resolveToolMeta(s.label, labelForTool).label : s.label;
-          const body = (
-            <View style={{ gap: 1 }}>
-              <Text size="sm">{label}</Text>
-              {s.detail ? (
-                <Text size="xs" color={s.status === "error" ? "danger" : "muted"}>
-                  {s.detail}
-                </Text>
-              ) : null}
-            </View>
-          );
+    <View accessibilityLabel={accessibilityLabel} style={{ gap: 10 }}>
+      {segments.map((seg, i) => {
+        if (seg.kind === "text") {
           return (
-            <Step key={s.id} status={status}>
-              {s.peek ? (
-                <Peek accessibilityLabel={label} content={s.peek}>
-                  {body}
-                </Peek>
-              ) : (
-                body
-              )}
-            </Step>
+            <View key={seg.id} style={styles.narration}>
+              <Markdown>{streaming && i === lastIndex ? `${seg.text} ▍` : seg.text}</Markdown>
+            </View>
           );
-        })}
-        {state === "done" ? (
-          <Step key="__done" status="complete">
-            <Text size="sm" weight="medium">
-              {doneLabel}
-            </Text>
-          </Step>
-        ) : null}
-      </Stepper>
+        }
+        return (
+          <ToolGroup
+            key={seg.id}
+            steps={seg.steps}
+            active={streaming && i === lastIndex}
+            expanded={!!expanded[seg.id]}
+            onToggle={() => toggle(seg.id)}
+            labelForTool={labelForTool}
+            stepsLabel={stepsLabel}
+          />
+        );
+      })}
     </View>
   );
 }
+
+// One activity row: [dot] [body] … [chevron], dot vertically centred to the body,
+// the whole row a CONTROL_HEIGHT pressable when collapsible (no indent — every row
+// shares the same left edge, collapsed or expanded).
+function ActivityRow(props: {
+  markerStatus: StepStatus;
+  live?: boolean;
+  onPress?: () => void;
+  accessibilityLabel?: string;
+  trailing?: ReactNode;
+  children: ReactNode;
+}) {
+  const { markerStatus, live, onPress, accessibilityLabel, trailing, children } = props;
+  const inner = (
+    <>
+      <View style={styles.dotCol}>
+        <Marker status={markerStatus} color={INK} live={!!live} />
+      </View>
+      <View style={styles.rowBody}>{children}</View>
+      {trailing ?? null}
+    </>
+  );
+  if (onPress) {
+    return (
+      <PressableHighlight onPress={onPress} accessibilityRole="button" accessibilityLabel={accessibilityLabel} style={styles.row}>
+        {inner}
+      </PressableHighlight>
+    );
+  }
+  return <View style={styles.row}>{inner}</View>;
+}
+
+function StepBody({ label, detail, status }: { label: string; detail?: string; status: AgentStepStatus }) {
+  return (
+    <View style={{ gap: 1 }}>
+      <Text size="sm">{label}</Text>
+      {detail ? (
+        <Text size="xs" color={status === "error" ? "danger" : "muted"}>
+          {detail}
+        </Text>
+      ) : null}
+    </View>
+  );
+}
+
+function SummaryLabel({ label, count, stepsLabel }: { label: string; count: number; stepsLabel: (n: number) => string }) {
+  return (
+    <Text size="sm" weight="medium" numberOfLines={1}>
+      {label}
+      <Text size="sm" color="muted">
+        {"  ·  " + stepsLabel(count)}
+      </Text>
+    </Text>
+  );
+}
+
+function chevron(dir: "down" | "up") {
+  return <Icon name={dir === "down" ? "chevron-down" : "chevron-up"} size={16} color={colors.zinc[400]} />;
+}
+
+function ToolGroup(props: {
+  steps: AgentRunStep[];
+  active: boolean;
+  expanded: boolean;
+  onToggle: () => void;
+  labelForTool?: (toolName: string) => string | undefined;
+  stepsLabel: (n: number) => string;
+}) {
+  const { steps, active, expanded, onToggle, labelForTool, stepsLabel } = props;
+  const resolve = (s: AgentRunStep) => stepLabel(s, labelForTool);
+
+  // ACTIVE — one pulsing row whose label swaps in place as each call fires (the
+  // label is keyed by the current step's id, so a new call rises + fades into the
+  // SAME row instead of stacking a new dot).
+  if (active) {
+    const current = steps[steps.length - 1];
+    return (
+      <View style={styles.group}>
+        <ActivityRow markerStatus="current" live>
+          <AnimationFadeIn key={current.id} translateY={4}>
+            <StepBody label={resolve(current)} detail={current.detail} status={current.status} />
+          </AnimationFadeIn>
+        </ActivityRow>
+      </View>
+    );
+  }
+
+  const errored = steps.some((s) => s.status === "error");
+  const final = steps[steps.length - 1];
+  const expandable = steps.length > 1;
+
+  // SETTLED, single call — just the one done/warning row (nothing to expand).
+  if (!expandable) {
+    return (
+      <View style={styles.group}>
+        <ActivityRow markerStatus={final.status === "error" ? "warning" : "done"}>
+          {final.peek ? (
+            <Peek accessibilityLabel={resolve(final)} content={final.peek}>
+              <StepBody label={resolve(final)} detail={final.detail} status={final.status} />
+            </Peek>
+          ) : (
+            <StepBody label={resolve(final)} detail={final.detail} status={final.status} />
+          )}
+        </ActivityRow>
+      </View>
+    );
+  }
+
+  // SETTLED, expandable — a persistent "{final action} · {n} steps" HEADER that
+  // STAYS PUT and rolls the steps out BELOW it (in order) on press, so the row you
+  // pressed never moves. The header wears the `complete` terminal dot — an outlined
+  // ring + check, a differentiator from the filled `done` step dots; every row
+  // shares one left edge (no indent).
+  return (
+    <View style={styles.group}>
+      <ActivityRow
+        markerStatus={errored ? "warning" : "complete"}
+        onPress={onToggle}
+        accessibilityLabel={`${resolve(final)} — ${stepsLabel(steps.length)}`}
+        trailing={chevron(expanded ? "up" : "down")}
+      >
+        <SummaryLabel label={resolve(final)} count={steps.length} stepsLabel={stepsLabel} />
+      </ActivityRow>
+      {expanded
+        ? steps.map((s) => (
+            <AnimationFadeIn key={s.id} translateY={4}>
+              <ActivityRow markerStatus={s.status === "error" ? "warning" : "done"}>
+                {s.peek ? (
+                  <Peek accessibilityLabel={resolve(s)} content={s.peek}>
+                    <StepBody label={resolve(s)} detail={s.detail} status={s.status} />
+                  </Peek>
+                ) : (
+                  <StepBody label={resolve(s)} detail={s.detail} status={s.status} />
+                )}
+              </ActivityRow>
+            </AnimationFadeIn>
+          ))
+        : null}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  narration: { paddingHorizontal: 8 },
+  group: { gap: 2 },
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 10,
+    minHeight: CONTROL_HEIGHT,
+    paddingHorizontal: 8,
+    borderRadius: CONTROL_RADIUS,
+  },
+  dotCol: { width: 18, alignItems: "center" },
+  rowBody: { flex: 1 },
+});

package/src/back_button.tsx

@@ -1,4 +1,4 @@
-import { Button } from "./button";
+import { IconButton } from "./icon_button";
 import { View } from "react-native";
 
 interface BackButtonProps {
@@ -11,8 +11,9 @@ export function BackButton(props: BackButtonProps) {
   const { onPress, accessibilityLabel = "Back" } = props;
   return (
     <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
-      <Button
+      <IconButton
         icon="chevron-left"
+        size="lg"
         color="secondary"
         accessibilityLabel={accessibilityLabel}
         onPress={onPress}

package/src/badge.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { View, StyleSheet, StyleProp, ViewStyle } from "react-native";
 import { Text } from "./text";
 import { colors, type ColorName } from "./colors";
+import { CONTROL_RADIUS } from "./control_surface";
 import { useTooltip } from "./tooltip";
 
 interface BadgeProps {
@@ -62,7 +63,7 @@ export function Badge(props: BadgeProps) {
 
 const styles = StyleSheet.create({
   base: {
-    borderRadius: 8,
+    borderRadius: CONTROL_RADIUS,
     paddingVertical: 4,
     paddingHorizontal: 8,
     flexDirection: "row",

package/src/button.tsx

@@ -9,10 +9,12 @@ import {
 } from "react-native";
 import { Text } from "./text";
 import { colors } from "./colors";
+import { CONTROL_RADIUS } from "./control_surface";
 import { Icon, IconName } from "./icon";
 import { Ref, useCallback } from "react";
 import { TextColor } from "./text_utils";
 import { useTooltip, UseTooltipOptions } from "./tooltip";
+import { getButtonIconColor } from "./button_colors";
 export type ButtonColor = "primary" | "secondary" | "danger" | "muted" | "danger-secondary";
 export type ButtonIconPosition = "left" | "right";
 
@@ -22,10 +24,6 @@ interface ButtonPropsBase {
   icon?: IconName;
   alignSelf?: "flex-start" | "flex-end" | "center" | "stretch" | "auto";
   color?: ButtonColor;
-  /** Corner shape. `pill` (default) is the fully-rounded capsule — keep it for
-   *  icon-only and toolbar buttons, and to preserve existing screens. `rounded`
-   *  is a 10px radius — use it for labelled CTAs / action buttons. */
-  shape?: "pill" | "rounded";
   loading?: boolean;
   disabled?: boolean;
   tooltip?: string | UseTooltipOptions;
@@ -34,17 +32,15 @@ interface ButtonPropsBase {
 }
 
 /**
- * A button must have an accessible name. The compiler enforces it by
- * requiring at least one of: a string `title`, an explicit
- * `accessibilityLabel`, or a `tooltip` that carries a visible name. The
- * runtime derives `accessibilityLabel` in that precedence order.
+ * A `Button` is a LABELLED action — `title` is MANDATORY and is its accessible
+ * name. For an icon-only affordance use `IconButton` (circular); the compiler
+ * blocks a title-less Button so icon-only actions never render as a rounded box.
  */
-export type ButtonProps = ButtonPropsBase &
-  (
-    | { title: string; accessibilityLabel?: string; tooltip?: string | UseTooltipOptions }
-    | { title?: boolean | undefined; accessibilityLabel: string; tooltip?: string | UseTooltipOptions }
-    | { title?: boolean | undefined; accessibilityLabel?: string; tooltip: string | UseTooltipOptions }
-  );
+export type ButtonProps = ButtonPropsBase & {
+  title: string;
+  accessibilityLabel?: string;
+  tooltip?: string | UseTooltipOptions;
+};
 
 export function Button(props: ButtonProps) {
   const {
@@ -53,7 +49,6 @@ export function Button(props: ButtonProps) {
     alignSelf,
     title,
     color,
-    shape = "pill",
     style,
     disabled,
     tooltip,
@@ -117,7 +112,7 @@ export function Button(props: ButtonProps) {
         const restPrimary = isPrimary && !pressed && !hovered;
         return [
           {
-            borderRadius: shape === "rounded" ? 10 : 999,
+            borderRadius: CONTROL_RADIUS,
             backgroundColor: disabled
               ? getButtonDisabledBackgroundColor(color)
               : pressed
@@ -145,22 +140,6 @@ export function Button(props: ButtonProps) {
   );
 }
 
-export function getButtonIconColor(color?: ButtonColor, disabled?: boolean): string {
-  switch (color) {
-    case "primary":
-      return colors.white;
-    case "secondary":
-      return colors.zinc["900"];
-    case "danger":
-      return colors.red["900"];
-    case "danger-secondary":
-      return colors.red["900"];
-    case "muted":
-      return colors.zinc["600"];
-    default:
-      return disabled ? colors.zinc["300"] : colors.zinc["950"];
-  }
-}
 
 export function getButtonTextColor(color?: ButtonColor, disabled?: boolean): TextColor {
   switch (color) {

package/src/button_colors.ts

@@ -0,0 +1,23 @@
+import { type ButtonColor } from "./button";
+import { colors } from "./colors";
+
+/** The icon/glyph ink for each button colour — shared by `Button` and
+ *  `IconButton` so an icon-only action migrated to `IconButton` keeps the EXACT
+ *  same colour. Lives in its own module (not `button.tsx`) so a test that mocks
+ *  `@lotics/ui/button` can't leave `IconButton` without it. */
+export function getButtonIconColor(color?: ButtonColor, disabled?: boolean): string {
+  switch (color) {
+    case "primary":
+      return colors.white;
+    case "secondary":
+      return colors.zinc["900"];
+    case "danger":
+      return colors.red["900"];
+    case "danger-secondary":
+      return colors.red["900"];
+    case "muted":
+      return colors.zinc["600"];
+    default:
+      return disabled ? colors.zinc["300"] : colors.zinc["950"];
+  }
+}

package/src/calendar/calendar_view.tsx

@@ -125,7 +125,7 @@ const styles = StyleSheet.create({
   iconBtn: { width: 30, height: 30, borderRadius: 6, alignItems: "center", justifyContent: "center" },
   todayBtn: { paddingHorizontal: 12, height: 30, borderRadius: 6, borderWidth: 1, borderColor: colors.border, alignItems: "center", justifyContent: "center" },
   title: { flex: 1, textAlign: "center" },
-  viewSwitch: { flexDirection: "row", backgroundColor: colors.zinc[100], borderRadius: 8, padding: 2 },
-  viewBtn: { paddingHorizontal: 12, paddingVertical: 5, borderRadius: 6 },
+  viewSwitch: { flexDirection: "row", backgroundColor: colors.zinc[100], borderRadius: 10, padding: 2 },
+  viewBtn: { paddingHorizontal: 12, paddingVertical: 5, borderRadius: 8 },
   viewBtnActive: { backgroundColor: colors.white },
 });

package/src/card_select_item.tsx

@@ -1,5 +1,6 @@
 import { PressableStateCallbackType, StyleProp, StyleSheet, ViewStyle } from "react-native";
 import { colors } from "./colors";
+import { CONTROL_RADIUS } from "./control_surface";
 import { PressableHighlight } from "./pressable_highlight";
 
 interface CardSelectItemProps {
@@ -45,7 +46,7 @@ export function CardSelectItem(props: CardSelectItemProps) {
 const styles = StyleSheet.create({
   container: {
     padding: 16,
-    borderRadius: 8,
+    borderRadius: CONTROL_RADIUS,
     backgroundColor: colors.background,
     borderColor: colors.border,
     borderWidth: 1,

package/src/change_review.tsx

@@ -173,8 +173,8 @@ export function ChangeReview<T>(props: ChangeReviewProps<T>) {
                   <View key={props.getKey(item, i)} style={styles.itemCard}>
                     {props.renderItem(item, i)}
                     <View style={styles.itemActions}>
-                      <Button title={props.rejectLabel ?? "Drop"} color="muted" shape="rounded" onPress={() => props.onRejectItem?.(i)} />
-                      <Button title={props.acceptLabel ?? "Keep"} color="secondary" shape="rounded" onPress={() => props.onAcceptItem?.(i)} />
+                      <Button title={props.rejectLabel ?? "Drop"} color="muted" onPress={() => props.onRejectItem?.(i)} />
+                      <Button title={props.acceptLabel ?? "Keep"} color="secondary" onPress={() => props.onAcceptItem?.(i)} />
                     </View>
                   </View>
                 );
@@ -193,7 +193,7 @@ export function ChangeReview<T>(props: ChangeReviewProps<T>) {
                     )}
                   </View>
                   {props.onUndoItem ? (
-                    <Button title={L.undo} color="muted" shape="rounded" onPress={() => props.onUndoItem?.(i)} />
+                    <Button title={L.undo} color="muted" onPress={() => props.onUndoItem?.(i)} />
                   ) : null}
                 </View>
               );
@@ -243,14 +243,13 @@ export function ChangeReviewActions<T>(props: ChangeReviewActionsProps<T>) {
     });
   return (
     <View style={styles.actionsRow}>
-      {perItem ? <Button title={props.acceptAllLabel ?? "Accept all"} color="muted" shape="rounded" onPress={acceptAll} /> : null}
+      {perItem ? <Button title={props.acceptAllLabel ?? "Accept all"} color="muted" onPress={acceptAll} /> : null}
       <View style={{ flex: 1 }} />
-      {props.onDiscard ? <Button title={props.discardLabel ?? "Discard"} color="muted" shape="rounded" onPress={props.onDiscard} /> : null}
+      {props.onDiscard ? <Button title={props.discardLabel ?? "Discard"} color="muted" onPress={props.onDiscard} /> : null}
       {props.onApply ? (
         <Button
           title={props.applyLabel ?? (perItem ? "Apply kept" : "Apply")}
           color="primary"
-          shape="rounded"
           disabled={perItem && keptCount === 0}
           onPress={props.onApply}
         />

package/src/{pill_button.tsx → chip.tsx}

@@ -1,10 +1,10 @@
 import { Ref } from "react";
 import { IconButton } from "./icon_button";
 import { PressableHighlight } from "./pressable_highlight";
-import { pillSurfaceStyle } from "./control_surface";
+import { chipSurfaceStyle } from "./control_surface";
 import { StyleSheet, View } from "react-native";
 
-interface PillButtonProps {
+interface ChipProps {
   testID?: string;
   children: React.ReactNode;
   onPress?: () => void;
@@ -13,7 +13,7 @@ interface PillButtonProps {
   ref?: Ref<View>;
 }
 
-export function PillButton(props: PillButtonProps) {
+export function Chip(props: ChipProps) {
   const { testID, children, onPress, onDismiss, dismissTooltip, ref } = props;
 
   return (
@@ -22,12 +22,12 @@ export function PillButton(props: PillButtonProps) {
         <PressableHighlight
           testID={testID}
           onPress={onPress}
-          style={(state) => [pillSurfaceStyle(state), styles.pillLayout, onDismiss && styles.pillWithDismiss]}
+          style={(state) => [chipSurfaceStyle(state), styles.pillLayout, onDismiss && styles.pillWithDismiss]}
         >
           {children}
         </PressableHighlight>
       ) : (
-        <View style={[pillSurfaceStyle({}), styles.pillLayout, onDismiss && styles.pillWithDismiss]}>{children}</View>
+        <View style={[chipSurfaceStyle({}), styles.pillLayout, onDismiss && styles.pillWithDismiss]}>{children}</View>
       )}
       {onDismiss && (
         <View style={styles.dismissButton}>
@@ -45,8 +45,8 @@ export function PillButton(props: PillButtonProps) {
 }
 
 const styles = StyleSheet.create({
-  // Surface (height/border/radius/white + hover) comes from pillSurfaceStyle;
-  // PillButton owns only its row layout.
+  // Surface (height/border/radius/white + hover) comes from chipSurfaceStyle;
+  // Chip owns only its row layout.
   pillLayout: {
     flexDirection: "row",
     alignItems: "center",

package/src/chip_group.tsx

@@ -1,7 +1,7 @@
 import { View } from "react-native";
 import { Text } from "./text";
 import { PressableHighlight } from "./pressable_highlight";
-import { pillSurfaceStyle } from "./control_surface";
+import { chipSurfaceStyle } from "./control_surface";
 
 // One-of-N chips: every option visible, one tap to switch, the row wraps on
 // narrow widths. Quiet zinc styling — bordered white at rest, dark fill when
@@ -55,7 +55,7 @@ export function ChipGroup<T extends string = string>(props: ChipGroupProps<T>) {
             // The shared pill-surface contract (height/border/radius/white +
             // hover/press wash + the selected box-shadow ring); the chip only
             // adds its horizontal padding.
-            style={(state) => [pillSurfaceStyle(state, { selected: active }), { paddingHorizontal: 14 }]}
+            style={(state) => [chipSurfaceStyle(state, { selected: active }), { paddingHorizontal: 14 }]}
           >
             <Text size="sm" weight={active ? "semibold" : "medium"} color={active ? "default" : "muted"}>
               {option.label}