@xpufx/paseo-top 0.4.0

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

@@ -0,0 +1,225 @@
+import React, { type ReactNode } from "react";
+import { StyleSheet, Text, View, type StyleProp, type TextStyle, type ViewStyle } from "react-native";
+import { getClientHost } from "../host";
+import { usePluginTheme } from "../theme/provider";
+import { HighlightedText } from "./HighlightedText";
+import type { SurfaceStyle } from "../theme/flair";
+
+export interface CardProps {
+  children: ReactNode;
+  variant?: SurfaceStyle;
+  style?: StyleProp<ViewStyle>;
+  noPadding?: boolean;
+}
+
+export interface CardHeaderProps {
+  title: string;
+  subtitle?: string;
+  value?: string | number | ReactNode;
+  badge?: ReactNode;
+  action?: ReactNode;
+  icon?: string;
+  style?: StyleProp<ViewStyle>;
+  titleStyle?: StyleProp<TextStyle>;
+  subtitleStyle?: StyleProp<TextStyle>;
+  /**
+   * When set, every case-insensitive (literal, non-regex) occurrence of the
+   * query inside `title` is painted with the accent highlight. With no literal
+   * or token hit the whole title is marked, so a fuzzy match still reads.
+   */
+  highlightQuery?: string;
+}
+
+export function CardHeader({
+  title,
+  subtitle,
+  value,
+  badge,
+  action,
+  icon,
+  style,
+  titleStyle,
+  subtitleStyle,
+  highlightQuery,
+}: CardHeaderProps) {
+  const { Icon } = getClientHost();
+  const { colors, flair, typography, padding, isCompact } = usePluginTheme();
+
+  return (
+    <View
+      style={[
+        styles.headerContainer,
+        // Density-aware gap below the header. A hardcoded 8 wasted vertical
+        // space under the compact preset (xpufx-org/paseo#213).
+        { marginBottom: padding.gap },
+        // On a compact/narrow surface, stack the title block above the action
+        // row instead of sharing one line. Sharing the line lets a wide action
+        // group (badges + toggle + buttons) hold its intrinsic width while the
+        // title column collapses to its longest word, wrapping one character
+        // per line and spilling the actions past the card (xpufx-org/paseo#202).
+        isCompact && styles.headerContainerCompact,
+        style,
+      ]}
+    >
+      <View style={[styles.headerLeft, isCompact && styles.headerLeftCompact]}>
+        {icon ? <Icon name={icon} size={15} color={colors.foregroundMuted} /> : null}
+        <View style={styles.titleColumn}>
+          <Text
+            style={[
+              styles.headerTitle,
+              {
+                color: colors.foreground,
+                ...typography.heading,
+                textTransform:
+                  flair.headingTransform === "uppercase" ? "uppercase" : "none",
+              },
+              titleStyle,
+            ]}
+          >
+            {highlightQuery ? (
+              <HighlightedText text={title} query={highlightQuery} fuzzyFallback />
+            ) : (
+              title
+            )}
+          </Text>
+          {subtitle ? (
+            <Text
+              style={[
+                styles.headerSubtitle,
+                { color: colors.foregroundMuted, ...typography.caption },
+                subtitleStyle,
+              ]}
+            >
+              {subtitle}
+            </Text>
+          ) : null}
+        </View>
+      </View>
+
+      <View style={[styles.headerRight, isCompact && styles.headerRightCompact]}>
+        {badge ? <View style={{ marginRight: 6 }}>{badge}</View> : null}
+        {typeof value === "string" || typeof value === "number" ? (
+          <Text
+            style={[
+              styles.headerValue,
+              { color: colors.foreground, ...typography.bodyStrong },
+            ]}
+          >
+            {value}
+          </Text>
+        ) : (
+          value
+        )}
+        {action}
+      </View>
+    </View>
+  );
+}
+
+export function Card({ children, variant, style, noPadding = false }: CardProps) {
+  const { colors, flair, resolveRadius, padding, alpha } = usePluginTheme();
+
+  const effectiveVariant = variant || flair.surfaceStyle;
+  const radius = resolveRadius("md");
+
+  let bg = colors.surface0;
+  let border = colors.border;
+
+  if (effectiveVariant === "tinted") {
+    bg = alpha(colors.accent, 0.04);
+    border = alpha(colors.accent, 0.2);
+  } else if (effectiveVariant === "elevated") {
+    bg = colors.surface1;
+    border = colors.border;
+  }
+
+  return (
+    <View
+      style={[
+        styles.card,
+        {
+          backgroundColor: bg,
+          borderColor: border,
+          borderRadius: radius,
+          borderWidth: flair.borderWidth,
+          paddingHorizontal: noPadding ? 0 : padding.horizontal,
+          paddingVertical: noPadding ? 0 : padding.vertical,
+        },
+        style,
+      ]}
+    >
+      {children}
+    </View>
+  );
+}
+
+Card.Header = CardHeader;
+
+const styles = StyleSheet.create({
+  card: {
+    overflow: "hidden",
+    width: "100%",
+  },
+  headerContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    flexWrap: "wrap",
+    gap: 8,
+    width: "100%",
+  },
+  headerContainerCompact: {
+    flexDirection: "column",
+    alignItems: "stretch",
+    justifyContent: "flex-start",
+    flexWrap: "nowrap",
+  },
+  headerLeft: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    // `flex: 1` written out: the compact override has to reset the basis too,
+    // and `flex` + explicit flex* keys in one flattened style is ambiguous.
+    flexGrow: 1,
+    flexShrink: 1,
+    flexBasis: 0,
+    minWidth: 0,
+  },
+  // Release `flex: 1` (basis 0) in the stacked column so the title block takes
+  // the full width and wraps at word boundaries instead of collapsing to its
+  // longest word.
+  headerLeftCompact: {
+    flexGrow: 0,
+    flexShrink: 0,
+    flexBasis: "auto",
+    width: "100%",
+  },
+  titleColumn: {
+    gap: 1,
+    flexShrink: 1,
+  },
+  headerTitle: {
+    fontWeight: "600",
+  },
+  headerSubtitle: {
+    fontWeight: "400",
+  },
+  headerRight: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
+    flexShrink: 0,
+  },
+  // The action group may wrap onto multiple lines once the title owns its own
+  // row; letting it shrink + wrap keeps a long badge/toggle/button set inside
+  // the card instead of overflowing it.
+  headerRightCompact: {
+    flexShrink: 1,
+    flexWrap: "wrap",
+    justifyContent: "flex-start",
+    minWidth: 0,
+  },
+  headerValue: {
+    fontWeight: "600",
+  },
+});

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

