@xpufx/paseo-top 0.4.4 → 0.4.7

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

@@ -1,257 +0,0 @@
-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;
-}
-
-// TEMPORARY DIAGNOSTIC (#555) — one-shot probe logging the host icon the
-// first CardHeader render resolves, right before it is used; strip once the
-// missing-binding cause is confirmed.
-let cardHeaderIconProbeFired = false;
-
-export function CardHeader({
-  title,
-  subtitle,
-  value,
-  badge,
-  action,
-  icon,
-  style,
-  titleStyle,
-  subtitleStyle,
-  highlightQuery,
-}: CardHeaderProps) {
-  const { Icon } = getClientHost();
-  // TEMPORARY DIAGNOSTIC (#555) — strip once the missing-binding cause is
-  // confirmed. A probe that throws must never crash the header itself.
-  try {
-    if (!cardHeaderIconProbeFired) {
-      cardHeaderIconProbeFired = true;
-      const describe = (value: unknown): string => {
-        if (value === undefined) return "undefined";
-        if (value === null) return "null";
-        if (typeof value === "function") {
-          const named = (value as { displayName?: string; name?: string }).displayName
-            ?? (value as { name?: string }).name;
-          return `function(${named || "(anonymous)"})`;
-        }
-        if (typeof value === "object") {
-          const symbolTag = (value as { $$typeof?: unknown }).$$typeof;
-          return `object($$typeof=${String(symbolTag)}, render=${typeof (value as { render?: unknown }).render})`;
-        }
-        return typeof value;
-      };
-      console.warn(
-        "[2fado] CardHeader probe: icon=", icon ?? "(no icon prop)",
-        "resolved host Icon=", `typeofIcon=${typeof Icon}`, describe(Icon),
-      );
-    }
-  } catch (err) {
-    console.warn("[2fado] CardHeader probe failed:", err);
-  }
-  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

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