Let plugins control modal layout, scrolling and clipboard actions (#4392)

* feat(plugins): support modal body layout, scrolling and clipboard actions

* fix(app): keep native scroll dependencies out of web imports

* fix(nix): sync dependency hash for plugin native types

* test(plugins): express modal QA as user journeys
This commit is contained in:
Mohamed Boudra
2026-09-06 13:48:29 +02:00
committed by GitHub
parent c99b8ad5f4
commit 38c22139bb
33 changed files with 822 additions and 123 deletions
+40 -1
View File
@@ -1,4 +1,22 @@
import type { ComponentType, FunctionComponent, ReactNode } from "react";
import type {
ComponentType,
FunctionComponent,
ReactNode,
ForwardRefExoticComponent,
RefAttributes,
ReactElement,
Ref,
} from "react";
import type {
StyleProp,
ViewStyle,
ScrollView as NativeScrollView,
ScrollViewProps,
FlatList as NativeFlatList,
FlatListProps,
TextInput as NativeTextInput,
TextInputProps,
} from "react-native";
import type { PluginIconProps } from "./contracts.js";
export interface ModalProps {
@@ -11,6 +29,12 @@ export interface ModalProps {
export interface ModalContentProps {
children: ReactNode;
/** Paint the full body below the header. */
style?: StyleProp<ViewStyle>;
/** Overrides the default 24px padding and 16px gap. Safe-area clearance stays host-owned. */
contentContainerStyle?: StyleProp<ViewStyle>;
/** Default true. Set false for a bounded body with your own ScrollView or FlatList. */
scrollable?: boolean;
}
export interface ModalComponent extends FunctionComponent<ModalProps> {
@@ -35,3 +59,18 @@ export declare function useToast(): ToastApi;
export declare function useRevealedText(text: string, phase: "streaming" | "complete"): string;
export type { PluginIconProps } from "./contracts.js";
/** React Native scrolling with the host's sheet gestures when rendered inside a sheet. */
export declare const ScrollView: ForwardRefExoticComponent<
ScrollViewProps & RefAttributes<NativeScrollView>
>;
export declare function FlatList<Item>(
props: FlatListProps<Item> & { ref?: Ref<NativeFlatList<Item>> },
): ReactElement;
/** Copies text to this client's clipboard. Rejects when copying is unavailable or denied. */
export declare function copyText(text: string): Promise<void>;
/** Native input focus integrated with modal keyboard positioning. */
export declare const TextInput: ForwardRefExoticComponent<
TextInputProps & RefAttributes<NativeTextInput>
>;