@nextsparkjs/core 0.1.0-beta.13 → 0.1.0-beta.131

package/dist/templates/app/dashboard/settings/profile/page.tsx

@@ -61,7 +61,7 @@ import {
 } from 'lucide-react'
 import { profileSchema, ProfileFormData } from '@nextsparkjs/core/lib/validation'
 import { countries, timezones } from '@nextsparkjs/core/lib/countries-timezones'
-import { createTestId, createCyId } from '@nextsparkjs/core/lib/test'
+import { sel } from '@nextsparkjs/core/selectors'
 import { useTranslations } from 'next-intl'
 import { getTemplateOrDefaultClient } from '@nextsparkjs/registries/template-registry.client'
 
@@ -221,12 +221,10 @@ function ProfilePage() {
 
   if (isLoading) {
     return (
-      <div 
+      <div
         className="flex items-center justify-center py-12"
         role="status"
         aria-label={t('profile.loading.aria')}
-        {...createTestId('profile', 'loading') && { 'data-testid': createTestId('profile', 'loading') }}
-        {...createCyId('profile', 'loading') && { 'data-cy': createCyId('profile', 'loading') }}
       >
         <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" aria-hidden="true" />
         <span className="sr-only">{t('profile.loading.text')}</span>
@@ -236,12 +234,10 @@ function ProfilePage() {
 
   if (error) {
     return (
-      <Alert 
+      <Alert
         className="max-w-md"
         variant="destructive"
         role="alert"
-        {...createTestId('profile', 'error') && { 'data-testid': createTestId('profile', 'error') }}
-        {...createCyId('profile', 'error') && { 'data-cy': createCyId('profile', 'error') }}
       >
         <AlertCircle className="h-4 w-4" aria-hidden="true" />
         <AlertDescription>
@@ -254,48 +250,38 @@ function ProfilePage() {
   return (
     <>
       {/* MANDATORY: Screen reader announcements */}
-      <div 
-        aria-live="polite" 
+      <div
+        aria-live="polite"
         aria-atomic="true"
         className="sr-only"
-        {...createTestId('profile', 'status', 'message') && { 'data-testid': createTestId('profile', 'status', 'message') }}
       >
         {statusMessage}
       </div>
 
-      <div 
+      <div
         className="max-w-4xl space-y-6"
-        {...createTestId('profile', 'container') && { 'data-testid': createTestId('profile', 'container') }}
-        {...createCyId('profile', 'main') && { 'data-cy': createCyId('profile', 'main') }}
+        data-cy={sel('settings.profile.container')}
       >
         {/* Header */}
-        <header 
-          {...createTestId('profile', 'header') && { 'data-testid': createTestId('profile', 'header') }}
-          {...createCyId('profile', 'header') && { 'data-cy': createCyId('profile', 'header') }}
-        >
-          <h1 
+        <header>
+          <h1
             className="text-2xl font-bold"
             id="profile-heading"
-            {...createTestId('profile', 'title') && { 'data-testid': createTestId('profile', 'title') }}
           >
             {t('profile.title')}
           </h1>
-          <p 
-            className="text-muted-foreground mt-1"
-            {...createTestId('profile', 'description') && { 'data-testid': createTestId('profile', 'description') }}
-          >
+          <p className="text-muted-foreground mt-1">
             {t('profile.description')}
           </p>
         </header>
 
         {/* Success Alert */}
         {updateSuccess && (
-          <Alert 
+          <Alert
             className="border-green-200 bg-green-50 text-green-800"
             role="status"
             aria-live="polite"
-            {...createTestId('profile', 'success', 'alert') && { 'data-testid': createTestId('profile', 'success', 'alert') }}
-            {...createCyId('profile', 'success') && { 'data-cy': createCyId('profile', 'success') }}
+            data-cy={sel('settings.profile.successMessage')}
           >
             <CheckCircle2 className="h-4 w-4 text-green-600" aria-hidden="true" />
             <AlertDescription>
@@ -306,12 +292,10 @@ function ProfilePage() {
 
         {/* Error Alert */}
         {updateProfileMutation.error && (
-          <Alert 
+          <Alert
             variant="destructive"
             role="alert"
             aria-live="assertive"
-            {...createTestId('profile', 'error', 'alert') && { 'data-testid': createTestId('profile', 'error', 'alert') }}
-            {...createCyId('profile', 'error-alert') && { 'data-cy': createCyId('profile', 'error-alert') }}
           >
             <AlertCircle className="h-4 w-4" aria-hidden="true" />
             <AlertDescription>
@@ -321,33 +305,27 @@ function ProfilePage() {
         )}
 
         {/* Single Column Layout */}
-        <Card 
+        <Card
           className="max-w-4xl"
-          {...createTestId('profile', 'form', 'card') && { 'data-testid': createTestId('profile', 'form', 'card') }}
-          {...createCyId('profile', 'form') && { 'data-cy': createCyId('profile', 'form') }}
+          data-cy={sel('settings.profile.form')}
         >
             <CardHeader>
-              <CardTitle 
+              <CardTitle
                 className="flex items-center gap-2"
                 id="profile-form-title"
-                {...createTestId('profile', 'form', 'title') && { 'data-testid': createTestId('profile', 'form', 'title') }}
               >
                 <User className="h-5 w-5" aria-hidden="true" />
                 {t('profile.form.title')}
               </CardTitle>
-              <CardDescription
-                {...createTestId('profile', 'form', 'description') && { 'data-testid': createTestId('profile', 'form', 'description') }}
-              >
+              <CardDescription>
                 {t('profile.form.description')}
               </CardDescription>
             </CardHeader>
             <CardContent>
-              <form 
-                onSubmit={handleSubmit(onSubmit)} 
+              <form
+                onSubmit={handleSubmit(onSubmit)}
                 className="space-y-6"
                 aria-labelledby="profile-form-title"
-                {...createTestId('profile', 'form', 'element') && { 'data-testid': createTestId('profile', 'form', 'element') }}
-                {...createCyId('profile', 'form-element') && { 'data-cy': createCyId('profile', 'form-element') }}
               >
               <div className="grid gap-4 sm:grid-cols-2">
                 <div className="space-y-2">
@@ -431,8 +409,6 @@ function ProfilePage() {
                         setValue('language', value)
                       }
                     }}
-                    {...createTestId('profile', 'language', 'select') && { 'data-testid': createTestId('profile', 'language', 'select') }}
-                    {...createCyId('profile', 'language-select') && { 'data-cy': createCyId('profile', 'language-select') }}
                   >
                     <SelectTrigger>
                       <div className="flex items-center gap-2">
@@ -514,8 +490,6 @@ function ProfilePage() {
                         role="combobox"
                         aria-expanded={timezoneOpen}
                         className="w-full justify-between"
-                        {...createTestId('profile', 'timezone', 'select') && { 'data-testid': createTestId('profile', 'timezone', 'select') }}
-                        {...createCyId('profile', 'timezone-select') && { 'data-cy': createCyId('profile', 'timezone-select') }}
                       >
                         <div className="flex items-center gap-2">
                           <Clock className="h-4 w-4 text-muted-foreground" aria-hidden="true" />
@@ -579,8 +553,7 @@ function ProfilePage() {
                   disabled={isSubmitting || updateProfileMutation.isPending}
                   aria-describedby="submit-help"
                   className="w-full md:w-auto"
-                  {...createTestId('profile', 'submit', 'button') && { 'data-testid': createTestId('profile', 'submit', 'button') }}
-                  {...createCyId('profile', 'submit') && { 'data-cy': createCyId('profile', 'submit') }}
+                  data-cy={sel('settings.profile.submitButton')}
                 >
                   {(isSubmitting || updateProfileMutation.isPending) ? (
                     <>
@@ -611,8 +584,6 @@ function ProfilePage() {
                       aria-expanded={advancedOpen}
                       aria-controls="advanced-options"
                       aria-label={advancedOpen ? t('profile.advanced.closeLabel') : t('profile.advanced.openLabel')}
-                      {...createTestId('profile', 'advanced', 'toggle') && { 'data-testid': createTestId('profile', 'advanced', 'toggle') }}
-                      {...createCyId('profile', 'advanced-toggle') && { 'data-cy': createCyId('profile', 'advanced-toggle') }}
                     >
                       {t('profile.advanced.title')}
                       {advancedOpen ? (
@@ -623,36 +594,28 @@ function ProfilePage() {
                     </Button>
                   
                     {advancedOpen && (
-                      <div 
+                      <div
                         id="advanced-options"
                         className="mt-4 space-y-4 border-t pt-4"
-                        {...createTestId('profile', 'advanced', 'section') && { 'data-testid': createTestId('profile', 'advanced', 'section') }}
-                        {...createCyId('profile', 'advanced-section') && { 'data-cy': createCyId('profile', 'advanced-section') }}
                       >
                         <div className="space-y-2">
-                          <h4 
+                          <h4
                             className="text-sm font-medium text-destructive"
                             id="danger-zone-heading"
-                            {...createTestId('profile', 'danger', 'heading') && { 'data-testid': createTestId('profile', 'danger', 'heading') }}
                           >
                             {t('profile.danger.title')}
                           </h4>
-                          <p 
-                            className="text-xs text-muted-foreground"
-                            {...createTestId('profile', 'danger', 'warning') && { 'data-testid': createTestId('profile', 'danger', 'warning') }}
-                          >
+                          <p className="text-xs text-muted-foreground">
                             {t('profile.danger.warning')}
                           </p>
                         
                         <Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
                             <DialogTrigger asChild>
-                              <Button 
-                                variant="destructive" 
+                              <Button
+                                variant="destructive"
                                 className="w-full gap-2"
                                 disabled={deleteAccountMutation.isPending}
                                 aria-describedby="danger-zone-heading"
-                                {...createTestId('profile', 'delete', 'trigger') && { 'data-testid': createTestId('profile', 'delete', 'trigger') }}
-                                {...createCyId('profile', 'delete-account') && { 'data-cy': createCyId('profile', 'delete-account') }}
                               >
                                 <Trash2 className="h-4 w-4" aria-hidden="true" />
                                 {t('profile.danger.deleteButton')}

package/dist/templates/app/dashboard/settings/security/loading.tsx

@@ -0,0 +1,8 @@
+import { SkeletonSecurityPage } from '@nextsparkjs/core/components/ui/skeleton-settings'
+import { getTemplateOrDefault } from '@nextsparkjs/core/lib/template-resolver'
+
+function SecurityLoading() {
+  return <SkeletonSecurityPage />
+}
+
+export default getTemplateOrDefault('app/dashboard/settings/security/loading.tsx', SecurityLoading)

package/dist/templates/app/dashboard/settings/security/page.tsx

@@ -32,7 +32,6 @@ import {
   Save,
   Loader2
 } from 'lucide-react'
-import { createTestId, createCyId } from '@nextsparkjs/core/lib/test'
 import { useTranslations } from 'next-intl'
 import { useUserWithMetaSettings } from '@nextsparkjs/core/hooks/useUserSettings'
 import { SecurityPageSkeleton } from '@nextsparkjs/core/components/settings/SettingsPageSkeleton'
@@ -195,46 +194,28 @@ function SecurityPage() {
   return (
     <>
       {/* MANDATORY: Screen reader announcements */}
-      <div 
-        aria-live="polite" 
+      <div
+        aria-live="polite"
         aria-atomic="true"
         className="sr-only"
-        {...createTestId('security', 'status', 'message') && { 'data-testid': createTestId('security', 'status', 'message') }}
       >
         {statusMessage}
       </div>
 
-      <div 
-        className="max-w-4xl"
-        {...createTestId('security', 'container') && { 'data-testid': createTestId('security', 'container') }}
-        {...createCyId('security', 'main') && { 'data-cy': createCyId('security', 'main') }}
-      >
+      <div className="max-w-4xl">
         <div className="space-y-6">
           {/* Header */}
-          <header 
-            {...createTestId('security', 'header') && { 'data-testid': createTestId('security', 'header') }}
-            {...createCyId('security', 'header') && { 'data-cy': createCyId('security', 'header') }}
-          >
-            <h1 
-              className="text-2xl font-bold"
-              id="security-heading"
-              {...createTestId('security', 'title') && { 'data-testid': createTestId('security', 'title') }}
-            >
+          <header>
+            <h1 className="text-2xl font-bold" id="security-heading">
               {t('security.title')}
             </h1>
-            <p 
-              className="text-muted-foreground mt-1"
-              {...createTestId('security', 'description') && { 'data-testid': createTestId('security', 'description') }}
-            >
+            <p className="text-muted-foreground mt-1">
               {t('security.description')}
             </p>
           </header>
 
           {/* Main Security Settings Card */}
-          <Card
-            {...createTestId('security', 'main', 'card') && { 'data-testid': createTestId('security', 'main', 'card') }}
-            {...createCyId('security', 'main') && { 'data-cy': createCyId('security', 'main') }}
-          >
+          <Card>
             <CardHeader>
               <CardTitle>{t('security.main.title')}</CardTitle>
               <CardDescription>
@@ -271,8 +252,6 @@ function SecurityPage() {
                         onCheckedChange={handleTwoFactorToggle}
                         aria-label={twoFactorEnabled ? t('security.twoFactor.ariaEnabled') : t('security.twoFactor.ariaDisabled')}
                         aria-describedby="2fa-description"
-                        {...createTestId('security', '2fa', 'switch') && { 'data-testid': createTestId('security', '2fa', 'switch') }}
-                        {...createCyId('security', '2fa-toggle') && { 'data-cy': createCyId('security', '2fa-toggle') }}
                       />
                     </div>
                   </div>
@@ -327,8 +306,6 @@ function SecurityPage() {
                       onCheckedChange={handleLoginAlertsToggle}
                       aria-label={loginAlertsEnabled ? t('security.alerts.ariaEnabled') : t('security.alerts.ariaDisabled')}
                       aria-describedby="alerts-description"
-                      {...createTestId('security', 'alerts', 'switch') && { 'data-testid': createTestId('security', 'alerts', 'switch') }}
-                      {...createCyId('security', 'alerts-toggle') && { 'data-cy': createCyId('security', 'alerts-toggle') }}
                     />
                   </div>
                 </div>
@@ -336,12 +313,10 @@ function SecurityPage() {
 
               {/* Botón de Guardar */}
               <div className="flex justify-end pt-6 border-t border-muted">
-                <Button 
+                <Button
                   onClick={handleSaveSettings}
                   disabled={!hasUnsavedChanges || isUpdating || isLoadingUser}
                   className="min-w-[120px]"
-                  {...createTestId('security', 'save', 'button') && { 'data-testid': createTestId('security', 'save', 'button') }}
-                  {...createCyId('security', 'save-button') && { 'data-cy': createCyId('security', 'save-button') }}
                 >
                   {isUpdating ? (
                     <>
@@ -363,10 +338,7 @@ function SecurityPage() {
           <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
 
             {/* Sesiones Activas */}
-            <Card
-              {...createTestId('security', 'sessions', 'card') && { 'data-testid': createTestId('security', 'sessions', 'card') }}
-              {...createCyId('security', 'sessions') && { 'data-cy': createCyId('security', 'sessions') }}
-            >
+            <Card>
               <CardHeader>
                 <CardTitle className="flex items-center gap-2">
                   <Monitor className="h-5 w-5" />
@@ -379,11 +351,9 @@ function SecurityPage() {
               <CardContent>
                 <div className="space-y-4">
                   {activeSessions.map((session) => (
-                    <div 
-                      key={session.id} 
+                    <div
+                      key={session.id}
                       className="p-4 border border-muted/40 rounded-lg space-y-3"
-                      {...createTestId('security', 'session', session.id) && { 'data-testid': createTestId('security', 'session', session.id) }}
-                      {...createCyId('security', `session-${session.id}`) && { 'data-cy': createCyId('security', `session-${session.id}`) }}
                       role="article"
                       aria-label={t('security.sessions.sessionAriaLabel', { device: session.device, status: session.current ? t('security.sessions.currentSession') : t('security.sessions.activeSession') })}
                     >
@@ -407,12 +377,10 @@ function SecurityPage() {
                           <div className="shrink-0 ml-3">
                             <Dialog>
                               <DialogTrigger asChild>
-                                <Button 
-                                  variant="outline" 
+                                <Button
+                                  variant="outline"
                                   size="sm"
                                   aria-label={t('security.sessions.terminateAriaLabel', { device: session.device })}
-                                  {...createTestId('security', 'terminate', session.id) && { 'data-testid': createTestId('security', 'terminate', session.id) }}
-                                  {...createCyId('security', `terminate-${session.id}`) && { 'data-cy': createCyId('security', `terminate-${session.id}`) }}
                                 >
                                   <X className="h-4 w-4 mr-1" />
                                   {t('security.sessions.terminate')}
@@ -475,11 +443,9 @@ function SecurityPage() {
               <CardContent>
                 <div className="space-y-3">
                   {loginHistory.map((login) => (
-                    <div 
-                      key={login.id} 
+                    <div
+                      key={login.id}
                       className="p-3 border border-muted/40 rounded-lg space-y-2"
-                      {...createTestId('security', 'login', login.id) && { 'data-testid': createTestId('security', 'login', login.id) }}
-                      {...createCyId('security', `login-${login.id}`) && { 'data-cy': createCyId('security', `login-${login.id}`) }}
                       role="article"
                       aria-label={t('security.loginHistory.attemptAriaLabel', { status: login.success ? t('security.loginHistory.successBadge').toLowerCase() : t('security.loginHistory.failBadge').toLowerCase(), location: login.location })}
                     >
@@ -518,12 +484,10 @@ function SecurityPage() {
                   ))}
                 </div>
                 <div className="mt-4 text-center">
-                  <Button 
-                    variant="outline" 
+                  <Button
+                    variant="outline"
                     size="sm"
                     aria-label={t('security.loginHistory.viewHistoryAriaLabel')}
-                    {...createTestId('security', 'view', 'history') && { 'data-testid': createTestId('security', 'view', 'history') }}
-                    {...createCyId('security', 'view-history') && { 'data-cy': createCyId('security', 'view-history') }}
                   >
                     {t('security.loginHistory.viewComplete')}
                   </Button>

package/dist/templates/app/dashboard/settings/teams/loading.tsx

@@ -0,0 +1,8 @@
+import { SkeletonTeamsPage } from '@nextsparkjs/core/components/ui/skeleton-settings'
+import { getTemplateOrDefault } from '@nextsparkjs/core/lib/template-resolver'
+
+function TeamsLoading() {
+  return <SkeletonTeamsPage />
+}
+
+export default getTemplateOrDefault('app/dashboard/settings/teams/loading.tsx', TeamsLoading)

package/dist/templates/app/dashboard/settings/teams/page.tsx

@@ -2,7 +2,7 @@
 
 import { useState } from 'react'
 import { useTranslations } from 'next-intl'
-import { Users, Plus, Settings, ChevronRight, Crown, Shield, Eye } from 'lucide-react'
+import { Users, Plus, Settings, ChevronRight, Crown, Shield, Eye, Loader2 } from 'lucide-react'
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@nextsparkjs/core/components/ui/card'
 import { Button } from '@nextsparkjs/core/components/ui/button'
 import { Badge } from '@nextsparkjs/core/components/ui/badge'
@@ -13,7 +13,8 @@ import { useTeamsConfig } from '@nextsparkjs/core/hooks/useTeamsConfig'
 import { TeamMembersList } from '@nextsparkjs/core/components/teams/TeamMembersList'
 import { TeamPendingInvitations } from '@nextsparkjs/core/components/teams/TeamPendingInvitations'
 import { CreateTeamDialog } from '@nextsparkjs/core/components/teams/CreateTeamDialog'
-import { createTestId, createCyId } from '@nextsparkjs/core/lib/test'
+import { InlineEditableField } from '@nextsparkjs/core/components/teams/InlineEditableField'
+import { sel } from '@nextsparkjs/core/selectors'
 import { TeamRole } from '@nextsparkjs/core/lib/teams/types'
 import { getTemplateOrDefaultClient } from '@nextsparkjs/registries/template-registry.client'
 
@@ -57,12 +58,12 @@ function TeamsSettingsPage() {
   if (isLoading) {
     return (
       <div
-        className="flex items-center justify-center py-12"
+        className="flex flex-col items-center justify-center py-12 gap-3"
         role="status"
         aria-label={tTeams('messages.loading')}
-        {...createTestId('teams-settings', 'loading') && { 'data-testid': createTestId('teams-settings', 'loading') }}
-        {...createCyId('teams-settings', 'loading') && { 'data-cy': createCyId('teams-settings', 'loading') }}
+        data-cy={sel('settings.teams.loading')}
       >
+        <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
         <div className="text-sm text-muted-foreground">
           {tTeams('messages.loading')}
         </div>
@@ -74,35 +75,24 @@ function TeamsSettingsPage() {
     <>
       <div
         className="max-w-4xl space-y-6"
-        {...createTestId('teams-settings', 'container') && { 'data-testid': createTestId('teams-settings', 'container') }}
-        {...createCyId('teams-settings', 'main') && { 'data-cy': createCyId('teams-settings', 'main') }}
+        data-cy={sel('settings.teams.container')}
       >
         {/* Header */}
-        <header
-          {...createTestId('teams-settings', 'header') && { 'data-testid': createTestId('teams-settings', 'header') }}
-          {...createCyId('teams-settings', 'header') && { 'data-cy': createCyId('teams-settings', 'header') }}
-        >
+        <header data-cy={sel('settings.teams.header')}>
           <h1
             className="text-2xl font-bold"
             id="teams-settings-heading"
-            {...createTestId('teams-settings', 'title') && { 'data-testid': createTestId('teams-settings', 'title') }}
           >
             {t('teams.title')}
           </h1>
-          <p
-            className="text-muted-foreground mt-1"
-            {...createTestId('teams-settings', 'description') && { 'data-testid': createTestId('teams-settings', 'description') }}
-          >
+          <p className="text-muted-foreground mt-1">
             {t('teams.description')}
           </p>
         </header>
 
         {/* Single-user mode: show simplified view */}
         {isSingleUserMode && currentTeam && (
-          <Card
-            {...createTestId('teams-settings', 'single-user-card') && { 'data-testid': createTestId('teams-settings', 'single-user-card') }}
-            {...createCyId('teams-settings', 'single-user') && { 'data-cy': createCyId('teams-settings', 'single-user') }}
-          >
+          <Card data-cy={sel('settings.teams.singleUserMode')}>
             <CardHeader>
               <div className="flex items-center gap-2">
                 <Users className="h-5 w-5" aria-hidden="true" />
@@ -131,10 +121,7 @@ function TeamsSettingsPage() {
 
         {/* Teams List Card - only show if not single-user mode */}
         {!isSingleUserMode && (
-        <Card
-          {...createTestId('teams-settings', 'list-card') && { 'data-testid': createTestId('teams-settings', 'list-card') }}
-          {...createCyId('teams-settings', 'teams-list') && { 'data-cy': createCyId('teams-settings', 'teams-list') }}
-        >
+        <Card data-cy={sel('settings.teams.list.container')}>
           <CardHeader>
             <div className="flex items-center justify-between">
               <div className="flex items-center gap-2">
@@ -213,17 +200,29 @@ function TeamsSettingsPage() {
 
         {/* Selected Team Details - only show if not single-user mode */}
         {!isSingleUserMode && selectedMembership && (
-          <Card
-            {...createTestId('teams-settings', 'team-details') && { 'data-testid': createTestId('teams-settings', 'team-details') }}
-            {...createCyId('teams-settings', 'team-details') && { 'data-cy': createCyId('teams-settings', 'team-details') }}
-          >
+          <Card data-cy={sel('settings.teams.list.details', { id: selectedMembership.team.id })}>
             <CardHeader>
               <div className="flex items-center gap-2">
                 <Settings className="h-5 w-5" aria-hidden="true" />
-                <CardTitle>{selectedMembership.team.name}</CardTitle>
+                <CardTitle className="flex-1">
+                  <InlineEditableField
+                    value={selectedMembership.team.name}
+                    fieldType="name"
+                    teamId={selectedMembership.team.id}
+                    placeholder={tTeams('createTeam.namePlaceholder')}
+                    disabled={selectedMembership.role !== 'owner'}
+                  />
+                </CardTitle>
               </div>
-              <CardDescription>
-                {selectedMembership.team.description || t('teams.manageTeamMembers')}
+              <CardDescription className="mt-2">
+                <InlineEditableField
+                  value={selectedMembership.team.description}
+                  fieldType="description"
+                  teamId={selectedMembership.team.id}
+                  placeholder={tTeams('createTeam.descriptionPlaceholder')}
+                  multiline={true}
+                  disabled={selectedMembership.role !== 'owner'}
+                />
               </CardDescription>
             </CardHeader>
             <CardContent className="space-y-6">

package/dist/templates/app/dashboard/settings/teams/permissions/page.tsx

@@ -4,6 +4,7 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from '@nextsparkjs/core/comp
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@nextsparkjs/core/components/ui/card'
 // Use PermissionService which reads from the build-time generated registry
 import { PermissionService } from '@nextsparkjs/core/lib/services/permission.service'
+import { getTemplateOrDefault } from '@nextsparkjs/core/lib/template-resolver'
 
 /**
  * Team Permissions Page
@@ -11,7 +12,7 @@ import { PermissionService } from '@nextsparkjs/core/lib/services/permission.ser
  * Displays a visual permissions matrix showing what each team role can do.
  * Organized by categories with tabs for easy navigation.
  */
-export default function TeamPermissionsPage() {
+function TeamPermissionsPage() {
   const t = useTranslations('permissions')
 
   // Get all unique categories from registry
@@ -90,3 +91,5 @@ function RoleCard({ role }: { role: 'owner' | 'admin' | 'member' | 'viewer' }) {
     </div>
   )
 }
+
+export default getTemplateOrDefault('app/dashboard/settings/teams/permissions/page.tsx', TeamPermissionsPage)

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

@@ -0,0 +1,33 @@
+import { ApiRoutesService } from "@nextsparkjs/core/lib/services/api-routes.service"
+import { ApiExplorer } from "@nextsparkjs/core/components/devtools"
+
+interface Props {
+  params: Promise<{ endpoint?: string[] }>
+}
+
+/**
+ * Developer API Explorer Page
+ *
+ * Postman-like interface for exploring and testing API endpoints.
+ * Supports deep linking via URL: /devtools/api/{METHOD}/{path}
+ *
+ * Examples:
+ * - /devtools/api                              → No selection
+ * - /devtools/api/GET/api/v1/customers         → GET /api/v1/customers selected
+ * - /devtools/api/POST/api/v1/billing/checkout → POST /api/v1/billing/checkout
+ */
+export default async function DevToolsApiPage({ params }: Props) {
+  const { endpoint } = await params
+  const routesByCategory = ApiRoutesService.getRoutesGroupedByCategory()
+
+  // Parse initial selection from URL
+  // endpoint = ['GET', 'api', 'v1', 'customers'] or undefined
+  let initialEndpoint: { method: string; path: string } | null = null
+  if (endpoint && endpoint.length >= 2) {
+    const method = endpoint[0] // GET, POST, etc.
+    const path = '/' + endpoint.slice(1).join('/') // /api/v1/customers
+    initialEndpoint = { method, path }
+  }
+
+  return <ApiExplorer routes={routesByCategory} initialEndpoint={initialEndpoint} />
+}

package/dist/templates/app/devtools/api/layout.tsx

@@ -0,0 +1,44 @@
+/**
+ * API Explorer Layout
+ *
+ * Full-width layout for the API Explorer page.
+ * Uses negative margins to break out of the parent container's padding
+ * and centering (mx-auto).
+ *
+ * The parent layout has: container mx-auto p-6 max-w-7xl
+ * We need to break out of ALL these constraints to use the full available width.
+ *
+ * Structure:
+ * - DevTools sidebar: w-64 (256px / 16rem)
+ * - Main content: flex-1 (fills remaining space)
+ *   - Container: mx-auto p-6 max-w-7xl (centered, padded, max 1280px)
+ *     - This layout: breaks out to fill full main content area
+ */
+export default function ApiExplorerLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  // Use relative positioning to break out of the centered container
+  // margin-left: -50vw + 50% + sidebar/2 adjustment positions at the left edge
+  // width: calc(100vw - sidebar) fills to the right edge
+  return (
+    <div
+      className="h-[calc(100vh-4rem)]"
+      style={{
+        // Position at the left edge of the main content area (right after sidebar)
+        position: 'relative',
+        left: '50%',
+        transform: 'translateX(-50%)',
+        width: 'calc(100vw - 16rem)', // 100vw minus DevTools sidebar (w-64 = 16rem)
+        maxWidth: 'none',
+        marginLeft: 0,
+        marginRight: 0,
+        marginTop: '-1.5rem', // Negate top padding
+        marginBottom: '-1.5rem', // Negate bottom padding
+      }}
+    >
+      {children}
+    </div>
+  )
+}