helix-lang 11.0.0

package/library/notification-system/app/api/notifications/route.ts

@@ -0,0 +1,121 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+/**
+ * Server-Sent Events endpoint for real-time notifications.
+ *
+ * GET /api/notifications - Opens an SSE stream for the authenticated user.
+ * POST /api/notifications - Sends a notification (triggers SSE to all connected clients).
+ *
+ * Integration:
+ *   const eventSource = new EventSource('/api/notifications');
+ *   eventSource.onmessage = (event) => {
+ *       const notification = JSON.parse(event.data);
+ *       // Handle notification
+ *   };
+ */
+
+interface SSEClient {
+    id: string;
+    controller: ReadableStreamDefaultController;
+}
+
+// In-memory client registry (replace with Redis pub/sub for multi-instance)
+const clients = new Map<string, SSEClient>();
+
+function broadcastNotification(data: Record<string, unknown>) {
+    const message = `data: ${JSON.stringify(data)}\n\n`;
+    const encoder = new TextEncoder();
+    const encoded = encoder.encode(message);
+
+    for (const [id, client] of clients.entries()) {
+        try {
+            client.controller.enqueue(encoded);
+        } catch {
+            clients.delete(id);
+        }
+    }
+}
+
+export async function GET(request: NextRequest) {
+    const clientId = request.headers.get('x-client-id') || crypto.randomUUID();
+
+    const stream = new ReadableStream({
+        start(controller) {
+            clients.set(clientId, { id: clientId, controller });
+
+            // Send initial connection message
+            const encoder = new TextEncoder();
+            controller.enqueue(
+                encoder.encode(`data: ${JSON.stringify({ type: 'connected', clientId })}\n\n`)
+            );
+
+            // Heartbeat every 30s to keep connection alive
+            const heartbeat = setInterval(() => {
+                try {
+                    controller.enqueue(encoder.encode(': heartbeat\n\n'));
+                } catch {
+                    clearInterval(heartbeat);
+                    clients.delete(clientId);
+                }
+            }, 30000);
+
+            // Cleanup on close
+            request.signal.addEventListener('abort', () => {
+                clearInterval(heartbeat);
+                clients.delete(clientId);
+                try {
+                    controller.close();
+                } catch {
+                    // Already closed
+                }
+            });
+        },
+        cancel() {
+            clients.delete(clientId);
+        },
+    });
+
+    return new NextResponse(stream, {
+        headers: {
+            'Content-Type': 'text/event-stream',
+            'Cache-Control': 'no-cache',
+            'Connection': 'keep-alive',
+        },
+    });
+}
+
+export async function POST(request: NextRequest) {
+    try {
+        const body = await request.json();
+
+        const { type = 'info', title, message, targetUserId } = body;
+
+        if (!title) {
+            return NextResponse.json(
+                { error: 'Title is required' },
+                { status: 400 }
+            );
+        }
+
+        const notification = {
+            id: crypto.randomUUID(),
+            type,
+            title,
+            message: message || null,
+            targetUserId: targetUserId || null,
+            createdAt: new Date().toISOString(),
+        };
+
+        // Broadcast to connected clients
+        broadcastNotification(notification);
+
+        return NextResponse.json({
+            message: 'Notification sent',
+            notification,
+            connectedClients: clients.size,
+        });
+    } catch (error: unknown) {
+        const msg = error instanceof Error ? error.message : 'Failed to send notification';
+        return NextResponse.json({ error: msg }, { status: 500 });
+    }
+}

package/library/notification-system/components/notifications/NotificationBell.tsx

