@btndprojects/loam-ui-native 0.0.0-stage → 0.1.1

package/dist/chunk-47FWHGUN.js

@@ -0,0 +1,394 @@
+import { NO_UA_FOCUS_RING } from './chunk-3NMD74ZU.js';
+import { useResolvedMotion } from './chunk-6N33LFQA.js';
+import { Icon } from './chunk-TKVFVF5D.js';
+import * as React from 'react';
+import { View, TextInput, ScrollView, Text, Animated, Pressable, Easing } from 'react-native';
+import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var LEADING_ICON = 18;
+var CANCEL_WIDTH = 52;
+var RECENTS_MAX_H = 120;
+function SearchBar({
+  data,
+  recents = [],
+  onSelect,
+  placeholder = "Search",
+  value,
+  defaultValue = "",
+  onChangeText
+}) {
+  const { styles } = useStyles(sheet);
+  const theme = useLoamTheme();
+  const iconColor = theme.color.text3;
+  const [focused, setFocused] = React.useState(false);
+  const isControlled = value !== void 0;
+  const [internal, setInternal] = React.useState(defaultValue);
+  const query = isControlled ? value : internal;
+  const handleChangeText = (text) => {
+    if (!isControlled) setInternal(text);
+    onChangeText?.(text);
+  };
+  const isEmpty = query.length === 0;
+  const needle = query.toLowerCase();
+  const matches = isEmpty ? [] : data.filter((item) => item.toLowerCase().includes(needle));
+  const renderRow = (item, leading) => /* @__PURE__ */ jsxs(
+    Pressable,
+    {
+      accessibilityRole: "button",
+      accessibilityLabel: item,
+      onPress: onSelect ? () => onSelect(item) : void 0,
+      style: ({ pressed }) => [styles.row, pressed ? styles.rowPressed : null],
+      children: [
+        /* @__PURE__ */ jsx(Icon, { name: leading, size: LEADING_ICON, color: iconColor }),
+        /* @__PURE__ */ jsx(Text, { style: styles.rowLabel, numberOfLines: 1, children: item }),
+        /* @__PURE__ */ jsx(View, { style: styles.goIcon, children: /* @__PURE__ */ jsx(Icon, { name: "arrow-right", size: theme.icon.sm, color: iconColor }) })
+      ]
+    },
+    item
+  );
+  return /* @__PURE__ */ jsxs(View, { style: styles.container, children: [
+    /* @__PURE__ */ jsxs(View, { style: [styles.field, focused ? styles.fieldFocused : null], children: [
+      /* @__PURE__ */ jsx(Icon, { name: "search", size: LEADING_ICON, color: iconColor }),
+      /* @__PURE__ */ jsx(
+        TextInput,
+        {
+          style: [styles.input, NO_UA_FOCUS_RING],
+          value: query,
+          onChangeText: handleChangeText,
+          onFocus: () => setFocused(true),
+          onBlur: () => setFocused(false),
+          placeholder,
+          placeholderTextColor: theme.color.text3
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(ScrollView, { style: styles.results, contentContainerStyle: styles.resultsContent, children: isEmpty ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Text, { style: styles.recentHeader, children: "Recent" }),
+      recents.map((item) => renderRow(item, "more-horizontal"))
+    ] }) : matches.length > 0 ? matches.map((item) => renderRow(item, "search")) : /* @__PURE__ */ jsxs(Text, { style: styles.empty, children: [
+      'No matches for "',
+      query,
+      '"'
+    ] }) })
+  ] });
+}
+function SearchExpand({
+  recents = [],
+  placeholder = "Search",
+  value,
+  defaultValue = "",
+  onChangeText,
+  onCancel,
+  onSelectRecent,
+  motion = "full"
+}) {
+  const { styles: sx } = useStyles(expandSheet);
+  const theme = useLoamTheme();
+  const resolved = useResolvedMotion(motion);
+  const animateTravel = resolved === "full";
+  const animateFade = resolved !== "none";
+  const isControlled = value !== void 0;
+  const [internal, setInternal] = React.useState(defaultValue);
+  const query = isControlled ? value : internal;
+  const handleChangeText = (text) => {
+    if (!isControlled) setInternal(text);
+    onChangeText?.(text);
+  };
+  const [focused, setFocused] = React.useState(false);
+  const cancelWidth = React.useRef(new Animated.Value(0)).current;
+  const cancelOpacity = React.useRef(new Animated.Value(0)).current;
+  const recentsHeight = React.useRef(new Animated.Value(0)).current;
+  const recentsOpacity = React.useRef(new Animated.Value(0)).current;
+  const drive = (val, to, kind, useNativeDriver) => {
+    const enabled = kind === "fade" ? animateFade : animateTravel;
+    if (!enabled) {
+      val.setValue(to);
+      return null;
+    }
+    return Animated.timing(val, {
+      toValue: to,
+      duration: theme.motion.toggle.duration,
+      easing: Easing.bezier(...theme.motion.toggle.easing),
+      useNativeDriver
+    });
+  };
+  const runToggle = (open) => {
+    const anims = [
+      drive(cancelWidth, open ? CANCEL_WIDTH : 0, "travel", false),
+      drive(cancelOpacity, open ? 1 : 0, "fade", true),
+      drive(recentsHeight, open ? RECENTS_MAX_H : 0, "travel", false),
+      drive(recentsOpacity, open ? 1 : 0, "fade", true)
+    ].filter((a) => a !== null);
+    if (anims.length > 0) Animated.parallel(anims).start();
+  };
+  const openAnim = () => runToggle(true);
+  const closeAnim = () => runToggle(false);
+  const inputRef = React.useRef(null);
+  const handleFocus = () => {
+    setFocused(true);
+    openAnim();
+  };
+  const handleBlur = () => {
+    setTimeout(() => {
+      if (!query) {
+        setFocused(false);
+        closeAnim();
+      }
+    }, 150);
+  };
+  const handleCancel = () => {
+    if (!isControlled) setInternal("");
+    onChangeText?.("");
+    inputRef.current?.blur();
+    setFocused(false);
+    closeAnim();
+    onCancel?.();
+  };
+  const handleChipPress = (label) => {
+    if (!isControlled) setInternal(label);
+    onChangeText?.(label);
+    onSelectRecent?.(label);
+  };
+  return /* @__PURE__ */ jsxs(View, { style: sx.wrapper, children: [
+    /* @__PURE__ */ jsxs(
+      View,
+      {
+        style: [sx.bar, focused ? sx.barFocused : null],
+        accessibilityRole: "search",
+        children: [
+          /* @__PURE__ */ jsx(Icon, { name: "search", size: LEADING_ICON, color: theme.color.text3 }),
+          /* @__PURE__ */ jsx(
+            TextInput,
+            {
+              ref: inputRef,
+              style: [sx.input, NO_UA_FOCUS_RING],
+              value: query,
+              onChangeText: handleChangeText,
+              onFocus: handleFocus,
+              onBlur: handleBlur,
+              placeholder,
+              placeholderTextColor: theme.color.text3,
+              returnKeyType: "search"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Animated.View,
+            {
+              style: {
+                width: cancelWidth,
+                overflow: "hidden",
+                pointerEvents: focused ? "auto" : "none"
+              },
+              children: /* @__PURE__ */ jsx(Animated.View, { style: { opacity: cancelOpacity }, children: /* @__PURE__ */ jsx(
+                Pressable,
+                {
+                  accessibilityRole: "button",
+                  accessibilityLabel: "Cancel",
+                  onPress: handleCancel,
+                  style: sx.cancelBtn,
+                  children: /* @__PURE__ */ jsx(Text, { style: sx.cancelText, children: "Cancel" })
+                }
+              ) })
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Animated.View,
+      {
+        style: [
+          sx.recentsWrap,
+          {
+            height: recentsHeight,
+            opacity: recentsOpacity,
+            pointerEvents: focused ? "auto" : "none"
+          }
+        ],
+        children: /* @__PURE__ */ jsx(View, { style: sx.chipsRow, children: recents.map((label) => /* @__PURE__ */ jsxs(
+          Pressable,
+          {
+            accessibilityRole: "button",
+            accessibilityLabel: label,
+            onPress: () => handleChipPress(label),
+            style: sx.chip,
+            children: [
+              /* @__PURE__ */ jsx(Icon, { name: "search", size: 13, color: theme.color.text3 }),
+              /* @__PURE__ */ jsx(Text, { style: sx.chipText, children: label })
+            ]
+          },
+          label
+        )) })
+      }
+    )
+  ] });
+}
+var sheet = createStyleSheet((theme) => ({
+  container: { gap: theme.space.s3 },
+  field: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space.s2,
+    // A prominent, full-width field: the touch tier of the control-size ramp
+    // (44pt), which also clears the tap minimum on its own.
+    height: theme.ctl.lg,
+    paddingHorizontal: theme.space.s4,
+    borderRadius: theme.radius.full,
+    backgroundColor: theme.color.surface2,
+    // Transparent at rest rather than absent, so gaining focus tints the edge
+    // instead of growing the field by 1.5px and nudging the row below.
+    borderWidth: theme.borderWidth.thick,
+    borderColor: "transparent"
+  },
+  // Same focused treatment as `SearchExpand`: the two sit in the same product.
+  // The edge is the *measured* ring colour, not the raw
+  // accent. `NO_UA_FOCUS_RING` removes the browser's own outline, so this edge
+  // is the **only** focus affordance the field has — which makes it a focus
+  // indicator under SC 1.4.11 and holds it to 3:1 against both the fill inside
+  // it and the ground outside. The raw accent misses that in 10 of the 42
+  // palette x mode x ground cases (worst 1.98:1 on `surface2`, four palettes).
+  // `focus.ringColor` is the same accent lifted only where it could not clear
+  // 3:1, so it is byte-identical in 9 of the 14 palette x mode combos and moves
+  // exactly the five that were failing.
+  fieldFocused: { borderColor: theme.focus.ringColor, backgroundColor: theme.color.surface },
+  input: {
+    flex: 1,
+    padding: 0,
+    color: theme.color.text,
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[16],
+    backgroundColor: "transparent"
+  },
+  results: { alignSelf: "stretch" },
+  resultsContent: { gap: theme.space.s1 },
+  recentHeader: {
+    fontFamily: theme.font.mono,
+    fontSize: theme.fontSize[12],
+    color: theme.color.text3,
+    textTransform: "uppercase",
+    // `theme.tracking.*` are em multiples, so they must be scaled by the size.
+    letterSpacing: theme.tracking.wider * theme.fontSize[12],
+    paddingHorizontal: theme.space.s3,
+    paddingVertical: theme.space.s2
+  },
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space.s3,
+    paddingHorizontal: theme.space.s3,
+    paddingVertical: theme.space.s3,
+    borderRadius: theme.radius.md,
+    backgroundColor: "transparent"
+  },
+  rowPressed: { backgroundColor: theme.color.surface2 },
+  rowLabel: {
+    flex: 1,
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[16],
+    color: theme.color.text
+  },
+  goIcon: { transform: [{ rotate: "-45deg" }] },
+  empty: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[14],
+    color: theme.color.text3,
+    textAlign: "center",
+    paddingHorizontal: theme.space.s5,
+    paddingVertical: theme.space.s6
+  }
+}));
+var expandSheet = createStyleSheet((theme) => ({
+  wrapper: {
+    gap: theme.space[12]
+    // reference: `gap:12px` (line 2399)
+  },
+  // Bar — resting state: surface2 pill, no visible border (transparent).
+  // Geometry: `padding:12px 15px`, `border-radius:var(--r-full)` (line 2400).
+  bar: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space[10],
+    // reference: `gap:10px`
+    paddingVertical: theme.space[12],
+    paddingHorizontal: theme.space[15],
+    borderRadius: theme.radius.full,
+    backgroundColor: theme.color.surface2,
+    borderWidth: theme.borderWidth.thick,
+    borderColor: "transparent"
+  },
+  // Focused state: accent border + surface background (reference line 2407),
+  // through `focus.ringColor` for the reason given on `fieldFocused` above.
+  barFocused: {
+    borderColor: theme.focus.ringColor,
+    backgroundColor: theme.color.surface
+  },
+  input: {
+    flex: 1,
+    minWidth: 0,
+    padding: 0,
+    color: theme.color.text,
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[15],
+    // reference: `font-size:15px` (line 2402)
+    backgroundColor: "transparent"
+  },
+  // Cancel button content (reference: `color:var(--accent)`, `font-weight:600`,
+  // `font-size:14px`, line 2403 — the colour deliberately diverges, see below).
+  cancelBtn: {
+    alignItems: "center",
+    justifyContent: "center",
+    paddingHorizontal: theme.space[4]
+  },
+  // The label is real text at 14px semibold, so it is held to AA's 4.5:1 — not
+  // the 3:1 a glyph gets — against the `surface` the bar paints while focused
+  // (the only time Cancel is visible). The raw accent the reference names here
+  // misses 4.5:1 in 40 of the 56 palette x mode x ground cases, bottoming out at
+  // 1.75:1, so this takes `accentStrong`, which is measured against exactly the
+  // reading grounds `surface`/`bg`/`surface-2` and clears AA on all of them by
+  // construction. Unlike a chart mark or a knob glyph, there is no polarity
+  // trap here: the bar's ground follows the colour mode.
+  cancelText: {
+    color: theme.color.accentStrong,
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.semibold,
+    fontSize: theme.fontSize[14],
+    // reference: `font-size:14px` (line 2403)
+    whiteSpace: "nowrap"
+  },
+  // Recents chip row — hidden by default, revealed via animated height.
+  // Reference: `display:flex;flex-wrap:wrap;gap:8px` (line 2405).
+  recentsWrap: {
+    overflow: "hidden"
+  },
+  chipsRow: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: theme.space[8]
+    // reference: `gap:8px`
+  },
+  // Each chip: `padding:8px 14px`, `border-radius:999px`, `font-size:13px`,
+  // `font-weight:600`, `border:1px solid var(--border-strong)`, `color:var(--text-2)`
+  // (reference line 2406).
+  chip: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space[7],
+    // reference: `gap:7px`
+    paddingVertical: theme.space[8],
+    paddingHorizontal: theme.space[14],
+    borderRadius: theme.radius.full,
+    borderWidth: theme.borderWidth.thin,
+    borderColor: theme.color.borderStrong,
+    backgroundColor: "transparent"
+  },
+  chipText: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.semibold,
+    fontSize: theme.fontSize[13],
+    // reference: `font-size:13px`
+    color: theme.color.text2
+  }
+}));
+
+export { SearchBar, SearchExpand };

