@lotics/ui 47.8.0 → 47.10.0

package/docs/catalog.md

@@ -425,7 +425,8 @@ component — children are the body), `Subsection` (+ `SubsectionHeading`/
 `SectionStack` (the flat page's content column — owns the fixed 56px beat + hairline between
 top-level blocks), `SubsectionStack` (a section's `Subsection` groups — fixed 32px beat,
 space-only while the groups are SHORT, `divided` once they run long), `SectionCard`, `PageHeader` /
-`PageContent`, `Stack`, `Spacer`, `Divider`, `Accordion`, `Tabs`, `SegmentedControl`,
+`PageContent`, `Stack`, `Spacer`, `Divider`, `Accordion`, `Tabs`, `PipelineTabs` (Tabs plus order —
+the stage strip of a lifecycle desk, outcomes set apart), `SegmentedControl`,
 `Stepper`, `DangerZone` (the destructive section — delete/archive — set apart at the bottom
 of a record/settings surface).
 
@@ -526,7 +527,9 @@ patterns doc indexed in [AGENTS.md](../AGENTS.md)).
 upcoming, horizontal OR vertical), `RemainderMeter` + `AllocationRow` (allocation),
 `Timeline` (a heterogeneous event LOG — icons + expandable details, not progress),
 `CalendarView` (the `calendar` module — days are the axis), `GanttView` (RESOURCES are the
-axis: a channel, an owner, a vehicle), `comments_thread`.
+axis: a channel, an owner, a vehicle), `comments_thread`, `SocialPostPreview` (a post as ONE
+network's feed shows it, with the count against that network's limit and every rule its API
+would refuse — the publish gate reads the same `socialPostIssues` the preview draws).
 
 ### AI surfaces
 
