@nextsparkjs/core 0.1.0-beta.75 → 0.1.0-beta.76

package/templates/app/superadmin/subscriptions/page.tsx

@@ -446,10 +446,10 @@ function SubscriptionsPage() {
           onChange={handleSearchChange}
           placeholder="Search by team name or email..."
           className="w-full sm:max-w-xs"
-          data-cy={sel('superadmin.subscriptions.filters.search')}
+          data-cy="subscriptions-search-input"
         />
         <Select value={statusFilter} onValueChange={handleStatusChange}>
-          <SelectTrigger className="w-full sm:w-[140px]" data-cy={sel('superadmin.subscriptions.filters.statusFilter')}>
+          <SelectTrigger className="w-full sm:w-[140px]" data-cy="status-filter">
             <SelectValue placeholder="Status" />
           </SelectTrigger>
           <SelectContent>
@@ -461,7 +461,7 @@ function SubscriptionsPage() {
           </SelectContent>
         </Select>
         <Select value={planFilter} onValueChange={handlePlanChange}>
-          <SelectTrigger className="w-full sm:w-[140px]" data-cy={sel('superadmin.subscriptions.filters.planFilter')}>
+          <SelectTrigger className="w-full sm:w-[140px]" data-cy="plan-filter">
             <SelectValue placeholder="Plan" />
           </SelectTrigger>
           <SelectContent>
@@ -472,7 +472,7 @@ function SubscriptionsPage() {
           </SelectContent>
         </Select>
         <Select value={intervalFilter} onValueChange={handleIntervalChange}>
-          <SelectTrigger className="w-full sm:w-[140px]" data-cy={sel('superadmin.subscriptions.filters.intervalFilter')}>
+          <SelectTrigger className="w-full sm:w-[140px]" data-cy="interval-filter">
             <SelectValue placeholder="Interval" />
           </SelectTrigger>
           <SelectContent>
@@ -486,7 +486,7 @@ function SubscriptionsPage() {
             variant="ghost"
             size="sm"
             onClick={clearAllFilters}
-            data-cy={sel('superadmin.subscriptions.filters.clearButton')}
+            data-cy="clear-filters-btn"
           >
             Clear Filters
           </Button>

package/templates/app/superadmin/team-roles/page.tsx

@@ -29,7 +29,6 @@ import { getFullBillingMatrix } from "@nextsparkjs/core/lib/billing/queries";
 import { RolesPermissionsMatrix } from "@nextsparkjs/core/components/superadmin/tables/RolesPermissionsMatrix";
 import { PlanFeaturesMatrix } from "@nextsparkjs/core/components/superadmin/tables/PlanFeaturesMatrix";
 import { getTemplateOrDefaultClient } from "@nextsparkjs/registries/template-registry.client";
-import { sel } from "@nextsparkjs/core/selectors";
 
 /**
  * Team Roles & Permissions Page
@@ -107,12 +106,12 @@ function TeamRolesPage() {
 
       {/* Tabs for switching between matrices */}
       <Tabs defaultValue="rbac" className="space-y-6">
-        <TabsList className="grid w-full max-w-md grid-cols-2" data-cy={sel('superadmin.teamRoles.tabs.container')}>
-          <TabsTrigger value="rbac" className="flex items-center gap-2" data-cy={sel('superadmin.teamRoles.tabs.rbac')}>
+        <TabsList className="grid w-full max-w-md grid-cols-2">
+          <TabsTrigger value="rbac" className="flex items-center gap-2" data-cy="tab-rbac">
             <Shield className="h-4 w-4" />
             RBAC Matrix
           </TabsTrigger>
-          <TabsTrigger value="plans" className="flex items-center gap-2" data-cy={sel('superadmin.teamRoles.tabs.plans')}>
+          <TabsTrigger value="plans" className="flex items-center gap-2" data-cy="tab-plans">
             <CreditCard className="h-4 w-4" />
             Plan Features
           </TabsTrigger>
@@ -186,7 +185,7 @@ function TeamRolesPage() {
                   <div
                     key={role}
                     className="flex items-center gap-2 px-4 py-2 rounded-lg border bg-card"
-                    data-cy={sel('superadmin.teamRoles.rbac.hierarchy.roleCard', { role })}
+                    data-cy={`role-card-${role}`}
                   >
                     <Badge variant={getRoleBadgeVariant(role)} className="font-semibold">
                       {hierarchy[role] ?? 0}
@@ -345,7 +344,7 @@ function TeamRolesPage() {
                   <div
                     key={plan.slug}
                     className="flex items-center gap-3 px-4 py-2 rounded-lg border bg-card"
-                    data-cy={sel('superadmin.teamRoles.plans.planCard', { slug: plan.slug })}
+                    data-cy={`plan-card-${plan.slug}`}
                   >
                     <Badge
                       variant={

package/templates/app/superadmin/users/[userId]/page.tsx

@@ -39,7 +39,6 @@ import {
 } from "lucide-react";
 import Link from "next/link";
 import { getTemplateOrDefaultClient } from "@nextsparkjs/registries/template-registry.client";
-import { sel } from "@nextsparkjs/core/selectors";
 
 interface TeamMembership {
   teamId: string;
@@ -437,9 +436,9 @@ function UserDetailPage() {
       </Card>
 
       {/* User Metadata Card */}
-      <Card data-cy={sel('superadmin.users.detail.metas.container')}>
+      <Card data-cy="superadmin-user-metas">
         <CardHeader>
-          <CardTitle className="flex items-center gap-2" data-cy={sel('superadmin.users.detail.metas.title')}>
+          <CardTitle className="flex items-center gap-2" data-cy="superadmin-user-metas-title">
             <Database className="h-5 w-5" />
             User Metadata ({userMetas.length})
           </CardTitle>
@@ -449,7 +448,7 @@ function UserDetailPage() {
         </CardHeader>
         <CardContent>
           {userMetas.length === 0 ? (
-            <div className="text-center py-8" data-cy={sel('superadmin.users.detail.metas.empty')}>
+            <div className="text-center py-8" data-cy="superadmin-user-metas-empty">
               <Database className="mx-auto h-12 w-12 text-muted-foreground" />
               <h3 className="mt-4 text-lg font-medium">No metadata</h3>
               <p className="mt-2 text-sm text-muted-foreground">
@@ -458,7 +457,7 @@ function UserDetailPage() {
             </div>
           ) : (
             <div className="rounded-md border">
-              <Table data-cy={sel('superadmin.users.detail.metas.table')}>
+              <Table data-cy="superadmin-user-metas-table">
                 <TableHeader>
                   <TableRow>
                     <TableHead>Key</TableHead>
@@ -471,40 +470,40 @@ function UserDetailPage() {
                 </TableHeader>
                 <TableBody>
                   {userMetas.map((meta) => (
-                    <TableRow key={meta.id} data-cy={sel('superadmin.users.detail.metas.row', { key: meta.metaKey })}>
+                    <TableRow key={meta.id} data-cy={`superadmin-user-meta-row-${meta.metaKey}`}>
                       <TableCell>
-                        <code className="text-sm bg-muted px-1.5 py-0.5 rounded" data-cy={sel('superadmin.users.detail.metas.key', { key: meta.metaKey })}>
+                        <code className="text-sm bg-muted px-1.5 py-0.5 rounded" data-cy={`superadmin-user-meta-key-${meta.metaKey}`}>
                           {meta.metaKey}
                         </code>
                       </TableCell>
                       <TableCell className="max-w-xs">
-                        <pre className="text-xs bg-muted p-2 rounded overflow-auto max-h-20" data-cy={sel('superadmin.users.detail.metas.value', { key: meta.metaKey })}>
+                        <pre className="text-xs bg-muted p-2 rounded overflow-auto max-h-20" data-cy={`superadmin-user-meta-value-${meta.metaKey}`}>
                           {typeof meta.metaValue === "object"
                             ? JSON.stringify(meta.metaValue, null, 2)
                             : String(meta.metaValue)}
                         </pre>
                       </TableCell>
                       <TableCell>
-                        <Badge variant="outline" className="text-xs" data-cy={sel('superadmin.users.detail.metas.type', { key: meta.metaKey })}>
+                        <Badge variant="outline" className="text-xs" data-cy={`superadmin-user-meta-type-${meta.metaKey}`}>
                           {meta.dataType || "json"}
                         </Badge>
                       </TableCell>
                       <TableCell>
                         {meta.isPublic ? (
-                          <Badge variant="default" className="bg-green-100 text-green-700" data-cy={sel('superadmin.users.detail.metas.public', { key: meta.metaKey })}>
+                          <Badge variant="default" className="bg-green-100 text-green-700" data-cy={`superadmin-user-meta-public-${meta.metaKey}`}>
                             Yes
                           </Badge>
                         ) : (
-                          <Badge variant="secondary" data-cy={sel('superadmin.users.detail.metas.public', { key: meta.metaKey })}>No</Badge>
+                          <Badge variant="secondary" data-cy={`superadmin-user-meta-public-${meta.metaKey}`}>No</Badge>
                         )}
                       </TableCell>
                       <TableCell>
                         {meta.isSearchable ? (
-                          <Badge variant="default" className="bg-blue-100 text-blue-700" data-cy={sel('superadmin.users.detail.metas.searchable', { key: meta.metaKey })}>
+                          <Badge variant="default" className="bg-blue-100 text-blue-700" data-cy={`superadmin-user-meta-searchable-${meta.metaKey}`}>
                             Yes
                           </Badge>
                         ) : (
-                          <Badge variant="secondary" data-cy={sel('superadmin.users.detail.metas.searchable', { key: meta.metaKey })}>No</Badge>
+                          <Badge variant="secondary" data-cy={`superadmin-user-meta-searchable-${meta.metaKey}`}>No</Badge>
                         )}
                       </TableCell>
                       <TableCell>

package/templates/app/superadmin/users/page.tsx

@@ -397,7 +397,7 @@ function UsersPage() {
             label="Role"
             allLabel="All Roles"
             showIcon={false}
-            data-cy={sel('superadmin.users.filters.roleFilter')}
+            data-cy="users-role-filter"
           />
         )}
 
@@ -408,7 +408,7 @@ function UsersPage() {
           label="Status"
           allLabel="All Status"
           showIcon={false}
-          data-cy={sel('superadmin.users.filters.statusFilter')}
+          data-cy="users-status-filter"
         />
 
         {hasActiveFilters && (
@@ -416,7 +416,7 @@ function UsersPage() {
             variant="ghost"
             size="sm"
             onClick={clearFilters}
-            data-cy={sel('superadmin.users.filters.clearButton')}
+            data-cy="clear-filters-btn"
           >
             Clear filters
           </Button>

package/dist/templates/app/README.md

@@ -1,39 +0,0 @@
-# NextSpark App Templates
-
-This directory contains EJS templates used to generate the `/app` directory structure in projects using NextSpark.
-
-## Template Variables
-
-Templates have access to the following variables from `nextspark.config.ts`:
-
-- `config.theme` - Active theme name
-- `config.plugins` - Array of enabled plugins
-- `config.features` - Feature flags (billing, teams, superadmin, etc.)
-- `config.app.name` - Application name
-- `config.app.description` - Application description
-
-## Template Files
-
-Files ending in `.ejs` are processed as EJS templates. Other files are copied directly.
-
-## Auto-Generated Header
-
-All generated files include this header:
-
-```
-/**
- * AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
- * Generated by @nextspark/core
- * Regenerate with: npx nextspark generate
- */
-```
-
-## Regeneration
-
-To regenerate the `/app` directory from these templates:
-
-```bash
-npx nextspark generate
-```
-
-> **Note:** To customize app pages, use theme template overrides in `contents/themes/{theme}/templates/` instead of modifying generated files directly.

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

@@ -1,342 +0,0 @@
-'use client'
-
-import { useEffect, useState, useRef } from 'react'
-import { useParams, useRouter } from 'next/navigation'
-import { useAuth } from '@nextsparkjs/core/hooks/useAuth'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@nextsparkjs/core/components/ui/card'
-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 || 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 || 'unknown'}`)
-          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')
-
-  if (authLoading || status === 'loading') {
-    return (
-      <div className="min-h-screen flex items-center justify-center bg-background" data-cy={sel('teams.acceptInvite.loading')}>
-        <Card className="w-full max-w-md">
-          <CardContent className="flex flex-col items-center py-10">
-            <Loader2 className="h-10 w-10 animate-spin text-primary" />
-            <p className="mt-4 text-muted-foreground">Validating invitation...</p>
-          </CardContent>
-        </Card>
-      </div>
-    )
-  }
-
-  return (
-    <div className="min-h-screen flex items-center justify-center bg-background p-4" data-cy={sel('teams.acceptInvite.container')}>
-      <Card className="w-full max-w-md" data-cy={sel('teams.acceptInvite.info')}>
-        <CardHeader className="text-center">
-          <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-primary/10">
-            <Users className="h-8 w-8 text-primary" />
-          </div>
-          <CardTitle className="text-2xl">Team Invitation</CardTitle>
-          <CardDescription>
-            {invitationInfo && (
-              <>You&apos;ve been invited to join <strong data-cy={sel('teams.acceptInvite.teamName')}>{invitationInfo.teamName}</strong></>
-            )}
-          </CardDescription>
-        </CardHeader>
-
-        <CardContent className="space-y-6">
-          {/* Requires Authentication */}
-          {status === 'requires_auth' && invitationInfo && (
-            <div data-cy={sel('teams.acceptInvite.requiresAuth')}>
-              <div className="rounded-lg border p-4 space-y-2">
-                <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">
-                <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" data-cy={sel('teams.acceptInvite.success')}>
-              <CheckCircle className="h-5 w-5 text-green-600" />
-              <AlertTitle className="text-green-800">Welcome to the team!</AlertTitle>
-              <AlertDescription className="text-green-700">
-                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" data-cy={sel('teams.acceptInvite.alreadyMember')}>
-              <CheckCircle className="h-5 w-5 text-blue-600" />
-              <AlertTitle className="text-blue-800">Already a member</AlertTitle>
-              <AlertDescription className="text-blue-700">
-                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>
-          )}
-        </CardContent>
-      </Card>
-    </div>
-  )
-}

package/dist/templates/app/devtools/api/[...path]/page.tsx

@@ -1,36 +0,0 @@
-import { notFound } from 'next/navigation'
-import { ApiRoutesService } from '@nextsparkjs/core/lib/services/api-routes.service'
-import { ApiTester } from '@nextsparkjs/core/components/devtools/api-tester'
-
-interface DevApiDetailPageProps {
-  params: Promise<{ path: string[] }>
-}
-
-/**
- * DevTools API Tester Page (catch-all route)
- *
- * Displays API tester for a specific endpoint.
- * URL format: /devtools/api/v1/users/%5Bid%5D -> path = ['v1', 'users', '%5Bid%5D']
- *
- * Note: Brackets must be URL-encoded in the URL to avoid Next.js treating them
- * as dynamic route segments. We decode them here to match the registry paths.
- */
-export default async function DevApiDetailPage({ params }: DevApiDetailPageProps) {
-  const { path } = await params
-
-  // Decode URL-encoded brackets back to literal brackets
-  // %5B -> [ and %5D -> ]
-  const decodedPath = path.map(segment => decodeURIComponent(segment))
-
-  // Reconstruir el path del API
-  const apiPath = '/api/' + decodedPath.join('/')
-
-  // Buscar el endpoint en el registry
-  const route = ApiRoutesService.getRoute(apiPath)
-
-  if (!route) {
-    notFound()
-  }
-
-  return <ApiTester route={route} basePath={apiPath} />
-}