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

package/dist/templates/contents/themes/starter/blocks/cta-section/schema.ts

@@ -1,4 +1,4 @@
-import { z } from 'zod'
+import * as z from 'zod'
 import { baseBlockSchema, ctaSchema } from '@nextsparkjs/core/types/blocks'
 
 /**

package/dist/templates/contents/themes/starter/blocks/features-grid/component.tsx

@@ -8,6 +8,7 @@ import * as Icons from 'lucide-react'
 import { cn } from '@nextsparkjs/core/lib/utils'
 import { buildSectionClasses } from '@nextsparkjs/core/types/blocks'
 import type { FeaturesGridBlockProps, FeatureItem } from './schema'
+import { withBasePathIfInApp } from '@nextsparkjs/core/lib/base-path'
 
 /**
  * Features Grid Block Component
@@ -101,7 +102,7 @@ export function FeaturesGridBlock({
         {cta && (
           <div className="mt-12 text-center">
             <a
-              href={cta.link}
+              href={withBasePathIfInApp(cta.link)}
               target={cta.target}
               rel={cta.target === '_blank' ? 'noopener noreferrer' : undefined}
               className="inline-flex items-center justify-center rounded-md bg-primary px-8 py-3 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition-colors"

package/dist/templates/contents/themes/starter/blocks/features-grid/schema.ts

@@ -1,4 +1,4 @@
-import { z } from 'zod'
+import * as z from 'zod'
 import { baseBlockSchema } from '@nextsparkjs/core/types/blocks'
 
 /**

package/dist/templates/contents/themes/starter/blocks/hero/component.tsx

@@ -3,6 +3,7 @@ import { Button } from '@nextsparkjs/core/components/ui/button'
 import { cn } from '@nextsparkjs/core/lib/utils'
 import { buildSectionClasses, resolveMediaUrl } from '@nextsparkjs/core/types/blocks'
 import type { HeroBlockProps } from './schema'
+import { withBasePathIfInApp } from '@nextsparkjs/core/lib/base-path'
 
 /**
  * Hero Block Component
@@ -62,7 +63,7 @@ export function HeroBlock({
         <div
           className="absolute inset-0 z-0"
           style={{
-            backgroundImage: `url(${backgroundImageUrl})`,
+            backgroundImage: `url(${withBasePathIfInApp(backgroundImageUrl)})`,
             backgroundSize: 'cover',
             backgroundPosition: 'center',
           }}
@@ -88,7 +89,7 @@ export function HeroBlock({
         {ctaConfig && (
           <Button asChild size="lg" className="text-lg px-8 py-6">
             <a
-              href={ctaConfig.link}
+              href={withBasePathIfInApp(ctaConfig.link)}
               target={ctaConfig.target}
               rel={ctaConfig.target === '_blank' ? 'noopener noreferrer' : undefined}
             >

package/dist/templates/contents/themes/starter/blocks/hero/schema.ts

@@ -1,4 +1,4 @@
-import { z } from 'zod'
+import * as z from 'zod'
 import {
   baseBlockSchema,
   mediaRefSchema,

package/dist/templates/contents/themes/starter/blocks/testimonials/component.tsx

@@ -4,6 +4,7 @@ import { Avatar, AvatarFallback, AvatarImage } from '@nextsparkjs/core/component
 import { cn } from '@nextsparkjs/core/lib/utils'
 import { buildSectionClasses, resolveMediaUrl } from '@nextsparkjs/core/types/blocks'
 import type { TestimonialsBlockProps, TestimonialItem } from './schema'
+import { withBasePathIfInApp } from '@nextsparkjs/core/lib/base-path'
 
 /**
  * Testimonials Block Component
@@ -72,7 +73,7 @@ export function TestimonialsBlock({
               <Quote className="h-8 w-8 text-primary mb-4" />
 
               <blockquote className="mb-6 text-lg flex-grow">
-                "{item.quote}"
+                &quot;{item.quote}&quot;
               </blockquote>
 
               <div className="flex items-center gap-3">
@@ -98,7 +99,7 @@ export function TestimonialsBlock({
         {cta && (
           <div className="mt-12 text-center">
             <a
-              href={cta.link}
+              href={withBasePathIfInApp(cta.link)}
               target={cta.target}
               rel={cta.target === '_blank' ? 'noopener noreferrer' : undefined}
               className="inline-flex items-center justify-center rounded-md bg-primary px-8 py-3 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition-colors"

package/dist/templates/contents/themes/starter/blocks/testimonials/schema.ts

@@ -1,4 +1,4 @@
-import { z } from 'zod'
+import * as z from 'zod'
 import { baseBlockSchema, mediaRefSchema } from '@nextsparkjs/core/types/blocks'
 
 /**

package/dist/templates/contents/themes/starter/blocks/text-content/component.tsx

@@ -3,6 +3,7 @@ import { cn } from '@nextsparkjs/core/lib/utils'
 import { buildSectionClasses } from '@nextsparkjs/core/types/blocks'
 import { sanitizeBlockHtml } from '@nextsparkjs/core/lib/blocks/sanitize-html'
 import type { TextContentBlockProps } from './schema'
+import { withBasePathIfInApp } from '@nextsparkjs/core/lib/base-path'
 
 /**
  * Text Content Block Component
@@ -82,7 +83,7 @@ export function TextContentBlock({
             alignmentClasses[alignment]
           )}>
             <a
-              href={cta.link}
+              href={withBasePathIfInApp(cta.link)}
               target={cta.target}
               rel={cta.target === '_blank' ? 'noopener noreferrer' : undefined}
               className="inline-flex items-center justify-center rounded-md bg-primary px-8 py-3 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition-colors"

package/dist/templates/contents/themes/starter/blocks/text-content/schema.ts

@@ -1,4 +1,4 @@
-import { z } from 'zod'
+import * as z from 'zod'
 import { baseBlockSchema } from '@nextsparkjs/core/types/blocks'
 
 /**

package/dist/templates/contents/themes/starter/entities/posts/components/post-header.tsx

@@ -1,4 +1,5 @@
 import { Badge } from '@nextsparkjs/core/components/ui/badge'
+import { withBasePathIfInApp } from '@nextsparkjs/core/lib/base-path'
 import Image from 'next/image'
 
 interface Category {
@@ -24,7 +25,7 @@ export function PostHeader({ post }: PostHeaderProps) {
       {post.featuredImage && (
         <div className="relative w-full h-[400px] md:h-[500px] mb-8" data-cy="post-featured-image-display">
           <Image
-            src={post.featuredImage}
+            src={withBasePathIfInApp(post.featuredImage)}
             alt={post.title}
             fill
             className="object-cover rounded-lg"

package/dist/templates/contents/themes/starter/lib/hooks/useAnalyticsData.ts

@@ -2,6 +2,7 @@
 
 import { useQuery } from '@tanstack/react-query'
 import { useTeamContext } from '@nextsparkjs/core/contexts/TeamContext'
+import { withBasePath } from '@nextsparkjs/core/lib/base-path'
 
 interface WeeklyProgress {
   day: string
@@ -31,7 +32,7 @@ export function useAnalyticsData() {
   return useQuery({
     queryKey: ['analytics', currentTeam?.id],
     queryFn: async (): Promise<AnalyticsData> => {
-      const res = await fetch(`/api/v1/analytics?teamId=${currentTeam?.id}`)
+      const res = await fetch(withBasePath(`/api/v1/analytics?teamId=${currentTeam?.id}`))
       if (!res.ok) throw new Error('Failed to fetch analytics')
       return res.json()
     },

package/dist/templates/contents/themes/starter/lib/hooks/useTaskStats.ts

@@ -4,6 +4,7 @@ import { useMemo } from 'react'
 import { useQuery } from '@tanstack/react-query'
 import { useTeamContext } from '@nextsparkjs/core/contexts/TeamContext'
 import { calculateTaskStats, type TaskStats } from '../utils'
+import { withBasePath } from '@nextsparkjs/core/lib/base-path'
 
 interface Task {
   id: string
@@ -32,7 +33,7 @@ export function useTaskStats(): UseTaskStatsReturn {
   } = useQuery({
     queryKey: ['tasks', currentTeam?.id, 'stats'],
     queryFn: async (): Promise<Task[]> => {
-      const response = await fetch(`/api/v1/tasks?teamId=${currentTeam?.id}&limit=1000`)
+      const response = await fetch(withBasePath(`/api/v1/tasks?teamId=${currentTeam?.id}&limit=1000`))
       if (!response.ok) {
         throw new Error('Failed to fetch tasks')
       }

package/dist/templates/eslint.config.mjs

@@ -1,16 +1,140 @@
-import { dirname } from "path";
-import { fileURLToPath } from "url";
-import { FlatCompat } from "@eslint/eslintrc";
+import { createRequire } from "node:module";
+import { dirname } from "node:path";
+import { fileURLToPath } from "node:url";
 
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = dirname(__filename);
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const require = createRequire(import.meta.url);
 
-const compat = new FlatCompat({
-  baseDirectory: __dirname,
-});
+/**
+ * Next's presets from the eslint-config-next the project installs, as flat config.
+ *
+ * Version 16 publishes flat config arrays on these subpaths; reaching them through FlatCompat
+ * throws `Converting circular structure to JSON` before a single file is read. Version 15 declares
+ * no `exports` and publishes eslintrc presets, which FlatCompat is the only way to read: importing
+ * the subpaths throws ERR_MODULE_NOT_FOUND, or, under a loader that adds file extensions, returns
+ * eslintrc objects. That is what a Next 15 project gets when `nextspark init` drops this file next
+ * to its eslint-config-next. FlatCompat ships in @eslint/eslintrc, which ESLint itself depends on,
+ * so it is resolved from there.
+ */
+async function nextPresets() {
+  let presets;
+  try {
+    presets = await Promise.all([
+      import("eslint-config-next/core-web-vitals"),
+      import("eslint-config-next/typescript"),
+    ]);
+  } catch (error) {
+    if (error?.code !== "ERR_MODULE_NOT_FOUND") throw error;
+  }
+
+  if (presets?.every((preset) => Array.isArray(preset.default))) {
+    return presets.flatMap((preset) => preset.default);
+  }
+
+  const { FlatCompat } = createRequire(require.resolve("eslint"))("@eslint/eslintrc");
+  return new FlatCompat({ baseDirectory: __dirname }).extends("next/core-web-vitals", "next/typescript");
+}
+
+/** A config object holding nothing but `ignores` applies to every other object in the array. */
+const isGlobalIgnore = (config) =>
+  Object.keys(config).every((key) => key === "ignores" || key === "name");
+
+const presets = await nextPresets();
+
+/** typescript-eslint's parser, which reads every syntax these trees use: JS, TS and JSX. */
+const typescriptParser = presets
+  .map((config) => config.languageOptions?.parser)
+  .find((parser) => parser?.meta?.name === "typescript-eslint/parser");
+
+const SOURCE_FILES = "**/*.{ts,tsx,mts,cts,js,jsx,mjs,cjs}";
+
+// Tests and fixtures, the project's own and those every theme and plugin brings under contents/:
+// they mock, stub and cast by design, so Next's presets skip them and only the zod rule reaches
+// them. Everything else -- app/, contents/ and what the project adds -- gets the presets.
+const TEST_FILES = [
+  "**/tests/**",
+  "**/__tests__/**",
+  "**/__mocks__/**",
+  "**/fixtures/**",
+  "**/cypress/**",
+  "**/*.{test,spec,cy}.{ts,tsx,mts,cts,js,jsx,mjs,cjs}",
+  "**/{jest,cypress}.{config,setup}.{ts,mts,cts,js,mjs,cjs}",
+];
+
+/** "error", 2 or ["error", ...]. */
+const isError = (setting) => [setting, setting?.[0]].some((level) => level === "error" || level === 2);
+
+/**
+ * The severity this project gives the rules Next's presets configure.
+ *
+ * `@next/next/no-img-element` is an error: the presets only warn, which leaves `eslint .` passing,
+ * and next/image is what serves an image resized and in a modern format.
+ *
+ * eslint-plugin-react-hooks 7, which Next 16's presets load, adds to rules-of-hooks and
+ * exhaustive-deps the rules that flag code the React Compiler cannot compile. A NextSpark project
+ * does not build with the React Compiler, and the components NextSpark ships in app/ and its themes
+ * and plugins break several of those rules, so they report as warnings. Version 5, which Next 15
+ * loads, has none of them.
+ */
+function projectSeverity(rule, setting) {
+  if (rule === "@next/next/no-img-element") return "error";
+  const compilerRule = rule.startsWith("react-hooks/") && !["react-hooks/rules-of-hooks", "react-hooks/exhaustive-deps"].includes(rule);
+  return compilerRule && isError(setting) ? "warn" : setting;
+}
 
 const eslintConfig = [
-  ...compat.extends("next/core-web-vitals", "next/typescript"),
+  {
+    // Next writes next-env.d.ts itself; version 16's presets ignore it and version 15's do not.
+    ignores: [".next/**", ".nextspark/**", "next-env.d.ts"],
+  },
+  ...presets.map((config) =>
+    isGlobalIgnore(config)
+      ? config
+      : {
+          ...config,
+          ignores: [...(config.ignores ?? []), ...TEST_FILES],
+          ...(config.rules && {
+            rules: Object.fromEntries(Object.entries(config.rules).map(([rule, setting]) => [rule, projectSeverity(rule, setting)])),
+          }),
+        },
+  ),
+  {
+    // A .cjs file is CommonJS by definition, so `require` is the only spelling it has.
+    files: ["**/*.cjs"],
+    ignores: TEST_FILES,
+    rules: { "@typescript-eslint/no-require-imports": "off" },
+  },
+  {
+    // The presets would have supplied the parser here. Their plugins are registered so the disable
+    // comments in tests resolve the rules they name, without turning any of those rules on.
+    files: TEST_FILES,
+    languageOptions: {
+      parser: typescriptParser,
+      parserOptions: { ecmaFeatures: { jsx: true } },
+    },
+    plugins: Object.assign({}, ...presets.map((config) => config.plugins ?? {})),
+    linterOptions: { reportUnusedDisableDirectives: "off" },
+  },
+  {
+    // Spelled out rather than inherited: a block naming these extensions is what makes ESLint lint
+    // a .ts file at all.
+    files: [SOURCE_FILES],
+    rules: {
+      // `no-restricted-imports` with `importNames: ["z"]` also rejects `import * as z`, so the
+      // named specifier is matched by syntax instead.
+      "no-restricted-syntax": [
+        "error",
+        {
+          // `imported` is an Identifier for `{ z }` and a Literal for `{ "z" as zod }`, so the
+          // name lives under a different property in each.
+          selector:
+            "ImportDeclaration[source.value='zod'] > ImportSpecifier:matches([imported.name='z'], [imported.value='z']), ExportNamedDeclaration[source.value='zod'] > ExportSpecifier:matches([local.name='z'], [local.value='z'])",
+          message:
+            "Use `import * as z from 'zod'`. Turbopack doesn't tree-shake the named `z` import and bundles all of zod, its 63 locales included.",
+        },
+      ],
+    },
+  },
 ];
 
 export default eslintConfig;

