vibezcheck 0.2.0 → 0.3.0

package/dist/react/index.d.mts

@@ -1,5 +1,6 @@
-import { T as TokenUsage, I as InferenceCost } from '../types-CSrSmsd1.mjs';
-import React$1 from 'react';
+import { T as TokenUsage, I as InferenceCost } from '../types-DCuzLVyc.mjs';
+import * as React$1 from 'react';
+import React__default from 'react';
 import 'stripe';
 
 /**
@@ -122,33 +123,84 @@ interface VibezSessionBadgeProps {
     style?: React.CSSProperties;
 }
 
-declare const VibezSessionContext: React$1.Context<VibezSessionContextValue | null>;
-declare const VibezSessionProvider: React$1.FC<VibezSessionProviderProps>;
+declare const VibezSessionContext: React__default.Context<VibezSessionContextValue | null>;
+declare const VibezSessionProvider: React__default.FC<VibezSessionProviderProps>;
 
 /**
  * Hook to access live session usage, cost totals, and turn recorder
+ */
+declare function useVibezSession(): VibezSessionContextValue;
+declare const useVibez: typeof useVibezSession;
+interface VibezChatMessage {
+    id: string;
+    role: 'user' | 'assistant' | 'system';
+    content: string;
+    annotations?: Array<{
+        type: string;
+        reasoning?: string;
+        [key: string]: any;
+    }>;
+    createdAt?: Date;
+}
+interface UseVibezChatOptions {
+    api?: string;
+    model?: string;
+    customer?: string;
+    body?: Record<string, any>;
+    initialMessages?: VibezChatMessage[];
+    onFinish?: (message: VibezChatMessage, usage: any) => void;
+    onError?: (error: Error) => void;
+}
+/**
+ * Declarative, 1-line Chat Streaming Hook with automatic VibezCheck session tracking.
  *
  * @example
  * ```tsx
- * const { sessionUsage, sessionCost, recordTurn, resetSession } = useVibezSession();
- *
- * // Inside useChat onFinish:
- * onFinish: (message, { usage }) => {
- *   recordTurn({ model: 'gpt-5.6-sol', usage });
- * }
+ * const { messages, input, handleInputChange, handleSubmit, isLoading } = useVibezChat({
+ *   model: 'gpt-4o-mini',
+ *   customer: 'alex@example.com',
+ * });
  * ```
  */
-declare function useVibezSession(): VibezSessionContextValue;
-/**
- * Convenient alias
- */
-declare const useVibez: typeof useVibezSession;
+declare function useVibezChat(options?: UseVibezChatOptions): {
+    messages: VibezChatMessage[];
+    setMessages: React$1.Dispatch<React$1.SetStateAction<VibezChatMessage[]>>;
+    input: string;
+    setInput: React$1.Dispatch<React$1.SetStateAction<string>>;
+    handleInputChange: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    handleSubmit: (e?: React.FormEvent) => void;
+    isLoading: boolean;
+    stop: () => void;
+    append: (userMessage: VibezChatMessage) => Promise<void>;
+};
 
-declare const VibezSessionWidget: React$1.FC<VibezSessionWidgetProps>;
+declare const VibezSessionWidget: React__default.FC<VibezSessionWidgetProps>;
 
 /**
  * Compact inline badge for chat input bars, headers, or navbars
  */
-declare const VibezSessionBadge: React$1.FC<VibezSessionBadgeProps>;
+declare const VibezSessionBadge: React__default.FC<VibezSessionBadgeProps>;
+
+interface VibezBillingNotice {
+    status?: 'requires_payment' | 'limit_reached' | 'upgrade_required';
+    customerId?: string;
+    customerEmail?: string;
+    checkoutUrl?: string;
+    tokensUsed?: number;
+    costUSD?: number;
+    message?: string;
+}
+interface VibezBillingModalProps {
+    notice?: VibezBillingNotice | null;
+    isOpen?: boolean;
+    onClose?: () => void;
+    onSuccess?: () => void;
+    theme?: 'light' | 'dark';
+    testMode?: boolean;
+}
+/**
+ * Intuitive React Modal for Stripe Top-Up, Card Registration & Paywall
+ */
+declare const VibezBillingModal: React__default.FC<VibezBillingModalProps>;
 
