@xpufx/paseo-x-comms 0.3.0

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

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

@@ -0,0 +1,73 @@
+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;
+  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,
+  style,
+  textStyle,
+}: InlineButtonProps) {
+  const { Icon } = getClientHost();
+  const { colors, touchTargetMin, alpha } = usePluginTheme();
+
+  return (
+    <Pressable
+      onPress={onPress}
+      disabled={disabled}
+      accessibilityRole="button"
+      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",
+  },
+});

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

@@ -0,0 +1,446 @@
+import React, { useState, type ReactNode } 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 { resolveGridColumns } from "../theme/responsive";
+import { spacing } from "../theme/tokens";
+import { copyToClipboard } from "../utils/clipboard";
+import {
+  truncate,
+  truncateMiddle,
+  truncatePath,
+  TruncatePathOptions,
+} from "../../../../shared/vendor/paseo-plugin-helper/formatters";
+
+export type KeyValueTruncateMode = "end" | "middle" | "path";
+
+export interface KeyValueProps {
+  label: string;
+  value: string | number | null | undefined;
+  subValue?: string;
+  mono?: boolean;
+  copyable?: boolean;
+  /** Truncate long value: "middle" (UUIDs/hashes), "path" (filepaths), or "end" (standard) */
+  truncate?: boolean | KeyValueTruncateMode;
+  /** Maximum length before truncation applies. Default: 32 */
+  truncateMaxLength?: number;
+  /** Custom options when truncate="path" */
+  truncatePathOptions?: TruncatePathOptions;
+  /**
+   * "stacked" (default) keeps the existing label-above-value layout.
+   * "inline" renders label and value on one line, with the value truncating
+   * middle so the row stays a single text line.
+   */
+  layout?: "stacked" | "inline";
+  stackOnCompact?: boolean;
+  style?: StyleProp<ViewStyle>;
+  labelStyle?: StyleProp<TextStyle>;
+  valueStyle?: StyleProp<TextStyle>;
+}
+
+export function KeyValue({
+  label,
+  value,
+  subValue,
+  mono = false,
+  copyable = false,
+  truncate: truncateProp = false,
+  truncateMaxLength = 32,
+  truncatePathOptions,
+  layout = "stacked",
+  stackOnCompact = true,
+  style,
+  labelStyle,
+  valueStyle,
+}: KeyValueProps) {
+  const { Icon, useToast } = getClientHost();
+  const { colors, flair, isCompact, touchTargetMin, fonts, typography } = usePluginTheme();
+  const toast = useToast();
+  const [copied, setCopied] = useState(false);
+
+  const rawString = value === null || value === undefined ? "" : String(value);
+
+  let displayValue = rawString || "-";
+  if (truncateProp && rawString.length > truncateMaxLength) {
+    const mode: KeyValueTruncateMode =
+      typeof truncateProp === "string" ? truncateProp : "middle";
+    switch (mode) {
+      case "path":
+        displayValue = truncatePath(rawString, truncateMaxLength, truncatePathOptions);
+        break;
+      case "end":
+        displayValue = truncate(rawString, truncateMaxLength);
+        break;
+      case "middle":
+      default:
+        displayValue = truncateMiddle(rawString, truncateMaxLength);
+        break;
+    }
+  }
+
+  const handleCopy = async () => {
+    if (!copyable || !rawString) return;
+    const ok = await copyToClipboard(rawString, {
+      toast,
+      toastMessage: label,
+    });
+    if (ok) {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    }
+  };
+
+  const fontFamily = mono
+    ? fonts.mono ?? Platform.select({ ios: "Menlo", android: "monospace", default: "monospace" })
+    : undefined;
+
+  const shouldStack = stackOnCompact && isCompact;
+
+  const copyButton = copyable && value ? (
+    <Pressable
+      onPress={handleCopy}
+      hitSlop={Math.max(8, (touchTargetMin - 20) / 2)}
+      style={styles.copyBtn}
+      accessibilityRole="button"
+      accessibilityLabel={`Copy ${label}`}
+    >
+      <Icon
+        name={copied ? "Check" : "Copy"}
+        size={isCompact ? 12 : 13}
+        color={copied ? colors.statusSuccess : colors.foregroundMuted}
+      />
+    </Pressable>
+  ) : null;
+
+  if (layout === "inline") {
+    return (
+      <View
+        style={[
+          styles.container,
+          styles.inlineContainer,
+          { paddingVertical: isCompact ? spacing.xs : spacing.sm },
+          style,
+        ]}
+      >
+        <Text
+          style={[
+            styles.inlineLabel,
+            {
+              color: colors.foregroundMuted,
+              ...typography.label,
+              textTransform: flair.headingTransform === "uppercase" ? "uppercase" : "none",
+            },
+            labelStyle,
+          ]}
+        >
+          {label}
+        </Text>
+
+        <Text
+          selectable
+          numberOfLines={1}
+          ellipsizeMode="middle"
+          style={[
+            styles.inlineValueText,
+            {
+              color: colors.foreground,
+              ...typography.bodySmall,
+              fontFamily,
+            },
+            valueStyle,
+          ]}
+        >
+          {displayValue}
+        </Text>
+
+        {subValue ? (
+          <Text
+            selectable
+            numberOfLines={1}
+            style={[
+              styles.inlineSubValue,
+              {
+                color: colors.foregroundMuted,
+                ...typography.caption,
+              },
+            ]}
+          >
+            {subValue}
+          </Text>
+        ) : null}
+
+        {copyButton}
+      </View>
+    );
+  }
+
+  if (shouldStack) {
+    return (
+      <View
+        style={[
+          styles.container,
+          styles.stackedContainer,
+          { paddingVertical: isCompact ? spacing.xs : spacing.sm },
+          style,
+        ]}
+      >
+        <View style={styles.stackedHeaderRow}>
+          <Text
+            style={[
+              styles.label,
+              {
+                color: colors.foregroundMuted,
+                ...typography.label,
+                textTransform: flair.headingTransform === "uppercase" ? "uppercase" : "none",
+              },
+              labelStyle,
+            ]}
+          >
+            {label}
+          </Text>
+          {copyButton}
+        </View>
+
+        <Text
+          selectable
+          style={[
+            styles.stackedValueText,
+            {
+              color: colors.foreground,
+              ...typography.bodySmall,
+              fontFamily,
+            },
+            valueStyle,
+          ]}
+        >
+          {displayValue}
+        </Text>
+
+        {subValue ? (
+          <Text
+            style={[
+              styles.subValue,
+              {
+                color: colors.foregroundMuted,
+                ...typography.caption,
+              },
+            ]}
+          >
+            {subValue}
+          </Text>
+        ) : null}
+      </View>
+    );
+  }
+
+  // Horizontal layout for Desktop / Wide screens
+  return (
+    <View
+      style={[
+        styles.container,
+        styles.rowContainer,
+        { paddingVertical: isCompact ? spacing.xs : spacing.sm },
+        style,
+      ]}
+    >
+      <Text
+        style={[
+          styles.label,
+          {
+            color: colors.foregroundMuted,
+            ...typography.label,
+            textTransform: flair.headingTransform === "uppercase" ? "uppercase" : "none",
+          },
+          labelStyle,
+        ]}
+      >
+        {label}
+      </Text>
+
+      <View style={styles.rowValueWrapper}>
+        <View style={styles.rowValueLine}>
+          <Text
+            selectable
+            style={[
+              styles.rowValueText,
+              {
+                color: colors.foreground,
+                ...typography.bodySmall,
+                fontFamily,
+              },
+              valueStyle,
+            ]}
+          >
+            {displayValue}
+          </Text>
+
+          {copyButton}
+        </View>
+
+        {subValue ? (
+          <Text
+            style={[
+              styles.subValue,
+              {
+                color: colors.foregroundMuted,
+                ...typography.caption,
+              },
+            ]}
+          >
+            {subValue}
+          </Text>
+        ) : null}
+      </View>
+    </View>
+  );
+}
+
+export interface KeyValueGroupProps {
+  children: ReactNode;
+  columns?: 1 | 2 | 3 | 4;
+  gap?: number;
+  /**
+   * How a compact surface treats the column count.
+   * - "compact" (default): collapse to a single column on a compact surface —
+   *   the historical behavior.
+   * - "never": keep the requested column count on a compact surface.
+   */
+  collapse?: "compact" | "never";
+  /**
+   * Minimum width a column should keep. When set and the container width is
+   * known, the effective column count is capped so each column stays at least
+   * this wide, wrapping to fewer columns rather than collapsing to one.
+   * `columns` remains the upper bound.
+   */
+  minColumnWidth?: number;
+  style?: StyleProp<ViewStyle>;
+}
+
+export function KeyValueGroup({
+  children,
+  columns = 2,
+  gap = spacing.md,
+  collapse = "compact",
+  minColumnWidth,
+  style,
+}: KeyValueGroupProps) {
+  const { isCompact, layout } = usePluginTheme();
+  const effectiveColumns = resolveGridColumns({
+    columns,
+    gap,
+    width: layout.width,
+    minColumnWidth,
+    collapse,
+    isCompact,
+  });
+
+  const childArray = React.Children.toArray(children).filter(Boolean);
+
+  return (
+    <View style={[styles.groupContainer, { gap }, style]}>
+      {childArray.map((child, index) => (
+        <View
+          key={index}
+          style={{
+            flexGrow: 1,
+            flexShrink: 1,
+            flexBasis: `${Math.floor(100 / effectiveColumns) - 2}%`,
+          }}
+        >
+          {child}
+        </View>
+      ))}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    width: "100%",
+  },
+  rowContainer: {
+    flexDirection: "row",
+    alignItems: "flex-start",
+    justifyContent: "space-between",
+    gap: 12,
+  },
+  stackedContainer: {
+    flexDirection: "column",
+    gap: 3,
+    width: "100%",
+  },
+  stackedHeaderRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    width: "100%",
+  },
+  stackedValueText: {
+    width: "100%",
+  },
+  inlineContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: spacing.xs,
+    minWidth: 0,
+  },
+  inlineLabel: {
+    flexShrink: 0,
+  },
+  inlineValueText: {
+    flexShrink: 1,
+    minWidth: 0,
+  },
+  inlineSubValue: {
+    flexShrink: 0,
+  },
+  rowValueWrapper: {
+    flexDirection: "column",
+    alignItems: "flex-end",
+    flexGrow: 1,
+    flexShrink: 1,
+    minWidth: 0,
+    gap: 2,
+  },
+  rowValueLine: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "flex-end",
+    gap: 6,
+    flexShrink: 1,
+    minWidth: 0,
+    maxWidth: "100%",
+  },
+  rowValueText: {
+    flexShrink: 1,
+    minWidth: 0,
+    textAlign: "right",
+  },
+  groupContainer: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    width: "100%",
+  },
+  label: {
+    flexShrink: 1,
+    minWidth: 0,
+  },
+  subValue: {
+    flexShrink: 1,
+    minWidth: 0,
+  },
+  copyBtn: {
+    padding: 3,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+});