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

package/templates/conditional/next/server-components/src/components/boundaries/ServerCard.jsx

@@ -0,0 +1,41 @@
+import React from "react";
+import { ClientCounter } from "./ClientCounter";
+
+/**
+ * Server Component example for RSC boundary.
+ * Renders on the server by default (zero client-side bundle impact).
+ * Demonstrates composing a Client Component across the RSC boundary.
+ * Compatible with both Next.js App Router and Pages Router.
+ */
+export function ServerCard({
+  title = "Server Component Shell",
+  serverMessage = "Rendered on the server with zero client bundle overhead for this card frame.",
+}) {
+  return (
+    <div className="server-boundary p-6 rounded-xl border border-emerald-500/20 bg-emerald-500/5 my-4">
+      <div className="flex items-center justify-between mb-3">
+        <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-emerald-100 text-emerald-800 dark:bg-emerald-900/60 dark:text-emerald-300">
+          Server Component (Default RSC)
+        </span>
+      </div>
+      <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2">
+        {title}
+      </h3>
+      <p className="text-sm text-gray-600 dark:text-gray-300 mb-4">
+        {serverMessage}
+      </p>
+      <div className="p-4 rounded-lg border border-dashed border-emerald-500/30 bg-white/40 dark:bg-black/20">
+        <p className="text-xs font-semibold text-emerald-700 dark:text-emerald-400 uppercase tracking-wider mb-2">
+          Server / Client Boundary
+        </p>
+        <ClientCounter initialCount={0}>
+          <p className="text-xs text-gray-500 dark:text-gray-400 italic">
+            Server-rendered child passed through client component boundary.
+          </p>
+        </ClientCounter>
+      </div>
+    </div>
+  );
+}
+
+export default ServerCard;

package/templates/conditional/next/server-components/src/components/boundaries/ServerCard.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import { ClientCounter } from "./ClientCounter";
+
+export interface ServerCardProps {
+  title?: string;
+  serverMessage?: string;
+}
+
+/**
+ * Server Component example for RSC boundary.
+ * Renders on the server by default (zero client-side bundle impact).
+ * Demonstrates composing a Client Component across the RSC boundary.
+ * Compatible with both Next.js App Router and Pages Router.
+ */
+export function ServerCard({
+  title = "Server Component Shell",
+  serverMessage = "Rendered on the server with zero client bundle overhead for this card frame.",
+}: ServerCardProps) {
+  return (
+    <div className="server-boundary p-6 rounded-xl border border-emerald-500/20 bg-emerald-500/5 my-4">
+      <div className="flex items-center justify-between mb-3">
+        <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-emerald-100 text-emerald-800 dark:bg-emerald-900/60 dark:text-emerald-300">
+          Server Component (Default RSC)
+        </span>
+      </div>
+      <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2">
+        {title}
+      </h3>
+      <p className="text-sm text-gray-600 dark:text-gray-300 mb-4">
+        {serverMessage}
+      </p>
+      <div className="p-4 rounded-lg border border-dashed border-emerald-500/30 bg-white/40 dark:bg-black/20">
+        <p className="text-xs font-semibold text-emerald-700 dark:text-emerald-400 uppercase tracking-wider mb-2">
+          Server / Client Boundary
+        </p>
+        <ClientCounter initialCount={0}>
+          <p className="text-xs text-gray-500 dark:text-gray-400 italic">
+            Server-rendered child passed through client component boundary.
+          </p>
+        </ClientCounter>
+      </div>
+    </div>
+  );
+}
+
+export default ServerCard;

package/templates/conditional/next/server-components/src/components/boundaries/index.js

@@ -0,0 +1,2 @@
+export { ClientCounter } from "./ClientCounter";
+export { ServerCard } from "./ServerCard";

package/templates/conditional/next/server-components/src/components/boundaries/index.ts

@@ -0,0 +1,4 @@
+export { ClientCounter } from "./ClientCounter";
+export type { ClientCounterProps } from "./ClientCounter";
+export { ServerCard } from "./ServerCard";
+export type { ServerCardProps } from "./ServerCard";

package/templates/conditional/testing/jest/hybrid/src/__tests__/App.test.jsx

@@ -0,0 +1,11 @@
+import { describe, it, expect } from "@jest/globals";
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom/jest-globals";
+import App from "@/App";
+
+describe("App", () => {
+  it("renders without crashing", () => {
+    render(<App />);
+    expect(screen.getByText(/Welcome/i)).toBeInTheDocument();
+  });
+});

