@xpufx/paseo-x-comms 0.3.0

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

@@ -0,0 +1,215 @@
+import React, { useState } from "react";
+import {
+  Pressable,
+  ScrollView as FallbackScrollView,
+  StyleSheet,
+  Text,
+  View,
+  type StyleProp,
+  type ViewStyle,
+} from "react-native";
+import { getClientHost } from "../host";
+import { usePluginTheme } from "../theme/provider";
+import { spacing } from "../theme/tokens";
+import type { BadgeSize } from "./Badge";
+
+export interface SelectOption {
+  label: string;
+  value: string;
+}
+
+export interface SelectProps {
+  value: string;
+  options: SelectOption[];
+  onValueChange: (value: string) => void;
+  label?: string;
+  /** Compact/pill scale shared with {@link Badge}: `"md"` (default) or `"sm"`. */
+  size?: BadgeSize;
+  placeholder?: string;
+  disabled?: boolean;
+  style?: StyleProp<ViewStyle>;
+}
+
+const OPTION_LIST_MAX_HEIGHT = 216;
+
+/**
+ * Compact single-choice picker sized to sit inside a {@link FormRow}. The
+ * closed trigger stays one line tall; opening reveals a bounded, scrollable
+ * option list, so a long list degrades to scrolling rather than overflow.
+ */
+export function Select({
+  value,
+  options,
+  onValueChange,
+  label,
+  size = "md",
+  placeholder = "Select…",
+  disabled = false,
+  style,
+}: SelectProps) {
+  const { Icon } = getClientHost();
+  // The dropdown option list is a bounded box nested inside the host sheet,
+  // so it scrolls with a plain React Native ScrollView — never the host
+  // sheet-gesture scroller (#219).
+  const { colors, resolveRadius, typography, isCompact, touchTargetMin, alpha } =
+    usePluginTheme();
+  const [open, setOpen] = useState(false);
+
+  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" ? 3 : 6;
+  const paddingHorizontal = size === "sm" ? 8 : 10;
+  const iconSize = size === "sm" ? 12 : 14;
+  const radius = resolveRadius("md");
+
+  // A free-text value (advanced entry) may not be one of the options; surface
+  // it on the trigger rather than masking it behind the placeholder.
+  const selected = options.find((option) => option.value === value);
+  const display = selected?.label ?? (value ? value : placeholder);
+  const canOpen = !disabled && options.length > 0;
+  const isOpen = open && canOpen;
+
+  const triggerMinHeight = size === "sm" ? 28 : Math.max(34, touchTargetMin);
+
+  return (
+    <View style={[styles.container, style]}>
+      <Pressable
+        accessibilityRole="button"
+        accessibilityLabel={label ? `${label}: ${display}` : display}
+        accessibilityState={{ expanded: isOpen, disabled }}
+        disabled={!canOpen}
+        onPress={() => setOpen((prev) => !prev)}
+        style={({ pressed }) => [
+          styles.trigger,
+          {
+            minHeight: triggerMinHeight,
+            borderRadius: radius,
+            borderColor: isOpen ? colors.accent : colors.border,
+            backgroundColor:
+              disabled || !canOpen
+                ? alpha(colors.surface1, 0.5)
+                : pressed
+                  ? colors.surface2
+                  : colors.surface0,
+            paddingVertical,
+            paddingHorizontal,
+          },
+        ]}
+      >
+        <Text
+          numberOfLines={1}
+          style={[
+            styles.triggerText,
+            {
+              color: disabled || !canOpen ? colors.foregroundMuted : colors.foreground,
+              fontSize,
+              lineHeight,
+              fontWeight: selected ? "600" : "500",
+            },
+          ]}
+        >
+          {display}
+        </Text>
+        <Icon
+          name={isOpen ? "ChevronUp" : "ChevronDown"}
+          size={iconSize}
+          color={colors.foregroundMuted}
+        />
+      </Pressable>
+
+      {isOpen ? (
+        <View
+          style={[
+            styles.optionList,
+            {
+              borderRadius: radius,
+              borderColor: colors.border,
+              backgroundColor: colors.surface0,
+              marginTop: spacing.xs,
+            },
+          ]}
+        >
+          <FallbackScrollView
+            nestedScrollEnabled
+            keyboardShouldPersistTaps="handled"
+            style={{ maxHeight: OPTION_LIST_MAX_HEIGHT }}
+          >
+            {options.map((option) => {
+              const isSelected = option.value === value;
+              return (
+                <Pressable
+                  key={option.value}
+                  accessibilityRole="button"
+                  accessibilityLabel={option.label}
+                  accessibilityState={{ selected: isSelected }}
+                  onPress={() => {
+                    onValueChange(option.value);
+                    setOpen(false);
+                  }}
+                  style={({ pressed }) => [
+                    styles.option,
+                    {
+                      paddingVertical,
+                      paddingHorizontal,
+                      backgroundColor: isSelected
+                        ? colors.surface2
+                        : pressed
+                          ? alpha(colors.surface2, 0.5)
+                          : "transparent",
+                    },
+                  ]}
+                >
+                  <Text
+                    numberOfLines={1}
+                    style={[
+                      styles.optionText,
+                      {
+                        color: isSelected ? colors.foreground : colors.foregroundMuted,
+                        fontSize: isCompact ? fontSize : fontSize + 1,
+                        lineHeight,
+                        fontWeight: isSelected ? "600" : "400",
+                      },
+                    ]}
+                  >
+                    {option.label}
+                  </Text>
+                </Pressable>
+              );
+            })}
+          </FallbackScrollView>
+        </View>
+      ) : null}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    width: "100%",
+  },
+  trigger: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: spacing.sm,
+    borderWidth: 1,
+  },
+  triggerText: {
+    flexShrink: 1,
+    minWidth: 0,
+  },
+  optionList: {
+    borderWidth: 1,
+    overflow: "hidden",
+  },
+  option: {},
+  optionText: {
+    flexShrink: 1,
+    minWidth: 0,
+  },
+});

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

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

@@ -0,0 +1,319 @@
+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",
+  },
+});