@autumnsgrove/groveengine 0.6.4 → 0.7.0

package/dist/server/services/turnstile.js

@@ -0,0 +1,131 @@
+/**
+ * Turnstile Server-Side Verification (Shade)
+ *
+ * Validates Turnstile tokens with Cloudflare's siteverify endpoint.
+ * Part of Grove's Shade AI protection system.
+ */
+const TURNSTILE_VERIFY_URL = 'https://challenges.cloudflare.com/turnstile/v0/siteverify';
+/**
+ * Verify a Turnstile token server-side
+ *
+ * @example
+ * const result = await verifyTurnstileToken({
+ *   token: formData.get('cf-turnstile-response'),
+ *   secretKey: platform.env.TURNSTILE_SECRET_KEY,
+ *   remoteip: request.headers.get('CF-Connecting-IP')
+ * });
+ *
+ * if (!result.success) {
+ *   throw error(403, 'Human verification failed');
+ * }
+ */
+export async function verifyTurnstileToken(options) {
+    const { token, secretKey, remoteip } = options;
+    if (!token) {
+        return {
+            success: false,
+            'error-codes': ['missing-input-response']
+        };
+    }
+    if (!secretKey) {
+        console.error('Turnstile: Missing secret key');
+        return {
+            success: false,
+            'error-codes': ['missing-input-secret']
+        };
+    }
+    const formData = new FormData();
+    formData.append('secret', secretKey);
+    formData.append('response', token);
+    if (remoteip) {
+        formData.append('remoteip', remoteip);
+    }
+    try {
+        const response = await fetch(TURNSTILE_VERIFY_URL, {
+            method: 'POST',
+            body: formData
+        });
+        if (!response.ok) {
+            console.error('Turnstile: Verification request failed', response.status);
+            return {
+                success: false,
+                'error-codes': ['request-failed']
+            };
+        }
+        const result = await response.json();
+        return result;
+    }
+    catch (err) {
+        console.error('Turnstile: Verification error', err);
+        return {
+            success: false,
+            'error-codes': ['network-error']
+        };
+    }
+}
+/**
+ * Cookie name for tracking Turnstile verification status
+ */
+export const TURNSTILE_COOKIE_NAME = 'grove_verified';
+/**
+ * Cookie max age (7 days in seconds)
+ */
+export const TURNSTILE_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+/**
+ * Create the verification cookie value (signed timestamp)
+ * Simple format: timestamp:hash
+ */
+export function createVerificationCookie(secretKey) {
+    const timestamp = Date.now().toString();
+    // Simple hash using the timestamp and a portion of the secret
+    const hash = simpleHash(timestamp + secretKey.slice(0, 16));
+    return `${timestamp}:${hash}`;
+}
+/**
+ * Validate a verification cookie
+ * Returns true if valid and not expired
+ */
+export function validateVerificationCookie(cookie, secretKey, maxAgeMs = TURNSTILE_COOKIE_MAX_AGE * 1000) {
+    if (!cookie)
+        return false;
+    const parts = cookie.split(':');
+    if (parts.length !== 2)
+        return false;
+    const [timestamp, hash] = parts;
+    const timestampNum = parseInt(timestamp, 10);
+    if (isNaN(timestampNum))
+        return false;
+    // Check expiration
+    if (Date.now() - timestampNum > maxAgeMs)
+        return false;
+    // Verify hash
+    const expectedHash = simpleHash(timestamp + secretKey.slice(0, 16));
+    return hash === expectedHash;
+}
+/**
+ * Simple hash function for cookie signing
+ * Not cryptographically secure, but sufficient for cookie validation
+ */
+function simpleHash(str) {
+    let hash = 0;
+    for (let i = 0; i < str.length; i++) {
+        const char = str.charCodeAt(i);
+        hash = (hash << 5) - hash + char;
+        hash = hash & hash; // Convert to 32bit integer
+    }
+    return Math.abs(hash).toString(36);
+}
+/**
+ * Get cookie options for the verification cookie
+ */
+export function getVerificationCookieOptions(domain) {
+    return {
+        path: '/',
+        httpOnly: true,
+        secure: true,
+        sameSite: 'lax',
+        maxAge: TURNSTILE_COOKIE_MAX_AGE,
+        // Set domain to .grove.place to work across subdomains
+        ...(domain ? { domain } : {})
+    };
+}

package/dist/server/services/users.d.ts

