@xpufx/paseo-top 0.4.3 → 0.4.5

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

@@ -1,250 +0,0 @@
-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

@@ -1,156 +0,0 @@
-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

@@ -1,184 +0,0 @@
-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;
-  children?: ReactNode;
-  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;
-  accessibilityRole?: "button" | "link";
-  attention?: ButtonAttention;
-}
-
-export function Button({
-  label,
-  children,
-  variant = "secondary",
-  size = "md",
-  icon,
-  iconPosition = "left",
-  onPress,
-  disabled = false,
-  loading = false,
-  style,
-  textStyle,
-  accessibilityLabel,
-  accessibilityRole = "button",
-  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={accessibilityRole}
-      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} />
-      ) : children ? (
-        children
-      ) : (
-        <>
-          {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",
-  },
-});