@expokit/cli 0.2.0 → 0.3.0

package/registry/badge/files/src/components/ui/badge.tsx

@@ -1,10 +1,20 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { Animated, Easing, StyleSheet, Text, View, type StyleProp, type ViewStyle } from 'react-native';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import {
+  AccessibilityInfo,
+  Animated,
+  Easing,
+  StyleSheet,
+  Text,
+  View,
+  type LayoutChangeEvent,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
 import Svg, { Circle, Path } from 'react-native-svg';
 
 import { alpha, isTextNode, motion, readableOn, type Colors, useKit } from '@/lib/kit';
 
-export type BadgeIconName = 'bell' | 'message' | 'package' | 'cart' | 'heart';
+export type BadgeIconName = 'bell' | 'message' | 'package' | 'cart' | 'heart' | 'clock' | 'refresh' | 'check' | 'alert';
 
 const ICON_STROKE = { strokeWidth: 1.85, strokeLinecap: 'round' as const, strokeLinejoin: 'round' as const, fill: 'none' as const };
 
@@ -37,6 +47,20 @@ export function BadgeIcon({ name, color, size = 22 }: { name: BadgeIconName; col
         <Path d="M6 6L5 3H2" {...p} />
       </>
     ),
+    clock: (
+      <>
+        <Circle cx={12} cy={12} r={8.5} {...p} />
+        <Path d="M12 7.5V12l3 2" {...p} />
+      </>
+    ),
+    refresh: <Path d="M19 12a7 7 0 1 1-2.05-4.95M19 4.5V8h-3.5" {...p} />,
+    check: <Path d="M5 12.5l4.5 4.5L19 7.5" {...p} />,
+    alert: (
+      <>
+        <Circle cx={12} cy={12} r={8.5} {...p} />
+        <Path d="M12 7.5v5M12 16.2v.3" {...p} />
+      </>
+    ),
     heart: <Path d="M12 20.5l-1.1-1C6.1 15.1 3 12.2 3 8.6A4.6 4.6 0 0 1 7.6 4c2 0 3.1 1.2 4.4 2.5C13.3 5.2 14.4 4 16.4 4A4.6 4.6 0 0 1 21 8.6c0 3.6-3.1 6.5-7.9 10.9L12 20.5z" {...p} />,
   };
   return (
@@ -101,6 +125,11 @@ export interface BadgeProps {
   shape?: 'pill' | 'rounded';
   /** Pulse the leading dot (dot variant) — "live" states. */
   pulse?: boolean;
+  /**
+   * When the label, icon or colour changes: roll the old label up and the new one in, pop the icon,
+   * cross-fade the colours and spring the width (default true). Never animates on mount.
+   */
+  animateChanges?: boolean;
   style?: StyleProp<ViewStyle>;
 }
 
@@ -114,7 +143,139 @@ function toneColor(colors: Colors, tone: BadgeTone) {
   return { neutral: colors.mutedForeground, accent: colors.accent, success: colors.success, warning: colors.warning, danger: colors.danger }[tone];
 }
 
-/** Small status label: solid, soft, outline or dot — five tones, three sizes. */
+function useReduceMotion() {
+  const [reduce, setReduce] = useState(false);
+  useEffect(() => {
+    let alive = true;
+    AccessibilityInfo.isReduceMotionEnabled()
+      .then((r) => alive && setReduce(r))
+      .catch(() => {});
+    const sub = AccessibilityInfo.addEventListener('reduceMotionChanged', setReduce);
+    return () => {
+      alive = false;
+      sub.remove();
+    };
+  }, []);
+  return reduce;
+}
+
+interface Look {
+  bg: string;
+  fg: string;
+  border: string;
+  dot: string;
+}
+
+interface Change {
+  /** Outgoing label rolling up and out; the current label rolls in under it. */
+  text?: { from: string; fg: string; perLetter: boolean; duration: number };
+  /** Outgoing icon (null when an icon was just added). */
+  icon?: { from: React.ReactNode };
+  /** Colours being faded from. */
+  look?: Look;
+}
+
+/** Short Latin labels roll letter by letter; anything else (CJK, emoji, long text) rolls as one piece. */
+const LATIN = /^[A-Za-z0-9À-ɏ .,:;'’&+\-!?#%()/]{1,18}$/;
+/** Roll timing in ms: delay between letters, one letter's travel, and how far the new label trails the old. */
+const STAGGER = 24;
+const ROLL = 320;
+const LEAD = 70;
+
+function labelText(node: React.ReactNode): string | null {
+  if (!isTextNode(node)) return null;
+  return Array.isArray(node) ? node.join('') : String(node);
+}
+
+function sameValue(a: unknown, b: unknown) {
+  if (Object.is(a, b)) return true;
+  if (!a || !b || typeof a !== 'object' || typeof b !== 'object' || React.isValidElement(a) || React.isValidElement(b)) return false;
+  try {
+    return JSON.stringify(a) === JSON.stringify(b);
+  } catch {
+    return false;
+  }
+}
+
+/** Icons compare by type, key and props (ignoring colour), so an inline `<BadgeIcon />` only "changes" with its glyph. */
+function sameIcon(a: React.ReactNode, b: React.ReactNode) {
+  if (Object.is(a, b)) return true;
+  if (!React.isValidElement(a) || !React.isValidElement(b)) return false;
+  if (a.type !== b.type || a.key !== b.key) return false;
+  const pa = a.props as Record<string, unknown>;
+  const pb = b.props as Record<string, unknown>;
+  for (const k of new Set([...Object.keys(pa), ...Object.keys(pb)])) {
+    if (k !== 'color' && !sameValue(pa[k], pb[k])) return false;
+  }
+  return true;
+}
+
+/** Eased move from `from` to `to` while `v` runs start → end (held outside), sampled for the native driver. */
+function span(v: Animated.Value, start: number, end: number, from: number, to: number, ease: (t: number) => number) {
+  const inputRange: number[] = [];
+  const outputRange: number[] = [];
+  for (let k = 0; k <= 10; k++) {
+    inputRange.push(start + ((end - start) * k) / 10);
+    outputRange.push(from + (to - from) * ease(k / 10));
+  }
+  return v.interpolate({ inputRange, outputRange, extrapolate: 'clamp' });
+}
+
+const easeIn = Easing.in(Easing.cubic);
+const easeBack = Easing.out(Easing.back(1.7));
+const easeLinear = Easing.linear;
+
+/** One side of a label roll: letters (or the whole label) slide up out of / up into the clipped slot. */
+function RollingLabel({
+  text,
+  color,
+  fontSize,
+  progress,
+  out,
+  perLetter,
+  duration,
+}: {
+  text: string;
+  color: string;
+  fontSize: number;
+  progress: Animated.Value;
+  out: boolean;
+  perLetter: boolean;
+  duration: number;
+}) {
+  const pieces = perLetter ? [...text].map((ch) => (ch === ' ' ? ' ' : ch)) : [text];
+  const distance = Math.ceil(fontSize * 1.35);
+  return (
+    <View pointerEvents="none" style={styles.roll}>
+      {pieces.map((piece, i) => {
+        const begin = ((out ? 0 : LEAD) + i * STAGGER) / duration;
+        const travel = (out ? ROLL * 0.7 : ROLL) / duration;
+        const end = Math.min(1, begin + travel);
+        const fade = Math.min(1, begin + travel * 0.5);
+        return (
+          <Animated.View
+            key={i}
+            style={{
+              opacity: out ? span(progress, begin, fade, 1, 0, easeLinear) : span(progress, begin, fade, 0, 1, easeLinear),
+              transform: [
+                { translateY: out ? span(progress, begin, end, 0, -distance, easeIn) : span(progress, begin, end, distance, 0, easeBack) },
+              ],
+            }}
+          >
+            <Text numberOfLines={1} allowFontScaling={false} style={[styles.label, { color, fontSize }]}>
+              {piece}
+            </Text>
+          </Animated.View>
+        );
+      })}
+    </View>
+  );
+}
+
+/**
+ * Small status label: solid, soft, outline or dot — five tones, three sizes. When its text, icon or
+ * tone changes, the label rolls over, the icon pops, the colour cross-fades and the pill springs to size.
+ */
 export function Badge({
   children,
   variant = 'soft',
@@ -124,9 +285,11 @@ export function Badge({
   icon,
   shape = 'pill',
   pulse,
+  animateChanges = true,
   style,
 }: BadgeProps) {
   const { colors, radius, dark } = useKit();
+  const reduce = useReduceMotion();
   const s = SIZES[size];
   const c = color ?? toneColor(colors, tone);
   const neutral = !color && tone === 'neutral';
@@ -155,29 +318,167 @@ export function Badge({
   };
   const { bg, fg, border } = look[variant];
   const dotColor = neutral ? colors.mutedForeground : c;
+  const text = labelText(children);
+
+  // Change tracking: diff against the last render and start a transition — never on mount.
+  const [last, setLast] = useState({ seq: 0, text, icon, look: { bg, fg, border, dot: dotColor } as Look });
+  const [change, setChange] = useState<Change | null>(null);
+  // While set, the pill keeps this width (number), then springs (Animated.Value) to the new content.
+  const [pin, setPin] = useState<number | Animated.Value | null>(null);
+  const natural = useRef<number | null>(null);
+  const rowWidth = useRef<number | null>(null);
+  const widthV = useRef(new Animated.Value(0)).current;
+  const flat = StyleSheet.flatten(style) ?? {};
+  const canSize = flat.width == null && flat.minWidth == null && flat.flex == null && flat.flexGrow == null && flat.alignSelf !== 'stretch';
+
+  const textChanged = text !== last.text;
+  const iconChanged = !sameIcon(icon, last.icon);
+  const lookChanged = bg !== last.look.bg || fg !== last.look.fg || border !== last.look.border || dotColor !== last.look.dot;
+  if (textChanged || iconChanged || lookChanged) {
+    setLast({ seq: last.seq + 1, text, icon, look: { bg, fg, border, dot: dotColor } });
+    const next: Change = {};
+    if (animateChanges && !reduce) {
+      if (textChanged && last.text != null && text != null) {
+        const perLetter = LATIN.test(last.text) && LATIN.test(text);
+        const n = perLetter ? Math.max(last.text.length, text.length) : 1;
+        next.text = { from: last.text, fg: last.look.fg, perLetter, duration: LEAD + (n - 1) * STAGGER + ROLL };
+      }
+      if (iconChanged && icon != null) next.icon = { from: last.icon ?? null };
+      if (lookChanged) next.look = last.look;
+    }
+    const animated = !!(next.text || next.icon || next.look);
+    setChange(animated ? next : null);
+    setPin(animated && (textChanged || iconChanged) && canSize && natural.current != null ? natural.current : null);
+  }
+
+  // Fresh values per change, so the first frame of a transition already sits at its start.
+  const anim = useMemo(
+    () => ({ seq: last.seq, roll: new Animated.Value(0), pop: new Animated.Value(0), mix: new Animated.Value(0) }),
+    [last.seq]
+  );
 
-  const label =
-    isTextNode(children) ? (
-      <Text numberOfLines={1} allowFontScaling={false} style={[styles.label, { color: fg, fontSize: s.font }]}>
-        {children}
-      </Text>
+  useEffect(() => {
+    if (!change) return;
+    const runs: Animated.CompositeAnimation[] = [];
+    if (change.text) {
+      runs.push(Animated.timing(anim.roll, { toValue: 1, duration: change.text.duration, easing: easeLinear, useNativeDriver: true }));
+    }
+    if (change.icon) runs.push(Animated.spring(anim.pop, { toValue: 1, useNativeDriver: true, ...motion.bouncy }));
+    if (change.look) {
+      runs.push(Animated.timing(anim.mix, { toValue: 1, duration: motion.normal, easing: Easing.out(Easing.quad), useNativeDriver: false }));
+    }
+    let left = runs.length;
+    runs.forEach((r) =>
+      r.start(({ finished }) => {
+        left -= 1;
+        if (finished && left === 0) setChange((cur) => (cur === change ? null : cur));
+      })
+    );
+    return () => runs.forEach((r) => r.stop());
+  }, [change, anim]);
+
+  const onRoot = (e: LayoutChangeEvent) => {
+    if (pin == null) natural.current = e.nativeEvent.layout.width;
+  };
+  // The icon + label row remounts on every change, so this always reports the new content's width.
+  const onRow = (e: LayoutChangeEvent) => {
+    const w = e.nativeEvent.layout.width;
+    const prev = rowWidth.current;
+    rowWidth.current = w;
+    if (typeof pin !== 'number') return;
+    if (prev == null || Math.abs(w - prev) < 0.5) {
+      setPin(null);
+      return;
+    }
+    const to = Math.max(0, pin + (w - prev));
+    widthV.setValue(pin);
+    natural.current = to;
+    setPin(widthV);
+    Animated.spring(widthV, { toValue: to, useNativeDriver: false, ...motion.snappy }).start(({ finished }) => {
+      if (finished) setPin((p) => (p === widthV ? null : p));
+    });
+  };
+
+  const from = change?.look;
+  const mix = (a: string, b: string) => (from ? anim.mix.interpolate({ inputRange: [0, 1], outputRange: [a, b] }) : b);
+  const roll = change?.text;
+
+  let label: React.ReactNode = children;
+  if (text != null) {
+    label = (
+      <View style={roll ? styles.clip : undefined}>
+        <Animated.Text
+          numberOfLines={1}
+          allowFontScaling={false}
+          style={[styles.label, { color: from && !roll ? mix(from.fg, fg) : fg, fontSize: s.font }, roll ? styles.hidden : null]}
+        >
+          {text}
+        </Animated.Text>
+        {roll ? (
+          <>
+            <RollingLabel text={roll.from} color={roll.fg} fontSize={s.font} progress={anim.roll} out perLetter={roll.perLetter} duration={roll.duration} />
+            <RollingLabel text={text} color={fg} fontSize={s.font} progress={anim.roll} out={false} perLetter={roll.perLetter} duration={roll.duration} />
+          </>
+        ) : null}
+      </View>
+    );
+  }
+
+  const pop = anim.pop;
+  const iconNode =
+    icon != null && change?.icon ? (
+      <View>
+        {change.icon.from != null ? (
+          <Animated.View
+            pointerEvents="none"
+            style={[
+              styles.center,
+              {
+                opacity: pop.interpolate({ inputRange: [0, 0.4], outputRange: [1, 0], extrapolate: 'clamp' }),
+                transform: [
+                  { scale: pop.interpolate({ inputRange: [0, 0.5], outputRange: [1, 0.3], extrapolate: 'clamp' }) },
+                  { rotate: pop.interpolate({ inputRange: [0, 0.5], outputRange: ['0deg', '100deg'], extrapolate: 'clamp' }) },
+                ],
+              },
+            ]}
+          >
+            {change.icon.from}
+          </Animated.View>
+        ) : null}
+        <Animated.View
+          style={{
+            opacity: pop.interpolate({ inputRange: [0, 0.35], outputRange: [0, 1], extrapolate: 'clamp' }),
+            transform: [
+              { scale: pop.interpolate({ inputRange: [0, 1], outputRange: [0.3, 1] }) },
+              { rotate: pop.interpolate({ inputRange: [0, 1], outputRange: ['-100deg', '0deg'] }) },
+            ],
+          }}
+        >
+          {icon}
+        </Animated.View>
+      </View>
     ) : (
-      children
+      icon
     );
 
   return (
-    <View
+    <Animated.View
+      accessible={text != null ? true : undefined}
       accessibilityRole="text"
+      accessibilityLabel={text ?? undefined}
+      accessibilityLiveRegion={animateChanges && text != null ? 'polite' : undefined}
+      onLayout={animateChanges ? onRoot : undefined}
       style={[
         styles.base,
         {
           height: s.h,
           paddingHorizontal: s.px,
           gap: s.gap,
-          backgroundColor: bg,
-          borderColor: border,
+          backgroundColor: from ? mix(from.bg, bg) : bg,
+          borderColor: from ? mix(from.border, border) : border,
           borderRadius: shape === 'pill' ? radius.capsule(s.h) : radius.sm,
         },
+        pin != null ? { width: pin, overflow: 'hidden' as const } : null,
         style,
       ]}
     >
@@ -196,12 +497,15 @@ export function Badge({
               ]}
             />
           ) : null}
-          <View style={[styles.fill, { borderRadius: s.dot, backgroundColor: dotColor }]} />
+          {/* Colour fades on the JS driver, so it lives on this view — the pulse above owns the native transforms. */}
+          <Animated.View style={[styles.fill, { borderRadius: s.dot, backgroundColor: from ? mix(from.dot, dotColor) : dotColor }]} />
         </View>
       ) : null}
-      {icon}
-      {label}
-    </View>
+      <View key={last.seq} onLayout={animateChanges ? onRow : undefined} style={[styles.row, { gap: s.gap }]}>
+        {iconNode}
+        {label}
+      </View>
+    </Animated.View>
   );
 }
 
@@ -309,6 +613,12 @@ export function NotificationBadge({
 const styles = StyleSheet.create({
   base: { flexDirection: 'row', alignItems: 'center', alignSelf: 'flex-start', borderWidth: 1 },
   label: { fontWeight: '400', letterSpacing: 0.1 },
+  row: { flexDirection: 'row', alignItems: 'center' },
+  // Clips the roll; the 2pt slack (cancelled by negative margins) keeps overshoot and unkerned letters whole.
+  clip: { overflow: 'hidden', padding: 2, margin: -2 },
+  hidden: { opacity: 0 },
+  roll: { position: 'absolute', top: 2, left: 2, flexDirection: 'row' },
+  center: { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, alignItems: 'center', justifyContent: 'center' },
   fill: { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 },
   anchor: { alignSelf: 'flex-start' },
   bubble: { alignItems: 'center', justifyContent: 'center', borderWidth: 2 },

package/registry/badge.json

@@ -2,7 +2,7 @@
   "name": "badge",
   "type": "component",
   "title": "Badge",
-  "description": "Status labels in solid, soft, outline and dot styles across five tones — plus NotificationBadge with BadgeIconTile/BadgeIcon anchors (or your own children), spring-in counts, and pop on change.",
+  "description": "Status labels in solid, soft, outline and dot styles across five tones — when the label changes it rolls over letter by letter, the icon pops, the colour cross-fades and the pill springs to its new width. Plus NotificationBadge with BadgeIconTile/BadgeIcon anchors (or your own children), spring-in counts, and pop on change.",
   "tier": "free",
   "dependencies": [
     "react-native-svg"

package/registry/chat.json

@@ -0,0 +1,18 @@
+{
+  "name": "chat",
+  "type": "block",
+  "title": "Chat",
+  "description": "An AI assistant chat screen: replies stream in word by word with a soft fade and a blinking caret, a shimmering “Thinking…” waits for the first token, and the send button morphs into Stop. Light markdown (bold, inline code, lists, scrollable code blocks), suggestion chips, copy / regenerate / thumbs actions and a prompt field that grows to five lines and stays above the keyboard.",
+  "tier": "pro",
+  "dependencies": [
+    "react-native-svg",
+    "expo-haptics"
+  ],
+  "registryDependencies": [
+    "kit"
+  ],
+  "sharedFiles": [
+    "lib/kit.tsx"
+  ],
+  "filesDir": null
+}