@xpufx/paseo-top 0.4.3 → 0.4.4

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

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

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

@@ -18,6 +18,15 @@ export interface SearchInputProps {
   onChangeText: (text: string) => void;
   placeholder?: string;
   onClear?: () => void;
+  /**
+   * Painted box height, opt-in per call site. Unset keeps the original
+   * `isCompact ? 36 : 40` box so no untouched surface changes appearance.
+   * 26 matches the compact `size="sm"` button recipe (~26px) so a search field
+   * can sit beside filter pills in one row without inflating it (#645); a
+   * height of 26 or less also switches the input to the 12px `sm` label size,
+   * anything taller keeps the prior 13/14.
+   */
+  height?: number;
   style?: StyleProp<ViewStyle>;
   inputStyle?: StyleProp<TextStyle>;
   testID?: string;
@@ -31,6 +40,7 @@ export function SearchInput({
   onChangeText,
   placeholder = "Search...",
   onClear,
+  height,
   style,
   inputStyle,
   testID,
@@ -40,6 +50,10 @@ export function SearchInput({
     RNTextInput) as ComponentType<RNTextInputProps & { ref?: Ref<RNTextInputInstance> }>;
   const { colors, resolveRadius, isCompact } = usePluginTheme();
   const radius = resolveRadius("sm");
+  // Unspecified keeps the original compact-aware default so every call site
+  // that does not opt in renders exactly as before (#645's scope was the
+  // uppidi-fleet filter rows only).
+  const resolvedHeight = height ?? (isCompact ? 36 : 40);
 
   const handleClear = () => {
     onChangeText("");
@@ -54,7 +68,7 @@ export function SearchInput({
           backgroundColor: colors.surface1,
           borderColor: colors.border,
           borderRadius: radius,
-          height: isCompact ? 36 : 40,
+          height: resolvedHeight,
         },
         style,
       ]}
@@ -72,7 +86,7 @@ export function SearchInput({
           styles.input,
           {
             color: colors.foreground,
-            fontSize: isCompact ? 13 : 14,
+            fontSize: height !== undefined && height <= 26 ? 12 : isCompact ? 13 : 14,
           },
           inputStyle,
         ]}

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

@@ -41,6 +41,8 @@ export function SectionHeader({
   return (
     <View style={[styles.container, style]}>
       <Text
+        numberOfLines={1}
+        ellipsizeMode="tail"
         style={[
           styles.title,
           {
@@ -73,8 +75,13 @@ const styles = StyleSheet.create({
     gap: 8,
     marginTop: 8,
     marginBottom: 2,
+    flexShrink: 1,
+    maxWidth: "100%",
   },
   title: {
     letterSpacing: 0.8,
+    // Section titles are caller-supplied and unbounded; the title must be
+    // allowed to compress for `numberOfLines` to engage.
+    flexShrink: 1,
   },
 });

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

@@ -1,9 +1,11 @@
-import React, { useState } from "react";
+import React, { useRef, useState } from "react";
 import {
+  Modal,
   Pressable,
   ScrollView as FallbackScrollView,
   StyleSheet,
   Text,
+  TouchableWithoutFeedback,
   View,
   type StyleProp,
   type ViewStyle,
@@ -32,10 +34,25 @@ export interface SelectProps {
 
 const OPTION_LIST_MAX_HEIGHT = 216;
 
+interface TriggerCoords {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+// When `measureInWindow` is unavailable or never invokes its callback (node
+// test renderers, host shims), the menu still opens anchored to a zeroed box
+// rather than swallowing the press.
+const FALLBACK_COORDS: TriggerCoords = { x: 0, y: 0, width: 0, height: 0 };
+
 /**
  * Compact single-choice picker sized to sit inside a {@link FormRow}. The
- * closed trigger stays one line tall; opening reveals a bounded, scrollable
- * option list, so a long list degrades to scrolling rather than overflow.
+ * closed trigger stays one line tall; opening mounts the menu in a root
+ * transparent `<Modal>` overlay portal, so a long list never expands the
+ * trigger's parent container, is never clipped by an ancestor
+ * `overflow: "hidden"` (Card/Tabs/Modal), and always paints above later
+ * siblings regardless of local stacking context.
  */
 export function Select({
   value,
@@ -48,12 +65,14 @@ export function Select({
   style,
 }: SelectProps) {
   const { Icon } = getClientHost();
-  // The dropdown option list is a bounded box nested inside the host sheet,
-  // so it scrolls with a plain React Native ScrollView — never the host
-  // sheet-gesture scroller (#219).
+  // The option list is mounted in the root modal overlay, so it scrolls with
+  // a plain React Native ScrollView — never the host sheet-gesture scroller
+  // (#219) and never a scroller owned by the trigger's parent.
   const { colors, resolveRadius, typography, isCompact, touchTargetMin, alpha } =
     usePluginTheme();
   const [open, setOpen] = useState(false);
+  const [coords, setCoords] = useState<TriggerCoords | null>(null);
+  const triggerRef = useRef<View>(null);
 
   const caption = typography?.caption ?? {
     fontSize: 11,
@@ -76,14 +95,40 @@ export function Select({
 
   const triggerMinHeight = size === "sm" ? 28 : Math.max(34, touchTargetMin);
 
+  const openAt = (next: TriggerCoords) => {
+    setCoords(next);
+    setOpen(true);
+  };
+
+  const handleToggle = () => {
+    if (isOpen) {
+      setOpen(false);
+      return;
+    }
+
+    const node = triggerRef.current;
+    // A node/shim without `measureInWindow` (node test renderers, stripped
+    // host shims) still opens anchored to a zeroed box rather than swallowing
+    // the press (#520).
+    if (!node || typeof node.measureInWindow !== "function") {
+      openAt(FALLBACK_COORDS);
+      return;
+    }
+
+    node.measureInWindow((x, y, width, height) => {
+      openAt({ x, y, width, height });
+    });
+  };
+
   return (
     <View style={[styles.container, style]}>
       <Pressable
+        ref={triggerRef}
         accessibilityRole="button"
         accessibilityLabel={label ? `${label}: ${display}` : display}
         accessibilityState={{ expanded: isOpen, disabled }}
         disabled={!canOpen}
-        onPress={() => setOpen((prev) => !prev)}
+        onPress={handleToggle}
         style={({ pressed }) => [
           styles.trigger,
           {
@@ -122,67 +167,84 @@ export function Select({
         />
       </Pressable>
 
-      {isOpen ? (
-        <View
-          style={[
-            styles.optionList,
-            {
-              borderRadius: radius,
-              borderColor: colors.border,
-              backgroundColor: colors.surface0,
-              marginTop: spacing.xs,
-            },
-          ]}
+      {isOpen && coords ? (
+        <Modal
+          transparent
+          visible={isOpen}
+          animationType="none"
+          onRequestClose={() => setOpen(false)}
         >
-          <FallbackScrollView
-            nestedScrollEnabled
-            keyboardShouldPersistTaps="handled"
-            style={{ maxHeight: OPTION_LIST_MAX_HEIGHT }}
+          <TouchableWithoutFeedback
+            accessibilityRole="button"
+            accessibilityLabel="Dismiss options"
+            onPress={() => setOpen(false)}
+          >
+            <View style={StyleSheet.absoluteFill} />
+          </TouchableWithoutFeedback>
+
+          <View
+            style={[
+              styles.overlayList,
+              {
+                top: coords.y + coords.height + spacing.xs,
+                left: coords.x,
+                minWidth: coords.width,
+                borderRadius: radius,
+                borderColor: colors.border,
+                backgroundColor: colors.surface0,
+              },
+            ]}
           >
-            {options.map((option) => {
-              const isSelected = option.value === value;
-              return (
-                <Pressable
-                  key={option.value}
-                  accessibilityRole="button"
-                  accessibilityLabel={option.label}
-                  accessibilityState={{ selected: isSelected }}
-                  onPress={() => {
-                    onValueChange(option.value);
-                    setOpen(false);
-                  }}
-                  style={({ pressed }) => [
-                    styles.option,
-                    {
-                      paddingVertical,
-                      paddingHorizontal,
-                      backgroundColor: isSelected
-                        ? colors.surface2
-                        : pressed
-                          ? alpha(colors.surface2, 0.5)
-                          : "transparent",
-                    },
-                  ]}
-                >
-                  <Text
-                    numberOfLines={1}
-                    style={[
-                      styles.optionText,
+            <FallbackScrollView
+              nestedScrollEnabled
+              keyboardShouldPersistTaps="handled"
+              style={{ maxHeight: OPTION_LIST_MAX_HEIGHT }}
+            >
+              {options.map((option) => {
+                const isSelected = option.value === value;
+                return (
+                  <Pressable
+                    key={option.value}
+                    accessibilityRole="button"
+                    accessibilityLabel={option.label}
+                    accessibilityState={{ selected: isSelected }}
+                    onPress={() => {
+                      onValueChange(option.value);
+                      setOpen(false);
+                    }}
+                    style={({ pressed }) => [
+                      styles.option,
                       {
-                        color: isSelected ? colors.foreground : colors.foregroundMuted,
-                        fontSize: isCompact ? fontSize : fontSize + 1,
-                        lineHeight,
-                        fontWeight: isSelected ? "600" : "400",
+                        paddingVertical,
+                        paddingHorizontal,
+                        backgroundColor: isSelected
+                          ? colors.surface2
+                          : pressed
+                            ? alpha(colors.surface2, 0.5)
+                            : "transparent",
                       },
                     ]}
                   >
-                    {option.label}
-                  </Text>
-                </Pressable>
-              );
-            })}
-          </FallbackScrollView>
-        </View>
+                    <Text
+                      numberOfLines={1}
+                      style={[
+                        styles.optionText,
+                        {
+                          color: isSelected ? colors.foreground : colors.foregroundMuted,
+                          fontSize: isCompact ? fontSize : fontSize + 1,
+                          lineHeight,
+                          fontWeight: isSelected ? "600" : "400",
+                        },
+                      ]}
+                    >
+                      {option.label}
+                    </Text>
+                  </Pressable>
+                );
+              })}
+            </FallbackScrollView>
+          </View>
+        </Modal>
       ) : null}
     </View>
   );
@@ -203,9 +265,15 @@ const styles = StyleSheet.create({
     flexShrink: 1,
     minWidth: 0,
   },
-  optionList: {
+  overlayList: {
+    position: "absolute",
     borderWidth: 1,
     overflow: "hidden",
+    elevation: 20,
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.25,
+    shadowRadius: 8,
   },
   option: {},
   optionText: {

package/client/vendor/paseo-plugin-helper/components/index.ts

@@ -1,5 +1,6 @@
 export * from "./Button";
 export * from "./InlineButton";
+export * from "./InteractiveRow";
 export * from "./AttentionBeacon";
 export * from "./Badge";
 export * from "./StatusDot";

package/client/vendor/paseo-plugin-helper/custom-pills.tsx

@@ -17,8 +17,10 @@ export interface CustomPillBodyProps {
 }
 
 /**
- * Standard pill body renderer for a custom metric pill in the composer trackbar.
- * Automatically adapts to responsive compact/mobile modes and shows threshold status.
+ * Standard pill body renderer for a custom metric pill. The host renders the
+ * composer pill body itself, so reach for this from a pill's own surface
+ * (`renderModal`) rather than from the trackbar; it adapts to responsive
+ * compact/mobile modes and shows threshold status.
  */
 export function CustomPillBody({ state }: CustomPillBodyProps) {
   const { Icon } = getClientHost();
@@ -145,7 +147,6 @@ export function registerCustomPills(
       flair: options.flair,
       resolveLabel: () =>
         pill.displayValue ? `${pill.title} ${pill.displayValue}` : pill.title,
-      renderPill: () => <CustomPillBody state={pill} />,
       renderModal: () => {
         const [refreshing, setRefreshing] = useState(false);
         const [currentOutput, setCurrentOutput] = useState<string | undefined>(

package/client/vendor/paseo-plugin-helper/host.ts

@@ -14,20 +14,23 @@ import type {
   TextInput as RNTextInput,
   TextInputProps,
 } from "react-native";
+import type {
+  PluginButtonRegistration,
+  PluginComposerPillContribution,
+} from "@getpaseo/plugin/client";
 
 /**
  * Structural host types for Paseo client integration.
  *
  * These interfaces describe the shapes `paseo-plugin-helper/client` needs
- * from the Paseo host app. They are intentionally decoupled from any
- * Paseo SDK version: this module (and every client module built on
- * it) contains zero Paseo SDK imports, so a single published helper
- * bundle satisfies both the Paseo v0.7 SDK entry points and the Paseo
- * v0.8 runtime-owned entry points.
+ * from the Paseo host app: the runtime dependencies the plugin injects once
+ * in its client entry — the host theme, the layout, the icon/Modal primitives,
+ * the agents feed — so they can be supplied from any entry point.
  *
- * The plugin author provides the real host implementations once, in the
- * client entry, using whichever specifiers match their installed SDK.
- * See docs/client.md for the per-version import paths.
+ * The composer pill is the exception: the host owns that contribution's shape,
+ * so it is imported from the Paseo SDK rather than restated here. A restated
+ * copy is what let a pre-0.9 `{Component, onPress}` pill through the type
+ * system (#666).
  */
 
 export interface HostThemeColors {
@@ -216,57 +219,8 @@ export interface HostSurfaceProps {
   };
 }
 
-export interface ComposerPillContribution {
-  id: string;
-  title: string;
-  workspaceId: string;
-  agentId: string;
-  Component: ComponentType<HostPillProps>;
-  onPress(): void | Promise<void>;
-}
-
-export type ComposerPillButtonIcon = string | ComponentType<any>;
-
-export interface ComposerPillButtonDescriptor {
-  title: string;
-  icon: ComposerPillButtonIcon;
-  label?: string;
-  visible?: boolean;
-  disabled?: boolean;
-  behavior:
-    | { kind: "action"; onPress(): void | Promise<void> }
-    | { kind: "popover"; Content: ComponentType<any> };
-}
-
-export interface ComposerPillButtonContribution {
-  id: string;
-  workspaceId: string;
-  agentId: string;
-  button: ComposerPillButtonDescriptor;
-}
-
-export interface ComposerPillSdkContribution {
-  id: string;
-  workspaceId: string;
-  agentId: string;
-  button: Record<string, any>;
-  [key: string]: any;
-}
-
-export interface ComposerPillRegistrationHandle {
-  update(patch: Record<string, any>): void;
-  remove(): void;
-}
-
-export type ComposerPillRegistration = PluginCleanup | ComposerPillRegistrationHandle;
-
 export interface ComposerPillRegistrar {
-  addComposerPill(
-    contribution:
-      | ComposerPillContribution
-      | ComposerPillButtonContribution
-      | ComposerPillSdkContribution,
-  ): ComposerPillRegistration;
+  addComposerPill(contribution: PluginComposerPillContribution): PluginButtonRegistration;
   paseo: {
     agents: HostAgentsApi;
   };

package/client/vendor/paseo-plugin-helper/index.ts

@@ -27,3 +27,4 @@ export {
   type ForgeMarkInput,
   type ResolvedForgeMark,
 } from "../../../shared/vendor/paseo-plugin-helper/forge";
+export * from "./tickets";