@@ -606,7 +609,7 @@ 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`, `x`, `google-meet`. Solid single-colour silhouettes
+  happened on — `facebook`, `instagram`, `threads`, `zalo`, `linkedin`, `x`, `google-meet`. Solid single-colour silhouettes
   in each brand's own hex, drawn from CC0 geometry. `size` (default 16) and `muted` (draw in the
   text colour). The name list is an ALLOWLIST — `BRAND_NAMES` is the array and `BrandName` derives
   from it, so a channel with no mark will not typecheck and the call site falls back to a generic
@@ -800,6 +803,18 @@ source (`src/<module>.tsx`/`.ts`) is the API reference.
   the product can name); `joined` comes in as an ISO DATE and the card formats it to month + year;
   `groups` distinguishes absent (no row) from `[]` ("None"). `inactive` draws the departed state as
   a `Badge` — a lifecycle state, not another muted line.
+- **`social_post_preview`** — `SocialPostPreview`: a draft post as one network's feed would show
+  it — author line with the network's mark, text folded where THAT feed folds it (or the tail
+  past the limit in the danger ink, unfolded, so the characters to cut are the ones on screen),
+  media as a carousel strip (Instagram, Threads) or a tiled grid with overflow (Facebook, X,
+  LinkedIn) — a lone video plays inline, as every feed plays it — a link as the card or the
+  inert text it becomes, and a footer with `count / limit`
+  plus each refusal in words. `SOCIAL_NETWORK_RULES` is the one table both the drawing and
+  `socialPostIssues(network, draft)` read — both in `social_post_rules`, RN-free, so a gate reads
+  them without rendering — so a button gated on the issues refuses exactly what
+  the preview shows; `socialPostIssueText` renders one in the pack's words. Never writes, never
+  publishes. Counts in code points, which is a guide on X (it weights URLs and CJK), exact
+  elsewhere.
 - **`member_peek`** — `MemberPeek`: `MemberChip` + `Peek` + the card above, with the trigger's
   announced name taken from the locale. Off picker options and off rows that already press —
   see the person-display section for why.
@@ -895,9 +910,30 @@ source (`src/<module>.tsx`/`.ts`) is the API reference.
   can finish their task without ever opening it. → [composition.md](./composition.md)
   §"Canvas & content column". `Accordion` + `AccordionHeader`/`AccordionTitle`/`AccordionMeta`:
   expandable section rows.
-- **`tabs`** — `Tabs`: switch between content sections; WAI-ARIA tablist + roving tabindex;
-  each `TabOption` takes an optional `status` `ColorName` → a small attention dot before its
-  label, for a tab whose area needs work.
+- **`tabs`** — `Tabs`: switch between content sections; WAI-ARIA tablist + roving tabindex.
+  Each `TabOption` takes an optional `status` `ColorName` (a small dot before the label, for a
+  tab whose area needs work), `count` (the band's size, as a PROP — never formatted into the
+  label) and `caption` (a second line under the label, one pre-formatted figure; once any tab in
+  a strip has one, every tab reserves the line so the strip keeps one height). Also exports
+  `TabButton`, the ONE tab anatomy `PipelineTabs` shares, plus `TAB_PADDING_V` /
+  `TAB_LABEL_LINE` so a strip drawing something beside a tab can sit it on the label line.
+- **`pipeline_tabs`** — `PipelineTabs` + `PipelineTab` + `PipelineOutcomes`: `Tabs` plus ORDER
+  — the stage strip over a lifecycle desk, a compound. The root (`value`/`onValueChange`,
+  `accessibilityLabel`) is the `tablist` and owns the keyboard ring; each `PipelineTab` (`value`,
+  `label`, `count?`, `caption?`, `status?`) is `Tabs`' own `TabButton`, so the two strips cannot
+  drift; `PipelineOutcomes` wraps the terminal stages past a rule with no chevrons between them.
+  Children in PIPELINE ORDER, the flow joined by chevrons sat on the label line; a tab inserted
+  anywhere (through a Fragment too) joins the ring where it sits. `label` is the reader's word —
+  a field option's label or a locale string; the strip renders no words of its own. `status` is
+  an optional dot in the `Badge variant="dot"` vocabulary, with two honest uses: the verdict on
+  the outcomes only (the flow bare — being at a stage is not a status), or every stage in its
+  option's colour when the rows below badge that same field; never a decoration picked per
+  stage. Reach for it when each
+  stage changes what the register under it IS — its columns, its act, its figure — the
+  lifecycle desk's tab strip (→ [templates.md](./templates.md) §"App-screen shapes"). NOT a
+  filter: stages that show the same columns over fewer rows are a `ChipGroup` with counts. NOT a
+  report: a funnel's rates are `Funnel`'s, a share bar is `Breakdown`'s. NOT one record's ladder:
+  that is `Checklist connected` / `Stepper`. Owns its horizontal scroll, never the page's.
 - **`segmented_control`** — `SegmentedControl`: the exclusive small-set switch. Picking between
   this, `ChipGroup`, `RadioPicker`, `Select` and `Tabs` is decided by OPTION COUNT and by
   whether the choice filters a view or sets a value — not by taste. →
@@ -1992,6 +2028,11 @@ a child of the app root, which every overlay's body-level box follows.
   module-level open-overlay counter every overlay primitive reports into; the host's
   shortcut registry reads it synchronously to floor page-level shortcuts while any overlay
   is open. Lives in the primitives — never call it from a screen.
+- **`use_roving_tabs`** — `useRovingTabs({ count, selectedIndex, onSelect })` →
+  `{ tabStopIndex, onKeyDown, bindRef }`: the WAI-ARIA tabs keyboard contract (one tab stop, arrow
+  keys select AND move focus, Home/End) shared by `Tabs` and `Pipeline`. Reach for it when
+  building a NEW `tablist`; a `radiogroup` (`SegmentedControl`) selects on Space/Enter as well and
+  is not this hook.
 - **`use_section_nav`** — `useSectionNav`: scroll-spy for a LONG record surface with a left
   outline rail — keys in page order → `{scrollRef, onScroll, register(key)→onLayout,
   jumpTo(key), activeKey}`; rail items are `MenuButton`s (`current={activeKey===key}` — a

package/docs/composition.md

@@ -1132,6 +1132,11 @@ by what KIND of thing they are.
   screen) or a `SegmentedControl` (a mode of it); if neither fits because the two panels really
   are different content, that tab was **two destinations wearing one name** and the fix is to
   promote both into the strip above.
+  **The one strip that may sit under a `Tabs` is a `PipelineTabs`**, and only because it is not a
+  second copy of anything: its stages change the register's columns and act (the lifecycle desk, →
+  [templates.md](./templates.md)), so it is the section's own content, not a lens on it. The test
+  that keeps this honest is the same one that makes a tab a tab — if every stage showed the same
+  columns, it is a `ChipGroup`.
   **The label confesses it before the layout does: a tab named "X and Y" is two tabs.** Reach for
   the domain's own list of things — the entities its people already name one at a time — and give
   each one a tab; a pair invented to keep the strip short buys nothing, because the pair has to be

package/docs/templates.md

@@ -115,7 +115,10 @@ the filters, never a second copy of them; each states its own size and trouble a
 application, a shipment, a repair. *"What is stuck, and what do I move next?"*
 
 - **Tabs: the stages**, and here they earn it — each band carries its own act (confirm, dispatch,
-  close), its own summary, often its own columns. Roughly five; past that the tail is a lens.
+  close), its own summary, often its own columns. Roughly five; past that the tail is a lens. The
+  strip is a `PipelineTabs` — `Tabs` plus order: the same tab anatomy drawn as the flow, each stage
+  with its dot, count and caption, the won/lost outcomes set apart — rather than a plain `Tabs`,
+  because for a pipeline the ORDER is the subject and a wrapping row of names drops it.
 - **Record: a `Drawer`.** The reader came from the list and returns to it, and the drawer's ◀ ▶
   sequences the band they were reading.
 - **Row vs record:** the row carries what the NEXT act needs — the goods, the money, the clock —

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "47.8.0",
+  "version": "47.10.0",
   "type": "module",
   "exports": {
     "./accordion": "./src/accordion.tsx",
@@ -250,6 +250,8 @@
     "./share_or_download": "./src/share_or_download.ts",
     "./shortcut_badge": "./src/shortcut_badge.tsx",
     "./size_boundary": "./src/size_boundary.tsx",
+    "./social_post_preview": "./src/social_post_preview.tsx",
+    "./social_post_rules": "./src/social_post_rules.ts",
     "./skeleton": "./src/skeleton.tsx",
     "./skip_link": "./src/skip_link.tsx",
     "./slider": "./src/slider.tsx",
@@ -275,6 +277,7 @@
     "./table": "./src/table.tsx",
     "./table_fit": "./src/table_fit.ts",
     "./tabs": "./src/tabs.tsx",
+    "./pipeline_tabs": "./src/pipeline_tabs.tsx",
     "./text": "./src/text.tsx",
     "./text_disclosure": "./src/text_disclosure.tsx",
     "./text_ink": "./src/text_ink.ts",
@@ -306,6 +309,7 @@
     "./use_hover": "./src/use_hover.ts",
     "./use_image_rotation": "./src/use_image_rotation.ts",
     "./use_persisted_state": "./src/use_persisted_state.ts",
+    "./use_roving_tabs": "./src/use_roving_tabs.ts",
     "./use_paste_files": {
       "react-native": "./src/use_paste_files.ts",
       "default": "./src/use_paste_files.web.ts"

package/src/brand_mark.tsx

@@ -18,7 +18,7 @@ import { Svg, Path } from "react-native-svg";
  * plausible and slightly wrong, which is the one defect a reader spots instantly
  * and a test suite never does.
  */
-export const BRAND_NAMES = ["facebook", "meta", "tiktok", "google-ads", "zalo", "linkedin", "x", "google-meet"] as const;
+export const BRAND_NAMES = ["facebook", "instagram", "threads", "meta", "tiktok", "google-ads", "zalo", "linkedin", "x", "google-meet"] as const;
 
 export type BrandName = (typeof BRAND_NAMES)[number];
 
@@ -73,6 +73,16 @@ const MARKS: Record<BrandName, Mark> = {
     color: "#0866FF",
     path: "M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 0 1 1.141.195v3.325a8.623 8.623 0 0 0-.653-.036 26.805 26.805 0 0 0-.733-.009c-.707 0-1.259.096-1.675.309a1.686 1.686 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647Z",
   },
+  /** The two Meta surfaces a post goes to under a PERSON's name rather than a
+   *  Page's. Threads' mark is black, like X's — the same `muted` escape applies. */
+  instagram: {
+    color: "#FF0069",
+    path: "M7.0301.084c-1.2768.0602-2.1487.264-2.911.5634-.7888.3075-1.4575.72-2.1228 1.3877-.6652.6677-1.075 1.3368-1.3802 2.127-.2954.7638-.4956 1.6365-.552 2.914-.0564 1.2775-.0689 1.6882-.0626 4.947.0062 3.2586.0206 3.6671.0825 4.9473.061 1.2765.264 2.1482.5635 2.9107.308.7889.72 1.4573 1.388 2.1228.6679.6655 1.3365 1.0743 2.1285 1.38.7632.295 1.6361.4961 2.9134.552 1.2773.056 1.6884.069 4.9462.0627 3.2578-.0062 3.668-.0207 4.9478-.0814 1.28-.0607 2.147-.2652 2.9098-.5633.7889-.3086 1.4578-.72 2.1228-1.3881.665-.6682 1.0745-1.3378 1.3795-2.1284.2957-.7632.4966-1.636.552-2.9124.056-1.2809.0692-1.6898.063-4.948-.0063-3.2583-.021-3.6668-.0817-4.9465-.0607-1.2797-.264-2.1487-.5633-2.9117-.3084-.7889-.72-1.4568-1.3876-2.1228C21.2982 1.33 20.628.9208 19.8378.6165 19.074.321 18.2017.1197 16.9244.0645 15.6471.0093 15.236-.005 11.977.0014 8.718.0076 8.31.0215 7.0301.0839m.1402 21.6932c-1.17-.0509-1.8053-.2453-2.2287-.408-.5606-.216-.96-.4771-1.3819-.895-.422-.4178-.6811-.8186-.9-1.378-.1644-.4234-.3624-1.058-.4171-2.228-.0595-1.2645-.072-1.6442-.079-4.848-.007-3.2037.0053-3.583.0607-4.848.05-1.169.2456-1.805.408-2.2282.216-.5613.4762-.96.895-1.3816.4188-.4217.8184-.6814 1.3783-.9003.423-.1651 1.0575-.3614 2.227-.4171 1.2655-.06 1.6447-.072 4.848-.079 3.2033-.007 3.5835.005 4.8495.0608 1.169.0508 1.8053.2445 2.228.408.5608.216.96.4754 1.3816.895.4217.4194.6816.8176.9005 1.3787.1653.4217.3617 1.056.4169 2.2263.0602 1.2655.0739 1.645.0796 4.848.0058 3.203-.0055 3.5834-.061 4.848-.051 1.17-.245 1.8055-.408 2.2294-.216.5604-.4763.96-.8954 1.3814-.419.4215-.8181.6811-1.3783.9-.4224.1649-1.0577.3617-2.2262.4174-1.2656.0595-1.6448.072-4.8493.079-3.2045.007-3.5825-.006-4.848-.0608M16.953 5.5864A1.44 1.44 0 1 0 18.39 4.144a1.44 1.44 0 0 0-1.437 1.4424M5.8385 12.012c.0067 3.4032 2.7706 6.1557 6.173 6.1493 3.4026-.0065 6.157-2.7701 6.1506-6.1733-.0065-3.4032-2.771-6.1565-6.174-6.1498-3.403.0067-6.156 2.771-6.1496 6.1738M8 12.0077a4 4 0 1 1 4.008 3.9921A3.9996 3.9996 0 0 1 8 12.0077",
+  },
+  threads: {
+    color: "#000000",
+    path: "M18.263 11.097c-.03-3.486-1.92-5.586-5.111-5.586-2.13 0-3.922.963-4.863 2.499l2.062 1.438c.535-.843 1.272-1.543 2.628-1.543 1.528 0 2.318.85 2.544 2.431a15 15 0 0 0-2.236-.173c-4.125 0-6.068 1.867-6.068 4.336s1.943 3.99 4.804 3.99c3.139 0 5.013-2.115 5.781-4.735.798.361 1.348 1.204 1.348 2.47 0 3.387-3.907 5.232-7.22 5.232-4.885 0-8.077-3.207-8.077-8.424 0-6.392 4.223-10.487 9.9-10.487 3.808 0 5.69 1.671 6.97 3.914l2.108-1.475C21.44 2.078 18.331 0 13.663 0 6.227 0 1.168 5.277 1.168 12.934c0 7 4.953 11.066 10.856 11.066 4.878 0 9.809-2.846 9.809-7.716 0-2.545-1.46-4.231-3.569-5.187m-6.33 4.855c-1.077 0-2.026-.512-2.026-1.453 0-1.483 1.822-1.934 3.606-1.934.678 0 1.34.045 1.927.173-.422 1.927-1.671 3.215-3.508 3.214Z",
+  },
   zalo: {
     color: "#0068FF",
     path: "M12.49 10.2722v-.4496h1.3467v6.3218h-.7704a.576.576 0 01-.5763-.5729l-.0006.0005a3.273 3.273 0 01-1.9372.6321c-1.8138 0-3.2844-1.4697-3.2844-3.2823 0-1.8125 1.4706-3.2822 3.2844-3.2822a3.273 3.273 0 011.9372.6321l.0006.0005zM6.9188 7.7896v.205c0 .3823-.051.6944-.2995 1.0605l-.03.0343c-.0542.0615-.1815.206-.2421.2843L2.024 14.8h4.8948v.7682a.5764.5764 0 01-.5767.5761H0v-.3622c0-.4436.1102-.6414.2495-.8476L4.8582 9.23H.1922V7.7896h6.7266zm8.5513 8.3548a.4805.4805 0 01-.4803-.4798v-7.875h1.4416v8.3548H15.47zM20.6934 9.6C22.52 9.6 24 11.0807 24 12.9044c0 1.8252-1.4801 3.306-3.3066 3.306-1.8264 0-3.3066-1.4808-3.3066-3.306 0-1.8237 1.4802-3.3044 3.3066-3.3044zm-10.1412 5.253c1.0675 0 1.9324-.8645 1.9324-1.9312 0-1.065-.865-1.9295-1.9324-1.9295s-1.9324.8644-1.9324 1.9295c0 1.0667.865 1.9312 1.9324 1.9312zm10.1412-.0033c1.0737 0 1.945-.8707 1.945-1.9453 0-1.073-.8713-1.9436-1.945-1.9436-1.0753 0-1.945.8706-1.945 1.9436 0 1.0746.8697 1.9453 1.945 1.9453z",

package/src/locale.tsx

@@ -3,6 +3,7 @@ import { type DatePickerLabels } from "./date_picker";
 import { type CalendarLabels } from "./date_calendar";
 import { type CalendarViewLabels } from "./calendar/types";
 import { type GanttLabels } from "./gantt/types";
+import { type SocialPostPreviewLabels } from "./social_post_rules";
 import { type PaginationLabels } from "./pagination";
 import { type SortHeaderLabels } from "./sort_header";
 import { type ConfidenceLabels } from "./confidence";
@@ -65,6 +66,9 @@ export interface LoticsLocale {
   /** `GanttView` — the zoom switch, the frozen column header, dependency
    *  announcements and the empty state. */
   gantt: GanttLabels;
+  /** `SocialPostPreview`: the fold's "more", the not-yet-published timestamp,
+   *  and the refusals each network's API would answer with. */
+  socialPostPreview: SocialPostPreviewLabels;
   /** `FilterChip` (and `ColumnFilter`): the generic clear affordance, used when
    *  a call site doesn't pass a dimension-specific `clearLabel`. */
   filterChip: { clear: string };
@@ -348,6 +352,13 @@ export const en: LoticsLocale = {
     day: "Day", week: "Week", month: "Month", task: "Task",
     empty: "Nothing scheduled",
   },
+  socialPostPreview: {
+    more: "more", justNow: "Just now",
+    overLimit: (over) => `${over} over the limit`,
+    needsMedia: "Needs a photo or video", tooManyImages: (max) => `Up to ${max} images`,
+    videoAlone: "A video goes on its own", gifAlone: "A GIF goes on its own",
+    linkOrMedia: "A link or media, not both",
+  },
   filterChip: { clear: "Clear" },
   filterBand: { filters: "Filters", clearAll: "Clear all", done: "Done" },
   floatingActionBar: { clear: "Clear" },
@@ -568,6 +579,13 @@ export const vi: LoticsLocale = {
     day: "Ngày", week: "Tuần", month: "Tháng", task: "Công việc",
     empty: "Chưa có việc nào",
   },
+  socialPostPreview: {
+    more: "xem thêm", justNow: "Vừa xong",
+    overLimit: (over) => `Quá ${over} ký tự`,
+    needsMedia: "Cần ảnh hoặc video", tooManyImages: (max) => `Tối đa ${max} ảnh`,
+    videoAlone: "Video phải đăng riêng", gifAlone: "GIF phải đăng riêng",
+    linkOrMedia: "Liên kết hoặc ảnh/video, không cả hai",
+  },
   filterChip: { clear: "Xóa" },
   filterBand: { filters: "Bộ lọc", clearAll: "Xoá lọc", done: "Xong" },
   floatingActionBar: { clear: "Bỏ chọn" },

package/src/pipeline_tabs.tsx

@@ -0,0 +1,201 @@
+import { Children, Fragment, createContext, isValidElement, useContext, type ReactNode } from "react";
+import { ScrollView, View } from "react-native";
+import { Icon } from "./icon";
+import { colors, type ColorName } from "./colors";
+import { SPACE } from "./spacing";
+import { TabButton, TAB_LABEL_LINE, TAB_PADDING_V } from "./tabs";
+import { useRovingTabs, type RovingTabs } from "./use_roving_tabs";
+
+interface PipelineCtx {
+  value: string;
+  onValueChange: (value: string) => void;
+  /** Every tab's value in render order — the flow first, then the outcomes.
+   *  Index into it is a tab's place in the keyboard ring. */
+  order: string[];
+  /** Whether any tab carries a caption — then every tab reserves the line. */
+  captionSlot: boolean;
+  roving: RovingTabs;
+}
+
+const PipelineContext = createContext<PipelineCtx | null>(null);
+const OutcomesContext = createContext(false);
+
+function usePipeline(component: string): PipelineCtx {
+  const ctx = useContext(PipelineContext);
+  if (!ctx) throw new Error(`${component} must be rendered inside <PipelineTabs>`);
+  return ctx;
+}
+
+export interface PipelineTabsProps<T extends string> {
+  /** Accessible name of the tablist. */
+  accessibilityLabel: string;
+  value: T;
+  onValueChange: (value: T) => void;
+  /** `PipelineTab`s in PIPELINE ORDER — the flow left to right — then one
+   *  `PipelineOutcomes` holding the stages a record leaves at. The strip never
+   *  re-ranks: the sequence is the process. */
+  children: ReactNode;
+  testID?: string;
+}
+
+export interface PipelineTabProps<T extends string = string> {
+  value: T;
+  /** The stage's name, in the reader's language — a field's option label, or
+   *  a locale string. The strip renders no words of its own. */
+  label: string;
+  /** How many records sit at this stage — see `TabOption.count`. */
+  count?: number;
+  /** The second line — see `TabOption.caption`. Pre-formatted: the strip knows
+   *  no currency from a count. */
+  caption?: string;
+  /** A dot before the label, in the `Badge variant="dot"` vocabulary. Optional,
+   *  and two honest uses: the VERDICT on an outcome only (`emerald` won, `red`
+   *  lost — the flow stays bare, since being at a stage is not a status), or
+   *  every stage in the colour its own option carries, when the rows below
+   *  badge that same field and the strip should agree with them. Never a
+   *  decoration picked per stage. */
+  status?: ColorName;
+  testID?: string;
+}
+
+interface Collected {
+  values: string[];
+  captionSlot: boolean;
+}
+
+/** Every tab under `children`, in render order, through a Fragment or a
+ *  `PipelineOutcomes` — so a tab inserted anywhere joins the keyboard ring
+ *  where it sits. */
+function collect(children: ReactNode, into: Collected = { values: [], captionSlot: false }): Collected {
+  Children.forEach(children, (child) => {
+    if (!isValidElement(child)) return;
+    if (child.type === PipelineTab && isValidElement<PipelineTabProps>(child)) {
+      into.values.push(child.props.value);
+      if (child.props.caption != null) into.captionSlot = true;
+    } else if (
+      (child.type === PipelineOutcomes || child.type === Fragment) &&
+      isValidElement<{ children?: ReactNode }>(child)
+    ) {
+      collect(child.props.children, into);
+    }
+  });
+  return into;
+}
+
+/**
+ * `Tabs` plus ORDER — the tab strip over a lifecycle desk, whose tabs are the
+ * stages a population of records is spread across, each changing what the
+ * register under it IS (its columns, its act, its figure). A compound: the root
+ * owns the selection and the keyboard ring, a `PipelineTab` is one tab, and
+ * `PipelineOutcomes` groups the stages a record LEAVES at, past a rule, because
+ * a record does not walk into them the way it walks from one open stage to the
+ * next.
+ *
+ * Every tab is `Tabs`' own `TabButton` — the same dot, count, caption line,
+ * hover wash and underline — so the two strips cannot drift; what this adds is
+ * the chevron between stages of the flow, sat on the label line, and the rule
+ * before the outcomes. A flat wrapping `Tabs` says nothing about order, and
+ * order is what a pipeline is. Owns its horizontal scroll rather than wrapping
+ * the flow onto a second row.
+ *
+ * Not one record's ladder — that is `Checklist connected` or `Stepper`. Not a
+ * report — a funnel's rates are `Funnel`'s, a share bar is `Breakdown`'s.
+ */
+export function PipelineTabs<T extends string>(props: PipelineTabsProps<T>) {
+  const { accessibilityLabel, value, onValueChange, children, testID } = props;
+  const { values: order, captionSlot } = collect(children);
+  const roving = useRovingTabs({
+    count: order.length,
+    selectedIndex: order.indexOf(value),
+    onSelect: (index) => {
+      const next = order[index];
+      // The ring is built from the tabs' own `value` props, which are T.
+      if (next != null) onValueChange(next as T);
+    },
+  });
+
+  return (
+    <ScrollView horizontal showsHorizontalScrollIndicator={false} testID={testID}>
+      <PipelineContext.Provider
+        value={{ value, onValueChange: (v) => onValueChange(v as T), order, captionSlot, roving }}
+      >
+        <View
+          style={{ flexDirection: "row", alignItems: "flex-start", columnGap: 4 }}
+          accessibilityRole="tablist"
+          accessibilityLabel={accessibilityLabel}
+        >
+          {children}
+        </View>
+      </PipelineContext.Provider>
+    </ScrollView>
+  );
+}
+
+/** A box the height of the label line, sat where the label line is, so a
+ *  joiner drawn beside a tab centres on the words and not on a cell whose
+ *  centre moves when a caption line is reserved. */
+function OnLabelLine({ width, children }: { width: number; children: ReactNode }) {
+  return (
+    <View
+      style={{
+        width,
+        height: TAB_PADDING_V + TAB_LABEL_LINE,
+        paddingTop: TAB_PADDING_V,
+        alignItems: "center",
+        justifyContent: "center",
+      }}
+    >
+      {children}
+    </View>
+  );
+}
+
+/**
+ * The stages a record leaves the pipeline at — won, lost, and anything else
+ * terminal. Drawn past a rule, with no chevrons between them: they are
+ * alternatives, not a sequence. Render it last.
+ */
+export function PipelineOutcomes({ children }: { children: ReactNode }) {
+  usePipeline("PipelineOutcomes");
+  return (
+    <OutcomesContext.Provider value={true}>
+      <OnLabelLine width={SPACE.sm * 2 + 1}>
+        <View style={{ width: 1, height: 20, backgroundColor: colors.zinc["200"] }} />
+      </OnLabelLine>
+      {children}
+    </OutcomesContext.Provider>
+  );
+}
+
+export function PipelineTab<T extends string>(props: PipelineTabProps<T>) {
+  const { value, label, count, caption, status, testID } = props;
+  const { value: selectedValue, onValueChange, order, captionSlot, roving } = usePipeline("PipelineTab");
+  const inOutcomes = useContext(OutcomesContext);
+  const index = order.indexOf(value);
+
+  return (
+    <View style={{ flexDirection: "row", alignItems: "flex-start" }}>
+      {/* The chevron is what says "then": it sits between two stages of the
+          FLOW and nowhere else. The first stage has nothing before it, and an
+          outcome is not reached by walking. */}
+      {index > 0 && !inOutcomes ? (
+        <OnLabelLine width={20}>
+          <Icon name="chevron-right" size={14} color={colors.zinc["400"]} />
+        </OnLabelLine>
+      ) : null}
+      <TabButton
+        ref={roving.bindRef(index)}
+        label={label}
+        count={count}
+        status={status}
+        caption={caption}
+        captionSlot={captionSlot}
+        selected={value === selectedValue}
+        isTabStop={index === roving.tabStopIndex}
+        onPress={() => onValueChange(value)}
+        onKeyDown={(event) => roving.onKeyDown(event, index)}
+        testID={testID}
+      />
+    </View>
+  );
+}

package/src/social_post_preview.tsx

@@ -0,0 +1,187 @@
+import React from "react";
+import { StyleSheet, View } from "react-native";
+import { Avatar } from "./avatar";
+import { BrandMark, type BrandName } from "./brand_mark";
+import { Card } from "./card";
+import { colors } from "./colors";
+import { type DisplayFile } from "./file_thumbnail";
+import { FileThumbnailGrid } from "./file_thumbnail_grid";
+import { MediaPlayer } from "./media_player";
+import { isVideoMimeType } from "./mime";
+import { useLoticsLocale } from "./locale";
+import {
+  SOCIAL_NETWORK_RULES,
+  countSocialChars,
+  socialPostIssueText,
+  socialPostIssues,
+  type SocialNetwork,
+  type SocialNetworkRules,
+  type SocialPostDraft,
+  type SocialPostLink,
+} from "./social_post_rules";
+import { Text } from "./text";
+
+const NETWORK_MARK: Record<SocialNetwork, BrandName> = {
+  facebook: "facebook",
+  instagram: "instagram",
+  threads: "threads",
+  x: "x",
+  linkedin: "linkedin",
+};
+
+export interface SocialPostPreviewProps extends SocialPostDraft {
+  network: SocialNetwork;
+  /** Who the post goes out as — the name and handle the feed prints. */
+  author: { name: string; handle?: string; avatarUrl?: string };
+  /** The timestamp line. Defaults to the locale's "just now", which is what a
+   *  post that has not gone out yet would read. */
+  when?: string;
+  onFilePress?: (file: DisplayFile) => void;
+  testID?: string;
+}
+
+/**
+ * A post as one network's feed would show it — the author line, the text
+ * folded where that feed folds it, the media in the shape that feed lays it out,
+ * the link as the card or the plain text it becomes — with the count against
+ * the limit and every rule the API would refuse, in words, under it.
+ *
+ * It is a PREVIEW, so it never writes and never publishes: the app owns the
+ * draft and the button. What it owns is the knowledge of what each network
+ * does with the same three inputs, which is exactly the thing a person cannot
+ * see from an editor and finds out from a refused request otherwise. That
+ * knowledge is `social_post_rules`, which the publish gate reads too, so the
+ * button refuses exactly what the preview shows.
+ */
+export function SocialPostPreview(props: SocialPostPreviewProps) {
+  const { network, author, text, media = [], link, when, onFilePress, testID } = props;
+  const labels = useLoticsLocale().socialPostPreview;
+  const rules = SOCIAL_NETWORK_RULES[network];
+  const issues = socialPostIssues(network, { text, media, link });
+  const count = countSocialChars(text);
+  const over = count > rules.maxChars;
+  // A carousel network shows one frame at a time, so a strip that scrolls says
+  // "swipe" honestly; a feed that tiles shows the tiles and hides the rest
+  // behind a count, which is what the grid's overflow draws.
+  const carousel = rules.video === "mixed";
+
+  return (
+    <Card style={styles.card} testID={testID}>
+      <View style={styles.header}>
+        <Avatar name={author.name} size="md" source={author.avatarUrl ? { uri: author.avatarUrl } : undefined} />
+        <View style={styles.identity}>
+          <Text size="sm" weight="semibold" numberOfLines={1}>{author.name}</Text>
+          <Text size="xs" color="muted" numberOfLines={1}>
+            {[author.handle, when ?? labels.justNow].filter(Boolean).join(" · ")}
+          </Text>
+        </View>
+        <BrandMark name={NETWORK_MARK[network]} size={18} />
+      </View>
+
+      <View style={styles.body}>
+        {text.length > 0 ? <PostText text={text} rules={rules} more={labels.more} /> : null}
+
+        {media.length === 1 && isVideoMimeType(media[0].mimeType) ? (
+          // A lone video PLAYS in every feed — a tile with a play glyph is what a
+          // file list shows, not what the post will look like.
+          <View style={styles.video}>
+            <MediaPlayer src={media[0].url} kind="video" accessibilityLabel={media[0].filename} />
+          </View>
+        ) : media.length > 0 ? (
+          <FileThumbnailGrid
+            files={[...media]}
+            columns={carousel ? undefined : Math.min(media.length, 2)}
+            itemSize={carousel ? 144 : undefined}
+            singleRow={carousel}
+            maxVisible={carousel ? undefined : 4}
+            onFilePress={onFilePress}
+            disablePress={onFilePress === undefined}
+          />
+        ) : null}
+
+        {link && rules.link === "card" && (media.length === 0 || rules.linkBesideMedia) ? (
+          <LinkCard link={link} />
+        ) : null}
+      </View>
+
+      <View style={styles.footer}>
+        <Text size="xs" color={over ? "danger" : "muted"} tabular>
+          {count} / {rules.maxChars}
+        </Text>
+        {issues.map((issue) => (
+          <Text key={issue.kind} size="xs" color="danger">
+            {socialPostIssueText(issue, labels)}
+          </Text>
+        ))}
+      </View>
+    </Card>
+  );
+}
+
+/**
+ * The text as the feed shows it: folded at the network's fold with the "more"
+ * the reader would tap, and — when it is over the limit — the tail the network
+ * would refuse drawn in the danger ink, unfolded, because a fold would hide the
+ * very characters the person has to cut.
+ */
+function PostText({ text, rules, more }: { text: string; rules: SocialNetworkRules; more: string }) {
+  const chars = Array.from(text);
+  if (chars.length > rules.maxChars) {
+    return (
+      <Text size="sm">
+        {chars.slice(0, rules.maxChars).join("")}
+        <Text size="sm" color="danger">{chars.slice(rules.maxChars).join("")}</Text>
+      </Text>
+    );
+  }
+  if (rules.foldChars !== null && chars.length > rules.foldChars) {
+    return (
+      <Text size="sm">
+        {chars.slice(0, rules.foldChars).join("")}…{" "}
+        <Text size="sm" color="muted">{more}</Text>
+      </Text>
+    );
+  }
+  return <Text size="sm">{text}</Text>;
+}
+
+function domainOf(url: string): string {
+  try {
+    return new URL(url).hostname.replace(/^www\./, "");
+  } catch {
+    return url;
+  }
+}
+
+function LinkCard({ link }: { link: SocialPostLink }) {
+  return (
+    <View style={styles.linkCard}>
+      <Text size="xs" color="muted" numberOfLines={1}>{domainOf(link.url)}</Text>
+      <Text size="sm" weight="semibold" numberOfLines={2}>{link.title ?? link.url}</Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  card: { padding: 0, maxWidth: 520, width: "100%" },
+  header: { flexDirection: "row", alignItems: "center", gap: 10, paddingHorizontal: 16, paddingTop: 14 },
+  identity: { flex: 1, minWidth: 0 },
+  body: { paddingHorizontal: 16, paddingVertical: 12, gap: 12 },
+  video: { width: "100%", aspectRatio: 16 / 9, borderRadius: 8, overflow: "hidden", backgroundColor: colors.zinc["900"] },
+  linkCard: {
+    borderWidth: 1,
+    borderColor: colors.zinc["200"],
+    borderRadius: 8,
+    backgroundColor: colors.zinc["50"],
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    gap: 2,
+  },
+  footer: {
+    borderTopWidth: 1,
+    borderTopColor: colors.zinc["200"],
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+    gap: 2,
+  },
+});

package/src/social_post_rules.ts

@@ -0,0 +1,192 @@
+import type { DisplayFile } from "./file_thumbnail";
+
+/**
+ * The networks a post can be previewed FOR — the ones whose feed shape and
+ * publishing rules this module knows. A surface with no API (a personal Facebook
+ * profile, a group, a Zalo OA) has no entry: what it accepts is decided by a
+ * person pasting, not by a request the platform can refuse.
+ *
+ * RN-free on purpose: the publish gate in an app reads this without rendering
+ * anything, and the locale packs type their labels off it.
+ */
+export const SOCIAL_NETWORKS = ["facebook", "instagram", "threads", "x", "linkedin"] as const;
+
+export type SocialNetwork = (typeof SOCIAL_NETWORKS)[number];
+
+/**
+ * What one network's feed does with a post, and what its API refuses.
+ *
+ * Two kinds of fact, deliberately in one place: the FOLD (where the feed hides
+ * the rest behind "more") is a display fact, the rest are publishing rules the
+ * API enforces after the bytes have travelled. Both are what a person needs to
+ * see BEFORE pressing publish, so the preview and the gate read one table.
+ */
+export interface SocialNetworkRules {
+  /** The characters the API accepts. Counted in code points — X weights URLs
+   *  and CJK differently, so the count is a guide there, not the network's own. */
+  maxChars: number;
+  /** Where the feed folds the text behind "more", or null when it never does. */
+  foldChars: number | null;
+  /** The most images one post carries, or null when the API sets no count. */
+  maxImages: number | null;
+  /** Whether a video has to be the only attachment. */
+  video: "alone" | "mixed";
+  /** Whether a GIF is its own kind that goes alone (X) or just an image. */
+  gif: "alone" | "image";
+  /** What a link becomes: a card, or plain text the feed does not open. */
+  link: "card" | "text";
+  /** Whether the API takes a link beside media, or refuses the pair. */
+  linkBesideMedia: boolean;
+  /** Whether a post with no media is refused. */
+  requiresMedia: boolean;
+}
+
+export const SOCIAL_NETWORK_RULES: Record<SocialNetwork, SocialNetworkRules> = {
+  facebook: {
+    maxChars: 63206,
+    foldChars: 477,
+    maxImages: null,
+    video: "alone",
+    gif: "image",
+    link: "card",
+    linkBesideMedia: false,
+    requiresMedia: false,
+  },
+  instagram: {
+    maxChars: 2200,
+    foldChars: 125,
+    maxImages: 10,
+    video: "mixed",
+    gif: "image",
+    // A URL in a caption is inert text. Drawn as no card, not as a refusal:
+    // the API takes it, the reader just cannot tap it.
+    link: "text",
+    linkBesideMedia: true,
+    requiresMedia: true,
+  },
+  threads: {
+    maxChars: 500,
+    foldChars: null,
+    maxImages: 20,
+    video: "mixed",
+    gif: "image",
+    link: "card",
+    linkBesideMedia: false,
+    requiresMedia: false,
+  },
+  x: {
+    maxChars: 280,
+    foldChars: null,
+    maxImages: 4,
+    video: "alone",
+    gif: "alone",
+    link: "card",
+    linkBesideMedia: true,
+    requiresMedia: false,
+  },
+  linkedin: {
+    maxChars: 3000,
+    foldChars: 210,
+    maxImages: 20,
+    video: "alone",
+    gif: "image",
+    link: "card",
+    linkBesideMedia: false,
+    requiresMedia: false,
+  },
+};
+
+/** The network's own name. Proper nouns, so not in the locale packs. */
+export const SOCIAL_NETWORK_LABELS: Record<SocialNetwork, string> = {
+  facebook: "Facebook",
+  instagram: "Instagram",
+  threads: "Threads",
+  x: "X",
+  linkedin: "LinkedIn",
+};
+
+export interface SocialPostLink {
+  url: string;
+  title?: string;
+}
+
+/** What a post IS before it goes out — the three things every network takes. */
+export interface SocialPostDraft {
+  text: string;
+  media?: readonly DisplayFile[];
+  link?: SocialPostLink | null;
+}
+
+export type SocialPostIssue =
+  | { kind: "over_limit"; over: number; max: number }
+  | { kind: "needs_media" }
+  | { kind: "too_many_images"; max: number }
+  | { kind: "video_alone" }
+  | { kind: "gif_alone" }
+  | { kind: "link_or_media" };
+
+/** Code points, so a Vietnamese vowel with its tone is one character. */
+export function countSocialChars(text: string): number {
+  return Array.from(text).length;
+}
+
+function mediaKind(file: DisplayFile): "video" | "gif" | "image" {
+  if (file.mimeType.startsWith("video/")) return "video";
+  if (file.mimeType === "image/gif") return "gif";
+  return "image";
+}
+
+/**
+ * Everything the network would refuse, from the draft alone — so the gate can
+ * close before the bytes travel, and say why in the same words the preview does.
+ * An empty list is not a promise the post lands (a token can have expired, a
+ * container can fail to process); it is the promise the REQUEST is well-formed.
+ */
+export function socialPostIssues(network: SocialNetwork, draft: SocialPostDraft): SocialPostIssue[] {
+  const rules = SOCIAL_NETWORK_RULES[network];
+  const media = draft.media ?? [];
+  const kinds = media.map(mediaKind);
+  const videos = kinds.filter((k) => k === "video").length;
+  const gifs = kinds.filter((k) => k === "gif").length;
+  const images = media.length - videos - (rules.gif === "alone" ? gifs : 0);
+  const issues: SocialPostIssue[] = [];
+
+  const count = countSocialChars(draft.text);
+  if (count > rules.maxChars) issues.push({ kind: "over_limit", over: count - rules.maxChars, max: rules.maxChars });
+  if (rules.requiresMedia && media.length === 0) issues.push({ kind: "needs_media" });
+  if (rules.maxImages !== null && images > rules.maxImages) issues.push({ kind: "too_many_images", max: rules.maxImages });
+  if (rules.video === "alone" && videos > 0 && media.length > 1) issues.push({ kind: "video_alone" });
+  if (rules.gif === "alone" && gifs > 0 && media.length > 1) issues.push({ kind: "gif_alone" });
+  if (draft.link && media.length > 0 && !rules.linkBesideMedia) issues.push({ kind: "link_or_media" });
+  return issues;
+}
+
+export interface SocialPostPreviewLabels {
+  more: string;
+  justNow: string;
+  overLimit: (over: number) => string;
+  needsMedia: string;
+  tooManyImages: (max: number) => string;
+  videoAlone: string;
+  gifAlone: string;
+  linkOrMedia: string;
+}
+
+/** One issue, in the pack's words — the same sentence beside the preview and on
+ *  the gate that reads the same list. */
+export function socialPostIssueText(issue: SocialPostIssue, labels: SocialPostPreviewLabels): string {
+  switch (issue.kind) {
+    case "over_limit":
+      return labels.overLimit(issue.over);
+    case "needs_media":
+      return labels.needsMedia;
+    case "too_many_images":
+      return labels.tooManyImages(issue.max);
+    case "video_alone":
+      return labels.videoAlone;
+    case "gif_alone":
+      return labels.gifAlone;
+    case "link_or_media":
+      return labels.linkOrMedia;
+  }
+}

package/src/tabs.tsx

@@ -1,5 +1,5 @@
-import { useCallback, useRef } from "react";
 import { View } from "react-native";
+import { useRovingTabs } from "./use_roving_tabs";
 import { PressableHighlight } from "./pressable_highlight";
 import { Text } from "./text";
 import { colors, solid, type ColorName } from "./colors";
@@ -25,6 +25,11 @@ export interface TabOption<T extends string> {
    *  band counts what matched, not what rendered. Omit when every band is
    *  always whole. */
   count?: number;
+  /** A second line under the label — one figure the band is read by (the money
+   *  in it, what is overdue), already formatted. Once ANY tab in a strip carries
+   *  one, every tab reserves the line, so the strip keeps one height and the
+   *  labels one baseline. */
+  caption?: string;
 }
 
 interface TabsProps<T extends string> {
@@ -37,43 +42,13 @@ interface TabsProps<T extends string> {
 
 export function Tabs<T extends string>(props: TabsProps<T>) {
   const { accessibilityLabel, options, selectedTab, onSelectTab } = props;
-  const tabRefs = useRef<Array<View | null>>([]);
-
-  // Roving tabindex + arrow-key navigation per the WAI-ARIA Tabs pattern.
-  // Home/End jump to the ends; Left/Right cycle.
-  const handleKeyDown = useCallback(
-    (event: { key: string; preventDefault?: () => void }, index: number) => {
-      const last = options.length - 1;
-      let next = index;
-      switch (event.key) {
-        case "ArrowRight":
-        case "ArrowDown":
-          next = index === last ? 0 : index + 1;
-          break;
-        case "ArrowLeft":
-        case "ArrowUp":
-          next = index === 0 ? last : index - 1;
-          break;
-        case "Home":
-          next = 0;
-          break;
-        case "End":
-          next = last;
-          break;
-        default:
-          return;
-      }
-      event.preventDefault?.();
-      onSelectTab?.(options[next].value);
-      tabRefs.current[next]?.focus();
-    },
-    [onSelectTab, options],
-  );
-
-  // When no tab matches the current selection, the first tab becomes the
-  // tab-stop so keyboard users can still enter the group.
   const selectedIndex = options.findIndex((option) => option.value === selectedTab);
-  const tabStopIndex = selectedIndex === -1 ? 0 : selectedIndex;
+  const roving = useRovingTabs({
+    count: options.length,
+    selectedIndex,
+    onSelect: (index) => onSelectTab?.(options[index].value),
+  });
+  const captionSlot = options.some((option) => option.caption != null);
 
   return (
     <View
@@ -83,62 +58,63 @@ export function Tabs<T extends string>(props: TabsProps<T>) {
     >
       {options.map((option, index) => (
         <TabButton
-          ref={(node: View | null) => {
-            tabRefs.current[index] = node;
-          }}
+          ref={roving.bindRef(index)}
           key={option.value}
-          option={option}
+          label={option.label}
+          count={option.count}
+          status={option.status}
+          caption={option.caption}
+          captionSlot={captionSlot}
+          testID={option.testID}
           selected={selectedTab === option.value}
-          isTabStop={index === tabStopIndex}
-          onSelectTab={onSelectTab}
-          onKeyDown={(event) => handleKeyDown(event, index)}
+          isTabStop={index === roving.tabStopIndex}
+          onPress={() => onSelectTab?.(option.value)}
+          onKeyDown={(event) => roving.onKeyDown(event, index)}
         />
       ))}
     </View>
   );
 }
 
-interface TabButtonProps<T extends string> {
+/** The pill's vertical inset. Exported so a strip that draws something BESIDE
+ *  a tab (a joiner, a rule) can sit it on the label line rather than the
+ *  cell's centre, which moves the moment a caption line is reserved. */
+export const TAB_PADDING_V = 8;
+/** The label line's height — the body rung's line box. */
+export const TAB_LABEL_LINE = 24;
+const DOT = 6;
+const DOT_GAP = 6;
+
+export interface TabButtonProps {
   ref: (node: View | null) => void;
-  option: TabOption<T>;
+  label: string;
+  count?: number;
+  status?: ColorName;
+  caption?: string;
+  /** Reserve the caption line even when this tab has none — the strip decides,
+   *  so every tab in it stands the same height. */
+  captionSlot?: boolean;
   selected: boolean;
   isTabStop: boolean;
-  onSelectTab?: (value: T) => void;
+  onPress: () => void;
   onKeyDown: (event: { key: string; preventDefault?: () => void }) => void;
+  testID?: string;
 }
 
-function TabButton<T extends string>(props: TabButtonProps<T>) {
-  const { ref, option, selected, isTabStop, onSelectTab, onKeyDown } = props;
-
-  const handlePress = useCallback(() => {
-    onSelectTab?.(option.value);
-  }, [option.value, option.label, option.testID, onSelectTab]);
-
-  const inner = (
-    <View style={{ flexDirection: "row", alignItems: "center", gap: 6 }}>
-      {option.status ? (
-        <View style={{ width: 6, height: 6, borderRadius: 999, backgroundColor: solid(option.status) }} />
-      ) : null}
-      <Text
-        weight={selected ? "medium" : "regular"}
-        color={selected ? "default" : "muted"}
-        userSelect="none"
-      >
-        {option.label}
-      </Text>
-      {option.count != null ? (
-        <Text color="muted" tabular userSelect="none">
-          {option.count}
-        </Text>
-      ) : null}
-
-    </View>
-  );
+/**
+ * ONE tab — the anatomy `Tabs` and `PipelineTabs` share, so the two strips
+ * cannot drift by a pixel: the dot, the label, the count, the optional caption
+ * line, the single hover wash on the inner pill, and the primary underline.
+ */
+export function TabButton(props: TabButtonProps) {
+  const { ref, label, count, status, caption, captionSlot = false, selected, isTabStop, onPress, onKeyDown, testID } =
+    props;
 
   return (
     <PressableHighlight
       focusRing
-      ref={ref}      style={{
+      ref={ref}
+      style={{
         // WHERE YOU ARE, painted in the INK THAT ACTS — `colors.primary`, which
         // defaults to near-black. A tab rail is the only thing on a screen that
         // answers "which section am I in", and a neutral grey underline would be
@@ -153,21 +129,17 @@ function TabButton<T extends string>(props: TabButtonProps<T>) {
         // at page scale, so it reads as one product rather than two brands.
         borderBottomWidth: 3,
         borderBottomColor: selected ? colors.primary : "transparent",
+        // Transparent HERE so the one hover wash is the inner pill's.
         backgroundColor: "transparent",
         paddingBottom: 4,
       }}
-      onPress={handlePress}
+      onPress={onPress}
       onKeyDown={onKeyDown}
-      testID={option.testID}
+      testID={testID}
       accessibilityRole="tab"
-      accessibilityLabel={option.label}
+      accessibilityLabel={label}
       aria-selected={selected}
-      // Roving tabindex: the selected tab is the tab-stop, others are reachable
-      // via arrow keys. When no tab matches the current selection (props.value
-      // is stale), the first tab is the fallback so the group stays keyboard-
-      // reachable. Drive it with tabIndex, NOT focusable: RN-Web's Pressable
-      // ignores `focusable` (it writes its own tabIndex), so a focusable-based
-      // roving model silently leaves every tab a tab-stop.
+      // Roving tabindex — see `useRovingTabs` for why it is `tabIndex`.
       tabIndex={isTabStop ? 0 : -1}
     >
       {(state) => {
@@ -176,7 +148,7 @@ function TabButton<T extends string>(props: TabButtonProps<T>) {
         return (
           <View
             style={{
-              paddingVertical: 8,
+              paddingVertical: TAB_PADDING_V,
               paddingHorizontal: 16,
               borderRadius: CONTROL_RADIUS,
               backgroundColor: pressed
@@ -186,7 +158,40 @@ function TabButton<T extends string>(props: TabButtonProps<T>) {
                   : "transparent",
             }}
           >
-            {inner}
+            <View style={{ flexDirection: "row", alignItems: "center", gap: DOT_GAP, height: TAB_LABEL_LINE }}>
+              {status ? (
+                <View style={{ width: DOT, height: DOT, borderRadius: 999, backgroundColor: solid(status) }} />
+              ) : null}
+              <Text
+                weight={selected ? "medium" : "regular"}
+                color={selected ? "default" : "muted"}
+                userSelect="none"
+                numberOfLines={1}
+              >
+                {label}
+              </Text>
+              {count != null ? (
+                <Text color="muted" tabular userSelect="none">
+                  {count}
+                </Text>
+              ) : null}
+            </View>
+            {captionSlot || caption != null ? (
+              // Indented past the dot so it starts under the LABEL's first letter
+              // — a caption flush with the dot reads as belonging to the dot.
+              <Text
+                size="xs"
+                color="muted"
+                tabular
+                userSelect="none"
+                numberOfLines={1}
+                style={{ marginLeft: status ? DOT + DOT_GAP : 0 }}
+              >
+                {/* A no-break space, not a space: whitespace-only text collapses
+                    to no height on web, and the reserved line with it. */}
+                {caption ?? " "}
+              </Text>
+            ) : null}
           </View>
         );
       }}

package/src/use_roving_tabs.ts

@@ -0,0 +1,75 @@
+import { useCallback, useRef } from "react";
+import type { View } from "react-native";
+
+export interface RovingTabsOptions {
+  /** How many tabs the strip holds. */
+  count: number;
+  /** Index of the selected tab, or -1 when the selection matches none. */
+  selectedIndex: number;
+  /** Arrow keys SELECT as they move — automatic activation, the pattern a tab
+   *  strip whose panels are cheap to show follows. */
+  onSelect: (index: number) => void;
+}
+
+export interface RovingTabs {
+  /** The ONE tab that is a tab stop. When nothing is selected the first tab
+   *  takes it, so a strip whose `selected` went stale stays keyboard-reachable. */
+  tabStopIndex: number;
+  /** `onKeyDown` for the tab at `index`: Left/Right and Up/Down cycle (wrapping),
+   *  Home/End jump to the ends; each selects AND moves focus. */
+  onKeyDown: (event: { key: string; preventDefault?: () => void }, index: number) => void;
+  /** `ref` for the tab at `index`, so the hook can move focus to it. */
+  bindRef: (index: number) => (node: View | null) => void;
+}
+
+/**
+ * The WAI-ARIA tabs keyboard contract — roving tabindex plus arrow-key
+ * navigation — shared by every strip that is a `tablist` (`Tabs`, `Pipeline`),
+ * so the two cannot drift on which keys do what.
+ *
+ * The tab stop is driven with `tabIndex`, NOT `focusable`: RN-Web's Pressable
+ * ignores `focusable` (it writes its own tabIndex), so a focusable-based roving
+ * model silently leaves every tab a tab stop.
+ */
+export function useRovingTabs(options: RovingTabsOptions): RovingTabs {
+  const { count, selectedIndex, onSelect } = options;
+  const refs = useRef<Array<View | null>>([]);
+
+  const onKeyDown = useCallback(
+    (event: { key: string; preventDefault?: () => void }, index: number) => {
+      const last = count - 1;
+      let next = index;
+      switch (event.key) {
+        case "ArrowRight":
+        case "ArrowDown":
+          next = index === last ? 0 : index + 1;
+          break;
+        case "ArrowLeft":
+        case "ArrowUp":
+          next = index === 0 ? last : index - 1;
+          break;
+        case "Home":
+          next = 0;
+          break;
+        case "End":
+          next = last;
+          break;
+        default:
+          return;
+      }
+      event.preventDefault?.();
+      onSelect(next);
+      refs.current[next]?.focus();
+    },
+    [count, onSelect],
+  );
+
+  const bindRef = useCallback(
+    (index: number) => (node: View | null) => {
+      refs.current[index] = node;
+    },
+    [],
+  );
+
+  return { tabStopIndex: selectedIndex === -1 ? 0 : selectedIndex, onKeyDown, bindRef };
+}