@vvedantb/native-ui 0.7.0 → 0.9.0

package/README.md

@@ -30,14 +30,17 @@ Optional and loaded only when installed, so the package imports and runs without
 
 - `expo-blur` — glass blur on `FloatingSurface` and the chrome built on it. Without it, those surfaces draw a solid fill.
 - `expo-haptics` — the selection haptic on `FloatingTabBar`, `Tabs` and `Checkbox` presses. Without it, presses are silent.
+- `expo-notifications`, `expo-constants`, `expo-device` — only for `@vvedantb/native-ui/push` (0.9.0). Without them, `useExpoPushRegistration` does nothing and `getExpoPushToken` returns `null`.
 - `expo-linear-gradient` — the gradient in `AmbientBackground`. Without it, the background is the solid `tokens.color.background`.
+- `prism-react-renderer` (`>=2.0.0`) — syntax highlighting in `CodeBlock` and the `Markdown` code fences. Without it, code is plain text.
 
-The package loads these three with a `require` inside `try`. Metro treats that as an optional dependency when `transformer.allowOptionalDependencies` is on, which is the default in the Expo and React Native Metro configs. `@vvedantb/native-ui/blur` exports the loader (`loadBlur`) and `@vvedantb/native-ui/haptics` exports `loadHaptics` and `selectionHaptic`. TypeScript still resolves their types: an app that type-checks without them reports a missing module in `src/blur.ts`, `src/haptics.ts` or `src/gradient.ts`. Declare the missing ones in a `.d.ts` file in the app:
+The package loads these with a `require` inside `try`. Metro treats that as an optional dependency when `transformer.allowOptionalDependencies` is on, which is the default in the Expo and React Native Metro configs. `@vvedantb/native-ui/blur` exports the loader (`loadBlur`) and `@vvedantb/native-ui/haptics` exports `loadHaptics` and `selectionHaptic`. TypeScript still resolves their types: an app that type-checks without them reports a missing module in `src/blur.ts`, `src/haptics.ts`, `src/gradient.ts` or `src/highlight.ts`. Declare the missing ones in a `.d.ts` file in the app:
 
 ```ts
 declare module "expo-blur";
 declare module "expo-haptics";
 declare module "expo-linear-gradient";
+declare module "prism-react-renderer";
 ```
 
 `expo-router` stays an optional peer, but the package does not import it. `FloatingTabBar` declares the props it reads (`FloatingTabBarProps`) and fits the `tabBar` prop of Expo Router's `Tabs` on Expo SDK 57. Expo SDK 58 passes `emitter` and `navigateToTab` to `tabBar` in place of `navigation`, so the bar does not fit it yet.
