@nextsparkjs/core 0.1.0-beta.190 → 0.1.0-beta.192

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

@@ -1,272 +0,0 @@
-'use client'
-
-import { useState } from 'react'
-import { useTranslations } from 'next-intl'
-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'
-import { Avatar, AvatarFallback, AvatarImage } from '@nextsparkjs/core/components/ui/avatar'
-import { Separator } from '@nextsparkjs/core/components/ui/separator'
-import { useTeamContext } from '@nextsparkjs/core/contexts/TeamContext'
-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'
-
-// Role icons map - core roles only, custom roles use fallback
-const roleIconsMap: Record<string, typeof Crown | null> = {
-  owner: Crown,
-  admin: Shield,
-  member: null,
-  viewer: Eye,
-}
-
-// Role colors map - core roles only, custom roles use fallback
-const roleColorsMap: Record<string, 'destructive' | 'default' | 'secondary' | 'outline'> = {
-  owner: 'destructive',
-  admin: 'default',
-  member: 'secondary',
-  viewer: 'outline',
-}
-
-// Type-safe helpers - fallback handles any custom theme roles
-const getRoleIcon = (role: TeamRole) => roleIconsMap[role] ?? Eye
-const getRoleColor = (role: TeamRole) => roleColorsMap[role] ?? 'outline'
-
-function TeamsSettingsPage() {
-  const t = useTranslations('settings')
-  const tTeams = useTranslations('teams')
-  const { userTeams, currentTeam, isLoading } = useTeamContext()
-  const { mode, canCreate, canSwitch } = useTeamsConfig()
-  const [selectedTeamId, setSelectedTeamId] = useState<string | null>(null)
-  const [showCreateDialog, setShowCreateDialog] = useState(false)
-
-  // In single-user mode, hide the teams settings page content
-  // since there's only one team and no collaboration features
-  const isSingleUserMode = mode === 'single-user'
-
-  // Find selected team membership
-  const selectedMembership = selectedTeamId
-    ? userTeams.find(m => m.team.id === selectedTeamId)
-    : null
-
-  if (isLoading) {
-    return (
-      <div
-        className="flex flex-col items-center justify-center py-12 gap-3"
-        role="status"
-        aria-label={tTeams('messages.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>
-      </div>
-    )
-  }
-
-  return (
-    <>
-      <div
-        className="max-w-4xl space-y-6"
-        data-cy={sel('settings.teams.container')}
-      >
-        {/* Header */}
-        <header data-cy={sel('settings.teams.header')}>
-          <h1
-            className="text-2xl font-bold"
-            id="teams-settings-heading"
-          >
-            {t('teams.title')}
-          </h1>
-          <p className="text-muted-foreground mt-1">
-            {t('teams.description')}
-          </p>
-        </header>
-
-        {/* Single-user mode: show simplified view */}
-        {isSingleUserMode && currentTeam && (
-          <Card data-cy={sel('settings.teams.singleUserMode')}>
-            <CardHeader>
-              <div className="flex items-center gap-2">
-                <Users className="h-5 w-5" aria-hidden="true" />
-                <CardTitle>{t('teams.yourTeam')}</CardTitle>
-              </div>
-              <CardDescription>
-                {t('teams.singleUserDescription', { fallback: 'Your personal workspace.' })}
-              </CardDescription>
-            </CardHeader>
-            <CardContent>
-              <div className="flex items-center gap-3 p-4 rounded-lg border">
-                <Avatar className="h-10 w-10">
-                  <AvatarImage src={currentTeam.avatarUrl || undefined} alt={currentTeam.name} />
-                  <AvatarFallback>
-                    {currentTeam.name.slice(0, 2).toUpperCase()}
-                  </AvatarFallback>
-                </Avatar>
-                <div>
-                  <div className="font-medium">{currentTeam.name}</div>
-                  <div className="text-sm text-muted-foreground">{currentTeam.slug}</div>
-                </div>
-              </div>
-            </CardContent>
-          </Card>
-        )}
-
-        {/* Teams List Card - only show if not single-user mode */}
-        {!isSingleUserMode && (
-        <Card data-cy={sel('settings.teams.list.container')}>
-          <CardHeader>
-            <div className="flex items-center justify-between">
-              <div className="flex items-center gap-2">
-                <Users className="h-5 w-5" aria-hidden="true" />
-                <CardTitle>{canSwitch ? t('teams.yourTeams') : t('teams.yourTeam')}</CardTitle>
-              </div>
-              {/* Only show Create Team button if mode allows it */}
-              {canCreate && (
-                <Button
-                  onClick={() => setShowCreateDialog(true)}
-                  size="sm"
-                  data-cy="create-team-button"
-                >
-                  <Plus className="h-4 w-4 mr-2" aria-hidden="true" />
-                  {tTeams('actions.create')}
-                </Button>
-              )}
-            </div>
-            <CardDescription>
-              {t('teams.yourTeamsDescription')}
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <div className="space-y-2">
-              {userTeams.length === 0 ? (
-                <div className="text-center py-8 text-muted-foreground">
-                  {t('teams.noTeams')}
-                </div>
-              ) : (
-                userTeams.map((membership) => {
-                  const team = membership.team
-                  const role = membership.role as TeamRole
-                  const RoleIcon = getRoleIcon(role)
-                  const isSelected = selectedTeamId === team.id
-
-                  return (
-                    <button
-                      key={team.id}
-                      onClick={() => setSelectedTeamId(isSelected ? null : team.id)}
-                      className={`w-full flex items-center justify-between p-4 rounded-lg border transition-colors hover:bg-accent/50 ${
-                        isSelected ? 'bg-accent border-accent' : 'border-border'
-                      }`}
-                      data-cy={`team-item-${team.id}`}
-                    >
-                      <div className="flex items-center gap-3">
-                        <Avatar className="h-10 w-10">
-                          <AvatarImage src={team.avatarUrl || undefined} alt={team.name} />
-                          <AvatarFallback>
-                            {team.name.slice(0, 2).toUpperCase()}
-                          </AvatarFallback>
-                        </Avatar>
-                        <div className="text-left">
-                          <div className="flex items-center gap-2">
-                            <span className="font-medium">{team.name}</span>
-                          </div>
-                          <div className="text-sm text-muted-foreground">
-                            {team.slug}
-                          </div>
-                        </div>
-                      </div>
-                      <div className="flex items-center gap-3">
-                        <Badge variant={getRoleColor(role)}>
-                          {RoleIcon && <RoleIcon className="h-3 w-3 mr-1" aria-hidden="true" />}
-                          {tTeams(`roles.${role}`)}
-                        </Badge>
-                        <ChevronRight className={`h-4 w-4 text-muted-foreground transition-transform ${isSelected ? 'rotate-90' : ''}`} />
-                      </div>
-                    </button>
-                  )
-                })
-              )}
-            </div>
-          </CardContent>
-        </Card>
-        )}
-
-        {/* Selected Team Details - only show if not single-user mode */}
-        {!isSingleUserMode && selectedMembership && (
-          <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 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 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">
-              {/* Team Info */}
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                <div>
-                  <label className="text-sm font-medium text-muted-foreground">
-                    {tTeams('fields.slug')}
-                  </label>
-                  <p className="mt-1">{selectedMembership.team.slug}</p>
-                </div>
-                <div>
-                  <label className="text-sm font-medium text-muted-foreground">
-                    {tTeams('fields.role')}
-                  </label>
-                  <div className="mt-1">
-                    <Badge variant={getRoleColor(selectedMembership.role as TeamRole)}>
-                      {tTeams(`roles.${selectedMembership.role}`)}
-                    </Badge>
-                  </div>
-                </div>
-              </div>
-
-              <Separator />
-
-              {/* Team Members */}
-              <TeamMembersList teamId={selectedMembership.team.id} />
-
-              {/* Pending Invitations */}
-              <TeamPendingInvitations teamId={selectedMembership.team.id} />
-            </CardContent>
-          </Card>
-        )}
-      </div>
-
-      {/* Create Team Dialog - only render if mode allows team creation */}
-      {canCreate && (
-        <CreateTeamDialog
-          open={showCreateDialog}
-          onOpenChange={setShowCreateDialog}
-        />
-      )}
-    </>
-  )
-}
-
-export default getTemplateOrDefaultClient('app/dashboard/settings/teams/page.tsx', TeamsSettingsPage)

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

@@ -1,95 +0,0 @@
-import { useTranslations } from 'next-intl'
-import { PermissionsMatrix } from '@nextsparkjs/core/components/permissions'
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@nextsparkjs/core/components/ui/tabs'
-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
- *
- * Displays a visual permissions matrix showing what each team role can do.
- * Organized by categories with tabs for easy navigation.
- */
-function TeamPermissionsPage() {
-  const t = useTranslations('permissions')
-
-  // Get all unique categories from registry
-  const categories = PermissionService.getCategories()
-
-  return (
-    <div className="space-y-6" data-cy="team-permissions-page">
-      {/* Header */}
-      <div>
-        <h1 className="text-2xl font-bold tracking-tight">{t('title')}</h1>
-        <p className="text-muted-foreground">{t('description')}</p>
-      </div>
-
-      {/* Info Card with Role Overview */}
-      <Card>
-        <CardHeader>
-          <CardTitle>{t('rolesOverview')}</CardTitle>
-          <CardDescription>{t('rolesOverviewDescription')}</CardDescription>
-        </CardHeader>
-        <CardContent>
-          <div className="grid gap-4 md:grid-cols-4">
-            <RoleCard role="owner" />
-            <RoleCard role="admin" />
-            <RoleCard role="member" />
-            <RoleCard role="viewer" />
-          </div>
-        </CardContent>
-      </Card>
-
-      {/* Permissions Matrix with Tabs */}
-      <Tabs defaultValue="all" className="space-y-4">
-        <TabsList>
-          <TabsTrigger value="all" data-cy="tab-all">
-            {t('allPermissions')}
-          </TabsTrigger>
-          {categories.map(cat => (
-            <TabsTrigger key={cat} value={cat} data-cy={`tab-${cat.toLowerCase()}`}>
-              {cat}
-            </TabsTrigger>
-          ))}
-        </TabsList>
-
-        <TabsContent value="all">
-          <PermissionsMatrix />
-        </TabsContent>
-
-        {categories.map(cat => (
-          <TabsContent key={cat} value={cat}>
-            <PermissionsMatrix category={cat} />
-          </TabsContent>
-        ))}
-      </Tabs>
-    </div>
-  )
-}
-
-/**
- * RoleCard component
- *
- * Displays a visual card for each team role with color coding
- */
-function RoleCard({ role }: { role: 'owner' | 'admin' | 'member' | 'viewer' }) {
-  const t = useTranslations('permissions')
-
-  const roleColors = {
-    owner: 'border-purple-200 bg-purple-50 dark:border-purple-800 dark:bg-purple-900/20',
-    admin: 'border-blue-200 bg-blue-50 dark:border-blue-800 dark:bg-blue-900/20',
-    member: 'border-green-200 bg-green-50 dark:border-green-800 dark:bg-green-900/20',
-    viewer: 'border-gray-200 bg-gray-50 dark:border-gray-700 dark:bg-gray-800/20',
-  }
-
-  return (
-    <div className={`rounded-lg border p-4 ${roleColors[role]}`} data-cy={`role-card-${role}`}>
-      <h3 className="font-semibold">{t(`roles.${role}.title`)}</h3>
-      <p className="text-sm text-muted-foreground">{t(`roles.${role}.description`)}</p>
-    </div>
-  )
-}
-
-export default getTemplateOrDefault('app/dashboard/settings/teams/permissions/page.tsx', TeamPermissionsPage)

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

@@ -1,33 +0,0 @@
-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

@@ -1,23 +0,0 @@
-/**
- * API Explorer Layout
- *
- * The Explorer is a tool, not a document: it wants the whole content area, while every other
- * DevTools page sits inside the parent layout's centered, padded, max-width container.
- *
- * It escapes that container by filling the scroll area it lives in — `absolute inset-0` against
- * the `relative <main>` of the parent layout. What it must NOT do is compute its own size from
- * the viewport: the previous `calc(100vw - 16rem)` assumed the DevTools sidebar is always
- * 16rem, so collapsing that sidebar to a rail left the Explorer 192px narrower than the space
- * it had, and the centering split the difference into dead margins on both sides — the layout
- * got worse exactly when someone made room for it.
- *
- * Filling the parent has no such assumption: the sidebar's width, the container's padding and
- * its max-width all stop being this file's business.
- */
-export default function ApiExplorerLayout({
-  children,
-}: {
-  children: React.ReactNode
-}) {
-  return <div className="absolute inset-0">{children}</div>
-}

package/templates/app/devtools/blocks/[slug]/page.tsx

@@ -1,39 +0,0 @@
-import { BlockDetailViewer } from "@nextsparkjs/core/components/devtools/BlockDetailViewer";
-import { BLOCK_REGISTRY } from "@nextsparkjs/registries/block-registry";
-import { notFound } from "next/navigation";
-
-interface BlockDetailPageProps {
-  params: Promise<{
-    slug: string;
-  }>;
-}
-
-/**
- * Block Detail Page
- *
- * Displays detailed information about a specific page builder block.
- * Shows fields, configuration, and test coverage.
- */
-export default async function BlockDetailPage({ params }: BlockDetailPageProps) {
-  const { slug } = await params;
-
-  // Verify block exists
-  if (!BLOCK_REGISTRY[slug]) {
-    notFound();
-  }
-
-  return (
-    <div className="space-y-6" data-cy={`devtools-block-detail-${slug}`}>
-      <BlockDetailViewer slug={slug} />
-    </div>
-  );
-}
-
-/**
- * Generate static params for all blocks
- */
-export async function generateStaticParams() {
-  return Object.keys(BLOCK_REGISTRY).map((slug) => ({
-    slug,
-  }));
-}

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

@@ -1,40 +0,0 @@
-import { Suspense } from "react";
-import { BlocksViewer } from "@nextsparkjs/core/components/devtools/BlocksViewer";
-import { LayoutGrid } from "lucide-react";
-import { getTranslations } from "next-intl/server";
-
-/**
- * Blocks Registry Page
- *
- * Displays all page builder blocks with field definitions and coverage info.
- * Provides filtering and search capabilities.
- */
-async function DevBlocksPageContent() {
-  const t = await getTranslations("devtools.blocks");
-
-  return (
-    <div className="space-y-6" data-cy="devtools-blocks-page">
-      {/* Header */}
-      <div className="flex items-center gap-3">
-        <div className="flex items-center justify-center w-12 h-12 bg-violet-100 dark:bg-violet-950 rounded-lg">
-          <LayoutGrid className="h-6 w-6 text-violet-600 dark:text-violet-400" />
-        </div>
-        <div>
-          <h1 className="text-3xl font-bold">{t("title")}</h1>
-          <p className="text-muted-foreground">{t("description")}</p>
-        </div>
-      </div>
-
-      {/* Blocks Viewer */}
-      <BlocksViewer />
-    </div>
-  );
-}
-
-export default function DevBlocksPage() {
-  return (
-    <Suspense fallback={null}>
-      <DevBlocksPageContent />
-    </Suspense>
-  );
-}

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

@@ -1,40 +0,0 @@
-import { Suspense } from "react";
-import { ConfigViewer } from "@nextsparkjs/core/components/devtools";
-import { Settings } from "lucide-react";
-import { getTranslations } from "next-intl/server";
-
-/**
- * Configuration Viewer Page
- *
- * Displays theme configuration and entity registry information.
- * Provides read-only view with JSON formatting and copy functionality.
- */
-async function DevConfigPageContent() {
-  const t = await getTranslations('dev.config');
-
-  return (
-    <div className="space-y-6" data-cy="devtools-config-page">
-      {/* Header */}
-      <div className="flex items-center gap-3">
-        <div className="flex items-center justify-center w-12 h-12 bg-violet-100 dark:bg-violet-950 rounded-lg">
-          <Settings className="h-6 w-6 text-violet-600 dark:text-violet-400" />
-        </div>
-        <div>
-          <h1 className="text-3xl font-bold">{t('title')}</h1>
-          <p className="text-muted-foreground">{t('description')}</p>
-        </div>
-      </div>
-
-      {/* Config Viewer */}
-      <ConfigViewer />
-    </div>
-  );
-}
-
-export default function DevConfigPage() {
-  return (
-    <Suspense fallback={null}>
-      <DevConfigPageContent />
-    </Suspense>
-  );
-}

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

@@ -1,40 +0,0 @@
-import { Suspense } from "react";
-import { FeaturesViewer } from "@nextsparkjs/core/components/devtools/FeaturesViewer";
-import { Layers } from "lucide-react";
-import { getTranslations } from "next-intl/server";
-
-/**
- * Features Registry Page
- *
- * Displays all features from the testing registry with coverage information.
- * Provides filtering and search capabilities.
- */
-async function DevFeaturesPageContent() {
-  const t = await getTranslations("devtools.features");
-
-  return (
-    <div className="space-y-6" data-cy="devtools-features-page">
-      {/* Header */}
-      <div className="flex items-center gap-3">
-        <div className="flex items-center justify-center w-12 h-12 bg-violet-100 dark:bg-violet-950 rounded-lg">
-          <Layers className="h-6 w-6 text-violet-600 dark:text-violet-400" />
-        </div>
-        <div>
-          <h1 className="text-3xl font-bold">{t("title")}</h1>
-          <p className="text-muted-foreground">{t("description")}</p>
-        </div>
-      </div>
-
-      {/* Features Viewer */}
-      <FeaturesViewer />
-    </div>
-  );
-}
-
-export default function DevFeaturesPage() {
-  return (
-    <Suspense fallback={null}>
-      <DevFeaturesPageContent />
-    </Suspense>
-  );
-}

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

@@ -1,40 +0,0 @@
-import { Suspense } from "react";
-import { FlowsViewer } from "@nextsparkjs/core/components/devtools/FlowsViewer";
-import { GitBranch } from "lucide-react";
-import { getTranslations } from "next-intl/server";
-
-/**
- * Flows Registry Page
- *
- * Displays all user journey flows from the testing registry with coverage information.
- * Provides filtering and search capabilities.
- */
-async function DevFlowsPageContent() {
-  const t = await getTranslations("devtools.flows");
-
-  return (
-    <div className="space-y-6" data-cy="devtools-flows-page">
-      {/* Header */}
-      <div className="flex items-center gap-3">
-        <div className="flex items-center justify-center w-12 h-12 bg-violet-100 dark:bg-violet-950 rounded-lg">
-          <GitBranch className="h-6 w-6 text-violet-600 dark:text-violet-400" />
-        </div>
-        <div>
-          <h1 className="text-3xl font-bold">{t("title")}</h1>
-          <p className="text-muted-foreground">{t("description")}</p>
-        </div>
-      </div>
-
-      {/* Flows Viewer */}
-      <FlowsViewer />
-    </div>
-  );
-}
-
-export default function DevFlowsPage() {
-  return (
-    <Suspense fallback={null}>
-      <DevFlowsPageContent />
-    </Suspense>
-  );
-}