@lotics/ui 5.6.1 → 5.8.0

package/examples/tpl_stock.tsx

@@ -12,7 +12,7 @@ import { Drawer } from "@lotics/ui/drawer";
 import { EmptyState } from "@lotics/ui/empty_state";
 import { KPIStrip } from "@lotics/ui/kpi_strip";
 import { Pagination } from "@lotics/ui/pagination";
-import { PillButton } from "@lotics/ui/pill_button";
+import { Chip } from "@lotics/ui/chip";
 import { PressableRow } from "@lotics/ui/pressable_row";
 import { SearchInput } from "@lotics/ui/search_input";
 import { formatMoney } from "@lotics/ui/format_money";
@@ -266,9 +266,9 @@ export function TplStock() {
             </CardHeaderTitle>
             <View style={{ flexDirection: "row", alignItems: "center", gap: 8, flexWrap: "wrap" }}>
               {chips.map((c) => (
-                <PillButton key={c.key} onDismiss={c.clear} dismissTooltip="Clear filter">
+                <Chip key={c.key} onDismiss={c.clear} dismissTooltip="Clear filter">
                   <Text size="xs" weight="medium" color="muted">{c.label}</Text>
-                </PillButton>
+                </Chip>
               ))}
               <View style={{ width: 240 }}>
                 <SearchInput

package/examples/tpl_triage.tsx

@@ -62,7 +62,7 @@ export function TplTriage() {
             <Text size="sm" color="muted">The agent classifies and routes each item — accept the call, override, or dismiss</Text>
           </View>
           {tab === "open" && highOpen > 0 ? (
-            <Button title={`Accept ${highOpen} high-confidence`} color="secondary" shape="rounded" onPress={acceptAllHigh} />
+            <Button title={`Accept ${highOpen} high-confidence`} color="secondary" onPress={acceptAllHigh} />
           ) : null}
         </View>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "5.6.1",
+  "version": "5.8.0",
   "type": "module",
   "exports": {
     "./tokens": "./src/tokens.ts",
@@ -63,6 +63,11 @@
     "./activity_indicator": "./src/activity_indicator.tsx",
     "./agent_run": "./src/agent_run.tsx",
     "./agent_progress": "./src/agent_progress.tsx",
+    "./markdown": {
+      "react-native": "./src/markdown.tsx",
+      "default": "./src/markdown.web.tsx"
+    },
+    "./markdown.css": "./src/markdown.css",
     "./confidence": "./src/confidence.tsx",
     "./review_card": "./src/review_card.tsx",
     "./change_review": "./src/change_review.tsx",
@@ -128,8 +133,8 @@
     "./radio_picker": "./src/radio_picker.tsx",
     "./form_text_input": "./src/form_text_input.tsx",
     "./form_switch": "./src/form_switch.tsx",
-    "./pill_button": "./src/pill_button.tsx",
-    "./filter_pill": "./src/filter_pill.tsx",
+    "./chip": "./src/chip.tsx",
+    "./filter_chip": "./src/filter_chip.tsx",
     "./range_slider": "./src/range_slider.tsx",
     "./counter": "./src/counter.tsx",
     "./link": "./src/link.tsx",
@@ -217,6 +222,10 @@
     "directory": "packages/ui"
   },
   "license": "MIT",
+  "dependencies": {
+    "react-markdown": "^10.0.0",
+    "remark-gfm": "^4.0.0"
+  },
   "peerDependencies": {
     "@lotics/docx": "^0.1.0",
     "@lotics/xlsx": "^0.1.0",

package/src/agent_progress.tsx

@@ -4,19 +4,20 @@ import { colors } from "./colors";
 import { Text } from "./text";
 import { WaveAvatar } from "./wave_avatar";
 import { PressableHighlight } from "./pressable_highlight";
-import { AgentRun, resolveToolMeta, type AgentRunStep } from "./agent_run";
+import { AgentRun, resolveToolMeta, type AgentRunItem } from "./agent_run";
 
 export interface AgentProgressProps {
-  steps: AgentRunStep[];
+  /** The ordered transcript — same shape `AgentRun` takes. */
+  items: AgentRunItem[];
   state?: "streaming" | "done" | "error";
   /** The collapsed-pill label. Defaults to the running step's label (or
    *  "Working…" / "Done"). */
   label?: string;
-  /** The agent's streamed text — forwarded to the expanded `AgentRun`. */
-  text?: string;
   /** Localize / override a tool step's label by raw tool name — applied to both
    *  the collapsed pill and the expanded feed. */
   labelForTool?: (toolName: string) => string | undefined;
+  /** Localized "{n} steps" suffix, forwarded to the expanded feed. */
+  stepsLabel?: (n: number) => string;
   defaultExpanded?: boolean;
 }
 
@@ -29,15 +30,16 @@ export interface AgentProgressProps {
  * label, so the surface stays calm until you ask to see the steps.
  */
 export function AgentProgress(props: AgentProgressProps) {
-  const { steps, state = "streaming", label, text, labelForTool, defaultExpanded } = props;
+  const { items, state = "streaming", label, labelForTool, stepsLabel, defaultExpanded } = props;
   const [expanded, setExpanded] = useState(defaultExpanded ?? false);
 
-  const running = steps.filter((s) => s.status === "running").at(-1);
-  const runningLabel = running
-    ? running.kind === "tool"
-      ? resolveToolMeta(running.label, labelForTool).label
-      : running.label
-    : undefined;
+  const running = [...items].reverse().find((it) => it.type === "step" && it.status === "running");
+  const runningLabel =
+    running && running.type === "step"
+      ? running.kind === "tool"
+        ? resolveToolMeta(running.label, labelForTool).label
+        : running.label
+      : undefined;
   const compact = label ?? runningLabel ?? (state === "done" ? "Done" : state === "error" ? "Stopped" : "Working…");
   const streaming = state === "streaming";
 
@@ -46,7 +48,7 @@ export function AgentProgress(props: AgentProgressProps) {
       {expanded ? (
         <View style={styles.panel}>
           <ScrollView style={{ maxHeight: 260 }} contentContainerStyle={{ padding: 16 }}>
-            <AgentRun steps={steps} state={state} text={text} labelForTool={labelForTool} />
+            <AgentRun items={items} state={state} labelForTool={labelForTool} stepsLabel={stepsLabel} />
           </ScrollView>
         </View>
       ) : null}

package/src/agent_run.tsx

@@ -1,10 +1,14 @@
-import { useEffect, useRef, type ReactNode } from "react";
-import { Animated, StyleSheet, View } from "react-native";
-import { colors, solid } from "./colors";
+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 — shown as a narration block
-   *  above the feed, with a live caret while streaming. */
-  text?: string;
-  /** Whole-run state. `streaming` keeps the caret blinking + 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,91 +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;
 
-  return (
-    <View accessibilityLabel={accessibilityLabel} style={{ gap: 12 }}>
-      {text ? (
-        <Text size="sm" style={styles.narration}>
-          {text}
-          {streaming ? <Caret /> : null}
-        </Text>
-      ) : null}
+  const [expanded, setExpanded] = useState<Record<string, boolean>>({});
+  const toggle = (id: string) => setExpanded((e) => ({ ...e, [id]: !e[id] }));
 
-      <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>
-          );
+  return (
+    <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>
   );
 }
 
-// A blinking caret that trails the streamed text — the signature of live writing.
-function Caret() {
-  const opacity = useRef(new Animated.Value(1)).current;
-  useEffect(() => {
-    const loop = Animated.loop(
-      Animated.sequence([
-        Animated.timing(opacity, { toValue: 0, duration: 480, useNativeDriver: false }),
-        Animated.timing(opacity, { toValue: 1, duration: 480, useNativeDriver: false }),
-      ]),
+// 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>
     );
-    loop.start();
-    return () => loop.stop();
-  }, [opacity]);
-  return <Animated.Text style={{ opacity, color: solid("blue") }}>▍</Animated.Text>;
+  }
+  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: { lineHeight: 21, color: colors.zinc[700] },
+  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) {