@xpufx/paseo-x-comms 0.3.0

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

@@ -0,0 +1,247 @@
+import React, { type ReactNode } from "react";
+import { Platform, StyleSheet, Text, View, type StyleProp, type ViewStyle } from "react-native";
+import { usePluginTheme } from "../theme/provider";
+import { resolveMetricStatus, type MetricThresholds } from "../../../../shared/vendor/paseo-plugin-helper/formatters";
+
+export interface MetricGaugeProps {
+  value: number; // 0 - 100
+  size?: number;
+  strokeWidth?: number;
+  thresholds?: MetricThresholds;
+  color?: string;
+  autoStatusColor?: boolean;
+  label?: string;
+  showPercent?: boolean;
+  centerSlot?: ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+/**
+ * Clean circular metric gauge.
+ * Displays a proportional percentage ring with automated threshold coloring and center slot.
+ */
+export function MetricGauge({
+  value,
+  size = 76,
+  strokeWidth = 7,
+  thresholds,
+  color,
+  autoStatusColor = true,
+  label,
+  showPercent = true,
+  centerSlot,
+  style,
+}: MetricGaugeProps) {
+  const { colors } = usePluginTheme();
+
+  const clamped = Math.max(0, Math.min(100, Number.isFinite(value) ? value : 0));
+
+  let gaugeColor = color || colors.accent;
+  if (!color && autoStatusColor) {
+    const status = resolveMetricStatus(clamped, thresholds);
+    if (status === "danger") {
+      gaugeColor = colors.statusDanger;
+    } else if (status === "warning") {
+      gaugeColor = colors.statusWarning;
+    } else {
+      gaugeColor = colors.statusSuccess;
+    }
+  }
+
+  const radius = size / 2;
+  const innerSize = Math.max(0, size - strokeWidth * 2);
+  const innerRadius = innerSize / 2;
+  const trackColor = colors.surface2;
+
+  // Web & React Native Web: Conic gradient provides a pixel-perfect proportional ring arc
+  if (Platform.OS === "web") {
+    const webBackground = `conic-gradient(${gaugeColor} 0% ${clamped}%, ${trackColor} ${clamped}% 100%)`;
+
+    return (
+      <View style={[styles.wrapper, style]}>
+        <View
+          style={[
+            styles.gaugeBox,
+            {
+              width: size,
+              height: size,
+              borderRadius: radius,
+            },
+            ({ background: webBackground } as any),
+          ]}
+        >
+          {/* Inner cutout mask */}
+          <View
+            style={[
+              styles.centerHole,
+              {
+                width: innerSize,
+                height: innerSize,
+                borderRadius: innerRadius,
+                backgroundColor: colors.surface0,
+              },
+            ]}
+          >
+            {centerSlot ? (
+              centerSlot
+            ) : showPercent ? (
+              <Text style={[styles.percentText, { color: colors.foreground }]}>
+                {Math.round(clamped)}%
+              </Text>
+            ) : null}
+          </View>
+        </View>
+
+        {label ? (
+          <Text style={[styles.labelText, { color: colors.foregroundMuted }]}>
+            {label}
+          </Text>
+        ) : null}
+      </View>
+    );
+  }
+
+  // Native (iOS/Android): Two-semicircle clipping approach
+  const firstHalfRotation = Math.min(180, clamped * 3.6);
+  const secondHalfRotation = clamped > 50 ? (clamped - 50) * 3.6 : 0;
+
+  return (
+    <View style={[styles.wrapper, style]}>
+      <View style={[styles.gaugeBox, { width: size, height: size }]}>
+        {/* Background track circle */}
+        <View
+          style={[
+            StyleSheet.absoluteFillObject,
+            {
+              borderRadius: radius,
+              borderWidth: strokeWidth,
+              borderColor: trackColor,
+            },
+          ]}
+        />
+
+        {/* First 180 degrees */}
+        <View
+          style={[
+            styles.halfCircleContainer,
+            {
+              width: size,
+              height: size,
+              transform: [{ rotate: `${firstHalfRotation}deg` }],
+            },
+          ]}
+        >
+          <View
+            style={[
+              styles.halfCircle,
+              {
+                width: size,
+                height: size,
+                borderRadius: radius,
+                borderWidth: strokeWidth,
+                borderColor: gaugeColor,
+                borderBottomColor: "transparent",
+                borderLeftColor: "transparent",
+              },
+            ]}
+          />
+        </View>
+
+        {/* Second 180 degrees */}
+        {clamped > 50 ? (
+          <View
+            style={[
+              styles.halfCircleContainer,
+              {
+                width: size,
+                height: size,
+                transform: [{ rotate: `${secondHalfRotation + 180}deg` }],
+              },
+            ]}
+          >
+            <View
+              style={[
+                styles.halfCircle,
+                {
+                  width: size,
+                  height: size,
+                  borderRadius: radius,
+                  borderWidth: strokeWidth,
+                  borderColor: gaugeColor,
+                  borderBottomColor: "transparent",
+                  borderLeftColor: "transparent",
+                },
+              ]}
+            />
+          </View>
+        ) : null}
+
+        {/* Center Content Slot */}
+        <View
+          style={[
+            styles.centerHole,
+            {
+              width: innerSize,
+              height: innerSize,
+              borderRadius: innerRadius,
+              backgroundColor: colors.surface0,
+            },
+          ]}
+        >
+          {centerSlot ? (
+            centerSlot
+          ) : showPercent ? (
+            <Text style={[styles.percentText, { color: colors.foreground }]}>
+              {Math.round(clamped)}%
+            </Text>
+          ) : null}
+        </View>
+      </View>
+
+      {label ? (
+        <Text style={[styles.labelText, { color: colors.foregroundMuted }]}>
+          {label}
+        </Text>
+      ) : null}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  wrapper: {
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 6,
+  },
+  gaugeBox: {
+    position: "relative",
+    alignItems: "center",
+    justifyContent: "center",
+    overflow: "hidden",
+  },
+  centerHole: {
+    position: "absolute",
+    alignItems: "center",
+    justifyContent: "center",
+    zIndex: 10,
+  },
+  halfCircleContainer: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    overflow: "hidden",
+  },
+  halfCircle: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+  },
+  percentText: {
+    fontSize: 13,
+    fontWeight: "700",
+  },
+  labelText: {
+    fontSize: 11,
+    fontWeight: "500",
+  },
+});

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

