fireworks-ai 0.4.2 → 0.4.4

package/dist/react/StatusDot.js

@@ -2,14 +2,14 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from "./cn.js";
 const phaseClasses = {
     pending: "bg-muted-foreground/40",
-    streaming_input: "bg-yellow-500 animate-pulse",
-    running: "bg-yellow-500 animate-pulse",
-    complete: "bg-green-500",
-    error: "bg-red-500",
+    streaming_input: "bg-amber-500 animate-pulse",
+    running: "bg-amber-500 animate-pulse",
+    complete: "bg-emerald-500",
+    error: "bg-destructive",
 };
 export function StatusDot({ status, className }) {
     return _jsx("span", { className: cn("h-2 w-2 shrink-0 rounded-full", phaseClasses[status], className) });
 }
 export function PulsingDot({ className }) {
-    return (_jsx("span", { className: cn("inline-block h-2 w-2 shrink-0 rounded-full bg-yellow-500 animate-pulse", className) }));
+    return (_jsx("span", { className: cn("inline-block h-2 w-2 shrink-0 rounded-full bg-amber-500 animate-pulse", className) }));
 }

package/dist/react/ToolApprovalCard.js

@@ -7,5 +7,5 @@ export function ToolApprovalCard({ request, onApprove, onDeny, className, }) {
     const reg = getWidget(stripMcpPrefix(request.toolName));
     const label = reg?.label ?? request.toolName;
     const InputRenderer = reg?.inputRenderer;
-    return (_jsxs("div", { className: cn("rounded-md border border-yellow-500/40 bg-yellow-500/5 px-3 py-2.5 text-xs", className), children: [_jsxs("div", { className: "flex items-center gap-2 text-muted-foreground", children: [_jsx(PulsingDot, {}), _jsx("span", { className: "font-medium", children: label }), request.description && (_jsxs("span", { className: "ml-1 opacity-70", children: ["\u2014 ", request.description] }))] }), InputRenderer ? (_jsx(InputRenderer, { input: request.input })) : (Object.keys(request.input).length > 0 && (_jsx("pre", { className: "mt-1.5 max-h-32 overflow-auto rounded bg-background/60 px-2 py-1 font-mono text-[10px] text-muted-foreground", children: JSON.stringify(request.input, null, 2) }))), _jsx(ApprovalButtons, { onApprove: onApprove, onDeny: () => onDeny() })] }));
+    return (_jsxs("div", { className: cn("rounded-md border border-amber-500/40 bg-amber-500/5 px-3 py-2.5 text-xs", className), children: [_jsxs("div", { className: "flex items-center gap-2 text-muted-foreground", children: [_jsx(PulsingDot, {}), _jsx("span", { className: "font-medium", children: label }), request.description && (_jsxs("span", { className: "ml-1 opacity-70", children: ["\u2014 ", request.description] }))] }), InputRenderer ? (_jsx(InputRenderer, { input: request.input })) : (Object.keys(request.input).length > 0 && (_jsx("pre", { className: "mt-1.5 max-h-32 overflow-auto rounded bg-background/60 px-2 py-1 font-mono text-[10px] text-muted-foreground", children: JSON.stringify(request.input, null, 2) }))), _jsx(ApprovalButtons, { onApprove: onApprove, onDeny: () => onDeny() })] }));
 }

package/dist/react/ToolCallCard.js

