@nitrostack/cli 1.0.0

package/templates/typescript-pizzaz/src/modules/pizzaz/pizzaz.tools.ts

@@ -0,0 +1,197 @@
+import { ToolDecorator as Tool, Widget, ExecutionContext, Injectable, z } from 'nitrostack';
+import { PizzazService } from './pizzaz.service.js';
+
+const ShowMapSchema = z.object({
+    filter: z.enum(['open_now', 'top_rated', 'all']).optional().describe('Filter to apply'),
+});
+
+const ShowListSchema = z.object({
+    openNow: z.boolean().optional().describe('Show only shops that are currently open'),
+    minRating: z.number().min(1).max(5).optional().describe('Minimum rating (1-5)'),
+    maxPrice: z.number().min(1).max(3).optional().describe('Maximum price level (1-3)'),
+});
+
+const ShowShopSchema = z.object({
+    shopId: z.string().describe('ID of the pizza shop to display'),
+});
+
+@Injectable()
+export class PizzazTools {
+    constructor(private readonly pizzazService: PizzazService) { }
+
+    @Tool({
+        name: 'show_pizza_map',
+        description: 'Display an interactive map of pizza shops in San Francisco',
+        inputSchema: ShowMapSchema,
+        examples: {
+            request: { filter: 'all' },
+            response: {
+                shops: [
+                    {
+                        id: 'tonys-pizza',
+                        name: "Tony's New York Pizza",
+                        description: "Authentic New York-style pizza with a crispy thin crust",
+                        address: "123 Main St, San Francisco, CA 94102",
+                        coords: [-122.4194, 37.7749],
+                        rating: 4.5,
+                        reviews: 342,
+                        priceLevel: 2,
+                        cuisine: ['Italian', 'Pizza'],
+                        hours: { open: '11:00 AM', close: '10:00 PM' },
+                        phone: '(415) 555-0123',
+                        website: 'https://tonyspizza.example.com',
+                        image: 'https://images.unsplash.com/photo-1513104890138-7c749659a591',
+                        specialties: ['Margherita', 'Pepperoni'],
+                        openNow: true
+                    },
+                    {
+                        id: 'bella-napoli',
+                        name: 'Bella Napoli',
+                        description: "Traditional Neapolitan pizza baked in a wood-fired oven",
+                        address: "456 Market St, San Francisco, CA 94103",
+                        coords: [-122.4089, 37.7858],
+                        rating: 4.8,
+                        reviews: 521,
+                        priceLevel: 3,
+                        cuisine: ['Italian', 'Pizza'],
+                        hours: { open: '12:00 PM', close: '11:00 PM' },
+                        phone: '(415) 555-0456',
+                        image: 'https://images.unsplash.com/photo-1574071318508-1cdbab80d002',
+                        specialties: ['Marinara', 'Quattro Formaggi'],
+                        openNow: true
+                    }
+                ],
+                filter: 'all',
+                totalShops: 2
+            }
+        }
+    })
+    @Widget('pizza-map')
+    async showPizzaMap(args: z.infer<typeof ShowMapSchema>, ctx: ExecutionContext) {
+        let shops;
+
+        switch (args.filter) {
+            case 'open_now':
+                shops = this.pizzazService.getShopsFiltered({ openNow: true });
+                break;
+            case 'top_rated':
+                shops = this.pizzazService.getTopRatedShops();
+                break;
+            default:
+                shops = this.pizzazService.getAllShops();
+        }
+
+        ctx.logger.info('Showing pizza map', { filter: args.filter, totalShops: shops.length });
+
+        return {
+            shops,
+            filter: args.filter || 'all',
+            totalShops: shops.length,
+        };
+    }
+
+    @Tool({
+        name: 'show_pizza_list',
+        description: 'Display a list of pizza shops with filtering and sorting options',
+        inputSchema: ShowListSchema,
+        examples: {
+            request: { openNow: true },
+            response: {
+                shops: [
+                    {
+                        id: 'tonys-pizza',
+                        name: "Tony's New York Pizza",
+                        description: "Authentic New York-style pizza with a crispy thin crust",
+                        address: "123 Main St, San Francisco, CA 94102",
+                        coords: [-122.4194, 37.7749],
+                        rating: 4.5,
+                        reviews: 342,
+                        priceLevel: 2,
+                        cuisine: ['Italian', 'Pizza'],
+                        hours: { open: '11:00 AM', close: '10:00 PM' },
+                        phone: '(415) 555-0123',
+                        website: 'https://tonyspizza.example.com',
+                        image: 'https://images.unsplash.com/photo-1513104890138-7c749659a591',
+                        specialties: ['Margherita', 'Pepperoni'],
+                        openNow: true
+                    }
+                ],
+                filters: { openNow: true },
+                totalShops: 1
+            }
+        }
+    })
+    @Widget('pizza-list')
+    async showPizzaList(args: z.infer<typeof ShowListSchema>, ctx: ExecutionContext) {
+        const shops = this.pizzazService.getShopsFiltered(args);
+
+        ctx.logger.info('Showing pizza list', { filters: args, totalShops: shops.length });
+
+        return {
+            shops,
+            filters: args,
+            totalShops: shops.length,
+        };
+    }
+
+    @Tool({
+        name: 'show_pizza_shop',
+        description: 'Display detailed information about a specific pizza shop',
+        inputSchema: ShowShopSchema,
+        examples: {
+            request: { shopId: 'tonys-pizza' },
+            response: {
+                shop: {
+                    id: 'tonys-pizza',
+                    name: "Tony's New York Pizza",
+                    description: "Authentic New York-style pizza with a crispy thin crust and fresh toppings",
+                    address: "123 Main St, San Francisco, CA 94102",
+                    coords: [-122.4194, 37.7749],
+                    rating: 4.5,
+                    reviews: 342,
+                    priceLevel: 2,
+                    cuisine: ['Italian', 'Pizza', 'New York Style'],
+                    hours: { open: '11:00 AM', close: '10:00 PM' },
+                    phone: '(415) 555-0123',
+                    website: 'https://tonyspizza.example.com',
+                    image: 'https://images.unsplash.com/photo-1513104890138-7c749659a591',
+                    specialties: ['Margherita', 'Pepperoni', 'White Pizza'],
+                    openNow: true
+                },
+                relatedShops: [
+                    {
+                        id: 'bella-napoli',
+                        name: 'Bella Napoli',
+                        description: "Traditional Neapolitan pizza baked in a wood-fired oven",
+                        address: "456 Market St, San Francisco, CA 94103",
+                        coords: [-122.4089, 37.7858],
+                        rating: 4.8,
+                        reviews: 521,
+                        priceLevel: 3,
+                        cuisine: ['Italian', 'Pizza'],
+                        hours: { open: '12:00 PM', close: '11:00 PM' },
+                        phone: '(415) 555-0456',
+                        image: 'https://images.unsplash.com/photo-1574071318508-1cdbab80d002',
+                        specialties: ['Marinara', 'Quattro Formaggi'],
+                        openNow: true
+                    }
+                ]
+            }
+        }
+    })
+    @Widget('pizza-shop')
+    async showPizzaShop(args: z.infer<typeof ShowShopSchema>, ctx: ExecutionContext) {
+        const shop = this.pizzazService.getShopById(args.shopId);
+
+        if (!shop) {
+            throw new Error(`Pizza shop not found: ${args.shopId}`);
+        }
+
+        ctx.logger.info('Showing pizza shop', { shopId: args.shopId, shopName: shop.name });
+
+        return {
+            shop,
+            relatedShops: this.pizzazService.getTopRatedShops(3).filter(s => s.id !== shop.id),
+        };
+    }
+}

