@roboticela/devkit 4.0.0 → 4.1.0

package/registry/components/auth/vite-express-tauri/v1/files/src/contexts/AuthContext.tsx

@@ -0,0 +1,72 @@
+import { createContext, useContext, useEffect, useState } from "react";
+
+interface User { id: string; email: string; name: string; avatar?: string }
+
+interface AuthContextValue {
+  user: User | null;
+  loading: boolean;
+  login: (email: string, password: string) => Promise<void>;
+  register: (name: string, email: string, password: string) => Promise<void>;
+  logout: () => Promise<void>;
+}
+
+const AuthContext = createContext<AuthContextValue | null>(null);
+
+const API = import.meta.env.VITE_API_URL ?? "http://localhost:3000";
+
+export function AuthProvider({ children }: { children: React.ReactNode }) {
+  const [user, setUser] = useState<User | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const token = localStorage.getItem("access_token");
+    if (!token) { setLoading(false); return; }
+    fetch(`${API}/api/auth/me`, {
+      headers: { Authorization: `Bearer ${token}` },
+    })
+      .then((r) => (r.ok ? r.json() : null))
+      .then((d) => setUser(d?.user ?? null))
+      .finally(() => setLoading(false));
+  }, []);
+
+  async function login(email: string, password: string) {
+    const res = await fetch(`${API}/api/auth/login`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ email, password }),
+    });
+    if (!res.ok) { const d = await res.json(); throw new Error(d.message || "Login failed"); }
+    const { user, token } = await res.json();
+    localStorage.setItem("access_token", token);
+    setUser(user);
+  }
+
+  async function register(name: string, email: string, password: string) {
+    const res = await fetch(`${API}/api/auth/register`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ name, email, password }),
+    });
+    if (!res.ok) { const d = await res.json(); throw new Error(d.message || "Registration failed"); }
+    const { user, token } = await res.json();
+    localStorage.setItem("access_token", token);
+    setUser(user);
+  }
+
+  async function logout() {
+    localStorage.removeItem("access_token");
+    setUser(null);
+  }
+
+  return (
+    <AuthContext.Provider value={{ user, loading, login, register, logout }}>
+      {children}
+    </AuthContext.Provider>
+  );
+}
+
+export function useAuth() {
+  const ctx = useContext(AuthContext);
+  if (!ctx) throw new Error("useAuth must be used inside <AuthProvider>");
+  return ctx;
+}

package/registry/components/auth/vite-express-tauri/v1/manifest.json

@@ -0,0 +1,47 @@
+{
+  "version": "1.0.0",
+  "template": "vite-express-tauri",
+  "files": [
+    { "source": "files/src/pages/auth/LoginPage.tsx",       "destination": "src/pages/auth/LoginPage.tsx" },
+    { "source": "files/src/pages/auth/RegisterPage.tsx",    "destination": "src/pages/auth/RegisterPage.tsx" },
+    { "source": "files/src/pages/auth/ForgotPasswordPage.tsx", "destination": "src/pages/auth/ForgotPasswordPage.tsx" },
+    { "source": "files/src/pages/auth/ResetPasswordPage.tsx",  "destination": "src/pages/auth/ResetPasswordPage.tsx" },
+    { "source": "files/src/components/auth/LoginForm.tsx",  "destination": "src/components/auth/LoginForm.tsx" },
+    { "source": "files/src/components/auth/RegisterForm.tsx","destination": "src/components/auth/RegisterForm.tsx" },
+    { "source": "files/src/contexts/AuthContext.tsx",       "destination": "src/contexts/AuthContext.tsx" },
+    { "source": "files/src/lib/authService.ts",             "destination": "src/lib/authService.ts" },
+    { "source": "files/server/routes/auth.ts",              "destination": "server/src/routes/auth.ts" },
+    { "source": "files/server/middleware/requireAuth.ts",   "destination": "server/src/middleware/requireAuth.ts" },
+    { "source": "files/server/services/jwtService.ts",      "destination": "server/src/services/jwtService.ts" }
+  ],
+  "injections": [
+    {
+      "file": "src/main.tsx",
+      "marker": "/* devkit:auth:routes */",
+      "importLine": "import { LoginPage } from './pages/auth/LoginPage';",
+      "routeLine": "<Route path=\"/auth/login\" element={<LoginPage />} />"
+    },
+    {
+      "file": "server/src/index.ts",
+      "marker": "/* devkit:auth:api */",
+      "importLine": "import authRouter from './routes/auth';",
+      "routeLine": "app.use('/api/auth', authRouter);"
+    }
+  ],
+  "dependencies": {
+    "frontend": ["js-cookie"],
+    "devFrontend": ["@types/js-cookie"],
+    "backend": ["jsonwebtoken", "bcryptjs", "nodemailer"],
+    "devBackend": ["@types/jsonwebtoken", "@types/bcryptjs", "@types/nodemailer"]
+  },
+  "envVars": [
+    "JWT_ACCESS_SECRET",
+    "JWT_REFRESH_SECRET",
+    "GOOGLE_CLIENT_ID",
+    "GOOGLE_CLIENT_SECRET",
+    "SMTP_HOST",
+    "SMTP_PORT",
+    "SMTP_USER",
+    "SMTP_PASSWORD"
+  ]
+}

