# @lotics/ui

> React DOM components for Lotics apps, one canonical entry per data role. Name the role, import
> the entry, read its `.d.ts` for props. `import "@lotics/ui/styles.css"` once in the app entry.

Customize through TOKENS and PROPS; `className`/`style` only place an entry's root. A gap the
props leave is a kit variant, never CSS reaching inside.

**A SCREEN is one register and the record its rows open**, composed as
[docs/screen.md](docs/screen.md) states, `RecordFrame` for the record.

**Each line: role → entry, import · the question that says where it does NOT go.** Indented: a
VARIANT, by its prop; "folds into `X`" means write X.

- a band of headline figures → `MetricStrip` `@lotics/ui/metric_strip` · Is the band over a REGISTER's rows?
- a bounded scroller → `ScrollArea` `@lotics/ui/scroll_area` · Is the page itself the scroller?
- a callout's message → `CalloutTitle` `@lotics/ui/callout` · Is it what the message means for the reader — what it refuses, what to do next?
- a callout's verbs → `CalloutActions` `@lotics/ui/callout` · Is the outcome one the reader does nothing about?
- a card's closing row → `CardFooter` `@lotics/ui/card` · Does the footer hold the primary act?
- a card's content → `CardBody` `@lotics/ui/card` · Is the content the whole card?
- a card's heading detail → `CardHeaderMeta` `@lotics/ui/card` · Is the detail a status?
- a card's heading row → `CardHeader` `@lotics/ui/card` · Is the add verb elsewhere?
- a card's title → `CardHeaderTitle` `@lotics/ui/card` · Is the card a page section?
- a categorical cross-tab — a roster of resources by day or by kind → `StateMatrix` `@lotics/ui/state_matrix` · Does a blank cell mean zero?
  - `StateMatrix cells="words"` · Does the reader need WHO or WHERE inside the cell — a week's roster?
  - `StateMatrix axis="none"` · Are the positions named?
  - `StateMatrix mark="intensity"` · Does the reader need the NUMBER?
  - `StateMatrix onSelectState` · Is the legend informational?
  - `StateMatrix onAddCell` · Does the reader write the rows the cells stand for — a shift, a trip, a booking on a resource's day?
- a checklist row's note → `ChecklistNote` `@lotics/ui/checklist` · Is the text a field's hint?
- a checklist row's verbs → `ChecklistActions` `@lotics/ui/checklist` · Is the verb about the whole list?
- a checklist's band of rows → `ChecklistGroup` `@lotics/ui/checklist` · Is the group a phase of a sequence?
- a child told its measured box → `AutoSizer` `@lotics/ui/auto_sizer` · Does the child already fill its parent?
- a clarify wizard's action bar → `ClarifyWizardActions` `@lotics/ui/clarify_wizard` · Is there no `ClarifyWizardDialog` above it?
- a clarify wizard's dialog frame → `ClarifyWizardDialog` `@lotics/ui/clarify_wizard` · Is there a second wizard inside?
- a column's sort control → `SortHeader` `@lotics/ui/sort_header` · Does the set arrive sorted by the server?
- a cross-tab's cells → `MatrixGrid` `@lotics/ui/matrix` · Are the totals inside it?
- a cross-tab's column headings → `MatrixHeader` `@lotics/ui/matrix` · Are the columns the subject?
- a cross-tab's heat legend → `MatrixLegend` `@lotics/ui/matrix` · Is there no wash behind the numbers?
- a cross-tab's totals → `MatrixTotals` `@lotics/ui/matrix` · Is the total computed off another array?
- a date field → `DatePicker` `@lotics/ui/date_picker` · Is the reader choosing a RANGE of days?
  - `DatePicker format="time"` · Does the record keep the DAY as well?
- a date field's panel → `DatePickerPanel` `@lotics/ui/date_picker` · Is there a field to anchor it?
- a date the system recorded → `DateStamp` `@lotics/ui/date_stamp` · Is the date something a person ENTERS?
- a decision that blocks everything else → `Alert` `@lotics/ui/alert` · Is the act DESTRUCTIVE?
  - `Alert tone` · Is the act a delete?
- a destination outside this screen → `Link` `@lotics/ui/link` · Does the press stay here?
- a dialog's back affordance → `DialogNavigationProvider` `@lotics/ui/dialog` · Is the dialog the kit's?
- a dialog's body → `DialogScrollArea` `@lotics/ui/dialog` · Does the body swap content?
- a dialog's commit row → `DialogFooter` `@lotics/ui/dialog` · Is Save on the left?
- a dialog's heading row → `DialogHeader` `@lotics/ui/dialog` · Is there no title?
- a dialog's heading verbs → `DialogHeaderActions` `@lotics/ui/dialog` · Is the primary act here?
- a dialog's title → `DialogHeaderTitle` `@lotics/ui/dialog` · Is a size being passed?
- a facet the reader can dismiss → `Chip` `@lotics/ui/chip` · Is it a status?
- a field value's own acts — a list's add — stood at the end of its field's label line → `FormFieldActs` `@lotics/ui/form_field` · Is the act the record's, or the section's?
- a figure's range the screen is filtered to → `NumberFilter` `@lotics/ui/number_filter` · Does the figure live in a small known domain — a percent, one against a fixed bound?
- a file identified by its NAME → `FileRow` `@lotics/ui/file_row` · Is the file a photo, a scan or a drawing?
- a file identified by its PICTURE → `FileThumbnail` `@lotics/ui/file_thumbnail` · Is the file one among documents read by name?
- a file rendered in place → `FilePreview` `@lotics/ui/file_preview` · Is the turn meant to stick?
- a file's type mark → `FileBadge` `@lotics/ui/file_badge` · Is the file an image?
- a filter pill hosting its own editor → `FilterChip` `@lotics/ui/filter_chip` · Does the editor commit on its own?
  - `FilterChip column` · Is the facet's editor the caller's own?
