@xpufx/paseo-forges 0.1.0

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

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

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

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

@@ -0,0 +1,157 @@
+import React, { useState } from "react";
+import {
+  View,
+  Text,
+  Pressable,
+  StyleSheet,
+  StyleProp,
+  ViewStyle,
+  TextStyle,
+  Platform,
+} from "react-native";
+import { usePluginTheme } from "../theme/index";
+import { getClientHost } from "../host";
+import { copyToClipboard } from "../utils/clipboard";
+import {
+  truncate,
+  truncateMiddle,
+  truncatePath,
+  TruncatePathOptions,
+} from "../../../../shared/vendor/paseo-plugin-helper/formatters";
+
+export type TruncateMode = "end" | "middle" | "path";
+
+export interface TruncatedTextProps {
+  /** The full, raw text string (e.g. UUID, file path, commit SHA, token) */
+  text: string;
+  /** Maximum length allowed before truncation. Default: 32 */
+  maxLength?: number;
+  /** Truncation algorithm: "middle" (UUIDs/hashes), "path" (directory paths), or "end" (standard). Default: "middle" */
+  mode?: TruncateMode;
+  /** Additional path truncation options when mode="path" */
+  pathOptions?: TruncatePathOptions;
+  /** Whether to render an inline copy button. Default: true */
+  copyable?: boolean;
+  /** Use monospace font. Default: true */
+  mono?: boolean;
+  /** Toast message on successful copy. Default: "Copied" */
+  toastMessage?: string;
+  /** Custom container style */
+  style?: StyleProp<ViewStyle>;
+  /** Custom text style */
+  textStyle?: StyleProp<TextStyle>;
+}
+
+/**
+ * Renders long strings (paths, UUIDs, hashes) shortened with smart truncation,
+ * while preserving the full untruncated string for one-click clipboard copying.
+ */
+export function TruncatedText({
+  text,
+  maxLength = 32,
+  mode = "middle",
+  pathOptions,
+  copyable = true,
+  mono = true,
+  toastMessage = "Copied",
+  style,
+  textStyle,
+}: TruncatedTextProps) {
+  const { colors, fonts, isCompact, touchTargetMin } = usePluginTheme();
+  const { Icon, useToast } = getClientHost();
+  const toast = useToast();
+  const [copied, setCopied] = useState(false);
+
+  if (!text) {
+    return <Text style={[{ color: colors.foregroundMuted }, textStyle]}>-</Text>;
+  }
+
+  let formattedText = text;
+  if (text.length > maxLength) {
+    switch (mode) {
+      case "path":
+        formattedText = truncatePath(text, maxLength, pathOptions);
+        break;
+      case "end":
+        formattedText = truncate(text, maxLength);
+        break;
+      case "middle":
+      default:
+        formattedText = truncateMiddle(text, maxLength);
+        break;
+    }
+  }
+
+  const handleCopy = async () => {
+    if (!copyable || !text) return;
+    const ok = await copyToClipboard(text, {
+      toast,
+      toastMessage,
+    });
+    if (ok) {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    }
+  };
+
+  const fontFamily = mono
+    ? fonts.mono ?? Platform.select({ ios: "Menlo", android: "monospace", default: "monospace" })
+    : undefined;
+
+  return (
+    <View style={[styles.container, style]}>
+      <Text
+        selectable
+        numberOfLines={1}
+        ellipsizeMode="clip"
+        accessibilityLabel={text}
+        style={[
+          styles.text,
+          {
+            color: colors.foreground,
+            fontFamily,
+          },
+          textStyle,
+        ]}
+      >
+        {formattedText}
+      </Text>
+
+      {copyable && (
+        <Pressable
+          onPress={handleCopy}
+          hitSlop={Math.max(8, (touchTargetMin - 20) / 2)}
+          style={styles.copyBtn}
+          accessibilityRole="button"
+          accessibilityLabel={`Copy ${text}`}
+        >
+          <Icon
+            name={copied ? "Check" : "Copy"}
+            size={isCompact ? 12 : 13}
+            color={copied ? colors.statusSuccess : colors.foregroundMuted}
+          />
+        </Pressable>
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    maxWidth: "100%",
+    gap: 6,
+  },
+  text: {
+    fontSize: 12,
+    lineHeight: 18,
+    flexShrink: 1,
+  },
+  copyBtn: {
+    padding: 3,
+    borderRadius: 4,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+});

package/client/vendor/paseo-plugin-helper/components/index.ts

@@ -0,0 +1,25 @@
+export * from "./Button";
+export * from "./InlineButton";
+export * from "./AttentionBeacon";
+export * from "./Badge";
+export * from "./StatusDot";
+export * from "./Card";
+export * from "./Tabs";
+export * from "./CodeBlock";
+export * from "./CopyButton";
+export * from "./SearchInput";
+export * from "./TextInput";
+export * from "./Select";
+export * from "./Toggle";
+export * from "./Collapsible";
+export * from "./ProgressBar";
+export * from "./MetricGauge";
+export * from "./DataTable";
+export * from "./KeyValue";
+export * from "./EmptyState";
+export * from "./Responsive";
+export * from "./AboutSection";
+export * from "./TruncatedText";
+export * from "./CommandBox";
+export * from "./SectionHeader";
+export * from "./HighlightedText";

package/client/vendor/paseo-plugin-helper/custom-pills.tsx

@@ -0,0 +1,224 @@
+import React, { useState, useCallback } from "react";
+import { StyleSheet, Text, View } from "react-native";
+import type { ComposerPillRegistrar, PluginCleanup } from "./host";
+import { getClientHost } from "./host";
+import { usePluginTheme } from "./theme/provider";
+import { useResponsive } from "./theme/useResponsive";
+import type { VisualFlair } from "./theme/flair";
+import type { CustomPillState } from "../../../shared/vendor/paseo-plugin-helper/custom-pills";
+import { Badge } from "./components/Badge";
+import { Button } from "./components/Button";
+import { Card } from "./components/Card";
+import { CodeBlock } from "./components/CodeBlock";
+import { registerComposerPill } from "./pill";
+
+export interface CustomPillBodyProps {
+  state: CustomPillState;
+}
+
+/**
+ * Standard pill body renderer for a custom metric pill in the composer trackbar.
+ * Automatically adapts to responsive compact/mobile modes and shows threshold status.
+ */
+export function CustomPillBody({ state }: CustomPillBodyProps) {
+  const { Icon } = getClientHost();
+  const { colors } = usePluginTheme();
+  const { isCompact } = useResponsive();
+
+  const title = isCompact && state.compactTitle ? state.compactTitle : state.title;
+  const icon = isCompact && state.compactIcon ? state.compactIcon : state.icon;
+
+  return (
+    <View style={styles.pillContainer}>
+      {icon && <Icon name={icon} size={13} color={colors.foreground} />}
+      {title ? (
+        <Text style={[styles.pillTitle, { color: colors.foreground }]}>{title}</Text>
+      ) : null}
+      <Badge
+        label={state.displayValue}
+        variant={state.status}
+        styleVariant="tinted"
+        style={styles.pillBadge}
+      />
+    </View>
+  );
+}
+
+export interface CustomPillModalContentProps {
+  state: CustomPillState;
+  onRefresh?: () => Promise<void> | void;
+  isRefreshing?: boolean;
+}
+
+/**
+ * Full modal inspection content for a custom metric pill.
+ * Shows status, preformatted command output, last updated time, and quick actions.
+ *
+ * Sized by the host: the root fills the host-allocated modal frame (flex/fluid)
+ * so changing output never drives the dialog size.
+ */
+export function CustomPillModalContent({
+  state,
+  onRefresh,
+  isRefreshing = false,
+}: CustomPillModalContentProps) {
+  const { colors, isCompact } = usePluginTheme();
+
+  const displayText =
+    state.modalOutput || state.rawValue || (state.error ? `Error: ${state.error}` : "No output");
+
+  return (
+    <View style={styles.modalContent}>
+      <Card>
+        <Card.Header
+          title={state.modalTitle ?? state.title}
+          subtitle={state.modalDescription}
+          icon={state.icon}
+          badge={<Badge label={state.displayValue} variant={state.status} />}
+          action={
+            onRefresh ? (
+              <Button
+                variant="secondary"
+                size="sm"
+                icon="RefreshCw"
+                loading={isRefreshing}
+                label={!isCompact ? "Refresh" : undefined}
+                onPress={() => onRefresh()}
+              />
+            ) : undefined
+          }
+        />
+
+        {/* Monospace Code & Output Box with Built-in Copy */}
+        <CodeBlock
+          code={displayText}
+          title={state.modalTitle ?? state.title}
+          maxHeight={280}
+          copyable={true}
+        />
+
+        {/* Footer info */}
+        <View style={styles.footerRow}>
+          <Text style={[styles.timestampText, { color: colors.foregroundMuted }]}>
+            Last updated: {new Date(state.lastUpdated).toLocaleTimeString()}
+          </Text>
+        </View>
+      </Card>
+    </View>
+  );
+}
+
+export interface RegisterCustomPillsOptions {
+  /**
+   * The list of custom pill states or definitions.
+   */
+  pills: CustomPillState[];
+
+  /**
+   * Callback invoked when a pill needs a fresh refresh or modal command run.
+   */
+  onRefreshModal?: (pillId: string) => Promise<{ output?: string; error?: string }>;
+
+  /**
+   * Optional visual flair overrides.
+   */
+  flair?: Partial<VisualFlair>;
+}
+
+/**
+ * Registers one or more declarative custom metric pills into Paseo's composer trackbar.
+ * Automatically handles pill lifecycle, responsive layouts, and drill-down inspection modals.
+ */
+export function registerCustomPills(
+  client: ComposerPillRegistrar,
+  options: RegisterCustomPillsOptions,
+): PluginCleanup {
+  const cleanups: PluginCleanup[] = [];
+
+  for (const pill of options.pills) {
+    const cleanup = registerComposerPill(client, {
+      id: pill.id,
+      title: pill.title,
+      compactTitle: pill.compactTitle,
+      icon: pill.icon,
+      compactIcon: pill.compactIcon,
+      flair: options.flair,
+      resolveLabel: () =>
+        pill.displayValue ? `${pill.title} ${pill.displayValue}` : pill.title,
+      renderPill: () => <CustomPillBody state={pill} />,
+      renderModal: () => {
+        const [refreshing, setRefreshing] = useState(false);
+        const [currentOutput, setCurrentOutput] = useState<string | undefined>(
+          pill.modalOutput,
+        );
+
+        const handleRefresh = useCallback(async () => {
+          if (!options.onRefreshModal) return;
+          setRefreshing(true);
+          try {
+            const res = await options.onRefreshModal(pill.id);
+            if (res.output) {
+              setCurrentOutput(res.output);
+            }
+          } finally {
+            setRefreshing(false);
+          }
+        }, [pill.id]);
+
+        const activeState: CustomPillState = {
+          ...pill,
+          modalOutput: currentOutput ?? pill.modalOutput,
+        };
+
+        return (
+          <CustomPillModalContent
+            state={activeState}
+            onRefresh={options.onRefreshModal ? handleRefresh : undefined}
+            isRefreshing={refreshing}
+          />
+        );
+      },
+    });
+
+    cleanups.push(cleanup);
+  }
+
+  return () => {
+    for (const dispose of cleanups) {
+      dispose();
+    }
+  };
+}
+
+const styles = StyleSheet.create({
+  modalContent: {
+    flex: 1,
+    minHeight: 0,
+    width: "100%",
+    padding: 12,
+  },
+  pillContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
+    paddingHorizontal: 8,
+    paddingVertical: 3,
+  },
+  pillTitle: {
+    fontSize: 12,
+    fontWeight: "500",
+  },
+  pillBadge: {
+    paddingVertical: 1,
+    paddingHorizontal: 5,
+  },
+  footerRow: {
+    flexDirection: "row",
+    justifyContent: "flex-end",
+    alignItems: "center",
+    marginTop: 8,
+  },
+  timestampText: {
+    fontSize: 11,
+  },
+});