@xpufx/paseo-helper-demo 0.2.0

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

@@ -0,0 +1,224 @@
+import React, { useState, useCallback } from "react";
+import { StyleSheet, Text, View } from "react-native";
+import type { ComposerPillRegistrar, PluginCleanup } from "./host";
+import { getClientHost } from "./host";
+import { usePluginTheme } from "./theme/provider";
+import { useResponsive } from "./theme/useResponsive";
+import type { VisualFlair } from "./theme/flair";
+import type { CustomPillState } from "../../../shared/vendor/paseo-plugin-helper/custom-pills";
+import { Badge } from "./components/Badge";
+import { Button } from "./components/Button";
+import { Card } from "./components/Card";
+import { CodeBlock } from "./components/CodeBlock";
+import { registerComposerPill } from "./pill";
+
+export interface CustomPillBodyProps {
+  state: CustomPillState;
+}
+
+/**
+ * Standard pill body renderer for a custom metric pill in the composer trackbar.
+ * Automatically adapts to responsive compact/mobile modes and shows threshold status.
+ */
+export function CustomPillBody({ state }: CustomPillBodyProps) {
+  const { Icon } = getClientHost();
+  const { colors } = usePluginTheme();
+  const { isCompact } = useResponsive();
+
+  const title = isCompact && state.compactTitle ? state.compactTitle : state.title;
+  const icon = isCompact && state.compactIcon ? state.compactIcon : state.icon;
+
+  return (
+    <View style={styles.pillContainer}>
+      {icon && <Icon name={icon} size={13} color={colors.foreground} />}
+      {title ? (
+        <Text style={[styles.pillTitle, { color: colors.foreground }]}>{title}</Text>
+      ) : null}
+      <Badge
+        label={state.displayValue}
+        variant={state.status}
+        styleVariant="tinted"
+        style={styles.pillBadge}
+      />
+    </View>
+  );
+}
+
+export interface CustomPillModalContentProps {
+  state: CustomPillState;
+  onRefresh?: () => Promise<void> | void;
+  isRefreshing?: boolean;
+}
+
+/**
+ * Full modal inspection content for a custom metric pill.
+ * Shows status, preformatted command output, last updated time, and quick actions.
+ *
+ * Sized by the host: the root fills the host-allocated modal frame (flex/fluid)
+ * so changing output never drives the dialog size.
+ */
+export function CustomPillModalContent({
+  state,
+  onRefresh,
+  isRefreshing = false,
+}: CustomPillModalContentProps) {
+  const { colors, isCompact } = usePluginTheme();
+
+  const displayText =
+    state.modalOutput || state.rawValue || (state.error ? `Error: ${state.error}` : "No output");
+
+  return (
+    <View style={styles.modalContent}>
+      <Card>
+        <Card.Header
+          title={state.modalTitle ?? state.title}
+          subtitle={state.modalDescription}
+          icon={state.icon}
+          badge={<Badge label={state.displayValue} variant={state.status} />}
+          action={
+            onRefresh ? (
+              <Button
+                variant="secondary"
+                size="sm"
+                icon="RefreshCw"
+                loading={isRefreshing}
+                label={!isCompact ? "Refresh" : undefined}
+                onPress={() => onRefresh()}
+              />
+            ) : undefined
+          }
+        />
+
+        {/* Monospace Code & Output Box with Built-in Copy */}
+        <CodeBlock
+          code={displayText}
+          title={state.modalTitle ?? state.title}
+          maxHeight={280}
+          copyable={true}
+        />
+
+        {/* Footer info */}
+        <View style={styles.footerRow}>
+          <Text style={[styles.timestampText, { color: colors.foregroundMuted }]}>
+            Last updated: {new Date(state.lastUpdated).toLocaleTimeString()}
+          </Text>
+        </View>
+      </Card>
+    </View>
+  );
+}
+
+export interface RegisterCustomPillsOptions {
+  /**
+   * The list of custom pill states or definitions.
+   */
+  pills: CustomPillState[];
+
+  /**
+   * Callback invoked when a pill needs a fresh refresh or modal command run.
+   */
+  onRefreshModal?: (pillId: string) => Promise<{ output?: string; error?: string }>;
+
+  /**
+   * Optional visual flair overrides.
+   */
+  flair?: Partial<VisualFlair>;
+}
+
+/**
+ * Registers one or more declarative custom metric pills into Paseo's composer trackbar.
+ * Automatically handles pill lifecycle, responsive layouts, and drill-down inspection modals.
+ */
+export function registerCustomPills(
+  client: ComposerPillRegistrar,
+  options: RegisterCustomPillsOptions,
+): PluginCleanup {
+  const cleanups: PluginCleanup[] = [];
+
+  for (const pill of options.pills) {
+    const cleanup = registerComposerPill(client, {
+      id: pill.id,
+      title: pill.title,
+      compactTitle: pill.compactTitle,
+      icon: pill.icon,
+      compactIcon: pill.compactIcon,
+      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>(
+          pill.modalOutput,
+        );
+
+        const handleRefresh = useCallback(async () => {
+          if (!options.onRefreshModal) return;
+          setRefreshing(true);
+          try {
+            const res = await options.onRefreshModal(pill.id);
+            if (res.output) {
+              setCurrentOutput(res.output);
+            }
+          } finally {
+            setRefreshing(false);
+          }
+        }, [pill.id]);
+
+        const activeState: CustomPillState = {
+          ...pill,
+          modalOutput: currentOutput ?? pill.modalOutput,
+        };
+
+        return (
+          <CustomPillModalContent
+            state={activeState}
+            onRefresh={options.onRefreshModal ? handleRefresh : undefined}
+            isRefreshing={refreshing}
+          />
+        );
+      },
+    });
+
+    cleanups.push(cleanup);
+  }
+
+  return () => {
+    for (const dispose of cleanups) {
+      dispose();
+    }
+  };
+}
+
+const styles = StyleSheet.create({
+  modalContent: {
+    flex: 1,
+    minHeight: 0,
+    width: "100%",
+    padding: 12,
+  },
+  pillContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
+    paddingHorizontal: 8,
+    paddingVertical: 3,
+  },
+  pillTitle: {
+    fontSize: 12,
+    fontWeight: "500",
+  },
+  pillBadge: {
+    paddingVertical: 1,
+    paddingHorizontal: 5,
+  },
+  footerRow: {
+    flexDirection: "row",
+    justifyContent: "flex-end",
+    alignItems: "center",
+    marginTop: 8,
+  },
+  timestampText: {
+    fontSize: 11,
+  },
+});

