@lotics/ui 42.4.0 → 43.1.0

package/src/data_grid.tsx

@@ -185,7 +185,7 @@ const styles = StyleSheet.create({
   // Padded for the hover pill but zero-width in flow (negative margin), so the label
   // sits on its cell's edge instead of 8px inside it.
   sortLabel: { flexDirection: "row", alignItems: "center", gap: 4, paddingHorizontal: 6, marginHorizontal: -6, paddingVertical: 2, borderRadius: 6 },
-  sortLabelPressable: { cursor: "pointer" },
+  sortLabelPressable: { cursor: "auto" },
   sortLabelHover: { backgroundColor: colors.zinc[50] },
   groupSep: { borderTopWidth: 1, borderTopColor: colors.zinc[100], marginTop: 8, paddingTop: 8 },
   section: { flexDirection: "row", alignItems: "center", gap: 8, paddingHorizontal: 8, marginHorizontal: -8, paddingVertical: 7, borderRadius: 8 },

package/src/date_calendar.tsx

@@ -5,10 +5,10 @@ import { colors } from "./colors";
 import { useScreenSize } from "./use_screen_size";
 import { Picker, PickerOption } from "./picker";
 import { IconButton } from "./icon_button";
-import { FOCUS_RING } from "./control_surface";
+import { CURSOR_DEFAULT, FOCUS_RING } from "./control_surface";
 import { useFocusRing } from "./use_focus_ring";
 import { useLoticsLocale, useLocaleTag } from "./locale";
-import { nextRangeSelection } from "./date_range_selection";
+import { nextRangeSelection, previewEndFor } from "./date_range_selection";
 
 /** Accessible names for the calendar's month-navigation arrows. Backs the
  *  `calendar` locale slice. (The month/weekday NAMES come from `Intl` + the
@@ -18,13 +18,29 @@ export interface CalendarLabels {
   nextMonth: string;
 }
 
+/**
+ * One day: a full-width SLOT that carries the range bar, and a circle inside it
+ * that carries selection.
+ *
+ * Two layers because the two states have different shapes. A range is a
+ * CONTINUOUS band across the days it covers — cells drawn as separate rounded
+ * pills read as a row of unrelated chips, not as one span — while a selected day
+ * is a disc. So the slot paints the band edge to edge and rounds only where the
+ * span actually ends (`capStart` / `capEnd`, which the row computes from its
+ * neighbours, so a span wrapping to the next week caps at the row edge and
+ * resumes on the line below).
+ */
 function DayCell(props: {
   day: number;
   label: string;
   isActive: boolean;
-  inRange: boolean;
+  inSpan: boolean;
+  capStart: boolean;
+  capEnd: boolean;
   isToday: boolean;
   onPress: () => void;
+  onHoverIn?: () => void;
+  onHoverOut?: () => void;
 }) {
   const { focusVisible, focusProps } = useFocusRing();
   return (
@@ -35,24 +51,38 @@ function DayCell(props: {
       // build, and `selected` has no meaning on a `button` role regardless.
       aria-pressed={props.isActive}
       {...focusProps}
-      style={({ hovered }) => [
-        styles.dayCell,
-        props.inRange && styles.dayCellInRange,
-        props.isActive && styles.dayCellSelected,
-        hovered && !props.isActive && styles.dayCellHovered,
-        focusVisible && { boxShadow: FOCUS_RING },
+      style={[
+        styles.daySlot,
+        props.inSpan && styles.spanFill,
+        props.inSpan && props.capStart && styles.spanCapStart,
+        props.inSpan && props.capEnd && styles.spanCapEnd,
       ]}
       onPress={props.onPress}
+      onHoverIn={props.onHoverIn}
+      onHoverOut={props.onHoverOut}
     >
-      <Text
-        size="sm"
-        color={props.isActive ? "inverted" : "default"}
-        userSelect="none"
-        weight={props.isToday ? "semibold" : "regular"}
-      >
-        {props.day}
-      </Text>
-      {props.isToday && <View style={[styles.todayDot, props.isActive && styles.todayDotInverted]} />}
+      {({ hovered }: { hovered?: boolean }) => (
+        <View
+          style={[
+            styles.dayCircle,
+            props.isActive && styles.dayCircleSelected,
+            // A day already in the span keeps the band rather than fading under
+            // the pointer — the wash is lighter than the fill it would replace.
+            hovered && !props.isActive && !props.inSpan && styles.dayCircleHovered,
+            focusVisible && { boxShadow: FOCUS_RING },
+          ]}
+        >
+          <Text
+            size="sm"
+            color={props.isActive ? "inverted" : "default"}
+            userSelect="none"
+            weight={props.isToday ? "semibold" : "regular"}
+          >
+            {props.day}
+          </Text>
+          {props.isToday && <View style={[styles.todayDot, props.isActive && styles.todayDotInverted]} />}
+        </View>
+      )}
     </Pressable>
   );
 }
@@ -112,8 +142,18 @@ interface CalendarMonthProps {
   selectedDate: Date | null;
   rangeStart: Date | null;
   rangeEnd: Date | null;
+  /**
+   * The end a range WOULD have if the pointer stopped here — set while a range is
+   * open (a start, no end) and the pointer is over a day. It fills the span like
+   * a committed range without marking either end selected, so the feedback says
+   * "this is what you are about to pick", not "this is picked".
+   */
+  previewEnd?: Date | null;
   isRange: boolean;
   onDateSelect: (date: Date) => void;
+  /** The pointer entered (`true`) or left (`false`) a day. The OWNER decides what
+   *  that means — the leave of a day you already moved off is not a clear. */
+  onDayPointer?: (date: Date, entering: boolean) => void;
   onMonthChange: (year: number, month: number) => void;
   showNavigation?: boolean;
   /** Show only left arrow (for range mode left calendar) */
@@ -212,6 +252,12 @@ function isSameDay(date1: Date | null, date2: Date | null): boolean {
   );
 }
 
+/** A day's disc — one size in every state, so nothing grows under the pointer. */
+const DAY_DISC = 36;
+/** The narrowest a day's slot may be: the disc plus the air that keeps two
+ *  neighbouring discs apart. Seven of these is the month's minimum width. */
+const DAY_SLOT_MIN = DAY_DISC + 4;
+
 function isInRange(date: Date, start: Date | null, end: Date | null): boolean {
   if (!start || !end) return false;
   const time = date.getTime();
@@ -220,6 +266,18 @@ function isInRange(date: Date, start: Date | null, end: Date | null): boolean {
   return time > Math.min(startTime, endTime) && time < Math.max(startTime, endTime);
 }
 
+/**
+ * Between `start` and `end` INCLUSIVE, in either order — the span a range covers
+ * on screen.
+ *
+ * A single day is not a span: with both bounds on the same date the band would be
+ * a capsule drawn behind one disc, which says nothing the disc does not.
+ */
+function inClosedRange(date: Date, start: Date | null, end: Date | null | undefined): boolean {
+  if (!start || !end || isSameDay(start, end)) return false;
+  return isInRange(date, start, end) || isSameDay(date, start) || isSameDay(date, end);
+}
+
 function isToday(date: Date): boolean {
   const today = new Date();
   return isSameDay(date, today);
@@ -236,8 +294,10 @@ function CalendarMonth(props: CalendarMonthProps) {
     selectedDate,
     rangeStart,
     rangeEnd,
+    previewEnd,
     isRange,
     onDateSelect,
+    onDayPointer,
     onMonthChange,
     showNavigation = true,
     showLeftArrow = false,
@@ -384,35 +444,64 @@ function CalendarMonth(props: CalendarMonthProps) {
       </View>
 
       {/* Calendar grid */}
-      {weeks.map((week, weekIndex) => (
-        <View key={weekIndex} style={styles.weekRow}>
-          {week.map((day, dayIndex) => {
-            if (day === null) {
-              return <View key={dayIndex} style={styles.dayCell} />;
-            }
-
-            const date = new Date(year, month, day);
-            const isSelected = isSameDay(date, selectedDate);
-            const isRangeStart = isRange && isSameDay(date, rangeStart);
-            const isRangeEnd = isRange && isSameDay(date, rangeEnd);
-            const inRange = isRange && isInRange(date, rangeStart, rangeEnd);
-            const isTodayDate = isToday(date);
-            const isActive = isSelected || isRangeStart || isRangeEnd;
-
-            return (
-              <DayCell
-                key={dayIndex}
-                day={day}
-                label={names.formatDayLabel(date)}
-                isActive={isActive}
-                inRange={inRange}
-                isToday={isTodayDate}
-                onPress={() => onDateSelect(date)}
-              />
-            );
-          })}
-        </View>
-      ))}
+      {weeks.map((week, weekIndex) => {
+        // Whether each day of THIS row sits in the span — computed for the row
+        // before any cell renders, because a cell's rounded caps depend on what
+        // its neighbours are doing, not on itself.
+        //
+        // CLOSED at both ends: the band runs under the endpoint discs rather than
+        // starting after one and stopping before the other, which read as a
+        // selected day sitting outside the very span it bounds. (`isInRange` is
+        // strictly between, because it was written for a fill that the dark
+        // bounds capped.) It sorts its arguments, so hovering BACKWARDS from the
+        // start previews exactly as well as forwards.
+        const inSpans = week.map((day) => {
+          if (day === null || !isRange) return false;
+          const date = new Date(year, month, day);
+          return (
+            inClosedRange(date, rangeStart, rangeEnd) ||
+            inClosedRange(date, rangeStart, previewEnd)
+          );
+        });
+
+        return (
+          <View key={weekIndex} style={styles.weekRow}>
+            {week.map((day, dayIndex) => {
+              if (day === null) {
+                return <View key={dayIndex} style={styles.daySlot} />;
+              }
+
+              const date = new Date(year, month, day);
+              const isSelected = isSameDay(date, selectedDate);
+              const isRangeStart = isRange && isSameDay(date, rangeStart);
+              const isRangeEnd = isRange && isSameDay(date, rangeEnd);
+              const isTodayDate = isToday(date);
+              // The day under the pointer wears the SELECTED disc, because the
+              // preview answers "what do I get if I click here" and what you get
+              // is a selected end. A third, in-between shade would be a state the
+              // system does not otherwise have.
+              const isPreviewEnd = previewEnd != null && isSameDay(date, previewEnd);
+              const isActive = isSelected || isRangeStart || isRangeEnd || isPreviewEnd;
+
+              return (
+                <DayCell
+                  key={dayIndex}
+                  day={day}
+                  label={names.formatDayLabel(date)}
+                  isActive={isActive}
+                  inSpan={inSpans[dayIndex]}
+                  capStart={!inSpans[dayIndex - 1]}
+                  capEnd={!inSpans[dayIndex + 1]}
+                  isToday={isTodayDate}
+                  onPress={() => onDateSelect(date)}
+                  onHoverIn={onDayPointer ? () => onDayPointer(date, true) : undefined}
+                  onHoverOut={onDayPointer ? () => onDayPointer(date, false) : undefined}
+                />
+              );
+            })}
+          </View>
+        );
+      })}
     </View>
   );
 }
@@ -542,6 +631,27 @@ function RangeCalendar(props: RangeCalendarInternalProps) {
     [value, onValueChange],
   );
 
+  // The day under the pointer, so an OPEN range can show the span it would close
+  // on. Held here rather than per month, because the two calendars are one grid
+  // to a member dragging across a month boundary.
+  const [hoveredDate, setHoveredDate] = useState<Date | null>(null);
+
+  const handleDayPointer = useCallback((date: Date, entering: boolean) => {
+    if (entering) {
+      setHoveredDate(date);
+      return;
+    }
+    // Moving between cells fires the old cell's LEAVE and the new cell's ENTER in
+    // no guaranteed order, so an unconditional clear would blank the preview on
+    // every step across the grid. Clear only while this day is still the one
+    // being reported — which also means leaving the grid entirely does clear it.
+    setHoveredDate((current) => (current && isSameDay(current, date) ? null : current));
+  }, []);
+
+  // Shares its open-ness test with `nextRangeSelection`, so the span shown can
+  // never disagree with the one the next click produces.
+  const previewEnd = previewEndFor(value, hoveredDate);
+
   const handleMonthChange = useCallback((year: number, month: number) => {
     setLeftYear(year);
     setLeftMonth(month);
@@ -577,8 +687,10 @@ function RangeCalendar(props: RangeCalendarInternalProps) {
           selectedDate={null}
           rangeStart={value.start}
           rangeEnd={value.end}
+          previewEnd={previewEnd}
           isRange={true}
           onDateSelect={handleDateSelect}
+          onDayPointer={handleDayPointer}
           onMonthChange={handleMonthChange}
           showNavigation={true}
           firstDayOfWeek={firstDayOfWeek}
@@ -597,8 +709,10 @@ function RangeCalendar(props: RangeCalendarInternalProps) {
         selectedDate={null}
         rangeStart={value.start}
         rangeEnd={value.end}
+        previewEnd={previewEnd}
         isRange={true}
         onDateSelect={handleDateSelect}
+        onDayPointer={handleDayPointer}
         onMonthChange={handleMonthChange}
         showNavigation={false}
         showLeftArrow={true}
@@ -612,8 +726,10 @@ function RangeCalendar(props: RangeCalendarInternalProps) {
         selectedDate={null}
         rangeStart={value.start}
         rangeEnd={value.end}
+        previewEnd={previewEnd}
         isRange={true}
         onDateSelect={handleDateSelect}
+        onDayPointer={handleDayPointer}
         onMonthChange={handleMonthChange}
         showNavigation={false}
         showRightArrow={true}
@@ -653,36 +769,72 @@ const styles = StyleSheet.create({
   },
   weekHeader: {
     flexDirection: "row",
-    justifyContent: "space-around",
     borderBottomWidth: 1,
     borderBottomColor: colors.zinc["200"],
     paddingBottom: 8,
     marginBottom: 4,
   },
   dayHeaderCell: {
-    width: 36,
+    // Shares the day slots' sizing so the column heads stay over their columns.
+    flex: 1,
+    minWidth: DAY_SLOT_MIN,
     alignItems: "center",
     justifyContent: "center",
     height: 32,
   },
   weekRow: {
     flexDirection: "row",
-    justifyContent: "space-around",
+    // Rows are separated so one week's band cannot touch the next one's. Without
+    // it the bands meet edge to edge down the whole grid and a range that wraps
+    // reads as a single block rather than as a span that continues on the line
+    // below.
+    marginBottom: 2,
   },
-  dayCell: {
-    width: 36,
-    height: 36,
+  // The band's carrier, and the reason the grid FILLS its month rather than
+  // leaving slack at the right edge: seven equal shares of whatever width the
+  // month has, floored so the disc inside always has room to breathe.
+  //
+  // Cells sit EDGE TO EDGE — spaced apart, a range would paint as separate pills
+  // with gaps between them rather than as one span.
+  daySlot: {
+    cursor: CURSOR_DEFAULT,
+    flex: 1,
+    minWidth: DAY_SLOT_MIN,
+    height: DAY_DISC,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  spanFill: {
+    backgroundColor: colors.zinc["100"],
+  },
+  // Rounded only where the span actually ends — including at a row's edge, so a
+  // span that wraps closes on one line and reopens on the next.
+  spanCapStart: {
+    borderTopLeftRadius: 999,
+    borderBottomLeftRadius: 999,
+  },
+  spanCapEnd: {
+    borderTopRightRadius: 999,
+    borderBottomRightRadius: 999,
+  },
+  // The SAME size in every state, and narrower than the slot that holds it.
+  //
+  // The slots are edge to edge — that is what makes the band continuous — so a
+  // disc as wide as its slot would touch the disc beside it, which is what had
+  // the hovered day and the selected one meeting as a single lozenge. The room
+  // comes from the SLOT being wider, not from shrinking the disc, so the days
+  // stay the size they were and spread further apart as the month gets wider.
+  dayCircle: {
+    width: DAY_DISC,
+    height: DAY_DISC,
     alignItems: "center",
     justifyContent: "center",
     borderRadius: 999,
   },
-  dayCellSelected: {
+  dayCircleSelected: {
     backgroundColor: colors.zinc["800"],
   },
-  dayCellInRange: {
-    backgroundColor: colors.zinc["100"],
-  },
-  dayCellHovered: {
+  dayCircleHovered: {
     backgroundColor: colors.zinc["50"],
   },
   todayDot: {

package/src/date_filter.tsx

@@ -91,10 +91,9 @@ function RangeBound(props: {
   bound: { date: Date | null; time: string | null };
   includeTime: boolean;
   localeTag: string;
-  segmentLabels: SegmentLabels;
   onTimeChange: (time: string) => void;
 }) {
-  const { label, placeholder, bound, includeTime, localeTag, segmentLabels, onTimeChange } = props;
+  const { label, placeholder, bound, includeTime, localeTag, onTimeChange } = props;
   return (
     <View style={styles.rangeItem}>
       <Text size="xs" color="zinc-500">
@@ -111,7 +110,6 @@ function RangeBound(props: {
             disabled={!bound.date}
             accessibilityLabel={label}
             locale={localeTag}
-            segmentLabels={segmentLabels}
           />
         </View>
       )}
@@ -300,7 +298,6 @@ export function DateFilter(props: DateFilterProps) {
             bound={shown.start}
             includeTime={includeTime}
             localeTag={localeTag}
-            segmentLabels={labels}
             onTimeChange={handleStartTimeChange}
           />
           <RangeBound
@@ -309,7 +306,6 @@ export function DateFilter(props: DateFilterProps) {
             bound={shown.end}
             includeTime={includeTime}
             localeTag={localeTag}
-            segmentLabels={labels}
             onTimeChange={handleEndTimeChange}
           />
         </View>

package/src/date_picker.tsx

@@ -42,6 +42,8 @@ export interface DatePickerLabels extends SegmentLabels {
   clear: string;
   /** Accessible name for the calendar button. */
   openCalendar: string;
+  /** Accessible name for the clock button that opens the time list. */
+  chooseTime: string;
   /** Accessible name for the time field (single datetime). */
   time: string;
   /** Accessible name for the start-time field (datetime range). */

package/src/date_range_selection.ts

@@ -30,3 +30,21 @@ export function nextRangeSelection(
     ? { start: date, end: current.start }
     : { start: current.start, end: date };
 }
+
+/**
+ * The end a range would CLOSE on if the pointer stopped at `hovered` — what a
+ * calendar fills in to show the span before it is committed.
+ *
+ * `null` unless a range is actually open, and open is tested exactly the way
+ * {@link nextRangeSelection} tests it. That shared test is the point of putting
+ * this here: a preview that disagreed with the click would show a span the next
+ * click does not produce, and the two rules drifting apart is precisely what a
+ * second copy of "is a range open" would eventually do.
+ */
+export function previewEndFor(
+  current: DateRangeSelection,
+  hovered: Date | null,
+): Date | null {
+  if (!current.start || current.end) return null;
+  return hovered;
+}

package/src/date_segments.ts

@@ -57,6 +57,20 @@ export function emptyBuffer(): SegmentBuffer {
 // Distinct sample components (2023 / 01 / 02 / 13:45) so part mapping is reliable.
 const SAMPLE = new Date(2023, 0, 2, 13, 45, 0);
 
+/**
+ * The Intl options a TIME reads under — 12-vs-24-hour follows from the locale's
+ * own resolution of these, never from a flag we set.
+ *
+ * Exported because a time is rendered in two places that must agree: these
+ * segments, and the picker list that fills them (`time_options`). Two literals
+ * would drift the first time either changed, and the mismatch would show as one
+ * control saying 01:45 PM while the other says 13:45.
+ */
+export const TIME_FORMAT_OPTIONS: Intl.DateTimeFormatOptions = {
+  hour: "2-digit",
+  minute: "2-digit",
+};
+
 const FIELD_TYPE: Record<string, SegmentType | undefined> = {
   year: "year",
   month: "month",
@@ -123,7 +137,7 @@ export function getTimeLayout(locale: string): DateLayout {
   const cached = layoutCache.get(key);
   if (cached) return cached;
 
-  const dtf = new Intl.DateTimeFormat(locale, { hour: "2-digit", minute: "2-digit" });
+  const dtf = new Intl.DateTimeFormat(locale, TIME_FORMAT_OPTIONS);
   const hour12 = dtf.resolvedOptions().hour12 ?? false;
   const layout: DateLayout = {
     segments: partsToSegments(dtf.formatToParts(SAMPLE), hour12),

package/src/display_font.ts

@@ -0,0 +1,27 @@
+/**
+ * THE DISPLAY FACE — the family `<Text family="display">` renders in.
+ *
+ * A themeable typeface exists for the DISPLAY role and deliberately not for the
+ * body, and the asymmetry is the whole design. Swapping the face a headline
+ * wears is one value with no dependencies: it appears a handful of times, large,
+ * in one weight. Swapping the BODY face is four coupled things —
+ *
+ *   1. weight is a FAMILY here, not a `font-weight` (`Inter_400Regular` /
+ *      `Inter_500Medium` / `Inter_600SemiBold`), so one variable cannot say it;
+ *   2. `text.css` hand-tunes letter-spacing per size FOR Inter's glyphs and for
+ *      Vietnamese diacritics at 12px;
+ *   3. `font-feature-settings: "cv11","ss01","ss03"` are INTER's stylistic
+ *      alternates and mean nothing — or something else — on another face;
+ *   4. the files are self-hosted, so a family name nobody `@font-face`d falls
+ *      silently through the stack to system sans.
+ *
+ * — which is why there is no `bodyFont` role. A variable for it would not fail,
+ * it would render every screen in the product subtly miscalibrated, globally and
+ * invisibly to typecheck. Changing the body face is a KIT change: add the
+ * @font-face trio, re-tune the curve, re-check the features. Rare, deliberate,
+ * and done once for everybody.
+ */
+import { fontFamilySemiBold } from "./font_family";
+
+/** Native: a literal, because `var()` means nothing off the web. */
+export const fontFamilyDisplay = fontFamilySemiBold;

package/src/display_font.web.ts

@@ -0,0 +1,31 @@
+/**
+ * THE DISPLAY FACE — the family `<Text family="display">` renders in.
+ *
+ * A themeable typeface exists for the DISPLAY role and deliberately not for the
+ * body, and the asymmetry is the whole design. Swapping the face a headline
+ * wears is one value with no dependencies: it appears a handful of times, large,
+ * in one weight. Swapping the BODY face is four coupled things —
+ *
+ *   1. weight is a FAMILY here, not a `font-weight` (`Inter_400Regular` /
+ *      `Inter_500Medium` / `Inter_600SemiBold`), so one variable cannot say it;
+ *   2. `text.css` hand-tunes letter-spacing per size FOR Inter's glyphs and for
+ *      Vietnamese diacritics at 12px;
+ *   3. `font-feature-settings: "cv11","ss01","ss03"` are INTER's stylistic
+ *      alternates and mean nothing — or something else — on another face;
+ *   4. the files are self-hosted, so a family name nobody `@font-face`d falls
+ *      silently through the stack to system sans.
+ *
+ * — which is why there is no `bodyFont` role. A variable for it would not fail,
+ * it would render every screen in the product subtly miscalibrated, globally and
+ * invisibly to typecheck. Changing the body face is a KIT change: add the
+ * @font-face trio, re-tune the curve, re-check the features. Rare, deliberate,
+ * and done once for everybody.
+ */
+import { fontFamilySemiBold } from "./font_family";
+
+/**
+ * The default IS the kit's own semibold sans, so `family="display"` changes
+ * nothing until an app sets `displayFont` — the same opt-in contract the colour
+ * roles keep.
+ */
+export const fontFamilyDisplay = `var(--lotics-display-font, ${fontFamilySemiBold})`;

package/src/file_dropzone.tsx

@@ -5,7 +5,7 @@ import { Icon } from "./icon";
 import { Text } from "./text";
 import { pickFiles } from "./file_picker";
 import { FileDropTarget } from "./file_drop_target";
-import { FOCUS_RING } from "./control_surface";
+import { CURSOR_DEFAULT, FOCUS_RING } from "./control_surface";
 import { useFocusRing } from "./use_focus_ring";
 import { useLoticsLocale } from "./locale";
 
@@ -88,6 +88,7 @@ export function FileDropzone(props: FileDropzoneProps) {
           onHoverIn={() => setHovered(true)}
           onHoverOut={() => setHovered(false)}
           style={[
+            { cursor: CURSOR_DEFAULT },
             styles.zone,
             { minHeight: height },
             hovered && !dragging ? styles.zoneHovered : null,

package/src/file_row.tsx

@@ -3,7 +3,7 @@ import { Pressable, StyleSheet, View } from "react-native";
 import { Text } from "./text";
 import { colors } from "./colors";
 import { FileBadge } from "./file_badge";
-import { FOCUS_RING } from "./control_surface";
+import { CURSOR_DEFAULT, FOCUS_RING } from "./control_surface";
 import { useFocusRing } from "./use_focus_ring";
 import { useLoticsLocale } from "./locale";
 
@@ -192,6 +192,6 @@ const styles = StyleSheet.create({
   rowHovered: { backgroundColor: colors.zinc["50"] },
   rowPressed: { backgroundColor: colors.zinc["100"] },
   // The accessible "Open" door — fills the row left of the trailing sibling.
-  door: { flex: 1, flexDirection: "row", alignItems: "center", gap: 12 },
+  door: { flex: 1, flexDirection: "row", alignItems: "center", gap: 12, cursor: CURSOR_DEFAULT },
   text: { flex: 1, gap: 1 },
 });

package/src/file_thumbnail.tsx

@@ -7,7 +7,7 @@ import { IconButton } from "./icon_button";
 import { Checkbox } from "./checkbox";
 import { ActivityIndicator } from "./activity_indicator";
 import { colors } from "./colors";
-import { FOCUS_RING } from "./control_surface";
+import { CURSOR_DEFAULT, FOCUS_RING } from "./control_surface";
 import { useFocusRing } from "./use_focus_ring";
 import { useLoticsLocale } from "./locale";
 import { useCallback, useState } from "react";
@@ -540,6 +540,7 @@ const styles = StyleSheet.create({
   // Fills the tile so the fade covers the whole body and nothing reflows.
   fadedBody: { width: "100%", height: "100%", opacity: 0.45 },
   documentCard: {
+    cursor: CURSOR_DEFAULT,
     borderRadius: 10,
     backgroundColor: colors.white,
     borderWidth: 1,
@@ -594,6 +595,7 @@ const styles = StyleSheet.create({
     alignItems: "center",
   },
   mediaCardCompact: {
+    cursor: CURSOR_DEFAULT,
     borderRadius: 7,
     alignItems: "center",
     justifyContent: "center",
@@ -626,6 +628,7 @@ const styles = StyleSheet.create({
     letterSpacing: 0.3,
   },
   imageThumbnail: {
+    cursor: CURSOR_DEFAULT,
     borderRadius: 10,
     overflow: "hidden",
   },

package/src/filter_chip.tsx

@@ -113,7 +113,10 @@ export function FilterChip(props: FilterChipProps) {
         <Chip onDismiss={showClear ? onClear : undefined} dismissTooltip={clearLabel}>
           {active && typeof summary !== "string" ? (
             <View style={styles.summaryRow}>
-              <Text userSelect="none" size="sm" weight="medium" color="zinc-700">{`${label}:`}</Text>
+              {/* This branch only renders when ACTIVE, so it takes the accent
+                  unconditionally — the two branches are one state seen twice, and
+                  they were drifting the moment only one of them was themed. */}
+              <Text userSelect="none" size="sm" weight="medium" style={{ color: colors.accent }}>{`${label}:`}</Text>
               {summary}
             </View>
           ) : (
@@ -121,7 +124,14 @@ export function FilterChip(props: FilterChipProps) {
               userSelect="none"
               size="sm"
               weight="medium"
-              color={active ? "zinc-900" : "zinc-700"}
+              // An APPLIED filter wears the accent; an empty one stays neutral.
+              // The pill already changed its words and grew a ×, but both are
+              // read only after you look AT it — the whole job of a filter bar is
+              // to answer "is anything on?" from across the screen, and ink is the
+              // only channel that carries at that distance. It is a state, not
+              // decoration, which is what makes it a legitimate place for brand.
+              color={active ? undefined : "zinc-700"}
+              style={active ? { color: colors.accent } : undefined}
               numberOfLines={1}
             >
               {active ? `${label}: ${summary}` : label}