@gtkx/cli 0.13.2 → 0.13.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gtkx/cli",
-  "version": "0.13.2",
+  "version": "0.13.3",
   "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/mcp": "0.13.3",
+    "@gtkx/ffi": "0.13.3",
+    "@gtkx/react": "0.13.3"
   },
   "devDependencies": {
     "@types/ejs": "^3.1.5",
     "@types/react-refresh": "^0.14.7",
     "memfs": "^4.51.1",
-    "@gtkx/testing": "0.13.2"
+    "@gtkx/testing": "0.13.3"
   },
   "peerDependencies": {
     "react": "^19",
-    "@gtkx/testing": "0.13.2"
+    "@gtkx/testing": "0.13.3"
   },
   "peerDependenciesMeta": {
     "@gtkx/testing": {

package/templates/claude/EXAMPLES.md.ejs

@@ -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

package/templates/claude/WIDGETS.md.ejs

@@ -512,6 +512,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 |