@fogui/react 0.1.0

package/dist/index.d.mts

@@ -0,0 +1,69 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+import { U as UseFogUIReturn } from './index-BcLda68r.mjs';
+export { d as ComponentBlock, C as ContentBlock, D as DynamicComponent, F as FogUIConfig, f as FogUIRenderer, b as FogUIResponse, S as StreamEvent, c as TextBlock, e as ThinkingItem, T as TransformOptions, a as TransformResult, g as defaultComponentRegistry } from './index-BcLda68r.mjs';
+
+interface FogUIContextValue {
+    apiKey: string;
+    endpoint: string;
+}
+interface FogUIProviderProps {
+    children: React.ReactNode;
+    /**
+     * Your FogUI API key (get it from https://fogui.dev/dashboard)
+     */
+    apiKey: string;
+}
+/**
+ * FogUIProvider - Provides FogUI configuration to the component tree.
+ *
+ * @example
+ * ```tsx
+ * import { FogUIProvider } from '@fogui/react';
+ *
+ * function App() {
+ *   return (
+ *     <FogUIProvider apiKey="fog_xxxx">
+ *       <MyApp />
+ *     </FogUIProvider>
+ *   );
+ * }
+ * ```
+ */
+declare function FogUIProvider({ children, apiKey }: FogUIProviderProps): react_jsx_runtime.JSX.Element;
+/**
+ * Hook to access FogUI context
+ * @internal
+ */
+declare function useFogUIContext(): FogUIContextValue;
+
+/**
+ * useFogUI - Main hook for transforming LLM output into structured UI.
+ *
+ * @example
+ * ```tsx
+ * import { useFogUI, FogUIRenderer } from '@fogui/react';
+ *
+ * function Chat() {
+ *   const { transform, isLoading } = useFogUI();
+ *   const [ui, setUI] = useState(null);
+ *
+ *   const handleLLMResponse = async (llmOutput: string) => {
+ *     const result = await transform(llmOutput);
+ *     if (result.success) {
+ *       setUI(result.result);
+ *     }
+ *   };
+ *
+ *   return (
+ *     <div>
+ *       {isLoading && <p>Transforming...</p>}
+ *       {ui && <FogUIRenderer response={ui} />}
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+declare function useFogUI(): UseFogUIReturn;
+
+export { FogUIProvider, type FogUIProviderProps, UseFogUIReturn, useFogUI, useFogUIContext };

package/dist/index.d.ts

@@ -0,0 +1,69 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+import { U as UseFogUIReturn } from './index-BcLda68r.js';
+export { d as ComponentBlock, C as ContentBlock, D as DynamicComponent, F as FogUIConfig, f as FogUIRenderer, b as FogUIResponse, S as StreamEvent, c as TextBlock, e as ThinkingItem, T as TransformOptions, a as TransformResult, g as defaultComponentRegistry } from './index-BcLda68r.js';
+
+interface FogUIContextValue {
+    apiKey: string;
+    endpoint: string;
+}
+interface FogUIProviderProps {
+    children: React.ReactNode;
+    /**
+     * Your FogUI API key (get it from https://fogui.dev/dashboard)
+     */
+    apiKey: string;
+}
+/**
+ * FogUIProvider - Provides FogUI configuration to the component tree.
+ *
+ * @example
+ * ```tsx
+ * import { FogUIProvider } from '@fogui/react';
+ *
+ * function App() {
+ *   return (
+ *     <FogUIProvider apiKey="fog_xxxx">
+ *       <MyApp />
+ *     </FogUIProvider>
+ *   );
+ * }
+ * ```
+ */
+declare function FogUIProvider({ children, apiKey }: FogUIProviderProps): react_jsx_runtime.JSX.Element;
+/**
+ * Hook to access FogUI context
+ * @internal
+ */
+declare function useFogUIContext(): FogUIContextValue;
+
+/**
+ * useFogUI - Main hook for transforming LLM output into structured UI.
+ *
+ * @example
+ * ```tsx
+ * import { useFogUI, FogUIRenderer } from '@fogui/react';
+ *
+ * function Chat() {
+ *   const { transform, isLoading } = useFogUI();
+ *   const [ui, setUI] = useState(null);
+ *
+ *   const handleLLMResponse = async (llmOutput: string) => {
+ *     const result = await transform(llmOutput);
+ *     if (result.success) {
+ *       setUI(result.result);
+ *     }
+ *   };
+ *
+ *   return (
+ *     <div>
+ *       {isLoading && <p>Transforming...</p>}
+ *       {ui && <FogUIRenderer response={ui} />}
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+declare function useFogUI(): UseFogUIReturn;
+
+export { FogUIProvider, type FogUIProviderProps, UseFogUIReturn, useFogUI, useFogUIContext };

package/dist/index.js

@@ -0,0 +1,234 @@
+'use strict';
+
+var React2 = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React2__default = /*#__PURE__*/_interopDefault(React2);
+
+// src/FogUIProvider.tsx
+var FOGUI_API_ENDPOINT = "https://api.fogui.dev";
+var FogUIContext = React2.createContext(null);
+function FogUIProvider({ children, apiKey }) {
+  if (!apiKey) {
+    console.warn("[FogUI] API key is required. Get one at https://fogui.dev/dashboard");
+  }
+  const value = React2.useMemo(() => ({
+    apiKey,
+    endpoint: FOGUI_API_ENDPOINT
+  }), [apiKey]);
+  return /* @__PURE__ */ jsxRuntime.jsx(FogUIContext.Provider, { value, children });
+}
+function useFogUIContext() {
+  const context = React2.useContext(FogUIContext);
+  if (!context) {
+    throw new Error('useFogUI must be used within a FogUIProvider. Wrap your app with <FogUIProvider apiKey="...">');
+  }
+  return context;
+}
+function useFogUI() {
+  const { endpoint, apiKey } = useFogUIContext();
+  const [isLoading, setIsLoading] = React2.useState(false);
+  const [error, setError] = React2.useState(null);
+  const transform = React2.useCallback(async (content, options = {}) => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      const response = await fetch(`${endpoint}/fogui/transform`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          "Authorization": `Bearer ${apiKey}`
+        },
+        body: JSON.stringify({
+          content,
+          context: options.intent || options.preferredComponents || options.instructions ? {
+            intent: options.intent,
+            preferredComponents: options.preferredComponents,
+            instructions: options.instructions
+          } : void 0
+        })
+      });
+      if (!response.ok) {
+        const errorData = await response.json().catch(() => ({}));
+        throw new Error(errorData.error || `HTTP ${response.status}`);
+      }
+      const result = await response.json();
+      if (!result.success) {
+        setError(result.error || "Transformation failed");
+      }
+      return result;
+    } catch (err) {
+      const message = err instanceof Error ? err.message : "Unknown error";
+      setError(message);
+      return { success: false, error: message };
+    } finally {
+      setIsLoading(false);
+    }
+  }, [endpoint, apiKey]);
+  const transformStream = React2.useCallback(async function* (content, options = {}) {
+    setIsLoading(true);
+    setError(null);
+    try {
+      const response = await fetch(`${endpoint}/fogui/transform/stream`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          "Authorization": `Bearer ${apiKey}`
+        },
+        body: JSON.stringify({
+          content,
+          context: options.intent || options.instructions ? {
+            intent: options.intent,
+            instructions: options.instructions
+          } : void 0,
+          streaming: true
+        })
+      });
+      if (!response.ok) {
+        throw new Error(`HTTP ${response.status}`);
+      }
+      const reader = response.body?.getReader();
+      if (!reader) {
+        throw new Error("No response body");
+      }
+      const decoder = new TextDecoder();
+      let buffer = "";
+      let currentEvent = "";
+      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.startsWith("event:")) {
+            currentEvent = line.substring(6).trim();
+          } else if (line.startsWith("data:")) {
+            const data = line.substring(5).trim();
+            if (data === "[DONE]") {
+              yield { type: "done", data: null };
+              continue;
+            }
+            if (data) {
+              try {
+                const parsed = JSON.parse(data);
+                yield { type: currentEvent, data: parsed };
+              } catch {
+                if (currentEvent === "chunk") {
+                  yield { type: "chunk", data };
+                }
+              }
+            }
+          }
+        }
+      }
+    } catch (err) {
+      const message = err instanceof Error ? err.message : "Unknown error";
+      setError(message);
+      yield { type: "error", data: { error: message } };
+    } finally {
+      setIsLoading(false);
+    }
+  }, [endpoint, apiKey]);
+  const clearError = React2.useCallback(() => {
+    setError(null);
+  }, []);
+  return {
+    transform,
+    transformStream,
+    isLoading,
+    error,
+    clearError
+  };
+}
+function DefaultCard({ title, description, data }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { border: "1px solid #e5e7eb", borderRadius: "8px", padding: "16px", marginBottom: "12px" }, children: [
+    title && /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { margin: "0 0 8px", fontSize: "18px", fontWeight: 600 }, children: title }),
+    description && /* @__PURE__ */ jsxRuntime.jsx("p", { style: { margin: "0 0 12px", color: "#6b7280" }, children: description }),
+    data && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: "14px" }, children: Object.entries(data).map(([key, value]) => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between", padding: "4px 0" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "#6b7280" }, children: key }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontWeight: 500 }, children: String(value) })
+    ] }, key)) })
+  ] });
+}
+function DefaultList({ title, items }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginBottom: "12px" }, children: [
+    title && /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { margin: "0 0 12px", fontSize: "18px", fontWeight: 600 }, children: title }),
+    /* @__PURE__ */ jsxRuntime.jsx("ul", { style: { margin: 0, paddingLeft: "20px" }, children: items.map((item, i) => /* @__PURE__ */ jsxRuntime.jsx("li", { style: { marginBottom: "8px" }, children: typeof item === "object" ? JSON.stringify(item) : String(item) }, i)) })
+  ] });
+}
+function DefaultTable({ columns, rows }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { overflowX: "auto", marginBottom: "12px" }, children: /* @__PURE__ */ jsxRuntime.jsxs("table", { style: { width: "100%", borderCollapse: "collapse", fontSize: "14px" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsx("tr", { children: columns.map((col) => /* @__PURE__ */ jsxRuntime.jsx("th", { style: { textAlign: "left", padding: "12px 8px", borderBottom: "2px solid #e5e7eb", fontWeight: 600 }, children: col }, col)) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: rows.map((row, i) => /* @__PURE__ */ jsxRuntime.jsx("tr", { children: columns.map((col) => /* @__PURE__ */ jsxRuntime.jsx("td", { style: { padding: "12px 8px", borderBottom: "1px solid #e5e7eb" }, children: String(row[col] ?? "") }, col)) }, i)) })
+  ] }) });
+}
+function DefaultCallout({ title, message, variant = "info" }) {
+  const colors = {
+    info: { bg: "#eff6ff", border: "#3b82f6", text: "#1e40af" },
+    warning: { bg: "#fffbeb", border: "#f59e0b", text: "#92400e" },
+    tip: { bg: "#f0fdf4", border: "#22c55e", text: "#166534" }
+  };
+  const c = colors[variant];
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { backgroundColor: c.bg, borderLeft: `4px solid ${c.border}`, padding: "12px 16px", marginBottom: "12px", borderRadius: "0 8px 8px 0" }, children: [
+    title && /* @__PURE__ */ jsxRuntime.jsx("strong", { style: { color: c.text, display: "block", marginBottom: "4px" }, children: title }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: c.text }, children: message })
+  ] });
+}
+var defaultComponentRegistry = {
+  card: DefaultCard,
+  list: DefaultList,
+  table: DefaultTable,
+  callout: DefaultCallout
+};
+function DynamicComponent({ block, registry = defaultComponentRegistry }) {
+  const { componentType, props } = block;
+  const Component = registry[componentType];
+  if (!Component) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { padding: "12px", backgroundColor: "#fef3c7", border: "1px solid #fcd34d", borderRadius: "8px", fontSize: "14px" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("strong", { children: [
+        "Unknown component: ",
+        componentType
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("pre", { style: { margin: "8px 0 0", fontSize: "12px", overflow: "auto" }, children: JSON.stringify(props, null, 2) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(Component, { ...props });
+}
+function FogUIRenderer({ response, componentRegistry, className }) {
+  const registry = componentRegistry || defaultComponentRegistry;
+  if (!response || !response.content) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className, children: response.content.map((block, index) => /* @__PURE__ */ jsxRuntime.jsx(
+    ContentBlockRenderer,
+    {
+      block,
+      registry
+    },
+    index
+  )) });
+}
+function ContentBlockRenderer({ block, registry }) {
+  if (block.type === "text") {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginBottom: "12px", lineHeight: 1.6 }, children: block.value.split("\n").map((line, i) => /* @__PURE__ */ jsxRuntime.jsxs(React2__default.default.Fragment, { children: [
+      line,
+      i < block.value.split("\n").length - 1 && /* @__PURE__ */ jsxRuntime.jsx("br", {})
+    ] }, i)) });
+  }
+  if (block.type === "component") {
+    return /* @__PURE__ */ jsxRuntime.jsx(DynamicComponent, { block, registry });
+  }
+  return null;
+}
+
+exports.DynamicComponent = DynamicComponent;
+exports.FogUIProvider = FogUIProvider;
+exports.FogUIRenderer = FogUIRenderer;
+exports.defaultComponentRegistry = defaultComponentRegistry;
+exports.useFogUI = useFogUI;
+exports.useFogUIContext = useFogUIContext;
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/FogUIProvider.tsx","../src/useFogUI.ts","../src/components/ComponentRegistry.tsx","../src/components/FogUIRenderer.tsx"],"names":["createContext","useMemo","jsx","useContext","useState","useCallback","jsxs","React"],"mappings":"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","file":"index.js","sourcesContent":["import React, { createContext, useContext, useMemo } from 'react';\n\n/**\n * FogUI Platform API endpoint\n */\nconst FOGUI_API_ENDPOINT = 'https://api.fogui.dev';\n\ninterface FogUIContextValue {\n  apiKey: string;\n  endpoint: string;\n}\n\nconst FogUIContext = createContext<FogUIContextValue | null>(null);\n\nexport interface FogUIProviderProps {\n  children: React.ReactNode;\n  /**\n   * Your FogUI API key (get it from https://fogui.dev/dashboard)\n   */\n  apiKey: string;\n}\n\n/**\n * FogUIProvider - Provides FogUI configuration to the component tree.\n * \n * @example\n * ```tsx\n * import { FogUIProvider } from '@fogui/react';\n * \n * function App() {\n *   return (\n *     <FogUIProvider apiKey=\"fog_xxxx\">\n *       <MyApp />\n *     </FogUIProvider>\n *   );\n * }\n * ```\n */\nexport function FogUIProvider({ children, apiKey }: FogUIProviderProps) {\n  if (!apiKey) {\n    console.warn('[FogUI] API key is required. Get one at https://fogui.dev/dashboard');\n  }\n\n  const value = useMemo<FogUIContextValue>(() => ({\n    apiKey,\n    endpoint: FOGUI_API_ENDPOINT,\n  }), [apiKey]);\n\n  return (\n    <FogUIContext.Provider value={value}>\n      {children}\n    </FogUIContext.Provider>\n  );\n}\n\n/**\n * Hook to access FogUI context\n * @internal\n */\nexport function useFogUIContext(): FogUIContextValue {\n  const context = useContext(FogUIContext);\n  if (!context) {\n    throw new Error('useFogUI must be used within a FogUIProvider. Wrap your app with <FogUIProvider apiKey=\"...\">');\n  }\n  return context;\n}\n","import { useState, useCallback } from 'react';\nimport { useFogUIContext } from './FogUIProvider';\nimport type { TransformOptions, TransformResult, UseFogUIReturn, StreamEvent } from './types';\n\n/**\n * useFogUI - Main hook for transforming LLM output into structured UI.\n * \n * @example\n * ```tsx\n * import { useFogUI, FogUIRenderer } from '@fogui/react';\n * \n * function Chat() {\n *   const { transform, isLoading } = useFogUI();\n *   const [ui, setUI] = useState(null);\n * \n *   const handleLLMResponse = async (llmOutput: string) => {\n *     const result = await transform(llmOutput);\n *     if (result.success) {\n *       setUI(result.result);\n *     }\n *   };\n * \n *   return (\n *     <div>\n *       {isLoading && <p>Transforming...</p>}\n *       {ui && <FogUIRenderer response={ui} />}\n *     </div>\n *   );\n * }\n * ```\n */\nexport function useFogUI(): UseFogUIReturn {\n  const { endpoint, apiKey } = useFogUIContext();\n  const [isLoading, setIsLoading] = useState(false);\n  const [error, setError] = useState<string | null>(null);\n\n  /**\n   * Transform raw LLM text into structured UI (non-streaming)\n   */\n  const transform = useCallback(async (\n    content: string,\n    options: TransformOptions = {}\n  ): Promise<TransformResult> => {\n    setIsLoading(true);\n    setError(null);\n\n    try {\n      const response = await fetch(`${endpoint}/fogui/transform`, {\n        method: 'POST',\n        headers: {\n          'Content-Type': 'application/json',\n          'Authorization': `Bearer ${apiKey}`,\n        },\n        body: JSON.stringify({\n          content,\n          context: options.intent || options.preferredComponents || options.instructions ? {\n            intent: options.intent,\n            preferredComponents: options.preferredComponents,\n            instructions: options.instructions,\n          } : undefined,\n        }),\n      });\n\n      if (!response.ok) {\n        const errorData = await response.json().catch(() => ({}));\n        throw new Error(errorData.error || `HTTP ${response.status}`);\n      }\n\n      const result: TransformResult = await response.json();\n      \n      if (!result.success) {\n        setError(result.error || 'Transformation failed');\n      }\n\n      return result;\n\n    } catch (err) {\n      const message = err instanceof Error ? err.message : 'Unknown error';\n      setError(message);\n      return { success: false, error: message };\n    } finally {\n      setIsLoading(false);\n    }\n  }, [endpoint, apiKey]);\n\n  /**\n   * Transform with streaming - returns an async generator\n   */\n  const transformStream = useCallback(async function* (\n    content: string,\n    options: TransformOptions = {}\n  ): AsyncGenerator<StreamEvent> {\n    setIsLoading(true);\n    setError(null);\n\n    try {\n      const response = await fetch(`${endpoint}/fogui/transform/stream`, {\n        method: 'POST',\n        headers: {\n          'Content-Type': 'application/json',\n          'Authorization': `Bearer ${apiKey}`,\n        },\n        body: JSON.stringify({\n          content,\n          context: options.intent || options.instructions ? {\n            intent: options.intent,\n            instructions: options.instructions,\n          } : undefined,\n          streaming: true,\n        }),\n      });\n\n      if (!response.ok) {\n        throw new Error(`HTTP ${response.status}`);\n      }\n\n      const reader = response.body?.getReader();\n      if (!reader) {\n        throw new Error('No response body');\n      }\n\n      const decoder = new TextDecoder();\n      let buffer = '';\n      let currentEvent = '';\n\n      while (true) {\n        const { done, value } = await reader.read();\n        if (done) break;\n\n        buffer += decoder.decode(value, { stream: true });\n        const lines = buffer.split('\\n');\n        buffer = lines.pop() || '';\n\n        for (const line of lines) {\n          if (line.startsWith('event:')) {\n            currentEvent = line.substring(6).trim();\n          } else if (line.startsWith('data:')) {\n            const data = line.substring(5).trim();\n            \n            if (data === '[DONE]') {\n              yield { type: 'done', data: null };\n              continue;\n            }\n\n            if (data) {\n              try {\n                const parsed = JSON.parse(data);\n                yield { type: currentEvent as StreamEvent['type'], data: parsed };\n              } catch {\n                if (currentEvent === 'chunk') {\n                  yield { type: 'chunk', data };\n                }\n              }\n            }\n          }\n        }\n      }\n\n    } catch (err) {\n      const message = err instanceof Error ? err.message : 'Unknown error';\n      setError(message);\n      yield { type: 'error', data: { error: message } };\n    } finally {\n      setIsLoading(false);\n    }\n  }, [endpoint, apiKey]);\n\n  const clearError = useCallback(() => {\n    setError(null);\n  }, []);\n\n  return {\n    transform,\n    transformStream,\n    isLoading,\n    error,\n    clearError,\n  };\n}\n","import React from 'react';\nimport type { ComponentBlock } from '../types';\n\n/**\n * Default component implementations.\n * These provide basic rendering - users should customize for their design system.\n */\n\n// Card Component\nfunction DefaultCard({ title, description, data }: { title?: string; description?: string; data?: Record<string, unknown> }) {\n  return (\n    <div style={{ border: '1px solid #e5e7eb', borderRadius: '8px', padding: '16px', marginBottom: '12px' }}>\n      {title && <h3 style={{ margin: '0 0 8px', fontSize: '18px', fontWeight: 600 }}>{title}</h3>}\n      {description && <p style={{ margin: '0 0 12px', color: '#6b7280' }}>{description}</p>}\n      {data && (\n        <div style={{ fontSize: '14px' }}>\n          {Object.entries(data).map(([key, value]) => (\n            <div key={key} style={{ display: 'flex', justifyContent: 'space-between', padding: '4px 0' }}>\n              <span style={{ color: '#6b7280' }}>{key}</span>\n              <span style={{ fontWeight: 500 }}>{String(value)}</span>\n            </div>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n\n// List Component\nfunction DefaultList({ title, items }: { title?: string; items: unknown[] }) {\n  return (\n    <div style={{ marginBottom: '12px' }}>\n      {title && <h3 style={{ margin: '0 0 12px', fontSize: '18px', fontWeight: 600 }}>{title}</h3>}\n      <ul style={{ margin: 0, paddingLeft: '20px' }}>\n        {items.map((item, i) => (\n          <li key={i} style={{ marginBottom: '8px' }}>\n            {typeof item === 'object' ? JSON.stringify(item) : String(item)}\n          </li>\n        ))}\n      </ul>\n    </div>\n  );\n}\n\n// Table Component\nfunction DefaultTable({ columns, rows }: { columns: string[]; rows: Record<string, unknown>[] }) {\n  return (\n    <div style={{ overflowX: 'auto', marginBottom: '12px' }}>\n      <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: '14px' }}>\n        <thead>\n          <tr>\n            {columns.map((col) => (\n              <th key={col} style={{ textAlign: 'left', padding: '12px 8px', borderBottom: '2px solid #e5e7eb', fontWeight: 600 }}>\n                {col}\n              </th>\n            ))}\n          </tr>\n        </thead>\n        <tbody>\n          {rows.map((row, i) => (\n            <tr key={i}>\n              {columns.map((col) => (\n                <td key={col} style={{ padding: '12px 8px', borderBottom: '1px solid #e5e7eb' }}>\n                  {String(row[col] ?? '')}\n                </td>\n              ))}\n            </tr>\n          ))}\n        </tbody>\n      </table>\n    </div>\n  );\n}\n\n// Callout Component\nfunction DefaultCallout({ title, message, variant = 'info' }: { title?: string; message: string; variant?: 'info' | 'warning' | 'tip' }) {\n  const colors = {\n    info: { bg: '#eff6ff', border: '#3b82f6', text: '#1e40af' },\n    warning: { bg: '#fffbeb', border: '#f59e0b', text: '#92400e' },\n    tip: { bg: '#f0fdf4', border: '#22c55e', text: '#166534' },\n  };\n  const c = colors[variant];\n  return (\n    <div style={{ backgroundColor: c.bg, borderLeft: `4px solid ${c.border}`, padding: '12px 16px', marginBottom: '12px', borderRadius: '0 8px 8px 0' }}>\n      {title && <strong style={{ color: c.text, display: 'block', marginBottom: '4px' }}>{title}</strong>}\n      <span style={{ color: c.text }}>{message}</span>\n    </div>\n  );\n}\n\n/**\n * Default component registry mapping componentType to React components.\n * Users can override this with their own components.\n */\nexport const defaultComponentRegistry: Record<string, React.ComponentType<any>> = {\n  card: DefaultCard,\n  list: DefaultList,\n  table: DefaultTable,\n  callout: DefaultCallout,\n};\n\ninterface DynamicComponentProps {\n  block: ComponentBlock;\n  registry?: Record<string, React.ComponentType<any>>;\n}\n\n/**\n * DynamicComponent - Renders a component based on componentType.\n */\nexport function DynamicComponent({ block, registry = defaultComponentRegistry }: DynamicComponentProps) {\n  const { componentType, props } = block;\n  const Component = registry[componentType];\n\n  if (!Component) {\n    return (\n      <div style={{ padding: '12px', backgroundColor: '#fef3c7', border: '1px solid #fcd34d', borderRadius: '8px', fontSize: '14px' }}>\n        <strong>Unknown component: {componentType}</strong>\n        <pre style={{ margin: '8px 0 0', fontSize: '12px', overflow: 'auto' }}>\n          {JSON.stringify(props, null, 2)}\n        </pre>\n      </div>\n    );\n  }\n\n  return <Component {...props} />;\n}\n","import React from 'react';\nimport type { FogUIResponse, ContentBlock } from '../types';\nimport { DynamicComponent, defaultComponentRegistry } from './ComponentRegistry';\n\ninterface FogUIRendererProps {\n  /**\n   * The FogUIResponse to render\n   */\n  response: FogUIResponse;\n  /**\n   * Custom component registry to override default components\n   */\n  componentRegistry?: Record<string, React.ComponentType<any>>;\n  /**\n   * Custom className for the container\n   */\n  className?: string;\n}\n\n/**\n * FogUIRenderer - Renders a FogUIResponse as React components.\n * \n * @example\n * ```tsx\n * import { FogUIRenderer } from '@fogui/react';\n * \n * function Chat({ response }) {\n *   return <FogUIRenderer response={response} />;\n * }\n * ```\n */\nexport function FogUIRenderer({ response, componentRegistry, className }: FogUIRendererProps) {\n  const registry = componentRegistry || defaultComponentRegistry;\n\n  if (!response || !response.content) {\n    return null;\n  }\n\n  return (\n    <div className={className}>\n      {response.content.map((block, index) => (\n        <ContentBlockRenderer \n          key={index} \n          block={block} \n          registry={registry}\n        />\n      ))}\n    </div>\n  );\n}\n\ninterface ContentBlockRendererProps {\n  block: ContentBlock;\n  registry: Record<string, React.ComponentType<any>>;\n}\n\nfunction ContentBlockRenderer({ block, registry }: ContentBlockRendererProps) {\n  if (block.type === 'text') {\n    return (\n      <div style={{ marginBottom: '12px', lineHeight: 1.6 }}>\n        {block.value.split('\\n').map((line, i) => (\n          <React.Fragment key={i}>\n            {line}\n            {i < block.value.split('\\n').length - 1 && <br />}\n          </React.Fragment>\n        ))}\n      </div>\n    );\n  }\n\n  if (block.type === 'component') {\n    return <DynamicComponent block={block} registry={registry} />;\n  }\n\n  return null;\n}\n"]}

package/dist/index.mjs

@@ -0,0 +1,223 @@
+import React2, { createContext, useMemo, useContext, useState, useCallback } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/FogUIProvider.tsx
+var FOGUI_API_ENDPOINT = "https://api.fogui.dev";
+var FogUIContext = createContext(null);
+function FogUIProvider({ children, apiKey }) {
+  if (!apiKey) {
+    console.warn("[FogUI] API key is required. Get one at https://fogui.dev/dashboard");
+  }
+  const value = useMemo(() => ({
+    apiKey,
+    endpoint: FOGUI_API_ENDPOINT
+  }), [apiKey]);
+  return /* @__PURE__ */ jsx(FogUIContext.Provider, { value, children });
+}
+function useFogUIContext() {
+  const context = useContext(FogUIContext);
+  if (!context) {
+    throw new Error('useFogUI must be used within a FogUIProvider. Wrap your app with <FogUIProvider apiKey="...">');
+  }
+  return context;
+}
+function useFogUI() {
+  const { endpoint, apiKey } = useFogUIContext();
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const transform = useCallback(async (content, options = {}) => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      const response = await fetch(`${endpoint}/fogui/transform`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          "Authorization": `Bearer ${apiKey}`
+        },
+        body: JSON.stringify({
+          content,
+          context: options.intent || options.preferredComponents || options.instructions ? {
+            intent: options.intent,
+            preferredComponents: options.preferredComponents,
+            instructions: options.instructions
+          } : void 0
+        })
+      });
+      if (!response.ok) {
+        const errorData = await response.json().catch(() => ({}));
+        throw new Error(errorData.error || `HTTP ${response.status}`);
+      }
+      const result = await response.json();
+      if (!result.success) {
+        setError(result.error || "Transformation failed");
+      }
+      return result;
+    } catch (err) {
+      const message = err instanceof Error ? err.message : "Unknown error";
+      setError(message);
+      return { success: false, error: message };
+    } finally {
+      setIsLoading(false);
+    }
+  }, [endpoint, apiKey]);
+  const transformStream = useCallback(async function* (content, options = {}) {
+    setIsLoading(true);
+    setError(null);
+    try {
+      const response = await fetch(`${endpoint}/fogui/transform/stream`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          "Authorization": `Bearer ${apiKey}`
+        },
+        body: JSON.stringify({
+          content,
+          context: options.intent || options.instructions ? {
+            intent: options.intent,
+            instructions: options.instructions
+          } : void 0,
+          streaming: true
+        })
+      });
+      if (!response.ok) {
+        throw new Error(`HTTP ${response.status}`);
+      }
+      const reader = response.body?.getReader();
+      if (!reader) {
+        throw new Error("No response body");
+      }
+      const decoder = new TextDecoder();
+      let buffer = "";
+      let currentEvent = "";
+      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.startsWith("event:")) {
+            currentEvent = line.substring(6).trim();
+          } else if (line.startsWith("data:")) {
+            const data = line.substring(5).trim();
+            if (data === "[DONE]") {
+              yield { type: "done", data: null };
+              continue;
+            }
+            if (data) {
+              try {
+                const parsed = JSON.parse(data);
+                yield { type: currentEvent, data: parsed };
+              } catch {
+                if (currentEvent === "chunk") {
+                  yield { type: "chunk", data };
+                }
+              }
+            }
+          }
+        }
+      }
+    } catch (err) {
+      const message = err instanceof Error ? err.message : "Unknown error";
+      setError(message);
+      yield { type: "error", data: { error: message } };
+    } finally {
+      setIsLoading(false);
+    }
+  }, [endpoint, apiKey]);
+  const clearError = useCallback(() => {
+    setError(null);
+  }, []);
+  return {
+    transform,
+    transformStream,
+    isLoading,
+    error,
+    clearError
+  };
+}
+function DefaultCard({ title, description, data }) {
+  return /* @__PURE__ */ jsxs("div", { style: { border: "1px solid #e5e7eb", borderRadius: "8px", padding: "16px", marginBottom: "12px" }, children: [
+    title && /* @__PURE__ */ jsx("h3", { style: { margin: "0 0 8px", fontSize: "18px", fontWeight: 600 }, children: title }),
+    description && /* @__PURE__ */ jsx("p", { style: { margin: "0 0 12px", color: "#6b7280" }, children: description }),
+    data && /* @__PURE__ */ jsx("div", { style: { fontSize: "14px" }, children: Object.entries(data).map(([key, value]) => /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", padding: "4px 0" }, children: [
+      /* @__PURE__ */ jsx("span", { style: { color: "#6b7280" }, children: key }),
+      /* @__PURE__ */ jsx("span", { style: { fontWeight: 500 }, children: String(value) })
+    ] }, key)) })
+  ] });
+}
+function DefaultList({ title, items }) {
+  return /* @__PURE__ */ jsxs("div", { style: { marginBottom: "12px" }, children: [
+    title && /* @__PURE__ */ jsx("h3", { style: { margin: "0 0 12px", fontSize: "18px", fontWeight: 600 }, children: title }),
+    /* @__PURE__ */ jsx("ul", { style: { margin: 0, paddingLeft: "20px" }, children: items.map((item, i) => /* @__PURE__ */ jsx("li", { style: { marginBottom: "8px" }, children: typeof item === "object" ? JSON.stringify(item) : String(item) }, i)) })
+  ] });
+}
+function DefaultTable({ columns, rows }) {
+  return /* @__PURE__ */ jsx("div", { style: { overflowX: "auto", marginBottom: "12px" }, children: /* @__PURE__ */ jsxs("table", { style: { width: "100%", borderCollapse: "collapse", fontSize: "14px" }, children: [
+    /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: columns.map((col) => /* @__PURE__ */ jsx("th", { style: { textAlign: "left", padding: "12px 8px", borderBottom: "2px solid #e5e7eb", fontWeight: 600 }, children: col }, col)) }) }),
+    /* @__PURE__ */ jsx("tbody", { children: rows.map((row, i) => /* @__PURE__ */ jsx("tr", { children: columns.map((col) => /* @__PURE__ */ jsx("td", { style: { padding: "12px 8px", borderBottom: "1px solid #e5e7eb" }, children: String(row[col] ?? "") }, col)) }, i)) })
+  ] }) });
+}
+function DefaultCallout({ title, message, variant = "info" }) {
+  const colors = {
+    info: { bg: "#eff6ff", border: "#3b82f6", text: "#1e40af" },
+    warning: { bg: "#fffbeb", border: "#f59e0b", text: "#92400e" },
+    tip: { bg: "#f0fdf4", border: "#22c55e", text: "#166534" }
+  };
+  const c = colors[variant];
+  return /* @__PURE__ */ jsxs("div", { style: { backgroundColor: c.bg, borderLeft: `4px solid ${c.border}`, padding: "12px 16px", marginBottom: "12px", borderRadius: "0 8px 8px 0" }, children: [
+    title && /* @__PURE__ */ jsx("strong", { style: { color: c.text, display: "block", marginBottom: "4px" }, children: title }),
+    /* @__PURE__ */ jsx("span", { style: { color: c.text }, children: message })
+  ] });
+}
+var defaultComponentRegistry = {
+  card: DefaultCard,
+  list: DefaultList,
+  table: DefaultTable,
+  callout: DefaultCallout
+};
+function DynamicComponent({ block, registry = defaultComponentRegistry }) {
+  const { componentType, props } = block;
+  const Component = registry[componentType];
+  if (!Component) {
+    return /* @__PURE__ */ jsxs("div", { style: { padding: "12px", backgroundColor: "#fef3c7", border: "1px solid #fcd34d", borderRadius: "8px", fontSize: "14px" }, children: [
+      /* @__PURE__ */ jsxs("strong", { children: [
+        "Unknown component: ",
+        componentType
+      ] }),
+      /* @__PURE__ */ jsx("pre", { style: { margin: "8px 0 0", fontSize: "12px", overflow: "auto" }, children: JSON.stringify(props, null, 2) })
+    ] });
+  }
+  return /* @__PURE__ */ jsx(Component, { ...props });
+}
+function FogUIRenderer({ response, componentRegistry, className }) {
+  const registry = componentRegistry || defaultComponentRegistry;
+  if (!response || !response.content) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx("div", { className, children: response.content.map((block, index) => /* @__PURE__ */ jsx(
+    ContentBlockRenderer,
+    {
+      block,
+      registry
+    },
+    index
+  )) });
+}
+function ContentBlockRenderer({ block, registry }) {
+  if (block.type === "text") {
+    return /* @__PURE__ */ jsx("div", { style: { marginBottom: "12px", lineHeight: 1.6 }, children: block.value.split("\n").map((line, i) => /* @__PURE__ */ jsxs(React2.Fragment, { children: [
+      line,
+      i < block.value.split("\n").length - 1 && /* @__PURE__ */ jsx("br", {})
+    ] }, i)) });
+  }
+  if (block.type === "component") {
+    return /* @__PURE__ */ jsx(DynamicComponent, { block, registry });
+  }
+  return null;
+}
+
+export { DynamicComponent, FogUIProvider, FogUIRenderer, defaultComponentRegistry, useFogUI, useFogUIContext };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map