@xpufx/paseo-top 0.4.4 → 0.4.7

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

@@ -1,80 +0,0 @@
-import React, { useEffect, useRef } from "react";
-import { Animated, StyleSheet, View, type StyleProp, type ViewStyle } from "react-native";
-import { usePluginTheme } from "../theme/provider";
-import type { StatusVariant } from "../../../../shared/vendor/paseo-plugin-helper/types";
-
-export interface StatusDotProps {
-  variant?: StatusVariant;
-  size?: "sm" | "md" | "lg";
-  pulse?: boolean;
-  style?: StyleProp<ViewStyle>;
-}
-
-export function StatusDot({ variant = "neutral", size = "md", pulse = false, style }: StatusDotProps) {
-  const { getStatusColor, alpha } = usePluginTheme();
-  const color = getStatusColor(variant);
-  const pulseAnim = useRef(new Animated.Value(1)).current;
-
-  useEffect(() => {
-    if (!pulse) return;
-
-    const loop = Animated.loop(
-      Animated.sequence([
-        Animated.timing(pulseAnim, {
-          toValue: 0.35,
-          duration: 900,
-          useNativeDriver: true,
-        }),
-        Animated.timing(pulseAnim, {
-          toValue: 1,
-          duration: 900,
-          useNativeDriver: true,
-        }),
-      ]),
-    );
-    loop.start();
-
-    return () => loop.stop();
-  }, [pulse, pulseAnim]);
-
-  const dimension = size === "sm" ? 6 : size === "lg" ? 10 : 8;
-
-  return (
-    <View
-      style={[
-        styles.container,
-        {
-          width: dimension,
-          height: dimension,
-        },
-        style,
-      ]}
-    >
-      <Animated.View
-        style={[
-          styles.dot,
-          {
-            width: dimension,
-            height: dimension,
-            borderRadius: dimension / 2,
-            backgroundColor: color,
-            shadowColor: color,
-            opacity: pulseAnim,
-          },
-        ]}
-      />
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    alignItems: "center",
-    justifyContent: "center",
-  },
-  dot: {
-    shadowOffset: { width: 0, height: 0 },
-    shadowOpacity: 0.4,
-    shadowRadius: 3,
-  },
-});

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