@@ -62,16 +65,17 @@ The root entry exports everything. It still imports `BottomSheetContainer` and `
 | `@vvedantb/native-ui/tab-bar` | `FloatingTabBar`, `FloatingTabBarProps`, `FLOATING_INSET`, `FLOATING_TAB_BAR_HEIGHT`, `FLOATING_TAB_BAR_HEIGHT_LARGE`, `tabBarReserve` | `expo-blur`, `expo-haptics` (loaders) |
 | `@vvedantb/native-ui/brand` | `AppMark`, `AppWordmark`, `GoogleMark` (from 0.3.15), `APP_ICONS`, `IconVibot` and the other `Icon*`, the SVG helpers (`APP_MARKS`, `appMarkSvg`, `appTileSvg` and the rest), `FAMILY_APPS`, `familyApp`, `V_PRO_APP_BENEFITS` | none |
 | `@vvedantb/native-ui/button` | `Button`, `ButtonProps`, `ButtonShape` (0.6.0), `ButtonSize`, `ButtonVariant` | none |
-| `@vvedantb/native-ui/primitives` | `Button`, `Input`, `SearchInput`, `Textarea`, `Label`, `Select`, `Switch`, `LabeledSwitchRow`, `Checkbox`, `Card` and its parts, `Badge`, `StatusDot`, `Avatar`, `Separator`, `Progress`, `Spinner`, `Skeleton`, `EmptyState`, `ListRow`, `Chip`, `HeaderIconButton`, `ThemeToggle` (from 0.3.16), `Tabs`, `PillTabs`, `Dialog`, `AlertDialog`, `ConfirmDialog`, `Sheet`, `toast`, `Toaster`. From 0.5.0: `Text` and `TextClassContext` (only here, not on the root), `ColorSwatches`, `StatGrid`, `SectionLabel`, `SheetRow`, `PageIndicator`, `IconButton`, `CaptureButton`, and the `ListRowProps` and `CardProps` types. From 0.6.0: the `ButtonShape` type | `expo-blur`, `expo-haptics` (loaders) |
+| `@vvedantb/native-ui/primitives` | `Button`, `Input`, `SearchInput`, `Textarea`, `Label`, `Select`, `Switch`, `LabeledSwitchRow`, `Checkbox`, `Card` and its parts, `Badge`, `StatusDot`, `Avatar`, `Separator`, `Progress`, `Spinner`, `Skeleton`, `EmptyState`, `ListRow`, `Chip`, `HeaderIconButton`, `ThemeToggle` (from 0.3.16), `Tabs`, `PillTabs`, `Dialog`, `AlertDialog`, `ConfirmDialog`, `Sheet`, `toast`, `Toaster`. From 0.5.0: `Text` and `TextClassContext` (only here, not on the root), `ColorSwatches`, `StatGrid`, `SectionLabel`, `SheetRow`, `PageIndicator`, `IconButton`, `CaptureButton`, and the `ListRowProps` and `CardProps` types. From 0.6.0: the `ButtonShape` type. Unreleased: `DropdownMenu` and its parts, `BulkActionBar` | `expo-blur`, `expo-haptics` (loaders) |
 | `@vvedantb/native-ui/search-input` | `SearchInput`, `SearchInputProps` | none |
 | `@vvedantb/native-ui/page-title` | `PageTitle`, `PageHeader`, `PageTitleProps`, `PageHeaderProps` (from 0.3.13), `StackPageHeader`, `StackPageHeaderProps` (from 0.5.0; it brings the Tabler package for its chevron) | none |
 | `@vvedantb/native-ui/toast` | `toast`, `Toaster`, `ToastOptions`, `ToastVariant` | none (from 0.3.12) |
-| `@vvedantb/native-ui/theme` | `NativeUiProvider`, `useNativeUi`, `useLargerText`, `useAccentColor`, `DEFAULT_ACCENT`, `tokens`, `palette`, `withAlpha`, `fontClass`, `cn`, `Colors` and the colour constants | none |
+| `@vvedantb/native-ui/theme` | `NativeUiProvider`, `useNativeUi`, `useLargerText`, `useAccentColor`, `DEFAULT_ACCENT`, `tokens`, `palette`, `withAlpha`, `configureTheme` (with the `ThemeConfig`, `ThemeColors` and `ThemePalette` types), `fontClass`, `cn`, `Colors` and the colour constants | none |
 | `@vvedantb/native-ui/floating` | `FloatingSurface`, `GlassSheetBackground`, `LiquidGlass`, `GlassBlurProvider`, `GlassBlurTarget`, `FloatingFAB`, `useReduceTransparency`, the floating metrics and styles | `expo-blur` (loader) |
-| `@vvedantb/native-ui/layout` | `ScreenContainer`, `SafeAreaContainer`, `PageTitle`, `PageHeader`, `StackPageHeader` (0.5.0) and their props types, `SectionLabel` (0.5.0), `SettingsSection`, `SettingsField`, `SettingsToggleRow`, `SettingsStack` | `expo-blur` (loader) |
+| `@vvedantb/native-ui/layout` | `ScreenContainer`, `SafeAreaContainer`, `PageTitle`, `PageHeader`, `StackPageHeader` (0.5.0) and their props types, `SectionLabel` (0.5.0), `SettingsSection`, `SettingsField`, `SettingsToggleRow`, `SettingsStack`, `MoreFromProjectV` and `FromProjectV` (0.8.0) | `expo-blur` (loader) |
 | `@vvedantb/native-ui/marketing` | `UpgradeToProCard`, `PricingModal` and the pricing types | none |
 | `@vvedantb/native-ui/ambient` | `AmbientBackground` | `expo-linear-gradient` (loader) |
 | `@vvedantb/native-ui/blur`, `/haptics` | the loaders | `expo-blur`, `expo-haptics` (loaders) |
+| `@vvedantb/native-ui/push` | `useExpoPushRegistration`, `getExpoPushToken`, `showPushesInForeground`, the three loaders and the types (0.9.0). Pass `register` from your backend (for `@vvedantb/server`: `useMutation(api.push.register)`) and route taps in `onNotificationTap` | `expo-notifications`, `expo-constants`, `expo-device` (loaders) |
 | `@vvedantb/native-ui/bottom-sheet` | `BottomSheetContainer` | `@gorhom/bottom-sheet` (import), `expo-blur` (loader) |
 | `@vvedantb/native-ui/date-time` | `DateTimeField`, `DateTimeFieldProps` (0.5.0) | `@react-native-community/datetimepicker`, `dayjs` (import) |
 | `@vvedantb/native-ui/ai` | The AI chat parts (from 0.4.0): `Conversation`, `Message`, `Reasoning`, `AgentTrace`, `ChainOfThought`, `ActivityStep`, `PromptInput`, `Suggestions`, `Sources`, `FileChip`, `Attachments`, `CodeBlock`, `ResponseText`, `Shimmer`, `Collapsible`, `useStreamingDisclosure` and their parts. See [AI chat](#ai-chat-040). Not on the root entry. | none |
@@ -229,6 +233,34 @@ import { NativeUiProvider, Button, Card } from "@vvedantb/native-ui";
 
 **Switch the scheme through NativeWind only.** Call `useColorScheme().setColorScheme("dark"|"light")` (or use `ThemeToggle`). That updates `useScheme` and, with `darkMode: "class"`, the `<html>` class together. Do **not** toggle `document.documentElement.classList` (or a page-level CSS `.dark` rule) by hand while leaving NativeWind on light: the page background can go dark while every token-styled part stays on the light set. That dual-owner fault is an app bug, not a native-ui colour bug.
 
+### App colours (`configureTheme`)
+
+An app with its own palette calls `configureTheme` once at start, before the first render: at the top of the root `_layout.tsx`, outside the component. It writes into the shared `tokens.color` and `palette` objects, which every component reads at render. Keys you leave out keep the package value. Each pair needs both schemes. On the root entry and `/theme`.
+
+```ts
+import { configureTheme } from "@vvedantb/native-ui/theme";
+
+// Eva's web theme (`globals.css`, RGB channels as hex).
+configureTheme({
+  color: {
+    background: { light: "#f4f5f6", dark: "#020202" }, // --background
+    foreground: { light: "#09090b", dark: "#fafafa" }, // --foreground
+    muted: { light: "#646567", dark: "#9fa0a2" }, // --muted-foreground
+    border: { light: "#dddedf", dark: "#242424" }, // --border
+    surface: { light: "#ffffff", dark: "#101010" }, // --card
+    surfaceSecondary: { light: "#eaebec", dark: "#202020" }, // --secondary
+  },
+  palette: {
+    primary: { light: "#09090b", dark: "#fafafa" }, // --primary
+    primaryForeground: { light: "#fafafa", dark: "#09090b" }, // --primary-foreground
+  },
+});
+```
+
+The keys map to the shadcn-style variables as follows. `tokens.color`: `background` (`--background`), `foreground` (`--foreground`), `muted` (`--muted-foreground`), `border` and `separator` (`--border`), `surface` and `surfaceCard` (`--card`), `surfaceSecondary` (`--secondary`). `palette`: `primary` (`--primary`), `danger` (`--destructive`), `default` (`--secondary`), `overlay` (`--popover`), each with its `Foreground`, and `fieldPlaceholder` (`--muted-foreground`).
+
+Limits: a call after the first render does not redraw mounted components. Only the JS colours change. NativeWind classes keep the app's Tailwind theme, and `nativeUiPreset({ injectCssVariables: true })` still writes the package values. Constants copied out at import (`NEUTRAL_500`) keep the package value; `floatingFill`, `floatingHairline` and `floatingSolidFill` follow. The `tokens` and `palette` types still name the package hex values.
+
 `useLargerText()` steps type and tap targets up. Without it, `Button`, `Input`, `Textarea` and the `Select` trigger have the web sizes (`Button` 32 / 40 / 44 high, fields 40); with it they keep the larger 0.3.2 sizes. `accentColor` tints FABs, card icons and progress bars (checked checkboxes use the palette primary, as on the web). Surfaces use the tokens in `src/tokens.ts` for fill, radius (card 24, field 10, pill 999; rows 20) and spacing (16). `Button` is a pill (999) by default, and 16 with `shape="rounded"`.
 
 ## Components (0.3.0)
@@ -238,7 +270,8 @@ import { NativeUiProvider, Button, Card } from "@vvedantb/native-ui";
 | Actions and fields | `Button` (`default`/`primary`, `secondary`, `outline`, `destructive`, `ghost`, `link`, `tinted`; `sm`/`small`, `default`/`medium`, `lg`/`large`, `icon`; `shape` `pill`/`rounded` from 0.6.0), `IconButton` (0.5.0), `CaptureButton` (0.5.0), `Input`, `SearchInput` (0.3.9), `Textarea`, `Label`, `Select`, `Switch`, `Checkbox`, `LabeledSwitchRow`, `ColorSwatches` (0.5.0), `DateTimeField` (date-only, empty and clearable from 0.5.0) |
 | Display | `Card` (+ `CardHeader`, `CardTitle`, `CardDescription`, `CardContent`, `CardFooter`; `onPress` from 0.5.0), `Badge`, `StatusDot` (`info` from 0.5.0), `Avatar` (+ `AvatarImage`, `AvatarFallback`, `initials()`), `Separator`, `Progress`, `Spinner`, `CenteredSpinner`, `Skeleton`, `EmptyState` (+ `EmptyState.Root` and parts), `ListRow` (`leading`, `titleEnd`, `control`, `onLongPress` from 0.5.0), `StatGrid` (0.5.0), `SectionLabel` (0.5.0), `Chip`, `Text` (0.5.0, `/primitives` only) |
 | Navigation | `Tabs` (+ `TabsList`, `TabsTrigger`, `TabsContent`), `PillTabs`, `PageIndicator` (0.5.0), `FloatingTabBar`, `FloatingFAB`, `HeaderIconButton`, `ThemeToggle` (0.3.16), `StackPageHeader` (0.5.0) |
-| Overlays | `Dialog`, `AlertDialog`, `ConfirmDialog`, `Sheet` (RN `Modal`, each with the web part names), `SheetRow` (0.5.0), `BottomSheetContainer` (`@gorhom/bottom-sheet`) |
+| Overlays | `Dialog`, `AlertDialog`, `ConfirmDialog`, `Sheet` (RN `Modal`, each with the web part names), `SheetRow` (0.5.0), `BottomSheetContainer` (`@gorhom/bottom-sheet`), `DropdownMenu` (Unreleased; see below) |
+| Selection | `BulkActionBar` (Unreleased; see below) |
 | Feedback | `toast()` and `<Toaster />` |
 | Brand and upgrade | `APP_ICONS`, `IconVibot` and the other `Icon*`, `AppMark`, `AppWordmark`, `GoogleMark` (0.3.15), `FAMILY_APPS`, `V_PRO_APP_BENEFITS`, `UpgradeToProCard`, `PricingModal` |
 | Settings and layout | `PageTitle`, `PageHeader` (0.3.13), `SettingsSection`, `SettingsField`, `SettingsToggleRow`, `SettingsStack`, `ScreenContainer`, `SafeAreaContainer`, `FloatingSurface`, `AmbientBackground` |
@@ -302,6 +335,10 @@ From 0.3.12 a toast looks like the web `SonnerToaster` at its default density wi
 
 `@vvedantb/native-ui/gallery` exports `ParityGallery`, a screen that renders these components. Put it in a dev-only route to check them on a device.
 
+## More from Project V (0.8.0)
+
+`<MoreFromProjectV current="velth" />` is a settings section listing the other Project V phone apps (vibot, Verve, Velth, vmem, V Store). A row opens the app if installed, else V Store's home (`vstore://`), else its website. Add the other apps' schemes to `LSApplicationQueriesSchemes` (iOS) and `<queries>` (Android 11+), or `canOpenURL` returns `false`. `<FromProjectV />` (or `variant="footer"`) is a small "from Project V" line. `openProjectVApp(id, Linking, Platform.OS)` and `PROJECT_V_MOBILE_APPS` are exported for custom rows.
+
 ## App pieces (0.5.0)
 
 Components and props that the Verve, vibot and Velth apps need. They follow the rest of the package: Instrument Sans with its weight as a style, `tokens` and `palette` colours as styles in light and dark, a step up with larger text, 44 pt targets, and roles, names and states for VoiceOver and TalkBack.