@@ -0,0 +1,154 @@
+'use client';
+
+import { useState, useRef, useEffect } from 'react';
+import { useNotifications } from './NotificationProvider';
+
+interface NotificationBellProps {
+    maxVisible?: number;
+}
+
+function formatRelativeTime(date: Date): string {
+    const now = Date.now();
+    const diffMs = now - date.getTime();
+    const diffSec = Math.floor(diffMs / 1000);
+    const diffMin = Math.floor(diffSec / 60);
+    const diffHour = Math.floor(diffMin / 60);
+    const diffDay = Math.floor(diffHour / 24);
+
+    if (diffSec < 60) return 'just now';
+    if (diffMin < 60) return `${diffMin}m ago`;
+    if (diffHour < 24) return `${diffHour}h ago`;
+    if (diffDay < 7) return `${diffDay}d ago`;
+    return date.toLocaleDateString();
+}
+
+const typeColors: Record<string, string> = {
+    success: 'bg-emerald-400',
+    error: 'bg-red-400',
+    warning: 'bg-amber-400',
+    info: 'bg-cyan-400',
+};
+
+export default function NotificationBell({ maxVisible = 10 }: NotificationBellProps) {
+    const { notifications, unreadCount, markAsRead, markAllAsRead, removeNotification } =
+        useNotifications();
+    const [open, setOpen] = useState(false);
+    const ref = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        function handleClickOutside(e: MouseEvent) {
+            if (ref.current && !ref.current.contains(e.target as Node)) {
+                setOpen(false);
+            }
+        }
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, []);
+
+    const visibleNotifications = notifications.slice(0, maxVisible);
+
+    return (
+        <div className="relative" ref={ref}>
+            {/* Bell button */}
+            <button
+                onClick={() => setOpen(!open)}
+                className="relative p-2 text-white/60 hover:text-white transition-colors rounded-lg hover:bg-white/5"
+            >
+                <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                    <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"
+                    />
+                </svg>
+
+                {/* Badge */}
+                {unreadCount > 0 && (
+                    <span className="absolute -top-0.5 -right-0.5 flex items-center justify-center min-w-[18px] h-[18px] px-1 bg-cyan-500 text-white text-[10px] font-bold rounded-full shadow-lg shadow-cyan-500/30">
+                        {unreadCount > 99 ? '99+' : unreadCount}
+                    </span>
+                )}
+            </button>
+
+            {/* Dropdown */}
+            {open && (
+                <div className="absolute right-0 top-full mt-2 w-80 backdrop-blur-xl bg-gray-900/95 border border-white/10 rounded-xl shadow-2xl z-50 overflow-hidden">
+                    {/* Header */}
+                    <div className="flex items-center justify-between px-4 py-3 border-b border-white/5">
+                        <h3 className="text-sm font-semibold text-white">Notifications</h3>
+                        {unreadCount > 0 && (
+                            <button
+                                onClick={markAllAsRead}
+                                className="text-xs text-cyan-400 hover:text-cyan-300 transition-colors"
+                            >
+                                Mark all read
+                            </button>
+                        )}
+                    </div>
+
+                    {/* List */}
+                    <div className="max-h-96 overflow-y-auto">
+                        {visibleNotifications.length === 0 ? (
+                            <div className="px-4 py-8 text-center">
+                                <svg className="w-8 h-8 mx-auto text-white/20 mb-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+                                    <path strokeLinecap="round" strokeLinejoin="round" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
+                                </svg>
+                                <p className="text-sm text-white/30">No notifications</p>
+                            </div>
+                        ) : (
+                            visibleNotifications.map((notification) => (
+                                <div
+                                    key={notification.id}
+                                    onClick={() => markAsRead(notification.id)}
+                                    className={`flex items-start gap-3 px-4 py-3 hover:bg-white/5 cursor-pointer transition-colors border-b border-white/5 last:border-0 ${
+                                        !notification.read ? 'bg-white/[0.02]' : ''
+                                    }`}
+                                >
+                                    {/* Type indicator */}
+                                    <div className={`w-2 h-2 rounded-full mt-1.5 flex-shrink-0 ${typeColors[notification.type] || 'bg-white/30'}`} />
+
+                                    {/* Content */}
+                                    <div className="flex-1 min-w-0">
+                                        <p className={`text-sm ${!notification.read ? 'text-white font-medium' : 'text-white/70'}`}>
+                                            {notification.title}
+                                        </p>
+                                        {notification.message && (
+                                            <p className="text-xs text-white/40 mt-0.5 truncate">
+                                                {notification.message}
+                                            </p>
+                                        )}
+                                        <p className="text-[11px] text-white/20 mt-1">
+                                            {formatRelativeTime(notification.createdAt)}
+                                        </p>
+                                    </div>
+
+                                    {/* Remove */}
+                                    <button
+                                        onClick={(e) => {
+                                            e.stopPropagation();
+                                            removeNotification(notification.id);
+                                        }}
+                                        className="flex-shrink-0 p-0.5 text-white/20 hover:text-white/50 opacity-0 group-hover:opacity-100 transition-all"
+                                    >
+                                        <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                                            <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+                                        </svg>
+                                    </button>
+                                </div>
+                            ))
+                        )}
+                    </div>
+
+                    {/* Footer */}
+                    {notifications.length > maxVisible && (
+                        <div className="px-4 py-2 border-t border-white/5 text-center">
+                            <span className="text-xs text-white/30">
+                                +{notifications.length - maxVisible} more notifications
+                            </span>
+                        </div>
+                    )}
+                </div>
+            )}
+        </div>
+    );
+}

