Merge branch 'develop'

.github/workflows/ci.yml

@@ -0,0 +1,48 @@
+name: Continuous Integration
+
+on:
+  pull_request:
+    types: [opened, synchronize, reopened, ready_for_review]
+    paths:
+      - ".github/workflows/ci.yml"
+      - "src/**"
+      - "package.json"
+      - "pnpm-lock.yaml"
+      - "next.config.ts"
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.head_ref }}
+  cancel-in-progress: true
+
+jobs:
+  base:
+    name: Continuous Integration
+    if: github.event.pull_request.draft == false
+    runs-on: ubuntu-latest
+
+    permissions:
+      contents: read
+      pull-requests: write
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: pnpm/action-setup@v4
+        name: Install pnpm
+        with:
+          run_install: false
+
+      - name: Install Node.js 22
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22.x
+          cache: "pnpm"
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Lint
+        run: pnpm lint
+
+      - name: Build
+        run: pnpm build

.github/workflows/deployment.yml

@@ -0,0 +1,21 @@
+name: Vercel Production Deployment
+env:
+  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
+  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
+on:
+  push:
+    branches:
+      - main
+jobs:
+  Deploy-Production:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Install Vercel CLI
+        run: npm install --global vercel@latest
+      - name: Pull Vercel Environment Information
+        run: vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }}
+      - name: Build Project Artifacts
+        run: vercel build --prod --token=${{ secrets.VERCEL_TOKEN }}
+      - name: Deploy Project Artifacts to Vercel
+        run: vercel deploy --prebuilt --prod --token=${{ secrets.VERCEL_TOKEN }}

.vscode/settings.json

@@ -10,5 +10,11 @@
   "[typescript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
   "[typescriptreact]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
   "eslint.useFlatConfig": true,
-  "eslint.workingDirectories": [{ "mode": "auto" }]
+  "eslint.workingDirectories": [{ "mode": "auto" }],
+  "files.associations": {
+    "*.css": "tailwindcss"
+  },
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "always"
+  }
 }

LICENCE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Razz21
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,35 +1,42 @@
-# Nextjs 15 template
-- app rotuer
-- Tailwindcss
-- pnpm as package manager
-- eslint
-- Shadcn component library
+# Canvas Editor Lite
 
-Useful commands/scripts:
-- `pnpm dev` - start development server
-- `npx shadcn@latest add -a -y -o` - update all Shadcn components
+Canvas Editor Lite is a lightweight and powerful canvas editor built with Next.js and Fabric.js.
 
-This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+## Features
 
-## Getting Started
+- Lightweight and fast
+- Built with Next.js and Fabric.js
+- Styled with Tailwind CSS
+- Easy to use and extend
 
-First, run the development server:
+## Installation
 
