@xpufx/paseo-top 0.4.3 → 0.4.5

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

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

@@ -1,180 +0,0 @@
-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/EmptyState.tsx

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

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

@@ -1,70 +0,0 @@
-import React, { useMemo } from "react";
-import { Text, type StyleProp, type TextStyle } from "react-native";
-import { splitHighlightParts } from "../../../../shared/vendor/paseo-plugin-helper/highlight";
-import { usePluginTheme } from "../theme/provider";
-
-export interface HighlightedTextProps {
-  /** Source text rendered as-is when no query is active. */
-  text: string;
-  /**
-   * Active search query; matched case-insensitively and never as a regex. When
-   * the literal query is absent the query's tokens are highlighted, so a fuzzy
-   * result still reads.
-   */
-  query: string;
-  style?: StyleProp<TextStyle>;
-  /**
-   * Overrides the matched-run style. Defaults to the theme accent background
-   * with `accentForeground` text so a match reads as selected.
-   */
-  highlightStyle?: StyleProp<TextStyle>;
-  numberOfLines?: number;
-  selectable?: boolean;
-  /**
-   * When true, a query with no literal or token hit marks the whole text, so a
-   * fuzzy search result still reads as matched. Use it on the primary label
-   * (row/detail title) rather than every small field.
-   */
-  fuzzyFallback?: boolean;
-}
-
-/**
- * `<Text>` that paints every case-insensitive occurrence of `query` with the
- * accent background/foreground. The query is matched literally, so user input
- * is never evaluated as a regular expression. When the literal query is absent
- * the splitter highlights the query's tokens; `fuzzyFallback` additionally
- * marks the whole text when even a token misses, so a fuzzy result is not left
- * silently unmarked. Renders the plain text when the query is empty or absent.
- */
-export function HighlightedText({
-  text,
-  query,
-  style,
-  highlightStyle,
-  numberOfLines,
-  selectable,
-  fuzzyFallback = false,
-}: HighlightedTextProps) {
-  const { colors } = usePluginTheme();
-  const parts = useMemo(
-    () => splitHighlightParts(text, query, { fallbackToWholeField: fuzzyFallback }),
-    [text, query, fuzzyFallback],
-  );
-  const matchStyle: StyleProp<TextStyle> = [
-    { backgroundColor: colors.accent, color: colors.accentForeground },
-    highlightStyle,
-  ];
-  return (
-    <Text style={style} numberOfLines={numberOfLines} selectable={selectable}>
-      {parts.map((part, index) =>
-        part.matched ? (
-          <Text key={`m${index}`} style={matchStyle}>
-            {part.text}
-          </Text>
-        ) : (
-          part.text
-        ),
-      )}
-    </Text>
-  );
-}

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

@@ -1,75 +0,0 @@
-import React, { type ReactNode } from "react";
-import {
-  Pressable,
-  StyleSheet,
-  Text,
-  type StyleProp,
-  type TextStyle,
-  type ViewStyle,
-} from "react-native";
-import { getClientHost } from "../host";
-import { usePluginTheme } from "../theme/provider";
-
-export interface InlineButtonProps {
-  label: string;
-  onPress?: () => void | Promise<void>;
-  icon?: string | ReactNode;
-  disabled?: boolean;
-  accessibilityLabel?: string;
-  accessibilityRole?: "button" | "link";
-  style?: StyleProp<ViewStyle>;
-  textStyle?: StyleProp<TextStyle>;
-}
-
-/** Compact text/link action for inline cards and timeline content. */
-export function InlineButton({
-  label,
-  onPress,
-  icon,
-  disabled = false,
-  accessibilityLabel,
-  accessibilityRole = "button",
-  style,
-  textStyle,
-}: InlineButtonProps) {
-  const { Icon } = getClientHost();
-  const { colors, touchTargetMin, alpha } = usePluginTheme();
-
-  return (
-    <Pressable
-      onPress={onPress}
-      disabled={disabled}
-      accessibilityRole={accessibilityRole}
-      accessibilityLabel={accessibilityLabel || label}
-      hitSlop={Math.max(0, (touchTargetMin - 24) / 2)}
-      style={({ pressed }) => [
-        styles.base,
-        {
-          opacity: disabled ? 0.45 : 1,
-          backgroundColor: pressed && !disabled ? alpha(colors.accent, 0.12) : "transparent",
-        },
-        style,
-      ]}
-    >
-      {typeof icon === "string" ? <Icon name={icon} size={13} color={colors.accent} /> : icon}
-      <Text style={[styles.text, { color: colors.accent }, textStyle]}>{label}</Text>
-    </Pressable>
-  );
-}
-
-const styles = StyleSheet.create({
-  base: {
-    alignSelf: "flex-start",
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 4,
-    minHeight: 24,
-    paddingHorizontal: 3,
-    paddingVertical: 2,
-    borderRadius: 4,
-  },
-  text: {
-    fontSize: 12,
-    fontWeight: "600",
-  },
-});