gpui-bridge-react 0.2.0 → 0.4.0

package/dist/src/components.d.ts

@@ -1,5 +1,5 @@
 import type { ReactNode, Ref } from "react";
-import type { A11y, ButtonProps as WireButtonProps, DiffSelection, ImageProps as WireImageProps, Menu, MenuItem, NodeProps, NodeType, Option, RadioGroupProps as WireRadioGroupProps, TableCell, TableColumn, TableSort, TabsProps as WireTabsProps, UINode, WindowControl, WindowEventPayload } from "gpui-bridge";
+import type { A11y, ButtonProps as WireButtonProps, DiffSelection, ImageProps as WireImageProps, Menu, MenuItem, NodeProps, NodeType, Option, QuestionnaireAnswer, RadioGroupProps as WireRadioGroupProps, SettingsChange, TableCell, TableColumn, TableSort, TabsProps as WireTabsProps, UINode, WindowControl, WindowEventPayload } from "gpui-bridge";
 /** A `ref` gets the node (`ref.current.focus()`). */
 type HostComponent<P> = (props: P & {
     ref?: Ref<UINode<NodeType>>;
@@ -22,6 +22,25 @@ export interface DivProps extends SharedProps {
     tooltip?: string;
     /** Files dropped on the div. */
     onDrop?: (paths: string[]) => void;
+    /** With the `absolute` class: the user moves it inside its parent; `dragEnd` gives where it was left (PROTOCOL.md section 8). */
+    drag?: boolean;
+    /** Snaps a `drag` div to its parent's edges and its `drag` siblings within this many px (`true` = 8). */
+    magnetic?: boolean | number;
+    /** The user can carry the div to a `dropTarget`, which gets this string in `dropNode`. */
+    dragData?: string;
+    /** Takes divs with `dragData`; its `drag-over:` classes apply while one is carried over it. */
+    dropTarget?: boolean;
+    /** Where the user left a `drag` div. */
+    onDragEnd?: (point: {
+        x: number;
+        y: number;
+    }) => void;
+    /** A `dragData` div left on this `dropTarget`. */
+    onDropNode?: (drop: {
+        data: string;
+        x: number;
+        y: number;
+    }) => void;
     /** Makes the div focusable; called with keys such as `escape` or `ctrl-enter`. */
     onKeyDown?: (key: string) => void;
     children?: ReactNode;
@@ -287,6 +306,7 @@ export type CollapsibleProps = NodeProps["Collapsible"] & {
 export declare const Collapsible: HostComponent<CollapsibleProps>;
 export type AccordionProps = NodeProps["Accordion"] & {
     onChange?: (id: string) => void;
+    children?: ReactNode;
 };
 export declare const Accordion: HostComponent<AccordionProps>;
 export type AvatarProps = NodeProps["Avatar"];
@@ -318,7 +338,9 @@ export type GroupBoxProps = NodeProps["GroupBox"] & {
 export declare const GroupBox: HostComponent<GroupBoxProps>;
 export type DescriptionListProps = NodeProps["DescriptionList"];
 export declare const DescriptionList: HostComponent<DescriptionListProps>;
-export type StatusBarProps = NodeProps["StatusBar"];
+export type StatusBarProps = NodeProps["StatusBar"] & {
+    children?: ReactNode;
+};
 export declare const StatusBar: HostComponent<StatusBarProps>;
 export type ToolbarProps = NodeProps["Toolbar"] & {
     children?: ReactNode;
@@ -357,4 +379,192 @@ export declare const Sidebar: HostComponent<SidebarProps>;
 /** A line, bar or pie chart of the points in `data`; it has no events of its own. */
 export type ChartProps = NodeProps["Chart"];
 export declare const Chart: HostComponent<ChartProps>;
+/** Paints the drawing commands in `commands`; `onPointerDown` gets the local point. */
+export type CanvasProps = NodeProps["Canvas"] & {
+    onPointerDown?: (point: {
+        x: number;
+        y: number;
+    }) => void;
+};
+export declare const Canvas: HostComponent<CanvasProps>;
+/** A command palette over the sections in `items`; `onConfirm` gets the chosen entry's `id`. */
+export type CommandProps = NodeProps["Command"] & {
+    onConfirm?: (id: string) => void;
+};
+export declare const Command: HostComponent<CommandProps>;
+/** Settings pages of typed fields; `onChange` gets `{key, value}` of the field the user set. */
+export type SettingsProps = NodeProps["Settings"] & {
+    onChange?: (change: SettingsChange) => void;
+};
+export declare const Settings: HostComponent<SettingsProps>;
+/** A button that stays pressed; `onChange` gets the new `checked`. */
+export type ToggleProps = NodeProps["Toggle"] & {
+    onChange?: (checked: boolean) => void;
+};
+export declare const Toggle: HostComponent<ToggleProps>;
+/** An action with a menu: `onClick` is the left half, `onMenu` gets the chosen item's id. */
+export type DropdownButtonProps = NodeProps["DropdownButton"] & {
+    onClick?: () => void;
+    onMenu?: (item: string) => void;
+};
+export declare const DropdownButton: HostComponent<DropdownButtonProps>;
+export type LabelProps = NodeProps["Label"];
+export declare const Label: HostComponent<LabelProps>;
+/** A centered empty state; its children are the action under the header. */
+export type EmptyProps = NodeProps["Empty"] & {
+    children?: ReactNode;
+};
+export declare const Empty: HostComponent<EmptyProps>;
+export type ShimmerProps = NodeProps["Shimmer"];
+export declare const Shimmer: HostComponent<ShimmerProps>;
+/** A framed text field; `onChange` and `onSubmit` work as in an `Input`. */
+export type InputGroupProps = NodeProps["InputGroup"] & {
+    onChange?: (value: string) => void;
+    onSubmit?: (value: string) => void;
+};
+export declare const InputGroup: HostComponent<InputGroupProps>;
+/** Copies `value` on click; `onCopied` gets the text that was copied. */
+export type ClipboardProps = NodeProps["Clipboard"] & {
+    onCopied?: (value: string) => void;
+};
+export declare const Clipboard: HostComponent<ClipboardProps>;
+/** A confirmation; `onOk` and `onCancel` close it, as in a `Dialog`. */
+export type AlertDialogProps = NodeProps["AlertDialog"] & {
+    onOk?: () => void;
+    onCancel?: () => void;
+    children?: ReactNode;
+};
+export declare const AlertDialog: HostComponent<AlertDialogProps>;
+/** A panel that slides in from `side`; `onClose` is its X, Escape or a click on the overlay. */
+export type SheetProps = NodeProps["Sheet"] & {
+    onClose?: () => void;
+    children?: ReactNode;
+};
+export declare const Sheet: HostComponent<SheetProps>;
+/**
+ * A panel anchored to its first child (the trigger); the rest are the panel. `onChange` gets the
+ * new `open`: the host keeps it, as it keeps a `Checkbox`'s `checked`.
+ */
+export type PopoverProps = NodeProps["Popover"] & {
+    onChange?: (checked: boolean) => void;
+    children?: ReactNode;
+};
+export declare const Popover: HostComponent<PopoverProps>;
+/** A card on hover, opened by the mouse alone; `onChange` gets the new `open`. */
+export type HoverCardProps = NodeProps["HoverCard"] & {
+    onChange?: (checked: boolean) => void;
+    children?: ReactNode;
+};
+export declare const HoverCard: HostComponent<HoverCardProps>;
+/** A day picker; `onChange` gets the chosen day, `null` when cleared. */
+export type DatePickerProps = NodeProps["DatePicker"] & {
+    onChange?: (value: string | null) => void;
+};
+export declare const DatePicker: HostComponent<DatePickerProps>;
+/** A time typed by segments; `onChange` gets the time (`HH:MM[:SS]`). */
+export type TimeFieldProps = NodeProps["TimeField"] & {
+    onChange?: (value: string) => void;
+};
+export declare const TimeField: HostComponent<TimeFieldProps>;
+/** A color swatch and hex box; `onChange` gets the color, `null` when cleared. */
+export type ColorPickerProps = NodeProps["ColorPicker"] & {
+    onChange?: (value: string | null) => void;
+};
+export declare const ColorPicker: HostComponent<ColorPickerProps>;
+/** A list that picks several options; `onChange` gets the whole selection. */
+export type ComboboxProps = NodeProps["Combobox"] & {
+    onChange?: (value: string[]) => void;
+};
+export declare const Combobox: HostComponent<ComboboxProps>;
+/** A chat bubble; its children are the content. */
+export type BubbleProps = NodeProps["Bubble"] & {
+    children?: ReactNode;
+};
+export declare const Bubble: HostComponent<BubbleProps>;
+/** A message row: a `MessageHeader` and a `MessageFooter` child, the rest is the content. */
+export type MessageProps = NodeProps["Message"] & {
+    children?: ReactNode;
+};
+export declare const Message: HostComponent<MessageProps>;
+export type MessageHeaderProps = NodeProps["MessageHeader"] & {
+    children?: ReactNode;
+};
+export declare const MessageHeader: HostComponent<MessageHeaderProps>;
+export type MessageFooterProps = NodeProps["MessageFooter"] & {
+    children?: ReactNode;
+};
+export declare const MessageFooter: HostComponent<MessageFooterProps>;
+/** A compact status row; children go after the text. */
+export type MarkerProps = NodeProps["Marker"] & {
+    children?: ReactNode;
+};
+export declare const Marker: HostComponent<MarkerProps>;
+/** A file or picture card; each handler shows its control (`onRetry` only while `failed`). */
+export type AttachmentProps = NodeProps["Attachment"] & {
+    onClick?: () => void;
+    onRemove?: () => void;
+    onRetry?: () => void;
+    children?: ReactNode;
+};
+export declare const Attachment: HostComponent<AttachmentProps>;
+/** A virtual list of messages anchored at the end; each child is a row. */
+export type MessageScrollerProps = NodeProps["MessageScroller"] & {
+    children?: ReactNode;
+};
+export declare const MessageScroller: HostComponent<MessageScrollerProps>;
+/** Questions one at a time; `onChange` gets one answer, `onSubmit` all of them. */
+export type QuestionnaireProps = NodeProps["Questionnaire"] & {
+    onChange?: (answer: QuestionnaireAnswer) => void;
+    onSubmit?: (answers: QuestionnaireAnswer[]) => void;
+};
+export declare const Questionnaire: HostComponent<QuestionnaireProps>;
+/**
+ * A selectable list over its `ListItem` children. Passing `value` makes the selection controlled.
+ * `onQuery` gets the search text (render the matching rows); `onLoadMore` asks for more rows.
+ */
+export type ListProps = NodeProps["List"] & {
+    value?: string | null;
+    onChange?: (value: string | null) => void;
+    onConfirm?: (value: string) => void;
+    onQuery?: (query: string) => void;
+    onLoadMore?: () => void;
+    children?: ReactNode;
+};
+export declare const List: HostComponent<ListProps>;
+/** A `List` row: `value` is what the list reports; its children are the content. */
+export type ListItemProps = NodeProps["ListItem"] & {
+    children?: ReactNode;
+};
+export declare const ListItem: HostComponent<ListItemProps>;
+/** Panels the user rearranges: its `DockPanel` children. The host owns the layout. */
+export type DockProps = NodeProps["Dock"] & {
+    children?: ReactNode;
+};
+export declare const Dock: HostComponent<DockProps>;
+/** A `Dock` panel; `onClose` means the user closed it: stop rendering it. */
+export type DockPanelProps = NodeProps["DockPanel"] & {
+    onClose?: () => void;
+    children?: ReactNode;
+};
+export declare const DockPanel: HostComponent<DockPanelProps>;
+/** An `Accordion` section: `id` is what `onChange` reports; its children are the content. */
+export type AccordionItemProps = NodeProps["AccordionItem"] & {
+    children?: ReactNode;
+};
+export declare const AccordionItem: HostComponent<AccordionItemProps>;
+/** A `Dialog`'s or `AlertDialog`'s footer: its children (buttons) replace OK/Cancel. */
+export type DialogFooterProps = NodeProps["DialogFooter"] & {
+    children?: ReactNode;
+};
+export declare const DialogFooter: HostComponent<DialogFooterProps>;
+/** A `StatusBar`'s left side: its children replace the `left` text. */
+export type StatusBarLeftProps = NodeProps["StatusBarLeft"] & {
+    children?: ReactNode;
+};
+export declare const StatusBarLeft: HostComponent<StatusBarLeftProps>;
+/** A `StatusBar`'s right side: its children replace the `right` text. */
+export type StatusBarRightProps = NodeProps["StatusBarRight"] & {
+    children?: ReactNode;
+};
+export declare const StatusBarRight: HostComponent<StatusBarRightProps>;
 export {};

package/dist/src/components.js

@@ -58,3 +58,37 @@ export const Diff = "Diff";
 export const Carousel = "Carousel";
 export const Sidebar = "Sidebar";
 export const Chart = "Chart";
+export const Canvas = "Canvas";
+export const Command = "Command";
+export const Settings = "Settings";
+export const Toggle = "Toggle";
+export const DropdownButton = "DropdownButton";
+export const Label = "Label";
+export const Empty = "Empty";
+export const Shimmer = "Shimmer";
+export const InputGroup = "InputGroup";
+export const Clipboard = "Clipboard";
+export const AlertDialog = "AlertDialog";
+export const Sheet = "Sheet";
+export const Popover = "Popover";
+export const HoverCard = "HoverCard";
+export const DatePicker = "DatePicker";
+export const TimeField = "TimeField";
+export const ColorPicker = "ColorPicker";
+export const Combobox = "Combobox";
+export const Bubble = "Bubble";
+export const Message = "Message";
+export const MessageHeader = "MessageHeader";
+export const MessageFooter = "MessageFooter";
+export const Marker = "Marker";
+export const Attachment = "Attachment";
+export const MessageScroller = "MessageScroller";
+export const Questionnaire = "Questionnaire";
+export const List = "List";
+export const ListItem = "ListItem";
+export const Dock = "Dock";
+export const DockPanel = "DockPanel";
+export const AccordionItem = "AccordionItem";
+export const DialogFooter = "DialogFooter";
+export const StatusBarLeft = "StatusBarLeft";
+export const StatusBarRight = "StatusBarRight";

package/dist/src/host-config.js

@@ -114,12 +114,21 @@ const EVENT_PROPS = {
     onMenu: "menu",
     onKeyDown: "keyDown",
     onDrop: "drop",
+    onDragEnd: "dragEnd",
+    onDropNode: "dropNode",
     onOk: "ok",
     onCancel: "cancel",
     onClose: "close",
     onSort: "sort",
     onExpand: "expand",
     onCollapse: "collapse",
+    onPointerDown: "pointerDown",
+    onConfirm: "confirm",
+    onCopied: "copied",
+    onRemove: "remove",
+    onRetry: "retry",
+    onQuery: "query",
+    onLoadMore: "loadMore",
 };
 function isTextChildren(children) {
     const items = Array.isArray(children) ? children : [children];
@@ -156,14 +165,16 @@ function split(type, props) {
         wire.controlled = props.value !== undefined;
     if (type === "Pagination")
         wire.controlled = props.page !== undefined;
-    if (type === "NumberInput" || type === "OtpInput")
+    if (type === "NumberInput" || type === "OtpInput" || type === "InputGroup")
         wire.controlled = props.value !== undefined;
     if (type === "Table")
         wire.controlled = props.selected !== undefined;
-    if (type === "Tree" || type === "Carousel" || type === "Sidebar")
+    if (type === "Tree" || type === "Carousel" || type === "Sidebar" || type === "List")
         wire.controlled = props.value !== undefined;
-    if (type === "Checkbox" || type === "Switch")
+    if (type === "Checkbox" || type === "Switch" || type === "Toggle")
         wire.controlled = props.checked !== undefined;
+    if (type === "DatePicker" || type === "TimeField" || type === "ColorPicker" || type === "Combobox")
+        wire.controlled = props.value !== undefined;
     return { wire, handlers };
 }
 /** Host event payloads become plain handler arguments. */
@@ -173,7 +184,7 @@ function subscribe(instance, event) {
         const handler = instance.handlers.get(event);
         if (!handler)
             return;
-        if (event === "click" || event === "ok" || event === "cancel" || event === "close")
+        if (event === "click" || event === "ok" || event === "cancel" || event === "close" || event === "loadMore")
             handler();
         // A Table's double click carries the row.
         else if (event === "doubleClick")
@@ -186,7 +197,9 @@ function subscribe(instance, event) {
             handler(payload.key);
         else if (event === "drop")
             handler(payload.paths);
-        else if (instance.type === "Checkbox" || instance.type === "Switch")
+        else if (instance.type === "Checkbox" || instance.type === "Switch" || instance.type === "Toggle")
+            handler(payload.checked);
+        else if (instance.type === "Popover" || instance.type === "HoverCard")
             handler(payload.checked);
         else
             handler(payload.value);
@@ -286,6 +299,74 @@ function createNode(app, type, wire) {
             return app.sidebar(wire);
         case "Chart":
             return app.chart(wire);
+        case "Canvas":
+            return app.canvas(wire);
+        case "Command":
+            return app.command(wire);
+        case "Settings":
+            return app.settings(wire);
+        case "Toggle":
+            return app.toggle(wire);
+        case "DropdownButton":
+            return app.dropdownButton(wire);
+        case "Label":
+            return app.label(wire);
+        case "Empty":
+            return app.empty(wire);
+        case "Shimmer":
+            return app.shimmer(wire);
+        case "InputGroup":
+            return app.inputGroup(wire);
+        case "Clipboard":
+            return app.clipboard(wire);
+        case "AlertDialog":
+            return app.alertDialog(wire);
+        case "Sheet":
+            return app.sheet(wire);
+        case "Popover":
+            return app.popover(wire);
+        case "HoverCard":
+            return app.hoverCard(wire);
+        case "DatePicker":
+            return app.datePicker(wire);
+        case "TimeField":
+            return app.timeField(wire);
+        case "ColorPicker":
+            return app.colorPicker(wire);
+        case "Combobox":
+            return app.combobox(wire);
+        case "Bubble":
+            return app.bubble(wire);
+        case "Message":
+            return app.message(wire);
+        case "MessageHeader":
+            return app.messageHeader(wire);
+        case "MessageFooter":
+            return app.messageFooter(wire);
+        case "Marker":
+            return app.marker(wire);
+        case "Attachment":
+            return app.attachment(wire);
+        case "MessageScroller":
+            return app.messageScroller(wire);
+        case "Questionnaire":
+            return app.questionnaire(wire);
+        case "List":
+            return app.list(wire);
+        case "ListItem":
+            return app.listItem(wire);
+        case "Dock":
+            return app.dock(wire);
+        case "DockPanel":
+            return app.dockPanel(wire);
+        case "AccordionItem":
+            return app.accordionItem(wire);
+        case "DialogFooter":
+            return app.dialogFooter(wire);
+        case "StatusBarLeft":
+            return app.statusBarLeft(wire);
+        case "StatusBarRight":
+            return app.statusBarRight(wire);
         default:
             throw new Error(`gpui-bridge-react: unknown element type '${type}'`);
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gpui-bridge-react",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "description": "React renderer for gpui-bridge native UIs",
   "license": "MIT",
   "author": "gpui-bridge contributors",
@@ -29,14 +29,14 @@
     "node": ">=22.6"
   },
   "peerDependencies": {
-    "gpui-bridge": "^0.2.0",
+    "gpui-bridge": "^0.4.0",
     "react": "^19.3.0"
   },
   "dependencies": {
     "react-reconciler": "0.34.0"
   },
   "devDependencies": {
-    "gpui-bridge": "0.2.0",
+    "gpui-bridge": "0.4.0",
     "@types/node": "^26.6.5",
     "@types/react": "19.3.0",
     "@types/react-reconciler": "^0.34.0",