0.5

.prettierrc.cjs

@@ -0,0 +1,3 @@
+module.exports = {
+  ...require('@nnecec/prettier-config'),
+}

app/page.tsx

@@ -1,15 +1,16 @@
 'use client'
 
-import { useState } from 'react'
-
 import clsx from 'clsx'
 import { AnimatePresence, motion } from 'framer-motion'
 
-import { ChevronLeftIcon, ChevronRightIcon, UploadIcon } from '@radix-ui/react-icons'
+import { UploadIcon } from '@radix-ui/react-icons'
 
 import {
   Board,
-  BoardBackground,
+  BoardBackgroundEyedropper,
+  BoardBackgroundMesh,
+  BoardBackgroundPalette,
+  BoardBackgroundProminent,
   BoardPadding,
   ExportButton,
   Frame,
@@ -19,87 +20,73 @@ import {
   PhotoBorderRadius,
 } from '~/core/editor'
 import { robotoMono } from '~/core/fonts'
-import { Button, Tabs, TabsContent, TabsList, TabsTrigger } from '~/core/ui'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '~/core/ui'
 
 export default function Page() {
-  const [hideSidebar, setHideSidebar] = useState(false)
-
   return (
     <div className="flex h-screen w-screen bg-stone-900">
       <AnimatePresence initial={false} mode="popLayout">
-        {!hideSidebar && (
-          <motion.div
-            animate={{ opacity: 1, x: 0 }}
-            className="min-w-[260px] max-w-[260px]"
-            exit={{ opacity: 0, x: -60 }}
-            initial={{ opacity: 0, x: -60 }}
-            layout
-          >
-            <div className="flex h-full flex-col justify-between p-4 pr-0">
-              <div className="flex flex-col gap-2">
-                <h1 className={clsx('rounded-lg text-5xl font-bold tracking-wide', robotoMono.variable)}>Deco</h1>
-                <Tabs aria-label="toggle Board mode or Frame mode" defaultValue="board">
-                  <TabsList className="grid w-full grid-cols-2">
-                    <TabsTrigger value="board">Board</TabsTrigger>
-                    <TabsTrigger value="frame">Frame</TabsTrigger>
-                  </TabsList>
-                  <TabsContent className="flex flex-col gap-4" value="board">
-                    <BoardPadding />
-                    <PhotoBorderRadius />
-                    <FrameScale />
-                    <BoardBackground />
-                  </TabsContent>
-                  <TabsContent value="frame">
-                    <FrameMode />
-                  </TabsContent>
-                </Tabs>
-              </div>
-              <div>
-                <ExportButton />
-                <div className="p-1 text-xs text-neutral-500">
-                  <a href="https://github.com/nnecec" rel="noreferrer" target="_blank">
-                    Made by Foccia.Studio
-                  </a>
-                </div>
+        <motion.div
+          animate={{ opacity: 1, x: 0 }}
+          className="min-w-[260px] max-w-[260px]"
+          exit={{ opacity: 0, x: -60 }}
+          initial={{ opacity: 0, x: -60 }}
+        >
+          <div className="flex h-full flex-col justify-between p-4 pr-0">
+            <div className="flex flex-col gap-2">
+              <h1 className={clsx('rounded-lg text-5xl font-bold tracking-wide', robotoMono.variable)}>Deco</h1>
+
+              <Tabs aria-label="toggle Board mode or Frame mode" defaultValue="board">
+                <TabsList className="grid w-full grid-cols-2">
+                  <TabsTrigger value="board">Board</TabsTrigger>
+                  <TabsTrigger value="frame">Frame</TabsTrigger>
+                </TabsList>
+                <TabsContent className="flex flex-col gap-4" value="board">
+                  <BoardPadding />
+                  <PhotoBorderRadius />
+                  <FrameScale />
+                  <BoardBackgroundPalette />
+                  <BoardBackgroundProminent />
+                  <BoardBackgroundEyedropper />
+                  <BoardBackgroundMesh />
+                </TabsContent>
+                <TabsContent value="frame">
+                  <FrameMode />
+                </TabsContent>
+              </Tabs>
+            </div>
+            <div>
+              <ExportButton />
+              <div className="p-1 text-xs text-neutral-500">
+                <a href="https://github.com/nnecec" rel="noreferrer" target="_blank">
+                  Made by Foccia.Studio
+                </a>
               </div>
             </div>
-          </motion.div>
-        )}
+          </div>
+        </motion.div>
       </AnimatePresence>
-      <motion.div className="h-full grow p-2" layout layoutRoot>
+      <motion.div className="h-full grow p-2">
         <div className="group relative flex h-full items-center justify-center overflow-hidden rounded-xl bg-black shadow-xl">
-          <motion.div className="absolute left-4 top-4 opacity-0 transition-opacity group-hover:opacity-100" layout>
-            <Button
-              className="rounded-full"
-              onClick={() => setHideSidebar(!hideSidebar)}
-              size="icon"
-              variant="secondary"
-            >
-              {hideSidebar ? <ChevronRightIcon /> : <ChevronLeftIcon />}
-            </Button>
-          </motion.div>
-
-          <motion.div layout>
-            <Board>
-              <Frame>
-                <Photo
-                  placeholder={
-                    <div className="flex aspect-square w-[30vw] items-center justify-center bg-neutral-900">
-                      <div className="flex flex-col items-center gap-2">
-                        <UploadIcon className="h-8 w-8 text-neutral-500" />
-                        <p className="text-2xl text-neutral-500">
-                          Upload to{' '}
-                          <span className="bg-gradient-to-r from-pink-500 to-blue-500 bg-clip-text text-transparent">
-                            Deco your Artwork
-                          </span>
-                        </p>
-                      </div>
+          <Board>
+            <Frame>
+              <Photo
+                placeholder={
+                  <div className="flex aspect-square w-[30vw] items-center justify-center bg-neutral-900">
+                    <div className="flex flex-col items-center gap-2">
+                      <UploadIcon className="h-8 w-8 text-neutral-500" />
+                      <p className="text-2xl text-neutral-500">
+                        Upload to{' '}
+                        <span className="bg-gradient-to-r from-pink-500 to-blue-500 bg-clip-text text-transparent">
+                          Deco your Artwork
+                        </span>
+                      </p>
                     </div>
-                  }
-                />
-              </Frame>
-            </Board>
-          </motion.div>
+                  </div>
+                }
+              />
+            </Frame>
+          </Board>
         </div>
       </motion.div>
       {/* <input className="hidden" id="artwork" name="artwork" ref={inputRef} type="file" /> */}

core/editor/assets/index.ts

@@ -1,7 +1,2 @@
-import LeicaLogo from '../assets/leica.svg'
-import ZeissLogo from '../assets/zeiss.svg'
-
-export const logo = {
-  leica: LeicaLogo,
-  zeiss: ZeissLogo,
-}
+export { default as LeicaLogo } from '../assets/leica.svg'
+export { default as ZeissLogo } from '../assets/zeiss.svg'

core/editor/frame-presets/polaroid.ts

@@ -0,0 +1,27 @@
+import { Caveat } from 'next/font/google'
+
+import type { FrameMode } from '~/core/utils/types'
+
+const caveat = Caveat({ subsets: ['latin'] })
+
+export const PolaroidFrame: FrameMode = {
+  frame: {
+    className: 'pt-6 pb-28 px-6 bg-white',
+    items: [
+      {
+        children: 'T.S',
+        props: {
+          className: ['absolute bottom-8 left-6 text-4xl text-black', caveat.className],
+        },
+      },
+      {
+        children: '1989',
+        props: {
+          className: ['absolute bottom-8 right-6 text-4xl text-black', caveat.className],
+        },
+      },
+    ],
+  },
+  logo: 'insta',
+  name: 'Polaroid',
+}

core/editor/frame-presets/xiaomi-leica.ts

@@ -0,0 +1,31 @@
+import Image from 'next/image'
+
+import type { FrameMode } from '~/core/utils/types'
+
+import { LeicaLogo } from '../assets'
+
+export const XiaomiLeicaFrame: FrameMode = {
+  frame: {
+    className: 'pb-20 bg-white',
+    items: [
+      {
+        children: 'XIAOMI 14 PRO',
+        props: {
+          className: 'absolute text-black bottom-6 left-5 font-bold',
+        },
+      },
+      {
+        component: Image,
+        props: {
+          alt: 'leica svg',
+          className: 'absolute text-black bottom-6 right-5',
+          height: 30,
+          src: LeicaLogo,
+          width: 30,
+        },
+      },
+    ],
+  },
+  logo: 'leica',
+  name: 'Xiaomi x Leica',
+}

core/editor/frame.tsx

@@ -42,7 +42,7 @@ export const Frame = ({ children, className }: PropsWithChildren<FrameProps>) =>
             drag: true,
             dragMomentum: false,
             ...item.props,
-            className: 'hover:cursor-grab active:cursor-grabbing',
+            className: clsx(item.props.className, 'hover:cursor-grab active:cursor-grabbing'),
           } as HTMLMotionProps<'div'>,
           item.children,
         )

core/editor/photo.tsx

@@ -41,7 +41,9 @@ export const Photo = ({ className, placeholder }: PropsWithChildren<PhotoProps>)
       }}
     >
       <label className="cursor-pointer" htmlFor="artwork">
-        {src ? <motion.img alt="your artwork" layout src={src} /> : placeholder}
+        {src ?
+          <motion.img alt="your artwork" layout src={src} />
+        : placeholder}
       </label>
       <input className="hidden" id="artwork" name="artwork" ref={inputRef} type="file" />
     </div>

core/editor/store.ts

@@ -17,6 +17,8 @@ export const photoBlurVignetteBlurAtom = atom(0)
 // board
 export const boardPaddingAtom = atom({ x: 0, y: 0 })
 export const boardBackgroundImageAtom = atom('none')
+export const boardBackgroundMeshOffsetAtom = atom(1)
+export const boardBackgroundMeshEnableAtom = atom(false)
 
 export const boardProminentColorsAtom = atom<Promise<any[]>>(async get => {
   const photo = get(photoSrcAtom)