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

package/dist/templates/app/dashboard/settings/api-keys/page.tsx

@@ -7,27 +7,27 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@next
 import { Badge } from '@nextsparkjs/core/components/ui/badge';
 import { Alert, AlertDescription } from '@nextsparkjs/core/components/ui/alert';
 import { Skeleton } from '@nextsparkjs/core/components/ui/skeleton';
-import { 
-  Dialog, 
-  DialogContent, 
-  DialogDescription, 
-  DialogHeader, 
-  DialogTitle 
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle
 } from '@nextsparkjs/core/components/ui/dialog';
-import { 
+import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger
 } from '@nextsparkjs/core/components/ui/dropdown-menu';
-import { 
-  AlertTriangle, 
-  Copy, 
-  Eye, 
-  EyeOff, 
-  Key, 
-  MoreVertical, 
-  Plus, 
+import {
+  AlertTriangle,
+  Copy,
+  Eye,
+  EyeOff,
+  Key,
+  MoreVertical,
+  Plus,
   Trash2,
   Activity
 } from 'lucide-react';
@@ -156,7 +156,7 @@ function ApiKeysPage() {
 
   if (error) {
     const isPermissionError = error.message.includes('Insufficient permissions');
-    
+
     return (
       <div className="space-y-6">
         <div>
@@ -172,7 +172,7 @@ function ApiKeysPage() {
               <div>
                 <strong>Acceso restringido</strong>
                 <p className="mt-1">
-                  Solo los administradores pueden gestionar API keys. 
+                  Solo los administradores pueden gestionar API keys.
                   Contacta a un administrador si necesitas acceso a esta funcionalidad.
                 </p>
               </div>
@@ -202,11 +202,11 @@ function ApiKeysPage() {
 
       {/* New API Key Display */}
       {newApiKey && (
-        <ApiKeyDisplay 
+        <ApiKeyDisplay
           apiKey={newApiKey.key}
           keyName={newApiKey.name}
           warning={newApiKey.warning}
-          onClose={() => setNewApiKey(null)} 
+          onClose={() => setNewApiKey(null)}
         />
       )}
 
@@ -403,14 +403,14 @@ function ApiKeysPage() {
 }
 
 // Componente para mostrar detalles de API key
-function ApiKeyDetailsDialog({ 
-  keyId, 
-  open, 
-  onClose 
-}: { 
-  keyId: string; 
-  open: boolean; 
-  onClose: () => void; 
+function ApiKeyDetailsDialog({
+  keyId,
+  open,
+  onClose
+}: {
+  keyId: string;
+  open: boolean;
+  onClose: () => void;
 }) {
   const { data: keyDetails, isLoading } = useQuery({
     queryKey: ['api-key-details', keyId],
@@ -510,4 +510,4 @@ function ApiKeyDetailsDialog({
   );
 }
 
-export default getTemplateOrDefaultClient('app/dashboard/settings/api-keys/page.tsx', ApiKeysPage)
+export default getTemplateOrDefaultClient('app/dashboard/settings/api-keys/page.tsx', ApiKeysPage)

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

@@ -13,6 +13,7 @@ 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 { 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'
@@ -203,10 +204,25 @@ function TeamsSettingsPage() {
             <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/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>
+  )
+}

package/dist/templates/app/devtools/config/page.tsx

@@ -9,7 +9,7 @@ import { getTranslations } from "next-intl/server";
  * Provides read-only view with JSON formatting and copy functionality.
  */
 export default async function DevConfigPage() {
-  const t = await getTranslations('devtools.config');
+  const t = await getTranslations('dev.config');
 
   return (
     <div className="space-y-6" data-cy="devtools-config-page">

package/dist/templates/app/devtools/page.tsx

@@ -10,7 +10,7 @@ import { getTranslations } from "next-intl/server";
  * Shows overview of available sections in the dev area.
  */
 export default async function DevHomePage() {
-  const t = await getTranslations('devtools');
+  const t = await getTranslations('dev');
   const tCommon = await getTranslations('common');
 
   const sections = [

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

@@ -52,7 +52,7 @@ async function fetchScheduledActions(
 }
 
 export default function ScheduledActionsPage() {
-  const t = useTranslations('devtools.scheduledActions')
+  const t = useTranslations('dev.scheduledActions')
   const [filters, setFilters] = useState<ScheduledActionsFilters>({})
   const [page, setPage] = useState(1)
   const limit = 20

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

@@ -19,7 +19,7 @@ interface DevTestsPageProps {
  */
 export default async function DevTestsPage({ params }: DevTestsPageProps) {
   const { path } = await params;
-  const t = await getTranslations("devtools.tests");
+  const t = await getTranslations("dev.tests");
 
   // Convert path array to string (e.g., ['auth', 'login.bdd.md'] -> 'auth/login.bdd.md')
   const initialPath = path?.join("/") || null;

package/dist/templates/app/globals.css

@@ -5,11 +5,8 @@
    DO NOT edit directly - all styles are in:
    contents/themes/{theme}/styles/globals.css
 
-   This import is AUTO-SYNCED by the registry build process
-   to match NEXT_PUBLIC_ACTIVE_THEME from your .env file.
-
    To customize colors, typography and tokens, edit
    the globals.css file in your active theme.
    ============================================= */
 
-@import "../contents/themes/starter/styles/globals.css";
+@import "../../../themes/default/styles/globals.css";

package/dist/templates/app/superadmin/docs/[section]/[page]/page.tsx

@@ -6,7 +6,6 @@ import { DocsContent } from '@nextsparkjs/core/components/docs/docs-content'
 import { SuperadminDocsSidebar } from '@nextsparkjs/core/components/docs/superadmin-docs-sidebar'
 import path from 'path'
 import type { Metadata } from 'next'
-import { sel } from '@nextsparkjs/core/selectors'
 
 interface SuperadminDocsPageProps {
   params: Promise<{
@@ -64,7 +63,7 @@ export default async function SuperadminDocsDetailPage({ params }: SuperadminDoc
   const { metadata, html } = await parseMarkdownFile(filePath)
 
   return (
-    <div className="flex gap-8" data-cy={sel('superadmin.docs.pageDetail')}>
+    <div className="flex gap-8" data-cy="superadmin-docs-page">
       <aside className="hidden lg:block w-64 shrink-0">
         <SuperadminDocsSidebar sections={DOCS_REGISTRY.superadmin} />
       </aside>

package/dist/templates/app/superadmin/docs/page.tsx

@@ -3,7 +3,6 @@ import { SuperadminDocsSidebar } from '@nextsparkjs/core/components/docs/superad
 import Link from 'next/link'
 import { FileText, Folder } from 'lucide-react'
 import type { Metadata } from 'next'
-import { sel } from '@nextsparkjs/core/selectors'
 
 export const metadata: Metadata = {
   title: 'Admin Documentation | Super Admin',
@@ -30,8 +29,12 @@ export default function SuperadminDocsPage() {
     )
   }
 
+  // Redirect to first page of first section
+  const firstSection = sections[0]
+  const firstPage = firstSection.pages[0]
+
   return (
-    <div className="flex gap-8" data-cy={sel('superadmin.docs.container')}>
+    <div className="flex gap-8" data-cy="superadmin-docs-container">
       <aside className="hidden lg:block w-64 shrink-0">
         <SuperadminDocsSidebar sections={sections} />
       </aside>
@@ -56,7 +59,7 @@ export default function SuperadminDocsPage() {
                     key={page.slug}
                     href={`/superadmin/docs/${section.slug}/${page.slug}`}
                     className="flex items-center gap-2 p-2 rounded-md hover:bg-accent transition-colors"
-                    data-cy={sel('superadmin.docs.pageLink', { slug: page.slug })}
+                    data-cy={`superadmin-docs-link-${page.slug}`}
                   >
                     <FileText className="h-4 w-4 text-muted-foreground" />
                     <span>{page.title}</span>

package/dist/templates/app/superadmin/layout.tsx

@@ -2,7 +2,6 @@ import { SuperAdminGuard } from "@nextsparkjs/core/components/app/guards/SuperAd
 import { SuperadminSidebar } from "@nextsparkjs/core/components/superadmin/layouts/SuperadminSidebar";
 import { Metadata } from "next";
 import { getTemplateOrDefault, getMetadataOrDefault } from '@nextsparkjs/core/lib/template-resolver'
-import { sel } from "@nextsparkjs/core/selectors";
 
 const defaultMetadata: Metadata = {
   title: "Super Admin | Super Admin Panel",
@@ -29,7 +28,7 @@ interface SuperadminLayoutProps {
 function SuperadminLayout({ children }: SuperadminLayoutProps) {
   return (
     <SuperAdminGuard>
-      <div className="flex h-screen bg-background" data-cy={sel('superadmin.container')}>
+      <div className="flex h-screen bg-background" data-cy="superadmin-container">
         {/* Sidebar - Hidden on mobile, visible on desktop */}
         <div className="hidden lg:block">
           <SuperadminSidebar />

package/dist/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/dist/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/dist/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/dist/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>