@gtkx/cli 0.13.3 → 0.14.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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gtkx/cli",
-  "version": "0.13.3",
+  "version": "0.14.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/ffi": "0.14.0",
+    "@gtkx/mcp": "0.14.0",
+    "@gtkx/react": "0.14.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.14.0"
   },
   "peerDependencies": {
     "react": "^19",
-    "@gtkx/testing": "0.13.3"
+    "@gtkx/testing": "0.14.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>
@@ -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>

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.
 
@@ -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>
 ```
@@ -554,3 +569,47 @@ 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 * as GObject from "@gtkx/ffi/gobject";
+import { typeFromName } 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)}
+        />
+    );
+};
+
+const DropZone = () => {
+    const [dropped, setDropped] = useState<string | null>(null);
+    const stringType = typeFromName("gchararray");
+
+    return (
+        <GtkBox
+            dropTypes={[stringType]}
+            onDrop={(value: GObject.Value) => {
+                setDropped(value.getString());
+                return true;
+            }}
+        >
+            <GtkLabel label={dropped ?? "Drop here"} />
+        </GtkBox>
+    );
+};