@faskai/ui-commons 0.0.0-alpha.3 → 0.0.0-alpha.30

package/README.md

@@ -1,20 +1,92 @@
 # Fask UI Commons
 
-A minimal package containing common UI components and utilities shared between Fask applications:
+A collection of reusable React components and data exports for Fask applications.
 
-* @/fask-web-app-v2 (B2C) is hosted at fask.ai
-* @/fask-biz-landing (B2B landing) is at fask.ai/business
-* @/powpal-web-app (B2B dashboard) is at biz.fask.ai
+## Data Exports
 
-## Installation
+### Beta Marketing Content
 
-```bash
-yarn add @faskai/ui-commons@0.0.0-alpha.01
+Centralized marketing content for Beta features and offers that can be used across different projects with client-specific styling.
+
+#### betaMarketingFeatures
+
+Array of feature objects with emoji, title, and description:
+
+```tsx
+import { betaMarketingFeatures } from '@faskai/ui-commons';
+
+// Each feature contains:
+// { emoji: string, title: string, description: string }
+```
+
+**Features included:**
+- ⚡ **Fastest Voice** - Industry-leading response times
+- 🧠 **Self-Learning** - Fine-tune with your data
+- 👆 **Easiest Setup** - 1-click deployment worldwide
+- 🌍 **Any Language** - Human-sounding in 100+ languages
+- 🎥 **Truly Multi-Modal** - Voice, Video, and Text channels
+- 📈 **Massively Scalable** - Unlimited concurrent calls and agents
+
+#### betaOfferData
+
+Beta launch offer content with structured data:
+
+```tsx
+import { betaOfferData } from '@faskai/ui-commons';
+
+// Contains:
+// - badge: "LIMITED TIME"
+// - title: "🚀 Beta Launch Special"
+// - description: string
+// - callouts: Array<{emoji, title, description}>
+// - cta: {text, url}
+// - disclaimer: string
 ```
 
-## Usage
+**Callouts included:**
+- 💰 **50% OFF First Year** - Exclusive Beta pricing
+- 🤝 **Priority Support** - Direct access to founders
 
-### GTM Provider
+#### Usage Example
+
+```tsx
+import { betaMarketingFeatures, betaOfferData } from '@faskai/ui-commons';
+
+function BetaFeatures() {
+  return (
+    <section>
+      {/* Features */}
+      {betaMarketingFeatures.map((feature) => (
+        <div key={feature.title}>
+          <span>{feature.emoji}</span>
+          <h3>{feature.title}</h3>
+          <p>{feature.description}</p>
+        </div>
+      ))}
+      
+      {/* Beta Offer */}
+      <div>
+        <h2>{betaOfferData.title}</h2>
+        <p>{betaOfferData.description}</p>
+        {betaOfferData.callouts.map((callout) => (
+          <div key={callout.title}>
+            <span>{callout.emoji}</span>
+            <h4>{callout.title}</h4>
+            <p>{callout.description}</p>
+          </div>
+        ))}
+        <a href={betaOfferData.cta.url}>{betaOfferData.cta.text}</a>
+      </div>
+    </section>
+  );
+}
+```
+
+## Components
+
+### GTMProvider
+
+Google Tag Manager integration for tracking and analytics.
 
 ```tsx
 import { GTMProvider } from '@faskai/ui-commons';
@@ -28,7 +100,24 @@ function App() {
 }
 ```
 
-### Tracking Events
+## Installation
+
+```bash
+npm install @faskai/ui-commons
+# or
+yarn add @faskai/ui-commons
+```
+
+## Dependencies
+
+- React 18+
+- No styling dependencies (bring your own CSS framework)
+
+## License
+
+Private - Fask AI
+
+## Tracking Events
 
 ```tsx
 import { trackEvent, trackConversion, trackLinkedInConversion } from '@faskai/ui-commons';
