@vvedantb/native-ui 0.13.0 → 0.17.0

package/src/ai/choice-question.tsx

@@ -1,13 +1,13 @@
 import { useState, type ReactNode } from "react";
 import { Pressable, ScrollView, Text, View } from "react-native";
 import { IconArrowLeft, IconArrowRight, IconCheck, IconPencil } from "@tabler/icons-react-native";
-import { Badge } from "../Badge";
 import { Button } from "../Button";
 import { Input } from "../Input";
-import { sizeStyle, textStyle, typeStyle } from "../controlStyles";
+import { buttonColors, sizeStyle, textStyle, trackingStyle, typeStyle } from "../controlStyles";
 import { palette } from "../palette";
 import { useLargerText } from "../theme";
 import { tokens } from "../tokens";
+import { useReduceMotion } from "../useReduceMotion";
 import { useScheme } from "../useScheme";
 import { chatTextSize } from "./chat-text";
 
@@ -35,6 +35,11 @@ export type ChoiceQuestionProps = {
   otherPlaceholder?: string;
   /** Inside the web dock card (`rounded-surface bg-card p-3`, scrolling past 60% of the screen). Default `true`. */
   framed?: boolean;
+  /**
+   * Back, Next and Submit label weight. Default `medium`, the `Button` label
+   * (web `font-medium`). `semibold` for apps whose web buttons are semibold, as Eva.
+   */
+  buttonWeight?: "medium" | "semibold";
 };
 
 const LETTERS = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
