@nextsparkjs/core 0.1.0-beta.8 → 0.1.0-beta.82

package/templates/app/dashboard/settings/notifications/page.tsx

@@ -16,7 +16,7 @@ import {
   Save,
   Loader2
 } from 'lucide-react'
-import { createTestId, createCyId } from '@nextsparkjs/core/lib/test'
+import { sel } from '@nextsparkjs/core/selectors'
 import { useTranslations } from 'next-intl'
 import { useUserWithMetaSettings } from '@nextsparkjs/core/hooks/useUserSettings'
 import { NotificationsPageSkeleton } from '@nextsparkjs/core/components/settings/SettingsPageSkeleton'
@@ -268,37 +268,28 @@ function NotificationsPage() {
   return (
     <>
       {/* MANDATORY: Screen reader announcements */}
-      <div 
-        aria-live="polite" 
+      <div
+        aria-live="polite"
         aria-atomic="true"
         className="sr-only"
-        {...createTestId('notifications', 'status', 'message') && { 'data-testid': createTestId('notifications', 'status', 'message') }}
       >
         {statusMessage}
       </div>
 
-      <div 
+      <div
         className="max-w-4xl"
-        {...createTestId('notifications', 'container') && { 'data-testid': createTestId('notifications', 'container') }}
-        {...createCyId('notifications', 'main') && { 'data-cy': createCyId('notifications', 'main') }}
+        data-cy={sel('settings.notifications.container')}
       >
         <div className="space-y-6">
           {/* Header */}
-          <header 
-            {...createTestId('notifications', 'header') && { 'data-testid': createTestId('notifications', 'header') }}
-            {...createCyId('notifications', 'header') && { 'data-cy': createCyId('notifications', 'header') }}
-          >
-            <h1 
+          <header>
+            <h1
               className="text-2xl font-bold"
               id="notifications-heading"
-              {...createTestId('notifications', 'title') && { 'data-testid': createTestId('notifications', 'title') }}
             >
               {t('notifications.title')}
             </h1>
-            <p 
-              className="text-muted-foreground mt-1"
-              {...createTestId('notifications', 'description') && { 'data-testid': createTestId('notifications', 'description') }}
-            >
+            <p className="text-muted-foreground mt-1">
               {t('notifications.description')}
             </p>
           </header>
@@ -343,8 +334,7 @@ function NotificationsPage() {
                         setHasUnsavedChanges(true)
                       }}
                       aria-label={pushNotificationsEnabled ? t('notifications.channels.push.ariaEnabled') : t('notifications.channels.push.ariaDisabled')}
-                      {...createTestId('notifications', 'push', 'master') && { 'data-testid': createTestId('notifications', 'push', 'master') }}
-                      {...createCyId('notifications', 'push-master') && { 'data-cy': createCyId('notifications', 'push-master') }}
+                      data-cy={sel('settings.notifications.pushToggle')}
                     />
                   </div>
                 </div>
@@ -372,27 +362,21 @@ function NotificationsPage() {
 
             {/* Tipos de Notificaciones */}
             {notificationTypes.map((type, index) => (
-              <div 
-                key={index} 
+              <div
+                key={index}
                 className="space-y-6"
-                {...createTestId('notifications', 'category', type.category.toLowerCase().replace(/\s+/g, '-')) && { 'data-testid': createTestId('notifications', 'category', type.category.toLowerCase().replace(/\s+/g, '-')) }}
-                {...createCyId('notifications', type.category.toLowerCase().replace(/\s+/g, '-')) && { 'data-cy': createCyId('notifications', type.category.toLowerCase().replace(/\s+/g, '-')) }}
+                data-cy={sel('settings.notifications.category.container', { category: type.category.toLowerCase().replace(/\s+/g, '-') })}
               >
-                <h3 
-                  className="text-lg font-semibold flex items-center gap-2"
-                  {...createTestId('notifications', 'category', 'title') && { 'data-testid': createTestId('notifications', 'category', 'title') }}
-                >
+                <h3 className="text-lg font-semibold flex items-center gap-2">
                   {type.icon}
                   {type.category}
                 </h3>
                 
                 <div className="space-y-6">
                   {type.notifications.map((notification) => (
-                    <div 
-                      key={notification.id} 
+                    <div
+                      key={notification.id}
                       className="grid grid-cols-1 md:grid-cols-2 gap-6 items-center"
-                      {...createTestId('notifications', 'item', notification.id) && { 'data-testid': createTestId('notifications', 'item', notification.id) }}
-                      {...createCyId('notifications', `item-${notification.id}`) && { 'data-cy': createCyId('notifications', `item-${notification.id}`) }}
                     >
                       <div className="space-y-1">
                         <div className="flex items-center gap-2">
@@ -419,8 +403,6 @@ function NotificationsPage() {
                               disabled={notification.required}
                               onCheckedChange={() => handleNotificationToggle(notification.id, 'email')}
                               aria-label={t('notifications.labels.emailAriaLabel', { title: notification.title, status: notification.email ? t('notifications.labels.enabled') : t('notifications.labels.disabled') })}
-                              {...createTestId('notifications', notification.id, 'email') && { 'data-testid': createTestId('notifications', notification.id, 'email') }}
-                              {...createCyId('notifications', `${notification.id}-email`) && { 'data-cy': createCyId('notifications', `${notification.id}-email`) }}
                             />
                           </div>
                           
@@ -433,8 +415,6 @@ function NotificationsPage() {
                               disabled={notification.required || !pushNotificationsEnabled}
                               onCheckedChange={() => handleNotificationToggle(notification.id, 'push')}
                               aria-label={t('notifications.labels.pushAriaLabel', { title: notification.title, status: (notification.push && pushNotificationsEnabled) ? t('notifications.labels.enabled') : t('notifications.labels.disabled') })}
-                              {...createTestId('notifications', notification.id, 'push') && { 'data-testid': createTestId('notifications', notification.id, 'push') }}
-                              {...createCyId('notifications', `${notification.id}-push`) && { 'data-cy': createCyId('notifications', `${notification.id}-push`) }}
                             />
                           </div>
                         </div>
@@ -452,12 +432,11 @@ function NotificationsPage() {
 
             {/* 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('notifications', 'save', 'button') && { 'data-testid': createTestId('notifications', 'save', 'button') }}
-                {...createCyId('notifications', 'save-button') && { 'data-cy': createCyId('notifications', 'save-button') }}
+                data-cy={sel('settings.notifications.submitButton')}
               >
                 {isUpdating ? (
                   <>

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

@@ -1,6 +1,6 @@
 'use client'
 
-import { createTestId, createCyId } from '@nextsparkjs/core/lib/test'
+import { sel } from '@nextsparkjs/core/selectors'
 import { useTranslations } from 'next-intl'
 import Link from 'next/link'
 import { useMemo } from 'react'
@@ -36,21 +36,18 @@ function SettingsPage() {
   return (
     <div
       className="max-w-2xl"
-      {...createTestId('settings', 'overview', 'container') && { 'data-testid': createTestId('settings', 'overview', 'container') }}
-      {...createCyId('settings', 'overview') && { 'data-cy': createCyId('settings', 'overview') }}
+      data-cy={sel('settings.overview.container')}
     >
       <div className="space-y-6">
         <header>
           <h2
             className="text-2xl font-bold"
             id="settings-overview-heading"
-            {...createTestId('settings', 'overview', 'title') && { 'data-testid': createTestId('settings', 'overview', 'title') }}
           >
             {t('overview.title')}
           </h2>
           <p
             className="text-muted-foreground mt-2"
-            {...createTestId('settings', 'overview', 'description') && { 'data-testid': createTestId('settings', 'overview', 'description') }}
           >
             {t('overview.description')}
           </p>
@@ -68,8 +65,7 @@ function SettingsPage() {
                 key={page.key}
                 href={`/dashboard/settings/${page.key}`}
                 className="block p-6 rounded-lg border border-border bg-card hover:bg-accent transition-colors group"
-                {...createTestId('settings', 'overview', page.key) && { 'data-testid': createTestId('settings', 'overview', page.key) }}
-                {...createCyId('settings', `overview-${page.key}`) && { 'data-cy': createCyId('settings', `overview-${page.key}`) }}
+                data-cy={sel('settings.overview.card', { key: page.key })}
               >
                 <div className="flex items-start gap-4">
                   <div className="flex-shrink-0">

package/templates/app/dashboard/settings/password/loading.tsx

@@ -0,0 +1,5 @@
+import { SkeletonPasswordPage } from '@nextsparkjs/core/components/ui/skeleton-settings'
+
+export default function PasswordLoading() {
+  return <SkeletonPasswordPage />
+}

package/templates/app/dashboard/settings/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 { Checkbox } from "@nextsparkjs/core/components/ui/checkbox";
-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'
 
@@ -106,44 +106,39 @@ function UpdatePasswordPage() {
     return (
       <>
         {/* MANDATORY: Screen reader announcements */}
-        <div 
-          aria-live="polite" 
+        <div
+          aria-live="polite"
           aria-atomic="true"
           className="sr-only"
-          {...createTestId('password', 'status', 'message') && { 'data-testid': createTestId('password', 'status', 'message') }}
         >
           {statusMessage}
         </div>
 
-        <div 
+        <div
           className="max-w-4xl"
-          {...createTestId('password', 'success', 'container') && { 'data-testid': createTestId('password', 'success', 'container') }}
-          {...createCyId('password', 'success') && { 'data-cy': createCyId('password', 'success') }}
+          data-cy={sel('settings.password.successMessage')}
         >
           <div className="space-y-6">
-            <div 
+            <div
               className="text-center space-y-4"
               role="status"
               aria-live="polite"
             >
-              <div 
+              <div
                 className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto"
                 role="img"
                 aria-label={t('password.success.aria')}
-                {...createTestId('password', 'success', 'icon') && { 'data-testid': createTestId('password', 'success', 'icon') }}
               >
                 <CheckCircle className="w-8 h-8 text-green-600" aria-hidden="true" />
               </div>
               <div className="space-y-2">
-                <h1 
+                <h1
                   className="text-2xl font-bold"
-                  {...createTestId('password', 'success', 'title') && { 'data-testid': createTestId('password', 'success', 'title') }}
                 >
                   {t('password.success.title')}
                 </h1>
-                <p 
+                <p
                   className="text-muted-foreground"
-                  {...createTestId('password', 'success', 'description') && { 'data-testid': createTestId('password', 'success', 'description') }}
                 >
                   {t('password.success.description')}
                 </p>
@@ -158,79 +153,64 @@ function UpdatePasswordPage() {
   return (
     <>
       {/* MANDATORY: Screen reader announcements */}
-      <div 
-        aria-live="polite" 
+      <div
+        aria-live="polite"
         aria-atomic="true"
         className="sr-only"
-        {...createTestId('password', 'status', 'message') && { 'data-testid': createTestId('password', 'status', 'message') }}
       >
         {statusMessage}
       </div>
 
-      <div 
+      <div
         className="max-w-4xl"
-        {...createTestId('password', 'container') && { 'data-testid': createTestId('password', 'container') }}
-        {...createCyId('password', 'main') && { 'data-cy': createCyId('password', 'main') }}
+        data-cy={sel('settings.password.container')}
       >
         <div className="space-y-6">
           {/* Header */}
-          <header 
-            {...createTestId('password', 'header') && { 'data-testid': createTestId('password', 'header') }}
-            {...createCyId('password', 'header') && { 'data-cy': createCyId('password', 'header') }}
-          >
-            <h1 
+          <header>
+            <h1
               className="text-2xl font-bold"
               id="password-heading"
-              {...createTestId('password', 'title') && { 'data-testid': createTestId('password', 'title') }}
             >
               {t('password.title')}
             </h1>
-            <p 
+            <p
               className="text-muted-foreground mt-1"
-              {...createTestId('password', 'description') && { 'data-testid': createTestId('password', 'description') }}
             >
               {t('password.description')}
             </p>
           </header>
 
           <Card
-            {...createTestId('password', 'form', 'card') && { 'data-testid': createTestId('password', 'form', 'card') }}
-            {...createCyId('password', 'form') && { 'data-cy': createCyId('password', 'form') }}
+            data-cy={sel('settings.password.form')}
           >
             <CardHeader>
-              <CardTitle 
+              <CardTitle
                 id="password-form-title"
-                {...createTestId('password', 'form', 'title') && { 'data-testid': createTestId('password', 'form', 'title') }}
               >
                 {t('password.form.title')}
               </CardTitle>
-              <CardDescription
-                {...createTestId('password', 'form', 'description') && { 'data-testid': createTestId('password', 'form', 'description') }}
-              >
+              <CardDescription>
                 {t('password.form.description')}
               </CardDescription>
             </CardHeader>
             <CardContent>
               {error && (
-                <Alert 
-                  variant="destructive" 
+                <Alert
+                  variant="destructive"
                   className="mb-4"
                   role="alert"
                   aria-live="assertive"
-                  {...createTestId('password', 'error', 'alert') && { 'data-testid': createTestId('password', 'error', 'alert') }}
-                  {...createCyId('password', 'error') && { 'data-cy': createCyId('password', 'error') }}
                 >
                   <AlertCircle className="h-4 w-4" aria-hidden="true" />
                   <AlertDescription>{error}</AlertDescription>
                 </Alert>
               )}
 
-              <form 
-                onSubmit={handleSubmit(onSubmit)} 
+              <form
+                onSubmit={handleSubmit(onSubmit)}
                 className="space-y-6"
                 aria-labelledby="password-form-title"
-                {...createTestId('password', 'form', 'element') && { 'data-testid': createTestId('password', 'form', 'element') }}
-                {...createCyId('password', 'form-element') && { 'data-cy': createCyId('password', 'form-element') }}
               >
               <div className="space-y-2">
                 <Label htmlFor="currentPassword">{t('password.form.currentPassword')}</Label>
@@ -241,8 +221,7 @@ function UpdatePasswordPage() {
                     placeholder={t('password.form.currentPasswordPlaceholder')}
                     aria-required="true"
                     aria-describedby={errors.currentPassword ? "currentPassword-error" : undefined}
-                    {...createTestId('password', 'current', 'input') && { 'data-testid': createTestId('password', 'current', 'input') }}
-                    {...createCyId('password', 'current-input') && { 'data-cy': createCyId('password', 'current-input') }}
+                    data-cy={sel('settings.password.currentPassword')}
                   />
                 {errors.currentPassword && (
                   <p className="text-sm text-destructive">{errors.currentPassword.message}</p>
@@ -283,8 +262,6 @@ function UpdatePasswordPage() {
                   <Checkbox
                     id="revokeOtherSessions"
                     {...register("revokeOtherSessions")}
-                    {...createTestId('password', 'revoke', 'checkbox') && { 'data-testid': createTestId('password', 'revoke', 'checkbox') }}
-                    {...createCyId('password', 'revoke-sessions') && { 'data-cy': createCyId('password', 'revoke-sessions') }}
                   />
                   <Label
                     htmlFor="revokeOtherSessions"
@@ -299,8 +276,7 @@ function UpdatePasswordPage() {
                   disabled={loading}
                   aria-describedby="submit-help"
                   className="w-full md:w-auto"
-                  {...createTestId('password', 'submit', 'button') && { 'data-testid': createTestId('password', 'submit', 'button') }}
-                  {...createCyId('password', 'submit') && { 'data-cy': createCyId('password', 'submit') }}
+                  data-cy={sel('settings.password.submitButton')}
                 >
                   {loading ? (
                     <>

package/templates/app/dashboard/settings/plans/loading.tsx

@@ -0,0 +1,5 @@
+import { SkeletonPlansPage } from '@nextsparkjs/core/components/ui/skeleton-settings'
+
+export default function PlansLoading() {
+  return <SkeletonPlansPage />
+}

package/templates/app/dashboard/settings/profile/loading.tsx

@@ -0,0 +1,5 @@
+import { SkeletonProfileForm } from '@nextsparkjs/core/components/ui/skeleton-settings'
+
+export default function ProfileLoading() {
+  return <SkeletonProfileForm />
+}

package/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/templates/app/dashboard/settings/security/loading.tsx

@@ -0,0 +1,5 @@
+import { SkeletonSecurityPage } from '@nextsparkjs/core/components/ui/skeleton-settings'
+
+export default function SecurityLoading() {
+  return <SkeletonSecurityPage />
+}