@@ -0,0 +1,196 @@
+import React, { useState } from "react";
+import {
+  Platform,
+  Pressable,
+  ScrollView as FallbackScrollView,
+  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 CodeBlockProps {
+  code: string;
+  language?: string;
+  title?: string;
+  maxHeight?: number;
+  copyable?: boolean;
+  style?: StyleProp<ViewStyle>;
+  textStyle?: StyleProp<TextStyle>;
+}
+
+export function CodeBlock({
+  code,
+  language,
+  title,
+  maxHeight = 320,
+  copyable = true,
+  style,
+  textStyle,
+}: CodeBlockProps) {
+  const { Icon, useToast } = getClientHost();
+  // Inner snippet scrollers are NEVER the host sheet scroller: the host
+  // ScrollView is a sheet-gesture pan controller, so using it horizontally or
+  // nested inside the host sheet collapses to height 0 / crashes the gesture
+  // handler (#219). Plain React Native ScrollViews own this bounded box.
+  const { colors, resolveRadius, isCompact, touchTargetMin, alpha } = usePluginTheme();
+  const toast = useToast();
+  const [copied, setCopied] = useState(false);
+
+  const radius = resolveRadius("md");
+
+  const handleCopy = async () => {
+    const ok = await copyToClipboard(code, {
+      toast,
+      toastMessage: title || "Code",
+    });
+    if (ok) {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    }
+  };
+
+  const fontFamily = Platform.select({
+    ios: "Menlo",
+    android: "monospace",
+    default: "monospace",
+  });
+
+  return (
+    <View
+      style={[
+        styles.container,
+        {
+          backgroundColor: colors.surface0,
+          borderColor: colors.border,
+          borderRadius: radius,
+        },
+        style,
+      ]}
+    >
+      {(title || language || copyable) && (
+        <View
+          style={[
+            styles.header,
+            {
+              borderBottomColor: alpha(colors.border, 0.7),
+            },
+          ]}
+        >
+          <View style={styles.headerLeft}>
+            {title ? (
+              <Text style={[styles.title, { color: colors.foreground }]}>{title}</Text>
+            ) : language ? (
+              <Text style={[styles.language, { color: colors.foregroundMuted }]}>
+                {language.toUpperCase()}
+              </Text>
+            ) : null}
+          </View>
+          {copyable && (
+            <Pressable
+              onPress={handleCopy}
+              hitSlop={Math.max(0, (touchTargetMin - 28) / 2)}
+              style={({ pressed }) => [
+                styles.copyButton,
+                {
+                  backgroundColor: pressed ? colors.surface2 : colors.surface1,
+                  borderColor: colors.border,
+                  borderRadius: radius - 2,
+                },
+              ]}
+            >
+              <Icon
+                name={copied ? "Check" : "Copy"}
+                size={12}
+                color={copied ? colors.statusSuccess : colors.foregroundMuted}
+              />
+              <Text
+                style={[
+                  styles.copyText,
+                  { color: copied ? colors.statusSuccess : colors.foregroundMuted },
+                ]}
+              >
+                {copied ? "Copied!" : "Copy"}
+              </Text>
+            </Pressable>
+          )}
+        </View>
+      )}
+
+      <FallbackScrollView
+        nestedScrollEnabled
+        style={{ maxHeight }}
+        contentContainerStyle={styles.scrollContent}
+      >
+        <FallbackScrollView horizontal showsHorizontalScrollIndicator>
+          <Text
+            selectable
+            style={[
+              styles.codeText,
+              {
+                color: colors.foreground,
+                fontFamily,
+                fontSize: isCompact ? 11 : 12,
+              },
+              textStyle,
+            ]}
+          >
+            {code}
+          </Text>
+        </FallbackScrollView>
+      </FallbackScrollView>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    borderWidth: 1,
+    overflow: "hidden",
+  },
+  header: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingHorizontal: 10,
+    paddingVertical: 6,
+    borderBottomWidth: 1,
+  },
+  headerLeft: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+  },
+  title: {
+    fontSize: 12,
+    fontWeight: "600",
+  },
+  language: {
+    fontSize: 10,
+    fontWeight: "700",
+    letterSpacing: 0.5,
+  },
+  copyButton: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 4,
+    paddingHorizontal: 8,
+    paddingVertical: 3,
+    borderWidth: 1,
+  },
+  copyText: {
+    fontSize: 11,
+    fontWeight: "500",
+  },
+  scrollContent: {
+    padding: 10,
+  },
+  codeText: {
+    lineHeight: 18,
+  },
+});

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

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