@codeswayam/ui 1.1.1 → 1.3.0

package/dist/components/feedback/Skeleton.d.ts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+interface SkeletonProps {
+    className?: string;
+    style?: React.CSSProperties;
+}
+/** Generic skeleton block — use className to set size */
+export declare function Skeleton({ className }: SkeletonProps): import("react/jsx-runtime").JSX.Element;
+/** Skeleton shaped like a single line of text */
+export declare function SkeletonText({ className }: SkeletonProps): import("react/jsx-runtime").JSX.Element;
+/** Skeleton shaped like a circular avatar */
+export declare function SkeletonAvatar({ className }: SkeletonProps): import("react/jsx-runtime").JSX.Element;
+/** Skeleton for a StatCard */
+export declare function SkeletonStatCard({ className }: SkeletonProps): import("react/jsx-runtime").JSX.Element;
+/** Skeleton for a table row */
+export declare function SkeletonTableRow({ cols }: {
+    cols?: number;
+}): import("react/jsx-runtime").JSX.Element;
+/** Full skeleton table (header + N rows) */
+export declare function SkeletonTable({ rows, cols }: {
+    rows?: number;
+    cols?: number;
+}): import("react/jsx-runtime").JSX.Element;
+/** Skeleton for a user list item (avatar + two lines) */
+export declare function SkeletonUserRow({ className }: SkeletonProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=Skeleton.d.ts.map

package/dist/components/feedback/Skeleton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/feedback/Skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,UAAU,aAAa;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED,yDAAyD;AACzD,wBAAgB,QAAQ,CAAC,EAAE,SAAS,EAAE,EAAE,aAAa,2CAOpD;AAED,iDAAiD;AACjD,wBAAgB,YAAY,CAAC,EAAE,SAAS,EAAE,EAAE,aAAa,2CAExD;AAED,6CAA6C;AAC7C,wBAAgB,cAAc,CAAC,EAAE,SAAS,EAAE,EAAE,aAAa,2CAE1D;AAID,8BAA8B;AAC9B,wBAAgB,gBAAgB,CAAC,EAAE,SAAS,EAAE,EAAE,aAAa,2CAQ5D;AAED,+BAA+B;AAC/B,wBAAgB,gBAAgB,CAAC,EAAE,IAAQ,EAAE,EAAE;IAAE,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,2CAU/D;AAED,4CAA4C;AAC5C,wBAAgB,aAAa,CAAC,EAAE,IAAQ,EAAE,IAAQ,EAAE,EAAE;IAAE,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,2CAiBrF;AAED,yDAAyD;AACzD,wBAAgB,eAAe,CAAC,EAAE,SAAS,EAAE,EAAE,aAAa,2CAU3D"}

package/dist/components/feedback/Skeleton.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../utils/cn';
+/** Generic skeleton block — use className to set size */
+export function Skeleton({ className }) {
+    return (_jsx("div", { className: cn('animate-pulse rounded-md bg-muted', className), "aria-hidden": true }));
+}
+/** Skeleton shaped like a single line of text */
+export function SkeletonText({ className }) {
+    return _jsx(Skeleton, { className: cn('h-4 w-3/4', className) });
+}
+/** Skeleton shaped like a circular avatar */
+export function SkeletonAvatar({ className }) {
+    return _jsx(Skeleton, { className: cn('h-9 w-9 rounded-full', className) });
+}
+// ─── Composed skeleton cards ──────────────────────────────────────────────────
+/** Skeleton for a StatCard */
+export function SkeletonStatCard({ className }) {
+    return (_jsxs("div", { className: cn('rounded-2xl border border-border bg-card p-5 space-y-3', className), children: [_jsx(Skeleton, { className: "h-3.5 w-20" }), _jsx(Skeleton, { className: "h-8 w-28" }), _jsx(Skeleton, { className: "h-3 w-16" })] }));
+}
+/** Skeleton for a table row */
+export function SkeletonTableRow({ cols = 4 }) {
+    return (_jsx("tr", { className: "border-b border-border/50", children: Array.from({ length: cols }).map((_, i) => (_jsx("td", { className: "px-4 py-3", children: _jsx(Skeleton, { className: "h-4", style: { width: `${60 + Math.random() * 30}%` } }) }, i))) }));
+}
+/** Full skeleton table (header + N rows) */
+export function SkeletonTable({ rows = 5, cols = 4 }) {
+    return (_jsxs("div", { className: "rounded-xl border border-border overflow-hidden", children: [_jsx("div", { className: "px-4 py-3 border-b border-border bg-muted/40 flex gap-4", children: Array.from({ length: cols }).map((_, i) => (_jsx(Skeleton, { className: "h-3.5 w-20" }, i))) }), _jsx("table", { className: "w-full", children: _jsx("tbody", { children: Array.from({ length: rows }).map((_, i) => (_jsx(SkeletonTableRow, { cols: cols }, i))) }) })] }));
+}
+/** Skeleton for a user list item (avatar + two lines) */
+export function SkeletonUserRow({ className }) {
+    return (_jsxs("div", { className: cn('flex items-center gap-3 p-3', className), children: [_jsx(SkeletonAvatar, {}), _jsxs("div", { className: "flex-1 space-y-2", children: [_jsx(Skeleton, { className: "h-3.5 w-32" }), _jsx(Skeleton, { className: "h-3 w-48" })] })] }));
+}

package/dist/components/neural/AICreditBadge.d.ts

@@ -0,0 +1,9 @@
+export interface AICreditBadgeProps {
+    apiUrl?: string;
+    costPreview?: number;
+    showAddButton?: boolean;
+    onUpgradeClick?: () => void;
+    className?: string;
+}
+export declare function AICreditBadge({ apiUrl, costPreview, showAddButton, onUpgradeClick, className, }: AICreditBadgeProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=AICreditBadge.d.ts.map

package/dist/components/neural/AICreditBadge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AICreditBadge.d.ts","sourceRoot":"","sources":["../../../src/components/neural/AICreditBadge.tsx"],"names":[],"mappings":"AAKA,MAAM,WAAW,kBAAkB;IACjC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,aAAa,CAAC,EAC5B,MAAgC,EAChC,WAAW,EACX,aAAqB,EACrB,cAAc,EACd,SAAc,GACf,EAAE,kBAAkB,2CAuDpB"}

package/dist/components/neural/AICreditBadge.js

@@ -0,0 +1,31 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { Zap, Loader2, Plus } from "lucide-react";
+export function AICreditBadge({ apiUrl = "http://localhost:3000", costPreview, showAddButton = false, onUpgradeClick, className = "", }) {
+    const [balance, setBalance] = useState(null);
+    const [loading, setLoading] = useState(true);
+    useEffect(() => {
+        let mounted = true;
+        async function fetchCredits() {
+            try {
+                const res = await fetch(`${apiUrl}/credits/balance`, { credentials: "include" });
+                if (res.ok) {
+                    const data = await res.json();
+                    if (mounted)
+                        setBalance(data.balance ?? data.credits ?? 0);
+                }
+            }
+            catch (err) {
+                console.error("[AICreditBadge] Failed to fetch credits:", err);
+            }
+            finally {
+                if (mounted)
+                    setLoading(false);
+            }
+        }
+        fetchCredits();
+        return () => { mounted = false; };
+    }, [apiUrl]);
+    return (_jsxs("div", { className: `inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-amber-500/10 border border-amber-500/20 text-amber-300 text-xs font-medium ${className}`, children: [_jsx(Zap, { className: "w-3.5 h-3.5 text-amber-400 fill-amber-400/30" }), loading ? (_jsx(Loader2, { className: "w-3 h-3 animate-spin text-amber-400" })) : (_jsxs("span", { children: [balance !== null ? balance.toLocaleString() : "0", " ", _jsx("span", { className: "text-[10px] text-amber-400/80 font-normal", children: "Credits" })] })), costPreview !== undefined && costPreview > 0 && (_jsxs("span", { className: "text-[10px] text-amber-400/70 border-l border-amber-500/30 pl-1.5", children: ["-", costPreview] })), showAddButton && (_jsx("button", { type: "button", onClick: onUpgradeClick, className: "ml-1 p-0.5 rounded-full hover:bg-amber-500/20 text-amber-300 transition", title: "Get more credits", children: _jsx(Plus, { className: "w-3 h-3" }) }))] }));
+}

package/dist/components/neural/AIImageGeneratorModal.d.ts

@@ -0,0 +1,9 @@
+export interface AIImageGeneratorModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    onSelectImage: (base64OrUrl: string) => void;
+    apiUrl?: string;
+    defaultAspectRatio?: "1:1" | "16:9" | "9:16" | "4:3";
+}
+export declare function AIImageGeneratorModal({ isOpen, onClose, onSelectImage, apiUrl, defaultAspectRatio, }: AIImageGeneratorModalProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=AIImageGeneratorModal.d.ts.map

package/dist/components/neural/AIImageGeneratorModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AIImageGeneratorModal.d.ts","sourceRoot":"","sources":["../../../src/components/neural/AIImageGeneratorModal.tsx"],"names":[],"mappings":"AAKA,MAAM,WAAW,0BAA0B;IACzC,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,aAAa,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,kBAAkB,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,MAAM,GAAG,KAAK,CAAC;CACtD;AAED,wBAAgB,qBAAqB,CAAC,EACpC,MAAM,EACN,OAAO,EACP,aAAa,EACb,MAAgC,EAChC,kBAA0B,GAC3B,EAAE,0BAA0B,kDA6N5B"}

package/dist/components/neural/AIImageGeneratorModal.js

@@ -0,0 +1,66 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Image as ImageIcon, Sparkles, Loader2, X, Download, Check, RefreshCw } from "lucide-react";
+export function AIImageGeneratorModal({ isOpen, onClose, onSelectImage, apiUrl = "http://localhost:3000", defaultAspectRatio = "1:1", }) {
+    const [prompt, setPrompt] = useState("");
+    const [negativePrompt, setNegativePrompt] = useState("");
+    const [aspectRatio, setAspectRatio] = useState(defaultAspectRatio);
+    const [loading, setLoading] = useState(false);
+    const [generatedImage, setGeneratedImage] = useState(null);
+    const [error, setError] = useState(null);
+    if (!isOpen)
+        return null;
+    const handleGenerate = async (e) => {
+        if (e)
+            e.preventDefault();
+        if (!prompt.trim() || loading)
+            return;
+        setLoading(true);
+        setError(null);
+        try {
+            const res = await fetch(`${apiUrl}/v1/generate-image`, {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                credentials: "include",
+                body: JSON.stringify({
+                    prompt: prompt.trim(),
+                    negativePrompt: negativePrompt.trim() || undefined,
+                    aspectRatio,
+                }),
+            });
+            if (res.ok) {
+                const data = await res.json();
+                if (data.imageBase64) {
+                    const imgSrc = `data:${data.mimeType || "image/png"};base64,${data.imageBase64}`;
+                    setGeneratedImage(imgSrc);
+                }
+                else if (data.imageUrl) {
+                    setGeneratedImage(data.imageUrl);
+                }
+                else {
+                    setError("No image data returned from generation model.");
+                }
+            }
+            else {
+                const errData = await res.json().catch(() => ({}));
+                setError(errData.message || "Failed to generate image. Please check your credit balance.");
+            }
+        }
+        catch {
+            setError("Network error occurred during image generation.");
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    const handleUse = () => {
+        if (generatedImage) {
+            onSelectImage(generatedImage);
+            onClose();
+        }
+    };
+    return (_jsx("div", { className: "fixed inset-0 z-50 bg-black/80 flex items-center justify-center p-4 backdrop-blur-sm animate-in fade-in-0 duration-200", children: _jsxs("div", { className: "bg-neutral-900 border border-neutral-800 w-full max-w-2xl rounded-2xl shadow-2xl flex flex-col max-h-[90vh] overflow-hidden", children: [_jsxs("div", { className: "flex items-center justify-between px-6 py-4 border-b border-neutral-800 bg-neutral-900/60", children: [_jsxs("div", { className: "flex items-center gap-2.5", children: [_jsx("div", { className: "p-2 bg-primary/10 rounded-xl text-primary", children: _jsx(Sparkles, { className: "w-4 h-4" }) }), _jsxs("div", { children: [_jsx("h3", { className: "font-semibold text-neutral-100 text-sm", children: "AI Image Studio" }), _jsx("p", { className: "text-xs text-neutral-400", children: "Generate custom high-resolution images" })] })] }), _jsx("button", { type: "button", onClick: onClose, className: "p-1.5 text-neutral-400 hover:text-neutral-200 hover:bg-neutral-800 rounded-lg transition", children: _jsx(X, { className: "w-4 h-4" }) })] }), _jsxs("div", { className: "flex-1 overflow-y-auto p-6 space-y-5", children: [_jsxs("div", { children: [_jsx("label", { className: "block text-xs font-medium text-neutral-300 mb-1.5", children: "Describe what you want to generate" }), _jsx("textarea", { rows: 3, value: prompt, onChange: (e) => setPrompt(e.target.value), placeholder: "e.g. A sleek modern workspace with soft neon lighting and minimalist aesthetics...", className: "w-full px-3.5 py-2.5 text-sm bg-neutral-800/80 border border-neutral-700/70 rounded-xl text-neutral-200 placeholder-neutral-500 focus:outline-none focus:border-primary resize-none" })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-xs font-medium text-neutral-300 mb-1.5", children: "Aspect Ratio" }), _jsx("div", { className: "grid grid-cols-4 gap-2", children: ["1:1", "16:9", "9:16", "4:3"].map((ratio) => (_jsxs("button", { type: "button", onClick: () => setAspectRatio(ratio), className: `py-2 px-3 text-xs rounded-xl border text-center transition font-medium ${aspectRatio === ratio
+                                            ? "bg-primary/20 border-primary text-primary"
+                                            : "bg-neutral-800/60 border-neutral-700/60 text-neutral-300 hover:bg-neutral-800"}`, children: [ratio === "1:1" && "1:1 (Square)", ratio === "16:9" && "16:9 (Landscape)", ratio === "9:16" && "9:16 (Story/Reel)", ratio === "4:3" && "4:3 (Standard)"] }, ratio))) })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-xs font-medium text-neutral-400 mb-1", children: "Negative Prompt (Optional)" }), _jsx("input", { type: "text", value: negativePrompt, onChange: (e) => setNegativePrompt(e.target.value), placeholder: "e.g. blurry, low quality, distorted text, watermark", className: "w-full px-3.5 py-2 text-xs bg-neutral-800/60 border border-neutral-700/50 rounded-lg text-neutral-200 placeholder-neutral-500 focus:outline-none focus:border-primary" })] }), _jsxs("div", { className: "rounded-2xl border border-neutral-800 bg-neutral-950/50 p-4 flex flex-col items-center justify-center min-h-[220px]", children: [loading ? (_jsxs("div", { className: "flex flex-col items-center justify-center text-center py-8", children: [_jsx(Loader2, { className: "w-8 h-8 text-primary animate-spin mb-3" }), _jsx("p", { className: "text-sm font-medium text-neutral-300", children: "Generating your image..." }), _jsx("p", { className: "text-xs text-neutral-500 mt-1", children: "Rendering details, please wait" })] })) : generatedImage ? (_jsxs("div", { className: "flex flex-col items-center gap-4 w-full", children: [_jsx("div", { className: "relative max-h-72 rounded-xl overflow-hidden border border-neutral-800 shadow-lg", children: _jsx("img", { src: generatedImage, alt: "AI Generated", className: "max-h-72 object-contain rounded-xl" }) }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("button", { type: "button", onClick: handleGenerate, className: "px-3 py-1.5 text-xs bg-neutral-800 hover:bg-neutral-700 text-neutral-200 rounded-lg transition flex items-center gap-1.5", children: [_jsx(RefreshCw, { className: "w-3.5 h-3.5" }), " Regenerate"] }), _jsxs("a", { href: generatedImage, download: "ai-image.png", className: "px-3 py-1.5 text-xs bg-neutral-800 hover:bg-neutral-700 text-neutral-200 rounded-lg transition flex items-center gap-1.5", children: [_jsx(Download, { className: "w-3.5 h-3.5" }), " Download"] })] })] })) : (_jsxs("div", { className: "flex flex-col items-center justify-center text-center text-neutral-500 py-6", children: [_jsx(ImageIcon, { className: "w-10 h-10 mb-2 opacity-30 text-neutral-400" }), _jsx("p", { className: "text-xs text-neutral-400 font-medium", children: "No image generated yet" }), _jsx("p", { className: "text-[11px] text-neutral-500 max-w-xs mt-0.5", children: "Enter a prompt above and click generate to create a new image." })] })), error && (_jsx("div", { className: "mt-3 p-2.5 bg-red-500/10 border border-red-500/20 rounded-xl text-xs text-red-400 text-center w-full", children: error }))] })] }), _jsxs("div", { className: "px-6 py-4 border-t border-neutral-800 bg-neutral-900/60 flex items-center justify-between", children: [_jsx("span", { className: "text-xs text-neutral-400", children: "\u26A1 Estimated cost: 10 credits" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("button", { type: "button", onClick: onClose, className: "px-4 py-2 text-xs text-neutral-400 hover:text-neutral-200 font-medium transition", children: "Cancel" }), generatedImage ? (_jsxs("button", { type: "button", onClick: handleUse, className: "px-4 py-2 bg-primary text-primary-foreground text-xs font-semibold rounded-xl hover:bg-primary/90 transition flex items-center gap-1.5 shadow-lg shadow-primary/20", children: [_jsx(Check, { className: "w-3.5 h-3.5" }), " Use This Image"] })) : (_jsxs("button", { type: "button", disabled: !prompt.trim() || loading, onClick: handleGenerate, className: "px-5 py-2 bg-primary text-primary-foreground text-xs font-semibold rounded-xl hover:bg-primary/90 disabled:opacity-50 transition flex items-center gap-1.5 shadow-lg shadow-primary/20", children: [loading ? _jsx(Loader2, { className: "w-3.5 h-3.5 animate-spin" }) : _jsx(Sparkles, { className: "w-3.5 h-3.5" }), "Generate Image"] }))] })] })] }) }));
+}

package/dist/components/neural/AIPromptPlayground.d.ts

@@ -0,0 +1,10 @@
+export interface AIPromptPlaygroundProps {
+    systemPrompt: string;
+    knowledgeBaseId?: number | null;
+    appName?: string;
+    isOpen: boolean;
+    onClose: () => void;
+    apiUrl?: string;
+}
+export declare function AIPromptPlayground({ systemPrompt, knowledgeBaseId, appName, isOpen, onClose, apiUrl, }: AIPromptPlaygroundProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=AIPromptPlayground.d.ts.map

package/dist/components/neural/AIPromptPlayground.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AIPromptPlayground.d.ts","sourceRoot":"","sources":["../../../src/components/neural/AIPromptPlayground.tsx"],"names":[],"mappings":"AAKA,MAAM,WAAW,uBAAuB;IACtC,YAAY,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAQD,wBAAgB,kBAAkB,CAAC,EACjC,YAAY,EACZ,eAAe,EACf,OAAsB,EACtB,MAAM,EACN,OAAO,EACP,MAAgC,GACjC,EAAE,uBAAuB,kDA0KzB"}

package/dist/components/neural/AIPromptPlayground.js

@@ -0,0 +1,66 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Send, Bot, User, Sparkles, Loader2, X, RefreshCw } from "lucide-react";
+export function AIPromptPlayground({ systemPrompt, knowledgeBaseId, appName = "playground", isOpen, onClose, apiUrl = "http://localhost:3000", }) {
+    const [messages, setMessages] = useState([]);
+    const [input, setInput] = useState("");
+    const [loading, setLoading] = useState(false);
+    const [sessionId] = useState(() => `play_${Math.random().toString(36).substring(2, 9)}`);
+    if (!isOpen)
+        return null;
+    const handleSend = async (e) => {
+        if (e)
+            e.preventDefault();
+        if (!input.trim() || loading)
+            return;
+        const userText = input.trim();
+        setInput("");
+        setMessages((prev) => [...prev, { role: "user", content: userText }]);
+        setLoading(true);
+        try {
+            const res = await fetch(`${apiUrl}/agents/entity/chat`, {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                credentials: "include",
+                body: JSON.stringify({
+                    appName,
+                    entityId: `test_${sessionId}`,
+                    systemPrompt,
+                    knowledgeBaseId: knowledgeBaseId ?? undefined,
+                    message: userText,
+                    sessionId,
+                }),
+            });
+            if (res.ok) {
+                const data = await res.json();
+                setMessages((prev) => [
+                    ...prev,
+                    {
+                        role: "assistant",
+                        content: data.text || "No response received",
+                        latencyMs: data.latencyMs,
+                    },
+                ]);
+            }
+            else {
+                setMessages((prev) => [
+                    ...prev,
+                    { role: "assistant", content: "Error: Failed to generate response from AI agent." },
+                ]);
+            }
+        }
+        catch {
+            setMessages((prev) => [
+                ...prev,
+                { role: "assistant", content: "Error: Network request failed." },
+            ]);
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    return (_jsx("div", { className: "fixed inset-0 z-50 bg-black/80 flex items-center justify-center p-4 backdrop-blur-sm animate-in fade-in-0 duration-200", children: _jsxs("div", { className: "bg-neutral-900 border border-neutral-800 w-full max-w-xl rounded-2xl shadow-2xl flex flex-col h-[600px] overflow-hidden", children: [_jsxs("div", { className: "flex items-center justify-between px-5 py-4 border-b border-neutral-800 bg-neutral-900/60", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "p-2 bg-primary/10 rounded-lg text-primary", children: _jsx(Sparkles, { className: "w-4 h-4" }) }), _jsxs("div", { children: [_jsx("h3", { className: "font-semibold text-neutral-100 text-sm", children: "AI Agent Live Playground" }), _jsx("p", { className: "text-xs text-neutral-400", children: knowledgeBaseId ? `Testing with KB #${knowledgeBaseId}` : "Testing prompt without KB" })] })] }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx("button", { type: "button", onClick: () => setMessages([]), title: "Clear chat", className: "p-1.5 text-neutral-400 hover:text-neutral-200 hover:bg-neutral-800 rounded-lg transition", children: _jsx(RefreshCw, { className: "w-4 h-4" }) }), _jsx("button", { type: "button", onClick: onClose, className: "p-1.5 text-neutral-400 hover:text-neutral-200 hover:bg-neutral-800 rounded-lg transition", children: _jsx(X, { className: "w-4 h-4" }) })] })] }), _jsxs("div", { className: "flex-1 overflow-y-auto p-4 space-y-4 text-sm", children: [messages.length === 0 && (_jsxs("div", { className: "flex flex-col items-center justify-center h-full text-center text-neutral-500 py-12", children: [_jsx(Bot, { className: "w-10 h-10 mb-2 opacity-40 text-primary" }), _jsx("p", { className: "font-medium text-neutral-400 text-sm", children: "Ready to test your prompt" }), _jsx("p", { className: "text-xs text-neutral-500 max-w-xs mt-1", children: "Type a message below to see how your AI agent will respond before publishing." })] })), messages.map((m, idx) => (_jsxs("div", { className: `flex gap-3 ${m.role === "user" ? "justify-end" : "justify-start"}`, children: [m.role === "assistant" && (_jsx("div", { className: "w-7 h-7 rounded-full bg-primary/20 text-primary flex items-center justify-center shrink-0 mt-0.5", children: _jsx(Bot, { className: "w-4 h-4" }) })), _jsxs("div", { className: `max-w-[80%] rounded-2xl px-4 py-2.5 text-sm ${m.role === "user"
+                                        ? "bg-primary text-primary-foreground font-medium rounded-br-none"
+                                        : "bg-neutral-800/90 text-neutral-200 border border-neutral-700/60 rounded-bl-none"}`, children: [_jsx("div", { className: "whitespace-pre-wrap", children: m.content }), m.latencyMs !== undefined && (_jsxs("div", { className: "text-[10px] text-neutral-400 mt-1 text-right", children: [m.latencyMs, "ms"] }))] }), m.role === "user" && (_jsx("div", { className: "w-7 h-7 rounded-full bg-neutral-800 text-neutral-300 flex items-center justify-center shrink-0 mt-0.5", children: _jsx(User, { className: "w-4 h-4" }) }))] }, idx))), loading && (_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "w-7 h-7 rounded-full bg-primary/20 text-primary flex items-center justify-center shrink-0", children: _jsx(Loader2, { className: "w-4 h-4 animate-spin" }) }), _jsx("div", { className: "bg-neutral-800/70 border border-neutral-700/40 rounded-2xl rounded-bl-none px-4 py-2 text-xs text-neutral-400", children: "Thinking..." })] }))] }), _jsxs("form", { onSubmit: handleSend, className: "p-3 border-t border-neutral-800 bg-neutral-900/60 flex gap-2", children: [_jsx("input", { type: "text", placeholder: "Send a test message...", value: input, onChange: (e) => setInput(e.target.value), disabled: loading, className: "flex-1 px-3.5 py-2 text-sm bg-neutral-800/80 border border-neutral-700/70 rounded-xl text-neutral-200 placeholder-neutral-500 focus:outline-none focus:border-primary" }), _jsx("button", { type: "submit", disabled: !input.trim() || loading, className: "px-4 py-2 bg-primary text-primary-foreground rounded-xl text-sm font-medium hover:bg-primary/90 disabled:opacity-50 transition flex items-center gap-1.5", children: _jsx(Send, { className: "w-3.5 h-3.5" }) })] })] }) }));
+}

package/dist/components/neural/KnowledgeBasePicker.d.ts

@@ -0,0 +1,18 @@
+export interface KnowledgeBaseItem {
+    id: number;
+    name: string;
+    description?: string;
+    docCount: number;
+    status: "active" | "indexing" | "error";
+    createdAt?: string;
+}
+export interface KnowledgeBasePickerProps {
+    value?: number | null;
+    onChange: (kbId: number | null) => void;
+    apiUrl?: string;
+    neuralWebUrl?: string;
+    className?: string;
+    disabled?: boolean;
+}
+export declare function KnowledgeBasePicker({ value, onChange, apiUrl, neuralWebUrl, className, disabled, }: KnowledgeBasePickerProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=KnowledgeBasePicker.d.ts.map

package/dist/components/neural/KnowledgeBasePicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"KnowledgeBasePicker.d.ts","sourceRoot":"","sources":["../../../src/components/neural/KnowledgeBasePicker.tsx"],"names":[],"mappings":"AAKA,MAAM,WAAW,iBAAiB;IAChC,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,QAAQ,GAAG,UAAU,GAAG,OAAO,CAAC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,wBAAwB;IACvC,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACxC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,wBAAgB,mBAAmB,CAAC,EAClC,KAAK,EACL,QAAQ,EACR,MAAgC,EAChC,YAAsC,EACtC,SAAc,EACd,QAAgB,GACjB,EAAE,wBAAwB,2CAyI1B"}

package/dist/components/neural/KnowledgeBasePicker.js

@@ -0,0 +1,42 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { Database, Search, ExternalLink, Check, Loader2, Sparkles } from "lucide-react";
+export function KnowledgeBasePicker({ value, onChange, apiUrl = "http://localhost:3000", neuralWebUrl = "http://localhost:3007", className = "", disabled = false, }) {
+    const [items, setItems] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [search, setSearch] = useState("");
+    const [isOpen, setIsOpen] = useState(false);
+    useEffect(() => {
+        let mounted = true;
+        async function fetchKBs() {
+            try {
+                const res = await fetch(`${apiUrl}/knowledge-base`, { credentials: "include" });
+                if (res.ok) {
+                    const data = await res.json();
+                    if (mounted)
+                        setItems(Array.isArray(data) ? data : data.items || []);
+                }
+            }
+            catch (err) {
+                console.error("[KnowledgeBasePicker] Failed to load KBs:", err);
+            }
+            finally {
+                if (mounted)
+                    setLoading(false);
+            }
+        }
+        fetchKBs();
+        return () => { mounted = false; };
+    }, [apiUrl]);
+    const filtered = items.filter((kb) => kb.name.toLowerCase().includes(search.toLowerCase()) ||
+        (kb.description && kb.description.toLowerCase().includes(search.toLowerCase())));
+    const selectedItem = items.find((k) => k.id === value);
+    return (_jsxs("div", { className: `relative ${className}`, children: [_jsxs("button", { type: "button", disabled: disabled, onClick: () => setIsOpen((prev) => !prev), className: "w-full flex items-center justify-between px-3 py-2 text-sm bg-neutral-900 border border-neutral-800 rounded-lg text-neutral-200 hover:border-neutral-700 focus:outline-none focus:ring-1 focus:ring-primary disabled:opacity-50 transition", children: [_jsxs("div", { className: "flex items-center gap-2 truncate", children: [_jsx(Database, { className: "w-4 h-4 text-primary shrink-0" }), loading ? (_jsxs("span", { className: "text-neutral-500 flex items-center gap-1", children: [_jsx(Loader2, { className: "w-3 h-3 animate-spin" }), " Loading knowledge bases..."] })) : selectedItem ? (_jsxs("span", { className: "truncate font-medium text-neutral-100", children: [selectedItem.name, " ", _jsxs("span", { className: "text-xs text-neutral-400 font-normal", children: ["(", selectedItem.docCount, " docs)"] })] })) : (_jsx("span", { className: "text-neutral-500", children: "None (General Knowledge)" }))] }), _jsx("span", { className: "text-xs text-neutral-500 ml-2", children: "\u25BC" })] }), isOpen && (_jsxs("div", { className: "absolute z-50 mt-1 w-full bg-neutral-900 border border-neutral-800 rounded-xl shadow-2xl p-2 text-sm max-h-72 flex flex-col", children: [_jsxs("div", { className: "relative mb-2", children: [_jsx(Search, { className: "w-3.5 h-3.5 text-neutral-400 absolute left-2.5 top-2.5" }), _jsx("input", { type: "text", placeholder: "Search knowledge bases...", value: search, onChange: (e) => setSearch(e.target.value), className: "w-full pl-8 pr-2 py-1.5 text-xs bg-neutral-800/80 border border-neutral-700/60 rounded-md text-neutral-200 placeholder-neutral-500 focus:outline-none focus:border-primary" })] }), _jsxs("div", { className: "overflow-y-auto flex-1 space-y-1", children: [_jsxs("button", { type: "button", onClick: () => {
+                                    onChange(null);
+                                    setIsOpen(false);
+                                }, className: `w-full flex items-center justify-between px-2.5 py-1.5 rounded-lg text-left text-xs transition ${!value ? "bg-primary/20 text-primary font-medium" : "text-neutral-300 hover:bg-neutral-800/60"}`, children: [_jsx("span", { children: "None (No RAG attached)" }), !value && _jsx(Check, { className: "w-3.5 h-3.5" })] }), filtered.map((kb) => (_jsxs("button", { type: "button", onClick: () => {
+                                    onChange(kb.id);
+                                    setIsOpen(false);
+                                }, className: `w-full flex items-center justify-between px-2.5 py-2 rounded-lg text-left text-xs transition ${value === kb.id ? "bg-primary/20 text-primary font-medium" : "text-neutral-200 hover:bg-neutral-800/60"}`, children: [_jsxs("div", { className: "truncate pr-2", children: [_jsx("div", { className: "font-medium truncate", children: kb.name }), kb.description && (_jsx("div", { className: "text-[10px] text-neutral-400 truncate", children: kb.description }))] }), _jsxs("div", { className: "flex items-center gap-1.5 shrink-0", children: [_jsxs("span", { className: "text-[10px] bg-neutral-800 text-neutral-400 px-1.5 py-0.5 rounded", children: [kb.docCount, " docs"] }), value === kb.id && _jsx(Check, { className: "w-3.5 h-3.5 text-primary" })] })] }, kb.id))), filtered.length === 0 && !loading && (_jsx("div", { className: "text-center py-4 text-xs text-neutral-500", children: "No knowledge bases found" }))] }), _jsx("div", { className: "pt-2 mt-1 border-t border-neutral-800/80", children: _jsxs("a", { href: `${neuralWebUrl}/knowledge-base`, target: "_blank", rel: "noopener noreferrer", className: "flex items-center justify-center gap-1.5 text-xs text-primary hover:underline font-medium py-1", children: [_jsx(Sparkles, { className: "w-3 h-3" }), " Create / Manage in Neural Hub", _jsx(ExternalLink, { className: "w-2.5 h-2.5" })] }) })] }))] }));
+}

package/dist/components/neural/WorkflowPicker.d.ts

@@ -0,0 +1,18 @@
+export interface WorkflowItem {
+    id: number;
+    name: string;
+    slug?: string;
+    description?: string;
+    status: string;
+    nodeCount?: number;
+}
+export interface WorkflowPickerProps {
+    value?: string | number | null;
+    onChange: (workflowIdentifier: string | number | null) => void;
+    apiUrl?: string;
+    neuralWebUrl?: string;
+    className?: string;
+    disabled?: boolean;
+}
+export declare function WorkflowPicker({ value, onChange, apiUrl, neuralWebUrl, className, disabled, }: WorkflowPickerProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=WorkflowPicker.d.ts.map

package/dist/components/neural/WorkflowPicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WorkflowPicker.d.ts","sourceRoot":"","sources":["../../../src/components/neural/WorkflowPicker.tsx"],"names":[],"mappings":"AAKA,MAAM,WAAW,YAAY;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,mBAAmB;IAClC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IAC/B,QAAQ,EAAE,CAAC,kBAAkB,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC/D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,QAAQ,EACR,MAAgC,EAChC,YAAsC,EACtC,SAAc,EACd,QAAgB,GACjB,EAAE,mBAAmB,2CAoJrB"}

package/dist/components/neural/WorkflowPicker.js

@@ -0,0 +1,46 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { GitBranch, Search, Check, Loader2, ExternalLink, Play } from "lucide-react";
+export function WorkflowPicker({ value, onChange, apiUrl = "http://localhost:3000", neuralWebUrl = "http://localhost:3007", className = "", disabled = false, }) {
+    const [workflows, setWorkflows] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [search, setSearch] = useState("");
+    const [isOpen, setIsOpen] = useState(false);
+    useEffect(() => {
+        let mounted = true;
+        async function fetchWorkflows() {
+            try {
+                const res = await fetch(`${apiUrl}/workflows`, { credentials: "include" });
+                if (res.ok) {
+                    const data = await res.json();
+                    if (mounted)
+                        setWorkflows(Array.isArray(data) ? data : data.items || []);
+                }
+            }
+            catch (err) {
+                console.error("[WorkflowPicker] Failed to load workflows:", err);
+            }
+            finally {
+                if (mounted)
+                    setLoading(false);
+            }
+        }
+        fetchWorkflows();
+        return () => { mounted = false; };
+    }, [apiUrl]);
+    const filtered = workflows.filter((w) => w.name.toLowerCase().includes(search.toLowerCase()) ||
+        (w.slug && w.slug.toLowerCase().includes(search.toLowerCase())) ||
+        (w.description && w.description.toLowerCase().includes(search.toLowerCase())));
+    const selectedItem = workflows.find((w) => w.id === value || w.slug === value);
+    return (_jsxs("div", { className: `relative ${className}`, children: [_jsxs("button", { type: "button", disabled: disabled, onClick: () => setIsOpen((prev) => !prev), className: "w-full flex items-center justify-between px-3 py-2 text-sm bg-neutral-900 border border-neutral-800 rounded-lg text-neutral-200 hover:border-neutral-700 focus:outline-none focus:ring-1 focus:ring-primary disabled:opacity-50 transition", children: [_jsxs("div", { className: "flex items-center gap-2 truncate", children: [_jsx(GitBranch, { className: "w-4 h-4 text-emerald-400 shrink-0" }), loading ? (_jsxs("span", { className: "text-neutral-500 flex items-center gap-1", children: [_jsx(Loader2, { className: "w-3 h-3 animate-spin" }), " Loading workflows..."] })) : selectedItem ? (_jsxs("span", { className: "truncate font-medium text-neutral-100", children: [selectedItem.name, " ", selectedItem.slug && (_jsxs("span", { className: "text-xs text-neutral-400 font-mono font-normal", children: ["(", selectedItem.slug, ")"] }))] })) : (_jsx("span", { className: "text-neutral-500", children: "None (No workflow attached)" }))] }), _jsx("span", { className: "text-xs text-neutral-500 ml-2", children: "\u25BC" })] }), isOpen && (_jsxs("div", { className: "absolute z-50 mt-1 w-full bg-neutral-900 border border-neutral-800 rounded-xl shadow-2xl p-2 text-sm max-h-72 flex flex-col", children: [_jsxs("div", { className: "relative mb-2", children: [_jsx(Search, { className: "w-3.5 h-3.5 text-neutral-400 absolute left-2.5 top-2.5" }), _jsx("input", { type: "text", placeholder: "Search workflows by name or slug...", value: search, onChange: (e) => setSearch(e.target.value), className: "w-full pl-8 pr-2 py-1.5 text-xs bg-neutral-800/80 border border-neutral-700/60 rounded-md text-neutral-200 placeholder-neutral-500 focus:outline-none focus:border-primary" })] }), _jsxs("div", { className: "overflow-y-auto flex-1 space-y-1", children: [_jsxs("button", { type: "button", onClick: () => {
+                                    onChange(null);
+                                    setIsOpen(false);
+                                }, className: `w-full flex items-center justify-between px-2.5 py-1.5 rounded-lg text-left text-xs transition ${!value ? "bg-primary/20 text-primary font-medium" : "text-neutral-300 hover:bg-neutral-800/60"}`, children: [_jsx("span", { children: "None (Do not run workflow)" }), !value && _jsx(Check, { className: "w-3.5 h-3.5" })] }), filtered.map((wf) => {
+                                const isSelected = value === wf.id || value === wf.slug;
+                                return (_jsxs("button", { type: "button", onClick: () => {
+                                        onChange(wf.slug || wf.id);
+                                        setIsOpen(false);
+                                    }, className: `w-full flex items-center justify-between px-2.5 py-2 rounded-lg text-left text-xs transition ${isSelected ? "bg-primary/20 text-primary font-medium" : "text-neutral-200 hover:bg-neutral-800/60"}`, children: [_jsxs("div", { className: "truncate pr-2", children: [_jsxs("div", { className: "font-medium truncate flex items-center gap-1.5", children: [_jsx(Play, { className: "w-2.5 h-2.5 text-emerald-400" }), wf.name] }), wf.description && (_jsx("div", { className: "text-[10px] text-neutral-400 truncate", children: wf.description }))] }), _jsxs("div", { className: "flex items-center gap-1.5 shrink-0", children: [wf.nodeCount !== undefined && (_jsxs("span", { className: "text-[10px] bg-neutral-800 text-neutral-400 px-1.5 py-0.5 rounded", children: [wf.nodeCount, " steps"] })), isSelected && _jsx(Check, { className: "w-3.5 h-3.5 text-primary" })] })] }, wf.id));
+                            }), filtered.length === 0 && !loading && (_jsx("div", { className: "text-center py-4 text-xs text-neutral-500", children: "No workflows found" }))] }), _jsx("div", { className: "pt-2 mt-1 border-t border-neutral-800/80", children: _jsxs("a", { href: `${neuralWebUrl}/workflows`, target: "_blank", rel: "noopener noreferrer", className: "flex items-center justify-center gap-1.5 text-xs text-primary hover:underline font-medium py-1", children: [_jsx(GitBranch, { className: "w-3 h-3" }), " Build New Workflow in Neural Hub", _jsx(ExternalLink, { className: "w-2.5 h-2.5" })] }) })] }))] }));
+}

package/dist/components/neural/index.d.ts

@@ -0,0 +1,11 @@
+export { KnowledgeBasePicker } from "./KnowledgeBasePicker";
+export type { KnowledgeBasePickerProps, KnowledgeBaseItem } from "./KnowledgeBasePicker";
+export { AIPromptPlayground } from "./AIPromptPlayground";
+export type { AIPromptPlaygroundProps } from "./AIPromptPlayground";
+export { WorkflowPicker } from "./WorkflowPicker";
+export type { WorkflowPickerProps, WorkflowItem } from "./WorkflowPicker";
+export { AIImageGeneratorModal } from "./AIImageGeneratorModal";
+export type { AIImageGeneratorModalProps } from "./AIImageGeneratorModal";
+export { AICreditBadge } from "./AICreditBadge";
+export type { AICreditBadgeProps } from "./AICreditBadge";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/neural/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/neural/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,YAAY,EAAE,wBAAwB,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAEzF,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,YAAY,EAAE,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AAEpE,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,YAAY,EAAE,mBAAmB,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAE1E,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,YAAY,EAAE,0BAA0B,EAAE,MAAM,yBAAyB,CAAC;AAE1E,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/components/neural/index.js

@@ -0,0 +1,5 @@
+export { KnowledgeBasePicker } from "./KnowledgeBasePicker";
+export { AIPromptPlayground } from "./AIPromptPlayground";
+export { WorkflowPicker } from "./WorkflowPicker";
+export { AIImageGeneratorModal } from "./AIImageGeneratorModal";
+export { AICreditBadge } from "./AICreditBadge";

package/dist/components/saas/NotificationBell.d.ts

@@ -0,0 +1,12 @@
+export interface NotificationBellProps {
+    apiUrl?: string;
+    onNavigate?: (url: string) => void;
+    onOpenSettings?: () => void;
+    className?: string;
+}
+/**
+ * Universal Notification Bell Component for SaaS applications.
+ * Renders an unread badge counter and a notification feed dropdown.
+ */
+export declare function NotificationBell({ apiUrl, onNavigate, onOpenSettings, className, }: NotificationBellProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=NotificationBell.d.ts.map

package/dist/components/saas/NotificationBell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationBell.d.ts","sourceRoot":"","sources":["../../../src/components/saas/NotificationBell.tsx"],"names":[],"mappings":"AAqBA,MAAM,WAAW,qBAAqB;IACpC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA6BD;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,MAAM,EACN,UAAU,EACV,cAAc,EACd,SAAS,GACV,EAAE,qBAAqB,2CAoIvB"}

package/dist/components/saas/NotificationBell.js

@@ -0,0 +1,52 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Bell, CheckCheck, CreditCard, ShieldAlert, Sparkles, Tag, Settings, Info, } from "lucide-react";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger, } from "../base/dropdown-menu";
+import { useNotifications } from "../../utils/useNotifications";
+import { cn } from "../../utils/cn";
+function getCategoryIcon(category) {
+    switch (category) {
+        case "billing":
+            return _jsx(CreditCard, { size: 14, className: "text-violet-600" });
+        case "security":
+            return _jsx(ShieldAlert, { size: 14, className: "text-red-600" });
+        case "updates":
+            return _jsx(Sparkles, { size: 14, className: "text-blue-600" });
+        case "marketing":
+            return _jsx(Tag, { size: 14, className: "text-amber-600" });
+        default:
+            return _jsx(Info, { size: 14, className: "text-gray-600" });
+    }
+}
+function formatTimeAgo(dateStr) {
+    const diff = Date.now() - new Date(dateStr).getTime();
+    const mins = Math.floor(diff / (1000 * 60));
+    if (mins < 1)
+        return "Just now";
+    if (mins < 60)
+        return `${mins}m ago`;
+    const hours = Math.floor(mins / 60);
+    if (hours < 24)
+        return `${hours}h ago`;
+    const days = Math.floor(hours / 24);
+    if (days < 7)
+        return `${days}d ago`;
+    return new Date(dateStr).toLocaleDateString();
+}
+/**
+ * Universal Notification Bell Component for SaaS applications.
+ * Renders an unread badge counter and a notification feed dropdown.
+ */
+export function NotificationBell({ apiUrl, onNavigate, onOpenSettings, className, }) {
+    const { notifications, unreadCount, markAsRead, markAllAsRead } = useNotifications({ apiUrl });
+    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs("button", { "aria-label": "Open notifications", className: cn("relative p-2 rounded-xl text-gray-600 hover:text-gray-900 hover:bg-gray-100 transition-colors cursor-pointer outline-none", className), children: [_jsx(Bell, { size: 18 }), unreadCount > 0 && (_jsx("span", { className: "absolute top-1 right-1 flex h-4 min-w-[16px] px-1 items-center justify-center rounded-full bg-violet-600 text-[10px] font-bold text-white shadow-sm ring-2 ring-background animate-in zoom-in-50", children: unreadCount > 99 ? "99+" : unreadCount }))] }) }), _jsxs(DropdownMenuContent, { align: "end", className: "w-80 sm:w-96 max-h-[480px] p-0 rounded-2xl shadow-2xl border border-gray-100 overflow-hidden z-50 bg-white", children: [_jsxs("div", { className: "flex items-center justify-between px-4 py-3 border-b border-gray-100 bg-gray-50/70", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-sm font-bold text-gray-900", children: "Notifications" }), unreadCount > 0 && (_jsxs("span", { className: "bg-violet-100 text-violet-700 text-[10px] font-bold px-1.5 py-0.5 rounded-full", children: [unreadCount, " new"] }))] }), _jsxs("div", { className: "flex items-center gap-1", children: [unreadCount > 0 && (_jsxs("button", { type: "button", onClick: markAllAsRead, title: "Mark all as read", className: "flex items-center gap-1 text-[11px] font-semibold text-violet-700 hover:text-violet-900 px-2 py-1 rounded-md hover:bg-violet-50 transition-colors cursor-pointer", children: [_jsx(CheckCheck, { size: 13 }), "Mark all read"] })), onOpenSettings && (_jsx("button", { type: "button", onClick: onOpenSettings, title: "Notification Settings", className: "p-1 rounded-md text-gray-400 hover:text-gray-600 hover:bg-gray-100 transition-colors cursor-pointer", children: _jsx(Settings, { size: 14 }) }))] })] }), _jsx("div", { className: "overflow-y-auto max-h-[360px] divide-y divide-gray-50", children: notifications.length === 0 ? (_jsxs("div", { className: "py-12 text-center text-gray-400 space-y-2", children: [_jsx(Bell, { size: 32, strokeWidth: 1.5, className: "mx-auto text-gray-300" }), _jsx("p", { className: "text-xs font-medium text-gray-500", children: "No notifications yet" }), _jsx("p", { className: "text-[11px] text-gray-400", children: "You're completely caught up! \u2728" })] })) : (notifications.map((item) => {
+                            const isUnread = !item.isRead;
+                            return (_jsxs("div", { onClick: () => {
+                                    if (isUnread)
+                                        markAsRead(item.id);
+                                    if (item.actionUrl && onNavigate) {
+                                        onNavigate(item.actionUrl);
+                                    }
+                                }, className: cn("flex items-start gap-3 p-3.5 transition-colors cursor-pointer text-left", isUnread ? "bg-violet-50/40 hover:bg-violet-50/70" : "bg-white hover:bg-gray-50/80"), children: [_jsx("div", { className: "mt-0.5 shrink-0 p-1.5 rounded-lg bg-gray-100 border border-gray-200/60", children: getCategoryIcon(item.category) }), _jsxs("div", { className: "flex-1 min-w-0 space-y-0.5", children: [_jsxs("div", { className: "flex items-center justify-between gap-1", children: [_jsx("p", { className: cn("text-xs font-semibold truncate", isUnread ? "text-gray-900 font-bold" : "text-gray-700"), children: item.title }), _jsx("span", { className: "text-[10px] text-gray-400 shrink-0", children: formatTimeAgo(item.createdAt) })] }), _jsx("p", { className: "text-[11px] text-gray-600 line-clamp-2 leading-relaxed", children: item.message })] }), isUnread && (_jsx("span", { className: "w-1.5 h-1.5 rounded-full bg-violet-600 shrink-0 mt-2" }))] }, item.id));
+                        })) }), onOpenSettings && (_jsx("div", { className: "p-2 border-t border-gray-100 bg-gray-50/50 text-center", children: _jsx("button", { type: "button", onClick: onOpenSettings, className: "text-[11px] font-semibold text-gray-500 hover:text-violet-700 transition-colors cursor-pointer", children: "Configure Notification Preferences \u2192" }) }))] })] }));
+}

package/dist/components/saas/status-badge.d.ts

@@ -1,10 +1,17 @@
-export type SubscriptionStatus = 'active' | 'past_due' | 'canceled' | 'pending_cancellation';
-export interface StatusBadgeProps {
-    status: SubscriptionStatus | string;
+type StatusType = 'todo' | 'in-progress' | 'in_progress' | 'done' | 'cancelled' | 'approved' | 'pending' | 'rejected' | 'submitted' | 'suspended' | 'active' | 'inactive' | 'past_due' | 'draft' | 'published';
+type PriorityType = 'low' | 'medium' | 'high' | 'urgent';
+type RoleType = 'admin' | 'manager' | 'employee' | 'ceo' | 'intern' | 'superadmin' | 'owner';
+export declare function StatusBadge({ status, className }: {
+    status: StatusType;
     className?: string;
-}
-/**
- * Smart Status Badge for Subscription management.
- */
-export declare function StatusBadge({ status, className }: StatusBadgeProps): import("react/jsx-runtime").JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function PriorityBadge({ priority, className }: {
+    priority: PriorityType;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function RoleBadge({ role, className }: {
+    role: RoleType;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export type { StatusType, PriorityType, RoleType };
 //# sourceMappingURL=status-badge.d.ts.map

package/dist/components/saas/status-badge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"status-badge.d.ts","sourceRoot":"","sources":["../../../src/components/saas/status-badge.tsx"],"names":[],"mappings":"AAIA,MAAM,MAAM,kBAAkB,GAAG,QAAQ,GAAG,UAAU,GAAG,UAAU,GAAG,sBAAsB,CAAC;AAE7F,MAAM,WAAW,gBAAgB;IAC/B,MAAM,EAAE,kBAAkB,GAAG,MAAM,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,wBAAgB,WAAW,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,gBAAgB,2CAiClE"}
+{"version":3,"file":"status-badge.d.ts","sourceRoot":"","sources":["../../../src/components/saas/status-badge.tsx"],"names":[],"mappings":"AAIA,KAAK,UAAU,GACX,MAAM,GAAG,aAAa,GAAG,aAAa,GAAG,MAAM,GAAG,WAAW,GAC7D,UAAU,GAAG,SAAS,GAAG,UAAU,GAAG,WAAW,GAAG,WAAW,GAC/D,QAAQ,GAAG,UAAU,GAAG,UAAU,GAAG,OAAO,GAAG,WAAW,CAAC;AAE/D,KAAK,YAAY,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,QAAQ,CAAC;AAEzD,KAAK,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,UAAU,GAAG,KAAK,GAAG,QAAQ,GAAG,YAAY,GAAG,OAAO,CAAC;AA4C7F,wBAAgB,WAAW,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE;IAAE,MAAM,EAAE,UAAU,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,2CAG5F;AAED,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE;IAAE,QAAQ,EAAE,YAAY,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,2CAGpG;AAED,wBAAgB,SAAS,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAAE,IAAI,EAAE,QAAQ,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,2CAGpF;AAGD,YAAY,EAAE,UAAU,EAAE,YAAY,EAAE,QAAQ,EAAE,CAAC"}