create-lumen 2.0.0-alpha.2 → 2.0.0-beta.1

package/templates/conditional/next/font/pages-router/src/pages/_app.js

@@ -0,0 +1,20 @@
+import "@/styles/globals.css";
+import { Geist, Geist_Mono } from "next/font/google";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export default function App({ Component, pageProps }) {
+  return (
+    <div className={`${geistSans.variable} ${geistMono.variable}`}>
+      <Component {...pageProps} />
+    </div>
+  );
+}

package/templates/conditional/next/font/pages-router/src/pages/_app.tsx

@@ -0,0 +1,21 @@
+import "@/styles/globals.css";
+import type { AppProps } from "next/app";
+import { Geist, Geist_Mono } from "next/font/google";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export default function App({ Component, pageProps }: AppProps) {
+  return (
+    <div className={`${geistSans.variable} ${geistMono.variable}`}>
+      <Component {...pageProps} />
+    </div>
+  );
+}

package/templates/conditional/next/font/pages-router/src/pages/_document.js

@@ -0,0 +1,18 @@
+import { Html, Head, Main, NextScript } from "next/document";
+
+/**
+ * Pages Router Custom Document.
+ * Note: Per Next.js compiler specifications, next/font loaders are configured
+ * in pages/_app to avoid the 'Cannot be used within pages/_document' compile error.
+ */
+export default function Document() {
+  return (
+    <Html lang="en">
+      <Head />
+      <body className="antialiased">
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  );
+}

package/templates/conditional/next/font/pages-router/src/pages/_document.tsx

@@ -0,0 +1,18 @@
+import { Html, Head, Main, NextScript } from "next/document";
+
+/**
+ * Pages Router Custom Document.
+ * Note: Per Next.js compiler specifications, next/font loaders are configured
+ * in pages/_app to avoid the 'Cannot be used within pages/_document' compile error.
+ */
+export default function Document() {
+  return (
+    <Html lang="en">
+      <Head />
+      <body className="antialiased">
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  );
+}

package/templates/conditional/next/font/src/app/layout.js

@@ -0,0 +1,25 @@
+import { Geist, Geist_Mono } from "next/font/google";
+import "./globals.css";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export const metadata = {
+  title: "Create Lumen App",
+  description: "Generated by create-lumen",
+};
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en" className={`${geistSans.variable} ${geistMono.variable}`}>
+      <body className="antialiased">{children}</body>
+    </html>
+  );
+}

package/templates/conditional/next/font/src/app/layout.tsx

@@ -0,0 +1,30 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import "./globals.css";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "Create Lumen App",
+  description: "Generated by create-lumen",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en" className={`${geistSans.variable} ${geistMono.variable}`}>
+      <body className="antialiased">{children}</body>
+    </html>
+  );
+}

package/templates/conditional/next/font/src/lib/fonts.js

@@ -0,0 +1,11 @@
+import { Geist, Geist_Mono } from "next/font/google";
+
+export const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+export const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});

package/templates/conditional/next/font/src/lib/fonts.ts

@@ -0,0 +1,11 @@
+import { Geist, Geist_Mono } from "next/font/google";
+
+export const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+export const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});

package/templates/conditional/next/font/src/pages/_app.js

@@ -0,0 +1,20 @@
+import "@/styles/globals.css";
+import { Geist, Geist_Mono } from "next/font/google";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export default function App({ Component, pageProps }) {
+  return (
+    <div className={`${geistSans.variable} ${geistMono.variable}`}>
+      <Component {...pageProps} />
+    </div>
+  );
+}

package/templates/conditional/next/font/src/pages/_app.tsx

@@ -0,0 +1,21 @@
+import "@/styles/globals.css";
+import type { AppProps } from "next/app";
+import { Geist, Geist_Mono } from "next/font/google";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export default function App({ Component, pageProps }: AppProps) {
+  return (
+    <div className={`${geistSans.variable} ${geistMono.variable}`}>
+      <Component {...pageProps} />
+    </div>
+  );
+}

package/templates/conditional/next/font/src/pages/_document.js

