@xpufx/paseo-helper-demo 0.2.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/core/index.ts

@@ -0,0 +1,64 @@
+/**
+ * Paseo Plugin Helper — Core Runtime (Headless, CLIENT-SAFE).
+ *
+ * Import from `paseo-plugin-helper/core` for everything headless that must
+ * also load in the plugin CLIENT bundle: RPC contracts, query/mutation
+ * hooks, settings sync hooks, and pure formatters.
+ *
+ * Client/server boundary (#219): this entry MUST NOT re-export `../server/*`
+ * or `../mcp/*` — those pull `node:*` built-ins (fs, child_process, …) which
+ * the 0.8 client compiler rejects. Server-only primitives stay in
+ * `paseo-plugin-helper/server` (and MCP in `paseo-plugin-helper/mcp`).
+ *
+ * Purity contract (enforced by `src/__tests__/core-purity.test.ts`):
+ * - No runtime import of `react-native` or any UI component.
+ * - No `node:*` (or bare Node builtin) imports.
+ * - No DOM/CSS variable scraper (`theme/host-variables`).
+ * - No layout opinions (`layout/`, `components/`, `ModalBody`, `maxContentWidth`).
+ *
+ * React (not React Native) is the only view-layer dependency here, via
+ * `@tanstack/react-query` hooks. Host RPC access flows through the injected
+ * `useRpc` seam in `client/host.js`, which itself carries only type-level
+ * `react-native` imports (erased at runtime).
+ */
+
+export * from "../../../../shared/vendor/paseo-plugin-helper/rpc";
+export * from "../../../../shared/vendor/paseo-plugin-helper/settings";
+export * from "../../../../shared/vendor/paseo-plugin-helper/suite-settings";
+export * from "../../../../shared/vendor/paseo-plugin-helper/formatters";
+export * from "../../../../shared/vendor/paseo-plugin-helper/async";
+export * from "../../../../shared/vendor/paseo-plugin-helper/highlight";
+export * from "../../../../shared/vendor/paseo-plugin-helper/forge";
+export * from "../../../../shared/vendor/paseo-plugin-helper/custom-pills";
+export * from "../../../../shared/vendor/paseo-plugin-helper/suppressed";
+export * from "../../../../shared/vendor/paseo-plugin-helper/types";
+
+export {
+  initClientHelpers,
+  getClientHost,
+  getOptionalClientHost,
+  isClientHostInitialized,
+  selectHostScrollView,
+} from "../host";
+export type {
+  ClientHostDeps,
+  HostTheme,
+  HostThemeColors,
+  HostLayout,
+  HostToast,
+  HostUseToast,
+  HostUseRpc,
+  HostRpcContract,
+  HostCopyText,
+  HostAgentsApi,
+  HostAgentRef,
+  HostAgentUpdate,
+  PluginCleanup,
+} from "../host";
+
+export * from "../query";
+export * from "../query-refresh";
+export * from "../settings";
+export * from "../shared-settings";
+export * from "../snapshot";
+export * from "../command-center";