@@ -1,319 +0,0 @@
-import React, { useEffect, useRef, useState, type ComponentType, type Ref } from "react";
-import {
-  Platform,
-  Pressable,
-  ScrollView as FallbackScrollView,
-  StyleSheet,
-  Text,
-  View,
-  type LayoutChangeEvent,
-  type ScrollView as ScrollViewInstance,
-  type StyleProp,
-  type ViewStyle,
-} from "react-native";
-import { getClientHost } from "../host";
-import { usePluginTheme } from "../theme/provider";
-import {
-  FALLBACK_ACCENT_FOREGROUND,
-  spacing,
-} from "../theme/tokens";
-
-export interface TabItem {
-  id: string;
-  label: string;
-  /**
-   * Optional abbreviated label for compact viewports in fit mode.
-   * e.g. label: "Interactive Controls", shortLabel: "Controls"
-   */
-  shortLabel?: string;
-  icon?: string;
-  badge?: string | number;
-}
-
-export interface TabsProps {
-  tabs: TabItem[];
-  activeTab: string;
-  onTabChange: (tabId: string) => void;
-  mode?: "auto" | "fit" | "scroll";
-  style?: StyleProp<ViewStyle>;
-}
-
-/** Minimal structural views of the DOM scroll node react-native-web exposes. */
-interface WheelScrollEvent {
-  deltaX?: number;
-  deltaY?: number;
-  preventDefault(): void;
-}
-
-interface WheelScrollNode {
-  scrollLeft: number;
-  clientWidth: number;
-  scrollWidth: number;
-  addEventListener(type: "wheel", listener: (event: WheelScrollEvent) => void, options?: { passive?: boolean }): void;
-  removeEventListener(type: "wheel", listener: (event: WheelScrollEvent) => void): void;
-}
-
-interface WheelScrollInstance {
-  getScrollableNode?(): WheelScrollNode | null;
-}
-
-export function Tabs({
-  tabs,
-  activeTab,
-  onTabChange,
-  mode = "auto",
-  style,
-}: TabsProps) {
-  const { Icon } = getClientHost();
-  // The tab strip scrolls horizontally, so it must be a plain React Native
-  // ScrollView: the host ScrollView is a vertical sheet-gesture controller
-  // and collapses/crashes when used horizontally (#219).
-  const { colors, resolveRadius, touchTargetMin, isCompact, alpha } = usePluginTheme();
-  const scrollRef = useRef<ScrollViewInstance>(null);
-  const tabLayouts = useRef<Record<string, { x: number; width: number }>>({});
-  const [viewportWidth, setViewportWidth] = useState<number>(0);
-
-  const radius = resolveRadius("sm");
-
-  // On compact/mobile or with <= 4 tabs, auto mode defaults to full-width fitting track
-  const shouldFit = mode === "fit" || (mode === "auto" && (isCompact || tabs.length <= 4));
-
-  // Accurately center the active tab inside the viewport ONLY when activeTab changes
-  const prevActiveTab = useRef<string>(activeTab);
-  useEffect(() => {
-    if (!shouldFit && scrollRef.current && tabLayouts.current[activeTab] && viewportWidth > 0) {
-      if (prevActiveTab.current !== activeTab) {
-        prevActiveTab.current = activeTab;
-        const { x, width } = tabLayouts.current[activeTab];
-        const targetX = Math.max(0, x - (viewportWidth - width) / 2);
-        scrollRef.current.scrollTo({
-          x: targetX,
-          animated: true,
-        });
-      }
-    }
-  }, [activeTab, shouldFit, viewportWidth]);
-
-  const handleTabLayout = (tabId: string, event: LayoutChangeEvent) => {
-    const { x, width } = event.nativeEvent.layout;
-    tabLayouts.current[tabId] = { x, width };
-  };
-
-  const handleContainerLayout = (event: LayoutChangeEvent) => {
-    const width = event.nativeEvent.layout.width;
-    setViewportWidth(width);
-  };
-
-  // Translate vertical mouse-wheel motion into horizontal tab-strip scrolling
-  // on web, while allowing the surrounding modal to scroll at either edge.
-  useEffect(() => {
-    if (shouldFit || Platform.OS !== "web") return;
-    const instance = scrollRef.current as unknown as WheelScrollInstance | null;
-    const node = instance?.getScrollableNode?.() ?? (instance as unknown as WheelScrollNode | null);
-    if (!node || typeof node.addEventListener !== "function") return;
-    const onWheel = (event: WheelScrollEvent) => {
-      const deltaX = event.deltaX ?? 0;
-      const deltaY = event.deltaY ?? 0;
-      if (Math.abs(deltaY) <= Math.abs(deltaX)) return;
-      const max = node.scrollWidth - node.clientWidth;
-      const next = Math.min(Math.max(0, node.scrollLeft + deltaY), max);
-      if (next === node.scrollLeft) return;
-      event.preventDefault();
-      node.scrollLeft = next;
-    };
-    node.addEventListener("wheel", onWheel, { passive: false });
-    return () => node.removeEventListener("wheel", onWheel);
-  }, [shouldFit]);
-
-  const renderTab = (tab: TabItem) => {
-    const isActive = tab.id === activeTab;
-    const displayLabel = shouldFit && isCompact && tab.shortLabel ? tab.shortLabel : tab.label;
-
-    return (
-      <Pressable
-        key={tab.id}
-        onPress={() => {
-          onTabChange(tab.id);
-        }}
-        onLayout={(e) => handleTabLayout(tab.id, e)}
-        accessibilityRole="tab"
-        accessibilityState={{ selected: isActive }}
-        style={({ pressed }) => [
-          styles.tab,
-          shouldFit ? styles.tabFit : styles.tabScroll,
-          {
-            borderRadius: radius - 2,
-            minHeight: Math.max(30, touchTargetMin - 8),
-            backgroundColor: isActive
-              ? colors.surface2
-              : pressed
-                ? alpha(colors.surface2, 0.5)
-                : "transparent",
-            paddingHorizontal: shouldFit
-              ? isCompact
-                ? (tabs.length > 3 ? spacing.xs : spacing.sm)
-                : (tabs.length >= 3 ? spacing.sm : spacing.md)
-              : spacing.md,
-            paddingVertical: isCompact ? spacing.xs : spacing.sm,
-          },
-        ]}
-      >
-        {tab.icon ? (
-          <Icon
-            name={tab.icon}
-            size={isCompact ? 11 : 13}
-            color={isActive ? colors.foreground : colors.foregroundMuted}
-          />
-        ) : null}
-        <Text
-          numberOfLines={1}
-          style={[
-            styles.tabText,
-            {
-              color: isActive ? colors.foreground : colors.foregroundMuted,
-              fontSize: isCompact ? 11 : 12,
-              fontWeight: isActive ? "600" : "500",
-            },
-          ]}
-        >
-          {displayLabel}
-        </Text>
-        {tab.badge !== undefined ? (
-          <View
-            style={[
-              styles.badge,
-              {
-                backgroundColor: isActive ? colors.accent : alpha(colors.foregroundMuted, 0.2),
-              },
-            ]}
-          >
-            <Text
-              style={[
-                styles.badgeText,
-                {
-                color: isActive
-                  ? colors.accentForeground || FALLBACK_ACCENT_FOREGROUND
-                  : colors.foregroundMuted,
-                },
-              ]}
-            >
-              {tab.badge}
-            </Text>
-          </View>
-        ) : null}
-      </Pressable>
-    );
-  };
-
-  // 1. FIT MODE: Closed bounded track frame
-  if (shouldFit) {
-    return (
-      <View
-        style={[
-          styles.frame,
-          {
-            backgroundColor: colors.surface1,
-            borderRadius: radius,
-            borderColor: colors.border,
-          },
-          style,
-        ]}
-      >
-        <View style={styles.trackFit}>
-          {tabs.map((tab) => renderTab(tab))}
-        </View>
-      </View>
-    );
-  }
-
-  // 2. SCROLL MODE: plain React Native horizontal scroller.
-  return (
-    <View
-      onLayout={handleContainerLayout}
-      style={[
-        styles.frame,
-        {
-          backgroundColor: colors.surface1,
-          borderRadius: radius,
-          borderColor: colors.border,
-        },
-        style,
-      ]}
-    >
-      <FallbackScrollView
-        ref={scrollRef}
-        horizontal
-        nestedScrollEnabled={true}
-        directionalLockEnabled={true}
-        keyboardShouldPersistTaps="handled"
-        showsHorizontalScrollIndicator={!isCompact}
-        style={styles.scrollView}
-        contentContainerStyle={styles.scrollContent}
-      >
-        {tabs.map((tab) => renderTab(tab))}
-      </FallbackScrollView>
-
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  frame: {
-    width: "100%",
-    maxWidth: "100%",
-    borderWidth: 1,
-    overflow: "hidden",
-    position: "relative",
-    justifyContent: "center",
-  },
-  trackFit: {
-    flexDirection: "row",
-    flexWrap: "nowrap",
-    alignItems: "center",
-    width: "100%",
-    padding: 3,
-    gap: 2,
-  },
-  scrollView: {
-    width: "100%",
-    maxWidth: "100%",
-  },
-  scrollContent: {
-    flexDirection: "row",
-    alignItems: "center",
-    padding: 3,
-    gap: 4,
-  },
-  tab: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "center",
-    gap: 4,
-    overflow: "hidden",
-  },
-  tabFit: {
-    flex: 1,
-    flexShrink: 1,
-    minWidth: 0,
-  },
-  tabScroll: {
-    flexShrink: 0,
-  },
-  tabText: {
-    textAlign: "center",
-    flexShrink: 1,
-    minWidth: 0,
-  },
-  badge: {
-    borderRadius: 9999,
-    paddingHorizontal: 5,
-    paddingVertical: 1,
-    minWidth: 16,
-    alignItems: "center",
-    justifyContent: "center",
-  },
-  badgeText: {
-    fontSize: 10,
-    fontWeight: "700",
-  },
-});

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

