@xpufx/paseo-top 0.4.4 → 0.4.5

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,88 +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
-        accessibilityLabel={label}
-        numberOfLines={1}
-        ellipsizeMode="tail"
-        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,
-    // Caller-supplied labels are unbounded; without a shrink budget the control
-    // claims its full text width and overflows narrow viewports.
-    flexShrink: 1,
-    maxWidth: "100%",
-  },
-  text: {
-    fontSize: 12,
-    fontWeight: "600",
-    // The label must be allowed to compress for `numberOfLines` to engage.
-    flexShrink: 1,
-  },
-});

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

@@ -1,142 +0,0 @@
-import React, { useCallback, useState, type ReactNode } from "react";
-import {
-  Pressable,
-  type AccessibilityRole,
-  type GestureResponderEvent,
-  type StyleProp,
-  type ViewStyle,
-} from "react-native";
-import { usePluginTheme } from "../theme/provider";
-
-export interface InteractiveRowProps {
-  /** Arbitrary row content — status dots, badges, text, metric readouts. */
-  children?: ReactNode;
-  /**
-   * Press handler. Receives the raw event so callers can control propagation
-   * (e.g. a nested status light calling `event.stopPropagation()`).
-   */
-  onPress?: (event: GestureResponderEvent) => void;
-  /** Native / RN-web tooltip text attached to the hit area. */
-  title?: string;
-  disabled?: boolean;
-  accessibilityRole?: AccessibilityRole;
-  accessibilityLabel?: string;
-  accessibilityHint?: string;
-  testID?: string;
-  /** Base layout style, merged before the interaction layers. */
-  style?: StyleProp<ViewStyle>;
-  /** Extra style layered only while hovered (and not disabled). */
-  hoverStyle?: StyleProp<ViewStyle>;
-  /** Apply a subtle theme accent tint while hovered. Default: false. */
-  hoverTint?: boolean;
-  /** Accent opacity used by `hoverTint`. Default: 0.05. */
-  hoverTintOpacity?: number;
-  /** Opacity while pressed. Default: 0.7. */
-  pressedOpacity?: number;
-  /** Opacity while hovered but not pressed. Defaults to `opacity`. */
-  hoveredOpacity?: number;
-  /** Opacity at rest. Default: 1. */
-  opacity?: number;
-  /** Opacity when disabled. Default: 0.45. */
-  disabledOpacity?: number;
-  /** Expanded touch target beyond the visual bounds. */
-  hitSlop?: number;
-  /** Notified whenever the hover state flips, for callers that tint their own children. */
-  onHoverChange?: (hovered: boolean) => void;
-}
-
-/**
- * Hover-aware, pressable row container for dense interactive content (#580).
- *
- * Owns the interaction concerns a labeled `Button` cannot: a hover state (with
- * optional accent tint), an RN-web `title` tooltip, pressed opacity, a pointer
- * cursor, and an `onPress` that forwards the event for `stopPropagation`.
- * Content is arbitrary, so a status dot, badges, and metric readouts compose
- * inside without wrapping each in its own control.
- */
-export function InteractiveRow({
-  children,
-  onPress,
-  title,
-  disabled = false,
-  accessibilityRole,
-  accessibilityLabel,
-  accessibilityHint,
-  testID,
-  style,
-  hoverStyle,
-  hoverTint = false,
-  hoverTintOpacity = 0.05,
-  pressedOpacity = 0.7,
-  hoveredOpacity,
-  opacity = 1,
-  disabledOpacity = 0.45,
-  hitSlop,
-  onHoverChange,
-}: InteractiveRowProps) {
-  const { colors, alpha } = usePluginTheme();
-  const [hovered, setHovered] = useState(false);
-  const [pressed, setPressed] = useState(false);
-
-  const handleMouseEnter = useCallback(() => {
-    if (disabled) return;
-    setHovered(true);
-    onHoverChange?.(true);
-  }, [disabled, onHoverChange]);
-
-  const handleMouseLeave = useCallback(() => {
-    setHovered(false);
-    onHoverChange?.(false);
-  }, [onHoverChange]);
-
-  // `title` is an RN-web DOM passthrough absent from the native prop types, and
-  // `onMouseEnter`/`onMouseLeave` are the RN-web hover hooks the dense rows
-  // already relied on; attach both via an untyped spread to keep the runtime
-  // semantics identical to the hand-rolled rows (#580).
-  const webProps = {
-    onMouseEnter: handleMouseEnter,
-    onMouseLeave: handleMouseLeave,
-    ...(title ? { title } : {}),
-  } as any;
-
-  const interactive = hovered && !disabled;
-  const hoverBackground = interactive && hoverTint
-    ? { backgroundColor: alpha(colors.accent, hoverTintOpacity) }
-    : null;
-  const restingOpacity = interactive ? (hoveredOpacity ?? opacity) : opacity;
-
-  return (
-    <Pressable
-      {...webProps}
-      onPress={onPress}
-      onPressIn={() => setPressed(true)}
-      onPressOut={() => setPressed(false)}
-      disabled={disabled}
-      accessibilityRole={accessibilityRole ?? (onPress ? "button" : undefined)}
-      accessibilityLabel={accessibilityLabel}
-      accessibilityHint={accessibilityHint}
-      testID={testID}
-      hitSlop={hitSlop}
-      style={[
-        { cursor: onPress && !disabled ? "pointer" : "auto" },
-        // A pressable wraps arbitrary content (titles, badges, metric readouts)
-        // and must never widen its parent: Yoga defaults `flexShrink` to 0, so
-        // without a shrink budget a long label forces the whole row past the
-        // viewport. Declared before `style` so callers can still override.
-        { flexShrink: 1, maxWidth: "100%" },
-        style,
-        hoverBackground,
-        interactive ? hoverStyle : null,
-        {
-          opacity: disabled
-            ? disabledOpacity
-            : pressed
-              ? pressedOpacity
-              : restingOpacity,
-        },
-      ]}
-    >
-      {children}
-    </Pressable>
-  );
-}