@xpufx/paseo-top 0.4.2 → 0.4.4

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

@@ -1,4 +1,5 @@
 export * from "./theme/index";
+export * from "./styles/index";
 export * from "./components/index";
 export * from "./layout/index";
 export * from "./pill";
@@ -26,3 +27,4 @@ export {
   type ForgeMarkInput,
   type ResolvedForgeMark,
 } from "../../../shared/vendor/paseo-plugin-helper/forge";
+export * from "./tickets";

package/client/vendor/paseo-plugin-helper/layout/ModalBody.tsx

@@ -28,12 +28,10 @@ export interface ModalBodyProps {
   header?: ReactNode;
   headerStyle?: StyleProp<ViewStyle>;
   /**
-   * Host dialog size preset. "default" (default) is fully fluid inside the
-   * host-allocated dialog. "large" opts into the helper's documented wide
-   * extent on desktop so data-dense modals/surfaces get room, and is ignored on
-   * mobile (the bottom sheet is already full-bleed) and inside composer
-   * popovers (the host owns that narrow viewport). Use this instead of adding a
-   * per-plugin width/minWidth literal; the host still owns the final size.
+   * Advisory density hint. It carries no width floor: the host `Modal` has no
+   * size prop, so a content-side `minWidth` would override the host dialog
+   * allocation and clip inside narrow docks (paseo#641). Use `maxContentWidth`
+   * for a readable dense column. Ignored on compact/mobile surfaces.
    */
   size?: ModalBodySize;
   /**
@@ -88,13 +86,14 @@ export interface ModalBodyProps {
  * Adding the `"required"` member is additive: the existing two values keep
  * their meaning and the default stays `"helper"`.
  */
-export type ModalBodyScrollOwner = "helper" | "host" | "required";
+export type ModalBodyScrollOwner = "helper" | "host" | "required" | "popover";
 
 export const ModalBodyScrollOwnerContext = createContext<ModalBodyScrollOwner>("helper");
 
-// The single documented home for the large dialog preset. Prefer
-// `ModalBody size="large"` over adding a per-plugin width/minWidth literal.
-const LARGE_DIALOG_MIN_WIDTH = 640;
+// `size` is advisory and intentionally carries no width floor. A content-side
+// `minWidth` overrides the host dialog allocation instead of deferring to it,
+// so a narrow dock (explorer/sidebar) clips the content it was meant to widen
+// (paseo#641). Use `maxContentWidth` to keep a dense column readable.
 
 /**
  * Mobile-safe scrollable body for Paseo <Modal.Content>.
@@ -142,7 +141,6 @@ export function ModalBody({
   header,
   headerStyle,
   headerMode = "scroll",
-  size = "default",
   maxContentWidth,
   scrollMode = "auto",
   debugTag,
@@ -154,20 +152,17 @@ export function ModalBody({
 }: ModalBodyProps) {
   const { isCompact, isMobile, layout, padding, colors } = usePluginTheme();
   const scrollOwner = useContext(ModalBodyScrollOwnerContext);
-  const hostOwnsScroll = scrollOwner === "host";
+  const hostOwnsScroll = scrollOwner === "host" || scrollOwner === "popover";
   // "required": an ancestor proved the host supplies no scroller (plugin
   // surface) — own the scroll on every surface, including non-compact desktop.
   const helperOwnsScroll =
     !hostOwnsScroll &&
     (scrollOwner === "required" || scrollMode === "always" || isCompact || isMobile);
-  // The large preset is the ONE documented place a plugin can ask for a wide
-  // dialog frame. It is a desktop-only content minimum: the mobile sheet is
-  // already full-bleed, and a composer popover viewport is host-owned and
-  // intentionally narrow, so both ignore the preset.
-  const sizeStyle =
-    size === "large" && !isMobile && !isCompact && !hostOwnsScroll
-      ? styles.largeDialog
-      : undefined;
+  // `size` no longer contributes width. The host `Modal` has no size prop, so
+  // there is no host allocation to request and nothing to condition on: a
+  // content-side floor is the only lever available, and it fights the host by
+  // refusing to shrink inside a narrow dialog. Data-dense surfaces get their
+  // reading width from `maxContentWidth` on the content column instead.
   const ResolvedScrollView = selectHostScrollView(
     getOptionalClientHost(),
     FallbackScrollView as unknown as HostScrollView,
@@ -224,7 +219,7 @@ export function ModalBody({
   const scrollBody = (
     <ResolvedScrollView
       ref={setRefs}
-      style={[{ backgroundColor: colors.surface0 }, styles.container, sizeStyle, style]}
+      style={[{ backgroundColor: colors.surface0 }, styles.container, style]}
       nestedScrollEnabled={true}
       keyboardShouldPersistTaps="handled"
       showsVerticalScrollIndicator={true}
@@ -265,7 +260,7 @@ export function ModalBody({
         } as unknown as ViewStyle)
       : undefined;
   const plainBody = (
-    <View style={[styles.plainBody, sizeStyle, style]}>
+    <View style={[styles.plainBody, style]}>
       {header ? (
         <View style={[styles.header, stickyHeaderStyle, headerStyle]}>{header}</View>
       ) : null}
@@ -296,7 +291,7 @@ export function ModalBody({
     return (
       <ResolvedScrollView
         ref={setRefs}
-        style={[{ backgroundColor: colors.surface0 }, styles.container, sizeStyle, style]}
+        style={[{ backgroundColor: colors.surface0 }, styles.container, style]}
         nestedScrollEnabled={true}
         keyboardShouldPersistTaps="handled"
         showsVerticalScrollIndicator={true}
@@ -330,7 +325,7 @@ export function ModalBody({
   }
 
   return (
-    <View style={[styles.screen, sizeStyle]}>
+    <View style={[styles.screen]}>
       <View style={[styles.header, headerStyle]}>{header}</View>
       {scrollBody}
     </View>
@@ -338,11 +333,6 @@ export function ModalBody({
 }
 
 const styles = StyleSheet.create({
-  // Desktop-only wide extent for `size="large"`. The host still owns the final
-  // dialog size; this only asks a content-sizing host for more room.
-  largeDialog: {
-    minWidth: LARGE_DIALOG_MIN_WIDTH,
-  },
   screen: {
     flex: 1,
     minHeight: 0,

package/client/vendor/paseo-plugin-helper/layout/ModalContent.tsx

@@ -1,35 +1,33 @@
 import React, { type ReactNode } from "react";
 import { getClientHost } from "../host";
-import { ModalBody, type ModalBodyProps } from "./ModalBody";
+import { ModalBody, ModalBodyScrollOwnerContext, type ModalBodyProps } from "./ModalBody";
 
 export interface ModalContentProps extends Omit<ModalBodyProps, "scrollMode"> {
   children: ReactNode;
+  /**
+   * Whether the host owns the outer scroll container.
+   * Defaults to `true` so host desktop mouse wheel, trackpad, and mobile bottom
+   * sheet gestures scroll natively without fighting an inner scroller.
+   * Set to `false` only if the modal contains a custom internal scroller
+   * (e.g. virtualized list or canvas).
+   */
+  scrollable?: boolean;
 }
 
 /**
  * Helper-owned modal body for plugins that open their own host `<Modal>`.
  *
- * Use this instead of the raw host `<Modal.Content>`: it wraps the host content
- * view AND the shared `ModalBody` contract in one element, so a plugin cannot
- * accidentally end up content-sized.
+ * Delegates scroll ownership to the host `<Modal.Content>` (scrollable by default)
+ * so desktop mouse wheel, trackpad, and mobile bottom sheet gestures scroll
+ * natively under Paseo host rules without fighting an inner scroller.
  *
- * Why the raw host `Modal.Content` resizes: Paseo maps
- * `<Modal.Content scrollable={true}>` (the host default) to a desktop card with
- * no explicit height, so the dialog grows/shrinks with its children on every
- * data change. This wrapper always passes `scrollable={false}`, which makes the
- * host allocate a bounded dialog (`desktopHeight: "85%"`). Because that host
- * content view then supplies no scroller, the wrapper also forces
- * `ModalBody scrollMode="always"`, so the helper owns the one scroll region on
- * every surface and the bounded dialog scrolls instead of clipping.
- *
- * The size contract is `ModalBody`'s: it takes the host-allocated dialog size
- * and is fluid within it; `size?: "default" | "large"` is the only size escape
- * hatch. Do not add per-plugin width/minWidth/height literals around it.
+ * Sizing stays fluid within the host-allocated modal frame, respecting
+ * `size?: "default" | "large"`.
  *
  * ```tsx
  * <Modal title="…" open={open} onOpenChange={setOpen}>
  *   <ModalContent size="default">
- *     …cards, controls, rows; content never drives the dialog frame…
+ *     …cards, controls, rows…
  *   </ModalContent>
  * </Modal>
  * ```
@@ -37,13 +35,17 @@ export interface ModalContentProps extends Omit<ModalBodyProps, "scrollMode"> {
  * Accepts every `ModalBody` prop (header, headerMode, refreshing, onRefresh,
  * stickToEnd, scrollRef, debugTag, style, contentContainerStyle, …).
  */
