@expokit/cli 0.0.0-stage → 0.2.0

package/registry/floating-input/files/src/lib/kit.tsx

@@ -0,0 +1,219 @@
+import React, { createContext, useContext, useMemo } from 'react';
+import { Platform, useColorScheme, type TextStyle } from 'react-native';
+
+/**
+ * ExpoKit design tokens. Every component reads them through useKit(), so one
+ * <KitProvider> (optional) re-skins the whole kit: light / dark, accent colour, radius.
+ * Without a provider, components follow the system colour scheme.
+ */
+
+/**
+ * Bumped whenever components start using a new kit API (2: radius.scale / radius.capsule).
+ * The CLI won't keep an edited kit.tsx older than the component being added needs.
+ */
+export const KIT_VERSION = 2;
+
+export type ColorScheme = 'light' | 'dark';
+
+export interface Colors {
+  background: string;
+  foreground: string;
+  /** Cards, sheets, inputs. */
+  card: string;
+  cardForeground: string;
+  /** Raised surfaces: popovers, toasts. */
+  popover: string;
+  muted: string;
+  mutedForeground: string;
+  border: string;
+  input: string;
+  primary: string;
+  primaryForeground: string;
+  secondary: string;
+  secondaryForeground: string;
+  accent: string;
+  accentForeground: string;
+  success: string;
+  warning: string;
+  danger: string;
+  dangerForeground: string;
+  ring: string;
+  overlay: string;
+}
+
+export interface Theme {
+  dark: boolean;
+  colors: Colors;
+  /** Corner radius scale. `radius.full` makes pills. */
+  radius: {
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+    full: number;
+    /** A corner designed at the default radius (12), scaled to the current one: `radius.scale(16)` is 16 at 12, 0 at 0. */
+    scale: (n: number) => number;
+    /** Corner for a bar or chip of height `h`: a pill at radius ≥ 12, softer below, square at 0. */
+    capsule: (h: number) => number;
+  };
+  /** 4pt spacing scale: space(4) === 16. */
+  space: (n: number) => number;
+  font: { family?: string; mono: string };
+  text: Record<'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl', TextStyle>;
+}
+
+const light: Colors = {
+  background: '#ffffff',
+  foreground: '#09090b',
+  card: '#ffffff',
+  cardForeground: '#09090b',
+  popover: '#ffffff',
+  muted: '#f4f4f5',
+  mutedForeground: '#71717a',
+  border: '#e4e4e7',
+  input: '#d4d4d8',
+  primary: '#18181b',
+  primaryForeground: '#fafafa',
+  secondary: '#f4f4f5',
+  secondaryForeground: '#18181b',
+  accent: '#18181b',
+  accentForeground: '#ffffff',
+  success: '#16a34a',
+  warning: '#f59e0b',
+  danger: '#e5484d',
+  dangerForeground: '#ffffff',
+  ring: '#18181b',
+  overlay: 'rgba(0,0,0,0.4)',
+};
+
+const dark: Colors = {
+  background: '#09090b',
+  foreground: '#fafafa',
+  card: '#111113',
+  cardForeground: '#fafafa',
+  popover: '#18181b',
+  muted: '#1c1c20',
+  mutedForeground: '#a1a1aa',
+  border: '#27272a',
+  input: '#34343a',
+  primary: '#fafafa',
+  primaryForeground: '#18181b',
+  secondary: '#1f1f23',
+  secondaryForeground: '#fafafa',
+  accent: '#fafafa',
+  accentForeground: '#09090b',
+  success: '#3dd68c',
+  warning: '#ffb224',
+  danger: '#ff6369',
+  dangerForeground: '#ffffff',
+  ring: '#d4d4d8',
+  overlay: 'rgba(0,0,0,0.6)',
+};
+
+export const palettes = { light, dark };
+
+function build(scheme: ColorScheme, overrides?: ThemeOverrides): Theme {
+  const base = scheme === 'dark' ? dark : light;
+  const accent = overrides?.accent;
+  const colors: Colors = {
+    ...base,
+    ...(accent ? { accent, ring: accent, accentForeground: readableOn(accent) } : null),
+    ...overrides?.colors?.[scheme],
+  };
+  const r = overrides?.radius ?? 12;
+  return {
+    dark: scheme === 'dark',
+    colors,
+    radius: {
+      sm: Math.round(r * 0.5),
+      md: r,
+      lg: Math.round(r * 1.35),
+      xl: Math.round(r * 1.8),
+      full: 999,
+      scale: (n) => Math.round((n * r) / 12),
+      capsule: (h) => Math.round((h / 2) * Math.min(1, r / 12)),
+    },
+    space: (n) => n * 4,
+    font: {
+      family: overrides?.fontFamily,
+      mono: Platform.select({ ios: 'Menlo', android: 'monospace', default: 'ui-monospace, SFMono-Regular, Menlo, monospace' })!,
+    },
+    text: {
+      xs: { fontSize: 12, lineHeight: 16 },
+      sm: { fontSize: 14, lineHeight: 20 },
+      md: { fontSize: 16, lineHeight: 22 },
+      lg: { fontSize: 18, lineHeight: 24, fontWeight: '400' },
+      xl: { fontSize: 22, lineHeight: 28, fontWeight: '400', letterSpacing: -0.3 },
+      xxl: { fontSize: 30, lineHeight: 36, fontWeight: '400', letterSpacing: -0.8 },
+    },
+  };
+}
+
+export interface ThemeOverrides {
+  /** Brand colour used for focus rings, selected states and accent buttons. */
+  accent?: string;
+  /** Base corner radius in points (default 12). */
+  radius?: number;
+  fontFamily?: string;
+  /** Override any token per scheme. */
+  colors?: Partial<Record<ColorScheme, Partial<Colors>>>;
+}
+
+const KitContext = createContext<{ scheme?: ColorScheme; overrides?: ThemeOverrides } | null>(null);
+
+export function KitProvider({
+  scheme,
+  children,
+  ...overrides
+}: ThemeOverrides & { scheme?: ColorScheme | 'system'; children: React.ReactNode }) {
+  const value = useMemo(
+    () => ({ scheme: scheme === 'system' ? undefined : scheme, overrides }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [scheme, overrides.accent, overrides.radius, overrides.fontFamily, overrides.colors]
+  );
+  return <KitContext.Provider value={value}>{children}</KitContext.Provider>;
+}
+
+export function useKit(): Theme {
+  const ctx = useContext(KitContext);
+  const system = useColorScheme();
+  const scheme: ColorScheme = ctx?.scheme ?? (system === 'dark' ? 'dark' : 'light');
+  return useMemo(() => build(scheme, ctx?.overrides), [scheme, ctx?.overrides]);
+}
+
+/** Shared motion presets so the whole kit moves the same way. */
+export const motion = {
+  /** Toggles, selection indicators. */
+  snappy: { damping: 18, stiffness: 260, mass: 0.8 },
+  /** Press feedback, pops. */
+  bouncy: { damping: 11, stiffness: 220, mass: 0.7 },
+  /** Sheets, layout changes. */
+  gentle: { damping: 22, stiffness: 160, mass: 1 },
+  fast: 160,
+  normal: 240,
+};
+
+/** Adds alpha to a #rrggbb colour: alpha('#6366f1', 0.2). */
+export function alpha(hex: string, a: number) {
+  if (!hex.startsWith('#') || (hex.length !== 7 && hex.length !== 4)) return hex;
+  const full = hex.length === 4 ? '#' + [...hex.slice(1)].map((c) => c + c).join('') : hex;
+  return full + Math.round(Math.max(0, Math.min(1, a)) * 255).toString(16).padStart(2, '0');
+}
+
+/** Black or white, whichever reads better on `hex`. */
+export function readableOn(hex: string) {
+  const full = hex.length === 4 ? '#' + [...hex.slice(1)].map((c) => c + c).join('') : hex;
+  const n = parseInt(full.slice(1, 7), 16);
+  if (Number.isNaN(n)) return '#ffffff';
+  const [r, g, b] = [(n >> 16) & 255, (n >> 8) & 255, n & 255];
+  return (r * 299 + g * 587 + b * 114) / 1000 > 150 ? '#09090b' : '#ffffff';
+}
+
+/**
+ * True for children that must be wrapped in <Text>: strings, numbers and arrays of them —
+ * `{count} new` is the array [3, ' new'], and raw text outside <Text> crashes on native.
+ */
+export function isTextNode(node: React.ReactNode): node is string | number | (string | number)[] {
+  if (typeof node === 'string' || typeof node === 'number') return true;
+  return Array.isArray(node) && node.length > 0 && node.every((n) => typeof n === 'string' || typeof n === 'number');
+}

package/registry/floating-input.json

@@ -0,0 +1,17 @@
+{
+  "name": "floating-input",
+  "type": "component",
+  "title": "Floating Input",
+  "description": "The label starts as the placeholder and glides onto the border when you focus — a soft accent halo blooms around the field, errors shake in with an icon, valid values pop a spring check. Prefix/suffix, clear button, counter and three variants whose indicator grows from the centre.",
+  "tier": "free",
+  "dependencies": [
+    "react-native-svg"
+  ],
+  "registryDependencies": [
+    "kit"
+  ],
+  "sharedFiles": [
+    "lib/kit.tsx"
+  ],
+  "filesDir": "floating-input/files"
+}

package/registry/gift-card.json

@@ -0,0 +1,21 @@
+{
+  "name": "gift-card",
+  "type": "component",
+  "title": "Gift Card",
+  "description": "A gift card on any photo — the amount, a note and who it's for on the front; tap to flip it and read the redeem code off a brushed-silver panel, with a copy button. Tilts toward your finger with a moving reflection; redeemed state.",
+  "tier": "pro",
+  "dependencies": [
+    "react-native-svg"
+  ],
+  "registryDependencies": [
+    "kit",
+    "tilt-card",
+    "flip-card"
+  ],
+  "sharedFiles": [
+    "lib/kit.tsx",
+    "components/ui/tilt-card.tsx",
+    "components/ui/flip-card.tsx"
+  ],
+  "filesDir": null
+}

package/registry/glass-button.json

@@ -0,0 +1,22 @@
+{
+  "name": "glass-button",
+  "type": "component",
+  "title": "Glass Button",
+  "description": "Liquid Glass buttons and toolbars. GlassButton: label, icon or both in three sizes (icon-only is a circle), plain monochrome glass or tinted glass for the primary action, a spring press and a light haptic — real interactive Liquid Glass on iOS 26, blur everywhere else. GlassToolbar: icon buttons in one glass capsule with hairline separators, or a floating cluster of glass circles that melt into each other on iOS 26, with an active state for tools and toggles.",
+  "tier": "pro",
+  "dependencies": [
+    "expo-glass-effect",
+    "expo-blur",
+    "react-native-svg",
+    "expo-haptics"
+  ],
+  "registryDependencies": [
+    "kit",
+    "glass"
+  ],
+  "sharedFiles": [
+    "lib/kit.tsx",
+    "components/ui/glass.tsx"
+  ],
+  "filesDir": null
+}

package/registry/glass-nav-bar.json

@@ -0,0 +1,21 @@
+{
+  "name": "glass-nav-bar",
+  "type": "component",
+  "title": "Glass Nav Bar",
+  "description": "The iOS 26 top bar in Liquid Glass: a centred title, a round glass back button and round glass actions that melt together on iOS 26. Wire it to a ScrollView with useGlassNavScroll() and the bar starts transparent, its glass fading in as content slides under it, while an optional large title shrinks and collapses into the bar — all on the native driver. Real Liquid Glass on iOS 26, blur on older iOS, Android and web.",
+  "tier": "pro",
+  "dependencies": [
+    "expo-glass-effect",
+    "expo-blur",
+    "react-native-svg"
+  ],
+  "registryDependencies": [
+    "kit",
+    "glass"
+  ],
+  "sharedFiles": [
+    "lib/kit.tsx",
+    "components/ui/glass.tsx"
+  ],
+  "filesDir": null
+}

package/registry/glass-search-bar.json

@@ -0,0 +1,21 @@
+{
+  "name": "glass-search-bar",
+  "type": "component",
+  "title": "Glass Search Bar",
+  "description": "iOS 26 floating search pill on Liquid Glass. The pill swells a touch on focus, a clear button pops in with text, and an optional round glass cancel button (or a Cancel capsule) splits off beside it — grouped, so on iOS 26 the two melt together as it springs in. Leading / trailing slots fit a custom icon or a mic button. Real Liquid Glass on iOS 26, blur or frosted glass everywhere else.",
+  "tier": "pro",
+  "dependencies": [
+    "expo-glass-effect",
+    "expo-blur",
+    "react-native-svg"
+  ],
+  "registryDependencies": [
+    "kit",
+    "glass"
+  ],
+  "sharedFiles": [
+    "lib/kit.tsx",
+    "components/ui/glass.tsx"
+  ],
+  "filesDir": null
+}

package/registry/glass-segmented.json

@@ -0,0 +1,22 @@
+{
+  "name": "glass-segmented",
+  "type": "component",
+  "title": "Glass Segmented Control",
+  "description": "A Liquid Glass segmented control: a glass track with a brighter glass thumb that springs to the new segment, stretching in the direction of travel before it settles like a drop. Press the thumb and drag it across the segments — it follows your finger, ticks as it crosses each one and snaps to the nearest on release. Native-driver motion, Reduce Motion aware, monochrome unless you give it an accent.",
+  "tier": "pro",
+  "dependencies": [
+    "expo-glass-effect",
+    "expo-blur",
+    "react-native-svg",
+    "expo-haptics"
+  ],
+  "registryDependencies": [
+    "kit",
+    "glass"
+  ],
+  "sharedFiles": [
+    "lib/kit.tsx",
+    "components/ui/glass.tsx"
+  ],
+  "filesDir": null
+}

package/registry/glass-sheet.json

@@ -0,0 +1,22 @@
+{
+  "name": "glass-sheet",
+  "type": "component",
+  "title": "Glass Sheet",
+  "description": "iOS 26 floating glass sheet. Detached by default — it floats inset from the screen edges with big rounded corners — or docked edge-to-edge. It springs up over a fading dim, follows your finger from the grabber or the content, settles on the snap point projected from your release velocity (a fling down dismisses) with a haptic tick, and sizes itself to its content when no snap points are given; taller content scrolls. Real Liquid Glass on iOS 26, material blur on older iOS and web, a readable frosted surface on Android.",
+  "tier": "pro",
+  "dependencies": [
+    "expo-glass-effect",
+    "expo-blur",
+    "react-native-svg",
+    "expo-haptics"
+  ],
+  "registryDependencies": [
+    "kit",
+    "glass"
+  ],
+  "sharedFiles": [
+    "lib/kit.tsx",
+    "components/ui/glass.tsx"
+  ],
+  "filesDir": null
+}

package/registry/glass-tab-bar.json

@@ -0,0 +1,22 @@
+{
+  "name": "glass-tab-bar",
+  "type": "component",
+  "title": "Glass Tab Bar",
+  "description": "A floating Liquid Glass tab bar like iOS 26: a glass pill whose selected tab sits in a lighter bubble that springs between tabs, stretching as it travels and settling when it lands. Icons lift when selected, red count badges, optional labels and a separate circular trailing button (search) grouped with the bar so the two melt together on iOS 26. Real Liquid Glass on iOS 26, blur everywhere else; native-driver motion that respects Reduce Motion, selection haptics and a tablist for screen readers.",
+  "tier": "pro",
+  "dependencies": [
+    "expo-glass-effect",
+    "expo-blur",
+    "react-native-svg",
+    "expo-haptics"
+  ],
+  "registryDependencies": [
+    "kit",
+    "glass"
+  ],
+  "sharedFiles": [
+    "lib/kit.tsx",
+    "components/ui/glass.tsx"
+  ],
+  "filesDir": null
+}

package/registry/glass.json

@@ -0,0 +1,19 @@
+{
+  "name": "glass",
+  "type": "component",
+  "title": "Glass",
+  "description": "Liquid Glass for every device: real iOS 26 Liquid Glass (interactive, mergeable with GlassGroup), system material blur on older iOS, real blur on Android 12+ inside GlassProvider / GlassBackdrop (a frosted surface otherwise) and backdrop blur on web — with a specular rim, hairline edge and soft shadow wherever the glass is emulated. The base every glass component is built on.",
+  "tier": "pro",
+  "dependencies": [
+    "expo-glass-effect",
+    "expo-blur",
+    "react-native-svg"
+  ],
+  "registryDependencies": [
+    "kit"
+  ],
+  "sharedFiles": [
+    "lib/kit.tsx"
+  ],
+  "filesDir": null
+}

package/registry/inbox.json

@@ -0,0 +1,30 @@
+{
+  "name": "inbox",
+  "type": "block",
+  "title": "Inbox",
+  "description": "A messaging inbox: search, All / Unread / Mentions filter chips with counts, swipeable rows to archive, delete or mark read, unread count badges and a friendly empty state.",
+  "tier": "pro",
+  "dependencies": [
+    "react-native-svg",
+    "expo-haptics"
+  ],
+  "registryDependencies": [
+    "kit",
+    "avatar",
+    "badge",
+    "button",
+    "chip-group",
+    "search-bar",
+    "swipeable-row"
+  ],
+  "sharedFiles": [
+    "lib/kit.tsx",
+    "components/ui/avatar.tsx",
+    "components/ui/badge.tsx",
+    "components/ui/button.tsx",
+    "components/ui/chip-group.tsx",
+    "components/ui/search-bar.tsx",
+    "components/ui/swipeable-row.tsx"
+  ],
+  "filesDir": null
+}

package/registry/isometric-bar.json

@@ -0,0 +1,14 @@
+{
+  "name": "isometric-bar",
+  "type": "chart",
+  "title": "Isometric Bars",
+  "description": "3D bars with depth, shaded sides and lids; the tallest bar can be highlighted. Morphs between datasets. Built on expo-charts.",
+  "tier": "pro",
+  "dependencies": [
+    "expo-charts",
+    "react-native-svg"
+  ],
+  "registryDependencies": [],
+  "sharedFiles": [],
+  "filesDir": null
+}

package/registry/kit/files/src/lib/kit.tsx

@@ -0,0 +1,219 @@
+import React, { createContext, useContext, useMemo } from 'react';
+import { Platform, useColorScheme, type TextStyle } from 'react-native';
+
+/**
+ * ExpoKit design tokens. Every component reads them through useKit(), so one
+ * <KitProvider> (optional) re-skins the whole kit: light / dark, accent colour, radius.
+ * Without a provider, components follow the system colour scheme.
+ */
+
+/**
+ * Bumped whenever components start using a new kit API (2: radius.scale / radius.capsule).
+ * The CLI won't keep an edited kit.tsx older than the component being added needs.
+ */
+export const KIT_VERSION = 2;
+
+export type ColorScheme = 'light' | 'dark';
+
+export interface Colors {
+  background: string;
+  foreground: string;
+  /** Cards, sheets, inputs. */
+  card: string;
+  cardForeground: string;
+  /** Raised surfaces: popovers, toasts. */
+  popover: string;
+  muted: string;
+  mutedForeground: string;
+  border: string;
+  input: string;
+  primary: string;
+  primaryForeground: string;
+  secondary: string;
+  secondaryForeground: string;
+  accent: string;
+  accentForeground: string;
+  success: string;
+  warning: string;
+  danger: string;
+  dangerForeground: string;
+  ring: string;
+  overlay: string;
+}
+
+export interface Theme {
+  dark: boolean;
+  colors: Colors;
+  /** Corner radius scale. `radius.full` makes pills. */
+  radius: {
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+    full: number;
+    /** A corner designed at the default radius (12), scaled to the current one: `radius.scale(16)` is 16 at 12, 0 at 0. */
+    scale: (n: number) => number;
+    /** Corner for a bar or chip of height `h`: a pill at radius ≥ 12, softer below, square at 0. */
+    capsule: (h: number) => number;
+  };
+  /** 4pt spacing scale: space(4) === 16. */
+  space: (n: number) => number;
+  font: { family?: string; mono: string };
+  text: Record<'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl', TextStyle>;
+}
+
+const light: Colors = {
+  background: '#ffffff',
+  foreground: '#09090b',
+  card: '#ffffff',
+  cardForeground: '#09090b',
+  popover: '#ffffff',
+  muted: '#f4f4f5',
+  mutedForeground: '#71717a',
+  border: '#e4e4e7',
+  input: '#d4d4d8',
+  primary: '#18181b',
+  primaryForeground: '#fafafa',
+  secondary: '#f4f4f5',
+  secondaryForeground: '#18181b',
+  accent: '#18181b',
+  accentForeground: '#ffffff',
+  success: '#16a34a',
+  warning: '#f59e0b',
+  danger: '#e5484d',
+  dangerForeground: '#ffffff',
+  ring: '#18181b',
+  overlay: 'rgba(0,0,0,0.4)',
+};
+
+const dark: Colors = {
+  background: '#09090b',
+  foreground: '#fafafa',
+  card: '#111113',
+  cardForeground: '#fafafa',
+  popover: '#18181b',
+  muted: '#1c1c20',
+  mutedForeground: '#a1a1aa',
+  border: '#27272a',
+  input: '#34343a',
+  primary: '#fafafa',
+  primaryForeground: '#18181b',
+  secondary: '#1f1f23',
+  secondaryForeground: '#fafafa',
+  accent: '#fafafa',
+  accentForeground: '#09090b',
+  success: '#3dd68c',
+  warning: '#ffb224',
+  danger: '#ff6369',
+  dangerForeground: '#ffffff',
+  ring: '#d4d4d8',
+  overlay: 'rgba(0,0,0,0.6)',
+};
+
+export const palettes = { light, dark };
+
+function build(scheme: ColorScheme, overrides?: ThemeOverrides): Theme {
+  const base = scheme === 'dark' ? dark : light;
+  const accent = overrides?.accent;
+  const colors: Colors = {
+    ...base,
+    ...(accent ? { accent, ring: accent, accentForeground: readableOn(accent) } : null),
+    ...overrides?.colors?.[scheme],
+  };
+  const r = overrides?.radius ?? 12;
+  return {
+    dark: scheme === 'dark',
+    colors,
+    radius: {
+      sm: Math.round(r * 0.5),
+      md: r,
+      lg: Math.round(r * 1.35),
+      xl: Math.round(r * 1.8),
+      full: 999,
+      scale: (n) => Math.round((n * r) / 12),
+      capsule: (h) => Math.round((h / 2) * Math.min(1, r / 12)),
+    },
+    space: (n) => n * 4,
+    font: {
+      family: overrides?.fontFamily,
+      mono: Platform.select({ ios: 'Menlo', android: 'monospace', default: 'ui-monospace, SFMono-Regular, Menlo, monospace' })!,
+    },
+    text: {
+      xs: { fontSize: 12, lineHeight: 16 },
+      sm: { fontSize: 14, lineHeight: 20 },
+      md: { fontSize: 16, lineHeight: 22 },
+      lg: { fontSize: 18, lineHeight: 24, fontWeight: '400' },
+      xl: { fontSize: 22, lineHeight: 28, fontWeight: '400', letterSpacing: -0.3 },
+      xxl: { fontSize: 30, lineHeight: 36, fontWeight: '400', letterSpacing: -0.8 },
+    },
+  };
+}
+
+export interface ThemeOverrides {
+  /** Brand colour used for focus rings, selected states and accent buttons. */
+  accent?: string;
+  /** Base corner radius in points (default 12). */
+  radius?: number;
+  fontFamily?: string;
+  /** Override any token per scheme. */
+  colors?: Partial<Record<ColorScheme, Partial<Colors>>>;
+}
+
+const KitContext = createContext<{ scheme?: ColorScheme; overrides?: ThemeOverrides } | null>(null);
+
+export function KitProvider({
+  scheme,
+  children,
+  ...overrides
+}: ThemeOverrides & { scheme?: ColorScheme | 'system'; children: React.ReactNode }) {
+  const value = useMemo(
+    () => ({ scheme: scheme === 'system' ? undefined : scheme, overrides }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [scheme, overrides.accent, overrides.radius, overrides.fontFamily, overrides.colors]
+  );
+  return <KitContext.Provider value={value}>{children}</KitContext.Provider>;
+}
+
+export function useKit(): Theme {
+  const ctx = useContext(KitContext);
+  const system = useColorScheme();
+  const scheme: ColorScheme = ctx?.scheme ?? (system === 'dark' ? 'dark' : 'light');
+  return useMemo(() => build(scheme, ctx?.overrides), [scheme, ctx?.overrides]);
+}
+
+/** Shared motion presets so the whole kit moves the same way. */
+export const motion = {
+  /** Toggles, selection indicators. */
+  snappy: { damping: 18, stiffness: 260, mass: 0.8 },
+  /** Press feedback, pops. */
+  bouncy: { damping: 11, stiffness: 220, mass: 0.7 },
+  /** Sheets, layout changes. */
+  gentle: { damping: 22, stiffness: 160, mass: 1 },
+  fast: 160,
+  normal: 240,
+};
+
+/** Adds alpha to a #rrggbb colour: alpha('#6366f1', 0.2). */
+export function alpha(hex: string, a: number) {
+  if (!hex.startsWith('#') || (hex.length !== 7 && hex.length !== 4)) return hex;
+  const full = hex.length === 4 ? '#' + [...hex.slice(1)].map((c) => c + c).join('') : hex;
+  return full + Math.round(Math.max(0, Math.min(1, a)) * 255).toString(16).padStart(2, '0');
+}
+
+/** Black or white, whichever reads better on `hex`. */
+export function readableOn(hex: string) {
+  const full = hex.length === 4 ? '#' + [...hex.slice(1)].map((c) => c + c).join('') : hex;
+  const n = parseInt(full.slice(1, 7), 16);
+  if (Number.isNaN(n)) return '#ffffff';
+  const [r, g, b] = [(n >> 16) & 255, (n >> 8) & 255, n & 255];
+  return (r * 299 + g * 587 + b * 114) / 1000 > 150 ? '#09090b' : '#ffffff';
+}
+
+/**
+ * True for children that must be wrapped in <Text>: strings, numbers and arrays of them —
+ * `{count} new` is the array [3, ' new'], and raw text outside <Text> crashes on native.
+ */
+export function isTextNode(node: React.ReactNode): node is string | number | (string | number)[] {
+  if (typeof node === 'string' || typeof node === 'number') return true;
+  return Array.isArray(node) && node.length > 0 && node.every((n) => typeof n === 'string' || typeof n === 'number');
+}