@gtkx/cli 0.9.4 → 0.10.0

package/dist/create.js

@@ -2,6 +2,7 @@ import { spawn } from "node:child_process";
 import { existsSync, mkdirSync, writeFileSync } from "node:fs";
 import { join, resolve } from "node:path";
 import * as p from "@clack/prompts";
+import { renderFile } from "./templates.js";
 const DEPENDENCIES = ["@gtkx/css", "@gtkx/ffi", "@gtkx/react", "react"];
 const DEV_DEPENDENCIES = ["@gtkx/cli", "@types/react", "typescript"];
 const TESTING_DEV_DEPENDENCIES = {
@@ -9,988 +10,12 @@ const TESTING_DEV_DEPENDENCIES = {
     jest: ["@gtkx/testing", "jest", "@types/jest", "ts-jest"],
     node: ["@gtkx/testing", "@types/node"],
 };
-export const getTestScript = (testing) => {
-    const env = "GDK_BACKEND=x11 GSK_RENDERER=cairo LIBGL_ALWAYS_SOFTWARE=1";
-    switch (testing) {
-        case "vitest":
-            return `${env} xvfb-run -a vitest`;
-        case "jest":
-            return `${env} xvfb-run -a jest`;
-        case "node":
-            return `${env} xvfb-run -a node --import tsx --test tests/**/*.test.ts`;
-        case "none":
-            return undefined;
-    }
-};
-export const generatePackageJson = (name, appId, testing) => {
-    const testScript = getTestScript(testing);
-    const scripts = {
-        dev: "gtkx dev src/app.tsx",
-        build: "tsc -b",
-        start: "node dist/index.js",
-    };
-    if (testScript) {
-        scripts.test = testScript;
-    }
-    return JSON.stringify({
-        name,
-        version: "0.0.1",
-        private: true,
-        type: "module",
-        scripts,
-        gtkx: {
-            appId,
-        },
-    }, null, 4);
-};
-export const generateTsConfig = () => {
-    return JSON.stringify({
-        compilerOptions: {
-            target: "ESNext",
-            module: "NodeNext",
-            moduleResolution: "NodeNext",
-            jsx: "react-jsx",
-            strict: true,
-            skipLibCheck: true,
-            outDir: "dist",
-            rootDir: "src",
-        },
-        include: ["src/**/*"],
-    }, null, 4);
-};
-const generateAppTsx = (name, appId) => {
+const createTemplateContext = (name, appId, testing) => {
     const title = name
         .split("-")
         .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
         .join(" ");
-    return `import { useState } from "react";
-import * as Gtk from "@gtkx/ffi/gtk";
-import { ApplicationWindow, Box, Button, Label, quit } from "@gtkx/react";
-
-export default function App() {
-    const [count, setCount] = useState(0);
-
-    return (
-        <ApplicationWindow title="${title}" defaultWidth={400} defaultHeight={300} onCloseRequest={quit}>
-            <Box orientation={Gtk.Orientation.VERTICAL} spacing={20} marginTop={40} marginStart={40} marginEnd={40}>
-                <Label label="Welcome to GTKX!" />
-                <Label label={\`Count: \${count}\`} />
-                <Button label="Increment" onClicked={() => setCount((c) => c + 1)} />
-            </Box>
-        </ApplicationWindow>
-    );
-}
-
-export const appId = "${appId}";
-`;
-};
-const generateIndexTsx = () => {
-    return `import { render } from "@gtkx/react";
-import App, { appId } from "./app.js";
-
-render(<App />, appId);
-`;
-};
-const generateGitignore = () => {
-    return `node_modules/
-dist/
-*.log
-.DS_Store
-`;
-};
-const generateSkillMd = () => {
-    return `---
-name: developing-gtkx-apps
-description: Build GTK4 desktop applications with GTKX React framework. Use when creating GTKX components, working with GTK widgets, handling signals, or building Linux desktop UIs with React.
----
-
-# Developing GTKX Applications
-
-GTKX is a React framework for building native GTK4 desktop applications on Linux. It uses a custom React reconciler to render React components as native GTK widgets.
-
-## Quick Start
-
-\`\`\`tsx
-import { ApplicationWindow, render, quit } from "@gtkx/react";
-import * as Gtk from "@gtkx/ffi/gtk";
-
-const App = () => (
-    <ApplicationWindow title="My App" defaultWidth={800} defaultHeight={600}>
-        <Box orientation={Gtk.Orientation.VERTICAL} spacing={12}>
-            <Label label="Hello, GTKX!" />
-            <Button label="Quit" onClicked={quit} />
-        </Box>
-    </ApplicationWindow>
-);
-
-render(<App />, "com.example.myapp");
-\`\`\`
-
-## Widget Patterns
-
-### Container Widgets
-
-**Box** - Linear layout:
-\`\`\`tsx
-<Box orientation={Gtk.Orientation.VERTICAL} spacing={12}>
-    <Label label="First" />
-    <Label label="Second" />
-</Box>
-\`\`\`
-
-**Grid** - 2D positioning:
-\`\`\`tsx
-<Grid.Root spacing={10}>
-    <Grid.Child column={0} row={0}>
-        <Label label="Top-left" />
-    </Grid.Child>
-    <Grid.Child column={1} row={0} columnSpan={2}>
-        <Label label="Spans 2 columns" />
-    </Grid.Child>
-</Grid.Root>
-\`\`\`
-
-**Stack** - Page-based container:
-\`\`\`tsx
-<Stack.Root visibleChildName="page1">
-    <Stack.Page name="page1" title="Page 1">
-        <Label label="Content 1" />
-    </Stack.Page>
-    <Stack.Page name="page2" title="Page 2">
-        <Label label="Content 2" />
-    </Stack.Page>
-</Stack.Root>
-\`\`\`
-
-**Notebook** - Tabbed container:
-\`\`\`tsx
-<Notebook.Root>
-    <Notebook.Page label="Tab 1">
-        <Content1 />
-    </Notebook.Page>
-    <Notebook.Page label="Tab 2">
-        <Content2 />
-    </Notebook.Page>
-</Notebook.Root>
-\`\`\`
-
-**Paned** - Resizable split:
-\`\`\`tsx
-<Paned.Root orientation={Gtk.Orientation.HORIZONTAL} position={280}>
-    <Paned.StartChild>
-        <SideBar />
-    </Paned.StartChild>
-    <Paned.EndChild>
-        <MainContent />
-    </Paned.EndChild>
-</Paned.Root>
-\`\`\`
-
-### Virtual Scrolling Lists
-
-**ListView** - High-performance scrollable list with selection:
-\`\`\`tsx
-<ListView.Root
-    vexpand
-    selected={[selectedId]}
-    selectionMode={Gtk.SelectionMode.SINGLE}
-    onSelectionChanged={(ids) => setSelectedId(ids[0])}
-    renderItem={(item: Item | null) => (
-        <Label label={item?.text ?? ""} />
-    )}
->
-    {items.map(item => (
-        <ListView.Item key={item.id} id={item.id} item={item} />
-    ))}
-</ListView.Root>
-\`\`\`
-
-**GridView** - Grid-based virtual scrolling:
-\`\`\`tsx
-<GridView.Root
-    vexpand
-    renderItem={(item: Item | null) => (
-        <Box orientation={Gtk.Orientation.VERTICAL}>
-            <Image iconName={item?.icon ?? "image-missing"} />
-            <Label label={item?.name ?? ""} />
-        </Box>
-    )}
->
-    {items.map(item => (
-        <GridView.Item key={item.id} id={item.id} item={item} />
-    ))}
-</GridView.Root>
-\`\`\`
-
-**ColumnView** - Table with sortable columns:
-\`\`\`tsx
-<ColumnView.Root
-    sortColumn="name"
-    sortOrder={Gtk.SortType.ASCENDING}
-    onSortChange={handleSort}
->
-    <ColumnView.Column
-        title="Name"
-        id="name"
-        expand
-        sortable
-        renderCell={(item: Item | null) => (
-            <Label label={item?.name ?? ""} />
-        )}
-    />
-    {items.map(item => (
-        <ColumnView.Item key={item.id} id={item.id} item={item} />
-    ))}
-</ColumnView.Root>
-\`\`\`
-
-**DropDown** - String selection widget:
-\`\`\`tsx
-<DropDown.Root>
-    {options.map(opt => (
-        <DropDown.Item key={opt.value} id={opt.value} label={opt.label} />
-    ))}
-</DropDown.Root>
-\`\`\`
-
-### HeaderBar
-
-Pack widgets at start and end of the title bar:
-\`\`\`tsx
-<HeaderBar.Root>
-    <HeaderBar.Start>
-        <Button iconName="go-previous-symbolic" />
-    </HeaderBar.Start>
-    <HeaderBar.End>
-        <MenuButton.Root iconName="open-menu-symbolic" />
-    </HeaderBar.End>
-</HeaderBar.Root>
-\`\`\`
-
-### ActionBar
-
-Bottom bar with packed widgets:
-\`\`\`tsx
-<ActionBar.Root>
-    <ActionBar.Start>
-        <Button label="Cancel" />
-    </ActionBar.Start>
-    <ActionBar.End>
-        <Button label="Save" cssClasses={["suggested-action"]} />
-    </ActionBar.End>
-</ActionBar.Root>
-\`\`\`
-
-### Controlled Input
-
-Entry requires two-way binding:
-\`\`\`tsx
-const [text, setText] = useState("");
-
-<Entry
-    text={text}
-    onChanged={(entry) => setText(entry.getText())}
-    placeholder="Type here..."
-/>
-\`\`\`
-
-### Declarative Menus
-
-\`\`\`tsx
-<ApplicationMenu>
-    <Menu.Submenu label="File">
-        <Menu.Item
-            label="New"
-            onActivate={handleNew}
-            accels="<Control>n"
-        />
-        <Menu.Section>
-            <Menu.Item label="Quit" onActivate={quit} accels="<Control>q" />
-        </Menu.Section>
-    </Menu.Submenu>
-</ApplicationMenu>
-\`\`\`
-
-## Signal Handling
-
-GTK signals map to \`on<SignalName>\` props:
-- \`clicked\` → \`onClicked\`
-- \`toggled\` → \`onToggled\`
-- \`changed\` → \`onChanged\`
-- \`notify::selected\` → \`onNotifySelected\`
-
-## Widget References
-
-\`\`\`tsx
-import { useRef } from "react";
-
-const entryRef = useRef<Gtk.Entry | null>(null);
-<Entry ref={entryRef} />
-// Later: entryRef.current?.getText()
-\`\`\`
-
-## Portals
-
-\`\`\`tsx
-import { createPortal } from "@gtkx/react";
-
-{createPortal(<AboutDialog programName="My App" />)}
-\`\`\`
-
-## Constraints
-
-- **GTK is single-threaded**: All widget operations on main thread
-- **Virtual lists need immutable data**: Use stable object references
-- **ToggleButton auto-prevents feedback loops**: Safe for controlled state
-- **Entry needs two-way binding**: Use \`onChanged\` to sync state
-
-For detailed widget reference, see [WIDGETS.md](WIDGETS.md).
-For code examples, see [EXAMPLES.md](EXAMPLES.md).
-`;
-};
-const generateWidgetsMd = () => {
-    return `# GTKX Widget Reference
-
-## Container Widgets
-
-### Box
-Linear layout container.
-
-\`\`\`tsx
-<Box orientation={Gtk.Orientation.VERTICAL} spacing={12}>
-    <Label label="Child 1" />
-    <Label label="Child 2" />
-</Box>
-\`\`\`
-
-Props:
-- \`orientation\`: \`Gtk.Orientation.HORIZONTAL\` | \`Gtk.Orientation.VERTICAL\`
-- \`spacing\`: number (pixels between children)
-- \`homogeneous\`: boolean (equal child sizes)
-
-### Grid
-2D grid layout with explicit positioning.
-
-\`\`\`tsx
-<Grid.Root spacing={10} rowSpacing={5} columnSpacing={5}>
-    <Grid.Child column={0} row={0}>
-        <Label label="Top-left" />
-    </Grid.Child>
-    <Grid.Child column={1} row={0} columnSpan={2}>
-        <Label label="Spans 2 columns" />
-    </Grid.Child>
-</Grid.Root>
-\`\`\`
-
-Grid.Child props (consumed, not passed to GTK):
-- \`column\`: number (0-indexed)
-- \`row\`: number (0-indexed)
-- \`columnSpan\`: number (default 1)
-- \`rowSpan\`: number (default 1)
-
-### Stack
-Shows one child at a time, switchable by name.
-
-\`\`\`tsx
-<Stack.Root visibleChildName="page1">
-    <Stack.Page name="page1" title="First" iconName="document-new">
-        <Content1 />
-    </Stack.Page>
-    <Stack.Page name="page2" title="Second">
-        <Content2 />
-    </Stack.Page>
-</Stack.Root>
-\`\`\`
-
-Stack.Page props (consumed):
-- \`name\`: string (required, unique identifier)
-- \`title\`: string (display title)
-- \`iconName\`: string (icon name)
-
-### Notebook
-Tabbed container with visible tabs.
-
-\`\`\`tsx
-<Notebook.Root>
-    <Notebook.Page label="Tab 1">
-        <Content1 />
-    </Notebook.Page>
-    <Notebook.Page label="Tab 2">
-        <Content2 />
-    </Notebook.Page>
-</Notebook.Root>
-\`\`\`
-
-Notebook.Page props (consumed):
-- \`label\`: string (tab label)
-
-### Paned
-Resizable split container with draggable divider.
-
-\`\`\`tsx
-<Paned.Root
-    orientation={Gtk.Orientation.HORIZONTAL}
-    position={280}
-    shrinkStartChild={false}
-    shrinkEndChild={false}
->
-    <Paned.StartChild>
-        <SidePanel />
-    </Paned.StartChild>
-    <Paned.EndChild>
-        <MainContent />
-    </Paned.EndChild>
-</Paned.Root>
-\`\`\`
-
-Props:
-- \`orientation\`: \`Gtk.Orientation.HORIZONTAL\` | \`Gtk.Orientation.VERTICAL\`
-- \`position\`: number (divider position in pixels)
-- \`shrinkStartChild\`: boolean
-- \`shrinkEndChild\`: boolean
-
-## Virtual Scrolling Widgets
-
-### ListView
-High-performance scrollable list with virtual rendering and selection support.
-
-\`\`\`tsx
-<ListView.Root
-    vexpand
-    selected={[selectedId]}
-    selectionMode={Gtk.SelectionMode.SINGLE}
-    onSelectionChanged={(ids) => setSelectedId(ids[0])}
-    renderItem={(item: Item | null) => (
-        <Label label={item?.text ?? ""} />
-    )}
->
-    {items.map(item => (
-        <ListView.Item key={item.id} id={item.id} item={item} />
-    ))}
-</ListView.Root>
-\`\`\`
-
-Props:
-- \`renderItem\`: \`(item: T | null) => ReactElement\` (required)
-- \`selected\`: string[] (array of selected item IDs)
-- \`selectionMode\`: \`Gtk.SelectionMode.SINGLE\` | \`MULTIPLE\` | \`NONE\`
-- \`onSelectionChanged\`: \`(ids: string[]) => void\`
-
-ListView.Item props:
-- \`id\`: string (required, unique identifier for selection)
-- \`item\`: T (the data item)
-
-### GridView
-Grid-based virtual scrolling. Same API as ListView but renders items in a grid.
-
-\`\`\`tsx
-<GridView.Root
-    vexpand
-    renderItem={(item: Item | null) => (
-        <Box orientation={Gtk.Orientation.VERTICAL}>
-            <Image iconName={item?.icon ?? "image-missing"} />
-            <Label label={item?.name ?? ""} />
-        </Box>
-    )}
->
-    {items.map(item => (
-        <GridView.Item key={item.id} id={item.id} item={item} />
-    ))}
-</GridView.Root>
-\`\`\`
-
-### ColumnView
-Table with sortable columns.
-
-\`\`\`tsx
-<ColumnView.Root
-    sortColumn="name"
-    sortOrder={Gtk.SortType.ASCENDING}
-    onSortChange={(column, order) => handleSort(column, order)}
->
-    <ColumnView.Column
-        title="Name"
-        id="name"
-        expand
-        resizable
-        sortable
-        renderCell={(item: Item | null) => (
-            <Label label={item?.name ?? ""} />
-        )}
-    />
-    {items.map(item => (
-        <ColumnView.Item key={item.id} id={item.id} item={item} />
-    ))}
-</ColumnView.Root>
-\`\`\`
-
-ColumnView.Column props:
-- \`title\`: string (column header)
-- \`id\`: string (used for sorting)
-- \`expand\`: boolean (fill available space)
-- \`resizable\`: boolean (user can resize)
-- \`sortable\`: boolean (clicking header triggers sort)
-- \`fixedWidth\`: number (fixed width in pixels)
-- \`renderCell\`: \`(item: T | null) => ReactElement\`
-
-### DropDown
-String selection dropdown.
-
-\`\`\`tsx
-<DropDown.Root>
-    {options.map(opt => (
-        <DropDown.Item key={opt.value} id={opt.value} label={opt.label} />
-    ))}
-</DropDown.Root>
-\`\`\`
-
-DropDown.Item props:
-- \`id\`: string (unique identifier)
-- \`label\`: string (display text)
-
-## Header Widgets
-
-### HeaderBar
-Title bar with packed widgets at start and end.
-
-\`\`\`tsx
-<HeaderBar.Root>
-    <HeaderBar.Start>
-        <Button iconName="go-previous-symbolic" />
-    </HeaderBar.Start>
-    <HeaderBar.End>
-        <MenuButton.Root iconName="open-menu-symbolic" />
-    </HeaderBar.End>
-</HeaderBar.Root>
-\`\`\`
-
-### ActionBar
-Bottom action bar with start/end packing.
-
-\`\`\`tsx
-<ActionBar.Root>
-    <ActionBar.Start>
-        <Button label="Cancel" />
-    </ActionBar.Start>
-    <ActionBar.End>
-        <Button label="Save" cssClasses={["suggested-action"]} />
-    </ActionBar.End>
-</ActionBar.Root>
-\`\`\`
-
-## Input Widgets
-
-### Entry
-Single-line text input. Requires two-way binding for controlled behavior.
-
-\`\`\`tsx
-const [text, setText] = useState("");
-
-<Entry
-    text={text}
-    onChanged={(entry) => setText(entry.getText())}
-    placeholder="Enter text..."
-/>
-\`\`\`
-
-### ToggleButton
-Toggle button with controlled state. Auto-prevents signal feedback loops.
-
-\`\`\`tsx
-const [active, setActive] = useState(false);
-
-<ToggleButton.Root
-    active={active}
-    onToggled={() => setActive(!active)}
-    label="Toggle me"
-/>
-\`\`\`
-
-## Display Widgets
-
-### Label
-\`\`\`tsx
-<Label label="Hello World" halign={Gtk.Align.START} wrap useMarkup />
-\`\`\`
-
-### Button
-\`\`\`tsx
-<Button label="Click me" onClicked={() => handleClick()} iconName="document-new" />
-\`\`\`
-
-### MenuButton
-\`\`\`tsx
-<MenuButton.Root label="Options" iconName="open-menu">
-    <MenuButton.Popover>
-        <PopoverMenu.Root>
-            <Menu.Item label="Action" onActivate={handle} />
-        </PopoverMenu.Root>
-    </MenuButton.Popover>
-</MenuButton.Root>
-\`\`\`
-
-## Menu Widgets
-
-### ApplicationMenu
-\`\`\`tsx
-<ApplicationMenu>
-    <Menu.Submenu label="File">
-        <Menu.Item label="New" onActivate={handleNew} accels="<Control>n" />
-        <Menu.Section>
-            <Menu.Item label="Quit" onActivate={quit} accels="<Control>q" />
-        </Menu.Section>
-    </Menu.Submenu>
-</ApplicationMenu>
-\`\`\`
-
-### Menu.Item
-Props:
-- \`label\`: string
-- \`onActivate\`: \`() => void\`
-- \`accels\`: string | string[] (e.g., "<Control>n")
-
-### Menu.Section
-Groups menu items with optional label.
-
-### Menu.Submenu
-Nested submenu.
-
-## Window Widgets
-
-### ApplicationWindow
-\`\`\`tsx
-<ApplicationWindow
-    title="My App"
-    defaultWidth={800}
-    defaultHeight={600}
-    showMenubar
-    onCloseRequest={() => false}
->
-    <MainContent />
-</ApplicationWindow>
-\`\`\`
-
-## Common Props
-
-All widgets support:
-- \`hexpand\` / \`vexpand\`: boolean (expand to fill space)
-- \`halign\` / \`valign\`: \`Gtk.Align.START\` | \`CENTER\` | \`END\` | \`FILL\`
-- \`marginStart\` / \`marginEnd\` / \`marginTop\` / \`marginBottom\`: number
-- \`sensitive\`: boolean (enabled/disabled)
-- \`visible\`: boolean
-- \`cssClasses\`: string[]
-`;
-};
-const generateExamplesMd = () => {
-    return `# GTKX Code Examples
-
-## Application Structure
-
-### Basic App with State
-
-\`\`\`tsx
-import * as Gtk from "@gtkx/ffi/gtk";
-import { ApplicationWindow, Box, Label, quit } from "@gtkx/react";
-import { useCallback, useState } from "react";
-
-interface Todo {
-    id: number;
-    text: string;
-    completed: boolean;
-}
-
-let nextId = 1;
-
-export const App = () => {
-    const [todos, setTodos] = useState<Todo[]>([]);
-
-    const addTodo = useCallback((text: string) => {
-        setTodos((prev) => [...prev, { id: nextId++, text, completed: false }]);
-    }, []);
-
-    const toggleTodo = useCallback((id: number) => {
-        setTodos((prev) =>
-            prev.map((todo) =>
-                todo.id === id ? { ...todo, completed: !todo.completed } : todo
-            )
-        );
-    }, []);
-
-    return (
-        <ApplicationWindow title="Todo App" defaultWidth={400} defaultHeight={500} onCloseRequest={quit}>
-            <Box orientation={Gtk.Orientation.VERTICAL} spacing={16} marginTop={16} marginStart={16} marginEnd={16}>
-                <Label label="Todo App" />
-            </Box>
-        </ApplicationWindow>
-    );
-};
-
-export const appId = "com.gtkx.todo";
-\`\`\`
-
-## Layout Patterns
-
-### Grid for Forms
-
-\`\`\`tsx
-import * as Gtk from "@gtkx/ffi/gtk";
-import { Button, Entry, Grid, Label } from "@gtkx/react";
-import { useState } from "react";
-
-const FormLayout = () => {
-    const [name, setName] = useState("");
-    const [email, setEmail] = useState("");
-
-    return (
-        <Grid.Root rowSpacing={8} columnSpacing={12}>
-            <Grid.Child column={0} row={0}>
-                <Label label="Name:" halign={Gtk.Align.END} />
-            </Grid.Child>
-            <Grid.Child column={1} row={0}>
-                <Entry text={name} onChanged={(e) => setName(e.getText())} hexpand />
-            </Grid.Child>
-            <Grid.Child column={0} row={1}>
-                <Label label="Email:" halign={Gtk.Align.END} />
-            </Grid.Child>
-            <Grid.Child column={1} row={1}>
-                <Entry text={email} onChanged={(e) => setEmail(e.getText())} hexpand />
-            </Grid.Child>
-            <Grid.Child column={0} row={2} columnSpan={2}>
-                <Button label="Submit" halign={Gtk.Align.END} marginTop={8} />
-            </Grid.Child>
-        </Grid.Root>
-    );
-};
-\`\`\`
-
-### Stack with StackSwitcher
-
-\`\`\`tsx
-import * as Gtk from "@gtkx/ffi/gtk";
-import { Box, Label, Stack, StackSwitcher } from "@gtkx/react";
-
-const TabContainer = () => (
-    <Box orientation={Gtk.Orientation.VERTICAL} spacing={8}>
-        <StackSwitcher.Root
-            ref={(switcher: Gtk.StackSwitcher | null) => {
-                if (switcher) {
-                    const stack = switcher.getParent()?.getLastChild() as Gtk.Stack | null;
-                    if (stack) switcher.setStack(stack);
-                }
-            }}
-        />
-        <Stack.Root transitionType={Gtk.StackTransitionType.SLIDE_LEFT_RIGHT} transitionDuration={200}>
-            <Stack.Page name="page1" title="First">
-                <Label label="First Page Content" />
-            </Stack.Page>
-            <Stack.Page name="page2" title="Second">
-                <Label label="Second Page Content" />
-            </Stack.Page>
-        </Stack.Root>
-    </Box>
-);
-\`\`\`
-
-## Virtual Scrolling Lists
-
-### ListView with Selection
-
-\`\`\`tsx
-import * as Gtk from "@gtkx/ffi/gtk";
-import { Box, Label, ListView } from "@gtkx/react";
-import { useState } from "react";
-
-interface Task {
-    id: string;
-    title: string;
-    completed: boolean;
-}
-
-const tasks: Task[] = [
-    { id: "1", title: "Learn GTK4", completed: true },
-    { id: "2", title: "Build React app", completed: false },
-];
-
-const TaskList = () => {
-    const [selectedId, setSelectedId] = useState<string | undefined>();
-
-    return (
-        <Box cssClasses={["card"]} heightRequest={250}>
-            <ListView.Root
-                vexpand
-                selected={selectedId ? [selectedId] : []}
-                onSelectionChanged={(ids) => setSelectedId(ids[0])}
-                renderItem={(task: Task | null) => (
-                    <Label
-                        label={task?.title ?? ""}
-                        cssClasses={task?.completed ? ["dim-label"] : []}
-                        halign={Gtk.Align.START}
-                        marginStart={12}
-                        marginTop={8}
-                        marginBottom={8}
-                    />
-                )}
-            >
-                {tasks.map((task) => (
-                    <ListView.Item key={task.id} id={task.id} item={task} />
-                ))}
-            </ListView.Root>
-        </Box>
-    );
-};
-\`\`\`
-
-### HeaderBar with Navigation
-
-\`\`\`tsx
-import * as Gtk from "@gtkx/ffi/gtk";
-import { ApplicationWindow, Box, Button, HeaderBar, Label, quit } from "@gtkx/react";
-import { useState } from "react";
-
-const AppWithHeaderBar = () => {
-    const [page, setPage] = useState("home");
-
-    return (
-        <ApplicationWindow title="My App" defaultWidth={600} defaultHeight={400} onCloseRequest={quit}>
-            <Box orientation={Gtk.Orientation.VERTICAL}>
-                <HeaderBar.Root>
-                    <HeaderBar.Start>
-                        {page !== "home" && (
-                            <Button iconName="go-previous-symbolic" onClicked={() => setPage("home")} />
-                        )}
-                    </HeaderBar.Start>
-                    <HeaderBar.End>
-                        <Button iconName="emblem-system-symbolic" onClicked={() => setPage("settings")} />
-                    </HeaderBar.End>
-                </HeaderBar.Root>
-                <Label label={page === "home" ? "Home Page" : "Settings Page"} vexpand />
-            </Box>
-        </ApplicationWindow>
-    );
-};
-\`\`\`
-
-## Menus
-
-### MenuButton with PopoverMenu
-
-\`\`\`tsx
-import * as Gtk from "@gtkx/ffi/gtk";
-import { Box, Label, Menu, MenuButton, PopoverMenu } from "@gtkx/react";
-import { useState } from "react";
-
-const MenuDemo = () => {
-    const [lastAction, setLastAction] = useState<string | null>(null);
-
-    return (
-        <Box orientation={Gtk.Orientation.VERTICAL} spacing={12}>
-            <Label label={\`Last action: \${lastAction ?? "(none)"}\`} />
-            <MenuButton.Root label="Actions">
-                <MenuButton.Popover>
-                    <PopoverMenu.Root>
-                        <Menu.Item label="New" onActivate={() => setLastAction("New")} accels="<Control>n" />
-                        <Menu.Item label="Open" onActivate={() => setLastAction("Open")} accels="<Control>o" />
-                        <Menu.Item label="Save" onActivate={() => setLastAction("Save")} accels="<Control>s" />
-                    </PopoverMenu.Root>
-                </MenuButton.Popover>
-            </MenuButton.Root>
-        </Box>
-    );
-};
-\`\`\`
-
-## Component Props Pattern
-
-### List Item Component
-
-\`\`\`tsx
-import * as Gtk from "@gtkx/ffi/gtk";
-import { Box, Button, CheckButton, Label } from "@gtkx/react";
-
-interface Todo {
-    id: number;
-    text: string;
-    completed: boolean;
-}
-
-interface TodoItemProps {
-    todo: Todo;
-    onToggle: (id: number) => void;
-    onDelete: (id: number) => void;
-}
-
-export const TodoItem = ({ todo, onToggle, onDelete }: TodoItemProps) => (
-    <Box orientation={Gtk.Orientation.HORIZONTAL} spacing={8}>
-        <CheckButton active={todo.completed} onToggled={() => onToggle(todo.id)} />
-        <Label label={todo.text} hexpand cssClasses={todo.completed ? ["dim-label"] : []} />
-        <Button iconName="edit-delete-symbolic" onClicked={() => onDelete(todo.id)} cssClasses={["flat"]} />
-    </Box>
-);
-\`\`\`
-`;
-};
-const generateExampleTest = (testing) => {
-    const imports = testing === "vitest"
-        ? `import { describe, it, expect, afterEach } from "vitest";`
-        : testing === "jest"
-            ? `import { describe, it, expect, afterEach } from "@jest/globals";`
-            : `import { describe, it, after } from "node:test";
-import { strict as assert } from "node:assert";`;
-    const afterEachFn = testing === "node" ? "after" : "afterEach";
-    const assertion = testing === "node" ? `assert.ok(button, "Button should be rendered");` : `expect(button).toBeDefined();`;
-    return `${imports}
-import * as Gtk from "@gtkx/ffi/gtk";
-import { cleanup, render, screen } from "@gtkx/testing";
-import App from "../src/app.js";
-
-${afterEachFn}(async () => {
-    await cleanup();
-});
-
-describe("App", () => {
-    it("renders the increment button", async () => {
-        await render(<App />, { wrapper: false });
-        const button = await screen.findByRole(Gtk.AccessibleRole.BUTTON, { name: "Increment" });
-        ${assertion}
-    });
-});
-`;
-};
-const generateVitestConfig = () => {
-    return `import { defineConfig } from "vitest/config";
-
-export default defineConfig({
-    test: {
-        include: ["tests/**/*.test.{ts,tsx}"],
-        globals: false,
-    },
-    esbuild: {
-        jsx: "automatic",
-    },
-});
-`;
-};
-const generateJestConfig = () => {
-    return `/** @type {import('jest').Config} */
-export default {
-    preset: "ts-jest/presets/default-esm",
-    testEnvironment: "node",
-    testMatch: ["**/tests/**/*.test.ts"],
-    extensionsToTreatAsEsm: [".ts", ".tsx"],
-    moduleNameMapper: {
-        "^(\\\\.{1,2}/.*)\\\\.js$": "$1",
-    },
-    transform: {
-        "^.+\\\\.tsx?$": [
-            "ts-jest",
-            {
-                useESM: true,
-                tsconfig: "tsconfig.json",
-            },
-        ],
-    },
-};
-`;
+    return { name, appId, title, testing };
 };
 export const getAddCommand = (pm, deps, dev) => {
     const devFlag = dev ? (pm === "npm" ? "--save-dev" : "-D") : "";
@@ -1056,7 +81,6 @@ const promptForOptions = async (options) => {
                 if (existsSync(resolve(process.cwd(), value))) {
                     return `Directory "${value}" already exists`;
                 }
-                return undefined;
             },
         }));
     const defaultAppId = suggestAppId(name);
