@nextsparkjs/core 0.1.0-beta.10 → 0.1.0-beta.100

package/dist/templates/app/(auth)/accept-invite/[token]/page.tsx

@@ -0,0 +1,335 @@
+'use client'
+
+import { useEffect, useState, useRef } from 'react'
+import { useParams, useRouter } from 'next/navigation'
+import { useAuth } from '@nextsparkjs/core/hooks/useAuth'
+import { Button } from '@nextsparkjs/core/components/ui/button'
+import { Alert, AlertDescription, AlertTitle } from '@nextsparkjs/core/components/ui/alert'
+import { Loader2, CheckCircle, XCircle, Users, LogIn, UserPlus } from 'lucide-react'
+import { toast } from 'sonner'
+import Link from 'next/link'
+import { sel } from '@nextsparkjs/core/selectors'
+
+type InvitationStatus = 'loading' | 'valid' | 'accepting' | 'accepted' | 'error' | 'expired' | 'not_found' | 'email_mismatch' | 'already_member' | 'requires_auth'
+
+interface InvitationInfo {
+  teamName: string
+  inviterName: string
+  role: string
+  email: string
+}
+
+export default function AcceptInvitePage() {
+  const params = useParams()
+  const router = useRouter()
+  const { user, isLoading: authLoading } = useAuth()
+  const token = params.token as string
+
+  const [status, setStatus] = useState<InvitationStatus>('loading')
+  const [invitationInfo, setInvitationInfo] = useState<InvitationInfo | null>(null)
+  const [errorMessage, setErrorMessage] = useState<string>('')
+  const autoAcceptAttempted = useRef(false)
+
+  // Validate invitation and auto-accept when user is authenticated
+  useEffect(() => {
+    if (authLoading) return
+
+    async function validateAndAccept() {
+      try {
+        // First validate the invitation
+        const response = await fetch(`/api/v1/team-invitations/${token}`)
+        const data = await response.json()
+
+        if (!response.ok) {
+          if (data.code === 'INVITATION_NOT_FOUND') {
+            setStatus('not_found')
+          } else if (data.code === 'INVITATION_EXPIRED') {
+            setStatus('expired')
+          } else {
+            setStatus('error')
+            setErrorMessage(data.error || 'Failed to validate invitation')
+          }
+          return
+        }
+
+        const info = {
+          teamName: data.data.teamName || 'Unknown Team',
+          inviterName: data.data.inviterName || 'Someone',
+          role: data.data.role,
+          email: data.data.email
+        }
+        setInvitationInfo(info)
+
+        // Check if user is logged in
+        if (!user) {
+          setStatus('requires_auth')
+          return
+        }
+
+        // Check email match
+        if (user.email.toLowerCase() !== data.data.email.toLowerCase()) {
+          setStatus('email_mismatch')
+          setErrorMessage(`This invitation was sent to ${data.data.email}, but you are logged in as ${user.email}`)
+          return
+        }
+
+        // Auto-accept the invitation since user is authenticated and email matches
+        if (autoAcceptAttempted.current) return
+        autoAcceptAttempted.current = true
+
+        setStatus('accepting')
+
+        const acceptResponse = await fetch(`/api/v1/team-invitations/${token}/accept`, {
+          method: 'POST',
+          credentials: 'include'
+        })
+
+        const acceptData = await acceptResponse.json()
+
+        if (!acceptResponse.ok) {
+          if (acceptData.code === 'ALREADY_MEMBER') {
+            setStatus('already_member')
+          } else if (acceptData.code === 'EMAIL_MISMATCH') {
+            setStatus('email_mismatch')
+            setErrorMessage(acceptData.error)
+          } else if (acceptData.code === 'INVITATION_EXPIRED') {
+            setStatus('expired')
+          } else {
+            setStatus('error')
+            setErrorMessage(acceptData.error || 'Failed to accept invitation')
+          }
+          return
+        }
+
+        setStatus('accepted')
+        toast.success(`Welcome to ${info.teamName}!`, {
+          description: 'You have successfully joined the team'
+        })
+
+        // Redirect to dashboard after a short delay
+        setTimeout(() => {
+          router.push('/dashboard/settings/teams')
+        }, 1500)
+      } catch {
+        setStatus('error')
+        setErrorMessage('Failed to validate invitation')
+      }
+    }
+
+    validateAndAccept()
+  }, [token, user, authLoading, router])
+
+  // Accept invitation (manual fallback)
+  const handleAccept = async () => {
+    setStatus('accepting')
+
+    try {
+      const response = await fetch(`/api/v1/team-invitations/${token}/accept`, {
+        method: 'POST',
+        credentials: 'include'
+      })
+
+      const data = await response.json()
+
+      if (!response.ok) {
+        if (data.code === 'ALREADY_MEMBER') {
+          setStatus('already_member')
+        } else if (data.code === 'EMAIL_MISMATCH') {
+          setStatus('email_mismatch')
+          setErrorMessage(data.error)
+        } else if (data.code === 'INVITATION_EXPIRED') {
+          setStatus('expired')
+        } else {
+          setStatus('error')
+          setErrorMessage(data.error || 'Failed to accept invitation')
+        }
+        return
+      }
+
+      setStatus('accepted')
+      toast.success(`Welcome to ${invitationInfo?.teamName}!`, {
+        description: 'You have successfully joined the team'
+      })
+
+      // Redirect to dashboard after a short delay
+      setTimeout(() => {
+        router.push('/dashboard/settings/teams')
+      }, 1500)
+    } catch {
+      setStatus('error')
+      setErrorMessage('Failed to accept invitation')
+    }
+  }
+
+  // Build auth URLs with invitation context
+  const buildAuthUrl = (path: string) => {
+    const params = new URLSearchParams({
+      callbackUrl: `/accept-invite/${token}`,
+      fromInvite: 'true',
+    })
+    if (invitationInfo?.email) {
+      params.set('email', invitationInfo.email)
+    }
+    // Pass token for signup to skip email verification
+    if (path === '/signup') {
+      params.set('inviteToken', token)
+    }
+    return `${path}?${params.toString()}`
+  }
+
+  const loginUrl = buildAuthUrl('/login')
+  const signupUrl = buildAuthUrl('/signup')
+
+  // Loading state
+  if (authLoading || status === 'loading') {
+    return (
+      <div className="flex flex-col items-center py-6" data-cy={sel('teams.acceptInvite.loading')}>
+        <Loader2 className="h-10 w-10 animate-spin text-primary" />
+        <p className="mt-4 text-muted-foreground">Validating invitation...</p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-6" data-cy={sel('teams.acceptInvite.container')}>
+      {/* Header with icon */}
+      <div className="text-center" data-cy={sel('teams.acceptInvite.info')}>
+        <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-primary/10">
+          <Users className="h-6 w-6 text-primary" />
+        </div>
+        <h2 className="text-xl font-semibold">Team Invitation</h2>
+        {invitationInfo && (
+          <p className="text-sm text-muted-foreground mt-1">
+            You&apos;ve been invited to join <strong data-cy={sel('teams.acceptInvite.teamName')}>{invitationInfo.teamName}</strong>
+          </p>
+        )}
+      </div>
+
+      {/* Requires Authentication */}
+      {status === 'requires_auth' && invitationInfo && (
+        <div data-cy={sel('teams.acceptInvite.requiresAuth')}>
+          <div className="rounded-lg border p-4 space-y-2 bg-muted/50">
+            <p className="text-sm text-muted-foreground">
+              <strong data-cy={sel('teams.acceptInvite.inviter')}>{invitationInfo.inviterName}</strong> has invited you to join <strong>{invitationInfo.teamName}</strong> as a <strong data-cy={sel('teams.acceptInvite.role')}>{invitationInfo.role}</strong>.
+            </p>
+            <p className="text-sm text-muted-foreground">
+              This invitation was sent to <strong>{invitationInfo.email}</strong>
+            </p>
+          </div>
+
+          <div className="space-y-3 mt-6">
+            <p className="text-sm text-center text-muted-foreground">
+              Please sign in or create an account to accept this invitation.
+            </p>
+            <Button asChild className="w-full" data-cy={sel('teams.acceptInvite.signin')}>
+              <Link href={loginUrl}>
+                <LogIn className="mr-2 h-4 w-4" />
+                Sign In
+              </Link>
+            </Button>
+            <Button asChild variant="outline" className="w-full" data-cy={sel('teams.acceptInvite.signup')}>
+              <Link href={signupUrl}>
+                <UserPlus className="mr-2 h-4 w-4" />
+                Create Account
+              </Link>
+            </Button>
+          </div>
+        </div>
+      )}
+
+      {/* Valid - Ready to Accept */}
+      {status === 'valid' && invitationInfo && (
+        <div data-cy={sel('teams.acceptInvite.valid')}>
+          <div className="rounded-lg border p-4 space-y-2 bg-muted/50">
+            <p className="text-sm text-muted-foreground">
+              <strong>{invitationInfo.inviterName}</strong> has invited you to join <strong>{invitationInfo.teamName}</strong> as a <strong>{invitationInfo.role}</strong>.
+            </p>
+          </div>
+
+          <Button onClick={handleAccept} className="w-full mt-6" data-cy={sel('teams.acceptInvite.accept')}>
+            Accept Invitation
+          </Button>
+        </div>
+      )}
+
+      {/* Accepting */}
+      {status === 'accepting' && (
+        <div className="flex flex-col items-center py-4" data-cy={sel('teams.acceptInvite.accepting')}>
+          <Loader2 className="h-8 w-8 animate-spin text-primary" />
+          <p className="mt-4 text-muted-foreground">Accepting invitation...</p>
+        </div>
+      )}
+
+      {/* Accepted */}
+      {status === 'accepted' && (
+        <Alert className="border-green-200 bg-green-50 dark:bg-green-950/20 dark:border-green-900" data-cy={sel('teams.acceptInvite.success')}>
+          <CheckCircle className="h-5 w-5 text-green-600 dark:text-green-400" />
+          <AlertTitle className="text-green-800 dark:text-green-200">Welcome to the team!</AlertTitle>
+          <AlertDescription className="text-green-700 dark:text-green-300">
+            You&apos;ve successfully joined {invitationInfo?.teamName}. Redirecting to your dashboard...
+          </AlertDescription>
+        </Alert>
+      )}
+
+      {/* Already Member */}
+      {status === 'already_member' && (
+        <Alert className="border-blue-200 bg-blue-50 dark:bg-blue-950/20 dark:border-blue-900" data-cy={sel('teams.acceptInvite.alreadyMember')}>
+          <CheckCircle className="h-5 w-5 text-blue-600 dark:text-blue-400" />
+          <AlertTitle className="text-blue-800 dark:text-blue-200">Already a member</AlertTitle>
+          <AlertDescription className="text-blue-700 dark:text-blue-300">
+            You&apos;re already a member of this team.
+            <Button asChild variant="link" className="p-0 h-auto ml-1">
+              <Link href="/dashboard/settings/teams">Go to Teams</Link>
+            </Button>
+          </AlertDescription>
+        </Alert>
+      )}
+
+      {/* Email Mismatch */}
+      {status === 'email_mismatch' && (
+        <Alert variant="destructive" data-cy={sel('teams.acceptInvite.emailMismatch')}>
+          <XCircle className="h-5 w-5" />
+          <AlertTitle>Email mismatch</AlertTitle>
+          <AlertDescription>
+            {errorMessage}
+            <br />
+            <Button asChild variant="link" className="p-0 h-auto">
+              <Link href={loginUrl}>Sign in with a different account</Link>
+            </Button>
+          </AlertDescription>
+        </Alert>
+      )}
+
+      {/* Not Found */}
+      {status === 'not_found' && (
+        <Alert variant="destructive" data-cy={sel('teams.acceptInvite.notFound')}>
+          <XCircle className="h-5 w-5" />
+          <AlertTitle>Invitation not found</AlertTitle>
+          <AlertDescription>
+            This invitation link is invalid or has already been used. Please contact the team owner for a new invitation.
+          </AlertDescription>
+        </Alert>
+      )}
+
+      {/* Expired */}
+      {status === 'expired' && (
+        <Alert variant="destructive" data-cy={sel('teams.acceptInvite.expired')}>
+          <XCircle className="h-5 w-5" />
+          <AlertTitle>Invitation expired</AlertTitle>
+          <AlertDescription>
+            This invitation has expired. Please contact the team owner for a new invitation.
+          </AlertDescription>
+        </Alert>
+      )}
+
+      {/* Generic Error */}
+      {status === 'error' && (
+        <Alert variant="destructive" data-cy={sel('teams.acceptInvite.error')}>
+          <XCircle className="h-5 w-5" />
+          <AlertTitle>Error</AlertTitle>
+          <AlertDescription>{errorMessage || 'An error occurred. Please try again.'}</AlertDescription>
+        </Alert>
+      )}
+    </div>
+  )
+}

package/dist/templates/app/(auth)/forgot-password/page.tsx

@@ -6,7 +6,7 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { AlertCircle, ArrowLeft, CheckCircle, Loader2, Mail } from 'lucide-react';
 import Link from 'next/link';
 import { useState, useCallback } from 'react';
-import { sel } from '@nextsparkjs/core/lib/test';
+import { sel } from '@nextsparkjs/core/selectors';
 import { useTranslations } from 'next-intl';
 import { useForm } from 'react-hook-form';
 import { Button } from '@nextsparkjs/core/components/ui/button';

package/dist/templates/app/(auth)/reset-password/page.tsx

@@ -19,7 +19,7 @@ import { PasswordInput } from "@nextsparkjs/core/components/ui/password-input";
 import { Alert, AlertDescription } from "@nextsparkjs/core/components/ui/alert";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@nextsparkjs/core/components/ui/card";
 import { getTemplateOrDefaultClient } from '@nextsparkjs/registries/template-registry.client'
-import { createCyId } from '@nextsparkjs/core/lib/test'
+import { sel } from '@nextsparkjs/core/selectors'
 
 function ResetPasswordContent() {
   const searchParams = useSearchParams();
@@ -84,7 +84,7 @@ function ResetPasswordContent() {
 
   if (success) {
     return (
-      <Card className="w-full max-w-md" data-cy={createCyId('reset-password', 'success')}>
+      <Card className="w-full max-w-md" data-cy={sel('auth.resetPassword.success')}>
         <CardContent className="pt-6">
           <div className="text-center space-y-4">
             <div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto">
@@ -96,7 +96,7 @@ function ResetPasswordContent() {
                 Your password has been successfully reset. You can now sign in with your new password.
               </p>
             </div>
-            <Button asChild className="w-full" data-cy={createCyId('reset-password', 'login-link')}>
+            <Button asChild className="w-full" data-cy={sel('auth.resetPassword.loginLink')}>
               <Link href="/login">
                 Sign In Now
               </Link>
@@ -108,7 +108,7 @@ function ResetPasswordContent() {
   }
 
   return (
-    <Card className="w-full max-w-md" data-cy={createCyId('reset-password', 'form')}>
+    <Card className="w-full max-w-md" data-cy={sel('auth.resetPassword.form')}>
       <CardHeader className="space-y-1">
         <CardTitle className="text-2xl font-bold">Set New Password</CardTitle>
         <CardDescription>
@@ -117,7 +117,7 @@ function ResetPasswordContent() {
       </CardHeader>
       <CardContent>
         {error && (
-          <Alert variant="destructive" className="mb-4" data-cy={createCyId('reset-password', 'error')}>
+          <Alert variant="destructive" className="mb-4" data-cy={sel('auth.resetPassword.error')}>
             <AlertCircle className="h-4 w-4" />
             <AlertDescription>
               {error}
@@ -142,7 +142,7 @@ function ResetPasswordContent() {
               placeholder="Create a strong password"
               showRequirements={true}
               password={password || ""}
-              data-cy={createCyId('reset-password', 'password-input')}
+              data-cy={sel('auth.resetPassword.passwordInput')}
             />
             {errors.password && (
               <p className="text-sm text-destructive">{errors.password.message}</p>
@@ -156,7 +156,7 @@ function ResetPasswordContent() {
               id="confirmPassword"
               autoComplete="new-password"
               placeholder="Confirm your new password"
-              data-cy={createCyId('reset-password', 'confirm-input')}
+              data-cy={sel('auth.resetPassword.confirmInput')}
             />
             {errors.confirmPassword && (
               <p className="text-sm text-destructive">{errors.confirmPassword.message}</p>
@@ -167,7 +167,7 @@ function ResetPasswordContent() {
             type="submit"
             disabled={loading || !token}
             className="w-full"
-            data-cy={createCyId('reset-password', 'submit')}
+            data-cy={sel('auth.resetPassword.submit')}
           >
             {loading ? (
               <>
@@ -184,7 +184,7 @@ function ResetPasswordContent() {
           <Link
             href="/login"
             className="text-sm text-primary hover:underline"
-            data-cy={createCyId('reset-password', 'back')}
+            data-cy={sel('auth.resetPassword.back')}
           >
             Back to Login
           </Link>

package/dist/templates/app/(auth)/verify-email/page.tsx

@@ -6,7 +6,7 @@ import { Suspense, useEffect, useState } from "react";
 import { Button } from '@nextsparkjs/core/components/ui/button';
 import { Alert, AlertDescription } from '@nextsparkjs/core/components/ui/alert';
 import { getTemplateOrDefaultClient } from '@nextsparkjs/registries/template-registry.client'
-import { createCyId } from '@nextsparkjs/core/lib/test'
+import { sel } from '@nextsparkjs/core/selectors'
 
 function VerifyEmailContent() {
   const searchParams = useSearchParams();
@@ -116,7 +116,7 @@ function VerifyEmailContent() {
 
   if (status === 'loading') {
     return (
-      <div className="space-y-4" data-cy={createCyId('verify-email', 'loading')}>
+      <div className="space-y-4" data-cy={sel('auth.verifyEmail.loading')}>
         <div className="text-center">
           <h2 className="text-xl font-semibold">Verifying Email</h2>
           <p className="text-sm text-muted-foreground mt-2">Please wait while we verify your email address</p>
@@ -130,7 +130,7 @@ function VerifyEmailContent() {
 
   if (status === 'success') {
     return (
-      <div className="space-y-4" data-cy={createCyId('verify-email', 'success')}>
+      <div className="space-y-4" data-cy={sel('auth.verifyEmail.success')}>
         <div className="text-center">
           <div className="flex justify-center mb-2">
             <CheckCircle className="h-12 w-12 text-primary" />
@@ -148,7 +148,7 @@ function VerifyEmailContent() {
   }
 
   return (
-    <div className="space-y-4" data-cy={createCyId('verify-email', 'error')}>
+    <div className="space-y-4" data-cy={sel('auth.verifyEmail.error')}>
       <div className="text-center">
         <div className="flex justify-center mb-2">
           <AlertCircle className="h-12 w-12 text-destructive" />
@@ -157,15 +157,15 @@ function VerifyEmailContent() {
         <p className="text-sm text-muted-foreground mt-2">We couldn&apos;t verify your email address</p>
       </div>
       {error && (
-        <Alert variant="destructive" data-cy={createCyId('verify-email', 'error-message')}>
+        <Alert variant="destructive" data-cy={sel('auth.verifyEmail.errorMessage')}>
           <AlertDescription>{error}</AlertDescription>
         </Alert>
       )}
       <div className="flex gap-2">
-        <Button onClick={() => router.push('/signup')} variant="outline" className="flex-1" data-cy={createCyId('verify-email', 'back-signup')}>
+        <Button onClick={() => router.push('/signup')} variant="outline" className="flex-1" data-cy={sel('auth.verifyEmail.backSignup')}>
           Back to Sign Up
         </Button>
-        <Button onClick={() => router.push('/login')} className="flex-1" data-cy={createCyId('verify-email', 'go-login')}>
+        <Button onClick={() => router.push('/login')} className="flex-1" data-cy={sel('auth.verifyEmail.goLogin')}>
           Go to Login
         </Button>
       </div>

package/dist/templates/app/(public)/[...slug]/page.tsx

@@ -20,12 +20,23 @@ import {
   matchPathToEntity,
   getEntityBasePath,
 } from '@nextsparkjs/core/lib/entities/schema-generator'
-import { getEntityRegistry } from '@nextsparkjs/core/lib/entities/queries'
+import { getEntityRegistry, setEntityRegistry } from '@nextsparkjs/core/lib/entities/queries'
 import { TemplateService } from '@nextsparkjs/core/lib/services/template.service'
 import { resolvePublicEntityFromUrl } from '@nextsparkjs/core/lib/api/entity/public-resolver'
 import { PublicEntityGrid } from '@nextsparkjs/core/components/public/entities/PublicEntityGrid'
 import type { EntityConfig } from '@nextsparkjs/core/lib/entities/types'
 import type { Metadata } from 'next'
+// Pattern resolution imports
+import { PatternsResolverService } from '@nextsparkjs/core/lib/blocks/patterns-resolver.service'
+import { extractPatternIds, resolvePatternReferences } from '@nextsparkjs/core/lib/blocks/pattern-resolver'
+import type { BlockInstance } from '@nextsparkjs/core/types/blocks'
+import type { PatternReference } from '@nextsparkjs/core/types/pattern-reference'
+// Import registry directly - webpack resolves @nextsparkjs/registries alias at compile time
+import { ENTITY_REGISTRY, ENTITY_METADATA } from '@nextsparkjs/registries/entity-registry'
+
+// Initialize registry at module load time (before any component renders)
+// This ensures the registry is available even if this page loads before the layout
+setEntityRegistry(ENTITY_REGISTRY, ENTITY_METADATA)
 
 /**
  * Convert entity registry to format expected by matchPathToEntity
@@ -47,6 +58,23 @@ interface PageProps {
   searchParams: Promise<{ [key: string]: string | string[] | undefined }>
 }
 
+/**
+ * Base fields that all builder-enabled entities have (from migrations)
+ * These are the minimum fields needed for public page rendering
+ */
+const BASE_PUBLIC_FIELDS = ['id', 'slug', 'title', 'status', 'blocks', 'locale', 'createdAt', 'userId']
+
+/**
+ * Optional SEO fields that may exist on builder entities
+ */
+const SEO_FIELDS = ['seoTitle', 'seoDescription', 'ogImage']
+
+/**
+ * Common optional fields for content entities (posts, articles, etc.)
+ * These are checked dynamically - only included if they exist in entity.fields
+ */
+const OPTIONAL_CONTENT_FIELDS = ['excerpt', 'featuredImage']
+
 interface PublishedItem {
   id: string
   slug: string
@@ -64,6 +92,72 @@ interface PublishedItem {
   ogImage?: string
   locale?: string
   createdAt?: string
+  userId?: string
+}
+
+/**
+ * Quote a field name for PostgreSQL (handles camelCase)
+ */
+function quoteField(field: string): string {
+  return /[A-Z]/.test(field) ? `"${field}"` : field
+}
+
+/**
+ * Build SELECT clause dynamically based on entity configuration
+ * Only includes fields that actually exist in the entity's schema
+ */
+function buildPublicSelectClause(entity: EntityConfig): string {
+  const fields = new Set<string>(BASE_PUBLIC_FIELDS)
+
+  // Add SEO fields (these are standard for builder entities)
+  SEO_FIELDS.forEach(f => fields.add(f))
+
+  // Check entity.fields for optional content fields
+  const entityFieldNames = entity.fields?.map(f => f.name) || []
+  OPTIONAL_CONTENT_FIELDS.forEach(f => {
+    if (entityFieldNames.includes(f)) {
+      fields.add(f)
+    }
+  })
+
+  return Array.from(fields).map(quoteField).join(', ')
+}
+
+/**
+ * Resolve pattern references in blocks array
+ *
+ * Fetches all referenced patterns and expands them inline.
+ * This ensures public pages show the actual pattern content.
+ *
+ * @param blocks - Blocks array which may contain pattern references
+ * @returns Resolved blocks array with patterns expanded
+ */
+async function getResolvedBlocks(
+  blocks: (BlockInstance | PatternReference)[]
+): Promise<BlockInstance[]> {
+  // Extract pattern IDs from blocks array
+  const patternIds = extractPatternIds(blocks)
+
+  // If no patterns referenced, return blocks as-is
+  if (patternIds.length === 0) {
+    return blocks as BlockInstance[]
+  }
+
+  try {
+    // Batch fetch all referenced patterns (only published ones)
+    const patterns = await PatternsResolverService.getByIds(patternIds)
+
+    // Build pattern cache (Map for O(1) lookup)
+    const patternCache = new Map(patterns.map((p) => [p.id, p]))
+
+    // Resolve pattern references and return flattened blocks
+    return resolvePatternReferences(blocks, patternCache)
+  } catch (error) {
+    console.error('[getResolvedBlocks] Failed to resolve patterns:', error)
+    // Fallback: Return blocks without pattern resolution
+    // Pattern references will be skipped gracefully
+    return blocks.filter((block) => !('type' in block && block.type === 'pattern')) as BlockInstance[]
+  }
 }
 
 /**
@@ -79,18 +173,24 @@ function buildTemplatePath(entity: EntityConfig): string {
 
 /**
  * Fetch a published item from the database
+ * Dynamically builds SELECT clause based on entity configuration
+ * to avoid querying non-existent columns
  */
 async function fetchPublishedItem(
-  tableName: string,
+  entity: EntityConfig,
   slug: string
 ): Promise<PublishedItem | null> {
   try {
+    const tableName = entity.tableName || entity.slug
+    const selectClause = buildPublicSelectClause(entity)
+
     const result = await query<PublishedItem>(
-      `SELECT * FROM "${tableName}" WHERE slug = $1 AND status = 'published'`,
+      `SELECT ${selectClause} FROM "${tableName}" WHERE slug = $1 AND status = 'published'`,
       [slug]
     )
     return result.rows[0] || null
-  } catch {
+  } catch (error) {
+    console.error(`[fetchPublishedItem] Error fetching ${entity.slug}:`, error)
     return null
   }
 }
@@ -122,7 +222,7 @@ export async function generateMetadata({
     }
 
     // Metadata from database
-    const item = await fetchPublishedItem(entity.tableName || entity.slug, slug)
+    const item = await fetchPublishedItem(entity, slug)
     if (item) {
       return {
         title: item.seoTitle || `${item.title} | Boilerplate`,
@@ -209,12 +309,18 @@ export default async function DynamicPublicPage({
     }
 
     // No template override - use default rendering
-    const item = await fetchPublishedItem(entity.tableName || entity.slug, slug)
+    const item = await fetchPublishedItem(entity, slug)
 
     if (!item) {
       notFound()
     }
 
+    // Resolve pattern references before rendering
+    // This expands pattern blocks inline for public display
+    const resolvedBlocks = await getResolvedBlocks(
+      item.blocks as (BlockInstance | PatternReference)[]
+    )
+
     // Default rendering with PageRenderer
     return (
       <main
@@ -228,7 +334,7 @@ export default async function DynamicPublicPage({
             id: item.id,
             title: item.title,
             slug: item.slug,
-            blocks: item.blocks || [],
+            blocks: resolvedBlocks,
             locale: item.locale || 'en',
           }}
         />