@astratra/native-ui 0.1.0

package/src/logic/index.d.ts

@@ -0,0 +1,203 @@
+/**
+ * @astratra/native-ui/logic — the pure rules of the kit, without react-native.
+ */
+import type { GlassMode } from '@astratra/native';
+
+export type { GlassMode };
+export type ColorScheme = 'light' | 'dark';
+
+/* ─────────────────────────────── Colour ─────────────────────────────── */
+
+export interface Rgba {
+  r: number;
+  g: number;
+  b: number;
+  a: number;
+}
+
+/** `#rgb`, `#rrggbb`, `#rrggbbaa`, `rgb()`, `rgba()`; null for anything else. */
+export function parseColor(value: unknown): Rgba | null;
+/** `tint` over `background` at `proportion`, returned as an OPAQUE `#rrggbb`. */
+export function mixColors(background: string, tint: string, proportion: number): string;
+/** The same colour at another alpha, as `rgba()`; unreadable colours come back unchanged. */
+export function withAlpha(color: string, alpha: number): string;
+
+/* ──────────────────────────────── Glass ─────────────────────────────── */
+
+/** The share of a container tint that Apple's glass really shows (0.25). */
+export const TINT_WEIGHT: number;
+/** The frost of Apple's interactive glass (0.4). */
+export const INTERACTIVE_FROST: number;
+/** Style keys that draw a shadow on either platform. */
+export const SHADOW_KEYS: readonly string[];
+
+/** A translucent tint at Apple's real weight; opaque colours are left alone. */
+export function tintAtAppleWeight(color: string, interactive: boolean): string;
+/** A flattened style with iOS's shadow rule applied: containers lose their shadow. */
+export function surfaceStyleOffApple<T extends object>(flatStyle: T | null | undefined, interactive: boolean): Partial<T>;
+/** The default tint of an untinted glass button. */
+export function glassButtonTint(input?: { mode?: GlassMode; selected?: boolean }): string;
+
+export interface GlassButtonMaterial {
+  glassStyle: 'regular' | 'clear';
+  /** Top highlight, clear middle, denser foot. */
+  highlight: [string, string, string];
+  /** Content glow — Apple's glass only. */
+  glow: {
+    shadowColor: string;
+    shadowOpacity: number;
+    shadowRadius: number;
+    shadowOffset: { width: number; height: number };
+  } | null;
+}
+
+export function glassButtonMaterial(input?: { mode?: GlassMode; scheme?: ColorScheme; tinted?: boolean }): GlassButtonMaterial;
+
+/* ────────────────────────────── Pale card ───────────────────────────── */
+
+export const PALE_CARD_RADIUS: number;
+
+export interface PaleCardDose {
+  readonly top: number;
+  readonly fill: number;
+  readonly bottom: number;
+}
+
+export const PALE_CARD_DOSAGE: {
+  readonly light: { readonly tinted: PaleCardDose; readonly neutral: PaleCardDose };
+  readonly dark: { readonly tinted: PaleCardDose; readonly neutral: PaleCardDose };
+};
+
+export interface PaleCardColors {
+  fill: string;
+  top: string;
+  bottom: string;
+}
+
+export function paleCardColors(input: {
+  scheme?: ColorScheme;
+  pageBackground: string;
+  ink: string;
+  tint?: string | null;
+}): PaleCardColors;
+
+/* ────────────────────────── Collapse on scroll ──────────────────────── */
+
+export interface CollapseState {
+  collapsed: boolean;
+  anchor: number;
+}
+
+export const COLLAPSE_THRESHOLD: number;
+export const TOP_ZONE: number;
+export const INITIAL_COLLAPSE: Readonly<CollapseState>;
+/** One step of the fold decision; returns the same object when nothing changes. */
+export function followScroll(state: CollapseState, y: number): CollapseState;
+
+export const REFERENCE_WIDTH: number;
+export const MAX_BAR_SCALE: number;
+/** 1 up to a 390-point screen, growing with the width, capped at MAX_BAR_SCALE. */
+export function barScale(screenWidth: number | undefined): number;
+export const COLLAPSED_SCALE: number;
+export const COLLAPSED_DROP: number;
+/** Distance of a floating bottom element from the bottom edge. */
+export function floatingBottomOffset(bottomInset: number | undefined): number;
+
+/* ─────────────────────────────── Tab bar ────────────────────────────── */
+
+export const TAB_BAR_HEIGHT: number;
+export const TAB_BAR_SIDE_MARGIN: number;
+export const TAB_BAR_MAX_WIDTH: number;
+export const TAB_ROW_MARGIN: number;
+export const TAB_PILL_HEIGHT: number;
+export const TAB_CENTER_SIZE: number;
+export const TAB_OPEN_DELAY: number;
+
+export function arrangeTabs<T extends { key: string }>(
+  tabs: readonly T[] | null | undefined,
+  centerKey?: string | null
+): { ordered: T[]; centerIndex: number };
+export function tabCellWidth(rowWidth: number, count: number, rowMargin?: number): number;
+export function pillOffset(orderedKeys: readonly string[], key: string, cellWidth: number, rowMargin?: number): number;
+export function tabBarWidth(screenWidth: number, scale?: number, options?: { sideMargin?: number; maxWidth?: number }): number;
+export function badgeText(count: number): string;
+export function tabAccessibilityLabel(tab: { label: string; badge?: number }): string;
+
+export const PAGINATION_HEIGHT: number;
+/** Room to keep under a list so its last row scrolls above the pagination pill. */
+export function paginationReserve(bottomInset: number | undefined): number;
+
+/* ────────────────────────── Collapsible header ──────────────────────── */
+
+export interface FadeRange {
+  input: [number, number];
+  output: [number, number];
+}
+
+export const HEADER_BAR_HEIGHT: number;
+export const HEADER_FADE_RUN: number;
+export const HEADER_BOTTOM_FADE: { readonly ios: number; readonly android: number };
+export const HEADER_DEFAULT_THRESHOLD: number;
+export function headerThreshold(titleBottom: number, topInset?: number): number;
+export function headerBarFade(threshold: number): FadeRange;
+export function headerTitleFade(threshold: number): { opacity: FadeRange; translateY: FadeRange };
+export function headerBottomFade(platform: string): number;
+export function headerGradientStops(barHeight: number, fadeLength: number): [number, number, number];
+export function androidHeaderColors(pageBackground: string | undefined): [string, string, string];
+
+/* ────────────────────────────── Markdown ────────────────────────────── */
+
+export type MarkdownInline =
+  | { kind: 'text'; text: string }
+  | { kind: 'bold'; text: string }
+  | { kind: 'italic'; text: string }
+  | { kind: 'code'; text: string }
+  | { kind: 'link'; text: string; href: string };
+
+export interface MarkdownListItem {
+  depth: number;
+  inlines: MarkdownInline[];
+}
+
+export type MarkdownBlock =
+  | { kind: 'paragraph'; inlines: MarkdownInline[] }
+  | { kind: 'heading'; level: number; inlines: MarkdownInline[] }
+  | { kind: 'bullets'; items: MarkdownListItem[] }
+  | { kind: 'numbers'; items: MarkdownListItem[]; start: number }
+  | { kind: 'code'; language: string | null; text: string }
+  | { kind: 'table'; header: string[]; rows: string[][] }
+  | { kind: 'quote'; inlines: MarkdownInline[] };
+
+export function parseMarkdown(source: string | null | undefined): MarkdownBlock[];
+export function parseInline(source: string | null | undefined): MarkdownInline[];
+export function inlinesToText(inlines: readonly MarkdownInline[] | null | undefined): string;
+export function splitTableRow(line: string): string[];
+
+/* ──────────────────────────── Table columns ─────────────────────────── */
+
+export interface MeasureColumnsOptions {
+  charWidth?: number;
+  headerCharWidth?: number;
+  padding?: number;
+  minWidth?: number;
+  maxWidth?: number;
+  targetWidth?: number;
+  /** The phone's text size setting (1 = normal); below 1 is treated as 1. */
+  fontScale?: number;
+  /** Rounding onto the screen's pixel grid, e.g. PixelRatio.roundToNearestPixel. */
+  round?: (value: number) => number;
+}
+
+export const TABLE_COLUMN_DEFAULTS: Readonly<Required<Omit<MeasureColumnsOptions, 'fontScale' | 'round'>>>;
+export function isNumeric(value: unknown): boolean;
+export function measureColumns(
+  header: readonly string[],
+  rows: readonly (readonly string[])[],
+  options?: MeasureColumnsOptions
+): { widths: number[]; numeric: boolean[]; totalWidth: number };
+
+/* ─────────────────────────── Question anchoring ─────────────────────── */
+
+export const ANCHOR_MARGIN: number;
+export function anchorOffset(anchorY: number): number;
+export function reserveBelowQuestion(input: { viewportHeight: number; contentHeight: number; anchorY: number }): number;

