@xpufx/paseo-top 0.4.1 → 0.4.3

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,
+  });
+}

package/client/vendor/paseo-plugin-helper/theme/provider.tsx

@@ -24,7 +24,8 @@ import {
   readHostThemeVariables,
   type HostFontVariables,
 } from "./host-variables";
-import { resolveTypography, type TypographyScale } from "./tokens";
+import { defaultDarkTheme, defaultLightTheme, getDefaultTheme, resolveTypography, type TypographyScale } from "./tokens";
+export { defaultDarkTheme, defaultLightTheme, getDefaultTheme };
 import type { ResponsiveLayout, StatusVariant, ThemeColors } from "../../../../shared/vendor/paseo-plugin-helper/types";
 
 export interface PluginThemeContextValue {
@@ -50,44 +51,7 @@ const defaultLayout: ResponsiveLayout = {
   platform: "web",
 };
 
-export const defaultDarkTheme: PluginTheme = {
-  colors: {
-    surface0: "#18181b",
-    surface1: "#27272a",
-    surface2: "#3f3f46",
-    border: "#3f3f46",
-    foreground: "#fafafa",
-    foregroundMuted: "#a1a1aa",
-    accent: "#3b82f6",
-    accentForeground: "#ffffff",
-    statusSuccess: "#22c55e",
-    statusWarning: "#eab308",
-    statusDanger: "#ef4444",
-  },
-};
-
-export const defaultLightTheme: PluginTheme = {
-  colors: {
-    surface0: "#ffffff",
-    surface1: "#f4f4f5",
-    surface2: "#e4e4e7",
-    border: "#e4e4e7",
-    foreground: "#09090b",
-    foregroundMuted: "#71717a",
-    accent: "#2563eb",
-    accentForeground: "#ffffff",
-    statusSuccess: "#16a34a",
-    statusWarning: "#ca8a04",
-    statusDanger: "#dc2626",
-  },
-};
-
-export function getDefaultTheme(scheme?: string): PluginTheme {
-  if (scheme === "light") {
-    return defaultLightTheme;
-  }
-  return defaultDarkTheme;
-}
+// default themes re-exported from tokens.js
 
 export function useAppearanceScheme(): [string | undefined, (s: string | undefined) => void] {
   const [scheme, setScheme] = useState<string | undefined>(Appearance.getColorScheme?.() ?? undefined);

package/client/vendor/paseo-plugin-helper/theme/tokens.ts

@@ -1,4 +1,4 @@
-import type { PlatformType } from "../../../../shared/vendor/paseo-plugin-helper/types";
+import type { PlatformType, PluginTheme } from "../../../../shared/vendor/paseo-plugin-helper/types";
 import type { DensityStyle } from "./flair";
 import type { ResponsiveLayout } from "../../../../shared/vendor/paseo-plugin-helper/types";
 import { resolveEffectiveCompact } from "./responsive";
@@ -159,3 +159,42 @@ export function elevationForPlatform(
   }
   return style;
 }
+
+export const defaultDarkTheme: PluginTheme = {
+  colors: {
+    surface0: "#18181b",
+    surface1: "#27272a",
+    surface2: "#3f3f46",
+    border: "#3f3f46",
+    foreground: "#fafafa",
+    foregroundMuted: "#a1a1aa",
+    accent: "#3b82f6",
+    accentForeground: "#ffffff",
+    statusSuccess: "#22c55e",
+    statusWarning: "#eab308",
+    statusDanger: "#ef4444",
+  },
+};
+
+export const defaultLightTheme: PluginTheme = {
+  colors: {
+    surface0: "#ffffff",
+    surface1: "#f4f4f5",
+    surface2: "#e4e4e7",
+    border: "#e4e4e7",
+    foreground: "#09090b",
+    foregroundMuted: "#71717a",
+    accent: "#2563eb",
+    accentForeground: "#ffffff",
+    statusSuccess: "#16a34a",
+    statusWarning: "#ca8a04",
+    statusDanger: "#dc2626",
+  },
+};
+
+export function getDefaultTheme(scheme?: string): PluginTheme {
+  if (scheme === "light") {
+    return defaultLightTheme;
+  }
+  return defaultDarkTheme;
+}

package/index.client.tsx

@@ -9,7 +9,7 @@ import {
   TextInput as HostTextInput,
   copyText,
 } from "@getpaseo/plugin/client/react-native";
-import { initClientHelpers } from "paseo-plugin-helper/client";
+import { initClientHelpers } from "./client/vendor/paseo-plugin-helper/index";
 import { contributeClient } from "./client/pill";
 import { TopTimelineTelemetryCard } from "./client/telemetry";
 import { TurnCounterPanel } from "./client/turn-panel";

package/index.server.ts

@@ -1,5 +1,5 @@
 import type { PluginServerContext } from "@getpaseo/plugin/server";
-import { guardRpcHandler } from "paseo-plugin-helper/server";
+import { guardRpcHandler } from "./server/vendor/paseo-plugin-helper/index";
 import {
   getSystemResourcesRpc,
   getCustomPillsRpc,

package/package.json

@@ -2,14 +2,14 @@
   "name": "@xpufx/paseo-top",
   "private": false,
   "license": "MIT",
-  "version": "0.4.1",
+  "version": "0.4.3",
   "scripts": {
     "stamp": "node -e \"import('./server/vendor/paseo-plugin-helper/version.ts').then(m => m.stampVersion({ targetFile: 'shared/version.ts' }))\"",
     "typecheck": "tsc --noEmit",
-    "test": "npm run typecheck && npx tsx --test server/telemetry.test.ts client/pill-labels.test.ts client/turn-counter.test.ts client/telemetry-copy.test.ts"
+    "test": "npm run typecheck && npx tsx --test server/telemetry.test.ts client/pill-labels.test.ts client/turn-counter.test.ts client/telemetry-copy.test.ts client/multi-host.test.ts"
   },
   "devDependencies": {
-    "@getpaseo/plugin": "0.9.0-beta.2",
+    "@getpaseo/plugin": "^0.9.0",
     "@tanstack/react-query": "^5.90.11",
     "@types/react": "^19.0.10",
     "react": "19.1.0",

package/paseo-plugin.json

@@ -1,4 +1,4 @@
 {
   "id": "top",
-  "requirements": { "paseo": ">=0.8.0" }
+  "requirements": { "paseo": ">=0.9.0" }
 }

package/server/resources.ts

@@ -13,7 +13,7 @@ import {
   isPluginRunning,
   CustomPillPoller,
   discoverCustomPillConfigs,
-} from "paseo-plugin-helper/server";
+} from "./vendor/paseo-plugin-helper/index";
 import {
   type SystemResources,
   topSettingsContract,