@pubflow/react 0.3.1 → 0.3.4-beta.1

package/dist/index.esm.js

@@ -454,7 +454,8 @@ function PubflowProvider({ children, config, instances, defaultInstance = 'defau
                         }
                     });
                 }
-                if (isMounted) {
+                // Only set context value if we have instances to set
+                if (isMounted && Object.keys(instancesMap).length > 0) {
                     setContextValue({
                         instances: instancesMap,
                         defaultInstance
@@ -8559,6 +8560,68 @@ function BridgeList({ renderItem, showPagination = true, showSearch = true, show
                                 }) })), renderPagination()] })] })] }));
 }
 
+/**
+ * Asset Utilities for Pubflow React
+ *
+ * Utilities for handling assets like logos, images, and other media files
+ * Supports both external URLs and internal assets with proper Vite/bundler integration
+ */
+/**
+ * Process asset URL - supports both external URLs and internal assets
+ *
+ * @param assetUrl - The asset URL to process
+ * @returns Processed URL ready for use in src attributes
+ */
+function processAssetUrl(assetUrl) {
+    // Return non-string values as-is (React components, null, undefined)
+    if (!assetUrl || typeof assetUrl !== 'string') {
+        return assetUrl;
+    }
+    // Return empty string as-is (no logo case)
+    if (assetUrl.trim() === '') {
+        return '';
+    }
+    // Check if it's an external URL (starts with http:// or https://)
+    if (assetUrl.startsWith('http://') || assetUrl.startsWith('https://')) {
+        return assetUrl;
+    }
+    // Check if it's a data URL (base64 encoded image)
+    if (assetUrl.startsWith('data:')) {
+        return assetUrl;
+    }
+    // Check if it's already a processed Vite asset (starts with /)
+    if (assetUrl.startsWith('/')) {
+        return assetUrl;
+    }
+    // Check if it's a blob URL
+    if (assetUrl.startsWith('blob:')) {
+        return assetUrl;
+    }
+    // For relative paths or simple filenames, assume they're in the public directory
+    // This handles cases like 'logo.svg', './logo.png', '../assets/logo.jpg', etc.
+    if (assetUrl.includes('.')) {
+        // Remove leading ./ if present
+        const cleanPath = assetUrl.replace(/^\.\//, '');
+        // If it starts with ../, keep it as is (relative to current directory)
+        if (assetUrl.startsWith('../')) {
+            return assetUrl;
+        }
+        // For simple filenames or paths, prepend with /
+        return `/${cleanPath}`;
+    }
+    // Return as-is for any other cases
+    return assetUrl;
+}
+/**
+ * Process logo URL specifically - alias for processAssetUrl with better naming
+ *
+ * @param logoUrl - The logo URL to process
+ * @returns Processed URL ready for use in img src
+ */
+function processLogoUrl(logoUrl) {
+    return processAssetUrl(logoUrl);
+}
+
 /**
  * Professional login form component
  */
@@ -8616,21 +8679,31 @@ function LoginForm({ config = {}, onSuccess, onError, onPasswordReset, onAccount
     const styles = {
         container: {
             maxWidth: '400px',
+            width: '100%',
             margin: '0 auto',
             padding: '24px',
             backgroundColor: '#ffffff',
             borderRadius: '24px',
             boxShadow: '0 8px 24px rgba(0, 0, 0, 0.1)',
-            border: '1px solid #f0f0f0'
+            border: '1px solid #f0f0f0',
+            boxSizing: 'border-box'
         },
         logoSection: {
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
             textAlign: 'center',
-            marginBottom: '32px'
+            marginBottom: '32px',
+            width: '100%'
         },
         logo: {
             maxWidth: '320px',
-            height: '80px',
-            marginBottom: '20px'
+            maxHeight: '80px',
+            height: 'auto',
+            width: 'auto',
+            objectFit: 'contain',
+            marginBottom: '20px',
+            display: 'block'
         },
         welcomeText: {
             fontSize: '32px',
@@ -8739,7 +8812,7 @@ function LoginForm({ config = {}, onSuccess, onError, onPasswordReset, onAccount
             textAlign: 'center'
         }
     };
-    return (jsxs("div", { className: className, style: styles.container, children: [jsxs("div", { style: styles.logoSection, children: [logo && (typeof logo === 'string' ? (jsx("img", { src: logo, alt: `${appName} Logo`, style: styles.logo })) : (logo)), jsxs("h1", { style: styles.welcomeText, children: ["Welcome to ", appName] }), jsx("p", { style: styles.subtitleText, children: "Sign in to your account" })] }), jsxs("form", { onSubmit: handleSubmit, children: [error && (jsxs("div", { style: styles.errorContainer, children: [jsx("span", { style: { color: '#ff4757', fontSize: '20px' }, children: "\u26A0" }), jsx("span", { style: styles.errorText, children: error })] })), jsxs("div", { style: styles.inputGroup, children: [jsx("label", { style: styles.inputLabel, children: "Email Address" }), jsxs("div", { style: styles.inputContainer, children: [jsx("span", { style: { marginRight: '12px', opacity: 0.7, color: '#666' }, children: "\u2709" }), jsx("input", { type: "email", style: styles.input, placeholder: "Enter your email", value: email, onChange: (e) => setEmail(e.target.value), autoCapitalize: "none", autoComplete: "email", disabled: isLoading, required: true })] })] }), jsxs("div", { style: styles.inputGroup, children: [jsx("label", { style: styles.inputLabel, children: "Password" }), jsxs("div", { style: styles.inputContainer, children: [jsx("span", { style: { marginRight: '12px', opacity: 0.7, color: '#666' }, children: "\uD83D\uDD12" }), jsx("input", { type: showPassword ? 'text' : 'password', style: styles.input, placeholder: "Enter your password", value: password, onChange: (e) => setPassword(e.target.value), autoComplete: "current-password", disabled: isLoading, required: true }), jsx("button", { type: "button", style: styles.eyeButton, onClick: () => setShowPassword(!showPassword), disabled: isLoading, children: showPassword ? '👁' : '👁‍🗨' })] })] }), jsxs("div", { style: styles.checkboxContainer, children: [jsxs("label", { style: { display: 'flex', alignItems: 'center', fontSize: '14px', color: '#666' }, children: [jsx("input", { type: "checkbox", checked: rememberMe, onChange: (e) => setRememberMe(e.target.checked), style: { marginRight: '8px' } }), "Remember me"] }), showPasswordReset && (jsx("button", { type: "button", style: { ...styles.linkButton, fontSize: '14px' }, onClick: onPasswordReset, disabled: isLoading, children: "Forgot password?" }))] }), jsx("button", { type: "submit", style: {
+    return (jsxs("div", { className: className, style: styles.container, children: [jsxs("div", { style: styles.logoSection, children: [logo && (typeof logo === 'string' ? (jsx("img", { src: processLogoUrl(logo), alt: `${appName} Logo`, style: styles.logo })) : (logo)), jsxs("h1", { style: styles.welcomeText, children: ["Welcome to ", appName] }), jsx("p", { style: styles.subtitleText, children: "Sign in to your account" })] }), jsxs("form", { onSubmit: handleSubmit, children: [error && (jsxs("div", { style: styles.errorContainer, children: [jsx("span", { style: { color: '#ff4757', fontSize: '20px' }, children: "\u26A0" }), jsx("span", { style: styles.errorText, children: error })] })), jsxs("div", { style: styles.inputGroup, children: [jsx("label", { style: styles.inputLabel, children: "Email Address" }), jsxs("div", { style: styles.inputContainer, children: [jsx("span", { style: { marginRight: '12px', opacity: 0.7, color: '#666' }, children: "\u2709" }), jsx("input", { type: "email", style: styles.input, placeholder: "Enter your email", value: email, onChange: (e) => setEmail(e.target.value), autoCapitalize: "none", autoComplete: "email", disabled: isLoading, required: true })] })] }), jsxs("div", { style: styles.inputGroup, children: [jsx("label", { style: styles.inputLabel, children: "Password" }), jsxs("div", { style: styles.inputContainer, children: [jsx("span", { style: { marginRight: '12px', opacity: 0.7, color: '#666' }, children: "\uD83D\uDD12" }), jsx("input", { type: showPassword ? 'text' : 'password', style: styles.input, placeholder: "Enter your password", value: password, onChange: (e) => setPassword(e.target.value), autoComplete: "current-password", disabled: isLoading, required: true }), jsx("button", { type: "button", style: styles.eyeButton, onClick: () => setShowPassword(!showPassword), disabled: isLoading, children: showPassword ? '👁' : '👁‍🗨' })] })] }), jsxs("div", { style: styles.checkboxContainer, children: [jsxs("label", { style: { display: 'flex', alignItems: 'center', fontSize: '14px', color: '#666' }, children: [jsx("input", { type: "checkbox", checked: rememberMe, onChange: (e) => setRememberMe(e.target.checked), style: { marginRight: '8px' } }), "Remember me"] }), showPasswordReset && (jsx("button", { type: "button", style: { ...styles.linkButton, fontSize: '14px' }, onClick: onPasswordReset, disabled: isLoading, children: "Forgot password?" }))] }), jsx("button", { type: "submit", style: {
                             ...styles.loginButton,
                             opacity: isLoading ? 0.8 : 1,
                             cursor: isLoading ? 'not-allowed' : 'pointer'
@@ -8856,21 +8929,32 @@ function PasswordResetForm({ config = {}, onSuccess, onError, onBackToLogin, res
     const styles = {
         container: {
             maxWidth: '400px',
+            width: '100%',
             margin: '0 auto',
             padding: '24px',
             backgroundColor: '#ffffff',
             borderRadius: '24px',
             boxShadow: '0 8px 24px rgba(0, 0, 0, 0.1)',
-            border: '1px solid #f0f0f0'
+            border: '1px solid #f0f0f0',
+            boxSizing: 'border-box'
         },
         logoSection: {
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'center',
+            alignItems: 'center',
             textAlign: 'center',
-            marginBottom: '32px'
+            marginBottom: '32px',
+            width: '100%'
         },
         logo: {
             maxWidth: '320px',
-            height: '80px',
-            marginBottom: '20px'
+            maxHeight: '80px',
+            height: 'auto',
+            width: 'auto',
+            objectFit: 'contain',
+            marginBottom: '20px',
+            display: 'block'
         },
         title: {
             fontSize: '28px',
@@ -8989,7 +9073,7 @@ function PasswordResetForm({ config = {}, onSuccess, onError, onBackToLogin, res
     const renderStep = () => {
         switch (step) {
             case 'request':
-                return (jsxs(Fragment, { children: [jsxs("div", { style: styles.logoSection, children: [logo && (typeof logo === 'string' ? (jsx("img", { src: logo, alt: `${appName} Logo`, style: styles.logo })) : (logo)), jsx("h1", { style: styles.title, children: "Reset Password" }), jsx("p", { style: styles.subtitle, children: "Enter your email to receive reset instructions" })] }), jsxs("form", { onSubmit: handleRequestReset, children: [error && (jsxs("div", { style: styles.errorContainer, children: [jsx("span", { style: { color: '#ff4757', fontSize: '20px' }, children: "\u26A0" }), jsx("span", { style: styles.errorText, children: error })] })), jsxs("div", { style: styles.inputGroup, children: [jsx("label", { style: styles.inputLabel, children: "Email Address" }), jsxs("div", { style: styles.inputContainer, children: [jsx("span", { style: { marginRight: '12px', opacity: 0.7, color: '#666' }, children: "\u2709" }), jsx("input", { type: "email", style: styles.input, placeholder: "Enter your email", value: email, onChange: (e) => setEmail(e.target.value), autoCapitalize: "none", autoComplete: "email", disabled: isLoading, required: true })] })] }), jsx("button", { type: "submit", style: {
+                return (jsxs(Fragment, { children: [jsxs("div", { style: styles.logoSection, children: [logo && (typeof logo === 'string' ? (jsx("img", { src: processLogoUrl(logo), alt: `${appName} Logo`, style: styles.logo })) : (logo)), jsx("h1", { style: styles.title, children: "Reset Password" }), jsx("p", { style: styles.subtitle, children: "Enter your email to receive reset instructions" })] }), jsxs("form", { onSubmit: handleRequestReset, children: [error && (jsxs("div", { style: styles.errorContainer, children: [jsx("span", { style: { color: '#ff4757', fontSize: '20px' }, children: "\u26A0" }), jsx("span", { style: styles.errorText, children: error })] })), jsxs("div", { style: styles.inputGroup, children: [jsx("label", { style: styles.inputLabel, children: "Email Address" }), jsxs("div", { style: styles.inputContainer, children: [jsx("span", { style: { marginRight: '12px', opacity: 0.7, color: '#666' }, children: "\u2709" }), jsx("input", { type: "email", style: styles.input, placeholder: "Enter your email", value: email, onChange: (e) => setEmail(e.target.value), autoCapitalize: "none", autoComplete: "email", disabled: isLoading, required: true })] })] }), jsx("button", { type: "submit", style: {
                                         ...styles.button,
                                         opacity: isLoading ? 0.8 : 1,
                                         cursor: isLoading ? 'not-allowed' : 'pointer'
@@ -9126,21 +9210,32 @@ function AccountCreationForm({ config = {}, onSuccess, onError, onBackToLogin })
     const styles = {
         container: {
             maxWidth: '400px',
+            width: '100%',
             margin: '0 auto',
             padding: '24px',
             backgroundColor: '#ffffff',
             borderRadius: '24px',
             boxShadow: '0 8px 24px rgba(0, 0, 0, 0.1)',
-            border: '1px solid #f0f0f0'
+            border: '1px solid #f0f0f0',
+            boxSizing: 'border-box'
         },
         logoSection: {
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'center',
+            alignItems: 'center',
             textAlign: 'center',
-            marginBottom: '32px'
+            marginBottom: '32px',
+            width: '100%'
         },
         logo: {
             maxWidth: '320px',
-            height: '80px',
-            marginBottom: '20px'
+            maxHeight: '80px',
+            height: 'auto',
+            width: 'auto',
+            objectFit: 'contain',
+            marginBottom: '20px',
+            display: 'block'
         },
         title: {
             fontSize: '28px',
@@ -9253,7 +9348,7 @@ function AccountCreationForm({ config = {}, onSuccess, onError, onBackToLogin })
     const renderStep = () => {
         switch (step) {
             case 'form':
-                return (jsxs(Fragment, { children: [jsxs("div", { style: styles.logoSection, children: [logo && (typeof logo === 'string' ? (jsx("img", { src: logo, alt: `${appName} Logo`, style: styles.logo })) : (logo)), jsx("h1", { style: styles.title, children: "Create Account" }), jsxs("p", { style: styles.subtitle, children: ["Join ", appName, " today"] })] }), jsxs("form", { onSubmit: handleSubmit, children: [errors.general && (jsxs("div", { style: { ...styles.successContainer, backgroundColor: '#fef2f2', borderColor: '#fecaca' }, children: [jsx("span", { style: { color: '#ff4757', fontSize: '20px' }, children: "\u26A0" }), jsx("span", { style: { ...styles.successText, color: '#dc2626' }, children: errors.general })] })), jsxs("div", { style: styles.inputGroup, children: [jsx("label", { style: styles.inputLabel, children: "First Name *" }), jsxs("div", { style: { ...styles.inputContainer, ...(errors.name ? styles.inputError : {}) }, children: [jsx("span", { style: { marginRight: '12px', opacity: 0.7, color: '#666' }, children: "\uD83D\uDC64" }), jsx("input", { type: "text", style: styles.input, placeholder: "Enter your first name", value: formData.name, onChange: (e) => updateField('name', e.target.value), autoComplete: "given-name", disabled: isLoading, required: true })] }), errors.name && jsx("div", { style: styles.errorText, children: errors.name })] }), jsxs("div", { style: styles.inputGroup, children: [jsx("label", { style: styles.inputLabel, children: "Last Name *" }), jsxs("div", { style: { ...styles.inputContainer, ...(errors.lastName ? styles.inputError : {}) }, children: [jsx("span", { style: { marginRight: '12px', opacity: 0.7, color: '#666' }, children: "\uD83D\uDC64" }), jsx("input", { type: "text", style: styles.input, placeholder: "Enter your last name", value: formData.lastName, onChange: (e) => updateField('lastName', e.target.value), autoComplete: "family-name", disabled: isLoading, required: true })] }), errors.lastName && jsx("div", { style: styles.errorText, children: errors.lastName })] }), jsxs("div", { style: styles.inputGroup, children: [jsx("label", { style: styles.inputLabel, children: "Email Address *" }), jsxs("div", { style: { ...styles.inputContainer, ...(errors.email ? styles.inputError : {}) }, children: [jsx("span", { style: { marginRight: '12px', opacity: 0.7, color: '#666' }, children: "\u2709" }), jsx("input", { type: "email", style: styles.input, placeholder: "Enter your email", value: formData.email, onChange: (e) => updateField('email', e.target.value), autoCapitalize: "none", autoComplete: "email", disabled: isLoading, required: true })] }), errors.email && jsx("div", { style: styles.errorText, children: errors.email })] }), jsxs("div", { style: styles.inputGroup, children: [jsx("label", { style: styles.inputLabel, children: "Password *" }), jsxs("div", { style: { ...styles.inputContainer, ...(errors.password ? styles.inputError : {}) }, children: [jsx("span", { style: { marginRight: '12px', opacity: 0.7, color: '#666' }, children: "\uD83D\uDD12" }), jsx("input", { type: showPassword ? 'text' : 'password', style: styles.input, placeholder: "Create a password", value: formData.password, onChange: (e) => updateField('password', e.target.value), autoComplete: "new-password", disabled: isLoading, required: true }), jsx("button", { type: "button", style: styles.eyeButton, onClick: () => setShowPassword(!showPassword), disabled: isLoading, children: showPassword ? '👁' : '👁‍🗨' })] }), errors.password && jsx("div", { style: styles.errorText, children: errors.password })] }), jsxs("div", { style: styles.inputGroup, children: [jsx("label", { style: styles.inputLabel, children: "Confirm Password *" }), jsxs("div", { style: { ...styles.inputContainer, ...(errors.confirmPassword ? styles.inputError : {}) }, children: [jsx("span", { style: { marginRight: '12px', opacity: 0.7, color: '#666' }, children: "\uD83D\uDD12" }), jsx("input", { type: showConfirmPassword ? 'text' : 'password', style: styles.input, placeholder: "Confirm your password", value: formData.confirmPassword, onChange: (e) => updateField('confirmPassword', e.target.value), autoComplete: "new-password", disabled: isLoading, required: true }), jsx("button", { type: "button", style: styles.eyeButton, onClick: () => setShowConfirmPassword(!showConfirmPassword), disabled: isLoading, children: showConfirmPassword ? '👁' : '👁‍🗨' })] }), errors.confirmPassword && jsx("div", { style: styles.errorText, children: errors.confirmPassword })] }), jsx("button", { type: "submit", style: {
+                return (jsxs(Fragment, { children: [jsxs("div", { style: styles.logoSection, children: [logo && (typeof logo === 'string' ? (jsx("img", { src: processLogoUrl(logo), alt: `${appName} Logo`, style: styles.logo })) : (logo)), jsx("h1", { style: styles.title, children: "Create Account" }), jsxs("p", { style: styles.subtitle, children: ["Join ", appName, " today"] })] }), jsxs("form", { onSubmit: handleSubmit, children: [errors.general && (jsxs("div", { style: { ...styles.successContainer, backgroundColor: '#fef2f2', borderColor: '#fecaca' }, children: [jsx("span", { style: { color: '#ff4757', fontSize: '20px' }, children: "\u26A0" }), jsx("span", { style: { ...styles.successText, color: '#dc2626' }, children: errors.general })] })), jsxs("div", { style: styles.inputGroup, children: [jsx("label", { style: styles.inputLabel, children: "First Name *" }), jsxs("div", { style: { ...styles.inputContainer, ...(errors.name ? styles.inputError : {}) }, children: [jsx("span", { style: { marginRight: '12px', opacity: 0.7, color: '#666' }, children: "\uD83D\uDC64" }), jsx("input", { type: "text", style: styles.input, placeholder: "Enter your first name", value: formData.name, onChange: (e) => updateField('name', e.target.value), autoComplete: "given-name", disabled: isLoading, required: true })] }), errors.name && jsx("div", { style: styles.errorText, children: errors.name })] }), jsxs("div", { style: styles.inputGroup, children: [jsx("label", { style: styles.inputLabel, children: "Last Name *" }), jsxs("div", { style: { ...styles.inputContainer, ...(errors.lastName ? styles.inputError : {}) }, children: [jsx("span", { style: { marginRight: '12px', opacity: 0.7, color: '#666' }, children: "\uD83D\uDC64" }), jsx("input", { type: "text", style: styles.input, placeholder: "Enter your last name", value: formData.lastName, onChange: (e) => updateField('lastName', e.target.value), autoComplete: "family-name", disabled: isLoading, required: true })] }), errors.lastName && jsx("div", { style: styles.errorText, children: errors.lastName })] }), jsxs("div", { style: styles.inputGroup, children: [jsx("label", { style: styles.inputLabel, children: "Email Address *" }), jsxs("div", { style: { ...styles.inputContainer, ...(errors.email ? styles.inputError : {}) }, children: [jsx("span", { style: { marginRight: '12px', opacity: 0.7, color: '#666' }, children: "\u2709" }), jsx("input", { type: "email", style: styles.input, placeholder: "Enter your email", value: formData.email, onChange: (e) => updateField('email', e.target.value), autoCapitalize: "none", autoComplete: "email", disabled: isLoading, required: true })] }), errors.email && jsx("div", { style: styles.errorText, children: errors.email })] }), jsxs("div", { style: styles.inputGroup, children: [jsx("label", { style: styles.inputLabel, children: "Password *" }), jsxs("div", { style: { ...styles.inputContainer, ...(errors.password ? styles.inputError : {}) }, children: [jsx("span", { style: { marginRight: '12px', opacity: 0.7, color: '#666' }, children: "\uD83D\uDD12" }), jsx("input", { type: showPassword ? 'text' : 'password', style: styles.input, placeholder: "Create a password", value: formData.password, onChange: (e) => updateField('password', e.target.value), autoComplete: "new-password", disabled: isLoading, required: true }), jsx("button", { type: "button", style: styles.eyeButton, onClick: () => setShowPassword(!showPassword), disabled: isLoading, children: showPassword ? '👁' : '👁‍🗨' })] }), errors.password && jsx("div", { style: styles.errorText, children: errors.password })] }), jsxs("div", { style: styles.inputGroup, children: [jsx("label", { style: styles.inputLabel, children: "Confirm Password *" }), jsxs("div", { style: { ...styles.inputContainer, ...(errors.confirmPassword ? styles.inputError : {}) }, children: [jsx("span", { style: { marginRight: '12px', opacity: 0.7, color: '#666' }, children: "\uD83D\uDD12" }), jsx("input", { type: showConfirmPassword ? 'text' : 'password', style: styles.input, placeholder: "Confirm your password", value: formData.confirmPassword, onChange: (e) => updateField('confirmPassword', e.target.value), autoComplete: "new-password", disabled: isLoading, required: true }), jsx("button", { type: "button", style: styles.eyeButton, onClick: () => setShowConfirmPassword(!showConfirmPassword), disabled: isLoading, children: showConfirmPassword ? '👁' : '👁‍🗨' })] }), errors.confirmPassword && jsx("div", { style: styles.errorText, children: errors.confirmPassword })] }), jsx("button", { type: "submit", style: {
                                         ...styles.button,
                                         opacity: isLoading ? 0.8 : 1,
                                         cursor: isLoading ? 'not-allowed' : 'pointer'