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

package/dist/templates/app/globals.css

@@ -1,317 +1,12 @@
-@import "tailwindcss";
-
-/* =============================================
-   PRE-COMPILED COMPONENT STYLES
-   Import pre-compiled Tailwind classes for core UI components
-   ============================================= */
-@import "@nextsparkjs/core/styles/ui.css";
-
 /* =============================================
-   TAILWIND v4 SOURCE CONFIGURATION
-   Scan contents directory for custom theme/plugin classes
-   ============================================= */
-@source "../contents/**/*.{js,ts,jsx,tsx}";
-
-/* =============================================
-   CORE - NEW YORK THEME BASE (HSL)
-   This is the default neutral theme from shadcn/ui
-   ============================================= */
-
-:root {
-  /* Background & Foreground */
-  --background: hsl(0 0% 100%);
-  --foreground: hsl(240 10% 3.9%);
-
-  /* Card */
-  --card: hsl(0 0% 100%);
-  --card-foreground: hsl(240 10% 3.9%);
-
-  /* Popover */
-  --popover: hsl(0 0% 100%);
-  --popover-foreground: hsl(240 10% 3.9%);
-
-  /* Primary */
-  --primary: hsl(240 5.9% 10%);
-  --primary-foreground: hsl(0 0% 98%);
-
-  /* Secondary */
-  --secondary: hsl(240 4.8% 95.9%);
-  --secondary-foreground: hsl(240 5.9% 10%);
-
-  /* Muted */
-  --muted: hsl(240 4.8% 95.9%);
-  --muted-foreground: hsl(240 3.8% 46.1%);
-
-  /* Accent */
-  --accent: hsl(240 4.8% 95.9%);
-  --accent-foreground: hsl(240 5.9% 10%);
-
-  /* Destructive */
-  --destructive: hsl(0 84.2% 60.2%);
-  --destructive-foreground: hsl(0 0% 98%);
-
-  /* Border, Input, Ring */
-  --border: hsl(240 5.9% 90%);
-  --input: hsl(240 5.9% 90%);
-  --ring: hsl(240 5.9% 10%);
-
-  /* Chart Colors */
-  --chart-1: hsl(12 76% 61%);
-  --chart-2: hsl(173 58% 39%);
-  --chart-3: hsl(197 37% 24%);
-  --chart-4: hsl(43 74% 66%);
-  --chart-5: hsl(27 87% 67%);
-
-  /* Sidebar */
-  --sidebar-background: hsl(0 0% 98%);
-  --sidebar-foreground: hsl(240 5.3% 26.1%);
-  --sidebar-primary: hsl(240 5.9% 10%);
-  --sidebar-primary-foreground: hsl(0 0% 98%);
-  --sidebar-accent: hsl(240 4.8% 95.9%);
-  --sidebar-accent-foreground: hsl(240 5.9% 10%);
-  --sidebar-border: hsl(240 5.9% 90%);
-  --sidebar-ring: hsl(240 5.9% 10%);
-
-  /* Radius */
-  --radius: 0.5rem;
-}
-
-.dark {
-  /* Background & Foreground */
-  --background: hsl(240 10% 3.9%);
-  --foreground: hsl(0 0% 98%);
-
-  /* Card */
-  --card: hsl(240 10% 3.9%);
-  --card-foreground: hsl(0 0% 98%);
-
-  /* Popover */
-  --popover: hsl(240 10% 3.9%);
-  --popover-foreground: hsl(0 0% 98%);
-
-  /* Primary */
-  --primary: hsl(0 0% 98%);
-  --primary-foreground: hsl(240 5.9% 10%);
-
-  /* Secondary */
-  --secondary: hsl(240 3.7% 15.9%);
-  --secondary-foreground: hsl(0 0% 98%);
-
-  /* Muted */
-  --muted: hsl(240 3.7% 15.9%);
-  --muted-foreground: hsl(240 5% 64.9%);
-
-  /* Accent */
-  --accent: hsl(240 3.7% 15.9%);
-  --accent-foreground: hsl(0 0% 98%);
-
-  /* Destructive */
-  --destructive: hsl(0 62.8% 30.6%);
-  --destructive-foreground: hsl(0 0% 98%);
-
-  /* Border, Input, Ring */
-  --border: hsl(240 3.7% 15.9%);
-  --input: hsl(240 3.7% 15.9%);
-  --ring: hsl(240 4.9% 83.9%);
-
-  /* Chart Colors */
-  --chart-1: hsl(220 70% 50%);
-  --chart-2: hsl(160 60% 45%);
-  --chart-3: hsl(30 80% 55%);
-  --chart-4: hsl(280 65% 60%);
-  --chart-5: hsl(340 75% 55%);
-
-  /* Sidebar */
-  --sidebar-background: hsl(240 5.9% 10%);
-  --sidebar-foreground: hsl(240 4.8% 95.9%);
-  --sidebar-primary: hsl(0 0% 98%);
-  --sidebar-primary-foreground: hsl(240 5.9% 10%);
-  --sidebar-accent: hsl(240 3.7% 15.9%);
-  --sidebar-accent-foreground: hsl(240 4.8% 95.9%);
-  --sidebar-border: hsl(240 3.7% 15.9%);
-  --sidebar-ring: hsl(240 4.8% 95.9%);
-}
+   GLOBAL STYLES - Import from Active Theme
 