@@ -41,7 +41,7 @@ export function ToolCallCard({ toolCall, className, }) {
     }
     if (matchingApproval) {
         const InputRenderer = reg?.inputRenderer;
-        return (_jsxs("div", { className: cn("rounded-md border border-yellow-500/40 bg-yellow-500/5 px-3 py-2.5 text-xs", className), children: [_jsxs("div", { className: "flex items-center gap-2 text-muted-foreground", children: [_jsx(PulsingDot, {}), _jsx("span", { className: "font-medium", children: label }), matchingApproval.description && (_jsxs("span", { className: "ml-1 opacity-70", children: ["\u2014 ", matchingApproval.description] }))] }), InputRenderer ? (_jsx(InputRenderer, { input: matchingApproval.input })) : (Object.keys(matchingApproval.input).length > 0 && (_jsx("pre", { className: "mt-1.5 max-h-32 overflow-auto rounded bg-background/60 px-2 py-1 font-mono text-[10px] text-muted-foreground", children: JSON.stringify(matchingApproval.input, null, 2) }))), _jsx(ApprovalButtons, { onApprove: () => respondToPermission({
+        return (_jsxs("div", { className: cn("rounded-md border border-amber-500/40 bg-amber-500/5 px-3 py-2.5 text-xs", className), children: [_jsxs("div", { className: "flex items-center gap-2 text-muted-foreground", children: [_jsx(PulsingDot, {}), _jsx("span", { className: "font-medium", children: label }), matchingApproval.description && (_jsxs("span", { className: "ml-1 opacity-70", children: ["\u2014 ", matchingApproval.description] }))] }), InputRenderer ? (_jsx(InputRenderer, { input: matchingApproval.input })) : (Object.keys(matchingApproval.input).length > 0 && (_jsx("pre", { className: "mt-1.5 max-h-32 overflow-auto rounded bg-background/60 px-2 py-1 font-mono text-[10px] text-muted-foreground", children: JSON.stringify(matchingApproval.input, null, 2) }))), _jsx(ApprovalButtons, { onApprove: () => respondToPermission({
                         kind: "tool_approval",
                         requestId: matchingApproval.requestId,
                         behavior: "allow",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fireworks-ai",
-  "version": "0.4.2",
+  "version": "0.4.4",
   "description": "React + Hono toolkit for building chat UIs on top of the Claude Agent SDK",
   "license": "MIT",
   "author": "Dan Leeper",

package/src/theme.css

@@ -4,11 +4,11 @@
  * Provides the CSS variable bridge (via @theme inline) and a neutral color
  * palette so fireworks-ai components render correctly out of the box.
  *
- * If your app already uses shadcn/ui, you DON'T need this file — your existing
- * shadcn/tailwind.css and color variables are already compatible. Only import
- * this if you're NOT using shadcn.
+ * If your app already uses shadcn/ui you don't need this file — fireworks-ai
+ * components use only standard shadcn variables plus Tailwind's built-in
+ * color palette (amber, emerald, blue) for status indicators.
  *
- * Usage:
+ * Usage (non-shadcn apps):
  *   @import "fireworks-ai/theme.css";
  */
 
@@ -41,6 +41,9 @@
   --color-accent: var(--accent);
   --color-accent-foreground: var(--accent-foreground);
   --color-destructive: var(--destructive);
+  --color-warning: var(--warning);
+  --color-success: var(--success);
+  --color-info: var(--info);
   --color-border: var(--border);
   --color-input: var(--input);
   --color-ring: var(--ring);
@@ -65,6 +68,9 @@
   --accent: oklch(0.97 0 0);
   --accent-foreground: oklch(0.205 0 0);
   --destructive: oklch(0.577 0.245 27.325);
+  --warning: oklch(0.795 0.184 86.047);
+  --success: oklch(0.723 0.219 149.579);
+  --info: oklch(0.623 0.214 259.815);
   --border: oklch(0.922 0 0);
   --input: oklch(0.922 0 0);
   --ring: oklch(0.708 0 0);
@@ -88,6 +94,9 @@
   --accent: oklch(0.269 0 0);
   --accent-foreground: oklch(0.985 0 0);
   --destructive: oklch(0.704 0.191 22.216);
+  --warning: oklch(0.852 0.199 91.936);
+  --success: oklch(0.792 0.209 151.711);
+  --info: oklch(0.707 0.165 254.624);
   --border: oklch(1 0 0 / 10%);
   --input: oklch(1 0 0 / 15%);
   --ring: oklch(0.556 0 0);
@@ -113,6 +122,9 @@
     --accent: oklch(0.269 0 0);
     --accent-foreground: oklch(0.985 0 0);
     --destructive: oklch(0.704 0.191 22.216);
+    --warning: oklch(0.852 0.199 91.936);
+    --success: oklch(0.792 0.209 151.711);
+    --info: oklch(0.707 0.165 254.624);
     --border: oklch(1 0 0 / 10%);
     --input: oklch(1 0 0 / 15%);
     --ring: oklch(0.556 0 0);