@xpufx/paseo-top 0.4.2 → 0.4.3

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

@@ -439,30 +439,64 @@ export function registerComposerPill<TPayload = any>(
           color={theme.colors.foreground}
         />
       );
+      const stopBubbling = (e: any) => {
+        if (e && typeof e.stopPropagation === "function") {
+          e.stopPropagation();
+        }
+      };
+
+      const eventBoundaryProps = {
+        onClick: stopBubbling,
+        onMouseDown: stopBubbling,
+        onMouseUp: stopBubbling,
+        onPointerDown: stopBubbling,
+        onPointerUp: stopBubbling,
+        onTouchStart: stopBubbling,
+        onTouchEnd: stopBubbling,
+        onKeyDown: stopBubbling,
+        onKeyUp: stopBubbling,
+      };
+
       return (
         <>
           {icon}
-          <Modal
-            title={options.modalTitle ?? options.title}
-            icon={modalIconElement}
-            open={centeredOpen}
-            onOpenChange={(nextOpen: boolean) => setCenteredOpen(agentId, nextOpen)}
+          <View
+            onStartShouldSetResponder={() => true}
+            onTouchEnd={stopBubbling}
+            {...(eventBoundaryProps as any)}
           >
-            <Modal.Content scrollable={resolvePillModalScrollable(options.hostScroll)}>
-              {centeredOpen ? (
-                <PluginThemeProvider theme={theme} layout={layout} flair={options.flair}>
-                  {options.renderModal({
-                    agentId,
-                    workspaceId: props.workspaceId ?? "",
-                    theme,
-                    layout,
-                    host: props.host ?? { id: "", label: "" },
-                    close: () => setCenteredOpen(agentId, false),
-                  })}
-                </PluginThemeProvider>
-              ) : null}
-            </Modal.Content>
-          </Modal>
+            <Modal
+              title={options.modalTitle ?? options.title}
+              icon={modalIconElement}
+              open={centeredOpen}
+              onOpenChange={(nextOpen: boolean) => setCenteredOpen(agentId, nextOpen)}
+            >
+              <Modal.Content scrollable={resolvePillModalScrollable(options.hostScroll)}>
+                {centeredOpen ? (
+                  <View
+                    onStartShouldSetResponder={() => true}
+                    onTouchEnd={stopBubbling}
+                    {...(eventBoundaryProps as any)}
+                  >
+                    <PluginThemeProvider theme={theme} layout={layout} flair={options.flair}>
+                      <ModalBodyScrollOwnerContext.Provider
+                        value={resolvePillModalScrollable(options.hostScroll) ? "host" : "required"}
+                      >
+                        {options.renderModal({
+                          agentId,
+                          workspaceId: props.workspaceId ?? "",
+                          theme,
+                          layout,
+                          host: props.host ?? { id: "", label: "" },
+                          close: () => setCenteredOpen(agentId, false),
+                        })}
+                      </ModalBodyScrollOwnerContext.Provider>
+                    </PluginThemeProvider>
+                  </View>
+                ) : null}
+              </Modal.Content>
+            </Modal>
+          </View>
         </>
       );
     };
