@catalystsoftware/ui 1.0.0

package/components/catalyst-ui/utils/cors-middleware.tsx

@@ -0,0 +1,71 @@
+import { useState, useEffect, useCallback, useRef } from "react";
+
+export function CORSMiddleware() {
+  const handleCORS = useCallback((
+    request: Request,
+    options: CORSOptions
+  ): Response | null => {
+    const origin = request.headers.get('Origin');
+    const method = request.method;
+
+    if (method === 'OPTIONS') {
+      const headers = new Headers();
+      
+      if (typeof options.origin === 'boolean') {
+        headers.set('Access-Control-Allow-Origin', options.origin ? '*' : 'null');
+      } else if (typeof options.origin === 'string') {
+        headers.set('Access-Control-Allow-Origin', options.origin);
+      } else if (Array.isArray(options.origin) && origin) {
+        if (options.origin.includes(origin)) {
+          headers.set('Access-Control-Allow-Origin', origin);
+        }
+      }
+
+      if (options.credentials) {
+        headers.set('Access-Control-Allow-Credentials', 'true');
+      }
+
+      if (options.methods) {
+        headers.set('Access-Control-Allow-Methods', options.methods.join(', '));
+      }
+
+      if (options.headers) {
+        headers.set('Access-Control-Allow-Headers', options.headers.join(', '));
+      }
+
+      return new Response(null, { status: 204, headers });
+    }
+
+    return null;
+  }, []);
+
+  const addCORSHeaders = useCallback((
+    response: Response,
+    options: CORSOptions,
+    requestOrigin?: string
+  ): Response => {
+    const headers = new Headers(response.headers);
+
+    if (typeof options.origin === 'boolean') {
+      headers.set('Access-Control-Allow-Origin', options.origin ? '*' : 'null');
+    } else if (typeof options.origin === 'string') {
+      headers.set('Access-Control-Allow-Origin', options.origin);
+    } else if (Array.isArray(options.origin) && requestOrigin) {
+      if (options.origin.includes(requestOrigin)) {
+        headers.set('Access-Control-Allow-Origin', requestOrigin);
+      }
+    }
+
+    if (options.credentials) {
+      headers.set('Access-Control-Allow-Credentials', 'true');
+    }
+
+    return new Response(response.body, {
+      status: response.status,
+      statusText: response.statusText,
+      headers,
+    });
+  }, []);
+
+  return { handleCORS, addCORSHeaders };
+}

package/components/catalyst-ui/utils/deferred-content.tsx