@@ -1,150 +0,0 @@
-import React, { useState, type ComponentType, type Ref } from "react";
-import {
-  StyleSheet,
-  Text,
-  TextInput as RNTextInput,
-  View,
-  type KeyboardTypeOptions,
-  type StyleProp,
-  type TextInputProps as RNTextInputProps,
-  type TextInput as RNTextInputInstance,
-  type TextStyle,
-  type ViewStyle,
-} from "react-native";
-import { getOptionalClientHost } from "../host";
-import { usePluginTheme } from "../theme/provider";
-
-export interface TextInputProps {
-  value: string;
-  onChangeText: (text: string) => void;
-  label?: string;
-  placeholder?: string;
-  helperText?: string;
-  errorText?: string;
-  secureTextEntry?: boolean;
-  keyboardType?: KeyboardTypeOptions;
-  autoCapitalize?: "none" | "sentences" | "words" | "characters";
-  autoCorrect?: boolean;
-  disabled?: boolean;
-  mono?: boolean;
-  multiline?: boolean;
-  numberOfLines?: number;
-  style?: StyleProp<ViewStyle>;
-  inputStyle?: StyleProp<TextStyle>;
-  onSubmitEditing?: () => void;
-}
-
-export function TextInput({
-  value,
-  onChangeText,
-  label,
-  placeholder,
-  helperText,
-  errorText,
-  secureTextEntry = false,
-  keyboardType = "default",
-  autoCapitalize = "none",
-  autoCorrect = false,
-  disabled = false,
-  mono = false,
-  multiline = false,
-  numberOfLines = 1,
-  style,
-  inputStyle,
-  onSubmitEditing,
-}: TextInputProps) {
-  const { colors, resolveRadius, isCompact, touchTargetMin, alpha } = usePluginTheme();
-  const [isFocused, setIsFocused] = useState(false);
-  const ResolvedInput = (getOptionalClientHost()?.TextInput ??
-    RNTextInput) as ComponentType<RNTextInputProps & { ref?: Ref<RNTextInputInstance> }>;
-
-  const radius = resolveRadius("md");
-  const hasError = Boolean(errorText);
-
-  const borderColor = hasError
-    ? colors.statusDanger
-    : isFocused
-      ? colors.accent
-      : colors.border;
-
-  const minHeight = multiline ? Math.max(touchTargetMin * 1.5, 64) : touchTargetMin;
-
-  return (
-    <View style={[styles.container, style]}>
-      {label ? (
-        <Text
-          style={[
-            styles.label,
-            {
-              color: hasError ? colors.statusDanger : colors.foreground,
-              fontSize: isCompact ? 12 : 13,
-            },
-          ]}
-        >
-          {label}
-        </Text>
-      ) : null}
-
-      <ResolvedInput
-        value={value}
-        onChangeText={onChangeText}
-        placeholder={placeholder}
-        placeholderTextColor={colors.foregroundMuted}
-        secureTextEntry={secureTextEntry}
-        keyboardType={keyboardType}
-        autoCapitalize={autoCapitalize}
-        autoCorrect={autoCorrect}
-        editable={!disabled}
-        multiline={multiline}
-        numberOfLines={numberOfLines}
-        onFocus={() => setIsFocused(true)}
-        onBlur={() => setIsFocused(false)}
-        onSubmitEditing={onSubmitEditing}
-        style={[
-          styles.input,
-          {
-            color: disabled ? colors.foregroundMuted : colors.foreground,
-            backgroundColor: disabled ? alpha(colors.surface1, 0.5) : colors.surface0,
-            borderColor,
-            borderRadius: radius,
-            minHeight,
-            paddingVertical: multiline ? 8 : 6,
-            paddingHorizontal: 10,
-            fontSize: isCompact ? 13 : 14,
-            fontFamily: mono ? "monospace" : undefined,
-          },
-          inputStyle,
-        ]}
-      />
-
-      {(errorText || helperText) && (
-        <Text
-          style={[
-            styles.hint,
-            {
-              color: hasError ? colors.statusDanger : colors.foregroundMuted,
-              fontSize: 11,
-            },
-          ]}
-        >
-          {errorText || helperText}
-        </Text>
-      )}
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    gap: 4,
-  },
-  label: {
-    fontWeight: "600",
-  },
-  input: {
-    borderWidth: 1,
-  },
-  hint: {
-    marginTop: 2,
-  },
-});

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

