feat: Introduce email generation panel, update codegen options, and upgrade various dependencies.

Author: bernaferrari

apps/debug/next-env.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+/// <reference path="./.next/types/routes.d.ts" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

apps/debug/package.json

@@ -11,21 +11,21 @@
   },
   "dependencies": {
     "backend": "workspace:*",
-    "next": "^15.3.4",
+    "next": "^15.5.7",
     "plugin-ui": "workspace:*",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0"
+    "react": "^19.2.1",
+    "react-dom": "^19.2.1"
   },
   "devDependencies": {
-    "@tailwindcss/postcss": "^4.1.11",
-    "@types/node": "^24.0.4",
-    "@types/react": "^19.1.8",
-    "@types/react-dom": "^19.1.6",
+    "@tailwindcss/postcss": "^4.1.17",
+    "@types/node": "^24.10.2",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
     "eslint-config-custom": "workspace:*",
     "postcss": "^8.5.6",
     "tailwindcss": "4.0.14",
     "tsconfig": "workspace:*",
     "types": "workspace:*",
-    "typescript": "^5.8.3"
+    "typescript": "^5.9.3"
   }
 }

apps/plugin/package.json

@@ -10,38 +10,38 @@
     "dev": "pnpm build:watch"
   },
   "dependencies": {
-    "@figma/plugin-typings": "^1.114.0",
+    "@figma/plugin-typings": "^1.121.0",
     "backend": "workspace:*",
     "clsx": "^2.1.1",
     "copy-to-clipboard": "^3.3.3",
     "lucide-react": "^0.483.0",
-    "motion": "^12.19.1",
-    "nanoid": "^5.1.5",
+    "motion": "^12.23.25",
+    "nanoid": "^5.1.6",
     "plugin-ui": "workspace:*",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
-    "tailwind-merge": "^3.3.1"
+    "react": "^19.2.1",
+    "react-dom": "^19.2.1",
+    "tailwind-merge": "^3.4.0"
   },
   "devDependencies": {
-    "@tailwindcss/postcss": "^4.1.11",
-    "@types/node": "^24.0.4",
-    "@types/react": "^19.1.8",
-    "@types/react-dom": "^19.1.6",
-    "@typescript-eslint/eslint-plugin": "^8.35.0",
-    "@typescript-eslint/parser": "^8.35.0",
-    "@vitejs/plugin-react": "^4.6.0",
-    "@vitejs/plugin-react-swc": "^3.10.2",
-    "concurrently": "^9.2.0",
-    "esbuild": "^0.25.5",
+    "@tailwindcss/postcss": "^4.1.17",
+    "@types/node": "^24.10.2",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "@typescript-eslint/eslint-plugin": "^8.49.0",
+    "@typescript-eslint/parser": "^8.49.0",
+    "@vitejs/plugin-react": "^4.7.0",
+    "@vitejs/plugin-react-swc": "^3.11.0",
+    "concurrently": "^9.2.1",
+    "esbuild": "^0.25.12",
     "eslint-config-custom": "workspace:*",
     "eslint-plugin-react-hooks": "^5.2.0",
-    "eslint-plugin-react-refresh": "^0.4.20",
+    "eslint-plugin-react-refresh": "^0.4.24",
     "postcss": "^8.5.6",
     "tailwindcss": "4.0.14",
     "tsconfig": "workspace:*",
     "types": "workspace:*",
-    "typescript": "^5.8.3",
-    "vite": "^5.4.19",
-    "vite-plugin-singlefile": "^2.2.0"
+    "typescript": "^5.9.3",
+    "vite": "^5.4.21",
+    "vite-plugin-singlefile": "^2.3.0"
   }
 }

package.json

@@ -10,10 +10,10 @@
     "format": "prettier --write \"**/*.{ts,tsx,css,md}\""
   },
   "devDependencies": {
-    "eslint": "^9.29.0",
+    "eslint": "^9.39.1",
     "eslint-config-custom": "workspace:*",
-    "prettier": "^3.6.2",
-    "turbo": "^2.5.4",
-    "typescript": "^5.8.3"
+    "prettier": "^3.7.4",
+    "turbo": "^2.6.3",
+    "typescript": "^5.9.3"
   }
 }

packages/backend/package.json