- a finished recording and its transcript → `Recording` `@lotics/ui/recording` · Is it one media file with no transcript?
- a fixed gap between siblings → `Spacer` `@lotics/ui/spacer` · Is the gap between every child of one run?
- a flat screen stack → `ScreenRouter` `@lotics/ui/screen_router` · Does the surface bring dialog chrome?
  - `ScreenRouterContext` `@lotics/ui/screen_router` — the context object, for a container that publishes navigation of its own · Are you READING the stack?
- a fold's body → `AccordionContent` `@lotics/ui/accordion` · Is the body a whole screen?
- a fold's heading detail → `AccordionMeta` `@lotics/ui/accordion` · Is the detail the reason to open?
- a fold's heading row → `AccordionHeader` `@lotics/ui/accordion` · Is the content always open?
- a fold's title → `AccordionTitle` `@lotics/ui/accordion` · Is the title the section's?
- a glyph from the kit's set → `Icon` `@lotics/ui/icon` · Is the glyph the whole of a press?
- a grid of measures you edit in view → `DataGrid` `@lotics/ui/data_grid` · Is the set thousands of rows?
- a group's heading row → `SubsectionHeading` `@lotics/ui/section_heading` · Is the group a page section?
- a group's title → `SubsectionHeadingTitle` `@lotics/ui/section_heading` · Is a weight being passed?
- a hairline between blocks → `Divider` `@lotics/ui/divider` · Is it separating the rows of a register?
- a headline figure → `Metric` `@lotics/ui/metric` · Is the figure one of a band?
  - `Metric unit` · Is the figure preformatted words?
  - `Metric also` · Is it one sum over rows held in different units or currencies?
- a hint on hover → `TooltipContent` `@lotics/ui/tooltip` · Is the hint needed to act?
- a hint's frame → `Tooltip` `@lotics/ui/tooltip` · Is the hint what the control is FOR?
- a keystroke printed where it applies → `ShortcutBadge` `@lotics/ui/shortcut_badge` · Is there a keyboard?
- a labelled field → `FormField` `@lotics/ui/form_field` · Is the field in a record's value column?
  - `FormField layout="control-first"` · Does the control READ as the value?
  - `FormField layout="beside"` · Is it a form of a few fields in a dialog?
- a link to another record → `ReferenceField` `@lotics/ui/reference_field` · Are the other record's fields on this one?
- a linked row, where it is picked or chosen → `LinkValue` `@lotics/ui/link_value` · Is the row opened from its register?
- a list body you pick from → `OptionList` `@lotics/ui/option_list` · Is there a field above it?
- a list whose ORDER the reader sets → `ReorderList` `@lotics/ui/reorder_list` · Does the order survive a reload?
  - `ReorderList reorder="buttons"` · Is the number of positions FIXED?
- a long page's outline → `SectionNav` `@lotics/ui/section_nav` · Is the surface a RECORD?
  - `SectionNav items` · Is the item a step of work that progresses?
- a menu's trigger → `MenuButton` `@lotics/ui/menu_button` · Does the press DO something?
- a named group inside a region → `Subsection` `@lotics/ui/section_heading` · Is it a top-level block?
- a number the reader ENTERS → `NumberInput` `@lotics/ui/number_input` · Is the reader choosing from the SHAPE of a continuous range?
  - `NumberInput stepper` · Is the target more than a few steps away?
  - `NumberInput format` · Is the figure a quantity in a unit — kg, CBM, kiện?
  - `NumberInput unit` · Is the figure money or a share?
- a numeric cross-tab → `Matrix` `@lotics/ui/matrix` · Is the cell a STATE rather than a number?
- a padded block → `Box` `@lotics/ui/box` · Is there more than one child to space?
- a page's content column → `SectionStack` `@lotics/ui/section_stack` · Are these the groups INSIDE one section?
  - `SubsectionStack` `@lotics/ui/section_stack` — the lower altitude — a section's own groups, at the 24px beat · Are these top-level page blocks?
- a period the screen is filtered to → `DateFilter` `@lotics/ui/date_filter` · Does the reader NAVIGATE the period rather than choose it?
  - `DateFilter variant="field"` · Is the filter always on screen?
- a person shown inline → `MemberChip` `@lotics/ui/member_chip` · Is the person one column of a register?
  - `MemberChip chrome="cell"` · Is the person the row's SUBJECT — a roster, a directory?