package/templates/typescript-pizzaz/src/widgets/app/layout.tsx

@@ -0,0 +1,18 @@
+'use client';
+
+import { WidgetLayout } from '@nitrostack/widgets';
+import 'mapbox-gl/dist/mapbox-gl.css';
+
+export default function RootLayout({
+    children,
+}: {
+    children: React.ReactNode;
+}) {
+    return (
+        <html lang="en">
+            <body style={{ margin: 0, padding: 0, fontFamily: 'system-ui, sans-serif' }}>
+                <WidgetLayout>{children}</WidgetLayout>
+            </body>
+        </html>
+    );
+}

package/templates/typescript-pizzaz/src/widgets/app/pizza-list/page.tsx

@@ -0,0 +1,272 @@
+'use client';
+
+import { useTheme, useWidgetState, useMaxHeight, useWidgetSDK } from '@nitrostack/widgets';
+
+// Disable static generation - this is a dynamic widget
+export const dynamic = 'force-dynamic';
+import { PizzaCard } from '../../components/PizzaCard';
+import { SlidersHorizontal } from 'lucide-react';
+import { useState } from 'react';
+
+interface PizzaShop {
+    id: string;
+    name: string;
+    description: string;
+    address: string;
+    coords: [number, number];
+    rating: number;
+    reviews: number;
+    priceLevel: 1 | 2 | 3;
+    cuisine: string[];
+    hours: { open: string; close: string };
+    phone: string;
+    website?: string;
+    image: string;
+    specialties: string[];
+    openNow: boolean;
+}
+
+interface WidgetData {
+    shops: PizzaShop[];
+    filters: any;
+    totalShops: number;
+}
+
+export default function PizzaListWidget() {
+    const theme = useTheme();
+    const maxHeight = useMaxHeight();
+    const isDark = theme === 'dark';
+
+    const { isReady, getToolOutput, callTool } = useWidgetSDK();
+
+    // Access tool output
+    const data = getToolOutput<WidgetData>();
+
+    console.log('🍕 PizzaListWidget render:', { isReady, hasData: !!data, data });
+
+    // Persistent state for view mode and favorites
+    const [state, setState] = useWidgetState<{
+        viewMode: 'grid' | 'list';
+        favorites: string[];
+        sortBy: 'rating' | 'name' | 'price';
+    }>(() => ({
+        viewMode: 'grid',
+        favorites: [],
+        sortBy: 'rating',
+    }));
+
+    const [showFilters, setShowFilters] = useState(false);
+
+    if (!data) {
+        return (
+            <div style={{
+                padding: '40px',
+                textAlign: 'center',
+                color: isDark ? '#fff' : '#000',
+            }}>
+                Loading pizza shops... {isReady ? '(SDK ready but no data)' : '(waiting for SDK)'}
+            </div>
+        );
+    }
+
+    // Check if shops array exists
+    if (!data.shops || !Array.isArray(data.shops)) {
+        console.error('❌ Invalid data structure:', data);
+        return (
+            <div style={{
+                padding: '40px',
+                textAlign: 'center',
+                color: isDark ? '#fff' : '#000',
+            }}>
+                Error: Invalid data structure. Expected shops array.
+                <pre style={{ marginTop: '16px', fontSize: '12px', textAlign: 'left' }}>
+                    {JSON.stringify(data, null, 2)}
+                </pre>
+            </div>
+        );
+    }
+
+    const toggleFavorite = (shopId: string) => {
+        const favorites = state?.favorites || [];
+        const newFavorites = favorites.includes(shopId)
+            ? favorites.filter(id => id !== shopId)
+            : [...favorites, shopId];
+
+        setState({ ...state, favorites: newFavorites });
+    };
+
+    const handleShopClick = async (shopId: string) => {
+        // Call the show_pizza_shop tool to show shop details
+        await callTool('show_pizza_shop', { shopId });
+    };
+
+    // Sort shops
+    let sortedShops = [...data.shops];
+    switch (state?.sortBy) {
+        case 'rating':
+            sortedShops.sort((a, b) => b.rating - a.rating);
+            break;
+        case 'name':
+            sortedShops.sort((a, b) => a.name.localeCompare(b.name));
+            break;
+        case 'price':
+            sortedShops.sort((a, b) => a.priceLevel - b.priceLevel);
+            break;
+    }
+
+    return (
+        <div style={{
+            background: isDark ? '#0a0a0a' : '#f9fafb',
+            minHeight: '400px',
+            maxHeight: maxHeight || '600px',
+            overflow: 'auto',
+        }}>
+            {/* Header */}
+            <div style={{
+                background: isDark ? '#1a1a1a' : '#ffffff',
+                borderBottom: `1px solid ${isDark ? '#333' : '#e5e7eb'}`,
+                padding: '12px 16px',
+                position: 'sticky',
+                top: 0,
+                zIndex: 10,
+            }}>
+                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '8px' }}>
+                    <div>
+                        <h1 style={{
+                            margin: '0 0 2px 0',
+                            fontSize: '18px',
+                            fontWeight: '700',
+                            color: isDark ? '#fff' : '#111',
+                        }}>
+                            🍕 Pizza Shops
+                        </h1>
+                        <p style={{
+                            margin: 0,
+                            fontSize: '12px',
+                            color: isDark ? '#999' : '#666',
+                        }}>
+                            {data.totalShops} shops found
+                        </p>
+                    </div>
+
+                    {/* Sort and Filter Controls */}
+                    <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
+                        <select
+                            value={state?.sortBy || 'rating'}
+                            onChange={(e) => setState({ ...state, sortBy: e.target.value as any })}
+                            style={{
+                                padding: '6px 10px',
+                                background: isDark ? '#1a1a1a' : '#fff',
+                                border: `1px solid ${isDark ? '#444' : '#d1d5db'}`,
+                                borderRadius: '6px',
+                                color: isDark ? '#fff' : '#111',
+                                fontSize: '12px',
+                                cursor: 'pointer',
+                                outline: 'none',
+                            }}
+                        >
+                            <option value="rating">⭐ Rating</option>
+                            <option value="name">🔤 Name</option>
+                            <option value="price">💰 Price</option>
+                        </select>
+
+                        <button
+                            onClick={() => setShowFilters(!showFilters)}
+                            style={{
+                                padding: '8px 12px',
+                                background: showFilters
+                                    ? (isDark ? '#333' : '#f3f4f6')
+                                    : 'transparent',
+                                border: `1px solid ${isDark ? '#444' : '#d1d5db'}`,
+                                borderRadius: '8px',
+                                cursor: 'pointer',
+                                color: isDark ? '#fff' : '#111',
+                            }}
+                        >
+                            <SlidersHorizontal size={18} />
+                        </button>
+                    </div>
+                </div>
+
+                {/* Filters */}
+                {showFilters && (
+                    <div style={{
+                        padding: '16px',
+                        background: isDark ? '#111' : '#f9fafb',
+                        borderRadius: '8px',
+                        marginTop: '12px',
+                    }}>
+                        <p style={{
+                            margin: '0 0 8px 0',
+                            fontSize: '12px',
+                            color: isDark ? '#999' : '#666',
+                        }}>
+                            Filters coming soon...
+                        </p>
+                    </div>
+                )}
+
+                {/* Favorites Count */}
+                {state?.favorites && state.favorites.length > 0 && (
+                    <div style={{
+                        marginTop: '12px',
+                        padding: '8px 12px',
+                        background: isDark ? '#1a1a1a' : '#fef3c7',
+                        border: `1px solid ${isDark ? '#333' : '#fbbf24'}`,
+                        borderRadius: '8px',
+                        fontSize: '14px',
+                        color: isDark ? '#fbbf24' : '#92400e',
+                    }}>
+                        ❤️ {state.favorites.length} favorite{state.favorites.length !== 1 ? 's' : ''}
+                    </div>
+                )}
+            </div>
+
+            {/* Horizontal Scrolling Shop Cards */}
+            <div style={{
+                padding: '12px 16px',
+                overflowX: 'auto',
+                overflowY: 'hidden',
+                scrollSnapType: 'x mandatory',
+                WebkitOverflowScrolling: 'touch',
+                scrollbarWidth: 'thin',
+            }}>
+                <div style={{
+                    display: 'flex',
+                    gap: '12px',
+                    paddingBottom: '4px',
+                }}>
+                    {sortedShops.map(shop => (
+                        <div
+                            key={shop.id}
+                            style={{
+                                minWidth: '280px',
+                                maxWidth: '280px',
+                                scrollSnapAlign: 'start',
+                                flexShrink: 0,
+                            }}
+                        >
+                            <PizzaCard
+                                shop={shop}
+                                isFavorite={state?.favorites?.includes(shop.id)}
+                                onToggleFavorite={toggleFavorite}
+                                onSelect={() => handleShopClick(shop.id)}
+                            />
+                        </div>
+                    ))}
+                </div>
+            </div>
+
+            {/* Footer */}
+            <div style={{
+                padding: '20px',
+                textAlign: 'center',
+                fontSize: '12px',
+                color: isDark ? '#666' : '#999',
+                borderTop: `1px solid ${isDark ? '#333' : '#e5e7eb'}`,
+            }}>
+                Powered by NitroStack • Theme: {theme || 'light'} • Scroll horizontally →
+            </div>
+        </div>
+    );
+}