@xpufx/paseo-twofado 0.1.0

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

@@ -0,0 +1,172 @@
+import React, { useState } from "react";
+import {
+  Platform,
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+  type StyleProp,
+  type TextStyle,
+  type ViewStyle,
+} from "react-native";
+import { getClientHost } from "../host";
+import { usePluginTheme } from "../theme/provider";
+import { copyToClipboard } from "../utils/clipboard";
+
+export interface CommandBoxProps {
+  /** argv array — program is rendered bold, args muted */
+  argv?: string[];
+  /** Optional override to display a pre-joined string instead of argv */
+  command?: string;
+  style?: StyleProp<ViewStyle>;
+  textStyle?: StyleProp<TextStyle>;
+  /** Accessibility label override for the copy button */
+  copyLabel?: string;
+}
+
+export function formatCommandLine(argv: string[]): string {
+  return argv.map((arg) => (arg.includes(" ") ? JSON.stringify(arg) : arg)).join(" ");
+}
+
+export function CommandBox({
+  argv = [],
+  command,
+  style,
+  textStyle,
+  copyLabel = "Copy command",
+}: CommandBoxProps): React.ReactElement | null {
+  const { colors, resolveRadius } = usePluginTheme();
+  const { Icon, useToast } = getClientHost();
+  const toast = useToast();
+  const [copied, setCopied] = useState(false);
+
+  const fullCommand = command ?? formatCommandLine(argv);
+  const [prog, ...rest] = argv;
+
+  const handleCopy = async () => {
+    if (!fullCommand) return;
+    const ok = await copyToClipboard(fullCommand, {
+      toast,
+      toastMessage: "Command",
+    });
+    if (ok) {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    }
+  };
+
+  const fontFamily = Platform.select({
+    ios: "Menlo",
+    android: "monospace",
+    default: "monospace",
+  });
+
+  const radius = resolveRadius("sm");
+
+  return (
+    <View
+      style={[
+        styles.container,
+        {
+          backgroundColor: colors.surface2,
+          borderColor: colors.border,
+          borderRadius: radius,
+        },
+        style,
+      ]}
+    >
+      <View style={styles.textContainer}>
+        <Text
+          style={[
+            styles.prompt,
+            {
+              color: colors.statusWarning,
+              fontFamily,
+            },
+          ]}
+        >
+          $
+        </Text>
+        <Text
+          selectable
+          numberOfLines={2}
+          style={[
+            styles.commandText,
+            {
+              color: colors.foreground,
+              fontFamily,
+            },
+            textStyle,
+          ]}
+        >
+          {prog ? (
+            <>
+              <Text style={styles.bold}>{prog}</Text>
+              {rest.length > 0 ? (
+                <Text style={{ color: colors.foregroundMuted }}>
+                  {" " + rest.map((a) => (a.includes(" ") ? JSON.stringify(a) : a)).join(" ")}
+                </Text>
+              ) : null}
+            </>
+          ) : (
+            command ?? ""
+          )}
+        </Text>
+      </View>
+      <Pressable
+        onPress={handleCopy}
+        accessibilityRole="button"
+        accessibilityLabel={copyLabel}
+        hitSlop={8}
+        style={({ pressed }) => [
+          styles.copyButton,
+          {
+            backgroundColor: pressed ? colors.surface1 : "transparent",
+            borderRadius: Math.max(2, radius - 2),
+          },
+        ]}
+      >
+        <Icon
+          name={copied ? "Check" : "Copy"}
+          size={13}
+          color={copied ? colors.statusSuccess : colors.foregroundMuted}
+        />
+      </Pressable>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    borderWidth: 1,
+    paddingHorizontal: 10,
+    paddingVertical: 6,
+    gap: 8,
+  },
+  textContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    flex: 1,
+    overflow: "hidden",
+    gap: 6,
+  },
+  prompt: {
+    fontWeight: "700",
+    fontSize: 12,
+  },
+  commandText: {
+    fontSize: 12,
+    flex: 1,
+  },
+  bold: {
+    fontWeight: "700",
+  },
+  copyButton: {
+    padding: 4,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+});

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

