@gtkx/cli 0.13.2 → 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.2",
+  "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/ffi": "0.13.2",
-    "@gtkx/mcp": "0.13.2",
-    "@gtkx/react": "0.13.2"
+    "@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.2"
+    "@gtkx/testing": "0.14.0"
   },
   "peerDependencies": {
     "react": "^19",
-    "@gtkx/testing": "0.13.2"
+    "@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>
@@ -549,6 +549,85 @@ const NavigationDemo = () => {
 
 ---
 
+## Sidebar/Content Split with AdwNavigationSplitView
+
+```tsx
+import * as Gtk from "@gtkx/ffi/gtk";
+import {
+    AdwActionRow,
+    AdwApplicationWindow,
+    AdwHeaderBar,
+    AdwNavigationSplitView,
+    AdwToolbarView,
+    GtkBox,
+    GtkImage,
+    GtkLabel,
+    GtkListBox,
+    GtkScrolledWindow,
+    quit,
+    x,
+} from "@gtkx/react";
+import { useState } from "react";
+
+interface Item {
+    id: string;
+    title: string;
+    icon: string;
+}
+
+const items: Item[] = [
+    { id: "inbox", title: "Inbox", icon: "mail-unread-symbolic" },
+    { id: "starred", title: "Starred", icon: "starred-symbolic" },
+    { id: "sent", title: "Sent", icon: "mail-send-symbolic" },
+];
+
+const SplitViewDemo = () => {
+    const [selected, setSelected] = useState(items[0]);
+
+    return (
+        <AdwApplicationWindow title="Split View Demo" defaultWidth={800} defaultHeight={500} onClose={quit}>
+            <AdwNavigationSplitView sidebarWidthFraction={0.33} minSidebarWidth={200} maxSidebarWidth={300}>
+                <x.NavigationPage id="sidebar" title="Mail">
+                    <AdwToolbarView>
+                        <x.ToolbarTop><AdwHeaderBar /></x.ToolbarTop>
+                        <GtkScrolledWindow vexpand>
+                            <GtkListBox
+                                cssClasses={["navigation-sidebar"]}
+                                onRowSelected={(_, row) => {
+                                    if (!row) return;
+                                    const item = items[row.getIndex()];
+                                    if (item) setSelected(item);
+                                }}
+                            >
+                                {items.map((item) => (
+                                    <AdwActionRow key={item.id} title={item.title}>
+                                        <x.ActionRowPrefix>
+                                            <GtkImage iconName={item.icon} />
+                                        </x.ActionRowPrefix>
+                                    </AdwActionRow>
+                                ))}
+                            </GtkListBox>
+                        </GtkScrolledWindow>
+                    </AdwToolbarView>
+                </x.NavigationPage>
+
+                <x.NavigationPage id="content" title={selected?.title ?? ""}>
+                    <AdwToolbarView>
+                        <x.ToolbarTop><AdwHeaderBar /></x.ToolbarTop>
+                        <GtkBox orientation={Gtk.Orientation.VERTICAL} spacing={12} halign={Gtk.Align.CENTER} valign={Gtk.Align.CENTER} vexpand>
+                            <GtkImage iconName={selected?.icon ?? ""} iconSize={Gtk.IconSize.LARGE} />
+                            <GtkLabel label={selected?.title ?? ""} cssClasses={["title-2"]} />
+                        </GtkBox>
+                    </AdwToolbarView>
+                </x.NavigationPage>
+            </AdwNavigationSplitView>
+        </AdwApplicationWindow>
+    );
+};
+```
+
+---
+
 ## File Browser with TreeListView
 
 ```tsx
@@ -589,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>
 ```
@@ -512,6 +527,39 @@ const [history, setHistory] = useState(["home"]);
 
 **NavigationPage props:** `id` (required), `title`, `canPop`. Control navigation via `history` array.
 
+### AdwNavigationSplitView
+Sidebar/content split layout for master-detail interfaces.
+
+```tsx
+const [selected, setSelected] = useState(items[0]);
+
+<AdwNavigationSplitView sidebarWidthFraction={0.33} minSidebarWidth={200} maxSidebarWidth={300}>
+    <x.NavigationPage id="sidebar" title="Sidebar">
+        <AdwToolbarView>
+            <x.ToolbarTop><AdwHeaderBar /></x.ToolbarTop>
+            <GtkListBox cssClasses={["navigation-sidebar"]} onRowSelected={(_, row) => {
+                if (!row) return;
+                const item = items[row.getIndex()];
+                if (item) setSelected(item);
+            }}>
+                {items.map((item) => <AdwActionRow key={item.id} title={item.title} />)}
+            </GtkListBox>
+        </AdwToolbarView>
+    </x.NavigationPage>
+
+    <x.NavigationPage id="content" title={selected?.title ?? ""}>
+        <AdwToolbarView>
+            <x.ToolbarTop><AdwHeaderBar /></x.ToolbarTop>
+            <GtkLabel label={selected?.title ?? ""} />
+        </AdwToolbarView>
+    </x.NavigationPage>
+</AdwNavigationSplitView>
+```
+
+**Props:** `sidebarWidthFraction`, `minSidebarWidth`, `maxSidebarWidth`, `collapsed`, `showContent`.
+**NavigationPage slots:** Use `id="sidebar"` for left pane, `id="content"` for right pane.
+**Selection:** Use `GtkListBox` with `onRowSelected` (single click) not `onRowActivated` (double click).
+
 ### Other Adwaita Widgets
 
 | Widget | Description |
@@ -521,3 +569,47 @@ const [history, setHistory] = useState(["home"]);
 | `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>
+    );
+};