- a pile of files browsed full-screen → `FileGalleryDialog` `@lotics/ui/file_gallery_dialog` · Is there one file?
- a pile of files read as a grid → `FileThumbnailGrid` `@lotics/ui/thumbnail_grid` · Are the files documents?
- a pile of files read as a list → `FileRows` `@lotics/ui/file_rows` · Is it a record's files, pictures among them?
- a placeholder in the shape of the content → `Skeleton` `@lotics/ui/skeleton` · Is the shape unknown?
- a popover's back row → `PopoverNavHeader` `@lotics/ui/popover_nav` · Can the reader go back?
- a popover's commit row → `PopoverFooter` `@lotics/ui/popover` · Does the editor commit on its own?
- a popover's frame → `Popover` `@lotics/ui/popover` · Is the panel anchored to nothing?
- a popover's heading row → `PopoverHeader` `@lotics/ui/popover` · Is the popover one line?
- a popover's trigger → `PopoverTrigger` `@lotics/ui/popover` · Does the child install an `onClick` of its own?
- a portal target for the subtree under it → `PortalHost` `@lotics/ui/portal` · Is the overlay the kit's?
- a post as one network would show it → `SocialPostPreview` `@lotics/ui/social_post_preview` · Is the network a guess, or does no API reach it?
- a quantity beside its subject → `Count` `@lotics/ui/count` · Is the number a STATUS?
  - `Count more` · Is the number how many there are?
- a raw payload, read → `RawPayload` `@lotics/ui/raw_payload` · Is the reader not a developer?
- a receipt's outcome strip → `ResultHeader` `@lotics/ui/result_header` · Is the subject the record rather than what just happened?
- a recessed block inside a surface → `Well` `@lotics/ui/well` · Is the content a MESSAGE?
- a record opened from its register → `RecordFrame` `@lotics/ui/record_frame` · Are you placing the record's parts yourself, or deciding when its sections get a rail or tabs?
- a record ROW's attachments → `InlineFiles` `@lotics/ui/inline_files` · Are the files a whole SECTION?
- a record's own fields, by group → `FactGroups` `@lotics/ui/fact_groups` · Is it a draft the reader may abandon?
- a recording, live, through to its transcript → `RecordingRun` `@lotics/ui/recording_run` · Is the run an agent's?
  - `RecordingRun variant="pane"` · Has the person moved on to other work?
  - `RecordingRun variant="panel"` · Is the recording the screen's subject?
  - `RecordingRun variant="pill"` · Has the person not asked to fold it away?
- a recording's sources and settings → `CaptureSources` `@lotics/ui/capture_sources` · Is the reader starting agent work?
- a region of a page → `Section` `@lotics/ui/section_heading` · Is the region INSIDE another section?
- a region taking dropped or pasted files → `FileDropTarget` `@lotics/ui/file_drop_target` · Is the region a well?
- a region with nothing to show yet → `RegionState` `@lotics/ui/region_state` · Is there still content in the region?
  - `RegionState compact` · Is the empty thing the whole SCREEN?
- a region's heading detail → `SectionHeadingMeta` `@lotics/ui/section_heading` · Is the act in the meta slot?
- a region's heading row → `SectionHeading` `@lotics/ui/section_heading` · Is the rung picked at the call site?
- a region's title → `SectionHeadingTitle` `@lotics/ui/section_heading` · Is a size being passed?
- a register of records → `Table` `@lotics/ui/table` · Are all the columns measures you came to COMPARE?
  - `Table priority="never"` · Is the column merely important?
- a register's cell → `TableCell` `@lotics/ui/table` · Is the column hidden on narrow screens?
- a register's group band → `TableGroup` `@lotics/ui/table` · Does the register PAGE?
  - `TableGroup head` · Is the band a state rather than a record?
- a register's pager → `Pagination` `@lotics/ui/pagination` · Is there a second pager below the rows?
- a register's row → `TableRow` `@lotics/ui/table` · Is the extra fact needed by EVERY row?
- a register's rows as cards or tiles → `CardGrid` `@lotics/ui/card_grid` · Do the rows have nothing to be recognised BY?
  - `CardGrid variant="tile"` · Is the card carrying facts?
- a register's status, with its counts → `StatusChips` `@lotics/ui/status_chips` · Is the field not the register's status?
- a repeating weekly pattern → `Timetable` `@lotics/ui/timetable` · Do the slots fall on DATES?
- a routed popover's stack → `PopoverNavContext` `@lotics/ui/popover_nav` · Are you reading the route?
- a row in a list you pick from → `ListItem` `@lotics/ui/list_item` · Is the row a RECORD in a register?
  - `ListItem variant="option"` · Does the right slot hold a CONTROL?
  - `ListItem overline` · Is the line the subject's STATE?
- a row that opens its record → `PressableRow` `@lotics/ui/pressable_row` · Does the row carry its own controls?
- a run of children on one axis → `Stack` `@lotics/ui/stack` · Is the run a screen's whole body?
  - `Stack columns` · Are the children unequal?