package/templates/conditional/testing/jest/hybrid/src/__tests__/App.test.tsx

@@ -0,0 +1,11 @@
+import { describe, it, expect } from "@jest/globals";
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom/jest-globals";
+import App from "@/App";
+
+describe("App", () => {
+  it("renders without crashing", () => {
+    render(<App />);
+    expect(screen.getByText(/Welcome/i)).toBeInTheDocument();
+  });
+});

package/templates/conditional/testing/jest/none/src/__tests__/App.test.jsx

@@ -0,0 +1,11 @@
+import { describe, it, expect } from "@jest/globals";
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom/jest-globals";
+import App from "@/App";
+
+describe("App", () => {
+  it("renders without crashing", () => {
+    render(<App />);
+    expect(screen.getByText(/Welcome/i)).toBeInTheDocument();
+  });
+});

package/templates/conditional/testing/jest/none/src/__tests__/App.test.tsx

@@ -0,0 +1,11 @@
+import { describe, it, expect } from "@jest/globals";
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom/jest-globals";
+import App from "@/App";
+
+describe("App", () => {
+  it("renders without crashing", () => {
+    render(<App />);
+    expect(screen.getByText(/Welcome/i)).toBeInTheDocument();
+  });
+});

package/templates/conditional/testing/vitest/hybrid/src/__tests__/App.test.jsx

@@ -0,0 +1,10 @@
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect } from "vitest";
+import App from "@/App";
+
+describe("App", () => {
+  it("renders without crashing", () => {
+    render(<App />);
+    expect(screen.getByText(/Welcome/i)).toBeInTheDocument();
+  });
+});

package/templates/conditional/testing/vitest/hybrid/src/__tests__/App.test.tsx

@@ -0,0 +1,10 @@
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect } from "vitest";
+import App from "@/App";
+
+describe("App", () => {
+  it("renders without crashing", () => {
+    render(<App />);
+    expect(screen.getByText(/Welcome/i)).toBeInTheDocument();
+  });
+});

package/templates/conditional/testing/vitest/none/src/__tests__/App.test.jsx

@@ -0,0 +1,10 @@
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect } from "vitest";
+import App from "@/App";
+
+describe("App", () => {
+  it("renders without crashing", () => {
+    render(<App />);
+    expect(screen.getByText(/Welcome/i)).toBeInTheDocument();
+  });
+});

package/templates/conditional/testing/vitest/none/src/__tests__/App.test.tsx

@@ -0,0 +1,10 @@
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect } from "vitest";
+import App from "@/App";
+
+describe("App", () => {
+  it("renders without crashing", () => {
+    render(<App />);
+    expect(screen.getByText(/Welcome/i)).toBeInTheDocument();
+  });
+});

package/templates/css/tailwind/src/globals.css

@@ -1 +1,11 @@
 @import "tailwindcss";
+@import "./themes.css";
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

package/templates/css/tailwind/src/themes.css

@@ -1,9 +1,91 @@
 /* themes.css — Tailwind v4 theme tokens
  * Synced with ThemeProvider / AppProvider via
- * document.documentElement.dataset.theme.
+ * document.documentElement.dataset.theme and .dark class.
  */
-@custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));
+@custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *, .dark, .dark *));
 
-@theme {
-  --color-primary: #6366f1;
+@theme inline {
+  --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);
+  --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);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+}
+
+:root {
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --radius: 0.625rem;
+}
+
+[data-theme="dark"], .dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.145 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.145 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.985 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.396 0.141 25.723);
+  --destructive-foreground: oklch(0.637 0.237 25.331);
+  --border: oklch(0.269 0 0);
+  --input: oklch(0.269 0 0);
+  --ring: oklch(0.439 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
 }

package/templates/ui/shadcn/lib/utils.js

@@ -0,0 +1,6 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}

package/templates/ui/shadcn/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/templates/ui/shadcn/primitives/Button.jsx