@@ -64,16 +153,27 @@ yarn build
 yarn publish
 ```
 
-## Adding New Components
+## Design Philosophy
+
+This package follows a **data-driven approach**:
+
+- **Content centralization**: Marketing copy and data managed in one place
+- **Styling flexibility**: Each project implements its own design system
+- **Type safety**: Full TypeScript support for all exports
+- **Zero styling opinions**: No CSS dependencies or styling conflicts
+
+## Adding New Data
 
-1. Create your component in `src/components/`
+1. Create your data export in `src/data/`
 2. Export it from `src/index.ts`
 3. Build the package with `yarn build`
-4. The component will be available in all consuming projects
+4. Import and use in your client projects with custom styling
 
-## Current Components
+## Current Exports
 
 - **GTMProvider**: Google Tag Manager integration
+- **betaMarketingFeatures**: Beta feature content array
+- **betaOfferData**: Beta offer structured data
 - **trackEvent**: Custom event tracking
 - **trackConversion**: Google Ads conversion tracking
 - **trackLinkedInConversion**: LinkedIn Ads conversion tracking

package/dist/components/connections/app-icon.d.ts

@@ -0,0 +1,8 @@
+interface AppIconProps {
+    src?: string;
+    icon?: string;
+    alt?: string;
+    className?: string;
+}
+export declare function AppIcon({ src, icon, alt, className }: AppIconProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/connections/app-icon.js

@@ -0,0 +1,21 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Blocks, Landmark, Building2, CreditCard, ShoppingCart, Calendar, Mail, MessageSquare, } from 'lucide-react';
+import { cn } from '../../lib/utils';
+const iconMap = {
+    landmark: Landmark,
+    building2: Building2,
+    'credit-card': CreditCard,
+    'shopping-cart': ShoppingCart,
+    calendar: Calendar,
+    mail: Mail,
+    'message-square': MessageSquare,
+};
+const FallbackIcon = Blocks;
+export function AppIcon({ src, icon, alt, className }) {
+    if (src) {
+        return _jsx("img", { src: src, alt: alt, className: cn('rounded', className) });
+    }
+    const Icon = (icon && iconMap[icon]) || FallbackIcon;
+    return _jsx(Icon, { className: cn('text-muted-foreground', className) });
+}

package/dist/components/connections/app-search-grid.d.ts

@@ -0,0 +1,10 @@
+import type { FaskSearchableApp } from '../../types/connections';
+interface AppSearchGridProps {
+    connectedAppKeys: string[];
+    onSearch: (query: string) => Promise<FaskSearchableApp[]>;
+    onConnect: (app: FaskSearchableApp) => void;
+    connecting?: string | null;
+    initialApps?: FaskSearchableApp[];
+}
+export declare function AppSearchGrid({ connectedAppKeys, onSearch, onConnect, connecting, initialApps, }: AppSearchGridProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/connections/app-search-grid.js

@@ -0,0 +1,35 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { Loader2 } from 'lucide-react';
+import { AppIcon } from './app-icon';
+import { Badge } from '../ui/badge';
+import { Button } from '../ui/button';
+export function AppSearchGrid({ connectedAppKeys, onSearch, onConnect, connecting, initialApps, }) {
+    const [query, setQuery] = useState('');
+    const [apps, setApps] = useState(initialApps || []);
+    const [searching, setSearching] = useState(false);
+    const debounceRef = useRef(null);
+    useEffect(() => {
+        if (debounceRef.current)
+            clearTimeout(debounceRef.current);
+        debounceRef.current = setTimeout(async () => {
+            if (!query.trim()) {
+                setApps(initialApps || []);
+                return;
+            }
+            setSearching(true);
+            const results = await onSearch(query);
+            setApps(results);
+            setSearching(false);
+        }, 300);
+        return () => {
+            if (debounceRef.current)
+                clearTimeout(debounceRef.current);
+        };
+    }, [query, onSearch, initialApps]);
+    function isConnected(slug) {
+        return connectedAppKeys.includes(slug);
+    }
+    return (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { children: [_jsx("h3", { className: "text-sm font-medium", children: "Connect Apps" }), _jsx("p", { className: "text-muted-foreground text-xs", children: "Search and connect apps for your agent." })] }), _jsx("input", { className: "border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-9 w-full rounded-md border px-3 py-1 text-sm shadow-sm transition-colors focus-visible:ring-1 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50", placeholder: "Search apps (e.g. Slack, Google Sheets, HubSpot)...", value: query, onChange: (e) => setQuery(e.target.value) }), searching && (_jsxs("div", { className: "flex items-center gap-2 py-4", children: [_jsx(Loader2, { className: "size-4 animate-spin" }), _jsx("span", { className: "text-muted-foreground text-sm", children: "Searching..." })] })), apps.length > 0 && (_jsx("div", { className: "grid gap-2 sm:grid-cols-2 lg:grid-cols-3", children: apps.map((app) => (_jsxs("div", { className: "flex items-center gap-3 rounded-lg border p-3", children: [_jsx(AppIcon, { src: app.img_src, alt: app.name, className: "size-8" }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("p", { className: "truncate text-sm font-medium", children: app.name }), isConnected(app.name_slug) && (_jsx("span", { className: "text-muted-foreground text-xs", children: "Connected" }))] }), isConnected(app.name_slug) ? (_jsx(Badge, { children: "Connected" })) : (_jsxs(Button, { variant: "outline", size: "sm", onClick: () => onConnect(app), disabled: connecting === app.name_slug, children: [connecting === app.name_slug && (_jsx(Loader2, { className: "animate-spin" })), "Connect"] }))] }, app.name_slug))) }))] }));
+}

package/dist/components/connections/available-apps-list.d.ts

@@ -0,0 +1,8 @@
+import type { FaskConnection } from '../../types/connections';
+interface AvailableAppsListProps {
+    connections: FaskConnection[];
+    onConnect: (connection: FaskConnection) => void;
+    connecting?: string | null;
+}
+export declare function AvailableAppsList({ connections, onConnect, connecting, }: AvailableAppsListProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/connections/available-apps-list.js

@@ -0,0 +1,15 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Link, Loader2 } from 'lucide-react';
+import { AppIcon } from './app-icon';
+import { Card, CardHeader, CardFooter } from '../ui/card';
+import { Button } from '../ui/button';
+export function AvailableAppsList({ connections, onConnect, connecting, }) {
+    const available = connections.filter((c) => c.status !== 'connected');
+    if (available.length === 0)
+        return null;
+    return (_jsx("div", { className: "grid gap-4 sm:grid-cols-2 lg:grid-cols-3", children: available.map((conn) => {
+            const isConnecting = connecting === conn.appKey;
+            return (_jsxs(Card, { className: "gap-4 py-4", children: [_jsxs(CardHeader, { className: "flex-row items-center gap-3", children: [_jsx("div", { className: "bg-background flex size-12 shrink-0 items-center justify-center rounded-lg border p-2", children: _jsx(AppIcon, { src: conn.app?.img, icon: conn.app?.icon, alt: conn.app?.name, className: "size-full object-contain" }) }), _jsx("p", { className: "min-w-0 flex-1 truncate text-base font-semibold", children: conn.app?.name })] }), _jsx(CardFooter, { children: _jsxs(Button, { className: "w-full", onClick: () => onConnect(conn), disabled: isConnecting, children: [isConnecting ? (_jsx(Loader2, { className: "animate-spin" })) : (_jsx(Link, {})), isConnecting ? 'Connecting...' : 'Connect'] }) })] }, conn.id || conn.appKey));
+        }) }));
+}

package/dist/components/connections/connected-apps-list.d.ts

@@ -0,0 +1,11 @@
+import type { FaskConnection } from '../../types/connections';
+interface ConnectedAppsListProps {
+    connections: FaskConnection[];
+    variant: 'cards' | 'badges';
+    onReimport?: (connection: FaskConnection) => void;
+    onDisconnect?: (connection: FaskConnection) => void;
+    reimporting?: string | null;
+    disconnecting?: string | null;
+}
+export declare function ConnectedAppsList({ connections, variant, onReimport, onDisconnect, reimporting, disconnecting, }: ConnectedAppsListProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/connections/connected-apps-list.js

@@ -0,0 +1,21 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Check, Loader2, RefreshCw, Unlink } from 'lucide-react';
+import { AppIcon } from './app-icon';
+import { Card, CardHeader, CardFooter, CardAction } from '../ui/card';
+import { Badge } from '../ui/badge';
+import { Button } from '../ui/button';
+export function ConnectedAppsList({ connections, variant, onReimport, onDisconnect, reimporting, disconnecting, }) {
+    const connected = connections.filter((c) => c.status === 'connected');
+    if (connected.length === 0)
+        return null;
+    if (variant === 'badges') {
+        return (_jsx("div", { className: "flex flex-wrap gap-2", children: connected.map((conn) => (_jsxs(Badge, { children: [_jsx(AppIcon, { src: conn.app?.img, icon: conn.app?.icon, alt: conn.app?.name, className: "size-4" }), conn.app?.name] }, conn.appKey))) }));
+    }
+    // cards variant
+    return (_jsx("div", { className: "grid gap-4 sm:grid-cols-2 lg:grid-cols-3", children: connected.map((conn) => {
+            const isReimporting = reimporting === (conn.providerConnectionId || conn.appKey);
+            const isDisconnecting = disconnecting === (conn.id || conn.appKey);
+            return (_jsxs(Card, { className: "gap-4 py-4", children: [_jsxs(CardHeader, { className: "flex-row items-center gap-3", children: [_jsx("div", { className: "bg-background flex size-12 shrink-0 items-center justify-center rounded-lg border p-2", children: _jsx(AppIcon, { src: conn.app?.img, icon: conn.app?.icon, alt: conn.app?.name, className: "size-full object-contain" }) }), _jsx("p", { className: "min-w-0 flex-1 truncate text-base font-semibold", children: conn.app?.name }), _jsx(CardAction, { children: _jsxs(Badge, { variant: "outline", children: [_jsx(Check, { className: "size-3" }), "Connected"] }) })] }), _jsxs(CardFooter, { className: "gap-2", children: [onReimport && (_jsxs(Button, { variant: "outline", size: "sm", onClick: () => onReimport(conn), disabled: isReimporting, children: [isReimporting ? (_jsx(Loader2, { className: "animate-spin" })) : (_jsx(RefreshCw, {})), isReimporting ? 'Reimporting...' : 'Reimport'] })), onDisconnect && (_jsxs(Button, { variant: "outline", size: "sm", className: "text-destructive hover:text-destructive", onClick: () => onDisconnect(conn), disabled: isDisconnecting, children: [isDisconnecting ? (_jsx(Loader2, { className: "animate-spin" })) : (_jsx(Unlink, {})), isDisconnecting ? 'Disconnecting...' : 'Disconnect'] }))] })] }, conn.id || conn.appKey));
+        }) }));
+}

package/dist/components/connections/connections-api-provider.d.ts

@@ -0,0 +1,9 @@
+import { type ReactNode } from 'react';
+import type { ConnectionsApi } from '../../types/connections-api';
+export declare function useConnectionsApi(): ConnectionsApi;
+interface ConnectionsApiProviderProps {
+    api: ConnectionsApi;
+    children: ReactNode;
+}
+export declare function ConnectionsApiProvider({ api, children, }: ConnectionsApiProviderProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/connections/connections-api-provider.js

@@ -0,0 +1,14 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from 'react';
+const ConnectionsApiContext = createContext(null);
+export function useConnectionsApi() {
+    const api = useContext(ConnectionsApiContext);
+    if (!api) {
+        throw new Error('useConnectionsApi must be used within a ConnectionsApiProvider');
+    }
+    return api;
+}
+export function ConnectionsApiProvider({ api, children, }) {
+    return (_jsx(ConnectionsApiContext.Provider, { value: api, children: children }));
+}

package/dist/components/connections/connections-panel.d.ts

@@ -0,0 +1,7 @@
+import type { FaskConnection } from '../../types/connections';
+interface ConnectionsPanelProps {
+    variant: 'full-page' | 'compact';
+    onConnectionsLoaded?: (connections: FaskConnection[]) => void;
+}
+export declare function ConnectionsPanel({ variant, onConnectionsLoaded, }: ConnectionsPanelProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/connections/connections-panel.js

@@ -0,0 +1,97 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useState } from 'react';
+import { createFrontendClient } from '@pipedream/sdk/browser';
+import { useConnectionsApi } from './connections-api-provider';
+import { launchNangoConnect } from './launch-nango-connect';
+import { ConnectedAppsList } from './connected-apps-list';
+import { AvailableAppsList } from './available-apps-list';
+import { AppSearchGrid } from './app-search-grid';
+import { Card } from '../ui/card';
+export function ConnectionsPanel({ variant, onConnectionsLoaded, }) {
+    const api = useConnectionsApi();
+    const [connections, setConnections] = useState([]);
+    const [initialApps, setInitialApps] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [connecting, setConnecting] = useState(null);
+    const [disconnecting, setDisconnecting] = useState(null);
+    const loadData = useCallback(async () => {
+        const conns = await api.getConnections();
+        setConnections(conns);
+        onConnectionsLoaded?.(conns);
+    }, [api, onConnectionsLoaded]);
+    useEffect(() => {
+        async function init() {
+            setLoading(true);
+            const [, apps] = await Promise.all([
+                loadData(),
+                api.searchApps(''),
+            ]);
+            setInitialApps(apps);
+            setLoading(false);
+        }
+        init();
+    }, [loadData, api]);
+    const connectedAppKeys = connections
+        .filter((c) => c.status === 'connected')
+        .map((c) => c.appKey);
+    async function handleConnect(app) {
+        const appKey = 'appKey' in app ? app.appKey : app.name_slug;
+        setConnecting(appKey);
+        try {
+            const info = await api.connect(appKey);
+            switch (info.provider) {
+                case 'pipedream': {
+                    const pd = createFrontendClient({
+                        externalUserId: 'user',
+                        tokenCallback: async () => ({
+                            token: info.token,
+                            expiresAt: new Date(info.expiresAt),
+                            connectLinkUrl: '',
+                        }),
+                    });
+                    await new Promise((resolve, reject) => {
+                        pd.connectAccount({
+                            app: appKey,
+                            onSuccess: () => resolve(),
+                            onError: (err) => reject(err),
+                        });
+                    });
+                    break;
+                }
+                case 'nango': {
+                    await launchNangoConnect(info.connectLink, appKey, api);
+                    break;
+                }
+                default: {
+                    // Exhaustiveness check — TypeScript will error if a new ConnectInfo
+                    // variant is added without a matching branch here.
+                    const _exhaustive = info;
+                    throw new Error(`Unknown connect provider: ${JSON.stringify(_exhaustive)}`);
+                }
+            }
+            await loadData();
+        }
+        finally {
+            setConnecting(null);
+        }
+    }
+    async function handleDisconnect(conn) {
+        const key = conn.id || conn.appKey;
+        setDisconnecting(key);
+        try {
+            await api.disconnect(conn.id);
+            await loadData();
+        }
+        finally {
+            setDisconnecting(null);
+        }
+    }
+    if (loading) {
+        return (_jsx("div", { className: "grid gap-4 sm:grid-cols-2 lg:grid-cols-3", children: [1, 2, 3].map((i) => (_jsx(Card, { className: "h-28 animate-pulse bg-muted/50" }, i))) }));
+    }
+    if (variant === 'compact') {
+        return (_jsxs("div", { className: "space-y-6", children: [_jsx(ConnectedAppsList, { connections: connections, variant: "badges", onDisconnect: handleDisconnect, disconnecting: disconnecting }), _jsx(AppSearchGrid, { connectedAppKeys: connectedAppKeys, onSearch: (q) => api.searchApps(q), onConnect: (app) => handleConnect(app), connecting: connecting, initialApps: initialApps })] }));
+    }
+    return (_jsxs("div", { className: "space-y-6", children: [_jsx(ConnectedAppsList, { connections: connections, variant: "cards", onDisconnect: handleDisconnect, disconnecting: disconnecting }), _jsx(AvailableAppsList, { connections: connections, onConnect: handleConnect, connecting: connecting }), _jsx(AppSearchGrid, { connectedAppKeys: connectedAppKeys, onSearch: (q) => api.searchApps(q), onConnect: (app) => handleConnect(app), connecting: connecting, initialApps: initialApps })] }));
+}

package/dist/components/connections/launch-nango-connect.d.ts

@@ -0,0 +1,13 @@
+import type { ConnectionsApi } from '../../types/connections-api';
+/**
+ * Open a Nango Connect popup and resolve when the connection appears in the
+ * backend (Nango calls our server-side webhook independently — polling is
+ * just how the UI discovers that). Rejects if the popup is closed before a
+ * connection is established or if the overall flow exceeds the timeout.
+ *
+ * We intentionally do not rely on Nango's `postMessage` events: those are
+ * not delivered when popup blockers interfere or when the auth flow ends on
+ * a different origin. Polling the connections list is browser-agnostic and
+ * works regardless of whether the popup ever posts back.
+ */
+export declare function launchNangoConnect(connectLink: string, appKey: string, api: ConnectionsApi): Promise<void>;

package/dist/components/connections/launch-nango-connect.js

@@ -0,0 +1,63 @@
+const POPUP_FEATURES = 'width=600,height=700,popup=yes';
+const POLL_INTERVAL_MS = 1500;
+const POLL_TIMEOUT_MS = 5 * 60 * 1000;
+/**
+ * Open a Nango Connect popup and resolve when the connection appears in the
+ * backend (Nango calls our server-side webhook independently — polling is
+ * just how the UI discovers that). Rejects if the popup is closed before a
+ * connection is established or if the overall flow exceeds the timeout.
+ *
+ * We intentionally do not rely on Nango's `postMessage` events: those are
+ * not delivered when popup blockers interfere or when the auth flow ends on
+ * a different origin. Polling the connections list is browser-agnostic and
+ * works regardless of whether the popup ever posts back.
+ */
+export async function launchNangoConnect(connectLink, appKey, api) {
+    const popup = window.open(connectLink, 'fask-connect', POPUP_FEATURES);
+    if (!popup) {
+        throw new Error('Connect popup was blocked by the browser. Allow popups for this site and try again.');
+    }
+    const startedAt = Date.now();
+    return new Promise((resolve, reject) => {
+        const finish = (action) => {
+            clearInterval(intervalId);
+            if (!popup.closed)
+                popup.close();
+            action();
+        };
+        const intervalId = window.setInterval(async () => {
+            if (Date.now() - startedAt > POLL_TIMEOUT_MS) {
+                finish(() => reject(new Error('Connect flow timed out after 5 minutes.')));
+                return;
+            }
+            try {
+                const conns = await api.getConnections();
+                const found = conns.find((c) => c.appKey === appKey && c.status === 'connected');
+                if (found) {
+                    finish(() => resolve());
+                    return;
+                }
+            }
+            catch {
+                // Transient fetch error — keep polling. A persistent failure will
+                // hit the timeout above.
+            }
+            if (popup.closed) {
+                // Popup closed without the connection appearing — treat as cancel.
+                // Run one more check first in case the connection landed between
+                // the last poll and the close.
+                try {
+                    const conns = await api.getConnections();
+                    if (conns.find((c) => c.appKey === appKey && c.status === 'connected')) {
+                        finish(() => resolve());
+                        return;
+                    }
+                }
+                catch {
+                    // Ignore — fall through to cancel.
+                }
+                finish(() => reject(new Error('Connect window was closed before authorization completed.')));
+            }
+        }, POLL_INTERVAL_MS);
+    });
+}

package/dist/components/gtm/gtm-provider.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+interface GTMProviderProps {
+    gtmId: string;
+    children: ReactNode;
+}
+export declare function GTMProvider({ gtmId, children }: GTMProviderProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/gtm/gtm-provider.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import Script from 'next/script';
+export function GTMProvider({ gtmId, children }) {
+    return (_jsxs(_Fragment, { children: [_jsx(Script, { id: "gtm-head", strategy: "afterInteractive", children: `
+          (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+          new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+          j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+          'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+          })(window,document,'script','dataLayer','${gtmId}');
+        ` }), _jsx("noscript", { children: _jsx("iframe", { src: `https://www.googletagmanager.com/ns.html?id=${gtmId}`, height: "0", width: "0", style: { display: 'none', visibility: 'hidden' } }) }), children] }));
+}