@@ -0,0 +1,117 @@
+import React from "react";
+import { StyleSheet, Text, View, type StyleProp, type ViewStyle } from "react-native";
+import { usePluginTheme } from "../theme/provider";
+import { resolveMetricStatus, type MetricThresholds } from "../../../../shared/vendor/paseo-plugin-helper/formatters";
+
+export interface ProgressBarProps {
+  value: number; // 0 to 100
+  color?: string;
+  autoStatusColor?: boolean;
+  thresholds?: MetricThresholds;
+  label?: string;
+  showValueText?: boolean;
+  height?: number;
+  style?: StyleProp<ViewStyle>;
+}
+
+export function ProgressBar({
+  value,
+  color,
+  autoStatusColor = true,
+  thresholds,
+  label,
+  showValueText = false,
+  height = 8,
+  style,
+}: ProgressBarProps) {
+  const { colors, resolveRadius, typography } = usePluginTheme();
+
+  const clamped = Math.max(0, Math.min(100, Number.isFinite(value) ? value : 0));
+  const radius = resolveRadius("pill");
+
+  let barColor = color || colors.accent;
+  if (!color && autoStatusColor) {
+    const status = resolveMetricStatus(clamped, thresholds);
+    if (status === "danger") {
+      barColor = colors.statusDanger;
+    } else if (status === "warning") {
+      barColor = colors.statusWarning;
+    } else {
+      barColor = colors.statusSuccess;
+    }
+  }
+
+  return (
+    <View style={[styles.container, style]}>
+      {(label || showValueText) && (
+        <View style={styles.labelRow}>
+          {label ? (
+            <Text
+              style={[
+                styles.labelText,
+                { color: colors.foregroundMuted, ...typography.caption },
+              ]}
+            >
+              {label}
+            </Text>
+          ) : null}
+          {showValueText ? (
+            <Text
+              style={[
+                styles.valueText,
+                { color: colors.foreground, ...typography.caption, fontWeight: "600" },
+              ]}
+            >
+              {Math.round(clamped)}%
+            </Text>
+          ) : null}
+        </View>
+      )}
+      <View
+        style={[
+          styles.track,
+          {
+            backgroundColor: colors.surface2,
+            height,
+            borderRadius: radius,
+          },
+        ]}
+      >
+        <View
+          style={[
+            styles.fill,
+            {
+              width: `${clamped}%`,
+              backgroundColor: barColor,
+              borderRadius: radius,
+            },
+          ]}
+        />
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    gap: 4,
+  },
+  labelRow: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+  },
+  labelText: {
+    fontWeight: "500",
+  },
+  valueText: {
+    fontWeight: "600",
+  },
+  track: {
+    width: "100%",
+    overflow: "hidden",
+  },
+  fill: {
+    height: "100%",
+  },
+});

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