@@ -1071,7 +95,6 @@ const promptForOptions = async (options) => {
                 if (!isValidAppId(value)) {
                     return "App ID must be reverse domain notation (e.g., com.example.myapp)";
                 }
-                return undefined;
             },
         }));
     const packageManager = options.packageManager ??
@@ -1105,33 +128,35 @@ const promptForOptions = async (options) => {
 };
 const scaffoldProject = (projectPath, resolved) => {
     const { name, appId, testing, claudeSkills } = resolved;
+    const context = createTemplateContext(name, appId, testing);
     mkdirSync(projectPath, { recursive: true });
     mkdirSync(join(projectPath, "src"), { recursive: true });
     if (testing !== "none") {
         mkdirSync(join(projectPath, "tests"), { recursive: true });
     }
-    writeFileSync(join(projectPath, "package.json"), generatePackageJson(name, appId, testing));
-    writeFileSync(join(projectPath, "tsconfig.json"), generateTsConfig());
-    writeFileSync(join(projectPath, "src", "app.tsx"), generateAppTsx(name, appId));
-    writeFileSync(join(projectPath, "src", "index.tsx"), generateIndexTsx());
-    writeFileSync(join(projectPath, ".gitignore"), generateGitignore());
+    writeFileSync(join(projectPath, "package.json"), renderFile("package.json.ejs", context));
+    writeFileSync(join(projectPath, "tsconfig.json"), renderFile("tsconfig.json.ejs", context));
+    writeFileSync(join(projectPath, "src", "app.tsx"), renderFile("src/app.tsx.ejs", context));
+    writeFileSync(join(projectPath, "src", "dev.tsx"), renderFile("src/dev.tsx.ejs", context));
+    writeFileSync(join(projectPath, "src", "index.tsx"), renderFile("src/index.tsx.ejs", context));
+    writeFileSync(join(projectPath, ".gitignore"), renderFile("gitignore.ejs", context));
     if (claudeSkills) {
         const skillsDir = join(projectPath, ".claude", "skills", "developing-gtkx-apps");
         mkdirSync(skillsDir, { recursive: true });
-        writeFileSync(join(skillsDir, "SKILL.md"), generateSkillMd());
-        writeFileSync(join(skillsDir, "WIDGETS.md"), generateWidgetsMd());
-        writeFileSync(join(skillsDir, "EXAMPLES.md"), generateExamplesMd());
+        writeFileSync(join(skillsDir, "SKILL.md"), renderFile("claude/SKILL.md.ejs", context));
+        writeFileSync(join(skillsDir, "WIDGETS.md"), renderFile("claude/WIDGETS.md.ejs", context));
+        writeFileSync(join(skillsDir, "EXAMPLES.md"), renderFile("claude/EXAMPLES.md.ejs", context));
     }
     if (testing === "vitest") {
-        writeFileSync(join(projectPath, "vitest.config.ts"), generateVitestConfig());
-        writeFileSync(join(projectPath, "tests", "app.test.tsx"), generateExampleTest(testing));
+        writeFileSync(join(projectPath, "vitest.config.ts"), renderFile("config/vitest.config.ts.ejs", context));
+        writeFileSync(join(projectPath, "tests", "app.test.tsx"), renderFile("tests/app.test.tsx.ejs", context));
     }
     else if (testing === "jest") {
-        writeFileSync(join(projectPath, "jest.config.js"), generateJestConfig());
-        writeFileSync(join(projectPath, "tests", "app.test.tsx"), generateExampleTest(testing));
+        writeFileSync(join(projectPath, "jest.config.js"), renderFile("config/jest.config.js.ejs", context));
+        writeFileSync(join(projectPath, "tests", "app.test.tsx"), renderFile("tests/app.test.tsx.ejs", context));
     }
     else if (testing === "node") {
-        writeFileSync(join(projectPath, "tests", "app.test.tsx"), generateExampleTest(testing));
+        writeFileSync(join(projectPath, "tests", "app.test.tsx"), renderFile("tests/app.test.tsx.ejs", context));
     }
 };
 const getDevDependencies = (testing) => {
@@ -1176,9 +201,32 @@ To run tests, you need xvfb installed:
     p.note(`${nextSteps}${testingNote}`, "Next steps");
 };
 /**
- * Creates a new GTKX application with interactive prompts.
- * Scaffolds project structure, installs dependencies, and sets up configuration.
- * @param options - Pre-filled options to skip interactive prompts
+ * Creates a new GTKX project with interactive prompts.
+ *
+ * Scaffolds a complete project structure including:
+ * - TypeScript configuration
+ * - React component template
+ * - Development server entry point
+ * - Optional testing setup
+ * - Optional Claude Code skills
+ *
+ * @param options - Pre-filled options to skip prompts
+ *
+ * @example
+ * ```tsx
+ * import { createApp } from "@gtkx/cli";
+ *
+ * // Interactive mode
+ * await createApp();
+ *
+ * // With pre-filled options
+ * await createApp({
+ *   name: "my-app",
+ *   appId: "com.example.myapp",
+ *   packageManager: "pnpm",
+ *   testing: "vitest",
+ * });
+ * ```
  */
 export const createApp = async (options = {}) => {
     p.intro("Create GTKX App");