@lotics/ui 5.6.1 → 5.8.0

package/src/link_button.tsx

@@ -1,6 +1,7 @@
 import { StyleSheet } from "react-native";
 import { Text } from "./text";
 import { PressableHighlight } from "./pressable_highlight";
+import { CONTROL_RADIUS } from "./control_surface";
 
 export interface LinkButtonProps {
   title: string;
@@ -44,7 +45,7 @@ const styles = StyleSheet.create({
     paddingVertical: 6,
     paddingHorizontal: 8,
     marginHorizontal: -8,
-    borderRadius: 8,
+    borderRadius: CONTROL_RADIUS,
     alignSelf: "flex-start",
   },
 });

package/src/markdown.css

@@ -0,0 +1,209 @@
+.ui-markdown {
+  font-family: Inter_400Regular, "apple-system", "BlinkMacSystemFont", "Segoe UI",
+    "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
+    "Helvetica Neue", sans-serif;
+  font-size: 14px;
+  line-height: 24px;
+  letter-spacing: -0.4px;
+  color: rgba(24, 24, 27, 1);
+}
+
+/* Headings */
+
+.ui-markdown h1 {
+  font-family: Inter_600SemiBold, "apple-system", "BlinkMacSystemFont", "Segoe UI",
+    "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
+    "Helvetica Neue", sans-serif;
+  font-size: 24px;
+  line-height: 30px;
+  font-weight: 600;
+  padding-top: 12px;
+  padding-bottom: 4px;
+  margin: 0;
+}
+
+.ui-markdown h2 {
+  font-family: Inter_600SemiBold, "apple-system", "BlinkMacSystemFont", "Segoe UI",
+    "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
+    "Helvetica Neue", sans-serif;
+  font-size: 18px;
+  line-height: 24px;
+  font-weight: 600;
+  padding-top: 12px;
+  padding-bottom: 4px;
+  margin: 0;
+}
+
+.ui-markdown h3 {
+  font-family: Inter_600SemiBold, "apple-system", "BlinkMacSystemFont", "Segoe UI",
+    "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
+    "Helvetica Neue", sans-serif;
+  font-size: 16px;
+  line-height: 22px;
+  font-weight: 600;
+  padding-top: 8px;
+  padding-bottom: 4px;
+  margin: 0;
+}
+
+.ui-markdown h4,
+.ui-markdown h5,
+.ui-markdown h6 {
+  font-family: Inter_500Medium, "apple-system", "BlinkMacSystemFont", "Segoe UI",
+    "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
+    "Helvetica Neue", sans-serif;
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 500;
+  padding-top: 8px;
+  padding-bottom: 4px;
+  margin: 0;
+}
+
+/* Block elements */
+
+.ui-markdown p {
+  margin: 0;
+  padding: 4px 0;
+}
+
+.ui-markdown blockquote {
+  border-left: 3px solid rgba(228, 228, 231, 1);
+  margin: 4px 0;
+  padding-left: 12px;
+  color: rgba(113, 113, 122, 1);
+}
+
+.ui-markdown hr {
+  border: none;
+  border-top: 1px solid rgba(228, 228, 231, 1);
+  margin: 8px 0;
+}
+
+/* Lists */
+
+.ui-markdown ul,
+.ui-markdown ol {
+  padding-left: 24px;
+  margin: 4px 0;
+}
+
+.ui-markdown li {
+  padding-top: 2px;
+  padding-bottom: 2px;
+}
+
+/* Inline */
+
+.ui-markdown strong {
+  font-family: Inter_500Medium, "apple-system", "BlinkMacSystemFont", "Segoe UI",
+    "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
+    "Helvetica Neue", sans-serif;
+  font-weight: 500;
+}
+
+.ui-markdown a {
+  color: rgba(59, 130, 246, 1);
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.ui-markdown del {
+  color: rgba(113, 113, 122, 1);
+}
+
+/* Code */
+
+.ui-markdown code {
+  padding: 1px 5px;
+  color: rgba(127, 29, 29, 1);
+  background-color: rgba(244, 244, 245, 1);
+  border-radius: 4px;
+  font-size: 13px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+}
+
+.ui-markdown pre {
+  background-color: rgba(244, 244, 245, 1);
+  padding: 12px;
+  border-radius: 8px;
+  margin: 4px 0;
+  overflow-x: auto;
+}
+
+.ui-markdown pre code {
+  padding: 0;
+  color: inherit;
+  background-color: transparent;
+  border-radius: 0;
+  font-size: 13px;
+  line-height: 20px;
+}
+
+/* Tables */
+
+.ui-markdown table {
+  border-collapse: collapse;
+  margin: 4px 0;
+  width: max-content;
+  min-width: 100%;
+}
+
+.ui-markdown th,
+.ui-markdown td {
+  border: 1px solid rgba(228, 228, 231, 1);
+  padding: 6px 12px;
+  text-align: left;
+  white-space: nowrap;
+}
+
+.ui-markdown th {
+  background-color: rgba(244, 244, 245, 1);
+  font-family: Inter_500Medium, "apple-system", "BlinkMacSystemFont", "Segoe UI",
+    "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
+    "Helvetica Neue", sans-serif;
+  font-weight: 500;
+}
+
+/* Table copy button */
+
+.ui-markdown-table-wrapper {
+  position: relative;
+  margin: 16px 0;
+  max-width: 100%;
+}
+
+.ui-markdown-table-scroll {
+  overflow-x: auto;
+  max-width: 100%;
+}
+
+.ui-markdown-table-wrapper table {
+  margin: 0;
+}
+
+.ui-markdown-table-copy {
+  position: absolute;
+  top: 1px;
+  right: 1px;
+  opacity: 0;
+  transition: opacity 0.15s ease-out;
+  background: rgba(244, 244, 245, 0.9);
+  border: 1px solid rgba(228, 228, 231, 1);
+  border-radius: 0 0 0 6px;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.ui-markdown-table-wrapper:hover .ui-markdown-table-copy {
+  opacity: 1;
+}
+
+.ui-markdown-table-copy:hover {
+  background: rgba(228, 228, 231, 1);
+}

package/src/markdown.tsx

@@ -0,0 +1,17 @@
+import { View } from "react-native";
+import { Text } from "./text";
+
+/**
+ * Native fallback. The rich renderer (`markdown.web.tsx`) is react-markdown over
+ * the DOM (`<div>`/`<table>`/clipboard) — web-only. `@lotics/ui` also builds for
+ * native, so this renders the source as plain text. Rich markdown shows on web
+ * (custom-code apps + the frontend on web), which is where it's used; the web
+ * variant is picked via the conditional `exports` in package.json.
+ */
+export function Markdown({ children }: { children: string }) {
+  return (
+    <View>
+      <Text size="sm">{children}</Text>
+    </View>
+  );
+}

package/src/markdown.web.tsx

@@ -0,0 +1,69 @@
+import "./markdown.css";
+import React, { useCallback, useRef, useState } from "react";
+import { View } from "react-native";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import { Icon } from "./icon";
+import { colors } from "./colors";
+
+export function Markdown({ children }: { children: string }) {
+  return (
+    <View>
+      <div className="ui-markdown">
+        <ReactMarkdown remarkPlugins={[remarkGfm]} components={markdownComponents}>
+          {children}
+        </ReactMarkdown>
+      </div>
+    </View>
+  );
+}
+
+const markdownComponents = {
+  table: CopyableTable,
+};
+
+function CopyableTable(props: React.ComponentPropsWithoutRef<"table"> & { node?: unknown }) {
+  const { node: _node, children, ...rest } = props;
+  const tableRef = useRef<HTMLTableElement>(null);
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = useCallback(async () => {
+    const table = tableRef.current;
+    if (!table) return;
+
+    const rows = table.querySelectorAll("tr");
+    const tsv = Array.from(rows)
+      .map((row) =>
+        Array.from(row.querySelectorAll("th, td"))
+          .map((cell) => (cell.textContent ?? "").replace(/\t/g, " ").replace(/\n/g, " ").trim())
+          .join("\t"),
+      )
+      .join("\n");
+
+    await navigator.clipboard.writeText(tsv);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  }, []);
+
+  return (
+    <div className="ui-markdown-table-wrapper">
+      <div className="ui-markdown-table-scroll">
+        <table ref={tableRef} {...rest}>
+          {children}
+        </table>
+      </div>
+      <button
+        className="ui-markdown-table-copy"
+        onClick={handleCopy}
+        type="button"
+        title={copied ? "Copied!" : "Copy table"}
+      >
+        <Icon
+          name={copied ? "check" : "copy"}
+          size={14}
+          color={copied ? colors.green[600] : colors.zinc[500]}
+        />
+      </button>
+    </div>
+  );
+}

package/src/menu_button.tsx

@@ -2,6 +2,7 @@ import { Ref } from "react";
 import { StyleProp, StyleSheet, View, ViewStyle } from "react-native";
 import { Text } from "./text";
 import { colors } from "./colors";
+import { CONTROL_RADIUS } from "./control_surface";
 import { Icon, IconName } from "./icon";
 import { PressableHighlight } from "./pressable_highlight";
 export interface MenuButtonProps {
@@ -126,7 +127,7 @@ const styles = StyleSheet.create({
     gap: 8,
     height: 40,
     paddingHorizontal: 8,
-    borderRadius: 8,
+    borderRadius: CONTROL_RADIUS,
   },
   textContainer: {
     flex: 1,

package/src/menu_list_item.tsx

@@ -2,6 +2,7 @@ import { Ref } from "react";
 import { StyleProp, StyleSheet, View, ViewStyle } from "react-native";
 import { Text } from "./text";
 import { colors } from "./colors";
+import { CONTROL_RADIUS } from "./control_surface";
 import { Icon, IconName } from "./icon";
 import { PressableHighlight } from "./pressable_highlight";
 import type { TextColor } from "./text_utils";
@@ -111,7 +112,7 @@ const styles = StyleSheet.create({
     gap: 8,
     paddingHorizontal: 8,
     paddingVertical: 8,
-    borderRadius: 8,
+    borderRadius: CONTROL_RADIUS,
   },
   textContainer: {
     flex: 1,

package/src/number_input.tsx

@@ -1,5 +1,6 @@
 import type { KeyboardEvent } from "react";
 import { colors } from "./colors";
+import { CONTROL_RADIUS } from "./control_surface";
 import { fontFamilyRegular, inputTextStyleWeb } from "./text_utils";
 import { useFormField } from "./form_field";
 
@@ -50,7 +51,7 @@ export function NumberInput(props: NumberInputProps) {
         height: 40,
         paddingLeft: 8,
         paddingRight: 8,
-        borderRadius: 8,
+        borderRadius: CONTROL_RADIUS,
         borderWidth: 1,
         borderStyle: "solid",
         borderColor: colors.border,

package/src/picker.tsx

@@ -2,7 +2,7 @@ import { Picker as RNPicker } from "@react-native-picker/picker";
 import { StyleSheet, View, Pressable, StyleProp, ViewStyle, TextStyle } from "react-native";
 import { useState, useCallback, useMemo, useEffect, useRef } from "react";
 import { colors } from "./colors";
-import { ACTIVE_RING } from "./control_surface";
+import { ACTIVE_RING, CONTROL_RADIUS } from "./control_surface";
 import { Text } from "./text";
 import { fontFamilyRegular, getInputTextStyle } from "./text_utils";
 import { Icon } from "./icon";
@@ -310,7 +310,7 @@ const styles = StyleSheet.create({
     height: 40,
     paddingHorizontal: 6,
     paddingRight: 28,
-    borderRadius: 8,
+    borderRadius: CONTROL_RADIUS,
     borderWidth: 1,
     borderColor: colors.border,
     fontFamily: fontFamilyRegular,
@@ -324,7 +324,7 @@ const styles = StyleSheet.create({
     paddingHorizontal: 6,
     borderWidth: 1,
     borderColor: colors.border,
-    borderRadius: 8,
+    borderRadius: CONTROL_RADIUS,
     cursor: "auto",
     height: 40,
   },

package/src/popover_header.tsx

@@ -1,6 +1,6 @@
 import { ReactNode } from "react";
 import { View, StyleSheet } from "react-native";
-import { Button } from "./button";
+import { IconButton } from "./icon_button";
 import { Text } from "./text";
 import { usePopoverNav } from "./popover_nav";
 
@@ -18,7 +18,7 @@ export function PopoverHeader(props: PopoverHeaderProps) {
   return (
     <View style={styles.container}>
       {canGoBack && (
-        <Button icon="chevron-left" color="secondary" accessibilityLabel={backLabel} onPress={goBack} />
+        <IconButton icon="chevron-left" size="lg" color="secondary" accessibilityLabel={backLabel} onPress={goBack} />
       )}
       <Text size="sm" weight="medium" style={{ flex: 1 }}>
         {title}

package/src/primitives_purity.test.ts

@@ -8,10 +8,18 @@ import * as path from "node:path";
  * `@lotics/ui` is the public, published, universal-rendering primitives
  * package. Every file in `src/` is a primitive. It must not import any
  * dependency that ties it to a specific Lotics runtime context: no chat
- * SDK, no analytics, no i18n, no markdown libraries, and no Lotics
- * domain types (which live in `@lotics/shared`). Lotics-coupled UI is
- * in the workspace-private `@lotics/ui-internal` package, which may
- * import from here and from `@lotics/shared` freely.
+ * SDK, no analytics, no i18n, and no Lotics domain types (which live in
+ * `@lotics/shared`). Lotics-coupled UI is in the workspace-private
+ * `@lotics/ui-internal` package, which may import from here and from
+ * `@lotics/shared` freely.
+ *
+ * Markdown (react-markdown/remark) is the one heavy third-party dependency
+ * the kit carries on purpose — it's the single canonical renderer for chat,
+ * apps, and `AgentRun`. It's generic, not a Lotics coupling; it stays
+ * universal via the `markdown.web.tsx` (DOM) / `markdown.tsx` (native
+ * plain-text) split and is tree-shaken out of any consumer that doesn't
+ * import `./markdown`. So it's allowed — the guards below remain for the
+ * genuine context couplings.
  *
  * The boundary is enforced by this test — without it primitives drift
  * back into the parent app's contexts over months.
@@ -22,8 +30,6 @@ const FORBIDDEN_PATTERNS = [
   /from\s+["']@lingui\//,
   /from\s+["']@ai-sdk\//,
   /from\s+["']ai["']/,
-  /from\s+["']react-markdown/,
-  /from\s+["']remark-/,
   /from\s+["']@lotics\/shared/,
 ];
 
@@ -38,7 +44,7 @@ function listTopLevelSourceFiles(): string[] {
 }
 
 describe("packages/ui primitives — purity", () => {
-  it("no primitive imports posthog, lingui, ai-sdk, markdown, or @lotics/shared", () => {
+  it("no primitive imports posthog, lingui, ai-sdk, or @lotics/shared", () => {
     const violations: string[] = [];
     for (const file of listTopLevelSourceFiles()) {
       const src = fs.readFileSync(file, "utf-8");

package/src/radio_picker.tsx

@@ -1,6 +1,7 @@
 import { useCallback, useRef } from "react";
 import { View } from "react-native";
 import { colors } from "./colors";
+import { CONTROL_RADIUS } from "./control_surface";
 import { Text } from "./text";
 import { PressableHighlight } from "./pressable_highlight";
 import { Icon } from "./icon";
@@ -120,7 +121,7 @@ function RadioOption<T extends string | number | symbol>(
         flexDirection: "row",
         alignItems: "center",
         padding: compact ? 8 : 12,
-        borderRadius: 8,
+        borderRadius: CONTROL_RADIUS,
         gap: compact ? 8 : 16,
       }}
       onPress={handlePress}

package/src/range_slider.tsx

@@ -24,7 +24,7 @@ export interface RangeSliderProps {
 type Thumb = "low" | "high";
 
 /**
- * A short human summary of a range selection for a `FilterPill` preview —
+ * A short human summary of a range selection for a `FilterChip` preview —
  * "5tr–10tr", or "≥ 5tr" / "≤ 10tr" when one end sits at its bound, and
  * `undefined` at the full range (no active filter). Mirrors `columnFilterSummary`.
  */

package/src/review_card.tsx

@@ -79,7 +79,7 @@ export function ReviewCard(props: ReviewCardProps) {
         <Text size="sm" weight="medium" color="muted" numberOfLines={1}>
           {accepted ? props.acceptedLabel ?? "Accepted" : props.dismissedLabel ?? "Dismissed"}
         </Text>
-        {props.onUndo ? <Button title="Undo" color="muted" shape="rounded" onPress={props.onUndo} /> : null}
+        {props.onUndo ? <Button title="Undo" color="muted" onPress={props.onUndo} /> : null}
       </View>
     );
   }
@@ -132,7 +132,7 @@ export function ReviewCard(props: ReviewCardProps) {
         <View style={styles.footer}>
           {actions.map((a, i) => {
             const kind = a.kind ?? (i === actions.length - 1 ? "primary" : "muted");
-            return <Button key={a.label} title={a.label} color={kind} shape="rounded" onPress={a.onPress} />;
+            return <Button key={a.label} title={a.label} color={kind} onPress={a.onPress} />;
           })}
         </View>
       ) : null}

package/src/scan_field.tsx

@@ -1,5 +1,6 @@
 import { StyleSheet, View } from "react-native";
 import { colors, solid } from "./colors";
+import { CONTROL_RADIUS } from "./control_surface";
 import { Text } from "./text";
 import { TextInputField } from "./text_input_field";
 
@@ -52,7 +53,7 @@ export function ScanField(props: ScanFieldProps) {
 
 const styles = StyleSheet.create({
   field: {
-    borderRadius: 10,
+    borderRadius: CONTROL_RADIUS,
     backgroundColor: colors.white,
   },
 });

package/src/scored_option.tsx

@@ -94,7 +94,6 @@ export function ScoredOption(props: ScoredOptionProps) {
             title={selected ? "Selected" : selectLabel ?? "Choose"}
             icon={selected ? "check" : undefined}
             color={selected ? "secondary" : "primary"}
-            shape="rounded"
             onPress={onSelect}
           />
         </View>

package/src/search_input.tsx

@@ -9,6 +9,7 @@ import {
   type ViewStyle,
 } from "react-native";
 import { colors } from "./colors";
+import { CONTROL_RADIUS } from "./control_surface";
 import { TextInputField } from "./text_input_field";
 
 type SearchInputProps = Omit<
@@ -57,7 +58,7 @@ export function SearchInput(props: SearchInputProps) {
 
 const styles = StyleSheet.create({
   // Search reads as a view-control by its leading search glyph + white fill —
-  // NOT by a distinct shape. It shares the rounded-8 radius of every other
+  // NOT by a distinct shape. It shares the kit-wide `CONTROL_RADIUS` of every other
   // input/picker (TextInputField, Combobox, the date filter), so a toolbar of
   // controls reads as one consistent band. The white fill still pops against
   // the zinc-50 canvas where most toolbars live; a zinc-300 border (one step up
@@ -65,7 +66,7 @@ const styles = StyleSheet.create({
   // the fill alone would vanish. 40px (TextInputField default) — the system
   // control height every band aligns to.
   search: {
-    borderRadius: 8,
+    borderRadius: CONTROL_RADIUS,
     backgroundColor: colors.white,
     // A thin 1px resting border (TextInputField's default width) — interaction
     // emphasis comes from the input's own focus outline, so it stays quiet at

package/src/segmented_control.tsx

@@ -3,6 +3,7 @@ import { StyleSheet, View, type StyleProp, type ViewStyle } from "react-native";
 import { PressableHighlight } from "./pressable_highlight";
 import { Text } from "./text";
 import { colors, withAlpha } from "./colors";
+import { CONTROL_RADIUS } from "./control_surface";
 
 export interface SegmentOption<T extends string> {
   label: string;
@@ -183,7 +184,7 @@ const styles = StyleSheet.create({
     height: 40,
     gap: 2,
     padding: 3,
-    borderRadius: 10,
+    borderRadius: CONTROL_RADIUS,
     backgroundColor: colors.zinc["100"],
   },
   trackDisabled: {

package/src/status_badge.tsx

@@ -2,6 +2,7 @@ import { useEffect, useRef } from "react";
 import { View, StyleSheet, Animated, Easing } from "react-native";
 import { Text } from "./text";
 import { colors } from "./colors";
+import { CONTROL_RADIUS } from "./control_surface";
 
 interface StatusBadgeProps {
   enabled: boolean;
@@ -69,7 +70,7 @@ const styles = StyleSheet.create({
     gap: 8,
     paddingVertical: 4,
     paddingHorizontal: 8,
-    borderRadius: 8,
+    borderRadius: CONTROL_RADIUS,
   },
   dotWrapper: {
     width: 10,

package/src/stepper.tsx

@@ -155,8 +155,9 @@ export function Step(props: StepProps) {
 
 // The node — status drives fill, never size. Monochrome: reached fills with ink,
 // the current step is a ring around white (pulsing when live), what's ahead is a
-// faint grey ring, the terminal is a checked fill.
-function Marker({ status, color, live }: { status: StepStatus; color: string; live: boolean }) {
+// faint grey ring, the terminal is a checked fill. Exported so `AgentRun` reuses
+// the exact same dot in its flat activity rows.
+export function Marker({ status, color, live }: { status: StepStatus; color: string; live: boolean }) {
   if (status === "done") {
     // A passed step: filled in the accent ink with a white check.
     return (

package/src/switch_button.tsx

@@ -3,6 +3,7 @@ import { Text } from "./text";
 import { Switch, type SwitchProps } from "./switch";
 import { PressableHighlight } from "./pressable_highlight";
 import { Icon, type IconName } from "./icon";
+import { CONTROL_RADIUS } from "./control_surface";
 
 export interface SwitchButtonProps extends SwitchProps {
   icon?: IconName;
@@ -22,7 +23,7 @@ export function SwitchButton(props: SwitchButtonProps) {
         paddingVertical: 4,
         paddingLeft: 8,
         paddingRight: 6,
-        borderRadius: 8,
+        borderRadius: CONTROL_RADIUS,
       }}
       onPress={() => onChange?.(!value)}
       tooltip={tooltip}

package/src/switcher.tsx

@@ -7,6 +7,7 @@ import { Popover, PopoverContent, PopoverTrigger } from "./popover";
 import { Stack } from "./stack";
 import { Text } from "./text";
 import { colors } from "./colors";
+import { CONTROL_HEIGHT, CONTROL_RADIUS } from "./control_surface";
 
 export interface SwitcherItem {
   id: string;
@@ -100,9 +101,9 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     alignItems: "center",
     gap: 6,
+    height: CONTROL_HEIGHT,
     paddingHorizontal: 10,
-    paddingVertical: 6,
-    borderRadius: 8,
+    borderRadius: CONTROL_RADIUS,
   },
   popoverBody: {
     minWidth: 220,

package/src/tabs.tsx

@@ -3,6 +3,7 @@ import { View } from "react-native";
 import { PressableHighlight } from "./pressable_highlight";
 import { Text } from "./text";
 import { colors } from "./colors";
+import { CONTROL_RADIUS } from "./control_surface";
 
 export interface TabOption<T extends string> {
   label: string;
@@ -138,7 +139,7 @@ function TabButton<T extends string>(props: TabButtonProps<T>) {
             style={{
               paddingVertical: 8,
               paddingHorizontal: 16,
-              borderRadius: 8,
+              borderRadius: CONTROL_RADIUS,
               backgroundColor: pressed
                 ? colors.zinc["100"]
                 : hovered

package/src/tag_input.tsx

@@ -1,6 +1,7 @@
 import { useMemo, useRef, useState } from "react";
 import { Pressable, ScrollView, StyleSheet, View, type StyleProp, type ViewStyle } from "react-native";
 import { colors } from "./colors";
+import { CONTROL_RADIUS } from "./control_surface";
 import { Text } from "./text";
 import { Icon } from "./icon";
 import { TextInputField } from "./text_input_field";
@@ -161,7 +162,7 @@ const styles = StyleSheet.create({
     paddingVertical: 5,
     borderWidth: 1,
     borderColor: colors.border,
-    borderRadius: 8,
+    borderRadius: CONTROL_RADIUS,
     backgroundColor: colors.background,
   },
   chip: {