@lotics/ui 45.3.0 → 45.5.0

package/AGENTS.md

@@ -100,7 +100,7 @@ CURRENT major only — upgrading an app across majors is `MIGRATION.md`.
   `error={overdue ? … }` is the tell: it makes a date due tomorrow read like one due in three
   months. → [catalog.md §Dates & times](./docs/catalog.md).
 - **A third-party channel takes `BrandMark`, our own glyphs take `Icon`.** `@lotics/ui/brand_mark`
-  draws Facebook / Zalo / LinkedIn / Google Meet as solid single-colour silhouettes — a reader
+  draws Facebook / Zalo / LinkedIn / X / Google Meet as solid single-colour silhouettes — a reader
   scanning a feed recognises the logo before the word. The names are an allowlist, so a channel
   with no mark (a phone call, an event, a website) fails to typecheck and falls back to `Icon`
   instead of borrowing another company's logo. → [catalog.md §Text & formatting](./docs/catalog.md).

package/MIGRATION.md

@@ -4,6 +4,32 @@ Breaking changes, newest first — normally per major, plus the rare minor that
 anyway (recorded under its exact version). The current contract lives in `AGENTS.md` + `docs/`;
 this file exists only to move an app from one release to the next.
 
+## 45.5.0
+
+**`InlineSelect` and `InlineMemberSelect` are a `combobox`, not a `button`.** They rest as a
+`<div role="combobox">` carrying `aria-expanded`, where they rested as a `<button>`
+(`InlineMemberSelect` is built on `InlineSelect`, so it follows). Other inline fields are
+unchanged. Nothing to change in your code — but a test
+that reached one with `getByRole("button")` now finds nothing, and wants `getByRole("combobox")`.
+The old role was wrong twice over: it is not the pattern APG names for a control that holds a
+value and opens a list, and a `<button>` may not contain one, which is what kept a tag field's
+chips from carrying their own remove ✕.
+
+**A multi `InlineSelect`'s menu rows no longer fall back to `renderSelected`.** Pass
+`renderOptionContent` for custom rows; without it the list shows plain labels. `renderSelected`
+now means the removable RESTING chip and takes `(option, { remove })`, so borrowing it for the
+menu put a ✕ on every option in the list.
+
+**Every option list's rows sit 4px apart.** `OptionList` declared that spacing all along, but
+put it on the ScrollView's viewport rather than its content container, where it fell between
+nothing — so rows rendered flush and two adjacent SELECTED rows merged into one tinted block. Every
+selector that opens a list (`Select`, `Picker`, `InlineSelect`, the member pickers, menus) is now
+slightly taller for the same number of rows, and a list capped at its 320px max shows one fewer.
+
+**A multi `InlineSelect`'s chips follow the working set while its list is open** — the draft you
+are building, not the stored value. Ticking a row or pressing a chip's ✕ now shows immediately
+instead of at popover-close. The commit is unchanged: one write per visit, on close.
+
 **`FileRow`'s `leading` slot is a SIBLING of the press door, not inside it.** No API change;
 a row with `onPress` now has a slightly smaller press target, excluding the leading mark.
 

package/docs/catalog.md

@@ -476,12 +476,13 @@ source (`src/<module>.tsx`/`.ts`) is the API reference.
   `SubsectionHeading` instead. Pick between this and `Eyebrow` by what is LABELLED — a block or a
   value; composition.md § Eyebrow vs group lead has the table.
 - **`brand_mark`** — `BrandMark`: an OUTSIDE brand's mark, naming the channel a touchpoint
-  happened on — `facebook`, `zalo`, `linkedin`, `google-meet`. Solid single-colour silhouettes in
+  happened on — `facebook`, `zalo`, `linkedin`, `x`, `google-meet`. Solid single-colour silhouettes in
   each brand's own hex, not the full-colour logos: a byline draws these at 14–20px and a
   five-colour logo turns to mud there. `size` (default 16) and `muted` (draw in the text colour).
   The name list is an ALLOWLIST — a channel with no mark will not typecheck, so the call site
   falls back to a generic `Icon` rather than rendering the wrong company's logo. Not for the app's
