@lotics/ui 5.7.0 → 5.9.0

package/src/file_thumbnail.tsx

@@ -2,6 +2,7 @@ import { FileBadge, resolveMime } from "./file_badge";
 import { fontFamilySemiBold } from "./text_utils";
 import { Text } from "./text";
 import { Icon, type IconName } from "./icon";
+import { IconButton } from "./icon_button";
 import { Checkbox } from "./checkbox";
 import { ActivityIndicator } from "./activity_indicator";
 import { colors } from "./colors";
@@ -70,6 +71,8 @@ interface FileThumbnailProps {
   /** While true, dims the thumbnail with a spinner — the file is still uploading
    *  (the local preview shows immediately; this marks it as in-flight). */
   uploading?: boolean;
+  /** Marks the file as a document TEMPLATE — adds a "TMPL" badge (any file type). */
+  isTemplate?: boolean;
 }
 
 /**
@@ -77,7 +80,7 @@ interface FileThumbnailProps {
  * Works with any file source via DisplayFile interface.
  */
 export function FileThumbnail(props: FileThumbnailProps) {
-  const { file, size, onPress, onLongPress, onRemove, selected, uploading } = props;
+  const { file, size, onPress, onLongPress, onRemove, selected, uploading, isTemplate } = props;
 
   const rootStyle =
     size !== undefined ? { width: size, height: size } : { width: "100%" as const, aspectRatio: 1 };
@@ -101,6 +104,7 @@ export function FileThumbnail(props: FileThumbnailProps) {
         <DocumentBadge
           mimeType={file.mimeType}
           size={size}
+          isTemplate={isTemplate}
           onPress={onPress ?? (() => Linking.openURL(file.url))}
           onLongPress={onLongPress}
         />
@@ -126,6 +130,7 @@ export function FileThumbnail(props: FileThumbnailProps) {
           mimeType={file.mimeType}
           filename={file.filename}
           size={size}
+          isTemplate={isTemplate}
           onPress={onPress ?? (() => Linking.openURL(file.url))}
           onLongPress={onLongPress}
         />
@@ -157,7 +162,7 @@ const uploadingOverlayStyles = StyleSheet.create({
     alignItems: "center",
     justifyContent: "center",
     backgroundColor: "rgba(24,24,27,0.42)",
-    borderRadius: 8,
+    borderRadius: 10,
   },
 });
 
@@ -190,42 +195,44 @@ interface DocumentCardProps {
   mimeType: string;
   filename: string;
   size?: number;
+  isTemplate?: boolean;
   onPress?: () => void;
   onLongPress?: () => void;
   overlay?: React.ReactNode;
 }
 
 /**
- * Document preview card: placeholder lines (future: file preview) + footer with filename and type label.
+ * Document tile: the file-type badge centered with the filename directly below
+ * it (no divider, no footer box). The badge scales with the tile and carries the
+ * type, color, and the TMPL marker. For readable filenames in a list, reach for
+ * `FileRow` (horizontal) instead.
  */
 export function DocumentCard(props: DocumentCardProps) {
-  const { mimeType, filename, size, onPress, onLongPress, overlay } = props;
-  const { label, color } = resolveMime(mimeType);
+  const { mimeType, filename, size, isTemplate, onPress, onLongPress, overlay } = props;
 
   const sizeStyle =
     size !== undefined
       ? { width: size, height: size }
       : { width: "100%" as const, height: "100%" as const };
 
+  // Badge takes ~40% of the tile, clamped so tiny/huge tiles stay tasteful.
+  const badgeSize = size !== undefined ? Math.max(30, Math.min(60, Math.round(size * 0.4))) : 40;
+
   return (
-    <Pressable style={[styles.documentCard, sizeStyle]} onPress={onPress} onLongPress={onLongPress}>
-      <View style={styles.documentCardBody}>
-        <View style={styles.placeholderLines}>
-          <View style={styles.placeholderLine} />
-          <View style={styles.placeholderLine} />
-          <View style={[styles.placeholderLine, { width: "60%" }]} />
-          <View style={styles.placeholderLine} />
-          <View style={[styles.placeholderLine, { width: "40%" }]} />
-        </View>
-      </View>
-      <View style={styles.documentCardFooter}>
-        <Text size="xs" numberOfLines={1} color="zinc-500" userSelect="none">
-          {filename}
-        </Text>
-        <View style={[styles.typeLabel, { backgroundColor: color }]}>
-          <RNText style={styles.typeLabelText}>{label}</RNText>
-        </View>
-      </View>
+    <Pressable
+      style={(state) => [
+        styles.documentTile,
+        sizeStyle,
+        (state as { hovered?: boolean }).hovered && styles.tileHovered,
+        state.pressed && styles.tilePressed,
+      ]}
+      onPress={onPress}
+      onLongPress={onLongPress}
+    >
+      <FileBadge mimeType={mimeType} size={badgeSize} isTemplate={isTemplate} />
+      <Text size="xs" numberOfLines={1} color="zinc-500" style={styles.documentTileName} userSelect="none">
+        {filename}
+      </Text>
       {overlay}
     </Pressable>
   );
@@ -262,7 +269,7 @@ export function MediaCard(props: MediaCardProps) {
     const iconSize = Math.max(12, Math.round(size * 0.55));
     return (
       <Pressable
-        style={[styles.mediaCardCompact, sizeStyle, { backgroundColor: color }]}
+        style={({ pressed }) => [styles.mediaCardCompact, sizeStyle, { backgroundColor: color }, pressed && styles.pressedDim]}
         onPress={onPress}
         onLongPress={onLongPress}
       >
@@ -277,20 +284,25 @@ export function MediaCard(props: MediaCardProps) {
 
   return (
     <Pressable style={[styles.documentCard, sizeStyle]} onPress={onPress} onLongPress={onLongPress}>
-      <View style={[styles.mediaCardBody, { backgroundColor: color }]}>
-        <View style={[styles.mediaIconBackdrop, { width: backdrop, height: backdrop, borderRadius: backdrop / 2 }]}>
-          <Icon name={icon} size={iconSize} color={colors.white} />
-        </View>
-      </View>
-      <View style={styles.documentCardFooter}>
-        <Text size="xs" numberOfLines={1} color="zinc-500" userSelect="none">
-          {filename}
-        </Text>
-        <View style={[styles.typeLabel, { backgroundColor: color }]}>
-          <RNText style={styles.typeLabelText}>{label}</RNText>
-        </View>
-      </View>
-      {overlay}
+      {(state) => (
+        <>
+          <View style={[styles.mediaCardBody, { backgroundColor: color }]}>
+            <View style={[styles.mediaIconBackdrop, { width: backdrop, height: backdrop, borderRadius: backdrop / 2 }]}>
+              <Icon name={icon} size={iconSize} color={colors.white} />
+            </View>
+          </View>
+          <View style={styles.documentCardFooter}>
+            <Text size="xs" numberOfLines={1} color="zinc-500" userSelect="none">
+              {filename}
+            </Text>
+            <View style={[styles.typeLabel, { backgroundColor: color }]}>
+              <RNText style={styles.typeLabelText}>{label}</RNText>
+            </View>
+          </View>
+          {overlay}
+          <TileScrim hovered={(state as { hovered?: boolean }).hovered} pressed={state.pressed} />
+        </>
+      )}
     </Pressable>
   );
 }
@@ -321,22 +333,31 @@ function ImageThumbnail(props: ImageThumbnailProps) {
       : { width: "100%" as const, height: "100%" as const };
 
   return (
-    <Pressable
-      onPress={onPress}
-      onLongPress={onLongPress}
-      style={[styles.imageThumbnail, sizeStyle]}
-    >
-      <Image
-        source={{ uri: url }}
-        style={styles.image}
-        resizeMode="cover"
-        onError={() => setUseFallback(true)}
-      />
+    <Pressable onPress={onPress} onLongPress={onLongPress} style={[styles.imageThumbnail, sizeStyle]}>
+      {(state) => (
+        <>
+          <Image
+            source={{ uri: url }}
+            style={styles.image}
+            resizeMode="cover"
+            onError={() => setUseFallback(true)}
+          />
+          <TileScrim hovered={(state as { hovered?: boolean }).hovered} pressed={state.pressed} />
+        </>
+      )}
     </Pressable>
   );
 }
 
-export function RemoveButton({ onPress }: { onPress: () => void }) {
+/** Hover/press feedback for image and media tiles: a subtle darkening scrim
+ *  ON TOP of the image/colored body (a bg wash would sit under it). Renders
+ *  nothing at rest, so it never tints the tile until pointed at. */
+function TileScrim({ hovered, pressed }: { hovered?: boolean; pressed: boolean }) {
+  if (!hovered && !pressed) return null;
+  return <View style={[styles.tileScrim, pressed && styles.tileScrimPressed]} pointerEvents="none" />;
+}
+
+export function RemoveButton({ onPress, label = "Remove" }: { onPress: () => void; label?: string }) {
   const handlePress = useCallback(
     (e: GestureResponderEvent) => {
       e.stopPropagation();
@@ -345,9 +366,9 @@ export function RemoveButton({ onPress }: { onPress: () => void }) {
     [onPress],
   );
   return (
-    <Pressable onPress={handlePress} style={styles.removeButton}>
-      <Icon name="x" size={14} color={colors.zinc[700]} />
-    </Pressable>
+    <View style={styles.removeButtonAnchor}>
+      <IconButton icon="x" size="sm" elevated accessibilityLabel={label} onPress={handlePress} />
+    </View>
   );
 }
 
@@ -370,16 +391,53 @@ function SelectionOverlay({ selected }: { selected: boolean }) {
 
 const styles = StyleSheet.create({
   documentCard: {
-    borderRadius: 8,
+    borderRadius: 10,
     backgroundColor: colors.white,
     borderWidth: 1,
     borderColor: colors.zinc["200"],
     overflow: "hidden",
   },
-  documentCardBody: {
-    flex: 1,
+  documentTile: {
+    borderRadius: 10,
+    backgroundColor: colors.white,
+    borderWidth: 1,
+    borderColor: colors.zinc["200"],
+    overflow: "hidden",
+    alignItems: "center",
     justifyContent: "center",
-    padding: 10,
+    gap: 8,
+    paddingHorizontal: 8,
+    paddingVertical: 10,
+    ...({ transitionDuration: "0.1s", transitionProperty: "background-color" } as object),
+  },
+  documentTileName: {
+    alignSelf: "stretch",
+    textAlign: "center",
+  },
+  // Hover/press feedback: doc tiles darken their white bg (wash); image/media
+  // tiles get a `TileScrim` ON TOP (a bg wash would sit under the image/body).
+  tileHovered: {
+    backgroundColor: colors.zinc["50"],
+  },
+  tilePressed: {
+    backgroundColor: colors.zinc["100"],
+  },
+  tileScrim: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    borderRadius: 10,
+    backgroundColor: "rgba(24, 24, 27, 0.06)",
+    ...({ transitionDuration: "0.1s", transitionProperty: "background-color" } as object),
+  },
+  tileScrimPressed: {
+    backgroundColor: "rgba(24, 24, 27, 0.12)",
+  },
+  // Compact media badges (≤32px) are too small for a scrim — a quick opacity dim reads.
+  pressedDim: {
+    opacity: 0.85,
   },
   mediaCardBody: {
     flex: 1,
@@ -387,7 +445,7 @@ const styles = StyleSheet.create({
     alignItems: "center",
   },
   mediaCardCompact: {
-    borderRadius: 6,
+    borderRadius: 7,
     alignItems: "center",
     justifyContent: "center",
     overflow: "hidden",
@@ -397,14 +455,6 @@ const styles = StyleSheet.create({
     justifyContent: "center",
     backgroundColor: "rgba(255, 255, 255, 0.22)",
   },
-  placeholderLines: {
-    gap: 4,
-  },
-  placeholderLine: {
-    height: 2,
-    borderRadius: 1,
-    backgroundColor: colors.zinc["200"],
-  },
   documentCardFooter: {
     gap: 2,
     paddingHorizontal: 8,
@@ -427,25 +477,17 @@ const styles = StyleSheet.create({
     letterSpacing: 0.3,
   },
   imageThumbnail: {
-    borderRadius: 8,
+    borderRadius: 10,
     overflow: "hidden",
   },
   image: {
     width: "100%",
     height: "100%",
   },
-  removeButton: {
+  removeButtonAnchor: {
     position: "absolute",
-    top: -6,
-    right: -6,
-    width: 22,
-    height: 22,
-    alignItems: "center",
-    justifyContent: "center",
-    borderRadius: 999,
-    borderWidth: 1,
-    borderColor: colors.border,
-    backgroundColor: colors.zinc["50"],
+    top: -8,
+    right: -8,
     zIndex: 1,
   },
   selectionOverlay: {
@@ -454,7 +496,7 @@ const styles = StyleSheet.create({
     left: 0,
     right: 0,
     bottom: 0,
-    borderRadius: 8,
+    borderRadius: 10,
     zIndex: 1,
   },
   selectionOverlaySelected: {

package/src/file_thumbnail_grid.tsx

@@ -1,8 +1,9 @@
 // Pure, reusable thumbnail-grid layout + a file-specific specialization.
 //
-// `ThumbnailGrid<T>` is the layout engine (three mutually-exclusive modes:
-// compact / fixed-columns / auto-columns, with `maxVisible` overflow). It is
-// item-agnostic — pass `renderItem`. `FileThumbnailGrid` is the common case:
+// `ThumbnailGrid<T>` is the layout engine — a flat wrap with two sizing models:
+// EXACT (`itemSize`, fixed small tiles) or FILL (default / `columns`, uniform
+// tiles that span the container width, short last row left-aligned), plus
+// `maxVisible` overflow. It is item-agnostic — pass `renderItem`. `FileThumbnailGrid` is the common case:
 // a grid of `DisplayFile`s rendered with `FileThumbnail` (any file type —
 // image/video/audio/doc — via FileThumbnail's own type handling).
 //
@@ -10,27 +11,36 @@
 // upload-progress thumbnails) composes `ThumbnailGrid` with its own renderItem,
 // so the layout lives in exactly one place.
 import React, { useState } from "react";
-import { View, StyleSheet, type ViewStyle } from "react-native";
+import { View, Pressable, StyleSheet, type ViewStyle } from "react-native";
 import { Text } from "./text";
-import { FileThumbnail, type DisplayFile, THUMBNAIL_SIZE } from "./file_thumbnail";
+import { colors } from "./colors";
+import { FileThumbnail, type DisplayFile, THUMBNAIL_SIZE, COMPACT_THUMBNAIL_SIZE } from "./file_thumbnail";
 
 export interface ThumbnailGridProps<T> {
   items: T[];
   keyExtractor: (item: T) => string;
-  /** Render one item. `size` is passed in compact mode (fixed px); omitted in
-   *  column modes, where the item fills its flex cell. */
+  /** Render one item at the computed tile size (px) — always provided. */
   renderItem: (item: T, size?: number) => React.ReactNode;
-  /** Fixed pixel size per item → flat horizontal wrap. Takes precedence. */
+  /** EXACT tile size (px): tiles are exactly this, flat wrap. May leave space at
+   *  the row's right edge. Use for fixed small tiles; omit to fill the width. */
   itemSize?: number;
-  /** Fixed column count → items fill 1/N of the row width. */
+  /** FILL with a fixed column count: tiles take an equal 1/N share of the width
+   *  (so full rows span the container). Omit `itemSize` to use. */
   columns?: number;
-  /** Minimum item width for auto column count when neither itemSize nor columns
-   *  is set. Default 96. */
+  /** FILL target: when neither `itemSize` nor `columns` is set, the column count
+   *  is derived so each tile is ≥ this width and rows span the container. Default 96. */
   minItemWidth?: number;
   /** Gap between items. Default 8. */
   gap?: number;
-  /** Max items shown before a "+N" overflow indicator. */
+  /** Max items shown before a "+N" overflow indicator (wrap mode). */
   maxVisible?: number;
+  /** SINGLE non-wrapping row that fits as many tiles as the measured width allows,
+   *  reserving the last slot for a "+N" overflow tile. Sizes tiles by `itemSize`
+   *  (else `minItemWidth`). The responsive overflow pattern — never wraps. */
+  singleRow?: boolean;
+  /** Press handler for the "+N" overflow tile (receives the hidden count). When
+   *  omitted the tile is a passive indicator. */
+  onOverflowPress?: (hiddenCount: number) => void;
   /** Alignment of a partial last row. Default "start". */
   partialRowAlign?: "start" | "end";
   style?: ViewStyle;
@@ -50,6 +60,8 @@ export function ThumbnailGrid<T>(props: ThumbnailGridProps<T>) {
     minItemWidth = THUMBNAIL_SIZE,
     gap = 8,
     maxVisible,
+    singleRow,
+    onOverflowPress,
     partialRowAlign = "start",
     style,
     disablePress,
@@ -58,57 +70,79 @@ export function ThumbnailGrid<T>(props: ThumbnailGridProps<T>) {
 
   const [containerWidth, setContainerWidth] = useState(0);
 
-  const isCompact = itemSize !== undefined;
-  const dynamicColumns =
-    !isCompact && columns === undefined && containerWidth > 0
-      ? Math.max(1, Math.floor((containerWidth + gap) / (minItemWidth + gap)))
-      : undefined;
-  const effectiveColumns = columns ?? dynamicColumns;
-
-  const visible = maxVisible ? items.slice(0, maxVisible) : items;
-  const overflow = maxVisible ? Math.max(0, items.length - maxVisible) : 0;
-  const canRender = isCompact || columns !== undefined || containerWidth > 0;
-
   if (items.length === 0) return null;
 
-  const renderRows = (rowItems: T[], cols: number) => {
-    const rows: T[][] = [];
-    for (let i = 0; i < rowItems.length; i += cols) rows.push(rowItems.slice(i, i + cols));
-    return rows.map((row, rowIndex) => {
-      const spacers =
-        row.length < cols
-          ? Array.from({ length: cols - row.length }, (_, i) => (
-              <View key={`spacer-${i}`} style={styles.flexItem} />
-            ))
-          : null;
-      return (
-        <View key={rowIndex} style={[styles.row, { gap }]}>
-          {partialRowAlign === "end" && spacers}
-          {row.map((item) => (
-            <View key={keyExtractor(item)} style={styles.flexItem}>
-              {renderItem(item)}
+  // SINGLE-ROW fit-to-width: one non-wrapping row. Fit as many fixed-size tiles as
+  // the measured width allows, reserving the last slot for a "+N" overflow tile —
+  // the responsive overflow pattern (avatar stack / Finder / Figma). Needs a
+  // measured width pass.
+  if (singleRow) {
+    const size = itemSize ?? minItemWidth;
+    const fit = containerWidth > 0 ? Math.max(1, Math.floor((containerWidth + gap) / (size + gap))) : 0;
+    const hasOverflow = fit > 0 && items.length > fit;
+    const visibleCount = hasOverflow ? Math.max(1, fit - 1) : items.length;
+    const hidden = items.length - visibleCount;
+    return (
+      <View
+        style={[styles.singleRow, { gap }, style]}
+        pointerEvents={disablePress ? "none" : "auto"}
+        onLayout={(e) => setContainerWidth(e.nativeEvent.layout.width)}
+      >
+        {fit > 0 &&
+          items.slice(0, visibleCount).map((item) => (
+            <View key={keyExtractor(item)} style={{ width: size }}>
+              {renderItem(item, size)}
             </View>
           ))}
-          {partialRowAlign === "start" && spacers}
-        </View>
-      );
-    });
-  };
+        {fit > 0 && hidden > 0 && (
+          <OverflowTile
+            size={size}
+            count={hidden}
+            onPress={onOverflowPress ? () => onOverflowPress(hidden) : undefined}
+          />
+        )}
+        {footer}
+      </View>
+    );
+  }
+
+  // Two sizing models, both a flat wrap:
+  //  • Exact (`itemSize`): tiles are exactly that size — for fixed small tiles
+  //    (badges). The row may not reach the container's right edge.
+  //  • Fill (default, or `columns`): the column count comes from `columns` or is
+  //    derived from `minItemWidth`, then every tile takes an EQUAL share of the
+  //    width so full rows span the container exactly. A short last row keeps that
+  //    same tile size and is left-/right-aligned — no stretched tiles, no empty
+  //    spacer cells. Needs one measured layout pass before it can render.
+  const isExact = itemSize !== undefined;
+  const autoColumns =
+    containerWidth > 0 ? Math.max(1, Math.floor((containerWidth + gap) / (minItemWidth + gap))) : 0;
+  const cols = columns ?? autoColumns;
+  const fillSize =
+    cols > 0 && containerWidth > 0 ? Math.floor((containerWidth - (cols - 1) * gap) / cols) : 0;
+
+  const tileSize = isExact ? itemSize : fillSize;
+  const canRender = tileSize > 0;
+
+  const visible = maxVisible ? items.slice(0, maxVisible) : items;
+  const overflow = maxVisible ? Math.max(0, items.length - maxVisible) : 0;
 
   return (
     <View
-      style={[isCompact && styles.compactContainer, { gap }, style]}
+      style={[
+        styles.container,
+        { gap, justifyContent: partialRowAlign === "end" ? "flex-end" : "flex-start" },
+        style,
+      ]}
       pointerEvents={disablePress ? "none" : "auto"}
       onLayout={(e) => setContainerWidth(e.nativeEvent.layout.width)}
     >
       {canRender &&
-        (isCompact
-          ? visible.map((item) => (
-              <React.Fragment key={keyExtractor(item)}>{renderItem(item, itemSize)}</React.Fragment>
-            ))
-          : effectiveColumns !== undefined
-            ? renderRows(visible, effectiveColumns)
-            : null)}
+        visible.map((item) => (
+          <View key={keyExtractor(item)} style={{ width: tileSize }}>
+            {renderItem(item, tileSize)}
+          </View>
+        ))}
 
       {overflow > 0 && (
         <Text size="sm" color="muted" userSelect="none">
@@ -128,6 +162,8 @@ export interface FileThumbnailGridProps {
   minItemWidth?: number;
   gap?: number;
   maxVisible?: number;
+  singleRow?: boolean;
+  onOverflowPress?: (hiddenCount: number) => void;
   partialRowAlign?: "start" | "end";
   style?: ViewStyle;
   disablePress?: boolean;
@@ -158,8 +194,47 @@ export function FileThumbnailGrid(props: FileThumbnailGridProps) {
   );
 }
 
+/** The "+N" overflow cell: a same-size tile showing the hidden count. Clickable
+ *  when `onPress` is given (the host opens a gallery / expands), else passive. */
+function OverflowTile({ size, count, onPress }: { size: number; count: number; onPress?: () => void }) {
+  const compact = size <= COMPACT_THUMBNAIL_SIZE;
+  const box = { width: size, height: size, borderRadius: compact ? 7 : 10 };
+  const label = (
+    <Text size={compact ? "xs" : "sm"} weight="medium" color="zinc-700" userSelect="none">
+      +{count}
+    </Text>
+  );
+  if (!onPress) {
+    return <View style={[styles.overflowTile, box]}>{label}</View>;
+  }
+  return (
+    <Pressable
+      onPress={onPress}
+      accessibilityRole="button"
+      accessibilityLabel={`+${count}`}
+      style={(state) => [
+        styles.overflowTile,
+        box,
+        (state as { hovered?: boolean }).hovered && styles.overflowHovered,
+        state.pressed && styles.overflowPressed,
+      ]}
+    >
+      {label}
+    </Pressable>
+  );
+}
+
 const styles = StyleSheet.create({
-  compactContainer: { flexDirection: "row", flexWrap: "wrap", userSelect: "none" },
-  row: { flexDirection: "row" },
-  flexItem: { flex: 1 },
+  container: { flexDirection: "row", flexWrap: "wrap", userSelect: "none" },
+  singleRow: { flexDirection: "row", alignItems: "center", userSelect: "none" },
+  overflowTile: {
+    backgroundColor: colors.zinc["100"],
+    borderWidth: 1,
+    borderColor: colors.zinc["200"],
+    alignItems: "center",
+    justifyContent: "center",
+    ...({ transitionDuration: "0.1s", transitionProperty: "background-color" } as object),
+  },
+  overflowHovered: { backgroundColor: colors.zinc["200"] },
+  overflowPressed: { backgroundColor: colors.zinc["300"] },
 });

package/src/{filter_pill.tsx → filter_chip.tsx}

@@ -4,11 +4,11 @@ import { Text } from "./text";
 import { Icon } from "./icon";
 import { colors } from "./colors";
 import { LinkButton } from "./link_button";
-import { PillButton } from "./pill_button";
+import { Chip } from "./chip";
 import { Popover, PopoverTrigger, PopoverContent, PopoverFooter } from "./popover";
 import type { PopoverSide, PopoverAlign } from "./popover";
 
-export interface FilterPillProps {
+export interface FilterChipProps {
   /** The dimension name — shown alone when inactive ("Owner"), prefixed when
    *  active ("Owner: Maria, James"). */
   label: string;
@@ -22,7 +22,7 @@ export interface FilterPillProps {
   /** Label for the clear affordances (pass a translated string). */
   clearLabel?: string;
   /** The editor revealed on press — a premium primitive (`RangeSlider`,
-   *  `Counter`, `PickerMenu` multi) or any composed control. `FilterPill` owns
+   *  `Counter`, `PickerMenu` multi) or any composed control. `FilterChip` owns
    *  the pill + popover chrome; the consumer owns the value and applies it.
    *  Pass a render function to receive `close` — the one editor that closes on
    *  action is single-select (`<PickerMenu>` → close on pick); range/counter/
@@ -39,7 +39,7 @@ export interface FilterPillProps {
 }
 
 /**
- * A short summary of a multi-select for a `FilterPill` preview — "Maria, James"
+ * A short summary of a multi-select for a `FilterChip` preview — "Maria, James"
  * up to `max` labels, else "N selected", and `undefined` when nothing is
  * chosen. The select sibling of `rangeSummary`.
  */
@@ -59,7 +59,7 @@ export function selectSummary(
  * filter dimension, the sibling of `ChipGroup` (which lays ONE hot dimension's
  * options out inline). Many dimensions stay scannable because each collapses to
  * a single pill: inactive reads "Label ⌄", active reads "Label: summary" with an
- * × to clear. `FilterPill` bakes the consistent chrome — the preview pill, a
+ * × to clear. `FilterChip` bakes the consistent chrome — the preview pill, a
  * padded popover body for the composed editor, and a Clear footer when active —
  * so every filter looks and behaves the same. Drop a premium primitive inside
  * (`RangeSlider`, `Counter`, `PickerMenu` multi). With `footer` (+ controlled
@@ -67,7 +67,7 @@ export function selectSummary(
  * setting gate with Cancel/Save — keeping it on the one pill surface. The table
  * toolbar's `ColumnFilter` is this pill plus its query-condition mapping.
  */
-export function FilterPill(props: FilterPillProps) {
+export function FilterChip(props: FilterChipProps) {
   const { label, summary, onClear, clearLabel = "Clear", children, side = "bottom", align = "start", open, onOpenChange, footer } = props;
   const active = summary != null && summary.length > 0;
   // The clear × / Clear footer only when there's a clearable selection AND no
@@ -87,12 +87,12 @@ export function FilterPill(props: FilterPillProps) {
   return (
     <Popover side={side} align={align} open={isOpen} onOpenChange={setOpen}>
       <PopoverTrigger>
-        <PillButton onDismiss={showClear ? onClear : undefined} dismissTooltip={clearLabel}>
+        <Chip onDismiss={showClear ? onClear : undefined} dismissTooltip={clearLabel}>
           <Text size="sm" weight="medium" color={active ? "zinc-900" : "zinc-700"} numberOfLines={1}>
             {active ? `${label}: ${summary}` : label}
           </Text>
           {!showClear ? <Icon name="chevron-down" size={14} color={colors.zinc["400"]} /> : null}
-        </PillButton>
+        </Chip>
       </PopoverTrigger>
       <PopoverContent style={styles.body} disableBodyScroll>
         {typeof children === "function" ? children({ close: () => setOpen(false) }) : children}

package/src/finding.tsx

@@ -81,7 +81,7 @@ export function Finding(props: FindingProps) {
       ) : null}
       {props.action ? (
         <View style={styles.actionRow}>
-          <Button title={props.action.label} color="secondary" shape="rounded" onPress={props.action.onPress} />
+          <Button title={props.action.label} color="secondary" onPress={props.action.onPress} />
         </View>
       ) : null}
     </View>