package/registry/components/hero-section/component.json

@@ -0,0 +1,28 @@
+{
+  "name": "hero-section",
+  "displayName": "Hero Section",
+  "description": "Landing page hero banner with multiple design variants. Only the chosen variant is downloaded.",
+  "category": "marketing",
+  "icon": "layout",
+  "author": "Roboticela",
+  "license": "MIT",
+  "tags": ["hero", "landing", "marketing", "banner"],
+  "templates": ["nextjs-compact", "vite-express-tauri"],
+  "platforms": ["web"],
+  "hasVariants": true,
+  "variants": [
+    { "id": "centered",      "label": "Centered",       "description": "Classic centered heading + subheading + CTA buttons" },
+    { "id": "split-image",   "label": "Split Image",    "description": "Text on left, product screenshot on right" },
+    { "id": "gradient-mesh", "label": "Gradient Mesh",  "description": "Animated CSS gradient mesh background" },
+    { "id": "minimal",       "label": "Minimal",        "description": "Typography-only, no background decorations" }
+  ],
+  "versions": {
+    "latest": "1.0.0",
+    "stable": "1.0.0",
+    "history": [
+      { "version": "1.0.0", "releaseDate": "2026-04-05", "breaking": false }
+    ]
+  },
+  "requiredConfig": ["site.name", "site.description"],
+  "optionalConfig": []
+}

package/registry/components/hero-section/nextjs-compact/v1/variants/centered/files/components/hero/HeroSection.tsx