package/dist/components/layout/grid.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+declare const GRID_STYLES: {
+    readonly 2: "grid-cols-1 gap-4 sm:grid-cols-2";
+    readonly 3: "grid-cols-1 gap-3 sm:grid-cols-2 sm:gap-6 lg:grid-cols-3";
+    readonly 4: "grid-cols-1 gap-3 sm:grid-cols-2 sm:gap-6 lg:grid-cols-3 xl:grid-cols-4";
+};
+declare function Grid({ columns, className, ...props }: React.ComponentProps<'div'> & {
+    columns: keyof typeof GRID_STYLES;
+}): import("react/jsx-runtime").JSX.Element;
+export { Grid };

package/dist/components/layout/grid.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../../lib/utils';
+const GRID_STYLES = {
+    2: 'grid-cols-1 gap-4 sm:grid-cols-2',
+    3: 'grid-cols-1 gap-3 sm:grid-cols-2 sm:gap-6 lg:grid-cols-3',
+    4: 'grid-cols-1 gap-3 sm:grid-cols-2 sm:gap-6 lg:grid-cols-3 xl:grid-cols-4',
+};
+function Grid({ columns, className, ...props }) {
+    return (_jsx("div", { "data-slot": "grid", className: cn('grid', GRID_STYLES[columns], className), ...props }));
+}
+export { Grid };