@@ -0,0 +1,18 @@
+import { Html, Head, Main, NextScript } from "next/document";
+
+/**
+ * Pages Router Custom Document.
+ * Note: Per Next.js compiler specifications, next/font loaders are configured
+ * in pages/_app to avoid the 'Cannot be used within pages/_document' compile error.
+ */
+export default function Document() {
+  return (
+    <Html lang="en">
+      <Head />
+      <body className="antialiased">
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  );
+}

package/templates/conditional/next/font/src/pages/_document.tsx

@@ -0,0 +1,18 @@
+import { Html, Head, Main, NextScript } from "next/document";
+
+/**
+ * Pages Router Custom Document.
+ * Note: Per Next.js compiler specifications, next/font loaders are configured
+ * in pages/_app to avoid the 'Cannot be used within pages/_document' compile error.
+ */
+export default function Document() {
+  return (
+    <Html lang="en">
+      <Head />
+      <body className="antialiased">
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  );
+}

package/templates/conditional/next/image/BUILD_SIZE_NOTE.md

@@ -0,0 +1,15 @@
+# next/image Build Size and Performance Impact
+
+## Built-In Optimization
+`next/image` extends standard HTML `<img>` elements with automatic visual stability and performance optimizations:
+1. **Zero Cumulative Layout Shift (CLS)**: Enforces explicit `width` and `height` dimensions or fills the parent container with `fill`, reserving geometric space before the bitmap payload loads.
+2. **Modern Format Negotiation**: Serves WebP and AVIF modern formats dynamically when supported by the requesting browser, yielding 30–50% bandwidth reduction compared to legacy JPEG/PNG.
+3. **Native Lazy Loading**: Viewport-aware on-demand loading so off-screen images do not delay initial page interactivity. The `priority` property allows opting into preloading for Largest Contentful Paint (LCP) elements.
+
+## Bundle Footprint
+- **Runtime JavaScript Overhead**: ~5 KB gzipped client-side runtime handling IntersectionObserver and responsive `srcSet` generation.
+- **Build Impact**: Zero additional build time overhead during static compilation when referencing local SVGs or remote URLs; image transformations are handled on-demand by the Next.js server image optimizer.
+
+## Router Parity
+- **App Router**: Fully compatible with both Server Components (static rendering) and Client Components (`"use client"`).
+- **Pages Router**: Fully compatible with all page and component hierarchies.

package/templates/conditional/next/image/app-router/src/components/ImageExample.jsx

@@ -0,0 +1,34 @@
+import React from "react";
+import Image from "next/image";
+
+export function ImageExample({
+  src = "/next.svg",
+  alt = "Next.js logo",
+  width = 180,
+  height = 37,
+  priority = false,
+  className = "",
+  caption = "Optimized with next/image",
+}) {
+  return (
+    <figure className={`inline-flex flex-col items-center gap-2 p-4 rounded-xl border border-gray-200 dark:border-gray-800 bg-white/50 dark:bg-black/20 ${className}`}>
+      <div className="relative flex items-center justify-center p-2">
+        <Image
+          src={src}
+          alt={alt}
+          width={width}
+          height={height}
+          priority={priority}
+          className="dark:invert transition-transform hover:scale-105"
+        />
+      </div>
+      {caption && (
+        <figcaption className="text-xs text-gray-500 dark:text-gray-400 text-center font-mono">
+          {caption}
+        </figcaption>
+      )}
+    </figure>
+  );
+}
+
+export default ImageExample;

package/templates/conditional/next/image/app-router/src/components/ImageExample.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import Image from "next/image";
+
+export interface ImageExampleProps {
+  src?: string;
+  alt?: string;
+  width?: number;
+  height?: number;
+  priority?: boolean;
+  className?: string;
+  caption?: string;
+}
+
+export function ImageExample({
+  src = "/next.svg",
+  alt = "Next.js logo",
+  width = 180,
+  height = 37,
+  priority = false,
+  className = "",
+  caption = "Optimized with next/image",
+}: ImageExampleProps) {
+  return (
+    <figure className={`inline-flex flex-col items-center gap-2 p-4 rounded-xl border border-gray-200 dark:border-gray-800 bg-white/50 dark:bg-black/20 ${className}`}>
+      <div className="relative flex items-center justify-center p-2">
+        <Image
+          src={src}
+          alt={alt}
+          width={width}
+          height={height}
+          priority={priority}
+          className="dark:invert transition-transform hover:scale-105"
+        />
+      </div>
+      {caption && (
+        <figcaption className="text-xs text-gray-500 dark:text-gray-400 text-center font-mono">
+          {caption}
+        </figcaption>
+      )}
+    </figure>
+  );
+}
+
+export default ImageExample;

