@vvedantb/native-ui 0.13.0 → 0.17.0

package/src/controlStyles.ts

@@ -133,23 +133,26 @@ const TEXT_SIZE = {
 
 export type TextSize = keyof typeof TEXT_SIZE;
 
-/** Tailwind `leading-tight` and `leading-snug`, as multiples of the size. */
-const LEADING = { tight: 1.25, snug: 1.375 } as const;
+/** Tailwind `leading-tight`, `leading-snug` and `leading-relaxed`, as multiples of the size. */
+const LEADING = { tight: 1.25, snug: 1.375, relaxed: 1.625 } as const;
+
+export type TextLeading = keyof typeof LEADING;
 
 /**
  * Font size and line height of a `text-*` class as a style, set beside the
  * class. On Expo web at 390 wide (0.3.6 gallery), `Button` labels with
  * `text-sm` measured 16, so the class alone does not always reach the text.
- * `"tight"` and `"snug"` are the Tailwind `leading-tight` (1.25 × the size)
- * and `leading-snug` (1.375 ×).
+ * `"tight"`, `"snug"` and `"relaxed"` are the Tailwind `leading-tight` (1.25 ×
+ * the size), `leading-snug` (1.375 ×) and `leading-relaxed` (1.625 ×, the web
+ * `.markdown` body and the settings descriptions).
  */
-export function sizeStyle(size: TextSize, leading?: "tight" | "snug") {
+export function sizeStyle(size: TextSize, leading?: TextLeading) {
   const { fontSize, lineHeight } = TEXT_SIZE[size];
   return { fontSize, lineHeight: leading ? fontSize * LEADING[leading] : lineHeight };
 }
 
-/** Tailwind `tracking-tight`, in em. */
-const TRACKING = { tight: -0.025 } as const;
+/** Tailwind `tracking-tight` and `tracking-wide`, in em. */
+const TRACKING = { tight: -0.025, wide: 0.025 } as const;
 
 /**
  * Letter spacing of a `tracking-*` class at `fontSize`, as a style in points.
@@ -313,23 +316,26 @@ export function tabColors(variant: TabsVariant, selected: boolean, scheme: Schem
 export type TabsSize = "default" | "sm";
 
 /**
- * Trigger box and type for `TabsTrigger` and `PillTabs`. Without larger text
- * these are the web sizes: `pills` and `segmented` are the web `.t-tab` (30
- * high, `px-3 py-1`, `text-sm`), `soft` the web soft trigger (`px-4 py-2
- * text-sm`) and `sm` the web `sm` list (`px-2.5 py-1 text-xs`). With larger
- * text they are the 0.3.4 sizes. `minHeight` is a minimum, so a large Dynamic
- * Type size grows the trigger instead of clipping its label.
+ * Trigger box and type for `TabsTrigger` and `PillTabs`. Phone-tuned from the
+ * web look: `pills` and `segmented` are the web `.t-tab` (`py-1`, `text-sm`)
+ * grown to 36 high with `px-3.5`, so the 4 slop above and below makes 44;
+ * `sm` is the web `sm` list (`px-2.5 py-1 text-xs`) with the label kept at 14
+ * (`text-sm`, `px-3`) and also 36 high; `soft` is the web soft trigger
+ * (`px-4 py-2 text-sm`). With larger text they are the 0.3.4 sizes.
+ * `minHeight` is a minimum, so a large Dynamic Type size grows the trigger
+ * instead of clipping its label. `letterSpacing` is the web type-scale
+ * tracking of the label (`tokens/src/css/type-scale.css`): `text-sm` is 0em.
  */
 export function tabTriggerSize(variant: TabsVariant, size: TabsSize, largerText: boolean) {
   if (largerText) {
     return size === "sm"
-      ? { minHeight: 48, className: "px-4 py-2", textClassName: "text-lg" }
-      : { minHeight: 56, className: "px-4 py-3", textClassName: "text-xl" };
+      ? { minHeight: 48, className: "px-4 py-2", textClassName: "text-lg", letterSpacing: 0 }
+      : { minHeight: 56, className: "px-4 py-3", textClassName: "text-xl", letterSpacing: 0 };
   }
-  if (size === "sm") return { minHeight: 30, className: "px-2.5 py-1", textClassName: "text-xs" };
+  if (size === "sm") return { minHeight: 36, className: "px-3 py-1", textClassName: "text-sm", letterSpacing: 0 };
   return variant === "soft"
-    ? { minHeight: 36, className: "px-4 py-2", textClassName: "text-sm" }
-    : { minHeight: 30, className: "px-3 py-1", textClassName: "text-sm" };
+    ? { minHeight: 36, className: "px-4 py-2", textClassName: "text-sm", letterSpacing: 0 }
+    : { minHeight: 36, className: "px-3.5 py-1", textClassName: "text-sm", letterSpacing: 0 };
 }
 
 /** The segmented track, web `--tabs-bar-bg` (`--default`). */
@@ -341,14 +347,14 @@ export function tabTrackStyle(scheme: Scheme) {
  * Fill and label of the `FloatingTabBar` active pill. On the web the raised
  * `--segment` pill sits on a muted `--default` track. The floating bar is
  * already the raised surface (`tokens.color.fill`, near-white in light), so in
- * light the pill takes the muted track fill (`palette.default`), as a white
- * `--segment` pill would not show on it. In dark it keeps `--segment`
- * (`palette.segment`), lighter than the dark glass. The label is the
+ * light the pill takes the muted track fill (`--default`), as a white
+ * `--segment` pill would not show on it. In dark it keeps the kit `--segment`,
+ * lighter than the dark glass. Both are `palette.tabBarPill`. The label is the
  * segmented `--tabs-text-active`, as `tabColors("segmented", true, scheme)`.
  */
 export function floatingTabPillColors(scheme: Scheme): TabColors {
   return {
-    backgroundColor: scheme === "light" ? palette.default.light : palette.segment.dark,
+    backgroundColor: palette.tabBarPill[scheme],
     color: tabColors("segmented", true, scheme).color,
   };
 }
@@ -372,16 +378,26 @@ export function checkboxColors(checked: boolean, scheme: Scheme) {
       };
 }
 
+export type SwitchSize = "sm" | "md";
+
 /**
- * Track and thumb size classes, and the track size in points for the hit slop.
- * Without larger text it is the web `Switch`: a `h-5 w-9` track (20 × 36,
- * with a 1 border) and a `size-4` thumb that moves `translate-x-4`. With larger
- * text it is the 0.3.4 size. `justify-center` on the track centres the thumb.
+ * Track and thumb size classes, the thumb offset off and on, and the track
+ * size in points for the hit slop. `justify-center` on the track centres the
+ * thumb. Without larger text:
+ * - `sm` is the web `Switch`: a `h-5 w-9` track (20 × 36, with a 1 border)
+ *   and a `size-4` thumb that moves `translate-x-4`.
+ * - `md` is the larger app switch some web apps set through `UiConfig.Switch`:
+ *   a `h-6 w-10` track (24 × 40, with a 1 border) and a `size-5` thumb that
+ *   sits at `translate-x-0.5` and moves to `translate-x-[18px]`.
+ * With larger text both are the 0.3.4 size.
  */
-export function switchSize(largerText: boolean) {
-  return largerText
-    ? { track: "h-8 w-14", thumb: "h-7 w-7", on: "translate-x-6", width: 56, height: 32 }
-    : { track: "h-5 w-9", thumb: "h-4 w-4", on: "translate-x-4", width: 36, height: 20 };
+export function switchSize(largerText: boolean, size: SwitchSize = "sm") {
+  if (largerText) {
+    return { track: "h-8 w-14", thumb: "h-7 w-7", off: "translate-x-0", on: "translate-x-6", width: 56, height: 32 };
+  }
+  return size === "md"
+    ? { track: "h-6 w-10", thumb: "h-5 w-5", off: "translate-x-0.5", on: "translate-x-[18px]", width: 40, height: 24 }
+    : { track: "h-5 w-9", thumb: "h-4 w-4", off: "translate-x-0", on: "translate-x-4", width: 36, height: 20 };
 }
 
 /**

package/src/entries/gesture-handler.ts

@@ -0,0 +1,4 @@
+// `@vvedantb/native-ui/gesture-handler`. Imports `react-native-gesture-handler`
+// (an optional peer): the only entry that does, so an app without it bundles
+// the `PanResponder` sheets as before.
+export { GestureHandlerProvider } from "../primitives/sheet-gesture";

package/src/entries/keyboard-controller.ts

@@ -0,0 +1,4 @@
+// `@vvedantb/native-ui/keyboard-controller`. Imports
+// `react-native-keyboard-controller` (an optional peer): the only entry that
+// does, so an app without it keeps React Native's `KeyboardAvoidingView`.
+export { KeyboardControllerProvider } from "../primitives/keyboard-controller";

package/src/entries/markdown.ts

@@ -2,4 +2,4 @@
 // `.markdown` block. Not on the root entry: it imports the optional peer
 // `react-native-marked`, and Metro does not tree-shake.
 export { Markdown, markdownStyles, inlineCodeStyle, MARKDOWN_SCALE, MARKDOWN_LIST } from "../markdown/Markdown";
-export type { MarkdownProps } from "../markdown/Markdown";
+export type { MarkdownHeadings, MarkdownProps } from "../markdown/Markdown";

package/src/entries/primitives.ts

@@ -42,16 +42,24 @@ export type { IconButtonProps, IconButtonSize, IconButtonVariant } from "../Icon
 export { CaptureButton } from "../CaptureButton";
 export type { CaptureButtonProps } from "../CaptureButton";
 export { Separator } from "../Separator";
+export { KeyboardAvoidingView } from "../primitives/keyboard-parts";
+export type { KeyboardAvoidingViewProps } from "../primitives/keyboard-parts";
 export type { SeparatorProps } from "../Separator";
 export { Progress } from "../Progress";
 export type { ProgressProps } from "../Progress";
 export { Spinner, CenteredSpinner } from "../Spinner";
 export type { SpinnerProps } from "../Spinner";
+export { LoadingState } from "../LoadingState";
+export type { LoadingStateProps, LoadingStateSize } from "../LoadingState";
 export { Avatar, AvatarImage, AvatarFallback } from "../Avatar";
 export type { AvatarProps, AvatarImageProps, AvatarFallbackProps } from "../Avatar";
 export { initials } from "../initials";
+export { formatCompactRelativeTime } from "../relativeTime";
+export type { CompactRelativeTimeOptions } from "../relativeTime";
 export { Chip } from "../Chip";
 export { PillTabs } from "../PillTabs";
+export { Pager } from "../Pager";
+export type { PagerProps } from "../Pager";
 export { Tabs, TabsList, TabsTrigger, TabsContent } from "../Tabs";
 export type {
   TabsProps,
@@ -61,9 +69,21 @@ export type {
   TabsContentProps,
 } from "../Tabs";
 export { ListRow } from "../ListRow";
-export { DividedList } from "../DividedList";
+export { DividedList, ListDivider } from "../DividedList";
 export type { DividedListProps } from "../DividedList";
 export type { ListRowProps } from "../ListRow";
+export { SwipeableRow } from "../SwipeableRow";
+export type { SwipeableRowProps } from "../SwipeableRow";
+export { closeSwipeRows, swipeActionsAccessibility } from "../swipeRow";
+export type { SwipeAction } from "../swipeRow";
+export { ImageGallery, ImageViewer } from "../media/ImageGallery";
+export type { ImageGalleryProps, ImageViewerProps } from "../media/ImageGallery";
+export { MediaCard } from "../media/MediaCard";
+export type { MediaCardProps } from "../media/MediaCard";
+export { imageAspect, imageGridTiles, imageViewerPage, MEDIA } from "../media/imageGrid";
+export type { GalleryImage, ImageGridTile } from "../media/imageGrid";
+export { SurfaceRow, SURFACE_ROW } from "../SurfaceRow";
+export type { SurfaceRowProps } from "../SurfaceRow";
 export { HeaderIconButton } from "../HeaderIconButton";
 export { ThemeToggle } from "../ThemeToggle";
 export type { ThemeToggleProps } from "../ThemeToggle";
@@ -76,7 +96,8 @@ export {
   CardFooter,
 } from "../Card";
 export type { CardProps } from "../Card";
-export { Skeleton, CardSkeleton } from "../Skeleton";
+export { Skeleton, CardSkeleton, SkeletonList, SkeletonRow } from "../Skeleton";
+export type { SkeletonListProps, SkeletonRowProps } from "../Skeleton";
 export { EmptyState } from "../EmptyState";
 export type { EmptyStateVariant } from "../EmptyState";
 export {
@@ -105,7 +126,7 @@ export {
 export type { AlertDialogProps, AlertDialogContentProps } from "../AlertDialog";
 export { ConfirmDialog } from "../ConfirmDialog";
 export { BulkActionBar, BULK_BAR_LABEL_MIN_WIDTH } from "../BulkActionBar";
-export type { BulkActionBarProps, BulkBarAction } from "../BulkActionBar";
+export type { BulkActionBarProps, BulkBarAction, BulkBarPlacement } from "../BulkActionBar";
 export {
   DropdownMenu,
   DropdownMenuTrigger,

package/src/entries/theme.ts

@@ -13,5 +13,6 @@ export { palette, withAlpha } from "../palette";
 export type { Palette } from "../palette";
 export { configureTheme } from "../configureTheme";
 export type { ThemeConfig, ThemeColors, ThemePalette } from "../configureTheme";
-export { fontClass } from "../typography";
+export { fontClass, fontFamily } from "../typography";
+export type { ThemeFonts } from "../typography";
 export { PINK_50, PINK_100, PINK_600, PINK_700, NEUTRAL_100, NEUTRAL_500, NEUTRAL_900, Colors } from "../colors";

package/src/entries/video.ts

@@ -0,0 +1,4 @@
+// `@vvedantb/native-ui/video`. Imports `expo-video` (an optional peer): the
+// only entry that does, so an app without it bundles no video player.
+export { InlineVideo, INLINE_VIDEO_ASPECT } from "../video/InlineVideo";
+export type { InlineVideoProps } from "../video/InlineVideo";

package/src/entries/webview.ts

@@ -0,0 +1,6 @@
+// `@vvedantb/native-ui/webview`. Imports `react-native-webview` (an optional
+// peer): the only entry that does, so an app without it bundles no WebView.
+export { HtmlView } from "../webview/HtmlView";
+export type { HtmlViewProps } from "../webview/HtmlView";
+export { HTML_VIEW_HEIGHT_SCRIPT, htmlViewNavigation, htmlViewPostScript, parseHtmlViewHeight } from "../webview/htmlView";
+export type { HtmlViewNavigation } from "../webview/htmlView";

package/src/floating.ts

@@ -48,9 +48,30 @@ export const floatingFill = tokens.color.fill;
 /** The `tokens.color.surface` pair itself, so `configureTheme` reaches it. */
 export const floatingSolidFill = tokens.color.surface;
 
+/**
+ * Where `FloatingTabBar` sits: `FLOATING_INSET` in from the screen sides (and,
+ * in landscape, the notch) and above the home indicator. `BulkActionBar` with
+ * `placement="tabBar"` takes the same slot while the tab bar hides.
+ */
+export function tabBarSlotStyle(insets: { left: number; right: number; bottom: number }): {
+  position: "absolute";
+  left: number;
+  right: number;
+  bottom: number;
+} {
+  return {
+    position: "absolute",
+    left: insets.left + FLOATING_INSET,
+    right: insets.right + FLOATING_INSET,
+    bottom: FLOATING_INSET + Math.max(insets.bottom, 8),
+  };
+}
+
+/** The height of `FloatingTabBar`, and of `BulkActionBar` in its slot. */
+export function tabBarHeight(largerText: boolean) {
+  return largerText ? FLOATING_TAB_BAR_HEIGHT_LARGE : FLOATING_TAB_BAR_HEIGHT;
+}
+
 export function tabBarReserve(largerText: boolean, bottomInset: number) {
-  const bar = largerText
-    ? FLOATING_TAB_BAR_HEIGHT_LARGE
-    : FLOATING_TAB_BAR_HEIGHT;
-  return bar + FLOATING_INSET + Math.max(bottomInset, 8) + 28;
+  return tabBarHeight(largerText) + FLOATING_INSET + Math.max(bottomInset, 8) + 28;
 }

package/src/haptics.ts

@@ -21,9 +21,35 @@ export function loadHaptics(): ExpoHapticsModule | null {
   return expoHaptics;
 }
 
+function native(): ExpoHapticsModule | null {
+  return Platform.OS === "web" ? null : loadHaptics();
+}
+
+/** A value ticks past a step: a tab, a segment, a checkbox. */
 export function selectionHaptic() {
-  if (Platform.OS === "web") {
-    return;
-  }
-  void loadHaptics()?.selectionAsync();
+  void native()?.selectionAsync();
+}
+
+/**
+ * A physical moment: `"light"` when something snaps home (a dragged sheet
+ * springing back), `"medium"` when a destructive action fires. Fire it in the
+ * same frame as the visual, once per user action.
+ */
+export function impactHaptic(weight: "light" | "medium") {
+  const haptics = native();
+  if (!haptics) return;
+  void haptics.impactAsync(
+    weight === "light" ? haptics.ImpactFeedbackStyle.Light : haptics.ImpactFeedbackStyle.Medium,
+  );
+}
+
+/** An operation the user started succeeded or failed (the success and error toasts). */
+export function notificationHaptic(outcome: "success" | "error") {
+  const haptics = native();
+  if (!haptics) return;
+  void haptics.notificationAsync(
+    outcome === "success"
+      ? haptics.NotificationFeedbackType.Success
+      : haptics.NotificationFeedbackType.Error,
+  );
 }

package/src/highlight.ts

@@ -111,7 +111,308 @@ const PRISM_ROLE: Record<string, CodeColorRole> = {
  * "punctuation"]`) is plain.
  */
 export function codeTokenColor(types: readonly string[], scheme: "light" | "dark"): string {
+  return GITHUB_CODE_COLORS[scheme][prismRole(types)];
+}
+
+function prismRole(types: readonly string[]): CodeColorRole {
   let role: CodeColorRole = "plain";
   for (const type of types) role = PRISM_ROLE[type] ?? role;
-  return GITHUB_CODE_COLORS[scheme][role];
+  return role;
+}
+
+/** One coloured run of code. */
+export type CodeToken = { content: string; role: CodeColorRole };
+
+/** A Prism token as `prism-react-renderer` hands it over: its types, outermost first. */
+export type PrismToken = { types: readonly string[]; content: string; empty?: boolean };
+
+/** Languages `scriptTokens` refines: the JavaScript family, as Shiki's grammars. */
+export const SCRIPT_LANGUAGES = new Set(["js", "jsx", "javascript", "mjs", "cjs", "ts", "tsx", "typescript", "mts", "cts"]);
+
+/** Languages `shellTokens` colours. `prism-react-renderer` bundles no shell grammar. */
+export const SHELL_LANGUAGES = new Set(["bash", "sh", "shell", "zsh", "shellscript", "console"]);
+
+/** Keywords Shiki colours as constants (`constant.language`, `variable.language`, a `void` type). */
+const SCRIPT_CONSTANT_KEYWORDS = new Set(["null", "undefined", "this", "super", "void"]);
+
+const IDENTIFIER = /^[A-Za-z_$][\w$]*$/;
+
+/** A token's role before context: what Prism's types say, with the Shiki differences that need no context. */
+function scriptBaseRole({ types, content }: PrismToken): CodeColorRole {
+  // Inside `${…}` Shiki keeps the punctuation in the string colour and the code in its own.
+  const interpolation = types.lastIndexOf("interpolation");
+  if (interpolation >= 0) {
+    const inner = types.slice(interpolation + 1);
+    return inner.includes("punctuation") || inner.includes("interpolation-punctuation") ? "string" : prismRole(inner);
+  }
+  // A regex character class, brackets and escapes too.
+  if (types.includes("char-class")) return "constant";
+  const role = prismRole(types);
+  if (role === "keyword" && SCRIPT_CONSTANT_KEYWORDS.has(content)) return "constant";
+  if (types.includes("builtin") && content === "console") return "plain";
+  if (types.includes("function") && content === "constructor") return "keyword";
+  return role;
+}
+
+type Piece = CodeToken & { line: number; types: readonly string[] };
+
+/** Splits a token so escapes in strings and each word of plain text get a role of their own. */
+function splitPiece(piece: Piece): Piece[] {
+  const parts =
+    piece.role === "string" && !piece.types.includes("regex")
+      ? piece.content.split(/(\\.)/)
+      : piece.role === "plain"
+        ? piece.content.split(/([A-Za-z_$][\w$]*)/)
+        : [piece.content];
+  return parts
+    .filter((part) => part !== "")
+    .map((part) => ({ ...piece, content: part, role: piece.role === "string" && /^\\./.test(part) ? "constant" : piece.role }));
+}
+
+const isWord = (piece: Piece | undefined, word: string) => piece?.content === word;
+
+/**
+ * Prism tokens for the JavaScript family, recoloured where Prism and the
+ * web's Shiki grammars disagree, so the phone draws the web colours:
+ * `null`, `undefined` and `this` as constants; escapes in strings; a regex
+ * character class; `${…}` punctuation in the string colour; a `const` name
+ * as a constant; parameters in the variable colour; type and class names
+ * (a capitalised word not followed by `.`) as functions; ALL_CAPS words as
+ * constants. Returns lines of runs, adjacent runs of one role merged.
+ */
+export function scriptTokens(lines: readonly (readonly PrismToken[])[]): CodeToken[][] {
+  const pieces = lines.flatMap((tokens, line) =>
+    tokens.filter((token) => !token.empty && token.content !== "").flatMap((token) =>
+      splitPiece({ content: token.content, types: token.types, role: scriptBaseRole(token), line }),
+    ),
+  );
+  // Indices of the pieces that are not whitespace.
+  const sig = pieces.flatMap((piece, index) => (piece.content.trim() === "" ? [] : [index]));
+  const at = (position: number) => {
+    const index = sig[position];
+    return index === undefined ? undefined : pieces[index];
+  };
+  const isIdentifier = (piece: Piece | undefined): piece is Piece =>
+    piece !== undefined && piece.role === "plain" && IDENTIFIER.test(piece.content);
+  const closing = (open: number) => {
+    let depth = 0;
+    for (let position = open; position < sig.length; position += 1) {
+      const content = at(position)?.content;
+      if (content === "(") depth += 1;
+      else if (content === ")") {
+        depth -= 1;
+        if (depth === 0) return position;
+      }
+    }
+    return undefined;
+  };
+  // An arrow function's parameters, or a declared function's or method's.
+  const isParameterList = (open: number, close: number) => {
+    const before = at(open - 1);
+    if (isWord(before, "function") || isWord(before, "constructor")) return true;
+    if (before?.role === "function" && isWord(at(open - 2), "function")) return true;
+    let depth = 0;
+    for (let position = close + 1; position < Math.min(sig.length, close + 40); position += 1) {
+      const content = at(position)?.content;
+      if (position === close + 1 && content !== ":") return content === "=>" || (content === "{" && before?.role === "function");
+      if (content === "(" || content === "<" || content === "[") depth += 1;
+      else if (content === ")" || content === ">" || content === "]") depth -= 1;
+      else if (depth === 0 && content === "=>") return true;
+      else if (depth === 0 && content === "{") return before?.role === "function";
+      else if (depth === 0 && (content === ";" || content === "=")) return false;
+    }
+    return false;
+  };
+  for (let position = 0; position < sig.length; position += 1) {
+    if (!isWord(at(position), "(")) continue;
+    const close = closing(position);
+    if (close === undefined || !isParameterList(position, close)) continue;
+    let depth = 0;
+    let expectName = true;
+    for (let inner = position + 1; inner < close; inner += 1) {
+      const piece = at(inner);
+      const content = piece?.content;
+      if (content === "(" || content === "[" || content === "{" || content === "<") depth += 1;
+      else if (content === ")" || content === "]" || content === "}" || content === ">") depth -= 1;
+      else if (depth === 0 && content === ",") expectName = true;
+      else if (depth === 0 && (content === ":" || content === "=" || content === "?")) expectName = false;
+      else if (depth === 0 && expectName && isIdentifier(piece)) {
+        piece.role = "variable";
+        expectName = false;
+      }
+    }
+  }
+  let inImport = false;
+  let constPattern = 0;
+  // `Map<string, number>`: Shiki draws type-argument brackets plain, Prism as operators.
+  let generic = 0;
+  for (let position = 0; position < sig.length; position += 1) {
+    const piece = at(position);
+    if (!piece) continue;
+    const previous = at(position - 1);
+    if (piece.role === "keyword" && piece.content === "import") inImport = true;
+    if (piece.role === "keyword" && piece.content === "from") inImport = false;
+    // `const { a, b } = …`: every name in the pattern.
+    if (isWord(previous, "const") && (piece.content === "{" || piece.content === "[")) constPattern = 1;
+    else if (constPattern > 0 && (piece.content === "{" || piece.content === "[")) constPattern += 1;
+    else if (constPattern > 0 && (piece.content === "}" || piece.content === "]")) constPattern -= 1;
+    if (piece.role === "keyword" && piece.content === "<" && pieces[(sig[position] ?? 0) - 1]?.role === "function") {
+      piece.role = "plain";
+      generic += 1;
+    } else if (generic > 0 && piece.role === "keyword" && piece.content === ">") {
+      piece.role = "plain";
+      generic -= 1;
+    }
+    if (!isIdentifier(piece) || inImport) continue;
+    const next = at(position + 1);
+    if ((previous?.role === "keyword" && previous.content === "const") || constPattern > 0) piece.role = "constant";
+    else if (isWord(next, "=>")) piece.role = "variable";
+    else if (/^[A-Z][A-Z0-9_]+$/.test(piece.content)) piece.role = "constant";
+    else if (/^[A-Z]/.test(piece.content) && /[a-z]/.test(piece.content) && !isWord(next, ".")) piece.role = "function";
+  }
+  return mergeLines(pieces, lines.length);
+}
+
+function mergeLines(pieces: ReadonlyArray<CodeToken & { line: number }>, count: number): CodeToken[][] {
+  const out: CodeToken[][] = Array.from({ length: count }, () => []);
+  for (const { content, role, line } of pieces) {
+    const runs = out[line];
+    if (!runs) continue;
+    const last = runs.at(-1);
+    if (last && last.role === role) last.content += content;
+    else runs.push({ content, role });
+  }
+  return out;
+}
+
+/** Shell words Shiki colours as keywords. */
+const SHELL_KEYWORDS = new Set([
+  "if", "then", "else", "elif", "fi", "for", "while", "until", "do", "done", "case", "esac", "in",
+  "function", "select", "break", "continue", "return", "export", "local", "readonly", "declare",
+]);
+
+/** After these a new command starts. */
+const SHELL_COMMAND_KEYWORDS = new Set(["then", "else", "do", "if", "while", "until", "elif"]);
+
+/** Shell builtins Shiki colours as constants (`support.function.builtin`). */
+const SHELL_BUILTINS = new Set([
+  "echo", "cd", "printf", "source", "set", "unset", "exit", "pwd", "read", "eval", "exec", "shift",
+  "trap", "wait", "type", "alias", "unalias", "true", "false", "test", "ulimit", "umask", "kill",
+]);
+
+/**
+ * Shell code in the roles of the web's Shiki `bash` grammar, for `bash`, `sh`,
+ * `shell` and `zsh` blocks: a command name as a function, its arguments as
+ * strings, `-x` and `--flag` options and numbers as constants, builtins
+ * (`echo`, `cd`) as constants, keywords, `|`, `||` and redirects as
+ * keywords, `$VAR` plain (also inside a double-quoted string), comments.
+ * `prism-react-renderer` bundles no shell grammar, so this needs no peer.
+ */
+export function shellTokens(code: string): CodeToken[][] {
+  return code.split("\n").map((source) => {
+    const runs: CodeToken[] = [];
+    const push = (content: string, role: CodeColorRole) => {
+      if (content === "") return;
+      const last = runs.at(-1);
+      if (last && last.role === role) last.content += content;
+      else runs.push({ content, role });
+    };
+    let index = 0;
+    let command = true;
+    // `for NAME in`: the name is plain, then `in` is a keyword.
+    let forState: "none" | "name" | "in" = "none";
+    // Inside `[ … ]` Shiki draws test operators (`-f`) as keywords and words plain.
+    let inTest = false;
+    while (index < source.length) {
+      const rest = source.slice(index);
+      const space = /^\s+/.exec(rest);
+      if (space) {
+        push(space[0], "plain");
+        index += space[0].length;
+        continue;
+      }
+      if (rest.startsWith("#")) {
+        push(rest, "comment");
+        break;
+      }
+      if (rest.startsWith('"')) {
+        // Double quotes: the string colour, with `$VAR` and `${VAR}` names plain.
+        const end = rest.slice(1).search(/(?<!\\)"/);
+        const text = end < 0 ? rest : rest.slice(0, end + 2);
+        for (const part of text.split(/(\$\{[^}]*\}|\$[A-Za-z_]\w*)/)) {
+          const braced = /^\$\{([^}]*)\}$/.exec(part);
+          if (braced) {
+            push("${", "string");
+            push(braced[1] ?? "", "plain");
+            push("}", "string");
+          } else push(part, /^\$[A-Za-z_]/.test(part) ? "plain" : "string");
+        }
+        index += text.length;
+        command = false;
+        continue;
+      }
+      if (rest.startsWith("'")) {
+        const end = rest.indexOf("'", 1);
+        const text = end < 0 ? rest : rest.slice(0, end + 1);
+        push(text, "string");
+        index += text.length;
+        command = false;
+        continue;
+      }
+      const operator = /^(?:\d?>>?&?\d?|<|\|\||\||&&|;|&|\$\(|\(|\)|`)/.exec(rest);
+      if (operator) {
+        const text = operator[0];
+        // Shiki: `|`, `||` and redirects in the keyword colour, `&&` and `;` plain.
+        push(text, text === "&&" || text === ";" || text === "$(" || text === "(" || text === ")" || text === "`" ? "plain" : "keyword");
+        index += text.length;
+        command = text !== ")" && !/^\d?>/.test(text) && text !== "<";
+        continue;
+      }
+      const variable = /^\$(?:\{[^}]*\}|[A-Za-z_]\w*|[0-9@#?$!*-])/.exec(rest);
+      if (variable) {
+        push(variable[0], "plain");
+        index += variable[0].length;
+        command = false;
+        continue;
+      }
+      const word = /^[^\s|&;<>()$"'`]+/.exec(rest)?.[0] ?? rest.charAt(0);
+      index += word.length;
+      const assignment = /^([A-Za-z_]\w*)=(.*)$/.exec(word);
+      if (SHELL_KEYWORDS.has(word) && (command || (word === "in" && forState === "in"))) {
+        push(word, "keyword");
+        command = SHELL_COMMAND_KEYWORDS.has(word);
+        forState = word === "for" ? "name" : "none";
+        continue;
+      }
+      // A test's brackets are plain, and what follows them is not a command.
+      if (word === "[" || word === "[[" || word === "]" || word === "]]") {
+        push(word, "plain");
+        command = false;
+        inTest = word.startsWith("[");
+        continue;
+      }
+      if (inTest) {
+        push(word, /^-[a-z]+$/.test(word) ? "keyword" : "plain");
+        continue;
+      }
+      if (assignment && (command || runs.at(-2)?.content === "export")) {
+        push(assignment[1] ?? "", "plain");
+        push("=", "keyword");
+        push(assignment[2] ?? "", "plain");
+        continue;
+      }
+      if (forState === "name") {
+        push(word, "plain");
+        forState = "in";
+        continue;
+      }
+      if (command) {
+        push(word, SHELL_BUILTINS.has(word) ? "constant" : "function");
+        command = false;
+        continue;
+      }
+      push(word, /^-/.test(word) || /^\d+$/.test(word) ? "constant" : "string");
+    }
+    return runs;
+  });
 }