package/dist/components/layout/row.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+declare function Row({ gap, fill, wrap, className, ...props }: React.ComponentProps<'div'> & {
+    gap?: 0 | 1 | 1.5 | 2 | 3 | 4 | 6 | 8;
+    fill?: boolean;
+    wrap?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export { Row };

package/dist/components/layout/row.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../../lib/utils';
+const GAP_MAP = {
+    0: 'gap-0',
+    1: 'gap-1',
+    1.5: 'gap-1.5',
+    2: 'gap-2',
+    3: 'gap-3',
+    4: 'gap-4',
+    6: 'gap-6',
+    8: 'gap-8',
+};
+function Row({ gap = 2, fill = false, wrap = false, className, ...props }) {
+    return (_jsx("div", { "data-slot": "row", className: cn('flex flex-row min-w-0 overflow-hidden items-center', GAP_MAP[gap], fill && 'flex-1', wrap && 'flex-wrap', className), ...props }));
+}
+export { Row };

package/dist/components/layout/split-view.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+declare function SplitView({ desktop, mobile, className, ...props }: Omit<React.ComponentProps<'div'>, 'children'> & {
+    desktop: React.ReactNode;
+    mobile: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export { SplitView };

package/dist/components/layout/split-view.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../lib/utils';
+function SplitView({ desktop, mobile, className, ...props }) {
+    return (_jsxs("div", { "data-slot": "split-view", className: cn('flex min-h-0 flex-1 flex-col', className), ...props, children: [_jsx("div", { className: "hidden min-h-0 min-w-0 flex-1 overflow-hidden lg:flex", children: desktop }), _jsx("div", { className: "flex min-h-0 flex-1 flex-col lg:hidden", children: mobile })] }));
+}
+export { SplitView };

package/dist/components/layout/stack.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+declare function Stack({ gap, fill, className, ...props }: React.ComponentProps<'div'> & {
+    gap?: 0 | 1 | 1.5 | 2 | 3 | 4 | 6 | 8;
+    fill?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export { Stack };

package/dist/components/layout/stack.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../../lib/utils';
+const GAP_MAP = {
+    0: 'gap-0',
+    1: 'gap-1',
+    1.5: 'gap-1.5',
+    2: 'gap-2',
+    3: 'gap-3',
+    4: 'gap-4',
+    6: 'gap-6',
+    8: 'gap-8',
+};
+function Stack({ gap = 4, fill = false, className, ...props }) {
+    return (_jsx("div", { "data-slot": "stack", className: cn('flex flex-col min-h-0 overflow-hidden', GAP_MAP[gap], fill && 'flex-1', className), ...props }));
+}
+export { Stack };

package/dist/components/ui/badge.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+declare const badgeVariants: (props?: ({
+    variant?: "default" | "secondary" | "destructive" | "outline" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function Badge({ className, variant, asChild, ...props }: React.ComponentProps<'span'> & VariantProps<typeof badgeVariants> & {
+    asChild?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export { Badge, badgeVariants };

package/dist/components/ui/badge.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import { cn } from '../../lib/utils';
+const badgeVariants = cva('inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden', {
+    variants: {
+        variant: {
+            default: 'border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90',
+            secondary: 'border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90',
+            destructive: 'border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+            outline: 'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
+        },
+    },
+    defaultVariants: {
+        variant: 'default',
+    },
+});
+function Badge({ className, variant, asChild = false, ...props }) {
+    const Comp = asChild ? Slot : 'span';
+    return (_jsx(Comp, { "data-slot": "badge", className: cn(badgeVariants({ variant }), className), ...props }));
+}
+export { Badge, badgeVariants };

package/dist/components/ui/button.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+declare const buttonVariants: (props?: ({
+    variant?: "link" | "default" | "secondary" | "destructive" | "outline" | "ghost" | null | undefined;
+    size?: "icon" | "default" | "sm" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function Button({ className, variant, size, asChild, ...props }: React.ComponentProps<'button'> & VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export { Button, buttonVariants };

package/dist/components/ui/button.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import { cn } from '../../lib/utils';
+const buttonVariants = cva("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", {
+    variants: {
+        variant: {
+            default: 'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
+            destructive: 'bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+            outline: 'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
+            secondary: 'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
+            ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
+            link: 'text-primary underline-offset-4 hover:underline',
+        },
+        size: {
+            default: 'h-9 px-4 py-2 has-[>svg]:px-3',
+            sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
+            lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
+            icon: 'size-9',
+        },
+    },
+    defaultVariants: {
+        variant: 'default',
+        size: 'default',
+    },
+});
+function Button({ className, variant, size, asChild = false, ...props }) {
+    const Comp = asChild ? Slot : 'button';
+    return (_jsx(Comp, { "data-slot": "button", className: cn(buttonVariants({ variant, size, className })), ...props }));
+}
+export { Button, buttonVariants };

package/dist/components/ui/card.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+declare function Card({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare function CardHeader({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare function CardTitle({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare function CardDescription({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare function CardAction({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare function CardContent({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare function CardFooter({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent, };

package/dist/components/ui/card.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../../lib/utils';
+function Card({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "card", className: cn('bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm', className), ...props }));
+}
+function CardHeader({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "card-header", className: cn('@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6', className), ...props }));
+}
+function CardTitle({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "card-title", className: cn('leading-none font-semibold', className), ...props }));
+}
+function CardDescription({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "card-description", className: cn('text-muted-foreground text-sm', className), ...props }));
+}
+function CardAction({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "card-action", className: cn('col-start-2 row-span-2 row-start-1 self-start justify-self-end', className), ...props }));
+}
+function CardContent({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "card-content", className: cn('px-6', className), ...props }));
+}
+function CardFooter({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "card-footer", className: cn('flex items-center px-6 [.border-t]:pt-6', className), ...props }));
+}
+export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent, };

package/dist/data/betaMarketingData.d.ts

@@ -0,0 +1,15 @@
+export declare const betaOfferData: {
+    badge: string;
+    title: string;
+    description: string;
+    callouts: {
+        emoji: string;
+        title: string;
+        description: string;
+    }[];
+    cta: {
+        text: string;
+        url: string;
+    };
+    disclaimer: string;
+};

package/dist/data/betaMarketingData.js

@@ -0,0 +1,32 @@
+export const betaOfferData = {
+    badge: 'LIMITED TIME',
+    title: 'Beta Launch Special',
+    description: 'Join our exclusive Beta program and get direct access to our founders.',
+    callouts: [
+        {
+            emoji: '🌟',
+            title: 'Help Shape the Future',
+            description: 'Have significant influence in shaping our product roadmap and stay ahead of your competition.',
+        },
+        {
+            emoji: '🔧',
+            title: 'Deep Customizations',
+            description: 'Deeply customize AI agents on Fask to perform any task, enhance your CX and grow your business.',
+        },
+        {
+            emoji: '💰',
+            title: '50% Off First Year',
+            description: 'Exclusive Beta pricing for early adopters. Save hundreds on your first year subscription.',
+        },
+        {
+            emoji: '🤝',
+            title: 'Priority Support',
+            description: 'Get immediate, priority access to our core team for support, feature requests and guidance.',
+        },
+    ],
+    cta: {
+        text: 'Subscribe Now',
+        url: 'https://biz.fask.ai/billing?price-tier=beta&period=year',
+    },
+    disclaimer: 'Beta offer valid for limited customers only.',
+};

package/dist/index.d.ts

@@ -0,0 +1,18 @@
+export { GTMProvider } from './components/gtm/gtm-provider';
+export { betaOfferData } from './data/betaMarketingData';
+export { ConnectionsApiProvider, useConnectionsApi, } from './components/connections/connections-api-provider';
+export { AppIcon } from './components/connections/app-icon';
+export { ConnectedAppsList } from './components/connections/connected-apps-list';
+export { AvailableAppsList } from './components/connections/available-apps-list';
+export { AppSearchGrid } from './components/connections/app-search-grid';
+export { ConnectionsPanel } from './components/connections/connections-panel';
+export type { FaskConnection, FaskSearchableApp } from './types/connections';
+export type { ConnectionsApi, ConnectInfo } from './types/connections-api';
+export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent, } from './components/ui/card';
+export { Badge, badgeVariants } from './components/ui/badge';
+export { Button, buttonVariants } from './components/ui/button';
+export { Stack } from './components/layout/stack';
+export { Row } from './components/layout/row';
+export { Grid } from './components/layout/grid';
+export { SplitView } from './components/layout/split-view';
+export { cn } from './lib/utils';

package/dist/index.js

@@ -0,0 +1,20 @@
+export { GTMProvider } from './components/gtm/gtm-provider';
+export { betaOfferData } from './data/betaMarketingData';
+// Connections
+export { ConnectionsApiProvider, useConnectionsApi, } from './components/connections/connections-api-provider';
+export { AppIcon } from './components/connections/app-icon';
+export { ConnectedAppsList } from './components/connections/connected-apps-list';
+export { AvailableAppsList } from './components/connections/available-apps-list';
+export { AppSearchGrid } from './components/connections/app-search-grid';
+export { ConnectionsPanel } from './components/connections/connections-panel';
+// UI primitives (shadcn)
+export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent, } from './components/ui/card';
+export { Badge, badgeVariants } from './components/ui/badge';
+export { Button, buttonVariants } from './components/ui/button';
+// Layout primitives
+export { Stack } from './components/layout/stack';
+export { Row } from './components/layout/row';
+export { Grid } from './components/layout/grid';
+export { SplitView } from './components/layout/split-view';
+// Utilities
+export { cn } from './lib/utils';

package/dist/lib/utils.d.ts

@@ -0,0 +1,2 @@
+import { type ClassValue } from 'clsx';
+export declare function cn(...inputs: ClassValue[]): string;

package/dist/lib/utils.js

@@ -0,0 +1,5 @@
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+export function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}

package/dist/types/connections-api.d.ts

@@ -0,0 +1,35 @@
+import type { FaskConnection, FaskSearchableApp } from './connections';
+/**
+ * Information returned from `ConnectionsApi.connect()` to drive the
+ * provider-specific Connect UX in `ConnectionsPanel`.
+ *
+ * Each variant carries exactly the data its launch flow needs:
+ *   - `pipedream` → token + expiresAt, passed to Pipedream's frontend SDK
+ *     (`createFrontendClient` + `connectAccount`) which renders Pipedream's
+ *     hosted popup.
+ *   - `nango` → connectLink, a Nango Connect URL that we open in a popup and
+ *     poll the connections list to detect completion.
+ *
+ * The discriminator (`provider`) MUST be present so `ConnectionsPanel` can
+ * branch exhaustively. Adding a new provider means adding a new variant here
+ * and a new branch in the panel — TypeScript will catch missing branches.
+ */
+export type ConnectInfo = {
+    provider: 'pipedream';
+    token: string;
+    expiresAt: string;
+} | {
+    provider: 'nango';
+    connectLink: string;
+};
+export interface ConnectionsApi {
+    getConnections(): Promise<FaskConnection[]>;
+    searchApps(query: string): Promise<FaskSearchableApp[]>;
+    /**
+     * Start a connect flow for `appKey`. Returns provider-specific launch info
+     * that `ConnectionsPanel` uses to render the appropriate UI (Pipedream
+     * popup vs Nango Connect popup).
+     */
+    connect(appKey: string): Promise<ConnectInfo>;
+    disconnect(connectionId: string): Promise<void>;
+}

package/dist/types/connections-api.js

@@ -0,0 +1 @@
+export {};

package/dist/types/connections.d.ts

@@ -0,0 +1,24 @@
+export interface FaskConnection {
+    id?: string;
+    appKey: string;
+    provider: string;
+    providerConnectionId?: string;
+    status: 'connected' | 'available' | 'disconnected' | 'pending' | 'error';
+    app: {
+        name: string;
+        img?: string;
+        icon?: string;
+    };
+    actions?: {
+        key: string;
+        appKey: string;
+        name: string;
+        description: string;
+    }[];
+}
+export interface FaskSearchableApp {
+    name_slug: string;
+    name: string;
+    img_src: string;
+    provider: string;
+}

package/dist/types/connections.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@faskai/ui-commons",
   "author": "Fask AI <arko@fask.ai>",
-  "version": "0.0.0-alpha.03",
-  "description": "Common UI components and utilities for Fask applications",
+  "version": "0.0.0-alpha.30",
+  "description": "Common UI components for Fask applications.",
   "private": false,
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -11,23 +11,28 @@
     "dist"
   ],
   "scripts": {
-    "build": "tsc",
-    "dev": "tsc --watch",
-    "clean": "rm -rf dist",
-    "prepare": "yarn build"
+    "build": "tsc"
   },
   "peerDependencies": {
-    "next": "^14.0.0",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "@pipedream/sdk": ">=2.3.0",
+    "@radix-ui/react-slot": ">=1.0.0",
+    "class-variance-authority": ">=0.7.0",
+    "clsx": ">=2.0.0",
+    "lucide-react": ">=0.300.0",
+    "next": ">=13.0.0",
+    "react": ">=18.0.0",
+    "tailwind-merge": ">=2.0.0"
   },
   "devDependencies": {
+    "@pipedream/sdk": "^2.3.6",
+    "@radix-ui/react-slot": "^1.1.0",
     "@types/react": "^18.0.0",
-    "@types/react-dom": "^18.0.0",
-    "@types/node": "^20.0.0",
-    "typescript": "^5.0.0",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.0",
+    "lucide-react": "^0.400.0",
+    "next": "^14.0.0",
+    "tailwind-merge": "^2.2.0",
+    "typescript": "^5.0.0"
   },
-  "packageManager": "yarn@1.22.22"
-}
+  "dependencies": {}
+}