- a run of language → `Text` `@lotics/ui/text` · Does the surface decide its size?
- a run of rows → `List` `@lotics/ui/list` · Are the rows columnar?
- a run of steps with a current position → `Stepper` `@lotics/ui/stepper` · Do the rows get MARKED by the reader?
- a screen stack's route registry → `ScreenRouterInternalContext` `@lotics/ui/screen_router` · Is a screen being registered?
- a screen's body → `PageContent` `@lotics/ui/page_content` · Is this inside an overlay?
  - `PageContent size` · Is the cap a number of your own?
- a screen's identity band → `PageHeader` `@lotics/ui/page_header` · Is the subject a RECORD?
- a scroller pinned to its newest content → `FollowScroll` `@lotics/ui/follow_scroll` · Is the reader browsing rather than watching?
  - `FollowScroll showJumpToLatest` · Does the feed grow at the TOP?
- a section's add → `SectionHeadingAdd` `@lotics/ui/section_heading` · Is the add an opener inside the body — under the last row, at the foot of a queue, above a composer?
- a section's attachment surface → `FilesEditor` `@lotics/ui/files_editor` · Are the files one record ROW's?
- a self-contained item → `Card` `@lotics/ui/card` · Is the card a GROUPING device?
- a semantic region of the page → `Landmark` `@lotics/ui/landmark` · Is the region already one?
- a series over time → `LineChart` `@lotics/ui/line_chart` · Is the last bucket partial?
- a set of files' add in a heading its host draws → `FileAddButton` `@lotics/ui/files_editor` · Does the set draw its own head?
- a set's shape → `Summary` `@lotics/ui/summary` · Do the buckets overlap?
  - `Summary total` · Is the figure a literal?
  - `Summary metrics` · Is the figure a slice of the set?
  - `Summary distribution=false` · Do the buckets add up to the whole?
- a setting that takes effect at once → `Switch` `@lotics/ui/switch` · Does the change need saving?
- a settings row that toggles → `SwitchRow` `@lotics/ui/switch_row` · Does the row hold a second control?
- a shape over time, at cell size → `Sparkline` `@lotics/ui/sparkline` · Are the values to be read?
- a short option set asked on a form → `OptionToggles` `@lotics/ui/option_toggles` · Is it a parameter of the VIEW rather than the record?
  - `OptionToggles multi` · Is the arity a display choice?
  - `OptionToggles mark` · Did the call site pick it?
- a side panel over the screen → `Drawer` `@lotics/ui/drawer` · Is the detail light?
- a side panel's body → `DrawerScrollArea` `@lotics/ui/drawer` · Does the panel step between records?
- a side panel's commit row → `DrawerFooter` `@lotics/ui/drawer` · Do the edits save on their own?
- a small overlay anchored to a control → `PopoverContent` `@lotics/ui/popover` · Is the content a form?
- a stack of labelled fields → `DetailTable` `@lotics/ui/detail_row` · Are the fields compared DOWN columns?
- a state with no second reading to contradict it → `Callout` `@lotics/ui/callout` · Did a CHECK produce it?
- a status a record wears → `Status` `@lotics/ui/status` · Is it a type, a category or a count?
  - `Status mark` · Did the call site pick it?
- a subject over one qualifying line → `CellStack` `@lotics/ui/cell_stack` · Is the second line a SENTENCE?
- a subject read as one row → `Row` `@lotics/ui/row` · Does a surface already draw these rows?
- a text field → `TextInput` `@lotics/ui/text_input` · Is the value a number?
  - `TextInput type="search"` · Does the field hold a value the record keeps?
  - `TextInput font="mono"` · Is the value language a person wrote?
  - `TextInput reading="struck"` · Is the value ITSELF struck, or is the ROW done?
- a tile's remove → `RemoveButton` `@lotics/ui/file_thumbnail` · Is the tile in a selection surface?
- a titled fold → `Accordion` `@lotics/ui/accordion` · Is the fold inside prose?
- a typed pick's frame → `Combobox` `@lotics/ui/combobox` · Is the set small and fixed?
- a typed pick's no-matches row → `ComboboxEmpty` `@lotics/ui/combobox` · Is the field still empty?
- a typed pick's result list → `ComboboxContent` `@lotics/ui/combobox` · Are the rows the caller's own JSX?
  - `ComboboxContent footer` · Is the content pickable?
- a value against its maximum → `Progress` `@lotics/ui/progress` · Is there no maximum?
  - `Progress shape="ring"` · Is the reading taken as a LENGTH, down a column or across a band?
  - `Progress compact="inline"` · Is the meter in a COLUMN?
  - `Progress caption` · Does the bar NEVER print a figure?
  - `Progress pace` · Is the bound a CEILING?
  - `Progress gate` · Is the reading passed short of `max`?
- a value picked along a range → `Slider` `@lotics/ui/slider` · Does the exact number matter?
- a value put on the clipboard → `CopyButton` `@lotics/ui/copy_button` · Is the verb about the ROW?
  - `CopyButton variant="labelled"` · Is the copy riding a VALUE — a cell, a field's trailing slot?
- a value that changed → `DiffValue` `@lotics/ui/diff_value` · Is the row's own change the point?
- a well that asks for files → `FileDropzone` `@lotics/ui/file_dropzone` · Does the surface already hold files?
- a whole ranked by share → `Breakdown` `@lotics/ui/breakdown` · Is the tail long?
- a width published as buckets → `ContainerSizeProvider` `@lotics/ui/container_size` · Are you measuring here?
  - `ContainerSizeContext` `@lotics/ui/container_size` — the context object, for a shell that computed the buckets itself · Are you READING the size?