@@ -0,0 +1,180 @@
+import React, { useEffect, useRef, useState } from "react";
+import {
+  Pressable,
+  StyleSheet,
+  Text,
+  type StyleProp,
+  type TextStyle,
+  type ViewStyle,
+} from "react-native";
+import { getClientHost } from "../host";
+import { usePluginTheme } from "../theme/provider";
+import { copyToClipboard } from "../utils/clipboard";
+
+export type CopyButtonSize = "sm" | "md";
+export type CopyButtonVariant = "ghost" | "secondary";
+
+export interface CopyButtonFeedback {
+  icon: string;
+  label: string;
+}
+
+/**
+ * Pure idle/copied visual state, split out so the feedback contract is
+ * testable without a renderer or a clipboard. Callers may override the idle
+ * `icon`/`label`; the copied state is always the Check/"Copied!" affordance.
+ */
+export function resolveCopyButtonFeedback(
+  copied: boolean,
+  options: { icon?: string; label?: string; copiedLabel?: string } = {},
+): CopyButtonFeedback {
+  const idleIcon = options.icon ?? "Copy";
+  const idleLabel = options.label ?? "Copy";
+  const copiedLabel = options.copiedLabel ?? "Copied!";
+  return copied ? { icon: "Check", label: copiedLabel } : { icon: idleIcon, label: idleLabel };
+}
+
+export interface CopyButtonProps {
+  /** Literal text to copy. Ignored when `getText` is provided. */
+  text?: string;
+  /** Lazy/Promise text source, resolved at press time. Takes precedence over `text`. */
+  getText?: () => string | Promise<string>;
+  /** Idle button label. Defaults to "Copy". */
+  label?: string;
+  /** Label shown after a successful copy. Defaults to "Copied!". */
+  copiedLabel?: string;
+  /** Icon name for the idle state. Defaults to "Copy". */
+  icon?: string;
+  size?: CopyButtonSize;
+  variant?: CopyButtonVariant;
+  accessibilityLabel?: string;
+  /** Forwarded to the clipboard toast (e.g. "timeline card"). */
+  toastMessage?: string;
+  /** How long the Check/"Copied!" feedback stays up. Defaults to 2000ms. */
+  feedbackDurationMs?: number;
+  disabled?: boolean;
+  style?: StyleProp<ViewStyle>;
+  textStyle?: StyleProp<TextStyle>;
+}
+
+/**
+ * Explicit copy affordance for styled/plugin surfaces.
+ *
+ * Web's selection-copy handler only rebuilds clipboard content for
+ * `[data-testid="assistant-message"]` selections, so styled timeline, telemetry,
+ * and panel content copies nothing (xpufx-org/paseo#278). This bypasses that
+ * gate with the helper's host `copyText` / `copyToClipboard` path and shows
+ * Check/"Copied!" feedback, matching CodeBlock's pattern.
+ */
+export function CopyButton({
+  text,
+  getText,
+  label,
+  copiedLabel,
+  icon,
+  size = "sm",
+  variant = "ghost",
+  accessibilityLabel,
+  toastMessage,
+  feedbackDurationMs = 2000,
+  disabled = false,
+  style,
+  textStyle,
+}: CopyButtonProps): React.ReactElement | null {
+  const { Icon, useToast } = getClientHost();
+  const { colors, resolveRadius, touchTargetMin, alpha } = usePluginTheme();
+  const toast = useToast();
+  const [copied, setCopied] = useState(false);
+  const timer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
+
+  useEffect(() => {
+    return () => {
+      if (timer.current) clearTimeout(timer.current);
+    };
+  }, []);
+
+  const hasSource = getText !== undefined || text !== undefined;
+  if (!hasSource) return null;
+
+  const feedback = resolveCopyButtonFeedback(copied, { icon, label, copiedLabel });
+  const iconNode = (
+    <Icon
+      name={feedback.icon}
+      size={size === "sm" ? 12 : 14}
+      color={copied ? colors.statusSuccess : colors.foregroundMuted}
+    />
+  );
+
+  const secondary = variant === "secondary";
+  const bg = secondary ? colors.surface1 : "transparent";
+  const border = secondary ? colors.border : "transparent";
+  const radius = resolveRadius(size === "sm" ? "sm" : "md");
+
+  const handleCopy = async () => {
+    if (disabled) return;
+    let value: string | undefined;
+    try {
+      value = getText ? await getText() : text;
+    } catch {
+      return;
+    }
+    if (value === undefined || value === null) return;
+
+    const ok = await copyToClipboard(String(value), { toast, toastMessage });
+    if (!ok) return;
+
+    setCopied(true);
+    if (timer.current) clearTimeout(timer.current);
+    timer.current = setTimeout(() => setCopied(false), feedbackDurationMs);
+  };
+
+  return (
+    <Pressable
+      onPress={handleCopy}
+      disabled={disabled}
+      accessibilityRole="button"
+      accessibilityLabel={accessibilityLabel || label || "Copy"}
+      hitSlop={Math.max(0, (touchTargetMin - 28) / 2)}
+      style={({ pressed }) => [
+        styles.base,
+        {
+          backgroundColor: pressed && !disabled ? alpha(colors.surface2, secondary ? 1 : 0.7) : bg,
+          borderColor: border,
+          borderWidth: border !== "transparent" ? 1 : 0,
+          borderRadius: radius,
+          paddingVertical: size === "sm" ? 3 : 5,
+          paddingHorizontal: size === "sm" ? 8 : 10,
+          opacity: disabled ? 0.45 : 1,
+        },
+        style,
+      ]}
+    >
+      {iconNode}
+      {feedback.label !== "" ? (
+        <Text
+          style={[
+            styles.text,
+            {
+              fontSize: size === "sm" ? 11 : 12,
+              color: copied ? colors.statusSuccess : colors.foregroundMuted,
+            },
+            textStyle,
+          ]}
+        >
+          {feedback.label}
+        </Text>
+      ) : null}
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  base: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 4,
+  },
+  text: {
+    fontWeight: "500",
+  },
+});

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