@@ -72,10 +77,24 @@ export function ChoiceQuestion({
   otherLabel = "Other...",
   otherPlaceholder = "Type your answer...",
   framed = true,
+  buttonWeight = "medium",
 }: ChoiceQuestionProps) {
   const scheme = useScheme();
   const largerText = useLargerText();
   const icon = largerText ? 18 : 15;
+  const buttonText = largerText ? "text-xl" : "text-sm";
+  // A string child draws the `Button` medium label; a semibold one is drawn here, in the variant's label colour.
+  const buttonLabel = (text: string, variant: "primary" | "ghost") =>
+    buttonWeight === "medium" ? (
+      text
+    ) : (
+      <Text
+        className={`${buttonText} font-instrument-sans-semibold`}
+        style={[sizeStyle(buttonText), typeStyle("semibold"), { color: buttonColors(variant, scheme)?.color }]}
+      >
+        {text}
+      </Text>
+    );
   const [step, setStep] = useState(0);
   const [picked, setPicked] = useState<Record<number, string[]>>({});
   const [other, setOther] = useState<Record<number, string>>({});
@@ -109,18 +128,13 @@ export function ChoiceQuestion({
       <View className="flex-row items-center justify-between" style={{ gap: 8 }}>
         <Text
           className="flex-1 font-instrument-sans-semibold"
-          // Web `text-[15px] leading-snug`; larger text steps up to 18.
-          style={[{ fontSize: largerText ? 18 : 15, lineHeight: largerText ? 24 : 20 }, textStyle("foreground", scheme), typeStyle("semibold")]}
+          // Web `text-[15px] leading-snug` (15 / 20.625); larger text steps up to 18.
+          style={[{ fontSize: largerText ? 18 : 15, lineHeight: largerText ? 24 : 15 * 1.375 }, textStyle("foreground", scheme), typeStyle("semibold")]}
         >
           {question.question}
         </Text>
         <View className="flex-row items-center" style={{ gap: 6 }}>
-          {/* Web `text-3xs`: a compact badge beside the question. */}
-          {question.header ? (
-            <Badge variant="secondary" className="px-2 py-0.5" textClassName={largerText ? "text-sm" : "text-xs"}>
-              {question.header}
-            </Badge>
-          ) : null}
+          {question.header ? <TopicBadge>{question.header}</TopicBadge> : null}
           {total > 1 ? (
             <Text className="font-instrument-sans-medium" style={[sizeStyle(chatTextSize("caption", largerText)), textStyle("muted", scheme), typeStyle("medium")]}>
               {`${step + 1}/${total}`}
@@ -135,6 +149,7 @@ export function ChoiceQuestion({
             key={`${option.label}-${index}`}
             selected={!otherOn[step] && selected.includes(option.label)}
             disabled={loading}
+            multiple={question.multiSelect}
             mark={LETTERS[index] ?? String(index + 1)}
             label={option.label}
             description={option.description}
@@ -144,6 +159,7 @@ export function ChoiceQuestion({
         <ChoiceRow
           selected={otherOn[step] ?? false}
           disabled={loading}
+          multiple={question.multiSelect}
           mark="other"
           label={otherLabel}
           onPress={() => {
@@ -159,6 +175,10 @@ export function ChoiceQuestion({
                 placeholder={otherPlaceholder}
                 editable={!loading}
                 autoFocus
+                // Return is the Next or Submit button. Until there is an
+                // answer it keeps the keyboard up, as the button does nothing.
+                returnKeyType={isLast ? "send" : "next"}
+                submitBehavior={isLast && hasAnswer ? "blurAndSubmit" : "submit"}
                 onSubmitEditing={next}
               />
             </View>
@@ -174,8 +194,9 @@ export function ChoiceQuestion({
               disabled={loading}
               onPress={() => setStep(step - 1)}
               startContent={<IconArrowLeft size={icon} strokeWidth={2.5} color={tokens.color.foreground[scheme]} />}
+              accessibilityLabel="Back"
             >
-              Back
+              {buttonLabel("Back", "ghost")}
             </Button>
           </View>
         ) : null}
@@ -184,11 +205,12 @@ export function ChoiceQuestion({
             disabled={!hasAnswer}
             loading={loading}
             onPress={next}
+            accessibilityLabel={isLast ? "Submit" : "Next"}
             endContent={
               loading ? null : <IconArrowRight size={icon} strokeWidth={2.5} color={palette.primaryForeground[scheme]} />
             }
           >
-            {isLast ? "Submit" : "Next"}
+            {buttonLabel(isLast ? "Submit" : "Next", "primary")}
           </Button>
         </View>
       </View>
@@ -205,14 +227,55 @@ export function ChoiceQuestion({
   );
 }
 
+/**
+ * The question's topic, the web `Badge variant="secondary"` with Eva's
+ * `text-3xs font-semibold` (10 / 14, 600) in a `px-2.5 py-0.5` pill. Drawn here
+ * because `Badge` sets its own size and weight.
+ */
+function TopicBadge({ children }: { children: string }) {
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  const fontSize = largerText ? 14 : 10;
+  return (
+    <View
+      className="rounded-full px-2.5 py-0.5"
+      style={{ backgroundColor: palette.default[scheme], borderRadius: tokens.radius.pill }}
+    >
+      <Text
+        numberOfLines={1}
+        className="font-instrument-sans-semibold"
+        style={[
+          { fontSize, lineHeight: largerText ? 20 : 14, color: palette.defaultForeground[scheme] },
+          typeStyle("semibold"),
+        ]}
+      >
+        {children}
+      </Text>
+    </View>
+  );
+}
+
+/** The option card's `py-2 px-2.5`, which is also the slop of its press target. */
+const CARD_PADDING = { top: 8, bottom: 8, left: 10, right: 10 };
+
+/** A whole card is at least a 44 target: the press target inside is this much less its slop. */
+const CARD_MIN_HEIGHT = 44;
+
+/** The card while pressed: the kit 3% press scale, or a dim with Reduce Motion. */
+export function choicePressStyle(pressed: boolean, reduceMotion: boolean) {
+  if (!pressed) return null;
+  return reduceMotion ? { opacity: 0.8 } : { transform: [{ scale: 0.97 }] };
+}
+
 /**
  * One option row (web `Card` with `bg-secondary`, `py-2 px-2.5`, radius 16): a round 24 mark
  * (30 with larger text; letter, or a pencil for "Other"; a check on the primary fill when picked),
- * the label and the description. Picked: a 2-wide primary ring on the accent.
+ * the label and the description. Picked: a 1-wide primary ring outside, on the accent.
  */
 function ChoiceRow({
   selected,
   disabled,
+  multiple,
   mark,
   label,
   description,
@@ -221,6 +284,8 @@ function ChoiceRow({
 }: {
   selected: boolean;
   disabled: boolean;
+  /** A multi-select question: each row is a `checkbox`, not a `radio`. */
+  multiple: boolean;
   mark: string;
   label: string;
   description?: string;
@@ -229,31 +294,67 @@ function ChoiceRow({
 }) {
   const scheme = useScheme();
   const largerText = useLargerText();
+  const reduceMotion = useReduceMotion();
+  // The scale moves the whole card, which is not the Pressable (the "Other" field sits in it too).
+  const [pressed, setPressed] = useState(false);
   const muted = tokens.color.muted[scheme];
   const markSize = largerText ? 30 : 24;
+  const markText = largerText ? 14 : 11;
   const glyph = largerText ? 16 : 13;
+  const small = chatTextSize("small", largerText);
+  // Web: an option label is `text-sm leading-snug font-medium`; "Other..." is
+  // plain `text-sm`, medium only once picked.
+  const plain = mark === "other" && !selected;
+  // The web label is an inline `leading-snug` span in a 16 / 24 block, so each
+  // line box is the block's 24, not 19.25: rows are 24 a line, as on the web.
+  const labelLine = largerText ? sizeStyle(small, "snug") : { ...sizeStyle(small, "snug"), lineHeight: 24 };
   return (
     <View
-      style={{
-        // Web `Card` (rounded-surface, 16) with `py-2 px-2.5` inside a 1 border + 1 ring.
-        borderRadius: tokens.radius.lg,
-        borderWidth: 2,
-        borderColor: selected ? palette.primary[scheme] : "transparent",
-        backgroundColor: selected ? tokens.color.background[scheme] : palette.default[scheme],
-        opacity: disabled ? 0.5 : 1,
-        paddingVertical: 8,
-        paddingHorizontal: 10,
-      }}
+      style={[
+        {
+          // Web `Card` (rounded-surface, 16) with `py-2 px-2.5` and no border width.
+          borderRadius: tokens.radius.lg,
+          backgroundColor: selected ? tokens.color.background[scheme] : palette.default[scheme],
+          opacity: disabled ? 0.5 : 1,
+          paddingVertical: CARD_PADDING.top,
+          paddingHorizontal: CARD_PADDING.left,
+        },
+        choicePressStyle(pressed && !disabled, reduceMotion),
+      ]}
     >
+      {selected ? (
+        // Web `ring-1 ring-primary`: a 1 line just outside the card, so picking a row moves nothing.
+        <View
+          pointerEvents="none"
+          style={{
+            position: "absolute",
+            top: -1,
+            left: -1,
+            right: -1,
+            bottom: -1,
+            borderRadius: tokens.radius.lg + 1,
+            borderWidth: 1,
+            borderColor: palette.primary[scheme],
+          }}
+        />
+      ) : null}
       <Pressable
-        accessibilityRole="button"
+        accessibilityRole={multiple ? "checkbox" : "radio"}
         accessibilityLabel={label}
-        accessibilityState={{ selected, disabled }}
+        accessibilityHint={description || undefined}
+        accessibilityState={{ checked: selected, disabled }}
         disabled={disabled}
+        // The card's own padding: a tap anywhere on the card picks it, and stops at its edge.
+        hitSlop={CARD_PADDING}
         onPress={onPress}
-        hitSlop={4}
+        onPressIn={() => setPressed(true)}
+        onPressOut={() => setPressed(false)}
         className="flex-row"
-        style={{ gap: 12, alignItems: description ? "flex-start" : "center" }}
+        style={{
+          gap: 12,
+          alignItems: description ? "flex-start" : "center",
+          minHeight: CARD_MIN_HEIGHT - CARD_PADDING.top - CARD_PADDING.bottom,
+        }}
       >
         <View
           style={{
@@ -272,20 +373,38 @@ function ChoiceRow({
           ) : mark === "other" ? (
             <IconPencil size={glyph} color={muted} />
           ) : (
-            <Text className="font-instrument-sans-semibold" style={[typeStyle("semibold"), { fontSize: largerText ? 14 : 11, color: muted, letterSpacing: 0.4 }]}>
+            // Web `text-2xs font-bold tracking-wide`, at semibold: native-ui draws no bold face.
+            <Text
+              className="font-instrument-sans-semibold"
+              style={[
+                { fontSize: markText, lineHeight: largerText ? 20 : 16, color: muted },
+                trackingStyle(markText, "wide"),
+                typeStyle("semibold"),
+              ]}
+            >
               {mark}
             </Text>
           )}
         </View>
         <View className="min-w-0 flex-1">
-          <Text
-            className="font-instrument-sans-medium"
-            style={[sizeStyle(chatTextSize("small", largerText), "snug"), typeStyle("medium"), { color: selected ? palette.primary[scheme] : muted }]}
-          >
-            {label}
-          </Text>
+          {plain ? (
+            <Text className="font-instrument-sans" style={[sizeStyle(small), { color: muted }]}>
+              {label}
+            </Text>
+          ) : (
+            <Text
+              className="font-instrument-sans-medium"
+              style={[labelLine, typeStyle("medium"), { color: selected ? palette.primary[scheme] : muted }]}
+            >
+              {label}
+            </Text>
+          )}
           {description ? (
-            <Text className="font-instrument-sans" style={[sizeStyle(chatTextSize("caption", largerText)), { color: muted, marginTop: 2 }]}>
+            // Web `text-xs mt-0.5 leading-relaxed` (12 / 19.5).
+            <Text
+              className="font-instrument-sans"
+              style={[sizeStyle(chatTextSize("caption", largerText), "relaxed"), { color: muted, marginTop: 2 }]}
+            >
               {description}
             </Text>
           ) : null}

package/src/ai/code-block.tsx

@@ -1,14 +1,34 @@
 import { Fragment, useEffect, useRef, useState } from "react";
 import { ScrollView, Text, View } from "react-native";
-import { IconCheck, IconCopy } from "@tabler/icons-react-native";
+import { IconCheck, IconCopy, IconTextWrap } from "@tabler/icons-react-native";
 import { cn } from "../cn";
 import { sizeStyle, textStyle } from "../controlStyles";
-import { GITHUB_CODE_COLORS, codeTokenColor, loadPrismReactRenderer } from "../highlight";
+import {
+  GITHUB_CODE_COLORS,
+  SCRIPT_LANGUAGES,
+  SHELL_LANGUAGES,
+  codeTokenColor,
+  loadPrismReactRenderer,
+  scriptTokens,
+  shellTokens,
+  type CodeToken,
+} from "../highlight";
 import { useLargerText } from "../theme";
 import { tokens } from "../tokens";
 import { useScheme } from "../useScheme";
 import { MONO_FONT, chatTextSize } from "./chat-text";
-import { ChatIconButton } from "./icon-button";
+import { ChatIconButton, type ChatIconButtonProps, type ChatIconButtonSize } from "./icon-button";
+
+/**
+ * `variant="markdown"`, the web `.markdown-code` (`MarkdownCodeBlock`): the header is `0.25rem 0.3rem 0 0.9rem` around a 28
+ * line (32 high), the code `0.25rem 0.9rem 0.8rem` at 13 with line-height
+ * 1.55, and the header actions are `icon-xs` (28) buttons.
+ */
+export const CODE_BLOCK_METRICS = {
+  header: { minHeight: 32, paddingTop: 4, paddingLeft: 14, paddingRight: 5 },
+  code: { paddingTop: 4, paddingHorizontal: 14, paddingBottom: 13 },
+  text: { fontSize: 13, lineHeight: 13 * 1.55 },
+} as const;
 
 export type CodeBlockCopyButtonProps = {
   code: string;
@@ -23,10 +43,14 @@ export type CodeBlockCopyButtonProps = {
   timeout?: number;
   /** Default "Copy code"; "Copied" while the check shows. */
   label?: string;
+  /** Default `sm` (the web `CodeBlock` copy button); the markdown code block uses `xs`. */
+  size?: ChatIconButtonSize;
+  /** Default `"square"`. See `ChatIconButton`. */
+  slop?: ChatIconButtonProps["slop"];
 };
 
 /** Ghost copy button: the copy icon, then a check for `timeout` after a copy. */
-export function CodeBlockCopyButton({ code, onCopy, timeout = 2000, label = "Copy code" }: CodeBlockCopyButtonProps) {
+export function CodeBlockCopyButton({ code, onCopy, timeout = 2000, label = "Copy code", size, slop }: CodeBlockCopyButtonProps) {
   const [copied, setCopied] = useState(false);
   const timer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
 
@@ -48,6 +72,8 @@ export function CodeBlockCopyButton({ code, onCopy, timeout = 2000, label = "Cop
     <ChatIconButton
       icon={copied ? IconCheck : IconCopy}
       label={copied ? "Copied" : label}
+      size={size}
+      slop={slop}
       onPress={() => void copy()}
     />
   );
@@ -68,80 +94,194 @@ export type CodeBlockProps = {
   highlight?: boolean;
   /** With it, the header has a copy button. See `CodeBlockCopyButton`. */
   onCopy?: (code: string) => void | Promise<void>;
+  /** Default `default`, the web `CodeBlock`. `markdown` is the web `MarkdownCodeBlock` (see `CodeBlock`). */
+  variant?: "default" | "markdown";
   className?: string;
 };
 
 /**
- * Code on the flat panel (web `flatPanelSubtle`: `bg-surface-secondary`, no
- * border or shadow) at radius 16. A header with the language and a copy
- * button when either is given. Long lines scroll sideways; the code is
- * selectable. With `prism-react-renderer` installed and a `language`, tokens
+ * Code on the flat panel at radius 16, selectable, long lines scrolling
+ * sideways. With `prism-react-renderer` installed and a `language`, tokens
  * take the GitHub colours of the scheme.
+ *
+ * `default` is the web `CodeBlock` (`ai-elements/code-block.tsx`): `text-sm`
+ * code in `p-4`, and a `px-3` header with the language and a copy button when
+ * either is given. `markdown` is the web `MarkdownCodeBlock`, which `Markdown`
+ * draws for fenced code: 13 / 20.15 code, a 32 header with `icon-xs` actions,
+ * a wrap toggle ("Wrap long lines", foreground while on) and then copy.
  */
-export function CodeBlock({ code, language, highlight = true, onCopy, className }: CodeBlockProps) {
-  const scheme = useScheme();
-  const largerText = useLargerText();
-  const size = chatTextSize("small", largerText);
-  const caption = chatTextSize("caption", largerText);
+/**
+ * Android fades the code at a side with more to scroll (there is no scroll
+ * bar), so a cut line reads as "scroll sideways". iOS ignores it.
+ */
+const CODE_FADING_EDGE = 24;
+
+export function CodeBlock({ code, language, highlight = true, onCopy, variant = "default", className }: CodeBlockProps) {
+  const parts = useCodeParts(code, language, highlight, variant === "markdown");
+  if (variant === "markdown") {
+    return <MarkdownCodeBlock code={code} language={language} onCopy={onCopy} className={className} parts={parts} />;
+  }
   const header = Boolean(language || onCopy);
   return (
-    <View
-      className={cn("w-full overflow-hidden", className)}
-      style={{ borderRadius: tokens.radius.lg, backgroundColor: tokens.color.surfaceSecondary[scheme] }}
-    >
+    <View className={cn("w-full overflow-hidden", className)} style={parts.panel}>
       {header ? (
         <View className="min-h-11 flex-row items-center justify-between pl-3 pr-1.5">
-          <Text className={caption} style={[sizeStyle(caption), textStyle("muted", scheme), { fontFamily: MONO_FONT }]}>
-            {language ?? ""}
-          </Text>
+          {parts.label}
           {onCopy ? <CodeBlockCopyButton code={code} onCopy={onCopy} /> : null}
         </View>
       ) : null}
       <ScrollView
         horizontal
         showsHorizontalScrollIndicator={false}
+        fadingEdgeLength={CODE_FADING_EDGE}
         contentContainerClassName={header ? "px-4 pb-4" : "p-4"}
       >
-        <Text
-          selectable
-          className={size}
-          style={[sizeStyle(size), textStyle("foreground", scheme), { fontFamily: MONO_FONT }]}
-        >
-          {highlight && language ? <HighlightedCode code={code} language={language} scheme={scheme} /> : code}
-        </Text>
+        {parts.text}
       </ScrollView>
     </View>
   );
 }
 
+/** The web `MarkdownCodeBlock`: `CodeBlock` with `variant="markdown"`. A component of its own for the wrap state. */
+function MarkdownCodeBlock({
+  code,
+  language,
+  onCopy,
+  className,
+  parts,
+}: Pick<CodeBlockProps, "code" | "language" | "onCopy" | "className"> & { parts: ReturnType<typeof useCodeParts> }) {
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  const [wrap, setWrap] = useState(false);
+  const header = Boolean(language || onCopy);
+  const { header: headerBox, code: codeBox } = CODE_BLOCK_METRICS;
+  const padding = header ? codeBox : { ...codeBox, paddingTop: codeBox.paddingBottom };
+  return (
+    <View className={cn("w-full overflow-hidden", className)} style={parts.panel}>
+      {header ? (
+        <View
+          className={cn("flex-row items-center justify-between gap-2", largerText && "min-h-11")}
+          style={largerText ? { paddingLeft: headerBox.paddingLeft, paddingRight: headerBox.paddingRight } : headerBox}
+        >
+          {parts.label}
+          {/* Web `.markdown-code-actions`: `gap-0.5`. The two sit 2 apart, so
+              each slops only above and below and on its outer side. */}
+          <View className="flex-row items-center gap-0.5">
+            <ChatIconButton
+              icon={IconTextWrap}
+              label={wrap ? "Scroll long lines" : "Wrap long lines"}
+              size="xs"
+              iconColor={wrap ? tokens.color.foreground[scheme] : tokens.color.muted[scheme]}
+              accessibilityState={{ selected: wrap }}
+              slop={{ left: 8, right: 0 }}
+              onPress={() => setWrap(!wrap)}
+            />
+            {onCopy ? <CodeBlockCopyButton code={code} onCopy={onCopy} size="xs" slop={{ left: 0, right: 5 }} /> : null}
+          </View>
+        </View>
+      ) : null}
+      {wrap ? (
+        <View style={padding}>{parts.text}</View>
+      ) : (
+        <ScrollView
+          horizontal
+          showsHorizontalScrollIndicator={false}
+          fadingEdgeLength={CODE_FADING_EDGE}
+          contentContainerStyle={padding}
+        >
+          {parts.text}
+        </ScrollView>
+      )}
+    </View>
+  );
+}
+
+/** The panel style, the language label and the code text both code blocks draw. */
+function useCodeParts(code: string, language: string | undefined, highlight: boolean, markdown: boolean) {
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  const size = chatTextSize("small", largerText);
+  const caption = chatTextSize("caption", largerText);
+  const text = (
+    <Text
+      selectable
+      className={size}
+      style={[
+        markdown && !largerText ? CODE_BLOCK_METRICS.text : sizeStyle(size),
+        textStyle("foreground", scheme),
+        { fontFamily: MONO_FONT },
+      ]}
+    >
+      {highlight && language ? <HighlightedCode code={code} language={language} scheme={scheme} /> : code}
+    </Text>
+  );
+  return {
+    text,
+    label: (
+      <Text className={caption} style={[sizeStyle(caption), textStyle("muted", scheme), { fontFamily: MONO_FONT }]}>
+        {language ?? ""}
+      </Text>
+    ),
+    panel: { borderRadius: tokens.radius.lg, backgroundColor: tokens.color.surfaceSecondary[scheme] },
+  };
+}
+
 /**
- * Prism tokens as nested `Text` spans, one colour each, lines joined by
- * newlines. They inherit the size and font of the code `Text` around them.
- * Without `prism-react-renderer` it is the plain code.
+ * Coloured runs as nested `Text` spans, lines joined by newlines. They
+ * inherit the size and font of the code `Text` around them.
+ */
+function CodeRuns({ lines, scheme }: { lines: CodeToken[][]; scheme: "light" | "dark" }) {
+  return (
+    <>
+      {lines.map((line, lineIndex) => (
+        <Fragment key={lineIndex}>
+          {lineIndex > 0 ? "\n" : null}
+          {line.map((token, tokenIndex) => (
+            <Text key={tokenIndex} style={{ color: GITHUB_CODE_COLORS[scheme][token.role] }}>
+              {token.content}
+            </Text>
+          ))}
+        </Fragment>
+      ))}
+    </>
+  );
+}
+
+/**
+ * The code in the web's Shiki colours: shell blocks through `shellTokens`
+ * (no peer needed), other languages through Prism, the JavaScript family
+ * recoloured where Prism and Shiki disagree (`scriptTokens`). Without
+ * `prism-react-renderer` a non-shell block is the plain code.
  */
 function HighlightedCode({ code, language, scheme }: { code: string; language: string; scheme: "light" | "dark" }) {
+  const lang = language.toLowerCase();
+  const source = code.replace(/\n$/, "");
+  if (SHELL_LANGUAGES.has(lang)) return <CodeRuns lines={shellTokens(source)} scheme={scheme} />;
   const Highlight = loadPrismReactRenderer()?.Highlight;
   if (!Highlight) return code;
   return (
-    <Highlight
-      code={code.replace(/\n$/, "")}
-      language={language.toLowerCase()}
-      theme={{ plain: { color: GITHUB_CODE_COLORS[scheme].plain }, styles: [] }}
-    >
-      {({ tokens }) => (
-        <>
-          {tokens.map((line, lineIndex) => (
-            <Fragment key={lineIndex}>
-              {lineIndex > 0 ? "\n" : null}
-              {line.map((token, tokenIndex) => (
-                <Text key={tokenIndex} style={{ color: codeTokenColor(token.types, scheme) }}>
-                  {token.content}
-                </Text>
-              ))}
-            </Fragment>
-          ))}
-        </>
-      )}
+    <Highlight code={source} language={lang} theme={{ plain: { color: GITHUB_CODE_COLORS[scheme].plain }, styles: [] }}>
+      {({ tokens }) =>
+        SCRIPT_LANGUAGES.has(lang) ? (
+          <CodeRuns lines={scriptTokens(tokens)} scheme={scheme} />
+        ) : (
+          <>
+            {tokens.map((line, lineIndex) => (
+              <Fragment key={lineIndex}>
+                {lineIndex > 0 ? "\n" : null}
+                {/* An empty line is one `empty` token whose content is "\n": the join above already breaks it. */}
+                {line.map((token, tokenIndex) =>
+                  token.empty ? null : (
+                    <Text key={tokenIndex} style={{ color: codeTokenColor(token.types, scheme) }}>
+                      {token.content}
+                    </Text>
+                  ),
+                )}
+              </Fragment>
+            ))}
+          </>
+        )
+      }
     </Highlight>
   );
 }