chore: sync website translation parent

packages/plugin/src/client/buttons.ts

@@ -1,14 +1,17 @@
 import type { PluginText } from "../text.js";
 import type { ComponentType } from "react";
-import type { PluginHostProps } from "./contracts.js";
+import type { PluginIconProps } from "../icons.js";
+import type { PluginHostProps, PluginIcon } from "./contracts.js";
 
 export type PluginButtonContext =
   | { context: "workspace"; workspaceId: string }
   | { context: "agent"; workspaceId: string; agentId: string };
-export type PluginButtonIconProps = PluginHostProps &
-  PluginButtonContext & { size: number; color: string };
+
+export type PluginButtonIconProps = PluginHostProps & PluginButtonContext & PluginIconProps;
+
 export type PluginButtonContentProps = PluginHostProps & PluginButtonContext & { close(): void };
-export type PluginButtonIcon = string | ComponentType<PluginButtonIconProps>;
+
+export type PluginButtonIcon = PluginIcon<PluginButtonIconProps>;
 
 export type PluginButtonBehavior<Text extends PluginText = string> =
   | { kind: "action"; onPress(): void | Promise<void> }

packages/plugin/src/client/contracts.ts

@@ -18,6 +18,7 @@ import type {
   PluginTimelineTransformResult,
   PluginCleanup,
 } from "../contracts.js";
+import type { PluginIconProps, PluginSerializableIcon } from "../icons.js";
 
 export interface PluginHostProps {
   theme: PluginTheme;
@@ -88,11 +89,13 @@ export interface PluginSidebarItemContribution<Text extends PluginText = string>
   Component: ComponentType<PluginSidebarItemProps>;
 }
 
-export interface PluginIconProps {
-  name: string;
-  size?: number;
-  color?: string;
-}
+/**
+ * A Lucide icon name, inline SVG markup, or a component. Components receive the surface's size
+ * and color; buttons widen the props with their host and target context.
+ */
+export type PluginIcon<Props extends PluginIconProps = PluginIconProps> =
+  | PluginSerializableIcon
+  | ComponentType<Props>;
 
 export type PluginPanelLocation = "workspace" | "explorer";
 
@@ -103,7 +106,7 @@ export interface PluginOpenPanelOptions {
 interface PluginWorkspacePanelBase<Text extends PluginText = string> {
   id: string;
   title: Text;
-  icon: string;
+  icon: PluginIcon;
   locations?: readonly PluginPanelLocation[];
 }
 
@@ -176,7 +179,7 @@ export type PluginWorkspacePanelContribution<Text extends PluginText = string> =
 export interface PluginSettingsScreenContribution<Text extends PluginText = string> {
   id: string;
   title: Text;
-  icon: string;
+  icon: PluginIcon;
   Component: ComponentType<PluginSurfaceProps>;
 }
 
@@ -200,7 +203,7 @@ export interface PluginSurfaceContribution {
 export interface PluginSidebarContribution<Text extends PluginText = string> {
   id: string;
   title: Text;
-  icon: string;
+  icon: PluginIcon;
   surface: string;
 }
 
@@ -269,7 +272,7 @@ export interface PluginAgentCommandContext extends PluginCommandCapabilities {
 interface PluginCommandCenterItemBase<Text extends PluginText = string> {
   id: string;
   title: Text;
-  icon: string;
+  icon: PluginIcon;
   keywords?: readonly string[];
 }
 

packages/plugin/src/client/index.ts

@@ -8,7 +8,7 @@ export type {
   PluginScreenLocation,
   PluginSidebarItemProps,
   PluginSidebarItemContribution,
-  PluginIconProps,
+  PluginIcon,
   PluginPanelLocation,
   PluginOpenPanelOptions,
   PluginWorkspacePanelProps,
@@ -45,6 +45,7 @@ export type {
   PluginComposerPillContribution,
   PluginHeaderButtonContribution,
 } from "./buttons.js";
+export type { PluginIconProps, PluginSerializableIcon, PluginSvgIcon } from "../icons.js";
 export { usePaseo } from "./paseo-context.js";
 export { useAgent, useWorkspace } from "./client-state.js";
 export { useRpc } from "./rpc-context.js";

packages/plugin/src/client/react-native.ts

@@ -17,7 +17,8 @@ import type {
   TextInput as NativeTextInput,
   TextInputProps,
 } from "react-native";
-import type { PluginIconProps } from "./contracts.js";
+import type { PluginIconProps } from "../icons.js";
+import type { PluginIcon } from "./contracts.js";
 
 export interface ModalProps {
   title: string;
@@ -53,12 +54,16 @@ export interface ToastApi {
   error(message: string): void;
 }
 
-export declare const Icon: ComponentType<PluginIconProps>;
+/** 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 "./contracts.js";
+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<

packages/plugin/src/client/ui.ts

@@ -1,4 +1,5 @@
 import type { ComponentType, ReactNode, Ref } from "react";
+import type { PluginIcon } from "./contracts.js";
 
 export interface SettingsSectionProps {
   title: string;
@@ -64,14 +65,14 @@ export interface ExternalLinkProps {
 }
 export declare const ExternalLink: ComponentType<ExternalLinkProps>;
 
-export type SidebarIcon = string | ComponentType<{ size: number; color: string }>;
+export type SidebarIcon = PluginIcon;
 export interface SidebarRowProps {
   /**
    * Tells rows of one item apart when the item renders several: "bot-2". Unique within the item.
    * Omit it when the item renders one row.
    */
   id?: string;
-  /** A Lucide icon name or a component. */
+  /** A Lucide icon name, inline SVG, or a component. */
   icon?: SidebarIcon;
   /** Defaults to the item's registered title. */
   label?: string;