-export { type CustomStorageAdapter, type SessionPersistenceMode, type SessionState, type SessionTurnRecord, VibezSessionBadge, type VibezSessionBadgeProps, VibezSessionContext, type VibezSessionContextValue, VibezSessionProvider, type VibezSessionProviderProps, VibezSessionWidget, type VibezSessionWidgetProps, useVibez, useVibezSession };
+export { type CustomStorageAdapter, type SessionPersistenceMode, type SessionState, type SessionTurnRecord, type UseVibezChatOptions, VibezBillingModal, type VibezBillingModalProps, type VibezBillingNotice, type VibezChatMessage, VibezSessionBadge, type VibezSessionBadgeProps, VibezSessionContext, type VibezSessionContextValue, VibezSessionProvider, type VibezSessionProviderProps, VibezSessionWidget, type VibezSessionWidgetProps, useVibez, useVibezChat, useVibezSession };

package/dist/react/index.d.ts

@@ -1,5 +1,6 @@
-import { T as TokenUsage, I as InferenceCost } from '../types-CSrSmsd1.js';
-import React$1 from 'react';
+import { T as TokenUsage, I as InferenceCost } from '../types-DCuzLVyc.js';
+import * as React$1 from 'react';
+import React__default from 'react';
 import 'stripe';
 
 /**
@@ -122,33 +123,84 @@ interface VibezSessionBadgeProps {
     style?: React.CSSProperties;
 }
 
-declare const VibezSessionContext: React$1.Context<VibezSessionContextValue | null>;
-declare const VibezSessionProvider: React$1.FC<VibezSessionProviderProps>;
+declare const VibezSessionContext: React__default.Context<VibezSessionContextValue | null>;
+declare const VibezSessionProvider: React__default.FC<VibezSessionProviderProps>;
 
 /**
  * Hook to access live session usage, cost totals, and turn recorder
+ */
+declare function useVibezSession(): VibezSessionContextValue;
+declare const useVibez: typeof useVibezSession;
+interface VibezChatMessage {
+    id: string;
+    role: 'user' | 'assistant' | 'system';
+    content: string;
+    annotations?: Array<{
+        type: string;
+        reasoning?: string;
+        [key: string]: any;
+    }>;
+    createdAt?: Date;
+}
+interface UseVibezChatOptions {
+    api?: string;
+    model?: string;
+    customer?: string;
+    body?: Record<string, any>;
+    initialMessages?: VibezChatMessage[];
+    onFinish?: (message: VibezChatMessage, usage: any) => void;
+    onError?: (error: Error) => void;
+}
+/**
+ * Declarative, 1-line Chat Streaming Hook with automatic VibezCheck session tracking.
  *
  * @example
  * ```tsx
- * const { sessionUsage, sessionCost, recordTurn, resetSession } = useVibezSession();
- *
- * // Inside useChat onFinish:
- * onFinish: (message, { usage }) => {
- *   recordTurn({ model: 'gpt-5.6-sol', usage });
- * }
+ * const { messages, input, handleInputChange, handleSubmit, isLoading } = useVibezChat({
+ *   model: 'gpt-4o-mini',
+ *   customer: 'alex@example.com',
+ * });
  * ```
  */
-declare function useVibezSession(): VibezSessionContextValue;
-/**
- * Convenient alias
- */
-declare const useVibez: typeof useVibezSession;
+declare function useVibezChat(options?: UseVibezChatOptions): {
+    messages: VibezChatMessage[];
+    setMessages: React$1.Dispatch<React$1.SetStateAction<VibezChatMessage[]>>;
+    input: string;
+    setInput: React$1.Dispatch<React$1.SetStateAction<string>>;
+    handleInputChange: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    handleSubmit: (e?: React.FormEvent) => void;
+    isLoading: boolean;
+    stop: () => void;
+    append: (userMessage: VibezChatMessage) => Promise<void>;
+};
 
