@gtkx/cli 0.13.0 → 0.13.2

package/package.json

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

package/templates/claude/EXAMPLES.md.ejs

@@ -497,3 +497,144 @@ const CardDemo = () => (
     </GtkBox>
 );
 ```
+
+---
+
+## Navigation with AdwNavigationView
+
+```tsx
+import * as Gtk from "@gtkx/ffi/gtk";
+import {
+    AdwApplicationWindow,
+    AdwHeaderBar,
+    AdwNavigationView,
+    AdwToolbarView,
+    GtkBox,
+    GtkButton,
+    GtkLabel,
+    quit,
+    x,
+} from "@gtkx/react";
+import { useState } from "react";
+
+const NavigationDemo = () => {
+    const [history, setHistory] = useState(["home"]);
+
+    const push = (page: string) => setHistory([...history, page]);
+    const pop = () => setHistory(history.slice(0, -1));
+
+    return (
+        <AdwApplicationWindow title="Navigation Demo" defaultWidth={600} defaultHeight={400} onClose={quit}>
+            <AdwNavigationView history={history} onHistoryChanged={setHistory}>
+                <x.NavigationPage id="home" title="Home">
+                    <AdwToolbarView>
+                        <x.ToolbarTop><AdwHeaderBar /></x.ToolbarTop>
+                        <GtkBox orientation={Gtk.Orientation.VERTICAL} spacing={12} halign={Gtk.Align.CENTER} valign={Gtk.Align.CENTER}>
+                            <GtkLabel label="Welcome!" cssClasses={["title-1"]} />
+                            <GtkButton label="Go to Settings" onClicked={() => push("settings")} cssClasses={["suggested-action"]} />
+                        </GtkBox>
+                    </AdwToolbarView>
+                </x.NavigationPage>
+                <x.NavigationPage id="settings" title="Settings" canPop>
+                    <AdwToolbarView>
+                        <x.ToolbarTop><AdwHeaderBar /></x.ToolbarTop>
+                        <GtkLabel label="Settings page content" vexpand />
+                    </AdwToolbarView>
+                </x.NavigationPage>
+            </AdwNavigationView>
+        </AdwApplicationWindow>
+    );
+};
+```
+
+---
+
+## File Browser with TreeListView
+
+```tsx
+import * as Gtk from "@gtkx/ffi/gtk";
+import { GtkBox, GtkImage, GtkLabel, GtkScrolledWindow, x } from "@gtkx/react";
+import { useState } from "react";
+
+interface FileNode {
+    id: string;
+    name: string;
+    isDirectory: boolean;
+    children?: FileNode[];
+}
+
+const files: FileNode[] = [
+    {
+        id: "src",
+        name: "src",
+        isDirectory: true,
+        children: [
+            { id: "src/app.tsx", name: "app.tsx", isDirectory: false },
+            { id: "src/index.tsx", name: "index.tsx", isDirectory: false },
+        ],
+    },
+    { id: "package.json", name: "package.json", isDirectory: false },
+];
+
+const FileBrowser = () => {
+    const [selected, setSelected] = useState<string | null>(null);
+
+    return (
+        <GtkScrolledWindow vexpand cssClasses={["card"]}>
+            <x.TreeListView<FileNode>
+                estimatedItemHeight={36}
+                vexpand
+                autoexpand={false}
+                selectionMode={Gtk.SelectionMode.SINGLE}
+                selected={selected ? [selected] : []}
+                onSelectionChanged={(ids) => setSelected(ids[0] ?? null)}
+                renderItem={(item) => (
+                    <GtkBox orientation={Gtk.Orientation.HORIZONTAL} spacing={8}>
+                        <GtkImage iconName={item?.isDirectory ? "folder-symbolic" : "text-x-generic-symbolic"} />
+                        <GtkLabel label={item?.name ?? ""} halign={Gtk.Align.START} />
+                    </GtkBox>
+                )}
+            >
+                {files.map((file) => (
+                    <x.TreeListItem key={file.id} id={file.id} value={file}>
+                        {file.children?.map((child) => (
+                            <x.TreeListItem key={child.id} id={child.id} value={child} />
+                        ))}
+                    </x.TreeListItem>
+                ))}
+            </x.TreeListView>
+        </GtkScrolledWindow>
+    );
+};
+```
+
+---
+
+## Toggle Group View Switcher
+
+```tsx
+import * as Gtk from "@gtkx/ffi/gtk";
+import { AdwToggleGroup, GtkBox, GtkLabel, GtkStack, x } from "@gtkx/react";
+import { useState } from "react";
+
+const ViewSwitcher = () => {
+    const [view, setView] = useState("list");
+
+    return (
+        <GtkBox orientation={Gtk.Orientation.VERTICAL} spacing={12}>
+            <AdwToggleGroup active={view} onToggled={setView} 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>
+            <GtkStack page={view} vexpand>
+                <x.StackPage id="list">
+                    <GtkLabel label="List View Content" />
+                </x.StackPage>
+                <x.StackPage id="grid">
+                    <GtkLabel label="Grid View Content" />
+                </x.StackPage>
+            </GtkStack>
+        </GtkBox>
+    );
+};
+```

package/templates/claude/WIDGETS.md.ejs

@@ -181,6 +181,36 @@ Selection dropdown.
 </GtkDropDown>
 ```
 
