@xpufx/paseo-top 0.4.4 → 0.4.7

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

@@ -1,277 +0,0 @@
-import React, { useState } from "react";
-import {
-  Pressable,
-  StyleSheet,
-  Text,
-  View,
-  type StyleProp,
-  type ViewStyle,
-} from "react-native";
-import { getClientHost } from "../host";
-import { usePluginTheme } from "../theme/provider";
-import type { SurfaceStyle } from "../theme/flair";
-import type { ThemeColors } from "../../../../shared/vendor/paseo-plugin-helper/types";
-
-export interface CollapsibleProps {
-  title?: string | React.ReactNode;
-  subtitle?: string | React.ReactNode;
-  children: React.ReactNode;
-  initiallyExpanded?: boolean;
-  isExpanded?: boolean;
-  onToggle?: (expanded: boolean) => void;
-  badge?: React.ReactNode;
-  headerRight?: React.ReactNode;
-  summary?: React.ReactNode;
-  icon?: string;
-  style?: StyleProp<ViewStyle>;
-  headerStyle?: StyleProp<ViewStyle>;
-  contentStyle?: StyleProp<ViewStyle>;
-  variant?: SurfaceStyle;
-}
-
-export function resolveCollapsibleChevron(expanded: boolean): string {
-  return expanded ? "ChevronDown" : "ChevronRight";
-}
-
-/**
- * Container background for a Collapsible, honoring the same `SurfaceStyle`
- * contract as `Card`:
- * - "flat" (default): surface0, the normal page surface.
- * - "elevated": surface1, so the card visibly lifts off the page.
- * - "tinted": a faint accent wash.
- *
- * Before this existed, `variant="elevated"` only changed the border radius and
- * the container stayed `surface0` — so a card placed on an already-`surface0`
- * timeline read as a bleeding shaded band with no elevation (#208).
- */
-export function resolveCollapsibleSurface(
-  colors: ThemeColors,
-  alpha: (color: string, opacity: number) => string,
-  variant: SurfaceStyle = "flat",
-): { backgroundColor: string; borderColor: string } {
-  switch (variant) {
-    case "elevated":
-      return { backgroundColor: colors.surface1, borderColor: colors.border };
-    case "tinted":
-      return {
-        backgroundColor: alpha(colors.accent, 0.04),
-        borderColor: alpha(colors.accent, 0.2),
-      };
-    case "flat":
-    default:
-      return { backgroundColor: colors.surface0, borderColor: colors.border };
-  }
-}
-
-/**
- * Header stripe background. Kept for backwards compatibility; prefer
- * {@link resolveCollapsibleSurface} for the container and use this only for the
- * pressed/unpressed header delta.
- */
-export function resolveCollapsibleHeaderBackground(
-  colors: ThemeColors,
-  pressed: boolean,
-): string {
-  return pressed ? colors.surface1 : colors.surface0;
-}
-
-function renderTitle(title: string | React.ReactNode, titleStyle: object) {
-  if (typeof title === "string" || title === undefined) {
-    return title ? <Text style={titleStyle}>{title}</Text> : null;
-  }
-  return <View style={styles.titleSlot}>{title}</View>;
-}
-
-function renderSubtitle(subtitle: string | React.ReactNode, subtitleStyle: object) {
-  if (typeof subtitle === "string") {
-    return <Text style={subtitleStyle}>{subtitle}</Text>;
-  }
-  return subtitle ?? null;
-}
-
-export function Collapsible({
-  title,
-  subtitle,
-  children,
-  initiallyExpanded = false,
-  isExpanded: controlledExpanded,
-  onToggle,
-  badge,
-  headerRight,
-  summary,
-  icon,
-  style,
-  headerStyle,
-  contentStyle,
-  variant,
-}: CollapsibleProps) {
-  const { Icon } = getClientHost();
-  const { colors, resolveRadius, isCompact, touchTargetMin, alpha } = usePluginTheme();
-  const [internalExpanded, setInternalExpanded] = useState(initiallyExpanded);
-
-  const isExpanded = controlledExpanded !== undefined ? controlledExpanded : internalExpanded;
-  const radius = resolveRadius(variant === "elevated" ? "lg" : "md");
-  const surface = resolveCollapsibleSurface(colors, alpha, variant);
-
-  const handlePress = () => {
-    const next = !isExpanded;
-    if (controlledExpanded === undefined) {
-      setInternalExpanded(next);
-    }
-    onToggle?.(next);
-  };
-
-  const titleStyle = {
-    color: colors.foreground,
-    fontSize: isCompact ? 12 : 13,
-  };
-  const subtitleStyle = {
-    color: colors.foregroundMuted,
-    fontSize: isCompact ? 11 : 12,
-  };
-
-  return (
-    <View
-      style={[
-        styles.container,
-        {
-          borderColor: surface.borderColor,
-          borderRadius: radius,
-          backgroundColor: surface.backgroundColor,
-        },
-        style,
-      ]}
-    >
-      <Pressable
-        onPress={handlePress}
-        accessibilityRole="button"
-        accessibilityState={{ expanded: isExpanded }}
-        style={({ pressed }) => [
-          styles.header,
-          {
-            minHeight: Math.max(touchTargetMin, 36),
-            // Transparent by default: the container already carries the surface
-            // color. Painting the header with an opaque surface color is what
-            // made the first line read as a shaded band (#208). Only the
-            // pressed state tints, as interaction feedback.
-            backgroundColor: pressed ? alpha(colors.foreground, 0.06) : "transparent",
-            cursor: "pointer" as never,
-          },
-          headerStyle,
-        ]}
-      >
-        <View style={styles.headerLeft}>
-          <View
-            style={[
-              styles.chevronBadge,
-              {
-                backgroundColor: alpha(colors.accent, 0.12),
-                borderColor: alpha(colors.accent, 0.25),
-              },
-            ]}
-          >
-            <Icon
-              name={resolveCollapsibleChevron(isExpanded)}
-              size={14}
-              color={colors.foregroundMuted}
-            />
-          </View>
-          {icon && <Icon name={icon} size={14} color={colors.accent} />}
-          <View style={styles.titleBlock}>
-            <View style={styles.titleRow}>
-              {renderTitle(title, [styles.title, titleStyle])}
-              {badge && <View style={styles.badgeSlot}>{badge}</View>}
-            </View>
-            {subtitle ? (
-              <View style={styles.subtitleSlot}>
-                {renderSubtitle(subtitle, [styles.subtitle, subtitleStyle])}
-              </View>
-            ) : null}
-            {summary ? <View style={styles.summarySlot}>{summary}</View> : null}
-          </View>
-        </View>
-
-        {(headerRight || summary === undefined) && (
-          <View style={styles.headerRight}>{headerRight}</View>
-        )}
-      </Pressable>
-
-      {isExpanded && (
-        <View
-          style={[
-            styles.content,
-            { borderTopColor: colors.border, borderTopWidth: 1 },
-            contentStyle,
-          ]}
-        >
-          {children}
-        </View>
-      )}
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    borderWidth: 1,
-    overflow: "hidden",
-  },
-  header: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    paddingHorizontal: 12,
-    paddingVertical: 8,
-  },
-  headerLeft: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8,
-    flex: 1,
-  },
-  chevronBadge: {
-    width: 22,
-    height: 22,
-    borderRadius: 7,
-    borderWidth: 1,
-    alignItems: "center",
-    justifyContent: "center",
-  },
-  titleBlock: {
-    flex: 1,
-  },
-  titleRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8,
-  },
-  titleSlot: {
-    flexDirection: "row",
-    alignItems: "center",
-  },
-  badgeSlot: {
-    flexDirection: "row",
-    alignItems: "center",
-  },
-  subtitleSlot: {
-    marginTop: 2,
-  },
-  summarySlot: {
-    marginTop: 4,
-    flexDirection: "row",
-  },
-  headerRight: {
-    flexDirection: "row",
-    alignItems: "center",
-    marginLeft: 8,
-  },
-  title: {
-    fontWeight: "600",
-  },
-  subtitle: {
-    fontWeight: "400",
-  },
-  content: {
-    padding: 12,
-  },
-});

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",
-  },
-});