@@ -0,0 +1,53 @@
+import React, { type ReactNode } from "react";
+import { useResponsive, type UseResponsiveResult } from "../theme/useResponsive";
+
+export interface ResponsiveProps {
+  /**
+   * Content to render on desktop / wide viewports.
+   */
+  desktop?: ReactNode;
+  /**
+   * Content to render on mobile platforms ('ios' | 'android').
+   */
+  mobile?: ReactNode;
+  /**
+   * Content to render when in compact mode (narrow trackbar, mobile bottom sheet, or split view).
+   */
+  compact?: ReactNode;
+  /**
+   * Content to render when in wide mode (not compact).
+   */
+  wide?: ReactNode;
+  /**
+   * Render function taking `UseResponsiveResult` or children.
+   */
+  children?: ReactNode | ((responsive: UseResponsiveResult) => ReactNode);
+}
+
+/**
+ * Declarative component for rendering different UI elements across desktop, mobile, and compact layouts.
+ *
+ * @example
+ * ```tsx
+ * <Responsive
+ *   desktop={<DataTable columns={["ID", "Name", "Status", "Latency"]} data={items} />}
+ *   mobile={<DataTable columns={["Name", "Status"]} data={items} />}
+ * />
+ * ```
+ */
+export function Responsive({ desktop, mobile, compact, wide, children }: ResponsiveProps) {
+  const responsive = useResponsive();
+
+  if (typeof children === "function") {
+    return <>{children(responsive)}</>;
+  }
+
+  const selected = responsive.select<ReactNode>({
+    desktop,
+    mobile,
+    compact,
+    wide,
+  });
+
+  return <>{selected ?? children ?? null}</>;
+}

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

