@xpufx/paseo-top 0.4.4 → 0.4.7

package/client/vendor/paseo-plugin-helper/{components/DataTable.tsx → ui/data.tsx}

@@ -1,8 +1,17 @@
 import React, { type ReactNode } from "react";
 import { StyleSheet, Text, View, type StyleProp, type ViewStyle } from "react-native";
-import { usePluginTheme } from "../theme/provider";
+import { useHostTheme, useHostLayout } from "./theme";
+import { spacing } from "./layout";
 
-export interface DataColumn<T> {
+/**
+ * Paseo Plugin Helper — UI data adapters (`paseo-plugin-helper/ui`).
+ *
+ * Thin, host-delegating data adapters
+ * (DataTable). Same contract: host theme colors only, no scroll ownership, no
+ * design-system machinery.
+ */
+
+export interface HostDataColumn<T> {
   key: string;
   header: string;
   flex?: number;
@@ -11,33 +20,33 @@ export interface DataColumn<T> {
   render: (item: T) => ReactNode;
 }
 
-export interface DataTableProps<T> {
+export interface HostDataTableProps<T> {
   data: T[];
-  columns: DataColumn<T>[];
+  columns: HostDataColumn<T>[];
   keyExtractor: (item: T, index: number) => string;
   emptyState?: ReactNode;
   style?: StyleProp<ViewStyle>;
 }
 
 /**
- * Responsive data table that automatically reflows between a traditional table
- * on desktop and structured card list on mobile / compact viewports.
+ * Responsive data table that reflows between a traditional table on wide
+ * surfaces and a structured card list on compact/mobile layouts.
  */
-export function DataTable<T>({
+export function HostDataTable<T>({
   data,
   columns,
   keyExtractor,
   emptyState,
   style,
-}: DataTableProps<T>) {
-  const { colors, resolveRadius, isCompact } = usePluginTheme();
-  const radius = resolveRadius("sm");
+}: HostDataTableProps<T>) {
+  const { colors } = useHostTheme();
+  const layout = useHostLayout();
+  const isCompact = layout.compact || layout.platform === "ios" || layout.platform === "android";
 
   if (!data || data.length === 0) {
     return emptyState ? <View style={style}>{emptyState}</View> : null;
   }
 
-  // Mobile / compact card-list layout
   if (isCompact) {
     return (
       <View style={[styles.compactContainer, style]}>
@@ -49,7 +58,6 @@ export function DataTable<T>({
               {
                 backgroundColor: colors.surface1,
                 borderColor: colors.border,
-                borderRadius: radius,
               },
             ]}
           >
@@ -67,20 +75,17 @@ export function DataTable<T>({
     );
   }
 
-  // Desktop tabular layout
   return (
     <View
       style={[
         styles.table,
         {
           borderColor: colors.border,
-          borderRadius: radius,
           backgroundColor: colors.surface0,
         },
         style,
       ]}
     >
-      {/* Header Row */}
       <View
         style={[
           styles.headerRow,
@@ -100,8 +105,8 @@ export function DataTable<T>({
               col.align === "right"
                 ? styles.alignRight
                 : col.align === "center"
-                ? styles.alignCenter
-                : styles.alignLeft,
+                  ? styles.alignCenter
+                  : styles.alignLeft,
             ]}
           >
             <Text
@@ -115,7 +120,6 @@ export function DataTable<T>({
         ))}
       </View>
 
-      {/* Rows */}
       {data.map((item, idx) => (
         <View
           key={keyExtractor(item, idx)}
@@ -134,8 +138,8 @@ export function DataTable<T>({
                 col.align === "right"
                   ? styles.alignRight
                   : col.align === "center"
-                  ? styles.alignCenter
-                  : styles.alignLeft,
+                    ? styles.alignCenter
+                    : styles.alignLeft,
               ]}
             >
               {col.render(item)}
@@ -148,29 +152,43 @@ export function DataTable<T>({
 }
 
 const styles = StyleSheet.create({
+  compactContainer: {
+    gap: spacing.sm,
+  },
+  compactCard: {
+    borderWidth: 1,
+    borderRadius: 10,
+    padding: spacing.md,
+    gap: spacing.xs,
+  },
+  compactRow: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    gap: spacing.sm,
+  },
+  compactHeader: {
+    fontSize: 11,
+    flexShrink: 1,
+  },
+  compactValue: {
+    flexShrink: 1,
+    minWidth: 0,
+  },
   table: {
     borderWidth: 1,
+    borderRadius: 10,
     overflow: "hidden",
   },
   headerRow: {
     flexDirection: "row",
     borderBottomWidth: 1,
-    paddingVertical: 8,
-    paddingHorizontal: 12,
   },
   row: {
     flexDirection: "row",
-    paddingVertical: 10,
-    paddingHorizontal: 12,
-    alignItems: "center",
   },
   cell: {
-    justifyContent: "center",
-    // Yoga defaults `flexShrink` to 0, so without this a cell whose content
-    // carries a long string (a title, a path) refuses to give up width and
-    // squeezes its sibling columns instead of truncating.
-    flexShrink: 1,
-    maxWidth: "100%",
+    paddingHorizontal: spacing.md,
+    paddingVertical: spacing.sm,
   },
   alignLeft: {
     alignItems: "flex-start",
@@ -184,33 +202,7 @@ const styles = StyleSheet.create({
   headerText: {
     fontSize: 11,
     fontWeight: "600",
+    letterSpacing: 0.3,
     textTransform: "uppercase",
-    letterSpacing: 0.5,
-    flexShrink: 1,
-  },
-  compactContainer: {
-    gap: 8,
-  },
-  compactCard: {
-    borderWidth: 1,
-    padding: 12,
-    gap: 6,
-  },
-  compactRow: {
-    flexDirection: "row",
-    justifyContent: "space-between",
-    alignItems: "center",
-    gap: 8,
-  },
-  compactHeader: {
-    fontSize: 12,
-    flexShrink: 1,
-  },
-  compactValue: {
-    alignItems: "flex-end",
-    // The value side carries the actual data, so it takes the compressible
-    // slot and the fixed label beside it keeps its intrinsic width.
-    flexShrink: 1,
-    maxWidth: "100%",
   },
 });

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

@@ -0,0 +1,44 @@
+/**
+ * Paseo Plugin Helper — UI Kit / Adapters (`paseo-plugin-helper/ui`).
+ *
+ * Thin, composable adapters strictly conforming to upstream native
+ * primitives. Rules for everything in this entry:
+ *
+ * - Scroll ownership stays with the host (`Modal.Content` default
+ *   `scrollable`; explicit host `ScrollView` only where the host supplies
+ *   no scroller). Never force `scrollable={false}` plus a helper-owned
+ *   replacement scroller. No scroll-ownership state machine.
+ * - No artificial width caps: no `maxContentWidth`, no `size="large"` with
+ *   hardcoded `minWidth`. Fill the host-allocated frame fluidly.
+ * - No DOM CSS variable scrapers: colors arrive via the host `theme` prop
+ *   through `HostThemeProvider` — never from `getComputedStyle`.
+ * - Upstream settings primitives come from the host bundle
+ *   (`@getpaseo/plugin/client/ui`), injected by the plugin — never
+ *   re-implemented here.
+ *
+ * This is the only UI the package ships: the legacy bespoke kit was removed
+ * in #938, and the CLI audit flags new `maxContentWidth` / `scrollable={false}`
+ * uses with pointers here.
+ *
+ * Module map:
+ * - `ui/theme.tsx` — `HostThemeProvider` / `useHostTheme` (host colors only)
+ * - `ui/color.ts` — `alpha()` and status color helpers (pure)
+ * - `ui/modal.tsx` — `HostModalContent` / `HostScroll` / `HostModalSection`
+ * - `ui/layout.tsx` — `HostStack` / `HostRow` / `HostGrid` / `HostActionBar` / `HostFormRow`
+ * - `ui/content.tsx` — `HostCard` / `HostTabs` / `HostBadge` / `HostKeyValue` / …
+ * - `ui/controls.tsx` — `HostButton` / `HostToggle` / `HostSelect` / `HostTextInput` / …
+ * - `ui/text.tsx` — `HostCodeBlock` / `HostCommandBox` / `HostTruncatedText` / …
+ * - `ui/data.tsx` — `HostDataTable`
+ * - `ui/settings.ts` — settings screen adapters over the host ui bundle
+ */
+
+export * from "./theme";
+export * from "./color";
+export * from "./modal";
+export * from "./layout";
+export * from "./content";
+export * from "./controls";
+export * from "./text";
+export * from "./data";
+export * from "./settings";
+export { PluginReloadBanner } from "./plugin-reload-banner";

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

@@ -0,0 +1,263 @@
+import React, { type ReactNode } from "react";
+import { StyleSheet, Text, View, type StyleProp, type ViewStyle } from "react-native";
+import { useHostTheme } from "./theme";
+
+/** Static spacing scale (px). The host owns the design language; this is just layout. */
+export const spacing = {
+  xs: 4,
+  sm: 8,
+  md: 12,
+  lg: 16,
+  xl: 24,
+} as const;
+
+export type SpacingValue = keyof typeof spacing | number;
+
+export function resolveSpacing(value: SpacingValue | undefined, fallback: number): number {
+  if (value === undefined) return fallback;
+  if (typeof value === "number") return value;
+  return spacing[value] ?? fallback;
+}
+
+export interface HostRowProps {
+  children: ReactNode;
+  gap?: number;
+  align?: "start" | "center" | "end" | "stretch";
+  justify?: "start" | "center" | "end" | "between";
+  wrap?: boolean;
+  style?: StyleProp<ViewStyle>;
+}
+
+/**
+ * Host-delegating horizontal row for `paseo-plugin-helper/ui`.
+ *
+ * Colors come from `useHostTheme()` (provided by `HostThemeProvider`) — no
+ * theme scraping.
+ */
+export function HostRow({
+  children,
+  gap = 8,
+  align = "center",
+  justify = "start",
+  wrap = false,
+  style,
+}: HostRowProps) {
+  return (
+    <View
+      style={[
+        styles.row,
+        {
+          gap,
+          alignItems: alignMap[align],
+          justifyContent: justifyMap[justify],
+          flexWrap: wrap ? "wrap" : "nowrap",
+        },
+        style,
+      ]}
+    >
+      {children}
+    </View>
+  );
+}
+
+export interface HostStackProps {
+  children: ReactNode;
+  gap?: number;
+  align?: "start" | "center" | "end" | "stretch";
+  justify?: "start" | "center" | "end" | "between";
+  grow?: boolean;
+  style?: StyleProp<ViewStyle>;
+}
+
+/**
+ * Host-delegating vertical stack for `paseo-plugin-helper/ui`.
+ *
+ * Colors come from `useHostTheme()` (provided by `HostThemeProvider`) — no
+ * theme scraping.
+ */
+export function HostStack({
+  children,
+  gap = 8,
+  align = "stretch",
+  justify = "start",
+  grow = false,
+  style,
+}: HostStackProps) {
+  return (
+    <View
+      style={[
+        styles.stack,
+        {
+          gap,
+          alignItems: alignMap[align],
+          justifyContent: justifyMap[justify],
+          ...(grow ? { flex: 1, minHeight: 0 } : null),
+        },
+        style,
+      ]}
+    >
+      {children}
+    </View>
+  );
+}
+
+export interface HostGridProps {
+  children: ReactNode;
+  columns?: number;
+  gap?: number;
+  style?: StyleProp<ViewStyle>;
+}
+
+/**
+ * Host-delegating wrapping grid for `paseo-plugin-helper/ui`.
+ *
+ * Colors come from `useHostTheme()` (provided by `HostThemeProvider`) — no
+ * theme scraping.
+ */
+export function HostGrid({
+  children,
+  columns = 2,
+  gap = 8,
+  style,
+}: HostGridProps) {
+  return (
+    <View style={[styles.grid, { gap }, style]}>
+      {React.Children.map(children, (child) => (
+        <View style={{ flexBasis: `${100 / columns}%`, flexGrow: 0, flexShrink: 1, minWidth: 0 }}>
+          {child}
+        </View>
+      ))}
+    </View>
+  );
+}
+
+export interface HostActionBarProps {
+  children: ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+/**
+ * Host-delegating action bar for `paseo-plugin-helper/ui`.
+ *
+ * Colors come from `useHostTheme()` (provided by `HostThemeProvider`) — no
+ * theme scraping.
+ */
+export function HostActionBar({
+  children,
+  style,
+}: HostActionBarProps) {
+  return (
+    <View style={[styles.actionBar, style]}>
+      {children}
+    </View>
+  );
+}
+
+export interface HostFormRowProps {
+  label: string;
+  description?: string;
+  children: ReactNode;
+  layout?: "stacked" | "inline";
+  style?: StyleProp<ViewStyle>;
+}
+
+/**
+ * Host-delegating form row for `paseo-plugin-helper/ui`.
+ *
+ * Colors come from `useHostTheme()` (provided by `HostThemeProvider`) — no
+ * theme scraping.
+ */
+export function HostFormRow({
+  label,
+  description,
+  children,
+  layout = "stacked",
+  style,
+}: HostFormRowProps) {
+  const { colors } = useHostTheme();
+
+  return (
+    <View
+      style={[
+        styles.formRow,
+        layout === "inline" ? styles.formRowInline : styles.formRowStacked,
+        style,
+      ]}
+    >
+      <View style={styles.formLabel}>
+        <Text style={[styles.formLabelText, { color: colors.foreground }]}>{label}</Text>
+        {description ? (
+          <Text style={[styles.formDescription, { color: colors.foregroundMuted }]}>
+            {description}
+          </Text>
+        ) : null}
+      </View>
+      <View style={styles.formControl}>{children}</View>
+    </View>
+  );
+}
+
+const alignMap = {
+  start: "flex-start",
+  center: "center",
+  end: "flex-end",
+  stretch: "stretch",
+} as const;
+
+const justifyMap = {
+  start: "flex-start",
+  center: "center",
+  end: "flex-end",
+  between: "space-between",
+} as const;
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: "row",
+    width: "100%",
+  },
+  stack: {
+    flexDirection: "column",
+    width: "100%",
+  },
+  grid: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    width: "100%",
+  },
+  actionBar: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "flex-end",
+    gap: 8,
+    width: "100%",
+    flexWrap: "wrap",
+  },
+  formRow: {
+    gap: 4,
+    width: "100%",
+  },
+  formRowStacked: {
+    flexDirection: "column",
+  },
+  formRowInline: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+  },
+  formLabel: {
+    gap: 2,
+    flexShrink: 1,
+  },
+  formLabelText: {
+    fontSize: 13,
+    fontWeight: "600",
+  },
+  formDescription: {
+    fontSize: 11,
+  },
+  formControl: {
+    flexShrink: 1,
+    minWidth: 0,
+  },
+});

package/client/vendor/paseo-plugin-helper/ui/modal.tsx

@@ -0,0 +1,111 @@
+import React, { type ReactNode } from "react";
+import {
+  ScrollView as FallbackScrollView,
+  StyleSheet,
+  View,
+  type ScrollViewProps,
+  type StyleProp,
+  type ViewStyle,
+} from "react-native";
+import {
+  getClientHost,
+  getOptionalClientHost,
+  selectHostScrollView,
+  type HostScrollView,
+} from "../core/host";
+
+/**
+ * Host-delegating modal content for `paseo-plugin-helper/ui`.
+ *
+ * Contract — ONLY for content rendered directly inside your OWN host
+ * `<Modal>` (e.g. x-comms style own-modal surfaces):
+ * - Scroll ownership stays with the host: renders the injected host
+ *   `<Modal.Content>` with its default `scrollable` behavior and adds NO
+ *   helper-owned scroller, so sheet gestures, keyboard avoidance, and
+ *   safe-area clearance keep working on compact/mobile and desktop alike.
+ * - No width opinions: there is deliberately NO `maxContentWidth` /
+ *   `size="large"` prop. The host allocates the dialog frame; this wrapper
+ *   fills it fluidly (`width: "100%"`).
+ * - No theme scraping: colors come from the host `theme` prop via
+ *   `PluginThemeProvider`, never from DOM CSS variables.
+ * - NEVER render this inside `registerComposerPill` `renderModal`: the pill
+ *   host already provides the one `<Modal.Content>` (or no modal at all on
+ *   0.8 popovers), so a nested `<Modal.Content>` violates the host contract
+ *   and crashes the plugin. Use `HostModalSection` there instead.
+ */
+export function HostModalContent({
+  children,
+  style,
+  contentContainerStyle,
+}: {
+  children: ReactNode;
+  style?: StyleProp<ViewStyle>;
+  contentContainerStyle?: StyleProp<ViewStyle>;
+}) {
+  const { Modal } = getClientHost();
+  return (
+    <Modal.Content>
+      <View style={[styles.fluid, style, contentContainerStyle]}>{children}</View>
+    </Modal.Content>
+  );
+}
+
+/**
+ * Explicit single scroll owner for surfaces where the host supplies NO
+ * scroller (sidebar surfaces, settings screens). Prefers the injected host
+ * ScrollView (sheet-gesture integrated on Paseo v0.8) and falls back to plain
+ * React Native ScrollView. Callers own the decision to scroll; this component
+ * never nests itself inside another scroller.
+ */
+export function HostScroll({
+  children,
+  style,
+  contentContainerStyle,
+  ...props
+}: {
+  children: ReactNode;
+  style?: StyleProp<ViewStyle>;
+  contentContainerStyle?: StyleProp<ViewStyle>;
+} & ScrollViewProps) {
+  const ResolvedScrollView = selectHostScrollView(
+    getOptionalClientHost(),
+    FallbackScrollView as unknown as HostScrollView,
+  );
+  return (
+    <ResolvedScrollView
+      {...(props as ScrollViewProps)}
+      style={[styles.fluid, style]}
+      contentContainerStyle={contentContainerStyle}
+    >
+      {children}
+    </ResolvedScrollView>
+  );
+}
+
+const styles = StyleSheet.create({
+  fluid: {
+    width: "100%",
+  },
+});
+
+/**
+ * Fluid inner content for pill-embedded modals (`registerComposerPill`
+ * `renderModal`).
+ *
+ * The pill host already provides the one `<Modal.Content>` (legacy/centered
+ * modal paths) or no modal at all (0.8 popover path, where the host owns the
+ * outer scroll). This renders a plain fluid `<View>` — no `<Modal.Content>`,
+ * no scroller, no width caps — so exactly one `<Modal.Content>` exists and
+ * nothing nests. Pair with `hostScroll: true` on the pill registration so
+ * the wrapper leaves scrolling to the host; without it the wrapper bounds
+ * the dialog (`scrollable={false}`) for legacy `ModalBody` content.
+ */
+export function HostModalSection({
+  children,
+  style,
+}: {
+  children: ReactNode;
+  style?: StyleProp<ViewStyle>;
+}) {
+  return <View style={[styles.fluid, style]}>{children}</View>;
+}