package/library/notification-system/components/notifications/NotificationProvider.tsx

@@ -0,0 +1,161 @@
+'use client';
+
+import {
+    createContext,
+    useContext,
+    useState,
+    useCallback,
+    type ReactNode,
+} from 'react';
+import Toast, { type ToastData, type ToastType } from './Toast';
+
+export interface Notification {
+    id: string;
+    type: ToastType;
+    title: string;
+    message?: string;
+    read: boolean;
+    createdAt: Date;
+}
+
+interface NotificationContextValue {
+    /** Persistent notifications (for bell icon / notification panel) */
+    notifications: Notification[];
+    unreadCount: number;
+    addNotification: (notification: Omit<Notification, 'id' | 'read' | 'createdAt'>) => void;
+    markAsRead: (id: string) => void;
+    markAllAsRead: () => void;
+    removeNotification: (id: string) => void;
+    clearAll: () => void;
+
+    /** Toast helpers */
+    toast: {
+        success: (title: string, message?: string) => void;
+        error: (title: string, message?: string) => void;
+        warning: (title: string, message?: string) => void;
+        info: (title: string, message?: string) => void;
+        custom: (data: Omit<ToastData, 'id'>) => void;
+    };
+}
+
+const NotificationContext = createContext<NotificationContextValue | null>(null);
+
+export function useNotifications(): NotificationContextValue {
+    const ctx = useContext(NotificationContext);
+    if (!ctx) {
+        throw new Error('useNotifications must be used within a NotificationProvider');
+    }
+    return ctx;
+}
+
+interface NotificationProviderProps {
+    children: ReactNode;
+    maxToasts?: number;
+    position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+}
+
+export default function NotificationProvider({
+    children,
+    maxToasts = 5,
+    position = 'top-right',
+}: NotificationProviderProps) {
+    const [notifications, setNotifications] = useState<Notification[]>([]);
+    const [toasts, setToasts] = useState<ToastData[]>([]);
+
+    // --- Notifications ---
+
+    const addNotification = useCallback(
+        (data: Omit<Notification, 'id' | 'read' | 'createdAt'>) => {
+            const notification: Notification = {
+                ...data,
+                id: crypto.randomUUID(),
+                read: false,
+                createdAt: new Date(),
+            };
+            setNotifications((prev) => [notification, ...prev]);
+        },
+        []
+    );
+
+    const markAsRead = useCallback((id: string) => {
+        setNotifications((prev) =>
+            prev.map((n) => (n.id === id ? { ...n, read: true } : n))
+        );
+    }, []);
+
+    const markAllAsRead = useCallback(() => {
+        setNotifications((prev) => prev.map((n) => ({ ...n, read: true })));
+    }, []);
+
+    const removeNotification = useCallback((id: string) => {
+        setNotifications((prev) => prev.filter((n) => n.id !== id));
+    }, []);
+
+    const clearAll = useCallback(() => {
+        setNotifications([]);
+    }, []);
+
+    // --- Toasts ---
+
+    const showToast = useCallback(
+        (data: Omit<ToastData, 'id'>) => {
+            const id = crypto.randomUUID();
+            setToasts((prev) => {
+                const next = [...prev, { ...data, id }];
+                return next.slice(-maxToasts);
+            });
+        },
+        [maxToasts]
+    );
+
+    const dismissToast = useCallback((id: string) => {
+        setToasts((prev) => prev.filter((t) => t.id !== id));
+    }, []);
+
+    const toast = {
+        success: (title: string, message?: string) =>
+            showToast({ type: 'success', title, message }),
+        error: (title: string, message?: string) =>
+            showToast({ type: 'error', title, message }),
+        warning: (title: string, message?: string) =>
+            showToast({ type: 'warning', title, message }),
+        info: (title: string, message?: string) =>
+            showToast({ type: 'info', title, message }),
+        custom: (data: Omit<ToastData, 'id'>) => showToast(data),
+    };
+
+    const unreadCount = notifications.filter((n) => !n.read).length;
+
+    const positionClasses: Record<string, string> = {
+        'top-right': 'top-4 right-4',
+        'top-left': 'top-4 left-4',
+        'bottom-right': 'bottom-4 right-4',
+        'bottom-left': 'bottom-4 left-4',
+    };
+
+    return (
+        <NotificationContext.Provider
+            value={{
+                notifications,
+                unreadCount,
+                addNotification,
+                markAsRead,
+                markAllAsRead,
+                removeNotification,
+                clearAll,
+                toast,
+            }}
+        >
+            {children}
+
+            {/* Toast container */}
+            <div className={`fixed ${positionClasses[position]} z-50 flex flex-col gap-2 pointer-events-none`}>
+                {toasts.map((t) => (
+                    <div key={t.id} className="pointer-events-auto">
+                        <Toast toast={t} onDismiss={dismissToast} />
+                    </div>
+                ))}
+            </div>
+        </NotificationContext.Provider>
+    );
+}

