@expokit/cli 0.2.0 → 0.4.0

package/registry/tag-input/files/src/components/ui/tag-input.tsx

@@ -1,720 +0,0 @@
-import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
-import {
-  Animated,
-  Easing,
-  Platform,
-  Pressable,
-  ScrollView,
-  StyleSheet,
-  Text,
-  TextInput,
-  View,
-  type StyleProp,
-  type TextInputProps,
-  type ViewStyle,
-} from 'react-native';
-import Svg, { Circle, Path } from 'react-native-svg';
-
-import { alpha, motion, readableOn, useKit } from '@/lib/kit';
-
-export type TagInputVariant = 'outlined' | 'filled';
-export type TagChipVariant = 'soft' | 'solid' | 'outline';
-
-export interface TagInputProps
-  extends Omit<TextInputProps, 'style' | 'value' | 'defaultValue' | 'onChange' | 'onChangeText' | 'multiline'> {
-  value?: string[];
-  defaultValue?: string[];
-  onChange?: (tags: string[]) => void;
-  /** Field style. */
-  variant?: TagInputVariant;
-  /** Chip style. */
-  chipVariant?: TagChipVariant;
-  /** Tint each chip with a colour picked from a hash of its label. */
-  colorize?: boolean;
-  /** Text drawn before every chip label, e.g. '#'. Typed copies of it are stripped. */
-  prefix?: string;
-  /** Normalise a tag before it is validated and added (e.g. lowercase, strip spaces). */
-  transform?: (tag: string) => string;
-  /** Stop accepting tags after this many (a "3/5" counter appears under the field). */
-  maxTags?: number;
-  /** Tappable suggestions: a row of pills while the field is empty, a list with highlighted matches while typing. */
-  suggestions?: string[];
-  /** Characters that commit the typed text as a tag (Enter always does). Default [',']. */
-  separators?: string[];
-  /** Return false (or an error message) to reject a tag — the field shakes. */
-  validate?: (tag: string, tags: string[]) => boolean | string;
-  /** Hint under the field (hidden while an error is shown). */
-  helper?: string;
-  error?: string;
-  /** Focus and chip colour (default: theme accent). */
-  accent?: string;
-  style?: StyleProp<ViewStyle>;
-}
-
-const same = (a: string, b: string) => a.toLowerCase() === b.toLowerCase();
-const PALETTE = ['#6366f1', '#ec4899', '#f59e0b', '#10b981', '#0ea5e9', '#8b5cf6', '#ef4444', '#14b8a6'];
-const hashColor = (s: string) => {
-  let h = 0;
-  for (let i = 0; i < s.length; i++) h = (h * 31 + s.toLowerCase().charCodeAt(i)) | 0;
-  return PALETTE[Math.abs(h) % PALETTE.length];
-};
-/**
- * The order chips are drawn in: the current tags, plus tags that were just removed (and are still
- * shrinking out) slotted back in after the chip they used to follow.
- */
-const mergeOrder = (prev: string[], tags: string[]) => {
-  const out = [...tags];
-  prev.forEach((t, i) => {
-    if (out.includes(t)) return;
-    let at = 0;
-    for (let j = i - 1; j >= 0; j--) {
-      const k = out.indexOf(prev[j]);
-      if (k !== -1) {
-        at = k + 1;
-        break;
-      }
-    }
-    out.splice(at, 0, t);
-  });
-  return out;
-};
-const webInput = Platform.OS === 'web' ? ({ outlineStyle: 'none', outlineWidth: 0 } as object) : null;
-
-/**
- * Type and press Enter (or a comma) to turn text into chips. Chips pop in with a spring and
- * shrink out when removed; backspace on an empty field first highlights the last chip, a
- * second press removes it. Duplicates bump the existing chip, invalid tags shake the field,
- * and suggestions appear as pills or as a filtered list with the typed text highlighted.
- */
-export const TagInput = forwardRef<TextInput, TagInputProps>(function TagInput(
-  {
-    value,
-    defaultValue,
-    onChange,
-    variant = 'outlined',
-    chipVariant = 'soft',
-    colorize,
-    prefix,
-    transform,
-    maxTags,
-    suggestions,
-    separators = [','],
-    validate,
-    helper,
-    error,
-    accent,
-    style,
-    placeholder = 'Add a tag…',
-    editable = true,
-    onFocus,
-    onBlur,
-    onKeyPress,
-    onSubmitEditing,
-    ...props
-  },
-  ref
-) {
-  const { colors, radius } = useKit();
-  const tint = accent ?? colors.accent;
-  const inputRef = useRef<TextInput>(null);
-  useImperativeHandle(ref, () => inputRef.current as TextInput);
-
-  const [inner, setInner] = useState<string[]>(defaultValue ?? []);
-  const tags = value ?? inner;
-  const tagsRef = useRef(tags);
-  tagsRef.current = tags;
-  const [text, setText] = useState('');
-  const [focused, setFocused] = useState(false);
-  // Removed tags stay in `order` until their chip has shrunk out, whether they were removed with
-  // the ✕, backspace, or by the parent changing `value`. Leaving = in `order` but not in `tags`.
-  const [order, setOrder] = useState<string[]>(tags);
-  const [synced, setSynced] = useState(tags);
-  let display = order;
-  if (synced !== tags && (synced.length !== tags.length || synced.some((t, i) => t !== tags[i]))) {
-    display = mergeOrder(order, tags);
-    setSynced(tags);
-    setOrder(display);
-  }
-  const leaving = display.filter((t) => !tags.includes(t));
-  const mounted = useRef(true);
-  const [bumps, setBumps] = useState<Record<string, number>>({});
-  const [armed, setArmed] = useState<string | null>(null); // last chip highlighted by the first backspace
-  const [rejected, setRejected] = useState<string>(); // message returned by validate
-  const full = maxTags !== undefined && tags.length >= maxTags;
-  const shownError = error ?? rejected;
-
-  const focus = useRef(new Animated.Value(0)).current; // JS: border colour
-  const halo = useRef(new Animated.Value(0)).current; // native: focus halo
-  const shake = useRef(new Animated.Value(0)).current; // native
-  useEffect(() => {
-    Animated.timing(focus, { toValue: focused ? 1 : 0, duration: 180, easing: Easing.out(Easing.quad), useNativeDriver: false }).start();
-    Animated.spring(halo, { toValue: focused ? 1 : 0, useNativeDriver: true, ...motion.snappy }).start();
-  }, [focused, focus, halo]);
-  useEffect(() => {
-    mounted.current = true;
-    return () => {
-      mounted.current = false;
-      focus.stopAnimation();
-      halo.stopAnimation();
-      shake.stopAnimation();
-    };
-  }, [focus, halo, shake]);
-
-  const nudge = () => {
-    shake.setValue(0);
-    Animated.sequence(
-      [8, -6, 4, -2, 0].map((x) => Animated.timing(shake, { toValue: x, duration: 50, useNativeDriver: true }))
-    ).start();
-  };
-  useEffect(() => {
-    if (error) nudge();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [error]);
-
-  const commit = (next: string[]) => {
-    tagsRef.current = next;
-    if (value === undefined) setInner(next);
-    onChange?.(next);
-  };
-
-  const clean = (raw: string) => {
-    let tag = raw.trim();
-    if (prefix) while (tag.startsWith(prefix)) tag = tag.slice(prefix.length);
-    return transform ? transform(tag).trim() : tag;
-  };
-
-  /** Adds each candidate; returns true if anything was added. */
-  const add = (candidates: string[]) => {
-    let next = [...tagsRef.current];
-    let added = false;
-    setArmed(null);
-    for (const raw of candidates) {
-      const tag = clean(raw);
-      if (!tag) continue;
-      const exiting = leaving.find((t) => same(t, tag) && !next.includes(t));
-      if (exiting && (maxTags === undefined || next.length < maxTags)) {
-        // Re-added while shrinking out: put it back where it was so the chip grows back in place.
-        const before = display.slice(0, display.indexOf(exiting)).filter((t) => next.includes(t)).length;
-        next = [...next.slice(0, before), exiting, ...next.slice(before)];
-        added = true;
-        continue;
-      }
-      const existing = next.find((t) => same(t, tag));
-      if (existing) {
-        setBumps((b) => ({ ...b, [existing]: (b[existing] ?? 0) + 1 }));
-        continue;
-      }
-      if (maxTags !== undefined && next.length >= maxTags) {
-        nudge();
-        break;
-      }
-      const verdict = validate ? validate(tag, next) : true;
-      if (verdict !== true) {
-        if (typeof verdict === 'string') setRejected(verdict);
-        nudge();
-        continue;
-      }
-      setRejected(undefined);
-      next = [...next, tag];
-      added = true;
-    }
-    if (added) commit(next);
-    return added;
-  };
-
-  // The tag leaves `value` at once; its chip keeps rendering (see `order`) until it has shrunk out.
-  const remove = (tag: string) => {
-    setArmed(null);
-    if (tagsRef.current.includes(tag)) commit(tagsRef.current.filter((t) => t !== tag));
-  };
-  const exited = (tag: string) => {
-    if (!mounted.current) return;
-    setOrder((o) => o.filter((t) => t !== tag || tagsRef.current.includes(t)));
-  };
-
-  const onText = (next: string) => {
-    setArmed(null);
-    if (rejected) setRejected(undefined);
-    const sep = separators.find((s) => next.includes(s));
-    if (!sep) return setText(next);
-    const parts = next.split(new RegExp(`[${separators.map((s) => s.replace(/[\\\]^-]/g, '\\$&')).join('')}]`));
-    const rest = parts.pop() ?? '';
-    add(parts);
-    setText(rest);
-  };
-
-  const visible = tags;
-  const query = clean(text).toLowerCase();
-  const filtered = (suggestions ?? [])
-    .filter((s) => !visible.some((t) => same(t, s)))
-    .filter((s) => !query || s.toLowerCase().includes(query));
-  const typing = !!query && focused;
-  const exact = filtered.some((s) => same(s, clean(text)));
-
-  const active = shownError ? colors.danger : tint;
-  const borderColor = focus.interpolate({
-    inputRange: [0, 1],
-    outputRange: [shownError ? colors.danger : variant === 'filled' ? alpha(colors.input, 0) : colors.input, active],
-  });
-  const message = shownError ?? helper;
-
-  return (
-    <Animated.View style={[{ transform: [{ translateX: shake }] }, style]}>
-      <Pressable onPress={() => inputRef.current?.focus()} disabled={!editable} accessible={false} style={{ opacity: editable ? 1 : 0.5 }}>
-        <Animated.View
-          pointerEvents="none"
-          style={[
-            styles.halo,
-            {
-              borderRadius: radius.md + 4,
-              borderColor: alpha(active, 0.2),
-              opacity: halo,
-              transform: [{ scale: halo.interpolate({ inputRange: [0, 1], outputRange: [0.98, 1] }) }],
-            },
-          ]}
-        />
-        <Animated.View
-          style={[
-            styles.field,
-            { borderColor, borderRadius: radius.md, backgroundColor: variant === 'filled' ? colors.muted : colors.background },
-          ]}
-        >
-          {display.map((tag) => (
-            <Chip
-              key={tag}
-              label={tag}
-              prefix={prefix}
-              variant={chipVariant}
-              tint={colorize ? hashColor(tag) : tint}
-              leaving={leaving.includes(tag)}
-              armed={armed === tag}
-              bump={bumps[tag] ?? 0}
-              disabled={!editable}
-              onRemove={() => remove(tag)}
-              onExited={() => exited(tag)}
-            />
-          ))}
-          <TextInput
-            ref={inputRef}
-            accessibilityLabel={props.accessibilityLabel ?? placeholder}
-            autoCapitalize="none"
-            autoCorrect={false}
-            {...props}
-            value={text}
-            editable={editable && !full}
-            onChangeText={onText}
-            placeholder={full ? `Limit of ${maxTags} reached` : visible.length ? '' : placeholder}
-            placeholderTextColor={colors.mutedForeground}
-            selectionColor={tint}
-            cursorColor={tint}
-            submitBehavior="submit"
-            returnKeyType="done"
-            onSubmitEditing={(e) => {
-              add([text]);
-              setText('');
-              onSubmitEditing?.(e);
-            }}
-            onKeyPress={(e) => {
-              if (e.nativeEvent.key === 'Backspace' && !text && visible.length) {
-                const last = visible[visible.length - 1];
-                // First press highlights the last chip, the second removes it.
-                if (armed === last) remove(last);
-                else setArmed(last);
-              }
-              onKeyPress?.(e);
-            }}
-            onFocus={(e) => {
-              setFocused(true);
-              onFocus?.(e);
-            }}
-            onBlur={(e) => {
-              setFocused(false);
-              setArmed(null);
-              if (text.trim()) {
-                add([text]);
-                setText('');
-              }
-              onBlur?.(e);
-            }}
-            style={[styles.input, { color: colors.foreground }, full && styles.inputFull, webInput]}
-          />
-        </Animated.View>
-      </Pressable>
-
-      {typing && !full && (filtered.length || !exact) && suggestions?.length ? (
-        <Appear key="list" style={[styles.list, { backgroundColor: colors.popover, borderColor: colors.border, borderRadius: radius.md }]}>
-          {filtered.slice(0, 5).map((s) => {
-            const i = s.toLowerCase().indexOf(query);
-            return (
-              <Pressable
-                key={s}
-                accessibilityRole="button"
-                accessibilityLabel={`Add ${s}`}
-                onPress={() => {
-                  add([s]);
-                  setText('');
-                }}
-                style={({ pressed, hovered }: { pressed: boolean; hovered?: boolean }) => [
-                  styles.listRow,
-                  { borderRadius: radius.md - 4, backgroundColor: pressed || hovered ? colors.muted : 'transparent' },
-                ]}
-              >
-                <Glyph name="plus" size={16} color={tint} />
-                <Text numberOfLines={1} style={[styles.listText, { color: colors.foreground }]}>
-                  {prefix}
-                  {s.slice(0, i)}
-                  <Text style={[styles.match, { color: tint }]}>{s.slice(i, i + query.length)}</Text>
-                  {s.slice(i + query.length)}
-                </Text>
-              </Pressable>
-            );
-          })}
-          {!exact ? (
-            <Pressable
-              accessibilityRole="button"
-              onPress={() => {
-                add([text]);
-                setText('');
-              }}
-              style={({ pressed, hovered }: { pressed: boolean; hovered?: boolean }) => [
-                styles.listRow,
-                { borderRadius: radius.md - 4, backgroundColor: pressed || hovered ? colors.muted : 'transparent' },
-              ]}
-            >
-              <Glyph name="enter" size={16} color={colors.mutedForeground} />
-              <Text numberOfLines={1} style={[styles.listText, { color: colors.mutedForeground }]}>
-                Add “{prefix}
-                {clean(text)}”
-              </Text>
-            </Pressable>
-          ) : null}
-        </Appear>
-      ) : null}
-
-      {!typing && filtered.length && !full ? (
-        <ScrollView
-          horizontal
-          showsHorizontalScrollIndicator={false}
-          keyboardShouldPersistTaps="always"
-          style={styles.suggestions}
-          contentContainerStyle={styles.suggestionsRow}
-        >
-          {filtered.map((s) => (
-            <Pressable
-              key={s}
-              accessibilityRole="button"
-              accessibilityLabel={`Add ${s}`}
-              onPress={() => {
-                add([s]);
-                setText('');
-              }}
-              style={({ pressed }) => [
-                styles.suggestion,
-                { borderRadius: radius.capsule(34), borderColor: colors.border, backgroundColor: pressed ? colors.muted : 'transparent', transform: [{ scale: pressed ? 0.96 : 1 }] },
-              ]}
-            >
-              <Glyph name="plus" size={14} color={colorize ? hashColor(s) : tint} />
-              <Text style={[styles.suggestionText, { color: colors.foreground }]}>
-                {prefix}
-                {s}
-              </Text>
-            </Pressable>
-          ))}
-        </ScrollView>
-      ) : null}
-
-      {message || maxTags !== undefined ? (
-        <View style={styles.footer}>
-          {message ? (
-            <Appear key={`${shownError ? 'e' : 'h'}${message}`} style={styles.message} live={!!shownError}>
-              {shownError ? <Glyph name="alert" size={14} color={colors.danger} /> : null}
-              <Text style={[styles.helper, { color: shownError ? colors.danger : colors.mutedForeground }]}>{message}</Text>
-            </Appear>
-          ) : (
-            <View style={styles.flex} />
-          )}
-          {maxTags !== undefined ? <Counter count={visible.length} max={maxTags} tint={tint} /> : null}
-        </View>
-      ) : null}
-    </Animated.View>
-  );
-});
-
-const GAP = 6;
-
-/** Fades and slides its children in once on mount. */
-function Appear({ children, style, live }: { children: React.ReactNode; style?: StyleProp<ViewStyle>; live?: boolean }) {
-  const enter = useRef(new Animated.Value(0)).current; // native
-  useEffect(() => {
-    Animated.spring(enter, { toValue: 1, useNativeDriver: true, ...motion.snappy }).start();
-    return () => enter.stopAnimation();
-  }, [enter]);
-  return (
-    <Animated.View
-      accessibilityLiveRegion={live ? 'polite' : undefined}
-      style={[style, { opacity: enter, transform: [{ translateY: enter.interpolate({ inputRange: [0, 1], outputRange: [4, 0] }) }] }]}
-    >
-      {children}
-    </Animated.View>
-  );
-}
-
-/** "3/5" with a small ring that fills as tags are added. */
-function Counter({ count, max, tint }: { count: number; max: number; tint: string }) {
-  const { colors } = useKit();
-  const full = count >= max;
-  const color = full ? colors.warning : tint;
-  const r = 6;
-  const c = 2 * Math.PI * r;
-  const pop = useRef(new Animated.Value(1)).current; // native
-  const first = useRef(true);
-  useEffect(() => {
-    if (first.current) {
-      first.current = false;
-      return;
-    }
-    pop.setValue(1.25);
-    Animated.spring(pop, { toValue: 1, useNativeDriver: true, ...motion.bouncy }).start();
-  }, [count, pop]);
-  useEffect(() => () => pop.stopAnimation(), [pop]);
-  return (
-    <Animated.View style={[styles.counter, { transform: [{ scale: pop }] }]} accessibilityLabel={`${count} of ${max} tags`}>
-      <Svg width={16} height={16} viewBox="0 0 16 16">
-        <Circle cx={8} cy={8} r={r} stroke={alpha(colors.mutedForeground, 0.25)} strokeWidth={2} fill="none" />
-        <Circle
-          cx={8}
-          cy={8}
-          r={r}
-          stroke={color}
-          strokeWidth={2}
-          fill="none"
-          strokeLinecap="round"
-          strokeDasharray={`${c} ${c}`}
-          strokeDashoffset={c * (1 - Math.min(1, count / max))}
-          transform="rotate(-90 8 8)"
-        />
-      </Svg>
-      <Text style={[styles.count, { color: full ? colors.warning : colors.mutedForeground }]}>
-        {count}/{max}
-      </Text>
-    </Animated.View>
-  );
-}
-
-function Chip({
-  label,
-  prefix,
-  variant,
-  tint,
-  leaving,
-  armed,
-  bump,
-  disabled,
-  onRemove,
-  onExited,
-}: {
-  label: string;
-  prefix?: string;
-  variant: TagChipVariant;
-  tint: string;
-  leaving: boolean;
-  armed: boolean;
-  bump: number;
-  disabled: boolean;
-  onRemove: () => void;
-  onExited: () => void;
-}) {
-  const { colors, radius, dark } = useKit();
-  // Inner chip (native driver): scale + fade. Outer wrapper (JS driver, separate view): width and
-  // the trailing gap collapse so the neighbours and the text input slide over.
-  const scale = useRef(new Animated.Value(0.85)).current; // native
-  const fade = useRef(new Animated.Value(0)).current; // native
-  const size = useRef(new Animated.Value(1)).current; // JS: 1 = full width, 0 = collapsed
-  const width = useRef(0);
-  const [frozen, setFrozen] = useState<number | null>(null); // measured width while collapsing
-
-  useEffect(() => {
-    Animated.parallel([
-      Animated.spring(scale, { toValue: 1, useNativeDriver: true, ...motion.bouncy }),
-      Animated.spring(fade, { toValue: 1, useNativeDriver: true, ...motion.snappy }),
-    ]).start();
-    return () => {
-      scale.stopAnimation();
-      fade.stopAnimation();
-      size.stopAnimation();
-    };
-  }, [scale, fade, size]);
-
-  useEffect(() => {
-    if (!bump) return;
-    scale.setValue(1.18);
-    Animated.spring(scale, { toValue: 1, useNativeDriver: true, ...motion.bouncy }).start();
-  }, [bump, scale]);
-
-  useEffect(() => {
-    if (!armed) return;
-    scale.setValue(1.1);
-    Animated.spring(scale, { toValue: 1, useNativeDriver: true, ...motion.bouncy }).start();
-  }, [armed, scale]);
-
-  const wasLeaving = useRef(false);
-  useEffect(() => {
-    if (!leaving) {
-      if (!wasLeaving.current) return;
-      wasLeaving.current = false;
-      // Exit cancelled (tag re-added): grow back in place, then drop the fixed width.
-      scale.stopAnimation();
-      fade.stopAnimation();
-      size.stopAnimation();
-      Animated.parallel([
-        Animated.spring(scale, { toValue: 1, useNativeDriver: true, ...motion.bouncy }),
-        Animated.spring(fade, { toValue: 1, useNativeDriver: true, ...motion.snappy }),
-      ]).start();
-      Animated.spring(size, { toValue: 1, useNativeDriver: false, ...motion.snappy }).start(({ finished }) => {
-        if (finished) setFrozen(null);
-      });
-      return;
-    }
-    wasLeaving.current = true;
-    if (width.current > 0) setFrozen((f) => f ?? width.current);
-    Animated.parallel([
-      Animated.timing(scale, { toValue: 0.8, duration: 180, easing: Easing.out(Easing.quad), useNativeDriver: true }),
-      Animated.timing(fade, { toValue: 0, duration: 150, easing: Easing.out(Easing.quad), useNativeDriver: true }),
-      Animated.timing(size, { toValue: 0, duration: 240, delay: 40, easing: Easing.inOut(Easing.cubic), useNativeDriver: false }),
-    ]).start(({ finished }) => {
-      // `finished` is false when stopped (unmount, or the exit was cancelled).
-      if (finished) onExited();
-    });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [leaving]);
-
-  const look = armed
-    ? { bg: colors.danger, fg: colors.dangerForeground, border: colors.danger, dot: false }
-    : variant === 'solid'
-      ? { bg: tint, fg: readableOn(tint), border: tint, dot: false }
-      : variant === 'outline'
-        ? { bg: colors.background, fg: colors.foreground, border: alpha(tint, 0.45), dot: true }
-        : { bg: alpha(tint, dark ? 0.2 : 0.12), fg: tint, border: alpha(tint, dark ? 0.32 : 0.22), dot: false };
-
-  return (
-    <Animated.View
-      pointerEvents={leaving ? 'none' : 'auto'}
-      accessibilityElementsHidden={leaving}
-      importantForAccessibility={leaving ? 'no-hide-descendants' : 'auto'}
-      onLayout={(e) => {
-        if (frozen === null) width.current = e.nativeEvent.layout.width;
-      }}
-      style={
-        frozen !== null
-          ? {
-              overflow: 'hidden',
-              width: size.interpolate({ inputRange: [0, 1], outputRange: [0, frozen], extrapolate: 'clamp' }),
-              // Cancel the field's `gap` as the chip disappears so the next item lands flush.
-              marginRight: size.interpolate({ inputRange: [0, 1], outputRange: [-GAP, 0], extrapolate: 'clamp' }),
-            }
-          : null
-      }
-    >
-      <Animated.View
-        accessibilityState={{ selected: armed }}
-        style={[
-          styles.chip,
-          variant === 'solid' && !armed && styles.chipRaised,
-          {
-            backgroundColor: look.bg,
-            borderColor: look.border,
-            borderRadius: radius.capsule(30),
-            shadowColor: tint,
-            opacity: fade.interpolate({ inputRange: [0, 1], outputRange: [0, 1], extrapolate: 'clamp' }),
-            transform: [{ scale }],
-          },
-        ]}
-      >
-        {look.dot ? <View style={[styles.dot, { backgroundColor: tint }]} /> : null}
-        <Text numberOfLines={1} style={[styles.chipText, { color: look.fg }]}>
-          {prefix ? <Text style={styles.prefix}>{prefix}</Text> : null}
-          {label}
-        </Text>
-        <Pressable
-          hitSlop={{ top: 13, bottom: 13, left: 6, right: 12 }}
-          accessibilityRole="button"
-          accessibilityLabel={`Remove ${label}`}
-          disabled={disabled || leaving}
-          onPress={onRemove}
-          style={({ pressed }) => [styles.remove, { backgroundColor: alpha(look.fg === colors.foreground ? colors.mutedForeground : look.fg, pressed ? 0.3 : 0.16) }]}
-        >
-          <Glyph name="x" size={10} color={look.fg} strokeWidth={2.6} />
-        </Pressable>
-      </Animated.View>
-    </Animated.View>
-  );
-}
-
-function Glyph({ name, size, color, strokeWidth = 1.8 }: { name: 'x' | 'plus' | 'enter' | 'alert'; size: number; color: string; strokeWidth?: number }) {
-  const p = { stroke: color, strokeWidth, strokeLinecap: 'round' as const, strokeLinejoin: 'round' as const, fill: 'none' };
-  return (
-    <Svg width={size} height={size} viewBox="0 0 24 24">
-      {name === 'x' ? <Path d="M6 6l12 12M18 6 6 18" {...p} /> : null}
-      {name === 'plus' ? <Path d="M12 5v14M5 12h14" {...p} strokeWidth={2.2} /> : null}
-      {name === 'enter' ? <Path d="M19 6v5a3 3 0 0 1-3 3H6m0 0 4-4m-4 4 4 4" {...p} /> : null}
-      {name === 'alert' ? (
-        <>
-          <Circle cx={12} cy={12} r={9} {...p} />
-          <Path d="M12 7.5v5.5M12 16.5v.01" {...p} strokeWidth={2.2} />
-        </>
-      ) : null}
-    </Svg>
-  );
-}
-
-const styles = StyleSheet.create({
-  halo: { position: 'absolute', top: -4, left: -4, right: -4, bottom: -4, borderWidth: 4 },
-  field: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    alignItems: 'center',
-    gap: GAP,
-    borderWidth: 1.5,
-    minHeight: 52,
-    paddingHorizontal: 10,
-    paddingVertical: 9,
-  },
-  input: { flexGrow: 1, flexBasis: 90, minWidth: 90, height: 30, fontSize: 16, paddingVertical: 0, paddingHorizontal: 4 },
-  inputFull: { flexBasis: 160 },
-  chip: { flexDirection: 'row', alignItems: 'center', height: 30, paddingLeft: 12, paddingRight: 6, gap: 6, borderWidth: 1 },
-  chipRaised: { shadowOpacity: 0.3, shadowRadius: 6, shadowOffset: { width: 0, height: 2 }, elevation: 2 },
-  dot: { width: 7, height: 7, borderRadius: 4, marginLeft: -2 },
-  chipText: { fontSize: 14, fontWeight: '400', maxWidth: 200 },
-  prefix: { opacity: 0.6 },
-  remove: { width: 18, height: 18, borderRadius: 9, alignItems: 'center', justifyContent: 'center' },
-  list: {
-    marginTop: 8,
-    padding: 4,
-    borderWidth: StyleSheet.hairlineWidth,
-    shadowColor: '#000',
-    shadowOpacity: 0.1,
-    shadowRadius: 14,
-    shadowOffset: { width: 0, height: 6 },
-    elevation: 6,
-  },
-  listRow: { flexDirection: 'row', alignItems: 'center', minHeight: 44, paddingHorizontal: 12, gap: 10 },
-  listText: { flex: 1, fontSize: 15 },
-  match: { fontWeight: '400' },
-  suggestions: { marginTop: 10, flexGrow: 0 },
-  suggestionsRow: { gap: 8, paddingRight: 4 },
-  suggestion: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    height: 34,
-    paddingHorizontal: 12,
-    borderWidth: 1,
-    gap: 5,
-  },
-  suggestionText: { fontSize: 13.5, fontWeight: '400' },
-  footer: { flexDirection: 'row', alignItems: 'flex-start', marginTop: 6, gap: 12 },
-  flex: { flex: 1 },
-  message: { flex: 1, flexDirection: 'row', alignItems: 'center', gap: 5, marginLeft: 4 },
-  helper: { flex: 1, fontSize: 12.5 },
-  counter: { flexDirection: 'row', alignItems: 'center', gap: 5 },
-  count: { fontSize: 12.5, fontWeight: '400', fontVariant: ['tabular-nums'] },
-});