package/src/logic/index.js

@@ -0,0 +1,16 @@
+/**
+ * The pure half of the kit: every rule the components follow, without
+ * react-native. Importable from Node (`@astratra/native-ui/logic`) — a server
+ * rendering the same Markdown, a test, a script.
+ */
+module.exports = {
+  ...require('./color'),
+  ...require('./glass'),
+  ...require('./paleCard'),
+  ...require('./collapse'),
+  ...require('./tabBar'),
+  ...require('./collapsibleHeader'),
+  ...require('./markdown'),
+  ...require('./tableColumns'),
+  ...require('./anchorQuestion')
+};

package/src/logic/markdown.js

@@ -0,0 +1,229 @@
+/**
+ * A Markdown parser for AI answers.
+ *
+ * A model writes Markdown; the screen used to render only its tables, and
+ * everything else came out raw — "**important**" displayed with its stars.
+ * No library is added for all that: Markdown renderers promise nothing on
+ * React 19 / recent React Native, and above all they do not test dry. Here
+ * parsing is a pure function, checked without mounting React, and rendering
+ * (`MarkdownView`) is only a walk over the structure it returns.
+ *
+ * Block kinds: paragraph, heading, bullets, numbers, code, table, quote.
+ * Inline kinds: text, bold, italic, code, link.
+ */
+
+const HEADING = /^ {0,3}(#{1,6})\s+(.*)$/;
+const BULLET = /^(\s*)[-*+][ \t]+(.*)$/;
+const NUMBER = /^(\s*)(\d{1,9})[.)][ \t]+(.*)$/;
+const QUOTE = /^ {0,3}>[ \t]?(.*)$/;
+const FENCE = /^\s*(`{3,}|~{3,})\s*([^\s`~]*)\s*$/;
+/* A table's marker: the row of dashes under the header. */
+const TABLE_RULE = /^\s*\|?\s*:?-{3,}/;
+const HORIZONTAL_RULE = /^\s*([-*_])(\s*\1){2,}\s*$/;
+
+/** Two spaces of indentation = one level; a tab counts the same. */
+const depthOf = (indent) => Math.floor(indent.replace(/\t/g, '  ').length / 2);
+
+function splitTableRow(line) {
+  return line
+    .trim()
+    .replace(/^\|/, '')
+    .replace(/\|$/, '')
+    .split('|')
+    .map((cell) => cell.trim());
+}
+
+function parseMarkdown(source) {
+  const lines = String(source ?? '').split(/\r?\n/);
+  const blocks = [];
+  let paragraph = [];
+
+  const flushParagraph = () => {
+    const text = paragraph.join('\n').trim();
+    paragraph = [];
+    if (text) blocks.push({ kind: 'paragraph', inlines: parseInline(text) });
+  };
+
+  for (let index = 0; index < lines.length; index += 1) {
+    const line = lines[index];
+    const fence = FENCE.exec(line);
+
+    if (fence) {
+      flushParagraph();
+      /* A code block is opaque: no indentation trimmed, no star interpreted.
+         A missing closing fence must not silently swallow what follows
+         either — take everything to the end and stop there. */
+      const closing = fence[1][0];
+      const body = [];
+      let cursor = index + 1;
+      while (cursor < lines.length) {
+        const candidate = FENCE.exec(lines[cursor]);
+        if (candidate && candidate[1][0] === closing && !candidate[2]) break;
+        body.push(lines[cursor]);
+        cursor += 1;
+      }
+      blocks.push({ kind: 'code', language: fence[2] || null, text: body.join('\n') });
+      index = cursor;
+      continue;
+    }
+
+    if (!line.trim()) {
+      flushParagraph();
+      continue;
+    }
+
+    /* NO RULE BETWEEN PARAGRAPHS. A `---`, `***` or `___` line (Markdown's
+       horizontal rule) was displayed as is, three dashes in the middle of the
+       text. It separates nothing more than the space between two paragraphs
+       already does: it is dropped. */
+    if (HORIZONTAL_RULE.test(line)) {
+      flushParagraph();
+      continue;
+    }
+
+    const heading = HEADING.exec(line);
+    if (heading) {
+      flushParagraph();
+      blocks.push({ kind: 'heading', level: heading[1].length, inlines: parseInline(heading[2].trim()) });
+      continue;
+    }
+
+    const quote = QUOTE.exec(line);
+    if (quote) {
+      flushParagraph();
+      const body = [quote[1]];
+      let cursor = index + 1;
+      while (cursor < lines.length) {
+        const next = QUOTE.exec(lines[cursor]);
+        if (!next) break;
+        body.push(next[1]);
+        cursor += 1;
+      }
+      blocks.push({ kind: 'quote', inlines: parseInline(body.join('\n').trim()) });
+      index = cursor - 1;
+      continue;
+    }
+
+    /* A table only announces itself on its SECOND line: the current line is
+       a header only if the next one is made of dashes. */
+    if (line.includes('|') && index + 1 < lines.length && TABLE_RULE.test(lines[index + 1])) {
+      flushParagraph();
+      const header = splitTableRow(line);
+      const rows = [];
+      let cursor = index + 2;
+      while (cursor < lines.length && lines[cursor].includes('|')) {
+        rows.push(splitTableRow(lines[cursor]));
+        cursor += 1;
+      }
+      blocks.push({ kind: 'table', header, rows });
+      index = cursor - 1;
+      continue;
+    }
+
+    const bullet = BULLET.exec(line);
+    const numbered = bullet ? null : NUMBER.exec(line);
+    if (bullet || numbered) {
+      flushParagraph();
+      const kind = bullet ? 'bullets' : 'numbers';
+      const items = [];
+      let cursor = index;
+      while (cursor < lines.length) {
+        const current = kind === 'bullets' ? BULLET.exec(lines[cursor]) : NUMBER.exec(lines[cursor]);
+        if (!current) break;
+        const text = kind === 'bullets' ? current[2] : current[3];
+        items.push({ depth: depthOf(current[1]), inlines: parseInline(text.trim()) });
+        cursor += 1;
+      }
+      if (numbered) {
+        /* ONE STEP PER BLOCK, ALL "1.". Bullets under each step cut a numbered
+           list into several blocks, and each restarted at 1 (seen on an
+           Android capture: "1. 1. 1."). The written number is authoritative;
+           a "1." that follows a numbered list, separated from it only by
+           bullets, CONTINUES it. A paragraph in between still starts a new
+           list. */
+        const written = Number(numbered[2]);
+        const previous = [...blocks].reverse().find((block) => block.kind !== 'bullets');
+        const next = previous && previous.kind === 'numbers' ? previous.start + previous.items.length : 1;
+        blocks.push({ kind: 'numbers', items, start: written === 1 ? next : written });
+      } else {
+        blocks.push({ kind: 'bullets', items });
+      }
+      index = cursor - 1;
+      continue;
+    }
+
+    paragraph.push(line);
+  }
+
+  flushParagraph();
+  return blocks;
+}
+
+/**
+ * Cuts a paragraph into fragments. A delimiter that never closes stays text:
+ * without that rule, one stray star in the middle of an answer put the whole
+ * rest of the message in bold.
+ */
+function parseInline(source) {
+  const text = String(source ?? '');
+  const inlines = [];
+  let plain = '';
+
+  const flush = () => {
+    if (plain) inlines.push({ kind: 'text', text: plain });
+    plain = '';
+  };
+
+  let index = 0;
+  while (index < text.length) {
+    const rest = text.slice(index);
+
+    const code = /^`([^`\n]+)`/.exec(rest);
+    if (code) {
+      flush();
+      inlines.push({ kind: 'code', text: code[1] });
+      index += code[0].length;
+      continue;
+    }
+
+    const bold = /^(\*\*|__)(?=\S)([\s\S]*?\S)\1/.exec(rest);
+    if (bold) {
+      flush();
+      inlines.push({ kind: 'bold', text: bold[2] });
+      index += bold[0].length;
+      continue;
+    }
+
+    /* Italic is recognised by the star only: a lone underscore appears in
+       identifiers (`final_grade`) far more often than as a style intent, and
+       taking it for a delimiter ate the word. */
+    const italic = /^\*(?=[^\s*])([^*\n]*[^\s*])\*/.exec(rest);
+    if (italic) {
+      flush();
+      inlines.push({ kind: 'italic', text: italic[1] });
+      index += italic[0].length;
+      continue;
+    }
+
+    const link = /^\[([^\]\n]*)\]\(([^)\s]+)\)/.exec(rest);
+    if (link) {
+      flush();
+      inlines.push({ kind: 'link', text: link[1] || link[2], href: link[2] });
+      index += link[0].length;
+      continue;
+    }
+
+    plain += text[index];
+    index += 1;
+  }
+
+  flush();
+  return inlines;
+}
+
+/** The plain text of a paragraph, delimiters removed — to copy, and to measure. */
+function inlinesToText(inlines) {
+  return (inlines || []).map((inline) => inline.text).join('');
+}
+
+module.exports = { parseMarkdown, parseInline, inlinesToText, splitTableRow };

package/src/logic/paleCard.js

@@ -0,0 +1,66 @@
+/**
+ * The colours of a pale card — its fill and its gradient — computed dry.
+ *
+ * WHY A PALE CARD AND NOT GLASS. Apple's glass on the CONTENT cards of a
+ * screen was judged, on a real phone, plain ugly: reflections, blur, a
+ * floating shadow. The rule that came out of it: glass stays on what floats
+ * and what is tapped (buttons, bars); content gets flat pale cards, glued to
+ * the page, in their own colour.
+ *
+ * WHY NO OUTLINE. At 7 % of tint the cards "had lost their colour" and it was
+ * their hairline outline that delimited them — read as "lines that show it's
+ * ice". No outline any more: the colour is INSIDE, in a light gradient
+ * (lighter at the top, denser at the bottom, like the light inside an iPhone
+ * icon), and that alone separates the card from the page.
+ *
+ * WHY OPAQUE. The fill is an opaque MIX of the tint over the page colour, not
+ * an rgba: a page that paints a pattern under its content would show it
+ * through a translucent card. The mix is done once, here, identical on iOS
+ * and Android — no extra layer a platform could composite differently.
+ */
+const { parseColor, mixColors } = require('./color');
+
+/** The card's corner radius. */
+const PALE_CARD_RADIUS = 20;
+
+/**
+ * Proportion of tint mixed into the page, per scheme and variant.
+ *
+ * Each dose was chosen so the card shows on its page, yellow included. The
+ * neutral light dose went from 4.5 % to 8 % after a settings screen became
+ * "invisible" on an iPhone. On black the same proportion vanishes, so dark
+ * doses go up; the dark neutral at 15 % comes out slightly lighter than
+ * iOS's own card grey (#1c1c1e) — at 11 % it drowned in the black.
+ */
+const PALE_CARD_DOSAGE = Object.freeze({
+  light: Object.freeze({
+    tinted: Object.freeze({ top: 0.1, fill: 0.14, bottom: 0.2 }),
+    neutral: Object.freeze({ top: 0.08, fill: 0.08, bottom: 0.08 })
+  }),
+  dark: Object.freeze({
+    tinted: Object.freeze({ top: 0.16, fill: 0.22, bottom: 0.28 }),
+    neutral: Object.freeze({ top: 0.15, fill: 0.15, bottom: 0.15 })
+  })
+});
+
+/**
+ * The colours of a pale card: its flat `fill` (for a pale background that is
+ * not a card) and the two ends of its gradient (`top`, `bottom`).
+ *
+ * `tint` must already be the colour for the current scheme. A missing or
+ * unreadable tint gives the NEUTRAL variant: `ink` — the theme's text colour
+ * — heavily diluted. Page and ink are read from the caller's theme rather
+ * than written here: when the dark theme moves, the card follows untouched.
+ */
+function paleCardColors({ scheme = 'light', pageBackground, ink, tint } = {}) {
+  const readableTint = tint && parseColor(tint) ? tint : null;
+  const dosage = PALE_CARD_DOSAGE[scheme === 'dark' ? 'dark' : 'light'][readableTint ? 'tinted' : 'neutral'];
+  const colour = readableTint || ink;
+  return {
+    fill: mixColors(pageBackground, colour, dosage.fill),
+    top: mixColors(pageBackground, colour, dosage.top),
+    bottom: mixColors(pageBackground, colour, dosage.bottom)
+  };
+}
+
+module.exports = { PALE_CARD_RADIUS, PALE_CARD_DOSAGE, paleCardColors };

package/src/logic/tabBar.js

@@ -0,0 +1,104 @@
+/**
+ * The geometry of the floating tab bar, and the pagination pill that shares
+ * its place — computed dry.
+ *
+ * The rendered bar (`TabBar`) is a thin shell over these numbers: which tab
+ * sits in the middle, how wide a cell is, where the sliding pill must land.
+ * Each of them was once wrong on a real phone; each is pinned by a test.
+ */
+const { floatingBottomOffset } = require('./collapse');
+
+/** The bar's own height at scale 1, and the side margin to the screen edge. */
+const TAB_BAR_HEIGHT = 62;
+const TAB_BAR_SIDE_MARGIN = 26;
+/* On a tablet a one-metre bar scatters five destinations to the four corners;
+   it keeps a generous phone width and centres under the thumb. */
+const TAB_BAR_MAX_WIDTH = 560;
+/** Inner padding of the row: the pill never touches the bar's rounded ends. */
+const TAB_ROW_MARGIN = 4;
+/** Height of the active-tab pill at scale 1. */
+const TAB_PILL_HEIGHT = 44;
+/** Size of the raised centre button at scale 1. */
+const TAB_CENTER_SIZE = 50;
+/**
+ * How long the destination waits after a tap, in ms.
+ *
+ * The page used to open in the same frame and cover the bar: the pill's slide
+ * was never seen. It now waits until the pill has almost arrived.
+ */
+const TAB_OPEN_DELAY = 180;
+
+/**
+ * Puts the centre tab in the middle; the others keep their order around it.
+ *
+ * Returns `centerIndex: -1` when there is no centre tab — the bar is then a
+ * plain row, same code, no raised button.
+ */
+function arrangeTabs(tabs, centerKey) {
+  const list = Array.isArray(tabs) ? tabs : [];
+  const center = centerKey == null ? undefined : list.find((tab) => tab.key === centerKey);
+  if (!center) return { ordered: list, centerIndex: -1 };
+  const rest = list.filter((tab) => tab !== center);
+  const centerIndex = Math.floor(rest.length / 2);
+  return { ordered: [...rest.slice(0, centerIndex), center, ...rest.slice(centerIndex)], centerIndex };
+}
+
+/** The width of one tab cell, once the row has been measured (0 before). */
+function tabCellWidth(rowWidth, count, rowMargin = TAB_ROW_MARGIN) {
+  if (!(rowWidth > 0) || !(count > 0)) return 0;
+  return (rowWidth - rowMargin * 2) / count;
+}
+
+/**
+ * Where the pill must land for `key`.
+ *
+ * An unknown key lands on the first cell rather than off the bar: a pill
+ * sliding out of sight reads as a broken bar.
+ */
+function pillOffset(orderedKeys, key, cellWidth, rowMargin = TAB_ROW_MARGIN) {
+  return rowMargin + Math.max(0, orderedKeys.indexOf(key)) * cellWidth;
+}
+
+/** The bar's width: the screen minus its margins, capped for tablets. */
+function tabBarWidth(screenWidth, scale = 1, { sideMargin = TAB_BAR_SIDE_MARGIN, maxWidth = TAB_BAR_MAX_WIDTH } = {}) {
+  return Math.min(screenWidth - sideMargin * 2, maxWidth * scale);
+}
+
+/** A badge never grows past three characters. */
+function badgeText(count) {
+  return count > 99 ? '99+' : String(count);
+}
+
+/** A screen reader hears the count, not just a red dot. */
+function tabAccessibilityLabel(tab) {
+  return tab.badge ? `${tab.label}, ${tab.badge}` : tab.label;
+}
+
+/** The pagination pill's height. */
+const PAGINATION_HEIGHT = 52;
+
+/**
+ * The room to keep under a list so its last row can scroll ABOVE the pill,
+ * instead of ending hidden behind it.
+ */
+function paginationReserve(bottomInset) {
+  return floatingBottomOffset(bottomInset) + PAGINATION_HEIGHT + 16;
+}
+
+module.exports = {
+  TAB_BAR_HEIGHT,
+  TAB_BAR_SIDE_MARGIN,
+  TAB_BAR_MAX_WIDTH,
+  TAB_ROW_MARGIN,
+  TAB_PILL_HEIGHT,
+  TAB_CENTER_SIZE,
+  TAB_OPEN_DELAY,
+  arrangeTabs,
+  tabCellWidth,
+  pillOffset,
+  tabBarWidth,
+  badgeText,
+  tabAccessibilityLabel,
+  PAGINATION_HEIGHT,
+  paginationReserve
+};