@@ -1,163 +0,0 @@
-import React from "react";
-import {
-  Pressable,
-  StyleSheet,
-  Text,
-  View,
-  type StyleProp,
-  type TextStyle,
-  type ViewStyle,
-} from "react-native";
-import { usePluginTheme } from "../theme/provider";
-import { resolveElevation } from "../theme/tokens";
-
-export interface ToggleProps {
-  value: boolean;
-  onValueChange: (next: boolean) => void;
-  label?: string;
-  description?: string;
-  disabled?: boolean;
-  style?: StyleProp<ViewStyle>;
-  labelStyle?: StyleProp<TextStyle>;
-}
-
-export function Toggle({
-  value,
-  onValueChange,
-  label,
-  description,
-  disabled = false,
-  style,
-  labelStyle,
-}: ToggleProps) {
-  const { colors, touchTargetMin, isCompact, alpha } = usePluginTheme();
-
-  const handlePress = () => {
-    if (!disabled) {
-      onValueChange(!value);
-    }
-  };
-
-  const trackWidth = 38;
-  const trackHeight = 22;
-  const thumbSize = 16;
-  const thumbPadding = 3;
-
-  const trackColor = value
-    ? colors.accent
-    : alpha(colors.foregroundMuted, 0.35);
-
-  const thumbPosition = value
-    ? trackWidth - thumbSize - thumbPadding
-    : thumbPadding;
-
-  const hasText = Boolean(label || description);
-
-  return (
-    <Pressable
-      onPress={handlePress}
-      disabled={disabled}
-      hitSlop={Math.max(0, (touchTargetMin - trackHeight) / 2)}
-      style={({ pressed }) => [
-        styles.container,
-        !hasText && styles.bareContainer,
-        {
-          minHeight: touchTargetMin,
-          opacity: disabled ? 0.5 : pressed ? 0.8 : 1,
-        },
-        style,
-      ]}
-    >
-      {(label || description) && (
-        <View style={styles.textContainer}>
-          {label && (
-            <Text
-              style={[
-                styles.label,
-                {
-                  color: colors.foreground,
-                  fontSize: isCompact ? 13 : 14,
-                },
-                labelStyle,
-              ]}
-            >
-              {label}
-            </Text>
-          )}
-          {description && (
-            <Text
-              style={[
-                styles.description,
-                {
-                  color: colors.foregroundMuted,
-                  fontSize: 11,
-                },
-              ]}
-            >
-              {description}
-            </Text>
-          )}
-        </View>
-      )}
-
-      <View
-        style={[
-          styles.track,
-          {
-            width: trackWidth,
-            height: trackHeight,
-            borderRadius: trackHeight / 2,
-            backgroundColor: trackColor,
-          },
-        ]}
-      >
-        <View
-          style={[
-            styles.thumb,
-            {
-              width: thumbSize,
-              height: thumbSize,
-              borderRadius: thumbSize / 2,
-              backgroundColor: colors.surface0,
-              transform: [{ translateX: thumbPosition }],
-            },
-          ]}
-        />
-      </View>
-    </Pressable>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    gap: 12,
-    width: "100%",
-  },
-  bareContainer: {
-    width: "auto",
-    alignSelf: "flex-start",
-    flexShrink: 0,
-    justifyContent: "flex-start",
-  },
-  textContainer: {
-    flex: 1,
-    minWidth: 0,
-    gap: 2,
-  },
-  label: {
-    fontWeight: "500",
-  },
-  description: {
-    lineHeight: 15,
-  },
-  track: {
-    justifyContent: "center",
-    flexShrink: 0,
-  },
-  thumb: {
-    ...resolveElevation("sm"),
-  },
-});