@lockin90/ui-native 0.0.0-stage → 1.0.1

package/src/components/AuroraBackground.tsx

@@ -0,0 +1,198 @@
+import { useEffect, useRef, useState } from 'react';
+import {
+  Animated,
+  Easing,
+  StyleSheet,
+  View,
+  type LayoutChangeEvent,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+import Svg, { Circle, Defs, Line, RadialGradient, Rect, Stop } from 'react-native-svg';
+import { colors } from '@lockin90/tokens';
+
+export interface AuroraBackgroundProps {
+  /** Intensity of the drifting blobs + grid veil. Default `'default'`. */
+  variant?: 'default' | 'subtle' | 'vivid';
+  /** Overlay the faint grid veil. Default `true`. */
+  grid?: boolean;
+  /** Disable the slow blob drift (matches web `prefers-reduced-motion`); blobs go static. */
+  still?: boolean;
+  style?: StyleProp<ViewStyle>;
+}
+
+/**
+ * Aurora Flux backdrop (native twin of the web `.lk-aurora`) — three drifting
+ * energy-spectrum gradient blobs (violet → cyan → magenta) over a static radial
+ * wash, with an optional faint grid veil. An absolute-fill, `pointerEvents:'none'`
+ * layer that sits behind app content; drop it in as the first child of a screen
+ * whose content establishes its own stacking context.
+ *
+ * The blobs are SVG radial gradients (soft edge → transparent, no native blur
+ * filter needed) each wrapped in an `Animated.View` whose translate is animated
+ * with the native driver, so the drift is smooth + cheap. `still` (or an intensity
+ * of `subtle`) keeps it calm.
+ */
+export function AuroraBackground({
+  variant = 'default',
+  grid = true,
+  still = false,
+  style,
+}: AuroraBackgroundProps) {
+  const [size, setSize] = useState<{ w: number; h: number } | null>(null);
+  const intensity = variant === 'subtle' ? 0.55 : variant === 'vivid' ? 1 : 0.78;
+
+  const onLayout = (e: LayoutChangeEvent) => {
+    const { width, height } = e.nativeEvent.layout;
+    if (width && height && (width !== size?.w || height !== size?.h)) {
+      setSize({ w: Math.ceil(width), h: Math.ceil(height) });
+    }
+  };
+
+  return (
+    <View
+      style={[styles.root, style]}
+      onLayout={onLayout}
+      pointerEvents="none"
+      accessible={false}
+      accessibilityElementsHidden
+      importantForAccessibility="no-hide-descendants"
+    >
+      {size ? (
+        <>
+          {/* static radial wash — a faint indigo bloom from the upper area */}
+          <Svg width={size.w} height={size.h} style={StyleSheet.absoluteFill}>
+            <Defs>
+              <RadialGradient id="lk-aurora-wash" cx="32%" cy="8%" r="90%">
+                <Stop offset="0" stopColor="#7C5CFF" stopOpacity={0.16 * intensity} />
+                <Stop offset="0.5" stopColor="#22D3EE" stopOpacity={0.05 * intensity} />
+                <Stop offset="1" stopColor={colors.void} stopOpacity={0} />
+              </RadialGradient>
+            </Defs>
+            <Rect x={0} y={0} width={size.w} height={size.h} fill="url(#lk-aurora-wash)" />
+          </Svg>
+
+          {BLOBS.map((b, i) => (
+            <Blob key={i} blob={b} size={size} intensity={intensity} still={still} index={i} />
+          ))}
+
+          {grid ? <GridVeil size={size} intensity={intensity} /> : null}
+        </>
+      ) : null}
+    </View>
+  );
+}
+
+interface BlobDef {
+  color: string;
+  /** radius as a fraction of the container's larger side */
+  r: number;
+  /** center position as a fraction of width/height */
+  cx: number;
+  cy: number;
+  /** peak drift in px (±) on each axis */
+  drift: { x: number; y: number };
+  /** loop duration in ms — staggered so the blobs never sync up */
+  dur: number;
+}
+
+const BLOBS: BlobDef[] = [
+  { color: '#7C5CFF', r: 0.62, cx: 0.2, cy: 0.16, drift: { x: 26, y: 34 }, dur: 17000 },
+  { color: '#22D3EE', r: 0.54, cx: 0.84, cy: 0.3, drift: { x: -30, y: 26 }, dur: 21000 },
+  { color: '#FF3D81', r: 0.66, cx: 0.62, cy: 0.9, drift: { x: 22, y: -30 }, dur: 25000 },
+];
+
+function Blob({
+  blob,
+  size,
+  intensity,
+  still,
+  index,
+}: {
+  blob: BlobDef;
+  size: { w: number; h: number };
+  intensity: number;
+  still: boolean;
+  index: number;
+}) {
+  const anim = useRef(new Animated.Value(0.5)).current;
+
+  useEffect(() => {
+    if (still) return;
+    const loop = Animated.loop(
+      Animated.sequence([
+        Animated.timing(anim, {
+          toValue: 1,
+          duration: blob.dur,
+          easing: Easing.inOut(Easing.sin),
+          useNativeDriver: true,
+        }),
+        Animated.timing(anim, {
+          toValue: 0,
+          duration: blob.dur,
+          easing: Easing.inOut(Easing.sin),
+          useNativeDriver: true,
+        }),
+      ]),
+    );
+    loop.start();
+    return () => loop.stop();
+  }, [anim, blob.dur, still]);
+
+  const d = Math.round(blob.r * Math.max(size.w, size.h));
+  const left = Math.round(blob.cx * size.w - d / 2);
+  const top = Math.round(blob.cy * size.h - d / 2);
+  const id = `lk-aurora-blob-${index}`;
+
+  const translateX = anim.interpolate({ inputRange: [0, 1], outputRange: [-blob.drift.x, blob.drift.x] });
+  const translateY = anim.interpolate({ inputRange: [0, 1], outputRange: [-blob.drift.y, blob.drift.y] });
+
+  return (
+    <Animated.View
+      style={{ position: 'absolute', left, top, width: d, height: d, transform: [{ translateX }, { translateY }] }}
+    >
+      <Svg width={d} height={d}>
+        <Defs>
+          <RadialGradient id={id} cx="50%" cy="50%" r="50%">
+            <Stop offset="0" stopColor={blob.color} stopOpacity={0.8 * intensity} />
+            <Stop offset="0.5" stopColor={blob.color} stopOpacity={0.28 * intensity} />
+            <Stop offset="1" stopColor={blob.color} stopOpacity={0} />
+          </RadialGradient>
+        </Defs>
+        <Circle cx={d / 2} cy={d / 2} r={d / 2} fill={`url(#${id})`} />
+      </Svg>
+    </Animated.View>
+  );
+}
+
+/** faint uniform grid, fading toward the bottom to mimic the web mask. */
+function GridVeil({ size, intensity }: { size: { w: number; h: number }; intensity: number }) {
+  const step = 40;
+  const stroke = `rgba(255,255,255,${0.03 * intensity})`;
+  const cols = Math.ceil(size.w / step);
+  const rows = Math.ceil(size.h / step);
+  return (
+    <Svg width={size.w} height={size.h} style={StyleSheet.absoluteFill}>
+      <Defs>
+        <RadialGradient id="lk-aurora-grid-fade" cx="50%" cy="0%" r="120%">
+          <Stop offset="0" stopColor="#ffffff" stopOpacity={1} />
+          <Stop offset="1" stopColor="#ffffff" stopOpacity={0} />
+        </RadialGradient>
+      </Defs>
+      {Array.from({ length: cols + 1 }, (_, i) => (
+        <Line key={`v${i}`} x1={i * step} y1={0} x2={i * step} y2={size.h} stroke={stroke} strokeWidth={1} />
+      ))}
+      {Array.from({ length: rows + 1 }, (_, i) => (
+        <Line key={`h${i}`} x1={0} y1={i * step} x2={size.w} y2={i * step} stroke={stroke} strokeWidth={1} />
+      ))}
+    </Svg>
+  );
+}
+
+const styles = StyleSheet.create({
+  root: {
+    ...StyleSheet.absoluteFillObject,
+    overflow: 'hidden',
+    backgroundColor: colors.void,
+  },
+});

package/src/components/Avatar.tsx

@@ -0,0 +1,164 @@
+import { useEffect, useRef } from 'react';
+import { View, Text, Image, Animated, Easing, StyleSheet, type ViewProps } from 'react-native';
+import { LinearGradient } from 'expo-linear-gradient';
+import { colors, fonts, gradients, nativeShadows } from '@lockin90/tokens';
+
+export interface AvatarProps extends ViewProps {
+  /** Display name — used to derive monogram initials when `initials` is omitted. */
+  name?: string;
+  /** Explicit monogram initials; overrides the value derived from `name`. */
+  initials?: string;
+  /** Image URL. When present, an `<Image>` is rendered instead of the monogram. */
+  src?: string;
+  /** Pixel size of the square avatar. @default 44 */
+  size?: number;
+  /** Outline shape — a full circle or a softly-rounded square. @default 'circle' */
+  shape?: 'circle' | 'rounded';
+  /**
+   * Visual variant.
+   * - `'default'` — image / monogram identity tile (a real user).
+   * - `'aura'` — an energy-spectrum flux orb for the AI coach (Aura); ignores
+   *   `src`/`initials`/`name`/`gradient` and renders the `gradients.flux` stops
+   *   with `nativeShadows.glowAccent`.
+   * @default 'default'
+   */
+  variant?: 'default' | 'aura';
+  /**
+   * Monogram tile gradient as ordered color stops (native can't parse CSS
+   * gradient strings). @default violet→cyan flux gradient
+   */
+  gradient?: readonly [string, string, ...string[]];
+}
+
+/** First letters of up to two words, uppercased; `'?'` when empty. */
+function initialsFor(name: string): string {
+  const derived = name
+    .split(/\s+/)
+    .filter(Boolean)
+    .slice(0, 2)
+    .map((w) => w[0]!.toUpperCase())
+    .join('');
+  return derived || '?';
+}
+
+/**
+ * Avatar — a standalone identity tile showing either an image or a monogram
+ * (initials painted on the flux gradient). Square by `size`, circular by
+ * default or softly rounded via `shape="rounded"`. The monogram falls back to
+ * initials derived from `name`, then to `'?'`.
+ *
+ * `variant="aura"` renders an energy-spectrum flux orb (no image/monogram) for
+ * the AI coach — use it ONLY for Aura, never a human user.
+ */
+export function Avatar({
+  name,
+  initials,
+  src,
+  size = 44,
+  shape = 'circle',
+  variant = 'default',
+  gradient = gradients.cta.stops,
+  style,
+  ...rest
+}: AvatarProps) {
+  const radius = shape === 'rounded' ? size * 0.3 : size / 2;
+  const box = { width: size, height: size, borderRadius: radius };
+
+  if (variant === 'aura') {
+    return <AuraOrb size={size} radius={radius} name={name} style={style} {...rest} />;
+  }
+
+  return (
+    <View style={[styles.avatar, box, style]} {...rest}>
+      {src ? (
+        <Image source={{ uri: src }} style={styles.img} resizeMode="cover" />
+      ) : (
+        <LinearGradient
+          colors={gradient as unknown as [string, string]}
+          start={{ x: 0, y: 0 }}
+          end={{ x: 1, y: 1 }}
+          style={styles.mono}
+        >
+          <Text style={[styles.monoText, { fontSize: Math.round(size * 0.38) }]}>
+            {initials ?? initialsFor(name ?? '')}
+          </Text>
+        </LinearGradient>
+      )}
+    </View>
+  );
+}
+
+/**
+ * AuraOrb — the AI coach (Aura) tile: an energy-spectrum `gradients.flux` orb
+ * under a soft `nativeShadows.glowAccent`. The gradient layer is oversized
+ * (1.5×) and slowly rotated on the native driver so the spectrum swirls like
+ * flowing energy without ever revealing an edge; the parent clips it to the
+ * circle. Non-blocking — the loop runs entirely off the JS thread.
+ */
+function AuraOrb({
+  size,
+  radius,
+  name,
+  style,
+  ...rest
+}: { size: number; radius: number; name?: string } & ViewProps) {
+  const spin = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    const loop = Animated.loop(
+      Animated.timing(spin, {
+        toValue: 1,
+        duration: 9000,
+        easing: Easing.linear,
+        useNativeDriver: true,
+      }),
+    );
+    loop.start();
+    return () => loop.stop();
+  }, [spin]);
+
+  const rotate = spin.interpolate({ inputRange: [0, 1], outputRange: ['0deg', '360deg'] });
+
+  // oversize the rotating gradient so the clipped circle is always covered
+  const fluxSize = size * 1.5;
+  const offset = -(fluxSize - size) / 2;
+
+  return (
+    <View
+      style={[styles.auraGlow, { width: size, height: size, borderRadius: radius }, style]}
+      accessibilityRole="image"
+      accessibilityLabel={name ?? 'Aura'}
+      {...rest}
+    >
+      <View style={[styles.auraOrb, { borderRadius: radius }]}>
+        <Animated.View
+          style={{
+            position: 'absolute',
+            top: offset,
+            left: offset,
+            width: fluxSize,
+            height: fluxSize,
+            transform: [{ rotate }],
+          }}
+        >
+          <LinearGradient
+            colors={gradients.flux.stops as unknown as [string, string]}
+            start={{ x: 0, y: 0 }}
+            end={{ x: 1, y: 1 }}
+            style={StyleSheet.absoluteFill}
+          />
+        </Animated.View>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  avatar: { overflow: 'hidden' },
+  img: { width: '100%', height: '100%' },
+  mono: { flex: 1, alignItems: 'center', justifyContent: 'center' },
+  monoText: { fontFamily: fonts.display, fontWeight: '700', color: '#07080d', letterSpacing: -0.3 },
+  // backgroundColor anchors the glow's shape on iOS; it's fully hidden by the orb
+  auraGlow: { alignItems: 'center', justifyContent: 'center', backgroundColor: colors.void, ...nativeShadows.glowAccent },
+  auraOrb: { ...StyleSheet.absoluteFillObject, overflow: 'hidden' },
+});