@@ -0,0 +1,200 @@
+import React, { type ReactNode } from "react";
+import { StyleSheet, Text, View, type StyleProp, type ViewStyle } from "react-native";
+import { usePluginTheme } from "../theme/provider";
+
+export interface DataColumn<T> {
+  key: string;
+  header: string;
+  flex?: number;
+  width?: number;
+  align?: "left" | "center" | "right";
+  render: (item: T) => ReactNode;
+}
+
+export interface DataTableProps<T> {
+  data: T[];
+  columns: DataColumn<T>[];
+  keyExtractor: (item: T, index: number) => string;
+  emptyState?: ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+/**
+ * Responsive data table that automatically reflows between a traditional table
+ * on desktop and structured card list on mobile / compact viewports.
+ */
+export function DataTable<T>({
+  data,
+  columns,
+  keyExtractor,
+  emptyState,
+  style,
+}: DataTableProps<T>) {
+  const { colors, resolveRadius, isCompact } = usePluginTheme();
+  const radius = resolveRadius("sm");
+
+  if (!data || data.length === 0) {
+    return emptyState ? <View style={style}>{emptyState}</View> : null;
+  }
+
+  // Mobile / compact card-list layout
+  if (isCompact) {
+    return (
+      <View style={[styles.compactContainer, style]}>
+        {data.map((item, idx) => (
+          <View
+            key={keyExtractor(item, idx)}
+            style={[
+              styles.compactCard,
+              {
+                backgroundColor: colors.surface1,
+                borderColor: colors.border,
+                borderRadius: radius,
+              },
+            ]}
+          >
+            {columns.map((col) => (
+              <View key={col.key} style={styles.compactRow}>
+                <Text style={[styles.compactHeader, { color: colors.foregroundMuted }]}>
+                  {col.header}
+                </Text>
+                <View style={styles.compactValue}>{col.render(item)}</View>
+              </View>
+            ))}
+          </View>
+        ))}
+      </View>
+    );
+  }
+
+  // Desktop tabular layout
+  return (
+    <View
+      style={[
+        styles.table,
+        {
+          borderColor: colors.border,
+          borderRadius: radius,
+          backgroundColor: colors.surface0,
+        },
+        style,
+      ]}
+    >
+      {/* Header Row */}
+      <View
+        style={[
+          styles.headerRow,
+          {
+            backgroundColor: colors.surface1,
+            borderBottomColor: colors.border,
+          },
+        ]}
+      >
+        {columns.map((col) => (
+          <View
+            key={col.key}
+            style={[
+              styles.cell,
+              col.flex !== undefined ? { flex: col.flex } : { flex: 1 },
+              col.width !== undefined ? { width: col.width } : undefined,
+              col.align === "right"
+                ? styles.alignRight
+                : col.align === "center"
+                ? styles.alignCenter
+                : styles.alignLeft,
+            ]}
+          >
+            <Text style={[styles.headerText, { color: colors.foregroundMuted }]}>
+              {col.header}
+            </Text>
+          </View>
+        ))}
+      </View>
+
+      {/* Rows */}
+      {data.map((item, idx) => (
+        <View
+          key={keyExtractor(item, idx)}
+          style={[
+            styles.row,
+            idx < data.length - 1 && { borderBottomColor: colors.border, borderBottomWidth: 1 },
+          ]}
+        >
+          {columns.map((col) => (
+            <View
+              key={col.key}
+              style={[
+                styles.cell,
+                col.flex !== undefined ? { flex: col.flex } : { flex: 1 },
+                col.width !== undefined ? { width: col.width } : undefined,
+                col.align === "right"
+                  ? styles.alignRight
+                  : col.align === "center"
+                  ? styles.alignCenter
+                  : styles.alignLeft,
+              ]}
+            >
+              {col.render(item)}
+            </View>
+          ))}
+        </View>
+      ))}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  table: {
+    borderWidth: 1,
+    overflow: "hidden",
+  },
+  headerRow: {
+    flexDirection: "row",
+    borderBottomWidth: 1,
+    paddingVertical: 8,
+    paddingHorizontal: 12,
+  },
+  row: {
+    flexDirection: "row",
+    paddingVertical: 10,
+    paddingHorizontal: 12,
+    alignItems: "center",
+  },
+  cell: {
+    justifyContent: "center",
+  },
+  alignLeft: {
+    alignItems: "flex-start",
+  },
+  alignCenter: {
+    alignItems: "center",
+  },
+  alignRight: {
+    alignItems: "flex-end",
+  },
+  headerText: {
+    fontSize: 11,
+    fontWeight: "600",
+    textTransform: "uppercase",
+    letterSpacing: 0.5,
+  },
+  compactContainer: {
+    gap: 8,
+  },
+  compactCard: {
+    borderWidth: 1,
+    padding: 12,
+    gap: 6,
+  },
+  compactRow: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+  },
+  compactHeader: {
+    fontSize: 12,
+  },
+  compactValue: {
+    alignItems: "flex-end",
+  },
+});

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

