@xpufx/paseo-x-comms 0.3.0

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

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

@@ -0,0 +1,103 @@
+import React, { type ReactNode } from "react";
+import { StyleSheet, Text, View, type StyleProp, type ViewStyle } from "react-native";
+import { usePluginTheme } from "../theme/provider";
+
+export interface FormRowProps {
+  label: string;
+  description?: string;
+  children: ReactNode;
+  /**
+   * "stacked" (default) keeps the historical label/description above the
+   * control. "inline" puts the label + description in a left column and the
+   * control on the right of the SAME line, which is what a short control
+   * (Toggle, StatusDot, Badge, small Button) wants. Stacking a one-line
+   * control under its label doubles a settings row's height for no gain
+   * (xpufx-org/paseo#213).
+   */
+  layout?: "stacked" | "inline";
+  style?: StyleProp<ViewStyle>;
+}
+
+export function FormRow({
+  label,
+  description,
+  children,
+  layout = "stacked",
+  style,
+}: FormRowProps) {
+  const { colors, flair, typography } = usePluginTheme();
+
+  const labelBlock = (
+    <View style={styles.labelBlock}>
+      <Text
+        style={[
+          styles.label,
+          {
+            color: colors.foreground,
+            ...typography.label,
+            textTransform: flair.headingTransform === "uppercase" ? "uppercase" : "none",
+          },
+        ]}
+      >
+        {label}
+      </Text>
+      {description && (
+        <Text
+          style={[
+            styles.description,
+            { color: colors.foregroundMuted, ...typography.caption },
+          ]}
+        >
+          {description}
+        </Text>
+      )}
+    </View>
+  );
+
+  if (layout === "inline") {
+    return (
+      <View style={[styles.container, styles.inlineContainer, style]}>
+        {labelBlock}
+        <View style={styles.inlineContent}>{children}</View>
+      </View>
+    );
+  }
+
+  return (
+    <View style={[styles.container, style]}>
+      {labelBlock}
+      <View style={styles.content}>{children}</View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    gap: 4,
+    width: "100%",
+  },
+  inlineContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: 8,
+  },
+  labelBlock: {
+    gap: 2,
+    flexShrink: 1,
+    minWidth: 0,
+  },
+  inlineContent: {
+    flexShrink: 0,
+    alignItems: "flex-end",
+  },
+  label: {
+    fontWeight: "600",
+  },
+  description: {
+    lineHeight: 16,
+  },
+  content: {
+    marginTop: 2,
+  },
+});

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

@@ -0,0 +1,65 @@
+import React, { type ReactNode } from "react";
+import { StyleSheet, View, type StyleProp, type ViewStyle } from "react-native";
+import { usePluginTheme } from "../theme/provider";
+import { resolveSpacing, type SpacingValue } from "../theme/tokens";
+import { resolveGridColumns } from "../theme/responsive";
+
+export interface GridProps {
+  children?: ReactNode;
+  /** Maximum column count. Default: 2. */
+  columns?: number;
+  /**
+   * Minimum width a column should keep. When set and the container width is
+   * known, the grid uses as many columns as fit (up to `columns`) and wraps
+   * down instead of collapsing to one.
+   */
+  minColumnWidth?: number;
+  /** Gap between cells: a spacing token or raw px. Defaults to the theme gap. */
+  gap?: SpacingValue;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+/**
+ * Width-aware wrapping grid. Cells keep a percentage basis driven by the
+ * effective column count, so they reflow across rows rather than stacking
+ * one-per-line or collapsing to a single column.
+ */
+export function Grid({ children, columns = 2, minColumnWidth, gap, style, testID }: GridProps) {
+  const { padding, isCompact, layout } = usePluginTheme();
+  const resolvedGap = resolveSpacing(gap, padding.gap);
+  const effectiveColumns = resolveGridColumns({
+    columns,
+    minColumnWidth,
+    gap: resolvedGap,
+    width: layout.width,
+    isCompact,
+  });
+
+  const cells = React.Children.toArray(children).filter(Boolean);
+
+  return (
+    <View testID={testID} style={[styles.container, { gap: resolvedGap }, style]}>
+      {cells.map((child, index) => (
+        <View
+          key={index}
+          style={[styles.cell, { flexBasis: `${Math.floor(100 / effectiveColumns) - 2}%` }]}
+        >
+          {child}
+        </View>
+      ))}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    width: "100%",
+  },
+  cell: {
+    flexGrow: 1,
+    flexShrink: 1,
+  },
+});