gpui-bridge-react 0.0.0-stage → 0.3.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 gpui-bridge contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,42 @@
-# Temporary Holding Version
+# gpui-bridge-react
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+A React renderer for [gpui-bridge](https://www.npmjs.com/package/gpui-bridge): native desktop
+windows, drawn by GPUI and gpui-kit, declared as React components.
+
+```tsx
+import { useState } from "react";
+import { Button, Div, Text, render } from "gpui-bridge-react";
+
+function Counter() {
+  const [count, setCount] = useState(0);
+  return (
+    <Div class="flex flex-col items-center gap-4 p-6 size-full">
+      <Text class="text-xl font-bold">{String(count)}</Text>
+      <Button variant="primary" onClick={() => setCount(count + 1)}>Add</Button>
+    </Div>
+  );
+}
+
+await render(<Counter />, { window: { title: "Counter", width: 320, height: 200 } });
+```
+
+## Install
+
+```sh
+npm install gpui-bridge-react gpui-bridge react
+```
+
+`gpui-bridge` and `react` are **peer dependencies**: this package has no native binary of its
+own. The host (`gpui-bridge-host`) arrives with `gpui-bridge`, which pulls in the platform
+package for the machine installing it (Windows x64, macOS arm64 or Linux x64 today).
+
+Host lookup is the one from `gpui-bridge`: `createApp` options, `$GPUI_BRIDGE_HOST`, the asset of
+the platform package, then a Cargo build in a checkout. `render` accepts the same host options.
+
+## Links
+
+- [gpui-bridge](https://www.npmjs.com/package/gpui-bridge), the underlying client.
+- [React examples](https://github.com/InDIOS/gpui-bridge/tree/main/examples/react).
+- [Source and issues](https://github.com/InDIOS/gpui-bridge).
+
+Protocol version 1. MIT licensed.

package/dist/src/components.d.ts

@@ -0,0 +1,551 @@
+import type { ReactNode, Ref } from "react";
+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>>;
+}) => ReactNode;
+/** Props every node accepts (PROTOCOL.md section 16). */
+export interface SharedProps {
+    /** Accessibility: a node without it is not reported to assistive technology. */
+    a11y?: A11y;
+}
+export interface DivProps extends SharedProps {
+    class?: string;
+    /** Makes the div a title bar part handled by the system: drag area or minimize/maximize/close button. */
+    windowControl?: WindowControl;
+    /** Opens on right-click; choosing an item calls `onMenu` with its `id`. */
+    contextMenu?: MenuItem[];
+    onClick?: () => void;
+    onDoubleClick?: () => void;
+    onMenu?: (item: string) => void;
+    /** Shown when the pointer rests on the div. */
+    tooltip?: string;
+    /** Files dropped on the div. */
+    onDrop?: (paths: string[]) => void;
+    /** Makes the div focusable; called with keys such as `escape` or `ctrl-enter`. */
+    onKeyDown?: (key: string) => void;
+    children?: ReactNode;
+}
+export interface TextProps extends SharedProps {
+    class?: string;
+    /** Text content: strings and numbers. */
+    children?: ReactNode;
+}
+export interface ButtonProps extends SharedProps {
+    /** Alternatively, pass the label as text children. */
+    label?: string;
+    variant?: WireButtonProps["variant"];
+    disabled?: boolean;
+    tooltip?: string;
+    class?: string;
+    onClick?: () => void;
+    children?: ReactNode;
+}
+export interface InputProps extends SharedProps {
+    /** Passing `value` makes the input controlled (the host waits for React to confirm edits). */
+    value?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    class?: string;
+    onChange?: (value: string) => void;
+    onSubmit?: (value: string) => void;
+    onKeyDown?: (key: string) => void;
+}
+export interface CheckboxProps extends SharedProps {
+    /** Passing `checked` makes the checkbox controlled (the host waits for React to confirm clicks). */
+    checked?: boolean;
+    label?: string;
+    disabled?: boolean;
+    class?: string;
+    onChange?: (checked: boolean) => void;
+}
+export interface IconProps extends SharedProps {
+    /** A bundled icon, by its Lucide name (`folder`, `file-text`…). */
+    name: string;
+    class?: string;
+}
+export interface ImageProps extends SharedProps {
+    /** A local image file; a relative path is resolved against the host's working directory. */
+    src?: string;
+    /** The image bytes as standard base64 (no `data:` prefix), for images the client downloads
+     * itself. While non-empty it wins over `src`. */
+    data?: string;
+    fit?: WireImageProps["fit"];
+    class?: string;
+}
+export interface SwitchProps extends SharedProps {
+    /** Passing `checked` makes the switch controlled (the host waits for React to confirm clicks). */
+    checked?: boolean;
+    label?: string;
+    disabled?: boolean;
+    class?: string;
+    onChange?: (checked: boolean) => void;
+}
+export interface RadioGroupProps extends SharedProps {
+    options: Option[];
+    /** Passing `value` makes the group controlled (the host waits for React to confirm choices). */
+    value?: string;
+    direction?: WireRadioGroupProps["direction"];
+    disabled?: boolean;
+    class?: string;
+    onChange?: (value: string) => void;
+}
+export interface SelectProps extends SharedProps {
+    options: Option[];
+    /** Passing `value` makes the select controlled (the host waits for React to confirm choices). */
+    value?: string;
+    placeholder?: string;
+    searchable?: boolean;
+    disabled?: boolean;
+    class?: string;
+    onChange?: (value: string) => void;
+}
+export interface SliderProps extends SharedProps {
+    /** Passing `value` makes the slider controlled (the host waits for React to confirm drags). */
+    value?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    disabled?: boolean;
+    class?: string;
+    onChange?: (value: number) => void;
+}
+export interface TextareaProps extends SharedProps {
+    /** The host keeps the text; a `value` that differs from it replaces it. */
+    value?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    class?: string;
+    onChange?: (value: string) => void;
+}
+export interface MenuBarProps extends SharedProps {
+    menus: Menu[];
+    class?: string;
+    /** Called with the chosen item's `id`. */
+    onMenu?: (item: string) => void;
+}
+export interface TrayProps {
+    /** An image file (PNG, ICO…). */
+    icon?: string;
+    tooltip?: string;
+    /** Opens on right-click; a native menu, so item icons are not drawn. */
+    menu?: MenuItem[];
+    onClick?: () => void;
+    /** Called with the chosen item's `id`. */
+    onMenu?: (item: string) => void;
+}
+export interface DialogProps extends SharedProps {
+    /** Shown while true. The host closes it when the user answers: set your state in onOk/onCancel. */
+    open: boolean;
+    title?: string;
+    okText?: string;
+    /** Adds a cancel button. */
+    cancelText?: string;
+    width?: number;
+    /** Classes of the body that holds the children. */
+    class?: string;
+    onOk?: () => void;
+    /** Cancel button, Escape, the X or a click outside. */
+    onCancel?: () => void;
+    children?: ReactNode;
+}
+export interface VirtualListProps extends SharedProps {
+    /** Every row's height in pixels; default 32. */
+    rowHeight?: number;
+    /** Give the list a height (`flex-1`, `h-64`...): it fills its container. */
+    class?: string;
+    /** One child per row; only the rows in view are drawn. */
+    children?: ReactNode;
+}
+export interface TableProps extends SharedProps {
+    columns: TableColumn[];
+    /** One object per row. Keep it in state: a new array sends every row again. */
+    rows: Record<string, TableCell>[];
+    /** Passing `selected` makes the selection controlled (the host waits for React to confirm it). */
+    selected?: number | null;
+    stripe?: boolean;
+    bordered?: boolean;
+    class?: string;
+    /** A row index; `null` when Escape clears the selection. */
+    onChange?: (row: number | null) => void;
+    onDoubleClick?: (row: number) => void;
+    /** Sort `rows` yourself and render them again. */
+    onSort?: (sort: TableSort) => void;
+}
+export interface TabsProps extends SharedProps {
+    /** Ignored when the `Tabs` has `Tab` children. */
+    tabs?: Option[];
+    /** Passing `value` makes the tabs controlled (the host waits for React to confirm choices). */
+    value?: string;
+    variant?: WireTabsProps["variant"];
+    class?: string;
+    onChange?: (value: string) => void;
+    /** One `Tab` per child. */
+    children?: ReactNode;
+}
+export interface TabProps extends SharedProps {
+    /** What `change` reports for this tab. Required: the host rejects a `Tab` without it. */
+    value?: string;
+    /** The tab's text, drawn before its children. A chip of nodes names itself with `a11y.label`. */
+    label?: string;
+    disabled?: boolean;
+    /** Nodes inside the chip, e.g. an `Icon`, a `Text` and a `Tag`; a last `Button` is drawn after them. */
+    children?: ReactNode;
+    /** Styles the chip itself: `flex-1` makes the tabs share the bar's width. */
+    class?: string;
+}
+export interface WindowProps {
+    title?: string;
+    width?: number;
+    height?: number;
+    /** Initial position; only read when the window opens. */
+    x?: number;
+    y?: number;
+    /** Minimum size the user can resize to; only read when the window opens. */
+    minWidth?: number;
+    minHeight?: number;
+    /** Minimizes (`true`) or restores (`false`) on the next commit. */
+    minimized?: boolean;
+    /** No system title bar; only read when the window opens. */
+    frameless?: boolean;
+    /** Classes of the window's root div (default `size-full`). */
+    class?: string;
+    /** The user closed the window. Unmount the `Window` (or React keeps an element for a window that is gone). */
+    onClose?: () => void;
+    /** The window gained the system focus. */
+    onFocus?: (event: WindowEventPayload) => void;
+    /** The window lost the system focus. */
+    onBlur?: (event: WindowEventPayload) => void;
+    /** The user resized the window: the payload has `x`, `y`, `width`, `height`. */
+    onResize?: (bounds: WindowEventPayload) => void;
+    /** The user moved the window: the payload has `x`, `y`, `width`, `height`. */
+    onMove?: (bounds: WindowEventPayload) => void;
+    /** The window is being presented or not (`visible`); minimizing reports it too. */
+    onVisibility?: (event: WindowEventPayload) => void;
+    children?: ReactNode;
+}
+export declare const Div: HostComponent<DivProps>;
+export declare const Text: HostComponent<TextProps>;
+export declare const Button: HostComponent<ButtonProps>;
+export declare const Input: HostComponent<InputProps>;
+export declare const Checkbox: HostComponent<CheckboxProps>;
+export declare const Icon: HostComponent<IconProps>;
+export declare const Image: HostComponent<ImageProps>;
+export declare const MenuBar: HostComponent<MenuBarProps>;
+export declare const Switch: HostComponent<SwitchProps>;
+export declare const RadioGroup: HostComponent<RadioGroupProps>;
+export declare const Select: HostComponent<SelectProps>;
+export declare const Slider: HostComponent<SliderProps>;
+export declare const Textarea: HostComponent<TextareaProps>;
+/** A modal dialog; its children are its body. */
+export declare const Dialog: HostComponent<DialogProps>;
+/** A list that draws only the rows in view; each child is a row of `rowHeight`. */
+export declare const VirtualList: HostComponent<VirtualListProps>;
+/** A data table with text cells; it draws only the rows in view. */
+export declare const Table: HostComponent<TableProps>;
+/** A tab bar; render the chosen tab's content yourself. */
+export declare const Tabs: HostComponent<TabsProps>;
+/** One tab of a `Tabs`: its children are the nodes of its chip. */
+export declare const Tab: HostComponent<TabProps>;
+/**
+ * Shows the system tray icon while mounted (one per app). While it is shown, closing the
+ * last window does not end the app; unmounting it then does.
+ */
+export declare const Tray: HostComponent<TrayProps>;
+/** Opens another window while mounted; its children render there. Closes when unmounted. */
+export declare const Window: HostComponent<WindowProps>;
+export type AlertProps = NodeProps["Alert"] & {
+    onClose?: () => void;
+    children?: ReactNode;
+};
+export declare const Alert: HostComponent<AlertProps>;
+export type BadgeProps = NodeProps["Badge"] & {
+    children?: ReactNode;
+};
+export declare const Badge: HostComponent<BadgeProps>;
+export type TagProps = NodeProps["Tag"];
+export declare const Tag: HostComponent<TagProps>;
+export type KbdProps = NodeProps["Kbd"];
+export declare const Kbd: HostComponent<KbdProps>;
+export type ProgressProps = NodeProps["Progress"];
+export declare const Progress: HostComponent<ProgressProps>;
+export type SpinnerProps = NodeProps["Spinner"];
+export declare const Spinner: HostComponent<SpinnerProps>;
+export type SkeletonProps = NodeProps["Skeleton"];
+export declare const Skeleton: HostComponent<SkeletonProps>;
+export type RatingProps = NodeProps["Rating"] & {
+    onChange?: (value: number) => void;
+};
+export declare const Rating: HostComponent<RatingProps>;
+export type PaginationProps = NodeProps["Pagination"] & {
+    onChange?: (page: number) => void;
+};
+export declare const Pagination: HostComponent<PaginationProps>;
+export type CollapsibleProps = NodeProps["Collapsible"] & {
+    children?: ReactNode;
+};
+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"];
+export declare const Avatar: HostComponent<AvatarProps>;
+export type StepperProps = NodeProps["Stepper"] & {
+    onChange?: (value: string) => void;
+};
+export declare const Stepper: HostComponent<StepperProps>;
+export type NumberInputProps = NodeProps["NumberInput"] & {
+    onChange?: (value: string) => void;
+    onSubmit?: (value: string) => void;
+};
+export declare const NumberInput: HostComponent<NumberInputProps>;
+export type OtpInputProps = NodeProps["OtpInput"] & {
+    onChange?: (value: string) => void;
+};
+export declare const OtpInput: HostComponent<OtpInputProps>;
+export type FormProps = NodeProps["Form"] & {
+    children?: ReactNode;
+};
+export declare const Form: HostComponent<FormProps>;
+export type FieldProps = NodeProps["Field"] & {
+    children?: ReactNode;
+};
+export declare const Field: HostComponent<FieldProps>;
+export type GroupBoxProps = NodeProps["GroupBox"] & {
+    children?: ReactNode;
+};
+export declare const GroupBox: HostComponent<GroupBoxProps>;
+export type DescriptionListProps = NodeProps["DescriptionList"];
+export declare const DescriptionList: HostComponent<DescriptionListProps>;
+export type StatusBarProps = NodeProps["StatusBar"] & {
+    children?: ReactNode;
+};
+export declare const StatusBar: HostComponent<StatusBarProps>;
+export type ToolbarProps = NodeProps["Toolbar"] & {
+    children?: ReactNode;
+};
+export declare const Toolbar: HostComponent<ToolbarProps>;
+export type ResizableProps = NodeProps["Resizable"] & {
+    children?: ReactNode;
+};
+export declare const Resizable: HostComponent<ResizableProps>;
+export type CalendarProps = NodeProps["Calendar"] & {
+    onChange?: (day: string) => void;
+};
+export declare const Calendar: HostComponent<CalendarProps>;
+export type TreeProps = NodeProps["Tree"] & {
+    onChange?: (id: string) => void;
+    onExpand?: (id: string) => void;
+    onCollapse?: (id: string) => void;
+};
+export declare const Tree: HostComponent<TreeProps>;
+/** The selected lines, or `null` when the selection is cleared. */
+export type DiffProps = NodeProps["Diff"] & {
+    onChange?: (selection: DiffSelection | null) => void;
+};
+export declare const Diff: HostComponent<DiffProps>;
+/** Each child is one slide. */
+export type CarouselProps = NodeProps["Carousel"] & {
+    onChange?: (index: number) => void;
+    children?: ReactNode;
+};
+export declare const Carousel: HostComponent<CarouselProps>;
+/** The sections are data; `onChange` gets the clicked entry's id. */
+export type SidebarProps = NodeProps["Sidebar"] & {
+    onChange?: (id: string) => void;
+};
+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

@@ -0,0 +1,94 @@
+// Host components. Each is the node type string at runtime (React treats string
+// element types as host components), typed as a component for JSX.
+export const Div = "div";
+export const Text = "text";
+export const Button = "Button";
+export const Input = "Input";
+export const Checkbox = "Checkbox";
+export const Icon = "Icon";
+export const Image = "Image";
+export const MenuBar = "MenuBar";
+export const Switch = "Switch";
+export const RadioGroup = "RadioGroup";
+export const Select = "Select";
+export const Slider = "Slider";
+export const Textarea = "Textarea";
+/** A modal dialog; its children are its body. */
+export const Dialog = "Dialog";
+/** A list that draws only the rows in view; each child is a row of `rowHeight`. */
+export const VirtualList = "VirtualList";
+/** A data table with text cells; it draws only the rows in view. */
+export const Table = "Table";
+/** A tab bar; render the chosen tab's content yourself. */
+export const Tabs = "Tabs";
+/** One tab of a `Tabs`: its children are the nodes of its chip. */
+export const Tab = "Tab";
+/**
+ * Shows the system tray icon while mounted (one per app). While it is shown, closing the
+ * last window does not end the app; unmounting it then does.
+ */
+export const Tray = "Tray";
+/** Opens another window while mounted; its children render there. Closes when unmounted. */
+export const Window = "Window";
+export const Alert = "Alert";
+export const Badge = "Badge";
+export const Tag = "Tag";
+export const Kbd = "Kbd";
+export const Progress = "Progress";
+export const Spinner = "Spinner";
+export const Skeleton = "Skeleton";
+export const Rating = "Rating";
+export const Pagination = "Pagination";
+export const Collapsible = "Collapsible";
+export const Accordion = "Accordion";
+export const Avatar = "Avatar";
+export const Stepper = "Stepper";
+export const NumberInput = "NumberInput";
+export const OtpInput = "OtpInput";
+export const Form = "Form";
+export const Field = "Field";
+export const GroupBox = "GroupBox";
+export const DescriptionList = "DescriptionList";
+export const StatusBar = "StatusBar";
+export const Toolbar = "Toolbar";
+export const Resizable = "Resizable";
+export const Calendar = "Calendar";
+export const Tree = "Tree";
+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.d.ts

@@ -0,0 +1,45 @@
+import createReconciler from "react-reconciler";
+import type { App, AppWindow, NodeType, UINode, WindowEventName, WindowEventPayload } from "gpui-bridge";
+export interface Container {
+    app: App;
+    /** The window root; React's top-level children are appended here. */
+    root: UINode<"div">;
+}
+type Handler = (...args: any[]) => void;
+/** Host node types plus `Window` and `Tray`, which add no node to their parent. */
+type ElementType = NodeType | "Window" | "Tray";
+export interface Instance {
+    /** For a `Window`, the root div of its window. */
+    node: UINode<NodeType>;
+    type: ElementType;
+    /** Latest React handlers by protocol event name; host events call through these. */
+    handlers: Map<string, Handler>;
+    window?: WindowState;
+    tray?: TrayState;
+}
+interface TrayState {
+    app: App;
+    onClick?: () => void;
+    onMenu?: (item: string) => void;
+    listener: (event: {
+        event: "click";
+    } | {
+        event: "menu";
+        item: string;
+    }) => void;
+    /** React detaches a deleted instance more than once. */
+    removed?: boolean;
+}
+interface WindowState {
+    app: App;
+    handle: AppWindow;
+    onClose?: () => void;
+    /** Latest React handler per window event name. */
+    handlers: Map<WindowEventName, Handler>;
+    /** What each subscribed event calls, so it can be unsubscribed. */
+    listeners: Map<WindowEventName, (payload: WindowEventPayload) => void>;
+    /** Closed by the user: the host already forgot it. */
+    closed: boolean;
+}
+export declare const reconciler: createReconciler.Reconciler<Container, Instance, Instance, never, never, UINode<NodeType>, never>;
+export {};

package/dist/src/host-config.js

@@ -0,0 +1,491 @@
+// react-reconciler host config mapping React's mutations onto the gpui-bridge client API.
+import { createContext } from "react";
+import createReconciler from "react-reconciler";
+import { DefaultEventPriority, NoEventPriority } from "react-reconciler/constants.js";
+const TRAY_OPTIONS = ["icon", "tooltip", "menu"];
+function makeTray(container, props) {
+    const { app } = container;
+    const state = { app, listener: (e) => (e.event === "menu" ? state.onMenu?.(e.item) : state.onClick?.()) };
+    updateTrayHandlers(state, props);
+    app.on("tray", state.listener);
+    app.tray(trayOptions(TRAY_OPTIONS, props));
+    // No node of its own: the container root stands in and is never changed through it.
+    return { node: container.root, type: "Tray", handlers: new Map(), tray: state };
+}
+function trayOptions(keys, props) {
+    // shortcut: a prop that becomes undefined keeps its last value (the protocol cannot clear tray fields).
+    return Object.fromEntries(keys.filter((key) => props[key] !== undefined).map((key) => [key, props[key]]));
+}
+function updateTrayHandlers(state, props) {
+    state.onClick = props.onClick;
+    state.onMenu = props.onMenu;
+}
+function updateTray(instance, prevProps, nextProps) {
+    const state = instance.tray;
+    updateTrayHandlers(state, nextProps);
+    // By value: a `menu` written inline is a new array on every render.
+    const changed = TRAY_OPTIONS.filter((key) => JSON.stringify(prevProps[key]) !== JSON.stringify(nextProps[key]));
+    const options = trayOptions(changed, nextProps);
+    if (Object.keys(options).length)
+        state.app.tray(options);
+}
+/** `Window` and `Tray` are not nodes of their parent. */
+const detached = (instance) => Boolean(instance.window || instance.tray);
+const WINDOW_OPTIONS = ["title", "width", "height", "x", "y", "minWidth", "minHeight", "minimized", "frameless"];
+/** React handler prop per window event (PROTOCOL.md section 3). */
+const WINDOW_EVENT_PROPS = {
+    onFocus: "focus",
+    onBlur: "blur",
+    onResize: "resize",
+    onMove: "move",
+    onVisibility: "visibility",
+};
+function windowOptions(props) {
+    return Object.fromEntries(WINDOW_OPTIONS.filter((key) => props[key] !== undefined).map((key) => [key, props[key]]));
+}
+/** Subscribes or unsubscribes according to the handlers present in `props`. */
+function syncWindowHandlers(state, props) {
+    for (const [prop, event] of Object.entries(WINDOW_EVENT_PROPS)) {
+        const handler = props[prop];
+        if (typeof handler === "function") {
+            state.handlers.set(event, handler);
+            if (!state.listeners.has(event)) {
+                const listener = (payload) => state.handlers.get(event)?.(payload);
+                state.listeners.set(event, listener);
+                state.handle.on(event, listener);
+            }
+        }
+        else {
+            state.handlers.delete(event);
+            const listener = state.listeners.get(event);
+            if (listener) {
+                state.handle.off(event, listener);
+                state.listeners.delete(event);
+            }
+        }
+    }
+}
+function makeWindow(app, props) {
+    const root = app.div({ class: props.class ?? "size-full" });
+    const state = {
+        app,
+        handle: app.createWindow({ ...windowOptions(props), root }),
+        handlers: new Map(),
+        listeners: new Map(),
+        closed: false,
+    };
+    state.onClose = props.onClose;
+    state.handle.on("closed", () => {
+        state.closed = true;
+        state.onClose?.();
+    });
+    syncWindowHandlers(state, props);
+    return { node: root, type: "Window", handlers: new Map(), window: state };
+}
+function updateWindow(instance, prevProps, nextProps) {
+    const state = instance.window;
+    state.onClose = nextProps.onClose;
+    const changes = Object.fromEntries(WINDOW_OPTIONS.filter((key) => !Object.is(prevProps[key], nextProps[key])).map((key) => [key, nextProps[key]]));
+    if (Object.keys(changes).length)
+        state.handle.set(changes);
+    syncWindowHandlers(state, nextProps);
+    if (prevProps.class !== nextProps.class)
+        instance.node.set({ class: nextProps.class ?? "size-full" });
+}
+/** A `Window` child is not a node of its parent: it has its own window. */
+function append(parent, child) {
+    if (!detached(child))
+        parent.append(child.node);
+}
+function insert(parent, child, before) {
+    if (detached(child))
+        return;
+    // shortcut: before a `Window` sibling (which has no node here) the child goes last; track siblings if order matters.
+    if (detached(before))
+        parent.append(child.node);
+    else
+        parent.insertBefore(child.node, before.node);
+}
+const EVENT_PROPS = {
+    onClick: "click",
+    onDoubleClick: "doubleClick",
+    onChange: "change",
+    onSubmit: "submit",
+    onMenu: "menu",
+    onKeyDown: "keyDown",
+    onDrop: "drop",
+    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];
+    return items.every((item) => typeof item === "string" || typeof item === "number");
+}
+function textOf(children) {
+    return (Array.isArray(children) ? children : [children]).join("");
+}
+/** Splits React props into wire props and event handlers. */
+function split(type, props) {
+    const wire = {};
+    const handlers = new Map();
+    for (const [key, value] of Object.entries(props)) {
+        if (key === "children")
+            continue;
+        if (key in EVENT_PROPS) {
+            if (typeof value === "function")
+                handlers.set(EVENT_PROPS[key], value);
+        }
+        else if (value !== undefined) {
+            wire[key] = value;
+        }
+    }
+    if (props.children !== undefined && isTextChildren(props.children)) {
+        if (type === "text")
+            wire.content = textOf(props.children);
+        if (type === "Button" && wire.label === undefined)
+            wire.label = textOf(props.children);
+    }
+    // Like React DOM: providing the value makes the component controlled.
+    if (type === "Input" || type === "RadioGroup" || type === "Select" || type === "Slider" || type === "Tabs")
+        wire.controlled = props.value !== undefined;
+    if (type === "Rating" || type === "Stepper" || type === "Calendar")
+        wire.controlled = props.value !== undefined;
+    if (type === "Pagination")
+        wire.controlled = props.page !== undefined;
+    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" || type === "List")
+        wire.controlled = props.value !== undefined;
+    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. */
+function subscribe(instance, event) {
+    const node = instance.node;
+    node.on(event, (payload) => {
+        const handler = instance.handlers.get(event);
+        if (!handler)
+            return;
+        if (event === "click" || event === "ok" || event === "cancel" || event === "close" || event === "loadMore")
+            handler();
+        // A Table's double click carries the row.
+        else if (event === "doubleClick")
+            instance.type === "Table" ? handler(payload.value) : handler();
+        else if (event === "sort")
+            handler(payload);
+        else if (event === "menu")
+            handler(payload.item);
+        else if (event === "keyDown")
+            handler(payload.key);
+        else if (event === "drop")
+            handler(payload.paths);
+        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);
+    });
+}
+function createNode(app, type, wire) {
+    switch (type) {
+        case "div":
+            return app.div(wire);
+        case "text":
+            return app.text(wire);
+        case "Button":
+            return app.button(wire);
+        case "Input":
+            return app.input(wire);
+        case "Checkbox":
+            return app.checkbox(wire);
+        case "Icon":
+            return app.icon(wire);
+        case "Image":
+            return app.image(wire);
+        case "MenuBar":
+            return app.menuBar(wire);
+        case "Switch":
+            return app.switch(wire);
+        case "RadioGroup":
+            return app.radioGroup(wire);
+        case "Select":
+            return app.select(wire);
+        case "Slider":
+            return app.slider(wire);
+        case "Textarea":
+            return app.textarea(wire);
+        case "Dialog":
+            return app.dialog(wire);
+        case "VirtualList":
+            return app.virtualList(wire);
+        case "Table":
+            return app.table(wire);
+        case "Tabs":
+            return app.tabs(wire);
+        case "Tab":
+            return app.tab(wire);
+        case "Alert":
+            return app.alert(wire);
+        case "Badge":
+            return app.badge(wire);
+        case "Tag":
+            return app.tag(wire);
+        case "Kbd":
+            return app.kbd(wire);
+        case "Progress":
+            return app.progress(wire);
+        case "Spinner":
+            return app.spinner(wire);
+        case "Skeleton":
+            return app.skeleton(wire);
+        case "Rating":
+            return app.rating(wire);
+        case "Pagination":
+            return app.pagination(wire);
+        case "Collapsible":
+            return app.collapsible(wire);
+        case "Accordion":
+            return app.accordion(wire);
+        case "Avatar":
+            return app.avatar(wire);
+        case "Stepper":
+            return app.stepper(wire);
+        case "NumberInput":
+            return app.numberInput(wire);
+        case "OtpInput":
+            return app.otpInput(wire);
+        case "Form":
+            return app.form(wire);
+        case "Field":
+            return app.field(wire);
+        case "GroupBox":
+            return app.groupBox(wire);
+        case "DescriptionList":
+            return app.descriptionList(wire);
+        case "StatusBar":
+            return app.statusBar(wire);
+        case "Toolbar":
+            return app.toolbar(wire);
+        case "Resizable":
+            return app.resizable(wire);
+        case "Calendar":
+            return app.calendar(wire);
+        case "Tree":
+            return app.tree(wire);
+        case "Diff":
+            return app.diff(wire);
+        case "Carousel":
+            return app.carousel(wire);
+        case "Sidebar":
+            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}'`);
+    }
+}
+function makeInstance(container, type, props) {
+    if (type === "Window")
+        return makeWindow(container.app, props);
+    if (type === "Tray")
+        return makeTray(container, props);
+    const { wire, handlers } = split(type, props);
+    const instance = { node: createNode(container.app, type, wire), type, handlers };
+    for (const event of handlers.keys())
+        subscribe(instance, event);
+    return instance;
+}
+let currentUpdatePriority = NoEventPriority;
+export const reconciler = createReconciler({
+    rendererPackageName: "gpui-bridge-react",
+    rendererVersion: "0.1.0",
+    extraDevToolsConfig: null,
+    supportsMutation: true,
+    supportsPersistence: false,
+    supportsHydration: false,
+    isPrimaryRenderer: true,
+    createInstance: (type, props, container) => makeInstance(container, type, props),
+    createTextInstance: (text, container) => makeInstance(container, "text", { children: text }),
+    shouldSetTextContent: (type, props) => (type === "text" || type === "Button") && props.children !== undefined && isTextChildren(props.children),
+    finalizeInitialChildren: () => false,
+    appendInitialChild: (parent, child) => append(parent.node, child),
+    appendChild: (parent, child) => append(parent.node, child),
+    appendChildToContainer: (container, child) => append(container.root, child),
+    insertBefore: (parent, child, before) => insert(parent.node, child, before),
+    insertInContainerBefore: (container, child, before) => insert(container.root, child, before),
+    // A removed `Window` (or one inside a removed subtree) is closed in `detachDeletedInstance`.
+    removeChild: (_parent, child) => void (detached(child) || child.node.remove()),
+    removeChildFromContainer: (_container, child) => void (detached(child) || child.node.remove()),
+    // The root starts empty and is only populated by React.
+    clearContainer: () => { },
+    commitUpdate(instance, type, prevProps, nextProps) {
+        if (instance.window)
+            return updateWindow(instance, prevProps, nextProps);
+        if (instance.tray)
+            return updateTray(instance, prevProps, nextProps);
+        const prev = split(type, prevProps);
+        const next = split(type, nextProps);
+        const changes = {};
+        for (const key of new Set([...Object.keys(prev.wire), ...Object.keys(next.wire)])) {
+            if (!(key in next.wire))
+                changes[key] = null;
+            else if (!Object.is(prev.wire[key], next.wire[key]))
+                changes[key] = next.wire[key];
+        }
+        if (Object.keys(changes).length)
+            instance.node.set(changes);
+        for (const event of prev.handlers.keys()) {
+            if (!next.handlers.has(event))
+                instance.node.off(event);
+        }
+        for (const event of next.handlers.keys()) {
+            if (!prev.handlers.has(event))
+                subscribe(instance, event);
+        }
+        instance.handlers = next.handlers;
+    },
+    commitTextUpdate: (instance, _old, text) => void instance.node.set({ content: text }),
+    resetTextContent: (instance) => void instance.node.set({ content: null, label: null }),
+    // One host render per React commit.
+    resetAfterCommit: (container) => container.app.commit(),
+    prepareForCommit: () => null,
+    getRootHostContext: () => ({}),
+    getChildHostContext: (parent) => parent,
+    getPublicInstance: (instance) => instance.node,
+    preparePortalMount: () => { },
+    scheduleTimeout: setTimeout,
+    cancelTimeout: clearTimeout,
+    noTimeout: -1,
+    supportsMicrotasks: true,
+    scheduleMicrotask: queueMicrotask,
+    setCurrentUpdatePriority: (priority) => void (currentUpdatePriority = priority),
+    getCurrentUpdatePriority: () => currentUpdatePriority,
+    resolveUpdatePriority: () => currentUpdatePriority || DefaultEventPriority,
+    // Features this renderer does not use (transitions, forms, suspense commits, scopes).
+    NotPendingTransition: null,
+    HostTransitionContext: createContext(null),
+    resetFormInstance: () => { },
+    requestPostPaintCallback: () => { },
+    shouldAttemptEagerTransition: () => false,
+    trackSchedulerEvent: () => { },
+    resolveEventType: () => null,
+    resolveEventTimeStamp: () => -1.1,
+    maySuspendCommit: () => false,
+    maySuspendCommitOnUpdate: () => false,
+    maySuspendCommitInSyncRender: () => false,
+    preloadInstance: () => true,
+    startSuspendingCommit: () => null,
+    suspendInstance: () => { },
+    suspendOnActiveViewTransition: () => { },
+    waitForCommitToBeReady: () => null,
+    getSuspendedCommitReason: () => null,
+    getInstanceFromNode: () => null,
+    beforeActiveInstanceBlur: () => { },
+    afterActiveInstanceBlur: () => { },
+    prepareScopeUpdate: () => { },
+    getInstanceFromScope: () => null,
+    // Called for every deleted host instance, after the commit: a deleted `Window` or `Tray` goes away with a commit of its own.
+    detachDeletedInstance(instance) {
+        if (instance.tray) {
+            if (instance.tray.removed)
+                return;
+            instance.tray.removed = true;
+            instance.tray.app.off("tray", instance.tray.listener);
+            instance.tray.app.removeTray().commit();
+            return;
+        }
+        const state = instance.window;
+        if (!state || state.closed)
+            return;
+        state.handle.close();
+        instance.node.remove();
+        state.closed = true;
+        state.app.commit();
+    },
+    bindToConsole: (method, args) => console[method].bind(console, ...args),
+});