package/library/notification-system/components/notifications/Toast.tsx

@@ -0,0 +1,112 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+export type ToastType = 'success' | 'error' | 'info' | 'warning';
+
+export interface ToastData {
+    id: string;
+    type: ToastType;
+    title: string;
+    message?: string;
+    duration?: number;
+}
+
+interface ToastProps {
+    toast: ToastData;
+    onDismiss: (id: string) => void;
+}
+
+const typeStyles: Record<ToastType, { bg: string; border: string; icon: string; iconColor: string }> = {
+    success: {
+        bg: 'bg-emerald-500/10',
+        border: 'border-emerald-500/20',
+        icon: 'M5 13l4 4L19 7',
+        iconColor: 'text-emerald-400',
+    },
+    error: {
+        bg: 'bg-red-500/10',
+        border: 'border-red-500/20',
+        icon: 'M6 18L18 6M6 6l12 12',
+        iconColor: 'text-red-400',
+    },
+    warning: {
+        bg: 'bg-amber-500/10',
+        border: 'border-amber-500/20',
+        icon: 'M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z',
+        iconColor: 'text-amber-400',
+    },
+    info: {
+        bg: 'bg-cyan-500/10',
+        border: 'border-cyan-500/20',
+        icon: 'M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z',
+        iconColor: 'text-cyan-400',
+    },
+};
+
+export default function Toast({ toast, onDismiss }: ToastProps) {
+    const [isVisible, setIsVisible] = useState(false);
+    const [isLeaving, setIsLeaving] = useState(false);
+    const style = typeStyles[toast.type];
+    const duration = toast.duration ?? 5000;
+
+    useEffect(() => {
+        // Enter animation
+        const showTimer = setTimeout(() => setIsVisible(true), 10);
+
+        // Auto-dismiss
+        let dismissTimer: ReturnType<typeof setTimeout> | undefined;
+        if (duration > 0) {
+            dismissTimer = setTimeout(() => {
+                handleDismiss();
+            }, duration);
+        }
+
+        return () => {
+            clearTimeout(showTimer);
+            if (dismissTimer) clearTimeout(dismissTimer);
+        };
+    }, [duration]);
+
+    const handleDismiss = () => {
+        setIsLeaving(true);
+        setTimeout(() => onDismiss(toast.id), 300);
+    };
+
+    return (
+        <div
+            className={`
+                max-w-sm w-full backdrop-blur-xl ${style.bg} border ${style.border} rounded-xl p-4 shadow-2xl
+                transform transition-all duration-300 ease-out
+                ${isVisible && !isLeaving ? 'translate-x-0 opacity-100' : 'translate-x-full opacity-0'}
+            `}
+        >
+            <div className="flex items-start gap-3">
+                {/* Icon */}
+                <div className="flex-shrink-0 mt-0.5">
+                    <svg className={`w-5 h-5 ${style.iconColor}`} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                        <path strokeLinecap="round" strokeLinejoin="round" d={style.icon} />
+                    </svg>
+                </div>
+
+                {/* Content */}
+                <div className="flex-1 min-w-0">
+                    <p className="text-sm font-medium text-white">{toast.title}</p>
+                    {toast.message && (
+                        <p className="text-xs text-white/50 mt-0.5">{toast.message}</p>
+                    )}
+                </div>
+
+                {/* Close */}
+                <button
+                    onClick={handleDismiss}
+                    className="flex-shrink-0 p-0.5 text-white/30 hover:text-white/60 transition-colors"
+                >
+                    <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                        <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+                    </svg>
+                </button>
+            </div>
+        </div>
+    );
+}