@@ -13,20 +13,20 @@
     "lint": "eslint \"src/**/*.ts*\""
   },
   "dependencies": {
-    "@figma/plugin-typings": "^1.114.0",
-    "js-base64": "^3.7.7",
-    "nanoid": "^5.1.5",
+    "@figma/plugin-typings": "^1.121.0",
+    "js-base64": "^3.7.8",
+    "nanoid": "^5.1.6",
     "react": "19.0.0",
     "react-dom": "19.0.0",
     "types": "workspace:*"
   },
   "devDependencies": {
-    "@types/react": "^19.1.8",
-    "@types/react-dom": "^19.1.6",
-    "eslint": "^9.29.0",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "eslint": "^9.39.1",
     "eslint-config-custom": "workspace:*",
     "tsconfig": "workspace:*",
-    "tsup": "^8.5.0",
-    "typescript": "^5.8.3"
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3"
   }
 }

packages/eslint-config-custom/package.json

@@ -4,9 +4,9 @@
   "main": "index.js",
   "license": "MIT",
   "dependencies": {
-    "eslint-config-next": "^15.3.4",
-    "eslint-config-prettier": "^10.1.5",
-    "eslint-config-turbo": "^2.5.4",
+    "eslint-config-next": "^15.5.7",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-config-turbo": "^2.6.3",
     "eslint-plugin-react": "7.37.4"
   },
   "publishConfig": {

packages/plugin-ui/package.json

@@ -10,22 +10,22 @@
     "lint": "eslint \"src/**/*.ts*\""
   },
   "dependencies": {
-    "@types/react": "^19.1.8",
-    "@types/react-dom": "^19.1.6",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
     "@types/react-syntax-highlighter": "15.5.13",
     "clsx": "^2.1.1",
     "copy-to-clipboard": "^3.3.3",
     "lucide-react": "^0.483.0",
-    "react": "^19.1.0",
-    "react-syntax-highlighter": "^15.6.1",
-    "tailwind-merge": "^3.3.1",
-    "tailwindcss": "^4.1.11"
+    "react": "^19.2.1",
+    "react-syntax-highlighter": "^15.6.6",
+    "tailwind-merge": "^3.4.0",
+    "tailwindcss": "^4.1.17"
   },
   "devDependencies": {
-    "eslint": "^9.29.0",
+    "eslint": "^9.39.1",
     "eslint-config-custom": "workspace:*",
     "tsconfig": "workspace:*",
     "types": "workspace:*",
-    "typescript": "^5.8.3"
+    "typescript": "^5.9.3"
   }
 }

packages/plugin-ui/src/PluginUI.tsx

@@ -4,6 +4,7 @@ import GradientsPanel from "./components/GradientsPanel";
 import ColorsPanel from "./components/ColorsPanel";
 import CodePanel from "./components/CodePanel";
 import About from "./components/About";