-/* Tailwind v4 Theme Mapping
- *
- * NOTE: This @theme block uses var() directly WITHOUT hsl() wrapper.
- * This allows themes to use either HSL or OKLCH color formats.
- *
- * - Core defaults use HSL format stored as complete values
- * - Custom themes may use OKLCH format
- * - Both work because var() is used directly without color function wrapper
- */
-@theme {
-  /* Map CSS variables to Tailwind utilities - NO hsl() wrapper */
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-  --color-popover: var(--popover);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-destructive: var(--destructive);
-  --color-destructive-foreground: var(--destructive-foreground);
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
+   This file imports styles from the active theme.
+   DO NOT edit directly - all styles are in:
+   contents/themes/{theme}/styles/globals.css
 
-  /* Chart colors */
-  --color-chart-1: var(--chart-1);
-  --color-chart-2: var(--chart-2);
-  --color-chart-3: var(--chart-3);
-  --color-chart-4: var(--chart-4);
-  --color-chart-5: var(--chart-5);
-
-  /* Sidebar colors */
-  --color-sidebar: var(--sidebar-background);
-  --color-sidebar-background: var(--sidebar-background);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-ring: var(--sidebar-ring);
-}
-
-/* Base Styles */
-* {
-  border-color: var(--border);
-}
-
-body {
-  background-color: var(--background);
-  color: var(--foreground);
-}
-
-/* Keyframes */
-@keyframes accordion-down {
-  from {
-    height: 0;
-  }
-  to {
-    height: var(--radix-accordion-content-height);
-  }
-}
-
-@keyframes accordion-up {
-  from {
-    height: var(--radix-accordion-content-height);
-  }
-  to {
-    height: 0;
-  }
-}
-
-@keyframes wiggle {
-  0%, 100% {
-    transform: rotate(0deg);
-  }
-  25% {
-    transform: rotate(-15deg);
-  }
-  75% {
-    transform: rotate(15deg);
-  }
-}
-
-/* =============================================
-   DOCUMENTATION - MARKDOWN STYLES
-   Styles for rendered markdown content in docs pages
-   ============================================= */
-
-.docs-content {
-  @apply space-y-4;
-}
-
-.docs-content h2 {
-  @apply text-2xl font-bold mt-8 mb-4 border-b pb-2 border-border;
-}
-
-.docs-content h3 {
-  @apply text-xl font-semibold mt-6 mb-3;
-}
-
-.docs-content h4 {
-  @apply text-lg font-semibold mt-4 mb-2;
-}
-
-.docs-content p {
-  @apply leading-7 text-foreground;
-}
-
-.docs-content code {
-  @apply bg-muted px-1.5 py-0.5 rounded text-sm font-mono text-foreground;
-}
-
-.docs-content pre {
-  @apply bg-muted p-4 rounded-lg overflow-x-auto my-4 border border-border;
-}
-
-.docs-content pre code {
-  @apply bg-transparent p-0;
-}
-
-.docs-content ul {
-  @apply list-disc list-inside space-y-2 text-foreground;
-}
-
-.docs-content ol {
-  @apply list-decimal list-inside space-y-2 text-foreground;
-}
-
-.docs-content li {
-  @apply leading-7;
-}
-
-.docs-content a {
-  @apply text-primary underline-offset-4 hover:underline transition-colors;
-}
-
-.docs-content blockquote {
-  @apply border-l-4 border-primary pl-4 italic text-muted-foreground my-4;
-}
-
-.docs-content table {
-  @apply w-full border-collapse my-4;
-}
-
-.docs-content thead {
-  @apply border-b-2 border-border;
-}
-
-.docs-content th {
-  @apply text-left p-2 font-semibold bg-muted;
-}
-
-.docs-content td {
-  @apply p-2 border-b border-border;
-}
-
-.docs-content img {
-  @apply rounded-lg my-4 max-w-full h-auto;
-}
-
-.docs-content hr {
-  @apply my-8 border-border;
-}
-
-/* =============================================
-   THEME SYSTEM - BUILD-TIME LOADING
-   Custom theme CSS is automatically injected based on activeTheme config
+   To customize colors, typography and tokens, edit
+   the globals.css file in your active theme.
    ============================================= */
 