package/library/notification-system/manifest.json

@@ -0,0 +1,20 @@
+{
+    "name": "notification-system",
+    "version": "1.0.0",
+    "description": "Complete notification system with toast messages, React context provider, SSE API route, and bell icon badge",
+    "author": "AD AI Engine",
+    "category": "notifications",
+    "dependencies": [],
+    "files": {
+        "components": [
+            "components/notifications/Toast.tsx",
+            "components/notifications/NotificationProvider.tsx",
+            "components/notifications/NotificationBell.tsx"
+        ],
+        "api": [
+            "app/api/notifications/route.ts"
+        ]
+    },
+    "schema": null,
+    "instructions": "1. Wrap your app with NotificationProvider\n2. Use the useNotifications() hook to show toasts: toast.success('Done!')\n3. Place NotificationBell in your header for the bell icon with badge count\n4. The SSE API route streams real-time notifications to connected clients\n5. Call addNotification() from the provider to push persistent notifications"
+}

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "helix-lang",
+  "version": "11.0.0",
+  "description": "Helix - AI-Native Development Platform with Full-Stack Generation, Preview & Deploy",
+  "main": "dist/index.js",
+  "files": [
+    "dist/",
+    "library/",
+    "package.json",
+    "README.md",
+    "LICENSE"
+  ],
+  "bin": {
+    "helix": "./dist/bin/helix.js"
+  },
+  "scripts": {
+    "build": "tsc",
+    "start": "node dist/bin/helix.js",
+    "dev": "npx ts-node src/bin/helix.ts",
+    "helix": "npx ts-node src/bin/helix.ts",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "helix",
+    "ai",
+    "code-generation",
+    "cli",
+    "react",
+    "nextjs",
+    "flutter",
+    "prisma",
+    "full-stack",
+    "deploy",
+    "preview"
+  ],
+  "author": "Ayman Dwidar <ayman.dwidar@gmail.com>",
+  "license": "MIT",
+  "homepage": "https://github.com/aymandwidar/helix",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/aymandwidar/helix.git"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "dependencies": {
+    "@anthropic-ai/sdk": "^0.39.0",
+    "@types/pg": "^8.16.0",
+    "chalk": "^4.1.2",
+    "commander": "^12.1.0",
+    "dotenv": "^16.4.7",
+    "execa": "^5.1.1",
+    "fs-extra": "^11.2.0",
+    "glob": "^13.0.0",
+    "ora": "^5.4.1",
+    "pg": "^8.17.2",
+    "ws": "^8.19.0"
+  },
+  "devDependencies": {
+    "@types/fs-extra": "^11.0.4",
+    "@types/node": "^22.10.7",
+    "@types/ws": "^8.18.1",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.7.3"
+  }
+}