package/dist/src/index.d.ts

@@ -0,0 +1,14 @@
+import type { ReactNode } from "react";
+import { type App, type AppOptions, type WindowOptions } from "gpui-bridge";
+export * from "./components.js";
+export interface RenderOptions extends AppOptions {
+    window?: Omit<WindowOptions, "root">;
+    /** Classes of the window root that holds the React tree. */
+    rootClass?: string;
+}
+export interface Root {
+    app: App;
+    unmount(): void;
+}
+/** Starts the host and renders `element` into its window. */
+export declare function render(element: ReactNode, options?: RenderOptions): Promise<Root>;

package/dist/src/index.js

@@ -0,0 +1,16 @@
+// React renderer for gpui-bridge: render a React tree into a native GPUI window.
+import { ConcurrentRoot } from "react-reconciler/constants.js";
+import { createApp } from "gpui-bridge";
+import { reconciler } from "./host-config.js";
+export * from "./components.js";
+/** Starts the host and renders `element` into its window. */
+export async function render(element, options = {}) {
+    const app = await createApp(options);
+    const root = app.div({ class: options.rootClass ?? "size-full" });
+    // Sent with React's first commit.
+    app.window({ ...options.window, root });
+    const report = (error) => console.error(error);
+    const fiberRoot = reconciler.createContainer({ app, root }, ConcurrentRoot, null, false, null, "", report, report, report, () => { }, null);
+    reconciler.updateContainer(element, fiberRoot, null, null);
+    return { app, unmount: () => reconciler.updateContainer(null, fiberRoot, null, null) };
+}