@@ -0,0 +1,97 @@
+export function HeroSection({
+  headline = "Build faster. Ship smarter.",
+  subheadline = "The DevKit that turns your ideas into production-ready apps in minutes.",
+  primaryCta = { label: "Get started", href: "/auth/register" },
+  secondaryCta = { label: "View docs", href: "/docs" },
+}: {
+  headline?: string;
+  subheadline?: string;
+  primaryCta?: { label: string; href: string };
+  secondaryCta?: { label: string; href: string };
+}) {
+  return (
+    <section
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        textAlign: "center",
+        padding: "var(--space-24) var(--space-4)",
+        gap: "var(--space-6)",
+        background: "var(--color-bg)",
+      }}
+    >
+      <span
+        style={{
+          display: "inline-block",
+          padding: "var(--space-1) var(--space-3)",
+          borderRadius: "var(--radius-full)",
+          background: "var(--color-primary-subtle)",
+          color: "var(--color-primary)",
+          fontSize: "var(--text-sm)",
+          fontWeight: "var(--weight-medium)",
+        }}
+      >
+        Now in public beta
+      </span>
+
+      <h1
+        style={{
+          fontSize: "clamp(var(--text-4xl), 6vw, var(--text-6xl))",
+          fontWeight: "var(--weight-extrabold)",
+          fontFamily: "var(--font-display)",
+          color: "var(--color-text)",
+          lineHeight: "var(--leading-tight)",
+          maxWidth: "720px",
+        }}
+      >
+        {headline}
+      </h1>
+
+      <p
+        style={{
+          fontSize: "var(--text-xl)",
+          color: "var(--color-text-muted)",
+          maxWidth: "560px",
+          lineHeight: "var(--leading-relaxed)",
+        }}
+      >
+        {subheadline}
+      </p>
+
+      <div style={{ display: "flex", gap: "var(--space-4)", flexWrap: "wrap", justifyContent: "center" }}>
+        <a
+          href={primaryCta.href}
+          style={{
+            padding: "var(--space-3) var(--space-8)",
+            borderRadius: "var(--radius-md)",
+            background: "var(--color-primary)",
+            color: "var(--color-primary-text)",
+            fontSize: "var(--text-base)",
+            fontWeight: "var(--weight-semibold)",
+            textDecoration: "none",
+            transition: "background var(--transition-fast)",
+          }}
+        >
+          {primaryCta.label}
+        </a>
+        <a
+          href={secondaryCta.href}
+          style={{
+            padding: "var(--space-3) var(--space-8)",
+            borderRadius: "var(--radius-md)",
+            background: "transparent",
+            color: "var(--color-text)",
+            fontSize: "var(--text-base)",
+            fontWeight: "var(--weight-semibold)",
+            textDecoration: "none",
+            border: "1px solid var(--color-border)",
+            transition: "border-color var(--transition-fast)",
+          }}
+        >
+          {secondaryCta.label}
+        </a>
+      </div>
+    </section>
+  );
+}

package/registry/components/hero-section/nextjs-compact/v1/variants/centered/manifest.json

@@ -0,0 +1,17 @@
+{
+  "version": "1.0.0",
+  "template": "nextjs-compact",
+  "variant": "centered",
+  "files": [
+    { "source": "files/components/hero/HeroSection.tsx", "destination": "components/hero/HeroSection.tsx" }
+  ],
+  "injections": [
+    {
+      "file": "app/page.tsx",
+      "marker": "/* devkit:hero-section */",
+      "importLine": "import { HeroSection } from '@/components/hero/HeroSection';",
+      "componentLine": "<HeroSection />"
+    }
+  ],
+  "dependencies": { "frontend": [], "devFrontend": [] }
+}

package/registry/components/hero-section/nextjs-compact/v1/variants/gradient-mesh/files/components/hero/HeroSection.tsx