package/client/vendor/paseo-plugin-helper/forge-icon.tsx

@@ -0,0 +1,79 @@
+import React from "react";
+import { Image, Platform, type ImageStyle, type StyleProp } from "react-native";
+import { Icon } from "./icon";
+import { usePluginTheme } from "./theme/provider";
+import {
+  resolveForgeMark,
+  type ForgeKind,
+  type ForgeMarkInput,
+} from "../../../shared/vendor/paseo-plugin-helper/forge";
+
+/**
+ * Official monochrome forge marks (Simple Icons, CC0 / project trademarks),
+ * authored on a 24x24 viewBox. Rendered as inline SVG through a data URI so
+ * the helper needs no SVG dependency: exact vector marks on web/Electron,
+ * where Paseo renders React Native Web.
+ */
+const FORGE_MARK_PATHS: Partial<Record<ForgeKind, string>> = {
+  codeberg:
+    "M11.999.747A11.974 11.974 0 0 0 0 12.75c0 2.254.635 4.465 1.833 6.376L11.837 6.19c.072-.092.251-.092.323 0l4.178 5.402h-2.992l.065.239h3.113l.882 1.138h-3.674l.103.374h3.86l.777 1.003h-4.358l.135.483h4.593l.695.894h-5.038l.165.589h5.326l.609.785h-5.717l.182.65h6.038l.562.727h-6.397l.183.65h6.717A12.003 12.003 0 0 0 24 12.75 11.977 11.977 0 0 0 11.999.747zm3.654 19.104.182.65h5.326c.173-.204.353-.433.513-.65zm.385 1.377.18.65h3.563c.233-.198.485-.428.712-.65zm.383 1.377.182.648h1.203c.356-.204.685-.412 1.042-.648zz",
+  forgejo:
+    "M16.7773 0c1.6018 0 2.9004 1.2986 2.9004 2.9005s-1.2986 2.9004-2.9004 2.9004c-1.0854 0-2.0315-.596-2.5288-1.4787H12.91c-2.3322 0-4.2272 1.8718-4.2649 4.195l-.0007 2.1175a7.0759 7.0759 0 0 1 4.148-1.4205l.1176-.001 1.3385.0002c.4973-.8827 1.4434-1.4788 2.5288-1.4788 1.6018 0 2.9004 1.2986 2.9004 2.9005s-1.2986 2.9004-2.9004 2.9004c-1.0854 0-2.0315-.596-2.5288-1.4787H12.91c-2.3322 0-4.2272 1.8718-4.2649 4.195l-.0007 2.319c.8827.4973 1.4788 1.4434 1.4788 2.5287 0 1.602-1.2986 2.9005-2.9005 2.9005-1.6018 0-2.9004-1.2986-2.9004-2.9005 0-1.0853.596-2.0314 1.4788-2.5287l-.0002-9.9831c0-3.887 3.1195-7.0453 6.9915-7.108l.1176-.001h1.3385C14.7458.5962 15.692 0 16.7773 0ZM7.2227 19.9052c-.6596 0-1.1943.5347-1.1943 1.1943s.5347 1.1943 1.1943 1.1943 1.1944-.5347 1.1944-1.1943-.5348-1.1943-1.1944-1.1943Zm9.5546-10.4644c-.6596 0-1.1944.5347-1.1944 1.1943s.5348 1.1943 1.1944 1.1943c.6596 0 1.1943-.5347 1.1943-1.1943s-.5347-1.1943-1.1943-1.1943Zm0-7.7346c-.6596 0-1.1944.5347-1.1944 1.1943s.5348 1.1943 1.1944 1.1943c.6596 0 1.1943-.5347 1.1943-1.1943s-.5347-1.1943-1.1943-1.1943Z",
+  gitea:
+    "M4.209 4.603c-.247 0-.525.02-.84.088-.333.07-1.28.283-2.054 1.027C-.403 7.25.035 9.685.089 10.052c.065.446.263 1.687 1.21 2.768 1.749 2.141 5.513 2.092 5.513 2.092s.462 1.103 1.168 2.119c.955 1.263 1.936 2.248 2.89 2.367 2.406 0 7.212-.004 7.212-.004s.458.004 1.08-.394c.535-.324 1.013-.893 1.013-.893s.492-.527 1.18-1.73c.21-.37.385-.729.538-1.068 0 0 2.107-4.471 2.107-8.823-.042-1.318-.367-1.55-.443-1.627-.156-.156-.366-.153-.366-.153s-4.475.252-6.792.306c-.508.011-1.012.023-1.512.027v4.474l-.634-.301c0-1.39-.004-4.17-.004-4.17-1.107.016-3.405-.084-3.405-.084s-5.399-.27-5.987-.324c-.187-.011-.401-.032-.648-.032zm.354 1.832h.111s.271 2.269.6 3.597C5.549 11.147 6.22 13 6.22 13s-.996-.119-1.641-.348c-.99-.324-1.409-.714-1.409-.714s-.73-.511-1.096-1.52C1.444 8.73 2.021 7.7 2.021 7.7s.32-.859 1.47-1.145c.395-.106.863-.12 1.072-.12zm8.33 2.554c.26.003.509.127.509.127l.868.422-.529 1.075a.686.686 0 0 0-.614.359.685.685 0 0 0 .072.756l-.939 1.924a.69.69 0 0 0-.66.527.687.687 0 0 0 .347.763.686.686 0 0 0 .867-.206.688.688 0 0 0-.069-.882l.916-1.874a.667.667 0 0 0 .237-.02.657.657 0 0 0 .271-.137 8.826 8.826 0 0 1 1.016.512.761.761 0 0 1 .286.282c.073.21-.073.569-.073.569-.087.29-.702 1.55-.702 1.55a.692.692 0 0 0-.676.477.681.681 0 1 0 1.157-.252c.073-.141.141-.282.214-.431.19-.397.515-1.16.515-1.16.035-.066.218-.394.103-.814-.095-.435-.48-.638-.48-.638-.467-.301-1.116-.58-1.116-.58s0-.156-.042-.27a.688.688 0 0 0-.148-.241l.516-1.062 2.89 1.401s.48.218.583.619c.073.282-.019.534-.069.657-.24.587-2.1 4.317-2.1 4.317s-.232.554-.748.588a1.065 1.065 0 0 1-.393-.045l-.202-.08-4.31-2.1s-.417-.218-.49-.596c-.083-.31.104-.691.104-.691l2.073-4.272s.183-.37.466-.497a.855.855 0 0 1 .35-.077z",
+};
+
+/** Inline SVG data URI for a custom mark, tinted with the resolved color. */
+export function forgeMarkSource(kind: ForgeKind, color: string): { uri: string } | null {
+  const path = FORGE_MARK_PATHS[kind];
+  if (!path) return null;
+  const svg =
+    `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">` +
+    `<path fill="${color}" d="${path}"/></svg>`;
+  return { uri: `data:image/svg+xml,${encodeURIComponent(svg)}` };
+}
+
+export interface ForgeIconProps extends ForgeMarkInput {
+  /** Icon box in points; defaults to 16 to match the host Lucide default. */
+  size?: number;
+  /** Mark color; defaults to the active theme foreground. */
+  color?: string;
+  style?: StyleProp<ImageStyle>;
+  /** Overrides the default forge-name accessibility label. */
+  accessibilityLabel?: string;
+}
+
+/**
+ * Shared forge brand mark. Resolves a host/kind to one mark and renders it:
+ * GitHub/GitLab/unknown delegate to the host Lucide set, while Codeberg,
+ * Forgejo and Gitea draw their official mono marks inline. On native, where
+ * Paseo plugin bundles cannot render SVG, custom marks fall back to their
+ * closest Lucide glyph so forges stay distinct.
+ */
+export function ForgeIcon({
+  host,
+  kind,
+  size = 16,
+  color,
+  style,
+  accessibilityLabel,
+}: ForgeIconProps) {
+  const { colors } = usePluginTheme();
+  const markColor = color ?? colors.foreground;
+  const mark = resolveForgeMark({ host, kind });
+  const source = mark.custom && Platform.OS === "web" ? forgeMarkSource(mark.kind, markColor) : null;
+
+  if (!source) {
+    return <Icon name={mark.lucideName} size={size} color={markColor} />;
+  }
+
+  return (
+    <Image
+      accessibilityLabel={accessibilityLabel ?? mark.label}
+      accessibilityRole="image"
+      accessible
+      source={source}
+      style={[{ width: size, height: size }, style]}
+    />
+  );
+}

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

