@lotics/ui 12.1.1 → 12.1.2

package/docs/catalog.md

@@ -934,9 +934,11 @@ source (`src/<module>.tsx`/`.ts`) is the API reference.
   `ChangeRecord` (THE item card: registers like a Change; tone wash + localized op word;
   verb level follows the decision level) · `ChangeBand` (the raw ± band) ·
   `ChangeValueInput` (the diff-at-rest editor); the `changeReview` locale slice.
-- **`clarify`** — `Clarify`: the agent asks back, via `ChoiceList`.
-- **`choice_list`** — `ChoiceList` + `ChoiceOption`: selectable answer options, the agent's
-  quick-reply surface.
+- **`clarify`** — `Clarify`: the agent asks back — a borderless block (question + a
+  `ChoiceList`), no card wrapper.
+- **`choice_list`** — `ChoiceList` + `ChoiceOption`: selectable answer options as
+  divider-separated rows (no bordered cards) with a per-row focus ring + hover wash; the
+  agent's quick-reply surface.
 - **`sources`** — `Sources` + `SourceRef`/`SourceKind` (record | document | table | web |
   knowledge): provenance chips, per-kind glyphs.
 - **`finding`** — `Finding` + `FindingComparison` + `FindingSeverity`/`FindingLabels`: one

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "12.1.1",
+  "version": "12.1.2",
   "type": "module",
   "exports": {
     "./vite": {

package/src/choice_list.tsx

@@ -1,8 +1,10 @@
-import { StyleSheet, View } from "react-native";
+import { Pressable, View } from "react-native";
 import { colors } from "./colors";
 import { Text } from "./text";
 import { Icon } from "./icon";
-import { CardSelectItem } from "./card_select_item";
+import { Divider } from "./divider";
+import { useFocusRing } from "./use_focus_ring";
+import { FOCUS_RING } from "./control_surface";
 
 export interface ChoiceOption {
   label: string;
@@ -18,46 +20,55 @@ export interface ChoiceListProps {
   onSelect: (value: string) => void;
 }
 
+/** One selectable option — a role-less-free `Pressable` (its own accessible name
+ *  + selected state), hover wash + focus ring, no border. */
+function ChoiceRow({ option, selected, onSelect }: { option: ChoiceOption; selected: boolean; onSelect: (value: string) => void }) {
+  const { focusVisible, focusProps } = useFocusRing();
+  return (
+    <Pressable
+      accessibilityRole="button"
+      accessibilityLabel={option.label}
+      accessibilityState={{ selected }}
+      onPress={() => onSelect(option.value)}
+      {...focusProps}
+      style={({ hovered, pressed }) => [
+        { flexDirection: "row", alignItems: "center", gap: 12, paddingVertical: 14, paddingHorizontal: 6, borderRadius: 8 },
+        hovered || pressed ? { backgroundColor: colors.zinc[50] } : null,
+        focusVisible ? { boxShadow: FOCUS_RING } : null,
+      ]}
+    >
+      <View style={{ flex: 1, gap: 3, minWidth: 0 }}>
+        <Text size="sm" weight={selected ? "semibold" : "medium"}>
+          {option.label}
+        </Text>
+        {option.description ? (
+          <Text size="xs" color="muted">
+            {option.description}
+          </Text>
+        ) : null}
+      </View>
+      {selected ? <Icon name="check" size={17} color={colors.zinc[900]} /> : null}
+    </Pressable>
+  );
+}
+
 /**
- * A vertical set of selectable answer options — bordered cards with the global
- * focus/hover/selected ring (`CardSelectItem`), single-select and freely
- * switchable (pick a different option any time). The chosen card shows a check.
- * The agent's quick-reply surface (`Clarify` uses it) and any "pick one"
+ * A vertical set of selectable answer options — divider-separated rows (no
+ * bordered cards), each with its own focus ring + hover wash, single-select and
+ * freely switchable (pick a different option any time). The chosen row shows a
+ * check. The agent's quick-reply surface (`Clarify` uses it) and any "pick one"
  * question.
  */
 export function ChoiceList(props: ChoiceListProps) {
   const { options, value, onSelect } = props;
   return (
-    <View style={{ gap: 8 }}>
-      {options.map((o) => {
-        const selected = value === o.value;
-        return (
-          <CardSelectItem
-            key={o.value}
-            selected={selected}
-            onPress={() => onSelect(o.value)}
-            accessibilityLabel={o.label}
-            style={styles.item}
-          >
-            <View style={styles.text}>
-              <Text size="sm" weight="medium">
-                {o.label}
-              </Text>
-              {o.description ? (
-                <Text size="xs" color="muted">
-                  {o.description}
-                </Text>
-              ) : null}
-            </View>
-            {selected ? <Icon name="check" size={16} color={colors.zinc[900]} /> : null}
-          </CardSelectItem>
-        );
-      })}
+    <View>
+      {options.map((o, i) => (
+        <View key={o.value}>
+          {i > 0 ? <Divider /> : null}
+          <ChoiceRow option={o} selected={value === o.value} onSelect={onSelect} />
+        </View>
+      ))}
     </View>
   );
 }
-
-const styles = StyleSheet.create({
-  item: { flexDirection: "row", alignItems: "center", gap: 10, paddingVertical: 11, paddingHorizontal: 14 },
-  text: { flex: 1, gap: 2 },
-});

package/src/clarify.tsx

@@ -1,5 +1,4 @@
-import { StyleSheet, View } from "react-native";
-import { colors } from "./colors";
+import { View } from "react-native";
 import { Text } from "./text";
 import { ChoiceList, type ChoiceOption } from "./choice_list";
 
@@ -16,33 +15,24 @@ export interface ClarifyProps {
 }
 
 /**
- * The agent asks BACK — a question with selectable answer options (`ChoiceList`)
- * the human picks before the run continues, freely switchable until committed.
+ * The agent asks BACK — a question with selectable answer options the human picks
+ * before the run continues, freely switchable until committed. A borderless block
+ * (no card): the question, then divider-separated option rows (`ChoiceList`).
  * Human-in-the-loop input: when the agent is unsure, it clarifies instead of
- * guessing wrong. The run pauses on this and `onAnswer` resumes it. Pair with
- * `AgentRun` / `AgentProgress`.
+ * guessing wrong. Pair with `AgentRun` / `AgentProgress`.
  */
 export function Clarify(props: ClarifyProps) {
   return (
-    <View style={styles.card}>
-      <Text size="xs" color="muted" weight="medium">
-        Question
-      </Text>
-      <Text size="sm" weight="medium">
-        {props.question}
-      </Text>
+    <View style={{ gap: 14 }}>
+      <View style={{ gap: 4 }}>
+        <Text size="xs" color="muted" weight="medium">
+          Question
+        </Text>
+        <Text size="sm" weight="medium">
+          {props.question}
+        </Text>
+      </View>
       <ChoiceList options={props.options} value={props.answer} onSelect={props.onAnswer} />
     </View>
   );
 }
-
-const styles = StyleSheet.create({
-  card: {
-    borderWidth: 1,
-    borderColor: colors.border,
-    backgroundColor: colors.white,
-    borderRadius: 12,
-    padding: 16,
-    gap: 12,
-  },
-});