@vvedantb/native-ui 0.13.0 → 0.17.1

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/examples/AiChatGallery.tsx

@@ -39,10 +39,17 @@ import {
   SourcesTrigger,
   Suggestion,
   Suggestions,
+  SubagentResultCard,
+  SubagentRunCard,
+  ToolApprovalCard,
+  ToolDraftCard,
   formatElapsed,
   useStreamingDisclosure,
   type AttachmentData,
   type ChatStatus,
+  type DraftEdit,
+  type DraftField,
+  type SubagentStatus,
 } from "../ai";
 
 const SUGGESTIONS = [
@@ -73,6 +80,68 @@ const STREAMING_REASONING =
  * reasoning and trace, reply, code, sources and actions), a second user
  * message, and an assistant message that is still working while `streaming`.
  */
+const DRAFT_FIELDS: DraftField[] = [
+  { key: "to", role: "to", value: "team@example.com" },
+  { key: "subject", role: "subject", value: "Weekly plan" },
+  { key: "body", role: "body", value: "Here is the plan for next week." },
+];
+
+const RUN_STATUSES: SubagentStatus[] = ["queued", "running", "done", "failed", "cancelled", "timed_out"];
+
+/** Tool approval, draft and subagent cards, with testIDs for E2E. */
+export function AiCardSamples() {
+  const [decision, setDecision] = useState("none");
+  const [cancelled, setCancelled] = useState(false);
+  const decide = (name: string) => (choice: string, edits?: DraftEdit[]) =>
+    setDecision(`${name}:${choice}${edits ? `:${JSON.stringify(edits)}` : ""}`);
+  return (
+    <>
+      <ResponseText>{`Last decision: ${decision}`}</ResponseText>
+      <ToolApprovalCard
+        testID="gallery-approval"
+        toolName="create_task"
+        args={{ title: "Review plan" }}
+        server="tasks"
+        routineMode
+        expiresLabel="tomorrow"
+        target="Project board"
+        onDecide={decide("approval")}
+      />
+      <ToolDraftCard
+        testID="gallery-draft"
+        toolName="send_message"
+        fields={DRAFT_FIELDS}
+        server="mail"
+        expiresLabel="in 2 hours"
+        approveLabel="Send"
+        denyLabel="Discard"
+        onDecide={decide("draft")}
+      />
+      {RUN_STATUSES.map((status) => (
+        <SubagentRunCard
+          key={status}
+          testID={`gallery-run-${status}`}
+          title="Research"
+          status={status}
+          elapsedSeconds={65}
+          statusLine={status === "running" ? "Step 2 of 4" : undefined}
+          error={status === "failed" ? "The source could not be reached." : undefined}
+          onCancel={() => setCancelled(true)}
+        />
+      ))}
+      <ResponseText>{`Cancelled: ${cancelled ? "yes" : "no"}`}</ResponseText>
+      <SubagentResultCard
+        testID="gallery-result"
+        title="Research"
+        summary="Three sources found."
+        approvalPending
+        approvalPendingIn="Planner"
+        handoffs={[{ toolName: "create_task", server: "tasks", argsSummary: '{"title":"Review plan"}' }]}
+      />
+    </>
+  );
+}
+
 export function AiChatSamples({ streaming = true }: { streaming?: boolean }) {
   const [feedback, setFeedback] = useState<"like" | "dislike" | null>(null);
   const searchFold = useStreamingDisclosure(streaming);
@@ -164,6 +233,7 @@ export function AiChatSamples({ streaming = true }: { streaming?: boolean }) {
           )}
         </MessageContent>
       </Message>
+      <AiCardSamples />
     </>
   );
 }

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;
+  });
 }

package/src/index.ts

@@ -12,7 +12,8 @@ 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 {
   FLOATING_INSET,
   FLOATING_TAB_BAR_HEIGHT,
@@ -26,7 +27,7 @@ export {
   floatingSolidFill,
   tabBarReserve,
 } from "./floating";
-export { selectionHaptic } from "./haptics";
+export { impactHaptic, notificationHaptic, selectionHaptic } from "./haptics";
 export { useReduceTransparency } from "./useReduceTransparency";
 export { FloatingSurface, GlassSheetBackground } from "./FloatingSurface";
 export {
@@ -82,12 +83,20 @@ export type { SeparatorProps } from "./Separator";
 export { Progress } from "./Progress";
 export type { ProgressProps } from "./Progress";
 export { Spinner, CenteredSpinner } from "./Spinner";
+export { KeyboardAvoidingView } from "./primitives/keyboard-parts";
+export type { KeyboardAvoidingViewProps } from "./primitives/keyboard-parts";
 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,
@@ -97,9 +106,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";
@@ -112,7 +133,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 {
@@ -141,7 +163,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,