- an act INSIDE a field's own box → `InlineButton` `@lotics/ui/inline_button` · Is the act outside a field?
- an act that leaves for another channel → `ReachButton` `@lotics/ui/reach_button` · Is the act done here, in the app?
- an act with a glyph and no name → `IconButton` `@lotics/ui/icon_button` · Would a word fit?
- an act with a name → `Button` `@lotics/ui/button` · Is the control icon-only?
- an act's asks where they cannot stand inline → `ActAsksDialog` `@lotics/ui/act_asks_dialog` · Is the act its section's one act, or its primary?
- an agent run's action bar → `AgentRunActions` `@lotics/ui/agent_run` · Is the bar inside the feed?
- an agent run's dialog frame → `AgentRunDialog` `@lotics/ui/agent_run` · Does the surface have no footer?
- an agent's work, live → `AgentRun` `@lotics/ui/agent_run` · Is the run finished?
  - `AgentRun variant="pane"` · Is the run incidental to the screen?
  - `AgentRun variant="pill"` · Is the run the screen's subject?
- an app's own mark → `AppIcon` `@lotics/ui/app_icon` · Is the subject a record rather than an app?
- an attachment surface's verb band → `FilesEditorBar` `@lotics/ui/files_editor` · Is the Add elsewhere?
  - `FilesEditorBar verbs` · Is the act yours rather than the editor's?
- an entry richer than its words → `EntryBody` `@lotics/ui/timeline` · Is the entry only its words and its files?
- an exclusive choice, all options visible → `ChoiceStrip` `@lotics/ui/choice_strip` · Are there more than a few options?
  - `ChoiceStrip variant="chips"` · Do the positions have to stay fixed?
  - `ChoiceStrip overflow="scroll"` · Is this a required select in a form?
  - `ChoiceStrip variant="tiles"` · Is the choice a setting the reader comes back to?
- an explainer behind a ⓘ → `InfoPopover` `@lotics/ui/info_popover` · Is there more here than a sentence?
- an identity mark → `Avatar` `@lotics/ui/avatar` · Is the subject a THING?
- an outside brand's logo → `BrandMark` `@lotics/ui/brand_mark` · Is the glyph the app's own language?
- an overlay over the page → `Dialog` `@lotics/ui/dialog` · Is it mounted while closed?
- audio or video played in place → `MediaPlayer` `@lotics/ui/media_player` · Is the file an image?
  - `MediaPlayer fit="cover"` · Is the clip EVIDENCE — a recording, a file being previewed?
- categories compared → `BarChart` `@lotics/ui/bar_chart` · Do the parts make a whole?
- content rendered into the nearest host → `Portal` `@lotics/ui/portal` · Is there no host above it?
- how a figure got from one level to another → `WaterfallChart` `@lotics/ui/waterfall_chart` · Are the steps independent?
- how a surface sets its fields — their layout, and whether every one is read → `FormFieldLayoutContext` `@lotics/ui/form_field` · Is the surface a record's section or a group of facts?
- independent booleans at fixed positions → `ToggleStrip` `@lotics/ui/toggle_strip` · Is the choice exclusive?
- inked text inside a run that navigates → `TextLink` `@lotics/ui/text_link` · Is it the row's own destination?
- items on a time axis → `Timeline` `@lotics/ui/timeline` · Is the question where the RECORD stands in its sequence?
  - `Timeline answer` · Is the mark a per-entry yes/no — read, pinned?
  - `Timeline title` · Is the entry a NAMED thing — a notice sent, a call logged?
  - `Timeline onOpen` · Are the entries read HERE, whole — a discussion?
  - `Timeline group` · Do the entries run across days the reader files them by?
  - `Timeline rail` · Is the ORDER the point — a schedule's stops?
  - `Timeline mark` · Did a PERSON or a PARTY write it?
  - `Timeline stage` · Is the stage the RECORD's?
  - `Timeline event` · Did someone WRITE it?
  - `Timeline at` · Is the entry's moment known?
  - `Timeline lines` · Is it a sentence?
  - `Timeline day` · Is the figure the LIST's total?
- money you are PRICING → `ChargeLines` `@lotics/ui/charge_lines` · Is the money already settled?
- named destinations within one screen → `Tabs` `@lotics/ui/tabs` · Do the tabs have an ORDER the work follows?
- nested cohorts that shrink → `Funnel` `@lotics/ui/funnel` · Do the stages partition one set?
- one boolean → `Checkbox` `@lotics/ui/checkbox` · Is the whole row the control?
  - `Checkbox without onChange` · Can the reader change it?
  - `Checkbox shape="ring"` · Does ticking mean CHOSEN?
- one figure read against a reference figure → `ComparisonBar` `@lotics/ui/comparison_bar` · Is the second number a CEILING?
- one file's ⋯ → `FileActs` `@lotics/ui/file_acts` · Is the file drawn by a kit file surface?
- one labelled field → `DetailRow` `@lotics/ui/detail_row` · Is the label a column heading?
- one of N, each with a description → `ChoiceList` `@lotics/ui/choice_list` · Do the options need no description?
  - `ChoiceList allowCustom` · Is the option set the whole answer?