@@ -0,0 +1,146 @@
+"use client";
+
+export function HeroSection({
+  headline = "Build faster. Ship smarter.",
+  subheadline = "The DevKit that turns your ideas into production-ready apps in minutes.",
+  primaryCta = { label: "Get started", href: "/auth/register" },
+  secondaryCta = { label: "View docs", href: "/docs" },
+}: {
+  headline?: string;
+  subheadline?: string;
+  primaryCta?: { label: string; href: string };
+  secondaryCta?: { label: string; href: string };
+}) {
+  return (
+    <section
+      style={{
+        position: "relative",
+        minHeight: "100vh",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        textAlign: "center",
+        padding: "var(--space-20) var(--space-4)",
+        gap: "var(--space-6)",
+        overflow: "hidden",
+        background: "var(--color-bg)",
+      }}
+    >
+      {/* Animated gradient blobs */}
+      <div aria-hidden style={{ position: "absolute", inset: 0, zIndex: 0, overflow: "hidden" }}>
+        <div
+          style={{
+            position: "absolute",
+            top: "-20%",
+            left: "-10%",
+            width: "60%",
+            height: "60%",
+            borderRadius: "var(--radius-full)",
+            background: "var(--color-primary)",
+            opacity: 0.15,
+            filter: "blur(80px)",
+            animation: "drift1 12s ease-in-out infinite alternate",
+          }}
+        />
+        <div
+          style={{
+            position: "absolute",
+            bottom: "-20%",
+            right: "-10%",
+            width: "60%",
+            height: "60%",
+            borderRadius: "var(--radius-full)",
+            background: "var(--color-secondary)",
+            opacity: 0.12,
+            filter: "blur(80px)",
+            animation: "drift2 15s ease-in-out infinite alternate",
+          }}
+        />
+      </div>
+
+      <style>{`
+        @keyframes drift1 { from { transform: translate(0,0) scale(1); } to { transform: translate(5%,8%) scale(1.1); } }
+        @keyframes drift2 { from { transform: translate(0,0) scale(1); } to { transform: translate(-5%,-8%) scale(1.15); } }
+      `}</style>
+
+      {/* Content */}
+      <span
+        style={{
+          position: "relative",
+          zIndex: 1,
+          display: "inline-block",
+          padding: "var(--space-1) var(--space-3)",
+          borderRadius: "var(--radius-full)",
+          background: "var(--color-primary-subtle)",
+          color: "var(--color-primary)",
+          fontSize: "var(--text-sm)",
+          fontWeight: "var(--weight-medium)",
+        }}
+      >
+        Now in public beta
+      </span>
+
+      <h1
+        style={{
+          position: "relative",
+          zIndex: 1,
+          fontSize: "clamp(var(--text-4xl), 6vw, var(--text-6xl))",
+          fontWeight: "var(--weight-extrabold)",
+          fontFamily: "var(--font-display)",
+          color: "var(--color-text)",
+          lineHeight: "var(--leading-tight)",
+          maxWidth: "720px",
+        }}
+      >
+        {headline}
+      </h1>
+
+      <p
+        style={{
+          position: "relative",
+          zIndex: 1,
+          fontSize: "var(--text-xl)",
+          color: "var(--color-text-muted)",
+          maxWidth: "560px",
+          lineHeight: "var(--leading-relaxed)",
+        }}
+      >
+        {subheadline}
+      </p>
+
+      <div style={{ position: "relative", zIndex: 1, display: "flex", gap: "var(--space-4)", flexWrap: "wrap", justifyContent: "center" }}>
+        <a
+          href={primaryCta.href}
+          style={{
+            padding: "var(--space-3) var(--space-8)",
+            borderRadius: "var(--radius-md)",
+            background: "var(--color-primary)",
+            color: "var(--color-primary-text)",
+            fontWeight: "var(--weight-semibold)",
+            textDecoration: "none",
+            fontSize: "var(--text-base)",
+          }}
+        >
+          {primaryCta.label}
+        </a>
+        <a
+          href={secondaryCta.href}
+          style={{
+            padding: "var(--space-3) var(--space-8)",
+            borderRadius: "var(--radius-md)",
+            background: "rgba(255,255,255,0.1)",
+            backdropFilter: "blur(8px)",
+            color: "var(--color-text)",
+            fontWeight: "var(--weight-semibold)",
+            textDecoration: "none",
+            border: "1px solid var(--color-border)",
+            fontSize: "var(--text-base)",
+          }}
+        >
+          {secondaryCta.label}
+        </a>
+      </div>
+    </section>
+  );
+}

package/registry/components/hero-section/nextjs-compact/v1/variants/gradient-mesh/manifest.json

@@ -0,0 +1,17 @@
+{
+  "version": "1.0.0",
+  "template": "nextjs-compact",
+  "variant": "gradient-mesh",
+  "files": [
+    { "source": "files/components/hero/HeroSection.tsx", "destination": "components/hero/HeroSection.tsx" }
+  ],
+  "injections": [
+    {
+      "file": "app/page.tsx",
+      "marker": "/* devkit:hero-section */",
+      "importLine": "import { HeroSection } from '@/components/hero/HeroSection';",
+      "componentLine": "<HeroSection />"
+    }
+  ],
+  "dependencies": { "frontend": [], "devFrontend": [] }
+}

