react-notify-sdk 1.0.34 → 1.0.35

package/dist/FadeWrapper.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
-import { FeatureMessage } from './types';
+import { FeatureMessages } from './types';
 interface FadeWrapperProps {
     visible: boolean;
-    message: FeatureMessage;
+    message: FeatureMessages;
     device: string;
 }
 export declare const FadeWrapper: import("goober").StyledVNode<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & import("goober").DefaultTheme & FadeWrapperProps, never>>;

package/dist/FeatureMessage.d.ts

@@ -0,0 +1,6 @@
+import { FeatureMessages } from './types';
+interface FeatureMessageProps {
+    message: FeatureMessages;
+}
+declare const FeatureMessage: ({ message }: FeatureMessageProps) => import("react/jsx-runtime").JSX.Element;
+export default FeatureMessage;

package/dist/FeatureMessage.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/////////////---Icon imports---////////////////////
+import { AlertTriangle, CircleX, Info } from "lucide-react";
+const FeatureMessage = ({ message }) => {
+    function hexToRgba(hex, alpha) {
+        // Remove leading #
+        hex = hex.replace(/^#/, "");
+        // Expand shorthand form (#03F → #0033FF)
+        if (hex.length === 3) {
+            hex = hex.split("").map(x => x + x).join("");
+        }
+        // Parse into r, g, b
+        const bigint = parseInt(hex, 16);
+        const r = (bigint >> 16) & 255;
+        const g = (bigint >> 8) & 255;
+        const b = bigint & 255;
+        return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+    }
+    return (_jsxs("div", { style: {
+            width: '100%',
+            paddingTop: '4px', // p-4 = 1rem
+            paddingBottom: '4px',
+            paddingLeft: '12px',
+            paddingRight: '12px',
+            backgroundColor: message?.backgroundColor,
+            border: `1px solid ${message?.textColor}`, // Completed border style
+            borderRadius: "8px",
+            borderWidth: "1px",
+            borderColor: `${hexToRgba(message.borderColor, 0.3)}`,
+            boxShadow: `0 10px 15px -3px ${hexToRgba(message.borderColor, 0.4)}, 0 4px 6px -4px ${hexToRgba(message.borderColor, 0.4)}`
+        }, children: [_jsxs("div", { className: 'w-full flex flex-row items-center', style: {
+                    width: '100%',
+                    display: 'flex',
+                    flexDirection: 'row',
+                    alignItems: 'center'
+                }, children: [message?.type === 'Information' && _jsx(Info, { size: 16, style: { color: 'rgb(59 130 24)' } }), message?.type === 'Warning' && _jsx(AlertTriangle, { size: 16, style: { color: 'rgb(245 158 1)' } }), message?.type === 'Error' && _jsx(CircleX, { size: 16, style: { color: 'rgb(239 68 68)' } }), _jsx("p", { className: `text-lg font-semibold text-[${message?.textColor}] ml-3`, style: {
+                            fontSize: '1.125rem', // text-lg = 18px = 1.125rem
+                            fontWeight: 600, // font-semibold = 600
+                            color: `${message?.textColor}`,
+                            marginLeft: '12px'
+                        }, children: message.title })] }), _jsx("p", { className: `text-sm text-[${message?.textColor}]`, style: {
+                    marginTop: '8px',
+                    fontSize: '0.875rem', // text-sm = 14px = 0.875rem
+                    color: `${message?.textColor}`,
+                }, children: message.content })] }));
+};
+export default FeatureMessage;

package/dist/FeatureMessageProvider.d.ts

@@ -0,0 +1,2 @@
+import { FeatureMessageProviderProps } from './types';
+export declare const FeatureMessageProvider: ({ projectKey, }: FeatureMessageProviderProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/FeatureMessageProvider.js

@@ -0,0 +1,82 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// src/FeatureMessageProvider.tsx
+import { useEffect, useState } from 'react';
+import FeatureMessage from './FeatureMessage';
+import { getSupabaseClient } from './supabase/supabaseClient';
+import useDeviceDetection from './useDeviceDetection';
+import FadeWrapper from './FadeWrapper';
+// Wildcard route matching utility
+const routeMatches = (pattern, path) => {
+    if (pattern === path)
+        return true;
+    const escapeRegex = (str) => str.replace(/([.+^=!:${}()|[\]/\\])/g, "\\$1");
+    const regexPattern = "^" + pattern.split("*").map(escapeRegex).join(".*") + "$";
+    try {
+        return new RegExp(regexPattern).test(path);
+    }
+    catch {
+        return false;
+    }
+};
+export const FeatureMessageProvider = ({ projectKey,
+//className,
+//style,
+//disableDefaultStyles = true,
+ }) => {
+    const [message, setMessage] = useState(null);
+    const [visible, setVisible] = useState(false);
+    const device = useDeviceDetection();
+    // Create supabase client with project key header
+    const supabaseClient = getSupabaseClient();
+    useEffect(() => {
+        if (typeof window === 'undefined')
+            return; // Skip on server
+        const fetchMessage = async () => {
+            const { data } = await supabaseClient
+                .from('feature_messages')
+                .select('*')
+                .eq('project_key', projectKey)
+                .eq('route', window.location.pathname)
+                .eq('is_active', true)
+                .order('created_at', { ascending: false });
+            //.limit(1)
+            //.single();
+            const match = data?.find((msg) => routeMatches(msg.route, window.location.pathname));
+            if (match) {
+                setMessage(match);
+                setVisible(true); // Fade in
+            }
+            else {
+                // Trigger fade out before removing message
+                setVisible(false);
+                setTimeout(() => setMessage(null), 300); // match fadeOut duration
+            }
+        };
+        fetchMessage();
+        const subscription = supabaseClient
+            .channel('feature_messages_channel')
+            .on('postgres_changes', {
+            event: '*',
+            schema: 'public',
+            table: 'feature_messages',
+        }, (payload) => {
+            const msg = payload.new;
+            if (msg.project_key === projectKey && msg.is_active && routeMatches(msg.route, window.location.pathname)) {
+                setMessage(msg);
+                setVisible(true);
+            }
+            else {
+                setVisible(false);
+                setTimeout(() => setMessage(null), 300);
+            }
+        })
+            .subscribe();
+        return () => {
+            supabaseClient.removeChannel(subscription);
+        };
+    }, [window.location.pathname, projectKey]);
+    if (!message)
+        return null;
+    //const defaultClasses = `absolute ${message?.position}-6 left-1/2 transform -translate-x-1/2 z-20 w-full md:w-[${message?.width}%] px-3 py-1 bg-[${message?.backgroundColor}] border border-[${message?.borderColor}] text-[${message?.textColor}] rounded-lg shadow`;
+    return (_jsx(FadeWrapper, { visible: visible, device: device, message: message, children: _jsx(FeatureMessage, { message: message }) }));
+};

package/dist/index.d.ts

@@ -1 +1 @@
-export { NotifyProvider } from './NotifyProvider';
+export { FeatureMessageProvider } from './FeatureMessageProvider';

package/dist/index.js

@@ -1,4 +1,4 @@
 import { setup } from 'goober';
 import { createElement } from 'react';
 setup(createElement);
-export { NotifyProvider } from './NotifyProvider';
+export { FeatureMessageProvider } from './FeatureMessageProvider';

package/dist/supabase/supabaseClient.d.ts

@@ -1,32 +1,12 @@
 import { SupabaseClient } from '@supabase/supabase-js';
-export interface FeatureMessagesConfig {
-    /**
-     * Your SaaS API key (provided to customers)
-     * This identifies the customer and their project
-     */
-    projectKey: string;
-    /**
-     * Optional: Custom endpoint if you're using a different domain
-     * Defaults to your SaaS service endpoint
-     */
-    endpoint?: string;
-    /**
-     * Optional: Enable debug logging
-     */
-    debug?: boolean;
-}
-export declare const getSupabaseClient: (config: FeatureMessagesConfig) => SupabaseClient;
 /**
- * Get the initialized feature messages client
- * Used internally by the package components and hooks
+ * Get the Supabase client for the SDK
+ * This connects to YOUR centralized notification platform database
+ * No configuration needed from developers - it's plug and play!
  */
-export declare const getFeatureMessagesClient: () => SupabaseClient;
+export declare function getSupabaseClient(): SupabaseClient;
 /**
- * Get the current customer configuration
- * Used internally by the package
+ * Optional: Allow overriding the default configuration for testing/development
+ * This is mainly for your internal use during SDK development
  */
-export declare const getCustomerConfig: () => FeatureMessagesConfig | null;
-/**
- * Reset the client (useful for testing or switching configurations)
- */
-export declare const resetFeatureMessagesClient: () => void;
+export declare function overrideSupabaseConfig(url: string, anonKey: string): void;

package/dist/supabase/supabaseClient.js

@@ -1,65 +1,23 @@
 import { createClient } from '@supabase/supabase-js';
-const supabaseUrl = process.env.REACT_APP_SUPABASE_URL || "https://dhgnstjrkeuqnsapwcec.supabase.co";
-const supabaseKey = process.env.REACT_APP_SUPABASE_KEY || "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImRoZ25zdGpya2V1cW5zYXB3Y2VjIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NTA2MDA0NTEsImV4cCI6MjA2NjE3NjQ1MX0.TLBAPIWjPYvzNUUPHyakIypRydAeWM8Y1OrUzVvIgLQ";
-// Create a single supabase client for interacting with your database
-//export const supabase = createClient(supabaseUrl, supabaseKey)
-let featureMessagesClient = null;
-let customerConfig = null;
-export const getSupabaseClient = (config) => {
-    if (!config.projectKey) {
-        throw new Error('Feature Messages project key is required. Get yours at https://your-saas-dashboard.com');
-    }
-    // Validate that the service is properly configured
-    if (process.env.REACT_APP_SUPABASE_URL === 'https://dhgnstjrkeuqnsapwcec.supabase.co' ||
-        process.env.REACT_APP_SUPABASE_KEY === 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImRoZ25zdGpya2V1cW5zYXB3Y2VjIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NTA2MDA0NTEsImV4cCI6MjA2NjE3NjQ1MX0.TLBAPIWjPYvzNUUPHyakIypRydAeWM8Y1OrUzVvIgLQ') {
-        throw new Error('Feature Messages service is not properly configured. ' +
-            'Please contact support@your-saas.com for assistance.');
-    }
-    customerConfig = config;
-    if (!featureMessagesClient) {
-        featureMessagesClient = createClient(supabaseUrl, supabaseKey, {
-            global: {
-                headers: {
-                    // Pass the project key in headers for filtering
-                    'x-feature-messages-project-key': config.projectKey,
-                    // Add package version for analytics/debugging
-                    'x-feature-messages-version': process.env.npm_package_version || '1.0.0',
-                    // Identify this as package usage (not dashboard)
-                    'x-feature-messages-source': 'npm-package',
-                },
-            },
-            realtime: {
-                headers: {
-                    'x-feature-messages-project-key': config.projectKey,
-                    'x-feature-messages-source': 'npm-package',
-                },
-            },
-        });
-    }
-    return featureMessagesClient;
-};
+// Your centralized Supabase configuration (hardcoded in the SDK)
+const SDK_SUPABASE_URL = 'https://dhgnstjrkeuqnsapwcec.supabase.co';
+const SDK_SUPABASE_ANON_KEY = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImRoZ25zdGpya2V1cW5zYXB3Y2VjIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NTA2MDA0NTEsImV4cCI6MjA2NjE3NjQ1MX0.TLBAPIWjPYvzNUUPHyakIypRydAeWM8Y1OrUzVvIgLQ';
+let supabaseClient = null;
 /**
- * Get the initialized feature messages client
- * Used internally by the package components and hooks
+ * Get the Supabase client for the SDK
+ * This connects to YOUR centralized notification platform database
+ * No configuration needed from developers - it's plug and play!
  */
-export const getFeatureMessagesClient = () => {
-    if (!featureMessagesClient || !customerConfig) {
-        throw new Error('Feature Messages not initialized. Make sure you have wrapped your app with FeatureMessagesProvider.\n' +
-            'Get your project key at https://your-saas-dashboard.com');
+export function getSupabaseClient() {
+    if (!supabaseClient) {
+        supabaseClient = createClient(SDK_SUPABASE_URL, SDK_SUPABASE_ANON_KEY);
     }
-    return featureMessagesClient;
-};
-/**
- * Get the current customer configuration
- * Used internally by the package
- */
-export const getCustomerConfig = () => {
-    return customerConfig;
-};
+    return supabaseClient;
+}
 /**
- * Reset the client (useful for testing or switching configurations)
+ * Optional: Allow overriding the default configuration for testing/development
+ * This is mainly for your internal use during SDK development
  */
-export const resetFeatureMessagesClient = () => {
-    featureMessagesClient = null;
-    customerConfig = null;
-};
+export function overrideSupabaseConfig(url, anonKey) {
+    supabaseClient = createClient(url, anonKey);
+}

package/dist/types.d.ts

@@ -1,6 +1,4 @@
-import { ReactNode } from "react";
-import { FeatureMessagesConfig } from "./supabase/supabaseClient";
-export type FeatureMessage = {
+export type FeatureMessages = {
     id: string;
     project_key: string;
     route: string;
@@ -17,14 +15,8 @@ export type FeatureMessage = {
     created_at: string;
     type?: 'Information' | 'Warning' | 'Error';
 };
-export interface FeatureMessageFilter {
-    projectKey: string;
-    route: string;
-    deviceType?: 'desktop' | 'tablet' | 'mobile';
-}
 export type FeatureMessageProviderProps = {
-    config: FeatureMessagesConfig | null;
     projectKey: string;
-    children: ReactNode;
-    endpoint: string;
+    className?: string;
+    disableDefaultStyles?: boolean;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-notify-sdk",
-  "version": "1.0.34",
+  "version": "1.0.35",
   "description": "SDK for displaying real-time route-specific messages in React apps",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -22,13 +22,14 @@
     "ua-parser-js": "^2.0.4"
   },
   "devDependencies": {
-    "@types/react": "^19.1.8",
+    "@types/react": "^19.1.13",
+    "@types/react-dom": "^19.1.9",
     "@types/react-router-dom": "^5.3.3",
-    "typescript": "^5.8.3"
+    "typescript": "^5.9.2"
   },
   "peerDependencies": {
-    "react": "^19.1.0",
-    "react-dom": "^19.0.0",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
     "react-router-dom": "^7.6.2"
   }
 }

package/dist/NotifyMessage.d.ts

@@ -1,6 +0,0 @@
-import { FeatureMessage } from './types';
-interface NotifyMessageProps {
-    message: FeatureMessage;
-}
-declare const NotificationMessage: ({ message }: NotifyMessageProps) => import("react/jsx-runtime").JSX.Element;
-export default NotificationMessage;

package/dist/NotifyMessage.js

@@ -1,49 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import FadeWrapper from './FadeWrapper';
-/////////////---Icon imports---////////////////////
-import { AlertTriangle, CircleX, Info } from "lucide-react";
-import useDeviceDetection from './UseDeviceDetection';
-const NotificationMessage = ({ message }) => {
-    const device = useDeviceDetection();
-    function hexToRgba(hex, alpha) {
-        // Remove leading #
-        hex = hex.replace(/^#/, "");
-        // Expand shorthand form (#03F → #0033FF)
-        if (hex.length === 3) {
-            hex = hex.split("").map(x => x + x).join("");
-        }
-        // Parse into r, g, b
-        const bigint = parseInt(hex, 16);
-        const r = (bigint >> 16) & 255;
-        const g = (bigint >> 8) & 255;
-        const b = bigint & 255;
-        return `rgba(${r}, ${g}, ${b}, ${alpha})`;
-    }
-    return (_jsx(FadeWrapper, { visible: message?.is_active, device: device, message: message, children: _jsxs("div", { style: {
-                width: '100%',
-                paddingTop: '4px', // p-4 = 1rem
-                paddingBottom: '4px',
-                paddingLeft: '12px',
-                paddingRight: '12px',
-                backgroundColor: message?.backgroundColor,
-                borderRadius: "8px",
-                borderWidth: "1px",
-                borderColor: `${hexToRgba(message.borderColor, 0.3)}`,
-                boxShadow: `0 10px 15px -3px ${hexToRgba(message.borderColor, 0.4)}, 0 4px 6px -4px ${hexToRgba(message.borderColor, 0.4)}`
-            }, children: [_jsxs("div", { className: 'w-full flex flex-row items-center', style: {
-                        width: '100%',
-                        display: 'flex',
-                        flexDirection: 'row',
-                        alignItems: 'center'
-                    }, children: [message?.type === 'Information' && _jsx(Info, { size: 16, style: { color: 'rgb(59 130 24)' } }), message?.type === 'Warning' && _jsx(AlertTriangle, { size: 16, style: { color: 'rgb(245 158 1)' } }), message?.type === 'Error' && _jsx(CircleX, { size: 16, style: { color: 'rgb(239 68 68)' } }), _jsx("p", { className: `text-lg font-semibold text-[${message?.textColor}] ml-3`, style: {
-                                fontSize: '1.125rem', // text-lg = 18px = 1.125rem
-                                fontWeight: 600, // font-semibold = 600
-                                color: `${message?.textColor}`,
-                                marginLeft: '12px'
-                            }, children: message.title })] }), _jsx("p", { className: `text-sm text-[${message?.textColor}]`, style: {
-                        marginTop: '8px',
-                        fontSize: '0.875rem', // text-sm = 14px = 0.875rem
-                        color: `${message?.textColor}`,
-                    }, children: message.content })] }) }));
-};
-export default NotificationMessage;

package/dist/NotifyProvider.d.ts

@@ -1,12 +0,0 @@
-import { FeatureMessageProviderProps } from './types';
-import { FeatureMessagesConfig } from './supabase/supabaseClient';
-interface FeatureMessagesContextType {
-    config: FeatureMessagesConfig | null;
-    projectKey: string | null;
-}
-export declare const NotifyProvider: ({ children, projectKey, endpoint, }: FeatureMessageProviderProps) => import("react/jsx-runtime").JSX.Element | null;
-/**
- * Hook to get the feature messages context (for advanced use cases)
- */
-export declare const useFeatureMessagesContext: () => FeatureMessagesContextType;
-export {};

package/dist/NotifyProvider.js

@@ -1,76 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// src/FeatureMessage.tsx
-import { useEffect, useState, createContext, useContext } from 'react';
-import NotificationMessage from './NotifyMessage';
-import { getSupabaseClient } from './supabase/supabaseClient';
-import { useFeatureMessages } from './useFeatureMessage';
-import useDeviceDetection from './UseDeviceDetection';
-const FeatureMessagesContext = createContext({
-    config: null,
-    projectKey: null,
-});
-export const NotifyProvider = ({ children, projectKey, endpoint, }) => {
-    const config = { projectKey, endpoint };
-    useEffect(() => {
-        getSupabaseClient(config);
-    }, [projectKey, endpoint]);
-    const [message, setMessage] = useState(null);
-    const [visible, setVisible] = useState(false);
-    const device = useDeviceDetection();
-    if (!message)
-        return null;
-    return (_jsxs(FeatureMessagesContext.Provider, { value: { config, projectKey }, children: [children, _jsx(AutomaticFeatureMessages, { projectKey: projectKey })] }));
-    /*
-      return message ? (
-        <FadeWrapper visible={visible} device={device} message={message}>
-          <NotificationMessage message={message} />
-        </FadeWrapper>
-      )
-      :
-      null;
-    */
-};
-/**
- * Internal component that automatically displays messages based on current route
- */
-const AutomaticFeatureMessages = ({ projectKey }) => {
-    // Get current route - works with any router or vanilla JavaScript
-    const [currentRoute, setCurrentRoute] = useState(window.location.pathname);
-    useEffect(() => {
-        // Listen for route changes (works with React Router, Next.js Router, etc.)
-        const handleRouteChange = () => {
-            setCurrentRoute(window.location.pathname);
-        };
-        // Listen for browser navigation
-        window.addEventListener('popstate', handleRouteChange);
-        // Listen for programmatic navigation (works with most routers)
-        const originalPushState = history.pushState;
-        const originalReplaceState = history.replaceState;
-        history.pushState = function () {
-            originalPushState.apply(history, arguments);
-            setTimeout(handleRouteChange, 0);
-        };
-        history.replaceState = function () {
-            originalReplaceState.apply(history, arguments);
-            setTimeout(handleRouteChange, 0);
-        };
-        return () => {
-            window.removeEventListener('popstate', handleRouteChange);
-            history.pushState = originalPushState;
-            history.replaceState = originalReplaceState;
-        };
-    }, []);
-    // Use the internal hook to get messages for current route
-    const { message, dismissMessage } = useFeatureMessages({
-        projectKey,
-        route: currentRoute,
-    });
-    // Automatically render the message if one exists
-    return message ? (_jsx(NotificationMessage, { message: message })) : null;
-};
-/**
- * Hook to get the feature messages context (for advanced use cases)
- */
-export const useFeatureMessagesContext = () => {
-    return useContext(FeatureMessagesContext);
-};

package/dist/useFeatureMessage.d.ts

@@ -1,17 +0,0 @@
-import { FeatureMessage, FeatureMessageFilter } from './types';
-export interface UseFeatureMessagesReturn {
-    message: FeatureMessage | null;
-    messages: FeatureMessage[];
-    loading: boolean;
-    error: string | null;
-    dismissMessage: (messageId: string) => void;
-    refetch: () => Promise<void>;
-}
-export declare const useFeatureMessages: (filter: FeatureMessageFilter) => {
-    message: FeatureMessage | null;
-    messages: FeatureMessage[];
-    loading: boolean;
-    error: string | null;
-    dismissMessage: (messageId: string) => void;
-    refetch: () => Promise<void>;
-};

package/dist/useFeatureMessage.js

@@ -1,148 +0,0 @@
-import { useState, useEffect, useCallback, useRef } from 'react';
-import { getFeatureMessagesClient } from './supabase/supabaseClient';
-import { getCustomerConfig } from './supabase/supabaseClient';
-import useDeviceDetection from './UseDeviceDetection';
-const routeMatches = (pattern, path) => {
-    if (pattern === path)
-        return true;
-    const escapeRegex = (str) => str.replace(/([.+^=!:${}()|[\]/\\])/g, "\\$1");
-    const regexPattern = "^" + pattern.split("*").map(escapeRegex).join(".*") + "$";
-    try {
-        return new RegExp(regexPattern).test(path);
-    }
-    catch {
-        return false;
-    }
-};
-export const useFeatureMessages = (filter) => {
-    const [messages, setMessages] = useState([]);
-    const [loading, setLoading] = useState(true);
-    const [error, setError] = useState(null);
-    const [dismissedMessages, setDismissedMessages] = useState(new Set());
-    const channelRef = useRef(null);
-    const deviceInfo = useDeviceDetection();
-    const customerConfig = getCustomerConfig();
-    const { projectKey, route, deviceType } = filter;
-    const currentDeviceType = deviceType || deviceInfo;
-    // Filter messages based on route and active status
-    const filterMessages = useCallback((allMessages) => {
-        const now = new Date();
-        return allMessages.filter(message => {
-            // Check if message is active
-            if (!message.is_active)
-                return false;
-            // Check if message has ended
-            //if (message.ended_at && new Date(message.ended_at) < now) return false;
-            // Check project key (this should match what the customer set up in the dashboard)
-            if (message.project_key !== projectKey)
-                return false;
-            // Check route matching (including wildcards)
-            if (!routeMatches(route, message.route))
-                return false;
-            // Check if message has been dismissed
-            if (dismissedMessages.has(message.id))
-                return false;
-            return true;
-        });
-    }, [projectKey, route, dismissedMessages]);
-    // Get the most recent active message (since trigger enforces single active message)
-    const getActiveMessage = useCallback((filteredMessages) => {
-        if (filteredMessages.length === 0)
-            return null;
-        // Sort by creation date (newest first) since only one can be active
-        const sorted = [...filteredMessages].sort((a, b) => {
-            return new Date(b.created_at).getTime() - new Date(a.created_at).getTime();
-        });
-        return sorted[0];
-    }, []);
-    // Fetch messages from your SaaS backend
-    const fetchMessages = useCallback(async () => {
-        try {
-            setError(null);
-            const client = getFeatureMessagesClient();
-            // Query messages for this project key
-            const { data, error: fetchError } = await client
-                .from('feature_messages')
-                .select('*')
-                .eq('project_key', projectKey)
-                .eq('is_active', true);
-            if (fetchError) {
-                throw fetchError;
-            }
-            setMessages(data || []);
-        }
-        catch (err) {
-            console.error('Error fetching feature messages:', err);
-            setError(err instanceof Error ? err.message : 'Failed to fetch messages');
-        }
-        finally {
-            setLoading(false);
-        }
-    }, [projectKey]);
-    // Set up realtime subscription
-    useEffect(() => {
-        try {
-            const client = getFeatureMessagesClient();
-            // Clean up existing subscription
-            if (channelRef.current) {
-                client.removeChannel(channelRef.current);
-            }
-            // Create new subscription for this project
-            const channel = client
-                .channel(`feature_messages_${projectKey}`)
-                .on('postgres_changes', {
-                event: '*',
-                schema: 'public',
-                table: 'feature_messages',
-                filter: `project_key=eq.${projectKey}`,
-            }, (payload) => {
-                if (customerConfig?.debug) {
-                    console.log('Feature message change received:', payload);
-                }
-                if (payload.eventType === 'INSERT' || payload.eventType === 'UPDATE') {
-                    const newMessage = payload.new;
-                    setMessages(prev => {
-                        const existing = prev.find(m => m.id === newMessage.id);
-                        if (existing) {
-                            return prev.map(m => m.id === newMessage.id ? newMessage : m);
-                        }
-                        return [...prev, newMessage];
-                    });
-                }
-                else if (payload.eventType === 'DELETE') {
-                    const deletedMessage = payload.old;
-                    setMessages(prev => prev.filter(m => m.id !== deletedMessage.id));
-                }
-            })
-                .subscribe();
-            channelRef.current = channel;
-            // Initial fetch
-            fetchMessages();
-            return () => {
-                if (channelRef.current) {
-                    client.removeChannel(channelRef.current);
-                    channelRef.current = null;
-                }
-            };
-        }
-        catch (err) {
-            setError(err instanceof Error ? err.message : 'Failed to initialize feature messages');
-            setLoading(false);
-        }
-    }, [projectKey, fetchMessages, customerConfig?.debug]);
-    // Dismiss a message
-    const dismissMessage = useCallback((messageId) => {
-        setDismissedMessages(prev => new Set([...prev, messageId]));
-    }, []);
-    // Get filtered messages and active message
-    const filteredMessages = filterMessages(messages);
-    const activeMessage = getActiveMessage(filteredMessages);
-    return {
-        message: activeMessage,
-        messages: filteredMessages,
-        loading,
-        error,
-        dismissMessage,
-        refetch: fetchMessages,
-    };
-};