- one pane of a split row → `SplitPane` `@lotics/ui/split_row` · Is it standing alone?
- one priced line → `ChargeLine` `@lotics/ui/charge_lines` · Is the derived amount on a second line?
- one ranked discrepancy → `Finding` `@lotics/ui/finding` · Is there only one reading?
- one row of a reorderable list → `ReorderItem` `@lotics/ui/reorder_item` · Is the position stored on the row?
- one screen of a navigation stack → `Screen` `@lotics/ui/screen_router` · Is there only one screen?
- one screen of a routed popover → `PopoverScreen` `@lotics/ui/popover_nav` · Is there one panel?
- one step of a run → `Step` `@lotics/ui/stepper` · Is the step a task?
  - `Step status` · Is the run PROGRESS?
  - `Step tone` · Does every rung have a colour?
- one tab → `TabItem` `@lotics/ui/tabs` · Are you rendering a strip the kit ships?
- one thing the reader marks → `ChecklistItem` `@lotics/ui/checklist` · Did an inspection SETTLE it?
  - `ChecklistItem tone` · Is the row a TASK?
- parts of one whole → `PieChart` `@lotics/ui/pie_chart` · Are there many slices?
- pick a person → `MemberSelect` `@lotics/ui/member_select` · Is the filter meant to match UNASSIGNED rows too?
- pick by typing → `ComboboxInput` `@lotics/ui/combobox` · Is the set small and fixed?
- pick one from a list → `Select` `@lotics/ui/select` · Does the reader type to find the value?
  - `Select native` · Does an option need a colour or a face?
  - `Select size="md"` · Is this a form field, a value column or an option list?
  - `Select layout="grid"` · Is the choice made by reading its name?
  - `Select chrome="cell"` · Is the column a READING?
- prose the reader writes → `MarkdownEditor` `@lotics/ui/markdown_editor` · Is the prose read-only here?
  - `MarkdownEditor surface="field"` · Is the whole surface the document?
- readings laid out together → `ReadingGrid` `@lotics/ui/reading_grid` · Are the readings a register's own, over its rows?
- resources' work along a clock, with what is still free → `LaneBoard` `@lotics/ui/lane_board` · Is each lane one RESOURCE whose free time is the answer — a chair's day, a machine's month?
- several images browsed in place → `ImageGallery` `@lotics/ui/image_gallery` · Is the surface an overlay?
- several marks capped in one cell → `MarkStack` `@lotics/ui/mark_stack` · Is the stack the row's door?
- several wholes compared → `StackedBarChart` `@lotics/ui/stacked_bar_chart` · Is there ONE whole?
- stored prose, rendered → `Markdown` `@lotics/ui/markdown` · Is the prose editable here?
- text that unfolds more text → `TextDisclosure` `@lotics/ui/text_disclosure` · Does the reveal need a heading and a body?
- the acts of one place, and what each still needs → `ActGroup` `@lotics/ui/act_group` · Is it an act whose asks cannot stand inline — a menu's, the ticked rows', one that is not its place's primary?
- the agent asking back → `ClarifyWizard` `@lotics/ui/clarify_wizard` · Is the question a CONFIRMATION of an act?
  - `ClarifyWizard questions` · Is there one question?
- the app root's hint timing → `TooltipProvider` `@lotics/ui/tooltip` · Is a `Tooltip` missing without it?
- the app root's string pack → `LoticsLocaleProvider` `@lotics/ui/locale` · Is one instance the odd one out?
- the app root's toast host → `ToastProvider` `@lotics/ui/toast` · Is the strip meant to sit inside the page?
- the box around a field that saves itself → `FieldSurface` `@lotics/ui/field_surface` · Is the control a plain one?
- the checks standing on a record → `ChecksCallout` `@lotics/ui/checks_callout` · Is it one message about the page rather than the record's standing checks?
- the destructive section → `DangerSection` `@lotics/ui/danger_section` · Is the act reversible?
  - `DangerSection actions` · Is the act a `danger` `Button` passed as a child?
- the element a hint describes → `TooltipTrigger` `@lotics/ui/tooltip` · Does the child drop the props it is handed?
- the heading rung a pane publishes → `HeadingSurfaceContext` `@lotics/ui/heading_surface` · Is the pane one the kit renders?
- the keyboard's shortcut past the chrome → `SkipLink` `@lotics/ui/skip_link` · Is there a landmark to skip TO?
- the keyboard's way into a row of controls → `RowFocusEntry` `@lotics/ui/row_focus_entry` · Does the row hold nothing but text?
- the one file a field holds, shown whole in a record's body → `MediaView` `@lotics/ui/media_view` · Does the field hold several files, or is the file one of a list?
- the one row a screen works inside → `FolderSwitcher` `@lotics/ui/folder_switcher` · Does the pick only narrow what is listed, with an "all" beside it?
- the overflow menu on a row or a header → `ActionMenu` `@lotics/ui/action_menu` · Is there one act?
- the reader's fold of a register → `GroupByMenu` `@lotics/ui/group_by_menu` · Is the fold the author's rather than the reader's?
- the rows' order where no header offers it → `SortMenu` `@lotics/ui/sort_header` · Do the rows stand under a header row that seats every column?
- the small word that names something else → `Label` `@lotics/ui/label` · Is it a heading?
  - `Label over="block"` · Is the thing labelled a VALUE?
