@btndprojects/loam-ui-native 0.2.1 → 0.3.1

package/dist/{chunk-TQVAIKFD.js → chunk-NZG75DGA.js}

@@ -1,5 +1,5 @@
 import { haptics } from './chunk-NY2U3PBI.js';
-import { Icon } from './chunk-UXGIW7OK.js';
+import { Icon } from './chunk-PCEFCOLN.js';
 import { useResolvedMotion } from './chunk-J64KGCGX.js';
 import * as React from 'react';
 import { Animated, Easing, PanResponder, View, Pressable, Text, Platform, I18nManager } from 'react-native';
@@ -11,10 +11,15 @@ function SegmentedControl({
   value,
   defaultValue,
   onValueChange,
-  size = "md",
+  size: sizeProp,
   motion = "full",
   disabled = false,
   semantics = "radio",
+  fullWidth = false,
+  variant = "filled",
+  shape = "pill",
+  orientation = "horizontal",
+  density = "comfortable",
   accessibilityLabel
 }) {
   const animateSlide = useResolvedMotion(motion, "segmented-control") === "full";
@@ -28,8 +33,16 @@ function SegmentedControl({
     items.findIndex((item) => item.value === current)
   );
   const theme = useLoamTheme("segmented-control");
+  const ios = theme.platform === "iOS";
+  const size = sizeProp ?? (ios ? "sm" : "md");
   const { styles } = useStyles(sheet, { size, disabled });
+  const labelStyle = theme.ctl.label[ios ? "sm" : size];
   const iconSize = theme.ctl.icon[size];
+  const vertical = orientation === "vertical";
+  const compact = density === "compact";
+  const STEP_DOWN = { xs: "xs", sm: "xs", md: "sm", lg: "md" };
+  const segH = compact ? theme.ctl[STEP_DOWN[size]] : void 0;
+  const solid = variant === "solid";
   const slopY = Math.max(0, (theme.hit[size] - theme.ctl[size]) / 2);
   const [layouts, setLayouts] = React.useState({});
   const onSegmentLayout = (index) => (e) => {
@@ -91,14 +104,14 @@ function SegmentedControl({
     select(items[next].value);
     segmentRefs.current[next]?.focus?.();
   };
-  const latest = React.useRef({ layouts, select, items, disabled, current });
-  latest.current = { layouts, select, items, disabled, current };
+  const latest = React.useRef({ layouts, select, items, disabled, current, vertical });
+  latest.current = { layouts, select, items, disabled, current, vertical };
   const scrub = React.useMemo(
     () => (
       // A plain horizontal scrub inside one control; no nested gesture to arbitrate.
       // eslint-disable-next-line loam/no-pan-responder
       PanResponder.create({
-        onMoveShouldSetPanResponder: (_, g) => !latest.current.disabled && Math.abs(g.dx) > 8 && Math.abs(g.dx) > Math.abs(g.dy) * 1.5,
+        onMoveShouldSetPanResponder: (_, g) => !latest.current.disabled && !latest.current.vertical && Math.abs(g.dx) > 8 && Math.abs(g.dx) > Math.abs(g.dy) * 1.5,
         onPanResponderGrant: () => {
           rowRef.current?.measureInWindow((x) => {
             rowX.current = x;
@@ -118,59 +131,86 @@ function SegmentedControl({
     ),
     []
   );
-  return /* @__PURE__ */ jsx(View, { style: styles.container, children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(
     View,
     {
-      ref: rowRef,
-      style: styles.row,
-      accessibilityRole: semantics === "tabs" ? "tablist" : "radiogroup",
-      accessibilityLabel,
-      ...Platform.OS === "web" ? { onKeyDown } : null,
-      ...scrub.panHandlers,
-      children: [
-        /* @__PURE__ */ jsx(
-          Animated.View,
-          {
-            testID: "segmented-indicator",
-            pointerEvents: "none",
-            style: [
-              styles.indicator,
-              { left: thumbX, width: thumbWidth },
-              active ? { top: active.y, height: active.height } : null
-            ]
-          }
-        ),
-        items.map((item, index) => {
-          const selected = item.value === current;
-          const fg = selected ? theme.color.text : theme.color.text3;
-          return /* @__PURE__ */ jsxs(
-            Pressable,
-            {
-              ref: (node) => {
-                segmentRefs.current[index] = node;
-              },
-              accessibilityRole: semantics === "tabs" ? "tab" : "radio",
-              accessibilityState: semantics === "tabs" ? { selected, disabled } : { checked: selected, disabled },
-              ...Platform.OS === "web" ? {
-                [semantics === "tabs" ? "aria-selected" : "aria-checked"]: selected,
-                tabIndex: selected && !disabled ? 0 : -1
-              } : null,
-              disabled,
-              onPress: disabled ? void 0 : () => select(item.value),
-              onLayout: onSegmentLayout(index),
-              hitSlop: { top: slopY, bottom: slopY },
-              style: styles.segment,
-              children: [
-                item.icon ? /* @__PURE__ */ jsx(Icon, { name: item.icon, size: iconSize, color: fg }) : null,
-                /* @__PURE__ */ jsx(Text, { style: [styles.label, { color: fg }], children: item.label })
-              ]
-            },
-            item.value
-          );
-        })
-      ]
+      style: [
+        styles.container,
+        fullWidth ? { alignSelf: "stretch" } : null,
+        shape === "rounded" && { borderRadius: theme.radius.md },
+        vertical && { borderRadius: theme.radius.lg },
+        variant === "ghost" && { backgroundColor: "transparent" },
+        variant === "outline" && {
+          backgroundColor: "transparent",
+          borderWidth: theme.borderWidth.base,
+          borderColor: theme.color.border
+        }
+      ],
+      children: /* @__PURE__ */ jsxs(
+        View,
+        {
+          ref: rowRef,
+          style: [styles.row, vertical && { flexDirection: "column" }],
+          accessibilityRole: semantics === "tabs" ? "tablist" : "radiogroup",
+          accessibilityLabel,
+          ...Platform.OS === "web" ? { onKeyDown } : null,
+          ...scrub.panHandlers,
+          children: [
+            /* @__PURE__ */ jsx(
+              Animated.View,
+              {
+                testID: "segmented-indicator",
+                pointerEvents: "none",
+                style: [
+                  styles.indicator,
+                  { left: thumbX, width: thumbWidth },
+                  active ? { top: active.y, height: active.height } : null,
+                  shape === "rounded" && { borderRadius: theme.radius.sm },
+                  vertical && { borderRadius: theme.radius.lg },
+                  solid && { backgroundColor: theme.color.accent },
+                  variant === "outline" && { shadowOpacity: 0, elevation: 0, borderColor: theme.focus.ringColor }
+                ]
+              }
+            ),
+            items.map((item, index) => {
+              const selected = item.value === current;
+              const fg = selected ? solid ? theme.color.accentInk : theme.color.text : theme.color.text3;
+              return /* @__PURE__ */ jsxs(
+                Pressable,
+                {
+                  ref: (node) => {
+                    segmentRefs.current[index] = node;
+                  },
+                  accessibilityRole: semantics === "tabs" ? "tab" : "radio",
+                  accessibilityState: semantics === "tabs" ? { selected, disabled } : { checked: selected, disabled },
+                  ...Platform.OS === "web" ? {
+                    [semantics === "tabs" ? "aria-selected" : "aria-checked"]: selected,
+                    tabIndex: selected && !disabled ? 0 : -1
+                  } : null,
+                  disabled,
+                  onPress: disabled ? void 0 : () => select(item.value),
+                  onLayout: onSegmentLayout(index),
+                  hitSlop: { top: slopY, bottom: slopY },
+                  style: [
+                    styles.segment,
+                    fullWidth && !vertical ? { flex: 1 } : null,
+                    segH !== void 0 && { height: segH, paddingHorizontal: theme.space.s2 },
+                    shape === "rounded" && { borderRadius: theme.radius.sm },
+                    vertical && { borderRadius: theme.radius.lg, justifyContent: "flex-start" }
+                  ],
+                  children: [
+                    item.icon ? /* @__PURE__ */ jsx(Icon, { name: item.icon, size: iconSize, color: fg }) : null,
+                    /* @__PURE__ */ jsx(Text, { style: [styles.label, labelStyle, { color: fg }], children: item.label })
+                  ]
+                },
+                item.value
+              );
+            })
+          ]
+        }
+      )
     }
-  ) });
+  );
 }
 var sheet = createStyleSheet((theme) => ({
   container: {
@@ -180,7 +220,7 @@ var sheet = createStyleSheet((theme) => ({
     borderRadius: theme.radius.full,
     padding: theme.space.s1,
     variants: {
-      size: { xs: {}, sm: {}, md: {} },
+      size: { xs: {}, sm: {}, md: {}, lg: {} },
       disabled: { true: { opacity: theme.state.disabledOpacity }, false: {} }
     }
   },
@@ -199,7 +239,7 @@ var sheet = createStyleSheet((theme) => ({
     borderColor: theme.edge.accent,
     ...theme.shadow.sm,
     variants: {
-      size: { xs: {}, sm: {}, md: {} },
+      size: { xs: {}, sm: {}, md: {}, lg: {} },
       disabled: { true: {}, false: {} }
     }
   },
@@ -219,21 +259,21 @@ var sheet = createStyleSheet((theme) => ({
     borderRadius: theme.radius.full,
     variants: {
       // Segment height + horizontal padding resolve from the control-size ramp
-      // (26 / 30 / 36); the measured box drives the sliding indicator.
+      // (26 / 30 / 36 / 44); the measured box drives the sliding indicator.
       size: {
         xs: { height: theme.ctl.xs, paddingHorizontal: theme.ctl.px.xs },
         sm: { height: theme.ctl.sm, paddingHorizontal: theme.ctl.px.sm },
-        md: { height: theme.ctl.md, paddingHorizontal: theme.ctl.px.md }
+        md: { height: theme.ctl.md, paddingHorizontal: theme.ctl.px.md },
+        lg: { height: theme.ctl.lg, paddingHorizontal: theme.ctl.px.lg }
       },
       disabled: { true: {}, false: {} }
     }
   },
+  // Size and weight come from the OS label role at the use site.
   label: {
     fontFamily: theme.font.sans,
-    fontWeight: theme.fontWeight.semibold,
-    fontSize: theme.fontSize[14],
     variants: {
-      size: { xs: {}, sm: {}, md: {} },
+      size: { xs: {}, sm: {}, md: {}, lg: {} },
       disabled: { true: {}, false: {} }
     }
   }

package/dist/chunk-O76QXRBV.js

@@ -0,0 +1,431 @@
+import { CopyButton } from './chunk-TYOSA7JG.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-PCEFCOLN.js';
+import * as React from 'react';
+import { View, Text, TextInput, Pressable, ScrollView } from 'react-native';
+import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/code-block/tokenize.ts
+var RE = /(\/\*[\s\S]*?\*\/|\/\/[^\n]*|(?:^|\n)[ \t]*#[^\n!][^\n]*)|("(?:[^"\\\n]|\\.)*"|'(?:[^'\\\n]|\\.)*'|`(?:[^`\\]|\\.)*`)|(<\/?[A-Za-z][\w.-]*|\/?>)|(--[a-z][a-z0-9-]*|@[A-Za-z_]\w*)|(#[0-9a-fA-F]{3,8}\b|\b0[xXbBoO][0-9a-fA-F]+\b|\b\d+(?:\.\d+)?(?:px|em|rem|ch|ms|s|%)?\b)|\b(?:import|from|export|default|const|let|var|function|func|fn|def|return|new|await|async|yield|if|elif|else|for|while|do|switch|case|match|when|break|continue|class|struct|interface|enum|trait|impl|extends|implements|typeof|instanceof|in|of|is|as|and|or|not|true|false|null|nil|none|undefined|void|public|private|protected|internal|static|final|abstract|readonly|type|namespace|module|package|use|using|require|include|pub|mut|self|super|throw|throws|try|catch|finally|with|lambda|print|echo|npm|pnpm|yarn|install)\b/g;
+function tokenizeLine(line) {
+  const out = [];
+  let last = 0;
+  for (const m of line.matchAll(RE)) {
+    const at = m.index ?? 0;
+    if (at > last) out.push({ text: line.slice(last, at), role: null });
+    const role = m[1] ? "com" : m[2] ? "str" : m[3] ? "tag" : m[4] ? "tok" : m[5] ? "num" : "kw";
+    out.push({ text: m[0], role });
+    last = at + m[0].length;
+  }
+  if (last < line.length) out.push({ text: line.slice(last), role: null });
+  return out;
+}
+var DEFAULT_LABELS = {
+  copyCode: "Copy code",
+  showMore: (hidden) => `Show ${hidden} more line${hidden === 1 ? "" : "s"}`,
+  showFewer: "Show fewer lines",
+  find: "Find in code",
+  findPlaceholder: "Find",
+  noMatches: "No matches",
+  matchCount: (current, total) => `${current} of ${total}`,
+  previousMatch: "Previous match",
+  nextMatch: "Next match",
+  closeFind: "Close find"
+};
+var MIN_HIDDEN = 4;
+function CodeBlock({
+  code,
+  labels: labelsProp,
+  language,
+  showLineNumbers = true,
+  wrap = false,
+  copyable = true,
+  onCopy,
+  caption,
+  filename,
+  maxHeight,
+  highlightLines,
+  // `motion` is accepted for API parity only — a code block never animates.
+  motion: _motion,
+  size = "md",
+  variant = "default",
+  tone = "default",
+  syntax = false,
+  headerDot = false,
+  highlightBar = false,
+  collapseAfter,
+  defaultExpanded = false,
+  surface = "theme",
+  findable = false,
+  findQuery,
+  defaultFindQuery = "",
+  onFindQueryChange,
+  onCloseFind
+}) {
+  const labels = useLabels("codeBlock", DEFAULT_LABELS, labelsProp);
+  const { styles } = useStyles(sheet);
+  const theme = useLoamTheme("code-block");
+  const typeStep = size === "sm" ? theme.type.caption1 : size === "lg" ? theme.type.subheadline : null;
+  const sizeStyle = typeStep ? { fontSize: typeStep.fontSize, lineHeight: typeStep.lineHeight } : void 0;
+  const lines = code.split("\n");
+  const label = filename ?? caption;
+  const hasHeader = Boolean(label || language);
+  const highlighted = React.useMemo(() => new Set(highlightLines ?? []), [highlightLines]);
+  const dark = surface === "dark";
+  const panel = dark ? theme.codePanelDark : theme.codePanel;
+  const ink = dark || syntax ? { bg: panel.bg, fg: panel.fg, muted: panel.muted } : { bg: theme.code.bg, fg: theme.code.fg, muted: `${theme.code.fg}b3` };
+  const wash = dark ? theme.white : theme.overlay;
+  const roleInk = {
+    com: panel.com,
+    str: panel.str,
+    tag: panel.fn,
+    tok: panel.good,
+    num: panel.num,
+    kw: panel.kw
+  };
+  const dotColor = tone !== "default" ? theme.edge[tone] : theme.color.accent;
+  const [expanded, setExpanded] = React.useState(defaultExpanded);
+  const hidden = collapseAfter === void 0 ? 0 : lines.length - collapseAfter;
+  const collapsible = hidden >= MIN_HIDDEN;
+  const shown = collapsible && !expanded ? lines.slice(0, collapseAfter) : lines;
+  const [ownQuery, setOwnQuery] = React.useState(defaultFindQuery);
+  const query = findable ? findQuery ?? ownQuery : "";
+  const [current, setCurrent] = React.useState(0);
+  const needle = query.toLowerCase();
+  const matches = React.useMemo(() => {
+    const perLine = [];
+    let total = 0;
+    const starts = [];
+    for (const line of shown) {
+      const hits = [];
+      if (needle) {
+        const lower = line.toLowerCase();
+        for (let at = lower.indexOf(needle); at !== -1; at = lower.indexOf(needle, at + needle.length)) {
+          hits.push(at);
+        }
+      }
+      starts.push(total);
+      total += hits.length;
+      perLine.push(hits);
+    }
+    return { perLine, starts, total };
+  }, [shown, needle]);
+  const active = matches.total ? Math.min(current, matches.total - 1) : 0;
+  const step = (by) => {
+    if (matches.total) setCurrent((active + by + matches.total) % matches.total);
+  };
+  const setQuery = (next) => {
+    setOwnQuery(next);
+    setCurrent(0);
+    onFindQueryChange?.(next);
+  };
+  const renderLine = (line, i) => {
+    const base = syntax ? tokenizeLine(line) : [{ text: line, role: null }];
+    const hits = matches.perLine[i] ?? [];
+    if (!hits.length && base.length <= 1 && !base[0]?.role) return line.length ? line : " ";
+    const out = [];
+    let offset = 0;
+    base.forEach((seg, k) => {
+      let pos = 0;
+      while (pos < seg.text.length) {
+        const abs = offset + pos;
+        const hitIdx = hits.findIndex((h) => abs >= h && abs < h + needle.length);
+        let end = seg.text.length;
+        for (const h of hits) {
+          if (h > abs) end = Math.min(end, h - offset);
+        }
+        if (hitIdx !== -1) end = Math.min(end, hits[hitIdx] + needle.length - offset);
+        const style = {};
+        if (seg.role) style.color = roleInk[seg.role];
+        if (hitIdx !== -1) {
+          style.backgroundColor = matches.starts[i] + hitIdx === active ? wash.a8 : wash.a5;
+        }
+        out.push(
+          /* @__PURE__ */ jsx(Text, { style, children: seg.text.slice(pos, end) }, `${k}-${pos}`)
+        );
+        pos = end;
+      }
+      offset += seg.text.length;
+    });
+    return out.length ? out : " ";
+  };
+  const rows = shown.map((line, i) => {
+    const n = i + 1;
+    const isHot = highlighted.has(n);
+    const contentStyle = wrap ? styles.codeWrap : styles.codeNoWrap;
+    return /* @__PURE__ */ jsxs(
+      View,
+      {
+        style: [
+          styles.line,
+          !showLineNumbers && styles.lineInset,
+          // Highlighted line: the panel wash, plus an accent start bar when asked.
+          isHot && { backgroundColor: wash.a2 }
+        ],
+        children: [
+          isHot && highlightBar ? /* @__PURE__ */ jsx(
+            View,
+            {
+              testID: "code-block-bar",
+              style: [styles.bar, { backgroundColor: theme.color.accent }]
+            }
+          ) : null,
+          showLineNumbers ? /* @__PURE__ */ jsx(
+            Text,
+            {
+              testID: "code-block-gutter",
+              style: [styles.gutter, sizeStyle, { color: isHot ? ink.fg : ink.muted }],
+              importantForAccessibility: "no",
+              accessibilityElementsHidden: true,
+              children: n
+            }
+          ) : null,
+          /* @__PURE__ */ jsx(Text, { style: [styles.code, sizeStyle, contentStyle, { color: ink.fg }], selectable: true, children: renderLine(line, i) })
+        ]
+      },
+      i
+    );
+  });
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      style: [
+        styles.root,
+        variant === "plain" && styles.rootPlain,
+        { backgroundColor: variant === "plain" ? "transparent" : ink.bg },
+        tone !== "default" && { borderColor: theme.edge[tone] },
+        dark && tone === "default" && { borderColor: wash.a5 }
+      ],
+      children: [
+        hasHeader ? /* @__PURE__ */ jsxs(View, { style: styles.header, children: [
+          /* @__PURE__ */ jsxs(View, { style: styles.headerLabels, children: [
+            headerDot ? /* @__PURE__ */ jsx(
+              View,
+              {
+                testID: "code-block-dot",
+                importantForAccessibility: "no",
+                style: [styles.dot, { backgroundColor: dotColor }]
+              }
+            ) : null,
+            label ? /* @__PURE__ */ jsx(Text, { style: [styles.filename, { color: ink.fg }], numberOfLines: 1, children: label }) : null,
+            language ? /* @__PURE__ */ jsx(Text, { style: [styles.language, { color: ink.fg }], children: language.toUpperCase() }) : null
+          ] }),
+          copyable ? /* @__PURE__ */ jsx(CopyButton, { value: code, onCopy, accessibilityLabel: labels.copyCode }) : null
+        ] }) : copyable ? /* @__PURE__ */ jsx(View, { style: styles.corner, children: /* @__PURE__ */ jsx(CopyButton, { value: code, onCopy, accessibilityLabel: labels.copyCode }) }) : null,
+        findable ? /* @__PURE__ */ jsxs(
+          View,
+          {
+            testID: "code-block-find",
+            accessibilityRole: "search",
+            accessibilityLabel: labels.find,
+            style: [styles.find, { borderBottomColor: wash.a5 }],
+            children: [
+              /* @__PURE__ */ jsx(
+                TextInput,
+                {
+                  value: query,
+                  onChangeText: setQuery,
+                  placeholder: labels.findPlaceholder,
+                  placeholderTextColor: ink.muted,
+                  accessibilityLabel: labels.find,
+                  autoCapitalize: "none",
+                  autoCorrect: false,
+                  onSubmitEditing: () => step(1),
+                  style: [
+                    styles.findInput,
+                    { color: ink.fg, borderColor: query ? dotColor : wash.a6, backgroundColor: wash.a2 }
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx(Text, { testID: "code-block-find-count", style: [styles.findCount, { color: ink.muted }], children: query ? matches.total ? labels.matchCount(active + 1, matches.total) : labels.noMatches : "" }),
+              /* @__PURE__ */ jsx(
+                Pressable,
+                {
+                  accessibilityRole: "button",
+                  accessibilityLabel: labels.previousMatch,
+                  disabled: !matches.total,
+                  onPress: () => step(-1),
+                  style: styles.findButton,
+                  children: /* @__PURE__ */ jsx(Icon, { name: "chevron-up", size: theme.space[16], color: ink.muted })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Pressable,
+                {
+                  accessibilityRole: "button",
+                  accessibilityLabel: labels.nextMatch,
+                  disabled: !matches.total,
+                  onPress: () => step(1),
+                  style: styles.findButton,
+                  children: /* @__PURE__ */ jsx(Icon, { name: "chevron-down", size: theme.space[16], color: ink.muted })
+                }
+              ),
+              onCloseFind ? /* @__PURE__ */ jsx(
+                Pressable,
+                {
+                  accessibilityRole: "button",
+                  accessibilityLabel: labels.closeFind,
+                  onPress: onCloseFind,
+                  style: styles.findButton,
+                  children: /* @__PURE__ */ jsx(Icon, { name: "x", size: theme.space[16], color: ink.muted })
+                }
+              ) : null
+            ]
+          }
+        ) : null,
+        /* @__PURE__ */ jsx(
+          ScrollView,
+          {
+            focusable: true,
+            style: maxHeight ? { maxHeight } : void 0,
+            contentContainerStyle: styles.body,
+            children: wrap ? /* @__PURE__ */ jsx(View, { style: styles.lines, children: rows }) : /* @__PURE__ */ jsx(ScrollView, { horizontal: true, focusable: true, contentContainerStyle: styles.lines, children: rows })
+          }
+        ),
+        collapsible ? /* @__PURE__ */ jsx(
+          Pressable,
+          {
+            accessibilityRole: "button",
+            accessibilityState: { expanded },
+            onPress: () => setExpanded((v) => !v),
+            style: [styles.expand, { borderTopColor: wash.a5 }],
+            children: /* @__PURE__ */ jsx(Text, { style: [styles.expandText, { color: ink.muted }], children: expanded ? labels.showFewer : labels.showMore(hidden) })
+          }
+        ) : null
+      ]
+    }
+  );
+}
+var sheet = createStyleSheet((theme) => ({
+  root: {
+    position: "relative",
+    borderRadius: theme.radius.lg,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.color.border,
+    backgroundColor: theme.code.bg,
+    overflow: "hidden"
+  },
+  rootPlain: {
+    borderWidth: 0,
+    borderRadius: 0,
+    backgroundColor: "transparent"
+  },
+  header: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: theme.space.s3,
+    paddingStart: theme.space.s4,
+    paddingEnd: theme.space.s2,
+    paddingVertical: theme.space.s2,
+    borderBottomWidth: theme.borderWidth.base,
+    borderBottomColor: theme.color.border
+  },
+  headerLabels: {
+    flexShrink: 1,
+    flexDirection: "row",
+    alignItems: "baseline",
+    gap: theme.space.s2
+  },
+  filename: {
+    flexShrink: 1,
+    fontFamily: theme.font.mono,
+    fontSize: theme.type.footnote.fontSize,
+    color: theme.code.fg
+  },
+  language: {
+    fontFamily: theme.font.mono,
+    fontSize: theme.type.caption1.fontSize,
+    letterSpacing: 1,
+    color: theme.code.fg,
+    opacity: theme.opacity[80]
+  },
+  dot: {
+    width: theme.space[8],
+    height: theme.space[8],
+    borderRadius: theme.radius.full
+  },
+  find: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space.s2,
+    paddingHorizontal: theme.space.s3,
+    paddingVertical: theme.space.s2,
+    borderBottomWidth: theme.borderWidth.base
+  },
+  findInput: {
+    flex: 1,
+    minHeight: theme.ctl.sm,
+    paddingHorizontal: theme.space.s3,
+    borderWidth: theme.borderWidth.base,
+    borderRadius: theme.radius.sm,
+    fontFamily: theme.font.mono,
+    fontSize: theme.type.footnote.fontSize
+  },
+  findCount: {
+    fontFamily: theme.font.mono,
+    fontSize: theme.type.footnote.fontSize
+  },
+  findButton: {
+    minWidth: theme.ctl.sm,
+    minHeight: theme.ctl.sm,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  expand: {
+    minHeight: theme.ctl.md,
+    alignItems: "center",
+    justifyContent: "center",
+    borderTopWidth: theme.borderWidth.base
+  },
+  expandText: {
+    fontFamily: theme.font.mono,
+    fontSize: theme.type.footnote.fontSize
+  },
+  bar: {
+    position: "absolute",
+    start: 0,
+    top: 0,
+    bottom: 0,
+    width: theme.space[2]
+  },
+  corner: {
+    position: "absolute",
+    top: theme.space.s1,
+    end: theme.space.s1,
+    zIndex: theme.z.raised
+  },
+  body: { paddingVertical: theme.space.s3 },
+  lines: { flexDirection: "column" },
+  line: { flexDirection: "row", alignItems: "flex-start" },
+  // No gutter → the code needs the leading inset the gutter would have carried.
+  lineInset: { paddingStart: theme.space.s4 },
+  gutter: {
+    minWidth: theme.space.s6,
+    paddingStart: theme.space.s4,
+    paddingEnd: theme.space.s3,
+    textAlign: "right",
+    fontFamily: theme.font.mono,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.code.lineH,
+    // A muted gutter ink that still clears AA (4.5:1) on code.bg: code.fg at 70%
+    // alpha (~5.6:1 light / ~7.2:1 dark). `theme.code.com` is short in dark
+    // (~4.1:1), and `aria-hidden` does not exempt the gutter from axe here.
+    color: `${theme.code.fg}b3`
+  },
+  code: {
+    fontFamily: theme.font.mono,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.code.lineH,
+    color: theme.code.fg,
+    paddingEnd: theme.space.s4
+  },
+  // Wrapped lines take the remaining width so the Text engine can break them.
+  codeWrap: { flex: 1 },
+  // Non-wrapped lines size to their intrinsic width inside the horizontal
+  // ScrollView, so a long line scrolls rather than wrapping.
+  codeNoWrap: {}
+}));
+
+export { CodeBlock };