package/registry/components/hero-section/nextjs-compact/v1/variants/split-image/files/components/hero/HeroSection.tsx

@@ -0,0 +1,110 @@
+import Image from "next/image";
+
+export function HeroSection({
+  headline = "Build faster. Ship smarter.",
+  subheadline = "The DevKit that turns your ideas into production-ready apps in minutes.",
+  primaryCta = { label: "Get started", href: "/auth/register" },
+  secondaryCta = { label: "View docs", href: "/docs" },
+  imageSrc = "/hero-screenshot.png",
+  imageAlt = "App screenshot",
+}: {
+  headline?: string;
+  subheadline?: string;
+  primaryCta?: { label: string; href: string };
+  secondaryCta?: { label: string; href: string };
+  imageSrc?: string;
+  imageAlt?: string;
+}) {
+  return (
+    <section
+      style={{
+        display: "grid",
+        gridTemplateColumns: "1fr 1fr",
+        gap: "var(--space-16)",
+        alignItems: "center",
+        padding: "var(--space-20) var(--space-8)",
+        maxWidth: "1280px",
+        margin: "0 auto",
+        background: "var(--color-bg)",
+      }}
+    >
+      {/* Left — Text */}
+      <div style={{ display: "flex", flexDirection: "column", gap: "var(--space-6)" }}>
+        <span
+          style={{
+            display: "inline-block",
+            padding: "var(--space-1) var(--space-3)",
+            borderRadius: "var(--radius-full)",
+            background: "var(--color-primary-subtle)",
+            color: "var(--color-primary)",
+            fontSize: "var(--text-sm)",
+            fontWeight: "var(--weight-medium)",
+            width: "fit-content",
+          }}
+        >
+          Now in public beta
+        </span>
+
+        <h1
+          style={{
+            fontSize: "clamp(var(--text-3xl), 4vw, var(--text-5xl))",
+            fontWeight: "var(--weight-extrabold)",
+            fontFamily: "var(--font-display)",
+            color: "var(--color-text)",
+            lineHeight: "var(--leading-tight)",
+          }}
+        >
+          {headline}
+        </h1>
+
+        <p style={{ fontSize: "var(--text-lg)", color: "var(--color-text-muted)", lineHeight: "var(--leading-relaxed)" }}>
+          {subheadline}
+        </p>
+
+        <div style={{ display: "flex", gap: "var(--space-4)" }}>
+          <a
+            href={primaryCta.href}
+            style={{
+              padding: "var(--space-3) var(--space-6)",
+              borderRadius: "var(--radius-md)",
+              background: "var(--color-primary)",
+              color: "var(--color-primary-text)",
+              fontWeight: "var(--weight-semibold)",
+              textDecoration: "none",
+              fontSize: "var(--text-base)",
+            }}
+          >
+            {primaryCta.label}
+          </a>
+          <a
+            href={secondaryCta.href}
+            style={{
+              padding: "var(--space-3) var(--space-6)",
+              borderRadius: "var(--radius-md)",
+              background: "transparent",
+              color: "var(--color-text)",
+              fontWeight: "var(--weight-semibold)",
+              textDecoration: "none",
+              border: "1px solid var(--color-border)",
+              fontSize: "var(--text-base)",
+            }}
+          >
+            {secondaryCta.label}
+          </a>
+        </div>
+      </div>
+
+      {/* Right — Image */}
+      <div
+        style={{
+          borderRadius: "var(--radius-xl)",
+          overflow: "hidden",
+          border: "1px solid var(--color-border)",
+          boxShadow: "var(--shadow-xl)",
+        }}
+      >
+        <Image src={imageSrc} alt={imageAlt} width={720} height={480} style={{ width: "100%", height: "auto", display: "block" }} />
+      </div>
+    </section>
+  );
+}

package/registry/components/hero-section/nextjs-compact/v1/variants/split-image/manifest.json