-declare const VibezSessionWidget: React$1.FC<VibezSessionWidgetProps>;
+declare const VibezSessionWidget: React__default.FC<VibezSessionWidgetProps>;
 
 /**
  * Compact inline badge for chat input bars, headers, or navbars
  */
-declare const VibezSessionBadge: React$1.FC<VibezSessionBadgeProps>;
+declare const VibezSessionBadge: React__default.FC<VibezSessionBadgeProps>;
+
+interface VibezBillingNotice {
+    status?: 'requires_payment' | 'limit_reached' | 'upgrade_required';
+    customerId?: string;
+    customerEmail?: string;
+    checkoutUrl?: string;
+    tokensUsed?: number;
+    costUSD?: number;
+    message?: string;
+}
+interface VibezBillingModalProps {
+    notice?: VibezBillingNotice | null;
+    isOpen?: boolean;
+    onClose?: () => void;
+    onSuccess?: () => void;
+    theme?: 'light' | 'dark';
+    testMode?: boolean;
+}
+/**
+ * Intuitive React Modal for Stripe Top-Up, Card Registration & Paywall
+ */
+declare const VibezBillingModal: React__default.FC<VibezBillingModalProps>;
 
-export { type CustomStorageAdapter, type SessionPersistenceMode, type SessionState, type SessionTurnRecord, VibezSessionBadge, type VibezSessionBadgeProps, VibezSessionContext, type VibezSessionContextValue, VibezSessionProvider, type VibezSessionProviderProps, VibezSessionWidget, type VibezSessionWidgetProps, useVibez, useVibezSession };
+export { type CustomStorageAdapter, type SessionPersistenceMode, type SessionState, type SessionTurnRecord, type UseVibezChatOptions, VibezBillingModal, type VibezBillingModalProps, type VibezBillingNotice, type VibezChatMessage, VibezSessionBadge, type VibezSessionBadgeProps, VibezSessionContext, type VibezSessionContextValue, VibezSessionProvider, type VibezSessionProviderProps, VibezSessionWidget, type VibezSessionWidgetProps, useVibez, useVibezChat, useVibezSession };

package/dist/react/index.js

@@ -20,11 +20,13 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/react/index.ts
 var react_exports = {};
 __export(react_exports, {
+  VibezBillingModal: () => VibezBillingModal,
   VibezSessionBadge: () => VibezSessionBadge,
   VibezSessionContext: () => VibezSessionContext,
   VibezSessionProvider: () => VibezSessionProvider,
   VibezSessionWidget: () => VibezSessionWidget,
   useVibez: () => useVibez,
+  useVibezChat: () => useVibezChat,
   useVibezSession: () => useVibezSession
 });
 module.exports = __toCommonJS(react_exports);
@@ -425,6 +427,193 @@ function useVibezSession() {
   return context;
 }
 var useVibez = useVibezSession;