package/dist/templates/features/blog/blocks/post-content/component.tsx

@@ -4,6 +4,7 @@ import { buildSectionClasses } from '@nextsparkjs/core/types/blocks'
 import { sanitizeBlockHtml } from '@nextsparkjs/core/lib/blocks/sanitize-html'
 import { sel } from '../../lib/selectors'
 import type { PostContentBlockProps } from './schema'
+import { withBasePathIfInApp } from '@nextsparkjs/core/lib/base-path'
 
 /**
  * Post Content Block Component
@@ -182,7 +183,7 @@ export function PostContentBlock({
         {cta && (
           <div className={cn('mt-12 text-center', maxWidthClasses[maxWidth], 'mx-auto')}>
             <a
-              href={cta.link}
+              href={withBasePathIfInApp(cta.link)}
               target={cta.target}
               rel={cta.target === '_blank' ? 'noopener noreferrer' : undefined}
               className="inline-flex items-center justify-center rounded-md bg-primary px-8 py-3 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition-colors shadow-md hover:shadow-lg"

package/dist/templates/features/blog/blocks/post-content/schema.ts

@@ -1,4 +1,4 @@
-import { z } from 'zod'
+import * as z from 'zod'
 import { baseBlockSchema } from '@nextsparkjs/core/types/blocks'
 
 /**

package/dist/templates/features/blog/entities/posts/components/post-header.tsx

@@ -1,4 +1,5 @@
 import { Badge } from '@nextsparkjs/core/components/ui/badge'
+import { withBasePathIfInApp } from '@nextsparkjs/core/lib/base-path'
 import Image from 'next/image'
 
 interface Category {
@@ -24,7 +25,7 @@ export function PostHeader({ post }: PostHeaderProps) {
       {post.featuredImage && (
         <div className="relative w-full h-[400px] md:h-[500px] mb-8" data-cy="post-featured-image-display">
           <Image
-            src={post.featuredImage}
+            src={withBasePathIfInApp(post.featuredImage)}
             alt={post.title}
             fill
             className="object-cover rounded-lg"

package/dist/templates/features/pages/blocks/hero/component.tsx

@@ -4,6 +4,7 @@ import { cn } from '@nextsparkjs/core/lib/utils'
 import { buildSectionClasses, resolveMediaUrl } from '@nextsparkjs/core/types/blocks'
 import { sel } from '../../lib/selectors'
 import type { HeroBlockProps } from './schema'
+import { withBasePathIfInApp } from '@nextsparkjs/core/lib/base-path'
 
 /**
  * Hero Block Component
@@ -71,7 +72,7 @@ export function HeroBlock({
         <div
           className="absolute inset-0 z-0"
           style={{
-            backgroundImage: `url(${backgroundImageUrl})`,
+            backgroundImage: `url(${withBasePathIfInApp(backgroundImageUrl)})`,
             backgroundSize: 'cover',
             backgroundPosition: 'center',
           }}
@@ -100,7 +101,7 @@ export function HeroBlock({
         {ctaConfig && (
           <Button asChild size="lg" className="text-lg px-8 py-6">
             <a
-              href={ctaConfig.link}
+              href={withBasePathIfInApp(ctaConfig.link)}
               target={ctaConfig.target}
               rel={ctaConfig.target === '_blank' ? 'noopener noreferrer' : undefined}
               data-cy={sel('blocks.hero.cta')}

package/dist/templates/features/pages/blocks/hero/schema.ts

@@ -1,4 +1,4 @@
-import { z } from 'zod'
+import * as z from 'zod'
 import {
   baseBlockSchema,
   mediaRefSchema,

package/dist/templates/next.config.mjs

@@ -8,8 +8,52 @@ const __dirname = path.dirname(__filename);
 // For npm mode, use local i18n.ts that re-exports from @nextsparkjs/core
 const withNextIntl = createNextIntlPlugin('./i18n.ts');
 
+// The app's Next.js basePath. Next.js adds it to routes and to <Link>, and to
+// nothing a header names: the CSP report endpoints below are URLs the browser
+// resolves against the origin, so they carry it from here.
+const basePath = '';
+
+/**
+ * Silences the Node built-ins that client bundles reach transitively, and points
+ * `@nextsparkjs/registries` at the generated directory.
+ *
+ * Only webpack reads this, and either major can build with it: Next 15 by
+ * default, Next 16 with `--webpack`. Turbopack resolves `@nextsparkjs/registries`
+ * through the `paths` of tsconfig.json, which Next's webpack skips for imports
+ * made from inside node_modules, as core's are, and leaves a Node built-in alone
+ * unless client code imports it for real.
+ */
+const applyWebpackFallbacks = (config, { isServer }) => {
+  if (!isServer) {
+    config.resolve.fallback = {
+      ...config.resolve.fallback,
+      fs: false,
+      net: false,
+      tls: false,
+      crypto: false,
+      path: false,
+      os: false,
+      stream: false,
+      http: false,
+      https: false,
+      zlib: false,
+      dns: false,
+    }
+  }
+
+  // Add alias for @nextsparkjs/registries to fix ChunkLoadError
+  config.resolve.alias = {
+    ...config.resolve.alias,
+    'pg-native': false,
+    '@nextsparkjs/registries': path.resolve(__dirname, '.nextspark/registries'),
+  }
+
+  return config
+}
+
 /** @type {import('next').NextConfig} */
 const nextConfig = {
+  basePath,
   // Ignore TypeScript build errors - needed until DTS generation is enabled for @nextsparkjs/core
   // Without this, production builds fail due to missing declaration files for deep imports
   typescript: {
@@ -81,33 +125,10 @@ const nextConfig = {
       },
     ],
   },