@@ -0,0 +1,48 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+const buttonVariants = ({
+  variant = "default",
+  size = "default",
+  className = "",
+} = {}) => {
+  const base =
+    "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0";
+
+  const variants = {
+    default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+    destructive:
+      "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+    outline:
+      "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+    secondary:
+      "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+    ghost: "hover:bg-accent hover:text-accent-foreground",
+    link: "text-primary underline-offset-4 hover:underline",
+  };
+
+  const sizes = {
+    default: "h-9 px-4 py-2",
+    sm: "h-8 rounded-md px-3 text-xs",
+    lg: "h-10 rounded-md px-8",
+    icon: "h-9 w-9",
+  };
+
+  return cn(base, variants[variant] || variants.default, sizes[size] || sizes.default, className);
+};
+
+const Button = React.forwardRef(
+  ({ className, variant = "default", size = "default", ...props }, ref) => {
+    return (
+      <button
+        className={buttonVariants({ variant, size, className })}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Button.displayName = "Button";
+
+// eslint-disable-next-line react-refresh/only-export-components
+export { Button, buttonVariants };

package/templates/ui/shadcn/primitives/Button.tsx

@@ -0,0 +1,59 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link";
+  size?: "default" | "sm" | "lg" | "icon";
+  asChild?: boolean;
+}
+
+const buttonVariants = ({
+  variant = "default",
+  size = "default",
+  className = "",
+}: {
+  variant?: ButtonProps["variant"];
+  size?: ButtonProps["size"];
+  className?: string;
+} = {}) => {
+  const base =
+    "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0";
+
+  const variants = {
+    default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+    destructive:
+      "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+    outline:
+      "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+    secondary:
+      "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+    ghost: "hover:bg-accent hover:text-accent-foreground",
+    link: "text-primary underline-offset-4 hover:underline",
+  };
+
+  const sizes = {
+    default: "h-9 px-4 py-2",
+    sm: "h-8 rounded-md px-3 text-xs",
+    lg: "h-10 rounded-md px-8",
+    icon: "h-9 w-9",
+  };
+
+  return cn(base, variants[variant] || variants.default, sizes[size] || sizes.default, className);
+};
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant = "default", size = "default", ...props }, ref) => {
+    return (
+      <button
+        className={buttonVariants({ variant, size, className })}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Button.displayName = "Button";
+
+// eslint-disable-next-line react-refresh/only-export-components
+export { Button, buttonVariants };

package/templates/ui/shadcn/primitives/Card.jsx

@@ -0,0 +1,55 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+export const Card = React.forwardRef(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-xl border bg-card text-card-foreground shadow",
+      className
+    )}
+    {...props}
+  />
+));
+Card.displayName = "Card";
+
+export const CardHeader = React.forwardRef(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+));
+CardHeader.displayName = "CardHeader";
+
+export const CardTitle = React.forwardRef(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("font-semibold leading-none tracking-tight", className)}
+    {...props}
+  />
+));
+CardTitle.displayName = "CardTitle";
+
+export const CardDescription = React.forwardRef(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+));
+CardDescription.displayName = "CardDescription";
+
+export const CardContent = React.forwardRef(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+));
+CardContent.displayName = "CardContent";
+
+export const CardFooter = React.forwardRef(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+));
+CardFooter.displayName = "CardFooter";

package/templates/ui/shadcn/primitives/Card.tsx

@@ -0,0 +1,73 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+export const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-xl border bg-card text-card-foreground shadow",
+      className
+    )}
+    {...props}
+  />
+));
+Card.displayName = "Card";
+
+export const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+));
+CardHeader.displayName = "CardHeader";
+
+export const CardTitle = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("font-semibold leading-none tracking-tight", className)}
+    {...props}
+  />
+));
+CardTitle.displayName = "CardTitle";
+
+export const CardDescription = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+));
+CardDescription.displayName = "CardDescription";
+
+export const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+));
+CardContent.displayName = "CardContent";
+
+export const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+));
+CardFooter.displayName = "CardFooter";

package/templates/ui/shadcn/primitives/index.js

@@ -0,0 +1,9 @@
+export { Button, buttonVariants } from "./Button";
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardDescription,
+  CardContent,
+} from "./Card";

package/templates/ui/shadcn/primitives/index.ts

@@ -0,0 +1,9 @@
+export { Button, buttonVariants } from "./Button";
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardDescription,
+  CardContent,
+} from "./Card";

package/templates/css/bootstrap/src/themes.css

@@ -1,14 +0,0 @@
-/* themes.css — Bootstrap 5.3+ theme overrides
- * Bootstrap 5.3+ reads data-bs-theme on a parent element to switch between
- * light/dark variants. The themes here customize the default tokens; the
- * data-bs-theme attribute is applied externally.
- */
-:root[data-bs-theme="light"] {
-  --bs-primary: #6366f1;
-}
-
-:root[data-bs-theme="dark"] {
-  --bs-body-bg: #111827;
-  --bs-body-color: #f9fafb;
-  --bs-primary: #818cf8;
-}