package/src/components/AvatarStack.tsx

@@ -0,0 +1,94 @@
+import { View, Text, StyleSheet, type ViewProps } from 'react-native';
+import { colors, fonts } from '@lockin90/tokens';
+import { Avatar, type AvatarProps } from './Avatar';
+
+/** Per-avatar props forwarded to the composed {@link Avatar}. */
+export type AvatarStackItem = Pick<AvatarProps, 'name' | 'initials' | 'src' | 'gradient'>;
+
+export interface AvatarStackProps extends ViewProps {
+  /** Roster entries — each forwarded to a composed `Avatar`. */
+  avatars: AvatarStackItem[];
+  /** Cap of visible avatars; the remainder collapse into a trailing "+N" chip. @default 4 */
+  max?: number;
+  /** Pixel diameter of each avatar. @default 32 */
+  size?: number;
+  /**
+   * Ring/gap color drawn between overlapping avatars so they read as separate.
+   * @default colors.bg1
+   */
+  ring?: string;
+}
+
+/**
+ * AvatarStack — a row of overlapping circular avatars with a trailing "+N"
+ * overflow chip; social proof / multi-author / roster. Composes {@link Avatar}
+ * for each entry, overlaps them with a negative `marginLeft` + descending
+ * `zIndex`, and draws a border in the surrounding background color so each tile
+ * reads as separate. Anything beyond `max` collapses into a same-size "+N" chip.
+ */
+export function AvatarStack({
+  avatars,
+  max = 4,
+  size = 32,
+  ring = colors.bg1,
+  style,
+  ...rest
+}: AvatarStackProps) {
+  const visible = avatars.slice(0, max);
+  const overflow = avatars.length - visible.length;
+  // Overlap ≈ a third of the diameter; border thickness scales gently with size.
+  const overlap = -Math.round(size * 0.32);
+  const borderWidth = Math.max(2, Math.round(size * 0.06));
+  const ringStyle = { borderWidth, borderColor: ring };
+
+  return (
+    <View style={[styles.row, style]} {...rest}>
+      {visible.map((a, i) => (
+        <View
+          key={i}
+          style={{ marginLeft: i === 0 ? 0 : overlap, zIndex: visible.length - i }}
+        >
+          <Avatar
+            {...a}
+            size={size}
+            style={[styles.ring, ringStyle, { width: size + borderWidth * 2, height: size + borderWidth * 2 }]}
+          />
+        </View>
+      ))}
+      {overflow > 0 && (
+        <View style={{ marginLeft: overlap, zIndex: 0 }}>
+          <View
+            style={[
+              styles.more,
+              ringStyle,
+              {
+                width: size + borderWidth * 2,
+                height: size + borderWidth * 2,
+                borderRadius: (size + borderWidth * 2) / 2,
+              },
+            ]}
+          >
+            <Text style={[styles.moreText, { fontSize: Math.round(size * 0.36) }]}>+{overflow}</Text>
+          </View>
+        </View>
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  row: { flexDirection: 'row', alignItems: 'center' },
+  ring: { borderRadius: 999 },
+  more: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: colors.glass2,
+    borderColor: colors.border2,
+  },
+  moreText: {
+    fontFamily: fonts.display,
+    fontWeight: '700',
+    color: colors.textDim,
+    letterSpacing: -0.3,
+  },
+});

package/src/components/BackLink.tsx

@@ -0,0 +1,64 @@
+import { Pressable, Text, StyleSheet, type PressableProps, type StyleProp, type ViewStyle } from 'react-native';
+import { colors, fonts, radii } from '@lockin90/tokens';
+import { Icon } from './Icon';
+
+export interface BackLinkProps extends Omit<PressableProps, 'children' | 'style' | 'onPress'> {
+  /** Visible label after the chevron. @default 'Back' */
+  label?: string;
+  /** Mirrors the web `onClick`; fired on press. */
+  onClick?: () => void;
+  style?: StyleProp<ViewStyle>;
+  /**
+   * Visual variant.
+   * - `'default'` — flat accent text link (the original look).
+   * - `'pill'` — glass-chip mono affordance (bordered glass surface, dim mono
+   *   label). Mirrors the web `variant="pill"`; hover is web-only, press
+   *   feedback is preserved.
+   * @default 'default'
+   */
+  variant?: 'default' | 'pill';
+}
+
+/** "‹ Back" navigation affordance — chevron-left glyph + label, in accent. */
+export function BackLink({ label = 'Back', onClick, style, variant = 'default', ...rest }: BackLinkProps) {
+  const isPill = variant === 'pill';
+  const iconColor = isPill ? colors.textDim : colors.accent;
+  const iconSize = isPill ? 14 : 18;
+  return (
+    <Pressable
+      accessibilityRole="button"
+      onPress={onClick}
+      style={({ pressed }) => [
+        isPill ? pillStyles.row : styles.row,
+        pressed && styles.pressed,
+        style,
+      ]}
+      {...rest}
+    >
+      <Icon name="back" size={iconSize} color={iconColor} />
+      <Text style={isPill ? pillStyles.label : styles.label}>{label}</Text>
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  row: { flexDirection: 'row', alignItems: 'center', gap: 4, paddingVertical: 4, paddingHorizontal: 2 },
+  pressed: { opacity: 0.7 },
+  label: { color: colors.accent, fontFamily: fonts.ui, fontSize: 14.5, fontWeight: '600' },
+});
+
+const pillStyles = StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 7,
+    paddingVertical: 7,
+    paddingHorizontal: 13,
+    borderWidth: 1,
+    borderColor: colors.border,
+    backgroundColor: colors.glass,
+    borderRadius: radii.pill,
+    alignSelf: 'flex-start',
+  },
+  label: { color: colors.textDim, fontFamily: fonts.mono, fontSize: 11.5, fontWeight: '400' },
+});