package/dist/chunk-4BXMXBJO.js

@@ -0,0 +1,141 @@
+import * as React from 'react';
+import { View, Animated, Easing, ScrollView } from 'react-native';
+import { Svg, Defs, LinearGradient, Stop, Rect } from 'react-native-svg';
+import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+// src/scroll-area/scroll-area.tsx
+var FADE_SIZE = 32;
+function ScrollArea({
+  children,
+  orientation = "vertical",
+  fade = false,
+  maxHeight,
+  maxWidth,
+  motion = "full",
+  accessibilityLabel
+}) {
+  const { styles } = useStyles(sheet);
+  const theme = useLoamTheme();
+  const horizontal = orientation === "horizontal";
+  const axis = horizontal ? "x" : "y";
+  const [container, setContainer] = React.useState(0);
+  const [content, setContent] = React.useState(0);
+  const [offset, setOffset] = React.useState(0);
+  const showStart = fade && offset > 1;
+  const showEnd = fade && content - container - offset > 1;
+  const onLayout = React.useCallback(
+    (e) => {
+      const { width, height } = e.nativeEvent.layout;
+      setContainer(axis === "x" ? width : height);
+    },
+    [axis]
+  );
+  const onContentSizeChange = React.useCallback(
+    (w, h) => setContent(axis === "x" ? w : h),
+    [axis]
+  );
+  const onScroll = React.useCallback(
+    (e) => {
+      const o = e.nativeEvent.contentOffset;
+      setOffset(axis === "x" ? o.x : o.y);
+    },
+    [axis]
+  );
+  const scroller = /* @__PURE__ */ jsx(
+    ScrollView,
+    {
+      focusable: true,
+      horizontal,
+      showsVerticalScrollIndicator: !horizontal,
+      showsHorizontalScrollIndicator: horizontal,
+      onLayout,
+      onContentSizeChange,
+      onScroll: fade ? onScroll : void 0,
+      scrollEventThrottle: 16,
+      children: orientation === "both" ? /* @__PURE__ */ jsx(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: true, focusable: true, children }) : children
+    }
+  );
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      role: "group",
+      accessibilityLabel,
+      onLayout: horizontal ? void 0 : onLayout,
+      style: [styles.root, maxHeight != null && { maxHeight }, maxWidth != null && { maxWidth }],
+      children: [
+        scroller,
+        fade ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            Fade,
+            {
+              side: horizontal ? "start" : "top",
+              color: theme.color.bg,
+              visible: showStart,
+              motion,
+              hoverDuration: theme.motion.hover.duration,
+              hoverEasing: theme.motion.hover.easing
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Fade,
+            {
+              side: horizontal ? "end" : "bottom",
+              color: theme.color.bg,
+              visible: showEnd,
+              motion,
+              hoverDuration: theme.motion.hover.duration,
+              hoverEasing: theme.motion.hover.easing
+            }
+          )
+        ] }) : null
+      ]
+    }
+  );
+}
+function Fade({
+  side,
+  color,
+  visible,
+  motion,
+  hoverDuration,
+  hoverEasing
+}) {
+  const opacity = React.useRef(new Animated.Value(visible ? 1 : 0)).current;
+  React.useEffect(() => {
+    const to = visible ? 1 : 0;
+    if (motion === "full") {
+      Animated.timing(opacity, {
+        toValue: to,
+        duration: hoverDuration,
+        easing: Easing.bezier(hoverEasing[0], hoverEasing[1], hoverEasing[2], hoverEasing[3]),
+        useNativeDriver: true
+      }).start();
+    } else {
+      opacity.setValue(to);
+    }
+  }, [visible, motion, opacity, hoverDuration, hoverEasing]);
+  const theme = useLoamTheme();
+  const fade = theme.space[FADE_SIZE];
+  const vertical = side === "top" || side === "bottom";
+  const solidAtStart = side === "top" || side === "start";
+  const coords = vertical ? { x1: "0", y1: "0", x2: "0", y2: "1" } : { x1: "0", y1: "0", x2: "1", y2: "0" };
+  const box = side === "top" ? { top: 0, left: 0, right: 0, height: fade } : side === "bottom" ? { bottom: 0, left: 0, right: 0, height: fade } : side === "start" ? { top: 0, bottom: 0, start: 0, width: fade } : { top: 0, bottom: 0, end: 0, width: fade };
+  const id = `loam-scroll-fade-${side}`;
+  return /* @__PURE__ */ jsx(Animated.View, { style: [{ position: "absolute", opacity, pointerEvents: "none" }, box], children: /* @__PURE__ */ jsxs(Svg, { width: "100%", height: "100%", children: [
+    /* @__PURE__ */ jsx(Defs, { children: /* @__PURE__ */ jsxs(LinearGradient, { id, x1: coords.x1, y1: coords.y1, x2: coords.x2, y2: coords.y2, children: [
+      /* @__PURE__ */ jsx(Stop, { offset: "0", stopColor: color, stopOpacity: solidAtStart ? 1 : 0 }),
+      /* @__PURE__ */ jsx(Stop, { offset: "1", stopColor: color, stopOpacity: solidAtStart ? 0 : 1 })
+    ] }) }),
+    /* @__PURE__ */ jsx(Rect, { x: "0", y: "0", width: "100%", height: "100%", fill: `url(#${id})` })
+  ] }) });
+}
+var sheet = createStyleSheet((theme) => ({
+  root: {
+    flexShrink: 1,
+    overflow: "hidden",
+    borderRadius: theme.radius.md
+  }
+}));
+
+export { ScrollArea };