package/templates/conditional/next/image/pages-router/src/components/ImageExample.jsx

@@ -0,0 +1,34 @@
+import React from "react";
+import Image from "next/image";
+
+export function ImageExample({
+  src = "/next.svg",
+  alt = "Next.js logo",
+  width = 180,
+  height = 37,
+  priority = false,
+  className = "",
+  caption = "Optimized with next/image",
+}) {
+  return (
+    <figure className={`inline-flex flex-col items-center gap-2 p-4 rounded-xl border border-gray-200 dark:border-gray-800 bg-white/50 dark:bg-black/20 ${className}`}>
+      <div className="relative flex items-center justify-center p-2">
+        <Image
+          src={src}
+          alt={alt}
+          width={width}
+          height={height}
+          priority={priority}
+          className="dark:invert transition-transform hover:scale-105"
+        />
+      </div>
+      {caption && (
+        <figcaption className="text-xs text-gray-500 dark:text-gray-400 text-center font-mono">
+          {caption}
+        </figcaption>
+      )}
+    </figure>
+  );
+}
+
+export default ImageExample;

package/templates/conditional/next/image/pages-router/src/components/ImageExample.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import Image from "next/image";
+
+export interface ImageExampleProps {
+  src?: string;
+  alt?: string;
+  width?: number;
+  height?: number;
+  priority?: boolean;
+  className?: string;
+  caption?: string;
+}
+
+export function ImageExample({
+  src = "/next.svg",
+  alt = "Next.js logo",
+  width = 180,
+  height = 37,
+  priority = false,
+  className = "",
+  caption = "Optimized with next/image",
+}: ImageExampleProps) {
+  return (
+    <figure className={`inline-flex flex-col items-center gap-2 p-4 rounded-xl border border-gray-200 dark:border-gray-800 bg-white/50 dark:bg-black/20 ${className}`}>
+      <div className="relative flex items-center justify-center p-2">
+        <Image
+          src={src}
+          alt={alt}
+          width={width}
+          height={height}
+          priority={priority}
+          className="dark:invert transition-transform hover:scale-105"
+        />
+      </div>
+      {caption && (
+        <figcaption className="text-xs text-gray-500 dark:text-gray-400 text-center font-mono">
+          {caption}
+        </figcaption>
+      )}
+    </figure>
+  );
+}
+
+export default ImageExample;

package/templates/conditional/next/image/src/components/ImageExample.jsx

@@ -0,0 +1,44 @@
+import React from "react";
+import Image from "next/image";
+
+/**
+ * Universal Next.js Image component example.
+ * Works seamlessly in both App Router (Server and Client components)
+ * and Pages Router.
+ *
+ * Demonstrates:
+ * - Built-in automatic format optimization (WebP/AVIF)
+ * - Intrinsic sizing to avoid layout shift (CLS)
+ * - Priority loading option for LCP optimization
+ */
+export function ImageExample({
+  src = "/next.svg",
+  alt = "Next.js logo",
+  width = 180,
+  height = 37,
+  priority = false,
+  className = "",
+  caption = "Optimized with next/image",
+}) {
+  return (
+    <figure className={`inline-flex flex-col items-center gap-2 p-4 rounded-xl border border-gray-200 dark:border-gray-800 bg-white/50 dark:bg-black/20 ${className}`}>
+      <div className="relative flex items-center justify-center p-2">
+        <Image
+          src={src}
+          alt={alt}
+          width={width}
+          height={height}
+          priority={priority}
+          className="dark:invert transition-transform hover:scale-105"
+        />
+      </div>
+      {caption && (
+        <figcaption className="text-xs text-gray-500 dark:text-gray-400 text-center font-mono">
+          {caption}
+        </figcaption>
+      )}
+    </figure>
+  );
+}
+
+export default ImageExample;

package/templates/conditional/next/image/src/components/ImageExample.tsx