@@ -0,0 +1,118 @@
+import React, { type ComponentType, type Ref } from "react";
+import {
+  StyleSheet,
+  TextInput as RNTextInput,
+  View,
+  Pressable,
+  type StyleProp,
+  type ViewStyle,
+  type TextStyle,
+  type TextInputProps as RNTextInputProps,
+  type TextInput as RNTextInputInstance,
+} from "react-native";
+import { getClientHost, getOptionalClientHost } from "../host";
+import { usePluginTheme } from "../theme/provider";
+
+export interface SearchInputProps {
+  value: string;
+  onChangeText: (text: string) => void;
+  placeholder?: string;
+  onClear?: () => void;
+  style?: StyleProp<ViewStyle>;
+  inputStyle?: StyleProp<TextStyle>;
+  testID?: string;
+}
+
+/**
+ * Standardized search input with search icon, clear button, and theme support.
+ */
+export function SearchInput({
+  value,
+  onChangeText,
+  placeholder = "Search...",
+  onClear,
+  style,
+  inputStyle,
+  testID,
+}: SearchInputProps) {
+  const { Icon } = getClientHost();
+  const ResolvedInput = (getOptionalClientHost()?.TextInput ??
+    RNTextInput) as ComponentType<RNTextInputProps & { ref?: Ref<RNTextInputInstance> }>;
+  const { colors, resolveRadius, isCompact } = usePluginTheme();
+  const radius = resolveRadius("sm");
+
+  const handleClear = () => {
+    onChangeText("");
+    if (onClear) onClear();
+  };
+
+  return (
+    <View
+      style={[
+        styles.container,
+        {
+          backgroundColor: colors.surface1,
+          borderColor: colors.border,
+          borderRadius: radius,
+          height: isCompact ? 36 : 40,
+        },
+        style,
+      ]}
+    >
+      <View style={styles.iconWrapper}>
+        <Icon name="Search" size={16} color={colors.foregroundMuted} />
+      </View>
+      <ResolvedInput
+        testID={testID}
+        value={value}
+        onChangeText={onChangeText}
+        placeholder={placeholder}
+        placeholderTextColor={colors.foregroundMuted}
+        style={[
+          styles.input,
+          {
+            color: colors.foreground,
+            fontSize: isCompact ? 13 : 14,
+          },
+          inputStyle,
+        ]}
+        returnKeyType="search"
+        autoCapitalize="none"
+        autoCorrect={false}
+      />
+      {Boolean(value) && (
+        <Pressable
+          onPress={handleClear}
+          style={styles.clearButton}
+          hitSlop={8}
+          accessibilityLabel="Clear search"
+        >
+          <Icon name="X" size={14} color={colors.foregroundMuted} />
+        </Pressable>
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    borderWidth: 1,
+    paddingHorizontal: 10,
+  },
+  iconWrapper: {
+    marginRight: 8,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  input: {
+    flex: 1,
+    paddingVertical: 0,
+    outlineWidth: 0,
+  },
+  clearButton: {
+    padding: 4,
+    marginLeft: 4,
+  },
+});

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

@@ -0,0 +1,80 @@
+import React from "react";
+import {
+  StyleSheet,
+  Text,
+  View,
+  type StyleProp,
+  type TextStyle,
+  type ViewStyle,
+} from "react-native";
+import { usePluginTheme } from "../theme/provider";
+import type { StatusVariant } from "../../../../shared/vendor/paseo-plugin-helper/types";
+import { Badge } from "./Badge";
+
+export interface SectionHeaderProps {
+  title: string;
+  /** Optional count — shown as a Badge (warning variant when > 0, neutral otherwise) */
+  count?: number;
+  /** Badge variant override */
+  badgeVariant?: StatusVariant;
+  style?: StyleProp<ViewStyle>;
+  textStyle?: StyleProp<TextStyle>;
+}
+
+export function SectionHeader({
+  title,
+  count,
+  badgeVariant,
+  style,
+  textStyle,
+}: SectionHeaderProps): React.ReactElement | null {
+  const theme = usePluginTheme();
+  const titleType = theme.typography?.bodyStrong ?? {
+    fontSize: 13,
+    lineHeight: 19,
+    fontWeight: "600" as const,
+  };
+  const headingTransform = (theme.flair?.headingTransform ?? "none") === "uppercase"
+    ? "uppercase"
+    : "none";
+
+  return (
+    <View style={[styles.container, style]}>
+      <Text
+        style={[
+          styles.title,
+          {
+            color: theme.colors.foregroundMuted,
+            textTransform: headingTransform,
+            fontSize: titleType.fontSize,
+            lineHeight: titleType.lineHeight,
+            fontWeight: titleType.fontWeight,
+          },
+          textStyle,
+        ]}
+      >
+        {title}
+      </Text>
+      {count !== undefined ? (
+        <Badge
+          label={String(count)}
+          variant={badgeVariant ?? (count > 0 ? "warning" : "neutral")}
+          styleVariant={count > 0 ? "solid" : "tinted"}
+        />
+      ) : null}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    marginTop: 8,
+    marginBottom: 2,
+  },
+  title: {
+    letterSpacing: 0.8,
+  },
+});