@xpufx/paseo-twofado 0.1.0

package/client/vendor/paseo-plugin-helper/components/AttentionBeacon.tsx

@@ -0,0 +1,250 @@
+import React, { useEffect, useRef, type ReactNode } from "react";
+import {
+  Animated,
+  Easing,
+  StyleSheet,
+  View,
+  type StyleProp,
+  type ViewStyle,
+} from "react-native";
+import { getClientHost } from "../host";
+import { usePluginTheme } from "../theme/provider";
+import { FALLBACK_ACCENT_FOREGROUND } from "../theme/tokens";
+import type { ThemeColors } from "../../../../shared/vendor/paseo-plugin-helper/types";
+
+export type AttentionBeaconMode = "radar" | "ring" | "glow" | "badge" | "bounce" | "pulse";
+export type AttentionBeaconTone = "warning" | "accent" | "danger";
+
+export interface AttentionBeaconProps {
+  children: ReactNode;
+  mode?: AttentionBeaconMode;
+  tone?: AttentionBeaconTone;
+  color?: string;
+  active?: boolean;
+  style?: StyleProp<ViewStyle>;
+  haloStyle?: StyleProp<ViewStyle>;
+  badgeStyle?: StyleProp<ViewStyle>;
+  accessibilityLabel?: string;
+  testID?: string;
+  badgeIcon?: string | ReactNode;
+  duration?: number;
+  easing?: (value: number) => number;
+}
+
+export function normalizeBeaconMode(mode?: AttentionBeaconMode): "radar" | "glow" | "badge" | "bounce" | "pulse" {
+  if (mode === "ring") return "radar";
+  if (mode === "glow" || mode === "badge" || mode === "bounce" || mode === "pulse" || mode === "radar") return mode;
+  return "radar";
+}
+
+export function resolveBeaconToneColor(
+  colors: ThemeColors,
+  tone: AttentionBeaconTone = "warning",
+  customColor?: string,
+): string {
+  if (customColor) return customColor;
+  if (tone === "danger") return colors.statusDanger;
+  if (tone === "accent") return colors.accent;
+  return colors.statusWarning;
+}
+
+function useLoop(driver: Animated.Value, toValue: number, duration: number, active: boolean): void {
+  useEffect(() => {
+    if (!active) return;
+    driver.setValue(0);
+    const animation = Animated.loop(
+      Animated.sequence([
+        Animated.timing(driver, { toValue, duration, easing: Easing.linear, useNativeDriver: true }),
+        Animated.timing(driver, { toValue: 0, duration: 0, useNativeDriver: true }),
+      ]),
+    );
+    animation.start();
+    return () => animation.stop();
+  }, [driver, toValue, duration, active]);
+}
+
+function usePingPong(
+  driver: Animated.Value,
+  duration: number,
+  active: boolean,
+  easing: (value: number) => number = Easing.linear,
+): void {
+  useEffect(() => {
+    if (!active) return;
+    driver.setValue(0);
+    const animation = Animated.loop(
+      Animated.sequence([
+        Animated.timing(driver, { toValue: 1, duration, easing, useNativeDriver: true }),
+        Animated.timing(driver, { toValue: 0, duration, easing, useNativeDriver: true }),
+      ]),
+    );
+    animation.start();
+    return () => animation.stop();
+  }, [driver, duration, active, easing]);
+}
+
+export function AttentionBeacon({
+  children,
+  mode = "radar",
+  tone = "warning",
+  color,
+  active = true,
+  style,
+  haloStyle,
+  badgeStyle,
+  accessibilityLabel,
+  testID,
+  badgeIcon,
+  duration = 900,
+  easing = Easing.linear,
+}: AttentionBeaconProps) {
+  const { Icon } = getClientHost();
+  const { colors } = usePluginTheme();
+  const resolved = normalizeBeaconMode(mode);
+  const beaconColor = resolveBeaconToneColor(colors, tone, color);
+
+  const radar = useRef(new Animated.Value(0)).current;
+  const breath = useRef(new Animated.Value(0)).current;
+  const pip = useRef(new Animated.Value(0)).current;
+  const jiggle = useRef(new Animated.Value(0)).current;
+  const pulse = useRef(new Animated.Value(0)).current;
+
+  const isRadar = resolved === "radar" && active;
+  const isGlow = resolved === "glow" && active;
+  const isBadge = resolved === "badge" && active;
+  const isBounce = resolved === "bounce" && active;
+  const isPulse = resolved === "pulse" && active;
+
+  useLoop(radar, 1, 1600, isRadar);
+  usePingPong(breath, 900, isGlow);
+  usePingPong(pip, 900, isBadge);
+  usePingPong(jiggle, 350, isBounce);
+  usePingPong(pulse, duration, isPulse, easing);
+
+  if (!active) {
+    return <View style={[styles.wrapper, style]}>{children}</View>;
+  }
+
+  if (resolved === "glow") {
+    const opacity = breath.interpolate({ inputRange: [0, 1], outputRange: [0.35, 1] });
+    return (
+      <View style={[styles.wrapper, style]} accessibilityLabel={accessibilityLabel} testID={testID}>
+        {children}
+        <Animated.View
+          pointerEvents="none"
+          testID={testID ? `${testID}-glow` : undefined}
+          style={[styles.glowHalo, { borderColor: beaconColor, opacity }, haloStyle]}
+        />
+      </View>
+    );
+  }
+
+  if (resolved === "badge") {
+    const opacity = pip.interpolate({ inputRange: [0, 1], outputRange: [0.5, 1] });
+    const scale = pip.interpolate({ inputRange: [0, 1], outputRange: [0.85, 1.15] });
+    const hasIcon = badgeIcon !== undefined && badgeIcon !== null && badgeIcon !== "";
+    const iconColor = colors.accentForeground || FALLBACK_ACCENT_FOREGROUND;
+    return (
+      <View style={[styles.wrapper, style]} accessibilityLabel={accessibilityLabel} testID={testID}>
+        {children}
+        <Animated.View
+          pointerEvents="none"
+          testID={testID ? `${testID}-badge` : undefined}
+          style={[
+            styles.pip,
+            { backgroundColor: beaconColor, opacity, transform: [{ scale }] },
+            hasIcon && styles.pipWithIcon,
+            badgeStyle,
+          ]}
+        >
+          {hasIcon ? (
+            typeof badgeIcon === "string" ? (
+              <Icon name={badgeIcon} size={10} color={iconColor} />
+            ) : (
+              badgeIcon
+            )
+          ) : null}
+        </Animated.View>
+      </View>
+    );
+  }
+
+  if (resolved === "bounce") {
+    const translateY = jiggle.interpolate({ inputRange: [0, 1], outputRange: [0, -5] });
+    return (
+      <View style={[styles.wrapper, style]} accessibilityLabel={accessibilityLabel} testID={testID}>
+        <Animated.View style={{ transform: [{ translateY }] }}>{children}</Animated.View>
+      </View>
+    );
+  }
+
+  if (resolved === "pulse") {
+    const opacity = pulse.interpolate({ inputRange: [0, 1], outputRange: [0.35, 1] });
+    return (
+      <View style={[styles.wrapper, style]} accessibilityLabel={accessibilityLabel} testID={testID}>
+        <Animated.View
+          testID={testID ? `${testID}-pulse` : undefined}
+          style={{ opacity }}
+        >
+          {children}
+        </Animated.View>
+      </View>
+    );
+  }
+
+  const scale = radar.interpolate({ inputRange: [0, 1], outputRange: [1, 1.5] });
+  const opacity = radar.interpolate({ inputRange: [0, 1], outputRange: [0.55, 0] });
+  return (
+    <View style={[styles.wrapper, style]} accessibilityLabel={accessibilityLabel} testID={testID}>
+      <Animated.View
+        pointerEvents="none"
+        testID={testID ? `${testID}-halo` : undefined}
+        style={[
+          styles.radarHalo,
+          { borderColor: beaconColor, opacity, transform: [{ scale }] },
+          haloStyle,
+        ]}
+      />
+      {children}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  wrapper: {
+    position: "relative",
+  },
+  radarHalo: {
+    position: "absolute",
+    top: -4,
+    left: -4,
+    right: -4,
+    bottom: -4,
+    borderWidth: 2,
+    borderRadius: 12,
+  },
+  glowHalo: {
+    position: "absolute",
+    top: -2,
+    left: -2,
+    right: -2,
+    bottom: -2,
+    borderWidth: 2,
+    borderRadius: 10,
+  },
+  pip: {
+    position: "absolute",
+    top: -4,
+    right: -4,
+    width: 10,
+    height: 10,
+    borderRadius: 5,
+  },
+  pipWithIcon: {
+    width: 16,
+    height: 16,
+    borderRadius: 8,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+});

package/client/vendor/paseo-plugin-helper/components/Badge.tsx

@@ -0,0 +1,156 @@
+import React, { type ReactNode } from "react";
+import { StyleSheet, Text, View, type StyleProp, type TextStyle, type ViewStyle } from "react-native";
+import { getClientHost } from "../host";
+import { usePluginTheme } from "../theme/provider";
+import { FALLBACK_ACCENT_FOREGROUND } from "../theme/tokens";
+import { HighlightedText } from "./HighlightedText";
+import type { StatusVariant } from "../../../../shared/vendor/paseo-plugin-helper/types";
+
+export type BadgeStyle = "tinted" | "outline" | "solid";
+export type BadgeSize = "sm" | "md";
+
+export interface BadgeProps {
+  label: string;
+  variant?: StatusVariant;
+  styleVariant?: BadgeStyle;
+  size?: BadgeSize;
+  icon?: string | ReactNode;
+  dot?: boolean;
+  style?: StyleProp<ViewStyle>;
+  textStyle?: StyleProp<TextStyle>;
+  /**
+   * When set, every case-insensitive occurrence of the query inside `label` is
+   * painted with the accent highlight. The query is matched literally, never as
+   * a regular expression.
+   */
+  highlightQuery?: string;
+  /**
+   * With `highlightQuery`, marks the whole label when the query has neither a
+   * literal nor a token hit — for a single primary chip, not a chip list.
+   */
+  highlightFuzzyFallback?: boolean;
+}
+
+export function Badge({
+  label,
+  variant = "neutral",
+  styleVariant = "tinted",
+  size = "md",
+  icon,
+  dot = false,
+  style,
+  textStyle,
+  highlightQuery,
+  highlightFuzzyFallback,
+}: BadgeProps) {
+  const { Icon } = getClientHost();
+  const { colors, flair, resolveRadius, getVariantPalette, getStatusColor, typography } =
+    usePluginTheme();
+  const caption = typography?.caption ?? {
+    fontSize: 11,
+    lineHeight: 15,
+    fontWeight: "400" as const,
+  };
+
+  const fontSize = size === "sm" ? 10 : caption.fontSize;
+  const lineHeight = size === "sm" ? 12 : caption.lineHeight;
+  const paddingVertical = size === "sm" ? 1 : Math.max(2, Math.floor(caption.lineHeight / 5));
+  const paddingHorizontal = size === "sm" ? 5 : caption.fontSize < 11 ? 6 : 8;
+  const iconSize = size === "sm" ? 10 : caption.fontSize < 11 ? 10 : 11;
+
+  const radius = resolveRadius("pill");
+  const palette = getVariantPalette(variant);
+  const solidColor = getStatusColor(variant);
+
+  let bg = palette.bg;
+  let border = palette.border;
+  let textColor = palette.text;
+
+  if (styleVariant === "outline") {
+    bg = "transparent";
+    border = palette.border;
+    textColor = palette.text;
+  } else if (styleVariant === "solid") {
+    bg = solidColor;
+    border = "transparent";
+    textColor = colors.accentForeground || FALLBACK_ACCENT_FOREGROUND;
+  }
+
+  const renderIcon = () => {
+    if (dot) {
+      return (
+        <View
+          style={[
+            styles.dot,
+            {
+              backgroundColor: textColor,
+            },
+          ]}
+        />
+      );
+    }
+    if (!icon) return null;
+    if (typeof icon === "string") {
+      return <Icon name={icon} size={iconSize} color={textColor} />;
+    }
+    return icon;
+  };
+
+  return (
+    <View
+      style={[
+        styles.badge,
+        {
+          backgroundColor: bg,
+          borderColor: border,
+          borderRadius: radius,
+          paddingVertical,
+          paddingHorizontal,
+        },
+        style,
+      ]}
+    >
+      {renderIcon()}
+      <Text
+        style={[
+          styles.text,
+          {
+            color: textColor,
+            fontSize,
+            lineHeight,
+            textTransform: flair.headingTransform === "uppercase" ? "uppercase" : "none",
+          },
+          textStyle,
+        ]}
+      >
+        {highlightQuery ? (
+          <HighlightedText
+            text={label}
+            query={highlightQuery}
+            fuzzyFallback={highlightFuzzyFallback}
+          />
+        ) : (
+          label
+        )}
+      </Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  badge: {
+    flexDirection: "row",
+    alignItems: "center",
+    alignSelf: "flex-start",
+    borderWidth: 1,
+    gap: 4,
+  },
+  text: {
+    fontWeight: "600",
+  },
+  dot: {
+    width: 6,
+    height: 6,
+    borderRadius: 3,
+  },
+});

package/client/vendor/paseo-plugin-helper/components/Button.tsx

@@ -0,0 +1,178 @@
+import React, { type ReactNode } from "react";
+import {
+  ActivityIndicator,
+  Pressable,
+  StyleSheet,
+  Text,
+  type StyleProp,
+  type TextStyle,
+  type ViewStyle,
+} from "react-native";
+import { getClientHost } from "../host";
+import { usePluginTheme } from "../theme/provider";
+import { FALLBACK_ACCENT_FOREGROUND } from "../theme/tokens";
+import { AttentionBeacon, type AttentionBeaconMode, type AttentionBeaconTone } from "./AttentionBeacon";
+
+export type ButtonVariant = "primary" | "secondary" | "danger" | "ghost";
+export type ButtonSize = "sm" | "md" | "lg";
+export type ButtonAttention = boolean | "radar" | "glow" | "bounce";
+
+export function resolveButtonAttentionMode(
+  attention?: ButtonAttention,
+): AttentionBeaconMode | null {
+  if (!attention) return null;
+  if (attention === true) return "radar";
+  return attention;
+}
+
+export function resolveButtonAttentionTone(variant: ButtonVariant): AttentionBeaconTone {
+  if (variant === "danger") return "danger";
+  if (variant === "primary") return "accent";
+  return "warning";
+}
+
+export interface ButtonProps {
+  label?: string;
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  icon?: string | ReactNode;
+  iconPosition?: "left" | "right";
+  onPress?: () => void | Promise<void>;
+  disabled?: boolean;
+  loading?: boolean;
+  style?: StyleProp<ViewStyle>;
+  textStyle?: StyleProp<TextStyle>;
+  accessibilityLabel?: string;
+  attention?: ButtonAttention;
+}
+
+export function Button({
+  label,
+  variant = "secondary",
+  size = "md",
+  icon,
+  iconPosition = "left",
+  onPress,
+  disabled = false,
+  loading = false,
+  style,
+  textStyle,
+  accessibilityLabel,
+  attention,
+}: ButtonProps) {
+  const { Icon } = getClientHost();
+  const { colors, resolveRadius, touchTargetMin, isCompact, alpha } = usePluginTheme();
+
+  const radius = resolveRadius(size === "sm" ? "sm" : size === "lg" ? "lg" : "md");
+
+  // Determine sizing
+  const py = size === "sm" ? (isCompact ? 5 : 6) : size === "lg" ? 12 : isCompact ? 8 : 10;
+  const px = size === "sm" ? (isCompact ? 8 : 10) : size === "lg" ? 18 : isCompact ? 12 : 14;
+  const fontSize = size === "sm" ? 12 : size === "lg" ? 15 : 13;
+  const iconSize = size === "sm" ? 12 : size === "lg" ? 16 : 14;
+
+  // Determine colors by variant
+  let bg = "transparent";
+  let border = "transparent";
+  let textColor = colors.foreground;
+
+  switch (variant) {
+    case "primary":
+      bg = colors.accent;
+      textColor = colors.accentForeground || FALLBACK_ACCENT_FOREGROUND;
+      break;
+    case "danger":
+      bg = alpha(colors.statusDanger, 0.15);
+      border = alpha(colors.statusDanger, 0.4);
+      textColor = colors.statusDanger;
+      break;
+    case "ghost":
+      bg = "transparent";
+      textColor = colors.foregroundMuted;
+      break;
+    case "secondary":
+    default:
+      bg = colors.surface1;
+      border = colors.border;
+      textColor = colors.foreground;
+      break;
+  }
+
+  const renderIcon = () => {
+    if (!icon) return null;
+    if (typeof icon === "string") {
+      return <Icon name={icon} size={iconSize} color={textColor} />;
+    }
+    return icon;
+  };
+
+  const attentionMode = resolveButtonAttentionMode(attention);
+
+  const pressable = (
+    <Pressable
+      onPress={onPress}
+      disabled={disabled || loading}
+      accessibilityRole="button"
+      accessibilityLabel={accessibilityLabel || label}
+      hitSlop={Math.max(0, (touchTargetMin - 32) / 2)}
+      style={({ pressed }) => [
+        styles.base,
+        {
+          backgroundColor: pressed && !disabled ? alpha(bg, 0.8) : bg,
+          borderColor: border,
+          borderWidth: border !== "transparent" ? 1 : 0,
+          borderRadius: radius,
+          paddingVertical: py,
+          paddingHorizontal: px,
+          minHeight: Math.max(30, touchTargetMin - 4),
+          opacity: disabled ? 0.45 : 1,
+        },
+        style,
+      ]}
+    >
+      {loading ? (
+        <ActivityIndicator size="small" color={textColor} />
+      ) : (
+        <>
+          {iconPosition === "left" && renderIcon()}
+          {label ? (
+            <Text
+              style={[
+                styles.text,
+                {
+                  color: textColor,
+                  fontSize,
+                },
+                textStyle,
+              ]}
+            >
+              {label}
+            </Text>
+          ) : null}
+          {iconPosition === "right" && renderIcon()}
+        </>
+      )}
+    </Pressable>
+  );
+
+  if (!attentionMode) return pressable;
+
+  return (
+    <AttentionBeacon mode={attentionMode} tone={resolveButtonAttentionTone(variant)}>
+      {pressable}
+    </AttentionBeacon>
+  );
+}
+
+const styles = StyleSheet.create({
+  base: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 6,
+  },
+  text: {
+    fontWeight: "600",
+    textAlign: "center",
+  },
+});