@fogui/react 0.1.0

package/README.md

@@ -0,0 +1,138 @@
+# @fogui/react
+
+> Transform LLM output into beautiful, interactive UI components - like magic from the fog ✨
+
+[![npm version](https://badge.fury.io/js/@fogui%2Freact.svg)](https://www.npmjs.com/package/@fogui/react)
+
+## Installation
+
+```bash
+npm install @fogui/react
+# or
+yarn add @fogui/react
+# or
+pnpm add @fogui/react
+```
+
+## Quick Start
+
+```tsx
+import { FogUIProvider, useFogUI, FogUIRenderer } from '@fogui/react';
+
+// 1. Wrap your app with FogUIProvider
+function App() {
+  return (
+    <FogUIProvider apiKey="fog_xxxx">
+      <Chat />
+    </FogUIProvider>
+  );
+}
+
+// 2. Use the hook to transform LLM output
+function Chat() {
+  const { transform, isLoading } = useFogUI();
+  const [ui, setUI] = useState(null);
+
+  const handleSubmit = async (userMessage: string) => {
+    // Call YOUR LLM (with your own API key)
+    const llmResponse = await openai.chat.completions.create({
+      model: 'gpt-4',
+      messages: [{ role: 'user', content: userMessage }]
+    });
+
+    // Transform with FogUI - UI materializes from the fog ✨
+    const result = await transform(llmResponse.choices[0].message.content);
+    
+    if (result.success) {
+      setUI(result.result);
+    }
+  };
+
+  return (
+    <div>
+      {isLoading && <p>Materializing UI...</p>}
+      {ui && <FogUIRenderer response={ui} />}
+    </div>
+  );
+}
+```
+
+## API Reference
+
+### `<FogUIProvider>`
+
+Wrap your app with this provider to configure FogUI.
+
+```tsx
+<FogUIProvider apiKey="fog_xxxx">
+  <App />
+</FogUIProvider>
+```
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `apiKey` | `string` | Your FogUI API key (get it from [fogui.dev/dashboard](https://fogui.dev/dashboard)) |
+
+### `useFogUI()`
+
+Hook for transforming LLM output.
+
+```tsx
+const { transform, transformStream, isLoading, error, clearError } = useFogUI();
+```
+
+| Method | Type | Description |
+|--------|------|-------------|
+| `transform` | `(content: string, options?) => Promise<TransformResult>` | Transform text to UI |
+| `transformStream` | `(content: string, options?) => AsyncGenerator` | Streaming transform |
+| `isLoading` | `boolean` | Loading state |
+| `error` | `string \| null` | Error message |
+| `clearError` | `() => void` | Clear error state |
+
+### `<FogUIRenderer>`
+
+Render the transformed UI response.
+
+```tsx
+<FogUIRenderer 
+  response={transformResult.result} 
+  componentRegistry={customComponents}  // Optional
+/>
+```
+
+## Custom Components
+
+Override the default components with your own design system:
+
+```tsx
+import { FogUIRenderer, defaultComponentRegistry } from '@fogui/react';
+import { Card as MyCard, Table as MyTable } from 'your-ui-library';
+
+const customRegistry = {
+  ...defaultComponentRegistry,
+  card: MyCard,
+  table: MyTable,
+};
+
+<FogUIRenderer response={response} componentRegistry={customRegistry} />
+```
+
+## Get Your API Key
+
+1. Visit [fogui.dev/dashboard](https://fogui.dev/dashboard)
+2. Sign up or log in
+3. Create a new API key
+4. Use it in your app
+
+## Why FogUI?
+
+> UI that materializes from nothing - like magic from the fog ✨
+
+- **Your LLM, Your Keys** - We never see your API keys
+- **Any LLM Provider** - Works with OpenAI, Claude, Gemini, etc.
+- **Custom Design Systems** - Plug in your own components
+- **TypeScript First** - Full type safety
+
+## License
+
+MIT

package/dist/components/index.d.mts

@@ -0,0 +1,3 @@
+export { D as DynamicComponent, f as FogUIRenderer, g as defaultComponentRegistry } from '../index-BcLda68r.mjs';
+import 'react/jsx-runtime';
+import 'react';

package/dist/components/index.d.ts

@@ -0,0 +1,3 @@
+export { D as DynamicComponent, f as FogUIRenderer, g as defaultComponentRegistry } from '../index-BcLda68r.js';
+import 'react/jsx-runtime';
+import 'react';

package/dist/components/index.js

@@ -0,0 +1,96 @@
+'use strict';
+
+var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+// src/components/FogUIRenderer.tsx
+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(React__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.FogUIRenderer = FogUIRenderer;
+exports.defaultComponentRegistry = defaultComponentRegistry;
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/components/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/ComponentRegistry.tsx","../../src/components/FogUIRenderer.tsx"],"names":["jsxs","jsx","React"],"mappings":"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","file":"index.js","sourcesContent":["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/components/index.mjs

@@ -0,0 +1,88 @@
+import React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/FogUIRenderer.tsx
+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(React.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, FogUIRenderer, defaultComponentRegistry };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map

package/dist/components/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/ComponentRegistry.tsx","../../src/components/FogUIRenderer.tsx"],"names":["jsx","jsxs"],"mappings":"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","file":"index.mjs","sourcesContent":["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-BcLda68r.d.mts

@@ -0,0 +1,136 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+
+/**
+ * FogUI SDK - Core types and interfaces
+ */
+/**
+ * Configuration for the FogUI SDK
+ */
+interface FogUIConfig {
+    /**
+     * Your FogUI API key (get it from https://fogui.dev/dashboard)
+     */
+    apiKey: string;
+}
+interface TransformOptions {
+    /**
+     * Hints about the user's intent (e.g., "weather_query", "data_analysis")
+     */
+    intent?: string;
+    /**
+     * Preferred component types to use
+     */
+    preferredComponents?: string[];
+    /**
+     * Custom instructions for transformation
+     */
+    instructions?: string;
+}
+interface TransformResult {
+    success: boolean;
+    result?: FogUIResponse;
+    error?: string;
+    usage?: {
+        transformTokens: number;
+        model: string;
+        estimatedCost: number;
+        processingTimeMs: number;
+    };
+}
+interface UseFogUIReturn {
+    /**
+     * Transform raw LLM text into structured UI
+     */
+    transform: (content: string, options?: TransformOptions) => Promise<TransformResult>;
+    /**
+     * Transform with streaming - returns an async generator
+     */
+    transformStream: (content: string, options?: TransformOptions) => AsyncGenerator<StreamEvent>;
+    /**
+     * Whether a transformation is in progress
+     */
+    isLoading: boolean;
+    /**
+     * Current error if any
+     */
+    error: string | null;
+    /**
+     * Clear error state
+     */
+    clearError: () => void;
+}
+interface StreamEvent {
+    type: 'chunk' | 'result' | 'usage' | 'error' | 'done';
+    data: unknown;
+}
+interface ThinkingItem {
+    status: 'active' | 'complete';
+    message: string;
+    timestamp?: string;
+}
+type ContentBlock = TextBlock | ComponentBlock;
+interface TextBlock {
+    type: 'text';
+    value: string;
+}
+interface ComponentBlock {
+    type: 'component';
+    componentType: string;
+    props: Record<string, unknown>;
+}
+interface FogUIResponse {
+    thinking: ThinkingItem[];
+    content: ContentBlock[];
+    metadata?: {
+        timestamp?: string;
+        version?: string;
+        modelUsed?: string;
+        queryType?: string;
+        [key: string]: unknown;
+    };
+}
+
+interface FogUIRendererProps {
+    /**
+     * The FogUIResponse to render
+     */
+    response: FogUIResponse;
+    /**
+     * Custom component registry to override default components
+     */
+    componentRegistry?: Record<string, React.ComponentType<any>>;
+    /**
+     * Custom className for the container
+     */
+    className?: string;
+}
+/**
+ * FogUIRenderer - Renders a FogUIResponse as React components.
+ *
+ * @example
+ * ```tsx
+ * import { FogUIRenderer } from '@fogui/react';
+ *
+ * function Chat({ response }) {
+ *   return <FogUIRenderer response={response} />;
+ * }
+ * ```
+ */
+declare function FogUIRenderer({ response, componentRegistry, className }: FogUIRendererProps): react_jsx_runtime.JSX.Element | null;
+
+/**
+ * Default component registry mapping componentType to React components.
+ * Users can override this with their own components.
+ */
+declare const defaultComponentRegistry: Record<string, React.ComponentType<any>>;
+interface DynamicComponentProps {
+    block: ComponentBlock;
+    registry?: Record<string, React.ComponentType<any>>;
+}
+/**
+ * DynamicComponent - Renders a component based on componentType.
+ */
+declare function DynamicComponent({ block, registry }: DynamicComponentProps): react_jsx_runtime.JSX.Element;
+
+export { type ContentBlock as C, DynamicComponent as D, type FogUIConfig as F, type StreamEvent as S, type TransformOptions as T, type UseFogUIReturn as U, type TransformResult as a, type FogUIResponse as b, type TextBlock as c, type ComponentBlock as d, type ThinkingItem as e, FogUIRenderer as f, defaultComponentRegistry as g };

package/dist/index-BcLda68r.d.ts

@@ -0,0 +1,136 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+
+/**
+ * FogUI SDK - Core types and interfaces
+ */
+/**
+ * Configuration for the FogUI SDK
+ */
+interface FogUIConfig {
+    /**
+     * Your FogUI API key (get it from https://fogui.dev/dashboard)
+     */
+    apiKey: string;
+}
+interface TransformOptions {
+    /**
+     * Hints about the user's intent (e.g., "weather_query", "data_analysis")
+     */
+    intent?: string;
+    /**
+     * Preferred component types to use
+     */
+    preferredComponents?: string[];
+    /**
+     * Custom instructions for transformation
+     */
+    instructions?: string;
+}
+interface TransformResult {
+    success: boolean;
+    result?: FogUIResponse;
+    error?: string;
+    usage?: {
+        transformTokens: number;
+        model: string;
+        estimatedCost: number;
+        processingTimeMs: number;
+    };
+}
+interface UseFogUIReturn {
+    /**
+     * Transform raw LLM text into structured UI
+     */
+    transform: (content: string, options?: TransformOptions) => Promise<TransformResult>;
+    /**
+     * Transform with streaming - returns an async generator
+     */
+    transformStream: (content: string, options?: TransformOptions) => AsyncGenerator<StreamEvent>;
+    /**
+     * Whether a transformation is in progress
+     */
+    isLoading: boolean;
+    /**
+     * Current error if any
+     */
+    error: string | null;
+    /**
+     * Clear error state
+     */
+    clearError: () => void;
+}
+interface StreamEvent {
+    type: 'chunk' | 'result' | 'usage' | 'error' | 'done';
+    data: unknown;
+}
+interface ThinkingItem {
+    status: 'active' | 'complete';
+    message: string;
+    timestamp?: string;
+}
+type ContentBlock = TextBlock | ComponentBlock;
+interface TextBlock {
+    type: 'text';
+    value: string;
+}
+interface ComponentBlock {
+    type: 'component';
+    componentType: string;
+    props: Record<string, unknown>;
+}
+interface FogUIResponse {
+    thinking: ThinkingItem[];
+    content: ContentBlock[];
+    metadata?: {
+        timestamp?: string;
+        version?: string;
+        modelUsed?: string;
+        queryType?: string;
+        [key: string]: unknown;
+    };
+}
+
+interface FogUIRendererProps {
+    /**
+     * The FogUIResponse to render
+     */
+    response: FogUIResponse;
+    /**
+     * Custom component registry to override default components
+     */
+    componentRegistry?: Record<string, React.ComponentType<any>>;
+    /**
+     * Custom className for the container
+     */
+    className?: string;
+}
+/**
+ * FogUIRenderer - Renders a FogUIResponse as React components.
+ *
+ * @example
+ * ```tsx
+ * import { FogUIRenderer } from '@fogui/react';
+ *
+ * function Chat({ response }) {
+ *   return <FogUIRenderer response={response} />;
+ * }
+ * ```
+ */
+declare function FogUIRenderer({ response, componentRegistry, className }: FogUIRendererProps): react_jsx_runtime.JSX.Element | null;
+
+/**
+ * Default component registry mapping componentType to React components.
+ * Users can override this with their own components.
+ */
+declare const defaultComponentRegistry: Record<string, React.ComponentType<any>>;
+interface DynamicComponentProps {
+    block: ComponentBlock;
+    registry?: Record<string, React.ComponentType<any>>;
+}
+/**
+ * DynamicComponent - Renders a component based on componentType.
+ */
+declare function DynamicComponent({ block, registry }: DynamicComponentProps): react_jsx_runtime.JSX.Element;
+
+export { type ContentBlock as C, DynamicComponent as D, type FogUIConfig as F, type StreamEvent as S, type TransformOptions as T, type UseFogUIReturn as U, type TransformResult as a, type FogUIResponse as b, type TextBlock as c, type ComponentBlock as d, type ThinkingItem as e, FogUIRenderer as f, defaultComponentRegistry as g };