@@ -0,0 +1,595 @@
+import React, { useState, useRef, useEffect, ReactNode } from 'react';
+import { cn } from '~/components/catalyst-ui';
+import { Loader2 } from 'lucide-react';
+
+export interface DeferredContentProps {
+  children: ReactNode;
+  className?: string;
+  onLoad?: () => void;
+  loading?: boolean;
+  loadingTemplate?: ReactNode;
+  threshold?: number;
+  rootMargin?: string;
+  root?: Element | null;
+}
+
+export function DeferredContent({
+  children,
+  className,
+  onLoad,
+  loading = false,
+  loadingTemplate,
+  threshold = 0,
+  rootMargin = '0px',
+  root = null,
+}: DeferredContentProps) {
+  const [isVisible, setIsVisible] = useState(false);
+  const [hasLoaded, setHasLoaded] = useState(false);
+  const elementRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const element = elementRef.current;
+    if (!element) return;
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const [entry] = entries;
+        if (entry.isIntersecting && !hasLoaded) {
+          setIsVisible(true);
+          setHasLoaded(true);
+          onLoad?.();
+          observer.unobserve(element);
+        }
+      },
+      {
+        threshold,
+        rootMargin,
+        root,
+      }
+    );
+
+    observer.observe(element);
+
+    return () => {
+      if (element) {
+        observer.unobserve(element);
+      }
+    };
+  }, [threshold, rootMargin, root, hasLoaded, onLoad]);
+
+  const defaultLoadingTemplate = (
+    <div className="flex items-center justify-center p-8">
+      <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+    </div>
+  );
+
+  return (
+    <div
+      ref={elementRef}
+      className={cn('min-h-[1px]', className)}
+    >
+      {hasLoaded && !loading ? (
+        children
+      ) : (
+        loadingTemplate || defaultLoadingTemplate
+      )}
+    </div>
+  );
+}
+
+export interface DeferredImageProps {
+  src: string;
+  alt?: string;
+  className?: string;
+  loadingClassName?: string;
+  threshold?: number;
+  rootMargin?: string;
+  onLoad?: () => void;
+}
+
+export function DeferredImage({
+  src,
+  alt = '',
+  className,
+  loadingClassName,
+  threshold = 0,
+  rootMargin = '0px',
+  onLoad,
+}: DeferredImageProps) {
+  const [imageLoaded, setImageLoaded] = useState(false);
+  const [imageError, setImageError] = useState(false);
+
+  const handleImageLoad = () => {
+    setImageLoaded(true);
+    onLoad?.();
+  };
+
+  const handleImageError = () => {
+    setImageError(true);
+  };
+
+  const loadingTemplate = (
+    <div className={cn(
+      'bg-muted animate-pulse rounded-md flex items-center justify-center',
+      'min-h-[200px] w-full',
+      loadingClassName
+    )}>
+      <div className="text-muted-foreground text-sm">Loading...</div>
+    </div>
+  );
+
+  return (
+    <DeferredContent
+      threshold={threshold}
+      rootMargin={rootMargin}
+      loadingTemplate={loadingTemplate}
+    >
+      {imageError ? (
+        <div className={cn(
+          'bg-muted rounded-md flex items-center justify-center',
+          'min-h-[200px] w-full text-muted-foreground',
+          className
+        )}>
+          Failed to load image
+        </div>
+      ) : (
+        <img
+          src={src}
+          alt={alt}
+          className={cn(
+            'transition-opacity duration-300',
+            imageLoaded ? 'opacity-100' : 'opacity-0',
+            className
+          )}
+          onLoad={handleImageLoad}
+          onError={handleImageError}
+        />
+      )}
+    </DeferredContent>
+  );
+}
+
+export interface DeferredTableProps {
+  data: any[];
+  columns: Array<{
+    field: string;
+    header: string;
+    className?: string;
+  }>;
+  className?: string;
+  threshold?: number;
+  rootMargin?: string;
+  onLoad?: () => void;
+}
+
+export function DeferredTable({
+  data,
+  columns,
+  className,
+  threshold = 0,
+  rootMargin = '0px',
+  onLoad,
+}: DeferredTableProps) {
+  const loadingTemplate = (
+    <div className="space-y-4">
+      <div className="h-8 bg-muted animate-pulse rounded" />
+      {Array.from({ length: 5 }).map((_, i) => (
+        <div key={i} className="h-12 bg-muted animate-pulse rounded" />
+      ))}
+    </div>
+  );
+
+  return (
+    <DeferredContent
+      threshold={threshold}
+      rootMargin={rootMargin}
+      loadingTemplate={loadingTemplate}
+      onLoad={onLoad}
+    >
+      <div className={cn('overflow-x-auto', className)}>
+        <table className="w-full border-collapse">
+          <thead>
+            <tr className="border-b border-border">
+              {columns.map((column) => (
+                <th
+                  key={column.field}
+                  className={cn(
+                    'text-left p-4 font-medium text-foreground',
+                    column.className
+                  )}
+                >
+                  {column.header}
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {data.map((row, index) => (
+              <tr
+                key={index}
+                className="border-b border-border hover:bg-muted/50"
+              >
+                {columns.map((column) => (
+                  <td
+                    key={column.field}
+                    className={cn('p-4 text-foreground', column.className)}
+                  >
+                    {row[column.field]}
+                  </td>
+                ))}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </DeferredContent>
+  );
+}
+
+export interface DeferredCardProps {
+  title: string;
+  description?: string;
+  imageUrl?: string;
+  buttonText?: string;
+  secondaryButtonText?: string;
+  onButtonClick?: () => void;
+  onSecondaryButtonClick?: () => void;
+  className?: string;
+  threshold?: number;
+  rootMargin?: string;
+  onLoad?: () => void;
+}
+
+export function DeferredCard({
+  title,
+  description,
+  imageUrl,
+  buttonText,
+  secondaryButtonText,
+  onButtonClick,
+  onSecondaryButtonClick,
+  className,
+  threshold = 0,
+  rootMargin = '0px',
+  onLoad,
+}: DeferredCardProps) {
+  const loadingTemplate = (
+    <div className="bg-background border border-border rounded-lg p-6 space-y-4">
+      <div className="h-6 bg-muted animate-pulse rounded" />
+      <div className="h-4 bg-muted animate-pulse rounded" />
+      <div className="h-4 bg-muted animate-pulse rounded w-2/3" />
+      {imageUrl && <div className="h-48 bg-muted animate-pulse rounded" />}
+      <div className="flex gap-2">
+        <div className="h-10 bg-muted animate-pulse rounded w-24" />
+        {secondaryButtonText && (
+          <div className="h-10 bg-muted animate-pulse rounded w-24" />
+        )}
+      </div>
+    </div>
+  );
+
+  return (
+    <DeferredContent
+      threshold={threshold}
+      rootMargin={rootMargin}
+      loadingTemplate={loadingTemplate}
+      onLoad={onLoad}
+    >
+      <div className={cn(
+        'bg-background border border-border rounded-lg p-6 space-y-4',
+        className
+      )}>
+        <h3 className="text-lg font-semibold text-foreground">{title}</h3>
+        {description && (
+          <p className="text-muted-foreground">{description}</p>
+        )}
+        {imageUrl && (
+          <DeferredImage
+            src={imageUrl}
+            alt={title}
+            className="w-full h-48 object-cover rounded-md"
+          />
+        )}
+        {(buttonText || secondaryButtonText) && (
+          <div className="flex gap-2">
+            {buttonText && (
+              <button
+                onClick={onButtonClick}
+                className="px-4 py-2 bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors"
+              >
+                {buttonText}
+              </button>
+            )}
+            {secondaryButtonText && (
+              <button
+                onClick={onSecondaryButtonClick}
+                className="px-4 py-2 border border-border text-foreground rounded-md hover:bg-muted transition-colors"
+              >
+                {secondaryButtonText}
+              </button>
+            )}
+          </div>
+        )}
+      </div>
+    </DeferredContent>
+  );
+}
+
+
+export default function DeferredContentDemo() {
+  const tableData = [
+    { id: 1, name: 'John Doe', email: 'john@example.com', role: 'Developer' },
+    { id: 2, name: 'Jane Smith', email: 'jane@example.com', role: 'Designer' },
+    { id: 3, name: 'Bob Johnson', email: 'bob@example.com', role: 'Manager' },
+    { id: 4, name: 'Alice Brown', email: 'alice@example.com', role: 'Developer' },
+    { id: 5, name: 'Charlie Wilson', email: 'charlie@example.com', role: 'Designer' },
+  ];
+
+  const tableColumns = [
+    { field: 'id', header: 'ID', className: 'w-16' },
+    { field: 'name', header: 'Name' },
+    { field: 'email', header: 'Email' },
+    { field: 'role', header: 'Role' },
+  ];
+
+  const handleLoad = (section: string) => {
+    console.log(`${section} loaded!`);
+  };
+
+  return (
+    <div className="min-h-screen bg-background">
+      <div className="container mx-auto px-4 py-8 space-y-12">
+        <div className="text-center space-y-4">
+          <h1 className="text-4xl font-bold text-foreground">
+            DeferredContent Demo
+          </h1>
+          <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
+            Scroll down to see different deferred content components load as they come into view.
+            This technique improves page performance by only loading content when needed.
+          </p>
+        </div>
+
+        <div className="h-screen flex items-center justify-center bg-muted/20 rounded-lg">
+          <div className="text-center space-y-4">
+            <h2 className="text-2xl font-semibold text-foreground">
+              Scroll Down to See Deferred Content
+            </h2>
+            <p className="text-muted-foreground">
+              The components below will load when they become visible
+            </p>
+          </div>
+        </div>
+
+        <section className="space-y-6">
+          <h2 className="text-2xl font-bold text-foreground">Basic Deferred Content</h2>
+          <DeferredContent
+            onLoad={() => handleLoad('Basic Content')}
+            className="bg-card border border-border rounded-lg p-8"
+          >
+            <div className="text-center space-y-4">
+              <h3 className="text-xl font-semibold text-foreground">
+                This content was loaded lazily!
+              </h3>
+              <p className="text-muted-foreground">
+                This content only loaded when it became visible in the viewport.
+                This helps improve initial page load performance.
+              </p>
+            </div>
+          </DeferredContent>
+        </section>
+
+        <section className="space-y-6">
+          <h2 className="text-2xl font-bold text-foreground">Deferred Images</h2>
+          <div className="grid md:grid-cols-2 gap-6">
+            <DeferredImage
+              src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=500&h=300&fit=crop"
+              alt="Mountain landscape"
+              className="w-full h-64 object-cover rounded-lg"
+              onLoad={() => handleLoad('Mountain Image')}
+            />
+            <DeferredImage
+              src="https://images.unsplash.com/photo-1441974231531-c6227db76b6e?w=500&h=300&fit=crop"
+              alt="Forest landscape"
+              className="w-full h-64 object-cover rounded-lg"
+              onLoad={() => handleLoad('Forest Image')}
+            />
+          </div>
+        </section>
+
+        <section className="space-y-6">
+          <h2 className="text-2xl font-bold text-foreground">Deferred Table</h2>
+          <DeferredTable
+            data={tableData}
+            columns={tableColumns}
+            className="bg-card border border-border rounded-lg overflow-hidden"
+            onLoad={() => handleLoad('User Table')}
+          />
+        </section>
+
+        <section className="space-y-6">
+          <h2 className="text-2xl font-bold text-foreground">Deferred Cards</h2>
+          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
+            <DeferredCard
+              title="Product Demo"
+              description="Experience our latest product features with this interactive demonstration."
+              imageUrl="https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=400&h=200&fit=crop"
+              buttonText="Try Demo"
+              secondaryButtonText="Learn More"
+              onButtonClick={() => console.log('Demo clicked')}
+              onSecondaryButtonClick={() => console.log('Learn more clicked')}
+              onLoad={() => handleLoad('Product Card')}
+            />
+            
+            <DeferredCard
+              title="Get Started"
+              description="Ready to begin your journey? Follow our comprehensive getting started guide."
+              buttonText="Start Now"
+              onButtonClick={() => console.log('Start clicked')}
+              onLoad={() => handleLoad('Getting Started Card')}
+            />
+            
+            <DeferredCard
+              title="Documentation"
+              description="Explore our complete documentation with examples, API references, and best practices."
+              imageUrl="https://images.unsplash.com/photo-1481627834876-b7833e8f5570?w=400&h=200&fit=crop"
+              buttonText="Read Docs"
+              secondaryButtonText="API Reference"
+              onButtonClick={() => console.log('Docs clicked')}
+              onSecondaryButtonClick={() => console.log('API clicked')}
+              onLoad={() => handleLoad('Documentation Card')}
+            />
+          </div>
+        </section>
+
+        <section className="space-y-6">
+          <h2 className="text-2xl font-bold text-foreground">Custom Loading Template</h2>
+          <DeferredContent
+            onLoad={() => handleLoad('Custom Loading')}
+            loadingTemplate={
+              <div className="bg-card border border-border rounded-lg p-8">
+                <div className="flex items-center justify-center space-x-2">
+                  <div className="w-3 h-3 bg-primary rounded-full animate-bounce"></div>
+                  <div className="w-3 h-3 bg-primary rounded-full animate-bounce" style={{ animationDelay: '0.1s' }}></div>
+                  <div className="w-3 h-3 bg-primary rounded-full animate-bounce" style={{ animationDelay: '0.2s' }}></div>
+                </div>
+                <p className="text-center text-muted-foreground mt-4">
+                  Custom loading animation...
+                </p>
+              </div>
+            }
+          >
+            <div className="bg-card border border-border rounded-lg p-8 text-center space-y-4">
+              <h3 className="text-xl font-semibold text-foreground">
+                Content with Custom Loading
+              </h3>
+              <p className="text-muted-foreground">
+                This section used a custom loading template with bouncing dots animation.
+              </p>
+            </div>
+          </DeferredContent>
+        </section>
+
+        <section className="space-y-6">
+          <h2 className="text-2xl font-bold text-foreground">Advanced Configuration</h2>
+          <div className="grid gap-6">
+            <DeferredContent
+              threshold={0.5}
+              rootMargin="50px"
+              onLoad={() => handleLoad('Advanced Config 1')}
+              className="bg-card border border-border rounded-lg p-6"
+            >
+              <div className="space-y-2">
+                <h3 className="text-lg font-semibold text-foreground">
+                  50% Visible + 50px Margin
+                </h3>
+                <p className="text-sm text-muted-foreground">
+                  threshold: 0.5, rootMargin: "50px"
+                </p>
+                <p className="text-muted-foreground">
+                  This content loads when 50% is visible, with 50px extra margin for early triggering.
+                </p>
+              </div>
+            </DeferredContent>
+
+            <DeferredContent
+              threshold={1.0}
+              onLoad={() => handleLoad('Advanced Config 2')}
+              className="bg-card border border-border rounded-lg p-6"
+            >
+              <div className="space-y-2">
+                <h3 className="text-lg font-semibold text-foreground">
+                  Fully Visible Required
+                </h3>
+                <p className="text-sm text-muted-foreground">
+                  threshold: 1.0
+                </p>
+                <p className="text-muted-foreground">
+                  This content only loads when the entire element is visible in the viewport.
+                </p>
+              </div>
+            </DeferredContent>
+          </div>
+        </section>
+
+        <div className="h-32 flex items-center justify-center bg-muted/20 rounded-lg">
+          <p className="text-muted-foreground text-center">
+            End of demo - Check your console for load events!
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function DeferredContentDemo1() {
+  return (
+    <div className="space-y-8 p-6">
+      <h1>Deferred Content Demo</h1>
+      
+      {/* Basic Deferred Content */}
+      <DeferredContent
+        threshold={0.1}
+        rootMargin="100px"
+        onLoad={() => console.log('Content loaded!')}
+        loadingTemplate={<div>Custom loading...</div>}
+      >
+        <div className="p-6 bg-blue-100 rounded-lg">
+          <h2>This content loads when visible</h2>
+          <p>It uses Intersection Observer to defer loading until needed.</p>
+        </div>
+      </DeferredContent>
+
+      {/* Deferred Image */}
+      <DeferredImage
+        src="https://example.com/large-image.jpg"
+        alt="Large image"
+        className="rounded-lg shadow-lg"
+        loadingClassName="rounded-lg"
+        threshold={0.2}
+        onLoad={() => console.log('Image loaded!')}
+      />
+
+      {/* Deferred Table */}
+      <DeferredTable
+        data={[
+          { id: 1, name: 'John', age: 30 },
+          { id: 2, name: 'Jane', age: 25 }
+        ]}
+        columns={[
+          { field: 'id', header: 'ID', className: 'w-20' },
+          { field: 'name', header: 'Name' },
+          { field: 'age', header: 'Age', className: 'w-20' }
+        ]}
+        threshold={0.3}
+        onLoad={() => console.log('Table loaded!')}
+      />
+
+      {/* Deferred Card */}
+      <DeferredCard
+        title="Product Card"
+        description="This card loads when it enters the viewport"
+        imageUrl="https://example.com/product.jpg"
+        buttonText="Buy Now"
+        secondaryButtonText="Learn More"
+        onButtonClick={() => console.log('Buy clicked')}
+        onSecondaryButtonClick={() => console.log('Learn more clicked')}
+        threshold={0.5}
+        rootMargin="200px"
+        onLoad={() => console.log('Card loaded!')}
+      />
+
+      {/* Multiple deferred items in a grid */}
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+        {[1, 2, 3, 4].map((item) => (
+          <DeferredCard
+            key={item}
+            title={`Card ${item}`}
+            description={`This is card number ${item}`}
+            threshold={0.1}
+            rootMargin="50px"
+          />
+        ))}
+      </div>
+    </div>
+  );
+}

package/components/catalyst-ui/utils/honeypot-middleware.tsx

@@ -0,0 +1,38 @@
+
+import { useState, useEffect, useCallback, useRef } from "react";
+
+export function HoneypotMiddleware() {
+  const createHoneypot = useCallback((config: HoneypotConfig) => {
+    const timestamp = Date.now().toString();
+    const hash = btoa(`${timestamp}-${config.encryptionSeed}`);
+    
+    return {
+      nameField: config.nameFieldName,
+      validFromField: config.validFromFieldName,
+      encryptedValidFrom: hash,
+    };
+  }, []);
+
+  const validateHoneypot = useCallback((
+    formData: FormData, 
+    config: HoneypotConfig
+  ): boolean => {
+    const nameFieldValue = formData.get(config.nameFieldName);
+    const validFromValue = formData.get(config.validFromFieldName);
+    
+    if (nameFieldValue) return false;
+    
+    try {
+      const decrypted = atob(validFromValue as string);
+      const [timestamp] = decrypted.split('-');
+      const submissionTime = Date.now();
+      const honeypotTime = parseInt(timestamp);
+      
+      return submissionTime - honeypotTime > 1000;
+    } catch {
+      return false;
+    }
+  }, []);
+
+  return { createHoneypot, validateHoneypot };
+}