@@ -0,0 +1,104 @@
+/**
+ * User Service - D1 User Operations
+ *
+ * Provides utilities for managing authenticated users in D1.
+ * Users are created/updated during auth callback from GroveAuth.
+ *
+ * @example
+ * ```typescript
+ * import { getUserByGroveAuthId, getUserFromSession } from '@autumnsgrove/groveengine/services';
+ *
+ * // Get user by GroveAuth ID (from token)
+ * const user = await getUserByGroveAuthId(db, groveAuthId);
+ *
+ * // Get user from session (validates token first)
+ * const user = await getUserFromSession(db, accessToken, authBaseUrl);
+ * ```
+ */
+/**
+ * User record from the users table
+ */
+export interface User {
+    id: string;
+    groveauth_id: string;
+    email: string;
+    display_name: string | null;
+    avatar_url: string | null;
+    tenant_id: string | null;
+    last_login_at: number | null;
+    login_count: number;
+    is_active: number;
+    created_at: number;
+    updated_at: number;
+}
+/**
+ * Get a user by their GroveAuth ID
+ *
+ * @example
+ * ```typescript
+ * const user = await getUserByGroveAuthId(db, 'groveauth-user-id');
+ * if (user) {
+ *   console.log('User:', user.email);
+ * }
+ * ```
+ */
+export declare function getUserByGroveAuthId(db: D1Database, groveAuthId: string): Promise<User | null>;
+/**
+ * Get a user by their internal ID
+ */
+export declare function getUserById(db: D1Database, id: string): Promise<User | null>;
+/**
+ * Get a user by email address
+ */
+export declare function getUserByEmail(db: D1Database, email: string): Promise<User | null>;
+/**
+ * Get user who owns a specific tenant
+ */
+export declare function getUserByTenantId(db: D1Database, tenantId: string): Promise<User | null>;
+/**
+ * Get user from an access token by validating with GroveAuth
+ *
+ * This function:
+ * 1. Calls GroveAuth /userinfo to validate the token and get user info
+ * 2. Looks up the user in D1 by their groveauth_id
+ * 3. Returns the user if found and active
+ *
+ * @example
+ * ```typescript
+ * const user = await getUserFromSession(db, accessToken, 'https://auth-api.grove.place');
+ * if (!user) {
+ *   return redirect(302, '/auth/login');
+ * }
+ * ```
+ */
+export declare function getUserFromSession(db: D1Database, accessToken: string, authBaseUrl?: string): Promise<User | null>;
+/**
+ * Get user from session without external validation
+ *
+ * Use this when you've already validated the token (e.g., in hooks.server.ts)
+ * and have the GroveAuth user ID (sub claim).
+ *
+ * @example
+ * ```typescript
+ * // In hooks.server.ts after token validation:
+ * const user = await getUserFromValidatedSession(db, tokenInfo.sub);
+ * event.locals.user = user;
+ * ```
+ */
+export declare function getUserFromValidatedSession(db: D1Database, groveAuthId: string): Promise<User | null>;
+/**
+ * Link a user to a tenant (set ownership)
+ */
+export declare function linkUserToTenant(db: D1Database, userId: string, tenantId: string): Promise<number>;
+/**
+ * Update user's display name
+ */
+export declare function updateUserDisplayName(db: D1Database, userId: string, displayName: string): Promise<number>;
+/**
+ * Deactivate a user (soft delete)
+ */
+export declare function deactivateUser(db: D1Database, userId: string): Promise<number>;
+/**
+ * Reactivate a user
+ */
+export declare function reactivateUser(db: D1Database, userId: string): Promise<number>;

package/dist/server/services/users.js

