@gtkx/cli 0.14.0 → 0.15.0

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.14.0",
+  "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/ffi": "0.14.0",
-    "@gtkx/mcp": "0.14.0",
-    "@gtkx/react": "0.14.0"
+    "@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.14.0"
+    "@gtkx/testing": "0.15.0"
   },
   "peerDependencies": {
     "react": "^19",
-    "@gtkx/testing": "0.14.0"
+    "@gtkx/testing": "0.15.0"
   },
   "peerDependenciesMeta": {
     "@gtkx/testing": {

package/templates/claude/EXAMPLES.md.ejs

@@ -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 ?? ""} />} />
@@ -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/WIDGETS.md.ejs

@@ -169,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"
@@ -500,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" />
@@ -578,33 +587,26 @@ All widgets support drag-and-drop through props. Use `onDragPrepare`, `onDragBeg
 
 ```tsx
 import * as Gdk from "@gtkx/ffi/gdk";
-import * as GObject from "@gtkx/ffi/gobject";
-import { typeFromName } from "@gtkx/ffi/gobject";
+import { Type, Value } from "@gtkx/ffi/gobject";
 import { GtkButton, GtkBox, GtkLabel } from "@gtkx/react";
 import { useState } from "react";
 
 const DraggableButton = ({ label }: { label: string }) => {
-    const stringType = typeFromName("gchararray");
-    const value = new GObject.Value();
-    value.init(stringType);
-    value.setString(label);
-
     return (
         <GtkButton
             label={label}
-            onDragPrepare={() => Gdk.ContentProvider.newForValue(value)}
+            onDragPrepare={() => Gdk.ContentProvider.newForValue(Value.newFromString(label))}
         />
     );
 };
 
 const DropZone = () => {
     const [dropped, setDropped] = useState<string | null>(null);
-    const stringType = typeFromName("gchararray");
 
     return (
         <GtkBox
-            dropTypes={[stringType]}
-            onDrop={(value: GObject.Value) => {
+            dropTypes={[Type.STRING]}
+            onDrop={(value: Value) => {
                 setDropped(value.getString());
                 return true;
             }}
@@ -613,3 +615,155 @@ const DropZone = () => {
         </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"]}`