@@ -0,0 +1,277 @@
+import type {
+  ComponentType,
+  ForwardRefExoticComponent,
+  ReactElement,
+  ReactNode,
+  Ref,
+  RefAttributes,
+} from "react";
+import type {
+  FlatList as RNFlatList,
+  FlatListProps,
+  ScrollView as RNScrollView,
+  ScrollViewProps,
+  TextInput as RNTextInput,
+  TextInputProps,
+} from "react-native";
+
+/**
+ * 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.
+ *
+ * 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.
+ */
+
+export interface HostThemeColors {
+  surface0: string;
+  surface1: string;
+  surface2: string;
+  border: string;
+  foreground: string;
+  foregroundMuted: string;
+  accent: string;
+  accentForeground: string;
+  statusSuccess: string;
+  statusWarning: string;
+  statusDanger: string;
+}
+
+export interface HostTheme {
+  colors: HostThemeColors;
+}
+
+export interface HostLayout {
+  compact: boolean;
+  platform: "ios" | "android" | "web";
+  width?: number;
+  height?: number;
+}
+
+export interface HostIconProps {
+  name: string;
+  size?: number;
+  color?: string;
+}
+
+export type HostIcon = ComponentType<HostIconProps>;
+
+export interface HostModalContentProps {
+  children: ReactNode;
+  scrollable?: boolean;
+}
+
+export interface HostModalProps {
+  title: string;
+  icon?: ReactNode;
+  open: boolean;
+  onOpenChange(open: boolean): void;
+  children: ReactNode;
+}
+
+export type HostModal = ComponentType<HostModalProps> & {
+  Content: ComponentType<HostModalContentProps>;
+};
+
+export interface HostToast {
+  show?: (message: string, options?: any) => void;
+  copied?: (label?: string) => void;
+  error?: (message: string) => void;
+}
+
+export type HostUseToast = () => HostToast;
+
+export interface HostRpcContract {
+  name: string;
+}
+
+// Takes `any` contract deliberately: both SDK generations type their own
+// contract shapes, and structural acceptance in both directions only holds
+// for `any`. Call sites in useRpcQuery/usePluginSettings keep full typing
+// through their own generics.
+export type HostUseRpc = (contract: any) => (input: any) => Promise<any>;
+
+export interface HostAgentRef {
+  id: string;
+  workspaceId?: string | null;
+}
+
+export type HostAgentUpdate =
+  | { kind: "remove"; agentId: string }
+  | { kind: string; agent: HostAgentRef };
+
+export interface HostAgentsApi {
+  subscribe(cb: (update: HostAgentUpdate) => void): () => void;
+  list(): Promise<{ entries: Array<{ agent: HostAgentRef }> }>;
+}
+
+export type PluginCleanup = () => void;
+
+export type HostCopyText = (text: string) => Promise<void>;
+
+export type HostScrollView = ForwardRefExoticComponent<
+  ScrollViewProps & RefAttributes<RNScrollView>
+>;
+
+export type HostFlatList = <ItemT>(
+  props: FlatListProps<ItemT> & { ref?: Ref<RNFlatList<ItemT>> },
+) => ReactElement;
+
+export type HostTextInput = ForwardRefExoticComponent<
+  TextInputProps & RefAttributes<RNTextInput>
+>;
+
+export interface ClientHostDeps {
+  Icon: HostIcon;
+  Modal: HostModal;
+  useRpc: HostUseRpc;
+  useToast: HostUseToast;
+  copyText?: HostCopyText;
+  ScrollView?: HostScrollView;
+  FlatList?: HostFlatList;
+  TextInput?: HostTextInput;
+}
+
+let deps: ClientHostDeps | undefined;
+
+export function initClientHelpers(host: ClientHostDeps): void {
+  deps = host;
+}
+
+export function getClientHost(): ClientHostDeps {
+  if (!deps) {
+    throw new Error(
+      "paseo-plugin-helper/client used before initClientHelpers(). " +
+        "Call initClientHelpers({ Icon, Modal, useRpc, useToast }) in the plugin client entry.",
+    );
+  }
+  return deps;
+}
+
+export function getOptionalClientHost(): ClientHostDeps | undefined {
+  return deps;
+}
+
+/**
+ * Single precedence rule for scrollable surfaces: the host-injected
+ * ScrollView (sheet-aware on Paseo v0.8, cooperates with bottom-sheet
+ * gestures) wins whenever the plugin supplied one to initClientHelpers;
+ * otherwise plain React Native ScrollView (pre-0.8 fallback, where the
+ * caller avoids nesting inside host scrollers itself).
+ */
+export function selectHostScrollView(
+  host: Pick<ClientHostDeps, "ScrollView"> | undefined,
+  fallback: HostScrollView,
+): HostScrollView {
+  return host?.ScrollView ?? fallback;
+}
+
+export interface HostPillProps {
+  agentId: string;
+  workspaceId: string;
+  theme: HostTheme;
+  layout: HostLayout;
+  host: {
+    id: string;
+    label: string;
+  };
+}
+
+export interface HostWorkspacePanelProps {
+  context: "workspace";
+  workspaceId: string;
+  theme: HostTheme;
+  layout: HostLayout;
+  host: {
+    id: string;
+    label: string;
+  };
+}
+
+export interface HostAgentPanelProps {
+  context: "agent";
+  workspaceId: string;
+  agentId: string;
+  theme: HostTheme;
+  layout: HostLayout;
+  host: {
+    id: string;
+    label: string;
+  };
+}
+
+export interface HostSurfaceProps {
+  theme: HostTheme;
+  layout: HostLayout;
+  host: {
+    id: string;
+    label: string;
+  };
+}
+
+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;
+  paseo: {
+    agents: HostAgentsApi;
+  };
+}
+
+export function isClientHostInitialized(): boolean {
+  return deps !== undefined;
+}

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