package/package.json

@@ -1,6 +1,53 @@
 {
   "name": "gpui-bridge-react",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.3.0",
+  "description": "React renderer for gpui-bridge native UIs",
+  "license": "MIT",
+  "author": "gpui-bridge contributors",
+  "keywords": [
+    "gpui",
+    "gpui-component",
+    "native",
+    "desktop",
+    "ui",
+    "react",
+    "renderer"
+  ],
+  "homepage": "https://github.com/InDIOS/gpui-bridge#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/InDIOS/gpui-bridge.git",
+    "directory": "packages/client-react"
+  },
+  "bugs": {
+    "url": "https://github.com/InDIOS/gpui-bridge/issues"
+  },
+  "type": "module",
+  "main": "dist/src/index.js",
+  "types": "dist/src/index.d.ts",
+  "engines": {
+    "node": ">=22.6"
+  },
+  "peerDependencies": {
+    "gpui-bridge": "^0.3.0",
+    "react": "^19.3.0"
+  },
+  "dependencies": {
+    "react-reconciler": "0.34.0"
+  },
+  "devDependencies": {
+    "gpui-bridge": "0.3.0",
+    "@types/node": "^26.6.5",
+    "@types/react": "19.3.0",
+    "@types/react-reconciler": "^0.34.0",
+    "react": "19.3.0",
+    "typescript": "7.0.2"
+  },
+  "files": [
+    "dist/src"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "test": "tsc && node --test dist/test/*.test.js"
+  }
 }