-  own glyphs; that is `icon`.
+  own glyphs; that is `icon`. `x` is the one mark whose brand colour is BLACK, so it is the one
+  that needs `muted` on a dark ground; the rest carry their own hue either way.
 - **`markdown`** — `Markdown`: the single canonical markdown renderer for chat, apps, and
   `AgentRun`; rich GFM markdown on web with copyable tables, plain-text on
   native; takes a markdown `children` string. **`variant`** decides whose type
@@ -1173,8 +1174,14 @@ source (`src/<module>.tsx`/`.ts`) is the API reference.
   `InlineSelect`/`InlineMemberSelect` render the resting value like its option —
   `renderOptionContent` by default, `renderSelected` to override — a chip/badge at rest, not
   just text. **`InlineSelect` is single OR multi** — pass `multi` for a tag SET (`value: T[]`,
-  commits the new set on popover-CLOSE; selected tags render as badges via `renderSelected`),
-  mirroring `Select`'s `multi` axis; there is NO separate tag component. Both modes take
+  commits the new set on popover-CLOSE), mirroring `Select`'s `multi` axis; there is NO separate
+  tag component. In multi, `renderSelected(option, { remove })` is the resting CHIP BOX seam, the
+  same shape `Select` gives: return `<Chip onDismiss={remove}>` for a removable tag, or a plain
+  badge that ignores it — a dense grid column is the case for the badge, since the ✕ costs more
+  width there than the reopen it saves. `remove` detaches that one tag whether the list is open or
+  shut, and never opens the list — the innermost responder takes the gesture, so a ✕ inside the
+  trigger needs nothing to hold the press back. Single has no `remove`: unsetting one value is `onClear` and its
+  Clear row. Both modes take
   `allowCustom` (a create-a-tag/option row) + `searchable` + **`customOptionPlacement`** (default
   `"bottom"`, right for a tag field; pass `"top"` for a find-or-create REFERENCE picker over a long
   registry, so the create row stays visible while the keyboard highlight stays on the first MATCH —

package/docs/data_entry.md

@@ -754,7 +754,14 @@ A tag field's resting state should be a tidy CHIP BOX — and that's just a mult
 and no `display` mode: `renderSelected(item, { remove })` composes the anchor — render a `Chip`
 with `remove` for the ✕, or a plain `OptionBadge`/`MemberChip`/custom pill that ignores it;
 `renderOptionContent` renders the menu rows. `searchable` adds the filter field, `allowCustom` the
-create row. Borderless for a grid cell? Pass a `style`, never a `variant`. `Combobox` is the
+create row. Borderless for a grid cell? Pass a `style`, never a `variant`.
+
+**On a record surface the same field is `InlineSelect multi`**, and it takes the identical seam —
+`renderSelected(option, { remove })`. Reach for it wherever the neighbouring values are inline
+editors, so the tag field wears the same frame and hover as the row it sits in; reach for `Select`
+inside a form or dialog. The ✕ detaches its tag whether the list is open or shut and never opens
+the list. Two densities, one seam: a record field earns the removable `Chip`, a narrow register
+column keeps the plain badge, where the ✕ costs more width than the reopen it saves. `Combobox` is the
 SINGLE-value sibling — for a search that emits one pick at a time and renders the selection
 elsewhere, use `reflectSelection={false}` (see the [templates](./templates.md)).
 

package/examples/tpl_task_board.tsx

@@ -5,6 +5,7 @@ import { colors, solid, asColorName } from "@lotics/ui/colors";
 import { Icon } from "@lotics/ui/icon";
 import { CheckCircle } from "@lotics/ui/check_circle";
 import { OptionBadge, type OptionValue } from "@lotics/ui/option_badge";
+import { Chip } from "@lotics/ui/chip";
 import { MemberChip } from "@lotics/ui/member_chip";
 import { Avatar } from "@lotics/ui/avatar";
 import { SearchInput } from "@lotics/ui/search_input";
@@ -77,6 +78,16 @@ const TAG_OPTIONS: TagOption[] = Object.values(TAGS).map((t) => ({ value: String
 const tagOf = (k: string): TagOption => ({ value: k, label: TAGS[k]?.label ?? k });
 const tagBadge = (t: TagOption): OptionValue => TAGS[t.value] ?? { key: t.value, label: t.label, color: null };
 const renderTagBadge = (o: { value: string; label?: string }) => <OptionBadge value={tagBadge({ value: o.value, label: o.label ?? o.value })} variant="dot" />;
+// The same tag, removable. A tag field's resting state is a CHIP BOX — one ✕ per
+// value beats reopening the list to untick one — and `renderSelected`'s `remove`
+// is what a multi `InlineSelect` hands you for it. The column below deliberately
+// does NOT use this: at 168px the ✕ costs more width than the reopen it saves, so
+// a dense register keeps the plain badge. Same seam, two densities.
+const renderRemovableTag = (o: { value: string; label?: string }, { remove }: { remove: () => void }) => (
+  <Chip onDismiss={remove}>
+    <OptionBadge value={tagBadge({ value: o.value, label: o.label ?? o.value })} variant="dot" />
+  </Chip>
+);
 
 // A per-row CONTEXTUAL action. Different tasks expose different actions, each
 // wired (in a real app) to its OWN app-workflow — so ONE board drives many
@@ -580,7 +591,7 @@ function TaskAddRow({ preset, columns, onAdd }: { preset: Partial<Task>; columns
     key === "assignee" ? <InlineMemberSelect variant="bare" members={MEMBERS} value={ownerId} onSave={setOwnerId} placeholder="Assignee" accessibilityLabel="Assignee" />
     : key === "due" ? <InlineDatePicker variant="bare" value={due} optionalTime onSave={setDue} placeholder="No date" accessibilityLabel="Due date" />
     : key === "status" ? <InlineSelect variant="bare" value={status} options={STATUS_OPTIONS} onSave={setStatus} renderSelected={renderStatusBadge} renderOptionContent={renderStatusBadge} accessibilityLabel="Status" />
-    : key === "tags" ? <InlineSelect multi searchable allowCustom variant="bare" value={tags.map((tag) => tag.value)} onSave={(next) => setTags(next.map(tagOf))} options={TAG_OPTIONS} renderSelected={renderTagBadge} renderOptionContent={renderTagBadge} placeholder="Add tags" accessibilityLabel="Tags" />
+    : key === "tags" ? <InlineSelect multi searchable allowCustom variant="bare" value={tags.map((tag) => tag.value)} onSave={(next) => setTags(next.map(tagOf))} options={TAG_OPTIONS} renderSelected={renderRemovableTag} renderOptionContent={renderTagBadge} placeholder="Add tags" accessibilityLabel="Tags" />
     : null;
 
   return (

package/package.json

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

package/src/brand_mark.tsx

@@ -7,7 +7,7 @@ import { Svg, Path } from "react-native-svg";
  * email that is not tied to one provider. Inventing a mark for those is how a
  * byline ends up claiming a channel the record does not carry.
  */
-export type BrandName = "facebook" | "zalo" | "linkedin" | "google-meet";
+export type BrandName = "facebook" | "zalo" | "linkedin" | "x" | "google-meet";
 
 interface Mark {
   /** The brand's own colour. A mark drawn in anything else is not the mark. */
@@ -40,6 +40,14 @@ const MARKS: Record<BrandName, Mark> = {
     color: "#0A66C2",
     path: "M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z",
   },
+  x: {
+    // X's mark is black, and that is the mark — a brand drawn in a colour it
+    // does not use is not the brand. It is the one entry here that depends on
+    // its ground: on a dark surface pass `muted`, which draws it in the text
+    // colour like every other mark and keeps it visible.
+    color: "#000000",
+    path: "M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z",
+  },
   "google-meet": {
     color: "#00897B",
     path: "M5.53 2.13 0 7.75h5.53zm.398 0v5.62h7.608v3.65l5.47-4.45c-.014-1.22.031-2.25-.025-3.46-.148-1.09-1.287-1.47-2.236-1.36zM23.1 4.32c-.802.295-1.358.995-2.047 1.49-2.506 2.05-4.982 4.12-7.468 6.19 3.025 2.59 6.04 5.18 9.065 7.76 1.218.671 1.428-.814 1.328-1.64v-13a.828.828 0 0 0-.877-.825zM.038 8.15v7.7h5.53v-7.7zm13.577 8.1H6.008v5.62c3.864-.006 7.737.011 11.58-.009 1.02-.07 1.618-1.12 1.468-2.07v-2.51l-5.47-4.68v3.65zm-13.577 0c.02 1.44-.041 2.88.033 4.31.162.948 1.158 1.43 2.047 1.31h3.464v-5.62z",

package/src/inline_edit.tsx

@@ -385,8 +385,21 @@ interface InlineEditViewProps {
    *  active/open edge) is unchanged. */
   actions?: ReactNode;
   /** True while the field's popover (select/date) is open: wears the 2px active
-   *  ring so a mouse-opened trigger reads like a focused input (no `:focus-visible`). */
+   *  ring so a mouse-opened trigger reads like a focused input (no `:focus-visible`).
+   *  Under `role="combobox"` it is also what the field ANNOUNCES as aria-expanded. */
   active?: boolean;
+  /** The APG pattern the resting field implements. Default "button" — a value that
+   *  swaps to an input in place.
+   *
+   *  Pass **"combobox"** when pressing the field opens a LIST that holds its value.
+   *  Three things follow, and they are one decision rather than three:
+   *  it is the role APG names for this control; `active` becomes aria-expanded, so
+   *  the field can no longer claim to be a plain button while owning an open popup;
+   *  and react-native-web renders a `<div>` instead of a `<button>`, whose content
+   *  model forbids interactive descendants. That last one is load-bearing — a tag
+   *  field's chips cannot carry their own remove ✕ inside a `<button>`, because a
+   *  button may not contain a button. `Select` reached the same conclusion. */
+  role?: "button" | "combobox";
   /** Raw focus on the resting view, any modality. The input-swap editors use it
    *  (via `InlineEditFrame`) to open edit mode on KEYBOARD focus; the popover
    *  editors leave it unset — focus never auto-opens an overlay (the WAI-ARIA
@@ -436,7 +449,11 @@ function multilineBox(numberOfLines: number | undefined): ViewStyle | null {
 }
 
 export function InlineEditView(props: InlineEditViewProps) {
-  const { display, placeholder, onPress, disabled, accessibilityLabel, trailing, actions, active, struck, variant = "framed", tone, onFocus, ref, anchorRef, numberOfLines } = props;
+  const { display, placeholder, onPress, disabled, accessibilityLabel, trailing, actions, active, struck, variant = "framed", tone, onFocus, ref, anchorRef, numberOfLines, role = "button" } = props;
+  // A combobox MUST expose its expanded state; a button must not. Deriving it from
+  // the `active` the popover callers already pass keeps the two from drifting apart
+  // — there is no way to take the role without the announcement.
+  const patternProps = role === "combobox" ? { accessibilityRole: "combobox" as const, "aria-expanded": active === true } : { accessibilityRole: "button" as const };
   // Stop the press here so an inline editor nested in a pressable row (a task
   // row that expands on press) edits the field instead of triggering the row.
   const handlePress = onPress
@@ -465,7 +482,7 @@ export function InlineEditView(props: InlineEditViewProps) {
           disabled={disabled}
           onPress={handlePress}
           onFocus={onFocus}
-          accessibilityRole="button"
+          {...patternProps}
           accessibilityLabel={accessibilityLabel}
           style={[styles.viewInner, disabled === true && styles.viewInert, multilineBox(numberOfLines)]}
         >
@@ -484,7 +501,7 @@ export function InlineEditView(props: InlineEditViewProps) {
       disabled={disabled}
       onPress={handlePress}
       onFocus={onFocus}
-      accessibilityRole="button"
+      {...patternProps}
       accessibilityLabel={accessibilityLabel}
       userSelect="none"
       style={(state) => [surface(state.hovered ?? false), multilineBox(numberOfLines)]}

package/src/inline_select.tsx

@@ -31,10 +31,6 @@ interface InlineSelectBaseProps<T extends string, D = unknown> {
    *  rendered this two-line `MenuListItem`; this only forwards it, which is why
    *  callers were hand-rebuilding the anatomy through `renderOptionContent`. */
   getOptionDescription?: (option: PickerOption<T, D>) => string | undefined;
-  /** Render ONE selected option as its resting chip — single: the value; multi:
-   *  each tag. Falls back to `renderOptionContent`, then the plain label (single) /
-   *  a zinc `Badge` (multi). The one seam for "how the selection looks". */
-  renderSelected?: (option: PickerOption<T, D>) => ReactNode;
   /** Empty-state content: a string reads as muted placeholder text, a NODE renders
    *  as-is (e.g. an avatar "add" ghost for an `avatarOnly` member cell). */
   placeholder?: string | ReactNode;
@@ -74,6 +70,11 @@ export type InlineSelectProps<T extends string, D = unknown> =
       multi?: false;
       value: T | null;
       onSave: (next: T) => void | Promise<void>;
+      /** Render the selected option as the resting value. Falls back to
+       *  `renderOptionContent`, then the plain label. No `remove`: unsetting a single
+       *  field is `onClear` and its Clear row, and a second ✕ that silently did
+       *  nothing whenever `onClear` was absent would be worse than no ✕ at all. */
+      renderSelected?: (option: PickerOption<T, D>) => ReactNode;
       /** Unset the field. Provide it for a "Clear" row whenever there IS a value —
        *  kept separate from `onSave` (whose next is a non-null `T`). Single only. */
       onClear?: () => void | Promise<void>;
@@ -82,6 +83,11 @@ export type InlineSelectProps<T extends string, D = unknown> =
       multi: true;
       value: T[];
       onSave: (next: T[]) => void | Promise<void>;
+      /** Render ONE selected tag. Falls back to `renderOptionContent`, then a zinc
+       *  `Badge`. `remove` detaches THAT tag — return `<Chip onDismiss={remove}>` for
+       *  the removable chip box a tag field rests as, or a plain badge that ignores
+       *  it. Mirrors `Select`; the ✕ removes without opening the list. */
+      renderSelected?: (option: PickerOption<T, D>, controls: { remove: () => void }) => ReactNode;
     });
 
 /** The shared shell: the resting view (a `Popover` trigger) that floats an
@@ -109,6 +115,10 @@ function InlineSelectShell(props: {
         <PopoverTrigger>
           <InlineEditView
             anchorRef={anchorRef}
+            // Both modes hold a value and open a list, which is what the role names.
+            // It is also what lets a multi field's chips carry their own remove ✕:
+            // a <button> may not contain a <button>.
+            role="combobox"
             actions={props.actions}
             variant={props.variant}
             display={props.display}
@@ -140,7 +150,7 @@ function InlineSelectShell(props: {
 }
 
 export function InlineSelect<T extends string, D = unknown>(props: InlineSelectProps<T, D>) {
-  const { options, renderOptionContent, getOptionDescription, renderSelected, placeholder, disabled, accessibilityLabel, searchable = false, allowCustom = false, customOptionLabel, customOptionPlacement, variant, actions, autoFocus = false } = props;
+  const { options, renderOptionContent, getOptionDescription, placeholder, disabled, accessibilityLabel, searchable = false, allowCustom = false, customOptionLabel, customOptionPlacement, variant, actions, autoFocus = false } = props;
   const labels = useLoticsLocale().inline;
   const [open, setOpen] = useState(autoFocus);
   const [saving, setSaving] = useState(false);
@@ -162,15 +172,47 @@ export function InlineSelect<T extends string, D = unknown>(props: InlineSelectP
   const searchMode = searchable || allowCustom ? "internal" : "none";
 
   if (props.multi) {
-    const { value, onSave } = props;
+    const { value, onSave, renderSelected } = props;
+    // The chips show the WORKING set: the draft while the list is open, the stored
+    // value once it is shut. They used to show `value` throughout, which reads as a
+    // dead control the moment anything edits the draft — press a chip's ✕ with the
+    // list open and it just sits there until the popover closes. What you are
+    // building is what the field should show while you build it; ticking a row in
+    // the list lands in the same place, for the same reason.
+    //
     // Resolve each value to its option IN SELECTION ORDER; an `allowCustom` value not in
     // `options` (a just-created tag) renders from a {value,label} fallback so it still shows
     // (mirrors `Select`). Without allowCustom, an unknown value is dropped (→ nothing), as before.
-    const selected = value
+    const selected = (open ? draft : value)
       .map((v) => options.find((o) => o.value === v) ?? (allowCustom ? { value: v, label: v } : null))
       .filter((o): o is PickerOption<T, D> => o != null);
+    /**
+     * Detach one tag.
+     *
+     * WHICH SET it edits depends on whether the list is open, and getting that wrong
+     * is silent: while open, the working set is `draft` and the close handler writes
+     * it back wholesale — so a ✕ that wrote straight to `value` would be UNDONE the
+     * moment the popover closed. Open → edit the draft and let the close commit it;
+     * closed → there is no draft, so write the new set immediately.
+     *
+     * Nothing here stops the press. The ✕ sits INSIDE the trigger, so opening the
+     * list on a removal looks like the obvious hazard — but react-native-web hands
+     * a gesture to one responder, and the innermost one wins. Verified against the
+     * gallery: with the stop removed the list still never opens.
+     */
+    const removeValue = (v: T) => () => {
+      if (open) {
+        setDraft((current) => current.filter((d) => d !== v));
+        return;
+      }
+      void runSave(() => onSave(value.filter((d) => d !== v)));
+    };
     const chip = (o: PickerOption<T, D>) =>
-      renderSelected ? renderSelected(o) : renderOptionContent ? renderOptionContent(o) : <Badge label={o.label ?? String(o.value)} color="zinc" />;
+      renderSelected
+        ? renderSelected(o, { remove: removeValue(o.value) })
+        : renderOptionContent
+          ? renderOptionContent(o)
+          : <Badge label={o.label ?? String(o.value)} color="zinc" />;
     const onOpenChange = (next: boolean) => {
       if (next) {
         setDraft(value);
@@ -209,13 +251,13 @@ export function InlineSelect<T extends string, D = unknown>(props: InlineSelectP
             const created = raw.trim() as T;
             if (created && !draft.includes(created)) setDraft([...draft, created]);
           }}
-          renderOptionContent={renderOptionContent ?? renderSelected}
+          renderOptionContent={renderOptionContent}
         />
       </InlineSelectShell>
     );
   }
 
-  const { value, onSave, onClear } = props;
+  const { value, onSave, onClear, renderSelected } = props;
   // An `allowCustom` value not in `options` renders from a fallback (like `Select`); a plain
   // unknown value (a removed member/status) resolves to nothing → the placeholder shows.
   const selected = options.find((o) => o.value === value) ?? (allowCustom && value != null ? { value, label: value } : undefined);

package/src/option_list.tsx

@@ -113,6 +113,12 @@ export function OptionList<T extends string, MULTI extends boolean = false, D =
       <ScrollView
         ref={list.scrollRef}
         style={styles.optionsList}
+        // The GAP has to ride the content container, not the viewport. A ScrollView
+        // wraps its children in one content <div>, so a `gap` in `style` sits on a
+        // box with a single child and falls between nothing — rows rendered flush,
+        // and two adjacent SELECTED rows merged into one tinted block, which reads
+        // as a single wide row rather than two picked ones.
+        contentContainerStyle={styles.optionsContent}
         nativeID={list.listboxId}
         accessibilityLabel={accessibilityLabel}
         keyboardShouldPersistTaps="handled"
@@ -235,9 +241,11 @@ const styles = StyleSheet.create({
   },
   optionsList: {
     flex: 1,
-    gap: 4,
     maxHeight: 320,
   },
+  optionsContent: {
+    gap: 4,
+  },
   selectAllContainer: {
     flexDirection: "row",
     alignItems: "center",