+function useVibezChat(options = {}) {
+  const {
+    api = "/api/chat",
+    model = "gpt-4o-mini",
+    customer = "anonymous",
+    body = {},
+    initialMessages = [],
+    onFinish,
+    onError
+  } = options;
+  const session = (0, import_react2.useContext)(VibezSessionContext);
+  const [messages, setMessages] = (0, import_react2.useState)(initialMessages);
+  const [input, setInput] = (0, import_react2.useState)("");
+  const [isLoading, setIsLoading] = (0, import_react2.useState)(false);
+  const abortControllerRef = (0, import_react2.useRef)(null);
+  const handleInputChange = (0, import_react2.useCallback)(
+    (e) => {
+      setInput(e.target.value);
+    },
+    []
+  );
+  const append = (0, import_react2.useCallback)(
+    async (userMessage) => {
+      const updatedMessages = [...messages, userMessage];
+      setMessages(updatedMessages);
+      setIsLoading(true);
+      const assistantId = "msg_" + Math.random().toString(36).substring(2, 9);
+      let assistantContent = "";
+      let detectedReasoning = "";
+      let detectedUsage = {
+        promptTokens: 0,
+        completionTokens: 0,
+        totalTokens: 0,
+        reasoningTokens: 0
+      };
+      setMessages((prev) => [
+        ...prev,
+        {
+          id: assistantId,
+          role: "assistant",
+          content: "",
+          createdAt: /* @__PURE__ */ new Date()
+        }
+      ]);
+      try {
+        abortControllerRef.current = new AbortController();
+        const res = await fetch(api, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            messages: updatedMessages.map((m) => ({
+              role: m.role,
+              content: m.content
+            })),
+            model,
+            customer,
+            ...body
+          }),
+          signal: abortControllerRef.current.signal
+        });
+        if (!res.ok) {
+          const errData = await res.json().catch(() => ({}));
+          throw new Error(errData.error || `HTTP error! status: ${res.status}`);
+        }
+        const reader = res.body?.getReader();
+        if (!reader) throw new Error("No stream body available");
+        const decoder = new TextDecoder();
+        let buffer = "";
+        while (true) {
+          const { done, value } = await reader.read();
+          if (done) break;
+          buffer += decoder.decode(value, { stream: true });
+          const lines = buffer.split("\n");
+          buffer = lines.pop() || "";
+          for (const line of lines) {
+            if (!line.trim()) continue;
+            if (line.startsWith("0:")) {
+              try {
+                assistantContent += JSON.parse(line.substring(2));
+              } catch {
+                assistantContent += line.substring(2).replace(/^"|"$/g, "");
+              }
+            } else if (line.startsWith("d:")) {
+              try {
+                const data = JSON.parse(line.substring(2));
+                if (data.usage) {
+                  detectedUsage = {
+                    promptTokens: data.usage.promptTokens ?? 0,
+                    completionTokens: data.usage.completionTokens ?? 0,
+                    totalTokens: (data.usage.promptTokens ?? 0) + (data.usage.completionTokens ?? 0),
+                    reasoningTokens: data.usage.reasoningTokens ?? 0
+                  };
+                }
+              } catch {
+              }
+            } else if (line.startsWith("e:") || line.startsWith("g:")) {
+              try {
+                detectedReasoning += JSON.parse(line.substring(2));
+              } catch {
+                detectedReasoning += line.substring(2);
+              }
+            } else if (!line.startsWith("f:") && !line.startsWith("2:")) {
+              assistantContent += line;
+            }
+            setMessages(
+              (prev) => prev.map(
+                (msg) => msg.id === assistantId ? {
+                  ...msg,
+                  content: assistantContent,
+                  annotations: detectedReasoning ? [{ type: "reasoning", reasoning: detectedReasoning }] : void 0
+                } : msg
+              )
+            );
+          }
+        }
+        if (detectedUsage.promptTokens === 0 && detectedUsage.completionTokens === 0) {
+          const promptWords = updatedMessages.reduce(
+            (acc, m) => acc + m.content.split(/\s+/).length,
+            0
+          );
+          const outputWords = assistantContent.split(/\s+/).length;
+          detectedUsage = {
+            promptTokens: Math.ceil(promptWords * 1.3),
+            completionTokens: Math.ceil(outputWords * 1.3),
+            totalTokens: Math.ceil((promptWords + outputWords) * 1.3),
+            reasoningTokens: detectedReasoning ? Math.ceil(detectedReasoning.split(/\s+/).length * 1.3) : 0
+          };
+        }
+        if (session) {
+          session.recordTurn({
+            model,
+            usage: detectedUsage
+          });
+        }
+        const finalMsg = {
+          id: assistantId,
+          role: "assistant",
+          content: assistantContent,
+          annotations: detectedReasoning ? [{ type: "reasoning", reasoning: detectedReasoning }] : void 0,
+          createdAt: /* @__PURE__ */ new Date()
+        };
+        if (onFinish) {
+          onFinish(finalMsg, detectedUsage);
+        }
+      } catch (err) {
+        if (err.name === "AbortError") return;
+        console.error("[useVibezChat Error]", err);
+        if (onError) onError(err);
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [api, model, customer, body, messages, session, onFinish, onError]
+  );
+  const handleSubmit = (0, import_react2.useCallback)(
+    (e) => {
+      if (e) e.preventDefault();
+      if (!input.trim() || isLoading) return;
+      const userMsg = {
+        id: "msg_" + Math.random().toString(36).substring(2, 9),
+        role: "user",
+        content: input.trim(),
+        createdAt: /* @__PURE__ */ new Date()
+      };
+      setInput("");
+      append(userMsg);
+    },
+    [input, isLoading, append]
+  );
+  const stop = (0, import_react2.useCallback)(() => {
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort();
+      setIsLoading(false);
+    }
+  }, []);
+  return {
+    messages,
+    setMessages,
+    input,
+    setInput,
+    handleInputChange,
+    handleSubmit,
+    isLoading,
+    stop,
+    append
+  };
+}
 
 // src/react/widget.tsx
 var import_react3 = require("react");
