@nitrostack/widgets 1.0.0

package/dist/utils/media-queries.js

@@ -0,0 +1,41 @@
+/**
+ * Media query utilities for responsive and accessible widget design
+ */
+function matchMediaQuery(query) {
+    if (typeof window === 'undefined' || typeof window.matchMedia !== 'function')
+        return false;
+    return window.matchMedia(query).matches;
+}
+function createMediaQueryFn(query) {
+    return () => matchMediaQuery(query);
+}
+/**
+ * Check if user prefers reduced motion
+ * Use this to disable animations for accessibility
+ *
+ * @example
+ * const shouldAnimate = !prefersReducedMotion();
+ */
+export const prefersReducedMotion = createMediaQueryFn('(prefers-reduced-motion: reduce)');
+/**
+ * Check if device is primarily touch-based
+ *
+ * @example
+ * const isTouchDevice = isPrimarilyTouchDevice();
+ */
+export const isPrimarilyTouchDevice = createMediaQueryFn('(pointer: coarse)');
+/**
+ * Check if hover is available
+ * Use this to conditionally show hover states
+ *
+ * @example
+ * const canHover = isHoverAvailable();
+ */
+export const isHoverAvailable = createMediaQueryFn('(hover: hover)');
+/**
+ * Check if user prefers dark color scheme
+ *
+ * @example
+ * const prefersDark = prefersDarkColorScheme();
+ */
+export const prefersDarkColorScheme = createMediaQueryFn('(prefers-color-scheme: dark)');

package/dist/withToolData.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+/**
+ * Higher-Order Component for Next.js widgets
+ * Automatically handles data fetching from window.openai.toolOutput
+ * Eliminates boilerplate code across all widgets
+ *
+ * Usage:
+ * import { withToolData } from 'nitrostack/widgets';
+ * export default withToolData<YourDataType>(YourComponent);
+ */
+export interface ToolOutputWrapper<T = any> {
+    data: T | null;
+    loading: boolean;
+    error: string | null;
+}
+export declare function withToolData<T = any>(WrappedComponent: React.ComponentType<{
+    data: T;
+}>): () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=withToolData.d.ts.map

package/dist/withToolData.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"withToolData.d.ts","sourceRoot":"","sources":["../src/withToolData.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAEnD;;;;;;;;GAQG;AAEH,MAAM,WAAW,iBAAiB,CAAC,CAAC,GAAG,GAAG;IACxC,IAAI,EAAE,CAAC,GAAG,IAAI,CAAC;IACf,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB;AAED,wBAAgB,YAAY,CAAC,CAAC,GAAG,GAAG,EAClC,gBAAgB,EAAE,KAAK,CAAC,aAAa,CAAC;IAAE,IAAI,EAAE,CAAC,CAAA;CAAE,CAAC,iDAkNnD"}

package/dist/withToolData.js