- the surface that starts agent work → `Composer` `@lotics/ui/composer` · Is the field a record's?
- the toolbar above a list → `FilterBand` `@lotics/ui/filter_band` · Is the filter narrowed by daily?
- the verbs for a selection → `SelectionBar` `@lotics/ui/selection_bar` · Is nothing selected?
  - `SelectionBar danger` · Is the bulk delete one of the `children`?
- the way from a callout to the place that clears it → `CalloutLink` `@lotics/ui/callout` · Does pressing it write?
- the way into a thread → `CommentsButton` `@lotics/ui/comments_button` · Are there no comments?
- the way out of a pushed screen → `BackButton` `@lotics/ui/back_button` · Can the reader go back?
- the width a region measures itself against → `SizeBoundary` `@lotics/ui/size_boundary` · Is the question about the DEVICE?
- things scheduled, days on the axis → `CalendarView` `@lotics/ui/calendar` · Are RESOURCES the rows — a chair, a machine, a room — with time along each?
  - `CalendarView renderEvent` · Is the replacement a `Chip`?
- things the reader MARKS → `Checklist` `@lotics/ui/checklist` · Are the same four values compared across twenty rows?
- two panes side by side → `SplitRow` `@lotics/ui/split_row` · Is the pair meaningless apart — a value and its unit?
- what a callout's message means for the reader → `CalloutDescription` `@lotics/ui/callout` · Does it carry a verb?
- what a filtered register adds up to — the rows in view, over them → `TotalsLine` `@lotics/ui/totals_line` · Does it describe the UNFILTERED set?
- what happened to a row → `DiffMark` `@lotics/ui/diff_mark` · Is the row unchanged and unremarkable?
- where a value came from → `Sources` `@lotics/ui/sources` · Are the sources already the content?
- who a person IS → `MemberPeek` `@lotics/ui/member_peek` · Does the row already press?
- who an opened record is → `RecordHeader` `@lotics/ui/record_header` · Is a badge or a verb going beside the title?
- work in flight, with no known duration → `ActivityIndicator` `@lotics/ui/activity_indicator` · Is the progress known?
  - `ActivityIndicator variant="dots"` · Is this the only thing on screen saying so?

## Hooks, helpers, stylesheets