@@ -662,13 +851,169 @@ var VibezSessionBadge = ({
     }
   );
 };
+
+// src/react/billing-modal.tsx
+var import_react4 = require("react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var CreditCardIcon = () => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("svg", { className: "h-5 w-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("rect", { x: "2", y: "5", width: "20", height: "14", rx: "2", strokeWidth: "2" }),
+  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("line", { x1: "2", y1: "10", x2: "22", y2: "10", strokeWidth: "2" })
+] });
+var ShieldCheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { className: "h-3.5 w-3.5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" }) });
+var ZapIcon = () => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { className: "h-3.5 w-3.5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("polygon", { points: "13 2 3 14 12 14 11 22 21 10 12 10 13 2", strokeWidth: "2", strokeLinejoin: "round" }) });
+var CloseIcon = () => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("svg", { className: "h-4 w-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("line", { x1: "18", y1: "6", x2: "6", y2: "18", strokeWidth: "2", strokeLinecap: "round" }),
+  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("line", { x1: "6", y1: "6", x2: "18", y2: "18", strokeWidth: "2", strokeLinecap: "round" })
+] });
+var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { className: "h-4 w-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("polyline", { points: "20 6 9 17 4 12", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) });
+var ArrowRightIcon = () => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("svg", { className: "h-4 w-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("line", { x1: "5", y1: "12", x2: "19", y2: "12", strokeWidth: "2", strokeLinecap: "round" }),
+  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("polyline", { points: "12 5 19 12 12 19", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })
+] });
+var VibezBillingModal = ({
+  notice,
+  isOpen: explicitIsOpen,
+  onClose,
+  onSuccess,
+  theme = "light",
+  testMode = true
+}) => {
+  const [loading, setLoading] = (0, import_react4.useState)(false);
+  const [successState, setSuccessState] = (0, import_react4.useState)(false);
+  const [selectedPlan, setSelectedPlan] = (0, import_react4.useState)("starter");
+  const isVisible = explicitIsOpen !== void 0 ? explicitIsOpen : Boolean(notice);
+  if (!isVisible) return null;
+  const handleSimulatePayment = async () => {
+    setLoading(true);
+    if (notice?.checkoutUrl) {
+      window.location.href = notice.checkoutUrl;
+      return;
+    }
+    await new Promise((r) => setTimeout(r, 1200));
+    setLoading(false);
+    setSuccessState(true);
+    setTimeout(() => {
+      setSuccessState(false);
+      if (onSuccess) onSuccess();
+      if (onClose) onClose();
+    }, 1500);
+  };
+  const isLight = theme === "light";
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-900/60 backdrop-blur-sm animate-in fade-in duration-200", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    "div",
+    {
+      className: `relative w-full max-w-md rounded-2xl shadow-2xl border transition-all overflow-hidden ${isLight ? "bg-white border-slate-200 text-slate-900" : "bg-slate-900 border-slate-800 text-white"}`,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "h-1.5 w-full bg-gradient-to-r from-indigo-500 via-purple-500 to-emerald-500" }),
+        onClose && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "button",
+          {
+            onClick: onClose,
+            className: "absolute top-3.5 right-3.5 p-1 rounded-lg text-slate-400 hover:text-slate-700 hover:bg-slate-100 transition",
+            children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CloseIcon, {})
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "p-6 space-y-5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "h-10 w-10 rounded-xl bg-indigo-600 flex items-center justify-center text-white shadow-md shadow-indigo-500/20 shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CreditCardIcon, {}) }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h3", { className: "font-bold text-base tracking-tight", children: notice?.status === "limit_reached" ? "Token Limit Reached" : "Add Billing Credits" }),
+                testMode && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-[10px] uppercase font-bold px-2 py-0.5 rounded-full bg-amber-50 text-amber-700 border border-amber-200", children: "Stripe Sandbox" })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "text-xs text-slate-500 mt-0.5", children: notice?.message || "Top up your account to continue streaming AI tokens." })
+            ] })
+          ] }),
+          (notice?.tokensUsed || notice?.costUSD) && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+            "div",
+            {
+              className: `p-3 rounded-xl border flex items-center justify-between text-xs ${isLight ? "bg-slate-50 border-slate-200" : "bg-slate-800 border-slate-700"}`,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-slate-400", children: "Tokens Metered:" }),
+                  " ",
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("strong", { className: "text-slate-800 font-semibold", children: notice.tokensUsed?.toLocaleString() || 0 })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-slate-400", children: "Cost:" }),
+                  " ",
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("strong", { className: "text-indigo-600 font-semibold", children: [
+                    "$",
+                    notice.costUSD?.toFixed(4) || "0.0000",
+                    " USD"
+                  ] })
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("label", { className: "text-xs font-semibold text-slate-500 uppercase tracking-wider", children: "Select Top-Up Option" }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "grid grid-cols-2 gap-2.5", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setSelectedPlan("starter"),
+                  className: `p-3 rounded-xl border text-left transition relative ${selectedPlan === "starter" ? "border-indigo-600 bg-indigo-50/60 ring-2 ring-indigo-500/20" : isLight ? "border-slate-200 bg-white hover:border-slate-300" : "border-slate-800 bg-slate-800/50"}`,
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "text-xs font-bold text-slate-900", children: "$5.00 Top-Up" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "text-[11px] text-slate-500 mt-0.5", children: "500k AI Tokens" })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setSelectedPlan("pro"),
+                  className: `p-3 rounded-xl border text-left transition relative ${selectedPlan === "pro" ? "border-indigo-600 bg-indigo-50/60 ring-2 ring-indigo-500/20" : isLight ? "border-slate-200 bg-white hover:border-slate-300" : "border-slate-800 bg-slate-800/50"}`,
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "text-xs font-bold text-slate-900", children: "$20.00 Pro" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "text-[11px] text-slate-500 mt-0.5", children: "2.5M AI Tokens" })
+                  ]
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "button",
+            {
+              onClick: handleSimulatePayment,
+              disabled: loading || successState,
+              className: "w-full py-2.5 px-4 rounded-xl bg-indigo-600 hover:bg-indigo-500 disabled:opacity-50 text-white text-sm font-semibold flex items-center justify-center gap-2 shadow-md shadow-indigo-500/20 transition",
+              children: loading ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: "Processing Stripe Sandbox Checkout..." }) : successState ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "flex items-center gap-1.5 text-emerald-300 font-semibold", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CheckIcon, {}),
+                " Credits Added Successfully!"
+              ] }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "flex items-center gap-1.5", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: "Checkout with Stripe" }),
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ArrowRightIcon, {})
+              ] })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center justify-center gap-4 text-[11px] text-slate-400 pt-1 border-t border-slate-100", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center gap-1", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ShieldCheckIcon, {}),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: "Stripe v2 Meter Events" })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center gap-1", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ZapIcon, {}),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: "Zero Latency Telemetry" })
+            ] })
+          ] })
+        ] })
+      ]
+    }
+  ) });
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  VibezBillingModal,
   VibezSessionBadge,
   VibezSessionContext,
   VibezSessionProvider,
   VibezSessionWidget,
   useVibez,
+  useVibezChat,
   useVibezSession
 });
 //# sourceMappingURL=index.js.map