@@ -0,0 +1,39 @@
+import React from "react";
+import { getClientHost, type HostIconProps } from "./host";
+
+let knownIconNames: Set<string> | undefined;
+const warnedIconNames = new Set<string>();
+
+/**
+ * Optionally registers the set of valid icon names (e.g. Lucide names
+ * supported by the host). When set, Icon warns once per unknown name
+ * instead of rendering nothing silently.
+ */
+export function setKnownIconNames(names: Iterable<string>): void {
+  knownIconNames = new Set(names);
+}
+
+export function clearKnownIconNames(): void {
+  knownIconNames = undefined;
+  warnedIconNames.clear();
+}
+
+export function reportUnknownIcon(name: string): void {
+  const key = name.trim();
+  if (warnedIconNames.has(key)) return;
+  warnedIconNames.add(key);
+  console.warn(
+    `[paseo-plugin-helper Icon] unknown icon name "${name}" — renders nothing; check the Lucide name`,
+  );
+}
+
+export function Icon(props: HostIconProps) {
+  const rawName = typeof props.name === "string" ? props.name : "";
+  if (!rawName.trim()) {
+    reportUnknownIcon(String(props.name));
+  } else if (knownIconNames && !knownIconNames.has(rawName.trim())) {
+    reportUnknownIcon(rawName);
+  }
+  const { Icon: HostIconComponent } = getClientHost();
+  return <HostIconComponent {...props} />;
+}

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