@@ -0,0 +1,158 @@
+/**
+ * User Service - D1 User Operations
+ *
+ * Provides utilities for managing authenticated users in D1.
+ * Users are created/updated during auth callback from GroveAuth.
+ *
+ * @example
+ * ```typescript
+ * import { getUserByGroveAuthId, getUserFromSession } from '@autumnsgrove/groveengine/services';
+ *
+ * // Get user by GroveAuth ID (from token)
+ * const user = await getUserByGroveAuthId(db, groveAuthId);
+ *
+ * // Get user from session (validates token first)
+ * const user = await getUserFromSession(db, accessToken, authBaseUrl);
+ * ```
+ */
+import { queryOne, update } from './database.js';
+// ============================================================================
+// Query Functions
+// ============================================================================
+/**
+ * Get a user by their GroveAuth ID
+ *
+ * @example
+ * ```typescript
+ * const user = await getUserByGroveAuthId(db, 'groveauth-user-id');
+ * if (user) {
+ *   console.log('User:', user.email);
+ * }
+ * ```
+ */
+export async function getUserByGroveAuthId(db, groveAuthId) {
+    return queryOne(db, 'SELECT * FROM users WHERE groveauth_id = ?', [groveAuthId]);
+}
+/**
+ * Get a user by their internal ID
+ */
+export async function getUserById(db, id) {
+    return queryOne(db, 'SELECT * FROM users WHERE id = ?', [id]);
+}
+/**
+ * Get a user by email address
+ */
+export async function getUserByEmail(db, email) {
+    return queryOne(db, 'SELECT * FROM users WHERE email = ?', [email]);
+}
+/**
+ * Get user who owns a specific tenant
+ */
+export async function getUserByTenantId(db, tenantId) {
+    return queryOne(db, 'SELECT * FROM users WHERE tenant_id = ?', [tenantId]);
+}
+// ============================================================================
+// Session Functions
+// ============================================================================
+/**
+ * Get user from an access token by validating with GroveAuth
+ *
+ * This function:
+ * 1. Calls GroveAuth /userinfo to validate the token and get user info
+ * 2. Looks up the user in D1 by their groveauth_id
+ * 3. Returns the user if found and active
+ *
+ * @example
+ * ```typescript
+ * const user = await getUserFromSession(db, accessToken, 'https://auth-api.grove.place');
+ * if (!user) {
+ *   return redirect(302, '/auth/login');
+ * }
+ * ```
+ */
+export async function getUserFromSession(db, accessToken, authBaseUrl = 'https://auth-api.grove.place') {
+    if (!accessToken) {
+        return null;
+    }
+    try {
+        // Validate token with GroveAuth and get user info
+        const response = await fetch(`${authBaseUrl}/userinfo`, {
+            headers: {
+                Authorization: `Bearer ${accessToken}`
+            }
+        });
+        if (!response.ok) {
+            // Don't log 401s as errors - they're expected for expired tokens
+            if (response.status !== 401) {
+                console.warn('[User Service] GroveAuth returned non-OK status:', {
+                    status: response.status,
+                    authBaseUrl
+                });
+            }
+            return null;
+        }
+        const userInfo = (await response.json());
+        // Look up user in D1
+        const user = await getUserByGroveAuthId(db, userInfo.sub);
+        // Return null if user doesn't exist or is inactive
+        if (!user || !user.is_active) {
+            return null;
+        }
+        return user;
+    }
+    catch (error) {
+        // Log auth failures for security monitoring and debugging
+        console.error('[User Service] Session validation failed:', {
+            error: error instanceof Error ? error.message : 'Unknown error',
+            authBaseUrl
+        });
+        return null;
+    }
+}
+/**
+ * Get user from session without external validation
+ *
+ * Use this when you've already validated the token (e.g., in hooks.server.ts)
+ * and have the GroveAuth user ID (sub claim).
+ *
+ * @example
+ * ```typescript
+ * // In hooks.server.ts after token validation:
+ * const user = await getUserFromValidatedSession(db, tokenInfo.sub);
+ * event.locals.user = user;
+ * ```
+ */
+export async function getUserFromValidatedSession(db, groveAuthId) {
+    const user = await getUserByGroveAuthId(db, groveAuthId);
+    if (!user || !user.is_active) {
+        return null;
+    }
+    return user;
+}
+// ============================================================================
+// Update Functions
+// ============================================================================
+/**
+ * Link a user to a tenant (set ownership)
+ */
+export async function linkUserToTenant(db, userId, tenantId) {
+    return update(db, 'users', { tenant_id: tenantId }, 'id = ?', [userId]);
+}
+/**
+ * Update user's display name
+ */
+export async function updateUserDisplayName(db, userId, displayName) {
+    return update(db, 'users', { display_name: displayName }, 'id = ?', [userId]);
+}
+/**
+ * Deactivate a user (soft delete)
+ */
+export async function deactivateUser(db, userId) {
+    return update(db, 'users', { is_active: 0 }, 'id = ?', [userId]);
+}
+/**
+ * Reactivate a user
+ */
+export async function reactivateUser(db, userId) {
+    return update(db, 'users', { is_active: 1 }, 'id = ?', [userId]);
+}

package/dist/styles/README.md