package/dist/chunk-4DS5ZWVC.js

@@ -0,0 +1,83 @@
+import 'react';
+import { View, Text } from 'react-native';
+import { createStyleSheet, useStyles } from '@btndprojects/loam-theme-native';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/page-header/page-header.tsx
+function PageHeader({
+  breadcrumb,
+  title,
+  titleAdornment,
+  meta,
+  actions,
+  back,
+  tabs,
+  // Accepted for API consistency; intentionally unused (see PageHeaderMotion).
+  motion: _motion = "none"
+}) {
+  const { styles } = useStyles(sheet);
+  return /* @__PURE__ */ jsxs(View, { style: styles.container, children: [
+    back != null ? /* @__PURE__ */ jsx(View, { style: styles.backRow, children: back }) : null,
+    breadcrumb != null ? /* @__PURE__ */ jsx(View, { children: breadcrumb }) : null,
+    /* @__PURE__ */ jsxs(View, { style: styles.titleRow, children: [
+      /* @__PURE__ */ jsxs(View, { style: styles.titleGroup, children: [
+        /* @__PURE__ */ jsx(Text, { accessibilityRole: "header", style: styles.title, children: title }),
+        titleAdornment != null ? /* @__PURE__ */ jsx(View, { style: styles.adornment, children: titleAdornment }) : null
+      ] }),
+      actions != null ? /* @__PURE__ */ jsx(View, { style: styles.actions, children: actions }) : null
+    ] }),
+    meta != null ? typeof meta === "string" ? /* @__PURE__ */ jsx(Text, { style: styles.meta, children: meta }) : /* @__PURE__ */ jsx(View, { children: meta }) : null,
+    tabs != null ? /* @__PURE__ */ jsx(View, { style: styles.tabs, children: tabs }) : null
+  ] });
+}
+var sheet = createStyleSheet((theme) => ({
+  container: {
+    gap: theme.space.s3,
+    paddingHorizontal: theme.space.s4,
+    paddingVertical: theme.space.s4,
+    backgroundColor: theme.color.bg
+  },
+  backRow: { flexDirection: "row", alignItems: "center" },
+  // Wraps the actions block below the title on a narrow viewport.
+  titleRow: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    alignItems: "flex-start",
+    justifyContent: "space-between",
+    gap: theme.space.s3
+  },
+  // `flexShrink: 1` + `minWidth: 0` lets a long title ellipsize / wrap instead
+  // of pushing the actions off the row.
+  titleGroup: {
+    flexDirection: "row",
+    alignItems: "center",
+    flexShrink: 1,
+    minWidth: 0,
+    gap: theme.space.s2
+  },
+  // `title1` (28/34) is the content page-title role on the mobile ramp — one
+  // step below the app bar's `largeTitle`, so the two never read as the same
+  // element.
+  title: {
+    fontFamily: theme.font.display,
+    fontWeight: theme.font.displayWeight,
+    fontSize: theme.type.title1.fontSize,
+    lineHeight: theme.type.title1.lineHeight,
+    letterSpacing: theme.type.title1.letterSpacing,
+    color: theme.color.text,
+    flexShrink: 1
+  },
+  adornment: { flexDirection: "row", alignItems: "center" },
+  actions: { flexDirection: "row", flexWrap: "wrap", alignItems: "center", gap: theme.space.s2 },
+  // Secondary ink, callout size — the AA-safe muted line under the title.
+  meta: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.callout.fontSize,
+    lineHeight: theme.type.callout.lineHeight,
+    letterSpacing: theme.type.callout.letterSpacing,
+    color: theme.color.text2
+  },
+  tabs: { marginTop: theme.space.s1 }
+}));
+
+export { PageHeader };