-export function ModalContent({ children, ...bodyProps }: ModalContentProps) {
+export function ModalContent({
+  children,
+  scrollable = true,
+  ...bodyProps
+}: ModalContentProps) {
   const { Modal } = getClientHost();
   return (
-    <Modal.Content scrollable={false}>
-      <ModalBody scrollMode="always" {...bodyProps}>
-        {children}
-      </ModalBody>
+    <Modal.Content scrollable={scrollable}>
+      <ModalBodyScrollOwnerContext.Provider value={scrollable ? "host" : "required"}>
+        <ModalBody {...bodyProps}>{children}</ModalBody>
+      </ModalBodyScrollOwnerContext.Provider>
     </Modal.Content>
   );
 }

package/client/vendor/paseo-plugin-helper/panel.tsx

@@ -20,6 +20,8 @@ export interface RegisterWorkspacePanelOptions {
   icon: string;
   Component: ComponentType<PluginWorkspacePanelProps>;
   flair?: VisualFlair;
+  /** Host locations in which the panel should be available. */
+  locations?: string[];
 }
 
 export interface RegisterAgentPanelOptions {
@@ -37,8 +39,8 @@ export interface RegisterAgentPanelOptions {
 export function registerWorkspacePanel(
   plugin: WorkspacePanelRegistrar,
   options: RegisterWorkspacePanelOptions,
-): void {
-  const { id, title, icon, Component, flair } = options;
+): () => void {
+  const { id, title, icon, Component, flair, locations } = options;
 
   const WrappedComponent: ComponentType<PluginWorkspacePanelProps> = (props) => (
     <PluginThemeProvider theme={props.theme} layout={props.layout} flair={flair}>
@@ -46,13 +48,19 @@ export function registerWorkspacePanel(
     </PluginThemeProvider>
   );
 
-  plugin.addWorkspacePanel({
+  const registration = plugin.addWorkspacePanel({
     id,
     title,
     icon,
     context: "workspace",
+    locations,
     Component: WrappedComponent,
   });
+
+  return () => {
+    if (typeof registration === "function") registration();
+    else registration?.remove?.();
+  };
 }
 
 /**