@@ -0,0 +1,227 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useEffect, useState } from 'react';
+export function withToolData(WrappedComponent) {
+    return function WithToolDataComponent() {
+        const [state, setState] = useState({
+            data: null,
+            loading: true,
+            error: null,
+        });
+        const [mounted, setMounted] = useState(false);
+        useEffect(() => {
+            // Mark as mounted to prevent SSR/hydration issues
+            setMounted(true);
+            // Function to check for data
+            const checkForData = () => {
+                try {
+                    if (typeof window !== 'undefined') {
+                        const openai = window.openai;
+                        if (openai && openai.toolOutput) {
+                            setState({
+                                data: openai.toolOutput,
+                                loading: false,
+                                error: null,
+                            });
+                            return true;
+                        }
+                    }
+                }
+                catch (err) {
+                    setState({
+                        data: null,
+                        loading: false,
+                        error: err instanceof Error ? err.message : 'Unknown error',
+                    });
+                    return true;
+                }
+                return false;
+            };
+            // Check immediately
+            if (checkForData()) {
+                return;
+            }
+            ;
+            // Listen for postMessage (for dev mode)
+            const handleMessage = (event) => {
+                console.log('[Widget] Received postMessage:', event.data);
+                if (event.data && event.data.type === 'toolOutput') {
+                    console.log('[Widget] Setting data:', event.data.data);
+                    setState({
+                        data: event.data.data,
+                        loading: false,
+                        error: null,
+                    });
+                }
+            };
+            window.addEventListener('message', handleMessage);
+            // Fallback: wait longer for postMessage in dev mode
+            const timeout = setTimeout(() => {
+                // Only show error if we still don't have data
+                setState((prevState) => {
+                    // If we already have data, don't override it
+                    if (prevState.data && Object.keys(prevState.data).length > 0) {
+                        return prevState; // Keep existing state
+                    }
+                    if (!checkForData()) {
+                        return {
+                            data: null,
+                            loading: false,
+                            error: 'No data available',
+                        };
+                    }
+                    return prevState;
+                });
+            }, 5000); // Increased to 5 seconds for dev mode
+            return () => {
+                window.removeEventListener('message', handleMessage);
+                clearTimeout(timeout);
+            };
+        }, []);
+        // Don't render anything until mounted (prevents SSR issues)
+        if (!mounted) {
+            return (_jsx("div", { style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    minHeight: '200px',
+                    background: 'linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%)',
+                }, children: _jsx("div", { style: {
+                        width: '12px',
+                        height: '12px',
+                        borderRadius: '50%',
+                        background: '#D4AF37',
+                    } }) }));
+        }
+        if (state.loading) {
+            return (_jsx("div", { style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    minHeight: '200px',
+                    background: 'linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%)',
+                }, children: _jsxs("div", { style: {
+                        display: 'flex',
+                        gap: '8px',
+                    }, children: [_jsx("div", { style: {
+                                width: '12px',
+                                height: '12px',
+                                borderRadius: '50%',
+                                background: '#D4AF37',
+                                animation: 'pulse 1.4s ease-in-out infinite',
+                            } }), _jsx("div", { style: {
+                                width: '12px',
+                                height: '12px',
+                                borderRadius: '50%',
+                                background: '#D4AF37',
+                                animation: 'pulse 1.4s ease-in-out 0.2s infinite',
+                            } }), _jsx("div", { style: {
+                                width: '12px',
+                                height: '12px',
+                                borderRadius: '50%',
+                                background: '#D4AF37',
+                                animation: 'pulse 1.4s ease-in-out 0.4s infinite',
+                            } })] }) }));
+        }
+        if (state.error || !state.data) {
+            return (_jsxs("div", { style: {
+                    padding: '40px 20px',
+                    textAlign: 'center',
+                    background: 'linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%)',
+                    minHeight: '200px',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                }, children: [_jsx("div", { style: {
+                            fontSize: '48px',
+                            marginBottom: '16px',
+                        }, children: "\u26A0\uFE0F" }), _jsx("div", { style: {
+                            color: '#666',
+                            fontSize: '16px',
+                            fontWeight: '500',
+                        }, children: state.error || 'No data available' })] }));
+        }
+        // Extra safety: validate data is an object with properties
+        // This prevents rendering if data is an empty object or invalid
+        if (typeof state.data !== 'object' || Object.keys(state.data).length === 0) {
+            return (_jsxs("div", { style: {
+                    padding: '40px 20px',
+                    textAlign: 'center',
+                    background: 'linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%)',
+                    minHeight: '200px',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                }, children: [_jsx("div", { style: {
+                            fontSize: '48px',
+                            marginBottom: '16px',
+                        }, children: "\u23F3" }), _jsx("div", { style: {
+                            color: '#666',
+                            fontSize: '16px',
+                            fontWeight: '500',
+                        }, children: "Waiting for data..." })] }));
+        }
+        // Wrap component rendering in React Error Boundary to catch any rendering errors
+        // We use a class component error boundary because try-catch doesn't work with React rendering
+        return (_jsx(ErrorBoundary, { children: _jsx(WrappedComponent, { data: state.data }) }));
+    };
+}
+/**
+ * Error Boundary Component to catch widget rendering errors
+ */
+class ErrorBoundary extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = { hasError: false, error: null };
+    }
+    static getDerivedStateFromError(error) {
+        return { hasError: true, error };
+    }
+    componentDidCatch(error, errorInfo) {
+        console.error('Widget rendering error:', error, errorInfo);
+    }
+    render() {
+        if (this.state.hasError) {
+            return (_jsxs("div", { style: {
+                    padding: '40px 20px',
+                    textAlign: 'center',
+                    background: 'linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%)',
+                    minHeight: '200px',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                }, children: [_jsx("div", { style: {
+                            fontSize: '48px',
+                            marginBottom: '16px',
+                        }, children: "\u274C" }), _jsx("div", { style: {
+                            color: '#666',
+                            fontSize: '16px',
+                            fontWeight: '500',
+                            marginBottom: '8px',
+                        }, children: "Widget Error" }), _jsx("div", { style: {
+                            color: '#999',
+                            fontSize: '12px',
+                            fontFamily: 'monospace',
+                            maxWidth: '400px',
+                            wordBreak: 'break-word',
+                        }, children: this.state.error?.message || 'Unknown error' })] }));
+        }
+        return this.props.children;
+    }
+}
+/**
+ * Global styles to be injected
+ */
+if (typeof document !== 'undefined') {
+    const style = document.createElement('style');
+    style.textContent = `
+    @keyframes pulse {
+      0%, 100% { opacity: 0.3; transform: scale(1); }
+      50% { opacity: 1; transform: scale(1.2); }
+    }
+  `;
+    document.head.appendChild(style);
+}

package/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "@nitrostack/widgets",
+  "version": "1.0.0",
+  "description": "Widget utilities for NitroStack - Build interactive UI widgets for MCP tools",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist/",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc --watch",
+    "test": "NODE_OPTIONS=--experimental-vm-modules jest",
+    "test:coverage": "NODE_OPTIONS=--experimental-vm-modules jest --coverage",
+    "test:watch": "NODE_OPTIONS=--experimental-vm-modules jest --watch",
+    "prepublishOnly": "npm run build && npm run test"
+  },
+  "keywords": [
+    "nitrostack",
+    "widgets",
+    "mcp",
+    "react",
+    "openai",
+    "chatgpt",
+    "ui"
+  ],
+  "author": "Abhishek Pandit <abhishekpanditofficial@gmail.com>",
+  "license": "Apache-2.0",
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.1",
+    "@types/jest": "^29.5.14",
+    "@types/node": "^22.10.5",
+    "@types/react": "^19.2.2",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
+    "ts-jest": "^29.2.5",
+    "typescript": "^5.7.2"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/abhishekpanditofficial/nitrostack.git",
+    "directory": "typescript/packages/widgets"
+  },
+  "bugs": {
+    "url": "https://github.com/abhishekpanditofficial/nitrostack/issues"
+  },
+  "homepage": "https://nitrostack.vercel.app"
+}
+