+import EmailPanel from "./components/EmailPanel";
 import WarningsPanel from "./components/WarningsPanel";
 import {
   Framework,
@@ -19,7 +20,7 @@ import {
 } from "./codegenPreferenceOptions";
 import Loading from "./components/Loading";
 import { useState } from "react";
-import { InfoIcon } from "lucide-react";
+import { InfoIcon, MailIcon } from "lucide-react";
 import React from "react";
 
 type PluginUIProps = {
@@ -45,29 +46,34 @@ type FrameworkTabsProps = {
   selectedFramework: Framework;
   setSelectedFramework: (framework: Framework) => void;
   showAbout: boolean;
+  showEmail: boolean;
   setShowAbout: (show: boolean) => void;
+  setShowEmail: (show: boolean) => void;
 };
 
 const FrameworkTabs = ({
   frameworks,
   selectedFramework,
   setSelectedFramework,
   showAbout,
+  showEmail,
   setShowAbout,
+  setShowEmail,
 }: FrameworkTabsProps) => {
   return (
     <div className="grid grid-cols-4 sm:grid-cols-2 md:grid-cols-4 gap-1 grow">
       {frameworks.map((tab) => (
         <button
           key={`tab ${tab}`}
-          className={`w-full text-sm rounded-md transition-colors font-medium ${
-            selectedFramework === tab && !showAbout
+          className={`w-full h-8 flex items-center justify-center text-sm rounded-md transition-colors font-medium ${
+            selectedFramework === tab && !showAbout && !showEmail
               ? "bg-primary text-primary-foreground shadow-xs"
               : "bg-muted hover:bg-primary/90 hover:text-primary-foreground"
           }`}
           onClick={() => {
             setSelectedFramework(tab as Framework);
             setShowAbout(false);
+            setShowEmail(false);
           }}
         >
           {tab}
@@ -79,6 +85,7 @@ const FrameworkTabs = ({
 
 export const PluginUI = (props: PluginUIProps) => {
   const [showAbout, setShowAbout] = useState(false);
+  const [showEmail, setShowEmail] = useState(false);
 
   const [previewExpanded, setPreviewExpanded] = useState(false);
   const [previewViewMode, setPreviewViewMode] = useState<
@@ -102,15 +109,33 @@ export const PluginUI = (props: PluginUIProps) => {
             selectedFramework={props.selectedFramework}
             setSelectedFramework={props.setSelectedFramework}
             showAbout={showAbout}
+            showEmail={showEmail}
             setShowAbout={setShowAbout}
+            setShowEmail={setShowEmail}
           />
+          <button
+            className={`px-3 h-8 flex items-center justify-center rounded-md text-sm font-medium transition-colors ${
+              showEmail
+                ? "bg-primary text-primary-foreground shadow-xs"
+                : "bg-muted hover:bg-primary/90 hover:text-primary-foreground"
+            }`}
+            onClick={() => {
+              setShowEmail(!showEmail);
+              setShowAbout(false);
+            }}
+          >
+            Email
+          </button>
           <button
             className={`w-8 h-8 flex items-center justify-center rounded-md text-sm font-medium ${
               showAbout
                 ? "bg-primary text-primary-foreground shadow-xs"
                 : "bg-muted hover:bg-primary/90 hover:text-primary-foreground"
             }`}
-            onClick={() => setShowAbout(!showAbout)}
+            onClick={() => {
+              setShowAbout(!showAbout);
+              setShowEmail(false);
+            }}
             aria-label="About"
           >
             <InfoIcon size={16} />
@@ -130,6 +155,8 @@ export const PluginUI = (props: PluginUIProps) => {
             useOldPluginVersion={props.settings?.useOldPluginVersion2025}
             onPreferenceChanged={props.onPreferenceChanged}
           />
+        ) : showEmail ? (
+          <EmailPanel />
         ) : (
           <div className="flex flex-col items-center px-4 py-2 gap-2 dark:bg-transparent">
             {isEmpty === false && props.htmlPreview && (

packages/plugin-ui/src/codegenPreferenceOptions.ts

@@ -83,7 +83,7 @@ export const selectPreferenceOptions: SelectPreferenceOptions[] = [
     options: [
       { label: "HTML", value: "html" },
       { label: "React (JSX)", value: "jsx" },
-      { label: "Twig (Experimental)", value: "twig" },
+      { label: "Twig", value: "twig" },
     ],
     includedLanguages: ["Tailwind"],
   },

packages/plugin-ui/src/components/EmailPanel.tsx

@@ -0,0 +1,90 @@
+import React from "react";
+import { 
+  SparklesIcon, 
+  ExternalLinkIcon,
+  BotIcon,
+  ArrowRightIcon
+} from "lucide-react";
+
+// Correct Figma Icon Path (Monochrome)
+const CustomFigmaIcon = ({ className }: { className?: string }) => (
+<svg xmlns="http://www.w3.org/2000/svg" className={className} fill="currentColor" viewBox="0 0 256 256"><path d="M192,96a40,40,0,0,0-24-72H96A40,40,0,0,0,72,96a40,40,0,0,0,1.37,65A44,44,0,1,0,144,196V160a40,40,0,1,0,48-64Zm0-32a24,24,0,0,1-24,24H144V40h24A24,24,0,0,1,192,64ZM72,64A24,24,0,0,1,96,40h32V88H96A24,24,0,0,1,72,64Zm24,88a24,24,0,0,1,0-48h32v48H96Zm32,44a28,28,0,1,1-28-28h28Zm40-44a24,24,0,1,1,24-24A24,24,0,0,1,168,152Z"></path></svg>
+);
+
+const EmailPanel = () => {
+  return (
+    <div className="flex flex-col h-full overflow-y-auto px-5 py-8 bg-gradient-to-b from-white to-gray-50 dark:from-black dark:to-[#0a0a0a]">
+      {/* Header */}
+      <div className="text-center mb-10">
+        <div className="inline-flex items-center justify-center p-3.5 mb-5 rounded-3xl bg-black dark:bg-white shadow-xl shadow-black/5 dark:shadow-white/5 ring-1 ring-black/5 dark:ring-white/10">
+           <BotIcon className="w-8 h-8 text-white dark:text-black" />
+        </div>
+        <h1 className="text-4xl font-bold dark:text-white mb-3 tracking-tighter font-display">
+          Kopi AI
+        </h1>
+        <p className="text-xs text-gray-500 dark:text-gray-400 mt-3 max-w-[260px] mx-auto leading-relaxed">
+          AI email marketing design agent.
+        </p>
+      </div>
+
+      {/* Main Cards */}
+      <div className="grid grid-col-1 gap-3 px-1">
+        {/* Create with AI Card */}
+        <div className="group relative overflow-hidden p-4 rounded-2xl bg-white dark:bg-zinc-900 border border-gray-100 dark:border-zinc-800 shadow-sm hover:shadow-md transition-all duration-300">
+          <div className="absolute top-0 right-0 w-16 h-16 bg-gradient-to-br from-violet-100/50 to-transparent dark:from-violet-900/10 dark:to-transparent rounded-bl-3xl -mr-4 -mt-4 transition-transform group-hover:scale-110" />
+          
+          <div className="relative flex items-center gap-4">
+            <div className="w-10 h-10 rounded-xl bg-violet-50 dark:bg-violet-950/30 flex items-center justify-center shrink-0 border border-violet-100 dark:border-violet-900/50">
+              <SparklesIcon className="w-5 h-5 text-violet-600 dark:text-violet-400" />
+            </div>
+            <div>
+              <h3 className="text-sm font-bold text-gray-900 dark:text-gray-100">Create with AI</h3>
+              <p className="text-[11px] text-gray-500 dark:text-gray-400 mt-0.5 leading-snug">
+                Generate emails from scratch tailored to your brand
+              </p>
+            </div>
+          </div>
+        </div>
+
+        {/* Brand Loyal Card */}
+        <div className="group relative overflow-hidden p-4 rounded-2xl bg-white dark:bg-zinc-900 border border-gray-100 dark:border-zinc-800 shadow-sm hover:shadow-md transition-all duration-300">
+          <div className="absolute top-0 right-0 w-16 h-16 bg-gradient-to-br from-orange-100/50 to-transparent dark:from-orange-900/10 dark:to-transparent rounded-bl-3xl -mr-4 -mt-4 transition-transform group-hover:scale-110" />
+          
+          <div className="relative flex items-center gap-4">
+            <div className="w-10 h-10 rounded-xl bg-orange-50 dark:bg-orange-950/30 flex items-center justify-center shrink-0 border border-orange-100 dark:border-orange-900/50">
+              <CustomFigmaIcon className="w-6 h-6 text-gray-900 dark:text-gray-100" />
+            </div>
+            <div>
+              <h3 className="text-sm font-bold text-gray-900 dark:text-gray-100">Generate from Figma</h3>
+              <p className="text-[11px] text-gray-500 dark:text-gray-400 mt-0.5 leading-snug">
+                 Generate emails from Figma designs
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+       {/* Subtext */}
+       <div className="flex justify-center mt-6 mb-4">
+         <p className="text-[11px] leading-relaxed text-gray-400 dark:text-gray-500 text-center max-w-[280px]">
+            Clean, responsive, on-brand email HTML
+         </p>
+       </div>
+
+      {/* CTA */}
+      <div className="mt-auto pt-4 text-center">
+        <a 
+          href="https://docs.google.com/forms/d/e/1FAIpQLSe6F4CKOoj3FgEsualL2pUunTki2aMfO2WK0v5ExO7k_8HjmA/viewform?usp=sharing&ouid=115251107698498111547"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="group w-full inline-flex items-center justify-center gap-2 px-6 py-3.5 rounded-xl bg-gray-900 dark:bg-gray-100 text-white dark:text-black text-sm font-bold transition-all shadow-lg hover:shadow-gray-900/20 dark:hover:shadow-white/10 hover:scale-[1.02] active:scale-[0.98]"
+        >
+          Get Started
+          <ArrowRightIcon className="w-4 h-4 opacity-50 group-hover:translate-x-1 transition-transform" />
+        </a>
+      </div>
+    </div>
+  );
+};
+
+export default EmailPanel;