@@ -0,0 +1,54 @@
+import React from "react";
+import Image from "next/image";
+
+export interface ImageExampleProps {
+  src?: string;
+  alt?: string;
+  width?: number;
+  height?: number;
+  priority?: boolean;
+  className?: string;
+  caption?: string;
+}
+
+/**
+ * Universal Next.js Image component example.
+ * Works seamlessly in both App Router (Server and Client components)
+ * and Pages Router.
+ *
+ * Demonstrates:
+ * - Built-in automatic format optimization (WebP/AVIF)
+ * - Intrinsic sizing to avoid layout shift (CLS)
+ * - Priority loading option for LCP optimization
+ */
+export function ImageExample({
+  src = "/next.svg",
+  alt = "Next.js logo",
+  width = 180,
+  height = 37,
+  priority = false,
+  className = "",
+  caption = "Optimized with next/image",
+}: ImageExampleProps) {
+  return (
+    <figure className={`inline-flex flex-col items-center gap-2 p-4 rounded-xl border border-gray-200 dark:border-gray-800 bg-white/50 dark:bg-black/20 ${className}`}>
+      <div className="relative flex items-center justify-center p-2">
+        <Image
+          src={src}
+          alt={alt}
+          width={width}
+          height={height}
+          priority={priority}
+          className="dark:invert transition-transform hover:scale-105"
+        />
+      </div>
+      {caption && (
+        <figcaption className="text-xs text-gray-500 dark:text-gray-400 text-center font-mono">
+          {caption}
+        </figcaption>
+      )}
+    </figure>
+  );
+}
+
+export default ImageExample;

package/templates/conditional/next/image/src/components/image/index.js

@@ -0,0 +1 @@
+export { ImageExample } from "../ImageExample";

package/templates/conditional/next/image/src/components/image/index.ts

@@ -0,0 +1,2 @@
+export { ImageExample } from "../ImageExample";
+export type { ImageExampleProps } from "../ImageExample";

package/templates/conditional/next/server-components/README.md

@@ -0,0 +1,13 @@
+# React Server Components (RSC) Boundaries & Linting
+
+This conditional template provides:
+1. **Server vs Client Boundary Components**: Clean demonstrations of React Server Components composing Client Components with `"use client"`.
+2. **ESLint Rule Wiring (`rsc/no-server-imports-in-client`)**: An AST-based ESLint rule that disallows importing server-only packages (e.g., `server-only`, Node.js built-ins) into Client Components marked with `"use client"`.
+3. **Dual Router Compatibility**: Operates seamlessly in both Next.js App Router and Pages Router.
+
+## Components
+- `ClientCounter`: An interactive client component demonstrating React state and event handling.
+- `ServerCard`: A server-rendered component shell passing children and composing `ClientCounter` across the boundary.
+
+## ESLint Configuration
+Wires `rsc/no-server-imports-in-client` and `no-restricted-imports` into Next.js flat configuration (`eslint.config.mjs`).

package/templates/conditional/next/server-components/eslint.config.mjs

@@ -0,0 +1,47 @@
+import { noServerImportsInClient } from "./rules/no-server-imports-in-client.mjs";
+
+let baseConfig = [];
+try {
+  const next = await import("eslint-config-next");
+  const imported = next.default || next;
+  baseConfig = Array.isArray(imported) ? imported : [imported];
+} catch {
+  try {
+    const { FlatCompat } = await import("@eslint/eslintrc");
+    const { fileURLToPath } = await import("url");
+    const { dirname } = await import("path");
+    const __filename = fileURLToPath(import.meta.url);
+    const __dirname = dirname(__filename);
+    const compat = new FlatCompat({ baseDirectory: __dirname });
+    baseConfig = compat.extends("next/core-web-vitals");
+  } catch {}
+}
+
+const eslintConfig = [
+  ...baseConfig,
+  {
+    plugins: {
+      rsc: {
+        rules: {
+          "no-server-imports-in-client": noServerImportsInClient,
+        },
+      },
+    },
+    rules: {
+      "rsc/no-server-imports-in-client": "error",
+      "no-restricted-imports": [
+        "error",
+        {
+          patterns: [
+            {
+              group: ["server-only", "**/server-only/**"],
+              message: "Do not import server-only packages in client modules.",
+            },
+          ],
+        },
+      ],
+    },
+  },
+];
+
+export default eslintConfig;