@@ -480,7 +514,7 @@ export function registerComposerPill<TPayload = any>(
     host?: { id: string; label: string };
     close: () => void;
   }) {
-    const { width: windowWidth } = useWindowDimensions();
+    const { width: windowWidth, height: windowHeight } = useWindowDimensions();
     // The anchored popover is otherwise sized from its content, so reflowing
     // content can move the frame under the pointer. Pin it to an explicit width
     // (clamped to the viewport) and let children overflow into their own
@@ -489,6 +523,11 @@ export function registerComposerPill<TPayload = any>(
       !props.layout.compact && options.popoverWidth
         ? Math.max(0, Math.min(options.popoverWidth, windowWidth - 24))
         : undefined;
+    // The host remains the scroll owner, but it needs a finite child extent to
+    // establish the popover viewport. Do not add overflow clipping or an inner
+    // ScrollView here: either would compete with the host's popover/sheet
+    // scroller.
+    const frameMaxHeight = Math.max(1, Math.min(560, windowHeight * 0.8));
     // Layout effect, not effect: the flag must be set in the same commit the
     // popover mounts, before any label timer can interleave. An effect runs
     // after paint, leaving a window where one tick can still publish and
@@ -508,8 +547,14 @@ export function registerComposerPill<TPayload = any>(
     };
     return (
       <PluginThemeProvider theme={props.theme} layout={props.layout} flair={options.flair}>
-        <View style={[styles.popoverContainer, frameWidth ? { width: frameWidth } : null]}>
-          <ModalBodyScrollOwnerContext.Provider value="host">
+        <View
+          style={{
+            ...styles.popoverContainer,
+            maxHeight: frameMaxHeight,
+            ...(frameWidth ? { width: frameWidth } : null),
+          }}
+        >
+          <ModalBodyScrollOwnerContext.Provider value="popover">
             {options.renderModal?.({ ...pillProps, close: props.close })}
           </ModalBodyScrollOwnerContext.Provider>
         </View>
@@ -589,11 +634,15 @@ export function registerComposerPill<TPayload = any>(
           <Modal.Content scrollable={resolvePillModalScrollable(options.hostScroll)}>
             {open ? (
               <PluginThemeProvider theme={props.theme} layout={props.layout} flair={options.flair}>
-                {options.renderModal?.({
-                  ...props,
-                  close: () => setOpen(false),
-                  payload,
-                })}
+                <ModalBodyScrollOwnerContext.Provider
+                  value={resolvePillModalScrollable(options.hostScroll) ? "host" : "required"}
+                >
+                  {options.renderModal?.({
+                    ...props,
+                    close: () => setOpen(false),
+                    payload,
+                  })}
+                </ModalBodyScrollOwnerContext.Provider>
               </PluginThemeProvider>
             ) : null}
           </Modal.Content>

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

@@ -0,0 +1 @@
+export * from "./recipes";

package/client/vendor/paseo-plugin-helper/styles/recipes.ts

@@ -0,0 +1,550 @@
+import type { TextStyle, ViewStyle } from "react-native";
+import type { PluginTheme, StatusVariant, ThemeColors } from "../../../../shared/vendor/paseo-plugin-helper/types";
+import { alpha, getStatusColor, getVariantPalette, getContrastColor } from "../theme/color-utils";
+import { defaultDarkTheme, FALLBACK_ACCENT_FOREGROUND } from "../theme/tokens";
+import type { PluginThemeContextValue } from "../theme/provider";
+import type { SurfaceStyle } from "../theme/flair";
+import type { ButtonSize, ButtonVariant } from "../components/Button";
+import type { BadgeSize, BadgeStyle } from "../components/Badge";
+
+export type ThemeInput =
+  | PluginTheme
+  | PluginThemeContextValue
+  | ThemeColors
+  | { colors: ThemeColors }
+  | undefined;
+
+/**
+ * Resolves ThemeColors from a PluginTheme, PluginThemeContextValue, ThemeColors, or undefined.
+ */
+export function resolveThemeColors(themeInput?: ThemeInput): ThemeColors {
+  if (!themeInput || typeof themeInput !== "object") return defaultDarkTheme.colors;
+  if ("colors" in themeInput && themeInput.colors && typeof themeInput.colors === "object") {
+    return { ...defaultDarkTheme.colors, ...themeInput.colors };
+  }
+  if ("surface0" in themeInput && typeof (themeInput as ThemeColors).surface0 === "string") {
+    return { ...defaultDarkTheme.colors, ...(themeInput as ThemeColors) };
+  }
+  return defaultDarkTheme.colors;
+}
+
+// ---------------------------------------------------------------------------
+// 1. INPUT RECIPE
+// ---------------------------------------------------------------------------
+
+export interface InputRecipeOptions {
+  focused?: boolean;
+  isFocused?: boolean;
+  error?: boolean;
+  hasError?: boolean;
+  disabled?: boolean;
+  multiline?: boolean;
+  mono?: boolean;
+  compact?: boolean;
+  size?: "sm" | "md" | "lg";
+}
+
+export interface InputRecipeResult extends TextStyle, ViewStyle {
+  input: TextStyle & ViewStyle;
+  container: ViewStyle;
+  label: TextStyle;
+  hint: TextStyle;
+}
+
+/**
+ * Generates standard React Native styles for text inputs and surrounding container/label/hint elements.
+ */
+export function inputRecipe(
+  themeInput?: ThemeInput,
+  options?: InputRecipeOptions,
+): InputRecipeResult {
+  const colors = resolveThemeColors(themeInput);
+  const isFocused = Boolean(options?.focused ?? options?.isFocused);
+  const hasError = Boolean(options?.error ?? options?.hasError);
+  const disabled = Boolean(options?.disabled);
+  const multiline = Boolean(options?.multiline);
+  const mono = Boolean(options?.mono);
+  const compact = Boolean(options?.compact);
+
+  const borderColor = hasError
+    ? colors.statusDanger
+    : isFocused
+      ? colors.accent
+      : colors.border;
+
+  const minHeight = multiline
+    ? 64
+    : options?.size === "sm"
+      ? 30
+      : options?.size === "lg"
+        ? 42
+        : compact
+          ? 32
+          : 36;
+  const fontSize =
+    options?.size === "sm" ? 12 : options?.size === "lg" ? 15 : compact ? 13 : 14;
+  const paddingVertical = multiline
+    ? 8
+    : options?.size === "sm"
+      ? 4
+      : options?.size === "lg"
+        ? 8
+        : 6;
+  const paddingHorizontal =
+    options?.size === "sm" ? 8 : options?.size === "lg" ? 12 : 10;
+
+  const baseInput: TextStyle & ViewStyle = {
+    backgroundColor: disabled ? alpha(colors.surface1, 0.5) : colors.surface0,
+    borderColor,
+    borderWidth: 1,
+    borderRadius: 8,
+    color: disabled ? colors.foregroundMuted : colors.foreground,
+    fontSize,
+    fontFamily: mono ? "monospace" : undefined,
+    minHeight,
+    paddingHorizontal,
+    paddingVertical,
+  };
+
+  const container: ViewStyle = {
+    gap: 4,
+    width: "100%",
+  };
+
+  const label: TextStyle = {
+    color: hasError ? colors.statusDanger : colors.foreground,
+    fontSize: compact ? 12 : 13,
+    fontWeight: "600",
+  };
+
+  const hint: TextStyle = {
+    color: hasError ? colors.statusDanger : colors.foregroundMuted,
+    fontSize: 11,
+    marginTop: 2,
+  };
+
+  const input = { ...baseInput };
+  return Object.assign(baseInput, {
+    input,
+    container,
+    label,
+    hint,
+    placeholderColor: colors.foregroundMuted,
+  });
+}
+
+// ---------------------------------------------------------------------------
+// 2. CARD RECIPE
+// ---------------------------------------------------------------------------
+
+export interface CardRecipeOptions {
+  variant?: SurfaceStyle;
+  noPadding?: boolean;
+  radius?: number;
+  borderWidth?: number;
+  compact?: boolean;
+}
+
+export interface CardRecipeResult extends ViewStyle {
+  card: ViewStyle;
+  header: ViewStyle;
+  headerTitle: TextStyle;
+  headerSubtitle: TextStyle;
+}
+
+/**
+ * Generates standard React Native styles for cards and card headers.
+ */
+export function cardRecipe(
+  themeInput?: ThemeInput,
+  optionsOrVariant?: CardRecipeOptions | SurfaceStyle,
+): CardRecipeResult {
+  const colors = resolveThemeColors(themeInput);
+  const options: CardRecipeOptions =
+    typeof optionsOrVariant === "string" ? { variant: optionsOrVariant } : (optionsOrVariant ?? {});
+
+  const variant = options.variant ?? "flat";
+  const noPadding = Boolean(options.noPadding);
+  const compact = Boolean(options.compact);
+  const radius = options.radius ?? (compact ? 6 : 8);
+  const borderWidth = options.borderWidth ?? 1;
+
+  let bg = colors.surface0;
+  let border = colors.border;
+
+  if (variant === "tinted") {
+    bg = alpha(colors.accent, 0.04);
+    border = alpha(colors.accent, 0.2);
+  } else if (variant === "elevated") {
+    bg = colors.surface1;
+    border = colors.border;
+  }
+
+  const baseCard: ViewStyle = {
+    backgroundColor: bg,
+    borderColor: border,
+    borderWidth,
+    borderRadius: radius,
+    paddingHorizontal: noPadding ? 0 : compact ? 8 : 12,
+    paddingVertical: noPadding ? 0 : compact ? 6 : 10,
+    width: "100%",
+    overflow: "hidden",
+  };
+
+  const header: ViewStyle = {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    flexWrap: "wrap",
+    gap: compact ? 4 : 8,
+    width: "100%",
+    marginBottom: compact ? 4 : 8,
+  };
+
+  const headerTitle: TextStyle = {
+    color: colors.foreground,
+    fontSize: compact ? 13 : 14,
+    fontWeight: "600",
+    lineHeight: compact ? 18 : 20,
+  };
+
+  const headerSubtitle: TextStyle = {
+    color: colors.foregroundMuted,
+    fontSize: compact ? 10 : 11,
+    lineHeight: compact ? 14 : 15,
+    fontWeight: "400",
+  };
+
+  const card = { ...baseCard };
+  return Object.assign(baseCard, {
+    card,
+    header,
+    headerTitle,
+    headerSubtitle,
+  });
+}
+
+// ---------------------------------------------------------------------------
+// 3. BUTTON RECIPE
+// ---------------------------------------------------------------------------
+
+export interface ButtonRecipeOptions {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  pressed?: boolean;
+  disabled?: boolean;
+  loading?: boolean;
+  compact?: boolean;
+}
+
+export interface ButtonRecipeResult extends ViewStyle {
+  container: ViewStyle;
+  text: TextStyle;
+}
+
+/**
+ * Generates standard React Native styles for interactive buttons and text labels.
+ */
+export function buttonRecipe(
+  themeInput?: ThemeInput,
+  optionsOrVariant?: ButtonRecipeOptions | ButtonVariant,
+): ButtonRecipeResult {
+  const colors = resolveThemeColors(themeInput);
+  const options: ButtonRecipeOptions =
+    typeof optionsOrVariant === "string" ? { variant: optionsOrVariant } : (optionsOrVariant ?? {});
+
+  const variant = options.variant ?? "secondary";
+  const size = options.size ?? "md";
+  const pressed = Boolean(options.pressed);
+  const disabled = Boolean(options.disabled || options.loading);
+  const compact = Boolean(options.compact);
+
+  const radius = size === "sm" ? 6 : size === "lg" ? 10 : 8;
+  const py = size === "sm" ? (compact ? 5 : 6) : size === "lg" ? 12 : compact ? 8 : 10;
+  const px = size === "sm" ? (compact ? 8 : 10) : size === "lg" ? 18 : compact ? 12 : 14;
+  const fontSize = size === "sm" ? 12 : size === "lg" ? 15 : 13;
+
+  let bg = "transparent";
+  let border = "transparent";
+  let textColor = colors.foreground;
+
+  switch (variant) {
+    case "primary":
+      bg = colors.accent;
+      textColor = colors.accentForeground || FALLBACK_ACCENT_FOREGROUND;
+      break;
+    case "danger":
+      bg = alpha(colors.statusDanger, 0.15);
+      border = alpha(colors.statusDanger, 0.4);
+      textColor = colors.statusDanger;
+      break;
+    case "ghost":
+      bg = "transparent";
+      textColor = colors.foregroundMuted;
+      break;
+    case "secondary":
+    default:
+      bg = colors.surface1;
+      border = colors.border;
+      textColor = colors.foreground;
+      break;
+  }
+
+  const effectiveBg = pressed && !disabled ? alpha(bg === "transparent" ? colors.surface2 : bg, 0.8) : bg;
+
+  const container: ViewStyle = {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 6,
+    backgroundColor: effectiveBg,
+    borderColor: border,
+    borderWidth: border !== "transparent" ? 1 : 0,
+    borderRadius: radius,
+    paddingVertical: py,
+    paddingHorizontal: px,
+    minHeight: size === "sm" ? 28 : size === "lg" ? 42 : 34,
+    opacity: disabled ? 0.45 : 1,
+  };
+
+  const text: TextStyle = {
+    color: textColor,
+    fontSize,
+    fontWeight: "600",
+    textAlign: "center",
+  };
+
+  const subContainer = { ...container };
+  return Object.assign(container, {
+    container: subContainer,
+    text,
+  });
+}
+
+// ---------------------------------------------------------------------------
+// 4. TAB STRIP & TAB ITEM RECIPES
+// ---------------------------------------------------------------------------
+
+export interface TabStripRecipeOptions {
+  radius?: number;
+}
+
+export interface TabStripRecipeResult extends ViewStyle {
+  frame: ViewStyle;
+  track: ViewStyle;
+}
+
+/**
+ * Generates standard React Native styles for tab tracks and bounding frames.
+ */
+export function tabStripRecipe(
+  themeInput?: ThemeInput,
+  options?: TabStripRecipeOptions,
+): TabStripRecipeResult {
+  const colors = resolveThemeColors(themeInput);
+  const radius = options?.radius ?? 8;
+
+  const frame: ViewStyle = {
+    width: "100%",
+    backgroundColor: colors.surface1,
+    borderRadius: radius,
+    borderColor: colors.border,
+    borderWidth: 1,
+    overflow: "hidden",
+    justifyContent: "center",
+  };
+
+  const track: ViewStyle = {
+    flexDirection: "row",
+    alignItems: "center",
+    width: "100%",
+    padding: 3,
+    gap: 2,
+  };
+
+  const subFrame = { ...frame };
+  return Object.assign(frame, {
+    frame: subFrame,
+    track,
+  });
+}
+
+export interface TabItemRecipeOptions {
+  active?: boolean;
+  pressed?: boolean;
+  compact?: boolean;
+  fit?: boolean;
+}
+
+export interface TabItemRecipeResult extends ViewStyle {
+  container: ViewStyle;
+  text: TextStyle;
+  badge: ViewStyle;
+  badgeText: TextStyle;
+}
+
+/**
+ * Generates standard React Native styles for individual tab buttons and inner badges.
+ */
+export function tabItemRecipe(
+  themeInput?: ThemeInput,
+  activeOrOptions?: boolean | TabItemRecipeOptions,
+  options?: TabItemRecipeOptions,
+): TabItemRecipeResult {
+  const colors = resolveThemeColors(themeInput);
+  const mergedOptions: TabItemRecipeOptions =
+    typeof activeOrOptions === "boolean"
+      ? { active: activeOrOptions, ...options }
+      : (activeOrOptions ?? {});
+
+  const isActive = Boolean(mergedOptions.active);
+  const pressed = Boolean(mergedOptions.pressed);
+  const compact = Boolean(mergedOptions.compact);
+  const fit = mergedOptions.fit ?? true;
+
+  const bg = isActive
+    ? colors.surface2
+    : pressed
+      ? alpha(colors.surface2, 0.5)
+      : "transparent";
+
+  const container: ViewStyle = {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 4,
+    overflow: "hidden",
+    borderRadius: 6,
+    minHeight: compact ? 26 : 30,
+    backgroundColor: bg,
+    paddingHorizontal: compact ? 8 : 12,
+    paddingVertical: compact ? 4 : 6,
+    ...(fit ? { flex: 1, flexShrink: 1, minWidth: 0 } : { flexShrink: 0 }),
+  };
+
+  const text: TextStyle = {
+    color: isActive ? colors.foreground : colors.foregroundMuted,
+    fontSize: compact ? 11 : 12,
+    fontWeight: isActive ? "600" : "500",
+    textAlign: "center",
+  };
+
+  const badge: ViewStyle = {
+    borderRadius: 9999,
+    paddingHorizontal: 5,
+    paddingVertical: 1,
+    minWidth: 16,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: isActive ? colors.accent : alpha(colors.foregroundMuted, 0.2),
+  };
+
+  const badgeText: TextStyle = {
+    fontSize: 10,
+    fontWeight: "700",
+    color: isActive ? colors.accentForeground || FALLBACK_ACCENT_FOREGROUND : colors.foregroundMuted,
+  };
+
+  const subContainer = { ...container };
+  return Object.assign(container, {
+    container: subContainer,
+    text,
+    badge,
+    badgeText,
+  });
+}
+
+// ---------------------------------------------------------------------------
+// 5. BADGE RECIPE
+// ---------------------------------------------------------------------------
+
+export interface BadgeRecipeOptions {
+  variant?: StatusVariant;
+  styleVariant?: BadgeStyle;
+  size?: BadgeSize;
+}
+
+export interface BadgeRecipeResult extends ViewStyle {
+  container: ViewStyle;
+  text: TextStyle;
+  dot: ViewStyle;
+}
+
+/**
+ * Generates standard React Native styles for pill badges, indicators, and labels.
+ */
+export function badgeRecipe(
+  themeInput?: ThemeInput,
+  variantOrOptions?: StatusVariant | BadgeRecipeOptions,
+  options?: BadgeRecipeOptions,
+): BadgeRecipeResult {
+  const colors = resolveThemeColors(themeInput);
+  const mergedOptions: BadgeRecipeOptions =
+    typeof variantOrOptions === "string"
+      ? { variant: variantOrOptions, ...options }
+      : (variantOrOptions ?? {});
+
+  const variant = mergedOptions.variant ?? "neutral";
+  const styleVariant = mergedOptions.styleVariant ?? "tinted";
+  const size = mergedOptions.size ?? "md";
+
+  const palette = getVariantPalette(variant, colors);
+  const solidColor = getStatusColor(variant, colors);
+
+  let bg = palette.bg;
+  let border = palette.border;
+  let textColor = palette.text;
+
+  if (styleVariant === "outline") {
+    bg = "transparent";
+    border = palette.border;
+    textColor = palette.text;
+  } else if (styleVariant === "solid") {
+    bg = solidColor;
+    border = "transparent";
+    textColor = getContrastColor(
+      solidColor,
+      colors.accentForeground || FALLBACK_ACCENT_FOREGROUND,
+      colors.foreground,
+    );
+  }
+
+  const fontSize = size === "sm" ? 10 : 11;
+  const lineHeight = size === "sm" ? 12 : 15;
+  const paddingVertical = size === "sm" ? 1 : 2;
+  const paddingHorizontal = size === "sm" ? 5 : 8;
+
+  const container: ViewStyle = {
+    flexDirection: "row",
+    alignItems: "center",
+    alignSelf: "flex-start",
+    backgroundColor: bg,
+    borderColor: border,
+    borderWidth: 1,
+    borderRadius: 9999,
+    paddingVertical,
+    paddingHorizontal,
+    gap: 4,
+  };
+
+  const text: TextStyle = {
+    color: textColor,
+    fontSize,
+    lineHeight,
+    fontWeight: "600",
+  };
+
+  const dot: ViewStyle = {
+    width: 6,
+    height: 6,
+    borderRadius: 3,
+    backgroundColor: textColor,
+  };
+
+  const subContainer = { ...container };
+  return Object.assign(container, {
+    container: subContainer,
+    text,
+    dot,
+  });
+}