- `@lotics/ui/capture_selection` — `DEFAULT_CAPTURE_SOURCES`, `toCapture`, `needsDisplayShare`
- `@lotics/ui/color_tokens` — `palette`, `literalColors`, `withAlpha`, `ACCENT_FAMILY`, `UNCOLOURED`, `solid`, …
- `@lotics/ui/colors` — `colors`, `labelTone`
- `@lotics/ui/column_filter` — `numberFilterUnit`, `columnFilterToConditions`, `isColumnFilterActive`, `columnFilterSummary`
- `@lotics/ui/commit_mode` — types only
- `@lotics/ui/control_surface` — `CONTROL_HEIGHT`, `CONTROL_CONTENT_HEIGHT`, `CONTROL_PADDING_V`, `MIN_CONTROL_WIDTH`, `MIN_VALUE_WIDTH`, `CONTROL_RADIUS`, …
- `@lotics/ui/copy_text` — `copyText`
- `@lotics/ui/date_picker_value` — `isRangeFormat`, `hasTimeFormat`, `pad`, `parsePart`, `partsToIso`, `isoToDate`, …
- `@lotics/ui/deadline` — `daysUntil`, `deadlineTone`, `deadlineColor`, `ageSpan`, `countdownLabel`, `countdownAt`, …
- `@lotics/ui/download` — `downloadFileFromUrl`, `canShareFiles`, `prepareShareFiles`, `shareFiles`, `shareOrDownloadFiles`
- `@lotics/ui/file_badge_fit` — `FILE_BADGE_DEFAULT_WIDTH`, `FILE_BADGE_BOX`, `fileBadgeHeight`, `fileBadgeWidthForBox`, `fileBadgeBorder`, `FILE_CHIP_NAME_MAX`, …
- `@lotics/ui/file_picker` — `pickFiles`
- `@lotics/ui/fonts.css` — THE DEFAULT FACE — one family, three weights, which is what makes an ordinary numeric `font-weight` select a real face.
- `@lotics/ui/format_date` — `isInstant`, `calendarDay`, `zonedToday`, `zonedNow`, `zonedMoment`, `parseDate`, …
- `@lotics/ui/format_money` — `formatCompactNumber`, `overBound`, `figureRange`, `moneyNotation`, `quantityNotation`, `moneyFormat`, …
- `@lotics/ui/just_arrived` — `arrivalsSince`, `useJustArrived`
- `@lotics/ui/lane_board_layout` — `hourAxis`, `dayAxis`, `laneTicks`, `spanShares`, `laneGaps`, `blockTiers`, …
- `@lotics/ui/mark` — `MARK_PX`, `identityRung`, `ROW_PICTURE`, `leadSlot`, `markInSlot`, `tileBadge`, …
- `@lotics/ui/matrix_totals` — `matrixHeatScale`, `matrixTotals`
- `@lotics/ui/mime` — `isImageMimeType`, `isVideoMimeType`, `isAudioMimeType`, `isPdfMimeType`, `isExcelMimeType`, `isCsvMimeType`, …
- `@lotics/ui/option_picker` — `fieldPicker`, `optionPicker`
- `@lotics/ui/organization_name` — `stripLegalForm`
- `@lotics/ui/overlay_layer` — `OVERLAY_Z`, `OVERLAY_Z_ABOVE`, `NOTIFICATION_Z`, `SKIP_LINK_Z`
- `@lotics/ui/overlay_scope` — `isOverlayScopeActive`, `pushOverlayScope`, `useOverlayScope`, `useOverlayOpenChange`
- `@lotics/ui/overlay_sheet` — `useSheetPresentation`, `SHEET_POSITIONER_STYLE`
- `@lotics/ui/remark_gfm_safe` — `remarkGfmSafe`
- `@lotics/ui/rotate_image` — `rotateImageToBlob`
- `@lotics/ui/route_matching` — `routeMatches`, `parseRouteParams`, `findBestPattern`, `shouldRouteMatch`
- `@lotics/ui/search_match` — `normalizeForSearch`, `codeKey`, `codeMatches`
- `@lotics/ui/social_post_rules` — `SOCIAL_NETWORKS`, `SOCIAL_NETWORK_RULES`, `SOCIAL_NETWORK_LABELS`, `countSocialChars`, `socialPostIssues`, `socialPostIssueText`
- `@lotics/ui/spacing` — `SPACE_RUNGS`
- `@lotics/ui/style_props` — `assignRef`, `composeRefs`, `cn`, `styleParts`
- `@lotics/ui/styles.css` — THE ONE ENTRY POINT — layer order, the tokens and the reset.
- `@lotics/ui/system-dark.css` — OS-FOLLOWS DARK MODE — opt in with `@import "@lotics/ui/system-dark.css"`.
- `@lotics/ui/table_fit` — `REGISTER_ROW`, `REGISTER_HEAD`, `ROW_BEAT`, `ROW_INSET`, `REGISTER_INSET`, `REGISTER_CELL_GAP`, …
- `@lotics/ui/tailwind-type.css` — TAILWIND PRESET — type and radius.
- `@lotics/ui/tailwind.css` — TAILWIND PRESET — colour.
- `@lotics/ui/text_advance` — `textWidthSm`, `textWidthXs`
- `@lotics/ui/text_ink` — `TEXT_INK`, `TEXT_COLORS`, `getTextColor`, `getInkColor`, `textInkTokens`, `blendInk`
- `@lotics/ui/trend_buckets` — `startOfDay`, `daySpan`, `dayAfter`, `bucketUnit`, `periodStart`, `bucketsOf`, …
- `@lotics/ui/type_ramp` — `TYPE_RAMP_MOBILE`, `TYPE_RAMP_DESKTOP`, `TYPE_LEADING_TIGHT_MOBILE`, `TYPE_LEADING_TIGHT_DESKTOP`, `TYPE_TRACKING`, `trackingPx`
- `@lotics/ui/use_async_fn` — `useAsyncFn`
- `@lotics/ui/use_change_set` — `useChangeSet`
- `@lotics/ui/use_copy_feedback` — `useCopyFeedback`
- `@lotics/ui/use_debounced_callback` — `useDebouncedCallback`
- `@lotics/ui/use_form` — `useForm`
- `@lotics/ui/use_image_rotation` — `useImageRotation`
- `@lotics/ui/use_long_press` — `useLongPress`
- `@lotics/ui/use_persisted_state` — `usePersistedState`, `oneOf`, `asText`, `asStringSet`, `asSortState`
- `@lotics/ui/use_screen_size` — `useScreenSize`
- `@lotics/ui/use_section_nav` — `useSectionNav`
- `@lotics/ui/use_selection` — `useSelection`
- `@lotics/ui/use_selection_mode` — `useSelectionMode`
- `@lotics/ui/vite` — `loticsResolve`, `loticsFsAllow`, `loticsOptimizeDeps`

## Reference

- [AGENTS.md](AGENTS.md): @lotics/ui — the UI reference index
- [docs/ai_patterns.md](docs/ai_patterns.md): AI patterns — AI proposes, the human decides
- [docs/catalog.md](docs/catalog.md): @lotics/ui — where each entry does NOT go
- [docs/composition.md](docs/composition.md): Composition grammar
- [docs/constitution.md](docs/constitution.md): The constitution
- [docs/data_entry.md](docs/data_entry.md): Data entry — which pattern for which job
- [docs/hierarchy.md](docs/hierarchy.md): Hierarchy — what a screen shows, and at what weight
- [docs/reviewing.md](docs/reviewing.md): Reviewing a screen you built
- [docs/screen.md](docs/screen.md): The app screen, and which device answers which question
- [docs/testing.md](docs/testing.md): Testing the kit
- [docs/theming.md](docs/theming.md): Theming