-/*
- * NOTE: To change theme, modify activeTheme in contents/themes/theme.config.ts
- * and run: npm run theme:build
- *
- * CSS from custom themes is injected at build-time for optimal performance
- */ 
+@import "../../../themes/default/styles/globals.css";

package/dist/templates/app/layout.tsx

@@ -10,7 +10,6 @@ import { NextIntlClientProvider } from 'next-intl'
 import { getMessages } from 'next-intl/server'
 
 import "./globals.css"
-import "./theme-styles.css"
 import { QueryProvider } from "@nextsparkjs/core/providers/query-provider"
 import { ThemeProvider as NextThemeProvider } from "@nextsparkjs/core/providers/theme-provider"
 import { ThemeProvider as CustomThemeProvider } from "@nextsparkjs/core/lib/theme/ThemeProvider"
@@ -61,6 +60,13 @@ export default async function RootLayout({
 
   return (
     <html lang={locale} suppressHydrationWarning>
+      <head>
+        {/* Preconnect hints for Stripe - improves payment form load time */}
+        <link rel="dns-prefetch" href="https://js.stripe.com" />
+        <link rel="dns-prefetch" href="https://api.stripe.com" />
+        <link rel="preconnect" href="https://js.stripe.com" crossOrigin="anonymous" />
+        <link rel="preconnect" href="https://api.stripe.com" crossOrigin="anonymous" />
+      </head>
       <body
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >

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

@@ -0,0 +1,92 @@
+import { notFound } from 'next/navigation'
+import { DOCS_REGISTRY } from '@nextsparkjs/registries/docs-registry'
+import { parseMarkdownFile } from '@nextsparkjs/core/lib/docs/parser'
+import { DocsBreadcrumbs } from '@nextsparkjs/core/components/docs/docs-breadcrumbs'
+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'
+
+interface SuperadminDocsPageProps {
+  params: Promise<{
+    section: string
+    page: string
+  }>
+}
+
+export async function generateStaticParams() {
+  const params = []
+
+  for (const section of DOCS_REGISTRY.superadmin) {
+    for (const page of section.pages) {
+      params.push({
+        section: section.slug,
+        page: page.slug
+      })
+    }
+  }
+
+  return params
+}
+
+export async function generateMetadata({ params }: SuperadminDocsPageProps): Promise<Metadata> {
+  const resolvedParams = await params
+  const { section: sectionSlug, page: pageSlug } = resolvedParams
+
+  const section = DOCS_REGISTRY.superadmin.find(s => s.slug === sectionSlug)
+  if (!section) return { title: 'Page Not Found' }
+
+  const page = section.pages.find(p => p.slug === pageSlug)
+  if (!page) return { title: 'Page Not Found' }
+
+  const filePath = path.join(process.cwd(), page.path)
+  const { metadata } = await parseMarkdownFile(filePath)
+
+  return {
+    title: `${metadata.title} | Admin Docs`,
+    description: metadata.description || `Admin documentation for ${metadata.title}`,
+    robots: 'noindex, nofollow'
+  }
+}
+
+export default async function SuperadminDocsDetailPage({ params }: SuperadminDocsPageProps) {
+  const resolvedParams = await params
+  const { section: sectionSlug, page: pageSlug } = resolvedParams
+
+  const section = DOCS_REGISTRY.superadmin.find(s => s.slug === sectionSlug)
+  if (!section) notFound()
+
+  const page = section.pages.find(p => p.slug === pageSlug)
+  if (!page) notFound()
+
+  const filePath = path.join(process.cwd(), page.path)
+  const { metadata, html } = await parseMarkdownFile(filePath)
+
+  return (
+    <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>
+
+      <main className="flex-1 max-w-4xl">
+        <DocsBreadcrumbs
+          items={[
+            { label: 'Super Admin', href: '/superadmin' },
+            { label: 'Documentation', href: '/superadmin/docs' },
+            { label: section.title },
+            { label: metadata.title }
+          ]}
+        />
+
+        <article className="mt-8 prose prose-slate dark:prose-invert max-w-none">
+          <h1 className="text-4xl font-bold mb-2">{metadata.title}</h1>
+          {metadata.description && (
+            <p className="text-xl text-muted-foreground mb-8">{metadata.description}</p>
+          )}
+
+          <DocsContent html={html} />
+        </article>
+      </main>
+    </div>
+  )
+}

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

@@ -0,0 +1,75 @@
+import { DOCS_REGISTRY } from '@nextsparkjs/registries/docs-registry'
+import { SuperadminDocsSidebar } from '@nextsparkjs/core/components/docs/superadmin-docs-sidebar'
+import Link from 'next/link'
+import { FileText, Folder } from 'lucide-react'
+import type { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: 'Admin Documentation | Super Admin',
+  description: 'Administrator documentation for deployment, configuration, and management',
+  robots: 'noindex, nofollow'
+}
+
+export default function SuperadminDocsPage() {
+  const sections = DOCS_REGISTRY.superadmin
+
+  if (sections.length === 0) {
+    return (
+      <div className="flex gap-8">
+        <aside className="hidden lg:block w-64 shrink-0">
+          <SuperadminDocsSidebar sections={sections} />
+        </aside>
+        <main className="flex-1">
+          <h1 className="text-3xl font-bold mb-4">Admin Documentation</h1>
+          <p className="text-muted-foreground">
+            No administrator documentation available yet.
+          </p>
+        </main>
+      </div>
+    )
+  }
+
+  // Redirect to first page of first section
+  const firstSection = sections[0]
+  const firstPage = firstSection.pages[0]
+
+  return (
+    <div className="flex gap-8" data-cy="superadmin-docs-container">
+      <aside className="hidden lg:block w-64 shrink-0">
+        <SuperadminDocsSidebar sections={sections} />
+      </aside>
+
+      <main className="flex-1">
+        <h1 className="text-3xl font-bold mb-4">Admin Documentation</h1>
+        <p className="text-muted-foreground mb-8">
+          Documentation for administrators covering deployment, configuration, and system management.
+        </p>
+
+        <div className="grid gap-6">
+          {sections.map((section) => (
+            <div key={section.slug} className="border rounded-lg p-6">
+              <div className="flex items-center gap-2 mb-4">
+                <Folder className="h-5 w-5 text-primary" />
+                <h2 className="text-xl font-semibold">{section.title}</h2>
+              </div>
+
+              <div className="grid gap-2">
+                {section.pages.map((page) => (
+                  <Link
+                    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={`superadmin-docs-link-${page.slug}`}
+                  >
+                    <FileText className="h-4 w-4 text-muted-foreground" />
+                    <span>{page.title}</span>
+                  </Link>
+                ))}
+              </div>
+            </div>
+          ))}
+        </div>
+      </main>
+    </div>
+  )
+}

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

@@ -3,7 +3,7 @@ import { Button } from "@nextsparkjs/core/components/ui/button";
 import { Users, BarChart3, Settings, Shield } from "lucide-react";
 import Link from "next/link";
 import { getTemplateOrDefault } from '@nextsparkjs/core/lib/template-resolver'
-import { sel } from "@nextsparkjs/core/lib/test"
+import { sel } from "@nextsparkjs/core/selectors"
 
 /**
  * Superadmin Dashboard

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

@@ -3,7 +3,7 @@
 import { useQuery, keepPreviousData } from "@tanstack/react-query";
 import { useState } from "react";
 import { format } from "date-fns";
-import { sel } from "@nextsparkjs/core/lib/test";
+import { sel } from "@nextsparkjs/core/selectors";
 import {
   Card,
   CardContent,
@@ -337,7 +337,7 @@ function SubscriptionsPage() {
       {/* Stats Cards */}
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4" data-cy={sel('superadmin.subscriptions.container')}>
         {/* MRR Card */}
-        <Card className="border-green-200 bg-green-50/50" data-cy={sel('superadmin.subscriptions.mrr')}>
+        <Card className="border-green-200 bg-green-50/50" data-cy={sel('superadmin.subscriptions.stats.mrr')}>
           <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
             <CardTitle className="text-sm font-medium">Monthly Recurring Revenue</CardTitle>
             <DollarSign className="h-4 w-4 text-green-600" />
@@ -369,7 +369,7 @@ function SubscriptionsPage() {
         </Card>
 
         {/* Active Subscriptions */}
-        <Card data-cy={sel('superadmin.subscriptions.activeCount')}>
+        <Card data-cy={sel('superadmin.subscriptions.stats.activeCount')}>
           <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
             <CardTitle className="text-sm font-medium">Active Subscriptions</CardTitle>
             <CheckCircle className="h-4 w-4 text-green-600" />
@@ -413,7 +413,7 @@ function SubscriptionsPage() {
 
       {/* Plan Distribution */}
       {data?.planDistribution && data.planDistribution.length > 0 && (
-        <Card data-cy={sel('superadmin.subscriptions.planDistribution')}>
+        <Card data-cy={sel('superadmin.subscriptions.stats.planDistribution')}>
           <CardHeader>
             <CardTitle className="flex items-center gap-2">
               <TrendingUp className="h-5 w-5" />
@@ -626,6 +626,7 @@ function SubscriptionsPage() {
                 limit={data.pagination.limit}
                 onPageChange={setPage}
                 onLimitChange={handleLimitChange}
+                context="subscriptions"
               />
             </div>
           )}