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

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

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

package/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/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/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>
+  )
+}

package/templates/app/devtools/scheduled-actions/page.tsx

@@ -19,7 +19,7 @@ import { useTranslations } from 'next-intl'
 import { useQuery } from '@tanstack/react-query'
 import { Button } from '@nextsparkjs/core/components/ui/button'
 import { ChevronLeftIcon, ChevronRightIcon } from 'lucide-react'
-import { sel } from '@nextsparkjs/core/lib/test'
+import { sel } from '@nextsparkjs/core/selectors'
 import { Filters } from '@nextsparkjs/core/components/devtools/scheduled-actions/filters'
 import { ActionsTable } from '@nextsparkjs/core/components/devtools/scheduled-actions/actions-table'
 import type { ScheduledActionsFilters, ScheduledActionsResponse } from '@nextsparkjs/core/components/devtools/scheduled-actions/types'