gpui-bridge 0.2.0 → 0.3.0

package/dist/app.d.ts

@@ -145,7 +145,7 @@ export declare class UINode<T extends NodeType> {
     /** Subscribes to an event; the host only emits subscribed events. */
     on<E extends keyof NodeEvents[T] & string>(event: E, handler: (payload: NodeEvents[T][E]) => void): this;
     off<E extends keyof NodeEvents[T] & string>(event: E): this;
-    /** Gives the node the keyboard focus on the next commit (an Input, a Textarea or a div with `keyDown`). */
+    /** Gives the node the keyboard focus on the next commit (an Input, a Textarea, a Command, a div with `keyDown`…). */
     focus(): this;
     /** Removes the node and all its descendants. */
     remove(): void;
@@ -275,6 +275,74 @@ export declare class App {
     sidebar(props?: NodeProps["Sidebar"]): UINode<"Sidebar">;
     /** A line, bar or pie chart of the points in `data`. */
     chart(props?: NodeProps["Chart"]): UINode<"Chart">;
+    /** Paints the drawing commands in `commands`; `pointerDown` with the local point. */
+    canvas(props?: NodeProps["Canvas"]): UINode<"Canvas">;
+    /** A command palette over the sections in `items`; `confirm` with the chosen entry's `id`. */
+    command(props?: NodeProps["Command"]): UINode<"Command">;
+    /** Settings pages of typed fields in `pages`; `change` with `{key, value}` of the field set. */
+    settings(props?: NodeProps["Settings"]): UINode<"Settings">;
+    /** A button that stays pressed: `change` with `checked`. */
+    toggle(props?: NodeProps["Toggle"]): UINode<"Toggle">;
+    /** An action with a menu: `click` for the left half, `menu` with the chosen item's id. */
+    dropdownButton(props?: NodeProps["DropdownButton"]): UINode<"DropdownButton">;
+    /** Text with an optional secondary text and a highlighted substring. */
+    label(props?: NodeProps["Label"]): UINode<"Label">;
+    /** A centered empty state; append the action (usually a `Button`). */
+    empty(props?: NodeProps["Empty"]): UINode<"Empty">;
+    /** Loading text with a moving highlight. */
+    shimmer(props?: NodeProps["Shimmer"]): UINode<"Shimmer">;
+    /** A text field with text and an icon on either side: `change` and `submit` like an `Input`. */
+    inputGroup(props?: NodeProps["InputGroup"]): UINode<"InputGroup">;
+    /** Copies `value` on click: `copied` with that text. */
+    clipboard(props?: NodeProps["Clipboard"]): UINode<"Clipboard">;
+    /** A confirmation with a title, a description and an icon: `ok` and `cancel`, as in a `Dialog`. */
+    alertDialog(props?: NodeProps["AlertDialog"]): UINode<"AlertDialog">;
+    /** A panel that slides in from `side`: `close` with its X, Escape or a click on the overlay. */
+    sheet(props?: NodeProps["Sheet"]): UINode<"Sheet">;
+    /** A panel anchored to its first child (the trigger): `change` with `checked` both ways. */
+    popover(props?: NodeProps["Popover"]): UINode<"Popover">;
+    /** A card on hover, opened by the mouse alone: `change` with `checked`. */
+    hoverCard(props?: NodeProps["HoverCard"]): UINode<"HoverCard">;
+    /** A day picker: `change` with the chosen day (`null` when cleared). */
+    datePicker(props?: NodeProps["DatePicker"]): UINode<"DatePicker">;
+    /** A time typed by segments: `change` with the time. */
+    timeField(props?: NodeProps["TimeField"]): UINode<"TimeField">;
+    /** A color swatch and hex box: `change` with the color (`null` when cleared). */
+    colorPicker(props?: NodeProps["ColorPicker"]): UINode<"ColorPicker">;
+    /** A list that picks several options: `change` with the whole selection. */
+    combobox(props?: NodeProps["Combobox"]): UINode<"Combobox">;
+    /** A chat bubble; its children are the content. */
+    bubble(props?: NodeProps["Bubble"]): UINode<"Bubble">;
+    /** A message row: `MessageHeader`/`MessageFooter` children, the rest is the content. */
+    message(props?: NodeProps["Message"]): UINode<"Message">;
+    /** A `Message`'s header (sender, time). */
+    messageHeader(props?: NodeProps["MessageHeader"]): UINode<"MessageHeader">;
+    /** A `Message`'s footer (state, actions). */
+    messageFooter(props?: NodeProps["MessageFooter"]): UINode<"MessageFooter">;
+    /** A compact status row in a conversation. */
+    marker(props?: NodeProps["Marker"]): UINode<"Marker">;
+    /** A file or picture card: `click`, `remove` and `retry` show its controls. */
+    attachment(props?: NodeProps["Attachment"]): UINode<"Attachment">;
+    /** A virtual list of messages anchored at the end; each child is a row. */
+    messageScroller(props?: NodeProps["MessageScroller"]): UINode<"MessageScroller">;
+    /** Questions one at a time: `change` with each answer, `submit` with all of them. */
+    questionnaire(props?: NodeProps["Questionnaire"]): UINode<"Questionnaire">;
+    /** A selectable list over its `ListItem` children: `change`, `confirm`, `query` and `loadMore`. */
+    list(props?: NodeProps["List"]): UINode<"List">;
+    /** A `List` row: `value` is what the events report; its children are the content. */
+    listItem(props?: NodeProps["ListItem"]): UINode<"ListItem">;
+    /** Panels the user rearranges: its `DockPanel` children. The host owns the layout. */
+    dock(props?: NodeProps["Dock"]): UINode<"Dock">;
+    /** A `Dock` panel: `title`, `placement` (read once) and `closable` (`close`); its children are the content. */
+    dockPanel(props?: NodeProps["DockPanel"]): UINode<"DockPanel">;
+    /** An `Accordion` section: `id` (what `change` reports), `title`, `open`, `disabled`; its children are the content. */
+    accordionItem(props?: NodeProps["AccordionItem"]): UINode<"AccordionItem">;
+    /** A `Dialog`'s or `AlertDialog`'s footer: its children (buttons) replace OK/Cancel. */
+    dialogFooter(props?: NodeProps["DialogFooter"]): UINode<"DialogFooter">;
+    /** A `StatusBar`'s left side: its children replace the `left` text. */
+    statusBarLeft(props?: NodeProps["StatusBarLeft"]): UINode<"StatusBarLeft">;
+    /** A `StatusBar`'s right side: its children replace the `right` text. */
+    statusBarRight(props?: NodeProps["StatusBarRight"]): UINode<"StatusBarRight">;
     /** A node of any type; the specific methods below only add typing. */
     create<T extends NodeType>(type: T, props?: NodeProps[T]): UINode<T>;
     /** Creates or updates the main window (window 1). It opens on the first commit that sets `root`. */

package/dist/app.js

@@ -59,7 +59,7 @@ export class UINode {
         this.app.wire.setHandler(this.id, event, undefined);
         return this;
     }
-    /** Gives the node the keyboard focus on the next commit (an Input, a Textarea or a div with `keyDown`). */
+    /** Gives the node the keyboard focus on the next commit (an Input, a Textarea, a Command, a div with `keyDown`…). */
     focus() {
         this.app.wire.queue({ op: "focus", id: this.id });
         return this;
@@ -336,6 +336,142 @@ export class App {
     chart(props = {}) {
         return this.create("Chart", props);
     }
+    /** Paints the drawing commands in `commands`; `pointerDown` with the local point. */
+    canvas(props = {}) {
+        return this.create("Canvas", props);
+    }
+    /** A command palette over the sections in `items`; `confirm` with the chosen entry's `id`. */
+    command(props = {}) {
+        return this.create("Command", props);
+    }
+    /** Settings pages of typed fields in `pages`; `change` with `{key, value}` of the field set. */
+    settings(props = {}) {
+        return this.create("Settings", props);
+    }
+    /** A button that stays pressed: `change` with `checked`. */
+    toggle(props = {}) {
+        return this.create("Toggle", props);
+    }
+    /** An action with a menu: `click` for the left half, `menu` with the chosen item's id. */
+    dropdownButton(props = {}) {
+        return this.create("DropdownButton", props);
+    }
+    /** Text with an optional secondary text and a highlighted substring. */
+    label(props = {}) {
+        return this.create("Label", props);
+    }
+    /** A centered empty state; append the action (usually a `Button`). */
+    empty(props = {}) {
+        return this.create("Empty", props);
+    }
+    /** Loading text with a moving highlight. */
+    shimmer(props = {}) {
+        return this.create("Shimmer", props);
+    }
+    /** A text field with text and an icon on either side: `change` and `submit` like an `Input`. */
+    inputGroup(props = {}) {
+        return this.create("InputGroup", props);
+    }
+    /** Copies `value` on click: `copied` with that text. */
+    clipboard(props = {}) {
+        return this.create("Clipboard", props);
+    }
+    /** A confirmation with a title, a description and an icon: `ok` and `cancel`, as in a `Dialog`. */
+    alertDialog(props = {}) {
+        return this.create("AlertDialog", props);
+    }
+    /** A panel that slides in from `side`: `close` with its X, Escape or a click on the overlay. */
+    sheet(props = {}) {
+        return this.create("Sheet", props);
+    }
+    /** A panel anchored to its first child (the trigger): `change` with `checked` both ways. */
+    popover(props = {}) {
+        return this.create("Popover", props);
+    }
+    /** A card on hover, opened by the mouse alone: `change` with `checked`. */
+    hoverCard(props = {}) {
+        return this.create("HoverCard", props);
+    }
+    /** A day picker: `change` with the chosen day (`null` when cleared). */
+    datePicker(props = {}) {
+        return this.create("DatePicker", props);
+    }
+    /** A time typed by segments: `change` with the time. */
+    timeField(props = {}) {
+        return this.create("TimeField", props);
+    }
+    /** A color swatch and hex box: `change` with the color (`null` when cleared). */
+    colorPicker(props = {}) {
+        return this.create("ColorPicker", props);
+    }
+    /** A list that picks several options: `change` with the whole selection. */
+    combobox(props = {}) {
+        return this.create("Combobox", props);
+    }
+    /** A chat bubble; its children are the content. */
+    bubble(props = {}) {
+        return this.create("Bubble", props);
+    }
+    /** A message row: `MessageHeader`/`MessageFooter` children, the rest is the content. */
+    message(props = {}) {
+        return this.create("Message", props);
+    }
+    /** A `Message`'s header (sender, time). */
+    messageHeader(props = {}) {
+        return this.create("MessageHeader", props);
+    }
+    /** A `Message`'s footer (state, actions). */
+    messageFooter(props = {}) {
+        return this.create("MessageFooter", props);
+    }
+    /** A compact status row in a conversation. */
+    marker(props = {}) {
+        return this.create("Marker", props);
+    }
+    /** A file or picture card: `click`, `remove` and `retry` show its controls. */
+    attachment(props = {}) {
+        return this.create("Attachment", props);
+    }
+    /** A virtual list of messages anchored at the end; each child is a row. */
+    messageScroller(props = {}) {
+        return this.create("MessageScroller", props);
+    }
+    /** Questions one at a time: `change` with each answer, `submit` with all of them. */
+    questionnaire(props = {}) {
+        return this.create("Questionnaire", props);
+    }
+    /** A selectable list over its `ListItem` children: `change`, `confirm`, `query` and `loadMore`. */
+    list(props = {}) {
+        return this.create("List", props);
+    }
+    /** A `List` row: `value` is what the events report; its children are the content. */
+    listItem(props = {}) {
+        return this.create("ListItem", props);
+    }
+    /** Panels the user rearranges: its `DockPanel` children. The host owns the layout. */
+    dock(props = {}) {
+        return this.create("Dock", props);
+    }
+    /** A `Dock` panel: `title`, `placement` (read once) and `closable` (`close`); its children are the content. */
+    dockPanel(props = {}) {
+        return this.create("DockPanel", props);
+    }
+    /** An `Accordion` section: `id` (what `change` reports), `title`, `open`, `disabled`; its children are the content. */
+    accordionItem(props = {}) {
+        return this.create("AccordionItem", props);
+    }
+    /** A `Dialog`'s or `AlertDialog`'s footer: its children (buttons) replace OK/Cancel. */
+    dialogFooter(props = {}) {
+        return this.create("DialogFooter", props);
+    }
+    /** A `StatusBar`'s left side: its children replace the `left` text. */
+    statusBarLeft(props = {}) {
+        return this.create("StatusBarLeft", props);
+    }
+    /** A `StatusBar`'s right side: its children replace the `right` text. */
+    statusBarRight(props = {}) {
+        return this.create("StatusBarRight", props);
+    }
     /** A node of any type; the specific methods below only add typing. */
     create(type, props = {}) {
         return new UINode(this, this.wire.create(type, { ...props }), type);
@@ -464,7 +600,11 @@ export class App {
                             ? { paths: message.paths ?? [] }
                             : message.event === "sort"
                                 ? message.value
-                                : type === "Checkbox" || type === "Switch"
+                                : type === "Checkbox" ||
+                                    type === "Switch" ||
+                                    type === "Toggle" ||
+                                    type === "Popover" ||
+                                    type === "HoverCard"
                                     ? { checked: message.checked ?? false }
                                     : message.value !== undefined
                                         ? { value: message.value }

package/dist/protocol.d.ts

@@ -2,7 +2,7 @@ export declare const PROTOCOL_VERSION = 1;
 export type NodeId = number;
 /** Client-assigned window id; `window` without `id` is window 1. */
 export type WindowId = number;
-export type NodeType = "div" | "text" | "Button" | "Input" | "Checkbox" | "Icon" | "Image" | "MenuBar" | "Switch" | "RadioGroup" | "Select" | "Slider" | "Textarea" | "Dialog" | "VirtualList" | "Table" | "Tabs" | "Tab" | "Alert" | "Badge" | "Tag" | "Kbd" | "Progress" | "Spinner" | "Skeleton" | "Rating" | "Pagination" | "Collapsible" | "Accordion" | "Avatar" | "Stepper" | "NumberInput" | "OtpInput" | "Form" | "Field" | "GroupBox" | "DescriptionList" | "StatusBar" | "Toolbar" | "Resizable" | "Calendar" | "Tree" | "Diff" | "Carousel" | "Sidebar" | "Chart";
+export type NodeType = "div" | "text" | "Button" | "Input" | "Checkbox" | "Icon" | "Image" | "MenuBar" | "Switch" | "RadioGroup" | "Select" | "Slider" | "Textarea" | "Dialog" | "VirtualList" | "Table" | "Tabs" | "Tab" | "Alert" | "Badge" | "Tag" | "Kbd" | "Progress" | "Spinner" | "Skeleton" | "Rating" | "Pagination" | "Collapsible" | "Accordion" | "Avatar" | "Stepper" | "NumberInput" | "OtpInput" | "Form" | "Field" | "GroupBox" | "DescriptionList" | "StatusBar" | "Toolbar" | "Resizable" | "Calendar" | "Tree" | "Diff" | "Carousel" | "Sidebar" | "Chart" | "Canvas" | "Command" | "Settings" | "Toggle" | "DropdownButton" | "Label" | "Empty" | "Shimmer" | "InputGroup" | "Clipboard" | "AlertDialog" | "Sheet" | "Popover" | "HoverCard" | "DatePicker" | "TimeField" | "ColorPicker" | "Combobox" | "Bubble" | "Message" | "MessageHeader" | "MessageFooter" | "Marker" | "Attachment" | "MessageScroller" | "Questionnaire" | "List" | "ListItem" | "Dock" | "DockPanel" | "AccordionItem" | "DialogFooter" | "StatusBarLeft" | "StatusBarRight";
 export type WindowTheme = "light" | "dark";
 /** Events a window can report (PROTOCOL.md section 3); `window.events` opts in. */
 export type WindowEventName = "focus" | "blur" | "resize" | "move" | "visibility";
@@ -136,7 +136,7 @@ export type HostMessage = {
     type: "event";
     id: NodeId;
     event: string;
-    value?: string | number | null | TableSort | DiffSelection;
+    value?: string | number | null | string[] | TableSort | DiffSelection | CanvasPoint | SettingsChange | QuestionnaireAnswer | QuestionnaireAnswer[];
     checked?: boolean;
     paths?: string[];
 } | {
@@ -353,7 +353,7 @@ export interface DialogProps {
     title?: string;
     /** Default "OK". */
     okText?: string;
-    /** Adds a cancel button. */
+    /** Adds a cancel button. A `DialogFooter` child replaces both buttons. */
     cancelText?: string;
     /** In pixels. */
     width?: number;
@@ -497,7 +497,7 @@ export interface PaginationProps {
     controlled?: boolean;
     class?: string;
 }
-/** A section of an `Accordion`; its content is text. */
+/** An `items` entry of an `Accordion`; its content is text. */
 export interface AccordionItem {
     id: string;
     title: string;
@@ -506,6 +506,7 @@ export interface AccordionItem {
     disabled?: boolean;
 }
 export interface AccordionProps {
+    /** Ignored when the Accordion has `AccordionItem` children. */
     items?: AccordionItem[];
     /** Several sections open at once; default false. */
     multiple?: boolean;
@@ -590,7 +591,9 @@ export interface DescriptionListProps {
     class?: string;
 }
 export interface StatusBarProps {
+    /** Replaced by a `StatusBarLeft` child. */
     left?: string;
+    /** Replaced by a `StatusBarRight` child. */
     right?: string;
     class?: string;
 }
@@ -749,6 +752,437 @@ export interface ChartProps {
     /** Give it a bounded box (`h-64`, `flex-1 w-full`): the plot fills it. */
     class?: string;
 }
+/** One drawing command of a `Canvas` (PROTOCOL.md section 20), in logical pixels from its top-left corner. */
+export type CanvasCommand = {
+    op: "rect";
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+    color?: ChartColor;
+    corner_radius?: number;
+} | {
+    op: "line";
+    x1: number;
+    y1: number;
+    x2: number;
+    y2: number;
+    color?: ChartColor;
+    width?: number;
+}
+/** `d` takes absolute `M x y`, `L x y` and `Z` only. */
+ | {
+    op: "path";
+    d: string;
+    color?: ChartColor;
+    width?: number;
+};
+/** A point local to a `Canvas`, in the same coordinates as its commands. */
+export interface CanvasPoint {
+    x: number;
+    y: number;
+}
+export interface CanvasProps {
+    /** Painted in order; `setProps` replaces the whole list. */
+    commands?: CanvasCommand[];
+    /** Give it a bounded box (`h-64 w-full`). */
+    class?: string;
+}
+/** One entry of a `Command` palette. */
+export interface CommandEntry {
+    /** Unique across the whole palette: it is what `confirm` reports. */
+    id: string;
+    label: string;
+    /** A bundled icon name. */
+    icon?: string;
+    /** Extra terms the search matches, besides `label`. */
+    keywords?: string[];
+    /** Draws a check at the end of the row. */
+    checked?: boolean;
+    disabled?: boolean;
+}
+/** A group of entries with a heading (`label`); without one the entries have no heading. */
+export interface CommandSection {
+    label?: string;
+    items: CommandEntry[];
+}
+export interface CommandProps {
+    /** The sections: the palette takes no children and filters them by the query itself. */
+    items?: CommandSection[];
+    /** The search field's placeholder. */
+    placeholder?: string;
+    class?: string;
+}
+/** One field of a `Settings` page; `value` fits `type` (a dropdown's is one of its `options`). */
+export type SettingsItem = {
+    /** Unique across all pages: it is what `change` reports. */
+    key: string;
+    label: string;
+    description?: string;
+    disabled?: boolean;
+} & ({
+    type: "switch" | "checkbox";
+    value: boolean;
+} | {
+    type: "input";
+    value: string;
+} | {
+    type: "dropdown";
+    value: string;
+    options: {
+        value: string;
+        label: string;
+    }[];
+} | {
+    type: "number";
+    value: number;
+    min?: number;
+    max?: number;
+    step?: number;
+});
+/** A group of fields, with an optional heading. */
+export interface SettingsGroup {
+    title?: string;
+    items: SettingsItem[];
+}
+/** A sidebar entry and the groups shown when it is selected. */
+export interface SettingsPage {
+    title: string;
+    /** A bundled icon name. */
+    icon?: string;
+    groups: SettingsGroup[];
+}
+/** What `change` reports: the field the user set and its new value. */
+export interface SettingsChange {
+    key: string;
+    value: boolean | string | number;
+}
+export interface SettingsProps {
+    /** The pages: the host keeps each value the user sets (no `controlled` mode). */
+    pages?: SettingsPage[];
+    /** Give it a size (`size-full`, `h-96`): the sidebar and the page split the box. */
+    class?: string;
+}
+export interface ToggleProps {
+    checked?: boolean;
+    label?: string;
+    /** A bundled icon name, drawn before the label. */
+    icon?: string;
+    /** Default "ghost". */
+    variant?: "ghost" | "outline";
+    /** A hint; it is also the name a screen reader reads. */
+    tooltip?: string;
+    disabled?: boolean;
+    /** The host only reports clicks; the client confirms them with `checked`. */
+    controlled?: boolean;
+    class?: string;
+}
+export interface DropdownButtonProps {
+    label?: string;
+    /** A bundled icon name, drawn before the label. */
+    icon?: string;
+    /** Default: gpui-component's own look. */
+    variant?: "primary" | "secondary" | "ghost" | "danger";
+    outline?: boolean;
+    disabled?: boolean;
+    /** The menu, in the format of `contextMenu` (`PROTOCOL.md` section 10). */
+    items?: MenuItem[];
+    /** The name a screen reader reads for the caret; default: a translated "More options". */
+    menuLabel?: string;
+    /** A hint on the left half. */
+    tooltip?: string;
+    class?: string;
+}
+export interface LabelProps {
+    content?: string;
+    /** A muted text after the content. */
+    secondary?: string;
+    /** Dots instead of the characters. */
+    masked?: boolean;
+    /** Marks every occurrence of this substring, ignoring case. */
+    highlight?: string;
+    class?: string;
+}
+export interface EmptyProps {
+    /** A bundled icon name, in a muted box above the title. */
+    icon?: string;
+    title?: string;
+    description?: string;
+    /** It fills its box (`flex-1`), so size the parent. */
+    class?: string;
+}
+export interface ShimmerProps {
+    content?: string;
+    /** One sweep, in seconds; default 2. */
+    duration?: number;
+    /** The highlight half-width; default 0.3, kept within 0.05–1. */
+    spread?: number;
+    reverse?: boolean;
+    /** One sweep instead of a loop. */
+    once?: boolean;
+    class?: string;
+}
+export interface InputGroupProps {
+    value?: string;
+    placeholder?: string;
+    /** Text on the left of the field. */
+    prefix?: string;
+    /** Text on the right. */
+    suffix?: string;
+    /** A bundled icon name on the left. */
+    prefixIcon?: string;
+    /** A bundled icon name on the right. */
+    suffixIcon?: string;
+    disabled?: boolean;
+    readonly?: boolean;
+    /** The caller's validation result; it does not reject edits. */
+    invalid?: boolean;
+    /** The host only reports edits; the client confirms them with `value`. */
+    controlled?: boolean;
+    class?: string;
+}
+export interface ClipboardProps {
+    /** The text copied on click. */
+    value?: string;
+    /** A hint; `a11y.label` is the button's name. */
+    tooltip?: string;
+    class?: string;
+}
+/** The eight corners a `Popover` or a `HoverCard` can open from. */
+export type OverlayAnchor = "top-left" | "top-center" | "top-right" | "left-center" | "right-center" | "bottom-left" | "bottom-center" | "bottom-right";
+export interface AlertDialogProps {
+    /** Shown while true; the host sets it to false when the user answers. */
+    open?: boolean;
+    title?: string;
+    description?: string;
+    /** A bundled icon name, before the title. */
+    icon?: string;
+    /** Default "OK". */
+    okText?: string;
+    /** Adds the Cancel button. A `DialogFooter` child replaces both buttons. */
+    cancelText?: string;
+    /** Classes of the body that holds the children. */
+    class?: string;
+}
+export interface SheetProps {
+    /** Shown while true; the host sets it to false when the panel closes. */
+    open?: boolean;
+    /** The edge it slides in from. Default "right". */
+    side?: "left" | "right" | "top" | "bottom";
+    title?: string;
+    /** Pixels: the width on the sides, the height above and below. Default 350. */
+    size?: number;
+    /** Classes of the body that holds the children. */
+    class?: string;
+}
+export interface PopoverProps {
+    /**
+     * The panel's state, kept in the host as a synced `Checkbox`'s `checked`: the user opening or
+     * closing it reports `change` and updates it, and a `setProps` with another `open` wins.
+     */
+    open?: boolean;
+    /** Where the panel goes. Default "top-left" (below the trigger, left-aligned). */
+    anchor?: OverlayAnchor;
+    /** A triangle pointing at the trigger. */
+    arrow?: boolean;
+    /** Classes of the trigger's slot (the first child), not of the panel. */
+    class?: string;
+}
+export interface HoverCardProps {
+    /** Milliseconds before it opens. Default 600. */
+    openDelay?: number;
+    /** Milliseconds before it closes. Default 300. */
+    closeDelay?: number;
+    /** Where the card goes. Default "top-center". */
+    anchor?: OverlayAnchor;
+    /** Classes of the trigger's slot (the first child), not of the card. */
+    class?: string;
+}
+export interface DatePickerProps {
+    /** The chosen day, `YYYY-MM-DD`; with `range: true`, an ISO interval `YYYY-MM-DD/YYYY-MM-DD`. `null` clears it. */
+    value?: string | null;
+    /** A start-to-end range; the form of `value` is fixed by this (the picker rebuilds when it changes). */
+    range?: boolean;
+    /** Shown while the field is empty. */
+    placeholder?: string;
+    disabled?: boolean;
+    /** The host only reports picks; the client confirms them with `value`. */
+    controlled?: boolean;
+    class?: string;
+}
+export interface TimeFieldProps {
+    /** The time shown, `HH:MM`; with `seconds: true`, `HH:MM:SS`. It has no empty state: without `value` the field shows `00:00`. */
+    value?: string;
+    /** Include seconds; the form of `value` is fixed by this (the field rebuilds when it changes). */
+    seconds?: boolean;
+    disabled?: boolean;
+    /** The host only reports edits; the client confirms them with `value`. */
+    controlled?: boolean;
+    class?: string;
+}
+export interface ColorPickerProps {
+    /** `#RRGGBB` or `#RRGGBBAA`; the `#` is required. `null` clears it. It has no `disabled`: gpui-component cannot disable its color pickers. */
+    value?: string | null;
+    /** Colors shown first, in the same form. */
+    palette?: string[];
+    /** The host only reports picks; the client confirms them with `value`. */
+    controlled?: boolean;
+    class?: string;
+}
+export interface ComboboxProps {
+    /** The choices, as in a `Select`. */
+    options?: Option[];
+    /** The chosen options' values; always a list. */
+    value?: string[];
+    /** Shown while nothing is chosen. */
+    placeholder?: string;
+    /** A search box at the top of the list. */
+    searchable?: boolean;
+    disabled?: boolean;
+    /** The host only reports toggles; the client confirms them with `value`. */
+    controlled?: boolean;
+    class?: string;
+}
+export interface BubbleProps {
+    /** The surface; default `filled`. `ghost` has no surface or padding and takes the whole width. */
+    variant?: "filled" | "secondary" | "muted" | "tinted" | "outline" | "ghost" | "destructive";
+    /** Unset, it follows the `Message` that holds it. */
+    alignment?: "start" | "end";
+    class?: string;
+}
+export interface MessageProps {
+    /** Default `start`; `end` moves the avatar to that side too. */
+    alignment?: "start" | "end";
+    /** An `Avatar`'s `name` and `src`; without either there is no avatar. */
+    avatarName?: string;
+    avatarSrc?: string;
+    class?: string;
+}
+/** A `MessageHeader`/`MessageFooter` lays out its children in a row; outside a `Message` it draws nothing. */
+export interface MessagePartProps {
+    class?: string;
+}
+export interface MarkerProps {
+    content?: string;
+    /** A bundled icon before the text; it replaces the loading spinner. */
+    icon?: string;
+    /** Default `plain`. */
+    variant?: "plain" | "separator" | "border";
+    alignment?: "start" | "center" | "end";
+    loading?: boolean;
+    /** Default `spinner`; `shimmer` moves a highlight over `content`. */
+    loadingStyle?: "spinner" | "shimmer";
+    class?: string;
+}
+export interface AttachmentProps {
+    /** Default `complete`. */
+    status?: "pending" | "uploading" | "processing" | "failed" | "complete";
+    /** 0–100, shown only while `uploading`. */
+    progress?: number;
+    title?: string;
+    description?: string;
+    /** Shown while the card is hovered. */
+    tooltip?: string;
+    /** The picture, as in an `Image`; `data` (standard base64) wins over `src`. */
+    src?: string;
+    data?: string;
+    /** Default `horizontal`; `vertical` puts the picture on top. */
+    axis?: "horizontal" | "vertical";
+    class?: string;
+}
+export interface MessageScrollerProps {
+    /** Default true. */
+    scrollbar?: boolean;
+    /** The round button that goes back to the end; default true. */
+    jumpButton?: boolean;
+    /** That button's tooltip and name; the crate's default is "Jump to latest". */
+    jumpLabel?: string;
+    class?: string;
+}
+export interface QuestionnaireChoice {
+    /** Unique within its question. */
+    value: string;
+    label: string;
+    description?: string;
+    disabled?: boolean;
+    /** An answer from the start; at most one without `multiple`. */
+    selected?: boolean;
+}
+export interface QuestionnaireItem {
+    /** Unique; it names the answer. */
+    name: string;
+    label: string;
+    description?: string;
+    /** It cannot be skipped. */
+    required?: boolean;
+    /** Checkboxes instead of radio buttons. */
+    multiple?: boolean;
+    disabled?: boolean;
+    /** A free-text field. */
+    input?: boolean;
+    choices?: QuestionnaireChoice[];
+}
+/** One answer, as `change` and `submit` report it. */
+export interface QuestionnaireAnswer {
+    name: string;
+    /** `unanswered` when it was cleared. */
+    status: "answered" | "skipped" | "unanswered";
+    choices: string[];
+    text: string | null;
+}
+export interface QuestionnaireProps {
+    /** Setting different `items` starts over; the same ones again keep the answers. */
+    items?: QuestionnaireItem[];
+    class?: string;
+}
+export interface ListProps {
+    /** The selected row's `value`; one that is not among the rows selects nothing. */
+    value?: string;
+    /** The host only reports selections; the client confirms them with `value`. */
+    controlled?: boolean;
+    /** A search field above the rows: each edit sends `query`, and the client sends the matching rows. */
+    searchable?: boolean;
+    placeholder?: string;
+    /** Near the end, the list sends `loadMore` (once per row count). */
+    hasMore?: boolean;
+    /** How many rows before the end `loadMore` is sent; default 20. */
+    loadMoreThreshold?: number;
+    /** Shows a skeleton instead of the rows. */
+    loading?: boolean;
+    class?: string;
+}
+/** A screen reader reads a row by its `a11y.label` (PROTOCOL.md section 27). */
+export interface ListItemProps {
+    /** What the List's events report. Required: the host rejects a `ListItem` without it. */
+    value?: string;
+    /** Neither selected nor confirmed; the arrow keys pass over it. */
+    disabled?: boolean;
+}
+export interface DockProps {
+    class?: string;
+}
+export interface DockPanelProps {
+    /** The tab's text. */
+    title?: string;
+    /** Where the panel starts; read only when it is added (the layout is the user's after that). */
+    placement?: "center" | "left" | "right" | "bottom";
+    /** The tab offers to close it: `close` is sent, and the app removes the node. */
+    closable?: boolean;
+}
+/** A section of an `Accordion`; its children are the content. */
+export interface AccordionItemProps {
+    /** What the Accordion's `change` reports. Required: the host rejects an `AccordionItem` without it. */
+    id?: string;
+    title?: string;
+    /** The host keeps it in synced mode. */
+    open?: boolean;
+    disabled?: boolean;
+    class?: string;
+}
+/** A `Dialog`'s or `AlertDialog`'s footer instead of OK/Cancel; outside one it draws nothing. */
+export interface SlotProps {
+    class?: string;
+}
 export interface NodeProps {
     div: DivProps & SharedProps;
     text: TextProps & SharedProps;
@@ -796,6 +1230,40 @@ export interface NodeProps {
     Carousel: CarouselProps & SharedProps;
     Sidebar: SidebarProps & SharedProps;
     Chart: ChartProps & SharedProps;
+    Canvas: CanvasProps & SharedProps;
+    Command: CommandProps & SharedProps;
+    Settings: SettingsProps & SharedProps;
+    Toggle: ToggleProps & SharedProps;
+    DropdownButton: DropdownButtonProps & SharedProps;
+    Label: LabelProps & SharedProps;
+    Empty: EmptyProps & SharedProps;
+    Shimmer: ShimmerProps & SharedProps;
+    InputGroup: InputGroupProps & SharedProps;
+    Clipboard: ClipboardProps & SharedProps;
+    AlertDialog: AlertDialogProps & SharedProps;
+    Sheet: SheetProps & SharedProps;
+    Popover: PopoverProps & SharedProps;
+    HoverCard: HoverCardProps & SharedProps;
+    DatePicker: DatePickerProps & SharedProps;
+    TimeField: TimeFieldProps & SharedProps;
+    ColorPicker: ColorPickerProps & SharedProps;
+    Combobox: ComboboxProps & SharedProps;
+    Bubble: BubbleProps & SharedProps;
+    Message: MessageProps & SharedProps;
+    MessageHeader: MessagePartProps & SharedProps;
+    MessageFooter: MessagePartProps & SharedProps;
+    Marker: MarkerProps & SharedProps;
+    Attachment: AttachmentProps & SharedProps;
+    MessageScroller: MessageScrollerProps & SharedProps;
+    Questionnaire: QuestionnaireProps & SharedProps;
+    List: ListProps & SharedProps;
+    ListItem: ListItemProps & SharedProps;
+    Dock: DockProps & SharedProps;
+    DockPanel: DockPanelProps & SharedProps;
+    AccordionItem: AccordionItemProps & SharedProps;
+    DialogFooter: SlotProps & SharedProps;
+    StatusBarLeft: SlotProps & SharedProps;
+    StatusBarRight: SlotProps & SharedProps;
 }
 export interface NodeEvents {
     div: {
@@ -979,4 +1447,140 @@ export interface NodeEvents {
     };
     /** A chart has no events: the hover tooltip is the component's own. */
     Chart: {};
+    /** `value` is the point pressed, local to the canvas. */
+    Canvas: {
+        pointerDown: {
+            value: CanvasPoint;
+        };
+    };
+    /** `value` is the `id` of the entry confirmed (Enter or a click). */
+    Command: {
+        confirm: {
+            value: string;
+        };
+    };
+    /** `value` is the field set by the user and its new value. */
+    Settings: {
+        change: {
+            value: SettingsChange;
+        };
+    };
+    Toggle: {
+        change: {
+            checked: boolean;
+        };
+    };
+    /** `value` is the chosen item's `id`. */
+    DropdownButton: {
+        click: {};
+        menu: {
+            item: string;
+        };
+    };
+    Label: {};
+    Empty: {};
+    Shimmer: {};
+    InputGroup: {
+        change: {
+            value: string;
+        };
+        submit: {
+            value: string;
+        };
+    };
+    /** `value` is the text that was copied. */
+    Clipboard: {
+        copied: {
+            value: string;
+        };
+    };
+    /** OK and Cancel close it, as in a `Dialog`; it shows over an open one. */
+    AlertDialog: {
+        ok: {};
+        cancel: {};
+    };
+    /** The user closed the panel with its X, Escape or a click on the overlay. */
+    Sheet: {
+        close: {};
+    };
+    /** `checked` is true when it opened, false when it closed. */
+    Popover: {
+        change: {
+            checked: boolean;
+        };
+    };
+    /** The mouse is the only way in: no `open` and no `simulate`. */
+    HoverCard: {
+        change: {
+            checked: boolean;
+        };
+    };
+    /** `value` is the chosen day, `null` when cleared. */
+    DatePicker: {
+        change: {
+            value: string | null;
+        };
+    };
+    /** `value` is the time, `HH:MM[:SS]`; it has no empty state. */
+    TimeField: {
+        change: {
+            value: string;
+        };
+    };
+    /** `value` is the color, `null` when cleared. */
+    ColorPicker: {
+        change: {
+            value: string | null;
+        };
+    };
+    /** `value` is the whole selection: toggling one sends the full list. */
+    Combobox: {
+        change: {
+            value: string[];
+        };
+    };
+    Bubble: {};
+    Message: {};
+    MessageHeader: {};
+    MessageFooter: {};
+    Marker: {};
+    /** The card's controls exist only while their event is subscribed; `retry` only while `failed`. */
+    Attachment: {
+        click: {};
+        remove: {};
+        retry: {};
+    };
+    MessageScroller: {};
+    /** `change` sends one answer; `submit` all of them, in question order. */
+    Questionnaire: {
+        change: {
+            value: QuestionnaireAnswer;
+        };
+        submit: {
+            value: QuestionnaireAnswer[];
+        };
+    };
+    /** `change` sends the selected row's `value` (`null`: Escape); `query` the search text; `loadMore` nothing. */
+    List: {
+        change: {
+            value: string | null;
+        };
+        confirm: {
+            value: string;
+        };
+        query: {
+            value: string;
+        };
+        loadMore: {};
+    };
+    ListItem: {};
+    Dock: {};
+    /** `close`: the user closed the panel; it has left the layout. */
+    DockPanel: {
+        close: {};
+    };
+    AccordionItem: {};
+    DialogFooter: {};
+    StatusBarLeft: {};
+    StatusBarRight: {};
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gpui-bridge",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Node.js client for the gpui-bridge native UI host",
   "license": "MIT",
   "author": "gpui-bridge contributors",
@@ -29,9 +29,9 @@
     "node": ">=22.6"
   },
   "optionalDependencies": {
-    "@indios/gpui-bridge-darwin-arm64": "0.2.0",
-    "@indios/gpui-bridge-linux-x64": "0.2.0",
-    "@indios/gpui-bridge-win32-x64": "0.2.0"
+    "@indios/gpui-bridge-darwin-arm64": "0.3.0",
+    "@indios/gpui-bridge-linux-x64": "0.3.0",
+    "@indios/gpui-bridge-win32-x64": "0.3.0"
   },
   "devDependencies": {
     "@types/node": "^26.6.5",