-```bash
-pnpm dev
+To install the dependencies, run:
+
+```sh
+pnpm install
 ```
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+## Usage
+
+To start the development server, run:
+
+```sh
+pnpm dev
+```
 
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+To build the project, run:
 
-This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+```sh
+pnpm build
+```
 
-## Learn More
+To start the production server, run:
 
-To learn more about Next.js, take a look at the following resources:
+```sh
+pnpm start
+```
 
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+## License
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+This project is licensed under the MIT License.

eslint.config.mjs

@@ -1,6 +1,7 @@
-import { dirname } from 'path';
-import { fileURLToPath } from 'url';
-import { FlatCompat } from '@eslint/eslintrc';
+import { dirname } from "node:path";
+import { fileURLToPath } from "node:url";
+
+import { FlatCompat } from "@eslint/eslintrc";
 import eslintConfigPrettier from "eslint-config-prettier";
 
 const __filename = fileURLToPath(import.meta.url);
@@ -12,20 +13,42 @@ const compat = new FlatCompat({
 
 /** @type {import('eslint').Linter.Config[]} */
 const eslintConfig = [
-  ...compat.extends('next/core-web-vitals', 'next/typescript'),
+  ...compat.extends("next/core-web-vitals", "next/typescript"),
   eslintConfigPrettier,
   {
     rules: {
-      '@typescript-eslint/no-empty-object-type': 'warn',
-      '@typescript-eslint/no-unused-vars': [
-        'warn',
+      "@typescript-eslint/no-empty-object-type": "warn",
+      "@typescript-eslint/no-unused-vars": [
+        "warn",
         {
-          argsIgnorePattern: '^_',
-          caughtErrorsIgnorePattern: '^_',
-          varsIgnorePattern: '^_',
+          argsIgnorePattern: "^_",
+          caughtErrorsIgnorePattern: "^_",
+          varsIgnorePattern: "^_",
         },
       ],
       "react/display-name": "off",
+      "import/order": [
+        "error",
+        {
+          groups: ["builtin", "external", ["internal", "parent", "sibling", "index"]],
+          "newlines-between": "always",
+          alphabetize: { order: "asc", caseInsensitive: true },
+          pathGroups: [
+            {
+              pattern: "react",
+              group: "external",
+              position: "before",
+            },
+            {
+              pattern: "next/**",
+              group: "external",
+              position: "before",
+            },
+          ],
+          pathGroupsExcludedImportTypes: ["react"],
+        },
+      ],
+      "no-multiple-empty-lines": ["error", { max: 1, maxBOF: 1, maxEOF: 0 }],
     },
   },
 ];

package.json

@@ -53,14 +53,14 @@
     "react-day-picker": "8.10.1",
     "react-dom": "^19.0.0",
     "react-hook-form": "^7.54.2",
+    "react-hotkeys-hook": "^4.6.1",
     "react-resizable-panels": "^2.1.7",
     "recharts": "^2.15.1",
     "sonner": "^2.0.1",
     "tailwind-merge": "^3.0.1",
     "tailwindcss-animate": "^1.0.7",
     "vaul": "^1.1.2",
-    "zod": "^3.24.2",
-    "zustand": "^5.0.3"
+    "zod": "^3.24.2"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",

src/app/canvas/components/canvas-app.tsx

@@ -1,41 +1,28 @@
 "use client;";
 
-import NavTools from "./nav-tools";
 import CanvasBase from "./canvas-base";
+import CanvasContextMenu from "./canvas-context-menu";
 import CanvasSettings from "./canvas-settings";
-import FloatingPanel from "./floating-panel";
-import Layers from "./layers";
+import CanvasZoom from "./canvas-zoom";
 import LayerSettings from "./layer-settings";
-// import CroppingSettings from "./cropping-settings";
+import Layers from "./layers";
+import NavTools from "./nav-tools";
 import { ThemeToggle } from "@/app/components/theme-toggle";
-import CanvasZoom from "./canvas-zoom";
-import CanvasContextMenu from "./canvas-context-menu";
+import "../lib/fabric";
 
 export type CanvasAppProps = {};
 
 function CanvasApp({}: CanvasAppProps) {
   return (
     <div>
-      <div className="z-20 relative">
-        <FloatingPanel className="fixed left-1/2 -translate-x-1/2 top-4">
-          <NavTools />
-        </FloatingPanel>
-        <FloatingPanel className="fixed left-4 top-1/2 -translate-y-1/2">
-          <Layers />
-        </FloatingPanel>
-        <div className="fixed top-1/2 -translate-y-1/2 right-4 flex flex-col gap-2">
-          <FloatingPanel>
-            <LayerSettings />
-          </FloatingPanel>
-
-          <FloatingPanel>
-            <CanvasSettings />
-          </FloatingPanel>
-          {/* <CroppingSettings /> */}
-        </div>
+      <div className="z-10 relative">
+        <NavTools />
+        <Layers />
+        <LayerSettings />
         <CanvasZoom />
-        <div className="fixed top-4 right-4">
+        <div className="fixed top-4 right-4 flex gap-2">
           <ThemeToggle />
+          <CanvasSettings />
         </div>
       </div>
       <CanvasContextMenu>