@gtkx/cli 0.12.0 → 0.13.0

package/dist/dev-server.js

@@ -85,12 +85,12 @@ export const createDevServer = async (options) => {
         server.close();
     });
     server.watcher.on("change", async (changedPath) => {
-        console.log(`[gtkx] File changed: ${changedPath}`);
         try {
             const module = server.moduleGraph.getModuleById(changedPath);
             if (!module) {
                 return;
             }
+            console.log(`[gtkx] File changed: ${changedPath}`);
             invalidateModuleAndImporters(changedPath);
             const newMod = (await server.ssrLoadModule(changedPath));
             moduleExports.set(changedPath, { ...newMod });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gtkx/cli",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "description": "CLI for GTKX - create and develop GTK4 React applications",
   "keywords": [
     "gtkx",
@@ -57,20 +57,20 @@
     "citty": "^0.1.6",
     "ejs": "^3.1.10",
     "react-refresh": "^0.18.0",
-    "vite": "^7.3.0",
-    "@gtkx/mcp": "0.12.0",
-    "@gtkx/ffi": "0.12.0",
-    "@gtkx/react": "0.12.0"
+    "vite": "^7.3.1",
+    "@gtkx/ffi": "0.13.0",
+    "@gtkx/mcp": "0.13.0",
+    "@gtkx/react": "0.13.0"
   },
   "devDependencies": {
     "@types/ejs": "^3.1.5",
     "@types/react-refresh": "^0.14.7",
     "memfs": "^4.51.1",
-    "@gtkx/testing": "0.12.0"
+    "@gtkx/testing": "0.13.0"
   },
   "peerDependencies": {
     "react": "^19",
-    "@gtkx/testing": "0.12.0"
+    "@gtkx/testing": "0.13.0"
   },
   "peerDependenciesMeta": {
     "@gtkx/testing": {

package/templates/claude/EXAMPLES.md.ejs

@@ -8,7 +8,7 @@
 import { GtkApplicationWindow, GtkLabel, render, quit } from "@gtkx/react";
 
 const App = () => (
-    <GtkApplicationWindow title="Hello" defaultWidth={400} defaultHeight={300} onCloseRequest={quit}>
+    <GtkApplicationWindow title="Hello" defaultWidth={400} defaultHeight={300} onClose={quit}>
         <GtkLabel label="Hello, World!" />
     </GtkApplicationWindow>
 );
@@ -27,21 +27,20 @@ import {
     AdwWindowTitle,
     AdwStatusPage,
     GtkButton,
-    Slot,
-    Toolbar,
     quit,
+    x,
 } from "@gtkx/react";
 
 export const App = () => (
-    <AdwApplicationWindow title="My App" defaultWidth={800} defaultHeight={600} onCloseRequest={quit}>
+    <AdwApplicationWindow title="My App" defaultWidth={800} defaultHeight={600} onClose={quit}>
         <AdwToolbarView>
-            <Toolbar.Top>
+            <x.ToolbarTop>
                 <AdwHeaderBar>
-                    <Slot for={AdwHeaderBar} id="titleWidget">
+                    <x.Slot for={AdwHeaderBar} id="titleWidget">
                         <AdwWindowTitle title="My App" subtitle="Welcome" />
-                    </Slot>
+                    </x.Slot>
                 </AdwHeaderBar>
-            </Toolbar.Top>
+            </x.ToolbarTop>
             <AdwStatusPage
                 iconName="applications-system-symbolic"
                 title="Welcome"
@@ -65,7 +64,7 @@ export const appId = "com.example.myapp";
 
 ```tsx
 import * as Gtk from "@gtkx/ffi/gtk";
-import { GtkBox, GtkButton, GtkEntry, GtkGrid, GtkLabel, GridChild } from "@gtkx/react";
+import { GtkBox, GtkButton, GtkEntry, GtkGrid, GtkLabel, x } from "@gtkx/react";
 import { useState } from "react";
 
 const LoginForm = () => {
@@ -78,21 +77,21 @@ const LoginForm = () => {
 
     return (
         <GtkGrid rowSpacing={12} columnSpacing={12}>
-            <GridChild column={0} row={0}>
+            <x.GridChild column={0} row={0}>
                 <GtkLabel label="Email:" halign={Gtk.Align.END} />
-            </GridChild>
-            <GridChild column={1} row={0}>
+            </x.GridChild>
+            <x.GridChild column={1} row={0}>
                 <GtkEntry text={email} onChanged={(e) => setEmail(e.getText())} hexpand />
-            </GridChild>
-            <GridChild column={0} row={1}>
+            </x.GridChild>
+            <x.GridChild column={0} row={1}>
                 <GtkLabel label="Password:" halign={Gtk.Align.END} />
-            </GridChild>
-            <GridChild column={1} row={1}>
+            </x.GridChild>
+            <x.GridChild column={1} row={1}>
                 <GtkEntry text={password} onChanged={(e) => setPassword(e.getText())} visibility={false} hexpand />
-            </GridChild>
-            <GridChild column={0} row={2} columnSpan={2}>
+            </x.GridChild>
+            <x.GridChild column={0} row={2} columnSpan={2}>
                 <GtkButton label="Login" onClicked={handleSubmit} cssClasses={["suggested-action"]} halign={Gtk.Align.END} />
-            </GridChild>
+            </x.GridChild>
         </GtkGrid>
     );
 };
@@ -102,7 +101,7 @@ const LoginForm = () => {
 
 ```tsx
 import * as Gtk from "@gtkx/ffi/gtk";
-import { GtkBox, GtkButton, GtkEntry, GtkLabel, GtkScrolledWindow, ListView, ListItem } from "@gtkx/react";
+import { GtkBox, GtkButton, GtkEntry, GtkLabel, GtkScrolledWindow, x } from "@gtkx/react";
 import { useCallback, useState } from "react";
 
 interface Todo {
@@ -133,7 +132,7 @@ const TodoList = () => {
                 <GtkButton label="Add" onClicked={addTodo} cssClasses={["suggested-action"]} />
             </GtkBox>
             <GtkScrolledWindow vexpand cssClasses={["card"]}>
-                <ListView<Todo>
+                <x.ListView<Todo>
                     renderItem={(todo) => (
                         <GtkBox orientation={Gtk.Orientation.HORIZONTAL} spacing={8} marginStart={12} marginEnd={12} marginTop={8} marginBottom={8}>
                             <GtkLabel label={todo?.text ?? ""} hexpand halign={Gtk.Align.START} />
@@ -142,9 +141,9 @@ const TodoList = () => {
                     )}
                 >
                     {todos.map((todo) => (
-                        <ListItem key={todo.id} id={todo.id} value={todo} />
+                        <x.ListItem key={todo.id} id={todo.id} value={todo} />
                     ))}
-                </ListView>
+                </x.ListView>
             </GtkScrolledWindow>
         </GtkBox>
     );
@@ -159,7 +158,7 @@ const TodoList = () => {
 
 ```tsx
 import * as Gtk from "@gtkx/ffi/gtk";
-import { GtkBox, GtkLabel, GtkPaned, GtkScrolledWindow, GtkStack, ListView, ListItem, Slot, StackPage } from "@gtkx/react";
+import { GtkBox, GtkLabel, GtkPaned, GtkScrolledWindow, GtkStack, x } from "@gtkx/react";
 import { useState } from "react";
 
 interface Page {
@@ -178,9 +177,9 @@ const SidebarNav = () => {
 
     return (
         <GtkPaned orientation={Gtk.Orientation.HORIZONTAL} position={200}>
-            <Slot for={GtkPaned} id="startChild">
+            <x.Slot for={GtkPaned} id="startChild">
                 <GtkScrolledWindow cssClasses={["sidebar"]}>
-                    <ListView<Page>
+                    <x.ListView<Page>
                         selected={[currentPage]}
                         selectionMode={Gtk.SelectionMode.SINGLE}
                         onSelectionChanged={(ids) => setCurrentPage(ids[0])}
@@ -189,18 +188,18 @@ const SidebarNav = () => {
                         )}
                     >
                         {pages.map((page) => (
-                            <ListItem key={page.id} id={page.id} value={page} />
+                            <x.ListItem key={page.id} id={page.id} value={page} />
                         ))}
-                    </ListView>
+                    </x.ListView>
                 </GtkScrolledWindow>
-            </Slot>
-            <Slot for={GtkPaned} id="endChild">
-                <GtkStack visibleChildName={currentPage}>
-                    <StackPage name="home"><GtkLabel label="Home Content" vexpand /></StackPage>
-                    <StackPage name="settings"><GtkLabel label="Settings Content" vexpand /></StackPage>
-                    <StackPage name="about"><GtkLabel label="About Content" vexpand /></StackPage>
+            </x.Slot>
+            <x.Slot for={GtkPaned} id="endChild">
+                <GtkStack page={currentPage}>
+                    <x.StackPage id="home"><GtkLabel label="Home Content" vexpand /></x.StackPage>
+                    <x.StackPage id="settings"><GtkLabel label="Settings Content" vexpand /></x.StackPage>
+                    <x.StackPage id="about"><GtkLabel label="About Content" vexpand /></x.StackPage>
                 </GtkStack>
-            </Slot>
+            </x.Slot>
         </GtkPaned>
     );
 };
@@ -210,34 +209,34 @@ const SidebarNav = () => {
 
 ```tsx
 import * as Gtk from "@gtkx/ffi/gtk";
-import { GtkApplicationWindow, GtkBox, GtkButton, GtkHeaderBar, GtkLabel, GtkStack, GtkWindow, Pack, Slot, StackPage, quit } from "@gtkx/react";
+import { GtkApplicationWindow, GtkBox, GtkButton, GtkHeaderBar, GtkLabel, GtkStack, GtkWindow, quit, x } from "@gtkx/react";
 import { useState } from "react";
 
 const AppWithNavigation = () => {
     const [page, setPage] = useState("home");
 
     return (
-        <GtkApplicationWindow title="App" defaultWidth={600} defaultHeight={400} onCloseRequest={quit}>
-            <Slot for={GtkWindow} id="titlebar">
+        <GtkApplicationWindow title="App" defaultWidth={600} defaultHeight={400} onClose={quit}>
+            <x.Slot for={GtkWindow} id="titlebar">
                 <GtkHeaderBar>
-                    <Pack.Start>
+                    <x.PackStart>
                         {page !== "home" && <GtkButton iconName="go-previous-symbolic" onClicked={() => setPage("home")} />}
-                    </Pack.Start>
-                    <Slot for={GtkHeaderBar} id="titleWidget">
+                    </x.PackStart>
+                    <x.Slot for={GtkHeaderBar} id="titleWidget">
                         <GtkLabel label={page === "home" ? "Home" : "Details"} cssClasses={["title"]} />
-                    </Slot>
+                    </x.Slot>
                 </GtkHeaderBar>
-            </Slot>
-            <GtkStack visibleChildName={page}>
-                <StackPage name="home">
+            </x.Slot>
+            <GtkStack page={page}>
+                <x.StackPage id="home">
                     <GtkBox orientation={Gtk.Orientation.VERTICAL} spacing={12} vexpand halign={Gtk.Align.CENTER} valign={Gtk.Align.CENTER}>
                         <GtkLabel label="Welcome" />
                         <GtkButton label="Go to Details" onClicked={() => setPage("details")} />
                     </GtkBox>
-                </StackPage>
-                <StackPage name="details">
+                </x.StackPage>
+                <x.StackPage id="details">
                     <GtkLabel label="Details Page Content" vexpand />
-                </StackPage>
+                </x.StackPage>
             </GtkStack>
         </GtkApplicationWindow>
     );
@@ -259,7 +258,7 @@ import {
     AdwEntryRow,
     GtkImage,
     GtkScrolledWindow,
-    Slot,
+    x,
 } from "@gtkx/react";
 import { useState } from "react";
 
@@ -278,9 +277,9 @@ const SettingsPage = () => {
                 <AdwPreferencesGroup title="Account">
                     <AdwEntryRow title="Username" text={username} onChanged={(e) => setUsername(e.getText())} />
                     <AdwActionRow title="Profile" subtitle="Manage your profile">
-                        <Slot for={AdwActionRow} id="activatableWidget">
+                        <x.Slot for={AdwActionRow} id="activatableWidget">
                             <GtkImage iconName="go-next-symbolic" valign={Gtk.Align.CENTER} />
-                        </Slot>
+                        </x.Slot>
                     </AdwActionRow>
                 </AdwPreferencesGroup>
 
@@ -303,7 +302,7 @@ const SettingsPage = () => {
 
 ```tsx
 import * as Gtk from "@gtkx/ffi/gtk";
-import { GtkBox, GtkColumnView, GtkLabel, GtkScrolledWindow, ColumnViewColumn, ListItem } from "@gtkx/react";
+import { GtkBox, GtkColumnView, GtkLabel, GtkScrolledWindow, x } from "@gtkx/react";
 import { useMemo, useState } from "react";
 
 interface FileItem {
@@ -340,12 +339,12 @@ const FileTable = () => {
 
     return (
         <GtkScrolledWindow vexpand cssClasses={["card"]}>
-            <GtkColumnView sortColumn={sortColumn} sortOrder={sortOrder} onSortChange={handleSort}>
-                <ColumnViewColumn<FileItem> title="Name" id="name" expand sortable renderCell={(f) => <GtkLabel label={f?.name ?? ""} />} />
-                <ColumnViewColumn<FileItem> title="Size" id="size" fixedWidth={100} sortable renderCell={(f) => <GtkLabel label={`${f?.size ?? 0} KB`} />} />
-                <ColumnViewColumn<FileItem> title="Modified" id="modified" fixedWidth={120} sortable renderCell={(f) => <GtkLabel label={f?.modified ?? ""} />} />
+            <GtkColumnView estimatedRowHeight={48} sortColumn={sortColumn} sortOrder={sortOrder} onSortChange={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 ?? ""} />} />
                 {sortedFiles.map((file) => (
-                    <ListItem key={file.id} id={file.id} value={file} />
+                    <x.ListItem key={file.id} id={file.id} value={file} />
                 ))}
             </GtkColumnView>
         </GtkScrolledWindow>
@@ -359,7 +358,7 @@ const FileTable = () => {
 
 ```tsx
 import * as Gtk from "@gtkx/ffi/gtk";
-import { GtkBox, GtkLabel, GtkMenuButton, GtkPopoverMenu, Menu, Slot, quit } from "@gtkx/react";
+import { GtkBox, GtkLabel, GtkMenuButton, GtkPopoverMenu, quit, x } from "@gtkx/react";
 import { useState } from "react";
 
 const MenuDemo = () => {
@@ -368,24 +367,24 @@ const MenuDemo = () => {
     return (
         <GtkBox orientation={Gtk.Orientation.VERTICAL} spacing={12} marginStart={16} marginEnd={16} marginTop={16} marginBottom={16}>
             <GtkMenuButton label="File" halign={Gtk.Align.START}>
-                <Slot for={GtkMenuButton} id="popover">
+                <x.Slot for={GtkMenuButton} id="popover">
                     <GtkPopoverMenu>
-                        <Menu.Section>
-                            <Menu.Item id="new" label="New" onActivate={() => setLastAction("New")} accels="<Control>n" />
-                            <Menu.Item id="open" label="Open" onActivate={() => setLastAction("Open")} accels="<Control>o" />
-                            <Menu.Item id="save" label="Save" onActivate={() => setLastAction("Save")} accels="<Control>s" />
-                        </Menu.Section>
-                        <Menu.Section>
-                            <Menu.Submenu label="Export">
-                                <Menu.Item id="pdf" label="As PDF" onActivate={() => setLastAction("Export PDF")} />
-                                <Menu.Item id="csv" label="As CSV" onActivate={() => setLastAction("Export CSV")} />
-                            </Menu.Submenu>
-                        </Menu.Section>
-                        <Menu.Section>
-                            <Menu.Item id="quit" label="Quit" onActivate={quit} accels="<Control>q" />
-                        </Menu.Section>
+                        <x.MenuSection>
+                            <x.MenuItem id="new" label="New" onActivate={() => setLastAction("New")} accels="<Control>n" />
+                            <x.MenuItem id="open" label="Open" onActivate={() => setLastAction("Open")} accels="<Control>o" />
+                            <x.MenuItem id="save" label="Save" onActivate={() => setLastAction("Save")} accels="<Control>s" />
+                        </x.MenuSection>
+                        <x.MenuSection>
+                            <x.MenuSubmenu label="Export">
+                                <x.MenuItem id="pdf" label="As PDF" onActivate={() => setLastAction("Export PDF")} />
+                                <x.MenuItem id="csv" label="As CSV" onActivate={() => setLastAction("Export CSV")} />
+                            </x.MenuSubmenu>
+                        </x.MenuSection>
+                        <x.MenuSection>
+                            <x.MenuItem id="quit" label="Quit" onActivate={quit} accels="<Control>q" />
+                        </x.MenuSection>
                     </GtkPopoverMenu>
-                </Slot>
+                </x.Slot>
             </GtkMenuButton>
             <GtkLabel label={`Last action: ${lastAction ?? "(none)"}`} />
         </GtkBox>
@@ -399,7 +398,7 @@ const MenuDemo = () => {
 
 ```tsx
 import * as Gtk from "@gtkx/ffi/gtk";
-import { AdwSpinner, GtkBox, GtkLabel, GtkScrolledWindow, ListView, ListItem } from "@gtkx/react";
+import { AdwSpinner, GtkBox, GtkLabel, GtkScrolledWindow, x } from "@gtkx/react";
 import { useEffect, useState } from "react";
 
 interface User {
@@ -419,8 +418,8 @@ const AsyncList = () => {
                 const response = await fetch("https://api.example.com/users");
                 const data = await response.json();
                 setUsers(data);
-            } catch (err) {
-                setError(err instanceof Error ? err.message : "Failed to load");
+            } catch (error) {
+                setError(error instanceof Error ? error.message : "Failed to load");
             } finally {
                 setLoading(false);
             }
@@ -442,7 +441,7 @@ const AsyncList = () => {
 
     return (
         <GtkScrolledWindow vexpand>
-            <ListView<User>
+            <x.ListView<User>
                 renderItem={(user) => (
                     <GtkBox orientation={Gtk.Orientation.VERTICAL} marginStart={12} marginTop={8} marginBottom={8}>
                         <GtkLabel label={user?.name ?? ""} halign={Gtk.Align.START} cssClasses={["heading"]} />
@@ -451,9 +450,9 @@ const AsyncList = () => {
                 )}
             >
                 {users.map((user) => (
-                    <ListItem key={user.id} id={user.id} value={user} />
+                    <x.ListItem key={user.id} id={user.id} value={user} />
                 ))}
-            </ListView>
+            </x.ListView>
         </GtkScrolledWindow>
     );
 };

package/templates/claude/SKILL.md.ejs

@@ -14,7 +14,7 @@ import { GtkApplicationWindow, GtkBox, GtkButton, render, quit } from "@gtkx/rea
 import * as Gtk from "@gtkx/ffi/gtk";
 
 const App = () => (
-    <GtkApplicationWindow title="My App" defaultWidth={800} defaultHeight={600} onCloseRequest={quit}>
+    <GtkApplicationWindow title="My App" defaultWidth={800} defaultHeight={600} onClose={quit}>
         <GtkBox orientation={Gtk.Orientation.VERTICAL} spacing={12}>
             Hello, GTKX!
             <GtkButton label="Quit" onClicked={quit} />
@@ -53,8 +53,8 @@ Some widgets require children in specific slots:
 
 ```tsx
 <GtkPaned orientation={Gtk.Orientation.HORIZONTAL}>
-    <Slot for={GtkPaned} id="startChild"><Sidebar /></Slot>
-    <Slot for={GtkPaned} id="endChild"><Content /></Slot>
+    <x.Slot for={GtkPaned} id="startChild"><Sidebar /></x.Slot>
+    <x.Slot for={GtkPaned} id="endChild"><Content /></x.Slot>
 </GtkPaned>
 ```
 
@@ -62,8 +62,8 @@ Some widgets require children in specific slots:
 
 ```tsx
 <GtkHeaderBar>
-    <Pack.Start><GtkButton iconName="go-previous-symbolic" /></Pack.Start>
-    <Pack.End><GtkMenuButton iconName="open-menu-symbolic" /></Pack.End>
+    <x.PackStart><GtkButton iconName="go-previous-symbolic" /></x.PackStart>
+    <x.PackEnd><GtkMenuButton iconName="open-menu-symbolic" /></x.PackEnd>
 </GtkHeaderBar>
 ```
 

package/templates/claude/WIDGETS.md.ejs

@@ -30,9 +30,9 @@ Linear layout (horizontal or vertical).
 
 ```tsx
 <GtkGrid rowSpacing={8} columnSpacing={12}>
-    <GridChild column={0} row={0}><GtkLabel label="Name:" /></GridChild>
-    <GridChild column={1} row={0}><GtkEntry hexpand /></GridChild>
-    <GridChild column={0} row={1} columnSpan={2}><GtkButton label="Submit" /></GridChild>
+    <x.GridChild column={0} row={0}><GtkLabel label="Name:" /></x.GridChild>
+    <x.GridChild column={1} row={0}><GtkEntry hexpand /></x.GridChild>
+    <x.GridChild column={0} row={1} columnSpan={2}><GtkButton label="Submit" /></x.GridChild>
 </GtkGrid>
 ```
 
@@ -42,39 +42,39 @@ Linear layout (horizontal or vertical).
 Page container, shows one child at a time.
 
 ```tsx
-<GtkStack visibleChildName="page1" transitionType={Gtk.StackTransitionType.SLIDE_LEFT_RIGHT}>
-    <StackPage name="page1" title="First" iconName="document-new">
+<GtkStack page="page1" transitionType={Gtk.StackTransitionType.SLIDE_LEFT_RIGHT}>
+    <x.StackPage id="page1" title="First" iconName="document-new">
         <Content1 />
-    </StackPage>
-    <StackPage name="page2" title="Second">
+    </x.StackPage>
+    <x.StackPage id="page2" title="Second">
         <Content2 />
-    </StackPage>
+    </x.StackPage>
 </GtkStack>
 ```
 
-**StackPage props:** `name` (required), `title`, `iconName`, `needsAttention`, `badgeNumber` (AdwViewStack only)
+**StackPage props:** `id` (optional), `title`, `iconName`, `needsAttention`, `badgeNumber` (AdwViewStack only)
 
 ### GtkNotebook
 Tabbed container with visible tabs.
 
 ```tsx
 <GtkNotebook>
-    <Notebook.Page label="Tab 1"><Content1 /></Notebook.Page>
-    <Notebook.Page label="Tab 2"><Content2 /></Notebook.Page>
+    <x.NotebookPage label="Tab 1"><Content1 /></x.NotebookPage>
+    <x.NotebookPage label="Tab 2"><Content2 /></x.NotebookPage>
 </GtkNotebook>
 ```
 
 Custom tab widget:
 ```tsx
-<Notebook.Page>
-    <Notebook.PageTab>
+<x.NotebookPage>
+    <x.NotebookPageTab>
         <GtkBox orientation={Gtk.Orientation.HORIZONTAL} spacing={4}>
             <GtkImage iconName="folder-symbolic" />
             <GtkLabel label="Files" />
         </GtkBox>
-    </Notebook.PageTab>
+    </x.NotebookPageTab>
     <Content />
-</Notebook.Page>
+</x.NotebookPage>
 ```
 
 ### GtkPaned
@@ -82,8 +82,8 @@ Resizable split with draggable divider. **Requires Slot components.**
 
 ```tsx
 <GtkPaned orientation={Gtk.Orientation.HORIZONTAL} position={280} shrinkStartChild={false}>
-    <Slot for={GtkPaned} id="startChild"><Sidebar /></Slot>
-    <Slot for={GtkPaned} id="endChild"><MainContent /></Slot>
+    <x.Slot for={GtkPaned} id="startChild"><Sidebar /></x.Slot>
+    <x.Slot for={GtkPaned} id="endChild"><MainContent /></x.Slot>
 </GtkPaned>
 ```
 
@@ -93,9 +93,9 @@ Stack widgets on top of each other. First child is base layer, additional childr
 ```tsx
 <GtkOverlay>
     <GtkButton label="Notifications" />
-    <OverlayChild>
+    <x.OverlayChild>
         <GtkLabel label="3" cssClasses={["badge"]} halign={Gtk.Align.END} valign={Gtk.Align.START} />
-    </OverlayChild>
+    </x.OverlayChild>
 </GtkOverlay>
 ```
 
@@ -118,22 +118,24 @@ All virtual list widgets use `ListItem` children and a `renderItem` function.
 High-performance scrollable list with selection.
 
 ```tsx
-<ListView<Item>
+<x.ListView<Item>
+    estimatedItemHeight={48}
     vexpand
     selected={selectedId ? [selectedId] : []}
     selectionMode={Gtk.SelectionMode.SINGLE}
     onSelectionChanged={(ids) => setSelectedId(ids[0])}
     renderItem={(item) => <GtkLabel label={item?.name ?? ""} />}
 >
-    {items.map(item => <ListItem key={item.id} id={item.id} value={item} />)}
-</ListView>
+    {items.map(item => <x.ListItem key={item.id} id={item.id} value={item} />)}
+</x.ListView>
 ```
 
 ### GridView
 Grid-based virtual scrolling.
 
 ```tsx
-<GridView<Item>
+<x.GridView<Item>
+    estimatedItemHeight={100}
     minColumns={2}
     maxColumns={4}
     renderItem={(item) => (
@@ -143,16 +145,16 @@ Grid-based virtual scrolling.
         </GtkBox>
     )}
 >
-    {items.map(item => <ListItem key={item.id} id={item.id} value={item} />)}
-</GridView>
+    {items.map(item => <x.ListItem key={item.id} id={item.id} value={item} />)}
+</x.GridView>
 ```
 
 ### GtkColumnView
 Table with sortable columns.
 
 ```tsx
-<GtkColumnView sortColumn="name" sortOrder={Gtk.SortType.ASCENDING} onSortChange={handleSort}>
-    <ColumnViewColumn<Item>
+<GtkColumnView estimatedRowHeight={48} sortColumn="name" sortOrder={Gtk.SortType.ASCENDING} onSortChange={handleSort}>
+    <x.ColumnViewColumn<Item>
         title="Name"
         id="name"
         expand
@@ -160,13 +162,13 @@ Table with sortable columns.
         sortable
         renderCell={(item) => <GtkLabel label={item?.name ?? ""} />}
     />
-    <ColumnViewColumn<Item>
+    <x.ColumnViewColumn<Item>
         title="Size"
         id="size"
         fixedWidth={100}
         renderCell={(item) => <GtkLabel label={item?.size ?? ""} />}
     />
-    {items.map(item => <ListItem key={item.id} id={item.id} value={item} />)}
+    {items.map(item => <x.ListItem key={item.id} id={item.id} value={item} />)}
 </GtkColumnView>
 ```
 
@@ -175,7 +177,7 @@ Selection dropdown.
 
 ```tsx
 <GtkDropDown selectedId={selectedId} onSelectionChanged={setSelectedId}>
-    {options.map(opt => <SimpleListItem key={opt.id} id={opt.id} value={opt.label} />)}
+    {options.map(opt => <x.SimpleListItem key={opt.id} id={opt.id} value={opt.label} />)}
 </GtkDropDown>
 ```
 
@@ -247,11 +249,11 @@ Title bar with packed widgets. Use `Pack.Start`, `Pack.End`, and `Slot` for titl
 
 ```tsx
 <GtkHeaderBar>
-    <Pack.Start><GtkButton iconName="go-previous-symbolic" /></Pack.Start>
-    <Slot for={GtkHeaderBar} id="titleWidget">
+    <x.PackStart><GtkButton iconName="go-previous-symbolic" /></x.PackStart>
+    <x.Slot for={GtkHeaderBar} id="titleWidget">
         <GtkLabel label="Title" cssClasses={["title"]} />
-    </Slot>
-    <Pack.End><GtkMenuButton iconName="open-menu-symbolic" /></Pack.End>
+    </x.Slot>
+    <x.PackEnd><GtkMenuButton iconName="open-menu-symbolic" /></x.PackEnd>
 </GtkHeaderBar>
 ```
 
@@ -260,8 +262,8 @@ Bottom action bar.
 
 ```tsx
 <GtkActionBar>
-    <Pack.Start><GtkButton label="Cancel" /></Pack.Start>
-    <Pack.End><GtkButton label="Save" cssClasses={["suggested-action"]} /></Pack.End>
+    <x.PackStart><GtkButton label="Cancel" /></x.PackStart>
+    <x.PackEnd><GtkButton label="Save" cssClasses={["suggested-action"]} /></x.PackEnd>
 </GtkActionBar>
 ```
 
@@ -273,23 +275,23 @@ Bottom action bar.
 
 ```tsx
 <GtkMenuButton iconName="open-menu-symbolic">
-    <Slot for={GtkMenuButton} id="popover">
+    <x.Slot for={GtkMenuButton} id="popover">
         <GtkPopoverMenu>
-            <Menu.Section>
-                <Menu.Item id="new" label="New" onActivate={handleNew} accels="<Control>n" />
-                <Menu.Item id="open" label="Open" onActivate={handleOpen} />
-            </Menu.Section>
-            <Menu.Section>
-                <Menu.Submenu label="Export">
-                    <Menu.Item id="pdf" label="PDF" onActivate={exportPdf} />
-                    <Menu.Item id="csv" label="CSV" onActivate={exportCsv} />
-                </Menu.Submenu>
-            </Menu.Section>
-            <Menu.Section>
-                <Menu.Item id="quit" label="Quit" onActivate={quit} accels="<Control>q" />
-            </Menu.Section>
+            <x.MenuSection>
+                <x.MenuItem id="new" label="New" onActivate={handleNew} accels="<Control>n" />
+                <x.MenuItem id="open" label="Open" onActivate={handleOpen} />
+            </x.MenuSection>
+            <x.MenuSection>
+                <x.MenuSubmenu label="Export">
+                    <x.MenuItem id="pdf" label="PDF" onActivate={exportPdf} />
+                    <x.MenuItem id="csv" label="CSV" onActivate={exportCsv} />
+                </x.MenuSubmenu>
+            </x.MenuSection>
+            <x.MenuSection>
+                <x.MenuItem id="quit" label="Quit" onActivate={quit} accels="<Control>q" />
+            </x.MenuSection>
         </GtkPopoverMenu>
-    </Slot>
+    </x.Slot>
 </GtkMenuButton>
 ```
 
@@ -306,7 +308,7 @@ Bottom action bar.
     title="App"
     defaultWidth={800}
     defaultHeight={600}
-    onCloseRequest={quit}
+    onClose={quit}
 >
     <Content />
 </GtkApplicationWindow>
@@ -315,9 +317,9 @@ Bottom action bar.
 Custom titlebar:
 ```tsx
 <GtkApplicationWindow ...>
-    <Slot for={GtkWindow} id="titlebar">
+    <x.Slot for={GtkWindow} id="titlebar">
         <GtkHeaderBar />
-    </Slot>
+    </x.Slot>
     <Content />
 </GtkApplicationWindow>
 ```
@@ -332,19 +334,19 @@ Import: `import * as Adw from "@gtkx/ffi/adw";`
 Modern app structure.
 
 ```tsx
-<AdwApplicationWindow title="App" defaultWidth={800} defaultHeight={600} onCloseRequest={quit}>
+<AdwApplicationWindow title="App" defaultWidth={800} defaultHeight={600} onClose={quit}>
     <AdwToolbarView>
-        <Toolbar.Top>
+        <x.ToolbarTop>
             <AdwHeaderBar>
-                <Slot for={AdwHeaderBar} id="titleWidget">
+                <x.Slot for={AdwHeaderBar} id="titleWidget">
                     <AdwWindowTitle title="App" subtitle="Description" />
-                </Slot>
+                </x.Slot>
             </AdwHeaderBar>
-        </Toolbar.Top>
+        </x.ToolbarTop>
         <MainContent />
-        <Toolbar.Bottom>
+        <x.ToolbarBottom>
             <GtkActionBar />
-        </Toolbar.Bottom>
+        </x.ToolbarBottom>
     </AdwToolbarView>
 </AdwApplicationWindow>
 ```
@@ -373,9 +375,9 @@ Settings UI.
     <AdwPreferencesGroup title="Appearance" description="Customize look">
         <AdwSwitchRow title="Dark Mode" active={dark} onActivated={() => setDark(!dark)} />
         <AdwActionRow title="Theme" subtitle="Select color">
-            <Slot for={AdwActionRow} id="activatableWidget">
+            <x.Slot for={AdwActionRow} id="activatableWidget">
                 <GtkImage iconName="go-next-symbolic" valign={Gtk.Align.CENTER} />
-            </Slot>
+            </x.Slot>
         </AdwActionRow>
     </AdwPreferencesGroup>
 </AdwPreferencesPage>

package/templates/src/app.tsx.ejs

@@ -1,17 +1,32 @@
-import { useState } from "react";
 import * as Gtk from "@gtkx/ffi/gtk";
 import { GtkApplicationWindow, GtkBox, GtkButton, GtkLabel, quit } from "@gtkx/react";
+import { useState } from "react";
 
-export default function App() {
+export const App = () => {
     const [count, setCount] = useState(0);
 
     return (
-        <GtkApplicationWindow title="<%= title %>" defaultWidth={400} defaultHeight={300} onCloseRequest={quit}>
-            <GtkBox orientation={Gtk.Orientation.VERTICAL} spacing={20} marginTop={40} marginStart={40} marginEnd={40}>
-                Welcome to GTKX!
-                <GtkLabel label={`Count: ${count}`} />
-                <GtkButton label="Increment" onClicked={() => setCount((c) => c + 1)} />
+        <GtkApplicationWindow title="<%= title %>" defaultWidth={400} defaultHeight={300} onClose={quit}>
+            <GtkBox
+                orientation={Gtk.Orientation.VERTICAL}
+                spacing={20}
+                marginTop={40}
+                marginBottom={40}
+                marginStart={40}
+                marginEnd={40}
+                valign={Gtk.Align.CENTER}
+                halign={Gtk.Align.CENTER}
+            >
+                <GtkLabel label="Welcome to GTKX!" cssClasses={["title-1"]} />
+                <GtkLabel label={`Count: ${count}`} cssClasses={["title-2"]} />
+                <GtkButton
+                    label="Increment"
+                    onClicked={() => setCount((c) => c + 1)}
+                    cssClasses={["suggested-action", "pill"]}
+                />
             </GtkBox>
         </GtkApplicationWindow>
     );
-}
+};
+
+export default App;

package/templates/src/index.tsx.ejs

@@ -1,4 +1,5 @@
 import { render } from "@gtkx/react";
-import App from "./app.js";
+import pkg from "../package.json" with { type: "json" };
+import { App } from "./app.js";
 
-render(<App />, "<%= appId %>");
+render(<App />, pkg.gtkx.appId);