@@ -0,0 +1,28 @@
+export * from "./theme/index";
+export * from "./components/index";
+export * from "./layout/index";
+export * from "./pill";
+export * from "./surface";
+export * from "./command-center";
+export * from "./panel";
+export * from "./query";
+export * from "./query-refresh";
+export * from "./snapshot";
+export * from "./settings";
+export * from "./shared-settings";
+export * from "./settings-screen";
+export * from "./utils/clipboard";
+export * from "./utils/haptics";
+export * from "./custom-pills";
+export * from "./host";
+export { Icon } from "./icon";
+export { ForgeIcon, forgeMarkSource, type ForgeIconProps } from "./forge-icon";
+export {
+  forgeKindFromHost,
+  isForgeKind,
+  normalizeForgeHost,
+  resolveForgeMark,
+  type ForgeKind,
+  type ForgeMarkInput,
+  type ResolvedForgeMark,
+} from "../../../shared/vendor/paseo-plugin-helper/forge";

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

@@ -0,0 +1,49 @@
+import React, { type ReactNode } from "react";
+import { StyleSheet, View, type StyleProp, type ViewStyle } from "react-native";
+import { usePluginTheme } from "../theme/provider";
+
+export interface ActionBarProps {
+  children: ReactNode;
+  align?: "flex-start" | "flex-end" | "center" | "space-between";
+  direction?: "row" | "column" | "auto";
+  style?: StyleProp<ViewStyle>;
+}
+
+/**
+ * Responsive action toolbar for modals and surfaces.
+ * Automatically wraps or stacks on compact/mobile layouts.
+ */
+export function ActionBar({
+  children,
+  align = "flex-end",
+  direction = "auto",
+  style,
+}: ActionBarProps) {
+  const { isCompact, padding } = usePluginTheme();
+
+  const isColumn = direction === "column" || (direction === "auto" && isCompact);
+
+  return (
+    <View
+      style={[
+        styles.container,
+        {
+          flexDirection: isColumn ? "column" : "row",
+          justifyContent: isColumn ? "flex-start" : align,
+          alignItems: isColumn ? "stretch" : "center",
+          gap: isCompact ? 8 : 10,
+          marginTop: padding.vertical,
+        },
+        style,
+      ]}
+    >
+      {children}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexWrap: "wrap",
+  },
+});