@@ -314,6 +351,7 @@ Components and props that the Verve, vibot and Velth apps need. They follow the
 | `ColorSwatches` | A radio group of round swatches (`sm` 24, `md` 32, `lg` 40) with a foreground ring and a black or white check on the selected one. `labels` names each swatch. |
 | `StatGrid` | Label and value tiles on the flat card, in rows of 2 or 3. |
 | `SectionLabel` | The muted `text-xs` medium label above a group of rows; `uppercase` for capitals. Add `className="px-4"` to line it up with rows. |
+| `DividedList` | Flat rows with a hairline between each pair, as the web `divide-y divide-border` lists. `inset` starts the dividers under the row text. |
 | `SheetRow` | An action row for a `Sheet`: icon, title, detail; `active` adds a check, `danger` uses the danger colour, `disabled` dims it. |
 | `PageIndicator` | The web carousel dots. With `onChange` each dot is a 44 button named "Page 2 of 5", so the dots sit 44 apart. |
 | `StatusDot` `info` | A blue dot (`#3b82f6`, `#60a5fa` in dark), native only. |
@@ -395,14 +433,21 @@ import {
 | `ActivityStep` | One tool step as a trace line: icon, label, a spinner while `running`, a check when `complete`, a warning on `error`, and a description such as `` `Worked for ${formatElapsed(12)}` ``. |
 | `ChainOfThought` and its parts | Simplified: header, steps with a rail, search-result chips. |
 | `PromptInput`, `PromptInputButton`, `PromptInputSubmit` | The web field surface with a `header` slot (attachments), a field, a `toolbar` slot and the send button. The field grows from one line to 160 high (about 6 lines), then scrolls. Send is primary with text and disabled without. While `status` is `submitted` or `streaming` it is a "Stop" square that calls `onStop`. It sits in a `KeyboardAvoidingView` (padding, on iOS and Android) and pads the safe-area insets: put it last in a full-height column. Under a navigation header, pass the header height as `keyboardVerticalOffset`; above a tab bar, pass `safeBottom={false}`. |
+| `PromptInput layout="inline"` | One row, as the web `Composer layout="inline"` (Eva's chat pill): `leading` (such as a + button), the field (one line to start, then it grows), `toolbar`, then send, in a 20-radius field with `p-1.5`. 44 high on one line. |
 | `Suggestions`, `Suggestion` | A horizontal row of round chips (or `orientation="vertical"`). `onPress` gets the suggestion text. |
 | `Sources`, `SourcesTrigger`, `SourcesContent`, `Source` | A fold of link rows. A row opens its address with `Linking.openURL`, or hands it to `onPress`. |
 | `FileChip`, `Attachments`, `Attachment` | A monospace file chip (a button with `onOpenFile`), and attachment chips with a media icon or image thumbnail and a labelled remove button. No hover cards and no grid previews. |
-| `CodeBlock`, `CodeBlockCopyButton` | Plain monospace code on the flat panel, scrolling sideways, with the language and a copy button in a header. No highlighting. |
+| `ChoiceQuestion`, `choiceAnswers` | An agent's blocking multiple-choice question, as Eva's web question dock: question with a header badge and step count, lettered option rows with descriptions (a check on the primary fill when picked), "Other..." with a text field, then Back and Next or Submit. `onSubmit` gets question text to label (multi-select joined with ", "), the AskUserQuestion answer shape. `framed` (default) puts it in the dock card. |
+| `AgentTraceFold` | A finished turn folded behind "Worked for 1m 5s" over a hairline, as the web `ActivityTasks` folded mode; the steps show in an `AgentTrace` when open. |
+| `MessageMeta` | The muted clock after a message's actions ("10:21 PM · 1m"), caption size, tabular figures. |
+| `ActivityStepDetail` | A tool step's body, as the web: exit code and "Truncated" badges, the shell transcript in a `CodeBlock`, red/green edit blocks, a write preview, and "Loading output..." while trimmed detail loads. |
+| `CodeBlock`, `CodeBlockCopyButton` | Monospace code on the flat panel, scrolling sideways, with the language and a copy button in a header. With the optional peer `prism-react-renderer` and a `language`, tokens take the GitHub light or dark colours of the web shiki block; `highlight={false}` turns that off. Without the peer, plain text. |
 | `ResponseText` | Plain, selectable reply text with newlines kept. It takes the colour of the `MessageContent` it is in. |
 | `Shimmer` | "Live" text: the foreground fades to 0.45 and back on the UI thread. With Reduce Motion it holds still, muted. |
 
-**Markdown.** There is no markdown renderer: `ResponseText` draws the text as it is. To render markdown, an app can add one of these and use it in place of `ResponseText`: `react-native-markdown-display`, `@ronradtke/react-native-markdown-display` (a maintained fork) or `react-native-marked`.
+**Markdown.** `ResponseText` draws text as it is. For markdown, install the optional peer `react-native-marked` and use `Markdown` from `@vvedantb/native-ui/markdown` in place of `ResponseText`: `<Markdown onCopyCode={copy}>{reply}</Markdown>`. It follows the web `markdown.css`: compact headings (1.43, 1.29, 1.14 em), primary links underlined at 30%, inline code on a 6% foreground wash, and fenced code as `CodeBlock`. Text takes the `MessageContent` colour. It renders through `useMarkdown`, so it nests in `ConversationContent` without a `FlatList`. Fences with a language are highlighted when `prism-react-renderer` is installed. Other markdown packages (`react-native-markdown-display`, `@ronradtke/react-native-markdown-display`) still work in place of `ResponseText`.
+
+**Eva's tinted bubble.** `MessageContent bubble="tint"` draws a user message as Eva's web chat does (`rounded-surface bg-primary/10 px-3 py-2 text-foreground`): a 10% wash of the primary colour with foreground text, radius 16 on every corner. The default, `"primary"`, stays the web `MessageContent` bubble.
 
 **Clipboard.** React Native's own `Clipboard` is deprecated (moved out of core), and the package adds no clipboard package. `MessageAction kind="copy"` calls your `onPress`, and `CodeBlock` shows its copy button when given `onCopy(code)`. Pass your own clipboard call, for example `expo-clipboard`'s `setStringAsync`.
 
@@ -410,6 +455,61 @@ Every control has a role, an accessible name and a 44 pt target. Folds report `e
 
 `@vvedantb/native-ui/ai-gallery` exports `AiChatGallery`, a full chat screen with a sample thread: a user message, a finished assistant message with folded reasoning and trace, code, sources and actions, and a second answer that streams with its reasoning open until you press Stop. It also has suggestions and the composer with sample attachments. Put it in a dev-only route with a `SafeAreaProvider` above it. `ParityGallery` shows the same thread (`AiChatSamples`) in its "AI chat" section.
 
+## DropdownMenu (Unreleased)
+
+A small menu anchored to its trigger, the native counterpart of the web `DropdownMenu`. On `/primitives` and the root.
+
+```tsx
+<DropdownMenu>
+  <DropdownMenuTrigger accessibilityLabel="List options">
+    <IconDots size={18} color={tokens.color.muted[scheme]} />
+  </DropdownMenuTrigger>
+  <DropdownMenuContent align="end">
+    <DropdownMenuLabel>Sort</DropdownMenuLabel>
+    <DropdownMenuRadioItem checked={sort === "new"} onSelect={() => setSort("new")}>Newest first</DropdownMenuRadioItem>
+    <DropdownMenuRadioItem checked={sort === "old"} onSelect={() => setSort("old")}>Oldest first</DropdownMenuRadioItem>
+    <DropdownMenuSeparator />
+    <DropdownMenuItem icon={IconPencil} onSelect={rename}>Rename</DropdownMenuItem>
+    <DropdownMenuItem icon={IconTrash} destructive onSelect={remove}>Delete</DropdownMenuItem>
+  </DropdownMenuContent>
+</DropdownMenu>
+```
+
+| Part | Props |
+| --- | --- |
+| `DropdownMenu` | `open`, `defaultOpen`, `onOpenChange`. Holds the open state; renders no view. |
+| `DropdownMenuTrigger` | `Pressable` props and `asChild`. On press it measures itself (`measureInWindow`) and opens the menu; pressed again it closes it. Reports `expanded`. With `asChild` the child must pass `ref` on to its native view (`Button` and `IconButton` do). |
+| `DropdownMenuContent` | `align` (`"start"`, default, or `"end"`), `sideOffset` (default 4), `View` props. A transparent RN `Modal`; the menu sits under the trigger and flips above it when it does not fit below. |
+| `DropdownMenuLabel` | `children`. |
+| `DropdownMenuItem` | `children`, `onSelect`, `icon` (a Tabler icon), `destructive`, `disabled`, `closeOnSelect` (default `true`). |
+| `DropdownMenuRadioItem` | The same without `icon` and `destructive`, plus `checked`. |
+| `DropdownMenuSeparator` | none. |
+
+Sizes come from the web menu classes: content at least 192 wide, `p-1.5`, radius 16, on the opaque overlay surface of `Dialog` and `Sheet` (`FloatingSurface` without blur); items `px-2.5 py-2` at radius 8, `text-sm` with a 16 icon, at least 44 high; radio items `pl-8` with a 16 check; the label `text-xs` semibold, uppercase, `tracking-widest`, muted; the separator a 1-high `separator` line. Items are `palette.overlayForeground` (`palette.danger` when `destructive`) and take the `default` fill while pressed. A tap outside, Android back and the VoiceOver escape gesture close the menu. Roles: `menu`, `menuitem`, `radio` (with `checked`), `header`. With larger text, items are `text-lg` and 56 high. No sub-menus, checkbox items, shortcuts or `align="center"`.
+
+## BulkActionBar (Unreleased)
+
+The floating selection bar, as the web `BulkActionBar`. On `/primitives` and the root. Put it last in a full-size container: it sits at the bottom, centred.
+
+```tsx
+<BulkActionBar
+  isSelecting={selecting}
+  selectedCount={selected.size}
+  totalCount={rows.length}
+  onExitSelect={exit}
+  onSelectAll={selectAll}
+  onClearSelection={clear}
+  primaryActions={[{ key: "archive", label: "Archive tasks", shortLabel: "Archive", icon: IconArchive, onClick: archive }]}
+  moreActions={[{ key: "move", label: "Move to project", icon: IconFolder, onClick: move }]}
+  destructiveAction={{ key: "delete", label: "Delete tasks", shortLabel: "Delete", icon: IconTrash, destructive: true, onClick: remove }}
+  bottomOffset={tabBarReserve(largerText, insets.bottom)}
+/>
+```
+
+Props are the web names: `isSelecting`, `selectedCount`, `totalCount`, `onExitSelect`, `onSelectAll`, `onClearSelection`, `primaryActions`, `moreActions`, `destructiveAction` and `barKey` (here the `testID`). Each `BulkBarAction` has `key`, `label`, `shortLabel`, `icon`, `destructive`, `showSkipHint` (no effect on a phone) and `onClick`, plus a native-only `disabled`. Native also takes `bottomOffset`: the space under the bar before its 12 gap, by default the bottom safe-area inset. Above a `FloatingTabBar`, pass `tabBarReserve(largerText, insets.bottom)`.
+
+The bar is the glass `FloatingSurface` at radius 16 with `px-2.5 py-2`. It holds the count chip (`text-xs` semibold, tabular figures, on `surface-secondary`), "Select all (n)" or "Clear", a divider, the actions, a More (dots) `DropdownMenu`, the destructive action after a divider, and "Cancel selection" (X). Buttons are the web `h-9` at radius 16, at least 44 wide and slopped to 44 high, with a 17 icon. Below 640 wide (the web `sm`) the actions are icon-only and "selected" is hidden, as on the web; labels stay as the accessible names. Actions are off (30% opacity) with no selection. It fades in from below over 150 ms (off with Reduce Motion) and scrolls sideways when it does not fit. With larger text, buttons are 48 high with a 22 icon and `text-lg`. No count pop animation or tooltip.
+
 ## Phones and accessibility
 
 The components keep the web sizes on screen and reach a 44 pt touch target with `hitSlop` (`touchSlop` in `src/controlStyles.ts`): `Checkbox` (16), `Switch` (36 × 20), tab triggers (30 high), the `Select` trigger (40 high), the `SearchInput` clear button (24), the `UpgradeToProCard` pill (32 high, slop 8) and `Button` (the slop brings each size to at least 48). From 0.5.0 so do `ColorSwatches` swatches and `IconButton` (32 and 40); the `DateTimeField` clear button and the pressable `PageIndicator` dots are 44 squares. Controls set their role and state for VoiceOver and TalkBack: `Button` (`disabled`, `busy` while loading), `Checkbox` (`checked`, `mixed`), `Switch` (`checked`), `Tabs` and `PillTabs` (`tablist`, `tab`, `selected`) and the `Select` trigger (`combobox`, with an `accessibilityLabel` prop). Give a `Button` with no text child an `accessibilityLabel`.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vvedantb/native-ui",
-  "version": "0.7.0",
+  "version": "0.9.0",
   "license": "MIT",
   "description": "Shared React Native / Expo UI primitives. Floating surfaces, forms, overlays, toasts, settings chrome, tab bar, AI chat parts, the family app marks, a NativeWind preset, the Expo web root and Clerk + Convex auth screens.",
   "type": "module",
@@ -93,10 +93,18 @@
       "types": "./src/haptics.ts",
       "default": "./src/haptics.ts"
     },
+    "./push": {
+      "types": "./src/push.ts",
+      "default": "./src/push.ts"
+    },
     "./auth": {
       "types": "./src/entries/auth.ts",
       "default": "./src/entries/auth.ts"
     },
+    "./markdown": {
+      "types": "./src/entries/markdown.ts",
+      "default": "./src/entries/markdown.ts"
+    },
     "./expo-web-root": {
       "types": "./src/entries/expo-web-root.ts",
       "default": "./src/entries/expo-web-root.ts"
@@ -114,12 +122,6 @@
     "LICENSE"
   ],
   "sideEffects": false,
-  "scripts": {
-    "build": "node -e \"require('node:fs').accessSync('src/index.ts')\"",
-    "test": "vitest run",
-    "typecheck": "tsc -p tsconfig.typecheck.json",
-    "prepack": "node -e \"require('node:fs').accessSync('src/index.ts')\""
-  },
   "peerDependencies": {
     "@clerk/clerk-expo": "*",
     "@expo/vector-icons": "*",
@@ -135,14 +137,19 @@
     "dayjs": ">=1.11.0",
     "expo-auth-session": "*",
     "expo-blur": "*",
+    "expo-constants": "*",
+    "expo-device": "*",
     "expo-haptics": "*",
     "expo-linear-gradient": "*",
+    "expo-notifications": "*",
     "expo-router": "*",
     "expo-web-browser": "*",
     "lucide-react-native": "*",
     "nativewind": ">=4.0.0",
+    "prism-react-renderer": ">=2.0.0",
     "react": ">=19.0.0",
     "react-native": ">=0.76.0",
+    "react-native-marked": ">=8.0.0",
     "react-native-reanimated": "*",
     "react-native-safe-area-context": "*",
     "react-native-screens": "*",
@@ -171,18 +178,33 @@
     "expo-blur": {
       "optional": true
     },
+    "expo-constants": {
+      "optional": true
+    },
+    "expo-device": {
+      "optional": true
+    },
     "expo-haptics": {
       "optional": true
     },
     "expo-linear-gradient": {
       "optional": true
     },
+    "expo-notifications": {
+      "optional": true
+    },
     "expo-router": {
       "optional": true
     },
     "expo-web-browser": {
       "optional": true
     },
+    "prism-react-renderer": {
+      "optional": true
+    },
+    "react-native-marked": {
+      "optional": true
+    },
     "react-native-svg": {
       "optional": true
     }
@@ -192,5 +214,10 @@
     "react": "^19.1.0",
     "typescript": "^5.9.0",
     "vitest": "^3.2.0"
+  },
+  "scripts": {
+    "build": "node -e \"require('node:fs').accessSync('src/index.ts')\"",
+    "test": "vitest run",
+    "typecheck": "tsc -p tsconfig.typecheck.json"
   }
-}
+}

package/src/BulkActionBar.tsx

@@ -0,0 +1,303 @@
+import type { ComponentType, ReactNode } from "react";
+import { Pressable, ScrollView, Text, View, useWindowDimensions, type ViewStyle } from "react-native";
+import { FadeInUp, FadeOutDown } from "react-native-reanimated";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { IconDots, IconX, type IconProps } from "@tabler/icons-react-native";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "./DropdownMenu";
+import { FloatingSurface } from "./FloatingSurface";
+import { MIN_TOUCH_TARGET, sizeStyle, touchSlop, typeStyle } from "./controlStyles";
+import { palette, withAlpha } from "./palette";
+import { useLargerText } from "./theme";
+import { tokens } from "./tokens";
+import { useScheme } from "./useScheme";
+import { NativeOnlyAnimatedView } from "./primitives/native-only-animated-view";
+
+/**
+ * One control in the bar, as the web `BulkBarAction`. Each action carries the
+ * handler it runs, so confirm dialogs stay with the caller.
+ */
+export interface BulkBarAction {
+  key: string;
+  /** Full label: the More menu item and the accessible name. */
+  label: string;
+  /** Shorter label shown in the bar on wide screens (defaults to `label`). */
+  shortLabel?: string;
+  /** A Tabler icon, drawn at 17 in the button colour. */
+  icon: ComponentType<IconProps>;
+  /** Label and icon in the danger colour. */
+  destructive?: boolean;
+  /** The web Alt-to-skip hint. No effect on a phone (no Alt key). */
+  showSkipHint?: boolean;
+  /** Native only: turns this action off even with a selection. */
+  disabled?: boolean;
+  onClick: () => void;
+}
+
+export interface BulkActionBarProps {
+  isSelecting: boolean;
+  selectedCount: number;
+  totalCount: number;
+  onExitSelect: () => void;
+  onSelectAll: () => void;
+  onClearSelection: () => void;
+  primaryActions: ReadonlyArray<BulkBarAction>;
+  /** Behind a More (dots) button, in a `DropdownMenu`. */
+  moreActions?: ReadonlyArray<BulkBarAction>;
+  /** On the right, after a divider. */
+  destructiveAction?: BulkBarAction;
+  /** The web motion key. Here the bar's `testID`. */
+  barKey?: string;
+  /**
+   * Space under the bar, in points, before its 12 gap. Default: the bottom
+   * safe-area inset. Above a `FloatingTabBar`, pass
+   * `tabBarReserve(largerText, insets.bottom)`.
+   */
+  bottomOffset?: number;
+}
+
+/** The web `sm` breakpoint: below it, bar buttons are icon-only and "selected" is hidden. */
+export const BULK_BAR_LABEL_MIN_WIDTH = 640;
+
+/** Web `h-9` buttons with a 17 icon and `text-sm`; with larger text 48 high, a 22 icon and `text-lg`. */
+function barMetrics(largerText: boolean) {
+  return largerText
+    ? { height: 48, icon: 22, text: sizeStyle("text-lg"), caption: sizeStyle("text-base") }
+    : { height: 36, icon: 17, text: sizeStyle("text-sm"), caption: sizeStyle("text-xs") };
+}
+
+/**
+ * The floating selection bar, as the web `BulkActionBar`: a pill-ended glass
+ * bar (`FloatingSurface`, radius 16, `px-2.5 py-2`, `gap-1`) centred at the
+ * bottom of its container, 12 above `bottomOffset`. It holds the selected
+ * count chip, Select all (n) / Clear, a divider, the primary actions, a More
+ * menu, the destructive action, and Cancel selection (X). Actions are off with
+ * no selection. Below 640 wide (the web `sm`) the actions are icon-only. Put it
+ * last in a full-size container; it scrolls sideways when it does not fit.
+ */
+export function BulkActionBar({
+  isSelecting,
+  selectedCount,
+  totalCount,
+  onExitSelect,
+  onSelectAll,
+  onClearSelection,
+  primaryActions,
+  moreActions,
+  destructiveAction,
+  barKey,
+  bottomOffset,
+}: BulkActionBarProps) {
+  const scheme = useScheme();
+  const metrics = barMetrics(useLargerText());
+  const insets = useSafeAreaInsets();
+  const { width } = useWindowDimensions();
+  if (!isSelecting) return null;
+  const wide = width >= BULK_BAR_LABEL_MIN_WIDTH;
+  const hasSelection = selectedCount > 0;
+  const allSelected = totalCount > 0 && selectedCount >= totalCount;
+  const muted = tokens.color.muted[scheme];
+
+  return (
+    <NativeOnlyAnimatedView
+      testID={barKey}
+      pointerEvents="box-none"
+      entering={FadeInUp.duration(150)}
+      exiting={FadeOutDown.duration(150)}
+      style={{
+        position: "absolute",
+        left: 0,
+        right: 0,
+        bottom: 12 + (bottomOffset ?? insets.bottom),
+        alignItems: "center",
+        paddingHorizontal: 16,
+      }}
+    >
+      <FloatingSurface radius={tokens.radius.lg} style={{ maxWidth: width - 32 }}>
+        <ScrollView
+          horizontal
+          bounces={false}
+          showsHorizontalScrollIndicator={false}
+          contentContainerStyle={{ flexDirection: "row", alignItems: "center", gap: 4, paddingHorizontal: 10, paddingVertical: 8 }}
+        >
+          <View
+            accessible
+            accessibilityLabel={`${selectedCount} selected`}
+            style={{ flexDirection: "row", alignItems: "center", gap: 8, paddingLeft: 4, paddingRight: 2 }}
+          >
+            <View
+              style={{
+                borderRadius: tokens.radius.md,
+                paddingHorizontal: 8,
+                paddingVertical: 2,
+                backgroundColor: tokens.color.surfaceSecondary[scheme],
+              }}
+            >
+              <Text
+                className="font-instrument-sans-semibold"
+                style={[metrics.caption, typeStyle("semibold"), { fontVariant: ["tabular-nums"], color: tokens.color.foreground[scheme] }]}
+              >
+                {selectedCount}
+              </Text>
+            </View>
+            {wide ? (
+              <Text className="font-instrument-sans-medium" style={[metrics.text, typeStyle("medium"), { color: muted }]}>
+                selected
+              </Text>
+            ) : null}
+          </View>
+
+          {totalCount > 0 ? (
+            <BarPressable height={metrics.height} paddingX={8} onPress={allSelected ? onClearSelection : onSelectAll}>
+              <Text className="font-instrument-sans-medium" style={[metrics.text, typeStyle("medium"), { color: muted }]}>
+                {allSelected ? "Clear" : `Select all (${totalCount})`}
+              </Text>
+            </BarPressable>
+          ) : null}
+
+          <BarDivider />
+
+          {primaryActions.map((action) => (
+            <BarButton key={action.key} action={action} disabled={!hasSelection} wide={wide} />
+          ))}
+
+          {moreActions && moreActions.length > 0 ? (
+            <DropdownMenu>
+              <DropdownMenuTrigger
+                accessibilityLabel="More actions"
+                disabled={!hasSelection}
+                hitSlop={touchSlop(MIN_TOUCH_TARGET, metrics.height)}
+                style={({ pressed }) => barButtonStyle(metrics.height, 0, pressed, !hasSelection, false, scheme)}
+              >
+                <IconDots size={metrics.icon} color={muted} />
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end" sideOffset={8}>
+                {moreActions.map((action) => (
+                  <DropdownMenuItem
+                    key={action.key}
+                    icon={action.icon}
+                    destructive={action.destructive}
+                    disabled={!hasSelection || Boolean(action.disabled)}
+                    onSelect={action.onClick}
+                  >
+                    {action.label}
+                  </DropdownMenuItem>
+                ))}
+              </DropdownMenuContent>
+            </DropdownMenu>
+          ) : null}
+
+          {destructiveAction ? (
+            <>
+              <BarDivider />
+              <BarButton action={destructiveAction} disabled={!hasSelection} wide={wide} />
+            </>
+          ) : null}
+
+          <BarDivider />
+
+          <BarPressable height={metrics.height} paddingX={0} label="Cancel selection" onPress={onExitSelect}>
+            <IconX size={metrics.icon} color={muted} />
+          </BarPressable>
+        </ScrollView>
+      </FloatingSurface>
+    </NativeOnlyAnimatedView>
+  );
+}
+
+/**
+ * A bar button box: the web `h-9 rounded-lg`, at least 44 wide and slopped to
+ * 44 high, `surface-secondary` while pressed (a 10% danger tint for a
+ * destructive one), faded to 30% when off.
+ */
+function barButtonStyle(
+  height: number,
+  paddingX: number,
+  pressed: boolean,
+  disabled: boolean,
+  destructive: boolean,
+  scheme: "light" | "dark",
+): ViewStyle {
+  const pressedFill = destructive ? withAlpha(palette.danger[scheme], 0.1) : tokens.color.surfaceSecondary[scheme];
+  return {
+    height,
+    minWidth: MIN_TOUCH_TARGET,
+    paddingHorizontal: paddingX,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 6,
+    borderRadius: tokens.radius.lg,
+    backgroundColor: pressed && !disabled ? pressedFill : "transparent",
+    opacity: disabled ? 0.3 : 1,
+  };
+}
+
+function BarPressable({
+  height,
+  paddingX,
+  label,
+  disabled = false,
+  destructive = false,
+  onPress,
+  children,
+}: {
+  height: number;
+  paddingX: number;
+  label?: string;
+  disabled?: boolean;
+  destructive?: boolean;
+  onPress: () => void;
+  children: ReactNode;
+}) {
+  const scheme = useScheme();
+  return (
+    <Pressable
+      accessibilityRole="button"
+      accessibilityLabel={label}
+      accessibilityState={{ disabled }}
+      disabled={disabled}
+      hitSlop={touchSlop(MIN_TOUCH_TARGET, height)}
+      onPress={onPress}
+      style={({ pressed }) => barButtonStyle(height, paddingX, pressed, disabled, destructive, scheme)}
+    >
+      {children}
+    </Pressable>
+  );
+}
+
+/** One action: the icon, and on wide screens the short label (`text-sm` medium). */
+function BarButton({ action, disabled, wide }: { action: BulkBarAction; disabled: boolean; wide: boolean }) {
+  const scheme = useScheme();
+  const metrics = barMetrics(useLargerText());
+  const Icon = action.icon;
+  const color = action.destructive ? palette.danger[scheme] : tokens.color.muted[scheme];
+  return (
+    <BarPressable
+      height={metrics.height}
+      paddingX={10}
+      label={action.label}
+      disabled={disabled || Boolean(action.disabled)}
+      destructive={action.destructive}
+      onPress={action.onClick}
+    >
+      <Icon size={metrics.icon} color={color} />
+      {wide ? (
+        <Text className="font-instrument-sans-medium" style={[metrics.text, typeStyle("medium"), { color }]}>
+          {action.shortLabel ?? action.label}
+        </Text>
+      ) : null}
+    </BarPressable>
+  );
+}
+
+/** The web vertical `Separator`: `mx-1.5 h-5 bg-border`. */
+function BarDivider() {
+  const scheme = useScheme();
+  return (
+    <View
+      accessible={false}
+      importantForAccessibility="no"
+      style={{ width: 1, height: 20, marginHorizontal: 6, backgroundColor: tokens.color.border[scheme] }}
+    />
+  );
+}

package/src/DividedList.tsx

@@ -0,0 +1,37 @@
+import { Children, Fragment, isValidElement, type ReactNode } from "react";
+import { View, type ViewProps } from "react-native";
+import { tokens } from "./tokens";
+import { useScheme } from "./useScheme";
+
+export type DividedListProps = ViewProps & {
+  children: ReactNode;
+  /** Left inset of each divider, to start it under the row text. Default 0 (edge to edge). */
+  inset?: number;
+  className?: string;
+};
+
+/**
+ * Flat rows with a hairline between each pair, as the web `divide-y
+ * divide-border` lists (Eva's inbox rows). Rows keep their own padding; the
+ * list draws no fill, radius or outer border. `null` children are skipped, so
+ * no divider is left hanging.
+ */
+export function DividedList({ children, inset = 0, className, style, ...props }: DividedListProps) {
+  const scheme = useScheme();
+  const rows = Children.toArray(children).filter(isValidElement);
+  return (
+    <View className={className} style={style} {...props}>
+      {rows.map((row, index) => (
+        <Fragment key={row.key ?? index}>
+          {index > 0 ? (
+            <View
+              accessible={false}
+              style={{ height: 1, marginLeft: inset, backgroundColor: tokens.color.border[scheme] }}
+            />
+          ) : null}
+          {row}
+        </Fragment>
+      ))}
+    </View>
+  );
+}