@@ -0,0 +1,50 @@
+# Shared Styles
+
+This directory contains CSS styles that are shared across all Grove sites to maintain visual consistency.
+
+## vine-pattern.css
+
+The `.leaf-pattern` class provides the signature Grove vine background pattern used across the platform.
+
+### Features
+
+- **450x450px repeating SVG pattern** with:
+  - 5 flowing organic vine paths
+  - 8 spiral tendrils
+  - Multiple leaf varieties (ivy, round, slender, fern)
+  - Botanical details (seeds, spores)
+- **Grove green (#22c55e)** from the design system
+- **Automatic dark mode support** with adjusted opacity
+- **Performance-optimized** inline SVG data URI (no HTTP requests)
+
+### Usage
+
+Import in your site's `app.css`:
+
+```css
+@import '@autumnsgrove/groveengine/lib/styles/vine-pattern.css';
+```
+
+Or copy the `.leaf-pattern` class definition directly into your app's CSS.
+
+Then apply the class to your layout:
+
+```svelte
+<div class="min-h-screen leaf-pattern">
+  <!-- Your content -->
+</div>
+```
+
+### Current Sites Using This Pattern
+
+- **landing** - Applied globally via `routes/+layout.svelte`
+- **plant** - Applied globally via `routes/+layout.svelte`
+
+### Customization
+
+To adjust the pattern's appearance, you can modify:
+- **Opacity values** in the SVG (currently 0.04-0.14)
+- **Stroke widths** for vines (currently 0.5-1.5)
+- **Color** (currently #22c55e, Grove green)
+
+Any changes should be synchronized across all sites for consistency.

package/dist/styles/vine-pattern.css

@@ -0,0 +1,24 @@
+/* ═══════════════════════════════════════════════════════════════
+   GROVE VINE PATTERN BACKGROUND
+   Shared across all Grove sites for visual consistency
+   ═══════════════════════════════════════════════════════════════ */
+
+/* Subtle vine pattern background - organic, forest-like
+
+   Features:
+   - 5 flowing vines with organic S-curves
+   - 8 spiral tendrils scattered throughout
+   - Multiple types of leaves (ivy, round, slender, fern)
+   - Floating seeds/spores for botanical authenticity
+   - 450x450px repeating pattern
+   - Uses Grove green (#22c55e) from the design system
+   - Auto-adjusts opacity for light/dark modes
+*/
+
+.leaf-pattern {
+	background-image: url("data:image/svg+xml,%3Csvg width='450' height='450' viewBox='0 0 450 450' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%2322c55e' stroke-linecap='round'%3E%3C!-- Long flowing vine 1 - dramatic S-curve --%3E%3Cpath d='M-30 420 C50 380 30 320 80 260 S150 180 120 120 S180 40 140 -30' stroke-width='1.5' opacity='0.12'/%3E%3C!-- Long flowing vine 2 - opposite sweep --%3E%3Cpath d='M480 380 C400 350 420 280 360 230 S280 160 310 100 S250 30 290 -20' stroke-width='1.4' opacity='0.10'/%3E%3C!-- Diagonal vine crossing --%3E%3Cpath d='M-20 280 C60 250 100 220 160 200 S250 160 320 170 S400 130 470 100' stroke-width='1.2' opacity='0.09'/%3E%3C!-- Vertical accent vine --%3E%3Cpath d='M200 480 C180 420 210 360 190 300 S220 220 200 160 S230 80 210 20' stroke-width='1.1' opacity='0.08'/%3E%3C!-- Wandering vine --%3E%3Cpath d='M350 480 C330 430 360 380 340 320 S380 260 350 200' stroke-width='1' opacity='0.08'/%3E%3C!-- Spiral tendrils scattered --%3E%3Cpath d='M80 260 Q100 250 108 238 Q115 225 105 215 Q95 208 85 215' stroke-width='0.8' opacity='0.10'/%3E%3Cpath d='M120 120 Q140 130 150 120 Q158 108 145 98 Q132 92 125 102' stroke-width='0.7' opacity='0.09'/%3E%3Cpath d='M360 230 Q340 222 330 232 Q322 245 335 255 Q348 262 358 250' stroke-width='0.7' opacity='0.09'/%3E%3Cpath d='M310 100 Q290 92 280 102 Q272 115 288 125' stroke-width='0.6' opacity='0.08'/%3E%3Cpath d='M160 200 Q180 192 188 202 Q195 215 182 225' stroke-width='0.6' opacity='0.08'/%3E%3Cpath d='M190 300 Q210 292 218 305 Q224 320 210 328' stroke-width='0.6' opacity='0.07'/%3E%3Cpath d='M340 320 Q360 328 365 342 Q368 358 352 362' stroke-width='0.6' opacity='0.07'/%3E%3Cpath d='M55 380 Q75 372 82 385 Q88 400 72 408' stroke-width='0.5' opacity='0.06'/%3E%3C/g%3E%3Cg fill='%2322c55e'%3E%3C!-- Pointed ivy leaves --%3E%3Cpath d='M70 300 Q85 280 78 265 Q70 280 55 288 Q70 295 70 300Z' opacity='0.11'/%3E%3Cpath d='M135 145 Q150 128 143 115 Q135 128 120 135 Q135 142 135 145Z' opacity='0.10'/%3E%3Cpath d='M375 255 Q360 240 365 225 Q375 240 390 245 Q375 252 375 255Z' opacity='0.09'/%3E%3Cpath d='M220 180 Q235 165 228 152 Q220 165 205 172 Q220 178 220 180Z' opacity='0.08'/%3E%3C!-- Round soft leaves --%3E%3Cellipse cx='95' cy='210' rx='9' ry='14' transform='rotate(-35 95 210)' opacity='0.10'/%3E%3Cellipse cx='335' cy='145' rx='8' ry='12' transform='rotate(28 335 145)' opacity='0.09'/%3E%3Cellipse cx='175' cy='255' rx='7' ry='11' transform='rotate(-18 175 255)' opacity='0.08'/%3E%3Cellipse cx='280' cy='195' rx='6' ry='10' transform='rotate(40 280 195)' opacity='0.08'/%3E%3Cellipse cx='405' cy='120' rx='7' ry='10' transform='rotate(-25 405 120)' opacity='0.07'/%3E%3C!-- Long slender leaves --%3E%3Cpath d='M145 175 Q152 155 145 135 Q138 155 145 175Z' opacity='0.09'/%3E%3Cpath d='M295 130 Q305 115 298 98 Q288 115 295 130Z' opacity='0.08'/%3E%3Cpath d='M210 275 Q200 258 205 240 Q218 258 210 275Z' opacity='0.08'/%3E%3Cpath d='M365 195 Q375 180 368 162 Q358 180 365 195Z' opacity='0.07'/%3E%3Cpath d='M115 365 Q125 348 118 330 Q108 348 115 365Z' opacity='0.07'/%3E%3C!-- Fern fronds scattered asymmetrically --%3E%3Cg transform='translate(45 365) rotate(-45)' opacity='0.10'%3E%3Cpath d='M0,0 L0,-30' stroke='%2322c55e' stroke-width='0.6' fill='none'/%3E%3Cellipse cx='-5' cy='-7' rx='3.5' ry='6' transform='rotate(-30 -5 -7)'/%3E%3Cellipse cx='5' cy='-12' rx='3.5' ry='6' transform='rotate(30 5 -12)'/%3E%3Cellipse cx='-4' cy='-17' rx='3' ry='5' transform='rotate(-30 -4 -17)'/%3E%3Cellipse cx='4' cy='-22' rx='3' ry='5' transform='rotate(30 4 -22)'/%3E%3Cellipse cx='0' cy='-28' rx='2.5' ry='4'/%3E%3C/g%3E%3Cg transform='translate(390 185) rotate(40)' opacity='0.09'%3E%3Cpath d='M0,0 L0,-28' stroke='%2322c55e' stroke-width='0.6' fill='none'/%3E%3Cellipse cx='-4' cy='-6' rx='3' ry='5' transform='rotate(-25 -4 -6)'/%3E%3Cellipse cx='4' cy='-11' rx='3' ry='5' transform='rotate(25 4 -11)'/%3E%3Cellipse cx='-3' cy='-16' rx='2.5' ry='4' transform='rotate(-25 -3 -16)'/%3E%3Cellipse cx='3' cy='-21' rx='2.5' ry='4' transform='rotate(25 3 -21)'/%3E%3Cellipse cx='0' cy='-26' rx='2' ry='3'/%3E%3C/g%3E%3Cg transform='translate(255 65) rotate(-25)' opacity='0.08'%3E%3Cpath d='M0,0 L0,-25' stroke='%2322c55e' stroke-width='0.5' fill='none'/%3E%3Cellipse cx='-4' cy='-6' rx='2.5' ry='4' transform='rotate(-30 -4 -6)'/%3E%3Cellipse cx='4' cy='-10' rx='2.5' ry='4' transform='rotate(30 4 -10)'/%3E%3Cellipse cx='-3' cy='-15' rx='2' ry='3.5' transform='rotate(-30 -3 -15)'/%3E%3Cellipse cx='3' cy='-20' rx='2' ry='3' transform='rotate(30 3 -20)'/%3E%3C/g%3E%3Cg transform='translate(140 420) rotate(55)' opacity='0.08'%3E%3Cpath d='M0,0 L0,-22' stroke='%2322c55e' stroke-width='0.5' fill='none'/%3E%3Cellipse cx='-3' cy='-5' rx='2' ry='3.5' transform='rotate(-25 -3 -5)'/%3E%3Cellipse cx='3' cy='-9' rx='2' ry='3.5' transform='rotate(25 3 -9)'/%3E%3Cellipse cx='-2' cy='-14' rx='1.5' ry='3' transform='rotate(-25 -2 -14)'/%3E%3Cellipse cx='2' cy='-18' rx='1.5' ry='2.5' transform='rotate(25 2 -18)'/%3E%3C/g%3E%3C!-- Tiny floating seeds/spores --%3E%3Ccircle cx='180' cy='90' r='2' opacity='0.06'/%3E%3Ccircle cx='85' cy='175' r='1.5' opacity='0.05'/%3E%3Ccircle cx='345' cy='290' r='2' opacity='0.06'/%3E%3Ccircle cx='420' cy='200' r='1.5' opacity='0.05'/%3E%3Ccircle cx='260' cy='350' r='2' opacity='0.05'/%3E%3Ccircle cx='40' cy='120' r='1.5' opacity='0.04'/%3E%3Ccircle cx='310' cy='400' r='1.5' opacity='0.04'/%3E%3C/g%3E%3C/svg%3E");
+}
+
+.dark .leaf-pattern {
+	background-image: url("data:image/svg+xml,%3Csvg width='450' height='450' viewBox='0 0 450 450' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%2322c55e' stroke-linecap='round'%3E%3C!-- Long flowing vine 1 - dramatic S-curve --%3E%3Cpath d='M-30 420 C50 380 30 320 80 260 S150 180 120 120 S180 40 140 -30' stroke-width='1.5' opacity='0.14'/%3E%3C!-- Long flowing vine 2 - opposite sweep --%3E%3Cpath d='M480 380 C400 350 420 280 360 230 S280 160 310 100 S250 30 290 -20' stroke-width='1.4' opacity='0.12'/%3E%3C!-- Diagonal vine crossing --%3E%3Cpath d='M-20 280 C60 250 100 220 160 200 S250 160 320 170 S400 130 470 100' stroke-width='1.2' opacity='0.11'/%3E%3C!-- Vertical accent vine --%3E%3Cpath d='M200 480 C180 420 210 360 190 300 S220 220 200 160 S230 80 210 20' stroke-width='1.1' opacity='0.10'/%3E%3C!-- Wandering vine --%3E%3Cpath d='M350 480 C330 430 360 380 340 320 S380 260 350 200' stroke-width='1' opacity='0.10'/%3E%3C!-- Spiral tendrils scattered --%3E%3Cpath d='M80 260 Q100 250 108 238 Q115 225 105 215 Q95 208 85 215' stroke-width='0.8' opacity='0.12'/%3E%3Cpath d='M120 120 Q140 130 150 120 Q158 108 145 98 Q132 92 125 102' stroke-width='0.7' opacity='0.11'/%3E%3Cpath d='M360 230 Q340 222 330 232 Q322 245 335 255 Q348 262 358 250' stroke-width='0.7' opacity='0.11'/%3E%3Cpath d='M310 100 Q290 92 280 102 Q272 115 288 125' stroke-width='0.6' opacity='0.10'/%3E%3Cpath d='M160 200 Q180 192 188 202 Q195 215 182 225' stroke-width='0.6' opacity='0.10'/%3E%3Cpath d='M190 300 Q210 292 218 305 Q224 320 210 328' stroke-width='0.6' opacity='0.09'/%3E%3Cpath d='M340 320 Q360 328 365 342 Q368 358 352 362' stroke-width='0.6' opacity='0.09'/%3E%3Cpath d='M55 380 Q75 372 82 385 Q88 400 72 408' stroke-width='0.5' opacity='0.08'/%3E%3C/g%3E%3Cg fill='%2322c55e'%3E%3C!-- Pointed ivy leaves --%3E%3Cpath d='M70 300 Q85 280 78 265 Q70 280 55 288 Q70 295 70 300Z' opacity='0.13'/%3E%3Cpath d='M135 145 Q150 128 143 115 Q135 128 120 135 Q135 142 135 145Z' opacity='0.12'/%3E%3Cpath d='M375 255 Q360 240 365 225 Q375 240 390 245 Q375 252 375 255Z' opacity='0.11'/%3E%3Cpath d='M220 180 Q235 165 228 152 Q220 165 205 172 Q220 178 220 180Z' opacity='0.10'/%3E%3C!-- Round soft leaves --%3E%3Cellipse cx='95' cy='210' rx='9' ry='14' transform='rotate(-35 95 210)' opacity='0.12'/%3E%3Cellipse cx='335' cy='145' rx='8' ry='12' transform='rotate(28 335 145)' opacity='0.11'/%3E%3Cellipse cx='175' cy='255' rx='7' ry='11' transform='rotate(-18 175 255)' opacity='0.10'/%3E%3Cellipse cx='280' cy='195' rx='6' ry='10' transform='rotate(40 280 195)' opacity='0.10'/%3E%3Cellipse cx='405' cy='120' rx='7' ry='10' transform='rotate(-25 405 120)' opacity='0.09'/%3E%3C!-- Long slender leaves --%3E%3Cpath d='M145 175 Q152 155 145 135 Q138 155 145 175Z' opacity='0.11'/%3E%3Cpath d='M295 130 Q305 115 298 98 Q288 115 295 130Z' opacity='0.10'/%3E%3Cpath d='M210 275 Q200 258 205 240 Q218 258 210 275Z' opacity='0.10'/%3E%3Cpath d='M365 195 Q375 180 368 162 Q358 180 365 195Z' opacity='0.09'/%3E%3Cpath d='M115 365 Q125 348 118 330 Q108 348 115 365Z' opacity='0.09'/%3E%3C!-- Fern fronds scattered asymmetrically --%3E%3Cg transform='translate(45 365) rotate(-45)' opacity='0.12'%3E%3Cpath d='M0,0 L0,-30' stroke='%2322c55e' stroke-width='0.6' fill='none'/%3E%3Cellipse cx='-5' cy='-7' rx='3.5' ry='6' transform='rotate(-30 -5 -7)'/%3E%3Cellipse cx='5' cy='-12' rx='3.5' ry='6' transform='rotate(30 5 -12)'/%3E%3Cellipse cx='-4' cy='-17' rx='3' ry='5' transform='rotate(-30 -4 -17)'/%3E%3Cellipse cx='4' cy='-22' rx='3' ry='5' transform='rotate(30 4 -22)'/%3E%3Cellipse cx='0' cy='-28' rx='2.5' ry='4'/%3E%3C/g%3E%3Cg transform='translate(390 185) rotate(40)' opacity='0.11'%3E%3Cpath d='M0,0 L0,-28' stroke='%2322c55e' stroke-width='0.6' fill='none'/%3E%3Cellipse cx='-4' cy='-6' rx='3' ry='5' transform='rotate(-25 -4 -6)'/%3E%3Cellipse cx='4' cy='-11' rx='3' ry='5' transform='rotate(25 4 -11)'/%3E%3Cellipse cx='-3' cy='-16' rx='2.5' ry='4' transform='rotate(-25 -3 -16)'/%3E%3Cellipse cx='3' cy='-21' rx='2.5' ry='4' transform='rotate(25 3 -21)'/%3E%3Cellipse cx='0' cy='-26' rx='2' ry='3'/%3E%3C/g%3E%3Cg transform='translate(255 65) rotate(-25)' opacity='0.10'%3E%3Cpath d='M0,0 L0,-25' stroke='%2322c55e' stroke-width='0.5' fill='none'/%3E%3Cellipse cx='-4' cy='-6' rx='2.5' ry='4' transform='rotate(-30 -4 -6)'/%3E%3Cellipse cx='4' cy='-10' rx='2.5' ry='4' transform='rotate(30 4 -10)'/%3E%3Cellipse cx='-3' cy='-15' rx='2' ry='3.5' transform='rotate(-30 -3 -15)'/%3E%3Cellipse cx='3' cy='-20' rx='2' ry='3' transform='rotate(30 3 -20)'/%3E%3C/g%3E%3Cg transform='translate(140 420) rotate(55)' opacity='0.10'%3E%3Cpath d='M0,0 L0,-22' stroke='%2322c55e' stroke-width='0.5' fill='none'/%3E%3Cellipse cx='-3' cy='-5' rx='2' ry='3.5' transform='rotate(-25 -3 -5)'/%3E%3Cellipse cx='3' cy='-9' rx='2' ry='3.5' transform='rotate(25 3 -9)'/%3E%3Cellipse cx='-2' cy='-14' rx='1.5' ry='3' transform='rotate(-25 -2 -14)'/%3E%3Cellipse cx='2' cy='-18' rx='1.5' ry='2.5' transform='rotate(25 2 -18)'/%3E%3C/g%3E%3C!-- Tiny floating seeds/spores --%3E%3Ccircle cx='180' cy='90' r='2' opacity='0.08'/%3E%3Ccircle cx='85' cy='175' r='1.5' opacity='0.07'/%3E%3Ccircle cx='345' cy='290' r='2' opacity='0.08'/%3E%3Ccircle cx='420' cy='200' r='1.5' opacity='0.07'/%3E%3Ccircle cx='260' cy='350' r='2' opacity='0.07'/%3E%3Ccircle cx='40' cy='120' r='1.5' opacity='0.06'/%3E%3Ccircle cx='310' cy='400' r='1.5' opacity='0.06'/%3E%3C/g%3E%3C/svg%3E");
+}

package/dist/types/turnstile.d.ts

@@ -0,0 +1,42 @@
+/**
+ * Cloudflare Turnstile Type Declarations
+ *
+ * These types define the Turnstile widget API loaded from
+ * https://challenges.cloudflare.com/turnstile/v0/api.js
+ */
+
+interface TurnstileRenderOptions {
+	sitekey: string;
+	callback?: (token: string) => void;
+	'error-callback'?: (error: string) => void;
+	'expired-callback'?: () => void;
+	theme?: 'light' | 'dark' | 'auto';
+	size?: 'normal' | 'compact';
+	tabindex?: number;
+	action?: string;
+	cData?: string;
+	'response-field'?: boolean;
+	'response-field-name'?: string;
+	'refresh-expired'?: 'auto' | 'manual' | 'never';
+	language?: string;
+	appearance?: 'always' | 'execute' | 'interaction-only';
+	retry?: 'auto' | 'never';
+	'retry-interval'?: number;
+}
+
+interface TurnstileWidget {
+	render(container: HTMLElement | string, options: TurnstileRenderOptions): string;
+	reset(widgetId?: string): void;
+	remove(widgetId: string): void;
+	getResponse(widgetId?: string): string | undefined;
+	isExpired(widgetId?: string): boolean;
+	execute(container?: HTMLElement | string, options?: TurnstileRenderOptions): void;
+}
+
+declare global {
+	interface Window {
+		turnstile?: TurnstileWidget;
+	}
+}
+
+export {};

package/dist/ui/components/forms/TurnstileWidget.svelte

@@ -0,0 +1,111 @@
+<script lang="ts">
+	/**
+	 * TurnstileWidget - Cloudflare Turnstile human verification (Shade)
+	 *
+	 * Usage:
+	 * <TurnstileWidget siteKey={TURNSTILE_SITE_KEY} onverify={(token) => handleToken(token)} />
+	 *
+	 * The widget is invisible in "managed" mode - users only see it when suspicious.
+	 */
+
+	import { onMount, onDestroy } from 'svelte';
+
+	interface Props {
+		siteKey: string;
+		theme?: 'light' | 'dark' | 'auto';
+		size?: 'normal' | 'compact';
+		onverify?: (token: string) => void;
+		onerror?: (error: string) => void;
+		onexpire?: () => void;
+	}
+
+	let {
+		siteKey,
+		theme = 'auto',
+		size = 'normal',
+		onverify,
+		onerror,
+		onexpire
+	}: Props = $props();
+
+	let container: HTMLDivElement;
+	let widgetId: string | null = null;
+
+	// Load the Turnstile script if not already loaded
+	function loadScript(): Promise<void> {
+		return new Promise((resolve, reject) => {
+			if (window.turnstile) {
+				resolve();
+				return;
+			}
+
+			const script = document.createElement('script');
+			script.src = 'https://challenges.cloudflare.com/turnstile/v0/api.js';
+			script.async = true;
+			script.defer = true;
+			script.onload = () => resolve();
+			script.onerror = () => reject(new Error('Failed to load Turnstile script'));
+			document.head.appendChild(script);
+		});
+	}
+
+	function renderWidget() {
+		if (!window.turnstile || !container) return;
+
+		widgetId = window.turnstile.render(container, {
+			sitekey: siteKey,
+			theme,
+			size,
+			callback: (token: string) => {
+				onverify?.(token);
+			},
+			'error-callback': (error: string) => {
+				onerror?.(error);
+			},
+			'expired-callback': () => {
+				onexpire?.();
+			}
+		});
+	}
+
+	onMount(async () => {
+		try {
+			await loadScript();
+			renderWidget();
+		} catch (err) {
+			console.error('Turnstile load error:', err);
+			onerror?.(err instanceof Error ? err.message : 'Failed to load Turnstile');
+		}
+	});
+
+	onDestroy(() => {
+		if (widgetId && window.turnstile) {
+			window.turnstile.remove(widgetId);
+		}
+	});
+
+	// Reset the widget (useful after form submission)
+	export function reset() {
+		if (widgetId && window.turnstile) {
+			window.turnstile.reset(widgetId);
+		}
+	}
+
+	// Get the current token
+	export function getToken(): string | undefined {
+		if (widgetId && window.turnstile) {
+			return window.turnstile.getResponse(widgetId);
+		}
+		return undefined;
+	}
+</script>
+
+<div bind:this={container} class="turnstile-container"></div>
+
+<style>
+	.turnstile-container {
+		display: flex;
+		justify-content: center;
+		min-height: 65px;
+	}
+</style>

package/dist/ui/components/forms/TurnstileWidget.svelte.d.ts

@@ -0,0 +1,14 @@
+interface Props {
+    siteKey: string;
+    theme?: 'light' | 'dark' | 'auto';
+    size?: 'normal' | 'compact';
+    onverify?: (token: string) => void;
+    onerror?: (error: string) => void;
+    onexpire?: () => void;
+}
+declare const TurnstileWidget: import("svelte").Component<Props, {
+    reset: () => void;
+    getToken: () => string | undefined;
+}, "">;
+type TurnstileWidget = ReturnType<typeof TurnstileWidget>;
+export default TurnstileWidget;

package/dist/ui/components/primitives/dialog/dialog-overlay.svelte

@@ -12,7 +12,7 @@
 <DialogPrimitive.Overlay
 	bind:ref
 	class={cn(
-		"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0  fixed inset-0 z-50 bg-black/80",
+		"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50 backdrop-blur-sm",
 		className
 	)}
 	{...restProps}

package/dist/ui/components/primitives/sheet/sheet-overlay.svelte

@@ -14,7 +14,7 @@
 <SheetPrimitive.Overlay
 	bind:ref
 	class={cn(
-		"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0  fixed inset-0 z-50 bg-black/80",
+		"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50 backdrop-blur-sm",
 		className
 	)}
 	{...restProps}