package/src/components/Badge.tsx

@@ -0,0 +1,91 @@
+import { View, Text, StyleSheet, type ViewProps } from 'react-native';
+import { LinearGradient } from 'expo-linear-gradient';
+import { colors, radii, fonts, gradients } from '@lockin90/tokens';
+
+export type BadgeTone = 'accent' | 'high' | 'mid' | 'low' | 'neutral';
+
+export interface BadgeProps extends ViewProps {
+  /** count or short status text (ignored when `dot`) */
+  children?: string | number;
+  tone?: BadgeTone;
+  /** render as a bare glowing dot, no text */
+  dot?: boolean;
+}
+
+const TONE: Record<BadgeTone, { color: string; bg: string; border: string; glow: string }> = {
+  accent: { color: '#0A0A12', bg: colors.accent, border: 'transparent', glow: colors.accent },
+  high: { color: colors.zoneHigh, bg: 'rgba(52,245,197,0.10)', border: 'rgba(52,245,197,0.35)', glow: colors.zoneHigh },
+  mid: { color: colors.zoneMid, bg: 'rgba(255,176,32,0.10)', border: 'rgba(255,176,32,0.35)', glow: colors.zoneMid },
+  low: { color: colors.zoneLow, bg: 'rgba(255,77,109,0.10)', border: 'rgba(255,77,109,0.35)', glow: colors.zoneLow },
+  neutral: { color: colors.textDim, bg: colors.glass2, border: colors.border, glow: colors.textFaint },
+};
+
+/** Tiny count/status pill — smaller + simpler than Chip; or a `dot` indicator. */
+export function Badge({ children = '3', tone = 'accent', dot, style, ...rest }: BadgeProps) {
+  const t = TONE[tone];
+
+  if (dot) {
+    const noGlow = tone === 'neutral';
+    return (
+      <View
+        style={[
+          styles.dot,
+          { backgroundColor: t.glow },
+          !noGlow && { shadowColor: t.glow, shadowOpacity: 1, shadowRadius: 4 },
+          style,
+        ]}
+        {...rest}
+      />
+    );
+  }
+
+  // accent fills with the CTA gradient
+  if (tone === 'accent') {
+    return (
+      <View style={[styles.badge, { alignSelf: 'flex-start' }, style]} {...rest}>
+        <LinearGradient
+          colors={gradients.cta.stops as unknown as [string, string]}
+          start={{ x: 0, y: 0 }}
+          end={{ x: 1, y: 1 }}
+          style={StyleSheet.absoluteFill}
+        />
+        <Text style={[styles.label, { color: t.color }]}>{children}</Text>
+      </View>
+    );
+  }
+
+  return (
+    <View
+      style={[styles.badge, { backgroundColor: t.bg, borderColor: t.border, borderWidth: 1 }, style]}
+      {...rest}
+    >
+      <Text style={[styles.label, { color: t.color }]}>{children}</Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  badge: {
+    minWidth: 16,
+    height: 16,
+    paddingHorizontal: 6,
+    borderRadius: radii.pill,
+    alignItems: 'center',
+    justifyContent: 'center',
+    alignSelf: 'flex-start',
+    overflow: 'hidden',
+  },
+  label: {
+    fontFamily: fonts.mono,
+    fontSize: 10,
+    fontWeight: '600',
+    lineHeight: 12,
+  },
+  dot: {
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+    alignSelf: 'flex-start',
+    shadowOffset: { width: 0, height: 0 },
+  },
+});