@@ -0,0 +1,17 @@
+{
+  "version": "1.0.0",
+  "template": "nextjs-compact",
+  "variant": "split-image",
+  "files": [
+    { "source": "files/components/hero/HeroSection.tsx", "destination": "components/hero/HeroSection.tsx" }
+  ],
+  "injections": [
+    {
+      "file": "app/page.tsx",
+      "marker": "/* devkit:hero-section */",
+      "importLine": "import { HeroSection } from '@/components/hero/HeroSection';",
+      "componentLine": "<HeroSection />"
+    }
+  ],
+  "dependencies": { "frontend": [], "devFrontend": [] }
+}

package/registry/components/registry.json

@@ -0,0 +1,31 @@
+{
+  "version": "1",
+  "updatedAt": "2026-04-05T00:00:00Z",
+  "components": [
+    {
+      "name": "auth",
+      "displayName": "Authentication",
+      "description": "Complete authentication system: email/password login, registration, email verification, forgot/reset password, and Google OAuth.",
+      "category": "authentication",
+      "icon": "lock",
+      "templates": ["nextjs-compact", "vite-express-tauri"],
+      "platforms": ["web", "desktop"],
+      "hasVariants": false,
+      "latestVersion": "1.0.0",
+      "tags": ["auth", "login", "register", "oauth", "jwt", "email"]
+    },
+    {
+      "name": "hero-section",
+      "displayName": "Hero Section",
+      "description": "Landing page hero banner with 4 design variants: centered, split-image, gradient-mesh, and minimal.",
+      "category": "marketing",
+      "icon": "layout",
+      "templates": ["nextjs-compact", "vite-express-tauri"],
+      "platforms": ["web"],
+      "hasVariants": true,
+      "variants": ["centered", "split-image", "gradient-mesh", "minimal"],
+      "latestVersion": "1.0.0",
+      "tags": ["hero", "landing", "marketing", "banner"]
+    }
+  ]
+}

package/schemas/devkit-config.json

@@ -0,0 +1,63 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://raw.githubusercontent.com/Roboticela/DevKit/main/cli/schemas/devkit-config.json",
+  "title": "DevKit project configuration",
+  "type": "object",
+  "required": ["devkit", "template", "site"],
+  "additionalProperties": true,
+  "properties": {
+    "$schema": { "type": "string", "format": "uri" },
+    "devkit": { "type": "string", "description": "DevKit config format version" },
+    "template": {
+      "type": "string",
+      "enum": ["nextjs-compact", "vite-express-tauri"],
+      "description": "Project template this repo was scaffolded from"
+    },
+    "site": {
+      "type": "object",
+      "required": ["name", "url"],
+      "properties": {
+        "name": { "type": "string" },
+        "url": { "type": "string", "format": "uri" },
+        "icon": { "type": "string" },
+        "description": { "type": "string" }
+      },
+      "additionalProperties": true
+    },
+    "theme": {
+      "type": "object",
+      "additionalProperties": true,
+      "properties": {
+        "preset": { "type": "string" },
+        "colors": {
+          "type": "object",
+          "properties": {
+            "primary": { "type": "string" },
+            "secondary": { "type": "string" }
+          },
+          "additionalProperties": true
+        },
+        "fonts": {
+          "type": "object",
+          "properties": {
+            "sans": { "type": "string" },
+            "mono": { "type": "string" },
+            "display": { "type": "string" }
+          },
+          "additionalProperties": true
+        },
+        "radius": { "type": "string" },
+        "darkMode": { "type": "boolean" },
+        "darkModeStrategy": { "type": "string", "enum": ["class", "media"] }
+      }
+    },
+    "auth": { "type": "object", "additionalProperties": true },
+    "subscriptions": { "type": "object", "additionalProperties": true },
+    "storage": { "type": "object", "additionalProperties": true },
+    "database": {
+      "type": "object",
+      "properties": { "url": { "type": "string" } },
+      "additionalProperties": true
+    }
+  }
+}