-  webpack: (config, { isServer }) => {
-    if (!isServer) {
-      config.resolve.fallback = {
-        ...config.resolve.fallback,
-        fs: false,
-        net: false,
-        tls: false,
-        crypto: false,
-        path: false,
-        os: false,
-        stream: false,
-        http: false,
-        https: false,
-        zlib: false,
-        dns: false,
-      }
-    }
-
-    // Add alias for @nextsparkjs/registries to fix ChunkLoadError
-    config.resolve.alias = {
-      ...config.resolve.alias,
-      'pg-native': false,
-      '@nextsparkjs/registries': path.resolve(__dirname, '.nextspark/registries'),
-    }
-
-    return config
-  },
+  // Next.js sets TURBOPACK before it loads this file whenever Turbopack builds
+  // (on 15 with --turbopack, on 16 unless given --webpack), and next-intl picks
+  // its own webpack or Turbopack setup from the same variable.
+  ...(process.env.TURBOPACK ? {} : { webpack: applyWebpackFallbacks }),
   async headers() {
     const isProduction = process.env.NODE_ENV === 'production';
 
@@ -158,7 +179,7 @@ const nextConfig = {
       // CSP violation reporting - sends violations to /api/csp-report
       // report-uri is deprecated but has wider browser support
       // report-to is the modern replacement (configured via Reporting-Endpoints header)
-      "report-uri /api/csp-report",
+      `report-uri ${basePath}/api/csp-report`,
       "report-to csp-endpoint",
     ];
 
@@ -167,7 +188,7 @@ const nextConfig = {
       // Reporting API endpoint for modern browsers (used by report-to CSP directive)
       {
         key: 'Reporting-Endpoints',
-        value: 'csp-endpoint="/api/csp-report"'
+        value: `csp-endpoint="${basePath}/api/csp-report"`
       },
       {
         key: 'X-Content-Type-Options',