+### TreeListView
+Hierarchical tree with expand/collapse.
+
+```tsx
+<x.TreeListView<FileNode>
+    estimatedItemHeight={48}
+    vexpand
+    autoexpand={false}
+    selectionMode={Gtk.SelectionMode.SINGLE}
+    selected={selectedId ? [selectedId] : []}
+    onSelectionChanged={(ids) => setSelectedId(ids[0])}
+    renderItem={(item, row) => (
+        <GtkBox orientation={Gtk.Orientation.HORIZONTAL} spacing={8}>
+            <GtkImage iconName={item?.isDirectory ? "folder-symbolic" : "text-x-generic-symbolic"} />
+            <GtkLabel label={item?.name ?? ""} />
+        </GtkBox>
+    )}
+>
+    {files.map(file => (
+        <x.TreeListItem key={file.id} id={file.id} value={file}>
+            {file.children?.map(child => (
+                <x.TreeListItem key={child.id} id={child.id} value={child} />
+            ))}
+        </x.TreeListItem>
+    ))}
+</x.TreeListView>
+```
+
+**TreeListItem props:** `id`, `value`, `indentForDepth`, `indentForIcon`, `hideExpander`, nested `children`
+
 ---
 
 ## Inputs
@@ -221,6 +251,44 @@ Numeric input with increment/decrement.
 <GtkSpinButton value={count} onValueChanged={(sb) => setCount(sb.getValue())} />
 ```
 
+### GtkScale
+Slider with optional marks.
+
+```tsx
+<GtkScale
+    orientation={Gtk.Orientation.HORIZONTAL}
+    drawValue
+    valuePos={Gtk.PositionType.TOP}
+>
+    <x.ScaleMark value={0} label="Min" />
+    <x.ScaleMark value={50} />
+    <x.ScaleMark value={100} label="Max" />
+</GtkScale>
+```
+
+**ScaleMark props:** `value` (required), `position`, `label`
+
+### GtkCalendar
+Date picker with markable days.
+
+```tsx
+<GtkCalendar onDaySelected={(cal) => setDate(cal.getDate())}>
+    <x.CalendarMark day={15} />
+    <x.CalendarMark day={20} />
+</GtkCalendar>
+```
+
+### GtkLevelBar
+Progress/level indicator with customizable thresholds.
+
+```tsx
+<GtkLevelBar value={0.6}>
+    <x.LevelBarOffset id="low" value={0.25} />
+    <x.LevelBarOffset id="high" value={0.75} />
+    <x.LevelBarOffset id="full" value={1.0} />
+</GtkLevelBar>
+```
+
 ---
 
 ## Display
@@ -375,24 +443,36 @@ Settings UI.
     <AdwPreferencesGroup title="Appearance" description="Customize look">
         <AdwSwitchRow title="Dark Mode" active={dark} onActivated={() => setDark(!dark)} />
         <AdwActionRow title="Theme" subtitle="Select color">
-            <x.Slot for={AdwActionRow} id="activatableWidget">
+            <x.ActionRowPrefix>
+                <GtkImage iconName="preferences-color-symbolic" />
+            </x.ActionRowPrefix>
+            <x.ActionRowSuffix>
                 <GtkImage iconName="go-next-symbolic" valign={Gtk.Align.CENTER} />
-            </x.Slot>
+            </x.ActionRowSuffix>
         </AdwActionRow>
     </AdwPreferencesGroup>
 </AdwPreferencesPage>
 ```
 
+**ActionRow children:** Use `x.ActionRowPrefix` for left widgets, `x.ActionRowSuffix` for right widgets, or `x.Slot for={AdwActionRow} id="activatableWidget"` for clickable suffix.
+
 ### AdwExpanderRow
-Expandable settings row.
+Expandable settings row with optional action widget.
 
 ```tsx
 <AdwExpanderRow title="Advanced" subtitle="More options">
-    <AdwSwitchRow title="Option 1" active />
-    <AdwSwitchRow title="Option 2" active={false} />
+    <x.ExpanderRowAction>
+        <GtkButton iconName="emblem-system-symbolic" cssClasses={["flat"]} />
+    </x.ExpanderRowAction>
+    <x.ExpanderRowRow>
+        <AdwSwitchRow title="Option 1" active />
+        <AdwSwitchRow title="Option 2" active={false} />
+    </x.ExpanderRowRow>
 </AdwExpanderRow>
 ```
 
+**ExpanderRow slots:** `x.ExpanderRowRow` for nested rows, `x.ExpanderRowAction` for header action widget. Direct children also work for simple cases.
+
 ### AdwEntryRow / AdwPasswordEntryRow
 Input in list row.
 
@@ -401,6 +481,37 @@ Input in list row.
 <AdwPasswordEntryRow title="Password" />
 ```
 
+### AdwToggleGroup
+Segmented button group for mutually exclusive options.
+
+```tsx
+<AdwToggleGroup active={viewMode} onToggled={setViewMode}>
+    <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" />
+</AdwToggleGroup>
+```
+
+**Toggle props:** `id` (optional), `label`, `iconName`, `tooltip`, `enabled`
+
+### AdwNavigationView
+Stack-based navigation with history.
+
+```tsx
+const [history, setHistory] = useState(["home"]);
+
+<AdwNavigationView history={history} onHistoryChanged={setHistory}>
+    <x.NavigationPage id="home" title="Home">
+        <GtkButton label="Go to Details" onClicked={() => setHistory([...history, "details"])} />
+    </x.NavigationPage>
+    <x.NavigationPage id="details" title="Details" canPop>
+        <GtkLabel label="Details content" />
+    </x.NavigationPage>
+</AdwNavigationView>
+```
+
+**NavigationPage props:** `id` (required), `title`, `canPop`. Control navigation via `history` array.
+
 ### Other Adwaita Widgets
 
 | Widget | Description |