@gtkx/cli 0.13.3 → 0.15.0

package/dist/dev-server.d.ts

@@ -24,7 +24,7 @@ export type DevServerOptions = {
  * import { render } from "@gtkx/react";
  *
  * const server = await createDevServer({
- *   entry: "./src/dev.tsx",
+ * entry: "./src/dev.tsx",
  * });
  *
  * const mod = await server.ssrLoadModule("./src/dev.tsx");

package/dist/dev-server.js

@@ -21,7 +21,7 @@ import { swcSsrRefresh } from "./vite-plugin-swc-ssr-refresh.js";
  * import { render } from "@gtkx/react";
  *
  * const server = await createDevServer({
- *   entry: "./src/dev.tsx",
+ * entry: "./src/dev.tsx",
  * });
  *
  * const mod = await server.ssrLoadModule("./src/dev.tsx");

package/dist/mcp-client.js

@@ -1,5 +1,6 @@
 import * as net from "node:net";
 import { getNativeId, getNativeObject } from "@gtkx/ffi";
+import { Value } from "@gtkx/ffi/gobject";
 import * as Gtk from "@gtkx/ffi/gtk";
 import { DEFAULT_SOCKET_PATH, IpcRequestSchema, IpcResponseSchema, McpError, McpErrorCode, methodNotFoundError, widgetNotFoundError, } from "@gtkx/mcp";
 import { getApplication } from "@gtkx/react";
@@ -354,7 +355,28 @@ class McpClient {
                 if (!widget) {
                     throw widgetNotFoundError(p.widgetId);
                 }
-                const signalArgs = (p.args ?? []);
+                const signalArgs = (p.args ?? []).map((arg) => {
+                    switch (arg.type) {
+                        case "boolean":
+                            return Value.newFromBoolean(arg.value);
+                        case "int":
+                            return Value.newFromInt(arg.value);
+                        case "uint":
+                            return Value.newFromUint(arg.value);
+                        case "int64":
+                            return Value.newFromInt64(arg.value);
+                        case "uint64":
+                            return Value.newFromUint64(arg.value);
+                        case "float":
+                            return Value.newFromFloat(arg.value);
+                        case "double":
+                            return Value.newFromDouble(arg.value);
+                        case "string":
+                            return Value.newFromString(arg.value);
+                        default:
+                            throw new McpError(McpErrorCode.INVALID_REQUEST, `Unknown argument type: ${arg.type}`);
+                    }
+                });
                 await testing.fireEvent(widget, p.signal, ...signalArgs);
                 return { success: true };
             }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gtkx/cli",
-  "version": "0.13.3",
+  "version": "0.15.0",
   "description": "CLI for GTKX - create and develop GTK4 React applications",
   "keywords": [
     "gtkx",
@@ -58,19 +58,19 @@
     "ejs": "^3.1.10",
     "react-refresh": "^0.18.0",
     "vite": "^7.3.1",
-    "@gtkx/mcp": "0.13.3",
-    "@gtkx/ffi": "0.13.3",
-    "@gtkx/react": "0.13.3"
+    "@gtkx/mcp": "0.15.0",
+    "@gtkx/react": "0.15.0",
+    "@gtkx/ffi": "0.15.0"
   },
   "devDependencies": {
     "@types/ejs": "^3.1.5",
     "@types/react-refresh": "^0.14.7",
     "memfs": "^4.51.1",
-    "@gtkx/testing": "0.13.3"
+    "@gtkx/testing": "0.15.0"
   },
   "peerDependencies": {
     "react": "^19",
-    "@gtkx/testing": "0.13.3"
+    "@gtkx/testing": "0.15.0"
   },
   "peerDependenciesMeta": {
     "@gtkx/testing": {

package/templates/claude/EXAMPLES.md.ejs

@@ -127,14 +127,14 @@ const TodoList = () => {
 
     return (
         <GtkBox orientation={Gtk.Orientation.VERTICAL} spacing={12} marginStart={16} marginEnd={16} marginTop={16} marginBottom={16}>
-            <GtkBox orientation={Gtk.Orientation.HORIZONTAL} spacing={8}>
+            <GtkBox spacing={8}>
                 <GtkEntry text={input} onChanged={(e) => setInput(e.getText())} hexpand placeholderText="New todo..." />
                 <GtkButton label="Add" onClicked={addTodo} cssClasses={["suggested-action"]} />
             </GtkBox>
             <GtkScrolledWindow vexpand cssClasses={["card"]}>
                 <x.ListView<Todo>
                     renderItem={(todo) => (
-                        <GtkBox orientation={Gtk.Orientation.HORIZONTAL} spacing={8} marginStart={12} marginEnd={12} marginTop={8} marginBottom={8}>
+                        <GtkBox spacing={8} marginStart={12} marginEnd={12} marginTop={8} marginBottom={8}>
                             <GtkLabel label={todo?.text ?? ""} hexpand halign={Gtk.Align.START} />
                             <GtkButton iconName="edit-delete-symbolic" cssClasses={["flat"]} onClicked={() => todo && deleteTodo(todo.id)} />
                         </GtkBox>
@@ -176,7 +176,7 @@ const SidebarNav = () => {
     const [currentPage, setCurrentPage] = useState("home");
 
     return (
-        <GtkPaned orientation={Gtk.Orientation.HORIZONTAL} position={200}>
+        <GtkPaned position={200}>
             <x.Slot for={GtkPaned} id="startChild">
                 <GtkScrolledWindow cssClasses={["sidebar"]}>
                     <x.ListView<Page>
@@ -287,7 +287,7 @@ const SettingsPage = () => {
                     <AdwExpanderRow title="Notification Settings" subtitle="Configure alerts">
                         <AdwSwitchRow title="Sound" active />
                         <AdwSwitchRow title="Badges" active />
-                        <AdwSwitchRow title="Lock Screen" active={false} />
+                        <AdwSwitchRow title="Lock Screen" />
                     </AdwExpanderRow>
                 </AdwPreferencesGroup>
             </AdwPreferencesPage>
@@ -339,7 +339,7 @@ const FileTable = () => {
 
     return (
         <GtkScrolledWindow vexpand cssClasses={["card"]}>
-            <GtkColumnView estimatedRowHeight={48} sortColumn={sortColumn} sortOrder={sortOrder} onSortChange={handleSort}>
+            <GtkColumnView estimatedRowHeight={48} sortColumn={sortColumn} sortOrder={sortOrder} onSortChanged={handleSort}>
                 <x.ColumnViewColumn<FileItem> title="Name" id="name" expand sortable renderCell={(f) => <GtkLabel label={f?.name ?? ""} />} />
                 <x.ColumnViewColumn<FileItem> title="Size" id="size" fixedWidth={100} sortable renderCell={(f) => <GtkLabel label={`${f?.size ?? 0} KB`} />} />
                 <x.ColumnViewColumn<FileItem> title="Modified" id="modified" fixedWidth={120} sortable renderCell={(f) => <GtkLabel label={f?.modified ?? ""} />} />
@@ -668,7 +668,7 @@ const FileBrowser = () => {
                 selected={selected ? [selected] : []}
                 onSelectionChanged={(ids) => setSelected(ids[0] ?? null)}
                 renderItem={(item) => (
-                    <GtkBox orientation={Gtk.Orientation.HORIZONTAL} spacing={8}>
+                    <GtkBox spacing={8}>
                         <GtkImage iconName={item?.isDirectory ? "folder-symbolic" : "text-x-generic-symbolic"} />
                         <GtkLabel label={item?.name ?? ""} halign={Gtk.Align.START} />
                     </GtkBox>
@@ -701,7 +701,15 @@ const ViewSwitcher = () => {
 
     return (
         <GtkBox orientation={Gtk.Orientation.VERTICAL} spacing={12}>
-            <AdwToggleGroup active={view} onToggled={setView} halign={Gtk.Align.CENTER}>
+            <AdwToggleGroup
+                activeName={view}
+                onNotify={(group, prop) => {
+                    if (prop === "active-name") {
+                        setView(group.getActiveName() ?? "list");
+                    }
+                }}
+                halign={Gtk.Align.CENTER}
+            >
                 <x.Toggle id="list" iconName="view-list-symbolic" tooltip="List view" />
                 <x.Toggle id="grid" iconName="view-grid-symbolic" tooltip="Grid view" />
             </AdwToggleGroup>

package/templates/claude/SKILL.md.ejs

@@ -52,7 +52,7 @@ GTK signals map to `on<SignalName>` props: `clicked` → `onClicked`, `toggled`
 Some widgets require children in specific slots:
 
 ```tsx
-<GtkPaned orientation={Gtk.Orientation.HORIZONTAL}>
+<GtkPaned>
     <x.Slot for={GtkPaned} id="startChild"><Sidebar /></x.Slot>
     <x.Slot for={GtkPaned} id="endChild"><Content /></x.Slot>
 </GtkPaned>

package/templates/claude/WIDGETS.md.ejs

@@ -20,7 +20,7 @@
 Linear layout (horizontal or vertical).
 
 ```tsx
-<GtkBox orientation={Gtk.Orientation.VERTICAL} spacing={12} homogeneous={false}>
+<GtkBox orientation={Gtk.Orientation.VERTICAL} spacing={12}>
     {children}
 </GtkBox>
 ```
@@ -68,7 +68,7 @@ Custom tab widget:
 ```tsx
 <x.NotebookPage>
     <x.NotebookPageTab>
-        <GtkBox orientation={Gtk.Orientation.HORIZONTAL} spacing={4}>
+        <GtkBox spacing={4}>
             <GtkImage iconName="folder-symbolic" />
             <GtkLabel label="Files" />
         </GtkBox>
@@ -81,7 +81,7 @@ Custom tab widget:
 Resizable split with draggable divider. **Requires Slot components.**
 
 ```tsx
-<GtkPaned orientation={Gtk.Orientation.HORIZONTAL} position={280} shrinkStartChild={false}>
+<GtkPaned position={280} shrinkStartChild={false}>
     <x.Slot for={GtkPaned} id="startChild"><Sidebar /></x.Slot>
     <x.Slot for={GtkPaned} id="endChild"><MainContent /></x.Slot>
 </GtkPaned>
@@ -99,6 +99,22 @@ Stack widgets on top of each other. First child is base layer, additional childr
 </GtkOverlay>
 ```
 
+### GtkFixed
+Absolute positioning. Use `x.FixedChild` wrapper for children.
+
+```tsx
+<GtkFixed>
+    <x.FixedChild x={20} y={30}>
+        <GtkLabel label="Top Left" />
+    </x.FixedChild>
+    <x.FixedChild x={200} y={100}>
+        <GtkLabel label="Middle" />
+    </x.FixedChild>
+</GtkFixed>
+```
+
+**FixedChild props:** `x`, `y` (pixel coordinates)
+
 ### GtkScrolledWindow
 Scrollable container.
 
@@ -153,7 +169,7 @@ Grid-based virtual scrolling.
 Table with sortable columns.
 
 ```tsx
-<GtkColumnView estimatedRowHeight={48} sortColumn="name" sortOrder={Gtk.SortType.ASCENDING} onSortChange={handleSort}>
+<GtkColumnView estimatedRowHeight={48} sortColumn="name" sortOrder={Gtk.SortType.ASCENDING} onSortChanged={handleSort}>
     <x.ColumnViewColumn<Item>
         title="Name"
         id="name"
@@ -193,7 +209,7 @@ Hierarchical tree with expand/collapse.
     selected={selectedId ? [selectedId] : []}
     onSelectionChanged={(ids) => setSelectedId(ids[0])}
     renderItem={(item, row) => (
-        <GtkBox orientation={Gtk.Orientation.HORIZONTAL} spacing={8}>
+        <GtkBox spacing={8}>
             <GtkImage iconName={item?.isDirectory ? "folder-symbolic" : "text-x-generic-symbolic"} />
             <GtkLabel label={item?.name ?? ""} />
         </GtkBox>
@@ -256,7 +272,6 @@ Slider with optional marks.
 
 ```tsx
 <GtkScale
-    orientation={Gtk.Orientation.HORIZONTAL}
     drawValue
     valuePos={Gtk.PositionType.TOP}
 >
@@ -466,7 +481,7 @@ Expandable settings row with optional action widget.
     </x.ExpanderRowAction>
     <x.ExpanderRowRow>
         <AdwSwitchRow title="Option 1" active />
-        <AdwSwitchRow title="Option 2" active={false} />
+        <AdwSwitchRow title="Option 2" />
     </x.ExpanderRowRow>
 </AdwExpanderRow>
 ```
@@ -485,7 +500,16 @@ Input in list row.
 Segmented button group for mutually exclusive options.
 
 ```tsx
-<AdwToggleGroup active={viewMode} onToggled={setViewMode}>
+const [viewMode, setViewMode] = useState("list");
+
+<AdwToggleGroup
+    activeName={viewMode}
+    onNotify={(group, prop) => {
+        if (prop === "active-name") {
+            setViewMode(group.getActiveName() ?? "list");
+        }
+    }}
+>
     <x.Toggle id="list" iconName="view-list-symbolic" tooltip="List view" />
     <x.Toggle id="grid" iconName="view-grid-symbolic" tooltip="Grid view" />
     <x.Toggle id="flow" label="Flow" />
@@ -554,3 +578,192 @@ const [selected, setSelected] = useState(items[0]);
 | `AdwSpinner` | Loading indicator |
 | `AdwWindowTitle` | Title + subtitle for header bars |
 | `AdwButtonRow` | Button styled as list row |
+
+---
+
+## Drag and Drop
+
+All widgets support drag-and-drop through props. Use `onDragPrepare`, `onDragBegin`, and `onDragEnd` to make a widget draggable, and `dropTypes`, `onDrop`, `onDropEnter`, and `onDropLeave` to accept drops.
+
+```tsx
+import * as Gdk from "@gtkx/ffi/gdk";
+import { Type, Value } from "@gtkx/ffi/gobject";
+import { GtkButton, GtkBox, GtkLabel } from "@gtkx/react";
+import { useState } from "react";
+
+const DraggableButton = ({ label }: { label: string }) => {
+    return (
+        <GtkButton
+            label={label}
+            onDragPrepare={() => Gdk.ContentProvider.newForValue(Value.newFromString(label))}
+        />
+    );
+};
+
+const DropZone = () => {
+    const [dropped, setDropped] = useState<string | null>(null);
+
+    return (
+        <GtkBox
+            dropTypes={[Type.STRING]}
+            onDrop={(value: Value) => {
+                setDropped(value.getString());
+                return true;
+            }}
+        >
+            <GtkLabel label={dropped ?? "Drop here"} />
+        </GtkBox>
+    );
+};
+```
+
+## GValue Factories
+
+Create typed values for drag-and-drop and signal emission:
+
+| Factory                        | Description                   |
+| ------------------------------ | ----------------------------- |
+| `Value.newFromString(str)`     | String values                 |
+| `Value.newFromDouble(num)`     | 64-bit floating point         |
+| `Value.newFromInt(num)`        | 32-bit signed integer         |
+| `Value.newFromBoolean(bool)`   | Boolean values                |
+| `Value.newFromObject(obj)`     | GObject instances             |
+| `Value.newFromBoxed(boxed)`    | Boxed types (Gdk.RGBA, etc.)  |
+| `Value.newFromEnum(gtype, n)`  | Enum values (requires GType)  |
+| `Value.newFromFlags(gtype, n)` | Flags values (requires GType) |
+
+Type constants for `dropTypes`: `Type.STRING`, `Type.INT`, `Type.DOUBLE`, `Type.BOOLEAN`, `Type.OBJECT`.
+
+## Custom Drawing
+
+Render custom graphics with `GtkDrawingArea` using the `onDraw` callback:
+
+```tsx
+import { GtkDrawingArea } from "@gtkx/react";
+import type { Context } from "@gtkx/ffi/cairo";
+import * as Gtk from "@gtkx/ffi/gtk";
+
+const Canvas = () => {
+    const handleDraw = (self: Gtk.DrawingArea, cr: Context, width: number, height: number) => {
+        cr.setSourceRgb(0.2, 0.4, 0.8);
+        cr.rectangle(10, 10, width - 20, height - 20);
+        cr.fill();
+    };
+
+    return <GtkDrawingArea contentWidth={400} contentHeight={300} onDraw={handleDraw} />;
+};
+```
+
+Use `onGestureDragBegin`, `onGestureDragUpdate`, `onGestureDragEnd` for interactive drawing. Call `widget.queueDraw()` to trigger redraws.
+
+## Adjustment
+
+Configure adjustable widgets declaratively with `x.Adjustment`:
+
+```tsx
+import { x, GtkScale, GtkBox, GtkLabel } from "@gtkx/react";
+import * as Gtk from "@gtkx/ffi/gtk";
+import { useState } from "react";
+
+const VolumeControl = () => {
+    const [volume, setVolume] = useState(50);
+
+    return (
+        <GtkBox orientation={Gtk.Orientation.VERTICAL} spacing={12}>
+            <GtkScale drawValue hexpand>
+                <x.Adjustment value={volume} lower={0} upper={100} stepIncrement={1} pageIncrement={10} onValueChanged={setVolume} />
+            </GtkScale>
+            <GtkLabel label={`Volume: ${Math.round(volume)}%`} />
+        </GtkBox>
+    );
+};
+```
+
+Works with `GtkScale`, `GtkScrollbar`, `GtkScaleButton`, `GtkSpinButton`, `GtkListBox`.
+
+**Props:** `value`, `lower`, `upper`, `stepIncrement`, `pageIncrement`, `pageSize`, `onValueChanged`
+
+## TextBuffer
+
+Configure `GtkTextView` buffers declaratively with `x.TextBuffer`:
+
+```tsx
+import { x, GtkTextView, GtkScrolledWindow } from "@gtkx/react";
+import * as Gtk from "@gtkx/ffi/gtk";
+import { useState } from "react";
+
+const TextEditor = () => {
+    const [text, setText] = useState("Hello, World!");
+
+    return (
+        <GtkScrolledWindow minContentHeight={200}>
+            <GtkTextView wrapMode={Gtk.WrapMode.WORD_CHAR}>
+                <x.TextBuffer text={text} enableUndo onTextChanged={setText} />
+            </GtkTextView>
+        </GtkScrolledWindow>
+    );
+};
+```
+
+**Props:** `text`, `enableUndo`, `onTextChanged`, `onCanUndoChanged`, `onCanRedoChanged`
+
+## SourceBuffer
+
+Configure `GtkSourceView` buffers with syntax highlighting using `x.SourceBuffer`:
+
+```tsx
+import { x, GtkSourceView, GtkScrolledWindow } from "@gtkx/react";
+import { useState } from "react";
+
+const CodeEditor = () => {
+    const [code, setCode] = useState('console.log("Hello!");');
+
+    return (
+        <GtkScrolledWindow minContentHeight={300}>
+            <GtkSourceView showLineNumbers highlightCurrentLine tabWidth={4}>
+                <x.SourceBuffer
+                    text={code}
+                    language="typescript"
+                    styleScheme="Adwaita-dark"
+                    highlightSyntax
+                    highlightMatchingBrackets
+                    enableUndo
+                    onTextChanged={setCode}
+                />
+            </GtkSourceView>
+        </GtkScrolledWindow>
+    );
+};
+```
+
+**Props:** `text`, `language`, `styleScheme`, `highlightSyntax`, `highlightMatchingBrackets`, `enableUndo`, `onTextChanged`, `onCanUndoChanged`, `onCanRedoChanged`, `onCursorMoved`
+
+## Keyboard Shortcuts
+
+Attach shortcuts with `x.ShortcutController` and `x.Shortcut`:
+
+```tsx
+import { x, GtkBox, GtkLabel } from "@gtkx/react";
+import * as Gtk from "@gtkx/ffi/gtk";
+import { useState } from "react";
+
+const App = () => {
+    const [count, setCount] = useState(0);
+
+    return (
+        <GtkBox orientation={Gtk.Orientation.VERTICAL} spacing={12} focusable>
+            <x.ShortcutController scope={Gtk.ShortcutScope.LOCAL}>
+                <x.Shortcut trigger="<Control>equal" onActivate={() => setCount((c) => c + 1)} />
+                <x.Shortcut trigger="<Control>minus" onActivate={() => setCount((c) => c - 1)} />
+            </x.ShortcutController>
+            <GtkLabel label={`Count: ${count}`} />
+        </GtkBox>
+    );
+};
+```
+
+**Scopes:** `LOCAL` (widget focus), `MANAGED` (parent managed), `GLOBAL` (window-wide)
+
+**Trigger syntax:** `<Control>s`, `<Control><Shift>s`, `<Alt>F4`, `<Primary>q`, `F5`
+
+**Multiple triggers:** `trigger={["F5", "<Control>r"]}`