mirror of
https://github.com/getpaseo/paseo.git
synced 2026-11-11 02:46:29 +00:00
refactor(plugin): unify the client UI entrypoint (#7474)
* fix(files): report document MIME types for binary files File reads now carry the document's MIME type for binary files, so a file panel can hand the bytes to a viewer that needs the real type (application/pdf). * feat(plugins): file panels Plugins contribute file panels with addFilePanel. A file tab hosts the panels that claim the file: the built-in Markdown, HTML and image panels, plugin panels, and Source, Paseo's editor, which claims every text file and is always the last candidate. The panel is the tab body; the bar shows the document's status and a switcher between the file's panels (side by side up to three, two on a phone, a menu beyond that). Paseo asks which panel opens a file only when a plugin panel is among several candidates, once per open, and remembers the answer per extension or exact filename when told to. Open with in the tab menu and the switcher change the tab's panel; Always use remembers it. Opening a file at a line switches the tab to Source. Panels read and write the host's document, so dirty state, autosave and conflicts stay Paseo's. DocumentFrame shows bytes documents such as PDFs in the browser's viewer. Replaces the file tab's Preview/Source mode toggle. * feat(file-panels): choose and forget file panels in Settings > Files Settings > Files lists each extension or filename where a plugin panel competes with another candidate, or that has a remembered panel. Each row chooses the panel that opens it, or Ask every time; Ask again forgets the choice. Source appears as a candidate for text files. Panels no connected host offers can be forgotten but not chosen. * docs(plugins): file panel examples and author reference Adds the pdf-panel and markdown-panel examples, the File panels section of the plugin reference, and an e2e spec that installs both examples, opens a PDF in the browser viewer, and edits Markdown through Paseo's document across the switcher, Source, autosave and conflicts. * feat(file-panels): panels read and write through a file handle The file tab stats the file and mounts its panel without reading it. Every panel, built-in or plugin, gets a PluginFile handle: readText, readBytes, url, version-checked writeText/writeBytes (PluginFileConflictError unless force), and watch. useFileText, useFileBytes and useFileUrl read through it, and Loading joins @getpaseo/plugin/client/ui. Panels own their loading state. The host document pipeline, the explorer preview cache and the preview lifecycle are deleted. The daemon classifies a file version from a bounded sniff and writes base64 content as bytes behind fileByteWrites. A deleted file keeps its panel mounted; a read confirms the deletion first, so a remove-and-rewrite is not reported as one. Native Source decodes with builtins and highlights in idle-time slices, the lines around the opening line first, so a large file no longer blocks the JS thread. * fix(file-panels): Settings offers Source where the picker does, and review follow-ups - Settings > Files offers Source on every key except those a built-in panel of another kind (Image) claims, so a plugin that alone claims a text extension shows the same choices as the picker. - Delete the unused isSourceFilePanel. - The Markdown example warns with the file name when its unmount write fails, rather than dropping the edit silently. - Document that PluginFile stat fields are read at render time and that watch or the read hooks are how a panel learns they changed. * refactor(plugin): consolidate the client UI entrypoint
This commit is contained in:
Mohamed Boudra
@@ -15,9 +15,14 @@ const entries = {
|
||||
"./server/acp": "server",
|
||||
"./client": "client",
|
||||
"./client/host": "client",
|
||||
"./client/react-native": "client",
|
||||
"./client/ui": "client",
|
||||
} as const;
|
||||
const manifest = JSON.parse(readFileSync(new URL("../package.json", import.meta.url), "utf8"));
|
||||
// Compatibility entrypoints inherit the boundary of their one re-export target.
|
||||
const compatibilityEntries = Object.keys(manifest.exports).filter((entry) => {
|
||||
const file = path.resolve(sourceDirectory, "..", manifest.exports[entry].source);
|
||||
return readFileSync(file, "utf8").startsWith("// COMPAT(");
|
||||
});
|
||||
const uiDependency = /^(react(?:-dom|-native)?|use-sync-external-store)(\/|$)/;
|
||||
const serverModule = /^server\//;
|
||||
const clientModule = /^client\//;
|
||||
@@ -70,8 +75,17 @@ describe("plugin SDK import boundaries", () => {
|
||||
});
|
||||
|
||||
it("classifies every published entry", () => {
|
||||
const manifest = JSON.parse(readFileSync(new URL("../package.json", import.meta.url), "utf8"));
|
||||
expect(Object.keys(manifest.exports).sort()).toEqual(Object.keys(entries).sort());
|
||||
expect(Object.keys(manifest.exports).sort()).toEqual(
|
||||
[...Object.keys(entries), ...compatibilityEntries].sort(),
|
||||
);
|
||||
});
|
||||
|
||||
it.each(compatibilityEntries)("%s only re-exports the UI entry", (entry) => {
|
||||
const source = readFileSync(
|
||||
path.resolve(sourceDirectory, "..", manifest.exports[entry].source),
|
||||
"utf8",
|
||||
);
|
||||
expect(source.replace(/\/\/[^\n]*|\/\*[^]*?\*\//g, "").trim()).toBe('export * from "./ui.js";');
|
||||
});
|
||||
|
||||
it.each(Object.entries(entries))(
|
||||
|
||||
@@ -1,4 +1,13 @@
|
||||
import { describe, expect, expectTypeOf, it } from "vitest";
|
||||
import type { ComponentProps } from "react";
|
||||
import type {
|
||||
StreamedText,
|
||||
StreamedTextProps,
|
||||
Modal,
|
||||
ModalProps,
|
||||
SettingsSection,
|
||||
SettingsSectionProps,
|
||||
} from "./ui.js";
|
||||
import { z } from "zod";
|
||||
import { defineAttachmentSource, defineRpc, type RpcInput, type RpcOutput } from "../index.js";
|
||||
import { callPluginRpc, searchPluginAttachments } from "./host.js";
|
||||
@@ -107,3 +116,12 @@ describe("plugin attachment sources", () => {
|
||||
).rejects.toBeInstanceOf(z.ZodError);
|
||||
});
|
||||
});
|
||||
|
||||
describe("plugin UI contracts", () => {
|
||||
it("exposes presentation capabilities from the UI entry", () => {
|
||||
expectTypeOf<ComponentProps<typeof StreamedText>>().toEqualTypeOf<StreamedTextProps>();
|
||||
expectTypeOf<ComponentProps<typeof Modal>>().toEqualTypeOf<ModalProps>();
|
||||
expectTypeOf<ComponentProps<typeof SettingsSection>>().toEqualTypeOf<SettingsSectionProps>();
|
||||
expectTypeOf<StreamedTextProps["phase"]>().toEqualTypeOf<"streaming" | "complete">();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,81 +1,3 @@
|
||||
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 "../icons.js";
|
||||
import type { PluginIcon } from "./contracts.js";
|
||||
|
||||
export interface ModalProps {
|
||||
title: string;
|
||||
icon?: ReactNode;
|
||||
open: boolean;
|
||||
onOpenChange(open: boolean): void;
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
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> {
|
||||
Content: ComponentType<ModalContentProps>;
|
||||
}
|
||||
|
||||
export type ToastVariant = "default" | "info" | "success" | "warning" | "error";
|
||||
|
||||
export interface ToastOptions {
|
||||
variant?: ToastVariant;
|
||||
durationMs?: number;
|
||||
}
|
||||
|
||||
export interface ToastApi {
|
||||
show(message: string, options?: ToastOptions): void;
|
||||
error(message: string): void;
|
||||
}
|
||||
|
||||
/** Renders a Lucide icon by `name`, or any plugin icon by `icon`. An unusable icon renders nothing. */
|
||||
export type IconProps = Partial<PluginIconProps> &
|
||||
({ name: string; icon?: never } | { icon: PluginIcon; name?: never });
|
||||
|
||||
export declare const Icon: ComponentType<IconProps>;
|
||||
export declare const Modal: ModalComponent;
|
||||
export declare function useToast(): ToastApi;
|
||||
export declare function useRevealedText(text: string, phase: "streaming" | "complete"): string;
|
||||
|
||||
export type { PluginIconProps } from "../icons.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>
|
||||
>;
|
||||
// COMPAT(pluginReactNativeEntrypoint): added in v0.13.0, remove after 2027-04-20
|
||||
/** @deprecated Import Paseo UI from @getpaseo/plugin/client/ui. */
|
||||
export * from "./ui.js";
|
||||
|
||||
@@ -1,6 +1,91 @@
|
||||
import type { ComponentType, ReactNode, Ref } 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,
|
||||
TextProps,
|
||||
} from "react-native";
|
||||
import type { PluginIconProps } from "../icons.js";
|
||||
import type { PluginIcon } from "./contracts.js";
|
||||
|
||||
export interface ModalProps {
|
||||
title: string;
|
||||
icon?: ReactNode;
|
||||
open: boolean;
|
||||
onOpenChange(open: boolean): void;
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
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> {
|
||||
Content: ComponentType<ModalContentProps>;
|
||||
}
|
||||
|
||||
export type ToastVariant = "default" | "info" | "success" | "warning" | "error";
|
||||
|
||||
export interface ToastOptions {
|
||||
variant?: ToastVariant;
|
||||
durationMs?: number;
|
||||
}
|
||||
|
||||
export interface ToastApi {
|
||||
show(message: string, options?: ToastOptions): void;
|
||||
error(message: string): void;
|
||||
}
|
||||
|
||||
/** Renders a Lucide icon by `name`, or any plugin icon by `icon`. An unusable icon renders nothing. */
|
||||
export type IconProps = Partial<PluginIconProps> &
|
||||
({ name: string; icon?: never } | { icon: PluginIcon; name?: never });
|
||||
|
||||
export declare const Icon: ComponentType<IconProps>;
|
||||
export declare const Modal: ModalComponent;
|
||||
export declare function useToast(): ToastApi;
|
||||
export interface StreamedTextProps extends Omit<TextProps, "children"> {
|
||||
text: string;
|
||||
phase: "streaming" | "complete";
|
||||
}
|
||||
/** Plain assistant text with host-owned streaming pacing and typography. */
|
||||
export declare const StreamedText: ComponentType<StreamedTextProps>;
|
||||
|
||||
export type { PluginIconProps } from "../icons.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>
|
||||
>;
|
||||
|
||||
export interface SettingsSectionProps {
|
||||
title: string;
|
||||
info?: ReactNode;
|
||||
@@ -45,6 +130,8 @@ export interface SettingsActionProps extends SettingsRowProps {
|
||||
onPress(): void;
|
||||
disabled?: boolean;
|
||||
}
|
||||
// COMPAT(pluginSettingsGroup): added in v0.13.0, remove after 2027-04-20
|
||||
/** @deprecated Use SettingsSection for plugin settings headings. */
|
||||
export declare const SettingsGroup: ComponentType<SettingsSectionProps>;
|
||||
export declare const SettingsSection: ComponentType<SettingsSectionProps>;
|
||||
export declare const SettingsCard: ComponentType<{ children: ReactNode; testID?: string }>;
|
||||
|
||||
Reference in New Issue
Block a user