@@ -0,0 +1,97 @@
+import React, { type ReactNode } from "react";
+import { StyleSheet, Text, View, type StyleProp, type ViewStyle } from "react-native";
+import { getClientHost } from "../host";
+import { usePluginTheme } from "../theme/provider";
+import { Button, type ButtonProps } from "./Button";
+
+export interface EmptyStateProps {
+  icon?: string | ReactNode;
+  title: string;
+  description?: string;
+  action?: ButtonProps;
+  actionLabel?: string;
+  onAction?: () => void;
+  style?: StyleProp<ViewStyle>;
+}
+
+export function EmptyState({
+  icon = "Inbox",
+  title,
+  description,
+  action,
+  actionLabel,
+  onAction,
+  style,
+}: EmptyStateProps) {
+  const { Icon } = getClientHost();
+  const { colors, isCompact, typography, padding } = usePluginTheme();
+
+  const resolvedAction: ButtonProps | undefined = action
+    ? action
+    : actionLabel && onAction
+      ? { label: actionLabel, onPress: onAction, variant: "secondary" }
+      : undefined;
+
+  return (
+    <View style={[styles.container, { padding: isCompact ? padding.horizontal + 8 : padding.horizontal * 2 }, style]}>
+      {icon ? (
+        typeof icon === "string" ? (
+          <View style={[styles.iconWrapper, { backgroundColor: colors.surface1 }]}>
+            <Icon name={icon} size={isCompact ? 24 : 32} color={colors.foregroundMuted} />
+          </View>
+        ) : (
+          icon
+        )
+      ) : null}
+
+      <Text style={[styles.title, { color: colors.foreground, ...typography.title }]}>
+        {title}
+      </Text>
+
+      {description ? (
+        <Text
+          style={[
+            styles.description,
+            { color: colors.foregroundMuted, ...typography.body },
+          ]}
+        >
+          {description}
+        </Text>
+      ) : null}
+
+      {resolvedAction ? (
+        <View style={styles.actionRow}>
+          <Button size={isCompact ? "sm" : "md"} {...resolvedAction} />
+        </View>
+      ) : null}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 8,
+  },
+  iconWrapper: {
+    width: 56,
+    height: 56,
+    borderRadius: 28,
+    alignItems: "center",
+    justifyContent: "center",
+    marginBottom: 4,
+  },
+  title: {
+    fontWeight: "600",
+    textAlign: "center",
+  },
+  description: {
+    textAlign: "center",
+    maxWidth: 280,
+    lineHeight: 18,
+  },
+  actionRow: {
+    marginTop: 8,
+  },
+});